@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 {display: none;}
.tagline {display:none;}
.breadcrumb .fa-home, .breadcrumb .fa-folder, .breadcrumb .fa-file-o {display: none; /*非表示*/}
h1, h2, h3 { border:none;}

#header-container {position: relative; height:80px !important; background:#f6ad48;}
#header-container #header { width: 50%; margin-bottom: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; }
#header-container #navi #navi-in ul li a:hover{background:#f6ad48; color:#a8a8a8;}

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


/* ====== トップページの設定 ====== */

.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;}

.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;}
.toppage_left_box { background-color: #f6ad48;   display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;}
.toppage_right_box { background-color: #f6ad48; color:#FFFFFF; }

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

.top_menubox {
  width: 100%; 
}
.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;}
.suichoku_50 { width:100%; }


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


.mondai_box {margin:0 0 30px 0; padding:30px 10% 30px 10%; background:#f3e6c8; border:3px solid #7b5a2e; border-radius:8px; box-shadow:inset 0 0 0 2px #d6c29a,inset 0 0 12px rgba(0,0,0,0.15);}








/* ====== ヒントと答えボタンの動きを作る ====== */

/*ヒントと回答ボタンの開閉*/
.hidden_box { margin: 2em 0;/*前後の余白*/    padding: 0;}
/*ボタン装飾*/
.hidden_box label { padding: 15px; margin:0 auto; font-weight: bold; border: solid 2px black; cursor :pointer; display:block; text-align:center; width:80%;}
/*ボタンホバー時*/
.hidden_box label:hover { background: #efefef;}
/*チェックは見えなくする*/
.hidden_box input {display: none;}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s;}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {padding: 10px 0; height: auto; opacity: 1;}

/*【ウミガメ問題　1問ごとのページ】ヒントと回答ボタンの開閉*/
.umigame_situmon_hidden_box { margin: 2em 0; padding: 0; }
.umigame_situmon_hidden_box label { padding: 15px; margin:0 auto; font-weight: bold; border: solid 2px black; cursor :pointer; display:block; text-align:center; width:80%;}
.umigame_situmon_hidden_box label:hover { background: #efefef;}
.umigame_situmon_hidden_box input {display: none;}
.umigame_situmon_hidden_box .umigame_situmon_hidden_show {height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s;}
.umigame_situmon_hidden_box input:checked ~ .umigame_situmon_hidden_show {padding: 10px 0; height: auto; opacity: 1;}

.umigame_kotae_hidden_box { margin: 2em 0; padding: 0;}
.umigame_kotae_hidden_box label { padding: 15px; margin:0 auto; font-weight: bold; border: solid 2px black; cursor :pointer; display:block; text-align:center; width:80%;}
.umigame_kotae_hidden_box label:hover { background: #efefef;}
.umigame_kotae_hidden_box input {display: none;}
.umigame_kotae_hidden_box .umigame_kotae_hidden_show {height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s;}
.umigame_kotae_hidden_box input:checked ~ .umigame_kotae_hidden_show {padding: 10px 0; height: auto; opacity: 1;}

/*【ミニ＿ウミガメ問題】ヒントと回答ボタンの開閉*/
.mini_umigame_kotae_hidden_box { margin: 2em 0; padding: 0;}
.mini_umigame_kotae_hidden_box label { padding: 7px; margin:0 auto; font-weight: bold; border: solid 2px black; cursor :pointer; display:block; text-align:center; width:50%; border-radius:3px;}
.mini_umigame_kotae_hidden_box label:hover { background: #efefef;}
.mini_umigame_kotae_hidden_box input {display: none;}
.mini_umigame_kotae_hidden_box .mini_umigame_kotae_hidden_show {height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s;}
.mini_umigame_kotae_hidden_box input:checked ~ .mini_umigame_kotae_hidden_show {padding: 10px 0; height: auto; opacity: 1;}

/*ウミガメのスープ問題一覧ページの設定*/
.page-id-258 #main h2 {color:#554117; margin-top:50px; padding:15px; background: transparent; border-top:solid 5px #554117; border-bottom:solid 5px #554117;}
.page-id-258 #main h3 {color:#f1e9dc; margin-top:80px; padding:10px; background:#554117; border:none;}
.page-id-258 #main ul {margin-bottom:50px;}
.page-id-258 #main ul li {margin-bottom:5px;}
.page-id-258 #main .mini_umigame_kotae_hidden_show p:first-child{margin-top:30px;}
.page-id-258 #main .umigame_page_box {padding:15px 15px 0; margin:15px 0 40px; border:solid 2px #000000; }
.page-id-258 #main .umigame_page_box p{font-size:14px; }
.page-id-258 #main .umigame_original_mondai_title {font-size:18px; font-weight:bold; text-align:center; padding:15px;}
#umigame_original_mondai::before{ display: block;
    height: 15px;
    margin-top: -15px;
    content: "";}



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

.header-container { display:none; }
	
.hidden_box_menu label {margin-right:2%; margin-left:2%; padding:10px;}
.hidden_show_menu {margin-right:2%; margin-left:2%;}
  
	

/* ====== トップページの設定 ====== */
.toppage_left_box, .toppage_right_box { width: 100%; max-width: 100%; flex: 0 0 auto; height: auto;  }
	
.toppage_left_box {min-height:calc(48svh - 25px); }
.toppage_right_box {min-height:calc(48svh - 25px);}
.toppage_left_box_copy01 {font-size:5.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:40px !important; max-height: 40px; box-shadow: none; background:#f6ad48; border:solid 3px #000;}
.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); border-right:solid 3px #000;}
.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); border-right:solid 3px #000;}
.mobile-header-menu-buttons > .menu-button:nth-child(3){ width:calc(100%/4);}
.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){
  /*必要ならばここにコードを書く*/

}