@charset "UTF-8";
/* ページ設定 */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap");

.otaruWrap .mainWrap {
    color: #333;
    font-size: 14px;
    line-height: 1.6;
    font-family: "メイリオ", "ＭＳ Ｐゴシック", Arial, sans-serif;
    padding: 0 4px;
}

.otaruMv img {
    width: 100%;
}

.otaruMeasure.about {
    margin-top: 10px;
}

.aboutWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}


.aboutTtl {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 200px;
    flex: 0 0 200px;
    font-size: 65px;
    border-right: 1px solid #000;
    padding: 20px 30px 0px 30px;
    font-family: "RobotoSlab", Garamond, "TimesNewRoman", "游明朝", "YuMincho", "游明朝体", "YuMincho", "ヒラギノ明朝ProW3", "HiraginoMinchoPro", "HiraMinProN-W3", "HGS明朝E", "ＭＳＰ明朝", "MSPMincho", serif;
    line-height: 1.3;
}

.aboutTxt {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(100% - 220px);
    flex: 0 0 calc(100% - 220px);
    padding-top: 20px;
}

.placeItem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px;
    border-top: 1px dashed #ccc;
}

.placeItem dt {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 39%;
    flex: 0 0 39%;
    padding-right: 20px;
}

.placeItem dd {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 56%;
    flex: 0 0 56%;
}

.placeItem dd .placeItemSubTtl {
    font-size: 13px;
    font-weight: 700;
    font-family: "RobotoSlab", Garamond, "TimesNewRoman", "游明朝", "YuMincho", "游明朝体", "YuMincho", "ヒラギノ明朝ProW3", "HiraginoMinchoPro", "HiraMinProN-W3", "HGS明朝E", "ＭＳＰ明朝", "MSPMincho", serif;
    line-height: 1.2;
}

.placeItem dd .placeItemTtl {
    font-family: "RobotoSlab", Garamond, "TimesNewRoman", "游明朝", "YuMincho", "游明朝体", "YuMincho", "ヒラギノ明朝ProW3", "HiraginoMinchoPro", "HiraMinProN-W3", "HGS明朝E", "ＭＳＰ明朝", "MSPMincho", serif;
    font-size: 39px;
    font-weight: bold;
    line-height: 1.3;
}

.placeItem dd .placeItemTtl .colorLetter {
    color: #0193A5;
}

.hotelBox .ttl {
    background-image: url("	https://www.wbf.co.jp/hkd/special/otaru/img/ttl_bg.webp");
    background-color: #5396A6;
    color: #fff;
    text-align: left;
    font-size: 36px;
    font-weight: 700;
    padding: 10px 0px 10px 37px;
    margin-bottom: 15px;
    font-family: "RobotoSlab", Garamond, "TimesNewRoman", "游明朝", "YuMincho", "游明朝体", "YuMincho", "ヒラギノ明朝ProW3", "HiraginoMinchoPro", "HiraMinProN-W3", "HGS明朝E", "ＭＳＰ明朝", "MSPMincho", serif;
}

.hotelList {
    background: #edf3f6;
    padding: 0 10px 15px;
    margin-bottom: 20px;
}

.hotelHead {
    font-family: "RobotoSlab", Garamond, "TimesNewRoman", "游明朝", "YuMincho", "游明朝体", "YuMincho", "ヒラギノ明朝ProW3", "HiraginoMinchoPro", "HiraMinProN-W3", "HGS明朝E", "ＭＳＰ明朝", "MSPMincho", serif;
    padding: 15px 15px 4px;
}

.hotelSubTtl {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.hotelTtl {
    color: #58999F;
    font-size: 33px;
    font-weight: 700;
    margin-top: 5px;
    line-height: 1.3;
}

.hotelWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px;
}

.hotelLeft {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 54%;
    flex: 0 0 54%;
}

.hotelImgWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.hotelImgWrap li {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 2px);
    flex: 0 0 calc(50% - 2px);
}

.hotelRight {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 44%;
    flex: 0 0 44%;
}

.hotelTxt {
    margin-bottom: 0.7em;
    line-height: 1.5;
}

.hotelBtn {
    width: 88%;
    text-align: center;
    background: #36884c;
    border-bottom: solid 2px #1d4f2a;
    border-right: solid 2px #1d4f2a;
    line-height: 1;
    border-radius: 4px;
    color: #FFF;
    display: block;
    padding: 10px;
    margin: 4px auto 0;
    font-size: 15px;
}

.hotelBtn .ico-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 10px;
    border-color: transparent transparent transparent #fff;
    padding-left: 11px;
    display: inline-block;
    vertical-align: top;
}

.linkList li .departure {
    background: #fdae3f;
    border-right: solid 1px #c28a39;
    border-bottom: solid 1px #c28a39;
    text-shadow: 1px 1px 3px #bb7b1f;
    line-height: 1;
    display: block;
    border-radius: 4px;
    margin-bottom: 3px;
    padding: 10px 2px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.linkList li .price {
    text-align: center;
    color: #e20303;
    font-weight: bold;
    display: block;
    font-size: 15px;
}

@media (max-width: 1024px) {
    .otaruWrap .mainWrap .inner {
        width: 100%;
    }

    .hotelBox .ttl {
        font-size: 28px;
    }

    .hotelTtl {
        font-size: 28px;
    }
}

@media (max-width: 599px) {
    .aboutWrap {
        display: block;
        border-bottom: 1px dashed #ccc;
        margin-bottom: 10px;
    }

    .aboutTtl {
        border-right: none;
        text-align: center;
        font-size: 39px;
        padding-top: 0;
    }

    .aboutTxt {
        padding: 26px 10px 10px;
    }

    .placeItem {
        display: block;
    }

    .placeItem dt {
        width: 80%;
        text-align: center;
        margin: 0 auto 5px;
        padding-right: 0;
    }

    .placeItem dt img {
        display: inline;
    }

    .placeItem dd .placeItemSubTtl {
        text-align: center;
    }

    .placeItem dd .placeItemTtl {
        text-align: center;
    }

    .hotelBox .ttl {
        font-size: 20px;
    }

    .hotelList {
        padding: 10px 10px 5px;
    }

    .hotelHead {
        padding: 0;
        margin: 10px 0;
    }

    .hotelSubTtl {
        font-size: 16px;
    }

    .hotelTtl {
        font-size: 22px;
    }

    .hotelWrap {
        display: block;
        padding: 0;
    }

    .hotelBtn {
        margin-bottom: 10px;
    }
}