@charset "UTF-8";

/* set variables */
:root {
    --mainColor: #fff100;
    --subColor: #595757;
    --subColor2: #10537F;
    --bgColorlight: #F3F3F3;
    --bgColorbaige: #f1f0ec;
    --bgColordark: #DDDBDA;
    --bgColorgray: #dcdddd;
    --txtColor: #000000;
    --linkColor: #000000;
    --borderColor: #231815;
    --btnColor: #006BAE;
    --txtColorpoint: #F7931E;

    --gap: 100px;
    --gaps: 40px;
    --gapmini: 20px;
    --gap_sp: 30px;
    --sectionPadding: 100px;
    --sectionPadding_sp: 30px;
    --contentWidth: 1200px;
    --innerWidth: 1000px;
}
body {
    width: 100%;
    font-size: 16px;
    color: var(--txtColor);
    font-family: "Noto Sans JP", sans-serif;
    background-color: #fff;
    text-align: justify;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* ローディング画面 */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading.loaded {
    opacity: 0;
    visibility: hidden;
}

.loading-logo {
    width: 500px;
    max-width: 80%;
    position: relative;
}

.loading-logo-img {
    width: 100%;
    height: auto;
}

/* 2つのSVGを重ねる */
.loading-logo-stroke {
    position: relative;
    z-index: 2;
    animation: fadeOutStroke 1s ease 2.5s forwards;
}

.loading-logo-color {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    animation: fadeInColor 1s ease 2.5s forwards;
}

/* SVGパスアニメーション（線画のみ） */
.loading-logo-stroke path,
.loading-logo-stroke polygon,
.loading-logo-stroke polyline {
    fill: none;
    stroke: #000;
    stroke-width: 0.8;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawPath 3s ease forwards;
}

/* 1. 家のアイコン（24-30番目の要素）を最初に全部同時に、速く描画 */
.loading-logo-stroke > g > polygon:nth-child(24),
.loading-logo-stroke > g > polygon:nth-child(25),
.loading-logo-stroke > g > path:nth-child(26),
.loading-logo-stroke > g > polyline:nth-child(27),
.loading-logo-stroke > g > polyline:nth-child(28),
.loading-logo-stroke > g > polyline:nth-child(29),
.loading-logo-stroke > g > polyline:nth-child(30) {
    animation: drawPath 1.5s ease forwards;
    animation-delay: 0s;
}

/* 2. TOWA（15-23番目の要素）を家の直後に */
.loading-logo-stroke > g > polygon:nth-child(15) {
    animation-delay: 0.2s;
}
.loading-logo-stroke > g > path:nth-child(16) {
    animation-delay: 0.3s;
}
.loading-logo-stroke > g > polygon:nth-child(17) {
    animation-delay: 0.4s;
}
.loading-logo-stroke > g > path:nth-child(18) {
    animation-delay: 0.5s;
}
.loading-logo-stroke > g > polygon:nth-child(19) {
    animation-delay: 0.6s;
}

/* 3. 上の小さな文字（1-14番目の要素）を最後に */
.loading-logo-stroke > g > path:nth-child(1) {
    animation-delay: 1.4s;
}
.loading-logo-stroke > g > path:nth-child(2) {
    animation-delay: 1.45s;
}
.loading-logo-stroke > g > path:nth-child(3) {
    animation-delay: 1.5s;
}
.loading-logo-stroke > g > path:nth-child(4) {
    animation-delay: 1.55s;
}
.loading-logo-stroke > g > path:nth-child(5) {
    animation-delay: 1.6s;
}
.loading-logo-stroke > g > path:nth-child(6) {
    animation-delay: 1.65s;
}
.loading-logo-stroke > g > path:nth-child(7) {
    animation-delay: 1.7s;
}
.loading-logo-stroke > g > path:nth-child(8) {
    animation-delay: 1.75s;
}
.loading-logo-stroke > g > path:nth-child(9) {
    animation-delay: 1.8s;
}
.loading-logo-stroke > g > path:nth-child(10) {
    animation-delay: 1.85s;
}
.loading-logo-stroke > g > path:nth-child(11) {
    animation-delay: 1.9s;
}
.loading-logo-stroke > g > path:nth-child(12) {
    animation-delay: 1.95s;
}
.loading-logo-stroke > g > path:nth-child(13) {
    animation-delay: 2s;
}
.loading-logo-stroke > g > path:nth-child(14) {
    animation-delay: 2.05s;
}

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeOutStroke {
    to {
        opacity: 0;
    }
}

@keyframes fadeInColor {
    to {
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    .loading-logo {
        width: 280px;
    }
}

body.fs-active {
    overflow: hidden;
}
.font_eng {
    font-family: "new-science", sans-serif !important;
}
p {
    line-height: 1.8;
}
h2 , h3 , p {
    margin-top: 0;
    margin-bottom: 0;
}
.p_center {
    text-align: center;
}
.p_bold {
    font-weight: 600;
}
.p_title_medium {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.p_bolder {
    font-weight: 900;
}
.p_left {
    text-align: justify;
}
.p_right {
    text-align: right;
}
.br-sp {
    display: none;
}

/* 改行制御 */
br.sp {
    display: none;
}

br.pc {
    display: block;
}

@media screen and (max-width: 768px) {
    br.sp {
        display: block;
    }
    br.pc {
        display: none;
    }
}
a {
    color: var(--linkColor);
    transition: 0.3s;
    cursor: pointer !important;
}
a:hover {
    color: #999999;
}
a img {
    transition: 0.2s;
}
a:hover img {
    opacity: 0.6;
}
.cf::after {
	clear: both;
	display: block;
	content: "";
	height: 0;
	width: 0;
}
.flt_right {
    float: right;
}
.flt_left {
    float: left;
}
.img_right {
    float: right;
}
.img_left {
    float: left;
    margin-right: var(--gap);
}
.p_blue {
    color: #006BAE;
}
.p_white {
    color: #fff;
}
img {
    max-width: 100%;
    height: auto;
}

/* PC . SP 切り替え */
@media screen and (max-width: 798px) {
    .sp_none {
        display: none;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    .sp_left {
        text-align: justify !important;
    }
}
@media screen and (min-width: 799px) {
    .pc_none {
        display: none;
    }
}

.wrap {
    width: 100%;
    max-width: var(--contentWidth);
    margin-left: auto;
    margin-right: auto;
}
.wrap_l {
    width: 100%;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
}
.wrap_s {
    width: 100%;
    max-width: var(--innerWidth);
    margin-left: auto;
    margin-right: auto;
}
.mt_10 {
    margin-top: 10px;
}
.mt_20 {
    margin-top: 20px;
}
.mt_30 {
    margin-top: 30px;
}
.mt_40 {
    margin-top: 40px;
}
.mt_50 {
    margin-top: 50px;
}
.mt_100 {
    margin-top: 100px;
}
.mb_0 {
    margin-bottom: 0 !important;
}
.mb_10 {
    margin-bottom: 10px;
}
.mb_20 {
    margin-bottom: 20px;
}
.mb_30 {
    margin-bottom: 30px;
}
.mb_40 {
    margin-bottom: 40px;
}
.mb_50 {
    margin-bottom: 50px;
}
.mb_100 {
    margin-bottom: 100px;
}
.p12 {
    font-size: 12px;
    line-height: 200%;
}
.p14 {
    font-size: 14px;
    line-height: 200%;
}
.p15 {
    font-size: 15px;
    line-height: 200%;
}
.p16 {
    font-size: 16px;
    line-height: 200%;
}
.p18 {
    font-size: 18px;
    line-height: 200%;
}
.p20 {
    font-size: 20px;
    line-height: 200%;
}
.p22 {
    font-size: 22px;
    line-height: 200%;
}
.p24 {
    font-size: 24px;
    line-height: 200%;
}
.p26 {
    font-size: 24px;
    line-height: 200%;
}
.p26 {
    font-size: 26px;
    line-height: 200%;
}
.p30 {
    font-size: 30px;
    line-height: 160%;
}
.p35 {
    font-size: 35px;
    line-height: 160%;
}
.p38 {
    font-size: 38px;
    line-height: 160%;
}
.p40 {
    font-size: 40px;
    line-height: 150%;
}
.p50 {
    font-size: 50px;
    line-height: 150%;
}
.p60 {
    font-size: 60px;
    line-height: 100%;
}
.p_light {
    color: var(--rightColor);
}
.sec_padding {
    padding-top: var(--sectionPadding);
    padding-bottom: var(--sectionPadding);
}
.sec_padding_s {
    padding-top: calc(var(--sectionPadding) / 2);
    padding-bottom: calc(var(--sectionPadding) / 2);
}
.bg_light {
    background-color: var(--bgColorlight);
}
.bg_dark {
    background-color: var(--bgColordark);
}
.bg_white {
    background-color: #fff;
}
.gap {
    gap: var(--gaps);
}
.gaps {
    gap: var(--gapmini);
}
.column {
    display: flex;
    flex-direction: column;    
}
.p_white {
    color: #fff;
}

@media screen and (max-width: 1000px) {
    .wrap  {
        width: auto;
        max-width: auto;
        margin-left: 20px;
        margin-right: 20px;
    }
    .wrap_s  {
        width: auto;
        max-width: auto;
        margin-left: 20px;
        margin-right: 20px;
    }
    .p16 {
        font-size: 14px;
        line-height: 200%;
    }
    .p20 , .p18 {
        font-size: 16px;
        line-height: 200%;
    }
    .p26 , .p24 , .p22 {
        font-size: 18px;
        line-height: 200%;
    }
    .p30 {
        font-size: 20px;
    }
    .p35 , .p40  {
        font-size: 24px;
    }
    .p38 , .p50 {
        font-size: 5vw;
    }
    .mb_50 {
        margin-bottom: 20px;
    }
    .mt_30 {
        margin-top: 10px;
    }
    .mb_30 , .mb_20 {
        margin-bottom: 10px;
    }
    .img_left {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }
}

/* 追加のレスポンシブ対応 */
@media screen and (max-width: 768px) {
    .wrap, .wrap_s {
        margin-left: 15px;
        margin-right: 15px;
    }
    
    .sec_padding {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    #footer .wrap_s.sec_padding,
    #footer .wrap.sec_padding,
    .footer_sub .wrap_s.sec_padding,
    .footer_sub .wrap.sec_padding {
        padding-bottom: 0 !important;
    }
    
    .sec_padding_s {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    
    #top_about {
        padding: 50px 0;
    }
    
    .btn_normal {
        margin-top: 30px;
    }
    
    .btn_normal a {
        max-width: 250px;
        padding: 12px 0;
    }
}

@media screen and (max-width: 480px) {
    .wrap, .wrap_s {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .sec_padding {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    #footer .wrap_s.sec_padding,
    #footer .wrap.sec_padding,
    .footer_sub .wrap_s.sec_padding,
    .footer_sub .wrap.sec_padding {
        padding-bottom: 0 !important;
    }
    
    .sec_padding_s {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    #top_about {
        padding: 30px 0;
    }
    
    .btn_normal a {
        max-width: 200px;
        padding: 10px 0;
    }
}


#kv , #fv {
    line-height: 0;
}

#fv img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    #fv .kv {
        height: 70vh;
        overflow: hidden;
    }
    
    #fv .kv img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.wrap_header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .wrap_header {
        padding: 15px;
    }
    
    .header_logo img {
        width: 150px;
    }
}

/* 全画面表示のメニュー */
.fs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background: rgba(0, 0, 0, 0.9);
    overflow-y: scroll;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transition: 0.2s;
}

.fs.fs-active {
    opacity: 1;
    z-index: 999;
    pointer-events: auto;
}

.fs-inner {
    padding: 40px 40px 40px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fs-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.fs-menu-item {
    margin: 15px 0;
    opacity: 0;
    transform: translateX(-50px);
}

.fs.fs-active .fs-menu-item {
    animation: slideInFromLeft 0.5s ease forwards;
}

.fs.fs-active .fs-menu-item:nth-child(1) {
    animation-delay: 0.1s;
}

.fs.fs-active .fs-menu-item:nth-child(2) {
    animation-delay: 0.2s;
}

.fs.fs-active .fs-menu-item:nth-child(3) {
    animation-delay: 0.3s;
}

.fs.fs-active .fs-menu-item:nth-child(4) {
    animation-delay: 0.4s;
}

.fs.fs-active .fs-menu-item:nth-child(5) {
    animation-delay: 0.5s;
}

.fs.fs-active .fs-menu-item:nth-child(6) {
    animation-delay: 0.6s;
}

.fs.fs-active .fs-menu-item:nth-child(7) {
    animation-delay: 0.7s;
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fs-menu-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    font-weight: 500;
    padding: 15px 30px;
    border-radius: 30px;
    transition: all 0.3s ease;
    position: relative;
}

.fs-menu-link:hover {
    transform: scale(1.05);
}

.fs-menu-link .en {
    font-size: 20px;
    font-weight: 500;
}

.fs-menu-link .ja {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* メニューボタン 画面右上に固定 */
.mn {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;
    width: 60px;
    height: 60px;
    color: #fff;
    background: var(--borderColor);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 15px;
    transition: all 0.3s ease;
}

.mn:hover {
    background: var(--txtColorpoint);
}

.mn-bar {
    width: 30px;
    height: 1px;
    background: #fff;
    margin: 6px 0 0;
    transition: 0.2s;
}

.mn-bar:nth-child(1) {
    margin-top: 0;
    animation: menubar-top 1s ease-in-out infinite;
}

.mn-bar:nth-child(2) {
    animation: menubar-middle 1s ease-in-out infinite;
}

.mn-bar:nth-child(3) {
    animation: menubar-bottom 1s ease-in-out 0.5s infinite;
}

.mn:hover .mn-bar,
.mn-bar.fs-active {
    animation: none;
}

.mn-bar:nth-child(1).fs-active {
    transform: translateY(7px) rotate(-45deg);
}

.mn-bar:nth-child(2).fs-active {
    opacity: 0;
}

.mn-bar:nth-child(3).fs-active {
    transform: translateY(-7px) rotate(45deg);
}

@keyframes menubar-top {
    0%, 100% {
        width: 30px;
    }
    50% {
        width: 20px;
    }
}

@keyframes menubar-middle {
    0%, 100% {
        width: 20px;
    }
    25% {
        width: 30px;
    }
    75% {
        width: 30px;
    }
}

@keyframes menubar-bottom {
    0%, 100% {
        width: 30px;
    }
    50% {
        width: 20px;
    }
}

.mn-text {
    letter-spacing: 0;
    line-height: 1;
    text-align: left;
    margin: 10px 0 0;
    font-size: 10px;
    font-weight: 500;
}

.mn-text::before {
    content: "MENU";
}

.mn-text.fs-active::before {
    content: "CLOSE";
}

/* レスポンシブ対応 */
@media screen and (min-width: 768px) {
    .mn {
        width: 80px;
        height: 80px;
        padding-left: 22px;
    }
    
    .mn-bar {
        width: 35px;
    }
    
    @keyframes menubar-top {
        0%, 100% {
            width: 35px;
        }
        50% {
            width: 23px;
        }
    }
    
    @keyframes menubar-middle {
        0%, 100% {
            width: 23px;
        }
        25% {
            width: 35px;
        }
        75% {
            width: 35px;
        }
    }
    
    @keyframes menubar-bottom {
        0%, 100% {
            width: 35px;
        }
        50% {
            width: 23px;
        }
    }
    
    .mn-text {
        font-size: 12px;
    }
    
    .fs-inner {
        padding: 60px 60px 60px;
    }
    
    .fs-menu-item {
        margin: 20px 0;
    }
    
    .fs-menu-link {
        font-size: 32px;
        padding: 20px 40px;
    }
    
    .fs-menu-link .en {
        font-size: 24px;
    }
    
    .fs-menu-link .ja {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {
    .fs-inner {
        padding: 40px 20px 30px;
    }
    
    .fs-menu-item {
        margin: 20px 0;
    }
    
    .fs-menu-link {
        font-size: 20px;
        padding: 12px 25px;
    }
}



#top_about {
    background-image: url(../img/top_bg_01.jpg);
    background-position: center center;
    background-size: cover;
    padding: var(--gap) 0;
    color: #fff;
    position: relative;
}

#about_01 {
    display: flex;
    flex-direction:row-reverse;
    position: relative;
}
.wrap_harf {
    text-align: center;
    padding: 0;
    display: flex;
    justify-content: center;
}
#about_01 .wrap_harf {
    width: 40%;
    padding-bottom: 100px;
}
#about_01 img.bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    height: 100%;
    object-fit: cover;
}

#about_02 {
    display: flex;
    flex-direction: row;
    position: relative;
}
#about_02 .wrap_harf {
    padding-top: 50px;
    width: 65%;
}
#about_02 img.bg {
    position: absolute;
    right: 0;
    top: -30px;
    width: 35%;
    height: calc(100% + 30px);
    object-fit: cover;
}
h2.h2_top {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1rem;
}
h2.h2_top_02 {
    text-align: center;
    margin-bottom: var(--gaps);
}
h2.h2_top_02 span {
    display: block;
}
h2.h2_top_02 .font_eng {
    font-size: 130%;
    letter-spacing: 0.2em;
    font-weight: normal;
}
h2.h2_top_02 .font_jp {
    font-size: 60%;
}
#about_02 .top_txt {
    text-align: justify;
    width: calc(100% - 100px);
    max-width: 500px;
    padding: 20px 50px 0;
    background-image: url(../img/top_h3.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: left top;
}
#about_03 {
    margin-top: 100px;
    display: flex;
    flex-direction:row;
    position: relative;
}
#about_03 .wrap_harf {
    width: 40%;
    padding-bottom: 150px;
}
#about_03 img.bg {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    object-fit: cover;
}
#about_04 {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
}
#about_04 .wrap_harf {
    padding-top: 50px;
    width: 65%;
}
#about_04 img.bg {
    position: absolute;
    left: 0;
    top: -30px;
    width: 35%;
    height: calc(100% + 30px);
    object-fit: cover;
}
#about_04 .top_txt {
    text-align: justify;
    width: calc(100% - 100px);
    max-width: 500px;
    padding: 20px 50px 0;
    background-image: url(../img/top_h3.png);
    background-size: 40px auto;
    background-repeat: no-repeat;
    background-position: right 100px top;
}
@media screen and (max-width: 768px) {
    #top_about {
        padding-top: 50px;
        padding-bottom: 0;
    }
    .wrap_harf {
        width: 100% !important;
        padding: 30px 0 !important;
    }
    .top_txt {
        width: 100% !important;
    }
    #about_01 , #about_02 , #about_03 , #about_04 {
        flex-direction: column;
    }
    #about_01 img.bg , #about_02 img.bg , #about_03 img.bg , #about_04 img.bg {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        object-fit:none;
        right: auto;
        top: auto;
    }
    #about_04 .top_txt {
        background-position: right top;
    }
    #about_03 {
       margin-top: 0;
    }
}
.flx_top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gaps) var(--gap);
    list-style: none;
    align-items: flex-start;
}
.flx_top li {
    width: calc((100% - 200px) / 3);
}

/* Works セクションのレスポンシブ対応 */
@media screen and (max-width: 768px) {
    .flx_top {
        gap: 20px;
    }
    
    .flx_top li {
        width: calc((100% - 20px) / 2);
    }
}

@media screen and (max-width: 480px) {
    .flx_top li {
        width: 100%;
    }
}
.flx_top li a {
    text-decoration: none;
    display: block;
}
.flx_top li a:hover {
    color: var(--txtColor);
}
.flx_top li a .title {
    transition: 0.3s;
}
.flx_top li a:hover .title {
    color: #999;
}
.area_name {
    display: flex;
    justify-content: center;
    font-size: 90%;
    margin: 1rem 0;
}
.area_name span {
    padding: 0px 20px;
}
.area_name .city {
    background-color: var(--borderColor);
    color: #fff;
}
.area_name .name {
    background-color: var(--mainColor);
}
.btn_normal {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.btn_normal a {
    position: relative;
    width: 100%;
    max-width: 300px;
    text-align: center;
    background-color: var(--borderColor);
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn_normal a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.btn_normal a:hover::before {
    left: 100%;
}
.btn_top {
    display: flex;
    justify-content:left;
    margin-top: 1rem;
}
.btn_top a {
    position: relative;
    width: 100%;
    max-width: 300px;
    text-align: center;
    background-color: var(--mainColor);
    color: #000;
    text-decoration: none;
    padding: 10px 0;
    overflow: hidden;
    transition: all 0.3s ease;
    letter-spacing: 0.2em;
}

.btn_top a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.btn_top a:hover::before {
    left: 100%;
}
.top_day {
    text-align: center;
    font-size: 80%;
}
.footer_img {
    display: flex;
    gap: 0;
    line-height: 0;
    list-style: none;
}
.footer_img li {
    width: 25%;
}
.footer_img img {
    width: 100%;
    height: auto;
}
.ul_footer {
    display: flex;
    list-style: none;
    gap: 100px;
    flex-wrap: wrap;
    align-items: flex-start;
    text-align: center;
    margin-top: var(--gaps);
    font-size: 80%;
}
.ul_footer li {
    width: calc((100% - 100px) / 2);
}

/* フッターのレスポンシブ対応 */
@media screen and (max-width: 768px) {
    .footer_img {
        flex-direction: row;
    }
    
    .footer_img li {
        width: 25%;
    }
    
    .ul_footer {
        flex-direction: column;
        gap: 40px;
    }
    
    .ul_footer li {
        width: 100%;
    }
    
    .ul_footer .googlemap iframe {
        height: 300px;
    }
}
.ul_footer .title {
    font-size: 140%;
}
.ul_footer .googlemap {
    margin-top: 2rem;
}
#footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#footer .wrap > p.p_center:first-of-type {
    margin-top: var(--gaps);
}

#footer .copy {
    position: relative;
    text-align: center;
    margin-top: var(--gaps);
    font-size: 80%;
    background-color: #3d2f24;
    color: #fff;
    padding: 1rem 0 1rem 0;
    margin-bottom: 0;
}

#footer .copy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: #3d2f24;
    z-index: -1;
}

#footer .wrap_s.sec_padding,
#footer .wrap.sec_padding {
    padding-bottom: 0 !important;
}

.footer_sub .wrap_s.sec_padding,
.footer_sub .wrap.sec_padding {
    padding-bottom: 0 !important;
}

#information {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    margin-bottom: -20px;
}
/* Tab Container */
.tab_container a {
    text-decoration: none;
    transition: 0.3s;
}
.tab_container a:hover {
    color: #999;
}

.tab_buttons {
    display: flex;
    gap: 0;
}

.tab_btn {
    padding: 15px 30px;
    border: none;
    background-color: var(--subColor);
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab_btn.active {
    font-weight: 600;
    background-color: #fff;
    color: var(--txtColor);
}

.tab_btn:hover:not(.active) {
    background-color: var(--subColor);
    color: #fff;
}

.tab_content {
    background-color: #fff;
    padding: 20px 50px;
}
.tab_container .day {
    margin-right: 2rem;
    font-weight: 600;
}

/* Tab Container Responsive */
@media screen and (max-width: 768px) {
    .tab_content {
        padding: 20px;
    }
    
    .tab_container .news_item p {
        display: flex;
        flex-direction: column;
    }
    
    .tab_container .day {
        margin-right: 0;
        margin-bottom: 5px;
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .tab_content {
        padding: 15px;
    }
}
.tab_panel {
    display: none;
}

.tab_panel.active {
    display: block;
}

.news_item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.news_item:last-child {
    border-bottom: none;
}

.news_item p {
    margin: 0;
    color: #000;
    font-size: 16px;
    line-height: 1.6;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .tab_btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .tab_content {
        padding: 10px 20px;
    }
    
    .news_item p {
        font-size: 14px;
    }
}

.fx_bn {
    position: fixed;
    z-index: 10;
    right: -10px;
    bottom: 20px;
    width: 80px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    line-height: 0;
    list-style: none;
}
.fx_bn li {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
    transition: filter 0.3s ease;
}
.fx_bn a {
    display: block;
    line-height: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.fx_bn a::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -150%;
    width: 50%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shine-pc 6s infinite;
    z-index: 1;
    pointer-events: none;
    transform: rotate(25deg);
    transition: left 0.4s ease;
}
.fx_bn li:nth-child(2) a::before {
    animation-delay: 3s;
}
.fx_bn li:hover a::before {
    left: 150%;
    transition: left 0.4s ease;
}
@keyframes shine-pc {
    0% {
        left: -100%;
    }
    15% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}
.fx_bn a img {
    display: block;
    opacity: 1 !important;
    filter: none !important;
}

/* スクロールアニメーション */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ローディング中はmainを非表示 */
body.is-loading #main {
    visibility: hidden;
    opacity: 0;
}

#main {
    opacity: 0;
    transition: opacity 0.5s ease;
}

body:not(.is-loading) #main {
    opacity: 1;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* KV内のslide-rightは左から右にスライド（h2_sub_s以外） */
#fv_sub .kv .slide-right {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#fv_sub .kv .slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.zoom-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.zoom-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

.stagger {
    transition-delay: 0.1s;
}

.stagger:nth-child(2) {
    transition-delay: 0.2s;
}

.stagger:nth-child(3) {
    transition-delay: 0.3s;
}

.stagger:nth-child(4) {
    transition-delay: 0.4s;
}

.stagger:nth-child(5) {
    transition-delay: 0.5s;
}

.stagger:nth-child(6) {
    transition-delay: 0.6s;
}

/* 固定バナーのスマホ対応 */
@media screen and (max-width: 768px) {
    .fx_bn {
        position: fixed;
        bottom: 0;
        left: 0;
        right: auto;
        width: 100%;
        flex-direction: row;
        gap: 0;
        z-index: 100;
        padding: 0;
        margin: 0;
    }
    
    .fx_bn li {
        width: 50%;
    }
    
    .fx_bn a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.4;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .fx_bn a::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        animation: shine-sp 6s infinite;
        z-index: 1;
        pointer-events: none;
        transform: none;
    }
    
    .fx_bn li:nth-child(2) a::before {
        animation-delay: 3s;
    }
    
    @keyframes shine-sp {
        0% {
            left: -100%;
        }
        15% {
            left: 150%;
        }
        100% {
            left: 150%;
        }
    }
    
    .fx_bn li:nth-child(1) a {
        background-color: var(--subColor);
        color: #fff;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .fx_bn li:nth-child(2) a {
        background-color: var(--mainColor);
        color: #000;
    }
    
    .fx_bn li:nth-child(1) a:hover {
        opacity: 0.8;
    }
    
    .fx_bn li:nth-child(2) a:hover {
        opacity: 0.8;
    }
    
    .fx_bn a img {
        display: none;
    }
    
    .fx_bn li:nth-child(1) a::after {
        content: "見学会のご予約";
        position: relative;
        z-index: 2;
    }
    
    .fx_bn li:nth-child(2) a::after {
        content: "お問合せ・資料請求";
        position: relative;
        z-index: 2;
    }
    #footer {
        padding-bottom: 0;
    }
}

/* 3つ並びflexレイアウト */
.flx_03 {
    display: flex;
    gap: var(--gaps);
    flex-wrap: wrap;
    list-style: none;
    align-items: flex-start;
}
.flx_03 > * {
    width: calc((100% - var(--gaps) * 2) / 3);
}

@media screen and (max-width: 768px) {
    .flx_03 {
        gap: var(--gap_sp);
    }
    .flx_03 > * {
        width: 100%;
    }
}

.normal_sec {
    padding-top: var(--sectionPadding);
    padding-bottom: var(--sectionPadding);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--gaps);
}
.eng_title {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: var(--gaps);
}
.h2_big {
    font-size: 26px;
    font-weight: 600;
    line-height: 200%;
}
.h2_normal {
    font-size: 20px;
    font-weight: 600;
    line-height: 150%;
}
.h2_mincho_large {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.5;
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
    margin-bottom: 1rem;
}

.h2_underline span {
    text-decoration: underline;
    text-decoration-color: var(--mainColor);
    text-decoration-thickness: 12px;
    text-underline-offset: -4px;
    text-decoration-skip-ink: none;
}
.txt_orange {
    color: var(--txtColorpoint);
}
.txt_orange2 {
    color: #fff;
    background-color: var(--txtColorpoint);
    border-radius: 50%;
    padding: 0.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 600;
    aspect-ratio: 1/1;
    min-width: 1.4em;
    min-height: 1.4em;
    line-height: 1;
}
.flx_03 .title {
    font-size: 18px;
    font-weight: 600;
    line-height: 200%;
    text-align: center;
}
.flx_03 .img {
    margin-bottom: 1rem;
}
.plus_box .plus_title_eng {
    transition: color 0.3s ease;
}
.plus_box a:hover .plus_title_eng {
    color: var(--txtColorpoint);
}
.plus_box .plus_title_ja {
    color: var(--txtColor);
}
.bg_gray {
    background-color: var(--bgColorgray);
}

.bg_support {
    position: relative;
    background-image: url(../img/bg_support.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 20%;
}

/* .fsメニュー */
.fs {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}
.fs.fs-active {
    opacity: 1 !important;
}

.fs-menu-item {
    opacity: 0;
    transform: translateX(-50px);
}

.fs.fs-active .fs-menu-item {
    animation: slideInFromLeft 0.5s ease forwards;
}

.fs.fs-active .fs-menu-item:nth-child(1) {
    animation-delay: 0.1s;
}

.fs.fs-active .fs-menu-item:nth-child(2) {
    animation-delay: 0.2s;
}

.fs.fs-active .fs-menu-item:nth-child(3) {
    animation-delay: 0.3s;
}

.fs.fs-active .fs-menu-item:nth-child(4) {
    animation-delay: 0.4s;
}

.fs.fs-active .fs-menu-item:nth-child(5) {
    animation-delay: 0.5s;
}

.fs.fs-active .fs-menu-item:nth-child(6) {
    animation-delay: 0.6s;
}

.fs.fs-active .fs-menu-item:nth-child(7) {
    animation-delay: 0.7s;
}

/* 下層ページheader白背景 */
#header.header {
    background: #fff;
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
    height: 80px;
}

#header.header .wrap_header {
    height: 100%;
}

#header.header.scrolled {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.fs-active #header.header {
    background: transparent !important;
    backdrop-filter: none !important;
    transition: none !important;
}

/* グローバルナビゲーション */
.global-nav {
    display: flex;
    align-items: center;
    margin-left: 30px;
}

.global-nav-list {
    display: flex;
    list-style: none;
    gap: 15px;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
}

.global-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--txtColor);
    transition: color 0.3s ease;
    white-space: nowrap;
}

.global-nav-link:hover {
    color: var(--txtColorpoint);
}

.global-nav-link .en {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 2px;
}

.global-nav-link .ja {
    font-size: 10px;
    color: #666;
}

/* SNSアイコン */
.sns-icons {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-left: 20px;
    margin-right: auto;
}

.sns-icon {
    color: var(--txtColor);
    transition: color 0.3s ease, transform 0.3s ease;
}

.sns-icon:hover {
    color: var(--txtColorpoint);
    transform: translateY(-2px);
}

.wrap_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ハンバーガーメニューを右端に配置 */
.mn {
    margin-left: 0;
}

@media screen and (max-width: 1000px) {
    .global-nav {
        display: none;
    }
    .sns-icons {
        display: none;
    }
}



#fv_sub {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 80px;
    line-height: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
#fv_sub .kv .img {
    position: relative;
    z-index: 2;
    width: 100%;

    height: 600px !important;
    object-fit: cover;
    object-position: center center;
    line-height: 0;
}

#fv_sub .kv h2 {
    position: absolute;
    z-index: 3;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 4rem;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 40px;
}

#fv_sub .kv .kv_anniversary {
    position: absolute;
    bottom: -30px;
    left: 2rem;
    z-index: 3;
    width: 150px;
    height: auto;
}
.plus_title_eng {
    font-size: 16px;
    font-weight: 600;
    line-height: 160%;
}
.plus_title_ja {
    font-size: 20px;
    font-weight: normal;
    line-height: 160%;
}
.plus_box a {
    text-decoration: none;
    display: block;
}

/* realestate */
.h2_sub {
    text-align: center;
    padding: 1rem 1rem 1.5rem 1rem;
    background-color: var(--subColor);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.h2_sub .font_eng {
    font-size: 34px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1em;
    position: relative;
}
.h2_sub .font_eng::before {
    content: '';
    position: absolute;
    top: -5px;
    right: -15px;
    width: 18px;
    height: 19px;
    background-image: url(../img/plus.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
}
.h2_sub .font_jp {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
}

/* h2_sub reveal-slide アニメーション */
.h2_sub.reveal-slide {
    position: relative;
    overflow: hidden;
}

.h2_sub.reveal-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1;
    transform: translateX(0);
    transition: transform 0.6s ease-out;
}

.h2_sub.reveal-slide.is-visible::before {
    transform: translateX(100%);
}

.h2_sub.reveal-slide .font_eng,
.h2_sub.reveal-slide .font_jp {
    position: relative;
    z-index: 2;
    transition: opacity 0.1s ease 0.5s;
    opacity: 0;
}

.h2_sub.reveal-slide.is-visible .font_eng,
.h2_sub.reveal-slide.is-visible .font_jp {
    opacity: 1;
}
.h3_company {
    font-size: 30px;
    font-weight: normal;
    line-height: 1.8;
    text-align: center;
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
}
.ul_company {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0;
    list-style: none;
    padding: 0;
    line-height: 0;
}
.ul_company li:first-child {
    grid-column: 1 / -1;
}
.company_wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.googlemap_wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.googlemap_wrap.mar {
    padding-bottom: var(--gap);
}
.re_nom {
    background: #000;
    padding: 10px 20px;
    display: block;
    font-size: 20px;
    font-weight: 700;
    background-image: url(../img/realestate_bgitem_01.png);
    background-position: right top;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.re_nom .nom {
    color: var(--txtColorpoint);
    margin-right: 5px;
}
.re_nom .point {
    color: #fff;
    font-size: 16px;
}
.re_title {
    font-size: 18px;
    font-weight: 600;
    line-height: 200%;
    text-align: justify;
    padding: 1rem 0;
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
}
.kadomaru_img img {
    border-radius: 20px;
}
.bg_baige {
    background-color: var(--bgColorbaige);
}
.h2_towamenu {
    background-color: var(--subColor);
    text-align: center;
    padding: 1.5rem 1rem;
    color: #fff;
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.8;
}
.h2_towamenu span {
    position: relative;
    z-index: 2;
}
.h2_towamenu span::before {
    content: '';
    position: absolute;
    top: -15px;
    right: -15px;
    width: 18px;
    height: 19px;
    background-image: url(../img/plus.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
}
.plus_title_ja span {
    padding-right: 30px;
    background-image: url(../img/arrow_re.png);
    background-size: 24px auto;
    background-repeat: no-repeat;
    background-position: right center;
    transition: padding-right 0.2s ease;
}
.plus_box a:hover .plus_title_ja span {
    padding-right: 35px;
}

/* 会社情報 */
.company_info {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.company_info dt {
    width: 200px;
    font-weight: 600;
    padding: 20px 0;
    border-bottom: 1px solid #000;
}
.company_info dd {
    width: calc(100% - 200px);
    padding: 20px 0 20px 30px;
    border-bottom: 1px solid #ddd;
}
.company_info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.company_info li {
    padding: 0;
}

@media screen and (max-width: 600px) {
    .h2_towamenu span::before {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .h2_mincho_large {
        font-size: 28px;
    }
    .h2_towamenu {
        font-size: 20px;
        padding: 1rem 0.5rem;
    }
    .re_nom {
        font-size: 16px;
        padding: 8px 15px;
    }
    .re_nom .point {
        font-size: 14px;
    }
    .re_title {
        font-size: 16px;
    }
    .normal_sec {
        padding-top: var(--sectionPadding_sp);
        padding-bottom: var(--sectionPadding_sp);
        gap: var(--gap_sp);
    }
    .company_info dt {
        width: 100%;
        padding: 15px;
        border-bottom: none;
        background: #f0f0f0;
    }
    .company_info dd {
        width: 100%;
        padding: 15px 0;
        border-bottom: none;
    }
}

/* コンセプト */
#fv_sub .kv h2.concept {
    justify-content: flex-start;
    padding-left: 20%;
}

/* kv_s */
.kv_s {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.kv_s .img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.kv_s::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
    z-index: 2;
    pointer-events: none;
}

.kv_s .h2_sub_s {
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
    z-index: 3;
    text-align: center;
    padding: 1rem 1rem 1.5rem 1rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* KV内のslide-rightアニメーション（transformの競合を解決） */
.kv_s .h2_sub_s.slide-right {
    transform: translateY(-50%) translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.kv_s .h2_sub_s.slide-right.is-visible {
    transform: translateY(-50%) translateX(0);
}

.h2_sub_s .font_eng {
    font-size: 34px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1em;
    position: relative;
}

.h2_sub_s .font_eng::before {
    content: '';
    position: absolute;
    top: -5px;
    right: -15px;
    width: 18px;
    height: 19px;
    background-image: url(../img/plus.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
}

.h2_sub_s .font_jp {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
}
.bg_concept {
    background-image: url(../img/bg_concept.png), url(../img/bg_concept_02.png);
    background-position: left top 100px, right bottom;
    background-repeat: no-repeat, no-repeat;
}

@media screen and (max-width: 768px) {
    .bg_concept {
        background-image: none;
    }
}
.flx_concept {
    display: flex;
    gap: calc(var(--gaps) * 1.5) var(--gaps);
    flex-wrap: wrap;
    list-style: none;
    align-items: stretch;
    justify-content: center;
}
.flx_concept > * {
    width: calc((100% - var(--gaps) * 2) / 3);
}
.flx_concept li {
    border-radius: 10px;
    border: 1px solid #000;
    background-color: #fff;
    padding: 50px 2rem 2rem;
    position: relative;
}
.flx_concept li .nomber {
    display: block;
    position: absolute;
    top: -35px;
    left: 0;
    width: 100%;
    text-align: center;
}
.flx_concept {
    margin-top: 2rem;
}
.concept_title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
    margin-bottom: 1rem;
}

.concept_title_small {
    font-size: 0.85em;
}
.dl_concept {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.dl_concept div {
    position: relative;
}

.dl_concept div:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid var(--txtColorpoint);
}
.dl_concept dt {
    background-color: var(--subColor);
    color: #fff;
    padding: 1rem 2rem 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dl_concept dt .nomber {
    font-size: 34px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.05em;

    padding-right: 1rem;
    border-right: 1px solid #fff;
}

.dl_concept dt .title {
    font-size: 24px;
    font-weight: 600;
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
}

.dl_concept dd {
    background-color: var(--bgColorbaige);
    padding: 1rem 2rem 1rem 6rem;
}

.dl_concept dd .txt_big {
    font-size: 18px;
    font-weight: 600;
}

/* dl_concept_02 */
.dl_concept_02 {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 100px;
    gap: var(--gaps);
}

.dl_concept_02::before {
    content: 'Other';
    position: absolute;
    left: -2rem;
    top: 1rem;
    transform: rotate(90deg);
    transform-origin: center;
    font-size: 50px;
    font-weight: 600;
    color: var(--subColor);
    white-space: nowrap;
}

.dl_concept_02::after {
    content: '';
    position: absolute;
    left: 30px;
    bottom: 0;
    width: 1px;
    height: calc(100% - 140px);
    background-color: var(--subColor);
}
.dl_concept_02 div {
    display: flex;
    position: relative;
}

.dl_concept_02 dt {
    background: linear-gradient(to right, var(--subColor), #999999);
    color: #fff;
    padding: 1.5rem 2rem;
    flex: 0 0 30%;
    font-size: 20px;
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
    display: flex;
    align-items: center;
    position: relative;
}

.dl_concept_02 dt::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70px;
    height: 100%;
    background-image: url(../img/bg_sankaku_glay.png);
    background-size: 100% 100%;
    z-index: 1;
}


.dl_concept_02 dd {
    background-color: var(--bgColorgray);
    padding: 1.5rem 2rem;
    flex: 1;
    position: relative;
}

.dl_concept_02 dd::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-top: 15px solid transparent;
    border-right: 15px solid var(--txtColorpoint);
    border-bottom: 15px solid var(--txtColorpoint);
}

@media screen and (max-width: 1000px) {
    .dl_concept_02 {
        padding-left: 0;
        padding-right: 0;
        gap: var(--gap_sp);
    }
    
    .dl_concept_02::before {
        display: none;
    }
    
    .dl_concept_02::after {
        display: none;
    }
    
    .dl_concept_02 dt::after {
        display: none;
    }
    
    .dl_concept_02 div {
        flex-direction: column;
    }
    
    .dl_concept_02 dt {
        flex: 1;
        width: 100%;
    }
    
    .dl_concept_02 dd {
        flex: 1;
        width: 100%;
    }
}

/* concept_other */
.concept_other {
    position: relative;
}

.concept_other .concept_h2_wrap {
    background-image: url(../img/bg_concept_03.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.concept_other .concept_h2_wrap .wrap_s {
    text-align: left;
}

@media screen and (min-width: 1001px) {
    .concept_other .concept_h2_wrap {
        height: auto;
        width: 100%;
        aspect-ratio: 1615 / 513;
    }
}

.concept_other .concept_other_wrap {
    margin-top: auto;
}

.concept_other h2 {
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 768px) {
    .flx_concept {
        gap: var(--gap_sp);
    }
    .flx_concept > * {
        width: 100%;
    }
    .flx_concept li {
        padding-top: 30px;
    }
    .flx_concept li .nomber {
        top: -25px;
    }
    .flx_concept li .nomber img {
        width: 50px;
    }
}



/* works */
.ul_category {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ul_category li {
    width: 160px;
}
.ul_category li a {
    text-decoration: none;
    color: #000;
    border: 1px solid #231815;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    text-decoration: none;
    display: block;
    text-align: center;
}
.ul_category li a:hover {
    border-color: var(--txtColorpoint);
    background-color: var(--txtColorpoint);
    color: #fff;
}

.flx_works {
    display: flex;
    gap: var(--gaps);
    flex-wrap: wrap;
    list-style: none;
    align-items: flex-start;
}

.flx_works > * {
    width: calc((100% - var(--gaps) * 2) / 3);
}

.flx_works img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
}

.flx_works .category_title,
.flx_works .title {
    text-decoration: none;
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .flx_works {
        gap: var(--gap_sp);
    }
    .flx_works > * {
        width: 100%;
    }
}

.works_nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 2rem;
}

.works_nav_prev,
.works_nav_next {
    text-decoration: none;
    color: var(--txtColor);
}
.works_nav_prev {
    padding-left: 40px;
    background-image: url(../img/works_left.png);
    background-size: 30px auto;
    background-repeat: no-repeat;
    background-position: left center;
}
.works_nav_next {
    padding-right: 40px;
    background-image: url(../img/works_right.png);
    background-size: 30px auto;
    background-repeat: no-repeat;
    background-position: right center;
}
.works_nav_prev:hover,
.works_nav_next:hover {
    color: var(--txtColorpoint);
}

.works_nav_separator {
    color: var(--txtColor);
}

.works_nav_back {
    display: flex;
    justify-content: center;
    width: 100%;
}

.works_back_btn {
    text-decoration: none;
    color: #fff;
    padding: 0.5rem 3rem;
    background-color: var(--borderColor);
    border: 1px solid var(--borderColor);
    border-radius: 100px;
    display: inline-block;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 300px;
    text-align: center;
}

.works_back_btn:hover {
    background-color: var(--txtColorpoint);
    border-color: var(--txtColorpoint);
    color: #fff;
}

/* works gallery slider */
#works_gallery {
    width: 100vw;
    height: 350px;
    margin: 0;
    overflow: hidden;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

#works_gallery .swiper-wrapper {
    align-items: center;
}

#works_gallery .swiper-slide {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#works_gallery .swiper-slide img {
    width: auto;
    max-width: 100%;
    height: 350px;
    object-fit: contain;
    display: block;
}

@media screen and (max-width: 768px) {
    #works_gallery {
        height: 300px;
    }
    
    #works_gallery .swiper-slide img {
        height: 300px;
    }
}

.works_single_title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 1rem;
}

.works_single {
    position: relative;
}

.works_single::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100px;
    background-color: #000;
}

.works_single .h2_mincho_large {
    position: relative;
    text-align: center;
}

/* footer sub */
.footer_sub {
    background-color: var(--bgColorbaige);
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.footer_sub .copy {
    position: relative;
    text-align: center;
    margin-top: var(--gaps);
    font-size: 80%;
    background-color: #3d2f24;
    color: #fff;
    padding: 1rem 0 1rem 0;
    margin-bottom: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.footer_sub .copy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: #3d2f24;
    z-index: -1;
}

.footer_sub .wrap_s.sec_padding {
    padding-bottom: 0 !important;
}

.footer_nav {
    margin: 2rem 0 2rem 0;
}

.footer_nav_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    font-size: 14px;
}

.footer_nav_list li {
    display: inline-block;
}

.footer_nav_list li:not(:last-child)::after {
    content: '│';
    margin: 0 0.2rem;
    color: var(--txtColor);
}

.footer_nav_list a {
    text-decoration: none;
    color: var(--txtColor);
    font-size: 14px;
}

.footer_nav_list a:hover {
    color: var(--txtColorpoint);
}

.footer_add {
    position: relative;
    margin-top: 2rem;
    padding-top: 2rem;
}

.footer_add::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background-color: #000;
}

/* works data */
.works_data {
    width: 100%;
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
    position: relative;
}

.works_data::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    max-height: 500px;
    background-image: url(../img/works_single_bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    z-index: -1;
    overflow: hidden;
}

.works_data h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 7rem 0 2rem 0;
    position: relative;
    z-index: 1;
}

.works_data h2::before {
    content: '';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 40px;
    background-color: #fff;
    z-index: 1;
}

.works_data .font_eng {
    font-family: "EB Garamond", serif !important;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.5;
}

.works_data .font_jp {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}

/* works voice */
.works_voice {
    width: 100%;
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
    position: relative;
}

.works_voice h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #000;
    padding: 7rem 0 2rem 0;
    position: relative;
    z-index: 1;
}

.works_voice h2::before {
    content: '';
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 40px;
    background-color: #000;
    z-index: 1;
}

.works_voice .font_eng {
    font-family: "EB Garamond", serif !important;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.5;
}

.works_voice .font_jp {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}

/* works txt box */
.works_txt_box {
    background-color: var(--bgColorbaige);
    color: #5c4a3a;
    padding: 2rem;
}

/* works voice owner */
.works_voice.owner {
    position: relative;
}

.works_voice.owner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background-image: url(../img/works_single_img_01.jpg);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
}

.works_voice.owner h2,
.works_voice.owner .works_txt_box {
    position: relative;
    z-index: 1;
}

/* works voice staff */
.works_voice.staff {
    position: relative;
}

.works_voice.staff::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-image: url(../img/works_single_img_02.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    z-index: 0;
    pointer-events: none;
}

.works_voice.staff h2,
.works_voice.staff .works_txt_box {
    position: relative;
    z-index: 1;
}
.dl_works_data_wrap {
    width: 100%;
    margin-bottom: 1.5rem;
}

.dl_works_data_caption {
    background-color: var(--txtColorpoint);
    color: #fff;
    padding: 1rem 2rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 0;
}

.dl_works_data {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

.dl_works_data > div {
    display: table-row;
}

.dl_works_data > div:nth-child(odd) {
    background-color: var(--bgColorbaige);
}

.dl_works_data > div:nth-child(even) {
    background-color: #fff;
}

.dl_works_data_support > div:nth-child(odd) {
    background-color: #fff;
}

.dl_works_data_support > div:nth-child(even) {
    background-color: var(--bgColorbaige);
}

.dl_works_data_zeh_wrap {
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.dl_works_data_zeh dt {
    width: 200px;
}

.dl_works_data_zeh dd {
    width: calc((100% - 200px) / 5);
    text-align: center;
}

.zeh_subtitle {
    font-weight: 700;
    margin-bottom: 2rem;
}

.news_wrap {
    display: flex;
    gap: 2rem;
    width: 100%;
}

.news_left {
    flex: 1;
}

.news_right {
    flex-shrink: 0;
    width: 250px;
}

.news_list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding-left: calc(var(--sectionPadding) / 3);
    padding-right: calc(var(--sectionPadding) / 3);
    margin: 0;
}

.news_list li {
    display: flex;
    gap: 2rem;
    padding-top: calc(var(--sectionPadding) / 3);
    padding-bottom: calc(var(--sectionPadding) / 3);
    border-bottom: 1px solid var(--bgColorgray);
}

.news_list li:last-child {
    border-bottom: none;
}

.news_single {
    padding-left: calc(var(--sectionPadding) / 3);
    padding-right: calc(var(--sectionPadding) / 3);
    padding-top: calc(var(--sectionPadding) / 3);
    padding-bottom: calc(var(--sectionPadding) / 3);
}

.news_list .img {
    flex-shrink: 0;
    width: 200px;
}

.news_list .img img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.news_list .txt {
    flex: 1;
}

.news_single .txt {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.news_list .title,
.news_single .title {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 18px;
    margin-bottom: 0;
}

.news_list .title .day,
.news_single .title .day {
    margin-right: 0;
    margin-left: 0;
    font-size: 18px;
}

.news_list .txt h2,
.news_single .txt h2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 18px;
}

.news_list .txt h2 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news_list .txt h2 a:hover {
    color: var(--txtColorpoint);
}

.news_list .title .cate_link,
.news_single .title .cate_link {
    margin-left: auto;
    margin-right: 0;
}

.news_list .title .cate_link a,
.news_single .title .cate_link a {
    display: inline-block;
    background-color: #000;
    color: #fff;
    font-size: 14px;
    padding: 4px 12px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.news_list .title .cate_link a:hover,
.news_single .title .cate_link a:hover {
    background-color: var(--txtColorpoint);
}

@media screen and (max-width: 1000px) {
    .news_wrap {
        flex-direction: column;
    }

    .news_right {
        width: 100%;
    }

    .news_list .title,
    .news_single .title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .news_list .title .cate_link,
    .news_single .title .cate_link {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

@media screen and (max-width: 768px) {
    .news_list li {
        flex-direction: column;
    }

    .news_list .img {
        width: 100%;
    }
}

.news_cate_list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}

.news_cate_list .title {
    font-weight: 700;
    margin-bottom: 1rem;
}

.news_cate_list li {
    margin-bottom: 1rem;
}

.news_cate_list li a {
    display: block;
    position: relative;
    background-color: var(--bgColorbaige);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    padding-left: 2.5rem;
    text-decoration: none;
    color: var(--txtColor);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.news_cate_list li a::before {
    content: '→';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--txtColor);
    transition: color 0.3s ease;
}

.news_cate_list li a:hover::before {
    color: #fff;
}

.news_cate_list li a:hover::before {
    border-color: #fff;
}

.news_cate_list li a:hover {
    background-color: var(--txtColorpoint);
    color: #fff;
}

.ul_zeh_list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ul_zeh_list li {
    text-align: center;
}

.zeh_list_title {
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--txtColorpoint);
}

.zeh_list_txt {
    line-height: 1.8;
}

@media screen and (max-width: 1000px) {
    .dl_works_data_zeh_wrap {
        overflow-x: auto;
    }
    
    .dl_works_data_zeh {
        min-width: 800px;
    }
}

.voice_section {
    border-top: 1px solid #000;
}

.voice_list {
    display: flex;
    flex-direction: column;
    gap: var(--sectionPadding);
    list-style: none;
}

.voice_list li {
    border-bottom: 1px solid #000;
    padding-bottom: var(--sectionPadding);
}

.voice_list li:last-child {
    border-bottom: none;
}

.voice_list h3 {
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.voice_list .img {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.voice_list .img > div {
    flex: 1;
}

.voice_list .img img {
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.voice_name {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.voice_name p {
    font-size: 24px;
}

.voice_name .area {
    background-color: #000;
    color: #fff;
    padding: 0.5rem 1rem;
}

.voice_btn {
    text-align: center;
    margin-top: 2rem;
}

.voice_btn a {
    display: inline-block;
    background-color: var(--txtColorpoint);
    color: #fff;
    text-decoration: none;
    padding: 20px 100px 20px 100px;
    border-radius: 100px;
    transition: all 0.3s ease;
    background-image: url(../img/arrow_re.png);
    background-size: 24px auto;
    background-repeat: no-repeat;
    background-position: right 20px center;
}
.voice_btn a:hover {
    background-position: right 15px center;
}

.case {
    font-family: "segoe-script", "Segoe Script", cursive;
    font-size: 64px;
    line-height: 1.2;
    color: #ccc;
    transform: rotate(-3deg);
    display: inline-block;
}

@media screen and (max-width: 768px) {
    .case {
        font-size: 40px;
    }
    
    .voice_list {
        gap: var(--sectionPadding_sp);
    }
    
    .voice_list li {
        padding-bottom: var(--sectionPadding_sp);
    }
    
    .voice_list h3 {
        font-size: 24px;
    }
    
    .voice_name p {
        font-size: 16px;
    }
}

.dl_works_data dt {
    display: table-cell;
    padding: 1rem 0 1rem 5rem;
    font-weight: 600;
    width: 30%;
}

.dl_works_data dd {
    display: table-cell;
    padding: 1rem;
}