@charset "utf-8";



/* onepage scroll
==========================================*/
.onepageWrap {
	position: relative;
	z-index: 2;
}
.onepageImg {
	width: 1200px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.modePC .onepageImg li .an-lr {
	width: 100%;
}
.modePC .onepageImg li .an-move {
	height: calc( 100vh - 140px );
	min-width: 1200px;
}
.modePC .onepageImg li {
	position: fixed;
	top: 100px;
	left: 40px;
	z-index: 1;
	width: calc( 100vw - 80px );
	min-width: 1200px;
	overflow: hidden;
	height: calc( 100vh - 140px );
	opacity: 0;
	transition: opacity .6s;
	overflow: hidden;
}
.modeSP .onepageImg li .an-lr {
	width: 640px;
	height: calc( 100vh - 90px );
}
.modeSP .onepageImg li {
	position: fixed;
	top: 90px;
	z-index: 1;
	width: 640px;
	overflow: hidden;
	height: calc( 100vh - 90px );
	opacity: 0;
	transition: opacity .6s;
	overflow: hidden;
}
.onepageImg li.active {
	opacity: 1;
}
.modePC .onepageImg li img {
	width: calc( 100vw - 80px );
	min-width: 1200px;
	height: 100%;
}
.modeSP .onepageImg li img {
	width: 740px;
	height: calc( 100vh - 90px );
}
.footerSection {
	background-color: #fff;
}


.modeSP .onepageImg li img {
	width: auto;
	margin-left: -380px;
	height: calc( 100vh - 90px );
}
/* animation parts
==========================================*/
.modePC .box01 .onepage:nth-of-type(1) .t01,
.modePC .box01 .onepage:nth-of-type(1) .w01 {
	width: 630px;
	height: 390px;
}
.box01 .onepage:nth-of-type(1) .t01 {
	position: relative;
}
.box01 .onepage:nth-of-type(1) .t01 > * {
	position: relative;
	z-index: 2;
}
.box01 .onepage:nth-of-type(1) .w01 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
/* box01
==========================================*/
.modePC .box01 .onepage:not(.end) .container,
.modePC .box01 .onepage:not(.end) .w01 {
	width: 630px;
	height: 390px;
}
.modePC .box01 .onepage:nth-of-type(n+2):not(.end) .w01 {
	height: 300px;
}

.ieUA.modePC .box01 .footerSection,
.ieUA.modePC .box01 .onepage {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.ieUA.modePC .box01 .footerSection .breadcrumb,
.ieUA.modePC .box01 .footerSection .toTop {
	position: absolute;
	bottom: 0;
}
.ieUA.modePC footer {
	width: 100vw;
	position: absolute;
	bottom: 0;
}
.modeSP .box01 .onepage .t01,
.modeSP .box01 .onepage .w01 { width: 600px; }

#hearts.modeSP .box01 .onepage:nth-of-type(1) .t01,
#hearts.modeSP .box01 .onepage:nth-of-type(1) .w01 { height: 570px; }
#hearts.modeSP .box01 .onepage .t01,
#hearts.modeSP .box01 .onepage .w01 { height: 540px; }
#quality.modeSP .box01 .onepage:nth-of-type(1) .t01,
#quality.modeSP .box01 .onepage:nth-of-type(1) .w01 { height: 590px; }
#quality.modeSP .box01 .onepage .t01,
#quality.modeSP .box01 .onepage .w01 { height: 510px; }


.box01 .onepage .container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.box01 .onepage h1 ,
.box01 .onepage h2 {
	text-align: center;
}
.box01 .t01 {
	white-space: nowrap;
}
.modePC .box01 .onepage h2 {
	margin-bottom: 16px;
}
.modeSP .box01 .onepage h2 {
	margin-bottom: 30px;
}
.modePC .box01 .onepage h1 .en,
.modePC .box01 .onepage h2 .en {
	font-size: 48px;
	line-height: 60px;
}
.modeSP .box01 .onepage h1 .en,
.modeSP .box01 .onepage h2 .en {
	font-size: 60px;
	line-height: 80px;
}
.modePC .box01 .onepage h1 .jp {
	font-size: 16px;
	line-height: 24px;
}
.modeSP .box01 .onepage h1 .jp {
	font-size: 26px;
	line-height: 32px;
}
.box01 .onepage p {
	text-align: center;
}
.box01 .onepage p em {
	font-weight: bold;
}
.modePC .box01 .onepage p {
	font-size: 14px;
	line-height: 24px;
}
.modeSP .box01 .onepage p {
	font-size: 24px;
}
.modePC .box01 .onepage h1 + p {
	font-size: 24px;
	line-height: 32px;
	margin: 10px 0 9px;
}
.modeSP .box01 .onepage h1 + p {
	font-size: 30px;
	line-height: 44px;
	margin: 20px 0 25px;
}

.modePC .box01 .onepage h1 p:nth-of-type(3) {
	margin-top: 20px;
}
.modePC .box01 .onepage h1 p:nth-of-type(3) svg {
	width: 21px;
	height: 20px;
}
#hearts.modePC .box01 .onepage h1 p:nth-of-type(3) svg {
	margin: 0 3px;
}

.modeSP .box01 .onepage h1 p:nth-of-type(3) {
	margin-top: 20px;
}
.modeSP .box01 .onepage h1 p:nth-of-type(3) svg {
	width: 30px;
	height: 30px;
}
#hearts.modeSP .box01 .onepage h1 p:nth-of-type(3) svg {
	margin: 0 3px;
}
/*quality 緑→青→黄色→オレンジ→ピンク*/
#quality .box01 .onepage h1 p:nth-of-type(3) .icon1 svg { fill:#66CC33 !important; }
#quality .box01 .onepage h1 p:nth-of-type(3) .icon2 svg { fill:#0099CC !important; }
#quality .box01 .onepage h1 p:nth-of-type(3) .icon3 svg { fill:#FFCC00 !important; }
#quality .box01 .onepage h1 p:nth-of-type(3) .icon4 svg { fill:#FF9900 !important; }
#quality .box01 .onepage h1 p:nth-of-type(3) .icon5 svg { fill:#FF3366 !important; }

/*hearts ピンク→黄色→緑→水色→紫*/
#hearts .box01 .onepage h1 p:nth-of-type(3) .icon1 svg { fill:#ef86b7 !important; }
#hearts .box01 .onepage h1 p:nth-of-type(3) .icon2 svg { fill:#fcd24d !important; }
#hearts .box01 .onepage h1 p:nth-of-type(3) .icon3 svg { fill:#7dc872 !important; }
#hearts .box01 .onepage h1 p:nth-of-type(3) .icon4 svg { fill:#6dc2e9 !important; }
#hearts .box01 .onepage h1 p:nth-of-type(3) .icon5 svg { fill:#915da3 !important; }

.modePC .box01 .onepage p:nth-of-type(3) {
	margin-top: 20px;
}

.modePC .box01 .onepage h2 .jp {
	font-size: 19px;
	line-height: 26px;
}
.box01 .onepage .t01 {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.modePC .box01 .onepage .t01 {
	margin-top: 60px;
}
.modeSP .box01 .onepage .t01 {
	margin-top: 90px;
	margin-left: 20px;
}
.modeSP .box01 .onepage .lastSection .t01 {
	margin-top: 0;
}
.modePC .box01 .onepage .t01 svg {
	width: 28px;
	height: 31px;
	margin-bottom: 13px;
}
#quality.modePC .box01 .onepage h1 p:nth-of-type(3) svg{
	margin-bottom: 0;
}

.modeSP .box01 .onepage .t01 svg {
	width: 40px;
	height: 54px;
}

/**
 * lastSection
 */
 .ieUA .ieBox{
 	display: block;
 	width: 100%;
 	min-height: auto !important;
 }
.lastSection{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.modePC .lastSection .container,
.modePC .lastSection .w01 {
	width: 630px;
	height: 300px;
}
.ieUA .lastSection{
	width: 100%;
}
.ieUA .lastSection .container {
	margin: 0;
}
/**
 * footerBox
 */
.footerBox {
	background: #fff;
	margin: 0 auto;
}
.modePC .footerBox .toTop .container {
    justify-content: flex-end;
}
/**
 * footer
 */
.modePC footer {
	margin-top: 0;
	text-align: left;
}
footer h2{
	text-align: left !important;
}
footer .container {
    display: inherit !important;
    justify-content: normal !important;
    align-items: normal !important;
}
.modeSP .box01 .onepage .toTop .container{
    justify-content: center;
}

.modePC .box01 .onepage.end footer p {
	font-size: 16px;
}
.box01 .onepage.end footer p {
	text-align: left;
}
.modePX .box01 .onepage.end footer p {
	line-height: 27px;
}

/*5Quality*/
#quality .box01 .onepage:nth-of-type(2) .t01 svg { fill:#66CC33; }
#quality .box01 .onepage:nth-of-type(3) .t01 svg { fill:#0099CC; }
#quality .box01 .onepage:nth-of-type(4) .t01 svg { fill:#FFCC00; }
#quality .box01 .onepage:nth-of-type(5) .t01 svg { fill:#FF9900; }
#quality .box01 .onepage:nth-of-type(6) .t01 svg { fill:#FF3366; }
/*5hearts*/
#hearts .box01 .onepage:nth-of-type(2) .t01 svg { fill: #ef86b7; }
#hearts .box01 .onepage:nth-of-type(3) .t01 svg { fill: #fcd24d; }
#hearts .box01 .onepage:nth-of-type(4) .t01 svg { fill: #7dc872; }
#hearts .box01 .onepage:nth-of-type(5) .t01 svg { fill: #6dc2e9; }
#hearts .box01 .onepage:nth-of-type(6) .t01 svg { fill: #915da3; }
/* image position
==========================================*/
#hearts .onepageImg li:nth-of-type(1) img { object-position: 30% 50%; font-family: 'object-fit: cover; object-position: 20% 50%;'; }
/* other
==========================================*/
.box21 {
	margin-top: 120px;
}