@charset "utf-8";

/* ***********************************************************
* メイン画像
* *********************************************************** */
#page.index main{
	width: 100%;
	background-color:#f9f9f9;
}
#page.index main .swiper-container{
    max-width:1200px;
    margin:0 auto;
}
#page.index main .swiper-wrapper{
    width:100%;
}
    #page.index main .swiper-wrapper img{
        max-width:1200px;
        max-height:686px;
        width: 100%;
    }
    #page.index main .main-comment{background-color:#efefef;}
    #page.index main .main-comment p{
        width:80%;
        height:70px;
        margin:0 auto;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-content: center;
        align-content: center;
    }
@media (max-width: 575px) {
    #page.index main .main-comment p{
        width:90%;
        height:47px;
        line-height:1.4;
    }
}


.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
    display:none !important;
}



/* ***********************************************************
* トップページ
* *********************************************************** */

/* ---------- タブボックス ---------- */
#page.index #contents .tabbox{
    display:table;
}
#page.index #contents .tabbox .l{
    width:50%;
}
    #page.index #contents .tabbox .l img{
        width:100%;
    }
#page.index #contents .tabbox .r{
    width:50%;
    text-align:center;
    padding:0 10px;
}
    #page.index #contents .tabbox .r .click{
        width:23.57%;
        min-width:112px;
        margin:0 auto 20px; 
    }
    #page.index #contents .tabbox .r .click img{width:100%;}
    #page.index #contents .tabbox .r a{display:inline-block;font-weight:bold;color:#000;line-height:1.25;}
        #page.index #contents .tabbox .r .size01{font-size:1.4em;}
        #page.index #contents .tabbox .r .size02{font-size:1.8em;}
        #page.index #contents .tabbox .r .size03{font-size:2.0em;}

        #page.index #contents #sec03 .tabbox .r a:hover{color:#fc9fbe;}
        #page.index #contents #sec05 .tabbox .r a:hover{color:#f7c546;}
        #page.index #contents #sec08 .tabbox .r a:hover{color:#82d8ce;}

@media (max-width: 575px) {
    #page.index #contents .tabbox .l{
        width:100%;
    }
    #page.index #contents .tabbox .r{
        width:100%;
        padding:0;
    } 
        #page.index #contents .tabbox .r .click{
            width:auto;
            min-width:auto;
            margin:10px auto 20px; 
            width:40%;
        }
        #page.index #contents #sec05 .tabbox .r .click,
        #page.index #contents #sec08 .tabbox .r .click{
            margin:20px auto; 
        }
    #page.index #contents .tabbox .r a{display:table;padding:4px 0;width:auto;text-align:center;margin:0 auto;}
        #page.index #contents .tabbox .r .size01{font-size:1.8em;}
        #page.index #contents .tabbox .r .size02{font-size:2.3em;}
        #page.index #contents .tabbox .r .size03{font-size:2.5em;}
}
    

/* ---------- リスト ---------- */
#page.index #contents .list{margin-bottom:40px;}
#page.index #contents .list li{
    width:48%;
    margin-bottom:40px;
}

    #page.index #contents .list li h3{
        font-size:1.8em;
        color:#fff;
        letter-spacing: 0;
        margin:0 auto 15px;
        line-height:1.2;
        text-align:left;
    }
    #page.index #contents #sec06 .list li h3{
        text-align:center;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-align-content: center;
        align-content: center;
        -webkit-justify-content: center;
        justify-content: center;
        height:3.2em;
        margin:0 auto;
    }
    #page.index #contents .list li .boxin{  
        width:100%;
        display:table;
    }
    #page.index #contents .list li .photo{
        max-width:162px;  
        width:42.4%;
        height:auto;
        float:left;
        position: relative;
        overflow: hidden;
    }
        #page.index #contents .list li .photo img{
            width:100%; 
        }
    #page.index #contents .list li .comment{
        max-width:220px;  
        width:56.6%;
        float:right;
        text-align:left;
        color:#fff;
    }
    #page.index #contents .list li .comment p{
        font-size:1.2em;
        line-height:1.4;
    }
#page.index #contents .more{
    position:absolute;
    z-index:10;
	background-image: url(../images/top/more_back.png);
	background-repeat: repeat-x;
	background-position: center bottom;
    height:236px;
    width:100%;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    bottom:0;
    left:0;
    right:0;
}
#page.index #contents .button-more{
    width:398px;
    margin:0 auto;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-color:#000;
    color:#fff;
    background-image: url(../images/common/more_arrow.png);
    background-repeat: no-repeat;
    background-position: right 15px center;
    min-height:48px;
}
        #page.index #contents .button-more span:nth-child(1){
            font-size:1.8em;
            letter-spacing: 2px;
            padding:0 10px;
        }
        #page.index #contents .button-more span:nth-child(2){
            font-size: 1.2em;
            letter-spacing: 1px;
            padding:0 10px;
        }
@media (max-width: 575px) {
    #page.index #contents .list {
        margin-bottom: 40px;
    }
    #page.index #contents #sec06 .list {
        margin-bottom: 100px;
    }
        #page.index #contents .list li{
            width:100%;
            margin-bottom:20px;
        }
        #page.index #contents #sec06 .list li{
            margin-bottom:0;
        }
        #page.index #contents .list li h3{
            margin:0 auto 13px;
            text-align:center;
            font-size:2em;
        }
        #page.index #contents #sec06 .list li h3{
            height:3.6em;
        }
        #page.index #contents .list li .photo{
            max-width:125px;
            width:125px;
        }
            #page.index #contents .list li .photo img{
                width:100%; 
            }
        #page.index #contents .list li .comment{  
            max-width:calc(100% - 125px - 10px);
            width:calc(100% - 125px - 10px);
        }
        #page.index #contents .more{
            background-size: auto 100%;
            height: 118px;
            width: 100%;
        }
        #page.index #contents .button-more{
            width: 260px;
            min-height: 38px;
            background-position: right 8px center;
            background-size: 15px auto;
        }
}


/* ---------- sec01 ---------- */
#page.index #contents #sec01{padding:60px 0 100px;position:relative;}
#page.index #contents #sec01 h2{
	margin:0 auto 55px;
}

#page.index #contents #sec01 .commentbox{
	display:table;
    width:100%;
}
#page.index #contents #sec01 .commentbox .l,
#page.index #contents #sec01 .commentbox .r,
#page.index #contents #sec01 .movie li{
    width:49%;
}
#page.index #contents #sec01 .commentbox .r h3{margin:20px auto;}

    #page.index #contents #sec01 .movie,
#page.index #contents #sec01 .columun{margin-bottom:25px;}
#page.index #contents #sec01 .movie.topbox,
#page.index #contents #sec01 .movie li{position: relative;}

#page.index #contents #sec01 .movie.topbox iframe,
#page.index #contents #sec01 .movie li iframe{
    width:100%;
    min-height:455px;
}
#page.index #contents #sec01 .movie li iframe{min-height:160px;}

@media (max-width: 575px) {
    #page.index #contents #sec01{padding:30px 0 15px;}
    #page.index #contents #sec01 h2{
        margin:0 auto 27px;
        width:75%;
    }
    #page.index #contents #sec01 .movie.topbox iframe,
    #page.index #contents #sec01 .movie li iframe{
        width:100%;
        height:auto;
        min-height:200px;
    }
    
    #page.index #contents #sec01 .movie,
    #page.index #contents #sec01 .columun{margin-bottom:15px;
    }
    #page.index #contents #sec01 .commentbox .l,
    #page.index #contents #sec01 .commentbox .r,
    #page.index #contents #sec01 .movie li{
        width:100%;
    }
    
}

/* ---------- sec02 ---------- */
#page.index #contents #sec02{
	background-image: url(../images/top/sec02_backimg01.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
    min-height:473px;
}
#page.index #contents #sec02 .contentsin{padding:50px 0 0;}
#page.index #contents #sec02 h2{
    margin:0 auto 45px;
}
#page.index #contents #sec02 p{
    font-weight:bold;
    font-size:1.8em;
    line-height:1.4;
    color:#fff;
    width:100%;
    text-align:center;
    margin:0 auto 35px;
}
#page.index #contents #sec02 p.min{
    font-size:1.2em;
    letter-spacing: 2px;
    margin:0 auto 15px;
}
@media (max-width: 575px) {
#page.index #contents #sec02{
    min-height:auto;
}
    #page.index #contents #sec02 .contentsin{
        width:100% !important;
        padding:30px 0 0;
    }
    #page.index #contents #sec02 h2{
        margin:0 auto 25px;
        width:25%;
    }
    #page.index #contents #sec02 p{
        font-size:1.5em;
        margin:0 auto 25px;
    }
    #page.index #contents #sec02 p.min{
        font-size:1em;
        letter-spacing: 1px;
        margin:0 auto 5px;
    }
}

/* ---------- sec03 ---------- */
#page.index #contents #sec03{padding:70px 0 60px;}
#page.index #contents #sec03 h2{
	margin:0 auto 30px;
}
@media (max-width: 575px) {
    #page.index #contents #sec03{padding:25px 0 15px;}
    #page.index #contents #sec03 h2{
        margin:0 auto 15px;
        width:85%;
    }
}


/* ---------- sec04 ---------- */
#page.index #contents #sec04{padding:50px 0 60px;background-color:#fc9fbe;position:relative;}
#page.index #contents #sec04 h2{
	margin:0 auto 45px;
    max-width:300px;
}
@media (max-width: 575px) {
    #page.index #contents #sec04{padding:25px 0 30px;}
    #page.index #contents #sec04 h2{
        margin:0 auto 37px;
        max-width:none;
        text-align:center;
        width:75%;
    }
}


/* ---------- sec05 ---------- */
#page.index #contents #sec05{padding:50px 0 60px;}
#page.index #contents #sec05 h2{
	margin:0 auto 60px;
}
@media (max-width: 575px) {
    #page.index #contents #sec05{padding:25px 0 20px;}
}


/* ---------- sec06 ---------- */
#page.index #contents #sec06{padding:50px 0 60px;background-color:#f7c546;position:relative;}
#page.index #contents #sec06 h2{
	margin:0 auto 45px;
    max-width:300px;
}
@media (max-width: 575px) {
    #page.index #contents #sec06{padding:25px 0 3px;}
    #page.index #contents #sec06 h2{
        margin:0 auto 22px;
        max-width:none;
        text-align:center;
        max-width:75%;
    }
}


/* ---------- sec07 ---------- */
#page.index #contents #sec07{padding:50px 0 50px;}
#page.index #contents #sec07 .imgbox img{width:100%;}
@media (max-width: 575px) {
    #page.index #contents #sec07{padding:25px 0 25px;}
}




/* ---------- sec08 ---------- */
#page.index #contents #sec08{padding:50px 0 60px;}
#page.index #contents #sec08 h2{
	margin:0 auto 40px;
}
#page.index #contents #sec08 p{
	margin:0 auto 0.6em;
    letter-spacing: 2px;
    font-size:1.6em;
    font-weight:bold;
    color:#000;
}
#page.index #contents #sec08 .tabbox{
	margin-top:40px;
}
@media (max-width: 575px) {
    #page.index #contents #sec08{padding:0 0 30px;}
    #page.index #contents #sec08 h2{
        width:80%;
        margin:0 auto 15px;
    }
    #page.index #contents #sec08 p{
        margin:0 auto 1.6em;
        letter-spacing: 2px;
        font-size:1.1em;
        line-height:1.4;
    }
    #page.index #contents #sec08 p.com1{
        margin:0 auto 0.6em;
        letter-spacing: 4px;
        font-size:1.6em;
    }
    #page.index #contents #sec08 .tabbox{
        margin-top:20px;
    }
}


/* ---------- sec09 ---------- */
#page.index #contents #sec09{padding:50px 0 60px;background-color:#80d6c8;position:relative;}
#page.index #contents #sec09 h2{
	margin:0 auto 45px;
    max-width:300px;
}
@media (max-width: 575px) {
    #page.index #contents #sec09{padding:25px 0 30px;}
    #page.index #contents #sec09 h2{
        margin:0 auto 22px;
        max-width:none;
        text-align:center;
        max-width:75%;
    }
}


/* ---------- sec10 ---------- */
#page.index #contents #sec10{padding:40px 0 0;}
    #page.index #contents #sec10 .box{
        padding:50px 0 40px;
        background-color:#eaeaea;
        display:table;
    }
        #page.index #contents #sec10 .photo{
            width:50%;
            padding-left:4.5%;
            vertical-align: bottom;
            display:table-cell;
            height:100%;
        }
        #page.index #contents #sec10 .comment{
            width:50%;
            padding:0 4%;
            display:table-cell;
        }
        #page.index #contents #sec10 .comment h2{
            max-width:222px;
            margin:0 auto 25px;
        }
        #page.index #contents #sec10 .comment p{
            color:#000;
            font-size:1.2em;
            font-weight:bold;
        }
@media (max-width: 575px) {
    #page.index #contents #sec10{padding:20px 0;background-color:#eaeaea;}
    #page.index #contents #sec10 h2{width:60%;margin:0 auto;}
    #page.index #contents #sec10 h2 img{display: block;}
    #page.index #contents #sec10 .box{
        padding:20px 0 0;
    }
        #page.index #contents #sec10 .photo{
            width:100%;
            padding-left:0;
            display:block;
            height:auto;
        }
        #page.index #contents #sec10 .comment{
            width:100%;
            padding: 0;
            display:block;
            margin-top:-10px;
        }
        #page.index #contents #sec10 .comment p{
            line-height:1.4;
        }
}


/* ---------- sec11 ---------- */
#page.index #contents #sec11{padding:30px 0 0;}
    #page.index #contents #sec11 .box{
        padding:30px 0 40px;
        background-color:#eaeaea;
        display:table;
    }
        #page.index #contents #sec11 h2{
            margin:0 auto 40px;
            width:100%;
        }
        #page.index #contents #sec11 .photo{
            width:50%;
            padding-left:4.5%;
            vertical-align: bottom;
            display:table-cell;
            height:100%;
        }
        #page.index #contents #sec11 .comment{
            width:50%;
            padding:0 4%;
            display:table-cell;
        }
        #page.index #contents #sec11 .comment h3{
            max-width:303px;
            margin:0 auto 25px;
        }
        #page.index #contents #sec11 .comment p{
            color:#000;
            font-size:1.2em;
            font-weight:bold;
        }
@media (max-width: 575px) {
    #page.index #contents #sec11{margin-top:15px;padding:0 0 10px;background-color:#eaeaea;}
    #page.index #contents #sec11 h2{
        margin:0 auto 20px;
        width:85%;
    }
    #page.index #contents #sec11 h3{
        width:75%;
        margin:0 auto;
    }
    #page.index #contents #sec11 h3 img{margin:10px auto 15px;display: block;}
    #page.index #contents #sec11 .box{
        padding:20px 0 0;
    }
        #page.index #contents #sec11 .photo{
            width:100%;
            padding-left:0;
            display:block;
            height:auto;
        }
        #page.index #contents #sec11 .comment{
            width:100%;
            padding:0;
            display:block;
            margin-top:-10px;
        }
        #page.index #contents #sec11 .comment p{
            line-height:1.4;
        }
}



/* ---------- sec12 ---------- */
#page.index #contents #sec12{padding:60px 0 0;}
#page.index #contents #sec12 h2{padding:0 0 50px;}
    #page.index #contents #sec12 ul{
        padding:7px 7px;
        background-color:#fcd9e5;
        justify-content:flex-start;
    }
    #page.index #contents #sec12 .col4::after {
        content: "";
        display: block;
        width:25%;
    }

    #page.index #contents #sec12 li{
        width:calc(25% - 14px);
        text-align:center;
        background-color:#fff;
        margin:7px 7px;
    }
        #page.index #contents #sec12 li img{
            width:100%;
        }
#page.index #contents #sec12 li .comment{vertical-align: top;line-height:1.4;padding:5px 10px 10px;}
    #page.index #contents #sec12 li .name{
        font-size:1.4em;
        line-height:1.4;
        font-weight:bold;
        margin:0 auto 4px;
        color:#000;
    }
        #page.index #contents #sec12 li .name span{
            font-size:0.7em;
        }
    #page.index #contents #sec12 li .title{
        color:#000;
        font-weight:bold;
        font-size:0.9em;
    }

@media (max-width: 575px) {
    #page.index #contents #sec12{padding:15px 0 0;}
    #page.index #contents #sec12 .contentsin{width:100% !important;}
    #page.index #contents #sec12 h2{padding:0 0 12px;width:80%;margin:0 auto;}
        #page.index #contents #sec12 ul{
            padding:10px 12px;
            background-color:#fcd9e5;
        }
        #page.index #contents #sec12 li{
            width:calc(50% - 12px);
            margin:6px 6px;
        }
        #page.index #contents #sec12 li .comment{padding:5px 10px 12px;}
}

/* ---------- .message ---------- */
.message-box{
	display: none;
	text-align: center;
	width: 880px;
	min-height: 560px;
	padding: 40px 0;
	border: 24px solid #fcd9e5;
    position:relative;
}
.message-boxin{
	margin:40px auto 0;
	width: 560px;
}
.message-box .l{float:left;width:37.5%;}
    .message-box .l img{
        width:100%;
    }
.message-box .l .comment{
    vertical-align: top;
    line-height:1.4;
    padding:5px 0 10px;
    text-align:left;
}
    .message-box .l .name{
        font-size:1.2em;
        line-height:1.4;
        font-weight:bold;
        margin:0;
        color:#000;
    }
        .message-box .l .name span{
            font-size:0.7em;
        }
        .message-box .l .title{
            font-size:0.9em;
        }

.message-box .r{float:right;width:56%;padding:20px 0;}

.message-box .message-footer{
    position:absolute;
    left:50%;
    bottom:40px;
    margin-left:-200px;
    width:400px;
}
    .message-box .message-footer .sns{float:left;}
        .message-box .message-footer .sns .column {
            width: 120px;
        }
        .message-box .message-footer .sns .column li img {
            height: 24px;
        }
    .message-box .message-footer .close{
        float: right;
        cursor: pointer;
        background-color: transparent;
        color: #b5b5b6;
        font-size: 1em;
        font-weight: bold;
        letter-spacing: 2px;
        border: none;
        display:block;
        margin:0 auto;
    }
    .message-box .message-footer .close:after{
        content: "";
        float: right;
        width: 30px;
        height: 26px;
        background-image: url(../images/top/message_arrow.png);
        background-repeat: no-repeat;
        background-position: right center;
    }

@media (max-width: 575px) {
    .featherlight .featherlight-content{
        width: 85%;
    }
    .message-box{
        width: 100%;
        min-height: auto;
        padding: 0;
        border: 12px solid #fcd9e5;
        margin:0 auto;
    }
    .message-boxin{
        margin:20px auto 0;
        width: auto;
    }
    .message-box .l{float:none;width:48%;margin:20px auto 0;}
    .message-box .r{float:none;width:80%;margin:0 auto;padding:10px 0;}
    .message-box .l img {
        width: 100%;
    }
    .message-box .message-footer{
        position:relative;
        left:0;
        right:0;
        bottom:0;
        margin:0 auto;
        width:auto;
        text-align:center;
    }
        .message-box .message-footer .sns{display:none;}
        .message-box .message-footer .close{
            float:none;
            padding:10px 0;
        }
        .message-box .message-footer .close:after{
        width: 15px;
        height: 13px;
        background-size: 100% auto;
        }

}



/* ---------- .sns ---------- */
#page.index #contents .sns{padding:50px 0;}

@media (max-width: 575px) {
    #page.index #contents .sns{padding:20px 0;}
}