@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ヘッダーメニューの小さい説明文（カテゴリ説明）を消す */
.c-smallNavTitle,
.c-smallNavTitle.desc{
  display:none !important;
}

/* 念のため：カテゴリページ側の説明も消す */
.c-pageTitle__desc,
.p-archive__lead,
.term-description{
  display:none !important;
}

/* =========================
   YES/NOチャート（CSSのみ）最終版
   ※ .yn-step方式に統一
========================= */

/* ===== YES/NOチャート：表示切替（これだけ）===== */
.yn-chart .yn-step{ display:none !important; }               /* 全部隠す */
.yn-chart .yn-step:target{ display:block !important; }       /* #のものだけ表示 */
.yn-chart:not(:has(.yn-step:target)) #yn-q1{                 /* #が無い時だけQ1 */
  display:block !important;
}

/* 固定ヘッダー対策（SWELL） */
.yn-chart [id]{ scroll-margin-top:110px; }

/* 外枠 */
.yn-chart{
  margin:0 auto 2rem;
  padding:2em;
  max-width:600px;
  background:#fff8e3;
  box-shadow:0 3px 5px rgba(0,0,0,.07);
  font-size:0.9rem;
}

/* 見出し周り */
.yn-chart__add{
  background:#fdc44f;
  color:#fff;
  padding:0.2em 0.9em;
  margin:0;
  text-align:center;
  display:inline-block;
  line-height:1.5;
}
.yn-chart__title{
  display:flex;
  align-items:center;
  text-align:center;
  width:100%;
  padding:0.5em 0 0.3em;
  margin:0;
  font-size:1.35em;
  font-weight:600;
  color:#fdc44f;
  letter-spacing:1px;
  line-height:1.5;
}
.yn-chart__title:before,
.yn-chart__title:after{
  content:"";
  flex:1;
  height:1px;
  background:#fdc44f;
  display:block;
}
.yn-chart__title:before{ margin-right:0.7em; }
.yn-chart__title:after{  margin-left:0.7em; }
.yn-chart__ex{ text-align:center; margin:0; padding:0; }

/* 画像 */
.yn-chart .yn-step figure{ margin:1em 0 2em; }
.yn-chart .yn-step figure img{ display:block; width:100%; height:auto; }

/* 質問文だけQデザイン */
.yn-chart .yn-chart__display > p{
  margin:2em 0 0;
  padding:0.8em 1em 0.8em 4.3em;
  background:#fff;
  position:relative;
}
.yn-chart .yn-chart__display > p:before{
  content:"Q";
  background:#fdc44f;
  position:absolute;
  left:0; top:0;
  color:#fff;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:1.1em;
  min-width:48px;
}

/* 選択肢（箱リンク） */
.yn-chart__choices{
  margin:2em 0 0;
  padding:0;
  list-style:none;
}
.yn-chart__choices li{ margin:0 0 1em; padding:0; }
.yn-chart__choice{
  background:#fff;
  display:block;
  padding:0.8em;
  text-decoration:none;
  color:#333;
  box-shadow:0 3px 5px rgba(0,0,0,.07);
}
.yn-chart__choice:hover{
  box-shadow: inset 2px 2px 0 0 #ee8f81, 2px 2px 0 0 #ee8f81, 2px 0 0 0 #ee8f81, 0 2px 0 0 #ee8f81;
  transition:0.1s ease-in-out;
  opacity:1;
}

/* 結果 */
.yn-chart__result{
  background:#fff;
  padding:1em;
}
.yn-chart__result-title{
  color:#fdc44f;
  font-size:1.1em;
  font-weight:600;
  padding:0;
  margin:0 0 1em;
  border-bottom:1px dashed #fdc44f;
}

/* ✅ 結果内のpはQ箱にしない（必要なのはこれ） */
.yn-chart .yn-chart__result > p:not(.yn-chart__result-title):not(.p-check-btn){
  background:none;
  padding:0;
  position:static;
  margin:0 0 0.8em;
}

/* もう一度診断するボタン（チャート内に限定） */
.yn-chart .p-check-btn{
  text-align:center;
  margin:1.5em 5em;
  padding:0;
}
.yn-chart .p-check-btn a{
  display:block;
  box-shadow:0 3px 5px rgba(0,0,0,.15);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  padding:0.5em 0;
  border-radius:30px;
  background:#fbc55e;
}
.yn-chart .p-check-btn a:hover{
  transform:translateY(3px);
  box-shadow:0 2px 2px rgba(0,0,0,.22);
}

/* レスポンシブ */
@media (max-width:560px){
  .yn-chart{ padding:1.8em 1.3em; }
  .yn-chart__title{ font-size:1em; }
  .yn-chart__title:before{ margin-right:0.3em; }
  .yn-chart__title:after{ margin-left:0.3em; }
  .yn-chart .yn-chart__display > p{
    margin:1em 0 0;
    padding:0.8em 1em 0.8em 3.3em;
  }
  .yn-chart .yn-chart__display > p:before{ min-width:30px; }
  .yn-chart .p-check-btn{ margin:1.5em 1em; }
}

#yn-q2:target{ outline:6px solid red !important; }
#yn-r1:target{ outline:6px solid blue !important; }