@charset "utf-8";
:root {
	--main-color: #db4117;
	--sub-color_01: #f5c92a;
	--white-gray: #efefef;
	--light-gray: #c9caca;
}

/* 吉田さんのとこのほぼそのまま拝借したやつ */
.border-t2{border-top: solid 2px var(--white);}
.border-b2{border-bottom: solid 2px var(--white);}

/* style-guide.css に追加した方が良さげなやつ */

/* Flexbox 伸縮ユーティリティ */
.fl-fill { flex: 1 1 auto; }

/* 文字サイズ */
.font-12-20 { font-size: clamp(12px, 2.5vw, 20px); }
.font-16-24 { font-size: clamp(16px, 2.5vw, 24px); }
.font-28-58 { font-size: clamp(28px, 4vw, 58px); }
.font-32-60 { font-size: clamp(32px,4.5vw,60px); }

/* 文字サイズ（アクセント文字サイズ調整）*/
.font-small__span-5 {font-size: .5em;}
.font-small__span-6 {font-size: .6em;}

.font-large__span-12 {font-size: 1.2em;}

/* 文字の太さ */
.font-weight-900 {font-weight: 900;}

/* 字間
	-------------------------------------------- */
.letter-space-2 { letter-spacing: .2em; }

/* 行間 */
.line-height-8 { line-height: .8em; }

/* インライン位置調整 */
.vertical-middle { vertical-align: middle; }

/* 可変マージン（レスポンシブ）*/
.mt10-20 { margin-top: clamp(1rem, 2vw, 2rem); }
.mt10-30 { margin-top: clamp(1rem, 4vw, 3rem); }
.mt30-60 { margin-top: clamp(3rem, 7.75vw, 6rem); }
.mt40-60 { margin-top: clamp(4rem, 10vw, 6rem);}

.mb20-60 { margin-bottom: clamp(2rem, 6.75vw, 6rem); }

/* 上下パディング */
.py80 { padding-top: 8rem; padding-bottom: 8rem; }

/* 可変パディング（レスポンシブ）*/
.pt10-30 { padding-top: clamp(1rem, 4vw, 3rem); }

.pb80-100 { padding-bottom: clamp(8rem, 15.5vw, 10rem); }

.px10-20 { padding-left: clamp(1rem, 2vw, 2rem); padding-right: clamp(1rem, 2vw, 2rem); }

.py15-25 { padding-top: clamp(1.5rem,3.5vw,2.5rem); padding-bottom: clamp(1.5rem,3.5vw,2.5rem);}
.py15-35 { padding-top: clamp(1.5rem,3.75vw,3.5rem); padding-bottom: clamp(1.5rem,3.75vw,3.5rem);}
.py30-80 { padding-top: clamp(3rem,11vw,8rem); padding-bottom: clamp(3rem,11vw,8rem);}

@media screen and (max-width: 768px) {
	/* Grid */
	/* 強制的に全て1列に */
	.grid.grid768.grid-single[class*="grid-cols-"] {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* versatile.css に追加した方が良さげなやつ */
/* 背景色 */
.bg__main {background-color: var(--main-color);}
.bg__yellow {background-color: var(--yellow);}
.bg__white {background-color: var(--white);}

/* フォント */
.font-outfit {
  font-family: "Outfit", sans-serif;
}

/* 文字色 */
.text-main {color: var(--main-color);}

/* 角丸 */
.corner-rounded__10-25 {border-radius: var(--rounded-10-25);}
.corner-rounded__200 {border-radius: 200px;}
.corner-rounded__50per {border-radius: 50%;}

/* ボーダー */
.border-b4{border-bottom: solid 4px var(--white);}
.border-b50-70{border-bottom: solid clamp(50px,5.5vw,70px) var(--white);}
.border-r8{border-right: solid 8px var(--white);}

/* リスト(文字前に●) */
ul.list-icon__circle li {
	text-indent: -1.2em;
    padding-left: 1.2em;
}
ul.list-icon__circle li::before {
	content: "●";
    margin-right: .2rem;
}

/* テーブル */
.tbl-corner {
	border-collapse: separate;
    border-spacing: .75rem;
}
.tbl-corner th {
	background-color: var(--yellow);
	border-radius: 5px;
}

.tbl-corner input,.tbl-corner textarea {border-radius: 5px;}
.tbl-corner input:not([type="checkbox"]):not([type="radio"]) {
	height: 100%;
    min-height: 40px;
}

.tbl-corner.tbl-corner__light-gray {
	border-spacing: 1.5rem;
}
.tbl-corner.tbl-corner__light-gray th {
	background-color: var(--white-gray);
	padding: 1rem .5rem;
}
.tbl-corner.tbl-corner__light-gray td {
	padding: 0 .5rem;
}

@media screen and (max-width: 768px) {
	.tbl-corner.table768.tbl-corner__light-gray td {
		padding-top: 1rem;
	}
}

@media screen and (max-width: 560px) {
	.tbl-corner.table560 th {padding: .75rem;}
}


/* 
style.css に追加した方が良さげなやつ

※fvとfv下スクロール辺りは吉田さんのやつ改変してるので
　お好みでどっちかに合わせといてください
*/
/* ヘッダー
-------------------------------------*/
header .head-nav {
	align-items: center;/* コメントアウト外すだけで良い */
}
.nav-area ul {margin: 0;/* margin-bottomの値無くすだけで良い */}

.nav-area ul li.main-menu:hover > a {border: none;}/* hoverアクションを↓にするためオフにしてる */
.nav-area ul li.main-menu > a::after {
	content: "";
	display: block;
    width: 100%;
	border-bottom: 0.2em solid var(--yellow);
	padding-bottom: .2rem;
	opacity: 0;
	transition: opacity .3s;
}
.nav-area ul li.main-menu > a:hover::after  {opacity: 1;}

.nav-area ul li.main-menu:has(.dropdown-menu) > a::before {
	content: "";
	display: block;
	width: 7px;
	height: 6px;
	background-color: var(--yellow);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	position: absolute;
    top: 100%;
    left: 10%;
	opacity: 0;
	transition: opacity .3s;
}
.nav-area ul li.main-menu:has(.dropdown-menu) > a:hover::before {
	opacity: 1;
}

.head-contact-box {height: 100%;}

@media screen and (min-width: 1101px) {
	.nav-area ul li ul.dropdown-menu {
		top: 90%;
	}
}

@media screen and (max-width: 1100px) {
	.nav-area > ul {padding: 1rem 0;}
	.nav-area ul li.main-menu {
		border-bottom: none;/* border-bottom無くすだけで良い */
	}
	.nav-area ul li a {
		width: 100%;
		color: var(--deep-dark-gray);
		font-weight: bold;
		transition: color .3s;
	}
	.nav-area ul li a:hover {color: var(--main-color);}
	
	.nav-area ul li.main-menu > a::after,
	.nav-area ul li.main-menu:has(.dropdown-menu) > a::before {
		display: none;
		/*border-bottom-color: var(--main-color);*/
	}
	
	.dropdown-menu li {margin-top: .5rem;}
}

/* トップページ
-------------------------------------*/
/* FV */
.fv {
    text-align: center;
    position: relative;
}
.fv img{border-radius: var(--rounded-10-25);}

/* 下層ページ
-------------------------------------*/
/* 見出し */
.sub-underline-ttl {
	font-family: "Outfit", "Noto Sans JP", sans-serif;
	font-weight: 900;
	font-size: clamp(32px,8vw,70px);
	text-align: center;
	color: var(--main-color);
	line-height: .8em;
}
.sub-underline-ttl span {
	font-size: .55em;
}
.sub-underline-ttl span::before {
	content: "";
	display: block;
	width: 80px;height: 4px;
	background-color: var(--main-color);
	margin: .5rem auto .2rem;
}
.sub-underline-ttl.text-white {color: var(--white);}
.sub-underline-ttl.text-white span::before {background-color: var(--white);}


/* FV */
.sub-fv {padding: clamp(2rem, 5.5vw, 4rem) 1rem 1rem;}
.sub-fv .fv-ttl {
	width: 80%;
    max-width: 560px;
	margin: 0;
	position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	background-color: var(--white);
	padding: 1rem clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem);
	border-radius: 0 0 var(--rounded-10-25) var(--rounded-10-25);
	color: var(--main-color);
	font-weight: 900;
	font-size: clamp(24px,5vw,48px);
}

/* fv下アニメーション */
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-50%);
}
}

.scroll-infinity {	
	display: flex;
    overflow: hidden;
    margin: clamp(1rem, 4vw, 3rem) 0;
	position: relative;
	pointer-events: none;
}
.scroll-infinity ul {
	display: flex;
	animation:infinity-scroll-left 80s linear infinite;
	will-change:transform;
	flex: none;
}
.scroll-infinity ul li {
	flex: 0 0 auto;
	display: flex;
    align-items: center;
	padding: 0 clamp(.5rem,2vw,1.2rem);
}
.scroll-infinity ul li img {
	height: clamp(32px,5vw,62px);width: auto;
	margin: 0 .5rem;
}
.scroll-infinity img.aspect-1-1 {width: clamp(32px,5vw,62px);}

/* オレンジエリア */
.sub-main-area__clip {
	clip-path: polygon(50% 0%, 0 100%, 100% 100%);
	background-color: var(--main-color);
	height: clamp(60px,12vw,120px);
	margin-bottom: -.27px;
}

.sub-main-ttl {
	display: flex;
	flex-direction: column;
	font-size: clamp(36px,7vw,70px);
	font-weight: 800;
}
.sub-main-ttl:not(span) {font-family: "Outfit", sans-serif;}
.sub-main-ttl .sub-main-ttl__img {max-width: clamp(60px,12vw,110px);}

/* コラムリンクボタン */
.column-links {
	display: flex; justify-content: center; align-items: center;
}

.column-links img {width: auto; margin-right: .5rem;}
.column-links .columc3 {max-width: clamp(30px, 4vw, 49px);}
.column-links__arrow {
	display: inline-flex; justify-content: center; align-items: center;
	background-color: var(--white);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	aspect-ratio: 1 / 1;
}
.column-links__arrow .arrow-icon {
	position: relative;
	display: inline-block;
	width: 15px;
    height: 4px;
    background: var(--main-color);
	border-radius: 6px;
}
.column-links__arrow .arrow-icon::before, .column-links__arrow .arrow-icon::after {
	content: "";
    position: absolute;
    top: 50%;
    right: 0;
	width: 10px;
	height: 4px;
	background: var(--main-color);
	border-radius: 6px 0 0 6px;
	transform-origin: right center;
}
.column-links__arrow .arrow-icon::before {
	transform: translateY(-30%) rotate(45deg);
}
.column-links__arrow .arrow-icon::after {
	transform: translateY(-70%) rotate(-45deg);
}

.column-links__arrow.bg__main {background: var(--main-color);}
.column-links__arrow.bg__main .arrow-icon,
.column-links__arrow.bg__main .arrow-icon::before,
.column-links__arrow.bg__main .arrow-icon::after {
	background: var(--white);
}

/* コラムエリア */
.column-ttl {
	font-family: "Outfit", sans-serif;font-size: clamp(50px, 8vw, 80px);font-weight: 800;color: var(--white);line-height: .9em;
	position: absolute;left: 50%;bottom: 100%;transform: translateX(-50%);
}
.column-box {
	background-color: var(--white);position: relative;
    padding: clamp(2rem,5vw,3rem) clamp(1rem, 2vw, 2rem);
}
.column-box::before,.column-box::after {
	content: "";
	position: absolute;left: 0;right: 0;
	border: 8px solid transparent;
}
.column-box::before {bottom: 100%;border-bottom-color: inherit;}
.column-box::after {top: 100%;border-top-color: inherit;}

.column-list li {margin-bottom: .5rem;font-weight: 900;}
.column-list li::after {display: none;}

.column-list .column-links {display: inline-flex;}
.column-list .column-links__arrow {
	background-color: var(--main-color);
}
.column-list .column-links__arrow .arrow-icon,
.column-list .column-links__arrow .arrow-icon::before,
.column-list .column-links__arrow .arrow-icon::after {
	background-color: var(--white);
}



@media screen and (max-width: 560px) {
	/* FV */
	.sub-fv img {
		aspect-ratio: 26 / 19; object-fit: cover;
	}
}

/* 外構・エクステリア
-------------------------------------*/
.exterior-img-win {max-width: clamp(32px,9vw,110px);}
.exterior-img-door {max-width: 170px;}

/* カルーセル */
.path-carousel li {padding: 0;}
.path-carousel li img {border-radius: var(--rounded-10-25);}

.carousel-caption{
	position:absolute;left:50%;transform: translateX(-50%);width:33.333%;
	display: flex;justify-content: center;align-items: center;
	background: var(--white);color: var(--black);
	text-align: center;border-radius: 200px;
	font-size: clamp(16px,2vw,24px);font-weight: 700;
	white-space: nowrap;
	padding: clamp(.75rem, 2vw, 1rem);margin-top: clamp(1rem,2.5vw,2rem);
	opacity: 1;
	transition:opacity .3s ease;
}
.carousel-caption.hidden{opacity:0;}
.viewport:has(.single-mode) .carousel-caption{
	width: 92%;bottom: 20px;
}

button.carousel-nav.prev {left: 26%;}
button.carousel-nav.next {right: 26%;}
.bg__main button.carousel-nav {
	top: 40%;
	bottom: auto;
	transform: translateY(-50%);
	background: var(--white);
	border: 1px solid var(--white);
	border-radius: 50%;
	width: clamp(36px,5vw,60px);
	height: clamp(36px,5vw,60px);
	aspect-ratio: 1 / 1;
	padding: 0;
    display: flex;justify-content: center;align-items: center;
	transition: background .3s ease;
}
button.carousel-nav .arrow-icon {
	display: block;width: 14px;height: 16px;
	background: var(--main-color);
	/* Chrome / Edge / Safari */
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M2.404,15.452l10.678-6.165c.991-.572.991-2.002,0-2.574L2.404.548C1.413-.024.175.691.175,1.835v12.33c0,1.144,1.238,1.859,2.229,1.287Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat;
	/* Firefox */
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M2.404,15.452l10.678-6.165c.991-.572.991-2.002,0-2.574L2.404.548C1.413-.024.175.691.175,1.835v12.33c0,1.144,1.238,1.859,2.229,1.287Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat;
	mask-type: alpha;  /* Safari バグ回避 */
	mask-size: 100% 100%;
	transition: background .3s ease;
}
button.carousel-nav.prev span {transform: rotate(180deg);}
button.carousel-nav:hover {background: transparent;}
button.carousel-nav:hover  .arrow-icon {background: var(--white);}

@media screen and (max-width: 560px) {
	/* カルーセル */
	.single-mode li {padding: 0 1rem;}
	button.carousel-nav {top: clamp(34%,28vw,40%);}
	button.carousel-nav.prev {left: 1%;}
	button.carousel-nav.next {right: 1%;}
}

/* 内装
-------------------------------------*/
.interior-area {
	background: url("../img/interior/frame.svg") no-repeat center / contain;
}

@media screen and (max-width: 960px) {
	.interior-area {background-size: 130% 120%;}
}
@media screen and (max-width: 768px) {
	.interior-area {background: none;}
}

/* 採用情報
-------------------------------------*/
.triangle-right::after {
	content: "";
	background-color: var(--yellow);
	position: absolute;
	left: 99.9%;
	top: 50%;transform: translateY(-50%);
	width: 25px;
	aspect-ratio: 1 / 2;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	pointer-events: none;
}

.form-input__name {max-width: 200px;}
.form-input__age {max-width: 60px;margin-right: .5rem;}
.form-input__wide {width: 100%;}

span.wpcf7-spinner {display: none;}

/* style.css から一部上書き */
input[type="reset"], input[type="button"] {
	background-color: var(--light-gray);
	border-color: var(--light-gray);
	color: var(--black);
}

/* お問い合わせ
-------------------------------------*/
.contact-icon__tel {
	max-width: clamp(40px,5vw,64px);
	margin-right: .5rem;
}
.contact-icon__fax {
	max-width: clamp(36px,5vw,60px);
	margin-right: .5rem;
}

footer.footer-contact {
	top: 0;
	padding-top: 0;
}
footer.footer-contact .foot-logo {
	position: relative;
    top: -8px;
    left: 0;
    transform: none;
    margin-bottom: 5rem;
}


@media screen and (max-width: 768px) {
	.triangle-right::after {
		top: 91%;
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}
	.form-input__name,
	.tbl-corner input:not([type="checkbox"]):not([type="radio"]):not([type="number"])
	{max-width: 100%;width: 100%;}
}

/* その他
-------------------------------------*/
/* ページトップへ戻るボタン */
#page-top {
	position: fixed;
	right: 15px;
	bottom: -70px;
	z-index: 4;
	transition: bottom 0.3s ease-in-out;
}

#page-top.show {
    bottom: 90px; /* 表示時の位置 *//* これ変えてる */
}

#page-top a {
	display: block;
	width: 50px;
	font-weight: bold;
	background-color: var(--sub-color_01);
	color: var(--deep-dark-gray);/* これ変えてる */
	text-align: center;
	padding: 15px 5px;
	border-radius: 5px;
	transition: background-color 0.3s;
}