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

/***************************************
	common
***************************************/
html{
    font-size:62.5%;
}
body{
    font-family:"游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
    color:#464036;
    letter-spacing:1px;
}
*{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:0px;
    padding:0px;
}

h1{
    margin:10px 0 0;
}
h2{
    font-size:1.8rem;
    line-height:3.5rem;
    color:#898888;
    text-align:center;
    margin:0 0 30px;
}
.h2_n{
    font-style:italic;
    font-size:4.0rem;
    letter-spacing:5px;
    color:#898888;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, transparent), color-stop(80%, #CCCCCC));
    background: linear-gradient(transparent 80%, #fff799 80%);
    padding:3% 1% 0;
}
/*上下半々背景色*/
/*h2{
    width:25%;
    font-size:1.4rem;
    line-height:1.7rem;
    color:#CCCCCC;
    text-align:center;
    background:linear-gradient(180deg,#CCCCCC 0%,#CCCCCC 40%,#898888 0%,#898888 60%);上下半々背景色
    border-radius:8px;
    margin:0 auto 30px;
    padding:0 0 5px;
}
.h2_n{
    font-size:1.0rem;
    color:#898888;
}*/

/*半円見出し*/
/*h2{
    position:relative;
    height:150px;
    font-size:1.6rem;
    line-height:1.8rem;
    color:#CCCCCC;
    text-align:center;
}
h2:after{
    position:absolute;
    width:180px;
    height:90px;
    content: '';
    background-color:#898888;
    border-radius:50% / 0 0 100% 100%;
    top:28%;
    left:42.5%;
    z-index:-1;
}*/

h3{
    text-align:center;
}
h3,h4{
    font-size:2.8rem;
    text-align:center;
    margin:0 0 20px;
}
h5{
    font-size:2.2rem;
}
a{
    text-decoration:none;
    color:#CCCCCC;
}
a:hover{
    opacity:0.7;
    filter:alpha(opacity=70);
}
li{
    list-style:none;
    list-style-position:outside;
}
p,li,dl{
    font-size:2.0rem;
}
dl{
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;/*折り返す*/
}
dd{
    margin:0 0 10px;
}
section {
    margin:0 0 70px;
}


/**** 親 div*ul ****/
.flex{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;    
}
/*折り返し*/
.flex_flow{
    width:100%;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;/*左から右 折り返す*/
}
/*折り返し end*/

/*均等に配置*/
.j_a{
    -ms-flex-pack:distribute;
    justify-content:space-around;
}
/*両端に配置して均等に配置*/
.j_b{
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
}


/**** logo ****/
#logo {
    max-width:1200px;
    margin:0 auto;
}
/**** nav ****/
#nav_mobile{
    display:none;
}
/*ナビだけブラウザいっぱいにする方法*/
/*#nav_main {
    width:100vw;
    background:linear-gradient(180deg,#CCCCCC 0%,#CCCCCC 40%,#898888 0%,#898888 60%);/*上下半々背景色*//*
    margin:0 calc(50% - 50vw);
    padding:0 calc(50vw - 50%);
}*/
#nav_main {
    background:-webkit-gradient(linear,left top, left bottom,from(#CCCCCC),color-stop(40%, #CCCCCC),color-stop(0%, #898888),color-stop(60%, #898888));
    background:linear-gradient(180deg,#CCCCCC 0%,#CCCCCC 42%,#898888 0%,#898888 58%);/*上下半々背景色*/
}
#nav_main ul{
    max-width:1200px;
    text-align:center;
    margin:0 auto;
    padding:0 0 3px;
}
#nav_main li{
    list-style:none;
    font-size:1.8rem;
    line-height:2.6rem;
}
#nav_main a{
    color:#CCCCCC;
}
.li_n{
    color:#898888;
    font-size:0.9em;
}

/**** slider ****/
#slider{
    width:100%;
}
.slider_main .n_btn{
    position:absolute;
    top:44%;
    left:50%;
    height:50px;
    z-index:1;
    margin-left:620px;
}
.slider_main .p_btn{
    position:absolute;
    top:44%;
    left:50%;
    height:50px;
    z-index:1;
    margin-left:-650px;
}
.slick-initialized .slick-slide{
    opacity: 0.2; /* 両サイドの画像を透過 */
}
.slick-initialized .slick-slide.slick-active{
    opacity: 1; /* センター画像を非透過 */
}

    
/*戻る進むボタン付きスライド
.slide{
    width:1200px;
    position:relative;
}
#slide_prev{
    position:absolute;
    top:50%;
    left:-3%;
    cursor:pointer;
}
#slide_next{
    position:absolute;
    top:50%;
    right:-3%;
    cursor:pointer;
}
.slide_main{
    width:1000vw;
    overflow:hidden;
}
.slide_img{
    float:left;
}
*/



/**** main content ****/
#main{
    max-width:1200px;
    margin:auto;
}
/**** ポイント ****/
section#point{
    margin:0 0 30px;
}
.p4{
    width:250px;
    margin:0 0 40px;
}
.p_title{
    position:relative;
    color:#898583;
    font-size:2.4rem;
    line-height:2.4rem;
    text-align:center;
    margin:0 0 10px;
}
.p_title:before{
    position:absolute;
    top:25%;
    bottom:0;
    left:23%;
    display:block;
    margin:auto 0;
    width:1px;
    height:35px;
    background-color:#898583;
    content:'';
    -webkit-transform:rotate(-30deg);
    transform:rotate(-30deg);
}

.p_title:after{
    position:absolute;
    top:25%;
    bottom:0;
    right:23%;
    display:block;
    margin:auto 0;
    width:1px;
    height:35px;
    background-color:#898583;
    content:'';
    -webkit-transform:rotate(30deg);
    transform:rotate(30deg);
}
.p4 img{
    width:100%;
    border-radius:50%;
    border:solid 1px #898583;
    color:#898583;
    padding:10%;
}
.p_text{
    color:#898583;
    text-align:center;
    vertical-align:bottom;
}
.p_text span.p_big{
    font-size:2.8rem;
    font-weight:600;
}


/**** case slide ****/
.sample{
    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;
}
.sample img{
    position:absolute;
    left:0;
    top:0;
    width:100%;
}


/**** プラン ****/
.plan_01,.plan_02{
    margin:0 0 50px;
}
.plan_title01,.plan_title02{
    position:relative;
    width:100%;
    line-height:4.5rem;
    color:#898583;
}
.plan_title01:before,.plan_title01:after,.plan_title02:before,.plan_title02:after{
    position:absolute;
    content:'';
    width:8px;
    height:100%;
}
.plan_title01:before{
    border:solid 1px #687598;
    border-right:none;
    left:25%;
}
.plan_title01:after{
    border:solid 1px #687598;
    border-left:none;
    right:25%;
}
.plan_title02:before{
    border:solid 1px #a4bdc9;
    border-right:none;
    left:34%;
}
.plan_title02:after{
    border:solid 1px #a4bdc9;
    border-left:none;
    right:34%;
}
.r_plan01{
    border:solid 3px #687598;
    margin:0 0 10px;
}
.r_plan02{
    border:solid 3px #a4bdc9;
    margin:0 0 10px;
}

.bplan,.gplan01,.gplan02{
    width:50%;
    padding:30px;
}
.bplan dl{
    margin:0 0 30px;
}
.bplan dt{
    width:70%;
    margin:0 0 2.0rem;
}
.bplan dd{
    width:30%;
    text-align:right;
}
.gplan01,.gplan02{
    color:#fff;
}
.gplan01 h4,.gplan02 h4{
    width:90%;
    font-size:2.3rem;
    margin:0px auto 30px;
}
.gplan01 h4::before,.gplan02 h4::before{
    content:'●';
    color:#fff;
    padding:0 5px 0 0;
}
.gplan01 h4::after,.gplan02 h4::after{
    content:'●';
    color:#fff;
    padding:0 0 0 5px;
}
.gplan01 dt,.gplan02 dt{
    width:40%;
}
.gplan01 dd,.gplan02 dd{
    width:60%;
}
.gplan01{
    background:url(../img/kado.png) no-repeat top right;
    background-color:#687598;
}
.gplan02{
    background:url(../img/kado.png) no-repeat top right;
    background-color:#a4bdc9;
}
.entry01{
    background-color:#687598;
    margin:0;
}
.entry02{
    background-color:#a4bdc9;
    margin:0;
}
.plan_01 a,.plan_02 a{
    display:block;
    width:100%;
    color:#fff;
    padding:20px 0;
}
.plan_01 a{
    background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #7681a0, #7681a0 3px,#687598 3px, #687598 7px);
}
.plan_02 a{
    background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #b1c6d0, #b1c6d0 3px,#a4bdc9 3px, #a4bdc9 7px);
}

.attention{
    font-size:1.6rem;
    text-indent:-1.6rem;
    padding-left:2rem;
}
.attention:before{
    content:'※';    
}
.suuji{
    font-family: 'Oswald', sans-serif;
    font-weight:500;
    font-size:2.4rem;
}
/**** 選べるレイアウト ****/
/*　ストライプ
.stripe{
    font-size:1.4rem;
    background:repeating-linear-gradient(-45deg, #e9e9e9, #e9e9e9 5px,#CCCCCC 5px, #CCCCCC 10px);
    margin:0;
    padding:10px 0;
}
*/
.layout{
    width:30%;
    margin:0 0 5px;
}
.layout h5{
    position:relative;
    background:#cccccc;
    color:#fff;
    margin:0 0 13px;
    padding:0 0 0 10px;
}
.layout h5:after{
    position:absolute;
    content:'';
    top:100%;
    left:30px;
    border:solid 15px transparent;
    border-top:solid 15px #cccccc;
}
.layout img{
    width:100%;
}

/* 偶数の箇所を変更する
.pattern:nth-child(2n+0){
    margin-right:-30px;
}
*/

/**** ご注文form ****/
.form{
    text-align:left;
}
.form h4{
    color:#898888;
}
.form .FormDtHeight dt{
    height:0;
}
.form .FormDtHeight dd{
    margin-bottom:0;
}
.form_s,.form_r{
    width:30%;
    height:45px;
    color:#CCCCCC;
    background:#898888;
}
.form_s:hover,.form_r:hover{
    opacity:0.7;
    filter:alpha(opacity=70);
}
.btn_right{
    width:100%;
    margin:0 0 0 40%;
}
.massage,.frame{
    color:#634d3c;
    background:#CCCCCC;
    padding:10px;
}
.frame{
    width:100%;
    height:50px;
    margin:0 0 15px;
}
.massage{
    width:100% !important;    
    height:80px !important;
    font-size:1.4rem;
    margin:0 0 15px;
    padding:10px;
}
.c_box_q{
    width:19%;
    height:20%;
    color:#CCCCCC;
    background:#898888;
    font-size:1.5rem;
    padding:5px 7px 5px 8px;
}
.c_box_a{
    width:80%;
    font-size:1.4rem;
    line-height:3.0rem;
    padding:0;
}
.c_box_p{
    font-size:1.4rem;
    margin:0 0 10px;
}
.c_box_f{
    width:100%;
    font-size:1.4rem;
    line-height:3.0rem;
}
.f_m{
    margin:0 0 10px;
}

/**** ご注文の流れ ****/
#flow ol{
    margin:0 0 10px;
}
#flow li{
    position:relative;
    margin:10px 0 30px;
}
.f_no{
    position:absolute;
    top:-5%;
    left:0%;
    color:#fff;
    background:#898888;
    border-radius:50%;
    text-align:center;
    line-height:3.0rem;
    padding:10px 20px;
}
.f_text{
    width:250px;
    height:250px;
    border-radius:50%;
    border:solid 1px #898583;
    text-align:center;
    display:block;
    padding:29% 0 0;
}
#flow ol:after{/*flex(space-between)で離れた最終行の7と8を左寄せ*/
    content:'';
    display:block;
    width:250px;
}

/**** ルール ****/
.rule h3{
    width:140px;
    font-size:2.4rem;
    background:#898888;
    border-radius:5px 5px 0 0;
    color:#fff;
    margin:0 0;
    padding:15px 20px;
}
.rule ul{
    border:solid 3px #898888;
    padding:20px 15px 20px 10px;
}
.rule li{
    list-style:disc;
    margin:0 0 0 30px;
}

/**** Q&A ****/
#faq{
    margin:0 0 50px;
}
#faq dl{
    width:30%;

}
#faq dt{
    width:100%;
    height:170px;
    border:solid 3px #898888;
    border-bottom:none;
    color:#898888;
}
#faq dd{
    height:300px;
    background:#898888;
}
.faq_q,.faq_a{
    display:block;
    width:47px;
    font-size:2.6rem;
    margin:0 0 10px;
}
.faq_q{
    color:#CCCCCC;
    background:#898888;
    padding:0 10px 5px;
    margin:0 0 5px;
}
.faq_a{
    color:#898888;
    background:#CCCCCC;
    margin:0 0 5px 3px;
    padding:0 13px 5px;
}
.text_q,.text_a{
    display:block;
    padding:0 20px;
}
.text_a{
    color:#CCCCCC;
}

/**** お問い合わせ ****/
#contact h2,#contact dd{
    margin:0;
}
.form_m,.form_n{
    width:50%;
}
.form_n{
    position:relative;
    padding:0 0 30px;
}
.form_cs,.form_cr{
    position:absolute;
    width:30%;
    height:45px;
    color:#CCCCCC;
    background:#898888;
}
.form_cs:hover,.form_cr:hover{
    opacity:0.7;
    filter:alpha(opacity=70);
}
.form_cs{
    right:31%;
}
.form_cr{
    right:0%;
}
.massage_con,.frame_con{
    color:#634d3c;
    background:#CCCCCC;
    padding:10px;
}
.massage_con{
    width:95%;    
    height:300px;
}
.frame_con{
    width:100%;
    height:70px;
    margin:0 0 12px;
}


/**** footer ****/
footer{
    color:#fff;
    background:#898888;
    padding:50px 0 100px;
}
#foot{
    max-width:1200px;   
    margin:0 auto 50px auto;
}
#foot h3{
    font-size:1.8rem;
}
#foot h4,#foot p,#foot li{
    font-size:1.4rem;
    line-height:2.0rem;
    margin:0;
}
#foot li{
    list-style:disc inside;
}
#foot h4{
    text-align:left;
}

address{
    text-align:center;
    font-size:1.8rem;
}

/**** page top ****/
.scrollbtn{
    width:auto;
    position:fixed;
    bottom:5%;
    right:2%;
}
.pt{
    width:50px;
    height:50px;
    position:relative;
    display:block;
    background:#898888;
    border-radius:50%;
}
.pt::before{
    content:'';
    width:18px;
    height:18px;
    position:absolute;
    top:38%;
    left:27%;
    border:2px solid;
    border-color:#CCCCCC #CCCCCC transparent transparent;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
.scrollbtn p{
    width:100px;
    position:absolute;
    top:100%;
    font-size:0.7rem;
    color:#898888;
}


/**** タブレット ****/
@media screen and (max-width:768px) {
    header #logo,header #nav_mobile,#main,#foot{
        max-width:95%;
        margin-right:auto;
        margin-left:auto;
    }
    
    h2:after{
        left:37%;
    }
    
    /**** スライド ****/
    .slide_img img{
        width:100%;
        height:auto;
    }
    /**** flex アレンジ ****/
    .flex_2{
        width:100%;
        -webkit-box-orient:horizontal;
        -webkit-box-direction:normal;
        -ms-flex-flow:row wrap;
        flex-flow:row wrap;
        -ms-flex-pack:distribute;
        justify-content:space-around;
    }
    /**** プラン ****/
    .ple_flex_none{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
    }
    .plan_title01:before{
        left:16%;
    }
    .plan_title01:after{
        right:16%;
    }
    .plan_title02:before{
        left:28%;
    }
    .plan_title02:after{
        right:28%;
    }
    .bplan{
        width:100%;
    }
    .gplan01,.gplan02{
        width:100%;
    }
    .gplan01{
        border-top:solid 3px #687598;
    }
    .gplan02{
        border-top:solid 3px #a4bdc9;
    }
    .gplan01 dt,.gplan02 dt{
        margin:0 0 10px 0;
    }
    .gplan01 dd,.gplan02 dd{
        margin:0 0 30px 0;
    }
    /**** ルール ****/
    .rule h3{
        top:-20%;
        left:-0.4%;
    }
    /**** Q&A ****/
    #faq dt{
        height:250px;
    }
    #faq dd{
        height:400px;
    }
}

/**** スマホ ****/
@media screen and (max-width: 640px) {
    /**** flex アレンジ ****/
    .flex_none{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
    }
    
    h3,h4{
    font-size:2.4rem;
}
    /**** nav ****/
    .li_n{
        color:#CCCCCC;
        font-size:1.4rem;
    }
    .li_none{
        display:none;
    }
     /* メニューを見えないように配置 */
    #nav_main{
        position:fixed;
        top:0;
        right:0;
        width:100%;
        z-index:1;
        background:#898888;
        color:#CCCCCC;
        text-align:center;
        -webkit-transform:translateY(-100%);
        transform:translateY(-100%);
        -webkit-transition:all 0.6s;
        transition:all 0.6s;
    }
    #nav_main ul{
        margin:0 auto;
        width:100%;
        padding:10px 0 30px;
    }
    #nav_main li{
        font-size:5.0rem;
        width:100%;
    }
    #nav_main li a{
        display:block;
    }
    /* このクラスを、jQueryで付与・削除する */
    #nav_main.active{
        -webkit-transform:translateY(0%);
        transform:translateY(0%);
    }
    /* モバイルmenu */
    #nav_mobile{
        display:block;
        position:fixed;/* bodyに対しての絶対位置指定 */
        top:14px;
        right:2.5%;
        width:60px;
        height:55px;
        cursor:pointer;
        z-index:3;
        background:#898888;
        border-radius:3px;
        text-align:center;
    }
    #nav_mobile span{
        display:block;
        position:absolute;/* .nav_mobileに対して */
        width:46px;
        border-bottom:solid 3px #CCCCCC;
        -webkit-transition:.35s ease-in-out;
        transition:.35s ease-in-out;
        left:7px;
    }
    #nav_mobile span:nth-child(1){
        top:9px;
    }
    #nav_mobile span:nth-child(2){
        top:18px;
    }
    #nav_mobile span:nth-child(3){
        top:27px;
    }
    #nav_mobile span:nth-child(4){
        top:30px;
        border:none;
        color:#CCCCCC;
        font-size:1.2rem;
        font-weight:bold;
    }
    /* Xにするため　最初のspanをマイナス45度に */
    #nav_mobile.active span:nth-child(1){
        top:18px;
        left:6px;
        -webkit-transform: rotate(-45deg);
        transform:rotate(-45deg);
    }
    /* 2番目と3番目のspanを45度に */
    #nav_mobile.active span:nth-child(2),
    #nav_mobile.active span:nth-child(3){
        top:18px;
        -webkit-transform: rotate(45deg);
        transform:rotate(45deg);
    }
    
    h2:after{
        left:34.5%;
    }
    
    /**** プラン ****/
    .plan_title01:before,.plan_title02:before{
        left:0%;
    }
    .plan_title01:after,.plan_title02:after{
        right:0%;
    }
	.bplan dt{
		width:63%;
	}
	.bplan dd{
		width:37%;
	}
    .gplan01 dt,.gplan02 dt,.gplan01 dd,.gplan02 dd{
        width:100%;
    }
    /**** ご注文form ****/
    .form h4{
    font-size:2.0rem;
    }
    .c_box_q{
        width:100%;        
    }
    .c_box_a{
        width:100%;
    }    
    .c_box_a br{
        display:none;
    }
    .layout{
        width:100%;
        margin:0 0 10px;
    }
    /**** ルール ****/
    .rule h3{
        top:-15%;
        left:-0.5%;
    }
    /**** Q&A ****/
    #faq dl{
        width:100%;
    }
    #faq dt{
        height:100%;
        padding:0 0 5%;
    }
    #faq dd{
        height:100%;
        padding:0 0 5%;
    }
    .faq_q,.faq_a{
        width:45px;
    }
}