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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
a{
	text-decoration: none;
	
}
a:hover{
	color:#000;
	
}
.date-tags {
display: none;
}
.author-info{
	display:none;
}
.article h1{
text-align:center;	
}
.article h2{
	background:none;
	color:#333;
	}
.article h3 {
		background:none;
	color:#333;
	border:none;
}
.w_yoyaku img,.en_yoyaku img{
	width:50px;
}
.w_yoyaku{
	position: fixed;
	top:10vh;
	right:0;
	z-index:999;
}
.en_yoyaku{
	position: fixed;
	top:52vh;
	right:0;
	z-index:999;
}
/*　slick背景画像設定　*/

.slider-item01 {
	    background:url(https://asahikan.jp/wp-content/uploads/2024/11/gaikan.jpg);
	background-position: bottom 28% center;/*背景画像の位置を中央に*/

}

.slider-item02 {
	    background:url(https://asahikan.jp/wp-content/uploads/2020/09/DSC9231-2-2-scaled.jpg);
	background-position: top center;

}

.slider-item03 {
	    background:url(https://asahikan.jp/wp-content/uploads/2020/09/3E2A6532.jpg);
	background-position: center;/*背景画像の位置を中央に*/

}
.slider-item04 {
    background:url(https://asahikan.jp/wp-content/uploads/2020/09/23704300_m.jpg);
	background-position: center;/*背景画像の位置を中央に*/
}


.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:75vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
  z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
   /* left:2.5%;
    transform: rotate(-135deg);*/
}

.slick-next {/*次へ矢印の位置と形状*/
   /* right:2.5%;
    transform: rotate(45deg);*/
}

/*ドットナビゲーションの設定*/

.slick-dots {
  position: relative;
  z-index: 3;
    text-align:center;
  margin:-50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
  margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}
.top_slide{
	  position: relative;
}
.slide_txt{
writing-mode: vertical-rl;
	content: "";
  position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-42%, -50%);
	color:#fff;
	/*font-size:150%;*/
	font-family: serif;
	font-weight:600;
	text-shadow: 4px 4px 4px #000;
	    font-size: clamp(27px, 1.6vw, 25px);
}

/*ヘッダー*/
.header-container-in.hlt-top-menu {
    padding: 10px 0;
}
/*コンタクトフォーム*/

.wpcf7{
	width:70%;
	margin:auto;
}
.cf-area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2em 0;
	border-bottom: 1px dashed #ccc;
	transition: all .3s;
}

.cf-area:last-child {
	border-bottom: none;
}

.cf-area dt {
  width: 200px;
  padding-right: 30px;
  text-align: right;
	line-height:1.5em;
}

.cf-area dd {
    flex: 1;
}

.cf-area input, .cf-area textarea {
  width: 100%;
  padding: 0.8em;
  border: none;
  background-color: #e6e6e6;
  font-size: 16px;
	resize: vertical;
	transition: all .3s;
}

.cf-area input:focus,.cf-area textarea:focus {
	outline: none;
	background: #dde2e9;
}

.cf-required {
	background: #b91e23;
	color: #fff;
	font-size: 0.8em;
	padding: 0 5px 2px;
	border-radius: 2px
}

.cf-send input {
	display: block;
	background: linear-gradient(135deg, #6b7a8e 0%, #3b4a5e 100%);
	width: 300px;
	height: 60px;
	margin: 30px auto 0;
	border: none;
	border-radius: 10px;
	color: #fff;
	box-shadow: 2px 5px 15px 0 rgba(0, 0, 0, .2);
	font-size: 1.3em;
	font-weight: bold;
	transition: all .3s;
}

.cf-send input:hover {
	filter: brightness(1.25);
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	background-color: #fce3e3;
	border: none;
	text-align: center;
}

/*朝食バイキング*/


.center{
	text-align:center;
	
}
.gallery {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    /* --- 変更 --- */
    grid-template-rows: 20% 20% 20% 20% 20%; 
    grid-template-areas:
        "A B C"
        "A B F"
        "A E F"
        "D E H"
        "D G H";
    /* ------------ */
    gap: 10px;
	width:50%;
}

.gallery .photoA {
    grid-area: A;
}

.gallery .photoB {
    grid-area: B;
}

.gallery .photoC {
    grid-area: C;
}

.gallery .photoD {
    grid-area: D;
}

.gallery .photoE {
    grid-area: E;
}

.gallery .photoF {
    grid-area: F;
}

.gallery .photoG {
    grid-area: G;
}

.gallery .photoH {
    grid-area: H;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*トップスライド多言語*/
.top-slide{
	position: relative;
	
}
.slide_txt_en{
	content: "";
  position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-42%, -50%);
	color:#fff;
	/*font-size:150%;*/
	font-family: serif;
	font-weight:600;
	text-shadow: 4px 4px 4px #000;
	    font-size: clamp(25px, 1.6vw, 25px);

}
.bogo-language-switcher {
    width: 100%;
    display: flex;
    justify-content: flex-end;
	padding-right:2rem;
	font-size:80%;
}
.bogo-language-switcher a{
color:#fff;
}
.bogo-language-switcher li+li{
	margin-left:10px;
}
.bogo-language-switcher .current {
    display: none;
}
/* 
* ヘッダーロゴ(テキスト)の反対側に問い合わせボタン表示
*/
div#header-in {
  /* ヘッダーロゴ(テキスト)と問い合わせボタンを横並び */
  flex-direction: row;
}
.header-in .logo-header {
  /* ヘッダーロゴ(テキスト)と問い合わせボタンの位置を両端にする */
  margin-right: auto;
}
.header-contact {
  /* 問い合わせボタンにパディングを追加（見た目を整える） */
  padding: 10px 0;
}
@media screen and (max-width:768px){
	.wpcf7{
	width:100%;

}
	.cf-area {
		display: block;
	}

	.cf-area dt {
    width: 100%;
		margin-bottom: 5px;
    padding-right: 0;
    text-align: left;
		line-height:1.5em;
	}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}
@media screen and (max-width: 1023px) {
    .mobile-header-menu-buttons {

        background: #000;
	}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.mobile-header-menu-buttons {
        background: #000;
    }
	.fa-navicon:before, .fa-reorder:before, .fa-bars:before {
		color: #fff;
	}
}
@media screen and (min-width: 481px){
	.sp{
		display:none;
	}
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.pc{
		display:none;
	}
	.s_logo{
	
	}
	.slide_txt {
        font-size: 119%;
        top: 53%;
        left: 23%;
        transform: translate(-20%, -28%);
        writing-mode: horizontal-tb;
	}
	.w_yoyaku img, .en_yoyaku img {
    width: 35px;
}
	#navi-menu-content{
		background:url(https://asahikan.jp/wp-content/uploads/2024/11/g_2_1.png),#fff;
background-position: bottom right, top center;
        background-size: 50%, cover;
        background-repeat: no-repeat, repeat;
		
		
	}
	.gallery {

    width: 100%;

}
}