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

.imgChange{}
/*=============================================================
	common
=============================================================*/

/* toggle
-------------------------------------------------------------*/
#menu {position: fixed;top: 0;right: -240px;width: 200px;height: 100%;padding: 10px;transition: left .5s, right .5s;background-color: #72b3d8db;z-index: 10000;}
.toggle {font-size: 2.0em;color: #FFF;line-height: 1.1;background-color: #72b3d8;padding: 0.2em 0.25em;border-radius: 3px;cursor: pointer;position: fixed;top: 5%;left: 5%;z-index: 10000;}
.toggle:hover { text-decoration: underline;}
#open { display: none;}

#menu{}
#menu nav{}
#menu nav ul{}
#menu nav ul li{ border-bottom: solid 1px rgba(255,255,255,0.1);}
#menu nav ul li:nth-child(2){ border-bottom: none;}
#menu nav ul li a{ display: block; color: #FFF; padding: 0.75em 0 0.75em 1.0em; position: relative; text-decoration: none; font-size: 1.5rem; line-height: 1.1;}
#menu nav ul li a:before{ content: "\f105"; font-family: FontAwesome; position: absolute; top: 50%; left: 0.2em; transform: translateY(-50%);}
#menu nav ul li a:hover{}
#menu nav ul li ul{}
#menu nav ul li ul li{ border-bottom: solid 1px rgba(255,255,255,0.1); padding: 0 0 0 1.5em;}
#menu nav ul li ul li:nth-child(2){ border-bottom: solid 1px rgba(255,255,255,0.1);}
#menu nav ul li ul li a{ font-size: 1.3rem; line-height: 1.1; display: block; padding: 1.0em;}
#menu nav ul li ul li a:before{ content: "\f101";}
#menu nav ul li span{ display: block; color: #FFF; padding: 0.75em 0 0.75em 1.0em; position: relative; font-size: 1.5rem; line-height: 1.1; border-bottom: solid 1px rgba(255,255,255,0.1);}
#menu nav ul li span:before{ content: "\f107"; font-family: FontAwesome; position: absolute; top: 50%; left: 0em; transform: translateY(-50%);}

/* :checked 擬似クラスを使って、#openがチェック状態になった時に、#menuが「right: 0;」になります。 */
#open:checked + #menu { right: 0;}

body{
	margin:0;
	padding:0;
	text-align:center;
	font-size:1.2rem;
	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{ margin: 1.0em 0;}
.img-right{ margin: 1.0em 0;}

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

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

/*=============================================================
	layout
=============================================================*/
#wrapper{ width:100%; margin: 0px auto; overflow:hidden; position:relative;}

/* Header
-------------------------------------------------------------*/
#header{ width:100%; background:#FFF; z-index:100; box-shadow: 0px 0px 15px rgba(198,194,182,0.25);}
#header:before{ content:""; width:100%; height:3px; background:url(../../image/common/bg_header.png) repeat-x center top; position:absolute; top:0px; left:0px;}
#header .inner{ width:100%; margin: 0px auto; position:relative; z-index:101; padding-bottom: 20px;}
#header .inner h1.slogan{ display: none;}
#header .inner h2.logo{ width:100%; margin: 0px auto; padding: 20px 0 10px;}
#header .inner h2.logo img{ width:50%; height:auto;}
#header .inner h2.logo span{ width:60%; display:block; margin: 0px auto;}
#header .inner h2.logo em{ width:60%; display:block; margin: 0px auto;}
#header .inner ul{}
#header .inner ul li{}
#header .inner ul li:nth-child(1){ width: 60%; margin: 0px auto; padding-bottom: 5px;}
#header .inner ul li:nth-child(2){ width: 40%; margin: 0px auto;}
#header .inner ul li img{ width: 100%; height: auto;}

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

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

/* Breadcrumb
-------------------------------------------------------------*/
.breadcrumb{ width:90%; margin: 0px auto;}
.breadcrumb ul{ letter-spacing:-0.4em; padding: 20px 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{ content: "\f105"; font-family: FontAwesome; 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:90%; margin: 0px auto;}
.contents{ width:100%; margin: 40px auto 0px auto;}
#container p{ margin-top:1.5em;}

/* Contact
-------------------------------------------------------------*/
.contact{ width:300px; height:49px; margin: 40px auto 0; background:url(../../image/common/contact_bg.png) no-repeat center top; background-size:contain; position: relative;}
.contact span{ position:absolute; right:15%; bottom:10%; width: 35%; display: block;}
.contact span img{ width: 100%; height: auto;}

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

/*=============================================================
	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:1.9rem; line-height:1.0; 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:1.7rem; 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: 10px;
  background-color: #D5DAE1;
  height: 60px;
  border-radius: 20px;
}
h5.heading span{
  position:absolute;
  font-size:2.25rem;
  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%);
}

/* column */
.column02{ width:100%; margin: 0px auto; letter-spacing:-0.4em;}
.column02 .inner{ width:100%; display:inline-block; vertical-align:top; letter-spacing:0; margin: 1.5em 0 0 0;}

.column03{ width:100%; margin: 0px auto; letter-spacing:-0.4em;}
.column03 .inner{ width:100%; display:inline-block; vertical-align:top; letter-spacing:0; margin: 1.5em 0 0 0;}

/* link button */
.linkBtn{ text-align:center; margin-top:2.5em !important;}
.linkBtn a{ display:inline-block; border: solid 2px #E1677E; padding: 1.0em 2.0em; border-radius:5px; color:#E1677E; text-decoration: none; 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;}

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

.homeBlock01{ width:90%; margin: 0px auto; position:relative; padding-bottom: 30px; 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:100%; margin: 0px auto;}
.homeBlock01 .inner img{ width: 100%; height: auto;}
.homeBlock01 .inner h2,
.homeBlock01 .inner h3{ text-align:center;}
.homeBlock01 .inner > ul{ letter-spacing:-0.4em; margin-top:1.0em;}
.homeBlock01 .inner ul > li{ width:47%; display:inline-block; vertical-align:top; letter-spacing:0;}
.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{ width:50%;}
.homeBlock01 .inner ul li ul li:first-child{ width:100%;}
.homeBlock01 .inner ul li:first-child ul li:nth-child(2){ width:100%;}
.homeBlock01 .inner ul li ul li{ display:inline-block; vertical-align:top; letter-spacing:0; margin:0px;}
.homeBlock01 .inner ul li ul li:nth-child(2){ margin:0px;}

.homeBlock02{ width:90%; margin: 0px auto; padding: 20px 0 15px;}
.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;}
.homeBlock02 ul li img{ width: 100%; height: auto;}

.homeBlock03{ width:100%; margin: 0px auto; padding-top:15px;}
.homeBlock03 img{ width: 100%; height: auto;}

#fv{
  display: none;
}

#fv-sp{
  margin: auto 0;
  text-align: center;
  padding-bottom: 3%;
}
#fv-sp img{
  width:100%;
  max-width: 100%;
  height: auto;
}

.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;
  max-width: 400px;
  width: 100%;
  height: 74px;
  text-align: center;
}
.home-menu-btn1:hover {
  background: #daf1ff;
  color: #666;
}
.home-menu-btn1 span{
  font-size: 1.5em;
  line-height: 1em;
}
.home-menu-btn1 span .mini{
  font-size: 0.8em;
}
.home-menu-btn1 p{
  width: 100%;
  line-height: 1.2em;
  position: absolute;
  top: 25%;
  left: 50%;
  text-align: center;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}

.home-menu-btn2-box{max-width: 400px; width: 100%; margin: 0px auto;}
.home-menu-btn2-box2{padding: 0;/* margin: 10px; */list-style: none;}
.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;
  max-width: 160px;
  width: 100%;
  height: 74px;
  text-align: center;
}
.home-menu-btn2 a:hover {
  background: #daf1ff;
  color: #666;
}
.home-menu-btn2 a > p{
  width: 100%;
  font-size: 1.45em;
  line-height: 1.2em;
  position: absolute;
  top: 15%;
  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;
  max-width: 160px;
  width: 100%;
  height: 74px;
  text-align: center;
}
.home-menu-btn3 a:hover {
  background: #daf1ff;
  color: #666;
}
.home-menu-btn3 a > p{
  width: 100%;
  font-size: 1.45em;
  line-height: 1.2em;
  position: absolute;
  top: 15%;
  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;
  max-width: 400px;
  width: 100%;
  height: 74px;
  text-align: center;
}
.home-menu-btn4:hover {
  background: #daf1ff;
  color: #666;
}
.home-menu-btn4 p{
  width: 100%;
  font-size: 1.45em;
  line-height: 1.2em;
  position: absolute;
  top: 15%;
  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;
  max-width: 400px;
  width: 100%;
  height: 74px;
  text-align: center;
}
.home-menu-btn5:hover {
  background: #daf1ff;
  color: #666;
}
.home-menu-btn5 p{
  width: 100%;
  font-size: 1.45em;
  line-height: 1.2em;
  position: absolute;
  top: 15%;
  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");
  width: 100%;
  height: 0;
  position: relative;
  padding-top: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.introbtn {
  position: absolute;
  top: 70%;
  left: 5%;
  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:290px; height:55px; position:relative; background:url(../../image/about/image_06.png) no-repeat center top; background-size:contain; margin: 0px auto;}
.about span{ position:absolute; right:15%; bottom:10%; width: 35%; display: block;}

/* 使い方講座
-------------------------------------------------------------*/
.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 iframe{ width: 100%;}
.contents .column .inner:nth-child(1){ width:100%; border: solid 5px #FFF;}
.contents .column .inner:nth-child(2){ width:100%; margin-top: 1.0em;}
.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:#E1677E; 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:75px; height:70px; background-size:contain; position:absolute; top:50%; left:0px; transform:translateY(-50%);}
/**h3.heading.howto01:before{ background: url(../../image/howto/icon_01.png); background-size:contain;}**/
h3.heading.howto02:before{ background: url(../../image/howto/icon_02.png); background-size:contain;}
h3.heading.howto03:before{ background: url(../../image/howto/icon_03.png); background-size:contain;}
h3.heading.howto01 span,
h3.heading.howto02 span,
/**h3.heading.howto03 span{ left:80px;}**/

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

div.howtosalafe{
	text-align: center;
}
div.howtosalafe img{
	width:100%;
	max-width: 400px;
	height: auto;
	margin-bottom: 10px;
}

.ct{
	text-align: center;
	margin-top: 1.5rem;
	margin-bottom: 1.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 1em 1.5em;
  text-decoration: none;
  color: #666;
  background: #D5DAE1;
  border-radius: 20px;
  transition: .4s;
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.howto-menu-btn:hover {
  background: #666;
  color: #D5DAE1;
}
a.howto-menu-btn span{
	font-size:1.75rem;
}

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:75px; height:70px; background-size:contain; position:absolute; top:50%; left:5%; transform:translateY(-50%);}
a.howto-menu-btn.ic8:before{ content:""; width:75px; height:70px; background-size:contain; position:absolute; top:50%; left:-3%; transform:translateY(-50%);}
a.howto-menu-btn.ic10:before{ content:""; width:75px; height:70px; 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; background-size:contain;}
a.howto-menu-btn.ic2:before{ background: url(../../image/howto/ic2.png); background-repeat: no-repeat; background-size:contain;}
a.howto-menu-btn.ic3:before{ background: url(../../image/howto/ic3.png); background-repeat: no-repeat; background-size:contain;}
a.howto-menu-btn.ic4:before{ background: url(../../image/howto/ic4.png); background-repeat: no-repeat; background-size:contain;}
a.howto-menu-btn.ic5:before{ background: url(../../image/howto/ic5.png); background-repeat: no-repeat; background-size:contain;}
a.howto-menu-btn.ic6:before{ background: url(../../image/howto/ic6.png); background-repeat: no-repeat; background-size:contain;}
a.howto-menu-btn.ic7:before{ background: url(../../image/howto/ic7.png); background-repeat: no-repeat; background-size:contain;}
a.howto-menu-btn.ic8:before{ background: url(../../image/howto/ic8.png); background-repeat: no-repeat; background-size:contain;}
a.howto-menu-btn.ic9:before{ background: url(../../image/howto/ic9.png); background-repeat: no-repeat; background-size:contain;}
a.howto-menu-btn.ic10:before{ background: url(../../image/howto/ic10.png); background-repeat: no-repeat; background-size:contain;}

/* 選ばれる理由
-------------------------------------------------------------*/
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; background-size: 60%; height:235px; position:relative; margin-top:1.5em;}
.anchorLink li{ width:40%; position:absolute;}
.anchorLink li:nth-child(1){ top:5%; left :2.5%;}
.anchorLink li:nth-child(2){ top:10%; right:2.5%;}
.anchorLink li:nth-child(3){ top:40%; left :0px;}
.anchorLink li:nth-child(4){ top:45%; right:0px;}
.anchorLink li:nth-child(5){ top:70%; left :10%;}
.anchorLink li a{ display:block; border: solid 3px #FEE4E8; background:#FFF; color:#E1677E; font-weight:600; line-height:1.1; text-decoration: none; padding: 0.5em; 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%);}

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:100%; 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; border-radius:5px; box-shadow: 0px 3px 0px rgba(206,206,191,0.5);}
.result .inner h4{ height: 60px; 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 2.5em 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:1.5rem; line-height:1.3;}
.text p strong{ font-weight:normal; font-size:1.7rem; color:#E1677E;}
.text p br{ display: none;}
.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;}

/* お客様の声
-------------------------------------------------------------*/
.contents h3 img,
.contents p img{ width: 100%; height: auto;}

.voice{ letter-spacing:-0.4em;}
.voice .inner{ width:100%; 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 0 0 0;}
.voice .inner h4{ background:#FEE4E8; color:#E1677E; font-size:1.7rem; 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.0rem; 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{ display: block; font-size: 1.0rem; line-height: 1.1;}

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

.support{ position:relative;}
.support .comment{ padding: 1.0em; background:#FFF; box-shadow: 0px 3px 0px rgba(206,206,191,0.5); border-radius:10px; width:100%; margin-top: 1.5em;}
.support .comment p{ margin-top:0px !important; font-size:1.5rem; line-height:1.3; font-weight:600;}
.support .comment.question:before{ content: ""; width: 20px; height: 20px; background: url(../../image/support/icon_q.png); background-size: contain; position: absolute; top: -10px; left: -10px;}
.support .comment.answer:before{ content: ""; width: 20px; height: 20px; background: url(../../image/support/icon_a.png); background-size: contain; position: absolute; top: -10px; left: -10px;}
.support.illust01{}
.support.illust02{}
.support.illust03{}
.support.illust04{}
.support.illust05{}
.support.illust01 .illust{}
.support.illust02 .illust{}
.support.illust03 .illust{}
.support.illust04 .illust{}
.support.illust05 .illust{}
.support.illust01 .comment{}
.support.illust02 .comment{}
.support.illust03 .comment{}
.support.illust04 .comment{}
.support.illust05 .comment{}
.support .illust{ display: none;}
.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:35px; height:35px; background:url(../../image/support/label.png); background-size: contain; position:absolute; top:0px; right:0px;}
.interview h4{ color:#E1677E; font-size:1.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:100%; display:inline-block; vertical-align:top; letter-spacing:0;}
.interview ul li:first-child{ width:100%; margin-bottom: 1.0em; 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:1.7rem; 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 2.0em; font-size:1.5rem; 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 2.0em; 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.0em; background:#FFF; border-radius:10px; box-shadow: 0px 3px 0px rgba(206,206,191,0.5);}
.introduction h3{ font-size:2.1rem; line-height:1.1; text-align:center; font-family:"Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "MS PMincho", serif; color:#E1677E;}
.introduction h3 span{ font-size:1.1rem; 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:100%;}
.introduction p br{ display: none;}
.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; margin-top: 1.0em;}
.introductionList li{ border: solid 5px #FFF; background:#FFF; box-shadow: 0px 3px 0px rgba(206,206,191,0.5); width:48%; display:inline-block; vertical-align:top; letter-spacing:0; margin: 1%;}
.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;}

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

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

.introback{
  position: relative;
  margin-bottom: 50px;
  width: 100%;
  height: auto;
}
.introback img{
  width: 100%;
  height: auto;
}

.introback .cont1{
  position: absolute;
  width: 70%;
  top: 0.5%;
  left: 23%;
}
.introback .cont2 {
    position: absolute;
    width: 70%;
    top: 11.5%;
    left: 23%;
}
.introback .cont3 {
    position: absolute;
    width: 70%;
    top: 22.6%;
    left: 23%;
}
.introback .cont4 {
    position: absolute;
    width: 70%;
    top: 33.7%;
    left: 23%;
}

.introback .cont5 {
    position: absolute;
    width: 70%;
    top: 44.8%;
    left: 23%;
}
.introback .cont6 {
    position: absolute;
    width: 70%;
    top: 55.9%;
    left: 23%;
}
.introback .cont7 {
    position: absolute;
    width: 70%;
    top: 67%;
    left: 23%;
}
.introback .cont8 {
    position: absolute;
    width: 70%;
    top: 78.1%;
    left: 23%;
}
.introback .cont15 {
    position: absolute;
    width: 70%;
    top: 89.2%;
    left: 23%;
}
	
.introback .cont16 {
    position: absolute;
    width: 70%;
    top: 89.2%;
    left: 23%;
}

.cont9 img{
  margin: 0 auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin-bottom: 30px;
  margin-top: 10px;
}

/* 秋冬のサラフェケア
-------------------------------------------------------------*/

.hidari { max-width: 100%; height: auto; margin-top: 1em; margin-right: 2em;  margin-bottom: 1em; }
.cent { width: 100%; height: auto; margin-top: 1em; margin-bottom: 1em; }
.useListaf{ letter-spacing:-0.4em;}
.useListaf li{ width:32%; display:inline-block; vertical-align:top; letter-spacing:0; margin: 1.0em 2% 0 0; border: solid 3px #FFF; box-shadow: 0px 3px 0px rgba(206,206,191,0.5);}
.useListaf li:nth-child(3n){ margin-right:0px;}
.useListaf li img{ width:100%; height:auto;}

.contents .q1 { margin-top: 2em; max-width: 1000px; height: auto;}
.contents .imgbox{ max-width: 100%; height: auto; margin-top: 1em; margin-bottom: 5em; margin-left: 1em;}
.contents .q2 { margin-top: 5em; max-width: 1000px; height: auto; }
.contents .imgbox2{ max-width: 100%; height: auto;margin-top: 1em; margin-bottom: 5em; margin-left: 1em;}
.contents .q3 { margin-top: 5em; max-width: 1000px; height: auto;}
.contents .imgbox3 { max-width: 100%; height: auto; margin-top: 1em; margin-bottom: 5em; margin-left: 1em;}
.contents .question { max-width: 560px; height: auto; margin-top: 0; padding-left: 70px; font-size: 16px; 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: 16px; 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: 20px 5px; text-align: center; font-size: 26px; background: url(../../image/stepcheck/check.png) no-repeat; background-position:265px; }
.shindan p { font-size:19px; padding:30px 0px 30px 0px; line-height:1.5; }
.shindan p .marker{ font-weight: bold; }
.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; line-height:30px; margin-bottom: 15px; padding:0px 0px 5px 40px; background: url(../../image/stepcheck/cr.png) no-repeat; }
.shindan .result p { padding:15px 0px 30px 0px; }
.shindan .bow { display:block; margin:0 auto; padding:15px 0px; max-width: 100%; }
.shindan .oss { padding-top:15px; max-width: 100%; }
.shindan .ng { margin-left:3.2%; padding-top:15px; max-width: 100%; }
.shindan .oss1 { margin-left:-1.5%; }
.shindan .oss2 { margin-left:1.8%; }
.shindan .oss3 { margin-left:.1%; }
.shindan .slide-bottom { margin: 0 -20px; }
.shindan .slide-bottom a { position:absolute; display:block; }
.shindan .aseshirazu { width:50.5%; height:0; padding-top:41%; left:2%; top:24.9%; }
.shindan .salafeds { width:35.6%; height:0; padding-top:42.5%; right:4.5%; top:23.8%; }
.shindan .salafebb { width:39.3%; height:0; padding-top:45.3%; left:2.6%; top:20%; }
.shindan .salafefp { width:53.8%; height:0; padding-top:28%; right:-.8%; top:32.4%; }
.shindan .salafehs { width:38.5%; height:0; padding-top:44.2%; left:1.2%; top:20%; }
.shindan .salafesac { width:47.4%; height:0; padding-top:43.8%; right:1.1%; top:19.8%; }
.shindan .make {width: 60%;height:0;padding-top: 45.8%;right: 15.1%;top: 22.8%;}
.shindan .movie { margin:40px -20px 0; text-align:center; }
.shindan .movie img { width:90%; margin-bottom:20px; }
.shindan .movie iframe { width:100%; }

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

.checkbox01-input{ display: none; }
.checkbox01-parts{ display:inline-block; padding-left: 35px; position:relative; margin-right: 20px; font-size:15px; line-height:200%; }
.checkbox01-parts::before{ content: ""; display: block; position: absolute; top: 4px; 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;
}
.skincarecontbtn img{
  max-width: 300px;
}
.skincarebox {
  text-align: center;
}
.skincarebox img{
  max-width: 150px;
}
.skincarebox .center{
  text-align: center;
}
/*----------------------------------------------------------*/
.spnone {
  display: none;
}

.pcnone .pcnoneli{
  display: flex;
  flex-wrap:wrap;
}
.pcnone .pcnoneli li {
  width: calc(100%/2);
  padding:15px 0px;
  padding-left: 15%;
  box-sizing:border-box;
}
.pcnone .pcnoneli li img {
  max-width:100%;
  height: auto;
  border:solid 0px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

.pcnone .pcnoneli  img.sptel {
  max-width:100%;
  height: auto;
  margin: 50% auto;
  border:solid 0px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}


#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;}
}