@charset "utf-8";


/* Google fonts import */

@import url("https://fonts.googleapis.com/earlyaccess/sawarabimincho.css"); /* mincho [font-family: "Sawarabi Mincho";] */
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css"); /* gothic [font-family: "Noto Sans Japanese";] */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap&subset=japanese');



/*■reset----------------------------------------------*/
*{
	padding:0;
	margin:0;
}
h1,h2,h3,h4,h5,h6{
	font-size:14px;
	font-weight:normal;
}
ul,ol,li{
	list-style-type:none;
}
a{
	font-size:14px;
	transition:all 0.5s;
	text-decoration:none;
}
a:hover{
	opacity:0.7;
}
img{
	border:none;
	display:block;
	width:100%;
}
p{
	font-size:14px;
	line-height:140%;
}

body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-family: "Noto Serif Japanese", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 游明朝, YuMincho, HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-family: "Noto Sans Japanese";
	background:#FFFFFF;
}

br.sp{
	display:none;
}

.effect{
	opacity:0;
	transition:all 1.25s;
	-ms-filter: blur(4px);
    filter: blur(4px);
	position:relative;
	top:40px;
}
.effect.move{
	opacity:1;
	-ms-filter: blur(0px);
    filter: blur(0px);
	top:0;
}
.effect.in{
	top:0px;
	left:-60px;
}
.effect.in.move{
	left:0;
}
.effect.in_re{
	top:0px;
	right:-60px;
}
.effect.in_re.move{
	right:0;
}
.effect .slow{
	opacity:0;
}
.effect.move .slow{
	-webkit-animation: fade 2.5s ease 1s forwards ;
	animation: fade 2.5s ease 1s forwards ;
}
@-webkit-keyframes fade {
    0% { opacity:0;}
    100% { opacity:1;}
}
@keyframes fade {
    0% { opacity:0;}
    100% { opacity:1;}
}

@media screen and (max-width: 1024px) {
	br.pc{
		display: none;
	}
	br.sp{
		display: block;
	}
}













/* MvArea
---------------------------------------------------------- */
#Mv_sp,.MvSp_open{
	display:none;
}
.MvArea{
	width:100%;
	transform: translateZ(0);
	backface-visibility: hidden;
}
.MvArea .Area{
	position:relative;
}
.MvArea .Area img.f{
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	transition:all 1s;
    filter: blur(4px);
}
.MvArea .Area img.f.on{
	opacity:1;
    filter: blur(0px);
}
.MvArea .Area img#Logo{
	width:50%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity:0;
	transition:all 1.5s;
    filter: blur(5px);
}
.MvArea .Area img#Logo.on{
	opacity:1;
    filter: blur(0px);
}
.MvArea .Area img#Logo.on.move{
	width: 17.5%;
    top: 12.5%;
    left: 46%;
	transition:all 1.65s;
}

.Mark{
	width: 28%;
    position: absolute;
    top: 43%;
    left: 50.65%;
	transform:translate(-50%,-50%);
	transition:all 1s;
	opacity:0;
}
.Mark.foot{
	width: 75%;
	max-width:480px;
	margin:60px auto;
    position: static;
    top: auto;
    left: auto;
	transform:none;
	opacity:1 !important;
}
.Mark.on{
	opacity:1;
}
.Mark div{
	position:relative;
}
.Mark div img.u{
	position:absolute;
	top:0;
	left:0;
}
.Mark div img.Mark_tx{
	z-index:5;
	position:relative;
}
.Mark div img.Mark01,
.Mark div img.Mark02,
.Mark div img.Mark03,
.Mark div img.Mark04,
.Mark div img.Mark05,
.Mark div img.Mark06,
.Mark div img.Mark07{
	animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.Mark div img.Mark01{
	z-index:7;
	animation: floatY 3.2s infinite;
}
.Mark div img.Mark02{
	z-index:6;
	animation: tilt 4s infinite;
}
.Mark div img.Mark03{
	z-index:4;
	animation: wobble 2.8s infinite;
}
.Mark div img.Mark04{
	z-index:4;
	animation: slideX 3.6s infinite;
}
.Mark div img.Mark05{
	z-index:3;
	animation: breathe 4.5s infinite;
}
.Mark div img.Mark06{
	z-index:2;
	animation: hop 3s infinite;
}
.Mark div img.Mark07{
	z-index:1;
	animation: swing 5s infinite;
}

@keyframes floatY{
  0%,100%{ transform:translateY(0);}
  50%{ transform:translateY(-6px);}
}
@keyframes tilt{
  0%,100%{ transform:rotate(0deg);}
  50%{ transform:rotate(4deg);}
}
@keyframes wobble{
  0%,100%{ transform:scale(1,1);}
  50%{ transform:scale(1.05,0.95);}
}
@keyframes slideX{
  0%,100%{ transform:translateX(0);}
  50%{ transform:translateX(5px);}
}
@keyframes breathe{
  0%,100%{ transform:scale(1);}
  50%{ transform:scale(1.04);}
}
@keyframes hop{
  0%,100%{ transform:translateY(0);}
  30%{ transform:translateY(-4px);}
  60%{ transform:translateY(0);}
}
@keyframes swing{
  0%,100%{
    transform:translateY(0) rotate(0);
  }
  50%{
    transform:translateY(-3px) rotate(-3deg);
  }
}

.Mvread{
	width:100%;
	padding:40px 0 100px 0;
	opacity:0;
	transition:all 1s;
}
.Mvread.on{
	opacity:1;
}
.Mvread p{
	text-align:center;
	color:#00429a;
	letter-spacing:1px;
	font-size:18px;
	font-weight:400;
	line-height:220%;
}
@media screen and (max-width: 1024px) {
	#Mv_pc{
		display:none;
	}
	#Mv_sp{
		display:block;
	}
	#Mv_sp .Area{
		margin-bottom:8px;
	}
	.MvSp_open{
		display:block;
		width:100%;
		height:100%;
		background:#FFFFFF;
		position:fixed;
		z-index:10000;
	}
	.MvSp_open img{
		width:70%;
		position:fixed;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		opacity:0;
		transition:all 1.5s;
		filter: blur(5px);
	}
	.MvSp_open img.on{
		opacity:1;
		filter: blur(0px);
	}
	.Mark{
		width: 75%;
		top: 50%;
		left: 50%;
		z-index:5;
	}
	.Mark.foot{
		width: 65%;
		margin:45px auto;
	}
	#Mv_sp img.b{
		margin-bottom:8px;
	}

	
	.Mvread{
		padding:30px 0 40px 0;
		opacity:1 !important;
	}
	.Mvread p{
		font-size:13px;
		line-height:200%;
		letter-spacing:0;
	}

}

.scroll_bottom{
	position: absolute;
	left: 15px;
	bottom: 25%;
	writing-mode: vertical-rl;
	color:#00429A;
	opacity:0;
	transition:all 0.5s;
}
.scroll_bottom.on{
	opacity:1;
}
.scroll_bottom::before {
	animation: scroll 2s infinite;
	background-color: #00429A;
	bottom: -110px;
	content: "";
	height: 100px;
	left: 3px;
	margin: auto;
	position: absolute;
	right: 0;
	width: 1px;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
@media screen and (max-width: 1024px) {
	.scroll_bottom{
		right: 5px;
		left:auto;
		bottom: 105px;
		color:#FFFFFF;
	}
	.scroll_bottom::before {
		animation: scroll 2s infinite;
		background-color: #FFFFFF;
		bottom: -60px;
		content: "";
		height: 50px;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		width: 2px;
	}
}








/* ReadImg
---------------------------------------------------------- */
.ReadImg{
	width:100%;
	padding:20px 0 90px 0;
}
.ReadImg .Area{
	width:80%;
	max-width:440px;
	margin:auto;
	position:relative;
	overflow: hidden;
}
.ReadImg .Area img.s{
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	transform:scale(3,3);
}
.ReadImg .Area.move img.s{
	animation: pon 0.3s ease 0.8s forwards;
}
.ReadImg .Area img.f{
	position:absolute;
	top:0;
	right:-290px;
}
.ReadImg .Area.move img.f{
	animation: nuuu 2s ease 0.6s forwards;
}
@keyframes pon{
  0%{
    opacity:0;
	transform:scale(3.2,3.2);
  }
  100%{
    opacity:1;
	transform:scale(1.0,1.0);
  }
}
@keyframes nuuu{
  0%{
    right:-290px;
  }
  100%{
    right:0px;
  }
}
@media screen and (max-width: 1024px) {
	.ReadImg{
		padding:5px 0 45px 0;
	}
	.ReadImg .Area{
		width:70%;
	}
	.ReadImg .Area img.f{
		right:-260px;
	}
}







/* Contents01
---------------------------------------------------------- */
.Contents01{
	width:100%;
	padding:120px 0 10px 0;
	background:#4DB3C6;
	position:relative;
	overflow:hidden;
}
.Contents01::after{
	content:"";
	width:100%;
	height:220px;
	display:block;
	background:#00429A;
	position:absolute;
	bottom:0;
	left:0;
	z-index:1;
}
.Contents01 .Area{
	width:88%;
	max-width:1200px;
	margin:auto;
	position:relative;
	z-index:3;
}
.Contents01 .Area .Img_t{
	margin-bottom:15px;
	position:relative;
}
.Contents01 .Area .Img_t img.f{
	top:0;
	left:80px;
	position:absolute;
	opacity:0;
}
.Contents01 .Area .Img_t.move img.f{
	animation: syu 0.65s ease 0.85s forwards;
}
@keyframes syu{
  0%{
	  left:80px;
	  opacity:0;
  }
  100%{
	  left:0;
	  opacity:1;
  }
}

.Contents01 .Area .Img_g{
	max-width:600px;
	margin:auto;
	position:relative;
}
.Contents01 .Area .Img_g a{
	display:block;
	width:16.9%;
	position:absolute;
	bottom:10%;
	right:20.83333333%;
}
.Contents01 .Area .Img_g a img{
	opacity:0;
	transition:all 0.5s;
}
.Contents01 .Area .Img_g a:hover img{
	opacity:0.6;
}
.Contents01 .Area .Img_g img.f{
	top:0;
	left:0;
	position:absolute;
}
.Contents01 .Area .Img_g img.f#Gimg01{
	animation: fuwafuwa 3.5s ease 0.2s infinite;
}
.Contents01 .Area .Img_g img.f#Gimg02{
	animation: fuwafuwa 3.5s ease 0.5s infinite;
}
.Contents01 .Area .Img_g img.f#Gimg03{
	animation: fuwafuwa 3.5s ease 0.9s infinite;
}
@keyframes fuwafuwa{
  0%{
	  transform:translateY(-10px);
  }
  50% {
	  transform:translateY(0px);
  }
  100%{
	  transform:translateY(-10px);
  }
}

.Contents01 .Area .Link{
	width:100%;
	margin:15px auto;
}
.Contents01 .Area .Link.b{
	margin-bottom:85px;
}
.Contents01 .Area .Link p{
	font-size:21px;
	text-align:center;
	color:#FFFFFF;
	letter-spacing:1px;
	font-weight:400;
}
.Contents01 .Area .Link a{
	display:block;
	font-size:24px;
	text-align:center;
	color:#00429a;
	padding:8px 0;
	letter-spacing:1px;
	font-weight:500;
	background:#4DB3C6;
	border-radius:1000px;
	margin:20px auto;
	width:80%;
	max-width:520px;
}
.Contents01 .Area .Link.b a{
	color:#FFFFFF;
	background:#00429A;
}
@media screen and (max-width: 1024px) {
	.Contents01{
		padding:45px 0 10px 0;
	}
	.Contents01::after{
		height:125px;
	}
	.Contents01 .Area{
		width:96%;
	}
	.Contents01 .Area img.t{
		width:94%;
		margin:auto;
		margin-bottom:30px;
	}
	.Contents01 .Area .Link{
		margin:10px auto;
	}
	.Contents01 .Area .Link p{
		font-size:14px;
		letter-spacing:0;
	}
	.Contents01 .Area .Link a{
		font-size:18px;
		padding:4px 0;
		margin:5px auto;
	}
}







/* Contents02
---------------------------------------------------------- */
.Contents02{
	width:100%;
	position:relative;
	background:#00429A;
	padding:60px 0 0 0 ;
	overflow:hidden;
}
.Cb_tx{
	width:23%;
	position: static;
	top:auto;
	left:auto;
	transform:none;
	margin:auto;
}
.Cb_tx .Area img.slow{
    width: 80%;
    position: absolute;
    top: 0%;
    left: -65%;
}
.Twobox{
	width:100%;
	margin:120px auto 100px auto;
}
.Twobox .f{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	margin-bottom:90px;
}
.Twobox .f.re{
	flex-direction:row-reverse;
}
.Twobox .f .img{
	width:60%;
}
.Twobox .f .tx{
	width:40%;
	position:relative;
}
.Twobox .f .tx p{
	width:80%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:2.5vw;
	font-weight:bold;
	color:#FFFFFF;
	line-height:155%;
	text-align:center;
	letter-spacing:2px;
}
.Contents02 .Map{
	padding:0 0 80px 0;
	width:100%;
}
.Contents02 .Map h3{
	font-size:38px;
	color:#FFFFFF;
	font-weight:600;
	letter-spacing:2px;
	text-align:center;
	margin-bottom:30px;
}
.Contents02 .Map .Img{
	width:100%;
	max-width:800px;
	margin:auto;
	position:relative;
}
.Contents02 .Map .Img img.f{
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}
.Contents02 .Map .Img img.f#Mimg_01{
	opacity:1;
	clip-path: inset(0 100% 0 0);
}
.Contents02 .Map.move .Img img.f#Mimg_01{
	animation: clip 3s ease 1s forwards;
}
.Contents02 .Map.move .Img img.f#Mimg_02{
	animation: fade 1.5s ease 2.5s forwards;
}
.Contents02 .Map.move .Img img.f#Mimg_03{
	animation: fade 1.5s ease 3s forwards;
}
@keyframes clip{
  0%{
	  clip-path: inset(0 100% 0 0);
  }
  100%{
	  clip-path: inset(0 0 0 0);
  }
}
@keyframes fade{
  0%{
	  opacity:0;
  }
  100%{
	  opacity:1;
  }
}

@media screen and (max-width: 1024px) {
	.Contents02{
		padding:30px 0 0 0 ;
	}
	.Cb_tx{
		width:45%;
	}
	.Cb_tx .Area img.slow{
		width: 70%;
		position: absolute;
		top: 5%;
		left: -50%;
	}
	.Twobox{
		margin:35px auto 45px auto;
	}
	.Twobox .f{
		margin-bottom:20px;
	}
	.Twobox .f .tx p{
		font-size:12px;
		letter-spacing:1px;
	}
	
	.Contents02 .Map{
		padding:0 0 55px 0;
		width:90%;
		margin:auto;
	}
	.Contents02 .Map h3{
		font-size:21px;
		letter-spacing:1px;
		margin-bottom:25px;
	}
	
}








/* Contents03
---------------------------------------------------------- */
.Contents03{
	background:#41AABB;
	padding:70px 0 120px 0;
	overflow:hidden;
}
.Contents03 .Tit{
	margin:20px auto 80px auto;
}
.Contents03 .Tit h2{
	font-size:32px;
	font-weight:bold;
	margin-bottom:15px;
	color:#FFFFFF;
	text-align:center;
}
.Contents03 .Tit h3{
	font-size:40px;
	font-weight:bold;
	text-align:center;
	color:#FFFFFF;
	opacity:0;
}
.Contents03 .Tit.move h3{
	-webkit-animation: fade 2.5s ease 1.3s forwards ;
	animation: fade 2.5s ease 1.3s forwards ;
}
.Contents03 .Tit div{
	max-width:540px;
	margin:30px auto 10px auto;
	position:relative;
}
.Contents03 .Tit div img.f{
	width:48%;
}
.Contents03 .Tit div img.r{
	width: 54%;
    position: absolute;
    bottom: 10px;
    right: 25px;
	opacity:0;
}
.Contents03 .Tit.move div img.r{
	-webkit-animation: fade 2.5s ease 1.15s forwards ;
	animation: fade 2.5s ease 1.15s forwards ;
}

.recipeArea{
	width:85%;
	max-width:880px;
	margin:auto;
	margin-bottom:80px;
}
.recipeArea h4{
	color:#FFFFFF;
	font-weight:bold;
	letter-spacing:1px;
	padding:20px;
	text-align:center;
	border:solid 2px #FFFFFF;
	border-radius:10000px;
	font-size:30px;
	line-height:150%;
	margin-bottom:45px;
}
.recipeArea h4 b{
	font-size:128%;
	display:block;
}
.recipeArea .Wrap{
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.recipeArea .Wrap .Item{
	width:47%;
}
.recipeArea .Wrap .Item a{
	display:block;
	position:relative;
	color:#FFFFFF;
	text-align:center;
	font-weight:bold;
}
.recipeArea .Wrap .Item a span{
	display:block;
	margin:10px auto 6px auto;
	font-size:18px;
}
.recipeArea .Wrap .Item a p{
	font-size:24px;
}
.recipeArea .Wrap .Item a.coming{
	pointer-events:none;
}
.recipeArea .Wrap .Item a.coming::after{
	content:"";
	display:block;
	width:380px;
	height:253px;
	background:url(../../../../img/brand/ltlt35/coming.png) no-repeat center center;
	background-size:380px;
	position:absolute;
	bottom:50px;
	right:-85px;
}

.recipeArea .Wrap .Item a.coming2::after{
	content:"";
	display:block;
	width:380px;
	height:253px;
	background:url(../../../../img/brand/ltlt35/coming.png) no-repeat center center;
	background-size:380px;
	position:absolute;
	bottom:83px;
	right:-85px;
}





a.r_btn{
	width:400px;
	padding:15px 0;
	display:block;
	background:#00429a;
	border-radius:1000px;
	text-align:center;
	color:#FFFFFF;
	font-weight:600;
	margin:20px auto;
	font-size:24px;
}
@media screen and (max-width: 1024px) {
	.Contents03{
		padding:50px 0 80px 0;
	}
	.Contents03 .Tit{
		margin:10px auto 40px auto;
	}
	.Contents03 .Tit h2{
		font-size:18px;
	}
	.Contents03 .Tit h3{
		font-size:24px;
	}
	.Contents03 .Tit div{
		width:86%;
		margin:20px auto 8px auto;
	}
	.Contents03 .Tit div img.f{
		width:48%;
	}
	.Contents03 .Tit div img.r{
		bottom: 4%;
		right: 7%;
	}

	.recipeArea{
		margin-bottom:50px;
	}
	.recipeArea h4{
		padding:15px;
		font-size:17px;
		margin-bottom:30px;
	}
	.recipeArea .Wrap .Item{
		width:98%;
		margin:auto;
		margin-bottom:40px;
	}
	.recipeArea .Wrap .Item a span{
		margin:10px auto 6px auto;
		font-size:13px;
	}
	.recipeArea .Wrap .Item a p{
		font-size:18px;
		letter-spacing:0;
	}
	.recipeArea .Wrap .Item a.coming::after{
		width:86%;
		height:auto;
		padding-top:66.66666666%;
		background:url(../../../../img/brand/ltlt35/coming.png) no-repeat center center;
		background-size:100%;
		bottom:9%;
		right:-16%;
	}
	
		.recipeArea .Wrap .Item a.coming2::after{
		width:86%;
		height:auto;
		padding-top:66.66666666%;
		background:url(../../../../img/brand/ltlt35/coming.png) no-repeat center center;
		background-size:100%;
		bottom:17%;
		right:-16%;
	}
	

	a.r_btn{
		width:280px;
		padding:8px 0;
		margin:-50px auto 20px auto;
		font-size:18px;
	}
}









/* footer
---------------------------------------------------------- */
footer{
	padding:0 0 40px 0;
}
footer a.b{
	display:block;
	width:88%;
	max-width:680px;
	margin:40px auto;
}
footer a.t{
	width:320px;
	display:block;
	margin:80px auto 40px auto;
	background:#004299;
	border-radius:1000px;
	padding:15px 0;
	position:relative;
}
footer a.t:hover{
	opacity:1;
	background:#4DB3C6;
}
footer a.t::after{
	content:"";
	display:block;
	width:90px;
	height:106px;
	background:url(../../../../img/brand/ltlt35/top_i.png) no-repeat center center;
	background-size:90px;
	position:absolute;
	top:50%;
	left:-45px;
	transform:translateY(-50%);
	transition:all 0.5s;
}
footer a.t:hover::after{
	top:35%;
}
footer a.t img{
	width:auto;
	height:30px;
	margin:auto;
}
footer address{
	margin-top:150px;
}
footer address img{
	width:120px;
	margin:auto;
}
@media screen and (max-width: 1024px) {
	footer{
		padding:0 0 110px 0;
	}
	footer a.b{
		width:90%;
		margin:25px auto;
	}
	footer a.t{
		width:170px;
		margin:50px auto 10px auto;
		padding:8px 0;
	}
	footer a.t::after{
		width:55px;
		height:65px;
		background:url(../../../../img/brand/ltlt35/top_i.png) no-repeat center center;
		background-size:55px;
		left:-35px;
	}
	footer a.t:hover::after{
		top:50%;
	}
	footer a.t img{
		height:16px;
	}
	footer address{
		margin-top:55px;
	}
	footer address img{
		width:70px;
	}
}


.recipeArea .Wrap:has(.Item:only-child){
	justify-content: center;
}


.Contents03 .recipe_text{
    text-align:center;
    color:#000;
    font-size:20px;
    margin:40px 0 20px;
    font-weight:bold;
}

@media screen and (max-width: 1024px){

    .Contents03 .recipe_text{
        margin:0px 0 70px;
    }

}