@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Oswald:wght@200..700&display=swap'); html {
    font-size: 62.5%;
    overflow-x: hidden;
}

.sp_only {
    display: none;
}

@media screen and (min-width: 751px) {
    #fv_sp {
        display: none;
    }
}

@media screen and (max-width: 750px) {
    .pc_only {
        display: none !important;
    }

    .sp_only {
        display: block;
    }
}

:root {
    --g1: #2A2A2A;
    --colorB: #93632A;
}

/* <weight>: Use a value from 200 to 900 */
body {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #494949;
}

a {
    text-decoration: none;
    color: var(--g1, #2A2A2A);
}

.link:after {
    position: absolute;
    bottom: -3px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: var(--colorB, #93632A);
    ; -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.link:hover::after {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

#top_first {
    display: flex;
    position: relative;
}

#top_first header {
    background-color: #FAFAFA;
}

#top_first header .inner {
    width: 220px;
    max-height: 810px;
}

#top_first header .inner ul {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#top_first header .inner ul li:nth-child(1) {
    margin-top: 100px;
}

#top_first header .inner ul li:nth-child(1) a {
}

#top_first header .inner ul li:nth-child(1) a img {
    width: 95px;
}

#top_first header .inner ul li:nth-child(2) {
    margin-top: 45px;
}

#top_first header .inner ul li {
    margin-top: 15px;
}

#top_first header .inner ul li.insta {
    margin-top: 64px;
}

#top_first header .inner ul li a {
    font-size: 1.4rem;
    line-height: 140%;
    position: relative;
}

#top_first header .inner ul li a:hover {
    color: var(--colorB, #93632A);
    ; }

#top_first header .inner ul li a img {
}

#top_first header .inner ul li a:hover img {
    opacity: 70%;
}

#top_first header .inner ul li.insta a img {
    width: 40px;
}

#top_first .fv_area {
    position: relative;
    width: calc(100% - 220px);
}

#top_first .fv_area .slider {
}

#top_first .fv_area .slider-mv {
}

#top_first .fv_area .p-top-mv__swiper {
}

#top_first .fv_area #box {
}

#top_first .fv_area .swiper-slide {
}

#top_first .fv_area .swiper-slide .slide-img {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 7s ease;
}



/* 再生時にズームさせる */
#top_first .fv_area .swiper-slide-active .slide-img {
    transform: scale(1.03);
}


#top_first .fv_area .swiper-slide .slide-img.sl1 {
    background-image: url('../img/fv1.jpg');
}

#top_first .fv_area .swiper-slide .slide-img.sl2 {
    background-image: url('../img/fv2.jpg');
}

#top_first .fv_area .swiper-slide .slide-img.sl3 {
    background-image: url('../img/fv3.jpg');
}

#top_first .fv_area .swiper-slide .slide-img.sl4 {
    background-image: url('../img/fv4.jpg');
}

#top_first .fv_area .fv_text {
    position: absolute;
    top: 50%;
    right: 5.8%;
    transform: translateY(-50%);
}

#top_first .fv_area .fv_text img {
    width: 462px;
    height: auto;
    display: block;
}

#top_first .top_bore_bt {
    position: absolute;
    bottom: 30px;
    right: 30px;
}

#top_first .top_bore_bt a {
}

#top_first .top_bore_bt a:hover img {
    opacity: 70%;
}

#top_first .top_bore_bt img {
    width: 148px;
}

#top_first .fv_area {
    position: relative;
    z-index: 1;
}

/* スライダーを一番奥へ */
#top_first .fv_area .p-top-mv__swiper {
    position: relative;
    z-index: 1;
}

/* テキスト → 前面 */
#top_first .fv_area .fv_text {
    position: absolute;
    z-index: 10;
}

/* ボタン → 前面 */
#top_first .fv_area .top_bore_bt {
    position: absolute;
    z-index: 10;
}

/* 位置設定（1440px時は左60pxに収まる） */
.hamburger {
    position: fixed;
    top: 40px;
    left: 60px;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border: 1px solid var(--a1, #494949);
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 27px;
    /* 指定どおり */
    cursor: pointer;
    z-index: 999;
}

/* hover で背景100% */
.hamburger:hover {
    background: rgba(255, 255, 255, 1);
}

/* 線の基本形 */
.hamburger span {
    display: block;
    width: 46px;
    height: 2px;
    background: #494949;
    transition: 0.3s ease;
    /* 3本の間隔16px → margin-bottom:16px */
    margin-bottom: 16px;
}

/* 最後の線は余白不要 */
.hamburger span:last-child {
    margin-bottom: 0;
}

/* 開いたときのアニメーション（×印へ変形） */
.hamburger.active span:nth-child(1) {
    transform: translateY(18px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-18px) rotate(-45deg);
}

.hamburger {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.hamburger.show {
    opacity: 1;
    pointer-events: auto;
}

.mask {
    position: fixed;
    inset: 0;
    background: rgba(160, 167, 171, 0.5);
    /* #A0A7AB 50% */
    z-index: 900;
    /* ハンバーガーの下、内容の上 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* active のときだけマスクON */
.hamburger.active ~ .mask {
    opacity: 1;
    pointer-events: auto;
}

html.no_scroll, body.no_scroll {
    overflow: hidden;
}

/* ======== Side menu ======== */
/* ======== Side menu（フェードイン仕様） ======== */
.side_menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    background: #FFFFFF;
    z-index: 950;
    /* フェード用 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    overflow-y: auto;
    padding-bottom: 120px;
}

.side_menu.active {
    opacity: 1;
    pointer-events: auto;
}

.side_menu .menu_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 172px;
}

.side_menu .menu_list li:nth-child(1) {
}

.side_menu .menu_list li:nth-child(1) a {
}

.side_menu .menu_list li:nth-child(1) a img {
    width: 95px;
}

.side_menu .menu_list li:nth-child(2) {
    margin-top: 45px;
}

.side_menu .menu_list li {
    margin-top: 15px;
}

.side_menu .menu_list li.insta {
    margin-top: 64px;
}

.side_menu .menu_list li a {
    font-size: 1.4rem;
    line-height: 140%;
    position: relative;
}

.side_menu .menu_list li a:hover {
    color: var(--colorB, #93632A);
}

.side_menu .menu_list li a img {
}

.side_menu .menu_list li a:hover img {
    opacity: 70%;
}

.side_menu .menu_list li.insta a img {
    width: 40px;
}

/* mask */
.mask {
    position: fixed;
    inset: 0;
    background: rgba(160, 167, 171, 0.5);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mask.active {
    opacity: 1;
    pointer-events: auto;
}

main {
}

main .top_concept {
    width: 100%;
    padding-left: clamp(24px, 7.8%, 112px);
    padding-right: clamp(24px, 7.8%, 112px);
    box-sizing: border-box;
}

main .top_concept .inner {
    width: 100%;
    margin: 180px auto 0;
max-width: 1218px;
}

main .top_concept .main_img {
}

main .top_concept .main_img img {
    width: 100%;
}

main .top_concept .row {
    margin-top: 40px;
    display: flex;
}

main .top_concept .row .text {
    flex: 1 1 50%;
}

main .top_concept .row .text h2 {
    color: var(--a1, #494949);
}

main .top_concept .row .text h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

main .top_concept .row .text h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

main .top_concept .row .text h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

main .top_concept .row .text p {
    margin-top: 16px;
    color: var(--a1, #494949);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 180%;
    max-width: 526px;
}

main .top_concept .row .img {
    flex: 1 1 50%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

main .top_concept .row .img img {
    width: calc((100% - 2%) / 2);
    height: auto;
    display: block;
}

main .top_news {
}

main .top_news .inner {
    width: 100%;
    max-width: 1218px;
}

main .top_news {
    position: relative;
    width: 100%;
    padding: 0 clamp(24px, 7.8%, 112px);
    box-sizing: border-box;
    overflow: hidden;
    margin: 180px auto 0;
    display: flex;
    justify-content: center;
}

/* 背景画像部分：右端ぴったり配置 */
main .top_news::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 70.6vw;
    /* 1016 / 1440 ≒ 0.706 → 画面幅に対して比率指定 */
    height: 100%;
    background: url("../img/top_news_back.jpg") no-repeat right center / cover;
    z-index: 0;
}

/* コンテンツ */
main .top_news .inner {
    position: relative;
    z-index: 1;
    /* 背景の上に出す */
}

main .top_news .row {
    display: flex;
    align-items: flex-start;
    margin-top: 70px;
    margin-bottom: 70px;
}

main .top_news .row .img {
    position: relative;
    z-index: 1;
    width: 38.5vw;
    /* 554 / 1440 = 38.5% */
}

main .top_news .row .img img {
    width: 100%;
    height: auto;
    display: block;
}

main .top_news .row .text {
    flex: 1 1 auto;
    margin-left: 5%;
    width: 44vw;
}

main .top_news .row .text h2 {
    color: var(--a1, #494949);
}

main .top_news .row .text h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

main .top_news .row .text h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

main .top_news .row .text h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

main .top_news .row .text ul {
    margin-top: 20px;
}

main .top_news .row .text ul li+li {
    margin-top: 8px;
}

main .top_news .row .text ul li a {
    color: var(--a1, #494949);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 180%;
    display: flex;
    justify-content: flex-start;
}

main .top_news .row .text ul li a:hover {
    color: #93632A;
}

main .top_news .row .text ul li a .date {
    width: 8em;
}

main .top_news .row .text ul li a .title {
    width: calc( 100% - 8em);
    word-break: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

main .top_news .row .text .bt_box {
    margin-top: 20px;
}

main .top_news .row .text .bt_box a {
    transition: 0.3s ease 0s;
    padding: 20px 10px;
    display: flex;
    border: 1px solid var(--a1, #494949);
    background: var(--colorA, #DABD9A);
    font-size: 14px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
    align-items: center;
    justify-content: center;
}

main .top_news .row .text .bt_box a:hover {
    background: #F3EAE0;
}

main .top_works {
    width: 100%;
    padding-left: clamp(24px, 7.8%, 112px);
    padding-right: clamp(24px, 7.8%, 112px);
    box-sizing: border-box;
}

main .top_works .inner {
    width: 100%;
    margin: 180px auto 0;
}

main .top_works .inner h2 {
    color: var(--a1, #494949);
}

main .top_works .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

main .top_works .inner h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

main .top_works .inner h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

main .top_works {
    width: 100%;
    padding-left: clamp(24px, 7.8%, 112px);
    padding-right: clamp(24px, 7.8%, 112px);
    box-sizing: border-box;
}

main .top_works .inner {
    width: 100%;
    margin: 180px auto 0;
max-width: 1218px;
}

main .top_works ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 40px;
    /* gap: 80px 32px; */
    /* 縦80px・横32px */
}

/* --- 基本：3カラム（1440px基準） --- */
main .top_works ul li {
    width: calc((100% - 2.6% * 2) / 3);
    margin-right: 2.6%;
    margin-bottom: 80px;
    box-sizing: border-box;
}

@media screen and (min-width: 1024px) {
    main .top_works ul li:nth-child(3n) {
        margin-right: 0;
    }
}

/* --- 画像の比率を維持しつつ伸縮 --- */
main .top_works ul li a .img_in {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* 比率固定で可変 */
    overflow: hidden;
}

main .top_works ul li a .img_in img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

main .top_works ul li a:hover .img_in img {
    transform: scale(1.05);
}

/* --- タブレット：2カラム --- */
@media screen and (max-width: 1024px) {
    main .top_works ul li {
        max-width: 750px;
        width: calc(50% - 1.2%);
        margin-right: 0;
    }

    main .top_works ul li:nth-child(odd) {
        margin-right: 2.4%;
    }
}

/* --- スマホ：1カラム --- */
@media screen and (max-width: 750px) {
    main .top_works ul li {
        flex: 1 1 100%;
        max-width: 750px;
    }
}

main .top_works ul li a {
}

main .top_works ul li a:hover h3 {
    color: #93632A;
}

main .top_works ul li a .img_in {
}

main .top_works ul li a .img_in img {
}

main .top_works ul li a .cat {
    margin-top: 8px;
    display: inline-flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: rgba(218, 189, 154, 0.25);
    font-size: 12px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
    /* 16.8px */
}

main .top_works ul li a h3 {
    color: var(--a1, #494949);
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

main .top_works ul li a .tag {
    color: var(--a1, #494949);
    margin-top: 7px;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 14px */
    position: relative;
}

main .top_works ul li a .tag span:not(:last-child)::after {
    content: "|";
    display: inline-block;
    margin: 0 0.6em;
    color: #A0A7AB;
}

main .top_works .bt_box {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

main .top_works .bt_box a {
    transition: 0.3s ease 0s;
    padding: 20px 10px;
    display: flex;
    border: 1px solid var(--a1, #494949);
    background: var(--colorA, #DABD9A);
    font-size: 14px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
    align-items: center;
    justify-content: center;
    max-width: 592px;
    width: 100%;
}

main .top_works .bt_box a:hover {
    background: #F3EAE0;
}

main .top_recruit {
    width: 100%;
    padding-left: clamp(24px, 7.8%, 112px);
    padding-right: clamp(24px, 7.8%, 112px);
    box-sizing: border-box;
    background-image: url('../img/top_recruit.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    height: 560px;
}

main .top_recruit .inner {
    width: 100%;
    margin: 180px auto 0;
max-width: 1218px;
}

main .top_recruit h2 {
    padding-top: 120px;
    color: var(--a1, #494949);
}

main .top_recruit h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

main .top_recruit .inner h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

main .top_recruit h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

main .top_recruit p {
    margin-top: 15px;
    color: var(--a1, #494949);
    max-width: 488px;
    width: 100%;
    font-size: 1.6rem;
    line-height: 180%;
    /* 28.8px */
}

main .top_recruit .bt_box {
    margin-top: 20px;
    display: flex;
}

main .top_recruit .bt_box a {
    transition: 0.3s ease 0s;
    padding: 20px 10px;
    display: flex;
    border: 1px solid var(--a1, #494949);
    background: var(--colorA, #DABD9A);
    font-size: 14px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
    align-items: center;
    justify-content: center;
    max-width: 488px;
    width: 100%;
}

main .top_recruit .bt_box a:hover {
    background: #F3EAE0;
}

main .top_company_info {
    width: 100%;
    padding-left: clamp(24px, 7.8%, 112px);
    padding-right: clamp(24px, 7.8%, 112px);
    box-sizing: border-box;
}

main .top_company_info .inner {
    width: 100%;
    margin: 180px auto 0;
max-width: 1218px;
}

main .top_company_info .row {
    display: flex;
    align-items: flex-start;
}

main .top_company_info .img {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    max-width: calc( 100% - 34% );
    margin-right: 1.9%;
}

main .top_company_info .img img {
    width: calc((100% - 2%) / 2);
    height: auto;
    display: block;
    margin-right: 1%;
}

main .top_company_info .img iframe {
    width: calc((100% - 2%) / 2);
    height: auto;
    display: block;
}

main .top_company_info .img .bt_box.sp_only {
    display: none;
}

@media screen and (max-width: 750px) {
    main .top_company_info .img .bt_box.sp_only {
        display: block;
    }

    main .top_company_info .img .bt_box.sp_only a {
    }

    main .top_company_info .img .bt_box.sp_only a:hover {
    }
}

main .top_company_info .text {
    flex: 1 1 50%;
}

main .top_company_info .text h2 {
    padding-top: 40px;
    color: var(--a1, #494949);
}

main .top_company_info .text h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

main .top_company_info .row .text h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

main .top_company_info .text h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

main .top_company_info .text .bt_box.pc_only {
    margin-top: 30px;
    display: flex;
}

main .top_company_info .text .bt_box.pc_only a {
    transition: 0.3s ease 0s;
    padding: 20px 10px;
    display: flex;
    border: 1px solid var(--a1, #494949);
    background: var(--colorA, #DABD9A);
    font-size: 14px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
    align-items: center;
    justify-content: center;
    max-width: 384px;
    width: 100%;
}

main .top_company_info .text .bt_box.pc_only a:hover {
    background: #F3EAE0;
}

main .top_contact {
    width: 100%;
    padding-left: clamp(24px, 22.2%, 320px);
    padding-right: clamp(24px, 22.2%, 320px);
    box-sizing: border-box;
    background-image: url(../img/footer_back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    padding-bottom: 90px;
}

main .top_contact .inner {
    width: 100%;
    margin: 180px auto 0;
    max-width: 800px;
}

main .top_contact h2 {
    color: var(--a1, #494949);
    padding-top: 90px;
}

main .top_contact h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

main .top_contact h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

main .top_contact h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

main .top_contact p {
    color: var(--a1, #494949);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
    margin-top: 20px;
}

main .top_contact .tel {
    color: var(--a1, #494949);
    font-family: Oswald;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 70.248px;
    /* 219.524% */
}

main .top_contact .fax {
    color: var(--a1, #494949);
    font-family: Oswald;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 70.248px;
    /* 219.524% */
}

main .top_contact .bt_box {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

main .top_contact .bt_box a {
    transition: 0.3s ease 0s;
    padding: 20px 10px;
    display: flex;
    border: 1px solid var(--a1, #494949);
    background: var(--colorA, #DABD9A);
    font-size: 14px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    width: 100%;
}

main .top_contact .bt_box a:hover {
    background: #F3EAE0;
}

footer {
    width: 100%;
    padding-left: clamp(24px, 7.8%, 112px);
    padding-right: clamp(24px, 7.8%, 112px);
    box-sizing: border-box;
}

footer .inner {
    width: 100%;
    margin: 80px auto 0;
    max-width: 1080px;
}

footer .row {
    display: flex;
    align-items: center;
}

footer .foot_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

footer .foot_logo a {
}

footer .foot_logo a img {
    width: 144px;
    margin-right: 18px;
}

footer .foot_logo a:hover img {
    opacity: 70%;
}

footer .foot_logo img {
    width: 147px;
}

footer .address {
    margin-right: 105px;
}

footer .address p {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 140%;
}

footer .foot_nav {
    display: flex;
    gap: 80px;
}

footer .foot_nav ul {
}

footer .foot_nav ul li:not(:last-child) {
    margin-bottom: 20px;
}

footer .foot_nav ul li a {
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

footer .foot_nav ul li a:hover {
    color: #93632A;
}

footer .foot_insta {
    margin-left: 70px;
    align-self: flex-start;
}

footer .foot_insta a {
}

footer .foot_insta a img {
    width: 40px;
}

footer .copy {
    margin: 60px auto 50px;
    color: var(--a1, #494949);
    text-align: center;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 16.8px */
    width: 100%;
    max-width: 1080px;
}

@media screen and (max-width: 1180px) {
    footer .address {
        margin-right: 5%;
    }

    footer .foot_nav {
        display: flex;
        gap: 20px;
    }

    footer .foot_insta {
        margin-left: 5%;
        align-self: flex-start;
    }
}

@media screen and (max-width: 750px) {
    #top_first_sp {
        width: 100%;
        height: 92px;
        background: #FFF;
    }

    #top_first_sp .inner {
        padding: 14px;
    }

    #top_first_sp .inner a img {
        max-width: 148px;
        width: 100%;
    }

    main .top_concept .row {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
    }

    main .top_concept .row .text h2 .eng {
        position: relative;
        display: inline-block;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_concept .row .text h2 .eng::after {
        content: "";
        display: block;
        width: 60px;
        height: 2px;
        background-color: #494949;
        margin-top: 4px;
    }

    main .top_concept .row .text h2 .ja {
        margin-top: 10px;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_concept .row .text p {
        margin-top: 16px;
        color: var(--a1, #494949);
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 180%;
        max-width: 100%;
    }

    main .top_concept .row .img {
        margin-top: 16px;
    }

    main .top_news {
        position: relative;
        width: 100%;
        padding: 0 clamp(16px, 4.27vw, 112px);
        box-sizing: border-box;
        overflow: unset;
        margin: 180px auto 0;
    }

    main .top_news .row {
        display: flex;
        align-items: flex-start;
        margin-top: 70px;
        margin-bottom: 70px;
        flex-direction: row-reverse;
    }

    main .top_news::before {
        content: "";
        position: absolute;
        top: 10%;
        right: 0;
        width: 100%;
        height: 100%;
        background: url("../img/top_news_back_sp.jpg") no-repeat right center / cover;
        z-index: 0;
    }

    main .top_news .row .img {
        position: absolute;
        z-index: 1;
        width: 61.5vw;
        margin-top: -65px;
        right: -5vw;
    }

    main .top_news .row .text {
        flex: 1 1 auto;
        margin-left: 0;
        width: 100%;
        margin-top: 100px;
    }

    main .top_news .row .text h2 .eng {
        position: relative;
        display: inline-block;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_news .row .text h2 .eng::after {
        content: "";
        display: block;
        width: 60px;
        height: 2px;
        background-color: #494949;
        margin-top: 4px;
    }

    main .top_news .row .text h2 .ja {
        margin-top: 10px;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_news .row .text ul li a {
        color: var(--a1, #494949);
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 180%;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
    }

    main .top_news .row .text ul li a .title {
        width: 100%;
        word-break: normal;
        white-space: normal;
        overflow: unset;
        text-overflow: unset;
        display: block;
    }

    main .top_news .row .text ul li+li {
        margin-top: 32px;
    }

    main .top_news .row .text .bt_box {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        padding-bottom: 60px;
    }

    main .top_news .row .text .bt_box a {
        transition: 0.3s ease 0s;
        padding: 17px 5px;
        display: flex;
        border: 1px solid var(--a1, #494949);
        background: var(--colorA, #DABD9A);
        font-size: 1.4rem;
        color: var(--a1, #494949);
        font-weight: 400;
        line-height: 140%;
        align-items: center;
        justify-content: center;
        width: 68vw;
    }

    .hamburger {
        position: fixed;
top: 4.2vw;
        right: 4.2vw;
        width: 60px;
        height: 60px;
        box-sizing: border-box;
        border: 1px solid var(--a1, #494949);
        background: rgba(255, 255, 255, 0.5);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px 6px;
        cursor: pointer;
        z-index: 999;
        left: auto;
    }

    .hamburger span {
        display: block;
        width: 28px;
        height: 2px;
        background: #494949;
        transition: 0.3s ease;
        margin-bottom: 8px;
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
transition: none;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }

    .side_menu {
        width: 100vw;
    }

    .side_menu .menu_list li:nth-child(1) {
        position: absolute;
        top: 3.47vw;
        left: 3.0vw;
        margin-top: 0;
    }

    .side_menu .menu_list li:nth-child(1) a img {
        width: 68px;
    }

    .side_menu .menu_list {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 140px;
        position: relative;
        margin-top: 0;
    }

    .side_menu .menu_list li:nth-child(2) {
        margin-top: 0;
    }

    .side_menu .menu_list li {
        margin-top: 40px;
    }

    .side_menu .menu_list li.insta a img {
        width: 32px;
    }

    #fv_sp .fv_area .swiper-slide .slide-img {
        width: 100%;
        height: 403px;
        background-size: cover;
        background-position: left center;
        transform: scale(1);
        transition: transform 4s ease;
    }

    /* 再生時にズームさせる */
    #fv_sp .fv_area .swiper-slide-active .slide-img {
        transform: scale(1.03);
    }

    #fv_sp .fv_area .swiper-slide .slide-img.sl1 {
        background-image: url('../img/fv1_sp.jpg');
    }

    #fv_sp .fv_area .swiper-slide .slide-img.sl2 {
        background-image: url('../img/fv2_sp.jpg');
    }

    #fv_sp .fv_area .swiper-slide .slide-img.sl3 {
        background-image: url('../img/fv3_sp.jpg');
    }

    #fv_sp .fv_area .swiper-slide .slide-img.sl4 {
        background-image: url('../img/fv4_sp.jpg');
    }

    #fv_sp .fv_area .fv_text {
        position: absolute;
        top: 35%;
        right: 5.8%;
        transform: translateY(-50%);
    }

    #fv_sp .fv_area .fv_text img {
        width: 175px;
        height: auto;
        display: block;
    }

    #fv_sp .top_bore_bt {
        position: absolute;
        bottom: 4.27vw;
        right: 4.27vw;
    }

    #fv_sp .top_bore_bt a {
    }

    #fv_sp .top_bore_bt a:hover img {
        opacity: 70%;
    }

    #fv_sp .top_bore_bt img {
        width: 100px;
    }

    #fv_sp .fv_area {
        position: relative;
        z-index: 1;
    }

    /* スライダーを一番奥へ */
    #fv_sp .fv_area .p-top-mv__swiper {
        position: relative;
        z-index: 1;
    }

    /* テキスト → 前面 */
    #fv_sp .fv_area .fv_text {
        position: absolute;
        z-index: 10;
    }

    /* ボタン → 前面 */
    #fv_sp .fv_area .top_bore_bt {
        position: absolute;
        z-index: 10;
    }

    main .top_concept .inner {
        width: 100%;
        margin: 32px auto 0;
    }

    main .top_works .inner {
        width: 100%;
        margin: 120px auto 0;
    }

    main .top_works {
        width: 100%;
        box-sizing: border-box;
        padding-left: clamp(16px, 4.27vw, 112px);
        padding-right: clamp(16px, 4.27vw, 112px);
    }

    main .top_works .inner h2 .eng {
        position: relative;
        display: inline-block;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_works .inner h2 .eng::after {
        content: "";
        display: block;
        width: 60px;
        height: 2px;
        background-color: #494949;
        margin-top: 4px;
    }

    main .top_works .inner h2 .ja {
        margin-top: 8px;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_works ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 24px;
        /* gap: 80px 32px; */
        flex-direction: column;
    }

    main .top_works ul li:nth-child(odd) {
        margin-right: 0;
    }

    main .top_works ul li {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
        margin-bottom: 40px;
    }

    main .top_works ul li a .cat {
        margin-top: 8px;
        display: inline-flex;
        padding: 4px 16px;
        justify-content: center;
        align-items: center;
        border-radius: 6px;
        background: rgba(218, 189, 154, 0.25);
        font-size: 1.2rem;
        color: var(--a1, #494949);
        font-weight: 400;
        line-height: 140%;
    }

    main .top_works ul li a h3 {
        color: var(--a1, #494949);
        margin-top: 4px;
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 140%;
    }

    main .top_works ul li a .tag {
        color: var(--a1, #494949);
        margin-top: 7px;
        font-size: 1.0rem;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        position: relative;
    }

    main .top_works .bt_box {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        padding-bottom: 120px;
    }

    main .top_works .bt_box a {
        transition: 0.3s ease 0s;
        padding: 17px 5px;
        display: flex;
        border: 1px solid var(--a1, #494949);
        background: var(--colorA, #DABD9A);
        font-size: 1.4rem;
        color: var(--a1, #494949);
        font-weight: 400;
        line-height: 140%;
        align-items: center;
        justify-content: center;
        width: 68vw;
    }

    main .top_recruit {
        width: 100%;
        padding-left: clamp(16px, 4.27vw, 112px);
        padding-right: clamp(16px, 4.27vw, 112px);
        box-sizing: border-box;
        background-image: url('../img/top_recruit_sp.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right top;
        height: auto;
        padding-bottom: 50px;
    }

    main .top_recruit .inner {
        width: 100%;
        margin: 0px auto 0;
    }

    main .top_recruit h2 {
        padding-top: 40px;
        color: var(--a1, #494949);
    }

    main .top_recruit h2 .eng {
        position: relative;
        display: inline-block;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_recruit .inner h2 .eng::after {
        content: "";
        display: block;
        width: 60px;
        height: 2px;
        background-color: #494949;
        margin-top: 4px;
    }

    main .top_recruit h2 .ja {
        margin-top: 10px;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_recruit p {
        margin-top: 10px;
        color: var(--a1, #494949);
        max-width: 60%;
        width: 100%;
        font-size: 1.4rem;
        line-height: 180%;
    }

    main .top_recruit .bt_box {
        margin-top: 48px;
        display: flex;
        justify-content: center;
    }

    main .top_recruit .bt_box a {
        transition: 0.3s ease 0s;
        padding: 17px 5px;
        display: flex;
        border: 1px solid var(--a1, #494949);
        background: var(--colorA, #DABD9A);
        font-size: 1.4rem;
        color: var(--a1, #494949);
        font-weight: 400;
        line-height: 140%;
        align-items: center;
        justify-content: center;
        width: 68vw;
    }

    main .top_company_info .inner {
        width: 100%;
        margin: 120px auto 0;
    }

    main .top_company_info {
        width: 100%;
        padding-left: clamp(16px, 4.27vw, 112px);
        padding-right: clamp(16px, 4.27vw, 112px);
        box-sizing: border-box;
    }

    main .top_company_info .row {
        display: flex;
        align-items: flex-start;
        flex-direction: column-reverse;
    }

    main .top_company_info .text h2 .eng {
        position: relative;
        display: inline-block;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_company_info .row .text h2 .eng::after {
        content: "";
        display: block;
        width: 60px;
        height: 2px;
        background-color: #494949;
        margin-top: 4px;
    }

    main .top_company_info .text h2 .ja {
        margin-top: 8px;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_company_info .img {
        display: flex;
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        flex-direction: column;
        align-items: center;
        row-gap: 10px;
        margin-top: 24px;
    }

    main .top_company_info .img img {
        width: 100%;
        height: auto;
        display: block;
        margin-right: 0;
    }

    main .top_company_info .img iframe {
        width: 100%;
        height: auto;
        display: block;
    }

    main .top_company_info .img .bt_box.sp_only {
        margin-top: 40px;
    }

    main .top_company_info .img .bt_box.sp_only a {
        transition: 0.3s ease 0s;
        padding: 17px 5px;
        display: flex;
        border: 1px solid var(--a1, #494949);
        background: var(--colorA, #DABD9A);
        font-size: 1.4rem;
        color: var(--a1, #494949);
        font-weight: 400;
        line-height: 140%;
        align-items: center;
        justify-content: center;
        width: 68vw;
    }

    main .top_contact {
        width: 100%;
        padding-left: clamp(16px, 4.27vw, 112px);
        padding-right: clamp(16px, 4.27vw, 112px);
        box-sizing: border-box;
        background-image: url(../img/footer_back_sp.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right center;
        padding-bottom: 40px;
    }

    main .top_contact .inner {
        width: 100%;
        margin: 120px auto 0;
        max-width: 100%;
    }

    main .top_contact h2 {
        color: var(--a1, #494949);
        padding-top: 30px;
    }

    main .top_contact h2 .eng {
        position: relative;
        display: inline-block;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_contact h2 .eng::after {
        content: "";
        display: block;
        width: 60px;
        height: 2px;
        background-color: #494949;
        margin-top: 4px;
    }

    main .top_contact h2 .ja {
        margin-top: 8px;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 140%;
    }

    main .top_contact p {
        color: var(--a1, #494949);
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 180%;
        margin-top: 16px;
    }

    main .top_contact .tel {
        color: var(--a1, #494949);
        font-family: Oswald;
        font-size: 2.8rem;
        font-weight: 500;
        line-height: 180%;
    }
    main .top_contact .tel a{
        color: var(--a1, #494949);
    }

    main .top_contact .fax {
        color: var(--a1, #494949);
        font-family: Oswald;
        font-size: 2.8rem;
        font-weight: 500;
        line-height: 180%;
    }

    main .top_contact .bt_box {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    main .top_contact .bt_box a {
        transition: 0.3s ease 0s;
        padding: 17px 5px;
        display: flex;
        border: 1px solid var(--a1, #494949);
        background: var(--colorA, #DABD9A);
        font-size: 1.4rem;
        color: var(--a1, #494949);
        font-weight: 400;
        line-height: 140%;
        align-items: center;
        justify-content: center;
        width: 68vw;
    }

    footer .foot_nav {
        display: none;
    }

    footer .foot_insta {
        display: none;
    }

    footer .foot_logo {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 30px;
        flex-direction: column;
        flex-shrink: 0;
    }

    footer .foot_logo a img {
        width: 39px;
        margin-right: 0;
    }

    footer .foot_logo img {
        width: 40px;
        margin-top: 6px;
    }

    footer .address {
        margin-right: 0;
    }

    footer .address p {
        font-size: 1.0rem;
        font-weight: 400;
        line-height: 140%;
    }

    footer .copy {
        margin: 40px auto 30px;
        color: var(--a1, #494949);
        text-align: center;
        font-size: 1.0rem;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        width: 100%;
        max-width: 100%;
    }
}

/*news  */
#top_first.news .fv_area .swiper-slide .slide-img.sl1 {
    background-image: url('../img/news_fv.jpg');
}

#top_first .fv_area .fv_text {
    right: 9.8%;
}

#top_first.sec .fv_area .fv_text h1 {
    display: flex;
    flex-direction: column;
}

#top_first.sec .fv_area .fv_text h1 .en {
    color: var(--a1, #494949);
    text-align: right;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    /* 33.6px */
}

#top_first.sec .fv_area .fv_text h1 .ja {
    color: var(--a1, #494949);
    text-align: right;
    font-size: 4.0rem;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    /* 56px */
}

.breadcrumb {
    padding-left: 220px;
    /* 左に220px余白 */
    margin-top: 40px;
}

.breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    /* gapで余白を作らず、矢印だけで区切る */
}

.breadcrumb li {
    color: #494949;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    display: flex;
    align-items: center;
}

/* 区切りの矢印 */
.breadcrumb li + li::before {
    content: "〉";
    margin: 0 0px 0 8px;
    color: #494949;
}

/* リンク時 */
.breadcrumb a {
    color: #93632A;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #DABD9A;
}

.news_list {
    padding-left: 220px;
    /* パンくずと同じ左余白 */
}

.news_list .inner {
    max-width: 1440px;
    margin: 0 auto;
}

.news_list .row {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-top: 90px;
}

/* ---------- content ---------- */
.news_list .content {
    /* 220px + 100px 左に空けた位置からスタート */
    margin-left: 100px;
    flex: 0 1 calc(100% - (100px + 100px + 108px + 112px));
    /* ↑ = 左の100px + 右の100px + side幅108px + 右余白112px */
}

.news_list .content ul {
    width: 100%;
    max-width: 100%;
}

.news_list .content li {
    margin-bottom: 40px;
}

.news_list .content a {
    display: block;
    text-decoration: none;
    color: var(--a1, #494949);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
    padding-bottom: 40px;
    border-bottom: 1px solid #494949;
}

.news_list .content a:hover {
    color: #93632A;
}

.news_list .content .date {
    margin-bottom: 6px;
}

.news_list .content .title {
    margin-top: 8px;
}

/* ---------- side ---------- */
.news_list .side {
    width: 108px;
    margin-left: 100px;
    /* content の右100px余白 */
}

.news_list .side_title {
    color: var(--a1, #494949);
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 120% */
    border-bottom: 1px solid #494949;
    margin-bottom: 16px;
}

.news_list .side ul li {
    margin-bottom: 24px;
}

.news_list .side a {
    color: var(--a1, #494949);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
}

.news_list .side a:hover {
    color: #93632A;
}

.news_detail {
    padding-left: 220px;
    /* パンくずと同じ左余白 */
}

.news_detail .inner {
    max-width: 1440px;
    margin: 0 auto;
}

.news_detail .content {
    /* 220px + 100px 左に空けた位置からスタート */
    margin-left: 100px;
    flex: 0 1 calc(100% - (100px + 100px + 108px + 112px));
    /* ↑ = 左の100px + 右の100px + side幅108px + 右余白112px */
}

.news_detail {
}

.news_detail .row {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-top: 100px;
}

.news_detail .title_box {
}

.news_detail .title_box .date {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
    /* 33.6px */
}

.news_detail .title_box h1 {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 140%;
    /* 44.8px */
}

.news_detail .content_box {
    margin-top: 80px;
}

.news_detail .content_box p {
    font-size: 16px;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
}

.news_detail .content_box img {
    max-width: 100%;
    width: 100%;
    margin: 24px auto;
height: auto;
}

.news_detail .next_back {
    margin-top: 120px;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.news_detail .next_back a {
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.news_detail .next_back a:hover {
    color: #93632A;
}

.news_detail .next_back .bt {
    margin-top: 80px;
}

.news_detail .bt_box {
    margin-top: 80px;
}

.news_detail .bt_box a {
    transition: 0.3s ease 0s;
    padding: 20px 10px;
    display: flex;
    border: 1px solid var(--a1, #494949);
    background: var(--colorA, #DABD9A);
    font-size: 14px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
    align-items: center;
    justify-content: center;
}

.news_detail .bt_box a:hover {
    background: #F3EAE0;
}

#top_first.works .fv_area .swiper-slide .slide-img.sl1 {
    background-image: url('../img/works_fv.jpg');
}

.works_list {
    width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}

.works_list .inner {
    width: 100%;
    margin: 80px auto 0;
    max-width: 1216px;
}

.works_list .cat_box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.works_list .cat_box h2 {
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 120% */
}

.works_list .cat_box > ul {
    display: flex;
    margin-top: 24px;
    gap: 24px;
}

.works_list .cat_box > ul li {
}

.works_list .cat_box > ul li.active a {
    background: rgba(218, 189, 154, 0.25);
}

.works_list .cat_box > ul li a {
    color: var(--a1, #494949);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
    border-radius: 6px;
    background: rgba(218, 189, 154, 0.10);
    display: inline-flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
}

.works_list .cat_box > ul li a:hover {
    background: rgba(218, 189, 154, 0.25);
}

.works_list .inner ul.detail_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 40px;
}

.works_list .inner ul.detail_list li {
    width: calc((100% - 2.6% * 2) / 3);
    margin-right: 2.6%;
    margin-bottom: 80px;
    box-sizing: border-box;
}

@media screen and (min-width: 1024px) {
    .works_list .inner ul.detail_list li:nth-child(3n) {
        margin-right: 0;
    }
}

.works_list .inner ul.detail_list li a {
}

.works_list .inner ul.detail_list .img_in {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    /* 比率固定で可変 */
    overflow: hidden;
}

.works_list .inner ul.detail_list .img_in img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.works_list .inner ul.detail_list li a:hover .img_in img {
    transform: scale(1.05);
}


.works_list .inner ul.detail_list .cat {
    margin-top: 8px;
    display: inline-flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: rgba(218, 189, 154, 0.25);
    font-size: 12px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
}

.works_list .inner ul.detail_list h3 {
    color: var(--a1, #494949);
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
}

.works_list .inner ul.detail_list .tag {
    color: var(--a1, #494949);
    margin-top: 7px;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 14px */
    position: relative;
}

.works_list .inner ul.detail_list li a .tag span:not(:last-child)::after {
    content: "|";
    display: inline-block;
    margin: 0 0.6em;
    color: #A0A7AB;
}

.works_list .next_back {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: -60px;
}

.works_list .next_back a {
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.works_list .next_back a:hover {
    color: #93632A;
}

.works_detail {
    padding-left: 220px;
    /* パンくずと同じ左余白 */
}

.works_detail .inner {
    max-width: 1440px;
    margin: 0 auto;
}

.works_detail .content {
    /* 220px + 100px 左に空けた位置からスタート */
    margin-left: 100px;
    flex: 0 1 calc(100% - (100px + 100px + 108px + 112px));
    /* ↑ = 左の100px + 右の100px + side幅108px + 右余白112px */
}

.works_detail {
}

.works_detail .row {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-top: 100px;
}

.works_detail .title_box {
}

.works_detail .title_box .cat {
    color: var(--a1, #494949);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
    border-radius: 6px;
    background: rgba(218, 189, 154, 0.25);
    display: inline-flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
}

.works_detail .title_box h1 {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 140%;
    /* 44.8px */
    margin-top: 16px;
}

.works_detail .title_box .tag {
    color: var(--a1, #494949);
    margin-top: 17px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 14px */
    position: relative;
}

.works_detail .title_box .tag span:not(:last-child)::after {
    content: "|";
    display: inline-block;
    margin: 0 0.6em;
    color: #A0A7AB;
}

.works_detail .content_box {
    margin-top: 80px;
}

.works_detail .content_box p {
    font-size: 16px;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
}

.works_detail .content_box img {
    max-width: 100%;
    width: 100%;
    margin: 24px auto;
    height: auto;
}

.works_detail .next_back {
    margin-top: 120px;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.works_detail .next_back a {
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.works_detail .next_back a:hover {
    color: #93632A;
}

.works_detail .next_back .bt {
    margin-top: 80px;
}

.works_detail .bt_box {
    margin-top: 80px;
}

.works_detail .bt_box a {
    transition: 0.3s ease 0s;
    padding: 20px 10px;
    display: flex;
    border: 1px solid var(--a1, #494949);
    background: var(--colorA, #DABD9A);
    font-size: 14px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
    align-items: center;
    justify-content: center;
}

.works_detail .bt_box a:hover {
    background: #F3EAE0;
}

#top_first.recruit .fv_area .swiper-slide .slide-img.sl1 {
    background-image: url('../img/recruit_fv.jpg');
}

.recruit_box {
    width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}

.recruit_box .inner {
    width: 100%;
    margin: 160px auto 0;
    max-width: 1216px;
}

/* Message */
.recruit_box .message {
}

.recruit_box .message h2 {
    color: var(--a1, #494949);
    display: flex;
    flex-direction: column;
}

.recruit_box .message h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

.recruit_box .message h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.recruit_box .message h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

.recruit_box .message h3 {
    color: var(--a1, #494949);
    /* H4 */
    font-family: "Noto Serif JP";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    /* 44.8px */
}

.recruit_box .message p {
    color: var(--a1, #494949);
    margin-top: 16px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
}

.recruit_box .message img {
    margin-top: 24px;
    width: 100%;
    max-width: 100%;
}

/* craftsmen（1つ目：職人紹介） */
.recruit_box .craftsmen {
    margin-top: 180px;
}

.recruit_box .craftsmen h2 {
    color: var(--a1, #494949);
    display: flex;
    flex-direction: column;
}

.recruit_box .craftsmen h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

.recruit_box .craftsmen h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.recruit_box .craftsmen h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

.recruit_box .craftsmen .row {
    margin-top: 23px;
    display: flex;
    gap: 32px;
    margin-bottom: 120px;
}

.recruit_box .craftsmen .row .row1 {
    width: calc(50% - 16px);
}

.recruit_box .craftsmen .row img {
    width: 100%;
    max-width: 100%;
}

.recruit_box .craftsmen .row h3 {
    margin-top: 16px;
    color: var(--a1, #494949);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
    /* 33.6px */
}

.recruit_box .craftsmen .row p {
    margin-top: 16px;
    color: var(--a1, #494949);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
}

.recruit_box .craftsmen .row .row2 {
    width: calc(50% - 16px);
}

.recruit_box .craftsmen .row .row2 img {
}

.recruit_box .craftsmen .row .row2 h3 {
}

.recruit_box .craftsmen .row .row2 p {
}

/* craftsmen（2つ目：左官仲間紹介） */
.recruit_box .craftsmen h2:nth-of-type(2) {
}

.recruit_box .craftsmen h2:nth-of-type(2) .eng {
}

.recruit_box .craftsmen h2:nth-of-type(2) .ja {
}

.recruit_box .craftsmen .row:nth-of-type(2) {
}

.recruit_box .craftsmen .row:nth-of-type(2) .row1 {
}

.recruit_box .craftsmen .row:nth-of-type(2) .row1 img {
}

.recruit_box .craftsmen .row:nth-of-type(2) .row1 h3 {
}

.recruit_box .craftsmen .row:nth-of-type(2) .row1 p {
}

.recruit_box .craftsmen .row:nth-of-type(2) .row2 {
}

.recruit_box .craftsmen .row:nth-of-type(2) .row2 img {
}

.recruit_box .craftsmen .row:nth-of-type(2) .row2 h3 {
}

.recruit_box .craftsmen .row:nth-of-type(2) .row2 p {
}

.personality {
    width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}

.personality .inner {
    width: 100%;
    margin: 180px auto 0;
}

.personality .inner h2 {
    color: var(--a1, #494949);
    display: flex;
    flex-direction: column;
}

.personality .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

.personality .inner h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.personality .inner h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

.personality .rows {
    display: flex;
    gap: 32px;
}

.personality .rows .text {
    width: calc(50% - 16px);
    color: var(--a1, #494949);
    /* body1 */
    font-family: "Noto Serif JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
}

.personality .rows .text .text1 {
}

.personality .rows .text .text2 {
    margin-top: 30px;
}

.personality .rows .img {
    width: calc(50% - 16px);
}

.personality .rows .img img {
    max-width: 100%;
    width: 100%;
}

.requirements {
    width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}

.requirements .inner {
    width: 100%;
    max-width: 800px;
    margin: 180px auto 0;
}

.requirements .inner h2 {
    color: var(--a1, #494949);
    display: flex;
    flex-direction: column
}

.requirements .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

.requirements .inner h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.requirements .inner h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

.requirements .content {
    margin-top: 24px;
}

.requirements .content .detail:nth-of-type(1) {
    border-top: 1px solid #A0A7AB;
}

.requirements .content .detail {
    border-bottom: 1px solid #A0A7AB;
    padding: 16px 0px;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 29px;
    /* 181.25% */
    display: flex;
}

.requirements .content .detail .t1 {
    width: 220px;
}

.requirements .content .detail .t2 {
    width: calc(100% - 220px);
}

.requirements .inner > p {
    margin-top: 24px;
    color: var(--a1, #494949);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
}

.requirements .bt_box {
    margin-top: 80px;
}

.requirements .bt_box a {
    transition: 0.3s ease 0s;
    padding: 20px 10px;
    display: flex;
    border: 1px solid var(--a1, #494949);
    background: var(--colorA, #DABD9A);
    font-size: 14px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
    align-items: center;
    justify-content: center;
}

.requirements .bt_box a:hover {
    background: #F3EAE0;
}

#top_first.company_info .fv_area .swiper-slide .slide-img.sl1 {
    background-image: url('../img/company_info_fv.jpg');
}

.philosophy {
    width: 100%;
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
    height: 395px;
    padding-left: clamp(16px, 7.78vw, 112px);
}

.philosophy .inner {
    width: 100%;
    margin: 160px auto 0;
    min-height: 395px;
    max-width: 1216px;
    background-image: url(../img/pholosophy_back.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 395px;
}

.philosophy .inner h2 {
    color: var(--a1, #494949);
    display: flex;
    flex-direction: column;
}

.philosophy .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

.philosophy .inner h2 .eng:after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.philosophy .inner h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

.philosophy .inner ol {
    margin-top: 16px;
}

.philosophy .inner ol li {
    color: var(--a1, #494949);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 200%;
    /* 32px */
}

.philosophy .inner .text {
    width: 800px;
    background: linear-gradient(to right, #ffffff 0%, #ffffff 70%, rgba(255, 255, 255, 0) 100%);
    height: 395px;
}
.mind {
    width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}

.mind .inner {
    width: 100%;
    margin: 120px auto 0;
    display: flex;
    align-items: center;
    column-gap: 15%;
    max-width: 1112px;
}

.mind .img {
    flex-shrink: 0;
padding-left: 9%;
}

.mind .img img {
    display: block;
    max-width: 316px;
    width: 100%;
    height: auto;
}

.mind .text {
    flex: 1;
}

.mind .text h2 {
    color: var(--a1, #494949);
    display: flex;
    flex-direction: column;
}

.mind .text h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}
.mind h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.mind .text h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

.mind .text p {
    margin-top: 16px;
color: var(--a1, #494949);
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
    padding-right: 0;
}

.greeting {
        width: 100%;
}
.greeting .inner {
        width: 100%;
    margin: 120px auto 0;
}
.greeting .inner_top {
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
        background-image: url(../img/company_info_back.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;

}

.greeting .inner_top_in {
        width: 100%;
    padding: 80px 0px 180px 0px;
    max-width: 1216px;
    margin: auto;
}


.greeting .inner_top h2 {
        color: var(--a1, #494949);
    display: flex;
    flex-direction: column;
}
.greeting .inner_top h2 .eng {
        position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}
.greeting .inner_top h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.greeting .inner_top h2 .ja {
        margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}
.greeting .inner_top p {
        margin-top: 16px;
color: var(--a1, #494949);
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
.greeting .inner_top p+p {
    margin-top: 20px;
}

.greeting .inner_bottom {
    display: flex;
gap: 5%;
    max-width: 1216px;
    margin: auto;
}
.greeting .inner_bottom .img {
    width: 57%;
    margin-top: -100px;
}
.greeting .inner_bottom .img img {}

.greeting .text {
    margin-top: 40px;
}
.greeting .text p {
    color: var(--a1, #494949);
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
.company_overview {
    width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}

.company_overview .inner {
    width: 100%;
    max-width: 800px;
    margin: 180px auto 0;
}

.company_overview .inner h2 {
    color: var(--a1, #494949);
    display: flex;
    flex-direction: column
}

.company_overview .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

.company_overview .inner h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.company_overview .inner h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

.company_overview .content {
    margin-top: 24px;
}

.company_overview .content .detail:nth-of-type(1) {
    border-top: 1px solid #A0A7AB;
}

.company_overview .content .detail {
    border-bottom: 1px solid #A0A7AB;
    padding: 16px 0px;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 29px;
    /* 181.25% */
    display: flex;
}

.company_overview .content .detail .t1 {
    width: 220px;
}

.company_overview .content .detail .t2 {
    width: calc(100% - 220px);
}

.company_overview .inner > p {
    margin-top: 24px;
    color: var(--a1, #494949);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
}

.history {
    width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}

.history .inner {
    width: 100%;
    max-width: 800px;
    margin: 180px auto 0;
}

.history .inner h2 {
    color: var(--a1, #494949);
    display: flex;
    flex-direction: column
}

.history .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

.history .inner h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.history .inner h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

.history .content {
    margin-top: 24px;
}

.history .content .detail:nth-of-type(1) {
    border-top: 1px solid #A0A7AB;
}

.history .content .detail {
    border-bottom: 1px solid #A0A7AB;
    padding: 16px 0px;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 29px;
    /* 181.25% */
    display: flex;
}

.history .content .detail .t1 {
    width: 220px;
}

.history .content .detail .t2 {
    width: calc(100% - 220px);
}

.history .inner > p {
    margin-top: 24px;
    color: var(--a1, #494949);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    /* 28.8px */
}


.access {
        width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}
.access .inner {
        width: 100%;
    max-width: 800px;
    margin: 180px auto 0;
}
.access h2 {
        color: var(--a1, #494949);
    display: flex;
    flex-direction: column
}
.access h2 .eng {
        position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}
.access h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.access h2 .ja {
        margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

.access ul {    margin-top: 24px;
color: var(--a1, #494949);
font-size: 1.6rem;
font-weight: 400;
line-height: 180%; /* 28.8px */}
.access ul li {display: flex;}
.access ul li:nth-child(2) {    margin-top: 16px;}
.access ul li .t1 {    width: 65px;}
.access ul li .t2 {    width: calc(100% - 65px);}

.access .map {    margin-top: 24px;}
.access .map .gmap {
    
}
.access .map .gmap iframe {
        width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}
.access .map .img {
    margin-top: 24px;
}
.access .map .img img {
    max-width: 100%;
    width: 100%;
}

#top_first.workshop .fv_area .swiper-slide .slide-img.sl1 {
    background-image: url('../img/workshop_fv.jpg');
}

.diy {
        width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}
.diy .inner {
        width: 100%;
    margin: 80px auto 0;
    display: flex;
    gap: 2.8%;
    max-width: 1216px;
}
.diy .text {
    width: calc(100% - 51%);
    margin-top: 80px;
}
.diy .text h2 {
        color: var(--a1, #494949);
    display: flex;
    flex-direction: column;
}
.diy .text h2 .eng {
        position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}
.diy .text h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.diy .text h2 .ja {
        margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}
.diy .text p {
        margin-top: 16px;
color: var(--a1, #494949);
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
.diy .img {
width: 49%;
}
.diy .img img {
        width: 100%;
        border-radius: 20px;
}

.instructor {
        width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}
.instructor .inner {
        width: 100%;
    margin: 80px auto 0;
    display: flex;
    gap: 4.8%;
    max-width: 1216px;
}
.instructor .text {
    width: calc(100% - 37.5%);
    margin-top: 40px;
    padding-right: 11%;
}
.instructor .text h2 {
        color: var(--a1, #494949);
    display: flex;
    flex-direction: column;
}
.instructor .text h2 .eng {
        position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}
.instructor .text h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.instructor .text h2 .ja {
        margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}
.instructor .text p {
        margin-top: 16px;
color: var(--a1, #494949);
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
.instructor .img {
    width: 37.5%;
}
.instructor .img img {
        width: 100%;
        border-radius: 20px;
}

.lesson_scene {
        width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}
.lesson_scene .inner {
        width: 100%;
    margin: 180px auto 0;
    max-width: 1216px;
}

.lesson_scene h2 {
    color: var(--a1, #494949);
    display: flex;
    flex-direction: column;
}

.lesson_scene h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}
.lesson_scene h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.lesson_scene h2 .ja {
    margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}
.lesson_scene .img {
    margin-top: 24px;
}
.lesson_scene .img img {
    width: 100%;
    border-radius: 20px;
}
.lesson_scene ul {    display: flex;
    flex-wrap: wrap;
    margin-top: 32px;
    gap: 32px;}
.lesson_scene ul li {
    flex: 1 1 calc((100% - 64px) / 3);
}
.lesson_scene ul li img {
       width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

.work_detail {
        width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}
.work_detail .inner {
        width: 100%;
    max-width: 800px;
    margin: 180px auto 0;
}
.work_detail h2 {
        color: var(--a1, #494949);
    display: flex;
    flex-direction: column
}
.work_detail h2 .eng {
        position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}
.work_detail h2 .eng::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}

.work_detail h2 .ja {
        margin-top: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 140%;
}

.work_detail .map {
    margin-top: 24px;
}
.work_detail .map .gmap {}
.work_detail .map .gmap iframe {
            width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
}

.work_detail .content {
        margin-top: 24px;
}

.work_detail .content .detail {
        border-bottom: 1px solid #A0A7AB;
    padding: 16px 0px;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 29px;
    /* 181.25% */
    display: flex;
}
.work_detail .content .detail .t1 {
        width: 220px;
}
.work_detail .content .detail .t2 {
        width: calc(100% - 220px);
}

.work_detail .text {}
.work_detail .text p {
        margin-top: 24px;
    color: var(--a1, #494949);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}

.work_detail .bt_box {
        margin-top: 80px;
    display: flex;
    justify-content: center;
}
.work_detail .bt_box a {
    transition: 0.3s ease 0s;
    padding: 20px 10px;
    display: flex;
    border: 1px solid var(--a1, #494949);
    background: var(--colorA, #DABD9A);
    font-size: 14px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    width: 100%;
}
.work_detail .bt_box a:hover {
    background: #F3EAE0;
}


#top_first.contact .fv_area .swiper-slide .slide-img.sl1 {
    background-image: url('../img/contact_fv.jpg');
}

.contact_top {
            width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
}
.contact_top .inner {
            width: 100%;
    max-width: 800px;
    margin: 80px auto 0;
}
.contact_top .text {

}
.contact_top .text p {
    text-align: center;
font-size: 1.8rem;
font-style: normal;
font-weight: 700;
line-height: 140%; /* 25.2px */
}
.contact_top .text p+p {
    margin-top: 20px;
}
.contact_top .text2 {
    margin-top: 40px;
}
.contact_top .text2 p {
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 25px; /* 156.25% */
}
.contact_top .text2 a {
    color: var(--colorA, #DABD9A);
text-decoration: underline;

}

.form_box {
                width: 100%;
    padding-left: clamp(16px, 7.78vw, 112px);
    padding-right: clamp(16px, 7.78vw, 112px);
    box-sizing: border-box;
padding-bottom: 100px;
}
.form_box .inner {
                width: 100%;
    max-width: 800px;
    margin: 80px auto 0;
}
.form_box form {}

.form_box .box {}
.form_box .box h3 {
margin-top: 40px;
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 180%;
}
.form_box .box h3 span {
        color: var(--red, #D10000);

}

.form_box .radiobox {
    margin-top: 20px;
    margin-left: 9%;
}
.form_box .radiobox .wpcf7-form-control {
    display: flex;
    flex-direction: column;
}
.form_box .radiobox .wpcf7-list-item {
    display: block;
    margin-top: 20px;
}
.form_box .radiobox .wpcf7-list-item label {
    color: var(--a1, #494949);
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
cursor: pointer;
}
.form_box .radiobox .wpcf7-list-item input[type="radio"] {

}
.form_box .radiobox .wpcf7-list-item .wpcf7-list-item-label {}

.form_box .textbox {}
.form_box .textbox .wpcf7-form-control-wrap {}
.form_box .textbox input[type="text"],
.form_box .textbox input[type="email"]
 {
    border-radius: 4px;
    border: 1px solid var(--a1, #494949);
    width: 100%;
    padding: 16px 16px;
    font-size: 1.6rem;
    margin-top: 10px;
}
.form_box .textbox textarea {
    margin-top: 10px;
    border-radius: 4px;
border: 1px solid var(--a1, #494949);
    padding: 16px 16px;
height: 600px;
width: 100%;
    color: var(--a1, #494949);
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
}
textarea::placeholder {
    color: var(--a1, #494949);
font-size: 1.6rem;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
    opacity: 1;
}




.form_box .bt_box {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

.form_box .bt_box .wpcf7-submit {
    transition: 0.3s ease 0s;
    padding: 20px 10px;
    display: flex;
    border: 1px solid var(--a1, #494949);
    background: var(--colorA, #DABD9A);
    font-size: 14px;
    color: var(--a1, #494949);
    font-weight: 400;
    line-height: 140%;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    width: 100%;
    cursor: pointer; /* submit なので追加しておくと自然 */
    appearance: none; /* iOSボタンのデフォを消す */
}

.form_box .bt_box .wpcf7-submit:hover {
    background: #F3EAE0;
}

@media (min-width: 751px) and (max-width: 1400px) {
.news_detail .content {
    margin-left: 4%;
    flex: 0 1 calc(100% - (24px + 2% + 81px + 17px));
}
.works_list .cat_box > ul {
    flex-wrap: wrap;
}
        .works_list .inner ul.detail_list li{
    margin-right: 2.6%;
    }



    .works_list .inner ul.detail_list li:nth-child(3n) {
    margin-right: 0;
}

.works_detail .content {
    margin-left: 4%;
    flex: 0 1 calc(100% - (24px + 2% + 81px + 17px));
}


}


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

main .top_concept {
    width: 100%;
    box-sizing: border-box;
    padding-left: clamp(16px, 4.27vw, 112px);
    padding-right: clamp(16px, 4.27vw, 112px);
}
main .top_works ul li:nth-child(n+4) {
    display: none;
}

.swiper-wrapper{
    height: 403px !important;
}

.works_list .inner {
    width: 100%;
    margin: 30px auto 0;
}

footer .inner {
    width: 100%;
    margin: 40px auto 0;
    max-width: 1080px;
}
#fv_sp.news .fv_area .swiper-slide .slide-img.sl1 {
    background-image: url('../img/news_fv_sp.jpg');
}
.breadcrumb {
    padding-left: 4%;
    margin-top: 16px;
}
.news_list {
    padding-left: 4%;
    padding-right: 4%;
}
.news_list .row {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-top: 40px;
    flex-direction: column-reverse;
}
.news_list .side {
    width: 100%;
    margin-left: 0;
}
.news_list .side_title {
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    border-bottom: 1px solid #494949;
    margin-bottom: 0;
    display: inline-block;
}
.news_list .content {
    margin-left: 0;
    flex: 0;
width: 100%;
}
.news_list .side ul  {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.news_list .content ul {
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
}
.news_list .content a {

    padding-bottom: 25px;
}
.news_list .content .date {
    font-size: 1.4rem;
}
.news_list .content .title {
    font-size: 1.4rem;
}
.news_list .content li {
    margin-bottom: 25px;
}

#fv_sp.sec .fv_area .fv_text {
    top: 46%;
}

#fv_sp.sec .fv_area .fv_text h1 {
    display: flex;
    flex-direction: column;
}

#fv_sp.sec .fv_area .fv_text h1 .en {
    color: var(--a1, #494949);
    text-align: right;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    /* 33.6px */
}

#fv_sp.sec .fv_area .fv_text  h1 .ja {
    color: var(--a1, #494949);
    text-align: right;
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    /* 56px */
}
.news_detail {
    padding-left: 0;
}
.news_detail .inner {
    padding-left: 4%;
    padding-right: 4%;
}
.news_detail .row {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-top: 40px;
}
.news_detail .content {
    margin-left: 0;
    flex: initial;
}
.breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-right: 24%;
}
.breadcrumb li {
    color: #494949;
    font-size: 1.0rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    display: flex;
    align-items: center;
}
.news_detail .title_box .date {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 180%;
}
.news_detail .title_box h1 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 140%;
}
.news_detail .content_box {
    margin-top: 40px;
}
.news_detail .content_box p {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 180%;
}
.news_detail .next_back {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 40px;
}
.news_detail .bt_box {
    margin-top: 50px;
}
.works_list {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.works_list .cat_box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
}
.works_list .cat_box > ul {
    display: flex;
    margin-top: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.works_list .cat_box h2 {
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}
.works_list .cat_box > ul li a {
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    border-radius: 6px;
    background: rgba(218, 189, 154, 0.10);
    display: inline-flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
}
.works_list .inner ul.detail_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 80px;
    flex-direction: column;
}
.works_list .inner ul.detail_list li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 60px;
    box-sizing: border-box;
}
.works_list .next_back {
    margin-top: 5px;
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 0;
}
.works_detail .row {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-top: 40px;
}
.works_detail .inner {
    padding-left: 4%;
    padding-right: 4%;
}
.works_detail {
    padding-left: 0;
}
.works_detail .content {
    margin-left: 0;
    flex: initial;
}
.works_detail .title_box .cat {
    color: var(--a1, #494949);
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    border-radius: 6px;
    background: rgba(218, 189, 154, 0.25);
    display: inline-flex;
    padding: 4px 15px;
    justify-content: center;
    align-items: center;
}
.works_detail .title_box h1 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 140%;
    margin-top: 12px;
}
.works_detail .title_box .tag {
    color: var(--a1, #494949);
    margin-top: 8px;
    font-size: 1.0rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    position: relative;
}
.works_detail .content_box {
    margin-top: 40px;
}
.works_detail .content_box p {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 180%;
}
.works_detail .next_back {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 40px;
}
.recruit_box {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.recruit_box .inner {
    width: 100%;
    margin: 40px auto 0;
}
.recruit_box .message h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.recruit_box .message h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.recruit_box .message h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

.recruit_box .message h3 {
    color: var(--a1, #494949);
    font-family: "Noto Serif JP";
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    margin-top: 16px;
}
.recruit_box .message p {
    color: var(--a1, #494949);
    margin-top: 8px;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}

.recruit_box .message img {
    margin-top: 16px;
    width: 100%;
    max-width: 100%;
}
.recruit_box .craftsmen {
    margin-top: 120px;
}
.recruit_box .craftsmen h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.recruit_box .craftsmen h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.recruit_box .craftsmen h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}

.recruit_box .craftsmen h3 {
    color: var(--a1, #494949);
    font-family: "Noto Serif JP";
    font-size: 2.0rem;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    margin-top: 16px;
}
.recruit_box .craftsmen .row {
    margin-top: 23px;
    display: flex;
    gap: 0;
    margin-bottom: 80px;
    flex-direction: column;
}
.recruit_box .craftsmen .row .row1 {
    width: 100%;
    margin-bottom: 60px;
}
.recruit_box .craftsmen .row h3 {
    margin-top: 12px;
    color: var(--a1, #494949);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 140%;
}
.recruit_box .craftsmen .row p {
    margin-top: 16px;
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 180%;
}
.recruit_box .craftsmen .row .row2 {
    width: 100%;
}
.personality {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.personality .inner {
    width: 100%;
    margin: 120px auto 0;
}
.personality .rows {
    display: flex;
    gap: 0;
    flex-direction: column;
}
.personality .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.personality .inner h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.personality .rows .text {
    width: 100%;
    color: var(--a1, #494949);
    font-family: "Noto Serif JP";
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}
.personality .inner h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}
.personality .rows .text .text1 {
    margin-top: 24px;
}
.personality .rows .img {
    width: 100%;
    margin-top: 16px;
}
.requirements {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.requirements .inner {
    width: 100%;
    max-width: 100%;
    margin: 120px auto 0;
}
.requirements .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.requirements .inner h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.requirements .inner h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}
.requirements .content .detail {
    border-bottom: 1px solid #A0A7AB;
    padding: 14px 0px;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    display: flex;
}
.requirements .content .detail .t1 {
    width: 80px;
}
.requirements .content .detail .t2 {
    width: calc(100% - 80px);
}
.requirements .inner > p {
    margin-top: 24px;
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}
.requirements .bt_box {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}
.requirements .bt_box a {

    width: 68vw;
}

.philosophy {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
    background-image: url(../img/pholosophy_back.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: auto 133px;
    height: auto;
}
.philosophy .inner {
    width: 100%;
    margin: 40px auto 0;
    /* background: linear-gradient(
        to right,
        #ffffff 0%,
        #ffffff 40%,
        rgba(255, 255, 255, 0) 100%
    ); */
    min-height: 133px;
        background: none;
}
.philosophy .inner .text {
    width: 100%;
    background: linear-gradient(to right, #ffffff 0%, #ffffff 10%, rgba(255, 255, 255, 0) 100%);
    height: auto;
}

.philosophy .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
    padding-top: 30px;
}
.philosophy .inner h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.philosophy .inner h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
}
.philosophy .inner ol {
    margin-top: 50px;
}
.philosophy .inner ol li {
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 180%;
}


.mind {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.mind .inner {
    width: 100%;
    margin: 80px auto 0;
    display: flex;
    column-gap: 0;
    flex-direction: column;
    align-items: stretch;
}

.mind .img {
    flex-shrink: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 30px;
}
.mind .img img {
    display: block;
    max-width: 160px;
    width: 100%;
    height: auto;
}
.mind .img  h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
    padding-top: 30px;
}
.mind .img  h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.mind .img  h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
            display: block;
}
.mind .text p {
    margin-top: 30px;
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    padding-right: 0;
}
.greeting .inner {
    width: 100%;
    margin: 80px auto 0;
}
.greeting .inner_top {
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
    background-image: url(../img/company_info_back_sp.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
}
.greeting .inner_top_in {
    width: 100%;
    padding: 50px 0px 80px 0px;
}
.greeting .inner_top h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.greeting .inner_top h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.greeting .inner_top h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
            display: block;
}
.greeting .inner_top p {
    margin-top: 24px;
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}
.greeting .inner_bottom {
    padding-left: 4%;
    padding-right: 4%;
    display: flex;
    gap: 0;
    flex-direction: column;
}
.greeting .inner_bottom .img {
    width: 85%;
    margin-top: -56px;
}
.greeting .text {
    margin-top: 16px;
}
.greeting .text p {
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}
.greeting .text p:nth-of-type(2) {
    margin-top: 20px;
}
.greeting .text p:nth-of-type(3) {
    margin-top: 20px;
}
.company_overview {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.company_overview .inner {
    width: 100%;
    max-width: 100%;
    margin: 120px auto 0;
}
.company_overview .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.company_overview .inner h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.company_overview .inner h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
            display: block;
}

.company_overview .content .detail {
    border-bottom: 1px solid #A0A7AB;
    padding: 14px 0px;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    display: flex;
}
.company_overview .content .detail .t1 {
    width: 90px;
}
.company_overview .content .detail .t2 {
    width: calc(100% - 90px);
}
.history {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.history .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.history .inner h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.history .inner h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
            display: block;
}
.history .inner {
    width: 100%;
    max-width: 100%;
    margin: 120px auto 0;
}
.history .content .detail {
    border-bottom: 1px solid #A0A7AB;
    padding: 14px 0px;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    display: flex;
}
.history .content .detail .t1 {
    width: 90px;
}
.history .content .detail .t2 {
    width: calc(100% - 90px);
}

.access {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}

.access .inner {
    width: 100%;
    max-width: 100%;
    margin: 120px auto 0;
}
.access .inner h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.access .inner h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.access .inner h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
            display: block;
}
.access ul {
    margin-top: 24px;
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 180%;
}
.access ul li {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}
.diy {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.diy .inner {
    width: 100%;
    margin: 40px auto 0;
    display: flex;
    gap: 0;
    flex-direction: column;
}
.diy .text {
    width: 100%;
    margin-top: 0;
}
.diy .text h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.diy .text h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.diy .text h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
            display: block;
}
.diy .text p {
    margin-top: 16px;
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}
.diy .img {
    width: 100%;
    margin-top: 20px;
}
.diy .img img {
    width: 100%;
    border-radius: 10px;
}

.instructor {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.instructor .inner {
    width: 100%;
    margin: 120px auto 0;
    display: flex;
    gap: 0;
    flex-direction: column;
}
.instructor .text {
    width: 100%;
    margin-top: 0;
    padding-right: 0;
}
.instructor .img h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.instructor .img h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.instructor .img h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
            display: block;
}
.instructor .text p {
    margin-top: 16px;
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}
.instructor .img {
    width: 61.5%;
}
.instructor .img img {
    width: 100%;
    border-radius: 10px;
    margin-top: 24px;
}
.lesson_scene {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.lesson_scene .inner {
    width: 100%;
    margin: 120px auto 0;
}
.lesson_scene h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.lesson_scene h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.lesson_scene h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
            display: block;
}
.lesson_scene .img {
    margin-top: 20px;
}
.lesson_scene .img img {
    width: 100%;
    border-radius: 10px;
}
.lesson_scene ul li img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}
.lesson_scene ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    gap: 12px;
}
.lesson_scene ul li {
    flex: 1 1 calc((100% - 12px) / 2);
}
.work_detail {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.work_detail .inner {
    width: 100%;
    max-width: 100%;
    margin: 120px auto 0;
}
.work_detail h2 .eng {
    position: relative;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 140%;
}
.work_detail h2 .eng::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background-color: #494949;
    margin-top: 4px;
}
.work_detail h2 .ja {
    margin-top: 8px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 140%;
            display: block;
}

.work_detail .content .detail {
    border-bottom: 1px solid #A0A7AB;
    padding: 14px 0px;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    display: flex;
}
.work_detail .content .detail .t1 {
    width: 90px;
}
.work_detail .content .detail .t2 {
    width: calc(100% - 90px);
}
.work_detail .text p {
    margin-top: 24px;
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}

.work_detail .bt_box {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}
.work_detail .bt_box a {
    width: 68vw;
}

.contact_top .inner {
    width: 100%;
    max-width: 100%;
    margin: 40px auto 0;
}
.contact_top {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.contact_top .text p {
    text-align: center;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 180%;
}
.contact_top .text2 p {
    text-align: center;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
}
.form_box {
    width: 100%;
    padding-left: 4%;
    padding-right: 4%;
    box-sizing: border-box;
}
.form_box .inner {
    width: 100%;
    max-width: 100%;
    margin: 64px auto 0;
}
.form_box .radiobox {
    margin-top: 10px;
    margin-left: 12%;
}

.form_box .radiobox .wpcf7-list-item {
    display: block;
    margin-top: 14px;
}
.form_box .radiobox .wpcf7-list-item label {
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    cursor: pointer;
}

.form_box .box h3 {
    margin-top: 24px;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}
.form_box .textbox input[type="text"] {
    border-radius: 4px;
    border: 1px solid var(--a1, #494949);
    width: 100%;
    padding: 14px 10px;
    font-size: 1.4rem;
    margin-top: 8px;
}
.form_box .textbox textarea {
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid var(--a1, #494949);
    padding: 14px 10px;
    height: 300px;
    width: 100%;
    color: var(--a1, #494949);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
}
textarea::placeholder {
    color: var(--a1, #494949);
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
    opacity: 1;
}
.form_box .bt_box {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.form_box .bt_box .wpcf7-submit {
    width: 68vw;
}

footer .row {
    display: flex;
    align-items: center;
    justify-content: center;
}

}

.fadein {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadein.show {
    opacity: 1;
    transform: translateY(0);
}


.wpcf7-spinner{
display: none !important;
}


.wpcf7-not-valid-tip {
    font-size: 1.4rem !important;
    font-weight: bold !important;
    margin-top: 5px !important;
}