@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPMincho:wght@400;700&display=swap');

:root {
    /* 色の指定 */
    --color-base: #FFEACE;
    --color-main: #F8931F;
    --color-accent: #996F49;
    --color-txt: #000;

    /* フォントサイズ指定 */
    --font-ttl: 36px;
    --font-txt: 20px;
    --font-small: 16px;

    --font-sp-ttl: 24px;
    --font-sp-txt: 18px;
    --font-sp-small: 14px;

    /* 幅の指定 */
    --margin-lg: 160px;
    --margin-mid: 80px;
    --margin-sm: 40px;

    --margin-sp-lg: 120px;
    --margin-sp-mid: 64px;
    --margin-sp-sm: 32px;
}

/* 基本設定 */

body {
    font-family: 'Noto Sans JP', sans-serif;
    z-index: 0;
}

.main {
    background-color: var(--color-base);
    font-size: var(--font-sp-txt);
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0px 16px 0px;
    line-height: 1.5;
}
/* PCサイトレスポンシブ */
@media screen and (min-width: 1080px) {
.main {
    background-color: var(--color-base);
    font-size: var(--font-txt);
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0px 16px 0px;
    line-height: 1.5;
}
}

.js_body.is-active {
    overflow: hidden;
}

.block{
    display: block;
}

.sec {
    max-width: 988px;
    margin: 0 auto;
    padding-top: var(--margin-sp-lg);
}

@media screen and (min-width: 1080px) {
  .sec {
    max-width: 988px;
    margin: 0 auto;
    padding-top: var(--margin-lg);
}
}

.sec_ttl {
    font-size: var(--font-ttl);
    background: var(--color-main);
    padding: 8px 16px;
    box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.4);
}

@media screen and (min-width: 1080px) {
.sec_ttl {
    font-size: var(--font-ttl);
    background: var(--color-main);
    padding: 8px 16px;
    box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.4);
}
}

.sec_txt {
    margin-top: var(--margin-sp-mid);
    margin-left: var(--margin-sp-sm);
    margin-right: var(--margin-sp-sm);
    white-space: pre-wrap; 
}
@media screen and (min-width: 1080px) {
.sec_txt {
    margin-top: var(--margin-mid);
    margin-left: var(--margin-sm);
    margin-right: var(--margin-sm);
    white-space: pre-wrap; 
} 
}

.sec_img {
    display: block;
    max-width: 320px;
}

/* ヘッダー */
.nav_box {
    /* padding-top: var(--margin-sm); */
    width: 100%;
    background: var(--color-main);
    padding: 16px;
}

.sm_nav_txt {
    display: none;
}

.nav_ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0 auto;
}

.nav_list {
    position: relative;
}

.nav_list:not(:last-child):after {
    content: "/";
    color: var(--color-accent);
    position: absolute;
    right: -16px;
}

.header_wrapper {
    width: 100%;
    height: calc(75vh + 24px);
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
                url(../img/motomachi_new_header.png) left;
    background-repeat: no-repeat;
    background-size: cover;
}
@media screen and (min-width: 648px) {
  .header_wrapper {
    width: 100%;
    height: calc(75vh + 24px);
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
                url(../img/motomachi_new_header.png) center / cover;
    background-repeat: no-repeat;
    background-size: cover;
}
}

.logo_wrapper {
    width: fit-content;
    margin: 0 auto;
    padding-top: 20vh;
}

.logo {
    width: 210px;
    height: 132px;
    margin: 0 auto;
}

.ttl_wrapper {
    width: 100%;
    padding-top: var(--margin-sp-sm);
}
@media screen and (min-width: 1080px) {
.ttl_wrapper {
    width: 100%;
    padding-top: var(--margin-sm);
}
}

.top_ttl {
    text-align: center;
    font-size: var(--font-sp-ttl);
    font-weight: bold;
    color: #fff;
}
@media screen and (min-width: 1080px) {
.top_ttl {
    text-align: center;
    font-size: var(--font-ttl);
    font-weight: bold;
    color: #fff;
}
}

.sub_ttl {
    text-align: center;
    display: block;
    font-weight: bold;
    color: #fff;
}

.sp_menu_btn {
    display: none;
}

/* 【注意】スマホサイト、レスポンシブ */
@media screen and (max-width: 1080px) {
    header {
        position: relative;
    }

    .sp_menu_btn {
        /* padding-top: var(--margin-sm); */
        display: block;
        width: fit-content;
        background: var(--color-main);
        padding: 8px 24px;
        margin-top: 16px;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 10px;
        z-index: 500;
    }

    .sp_nav_txt {
        display: block;
        font-size: 16px;
        font-weight: bold;
        text-wrap: nowrap;
    }

    /* SP版ハンバーガーメニュー */
    header {
        position: relative;
    }

    .nav_box {
    /* padding-top: var(--margin-sm); */
    /* opacity: 0; */
    width: 100%;
    height: 100vh;
    background: var(--color-main);
    padding: 16px;
    position: fixed;
    top: -150%;
    left: 0%;
    opacity: 0;
    transition: all 0.8s ease; /* ← ここを長くする */
    }

    .nav_ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 40px;
        width: 100%;
        height: 100vh;
    }

    .nav_list {
        position: relative;
        font-weight: bold;
        font-size: 18px;
    }

    .nav_list:not(:last-child):after {
        display: none;
        content: "/";
        color: var(--color-accent);
        position: absolute;
        right: -16px;
    }

    .logo_wrapper {
        width: fit-content;
        margin: 0 auto;
        padding-top: 20vh;
    }

    .logo {
        width: 210px;
        height: 132px;
        margin: 0 auto;
    }

    .ttl_wrapper {
        width: 100%;
        padding-top: var(--margin-sp-sm);
    }

    .top_ttl {
        text-align: center;
        font-size: var(--font-sp-ttl);
        font-weight: bold;
        color: #fff;
    }

    .sub_ttl {
        text-align: center;
        display: block;
        font-weight: bold;
        color: #fff;
    }
}

/* .home_img {
    display: block;
    margin: 0 auto;
    padding-top: var(--margin-sm);
    max-width: 988px;
} */

/* SP版＿メニュー */
.nav_box.is-active {
    opacity: 1;
    z-index: 100;
    top: 0%;
}

.sp_nav_txt.is-active {
    display: none;
}

.sp_nav_txt_close {
    display: none;
}

.sp_nav_txt_close.is-active {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-left: 24px;
    position: relative;
    text-wrap: nowrap;
}

/* メニューアイコン　「閉じる」表示 */
.sp_nav_txt_close.is-active::before, .sp_nav_txt_close.is-active::after { /* 共通設定 */
  content: "";
  position: absolute;
  top: 50%;
  left: -10%;
  width: 5px; /* 棒の幅（太さ） */
  height: 30px; /* 棒の高さ */
  background: #333;
}
 
.sp_nav_txt_close.is-active::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
 
.sp_nav_txt_close.is-active::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

/* 地図 */

.map-box_txt {
    text-align: center;
    white-space: pre-wrap;
    padding-top: var(--margin-sp-mid);
}

.map-box_map {
    display: block;
    max-width: 908px;
    margin: 0 auto;
    padding-top: var(--margin-sp-sm);
    aspect-ratio: 1.4;
}

.map_links_wrapper {
    width: 100%;
    max-width: 908px;
    margin: 0 auto;
    margin-top: var(--margin-sp-mid);
    padding: 24px 0px;
    border: solid var(--color-accent) 2px;
}
@media screen and (min-width: 1080px) {
.map-box_txt {
    text-align: center;
    white-space: pre-wrap;
    padding-top: var(--margin-mid);
}

.map-box_map {
    display: block;
    margin: 0 auto;
    padding-top: var(--margin-sm);
    aspect-ratio: 1.4;
}

.map_links_wrapper {
    width: 100%;
    max-width: 908px;
    margin: 0 auto;
    margin-top: var(--margin-mid);
    padding: 24px 0px;
    border: solid var(--color-accent) 2px;
}
}

.map_puote {
    text-align: center;
}

.map_others {
    text-align: center;
}

.map_link {
    color: blue;
}

.houces_img-box {
    width: 100%;
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

/* .houces_img {
    max-width: 480px;
} */

.project_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 40px;
    align-items: flex-start;
    margin: 0 auto;
    padding-top: var(--margin-sp-mid);
}
@media screen and (min-width: 1080px) {
.project_box {
    width: 100%;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
    padding-top: var(--margin-mid);
}
}

.project_img {
    /* max-width: 480px; */
    object-fit: contain;
}

.news_box {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.news_box_ttl {
    padding-top: var(--margin-sp-mid);
    text-align: center;
}
@media screen and (min-width: 1080px) {
.news_box_ttl {
    padding-top: var(--margin-mid);
    text-align: center;
}
}

.news_box_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: var(--margin-sp-sm);
}
@media screen and (min-width: 1080px) {
.news_box_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: var(--margin-sm);
}
}

.news_img {
    max-width: 300px;
    display: block;
}

.team_img {
    padding-top: var(--margin-sp-mid);
    max-width: 480px;
    margin: 0 auto;
}
@media screen and (min-width: 1080px) {
.team_img {
    padding-top: var(--margin-mid);
    max-width: 480px;
    margin: 0 auto;
}
}

.news_page_box {
    width: 100%;
    max-width: 424px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 24px;
    padding-top: var(--margin-sp-lg);
}
@media screen and (min-width: 1080px) {
  .news_page_box {
    width: 100%;
    max-width: 424px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 24px;
    padding-top: var(--margin-lg);
}
}

.news_page_child {
    width: 40px;
    height: 40px;
    position: relative;
    line-height: 40px;
}

.news_page_child:not(:last-child):not(:first-child) {
    border: solid 0.5px var(--color-accent);
    border-radius: 10px;
    text-align: center;
}


.news_page_child:first-child::after{
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-accent);
    border-left: 2px solid var(--color-accent);
    position: absolute;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    left: 50%;
    top: 50%;
}

.news_page_child:last-child::after{
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--color-accent);
    border-left: 2px solid var(--color-accent);
    position: absolute;
    transform: translateX(-50%) translateY(-50%) rotate(135deg);
    left: 50%;
    top: 50%;
}

.kaisoku_box {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    padding-top: var(--margin-sp-sm);
}
@media screen and (min-width: 1080px) {
  .kaisoku_box {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    padding-top: var(--margin-sm);
}
}

.kaisoku_img {
    max-width: 300px;
    display: block;
}

.footer_txt {
    padding-top: var(--margin-sp-lg);
    text-align: center;
}
@media screen and (min-width: 1080px) {
  .footer_txt {
    padding-top: var(--margin-lg);
    text-align: center;
}
}

.footer_small {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--color-main);
    padding: 16px;
}

.footer {
    background: var(--color-base);
    padding-top: var(--margin-sp-lg);
}
@media screen and (min-width: 1080px) {
.footer {
    background: var(--color-base);
    padding-top: var(--margin-lg);
}
}

.footer_img {
    width: 100%;
    height: calc(75vh - 51px);
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
                url(../img/motomachi_new_fotter.png) left;
    background-repeat: no-repeat;
    background-size: cover;
}
@media screen and (min-width: 648px) {
.footer_img {
    width: 100%;
    height: calc(75vh - 51px);
    background: linear-gradient(rgba(51, 51, 51, 0.2), rgba(51, 51, 51, 0.2)),
                url(../img/motomachi_new_fotter.png) center / cover;
    background-repeat: no-repeat;
    background-size: cover;
}
}

/* pagination */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: 56px; */
  }
.page-numbers {
    font-weight: bold;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--color-accent);
    background: var(--color-base);
    border-radius: 10px;
}
.page-numbers:not(:first-child) {
    margin-left: 8px;
}
.page-numbers.current {
    color: var(--color-base);
    border-color: var(--color-accent);
    background: var(--color-accent);
}
.page-numbers.next,
.page-numbers.prev {
    position: relative;
}
.page-numbers.next::before,
.page-numbers.prev::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-accent);
    border-right: 2px solid var(--color-accent);
    position: absolute;
    top: 50%;
}
.page-numbers.next::before {
    transform: translateY(-50%) rotate(45deg);
    left: 32%;
}
.page-numbers.prev::before {
    transform: translateY(-50%) rotate(-135deg);
    right: 32%;
}

.page-numbers.dots {
    font-size: 14px;
    border: none;
}

/* ポップアップ設定 */
.lb-image {
    aspect-ratio: auto;
    width: 60vw !important;
    height: auto !important;
}

.lb-outerContainer {
  position: relative;
}

.lb-close {
  position: absolute !important;
  top: 10px !important;
  right: calc(20vw - 40px) !important;
  margin: 0 !important;
  z-index: 9999;
}

.PopUp_link {
    pointer-events: none;
}

@media screen and (min-width: 1080px) {
.PopUp_link img:hover {
    display: block;
    filter: brightness(50%);
}

.PopUp_link {
    position: relative;
    pointer-events: auto;
}

.PopUp_link:hover:after {
    width: 100%;
    height: 0%;
    content: "クリックして拡大";
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
}