/*
Theme Name: rapport
Theme URI:
Description:
Author:
Version:
*/

*{font-family: "Zen Old Mincho", serif;}
html{background: #faf9f3;}

.pc{display:block}
.sp{display:none}
.block{max-width:1200px;margin:0 auto}
.block800{max-width:800px;margin:0 auto}
.pa{padding:100px 0}
.pat0{padding:0 0 100px}
.pab0{padding:100px 0 0}
.mb5{margin-bottom:5px!important}
.mb10{margin-bottom:10px!important}
.mb30{margin-bottom:30px!important}
.mb50{margin-bottom:50px!important}
.flex{display:flex;justify-content:space-between;align-items:center}
a{text-decoration: none;}
img{max-width: 100%}
.tl{font-weight: 600;color:#918070;text-align: center;font-size: 170%;margin-bottom: 70px;line-height: 140%;}
.tl_copy{text-align: center;margin-top: -30px;margin-bottom: 50px;}
.tl_copy a{text-decoration: underline;color:#918070;}
.red{color:#cc0000;}
.bold{font-weight: bold;}
.none{text-decoration: line-through;}
.right{text-align: right !important;}
.border{border-bottom: dotted 1px #918070;}

.btn{text-align: center;letter-spacing: 0}
.btn a{display: inline-block;background: #dbaaa9;color:#fff;padding:25px 0 ;border-radius: 100px;border: solid 1px #fff;width: 450px}
.btn a span{line-height: 100%;padding:0 1em 0 0 !important;background: url(./img/i_arw.svg) no-repeat center right;background-size: 0.75em;display: inline !important;}
.btn a{display:inline-block;background:#dbaaa9;color:#fff;padding:25px 0;border-radius:100px;border:solid 1px #fff;width:450px;position:relative;overflow:hidden;}
.btn a::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);transform:skewX(-25deg);}
.btn a:hover::before{animation:shine .8s ease;}
@keyframes shine{100%{left:125%;}}

#header{width: 100%;position: fixed;top:0;background: linear-gradient(0deg,rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.50) 100%);align-items: stretch;z-index: 999;transition: 0.5s}
#header.is_fixed{background:linear-gradient(0deg,rgba(178,163,148, 0) 20%, rgba(178,163,148, 1) 100%);}
#header #logo {background: #fff;padding:20px 30px;border-radius: 0 0 10px 10px;box-shadow: 0 0 10px rgba(0,0,0,0.2);display: inline-block;margin-left: 50px}
#header #logo img{width: 105px;}
#header #logo a{position:relative;display:inline-block;overflow:hidden;}
#header #logo a::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);transform:skewX(-25deg);}
#header #logo a:hover::before{animation:shine .8s ease;}
@keyframes shine{100%{left:125%;}}
#header #nav{margin-right: 50px;}
#header #nav .flex{align-items: stretch;}
#header #nav li{margin-left: 50px;color:#fff;}
#header #nav a{color:#fff;display: block;line-height: 140%;text-align: center;padding:30px 0}
#header #nav a span{font-size: 80%;display: block;line-height: 100%;padding: 5px 0 0;letter-spacing:0; }
#header #nav ul li:last-child{font-size:180%;letter-spacing:0;line-height:100%; text-align: center;padding: 30px 0 0}
#header #nav ul li:last-child img{width: 25px;height: 25px;}
#header #nav ul li:last-child span{font-size: 40%;display: block;line-height:100%;padding: 5px 0 0;}
#header #nav ul li:last-child .btn{padding: 15px 0;}
#header #nav ul li:last-child .btn a{padding: 0.5em 0;width: 100%}
#header #nav ul li:last-child .btn a span{font-size: 60%;}
#header #nav li a{position:relative;}
#header #nav li a::after{content:"";position:absolute;left:0;bottom:4px;width:0;height:1px;background:#fff;transition:.3s;}
#header #nav li a:hover::after{width:100%;}
#header #nav ul li:last-child .btn a:after{display: none;}

#mainview{position: relative;}
#mainview ul li img{width: 100%;}
#mainview div.box{position: absolute;bottom:70px;right: 50px;z-index:2;color:#fff;text-shadow: 0 0 5px rgba(0,0,0,1)}
#mainview div.box p{font-size: 190%;margin-bottom: 15px;line-height: 160%;letter-spacing: 0.1em}
#mainview .scroll{width: 30px;position: absolute;bottom: 30px;left:50%;margin-left: -15px;}
#mainview .scroll img{animation:scrollmove 2.4s ease infinite;}
#mainview .sell{width: 225px;position: absolute;bottom: -50px;left:50px;}
@keyframes scrollmove{0%{transform:translateY(0);}10%{transform:translateY(10px);}20%{transform:translateY(0);}30%{transform:translateY(10px);}40%{transform:translateY(0);}100%{transform:translateY(0);}}
#mainview .sell img{animation:sellfloat 3s ease-in-out infinite;}
@keyframes sellfloat{0%{transform:translateY(0);}40%{transform:translateY(-12px);}60%{transform:translateY(-12px);}100%{transform:translateY(0);}}

#second #mainview {position: relative;}
#second #mainview p{}
#second #mainview h1{display: flex;justify-content: center;align-items: center;font-size: 280%;position: absolute;top:0;width: 100%;color:#fff;margin-top: 75px;height: 30vw;flex-direction: column;letter-spacing: 0.2em;text-shadow: 0 0 5px rgba(0,0,0,1)}
#second #mainview h1 span{font-size: 60%;display: block;padding: 25px 0 0 ;letter-spacing: 0}

.sec01 li{width:30%;text-align: center;}
.sec01 li span{filter: drop-shadow( 0 0 20px rgba(196,167,73,0.5));}
.sec01 li h3 {background:rgba(178,163,148,0.9);color:#fff;display:inline;text-align:center; font-size: 160%;line-height: 160%;padding: 0 5px;top: -30px;position: relative;}
.sec01 li p{margin-top: -15px;text-align: left;}
.sec01 li:nth-child(1) span{animation:shadowmove1 4s ease-in-out infinite;}
.sec01 li:nth-child(2) span{animation:shadowmove2 5s ease-in-out infinite;}
.sec01 li:nth-child(3) span{animation:shadowmove3 4.5s ease-in-out infinite;}
@keyframes shadowmove1{0%{filter:drop-shadow(0 0 18px rgba(196,167,73,.4));}50%{filter:drop-shadow(0 0 35px rgba(196,167,73,.9));}100%{filter:drop-shadow(0 0 18px rgba(196,167,73,.4));}}
@keyframes shadowmove2{0%{filter:drop-shadow(0 0 18px rgba(196,167,73,.4));}30%{filter:drop-shadow(0 0 30px rgba(196,167,73,.8));}60%{filter:drop-shadow(0 0 40px rgba(196,167,73,.9));}100%{filter:drop-shadow(0 0 18px rgba(196,167,73,.4));}}
@keyframes shadowmove3{0%{filter:drop-shadow(0 0 20px rgba(196,167,73,.5));}40%{filter:drop-shadow(0 0 32px rgba(196,167,73,.8));}70%{filter:drop-shadow(0 0 26px rgba(196,167,73,.7));}100%{filter:drop-shadow(0 0 20px rgba(196,167,73,.5));}}

.sec02{background: url(./img/sec02_bk.png) no-repeat right center;background-size: cover;}
.sec02 .sec02_bk{background: url(./img/logo.png) no-repeat 8% 0 ;background-size: 10%;}
.sec02 .copy{line-height: 220%;font-size: 110%;text-align: center;letter-spacing: 0.2em}
.sec02 .tl{margin-bottom: 40px}

.sec03 .flex{align-items: stretch;}
.sec03 .ph{width: 35%;}
.sec03 .copy{width: 60%;display: flex;align-items: center;justify-content: center;font-size: 110%;position: relative;}
.sec03 .copy p{padding:0.5em 0;text-align: center;line-height: 220%;}
.sec03 .copy p strong{font-size: 120%;margin-left: 1em}
.sec03 .copy .line{background: url(./img/line.png) repeat-x center center;height: 15px;width: 100%;position: absolute;top:0}
.sec03 .copy .bottom{top:auto;bottom: 0}

.sec04{background: url(./img/sec04_bk.png) no-repeat center center;background-size: cover;}
.sec04 li{width: 33.2%;line-height: 0;}

.sec05 .beginner{padding:50px 0;background: url(./img/sec05_bk.png) #fff no-repeat center center;border: solid rgba(178,163,148,0.2) 5px;border-radius: 10px;background-size: cover;box-shadow: 0 0 10px rgba(0,0,0,0.2)}
.sec05 .beginner h2{margin-bottom: 30px}
.sec05 .beginner li{width: 33.3%;text-align: center;border-right: dotted 1px rgba(178,163,148,1);line-height: 160%}
.sec05 .beginner li:last-child{border-right: none;}
.sec05 .beginner li img{width: 96px;height: 96px;margin-bottom: 5px;}
.sec05 .beginner p{text-align: center;}

.news{background: url(./img/sec06_bk.png) no-repeat center center;}
.news .flex{margin-bottom: 80px;}
.news .flex li{width: 30%;}
.news .flex li a {display: block;}
.news .flex li img {border-radius: 10px}
.news .flex li span{color:#000;font-size: 90%;display: block;padding: 15px 0 5px;line-height: 100%;}
.news .flex li a h3{color:#918070;text-decoration: underline;}
.news .btn a{background:#918070;}

#conversion{background: url(./img/con_bk.png) no-repeat center center;background-size: cover;}
#conversion .tl{color:#dbaaa9;margin-bottom: 50px}
#conversion .btn a{font-size: 140%;width: 500px;}

#foot_area{padding:100px 50px 200px;align-items: flex-start;}
#foot_area .logo{margin-right: 40px}
#foot_area .btn{text-align: left;padding: 20px 0 0}
#foot_area .btn a{width: 350px;text-align: center;}
#foot_area .ft_nav{width: 450px;}
#foot_area .ft_nav a{color:#000;}
#foot_area .ft_nav .flex{flex-wrap: wrap;justify-content: flex-start;}
#foot_area .ft_nav .flex li{margin-right: 30px;margin-bottom: 10px}
#foot_area .ft_nav .flex li:nth-child(4){margin-right: 0}
.copyright{padding: 140px 0 0;text-align: right;font-size: 80%}

#foot_area .ft_nav a{position:relative;}
#foot_area .ft_nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:#918070;transition:.3s;}
#foot_area .ft_nav a:hover::after{width:100%;}


/* ===============================
   モーダル背景
=============================== */

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;

  transition:.35s ease;
  z-index:9999;
}

/* 表示状態 */
.modal-overlay.active{
  opacity:1;
  visibility:visible;
}


/* ===============================
   モーダル本体
=============================== */

.modal-box{
  background:#fff;
  width:min(90%,500px);
  padding:40px;
  border-radius:12px;
text-align: center;
  transform:translateY(40px);
  opacity:0;
  transition:.35s ease;
}

.modal-overlay.active .modal-box{
  transform:translateY(0);
  opacity:1;
}


/* 閉じるボタン */

.modal-close{
  position:absolute;
  top:15px;
  right:15px;

  border:none;
  background:none;
  font-size:26px;
  cursor:pointer;
}

.modal-box ul li{padding: 5px 0;}
.modal-box ul li a {color:#000;font-size: 180%;display: block;background: rgba(178, 163, 148, 0.2);padding:15px 0; border-radius: 10px}
.modal-box ul li a img{width: 25px;height: 25px;margin-right: 10px}
.modal-box ul li a img.tel{width: 21px}
.modal-box h3{font-weight: 600;color:#918070;text-align: center;font-size: 180%;}
.modal-box p{padding:12px 0;}

#sns{position: fixed;right: 0;bottom:35%;background: #f6f2e9;border: solid 1px #918070;padding:20px;border-radius: 10px 0 0 10px;border-right: none;box-shadow: 0 0 10px rgba(0,0,0,0.2);z-index: 999}
#sns img{width: 52px;}
#sns .middle{padding: 10px 0}
#sns p{line-height: 0}

.page_copy{text-align: center;line-height: 200%;}

table{border-collapse: collapse;letter-spacing: 0;width: 100%;}
table th{padding:20px 20px 20px 0;border-top: solid 1px #918070;border-bottom: solid 1px #918070;width: 35%;color:#918070;}
table td{padding:20px 0;border-top: solid 1px #d3c9bf;border-bottom: solid 1px #d3c9bf;}

.m_sec01{position: relative;}
.m_sec01 .img01{position: absolute;top:100px;left: 0;width: 25vw}
.m_sec01 .img02{position: absolute;bottom:100px;right: 0;width: 30vw}
.m_sec02 li{font-size: 130%}

.m_sec03 .tl_copy{padding: 30px 0 40px;text-align: center;margin: -50px 0 0}
.f_sec01 .box{background: url(./img/fi_bk.png) no-repeat center center;background-size: cover;padding: 30px 60px;position: relative;color:#fff;}
.f_sec01 .box li{font-size: 150%;background: url(./img/check.svg) no-repeat left center;background-size: 33px 26px;padding-left: 40px;margin: 20px 0}
.f_sec01 .box li:nth-child(2){margin-left: 1em;}
.f_sec01 .box li:nth-child(3){margin-left: 2em;}
.f_sec01 .box li:nth-child(4){margin-left: 3em;}
.f_sec01 .box li:nth-child(5){margin-left: 4em;}
.f_sec01 p{width: 350px;position: absolute;bottom: 0;right: 30px}
.f_sec02{background: url(./img/fi_bk2.png) no-repeat center center;background-size: cover;}
.f_sec02 .flex{flex-wrap: wrap;margin-bottom: -4%}
.f_sec02 .flex li h3{color:#918070;font-size: 150%;padding:20px 0 10px}
.f_sec02 .flex li{width: 48%;text-align: center;margin: 0 0 4%;}
.f_sec03 li{border: solid 5px #d3c9bf;padding:30px;text-align: center;position: relative;margin-bottom: 40px;}
.f_sec03 li:after{background: url(./img/arw_b.svg) no-repeat center center;width: 25px;height: 13px;position: absolute;left:50%;margin-left: -12px;bottom:-32px;content:"";display: block;}
.f_sec03 li:last-child{margin: 0}
.f_sec03 li:last-child:after{display: none;}
.f_sec03 li h3{font-size: 150%;color:#918070;margin-bottom: 15px}
.f_sec03 li h3 span{display: block;font-size: 80%;}
.sec04 .shampoo{background: #fff5e3;border: solid 3px #fff;margin: 50px auto 0}
.sec04 .shampoo div{padding:30px 50px;width: 65%;}
.sec04 .shampoo div h3{font-weight: 600;color:#918070;font-size: 170%;margin-bottom: 10px;line-height: 140%;}
.sec04 .shampoo .img{width: 35%;}
.s_sec01 .copy p{text-align: left;}
.s_sec01 .copy .box{padding: 0 50px}
.s_sec01 .copy .box dl{margin-bottom: 20px}
.s_sec01 .copy .box dd,
.s_sec01 .copy .box dt{margin-bottom: 5px}
.s_sec01 .copy .box dd{display: list-item;list-style-type: disc;margin-left: 1.4em}
.s_sec02 th{width: 25%;}
.s_sec03 p{padding-top: 20px;}

.c_sec01 .flex{flex-wrap: wrap;}
.c_sec01 li{border-radius: 10px;box-shadow:  0 0 10px rgba(0,0,0,0.2);background: #efe9e4;border: solid 3px #fff;color:#918070;width: 49%;padding:30px;font-size: 150%;text-align: center;margin-bottom: 2%;}

.c_sec02 strong{font-size: 400%;display: block;text-align: center;}
.c_sec02 strong img{width: 40px;margin-right: 10px}
.c_sec02 p{text-align: center;padding-top: 20px}
.c_sec03 th{width:25%; }
.c_sec03 th span{background:#918070;color:#fff;padding:2px 5px;font-size:80%;float:right; line-height: 100%;margin-top: 8px}
.c_sec03 td input,
.c_sec03 td textarea{padding: 5px;border-radius: 5px;border: none;box-shadow: 0 0 5px rgba(0,0,0,0.2);font-size: 100%;background: #fff;width: 100%;}
.c_sec03 .btn input{outline: none;background:#b2a394;color:#fff;padding:15px 0;width:300px;border-radius:100px;font-size:100%;border:none; cursor: pointer;transition: 0.3s;margin: 50px 10px 0}
.c_sec03 .btn input:hover{opacity: 0.7}
.privacy_area .tl{margin-bottom: 30px;}
.privacy_area ul li{margin-top: :5px;list-style: disc;margin-left: 1.4em}


.n_sec a{color:#918070;text-decoration: underline;}
.n_sec .left{width:800px;border-top:dotted 1px #918070}
.blogsingle{border-bottom:dotted 1px #918070;padding:25px 0}
.blogsingle .thum_info{float:left;width:30%}
.blogsingle .thum_info img{width:100%;transition:.5s}
.blogsingle .thum_info img:hover{opacity: 0.7}
.blogsingle .entrybody{float:right;width:65%;letter-spacing:0}
.blogsingle .entrybody h2 a{font-size:150%;color:#918070;padding:10px 0;display:block}
.blogsingle .entrybody .day{color:#888}
.blogsingle .entrybody .btn{padding-top:25px;text-align: left;}
.blogsingle .entrybody .btn a{padding: 15px 0;width: 50%;text-align: center;text-decoration: none;color:#fff;}
.n_sec #sidebar{width:300px;}
.n_sec #sidebar li.widget{padding-bottom:30px}
.n_sec #sidebar h2{background:rgba(178,163,148,0.2);color:#918070;padding:10px 15px}
.n_sec #sidebar li li{border-bottom:dotted 1px #ccc;}
.n_sec #sidebar li li a{display:block;padding:10px 0;transition:.5s;line-height: 130%}
.n_sec #sidebar li li a:hover{color:#918070}
#searchform{padding-top:15px;text-align:center}
#searchform .screen-reader-text{display:none}
#searchform #s{padding:5px;width:190px}
#searchform #searchsubmit{padding:5px}
.entrysingle img{max-width:100%}
.single .n_sec .left{border:none}
.single .n_sec .entrysingle h3{border-top:solid 1px #918070;border-bottom:solid 1px #918070;color:#918070;padding:10px ;font-size:140%;line-height: 140%;}
.single .n_sec .day{display:block;text-align:right;padding:10px 0;color:#888}
.single .n_sec .btn a{color:#fff !important;text-decoration: none !important;}
.single .n_sec .entrysingle{padding-bottom:30px;min-height: 400px}
.single .n_sec .entrysingle p{line-height:200%;padding-bottom:1em}
.single .n_sec .entrysingle p a{color:#918070;text-decoration:underline}
.single .n_sec .entrysingle ul{margin-bottom:1em}
.single .n_sec .entrysingle ul li{list-style-type:disc;margin:.3em;margin-left:1.5em}
.single .n_sec .entrysingle ul li a{color:#918070;text-decoration:underline}
.single .n_sec .left p.btn{padding-bottom:50px}
tablenav:after{content:".";display:block;clear:both;height:0;visibility:hidden}
.tablenav{min-height:1px}
* html .tablenav{height:1px}
.tablenav{display:table;color:#918070;margin:50px auto;line-height:2em;text-align:center;border:solid 1px #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,0.047);font-size:12px;background:#fff}
a.page-numbers,.tablenav .current{display:table-cell;color:#918070;padding:4px 0;text-decoration:none;margin:0;border-right:solid 1px #ddd;width:3em}
.tablenav .page-numbers{display:table-cell;color:#918070;padding:4px 0;text-decoration:none;margin:0;border-right:solid 1px #ddd;width:3em}
a.page-numbers:hover{color:#fff;background:#918070}
.tablenav .current{background:#f5f5f5;color:#999}
.tablenav .next,.tablenav .prev{width:4em}
.tablenav .dots{display:none}
.n_sec .n_sec .btn a{text-align: center;width: 80%;padding: 15px 0}
.n_sec > .flex{align-items: flex-start;}

@media screen and (max-width: 1360px) { 

#header #nav li{margin-left: 2.5vw}

}

@media screen and (max-width: 1260px) { 

/*18px*/
body{font-size: 1.4vw}

#header #logo{margin-left: 2.5vw;padding: 1.5vw 3vw;line-height: 0}
#header #nav{margin-right: 2.5vw}
#header #nav ul li:last-child img{width: 2vw;height: 2vw}
.block{width: 96%;margin: 0 auto;}
.sec02{background: url(./img/sec02_bk.png) no-repeat -30vw center;background-size: cover;}
.n_sec .left{width: 70%}
.n_sec #sidebar{width: 25%;}

}

@media screen and (max-width: 1100px) { 

.m_sec01 .img01{width:18vw ;}
.m_sec01 .img02{width:22vw ;}
#mainview .sell{width: 20vw;left:2.5vw}

}

@media screen and (max-width: 1000px) { 

.m_sec01 .img01,
.m_sec01 .img02{display: none;}


}