/*
Theme Name: Bonvoyage HP 2025
Theme URI: https://bonvo.jp
Author: Yusuke Sekine
Description: Bonvoyage株式会社ホームページのカスタムテーマ、会社紹介、事業内容説明、philosophy、credo、プロジェクト事例紹介、ギミック少な目、和風カラー利用（納戸、樺色メイン）
Version: 1.0
Last Updated: 2025-07-17
*/

:root {
    /* カラー */
    --color-white: #FFFFFF ;
    --color-base: #F6F6F6 ;
    --color-black1: #3c3c3c ;
    --color-black2: #808080 ;
    --color-gray1: #D9D9D9 ;        /* lightgray */
    --color-gray2: #BDBDBD ;        /* gray */
    --color-gray3: #ECECEC ;
    --color-gray4: #E0E0E0 ;
    --color-nando: #007C8A ;        /* 納戸 */
    --color-usunando: #C0E1E5 ;     /* 薄納戸 */
    --color-haizakura: #E6D2C9 ;    /* 灰桜 */
    --color-zouge: #F3ECD8 ;        /* 象牙 */
    --color-kuchinashi: #FFD768 ;   /* くちなし */
    --color-kabairo: #CD5E3C ;      /* 樺色 */

    --color-background: var(--color-base) ;
    --color-contentbackground: var(--color-base) ;
	--color-overview-background: var(--color-gray1) ;
    --color-title: var(--color-gray2);
	--color-font: var(--color-black1) ;
	--color-tag-renovation: var(--color-nando) ; 
	--color-tag-cafe: var(--color-nando) ;
	--color-cat-event: var(--color-kabairo);
	--color-cat-restraunt: var(--color-kabairo) ;
	--color-cat-publicspace: var(--color-kabairo) ;
	--color-selected-page-menutext: var(--color-kabairo) ;

    /* 要素のサイズ */
    --width-full: 1205 ;
    --width-verticalheding: 85 ;
    --width-content-padding: 85 ;
    --width-content2: 950 ;
    --width-content: 82% ;
    --height-header: 80 ;

    /* その他 */
    --transition-top-eyecatch: 0.5s ;
}

html, body {
    overflow-x: hidden; /* 横スクロールを防止 */
    width: 100vw; /* 画面幅に合わせる */
    scroll-padding-top: 80px ; /* 上部メニューサイズにあわせてスクロール位置を調整 */
}

html {
	color: var(--color-font) ;
    -webkit-text-size-adjust: 100%;
}
body {
	margin:0;
	background-color: var(--color-background);
    font-family: 'Urbanist', 'Zen Kaku Gothic New', sans-serif;
    /* font-family: "Zen Kaku Gothic New", sans-serif; */
    font-style: normal;
    font-weight: 400 ;
    letter-spacing: 0.15em;
}

/** 開発中一時的に **/
.login > a{
    border-radius: 5px;
    background-color: var(--color-nando);
    color: var(--color-base);
    padding: 2px 5px;
    text-decoration: none;
}

/* ページ全体フェードインアウト */
.fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.fade.active {
  opacity: 1;
}

/** ヘッダー **/
header {
    height: 80px;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 999;
    border-bottom: 1px solid var(--color-nando);
    background-color: var(--color-base);
    transition: var(--transition-top-eyecatch);
}
.header_inner {
    height: calc(var(--height-header)*1px);
    width: calc(var(--width-full)*1px);
    padding: 1em calc(var(--width-content-padding)*1px)  1em calc(var(--width-content-padding)*0.5px);
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
    transition: var(--transition-top-eyecatch) ;
}

/** ロゴ **/
.logo {
    width:120px ;
    transition: var(--transition-top-eyecatch);
}
.logo img {
    width:100% ;
}
/** メニュー **/
.header_menu {
    width: 400px;
    height: 40px;
    top: 30px;
    z-index: 999;
    border-radius: 100px;
    border: 1px solid var(--color-kabairo);
    background-color: var(--color-white);
    padding: 0 30px;
    color: var(--color-kabairo);
    opacity: 1 ;
    transition: var(--transition-top-eyecatch);
}
.header_menu.sp { display:none ; }
.header_menu.pc {
    font-family: 'Urbanist';
    display:flex ;
}
.header_menu > ul {         /* 親メニュー */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    padding: 0;
    margin: 0;
    align-items: center;
}
.header_menu > ul > li {    /* 親メニュー項目 */
    display: flex;
    height: 100%;
    align-items: center;
}
.header_menu > ul > ul {   /* 子メニュー */
    display:none ;
    opacity: 0 ;
    position: absolute;
    top: 3.5em;
    border: 1px solid var(--color-kabairo);
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 1em 1.5em;
    list-style: none;
    flex-direction: column;
    transition:0.2s ;
    transition-behavior: allow-discrete;
    gap:0.9em ;
}
.header_menu .menu_1:hover + .menu_child_1,
.header_menu .menu_1 + .menu_child_1:hover  {
    display:flex ;
    opacity: 1;
    @starting-style {
        opacity: 0;
    }
}
.header_menu .menu_child_1 {
    width:12em ;
    transform: translateX(0em);
}

.header_menu > ul > ul li svg {
    height:1em ;
    width:1em ;
    padding: 0 0.5em 0 0;
    display: none;
}
.header_menu > ul > ul li:hover svg {
    display:block ;
}

.header_menu > ul > ul li svg g{
    fill: var(--color-kabairo);;
}

.header_menu a {
    text-decoration: none ;
    color: var(--color-kabairo);
    font-size: 0.8em;
    display: flex;
    align-items: center;
}

body.page-cases .header_menu .cases , 
body.single-case-template1 .header_menu .cases , 
body.single-case-template2 .header_menu .cases ,
body.page-aboutus .header_menu .aboutus {
    color: var( --color-selected-page-menutext );
}

.vertical-heading {
    width: calc( var(--width-verticalheding) * 1px ) ;
    padding: calc(var(--height-header) * 1px / 2) 0 0 0;    
    display: flex;
    flex-wrap: nowrap;
    border-right: 1px solid var(--color-nando);
    writing-mode: vertical-rl;
    text-orientation: sideways;
    align-items: center;
    color: var(--color-kabairo);
    font-family: "Urbanist";
    z-index:10 ;

}
.vertical-heading h1 ,
.vertical-heading h2 {
    font-size: 1em ;
    font-weight: 400 ;
}
.vertical-heading.bgc_background{
    background-color: var(--color-background ) ;
}

/*
.vertical-heading .line {
    height: 30px;
    border-right: 0.5px solid var(--color-kabairo);
    margin: 10px 0 10px 0;
}
*/
.vertical-heading-text-en {
    font-weight:600 ;
}
.vertical-heading-text-jp {
    font-family: 'Zen Kaku Gothic New' ;
}

/** フッター  **/
.footer_inner {
    width: calc( var(--width-full)*1px);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
.footer_vertical_heading {
    width: calc( var(--width-verticalheding)*1px);
    border-right: 1px solid var(--color-nando);
}
.footer_content {
    width: calc( (var( --width-full) - var(--width-verticalheding) - 1) * 1px);
    padding: 60px 140px;
    box-sizing: border-box;
    background-color: var(--color-gray3);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.5em 0;
}
.footer_content > div {
    width:50% ;
    box-sizing: border-box;
}
.footer .logo {
    width:10em ;
}
.footer .companyname {
    font-size: 1em;
    padding: 0 0 0.5em 0;
}
.footer .address {
    font-size:0.7em ;
    white-space: nowrap;
}

.footer_menu {
    display: flex;
    flex-wrap: wrap;
    padding:0 0 0 10% ;
}
.footer_menu > a {
    display: inline-block;
    width: 50%;
    margin: 0 0 1em 0;
    font-size: 0.7em;
    text-decoration: none;
    color: var(--color-font);
}
.bottom_menu {
    display: flex;
    justify-content: flex-end;
    font-size: 0.7em;
    align-items: flex-end;
}
.bottom_menu > a {
    position:relative ;
    padding: 0 1em ;
    text-decoration: none;
    color: var(--color-font);
}
.bottom_menu > a:last-child {
    padding: 0 0 0 1em ;
}
.bottom_menu > a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background-color: #999;
}

/**************** トップページ ******************/
.page-home .top_eyecatch {
    margin: 80px auto 0 auto;
    min-height: calc(100vh - 80px);
    width: calc(var(--width-full) * 1px);
}
.page-home .catchcopy{
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin: 0 auto;
    color: var(--color-nando);
    letter-spacing: 0.3em;
    line-height: 2em;
}
.page-home .top_eyecatch .top_catchcopy{
    font-size: 2.2em;
    transform: translate(0, 6em);
    font-weight: 600;
    position:relative ;
    z-index:2 ;
}
.page-home .top_eyecatch .top_eyecatch_img {
    margin: 0 auto;
    overflow: hidden;
    width: calc(var(--width-full) * 1px);
    border-radius: 0;
    transition: var(--transition-top-eyecatch);
    transform: translate(0, 6em);
    padding: 0 0 6em 0;
    z-index:1 ;
    margin: 3em auto 0 auto ;

    /* スクロール後画面全体
    width: 100vw;                   
    margin-left: calc(50% - 50vw); 
    margin-right: calc(50% - 50vw);
    */
}
.page-home .top_eyecatch .top_eyecatch_img img.pc {
    width:100% ;
    display:block ;
}
.page-home .top_eyecatch .top_eyecatch_img img.sp {
    display:none ;
}

/** トップページで下にxxx pxスクロールする前の状態 **/
.page-home .top_eyecatch.not-scrolled .top_eyecatch_img {
    width: calc(var(--width-content2) * 1px);
    border-radius: 60px;
    /* margin-left: calc(var(--width-content-padding) * 1px);   /** スクロール後画面全体 **/
    /* margin-right: unset;                                     /** スクロール後画面全体 **/
}
.page-home header.not-scrolled {
    border:0px solid transparent ;
}
.page-home header.not-scrolled > .header_inner > a >.logo {
    width:300px ;
    transform: translateY(50px);
}
.page-home header.not-scrolled .header_menu {
    opacity: 1 ;    /* 1:メニューはスクロールで消さない */
}
.page-home .not-scrolled .header_inner ,
.page-home .not-scrolled .header_menu > ul > ul {
    margin: 3em auto 0 auto ;
}


.page-home .content_inner {
    margin: 4em 0;
}
.page-home .about_us .content_inner {
    display: flex;
    flex-direction: row;
    height: 23em;
}
.page-home .about_us .content_inner .text_and_nav{
    flex:6 ;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--color-nando);
}
.page-home .about_us .catchcopy {
    flex:4;
    font-size: 1.8em;
    font-weight: 500;
    line-height: 2em;
}
.page-home .about_us .text {
    white-space: break-spaces;
    margin: 0 0 3em 0;
    font-size: 0.9em;
}
.page-home .about_us .nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap:3em ;
    width: 100%;
    font-size: 0.8em;
}
.page-home .about_us .nav > a {
    text-decoration: none ;
    color: var(--color-nando) ;
}
.page-home .about_us .nav > a > div {
    display: flex ;
}
.page-home .about_us .nav > a > div .arrow {
    display: flex;
    align-items: flex-end;    
}
.page-home .about_us .nav span {
    border-bottom: 1px solid var(--color-nando);
    margin: 0 0.6em 0 0;
    padding: 0 1.6em 0.1em 0;
    height: 1.6em;
}
.page-home .about_us .nav .arrow > svg {
    width:1.4m ;
    height:1.4em ;
}

.page-home .content.our_business {
    min-height: unset;
    display: flex;
    max-width: unset;
    width: calc((var(--width-content2) + 40)*1px);
    margin: 4em auto;
}
.page-home .content.our_business .circle {
    display: flex;
    flex-direction: column;
    width: 40%;
    aspect-ratio: 1;
    border: 3px solid var(--color-nando);
    border-radius: 100%;
    position: relative;
    background-color: var(--color-white);
    transition: 0.2s ;
    overflow:hidden ;
}
.page-home .content.our_business .circle.circle_1 {
    z-index:5 ;
}
.page-home .content.our_business .circle.circle_2 {
    z-index:4 ;
    margin-left:-20px ;
}
.page-home .content.our_business .circle.circle_3 {
    z-index:3 ;
    margin-left:-20px ;
}
.page-home .content.our_business .circle .title {
    text-align: center;
    font-size: 1.6em;
    letter-spacing: 0.15em;
    font-weight: bold;
    height: 35%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin:0 0 0.5em 0 ;
    color: var(--color-nando);
}
.page-home .content.our_business .circle .img {
    width: 50%;
    margin: 0 auto 0.5em auto;
}
.page-home .content.our_business .circle .img img {
    width:100% ;
}
.page-home .content.our_business .circle a {
    color:var(--color-font);
    text-decoration: none ;
    height:100% ;
}
.page-home .content.our_business:hover .circle a {
    color:var(--color-nando);
}
.page-home .content.our_business .circle .to_detail {
    font-size: 0.8em;
    height:2em ;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-home .content.our_business .circle .to_detail span{
    border-bottom: 1px solid var(--color-nando);
    color:var(--color-nando);
    padding: 0 1.5em 0.2em 0;
    margin: 0 0.6em 0 0;
}
.page-home .content.our_business .circle .to_detail .arrow {
    display: flex;
    align-items: flex-end;
    height: 100%;    
}
.page-home .content.our_business .circle .to_detail .arrow svg{
    width: 1.4em;
    height: 1.4em;
}
.page-home .content.our_business .circle .to_detail .arrow svg g {
    fill: var(--color-nando);
}
.page-home .content.our_business .circle:hover {
    color:var(--color-nando);
    /* border: 1px solid var(--color-nando); */
    /* box-shadow: inset 0 0 0 1px var(--color-nando); */
    background-color: var(--color-usunando);
    z-index:6 ;
}
.page-home .content.our_business .circle:hover .to_detail span{
    /* border-bottom: 1px solid var(--color-nando); */
}
.page-home .content.our_business .circle:hover .to_detail svg g{
    /* fill:var(--color-nando); */
}
.page-home .content.our_business .circle:hover a {
    /* color:var(--color-nando); */
}

.selected-cases {
    margin:4em 0 ;
}

/* 三角付きリンク */
.nav_arrow {
    text-decoration: none;
    text-align: right;
    display: flex;
    justify-content: center;
}
.nav_arrow > div {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}
.nav_arrow .text {
    border-bottom: 1px solid var(--color-nando);
    padding: 0 1em 0.2em 0;
    margin: 0 0.5em 0 0;    
}
.nav_arrow span {
    color: var(--color-nando);
    font-size: 0.9em;    
}
.nav_arrow .arrow {
    display: flex;
    align-items: flex-end;    
}
.nav_arrow .arrow svg {
    height: 1.1em;    
}



/**************** 事例ページ 共通 ******************/
.content_outer {
	width:100% ;
	background-color: var(--color-background);
}
.content_mid_outer {
	width: calc( var(--width-full) * 1px) ;
	margin:auto ;
	background-color: var(--color-contentbackground);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-top:1px solid var(--color-nando);
}
.content_mid_outer:first-child {
    padding: calc(var(--height-header)*1px) 0 0 0 ;
}
.content {
	max-width: calc( var(--width-content2) * 1px ) ;
	width: calc( var(--width-content2) * 1px ) ;
	margin:auto ;
}
.single-case .content {
    min-height:100vh;
}
.content_header {
	position: relative ;
	height:600px;
}
.eyecatch_img {
	width:88% ;
	max-height: 600px;
	position: absolute;
	right:0 ;
	border-bottom-left-radius: 10%;
    overflow: hidden;
}
.eyecatch_img img {
	width:100% ;
	height: 600px;
	object-position: center;
    object-fit: cover;
}
.title_outer {
	z-index:2 ;
	max-width: calc( var(--width-content) + 10% );
	position:absolute;
	bottom:0 ;
}
.title_outer .title{
	font-size: 2.3em;
    letter-spacing: 0.2em ;
    font-weight: 600;
    line-height: 1.7em;
    background-color: #FFF;
    padding: 10px;
    display: inline;
    box-decoration-break: clone;
}
.title_outer .tags {
    /* min-height: 50px; */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding: 1.5em 0 0 0;
    gap: 0.2em 0.5em;
}
.tags .tag {
    font-size: 0.8em;
    padding: 5px 20px;
    border-radius: 100px;
    color: #FFF;
    background-color: var(--color-kabairo);
}
.tag.tag-renobation {
	background-color: var(--color-tag-renovation) ;
}
.tag.tag-cafe {
	background-color: var(--color-tag-cafe) ;
}
.tag.tag-event {
	background-color: var(--color-cat-event) ;
}
.category.cat-activation-of-publicspacese {
	background-color: var(--color-cat-publicspace) ;
}
.category.cat-space-management {
	background-color: var(--color-cat-publicspace) ;
}
.category.cat-arcitectural-production {
	background-color: var(--color-cat-publicspace) ;
}


/*** オーバービュー、またはリクエスト ***/
.overviews {
	width:100% ;
	background-color: var(--color-overview-background) ;
	border-radius:10px ;
	overflow: hidden;
	margin: 8em 0 0 0 ;
}
.overviews_title {
    font-family: "Urbanist", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.8em;
    letter-spacing: 0.25em;
	transform: translate(-0.1em, -0.3em);
    color: var(--color-contentbackground);
}
.overviews_texts {
	width: calc(var(--width-content) + 0px);
    padding-inline-start: 20px;
    margin: 3em auto;
    font-size: 0.9em;
}
.spc_after_overviews {
	height:6em ;
}
/* オーバービューのリスト行先頭の丸 */
.overviews_texts {
    list-style: none;
    position: relative;
}
.overviews_texts li {
    position: relative;
    padding-left: 30px;
    padding-bottom: 2em;
}
.overviews_texts li::before {
    content: "●"; /* 白丸 */
    font-size: 14px;
    color: var(--color-background);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 0;
    top: 1px;
    text-align: center;
}
.overviews_texts li::after {
    content: "";
    position: absolute;
    left: 6px; /* 丸の中心に合わせる */
    top: 15px;
    width: 2px; /* 線の太さ */
    height: 100%; /* 縦の線 */
    background-color: var(--color-background);
}
.overviews_texts li:last-child::after {
    display: none; /* 最後のアイテムは線を表示しない */
}

/*** プロジェクト情報（所在、クライアント、着手期間） ***/
.project_info {
    width: calc( var(--width-content2) * 1px ) ;
    margin: 6em 0 6em 0;
}
.project_info > table {
    width:var(--width-content) ;
    margin:auto ;
    border-collapse: collapse;
}
.project_info > table td {
    padding: 6px 2em;
}
.project_info > table td:nth-child(1) {
    border-right:1px solid var(--color-overview-background);
    width: 8em;
}
.project_info > table tr.row td ,
.project_info > table tr.row_last td {
        border-top:1px solid var(--color-overview-background);
}


/*** 事例ページ -　内容（テキストと画像） ***/
.content_img_and_texts_outer {
	width: var(--width-content);
	margin: auto;
}
.content_img_and_text {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-bottom: 6em;
}
.content_img_and_text .text_outer {
	width:60% ;
	padding-right:5% ;
}
.content_img_and_text .text_outer .subtitle {
    font-size: 1.7em;
    font-weight: 600;
    letter-spacing:0.22em ;
    padding-bottom: 1em;
}
.content_img_and_text .img_outer {
	width:40% ;
}
.content_img_and_text .img_outer img {
	width: 100%;
	object-fit: cover;
}
.content_img_and_text .text {
    font-size:0.9em ;
    padding-right:2em ;
}

.content_img_and_text.noimage .text_outer{
    width:unset ;
    padding-right:unset ;
}
.content_img_and_text.noimage .text_outer .text {
    padding-right:unset ;
}
.content_img_and_text.noimage .img_outer {
    display:none ;
}

/*** プロジェクト担当者 ***/
.project_team_members {
	width: var(--width-content);
	margin: auto;
    font-size:0.9em ;
    margin: 0 auto 6em auto;
}


/** GALLERY - ギャラリー **/
.gallery_outer {
	padding: 0 0 7em 0;
}
.gallery_outer.white {
	width: calc( var(--width-full) * 1px) ;
    transform: translateX(-50px);
    background-color: #FFF;
    padding-top:6em ;
}
.gallery {
	width: calc( var(--width-content2) * 1px ) ;
	margin:auto ;
}
.gallery .title {
	font-family: "Urbanist", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.8em;
    letter-spacing: 0.15em;
	color: var(--color-title) ;
}
.gallery .imgs {
	display: flex ;
	max-width: 100%;
	justify-content: space-between;
	margin: 3em 0 0 0;
    flex-wrap: wrap;
    gap: 1.5em;
}
.gallery .img_outer {
	width:31% ;
}
.gallery .img_outer img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 286 / 186;
}


/** 事例一覧  **/
.page-cases .content {
    min-height:100vh ;
}
/* 事例絞り込みボタン */
.page-cases .selectors {
    color: var(--color-nando);
    margin: 4em 0;
}
.page-cases .selectors .title {
    display: flex;
    white-space: nowrap;
    align-items: center;
    border-right: 1px solid var(--color-nando);
    padding: 0.3em 0.5em;
    min-width:5em ;
}
.page-cases .selectors_category {
    margin: 0 0 1.5em 0;
}
.page-cases .selectors_category ,
.page-cases .selectors_tag {
    display: flex;
    flex-wrap: nowrap;
    gap: 1em;    
}
.page-cases .selectors_category > div ,
.page-cases .selectors_tag > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 0.5em;    
}
.page-cases .selector_category , 
.page-cases .selector_tag {
    padding: 0.4em 0.8em;
    border-radius: 5em;
    cursor: pointer;
    user-select: none;
    background-color: var(--color-white);
}
.page-cases .hidden-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
}
.page-cases .hidden-checkbox:checked + .selector_tag,
.page-cases .hidden-checkbox:checked + .selector_category {
    background-color: var(--color-nando);
    color: var(--color-base);
}
.page-cases .page-title {
    font-family: "Urbanist", sans-serif;
    font-weight: 700;
    font-style: normal;
    margin: 0 auto;
    padding: 8em 0 0 0;
    font-size: 3em;
    text-align: center;
    color: var(--color-title);
}
.page-cases .page-subtitle {
    text-align: center;
    color: var(--color-title);
}

/* 事例一覧の枠 */
.cases_outer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin: 4em auto 4em auto;
    gap: 3em 2.5em;
}
.cases_outer > a {
    width: 100%;
    text-decoration: unset;
    color: unset;
}

/* 事例一覧での事例 */
.case_item_outer {
    width: 100%;
    position:relative ;
    display: block ;
    transition: all 0.15s ease-in-out;
}
.case_item_outer:hover {
    transform: translateY(-10px);
}
.case_item_outer .categorys {
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4em;
    z-index:1 ;
}
.case_item_outer .categorys .category{
    background-color: var(--color-kabairo);
    color: var(--color-white);
}
.case_item_outer .categorys p {
    background-color: var(--color-background);
    padding: 8px 16px;
    margin: 0 6px 0 0;
    border-radius: 50px;
    font-size: 0.7em;
}
.case_item_outer .tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
        gap: 0.3em;
}
.case_item_outer .tags .tag {
    background-color: var(--color-gray4);
    color: var(--color-black2);
    font-size: 0.6em;
    border-radius: unset;
    padding: 2px 6px;
    margin: unset;
    margin-right: 0.2em;
}

.case_item_outer .img_text {
    display: block ;
}
.case_item_outer .cases_eyecatch_img {
    width: 100%;
    display:block ;
    aspect-ratio: 51 / 31;
    position:relative ;
    margin-bottom: 0.5em;
}
.case_item_outer .cases_eyecatch_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin-top: calc(3px + 0.7em);
    border-top-right-radius: 70px;
}
.case_item_outer .title {
    font-size: 1em;
    font-weight: 600;
    font-family: 'Zen Kaku Gothic New';
    min-height: 5em;
    display: block ;
    margin-bottom: 0.5em;
}
.case_item_outer .title br {
    display:none ;
}
.case_item_outer .project_info {
    margin:unset ;
    width:100% ;
    font-size: 0.6em;
}

/*
.case_item {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.case_item.visible {
  opacity: 1;
}
*/

.case_item {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.case_item.visible {
  opacity: 1;
}
.case_item.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute; /* レイアウトに影響させないよう調整可能 */
  z-index: -1;
}



.to_cases {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.to_cases .to_cases_text {
    border-bottom: 1px solid var(--color-nando);
    padding: 0 2em 0.5em 0;
    margin: 0 1em 0 0;
    color: var(--color-nando);
}
.arrow.right.nando > svg > g{
    fill: var(--color-nando);
}

/**************** About us ******************/
.page-aboutus .members_outer  {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 4em auto;
    gap: 1.5em;
}
.page-aboutus .member {
    position: relative ;
    width: calc(var(--width-content2) / 3 * 1px - 1em);
    border-radius: 16px;
    overflow: hidden;    
}
.page-aboutus .member > img {
    width:100% ;
    filter: grayscale(100%);
}
.page-aboutus .member .position {
    position: absolute ;
    top:50% ;
    left: 10%;
    font-size: 0.7em;
    color: var(--color-white);
}
.page-aboutus .member .name {
    position: absolute;
    top: calc(50% + 1em);
    left: 10%;
    font-size: 1.2em;
    color: var(--color-white);
}
.page-aboutus .member .roman_name {
    position: absolute;
    bottom: -1px;
    left: 1px;
    font-size: 1.7em;
    letter-spacing: 0.15em;
    font-family: 'Urbanist';
    font-weight: 700;
    color: var(--color-kabairo);
}

/** About us ココから追加 **/

.top_section {
    padding: 50px 0 0 0;
    margin: 0 0 4em 0;
}
.mid_section {
    margin-bottom: 4em;
}
.last_section {
    margin-bottom: 10em;
}
.top_section .title {
    white-space: break-spaces;
    font-size: 2em;
    font-weight: 600;
    color: var(--color-nando);
    letter-spacing: 0.15em;
}
.top_section .text,
.mid_section .text {
    white-space: break-spaces;
    font-size: 0.9em;
    margin: 0 0 4em 0;
}
.top_section .text {
    padding: 2em 0 0 0;
}
.mid_section .title ,
.last_section .title {
    white-space: break-spaces;
    font-size: 1.5em;
    font-weight: 600;
    color: var(--color-nando);
    letter-spacing: 0.15em;
    padding: 0 0 1em 0;
}
.page-aboutus .mid_content {
    border: 1px solid var(--color-nando);
    border-radius: 40px;
    padding: 6em 4em;
    background-color:var(--color-white) ;
}
.page-aboutus .mid_section .num {
    font-family: 'Urbanist';
    font-size: 4em;
    color: var(--color-base);
    -webkit-text-stroke: 1px var(--color-nando);
    font-weight: 900;
    letter-spacing: 0.15em;
    transform: translate(0px, 0.6em);
}
.mid_section .last_text1 ,
.mid_section .last_text2 {
    white-space: break-spaces;
    font-size: 0.9em;
}
.mid_section .last_text1 {
    margin-bottom: 2em;
    color:var(--color-nando);
}
.mid_section .last_text2 {
    margin:unset ;
}

#philosophy .content, #credo .content  {
    margin:4em auto ;
}
#philosophy .title, #credo .title  {
    white-space: break-spaces;
    font-size: 1.5em;
    font-weight: 600;
    color: var(--color-nando);
    letter-spacing: 0.15em;
    padding: 0 0 1em 0;
}
#philosophy .text, #credo .text  {
    white-space:break-spaces ;
    font-size: 0.9em;
}

.company_profile_table {
    border-collapse: collapse;
    width: calc(var(--width-content) + var(--width-content-padding) * 1px);
    /* width: 100% */
    margin: 5em auto;
    font-size: 0.9em;
}
.company_profile_table > tbody >  tr > td {
    padding: 0.2em 2em;
}
.company_profile_table > tbody >  tr:not(:last-child) > td {
    border-bottom: 1px solid var(--color-nando) ;
}
.company_profile_table > tbody >  tr > td:first-child {
    border-right: 1px solid var(--color-nando) ;
    width:6em ;
    padding-top: 1em;
    vertical-align: top;
}
.company_profile_table > tbody > tr:last-child > td ,
.company_profile_table > tbody > tr:first-child > td {
    height: 0.8em;
    padding: unset;
}
.company_profile_table > tbody >  tr > td > ul {
    margin-left: -1em ;
}
.company_profile_table .address_title {
    color: var(--color-nando);
    font-weight: bold;
    font-size:0.9em ;
}


.section_members .first_photo {
    width: calc(var(--width-full) * 1px);
    transform: translateX(calc((var(--width-verticalheding) + var(--width-content-padding)) * -1px));
}
.section_members .first_photo img ,
.section_members .last_photo img {
    width:100% ;
}
.section_members .last_photo {
    width: calc((var(--width-full) - var(--width-content-padding)) * 1px);
    transform: translateX(calc(var(--width-content-padding) * -1px));
}

.modal_members {
    display:none ;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal_members .modal_card {
    display:none ;
    width: calc(var(--width-content2) * 0.8px);
}
.modal_members .modal_card.open {
    display:block ;
}
.modal_members.open {
    display:flex ;
}
.modal_members .modal_card .modal_card_inner {
    background-color: var(--color-gray1);
    border-radius: 30px;
    padding: 3em;
    position: relative;
}
.modal_card .photo_and_name {
    display: flex;
    flex-direction: row;
}
.modal_card .photo {
    flex: 6.5;
}
.modal_card .photo img {
    width:100% ;
}
.modal_card .namebox {
    display: flex;
    flex-direction: column;
    flex: 3.5;
    text-align: center;
    justify-content: center;
    align-items: flex-start;
    margin:0 0 0 1em ;
}
.modal_card .namebox .name{
    font-size: 2em;
    font-weight: 600;
    letter-spacing: 0.15em;
}
.modal_card .namebox .name_roman{
    font-size: 1.5em;
    font-family: 'Urbanist';
    font-weight: 600;
    margin: 0.3em 0 0 0;
    color: var(--color-kabairo);
}
.modal_card .profile {
    min-height: 12em;
    max-height: 12em;
    margin: 3em 0;
    overflow-y: auto;
}
.modal_card .profile_inner {
    border-left: 1px solid var(--color-font);
    padding: 0 0 0 1em;
}
.modal_card .profile_inner span{
    white-space: break-spaces;
}
.modal_card .nav {
    display: flex;
    justify-content: space-between;
    margin-top: 2em;
}
.modal_card .nav .name-box {
    display:flex ;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
}
.modal_card .prev .arrow {
    width: 1em;
    padding: 0 1em 0 0;
}
.modal_card .next .arrow {
    width: 1em;
    padding: 0 0 0 1em;
}
.modal_card .arrow img {
    width:100% ;
}
.modal_card .name-block {
    border-bottom: 1px solid var(--color-font);
    padding: 0 0 0.2em;
}

/* バツボタン */
.close-btn {
    position: relative;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.close-btn::before,
.close-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #333;
    transform-origin: center;
}
.close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.modal_close_btn.close-btn {
    width: 2em;
    height: 2em;
    position:absolute ;
    right:0 ;
    right: 1.5em;
    top: 1.5em;
}

/* お問い合わせフォーム */
.page-contact h2 {
    color: var(--color-nando);
}
.page-contact form > p > label {
    font-weight: 600;
    font-size: 1em;
}
.page-contact input[type="text"],
.page-contact input[type="email"],
.page-contact textarea {
    border: 1px solid var(--color-nando);
    border-radius: 5px;
    width: 100%;
    padding: 0.6em 1em;
}

/* カスタムラジオボタン */
.page-contact input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.page-contact .wpcf7-radio .wpcf7-list-item {
    margin: 0;
}
.page-contact .wpcf7-radio .wpcf7-list-item label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    display: inline-block;
    margin-right: 20px;
}
.page-contact .wpcf7-radio .wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-nando);
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
}
.page-contact input[type="radio"]:checked + .wpcf7-list-item-label::before {
    background-color: var(--color-nando);
}

/* カスタムチェックボックス */
.page-contact input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.page-contact .wpcf7-checkbox .wpcf7-list-item ,
.page-contact .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}
.page-contact .wpcf7-checkbox label ,
.page-contact .wpcf7-acceptance label{
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
}
.page-contact .wpcf7-checkbox .wpcf7-list-item-label::before,
.page-contact .wpcf7-acceptance .wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-nando);
    background-color: #fff;
    box-sizing: border-box;
}
.page-contact input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 40%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 12px;
    border-right: 2px solid var(--color-white);
    border-bottom: 2px solid var(--color-white);
}
.page-contact input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    background-color: var(--color-nando)
}
.wpcf7-acceptance a {
    color:var(--color-nando);
}

input.wpcf7-form-control.wpcf7-submit.has-spinner.submit_contact_form {
    border: 1px solid var(--color-nando);
    border-radius: 3px;
    background-color: var(--color-nando);
    color: var(--color-white);
    padding: 0.4em 2em;
}
input.wpcf7-form-control.wpcf7-submit:disabled {
    filter: grayscale(1);
    opacity: 0.5;
}
.wpcf7-not-valid-tip {
    color: var(--color-kabairo);
    font-size: 0.7em;
}
.wpcf7-form > p {
    margin:2em 0;
}
.wpcf7-form > p:nth-last-child(4) {
    margin:2em 0 0.5em 0 ;
}
.wpcf7-form > p:nth-last-child(3) {
    margin:0.5em 0 2em 0 ;
}
span.wpcf7-form-control-wrap {
    margin-top: 0.7em;
    display: inline-block;
    width: 100%;
}

/** 事業ページ **/
.page-business .content ,
.page-business .content .content_header {
    height: unset ;
    min-height: unset ;
}
.page-business .content_header_inner {
    display: flex;
    flex-direction: row;
    width: calc(( var(--width-content2) + var(--width-content-padding) + var(--width-verticalheding) / 2) * 1px);
    margin-left: calc( ( var(--width-content-padding) + var(--width-verticalheding) / 2) * -1px);
    padding: 3em 0;
}
.page-business .content_header_inner .header_image_outer {
    flex:4 ;
    padding: 0 4em 0 0;
}
.page-business .header_image_outer .circle {
    border-radius: 100%;
    border: 3px solid var(--color-nando);
    background-color: var(--color-usunando);
    width: 100%;
    aspect-ratio: 1;
    position: relative;
}
.page-business .header_image_outer .circle .header_title {
    font-size: 1.7em;
    color: var(--color-nando);
    font-weight: 600;
    text-align: center;
    margin-top: 20%;
    /* display: inline-block; */
}
.page-business.arcitectural-production .header_image_outer .circle .header_title_img {
    width: 90%;
    right: -10%;
    bottom: -6%;
    position: absolute;
}
.page-business.activation-of-publicspaces .header_image_outer .circle .header_title_img {
    width: 92%;
    right: -16%;
    bottom: -1%;
    position: absolute;
}
.page-business.space-management .header_image_outer .circle .header_title_img {
    width: 74%;
    right: -3%;
    bottom: 2%;
    position: absolute;
}


.page-business .header_image_outer .circle .header_title_img img {
    width:100% ;
}
.page-business .content_header_inner .header_text {
    flex:6 ;
    display: flex;
    flex-direction: column;
    margin: 4em 0 0 0;
}
.page-business .content_header_inner .header_text .header_text_head {
    margin-bottom: 1em;
    margin-bottom: 1em;
    color: var(--color-nando);
    font-size: 1.5em;
    font-weight: 600;
}
.page-business .content_header_inner .header_text .header_text_text {
    font-size:0.9em ;
    white-space: break-spaces;
}

/* コンタクトフォーム */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--color-nando);
    width: 100%;
    margin: 1em 0 2em 0;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--color-nando);
}
.wpcf7 form.invalid .wpcf7-response-output {
    border-color: var(--color-kabairo) ;
}

/* 404 */
.page-404 .content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60svh;
}
.page-404 .content h2 {
    font-size: 8em;
    text-align: center;
    color: var(--color-gray2);   
}

a.no-click {
    pointer-events: none;
    cursor: default;
    color: inherit;
    text-decoration: none;
}

/*********************************************************/
/*  スマホ用  （横幅767px以下）
/*********************************************************/

@media screen and (max-width: 767px) { 
    body {
        font-size:1em ;
    }
    .header_inner {
        width: 100vw;
        padding: 0 20px 0 20px;
    }
    .header_inner .logo {
        width:90px ;
    }


    /* メニュー */
    .header_menu.sp {
        display:block ;
        width: 46px;
        height: 46px;
        padding: 0;
    }
    .header_menu.pc { display:none ; }
    .header_menu.sp .menu-toggle { display:none ;} /* チェックボックス自体 */

    .header_menu.sp .logo {
        width:180px ;
        margin: 0 0 3em 0;
    }

    .menu-icon {
        cursor: pointer;
        display: inline-block;
        width: 46px;
        height: 46px;
        position: relative;
        z-index:910
    }
    .menu-icon span {
        background-color: var(--color-kabairo);
        display: block;
        width: 20px;           
        height: 1px;           /* 棒の太さ */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.4s ease;
    }
    .menu-icon span:nth-child(1) { top: 14px; }
    .menu-icon span:nth-child(2) { top: 22.5px; } /* 中央バー */
    .menu-icon span:nth-child(3) { top: 31px; }
    .menu-toggle:checked + .menu-icon span:nth-child(1) {
        top: 22.5px;
        transform: translateX(-50%) rotate(45deg);
    }
    .menu-toggle:checked + .menu-icon span:nth-child(2) {
        opacity: 0;         
    }
    .menu-toggle:checked + .menu-icon span:nth-child(3) {
        top: 22.5px;
        transform: translateX(-50%) rotate(-45deg);
    }
    .header_menu_sp_content {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        display: block;
        position: fixed;
        top: 1em;
        left: 1em;
        width: calc(100vw - 2em);
        background-color: white;
        border: 1px solid var(--color-kabairo);
        border-radius: 20px;
        padding: 6em 0 3em 3em;
        box-sizing: border-box;
        padding: 70px 0 3em 3em;
    }
    .menu-toggle:checked ~ .header_menu_sp_content {
        z-index:900 ;
        opacity: 1;
        visibility: visible;
    }
    .header_menu_sp_content > li {
        display: inline;
        font-size: 1.8em;
        font-weight: 500;
        line-height: 2em;
    }
    .header_menu_sp_content > ul {
        padding:0 ;
        margin:0;
    }
    .header_menu_sp_content > ul > li {
        display: inline;
        font-size: 1.2em;
        line-height: 1.8em;
    }

    .menu-toggle:checked ~ .logo {
        z-index:1010 ;
        width:6em ;
        position: fixed ;
        left:4em ;
    }


    .footer_vertical_heading {
        display:none ;
    }
    .footer_inner {
        width:100vw ;
    }
    .footer_content {
        padding: 80px 40px;
        width: 100vw;
    }
    .footer_content > div {
        width:100% ;
    }
    .footer .logo {
        width:150px ;
    }
    .footer .logo img {
        height: unset ;
    }
    .footer_menu {
        padding: unset ;
    }
    .footer_menu > a {
        font-size: 0.7em ;
    }
    .bottom_menu {
        justify-content: center;
        font-size: 0.5em;
    }
    .bottom_menu > a:first-child {
        padding: 0 1em 0 0 ;
    }
    .footer .address {
        white-space: break-spaces; 
    }

    .content_mid_outer {
        width:100% ;
        flex-direction: column;
    }
    .content {
        width:100% ;
        margin-bottom:2em ;
        padding:0em 1em ;
        box-sizing: border-box;
    }
    .content_header {
        height:70svh;
    }

    .vertical-heading {
        width: 100vw;
        height: 50px ;
        font-size: 0.8em;
        writing-mode: horizontal-tb;
        text-orientation: unset;
        padding: 0 0 0 20px;
        border-bottom: 1px solid var(--color-nando);
        border-right: unset;
    }

    /* トップページ */
    .page-home header.not-scrolled > .header_inner > a >.logo {
        width:180px ;
    }
    .page-home .not-scrolled .header_inner, .page-home .not-scrolled .header_menu > ul > ul {
        margin: 0 auto;
    }
    .page-home .top_eyecatch .top_catchcopy {
        font-size:1.6em ;
        line-height:1.8 ;
        transform: translate(0, 4em);
    }
    .page-home .top_eyecatch {
        width:100vw ;
    }
    .page-home .top_eyecatch .top_eyecatch_img {
        transition: var(--transition-top-eyecatch);
        width: 100%;
        margin-left: unset;
        margin-right: unset;
        margin: 0 auto;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;    
    }
    .page-home .top_eyecatch.not-scrolled .top_eyecatch_img {
        border-radius: 30px;
        width: 85%;
        margin-left: unset;
        margin-right: unset;
        margin: 1em auto 0 auto ;
    }
    .page-home .top_eyecatch .top_eyecatch_img img.sp {
        width:100% ;
        object-fit: cover;
        display:block ;
    }
    .page-home .top_eyecatch .top_eyecatch_img img.pc {
        display:none ;
    }
    .page-home .top_eyecatch.not-scrolled .top_eyecatch_img img {
        min-width: 100%;
        min-height: 100%;
    }

    .page-home .about_us .content_inner {
        margin:4em 0 0 0; 
    }

    .page-home .content.our_business {
        flex-direction: column;
        padding: unset ;
    }
    .page-home .content.our_business .circle {
        width:80vw ;
    }
    .page-home .content.our_business .circle.circle_1 {
        margin: 0 0 0 -10vw   
    }
    .page-home .content.our_business .circle.circle_2 {
        margin-left: unset;
        margin: -6em 0 0 40vw;        
    }
    .page-home .content.our_business .circle.circle_3 {
        margin-left: unset;
        margin: -6em 0 0 -10vw   
    }
    .page-home .about_us .content_inner {
        flex-direction: column-reverse;
        height:unset ;
    }
    .page-home .about_us .content_inner .text_and_nav {
        flex:unset ;
    }
    .page-home .about_us .catchcopy {
        flex:unset ;
    }
    .page-home .about_us .catchcopy {
        font-size:1.5em ;
    }
    .page-home .about_us .text {
        width: 75%;
        margin: 2em auto 2em auto;  
    }
    .page-home .about_us .nav {
        width: 75%;
        margin: 0 auto;
        gap: 1em;
        flex-direction: column;    
    }
    .page-home .about_us .nav span {
        padding: 0 0.8em 0.2em 0;
        margin: 0 0.25em 0 0;
    }

    .title_outer {
        max-width:97% ;
    }
    .title_outer .title{
        font-size: 20px;
        line-height: 1.8;
    }
    .title_outer .tags {
        min-height: 30px;
        padding: 1em 0 0 0;
    }
    .tags .tag {
        font-size: 0.8em;
        padding: 3px 10px;
    }
    .eyecatch_img {
        width: calc(100% + 1em);
        max-height: 50svh;
        transform: translateX(1.1em);
    }

    .overviews {
        margin: 4svh 0 4svh 0 ;
        min-height: calc( 50svh - 8svh );
    }

    .overviews_texts {
        width: 90%;
        padding: 0 0 0.5em 0; 
    }

    .gallery {
        width:100% ;
    }
    .gallery .imgs {
        flex-direction: column;
    }
    .gallery .img_outer {
        width: 100%;
    }
    .gallery_outer.white {
        width: 100%;
        transform: unset ;
        padding-top:6em ;
    }

    .content_img_and_text .text {
        font-size: 1em;
        padding-right:unset ;
    }

    .project_info {
        width: 100%;
    }
    .project_info > table {
        width: 90%;
    }
    .project_info > table td {
        padding: 6px 1em;
    }
    .project_info > table td:nth-child(1) {
        width: 7em;
    }

    .case-template-1 .content_header ,
    .case-template-2 .content_header {
        height: 70svh;
        margin: 0 0 calc(30svh - 30px - var(--height-header) * 1px) 0;
    }
    .case-template-1 .content_header .eyecatch_img img,
    .case-template-2 .content_header .eyecatch_img img {
        height: 50svh;
    }

    .content_img_and_texts_outer {
        width: 90%;
    }
    .content_img_and_text {
        flex-direction: column;
    }
    .content_img_and_text .text_outer {
        width: 100% ;
        padding-right: unset ;
    }
    .content_img_and_text .img_outer {
        width: 100% ;
        margin-top: 1em;
    }
    .project_team_members {
        width: 90%;
    }

    /* 事例一覧共通 */
    .cases_outer {
        margin: 0 auto ;
        gap: 2.5em 0;
    }
    .cases_outer {
        grid-template-columns: repeat(1, 1fr);
    }
    .case_item_outer .categorys {
        margin: -1em 0 0 1em ;
    }
    .case_item_outer .img_text {
        display: flex;
        flex-direction: row;
        max-height: 130px;
        height: 130px;
        background-color: var(--color-white);
        padding: 1.2em 1em 1em 1em;
    }
    .case_item_outer .cases_eyecatch_img {
        overflow: hidden;
        aspect-ratio: 1 / 1;
        border-bottom-left-radius: 20px;
        border-top-right-radius: 50px;
        width:120px ;
        margin-bottom:unset ;
    }
    .case_item_outer .cases_eyecatch_img img{
        margin-top:unset ;
        border-top-right-radius: unset ;
    }
    .case_item_outer .title_info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 0 0 1em;
        width: calc(100vw - 5em - 120px);
    }
    .case_item_outer .title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 3; /* 最大3行まで */
        text-overflow: ellipsis;
        min-height: unset ;
    }

    .case_item_outer .tags {
        gap: 0.1em 0.1em;
    }
    .case_item_outer .project_info {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .page-cases .selectors {
        font-size:0.8em ;
    }

    /* 問い合わせページ */
    .wpcf7 form input,
    .wpcf7 form textarea {
        box-sizing: border-box ;
    }

    /* 事業トップ */
    .page-business .content_header_inner {
        flex-direction: column;
        width: 100%;
        margin-left: unset;
        padding: unset;
    }
    .page-business .content_header_inner .header_image_outer {
        padding: unset ;
    }
    .page-business .header_image_outer .circle {
        width: 80%;
        margin: 2em auto 0 auto ;
    }
    .page-business .header_image_outer .circle .header_title_img {
        position: absolute;
        left: 50%;
        bottom: unset;
        right:unset ;
        transform: translateX(-50%);
    }
    .page-business.arcitectural-production .header_image_outer .circle .header_title_img {
        width: 82%;
        bottom: -13%;
    }
    .page-business.activation-of-publicspaces .header_image_outer .circle .header_title_img {
        width: 90%;
        bottom: -17%;
    }
    .page-business.space-management .header_image_outer .circle .header_title_img {
        width: 80%;
        bottom: -13%;
    }
    .page-business .content_header_inner .header_text {
        width: 80%;
        margin: 5em auto 2em auto ;
    }
    .page-business .content_header_inner .header_text .header_text_head {
        font-size: 1.3em;
        font-weight: 500;
        text-align: center;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
    .selected-cases {
        margin: 4em 0 2em 0 ;
    }
    .selected-cases .nav_arrow {
        margin:3em 0 0 0 ;
    }

    /* About us */
    .top_section {
        width: 80%;
        margin: 0 auto;        
    }
    .top_section .title {
        font-size: 1.5em;
        font-weight: 500;        
    }
    .page-aboutus .mid_content {
        padding:40px ;
    }
    .top_section .text, .mid_section .text {
        font-size: 1em ;
    }
    .last_section {
        width: 80%;
        margin: 0 auto 2em auto ;  
    }
    .last_section .last_text1,
    .last_section .last_text2 {
        font-size:1em ;
    }

    #philosophy .section , #credo .section {
        margin:0 2em ;
    }
    #philosophy .text, #credo .text {
        font-size:1em ;
    }

    .company_profile_table {
        width:100% ;
    }
    .company_profile_table tbody tr:not(:first-of-type):not(:last-of-type) td:first-child {
        padding: 1em 0.5em ;
    }
    .company_profile_table > tbody > tr > td {
        padding: 0em 1em;
    }
    
    .page-aboutus .member {
        height: 7em;
    }
    .page-aboutus .member > img {
        object-position: center -35px ;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    .page-aboutus .member .position {
        top: 40%;
        left: 5%;    
    }
    .page-aboutus .member .name {
        top: calc(38% + 1em);
        left: 5%;    
    }
    .page-aboutus .member .roman_name {
        bottom: -6px;
    }

    .section_members .first_photo {
        width: 180%;
        position: relative;
        left: 35%;
        margin-left: -90%;
        transform: unset;
    }
    .section_members .last_photo {
        width: 180%;
        position: relative;
        left: 50%;
        margin-left: -90%;
        transform:unset ;
    }

    .page-aboutus .members_outer {
        justify-content: center;
    }
    .modal_members .modal_card {
        width:90% ;
    }
    .modal_members .modal_card .modal_card_inner {
        padding: 4em 1em 2em 1em;
    }
    .modal_card .photo_and_name {
        flex-direction: column;    
    }
    .modal_card .namebox {
        margin:unset ;
    }
    .modal_card .name-block {
        display: flex;
        flex-direction: column;
        font-size:0.8em ;
    }
    .modal_card .profile {
        margin:1.5em 0 2em 0 ;
    }

    /* 404 */
    .page-404 .content {
        min-height: 28svh;
    }
    .page-404 .content h2 {
        font-size: 5em;
    }
}


/* reCapthcaアイコン */
.grecaptcha-badge { visibility: hidden; }

.pc {
    display:inline-block ;
}
.sp {
    display:none;
}
@media screen and (max-width: 767px) { 
    .pc {
        display:none;
    }
    .sp {
        display:inline-block ;
    }
}