@charset "UTF-8";

section {
	position: relative;
}

section .sec-logo {
	width: 150px;
	position: absolute;
	top: 50%;
	left: 4vw;
	transform: translateY(-50%);
}
section .sec-logo img {
	width: 100%;
}

#mainv {
	height: 60.4vw;
	background: url(../images/main_p_01.jpg) no-repeat center top;
	background-size: cover;
	padding-top: 6.25vw;
}
#mainv a {
	color: #000;
	text-decoration: none;
}
#mainv nav span {
	color: #000;
}

#toplnavi {
	padding: 50px 0;
}
#toplnavi ul {
	margin: 0 0 50px;
	display: flex;
	justify-content: center;
	/* justify-content: space-between; */
}
#toplnavi ul li {
	text-align: center;
	line-height: 1.6;
	margin: 0 40px;
}
#toplnavi ul li a {
	text-decoration: none;
	padding-bottom: 20px;
	position: relative;
	display: block;
}
#toplnavi ul li a::after {
	content: " ";
	width: 14px;
	height: 14px;
	border-right: solid 1px #174e90;
	border-bottom: solid 1px #174e90;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
}
#toplnavi ul li a .fontEn {
	color: #4d4d4d;
	font-size: 1.357rem;
}
#toplnavi ul li a .ja {
	color: #174e90;
	font-size: .928rem;
	border-top: solid 1px #174e90;
	padding: 5px 10px 0;
}
#toplnavi .text1 {
	text-align: center;
}

section.item {
	margin-top: 100px;
	margin-bottom: 100px;
}
section.item .subContents {
	width: 62.5vw;
}
section.item .subContents h2 {
	text-align: center;
	margin: 0 0 20px;
}
section.item .subContents .figure {
	width: 640px;
	margin: 0 auto 50px;
}
section.item .subContents .figure p {
	font-size: .857rem;
}
section.item .subContents .guide {
	display: flex;
	justify-content: space-between;
}
section.item .subContents .guide .hyoka {
	width: 50%;
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 240px;
}
section#flatmatte.item .subContents .guide .hyoka { background-image: url(../images/flatmatte_s_01.png); }
section#volumelash.item .subContents .guide .hyoka { background-image: url(../images/volumelash_s_01.png); }
section#bindlock.item .subContents .guide .hyoka { background-image: url(../images/bindlock_s_01.png); }
section#perfectlash.item .subContents .guide .hyoka { background-image: url(../images/perfectlash_p_02.jpg); }
section#single.item .subContents .guide .hyoka { background-image: url(../images/single_s_01.png); }

section.item .subContents .guide .text {
	width: 41%;
	border-left: solid 1px #606060;
	padding-left: 5%;
}
section.item .subContents .guide .hyoka dl {
	margin: 0 0 40px;
}
section.item .subContents .guide .hyoka dl dt {
	float: left;
}
section.item .subContents .guide .hyoka dl dd {
	margin: 0 0 15px;
	padding: 0 0 0 120px;
}
section.item .subContents .guide .hyoka dl dd img {
	margin-right: 10px;
}
section.item .subContents .guide .hyoka h3 {
	text-align: center;
	margin: 0 0 10px;
}
section.item .subContents .guide .hyoka li {
	font-size: .78rem;
	padding-left: 25px;
	position: relative;
}
section.item .subContents .guide .hyoka li::before {
	content: "";
	width: 16px;
	height: 13px;
	background: url(../images/item_s_check.png) no-repeat left top;
	background-size: 100% auto;
	position: absolute;
	top: .6em;
	left: 0;
}
section.item .subContents table {
	width: 100%;
	margin: 60px 0 0 0;
}
section.item .subContents table th,
section.item .subContents table td {
	font-weight: normal;
	text-align: left;
	border-bottom: solid 1px #000;
	padding: 10px 30px;
}
section.item .subContents table th {
	color: #fff;
	background: #174e90;
}
section.item .subContents table tr th:nth-child(2) ,
section.item .subContents table tr th:nth-child(3) ,
section.item .subContents table tr th:nth-child(4) { text-align: right; }
section.item .subContents table tr td:nth-child(2) ,
section.item .subContents table tr td:nth-child(3) ,
section.item .subContents table tr td:nth-child(4){ width: 18%; text-align: right; }

section.item .subContents .note {
	margin: 10px 0 0 30px;
}
#option {
	background: url(../images/option_p_01.png) no-repeat center bottom, linear-gradient(to right,  rgba(255,230,254,1) 0%,rgba(231,237,238,1) 100%);
	padding: 4vw 0 4vw;
}
#option .subContents {
	width: 62.5vw;
	display: flex;
	justify-content: space-between;
}
#option .subContents > div {
	width: 50%;
}
#option .subContents > div:first-of-type {
	padding-right: 100px;
}
#option .subContents > div h3 {
	font-size: 135.7%;
	margin: 15px 0 0 0;
}



/* FOR smartphone landscape
***************************************************************************/
@media screen and (max-width:799px) {

	section .sec-logo {
		display: none;
	}

	#mainv {
		height: 135vw;
		background-image: url(../images/main_p_01_sp.jpg);
		padding-top: 5vw;
		position: relative;
	}
	#mainv h1 {
		margin: 0 0 0 0;
	}
	#mainv .text1 {
		width: 70vw;
		font-size: 4.5vw;
		font-weight: bold;
		line-height: 1.6;
		position: absolute;
		bottom: 5vw;
		left: 4vw;
	}

	#toplnavi {
		padding: 5vw 0;
	}
	#toplnavi ul {
		margin: 0 0 30px;
		flex-wrap: wrap;
	}
	#toplnavi ul li {
		width: 49%;
		margin: 0 0 8px;
	}
	#toplnavi ul li a {
		background: #1b63a0;
		padding: 10px 10px 25px;
	}
	#toplnavi ul li:nth-child(2) a,
	#toplnavi ul li:nth-child(3) a {
		background: #5087b6;
	}

	#toplnavi ul li a::after {
		border-right: solid 1px #fff;
		border-bottom: solid 1px #fff;
		bottom: 10px;
	}
	#toplnavi ul li a .fontEn {
		color: #fff;
		font-size: 4.5vw;
	}
	#toplnavi ul li a .ja {
		color: #fff;
		font-size: 2vw;
		border-top-color: #fff;
		padding: 5px 0 0;
	}
	#toplnavi .text1 {
		text-align: left;
		line-height: 1.6;
	}

	section.item {
		margin-top: 12vw;
		margin-bottom: 10vw;
	}
	section.item .subContents {
		width: 92vw;
	}
	section.item .subContents h2 {
		text-align: center;
		margin: 0 auto 10px;
	}
	section#flatmatte.item .subContents h2 img { width: 76.8vw; }
	section#volumelash.item .subContents h2 img { width: 73.3vw; }
	section#bindlock.item .subContents h2 { width: 100vw; margin: 0 -4vw 10px; }
	section#bindlock.item .subContents h2 img { width: 100%; }
	section#perfectlash.item .subContents h2 img { width: 65vw; }
	section#single.item .subContents h2 img { width: 65vw; }

	section.item .subContents .figure {
		width: 100vw;
		margin: 0 -4vw 20px;
	}
	section.item .subContents .figure p {
		margin: 0 4vw;
	}

	section.item .subContents .guide {
		display: block;
	}
	section.item .subContents .guide .hyoka {
		width: 80%;
		background-position: center top;
		margin: 0 10% 5vw;
		padding: 0;
	}

	section#bindlock.item .subContents .guide .hyoka,
	section#perfectlash.item .subContents .guide .hyoka {
		width: 100%;
		background-position: left center;
		margin: 0 0 5vw;
	}

	section#flatmatte.item .subContents .guide .hyoka { background-size: 40vw; padding-top: 50vw; }
	section#volumelash.item .subContents .guide .hyoka { background-size: 40vw; padding-top: 50vw; }
	section#bindlock.item .subContents .guide .hyoka { background-size: 25vw; padding-left: 30vw; }
	section#perfectlash.item .subContents .guide .hyoka { background-size: 25vw; padding-left: 30vw; }
	section#single.item .subContents .guide .hyoka { background-size: 40vw; padding-top: 50vw; }

	section.item .subContents .guide .text {
		width: 100%;
		border-left: none;
		padding-left: 0;
	}
	section.item .subContents .guide .hyoka dl {
		margin: 0 0 5vw;
	}
	section.item .subContents .guide .hyoka dl dt {
		padding-top: .2em;
	}
	section.item .subContents .guide .hyoka dl dd {
		margin: 0 0 5px;
		padding: 0 0 0 6em;
	}
	section.item .subContents .guide .hyoka dl dd img {
		width: 15px;
		margin-right: 15px;
	}
		section#bindlock.item .subContents .guide .hyoka dl dd img { margin-right: 6px; }
		section#perfectlash.item .subContents .guide .hyoka dl dd img { margin-right: 6px; }

	section.item .subContents .guide .hyoka h3 {
		margin: 0 0 5px;
	}
	section.item .subContents .guide .hyoka li {
	}
	section.item .subContents .guide .hyoka li::before {
	}
	section.item .subContents table {
		width: 100vw;
		margin: 10vw -4vw 0;
	}
	section.item .subContents table th,
	section.item .subContents table td {
		font-size: .857rem;
		line-height: 1.6;
		padding: 5px 10px;
	}
	section.item .subContents table th {
	}
	section.item .subContents table tr td:nth-child(2),
	section.item .subContents table tr td:nth-child(3),
	section.item .subContents table tr td:nth-child(4){ white-space: nowrap;}

	section.item .subContents .note {
		font-size: .857rem;
		margin: 10px 0 0;
	}
	#option {
		background: url(../images/option_p_01_sp.png) no-repeat right top, linear-gradient(to right,  rgba(255,230,254,1) 0%,rgba(231,237,238,1) 100%);
		background-size: auto 100%, 100% 100%;
		padding: 4vw 0 4vw;
	}
	#option .subContents {
		width: 92vw;
		display: block;
	}
	#option .subContents > div {
		width: 100%;
	}
	#option .subContents > div:first-of-type {
		padding-right: 0;
	}
	#option .subContents > div h3 {
	}

}