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


@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
/*
font-family: 'Zen Kaku Gothic New', sans-serif;
Regular 400
Medium 500
Bold 700
*/
@font-face {
	font-family:'DINPro-Regular';
	 src: url('../../fonts/DINPro-Regular.woff2') format('woff2'), url('../../fonts/DINPro-Regular.woff') format('woff');
}
@font-face {
	font-family:'DINPro-Medium';
	 src: url('../../fonts/DINPro-Medium.woff2') format('woff2'), url('../../fonts/DINPro-Medium.woff') format('woff');
}
@font-face {
	font-family:'DINPro-Bold';
	 src: url('../../fonts/DINPro-Bold.woff2') format('woff2'), url('../../fonts/DINPro-Bold.woff') format('woff');
}





/* ---------- RESET ---------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {
  margin:0;
  padding:0;
  border:0;
  font-size: 100%;
  font:inherit;
  vertical-align: baseline;
  text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
}
body {
  line-height: 1;
}
ol, ul, li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
input:focus, textarea:focus{
  -webkit-apparence:none;
  outline: none;
  border:none;
}
img{
	border:none;
	outline:none;
	vertical-align:top;
	font-size:0;
	line-height:0;
}
img a{
	border:none;
	outline: none;
}
a:focus{
	outline:none;
}
hr {
  height:0;
  margin:0;
  padding:0;
  border:0;
}
h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration:none;
}

input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
img{
	width:100%;
	height:auto;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transform:translate3d(0,0,0);
}
*{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-box-shadow:none;
    box-shadow:none;   
    outline:none;
	box-sizing:border-box;
	margin:0;
	padding:0;
}
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;   
    outline: none;
}

html,body{
	height: 100%;
	min-height:100%;
	z-index:1;
	position:relative;
}

body{
	color:#000;
	font-family: 'Zen Kaku Gothic New', 'Yu Gothic', 'メイリオ', 'Meiryo', Arial, Meiryo, "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
	font-size: 14px;
	font-weight: 500;
    line-height: 1;
	background: #E2D8C5;
}

/* ---------------------------------------------------------- */


/* standard */
.fade,
.fade.delighter{
	opacity:0;
    position: relative;
    top: 40px;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	will-change: transform,animation,position;
	-webkit-transition:top 1.0s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	             transition:top 1.0s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
}
/* start */
.fade.delighter.started{
	opacity:1;
    top: 0;
}

/* ---------------------------------------------------------------------------- */

#loader-bg{
    display:block;
    position:fixed;
    width:100vw;
    height:100vh;
    top:0px;
    left:0px;
    z-index:1000;
	background: #AFFE00;
	
}
/* ---------------------------------------------------------------------------- */


.header{
	width: 100%;
	height: 100%;
	position: relative;
	background: url("../images/mainimage_pc.webp") center center no-repeat;
	background-size: cover;
}

.header .logo{
	position: absolute;
	top:46%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 17%;
	z-index: 50;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

.header .copy{
	position: absolute;
	bottom:5%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 90%;
	z-index: 50;
	text-align: center;
	color: #AFFE00;
	font-family:'DINPro-Bold';
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}
.header .copy p:last-child{margin-top: 1.2em;}

.header .copy br.res{display: none;}


/* ---------------------------------------------------------------------------- */


.navigation{
	width: 100%;
	position: fixed;
	top: -65px;
	left: 0;
	z-index: 999;
	-webkit-transition: top 0.6s cubic-bezier(0.33, 1, 0.68, 1);
	transition: top 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.navigation.view{top: 0;}
.navigation .navTrigger{display: none;}


.navigation .topBar{
	width: 100%;
	height: 65px;
	background: #AFFE00;
}
.navigation .navBody{
	position: absolute;
	top: 0;
	left: 25px;
	right: 25px;
	height: 65px;
}
.navigation .navBody .navLogo{
	position: absolute;
	top: 50%;
	left: 0;
	width: 150px;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.navigation .navBody nav{
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.navigation .navBody nav ul{
	display: flex;
	grid-gap: 25px;
}
.navigation .navBody nav a{
	display: inline-block;
	font-family:'DINPro-Bold';
	color: #000;
	font-size: 14px;
	letter-spacing: 0.2em;
	padding: 0.5em 0;
}

@media(min-width:769px) {
.navigation .navBody .navLogo{cursor: pointer;}
.navigation .navBody nav a{-webkit-transition: color 0.3s;transition: color 0.3s;}
.navigation .navBody nav a:hover{color: #FFF;}
}





#look.anchertarget{top: -64px;position: relative;}
.items .anchertarget{top:calc(-64px - 5vw);position: relative;}
.field .anchertarget{top:calc(-64px - 5vw);position: relative;}



/* ---------------------------------------------------------------------------- */

article#wrapper{width: 100%;overflow:hidden;}


/* ---------------- */

.contentsLead{
	width: 90%;
	margin: 0 auto;
	padding: 10% 0;
}
.contentsLead p{
	text-align: center;
	font-size: 17px;
	line-height: 2.0;
	letter-spacing: 0.08em;
}
.contentsLead p:not(:first-child){margin-top: 1.5em;}

.contentsLead p br.res01{display: none;}
.contentsLead p br.res02{display: none;}




/* ---------------------------------------------------------------------------- */


.itemBlock{
	width: 100%;
	position: relative;
}
.itemBlock .inTop{width: 100%;display: flex;}
.itemBlock .inBottom{width: 100%;display: flex;}
.itemBlock .inAll{width: 100%;display: flex;}

.itemBlock .leftBox{width: 50%;position: relative;}
.itemBlock .rightBox{width: 50%;position: relative;}

.itemBlock .photo{width: 100%;position: relative;overflow: hidden;background:#E2D8C5;}
.itemBlock .photo span{
	display: block;
	width: 100%;
	background-position: center center;
	background-size: cover;
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
	opacity: 0;
	-webkit-transition:all 1.6s cubic-bezier(0.33, 1, 0.68, 1);
	transition:all 1.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.itemBlock .photo.view span{
	opacity: 1;
	-webkit-transform:scale(1);
	transform:scale(1);
}



.itemBlock .photo.abs{position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
.itemBlock .photo.abs span{position: absolute;top: 0;bottom: 0;left: 0;right: 0;}
.itemBlock .photo span.abs{position: absolute;top: 0;bottom: 0;left: 0;right: 0;}


.set01 .p0101 span{padding-top: 76%;background-image: url("../images/p0101.webp");}
.set01 .p0102 span{background-image: url("../images/p0102.webp");}
.set01 .p0103{width: 44%;}
.set01 .p0104{width: 56%;}
.set01 .p0103 span{padding-top: 128%;background-image: url("../images/p0103.webp");}
.set01 .p0104 span{background-image: url("../images/p0104.webp");}

.set02 .p0201{width: 60%;}
.set02 .p0202{width: 40%;}
.set02 .p0201 span{padding-top: 83.3%;background-image: url("../images/p0201.webp");}
.set02 .p0202 span{background-image: url("../images/p0202.webp");}

.set03 .rightBox{padding-top: 15%;}
.set03 .p0301 span{padding-top: 125%;background-image: url("../images/p0301.webp");}
.set03 .p0302 span{padding-top: 125%;background-image: url("../images/p0302.webp");}

.set04{margin-top: 11%;}
.set04 .leftBox{width: 60%;}
.set04 .rightBox{width: 40%;display: flex;align-items: flex-end;}
.set04 .p0401 span{padding-top: 64%;background-image: url("../images/p0401.webp");}
.set04 .p0402 span{padding-top: 125%;background-image: url("../images/p0402.webp");}


.set05 .p0501 span{padding-top: 73.8%;background-image: url("../images/p0501.webp");}
.set05 .p0502 span{padding-top: 72.3%;background-image: url("../images/p0502.webp");}
.set05 .p0503 span{padding-top: 72.3%;background-image: url("../images/p0503.webp");}
.set05 .p0504 span{padding-top: 125%;background-image: url("../images/p0504.webp");}

.set06 .leftBox{width: 60%;}
.set06 .rightBox{width: 40%;display: flex;align-items: flex-end;}
.set06 .p0601 span{padding-top: 64%;background-image: url("../images/p0601.webp");}
.set06 .p0602 span{padding-top: 125%;background-image: url("../images/p0602.webp");}

.set07 .inAll{flex-direction:row-reverse;}
.set07 .leftBox{display: flex;align-items: flex-end;}
.set07 .leftBox .inner{width: 100%;display: block;}
.set07 .p0701 span{padding-top: 132%;background-image: url("../images/p0701.webp");}
.set07 .p0702 span{padding-top: 92%;background-image: url("../images/p0702.webp");}
.set07 .p0703 span{padding-top: 94%;background-image: url("../images/p0703.webp");}

.set08{background: #AFFE00;}
.set08 .p0801 span{padding-top: 125%;background-image: url("../images/p0801.webp");}
.set08 .p0802 span{padding-top: 125%;background-image: url("../images/p0802.webp");}

.set09 .rightBox{display: flex;align-items:center;}
.set09 .p0901 span{padding-top: 123%;background-image: url("../images/p0901.webp");}

.set10{padding-bottom: 10%;}
.set10 .leftBox{display: flex;align-items:center;}
.set10 .p1001 span{padding-top: 123%;background-image: url("../images/p1001.webp");}

.set11{padding-bottom: 20%;}
.set11 .inAll{flex-direction:row-reverse;}
.set11 .rightBox{margin-top:-10%;}
.set11 .p1101 span{padding-top: 67%;background-image: url("../images/p1101.webp");}



/*-------------------------*/

.itemSpec{
	background: #AFFE00;
	/*background: #BBFC00;*/
	padding: 3.5vw 2.7vw;
}
.itemSpec h3{
	font-family:'DINPro-Bold';
	font-size: 2.5vw;
	line-height: 1.1;
}
.itemSpec h3 span{
	font-family:'DINPro-Regular';
	font-size: 0.657em;
	display: block;
}
.itemSpec h3 br{display: none;}
.itemSpec .buy{
	margin-top: 3%;
}
.itemSpec .buy a{
	font-family:'DINPro-Medium';
	color: #000;
	font-size: 1.3vw;
	display: inline-block;
	position: relative;
	padding: 0.3em 1em 0.3em;
}
.itemSpec .buy a span{
	position: relative;
	z-index: 2;
}
.itemSpec .buy a::before{
	content: '';
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: 1px solid #000;
}

@media(min-width:769px) {
.itemSpec .buy a::after{
	content: '';
	position: absolute;
	z-index: 1;
	top: -2px;
	bottom: -2px;
	left: -2px;
	right: -2px;
	background: #FFF;
	opacity: 1;
	-webkit-transform:scale(0);
	transform:scale(0);
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}
.itemSpec .buy a:hover::after{
	opacity: 1;
	-webkit-transform:scale(1);
	transform:scale(1);
}
}


.itemSpec p{
	margin-top: 1.6em;
	font-size: 1.06vw;
	line-height: 2.0;
	letter-spacing: 0.03em;
	text-align: justify;
	text-justify: inter-ideograph;
}





/*-------------------------*/

.bkImage{
	width: 100%;
	display: block;
	background-repeat: no-repeat;
}
.bkImage.img01{
	background-image: url("../images/bkimg01.webp");
	background-size: 100%;
	background-position: top center;
}
.bkImage.img02{
	background-image: url("../images/bkimg02.webp");
	background-size: 100%;
	background-position: center center;
}
.bkImage.img03{
	background-image: url("../images/bkimg03.webp");
	background-size: 100%;
	background-position: top center;
}
.bkImage.img04{
	background-image: url("../images/bkimg01.webp");
	background-size: 100%;
	background-position: center center;
}

/*-------------------------*/


.itemBlock .imageSlider{display: none;}



/*-----------------------------------------------------------------------------*/

.areaTitle{
	position: absolute;
	top: 0;
	left: 40px;
	width: 1px;
	height: 1px;
	-webkit-transform:rotate(-90deg);
	transform:rotate(-90deg);
}
.areaTitle h2{
	position: absolute;
	bottom: 0;
	right: 0;
	font-family:'DINPro-Bold';
	font-size: 20px;
	letter-spacing: 0.15em;
}

/*----------------------*/

.items{
	width: 100%;
	position: relative;
	margin-top: 15%;
}
.items .itemList{
	width: 82%;
	max-width: 1400px;
	margin: 0 auto;
}
.items .itemList ul{
	width: 100%;
	display: flex;
	justify-content:flex-start;
	flex-wrap: wrap;
	column-gap: 4.25%;
}
.items .itemList ul li{
	width: 30.5%;
	margin-bottom: 4%;
}

.items .itemList div a{
	display: block;
	position: relative;
}
.items .itemList div a::after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: 1px solid #AFFE00;
}
@media(min-width:769px) {
.items .itemList div a::after{-webkit-transition: border 0.4s cubic-bezier(0.33, 1, 0.68, 1);transition: border 0.4s cubic-bezier(0.33, 1, 0.68, 1);}
.items .itemList div a:hover::after{border-width: 10px;}
}


.items .itemList h3{
	font-family:'DINPro-Bold';
	font-size: 16px;
	text-align: center;
	line-height: 1.3;
	margin-top: 1em;
}
.items .itemList h3 span{
	font-family:'DINPro-Regular';
	font-size: 0.933em;
	display: block;
}

/*-----------------------------------------------------------------------------*/



.field{
	width: 100%;
	position: relative;
	margin-top: 14vw;
}
.field::before{
	content: '';
	display: block;
	position: absolute;
	left: 25px;
	right: 25px;
	top: -9vw;
	height: 1px;
	background: #AFFE00;
}
.field .fieldInner{
	width: 82%;
	max-width: 1400px;
	margin: 0 auto;
}

.field .copy{
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 2.2;
}

.field .shopList{
	width: 100%;
	margin-top: 100px;
	display: flex;
	justify-content: space-between;
}
.field .shopList .shop{
	width: 48%;
}
.field .shopList .shop h3{
	color: #AFFE00;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.05em;
}
.field .shopList .shop h3 em{
	font-family:'DINPro-Bold';
	font-size: 45px;
	letter-spacing: 0;
	display: block;
}
.field .shopList .shop h4{
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.07em;
	margin-top: 1em;
	padding-bottom: 0.4em;
}
.field .shopList .shop p{
	font-size: 15px;
	letter-spacing: 0.05em;
	line-height: 1.5;
	margin-top: 0.5em;
}


/*-------------------------*/


footer{
	width: 100%;
	margin-top: 20%;
	padding: 45px 0;
	text-align: center;
	background: #AFFE00;
	font-size: 13px;
	font-family:'DINPro-Medium';
	letter-spacing: 0.02em;
}
footer br{display: none;}









/*++++++++++++++++++++++++++++++++++++++++++++++++++++*/


@media(min-width:1500px) {

.header .logo{width: 255px;}
.header .copy{font-size: 16px;}

/*--------*/

.itemSpec{padding: 4.0vw 3.0vw;}
.itemSpec p{font-size: 1.00vw;}

}

@media(min-width:1750px) {

.contentsLead p{font-size: 18px;}

/*--------*/

.itemSpec{padding: 5.0vw 4.0vw;}
.itemSpec p{font-size: 0.95vw;}
}


/*--------------------*/


@media(max-width:1200px) {

.header .logo{width: 205px;}
.header .copy{font-size: 14px;}

/*-------*/

.contentsLead p{font-size: 16px;}

/*-------*/

.itemSpec h3{font-size: 2.7vw;}
.itemSpec .buy a{font-size: 1.5vw;}
.itemSpec p{font-size: 1.2vw;line-height: 1.9;}

/*-------*/

.items .itemList h3{font-size: 15px;}

/*-------*/

.field .copy{font-size: 14px;}
.field .shopList .shop h3{font-size: 16px;}
.field .shopList .shop h3 em{font-size: 40px;}
.field .shopList .shop h4{font-size: 18px;}
.field .shopList .shop p{font-size: 14px;}

}



@media(max-width:980px) {

.header .logo{width: 180px;}
.header .copy{font-size: 13px;}

/*--------*/

.contentsLead p{font-size: 14px;}

/*-------*/

.navigation{top: -55px;}
.navigation .topBar{height: 55px;}
.navigation .navBody{left: 2.5%;right: 2.5%;height: 55px;}
.navigation .navBody .navLogo{width: 120px;}
.navigation .navBody nav ul{grid-gap: 20px;}
.navigation .navBody nav a{font-size: 13px;}

#look.anchertarget{top: -54px;}
.items .anchertarget{top:calc(-54px - 5vw);}
.field .anchertarget{top:calc(-54px - 5vw);}


/*--------*/

.itemSpec p{font-size: 1.34vw;line-height: 1.8;}

/*--------*/

.areaTitle{left: 30px;}
.areaTitle h2{font-size: 17px;}


.items .itemList{width: 85%;}
.items .itemList ul{column-gap: 3.5%;}
.items .itemList ul li{width: 31%;}
.items .itemList h3{font-size: 13px;margin-top: 0.7em;}

/*--------*/

.field .copy{font-size: 13px;}
.field .shopList{margin-top: 10%;}
.field .shopList .shop h3{font-size: 15px;}
.field .shopList .shop h3 em{font-size: 36px;}
.field .shopList .shop h4{font-size: 16px;}
.field .shopList .shop p{font-size: 13px;}

/*--------*/

footer{padding: 35px 0;font-size: 12px;}

}



/*769以上でも表示する場合
@media(min-width:768px) {
.swiper-wrapper{display: block;flex-direction: column;}
.swiper-slide {flex-shrink: 0;width:auto;height:auto;position:static; transition-property: transform;}
}
*/



@media(max-width:768px) {

.wide{display: none;}

.header{background-image: url("../images/mainimage_sp.webp");}
.header .logo{width: 210px;top:35%;}

/*--------*/


body.fixed{height: 100%; overflow: hidden;}

.navigation{top: 0;-webkit-transition: none;transition: none;}
.navigation .topBar{height: 10px;}

.navigation .navTrigger{
	display: block;
	position: relative;
	background: #AFFE00;
	width:51px;
	height:40px;
	z-index:900;
    pointer-events: auto;
}
.navigation .navTrigger span{
	position:absolute;
	left:11px;
	width:29px;
	height:2px;
	background-color:#0C2538;
	-webkit-transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
	transition: all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.navigation .navTrigger span:nth-of-type(1){top:4px;}
.navigation .navTrigger span:nth-of-type(2){top:14px;}
.navigation .navTrigger span:nth-of-type(3){bottom:14px;}
.navigation .navTrigger.open span:nth-of-type(1){
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	top: 15px;
}
.navigation .navTrigger.open span:nth-of-type(2){opacity: 0;}
.navigation .navTrigger.open span:nth-of-type(3){
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	bottom: 23px;
}

.navigation .navBody{
	position:fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	left: 0;
	right:0;
	height:auto;
	opacity: 0;
	visibility: hidden;
	background: #AFFE00;
	-webkit-transition: all 0.6s 0s;
	transition: all 0.6s 0s;
}
.navigation .navBody.open{
	opacity: 1;
	visibility: visible;
	-webkit-transition: all 0.4s 0.3s;
	transition: all 0.4s 0.3s;
}
.navigation .navBody .inner{
	position: absolute;
	top: 48%;
	left: 0;
	right: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.navigation .navBody .navLogo{
	position: relative;
	top: 0;
	width: 200px;
	margin: 0 auto;
	-webkit-transform:none;
	transform:none;
}
.navigation .navBody nav{
	position: relative;
	top: 0;
	width: 100%;
	margin-top: 5vh;
	text-align: center;
	-webkit-transform:none;
	transform:none;
}
.navigation .navBody nav ul{display: block;grid-gap: 0;}
.navigation .navBody nav ul li{padding: 3.0vh 0;}
.navigation .navBody nav a{font-size: 19px;padding: 0.5em 0;}


#look.anchertarget{top: -9px;}
.items .anchertarget{top:calc(-9px - 15vw);}
.field .anchertarget{top:calc(-9px - 15vw);}

/*--------*/

.contentsLead{width: 95%;padding: 15% 0;}
.contentsLead p{font-size: 15px;}
.contentsLead p br.res01{display: block;}

/*--------*/

.itemBlock .photo{display: none;}

.itemBlock .inTop,
.itemBlock .inBottom,
.itemBlock .inAll{display: block;}

.itemBlock .leftBox,
.itemBlock .rightBox{width: 100%;}

.set03 .rightBox{padding-top: 0;}
.set04{margin-top: 0;}
.set10{padding-bottom: 9%;}
.set11{padding-bottom: 0%;}

.bkImage.img01,
.bkImage.img02,
.bkImage.img03,
.bkImage.img04{background: none;}


/*--------*/

.itemBlock{background: #AFFE00;}

.itemBlock .imageSlider{
	width: 100%;
	position: relative;
	display: block;
	overflow: hidden;
}
.itemBlock .cover::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	z-index: 10;
	background: #AFFE00;
	-webkit-transition: width 1.2s cubic-bezier(0.76, 0, 0.24, 11);
	transition: width 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
.itemBlock .cover.view::after{
	width: 0;
}





.itemBlock .imageSlider .swiper{overflow: visible;padding:7%;}
.itemBlock .imageSlider .swiper .swiper-slide{width: 100%;}

.itemBlock .imageSlider  .swiper-slide span{
	display: block;
	width: 100%;
	padding-top: 140%;
	background-position: center center;
	background-size: cover;
}
.itemBlock .imageSlider .sp0101 span{background-image: url("../images/sp0101.webp");}
.itemBlock .imageSlider .sp0102 span{background-image: url("../images/sp0102.webp");}
.itemBlock .imageSlider .sp0103 span{background-image: url("../images/sp0103.webp");}
.itemBlock .imageSlider .sp0104 span{background-image: url("../images/sp0104.webp");}

.itemBlock .imageSlider .sp0301 span{background-image: url("../images/sp0301.webp");}
.itemBlock .imageSlider .sp0302 span{background-image: url("../images/sp0302.webp");}
.itemBlock .imageSlider .sp0303 span{background-image: url("../images/sp0303.webp");}
.itemBlock .imageSlider .sp0304 span{background-image: url("../images/sp0304.webp");}

.itemBlock .imageSlider .sp0401 span{background-image: url("../images/sp0401.webp");}
.itemBlock .imageSlider .sp0402 span{background-image: url("../images/sp0402.webp");}

.itemBlock .imageSlider .sp0501 span{background-image: url("../images/sp0501.webp");}
.itemBlock .imageSlider .sp0502 span{background-image: url("../images/sp0502.webp");}
.itemBlock .imageSlider .sp0503 span{background-image: url("../images/sp0503.webp");}
.itemBlock .imageSlider .sp0504 span{background-image: url("../images/sp0504.webp");}

.itemBlock .imageSlider .sp0601 span{background-image: url("../images/sp0601.webp");}
.itemBlock .imageSlider .sp0602 span{background-image: url("../images/sp0602.webp");}
.itemBlock .imageSlider .sp0603 span{background-image: url("../images/sp0603.webp");}

.itemBlock .imageSlider .sp0701 span{background-image: url("../images/sp0701.webp");}
.itemBlock .imageSlider .sp0702 span{background-image: url("../images/sp0702.webp");}

.itemBlock .imageSlider .sp0801 span{background-image: url("../images/sp0801.webp");}
.itemBlock .imageSlider .sp0802 span{background-image: url("../images/sp0802.webp");}

.itemBlock .photo.p0901{display: block;padding: 7%;background:#AFFE00;}
.set09 .p0901 span{padding-top: 140%;background-image: url("../images/sp0901.webp");opacity: 1;-webkit-transform:scale(1);transform:scale(1);}

.itemBlock .imageSlider .sp1001 span{background-image: url("../images/sp1001.webp");}
.itemBlock .imageSlider .sp1002 span{background-image: url("../images/sp1002.webp");}

/*--------*/

.itemSpec{padding: 0 9% 9% 9%;}
.itemSpec h3{font-size: 32px;}
.itemSpec .buy{margin-top: 20px;}
.itemSpec .buy a{font-size: 17px;padding: 0.4em 2.5em;}
.itemSpec p{
	font-size: 15px;
	line-height: 2.0;
	text-align:left;
	text-justify:none;
}

/*--------*/

.areaTitle{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	text-align: center;
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}
.areaTitle h2{position: relative;font-size: 22px;}

/*--------*/

.items{margin-top: 17vw;}
.items .itemList{width: 82%;margin-top: 15vw;}
.items .itemList ul{justify-content:space-between;column-gap:0;}
.items .itemList ul li{width: 46%;margin-bottom: 6%;}
.items .itemList h3{font-size: 14px;margin-top: 1em;}

/*--------*/

.field{margin-top: 25vw;}
.field::before{left:0;right:0;top: -15vw;}

.field .copy{font-size: 15px;margin-top: 3em;line-height: 2;}
.field .copy br.res{display: none;}

.field .shopList{margin-top: 0;display: block;}
.field .shopList .shop{width: 100%;margin-top: 7vw;}
.field .shopList .shop h3 em{font-size: 40px;}
.field .shopList .shop h4{font-size: 20px;}
.field .shopList .shop p{font-size: 14px;}


}











@media(max-width:630px) {

.header .logo{width: 190px;top:35%;}
.header .copy p{margin-top: 1.2em;font-size: 14px;}
.header .copy br.res{display: block;}

/*------*/

.contentsLead{padding: 23% 0;}
.contentsLead p br.res02{display: block;}

/*------*/

.itemBlock .imageSlider .swiper{padding:4%;}
.itemBlock .photo.p0901{padding: 4%;}

/*------*/

.itemSpec{padding: 4% 6% 9% 6%;}
.itemSpec h3 br{display: block;}
.itemSpec p{font-size: 14px;margin-top: 2.0em;}


/*------*/

.items{margin-top: 20vw;}
.items .itemList{width: 75%;}
.items .itemList ul{display: block;}
.items .itemList ul li{width: 100%;margin-bottom: 9vw;}


/*------*/

.field{margin-top: 35vw;}
.field::before{left:0;right:0;top: -18vw;}

.field .copy{font-size: 14px;}

.field .shopList .shop{margin-top: 10vw;}
.field .shopList .shop h3 em{font-size: 36px;}
.field .shopList .shop h4{font-size: 18px;}

/*------*/

footer{margin-top: 30vw;line-height: 1.2;padding: 45px 0;}
footer br{display: block;}

}




@media(max-width:450px) {

.header .logo{width: 145px;top:31%;}
.header .copy{bottom: 7%;}
.header .copy p{font-size: 13px;}

/*------*/

.contentsLead p{font-size: 14px;}

/*------*/

.itemBlock .imageSlider .swiper{padding:3%;}
.itemBlock .photo.p0901{padding: 3%;}

/*------*/

.itemSpec{padding: 6% 5% 17% 5%;}
.itemSpec.second{padding-top:0%}
.itemSpec h3{font-size: 30px;}
.itemSpec h3 span{font-size: 0.62em;padding-bottom: 0.4em;}
.itemSpec .buy {margin-top: 17px;}
.itemSpec .buy a{font-size: 16px;}
.itemSpec p{line-height: 1.9;}

/*------*/

.items{margin-top: 25vw;}
.items .itemList{width: 80%;margin-top: 20vw;}

.field{margin-top: 43vw;}
.field::before{;top: -22vw;}

.field .fieldInner{width: 90%;}
.field .shopList .shop{margin-top: 15vw;}

}