@charset "utf-8";
/*-----------------------------
 reset
-------------------------------*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p,
img, small, strong, sub, sup,b, i,dl, dt, dd, ol, ul, li,
 form, label,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,hgroup, menu, nav, section,
time, mark, audio, video {
margin:0;    padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;line-height:1.0;
}
th{font-style:normal;font-weight:normal;}
ul li{list-style:none; }
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}

body {line-height:1;}
nav ul {list-style:none;}
table {    border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
article, aside, figure, footer, header,hgroup, nav, section { display:block; }
img{vertical-align:bottom;}
/*-----------------------------
 common
-------------------------------*/
body {
    -webkit-text-size-adjust100%;
    font-family: HiraKakuProN-W3;
    line-height: 1.4em;
    color: #000;
    background:url(bg.png) repeat;
    /*
    background-size:50% 50%;
    -moz-background-size:50% 50%;
    -webkit-background-size:50% 50%;
    */
}

/* タップ時の反転色
-------------------------------------*/
a{
    -webkit-tap-highlight-color: rgba(255, 255, 102, 0.3);
    text-decoration:none;
    color:#000;
  background-color:FFF;
  -webkit-touch-callout:none;
}

/*-----------------------------
/ content
/------------------------------*/
#container{
    margin:0 auto;
    text-align:center;
    width:750px;
    max-width: 100%;
}
.btnarea1{
    margin:4px 10px 10px;
}
.mbg{
    background:url(mbg.png) repeat;
    padding:10px;
}
.mbg .whiteBg{
    background:#FFF;
    padding:8px;
}
.mbg .whiteBgInner{
    background:#FFF;
    border:solid 2px #000;
    margin:10px 0;
    text-align:center;
}
.clist{
    text-align:left;
    padding:10px;
    background-color:#993300;
    margin:10px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
}
.clist li{
    background:url(s7.png) no-repeat;
    background-size:20px 20px;
    color:#FFF;
    padding-top:5px;
    padding-left:24px;
    padding-bottom:10px;
}


.s4{
    padding:10px 0 10px 0;
}
.s6{
    padding:10px 0 0 0;
}
.s9{
    padding:10px 0 0 0 ;
}
.s10{
    padding:0 0 10px 0;
}
.s12{
    padding-top:10px;
}
.s13{
    padding-top:26px;
}

.v1{
    padding-top:10px;
}
.vbg{
    background:#762000;
    padding-bottom:10px;
}
.vbg .whiteBg{
    background:#FFF;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding:0 10px 10px;
    margin:0 10px ;
}
.vtext{
    text-align:left;
    line-height:1.5em;
    font-size:14px;
    padding-bottom:10px;
}

.s14{
    padding:10px 0;
}
.pro{
    text-align:left;
    font-size:14px;
    color:#4A2700;
    line-height:1.6em;
    border-top:solid 1px #4A2700;
}
.pro p{
    border-bottom:dotted 1px #4A2700;
    padding:5px 0;
}
.notes{
    font-size:12px;
    text-align:right;
    color:#FFF;
    padding:3px 0 12px;
}
.notes2{
    font-size:12px;
    text-align:right;
    color:#000;
    padding:3px 0 12px;
}

.jikkan{
    margin-top:20px;
}

#offerarea{
    background:#4F7E87;
    padding-bottom:5px;
}
#offerarea .whiteBg{
    margin:3%;
    background-color:#FFF;
}
#offerarea .whiteBg2{
    margin:0 3% 3% 3%;
    background-color:#FFF;
    text-align:center;
    padding:5px 0;
}
.btnarea{
    padding:5px 0;
}


.example {
  position: relative;
  }

.example p {
  position: absolute;
  color:;
  top:0px;
  left:340px;
  }

.example img {
  width:200%;
  }

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

/*スマホ用オファー背景*/
.offer1{

width:100%;
height:auto;
position: relative;
}

.offer2{
      
width:100%;
height:97%;
position: relative;
}
      
.offer3{
      
width:100%;
height:auto;
position: relative;
}

.offer4{
      
width:100%;
height:auto;
position: relative;
}

/*スマホ用オファーボタン位置*/

.botan1{

position:relative;
top:79%;
left:3%;
width:96%;
border-style:none;
outline:0;
}

.botan2{
position:absolute;
top:64%;
left:0%;
width:97%;
border-style:none;
outline:0;
}

.botan3{
position:absolute;
top:81%;
left:-1%;
width:101%;
border-style:none;
outline:0;
}

.botan4{

position:absolute;
top:76%;
left:3%;
width:96%;
border-style:none;
outline:0;
}
}

@media screen and (min-width: 751px){

/*PC用オファー背景*/
.offer1{

width:750px;

position: relative;
border-style:none;
outline: 0;
}

.offer2{
    
width:771px;

position: relative;
border-style:none;
outline: 0;
}

.offer3 {
width: 100%;

position: relative;
border-style: none;
outline: 0;
}

.offer4 {
width: 100%;
position: relative;
border-style: none;
outline: 0;
}

/*PC用オファーボタン位置*/
.botan1{
position:;
top:1018px;
left:-14px;
border-style:none;
outline: 0;
width: 103%;
}

.botan2{
position:absolute;
top:490px;
left:2px;
border-style:none;
outline: 0;
}	
    
.botan3{
position:absolute;
top:1347px;
left:3px;
border-style:none;
outline: 0;
}	

.botan4{
position:absolute;
top:1023px;
left:3px;
border-style:none;
outline: 0;
}	


}


.promise{
    text-align:left;
    padding:10px;
    background:#86711E;
    font-weight:bold;
    color:#FFF;
}
.promiseText{
    text-align:left;
    padding:5px 10px 10px 10px;
    line-height:1.5em;
    font-size:14px;
    background:#FFF;
}
.tel{
    margin:5px 0 2px;
}
.time{
    font-size:12px;
}

.footerInfo{
    background:#FFF;
}
.payment{
    text-align:left;
    font-size:14px;
    font-weight:bold;
    color:#999;
    padding:10px 10px 5px 10px;
}


.pt10{
    padding-top:10px;
}
.red{
    color:#DD0000;
}
.mb10{
    margin-bottom:10px;
}




/*-----------------------------
/ footer
/------------------------------*/
.links{padding: 0 10px 15px;text-align:center;font-size:12px;line-height:1.7em;}
.links a{
    font-size:12px;
    color:#0100fe;
    text-decoration:underline;
}
#footer{
    color:#0100fe;
    font-size:11px;
    display:block;
    width:100%;
    text-align:center;
    padding:5px 0 28px;
    background-color:#d0b89c
}

/*------------------------------------
/  clearfix
/ ------------------------------------*/

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/*------------------------------------
/  アコーディオン
/ ------------------------------------*/
.toggle {
    position: relative;
    overflow: hidden;
}
.toggle:before {
    content: '';
    width: 100%;
    height: 100%;
    background:url(ico_down.png)no-repeat;
    background-size: 6%;
    position: absolute;
    top: 22%;
    right: -92%;
}
.toggle.active:before {
    content: '';
    width: 100%;
    height: 100%;
    background:url(ico_up.png)no-repeat;
    background-size: 6%;
    position: absolute;
    top: 22%;
    right: -92%;
}
/*------------------------------------
/  モーダル
/ ------------------------------------*/
.modalBtn:hover {
    cursor: pointer;
}
.modalContent {
    padding: 20px 0;
    border-bottom: solid 1px #dcdcdc;
    text-align: left;
    color: #3a3a3a;
}
.modalContent-top {
    margin-bottom: 10px;
}
.modalContent-top_left {
    float: left;
    width: 70px;
}
.modalContent-top_left img {
    width: 90%
}
.modalContent-top_right {
    float: right;
    margin-top: 12px;
}
.name {
    color: #ed7c5e;
    margin-bottom: 10px;
}
.name span {
    font-weight: bold;
}
.star {
    color: #e6aa0a;
}
.modalContent-text {
    color: #888888;
}
.modalContent-text p {
    line-height: 1.3;
}

.color-base{font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;margin:0; text-align:right; font-size:5px; margin-right:auto;}

/*-----------------------------
 common_from_HE
-------------------------------*/
.wrap,.footer{
    max-width: 750px;
    margin: 0 auto;
    background:#fff;
    }
    .footer img{
        display: inline;
        max-width: 750px;
    }
    .footer p{
        font-size: 0.9rem;
    }
    .verisign{
        width: 101px;
        height: 71px;
    }
    .mlritz{
        width: 130px;
        height: 47px;
    }
    .overlaid{
            position: relative;
    }
    .movie {
        padding: 111% 10% 0 10%;
        width:80%;
        z-index: 1;
        position: absolute;
    }
    .btn,.option,.gif,.pop{
        position: absolute;
    }
    .btn01{
        width: 92%;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 100%;
    }
    .btn02{
        width: 92%;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 6%;
    }
    .btn03{
        width: 92%;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 5.6%;
    }
    .gif01{
        width: 86%;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom:35%;
    }
    .gif02{
        width: 85%;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 47%;
    }
    .option01{
        width: 44%;
        left: -0.3%;
        bottom: 38.7%;
        z-index: 3;
    }
    .gif03{
        width: 82%;
        margin: 0 auto;
        left: 0;
        right: 0;
        bottom: 42.6%;
        overflow: hidden;
    }
    .slide_bg_01{
        position: absolute;
    }
    .slideArea01{
        padding: 436px 0 47px;
        max-height: 1419px;
        width: 97%;
        margin: 0 auto;
        background: #F0F0EB;
    }
    .slick-slide {
        position: relative;
    }
    #thumb{
        margin: 0 auto 1% 1.6%;
    }
    #slick01{
        width: 99%;
        margin: 0 auto;
    }
    #thumb .slick-slide::after{
        width: 100%;
        max-width: 103px;
        height: 13.8vw;
        max-height: 104px;
        position: absolute;
        content: "";
        background: rgba(0, 0, 0, 0.6);
        top: 0;
        border-radius: 5px;
    }
    #thumb .slick-slide{
        margin: 0 2.4% 0 0;
        cursor: pointer;
        max-width: 103px;
    }
    #thumb .slick-slide:last-child{
        margin: 0 0 0 0;
    }
    #thumb .slick-current::after{
        background: none;
    }
    .slick-prev, .slick-next {
        width: 91px;
        height: 91px;
    }
    .slick-prev::before{
        content:url("../dis_04t/before.png");
        background-size: 100%;
    }
    .slick-next::before {
        content:url("../dis_04t/after.png");
        background-size: 100%;
    }
    button.slick-prev, button.slick-next {
        z-index:2;
    }
    .slick-prev{
        left: 5.2%;
    }
    .slick-next{
        right: 5.6%;
    }
    .slick04Area .slick-prev{
        left: 1.2%;
        top: 65.9%;
    }
    .slick04Area .slick-next{
        right: 0%;
        top: 65.9%;
    }
    .slick-prev:before, .slick-next:before {
        content:"";
    }
    .slick-arrow{z-index:10;}
    .slick-prev img:hover{
        opacity: .6;
    }
    .slick-next img:hover{
        opacity: .6;
    }
    .slideArea01 .slick-dots{
        bottom: 48.6%;
    }
    .slick-dots li button:before{
        font-size: 45px;
    }
    #slick02.slick-slide,#slick03 .slick-slide{
        max-width: 10%;
    }
    .slide_bg_02{
        position: absolute;
        top:0;
    }
    .slide_bg_03{
        position: absolute;
        bottom:0;
    }
    #slick02{
        padding: 27% 0 0;
        z-index: 1000;
    }
    #slick03{
        padding: 0 0 86px;
        z-index: 3;
    }
    #slick04{
        width: 90%;
        margin: 0 auto;
        margin: -98% auto 0%;
        padding-bottom: 20%;
    }
    #slick04 .slick-dots{
        z-index: 5;
        bottom: 8.3%;
    }
    .pop01{
        width: 86%;
        left: 0.7%;
        right: 0;
        margin: 0 auto;
        bottom: 6.3%;
    }
    .pop01:hover{
        opacity: .6;
    }
    .close{
        width: 11.25vw;
        max-width: 72px;
        height: 11.25vw;
        max-height: 72px;
        background: rgba(0,0,0,0.9);
        border-radius: 50%;
        position: absolute;
        right: -5%;
        top: -4%;
        display: block;
        cursor: pointer;
    }
    .close:hover{
        opacity: 0.6;
    }
    .close::before{
        position: absolute;
        content: "";
        width: 60%;
        height: 1px;
        border-bottom: solid #fff 3px;
        transform:rotate(-45deg);
        margin: auto;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }
    .close::after{
        position: absolute;
        content: "";
        width: 60%;
        height: 1px;
        border-bottom: solid #fff 3px;
        transform:rotate(45deg);
        margin: auto;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }
    .modal-window-content img{
        width: 100%;
    }
    .scroll{
        position: absolute;
        width:100%;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        overflow-y: scroll;
        max-height: 810px;
        height: 108vw;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 9%;
        -ms-overflow-style:none;
    }
    .scroll::-webkit-scrollbar{
        display:none;
    }
    .iziModal .iziModal-wrap {
        width: 86%;
    }
    #thumb .slick-track{
        transform: translate3d(0, 0px, 0px) !important;
    }
    @media screen and (max-width: 750px){
        .footer p{
            font-size: 1.92vw;
        }
        .verisign{
            width: 13.466vw;
            height: 9.46vw;
        }
        .mlritz{
            width: 17.33vw;
            height: 6.266vw;
        }
        .slick-dots li button:before{
            font-size: 6vw;
        }
        .slick-prev, .slick-next {
            width:12.2vw; 
            height:12.2vw; 
        }
        .slideArea01{
            padding: 58vw 0 6vw;
        }
                /*------------------------------------
            #slick02{
            padding-top: 55%;
            z-index: 3;
                / ------------------------------------*/

        }
        #slick03{
            padding: 0 0 11.47vw;
            z-index: 3;
        }
        #slick04 {
        }
        .slick-dots li{
            width: 2.7vw;
            height: 2.7vw;
        }
        .pop01:hover{
            opacity: 1;
        }
        .iziModal .iziModal-wrap {
            width: 90%;
        }
    }/*SP end*/
    /*------------------------------------
    /  アコーディオン
    / ------------------------------------*/
    .toggle {
        position: relative;
        overflow: hidden;
    }
    .toggle:before {
        content: '';
        width: 100%;
        height: 100%;
        background:url(ico_down.png)no-repeat;
        background-size: 6%;
        position: absolute;
        top: 22%;
        right: -92%;
    }
    .toggle.active:before {
        content: '';
        width: 100%;
        height: 100%;
        background:url(ico_up.png)no-repeat;
        background-size: 6%;
        position: absolute;
        top: 22%;
        right: -92%;
    }
    
    /*-----------------------------
     選択オファー
    -------------------------------*/
    
    .btn01{
        top: 23.7%;
        left: -0.6%;
        right: 0;
        margin: 0 auto;
        width: 92.3%;
    }
    .btn02{
        top: 89%;
        left: -0.6%;
        right: 0;
        margin: 0 auto;
        width: 92.3%;
    }
    .btn03{
        top: 20%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 92.3%;
    }
    .btn05{
        top: 34%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 92.3%;
    }
    
    /*************************
    Tab
    *************************/
    .Tab{
    background: url(../dis_04t/offer_back.jpg);
    background-position:top;
    }
    .Tab__Text{
        width: 100%;
    }
    .TabBtn{
        display: flex;
        margin: 0 auto;
        width: 100%;
    }
    .TabBtn03{
        display: flex;
        margin: 0 auto;
        width: 100%;
    }
    .TabWrap{
    margin: -1px auto 0;
    position: relative
    }
    .TabWrap1{
    margin: -1px auto 0;
    position: relative
    }
    .TabWrap2{
        margin: -1px auto 0;
        position: relative;
    }
    
    .TabWrap--01,.TabWrap--03,.TabWrap--04,.TabWrap1--04,.TabWrap1--06,.TabWrap1--07{display: none}
    .TabBtn01,.TabBtn02,.ToggleBtnWrap,.TabBtn05{
        top: 35%;
        left: 0;
        right: 0;
        margin: auto;
        width: 92%;
    }
    .ToggleBtnWrap{
        top: auto;
        bottom: 3.7%;
    }
    .TabBtn05{top: 41.7%;}
    .BtnToggle{
        cursor: pointer;
        position: absolute;
        width: 7%;
        height: 3%;
    }
    .BtnToggle__Inner{position: relative}
    .BtnToggle--01{
        top: 21.4%;
        right: 9.1%;
    }
    .BtnToggle--02{
        bottom: 15.8%;
        right: 8.9%;
    }
    .BtnToggle__Btn--01{opacity: 0	}
    .BtnToggle--On .BtnToggle__Btn--01{ opacity: 1}
    .TabBtn03--01{
        width: 95%;
        top: 23.9%;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .TabBtn03--02{
        width: 96%;
        left: 0;
        right: 0;
        margin: 0 auto;
        position: absolute;
        bottom: 3.4%;
    }
    .TabBtn__Item{cursor: pointer}
    .TabWrap2{
        margin: -1px auto 0;
        position: relative;
    }
    .TabBtn2{
        display: flex;
        margin: 0 auto;
        width: 100%;
    }
    .TabWrap3{
        margin: -1px auto 0;
        position: relative;
    }
    .TabBtn3{
        display: flex;
        margin: 0 auto;
        width: 100%;
    }