@charset "utf-8";
/*-------------------------------------------------
パソコン961px以上
モバイル320〜960px
-------------------------------------------------*/

*,
*:before,
*:after{box-sizing: border-box;}

html{scroll-behavior: smooth; scroll-padding-top:calc(100px + 20px);
font-size:min(1.38vw,18px);
font-synthesis: style small-caps /*偽ボールド防止（太字以外は許可）*/;}
@media screen and (max-width:960px){
html{scroll-padding-top:calc(80px + 20px);
font-size:min(4.3vw,18px);}
}
/*スクロールバーをコンパクトに*/
*{scrollbar-color: #ccc #eee; scrollbar-width: thin;}/*firefox*/
html::-webkit-scrollbar {width: 8px; height: 8px;}
html::-webkit-scrollbar-thumb {background: #ccc;}
html::-webkit-scrollbar-track {background: #eee;}

/*ボディ*/
body {color: #000; font-weight: 450; font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体","ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; line-height:1.8; min-width:1000px; position:relative; overflow-wrap: break-word; -webkit-text-size-adjust: none;}
@media screen and (max-width:960px){
body { min-width: 320px;}
}

/*ページ*/
.page{padding-top: 100px;}
@media screen and (max-width:960px){
.page{padding-top: 80px;}
}

/*明朝体*/
.min{font-family:"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "Noto Serif JP" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;}

/*ゴシック体*/
.go{font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体","ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;}

/*New Attenに似た代替フォント
https://fonts.google.com/specimen/Afacad+Flux*/
@font-face {
font-family: "af";
src: url("../font/AfacadFlux-VariableFont_slnt,wght.woff2");
font-display: swap;
font-optical-sizing: auto; 
  ascent-override: 83%;
  descent-override: 17%;
  line-gap-override: 0%;
}
.af{font-family:"af" , sans-serif;}

/*画像*/
img{max-width:100%; height: auto; position:relative; line-height:1; vertical-align:middle;}

/*アンカーリンク*/
a{color: #0074BE; text-decoration: underline; text-underline-offset: 0.2em; transition: 0.2s color,0.2s background,0.2s filter;}
a:hover{text-decoration: none;}

/* 電話 */
a.tel{}
a.tel i{display: inline-block; margin-right: 0.5em;}
a.tel .num{font-family: "af"; font-weight: 500; font-size: 125%;}

/*ホバー画像*/
a img{transition: 0.2s filter;}
a:hover img{filter: brightness(105%) saturate(105%) contrast(105%);}

/*マーキング*/
.mark{background: linear-gradient(to bottom,transparent 60%,#95FFCA 60%); text-shadow: 1px 1px 0 #fff;}
.mark.blue{background: linear-gradient(to bottom,transparent 60%,#95E4FF 60%); }
.mark.yellow{background: linear-gradient(to bottom,transparent 60%,#FFEC80 60%); }
.mark.red{background: linear-gradient(to bottom,transparent 60%,#FFBFDF 60%);}

/*文字色*/
.color,
.color.construction{color: #0074BE;}
.color.green,
.color.eco{color: #007361;}
.color.yellow,
.color.housing,
.color.estate{color: #ECA826;}
.color.pink,
.color.red,
.color.community{color: #D4617A;}
.color.grey,
.color.gray{color: #7F7F7F;}
.color.e-office{color: #23923f;}
.color.cotton{color: #0066a4;}
.color.cotton_yellow{color: #a09050;}

/*ボタン*/
.button{min-height: 3.3em; padding:0.4em 2.5em 0.4em; line-height: 1.2; font-weight:bold; text-align:center; vertical-align:middle; cursor: pointer; border-radius:1.7em; position:relative; display:inline-flex; align-items: center; justify-content: center; color:#000; background:#fff; border: 1px solid currentColor; box-shadow: none; text-decoration:none; transition: 0.2s color,0.2s background,0.2s border,0.2s box-shadow,0.2s opacity,0.2s filter;}
.button:hover{color:#fff; background:#000; border-color: transparent;}
.button:hover img{filter: none;}
/*色分け*/
.button.blue,
.button.construction{color: #0074BE;}
.button.blue:hover,
.button.construction:hover{color: #fff; background: #0074BE;}
.button.green,
.button.eco{color: #007361;}
.button.green:hover,
.button.eco:hover{color: #fff; background: #007361;}
.button.yellow,
.button.housing,
.button.estate{color: #ECA826;}
.button.yellow:hover,
.button.housing:hover,
.button.estate:hover{color: #fff; background: #ECA826;}
.button.pink,
.button.red,
.button.community{color: #D4617A;}
.button.pink:hover,
.button.red:hover,
.button.community:hover{color: #fff; background: #D4617A;}
.button.community{color: #D4617A;}
.button.grey,
.button.gray{color: #7F7F7F;}
.button.grey:hover,
.button.gray:hover{color: #fff; background: #7F7F7F;}
.button.e-office,
.button.e-office{color: #23923f;}
.button.e-office:hover,
.button.e-office:hover{color: #fff; background: #23923f;}
.button.reverse{background: #000; color: #fff; border-color:transparent; box-shadow: 0 0 0 0 rgba(255,255,255,0.3) inset;}
.button.reverse:hover{box-shadow: 0 0 0 0.4em rgba(255,255,255,0.3) inset;}
.button.reverse.blue,
.button.reverse.construction{background: #0074BE;}
.button.reverse.green,
.button.reverse.eco{background: #007361;}
.button.reverse.yellow,
.button.reverse.housing,
.button.reverse.estate{background: #ECA826;}
.button.reverse.pink,
.button.reverse.red,
.button.reverse.community{background: #D4617A;}
.button.reverse.grey,
.button.reverse.gray{background: #7F7F7F;}
.button.reverse.e-office,
.button.reverse.e-office{background: #23923f;}

/*ボタンにアイコン*/
.button.icon:after,
.button.icon.left:before{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f178"; margin-left: 0.7em; display: inline-block; transform: scale(0.8); transform-origin: right center;}
.button.icon:not(.left):before{display: none;}
.button.icon.left:after{display: none;}
.button.icon.left:before{content: "\f177"; margin-left: 0; margin-right: 0.7em; transform-origin: left center;}
.button.icon.next:before,
.button.icon.next:after{content: "\f178";}
.button.icon.back:before,
.button.icon.back:after{content: "\f177";}
.button.icon.up:before,
.button.icon.up:after{content: "\f077";}
.button.icon.link:before,
.button.icon.link:after{content: "\f35d";}
.button.icon.pdf:before,
.button.icon.pdf:after{content: "\f1c1";}
.button.icon.xls:before,
.button.icon.excel:before,
.button.icon.xls:after,
.button.icon.excel:after{content: "\f1c3";}
/*アイコンの位置が固定*/
.button.icon:not(.left).absolute{padding-right: 3em;}
.button.icon.left.absolute{padding-left: 3em;}
.button.icon.absolute:before{position: absolute; top: 50%; left: 1em; transform: translateY(-50%) scale(0.8);}
.button.icon.absolute:after{position: absolute; top: 50%; right: 1em; transform: translateY(-50%) scale(0.8);}
/*ボタンに<i>*/
.button i:first-child{margin-right: 0.7em;}
.button i:last-child{margin-left: 0.7em;}
/*ボタンの幅を調整*/
.button.fix_width{min-width: 22em;}
@media screen and (max-width:960px){
.button.fix_width{width:min(100%,22em); min-width: inherit;}
}
/*ボタンを無効*/
.button.disable,
.button.disabled{pointer-events: none; opacity: 0.3;}
/* ボタンの英語 */
.button .eng{font-family: "af" , sans-serif; font-size: 125%; font-weight: 500; line-height: 1;}

/*その他*/
small{ font-size:80%;}
.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}
img.center{display: block; margin-left: auto; margin-right: auto;}
.oh{ overflow:hidden;}
.ib{ display:inline-block;}
.indent{ padding-left:1em; text-indent:-1em;}
.indent .ib{text-indent: 0;}
p.indent+p.indent{margin-top: -0.5em;}
.normal{ font-weight: 450 !important;}
.bold{ font-weight:bold !important;}
.palt{font-feature-settings:"palt";}
.relative{position: relative;}
.stretch{align-items: stretch !important;}
sub{font-size: 80%;}

/*ロングコメント*/
.longComment p{ margin:0 !important;}
.noData { color:rgba(0,0,0,0.6); font-weight: bold;}

/*PC調整*/
@media screen and (min-width:961px){
.sp,.pcHidden{ display:none !important;}
.center-left,.center-right{ text-align:center;}
.left-center,.left-right{ text-align:left;}
.right-center,.right-left{ text-align:right;}
a[href^="tel:"]{pointer-events: none; text-decoration: none !important; color: inherit !important;}
}
/*SP調整*/
@media screen and (max-width:960px){
.pc,.spHidden{ display:none !important;}
.center-left,.right-left{ text-align:left;}
.left-center,.right-center{ text-align:center;}
.left-right,.center-right{ text-align:right;}
.spWidth100per{ width:100% !important;}
.spWidth90per{ width:90% !important;}
.spWidth80per{ width:80% !important;}
.spWidth70per{ width:70% !important;}
.spWidth60per{ width:60% !important;}
.spWidth50per{ width:50% !important;}
.spWidth40per{ width:40% !important;}
.spWidth30per{ width:30% !important;}
.spWidth20per{ width:20% !important;}
.spWidth10per{ width:10% !important;}
.spFontSize70per{font-size: 70% !important;}
.spFontSize80per{font-size: 80% !important;}
.spFontSize90per{font-size: 90% !important;}
.spFontSize100per{font-size: 100% !important;}
.spFontSize110per{font-size: 110% !important;}
.spFontSize120per{font-size: 120% !important;}
.spFontSize130per{font-size: 130% !important;}
.spFontSize140per{font-size: 140% !important;}
.spFontSize150per{font-size: 150% !important;}
.spFontSize160per{font-size: 160% !important;}
.spFontSize170per{font-size: 170% !important;}
.spFontSize180per{font-size: 180% !important;}
.spFontSize190per{font-size: 190% !important;}
.spFontSize200per{font-size: 200% !important;}
.spFontSize400per{font-size: 400% !important;}
}
@media print{
.sp{ display:none !important;}
}

/*コンテナを囲んで塗りたいとき*/
.wrapper{padding: 5em 0; background: #f5f5f5; position: relative; z-index: 10;}
.wrapper.white{background: #fff;}
.wrapper.gray,
.wrapper.grey{background: #eee;}
.wrapper.reverse{background: #333; color: #fff;}
.wrapper.reverse a:not(.button){color: #fff;}
.wrapper>*:first-child{margin-top: 0;}
.wrapper>*:last-child{margin-bottom: 0;}
@media screen and (max-width:960px){
.wrapper{padding: 3em 0;}
}

/* 斜め線の背景 */
.wrapper.syasen{background: linear-gradient(135deg,#f9f9d1,#c6ede6); position: relative;}
.wrapper.syasen:before{content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/syasen_w.webp) repeat top center; background-size: 66.6px auto; opacity: 0.3;}
@media screen and (max-width:960px){
.wrapper.syasen:before{background-size: 50px auto;}
}

/*ページの幅を制限するコンテナ*/
.container{max-width: 1280px; padding: 0 40px; margin: auto;}
.container.wide{max-width: 1480px;}
.container.wide.super{max-width: 1680px;}
@media screen and (min-width:961px){
.narrow{ max-width:83.3%;/*コンテナを基準に1000px相当*/ margin:auto;}
.container.wide .narrow{max-width:85.7%;/*コンテナを基準に1200px相当*/}
.container.wide.super .narrow{max-width:87.5%;/*コンテナを基準に1400px相当*/}
}
@media screen and (max-width:960px){
.container{padding: 0 0px; width:80%;}
}
@media screen and (max-width:480px){
.container{padding: 0 20px; width:100%;}
}
/*アニメーション*/
@media screen{
.container{opacity: 0;
animation: fade 0.5s 0.2s ease-out both;}
}

/*セクション*/
section+section,
.section+section,
.section+.section,
section+.section{margin-top: 6em;}

section:has(.wrapper)+section,
.section:has(.wrapper)+section,
.section:has(.wrapper)+.section,
section:has(.wrapper)+.section{margin-top: 0;}

/*文章*/
p{margin: 1em 0;}
p.caption{margin: 0.5em 0;}
::selection {background: rgba(60,60,60,0.6); color:#fff;}
::-moz-selection {background: rgba(60,60,60,0.6); color:#fff;}

/*多めの余白P*/
.margin>p+p{margin-top: 2em;}

/*discリスト*/
ul.disc{ margin:1em 0; padding:0 0 0 1.5em;}
ul.disc>li{ list-style:disc outside; line-height:1.6;}
ul.disc>li+li{margin-top: 0.5em;}

/*番号付きリスト*/
ol{ margin:1em 0; padding:0 0 0 1.5em;}
ol>li{ list-style:decimal outside; line-height:1.6;}
ol>li+li{margin-top: 0.5em;}

/*チェックリスト*/
ul.check{margin:1em 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap:0.5em 2em; text-align: left;}
ul.check.ib,
ul.check.if{display: inline-flex; margin: auto;}
ul.check>li{ position:relative; padding:0 0 0 1.8em; line-height:1.6;}
ul.check>li:before{ position:absolute; content:""; top:0.16em; left:0; z-index:1; background: rgba(0,0,0,0.1); display: inline-block; width: 1.2em; height: 1.2em; border-radius: 99em;}
ul.check>li:after{ position:absolute; content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:600; top:-0.24em; left:0.14em; z-index:2; font-size:130%; color:#000;}
ul.check:has(.heading){row-gap:1.5em; margin: 1.5em 0;}
ul.check>li>.heading{margin: 0 0 0.3em; font-size: 115%;}
ul.check.blue>li:after,
ul.check.construction>li:after{color:#0074BE;}
ul.check.green>li:after,
ul.check.eco>li:after{color:#007361;}
ul.check.yellow>li:after,
ul.check.housing>li:after,
ul.check.estate>li:after{color:#ECA826;}
ul.check.pink>li:after,
ul.check.red>li:after,
ul.check.community>li:after{color:#D4617A;}
ul.check.science>li:after{color: #92214d;}
/*カラム*/
@media screen and (min-width:961px){
ul.check.col2,
ul.check.col3{flex-direction: row;}
ul.check.col2>li{width: calc(50% - 1em); margin: 0;}
ul.check.col3>li{width: calc(33.3% - 1.32em); margin: 0;}
}

/*矢印リストナビゲーション*/
ul.arrow_nav{ margin:1em 0; line-height: 1.4;}
ul.arrow_nav a{color: #000; text-decoration: none; font-weight: bold; display: flex; gap:0.5em; align-items: flex-start; justify-content: flex-start; position: relative; padding: 0.5em 0;}
ul.arrow_nav a:before{ font-family: "Font Awesome 6 Free"; font-weight: 600; content: "\f178";}
ul.arrow_nav a:hover{background: #f5f5f5;}

/*順番に出現するアニメーション*/
@keyframes animation_order{100%{opacity: 1;}}
@media screen{
.animation.order>*{opacity: 0;}
}
.animation.order.active>*{animation: animation_order 0.6s 1.6s ease-in-out both;}
.animation.order.active>*:nth-child(1){animation-delay:0.1s;}
.animation.order.active>*:nth-child(2){animation-delay:0.2s;}
.animation.order.active>*:nth-child(3){animation-delay:0.3s;}
.animation.order.active>*:nth-child(4){animation-delay:0.4s;}
.animation.order.active>*:nth-child(5){animation-delay:0.5s;}
.animation.order.active>*:nth-child(6){animation-delay:0.6s;}
.animation.order.active>*:nth-child(7){animation-delay:0.7s;}
.animation.order.active>*:nth-child(8){animation-delay:0.8s;}
.animation.order.active>*:nth-child(9){animation-delay:0.9s;}
.animation.order.active>*:nth-child(10){animation-delay:1.0s;}
.animation.order.active>*:nth-child(11){animation-delay:1.1s;}
.animation.order.active>*:nth-child(12){animation-delay:1.2s;}
.animation.order.active>*:nth-child(13){animation-delay:1.3s;}
.animation.order.active>*:nth-child(14){animation-delay:1.4s;}
.animation.order.active>*:nth-child(15){animation-delay:1.5s;}

/*フェードイン*/
@keyframes fade{100%{opacity: 1;}}
@media screen{
.fade{opacity: 0;}
}
.active.fade{animation: fade 1s 0s ease-out both;}

/*フェードイン右*/
@keyframes fade_right{100%{opacity: 1; transform: translateX(0vw);}}
@media screen{
.fade_right{opacity: 0; transform: translateX(-10vw);}
}
.active.fade_right{animation: fade_right 0.5s 0s ease-out both;}
@media screen and (max-width:960px) and (orientation:portrait){
.active.fade_right{animation-duration: 0.3s;}
}

/*フェードイン左*/
@keyframes fade_left{100%{opacity: 1; transform: translateX(0vw);}}
@media screen{
.fade_left{opacity: 0; transform: translateX(10vw);}
}
.active.fade_left{animation: fade_left 0.5s 0s ease-out both;}
@media screen and (max-width:960px) and (orientation:portrait){
.active.fade_left{animation-duration: 0.3s;}
}

/*フェードイン上*/
@keyframes fade_up{100%{opacity: 1; transform: translateY(0vh);}}
@media screen{
.fade_up{opacity: 0; transform: translateY(5vh);}
}
.active.fade_up{animation: fade_up 0.5s 0s ease-out both;}

/*クリップパス右*/
@keyframes clip_right{100%{clip-path: inset(0 0 0 0);}}
@media screen{
.clip_right{clip-path: inset(0 100% 0 0);}
}
.active.clip_right{animation: clip_right 1s 0s cubic-bezier(0.5,0,0.5,1) both;}

/*クリップパス右下*/
@keyframes clip_right_bottom{100%{clip-path: polygon(0 0, 200% 0, 0 200%);}}
@media screen{
.clip_right_bottom{clip-path: polygon(0 0, 0 0, 0 0);}
}
.active.clip_right_bottom{animation: clip_right_bottom 1s 0s cubic-bezier(0.5,0,0.5,1) both;}

/*クリップパス左*/
@keyframes clip_left{100%{clip-path: inset(0 0 0 0);}}
@media screen{
.clip_left{clip-path: inset(0 0 0 100%);}
}
.active.clip_left{animation: clip_left 1s 0s cubic-bezier(0.5,0,0.5,1) both;}

/*クリップパス左下*/
@keyframes clip_left_bottom{100%{clip-path: polygon(100% 200%, -100% 0, 100% 0);}}
@media screen{
.clip_left_bottom{clip-path: polygon(100% 0, 100% 0, 100% 0);}
}
.active.clip_left_bottom{animation: clip_left_bottom 1s 0s cubic-bezier(0.5,0,0.5,1) both;}

/*フロート操作*/
.fl,.fl-center{ float:left;}
.fr,.fr-center{ float:right;}
.flm,.flm-center{ float:left; margin:0 1.5em 1.5em 0; clear:left;}
.frm,.frm-center{ float:right; margin:0 0 1.5em 1.5em; clear:right;}
@media screen and (max-width:960px){
.fl-center,.fr-center,.flm-center,.frm-center{float:none; max-width:100%; display:block; margin:0 auto 1em;}
}

/*clearfix*/
.clearfix:after {content: ""; clear: both; display: block; }

/*画像とテキストの組み合わせ*/
.image-text{display: flex; margin: 1em auto; gap:1em 4%;}
.image-text.reverse{flex-direction: row-reverse;}
.image-text+.image-text{margin-top: 4em;}
.image-text>.text{flex: 1;}
.image-text>.image{text-align: center;}
.image-text.align-items_center{align-items: center;}
.image-text>.image>*:first-child,.image-text>.text>*:first-child{margin-top: 0;}
.image-text>.image>*:last-child,.image-text>.text>*:last-child{margin-bottom: 0;}
@media screen and (max-width:960px){
.image-text:not(.hold){flex-direction: column;}
.image-text:not(.hold)>.image,
.image-text:not(.hold)>.text{width: 100% !important;}
}

/*テキストと画像の組み合わせ*/
.text-image{display: flex; margin: 1em auto; gap:1em 4%;}
.text-image.reverse{flex-direction: row-reverse;}
.text-image+.text-image{margin-top: 4em;}
.text-image>.text{flex: 1;}
.text-image>.image{text-align: center;}
.text-image.align-items_center{align-items: center;}
.text-image>.text>*:first-child,.text-image>.image>*:first-child{margin-top: 0;}
.text-image>.text>*:last-child,.text-image>.image>*:last-child{margin-bottom: 0;}
@media screen and (max-width:960px){
.text-image:not(.hold){flex-direction: column;}
.text-image:not(.hold)>.image,
.text-image:not(.hold)>.text{width: 100% !important;}
}

/*テキストとテキストの組み合わせ*/
.text-text{display: flex; margin: 1em auto; gap:1em 4%;}
.text-text.reverse{flex-direction: row-reverse;}
.text-text+.text-text{margin-top: 4em;}
.text-text>.text{flex: 1;}
.text-text>.text[style]{flex:initial;}
.text-text.align-items_center{align-items: center;}
.text-text>.text>*:first-child{margin-top: 0;}
.text-text>.text>*:last-child{margin-bottom: 0;}
@media screen and (max-width:960px){
.text-text:not(.hold){flex-direction: column;}
.text-text:not(.hold)>.text{width: 100% !important;}
}

/*グリッドレイアウト*/
.grid2,.grid3,.grid4,.grid5,.grid6{display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; row-gap: 2em;}
    .grid2.margin,.grid3.margin,.grid4.margin{row-gap:3em;}
.grid2{column-gap: 4%; font-size:95%;}
.grid2>*{width: 48%;}
    .grid2.margin{column-gap: 8%;}
    .grid2.margin>*{width: 46%;}
.grid3{column-gap: 3%; font-size:90%;}
.grid3>*{width:31.3%}
    .grid3.margin{column-gap: 6%;}
    .grid3.margin>*{width:29.3%}
.grid4{column-gap: 2%; font-size:85%;}
.grid4>*{width:23.5%;}
    .grid4.margin{column-gap: 4%;}
    .grid4.margin>*{width: 22%;}
.grid5{column-gap: 2%; font-size:80%;}
.grid5>*{width:18.4%;}
.grid6{column-gap: 2%; font-size:75%;}
.grid6>*{width:15%;}

@media screen and (max-width:960px){
/*holdが付いてないとき*/
.grid2:not(.hold),.grid3:not(.hold),.grid4:not(.hold),.grid5:not(.hold),.grid6:not(.hold){font-size:100%;}
.grid2:not(.hold)>*,.grid3:not(.hold)>*,.grid4:not(.hold)>*,.grid5:not(.hold)>*,.grid6:not(.hold)>*{width: 100%;}

/*2カラムへ*/
.grid3.to2,.grid4.to2,.grid5.to2,.grid6.to2{flex-direction: row; column-gap: 4%; font-size:90%;}
.grid3.to2>*,.grid4.to2>*,.grid5.to2>*,.grid6.to2>*{width:48%;}
}

/*日付*/
span.date{font-weight: 450; display: inline-block; line-height: 1.4; font-family:"af" , sans-serif;}
/* span.date:before{ font-family:"Font Awesome 6 Free"; font-weight:300; content:"\f017"; margin-right:0.3em;} */

/* カテゴリー */
span.category{display: inline-block; line-height: 1.4; background: #000; color: #fff; padding: 0 0.5em; font-feature-settings: "palt"; font-weight: bold;}

/*ナビゲーションリスト*/
ul.nav{ margin:1em auto;}
ul.nav li:first-child{ border-top:1px solid rgba(0,0,0,0.8);}
ul.nav li{border-bottom:1px solid rgba(0,0,0,0.8); line-height:1.4; position:relative; overflow: hidden; padding: 1em;
display: flex; align-items: center; justify-content: flex-start; gap:1em;}
ul.nav li>a{font-weight: bold; color: inherit; text-decoration: none; display: flex; align-items: center; justify-content: flex-start; gap:1em; position: relative; margin: -1em; padding:1em 2.5em 1em 1em; width: calc(100% + 2em); transition: 0.2s color , 0.2s background; }
ul.nav li>a:after{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f178"; position:absolute; top:50%; right:1em; transform: translateY(-50%) scale(0.8); transform-origin: right center;}
ul.nav li>a[target="_blank"]:after{content: "\f35d";}
ul.nav li>a:hover{background: rgba(0,0,0,0.07);}
ul.nav li>a.current{font-weight: bold; background: rgba(0,0,0,0.07);}
ul.nav .image{align-self: flex-start; width: min(30%,10em);}
ul.nav .text{ flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; row-gap: 0.3em;}
ul.nav .text>*:first-child{margin-top: 0;}
ul.nav .text>*:last-child{margin-bottom: 0;}

/*サブナビ*/
.snav{margin:6em auto 6em; max-width: 1680px;}
.snav .heading{font-size: 140%; padding: 0 0 0 1.5em;}
.snav .heading:before{font-family: "Font Awesome 6 Free"; font-weight: 600; content: "\f0a9"; position: absolute; top: 0; left: 0; transform: scale(0.9);}
.snav.construction .heading:before{color: #0074BE;}
.snav.construction .trigger:not(.open){background: #0074BE;}
.snav.construction ul.nav li > a.current{background: #0074BE;}
.snav.eco .heading:before{color: #007361;}
.snav.eco .trigger:not(.open){background: #007361;}
.snav.eco ul.nav li > a.current{background: #007361;}
.snav.housing .heading:before,
.snav.estate .heading:before{color: #ECA826;}
.snav.housing .trigger:not(.open),
.snav.estate .trigger:not(.open){background: #ECA826;}
.snav.housing ul.nav li > a.current,
.snav.estate ul.nav li > a.current{background: #ECA826;}
.snav.community .heading:before{color: #D4617A;}
.snav.community .trigger:not(.open){background: #D4617A;}
.snav.community ul.nav li > a.current{background: #D4617A;}
.snav .trigger{display: none;}
.snav .nav a{font-feature-settings: "palt";}
.snav .nav a.current{background: #000; color: #fff;}
@media screen and (min-width:961px){
.snav{padding: 0 40px; font-size: min(1.1vw,18px);}
.snav .inner{margin: auto; display: block !important;}
.snav .nav{margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap:0.5em; border-top:1px solid rgba(0,0,0,0.2); border-bottom:1px solid rgba(0,0,0,0.2); padding: 0.5em 0;}
.snav .nav li,
.snav .nav li:first-child{border-top: none; border-bottom: none;}
.snav .nav li{padding: 0;}
.snav .nav a{margin: 0;  padding:0.9em 1.5em; min-width: 8em; text-align: center; display: inline-block; border-radius: 1.6em;}
.snav .nav a:after{display: none;}
}
@media screen and (max-width:960px){
.snav{width: 80%;}
.snav .heading{font-size: 130%;}
.snav .nav{margin: auto;}
}
@media screen and (max-width:480px){
.snav{width: 100%;}
.snav .heading{margin-left: 10px; margin-right: 20px;}
}
/*アニメーション*/
@media screen{
.snav{opacity: 0;
animation: fade 0.5s 0.1s ease-out both;}
}
/* スマホのときサブナビをボタンっぽく表現 */
@media screen and (max-width:960px){
.nav.sp_fix{display: flex; flex-wrap: wrap; padding: 0 20px; gap:0.5em; font-size: 80%;}
.nav.sp_fix li,
.nav.sp_fix li:first-child{border: none;}
.nav.sp_fix li{width: calc((100% - 0.5em) / 2); padding: 0; line-height: 1.2;}
.nav.sp_fix a{margin: 0; padding: 0.3em 1em; background: rgba(0,0,0,0.07); border-radius: 1.5em; min-height: 3em; justify-content: center; text-align: center;}
.nav.sp_fix a:hover{background: rgba(0,0,0,0.14);}
.nav.sp_fix a:after{display: none;}
}

/*アイキャッチ直下のサブナビ*/
.eyeCatch+.snav{margin-top: -1em; margin-bottom: 3em;}
.eyeCatch+.snav .heading{display: none;}
@media screen and (min-width:961px){
.eyeCatch+.snav .nav{border: none; padding: 0;}
}
@media screen and (max-width:960px){
.eyeCatch+.snav{}
.eyeCatch+.snav .trigger{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap:0.3em; line-height: 1.2; font-size: 12px; margin: auto; width: calc(60% - 40px); max-width: 300px; height: 50px; background: #000; color: #fff; cursor: pointer; border-radius: 99em;}
.eyeCatch+.snav .trigger:before{ content: "\f0c9"; font-family: "Font Awesome 6 Free"; font-weight: 600; font-size: 20px; line-height: 1;}
.eyeCatch+.snav .trigger:after{ content: "SUB MENU"; font-family: "af", sans-serif;}
.eyeCatch+.snav .trigger.open{background: #7F7F7F;}
.eyeCatch+.snav .trigger.open:before{ content: "\f00d";}
.eyeCatch+.snav .trigger.open:after{ content: "CLOSE";}
.eyeCatch+.snav .inner{display: none; padding: 1em 0 0; border: none;}
    .eyeCatch+.snav:not(:has(.heading)) .inner{padding: 0;}
.eyeCatch+.snav:not(:has(.trigger)) .inner{display: block;}
}

/*見出しの文字サイズ*/
.heading{line-height:1.4; font-weight: bold; margin: 0 0 0.7em; display: block; position: relative;}
.heading.lv0{font-size: 300%;}
.heading.lv1{font-size: 240%;}
.heading.lv2{font-size: 200%;}
.heading.lv3{font-size: 160%;}
.heading.lv4{font-size: 140%;}
.heading.lv5{font-size: 130%;}
.heading.lv6{font-size: 120%;}
@media screen and (max-width:960px){
.heading.lv0{font-size: 240%;}
.heading.lv1{font-size: 200%;}
.heading.lv2{font-size: 160%;}
.heading.lv3{font-size: 140%;}
.heading.lv4{font-size: 130%;}
.heading.lv5{font-size: 120%;}
.heading.lv6{font-size: 110%;}
}
/*主な要素直下の見出しは上部に適度なマージン*/
*:not(.heading)+.heading{margin-top:2em;}

/*アイキャッチ見出し*/
.eyeCatch{margin:0 auto 3em; position: relative; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.8); overflow: hidden;}
.eyeCatch .text{ margin: auto; display: flex; align-items: center; justify-content: center; min-height: 19.4vw; padding:30px 40px; letter-spacing: 0.05em; position: relative; z-index: 20;}
.eyeCatch .text>*{font-size: 200%; line-height: 1.4; position: relative; margin: 0 auto; text-align: center; font-weight: bold;}
.eyeCatch .text:has(.heading_wrap)>*{font-size: 100%;}
.eyeCatch .heading_wrap .heading:not(.eng){font-size: 160%; font-feature-settings: "palt"; letter-spacing: 0.05em;}
@media screen and (max-width:960px){
.eyeCatch{ margin: 0 auto 2em;}
.eyeCatch .text{min-height: 200px; padding:20px 20px;}
.eyeCatch .text>*{font-size: 150%;}
.eyeCatch .heading_wrap .heading:not(.eng){font-size: 140%;}
}
@media screen and (max-width:960px) and (orientation:portrait){
.eyeCatch .text{width: 100%; min-height: initial; height: auto; aspect-ratio: 2/1;}
}
/*画像（or 動画）があるとき*/
.eyeCatch:has(.image){overflow: hidden;}
.eyeCatch .image{width: 100%; position: relative; z-index: 10; display: flex; align-items: center; justify-content: flex-end;}
.eyeCatch .image img,
.eyeCatch .image video{width: min(50%,960px); height: 100%; aspect-ratio:16/9; object-fit: cover;
mask-image: linear-gradient(to right,transparent 0%,black 20%);}
.eyeCatch:has(.image) .text{position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 100%; max-width: 1680px; justify-content: flex-start;}
.eyeCatch:has(.image) .text>*{font-size: min(3.2vw,280%); text-align: left; margin: 0;}
.eyeCatch:has(.image) .text:has(.heading_wrap)>*{font-size: 100%;}
.eyeCatch:has(.image) .text .heading_wrap .heading:not(.eng){padding-left: 0.2em;}
@media screen and (max-width:960px) and (orientation:landscape){
.eyeCatch .image+.text>*{font-size: 3.6vw;}
.eyeCatch .image img,
.eyeCatch .image video{aspect-ratio:16/9;}
}
@media screen and (max-width:960px) and (orientation:portrait){
.eyeCatch .image{justify-content: center;}
.eyeCatch .image img,
.eyeCatch .image video{width: 100%; aspect-ratio:16/9; mask-image: none;}
.eyeCatch:has(.image) .text{position: relative; left: auto; top: auto; transform: none; padding: 20px 20px; width: 100%; justify-content: center;}
.eyeCatch:has(.image) .text>*{font-size: 150%; text-align: center; margin: auto;}
.eyeCatch:has(.image) .text .heading_wrap .heading:not(.eng){padding-left: 0;}
}
/* アイキャッチ画像がシンボルマークの場合 */
.eyeCatch .image.symbol img{mask-image: none; width: min(20%,320px); aspect-ratio: 1/1; object-fit: contain;margin: 4.1vw 8vw 4.1vw 0;}
@media screen and (max-width:960px) and (orientation:portrait){
.eyeCatch .image.symbol img{margin: 0 0 -5vw; width: min(40%,160px); object-position: center bottom;}
}
/* アイキャッチ画像がデザインマスクされている場合 */
.eyeCatch .image img.mask{transform: scale(0.75);}
@media screen and (max-width:960px) and (orientation:portrait){
.eyeCatch .image:has(.mask){padding: 0 20px;}
.eyeCatch .image img.mask{transform: none; aspect-ratio:3/2;}
}
/*アニメーション*/
@media screen{
.eyeCatch{opacity: 0; animation: fade 1s 0s ease-out both;}
.eyeCatch .text{opacity: 0; animation: fade 0.5s 0.1s ease-out both;}
.eyeCatch .image{opacity: 0; animation: fade 0.5s 0.2s ease-out both;}
}
@media screen and (max-width:960px) and (orientation:portrait){
.eyeCatch .text{animation-delay: 0.2s;}
.eyeCatch .image{animation-delay:0.1s; }
}
/* アイキャッチに大きなデザイン文字を追加 */
.eyeCatch .bg_text{ position: absolute; top: 49%; left: 0; z-index: -1; transform: translateY(-50%); width: 100%; text-align: center; font-family: "af", sans-serif; font-size: 30vw; font-weight: 500; line-height: 0.63; color: #f5f5f5; pointer-events: none;}
@media screen and (max-width:960px) and (orientation:portrait){
.eyeCatch .bg_text{transform: translateY(-50%) scale(200%);}
.eyeCatch:has(.image) .bg_text{top: calc(50% + 28vw);}
.eyeCatch:has(.image.symbol) .bg_text{top: calc(50% + 18vw);}
}
/* 収まりが悪い場合の調整 */
.eyeCatch.construction .bg_text{font-size: 14vw;}
.eyeCatch.housing .bg_text{font-size: 25vw;}
.eyeCatch.yume_house .bg_text{font-size: 19vw;}
.eyeCatch.cotton .bg_text{font-size: 28vw;}
.eyeCatch.science_home .bg_text{font-size: 16vw;}
.eyeCatch.order_house .bg_text{font-size: 17vw;}
.eyeCatch.reform .bg_text{font-size: 29vw;}
.eyeCatch.estate .bg_text{font-size: 20vw;}
.eyeCatch.community .bg_text{font-size: 18.5vw;}
.eyeCatch.eco .bg_text{font-size: 14.5vw;}
.eyeCatch.company .bg_text{font-size: 23vw;}
.eyeCatch.outline .bg_text{font-size: 28vw;}
.eyeCatch.recruit .bg_text{font-size: 29vw;}
.eyeCatch.internship .bg_text{font-size: 20vw;}
.eyeCatch.contact .bg_text{font-size: 24vw;}
.eyeCatch.privacy .bg_text{font-size: 29vw;}
.eyeCatch.download .bg_text{font-size: 19vw;}
.eyeCatch.glossary .bg_text{font-size: 23vw;}
@media screen and (max-width:960px){
.eyeCatch.internship .heading_wrap .heading:not(.eng){font-size: 110%;}
}

/* 見出しに番号を持っている場合 */
.heading:has(.num){padding-left: 1.9em;}
.heading:has(.num) span.num{background: #000; color: #fff; border-radius: 99em; position: absolute; top: 0; left: -0.1em; display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; font-family: "af"; font-weight: 500;}
.heading:has(.num).blue span.num,
.heading:has(.num).construction span.num{background: #0074BE;}
.heading:has(.num).green span.num,
.heading:has(.num).eco span.num{background: #007361;}
.heading:has(.num).yellow span.num,
.heading:has(.num).housing span.num,
.heading:has(.num).estate span.num{background: #ECA826;}
.heading:has(.num).pink span.num,
.heading:has(.num).red span.num,
.heading:has(.num).community span.num{background: #D4617A;}

/*見出しスタイル*/
.heading.style{margin-bottom: 1em;}
.heading.style:after{content: ""; display: block; width: 100%; height: 1px; background: rgba(0,0,0,0.2); position: absolute; left: 0; bottom: 0; border-radius: 99em;}
.heading.style>span{position: relative; z-index: 20; display: inline-block; padding: 0 0 calc(0.3em + 2px) 0;}
.heading.style>span:after{content: ""; display: block; width: 100%; height: 2px; background:#000; position: absolute; left: -1px; bottom: 0;}
.heading.style.blue>span:after,
.heading.style.construction>span:after{background: rgba(0,116,190,1);}
.heading.style.green>span:after,
.heading.style.eco>span:after{background: rgba(0,115,97,1);}
.heading.style.yellow>span:after,
.heading.style.housing>span:after,
.heading.style.estate>span:after{background: rgba(236,168,38,1);}
.heading.style.pink>span:after,
.heading.style.red>span:after,
.heading.style.community>span:after{background: rgba(212,97,122,1);}

/* 見出し内に簡単な説明文を含める場合 */
.heading.style:has(.desc) > span{display: inline-flex; gap:0.5rem 2rem; flex-wrap: wrap; align-items: baseline;}
.heading.style .desc{font-size:1rem; font-weight:450;}
@media screen and (max-width:960px){
.heading.style:has(.desc) > span{flex-direction: column;}
}

/*見出しスタイル*/
.heading.style2{padding: 0.3em 0.6em 0.3em 0.8em; background: #f5f5f5;}
.heading.style2:before{content: ""; display: block; width: 0.2em; height: 100%; background: currentColor; position: absolute; z-index: 30; top: 0; left: 0;}
.heading.style2.blue,
.heading.style2.construction{background: #EDF5FA;}
.heading.style2.blue:before,
.heading.style2.construction:before{background: #0074BE;}
.heading.style2.green,
.heading.style2.eco{background: #EDF5F4;}
.heading.style2.green:before,
.heading.style2.eco:before{background: #007361;}
.heading.style2.yellow,
.heading.style2.housing,
.heading.style2.estate{background: #FDF4E5;}
.heading.style2.yellow:before,
.heading.style2.housing:before,
.heading.style2.estate:before{background: #ECA826;}
.heading.style2.pink,
.heading.style2.red,
.heading.style2.community{background: #FCF3F5;}
.heading.style2.pink:before,
.heading.style2.red:before,
.heading.style2.community:before{background: #D4617A;}

/* 見出しアンダーライン */
.heading.underline{padding: 0 0 0.7em; margin-bottom: 1em;}
.heading.underline:after{content: ""; display: block; width: 100%; height: 1px; background: currentColor; position: absolute; z-index: 30; bottom: 0; left: 0;}

/* 大きな英語を含んだ見出し */
.heading_wrap{margin: 0 0 3em;}
.heading_wrap .eng{font-family:"af", sans-serif; font-size: 600%; font-weight: 400; line-height: 1;}
.heading_wrap .heading{margin: 0;}
.heading_wrap .eng+.heading{margin-top: 0.7em;}
@media screen and (max-width:960px){
.heading_wrap{margin: 0 0 2em;}
.heading_wrap .eng{font-size: 300%;}
}

/* 見出し内に座布団塗り */
.heading .nuri{background: #000; color: #fff; display: inline-block; padding: 0.2em 0.5em; border-radius: 0.1em; line-height: 1.2;}
.heading .nuri.blue,
.heading .nuri.construction{background: #0074BE;}
.heading .nuri.green,
.heading .nuri.eco{background: #007361;}
.heading .nuri.yellow,
.heading .nuri.housing,
.heading .nuri.estate{background: #ECA826;}
.heading .nuri.pink,
.heading .nuri.red,
.heading .nuri.community{background: #D4617A;}
.heading .nuri.cotton{background: #0066a4;}
.heading .nuri.science{background: #92214d;}

/* 文字詰め見出し */
.heading.palt{letter-spacing: 0.05em;}
.heading.center.palt,
.heading.center-left.palt{padding-left: 0.05em;}
@media screen and (max-width:960px){
.heading.center-left.palt{padding-left: 0;}
.heading.left-center.palt{padding-left: 0.05em;}
}

/*ヘッダー*/
header.g{position: fixed; z-index: 80; top: 0; left: 0; width: 100%; height: 100px; background: rgba(255,255,255,0.8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); line-height: 1.2; transition: 0.4s opacity;}
/*ヘッダーのロゴ*/
.header_logo{position: absolute; display: inline-flex; align-items: center; top: 50%; left: 40px; transform: translateY(-50%);}
.header_logo a{display: inline-flex; align-items: center;}
.header_logo img{width: min(20vw,320px);}
@media screen and (max-width:960px){
header.g{height: 80px;}
.header_logo{left: 15px;}
.header_logo img{width: min(46vw,200px);}
}

/*ヘッダーの右上*/
header.g .migiue{position: absolute; top: 50%; right: 100px; transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-end; padding: 0 1em 0 0;}
header.g .migiue:after{content: ""; display: block; width: 1px; height: 60px; background: rgba(0,0,0,0.8); position: absolute; top: 50%; right: 0; transform: translateY(-50%);}

.h_contact{display: flex; gap:1em; align-items: center; font-size: 130%;}
.h_contact a:not(.tel){padding: 0 1em; color: #000; min-height: 60px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;}
.h_contact a:not(.tel) i{font-size: 120%;}
.h_contact a:hover{background: #f5f5f5;}

@media screen and (max-width:960px){
header.g .migiue{right: 80px; padding: 0;}
header.g .migiue:after{display: none;}

.h_contact{gap:0; font-size: 110%;}
.h_contact a{padding: 0 3vw !important; color: #000; min-height: 60px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;}
.h_contact a.tel i{margin: auto;}
}
@media screen and (max-width:374px){
header.g .migiue{right: 60px;}
}

/*ハンバーガー*/
.trigger_gnav{position: fixed; z-index: 110; top: 0; right: 0; width: 100px; height: 100px; display: inline-flex; justify-content: center; cursor: pointer; transition: 0.2s opacity,0.2s background,0.2s filter;}
.trigger_gnav:hover{}
.trigger_gnav.open{}
.trigger_gnav:not(.open){ filter: saturate(0%) brightness(0%);}
.trigger_gnav:not(.open):hover{ filter: saturate(100%) brightness(100%);}
.trigger_gnav:before,
.trigger_gnav:after{content: ""; width: 100%; height: 100%; background: url(../img/nav.webp) no-repeat center; background-size: auto 24%; position: absolute; top: 0; transition: 0.3s transform cubic-bezier(.5,0,0,1); transform: scale(1);}
.trigger_gnav:after{background-image: url(../img/nav_close_w.webp); transform: scale(0.01);}
.trigger_gnav.open:before{transform: scale(0.01);}
.trigger_gnav.open:after{transform: scale(1);}
@media screen and (max-width:960px){
.trigger_gnav{top:10px; width: 80px; height: 60px;}
.trigger_gnav:before,
.trigger_gnav:after{background-size: auto 36%;}
.trigger_gnav.open{filter: saturate(0%) brightness(0%);}
}
@media screen and (max-width:374px){
.trigger_gnav{width: 60px;}
}

/*ハンバーガーを押したときのナビゲーション*/
.gnav_wrap{position: fixed; z-index: 100; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; overflow-y: scroll; justify-content: center; height: 100dvh; opacity: 0; pointer-events: none; transition: 0.3s opacity; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); scrollbar-color: #666 #000; /*firefox*/}
.gnav_wrap::-webkit-scrollbar-thumb {background: #666;}
.gnav_wrap::-webkit-scrollbar-track {background: #000;}
.gnav_wrap.open{opacity: 1; pointer-events: auto;}
.gnav_wrap>.inner{margin: auto; width:100%;}
.gnav_wrap .wrapper.reverse{background: none; padding: 2em 0;}
@media screen and (max-width:960px){
.gnav_wrap{top: 80px; height: calc(100dvh - 80px);}
.gnav_wrap>.inner{width: 100%;}
.gnav_wrap .wrapper.reverse{padding-top: 2em;}
}

/*PCのみ　ヘッダーがファーストビューで下側になっている場合の調整*/
@media screen and (min-width:961px){
/*ヘッダーの要素を調整*/
.header_fix{padding-top: 0;}
.header_fix header.g{position: sticky; top: 0; margin-bottom: 6em;}
.header_fix header.g .header_logo a>*{transition: 0.3s transform;}
.header_fix header.g .header_logo .symbol{transform-origin: left bottom;}
.header_fix header.g:not(.active) .header_logo .symbol{transform: scale(2); }
.header_fix header.g:not(.active) .header_logo .text{transform: translateX(4vw);}
.header_fix header.g:not(.active) nav.h{right: 20px;}
/*ハンバーガーの透明度を調整*/
.header_fix .trigger_gnav.active{background: rgba(205,9,39,1);}
.header_fix .trigger_gnav:not(.active){background: rgba(205,9,39,0);}
}

/*グロナビ*/
nav.g{flex: 1; display: flex; justify-content: center; margin: auto;}
nav.g .body{display: flex; justify-content: center; column-gap:2em; line-height: 1.4; width: 100%;}

nav.g ul.nav1{flex-grow: 1; display: flex; flex-direction: column; row-gap:0.3em;}

nav.g ul.nav1 a:not(.button){display: block; border-radius: 0; transition: 0.2s color,0.2s background; padding: 0.6em 1em 0.6em 2.2rem; text-decoration: none; font-weight: bold; position: relative; font-feature-settings: "palt"; letter-spacing: 0.05em;}
nav.g ul.nav1 a:not(.button):before{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f0a9"; position:absolute; top: 0.6em; left: 0.7em; transform: scale(0.9);}
nav.g ul.nav1 a:not(.button):hover{background: rgba(255,255,255,0.15);}
nav.g ul.nav1 a:not(.button).current{/*color: #19529f;*/ background: rgba(255,255,255,0.15); font-weight: bold;}

nav.g ul.nav1>li>a.current{}
nav.g ul.nav1>li:has(ul.child){margin-bottom: 0.7em;}

nav.g ul.child>li>a:not(.button){padding: 0.3em 1em 0.3em 2.2rem; font-size: 85%; text-decoration: none; font-weight: 400; position: relative;}
nav.g ul.child>li>a:not(.button):before{content: ""; top: 0.8em; left: 1.2rem; width: 0.4em; height: 0.4em; background: currentColor; border-radius: 100%; opacity: 0.5;}
nav.g ul.child>li>a.current{box-shadow: none; background: none;}
nav.g ul.child>li>a.current:before{opacity: 1;}

nav.g li:has(.button){margin: 2em 0;}
nav.g a.button{padding: 0.4em 1em; width: min(100%,13em);}
nav.g a.button i{margin-right: 0.5em; font-size: 120%;}

nav.g ul.banners{margin: 1em 0; display: flex; flex-direction: column; gap:1em;}
nav.g a.banner{padding: 0 !important; width: 13em;}
nav.g a.banner:before{display: none;}

@media screen and (min-width:961px){
nav.g li:has(.button):first-child{margin-top: 0;}
nav.g li:has(.button):last-child{margin-bottom: 0;}
}
@media screen and (max-width:960px){
nav.g {font-size: 110%; flex-direction: column; row-gap:0.3em;}
nav.g .body{flex-direction: column; width: 100%;}
nav.g a.button{width: 100%;}
}

/*グロナビをPC用に調整*/
header.g nav.g{position: absolute; right: calc(100px + 2em); bottom: 50%; transform: translateY(50%); font-size: min(1.2vw,18px);}
header.g nav.g .body{flex-direction: row;}

header.g nav.g ul.nav1 a:not(.button):hover{background: rgba(25,82,159,0.1);}

header.g nav.g ul.nav1{flex-direction: row;}
header.g nav.g ul.nav1>li>a:not(.button){display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1.5em; min-height: 60px; min-width: 7em; color: #000;}
header.g nav.g ul.nav1>li>a:not(.button):before{display: none;}
header.g nav.g ul.nav1>li:has(ul.child){margin-bottom: 0; position: relative;}
header.g nav.g ul.nav1>li>a.current+ul.child{margin-top: 0;}
header.g nav.g ul.nav1>li:hover ul.child{pointer-events: auto; opacity: 1;}

header.g nav.g ul.child{position: absolute; top: 60px; left: 50%; width: 16em; transform: translateX(-50%); background: #fff; box-shadow: 0 0 2em rgba(0,0,0,0.15); padding: 0.5em; border-radius: 0.3em; pointer-events: none; opacity: 0; transition: 0.2s opacity;}
header.g nav.g ul.child>li>a{font-size: 90%; padding-top: 0.5em; padding-bottom: 0.5em; font-weight: bold;}
header.g nav.g ul.child>li>a:before{top:1em;}
header.g nav.g ul.child>li>a.current:before{display: inline-block; left: 0.5em;}

header.g nav.g ul.nav1>li:has(.button){margin:0 0 0 1em;}
header.g nav.g ul.nav1>li>a.button{height: 100%; padding: 0.4em 2em;}
header.g nav.g ul.nav1>li>a.button i{margin-right: 0.5em; font-size: 120%;}

@media screen and (max-width:960px){
header.g nav.g{display: none;}
}

/*グローバルフッター*/
footer.g{margin: 6em auto 0;}
footer.g.after-wrapper{margin-top: 0;}
footer.g .cta.heading_wrap{margin-bottom: 2em;}
footer.g .cta.heading_wrap .heading.lv6{line-height: 1.6; letter-spacing: 0.1em;}
footer.g p.cta_tel{font-size: 200%; text-align: center;}
@media screen and (max-width:960px){
footer.g p.cta_tel{font-size: 160%;}
}

/*フッターとグロナビ共用の会社情報テキスト*/
.g_flex{display: flex; flex-direction: row-reverse; gap:4em 4%; font-size: min(1.2vw,18px);}
.g_flex nav.g{flex: 1;}
.f_company{ width: 26em;}
.f_company .logo{margin: 0 0 2em;}
.f_company .logo img{width: min(20vw,320px);}
.f_company .text{font-size: 90%;}
.f_company .text p+p{margin-top: 1.5em;}
.f_company .text p>.heading{font-size: 110%; margin-bottom: 0.3em;}
.f_company .sns_wrap{margin: 2em 0 1em; justify-content: flex-start; font-size: 110%;}
.f_company .button_wrap{margin: 3em 0 0; display: flex;}
.f_company .button_wrap .button{width: min(100%,18em);}
.f_company .button_wrap .button i{margin-right: 0.5em; font-size: 120%;}
@media screen and (max-width:960px){
.g_flex{flex-direction: column; font-size: 100%;}
.g_flex nav.g{width: 100%;}
.f_company{width: 100%; flex-direction: column; align-items: center;}
.f_company .logo{margin: 0 auto 2em;}
.f_company .logo img{width: min(70vw,300px);}
.f_company .text{text-align: center;}
.f_company .text p+p{margin-top: 2em;}
.f_company .sns_wrap{margin: 3em auto 1em; justify-content: center;}
}

/* SNS */
.sns_wrap{display: flex; align-items: center; justify-content: center; gap:2em; line-height: 1; margin: 2em 0;}
.sns_wrap i{font-size: 200%; width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: 0.2s opacity;}
.sns_wrap a:hover i{opacity: 0.8;}
@media screen and (min-width:961px){
.sns_wrap.left-center{justify-content: flex-start;}
}

/* フッターのバナー */
ul.f_banners{display: flex; flex-wrap: wrap; align-items: center; gap:1em;}
ul.f_banners>*{width: calc((100% - 2em) / 3);}
ul.f_banners img{border-radius: 0.3em;}
@media screen and (max-width:960px){
ul.f_banners{margin-top: 2em;}
ul.f_banners>*{width: calc((100% - 1em) / 2);}
}
@media screen and (max-width:480px){
ul.f_banners{flex-direction: column;}
ul.f_banners>*{width: min(70% , 300px);}
}

/*©*/
footer.g .copyright{background: #000; color: rgba(255,255,255,0.8); font-style: normal; font-size: 70%; line-height: 1.2; text-align: center; margin: auto; padding: 1em; min-height: 50px; display: flex; align-items: center; justify-content: center; gap:0.5em; position: relative; z-index: 10; font-feature-settings: "palt"; letter-spacing: 0.2em; padding-left: 1.2em;}
@media screen and (max-width:960px){
footer.g .copyright{font-size: 60%; flex-direction: column;}
.page:has(.contact_maru_buttons.fixed) footer.g .copyright{padding-bottom: 6rem;}
}

/* ページ先頭へ */
a.pageTopButton{position: fixed; z-index:80; display:flex; align-items: center; justify-content: center; bottom:50px; right:50px; width:50px; height:50px; font-size: 20px; opacity: 0; pointer-events: none; border-radius: 100%; background: rgba(255,255,255,0.9); color: #000; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); text-decoration: none; transition: 0.4s opacity,0.2s background,0.2s color;
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
a.pageTopButton:hover{background: rgba(50,50,50,0.9); color: #fff;}
a.pageTopButton.active{pointer-events: inherit; opacity: 1;}
a.pageTopButton:after{font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f176";}
a.pageTopButton>span{text-indent: -9999px; overflow: hidden;}
@media screen and (max-width:960px){
a.pageTopButton{bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 16px;}
}
@media print{
a.pageTopButton{display: none;}
}

/* 丸いお問い合わせボタン（基本） */
.contact_maru_buttons{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap:3em; margin: 3em auto 0;}
.contact_maru_button{font-size: 120%; width: 9em; height: auto; aspect-ratio:1/1;
display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #fff; background: #000; border-radius: 100%; line-height: 1.2; text-align: center; font-weight: bold; position: relative;}
.contact_maru_button:before{content: ""; width: 100%; height: auto; aspect-ratio:1/1;border-radius: 100%; display: block; position: absolute; top: 0; left: 0; pointer-events: none; transition: 0.2s opacity,0.2s box-shadow; opacity: 0; box-shadow: 0 0 0 currentColor inset;}
.contact_maru_button:hover:before{opacity: 0.1; box-shadow: 0 0 0 0.5em currentColor inset;}
.contact_maru_button.black:hover:before,
.contact_maru_button.darkgrey:hover:before{opacity: 0.3;}
.contact_maru_button:after { font-family: "Font Awesome 6 Free"; font-weight: 600; content: "\f0a9"; margin: 0.7em 0 0; font-size: 80%;}
.contact_maru_button .text{display: flex; flex-direction: column; align-items: center; justify-content: center;}
.contact_maru_button .eng{font-family: "af" , sans-serif; font-size: 80%; font-weight: 500; line-height: 1; margin: 0 0 0.3em;}
.contact_maru_button.darkgrey{background: #888;}
.contact_maru_button.lightgrey{color: #000; background: #ddd;}
.contact_maru_button.white{color: #000; background: #fff;}
@media screen and (max-width:960px){
.contact_maru_buttons{font-size: 85%; gap:2em;}
}

/* 丸いお問い合わせボタン（左下に固定） */
.contact_maru_buttons.fixed{position: fixed; z-index: 90; left: 40px; bottom: -6em; align-items: flex-start; justify-content: flex-start; gap:2em; margin: auto; opacity: 0; pointer-events: none; transition: 0.4s bottom,0.4s opacity;}
.contact_maru_buttons.fixed.active{pointer-events: inherit; bottom: -3em; opacity: 1;}
.contact_maru_buttons.fixed .contact_maru_button{font-size: 100%; padding: 0 0 2.4em;}
.contact_maru_buttons.fixed .contact_maru_button:after { display: none;}
@media screen and (max-width:960px){
.contact_maru_buttons.fixed{left: 20px; font-size: 80%;}
}

/* アコーディオン*/
.ac .trigger{cursor:pointer; background:#fff; padding:1em 2.5em 1em 1em; display:block; vertical-align:middle; font-weight: bold; border:1px solid rgba(0,0,0,0.2); position:relative; z-index: 10; line-height: 1.54; transition:0.4s;}
.ac .trigger.open{background:rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.8); border-bottom-color: rgba(0,0,0,0); border-radius: 0;}
.ac .trigger.open:not(:first-child){ margin-top:2em;}
.ac .trigger:not(.open):hover{background:rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.8); z-index: 20;}
.ac .trigger:after {color: #0074BE; font-family:"Font Awesome 6 Free"; font-weight:600; content: "\f067"; display: inline-block; line-height: 1; position:absolute; top:50%; right:1em; transform: translateY(-50%) scale(0.7); transform-origin: center; transition:0.4s color,0.4s transform;}
.ac .trigger.open:after{color: #D4617A; transform: translateY(-50%) scale(0.7) rotate(135deg);}
.ac .trigger>*,
.ac .trigger p{ margin:0;}
.ac .trigger>.heading{font-size:110%; line-height: 1.4; margin: 0;}
.ac .trigger+*{ display:none; border:1px solid rgba(0,0,0,0.8); background: #fff; border-top:none; margin:0 auto 2em; padding:1em; position:relative; z-index: 10; border-radius: 0;}
.ac .trigger+*>*:first-child{margin-top: 0;}
.ac .trigger+*>*:last-child{margin-bottom: 0;}
.ac .trigger+*+.trigger{margin-top: -1px;}
/*アコーディオン　Q and A*/
.ac.qanda .trigger,.ac.qanda .trigger+*{ padding-left:3em;}
.ac.qanda .trigger:before,
.ac.qanda .trigger+*:before{font-family: "af", sans-serif; content: "Q"; font-weight:bold; width:1.6em; height:1.6em; display: inline-flex; align-items: center; justify-content: center; text-align:center; position:absolute; top:1.15em; left:0.9em; background:#ddd; font-size: 90%; border-radius: 0; color: #000; }
.ac.qanda .trigger.open:before{color: #fff; background: #000;}
.ac.qanda .trigger+*:before{content: "A"; top:1.30em; color: #fff; background: #0074BE;}
.ac.qanda .trigger.open>.heading{font-weight: bold;}
/*Q&A構造化データ用に調整*/
.ac>*+*[itemprop="mainEntity"]{margin-top: -1px;}
.ac>*:not(:first-child) .trigger.open{ margin-top:2em;}
.ac *[itemprop="text"]>*:first-child{margin-top: 0;}
.ac *[itemprop="text"]>*:last-child{margin-bottom: 0;}

/*テーブル*/
table.style{margin:1em 0; padding:0; width:100%; text-align: left;}
table.style.center{text-align: center;}
table.style>tbody>tr>th{ border:1px solid #bbb; background:#f5f5f5; padding:0.7em; vertical-align:middle; text-align: inherit;}
table.style>tbody>tr>td{ border:1px solid #ccc; background:#fff; padding:0.7em; vertical-align:middle; text-align: inherit;}
table.style>tbody>tr>th.top,
table.style>tbody>tr>td.top{ vertical-align:top;}
table.style p{margin: 0;}
table.style .heading{margin-bottom: 0.3em;}
table.style *:not(.heading)+.heading{margin-top:1em;}
@media screen and (max-width:960px){
table.style.hold{font-size: 90%;}
table.style:not(.hold){ display:block; width: auto;}
table.style:not(.hold)>colgroup{ display:none;}
table.style:not(.hold)>tbody{display:block;}
table.style:not(.hold)>tbody>tr{display:block;}
table.style:not(.hold)>tbody>tr>th{display:block; border:none; padding:0.7em 20px; width:100%;}
table.style:not(.hold)>tbody>tr>td{display:block; border:none; padding:0.7em 20px 2em;}
table.style:not(.hold)>tbody>tr:last-child>td{padding-bottom:0.7em;}
}
@media screen and (max-width:480px){
table.style:not(.hold){margin-left: -20px; margin-right: -20px;}
}
/*テーブル.ボーダー*/
table.style.border>tbody>tr{border-bottom:1px solid #ccc;}
table.style.border>tbody>tr:first-child{border-top:1px solid #ccc;}
table.style.border>tbody>tr>th{ border:none; background:inherit; vertical-align:top; padding-left: 0; padding-right: 0;}
table.style.border>tbody>tr>td{ border:none; background:inherit; vertical-align:top; padding-right: 0;}
@media screen and (max-width:960px){
table.style.border:not(.hold)>tbody>tr{ padding:0; margin-bottom:0; }
table.style.border:not(.hold)>tbody>tr>th{ padding:0.7em 20px 0; border-bottom:none;}
table.style.border:not(.hold)>tbody>tr>td{ padding:0 20px 0.7em; border-bottom:none;}
}
/*はみ出た分を横スクロール*/
.you_can_swipe{ display: none;}
@media screen and (max-width:960px){
.you_can_swipe{display: flex; align-items: center; justify-content: center;  gap:0.5em; text-align:center; line-height: 1; margin: 0 auto 1em; position: sticky; top: auto; left: 0;}
.you_can_swipe>span{font-size: 80%;}
.you_can_swipe>i{color: #3580ca;}
	.wrapper .you_can_swipe>i{color: #fff;}
.overflow-x-wrapper:not(:has(.portrait)){ overflow-x:auto; margin: 1em -10vw 0;}
.overflow-x-wrapper:not(:has(.portrait))>div{padding: 0 10vw; width: 960px; box-sizing: content-box;}
.overflow-x>*:first-child{margin-top: 0;}
.overflow-x:not(.portrait) table.style.hold{font-size: 100%;}
}
@media screen and (max-width:960px) and (min-width:481px){
.overflow-x-wrapper:has(.portrait) .you_can_swipe{ display: none;}
}
@media screen and (max-width:480px){
.overflow-x-wrapper{ overflow-x:auto; margin: 1em -20px 0 !important;}
.overflow-x-wrapper>div{padding: 0 20px !important; width: 960px; box-sizing: content-box;}
.overflow-x-wrapper>div:has(img){width: 135vw;}
.overflow-x table.style.hold{font-size: 100%;}
}

/*準備中ウサギ*/
img.junbityuu{display: block; margin: 6em auto; width: min(30%,120px);}
section:has(img.junbityuu) .heading{display: none;}

/*箱*/
.hako{background: #f5f5f5; padding: 2em; margin: 2em auto;}
.hako>*:first-child,
.hako>.narrow>*:first-child{margin-top: 0;}
.hako>*:last-child,
.hako>.narrow>*:last-child{margin-bottom: 0;}
.hako.blue,
.hako.construction{background: #EDF5FA;}
.hako.green,
.hako.eco{background: #EDF5F4;}
.hako.yellow,
.hako.housing,
.hako.estate{background: #FDF4E5;}
.hako.pink,
.hako.red,
.hako.community{background: #FCF3F5;}
.hako .heading.style2{background: #fff;}
.hako ul.check>li:before{background: #fff;}
@media screen and (max-width:960px){
.hako{padding-left: 1em; padding-right: 1em;}
}

/* マージン */
.mt6{margin-top: 6em !important;}
.mt5{margin-top: 5em !important;}
.mt4{margin-top: 4em !important;}
.mt3{margin-top: 3em !important;}
.mt2{margin-top: 2em !important;}
.mt1{margin-top: 1em !important;}
.mt0{margin-top: 0 !important;}
.mb0{margin-bottom: 0 !important;}
.mb1{margin-bottom: 1em !important;}
.mb2{margin-bottom: 2em !important;}
.mb3{margin-bottom: 3em !important;}
.mb4{margin-bottom: 4em !important;}
.mb5{margin-bottom: 5em !important;}
.mb6{margin-bottom: 6em !important;}

/* パディング */
.pt6{padding-top: 6em !important;}
.pt5{padding-top: 5em !important;}
.pt4{padding-top: 4em !important;}
.pt3{padding-top: 3em !important;}
.pt2{padding-top: 2em !important;}
.pt1{padding-top: 1em !important;}
.pt0{padding-top: 0 !important;}
.pb0{padding-bottom: 0 !important;}
.pb1{padding-bottom: 1em !important;}
.pb2{padding-bottom: 2em !important;}
.pb3{padding-bottom: 3em !important;}
.pb4{padding-bottom: 4em !important;}
.pb5{padding-bottom: 5em !important;}
.pb6{padding-bottom: 6em !important;}

/* 画像の比率を固定 */
img.aspect{width: 100%; height: auto; object-fit: cover;}
.ratio16_9{aspect-ratio:16/9;}
.ratio3_2{aspect-ratio:3/2;}
.ratio4_3{aspect-ratio:4/3;}
.ratio1_1{aspect-ratio:1/1;}

/* 画像以外の要素の比率を固定 */
*:not(img).aspect{width: 100%; height: auto; overflow: hidden;}

/* Googleマップ */
iframe[src*="google.com/maps"] {width: 100%; height: auto; aspect-ratio:16/9; vertical-align: bottom; margin: 1em auto; display: block;}
@media screen and (max-width:960px) and (orientation:portrait){
iframe[src*="google.com/maps"] {aspect-ratio:3/4;}
}

/*お知らせ　一覧*/
.news_index_wrap{display: flex; align-items: flex-start; gap:2em 4%;}
.news_index_wrap .heading_wrap_wrap{width: 18em; position: sticky; top: calc(100px + 20px);}
.news_index_wrap .heading_wrap_wrap .heading{margin: 0;}
.news_index_wrap .button_wrap{margin: 2em 0 0;}
.news_index_wrap .button_wrap .button{width: min(80%,300px);}
.news_index_wrap .body{flex: 1;}
.news_index ul.nav.news{margin-top: 0; margin-bottom: 0;}
@media screen and (max-width:960px){
.news_index_wrap{flex-direction: column;}
.news_index_wrap .heading_wrap_wrap{display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; top: auto; flex-wrap: wrap;}
.news_index_wrap .heading_wrap{margin: 0;}
.news_index_wrap .button_wrap{font-size: 80%; margin: 0;}
.news_index_wrap .button_wrap .button{width: auto; padding-left: 1.5em; padding-right: 1.5em;}
.news_index_wrap .body{width: 100%;}
}
/*お知らせ　一覧用のリスト*/
ul.nav.news .image{width: 8em; height: auto; aspect-ratio:3/2; overflow: hidden;}
ul.nav.news .image:not(:has(img)){background: url(../img/symbol_blue.webp) no-repeat center center; background-size: 40% auto; background-color: #fff; box-shadow: 0 0 0 1px inset rgba(0,0,0,0.1);}
ul.nav.news .image img{width: 100%; height: 100%; object-fit: cover;}
ul.nav.news li>a:hover .image:not(:has(img)){filter: brightness(105%) saturate(105%) contrast(105%);}
ul.nav.news .date,
ul.nav.news .category{font-size: 80%;}
ul.nav.news .meta{display: flex; gap:1em;}
ul.nav.news .title{margin: 0; font-size: 110%; font-weight: bold;}
ul.nav.news p{font-size: 80%; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; /*-webkit-line-clamp: 1;*/ /* 行数 */}
@media screen and (max-width:480px){
ul.nav{ margin-left:-20px; margin-right:-20px;}
ul.nav li{padding-left: 20px; padding-right: 20px;}
ul.nav li>a{margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 2.5em; width: calc(100% + 40px);}
ul.nav.news .image{width: 5em;}
ul.nav.news .title{font-size: 100%;}
ul.nav.news p{/*-webkit-line-clamp: 3;*/ /* 行数 */}
}
/* お知らせ画像などが縦長だった場合...上部をトリミング */
ul.nav.news .image img.portrait{object-position: center top;}

/*お知らせ　詳細（固有のクラス(.news等)を付けないものは、施工事例や用語集などと共用します）*/
article{margin-bottom: 6em;}
article header {margin: 0 auto 2em;}
article header .meta{display: flex; align-items: center; flex-wrap: wrap; gap:0 0.7em; margin: 0 0 0.5em;}
article header .heading{font-size: 200%; margin: 0 !important;}
article.news .image{display: flex; align-items: center; justify-content: center; margin: 2em auto; gap:2em 4%;}
@media screen and (min-width:961px){
article.news .image img{max-height: 800px; object-fit: contain;}
}
article.news .download_link{text-align: center; margin: 2em auto;}
@media screen and (max-width:960px){
article header .heading{font-size: 160%}
}
@media screen and (max-width:960px) and (orientation:portrait){
article.news .image{flex-direction: column;}
}

/* NEWマーク */
ul.nav.news span.new,
article span.new{display: inline-block; margin-left: 0.5em; font-family: "af";}
article span.new{font-size: 70%;}
span.new>span{display: inline-block;
animation: jump 1.2s cubic-bezier(.5,0.5,.5,1) infinite;}
span.new>span:nth-child(2){animation-delay: 0.05s;}
span.new>span:nth-child(3){animation-delay: 0.10s;}
/* NEWのアニメーション */
@keyframes jump {
    0%, 100% { transform: translateY(0); }
    10% { transform: translateY(-0.7em); }
    20% { transform: translateY(0); }
    30% { transform: translateY(-0.3em); }
    40% { transform: translateY(0); }
}

/*流れ*/
ul.flow,
ol.flow{margin: 2em auto; padding: 0;
counter-reset: number 0;}
ul.flow>li,
ol.flow>li{position: relative; padding: 0 0 3em; list-style: none; margin: 0;}
ul.flow>li:before,
ol.flow>li:before{ content: ""; display: block; width: 1px; height: 100%; background:none; border-left:1px solid rgba(0,0,0,0.2); position: absolute; top: 1em; left: 29px;}
ul.flow>li:last-child,
ol.flow>li:last-child{padding: 0;}
ul.flow>li:last-child:before,
ol.flow>li:last-child:before{display: none;}
ul.flow header,
ol.flow header{background: #f5f5f5; position: relative; padding: 0.8em 0.8em 0.8em 60px; z-index: 10; margin: 0 0 1em;}
ul.flow header:before,
ol.flow header:before{counter-increment: number 1; content: counter(number); position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; text-align: center; flex-direction: column; line-height: 1; font-size: 22px; border-radius: 99em; font-family: "af"; font-weight: 500;}
ol.flow.blue header:before,
ol.flow.construction header:before{background: #0074BE;}
ol.flow.green header:before,
ol.flow.eco header:before{background: #007361;}
ol.flow.yellow header:before,
ol.flow.housing header:before,
ol.flow.estate header:before{background: #ECA826;}
ol.flow.pink header:before,
ol.flow.red header:before,
ol.flow.community header:before{background: #D4617A;}
ul.flow header .heading,
ol.flow header .heading{font-size: 130%; line-height: 1.4; margin: 0;}
ul.flow .body,
ol.flow .body{padding: 0 0 0 60px;}
ul.flow .body>*:first-child,
ol.flow .body>*:first-child{margin-top: 0;}
ul.flow .body>*:last-child,
ol.flow .body>*:last-child{margin-bottom: 0;}
@media screen and (max-width:960px){
ul.flow>li:before,
ol.flow>li:before{left: 19px;}
ul.flow header,
ol.flow header{padding: 0.8em 0.8em 0.8em 40px;}
ul.flow header:before,
ol.flow header:before{ width: 24px; height: 24px; font-size: 14.6px; top: 0.85rem; left: 8px; transform: none;}
ul.flow header .heading,
ol.flow header .heading{display: block; font-size: 120%;}
ul.flow .body,
ol.flow .body{padding: 0 0 0 40px;}
}
/*流れをコンパクトに*/
ul.flow.compact>li,
ol.flow.compact>li{padding: 0 0 1.5em;}
ul.flow.compact>li:before,
ol.flow.compact>li:before{left: 16px;}
ul.flow.compact>li:last-child,
ol.flow.compact>li:last-child{padding: 0;}
ul.flow.compact header,
ol.flow.compact header{padding: 0.5em 0.5em 0.5em 40px; margin: 0 0 0.5em;}
ul.flow.compact header:before,
ol.flow.compact header:before{left: 5px; width: 24px; height: 24px; font-size: 14.6px;}
ul.flow.compact header .heading,
ol.flow.compact header .heading{font-size: 110%;}
ul.flow.compact .body,
ol.flow.compact .body{padding: 0 0 0 40px;}
@media screen and (max-width:960px){
ul.flow.compact header:before,
ol.flow.compact header:before{ top: 0.5rem;}
ul.flow.compact header .heading,
ol.flow.compact header .heading{font-size: 110%;}
}
/* 本文が無いときはリストの余白を詰める */
ul.flow>li:not(:has(.body)),
ol.flow>li:not(:has(.body)){padding: 0 0 0.1em;}
/* 背景が無いデザイン */
ul.flow.no_background header,
ol.flow.no_background header{background: none; margin-bottom: 0;}

/* ボタングループ */
.button_group{display: flex; gap: 1em; margin: 2em auto;}
.button_group.wrap{flex-wrap: wrap;}
.button_group.center{justify-content: center;}
.button_group.flex1 .button{flex: 1; padding-left: 1em; padding-right: 1em;}
.button_group.column{flex-direction: column;}
@media screen and (max-width:960px){
.button_group{flex-direction: column;}
}

/* 画像をデザインされたsvgでマスク */
img.mask{ mask-image: url("../img/mask.svg") !important; mask-repeat: no-repeat; mask-position: left top; mask-size: cover; mask-type: alpha; border-radius: 0 4em 4em 4em;}

/* 画像以外の要素をデザインされたsvgでマスク */
*:not(img).mask{mask-image: url("../img/mask.svg") !important; mask-repeat: no-repeat; mask-position: left top; mask-size: cover; mask-type: alpha; border-radius: 0 4em 4em 4em; overflow: hidden; position: relative;}
/* 左上が明るい画像の場合、丸いデザインが見えるように調整 */
*:not(img).mask.fix:before{ content: ""; display: block; width: 50%; height: 50%; background: radial-gradient(farthest-side at left top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); position: absolute; z-index: 10; top: 0; left: 0;}

/* 会社のキャッチコピー */
.corporate_catch{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; gap: 1em 0; margin: 3em auto; padding: 0 0 0 1em;}
.corporate_catch.left,
.corporate_catch.left-center{justify-content: flex-start; text-align: left; padding: 0;}
.corporate_catch img{height: 1.8em; display: block;}
@media screen and (max-width:960px){
.corporate_catch.left-center{justify-content: center; text-align: center; padding: 0 0 0 1em;}
}

/* 角丸 */
.radius,
.radius1{border-radius: 1em;}

/* アイテム一覧 */
ul.items {display: flex; flex-wrap: wrap; gap:3em 40px; margin: 2em auto; /*font-size: min(1.4vw,16px);*/}
ul.items > li{container-type: inline-size; width: calc((100% - 120px) / 4);}
ul.items > li > *{display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap:1em; text-decoration: none; color: #000; font-weight: 500; height: 100%;}
ul.items > li > a:hover{}
ul.items .image{width: 100%;}
ul.items .image img{width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover;}
ul.items .text{ font-size: 4.5cqw; flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5em;}
ul.items .text>*:last-child{margin-bottom: 0 !important;}
ul.items .meta{font-size: 80%;}
ul.items .title{margin: 0; line-height: 1.4; font-weight: bold;}
@media screen and (max-width:1300px){
ul.items > li{width: calc((100% - 80px) / 3);}
}
@media screen and (max-width:960px){
ul.items{gap:2em 20px}
ul.items > li{width: calc((100% - 20px) / 2);}
ul.items .text{font-size: 80%;}
}

/* 施工事例の画像スライダーとサムネイル */
.slider_wrap:has(.works_slider){margin: 2em auto;}
.works_slider{background: #f5f5f5;}
.works_slider .image{width: 100%; height: auto; display: flex; align-items: center; justify-content: center; position: relative; container-type: inline-size;}
.works_slider .image img{/*width: 100%;*/ max-height:666px; object-fit: contain;}
.works_thumb{margin: 0.5em auto 0;}
.works_thumb .slick-track{margin: auto;}
.works_thumb .slick-slide{position: relative; border: none; padding: 0.5em; cursor: pointer; opacity: 0.6; filter: saturate(0%) contrast(120%); transition: 0.2s opacity ,0.2s filter;}
.works_thumb .slick-slide:not(.slick-current):hover{opacity: 1; filter: saturate(100%) contrast(100%);}
.works_thumb .slick-current{opacity: 1; filter: saturate(100%) contrast(100%);}
.works_thumb .slick-current:before{content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 100; top: 0; left:0; border: 2px solid #000;}
.works_thumb .image{width: 100%; height: auto; aspect-ratio:3/2;}
.works_thumb .image img{width: 100%; height: 100%; object-fit: cover; }
@media screen and (max-width:960px) and (orientation: landscape){
.works_slider .image img{width: 80%; max-height:53.3cqw;}
}
@media screen and (max-width:960px) and (orientation: portrait){
.works_slider .image img{max-height:100cqw;}
}

/* 施工事例スライダーのキャプション */
.works_caption{display: none !important; margin: 1em auto 0;}
.works_caption .caption{text-align: left; display: flex; flex-direction: column; align-items: center;}
.works_caption .caption p{margin: 0;}
@media screen and (max-width:960px) and (orientation: portrait){
.works_caption{display: block !important;}
}
/* PC用に複製したキャプション */
.works_slider .image .caption{font-size: 90%; text-align: left; position: absolute; left: 1em; bottom: 2em; width: calc(100% - 2em); display: flex; flex-direction: column; align-items: center; }
.works_slider .image .caption p{ max-width: 40em; margin: 0; padding: 1em 2em; background: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
@media screen and (max-width:960px){
.works_slider .image .caption{font-size: min(1.8vw,100%); left: 0; bottom: 0; width: 100%;}
.works_slider .image .caption p{ max-width: none; padding: 1em;}
}
@media screen and (max-width:960px) and (orientation: portrait){
.works_slider .image .caption{display: none;}
}

/* 施工事例のデータ */
dl.works_data{display: flex; gap:1em 4%; flex-wrap: wrap; margin: 3em auto; line-height: 1.6;}
dl.works_data>div{width: min((100% - 4%) / 2); display: flex; border-bottom: 1px solid rgba(0,0,0,0.2); padding: 0 0 1em;}
dl.works_data dt{width: 5em; font-weight: bold; }
dl.works_data dd{flex: 1;}
@media screen and (max-width:960px){
dl.works_data{flex-direction: column; font-size: 90%;}
dl.works_data>div{width: 100%;}
dl.works_data>div:first-child{border-top: 1px solid rgba(0,0,0,0.2); padding-top: 1em;}
dl.works_data dt{width: 5em; font-weight: bold; }
dl.works_data dd{flex: 1;}
}

/*360°カメラiframeのサイズを調整*/
.wrap360camera{ margin: 0 auto 3em;}
.wrap360camera .ricoh-theta-tour-image{width: 100% !important; height: auto !important;}
.wrap360camera iframe{width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; vertical-align: bottom;}
@media screen and (max-width:960px){
.wrap360camera{ margin: 0 auto 2em;}
}
@media screen and (max-width:960px) and (orientation:portrait){
.wrap360camera iframe{ aspect-ratio: 3/4;}
}

/* サブナビを用語集用に調整 */
@media screen and (max-width:960px){
.snav.glossary{margin: 4em auto;}
.snav.glossary ul.nav{display: flex; flex-wrap: wrap; gap:0.5em 0; font-size: min(3.6vw,100%);}
.snav.glossary ul.nav>li{border: none; display: flex; width: 33.33%; padding: 0; min-height: 3em; line-height: 1.2;}
.snav.glossary ul.nav>li>a{ display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1em; margin: 0; border-radius: 1.6em; width: 100%; height: 100%;}
.snav.glossary ul.nav>li>a:after{display: none;}
}
@media screen and (max-width:480px){
.snav.glossary .inner{padding: 0 20px;}
}
/* 用語集一覧リスト */
ul.glossary_index {	display: flex; flex-direction: column; }
ul.glossary_index>li{border: 1px solid rgba(0,0,0,0.8);}
ul.glossary_index>li+li{margin-top: -1px;}
ul.glossary_index>li>*{text-decoration: none; color: #000; display: flex; gap:2em; padding: 2em;}
ul.glossary_index>li>a:hover{background: rgba(0,0,0,0.07);}
ul.glossary_index .text{flex: 1;}
ul.glossary_index .meta{display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.7em; margin: 0 0 0.5em;}
ul.glossary_index .title{font-size: 160%; line-height: 1.4; font-weight: bold;}
ul.glossary_index .title+.longComment{margin-top: 0.5em; font-size: 90%;}
ul.glossary_index .dummy_button{width: 14em; display: flex; align-items: center; justify-content: center;}
ul.glossary_index>li>a:hover .dummy_button .button{color:#fff; background:#000; border-color: transparent;}
@media screen and (max-width:960px){
ul.glossary_index>li>*{flex-direction: column; gap:1.5em; padding: 1.5em;}
ul.glossary_index .title{font-size: 140%;}
ul.glossary_index .dummy_button{width: 100%; font-size: 80%;}
}

/* 不動産情報一覧 */

/* ナビゲーションと並び変え */
.sort_wrap{display: flex; align-items: center; justify-content: space-between; margin: 0 auto 2em;}
@media screen and (max-width:960px){
.sort_wrap{flex-direction: column; gap:1em;}
}

/* サブナビを不動産情報一覧用に調整 */
.snav.fix_estate{margin: 0; padding: 0;}
.snav.fix_estate ul.nav{border: none; padding: 0; justify-content: flex-start;}
@media screen and (max-width:960px){
.snav.fix_estate{margin: 0 auto;}
.snav.fix_estate ul.nav{display: flex; flex-wrap: wrap; gap:0.5em 0; font-size: min(4vw,100%);}
.snav.fix_estate ul.nav>li{border: none; display: flex; width: 50%;/*カテゴリの数に応じて調整*/ padding: 0; min-height: 3em; line-height: 1.2;}
.snav.fix_estate ul.nav>li>a{ display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 1em; margin: 0; border-radius: 1.6em; width: 100%; height: 100%;}
.snav.fix_estate ul.nav>li>a:after{display: none;}
}

/* 並び変え */
.sort form{display: flex; align-items: center;}
.sort_heading{font-weight: bold;}
.sort_item+.sort_item{margin-left: 1em;}
.sort_item select{margin: 0;}

/* 物件一覧リスト */
ul.estate_index {	display: flex; flex-direction: column; line-height: 1.6;}

ul.estate_index>li{border: 1px solid rgba(0,0,0,0.8); display: flex; flex-wrap: wrap; column-gap: 2em; padding: 2em;}
ul.estate_index>li+li{margin-top: -1px;}

ul.estate_index header{width: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0 0 1em;}

ul.estate_index header .meta{display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.7em; margin: 0 0 0.5em;}

ul.estate_index header .heading{margin: 0; font-size: 160%;}

ul.estate_index header div:has(.heading){max-width: 70%;}
ul.estate_index header .aside{display: flex; flex-wrap: wrap; gap:1em; font-size: 130%;}
ul.estate_index header .aside .data_item{display: flex; gap:0.5em;}

ul.estate_index .image{width: 20em; display: flex; gap:0.5em;}
ul.estate_index .image img{width: 100%; aspect-ratio: 1/1; object-fit: cover;}

ul.estate_index .text{flex: 1; display: flex; gap:0 1em; font-size: 90%;}

ul.estate_index .data1,
ul.estate_index .data2{display: flex; flex-direction: column; gap:1em;}
ul.estate_index .data1{width: 10em;}
ul.estate_index .data2{flex: 1;}

ul.estate_index .data_item .head{font-weight: bold;}
ul.estate_index .data_item p{margin: 0;}

ul.estate_index .button_wrap{width: 12em; display: flex; flex-direction: column; gap:1em;}
ul.estate_index .button_wrap .button{width: 100%; padding-left: 1em; padding-right: 1em;}

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

ul.estate_index>li{flex-direction: column; padding: 1.5em 1em 2.5em;}

ul.estate_index header{flex-direction: column; row-gap: 0.5em;}

ul.estate_index header .heading{font-size: 130%;}

ul.estate_index header div:has(.heading){ max-width: initial; width: 100%;}
ul.estate_index header .aside{font-size: 110%; align-self: flex-end;}

ul.estate_index .image{width: 100%; margin: 0 0 1em;}

ul.estate_index .text{ flex-direction: column; gap:1em;}

ul.estate_index .data1{width: 100%; flex-direction: row; gap:0.5em;}
ul.estate_index .data1>*{flex: 1;}

ul.estate_index .button_wrap{width: min(80%,20em); margin: 2em auto 0;}
}

/* ページャー */
nav.pager{display: flex; align-items: center; justify-content: space-between; width: min(100%,600px); margin: 4em auto; position: relative;}
nav.pager:before{position: absolute; z-index: -1; top: 50%; left: 0; height: 1px; width: 100%; display: block; content: ""; background: color-mix(in srgb, rgba(0,0,0,0.8), transparent 50%);}

nav.pager .select_page{position: relative;}
nav.pager .select_page:before{font-family: "af", sans-serif; content: "PAGE"; position: absolute; top: -1.3rem; font-size: 80%; font-weight: 500; color: var(--color-primary);}
nav.pager select{min-width: 6em; height: 3em; text-align: center; font-weight: bold;}

nav.pager .prev a,
nav.pager .next a{min-width: 8em; height: 3em; display: inline-flex; align-items: center; justify-content: center; gap:1em; background:#000; color: #fff; padding: 0 1em; text-decoration: none; border-radius: 1.7em; transition: 0.2s background;}
nav.pager .prev a:hover,
nav.pager .next a:hover{background: color-mix(in srgb, #000, #fff 20%);}

nav.pager .prev a:before,
nav.pager .next a:after{font-family: "Font Awesome 6 Free"; font-weight: 600; content: "\f177"; display:inline-block;}
nav.pager .next a:after{content: "\f178";}

nav.pager a.disabled{background: #ccc; color:rgba(255,255,255,0.6); pointer-events: none;}
@media screen and (max-width:960px){
nav.pager .prev a,
nav.pager .next a{min-width: 6em;}
}