@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;600&display=swap');

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.saleli {
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0px;
	width:50%;
	float:left;
	padding-left: 2%;
	padding-right: 2%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.saleli:nth-child(odd){
	padding-left: 0px;
}

.saleli:nth-child(even){
	padding-right: 0px;
}

.saleli img {
	width: 100%;
}

.saleliin002 {
	width:50%;
	float:left;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.saleli002 {
    position: relative;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
}





@media screen and (min-width: 479px) {
/*=============================================================
	common
=============================================================*/

body{
	margin:0;
	padding:0;
	text-align:center;
	font-size:1.5rem;
	line-height:1.5em;
	font-family: "Noto Serif JP","ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#666666;
	height:100%;
	-webkit-text-size-adjust: 100%;
	position:relative;
}
a{color:#0085B2; text-decoration:underline; transition: all 0.2s ease 0s;}
a:hover{color:#E6423D; text-decoration:none;}

/*-------- clearfix ---------*/
.clearfix { zoom:1;}
.clearfix:after{ content: ""; display: block; clear: both;}
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}

/*---------- margin ----------*/
.mt-none{ margin-top:0px !important}
.mt-05{ margin-top:5px !important}
.mt-10{ margin-top:10px !important}
.mt-20{ margin-top:20px !important}
.mt-30{ margin-top:30px !important}
.mt-40{ margin-top:40px !important}
.mt-50{ margin-top:50px !important}
.mt-60{ margin-top:60px !important}
.mt-70{ margin-top:70px !important}
.mt-80{ margin-top:80px !important}
.mt-90{ margin-top:90px !important}
.mt-100{ margin-top:100px !important}

/*---------- align ----------*/
.align-left{ text-align: left;}
.align-right{ text-align: right;}
.align-center{ text-align: center;}

/*---------- float ----------*/
.float-left{ float:left;}
.float-right{ float:right;}

/*---------- image ----------*/
.img-left{ float:left; margin:0 20px 20px 0;}
.img-right{ float:right; margin:0 0 20px 20px;}

/*----- clearfix -----*/
.clearfix { zoom:1;}
.clearfix:after{ content: ""; display: block; clear: both;}
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}

/*----- responsive -----*/
.sp { display: none; }

/*=============================================================
	layout
=============================================================*/
#wrapper{ width:100%; min-width:1000px; padding-top:185px; margin: 0px auto; overflow:hidden; position:relative;}

/* Header
-------------------------------------------------------------*/
#header{ width:100%; min-width:1000px; height:185px; background:#FFF; position: fixed; top:0px; left:0px; z-index:100; box-shadow: 0px 0px 15px rgba(198,194,182,0.25);}
#header:before{ content:""; width:100%; height:3px; background-color: #63abd4; position:absolute; top:0px; left:0px;}
#header .inner{ width:1000px; height:116px; margin: 0px auto; position:relative; z-index:101;}
#header .inner h1.slogan{ font-size:1.1rem; line-height:30px; color:#DF667E; position:absolute; top:0px; right:0px;}
#header .inner h2.logo{ letter-spacing:-0.4em; width:363px; height:64px; position:absolute; top:40px; left:0px;}
#header .inner h2.logo img{ width:100%; height:auto;}
#header .inner h2.logo span{ width:130px; display:inline-block; vertical-align:middle; letter-spacing:0;}
#header .inner h2.logo em{ width:213px; display:inline-block; vertical-align:middle; letter-spacing:0; margin-left:20px;}
#header .inner ul{ position:absolute; top:47px; right:0px; letter-spacing:-0.4em;}
#header .inner ul li{ display:inline-block; vertical-align: middle; letter-spacing:0;}
#header .inner ul li:nth-child(2){ margin-left:23px;}

#toggle{ display: none;}

ul#navi{ width:1000px; margin: 0px auto; letter-spacing:-0.4em;}
ul#navi > li{ display:inline-block; vertical-align:top; letter-spacing:0; position: relative; margin: 0; cursor:pointer;}
ul.child{ display: none; position: absolute; padding: 0;}
ul.child li{ display:block; border: solid 1px #63abd4; border-top: none; width:166px;}
ul.child li a{ display:block; text-align:center; background:#52a0cc; transition: all 0.2s ease 0s; color:rgba(255,255,255,1); text-decoration: none; padding: 1.0em 0; line-height:1.1;}
ul.child li a:hover{ background:#95CFDC; color:rgba(255,255,255,0.7);}

/* Promo
-------------------------------------------------------------*/
#promo{ width:100%; min-width:1000px; background-color: #8BCAD3; position:relative; padding:50px 0;}
#promo h2{ font-family:"Noto Serif JP","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "MS PMincho", serif; font-size:3.5rem; width:1000px; margin: 0px auto; text-align:center; color:#FFF;}
#promo h2 span{ display:block; font-size:1.5rem; line-height:1.1; text-align:center; color: rgba(255,255,255,0.5); margin-top:0.75em;}

/* Breadcrumb
-------------------------------------------------------------*/
.breadcrumb{ width:1000px; margin: 0px auto;}
.breadcrumb ul{ letter-spacing:-0.4em; padding: 15px 0;}
.breadcrumb ul li{ display:inline-block; vertical-align: middle; letter-spacing:0; font-size:1.1rem; line-height:1.1; color:rgba(70,70,55,0.6);}
.breadcrumb ul li:after{ font: normal normal normal 14px/1 FontAwesome; content: "\f105";  padding: 0 0.5em;}
.breadcrumb ul li:last-child:after{ content:""; padding:0px;}
.breadcrumb ul li a{ color:rgba(70,70,55,1); text-decoration: none; line-height:1.1;}
.breadcrumb ul li a:hover{ color:rgba(70,70,55,0.6);}

/* Container
-------------------------------------------------------------*/
#container{ width:100%; min-width:750px; margin: 0px auto;}
.contents{ width:750px; margin: 75px auto 0px auto;}
/*#container p{ margin-top:2.0em;}*/

/* Contact
-------------------------------------------------------------*/
.contact{ width:750px; height:164px; margin: 75px auto 0; background:url(../../image/common/contact_bg.png) no-repeat center top; background-size:contain; position: relative;}
.contact span{ position:absolute; right:180px; bottom:20px;}

/* Footer
-------------------------------------------------------------*/
#footer{ width:1000px; margin: 60px auto 0px; border-top: double 3px rgba(206,206,191,0.5);}
#footer ul{ letter-spacing:-0.4em; margin-top:30px;}
#footer ul li{ width:14.28%; display:inline-block; vertical-align:top; letter-spacing:0;}
#footer ul li a{display:block;color:#B25265;font-size:1.1rem;line-height:1.1;text-align:center;color: #5FABDB;background: #8DD1D940;padding: 0.75em 0;text-decoration: none;margin-right:2px;transition: all 0.2s ease 0s;}
#footer ul li a:hover{ background:#5FABDB; color:#FFF;}
#footer ul li:last-child a{ margin-right:0px;}
#footer p.copyright{ text-align:center; font-size:1.1rem; line-height:1.1; padding: 0.5em 0; margin-top:20px;}

/*=============================================================
	contents
=============================================================*/

/* heading */
h3.heading{
  position: relative;
  height:55px;
  padding: 0.1em 0.5em;
  background: -webkit-linear-gradient(to right, #63abd4, transparent);
  background: linear-gradient(to right, #63abd4, transparent);
  color: #545454;
}
h3.heading span{ font-size:2.7rem; line-height:1.1; color:#FFF; font-family:"Noto Serif JP","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "MS PMincho", serif; position:absolute; top:50%; left:0.75em; transform:translateY(-50%);}
h4.heading{ color:#B25265; font-size:2.3rem; line-height:1.0; font-family:"Noto Serif JP","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "MS PMincho", serif; border-bottom: solid 1px rgba(178,82,101,0.3); padding:0.6em 0 0.6em 1.5em; position:relative;}
h4.heading:before{ content: "\f004"; font-family: FontAwesome; opacity:0.5; position:absolute; top:50%; left:0px; transform:translateY(-50%); color:#E1677E;}

h5.heading{
  position: relative;
  padding: .5em .75em;
  margin-bottom: 30px;
  background-color: #D5DAE1;
  height: 55px;
  border-radius: 20px;
}
h5.heading span{
  position:absolute;
  font-size:2.5rem;
  line-height:1.1;
  color:#666;
  font-family:"Noto Serif JP","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "MS PMincho", serif;
  top:50%;
  display: inline-block;
  width: 100%;
  text-align: center;
  transform:translateY(-50%);
}
h5.heading span br{
	display: none;
}
/* column */
.column02{ width:1000px; margin: 0px auto; letter-spacing:-0.4em;}
.column02 .inner{ width:47.5%; display:inline-block; vertical-align:top; letter-spacing:0; margin: 1.5em 5% 0 0;}
.column02 .inner:nth-child(2n){ margin-right:0px;}

.column03{ width:1000px; margin: 0px auto; letter-spacing:-0.4em;}
.column03 .inner{ width:32%; display:inline-block; vertical-align:top; letter-spacing:0; margin: 1.5em 2% 0 0;}
.column03 .inner:nth-child(3n){ margin-right:0px;}

/* link button */
.linkBtn{ text-align:center; margin-top:2.5em !important;}
.linkBtn a{ display:inline-block; border: solid 2px #E1677E; padding: 1.0em 3.0em; border-radius:5px; color:#E1677E; text-decoration: none; font-size:1.7rem; line-height:1.1; background:#FFF; font-weight:600;}
.linkBtn a:hover{ border-color: rgba(255,255,255,0.3); background:#E1677E; color:#FFF;}
.linkBtn a span{ display:inline-block; padding: 0 1.5em; position:relative;}
.linkBtn a span:after{ content: "\f105"; font-family: FontAwesome; opacity:0.5; position:absolute; top:50%; right:0px; transform:translateY(-50%); font-weight:normal;}

/* image resize */
.imgFit img{ width:100%; height:auto;}
.imgBdr{ border: solid 5px #FFF; box-shadow: 0px 3px 0px rgba(206,206,191,0.5);}

/* align */
.alignMiddle .inner{ vertical-align:middle;}

/* teaser
-------------------------------------------------------------*/

/* トップページ
-------------------------------------------------------------*/
#homePromo{ width:100%; min-width:1000px; margin: 0px auto; background:url(../../image/home/promo_bg.png) no-repeat center top; position: relative;}
#homePromo h2{ width:1000px; margin: 0px auto; padding-bottom:150px;}
#homePromo ul{ text-align: center; width: 1000px; margin: 0px auto; position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); letter-spacing: -0.4em;}
#homePromo ul li{ display: inline-block; vertical-align: top; letter-spacing: 0; margin: 0.5em 40px 0 0;}
#homePromo ul li:nth-child(4),
#homePromo ul li:nth-child(8){ margin-right: 0px;}

.homeBlock01{ width:100%; min-width:1000px; margin: 0px auto; position:relative; padding-bottom: 61px; z-index:10;}
.homeBlock01:before{ content:""; width:11px; height:11px; background:url(../../image/home/bottom_icon.png); background-size:contain; position:absolute; bottom:0px; left:50%; transform:translateX(-50%);}
.homeBlock01:after{ content:""; width:100%; height:11px; background:url(../../image/home/bottom_border.png) repeat-x center top; background-size:contain; position:absolute; bottom:0px; left:0px;}
.homeBlock01 .inner{ width:1000px; margin: 0px auto;}
.homeBlock01 .inner h2,
.homeBlock01 .inner h3{ text-align:center;}
/*
.homeBlock01 .inner > ul{ letter-spacing:-0.4em; margin-top:1.5em;}

.homeBlock01 .inner ul > li:nth-child(2){ margin-left:4%;}
.homeBlock01 .inner ul li ul{ letter-spacing:-0.4em;}
.homeBlock01 .inner ul li ul li:first-child{ width:100%;}
.homeBlock01 .inner ul li ul li{ width:50%; display:inline-block; vertical-align:top; letter-spacing:0; margin:0px;}
.homeBlock01 .inner ul li ul li:nth-child(2){ margin:0px;}

.homeBlock02{ width:1000px; margin: 0px auto; padding: 40px 0 30px;}
.homeBlock02 ul{ background:rgba(192,188,177,0.25); border-radius:10px; border: solid 1px rgba(192,188,177,0.25); padding: 4px 14px 14px 4px; letter-spacing:-0.4em;}
.homeBlock02 ul li{ display:inline-block; vertical-align:top; letter-spacing:0; margin: 10px 0 0 10px;}
*/
.homeBlock03{ width:600px; margin: 0px auto; padding-top:30px;}

#fv {
  margin: auto 0;
  text-align: center;
  padding-bottom: 3%;
}
#fv-sp {
  display: none;
}
.home-menu-btn1 {
  position: relative;
  display: inline-block;
  padding: 0.75em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #5FABDB;
  border-radius: 15px;
  transition: .4s;
  width: 600px;
  height: 100px;
  text-align: center;
}
.home-menu-btn1:hover {
  background: #daf1ff;
  color: #666;
}
.home-menu-btn1 span{
	font-size: 1.75em;
	line-height: 1.5em;
}
.home-menu-btn1 span .mini{
	font-size: 0.8em;
}
.home-menu-btn1 p{
  width: 100%;
  line-height: 1.2em;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}

.home-menu-btn2-box{width: 610px;margin: 0px auto;}
.home-menu-btn2-box2{padding: 0;/* margin: 10px; */list-style: none;text-align: center;}
.home-menu-btn2-box2 >  li {display:  inline-block;vertical-align:  middle;}
li.home-menu-btn2 a{
  position: relative;
  display: inline-block;
  padding: 0.75em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #8DD1D9;
  border-radius: 15px;
  transition: .4s;
  width: 290px;
  height: 92.5px;
  text-align: center;
  margin: 0px 5px 0px;
}
.home-menu-btn2 a:hover {
  background: #daf1ff;
  color: #666;
}
.home-menu-btn2 a > p{
	width: 100%;
	font-size: 1.75em;
	line-height: 1.2em;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
}
.home-menu-btn2 p > .red{
	color: #F04671;
}

li.home-menu-btn3 a{
  position: relative;
  display: inline-block;
  padding: 0.75em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #9EB2BB;
  border-radius: 15px;
  transition: .4s;
  width: 290px;
  height: 92.5px;
  text-align: center;
  margin: 0px 5px 0px;
}
.home-menu-btn3 a:hover {
  background: #daf1ff;
  color: #666;
}
.home-menu-btn3 a > p{
	width: 100%;
	font-size: 1.75em;
	line-height: 1.2em;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
}
.home-menu-btn3 p > .red{
	color: #F04671;
}

.home-menu-btn4 {
  position: relative;
  display: inline-block;
  padding: 0.75em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #83c3dc;
  border-radius: 15px;
  transition: .4s;
  width: 600px;
  height: 100px;
  text-align: center;
}
.home-menu-btn4:hover {
  background: #daf1ff;
  color: #666;
}
.home-menu-btn4 p{
	width: 100%;
	font-size: 1.75em;
	line-height: 1.2em;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
}
.home-menu-btn4 p > .red{
	font-size: 1em;
	color: #F04671;
}

.home-menu-btn5 {
  position: relative;
  display: inline-block;
  padding: 0.75em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #8DD1D9;
  border-radius: 15px;
  transition: .4s;
  width: 600px;
  height: 100px;
  text-align: center;
}
.home-menu-btn5:hover {
  background: #daf1ff;
  color: #666;
}
.home-menu-btn5 span{
  font-size: 1.75em;
  line-height: 1.5em;
}
.home-menu-btn5 span .mini{
  font-size: 0.8em;
}
.home-menu-btn5 p{
  width: 100%;
  font-size: 1.75em;
  line-height: 1.2em;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}
.home-menu-btn5 p > .red{
  font-size: 1em;
  color: #F04671;
}

.topimg{
  background-image: url("../../image/home/top.png");
  height: 500px;
  position: relative;
}
.introbtn {
  position: absolute;
  top: 88%;
  left: 66%;
  display: inline-block;
  padding: 0.5em 2em;
  text-decoration: none;
  color: #666666;
  font-size: 1.25em;
  border: solid 2px #666666;
  background-color: #ffffff61;
  border-radius: 3px;
  transition: .4s;
}

.introbtn:hover {
  background: #ffffffb8;
  color: #888888;
}

/* サラフェについて
-------------------------------------------------------------*/
.about{ width:1000px; height:190px; position:relative; background:url(../../image/about/image_06.png) no-repeat center top; background-size:contain;}
.about span{ position:absolute; right:183px; bottom:29px;}

/* 使い方講座
-------------------------------------------------------------*/
.contents .column{ letter-spacing:-0.4em; margin-top:1.0em;}
.contents .column .inner{ display:inline-block; vertical-align:top; letter-spacing:0;}
.contents .column .inner:nth-child(1){ width:570px; border: solid 5px #FFF;}
.contents .column .inner:nth-child(2){ width:390px; margin-left:40px;}
.contents .column .inner:nth-child(2) ul{}
.contents .column .inner:nth-child(2) ul li{ margin-bottom:0.75em;}
.contents .column .inner:nth-child(2) ul li:last-child{ margin-bottom:0px;}
.contents .column .inner:nth-child(2) ul li span{ color:#F04671; position:relative; display:block;}
.contents .column .inner:nth-child(2) ul li span:after{ content:""; width:85%; height:1px; border-bottom: dotted 1px rgba(225,103,126,0.2); position:absolute; top:50%; right:0px;}

h3.heading.howto01,
h3.heading.howto02,
h3.heading.howto03{ position:relative;}
h3.heading.howto01:before,
h3.heading.howto02:before,
h3.heading.howto03:before{ content:""; width:97px; height:91px; background-size:contain; position:absolute; top:50%; left:0px; transform:translateY(-50%);}
/**h3.heading.howto01:before{ background: url(../../image/howto/icon_01.png);}**/
h3.heading.howto02:before{ background: url(../../image/howto/icon_02.png);}
h3.heading.howto03:before{ background: url(../../image/howto/icon_03.png);}
h3.heading.howto01 span,
h3.heading.howto02 span,
/**h3.heading.howto03 span{ left:100px;}**/

.useList{ letter-spacing:-0.4em;}
.useList li{ width:19%; display:inline-block; vertical-align:top; letter-spacing:0; margin: 1.5em 1.25% 0 0; border: solid 3px #FFF; box-shadow: 0px 3px 0px rgba(206,206,191,0.5);}
.useList li:nth-child(5n){ margin-right:0px;}
.useList li img{ width:100%; height:auto;}

div.howtosalafe{
	text-align: center;
}
div.howtosalafe img{
	max-width: 750px;
	height: auto;
	margin-bottom: 30px;
}

.ct{
	text-align: center;
	margin-top: 1.5rem;
	margin-bottom: 2.5rem;
}
.ct2{
	text-align: center;
	font-size: 24px;
	font-weight: 100;
	color: #9b9ea2;
}
.howto-menu-btn {
  position: relative;
  display: inline-block;
  padding: 1em 0.5em;
  text-decoration: none;
  color: #666;
  background: #D5DAE1;
  border-radius: 20px;
  transition: .4s;
  width: 600px;
  text-align: center;
}
.howto-menu-btn:hover {
  background: #666;
  color: #D5DAE1;
}
a.howto-menu-btn span{
	font-size:2.5rem;
}
a.howto-menu-btn span br{
	display: none;
}

a.howto-menu-btn.ic1,
a.howto-menu-btn.ic2,
a.howto-menu-btn.ic3,
a.howto-menu-btn.ic4,
a.howto-menu-btn.ic5,
a.howto-menu-btn.ic6,
a.howto-menu-btn.ic7,
a.howto-menu-btn.ic8,
a.howto-menu-btn.ic9,
a.howto-menu-btn.ic10{ position:relative;}
a.howto-menu-btn.ic1:before,
a.howto-menu-btn.ic2:before,
a.howto-menu-btn.ic3:before,
a.howto-menu-btn.ic4:before,
a.howto-menu-btn.ic5:before,
a.howto-menu-btn.ic6:before,
a.howto-menu-btn.ic7:before,
a.howto-menu-btn.ic9:before{ content:""; width:97px; height:91px; background-size:contain; position:absolute; top:50%; left:5%; transform:translateY(-50%);}
a.howto-menu-btn.ic8:before{ content:""; width:97px; height:91px; background-size:contain; position:absolute; top:50%; left:2%; transform:translateY(-50%);}
a.howto-menu-btn.ic10:before{ content:""; width:97px; height:91px; background-size:contain; position:absolute; top:50%; left:5%; transform:translateY(-50%);}
a.howto-menu-btn.ic1:before{ background: url(../../image/howto/ic1.png); background-repeat: no-repeat;}
a.howto-menu-btn.ic2:before{ background: url(../../image/howto/ic2.png); background-repeat: no-repeat;}
a.howto-menu-btn.ic3:before{ background: url(../../image/howto/ic3.png); background-repeat: no-repeat;}
a.howto-menu-btn.ic4:before{ background: url(../../image/howto/ic4.png); background-repeat: no-repeat;}
a.howto-menu-btn.ic5:before{ background: url(../../image/howto/ic5.png); background-repeat: no-repeat;}
a.howto-menu-btn.ic6:before{ background: url(../../image/howto/ic6.png); background-repeat: no-repeat;}
a.howto-menu-btn.ic7:before{ background: url(../../image/howto/ic7.png); background-repeat: no-repeat;}
a.howto-menu-btn.ic8:before{ background: url(../../image/howto/ic8.png); background-repeat: no-repeat;}
a.howto-menu-btn.ic9:before{ background: url(../../image/howto/ic9.png); background-repeat: no-repeat;}
a.howto-menu-btn.ic10:before{ background: url(../../image/howto/ic10.png); background-repeat: no-repeat;}

/* 選ばれる理由
-------------------------------------------------------------*/
p.lead{margin-top: 0px !important;text-align:center;color: #63abd4;font-size:1.7rem;line-height:1.3;text-align:center;border: dotted 1px #8dd1d9a1;background:#FFF;padding:1.0em;border-radius:10px;}
.anchorLink{ background:url(../../image/reason/illust.png) no-repeat center top; height:450px; position:relative; margin-top:1.5em;}
.anchorLink li{ width:40%; position:absolute;}
.anchorLink li:nth-child(1){ top:10%; left :5%;}
.anchorLink li:nth-child(2){ top:15%; right:5%;}
.anchorLink li:nth-child(3){ top:40%; left :0px;}
.anchorLink li:nth-child(4){ top:50%; right:0px;}
.anchorLink li:nth-child(5){ top:70%; left :20%;}
.anchorLink li a{ display:block; border: solid 3px #FEE4E8; background:#FFF; color:#E1677E; font-size:1.7rem; font-weight:600; line-height:1.1; text-decoration: none; padding: 1.0em 0; text-align:center; border-radius:5px; position:relative;}
.anchorLink li a:after{ content:""; width:40px; height:17px; background:url(../../image/reason/chat.png); background-size:contain; position:absolute; bottom:-17px; left:50%; transform:translateX(-50%);}
#anc01,
#anc02,
#anc03,
#anc04,
#anc05{ margin-top:-185px; padding-top:185px;}
h4.reasonHeading{ color:#E1677E; font-size:1.7rem; border-bottom: solid 1px rgba(206,206,191,0.5); padding: 0.75em 0; font-weight:600;}
h4.reasonHeading span{ display:block; margin-bottom:0.25em;}
h4.reasonHeading span em{ font-size:1.1rem; line-height:1.1; color:#FFF; background:#E1677E; padding: 0.25em 1.0em; border-radius:30px; display:inline-block;}
.reasonColumn .inner:nth-child(2){ width:66%; margin-right:0px;}
.arrow .inner{ background:#FFF; position:relative;}
.arrow .inner:first-child:after{ content: "\f0da"; font-family: FontAwesome; position:absolute; top:50%; right:-0.9em; transform:translateY(-50%); font-size:4.1rem; color:#E1677E;}
.result .inner{ background:#FFF; height:280px; border-radius:5px; box-shadow: 0px 3px 0px rgba(206,206,191,0.5);}
.result .inner h4{ height: 90px; background:#E1677E; color:#FFF; border-radius:5px 5px 0 0; padding: 1.0em 0; text-align:center; font-weight:600; position: relative;}
.result .inner h4 span{ display:block; font-size:1.1rem; line-height:1.1; text-align:center; opacity:0.6; width: 100%; position: absolute; top: 40%; left: 50%; transform: translateY(-100%) translateX(-50%);}
.result .inner h4 em{ font-style: normal; line-height: 1.1; position: absolute; top: 50%; left: 50%; transform: translateY(-25%) translateX(-50%);}
.result .inner ul{ padding: 0.5em 1.0em 1.0em 1.0em;}
.result .inner ul li{ padding: 0.5em 0; border-bottom: dotted 1px #EEE;}
.text{ border: dotted 1px rgba(225,103,126,0.5); background:#FFF; padding:1.0em; text-align:center; margin-top:1.5em; border-radius:10px;}
.text p{ margin-top: 0px !important; text-align:center; font-size:2.1rem; line-height:1.3;}
.text p strong{ font-weight:normal; font-size:2.5rem; color:#E1677E;}
.period .inner:nth-child(2){}
.period .inner:nth-child(2) img{ width:100%; height:auto;}
.checkList{ margin-top:0.5em;}
.checkList li{ padding: 0.75em 0 0.75em 1.5em; border-bottom: dotted 1px rgba(206,206,191,1.0); font-weight:600; position:relative;}
.checkList li:before{content:"\f14a"; font-family: FontAwesome; position:absolute; top:50%; left:0px; transform:translateY(-50%); color:#E1677E; font-weight:normal;}
ul.result01,
ul.result02,
ul.result03{ position: relative;}
ul.result01:after{ content: ""; width: 102px; height: 165px; background: url(../../image/reason/image_08.png); background-size: contain; position: absolute; top: 5px; right: 10px;}
ul.result02:after{ content: ""; width: 79px; height: 101px; background: url(../../image/reason/image_09.png); background-size: contain; position: absolute; top: 5px; right: 10px;}
ul.result03:after{ content: ""; width: 69px; height: 102px; background: url(../../image/reason/image_10.png); background-size: contain; position: absolute; top: 5px; right: 10px;}

/* お客様の声
-------------------------------------------------------------*/
.voice{ letter-spacing:-0.4em;}
.voice .inner{ width:47.5%; display:inline-block; vertical-align:top; letter-spacing:0; background:#FFF; padding:0.5em; border-radius:5px; box-shadow: 0px 3px 0px rgba(206,206,191,0.5); margin: 1.5em 5% 0 0;}
.voice .inner:nth-child(2n){ margin-right:0px;}
.voice .inner h4{ background:#FEE4E8; color:#E1677E; font-size:1.9rem; line-height:1.1; border-radius:5px 5px 0 0; padding: 0.75em;}
.voice .inner .name{ border-bottom: dotted 1px #E4E4E4; margin-top: 0px !important; margin-bottom:1.5em; padding: 1.0em 1.25em; font-size:1.1rem; line-height:1.1;}
.voice .inner p{ margin-top:0px !important; padding: 0 1.0em 1.0em 1.0em; position: relative;}
.voice .inner p span{ position: absolute; top: 50%; right: 0px; transform: translateY(-50%);}

/* カスタマーサポート
-------------------------------------------------------------*/
.contents.bg{ background: url(../../image/support/bg.png) no-repeat center top;}

.support{ position:relative;}
.support .comment{ padding: 1.5em; background:#FFF; box-shadow: 0px 3px 0px rgba(206,206,191,0.5); border-radius:10px; width:60%;}
.support .comment p{ margin-top:0px !important; font-size:1.7rem; line-height:1.5; font-weight:600;}
.support .comment.question:before{ content: ""; width: 40px; height: 40px; background: url(../../image/support/icon_q.png); background-size: contain; position: absolute; top: -20px; left: -20px;}
.support .comment.answer:before{ content: ""; width: 40px; height: 40px; background: url(../../image/support/icon_a.png); background-size: contain; position: absolute; top: -20px; left: -20px;}
.support.illust01{}
.support.illust02{ margin-top:-75px;}
.support.illust03{ margin-top:-75px;}
.support.illust04{ margin-top:-75px;}
.support.illust05{ margin-top:-75px;}
.support.illust01 .illust{ float:left;}
.support.illust02 .illust2{ float:right;}
.support.illust03 .illust{ float:left;}
.support.illust04 .illust{ float:right;}
.support.illust05 .illust{ float:left;}
.support.illust01 .comment{ position:absolute; top:50%; transform:translateY(-50%); right:0px;}
.support.illust02 .comment{ position:absolute; top:50%; transform:translateY(-50%); left :0px;}
.support.illust03 .comment{ position:absolute; top:50%; transform:translateY(-50%); right:0px;}
.support.illust04 .comment{ position:absolute; top:50%; transform:translateY(-50%); left :0px;}
.support.illust05 .comment{ position:absolute; top:50%; transform:translateY(-50%); right:0px;}
.support .illust{ width:30%;}
.support .illust2{ width:40%;}
.support .illust2 img,
.support .illust img{ width:100%; height:auto;}

.interview{ background:#FFF; padding: 1.5em 1.5em 2.5em 1.5em; border-radius:10px; box-shadow: 0px 3px 0px rgba(206,206,191,0.5); margin-top:1.5em; position:relative;}
.interview:after{ content:""; width:142px; height:142px; background:url(../../image/support/label.png); position:absolute; top:0px; right:0px;}
.interview h4{ color:#E1677E; font-size:2.7rem; line-height:1.1; padding: 0.5em 0 0.75em 0; border-bottom: dotted 1px #E4E4E4;}
.interview .name{ margin-top: 0px !important; padding: 0.75em 0;}
.interview ul{ letter-spacing:-0.4em;}
.interview ul li{ width:60%; display:inline-block; vertical-align:top; letter-spacing:0;}
.interview ul li:first-child{ width:35%; margin-right:5%; border: solid 5px #FFF; box-shadow: 0px 3px 5px rgba(206,206,191,0.5);}
.interview ul li:first-child img{ width:100%; height:auto;}
.interview h5{ font-size:2.1rem; line-height:1.3; color:#E1677E; margin-top:30px;}

/* よくあるご質問
-------------------------------------------------------------*/
.faq{ margin-top:1.0em;}
.faq dt{ border-bottom: dotted 1px rgba(206,206,191,0.75); padding: 0.75em 0 0.75em 1.75em; font-size:1.7rem; line-height:1.1; font-family:"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "MS PMincho", serif; cursor: pointer; position:relative; color:#3b82ab;}
.faq dt:before{ content:""; width:20px; height:20px; background:url(../../image/faq/icon_01.png); background-size:contain; position:absolute; top:50%; left:0px; transform:translateY(-50%);}
.faq dd{ display:none; padding: 1.0em 0 1.0em 1.75em; position:relative;}
.faq dd:before{ content:""; width:20px; height:20px; background:url(../../image/faq/icon_02.png); background-size:contain; position:absolute; top:1.0em; left:0px;}

/* withCOSMEのご紹介
-------------------------------------------------------------*/
.introduction{ padding:1.5em; background:#FFF; border-radius:10px; box-shadow: 0px 3px 0px rgba(206,206,191,0.5);}
.introduction h3{ font-size:3.5rem; line-height:1.1; text-align:center; font-family:"Noto Serif JP","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "MS PMincho", serif; letter-spacing:0.5em; color:#E1677E;}
.introduction h3 span{ font-size:1.5rem; line-height:1.1; display:block; text-align:center; margin-top:0.5em; color:rgba(70,70,55,1);}
.introduction p{ text-align:center; width:98%; line-height:2.0; background:url(../../image/introduction/note.png) repeat-y center top;}
.introduction h4{ line-height:1.1; text-align:center; font-family:"Noto Serif JP","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "MS PMincho", serif; margin-top:2.0em;}
.introduction h4 span{ font-size:2.1rem; display:block; text-align:center; margin-top:0.25em;}

.introductionList{ letter-spacing:-0.4em;}
.introductionList li{ border: solid 5px #FFF; background:#FFF; box-shadow: 0px 3px 0px rgba(206,206,191,0.5); width:24%; display:inline-block; vertical-align:top; letter-spacing:0; margin: 1.5em 1.333333% 0 0;}
.introductionList li img{ width:100%; height:auto;}
.introductionList li a img{ opacity:1.0; transition: all 0.2s ease 0s;}
.introductionList li a:hover img{ opacity:0.6;}
.introductionList li:nth-child(4n){ margin-right:0px;}

.companyTable{ width:100%; margin-top:1.5em;}
.companyTable tr{ border-bottom: dotted 1px rgba(206,206,191,0.75);}
.companyTable th{ width:20%; padding: 1.0em 0.5em; font-weight:600;}
.companyTable td{ width:80%; padding: 1.0em 0.5em;}

#introtext{
  margin-bottom: 3%;
  font-size: 1.5em;
}

.introback{
  position: relative;
  margin-bottom: 50px;
}
.introback .cont1 img,
.introback .cont2 img,
.introback .cont3 img,
.introback .cont4 img,
.introback .cont5 img,
.introback .cont6 img,
.introback .cont7 img,
.introback .cont8 img,
.introback .cont9 img,
.introback .cont10 img,
.introback .cont14 img,
{
  max-width: 500px;
  width: 100%;
}
.introback .cont1{
  position: absolute;
  top: 0.5%;
  left: 23%;
}
.introback .cont2{
  position: absolute;
  top: 11.6%;
  left: 23%;
}
.introback .cont3{
  position: absolute;
  top: 22.7%;
  left: 23%;
}
.introback .cont4{
  position: absolute;
  top: 33.8%;
  left: 23%;
}
.introback .cont5{
  position: absolute;
  top: 44.9%;
  left: 23%;
}
.introback .cont6{
  position: absolute;
  top: 56%;
  left: 23%;
}
.introback .cont7{
  position: absolute;
  top: 67.1%;
  left: 23%;
}
.introback .cont8{
  position: absolute;
  top: 78.2%;
  left: 23%;
}

.introback .cont10{
  position: absolute;
  top: 89.3%;
  left: 23%;
}


.introback .cont15{
  position: absolute;
  top: 89.3%;
  left: 23%;
}
.cont9{
  margin: 0 auto;
  text-align: center;
  margin-bottom: 50px;
  margin-top: 10px;
}
	


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

/* 秋冬のサラフェケア
-------------------------------------------------------------*/
.hidari { max-width: 100%; height: auto; float: right; margin-top: 1em; margin-bottom: 1em; }
.cent { width: 80%; height: auto; margin-top: 1em; margin-bottom: 1em; }
.center { text-align:center; }
.inner2{ margin-top:2em; } 
.useListaf{ letter-spacing:1em;}
.useListaf li{ width:22%; display:inline-block; vertical-align:top; letter-spacing:0; margin: 1.5em 1.25% 0 0; border: solid 3px #FFF; box-shadow: 0px 3px 0px rgba(206,206,191,0.5);}
.useListaf li:nth-child(5n){ margin-right:0px;}
.useListaf li img{ width:100%; height:auto;}

.contents .q1 { margin-top: 2em; max-width: 1000px; height: auto; float: left; }
.contents .imgbox{ max-width: 100%; height: auto; float: right; margin-top: 3.5em; margin-bottom: 5em; margin-left: 1em;}
.contents .q2 { margin-top: 3em; max-width: 1000px; height: auto; float: right; }
.contents .imgbox2{ max-width: 100%; height: auto; float: left; margin-top: 5em; margin-bottom: 5em; margin-left: 1em;}
.contents .q3 { margin-top: 5em; max-width: 1000px; height: auto; float: left; }
.contents .imgbox3 { max-width: 100%; height: auto; float: right; margin-top: 3em; margin-bottom: 5em; margin-left: 1em;}
.contents .question { max-width: 560px; height: auto; margin-top: 0; padding-left: 70px; font-size: 17px; line-height: 25px; background: url(../../image/akifuyu/qicon.png) no-repeat; }
.contents .question3 { max-width: 560px; height: auto; margin-top: 0; padding-left: 70px; font-size: 17px; line-height: 25px; background: url(../../image/akifuyu/qicon.png) no-repeat; }
.contents .answer { max-width: 560px; height: auto; margin-top: 0; padding-left: 70px; font-size: 15px; line-height: 25px; background: url(../../image/akifuyu/aicon.png) no-repeat; }
.aimg { width: 100%; height: auto; }
.clear { clear:both; border-top: dotted 2px rgba(225,103,126,0.5); }

.marker{ background: linear-gradient(transparent 60%, #ffff9c 60%);}

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

/* 診断
-------------------------------------------------------------*/
.shindan { max-width: 1000px; margin: 0 auto; padding: 30px 20px; box-sizing: border-box; background-color: #FFFFFF;   border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px; }
.shindan h1 { padding: 30px 5px; text-align: center; font-size: 26px; background: url(../../image/stepcheck/check.png) no-repeat; background-position:570px; }
.shindan p { padding:30px 0px 30px 200px; }
.shindan button { background: #D5779B; width: 250px; display: block; margin: 40px auto 40px; text-align: center; padding: 15px 10px; font-size: 18px; font-weight: bold; box-shadow: none; color: #fff; border: none; box-sizing: border-box; border-radius: 5px; cursor: pointer; }
.shindan .result { max-width: 700px; padding: 20px; margin: 0 auto; }
.shindan .result h2 { font-size: 24px; margin-bottom: 15px; padding:2px 0px 5px 40px; background: url(../../image/stepcheck/cr.png) no-repeat; }
.shindan .result p { padding:25px 0px 30px 125px; }
.shindan .bow { padding:15px 0px 15px 235px; }
.shindan .slide-bottom { position:relative; margin-bottom:15px; text-align:center; }
.shindan .ng { width:455px; margin:50px -35px 0 0; }
.shindan .oss1 { width:572px; margin:27px 0 28px -10px; }
.shindan .oss2 { width:608px; margin:27px -25px 28px 0; }
.shindan .oss3 { width:590px; margin:27px -5px 28px 0; }
.shindan .slide-bottom a { position:absolute; display:block; }
.shindan .aseshirazu { width:295px; height:240px; left:56px; top:127px; }
.shindan .salafeds { width:205px; height:247px; right:67px; top:124px; }
.shindan .salafebb { width:238px; height:272px; left:43px; top:124px; }
.shindan .salafefp { width:324px; height:170px; right:21px; top:198px; }
.shindan .salafehs { width:227px; height:259px; left:208px; top:128px; }
.shindan .salafesac { width:280px; height:260px; right:39px; top:125px; }
.shindan .make { width:440px; height:260px; right:80px; top:125px; }
.shindan .movie { margin:40px 0; text-align:center; }
.shindan .movie img { margin-bottom:40px; }

#test { padding:10px 0px 20px 200px; }

.checkbox01-input{ display: none; }
.checkbox01-parts{ padding-left: 35px; position:relative; margin-right: 20px; font-size:17px; line-height:200%; }
.checkbox01-parts::before{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border: 1px solid #999; border-radius: 4px; }
.checkbox01-input:checked + .checkbox01-parts{ color: #009a9a; }
.checkbox01-input:checked + .checkbox01-parts::after{ content: ""; display: block; position: absolute; top: -2px; left: 5px; width: 7px; height: 14px; transform: rotate(40deg); border-bottom: 5px solid #009a9a; border-right: 5px solid #009a9a; }

.list-mv07{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

/*with
----------------------------------------------------------*/

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}
.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}

.skincarecontbtn {
  text-align: center;
  margin: 0 auto;
  padding-top: 30px;
}
.skincarecontbtn img{
  max-width: 300px;
}

.skincarebox {
  text-align: center;
}

.skincarebox p {
  display:inline-block;
  vertical-align:top;
}

/*----------------------------------------------------------*/
.pcnone {
  display: none;
}

#PageTop{ position:fixed; bottom:50px; right:100px; z-index:10000;}
}


@media screen and (max-width: 1250px) {
#PageTop{ position:fixed; bottom:50px; right:50px;}
}
@media screen and (max-width: 1150px) {
#PageTop{ position:fixed; bottom:50px; right:10px;}
}
@media screen and (max-width: 1080px) {
#PageTop{ display:none;}
}

/*ボックス全体*/
.accbox {
    margin: 2em auto;
    padding: 0;
}

/*ラベル*/
.accbox label {
  text-align: center;
    display: block;
    margin: 1.5px 0;
    cursor :pointer;
    transition: all 0.5s;
}

.accbox label .labellbtn{
  max-width: 300px;
}

/*ラベルホバー時*/
.accbox label:hover {
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    opacity: 1;
}