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

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

/*共通*/
body{
	letter-spacing:.2em;
	overflow-x: hidden;
	font-family: serif;
}
.main{
	border:none;
	background:rgba(0, 0, 0, 0.8);
	border-radius: 0;
}
#container{
	overflow-x:hidden;
}
figure.wp-block-image.margin0{
	margin:0 auto;
}
.content{
	padding:30vh 0;
}
a{
	text-decoration:none;
	color: white;
}
a:hover{
	color: white;
}
.content-in a {
	transition: transform 1s ease; /* スムーズなアニメーションを設定 */
}
.content-in a:hover {
	transform: scale(1.01); /* 5% 拡大 */
}
li{
	list-style: none;
}
ol, ul {
    padding-left: 0;
}
ul.menu-list.menu-active {
    backdrop-filter: blur(5px) grayscale(.5);
}
.content-in p{
	line-height:2em;
}
.grecaptcha-badge {
    display: none !important;
}


/*スクロール時に左右から交互に画像表示するアニメーション*/
.scroll-right {
  opacity: 0;
  transform: translateX(50%) scale(1.5); /* 右にスライド */
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-left {
  opacity: 0;
  transform: translateX(-50%) scale(1.5); /* 左にスライド */
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-right.show-image, .scroll-left.show-image {
  opacity: 1;
  transform: translateX(0) scale(1); /* 元の位置に戻す */
}


/*スクロール時に見出し表示するアニメーション*/
.wp-block-heading span{
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
	transform:translateY(-.5em);
	display:inline-block;
}
.wp-block-heading.show-heading span {
  opacity: 1;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
	transform:translateY(0);
}
.wp-block-heading.show-heading span:nth-child(1) { transition-delay: 0.05s; }
.wp-block-heading.show-heading span:nth-child(2) { transition-delay: 0.1s; }
.wp-block-heading.show-heading span:nth-child(3) { transition-delay: 0.15s; }
.wp-block-heading.show-heading span:nth-child(4) { transition-delay: 0.2s; }
.wp-block-heading.show-heading span:nth-child(5) { transition-delay: 0.25s; }
.wp-block-heading.show-heading span:nth-child(6) { transition-delay: 0.3s; }
.wp-block-heading.show-heading span:nth-child(7) { transition-delay: 0.35s; }
.wp-block-heading.show-heading span:nth-child(8) { transition-delay: 0.4s; }
.wp-block-heading.show-heading span:nth-child(9) { transition-delay: 0.45s; }
.wp-block-heading.show-heading span:nth-child(10) { transition-delay: 0.5s; }
.wp-block-heading.show-heading span:nth-child(11) { transition-delay: 0.55s; }
.wp-block-heading.show-heading span:nth-child(12) { transition-delay: 0.6s; }
.wp-block-heading.show-heading span:nth-child(13) { transition-delay: 0.65s; }
.wp-block-heading.show-heading span:nth-child(14) { transition-delay: 0.7s; }
.wp-block-heading.show-heading span:nth-child(15) { transition-delay: 0.75s; }
.wp-block-heading.show-heading span:nth-child(16) { transition-delay: 0.8s; }
.wp-block-heading.show-heading span:nth-child(17) { transition-delay: 0.85s; }
.wp-block-heading.show-heading span:nth-child(18) { transition-delay: 0.9s; }
.wp-block-heading.show-heading span:nth-child(19) { transition-delay: 0.95s; }
.wp-block-heading.show-heading span:nth-child(20) { transition-delay: 1.0s; }
.wp-block-heading.show-heading span:nth-child(21) { transition-delay: 1.05s; }
.wp-block-heading.show-heading span:nth-child(22) { transition-delay: 1.1s; }
.wp-block-heading.show-heading span:nth-child(23) { transition-delay: 1.15s; }
.wp-block-heading.show-heading span:nth-child(24) { transition-delay: 1.2s; }
.wp-block-heading.show-heading span:nth-child(25) { transition-delay: 1.25s; }
.wp-block-heading.show-heading span:nth-child(26) { transition-delay: 1.3s; }
.wp-block-heading.show-heading span:nth-child(27) { transition-delay: 1.35s; }
.wp-block-heading.show-heading span:nth-child(28) { transition-delay: 1.4s; }
.wp-block-heading.show-heading span:nth-child(29) { transition-delay: 1.45s; }
.wp-block-heading.show-heading span:nth-child(30) { transition-delay: 1.5s; }

/* スクロールボタンアニメーション */
a.wp-block-button__link.wp-element-button{
	opacity:0;
	transform:scale(.8);
	transition: opacity 1s ease, transform 1s ease;
}
a.wp-block-button__link.wp-element-button.show-button {
	transform:scale(1);
	opacity:1;
}
a.wp-block-button__link.wp-element-button.show-button:hover{
	transform:scale(1.1);
}
a.wp-block-button__link.wp-element-button:after {
  content: '＞';
	opacity:0;
	transition: opacity 1s ease, transform 1s ease;
	transform:translateX(-1em);
	display:inline-block;
}
a.wp-block-button__link.wp-element-button.show-button:after {
  content: '＞';
	transform:translateX(1em);
	opacity:1;
}

/* スクロール段落アニメーション */
.content-in p {
  opacity: 0;
  transform: translateY(-2em);
  transition: opacity 1s ease, transform 1s ease;
  display: inline-block;
  width: 100%; /* 幅を親に合わせる */
}
.content-in p.show-paragraph {
  transform: translateY(0);
  opacity: 1;
}

/*ブロックエディタで使用する追加CSSクラス*/
.custom-aspect img{
	object-fit:cover;
	aspect-ratio:4/3 !important;
}
@media screen and (min-width: 750px){
	.custom-aspect img{
		object-fit:cover;
		aspect-ratio:16/6 !important;
	}
}
.line-height-reset{
	line-height:1em !important;
}
.center-left{
	text-align:left;
}
.center-left br{
	display:none;
}
@media screen and (min-width: 750px){
	.center-left{
		text-align:center;
	}
	.center-left br{
		display:block;
	}
}

/*ページのフェードイン*/
#container.page-fade-in{
	opacity: 1;
	transform: unset;
}
#container{
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity 1.2s ease, transform 1.2s ease;
}
.home #container{
	opacity:1;
	transform: unset;
}


/*TOPページのみヘッダーを５秒後にスライドダウン*/
.home .custom-header {
    top: -100px; /* 初期位置を画面外に設定 */
    opacity: 0;
    transition: top 2s ease-out, opacity 2s ease-out;
}
.home .custom-header.header-slide-in {
    top: 0;
    opacity: 1;
}


/*ヘッダー*/
#navi {
    display: none;
}
#header-in .logo.logo-header.logo-text {
    display: none;
}
.in-menu-button{
	padding: .2em 1em;
    margin: 2em 10%;
	border:1px solid white;
	border-radius:4px;
}
/*BOGO*/
.bogo-language-switcher{
	list-style: none;
	display: flex;
	padding: 0.3em;
	border:1.5px solid white;
	border-radius:2em;
	gap:0.2em;
	background:rgba(0, 0, 0, 0.2);
	width: 5.5em;
    font-size: .8em;
	word-break: keep-all;
}
.bogo-language-switcher .current a{
	background:white;
	padding:0.4em;
	border-radius:1em;
	color:black;
	font-weight:bold;
}
.custom-header{
	position:fixed;
	top:0;
	z-index:1000;
	width:100%;
}
.header-right-box{
	display:flex;
	align-items:center;
	justify-content:right;
	gap:1.5em;
}
.header-right-box figure{
	margin:0 !important;
}
@media screen and (max-width:750px){
	.header-right-box .mail, .header-right-box .map{display:none;}
}

/*フッター*/
#footer{
	display:none;
}
.footer-content{
	position:relative;
	z-index:1;
}
.next-post {
    text-align: right;
}
#pager-post-navi a:hover {
    background: transparent;
}

/*TOPページ*/
.home #content, .home #content-in{
  margin: 0;
  width: 100%;
}
.home .main{
  padding: 0;
  border: none;
}
.home .content {
    padding: 0;
}
.home .entry-title{
  display: none;
}
.home header.article-header.entry-header{
	display:none;
}
.home .entry-content{
	margin:0;
}
.home .page .entry-content{
	margin-top:0;
}
.foodmenu-top-wrap {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.foodmenu-thumb {
    width: 100%;
    height: auto;
}

@media screen and (min-width: 1238px){
	.home .page .entry-content{
		margin:0;
		max-width:100%;
	}
}


/*固定ページ*/
.page .entry-title {
  letter-spacing: 0;
  animation: letterSpacingAnimation 2s ease-in-out forwards; /* 2秒間でゆっくりアニメーション */
}
@keyframes letterSpacingAnimation {
  from {
    letter-spacing: 0em;
  }
  to {
    letter-spacing: 0.2em;
  }
}

/*theme-hiroshige*/
.top-front{
	color:white;
}
#page{
	min-height:100vh;
}
.text-align-center{
	text-align:center;
}
.bold-large-text{
	font-weight:bold;
	font-size:1.2em;
}
.bg-black{
	background-color:rgba(0, 0, 0, 0.8);
	color:white;
}
.bg-white{
	background-color:rgba(255, 255, 255, 0.9);
}
.half-width{
	width:100vw;
}
.half-width .adress-text, .half-width p{
	padding:20px;
}
@media screen and (min-width:750px){
	.half-width{
		width:50vw;
	}
}
.flex-align-center{
	display:block;
}
@media screen and (min-width:750px){
	.flex-align-center{
		display: flex;
		align-items:center;
	}
}
@media screen and (min-width:1200px){
		.flex-align-center{
			width:1200px;
			margin:0 auto;
		}
}
.row-reverse{
	flex-direction:row-reverse;
}
.object-fit-cover-height350 img{
	object-fit:cover;
	height:350px;
	width:100%;
}
@media screen and (min-width:1400px){
	.object-fit-cover-height350{
		width:1400px;
		margin:0 auto;
	}
}
.padding20{
	padding:20px;
}
.main_visual{
	width:100vw;
	height:100vh;
}
.top-slide-images video{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: #000000;
    z-index: -1;
	object-fit:cover;
}
.main_visual video {
  opacity: 0;
  transform: translateY(8px) scale(0.995);
  /* アニメーションを自動で開始、最後の状態を保持 */
  animation: mv-fadein 900ms cubic-bezier(.22,.9,.37,1) 250ms forwards;
  will-change: opacity, transform;
}
/* キーフレーム：フェードイン + 軽い上方移動 */
@keyframes mv-fadein {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.995);
  }
  60% {
    opacity: 0.85;
    transform: translateY(2px) scale(0.998);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/*
.top-slide-images li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    -webkit-animation: anime 40s linear 0s infinite ;
    animation: anime 40s linear 0s infinite ;
}
.top-slide-images li:nth-child(1) { 
    background-image: url(images/top-auto01.webp) 
}
.top-slide-images li:nth-child(2) {
    background-image: url(images/top-auto02.webp);
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}
.top-slide-images li:nth-child(3) {
    background-image: url(images/top-auto03.webp);
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}
.top-slide-images li:nth-child(4) {
    background-image: url(images/top-auto04.webp);
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}
@-webkit-keyframes anime { 
    0% {
        -webkit-animation-timing-function: ease-in;
        opacity: 0;
    }
    10% {
        -webkit-transform: scale(1.05);
        opacity: 1;
    }
    40% {
        -webkit-transform: scale(1.2);
            -webkit-animation-timing-function: ease-out;
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(1.22);
        opacity: 0;
    }
    100% { 
		opacity: 0 }
}
@keyframes anime { 
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
    }
    10% {
        transform: scale(1.05);
        opacity: 1;
    }
    40% {
        transform: scale(1.2);
            animation-timing-function: ease-out;
        opacity: 1;
    }
    50% {
        transform: scale(1.22);
        opacity: 0;
    }
    100% { 
		opacity: 0 }
}
*/
.margin0{
	margin:0;
}
.site-header{
	position:fixed;
	top:0;
	padding:15px;
	color:white;
}
@media screen and (max-width:480px){
	.site-header{
	padding:10px;
	}
}
.site-logo{
	color:white;
}
.site-logo a img{
	height:150px;
	filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.6));
	margin-top:10px;
}
.site-logo h1{
	margin:0;
}
.site-top-menu{
	width: calc(100% - 30px);
	height:100vh;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.top-menu-pc-only div ul li a{
	color:white;
	line-height:5em;
}
.verticul_write{
	-ms-writing-mode: tb-rl;
  	writing-mode: vertical-rl;
	margin:0 auto;
	font-weight:bold;
	font-size:1.1em;
	letter-spacing:0.5em;
	line-height:3em;
}
.top-navigation{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.top_menu_pc_only{
	line-height:2.5em;
}
.menu-toggle{
	content:url('images/menu.svg');
	cursor:pointer;
	height:40px;
	width:40px;
	filter:drop-shadow(0px 0px 2px rgba(0,0,0,0.6));
}
.menu-toggle:hover{
	opacity:0.5;
	transition: all 0.3s ease-out;
}
@media screen and (max-width:480px){
	.menu-toggle{
	height:35px;
	width:35px;
	}
}
.top_menu_navi{
	text-align:center;
	-webkit-overflow-scrolling: touch;
	overflow:auto;
	height:95vh;
}
.top_menu_navi li a{
	padding:20px 0;
	display:block;
}
.menu-dropdown{
	content:url('images/dropdown.svg');
	width:15px;
	float:right;
	cursor:pointer;
	padding:20px 0;
	margin-left:0px;
}
@media screen and (min-width:1200px){
	.menu-dropdown{
		margin-left:20px;
	}
}
.menu-dropdown:hover{
	opacity:0.5;
	transition: all 0.3s ease-out;	
}
@media screen and (min-width:1200px){
	.menu-dropdown{
		content:url('images/dropdown.svg');
		width:15px;
		float:right;
		cursor:pointer;
		padding:10px 0;
	}
}
.menu-menu-1-container .top_menu_navi{
	margin-top:40px;
}
.top-concept{
	line-height:3em;
	padding:60px 15px;
	letter-spacing:0.4em;
}
.site-main h2{
	text-align:center;
	line-height:1em;
	margin:120px 0 40px;
	font-size:1.8em;
}
.site-main h2 span{
	font-size:0.7em;
}
.top-menu-flex{
	display:block;
	padding:20px;
}
.top-menu-flex div{
	margin-bottom:40px;
}
.top-menu-flex div div{
	padding:20px 0;
}
.top-menu-flex div div span{
	font-size:1.1em;
	display:block;
}
.top-menu-flex div img{
	width:100%;
	height:250px;
	object-fit:cover;
}
@media screen and (min-width:750px){
	.top-menu-flex{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}
	.top-menu-flex div{
		margin-bottom:0px;
	}
}
@media screen and (min-width:1200px){
		.top-menu-flex{
		width:1200px;
			margin:0 auto;
			gap: 80px;
	}
}
.map-google-custom{
	padding:60px 0;
}
.map-google-custom iframe{
	filter: grayscale(100%)invert(100%) contrast(100%);
}
.button-border a{
	font-weight:bold;
	padding:15px;
	border:1px solid;
	border-radius:50px;
	display:block;
	width:290px;
	margin:40px auto;
	font-size:1.1em;
	text-align:center;
}
.button-border a:hover{
	opacity:1;
	animation: hover-button 1s ease forwards;
}
@keyframes hover-button{
  0% {
	  background:transparent;
	  border:1px solid white;
  }
  100% {
	  background: rgba(230,180,34,1);
	  border:1px solid black;
	  color:black;
  }
}
.top-news{
	margin:120px 20px;
	padding:60px 20px;
	background-color:rgba(0, 0, 0, 0.8);
	text-align:left;
	color:white;
}
.top-news h2{
	line-height:1em;
	font-size:1.8em;
	margin-bottom:40px;
}
.top-news h2 span{
	font-size:0.7em;
}
.top-news .archive-post-title{
	padding-left:0;
}
.top-news h3{
	margin:0;
}
.top-news article{
	padding:10px 0;
}
@media screen and (min-width:900px){
	.top-news{
		width:900px;
		margin:120px auto;
		text-align:center;
	}
}
.top-news .single-post-list a{
	display:block;
	padding:10px 0;
}

.archive-topimage img{
	min-height:100vh;
	min-width:100vw;
	object-fit:cover;
	position:fixed;
	top:0;
	left:0;
	z-index:-1000;
}
.archive-page, .post-single-page, .post-page{
	padding:15px;
	margin-top:100px;
	width:100vw;
}
@media screen and (min-width:900px){
	.archive-page, .post-single-page, .post-page{
		width:900px;
		margin:250px auto 0;
	}
}
.archive-page h2{
	margin-top:40px;
}
.archive-post-flex{
	display:block;
}
.archive-post-title{
	padding-left:0;
	font-weight:bold;
	font-size:1.1em;
}
@media screen and (min-width:900px){
	.archive-post-flex{
	display:flex;
	align-items:center;
	}
	.archive-post-title{
	padding-left:10px;
	}
}
.nav-links{
	display:flex;
	justify-content:space-between;
	margin:40px 0;
}
.post-single-page h2{
	margin:inherit;
	text-align:inherit;
}

.site-info{
	padding:20px;
	position:sticky;
	bottom:0;
	text-align:center;
	color:white;
}

.p-breadcrumb {
	margin-bottom:1em;
}
.p-breadcrumb ol{
	margin:0;
	list-style:none;
	padding:0;
	display:flex;
	flex-wrap:wrap;
}
.p-breadcrumb ol li span{
	padding:0 10px;
}
.p-breadcrumb ol li:first-child span{
	padding-left:0;
}

@media screen and (min-width:1400px){
	.wide-text-center{
		text-align:center;
	}
}
.post-page h2{
	margin:0;
	text-align:left;
}
.instagram-icon img{
	margin-top:10px;
}

.tabelog-icon{
	position:fixed;
	top:10px;
	left:90px;
	z-index:100;
	filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.6));
}
.retty-icon{
	position:fixed;
	top:10px;
	left:170px;
	z-index:100;
	filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.6));
}
@media screen and (max-width:480px){
	.tabelog-icon img, .retty-icon img{
		width:40px;
	}
}
.pick-up-header{
background: rgb(193,153,0);
background: linear-gradient(59deg,rgba(112,53,0,1) 0%,rgba(193,153,0,1) 100%);
	color:white;
	display:flex;
	align-items:center;
	padding:10px;
	font-weight:bold;
	margin-top:-4em;
	text-shadow:0px 0px 5px rgb(0 0 0 / 50%);
	animation:pick-up-header 1s ease;
}
.pick-up-header:before{
	content:url('images/pick-up.svg');
	width:25px;
	display:inline-block;
	margin-right:10px;
	margin-top:5px;
	filter:drop-shadow(0px 0px 2px rgba(0,0,0,0.6));
}
@keyframes pick-up-header{
  0% {
	  width:0;
  }
  100% {
	  width:100%;
  }
}

.foodmenu_price{
	font-size:1.3em;
	margin-bottom:1em;
	display:none;
}

.foodmenu-flex{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom:80px;
	grid-column-gap: 15px;
	grid-row-gap: 30px;
}
@media screen and (max-width:900px){
	.foodmenu-flex{
		grid-template-columns: repeat(2, 1fr);
	}
}
.foodmenu-flex article{
	width:100%;
}
.foodmenu-flex article a img{
	height:200px;
	width:100%;
	object-fit:cover;
}
@media screen and (max-width:900px){
	.foodmenu-flex article a img{
		height:130px;
	}
}

.category-foodmenu h2{
	border-bottom:1px solid white;
	padding:15px;
    text-align: center;
    margin: 40px auto;
}
.category-foodmenu h3{
	font-size: 1em;
}
.category-foodmenu .archive-page h3{
	margin:0;
}
@media screen and (max-width:900px){
	.category-foodmenu .archive-page h3{
		font-size:1em;
	}
}
.filter-buttons{
	text-align:center;
}
.filter-buttons button{
	font-weight: bold;
   padding: 15px;
   border: 1px solid;
   border-radius: 5px;
   font-size: 1.1em;
	color:white;
	background:transparent;
	width:25%;
	cursor:pointer;
	margin:8px 0;
}
@media screen and (max-width:480px){
	.filter-buttons button{
		width:48%;
	}
}
.filter-buttons button:hover{
	opacity:1;
	animation: hover-button 1s ease forwards;
}
.filter-buttons button.clicked{
	color:black;
	background: rgba(230,180,34,1);
}

.language-switch{
	position:absolute;
	right:0;
	top:0;
}
.bogo-language-switcher{
  list-style: none;
  display: flex;
  margin: 10px;
  padding: 0.3em;
	border:1.5px solid white;
	border-radius:2em;
	gap:0.5em;
	background:rgba(0, 0, 0, 0.2);
}
.bogo-language-switcher .current a{
	background:white;
	padding:0.4em;
	border-radius:1em;
	color:black;
	font-weight:bold;
}

.foodmenu-top{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 5px;
	grid-row-gap: 5px;
	text-align:center;
}
@media screen and (max-width:900px){
	.foodmenu-top{
	grid-template-columns: repeat(2, 1fr);
	}
}
.foodmenu-top li{
	margin-bottom:4em;
}
.foodmenu-top a img{
	width:100%;
	height:100%;
	object-fit:cover;
}

/*カテゴリ*/
.cat-link{
	background: none;
}
.related-list a {
    border-bottom: 1px solid;
}
.related-list a:hover{
	background: transparent;
}
.archive-title{
	text-align: center;
	font-size: 2.5em;
	margin: 1em auto;
}
.category-5 .bogo-language-switcher, .categoryid-5 .bogo-language-switcher{
	display: none;
}
.fa-folder-open:before{
	display: none;
}
.a-wrap:hover{
	background: transparent;
}
a.entry-card-wrap.a-wrap.border-element.cf {
    border-bottom: 1px solid;
}

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

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

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