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

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

/*ボディの背景の画像（編集ページの背景にも写らないようにするために分ける）*/
img{vertical-align:top;}
.kaigyou:after {content:""; display:block; clear:both;}
.page .date-tags, .post .date-tags {display: none;}
.tagline {display:none;}
.breadcrumb .fa-home, .breadcrumb .fa-folder, .breadcrumb .fa-file-o {display: none; /*非表示*/}
h1, h2, h3 { border:none;}
body {background:#fefaca;}

#main {border:solid 4px #000; }
#sidebar {border:solid 4px #000; }
#main h1 {margin-bottom:100px; font-size:30px;}
#content {margin-top:50px;}

#header-container {position: relative; height:100px !important; background:#fefaca; display: flex; align-items: center; }
#header-container #header { width: 50%; margin-bottom:0; padding-left:0;}
#header-container #header-container-in #header #header-in .logo a{ padding:0; text-align:left; width:40%; filter: brightness(0);}
#header-container #navi { width: 50%; margin-bottom:0; background:transparent;}
#header-container #navi #navi-in ul{ justify-content: flex-end; }
#header-container #navi #navi-in ul li {border:none; }
#header-container #navi #navi-in ul li a{font-weight:bold; color:#000000;}
#header-container #navi #navi-in ul li a:hover{background:#f6ad48; color:#a8a8a8;}

#container, .container {padding:0; margin:0; width:100%;}



/* ====== トップページの設定 ====== */
.home body {background:#f6ad48;}
.home #header-container background:#f6ad48;}

.home #content-top, .home #content-top-in, .home #custom_html-22, .home #content-top .custom-html-widget { margin: 0; padding: 0;}
.home #content-top .custom-html-widget { display: flex; }
.home #content-top-in { width: 100%; max-width: none; box-sizing: border-box;}

.home .toppage_left_box, .toppage_right_box { float: none; width: auto; flex: 0 0 50%; height: calc(100svh - 80px); margin: 0; padding: 0; display: flex;  align-items: center;}
.home .toppage_left_box { background-color: #f6ad48;   display: flex; align-items: center; justify-content: center; text-align: center;}
.home .toppage_right_box { background-color: #f6ad48; color:#FFFFFF; }

.home .toppage_left_box_copy01 {font-size:2.4vw; font-weight:900; color:#FFFFFF; line-height:1.5; letter-spacing:0.1em; width: fit-content; margin-inline: auto; text-align: left; margin-bottom:2vw; }
.home .toppage_left_box_copy02 img {width:30%; height:auto; margin-bottom:2vw;}
.home .toppage_left_box_copy03 img {width:30%; height:auto; }

.home .top_menubox { width: 100%; }
.home .top_menubox a{border:solid 3px #000; text-decoration:none; display:block; width:50%; margin: 0 auto 10px; padding:10px; text-align: left; background:#FFFFFF; color:#000000; font-weight:bold;}
.home .suichoku_50 { width:100%; }

/* トップページの設定はここまで */




/* ====== ヒントと答えボタンの動きを作る ====== */
/*ヒントボタンの開閉*/
.hidden_box_hint { margin: 2em 0; padding: 0; }
.hidden_box_hint label { padding: 7px; margin:0 auto; font-weight: bold; border: solid 2px black; cursor :pointer; display:block; text-align:center; width:80%;}
.hidden_box_hint label:hover { background: #efefef;}
.hidden_box_hint input {display: none;}
.hidden_box_hint .hidden_box_hint_show {height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s;}
.hidden_box_hint input:checked ~ .hidden_box_hint_show {padding: 10px 0; height: auto; opacity: 1;}
/*回答ボタンの開閉*/
.hidden_box_answer { margin: 2em 0; padding: 0;}
.hidden_box_answer label { padding: 7px; margin:0 auto; font-weight: bold; border: solid 2px black; cursor :pointer; display:block; text-align:center; width:80%; border-radius:3px;}
.hidden_box_answer label:hover { background: #efefef;}
.hidden_box_answer input {display: none;}
.hidden_box_answer .hidden_box_answer_show {height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s;}
.hidden_box_answer input:checked ~ .hidden_box_answer_show {padding: 10px 0; height: auto; opacity: 1;}
/* ヒントと答えボタンの設定はここまで */



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

.header-container { display:none !important; }
	

 
#main {border:none; border-radius:10vw;}
	

/* ====== トップページの設定 ====== */
.toppage_left_box, .toppage_right_box { width: 100%; max-width: 100%; flex: 0 0 auto; height: auto;  }
	
.toppage_left_box {min-height:calc(96svh - 50px); }
.toppage_right_box {min-height:calc(96svh - 50px); background:#f3e6c8;}
.toppage_left_box_copy01 {font-size:6.3vw; -webkit-text-stroke: 0.7px currentColor; margin-bottom:7.0vw;}
.toppage_left_box_copy02 img {width:50%; height:auto; margin-bottom:7.0vw;}
.toppage_left_box_copy03 img {width:50%; height:auto; margin-bottom:7.0vw;}

.top_menubox a {width:70%;}
.home #custom_html-22 .custom-html-widget { display: flex; flex-direction: column;}
/* トップページの設定はここまで */

body {margin-top: calc(50px + 4svh)}/* モバイルメニューボックスのmargin分 上下分なので2倍*/

.mobile-header-menu-buttons {margin:2svh; height:50px !important; max-height: 50px; box-shadow: none; background:transparent; }
.mobile-header-menu-buttons > .menu-button {padding:8px 0; }
.mobile-header-menu-buttons > .menu-button:nth-child(1) {width:calc(100%/2); filter: brightness(0); }
.mobile-header-menu-buttons > .menu-button:nth-child(1) img{width:90%; margin-top:0; }
.mobile-header-menu-buttons > .menu-button:nth-child(2){ width:calc(100%/4); }
.mobile-header-menu-buttons > .menu-button:nth-child(3){ width:calc(100%/4); background:#f6ad48; border-radius:1vw;}
.mobile-menu-buttons > .navi-menu-button > .menu-button-in > .custom-menu-caption{font-size:3.1vw; }
.mobile-menu-buttons > .navi-menu-button > .menu-open > .navi-menu-caption {font-size:3.1vw; }
.logo-menu-button{min-width: initial;}

}

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

}

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

}