@charset "UTF-8";

body{	background: unset !important;	}

main
{
	z-index: 5;
	position: relative;
	margin-top: calc(-1 * var(--headerH));
	/* transform: translateY(3px); */

	/* background: url('../image/common/background.webp') repeat; */
}



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

[class^="BG"]
{
	--angle: 5deg;
	--dist: calc(100vw * tan(var(--angle)));
	--borderW: calc(8 * var(--v));
}

/* ===== BG1 ===== */
.BG1
{
	z-index: 5;
	position: relative;
}
.BG1::before
{
	position: absolute;
	top: 0;	left: 0;

	content: "";
	display: block;
	width: 100%;	height: 100%;
	background: url('../image/common/background1.webp') no-repeat center/cover;

	clip-path: polygon(0 0,0 calc(100% - var(--dist)), 100% 100%, 100% 0);
}
.BG1::after
{
	position: absolute;
	bottom: calc(-1 * var(--borderW));	left: 0;

	content: "";
	display: block;
	width: 100%;	height: calc(50 * var(--v));

	background: white;
	border-top: var(--borderW) solid black;
	border-bottom: var(--borderW) solid black;

	transform: skewY(var(--angle));
	transform-origin: bottom right;
}


/* ===== BG2 ===== */
.BG2
{
	z-index: 4;
	position: relative;
	padding: var(--dist) 0;
	margin-top: calc(-1 * var(--dist) - 1px);
}
.BG2::before
{
	position: absolute;
	top: var(--borderW);	left: 0;

	content: "";
	display: block;
	width: 100%;	height: 100%;
	background: url('../image/common/background2.webp') no-repeat center/cover;

	clip-path: polygon(0 0,0 100%, 100% calc(100% - var(--dist)), 100% var(--dist));
}
.BG2::after
{
	position: absolute;
	bottom: calc(-1 * var(--borderW));	left: 0;

	content: "";
	display: block;
	width: 100%;	height: calc(50 * var(--v));

	background: white;
	border-top: var(--borderW) solid black;
	border-bottom: var(--borderW) solid black;

	transform: skewY(calc(-1 * var(--angle)));
	transform-origin: bottom left;
}


/* ===== BG3 ===== */
.BG3
{
	z-index: 5;
	position: relative;
	padding: var(--dist) 0;
	margin-top: calc(-1 * var(--dist) - 1px);
}
.BG3::before
{
	position: absolute;
	top: var(--borderW);	left: 0;

	content: "";
	display: block;
	width: 100%;	height: 100%;
	background: url('../image/common/background3.webp') repeat center;

	clip-path: polygon(0 var(--dist),0 calc(100% - var(--dist)), 100% 100%, 100% 0);
}
.BG3::after
{
	position: absolute;
	bottom: calc(-1 * var(--borderW));	left: 0;

	content: "";
	display: block;
	width: 100%;	height: calc(50 * var(--v));

	background: white;
	border-top: var(--borderW) solid black;
	border-bottom: var(--borderW) solid black;

	transform: skewY(var(--angle));
	transform-origin: bottom right;
}


/* ===== BG4 ===== */
.BG4
{
	z-index: 6;
	position: relative;
	padding: var(--dist) 0;
	margin-top: calc(-1 * var(--dist) - 1px);
}
.BG4::before
{
	position: absolute;
	top: var(--borderW);	left: 0;

	content: "";
	display: block;
	width: 100%;	height: 100%;
	background: url('../image/common/background4.webp') no-repeat center/cover;

	clip-path: polygon(0 0,0 100%, 100% 100%, 100% var(--dist));
}
.BG4::after
{
	position: absolute;
	bottom: calc(-1 * var(--borderW));	left: 0;

	/* content: ""; */
	display: block;
	width: 100%;	height: calc(50 * var(--v));

	background: white;
	border-top: var(--borderW) solid black;
	border-bottom: var(--borderW) solid black;

	transform: skewY(calc(-1 * var(--angle)));
	transform-origin: bottom left;
}

.BG2 + .BG4::before{	clip-path: polygon(0 var(--dist),0 100%, 100% 100%, 100% 0);	}
.BG2 + .BG4::after{	transform: skewY(var(--angle));	}

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

}


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

#mainVisual
{
	z-index: 3;
	position: relative;
	margin: var(--headerH) 0 0;
}
#mainVisual > .inner{	padding: calc(40 * var(--v)) 0 0;	}
#mainVisual .visual{	container-type: inline-size;	}
#mainVisual .visual .base{	aspect-ratio: 1280/879;	}
#mainVisual .visual .front
{
	aspect-ratio: 1280/340;
	margin: -11cqw 0 0;
}

.loaded #mainVisual .visual .base
{
	animation: 0.3s ease-in 0s 1 normal both mainVisualBase;
}
.loaded #mainVisual .visual .front
{
	animation: 0.3s ease-out 0.3s 1 normal both mainVisualFront;
}

@keyframes mainVisualBase
{
		0%{	opacity: 0;	transform: scale(0.95) translateY(-5cqw);	}
	100%{	opacity: 1;	transform: scale(1.00) translateY(0);	}
}
@keyframes mainVisualFront
{
	  0%{	opacity: 0;	transform: scale(0.90) translateY(-5cqw);	}
	 70%{	opacity: 1;	transform: scale(1.05) translateY(1cqw);	}
	100%{	opacity: 1;	transform: scale(1.00) translateY(0);	}
}

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

#mainVisual{	padding: 0;	}
#mainVisual > .inner{	padding: 0;	}
#mainVisual .visual .base{	aspect-ratio: 1149/1415;	}
#mainVisual .visual .front
{
	aspect-ratio: 1149/368;
	margin: -11cqw 0 0;
}

}


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

#pickup > .inner{	padding: calc(10 * var(--v)) 0 calc(50 * var(--v));	}
#pickup .menus
{
	position: relative;
	aspect-ratio: 1280/580;
}

#pickup .menus > .item{	position: absolute;	}
#pickup .menus > .item:nth-child(1)
{
	top: 0;	left: 0;
	width: calc(383 * var(--u));	aspect-ratio: 383/385;
}
#pickup .menus > .item:nth-child(2)
{
	bottom: calc(30 * var(--u));	left: 21%;
	width: calc(350 * var(--u));	aspect-ratio: 350/401;
}
#pickup .menus > .item:nth-child(3)
{
	top: calc(30 * var(--u));	right: 23%;
	width: calc(412 * var(--u));	aspect-ratio: 412/383;
}
#pickup .menus > .item:nth-child(4)
{
	bottom: 0;	right: 0;
	width: calc(451 * var(--u));	aspect-ratio: 451/443;
	clip-path: polygon(25% 25%, -5% 50%, -5% 100%, 100% 100%, 100% -5%, 50% -5%);
}
#pickup .menus > .item a{	display: block;	}
#pickup .menus > .item a[disabled]{	filter: brightness(0.8) grayscale(0.8);	}

/*
#pickup .menus > .item a::before
{
	position: absolute;

	content: "";
	display: block;
	width: 100%;	height: 100%;
}

#pickup .menus > .item:nth-child(1) a::before{	background: url('../image/pickup1/menuAcc.webp') center/contain;	}
#pickup .menus > .item:nth-child(2) a::before{	background: url('../image/pickup2/menuAcc.webp') center/contain;	}
#pickup .menus > .item:nth-child(3) a::before{	background: url('../image/pickup3/menuAcc.webp') center/contain;	}
#pickup .menus > .item:nth-child(4) a::before{	background: url('../image/pickup4/menuAcc.webp') center/contain;	}

#pickup .menus > .item a{	display: block;	opacity: 0;	}
#pickup .menus > .item:nth-child(1).inview a{	animation: 0.5s ease-in-out 0.0s 1 normal both pickupItem;	}
#pickup .menus > .item:nth-child(2).inview a{	animation: 0.5s ease-in-out 0.2s 1 normal both pickupItem;	}
#pickup .menus > .item:nth-child(3).inview a{	animation: 0.5s ease-in-out 0.4s 1 normal both pickupItem;	}
#pickup .menus > .item:nth-child(4).inview a{	animation: 0.5s ease-in-out 0.6s 1 normal both pickupItem;	}

#pickup .menus > .item:nth-child(1).inview a::before{	animation: 0.5s ease-in-out 0.2s 1 normal both pickupItem;	}
#pickup .menus > .item:nth-child(2).inview a::before{	animation: 0.5s ease-in-out 0.4s 1 normal both pickupItem;	}
#pickup .menus > .item:nth-child(3).inview a::before{	animation: 0.5s ease-in-out 0.6s 1 normal both pickupItem;	}
#pickup .menus > .item:nth-child(4).inview a::before{	animation: 0.5s ease-in-out 0.8s 1 normal both pickupItem;	}

@keyframes pickupItem
{
	  0%{	opacity: 0;	transform: scale(0.50);	}
	 70%{	opacity: 1;	transform: scale(1.05);	}
	100%{	opacity: 1;	transform: scale(1.0);	}
}
*/

}
@media screen and (min-width: 768px)
{

#pickup .menus > .item a{	transition: var(--T02);	}
#pickup .menus > .item a:hover
{
	filter: brightness(1.2);
	/* transform: scale(1.05); */
}

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

#pickup{	padding: 0;	}
#pickup .menus
{
	aspect-ratio: 768/1000;
}
#pickup .menus > .item:nth-child(1)
{
	top: 0;	left: 3%;
	width: calc(415 * var(--u));	aspect-ratio: 415/391;
}
#pickup .menus > .item:nth-child(2)
{
	top: calc(60 * var(--u));	bottom: auto;	left: auto;	right: 0%;
	width: calc(394 * var(--u));	aspect-ratio: 394/443;
}
#pickup .menus > .item:nth-child(3)
{
	top: auto;	bottom: calc(190 * var(--u));	left: 3%;	right: auto;
	width: calc(422 * var(--u));	aspect-ratio: 422/451;
}
#pickup .menus > .item:nth-child(4)
{
	bottom: 0;	right: 0;
	width: calc(486 * var(--u));	aspect-ratio: 486/479;
	clip-path: polygon(25% 25%, 0% 50%, 0% 100%, 100% 100%, 100% 0%, 50% 0%);
}
/*
#pickup .menus > .item:nth-child(1) a::before{	background: url('../image/pickup1/menuAcc_sp.webp') center/contain;	}
#pickup .menus > .item:nth-child(2) a::before{	background: url('../image/pickup2/menuAcc_sp.webp') center/contain;	}
#pickup .menus > .item:nth-child(3) a::before{	background: url('../image/pickup3/menuAcc_sp.webp') center/contain;	}
#pickup .menus > .item:nth-child(4) a::before{	background: url('../image/pickup4/menuAcc_sp.webp') center/contain;	}
*/

}


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

#campaignBanner > .inner{	padding: calc(30 * var(--v)) 0 0;	}
#campaignBanner .banner
{
	width: 100%;	aspect-ratio: 1206/156;
	max-width: calc(1200 * var(--v));
	margin: 0 auto;
	opacity: 0;
}
#campaignBanner .banner a{	display: block;	}
/* 
#campaignBanner .banner.inview{	animation: 0.5s ease-in-out 0.0s 1 normal both campaignBanner;	}
@keyframes campaignBanner
{
	  0%{	opacity: 0;	transform: rotate(-5deg) scale(0.50);	}
	 70%{	opacity: 1;	transform: rotate(2deg) scale(1.05);	}
	100%{	opacity: 1;	transform: rotate(0) scale(1.0);	}
}
 */
}
@media screen and (min-width: 768px)
{

#campaignBanner .banner a{	transition: var(--T03);	}
#campaignBanner .banner a:hover
{
	filter: brightness(1.2);
	transform: scale(1.02);
}

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

#campaignBanner > .inner{	padding: calc(80 * var(--v)) 0 0;	}
#campaignBanner .banner{	aspect-ratio: 726/222;	}

}


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

#news > .inner{	padding: calc(60 * var(--v)) 0;	}
#news .title
{
	z-index: 3;
	position: relative;
	display: flex;	justify-content: center;	align-items: center;
}
#news .title::before,
#news .title::after
{
	content: "";
	display: block;
	width: calc(140 * var(--v));	aspect-ratio: 140/80;
}
#news .title::before
{
	background: url("../image/common/titleAcc1L.webp") no-repeat center/contain;
	transform: translate(25%, -20%);
}
#news .title::after
{
	background: url("../image/common/titleAcc1R.webp") no-repeat center/contain;
	transform: translate(-25%, -20%);
}
#news .title h2
{
	z-index: 3;
	position: relative;
	display: flex;	justify-content: center;	align-items: center;
	width: calc(294 * var(--v));	aspect-ratio: 294/60;

	padding: 0 0 0.1em;
	background: var(--Cgray0);
	border-radius: 3em;

	color: white;
	font-size: var(--fzv44);
	font-weight: 700;
}

#news .whiteBox
{
	width: 100%;	aspect-ratio: 1206/156;
	max-width: calc(1200 * var(--v));
	height: calc(240 * var(--v));

	padding: calc(40 * var(--v)) calc(20 * var(--v)) calc(20 * var(--v));
	margin: calc(-45 * var(--v)) auto 0;

	background: white;
	border: var(--borderA);
	border-radius: 0.3rem;
	box-shadow: var(--shadowA);
}

#news .newsFrame
{
	/* height: calc(240 * var(--v)); */
	height: 100%;
	padding: calc(20 * var(--u)) calc(20 * var(--v));

	overflow-y: scroll;
}

#news .newsFrame::-webkit-scrollbar
{
	width: calc(20 * var(--v));
	background: var(--Cgray2);;
}
#news .newsFrame::-webkit-scrollbar-thumb{	background: black;	}

#news .newsFrame ul
{
	display: flex;	flex-direction: column;
	gap: calc(35 * var(--v));
}
#news .newsFrame li
{
	display: flex;	flex-wrap: wrap;	align-items: start;
	gap: calc(10 * var(--v)) calc(20 * var(--v));
}
#news .newsFrame li .date
{
	flex-shrink: 0;
	display: flex;	justify-content: center;	align-items: center;
	width: calc(160 * var(--v));	aspect-ratio: 4;

	background-color: black;
	padding: 0 0.5em 0.1em 0;

	clip-path: polygon(0 0, 0 100%, 100% 100%, 90% 0);
}
#news .newsFrame li .date p
{
	color: white;
	font-size: var(--fzv23);
	text-align: center;
	line-height: 1.5;
}
#news .newsFrame li .content{	width: calc(100% - (190 + 20) * var(--v));	}
#news .newsFrame li .content p
{
	font-size: var(--fzv23);
	line-height: 1.5;
}

#news .newsFrame li .content p a
{
	color: var(--Clink0);
	font-weight: 500;
	text-decoration: underline;
}

/* 
#news .title h2{	opacity: 0;	}
#news .title::before
{
	opacity: 0;
	transform-origin: right 80%;
}
#news .title::after
{
	opacity: 0;
	transform-origin: left 80%;
}
#news .whiteBox{	opacity: 0;	}

#news.inview .title h2{	animation: 0.3s ease-in-out 0.3s 1 normal both newsBox;	}
#news.inview .title::before{	animation: 0.3s ease-in-out 0.5s 1 normal both newsAccL;	}
#news.inview .title::after{	animation: 0.3s ease-in-out 0.5s 1 normal both newsAccR;	}
#news.inview .whiteBox{	animation: 0.5s ease-in-out 0.0s 1 normal both newsBox;	}

@keyframes newsAccL
{
	  0%{	opacity: 0;	transform: scale(0.2) translate(25%, -20%);	}
	 70%{	opacity: 1;	transform: scale(1.2) translate(25%, -20%);	}
	100%{	opacity: 1;	transform: scale(1.0) translate(25%, -20%);	}
}
@keyframes newsAccR
{
	  0%{	opacity: 0;	transform: scale(0.2) translate(-25%, -20%);	}
	 70%{	opacity: 1;	transform: scale(1.2) translate(-25%, -20%);	}
	100%{	opacity: 1;	transform: scale(1.0) translate(-25%, -20%);	}
}

@keyframes newsBox
{
	  0%{	opacity: 0;	transform: scale(0.50);	}
	 70%{	opacity: 1;	transform: scale(1.05);	}
	100%{	opacity: 1;	transform: scale(1.0);	}
}
 */
}
@media screen and (min-width: 768px)
{

#news .newsFrame li .content p a:hover{	text-decoration: none;	}

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

#news .whiteBox{	height: calc(320 * var(--v));	}
#news .newsFrame li .content{	width: 100%;	}
#news .newsFrame li .content p{	font-size: var(--fzu26);	}

}


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

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

#tenbo .titleAcc{	position: relative;	}
#tenbo .titleAcc picture
{
	z-index: 1;
	position: absolute;
}
#tenbo .titleAcc .titleAcc1
{
	left: calc(-1 * var(--pageP));
	width: calc(367 * var(--u));	aspect-ratio: 367/284;
	transform: translate(0,-75%);
	transform-origin: center bottom;
	/* opacity: 0; */
}
#tenbo .titleAcc .titleAcc2
{
	right: calc(-1 * var(--pageP));
	width: calc(504 * var(--u));	aspect-ratio: 504/274;
	transform: translate(0,-90%);
	transform-origin: center bottom;
	/* opacity: 0; */
}
/*
#tenbo .titleAcc.inview .titleAcc1{	animation: 0.5s ease-in-out 0s 1 normal both titleAcc1;	}
#tenbo .titleAcc.inview .titleAcc2{	animation: 0.5s ease-in-out 0.2s 1 normal both titleAcc2;	}
*/

#tenbo .whiteBox
{
	z-index: 3;
	position: relative;
	margin: 0 auto;

	background: var(--Ctheme2);
	border: var(--borderA);
	border-radius: 0.3rem;
	box-shadow: var(--shadowA);
}

#tenbo .whiteBox [id^="anc"]:has(picture),
#tenbo .whiteBox [id^="anc"]:has(p)
{
	/* max-width: calc(1200 * var(--v)); */
	padding: calc(40 * var(--v)) var(--pageP);
	margin: 0 auto;
}

#tenbo .whiteBox picture{	margin: 0 auto;	}
#tenbo .whiteBox picture:not(:last-child){	margin: 0 auto calc(40 * var(--v));	}
#tenbo .whiteBox p
{
	font-size: var(--fzv24);
	line-height: 1.8;
	letter-spacing: 0.05em;
}
#tenbo .whiteBox p:not(:last-child){	margin: 0 auto 1em;	}
#tenbo .whiteBox p .small{	font-size: 0.8em;	}
#tenbo .whiteBox p strong{	font-weight: 500;	}
#tenbo .whiteBox p a
{
	color: var(--Clink0);
	font-weight: 500;
	text-decoration: underline;
}

}
@media screen and (min-width: 768px)
{

#tenbo .newsFrame li .content p a:hover{	text-decoration: none;	}

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

#tenbo .titleAcc .titleAcc1{	width: calc(250 * var(--u));	}
#tenbo .titleAcc .titleAcc2{	width: calc(325 * var(--u));	}

}

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

#dream > .inner{	padding: calc(80 * var(--v)) 0;	}
#dream .titleAcc{	position: relative;	}
#dream .titleAcc picture
{
	z-index: 1;
	position: absolute;
}
#dream .titleAcc .titleAcc3
{
	left: calc(-1 * var(--pageP));
	width: calc(595 * var(--u));	aspect-ratio: 595/315;
	transform: translate(0,-65%);
	transform-origin: center bottom;
	/* opacity: 0; */
}
#dream .titleAcc .titleAcc4
{
	right: calc(-1 * var(--pageP));
	width: calc(349 * var(--u));	aspect-ratio: 349/216;
	transform: translate(0,-75%);
	transform-origin: center bottom;
	/* opacity: 0; */
}
/*
#dream .titleAcc.inview .titleAcc3{	animation: 0.5s ease-in-out 0s 1 normal both titleAcc3;	}
#dream .titleAcc.inview .titleAcc4{	animation: 0.5s ease-in-out 0.2s 1 normal both titleAcc4;	}
*/

#dream .whiteBox
{
	z-index: 3;
	position: relative;

	padding: 0 0 calc(80 * var(--v));
	margin: 0 auto;

	background: var(--Ctheme2);
	border: var(--borderA);
	border-radius: 0.3rem;
	box-shadow: var(--shadowA);
}

#dream #anc1,	#dream #anc2
{
	--thumbW: calc(190 * var(--u));
	--thumbG: calc(15 * var(--u));

	padding: calc(50 * var(--v)) 0;
}

#dream .title
{
	display: flex;	flex-wrap: wrap;	justify-content: center;	align-items: center;
	gap: calc(10 * var(--v));
	padding: 0 var(--pageP);
	margin: 0 0 calc(40 * var(--v));
}
#dream .title p
{
	display: flex;	justify-content: center;	align-items: center;
	width: calc(380 * var(--v));
	padding: 0.1em 0 0.2em;

	background: black;
	border-radius: 2em;

	color: white;
	font-size: var(--fzv30);
}
#dream .title p .sat,
#dream .title p .sun
{	text-shadow: unset !important;	}

#dream h3
{
	padding: 0 0 0.1em;
	font-size: var(--fzv40);
	font-weight: 700;
}
#dream h3 .sat, #dream h3 .sun{	--Fcolor: white;	}

#dream ul
{
	display: flex;	flex-wrap: wrap;	justify-content: center;
	gap: var(--thumbG);
	width: fit-content;
	margin: 0 auto calc(30 * var(--v));
}
#dream li
{
	container-type: inline-size;

	position: relative;
	width: var(--thumbW);	aspect-ratio: 203/352;
}
#dream li .titleArea
{
	z-index: 3;
	position: absolute;
	top: 140cqw;	left: 27cqw;
	width: 60cqw;
	margin: 0 auto;
}
#dream li .titleArea p
{
	margin: 0 0 4cqw;
	font-size: 6cqw;
	font-weight: 600;
	text-align: center;
}
#dream li .titleArea p span{	font-size: 8cqw;	}
#dream li .titleArea h4
{
	font-size: 9cqw;
	font-weight: 600;
	text-align: center;
}
#dream li .frame
{
	z-index: 2;
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
}
#dream li .photo
{
	z-index: 1;
	position: absolute;
	top: 25cqw;	left: 23cqw;
	width: 68cqw;	aspect-ratio: 68/119;
}
#dream li picture img{	object-fit: cover;	}
#dream .note
{
	padding: 0 var(--pageP);
	margin: 0 auto;
	font-size: var(--fzv18);
	line-height: 1.5;
	text-align: center;
}

#dream .button a
{
	position: relative;
	display: flex;	justify-content: center;	align-items: center;
	width: calc(445 * var(--v));	aspect-ratio: 445/64;

	padding: 0 0 0.1em;
	margin: 0 auto;

	background: white;
	border-radius: calc(32 * var(--v));
	border: var(--borderA);
	box-shadow: var(--shadowA);
}
#dream .button p
{
	color: black;
	font-size: var(--fzv38);
	font-weight: 500;
	letter-spacing: 0.05em;
}
#dream .button i
{
	position: absolute;
	right: calc(20 * var(--v));
	color: black;
	font-size: var(--fzv30);
}


}
@media screen and (min-width: 768px)
{

#dream .button a,
#dream .button p,
#dream .button i
{	transition: var(--T02);	}

#dream .button a:hover{	background: var(--Ctheme3);	}
#dream .button a:hover p,
#dream .button a:hover i
{	color: white;	}


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

#dream .titleAcc .titleAcc3{	width: calc(320 * var(--u));	}
#dream .titleAcc .titleAcc4{	width: calc(220 * var(--u));	}

#dream #anc1,	#dream #anc2{	--thumbW: calc(215 * var(--v))	}

#dream li .number{	width: calc(90 * var(--v));	}
#dream li .area{	width: calc(100% - 90 * var(--v));	}

#dream .titleA h2{	letter-spacing: 0;	}

}

/* ======================================== end ======================================== */