@charset "utf-8";
/*--------------------------------------------------------------------
   base
---------------------------------------------------------------------*/
html, body{height: 100%;}
body{
    background:#fff;
	text-align:center;
	color:#222;
	font-size:16px;
	font-family:"Lato", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

@media all and (-ms-high-contrast:none) {
	body{
		font-family: "Lato","メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	}
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

.iphone body,
.ipad body,
.ipod body{
	cursor:pointer;
}
a{
	text-decoration: none;
  transition: all 0.8s;
}
a:link{ 
	color:#222;
    text-decoration:none;
    
    }
a:visited{color:#222;}
a:active{color:#222;}
a:hover{color:#666; }

strong{font-weight:bold;}
img{font-size:0; line-height:0;}

#wrapper{position:relative; overflow:hidden;}


/*--------------------------------------------------------------------
   header
---------------------------------------------------------------------*/
header{
	width: 100%;
	background: url("../images/main_bg.jpg") top center no-repeat;
	background-size: cover;
	position:fixed;	
	padding-top: 740px;
	top:0;
	left: 0;
	z-index: -1;
}
header .logo{
	width: 513px;
	height: 80px;
	max-width: calc(100% - 60px);
	background: url("../images/hdr_logo.png") 0 0 no-repeat;
	background-size: contain;
	overflow: hidden;
	padding-top: 110%;
	white-space: nowrap;
	position: absolute;
	top: 15px;
	left: 30px;
}
header #hdrIn{
	width:calc(714px / 0.7);
	height:calc( 391px / 0.7);
	max-width: 100%;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
header #hdrIn h1{
	background: url("../images/main.png") 0 0 no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding-top: 110%;
	white-space: nowrap;
}


/*--------------------------------------------------------------------
  footer
---------------------------------------------------------------------*/
footer{background-color:#e5e5e5; margin-top:-1px;}
footer p{
    line-height:30px;
    color:#333;
    text-align:center;
    font-size:0.750em;
    font-family:'Lato',Verdana, Geneva, sans-serif;
}

/*--------------------------------------------------------------------
   container
---------------------------------------------------------------------*/
#container{
	margin-top: 760px;
	padding-top: 60px;
	padding-bottom: 60px;
	background-color: #fff;
	position: relative;
}
#container::before{
	content: "";
	display: block;
	background: url( "../images/main_btm.png") center bottom no-repeat;
	background-size:100% 100%;
	width: 100%;
	padding-top: 90px;
	position: absolute;
	top: -90px;
	left: 0;
}

/* base
-----------------------*/
div[id="container"] p,
div[id="container"] li,
div[id="container"] dt,
div[id="container"] dd,
div[id="container"] th,
div[id="container"] td{
    line-height:1.75;
    text-align:left; }


/* lead
--------------------------------------------------------*/
#container .lead{padding-bottom: 60px;}
#container .lead p{
	color:#2ba8e1;
	font-weight: bold;
	font-size: 1.250em;
	line-height: 1.714;
}

/* attention
--------------------------------------------------------*/
#container .attention{
	width: 680px;
	max-width: 100%;
	margin: 0 auto 25px;
	padding-bottom: 25px;
}
#container .attention p{
	border: #e5e5e5 4px solid;
	border-radius: 10px;
	padding: 15px 10px 15px 50px;
	text-align: left;
	color: #707070;
	font-size: 	1.125em;
	position: relative;
}
#container .attention p::before{
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	background: url("../images/ico_attention_yubi.png") center center no-repeat;
	background-size: contain;
	position: absolute;
	left: 15px;
	top: 50%;
	margin-top: -14px;
}
#container .attention p::after{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url("../images/ico_attention_arrow.png") center top no-repeat;
	background-size: contain;
	position: absolute;
	bottom: -20px;
	right: 30px;
}

.itemList{
	overflow: hidden;
}
.itemList .linkBox{
	width: 30%;
	float: left;
	padding-top: 30%;
	overflow: hidden;
	margin: 0 1.5% 3%;
	position: relative;
}

.itemList .linkBox.new::before{
	content: "NEW";
	display: block;
	width: 30px;
	height: 30px;
	background-color: rgba(191,0,3,1.00);
	border-radius: 50%;
	color: #fff;
	text-align: center;
	line-height: 30px;
	font-size: 10px;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 30;
}

.itemList .linkBox a{
	display: block;
	width: 100%;
	height: 100%;
	border-width: 8px;
	border-style: solid;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
}
.itemList .linkBox span.areaIco{
	display: block;
	width: 8em;
	height: 2em;
	text-align: center;
	font-weight: bold;
	line-height: 1.8;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
}
.itemList .linkBox .img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	transition: 0.3s all;
}
.itemList .linkBox a:hover .img{opacity: 0.8;}

.itemList .linkBox .txt{
	background-color: rgba(0,0,0,0.75);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 30;
}
.itemList .linkBox .txt p{
	padding: 10px;
	color: #fff;
	font-size: 	0.875em;
}
.itemList .linkBox.tao a{border-color: #9ed8f6;}
.itemList .linkBox.tao span.areaIco{background-color: #9ed8f6;}

.itemList .linkBox.moalboal a{border-color: #2ba8e1;}
.itemList .linkBox.moalboal span.areaIco{background-color: #2ba8e1;}

.itemList .linkBox.palau a{border-color: #ffdf32;}
.itemList .linkBox.palau span.areaIco{background-color: #ffdf32;}

.itemList .linkBox.liloan a{border-color: #ffdf32;}
.itemList .linkBox.liloan span.areaIco{background-color: #ffdf32;}


.itemList .linkBox.pohnpei a{border-color: #f4a21a;}
.itemList .linkBox.pohnpei span.areaIco{background-color: #f4a21a;}

.itemList .linkBox.manado a{border-color:#e95a65;}
.itemList .linkBox.manado span.areaIco{background-color: #e95a65;}

.itemList .linkBox.bali a{border-color:#2ba8e1;}
.itemList .linkBox.bali span.areaIco{background-color: #2ba8e1;}

.itemList .linkBox.lembeh a{border-color: #9ed8f6;}
.itemList .linkBox.lembeh span.areaIco{background-color: #9ed8f6;}

.itemList .linkBox.rota a{border-color:#e95a65;}
.itemList .linkBox.rota span.areaIco{background-color: #e95a65;}


/*modal*/
.modaal-container{
	max-width: 600px;	
}
.modaal-content-container{
	padding: 0 0 50px;
}
.modalContents {text-align: center;}
.modalContents .img {padding-bottom: 25px;}
.modalContents .img img {display: block;}
.modalContents .img img + img{margin-top: 10px;}
.modalContents .img img.tate{
	width:100%;
	height: auto;
}

.modalContents .heading{
	padding-left: 80px;
	padding-right: 15px;
	margin-bottom: 15px;
	margin-left: 15px;
	font-family: "M PLUS Rounded 1c";
	font-weight: bold;
	text-align: left;
	font-size: 	1.125em;
	line-height: 1.5;
	position: relative;
}

.modalContents .heading::before{
	content: "";
	display: block;
	width: 60px;
	height: 50px;
	background: url("../images/ico_modal.png") center center no-repeat;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -25px;
}

.modalContents .txt{
	padding: 15px;
	margin-bottom: 25px;
}
.modalContents .txt .txtIn{
	background:#f9fbea;
	padding: 15px;
	text-align: left;
}

.modalContents .txt .txtIn p{
	background: url("../images/line.gif");
  line-height: 28px;
	text-align: justify;

}
.modalContents .linkBtn {
	width:calc(100% -30px);
	height: 60px;
	max-width:380px;
	margin: 0 auto;
	background-color: #f4a21a;
	position: relative;
}
.modalContents .linkBtn a{
	display: block;
	width:100%;
	height:100%;
	margin: 0 auto;
	line-height: 60px;
	background-color: #ffdf32;
	color: #222;
	font-weight: bold;
	font-family: "M PLUS Rounded 1c";
	position: absolute;
	top: -5px;
	left: -5px;
}
.modalContents .linkBtn a::after{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url("../images/ico_btn.png") 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -10px;
}

.modalContents .linkBtn a.forPC{display: block !important;}
.modalContents .linkBtn a.forTB,
.modalContents .linkBtn a.forSP{display: none;}

@media screen and (max-width: 999px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 374px) {
    /*iphone5*/
}

@media screen and (min-width : 1080px){
    .forTB,
	.forSP{display:none;}
	.forPC{display:inherit;}

    .ie8 body{
        min-width:1000px;
        max-width:100%;
        overflow-x:hidden;
    }

}

/* 20200106 */

.bold{
	font-weight: 700;
}