@charset "utf-8";
/* CSS Document */

/* base
-----------------------------------------------*/
picture {
display: block;
}
.allwrapper ul,.allwrapper li {
	margin: 0;
	padding: 0;
	display: inline-block;
}
.allwrapper .sp {
	display: block;
}
.allwrapper .pc {
	display: none;
}
@media (min-width:768px){
	.allwrapper .sp {
		display: none;
	}
	.allwrapper .pc {
		display: block;
	}
}

/* ========== base style ========== */
.allwrapper {
width: 100%;
min-height: 100vh;
padding-bottom: 13vw;
letter-spacing: 0.02em;
background: #fff;
animation-delay: 0.75s;
font-family: the-seasons, sans-serif;
font-weight: 700;
color: #000;
}
.allwrapper * {
box-sizing: border-box;
}
.allwrapper a:link,
.allwrapper a:visited,
.allwrapper .acordion_btn {
text-decoration: none;
}
.allwrapper a {
	transition: all  0.7s ease;
}
@media (hover: hover) {
	.allwrapper a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	}
	.mdBtn::after,
	.itemCdtList li:not(.linkNone),
	img.modal__close-btn-img {
		transition: all  0.7s ease;
	}
	.mdBtn:hover::after,
	.itemCdtList li:not(.linkNone):hover,
	img.modal__close-btn-img:hover {
		opacity: 0.7;
	}
}
.allwrapper ol,
.allwrapper ul {
list-style:none;
}
.allwrapper img, 
.allwrapper video,
.allwrapper button {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.allwrapper img,
.allwrapper picture {
	vertical-align: bottom;
}
@media (min-width:768px){
	.allwrapper {
		padding-bottom: 0;
		width: 100vw;
	}
}
/* page style
-----------------------------------------------*/
body{
	margin: 0;
}
.allwrapper {
	text-align: center;
}
.mv {
	position: relative;
	width: 100%;
	min-height: 140vw;
}
.mvImg {
	position: relative;
	z-index: 1;
}
.mvLogo {
	position: absolute;
	width: calc(112/750*100vw);
	left: 3%;
	top: 2%;
	z-index: 2;
}
.mvTit {
	position: absolute;
	width: calc(566/750*100vw);
	left: 0;
	right: 0;
	top: 42%;
	margin: auto;
	z-index: 2;
}
@media (min-width:768px) {
	body.static .wrapper {
		margin-top: 0;
	}
	.mv {
		min-height: 46vw;
	}
	.mvLogo {
		top: 2.4vw;
        left: 2.4%;
        width: 6.8%;
	}
	.mvTit {
		width: calc(680 / 2500* 100vw);
        top: 70%;
	}
}


/* Section COMMON
-----------------------------------------------*/
.secWrap {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}
.secNum {
	margin: 0 auto calc(40/750*100vw);
}
.secLogo {
	margin: 0 auto calc(50/750*100vw);
}
.secTxt {
	text-align: justify;
	font-size: calc(24/750*100vw);
	line-height: calc(55/750*100vw);
	font-weight: 500;
	font-feature-settings: "palt";
	padding: 0 calc(55/750*100vw);
	margin: 0 auto calc(25/750*100vw);
	color: #000;
}
.phChange,
.phChangeThree {
	position: relative;
	width: 100%;
	height: 100%;
}
.phChange img {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.phChangeThree img {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
@keyframes phChange{
	0%{ opacity: 0;}
	25%{ opacity: 1;}
	50%{ opacity: 1;}
	75%{ opacity: 0;}
	100%{ opacity: 0;}
}
@keyframes phChange2{
	0%{ opacity: 0;}
	20%{ opacity: 1;}
	33%{ opacity: 1;}
	63%{ opacity: 0;}
	100%{ opacity: 0;}
}
@keyframes phChangeThree{
	0%{ opacity: 0;}
	10%{ opacity: 1;}
	20%{ opacity: 1;}
	30%{ opacity: 0;}
	100%{ opacity: 0;}
}
.secImgCol,
.secMovCol,
.secImgInner {
	position: relative;
}

.secImgCol.twoItems {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}
.secImgCol.twoItems .secImgInner {
	width: calc(375/750*100vw);
	height: calc(554/750*100vw);
	position: relative;
	overflow: hidden;
}

.secImgBox {
	width: 100%;
	position: relative;
}
.modal {
	z-index: 200;
}
.modal__container{
	z-index: 9000;
	position: fixed;
	top: -150vh;
	left: 0;
	width: 100%;
	height: 101%;
	text-align: center;
	background: #fff;
	padding: 70px 0 32.27vw;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	box-sizing: border-box;
}
.modal__container.is-active{
	visibility: visible;
	top: 0;
}
.modal__close-btn {
	position: fixed;
	top: 6vw;
	right: 3.7vw;
	width: 22px;
	cursor: pointer;
}
img.modal__close-btn-img {
	width: 100%;
	height: auto;
}
.modal__content{
	text-align: left;
	color: #000;
}
.modal_item {
	width: 93.33333333%;
	margin: auto;
}
.modal_box + .modal_box,
.modal_item + .modal_item {
	padding-top: 50px;
}
.mdBtn {
	cursor: pointer;
}
.mdBtn::after {
	content: "";
	position: absolute;
	display: inline-block;
	bottom: calc(12/750*100vw);
    right: calc(12/750*100vw);
	width: calc(69/750*100vw);
	height: calc(45/750*100vw);
	background-image: url('../images/btn-viewall.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: top right;
}
.itemCdtList {
	width: 100%;
	margin: calc(40/750*100vw) auto 0;
}
.itemCdtList li {
	width: 100%;
	padding: calc(7/750*100vw) 0;
}
.itemCdtList li:not(:first-child) {
	border-top: solid 1px #130d11;
}
.itemCdtList li a {
	width: 100%;
	font-size: calc(25/750*100vw);
	letter-spacing: 0.05rem;
	display: flex;
	justify-content: space-between;
	text-align: left;
	align-items: flex-end;
	line-height: 1;
	font-family: the-seasons, sans-serif;
	font-weight: 700;
}
.itemCdtList li a .modal_itemname {
	width: calc(200/750*100vw);
	padding-left: calc(20/750*100vw);
	box-sizing: border-box;
}
.itemCdtList li a .modal_price {
	width: calc(413/750*100vw);
}
.itemCdtList.widthS li a .modal_itemname {
	width: calc(150/750*100vw);
}
.itemCdtList.widthS li a .modal_price {
	width: calc(423/750*100vw);
}
.itemCdtList.widthL li a .modal_itemname {
	width: calc(270/750*100vw);
}
.itemCdtList.widthL li a .modal_price {
	width: calc(343/750*100vw);
}
.itemCdtList.widthXL li a .modal_itemname {
	width: calc(420/750*100vw);
}
.itemCdtList.widthXL li a .modal_price {
	width: calc(193/750*100vw);
}
.itemCdtList li a .modal_buy {
	width: calc(87/750*100vw);
}
.itemCdtList li.linkNone a {
	pointer-events: none;
}
.itemCdtList li.linkNone a .modal_buy {
	opacity: 0.3;
	filter: grayscale(100%);
}

body.is-modal-active .allwrapper {
	overflow-y: hidden;
}
@media (min-width:768px){
	.modal_box + .modal_box,
	.modal_item + .modal_item {
		padding-top: 75px;
	}
	.modal__container{
		padding-bottom: 100px;
	}
	.modal__close-btn {
		top: 30px;
		right: 30px;
	}
	.modal_item {
		width: 350px;
	}
	.mdBtn::after {
		bottom: 10px;
        right: 8px;
        width: 43px;
		height: 27px;
	}
	.itemCdtList {
		margin: 20px auto 0;
	}
	.itemCdtList li {
		padding: 5px 0;
	}
	.itemCdtList li a {
		font-size: 18px;
	}
	.itemCdtList li a span {
		font-size: 14px;
	}
	.itemCdtList li a .modal_itemname {
		width: 120px;
		padding-left: 0;
	}
	.itemCdtList li a .modal_price {
		width: 178px;
	}
	.itemCdtList.widthS li a .modal_itemname {
		width: 90px;
	}
	.itemCdtList.widthS li a .modal_price {
		width: 208px;
	}
	.itemCdtList.widthL li a .modal_itemname {
		width: 170px;
	}
	.itemCdtList.widthL li a .modal_price {
		width: 128px;
	}
	.itemCdtList.widthXL li a .modal_itemname {
		width: 220px;
	}
	.itemCdtList.widthXL li a .modal_price {
		width: 78px;
	}
	.itemCdtList li a .modal_buy {
		width: 52px;
	}
}
@media (min-width:1000px) {
	.modal__content {
		width: 730px;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.modal__close-btn {
		top: 50px;
		right: calc(50% - 450px);
	}
	#modal02 {
		padding-top: 0;
	}
}

/* section 01
-----------------------------------------------*/

.sec01 .secMovCol {
	width: calc(500/750*100vw);
	margin-top: calc(135/750*100vw);
}
.sec01 .secImg01 {
	width: 100%;
	height: calc(504/750*100vw);
	margin-top: calc(70/750*100vw);
}
.sec01 .secImg02-04 {
	width: 100%;
	height: calc(834/750*100vw);
	background-color: #49313a;
	margin: calc(30/750*100vw) auto 0;
}
.sec01 .secImg02 {
	position: absolute;
	width: calc(390/750*100vw);
	top: 14.5%;
    left: 3.8%;
}
.sec01 .secImg03 {
	position: absolute;
	width: calc(302/750*100vw);
	height: calc(403/750*100vw);
	top: 0;
	right: 0;
}
.sec01 .secImg04 {
	position: absolute;
	width: calc(302/750*100vw);
	height: calc(431/750*100vw);
	bottom: 0;
	right: 0;
}

@media (min-width:768px){
	.secMov-Img01 {
		width: 720px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
		margin: 96px auto 0;
	}
	.sec01 .secImg01 {
		width: 451px;
		height: 304px;
		margin-top: 0;
	}
	.sec01 .secMovCol {
		width: 250px;
		margin-top: 0;
		margin: 0;
	}
	.sec01 .secImg02-04 {
		width: 574px;
		height: 502px;
		margin: 25px auto 0;
	}
	.sec01 .secImg02 {
		width: 235px;
		top: 76px;
		left: 70px;
	}
	.sec01 .secImg03 {
		width: 182px;
		height: 243px;
		right: 70px;
	}
	.sec01 .secImg04 {
		width: 182px;
		height: 259px;
		right: 70px;
	}
}
@media (min-width:1000px){
	.secMov-Img01 {
		width: 750px;
	}
}

/* section 02
-----------------------------------------------*/
.sec02 {
	margin: calc(40/750*100vw) auto 0;
	height: calc(1470/750*100vw);
}
.sec02 .secImg01 {
	position: absolute;
	width: calc(646/750*100vw);
	height: calc(863/750*100vw);
	top: 0;
    right: 0;
}
.sec02 .secImg02 {
	position: absolute;
	width: calc(431/750*100vw);
	height: calc(575/750*100vw);
	bottom: 0;
    left: calc(20/750*100vw);
}
@media (min-width:768px){
	.sec02 {
		margin: 25px auto 0;
		width: 635px;
		height: 490px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sec02 .secImg01 {
		width: 350px;
		height: 468px;
		top: 0;
		right: 0;
	}
	.sec02 .secImg02 {
		position: absolute;
		width: 260px;
		height: 346px;
		left: 0;
	}
}

/* section 03
-----------------------------------------------*/
.sec03 {
	margin: calc(30/750*100vw) auto 0;
	height: calc(732/750*100vw);
}
.sec03::before {
	content: "";
	display: block;
	width: 100%;
	height: calc(543/750*100vw);
	position: absolute;
	top: calc(107/750*100vw);
	left: 0;
	background-color: #49313a;
}
.sec03 .secImg01-02 {
	display: flex;
	justify-content: center;
}
.sec03 .secImg01 {
	width: calc(348/750*100vw);
	height: calc(466/750*100vw);
	padding-top: calc(266/750*100vw);
}
.sec03 .secImg02 {
	width: calc(402/750*100vw);
}
@media (min-width:768px){
	.sec03 {
		margin: 30px auto 0;
		height: 440px;
	}
	.sec03::before {
		height: 327px;
		top: 64px;
	}
	.sec03 .secImg01-02 {
		width: 452px;
		margin: 0 auto;
	}
	.sec03 .secImg01 {
		width: 210px;
		height: 281px;
		padding-top: 160px;
	}
	.sec03 .secImg02 {
		width: 242px;
	}
}

/* section 04
-----------------------------------------------*/
.sec04 {
	margin: calc(25/750*100vw) auto 0;
	height: calc(2011/750*100vw);
}
.sec04 .secImg01 {
	width: calc(488/750*100vw);
	margin: 0 auto;
}
.sec04 .secImg02 {
	width: calc(646/750*100vw);
	height: calc(863/750*100vw);
	margin: calc(30/750*100vw) auto 0;
}
.sec04 .secImg03 {
	width: calc(650/750*100vw);
	height: calc(438/750*100vw);
	margin: calc(30/750*100vw) 0 0 auto;
}
@media (min-width:768px){
	.sec04 {
		margin: 25px auto 0;
		width: 740px;
		height: 685px;
	}
	.sec04 .secImg01 {
		width: 294px;
		margin: 0;
		position: absolute;
		top: 0;
		left: 374px;
	}
	.sec04 .secImg02 {
		width: 349px;
		height: 467px;
		margin: 0;
		position: absolute;
		top: 116px;
		left: 0;
	}
	.sec04 .secImg03 {
		width: 391px;
		height: 265px;
		margin: 0;
		position: absolute;
		right: 0;
		bottom: 0;
	}
}
@media (min-width:1000px){
	.sec04 {
		margin: 25px auto 0;
		width: 796px;
		height: 685px;
	}
}

/* section 05
-----------------------------------------------*/
.sec05 {
	margin: calc(30/750*100vw) auto 0;
	height: calc(732/750*100vw);
}
.sec05::before {
	content: "";
	display: block;
	width: 100%;
	height: calc(543/750*100vw);
	position: absolute;
	top: calc(107/750*100vw);
	left: 0;
	background-color: #49313a;
}
.sec05 .secImg01-02 {
	display: flex;
	justify-content: center;
}
.sec05 .secImg01 {
	width: calc(402/750*100vw);
}
.sec05 .secImg02 {
	width: calc(348/750*100vw);
	height: calc(466/750*100vw);
	padding-top: calc(266/750*100vw);
}
@media (min-width:768px){
	.sec05 {
		margin: 30px auto 0;
		height: 440px;
	}
	.sec05::before {
		height: 327px;
		top: 64px;
	}
	.sec05 .secImg01-02 {
		width: 452px;
		margin: 0 auto;
	}
	.sec05 .secImg01 {
		width: 242px;
	}
	.sec05 .secImg02 {
		width: 210px;
		height: 281px;
		padding-top: 160px;
	}
}

/* section 06
-----------------------------------------------*/
.sec06 {
	margin: calc(30/750*100vw) auto 0;
}
.sec06 .secImg01 {
	width: calc(646/750*100vw);
	height: calc(862/750*100vw);
	margin: 0 auto;
}
.sec06 .secImg02 {
	width: calc(488/750*100vw);
	height: calc(650/750*100vw);
	margin: calc(30/750*100vw) auto 0;
}
@media (min-width:768px){
	.sec06 {
		margin: 25px auto 0;
		width: 666px;
		display: flex;
		justify-content: space-between;
	}
	.sec06 .secImg01 {
		width: 350px;
		height: 467px;
		margin: 0;
	}
	.sec06 .secImg02 {
		width: 294px;
		height: 391px;
		margin: 102px 0 0;
	}
}

/* section 07
-----------------------------------------------*/
.sec07 {
	margin: calc(30/750*100vw) auto 0;
	width: calc(716/750*100vw);
	display: flex;
	justify-content: space-between;
}
.sec07 .secImg01 {
	width: calc(328/750*100vw);
	height: calc(490/750*100vw);
	margin-top: calc(166/750*100vw);
}
.sec07 .secImg02 {
	width: calc(370/750*100vw);
	height: calc(554/750*100vw);
}
@media (min-width:768px){
	.sec07 {
		margin: 25px auto 0;
		width: 430px;
	}
	.sec07 .secImg01 {
		width: 198px;
		height: 295px;
		margin-top: 100px;
	}
	.sec07 .secImg02 {
		width: 223px;
		height: 334px;
	}
}

/* footer
-----------------------------------------------*/
.btnVol {
	width: calc(651/750*100vw);
	margin: calc(170/750*100vw) auto 0;
	display: block;
}
.allwrapper ul.staffCredit {
	font-family: the-seasons, sans-serif;
	font-weight: 700;
	font-size: calc(22/750*100vw);
	line-height: calc(41/750*100vw);
	letter-spacing: 0.05em;
	text-align: center;
	display: block;
	margin: calc(180/750*100vw) auto calc(110/750*100vw);
}
.allwrapper ul.staffCredit li {
	display: block;
}
.footer {
	padding-bottom: 8.6vw;
}
.footerlogo {
	display: block;
	margin: 0 auto;
	width: 50PX;
}
.copyright {
	text-align: center;
	letter-spacing: 0.05em;
	margin-top: 3.73vw;
	font-size: 2vw;
	font-family: sans-serif;
	color: #9a9a9a;
}
@media (min-width:768px){
	.btnVol {
		width: 391px;
		margin: 95px auto 0;
	}
	.allwrapper ul.staffCredit {
		font-size: 15px;
		line-height: 30px;
		margin: 100px auto 70px;
	}
	.footer {
		padding-bottom: 100px;
	}
	.footerlogo {
		display: block;
		margin: 0 auto;
		width: 85px;
	}
	.copyright {
		text-align: center;
		letter-spacing: 0.05em;
		margin-top: 20px;
		font-size: 10px;
	}
}


/* ---------------------------------------------------------------
	Animation
--------------------------------------------------------------- */
.fadein-top{
	opacity: 0;
	transition: all 1s ease;
}
.fadein,.order{
	opacity: 0;
	transition: all 1s ease;
}
.fadein-top.anim-up,
.fadein.anim-up,
.order.anim-up{
	transform: translate(0, 20px);
}

.secCatch.order.anim.scrollin {
	transform: translate(0, 0) scale(1);
}
.fadein.scrollin,
.order.scrollin{
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

.scrollin .phChange img {
	animation: phChange 6s infinite;
}
.scrollin .phChangeThree img{
	animation: phChangeThree 18s infinite;
}
.scrollin .phChange img:nth-of-type(2) {
	animation-delay: 3s;
}
.scrollin .phChangeThree img:nth-of-type(2) {
	animation-delay: 3s;
}
.scrollin .phChangeThree img:nth-of-type(3) {
	animation-delay: 6s;
}
.scrollin .phChangeThree img:nth-of-type(4) {
	animation-delay: 9s;
}
.scrollin .phChangeThree img:nth-of-type(5) {
	animation-delay: 12s;
}
.scrollin .phChangeThree img:nth-of-type(6) {
	animation-delay: 15s;
}
.fadein-top.scrollin-top{
	opacity: 1;
	transform: translate(0, 0);
}
.delay01s { transition-delay: 0.1s; }
.delay02s { transition-delay: 0.2s; }
.delay03s { transition-delay: 0.3s; }
.delay04s { transition-delay: 0.4s; }
.delay05s { transition-delay: 0.5s; }
.delay06s { transition-delay: 0.6s; }
.delay07s { transition-delay: 0.7s; }
.delay08s { transition-delay: 0.8s; }
.delay09s { transition-delay: 0.9s; }
.delay10s { transition-delay: 1.0s; }
.delay11s { transition-delay: 1.1s; }
.delay12s { transition-delay: 1.2s; }
.delay13s { transition-delay: 1.3s; }
.delay14s { transition-delay: 1.4s; }
.delay15s { transition-delay: 1.5s; }
.delay16s { transition-delay: 1.6s; }
.delay17s { transition-delay: 1.7s; }
.delay18s { transition-delay: 1.8s; }
.delay19s { transition-delay: 1.9s; }
.delay20s { transition-delay: 2.0s; }
.delay25s { transition-delay: 2.5s; }