@charset "utf-8";
/* Copyright 2021 FSFIELD All Rights Reserved. */

@media print, screen and (min-width: 768px) {
    /* 表示領域が768px以上の場合に適用するスタイル */
    /*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	PC

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

    /* ------------------------------------------------------------

	アクセス

	------------------------------------------------------------ */

    .wrap_access {
        display: flex;
        flex-direction: column;
        gap: 120px;
    }

    .wrap_access .wrap_links {
        display: flex;
        gap: 40px;
    }

    .wrap_access .link {
        width: calc(50% - 20px);
    }

    .wrap_access .link a {
        color: #333;
        display: block;
        font-weight: 700;
        font-size: 1.8rem;
        border-bottom: 2px solid #ffa500;
        padding: 0 20px 25px 0;
        position: relative;
    }

    .wrap_access .link a::before {
        content: "";
        background: url(../img/ico_arrow01.svg) no-repeat 0 0;
        background-size: 16px;
        display: block;
        width: 16px;
        height: 10px;
        transform: rotate(90deg);
        position: absolute;
        top: 10px;
        right: 10px;
        transition: right 0.3s;
    }

    .wrap_access .link a:hover::before {
        right: 0;
    }

    .access {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .access .inner {
        display: flex;
        justify-content: space-between;
    }

    .access .inner .train {
        width: 640px;
    }

    .access .inner .train .ttl {
        display: flex;
        padding: 10px 24px;
        align-items: center;
        background: #ffa500;
        margin-bottom: 24px;
    }

    .access .inner .train .ttl h3 {
        color: #fff;
        font-size: 2rem;
        font-weight: 700;
    }

    .access .inner .detail {
        width: 406px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .access .inner .detail .item {
        display: flex;
        width: 100%;
    }

    .access .inner .detail .item .ttl {
        display: flex;
        padding: 4px 24px;
        justify-content: center;
        align-items: center;
        background: #333;
    }

    .access .inner .detail .item .ttl h4 {
        color: #fff;
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.8;
    }

    .access .inner .detail .item .txt {
        background: #fff;
        padding: 5.5px 20px;
        display: flex;
        align-items: center;
        flex: 1;
    }

    .access .inner .detail .item .txt p {
        color: #333;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.8;
    }

    .access .map img {
        width: 100%;
        height: auto;
    }

    .venue,
    .parking {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .venue .ttl,
    .parking .ttl{
        width: 640px;
        display: flex;
        padding: 10px 24px;
        align-items: center;
        background: #ffa500;
    }

    .venue .ttl h3,
    .parking .ttl h3{
        color: #fff;
        font-size: 2rem;
        font-weight: 700;
    }

    .venue .inner {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .venue .unit {
        display: flex;
        position: relative;
        height: 420px;
        background: #FFF;
    }

    .venue .unit .txt {
        width: calc(100% - 623px);
        display: flex;
        align-items: center;
        position: relative;
    }

    .venue .unit .txt p:last-of-type {
        padding-left: 120px;
        font-size: 2.4rem;
        font-weight: 500;
    }

    .venue .unit .txt .step {
        position: absolute;
        top: 20px;
        left: 20px;
        font-family: Roboto;
        font-size: 24px;
        font-style: italic;
        font-weight: 700;
        line-height: 1.2;
    }

    .venue .unit .image {
        width: 623px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);
    }

    .venue .unit .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

} /*--@media--*/

@media only screen and (max-width: 767px) {
    /* 表示領域が767px以下の場合に適用するスタイル */
    /*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

    /* ------------------------------------------------------------

	作成者紹介

	------------------------------------------------------------ */

    .wrap_access {
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

    .wrap_access .wrap_links {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .wrap_access .link {
        width: 100%;
    }

    .wrap_access .link a {
        color: #333;
        display: block;
        font-weight: 700;
        font-size: 1.8rem;
        border-bottom: 2px solid #ffa500;
        padding: 0 20px 25px 0;
        position: relative;
    }

    .wrap_access .link a::before {
        content: "";
        background: url(../img/ico_arrow01.svg) no-repeat 0 0;
        background-size: 16px;
        display: block;
        width: 16px;
        height: 10px;
        transform: rotate(90deg);
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .access {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .access .inner {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .access .inner .train {
        width: 100%;
    }

    .access .inner .train .ttl {
        display: flex;
        padding: 10px 24px;
        align-items: center;
        background: #ffa500;
        margin-bottom: 24px;
    }

    .access .inner .train .ttl h3 {
        color: #fff;
        font-size: 2rem;
        font-weight: 700;
    }

    .access .inner .train .txt {
        font-size: 1.6rem;
        line-height: 2.2;
    }

    .access .inner .detail {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .access .inner .detail .item {
        display: flex;
        width: 100%;
    }

    .access .inner .detail .item .ttl {
        display: flex;
        padding: 4px 24px;
        justify-content: center;
        align-items: center;
        background: #333;
    }

    .access .inner .detail .item .ttl h4 {
        color: #fff;
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.8;
    }

    .access .inner .detail .item .txt {
        background: #fff;
        padding: 5.5px 10px;
        display: flex;
        align-items: center;
        flex: 1;
    }

    .access .inner .detail .item .txt p {
        color: #333;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.8;
    }

    .access .map img {
        width: 100%;
        height: auto;
    }

    .venue,
    .parking {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .venue .ttl,
    .parking .ttl {
        width: 100%;
        display: flex;
        padding: 10px 24px;
        align-items: center;
        background: #ffa500;
    }

    .venue .ttl h3,
    .parking .ttl h3{
        color: #fff;
        font-size: 2rem;
        font-weight: 700;
    }

    .venue .inner {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .venue .unit {
        display: flex;
        flex-direction: column-reverse;
        position: relative;
        background: #FFF;
    }

    .venue .unit .txt {
        display: flex;
        flex-direction: column;
        padding: 20px;
        gap: 12px;
    }

    .venue .unit .txt p {
        font-size: 2rem;
        font-weight: 500;
    }

    .venue .unit .txt .step {
        font-family: Roboto;
        font-size: 1.6rem;
        font-style: italic;
        font-weight: 700;
        line-height: 1.2;
    }

    .venue .unit .image img {
        width: 100%;
        height: auto;
    }

} /*--@media--*/