@charset "utf-8";
/*////////////// hawaii/IslandsCSS Document //////////////*/

/* ===============================================
 all（全体）　
=============================================== */
#mainArea section {
    margin: 0;
}

/* descText（テキスト）------------------*/
.descText {
    padding: 1rem 3.1% 0;
}

/* mrkrText（マーカーテキスト）------------------*/
.mrkrText {
    background: linear-gradient(transparent 60%, #FFFF00 60%);
}

/* atnText（※テキスト）------------------*/
.atnText {
    display: block;
    font-size: 90%;
    text-align: center;
}

/* smallText（小さいテキスト）------------------*/
.descText .smallText {
    color: #0094C4;
    display: block;
}



/* ===============================================
 mapArea（マップ部分）　
=============================================== */
/* mapList（マップエリアリスト）------------------*/
.mapList > li.nokhrPh {
    top: -1%;
    width: 50%;
    left: 23%;
}
.mapList > li.hiloPh {
    top: 31%;
    width: 27%;
    right: 8%;
}
.mapList > li.volPh {
    top: 51%;
    width: 28%;
    right: 26%;
}
.mapList > li.souptPh {
    top: 70%;
    width: 25%;
    left: 25%;
}
.mapList > li.kailuaPh {
    top: 36%;
    width: 21%;
    left: 13%;
    z-index: 2;
}
.mapList > li.khrcstPh {
    top: 15%;
    width: 25%;
    left: 12%;
}



/* ===============================================
 ancArea（アンカーリンクナビ部分）　
=============================================== */
.ancArea+.ancArea {
    margin-bottom: 3rem;
}

/* phTitle（アンカーリンクナビ/タイトル）------------------*/
.ancArea .phTitle {
    margin: 2rem 0 1.5rem;
}

/* ancList（アンカーリンクナビ/リスト）------------------*/
.ancArea .ancList {
    clear: both;
    overflow: hidden;
    padding: 0 3.1% 0;
}
.ancArea .ancList li {
    float: left;
    width: 31%;
    margin-right: 3.5%;
}
.ancArea .ancList li:last-child {
    margin-right: 0;
}



/* ===============================================
 dstList（方面リスト部分）　
=============================================== */
.dstList li {
    padding: 0;
}
.dstList li:last-child {
    padding: 0;
}

/* dstCnts（方面リスト/コンテンツ内）------------------*/
.dstList li .dstCnts {
    padding: 0 3.1%;
}
.dstList .descText .bigText {
    color: #003366;
}
.dstList .phArea {
    padding: 0;
}

/* cntsPtn1（コンテンツ1）------------------*/
.cntsPtn1 {
    clear: both;
    overflow: hidden;
}
.cntsPtn1 .descText {
    width: 75%;
    float: left;
}
.cntsPtn1 .descText+.phArea {
    float: right;
    width: 25%;
    padding: 1rem 0;
}



/* ===============================================
accordion（アコーディオン部分）　
=============================================== */
.accordion {
    padding-top: 3rem;
    margin-bottom: 5rem;
}
#moreList1, #moreList2, #moreList3, #moreList4, #moreList5, #moreList6 {
    display: block;
}
#moreList1 .moreBox, #moreList2 .moreBox, #moreList3 .moreBox, #moreList4 .moreBox, #moreList5 .moreBox, #moreList6 .moreBox {
    margin-bottom: 1rem;
}
#moreList1 .moreBox .moreBtn, #moreList2 .moreBox .moreBtn, #moreList3 .moreBox .moreBtn, #moreList4 .moreBox .moreBtn, #moreList5 .moreBox .moreBtn, #moreList6 .moreBox .moreBtn {
    cursor: pointer;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    padding: 12px 20px 12px 0;
    margin: 0 7%;
    color: #000;
    background-image: url("http://smp.his-j.com/cmn/img/kanto/icon/instruction/arrow_down_black001.png"), url("/cmn/img/kanto/hawaii/common/link_btn_bg_002.png");
    background-position: 97% 50%, 50%;
    background-repeat: no-repeat;
    background-size: 15px auto, 100% 100%;
    border: solid 1px #000;
    box-shadow: 0 2px 2px rgba(0,0,0,0.4);
}
#moreListSec1, #moreListSec2, #moreListSec3, #moreListSec4, #moreListSec5, #moreListSec6 {
    display: none;
}
#moreList1.open .moreBox .moreBtn, #moreList2.open .moreBox .moreBtn, #moreList3.open .moreBox .moreBtn, #moreList4.open .moreBox .moreBtn, #moreList5.open .moreBox .moreBtn, #moreList6.open .moreBox .moreBtn {
    display: none;
}
.moreBtn.closeBtn {
    cursor: pointer;
    background-color: #FFF;
    padding: 12px 20px 12px 0;
    margin: 2em 7% 0;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    border: solid 1px #000;
    box-shadow: 0 2px 2px rgba(0,0,0,0.4);
    background-image: url("http://smp.his-j.com/cmn/img/kanto/icon/instruction/arrow_up_black001.png");
    background-position: 97% 50%;
    background-repeat: no-repeat;
    background-size: 15px auto;
}
.moreBtn.closeBtn a {
    color: #000;
}

/* opArea（オプショナルツアー）------------------*/
.opArea {
    background-image: url("/cmn/img/kanto/hawaii/common/bg_001.jpg");
    background-repeat: repeat;
    background-position: 50%;
    background-size: 100% auto;
}
.opArea .opTitle {
    text-align: center;
    font-size: 1.7rem;
    font-weight: bold;
    padding: 2.5rem 0 1.5rem;
}
.opArea .opList {
    padding: 0 3.1%;
}
.opArea .opList > li {
    padding: 0 3.1% 2rem;
}
.opArea .opList > li .linkArea.btn {
    background-image: url("/cmn/img/kanto/hawaii/common/link_btn_bg_002.png");
    margin: 4% 3.1% 1%;
}
.opArea .opList > li+li {
    border-top: dotted 1px #755D5A;
}

/* cntsPtn2（コンテンツ2）------------------*/
.cntsPtn2 {
    padding-top: 2em;
    clear: both;
    overflow: hidden;
}
.cntsPtn2 > li {
    float: left;
    width: 49%;
}
.cntsPtn2 > li:nth-child(even) {
    margin-left: 2%;
}
.cntsPtn2 > li .descText .bigText {
    color: #000;
    font-size: 113%;
}
.cntsPtn2 > li .descText {
    height: 13em;
}
.cntsPtn2+.moreBtn.closeBtn {
    margin: 0 7% 0;
}

/* htlArea（ホテルエリア）------------------*/
.htlArea {
    background-color: #E0F4F8;
    padding: 0 3.1% 2em;
    position: relative;

}
.dstCnts .htlArea {
    margin: 0 -3.3%;
}
.htlArea:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 9em;
    top: -3em;
    left: 0;
    background-image: url("/cmn/img/kanto/hawaii/islands/hwiiland/hotel_title_001.png");
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 15em 100%;
}
.dstList .htlArea .textTitle {
    position: static;
    padding: 4em 0 0;
    font-size: 150%;
    letter-spacing: normal;
}
.htlList > li {
    background-color: #FFF;
    padding-bottom: 1em;
}
.htlList > li .htlTitle {
    background-color: #00468A;
    color: #FFF;
    padding: 1em 0;
    text-align: center;
    font-size: 130%;
    font-weight: bold;
    margin-bottom: 1.5em;
}
.dstList .textTitle:before, .dstList .textTitle:after {
    display: none;
}
.htlList > li .phArea {
    padding: 0 6.2% 1em;
}
.htlList > li .descText {
    padding: 0 6.2%;
}
.htlList > li .descText .bigText {
    color: #000;
    text-align: center;
    margin-bottom: 0.5em;
    font-size: 125%;
}
.htlList > li .ctrArea {
    background-image: url("/cmn/img/kanto/hawaii/common/bg_001.jpg");
    background-position: 50%;
    background-repeat: repeat;
    background-size: 100% auto;
    margin: 0 3.1%;
    padding: 2em 3.1%;
}
.htlList > li .ctrArea .descText {
    text-align: center;
}
.htlList > li .ctrArea .phTitle {
    margin-bottom: 2em;
}
.htlList > li .ctrArea .linkArea.btn {
    margin: 6% 5% 1%;
    background-image: url("/cmn/img/kanto/hawaii/common/link_btn_bg_002.png");
}
.htlList > li+li {
    margin-top: 3em;
}
.htlArea .moreBtn.closeBtn {
    margin-bottom: 1em;
}
.dstList .htlArea li:last-child {
    padding-bottom: 2rem;
}
/* shuttleArea（シャトルエリア20180702）------------------*/
.htlList > .shuttleArea .shuttleTitle {
    padding: 20px 3.1% 15px;
}
.htlList > li.shuttleArea .descText .bolText {
    font-weight:  bold;
    margin-bottom: 1em;
    display:  block;
}
.htlList > li.shuttleArea .shuttleBox {
    padding: 0 6.2%;
    clear:  both;
    overflow:  hidden;
}
.htlList > li.shuttleArea .shuttleBox .left {
    float:  left;
    width: 60%;
}
.htlList > li.shuttleArea .shuttleBox .right {
    width: 40%;
    float: right;
}
.htlList > li.shuttleArea .smlText {
    font-size: 85%;
    display:  block;
}
.htlList > li.shuttleArea a {
    color: #2424ff;
}
.dstList .htlArea .htlList > li.shuttleArea .shuttleBox li {
    padding-bottom: 1rem;
}
.htlList > .shuttleArea .atnText {
    padding: 1rem 6.2% 0;
    text-align:  left;
}


/* ===============================================
tourArea（ツアー部分）　
=============================================== */
#tourArea .tourList {
    padding: 1em 3.1%;
}