@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 チャート */
.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 !important;
	margin:0 !important;
	text-align:center;
	display:inline-block;
	line-height: 1.5 !important;
}
.yn-chart__title{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	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:#fdc44f;
	letter-spacing: 1px !important;
	line-height:1.5 !important;
}
.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 !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;
}
.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: #fdc44f;
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: 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 #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 > div ul li:before{
	content:unset !important;
}
.yn-chart__result{
	background:#fff;
	padding:1em;
}
.yn-chart__result-title{
	color: #fdc44f;
	font-size: 1.1em !important;
	font-weight:600 !important;
	padding: 0 !important;
	margin: 0 0 1em !important;
	border-bottom: 1px dashed #fdc44f;
}
@media screen and (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__title:before {
		margin-right:0.3em;
	}
	.yn-chart__title:after {
		margin-left:0.3em;
	}
	.yn-chart__ex,.yn-chart__add{
		font-size:0.9em !important;
	}
	.yn-chart > div > p:before{
		min-width: 30px;
	}
}
/* Twitterシェアボタンなど */
.p-tw-btn,.p-check-btn{
	text-align:center;
	margin:1.5em 5em !important;
	padding:0 !important;
}
.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.5em 0;
	border-radius:30px;
}
.p-tw-btn a{
	background:	#00acee;
}
.p-check-btn a{
	background:#fbc55e;
}
.p-tw-btn a:hover,.p-check-btn a:hover{
	transform: translateY(3px);
	box-shadow: 0 2px 2px rgba(0,0,0,.22);
}
.yn-chart > div > p.p-check-btn{
	background: none !important;
	padding: 0 5em !important;
}
.yn-chart > div > p.p-check-btn:before{
	content:unset !important;
}
@media screen and (max-width: 800px) {
	.p-tw-btn,.p-check-btn{
		margin:1.5em 3em !important;
	}
}
@media screen and (max-width: 560px) {
	.p-tw-btn,.p-check-btn{
		margin:1.5em 1em !important;
	}
	.yn-chart > div > p.p-check-btn{
		padding: 0 3em !important;
	}
}
$(function () {
 
  //  スタートボタンがクリックされたら
  $('.tool-btn').on('click', function () {
    //  クリックした要素のdata属性を取得
    var target = $(this).data('box-link');
    //  上記で取得した要素と同じID名を持つ要素を取得
    var box = $('#' + target);
    //  その要素にclassを付け替える
    $(box).parent().addClass('is-inactive');
    $(box).fadeIn();
    $(this).parent().addClass('is-inactive');
  });
 
  //  「次の質問へ」がクリックされたら
  $('.box .tool-btn').on('click', function () {
    $(this).not($(this).parents('.box').fadeOut(1200));
    $(this).parents('.box').toggleClass('is-inactive');
  });
 
  //  選択肢がクリックされたら
  $('.select').on('click', function () {
    $(this).toggleClass('is-inactive');
    $(this).siblings($('.select')).not($(this)).removeClass('is-inactive');
 
    var select = $(this).parents('.box').find('.select');
    var toolBtn = $(this).parents('.box').find('.tool-btn.next');
 
    //  選択されていないとボタンをクリックできないようにする
    if (select.hasClass('is-inactive')) {
      toolBtn.removeClass('is-inactive');
    } else {
      toolBtn.addClass('is-inactive');
    }
  });
 
  // 診断結果の出し分け
  $('.tool-btn.result').on('click', function () {
 
    // それぞれの選択肢の数を数える
    var yesCnt = $('.select.yes.is-inactive').length;
    var noCnt = $('.select.no.is-inactive').length;
    var vagueCnt = $('.select.vague.is-inactive').length;
 
    // 「はい」が2つ以上の時
    if (yesCnt >= 2) {
      $('#a1').fadeIn();
    }
    // 「はい」が1つ かつ 「いいえ」が1つ または「どちらともいえない」が1つの時
    else if ((yesCnt == 1) && ((noCnt == 1) || (vagueCnt == 1))) {
      if($('#q1 .select.yes').hasClass('is-inactive')) {
        $('#a2').fadeIn();
      } else if($('#q2 .select.yes').hasClass('is-inactive')) {
        $('#a3').fadeIn();
      }
    }
    // 「いいえ」が2つ以上 または 「いいえ」が1つ かつ 「どちらともいえない」が1つの時
    else if ((noCnt >= 2) || ((noCnt == 1) && (vagueCnt == 1))){
      $('#a4').fadeIn();
    }
    // 「どちらともいえない」が2つ以上の時
    else if (vagueCnt >= 2) {
      $('#a5').fadeIn();
    }
  });
 
  //  診断を閉じる
  $('.close-btn, .tool-btn.finish').on('click', function () {
    $('.box').fadeOut("fast");
    $('.select, .btn-wrap, .box-wrap, .box').removeClass('is-inactive');
    $('.tool-btn.next').addClass('is-inactive');
  });
 
});