@charset "utf-8";


/* ------------------------------------------------------------ fv */
#fv{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; }
#loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    font-weight: bold;
}
#loading.disappear{
     display: none;   
}

#youtube-area{
    position: absolute;
    z-index: 1;
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
 	opacity: 0;    
}
#youtube-area.appear {
	animation-name:PageAnimeAppear;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}
@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
}

#youtube-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
}

#youtube {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 177.77777778vh;
  height: 56.25vw;
  min-height: 100%;
  min-width: 100%;
}
#youtube-mask{
    position: absolute;
    z-index: 2;
    top:0;
    width:100%;
    height: 100%;
}


/* ------------------------------------------------------------ what */
.line-list{ display: flex; justify-content: space-between; align-items: center; padding: 0 0 60px; }
.line-list .line-item{ position: relative; width: calc(100% / 3 - 12px); /* height: 590px; */ height: 390px; padding: 50px 25px; background: #fff; }
.line-list .line-item:before{ position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 12px; background: url(../images/bg_04.jpg) center; }
.line-list .line-item h4{ position: relative; height: 160px; margin: 0 0 25px; }
.line-list .line-item h4 img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.line-list .line-item p{ letter-spacing: 0.01em; line-height: 170%; }

/* モーダルウィンドウ */
.modal-window,
.featherlight-content{
  overflow-y: scroll;
  display: none;
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 80%;
  max-width: 800px;
  max-height: 980px;
  background-color: #fff;
  border-radius: 5px;
  z-index: 11;
}
.what-mordal{ position: relative; padding: 10%; }
.what-mordal:before{ position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 12px; background: url(../images/bg_04.jpg) center; }

.what-mordal .item{ display: block; /* width: 115px; */ height: auto; margin: 0 auto 50px; }
.what-mordal h4{ padding: 0 0 28px; /* font-size: 39px; */ font-size: 36px; font-weight: 600; text-align: center; line-height: 150%; }
.what-mordal p{ padding: 0 0 50px; line-height: 200%; }

.mordal-recipe{ height: 68%; min-height: 500px; }
.mordal-recipe .iframe-area{ margin: 50px 0 100px; }

/* 閉じるボタン */
.mordal-close{
	position: absolute;
	right: 20px;
	top: 30px;
	width: 50px;
	height: 50px;
}
.mordal-close span{
	position: absolute; 
	right: 20px;
	top: 30px;
	width: 50px;
	height: 1px;
	background: #000;
}
.mordal-close span:first-of-type{
	transform: rotate(45deg);
}
.mordal-close span:last-of-type{
	transform: rotate(-45deg);
}
.button-close {
  display: block;
  margin: 0 auto;
  width: 300px;
  padding: 30px 0;
  background-color: #CBCBCB;
  border-radius: 20rem;
  cursor: pointer;
  font-size: 20px;
  color: #000!important;
}
/* overlay */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.featherlight-close-icon{ display: none; }


.modal-japonais{ overflow-x: hidden; width: 80%; max-width: 1100px; background: url(../images/bg_02.jpg) center/cover no-repeat;}
.pic-mordal{ height: 100%; }
.pic-mordal .bg{ height: 100%; background: url(../images/pic_02.png) calc(50% + 400px) 100px/60% no-repeat; }
.pic-mordal .item{ width: 140%; max-width: initial; margin: -50px 0 0; }

.pic-mordal h4{ font-size: 117px; color: #EBE8DB; font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal; white-space: nowrap; }
.pic-mordal h5{ font-size: 42px; line-height: 130%; font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal; }
.pic-mordal h5 strong{ background: linear-gradient(transparent 60%, #f7d98c 60%); font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; }
.pic-mordal h5 sub{ font-size: 16px; vertical-align: text-bottom; }

.pic-mordal .text{ width: max(52%,560px); padding-left: 5%; }
.pic-mordal p{ padding: 30px 0 0; font-size: 16px; font-weight: 300; line-height: 200%; white-space: normal; }
.pic-mordal .note{ padding: 50px 0; }


#what{ overflow: hidden; position: relative; background: url(../images/bg_03.jpg) center/cover no-repeat; }
#what .bg{ padding: 130px 0 90px; background: url(../images/pic_06.png) calc(50% + 100px) 100px no-repeat, url(../images/pic_20.png) calc(50% - 600px) bottom no-repeat; }
#what .main-ttl{ padding: 0 0 55px; }
#what .main-ttl{ text-align: center; }
#what .main-ttl img{ display: block; margin: 0 auto 60px; }

#what .btn{ display: flex; align-items: center; justify-content: space-between; width: 745px; height: 155px; filter: drop-shadow(0 10px 0px rgba(144,104,18,1)); background: #C49632; transform: translateZ(0); color: #fff; font-size: 28px; font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal; }
#what .btn p{ width: 70%; padding-left: 50px; text-align: left; line-height: 130%; }

#what .wow{ position: absolute; }
#what .curryL{ top: 20px; left: -50px; }
#what .curryR{ bottom: -130px; left: calc(50% + 400px); }
.animate__delay-1s {
 animation-delay: calc(var(--animate-delay) * 1);
}

.lightbox{ display: none; }
	

/* ------------------------------------------------------------ sturdy */
.sturdy-list{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sturdy-list li{ position: relative; width: 580px; height: 315px; margin-bottom: 75px; padding: 50px 30px 10px; background: #fff; }
.sturdy-list li:nth-of-type{ margin: 0 35px 0 0; }
.sturdy-list li:nth-last-child(-n+2){ margin: 0; }
.sturdy-list li .year{ position: absolute; top: -30px; left: 50px; font-size: 58px; width: 50%; font-weight: 700; }
.sturdy-list li .flex{ display: flex; align-items: center; justify-content: space-between; }
.sturdy-list li .txt-area{ width: 290px; }
.sturdy-list li .txt{ height: 180px; font-family: "source-han-sans-japanese", sans-serif; font-style: normal; }
.sturdy-list li .sturdy_ttl{ padding: 0 0 20px; font-size: 21px; line-height: 150%; font-weight: 500; }
.sturdy-list li .sturdy_txt{ line-height: 170%; font-weight: 400; }
.sturdy-list li figure{ width: 200px; }
.sturdy-list li img{ display: block; margin: 0 auto; }
.sturdy-list li figcaption{ padding: 10px 0 0; font-size: 11px; text-align: center; }

#sturdy{ padding: 120px 0 60px; background: url(../images/bg_01.jpg) center/cover no-repeat; }
#sturdy .main-ttl{ padding: 0 0 80px; }
#sturdy .btn-arrow{ margin: 0; width: 240px; height: 55px; font-size: 16px; font-weight: 700; }
#sturdy .btn-arrow.SP{ display: none; }


/* ------------------------------------------------------------ history */
.slick-list{ overflow: visible!important; }
.scroll-x{ overflow-x: scroll; }
.scroll-slider{ display: flex; align-items: center; width: 6000px; }
.scroll-slider .slider_item{ position: relative; width: 385px; height: 356px; margin: 0 15px; }
.scroll-slider .slider_item figure{ height: 100%; padding: 45px 10px 30px; background: #fff; border-radius: 20px; filter: drop-shadow(5px 5px 0px rgba(0,0,0,0.2)); transform: translateZ(0); }
.scroll-slider .slider_item figure img{ display: block; width: 250px; margin: 0 auto; }
.scroll-slider .slider_item .year{ z-index: 1; position: absolute; top: -30px; left: 50px; font-size: 58px; width: 50%; font-weight: 700; }
.scroll-slider .slider_item figcaption{ padding: 5px 0 0; font-size: 17px; text-align: center; line-height: 150%; }

#history{ overflow: hidden; background: url(../images/bg_05.jpg) center/cover no-repeat; }
#history .bg{ padding: 95px 0 75px; /* background: url(../images/pic_18.png) center -70px no-repeat, url(../images/pic_19.png) center 150% no-repeat; */ }
#history .main-ttl{ padding: 0 0 60px; }

#history .btn-arrow{ width: 130px; height: 50px; font-size: 20px; }
#history .btn-arrow:before{ animation: arrow 3s ease infinite; left: 50%; width: 50%; transform: translate(-50%,-50%) skew(45deg); }
#history .scroll-slider{ margin-left: 40px; padding: 75px 0 20px; }

@keyframes arrow{
	0%{ right: 5%; }
	50%{ right: 1%; }
	100%{ right: 5%; }
}



/* ------------------------------------------------------------ curry */
.ingredients dl{ padding: 20px 0 0; font-size: 16px; font-family: "source-han-sans-japanese", sans-serif; font-style: normal; }
.ingredients dt{/*  padding: 0 0 30px; */ float: left; font-weight: 700; }
.ingredients dd{ padding: 0 0 25px; width: 100%; text-align: right; font-weight: 500; }

.cooking{ width: 840px; }
.cooking h4{ font-size: 27px;  }
.cooking ul{ display: flex; justify-content: space-between; padding: 10px 0 0; }
.cooking li{ width: 250px; }
.cooking li img{ display: block; width: 210px; height: 210px; contain: cover; margin: 0 auto 20px; }
.cooking li p{ display: flex; align-items: flex-start; }
.cooking li p .num{ width: 30px; padding: 5px 0 0; }
.cooking li p .content{ width: 220px; font-size: 15px; line-height: 180%; }

#recipe{ overflow: hidden; position: relative; padding: 110px 0 130px; }
#recipe h4{ padding: 70px 0 50px; font-size: 50px; text-align: center; line-height: 130%; font-family: "futura-pt", sans-serif; font-weight: 600; font-style: normal; }
#recipe h5{ padding: 0 0 20px; font-size: 26px; border-bottom: 1px solid #707070; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; }
#recipe .main-ttl{ padding: 0 0 60px; }
#recipe .flex{ display: flex; justify-content: space-between; align-items: center; width: 1100px; margin: 0 auto; padding: 0 0 60px; }
#recipe .iframe-area{ width: 640px; }
#recipe .ingredients{ width: 390px; }

#recipe .wow{ position: absolute; }
#recipe .curryR{ bottom: -70px; left: calc(50% + 350px); width: 450px; height: auto; }
#recipe .curryR02{ bottom: 110px; left: calc(50% + 450px); width: 450px; height: auto; }


/* ------------------------------------------------------------ products */
/* .products{ padding: 0 0 70px; } */
.products .main-ttl{ padding: 0 0 40px; }
.products .main-ttl small{ letter-spacing: 0; }
.products article{ display: flex; align-items: center; justify-content: space-between; margin: 0 0 30px; padding: 60px 70px 70px; background: #fff; border-radius: 30px; }
.products article .item{ width: 175px; height: auto; }

.products article .ttl-area{ display: flex; align-items: flex-start; justify-content: space-between; }
.products article .pepper img{ width: 70px; height: auto; }

.products article .txt{ width: 780px; }
.products article .txt h4{ padding: 0 0 20px; font-size: 40px; font-weight: 600; line-height: 130%; }
.products article .txt h4 small{ display: block; font-size: 16px; font-weight: 500; padding-left: 15px; line-height: 100%; }
.products article .detail{ padding: 0 0 25px; line-height: 180%; }
.products article .pic img{ margin: 0 20px 0 0; vertical-align: text-top; }

.products article .detail span { font-weight: bold; padding-left: 0.3rem; }

.products article .bottom{ display: flex; align-items: flex-end; justify-content: space-between; }
.products article .bottom .btn{ width: 300px; height: 70px; margin: initial; }

.pepper{ position: relative; display: inline-block; margin: 0 0 25px; padding: 2px 10px 3px; font-size: 15px; text-align: center; color: #fff; }
.pepper:after{ position: absolute; content: ""; width: 14px; height: 22px; right: -25px; top: -2px; }

.pepper.mild{ background: #152B8E; }
.pepper.mild:after{  background: url(../images/pepper_1.svg) center/cover no-repeat; }
.pepper.midium{ background: #009A44; }
.pepper.midium:after{  background: url(../images/pepper_2.svg) center/cover no-repeat; }

#products{ overflow: hidden; padding: 100px 0 165px; background: url(../images/bg_03.jpg) center/cover no-repeat; }
#products .bg{ z-index: 0; position: relative; }
#products .wow{ position: absolute; }
#products .curryL{ z-index: -1; top: 0; left: calc(50% - 1000px); }
#products .curryL:last-of-type{ top: initial; bottom: -150px; }
#products .curryR{ z-index: -1; top: 400px; left: calc(50% + 250px); }


/* ------------------------------------------------------------ recipe */
.main-recipe{ display: flex; justify-content: space-between; align-items: center; padding: 0 0 90px; }
.main-recipe figure{ width: 867px; height: auto; }
.main-recipe .txt{ width: 240px; margin: 0 25px 0 0; }
.main-recipe .txt h4{ padding: 0 0 40px; font-size: 36px; text-align: center; font-weight: 600; }
.main-recipe .btn-arrow{ width: 240px; height: 55px; font-size: 16px; font-weight: 600; }

.recipe-area{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 0 0 50px; }
.recipe-area .recipes{ width: 384px; padding: 0 0 50px; }
.recipe-area .recipes figure{ padding: 0 0 20px; }
.recipe-area .recipes figure img{ width: 100%; height: auto; }
.recipe-area .recipes .txt{ text-align: center; }
.recipe-area .recipes .txt h4{ height: 100px; font-size: 24px; font-weight: 600; line-height: 130%; }
.recipe-area .recipes:hover .btn-arrow:before{ transition: all .8s; right: 6%; }
.recipe-area .btn-arrow{ width: 240px; height: 55px; font-size: 16px; font-weight: 600; }

#curry{ padding: 100px 0 120px; }
#curry .main-ttl{ padding: 0 0 70px; }
#curry .btn-hover{ width: 510px; height: 90px; }



/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
		

	/* ------------------------------------------------------------ fv */
	#fv{ height: initial; }
	video{ object-fit: cover; }
	
	
	/* ------------------------------------------------------------ what */
	.line-list{ display: block; padding: 0 0 15px; }
	.line-list .line-item{ width: 100%; height: auto; padding: 30px 15px; margin: 0 0 30px; }
	.line-list .line-item h4{ height: auto; text-align: center; }
	.line-list .line-item h4 img{ position: initial; transform: none;  }
	.line-list .line-item.box1 img { width: 100%; height: auto; }
	.line-list .line-item.box2 img { width: 100%; height: auto; }
	.line-list .line-item.box3 img { width: 90%; height: auto; }

	.line-list .line-item .fsizeL{ font-size: 69px; line-height: 100%; }
	.line-list .line-item .fsizeM{ font-size: 35px; line-height: 100%; }
	.line-list .line-item .fsizeM2{ font-size: 39px; }
	.line-list .line-item .fsizeM3{ font-size: 39px; }
	.line-list .line-item .fsizeS{ font-size: 23px; }
	.line-list .line-item p{ font-size: 14px; }
	
	.modal-window,
	.featherlight-content{ width: 80%; max-width: initial; max-height: initial; }
	.what-mordal{ padding: 10% 5%; }
	.what-mordal .item{ width: 25%; margin: 0 auto 25px; }
	.what-mordal h4{ padding: 0 0 15px; font-size: 22px; }
	.what-mordal p{ padding: 0 0 40px; font-size: 13px; }
	.button-close{ width: 100%; padding: 21px 0; font-size: 16px; }
	.mordal-close{ right: 0px; top: 15px; width: 40px; height: 40px; }
	.mordal-close span{ right: 10px; width: 40px; }
	
	.mordal-recipe{ height: 68%; min-height: initial; }
	.mordal-recipe .iframe-area{ margin: 50px 0; }
	
	.modal-japonais{ }
	.pic-mordal .bg{ background: url(../images/pic_02.png) 160% 100px/60% no-repeat; }
	.pic-mordal .text{ width: 100%; padding: 0 5%; }
	.pic-mordal .item{ width: 80%; }
	.pic-mordal h5{ font-size: 22px; line-height: 150%; }
	.pic-mordal p{ padding: 15px 0 0; font-size: 14px; }
	
	#what .bg{ padding: 80px 0 50px; background: url(../images/pic_06-sp.png) center 70px no-repeat, url(../images/pic_20.png) -70px bottom/260px no-repeat; }
	#what .main-ttl{ padding: 0 0 35px; }
	#what .main-ttl img:first-of-type{ width: 65%; margin-bottom: 30px; }
	
	#what .btn{ width: 100%;  height: 70px; font-size: 14px; }
	#what .btn p{ padding-left: 13px; }
	#what .btn img{ width: auto; height: 70px; }
	
	#what .curryL{ top: -40px; left: -50px; width: 180px; height: auto; }
	#what .curryR{ bottom: initial; top: -40px; left: initial; right: -80px; width: 200px; z-index: 1; }
	
	
	/* ------------------------------------------------------------ sturdy */
	.sturdy-list{ display: block; }
	.sturdy-list li{ width: 100%; height: auto; margin-bottom: 35px; padding: 40px 15px 20px; }
	.sturdy-list li:nth-last-child(-n+2){ margin-bottom: 35px; }
	.sturdy-list li:last-of-type{ margin-bottom: 0; }
	.sturdy-list li .year{ top: -22px; left: 10px; font-size: 40px; }
	.sturdy-list li .flex{ display: block; }
	.sturdy-list li .txt-area{ width: 100%; }
	.sturdy-list li .txt{ height: auto; padding: 0 0 20px; }
	.sturdy-list li .sturdy_ttl{ padding: 0 0 10px; /* font-size: 18px; */ font-size: 16px; }
	.sturdy-list li .sturdy_txt{ font-size: 14px; }
	.sturdy-list li figure{ width: 100%; display: flex; justify-content: space-between; align-items: center; }
	.sturdy-list li img{ width: 35%; height: auto; }
	.sturdy-list li figcaption{ width: 55%; padding: 0; font-size: 14px; line-height: 150%; }
	
	#sturdy{ padding: 50px 0 30px; }
	#sturdy .main-ttl{ padding: 0 0 50px; font-size: 28px; }
	#sturdy .btn-arrow.SP{ display: flex; margin: 20px auto 0; width: 100%; height: 45px; font-size: 13px; }
	.btn-arrow:before{ right: 7%; }

	/* ------------------------------------------------------------ history */
	.scroll-slider{ width: 5000px; }
	.scroll-slider .slider_item{ width: 300px; height: 290px; }
	.scroll-slider .slider_item .year{ top: -24px; left: 20px; font-size: 45px; }
	.scroll-slider .slider_item figure{ padding: 30px 15px 10px; }
	.scroll-slider .slider_item figcaption{ padding: 10px 0 0; font-size: 14px; line-height: 170%; }
	.scroll-slider .slider_item figure img{ width: 210px; }

	#history{ }
	#history .bg{ padding: 50px 0; }
	#history .main-ttl{ padding: 0 0 35px; }
	#history .scroll-slider{ margin-left: 0; padding: 55px 0 10px; }
	
	
	/* ------------------------------------------------------------ curry */
	.ingredients dl{ padding: 15px 0 0; font-size: 14px; }
	.ingredients dd{ padding: 0 0 20px; }
		
	.cooking{ width: 100%; }
	.cooking ul{ display: block; }
	.cooking li{ width: 100%; display: flex; align-items: flex-start; justify-content: space-between; padding: 15px 0; border-bottom: 1px dashed #BFA35A; }
	.cooking li:last-of-type{ border: none; }
	.cooking li img{ width: 110px; height: auto; margin: 0; }
	.cooking li div{ width: 60%; }
	
	#recipe{ padding: 50px 0 100px; }
	#recipe .main-ttl{ padding: 0 0 20px; font-size: 36px; }
	#recipe .flex{ display: block; width: 100%; padding: 0 0 30px; }
	#recipe .iframe-area{ width: 100%; margin: 0 0 20px; }
	#recipe .ingredients{ width: 100%; }
	#recipe h4{ padding: 50px 0 20px; font-size: 30px; line-height: 100%; }
	#recipe h5{ padding: 0 0 12px; font-size: 22px; }
	
	#recipe .curryR{ left: initial; width: 150px; right: -41px; }
	#recipe .curryR02{ bottom: -19px; left: initial; width: 150px; right: -75px; }
	
	
	/* ------------------------------------------------------------ products */
/* 	.products{ padding: 0 0 20px; } */
	.products .main-ttl{ padding: 0 0 140px; }
	.products article{ padding: 30px 20px; flex-direction: column; border-radius: 16px; }
	.products article .item{ width: 23%; }
	.products article .txt{ width: 100%; padding: 25px 0 0; }
	.products article .txt h4{ padding: 0 0 5px; font-size: 24px;; }
	.products article .txt h4 small{ display: block;  font-size: 14px; padding-left: 0; }
	
	.pepper{ margin: 0; padding: 7px 24px; font-size: 12px; }
	.pepper:after{ top: 0px; }
	.products article .detail{ padding: 0 0 20px; font-size: 14px; }
	.products article .products_ttl{ display: flex; align-items: flex-start; justify-content: space-between; padding: 0 0 20px; }
	.products article .ttl-area{ width: 100%; }
	.products article .pic{ width: 35%; text-align: right; }
	.products article .pic img{ margin: 0 7px 0 0; width: 40%; height: auto; }
	.products article .pic img:last-of-type{ margin: 0; }
	
	.products article .bottom .btn{ width: 170px; height: 50px; font-size: 14px; }
	
	#products{ padding: 70px 0 50px; }
	#products .curryL{ top: -5%; width: 48%; height: auto; left: -50px; }
	#products .curryL:last-of-type{ bottom: -40px; }
	#products .curryR{ z-index: -1; top: 115px; width: 60%; height: auto; left: initial; right: -60px; }
	
	
	/* ------------------------------------------------------------ recipe */
	.main-recipe{ display: block; padding: 0 0 30px; }
	.main-recipe figure{ width: 100%; padding: 0 0 20px; }
	.main-recipe .txt{ width: 100%; margin: 0; }
	.main-recipe .txt h4{ padding: 0 0 15px; font-size: 25px; }
	.main-recipe .btn-arrow{ width: 75%; height: 45px; font-size: 14px; }
	
	.recipe-area{ padding: 0 0 20px; }
	.recipe-area .recipes{ width: 47%; padding: 0 0 35px; }
	.recipe-area .recipes figure{ padding: 0 0 10px; }
	.recipe-area .recipes .txt h4{ height: 80px; font-size: 17px; }
	.recipe-area .btn-arrow{ width: 100%; height: 40px; font-size: 13px; }
	
	#curry{ padding: 50px 0; }
	#curry .main-ttl{ padding: 0 0 40px; font-size: 40px; }
	#curry .btn-hover{ width: 100%; height: 60px; }

	
	
	
}