@charset "utf-8";

/* ------------------------------------------------------------ common */
:root{
	--main-color: #02A560;
	--cubic-bezier: cubic-bezier(0.61, 1, 0.88, 1);
}

body{ min-width: 1200px; margin: 0 auto; font-family: 'Noto-Sans-JP-Regular'; font-size: 16px; line-height: 1.5; }
section{ position: relative; }
a:hover{ color: var(--main-color); }

sub{ font-size: 0.7em; vertical-align: baseline; }

.sp{ display: none; }

.figure{ display: block; }
.figure img{ border-radius: 20px; }
.txt{ line-height: 2.2; }

.main-ttl{ padding: 0 0 70px; text-align: center; font-size: 53px; font-family: "hachi-maru-pop", sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.16em; }
.main-ttl_en{ display: block; padding: 20px 0 0; color: var(--main-color); font-size: 37px; font-family: "ads-tomorrowskip", sans-serif; font-weight: 400; font-style: normal; letter-spacing: initial; }

.btn{ width: 340px; height: 70px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 20px; background: #fff; border: 1px solid #fff; color: var(--main-color); border-radius: 100px; }
.btn:hover{ color: #fff; background: var(--main-color); }

.position-item{ position: absolute; }


/* fade */
.loadIn{ opacity: 0; }
.loadIn.on{ opacity: 1; transition: 0.6s var(--cubic-bezier); }

.fadeIn{ opacity: 0; transform: translateY(100px) ; }
.fadeIn.on{ opacity: 1; transform: translateY(0) ; transition: 0.6s var(--cubic-bezier); }


/* ------------------------------------------------------------ header */
header { display: flex; align-items: center; justify-content: space-between; padding: 20px 2%; }
header nav { display: flex; align-items: center; }
header nav a { color: #000; text-decoration: none; font-size: 16px; font-family: 'Noto Sans JP', sans-serif; display: flex; align-items: center; padding: 0 20px; }
header nav a img { display: block; }


/* ------------------------------------------------------------ fv */
#fv{ overflow: hidden; }
#fv .bg{ padding: 0 0 30px; background: #FAF8F4 url(../images/item_05.svg) left 8%/100% no-repeat; }

.fv{ position: relative; }
.fv:before{ z-index: 10; position: absolute; bottom: -6%; left: calc(50% + 500px); content: ""; width: 210px; height: 205px; background: url(../images/item_01.svg) center/cover no-repeat; }
.fv .fv_text{ z-index: 100; position: absolute; left: 2%; top: 50%; transform: translate(0,-50%); width: 500px; padding: 60px 5%; text-align: center; background: #fff; border-radius: 20px; }
.fv figcaption{ padding: 40px 0 0; font-size: 19px; }

.kv{ display: flex; align-items: center; justify-content: flex-end; }
.kv .slider{ width: 90vw!important; min-width: 900px!important; background: var(--main-color); border-radius: 30px 0 0 30px; }
.kv .slider_item{ width: 90vw!important; min-width: 900px!important; }
.kv .slider_item img{ width: 100%; height: auto; border-radius: 30px 0 0 30px; }
.kv .slider_item img.sp{ display: none; }

.kv .slick-dots{ z-index: 100; bottom: 20px; }
.kv .slick-dots li,
.kv .slick-dots li button{ width: 10px; height: 10px; }
.kv .slick-dots li button::before{ content: ""; width: 10px; height: 10px; border-radius: 100%; background: #fff; }
.kv .slick-dots li button:active::before{ background: #F5D020; }	

.sv{ padding: 80px 0 0; }
.sv_textbox{ display: flex; align-items: flex-start; justify-content: space-between; padding: 0 0 70px; color: #fff; }

.sv h2{ width: 50%; font-size: 44px; font-family: "hachi-maru-pop", sans-serif; font-weight: 400; font-style: normal; line-height: 1.5; }
.sv .txt{ width: 48%; }

.sv .flow{ padding: 60px 5%; border-radius: 20px; text-align: center; background: #fff; }
.sv .flow h3{ padding: 0 0 30px; font-size: 34px; font-family: "hachi-maru-pop", sans-serif; font-weight: 400; font-style: normal; }
.sv .flow h3 img{ margin-right: 5px; }


/* ------------------------------------------------------------ feature */
#feature{ padding: 80px 0 120px; background: #FAF8F4; }

.feature_list{ padding: 0 2.5%; max-width: 1600px; margin: 0 auto; }
.feature_list li{ display: flex; align-items: center; justify-content: flex-start; gap: 5%; margin: 0 0 100px; }
.feature_list li:last-of-type{ margin: 0; }
.feature_list li:nth-of-type(even){ flex-direction: row-reverse; }

.feature_list .figure{ position: relative; width: 48%; max-width: 720px; }
.feature_list .figure:before{ position: absolute; content: ""; right: -16px; top: 10px; width: 100%; height: 100%; background: #EDE9DD; border-radius: 20px; }
.feature_list .figure img{ position: relative; }

.feature_list_text{ width: 38%; }
.feature_list_text .txt{ line-height: 2.5; font-size: 18px; }
.feature_list_ttl{ display: flex; align-items: center; padding: 0 0 40px; gap: 10px; }
.feature_list_ttl p{ font-size: clamp(60px,6vw,90px); color: var(--main-color); font-family: "ads-tomorrowskip", sans-serif; font-weight: 400; font-style: normal; }
.feature_list_ttl h3{ font-size: clamp(25px,2vw,32px); font-family: "hachi-maru-pop", sans-serif; font-weight: 400; font-style: normal; }


/* ------------------------------------------------------------ movie */
#movie{ padding: 100px 0; }
#movie .iframe-wrapper{ border-radius: 20px; }

.iframe-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.iframe-wrapper iframe,
.iframe-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* ------------------------------------------------------------ goods */
#goods{ overflow: hidden; position: relative; padding: 18vw 0 10vw; color: #fff; background: url(../images/item_06.png) center top/100% no-repeat, url(../images/item_07.png) center bottom/100% no-repeat; }
#goods .bg{ background: #02A560; }	

#goods .item01{ top: 9%; left: 4%; }
#goods .item02{ top: 18%; left: 14%; }
#goods .item03{ top: 6%; right: 4%; }
#goods .main-ttl_en{ color: #7DD1AE; }

.goods_list{ display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 60px 20px; }
.goods_list li{ width: calc(100% / 3 - 20px); }
.goods_list_text{ padding: 20px 0 0; }
.goods_list_text .goods_list_ttl{ height: 100px; padding: 0 0 15px; font-size: 28px; text-align: center; line-height: 150%; }
/* .goods_list_text .txt{ height: 210px; } */
.goods_list_text .btn{ margin-top: 35px; color: var(--main-color); }
.goods_list_text .btn:hover{ color: #fff; }

.featherlight .featherlight-content{ padding-top: 5%!important; }
.featherlight .featherlight-content img { max-width: 90vw; max-height: 90vh; width: auto; height: auto; }
.featherlight .featherlight-close-icon{ top: 2%!important; right: 1%!important; font-size: 2rem; color: var(--main-color)!important; }


/* ------------------------------------------------------------ topics */
#topics{ padding: 90px 0 120px; }
#topics .main-ttl{ padding: 0 0 50px; }

.topics_list { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 49px; }
.topics_list li { height: 350px; width: calc(100% / 3 - 3%); }
.topics_list .figure img { width: 100%; height: auto; display: block; }
.topics_list_text { padding: 20px 0 0; }
.topics_list_ttl { font-size: 18px; margin-bottom: 25px; color: #000; line-height: 1.5; font-family: 'Noto-Sans-JP-Medium'; }
.topics_list li a:hover .topics_list_ttl{ color: var(--main-color); }

.topics_list_meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #666; }
.topics_list_meta .label { background: #0eaf65; color: #fff; padding: 2px 10px; border-radius: 13px; font-size: 12px; }
.topics_list_meta .date { font-size: 14px; color: #595959; }


/* ------------------------------------------------------------ news */
#news{ padding: 120px 0 110px; background: #FAF8F4; }
#news .flex{ display: flex; align-items: flex-start; justify-content: space-between; }
#news .main-ttl{ width: 30%; text-align: left; }

.news_list { width: 75%; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.news_list li { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
.news_list li:hover { transform: translateY(-10px); }
.news_list a { display: flex; align-items: center; justify-content: space-between; gap: 2%; text-decoration: none; color: inherit; padding: 30px; }
.news_list a p{ font-size: 18px; }
.news_list .date { display: block; font-size: 14px; color: #ACACAC; margin-bottom: 8px; }

.news_list .text{ width: 65%; }
.news_list .logo{ width: 33%; text-align: right; }


/* ------------------------------------------------------------ footer */
footer{ position: relative; padding: 50px 0; border-top: 10px solid var(--main-color); text-align: center; }
footer .copy{ font-size: 12px; }

footer .f_logo{ padding: 0 0 100px; }
footer .logos{ padding: 0 0 100px; }
footer .logos img{ margin: 0 35px; }

aside{ z-index: 10; position: fixed; right: 2%; bottom: 5%; }





/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
/* ------------------------------------------------------------ common */
	body{ min-width: 100%; font-size: 14px; }

	.sp{ display: block; }
	.pc{ display: none; }
	
	.main-ttl { padding: 0 0 30px; font-size: 31px; }
	.main-ttl_en { padding: 10px 0 0; font-size: 20px; }
	
	.btn{ width: 80%; height: 55px; margin: 0 auto; font-size: 16px; }
		
	
/* ------------------------------------------------------------ header */
	header { flex-direction: row; justify-content: space-between; align-items: center; position: relative; width: 100%; }
	header nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; height: 100vh; background: #fff; flex-direction: column; padding: 20px 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
	header nav a { padding: 15px 20px; border-bottom: 1px solid #eee; width: 100%; display: block; text-align: left; }
	
	.menu-btn { position: relative; z-index: 100; width: 30px; height: 25px; cursor: pointer; }
	.menu-btn span { position: absolute; display: block; height: 1px; width: 100%; background: var(--main-color); }
	.menu-btn span:first-of-type{ transition: all .5s; top: 4px; }
	.menu-btn span:nth-of-type(2){ transition: all .5s; top: 12px; }
	.menu-btn span:last-of-type{ transition: all .5s; top: 20px; }
	
	
	/* open */
	header.open nav { display: flex; }
	
	.menu-btn.open span:first-of-type{ transform: rotate(45deg); top: 12px; }
	.menu-btn.open span:nth-of-type(2){ opacity: 0; }
	.menu-btn.open span:last-of-type{ transform: rotate(-45deg); top: 12px; }
	

/* ------------------------------------------------------------ fv */
	#fv .bg { overflow: hidden; padding: 0; background-size: 300% auto; background-position: left 30%; }
	
	.fv { flex-direction: column; align-items: center; }
	.fv::before{ left: initial; right: 2%; bottom: -6%; width: 80px; height: 78px; }
	
	.fv .fv_text { left: 0; top: initial; bottom: -13%; transform: none; width: 50%; padding: 10px; border-radius: 0 16px 15px 0; box-sizing: border-box; }
	.fv .fv_text img { width: 90%; height: auto; }
	.fv figcaption { font-size: 12px; padding: 10px 0 0; line-height: 1.5; }
	
	.kv { }
	.kv .slick-slide{ width: 90%; }
	.kv .slider { width: 355px!important; min-width: auto!important; }
	.kv .slider_item { width: 355px!important; min-width: auto!important; }
	.kv .slider_item img.pc{ display: none; }
	.kv .slider_item img.sp{ display: block; }
	
	.kv .slick-dots{ bottom: 40px; right: 10px; text-align: right; }
	
	.sv { padding: 100px 0; }
	.sv_textbox { flex-direction: column; padding: 0 0 40px; }
	.sv h2 { width: 100%; font-size: 24px; line-height: 1.5; text-align: center; padding: 0 0 20px; }
	.sv .txt { width: 100%; }
	
	.sv .flow { padding: 40px 20px; }
	.sv .flow h3 { font-size: 20px; padding: 0 0 20px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; text-align: center; }
	.sv .flow h3 img { margin: 0; height: auto; width: 160px; }
	.sv .flow img { width: 100%; height: auto; border-radius: 10px; }


/* ------------------------------------------------------------ feature */
	#feature{ padding: 50px 0; }

	.feature_list { width: 90%; margin: 0 auto; }	
	.feature_list li { flex-direction: column; margin: 0 auto 30px; gap: 30px; }
	.feature_list li:nth-of-type(even){ flex-direction: column; }
	
	.feature_list .figure { width: 100%; max-width: 100%; }
	.feature_list .figure:before { display: none; }
	.feature_list .figure img { width: 100%; height: auto; border-radius: 15px; }
	
	.feature_list_text { width: 100%; padding: 0; box-sizing: border-box; }
	.feature_list_text .txt { font-size: 15px; line-height: 2; }
	
	.feature_list_ttl { padding: 0 0 20px; }
	.feature_list_ttl p { width: auto; font-size: 36px; }
	.feature_list_ttl h3 { font-size: 18px; }
	
	.featherlight .featherlight-content{ padding-top: 10%!important; }


/* ------------------------------------------------------------ movie */
	#movie{ padding: 50px 0; }
	#movie .iframe-wrapper{ border-radius: 20px; }


/* ------------------------------------------------------------ goods */
	#goods { padding: 120px 0; background: url(../images/item_06-sp.png) center top/100% no-repeat, url(../images/item_07-sp.png) center bottom/100% no-repeat; }
	
	#goods .item01 { width: 10%; }
	#goods .item02 { top: 5%; width: 10%; }
	#goods .item03 { top: 1%; right: -1%; width: 24%; }
	
	.goods_list { flex-direction: column; gap: 60px; }
	.goods_list li { width: 100%; }
	
	.goods_list .figure img { width: 100%; height: auto; }
	
	.goods_list_text { padding: 30px 0 0; }
	.goods_list_text .goods_list_ttl { height: auto; font-size: 20px; text-align: center; }
	.goods_list_text .txt { }


/* ------------------------------------------------------------ topics */
	#topics{ padding: 50px 0; }
	#topics .main-ttl{ padding: 0 0 30px; }

	.topics_list { flex-direction: column; gap: 30px; }
	.topics_list li { width: 100%; height: auto; }
	
	.topics_list .figure img { width: 100%; height: auto; border-radius: 12px; }
	.topics_list_text { padding-top: 12px; }
	.topics_list_ttl { font-size: 16px; margin-bottom: 15px; }
	
	.topics_list_meta { gap: 8px; font-size: 12px; }
	.topics_list_meta .label { padding: 4px 10px;}
	.topics_list_meta .date { }


/* ------------------------------------------------------------ news */
	#news { padding: 50px 0; }
	#news .flex { flex-direction: column; }
	#news .main-ttl { width: 100%; text-align: center; }
	
	.news_list { width: 100%; gap: 12px; }
	.news_list li { border-radius: 10px; }
	.news_list a { padding: 20px; flex-direction: column; gap: 10px; }
	.news_list a p{ font-size: 15px; }
	.news_list .date { font-size: 12px; margin-bottom: 6px; display: block; }

	.news_list .text { width: 100%; }
	.news_list .logo { width: 100%; text-align: center; }


/* ------------------------------------------------------------ footer */
	footer { padding: 40px 0 10px; text-align: center; border-width: 5px; }
	footer .f_logo { width: 150px; margin: 0 auto; padding: 0 0 40px; }
	footer .logos { padding: 0 0 50px; display: flex; flex-direction: column; align-items: center; gap: 30px; width: 150px; margin: 0 auto; }
	footer .f_logo img,
	footer .logos img { width: 100%; margin: 0; }
	footer .copy { font-size: 10px; }
	
	#js-pagetop { right: 5%; bottom: 5%; width: 60px; height: 60px; }
	#js-pagetop img { width: 100%; height: auto; }




}