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

/* base
-----------------------------------------------*/
/* ========== base style ========== */

/* common parts
-----------------------------------------------*/
/* ========== text ========== */
/* ========== border ========== */
/* ========== float ========== */
/* ========== display ========== */
/* ========== position ========== */
/* ========== overflow ========== */
/* ========== width ========== */
/* ========== margin ========== */
/* ========== background ========== */
/* ========== device displaying ========== */
/* ========== animation for ScrollTrigger.min.js  ========== */

/* other style
-----------------------------------------------*/



/* base
-----------------------------------------------*/
picture {
display: block;
}

/* ========== base style ========== */
.allwrapper {
width: 100%;
min-height: 100vh;
color: #000;
font-family: termina, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 2.4vw;
line-height: 100%;
font-feature-settings: "palt";
letter-spacing: 0.09em;
background: #f3d0ff;
animation-delay: 0.75s;
}
.allwrapper * {
box-sizing: border-box;
}
.allwrapper a:link,
.allwrapper a:visited,
.allwrapper .acordion_btn {
color: #000;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
.allwrapper a:hover,
.allwrapper a:hover img,
.allwrapper button:hover img {
opacity: 0.80;
filter: alpha(opacity=80);
}
.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;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
.allwrapper button {
cursor: pointer;
color: #000;
font-family: termina, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 3.73333vw;
line-height: 100%;
font-feature-settings: "palt";
letter-spacing: 0.05em;
}
@media (min-width:768px){
	.allwrapper {
	width: 100vw;
	font-size: 12px;
	}
}
@media (min-width:1100px){
	.allwrapper {
	font-size: 15px;	
	}
}

/* common parts
-----------------------------------------------*/
/* ========== text ========== */
/* align */
.al_left { text-align: left; }
.al_center { text-align: center; }
.al_right { text-align: right; }

/* size */
.fs8 { font-size: 2.13vw; }
.fs9 { font-size: 2.4vw; }
.fs10 { font-size: 2.67vw; }
.fs11 { font-size: 2.93vw; }
.fs12 { font-size: 3.2vw; }
.fs13 { font-size: 3.47vw; }
.fs14 { font-size: 3.73vw; }
.fs15 { font-size: 4vw; }
.fs16 { font-size: 4.27vw; }
.fs17 { font-size: 4.53vw; }
.fs18 { font-size: 4.8vw; }
@media (min-width:768px){
	.fs10 { font-size: 10px; }
	.fs12 { font-size: 12px; }
	.fs18 { font-size: 18px; }
}

/* weight */
.fw200 { font-weight: 200 !important; }
.fw300 { font-weight: 300 !important; }
.fw400 { font-weight: 400 !important; }
.fw500 { font-weight: 500 !important; }
.fw600 { font-weight: 600 !important; }
.fw700 { font-weight: 700 !important; }

/* line height */
.lh120 { line-height: 120%; }
.lh130 { line-height: 130%; }
.lh140 { line-height: 140%; }
.lh150 { line-height: 150%; }
.lh160 { line-height: 160%; }
.lh170 { line-height: 170%; }
.lh180 { line-height: 180%; }
.lh190 { line-height: 190%; }
.lh200 { line-height: 200%; }
.lh210 { line-height: 210%; }

/* letter space */
.ltrspace0 { letter-spacing: 0; }
.ltrspace0025 { letter-spacing: 0.025em; }
.ltrspace005 { letter-spacing: 0.05em; }
.ltrspace0075 { letter-spacing: 0.075em; }
.ltrspace01 { letter-spacing: 0.1em; }
.ltrspace0125 { letter-spacing: 0.125em; }
.ltrspace015 { letter-spacing: 0.15em; }


/* ========== float ========== */
/* clearfix */
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after { clear: both; }

/* float */
.float_left { float: left; }
.float_right { float: right; }


/* ========== display ========== */
.disp_block { display: block !important; }
.disp_iblock { display: inline-block !important; }
.disp_inline { display: inline !important; }
.disp_none { display: none; }
.disp_flex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }


/* ========== position ========== */
.posi_relative { position: relative !important; }
.posi_absolute { position: absolute !important; }
.posi_fixed { position: fixed !important; }


/* ========== overflow ========== */
.overflow_hidden { overflow: hidden !important; }


/* ========== margin ========== */
/* margin-auto */
.mx_auto { margin-left: auto; margin-right: auto; }


/* ========== device displaying ========== */
.sp_none{ display: none; }
img.sp_none{ display: none; }
.sp_only{ display: block; }
img.sp_only{ display: block; }
@media (min-width:768px){
	.sp_none{display: block;}
	img.sp_none{display: block;}
	.tab_none { display: none; }
	img.tab_none { display: none; }
	.sp_only{display: none;}
	img.sp_only{display: none;}
	.sp_only{display: none;}
	img.sp_only{display: none;}
}
.spc_none{ display: block; }
@media (min-width:1199px){.pc_none{display: block;}}
.pc_only{ display: none; }
@media (min-width:1200px){.pc_none{display: none;}
.pc_only{display: block;}
.tab_none{ display: block; }
}


/* ========== animation for ScrollTrigger.min.js  ========== */
.invisible {
transition: opacity 1s ease;
opacity: 0.0;
}
.visible {
transition: opacity 1s ease;
opacity: 1.0;
}



/* other style
-----------------------------------------------*/
.ff_ryogothic {
font-family: ryo-gothic-plusn, sans-serif;
}

.allwrapper {
padding-top: 2vw;
padding-bottom: 17.33vw;
animation-delay: 0.75s;
}
@media (min-width:768px){
	.allwrapper {
	padding-top: 20px;
	padding-bottom: 100px;
	}
}
@media (min-width:1200px){
	.allwrapper {
	padding-top: 40px;
	}
}

.maincontainer {
width: 96%;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
background: #fff;
}
.fv {
padding-top: 38.666vw;
}
.fv_head {
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
.fv_slide picture {
border-bottom: 1px solid #000;
}
.fv_flowtext {
top: 146vw;
left: 0;
width: 100%;
height: 5.066vw;
background: url("../images/fv-flowtext.png") repeat-x;
background-size: auto 5.066vw;
animation: bgiLoop_sp 1.7s linear infinite;
}
@keyframes bgiLoop_sp {
	0% { background-position: 0 0;}
	100% { background-position: -51.7vw 0;}
}
@keyframes bgiLoop_tab {
	0% { background-position: 0 0;}
	100% { background-position: -203px 0;}
}
@keyframes bgiLoop_pc {
	0% { background-position: 0 0;}
	100% { background-position: -255px 0;}
}
.intro {
width: 83.33vw;
margin-top: 6.5vw;
font-size: 3.0666666vw;
}
@media (min-width:768px){
	.maincontainer {
	width: 720px;
	}
	.fv {
	padding-top: 0;
	border-bottom: 1px solid #000;
	}
	.fv_head {
	width: 280px;
	padding: 30px 20px 0;
	}
	.fv_slide {
	margin: 0 0 0 auto;
	width: 438px;
	height: 455px;
	border-left: 1px solid #000;
	overflow: hidden;
	}
	.fv_slide picture {
	border-bottom: none;
	}
	.fv_flowtext {
	top: 410px;
	left: auto;
	right: 0;
	width: 438px;
	height: 20px;
	background-size: auto 20px;
	animation: bgiLoop_tab 1.7s linear infinite;
	}
	.intro {
	position: absolute;
	left: 0;
	top: 320px;
	width: 280px;
	margin-top: 0;
	text-align: center;
	font-size: 11px;
	}
}
@media (min-width:1200px){
	.maincontainer {
	width: 1127px;
	}
	.fv_head {
	width: 445px;
	padding: 0 55px 0;
	}
	.fv_slide {
	width: 685px;
	height: 515px;
	}
	.fv_flowtext {
	top: 465px;
	width: 685px;
	height: 25px;
	background-size: auto 25px;
	animation: bgiLoop_pc 1.7s linear infinite;
	}
	.intro {
	left: 0;
	top: 360px;
	width: 445px;
	font-size: 15px;
	}
}

.lineup {
align-items: stretch;
margin-top: 6.5vw;
}
.lineup_box {
width: 50%;
padding: 4vw 0 5.3vw;
border-top: 1px solid #000;
}
.lineup_box:nth-child(odd) {
border-right: 1px solid #000;
}
.lineup_itemname {
margin-top: 2vw;
font-size: 3.333333vw;
}
.itemname_jp {
margin-top: 1.5vw;
padding: 0.75vw 1.5vw;
font-size: 2.8vw;
border: 1px solid #000;
}
.lineup .itemname_jp {
margin-top: 1.5vw;
}
.lineup_box:nth-child(even) picture,
.lineup_box:nth-child(even) .lineup_link {
animation-delay: 0.2s;
}
.lineup_price {
margin-top: 1.5vw;
font-size: 2.533333vw;
}
.lineup_prof {
width: 42.66666vw;
z-index: 2;
}
.lineup_prof figure {
width: 16vw;
}
.lineup_prof_text {
width: 25vw;
}
.lineup_produced {
font-size: 2.8vw;
letter-spacing: 0.05em;
}
.lineup_store {
margin-top: 1vw;
padding-top: 1vw;
border-top: 1px solid #000;
}
a:link.lineup_link,
a:visited.lineup_link {
width: 42.66666vw;
margin-top: 5.3vw;
padding: 2.6vw 0;
background: #000;
color: #fff;
}
.lineup_box:nth-child(4) .lineup_link {
margin-top: 8.5vw;
}
@media (min-width:768px){
	.lineup {
	margin-top: 0;
	}
	.lineup_box {
	width: 25%;
	padding: 20px 0;
	border-top: none;
	border-right: 1px solid #000;
	}
	.lineup_box:last-child {
	border-right: none;
	}
	.lineup_num {
	font-size: 13.5px;	
	}
	.lineup_itemname {
	margin-top: 10px;
	font-size: 13.5px;
	}
	.itemname_jp {
	margin-top: 1.5vw;
	padding: 2px 10px;
	font-size: 10px;
	}
	.lineup .itemname_jp {
	margin-top: 10px;
	}
	.lineup_price {
	margin-top: 7px;
	font-size: 10px;
	}
	.lineup_box:nth-child(3) picture,
	.lineup_box:nth-child(3) .lineup_link {
	animation-delay: 0.4s;
	}
	.lineup_box:nth-child(4) picture,
	.lineup_box:nth-child(4) .lineup_link {
	animation-delay: 0.6s;
	}
	.lineup_prof {
	width: 150px;
	}
	.lineup_prof figure {
	width: 60px;
	}
	.lineup_prof_text {
	width: 85px;
	}
	.lineup_produced {
	font-size: 9px;
	}
	.lineup_store {
	margin-top: 6px;
	padding-top: 5px;
	}
	a:link.lineup_link,
	a:visited.lineup_link {
	width: 160px;
	margin-top: 22px !important;
	padding: 9px 0;
	font-size: 9px;
	}
	.lineup_box:nth-child(3) .lineup_link {
	margin-top: 8px !important;
	}
}
@media (min-width:1200px){
	.lineup_box {
	padding: 25px 0 18px;
	}
	.lineup_box picture {
	width: 220px;
	margin: 0 auto;
	}
	.lineup_link {
	width: 190px !important;
	}
	.lineup_box:nth-child(3) .lineup_link {
	margin-top: 10px !important;	
	}
}

.secbox {
padding-top: 6.6vw;
}
.secnum {
width: 100%;
padding: 1vw 0;
background: #000;
color: #fff;
}
.sectitle {
margin-top: 7vw;
font-size: 6.66vw;
}
.secbox .itemname_jp {
margin-top: 4vw;
}
.sectitle_price {
margin-top: 2vw;
}
.secpoint {
margin-top: 4vw;
font-size: 3.066666vw;
}
.secpoint_price {
margin-top: 2.5vw;
}
.styling {
margin-top: 5.3vw;
}
.stylingbox {
border-top: 1px solid #000;
}
.stylingbox01 {
width: 100%;
padding-top: 4vw;
}
.stylingbox_inner {
align-items: stretch;
}
.stylingbox02 .stylingbox_inner {
flex-direction: row-reverse;
}
.stylinghead {
padding: 1.75vw 3.2vw 1vw;
}
.stylingbox_img {
width: 50%;
}
.stylingbox01 .stylingbox_img {
margin-top: -9vw;
}
.stylingbox_detail {
width: 50%;
}
.stylingbox02 .stylingbox_detail {
padding-top: 4vw;
border-right: 1px solid #000;
}
.stylingbox03 .stylingbox_detail {
padding-top: 4vw;
}
.stylingbox03 .stylingbox_img {
border-right: 1px solid #000;
}
.stylingbox_detail p {
margin-top: 10vw;
font-size: 3.066666vw;
}
.stylingbox_price {
width: 33.3vw;
margin-top: 5.33vw;
padding-top: 6vw;
}
.stylingbox_price::before {
content: "";
position: absolute;
top: 0;
left: calc(50% - 8px);
display: block;
width: 16px;
height: 1px;
background: #000;
}
.stylingbox_price div {
line-height: 220%;
font-weight: 500;
letter-spacing: 0.09em;
}
.stylingbox_price div.name {
width: 60%;
}
.stylingbox_price div.price {
width: 40%;
}
.stylingbox_price div.comingsoon_name {
width: 30%;
}
.stylingbox_price div.comingsoon {
width: 70%;
}
@media (min-width:768px){
	.secbox {
	padding-top: 30px;
	}
	.secnum {
	padding: 7px 0 5px;
	font-size: 14px;
	}
	.sectitle {
	margin-top: 30px;
	font-size: 22px;
	}
	.sectitle_price {
	margin-top: 5px;
	}
	.secbox .itemname_jp {
	margin-top: 18px;
	font-size: 12px;
	}
	.secpoint {
	margin-top: 33px;
	font-size: 15px;
	}
	.secpoint_price {
	margin-top: 15px;
	font-size: 14px;
	}
	.secpoint_price span {
	font-size: 15px;
	}
	.styling {
	display: flex;
	margin-top: 30px;
	}
	.stylingbox {
	width: 33.333333%;
	padding-top: 0 !important;
	padding-bottom: 40px;
	border-top: none;
	border-right: 1px solid #000;
	}
	.stylingbox:last-child {
	border-right: none;	
	}
	.stylinghead {
	padding: 5px 20px 2px;
	font-size: 13px;
	font-weight: 500;
	}
	.stylingbox_img {
	width: 100% !important;
	height: 309px;
	margin-top: 0 !important;
	border-right: none !important;
	overflow: hidden;
	}
	.stylingbox02 .stylingbox_img,
	.stylingbox02 .stylingbox_img picture {
	animation-delay: 0.2s;
	}
	.stylingbox03 .stylingbox_img,
	.stylingbox03 .stylingbox_img picture {
	animation-delay: 0.4s;
	}
	.stylingbox_detail {
	width: 100% !important;
	padding-top: 0 !important;
	border-top: 1px solid #000;
	border-right: none !important;
	}
	.stylingbox_detail p {
	margin-top: 25px;
	font-size: 12px;
	line-height: 175%;
	}
	.stylingbox_price {
	width: 160px !important;
	margin-top: 25px;
	padding-top: 35px;
	}
	.stylingbox_price a,
	.stylingbox_price div {
	width: 100%;
	font-size: 10px;
	}
	.stylingbox_price div {
	line-height: 235%;
	}
	.stylingbox_price div.price {
	width: 35%;
	}
}
@media (min-width:1200px){
	.secbox {
	padding-top: 36px;
	}
	.secnum {
	font-size: 15px;
	}
	.sectitle {
	margin-top: 35px;
	font-size: 26px;
	}
	.sectitle_price {
	margin-top: 10px;
	font-size: 13px;
	}
	.secbox .itemname_jp {
	margin-top: 20px;
	font-size: 15px;
	}
	.sec_mainimg {
	width: 980px;
	}
	.secpoint {
	margin-top: 33px;
	font-size: 17px;
	}
	.secpoint_price {
	margin-top: 18px;
	font-size: 15px;
	}
	.secpoint_price span {
	font-size: 16px;
	}
	.styling {
	margin-top: 38px;
	}
	.stylingbox {
	width: 375px;
	padding-bottom: 40px;
	}
	.stylinghead {
	font-size: 15px;
	}
	.stylingbox_img {	
	height: 486px;
	}
	.stylingbox_detail p {
	margin-top: 37px;
	font-size: 15px;
	}
	.stylingbox_price {
	width: 190px !important;
	margin-top: 35px;
	padding-top: 45px;
	}
	.stylingbox_price a,
	.stylingbox_price div {
	font-size: 12px;
	}

}

.sec01 .seccolor { color: #cf87fd; }
.sec01 .stylinghead, .sec01 .secpoint_price { background: #f3d0ff; }
.sec01_check01 { top: 23vw; right: 2.6vw; width: 29.33vw; }
.sec01_check02 { top: 23.2vw; left: 2.6vw; width: 22.66vw; }
.sec01_check03 { bottom: 4.53vw; left: 5.06vw; width: 35.46vw; }
.sec01_check04 { bottom: 4.53vw; left: 52vw; width: 37.86vw; }
@media (min-width:768px){
	.sec01_check01 { top: 105px; left: 175px; width: 120px; }
	.sec01_check02 { top: 190px; left: 10px; width: 98px; }
	.sec01_check03 { bottom: 185px; left: 417px; width: 143px; }
	.sec01_check04 { bottom: 56px; left: 530px; width: 164px; }
}
@media (min-width:1200px){
	.sec01_check01 { top: 130px; left: 310px; width: 165px; }
	.sec01_check02 { top: 250px; left: 80px; width: 134px; }
	.sec01_check03 { bottom: 250px; left: 642px; width: 196px; }
	.sec01_check04 { bottom: 72px; left: 797px; width: 225px; }
}

.sec02 .seccolor { color: #5cc50f; }
.sec02 .stylinghead, .sec02 .secpoint_price { background: #bdfb90; }
.sec02 .stylingbox01 .stylingbox_img { width: 41.333333%; }
.sec02 .stylingbox01 .stylingbox_detail { width: 58.6%; }
.sec02 .stylingbox02 { padding-top: 4vw; }
.sec02 .stylingbox02 .stylingbox_detail { border-right: none; }
.sec02 .stylingbox02 .stylingbox_img { width: 41.333333%; margin-top: -9vw; }
.sec02 .stylingbox02 .stylingbox_detail { width: 58.6%; padding-top: 0; }
.sec02_check01 { top: 32vw; right: 3vw; width: 49.6vw; }
.sec02_check02 { top: 74.93vw; left: 9.06vw; width: 49.6vw; }
.sec02_check03 { top: 102vw; right: 4.26vw; width: 50.6vw; }
@media (min-width:768px){
	.sec02 .stylingbox02 .stylingbox_price { margin-top: 45px; }
	.sec02_check01 { top: 127px; right: 545px; width: 125px; }
	.sec02_check02 { top: 245px; left: 315px; width: 81px; }
	.sec02_check03 { top: 127px; right: 60px; width: 153px; }
}
@media (min-width:1200px){
	.sec02 .stylingbox02 .stylingbox_price { margin-top: 35px; }
	.sec02_check01 { top: 155px; right: 817px; width: 171px; }
	.sec02_check02 { top: 304px; left: 506px; width: 111px; }
	.sec02_check03 { top: 155px; right: 148px; width: 209px; }
}

.sec03 .seccolor { color: #5b93e6; }
.sec03 .stylinghead, .sec03 .secpoint_price { background: #a8cbff; }
.sec03 .stylingbox01 { padding-top: 0; }
.sec03 .stylingbox01 .stylingbox_img { margin-top: 0; border-right: 1px solid #000; }
.sec03 .stylingbox01 .stylingbox_detail { padding-top: 4vw; }
.sec03 .stylingbox03 { padding-top: 4vw; }
.sec03 .stylingbox03 .stylingbox_img { width: 41.866%; margin-top: -9vw; border-right: none; }
.sec03 .stylingbox03 .stylingbox_detail { width: 58.1%; padding-top: 0; }
.sec03_check01 { top: 23.5vw; right: 3vw; width: 31.2vw; }
.sec03_check02 { top: 26vw; left: 3.5vw; width: 28.8vw; }
.sec03_check03 { bottom: 4.53vw; left: 8vw; width: 35.2vw; }
@media (min-width:768px){
	.sec03_check01 { top: 122px; right: 90px; width: 179px; }
	.sec03_check02 { top: 125px; left: 156px; width: 113.5px; }
	.sec03_check03 { bottom: 75px; left: 449px; width: 113px; }
}
@media (min-width:1200px){
	.sec03_check01 { top: 152px; right: 210px; width: 245px; }
	.sec03_check02 { top: 152px; left: 288px; width: 155px; }
	.sec03_check03 { bottom: 90px; left: 679px; width: 154px; }
}

.sec04 .seccolor { color: #f47f38; }
.sec04 .stylinghead, .sec04 .secpoint_price { background: #ffc4a0; }
.sec04 .stylingbox01 { padding-top: 0; }
.sec04 .stylingbox01 .stylingbox_img { margin-top: 0; border-right: 1px solid #000; }
.sec04 .stylingbox01 .stylingbox_detail { padding-top: 4vw; }
.sec04 .stylingbox02 { padding-top: 4vw; }
.sec04 .stylingbox02 .stylingbox_detail { border-right: none; }
.sec04 .stylingbox02 .stylingbox_img { width: 41.333333%; margin-top: -9vw; }
.sec04 .stylingbox02 .stylingbox_detail { width: 58.6%; padding-top: 0; }
.sec03 .stylingbox02 .stylingbox_price { width: 40vw; }
.sec04 .stylingbox02 .stylingbox_price { width: 45vw; }
.sec04_check01 { top: 28vw; left: 4.26vw; width: 23.46vw; }
.sec04_check02 { top: 29.6vw; right: 3.73vw; width: 18.93vw; }
.sec04_check03 { bottom: 8.53vw; right: 9.06vw; width: 35.2vw; }
@media (min-width:768px){
	.sec04 .stylingbox01 .stylingbox_price { margin-top: 50px; }
	.sec04 .stylingbox02 .stylingbox_price { width: 185px !important; margin-top: 50px; }
	.sec04_check01 { top: 160px; left: 50px; width: 91.5px; }
	.sec04_check02 { top: 115px; right: 155px; width: 162px; }
	.sec04_check03 { bottom: 60px; right: 60px; width: 116.5px; }
}
@media (min-width:1200px){
	.sec04 .stylingbox01 .stylingbox_price { margin-top: 35px; }
	.sec04 .stylingbox02 .stylingbox_price { width: 230px !important; margin-top: 35px; }
	.sec04_check01 { top: 205px; left: 145px; width: 125px; }
	.sec04_check02 { top: 140px; right: 280px; width: 221px; }
	.sec04_check03 { bottom: 77px; right: 152px; width: 159px; }
}

.contentsfooter .maincontainer {
padding: 9vw 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.brandlogo img {
width: 50px;
margin-bottom: 10px;
}
@media (min-width:768px){
	.contentsfooter .maincontainer {
	padding: 60px 0;
	}
	.brandlogo img {
	width: 70px;
	}
}