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

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

:root {
	--webgsss-color1: #9dd1bf;
	--webgsss-color1usui: #f5faf8;
	--webgsss-color2: #c5ea20;
	--webgsss-color3: #fbf1b4;
}
#main{margin-top:10px;}

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

/************************************
** お問い合わせボックス 調整
************************************/
.otoiawase_box{margin: 0 40px;}

/************************************
** 最新の投稿
************************************/
ul.wp-block-latest-posts{text-align:center;}
ul.wp-block-latest-posts li{padding:0.5em;border: 1px solid #ccc;}
ul.wp-block-latest-posts li a img{margin: 0 auto;}
ul.wp-block-latest-posts li a {margin: 0 auto;}
ul.wp-block-latest-posts li time {text-align:right;}

ul.wp-block-latest-posts a{overflow: hidden;cursor: pointer;}
ul.wp-block-latest-posts a img{transition-duration: 0.5s;}
ul.wp-block-latest-posts a img:hover{transform: scale(1.1);transition-duration: 1s;}

ul.wp-block-latest-posts li a {text-decoration:none;color:#333;}

ul.wp-block-latest-posts.is-grid li{margin:5px;}


/************************************
** アピールエリアの設定
************************************/
#appeal{
	max-width:1000px;
	max-height:1200px;
	min-height:600px;
	margin: 30px auto;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
#appeal #appeal-in{}
#appeal #appeal-in .appeal-content{display:none;}
@media screen and (max-width: 1023px){
	#appeal{
		max-width:1000px;
		max-height:1000px;
		min-width:300px;
		min-height:300px;
		margin: 0px 0px;
	}
	.appeal {
		background-image: url(https://asuka-yokohama.com/wp-content/uploads/2023/06/asuka-yokohama_header_SP-1.gif) !important;
	}
}

/************************************
** カルーセルの設定
************************************/
#carousel a figure{overflow: hidden;cursor: pointer;}
#carousel a figure img{transition-duration: 0.5s;}
#carousel a figure img:hover{transform: scale(1.1);transition-duration: 1s;}

#carousel .carousel-entry-card-title{text-align:center;}

#carousel .a-wrap {padding: 0.8em 0.6em;}

/************************************
** 見出し
************************************/
.article h2.top_h{
  position: relative;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-right: calc(53% - 50vw);
  margin-left: calc(53% - 50vw);
  padding: 1em calc(50vw - 50% ) 1em calc(50vw - 50% );
  font-size: 1.55em;
  font-weight: bold;
  color:#424242;
  background-color: transparent;
  border:0;
  text-align:center;
}
@media screen and (max-width:768px){
	.article h2.top_h{}
}

.gsss_h h2.gra_underline_change {
  margin-top: 2em;
  margin-bottom: 2em !important;
  background-color: transparent;
  border:0;
  text-align:center;
  font-size: 1.8em;
  font-weight: normal;
}
.gsss_h h2.gra_underline_change:after {
  content: "";
  position: relative;
  top: 0.5em;
  display: block;
  height: 2px;
  background: -webkit-linear-gradient(to right, #9dd1bf, #fbf1b4);
  background: linear-gradient(to right, #9dd1bf, #fbf1b4);
}
.lp_box > .gsss_h h2.gra_underline_change{margin-top: 0em;}


/************************************
** LPランディングページ横幅いっぱい
************************************/

/**上下のセクションをピッタリとくっつけるための処理**/
#content{overflow: hidden;}
.content{margin:0 !important;}
.entry-content{margin:0 !important;}
.footer{margin:0 !important;}
.article{margin:0 !important;}
.main{padding:0}
@media screen and (max-width: 834px).main{padding: 16px;margin: 10px 0;border-width: 0;}



/**左右横幅いっぱいにするための処理**/
.lp_box{
	margin: 0 calc((100% - 100vw) / 2) 0 calc((100% - 100vw) / 2) !important;
	padding: 6em calc(50vw - 50% ) 6em calc(50vw - 50% ) !important;
	width: 100vw;
	overflow: hidden;
	box-sizing:border-box;
	border:0 !important;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
	.lp_box{
		margin: 0 calc((100% - 100vw) / 2) 0 calc((100% - 100vw) / 2) !important;
		padding: 3em calc(52vw - 50% ) 3em calc(52vw - 50% ) !important;
		width: 100vw;
		overflow: hidden;
		box-sizing:border-box;
		border:0 !important;
		border-radius: 0 !important;
	}
}

.lp_box h2.top_h,.lp_box h3.top_h{
	margin-top: 0;
	margin-bottom: 0;
	margin-right: calc(53% - 50vw);
	margin-left: calc(53% - 50vw);
}


    
    
.lp_box_bg1{
	background-attachment: fixed;
	background-position: center center;
	background-color: rgba(255,255,255,0.5);
	background-blend-mode: overlay;
	background-image: url(https://asuka-yokohama.com/wp-content/uploads/2023/06/10c361fa923a3065a4796d5806353034-2.jpg);
}
.lp_box_bg2{
	background-attachment: fixed;
	background-position: center center;
	background-color: rgba(255,255,255,0.5);
	background-blend-mode: overlay;
	background-image: url(https://asuka-yokohama.com/wp-content/uploads/2023/06/10c361fa923a3065a4796d5806353034-3.jpg);
}
.lp_box_bg3{
	background-attachment: fixed;
	background-position: center center;
	background-color: rgba(255,255,255,0.5);
	background-blend-mode: overlay;
	background-image: url(https://asuka-yokohama.com/wp-content/uploads/2023/06/10c361fa923a3065a4796d5806353034-1.jpg);
}





/************************************
** 文字の配置center left right
************************************/
.center{text-align:center;margin:0 auto;}
.center a{text-align:center;margin:0 auto;}
.center img{text-align:center;margin:0 auto;}

/************************************
** サブメニューデザイン
************************************/
#navi .navi-in>.menu-header .sub-menu {background-color:var(--webgsss-color1usui);color:#ffffff;}


/************************************
** メニューの下部に追従メニューと同じ影
************************************/
#header-container{box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);}

/************************************
** 追従メニューにロゴを表示しない
************************************/
#header a{color:#000;text-decoration:none;}
#header a:hover{color:#000;text-decoration:none;}
.hlt-top-menu .header-in{display:block;}
.fixed-header{background-color: #ffffff;}

/************************************
** モバイルフッターボタングラデカラー
************************************/
.mobile-footer-menu-buttons li{
	background: linear-gradient(45deg , #FFFFFF, #E6E6E6);
}

/************************************
** フォームとテーブルのデザイン
************************************/
form u.hissu {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #bf0000;
	border: 1px solid #bf0000;
}
form u.nini {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #999;
	border: 1px solid #999;
}
form u.kotei {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #333;
	border: 1px solid #333;
}
/* チェック・ラジオを一行ごとに */
.wpcf7-form-control .wpcf7-list-item{
	display:block;
}

/* 禁止マーク */
input:disabled {
    cursor: not-allowed;
}
label.disabled {
    cursor: not-allowed;color:#999;
}
/* 郵便番号 */
/* 郵便番号 */
input[name="your_name"]{width:40%;}
input[name="your_name_furigana"]{width:50%;}
input[name="your_denwa"]{width:40%;}
input[name="your_email"]{width:60%;}
input[name="zip"]{width:30%;}
input[name="pref"]{width:30%;}
input[name="city"]{width:30%;}
input[name="addr"]{width:30%;}
input[name="addr2"]{width:100%;}
select[name="your_todohuken"]{width:60%;}

/* フォームオブジェクト */
input[type="submit"] {
    display:block;
    background-color: #bf0000;
    color:#fff;
    font-weight:bold;
    text-align:center;
    margin: 0 auto;
    width: 80%;
	font-size:1.5em;
}
input {border: 1px solid #808080 !important;margin:4px 0;}
textarea {border: 1px solid #808080 !important;margin:2px 0;}
input:focus {background-color: #e0ffff;border: 1px solid #000 !important;}
textarea:focus {background-color: #e0ffff;border: 1px solid #000 !important;}
input:focus[type="submit"] {background-color: #0000ff;}


/************************************
** テーブルのデザイン
************************************/
.table{
	background-color: #fff;
	font-size:0.9em;
	border-collapse: collapse;
}
.table .tr{
  display: table;
  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr{
    display: block;
    width:100%;
  }
}
.table .tr .td{
  display: table-cell;
  border: 1px solid #e5e5e5;
  padding: 8px 13px;
  vertical-align:top;

  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr .td{
    display: block;
    width:100%;
  }
}
.table .label{
	background    : #fcfcfc;
	width:30%;
}
.table .input{
	width:70%;
}

.table .tr .td:nth-child(2){
width:70%;
}
@media screen and (max-width: 767px) {
  .table .tr .td:nth-child(2){
    display: block;
    width:100%;
  }
}




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

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

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