@charset "utf-8";


/**
 * スマホ用設定
 */
@media ( width < 1000px ) {

}


/**
 * PC用設定
 */
@media ( width >= 1000px ) {

    .hello-wrap {
        margin: 0 auto;
        padding: 0 20px;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0 20px;
    }

    .hello-wrap .ws-link-btns {
        margin: 10px auto 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px 8px;
    }
    .hello-wrap .ws-link-btns .ws-link-btn {
        display: block;
        margin: 0;
        padding: 0;
        width: 100px;
        height: auto;
        aspect-ratio: 1 / 1;
        color: #fff;
        font-size: 1.0rem;
        font-weight: 500;
        text-align: center;
        background-color: #1267b5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        border-radius: 8px;
    }
    .hello-wrap .ws-link-btns .ws-link-btn .icon {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 50%;
    }
    .hello-wrap .ws-link-btns .ws-link-btn .icon img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .hello-wrap .ws-link-btns .ws-link-btn .txt {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 50%;
        text-align: center;
    }

    .hello-wrap .hello-main {
        margin: 0;
        padding: 0;
        width: calc( 100% - 400px - 20px );
    }
    .hello-wrap .hello-main h2 {
        margin: 1.0em 0 0.2em;
        padding: 0;
        font-size: 1.3rem;
        font-weight: 600;
        text-align: left;
    }
    .hello-wrap .hello-main h2:first-of-type {
        margin-top: 0;
    }
    .hello-wrap .hello-main .hello-main-box {
        margin: 0 auto;
        padding: 20px;
        width: 100%;
        background: #f8f8f8;
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 0 20px;
    }
    .hello-wrap .hello-main .hello-main-box .hello-main-box-l {
        margin: 0;
        padding: 0;
        width: 55%;
    }
    .hello-wrap .hello-main .hello-main-box .hello-main-box-r {
        margin: 0;
        padding: 0;
        width: calc( 45% - 20px );
    }
    .hello-wrap .hello-main .hello-main-box .hello-main-box-r video {
        display: block;
        margin: 0 auto 40px;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 1080;
        border: 0;
    }
    .hello-wrap .hello-main .hello-main-box .hello-main-box-r iframe {
        display: block;
        margin: 0 auto 40px;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 1080;
        border: 0;
    }
    .hello-wrap .hello-main .hello-event-box {
        margin: 0 auto;
        padding: 20px;
        width: 100%;
    }
    .hello-wrap .hello-main .hello-link-box {
        margin: 0 auto;
        padding: 20px;
        width: 100%;
        background: #f8f8f8;
    }
    .hello-wrap .hello-main .hello-link-box .ws-link-items {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 20px 20px;
    }
    .hello-wrap .hello-main .hello-link-box .ws-link-items .ws-link-item {
        margin: 0;
        padding: 0;
        width: 200px;
        display: flex;
        align-item: center;
        justify-content: flex-start;
        gap: 0 8px;
    }
    .hello-wrap .hello-main .hello-link-box .ws-link-items .ws-link-item .icon {
        margin: 0;
        padding: 0;
        width: 40px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .hello-wrap .hello-main .hello-link-box .ws-link-items .ws-link-item .icon img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .hello-wrap .hello-main .hello-link-box .ws-link-items .ws-link-item .txt {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 1.0rem;
    }

    .hello-wrap .hello-sidebar {
        margin: 0;
        padding: 20px 0;
        width: 400px;
    }
    .hello-wrap .hello-sidebar h2 {
        margin: 1.0em 0 0.2em;
        padding: 0;
        font-size: 1.3rem;
        font-weight: 600;
        text-align: left;
    }
    .hello-wrap .hello-sidebar .hello-sidebar-links {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .hello-wrap .hello-sidebar .hello-sidebar-btns {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .hello-wrap .hello-sidebar .hello-sidebar-worldclocks {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .hello-wrap .hello-sidebar .hello-sidebar-worldclocks .ws-world-clock {
        margin: 0;
        padding: 4px 8px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        border: 1px solid #ccc;
    }
    .hello-wrap .hello-sidebar .hello-sidebar-worldclocks .ws-world-clock + .ws-world-clock {
        margin-top: 0.5rem;
    }
    .hello-wrap .hello-sidebar .hello-sidebar-worldclocks .ws-world-clock span:nth-child(1) {
        font-size: 1.2rem;
    }
    .hello-wrap .hello-sidebar .hello-sidebar-worldclocks .ws-world-clock span:nth-child(2) {
        font-size: 1.2rem;
    }

    .hello-top-form {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .hello-top-form + .hello-top-form {
        margin-top: 4px;
    }
    .hello-top-form > div {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        align-items: center;
    } 
    .hello-top-form > div > :is(input[name="q"],input[name="s"]) {
        font-family: inherit;
        font-size: 16px;
        margin: 0;
        padding: 0.2em 0.8em;
        width: 10.0em;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 4px 0 0 4px;
    }
    .hello-top-form > div > button[type="submit"] {
        position: relative;
        margin: 0;
        padding: 0.2em 0.8em;
        color: #fff;
        font-size: 16px;
        font-family: inherit;
        white-space: nowrap;
        border: 0;
        background: #009;
        box-shadow: -2px 2px 4px #fff inset;
        border-radius: 0 4px 4px 0;
    }

    #hello-sub-mv {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: 200px;
    }
    #hello-sub-mv .hello-sub-mv-bg {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    #hello-sub-mv .hello-sub-mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #hello-sub-mv > h1 {
        position: absolute;
        bottom: 40px;
        left: 40px;
        color: #fff;
        font-size: 2.0rem;
        font-wight: 700;
        text-align: left;
        text-shadow:
            0 0 8px #000,
            0 0 8px #000;
    }

    .post-items {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .post-items .post-item {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0 20px;
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 1.0rem;
    }
    .post-items .post-item + .post-item {
        margin-top: 1.0em;
    }
    .post-items .post-item .post-item-pic {
        margin: 0;
        padding: 0;
        width: 25%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .post-items .post-item .post-item-pic:empty {
        background: #eee;
    }
    .post-items .post-item .post-item-pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .post-items .post-item .post-item-info {
        margin: 0;
        padding: 0;
        width: calc( 75% - 20px );
    }
    .post-items .post-item .post-item-info .date {
        margin: 0;
        padding: 0;
        font-size: 14px;
        text-align: left;
    }
    .post-items .post-item .post-item-info .title {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 16px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .post-items .post-item .post-item-info .author {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 14px;
        text-align: left;
    }

    .single-wrap {
        margin: 0 auto;
        padding: 80px 0;
        width: 90%;
        max-width: 960px;
    }

}