/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@charset "utf-8";
.pc{
display:block;
}
.sp{
display:none;
}
@media screen and (max-width:640px) {
.pc{
display:none;
}
.sp{
display:block;
width: 100%;
}
}

/*___________ common ___________ */

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
margin: 0;
padding: 0;
text-align: left;
font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'ＭＳ Ｐゴシック', sans-serif;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
body {
-webkit-text-size-adjust: none;
margin: 0px;
padding: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
min-height: 100vh;
background-color: #fcfcf7;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
img {
border: 0;
vertical-align: bottom;
max-width: 100%;
width: 100%;
}
ul, ol, li {
list-style: none;
}
table {
border-spacing: 0;
empty-cells: show;
}
.clearfix::after {
clear: both;
content: "";
display: block;
}
.wrapper {
padding: 0 10px;
}
#mask {
background-color: #000;
opacity: 0.3;
position: fixed;
z-index: 10;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.maskOn {
display: block !important;
}
.mask-action {
position: relative;
z-index: 11;
}
#modal{
display: none;
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.7);
}
#modal_content{
width:320px;
background:#fff;
margin:15% auto;
padding:20px;
position:relative;
-webkit-animation:animatetop 0.4s;
animation:animatetop 0.4s;
line-height: 1.7;
font-size: 13px;
text-align: center;
border-radius: 10px;
}
#modal_content p {
margin-bottom: 20px;
}
#modal_content button {
font-size: 14px;
font-weight: bold;
padding: 10px 20px;
background-color: #ccc;
color: #626262;
border-style: none;
border-radius: 10px;
margin: 0 5px;
}
#modal_content button:hover {
background-color: #f06072;
color: #fff;
}
@-webkit-keyframes animatetop{
from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
@keyframes animatetop{
from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
@media screen and (min-width:630px) {
#modal_content{
font-size: 16px;
padding: 30px;
width: 500px;
}
#modal_content button {
font-size: 16px;
}
}


/*--------------header----------------*/
header {
width: 100%;
}
main {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.logo {
width: 13%;
}
.header_item {
width: 20%;
}
.header-logo {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
padding: 5px 10px;
}
.header-logo img {
width: 100%;
}
.header-right p {
text-align: right;
}
.welfare-permission {
font-size: 8px;
color: #715a53;
}
.header-keyword img {
margin-top: -6px;
width: 180px;
}

@media screen and (max-width:640px){
.header-logo {
    justify-content: space-between;
}
.header_item {
    width: 40%;
}
}

/*--------------mv----------------*/
.sp_fv{
background: #fffdf5;
}
.sp_fv img {
width: 100%;
}
.pc_fv {
background: #f6eddc;
}
.pc_fv img {
max-width: 100%;
margin: auto;
display: block;
width: 100%;
}

/*------------------認定--------------------*/
.gro{
max-width: min(65vw,900px);
margin: 0 auto;
padding: 2%;
}
@media screen and (max-width:640px){
.gro{
max-width: 98%;
padding: 2% 0;
margin: 0 auto;
}
}

.rank{
padding: 4% 0;
width: 100%;
background-color: #fff;
background-image: radial-gradient(#f9e8e5 10%, transparent 13%);
background-size: 20px 20px;
}
.rank img {
width: 700px;
margin: auto;
}

/*お悩み*/
.point_contents{
    background-color: #f8f8f8;
    padding: 5% 0 0;
}
.nayami img {
max-width: 800px;
margin: auto;
width: 100%;
}
.nayami {
padding-top: 4%;
}
.point_area{
max-width: 1000px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    margin: 5% auto;
}
.point_area div{
    width: calc(97% / 3);
}

@media screen and (max-width:640px){
.point_contents{
    padding: 10% 0;
}
.point_area{
    flex-direction: column;
    margin: 10% auto;
}
.point_area div{
    width: 90%;
    margin: 2% 0;
}
.nayami {
padding: 10% 10% 0;
}
.nayami img {
width: 100%;
}
}

/*ボタン*/
.btn img {
width: 100%;
}
.btn {
margin: 0 auto;
width: 60%;
}

.bg_b{
background-color: #eef6df;
}
.bg_p{
background: #f6dbaf;
padding: 0% 0 1% 0;
}

/*選ばれる理由*/
.reason_contents{
    background-color: #f7eddd;
padding: 6% 0 4%;
}
.reason_tit img {
max-width: 700px;
margin: auto;
width: 100%;
}
.reason_tit {
padding-top: 4%;
text-align: center;
    margin: 0 auto;
}
.reason_area{
    max-width: 1100px;
    margin: 6% auto;
}
.reason_area div{
    margin: 3% 0;
}

@media screen and (max-width:640px){
.reason_contents{
padding: 15% 0 10%;
}
.reason_tit img {
margin: auto;
width: 100%;
}
.reason_tit {
padding: 0 10%;
}
.reason_area{
    margin: 13% auto;
}
.reason_area div{
    margin: 3% 0;
    padding: 0 4%;
}
}

/*流れ*/
.step_contents{
    padding: 6% 0 4%;
}
.step_tit{
    padding-top: 4%;
text-align: center;
    margin: 0 auto;
}
.step_tit img{
    max-width: 700px;
margin: auto;
width: 100%;
}
.step_area{
        max-width: 1000px;
    margin: 6% auto;
}
.step_area div.step_end{
        max-width: 500px;
    margin: 6% auto 0;
}

@media screen and (max-width:640px){
.step_contents{
    padding: 15% 0 10%;
}
.step_tit{
    padding: 4% 10% 0;
}
.step_area{
margin: 10% auto;
    padding: 3%;
}
.step_area div.step_end{
    margin: 7% auto 0;
padding: 3% 15%;
}
}

/*footer*/
.footer_box{
    background-color: #e3eca6;
    padding: 2% 3% 4%;
}
.center {
color: #675c58;
text-align: center;
font-size: 13px;
line-height: 2;
}
p.center a {
color: #675c58;
}
@media screen and (max-width:640px){
.footer_box{
    padding: 13% 3% 15%;
}
.center {
font-size: 3.5vw;
line-height: 2;
font-weight: bold;
}
}



.btn_area {
padding-top: 2%;
padding-bottom: 8%;
max-width: 700px;
width: 100%;
margin: auto;
}
.btn.bg_g.shine.pb_6 {
max-width: 600px;
margin: auto;
width: 100%;
}

@media screen and (min-width:370px) {
.header-keyword img {
width: 220px;
}
}
.copyright {
padding: 12px;
}
.copyright p {
font-size: 11px;
color: #ccc;
text-align: center;
}
.footer-menu {
background-color: #acabac;
color: #626262;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 12px;
padding: 10px;
}
.footer-menu div {
margin: 0 20px;
}

.footer-menu a {
color: inherit;
}

/*___________ common ___________ */

/*___________ other ___________ */

.main-visual {
background: url(../img/top_bg.png) no-repeat;
background-position: center;
background-size: contain;
position: relative;
z-index: 1;
}
.main-visual-container {
text-align: center;
max-width: 600px;
position: relative;
margin: auto;
}
.main-visual-container > img {
width: 100%;
margin-left: -50px;
}
.main-visual .zoo-box {
position: absolute;
bottom: 0;
left: 12%;
width: 50%;
max-width: 330px;
}
.zoo-party {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.zoo-party li img {
max-width: 100%;
}
.section-banner {
position: relative;
z-index: 2;
}
.crowns-banner {
text-align: center;
margin-top: -5%;
margin-bottom: 15px;
}
.crowns-banner img {
width: 95%;
max-width: 750px;
}
.shine{
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.shine::before{
content: '';
width: 30px;
height: 100%;
background-color: #fff;
animation: shine 3s ease-in-out infinite;
position: absolute;
top: -180px;
left: 0;
opacity: 0;
transform: rotate(45deg);
}
/* 光の動き */
@keyframes shine{
0% {
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@media screen and (max-width:640px){
.logo {
width: 35%;
}
.btn {
width: 90%;
}
.reason_sp{
background-color: #eef6df;
padding: 10% 0 0 0;
}
.reason_sp img{
width: 88%;
margin: auto;
transform: translateY(-5px);
}
.bg_g{
background: url(../img/bg01.jpg);
}
.bg_b{
background-color: #eef6df;
padding-bottom: 4%;
}
.bg_p{
background: #f6dbaf;
padding: 0% 0 3% 0;
}
.btn_area {
padding: 8% 0 13% 0;
max-width: 360px;
}
.review img{
width: 90%;
margin: 0 auto;
padding: 10% 0 5%;
}
.section-thanks figure img {
max-width: 250px!important;
margin: auto;
display: block;
width: 100%;
}
.step img{
width:100%;
}
.step{
background: transparent url(../img/bg02.jpg) 0 0 repeat;
}
.section-step {
padding: 11% 0;
background: #f6eddc;
}
}
h2 {
text-align: center;
}
h2 img {
width: 90%;
}
.section-thanks {
text-align: center;
line-height: 1.2;
padding-top: 20px;
}
.section-thanks h1 {
color: #ff8c73;
display:inline-block;
text-align: center;
font-size: 32px;
font-weight: bold;
padding-bottom: 10px;
border-bottom: dashed 3px #ff8c73;
margin-bottom: 15px;
}
.section-thanks p {
text-align: center;
font-size: 17px;
margin-bottom: 20px;
}
.section-thanks figure img {
max-width: 280px;
margin: auto;
display: block;
width: 100%;
}
.section-thanks .return-top a {
color: #fff;
display: block;
font-size: 22px;
font-weight: bold;
padding: 16px 8px;
border-radius: 10px;
background-color: #82cddb;
width: 300px;
margin: auto;
-webkit-filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
}
@media screen and (min-width:630px) {
.section-thanks {
padding-top: 40px;
}
.section-thanks p {
margin-bottom: 40px;
}
}

@media screen and (min-width:630px) {
.pb_6{
padding-bottom:6%;
}
}
@media screen and (min-width:896px) {
.crowns-banner {
margin-top: -40px;
}
.copyright p {
font-size: 14px;
}
.footer-menu {
font-size: 16px;
padding: 8px;
}
.footer-menu div {
margin: 0 20px;
}
.section-thanks h1 {
font-size: 37px;
padding-bottom: 16px;
margin-bottom: 20px;
}
.section-thanks p {
font-size: 20px;
margin-bottom: 26px;
}
.section-thanks .return-top a {
font-size: 28px;
padding: 22px 14px;
width: 365px;
}
}

@media screen and (min-width:700px) {
ul.slick01.slider.slick-initialized.slick-slider.slick-dotted {
margin: auto;
width: 100%;
}
.section-step {
background: #f6eddc;
padding: 60px 0;
}
.wrapper {
width: 1020px;
margin: auto;
}
.header-keyword img {
width: 420px;
}
.welfare-permission {
font-size: 14px;
}
.main-visual {
background-repeat: repeat;
}
.main-visual-container {
text-align: center;
max-width: 660px;
position: relative;
margin: auto;
}
.main-visual-container > img {
width: 100%;
margin-left: -50px;
}
.main-visual .zoo-box {
position: absolute;
bottom: 0;
left: 12%;
width: 50%;
max-width: 330px;
}
.zoo-party {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.zoo-party li img {
max-width: 100%;
}
.section-thanks h1 {
font-size: 42px;
}
.section-thanks p {
font-size: 22px;
margin-bottom: 80px;
}
.section-thanks .return-top a {
font-size: 30px;
width: 400px;
}
}
/*お客様の声*/
.uservoice{
text-align: center;
padding: 3% 0 5% 0;
}
.uservoice img {
width: 100%;
margin: auto;
display: block;
}
.uservoice h3{
margin-bottom: 5%;    
}
.review_pc img{
max-width: 500px;
width: 90%;
margin: auto;
padding: 5% 0 0;
}

/*スライダー共通*/
.comment{
margin: 3% 0 1%;
    line-height: 1.6;
    font-size: 15px;
}
.slide_area{
    background-color: #f6eddc;
    padding: 5%;
    max-width: 1000px;
    width: 50vw!important;
}
.slick-initialized .slick-slide {
display: inline;
margin: 0;
}
.slick-slide img {
width: 100%;
height: auto;
}
.slick-prev, .slick-next {
z-index: 1;
}
/*スライダー*/
.slick01 {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 100%;
    margin:25px auto 0;
}
.slick-slide img {
    display: inline-block;
    padding: 0;
    margin: 0 auto;
}
.slick01 .slick-slide {
    transform: scale(0.8);/*左右の画像のサイズを80%に*/
    transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
    opacity: 0.5;/*透過50%*/
}
.slick01 .slick-slide.slick-center{
    transform: scale(1);/*中央の画像のサイズだけ等倍に*/
    opacity: 1;/*透過なし*/
}
.slick-list {
    overflow: inherit;
}
/*矢印の設定*/
.slick-prev {/*戻る矢印の位置と形状*/
    left: 22.7%;
    z-index: 999;
}
.slick-next {/*次へ矢印の位置と形状*/
    right: 24.2%;
}
/*ドットナビゲーションの設定*/
.slick01 .slick-dots {
    text-align:center;
    margin:20px 0 0 0;
}
.slick01 .slick-dots li {
    display:inline-block;
    margin:0 5px;
}
.slick01 .slick-next:before {
    content: '▶';
}
.slick01 .slick-prev:before {
    content: '◀';
}
.slick01 .slick-next {
    right: 22%;
}
.slick01 .slick-prev{
    left: 22%;
}
.slick01 .slick-prev:before, .slick01 .slick-next:before{
    color: #e87953;
    font-size: 30px;
}
.slick01 .slick-dots li button:before {
    font-size: 15px;
    line-height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: #c2c2c2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick01 .slick-dots li.slick-active button:before {
    color: #e87953;
}

/*----------sp------------*/
@media (max-width: 767px) { 
/*スライダー*/
.uservoice {
text-align: center;
padding: 3% 0 1% 0;
}
.slick01 {/*横幅94%で左右に余白を持たせて中央寄せ*/
    margin:0 auto 0;
}
.slide_area{
    padding: 5%;
    width: 85vw!important;
}
.slick01 .slide_contents p{
font-size: 3.6vw;
}
.section .slick-prev:before, .section .slick-next:before {
font-size: 5vw;
}
.slick01 .slick-next {
right: 1.9vw;
}
.slick01 .slick-prev{
left: 0.5vw;
}
.section .slick-dots li button:before {
font-size: 10px;
line-height: 40px;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
p.fcP {
margin: 0 0 0 2%!important;
font-size: 3.8vw!important;
font-weight: bold;
color: #e9a0a0;
}
.slick01 .slide_icon{
background-color: #e9a0a0;
padding: 2%;
color: #fff;
display: table;
font-weight: bold;
border-radius:5px;
}
}