@charset "utf-8";

/* CSS INFORMATION -================================================= */
/* File name : common.css */
/* Description : 共通ベースラインCSS */
/* ================================================================== */

/* ================================================================== */
/*    共通・大枠
/* ================================================================== */
html {
    color: #333;
    font-size: calc(10 / 750 * 100vw);
    font-family: YakuHanJP, "Noto Sans JP", "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

@media screen and (min-width: 768px) {
    html {
        font-size: calc(10 / 1200 * 100vw);
    }
}

@media screen and (min-width: 1200px) {
    html {
        font-size: 10px;
    }
}

body {
    overflow-x: hidden;
}

* {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

a {
    display: block;
    color: #333;
    text-decoration: none;
}

a:active {
    color: #333;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.main {
    display: block;
}

.inner {
    margin: 0 auto;
}

.sec_content {
    width: calc(670 / 750 * 100%);
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    a {
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    a:hover {
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .inner {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .sec_content {
        width: calc(1000 / 1200 * 100%);
    }

    .sp {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 1200px) {}


/* ================================================================== */
/*    svg
/* ================================================================== */
#svg {
    display: none;
}

.svg_logo1 {
    fill: #9fa0a0;
}

.svg_logo2 {
    fill: #fabe00;
}


/* ================================================================== */
/*    ボタン
/* ================================================================== */
.arrow1::after {
    content: "";
    display: block;
    width: calc(13 / 750 * 100vw);
    height: 100%;
    background: url(../images/common/btn_arrow_white.svg) no-repeat center center;
    background-size: calc(13 / 750 * 100vw) auto;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 calc(50 / 750 * 100vw) 0 0;
}

.more {
    width: calc(400 / 750 * 100vw);
    margin: 0 auto;
}

.more a {
    padding: calc(40 / 750 * 100vw) calc(135 / 750 * 100vw);
    background-color: #1f344f;
    border-radius: calc(60 / 750 * 100vw);
    color: #fff;
}

.more a .svg_more {
    fill: currentColor;
}

.back {
    width: calc(380 / 750 * 100vw);
    margin: 0 auto;
}

.back a {
    padding: 1.15em 0;
    background-color: #1f344f;
    border-radius: 3em;
    color: #fff;
    font-size: 3rem;
    font-family: 'M PLUS Rounded 1c';
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
}

.btn1,
.btn2 {
    width: calc(590 / 750 * 100vw);
    margin: 0 auto;
}

.btn1 a,
.btn2 a {
    padding: 0.8em 0;
    background-color: #1f344f;
    border-radius: 2em;
    border: calc(6 / 750 * 100vw) solid #1f344f;
    color: #fff;
    font-size: 3rem;
    font-family: 'M PLUS Rounded 1c';
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
}

.btn2 a {
    background-color: #fff;
    color: #1f344f;
}

.btn1 a span,
.btn2 a span {
    font-weight: 600;
}

.btn1 a::before,
.btn2 a::before {
    content: "";
    display: block;
    width: calc(39 / 750 * 100vw);
    padding-top: calc(69 / 750 * 100vw);
    background: url(../images/common/btn1_illust.png) no-repeat left bottom;
    background-size: auto 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0 0 0 calc(78 / 750 * 100vw);
}

.btn2 a::before {
    width: calc(33 / 750 * 100vw);
    background: url(../images/common/btn2_illust.png) no-repeat left bottom;
    background-size: auto 100%;
    margin: 0 0 0 calc(85 / 750 * 100vw);
}

.btn2 .arrow1::after {
    background: url(../images/common/btn_arrow_blue.svg) no-repeat center center;
    background-size: calc(13 / 750 * 100vw) auto;
}

@media screen and (min-width: 768px) {
    .arrow1::after {
        width: calc(8 / 1200 * 100vw);
        background-size: calc(8 / 1200 * 100vw) auto;
        margin: 0 calc(27 / 1200 * 100vw) 0 0;
    }

    .more {
        width: calc(210 / 1200 * 100vw);
    }

    .more a {
        padding: calc(19 / 1200 * 100vw) 0;
        border: 3px solid #1f344f;
        border-radius: 2em;
        font-size: 2rem;
    }

    .more a:hover {
        background-color: #fff;
        color: #1f344f;
    }

    .more a span {
        display: block;
        width: calc(66 / 210 * 100%);
        margin: 0 auto;
        padding-top: calc(16 / 210 * 100%);
    }

    .more a svg {
        position: absolute;
        max-height: 100%;
        max-width: 100%;
        top: 0;
        left: 0;
    }

    .back {
        width: calc(210 / 1200 * 100vw);
    }

    .back a {
        padding: 0.85em 0;
        border: 3px solid #1f344f;
        font-size: 2rem;
        -webkit-transform: rotate(0.05deg);
        transform: rotate(0.05deg);
    }

    .back a:hover {
        background-color: #fff;
        color: #1f344f;
    }

    .btn1,
    .btn2 {
        width: calc(272 / 1200 * 100vw);
        margin: 0;
    }

    .btn1 a,
    .btn2 a {
        padding: 1.28em 0;
        border-width: 3px;
        font-size: 1.8rem;
        letter-spacing: 0;
        -webkit-transform: rotate(0.05deg);
        transform: rotate(0.05deg);
    }

    .btn1 a::before,
    .btn2 a::before {
        width: calc(30 / 1200 * 100vw);
        padding-top: calc(50 / 1200 * 100vw);
        margin: 0 0 0 calc(20 / 1200 * 100vw);
    }

    .btn2 a::before {
        width: calc(25 / 1200 * 100vw);
        margin: 0 0 0 calc(25 / 1200 * 100vw);
    }

    .btn2 .arrow1::after {
        background-size: calc(8 / 1200 * 100vw) auto;
    }

    .btn1 a:hover {
        background-color: #fff;
        color: #1f344f;
    }

    .btn1 a.arrow1:hover::after {
        background: url(../images/common/btn_arrow_blue.svg) no-repeat center center;
        background-size: calc(8 / 1200 * 100vw) auto;
    }

    .btn2 a:hover {
        background-color: #1f344f;
        color: #fff;
    }

    .btn2 a.arrow1:hover::after {
        background: url(../images/common/btn_arrow_white.svg) no-repeat center center;
        background-size: calc(8 / 1200 * 100vw) auto;
    }
}

@media screen and (min-width: 1200px) {
    .arrow1::after {
        width: 8px;
        background-size: 8px auto;
        margin: 0 27px 0 0;
    }

    .more {
        width: 210px;
    }

    .more a {
        padding: 19px 0;
    }

    .back {
        width: 210px;
    }

    .btn1,
    .btn2 {
        width: 272px;
    }

    .btn1 a::before,
    .btn2 a::before {
        width: 30px;
        padding-top: 50px;
        margin: 0 0 0 20px;
    }

    .btn2 a::before {
        width: 25px;
        margin: 0 0 0 25px;
    }

    .btn2 .arrow1::after,
    .btn1 a.arrow1:hover::after,
    .btn2 a.arrow1:hover::after {
        background-size: 8px auto;
    }
}


/* ================================================================== */
/*    slick
/* ================================================================== */
.slick-arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(106 / 750 * 100vw);
    height: calc(458 / 750 * 100vw);
    position: absolute;
    top: 0;
    z-index: 2;
}

.slick-arrow.prev {
    left: 0;
}

.slick-arrow.next {
    right: 0;
}

.slick-arrow::before,
.slick-arrow::after {
    content: "";
    display: block;
    width: calc(70 / 750 * 100vw);
    height: calc(70 / 750 * 100vw);
    margin: auto;
    background-color: rgba(250, 190, 0, 0.8);
    border-radius: 50%;
}

.slick-arrow::after {
    background: url(../images/common/btn_arrow_white.svg) no-repeat center center;
    background-size: calc(13 / 750 * 100vw) auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.slick-arrow.prev::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

@media screen and (min-width: 768px) {
    .slick-arrow {
        width: calc(64 / 1440 * 100vw);
        height: calc(244 / 1440 * 100vw);
    }

    .slick-arrow::before,
    .slick-arrow::after {
        width: calc(44 / 1440 * 100vw);
        height: calc(44 / 1440 * 100vw);
        margin: auto 0;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .slick-arrow::after {
        background-size: calc(8 / 1440 * 100vw) auto;
    }

    .slick-arrow.next::before,
    .slick-arrow.next::after {
        margin-left: auto;
    }

    .slick-arrow.prev:hover::before,
    .slick-arrow.prev:hover::after {
        margin-left: -20%;
    }

    .slick-arrow.next:hover::before,
    .slick-arrow.next:hover::after {
        margin-right: -20%;
    }
}


/* ================================================================== */
/*    header_nav
/* ================================================================== */
.header {}

.header_nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: 100%;
}

.header_ttl {
    width: calc(220 / 750 * 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    margin: calc(60 / 750 * 100%) 0 0 calc(60 / 750 * 100%);
}

.header_ttl a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.menu_btn {
    width: calc(100 / 750 * 100%);
    padding-top: calc(100 / 750 * 100%);
    position: absolute;
    top: 0;
    right: 0;
    margin: calc(40 / 750 * 100%) calc(40 / 750 * 100%) 0 0;
    z-index: 11;
}

.menu_btn .menu_padding {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 65%;
    margin: 20% auto 0;
}

.menu_btn .menu_padding span {
    display: block;
    width: 100%;
    height: 0;
    padding-top: calc(10 / 65 * 100%);
    background-color: #1f344f;
    border-radius: calc(10 / 750 * 100vw);
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.menu_btn .menu_padding span:nth-child(1) {}

.menu_btn .menu_padding span:nth-child(2) {
    margin-top: calc(25 / 65 * 100%);
}

.menu_btn .menu_padding span:nth-child(3) {
    margin-top: calc(50 / 65 * 100%);
}

.menu_btn.active {}

.menu_btn.active .menu_padding span {}

.menu_btn.active .menu_padding span:nth-child(1) {
    -webkit-transform: translateY(250%) rotate(-45deg);
    transform: translateY(250%) rotate(-45deg);
}

.menu_btn.active .menu_padding span:nth-child(2) {
    opacity: 0;
}

.menu_btn.active .menu_padding span:nth-child(3) {
    -webkit-transform: translateY(-250%) rotate(45deg);
    transform: translateY(-250%) rotate(45deg);
}

.menu_txt {
    width: calc(44 / 100 * 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto calc(24 / 100 * 100%);
}

.nav_wrap {
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

.nav {
    padding: calc(245 / 750 * 100%) 0 calc(215 / 750 * 100%);
}

.nav_ttl {
    width: calc(192 / 750 * 100%);
    margin: 0 auto;
}

.nav_menu_wrap {
    width: calc(590 / 750 * 100%);
    margin: calc(40 / 750 * 100%) auto 0;
}

.nav_menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.nav_menu li {
    width: 50%;
    margin: 0 0 calc(30 / 590 * 100%);
    left: 50%;
    opacity: 0;
    -webkit-transition: 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.nav_menu li.ani,
.nav_menu li.nav9.ani {
    left: 0;
    opacity: 1;
}

.nav_menu li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #26a8a1;
    font-size: 2.8rem;
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    line-height: 1;
}

.nav_menu li:not(.nav9) a::before {
    content: "";
    display: block;
    width: calc(85 / 295 * 100%);
    padding-top: calc(85 / 295 * 100%);
    margin: 0 calc(15 / 295 * 100%) 0 calc(35 / 295 * 100%);
}

.nav_menu li.nav1 a::before {
    background: url(../images/common/btn_nav1.png) no-repeat left top;
    background-size: auto 100%;
}

.nav_menu li.nav2 a::before {
    background: url(../images/common/btn_nav2.png) no-repeat left top;
    background-size: auto 100%;
}

.nav_menu li.nav3 a::before {
    background: url(../images/common/btn_nav3.png) no-repeat left top;
    background-size: auto 100%;
}

.nav_menu li.nav4 a::before {
    background: url(../images/common/btn_nav4.png) no-repeat left top;
    background-size: auto 100%;
}

.nav_menu li.nav5 a::before {
    background: url(../images/common/btn_nav5.png) no-repeat left top;
    background-size: auto 100%;
}

.nav_menu li.nav6 a::before {
    background: url(../images/common/btn_nav6.png) no-repeat left top;
    background-size: auto 100%;
}

.nav_menu li.nav7 a::before {
    background: url(../images/common/btn_nav7.png) no-repeat left top;
    background-size: auto 100%;
}

.nav_menu li.nav8 a::before {
    background: url(../images/common/btn_nav8.png) no-repeat left top;
    background-size: auto 100%;
}

.nav_menu li.nav9 {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin: 0 0 calc(-100 / 590 * 100%) calc(25 / 590 * 100%);
}

.nav_menu li.nav9 a {
    display: inline-block;
}

.nav_menu li.nav9 a::after {
    content: "";
    display: block;
    border-bottom: 1px solid #26a8a1;
}

.nav_menu li a.nolink {
    display: none;
}

.nav_pickup {
    padding: calc(115 / 750 * 100%) 0;
    background-color: #66d7d1;
}

.nav_pickup .nav_ttl {
    width: calc(358 / 750 * 100%);
}

.nav_pickup_wrap {
    width: calc(590 / 750 * 100%);
    margin: 0 auto;
    padding: calc(35 / 750 * 100%) 0 0;
}

.nav_pickup_photo {}

.nav_pickup_photo figcaption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(114 / 750 * 100vw);
    height: calc(114 / 750 * 100vw);
    background: url(../images/common/bg_flower_orange.svg) no-repeat left top;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: calc(-28 / 590 * 100%) calc(-28 / 590 * 100%) 0 0;
    color: #fff;
    font-size: 3rem;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-style: italic;
    line-height: 1;
}

.nav_pickup_photo figcaption span {
    display: block;
    font-size: 2.6rem;
    text-indent: -0.2em;
}

.nav_pickup_txt {
    margin: calc(30 / 590 * 100%) 0 0;
    padding: calc(35 / 590 * 100%) calc(40 / 590 * 100%);
    background-color: #fff;
    border-radius: 0.4em;
    font-size: 2rem;
}

.nav_pickup_txt_title {
    color: #1f344f;
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.357;
    letter-spacing: -0.1em;
}

.nav_pickup_txt_details {
    margin: calc(20 / 510 * 100%) 0 0;
    padding: calc(20 / 510 * 100%) 0 0;
    background: url(../images/common/line_gray_sp.png) no-repeat center top;
    background-size: 100% auto;
    color: #587191;
    font-size: 2.4rem;
    line-height: 1.417;
    letter-spacing: -0.1em;
}

.nav_pickup_btn {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.nav_sns_box p {
    width: calc(88 / 750 * 100%);
    margin: 0 auto calc(30 / 750 * 100%);
}

.nav_sns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: calc(510 / 750 * 100%);
    margin: 0 auto;
    padding: 0 0 calc(55 / 750 * 100%);
}

.nav_sns li {
    width: calc(51 / 510 * 100%);
    margin-right: calc(178 / 510 * 100%);
}

.nav_sns li:last-child {
    margin-right: 0;
}

.top_nav {
    display: none;
}

.banner_box {
    width: 100%;
    z-index: 91;
}

.banner_box a {
    width: calc(470 / 750 * 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 0 calc(53 / 750 * 100%) calc(57 / 750 * 100%);
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
}

.fixed.banner_box a {
    position: fixed;
    margin-bottom: calc(53 / 750 * 100%);
}

.ani_fixed.banner_box {
    overflow: hidden;
}

.ani_fixed.banner_box a {
    margin-bottom: calc(-300 / 750 * 100%);
}

@media screen and (min-width: 768px) {
    .header_ttl {
        width: calc(159 / 1200 * 100%);
        margin: calc(30 / 1200 * 100%) 0 0 calc(60 / 1200 * 100%);
        padding-top: calc(40 / 1200 * 100%);
    }

    .header_ttl svg {
        position: absolute;
        max-height: 100%;
        max-width: 100%;
        top: 0;
        left: 0;
    }

    .menu_btn {
        width: calc(60 / 1200 * 100%);
        padding-top: calc(50 / 1200 * 100%);
        margin: calc(25 / 1200 * 100%) calc(25 / 1200 * 100%) 0 0;
        cursor: pointer;
    }

    .menu_btn .menu_padding {
        width: calc(40 / 60 * 100%);
        margin: calc(10 / 60 * 100%) auto 0;
    }

    .menu_btn .menu_padding span {
        padding-top: calc(4 / 40 * 100%);
        border-radius: 4px;
    }

    .menu_btn .menu_padding span:nth-child(2) {
        margin-top: calc(13 / 40 * 100%);
        margin-top: 32.5%;
    }

    .menu_btn .menu_padding span:nth-child(3) {
        margin-top: calc(26 / 40 * 100%);
        margin-top: 65%;
    }

    .menu_btn:hover .menu_padding span:nth-child(1) {
        margin-top: calc(-3 / 40 * 100%);
        margin-top: -7.5%;
    }

    .menu_btn:hover .menu_padding span:nth-child(3) {
        margin-top: calc(29 / 40 * 100%);
        margin-top: 72.5%;
    }

    .menu_btn.active .menu_padding span:nth-child(1) {
        margin-top: calc(4 / 40 * 100%);
        margin-top: 10%;
    }

    .menu_btn.active .menu_padding span:nth-child(3) {
        margin-top: calc(24 / 40 * 100%);
        margin-top: 60%;
    }

    .nav_wrap {
        overflow: hidden;
    }

    .nav_wrap::before {
        content: "";
        display: block;
        width: 50%;
        height: 100%;
        background-color: #66d7d1;
        position: absolute;
        top: 0;
        right: 0;
    }

    .nav_wrap_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .nav_wrap_bg {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: calc(1020 / 1200 * 100%);
    }

    .nav {
        width: calc(480 / 1020 * 100%);
        padding: 0;
        left: calc(30 / 1020 * 100%);
    }

    .nav_ttl,
    .nav_menu_wrap {
        width: calc(400 / 480 * 100%);
        margin: 0 calc(80 / 480 * 100%) 0 auto;
    }

    .nav_menu_wrap {
        margin-top: calc(50 / 480 * 100%);
    }

    .nav .nav_ttl img {
        width: calc(150 / 400 * 100%);
        margin: 0 auto;
    }

    .nav_menu li a {
        font-size: 2rem;
    }

    .nav_menu li a:hover {
        opacity: 0.7;
    }

    .nav_menu li.nav9 {
        margin-left: calc(35 / 400 * 100%);
    }

    .nav_pickup {
        width: calc(540 / 1020 * 100%);
        padding: 0;
        left: calc(30 / 1020 * 100%);
        background-color: transparent;
    }

    .nav_pickup .nav_ttl,
    .nav_pickup_wrap {
        width: calc(420 / 540 * 100%);
        margin: 0 0 0 auto;
    }

    .nav_pickup_wrap {
        padding: calc(45 / 540 * 100%) 0 0;
    }

    .nav_pickup .nav_ttl img {
        width: calc(292 / 420 * 100%);
        margin: 0 auto;
    }

    .nav_pickup_photo figcaption {
        width: calc(80 / 1200 * 100vw);
        height: calc(80 / 1200 * 100vw);
        right: auto;
        left: 0;
        margin: calc(-20 / 420 * 100%) 0 0 calc(-20 / 420 * 100%);
        font-size: 2.1rem;
    }

    .nav_pickup_photo figcaption span {
        font-size: 1.8rem;
    }

    .nav_pickup_txt {
        margin: calc(10 / 420 * 100%) 0 0;
        padding: calc(25 / 420 * 100%) calc(30 / 420 * 100%);
        border-radius: 0.4em;
        font-size: 2rem;
    }

    .nav_pickup_txt_title {
        font-size: 1.8rem;
        line-height: 1.444;
    }

    .nav_pickup_txt_details {
        font-size: 1.4rem;
        line-height: 1.643;
    }

    .top_nav {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        margin: calc(33 / 1200 * 100%) calc(130 / 1200 * 100%) 0 0;
    }

    .top_nav_menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .top_nav_menu li:not(:last-child) {
        margin-right: calc(25 / 1200 * 100%);
    }

    .top_nav_menu li a {
        padding: calc(10 / 1200 * 100vw);
    }

    .top_nav_menu li a:hover {
        opacity: 0.7;
    }
    
    .banner_box a {
        width: calc(122 / 1200 * 100%);
        padding-top: calc(265 / 1200 * 100%);
        background: url(../images/common/bnr1_pc.png) no-repeat left top;
        background-size: 100% auto;
        left: auto;
        margin: 0 calc(-45 / 1200 * 100%) calc(100 / 1200 * 100%) 0;
        margin-bottom: 8.33%;
        margin-right: -3.75%;
    }
    
    .fixed.banner_box a {
        margin-bottom: 40vh;
    }
    
    _:-ms-lang(x)::-ms-backdrop, .fixed.banner_box a {
        margin-bottom: 15%;
    }
    
    .banner_box a:hover {
        margin-right: -2.92%;
    }
    
    .banner_box a img {
        display: none;
    }
    
    .ani_fixed.banner_box {
        overflow: visible;
    }
}

@media screen and (min-width: 1200px) {
    .header_ttl {
        width: 159px;
        margin: 30px 0 0 60px;
        padding-top: 40px;
    }

    .menu_btn {
        width: 60px;
        padding-top: 50px;
        margin: 25px 25px 0 0;
    }

    .nav_wrap_bg {
        width: 1020px;
    }

    .nav_pickup_photo figcaption {
        width: 80px;
        height: 80px;
    }

    .top_nav {
        margin: 33px 130px 0 0;
    }

    .top_nav_menu li:not(:last-child) {
        margin-right: 25px;
    }

    .top_nav_menu li a {
        padding: 10px;
    }
    
    .banner_box a {
        width: 122px;
        padding-top: 265px;
        margin-bottom: 100px;
        margin-right: -45px;
    }
    
    .banner_box a:hover {
        margin-right: -35px;
    }
}


/* ================================================================== */
/*    header_nav (single_nav)
/* ================================================================== */
.single_nav .nav_menu_wrap {
    margin-top: calc(100 / 750 * 100%);
}

.single_nav .nav_menu li {
    width: 100%;
}

.single_nav .nav_menu li:not(.nav9) a::before {
    content: "";
    display: block;
    width: calc(85 / 590 * 100%);
    padding-top: calc(85 / 590 * 100%);
    margin: 0 calc(30 / 590 * 100%) 0 calc(180 / 590 * 100%);
}

.single_nav .nav_menu li.nav9 {
    position: relative;
    margin: calc(50 / 590 * 100%) 0 0;
    text-align: center;
}

.single_nav .nav_pickup {
    display: none;
}

@media screen and (min-width: 768px) {
    .single_nav.nav_wrap {
        overflow-y: scroll;
    }

    .single_nav.nav_wrap::before {
        display: none;
    }

    .single_nav .nav {
        margin: auto;
        left: 0;
    }

    .nav_ttl,
    .nav_menu_wrap {
        margin-left: auto;
        margin-right: auto;
    }

    .single_nav .nav_wrap_bg {
        padding: 5% 0;
    }
}

@media screen and (min-width: 768px) and (orientation: landscape) {
    .single_nav .nav_wrap_box {
        width: auto;
        height: auto;
    }
}

@media screen and (min-width: 1300px) {
    .single_nav.nav_wrap {
        overflow-y: hidden;
    }

    .single_nav .nav_wrap_box {
        width: 100%;
        height: 100%;
    }
}


/* ================================================================== */
/*    sub_header
/* ================================================================== */
.sub_header {
    padding: calc(463 / 750 * 100%) 0 0;
    background: url(../images/common/bg_subheader_sp.jpg) no-repeat left top;
    background-size: 100% auto;
    overflow: hidden;
}

.sub_header::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(95 / 750 * 100%);
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: skewY(-4deg);
    transform: skewY(-4deg);
}

.sub_ttl {
    width: calc(483 / 750 * 100%);
    margin: 0 auto;
}

.sub_ttl span {
    display: block;
    margin: 0.5em 0 0;
    color: #c5cfdd;
    font-size: 3rem;
    font-family: 'M PLUS Rounded 1c';
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .sub_header {
        padding: calc(210 / 1200 * 100%) 0 0;
        background: url(../images/common/bg_subheader_pc.jpg) no-repeat center top #edfcff;
        background-size: calc(1440 / 1200 * 100%) auto;
    }

    .sub_header::before {
        padding-top: calc(150 / 1200 * 100%);
        margin: 0 0 calc(-75 / 1200 * 100%);
    }

    .sub_ttl {
        width: calc(456 / 1200 * 100%);
    }

    .sub_ttl span {
        margin: 0.7em 0 0;
        font-size: 2rem;
        -webkit-transform: rotate(0.05deg);
        transform: rotate(0.05deg);
    }
}

@media screen and (min-width: 1200px) {
    .sub_header {
        padding: 210px 0 0;
        background: url(../images/common/bg_subheader_pc.jpg) no-repeat center top #edfcff;
        background-size: 1440px auto;
    }

    .sub_header::before {
        padding-top: 150px;
        margin: 0 0 -75px;
    }
}


/* ================================================================== */
/*    footer
/* ================================================================== */
.footer {}

.fixed.pagetop a {
    position: fixed;
}

.ani_fixed.pagetop {
    overflow: hidden;
}

.ani_fixed.pagetop a {
    margin-bottom: calc(-300 / 750 * 100%);
}

.pagetop {
    z-index: 91;
    width: 100%;
}

.pagetop a {
    width: calc(150 / 750 * 100%);
    margin: 0 calc(39 / 750 * 100%) calc(-71 / 750 * 100%) 0;
    position: absolute;
    bottom: 0;
    right: 0;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
}

.footer_wrap {
    background-color: #1f344f;
    z-index: 92;
}

.footer_sitemap {
    width: calc(690 / 750 * 100%);
    margin: 0 auto;
    padding: calc(120 / 750 * 100%) 0 calc(50 / 750 * 100%);
    border-bottom: 1px solid #2f4664;
}

.footer_sitemap_ttl {
    margin: 0 0 calc(120 / 690 * 100%);
}

.footer_sitemap_ttl img {
    width: calc(291 / 690 * 100%);
    margin: 0 auto;
}

.footer_sitemap_ttl span {
    display: block;
    margin: calc(30 / 690 * 100%) 0 0;
    color: #8e9cad;
    font-size: 2.6rem;
    line-height: 1;
    text-align: center;
}

.footer_sitemap_list {
    width: calc(590 / 690 * 100%);
    margin: 0 auto;
}

.footer_sitemap_list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.footer_sitemap_list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50%;
    margin: 0 0 calc(70 / 590 * 100%);
}

.footer_sitemap_list li::before {
    content: "";
    display: inline-block;
    width: calc(12 / 295 * 100%);
    padding-top: calc(12 / 295 * 100%);
    margin: 0 calc(23 / 295 * 100%) 0 0;
    border-radius: 50%;
    background-color: #6e7c8f;
    -ms-flex-item-align: center;
    align-self: center;
}

.footer_sitemap_list li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(260 / 295 * 100%);
    color: #fff;
    font-size: 3.2rem;
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
}

.footer_sitemap_list li.nav8 a::before {
    content: "";
    display: block;
    width: calc(57 / 295 * 100%);
    padding-top: calc(29 / 295 * 100%);
    background: url(../images/common/icon_mail2.png) no-repeat left top;
    background-size: auto 100%;
}

.footer_address {
    padding: calc(80 / 750 * 100%) 0;
}

.footer_address dt {
    width: calc(258 / 750 * 100%);
    margin: 0 auto calc(45 / 750 * 100%);
}

.footer_address .svg_logo1,
.footer_address .svg_logo2 {
    fill: #fff;
}

.footer_address dt img {
    width: calc(239 / 258 * 100%);
    margin: calc(17 / 258 * 100%) 0 0;
}

.footer_address1 {
    margin: 0 0 calc(40 / 750 * 100%);
    color: #fff;
    font-size: 2.4rem;
    line-height: 1.583;
    text-align: center;
}

.footer_address2 {
    margin: 0 0 calc(50 / 750 * 100%);
    color: #fff;
    font-size: 2.2rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-align: center;
}

.footer_address2 span {
    display: block;
    margin: 0 0 calc(5 / 750 * 100%);
    font-size: 5rem;
    font-family: 'Barlow', sans-serif;
    font-weight: 500;
    line-height: 1;
}

.footer_address3_fb {
    width: calc(100 / 750 * 100%);
    margin: 0 auto;
}

.footer_address3_cs {
    width: calc(358 / 750 * 100%);
    margin: calc(65 / 750 * 100%) auto 0;
}

.footer small {
    display: block;
    padding: calc(40 / 750 * 100%) 0;
    background-color: #2f4664;
    color: #b4c5db;
    font-size: 2.4rem;
    line-height: 1.5;
    text-align: center;
    z-index: 92;
}

@media screen and (min-width: 768px) {
    .pagetop a {
        width: calc(102 / 1200 * 100%);
        margin: 0 calc(100 / 1200 * 100%) calc(-77 / 1200 * 100%) 0;
        margin-bottom: -6.42%;
    }

    .ani_fixed.pagetop a {
        margin-bottom: -40%;
    }

    .pagetop .inner {
        max-width: none;
    }

    .pagetop a:hover {
        margin-bottom: calc(-26 / 1200 * 100%);
        margin-bottom: -2.17%;
    }

    .footer_wrap .inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        padding: 0 calc(100 / 1200 * 100%);
    }

    .footer_sitemap {
        width: 50%;
        padding: calc(80 / 1000 * 100%) 0 0;
    }

    .footer_sitemap_ttl {
        margin: 0 0 calc(35 / 500 * 100%);
    }

    .footer_sitemap_ttl img {
        width: calc(125 / 500 * 100%);
        margin: 0;
    }

    .footer_sitemap_ttl span {
        margin: calc(8 / 500 * 100%) 0 0;
        font-size: 1.2rem;
        text-align: left;
    }

    .footer_sitemap_list {
        width: 100%;
    }

    .footer_sitemap_list li {
        width: 33%;
        margin: 0 0 calc(30 / 500 * 100%);
    }

    .footer_sitemap_list li::before {
        width: calc(6 / 250 * 100%);
        padding-top: calc(6 / 250 * 100%);
        margin: 0 calc(12 / 250 * 100%) 0 0;
    }

    .footer_sitemap_list li a {
        width: calc(233 / 250 * 100%);
        font-size: 1.4rem;
    }

    .footer_sitemap_list li a:hover {
        opacity: 0.7;
    }

    .footer_sitemap_list li.nav8 a::before {
        width: calc(32 / 233 * 100%);
        padding-top: calc(14 / 233 * 100%);
        background: url(../images/common/icon_mail3.png) no-repeat left top;
        background-size: auto 100%;
    }

    .footer_address {
        width: 50%;
        padding: calc(70 / 1000 * 100%) 0;
    }

    .footer_address dt {
        width: calc(176 / 500 * 100%);
        margin: 0 0 calc(25 / 500 * 100%);
    }

    .footer_address dt span {
        display: block;
        width: 100%;
        padding-top: calc(45 / 176 * 100%);
    }

    .footer_address dt svg {
        max-height: 100%;
        max-width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .footer_address1 {
        margin: 0 0 calc(30 / 500 * 100%);
        font-size: 1.4rem;
        line-height: 1.4;
        text-align: left;
    }

    .footer_address2 {
        margin: 0 0 calc(50 / 500 * 100%);
        font-size: 1.4rem;
        text-align: left;
    }

    .footer_address2 span {
        margin: 0 0 calc(5 / 500 * 100%);
        font-size: 3.2rem;
        letter-spacing: 0.15em;
    }

    .footer_address2 span::before {
        content: "";
        display: inline-block;
        width: calc(5 / 500 * 100%);
        padding-top: calc(25 / 500 * 100%);
        margin: 0 calc(8 / 500 * 100%) 0 0;
        background-color: #ffb300;
        border-radius: 5px;
        top: 0.02em;
        position: relative;
    }
    
    .footer_address3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .footer_address3_fb {
        width: calc(44 / 500 * 100%);
        margin: 0;
    }

    .footer_address3_fb::before,
    .footer_address3_fb::after {
        content: "";
        display: block;
        width: 100%;
        padding-top: 100%;
        background: url(../images/common/btn_sns_facebook.png) no-repeat left top;
        background-size: 100% auto;
    }

    .footer_address3_fb::after {
        background: url(../images/common/btn_sns_facebook_hover.png) no-repeat left top;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .footer_address3_fb:hover::after {
        opacity: 1;
    }

    .footer_address3_fb img {
        display: none;
    }
    
    .footer_address3_cs {
        width: calc(218 / 500 * 100%);
        margin: calc(3 / 500 * 100%) 0 0 calc(32 / 500 * 100%);
    }
    
    .footer_address3_cs:hover {
        opacity: 0.7;
    }

    .footer small {
        padding: calc(10 / 1200 * 100%) 0;
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 1200px) {
    .pagetop a {
        width: 102px;
        margin: 0 100px -77px 0;
    }

    .pagetop a:hover {
        margin-bottom: -26px;
    }

    .footer_wrap .inner {
        padding: 0 100px;
    }

    .footer small {
        padding: 10px 0;
    }
}


/* ================================================================== */
/*    scroll down
/* ================================================================== */
.scroll_down {
    width: calc(162 / 750 * 100%);
    position: fixed;
    bottom: 0;
    left: 0;
    /*    z-index: 10;*/
    margin: 0 0 calc(150 / 750 * 100%) calc(50 / 750 * 100%);
}

.scroll_down_arrow {
    width: calc(5 / 162 * 100%);
    padding-top: calc(164 / 162 * 100%);
    background-color: #1051B8;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(-50 / 162 * 100%) 0 0 calc(32 / 162 * 100%);
}

.scroll_down_arrow::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 500%;
    background-color: #036eb8;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.scroll_down_img {
    -webkit-animation: scroll_down_ani 0.7s ease forwards alternate infinite;
    animation: scroll_down_ani 0.7s ease forwards alternate infinite;
}

@media screen and (min-width: 768px) {
    .scroll_down {
        width: calc(93 / 1200 * 100%);
        left: 50%;
        margin: 0 0 calc(100 / 1200 * 100%) calc(-470 / 1200 * 100%);
    }
}

@media screen and (min-width: 1200px) {
    .scroll_down {
        width: 93px;
        margin: 0 0 100px -470px;
    }
}

@-webkit-keyframes scroll_down_ani {
    0% {
        top: 0;
    }

    100% {
        top: 5px;
    }
}

@keyframes scroll_down_ani {
    0% {
        top: 0;
    }

    100% {
        top: 5px;
    }
}


/* ================================================================== */
/*    mCustomScrollbar
/* ================================================================== */
.mCSB_inside > .mCSB_container {
    margin-right: 0 !important;
}

.mCSB_scrollTools {
    width: 6px !important;
}

.mCSB_scrollTools .mCSB_draggerContainer {
    background-color: #eee;
}

.mCSB_scrollTools .mCSB_draggerRail {
    width: 6px !important;
    background-color: #c5cfdd !important;
    border-radius: 0 !important;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 6px !important;
}