/* ===========================
   enroll セクション専用スタイル（リセット＆レイアウト調整）
   =========================== */

/* 影響排除リセット */
section.lp60-enroll,
section.lp60-enroll .lp60-enroll__media,
section.lp60-enroll .lp60-enroll__body {
  position: static !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin: 0;
  z-index: auto !important;
  box-sizing: border-box;
}

/* 画像 */
section.lp60-enroll .lp60-enroll__media img {
  display: block;
  max-width: 100%;
  height: auto;
  position: static !important;
}

/* SP: 縦積み */
section.lp60-enroll {
  display: block;
  margin: 9px auto;  /* ← 上下18px → 9px に半減 */
  padding: 0 clamp(8px, 1vw, 12px); /* ← padding も半分程度に */
}

/* PC: 左画像・右テキスト */
@media screen and (min-width: 768px) {
  section.lp60-enroll {
    display: flex !important;
    align-items: flex-start;
    gap: 16px; /* 画像とテキストの間隔は控えめに */
  }
}

/* 開いたパネル全体を「押せそう」に見せる */
.qaList li .answer.open{
  cursor: pointer;
  position: relative;
  border: 1px solid #e5e7eb;      /* 薄い枠 */
  border-radius: 12px;            /* 角丸 */
  background: #fff;               /* 白ベース */
  box-shadow: 0 0 0 rgba(0,0,0,0);/* 初期は影なし */
  transition: background-color .2s ease, box-shadow .2s ease, transform .02s ease;
}

/* ホバーでふわっと */
.qaList li .answer.open:hover{
  background: #fafafa;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* クリック時の押し込み感 */
.qaList li .answer.open:active{
  transform: translateY(1px);
}

/* キーボード操作時の視認性（中の要素にフォーカスが入ったら） */
.qaList li .answer.open:focus-within{
  outline: 2px solid #3b82f6;     /* アクセシビリティ対応 */
  outline-offset: 2px;
}

/* パネル内の本物のUIは通常カーソルのまま */
.qaList li .answer.open a,
.qaList li .answer.open button,
.qaList li .answer.open input,
.qaList li .answer.open textarea,
.qaList li .answer.open select,
.qaList li .answer.open label{
  cursor: auto;
}

/* 低モーション設定のユーザー配慮（任意） */
@media (prefers-reduced-motion: reduce){
  .qaList li .answer.open{
    transition: none;
  }
}

/* 未公開（is-disabled）を全体的に薄く＆クリック不可にするだけ */
.pageLinkBtn .btn01.is-disabled{
  pointer-events: none;      /* クリック無効 */
  opacity: .55;              /* うっすらグレーアウト（見た目は元のまま薄く） */
  filter: saturate(0);       /* 彩度を落として未公開感（不要なら削除OK） */
  cursor: not-allowed;       /* 指マークにしない */
}

/* ホバー演出の無効化（元CSSのhoverを打ち消すための保険） */
.pageLinkBtn .btn01.is-disabled *{
  transition: none !important;
}

/* 未公開メッセージ用 */
.comingSoon.is-disabled {
  pointer-events: none;   /* クリック不可 */
  opacity: .55;           /* 半透明でグレー感 */
  filter: saturate(0);    /* 彩度カット（不要なら削除OK） */
  cursor: not-allowed;    /* カーソルを禁止マークに */
  font-weight: bold;
  text-align: center;     /* 中央寄せ（任意） */
  margin: 12px 0;
}

/* 黄色ブロック（トップ説明など） */
.bgYellow {
  padding: 20px 10px;        /* 上下余白を確保 */
}

/* 第◯部タイトルブロック */
.partHead {
  padding: 20px 0;         /* margin ではなく padding にする */
  background: #FDCD1B;     /* 外側をオレンジ背景に */
}

.partHead .wrap {
  background-color: #F5F5DC; /* 内側はクリーム色 */
  padding: 20px 0;           /* テキスト上下の余白 */
  max-width: 1200px;
  margin: 0 auto;
}

/* 第1部タイトル（全体の部タイトル） */
.partHead h2 {
  margin: 0;
  text-align: center;
  font-size: 1.8rem;   /* 以前の2remからワンサイズ小さく */
  line-height: 1.4;
  font-weight: 700;
}

/* 第1回タイトル（記事タイトル） */
.articleHead h1 {
  font-size: 1.4rem;   /* 以前の1.6remからワンサイズ小さく */
  line-height: 1.4;
  font-weight: 600;
}

.bgYellow .wrap {
  max-width: 1200px;   /* ほかのセクションと同じ幅 */
  margin: 0 auto;      /* 中央寄せ */
}

.contentBlock + .contentBlock {
  margin-top: 20px;
}

/* =========================
   contentBlock：テキストのみ 完全オーバーライド
   ========================= */

/* 1) 手動クラス textOnly を付けたら、単一カラムに強制 */
.contentBlock.textOnly{
  display: block !important;
  flow-root: auto !important;           /* float解除の安全策 */
  grid-template-columns: none !important;
  gap: 0 !important;
  float: none !important;
  clear: both !important;
  width: auto !important;
  max-width: none !important;
}

/* 子のレイアウト指定も無効化 */
.contentBlock.textOnly > *{
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  flex-basis: auto !important;
  display: block !important;
}

/* 画像系は確実に消す（どんな名前でもキャッチ） */
.contentBlock.textOnly > img,
.contentBlock.textOnly img,
.contentBlock.textOnly > figure,
.contentBlock.textOnly figure,
.contentBlock.textOnly picture,
.contentBlock.textOnly [class*="img"],
.contentBlock.textOnly [class*="media"],
.contentBlock.textOnly [class*="thumb"],
.contentBlock.textOnly [class*="photo"]{
  display: none !important;
}

/* テキスト領域は全幅で自然に */
.contentBlock.textOnly [class*="txt"],
.contentBlock.textOnly p{
  margin: 0 0 1em !important;
  width: 100% !important;
}

/* 2) 自動判定版：画像が無い contentBlock は単一カラム化（対応ブラウザで有効） */
@supports selector(:has(*)) {
  .contentBlock:not(:has(img, picture, figure, [class*="img"], [class*="media"], [class*="thumb"], [class*="photo"])) {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    float: none !important;
    clear: both !important;
  }
  .contentBlock:not(:has(img, picture, figure, [class*="img"], [class*="media"], [class*="thumb"], [class*="photo"])) > *{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

/* ブロック間の余白（2つ目以降だけ20px） */
.contentBlock + .contentBlock{
  margin-top: 20px;
}


/* コンテンツ下ボタン */
#theme .bgYellow {
  margin-bottom: -9.375em;
  padding-bottom: 13.75em;
}
#theme .bgYellow .basicBlock + .btnArea {
  width: 100%;
  max-width: 1100px;
  margin: 4em auto 0;
  padding: 0 2em;
  display: flex;
  justify-content: center;
}
#theme .bgYellow .basicBlock + .btnArea div {
  margin: 0 1.5em;
}
#theme .bgYellow .basicBlock + .btnArea div a {
  width: 260px;
  height: 3em;
  color: #017BCF;
  font-weight: bold;
  border: 2px solid #017BCF;
  background-color: #fff;
  border-radius: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
@media screen and (hover: hover) {
  #theme .bgYellow .basicBlock + .btnArea div a:hover {
    color: #fff;
    background-color: #017BCF;
  }
}
#theme .bgYellow .basicBlock + .btnArea div.before a {
  padding-left: 1em;
}
#theme .bgYellow .basicBlock + .btnArea div.before a::before {
  content: "";
  width: 1.5625em;
  height: 1.5625em;
  position: absolute;
  background: url(/assets/images/common/btn_arrow_blue.svg) no-repeat center center;
  background-size: contain;
  transform: rotate(-180deg);
  top: calc((100% - 1.5625em) / 2);
  left: 1em;
}
#theme .bgYellow .basicBlock + .btnArea div.before a:hover::before {
  background: url(/assets/images/common/btn_arrow_white.svg) no-repeat center center;
  background-size: contain;
}
#theme .bgYellow .basicBlock + .btnArea div.next a {
  padding-right: 1em;
}
#theme .bgYellow .basicBlock + .btnArea div.next a::after {
  content: "";
  width: 1.5625em;
  height: 1.5625em;
  background: url(/assets/images/common/btn_arrow_blue.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: calc((100% - 1.5625em) / 2);
  right: 1em;
}
#theme .bgYellow .basicBlock + .btnArea div.next a:hover::after {
  background: url(/assets/images/common/btn_arrow_white.svg) no-repeat center center;
  background-size: contain;
}
@media screen and (max-width: 767px){
  #theme .bgYellow {
    margin-bottom: -11.5625em;
    padding-bottom: 16em;
  }
  #theme .bgYellow .basicBlock + .btnArea {
    width: 89.74%;
    max-width: unset;
    margin: 3em auto 2em;
    padding: 0;
  }
  #theme .bgYellow .basicBlock + .btnArea div {
    width: 50%;
    margin: 0 0.5em;
  }
  #theme .bgYellow .basicBlock + .btnArea div a {
    width: 100%;
    height: 3em;
    margin: 0 0;
    font-size: 0.8125em;
  }
  #theme .bgYellow .basicBlock + .btnArea div.before a {
    padding-left: 1em;
  }
  #theme .bgYellow .basicBlock + .btnArea div.before a::before {
    width: 1em;
    height: 1em;
    top: calc((100% - 1em) / 2);
    left: 1em;
  }
  #theme .bgYellow .basicBlock + .btnArea div.next a {
    padding-right: 1em;
  }
  #theme .bgYellow .basicBlock + .btnArea div.next a::after {
    width: 1em;
    height: 1em;
    top: calc((100% - 1em) / 2);
    right: 1em;
  }
}

/* Add 250929 igarashi */
/* 一覧ページ */
#qa section#mv.top h1,
#theme section#mv.underPlainMv h1{
  width: 50%;
  font-size: 2em;
}
#qa section#mv.top h1 span.small,
#theme section#mv.underPlainMv h1 span.small{
  display: block;
  font-size: 20px;
  line-height: 1.0;
}
#qa section#mv.top h1 span.subEn,
#theme section#mv.top h1 span.subEn{ font-size: 21px; }


#qa .qaList h3{ transition: background-color 0.3s ease; }
#qa .qaList h3 span.fontEn{
  /*font-family: "Poppins","Noto Sans JP", serif;*/
  font-family: "Noto Sans JP", serif;
  line-height: 1.55;
}
#qa .qaList .answer{
  padding: 1.25em 1.25em;
  border-radius: 0;
  border-top: none;
}
#qa .qaList li .answer .lp60-enroll__body{
  padding-bottom: 50px;
  position: relative!important;
}
#qa .qaList li .answer .lp60-enroll__body p{ margin-bottom: 2em; }
#qa .qaList li .answer .lp60-enroll__body .detailPageBtn{
  width: 210px;
  height: 50px;
  padding-right: 1em;
  color: #017BCF;
  font-weight: bold;
  border: 2px solid #017BCF;
  border-radius: 80px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 0;
}
#qa .qaList li .answer .lp60-enroll__body .detailPageBtn::after{
  content: "";
  width: 1.5625em;
  height: 1.5625em;
  background: url(/assets/images/common/btn_arrow_blue.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: calc((100% - 1.5625em) / 2);
  right: 1em;
}
#qa .qaList .answer a{ cursor: pointer; }
@media screen and (hover: hover){
  #qa .qaList h3:hover{
    opacity: 1.0;
    background-color: #FEE623;
  }
  #qa .qaList li .answer:hover{ background-color: #fff7c8; }
  #qa .qaList li .answer:hover .lp60-enroll__body .detailPageBtn{
    color: #fff;
    border-color: #fff;
    background-color: #017BCF;
  }
  #qa .qaList li .answer:hover .lp60-enroll__body .detailPageBtn::after{
    background: url(/assets/images/common/btn_arrow_white.svg) no-repeat center center;
    background-size: contain;
  }
}

@media screen and (min-width: 768px){
  #qa .qaList li section.lp60-enroll{ align-items: unset; }
  #qa .qaList li .answer figure{
    width: 48.2%!important;
    max-width: 510px!important;
  }
  #qa .qaList li .answer figure + .lp60-enroll__body{ width: calc(100% - (48.2% + 16px))!important; }
}
@media screen and (max-width: 767px){
  #qa section#mv.top h1,
  #theme section#mv.underPlainMv h1{
    width: 100%;
    font-size: 1.75em;
  }
  #qa section#mv.top h1 span.small,
  #theme section#mv.underPlainMv h1 span.small{
    margin-bottom: 0.5em;
    font-size: 0.7em;
  }
  #qa section#mv.top h1 span.subEn,
  #theme section#mv.underPlainMv h1 span.subEn{
    font-size: 0.643em;
    line-height: 1.5;
  }


  #qa .qaList h3{ padding: 0.8125em 2.5em 0.8125em 3.0625em; }
  #qa .qaList h3 span.fontEn{
    font-size: 0.9em;
    font-weight: bold;
    top: 1.2em;
  }
  #qa .qaList .answer{ padding: 0.5em 0.5em; }
  section.lp60-enroll .lp60-enroll__media{ margin-bottom: 1em; }
  #qa .qaList li .answer .lp60-enroll__body .detailPageBtn{
    width: 12em;
    height: 3.25em;
  }
}

/* 詳細ページ */
#theme section.bgYellow #mainText .contentBlock h2{
  margin-top: 0;
  margin-bottom: 1em;
}
/* 一覧に戻るボタン */
#theme section.bgYellow p.hereBtn.btn01 a{
  max-width: 260px;
}

@media screen and (max-width: 767px){
  #theme section.partHead{
    padding-bottom: 0;
  }
  #theme section.partHead #mainText .contentBlock{
    padding: 0 20px;
  }
  #theme section.partHead #mainText .contentBlock h2{
    font-size: 1.35em;
  }
  #theme section.bgYellow #mainText.wrap{
    width: 100%;
  }
  /* 一覧に戻るボタン */
  #theme section.bgYellow p.hereBtn.btn01 a{
    width: 44.87%;
    max-width: unset;
    height: 3em;
    margin-bottom: 0;
    padding-right: 1em;
    font-size: 0.8125em;
  }
  #theme section.bgYellow p.hereBtn.btn01 a::after{
    width: 1em;
    height: 1em;
    top: calc((100% - 1em) / 2);
    right: 1em;
  }
}





