@charset "utf-8";

* {
    text-shadow: none;
    letter-spacing: 3px;
}

body {
    overflow-x: hidden;
}

/********************** 下層ページ共通 **********************/

/* フェードイン用CSS */
/* セクションアニメ用 初期状態 */
/*
main section.content_wrap h2,
main section.content_wrap h3,
main section.content_wrap p,
main section.content_wrap figure,
main section.content_wrap figcaption,
main section.content_wrap img,
main section.content_wrap dl,
main section.content_wrap dt,
main section.content_wrap dd,
main section.content_wrap table {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
*/

/* 初期状態は少し下にずらして透明 */
/*
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 2s ease-out, transform 2s ease-out;
}
*/

/* 表示されたらクラス追加でふわっと表示 */
/*
.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}
*/

/* end フェードイン用CSS */
button:hover a {
    background: #fff;
    color: var(--ac-color);
    border: 2px solid var(--ac-color);
}

button a {
    border: 2px solid rgba(0, 0, 0, 0);
}

.nav_active {
    color: #FFD138;
    font-weight: bold;
}

.flex_container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    gap: 2rem;
    margin: 2rem auto;
}

.flex_item {
    width: calc(50% - 1rem);
    position: relative;
}

#closeBtn {
    top: 10px;
    right: 10px;
}

header .logo {
    color: #Fff;
    position: absolute;
    left: 8%;
    top: 32%;
}

header .logo img {
    display: none;
}

header .logo span {
    font-size: 1.8rem;
}

/********************** about **********************/

#about,
#activities,
.access,
#accessibility,
#policy {
    color: #000;
    /* font-size: var(--fsize24); */
    background: url(../images/kasumi_bg_02.jpg) center center;
}

#about .page-indicator.pc_only,
#activities .page-indicator.pc_only,
.access .page-indicator.pc_only,
#accessibility .page-indicator.pc_only,
#policy .page-indicator.pc_only {
    display: none !important;
}

#about figure img {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

#about #content1 {
    position: relative;
    z-index: 0;
    padding: var(--px100) 0;
    margin: 0 auto;
    color: #fff;
}

#about #content2,
#about #content4 {
    margin: 0 auto;
}


#about #content1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: var(--ac-color);
    z-index: -1;
}

#activities #content1 article.content_one {
    margin-top: var(--px100);
}

#activities #content1 article.content_one h3 {
    font-size: var(--px50);
    text-align: center;
}

#activities #content2 {
    color: #fff;
    padding: var(--px100) 0;
    margin-bottom: 0;
}

#activities #content2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: var(--ac-color);
    z-index: -1;
}

#about header,
#activities header,
.access header,
#accessibility header,
#policy header {
    background-color: #000;
    position: relative;
}

#about #hamburgerBtn div,
#activities #hamburgerBtn div,
.access #hamburgerBtn div,
#accessibility #hamburgerBtn div,
#policy #hamburgerBtn div {
    transform: none;
}

/* ファーストビュー */

#about .fv_wrap {
    background: url(../images/about/about_fv_img.jpg) top center / cover no-repeat;
}

#activities .fv_wrap {
    background: url(../images/activities/activities_fv_img.jpg) center center / cover no-repeat;
}

#access_tokyo .fv_wrap {
    background: url(../images/access_tokyo/access_tokyo_fv_img.jpg) center center / cover no-repeat;
}

#access_kyoto .fv_wrap {
    background: url(../images/access_tokyo/access_tokyo_fv_img.jpg) center center / cover no-repeat;
}

#accessibility .fv_wrap {
    background: url(../images/accessibility/accessibility_fv_img.jpg) center center / cover no-repeat;
}

#policy .fv_wrap {
    background: url(../images/policy/policy_fv_img.jpg) center center / cover no-repeat;
}

.fv_wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 8 / 3;
}

.fv_wrap::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
}

#about h1,
#activities h1,
.access h1,
#accessibility h1,
#policy h1 {
    font-size: clamp(1.9rem, 6.25vw, 3rem);
    writing-mode: unset;
    margin: 0 auto;
    z-index: 1;
    color: #fff;
    letter-spacing: 8px !important;
    font-weight: bold;
}

.access h1 {
    font-size: clamp(30px, 6.25vw, 3rem);
}

#about h2,
#activities h2,
.access h2 {
    color: var(--sub-color);
    font-size: var(--fsize90);
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 8px !important;
}

#about h2 div,
#activities h2 div,
.access h2 div {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

#about h3,
#activities h3,
.access h3 {
    margin: var(--px50) auto;
    font-size: var(--px50);
    letter-spacing: 3px !important;
}


/* end ファーストビュー */

/* パンくず */
.pankuzu,
.pankuzu {
    width: 80%;
    margin: 2rem auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pankuzu a,
.pankuzu a {
    color: #000;
}

/* end パンくず */

/*メインコンテンツ */
main {
    width: 80%;
    margin: 0 auto;
}

.content_wrap {
    margin: var(--px140) auto;
}

.content_wrap p {
    line-height: 1.4;
    margin: var(--px24) auto;
    letter-spacing: 3px;
    font-weight: normal;
}

#content1 .content_wrap p,
#content2 .content_wrap p {
    margin: var(--px50) auto;
}

/* 2カラム 画像テキスト*/
.content_two {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.content_two figure {
    width: 75%;
}

/* コンテンツを横幅いっぱい */
#content2 {
    position: relative;
}

#about #content1 h2 {
    writing-mode: vertical-rl;
    width: calc(25% - 100px);
    color: #fff;
}

#activities h2 {
    text-align: center;
}

#content2 .content_two {
    flex-direction: row-reverse;
    align-items: flex-start;
}

#content2 h2 {
    writing-mode: vertical-rl;
    margin-right: 1rem;
    line-height: 1.4;
    width: calc(23% - 15px);
}


#content3 .content_one p {
    margin: var(--px30) auto;
}

#about #content3 .content_one p:last-of-type {
    text-align: right;
    font-size: var(--fsize30);
    font-weight: bold;
}

#about #content4 table {
    width: 100%;
}

#about #content4 table th {
    width: 7%;
}

#about #content4 table td {
    font-size: var(--fsize24);
    width: 88%;
}

#content4 {
    position: relative;
    z-index: 0;
    color: #fff;
    padding: var(--px100) 0;
}

#content4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: #000;
    z-index: -1;
}


#content4 h2 {
    color: #fff;
}

/* テーブル */
table {
    margin: var(--px50) auto;
}

tr {
    margin-bottom: var(--px50);
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5%;
}

tr:last-child {
    margin-bottom: 0;
}

th {
    width: 10%;
    text-align: left;
}

td {
    width: 85%;
    line-height: 1.4;
    font-weight: normal;
}

/* enf テーブル */

#content5 .content_block_fast {
    margin: var(--px50) auto;
}

#content5 dl {
    display: flex;
    padding: 1.5rem 0;
    line-height: 1.4;
}

#content5 dt {
    width: 26%;
    margin-right: 2%;
}

#content5 dd {
    font-size: var(--fsize24);
    width: 72%;
    font-weight: normal;
}

.content_block_second {
    margin: var(--px100) auto;
}

#content5 .content_two figure {
    width: calc(50% - 3%);
}

#content5 .content_two {
    gap: 6%;
    margin-top: var(--px50);
}

figcaption {
    text-align: center;
    margin-top: var(--px30);
}

#about footer,
#activities footer,
.access footer,
#accessibility footer,
#policy footer {
    position: relative;
}



/*************************** #activities ***************************/

#activities #content1 h3,
#activities #content3 h3 {
    font-size: var(--fsize30);
}

#activities #content1 h3 span.subttl,
#activities #content3 h3.subttl {
    font-size: var(--fsize24);
}

#activities .flex_item::after {
    content: "";
    position: absolute;
    bottom: -4px;
    width: 120%;
    height: 2px;
    background: var(--ac-color);
}

#activities .flex_container {
    overflow: hidden;
}

#activities #content1 .flex_item p {
    font-size: var(--fsize24);
}

#activities .flex_container::before {
    content: "";
    border: 1px solid var(--ac-color);
    position: absolute;
    height: 100%;
    left: 50%;
    top: 0;
    border-radius: 20px;
}

#activities .flex_container {
    gap: 0 2rem;
}

.flex_container::before,
.flex_container .flex_item::after {
    /*opacity: 0;*/
    opacity: 1;
}

.flex_container.fade_in::before,
.flex_container.fade_in .flex_item::after {
    animation: fadeIn 2s ease 0.2s 1 normal forwards;
}

@keyframes fadeIn {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

/* #activities .flex_item:first-child:before,
#activities .flex_item:nth-of-type(3):before {
    content: "";
    border-bottom: 4px solid var(--ac-color);
    width: 200%;
    position: absolute;
    left: 100%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 20px;
} */

#activities #content2 h2 {
    writing-mode: unset;
    width: 100%;
    color: #fff;
}

#activities #content2 h3 {
    color: #fff;
    font-size: var(--fsize30);
}

#activities #content2 .flex_item::after {
    background-color: #fff;
}

#activities #content2 .flex_container::before {
    border: 2px solid #ffffff;
}

#about #content5 dl{
	position:relative;
}

#about #content5 dl:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    /*width: 0;*/
    width: 100%;
    background-color: var(--ac-color);
}

/* アニメーション用クラス */
/*
#about #content5 dl.active:after {
    animation: fadeIn-border 2s ease forwards;
    border-radius: 20px;
}

@keyframes fadeIn-border {
    from {
        opacity: 0;
        width: 0;
    }

    to {
        opacity: 1;
        width: 100%;
    }
}
*/


/*************** アクセスマップCSS ***************/
.access #content2 {
    position: relative;
    padding: var(--px140) 0;
}

.access #content2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--ac-color);
    width: 100vw;
    height: 100%;
}


.access #content1 h2 {
    margin: var(--px30) auto;
}

.access #content2 table {
    color: #fff;
    width: 100%;
}

.access tr {
    justify-content: flex-start;
    gap: 3%;
    padding: 1.5rem 0;
    margin-bottom: 0;
}

.access tr.route {
    padding: 0.5rem 0 0.5rem 0;
}

.access #content2 .area {
    padding: 0 0 1.5rem 0;
    margin-bottom: 1rem;
}

.access #content2 .use {
    padding: 1.5rem 0 1.5rem 0;
    margin-top: 1rem;
}

.access tr th {
    width: 23%;
}

.access td {
    width: 74%;
}

.access .route td {
    width: 35.5%;
}

.access #content3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px50);
}

.tokyo_btn a,
.kyoto_btn a {
    width: 100%;
}

.tokyo_btn,
.kyoto_btn {
    width: 100%;
}

#access_tokyo .tokyo_btn a {
    background: #fff;
    color: var(--ac-color);
    border: 2px solid var(--ac-color);
}

#access_kyoto .kyoto_btn a {
    background: #fff;
    color: var(--ac-color);
    border: 2px solid var(--ac-color);
}

.access #content3 button a {
    padding: 1rem 2.6rem 1rem 3rem;
}

.access #content2 .line_content,
.access #content2 .line_content_top {
    position: relative;
}

.access #content2 .line_content.active:after,
.access #content2 .line_content_top.active:before {
    animation: fadeIn-border_table 2s ease forwards;
    border-radius: 20px;
}

.access #content2 .line_content:after,
.access #content2 .line_content_top:before {
    content: "";
    position: absolute;
    left: 0;
    height: 2px;
    width: 0;
    background-color: #fff;
}

.access #content2 .line_content:after {
    bottom: 0;
}

.access #content2 .line_content_top:before {
    top: 0;
}

@keyframes fadeIn-border_table {
    from {
        opacity: 0;
        width: 0;
    }

    to {
        opacity: 1;
        width: 100%;
    }
}

/*************************** #accessibility ***************************/
#accessibility section.content_wrap h3 {
    font-size: var(--px50);
    text-align: center;
    margin: var(--px140) auto var(--px50);
}


/*************************** #accessibility ***************************/

@media screen and (max-width: 1280px) {
    #closeBtn {
        right: 10px;
    }

    header nav {
        display: none;
    }

    header .logo {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
    }

    main {
        width: 90%;
        margin: 0 auto;
    }

    .pankuzu,
    .pankuzu {
        width: 90%;
        margin: var(--px16) auto;
    }
}


@media screen and (max-width: 1000px) {
    #closeBtn {
        gap: 3px;
    }

    #logoLink {
        width: 50px;
    }

    nav {
        display: none;
    }

    #about h2,
    #activities h2,
    .access h2,
    #accessibility h2,
    #policy h2 {
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        letter-spacing: 5px !important;
    }

    #about #content1 h2 {
        writing-mode: unset;
        width: 100%;
    }

    #about #content5 dt {
        margin-right: 0;
        margin-left: 0;
    }

    #activities main .flex_container {
        flex-direction: column;
    }

    #activities main .flex_item {
        position: relative;
        width: 100%;
    }

    #activities main .flex_item::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 4px;
        width: 0;
        background-color: var(--ac-color);
    }

    #activities main #content2 .flex_item::after {
        background-color: #fff;
    }

    /* アニメーション用クラス */
    #activities main .flex_item.active::after {
        animation: fadeIn-border 2s ease forwards;
        border-radius: 20px;
    }

    @keyframes fadeIn-border {
        from {
            opacity: 0;
            width: 0;
        }

        to {
            opacity: 1;
            width: 100%;
        }
    }


    #activities .flex_item:first-child:before,
    #activities .flex_item:nth-of-type(3):before,
    #activities .flex_container::before {
        content: none;
    }

    #about h2 {
        text-align: center;
    }

    #about h2 .sp_only {
        display: inline !important;
    }

    #content1 .content_two,
    #content2 .content_two {
        flex-direction: column-reverse;
    }

    .content_two figure {
        width: 100%;
    }

    #content1 .content_two h2 {
        writing-mode: unset;
        width: 100%;
        text-align: center;
        margin-bottom: var(--px30);
    }

    #content2 h2 {
        width: 100%;
        writing-mode: unset;
        margin-right: 0;
        margin-bottom: var(--px30);
    }

    th,
    td {
        width: 100%;
    }

    td {
        font-weight: normal;
    }

    #content5 dl {
        display: block;
    }

    #content5 dt {
        width: 100%;
        margin-right: 0;
    }

    #content5 dd {
        width: 100%;
        font-weight: normal;
    }

    #content5 .content_two {
        display: block;
    }

    #content5 .content_two figure {
        width: 100%;
    }

    figcaption {
        text-align: center;
        margin: var(--px16) auto;
    }

    footer .left_area ul {
        width: 100%;
    }
}

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

    #about h2,
    #activities h2,
    #about h2 div,
    #accessibility h2 div,
    #policy h2 div {
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }

    #about header .logo span {
        display: block;
    }

    #about .pankuzu {
        width: 95%;
        margin: 1rem auto;
        gap: 0.5rem;
        font-size: 0.8rem;
    }

    #about #content4 table th,
    #about #content4 table td {
        width: 100%;
    }

    .access tr th,
    .access td,
    .access .route td {
        width: 100%;
        margin-bottom: var(--px16);
    }

    .access td {
        margin-bottom: 0;
        margin-left: 0.5rem;
    }

    .access tr.route {
        padding: 0;
    }

    .access #content2 .area {
        padding: 0 0 1rem 0;
        margin-bottom: 1.2rem;
    }

    .access #content2 .use {
        padding: 1rem 0 1rem 0;
        margin-top: 0.5rem;
    }

    .access tr {
        padding: 1rem 0 1rem 0;
    }

    .access #content3 {
        flex-direction: column;
    }
}