@charset "utf-8";

/* basic.css
 * ======================================
 * Font
 * Body
 * Header
 * Global navigation
 * Common Element
 * Page Top
 * Footer
 * ======================================
 */

/* ======================================
 *  PC
 * ====================================== */

/* Font
----------------------------------------- */

/* 基本サイズ（16 * 0.625 = 10px） */
html {
    font-size: 62.5%;
}

body {
    color: #003656;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-feature-settings: 'palt';
    font-size: 15px;
    font-size: 1.5em;
    letter-spacing: 0.05em;
    line-height: 2;
    min-width: 960px;
}

.inner {
    padding: 0 45px;
    position: relative;
}

/* Header
----------------------------------------- */

#header {
    height: 100px;
    margin: 0 auto;
    width: 1050px;
}

/* logo */
#header .logo {
    position: relative;
    top: 40px;
    left: 0;
    width: 317px;
}

/* instagram */
#header .instagram {
    position: absolute;
    top: 26px;
    right: 45px;
    width: 54px;
}

/* menuBtn */
#header .menuBtn {
    display: none;
}

/* Global navigation
----------------------------------------- */

#globalNavi {
    align-items: center;
    display: flex;
    position: absolute;
    top: 42px;
    right: calc(50vw - 410px);
}

#globalNavi ul {
    display: flex;
}

#globalNavi ul li {
    margin-right: 36px;
}

#globalNavi ul li a {
    color: inherit;
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
}

/* Common Element
----------------------------------------- */

/* main */
main {
    margin: 0 auto;
    width: 1050px;
}

/* link */
a {
    color: inherit;
    text-decoration: underline;
    transition: .3s;
}

a:hover {
    opacity: 0.8;
}

/* img */
img {
    width: 100%;
}

/* headline */
h2,
h3,
h4,
h5 {
    font-weight: 700;
    line-height: 1.5;
}

h2 {
    text-align: center;
}

h2 span {
    display: block;
    font-family: 'EB Garamond', serif;
    font-size: 5rem;
}

h3.box {
    border: 1px solid;
    padding: 0.53em 0;
    text-align: center;
    width: 214px;
}

/* paragraph */
p {
    margin: 1.06em 0 0 0;
}

p.small {
    font-size: 0.86em;
}

/* list */
ul {
    list-style: none;
}

ul.bullet,
ul.disc {
    margin: 0.73em 0 0 0;
}

ul.bullet li::before {
    content: '・';
}

ul.disc li {
    margin-left: 1.5em;
    text-indent: -1.5em;
}

ul.disc li::before {
    content: '●';
    margin-right: 0.5em;
}

/* button */
.button {
    margin: 70px auto 0;
    width: 425px;
}

.button a {
    background-color: #FCD64A;
    border-radius: 26px;
    display: block;
    font-weight: 700;
    height: 52px;
    line-height: 52px;
    position: relative;
    text-align: center;
    text-decoration: none;
}

.button a::after {
    border-right: 2px solid #003656;
    border-bottom: 2px solid #003656;
    content: '';
    display: inline-block;
    height: 10px;
    margin-top: -5px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: rotate(-45deg);
    width: 10px;
}

/* section */
section {
    padding: 60px 0;
}

/* block */
.block {
    margin: 52px 0 0 0;
}

/* contentBtm */
#contentBtm {
    display: flex;
    justify-content: flex-end;
    padding: 60px 0 20px;
}

#contentBtm .btmLink ul {
    text-align: right;
}

#contentBtm .btmLink ul li {
    background: url(../images/common/icon_arrow_link.svg) no-repeat left center;
    background-size: 1em;
    display: inline-block;
    line-height: 1;
    margin: 0 0 0 45px;
    padding: 0 0 0 20px;
    vertical-align: middle;
}

#contentBtm .btmLink ul li a {
    color: inherit;
    text-decoration: none;
}

/* news */
.news iframe {
    height: 400px;
}

/* Page Top
----------------------------------------- */

#pageTop {
    margin: 0 auto;
    position: relative;
    max-width: 1050px;
}

#pageTop a {
    display: block;
    height: 44px;
    margin-left: 1006px;
    outline: none;
    overflow: hidden;
    position: fixed;
    bottom: -60px;
    width: 44px;
    z-index: 9999;
}

/* Footer
----------------------------------------- */

#footer {
    background-color: #003656;
    color: #ffffff;
    margin: 60px 0 0 0;
    padding: 30px 0;
    text-align: center;
    width: 100%;
}

/* copyRight */
#footer .copyRight {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

/* ======================================
 *  SP
 * ====================================== */

@media screen and (max-width: 767px) {

    body {
        min-width: initial;
    }

    .inner {
        padding: 0 5%;
    }

    /* Header
----------------------------------------- */

    #header {
        height: 65px;
        width: auto;
    }

    /* logo */
    #header .logo {
        top: 12px;
        width: 200px;
    }

    /* instagram */
    #header .instagram {
        top: 10px;
        right: 75px;
        width: 44px;
    }

    /* menuBtn */
    #header .menuBtn {
        color: #ffffff;
        display: block;
        font-size: 1.0rem;
        letter-spacing: 0.1em;
        list-style: none;
        position: absolute;
        top: 0;
        right: 10px;
        text-align: center;
    }

    #header .menuBtn a {
        border-top: none;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        color: #ffffff;
        display: block;
        height: 55px;
        padding: 32px 0 0 0;
        text-decoration: none;
        width: 50px;
    }

    #header .menuBtn a,
    #header .menuBtn a.active {
        background: #003656 url(../images/sp/menu.png) no-repeat center 5px;
        background-size: auto 55%;
    }

    /* Global Navigation
----------------------------------------- */

    #globalNavi {
        display: block;
        position: static;
    }

    #globalNavi ul {
        display: none;
    }

    #globalNavi ul li {
        background-color: #D9E1E6;
        border-bottom: 1px solid #ffffff;
        margin-right: 0;
    }

    #globalNavi ul li a {
        padding: 13px 5% 12px;
    }

    /* Common Element
----------------------------------------- */

    /* main */
    main {
        width: auto;
    }

    /* headline */
    h2 span {
        font-size: 4rem;
    }

    h3.box {
        width: 100%;
    }

    /* button */
    .button {
        margin-top: 50px;
        width: 100%;
    }

    /* section */
    section {
        padding: 42px 0;
    }

    /* block */
    .block {
        margin-top: 36px;
    }

    /* contentBtm */
    #contentBtm {
        display: block;
        padding: 30px 0 10px;
    }

    #contentBtm .btmLink {
        margin: 30px 0 0 0;
    }

    #contentBtm .btmLink ul {
        text-align: center;
    }

    #contentBtm .btmLink ul li {
        margin: 0 10px;
    }

    /* news */
    .news iframe {
        height: 290px;
    }

    /* Page Top
----------------------------------------- */

    #pageTop a {
        margin-left: calc(100% - 44px);
    }
}