@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.7
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* アピールエリア */
@media screen and (max-width: 769px) {
	div.appeal-in {
		display: none;
	}
}

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

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

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

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


/* スライドイン背景色（モバイル） */
.mobile-menu-buttons {
background: rgba(217,227,240,.8); /* RGBA形式 */
}

/*グローバルメニューのフォントサイズ等変更	font-size: 18px;
.navi-in .menu-header .item-label{
	font-weight: bold;
}*/

/*マウスオーバー時 背景色と文字色が変わる	color: #FF0000!important	transition: 0.0s ;
;
*/
#navi .navi-in a:hover{
	font-weight: bold;
}

/*---------------------------------
表の色を変える
かなり薄い青　rgba(217,227,240,1);
薄い青　rgba(178,197,223,1);
--------------------------------*/
.article .wp-block-table td,.wp-block-table th {
  border-color: rgba(178,197,223,1);
}

.tablepress-id-19 td,
.tablepress-id-19 th {
  text-align: center;
}

/*---------------------------------
ボタンの枠の色と太さを変える
--------------------------------*/
<a rel="noopener" target="_blank" href="https://line.me/R/ti/p/%40cqf0382d" class="btn btn-l has-text-color has-background has-border-color has-white-color">登録する</a>

/*---------------------------------
ボックス（白抜き）の枠の色と太さを変える
--------------------------------*/
.wp-block-cocoon-blocks-blank-box-1.blank-box.block-box{border-width: 2px; border-color: #004097;}  /*枠の太さと灰色の変更 */

/*---------------------------------
もくじの色を変える
--------------------------------*/
/*  color:#008080!important;文字色
.background-color:#D7DEF3!important;背景色*/ 
/*.toc a {
  color:#008080!important;文字色}*/
/*.toc {
  border-color:#d9e3f0!important;}　枠線*/

.navi, .navi-in{
	width: 1256px;
	margin: 0 auto
}

/* 北大コーチLP内のH2だけCocoon装飾を解除 */
.hokudai-lp h2{
  background:none !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
}

/* Cocoonの疑似要素も解除 */
.hokudai-lp h2::before,
.hokudai-lp h2::after{
  content:none !important;
  display:none !important;
}

.lp-message{
  position:relative;
  text-align:center;
  padding:20px 20px 24px;
  border-bottom:2px solid #1D2E64;
  color:#1D2E64;
  font-weight:700;
  line-height:1.6;
}

/* 下向きの吹き出し部分 */
.lp-message::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-14px;
  width:24px;
  height:24px;
  background:#fff;
  border-right:2px solid #1D2E64;
  border-bottom:2px solid #1D2E64;
  transform:translateX(-50%) rotate(45deg);
}

/* =========================
   FAQ 全体
========================= */

.hc-faq {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}


/* =========================
   各Q&Aカード
========================= */

.hc-faq details {
  background: #ffffff;
  border: 1px solid #D7DEF3;
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}


/* =========================
   質問部分
========================= */

.hc-faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;

  padding: 20px 58px 20px 66px;

  background: #ffffff;
  color: #1D2E64;

  font-weight: 700;
  line-height: 1.6;
}


/* 標準の三角を消す */
.hc-faq summary::-webkit-details-marker {
  display: none;
}

.hc-faq summary::marker {
  content: "";
}


/* =========================
   Qマーク
========================= */

.hc-faq summary::before {
  content: "Q";

  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #1D2E64;
  color: #FFF340;

  border-radius: 8px;

  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}


/* =========================
   ＋ / － ボタン
========================= */

.hc-faq summary::after {
  content: "＋";

  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);

  color: #1D2E64;

  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.hc-faq details[open] summary::after {
  content: "－";
}


/* =========================
   開いている質問
========================= */

.hc-faq details[open] summary {
  background: #F8F9FC;
}


/* =========================
   回答部分
========================= */

.hc-faq .faq-answer {
  padding: 20px 24px 22px 66px;

  background: #F8F9FC;
  color: #252A35;

  line-height: 1.9;

  border-top: 1px solid #E8ECF5;
}

.hc-faq .faq-answer p {
  margin: 0 0 10px;
}

.hc-faq .faq-answer p:last-child {
  margin-bottom: 0;
}


/* =========================
   黄色マーカー強調
========================= */

.hc-faq .faq-point {
  display: inline;

  color: #1D2E64;
  font-weight: 700;

  background: linear-gradient(
    transparent 65%,
    #FFF340 65%
  );
}


/* =========================
   PC hover
========================= */

@media (hover: hover) {

  .hc-faq summary:hover {
    background: #F8F9FC;
  }

}


/* =========================
   スマホ表示
========================= */

@media (max-width: 767px) {

  .hc-faq {
    max-width: none;
  }

  .hc-faq details {
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .hc-faq summary {
    padding: 17px 46px 17px 56px;
    line-height: 1.55;
  }

  /* Qマーク */
  .hc-faq summary::before {
    left: 14px;

    width: 32px;
    height: 32px;

    border-radius: 7px;

    font-size: 16px;
  }

  /* ＋ / － */
  .hc-faq summary::after {
    right: 14px;
    font-size: 22px;
  }

  /* 回答 */
  .hc-faq .faq-answer {
    padding: 17px 16px 19px 56px;
    line-height: 1.8;
  }

}