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

html{
font-size: 100%;
overflow-x: hidden;
}
body{
width: 100%;
max-width: 1280px;
margin: 0 auto;
overflow-x: hidden;
font-family: 'Noto Serif JP', serif;
}
img{
max-width: 100%;
max-height: 100%;
text-align: center;
}

/*header
-----------------------------------------------------*/
h1{
position: fixed;
display: flex;
z-index: 1000;
cursor: default;
}
.wrapper{
max-width: 1280px;
margin: 0 auto;
padding: 0 3%;
}
.page-header{
display: flex;
position: absolute;
}
.main-nav{
display: flex;
margin-top:60px;
margin-left: 890px;
font-size: 18px;
list-style: none;
z-index: 10000;
}
.main-nav li{
  margin-left: 36px;
}
.main-nav a{
  color: black;
  text-decoration: none;
}
.main-nav a:hover{
  color: #30C056;
}
/*main-content
----------------------------------------------------------*/
.box{
padding: 40px;
display:block;
align-items: center;
text-align: center;
height: auto;
}
#box1{
    background-image: url("../home/images/home-bg.jpg");
    background-position: center;
}
#box2{
background-image: url("../home/images/image-girl.jpeg");
background-position: center;
}
/*home-about*/
#box3{
    background-image: url("../home/images/home-about.jpeg");
    background-position: center;
}
.home-about{
color: black;
margin-right: 90px;
margin-top: 120px;
}
.home-concept{
color: white;
margin-right: 157px;
margin-top: 120px;
}
h3{
font-size: 50px;
text-align: left;
margin-left: 85%;
width: 250px;
}
.home-about > p , .home-concept > p{
font-size: 16px;
text-align: left;
margin-left: 85%;
width: 250px;
letter-spacing: 2px;
line-height: 40pt;
}
.about-rink{
width:193px;
height: 187px;
display: block;
color: #000;
text-decoration: none;
text-align: left;
margin-top: 130px;
font-size: 30px;
letter-spacing: 2px;
background-color: rgba(255,255,255,0.4);
border-radius: 50%;
padding-left: 45px;
padding-top: 70px;
}
a{
color: black;
text-decoration: none;
}
.concept-rink{
color: #000;
text-decoration: none;
text-align: left;
margin-top: 100px;
font-size: 30px;
letter-spacing: 2px;
width: 193px;
height: 187px;
background-color: rgba(255,255,255,0.4);
border-radius: 50%;
padding-left: 30px;
padding-top: 70px;
display: block;
}
.about-rink:hover,.concept-rink:hover{
color: #fff;
}
#box4{
    background-image: url("../home/images/seagirl.jpeg");
    background-position: center;
}
#box5{
    background-image: url("../home/images/2bottle.jpg");
    background-position: center;
}

/*concept*/
#box6{
    background-image: url("../home/images/home-concept.jpeg");
    background-position: center;
}
#box7{
    background-image: url("../home/images/shabon.jpeg");
    background-position: center;
}
/*product magic
---------------------------------------------------------*/
#box8{
background-image: url("../home/images/magic.jpeg");
background-position: bottom;
}
h2{ 
  width: 300px;
  margin: 0 auto;
  position: -webkit-sticky;
  position: sticky;
  top: 6px;
  left: 6px;
  font-size: 60px;
  letter-spacing: 2px;
}
#box8 > a,#box9 > a{
color: black;
margin: 224px 0;
letter-spacing: 2px;
}
/*product honey*/
#box9{
background-image: url("../home/images/honey.jpeg");
background-position: bottom;
}
/*product pure*/
#box10{
background-image: url("../home/images/pure.jpeg");
background-position: bottom;
}
#box10 > a{
color: #000;
margin-top: 320px;
letter-spacing: 2px;
}
/*smilegirl*/
#box11{
padding: 80px 10px 10px 40px;
}
.girlsbox_a{
display: flex;
justify-content: center;
}
.girlsbox_a > img{
margin: 0 5px;
}
#box11 > p{
color: #000;
font-size: 24px;
padding: 40px 0;
}
/*footer
-------------------------------*/
footer{
width: 100%;
height: 60px;
text-align: center;
}
.copyright{
text-align: center;
font-size: 16px;
}

/*文字拡大*/
.my-parts {
	display: inline-block;
	transition: all .3s ease 0s;
	text-decoration: none;
}
.my-parts:hover {
	cursor: pointer;
	transform: scale(1.2);
}
/*========= ページネーションCSS ===============*/
.pagination {
  position:fixed;
  right:20px;
  top: 50%;
 transform: translateY(-50%);
  font-size:1em;
  z-index: 10;
  list-style: none;
}
.pagination a {
  display:block;
  height:20px;
  margin-bottom:5px;
  color:#fff;
  position:relative;
  padding:4px;
}
.pagination a.active:after {
  box-shadow:inset 0 0 0 5px;
}
/*現在地表示のテキストの設定*/
.pagination a .hover-text {
  position:absolute;
  right:15px;
  top:0;
  opacity:0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  padding-right: 15px;
display: none;  
}

.pagination a:hover .hover-text {
  opacity: 1;
}

.pagination a:after {
  -webkit-transition:box-shadow 0.5s ease;
  transition:box-shadow 0.5s ease;
  width:10px;
  height:10px;
  display: none; /*表示する場合はここをblockにする*/
  border:1px solid;
  border-radius:50%;
  content:"";
  position: absolute;
  margin:auto;
  top:0;
  right:3px;
  bottom:0;
}
/*about
----------------------------------------*/
.about-bg{
display: flex;
justify-content: center;
align-items: center;
}
.about-ttl{
font-size: 60pt;
}
#box13{
background-image: url("../about/images/about_a.jpeg");
background-position: center;
}
.about-lead p{
font-size: 16px;
line-height: 36pt;
padding-top: 110px;
}
.about-lead span{
font-size: 30pt;
font-weight: 600;
}
#box14{
background-image: url("../about/images/about_b.jpeg");
background-position: center;
}
#box15{
background-image: url("../about/images/about_c.jpeg");
background-position: center;
}
.seibun-lead{
text-align: center;
margin: 0 0 0 21%;
}
.seibun-lead p{
font-size: 16px;
line-height: 29pt;
text-align: left;
}
.seibun-lead span{
font-size: 24px;
font-weight: 700;
}
.seibun-ttl{
font-size: 30pt;
font-weight: 600;
padding-top: 40px;
}
.seibun-subttl{
font-size: 16px;
margin-bottom: 100px;
}
#box16{
background-image: url("../about/images/eco.jpeg");
background-position: center;
}
#box17{
background-image: url("../about/images/kounyu.jpeg");
background-position: center;
}
.kounyu{
font-size: 25pt;
color: white;
margin-top: 50px;
}
.kounyu-jamp{
font-size: 16pt;
color: white;
text-decoration: underline;
}
.kounyu-jamp:hover{
color: #000;
}
/*concept
--------------------------------------------*/
#container{
	position: relative;
	z-index: 1;/*header とfooterを手前にするため数字を小さく*/
}
section.fixed{
	position: sticky;
    top: 1px;
}
.footer{
position: -webkit-sticky;
	position: relative;
	z-index: 2;
}
.concept-bg{
  background:url("../concept/images/concept-bg.jpeg")no-repeat top;
  background-size: 1280px 800px;
  top:0;
  height: 800px;/*高さ指定*/
  z-index: 2;
  width:100%;
}
.concept-ttl{
font-size: 60pt;
line-height: 60pt;
padding: 170px 100px 0 850px;
}
.concept-ttl p{
padding-left: 1000px;
}
.parallax_content{
  display: flex;
  justify-content: center;
  align-items: center;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
    font-size: 45px;
    font-weight: 600;
    width: 1280px;
    height: 800px;
    padding: 5%;
    text-align: center;
}
.img_bg_01{
  background-image: url("../concept/images/concept_a.jpeg");
  background-size: 1280px 800px;
  position: relative;
}
.img_bg_02{
  background-image: url("../concept/images/concept_b.jpeg");
  background-size: 1280px 800px;
   position: relative;
}
.img_bg_03{
  background-image: url("../concept/images/concept_c.jpeg");
  background-size: 1280px 800px;
  position: relative;
}
.img_bg_04{
  background-image: url("../concept/images/concept_d.jpeg");
  background-size: 1280px 800px;
  position: relative;
}
.img_bg_05{
  background-image: url("../home/images/shabon.jpeg");
  background-size: 1280px 800px;
  position: relative;
}
.img_bg_01::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:rgba(255,255,255,0.3);
}
.img_bg_02::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:rgba(255,255,255,0.3);
}
.img_bg_03::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:rgba(255,255,255,0.3);
}
.img_bg_04::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:rgba(255,255,255,0.3);
}
.img_bg_05::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:rgba(255,255,255,0.3);
}
.concept-last{
height: 800px;
background-image: #fff;
text-align: center;
padding-top: 420px;
}
.arcanamagic{
  background-image: linear-gradient(to top, #a675a5 3px, transparent 3px);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0% 100%; 
  }
.active{
    animation-name: kf_c06a, kf_c06b;
    animation-duration: 3s;
    animation-delay: 2s, 4.5s;
    animation-fill-mode: backwards;   
    animation-iteration-count: infinite;
  }
@keyframes kf_c06a {
  50%{
    background-size: 100% 100%;
  }
  100%{
    background-size: 0% 100%;
  }
}
@keyframes kf_c06b {
  100%{
    background-position: right bottom;
  }
}
/*product
-----------------------------------*/
.product-bg{
background-image: url("../product/images/product-magic.jpg");
background-size: 1280px 800px;
top:0;
height: 800px;/*高さ指定*/
z-index: 2;
width:100%;
}
.pd-box{
width: 1280px;
height: 580px;
margin-top: 250px;
overflow: hidden;
position: relative;
}
.pd-bg{
  background: url("../home/images/magic.jpeg") center center / cover no-repeat;
  width: 100%;
  height: 580px;
  position: relative;
  z-index: 0;
  transition: .3s ease-in-out;
}
.pdh-bg{
  background: url("../home/images/honey.jpeg") center center / cover no-repeat;
  width: 100%;
  height: 580px;
  position: relative;
  z-index: 0;
  transition: .3s ease-in-out;
}
.pdp-bg{
background: url("../product/images/pure.jpeg") center center / cover no-repeat;
  width: 100%;
  height: 580px;
  position: relative;
  z-index: 0;
  transition: .3s ease-in-out;
}
.pd-bg:hover,.pdh-bg:hover,.pdp-bg:hover{
  transform: scale(1.1);
}
.pd-bg::before,.pdh-bg::before,.pdp-bg::before{
  background: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 70%);
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
.pd-text{
position: absolute;
top: 35%;
width: 1280px;
text-align: center;
font-size: 50pt;
}
.pdp-text{
position: absolute;
top: 45%;
width: 1280px;
text-align: center;
font-size: 50pt;
}

.product-img {
display: flex;
}
.product-lead{
height: 600px;
text-align: center;
padding-top: 15%;
font-size: 30px;
line-height: 60pt;
word-spacing: 2px;
}
.magic-shampoo{
width: 543px;
height: 446px;
background-color: #dbfcee;
}
.honey-shampoo{
width: 543px;
height: 446px;
background-color: #fce1b6;
}
.pure-shampoo{
width: 543px;
height: 446px;
background-color: #f4d0d0;
}
.magic-shampoo > p >span,.honey-shampoo > p >span,.pure-shampoo > p >span{
font-size: 35pt;
}
.magic-shampoo > p,.honey-shampoo > p,.pure-shampoo > p{
font-size: 16px;
line-height: 24pt;
padding-top: 21%;
padding-left: 20%;
}
.shampoo-box{
display: flex;
}
.kounyu-bg{
width: 1280px;
height: 640px;
background-image: url("../product/images/kounyu.jpeg");
margin-top: 400px;
}
.kounyu_b{
font-size: 25pt;
color: #fff;
padding-top: 70px;
text-align: center;
}
.shoplist{
width: 1280px;
height: 500px;
margin-top: 80px;
text-align: center;
font-size: 16pt;
word-spacing: 2px;
}
.tenpo{
text-decoration: underline;
margin-bottom: 20px;
}
.shoplist > p{
line-height: 48pt;
}

/*ページトップリンク*/
/*スクロールリンクの形状*/
.scroll-top {
	/*表示位置*/
	position: fixed;
	right: 50px;
	bottom: 10px;
	z-index: 2;
	/*はじめは非表示*/
	opacity: 0;
	visibility: hidden; 
	transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
	/*縦書き*/
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	/*改行禁止*/
    white-space: nowrap;
	/*矢印の動き*/
	animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:20px;}
      50%{bottom:25px;}
     100%{bottom:20px;}
 }


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
	opacity: 1;
	visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
	text-decoration: none;
	color: #666;
	text-transform: uppercase;
	font-size:0.9rem;
    display: block;
}

/*スクロールリンクの形状*/

.js-scroll a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:1px;
	height: 50px;
	background:#666;
}

.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
	right:-11px;
}

/*ページトップリンクの形状*/

.js-pagetop a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:1px;
	height: 50px;
	background:#666;
}

.js-pagetop a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #666;
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
	right:0;
}


/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#arcana {
  /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background-image: url("../home/images/top-img.jpg");
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#arcana_logo {
	position: absolute;
	top: 50%;
	left: 43%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#arcana_logo svg{
    width:300px;
}

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .5s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #333;/*線の色*/
	}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path{
	  fill: #333;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}
#page-top{
font-size: 20px;
text-align:center;
width: 100%;
margin: 0 auto;
height: 40px;
text-decoration-line: underline;
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
  .pagination a .hover-text{
    display: none;
  }
  section.fixed{
	position:relative!important;/*sticky解除*/
	top:0;/*70px⇒0pxに戻す*/
}
	section.fixed:first-of-type{
	padding-top:100px;
	/*最初の要素は上部にHeaderの高さ以上の余白をとる*/
	}
    
.logo{
max-width: 70%;
margin-bottom: 25px;
padding: 0 0 0 10px;
    }
 #box1 {
    background-image: url(../home/images/home-bg.jpg);
    background-position: center top 75%;
    background-size: 282%;
}
h1 {
    position: fixed;
    display: flex;
    z-index: 1000;
    cursor: default;
    height: 35px;
}
img {
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}
.wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.main-nav {
    display: flex;
    font-size: 16px;
    list-style: none;
    width: 100%;
    margin: 105px auto 0 auto;
    justify-content: space-around;
}
.main-nav li {
margin-left: 0;
}
nav{
width: 100%;
}

#arcana {
    display: none;
}
#box2 {
    background-position: top 100% left 55%;
}
.home-about {
    color: black;
    margin-top: 23px;
    margin-right: 0;
    width: 100%;
}
h3 {
    font-size: 3rem;
    width: 100%;
    margin: 0 auto;
    text-align: unset;
}
.home-concept {
    color: #fff;
    margin-top: 23px;
    width: 100%;
}
.home-concept > h3 {
    font-size: 3rem;
    width: 100%;
    text-align: center;
    padding-left: 0;
    margin: 0 auto;
}
.home-about > p {
    font-size: 1rem;
    width: 100%;
    letter-spacing: 0;
    line-height: 75pt;
    font-weight: 500;
    margin-left: 0;
    text-align: center;
}
.home-concept > p{
font-size: 1.1rem;
    width: 100%;
    letter-spacing: 0;
    line-height: 75pt;
    font-weight: 500;
    margin-left: 0;
    text-align: center;
}
.about-rink {
    width: 100%;
    color: cadetblue;
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    border-radius: 54%;
    padding-top: 40px;
    padding-left: 0;
    margin: 0 auto;
    background-color: rgba(0,0,0,0)
}
#box3 {
    background-position: top 50% left 35%;
}

#box4 {
    background-position: top 0% left 67%;
}
.box {
    display: block;
}
#box5 {
    background-position: top 47% left 79%;
}
#box6 {
    background-position: top 46% left 50%;
}
.concept-rink {
    width: 100%;
    color: cadetblue;
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    border-radius: 54%;
    padding-top: 40px;
    padding-left: 0;
    margin: 0 auto;
    background-color: rgba(0,0,0,0)
}
#box7 {
    background-position: top 0% left 32%;
}
#box8 {
    background-position: top 36% left 91%;
}
#box8 > a, #box9 > a {
    color: #000;
    margin: 124px 0;
    letter-spacing: 2px;
    background: rgba(255,255,255,0.4);
    font-size: 35px;
}
h2 {
    margin: 28px auto;
    position: -webkit-sticky;
    position: sticky;
    top: 6px;
    left: 6px;
    font-size: 24px;
    letter-spacing: 2px;
}
#box9 {
    background-position: top 42% right 67%;
}
#box10 {
    background-position: top 42% right 57%;
}
#box10 > a {
    color: #000;
    margin-top: 124px;
    letter-spacing: 2px;
    background: rgba(255,255,255,0.4);
    font-size: 35px;
}
.girlsbox_a {
    display: contents;
    justify-content: center;
    width: 375px;
    height: 109px;
}
.girlsbox_a > img{
width: 40%;
}
#box11{
padding: 130px 0 0 0;
height: auto;
}
#page-top {
    font-size: 20px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    height: 18px;
    text-decoration-line: underline;
}
.content{
height: inherit;
width: 100%;
}

/*about*/
.about-ttl {
    font-size: 34pt;
}
.about-bg {
    display: inline-flex;
    justify-content: unset;
    align-items: center;
    margin-top: 60px;
}
.about-bg > img{
width: 180px;
}
.about-lead span {
    font-size: 20pt;
    font-weight: 600;
}
.about-lead p {
    font-size: 14px;
    line-height: 31pt;
    padding-top: 55px;
}
#box13 {
    background: url(../about/images/about_a.jpeg) 0 0 no-repeat;
    background-position: center top;
}
.seibun-ttl {
    font-size: 20pt;
    font-weight: 600;
    padding-top: 20px;
}
.seibun-subttl {
    font-size: 11px;
    margin-bottom: 75px;
}
.seibun-lead span {
    font-size: 20px;
    font-weight: 700;
}
.seibun-lead p {
    font-size: 11px;
    line-height: 18pt;
    text-align: left;
    padding: 0 10px;
}
.seibun-lead {
    text-align: center;
    margin: 0 0 0 0%;
}
#box14 {
    background-image: url(../about/images/about_b.jpeg) 0 0 no-repeat;
    background-position: center;
    background-size: cover;
}
#box15 {
    background: url(../about/images/about_c.jpeg) 0 0 no-repeat;
    background-position: center;
    background-size: cover;
}
#box16 {
    background-image: url(../about/images/eco.jpeg) 0 0 no-repeat;
    background-position: center;
    background-size: cover;
}
.kounyu {
    font-size: 15pt;
    color: #fff;
    margin-top: 100px;
}
.kounyu-jamp {
    font-size: 11pt;
    color: #fff;
    text-decoration: underline;
}
#box17 {
    background-image: url(../about/images/kounyu.jpeg);
    background-position: center top 50%;
    background-size: 181%;
}
.concept-ttl {
    font-size: 34pt;
    line-height: 33pt;
    padding: 420px 0px 0 183px;
}
.parallax_content{
  display: flex;
  justify-content: center;
  align-items: center;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
    font-size: 29px;
    font-weight: 600;
    width: 100%;
    height: 800px;
    padding: 5%;
    text-align: center;
}
.img_bg_01{
  background-image: url("../concept/images/concept_a.jpeg");
  background-size: cover;
  background-position: right;
  position: relative;
}
.img_bg_02{
  background-image: url("../concept/images/concept_b.jpeg");
  background-size: cover;
   position: relative;
}
.img_bg_03{
  background-image: url("../concept/images/concept_c.jpeg");
 background-size: cover;
 background-position: right;
  position: relative;
}
.img_bg_04{
  background-image: url("../concept/images/concept_d.jpeg");
  background-size: cover;
  position: relative;
}
.img_bg_05{
  background-image: url("../home/images/shabon.jpeg");
  background-size: cover;
  position: relative;
}
.img_bg_01::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:rgba(255,255,255,0.3);
}
.img_bg_02::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:rgba(255,255,255,0.3);
}
.img_bg_03::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:rgba(255,255,255,0.3);
}
.img_bg_04::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:rgba(255,255,255,0.3);
}
.img_bg_05::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:rgba(255,255,255,0.3);
}
.concept-last{
height: 800px;
background-image: #fff;
text-align: center;
padding-top: 420px;
}
.concept-bg {
    background: url(../concept/images/concept-bg.jpeg)no-repeat top;
    top: 0;
    height: 800px;
    z-index: 2;
    width: 100%;
}
.arcanamagic {
    background-image: linear-gradient(to top, #a675a5 3px, transparent 3px);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    font-size: 29px;
}
/*product*/
.product-bg {
    background-image: url(../product/images/product-magic.jpg);
    background-size: 317%;
    top: 0;
    height: 743px;
    width: 100%;
    background-position: right 33% top;
}
.pd-bg {
    background: url(../home/images/magic.jpeg) no-repeat;
    width: 375px;
    height: 170px;
    position: relative;
    z-index: 0;
    transition: .3s ease-in-out;
    background-size: 375px;
}
.pdh-bg {
    background: url(../home/images/honey.jpeg) no-repeat;
    width: 375px;
    height: 170px;
    position: relative;
    z-index: 0;
    transition: .3s ease-in-out;
    background-size: 375px;
}
.pdp-bg {
    background: url(../product/images/pure.jpeg) center center / cover no-repeat;
    width: 375px;
    height: 170px;
    position: relative;
    z-index: 0;
    transition: .3s ease-in-out;
    background-size: 375px;
}
.pd-box {
    width: 375px;
    height: 218px;
    margin-top: 250px;
    overflow: hidden;
    position: relative;
}
.pd-text {
    position: absolute;
    top: 28%;
    width: 375px;
    text-align: center;
    font-size: 30pt;
}
.pdp-text {
    position: absolute;
    top: 28%;
    width: 375px;
    text-align: center;
    font-size: 30pt;
}
.product-lead {
    height: 200px;
    text-align: center;
    padding-top: 15%;
    font-size: 20px;
    line-height: 27pt;
    word-spacing: 2px;
}
.product-img {
    display: block;
    text-align: center;
}
.shampoo-box {
    display: block;
    text-align: center;
}
.magic-shampoo {
    width: 375px;
    height: 206px;
    background-color: #dbfcee;
    margin-bottom: 10px;
}
.honey-shampoo {
    width: 375px;
    height: 206px;
    background-color: #fce1b6;
    margin-bottom: 10px;
}
.pure-shampoo {
     width: 375px;
    height: 206px;
    background-color: #f4d0d0;
    margin-bottom: 10px;
}
.magic-shampoo > p >span, .honey-shampoo > p >span, .pure-shampoo > p >span {
    font-size: 20pt;
}
.magic-shampoo > p, .honey-shampoo > p, .pure-shampoo > p {
    font-size: 16px;
    line-height: 16pt;
    padding-top: 8%;
    padding-left: 0%;
}
.kounyu-bg {
    width: 375px;
    height: 336px;
    background-image: url(../product/images/kounyu.jpeg);
    margin-top: 200px;
    background-size: cover;
    background-position: center;
}
.kounyu_b {
    font-size: 14pt;
    color: #fff;
    padding-top: 30px;
    text-align: center;
}
.shoplist {
    width: 375px;
    height: 500px;
    margin-top: 25px;
    text-align: center;
    font-size: 12pt;
    word-spacing: 2px;
}
.scroll-top {
    margin-bottom: 30px;
    right: 16px;
}
/*376px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:376px){
.img_bg_01{
  background: url("../concept/images/concept_a.jpeg") 0 0 no-repeat;
  background-position: right;
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 800px;
  font-size: 1.5rem;
}
.img_bg_02{
  background: url("../concept/images/concept_b.jpeg") 0 0 no-repeat;
  background-position: center;
  width: 100%;
  max-width: 100%;
  height: 800px;
   position: relative;
   font-size: 1.5rem;
}
.img_bg_03{
  background: url("../concept/images/concept_c.jpeg") 0 0 no-repeat;
  background-position: right 11% top 36%;
  background-size: cover;
 width: 100%;
  max-width: 100%;
  height: 800px;
  position: relative;
  font-size: 1.5rem;
}
.img_bg_04{
  background: url("../concept/images/concept_d.jpeg") 0 0 no-repeat;
  background-position: center;
  width: 100%;
  max-width: 100%;
  height: 800px;
  position: relative;
  font-size: 1.5rem;
}
.img_bg_05{
  background: url("../home/images/shabon.jpeg") 0 0 no-repeat;
  width: 100%;
  max-width: 100%;
  height: 800px;
  position: relative;
  font-size: 1.5rem;
}


}
}