@charset "utf-8";

/* ────────────────────── *
 *                                              *
 * メインビジュアル（1枚絵）                    *
 *                                              *
 * ────────────────────── */

#mainvisual-static {
    clear: both;
    width: 100%;
    position: relative;
}
#mainvisual-static img {
    width: 100%;
}
#mainvisual-static > p {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
}

/* ────────────────────── *
 *                                              *
 * タイトル                                     *
 *                                              *
 * ────────────────────── */

#title {
    background: url("../../image/bg-title.jpg") no-repeat center center / cover;
    text-align: center;
    width: 100%;
}
#title p {
    margin: 0 auto;
}

/* ────────────────────── *
 *                                              *
 * 特徴                                         *
 *                                              *
 * ────────────────────── */

#character {
    background: #f7f8f8;
    padding: 50px 30px 40px;
}
#character p {
    max-width: 1200px;
    margin: 0 auto;
}

/* ────────────────────── *
 *                                              *
 * バナーコンテンツ                             *
 *                                              *
 * ────────────────────── */

#banner-contents {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto 150px;
}
#banner-contents ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}
#banner-contents ul li {
    width: 50%;
}
#banner-contents ul li a {
    display: block;
    position: relative;
    transition: all .3s;
}
#banner-contents ul li a:before {
    content: "";
    transition: all .5s;
}
#banner-contents ul li a:hover:before {
    content: "";
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.4;
}

/* ────────────────────── *
 *                                              *
 * アピール                                     *
 *                                              *
 * ────────────────────── */

dl#appeal {
    background: rgb(177,149,79);
    background: -moz-linear-gradient(left,  rgba(177,149,79,1) 0%, rgba(114,78,39,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(177,149,79,1) 0%,rgba(114,78,39,1) 100%);
    background: linear-gradient(to right,  rgba(177,149,79,1) 0%,rgba(114,78,39,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1954f', endColorstr='#724e27',GradientType=1 );
    text-align: center;
    width: 100%;
    max-width: 1200px;
    padding: 15px 0;
    margin: 0 auto 130px;
}
dl#appeal dt {
    font-size: 23px;
    line-height: 1.7;
    color: #876926;
    font-weight: 600;
    background: #000;
    padding: 20px;
}
dl#appeal dd {
    background: #000;
    padding: 20px;
}

/* ────────────────────── *
 *                                              *
 * 最新情報                                     *
 *                                              *
 * ────────────────────── */

#news {
    max-width: 1200px;
    padding: 50px 0;
    margin: 0 auto;
}
#news h3 {
    font-size: 0;
    margin-bottom: 20px;
}
#news dl {
    font-size: 18px;
    line-height: 1.7;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}
#news dl dt {
    width: 120px;
}
#news dl dd {
    width: 100%;
    max-width: calc(100% - 120px);
    margin-bottom: 20px;
}
#news dl dd a.em {
    color: #aa8534;
    text-decoration: underline;
}

/* ────────────────────── *
 *                                              *
 * THETAサムネイル                              *
 *                                              *
 * ────────────────────── */

#theta {
    width: 800px;
    margin: 0 auto;
}
#theta .slick-container {
    margin: 0 auto 20px;
}
#theta ul.theta-thumbnail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#theta ul.theta-thumbnail li {
    width: 180px;
}

#gallery {
    background: #f7f3e8;
    text-align: center;
    padding: 50px;
}
#gallery a {
    transition: opacity .5s;
}
#gallery a:hover {
    opacity: 0.7;
}