@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*webfont*/
.bungee-spice-regular {
  font-family: "Bungee Spice", sans-serif;
  font-weight: 400;
  font-style: normal;
}
#menu-item-35,#menu-item-36,#menu-item-37,#menu-item-38,#menu-item-39 { font-family: "Bungee Spice", sans-serif;
  font-weight: 600;
  font-style: normal; font-size:18px;}

/*必要ならばここにコードを書く*/
.entry-content a:link { text-decoration:none; }
.entry-content a:hover { color: #e53939; text-decoration:underline; }

/*コンテンツ背景色*/
.no-scrollable-main .main {
  background: #222;
}

.menu-content { background-color: rgb(51,51,51,0.9)}
.menu-close-button {
  display: block;
  cursor: pointer;
  text-align: right;
  font-size: 1.5em;
}
@media screen and (max-width: 689px) {
  site-logo-image {
    border: none !important;
  }
}
/*PC ヘッダーロゴ*/
.hd_logo1 {padding:25px 0 0 140px;}
.header-container-in .hlt-top-menu .logo-header .hd_logo1 {
  padding:0 0 0 0;
}
.hd_logo2 {width:120px !important; position: absolute;
  right: 1.5em;}
.header-container-in .hlt-top-menu .hd_logo2 {
  display: none;
}
@media screen and (max-width: 689px) {
	.hd_logo2 {
  display: none;
}
}
.header-container-in.hlt-top-menu .hd_logo2 img {display:none;}
.header-in {position:relative;}
/* 
* ヘッダーロゴ(テキスト)の反対側に問い合わせボタン表示
*/
div#header-in {
  /* ヘッダーロゴ(テキスト)と問い合わせボタンを横並び */
  flex-direction: row;
}

.header-in .logo-header {
  /* ヘッダーロゴ(テキスト)と問い合わせボタンの位置を両端にする */
  /*margin-right: auto;*/
}

.header-contact {
  /* 問い合わせボタンにパディングを追加（見た目を整える） */
  padding: 10px 0;
}
logo-image {padding:20px 0 10px;}

/*index2カラムタイトル*/
h3.ttl_01 {background-image:url(http://allblacks.moo.jp/wp1/wp-content/uploads/2024/03/ttl_bg06.png); background-repeat:none; color:#fff; background-size:100%; margin-left:-7px; margin-bottom:1em;}
/*indexのNEWSと成績のcss*/
.index_news { background-color:#333333;}
.index_results {background-color:#333333;}
/**/
/*index リスト*/
.index_results ul,.index_news ul {
  padding: 0 0.5em;
  position: relative;
	height:20em; overflow:scroll;
}

.index_results ul li,.index_news ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}

.index_results ul li:before,.index_news ul li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #f8d869; /*アイコン色*/
  font-weight:700;
}

.index_results ul li:last-of-type,.index_news ul li:last-of-type {
  border-bottom: none;
}

/*固定ページの日付非表示*/
.page .date-tags,
.page .author-info {
display: none;
}

/*固定ページのタイトル*/
.entry-title { padding:0 1em 0.2em 1em; border-bottom:solid 1px #484848; margin:1em 0 2em 0;}

/*キャッチフレーズ位置*/
.tagline {
  text-align: left;
  margin: 0.6em 2.7em;
  color:#d3d3d3;
}
@media screen and (max-width: 600px) {
	.tagline {
  text-align: left;
  margin: 0.6em 1em;
  color:#d3d3d3;
}
}
/*パンくずリスト*/
.breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before {
  background-color: #333333;
  margin: 0;
}
#breadcrumb {
   width: 100%;
   padding: .6em calc((100vw - 1085px)/2);
}

@media screen and (max-width:1256px) { 
   #breadcrumb {
      padding: .6em 1em;
   }
}
/*モバイルメニュー背景色*/
.mobile-menu-buttons {
background: #030303;
color: white;
}

.mobile-menu-buttons .menu-button > a {
color: white;
}
/*モバイルメニュー*/
.navi-in > ul li {
  display: block;
  width: 15%;
 
}
/*アピールエリア*/
#appeal {
    height: calc(100vw * calc(387 / 755));
}
/*メインエリア*/
.main {
  padding: 0;

}

/* フルワイドカスタマイズ---------------------------------------------- */
.section-wrap{
	margin: 0 calc(50% - 50vw); /*左右の余白調整*/
       padding:0  calc(50vw - 50%);/*左右の内側余白調整*/
       padding-top:3em;/*セクションの上部余白（ここはお好みで調整可能）*/
       padding-bottom:3em;/*セクションの下部余白（ここはお好みで調整可能）*/
}

.color-section-1{
	background:#222;/*背景色1をここで設定します*/
}

.color-section-2{
	background:#eee;/*背景色2をここで設定します*/
}

.color-section-3{
	background:#fff;/*背景色3をここで設定します*/
}


/*スクロールバーの幅分調整*/
html, body {
	overflow-x: hidden; /*要素からはみ出た部分を表示しない*/
}

/*ヘッダーフッターまわり非表示
.breadcrumb,
.article-header,
.article-footer{
	display: none;
}*/

/*セクションまわりの余白を消す*/
.content {
	margin-top:0;
}

.main {
	padding-top:0!important;
	padding-bottom:0!important;
}

.entry-content{
	margin-top:0;
	margin-bottom:0;
}

.article{
	margin-bottom:0!important;
}

.footer {
	margin-top: 0;
}

 .content-bottom {
	 margin:0;
}

/*indexバナーエリアのPC3列、MB2列*/
.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.item {
  box-sizing: border-box;
  margin: 0;
  width: calc(30% - 20px / 3);
  margin: 0 30px 10px 0;

  &:nth-child(3n) {
    margin-right: 0;
  }
}

.item img {
    border: 5px solid #ddd;
  }

.item_1 {
  box-sizing: border-box;
  margin: 0;
  width: calc(30% - 20px / 3);
  margin: 0 0 10px 0;

}

.item_1 img {
    border: 5px solid #ddd;
  }

@media screen and (max-width: 689px) {
  img {
    /*border: 5px solid #f3f3f3;*/
  }

  .item {
    margin: 0 10px 5px 0;
    width: calc(50% - 10px / 2);

    &:nth-child(2n) {
      margin-right: 0;
    }

    &:nth-child(3n) {
      margin-right: 10px;
    }

    &:nth-child(6n) {
      margin-right: 0;
    }
  }
}


/*
* 新着記事一覧ショートコード用
*/
.news-list .news-list-inner {
 padding: 20px 5px;
 border: 2px solid #f5f5f5;
}
.archive .news-list .news-list-inner {
 background: #fff;
 padding: 20px;
}
.news-list ul {
 list-style: none;
 margin: 0 0 20px;
}
.news-list li {
 padding: 10px;
 border-bottom: 1px solid #ddd;
}
.news-list a {
 color: #333;
 text-decoration-line: none;
}
.news-list a:hover {
 opacity: 0.6;
}
.news-list a.wp-block-button__link {
 color: #fff;
}
.news-list a.wp-block-button__link:hover {
 color: #F87474;
}
.news-list .news_date {
 margin: 0;
 font-size: 14px;
}
.news-list .news_title {
 margin: 0;
 font-size: 18px;
 line-height: 30px;
 padding-top: 10px;
 padding-bottom: 10px;
}

.no-sidebar .content .main {
  margin: 0;
  width: 100%;
  padding: 0 2em;

}
@media screen and (max-width: 689px) {
.no-sidebar .content .main {
  margin: 0;
  width: 100%;
  padding: 0 0.5em;

}
}

/* 通常サイズのブラウザに適用する基本的なテーブルのスタイル */
table{
  border-collapse: collapse; /* セルの境界線を重ね合わせるため、ボーダーを重ねる */
  width: 100%; /* テーブルの幅を100%に設定 */
}

.responsive-table th,
.responsive-table td{
  padding: 15px; /* セル内のコンテンツとセルの境界線の間に余白を設ける */
  border: solid 1px #ccc; /* セルの境界線のスタイルを設定 */
  text-align:center; /* セル内のテキストを中央揃えに設定 */
  box-sizing:border-box; /* ボックスのサイズをコンテンツボックスに設定 */
}
.responsive-table td{text-align:left; /* セル内のテキストを中央揃えに設定 */
background: #d3d3d3; /* 背景色を設定 */
  color: #333; /* テキスト色 */}

.responsive-table th {
  width:30%;
  background: #333; /* 背景色を設定 */
  color: #fff; /* テキスト色 */
}

/* ブラウザサイズが600px以下になったときのスタイル */
@media screen and (max-width: 600px) {
  .responsive-table {
    width: 100%; /* テーブルの幅を100%に設定 */
  }
  
.responsive-table th,
.responsive-table td {
    display: block; /* ブロック要素として表示 */
    width: 100%; /* 幅を100%に設定 */
    border-bottom:none; /* セルの下部の境界線を削除 */
  }
  
  .responsive-table tr:last-child{
    border-bottom: solid 1px #ccc; /* 最後の行の下部に境界線を追加 */
  }
}
@media screen and (max-width: 1023px) {
  body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
    margin-top: 100px;
  }
}
.mobile-menu-buttons {min-height:100px}
.table-post table td{ border-color:#333333;}
.table-post a:link {text-decoration:underline; color:#16518e;}
.table-post a:hover {text-decoration:underline; color:#ba070d;}

/*member style*/
.tmm .tmm_member .tmm_photo {
  margin-left: auto;
  margin-right: auto;
  background-size: cover !important;
  background-position: center center !important;
  width: 80%;
  padding-bottom: 80%;
  border: none;
  -webkit-box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.05);
  -moz-box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.05);
  box-shadow: 2px 0px 1px 0px rgba(0,0,0,0.05);
  border-radius: 14% !important;
  margin-top: -30%;
  border: 3px solid #eeeeee;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

#ctf .ctf-item {   padding: 15px 5px;   overflow: hidden;   font-size: 14px ! important; }