@charset "UTF-8";

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

制作コンテンツ

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

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

/* SP用CSSの記述 */




/* 基本情報 */
.free_area_content {width: 100%; max-width: 1600px; margin: auto;}
.free_area_content 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;}
.free_area_content a:hover {opacity: .7;}
.free_area_content h1 {position: absolute; top: -2000px;}
.free_area_content .wrap_content {width: 100%; margin: auto;}
.free_area_content .wrap_content .content {width: 990px; margin: auto; height: 100%; position: relative;}
.free_area_content .wrap_content .content .area {position: absolute; top: 0;}
.free_area_content .wrap_content .content .flex_area {display: flex; justify-content: center;}

.free_area_content .wrap_content .content .area .on {display: none; opacity: 0; -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;}
.free_area_content .wrap_content .content .area .off {display: block; opacity: 1; -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;}

.free_area_content .wrap_content .content .area:hover .on {display: block; opacity: 1; -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;}
.free_area_content .wrap_content .content .area:hover .off {display: none; opacity: 0; -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;}

.free_area_content .wrap_content .content .area .linkbtn:hover {opacity: 1;}

.free_area_content .wrap_content.title_area {background: url(../images/title_bg.png) no-repeat top center; height: 700px; width: 100%;}
.free_area_content .wrap_content.areazone01 {background: url(../images/areabg01.png) no-repeat top center; height: 809px; width: 100%;}
.free_area_content .wrap_content.areazone02 {background: url(../images/areabg02.png) no-repeat top center; height: 806px; width: 100%;}
.free_area_content .wrap_content.areazone03 {background: url(../images/areabg03.png) no-repeat top center; height: 809px; width: 100%;}
.free_area_content .wrap_content.areazone04 {background: url(../images/areabg04.png) no-repeat top center; height: 376px; width: 100%;}



.free_area_content .wrap_content.title_area .area01 {
    top: 514px;
    left: 471px;
}

.free_area_content .wrap_content.areazone01 .area01 {
    top: 39px;
    left: 462px;
}
.free_area_content .wrap_content.areazone01 .area02 {
	top: 524px;
    left: -9px;
}
.free_area_content .wrap_content.areazone01 .area03 {
    top: 488px;
    left: 443px;
}

.free_area_content .wrap_content.areazone02 .area01 {
	top: 12px;
    left: -2px;
}
.free_area_content .wrap_content.areazone02 .area02 {
    top: 491px;
    left: -2px;
}
.free_area_content .wrap_content.areazone02 .area03 {
    top: 521px;
    left: 513px;
}

.free_area_content .wrap_content.areazone03 .area01 {
	top: 23px;
    left: 462px;
}
.free_area_content .wrap_content.areazone03 .area02 {
    top: 545px;
    left: -11px;
}
.free_area_content .wrap_content.areazone03 .area03 {
    top: 501px;
    left: 462px;
}

.free_area_content .wrap_content.areazone04 .area01 {
    top: 36px;
    left: 14px;
}
.free_area_content .wrap_content.areazone04 .area02 {
    top: 154px;
    left: 26px;
}
.free_area_content .wrap_content.areazone04 .area03 {
    top: 154px;
    left: 506px;
}







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