@charset "UTF-8";

html {
    font-size: 62.5%;
    scroll-behavior: smooth; 
}


:root {
    --basecolor1: #FAF8F5;
    --basecolor2: #010E17;
    --textcolor: #1C1C1C;
    --maincolor: #94805E;
    --accentcolor1: #6F5B3B;
    --accentcolor2: #011726;
}



/* 共通設定 */

body {
    font-family: 'Noto Serif JP', "Serif";
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 2;
    color: var(--textcolor);
    background-color: #FAF8F5;
    /* 追加 */
}

h3 {
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
}



a {
    text-decoration: none;
    /* color: var(--textcolor); */
}

a:visited {
    /*訪問後の文字色を親要素と同じにする*/
    color: inherit;
}

li {
    list-style: none;
}

.p_notosans {
    font-family: 'Noto Sans JP' , sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8;
    color: var(--textcolor);
}

.p_notosans_13 {
    font-family: 'Noto Sans JP' , sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

.text_center {
    text-align: center;
}

.wd_1200 {
    width: 120rem;
}

.wd_800 {
    width: 80rem;
}

.bg_base1 {
    background-color: var(--basecolor1);
}

.grid_center {
    display: grid;
    justify-content: center;
}




.margin8060 {
    margin: 8rem 0 6rem;
}

.margin8080 {
    margin: 8rem 0;
}

.margin80 {
    margin-top: 8rem;
}

.margin40 {
    margin-top: 4rem;
}

.margin60 {
    margin-top: 6rem;
}

.margin0auto {
    margin: 0 auto;
}

.padding80 {
    padding: 8rem 0 0;
}


.padding100 {
    padding: 10rem 0 0;
}

.padding_btm_180 {
    padding-bottom: 18rem;
}

.margin_btm_64 {
    margin-bottom: 6.4rem;
}


.margin_btm_160 {
    margin-bottom: 16rem;
}


.gap_80 {
    gap: 8rem;
}


.img_sp {
    display: none !important;
}





/* ボタンコンポーネント */

.cta_black a {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    transition: all 0.3s ease-out;
}

.cta_black_text {
    color: var(--textcolor);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    border-bottom: var(--textcolor) solid 0.1rem;

}

.cta_black_icon {
    width: 1.4rem;
    height: auto;
    transition: all 0.3s ease-out;
}
.cta_black a:hover {
    opacity: .6;
}
.cta_black a:hover .cta_black_icon {
    transform: translateX(6px);
}




.cta_black_1200 {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 120rem;
    margin-top: 4rem;
}

.cta_black_1200 a {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    transition: all 0.3s ease-out;
}

.cta_black_1200 a:hover {
    opacity: 0.6;
}

.cta_black_icon {
    transition: all 0.3s ease-out;
}

.cta_black_1200 a:hover .cta_black_icon {
    transform: translateX(6px);
}



.btn_more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32rem;
    border: 0.1rem solid var(--accentcolor1);
    padding: 1.6rem 2.4rem 1.6rem 1.5rem;
    margin: 0 auto;
    flex-shrink: 0;
    color: var(--accentcolor1) !important;
    font-family: 'Noto Serif JP';
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.1;
    position: relative;
    transition: all 0.3s ease-out;
}

.btn_more:hover {
    background-color: #FFF;
}


.btn_more img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.6rem;
    width: 1.3rem !important;
    height: auto;
    transition: all 0.3s ease-out;
}

.btn_more:hover img {
    transform: translateY(-4px);
}


/* ヘッダー共通パーツ_透明 */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    height: 9rem;
    padding: 0 0 0 6rem;
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
}

.header_scrolled {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    color: var(--textcolor);
    height: 9rem;
    padding: 0 0 0 6rem;
}


/* 初期状態（MVが見えている間） */
.site_header {
    background-color: rgba(0, 0, 0, 0.7);
    /* 黒70%透明 */
    backdrop-filter: blur(20px);
    /* 背景ぼかし */
    -webkit-backdrop-filter: blur(20px);
    /* Safari対応 */
    color: #fff;
}

.site_header .logo_white {
    display: block;
}

.site_header .logo_color {
    display: none;
}

/* スクロール後（MV以降） */
.site_header.header_scrolled {
    background-color: rgba(255, 255, 255, 0.5);
    /* 白50%透明 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--textcolor);
}

.site_header.header_scrolled .logo_white {
    display: none;
}

.site_header.header_scrolled .logo_color {
    display: block;
}


/* 初期は白を表示 */
.slash_white {
    display: inline;
}

.slash_black {
    display: none;
}

/* スクロール後に黒を表示 */
.site_header.header_scrolled .slash_white {
    display: none;
}

.site_header.header_scrolled .slash_black {
    display: inline;
}


.header_left {
    display: flex;
    align-items: center;
    gap: 6rem;
}

.header_right {
    display: flex;
    align-items: center;
    gap: 4.8rem;
}

.logo {
    width: 20rem;
}

nav.nav {
    display: flex;
    align-items: center;
}

.nav_group {
    display: flex;
    gap: 3.2rem;
}


.nav_item {
    position: relative;
    cursor: pointer;
    /* カーソルを指にする */
}


.nav_item_icon {
    padding-right: 1.8rem;
    position: relative;
}

.nav_item_icon::before,
.nav_item_icon::after {
    position: absolute;
    content: "";
    width: 1rem;
    height: 0.15rem;
    background-color: var(--accentcolor1);
    right: 0;
    top: 1.5rem;
}

.nav_item_icon::after {
    transform: rotate(90deg);
    transition: 0.3s ease;
}

.nav_item .nav_u_line {
    position: absolute;
    /* display: block; */
    left: 0;
    bottom: 0;
    height: .1rem;
    width: 0;
    background-color: #FFF;
    transition: 0.3s ease;
}

.site_header.header_scrolled .nav_item .nav_u_line {
    background-color: var(--textcolor);
}


.nav_item:hover .nav_item_icon::after {
    /* transform: rotate(110deg); */
    transform: rotate(180deg);
}

.nav_item:hover .nav_u_line {
    width: 100%;
}

/* クリック時 */
/* .nav_item:hover .nav_item_icon.active::after {
    transform: rotate(180deg);
} */




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  サブメニュー
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.nav_item_sub {
    position: absolute;
    left: 0;
    top: 3.4rem;
    width: 22rem;
    min-height: 0;
    height: 0;
    padding: 0 2.4rem;
    z-index: 3;
    overflow: hidden;
    opacity: 0;
    transition: 0.5s;
    background-color: #FFF;
    color: var(--textcolor);
    transition: all .3s ease;
}

/* .nav_item_sub.active {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-height: auto;
    height: auto;
    opacity: 1;
} */
/* ホバーでサブメニュー表示 */
.nav_item:hover .nav_item_sub {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 2rem 2.4rem;
    min-height: auto;
    height: auto;
    opacity: 1;
}



.nav_item_sub li {
    font-size: 1.3rem;
    font-weight: 700;
    position: relative;
}

.nav_item_sub li:first-child {
    border-bottom: .5px solid #E1DFDD;
    font-size: 1.6rem;
    padding-bottom: .8rem;
    width: fit-content;
}

.nav_item_sub li a {
    display: flex;
    align-items: center;
    transition: 0.3s ease;
}


.nav_item_sub .byobu_icon {
    margin-right: .4rem;
}

.nav_item_sub .icon_right {
    margin-left: .8rem;
    width: 1.8rem;
}

.nav_item_sub li:first-child .icon_right {
    margin-left: 1.6rem;
    width: 2rem;
}

.nav_item_sub li:first-child .sub_u_line {
    position: absolute;
    left: 0;
    bottom: .4rem;
    height: .1rem;
    width: 0;
    background-color: var(--maincolor);
    transition: 0.3s ease;
}

/* ホバー */
.nav_item_sub li:first-child:hover .sub_u_line {
    width: 100%;
}
.sub_item a:hover {
    opacity: .6;
}





.nav_language {
    display: flex;
}

.nav_language_jp .nav_language_en p {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

.nav_btn {
    display: flex;
}

.nav_btn_contact a {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color: var(--accentcolor1);
    background-image: url(../image/white_noise_btn.png);
    gap: 1.2rem;
    width: 20rem;
    height: 9rem;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
}

.nav_btn_contact a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    /* 初期は左の外に隠す */
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* 黒30%のオーバーレイ */
    transition: left 0.3s ease-out;
    /* 300ms イーズアウト */
}

.nav_btn_contact a:hover::before {
    left: 0;
    /* 左からスライドイン */
}

.nav_btn_contact_icon,
.nav_btn_contact_text {
    position: relative;
    z-index: 1;
    /* テキストやアイコンは前面に表示 */
}



.nav_btn_download a {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background-color: var(--accentcolor2);
    background-image: url(../image/white_noise_btn.png);
    gap: 0.8rem;
    width: 20rem;
    height: 9rem;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
}

.nav_btn_download a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    /* 初期は左の外に隠す */
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* 黒30%のオーバーレイ */
    transition: left 0.3s ease-out;
    /* 300ms イーズアウト */
}

.nav_btn_download a:hover::before {
    left: 0;
    /* 左からスライドイン */
}

.nav_btn_download_icon,
.nav_btn_download_text {
    position: relative;
    z-index: 1;
    /* テキストやアイコンは前面に表示 */
}

.nav_btn_download_icon img {
    margin-bottom: -.5rem;
    margin-bottom: -.5rem;
}


/* ハンバーガーメニュー */
.btn_menu {
    display: none;
}
/* モバイルメニュー */
.hdr_nav {
    display: none;
}






main {
    position: relative;
    width: 100%;
    height: 100dvh;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  MVスライド
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.mv_slide {
    position: relative;
    z-index: -1;
}

.slide {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    position: relative;
}

.slide01 {
    background-image: url(../image/mv001.jpg);
}

.slide02 {
    background-image: url(../image/mv002.jpg);
}

.slide03 {
    background-image: url(../image/mv003.jpg);
}

.slide04 {
    background-image: url(../image/mv004.jpg);
}

.slide05 {
    background-image: url(../image/mv005.jpg);
}

.slide06 {
    background-image: url(../image/mv006.jpg);
}

.slide07 {
    background-image: url(../image/mv007.jpg);
}

.slide08 {
    background-image: url(../image/mv008.jpg);
}

.slide09 {
    background-image: url(../image/mv009.jpg);
}

.slide_gra {
    width: 100%;
    height: 30rem;
    background-image: url(../image/shadow.png);
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
}



@keyframes zoomUp {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

.swiper-slide-active .slide,
.swiper-slide-duplicate-active .slide,
.swiper-slide-prev .slide {
    animation: zoomUp 4s linear 0s normal both;
}



.swiper-pagination {
    margin-left: auto;
    width: fit-content !important;
    left: auto !important;
    right: 6rem;
    bottom: 3rem !important;
}

.swiper-pagination-bullet {
    background-color: transparent;
}


/* ==========================
    円形のページネーションを作成
  ========================== */
.circle-pagination {
    position: relative;
    width: 1.8rem;
    height: 1.8rem;
    z-index: 1;
    background-color: transparent;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    display: inline-block;
    outline: none;
    border: 1px solid transparent;
    border-radius: 50%;
}

.circle-pagination.swiper-pagination-bullet-active {
    border: 1px solid #FFFFFF;
}

.circle-pagination .circle-pagination__inner {
    width: 0.4rem;
    height: 0.4rem;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle-pagination.swiper-pagination-bullet-active .circle-pagination__inner {
    background-color: #FFFFFF;
}

.circle-pagination__inner svg {
    transform: rotate(-90deg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.circle-pagination__inner circle {
    fill: transparent;
    stroke: #ffffff;
    stroke-width: 1.5;
    animation: circle 4s linear forwards;
}

@keyframes circle {
    0% {
        stroke-dasharray: 0 69;
    }

    99.9%,
    to {
        stroke-dasharray: 69 69;
    }
}

.circle-pagination:not(.swiper-pagination-bullet-active) .circle-pagination__inner svg {
    /* 非アクティブ時なサークルのsvgは非表示に */
    display: none;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  /MVスライド
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


.mv_background {
    width: 100%;
    height: 100vh;
}


.mv_bottom {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 0 0 6.5rem 6rem;
}

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


.mv_h2 {
    font-size: 7.2rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: #fff;
}

.br_pc {
  display: inline;
}
.br_sp {
  display: none;
}

.mv_contents_scroll {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
}



.scroll_outer {
    width: 1.4rem;
    height: 2.5rem;
    border: 0.1rem solid #fff;
    border-radius: 2rem;
    text-align: center;
    position: relative;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  scrollボール
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.scroll_outer img {
    display: inline-block;
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    /* margin: 0 0 0.5rem; */
    animation: 1.2s linear infinite alternate;
    animation-name: bound;
}

@keyframes bound {
    from {
        transform: translateY(0%) scale(1, 1);
    }

    10% {
        transform: translateY(0%) scale(1, 1);
    }

    40% {
        transform: translateY(125%) scale(1, 1.2);
    }

    90% {
        transform: translateY(250%) scale(1, 1);
    }

    to {
        transform: translateY(250%) scale(1, 1);
    }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  /scrollボール
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.scroll_text {
    font-family: 'Zen Old Mincho', serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
}


.concept {
    background-color: var(--basecolor1);
    display: flex;
    justify-content: center;
    padding: 14rem 0;
}

.concept_inner {
    display: flex;
    justify-content: center;
    width: fit-content;
    gap: 20.2rem;
}

.concept_h2 {
    writing-mode: vertical-rl;
    font-size: 4.8rem;
    letter-spacing: 0.3em;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
}


.concept_text {
    /* display: grid;
    gap: 4.8rem; */
    margin: 25.6rem 0 6.4rem;
}

.concept_btn a {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.concept_btn_text {
    font-size: 1.5rem;
    font-weight: 600;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  concept_photo
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.concept_photo {
    background-image: url(../image/top_consept_photo.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 52.8rem;
    z-index: -1;
    position: sticky;
    top: -37rem;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  /concept_photo
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  slider
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


.slider {
    /* background-color: var(--basecolor1); */
    /* padding-bottom: 10rem; */
    /* height: 88rem; */
    z-index: 1;
    overflow: hidden;
}

.slider_area {
    overflow-x: hidden;
    margin-top: -2.5rem;
}

.slider_photo {
    display: flex;
}

.slider_photo_item {
    flex-shrink: 0;
    /* 子要素の縮小を防ぐ */
}

.slider_photo_item img {
    width: 100%;
}

.slider_photo1 {
    max-width: 589px;
    margin-right: 70px;
}

.slider_photo2 {
    max-width: 242px;
    /* margin-top: 420px; */
    margin-top: 380px;
    margin-right: 106px;
    /* padding-bottom: 100px; */
}

.slider_photo3 {
    max-width: 342px;
    /* margin-top: 175px; */
    margin-top: 135px;
    margin-right: 192px;
}

.slider_photo4 {
    max-width: 470px;
    /* margin-top: 315px; */
    margin-top: 275px;
    margin-right: 179px;
}

.slider_photo5 {
    max-width: 299px;
    /* margin-top: 500px; */
    margin-top: 480px;
    margin-right: 180px;
}

.slider_photo6 {
    max-width: 419px;
    /* margin-top: 183px; */
    margin-top: 143px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  /slider
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


.business_area {
    height: 100dvh;
}

.business_1 {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    height: 100dvh;
    padding: 17rem 6rem 10rem;
    gap: 4.8rem;
    position: sticky;
    top: 0;
    background: 
        linear-gradient(162deg, rgba(196, 190, 179, 0.40) 2.14%, rgba(188, 182, 169, 0.62) 5.73%, rgba(175, 167, 152, 0.90) 14.63%),
        url(../image/white_noise_3.png)
        ;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.business_head {
    display: grid;
    gap: 1.4rem;
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
}

.business_head_label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.business_head_label_text {
    color: var(--accentcolor1);
}


.business_contents {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 84rem;
    gap: 12rem;
    margin: 0 auto;
}

.japanese_pattern_left {
    position: absolute;
    right: 0;
    top: 18rem;
    left: -36.5rem;
    width: 57.6rem;
    z-index: 1;
}


.Japanese_pattern_right {
    position: absolute;
    right: -34rem;
    top: -9.5rem;
    width: 63rem;
}

.business_contents_left {
    position: relative;
    /* padding-left: 18rem; */
}

.business_contents_img {
    width: 34.8rem;
}

.business_contents_right {
    position: relative;
    padding: 6rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}



.business_contents_inner {
    display: grid;
    gap: 5.1rem;
    position: relative;
    /* margin-bottom: 9.7rem; */
    width: 37rem;
}

.business_contents_title {
    display: grid;
    gap: 2.3rem;
}

.business_contents_title_number {
    color: #fff;
    font-size: 2rem;
    font-family: 'Zen Old Mincho', serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.business_contents_title_text {
    color: #fff;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.business_contents_p {
    color: #fff;
}

.business_btn {
    position: absolute;
    right: 0;
    bottom: 0;
}

.business_btn a {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    transition: all 0.3s ease-out;
}

.business_btn_text {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
    border-bottom: solid 1px #FFF;
}

.business_btn_icon {
    margin-top: .2rem;
    transition: all 0.3s ease-out;
}


.business_btn a:hover {
    opacity: .6;
}
.business_btn a:hover .business_btn_icon {
    transform: translateX(6px);
}


/* ------------------------------
  case-studies(ポートフォリオ)
------------------------------ */
.case-studies {
    background-image: url(../image/case-studies_background.jpg);
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 19.7rem 0;
    gap: 4.8rem;
    overflow: hidden;
}

.case-studies_head {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
}

.case-studies_head_label {
    display: flex;
    align-items: center;
    gap: 0.5rem;

}

.case-studies_head_label_icon {
    width: 1.8rem;
}

.case-studies_head_label_text {
    color: #fff;
}


.case-studies_h3 {
    color: #fff;
}

.case-studies_head_inner {
    display: flex;
    justify-content: space-between;
    margin: 4.8rem 0 0;
}

.case-studies_head_inner_text {
    width: 75.3rem;
    color: #fff;
}

.case-studies_btn_wrapper {
    position: relative;
}

.case-studies_btn {
    width: 22.2rem;
    position: absolute;
    right: 0;
    bottom: 0;
}

.case-studies_btn a {
    display: flex;
    gap: 1rem;
    transition: all 0.3s ease-out;
}

.case-studies_btn_text {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
    border-bottom: solid 1px #FFF;
}

.case-studies_btn_icon {
    transition: all 0.3s ease-out;
}

.case-studies_btn a:hover {
    opacity: .6;
}
.case-studies_btn a:hover .case-studies_btn_icon {
    transform: translateX(6px);
}


.case-studies_contents {
    display: grid;
    /* display: flex; */
    gap: 3.2rem;
    width: 100%;
    max-width: 131.9rem;
    margin-left: 12.1rem;
}

.case-swiper {
    overflow: visible;
}

.case-swiper .swiper-wrapper {
    overflow: visible;
}

.case-swiper .swiper-controller {
    position: relative;
    width: 100%;
    max-width: 120rem;
    margin-top: 3.2rem;
}

.swiper-button-prev {
    right: 7.6rem;
    left: auto;
}

.swiper-button-next {
    right: 0;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
}

.case-studies_photo {
    display: flex;
    gap: 1rem;
}

.case-studies_card {
    width: 40.6rem;
    height: 45.4rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.case-studies_card_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.3s ease-out;
    z-index: -1;
}

.case-studies_card:hover .case-studies_card_img {
    transform: scale(1.1);
}

.case-studies_tag {
    position: absolute;
    left: 1.2rem;
    top: 1.2rem;
    display: inline-block;
    background-color: var(--textcolor);
    padding: 0.5rem 0.6rem;
}

.case-studies_tag p {
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 0;
    line-height: 1;
}

.case-studies_slider {
    display: flex;
    /* justify-content: flex-end; */
    margin-left: 109.6rem;
}

.case-studies_overlay {
    padding: 4.8rem 1.6rem;
    width: 100%;
    height: 100%;
}

.case-studies_overlay h3 {
    font-size: 1.6rem;
    color: #FFFFFF90;
}


.case-studies_slider_inner {
    display: flex;
    gap: 1.6rem;
}

.case-studies_slider_left {
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    border: 0.1rem solid #fff;
    transition: all 0.3s ease-out;
}

.case-studies_slider_left img {
    width: 1.8rem;
    margin-top: 0.7rem;
}

.case-studies_slider_left:hover {
    background-color: #FFFFFF20 ;
}

.case-studies_slider_right {
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    border: 0.1rem solid #fff;
    transition: all 0.3s ease-out;
}

.case-studies_slider_right:hover {
    background-color: #FFFFFF20 ;
}

.case-studies_slider_right img {
    width: 1.8rem;
    margin-top: 0.7rem;
}



/* ------------------------------
 greeting
------------------------------ */
.greeting {
    background-image: url(../image/greeting_background.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 19.5rem 8rem;
}


.greeting_wrapper {
    display: flex;
    justify-content: flex-end;
    width: 120rem;
    max-width: 100%;
}

.greeting_inner {
    display: grid;
    gap: 4.8rem;
    width: 39.6rem;
}



.greeting_inner_title {
    font-size: 3rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: #fff;
}

.greeting_inner_p {
    gap: 3.2rem;
    color: #fff;
    font-weight: 500;
}


/* ------------------------------
 about
------------------------------ */
.about {
    display: flex;
    justify-content: center;
    position: relative;
    padding-top: 48rem;
    background-color: var(--basecolor1);
    overflow-x: clip;
}

.about_wave_right {
    position: absolute;
    right: -28rem;
    top: -6rem;
    width: 88rem;
    z-index: 0; 
}

.about_wave_left {
    position: absolute;
    left: -22rem;
    bottom: -1rem;
    width: 82rem;
    z-index: 0; 
}

.about_photo_1 {
    position: absolute;
    right: 0;
    top: 10rem;
    width: 32.9rem;
    opacity: 0;
    transition: all 1s .2s ease-in;
}
.about_photo_1.animate_active {
    opacity: 1;
}

.about_photo_2 {
    position: absolute;
    left: 2.7rem;
    top: 55.1rem;
    width: 26rem;
    opacity: 0;
    transition: all 1s .2s ease-in;
}
.about_photo_2.animate_active {
    opacity: 1;
}


.about_contents {
    display: grid;
    gap: 7.6rem;
    width: 100%;
    max-width: 80rem;
    position: relative;
}

.about_photo_3 {
    width: 44rem;
    margin: 6.7rem 3.2rem 0 auto;
    opacity: 0;
    transition: all 1s .2s ease-in;
}
.about_photo_3.animate_active {
    opacity: 1;
}

.about_h2 {
    font-size: 4.4rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.6;
    text-align: center;
}

.about_contents p {
    text-align: center;
    font-weight: 500;
}



/* ------------------------------
 clients
------------------------------ */

.clients {
    display: grid;
    justify-content: center;
    padding: 197px 0;
    gap: 6rem;
    background-color: var(--basecolor1);
}

.clients_head {
    display: grid;
    gap: 1.4rem;
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
}

.clients_head_label {
    display: flex;
    gap: 0.5rem;
}

.clients_head_label_icon {
    width: 1.8rem;
}

.clients_head_label_text {
    color: var(--accentcolor1);
}

.clients_head_text {
    margin: 4rem 0 0;
}

.clients_contents {
    width: 100%;
    overflow: hidden;
    display: grid;
    gap: 2.4rem;
}

.clients_contents_top {
    display: flex;
    gap: 2.4rem;
}

.clients_contents_btm {
    display: flex;
    gap: 2.4rem;
}


/* 連続スクロールを滑らかに（ease だと止まって見えることがある） */
.cctop-swiper .swiper-wrapper,
.ccbtm-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* ロゴ幅は中身に合わせる（slidesPerView: auto の前提）*/
.cctop-swiper .swiper-slide,
.ccbtm-swiper .swiper-slide {
    width: 22rem !important;
    padding: 0 2rem;
    display: grid;
    place-content: center;
}

.clients_logo img {
    width: 100%;
    height: auto;
}




/* フッター共通パーツ */
.contact {
    background-color: var(--basecolor2);
    background-image: url(../image/white_noise.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 10.7rem 0 0;
}

.contact_head {
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
    margin: 0 0 10.7rem;
}

.contact_head_label {
    color: #fff;
    font-weight: 700;
font-family: 'Zen Old Mincho', serif;
    line-height: 1.5;

}

.contact_h3 {
    color: #fff;
    font-size: 3.2rem;
    font-weight: 500;
    letter-spacing: 0;
}

.contact_head_text {
    color: #fff;
}

.contact_btn {
    display: flex;
    gap: 0.4rem;
    justify-content: space-between;
    width: 100%;
}



.contact_btn_left,
.contact_btn_right {
    position: relative;
    flex: 1;
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    padding: 12.8rem 0;
    color: var(--accentcolor1) !important;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    /* 疑似要素の下に来る */
}

/* デフォルト背景 */
.contact_btn_left {
    background-image: url(../image/cvbtn_01.jpg);
    background-position: left top;
}

.contact_btn_right {
    background-image: url(../image/cvbtn_02.jpg);
    background-position: right top;
}

/* 疑似要素でホバー時の別画像を重ねる */
.contact_btn_left::after,
.contact_btn_right::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 300ms ease-out;
    z-index: -1;
    /* テキストの下に配置 */
}

/* 左ボタンのホバー用画像 */
.contact_btn_left::after {
    background-image: url(../image/cvbtn_01_hover.jpg);
}

/* 右ボタンのホバー用画像 */
.contact_btn_right::after {
    background-image: url(../image/cvbtn_02_hover.jpg);
}

/* ホバー時に背景をフェードイン */
.contact_btn_left:hover::after,
.contact_btn_right:hover::after {
    opacity: 1;
}

/* ===== テキストの色変更 ===== */
.contact_btn_left:hover,
.contact_btn_right:hover {
    color: #fff !important;
    transition: color 300ms ease-out;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  footer
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
footer {
    background-image: url(../image/footer_asanoha.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0 4rem; 
}

.kamon {
    position: absolute;
    right: -10rem;
    bottom: -17.7rem;
    width: 64rem;
    height: auto;
    z-index: 0;
}

.footer_noise {
    background-image: url(../image/footer_noise.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.footer_inner {
    display: flex;
    justify-content: space-between;
    width: 126rem;
    position: relative;
    z-index: 2;
    position: relative;
}

.footer_inner_left {
    margin: 13.2rem 0 0 12rem;
}

.footer_inner_left_items {
    display: grid;
    gap: 4rem;
}

.logo_footer {
    width: 21rem;
    transition: all 0.3s ease-out;
}
.logo_footer:hover {
    opacity: 0.6;
}



.adress p {
    color: #fff;
    font-size: 1.3rem;
    letter-spacing: 0;
    line-height: 1.6;
}

.sns {
    display: flex;
    justify-content: space-between;
    gap: 3.2rem;
}


.sns a {
    display: flex;
    gap: 0.8rem;
    font-family: 'Zen Old Mincho', serif;
    color: #fff;
    font-size: 1.5rem;
    letter-spacing: 0;
    font-weight: 700;
    align-items: center;
    transition: all 0.3s ease-out;
}

.sns a:hover {
    opacity: 0.6;
}

.sns img {
    width: 2.4rem;
}


.footer_inner_right {
    display: grid;
    gap: 23.3rem;
    margin: 39rem 6rem 5.6rem 0;
}

.footer_inner_right_top {
    display: grid;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 4rem;
    right: 0;
}

.footer_inner_right_top a {
    font-family: 'Zen Old Mincho', serif;
    color: #fff;
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1;
    font-weight: 700;
    writing-mode: vertical-rl;
    display: flex;
    gap: 1rem;
    transition: all 0.3s ease-out;
}
.footer_inner_right_top a:hover {
    opacity: 0.6;
}

.footer_inner_right_top img {
    width: 1.2rem;
    margin-right: 3px;
    transition: all 0.3s ease-out;
}
.footer_inner_right_top a:hover img {
    transform: translateY(-4px);
}

.nav_group_footer {
    display: flex;
    gap: 6rem;
    align-items: flex-start;
}

.nav_item_footer {
    display: grid;
    gap: 1.8rem;
    align-items: flex-start;
}


.nav_item_footer a {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: normal;
    transition: all 0.3s ease-out;
}

.nav_item_footer a:hover {
    opacity: 0.6;
}


.nav_item_sub_footer {
    display: grid;
    gap: 0.8rem;
}

.nav_item_sub_footer a {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: normal;
}

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

.nav_footer_btm p {
    color: #E1DFDD60;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.nav_footer_btm a {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: normal;
    text-decoration: underline;
    transition: all 0.3s ease-out;
}
.nav_footer_btm a:hover {
    opacity: 0.6;
}


.nav_footer {
    display: grid;
    gap: 11.2rem;
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　下層ページ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ～～～～～～～～～～～～～～～～～～～～～～～～
　　business(屏風制作・修理)
～～～～～～～～～～～～～～～～～～～～～～～～ */

.pageheader {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 18.2rem 0 0;
    margin-top: 9rem;
}

.pageheader_business {
    background-image: url(../image/pageheader_business.jpg);
}



.pageheader_inner {
    position: relative;
    display: grid;
    /* justify-content: center; */
}

.pageheader_btm {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 8rem;
    width: 100%;
    display: flex;
}

.pageheader_btm img {
    width: 8rem;
    height: auto;
}

.pageheader_btm_box {
    background-color: var(--basecolor1);
    flex: 1;
}

.pageheader_title {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 20.8rem;
    width: 100%;
    max-width: 108rem;
}

.pageheader_h2 {
    color: #fff;
    font-size: 8rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;
}

.breadcrumb_wrapper {
    display: flex;
    justify-content: flex-end;
    /* 横方向の右寄せ */
    align-items: flex-end;
    /* 縦方向の下寄せ */
    height: 8rem;
}

.breadcrumb ol {
    display: flex;
}

.breadcrumb li+li::before {
    content: url(../image/breadcrumb\ .svg);
    /* 間に入れるアイコンや文字 */
    margin: 0 1.2rem;
    position: relative;
    bottom: -.2rem;
}


.breadcrumb a {
    color: #fff;
    font-family: 'Noto Sans JP' , sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: all 0.3s ease-out;
}

.breadcrumb a:hover {
    opacity: 0.6;
}

.ph_u_line {
    text-decoration: underline;
}




.kumo_small {
    position: relative;
    overflow-x: clip;
}

.kumo_small_left {
    position: absolute;
    bottom: -15.4rem;
    left: -6.1rem;
    width: 57.6rem;
    height: auto;
}

.kumo_small_right {
    position: absolute;
    top: -8rem;
    right: -9.2rem;
    width: 63.1rem;
    height: auto;
}



.nami_small {
    position: relative;
}

.nami_small_left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30.3rem;
    height: auto;
}

.nami_small_right {
    position: absolute;
    top: -8rem;
    right: 0;
    width: 41.6rem;
    height: auto;
}


.container_2080 {
    background-color: var(--basecolor1);
    display: grid;
    gap: 4rem;
    justify-content: center;
    padding: 2rem 0 8rem 0;
}

.subpage_h3 {
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 1.2rem;
    font-family: 'Noto Serif JP';
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    z-index: 1;
}

.subpage_h3_byobu {
    width: 1.8rem;
}

.subpage_h3_line {
    width: 4.8rem;
}


.subpage_p {
    font-family: 'Noto Sans JP' , sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    line-height: 1.8;
    text-align: center;
    position: relative;
    z-index: 1;
}

.busitop-swiper {
    width: 100%;
    overflow: hidden;
}

.busitop-swiper .swiper-slide {
    width: 44.5rem !important;
    height: 33.4rem;
    flex-shrink: 0;
}

.busitop-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.busitop-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}



.container_10064 {
    background-color: var(--basecolor1);
    display: grid;
    gap: 4rem;
    justify-content: center;
    padding: 10rem 0 6.4rem 0;
}

.card_container {
    display: grid;
    grid-template-columns: repeat(3, 366px);
    /* 3列、カード幅366px固定 */
    justify-content: space-between;
    /* カード間の余白を均等に */
    width: 100%;
    max-width: 120rem;
    /* コンテナ最大幅1200px */
    margin: 0 auto;
    /* 中央寄せ */
    gap: 5rem;
}

.card {
    display: grid;
    gap: 1.6rem;
    align-content: start;
}

.card_title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.card p {
    font-family: 'Noto Sans JP';
    font-weight: 400;
    font-size: 15rem;
    letter-spacing: 0.02em;
    line-height: 1.8;
}

.card_no {
    margin: 0.3rem 0;
    border-bottom: 0.1rem solid var(--accentcolor1);
    /* 下線の太さと色 */
    /* padding-bottom: 0.2rem; */
    /* 下線と内容の間隔 */
}

.card_no p {
    color: var(--accentcolor1);
    font-family: 'Zen Old Mincho', serif !important;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.card_title h4 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
}





.map {
    width: 100%;
    max-width: 120rem;
    position: relative;
    margin: -2.8rem 0 6rem 0;
}

.map_photo_1 {
    position: absolute;
    top: 4.5rem;
    right: 0;
    width: 32.4rem;
}

.map_photo_2 {
    position: absolute;
    bottom: 2.1rem;
    left: 0;
    width: 40.2rem;
}

.business_subpage {
    background-color: rgba(148, 128, 94, 0.15);
    background-image: url(../image/white_noise.png);
    padding: 8rem 0;
    display: grid;
    gap: 6.4rem;
    justify-content: center;
}


.service_wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 120rem;
    color: #FFF;
}

.service_set {
    width: 29.1rem;
    height: 67.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    writing-mode: vertical-rl;
    /* 縦書き＋右から左に進む */
    text-orientation: upright;
    color: #fff;
    font-family: 'Noto Serif JP';
    font-weight: 700;
    font-size: 2.8rem;
    letter-spacing: 0.04em;
    line-height: 100%;
    transition: 0.3s ease;
}

.service_1 {
    background-image:
        url(../image/service_cover.png),
        url(../image/service01.jpg);
    
}
.service_1:hover {
    background-image:
        url(../image/service01.jpg);
}

.service_2 {
    background-image:
        url(../image/service_cover.png),
        url(../image/service02.jpg);
}
.service_2:hover {
    background-image:
        url(../image/service02.jpg);
}

.service_3 {
    background-image:
        url(../image/service_cover.png),
        url(../image/service03.jpg);
}
.service_3:hover {
    background-image:
        url(../image/service03.jpg);
}

.service_4 {
    background-image:
        url(../image/service_cover.png),
        url(../image/service04.jpg);
}
.service_4:hover {
    background-image:
        url(../image/service04.jpg);
}



.business_casestudy {
    background-color: var(--basecolor1);
    display: grid;
    justify-content: center;
    padding: 0 0 18rem;
}

.tabs {
    display: grid;
    width: 100%;
    max-width: 120rem;
    gap: 6rem;
}

.tab_buttons {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #E5E1D8;
    gap: 6.6rem;
}

.tab_button {
    background: none;
    border: none;
    padding: 1rem 2rem;
    cursor: pointer;
    font-size: 1.6rem;
    font-weight: bold;
    border-bottom: 3px solid transparent;
}

.tab_button.active {
    color: var(--accentcolor1);
    border-color: var(--accentcolor1);
}

.tab_contents {
    padding: 0;
}

.tab_content {
    display: none;
}

.tab_content.active {
    display: block;
}

.tab_content ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    font-family: 'Noto Sans JP' , sans-serif;
}

.tab_content ul li {
    position: relative;
    padding-left: 1.5rem;
    /* 丸のスペース確保 */
    width: 39rem;
    /* white-space: nowrap; */
}

.tab_content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.5rem;
    /* テキストの縦位置に合わせる */
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--accentcolor1);
    /* 丸の色 */
    border-radius: 50%;
    /* 完全な丸 */
}

.tab_contents_list_tab1 {
    height: 50rem;
    overflow: hidden;
    position: relative;
}
.tab_contents_list_tab1.active {
    height: auto;
}

.tab_contents_gra {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20rem;
    background: linear-gradient(#FAF8F500,#FAF8F5);
}
.tab_contents_gra.active {
    display: none;
}

.SeeMore_btn_area {
    margin-top: 4rem;
}
.SeeMore_btn_area.active {
    display: none;
}






/* ～～～～～～～～～～～～～～～～～～～～～～～～
　　product(金屏風制作)
～～～～～～～～～～～～～～～～～～～～～～～～ */
.pageheader_product {
    background-image: url(../image/pageheader_product.jpg);
}

.section1_photo {
    background-color: var(--basecolor1);
    text-align: center;
}

.section1_photo img {
    display: inline-block;
    width: 100%;
    max-width: 120rem;
}

.nami {
    position: relative;
    overflow: hidden;
}

.nami_bg {
    position: absolute;
    top: -9rem;
    left: 56.8rem;
    z-index: 0;
}
.nami_bg2,
.nami_bg3,
.nami_bg4 {
    display: none;
}


.container_1006440 {
    display: grid;
    gap: 4rem;
    justify-content: center;
    padding: 10rem 0 6.4rem 0;
    z-index: 1;
}

.card_tate_container {
    display: grid;
    grid-template-columns: repeat(3, 36rem);
    /* 3列、カード幅360px固定 */
    justify-content: space-between;
    /* カード間の余白を均等に */
    max-width: 120rem;
    /* コンテナ最大幅1200px */
    margin: 0 auto;
    /* 中央寄せ */
    gap: 6rem;
    /* padding: 16px; */
    align-items: stretch;
    /* 各カードの高さを揃える */
    z-index: 1;
    margin-bottom: 8rem;
}

.card_tate {
    display: flex;
    gap: 2rem;
}

.card_tate_title {
    display: grid;
    display: inline-block
}

.card_tate_no {
    text-align: center;
}

.card_tate_no::after {
    content: "";
    display: block;
    width: 75%;
    /* 下線の長さ */
    border-bottom: 0.1rem solid var(--accentcolor1);
    margin: 0 auto;
    /* 中央寄せしたい場合 */
}

.card_tate_no p {
    color: var(--accentcolor1);
    font-family: 'Zen Old Mincho';
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.card_tate_title h4 {
    margin: 2rem 0 0;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    writing-mode: vertical-rl;
}


.card_tate_inner {
    display: grid;
    gap: 2rem;
    grid-template-rows: auto 1fr;
    /* 画像＋テキスト */

}

.card p {
    font-family: 'Noto Sans JP';
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    line-height: 1.8;
}

.btn_area {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 4rem;
    z-index: 1;
    /* margin: 8rem 0 6rem 0; */
}

.btn_primary {
    position: relative;
    background-color: var(--basecolor2);
    display: flex;
    justify-content: center;
    width: 32rem;
    margin: 0 auto;
    transition: all 0.3s ease-out;
}
.btn_primary:hover {
    opacity: 0.6;
}

.btn_primary a {
    color: #fff;
    font-family: 'Noto Serif JP';
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1.1;
    text-align: center;
    width: 100%;
    padding: 2rem 5.8rem 2rem 4rem;
}

.btn_primary img {
    position: absolute;
    top: 2rem;
    right: 2.4rem;
    width: 1.8rem;
    transition: all 0.3s ease-out;
}

.btn_primary:hover .arrow_down {
    transform: translateY(4px);
}

.btn_primary:hover .arrow_right {
    transform: translateX(6px);
}



.consultation {
    background-color: #ECE7DF;
    background-image: url(../image/white_noise_2.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    justify-content: center;
    padding: 8rem 0;
}

.consultation_h3 {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-align: center;
    margin: 0 0 6rem 0;
}

.card_consultation_container {
    display: grid;
    grid-template-columns: repeat(4, 27rem);
    /* 3列、カード幅360px固定 */
    justify-content: space-between;
    /* カード間の余白を均等に */
    max-width: 120rem;
    /* コンテナ最大幅1200px */
    margin: 0 auto;
    /* 中央寄せ */
    gap: 4rem;
    /* padding: 16px; */
    align-items: stretch;
    /* 各カードの高さを揃える */
}

.card_consultation {
    display: grid;
    place-items: center;
    /* 縦横同時に中央揃え */
    align-self: start;
    gap: 1.6rem;
}


.card_consultation_inner {
    background-color: #fff;
    border-radius: 50%;
    width: 18rem;
    height: 18rem;
    display: grid;
    align-items: center;
    justify-content: center;
}


.card_consultation_inner img {
    width: 8.3rem;
}

.card_consultation_title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-align: center;
}

.support_ex {
    display: grid;
    justify-items: center;
    background-color: var(--basecolor1);
    padding: 10rem 0 6rem;
    gap: 6.4rem;
    overflow-x: clip;
}

.container {
    display: grid;
    gap: 4rem;
}


.card_support_ex_wrapper {
    background-color: #fff;
    border: 0.1rem solid var(--accentcolor1);
    padding: 6rem 11.4rem;
    display: grid;
    gap: 4rem;
    justify-items: center;
    max-width: 120rem;
    box-shadow: 1.2rem 1.2rem 0 #EBE6DE;
    position: relative;
}

.nami_left {
    position: absolute;
    left: -16.5rem;
    top: 11rem;
    width: 27.9rem;
    height: auto;
}

.nami_right {
    position: absolute;
    right: -16.6rem;
    bottom: 5rem;
    width: 33.1rem;
    height: auto;
}

.card_support_ex {
    display: grid;
    justify-items: center;
    gap: 4rem;
    max-width: 80rem;
    z-index: 1;
}

.card_support_ex_title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.iconbox {
    background-color: var(--textcolor);
    width: 1.8rem;
    height: 1.8rem;
}

.card_support_ex_h4 {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-align: center;
}


.card_support_ex_contents {
    display: grid;
    gap: 2.8rem;
    max-width: 67rem;
}

.card_support_ex_list {
    padding-left: 1.1rem;
}


.card_support_ex_list ul {
    list-style: none;
    padding-left: 0;
}

/* 各リスト項目の前に色付きの丸印を追加 */
.card_support_ex_list ul li {
    position: relative;
    padding-left: 1.5rem;
    /* 丸印のスペースを確保 */
    margin-bottom: 0.5rem;
    /* リスト項目間の間隔を調整 */
    font-size: 1.6rem;
    font-family: 'Noto Sans JP';
}

.card_support_ex_list ul li::before {
    content: '';
    position: absolute;
    top: 1.4rem;
    /* 垂直方向の位置を調整 */
    left: 0;
    width: 0.6rem;
    /* 丸印の幅 */
    height: 0.6rem;
    /* 丸印の高さ */
    background-color: var(--accentcolor1);
    /* 変数で色を指定 */
    border-radius: 50%;
    /* 完全な円形にする */
}


.card_support_ex_inner {
    display: grid;
    gap: 1.2rem;
    padding: 2.4rem 2.4rem;
    background-color: #F5F3F2;
}

.card_support_ex_inner_box {
    display: flex;
    justify-content: center;
    background-color: var(--accentcolor1);
    width: 5.7rem;
    height: fit-content;
}

.card_support_ex_inner_frame {
    display: grid;
    gap: 0.4rem;
}

.card_support_ex_inner_box p {
    font-family: 'Noto Sans JP';
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    line-height: 1.8;
    color: #fff;
}


.card_support_ex_inner_title {
    font-family: 'Noto Sans JP';
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
}


.slider_common {
    overflow: hidden;
    background-image: url(../image/slider_common_bg.jpg);
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0 0 10rem 12rem;
}

.case-studies_contents_common {
    display: grid;
    gap: 3.2rem;
    width: 131.9rem;
    max-width: 100%;
}

.case-studies_slider_left_common {
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    border: 0.1rem solid var(--textcolor);
    transition: all 0.3s ease-out;
}

.case-studies_slider_left_common:hover {
    background-color: #FFFFFF40;
}

.case-studies_slider_left_common img {
    width: 1.8rem;
}

.case-studies_slider_right_common {
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    border: 0.1rem solid var(--textcolor);
    transition: all 0.3s ease-out;
}

.case-studies_slider_right_common:hover {
    background-color: #FFFFFF80;
}

.case-studies_slider_right_common img {
    width: 1.8rem;
}


.product_cta {
    width: 108rem;
    margin: 6rem auto 0;
}




/* 相談から納品までの流れ */
.step_wrapper {
    display: flex;
    gap: 0.8rem;
    width: 100%;
    max-width: 120rem;
    align-items: stretch;
    justify-content: center;
}

.step_card {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
    /* flex: 1; */
    width: 37.4rem;
    min-height: 31.7rem;
    background-color: #FFF;
    border: var(--accentcolor1) solid 0.1rem;
}

.step_card_no {
    background-color: var(--accentcolor1);
    width: fit-content;
    padding: 0.1rem 0.1rem;
    margin-top: -.1rem;
}


.step_card_line {
    width: fit-content;
    border: #fff solid 0.05rem;
    padding: 0 1.5rem;
}

.step_card_line p {
    color: #fff;
    font-family: 'Zen Old Mincho';
    font-size: 2.4rem;
    letter-spacing: 0.04rem;
    line-height: 1.8;
    font-weight: 400;
}

.step_contents {
    display: grid;
    gap: 2rem;
    /* max-width: 30.8rem; */
}

.step_contents p {
    font-size: 2rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    font-weight: 600;
    text-align: center;
}


.step_contents ul {
    padding: 0 3.2rem;
}

.step_contents ul li {
    position: relative;
    padding-left: 1.5rem;
    /* 丸のスペース確保 */
}

.step_contents ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.2rem;
    /* テキストの縦位置に合わせる */
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--accentcolor1);
    /* 丸の色 */
    border-radius: 50%;
    /* 完全な丸 */
}

.step_contents ul {
    font-size: 1.5rem;
    font-family: 'Noto Sans JP';
}

.step_wrapper img {
    width: 2.2rem;
    height: auto;
}

.faq {
    padding: 10rem 12rem 18rem 12rem;
    display: grid;
    gap: 8rem;
}

.faq a {
    color: var(--accentcolor1);
    text-decoration: underline;
    font-weight: 600;
    transition: all 0.3s ease-out;
}
.faq a:hover {
    opacity: 0.6;
}


/* ～～～～～～～～～～～～～～～～～～～～～～～～
　　replica(レプリカ・複製制作)
～～～～～～～～～～～～～～～～～～～～～～～～ */
.pageheader_replica {
    background-image: url(../image/pageheader_replica.jpg);
}

/* ～～～～～～～～～～～～～～～～～～～～～～～～
　　repair(金屏風修理・修復)
～～～～～～～～～～～～～～～～～～～～～～～～ */
.pageheader_repair {
    background-image: url(../image/pageheader_repair.jpg);
}

/* ～～～～～～～～～～～～～～～～～～～～～～～～
    custom-consultation(オーダーメイド相談)
～～～～～～～～～～～～～～～～～～～～～～～～ */
.pageheader_custom {
    background-image: url(../image/pageheader_custom.jpg);
}



/* ～～～～～～～～～～～～～～～～～～～～～～～～
    portfolio(ポートフォリオ)
～～～～～～～～～～～～～～～～～～～～～～～～ */
.pageheader_portfolio {
    background-image: url(../image/pageheader_portfolio.jpg);
}

.filter_wrapper {
    width: 100%;
    max-width: 108rem;
    background-color: #F2EEE7;
    background-image: url(../image/white_noise.png);
    padding: 4rem 3.2rem;
    display: grid;
    gap: 1.6rem;
    margin: 0 18rem 10rem;
}


/* グループコンテナの基本設定 */
.filter_group {
    display: flex;
    align-items: center;
    gap: 5.4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #fff;
    padding: 20px 0;
}


.filter_group_non {
    display: flex;
    align-items: center;
    gap: 5.4rem;
    padding-bottom: 2rem;
    padding: 20px 0;
}


.filter_label {
    font-family: 'Noto Sans JP';
    font-weight: bold;
    font-size: 1.7rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

/* ボタンのコンテナ */
.filter_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 78.7rem;

}


/* ボタンのスタイル */
.filter_button {
    /* padding: 0.8rem 1.6rem; */
    border: 1px solid var(--accentcolor1);
    background-color: #FFF;
    font-family: 'Noto Sans JP';
    font-weight: 400;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    line-height: 1.65;
    height: 3.9rem;
    cursor: pointer;
    transition: all 0.3s ease-out;
}
.filter_button:hover {
    background-color: #6F5B3B20;
}



.filter_buttons_all .filter_button {
    padding: 0.8rem 1.6rem;
}


.filter_buttons .filter_button a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0.8rem 1.6rem;
}


.filter_button.active {
    background-color: var(--accentcolor1);
    /* アクティブ時の背景色（茶色） */
    color: white;
}

.filter_keywords {
    display: flex;
    flex-wrap: wrap;
    /* カードを折り返す */
    gap: 0.8rem;
    /* 縦と横の両方に20pxの隙間を設定 */
    max-width: 78.7rem;

}


/* キーワードタグのスタイル */
.keyword_tag {
    display: inline-block;
    border-bottom: 1px solid var(--accentcolor1);
    cursor: pointer;
    color: var(--accentcolor1) !important;
    font-family: 'Noto Sans JP';
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: 0;
    line-height: 1;
    padding-bottom: 0.2rem;
}
.keyword_tag a {
    color: var(--accentcolor1) !important;
    transition: all 0.3s ease-out;
}
.keyword_tag a:hover {
    opacity: 0.6;
}

.keyword_tag.active {
    background-color: #FFFFFF;
}


/* ポートフォリオコンテナのスタイル */
.portfolio_list {
    display: flex;
    flex-wrap: wrap;
    /* 子要素を折り返す */
    gap: 30px;
    /* アイテム間の縦横の隙間 */
    /* margin: 0 -15px; */
    /* 親要素のパディングを相殺 */
    margin: 0 auto;
}

/* ポートフォリオアイテムのスタイル */
.portfolio_item {
    width: calc(33.33% - 20px);
    /* 3列表示の計算 */
    /* padding: 15px; */
    box-sizing: border-box;
    /* パディングを幅に含める */
    display: flex;
    flex-direction: column;
}


.eyecatch {
    aspect-ratio: 3 / 2; /* 例：3:2の比率 */
    overflow: hidden;
    margin-bottom: 1.2rem;
}


.portfolio_item img {
    aspect-ratio: 3 / 2; /* 例：3:2の比率 */
    width: 100%;
    height: auto;
    object-fit: cover; /* トリミングして枠いっぱいに表示 */
    transition: all 0.3s ease-out;
}

.portfolio_item:hover img {
    transform: scale(1.1);
}



.portfolio_item_content {
    flex-grow: 1;
    /* コンテンツが余白を埋めるようにする */
}

.item_header {
    display: flex;
    gap: 0.4rem;
    justify-content: space-between;
    /* カテゴリと日付を両端に配置 */
    align-items: center;
    margin-bottom: 0.6rem;
}

.item_category {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.6;
}


.item_header img {
    width: 1.3rem;
}

.item_header_left {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.item_title {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.item_date {
    font-family: 'Zen Old Mincho', serif;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0;
    color: #7c7c7c;
}

.item_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* タグのスタイル */
.item_tags .tag {
    display: inline-block;
    color: var(--accentcolor1);
    background-color: #E9E6DE;
    padding: 0.5rem 0.5rem;
    font-size: 1.1rem;
    font-family: 'Noto Sans JP';
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;

}



/* ～～～～～～～～～～～～～～～～～～～～～～～～
    portfolio(ポートフォリオ詳細)
～～～～～～～～～～～～～～～～～～～～～～～～ */





.c_breadcrumb_wrapper {
    font-family: 'Noto Sans JP' , sans-serif;
    margin-top: 9rem;
    background-color: var(--basecolor1);
    display: flex;
    justify-content: center;
    height: 4.5rem;
    padding: 1.1rem 0;
}

.c_breadcrumb {
    width: 116rem;
}

.c_breadcrumb ol {
    display: flex;
}

.c_breadcrumb li+li::before {
    content: url(../image/Frame\ 1000005248.svg);
    /* 間に入れるアイコンや文字 */
    margin: 0 1.2rem;
    position: relative;
    bottom: -.1rem;
}


.c_breadcrumb a {
    color: var(--accentcolor1);
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: all 0.3s ease-out;
}

.c_breadcrumb a:hover {
    opacity: 0.6;
}


.single_item_sec {
    position: relative;
}

.single_kumo {
    position: absolute;
    top: 8rem;
    left: 0;
    width: 100%;
    height: 31.2rem;
    z-index: 0;
}


.single_item_sec .wd_800 {
    position: relative;
    z-index: 1;
}

.item_header_details {  
    display: flex;
    gap: 1.2rem;
    align-items: center;
    margin-top: 5.6rem;
    margin-bottom: 1.5rem;
}

.item_category {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.6;
}


.item_header img {
    width: 1.3rem;
}

.item_header_left {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.single_item {
    position: relative;
}

.single_sns_share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    position: absolute;
    top: 27rem;
    left: -12.2rem;
}

.sns_share_title {
    font-family: 'Zen Old Mincho', serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--accentcolor1);
    transform: rotate(90deg);
    position: relative;
    left: 2px;
}

.sns_share_list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.sns_share_list li {
    display: flex;
    justify-content: center;
    background-color: #FFF;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
}

.sns_share_list li a {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px transparent;
    transition: all .3s ease-out;
}

.sns_share_list li a:hover {
    opacity: 0.6;
}

.sns_share_list li img {
    width: 1.8rem;
    height: 1.8rem;
}


.single_item .item_date {
    font-weight: 700;
}


.item_title_details {
    font-size: 2.8rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.item_details_eyecatch img {
    width: 100%;
    height: auto;
    object-fit: cover; /* 必要に応じて画像の切り抜きも可 */
    display: block;
    margin: 4rem 0;
}


/* プラグインの目次　見た目変更 */

#rtoc-mokuji-wrapper {
    background-color: #EBE6DE;
    background-image: url(../image/white_noise.png);
    font-family: 'Noto Sans JP' , sans-serif;

}


.rtoc-mokuji-content.frame1 {
    border: none !important;
}

.rtoc-mokuji-content {
    margin: 0 auto !important;
    max-width: 100% !important;
}

.rtoc-mokuji-content #rtoc-mokuji-title.rtoc_left {
    padding: 2rem 3.2rem !important;
    border-bottom: 2px solid #FFF;
}

#rtoc-mokuji-title span {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    color: var(--accentcolor1);
    font-weight: bold;
}

#rtoc-mokuji-title span::before {
    content: '';
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    background-image: url(../image/lucide_table-of-contents.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: .2rem;
    margin-right: .8rem;
}

.rtoc-mokuji-content .rtoc-mokuji.level-1 {
    padding-bottom: 4rem;
}

#rtoc-mokuji-wrapper ul {
    margin-bottom: 0 !important;
}


.table {
    width: 100%;
    display: grid;
}

.single_content {
    font-family: 'Noto Sans JP' , sans-serif;
}

.single_content h2 {
    font-size: 2rem;
    font-weight: 700;
    padding-bottom: 2rem;
    border-bottom: 3px solid #E5E1D8;
    position: relative;
    margin: 6rem 0 4rem;
}
.single_content h2::before {
    content: '';
    position: absolute;
    bottom: -.3rem;
    left: 0;
    width: 6rem;
    height: .3rem;
    background-color: var(--maincolor);
}

.single_content h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 5rem 0 4rem;
    padding-left: 1.2rem;
    border-left: 3px solid var(--maincolor);
}

.single_content h4 {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 4rem 0 4rem;
}
.single_content strong {
    font-weight: 700;
}


.portfolio_list_s {
    justify-content: space-between;
}

.portfolio_item_s {
    width: calc(50% - 20px);
    /* 2列表示の計算 */
    padding: 0;
}

.btn_back_s {
    display: block;
    width: fit-content;
    margin: 8rem auto 0;
}

.btn_back_s button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32rem;
    border: 0.1rem solid var(--accentcolor1);
    padding: 1.6rem 2.4rem 1.6rem 1.5rem;
    margin: 0 auto;
    flex-shrink: 0;
    color: var(--accentcolor1) !important;
    font-family: 'Noto Serif JP';
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.1;
    position: relative;
    transition: all 0.3s ease-out;
    cursor: pointer;
}

.btn_back_s button img {
    position: absolute;
    top: 1.8rem;
    right: 2.4rem;
    width: 1.3rem !important;
    height: auto;
    transition: all 0.3s ease-out;
}

.btn_back_s:hover button img{
    transform: translateX(6px);
}



/* ～～～～～～～～～～～～～～～～～～～～～～～～
    byoubu_blog(屏風屋ブロク)
～～～～～～～～～～～～～～～～～～～～～～～～ */
.pageheader_blog {
    background-image: url(../image/pageheader_blog.jpg);
}


/* ～～～～～～～～～～～～～～～～～～～～～～～～
　　プライバシーポリシー
～～～～～～～～～～～～～～～～～～～～～～～～ */
.pageheader_privacypolicy {
    background-image: url(../image/pageheader_privacypolicy.jpg);
}


.privacypolicy_head {
    text-align: center;
}

.privacypolicy_inner {
    gap: 4.8rem;
    margin: 10rem 0 18rem;
}

.privacypolicy_content {
    display: grid;
    gap: 3.2rem;
}

.privacypolicy_title {
    border-bottom: #C7BCA9 solid 0.1rem;
    padding-bottom: 1.6rem;
}


.privacypolicy_title h3 {
    font-family: 'Noto Sans JP';
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: var(--textcolor);
}

.privacypolicy_content p {
    font-family: 'Noto Sans JP';
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8;
    color: var(--textcolor);
}

.privacypolicy_content a {
    font-family: 'Noto Sans JP';
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.8;
    color: var(--accentcolor1);
    text-decoration: underline;
    width: fit-content;
    transition: all 0.3s ease-out;
}

.privacypolicy_content a:hover {
    opacity: 0.6;
}

.privacypolicy_list ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: 1.6rem;
}

.privacypolicy_list ul li {
    position: relative;
    padding-left: 3.2rem;
}

.privacypolicy_list ul li::before {
    content: '';
    position: absolute;
    top: 1.4rem;
    left: .9rem;
    width: 0.6rem;
    height: 0.6rem;
    background-color: var(--accentcolor1);
    border-radius: 50%;
}







/* ～～～～～～～～～～～～～～～～～～～～～～～～
　　company（会社概要）
～～～～～～～～～～～～～～～～～～～～～～～～ */
.pageheader_company {
    background-image: url(../image/pageheader_company.jpg);
}

.vison {
    background-color: #EBE6DE;
    background-image: url(../image/white_noise.png);
    padding: 4rem 0;
    display: grid;
    text-align: center;
}

.vison h4 {
    font-family: 'Noto Serif JP', "Serif";
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.8;
    color: var(--textcolor);
    margin-bottom: 4rem;
}

.vison_p {
    display: grid;
    text-align: center;
    gap: 2rem;
}


.message_wrapper {
    width: 80rem;
    display: flex;
    gap: 5.2rem;
    justify-content: space-between;
}

.message_left {
    width: 28rem;
    display: grid;
    align-content: start;
    gap: 2.6rem;
}

.carreer {
    border: #C7BCA9 solid 0.1rem;
    padding: 1.2rem 2.4rem 1.6rem;
}

.carreer h5 {
    font-family: 'Noto Sans JP';
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.8;
    color: var(--textcolor);
}

.carreer p {
    font-family: 'Noto Sans JP';
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8;
    color: var(--textcolor);
}

.message_right {
    width: 46.8rem;
    display: grid;
}

.message_right h4 {
    font-size: 2.6rem;
    font-weight: 600;
    margin-bottom: 2.4rem;
}

.message_right p {
    font-family: 'Noto Sans JP';
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8;
    text-align: justify;
    color: var(--textcolor);
}

.ceo {
    display: grid;
    gap: 2rem;
    justify-content: flex-end;
    margin-top: 4.4rem;
}

.ceo p {
    font-family: 'Noto Sans JP';
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8;
    color: var(--textcolor);
}

.ceo img {
    width: 28.4rem;
}

.company_info {
    width: 68rem;
    margin: 0 auto;
}

.company_info_item {
    border-bottom: #C7BCA9 solid 0.1rem;
    display: flex;
    gap: 12rem;
    padding: 2rem 0;
}

.info_item_name {
    width: 6.5rem; 
}

.company_info_item p {
    font-family: 'Noto Sans JP';
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.8;
    color: var(--textcolor);
}

.company_info_item ul {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.company_info_item ul li {
    padding-left: 3.2rem;
    position: relative;
}
.company_info_item ul li::before {
    content: "";
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: var(--maincolor);
    position: absolute;
    top: 1.1rem;
    left: .9rem;
}

.company_info_item a {
    display: inline-block;
    font-family: 'Noto Sans JP' , sans-serif;
    font-weight: 600;
    color: var(--accentcolor1);
    text-decoration: underline;
    margin-top: 2.6rem;
    transition: all 0.3s ease-out;
}

.company_info_item a:hover {
    opacity: 0.6;
}

.googlemap {
    width: 100%;
    height: 45rem;
    filter: grayscale(100%);
    margin-top: 8rem;
}


.history {
    padding: 0 12rem 18rem;
}




.timeline_container {
    overflow-x: auto;
    /* 水平スクロールを有効にする */
    white-space: nowrap;
    /* 子要素が改行されないようにする */
    padding-bottom: 20px;
    /* スクロールバーのための余白 */
    position: relative;
}

.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    position: relative;
}

/* 日付のスタイル */
.timeline_date {
    font-weight: 700;
    font-family: 'Zen Old Mincho';
    font-size: 2rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--accentcolor1);
    margin-left: .5rem;
    margin-bottom: .6rem;
}


.timeline_item {
    display: inline-block;
    position: relative;
    z-index: 2;
}



/* タイムラインの水平線 */
.side_line {
    display: flex;
    align-items: center;
}
.side_line_center {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--maincolor);
    border: 3px solid var(--basecolor1);
}
.side_line_left,
.side_line_right {
    height: .1rem;
    background-color: var(--accentcolor1);
}
.side_line_left {
    width: 1.85rem;
}
.side_line_right {
    /* 残ってる幅を指定 */
    flex: 1;
}

.timeline .timeline_item:first-child .side_line_left {
    /* 先頭は背景色透明 */
    background-color: transparent;
}


.vertical_line {
    width: .1rem;
    height: 3rem;
    border-right: 1px dashed var(--accentcolor1);
    margin-left: 2.85rem;
}

/* イベントカードのスタイル */
.timeline_content {
    width: 26rem;
    min-height: 18.5rem;
    box-sizing: border-box;
    /* paddingとborderを幅に含める */
    background-color: #FFF;
    border: 1px solid #94805E50;
    padding: 2.4rem 1.3rem;
    margin-right: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.timeline_content_ttl {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accentcolor1);
}
.timeline_content_txt {
    font-size: 1.2rem;
    text-wrap: wrap; /* テキスト折り返し */
}

.timeline_content li {
    font-size: 1.2rem;
    padding-left: 2.4rem;
    position: relative;
    width: 100%;
    text-wrap: wrap; /* テキスト折り返し */
}

.timeline_content li::before {
    content: "";
    display: block;
    width: .5rem;
    height: .5rem;
    background-color: var(--maincolor);
    border-radius: 50%;
    position: absolute;
    top: .75rem;
    left: .75rem;
}






/* ～～～～～～～～～～～～～～～～～～～～～～～～
　　helpful-information（お役立ち情報）
～～～～～～～～～～～～～～～～～～～～～～～～ */
.pageheader_helpful {
    background-image: url(../image/pageheader_helpful.jpg);
}

.info_inner {
    gap: 4.8rem;
    margin: 10rem 0 4rem;
}

.flex_column_center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nami_big {
    position: relative;
    overflow-x: clip;
}

.nami_big_img {
    position: absolute;
    bottom: -12rem;
    right: -32rem;
    width: 1332px;
    z-index: -1;
}
.nami_big_img img {
    width: 100%;
}

.helpfui_info {
    padding: 12rem 0 18rem;
    gap: 4rem;
    position: relative;
    z-index: 0;
}

.help_a {
    text-decoration: underline;
    transition: all 0.3s ease-out;
}
.help_a:hover {
    opacity: 0.6;
}



.nami_img_sp_left,
.nami_img_sp_right {
    display: none;
}




/* ～～～～～～～～～～～～～～～～～～～～～～～～～
    faq（よくある質問）
～～～～～～～～～～～～～～～～～～～～～～～～～～*/
.pageheader_faq {
    background-image: url(../image/pageheader_faq.jpg);
}

.card_link_wrapper {
    width: 120rem;
    display: grid;
    /* 3つの列を作成し、それぞれの幅を均等に分配 */
    grid-template-columns: repeat(3, 1fr);
    /* 行と列の間に20pxの均等な隙間を作成 */
    gap: 2.4rem;
}

.card_link_wrapper a {
    transition: all 0.3s ease-out;
}

.card_link_wrapper a:hover {
    background-color: #FFF;
}


.card_link {
    border: var(--accentcolor1) solid 0.1rem;
    display: flex;
    padding: 2.4rem 2rem;
}

.link_area {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.link_area p {
    font-family: 'Noto Sans JP';
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    /* line-height: 1; */
    color: var(--accentcolor1);
}

.link_area img {
    width: 2.6rem;
    transition: all 0.3s ease-out;
}

.card_link_wrapper a:hover .link_area img {
    transform: translateY(4px);
}


.accordion_item_wrapper {
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
}


/* アコーディオンの基本スタイル */
.accordion_item {
    border: 0.1rem solid var(--maincolor);
    margin-bottom: 2rem;
    /* padding: 2rem 2rem; */
    width: 100%;
}

.accordion_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 2rem 2rem;
    background-color: #EBE6DE;
    background-image: url(../image/white_noise_btn.png);
}
.question_head {
    border-right: 0.1rem solid #94805E15;
    width: 3.4rem;
    height: 3.2rem;
}


.question_head p {
    font-family: 'Zen Old Mincho';
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    color: var(--accentcolor1);
    margin-right: 1.6rem;
}

.question {
    font-family: 'Noto Sans JP';
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.6;
    flex: 1;
    margin-left: 2.4rem;
}


.answer_head {
    border-right: 0.1rem solid #94805E15;
    width: 3.4rem;
    height: 3.2rem;
}


.answer_head p {
    font-family: 'Zen Old Mincho';
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.3;
    color: var(--basecolor2);
    margin-right: 1.6rem;
}

.answer {
    margin-left: 2.4rem;
    font-family: 'Noto Sans JP';
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.6;
    flex: 1;
}


/* ＋ アイコン */
.icon {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;

}

.icon span {
    position: absolute;
    background: #6F5B3B;
    transition: transform 0.3s ease;
}

/* 横線 */
.icon span:first-child {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

/* 縦線 */
.icon span:last-child {
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

/* 開いたときは縦線を回転で消す（マイナスになる） */
.accordion_item.active .icon span:last-child {
    transform: translateX(-50%) rotate(90deg);
}

/* 回答の非表示スタイル */
.accordion_content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
}

/* 回答が表示された時のスタイル */
.accordion_item.active .accordion_content {
    max-height: 70rem;
    padding: 2rem 2rem;
}

.accordion_content a {
    color:var(--accentcolor1);
    text-decoration: underline;
    font-weight: 700;
    transition: all 0.3s ease-out;
}
.accordion_content a:hover {
    opacity: 0.6;
}


.faq_container {
    padding: 10rem 0 18rem;
}
.faq_container .btn_area {
    margin-top: 4rem;
}
.faq_container .btn_primary {
    margin-top: 2rem;
}



/* ～～～～～～～～～～～～～～～～～～～～～～～～～
    お問い合わせ
～～～～～～～～～～～～～～～～～～～～～～～～～～*/
.pageheader_inquiry {
    background-image: url(../image/pageheader_inquiry.jpg);
}

.inquiry_head {
    text-align: center;
    /* padding-top: 8rem; */
    margin-bottom: 0;
}


.contact_ul {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.contact_item {
    position: relative;
    padding-left: 3.2rem;
}


.contact_item::before {
    content: "";
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: var(--maincolor);
    position: absolute;
    top: 1.1rem;
    left: .9rem;
}


.contact_form form {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding: 0 1rem;
    font-family: 'Noto Sans JP';
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--textcolor);
}

.contact_form .form_label {
    font-weight: 700;
    margin-bottom: .8rem;
}

.contact_form input[type="text"],
.contact_form input[type="tel"],
.contact_form input[type="email"],
.contact_form textarea {
    background-color: #FFF;
    width: 100%;
    border: 1px solid #94805E50;
    border-radius: .2rem;
    padding: 1.6rem 2rem;
}




.contact_form .service_radio .wpcf7-radio {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.contact_form .service_radio .wpcf7-list-item {
  display: flex;
  margin-left: 0;
}

.contact_form .service_radio .wpcf7-list-item label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}


/* デフォルトのラジオボタンを非表示 */
.contact_form .service_radio input[type="radio"] {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

/* 外側の円 */
.contact_form .service_radio .wpcf7-list-item-label::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  background: #fff;
  border: 1px solid #6F5B3B;
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color 0.3s ease;
  position: relative;
  top: .4rem;
  left: 0;
}

/* 内側の円 */
.contact_form .service_radio .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: .8rem;
  left: .4rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background-color: #6F5B3B;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* チェックされた時 */
.contact_form .service_radio input[type="radio"]:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}

.contact_form .service_radio input[type="radio"]:checked + .wpcf7-list-item-label::before {
  border-color: #6F5B3B;
}


.form_pri_ck  {
    text-align: center;
    margin-top: 3.6rem;
}

.form_pri_ck a {
    font-weight: 700;
    color: var(--accentcolor1);
    text-decoration: underline;
}

.privacy-check {
    margin-top: 2.4rem;
}

.privacy-check .wpcf7-list-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1.6;
}

/* inputを非表示にしてデザイン置換 */
.privacy-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* テキスト */
.privacy-check .wpcf7-list-item-label {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

/* 外枠の四角 */
.privacy-check .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--accentcolor1);
  background-color: #fff;
  transition: all 0.2s ease;
}

/* チェックマーク（✓） */
.privacy-check input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  content: "✓";
  position: absolute;
  left: 5px;
  top: 48%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--accentcolor1);
  opacity: 1;
}

/* チェック時の枠色変更 */
.privacy-check input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  border-color: #c6a951;
}





/* ContactForm7のfile添付で付与される一番外側のタグ */
.wpcf7-file{
  color: var(--accentcolor1);
  font-size: 1.5rem;
  height: 100%;
  width: fit-content;
  padding-left: 0;
}

/* ContactForm7のfile添付内のボタン */
input[type=file]::file-selector-button {
    background-color: #FFF;
    padding: 1.6rem 4rem;
    margin-right: 1em;
    border:  1px solid var(--maincolor);
    color: var(--accentcolor1);
    height: 100%;
    cursor: pointer;
}

.wpcf7 input[type="file"] {
  width: 100%;
}



.contact_form .form_btn {
    width: fit-content;
    margin: 3.6rem auto 0;
}

.contact_form input[type="submit"] {
    background-color: #011726;
    color: #FFF;
    width: 32rem;
    padding: 2rem 2.4rem;
    text-align: center;
    position: relative;
}

.contact_form input[type="submit"]::after {
    content: url(../image/arrow_white.svg);
    position: absolute;
    right: 0;
    top: 0;
}

.contact_form .CF7_req {
    font-size: 1.1rem;
    line-height: 1;
    color: #FFF;
    padding: .3rem .6rem;
    background-color: #E50010;
    border-radius: .2rem;
    margin-left: .8rem;
}

.contact_form .CF7_unreq {
    font-size: 1.1rem;
    line-height: 1;
    color: #6F5B3B;
    padding: .3rem .6rem;
    background-color: #94805E15;
    border-radius: .2rem;
    margin-left: .8rem;
}


.contact_form .wpcf7-spinner {
    display: none;
}



/* すべてのプレースホルダーを対象にする場合 */
.wpcf7-form-control::placeholder {
    color: #94805E50; 
}


/* ～～～～～～～～～～～～～～～～～～～～～～～～～
    お問い合わせ-確認
～～～～～～～～～～～～～～～～～～～～～～～～～～*/


.contact_form_con .form_pri_ck {
    opacity: 0;
    height: 0;
    overflow: hidden;
}


.contact_form_con .form_btn_back {
    text-align: center;

}

.contact_form_con .wpcf7-previous {
    padding: .8rem 1.6rem;
    background-color: #FFF;
    border: 1px solid var(--maincolor);
}


.contact_form_con .form_label + p {
  background-color: #EEE;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #ddd;
  margin-top: 4px;
  min-height: 4.6rem;
}

/* ～～～～～～～～～～～～～～～～～～～～～～～～～
    お問い合わせ-thanks
～～～～～～～～～～～～～～～～～～～～～～～～～～*/

.thanks_text {
    font-size: 2rem;
    margin-bottom: 10rem;
}

.btn_back {
    margin-top: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32rem;
    border: 0.1rem solid var(--accentcolor1);
    padding: 1.6rem 2.4rem 1.6rem 1.5rem;
    margin: 0 auto;
    flex-shrink: 0;
    color: var(--accentcolor1) !important;
    font-family: 'Noto Serif JP';
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.1;
    position: relative;
    transition: all 0.3s ease-out;
    cursor: pointer;
}

.btn_back img {
    position: absolute;
    top: 1.8rem;
    right: 2.4rem;
    width: 1.3rem !important;
    height: auto;
    transition: all 0.3s ease-out;
}

.btn_back:hover img{
    transform: translateX(6px);
}


/* ～～～～～～～～～～～～～～～～～～～～～～～～～
    資料ダウンロード
～～～～～～～～～～～～～～～～～～～～～～～～～～*/
.pageheader_download {
    background-image: url(../image/pageheader_download.jpg);
}


.download_head {
    font-family: 'Noto Sans JP';
    display: flex;
    gap: 4rem;
    justify-content: center;
    padding: 0 1rem;

}

.dl_hd_left {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.dl_hd_left img {
    max-width: 35rem;
}

.dl_hd_left a {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--accentcolor1);
    text-decoration: underline;
}

.dl_hd_right h4 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.04rem;
    line-height: 1.5;
    margin-bottom: 2.4rem;
}

.dl_hd_right_group {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    font-size: 1.5rem;
    letter-spacing: 0.02rem;
    line-height: 1.6;
}

.dl_hd_right_group ul {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.dl_hd_right_group ul li {
    position: relative;
    padding-left: 2.4rem;
}

.dl_hd_right_group ul li::before {
    content: '';
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background-color: var(--maincolor);
    position: absolute;
    top: 1rem;
    left: .9rem;
}






/* ------------------------------------------------
レスポンシブ
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* ============ 1281px ～ 1400px（ノートPC） ============ */
@media screen and  (max-width: 1400px) {


/*  ヘッダー */
header,
.header_scrolled {
    padding: 0 0 0 4rem;
}

.header_left {
    gap: 4rem;
}
.logo {
    width: 15rem;
}

.nav_group {
    gap: 2.4rem;   
}


/*  トップページ */

.slider_photo1 {
    max-width: 589px;
    width: calc(589/1440*100vw);
    margin-right: calc(70/1440*100vw);
}

.slider_photo2 {
    max-width: 242px;
    width: calc(242/1440*100vw);
    /* margin-top: calc(464/1440*100vw); */
    margin-top: calc(380/1440*100vw);
    margin-right: calc(106/1440*100vw);
}

.slider_photo3 {
    max-width: 342px;
    width: calc(342/1440*100vw);
    margin-top: calc(135/1440*100vw);
    margin-right: calc(192/1440*100vw);
}

.slider_photo4 {
    max-width: 470px;
    width: calc(470/1440*100vw);
    margin-top: calc(275/1440*100vw);
    margin-right: calc(179/1440*100vw);
}

.slider_photo5 {
    max-width: 299px;
    width: calc(299/1440*100vw);
    /* margin-top: calc(527/1440*100vw); */
    margin-top: calc(480/1440*100vw);
    margin-right: calc(181/1440*100vw);
}

.slider_photo6 {
    max-width: 419px;
    width: calc(419/1440*100vw);
    margin-top: calc(143/1440*100vw);
}





/*  下層ページ */
.slider_common {
    padding: 0 0 10rem 8rem;
}

.case-swiper .swiper-controller {
    width: 110rem;
}

.c_breadcrumb {
    width: 108rem;
}

}



/* ============ 991px ～ 1280px（ノートPC小型） ============ */
@media screen and  (max-width: 1280px) {

/*---- ヘッダー ----*/
header .nav,
header .nav_btn {
    display: none;
}

header,
.header_scrolled {
    height: 6rem;
}

.logo {
    width: 12rem;
}

.header_right {
    margin-right: 8.8rem
}


/* ハンバガーメニュー */
.btn_menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 6rem;
    height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 30;
    text-align: center;
    padding: 1.25rem 1.5rem;
    background-color: var(--basecolor2);
    background-image: url(../image/white_noise_btn.png);
    cursor: pointer;
    appearance: none;
}

.btn_menu_line {
    display: block;
    position: relative;
    left: 0;
    width: 2.8rem;
    height: .1rem;
    background-color: #FFF;
    margin: .7rem auto;
    transition: all 0.3s ease;
}

.btn_menu_line::before,
.btn_menu_line::after {
    display: block;
    content: "";
    position: absolute;
    width: 2.8rem;
    height: .1rem;
    transition: inherit;
    background-color:  #FFF;
}
.btn_menu_line::before {
    top: -7px;
}
.btn_menu_line::after {
    top: 7px;
}

.btn_menu p {
font-family: 'Zen Old Mincho', serif , serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #FFF;
    line-height: 1;
    text-align: center;
    margin-top: .7rem;
}

/* メニュークリック後 */
.btn_menu.active {
    background-color: #FFF;
}

.btn_menu.active .btn_menu_line {
    background-color: transparent;
}

.btn_menu.active .btn_menu_line::before,
.btn_menu.active .btn_menu_line::after {
    top: 0;
    background-color: var(--accentcolor2);
}

.btn_menu.active .btn_menu_line::before {
    transform: rotate(45deg);
}
.btn_menu.active .btn_menu_line::after {
    transform: rotate(-45deg);
}

.btn_menu.active p {
    color: var(--accentcolor2);
}


/* モバイルメニュー */

.hdr_nav {
    display: block;
    position: fixed;
    top: 0;
    right: -120%;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: #00000060;
    color: #FFF;
    opacity: 0;
    transition: all 0.4s ease;
}

/* メニュークリック後 */
.hdr_nav.panelactive {
    right: 0;
    opacity: 1;
}

.hdr_nav_inner {
    width: 30.3rem;
    height: 100%;
    background-color: var(--basecolor2);
    background-image: url(../image/sp_bk_asanoha.png);
    margin-left: auto;
    padding: 14rem 3.2rem 2.4rem;
}

.nav_sp {
    margin-bottom: 8rem;
    width: 24rem;
}

.nav_sp_group {
    display: flex;
    flex-direction: column;
    gap: 3.8rem;
    color: #FFF;
    font-weight: 700;
}

.nav_sp_group .nav_item {
    font-size: 2.2rem;
}

.nav_item_icon {
    padding-right: 1.8rem;
}

.nav_item_icon::before,
.nav_item_icon::after {
    width: 1.8rem;
    right: 0;
    top: 2.2rem;
}

.nav_item_icon::after {
    transform: rotate(90deg);
    transition: 0.3s ease;
}

.nav_sp_group .nav_item_sub {
    position: relative;
    top: 0;
    color: #FFF;
    background-color: transparent;
    padding: 0;
    margin: 1rem 0 0 1rem;
    transition: all .3s ease;
}

.nav_sp_group .nav_item_sub li {
    font-size: 1.6rem;
    width: 100%;
    padding: .4rem 0;
}

.nav_sp_group .nav_item_sub li:first-child {
    font-size: 1.8rem;
    border-bottom: .5px solid #E1DFDD50;
    padding: .8rem 0;
}

.nav_sp_group .nav_item_sub a {
    position: relative;
}

.nav_sp_group .nav_item_sub .icon_right {
    position: absolute;
    top: .6rem;
    right: 0;
}
.nav_sp_group .nav_item_sub li:first-child .icon_right {
    top: 1rem;
}

.nav_btn_sp {
    margin: 0 auto;
}
.nav_btn_sp .nav_btn_contact a,
.nav_btn_sp .nav_btn_download a {
    width: 100%;
    height: 7.8rem;
    font-size: 2rem;
    font-weight: 700;
    gap: 1.5rem;
}

.nav_btn_sp .nav_btn_contact_icon img {
    width: 2rem;
}

.nav_btn_sp .nav_btn_download a {
    background-color: #FFF;
    background-image: url(../image/white_noise_btn.png);
    color: var(--accentcolor2);
    gap: 1rem;
    margin-top: 2.8rem;
}

.nav_btn_sp .nav_btn_download_icon img {
    width: 2.2rem;
    margin-bottom: -.2rem;
}

.hdr_nav .sns {
    margin-top: 8rem;
    justify-content: center;
    gap: 4.4rem;
}

.hdr_nav .sns a {
    gap: .8rem
}

.hdr_nav .sns img {
    width: 2rem;
}


/*---- トップページ ----*/

.mv_h2 {
    font-size: 6.4rem;
}

.concept_inner {
    gap: 12rem;
}

.concept_h2 {
    font-size: 4rem;
    gap: 3.6rem;
}

.concept_photo {
    height: 36rem;
}



.business_1 {
    padding: 12rem 4rem;
}

.business_head {
    gap: 1.4rem;
    max-width: 80rem;
    /* margin: 0 auto; */
}

.business_contents {
    gap: 4rem;
    justify-content: center;
    max-width: 80rem;
    margin: 0 auto;
}

.business_contents_left {
    padding-left: 0;
}



.case-studies_contents {
    gap: 3.2rem;
    width: 100%;
    max-width: 120rem;
    margin-left: 8rem;
}

.business_contents_img {
    width: 32rem;
}



.case-studies_head {
    max-width: 80rem;
}

.case-swiper .swiper-controller {
    max-width: 80rem;
}

.case-studies_card {
    width: 32rem;
    height: 36rem;
}



.about_h2 {
    font-size: 3.6rem;
}

.about_photo_1 {
    width: 24rem;
}

.about_photo_2 {
    width: 20rem;
}

.about_photo_3 {
    width: 38rem;
}


.clients_head {
    max-width: 80rem;

}


.footer_inner_left {
    margin: 13.2rem 0 0 6rem;
}



/*---- 下層ページ ----*/
/*---- business（屏風制作・修理） ----*/
.pageheader {
    padding: 18.2rem 0 0;
    margin-top: 6rem;
}

.pageheader_title {
    max-width: 80rem;
    flex-direction: column;
}

.pageheader_h2 {
    font-size: 6.4rem;
}

.breadcrumb_wrapper {
    height: 6.4rem;
}



.card_container {
    grid-template-columns: repeat(3, 240px);
    /* 3列、カード幅240px固定 */
    max-width: 80rem;
    gap: 4rem;
}

.card_title h4 {
    font-size: 1.8rem;
}

.cta_black_1200 {
    max-width: 80rem;
}


.map {
    max-width: 80rem;
    margin: -2.8rem 4rem 6rem;
}


.service_wrapper {
    max-width: 80rem;
}

.service_set {
    width: 20rem;
    height: 48rem;
}


.tabs {
    max-width: 80rem;
}

.tab_buttons {
    gap: 4rem;
}


/*---- product（金屏風制作）----*/
.section1_photo img {
    max-width: 80rem;
}

.card_tate_container {
    grid-template-columns: repeat(3, 24rem);
    /* 3列、カード幅240px固定 */
    max-width: 80rem;
    gap: 4rem;
}

.card_consultation_container {
    grid-template-columns: repeat(2, 27rem);
    /* 3列、カード幅270px固定 */
    max-width: 80rem;
    gap: 4rem;
}

.card_support_ex_wrapper {
    padding: 6rem 4rem;
    max-width: 80rem;
}

.step_wrapper {
    max-width: 80rem;
}

.step_card {
    width: 24rem;
    flex: none;
}
.step_contents p {
    padding: 0;
}

.step_contents ul {
    padding: 0 1.6rem 2.4rem;
}



/*---- portfolio（ポートフォリオ）----*/
.filter_wrapper {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto 10rem;
}


.c_breadcrumb_wrapper {
    width: 80rem;
}
.portfolio_list {
    width: 80rem;
    max-width: 100%;
}


/*---- portfolio（ポートフォリオ詳細）----*/
.c_breadcrumb {
    width: 100%;
    max-width: 80rem;
}



/*---- faq（よくある質問）----*/
.card_link_wrapper {
    width: 80rem;
    /* 2つの列を作成し、それぞれの幅を均等に分配 */
    grid-template-columns: repeat(2, 1fr);
}


}


/* ============ 541px ～ 990px（タブレット） ============ */
@media screen and  (max-width: 990px) {

/*---- 共通 ----*/
.img_sp {
    display: inline-block !important;
}
.img_pc {
    display: none !important;
}

.grid_center {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.sec_pad_lr {
    padding-left: 4rem;
    padding-right: 4rem;
}



.wd_800 {
    width: 100%;
    max-width: 80rem;
}




/*---- トップページ ----*/

.mv_bottom {
    padding: 0 0 10rem 4rem;
}

.swiper-pagination {
    display: none;
}

.concept {
    padding: 10rem 4rem;
}

.concept_inner {
    gap: 4rem;
}

.concept_text {
    margin: 16rem 0 6.4rem;
}

.concept_photo {
    height: 37.5rem;

}

.business_h3 {
    font-size: 2.8rem;
}


.business_contents_img {
    width: 100%;
}

.business_contents_left {
    width: 40%;
}

.business_contents_right {
    width: 60%;
    padding: 0 0 0 0;
}

.business_contents_inner {
    width: 100%;
}

.case-studies {
    padding: 12rem 4rem;
}

.case-studies_h3 {
    font-size: 2.8rem;
}

.case-studies_head_inner {
    flex-direction: column;
}

.case-studies_head_inner_text { 
    width: 100%;
}

.case-studies_btn {
    position: relative;
    margin-top: 1.6rem;
    margin-left: auto;
}

.case-studies_contents {
    margin-left: 0;
}

.case-studies_card {
    width: 26rem;
    height: 29rem;
}

.case-swiper .swiper-controller {
    max-width: 40rem;
}

.about_photo_2 {
    top: 100rem;
}

.clients {
    padding: 12rem 0;
}

.clients_head {
    padding: 0 4rem;
}

.clients_h3 {
    font-size: 2.8rem;
}


.footer_inner {
    width: 100%;
    flex-direction: column;
    gap: 6rem;
}

.footer_inner_left {
    margin: 13.2rem 4rem 0 4rem;
}


.sns {
    justify-content: flex-start;
}


.footer_inner_right {
    gap: 4rem;
    margin: 4rem 4rem 5.6rem 4rem;
}

.nav_group_footer {
    flex-direction: column;
    gap: 4rem;
}


.nav_item_sub_footer a {
    font-weight: 400;
}



/*---- 下層ページ ----*/
/*---- business（屏風制作・修理） ----*/

.subpage_h3 h3 {
    font-size: 2.4rem;
}


.pageheader {
    padding: 10rem 0 0;
}

.pageheader_title {
    padding: 0 4rem;
    margin: 0 auto 12rem;
}

.pageheader_h2 {
    font-size: 4.8rem;
}

.pageheader_btm {
    height: 4rem;
}

.pageheader_btm img {
    width: 4rem;
}

.container_2080 {
    padding: 2rem 4rem 8rem 4rem;
}

/* .grid_center {
    padding: 0 4rem;
} */

.card_container {
    grid-template-columns: repeat(3, 31%);
    gap: 1.6rem;
    padding: 0 4rem;
}

.cta_black_1200 {
    padding: 0 4rem;
    width: 100%;
}


.card_title {
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}


.container_10064 {
    padding: 10rem 4rem 6.4rem 4rem;
}

.map {
    max-width: 80rem;
    margin: -2.8rem auto 6rem;
    padding: 0 4rem;
}



.business_subpage {
    padding: 8rem 4rem;
    display: grid;
}


.service_set {
    width: 25%;
    height: 48rem;
    font-size: 2rem;
}


.business_casestudy {
    padding: 0 4rem 12rem;
}

.tab_buttons {
    gap: 0rem;
    justify-content: space-between;
}

.tab_button {
    padding: 1rem 1rem;
}


/*---- product(金屏風制作) ----*/

.section1_photo {
    padding: 0 4rem;
}


.container_1006440 {
    padding: 10rem 4rem 6.4rem 4rem;
}


.card_tate_container {
    display: grid;
    grid-template-columns: repeat(1, 36rem);
    padding: 0 4rem;
}

.consultation {
    padding: 8rem 4rem;
}

.card_consultation_container {
    grid-template-columns: repeat(1, 27rem);
    gap: 4rem;
}


.support_ex {
    padding: 10rem 4rem 6rem;
}


.card_support_ex_h4 {
    font-size: 2rem;
}

.card_tate_title {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card_tate {
    flex-direction: column;
    align-items: center;
}

.card_tate_no {
    width: fit-content;
}


.card_tate_title h4 {
    writing-mode: initial;
    margin: 1rem 0 0;
}




.step_wrapper {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.step_card {
    width: 36rem;
    padding: 0 3.2rem;
}

.step_contents {
    width: 100%;
}

.step_contents ul {
    width: 100%;
    padding: 0 0 2.4rem;
}

.step_wrapper img {
    transform: rotate(90deg);
}

.btn_area {
    padding: 0 4rem;
}


/*---- replica(レプリカ・複製制作) ----*/

/*---- repair(金屏風修理・修復) ----*/
.step_wrapper.margin60 {
    margin-top: 0.8rem;
}

/*----  custom-consultation(オーダーメイド相談) ----*/


/*----   portfolio(ポートフォリオ) ----*/

.filter_wrapper {
    padding: 0 2rem;
    gap: 0;
}

.filter_group {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
}

.filter_group_non {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
}

.port_accordion_item {
    gap: 0;
    transition: gap 0.4s ease;
}

.port_accordion_header {
    width: 100%;
    position: relative;
}
/* 十字 */
.port_accordion_header::before,
.port_accordion_header::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    width: 16px;
    height: 1.5px;
    background-color: var(--accentcolor1);
}
.port_accordion_header::after {
    transform: rotate(90deg);
    transition: transform 0.4s ease;
}

/* 最初は閉じておく */
.port_accordion_bottom {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* クリックしたら */
.port_accordion_item.active {
    gap: 1.2rem;
}
.port_accordion_item.active .port_accordion_header::after {
    transform: rotate(180deg);
}

.port_accordion_item.active .port_accordion_bottom {
    max-height: 100%;
}



.portfolio_list {
    width: 100%;
    max-width: 80rem;
    gap: 30px 15px;
}

.portfolio_item {
    width: calc(33.33% - 10px);
}

.filter_buttons {
    width: 100%;
}

.filter_buttons_all {
    width: 100%;
}

.filter_button {
    width: calc(50% - 5px);
    text-align: center;
}




/*----   portfolio(ポートフォリオ詳細) ----*/

.c_breadcrumb_wrapper {
    max-width: 80rem;
    width: 100%;
}

.single_item_sec {
    display: flex;
    flex-direction: column;
}

.single_item_sec .wd_800 {
    max-width: 80rem;
    width: 100%;
}


.single_sns_share {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: 4rem;
}

.sns_share_title {
    transform: rotate(0deg);
    left: 0;
}

.sns_share_list {
    display: flex;
    flex-direction: row;
    gap: 1.2rem;
}


.single_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.single_item .item_details_eyecatch {
    width: 100%;
}


.subpage_h3 {
    width: 100%;
}

.single_item_list {
    display: flex;
    flex-direction: column;

}

.single_item_list .wd_800 {
    max-width: 80rem;
    width: 100%;
}






/*----  byobu_blog(屏風屋ブログ) ----*/

/*----  byobu_blog(屏風屋ブログ詳細) ----*/


/*----  company（会社概要） ----*/
.message_wrapper {
    flex-direction: column;
    align-items: center;
}

.timeline_container {
    width: 100%;
    max-width: 80rem;

}


/*----　helpful-information（お役立ち情報） ----*/
.privacypolicy_content {
    display: flex;
    flex-direction: column;
    width: 100%;
}



/*----　プライバシーポリシー ----*/

.privacypolicy_list ul li {
    padding-left: 2.8rem;
}


.privacypolicy_list ul li::before {
    top: 1rem;
    left: .9rem;
}

/*----　資料ダウンロード ----*/
.download_head {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.dl_hd_right {
    width: 100%;
    max-width: 60rem;
}

}










/* ============ 540px以下（スマホ） ============ */
@media screen and (max-width: 540px) {

/* スマホ用レイアウト */
/*----　共通　----*/
body {
    font-size: 1.4rem;
    line-height: 1.8;
}

.br_pc {
    display: none;
}

.br_sp {
    display: inline;
}

.sec_pad_lr {
    padding-left: 2rem;
    padding-right: 2rem;
}


/*----　ヘッダー　----*/
header,
.header_scrolled {
    padding: 0 0 0 2rem;
    height: 6rem;
}


.logo {
    width: 14rem;
}

nav.nav {
    display: none;
}

.nav_btn {
    display: none;
}

/*----　トップページ　----*/
.mv_bottom {
    padding: 0 0 7.8rem 2rem;
}

.mv_h2 {
    font-size: 5rem;
    line-height: 1.4;
    font-weight: 500;
}

.mv_contents_scroll {
    gap: .2rem;
    bottom: .8rem;
}


.concept {
    padding: 8rem 2rem;
}

.concept_inner {
        flex-direction: column;
    gap: 0;
}

.concept_inner_left {
    padding-left: 4rem;
}

.concept_h2 {
    font-size: 2.6rem;
    line-height: 1.4;
}

.concept_text {
    margin-top: 3.8rem;
    padding-left: 6.8rem;
}

.cta_black a {
    gap: 1.4rem;
    align-items: center;
}

.cta_black_text {
    font-size: 1.4rem;
}

.cta_black_icon {
    margin-top: 2px;
}

.concept_photo {
    height: 52.8rem;
    background-image: url(../image/top_consept_photo_sp.jpg);
}


.slider_photo1 {
    max-width: 318px;
    width: 318px;
    margin-right: -34px;
}

.slider_photo2 {
    max-width: 115px;
    width: 115px;
    margin-top: 250px;
    margin-right: 56px;
}

.slider_photo3 {
    max-width: 184px;
    width: 184px;
    margin-top: 95px;
    margin-right: 48px;
}

.slider_photo4 {
    max-width: 249px;
    width: 249px;
    margin-top: 198px;
    margin-right: 56px;
}

.slider_photo5 {
    max-width: 158px;
    width: 158px;
    margin-top: 340px;
    margin-right: 24px;
}

.slider_photo6 {
    max-width: 222px;
    width: 222px;
    margin-top: 32px;
}



.business_1 {
    padding: 6rem 2rem 4rem;
    gap: 3.2rem;
}

.business_head {
    width: 100%;
    gap: .8rem;
}

.business_head_label_icon img {
    margin-bottom: -2px;
}

.business_head_label_text {
    font-size: 1.2rem;
}

.business_contents {
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 2.8rem;
}

.business_contents_left {
    width: 100%;
}
.business_contents_right {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.business_contents_inner {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    /* margin-bottom: 0; */
}

.business_btn {
    position: relative;
}




.business_contents_title {
    gap: .8rem;
}

.japanese_pattern_left {
    width: 37.3rem;
    top: auto;
    bottom: -8rem;
    left: -14.8rem;
}
.japanese_pattern_left img {
    width: 100%;
}
.Japanese_pattern_right {
    width: 37.3rem;
    top: -14.5rem;
    right: -14.4rem;
}
.Japanese_pattern_right img {
    width: 100%;
}

.case-studies {
    padding: 6rem 2rem;
    gap: 2.8rem;
}

.case-studies_head {
    gap: .8rem;
}

.case-studies_contents {
    width: 100%;
}

.case-studies_head_label_icon img {
    margin-bottom: -4px;
}

.case-studies_head_label_text {
    font-size: 1.2rem;
}


.case-studies_head_inner {
    margin: 2.4rem 0 0;
}


.case-studies_btn_icon {
    margin-top: 3px;
}
.case-swiper .swiper-controller {
    max-width: 30rem;
}

.swiper-button-prev {
    right: 6.4rem;
}


.greeting {
    padding: 23.6rem 2rem 6rem;
        background-image: url(../image/greeting_background_sp.jpg);
}
.greeting_inner {
    width: 100%;
    gap: 4rem;
}

.greeting_inner_title {
    font-size: 2.4rem;
    line-height: 1.6;
}


.about {
    padding-top: 48.5rem;
}

.about_photo_1  {
    width: 20.8rem;
    top: 6rem;
}

.about_photo_2 {
    width: 16.4rem;
    top: 91.6rem;
    left: 2rem;
}

.about_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.4rem;
    padding: 0;
}


.about_h2 {
    font-size: 2.3rem;
}


.about_photo_3 {
    width: 29.4rem;
    margin: 37rem 0 0 auto;
}


.about_wave_right {
    right: -27rem;
    top: -10rem;
    width: 66.5rem;
}


.about_wave_left {
    left: -15rem;
    bottom: -3rem;
    width: 65rem;
}


.clients {
    padding: 6rem 0;
    gap: 4rem;
}

.clients_head {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: 0 2rem;
}

.clients_head_label_text {
    font-size: 1.2rem;
}

.clients_head_text {
    margin: 2.4rem 0 0;
}


.cctop-swiper .swiper-slide,
.ccbtm-swiper .swiper-slide {
    width: 15.4rem !important;
    padding: 0 0;
}


.contact {
    padding: 6rem 2rem;
}

.contact_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    margin: 0 0 3.2rem;
}

.contact_head_label {
    font-size: 1.6rem;
}

.contact_h3 {
    font-size: 3rem;
}

.contact_head_text {
    font-size: 1.6rem;
    margin-top: 2.4rem;
}

.contact_btn {
    flex-direction: column;
}

.contact_btn_left,
.contact_btn_right {
    font-size: 2rem;
    padding: 5.5rem 0;
}

.contact_btn_left {
    background-image: url(../image/cvbtn_01_sp.jpg);
    background-position: center;
    background-size: cover;
}
.contact_btn_right {
    background-image: url(../image/cvbtn_02_sp.jpg);
    background-position: center;
    background-size: cover;
}



/*----　フッター　----*/
footer {
    padding: 6rem 2rem;
}


.footer_inner_left {
    margin: 0;
}

.footer_inner_right {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.nav_footer {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.nav_footer_btm {
    flex-direction: column-reverse;
    gap: 5.6rem;
}

.nav_footer_btm p {
    text-align: center;
}

.footer_inner_right_top {
    top: -4rem;
}



/*----　仮想ページ　----*/
/*----　business(屏風制作・修理)　----*/


.pageheader {
    padding: 16rem 0 0;
    margin-top: 0;
}

.pageheader_inner {
    display: flex;
    flex-direction: column;
}

.pageheader_title {
    padding: 0 2rem;
    margin: 0 auto 8.7rem;
}

.pageheader_h2 {
    font-size: 3.4rem;
}

.breadcrumb_wrapper {
    height: auto;
    margin-top: 3.2rem; 
}

.breadcrumb a {
    font-size: 1.2rem;
}


.breadcrumb li+li::before {
    margin: 0 .8rem;
}

.pageheader_btm {
    height: 2rem;
}

.pageheader_btm img {
    width: 2rem;
}

.container_2080 {
    padding: 8rem 2rem 6rem 2rem;
    gap: 3.2rem;
}

.subpage_h3_byobu {
    width: 1.4rem;
} 

.subpage_h3 {
    gap: .8rem;
}

.subpage_h3 h3 {
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0;
}

.subpage_h3_line {
    width: 2.4rem;
    margin-top: .4rem;
}

.subpage_p {
    font-size: 1.4rem;
}

.kumo_small_right {
    top: 1rem;
    right: -14.2rem;
    width: 38rem;
}

.kumo_small_left {
    bottom: -9rem;
    left: -9rem;
    width: 33rem;
}

.busitop-swiper .swiper-slide {
    width: 26.8rem !important;
    height: 32rem;
}

.container_10064 {
    padding: 8rem 2rem 5.4rem 2rem;
    gap: 3.2rem;
}

.card_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
    width: 100%;
    padding: 0 2rem;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    width: 100%;
}

.card_title {
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
}

.card_no p {
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
}
.card_title h4 {
    font-size: 2rem;
    
}

.card_no p {
    letter-spacing: 0.02em;
    line-height: 1.8;
}

.cta_black_1200 {
    padding: 0 2rem;
}



.bg_sp_map {
    background-image: url(../image/business_map_sp.png);
    background-position: top;
    background-size: cover;
    padding-bottom: 42rem;
}

.bg_sp_map .container_10064 {
    background-color: transparent;
}

.map {
    display: none;
}



.business_subpage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6rem 2rem;
}

.business_subpage .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
}

.service_wrapper {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}
.service_set {
    width: 100%;
    height: 12rem;
    font-size: 2rem;
    writing-mode: initial;
}

.service_1 {
    background-image: url(../image/service01_sp.jpg);
}
.service_2 {
    background-image: url(../image/service02_sp.jpg);
}
.service_3 {
    background-image: url(../image/service03_sp.jpg);
}
.service_4 {
    background-image: url(../image/service04_sp.jpg);
}

.business_casestudy {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2rem 12rem;
}

.tabs {
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
}

.tab_buttons {
    overflow-x: scroll;
    justify-content: flex-start;
}

.tab_button {
    width: fit-content;
    text-wrap: nowrap;
}


/*----　product(金屏風制作)　----*/
.nami_small_left {
    bottom: -20px;
    left: -8px;
    width: 19rem;
}

.nami_small_right {
    top: 0rem;
    width: 24rem;
}

.section1_photo {
    padding: 0;
}

.nami_bg {
    position: absolute;
    top: -10px;
    right: -240px;
    left: auto;
    width: 600px;
}
.nami_bg2,
.nami_bg3,
.nami_bg4 {
    display: block;
    position: absolute;
    z-index: 0;
}
.nami_bg2 {
    top: 400px;
    left: -240px;
    width: 700px;
    transform: scaleX(-1);
}
.nami_bg3 {
    top: 970px;
    right: -250px;
    width: 700px;
}
.nami_bg4 {
    top: 1560px;
    left: -220px;
    width: 700px;
    transform: scaleX(-1);
}

.nami_bg img,
.nami_bg2 img,
.nami_bg3 img,
.nami_bg4 img {
    width: 100% !important;
}

.container_1006440 {
    padding: 8rem 0 5.4rem 0;
}

.card_tate_container {
    display: flex;
    flex-direction: column;
    align-items: center;        
    padding: 0;
    gap: 3.2rem;
    margin-bottom: 6rem;
}

.card_tate {
    gap: 1.6rem;
}

.card_tate_no p {
    font-size: 1.4rem;
}
.card_tate_no::after {
    width: 1.8rem;
}

.card_tate_title h4 {
    font-size: 2rem;
    margin: 1.4rem 0 0
}

.p_notosans {
    font-size: 1.4rem;
}

.margin8060 {
    margin: 6rem 0 6rem;
}

.btn_area {
    padding: 0;

}

.btn_primary {
    width: 100%;
}

.consultation {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6rem 2rem;
}

.consultation_h3 {
    font-size: 2rem;
    line-height: 1.6;
    margin: 0 0 5.4rem 0;
}

.card_consultation_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
}

.card_consultation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
}

.margin8080 {
    margin: 6rem 0 0;
}

.support_ex {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8rem 2rem 12rem;
    background-color: #FFF;
    gap: 6rem;
}

.card_support_ex_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
    padding: 0;
    border: none;
    box-shadow: none;
}

.card_support_ex_title {
    justify-content: flex-start;
}

.card_support_ex_h4 {
    text-align: initial;
}

.card_support_ex {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.card_support_ex_contents {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.card_support_ex_inner {
    display: flex;
    flex-direction: column;
    background-color: #B9B2A715;
}

.card_support_ex_inner_title {
    font-size: 1.4rem;
}

.nami_left {
    left: -6.5rem;
    top: -37.5rem;
    width: 18rem;
}

.nami_right {
    right: -3.6rem;
    bottom: -10rem;
    width: 20rem;
}

.slider_common {
    background: linear-gradient(
    #FFFF 0%,
    #FFFF 100px,
    #94805E15 100px,
    #94805E15 100%
    );
    padding: 0 0 6rem 2rem;
}

.padding100 {
    padding: 8rem 2rem 0;
}

.subpage_h3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
}

.margin_btm_64 {
    margin-bottom: 5.4rem;
}

.step_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step_card {
    max-width: 36rem;
    width: 100%;
    padding: 0 3.2rem 4rem;
    min-height: auto;
    height: auto;
}

.step_contents ul {
    font-size: 1.4rem;
    padding: 0;
}

.step_contents ul li::before {
    top: 1rem;
}

.margin80 {
    margin-top: 6rem;
}

.faq {
    padding: 8rem 2rem 12rem 2rem;
    gap: 3.2rem;
}

.faq .p_notosans {
    text-align: center;
}

/*----　replica(レプリカ・複製制作)　----*/

.nami_left_replica {
    top: -34.5rem;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
}

.card_support_ex_contents_replica {
    gap: 3.2rem;
}

.card_support_ex_list ul li {
    font-size: 1.4rem;
}

.card_support_ex_list ul li::before {
    top: 1rem;
}


/*----　business(屏風制作・修理)　----*/

.card_support_ex_repair {
    width: 100%;
}

.card_support_ex_repair img {
    max-block-size: initial;
} 

.card_support_ex_repair .nami_left {
    left: -6rem;
    top: -34rem;
    width: 18rem;
}
.card_support_ex_repair .nami_right {
    right: -6rem;
    bottom: -12rem;
    width: 20rem;
}


/*----　custom-consultation(オーダーメイド相談)　----*/

.card_support_ex_wrapper_custom {
        gap: 2rem;
}

.card_support_ex_wrapper_custom .nami_left {
    top: -44rem;
}

.card_support_ex_wrapper_custom  .nami_right {
    bottom: -15rem;
}


/*---- portfolio（ポートフォリオ）----*/

.port_fil_sec {
    padding-top: 2rem;
}

.filter_wrapper {
    margin: 0 auto 4rem;
}
.filter_buttons {
    gap: 8px;
}

.filter_label {
    font-size: 1.5rem;
}

.filter_buttons_all .filter_button {
    padding: 0.8rem 0.4rem;
}

.filter_buttons .filter_button a {
    padding: 0.8rem 0.4rem;
}

.portfolio_list {
    flex-direction: column;
    gap: 3.2rem;
}

.portfolio_item {
    width: 100%;
}

.item_title {
    font-size: 1.6rem;
    margin-bottom: 1.8rem;
}

/*---- portfolio（ポートフォリオ詳細）----*/

.c_breadcrumb_wrapper {

}

.c_breadcrumb_wrapper {
    margin-top: 6.8rem;
    height: 2.2rem;
    padding: 0;
}

.c_breadcrumb a {
    font-size: 1.2rem;
}

.single_item {
    align-items: flex-start;
}

.item_header_details {
    margin-top: 3.2rem;
}

.item_title_details {
    font-size: 2rem;
}

.item_details_eyecatch img {
    margin: 3.2rem 0 2rem;
}


.rtoc-mokuji-content #rtoc-mokuji-title.rtoc_left {
    padding: 2rem 2.4rem !important;
}

#rtoc-mokuji-title span {
    font-size: 1.6rem;
}
#rtoc-mokuji-title span::before {
    width: 2.2rem;
    height: 2.2rem;
}

.rtoc-mokuji-content .rtoc-mokuji.level-1 {
    padding-top: .8rem;
}


.rtoc-mokuji-content .rtoc-mokuji.level-1 li {
    font-size: 14rem;
}

.single_content h2 {
    margin: 4rem 0 3.2rem;
}

.single_content h3 {
    margin: 3.2rem 0 2.4rem;
}

.single_item_list {
    padding: 8rem 2rem;
}

.btn_back_s {
    margin-top: 6rem;
    width: 100%;
}

.btn_back_s button {
    width: 100%;
}

.btn_more {
    width: 100%;
}


/*----  byobu_blog(屏風屋ブログ) ----*/
.gap_80 {
    gap: 6rem;
}

.padding_btm_180 {
    padding-bottom: 12rem;
}

/*----  byobu_blog(屏風屋ブログ詳細) ----*/


/*----  company（会社概要） ----*/

.privacypolicy_head {
    margin-top: 2rem;
}

.vison {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.4rem;
    gap: 3.2rem
}

.vison h4 {
    font-size: 2rem;
    margin-bottom: 0;
}

.vison_p {
    gap: 1.4rem;
}

.message_wrapper {
    width: 100%;
    gap: 4rem;
}

.message_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 2.4rem;
}

.message_left img {
    width: 28rem;
}

.carreer {
    width: 100%;
}

.carreer h5 {
    font-size: 1.6rem;
}

.carreer p {
    font-size: 1.4rem;
}

.message_right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.message_right h4 {
    font-size: 2.4rem;
    text-align: center;
}


.message_right p {
    font-size: 1.4rem;
}


.ceo {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-items: flex-end;
    width: 100%;
    margin-top: 4rem;
}

.ceo p {
    font-size: 1.2rem;
    width: 22.8rem;
}
.ceo img {
    width: 22.8rem;
}

.company_info_item {
    gap: 3rem;
    padding: 1.6rem 0;
}

.company_info_item p {
    font-size: 1.4rem;
}

.company_info_item ul {
    align-items: center;
    flex: 1;
}

.company_info_item a {
    margin-top: 2rem;
}

.googlemap {
    height: 18.8rem;
    margin-top: 5.4rem;
}

.history {
    padding: 0 2rem 12rem;
}



/*----  helpful-information（お役立ち情報） ----*/
.info_inner {
    gap: 4.8rem;
    margin: 8rem 0 6rem;
}

.privacypolicy_title h3 {
    font-size: 1.6rem;
}

.privacypolicy_content p {
    font-size: 1.4rem;
}


.helpfui_info {
    padding: 8rem 0 12rem;
    gap: 3.2rem;
    z-index: 0;
}

.nami_big_img  {
    display: none;
}

.nami_img_sp_left,
.nami_img_sp_right {
    display: block;
    position: absolute;
}

.nami_img_sp_left {
    width: 18.6rem;
    bottom: -1rem;
    left: 0;
}

.nami_img_sp_right {
    width: 25.7rem;
    top: 0;
    right: 0;
}

.nami_img_sp_left img,
.nami_img_sp_right img {
    width: 100%;
}



/*----  helpful-information（お役立ち情報） ----*/

.card_link_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.card_link_wrapper a {
    width: 100%;
}

.card_link {
    padding: 1.6rem 1.2rem;
}

.link_area p {
    font-size: 1.5rem;
}

.faq_ttl_box {
    padding: 8rem 0 3.2rem;
}








/*----  faq（よくある質問） ----*/

.accordion_item {
    margin-bottom: 1.2rem;
}

.accordion_header {
    padding: 1.6rem;
}

.question_head p {
    margin-right: 1.2rem;
}

.question {
    margin-left: 2rem;
}

.accordion_content {
    padding: 0 1.6rem;
}
.accordion_item.active .accordion_content {
    padding: 1.6rem 1.6rem;
}

.answer_head p {
    margin-right: 1.2rem;
}

.answer {
    margin-left: 2rem;
}



/*----  プライバシーポリシー ----*/
.privacypolicy_inner {
    margin: 8rem 0 12rem;
}


/*----  お問い合わせ ----*/

.inquiry_head {
    padding-top: 2rem;
}

.inquiry_message .container {
    padding: 8rem 0 0;
}

.contact_ul {
    font-weight: 500;
}

.contact_item {
    padding-left: 2.8rem;
}

.contact_item::before {
    top: .9rem;
}

.contact_form form {
    font-size: 1.4rem;
    gap: 2rem;
    padding: 0;
}

.contact_form .CF7_req {
    font-size: 1rem;
}

.form_pri_ck {
    font-size: 1.3rem;
    letter-spacing: 0;
    margin-top: 0;
}

.privacy-check {
    margin-top: 1.6rem;
}

.privacy-check .wpcf7-list-item-label {
    font-size: 13px;
    padding-left: 24px;
}

.privacy-check .wpcf7-list-item-label::before {
    top: 2px;
    width: 1.6rem;
    height: 1.6rem;
}


.contact_form .form_btn {
    width: 100%;
}

.contact_form input[type="submit"] {
    width: 100%;
}


/*----  資料ダウンロード ----*/

.download_head {
    padding: 2rem 0 0;
}

.dl_hd_left {
    width: 100%;
}

.dl_hd_right h4 {
    font-size: 1.6rem;
    margin-bottom: 2.4rem;
}



.dl_hd_right_group {
    font-size: 1.4rem;
}

.dl_hd_right_group ul li {
    font-weight: 500;
}

.dl_hd_right_group ul li::before {
    top: .9rem;
}


.contact_form.padding80 {
    padding-top: 6rem;
}















}