/* CSS Document */

main.top .mainpic{position: relative; width: 100%; height:540px;
	background-image: url("../img/top/mainpic-bg-pc.png");
	background-position: left center;
	background-size: cover;
}
main.top .mainpic::before{
	content: ''; display: block;
	position: absolute; inset:0; margin: auto; width:100%; max-width:1100px;
	background-image: url("../img/top/mainpic-text-pc.svg");
	background-position: left center;
	background-size: cover;
}
/*
main.top .mainpic img{width:100%; height:540px;}
main.top .mainpic picture[n*="mainpic-text"]{position: absolute; inset:0; margin: auto; width:100%; max-width:1100px;}
main.top .mainpic picture[n*="mainpic-text"] img{object-fit: cover;}
main.top .mainpic .text{position: absolute; inset:0; display: flex;}
main.top .mainpic .inner{margin: 0 auto;
width:var(--size-inner-1100-fit); text-align: left;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
main.top .mainpic .inner *{white-space: pre-wrap;}
main.top .mainpic .inner h2{font-size: 30px; line-height: 51px; margin-bottom: 0.75em;}
main.top .mainpic .inner h2 + *{font-size: 14px; line-height: 30px;}
@media screen and (min-width: 1000px) {
	main.top .mainpic img{object-position: min(0px,max(-55px,calc(100vw - 430px))) center;}	
	main.top .mainpic .inner{padding-left: min(80px,max(25px,calc(100vw - 350px)));}
}
*/
@media screen and (min-width: 1000px) {
	main.top .mainpic::before{
		left:max(0px,calc(10 * (1% - 11px)));
		margin-left: 0;
	}
}
@media screen and (max-width: 999px) {
	main.top .mainpic{height:700px;
		background-image: url("../img/top/mainpic-bg-sp.png");
		background-position: center center;
	}
	main.top .mainpic::before{
		max-width:min(575px,max(375px,75%));
		background-image: url("../img/top/mainpic-text-sp.svg");
		background-position: center 30%;
	}
	/*
	main.top .mainpic img{height:700px;}
	main.top .mainpic picture[n*="mainpic-text"]{max-width:375px;}
	main.top .mainpic .inner{width:auto; justify-content: stretch;}
	main.top .mainpic .inner h2{font-size: 22px; line-height: 37px; margin-top: 100px;}
	main.top .mainpic .inner h2 + *{line-height: 26px; max-width: 235px; text-align: justify;}
	*/
}

:root{
--top-deco-mgn:min(0px,calc((100vw - 1100px) / 2));
}
main.top .decobox,
main.top .slidebox{position: relative; z-index: 2;}
main.top .decobox{width:var(--size-inner-1100-fit);}
main.top .slidebox{width:100%;}
main.top .decobox .inner{margin: 0 auto; width:var(--size-inner-960);}
main.top .decobox > img[src*="deco"]{position: absolute; top:0; left:0; right:0; margin: auto; z-index: -1;}
main.top .decobox > img[src*="1-1"]{top:32px;  margin-left: calc(var(--top-deco-mgn) + 46px);}
main.top .decobox > img[src*="1-2"]{top:56px;  margin-right: calc(var(--top-deco-mgn) + 118px);}
main.top .decobox > img[src*="2-1"]{top:32px;  margin-left: var(--top-deco-mgn);}
main.top .decobox > img[src*="2-2"]{top:64px;  margin-right: calc(var(--top-deco-mgn) + 92px);}
main.top .decobox > img[src*="3-1"]{top:0;     margin-left: calc(var(--top-deco-mgn) + 64px);}
main.top .decobox > img[src*="4-1"]{top:48px;  margin-left: calc(var(--top-deco-mgn) + 42px);}
main.top .decobox > img[src*="4-2"]{top:124px; margin-right: calc(var(--top-deco-mgn) + 68px);}
main.top .decobox > img[src*="5-1"]{top:0;     margin-left: calc(var(--top-deco-mgn) - 14px);}
main.top .decobox > img[src*="5-2"]{top:88px;  margin-right: calc(var(--top-deco-mgn) + 104px);}
main.top .sec01{padding-top: 140px;}
main.top .sec02{padding-top: 250px;}
main.top .sec03{padding-top: 150px;}
main.top .sec04{padding-top: 140px;}
main.top .sec05{padding-top: 140px;}
@media screen and (max-width: 999px) {
	main.top .decobox > img[src*="1-1"],
	main.top .decobox > img[src*="2-1"],
	main.top .decobox > img[src*="3-1"],
	main.top .decobox > img[src*="4-1"]{margin-left: var(--size-inner-mgn);}
	main.top .decobox > img[src*="1-2"],
	main.top .decobox > img[src*="2-2"],
	main.top .decobox > img[src*="4-2"],
	main.top .decobox > img[src*="5-2"]{margin-right: var(--size-inner-mgn);}
	main.top .decobox > img[src*="1-1"]{top:27px; width:156px;}
	main.top .decobox > img[src*="1-2"]{top:118px; width:131px}
	main.top .decobox > img[src*="2-1"]{top:22px; width:150px;}
	main.top .decobox > img[src*="2-2"]{top:108px; width:119px;}
	main.top .decobox > img[src*="3-1"]{top:40px; width:174px; z-index: 3;}
	main.top .decobox > img[src*="4-1"]{top:30px; width:59px;}
	main.top .decobox > img[src*="4-2"]{top:30px; width:69px;}
	main.top .decobox > img[src*="5-1"]{top:36px; width:126px; margin-left: -47px;}
	main.top .sec01{padding-top: 135px;}
	main.top .sec02{padding-top: 125px;}
	main.top .sec03{padding-top: 125px;}
	main.top .sec04{padding-top: 80px;}
	main.top .sec05{padding-top: 70px;}
}

:root{
--top-sec01-dl-H:300px;
--top-sec01-dl-mgn:30px;
--top-sec01-skew-slide:calc((var(--top-sec01-dl-H) + var(--top-sec01-dl-mgn)) * -1);
}
main.top .sec01 dl{
	width:100%; min-height:300px;
	position: relative; border-radius: var(--size-radius); overflow: hidden;
	background-color: var(--color-B-L1);
	padding: var(--top-sec01-dl-mgn);
	gap:var(--top-sec01-dl-mgn); display: flex; justify-content: space-between;
}
main.top .sec01 dl::before{
	content: '';display: block;
	position: absolute; width:660px; height:100%;
	top:0; left:0; right:0; margin: 0 auto; z-index: 1;
	background-color: var(--color-B-L2);
	transform: skewX(-45deg);
}
main.top .sec01 dl.G{background-color: var(--color-G-L1);}
main.top .sec01 dl.G::before{background-color: var(--color-G-L2);}
main.top .sec01 dl.R{background-color: var(--color-R-L1);}
main.top .sec01 dl.R::before{background-color: var(--color-R-L2);}
main.top .sec01 dl.Y{background-color: var(--color-Y-L1);}
main.top .sec01 dl.Y::before{background-color: var(--color-Y-L2);}
main.top .sec01 dl + dl{margin-top:30px;}
main.top .sec01 dl dd{position: relative; z-index: 2;}
main.top .sec01 dl dd[p]{width:min(340px,100%); min-width:340px; border-radius: 0.5em; overflow: hidden;}
main.top .sec01 dl dd[p] img{width:100%; aspect-ratio: 340 / 240;}
main.top .sec01 dl dd[t]{
	flex-grow: 1; text-align: center;
	display: flex; flex-direction: column; align-items: center;
}
main.top .sec01 dl dd[t] .en{font-size: 14px; font-weight: 500; font-family: var(--font-outfit);
color: var(--color-B); margin-bottom: 0.5em;}
main.top .sec01 dl.G dd[t] .en{color: var(--color-G);}
main.top .sec01 dl.R dd[t] .en{color: var(--color-R);}
main.top .sec01 dl.Y dd[t] .en{color: var(--color-Y);}
main.top .sec01 dl dd[t] h4{font-size: 30px;
gap: 0 0.5em; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
main.top .sec01 dl dd[t] .text{font-weight: 700; margin:1.5em 0 auto; white-space: pre-wrap; line-height: 2em;}
main.top .sec01 dl dd[t] .more{width: 100%; margin-top: 1.5em; gap:1em; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
@media screen and (min-width: 1000px) {
	main.top .sec01 dl:nth-of-type(2n){flex-direction: row-reverse;}
	main.top .sec01 dl:nth-of-type(2n+1)::before{right:var(--top-sec01-skew-slide);}
	main.top .sec01 dl:nth-of-type(2n+2)::before{left:var(--top-sec01-skew-slide);}
}
@media screen and (max-width: 999px) {
	main.top .sec01 dl{align-items: center; border-radius: 30px; gap:25px; flex-direction: column;}
	main.top .sec01 dl::before{width: calc(100% + 180px); left: -100%; right: -100%;}
	main.top .sec01 dl dd[p]{min-width: 0;}
	main.top .sec01 dl dd[p] img{aspect-ratio: 275 / 194;}
	main.top .sec01 dl dd[t] .en{font-size: 12px;}
	main.top .sec01 dl dd[t] h4{font-size: 24px;}
	main.top .sec01 dl dd[t] .text{font-size: 14px;}
	main.top .sec01 dl dd[t] .more{font-size: 12px; width: min(275px,100%); gap: 15px;}
}

main.top .slick-slide > *{display: flex; justify-content: center;}
main.top .slide:not(.slick-dotted) .slick-track{gap:0 15px; display: flex; justify-content: space-between;}
main.top .slide:not(.slick-dotted) .slick-track::before,
main.top .slide:not(.slick-dotted) .slick-track::after{display: none;}
main.top .sec02 .slide:not(.slick-dotted) .slick-slide,
main.top .sec02 .set,
main.top .sec02 .set dl{
width:min(300px,100%)!important; min-height:260px;
display:flex!important; flex-direction: column;}
main.top .sec02 dl dd[p]{position: relative; border-radius: 0.5em; overflow: hidden;}
main.top .sec02 dl dd[p] span{position: absolute; top:0; right:0; z-index:3;
font-size: calc(14 * var(--responsive-80per)); font-weight: 700;
/* width: min(65px,calc(1vw * 64 / 3.75)); */
width: min(6em,calc(1vw * 64 / 3.75));
height:min(32px,calc(1vw * 26 / 3.75));
border-bottom-left-radius: 8px;
display: flex; justify-content: center; align-items: center;
}
main.top .sec02 dl dd[p] img{width:100%; aspect-ratio: 300 / 260;}
main.top .sec02 dl dd[p] img[src*="GN-01/photo-int-qa-01"]{object-position: left center;}/* 特例 */
main.top .sec02 dl dd[t]{
min-height: calc(1em * 60 / 18); font-size: calc(18 * var(--responsive-80per));
gap:0.5em; display: flex; justify-content: center; align-items: center;
}
main.top .sec02 dl dd[t] span{
	font-size: calc(14 * var(--responsive-80per)); font-weight: 700;
	min-height: 2em; padding: 0 1em; border-radius: 2em;
	display: flex; justify-content: center; align-items: center;
}
main.top .sec02 .more{margin-top: calc(40 * var(--responsive-80per)); display: flex; justify-content: center;}
main.top .sec02 .more.caution{
	max-width: min(950px, var(--size-inner-maxW));
	margin-left: auto;
	margin-right: auto;
}
main.top .sec02 .more.caution > *{margin-left: auto; font-size: 12px;}
@media screen and (max-width: 1100px) {
	main.top .sec02 .slide.slick-dotted .slick-list{width: min(660px, var(--slide-list-maxW));}
}
@media screen and (max-width: 999px) {
	main.top .sec02 .more.caution > *{margin-left: 0;}
}

main.top .sec03 dl{
	min-height: 240px;
	display: flex; justify-content: space-between;
}
main.top .sec03 dl dd[t]{
	width:min(390px,100%); background-color: var(--color-B-L1); border-radius: var(--size-radius) 0 0 var(--size-radius);
	position: relative; z-index: 2; text-align: center;
	display: flex; flex-direction: column; justify-content: center; align-items: center;}
main.top .sec03 dl dd[t]::after{
	content: ''; display: block;
	position: absolute; top:0; right: -90px; width: 100%; height:100%; z-index: -1;
	background-image: url("../img/top/sec03-bg.svg");
	background-position: right center;
	background-size: auto 100%;
}
main.top .sec03 dl dd[p]{
	width: min(480px,100%); padding-bottom: 1em; background-color: var(--color-B-L2); border-radius: 0 var(--size-radius) var(--size-radius) 0;
	box-shadow: -100px 0 0 0 var(--color-B-L2);
	display: flex; justify-content: center; align-items: flex-end;
}
main.top .sec03 dl dd[p] > *{width:min(338px,100%); margin-top:-100%; position: relative; z-index: 3;}
@media screen and (max-width: 999px) {
	main.top .sec03 dl{min-height: 251px;}
	main.top .sec03 dl dd[t]{align-items: flex-start; padding-left: 30px; max-width: calc(100% - 205px);}
	main.top .sec03 dl dd[t] .cmn_subt1.C{text-align: left;}
	main.top .sec03 dl dd[p]{padding-right: 15px; padding-bottom: 35px; justify-content: flex-end;}
	main.top .sec03 dl dd[p] > *{width:min(174px,100%);}
}

main.top .sec04 .movie{display: block; border: none;
width:min(650px,100%); min-height:min(365px,calc(1vw * 188 / 3.75)); margin:0 auto;}

:root{
--sec05-slide-W:220px;
--sec05-slide-new:14px;
--sec05-slide-pad:min(10%,calc(1vw * 18 / 3.75));
--sec05-slide-limit:calc(var(--sec05-slide-W) + var(--sec05-slide-new) * 2);
--sec05-slide-rmenu-mgn:calc(var(--rmenu-W) * 2);
}
main.top .sec05 + .slidebox .slide .slick-list{
	padding-top: var(--sec05-slide-new)!important; margin-top: calc(var(--sec05-slide-new) * -1);
	min-width: var(--sec05-slide-limit);
}
main.top .sec05 + .slidebox .slide.S.slick-dotted .slick-list{width: min(calc(var(--sec05-slide-limit) * 3), var(--slide-list-maxW));}
main.top .sec05 + .slidebox .slide.L.slick-dotted .slick-list{width: min(calc(var(--sec05-slide-limit) * 4), calc(var(--slide-list-maxW) - var(--sec05-slide-rmenu-mgn)));}
main.top .sec05 + .slidebox .slide:not(.slick-dotted) .slick-list{overflow: visible;}
main.top .sec05 + .slidebox .slide:not(.slick-dotted)[cnt="2"] .slick-list{max-width: calc(var(--sec05-slide-limit) * 2);}
main.top .sec05 + .slidebox .slide:not(.slick-dotted)[cnt="3"] .slick-list{max-width: calc(var(--sec05-slide-limit) * 3);}
main.top .sec05 + .slidebox .slide:not(.slick-dotted) .slick-track{gap:0 calc(var(--sec05-slide-new) * 2); justify-content: center;}
main.top .sec05 + .slidebox .slide:not(.slick-dotted) .slick-slide,
main.top .sec05 + .slidebox .set,
main.top .sec05 + .slidebox .set dl{
width:100%; min-height:min(var(--sec05-slide-W),max(150px,calc(1vw * 150 / 3.75)));
display:flex!important; flex-direction: column;}
main.top .sec05 + .slidebox .set{width:min(var(--sec05-slide-W),100%)!important;}
main.top .sec05 + .slidebox .slide.slick-dotted .set{width:min(max(var(--sec05-slide-W),calc(100% - var(--sec05-slide-new) * 2)),100%)!important;}
main.top .sec05 + .slidebox dl dd time{font-size: calc(18 * var(--responsive-80per));}
main.top .sec05 + .slidebox dl dd[bg]{
border-radius: 1em 1em 0 0;
min-height:calc(55 * var(--responsive-80per)); padding: 0 var(--sec05-slide-pad) 0.5em; position: relative;
display: flex; justify-content: flex-start; align-items: flex-end;}
main.top .sec05 + .slidebox dl dd[bg] *[icon]{
position: absolute; top: -1em; right: -1em;
font-size: var(--sec05-slide-new); font-weight: 600; font-family: var(--font-outfit);
width:50px; height:50px; border-radius: 100%; background-color: var(--color-R);
display: flex; justify-content: center; align-items: center;}
main.top .sec05 + .slidebox dl dd[bg] *[icon]::before{content:attr(icon);}
main.top .sec05 + .slidebox dl dd[bg="R"] *[icon]{box-shadow: 0 0 0 1pt #FFF;}
main.top .sec05 + .slidebox dl dd[bg] + dd{
border-radius: 0 0 1em 1em;
flex-grow: 1; text-align: justify; padding: 1em var(--sec05-slide-pad);
font-size: min(16px,calc(1vw * 14 / 3.75));
gap:1em; display: flex; flex-direction: column; justify-content: space-between;}
main.top .sec05 + .slidebox dl dd[bg="B"] + dd{background-color: var(--color-B-L2);}
main.top .sec05 + .slidebox dl dd[bg="G"] + dd{background-color: var(--color-G-L2);}
main.top .sec05 + .slidebox dl dd[bg="R"] + dd{background-color: var(--color-R-L2);}
main.top .sec05 + .slidebox dl dd[bg="Y"] + dd{background-color: var(--color-Y-L2);}
main.top .sec05 + .slidebox dl dd[bg] + dd .more{display: flex; justify-content: flex-end;}
@media screen and (max-width: 999px) {
	:root{
	--sec05-slide-W:240px;
	--sec05-slide-rmenu-mgn:0px;
	}
	main.top .sec05 + .slidebox .slide.slick-dotted .slick-list{width: min(540px, var(--slide-list-maxW));}
	main.top .sec05 + .slidebox .cmn_morebtn{font-size: calc(16 * var(--responsive-80per));}
}