@charset "UTF-8";

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

.inner_1000 {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.inner_700 {
    width: 90%;
    max-width: 700px;
    margin: 0 auto;
}

.container.under_page {
    line-height: 1.5;
    letter-spacing: 0.16em;
    padding-top: 118px;
}

ul.att {
    margin: 0 auto;
}

.sub_ttl {
    font-size: 24px;
    line-height: 1.8;
    letter-spacing: 0.16em;
    text-align: center;
    margin-bottom: 30px;
}

.txt {
    font-size: 18px;
    line-height: 1.7;
    text-align: center;
}

.big_cap {
    font-size: 2em;
}

.small {
    font-size: 0.8em;
}

.normal_txt {
    font-size: 16px;
    line-height: 2;
    text-align: center;
}

.small_txt {
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

.page_ttl {
    background-image: url(../img/copy_img.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 15%;
    position: relative;
}

.page_ttl h2 {
    font-size: 30px;
    letter-spacing: 0.2em;
    color: #eae4d1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.page_ttl h2 span {
    display: block;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-align: center;
}

figcaption {
    font-size: 13px;
    text-align: center;
    letter-spacing: 0.16em;
    margin-top: 8px;
}

.tab {
    display: none;
}

.tab_sp {
    display: none;
}

.pc_tab {
    display: block;
}


@media only screen and (max-width: 1200px) {
    .inner_1200 {
        width: 100%;
    }
}

@media only screen and (max-width: 1024px) {
    .container.under_page {
        padding-top: 158px;
    }
}

@media only screen and (max-width: 820px) {
    .tab {
        display: none;
    }

    .tab_sp {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .container.under_page {
        padding-top: 0;
    }

    .page_ttl {
        background-position: center right;
        padding: 18% 0;
    }

    .page_ttl h2 {
        font-size: 24px;
    }

    .page_ttl h2 span {
        font-size: 13px;
    }

    .sub_ttl {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 20px;
    }

    .normal_txt {
        font-size: 14px;
        letter-spacing: 0.12em;
    }

    .txt {
        font-size: 14px;
    }

    .big_cap {
        font-size: 15px;
    }

    .tab {
        display: none;
    }

    .pc_tab {
        display: none;
    }

}

/* 下層ページ共通部分ここまで */
.cream_bg {
    background: #f7f5ef;
    padding: 100px 0;
}

.white_bg {
    background: #fff;
    padding: 100px 0 0 0;
}

.blue {
    color: #1b4673;
}

.din {
    font-family: 'DIN Condensed', sans-serif;
    letter-spacing: 0.16em;
}

.big_copy {
    font-size: 40px;
    letter-spacing: 0.16em;
    line-height: 1.7;
    text-align: center;
    margin: 50px 0 40px 0;
}

p.en {
    font-size: 24px;
    text-align: center;
    margin-bottom: 10px;
}

/* smooth_life */
/* .smooth_life {
    margin: 100px auto 0;
} */

/* station */
.station {
    margin: 100px auto 0;
}

.station .img_Area {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}

.station .img_Area li:nth-of-type(1) {
    width: 43.8%;
    max-width: 438px;
    margin-right: 10px;
}

.station .img_Area li:nth-of-type(2) {
    width: 27.2%;
    max-width: 272px;
}


.station .img_Area li:nth-of-type(2) .column {
    width: 100%;
    flex-direction: column;
}

.station .img_Area li:nth-of-type(2) .column li {
    width: 100%;
}

.station .img_Area li:nth-of-type(2) .column li:nth-of-type(1) {
    margin-bottom: 10px;
}


/* convenience */
.convenience {
    margin: 100px auto 0;
}

.convenience .img_Area {
    flex-wrap: wrap;
}

.convenience .img_Area li:nth-of-type(1),
.convenience .img_Area li:nth-of-type(2) {
    width: calc((100% - 20px) / 2);
    max-width: 490px;
    margin-right: 20px;
}

.convenience .img_Area li:nth-of-type(2) {
    margin-right: 0;
}

.convenience .img_Area li:nth-of-type(3),
.convenience .img_Area li:nth-of-type(4),
.convenience .img_Area li:nth-of-type(5) {
    width: calc((100% - 40px) / 3);
    max-width: 320px;
    margin: 20px 20px 0 0;
}

.convenience .img_Area li:nth-of-type(5) {
    margin-right: 0;
}

.convenience .img_Area li figure {
    position: relative;
}

/* bullet_train */
.bullet_train {
    margin: 100px auto 0;
}

.bullet_train_txt p.train_txt {
    font-size: 40px;
    letter-spacing: 0.16em;
}

.bullet_train_txt p.train_txt .time {
    display: block;
    font-size: 0.5em;
    letter-spacing: 0.16em;
}

.bullet_train_txt p.normal_txt {
    text-align: left;
    margin-top: 10px;
}

.bullet_train_img {
    max-width: 723px;
    margin: 20px auto 20px auto;
}

.bullet_train .img_Area {
    flex-wrap: wrap;
}

.bullet_train .img_Area li {
    width: calc((100% - 40px) / 2);
    margin-right: 40px;
}

.bullet_train .img_Area li:last-of-type {
    margin-right: 0;
}

.bullet_train .img_Area li figure {
    position: relative;
}

/* bus_terminal */
.bus_terminal {
    margin: 100px auto 0;
}

.terminal_img {
    margin-top: 30px;
}

.bus_txt p {
    font-size: 24px;
    letter-spacing: 0.16em;
    margin: 30px 0 20px 0;
}

.bus_txt ul li {
    font-size: 20px;
    letter-spacing: 0.16em;
}

.bus_txt ul li:not(:first-of-type) {
    margin-top: 5px;
}

.bus_txt ul li span {
    display: inline-block;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: center;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 15px;
}

.bg_orange {
    background: #e94f2e;
}

.bg_green {
    background: #33997b;
}

.bg_blue {
    background: #1758a7;
}

.bg_gray {
    background: #90939f;
}

.bg_yellow {
    background: #eea91f;
}

.bg_light_blue {
    background: #5fb7e0;
}

.bg_pink {
    background: #e4827e;
}

.bus_terminal .img_Area {
    flex-wrap: wrap;
    margin-top: 60px;
}

.bus_terminal .img_Area li {
    width: calc((100% - 40px) / 3);
    margin-right: 20px;
}

.bus_terminal .img_Area li:nth-of-type(3n) {
    margin-right: 0;
}

/* accese */
.accese {
    margin: 80px auto 0;
}

.accese img {
    max-width: 1000px;
}

/* environment */
.environment .img_Area {
    flex-wrap: wrap;
    margin-top: 60px;
}

.environment .img_Area li {
    width: calc((100% - 40px) / 2);
    margin-right: 40px;
}

.environment .img_Area li:last-of-type {
    margin-right: 0;
}

.environment .img_Area li figcaption {
    font-size: 13px;
    text-align: left;
    text-indent: -1em;
    padding-left: 1em;
}

/* life_Area */
.life_Area .box_ttl {
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.life_Area .box_ttl span {
    display: block;
}

.life_Area .box_ttl span.txt {
    font-size: 24px;
    color: #1b4673;
    letter-spacing: 0.16em;
    text-align: center;
}

.life_Area .box_ttl span.line01,
.life_Area .box_ttl span.line02 {
    width: 60px;
    height: 1px;
    background: #1b4673;
}

.life_Area .box_ttl span.line01 {
    margin-right: 25px;
}

.life_Area .box_ttl span.line02 {
    margin-left: 25px;
}

.life_Area figcaption {
    text-align: left;
    text-indent: -1em;
    padding-left: 1em;
}

.life_Area figcaption span.walk {
    padding-left: 3px;
}

/* education */
.education {
    margin: 80px auto 0;
}

/* shopping */
.shopping {
    margin: 80px auto 0;
}

/* public */
.public {
    margin: 80px auto 0;
}

/* hospital */
.hospital {
    margin: 80px auto 0;
}

/* map */
.map {
    margin: 100px auto 0;
}

/* life_Area */
.life_box {
    flex-wrap: wrap;
}

.life_box li {
    /* width: calc((100% - 40px) / 3);
    max-width: 320px; */
    width: calc((100% - 60px) / 4);
    margin-right: 20px;
}

.life_box li:nth-of-type(4n) {
    margin-right: 0;
}

/* life_infomation */
.lifeinfo {
    margin: 100px auto 0;
}

.life_info_Area {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.col_1 {
    width: calc((100% - 70px) / 2);
    margin-right: 70px;
}

.col_1>article,
.col_2>article {
    padding-bottom: 50px;
}

.col_1>article:last-of-type,
.col_2>article:last-of-type {
    padding-bottom: 0;
}


.col_1 .lifeinfo_ttl,
.col_2 .lifeinfo_ttl {
    width: 100%;
    padding: 10px 10px 10px 0;
    margin-bottom: 10px;
    color: #fff;
    background-color: #1b4673;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    box-sizing: border-box;
    text-align: left;
}

.col_1 .lifeinfo_ttl h5,
.col_2 .lifeinfo_ttl h5 {
    padding-left: 15px;
}

.col_1 .lifeinfo_ttl h5 .ja,
.col_2 .lifeinfo_ttl h5 .ja {
    display: inline-block;
    font-size: 0.7em;
    padding-left: 1em;
}

.life_List {
    width: 100%;
}

.life_List li:first-child {
    padding-top: 0;
}

.life_List li {
    padding: 10px 10px;
    border-bottom: 1px dotted #979797;
    box-sizing: border-box;
}

.life_List dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    line-height: 1.3;
}

.life_List dt {
    width: 60%;
    color: #000;
    font-weight: inherit;
    letter-spacing: 0.08em;
    margin-right: 2%;
}

.life_List dd {
    width: 38%;
    color: #000;
    letter-spacing: 0.08em;
    text-align: right;
}

.col_2 {
    width: calc((100% - 70px) / 2);
}

/* 20230308追加 */
.ph_flex .public {
    width: 74.5%;
    margin-right: 2%;
}

.ph_flex .public .life_box li {
    width: calc((100% - 40px) / 3);
    margin-right: 20px;
}

.ph_flex .public .life_box li:nth-of-type(3) {
    margin-right: 0;
}

.ph_flex .hospital {
    width: 23.5%;

}

.ph_flex .hospital .life_box li {
    width: 100%;
    margin-right: 0;
}

.tab {
    display: none;
}

/* 確定まで非表示 */
.bus_terminal .img_Area {
    justify-content: center;
}
.bus_terminal .img_Area li {
    width: calc((100% - 40px px) / 2);
}

.bus_terminal .img_Area li:nth-of-type(3) {
    display: none;
}

.bus_terminal .img_Area li:nth-of-type(2) {
    margin-right: 0;
}

@media only screen and (max-width: 1180px) {
    .life_Area .box_ttl span.txt {
        font-size: 20px;
    }

    .life_Area .box_ttl span.line01,
    .life_Area .box_ttl span.line02 {
        width: 15px;
    }

    .life_Area .box_ttl span.line01 {
        margin-right: 10px;
    }

    .life_Area .box_ttl span.line02 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 820px) {
    .pc {
        display: none;
    }

    .tab {
        display: block;
    }

    .bullet_train_txt p.train_txt {
        font-size: 30px;
    }

    .bullet_train_img {
        margin: 0 auto 0 auto;
    }

    .bullet_train .img_Area {
        margin: 10px auto 0;
    }

    .bus_txt p {
        font-size: 22px;
    }

    .bus_txt ul li {
        font-size: 18px;
    }

    .col_1,
    .col_2 {
        width: 100%;
        margin: 0 auto;
    }

    .col_1>article,
    .col_2>article {
        padding-bottom: 30px;
    }

    .col_1>article:last-of-type {
        padding-bottom: 30px;
    }

    .life_List {
        width: 100%;
    }

    .life_List li {
        padding: 7px 0 5px 0;
    }

    .col_2>article:last-of-type {
        padding-bottom: 0;
    }

    .life_List dt {
        width: 51%;
        font-size: 13px;
    }

    .life_List dd {
        width: 47%;
        font-size: 13px;
    }
}

@media only screen and (max-width: 767px) {
    .cream_bg {
        padding: 50px 0;
    }

    .white_bg {
        padding: 50px 0 0 0;
    }

    p.en {
        font-size: 20px;
    }

    .big_copy {
        font-size: 22px;
        margin: 25px 0 20px 0;
    }

    .station {
        margin: 50px auto 0;
    }

    .station .img_Area li:nth-of-type(1),
    .station .img_Area li:nth-of-type(2) {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
    }

    .station .img_Area li:nth-of-type(2) .column {
        flex-direction: row;
        margin-top: 20px;
    }

    .station .img_Area li:nth-of-type(2) .column li:nth-of-type(1),
    .station .img_Area li:nth-of-type(2) .column li:nth-of-type(2) {
        width: calc((100% - 20px) / 2);
        margin-right: 20px;
    }

    .station .img_Area li:nth-of-type(2) .column li:nth-of-type(2) {
        margin-right: 0;
    }

    .convenience {
        margin: 70px auto 0;
    }

    .convenience .img_Area {
        justify-content: center;
    }

    .convenience .img_Area li:nth-of-type(1),
    .convenience .img_Area li:nth-of-type(2) {
        width: 100%;
        margin-right: 0;
    }

    .convenience .img_Area li:nth-of-type(2) {
        margin-top: 20px;
    }

    .convenience .img_Area li:nth-of-type(3),
    .convenience .img_Area li:nth-of-type(4),
    .convenience .img_Area li:nth-of-type(5) {
        width: calc((100% - 20px) / 2);
        max-width: 100%;
        margin: 20px 20px 0 0;
    }

    .convenience .img_Area li:nth-of-type(4) {
        margin-right: 0;
    }

    .bullet_train {
        margin: 70px auto 0;
    }

    .bullet_train_txt p.train_txt {
        font-size: 24px;
    }

    .bullet_train .img_Area li {
        width: calc((100% - 20px) / 2);
        margin-right: 20px;
    }

    .bus_terminal {
        margin: 50px auto 0;
    }

    .bus_txt p {
        width: 500px;
        font-size: 16px;
    }

    .bus_txt ul li {
        width: 500px;
        font-size: 13px;
    }

    .bus_txt ul li span {
        font-size: 12px;
        width: 16px;
        height: 16px;
    }

    .bus_terminal .img_Area li {
        width: 100%;
        margin-right: 0;
    }

    .bus_terminal .img_Area li:nth-of-type(n+2) {
        margin-top: 30px;
    }

    .accese {
        margin: 40px auto 0;
        overflow-y: hidden !important;
    }

    .accese img {
        width: 700px;
        height: auto;
        padding: 0;
    }

    .environment .img_Area li {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
    }

    .environment .img_Area li:nth-of-type(2) {
        margin-top: 30px;
    }

    .life_Area .box_ttl span.txt {
        font-size: 18px;
    }

    .life_Area .box_ttl span.line01,
    .life_Area .box_ttl span.line02 {
        width: 35px;
    }

    .life_Area figcaption span.walk {
        padding-left: 10px;
    }

    .map {
        margin: 50px auto 0;
    }

    .lifeinfo {
        margin: 50px auto 0;
    }

    .lifeinfo p.sub_ttl {
        font-size: 18px;
    }

    .col_1 .lifeinfo_ttl h5,
    .col_2 .lifeinfo_ttl h5 {
        font-size: 15px;
    }

    .life_box li {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
    }

    .life_box li:nth-of-type(n+2) {
        margin-top: 30px;
    }

    .education,
    .shopping,
    .public,
    .hospital {
        margin: 60px auto 0;
    }

    /* 20230308追記 */
    .ph_flex {
        flex-wrap: wrap;
    }

    .ph_flex .public {
        width: 100%;
        margin-right: 0;
    }

    .ph_flex .hospital {
        width: 100%;
    }

    .ph_flex .public .life_box li {
        width: 100%;
        margin-right: 0;
    }

}

@media only screen and (max-width: 500px) {
    /* .bullet_train_img {
        margin: 0 0 40px 0;
        overflow-y: hidden !important;
    }

    .bullet_train_img img {
        width: 500px;
        height: auto;
        padding: 0;
    } */
}