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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*-------------------------------------
　　　カスタム(ヘッダー)
-------------------------------------*/
/*背景画像にロゴとメニュー*/
.home #header-container{
	background-image: url(/wp-content/uploads/2023/08/header-pc.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	height: 600px;
}

.home #header-container .navi {
	background-color: rgba(255,255,255,0.8);
}

.home .header-container-in {
	background-color: rgba(255,255,255,0.7);
	padding: 10px 0px;
}

/*-------------------------------------
　　　カスタム(初期設定)
-------------------------------------*/
/*topページタイトル非表示*/
.front-top-page #main .entry-title{
  display: none;
}

/*グローバルメニューの固定*/
.fixed {position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}

/*go-to-topの位置修正*/
.go-to-top {bottom: 70px;}


/*マウスオーバー時画像を半透明*/
.tomei a:hover {
	opacity: 0.7;
}
 
/*------------------------------------------------------------
　カスタマイズ （追従バナー）
------------------------------------------------------------*/
/*メニューをページ側面に固定*/
.fixed-menu {
	position: fixed;
	bottom: 500px;
	right: 0px;
	width: 220px;
	z-index: 100;
	background-color: rgba( 255, 255, 255, 0.5 );
}
/*メニューを縦並びにする*/
.fixed-menu p {
	padding: 5px 2px;
	margin: 5px;
	width:200px;
}

@media screen and (max-width:640px){
/*メニューをページ下部に固定*/
.fixed-menu {position: fixed;
             bottom: 0px;
             left: 0;
             width: 100%;
             text-align: center;
             z-index: 98;
	         background-color: rgba( 0, 0, 0, 0.6 );}
/*メニューを横並びにする*/
.fixed-menu p {display: inline-block;
	           padding: 5px 0px;
	           margin: 5px;
	           vertical-align: middle;
	           width:45%;}
}


/*------------------------------------------------------------
　カスタマイズ（コンタクトフォーム）
------------------------------------------------------------*/
/* 必須マーク */
.must { background: #FF1A00; }
/* 任意マーク */
.free  {background: #999; }

.must,.free {
	color: #FFF;
	border-radius: 3px;
	font-size: 12px;
	margin-right: 10px;
	padding: 5px 10px;
	letter-spacing: 0.2em;
}

/*フォーム入力項目*/
.wpcf7 input,
.wpcf7 textarea  {
	 width: 90%;
	 padding: 8px 15px;
	 margin-right: 10px;
	 margin-top: 10px;
	 border: 1px solid #ddd;
	 border-radius: 3px;
}

/* 送信ボタン */
input.sub-btn {
	width: 300px;
	height: 60px;
	background: #F90;
	color: #FFF;
	font-size: 1.1em;
	font-weight: bold;
	letter-spacing: 0.2em;
	border: 1px solid #ffae13;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;	
}

/* 送信ボタンホバー */
input.sub-btn:hover{
	background: #FFF;
	color: #F90;  
}

/*------------------------------------------------------------
　カスタマイズ（モバイル OR PC）
------------------------------------------------------------*/
/*　PC用　*/
.at-mobile {display: none;}
/*　モバイル用　*/
@media screen and (max-width:600px) {
.at-pc {display: none;}
.at-mobile {display: inherit;}
}

/*　PC用画像　*/
.gazo-mobile img {display: none;}
/*　モバイル用画像　*/
@media screen and (max-width:600px) {
.gazo-pc img {display: none;}
.gazo-mobile img {display: inherit;}
}


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

/****834px以下****/
@media screen and (max-width: 834px){
/*ヘッダー高さ調整*/
.home #header-container{
	height :300px;
}
/*ヘッダーメニュー非表示*/
.header-container-in.hlt-top-menu {
    display: none;
}
}

/****480px以下****/
@media screen and (max-width: 480px){
/*ヘッダー画像*/
.home #header-container{
	background-image: url(/wp-content/uploads/2023/08/header-mobil.png);
	height :480px;
}
/*非表示*/
.dis-non {
	display: none;
}
}