@charset "UTF-8";


/* ================================================================================
mainVisual
================================================================================ */
@media print, screen
{

#mainVisual{	padding: 0;	}
#mainVisual > .inner{	max-width: 100%;	}

}

/* ================================================================================
sectionTitle
================================================================================ */
@media print, screen
{

#sectionTitle > .inner{	padding: calc(80 * var(--v)) 0 0;	}

#sectionTitle .t1
{
	font-size: var(--fzv28);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-align: center;
}

#sectionTitle .boxes1
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(25 * var(--v));
}
#sectionTitle .boxes1 > .box:nth-child(1){	width: calc(120 * var(--v));	}
#sectionTitle .boxes1 > .box:nth-child(2){	width: calc(409 * 1.4 * var(--v));	}

#sectionTitle .t3
{
	display: flex;	justify-content: center;	align-items: center;
	width: calc(120 * var(--v));	height: calc(50 * var(--v));
	border: 1px solid var(--Cblue2);
}
#sectionTitle .t3 p
{
	font-family: var(--YuGothic);
	color: var(--Cblue2);
	font-size: var(--fzv18);
	font-weight: 700;
	letter-spacing: 0.1em;
}
#sectionTitle .titleA{	width: calc(409 * 1.4 * var(--v));	aspect-ratio: calc(409/40);	}
#sectionTitle .titleB{	width: calc(377 * 1.4 * var(--v));	aspect-ratio: calc(377/40);	}

#sectionTitle .image1
{
	width: calc(400 * var(--v));	aspect-ratio: calc(720/500);
	margin: 0 auto;
}

#sectionTitle .area1
{
	width: calc(800 * var(--v));
	margin: 0 auto;
}

#sectionTitle .movie1
{
	display: block;
	width: calc(600 * var(--v));	aspect-ratio: calc(600/340);
	margin: 0 auto;
}

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

#sectionTitle .t1{	font-size: var(--fzv40);	}
#sectionTitle .boxes1 > .box:nth-child(1){	width: calc(125 * var(--v));	}
#sectionTitle .boxes1 > .box:nth-child(2){	width: calc(495 * var(--v));	}
#sectionTitle .t3{	width: calc(125 * var(--v));	height: calc(46 * var(--v));	}
#sectionTitle .titleA{	width: calc(487 * var(--v));	}
#sectionTitle .titleB{	width: calc(449 * var(--v));	}

#sectionTitle .image1{	width: calc(530 * var(--u));	}
#sectionTitle .area1{	width: calc(600 * var(--u));	}

}

/* ================================================================================
sectionLead
================================================================================ */
@media print, screen
{

#sectionLead > .inner{	padding: calc(110 * var(--v)) 0 0;	}

#sectionLead .t1
{
	color: var(--Cblue2);
	font-size: var(--fzv38);
	font-weight: 700;
	text-align: center;
	/* letter-spacing: 0.1em; */
}
#sectionLead .t1 sub
{
	/* font-size: 1em; */
	/* bottom: -0.1em; */
}

#sectionLead .boxes1
{
	display: flex;	flex-wrap: wrap;	justify-content: center;
	gap: calc(40 * var(--u));
}
#sectionLead .boxes1 > .box{	width: calc(230 * var(--u));	}
#sectionLead .boxes1 .textArea
{
	display: flex;	flex-direction: column;	justify-content: center;	align-items: center;
	gap: calc(5 * var(--u));
	height: calc(70 * var(--u));
	background: var(--Cblue2);
}
#sectionLead .boxes1 .t2
{
	margin: 0 0 calc(5 * var(--u));
	color: white;
	font-size: var(--fzu20);
	font-family: var(--YuGothic);
	text-align: center;
	line-height: 1.2;
	letter-spacing: 0.1em;
}
#sectionLead .boxes1 .t3
{
	color: white;
	font-size: var(--fzu12);
	font-family: var(--YuGothic);
	text-align: center;
	letter-spacing: 0.1em;
}
#sectionLead .boxes1 > .box:nth-child(2) .t2{	letter-spacing: -0.01em;	}
#sectionLead .boxes1 .buttonA
{
	--icon: "\f078";
	width: 100%;
}

#sectionLead .t4
{
	width: fit-content;
	margin: 0 auto;

	color: var(--Cblue2);
	font-size: var(--fzv30);
	font-weight: 700;
	letter-spacing: 0.1em;
}
#sectionLead .t4::after
{
	content: "";
	display: block;
	height: 2px;
	margin: calc(5 * var(--v)) 0 0;
	background: var(--Cblue2);
}

#sectionLead .boxes2
{
	display: flex;	justify-content: center;
	gap: calc(40 * var(--u));
}
#sectionLead .boxes2 > .box{	width: calc(400 * var(--u));	}
#sectionLead .boxes2 .textArea
{
	position: relative;
	display: flex;	flex-direction: column;	justify-content: center;	align-items: center;
	gap: calc(10 * var(--u));
	height: calc(65 * var(--u));
}
#sectionLead .boxes2 .t5
{
	font-size: var(--fzu14);
	font-family: var(--YuGothic);
	line-height: 1.2;
}
#sectionLead .boxes2 .t6
{
	font-size: var(--fzu30);
	font-family: var(--YuGothic);
	font-weight: 700;
	line-height: 1.2;
}
#sectionLead .boxes2 .iconA
{
	position: absolute;
	bottom: calc(0 * var(--u));	right: calc(40 * var(--u));

	display: block;
	width: calc(50 * var(--u));	aspect-ratio: 1;
}

#sectionLead .boxes2 .thumbArea
{
	width: calc(308 * var(--u));
	margin: 0 auto;
}

#sectionLead .boxes2 .buttonA{	margin: 0 auto;	}
#sectionLead .boxes2 .buttonA p{	text-align: center;	}
#sectionLead .boxes2 .box:nth-child(1) .buttonA{	--icon: "\f078";	}



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

#sectionLead .t1{	font-size: var(--fzv59);	}
#sectionLead .boxes1{	gap: calc(60 * var(--u)) calc(20 * var(--u));	}
#sectionLead .boxes1 > .box{	width: calc(290 * var(--u));	}
#sectionLead .boxes1 .textArea{	height: calc(130 * var(--u));	}
#sectionLead .boxes1 .t2{	font-size: var(--fzv30);	}
#sectionLead .boxes1 .t3{	font-size: var(--fzv18);	}

#sectionLead .boxes2{	gap: calc(20 * var(--u));	}
#sectionLead .boxes2 > .box{	width: 50%;	}
#sectionLead .boxes2 .textArea{	height: calc(120 * var(--u));	}

#sectionLead .t4{	font-size: var(--fzv35);	}
#sectionLead .boxes2 .t5{	font-size: var(--fzv15); text-align: center;	}
#sectionLead .boxes2 .t6{	font-size: var(--fzv30); text-align: center;	}
#sectionLead .boxes2 .iconA{	bottom: calc(25 * var(--u));	right: calc(0 * var(--u));	}
#sectionLead .boxes2 .thumbArea{	width: 100%;	}
#sectionLead .boxes2 .buttonA{	width: 100%;	}

}

/* ================================================================================
sectionFeature
================================================================================ */
@media print, screen
{

[id^="sectionFeature"]{	padding: calc(140 * var(--v)) var(--pageP) 0;	}
#sectionFeature4{	padding: calc(100 * var(--v)) var(--pageP);		}

/* [id^="sectionFeature"] > .inner{	width: calc(800 * var(--u));	} */
[id^="sectionFeature"] .number
{
	width: fit-content;	min-width: calc(48 * var(--v));
	margin: 0 auto;

	color: var(--Cblue2);
	font-size: var(--fzv65);
	font-weight: 700;
	text-align: center;
}
[id^="sectionFeature"] .number::after
{
	content: "";
	display: block;
	height: 2px;
	/* margin: calc(5 * var(--v)) 0 0; */
	background: var(--Cblue2);
}
[id^="sectionFeature"] .tA
{
	color: var(--Cblue2);
	font-size: var(--fzv53);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.05em;
}
[id^="sectionFeature"] .keyVisual
{
	position: relative;
	left: calc(-1 * var(--pageP));
	width: 100vw;
}
#sectionFeature4 .keyVisual{	filter: brightness(0);	opacity: 0.8;	}


[id^="sectionFeature"] .tB
{
	color: var(--Cblue2);
	font-size: var(--fzv50);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	letter-spacing: 0.05em;
}

#sectionFeature2 .image2{	width: calc(336 * var(--u));	margin: 0 auto;	}

/* #sectionFeature3 .button1{	width: calc(380 * var(--v));	} */
#sectionFeature3 .button2{	/* width: calc(230 * var(--v)); */	margin: 0 auto;	}
/* #sectionFeature3 .button3{	width: calc(260 * var(--v));	} */
/* #sectionFeature3 .button4{	width: calc(240 * var(--v));	} */

#sectionFeature3 .movie1
{
	display: block;
	width: calc(600 * var(--v));	aspect-ratio: calc(600/340);
	margin: 0 auto;
}

/* #sectionFeature4 .button2{	width: calc(240 * var(--v));	} */
/* #sectionFeature4 .button3{	width: calc(240 * var(--v));	} */
#sectionFeature4 .image1{	/* width: calc(300 * var(--u)); */	margin: 0 auto;	}


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

[id^="sectionFeature"] > .inner{	width: 100%;	}
[id^="sectionFeature"] .tB{	font-size: var(--fzv50);	}
[id^="sectionFeature"] [class^="boxes"],
[id^="sectionFeature"] [class^="accordion"],
[id^="sectionFeature"] > .inner > .titleA,
[id^="sectionFeature"] > .inner > .textA,
[id^="sectionFeature"] > .inner > .noteA
{
	width: calc(600 * var(--u));
	margin: 0 auto;
}
[id^="sectionFeature"] [class^="accordion"] [class^="boxes"]{	width: 100%;	}

#sectionFeature2 .image2{	width: 100%;	}

#sectionFeature3 .button1{	/* width: calc(400 * var(--v)); */	margin: 0 0 auto calc(30 * var(--u));	}
#sectionFeature3 .button2{	/* width: calc(300 * var(--v)); */	margin: 0 auto;	}
#sectionFeature3 .button3{	/* width: calc(360 * var(--v)); */	margin: 0 0 auto calc(30 * var(--u));	}
#sectionFeature3 .button4{	/* width: calc(360 * var(--v)); */	}

#sectionFeature4 .button1{	/* width: calc(460 * var(--v)); */	}
#sectionFeature4 .button2{	/* width: calc(350 * var(--v)); */	}
#sectionFeature4 .button3{	/* width: calc(350 * var(--v)); */	margin: 0 0 auto calc(30 * var(--u));	}
#sectionFeature4 .image1{	width: 100%;	}



}

/* ================================================================================
sectionSlide
================================================================================ */
@media print, screen
{

#sectionSlide
{
	padding: 0;
	background: var(--Cgray2);
}
#sectionSlide > .inner
{
	max-width: 100%;
	padding: calc(40 * var(--v)) 0 calc(40 * var(--v));
}

#sectionSlide .swiper{	margin: 0 auto calc(30 * var(--v));	}
#sectionSlide .swiper-slide
{
	width: 100%;	height: calc(400 * var(--v));
}

#sectionSlide .swiper-slide picture{	height: 100%;	}
#sectionSlide .swiper-slide picture img{	object-fit: contain;	}

#sectionSlide .prev,
#sectionSlide .next
{
	z-index: 20;
	position: absolute;
	top: calc( (100% - 57 * var(--v)) /2 );

	display: block;
	width: calc(30 * var(--v));	height: auto;	aspect-ratio: calc(30/57);

	cursor: pointer;
}
#sectionSlide .prev{	left: calc(50 * var(--u));	}
#sectionSlide .next{	right: calc(50 * var(--u));	}


#sectionSlide .pagination
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(20 * var(--u));
}
#sectionSlide .pagination span
{
	--size: calc(20 * var(--v));
	display: block;
	width: var(--size);	height: auto;	aspect-ratio: 1;

	background: transparent;
	border: 2px solid var(--Cgray1);
	border-radius: 50%;
	opacity: 1;
}
#sectionSlide .pagination span[class*="active"]{	background: var(--Cgray1);	}


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


}

/* ================================================================================
sectionAfter
================================================================================ */
@media print, screen
{

#sectionAfter{	padding: calc(140 * var(--v)) var(--pageP) calc(80 * var(--v));	}
/* #sectionAfter > .inner{	width: calc(800 * var(--u));	} */

#sectionAfter .image1
{
	width: calc(730 * var(--u));
	margin: 0 auto;
}

#sectionAfter .goBuy
{
	--color: var(--Cblue2);

	width: 100%;
	margin: 0 auto;
}

#sectionAfter .goBuy .titleArea
{
	position: relative;
	display: flex;	justify-content: space-between;	align-items: center;
	padding: calc(10 * var(--v)) calc(20 * var(--v)) calc(10 * var(--v)) calc(30 * var(--v)) ;
	background: var(--color);
}
#sectionAfter .goBuy .titleArea .title
{
	color: white;
	font-size: var(--fzv30);
	font-family: var(--YuGothic);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.05em;
}
#sectionAfter .goBuy .titleArea .title sub
{
	font-size: 1em;
	bottom: -0.15em;
}

#sectionAfter .goBuy .contentArea
{
	display: flex; flex-wrap: wrap;	justify-content: center;
	gap: calc(40 * var(--u));
	padding: calc(40 * var(--v)) calc(30 * var(--u));

	border: 1px solid var(--color);
	border-top: none;
}

/* #sectionAfter .goBuy .contentArea .buttonA{	--fz: var(--fzv16);	} */
#sectionAfter .goBuy .contentArea .button1{	width: calc(275 * var(--u));	}
#sectionAfter .goBuy .contentArea .button2{	width: calc(355 * var(--u));	}

#sectionAfter .banner
{
	width: 100%;	max-width: calc(728 * var(--u));
	margin: 0 auto;
}



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

#sectionAfter .image1{	width: 100%;	}
#sectionAfter .goBuy .contentArea{	flex-direction: column;	}
#sectionAfter .goBuy .titleArea .title{	font-size: var(--fzv35);	}

#sectionAfter .goBuy .contentArea .buttonA{	--fz: var(--fzv35);	}
#sectionAfter .goBuy .contentArea .buttonA p{	text-align: center;	}
#sectionAfter .goBuy .contentArea .button1{	width: 100%;	}
#sectionAfter .goBuy .contentArea .button2{	width: 100%;	}


}


/* 20241219 */
.linkbtn {
	background: #2B2B2B;
	filter: brightness(1.2);
	height: 80px;
	margin: 70px auto;
	transition: .3s;
	width: 300px;
}
.linkbtn:hover {
	opacity: .7;
}
.linkbtn a {
	align-items: center;
	color: white;
	display: flex;
    font-size: 20px;
	font-weight: bold;
	height: 100%;
	justify-content: center;
	position: relative;
	letter-spacing: .1em;
}
.linkbtn a svg {
	color: #FFF;
	position: absolute;
	pointer-events: none;
	bottom: 0.2em;
	right: 0.2em;
	display: block;
	width: 0.9em;
	aspect-ratio: 1;
}


/* 2025/12 */
#sectionLead .boxes2 .iconA {
	right: calc(20 * var(--u));
}
@media screen and (max-width: 767px){
	#sectionLead .boxes2 .iconA {
		right: calc(-20 * var(--u));
	}
}

.boxesA55.adjust-flex > .box {
	width: 32%;
}
@media screen and (max-width: 767px){
	.boxesA55.adjust-flex > .box {
		width: 100%;
	}
}
#sectionAfter .goBuy .contentArea .button1,
#sectionAfter .goBuy .contentArea .button2,
#sectionAfter .goBuy .contentArea .button3,
#sectionAfter .goBuy .contentArea .button4 {
	width: 47%;
	text-align: center;
}
@media screen and (max-width: 767px){
	#sectionAfter .goBuy .contentArea .button1,
	#sectionAfter .goBuy .contentArea .button2,
	#sectionAfter .goBuy .contentArea .button3,
	#sectionAfter .goBuy .contentArea .button4 {
		width: 100%;
	}
}

.subnavi {
	background: rgba(0,0,0,.7);
	height: 50px;
	position: sticky;
	top: var(--headerH);
	left: 0;
	width: 100%;
	z-index: +2;
}
.subnavi > div {
	display: flex;
	justify-content: flex-end;
	height: 100%;
}
.subnavi ul {
	column-gap: 0px;
	display: flex;
	padding: 0;
	width: auto;
}
.subnavi ul:nth-of-type(1) li {
	background: #111111;
}
.subnavi ul:nth-of-type(2) li {
	background: #f0512e;
}
.subnavi ul li {
	height: 100%;
	position: relative;
	transition: .2s;
	width: 50%;
}
.subnavi ul li:nth-of-type(1):after {
	background: #FFF;
	content: "";
	height: 1.5em;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 1px;
}
.subnavi ul:nth-of-type(1) li:hover {
	background: rgba(17,17,17,.6);
}
.subnavi ul:nth-of-type(2) li:hover {
	background: rgba(240,81,46,.6);
}
.subnavi ul:nth-of-type(2) li:before {
    position: absolute;
    content: "";
    display: block;
    width: 10px;
    aspect-ratio: 1;
    background-color: white;
    clip-path: polygon(0% 5%, 0% 95%, 80% 50%);
	top: 0px;
	bottom: 0;
	margin: auto;
	height: 10px;
	left: 10px;
}
.subnavi ul:nth-of-type(2) li a {
	text-indent: .5em;
}
.subnavi ul li a {
	align-items: center;
	box-sizing: border-box;
	font-weight: bold;
	color: #FFF;
	display: flex;
	height: 100%;
	padding: 0 1.5em;
}
@media screen and (max-width: 767px){
	.subnavi ul {
		width: 50%;
	}
	.subnavi ul li a {
		font-size: 1.5rem;
		line-height: 1.4;
		padding: 0;
		justify-content: center;
		text-align: center;
	}
}
.waku {
	border: 1px solid #2D3E56;
	box-sizing: border-box;
	font-size: 21px;
	font-weight: bold;
	line-height: 1;
	margin: 0 auto 2em;
	max-width: 500px;
	padding: .5em;
	width: 90%;
	text-align: center;
}
.waku span {
	color: #F00;
	display: block;
	margin-bottom: .5em;
}
@media screen and (max-width: 767px){
	.subnavi {
		height: calc(50 / 375 * 100vw);
	}
	.waku {
		font-size: 15px;
	}
}
/* ======================================== END ======================================== */