@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    box-sizing: border-box;
}
img {
    width: 100%;
    vertical-align: bottom;
}
html {
    scroll-behavior: smooth;
}
/* header */
header a {
    text-shadow: 1px 1px darkblue;
    /* font-weight: bold; */
}
.grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        url(../img/hero.jpg);
    background-size: cover;
    background-position: center;
}
.grid-item01 {
    grid-column: 1/2;
    grid-row: 1/2;
    width: 100%;
    height: 100%;
    text-align: center;
    border-bottom: 2px solid #003b73;
    /* border-bottom: 2px solid white; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid-item01 img {
    width: 70px;
}
.grid-item02 {
    grid-column: 2/3;
    grid-row: 1/2;
    width: 100%;
    height: 100%;
    border-bottom: 2px solid #003b73;
    /* border-bottom: 2px solid white; */
    margin: 0 auto;
    display: flex;
    justify-content: left;
    align-items: center;
}
.grid-item02 a {
    font-size: 2em;
    font-family: serif;
    color: white;
    font-weight: 900;
}

.pc-header {
    display: none;
}
@media (min-width: 768px) {
    .sp-header {
        display: none;
    }
    .pc-header {
        display: block;
    }
    .grid-container {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        background-size: contain;
        background-position: center;
    }
    .grid-item01 {
        grid-column: 3/4;
        grid-row: 1/2;
        border-bottom: 2px solid #003b73;
    }
    .grid-item02 {
        grid-column: 4/7;
        grid-row: 1/2;
        border-right: 2px solid #003b73;
        border-bottom: 2px solid #003b73;
    }
    /* .grid-item02 a {
        font-size: 2em;
    } */
    */ .grid-left1 {
        grid-column: 1/2;
        grid-row: 1/6;
        border-right: 2px solid #003b73;
        background-image: linear-gradient(
                rgba(0, 0, 0, 0.2),
                rgba(0, 0, 0, 0.2)
            ),
            url(../img/hero-left1.jpg);
        background-size: cover;
        background-position: center;
    }
    .grid-left2 {
        grid-column: 2/3;
        grid-row: 1/6;
        border-right: 2px solid #003b73;
        background-image: linear-gradient(
                rgba(0, 0, 0, 0.2),
                rgba(0, 0, 0, 0.2)
            ),
            url(../img/hero-left2.jpg);
        background-size: cover;
        background-position: center;
    }
    .grid-hero {
        grid-column: 3/7;
        grid-row: 2/5;
        border-right: 2px solid #003b73;
    }
    .grid-right1 {
        grid-column: 7/8;
        grid-row: 1/6;
        border-right: 2px solid #003b73;
        background-image: linear-gradient(
                rgba(0, 0, 0, 0.2),
                rgba(0, 0, 0, 0.2)
            ),
            url(../img/hero-right1.jpg);
        background-size: cover;
        background-position: center;
    }
    .grid-right2 {
        grid-column: 8/9;
        grid-row: 1/6;
        background-image: linear-gradient(
                rgba(0, 0, 0, 0.2),
                rgba(0, 0, 0, 0.2)
            ),
            url(../img/hero-right2.jpg);
        background-size: cover;
        background-position: center;
    }
}
/* hamburger */
.hamburger-morph {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.hamburger-morph__icon {
    width: 100%;
    height: 100%;
}

.hamburger-morph__line {
    fill: none;
    stroke: white;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-morph__line:nth-child(1) {
    stroke-dasharray: 60 207;
}

.hamburger-morph__line:nth-child(2) {
    stroke-dasharray: 60 60;
}

.hamburger-morph__line:nth-child(3) {
    stroke-dasharray: 60 207;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(1) {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(2) {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
}

.hamburger-morph.active .hamburger-morph__line:nth-child(3) {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
}

.nav-morph {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(29, 29, 31, 0.9);
    clip-path: circle(0% at calc(100% - 44px) 44px);
    transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 900;
}

.nav-morph.active {
    clip-path: circle(150% at calc(100% - 44px) 44px);
}

.nav-morph__wrapper {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: 10vh;
}

.nav-morph__list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.nav-morph__item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.nav-morph.active .nav-morph__item {
    opacity: 1;
    transform: translateY(0);
}

.nav-morph.active .nav-morph__item:nth-child(1) {
    transition-delay: 0.3s;
}
.nav-morph.active .nav-morph__item:nth-child(2) {
    transition-delay: 0.4s;
}
.nav-morph.active .nav-morph__item:nth-child(3) {
    transition-delay: 0.5s;
}
.nav-morph.active .nav-morph__item:nth-child(4) {
    transition-delay: 0.6s;
}

.nav-morph__link {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 20px 30px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
}

.nav-morph__text,
.nav-morph__hover {
    display: block;
    transition: transform 0.3s ease;
}

.nav-morph__hover {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    transform: translateY(0%);
    color: aqua;
}

.nav-morph__link:hover .nav-morph__text {
    transform: translateY(-100%);
}

.nav-morph__link:hover .nav-morph__hover {
    transform: translateY(-100%);
}
body {
    background-color: #003b73;
    font-family: "Shippori Mincho B1", serif;
    font-style: normal;
    overflow-x: hidden;
}
/* main */
.post_content h2 {
    font-size: 36px;
    font-weight: 900;
    width: 70%;
    color: #003b73; /*フォントカラー*/
    /* text-shadow: 1px 1px darkgrey; */
    background-image: linear-gradient(
            45deg,
            rgba(254, 246, 210, 0.53) 0%,
            rgba(254, 246, 210, 0.53) 14.286%,
            rgba(221, 240, 216, 0.53) 14.286%,
            rgba(221, 240, 216, 0.53) 28.572%,
            rgba(188, 233, 223, 0.53) 28.572%,
            rgba(188, 233, 223, 0.53) 42.858%,
            rgba(156, 227, 229, 0.53) 42.858%,
            rgba(156, 227, 229, 0.53) 57.144%,
            rgba(123, 220, 235, 0.53) 57.144%,
            rgba(123, 220, 235, 0.53) 71.42999999999999%,
            rgba(90, 214, 242, 0.53) 71.43%,
            rgba(90, 214, 242, 0.53) 85.71600000000001%,
            rgba(57, 207, 248, 0.53) 85.716%,
            rgba(57, 207, 248, 0.53) 100.002%
        ),
        linear-gradient(
            135deg,
            rgb(246, 99, 200) 0%,
            rgb(246, 99, 200) 12.5%,
            rgb(223, 98, 196) 12.5%,
            rgb(223, 98, 196) 25%,
            rgb(199, 97, 192) 25%,
            rgb(199, 97, 192) 37.5%,
            rgb(176, 96, 188) 37.5%,
            rgb(176, 96, 188) 50%,
            rgb(152, 95, 184) 50%,
            rgb(152, 95, 184) 62.5%,
            rgb(129, 94, 180) 62.5%,
            rgb(129, 94, 180) 75%,
            rgb(105, 93, 176) 75%,
            rgb(105, 93, 176) 87.5%,
            rgb(82, 92, 172) 87.5%,
            rgb(82, 92, 172) 100%
        ); /*背景グラデーションカラー*/
    padding: 0.25em 1em; /*余白*/
}

.guidemap {
    width: 100%;
    padding: 20px 0;
    text-align: center;
}
.guidemap img {
    width: 90%;
    margin-top: 50px;
}
.guidemap dl {
    color: white;
    width: 90%;
    margin: 0 auto;
}
.guidemap dt {
    color: aqua;
    margin: 50px;
}
.guidemap dd {
    text-align: justify;
}

@media (min-width: 768px) {
    .guidemap {
        width: 80%;
        margin: 0 auto;
    }
}

/* footer */
footer {
    margin: 20px 0 20px;
    width: 100%;
    gap: 5px;
    color: white;
}
footer img {
    width: 50px;
}
.fooer-logo {
    margin-left: 5%;
    display: flex;
    align-items: center;
}
footer h2 {
    font-size: 18px;
}
footer h3 {
    font-size: 1em;
    color: white;
}

footer a {
    color: white;
}
footer li {
    font-size: 0.7em;
}

.footer-inner {
    display: flex;
    margin-left: 50%;
    justify-content: center;
    gap: 10px;
}
.footer-menu {
    width: 40%;
}
.footer-sns {
    width: 40%;
}
@media (min-width: 768px) {
    footer img {
        width: 100px;
    }
    footer h2 {
        font-size: 36px;
    }
    footer h3 {
        font-size: 1.5em;
    }
    footer li {
        font-size: 1em;
        /* color: white; */
    }
    .footer-inner {
        margin-left: 60%;
    }
}