@charset "utf-8";
/* --------------------------------------------------
	reset
-------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box;}

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, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, 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 {
	margin: 0; padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

img{ vertical-align: bottom;}
ul{ list-style: none;}
ul li{ list-style-type: none;}
figure { margin: 0;}


/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0;}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend { border: 0;}
button,
input,
select,
textarea { font-size: 100%; margin: 0; vertical-align: baseline;}
button,
input { line-height: normal;}
button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0;}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top;}
input[type="search"]:focus { outline: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*	Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
  	  touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus { outline: none;}
.slick-list.dragging{ cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
.slick-track { position: relative; top: 0; left: 0; display: block;}
.slick-track:before,
.slick-track:after { display: table; content: '';}
.slick-track:after { clear: both;}
.slick-loading .slick-track { visibility: hidden;}
.slick-slide { display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide { float: right;}
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none;}
.slick-slide.dragging img { pointer-events: none;}
.slick-initialized .slick-slide { display: block;}
.slick-loading .slick-slide { visibility: hidden;}
.slick-vertical .slick-slide{ display: block; height: auto;}
.slick-arrow.slick-hidden { display: none;}

.slick-arrow{ position: absolute; top: 50%; height: 30px; margin-top: -15px; background: none; border: none; z-index: 100; outline: none;
	 font-family: "Playfair Display", serif; font-size: 18px; font-style: italic;
}
.slick-prev { width: 160px; left: -120px; text-align: left;}
.slick-next { width: 130px; right: -90px; text-align: right;}
.slick-arrow:before{ content: ''; display: block; width: 80px; height: 1px; background: #000; position: absolute; top: 50%;}
.slick-prev:before { right: 0;}
.slick-next:before { left: 0;}
@media (max-width: 901px) {
	.slick-arrow{ top: auto; bottom: -50px;}
	.slick-prev { left: 0px;}
	.slick-next { right: 0px;}
}
@media (max-width: 481px) {
	.slick-arrow{ font-size: 14px;}
	.slick-prev { width: 125px;}
	.slick-next { width: 100px;}
	.slick-arrow:before{ width: 60px;}
}



/*		font-style
-------------------------------------------------- */
@font-face {
 font-family: 'SourceHanR';
 src: url('../font/SourceHanSerif-Regular.otf') format('opentype')
}
@font-face {
 font-family: 'SourceHanM';
 src: url('../font/SourceHanSerif-Medium.otf') format('opentype')
}
@font-face {
 font-family: 'SourceHanB';
 src: url('../font/SourceHanSerif-Bold.otf') format('opentype')
}



body { width: 100%;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
/*	font-family: "游ゴシック","Yu Gothic","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3", "メイリオ","Meiryo",sans-serif;*/
	font-size: 16px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

body.fixed{ position: fixed;}

.eng { font-family: "Playfair Display", serif;}
.min { font-family: "游明朝", "Yu Mincho", "YuMincho", serif;}
.fontR { font-family: "SourceHanR","游明朝", "Yu Mincho", "YuMincho", serif;}
.fontM { font-family: "SourceHanM","游明朝", "Yu Mincho", "YuMincho", serif;}
.fontB { font-family: "SourceHanB","游明朝", "Yu Mincho", "YuMincho", serif;}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em, i { font-style: normal;}
.rt { -webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

/*		utility
-------------------------------------------------- */
.cf{ clear: both;}
.cf:after{ content: ''; display: block; clear: both;}




#hd{ position: absolute; left: 0; top: 0; width: 100%; padding: 40px; animation: 1.4s ease show-in forwards; opacity: 0; z-index: 101;}
#hd h1 { line-height: 1;}
@media (max-width: 481px) {
	#hd { padding: 10px 12px;}
	#hd h1 { width: 100px; }
	#hd h1 img{ width: 100%; }
}


.bg-1 { position: relative;}
.bg-1:before,
.bg-1:after { content: ''; display: block; width: 100%; max-width: 1500px; height: 100%; position: absolute; right: 0; top: 0;}
.bg-1:before{ background: url(../img/bg-ptn-1-2.png) no-repeat 100% 0; background-size: 100% auto; animation: 1.4s ease show-in 2.4s forwards; opacity: 0;}
.bg-1:after { background: url(../img/bg-ptn-1-1.png) no-repeat 100% 0; background-size: 100% auto; animation: 1.4s ease show-in 1.6s forwards; opacity: 0;}
.bg-2 { background: url(../img/bg-ptn-2.png) no-repeat 100% 330px;}
.bg-3 { background: url(../img/bg-ptn-3.png) no-repeat 50% 680px;}
.bg-4 { background: url(../img/bg-ptn-4.png) repeat-y 100% 840px;}
@media (max-width: 1501px) {
}
@media (max-width: 1001px) {
	.bg-2 { background-size: 100% auto;}
	.bg-3 { background-size: 120% auto;}
	.bg-4 { background: url(../img/bg-ptn-4.png) repeat-y 100% 600px;}
}
@media (max-width: 641px) {
	.bg-1:before { background: url(../img/bg-ptn-1-2-sp.png) no-repeat 100% 240px; background-size: 98% auto;}
	.bg-1:after { background: url(../img/bg-ptn-1-1-sp.png) no-repeat 100% -230px; background-size: 98% auto;}
	.bg-2 { background: url(../img/bg-ptn-2-sp.png) no-repeat 100% 500px; background-size: 100% auto;}
	.bg-3 { background: url(../img/bg-ptn-3-sp.png) repeat-y 50% 150px; background-size: 100% auto;}
	.bg-4 { background: none;}
	.bg-4-sp { background: url(../img/bg-ptn-2-sp.png) repeat-y 100% 0px; background-size: 100% auto;}
}
@media (max-width: 421px) {
	.bg-1:after { background-position: 100% -260px;}
	.bg-3 { background-position: 50% 240px;}
}
@media (max-width: 381px) {
	.bg-1:after { background-position: 100% -220px;}
}


#kv { position: relative; padding: 120px 0; z-index: 10;}
#kv .sub-info { position: absolute; opacity: 0;}
#kv .sub-info p { font-size: 20px; line-height: 1.8;}
#kv .sub-info p span { display: block;}
#kv .sub-info hr { width: 100%; height: 1px; margin: 20px 0; border: none; background: #000;}

#kv .brand { width: 28%; position: absolute; top: 300px; width: 28%; z-index: 3;
 animation: 1.4s ease 2.8s show-in-left forwards; transform: translateX(-20px);
}
#kv .brand h1 { padding-left: 50%;}
#kv .brand p { padding-left: 50%;}

#kv .release { width: 24%; right: 0; bottom: 140px; z-index: 4;
 animation: 1.4s ease 3.2s show-in-right forwards;
}
#kv .release h2 { font-size: 60px; font-weight: 400; font-style: italic; line-height: 1;}
#kv .release p { display: inline-block; text-align: right;}

#kv .inner-kv { position: relative; width: 92%; max-width: 1100px; margin: 0 auto;}
#kv .inner-kv:after{ content: ''; display: block; width: 1px; height: 260px; background: #000; position: absolute; left: 0; bottom: 0px;
 animation: 5.0s ease 4.0s show-height infinite; transform: scaleY(0); transform-origin: top;
}
#kv h2.copy { position: absolute; right: 0; top: 0; font-size: 52px; font-weight: 400; letter-spacing: 0.4rem; z-index: 2;
 animation: 1.4s ease 2.4s show-in-under forwards; opacity: 0; transform: translateY(20px);
}
#kv h2.copy span { display: block;}
#kv .flower { position: relative; width: 92%; max-width: 774px; height: 774px; margin: 0 auto;
 animation: 1.4s ease show-in forwards;
}
#kv .flower .main-item { width: 174px; height: 800px; position: absolute; left: 50%; top: 50%; transform: translateX(-87px) translateY(-400px); z-index: 2;}
#kv .flower .main-item div { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 400px;
 background: url(../img/main-item.png) no-repeat 50% 50%; background-size: 100% auto;
 animation: 1.2s ease 0.4s show-in2 forwards; transform-origin: center center; top: 50%; transform: translateY(-48%); opacity: 0;
}
#kv .flower .bg-flower { position: relative; width: 100%; height: 100%; margin: 0 auto; z-index: 1;
 animation: 1.2s ease show-in 0.8s forwards; opacity: 0;
}
/*
#kv .flower .bg-flower div { position: relative; width: 0%; padding-top: 0%; margin: 0 auto; top: 50%; border-radius: 50%;
 transform: translate3d(0,-50%,0);
 will-change: auto;
 background: url(../img/kv-flower.png) no-repeat 50% 50%; background-size: 744px auto;
 animation: 1.6s ease 0.8s show-square forwards;
 -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
*/
#kv .flower .bg-flower div canvas { width: 100%; height: 100%;}


@keyframes show-in{
	0% { opacity: 0;}
	100% { opacity: 1;}
}
@keyframes show-in2{
	0% { opacity: 0; transform: translateY(-48%);}
	100% { opacity: 1;  transform: translateY(-50%);}
}
@keyframes show-in-under{
	0% { opacity: 0; transform: translateY(20px);}
	100% { opacity: 1; transform: translateY(0px);}
}
@keyframes show-in-right{
	0% { opacity: 0; transform: translateX(20px);}
	100% { opacity: 1; transform: translateX(0px);}
}
@keyframes show-in-left {
	0% { opacity: 0; transform: translateX(-20px);}
	100% { opacity: 1; transform: translateX(0px);}
}
@keyframes show-circle{
	0% { height: 0%; opacity: 0;}
	50% { opacity: 1;}
	100% { height: 100%;}
}
@keyframes show-square{
	0% { width: 0%; padding-top: 0%}
	100% { width: 100%; padding-top: 100%}
}



@media (max-width: 1401px) {
	#kv .release { width: 20%;}
	#kv .flower { max-width: 650px; height: 650px;}
	#kv .flower .main-item { width: 152px; height: 700px; transform: translateX(-76px) translateY(-350px);}
}
@media (max-width: 1301px) {
	#kv .sub-info p { font-size: 18px;}
	#kv .brand h1 { padding-left: 40%;}
	#kv .brand p { padding-left: 40%;}
}
@media (max-width: 1001px) {
	#kv .brand h1 { padding-left: 30%;}
	#kv .brand p { padding-left: 30%;}
}
@media (max-width: 769px) {
	#kv .sub-info p { font-size: 16px;}
	#kv .release { width: 24%;}
	#kv .flower { max-width: 600px; height: 600px;}
}
@media (max-width: 641px) {
	#kv { padding: 40px 0;}
	#kv .inner-kv { padding-top: 100px;}
	#kv .sub-info p { font-size: 14px;}
	#kv .sub-info hr { background: #969696;}
	#kv .brand { top: 180px;}
	#kv .brand h1 { padding-left: 20%;}
	#kv .brand p { padding-left: 20%;}
	#kv .release { width: 20%; bottom: 50px;}
	#kv .release h2 { font-size: 40px;}
	#kv h2.copy { font-size: 36px; line-height: 1.4;}
	#kv .flower { max-width: 500px; height: 500px;}
	#kv .flower .main-item { width: 130px; height: 600px; transform: translateX(-65px) translateY(-300px);}
}
@media (max-width: 481px) {
	#kv { margin-bottom: 30px; padding: 20px 0 40px;}
	#kv .inner-kv { width: 100%; padding: 100px 0 60px;}
	#kv .inner-kv:after { left: 30px; bottom: -10px; height: 120px; background: #969696; animation: 5.0s ease 2.0s show-height-sp infinite;}

	#kv .sub-info p { font-size: 10.5px; line-height: 1.5;}
	#kv .sub-info hr { margin: 10px 0;}
	#kv .brand { top: 110px; width: 30%;}
	#kv .brand h1 { padding-left: 12%;}
	#kv .brand p { padding-left: 12%;}
	#kv .release { width: 24%; bottom: 60px;}
	#kv .release h2 { font-size: 24px; letter-spacing: 0.15rem;}
	#kv h2.copy { right: 20px; font-size: 23px; letter-spacing: 0.25rem;}
	#kv .flower { width: 100%; max-width: 100%; height: 420px;}
	#kv .flower .bg-flower div{ height: 420px;}
	#kv .flower .main-item { width: 98px; height: 450px; transform: translateX(-49px) translateY(-225px);}
}
@media (max-width: 421px) {
}

@keyframes show-height{
	0% { transform: scaleY(0); opacity: 1;}
	33% { transform: scaleY(1);}
	66% { height: 260px;}
	98% { height: 0px; transform: scaleY(1); opacity: 1;}
	99% { height: 0px; transform: scaleY(1); opacity: 0;}
	100% { height: 260px; transform: scaleY(0); opacity: 0;}
}
@keyframes show-height-sp{
	0% { transform: scaleY(0); opacity: 1;}
	33% { transform: scaleY(1);}
	66% { height: 120px;}
	98% { height: 0px; transform: scaleY(1); opacity: 1;}
	99% { height: 0px; transform: scaleY(1); opacity: 0;}
	100% { height: 120px; transform: scaleY(0); opacity: 0;}
}
@keyframes show-square-sp{
	0% { width: 0%; padding-top: 0%}
	100% { width: 100%; padding-top: 130%}
}



.inner-sct { position: relative; width: 85%; max-width: 1100px; margin: 0 auto;}
.stl { font-size: 55px; font-weight: 400; letter-spacing: 0.15rem; line-height: 1;}
.stl:after { content: ''; display: block; width: 1px; height: 70px; margin: 30px 0 0; background: #000;}
.btn { width: 80%; max-width: 420px; margin: 0 auto;}
.btn a { display: block; padding: 20px 0; background: #000; box-shadow: 0 10px 20px #ccc; color: #fff; text-align: center; text-decoration: none;}
.btn a:hover{ opacity: 0.8;}
@media (max-width: 641px) {
	.stl { font-size: 42px;}
	.stl:after { height: 50px; margin: 20px 0 0; background: #969696;}
}
@media (max-width: 481px) {
	.stl { font-size: 24px;}
	.btn a { padding: 10px 0;}
}

#lead { position: relative; z-index: 9;}
#lead .inner{ position: relative; width: 90%; max-width: 1100px; margin: 0 auto; padding: 120px 160px; padding-right: 0px;
 transition: 1.4s ease; opacity: 0; transform: translateY(30px);
}
#lead h2 { position: absolute; left: 0; top: 0; font-size: 55px; font-weight: 100; letter-spacing: 0.4rem;}
#lead h2 span { position: relative; display: block; }
#lead h2 span:before,
#lead h2 span:after { position: absolute; content: ''; display: block; width: 20px; height: 50px;}
#lead h2 span:before{ top: -15px; right: 0; border-top: solid 1px #000; border-right: solid 1px #000;}
#lead h2 span:after { bottom: -15px; left: 0; border-bottom: solid 1px #000; border-left: solid 1px #000;}
#lead p { margin-bottom: 30px; font-size: 18px; line-height: 2; letter-spacing: 0.15rem;}
#lead p span { display: block;}
#lead p.secret { font-size: 26px;}
#lead p.secret br { display: none;}
#lead p.self  { font-size: 38px;}
#lead .sp-view { display: none;}
#lead .image { position: absolute; right: -2%; top: 40%; width: 50%; transform: translateY(-300px)}
#lead .image .pht { position: relative; width: 620px; height: 620px; margin: 0 auto;
 transition: 1.0s ease 1.0s; opacity: 0;
}
#lead .image .pht div { position: relative; width: 92%; height: 92%;}
/*
#lead .image .pht div:after{ content: ''; display: block; width: 100%; height: 100%; background: url(../img/image-1.png);
 position: absolute; left: 0; top: 0; z-index: 1; opacity: 0;
}
*/
#lead .image .pht div canvas{ position: relative; z-index: 2; width: 100%; height: 100%;}

/*
#lead .image .pht div{ position: relative; width: 0%; padding-top: 0%; margin: 0 auto; top: 50%; transform: translateY(-50%); border-radius: 50%;
 background: url(../img/image-1.png) no-repeat 50% 50%; background-size: 620px auto;
}
*/
#lead.show .inner { opacity: 1; transform: translateY(0px);}
#lead.show .image .pht { opacity: 1;}
/*
#lead.show .image .pht div { animation: 1.0s linear 1.0s show-square forwards;}
*/
@media (max-width: 1301px) {
	#lead .image .pht { width: 500px; height: 500px;}
	#lead .image .pht div{ background-size: 500px auto;}
}
@media (max-width: 1001px) {
	#lead .inner{ padding: 120px; padding-right: 0;}
	#lead h2 { font-size: 46px;}
	#lead .image { right: 0; transform: translateY(-180px)}
	#lead .image .pht { width: 400px; height: 400px;}
	#lead .image .pht div{ margin: 0 0 0 auto;}
}
@media (max-width: 901px) {
	#lead .inner{ padding: 100px; padding-right: 0;}
	#lead p { margin-bottom: 20px; font-size: 16px;}
	#lead p.secret{ font-size: 21px;}
	#lead p.self  { font-size: 30px;}
	#lead .image .pht { width: 350px; height: 350px; margin: 0 0 0 auto;}
}
@media (max-width: 769px) {
	#lead .inner{ padding: 0px 120px 60px; padding-right: 0px;}
	#lead h2 { top: 20px;}
	#lead .image { display: none;}
	#lead p.secret { margin-bottom: 10px;}
	#lead .sp-view { display: block; width: 100%;}
	#lead .sp-view canvas{ width: 300px; height: 300px;}
}
@media (max-width: 641px) {
	#lead h2 span:before,
	#lead h2 span:after { border-color: #969696;}
	#lead .inner{ width: 80%;}
}
@media (max-width: 481px) {
	#lead .inner{ width: 88%; padding: 0px 60px 80px; padding-right: 0px;}
	#lead h2 { left: -8px; font-size: 24px;}
	#lead h2 span { padding: 0 5px;}
	#lead h2 span:before,
	#lead h2 span:after { width: 12px; height: 30px;}
	#lead p { font-size: 12px; letter-spacing: 0.1rem;}
	#lead p.secret{ font-size: 15px;}
	#lead p.secret br { display: block;}
	#lead p.self  { font-size: 20px;}
	#lead .sp-view canvas{ width: 220px; height: 220px;}
}



.gNav { position: fixed; top: -120px; left: 0%; width: 100%; background: #000; z-index: 1000; transition: 0.4s ease; z-index: 100;}
.gNav .inner { width: 94%; margin: 0 auto; padding: 12px 0;}
.gNav ul { font-size: 0; text-align: center;}
.gNav ul li { display: inline-block; margin: 0 30px; font-size: 18px;}
.gNav ul li:first-child { margin-left: 0;}
.gNav ul li:last-child { margin-right: 0;}
.gNav ul li a { color: #fff; text-decoration: none; transition: 0.3s ease;}
.gNav ul li a:hover { color: #ccc;}
.gNav.show { top: 0;}
@media (max-width: 1201px) {
	.gNav ul li { margin: 0 20px;}
}
@media (max-width: 1001px) {
	.gNav ul li { font-size: 15px;}
}
@media (max-width: 901px) {
	.gNav ul li { margin: 0 10px; font-size: 15px;}
}
@media (max-width: 769px) {
	.gNav { left: 100%; top: 0; height: 100vh; background: url(../img/bg-nav.jpg) no-repeat 50% 0; background-size: 100% auto; transition: 0.6s ease; opacity: 0;}
	.gNav.open { left: 0%; opacity: 1;}
	.gNav .inner { height: 100%; padding: 160px 0 12px;}
	.gNav ul li { display: block; margin: 0px auto 25px !important; font-size: 21px; letter-spacing: 0.2rem;}
}
@media (max-width: 481px) {
	.gNav .inner { padding: 100px 0px 0;}
	.gNav ul li { margin: 0px auto 35px !important;}
	.gNav ul li { font-size: 18px;}
	.gNav ul li.jp { font-size: 16px;}
}


.sp-menu { display: none; width: 35px; height: 35px; position: fixed; right: 20px; top: 20px; z-index: 101;}
.sp-menu div { position: relative; width: 100%; height: 100%;}
.sp-menu div span { position: absolute; display: block; width: 100%; height: 1px; background: #000; left: 0; opacity: 1; transition: 0.3s ease;}
.sp-menu div span:nth-of-type(1){ top: 6px;}
.sp-menu div span:nth-of-type(2){ top: 18px;}
.sp-menu div span:nth-of-type(3){ top: 30px;}
.sp-menu.active div span:nth-of-type(1){ transform: translateY(12px) rotate(315deg); background: #fff;}
.sp-menu.active div span:nth-of-type(2){ opacity: 0;}
.sp-menu.active div span:nth-of-type(3){ transform: translateY(-12px) rotate(-315deg); background: #fff;}
@media (max-width: 769px) {
	.sp-menu.active,
	.sp-menu.show { display: block;}
	
}

.pNav { padding: 25px 0; background: #000;}
.pNav .inner { font-size: 0; text-align: center;}
.pNav .inner div { display: inline-block; margin: 0 50px;}
.pNav .inner div:first-child{ margin-left: 0;}
.pNav .inner div:last-child{ margin-right: 0;}
.pNav .inner div a { color: #fff; font-size: 26px; letter-spacing: 0.15rem; text-decoration: none; transition: 0.3s ease;}
.pNav .inner div a:hover { color: #ccc;}
.pNav hr { display: none; width: 0%; height: 0; border: none;}
.pNav.ftNav { padding: 12px 0;}
.pNav.ftNav .inner div a { font-size: 21px;}
@media (max-width: 1001px) {
	.pNav .inner div { margin: 0 40px;}
}
@media (max-width: 481px) {
	.pNav { padding: 15px 0;}
	.pNav .inner div { margin: 0px 30px;}
	.pNav .inner div a { font-size: 18px;}
	.pNav .inner div:first-child{ margin-left: 30px;}
	.pNav .inner div:last-child{ margin-right: 30px;}
	.pNav hr { display: block; width: 100%; margin: 10px 0;}
	.pNav.ftNav .inner div a { font-size: 16px;}
	.pNav.ftNav hr { margin: 6px 0;}
}


#introduce { transition: 1.4s ease; opacity: 0; transform: translateY(30px);}
#introduce .inner-sct{ padding: 140px 0; background: url(../img/item-set.png) no-repeat 100% 100%;}
#introduce h2 { margin-bottom: 60px; font-size: 50px; font-weight: 400; line-height: 2; letter-spacing: 0.15rem;}
#introduce h2 span { display: inline-block; border-bottom: solid 1px #000;}
#introduce p { font-size: 19px; line-height: 2.8; letter-spacing: 0.15rem;}
#introduce p span { display: block;}
#introduce.show { opacity: 1; transform: translateY(0px);}
@media (max-width: 1001px) {
	#introduce h2 { margin-bottom: 40px; font-size: 40px;}
}
@media (max-width: 901px) {
	#introduce .inner-sct{ background-size: 50% auto;}
	#introduce p { font-size: 18px; line-height: 2;}
}
@media (max-width: 769px) {
	#introduce .inner-sct{ padding: 100px 0 450px; background-position: 50% 100%; background-size: 60% auto;}
	#introduce p span { display: inline;}
}
@media (max-width: 641px) {
	#introduce h2 span { border-color: #969696;}
	#introduce .inner-sct{ padding: 100px 0 480px; background-size: 80% auto;}
	#introduce p span { display: inline;}
}
@media (max-width: 481px) {
	#introduce { margin-bottom: 80px;}
	#introduce .inner-sct{ padding: 60px 0 300px;}
	#introduce h2 { margin-bottom: 40px; font-size: 21px;}
	#introduce p { font-size: 13px;}
	#introduce p br{ display: none;}
}


#science .inner-sct{ padding-top: 50px;}
#science .stl { position: absolute; left: 0; top: 0; transition: 1.4s ease; opacity: 0;}
#science .view-ctn { display: flex; width: 80%; max-width: 850px; margin: 0 auto 50px; transition: 1.4s ease; opacity: 0;}
#science .view-ctn .image { width: 75%;}
#science .view-ctn .image .pht { position: relative; width: 620px; height: 620px; right: 0;}
#science .view-ctn .image .pht div canvas { width: 100%; height: 100%; animation: 0.8s linear 0.4s show-in forwards; opacity: 0;}
/*
#science .view-ctn .image .pht div{ position: relative; width: 0%; padding-top: 0%; margin: 0 auto; top: 50%; transform: translateY(-50%); border-radius: 50%;
 background: url(../img/image-2.png) no-repeat 50% 50%; background-size: 620px auto;
}
*/
#science .view-ctn .txt { width: 25%; padding-top: 80px;}
#science .view-ctn .txt p { font-size: 48px; letter-spacing: 0.4rem;}
#science .view-ctn .txt p em { margin: -25px 0px -15px;}
#science .bloc { width: 100%; margin: 0 auto 30px; background: #fff; box-shadow: 0 5px 20px #aaa; transition: 1.4s ease; opacity: 0; transform: translateY(30px);}
#science .bloc .bloc-ttl { position: relative; padding: 20px 0 25px; text-align: center; cursor: pointer;}
#science .bloc .bloc-ttl:after{ content: ''; display: block; width: 32px; height: 32px;
 border-top: solid 1px #fff; border-left: solid 1px #fff; border-bottom: solid 1px #989898; border-right: solid 1px #989898;
 position: absolute; right: 50px; top: 50%; margin-top: -20px; transition: 0.3s linear; transform: rotate(45deg);
}
#science .bloc .bloc-ttl.open:after{ margin-top: -10px;
 border-top: solid 1px #989898; border-left: solid 1px #989898; border-bottom: solid 1px #fff; border-right: solid 1px #fff;}

#science .bloc .bloc-ttl h3 { font-size: 40px; font-weight: 400; letter-spacing: 0.2rem;}
#science .bloc .bloc-ttl p { color: #dcdcdc; font-size: 26px; font-style: italic; line-height: 1; letter-spacing: 0.075rem;}
#science .bloc .bloc-ctn { display: none;}
#science .bloc .bloc-ctn .inner-ctn{ display: flex; padding: 20px 120px 80px;}
#science .bloc .bloc-ctn .pht{ width: 38%; padding-top: 25px;}
#science .bloc .bloc-ctn .pht figure{ position: relative; width: 85%; max-width: 245px; border: solid 1px #c9c9c9;}
#science .bloc .bloc-ctn .pht figure img{ position: relative; width: 100%; transform: translateX(-14px) translateY(-14px);}
#science .bloc .bloc-ctn .txt { width: 62%;}
#science .bloc .bloc-ctn .txt p { line-height: 2.2; letter-spacing: 0.2rem; text-align: justify;}
#science .stl.show { opacity: 1;}
#science .view-ctn.show { opacity: 1;}
/*
#science .view-ctn.show .pht div { animation: 0.8s linear 0.5s show-square forwards;}
*/
#science .bloc.show { opacity: 1; transform: translateY(0px);}
@media (max-width: 1001px) {
	#introduce .inner{ padding: 180px 0 100px;}
	#science .view-ctn { height: 500px;}
	#science .view-ctn .image .pht { width: 500px; height: 500px;}
	#science .view-ctn .image .pht div{ background-size: 500px auto;}
	#science .view-ctn .txt { padding-top: 0px;}

	#science .bloc .bloc-ttl { padding: 30px 0;}
	#science .bloc .bloc-ttl h3 { font-size: 30px;}
	#science .bloc .bloc-ttl p { font-size: 21px;}
	#science .bloc .bloc-ctn .inner-ctn{ padding: 40px 60px 60px;}
	#science .bloc .bloc-ctn .txt p { line-height: 2.0;}
}
@media (max-width: 901px) {
	#science .view-ctn { height: 400px;}
	#science .view-ctn .image .pht { width: 400px; height: 400px; margin: 0 auto;}
	#science .view-ctn .image .pht div{ background-size: 400px auto;}
	#science .bloc .bloc-ctn .inner-ctn{ padding: 40px;}
	#science .bloc .bloc-ctn .pht{ width: 32%;}
	#science .bloc .bloc-ctn .pht figure img{ transform: translateX(-10px) translateY(-10px);}
	#science .bloc .bloc-ctn .txt { width: 68%;}
}
@media (max-width: 769px) {
	#science .inner-sct{ padding-top: 100px;}
	#science .view-ctn { width: 100%;}
	#science .view-ctn .image { width: 70%;}
	#science .view-ctn .txt { width: 30%;}
	#science .view-ctn .txt p { margin: 0 auto; font-size: 32px;}	
	#science .bloc .bloc-ctn .inner-ctn{ display: block;}
	#science .bloc .bloc-ctn .pht{ width: 40%; margin: 0 auto 20px;}
	#science .bloc .bloc-ctn .txt { width: 100%;}
}
@media (max-width: 641px) {
	#science .bloc .bloc-ttl { padding: 20px 0;}
	#science .bloc .bloc-ttl h3 { font-size: 24px;}
	#science .bloc .bloc-ttl p { font-size: 16px;}
	#science .bloc .bloc-ctn .txt p { font-size: 14px; line-height:1.6;}
}
@media (max-width: 481px) {
	#science .inner-sct{ padding-top: 60px;}
	#science .view-ctn { height: 270px; margin: 0 auto 20px;}
	#science .view-ctn .txt p { font-size: 27px;}
	#science .view-ctn .txt p em { margin: -15px 0px;}
	#science .view-ctn .image .pht { width: 220px; height: 220px;}
	#science .view-ctn .image .pht div{ background-size: 220px auto;}
	#science .bloc { margin: 0 auto 20px; box-shadow: 0 5px 10px #999;}
	#science .bloc .bloc-ttl { padding: 15px 0; padding-right: 20px;}
	#science .bloc .bloc-ttl:after{ width: 16px; height: 16px; right: 20px; margin-top: -12px;}
	#science .bloc .bloc-ttl h3 { font-size: 18px;}
	#science .bloc .bloc-ttl p { font-size: 13px;}
	#science .bloc .bloc-ctn .inner-ctn{ padding: 20px 30px;}
	#science .bloc .bloc-ctn .pht { width: 70%;}
	#science .bloc .bloc-ctn .pht figure{ width: 90%; margin: 0 auto;}
	#science .bloc .bloc-ctn .txt p { font-size: 13px; line-height:1.8; letter-spacing: 0.1rem;}
}


#nav-thmub { padding: 180px 0;}
#nav-thmub ul { width: 90%; max-width: 1000px; margin: 0 auto; font-size: 0; text-align: center;}
#nav-thmub ul li { display: inline-block; width: 50%; opacity: 0; transform: translateY(30px);}
#nav-thmub ul li:nth-child(1) { transition: 1.4s ease;}
#nav-thmub ul li:nth-child(2) { transition: 1.4s ease 0.4s;}
#nav-thmub ul li span,
#nav-thmub ul li a { display: block; width: 90%; max-width: 375px; margin: 0 auto; box-shadow: 0 0 15px #aaa; background: #fff; }
#nav-thmub ul li img { width: 100%;}
#nav-thmub ul li a img{ transition: 0.3s ease;}
#nav-thmub ul li a:hover img{ opacity: 0.8;}
#nav-thmub.show ul li{ opacity: 1; transform: translateY(0px);}
@media (max-width: 641px) {
	#nav-thmub { padding: 100px 0;}
}
@media (max-width: 481px) {
	#nav-thmub { margin-bottom: 40px; padding: 60px 0;}
}


#skincare { margin: 0 auto 120px;}
#skincare .inner-sct{}
#skincare .ttl { margin-bottom: 70px; transition: 1.4s ease; opacity: 0;}
#skincare .item { display: flex; margin: 0 auto 120px; transition: 1.4s ease; opacity: 0;}
#skincare .item:nth-child(even) { flex-direction: row-reverse;}
#skincare .item:last-child{ margin: 0 auto;}
#skincare .item .item-img { width: 40%;}
#skincare .item .item-img figure { position: relative; width: 80%; max-width: 340px; margin: 0 auto; transition: 1.4s ease; transform: translateY(30px);}
#skincare .item .item-img figure img { width: 100%;}
#skincare .item:last-child .item-img figure { margin: 0; margin-left: 30px;}
#skincare .item .item-ctn { width: 60%;}
#skincare .item h3.copy { margin-bottom: 30px; font-size: 30px; font-weight: 400; letter-spacing: 0.2rem;}
#skincare .item p.discript { margin-bottom: 40px; font-size: 18px; line-height: 2; letter-spacing: 0.1rem;}
#skincare .item h3.copy sup { vertical-align: top; font-size: 16px;}
#skincare .item p.discript sup { vertical-align: top; font-size: 12px;}
#skincare .item dl { position: relative; margin-bottom: 20px;}
#skincare .item dl:after{ position: absolute; right: 0; top: 18px; content: ''; display: block; height: 1px; background: #000;}
#skincare .item dl.item1:after{ width: 52%;}
#skincare .item dl.item2:after{ width: 26%;}
#skincare .item dl.item3:after{ width: 52%;}
#skincare .item dl.item4:after{ width: 12%;}
#skincare .item dl.item5:after{ width: 54%;}
#skincare .item dl.item6:after{ width: 44%;}
#skincare .item dl dt { position: relative; display: inline-block; margin-bottom: 15px; padding: 0 20px 0 0; font-size: 24px; line-height: 1.2; z-index: 2;}
#skincare .item dl dt br { display: none;}
#skincare .item dl dt span{ display: inline-block; letter-spacing: 0.15rem; vertical-align: middle;}
#skincare .item dl dt img { display: inline-block; width: 38px; margin-left: 20px; vertical-align: middle;}
#skincare .item dl dd.price { margin-bottom: 15px; font-size: 18px; letter-spacing: 0.075rem;}
#skincare .item dl dd.price em{ font-size: 24px;}
#skincare .item dl dd.price span { display: inline-block; vertical-align: middle;}
#skincare .item dl dd.price span.icn { padding: 0 10px; border-radius: 20px; color: #fff; font-size: 15px;}
#skincare .item dl dd.price span.icn.icn-1 { background: #83cdd2;}
#skincare .item dl dd.price span.icn.icn-2 { background: #b6ca87; /* background: #a9cf52;*/}
#skincare .item dl dd.note { font-size: 12px;}
#skincare .item .howto { background: #fff; box-shadow: 0 5px 20px #eee;}
#skincare .item .howto .howto-ttl { position: relative; padding: 25px 0 20px; cursor: pointer;}
#skincare .item .howto .howto-ttl:after { content: ''; display: block; width: 17px; height: 17px;
 border-bottom: solid 1px #262626; border-right: solid 1px #262626; border-top: solid 1px #fff; border-left: solid 1px #fff;
 position: absolute; right: 30px; top: 50%; margin-top: -10px; transition: 0.3s linear; transform: rotate(45deg);
}
#skincare .item .howto .howto-ttl.open:after{ margin-top: 0px;
 border-top: solid 1px #262626; border-left: solid 1px #262626; border-bottom: solid 1px #fff; border-right: solid 1px #fff;
/* transform: rotate(585deg);*/}
#skincare .item .howto .howto-ttl h3 { color: #f2a1a8; font-size: 21px; font-weight: 400; letter-spacing: 0.2rem; text-align: center;}
#skincare .item .howto .howto-ctn { display: none; border-top: dashed 1px #e3e3e3;}
#skincare .item .howto .howto-ctn.open { display: block;}
#skincare .item .howto .inner-ctn { display: flex; justify-content: space-between; padding: 30px 40px 15px;}
#skincare .item .howto .howto-ctn .txt{ width: 64%;}
#skincare .item .howto .howto-ctn p { line-height: 2; letter-spacing: 0.15rem;}
#skincare .item .howto .howto-ctn figure{ width: 36%; max-width: 160px; margin-left: 30px;}
#skincare .item .howto .howto-ctn figure img{ width: 100%;}
#skincare .ttl.show { opacity: 1;}
#skincare .item.show{ opacity: 1;}
#skincare .item.show .item-img figure { transform: translateY(0px);}
@media (max-width: 1001px) {
	#skincare .item h3.copy { font-size: 24px;}
	#skincare .item p.discript { font-size: 16px;}
	#skincare .item dl.item1:after{ width: 48%;}
	#skincare .item dl.item2:after{ width: 20%;}
	#skincare .item dl.item3:after{ width: 46%;}
	#skincare .item dl.item4:after{ width: 8%;}
	#skincare .item dl.item6:after{ width: 38%;}
	#skincare .item dl dt { font-size: 20px;}
	#skincare .item dl dt img { width: 30px; margin-left: 10px;}
	#skincare .item dl dd.price { font-size: 15px;}
	#skincare .item dl dd.price em{ font-size: 18px;}
	#skincare .item dl dd.price span.icn { font-size: 13px;}
	#skincare .item .howto .howto-ctn .txt{ width: 75%;}
	#skincare .item .howto .howto-ctn p{ font-size: 14px;}
	#skincare .item .howto .howto-ctn figure{ width: 25%;}
}
@media (max-width: 769px) {
	#skincare .ttl { margin-bottom: 20px;}
	#skincare .item { display: block; margin: 0 auto 60px;}
	#skincare .item .item-img { width: 100%; margin: 0 auto;}
	#skincare .item .item-img figure { width: 100%;}
	#skincare .item:last-child .item-img figure { margin: 0 auto;}
	#skincare .item .item-ctn { width: 100%;}
}
@media (max-width: 641px) {
	#skincare .item .item-img { width: 60%;}
	#skincare .item dl:after{ top: 14px; background: #969696;}
	#skincare .item dl.item2:after{ top: 20px; width: 54%;}
	#skincare .item dl.item4:after{ top: 20px; width: 38%;}
	#skincare .item dl dt br { display: block;}
}
@media (max-width: 481px) {
	#skincare .item h3.copy { margin-bottom: 15px; font-size: 20px;}
	#skincare .item h3.copy span { display: block;}
	#skincare .item p.discript { margin-bottom: 25px; font-size: 12px; letter-spacing: 0.15rem;}
	#skincare .item dl.item1:after{ width: 36%;}
	#skincare .item dl.item2:after{ top: 18px; width: 40%;}
	#skincare .item dl.item3:after{ width: 35%;}
	#skincare .item dl.item4:after{ top: 18px; width: 12%;}
	#skincare .item dl.item5:after{ width: 38%;}
	#skincare .item dl.item6:after{ width: 20%;}
	#skincare .item dl dt { margin-bottom: 8px; font-size: 15px;}
	#skincare .item dl dd.price { font-size: 12px;}
	#skincare .item dl dd.price em{ font-size: 15px;}
	#skincare .item dl dd.price span.icn { font-size: 10px;}
	#skincare .item dl dd.note { font-size: 10px;}

	#skincare .item .howto .howto-ttl { padding: 10px 0;}
	#skincare .item .howto .howto-ttl:after { width: 12px; height: 12px; right: 15px;}
	#skincare .item .howto .howto-ttl:after {
	 border-top: solid 1px #fff; border-left: solid 1px #fff;border-bottom: solid 1px #989898; border-right: solid 1px #989898;
	}
	#skincare .item .howto .howto-ttl.open:after{ margin-top: -2px;
	 border-top: solid 1px #989898; border-left: solid 1px #989898; border-bottom: solid 1px #fff; border-right: solid 1px #fff;
	}
	#skincare .item .howto .howto-ttl h3 { font-size: 15px;}
	#skincare .item .howto .inner-ctn { padding: 20px; padding-left: 30px;}
	#skincare .item .howto .howto-ctn p{ font-size: 12px; line-height: 1.8;}
	#skincare .item .howto .howto-ctn figure{ margin-left: 10px;}
}


#voice { margin: 0 auto 200px;}
#voice .inner-sct{}
#voice .stl { margin-bottom: 80px; transition: 1.4s ease; opacity: 0;}
#voice .bloc { display: flex; justify-content: space-between; margin: 0 auto 50px;}
#voice .box { position: relative; width: 48%; opacity: 0; transform: translateY(20px);}
#voice .bloc .box:nth-child(odd) { transition: 1.4s ease;}
#voice .bloc .box:nth-child(even){ transition: 1.4s ease 0.6s;}
#voice .box:after{ content: ''; display: block; width: 100%; height: 100%; border: solid 1px #c9c9c9;
 position: absolute; left: 12px; top: 12px; z-index: 1;
}
#voice .box .inner-box { position: relative; padding: 40px; z-index: 2;}
#voice .bloc1 .box:nth-child(1) .inner-box { background: url(../img/bg-voice-1.jpg) no-repeat 50% 50%; background-size: 100% 100%;}
#voice .bloc1 .box:nth-child(2) .inner-box { background: url(../img/bg-voice-2.jpg) no-repeat 50% 50%; background-size: 100% 100%;}
#voice .bloc2 .box:nth-child(1) .inner-box { background: url(../img/bg-voice-3.jpg) no-repeat 50% 50%; background-size: 100% 100%;}
#voice .bloc2 .box:nth-child(2) .inner-box { background: url(../img/bg-voice-4.jpg) no-repeat 50% 50%; background-size: 100% 100%;}
#voice .box h3{ margin-bottom: 20px; font-size: 26px; font-weight: 400; line-height: 1.4; letter-spacing: 0.2rem;}
#voice .box p.name { position: relative; display: block; margin-bottom: 20px; padding-left: 40px; padding-bottom: 20px; border-bottom: dashed 1px #bfbfbf;
 font-size: 15px; line-height: 1.8;
}
#voice .box p.name span { font-size: 18px; letter-spacing: 0.15rem;}
#voice .box p.name em { font-size: 22px;}
#voice .box p.name:before{ content: ''; display: block; width: 20px; height: 1px; background: #000;
 position: absolute; left: 5px; top: 50%; margin-top: -10px;
}
#voice .box p.name br { display: none;}
#voice .box p.txt { margin-bottom: 15px; font-size: 17px; line-height: 2; letter-spacing: 0.15rem;}
#voice .box dl { padding-top: 25px; border-top: dashed 1px #bfbfbf;}
#voice .box dl dt,
#voice .box dl dd { display: inline-block; vertical-align: middle;}
#voice .box dl dt { margin-right: 8px; padding: 0 15px; border-radius: 20px; color: #fff; font-size: 15px; font-weight: 700;}
#voice .box dl.reco-item dt { background: #b6ca87;}
#voice .box dl.reco-customer dt { background: #83cdd2;}
#voice .box dl dd { color: #313131; font-size: 18px;}
#voice .box dl.reco-item dd { position: relative; padding-right: 32px; line-height: 1.25;}
#voice .box dl dd img { position: absolute; right: 0; top: 50%; margin-top: -18px; width: 32px;}
#voice .stl.show { opacity: 1;}
#voice .bloc.show .box:nth-child(odd),
#voice .bloc.show .box:nth-child(even){ opacity: 1; transform: translateY(0px);}
@media (max-width: 1001px) {
	#voice .box h3{ font-size: 21px;}
	#voice .box p.name { font-size: 13px;}
	#voice .box p.name span { font-size: 16px;}
	#voice .box p.name em { font-size: 18px;}
	#voice .box p.txt { font-size: 15px;}
	#voice .box dl dt { display: block; width: 180px; margin-bottom: 5px; text-align: center;}
}
@media (max-width: 901px) {
	#voice .bloc { display: block;}
	#voice .box { width: 100%; margin: 0 auto 60px;}
	#voice .box dl.reco-item dd { padding-right: 60px;}
	#voice .box dl dd img { top: auto; bottom: 0; width: 50px;}
}
@media (max-width: 481px) {
	#voice { margin: 0 auto 160px;}
	#voice .stl { margin-bottom: 15px;}
	#voice .box { width: 100%; margin: 0 auto 40px;}
	#voice .box:after{ top: 8px; left: 8px;}
	#voice .box .inner-box { padding: 30px 20px;}
	#voice .box h3{ margin-bottom: 10px; padding-bottom: 10px; font-size: 18px;}
	#voice .box p.name { margin-bottom: 15px; padding-bottom: 15px; font-size: 13px; line-height: 1.4;}
	#voice .box p.name span { font-size: 15px;}
	#voice .box p.name em { font-size: 16px;}
	#voice .box p.name br { display: block;}

	#voice .box p.txt { font-size: 13px;}
	#voice .box dl dt { width: 140px; padding: 0 10px; font-size: 13px;}
	#voice .box dl dd { font-size: 15px;}
	#voice .box dl.reco-item dd { min-width: 200px; padding-right: 50px;}
	#voice .box dl dd img { 	width: 40px;}
	#voice .box dl dd br { display: none;}
}


#step { /* margin: 0 auto 200px; */ margin: 0 auto 60px; transition: 1.4s ease; opacity: 0; transform: translateY(20px);}
#step .inner-sct{}
#step .stl { margin-bottom: 40px;}
#step figure { width: 100%; margin: 0 auto 60px;}
#step figure img{ width: 100%;}
#step figure img.sp { display: none;}
#step .box { width: 92%; max-width: 1000px; margin: 0 auto; padding: 60px 80px; background: #eeefef; color: #313131;}
#step .box h3 { margin-bottom: 50px; font-size: 30px; font-weight: 400; line-height: 1; letter-spacing: 0.15rem; text-align: center;}
#step .box h3 span { display: inline-block; margin: 0 30px; vertical-align: middle;}
#step .box h3:before,
#step .box h3:after { content: ''; display: inline-block; width: 1px; height: 40px; background: #000; position: relative; transform: rotate(45deg); vertical-align: middle;}
#step .box p { margin-bottom: 20px; font-size: 20px; letter-spacing: 0.15rem;}
#step .box ul { padding-top: 20px; padding-right: 200px; background: url(../img/tech-img.png) no-repeat 95% 100%;}
#step .box ul li { position: relative; margin-bottom: 25px; padding-left: 50px; font-size: 18px; letter-spacing: 0.15rem;}
#step .box ul li:last-child{ margin-bottom: 0;}
#step .box ul li span { display: block; width: 40px; position: absolute; left: 0; top: 50%; margin-top: -28px; font-size: 42px; font-style: italic; line-height: 1;}
#step.show { opacity: 1; transform: translateY(0px);}
@media (max-width: 1001px) {
	#step .box { padding: 40px 60px;}
	#step .box h3 { margin-bottom: 40px; font-size: 21px;}
	#step .box h3 span { margin: 0 20px;}
	#step .box p { font-size: 16px;}
	#step .box ul { padding-right: 180px;}
	#step .box ul li { font-size: 16px;}
	#step .box ul li span { margin-top: -20px; font-size: 30px;}
}
@media (max-width: 769px) {
	#step figure img.pc { display: none;}
	#step figure img.sp { display: block;}
	#step .box h3 { margin-bottom: 30px;}
	#step .box h3 em { display: block; padding-top: 8px;}
	#step .box p { margin-bottom: 40px;}
	#step .box ul { padding-top: 0px; padding-right: 0px; padding-bottom: 220px; background-position: 50% 100%;}
	#step .box ul li { padding-left: 40px;}
	#step .box ul li span { top: 0; margin-top: -10px;}
}
@media (max-width: 641px) {
	#step .box h3:before,
	#step .box h3:after { background: #969696;}
}
@media (max-width: 481px) {
	#step { /* margin: 0 auto 160px; */}
	#step .stl { margin-bottom: 10px;}
	#step .box { width: 100%; padding:40px 30px 30px;}
	#step .box h3 { font-size: 16px;}
	#step .box p { font-size: 14px;}
	#step .box ul { padding-bottom: 160px; background-size: auto 160px;}
	#step .box ul li { padding-left: 25px; font-size: 14px;}
	#step .box ul li span { margin-top: -5px; font-size: 24px;}
}

#salon { margin: 0 auto 220px; transition: 1.4s ease; opacity: 0; transform: translateY(20px);}
#salon .inner-sct{}
#salon .stl { margin-bottom: 30px;}
#salon p.read { margin-bottom: 40px; font-size: 19px; line-height: 2; letter-spacing: 0.2rem;}
#salon .parts { display: inline-block; margin-bottom: 40px; padding: 15px; border: solid 1px #000;}
#salon .parts p{ font-size: 18px; text-align: center;}
#salon .slideshow { width: 100%; margin: 0 auto; box-shadow: 0 0 20px #ccc; background: #fff;}
#salon .slideshow .slide { width: 100%;}
#salon .slideshow .slide img{ width: 100%;}
#salon .slideshow .slide img.sp { display: none;}
#salon.show { opacity: 1; transform: translateY(0px);}
@media (max-width: 1001px) {
	#salon .slideshow { width: 85%;}
}
@media (max-width: 901px) {
	#salon p.read { margin-bottom: 30px; font-size: 16px;}
	#salon .parts p{ font-size: 15px;}
	#salon .slideshow { width: 100%;}
}
@media (max-width: 769px) {
	#salon .slideshow .slide img.pc { display: none;}
	#salon .slideshow .slide img.sp { display: block;}
}
@media (max-width: 641px) {
	#salon .parts { border-color: #969696;}
}
@media (max-width: 481px) {
	#salon { margin: 0 auto 160px;}
	#salon .stl { margin-bottom: 10px;}
	#salon p.read { margin-bottom: 15px; font-size: 14px; line-height: 1.8;}
	#salon .parts { padding: 8px 12px;}
	#salon .parts p{ font-size: 13px;}
}

#insta { margin: 0 auto 180px; transition: 1.4s ease; opacity: 0; transform: translateY(20px);}
#insta .inner-sct{}
#insta h2 { text-align: center;}
#insta .btn a { font-size: 26px;}
#insta.show { opacity: 1; transform: translateY(0px);}
@media (max-width: 481px) {
	#insta { margin: 0 auto 80px;}
	#insta .btn a { font-size: 16px;}
}

#about { transition: 1.4s ease; opacity: 0; transform: translateY(20px);}
#about .inner-sct{ padding-bottom: 200px;}
#about h2 { margin-bottom: 50px; font-size: 44px; font-weight: 400; text-align: center;}
#about figure{ width: 90%; max-width: 750px; margin: 0 auto 50px;}
#about figure img{ width: 100%;}
#about p { margin: 0 auto 70px; font-size: 18px; line-height: 2.2; letter-spacing: 0.2rem; text-align: center;}
#about p span { display: block;}
#about .btn a { font-size: 22px;}
#about.show { opacity: 1; transform: translateY(0px);}
@media (max-width: 641px) {
	#about h2 { margin-bottom: 20px; font-size: 30px;}
}
@media (max-width: 481px) {
	#about .inner-sct{ padding-bottom: 150px;}
	#about h2 { margin-bottom: 20px; font-size: 24px;}
	#about figure{ margin: 0 auto 20px;}
	#about p { margin: 0 auto 30px; font-size: 13px; text-align: left;}
	#about p span { display: inline;}
	#about .btn a { font-size: 15px;}
}


.pagetop { position: fixed; left: 60px; bottom: 50px; z-index: 99;}
.pagetop a{ position: relative; display: block; color: #000; text-decoration: none;}
.pagetop a:before,
.pagetop a:after { content: ''; display: block; width: 1px; background: #000;}
.pagetop a:before{ height: 70px; margin: 0 auto 10px;}
.pagetop a:after { position: absolute; top: 4px; left: 50%; height: 25px; transform: rotate(45deg) translateX(-12px); transform-origin: center center;}
.pagetop a span { font-size: 18px; line-height: 1;}
.pagetop a:hover{ opacity: 0.6;}
@media (max-width: 1001px) {
	.pagetop { left: 30px;}
}
@media (max-width: 481px) {
	.pagetop { left: 20px; bottom: 20px;}
	.pagetop a { padding-bottom: 35px;}
	.pagetop a:before,
	.pagetop a:after { background: #969696;}
	.pagetop a:before{ height: 40px; margin: 0 auto;}
	.pagetop a:after { height: 15px; transform: rotate(45deg) translateX(-8px);}
	.pagetop a span { position: absolute; display: block; width: 35px; bottom: 0; left: 50%;
	 transform: translateX(-55%) rotate(270deg); transform-origin: center center; text-align: center;
	}
}


#ft {}
#ft .copyright { padding: 30px 0;}
#ft .copyright ul { margin-bottom: 30px; font-size: 0; text-align: center;}
#ft .copyright ul li { display: inline-block; margin: 0 20px; font-size: 15px;}
#ft .copyright ul li a { position: relative; padding-left: 20px; color: #000; text-decoration: none;}
#ft .copyright ul li a:before { content: ''; display: block; width: 6px; height: 6px;
 border-top: solid 1px #000; border-right: solid 1px #000;
 position: absolute; left: 0; top: 50%; transform: translateY(-3px) rotate(45deg);
}
#ft .copyright p { text-align: center;}
#ft .copyright p.ft-logo { margin-bottom: 40px;}
#ft .copyright p small { font-size: 12px;}
#ft .copyright p.ft-logo a{ transition: 0.3s linear;}
#ft .copyright p.ft-logo a:hover{ opacity: 0.6;}

#ft .inner-ft ul li a:hover,
#ft .copyright ul li a:hover{ text-decoration: underline;}
@media (max-width: 769px) {
	#ft .copyright ul { display: none;}
	#ft .copyright p.ft-logo { margin-bottom: 20px;}
}
@media (max-width: 481px) {
	#ft .copyright { padding: 20px 0;}
	#ft .copyright p.ft-logo { margin-bottom: 10px;}
	#ft .copyright p.ft-logo a { display: block; width: 40%; margin: 0 auto;}
	#ft .copyright p.ft-logo a img{ width: 100%;}
	#ft .copyright p small { font-size: 10px;}
}