@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
*/

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

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

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

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

/* YES・NO チャート（自動生成CSS / CSS Variables版） */
.yn-chart{
  margin:0 auto 2rem;
  padding:2em;
  max-width:600px;
  background:var(--panel-bg, #F6EDEC);
  box-shadow:0 3px 5px rgba(0,0,0,.07);
  font-size:0.9rem;
}
.yn-chart__add{
  background:var(--accent, #7E605F);
  color:#fff;
  padding:0.2em 0.9em!important;
  margin:0!important;
  text-align:center;
  display:inline-block;
  line-height:1.5!important;
}
.yn-chart__title{
  display:flex;
  align-items:center;
  text-align:center;
  width:100%;
  padding:0.5em 0 0.3em!important;
  margin:0 auto!important;
  font-size:1.35em!important;
  font-weight:600!important;
  color:var(--title, #7E605F);
  letter-spacing:1px!important;
  line-height:1.5!important;
}
.yn-chart__title:before,
.yn-chart__title:after{
  content:"";
  flex:1;
  height:1px;
  background:var(--title, #7E605F);
  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!important;
  padding:0!important;
}

/* 各画面ブロック */
.yn-chart>div{
  display:none;
  padding-top:100px;
  margin-top:-100px;
}
.yn-chart>div.yn-chart__display{
  display:block;
}

.yn-chart>div>figure{
  margin:1em 0 2em;
}
.yn-chart>div>figure img{
  display:block;
  max-width:100%;
  height:auto;
}

/* 質問パネル */
.yn-chart>div>p{
  margin:2em 0 0!important;
  padding:0.8em 1em 0.8em 4.3em!important;
  background:#fff;
  position:relative;
}
.yn-chart>div>p:before{
  content:"Q";
  background:var(--accent, #7E605F);
  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>div ul{
  margin:2em 0 0!important;
  padding:0!important;
  list-style:none!important;
  border:none;
}
.yn-chart>div ul li{
  margin:0 0 1em 1em!important;
  padding:0!important;
}
.yn-chart>div ul li:last-child{
  margin:0 0 0 1em!important;
}
.yn-chart>div ul li a{
  background:#fff;
  display:block;
  padding:0.8em!important;
  text-decoration:none;
  color:#333;
  box-shadow:0 3px 5px rgba(0,0,0,.07);
}
.yn-chart>div ul li a:hover{
  box-shadow:inset 2px 2px 0 0 var(--hover, #7E605F),
             2px 2px 0 0 var(--hover, #7E605F),
             2px 0 0 0 var(--hover, #7E605F),
             0 2px 0 0 var(--hover, #7E605F);
  transition:0.1s ease-in-out;
  opacity:1;
}

/* 結果表示 */
.yn-chart__result{
  background:#fff;
  padding:1em;
}
.yn-chart__result-title{
  color:var(--title, #7E605F);
  font-size:1.1em!important;
  font-weight:600!important;
  padding:0!important;
  margin:0 0 1em!important;
  border-bottom:1px dashed var(--title, #7E605F);
}
.yn-chart__result-body{
  line-height:1.8;
  font-size:0.95rem;
}
.yn-chart__result-body a{
  color:#0073aa;
  text-decoration:underline;
}
.yn-chart__result-body a:hover{
  opacity:.8;
}

/* 番号付きインデント */
.indent-line{
  display:flex;
  align-items:flex-start;
  margin-left:1.5em;
}
.indent-mark{
  font-weight:600;
  margin-right:0.4em;
  line-height:1.8;
  white-space:nowrap;
}
.indent-text{
  line-height:1.8;
  flex:1;
}

/* 下部アクションボタン行 */
.yn-action-row{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  margin:1.2em 0 0;
}
.p-tw-btn,
.p-check-btn{
  margin:0!important;
  padding:0!important;
  text-align:center;
}
.p-tw-btn a,
.p-check-btn a{
  display:block;
  box-shadow:0 3px 5px rgba(0,0,0,.15);
  color:#fff!important;
  font-weight:600!important;
  text-decoration:none!important;
  padding:0.6em 1.2em;
  border-radius:30px;
}
.p-tw-btn a{
  background:var(--twitter, #E6C2BE);
}
.p-check-btn a{
  background:var(--accent, #7E605F);
}
.p-tw-btn a:hover,
.p-check-btn a:hover{
  transform:translateY(3px);
  box-shadow:0 2px 2px rgba(0,0,0,.22);
}

/* "Q"ラベルを付けたくない要素 (ボタン行など) */
.yn-chart>div>p.p-check-btn{
  background:none!important;
  padding:0!important;
  margin:0!important;
}
.yn-chart>div>p.p-check-btn:before{
  content:unset!important;
}

@media(max-width:560px){
  .yn-chart{
    padding:1.8em 1.3em;
  }
  .yn-chart>div>figure{
    margin:0.5em 0;
  }
  .yn-chart>div>p{
    margin:1em 0 0!important;
    padding:0.8em 1em 0.8em 3.3em!important;
  }
  .yn-chart>div ul{
    margin:1em 0 0!important;
  }
  .yn-chart__title{
    font-size:1em!important;
  }
  .yn-chart>div>p:before{
    min-width:30px;
  }
  .yn-action-row{
    flex-direction:column;
    gap:10px;
  }
}