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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
#header-container {padding-top:10px; padding-bottom:10px;  background:rgba(255, 255, 255, 0.8); }
#header-container .logo a{width:90%; justify-content: left; text-align:left; }
#header-container #navi {background:transparent;}
.fixed-header .navi-in > ul li:hover > ul {display: block;}

#header-container-in #navi-in ul li a{font-weight: bold; }


.page .date-tags { display: none;}

.page-id-9 .content-top-in{ width:100%; margin:0;}
.page-id-9 h1 {text-align:center; font-size:4vw;}
.page-id-9 #content-top {margin-top:0; }

.page-id-9 .entry-content {margin:0 auto; width:60%;}

.top_image_image {position: relative;}
.top_image_image img {filter:brightness(0.7);}
.top_image_bg_box {margin-left:50px; position: absolute; top: 40%; transform: translateY(-50%);}
.top_image_bg_moji {font-size:3.5vw; color:#FFFFFF; font-weight:bold; text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3); margin-bottom:60px;}
.top_image_bg_button {width:100%; }
.top_image_bg_button a {text-align:center; display:block; width:90%; color:#000000; font-weight:bold; text-decoration:none; padding:10px 50px; border:solid 1px #b8860b;  background: linear-gradient(135deg,#b8860b,#ffd700,#fff8dc,#ffd700,#b8860b); box-shadow: 3px 3px #808080; margin:0 auto;}

.top_info_area {width:100%; display: flex; padding:20px 20px 20px;}
.top_info_box { padding:20px; margin-right:5%; font-weight:bold; text-align:center;  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3); }
.top_info_box:last-child { margin-right:0; }

.top_info_box_icon {width:20%; text-align:center; margin:10px auto 10px; box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);}
.top_info_box_bar {font-size:2.2vw; margin-bottom:10px;}
.top_info_box_discription {font-size:1.5vw; line-height:1.5; margin-bottom:20px; }
.top_info_box_link a {font-size:1.8vw; text-decoration:none; color:#FF0000; }


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

.top_image_image {text-align:center; }
.top_image_bg_box {margin-left:20px; position: absolute; top: 40%; transform: translateY(-40%); width:100%;}
.top_image_bg_moji {font-size:5.4vw; margin-bottom:15px;}
.top_image_bg_button a { padding:3px 3px; font-size:3.5vw; width:40%; box-shadow: 1px 1px #808080; margin-right:auto; margin-left:auto;}

.top_image_bg_box {margin-left:0px; }

	
.page-id-9 h1 {font-size:8vw;}
.page-id-9 .entry-content { width:80%;}

.top_info_area {display:block;}
.top_info_box {width:100%; margin-right:0; margin-bottom:30px;}
.top_info_box_bar {font-size:6.0vw; margin-bottom:10px;}
.top_info_box_discription {font-size:4.5vw; line-height:1.5; margin-bottom:20px; }
.top_info_box_link a {font-size:5.0vw; }
	
}

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

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