@charset "UTF-8";

/* ================================================================

制作コンテンツ

info:
- レスポンシブの場合は、ブレイクポイント 768px で記述してください。
- SP用CSSを先に記述する方法を推奨します。下記の記述は例です。
- PCのみの場合は、記述を削除してください。

================================================================ */



.freearea h1 {
    position: absolute;
    top: -1000px;
}

.freearea {width: 100%; max-width: 1600px; margin: auto; }
.freearea .coupon01 {position: fixed; right: 0; top: 10%; z-index: 99;}
.freearea a{display:block; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
.freearea a:hover {opacity: 0.7; filter: alpha(opacity=70);}
.freearea .wrap {width: 100%;}
.freearea .wrap#title {width: 100%; height: 500px; position: relative;}
.freearea .wrap#title .bx-controls {display: none;}
.freearea .wrap#title .slick-slide img {width: 1200px; height: 500px;}

.freearea .wrap#title h1 {position: absolute; z-index: -1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.freearea .wrap#title .slide-area {width: 100%; max-width: 1200px; margin: auto; height: 500px;}
.freearea .wrap#title .slide-area ul {}
.freearea .wrap#title .slide-area ul li {width: 100%;}
.freearea .wrap#title .slide-area .slick-slider button {display: none !important;}
/*
.freearea .wrap#title .slide-area ul li:nth-child(1) {position: relative; background: url(../images/free/slide01.png) no-repeat top center; height: 500px;}
.freearea .wrap#title .slide-area ul li:nth-child(2) {position: relative; background: url(../images/free/slide02.png) no-repeat top center; height: 500px;}
.freearea .wrap#title .slide-area ul li:nth-child(3) {position: relative; background: url(../images/free/slide03.png) no-repeat top center; height: 500px;}
*/
.freearea .wrap#area01 {position: relative; background: url(../images/free/bg00.png) no-repeat top center; height: 950px;}
.freearea .wrap#area02 {position: relative; background: url(../images/free/bg01.png) no-repeat top center; height: 1270px;}
.freearea .wrap#area03 {position: relative; background: url(../images/free/bg02.png) no-repeat top center; height: 850px;}
.freearea .wrap#area04 {position: relative; background: url(../images/free/bg03.png) no-repeat top center; height: 790px;}
.freearea .wrap#area05 {position: relative; background: url(../images/free/bg04.png) no-repeat top center; height: 630px;}
.freearea .wrap .wrap-content {width: 990px; margin: auto; position: relative; height: 100%;}
.freearea .wrap .wrap-content .area {position: absolute;}
.freearea .wrap .wrap-content .area01 {position: absolute; top: 321px; left: 531px;}
.freearea .wrap .wrap-content .area02 {position: absolute; top: 770px; left: 565px;}
.freearea .wrap .wrap-content .slide-area {top: 350px; left: -45px;}
.freearea .wrap .wrap-content .slide-area .bx-wrapper {width: 440px;}
.freearea .wrap .wrap-content .slide-area .bx-prev,.freearea .wrap .wrap-content .slide-area .bx-next {display: none;}
.freearea .wrap .wrap-content .slide-area .thumb02 {display: flex; width: 200px; justify-content: space-between; flex-wrap: wrap; margin: 10px 0 0 80px;}
.freearea .wrap .wrap-content .slide-area .thumb02 li {margin-bottom: 10px;}
.freearea .wrap .wrap-content .slide-area .thumb02 .on {display: none;}
.freearea .wrap .wrap-content .slide-area .thumb02 .off {display: block;}
.freearea .wrap .wrap-content .slide-area .thumb02 .active .on {display: block;}
.freearea .wrap .wrap-content .slide-area .thumb02 .active .off {display: none;}

.freearea .wrap .wrap-content .area03 {position: absolute; top: 298px; left: 5px;}
.freearea .wrap .wrap-content .area04 {position: absolute; top: 298px; left: 330px;}
.freearea .wrap .wrap-content .area05 {position: absolute; top: 298px; left: 650px;}
.freearea .wrap .wrap-content .area06 {position: absolute; top: 623px; left: 581px;}
.freearea .wrap .wrap-content .area07 {position: absolute; top: 872px; left: 570px;}
.freearea .wrap .wrap-content .area08 {position: absolute; top: 1060px; left: 605px;}
.freearea .wrap .wrap-content .area09 {position: absolute; top: 30px; left: 652px; z-index: 3;}
.freearea .wrap .wrap-content .area10 {position: absolute; top: 80px; left: 530px;}
.freearea .wrap .wrap-content .area11 {position: absolute; top: 140px; left: 95px;}
.freearea .wrap .wrap-content .area12 {position: absolute; top: 520px; left: 45px;}
.freearea .wrap .wrap-content .area13 {position: absolute; top: 545px; left: 5px;}
.freearea .wrap .wrap-content .area14 {position: absolute; top: 545px; left: 335px;}
.freearea .wrap .wrap-content .area15 {position: absolute; top: 545px; left: 665px;}
.freearea .wrap .wrap-content .area16 {position: absolute; top: 320px; left: 5px;}


.freearea .coupon01 {display: none;}
.freearea .wrap .wrap-content .area16 a {pointer-events: none;}




/* SP用CSSの記述 */
@media (max-width:640px){
	.freearea .coupon01 {width: 20%; right: 3%;}
}

/* PC、Tablet用CSSの記述 */
@media (min-width:768px){

}