// スタイルシート common

@charset "utf-8";

@import "mixin";

html { scroll-behavior: smooth; }

body {
	@include root;
	position: relative;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	
	background-color:#ccc;
	background-attachment: fixed;
	background-position: 0px 0px, 7px 7px;
	background-size: 14px 14px;
	background-repeat: repeat;
	background-image:
		linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 100%),
		linear-gradient(45deg, #fff 25%, #e3e3e3 25%, #e3e3e3 75%, #fff 75%, #fff 100%);
}

img,
video {
	max-width: 100%;
	height: auto;
}

a:hover {
	opacity: 0.75;
}

.default {
	@include contentdefault;
	@include eachcss;
}

@function add-px($value) {
	@if (unitless($value)) { @return $value + px; }
	@return $value;
}

@mixin absolute($t:null, $r:$t, $b:$t, $l:$r) {
	position:absolute;
	@if $t { top: add-px($t); }
	@if $r { right: add-px($r); }
	@if $b { bottom: add-px($b); }
	@if $l { left: add-px($l); }
}
@mixin wh($w:null, $h:$w) {
	@if $w { width: add-px($w); }
	@if $h { height: add-px($h); }
}
@mixin borderbox($t:null, $r:$t, $b:$t, $l:$r) {
	box-sizing: border-box;
	@if $t { padding-top: add-px($t); }
	@if $r { padding-right: add-px($r); }
	@if $b { padding-bottom: add-px($b); }
	@if $l { padding-left: add-px($l); }
}

@mixin before_as_image($image_url, $w:null, $h:$w, $display_as:null) {
	content:'';
	@if $w or $h {
		@include wh($w, $h);
	}
	background:url($image_url) center / contain no-repeat;
	@if $display_as { display: $display_as+"";}
}

@mixin obj100($fit_method: cover) {
	@include wh(100%);
	object-fit: $fit_method;
}

@mixin flex_position($jc, $ai:$jc) {
	justify-content:$jc;
	align-items:$ai;
}



header { }

div#header {
	position:relative;
	z-index:2;
	div.container {
		div.sitename {
			h1 {
				a {
					position:absolute;
					//inset: 20px auto auto 30px;
					top:clamp(15px, 1.39vw , 20px);
					left:clamp(15px, 2.08vw, 30px);
					display:flex;
					justify-content:center;
					align-items:center;
					//@include wh(120);
					width:clamp(90px, 8.33vw, 120px);
					aspect-ratio: 1 / 1;
					background-color:$basecolor;
					img {
						//width:80px;
						width: 66.7%;
					}
				}
			}
		}
	}
}

div#gnav {

	div.contact {
		a {
			display:flex;
			@include wh(161, 45);
			gap: 9px;
			@include flex_position(center);
			background-color:$accentcolor;
			color:$accenttextcolor;
			span.icon {
				flex: 0 0 14px;
				img {
					@include obj100(contain);
				}
			}
			span.caption {
				font-size: 13px;
				font-weight: 700;
			}
		}
	}

	body.pc_menu & {
		position:absolute;
		z-index:2;
		inset: 32px 30px auto auto;
		nav {
			display:flex;
			gap: 2em;
			align-items:center;
			div.menu {
				ul {
					display:flex;
					gap: 2em;
					color:$basecolor;
					font-size: 15px;
					font-weight: 700;
					li {
						a {
						}
					}
				}
			}
		}
	}
	body.pc_menu.subpage & {
		nav {
			div.menu {
				ul {
					color:$basetextcolor;
				}
			}
		}
	}
	body.sp_menu & {
		background-color: rgba($themecolor, .8);
		color: $themetextcolor;
		position:fixed;
		transform: scale(0);
		z-index:10;
		inset: 0;
		font-weight: 700;
		display:flex;
		align-items:center;
		nav {
			padding-inline: calc((100% - 260px) / 2);
			max-height:100%;
			overflow-y: auto;
			overflow-x: hidden;
			div.menu {
				padding-top:20px;
				ul {
					li {
						opacity:0;
						a {
							border-bottom: 1px solid rgba($themetextcolor, .5);
							padding: 15px 0;
							display:block;
							text-align:center;
							width: 260px;
							position:relative;
							transition: color .1s .1s;
							&:after {
								content:'';
								display:block;
								position:absolute;
								inset: 0 100% 0 0;
								transition: inset .4s;
								background-color:rgba($themetextcolor, .9);
								//mix-blend-mode: multiply;
								z-index:-1;
							}
							&:hover {
								opacity:1;
								color:$themecolor;
								&:after {
									inset:0;
									//mix-blend-mode: multiply;
								}
							}
						}
						&:last-child a {
							border-bottom:none;
						}
					}
				}
			}
			div.contact {
				margin-top:10px;
				padding-bottom:70px;
				a {
					width: 260px;
					span.caption {
						font-size: 16px;
					}
				}
			}
		}
	}
	body.sp_menu.menu_open & {
		transform: scale(1);
		animation: revealCover2 1.5s forwards;
		nav div.menu {
			ul {
				li {
					transition: opacity 1s;
					&:nth-child(1) { transition-delay: 0.20s;}
					&:nth-child(2) { transition-delay: 0.30s;}
					&:nth-child(3) { transition-delay: 0.40s;}
					&:nth-child(4) { transition-delay: 0.50s;}
					&:nth-child(5) { transition-delay: 0.60s;}
					&:nth-child(6) { transition-delay: 0.70s;}
					&:nth-child(7) { transition-delay: 0.80s;}
					opacity:1;
				}
			}
		}
	}
}

@keyframes revealCover2 {
	0% {
		clip-path: inset(0 100% 0 0);
		backdrop-filter: blur(0);
	}
	20% {
		clip-path: inset(0);
		backdrop-filter: blur(0);
	}
	100% {
		backdrop-filter: blur(3px);
	}
}




div#gnavToggleWrapper {
	position:relative;
	z-index:100;
	div.container {
		a#gnavToggle {
			position:fixed;
			//inset:  20px 30px auto auto;
			top:clamp(15px, 1.39vw , 20px);
			right:clamp(15px, 2.08vw, 30px);
			body.admin-bar & { top: clamp(47px, 3.61vw , 52px);}
			@include wh(65);
			display:flex;
			flex-direction:column;
			background-color: $basetextcolor;
			color: $basecolor;
			@include flex_position(center);
			transform: translateY(-85px);
			transition: .5s;
			span.visual {
				display:block;
				@include wh(30);
				position:relative;
				span.b {
					display:block;
					@include wh(30, 2);
					background-color:$basecolor;
					@include absolute_centering;
					&.b1 {
						transform: translateY(-5px);
					}
					&.b2 {
						transform: translateY(5px);
					}
				}
			}
			span.caption {
				font-size: 10px;
				font-weight: 700;
			}
			body.sp_menu & {
				transform: translateY(0);
			}
			@include maxwidth(768){
				width: calc((100% - 50px) / 2);
				height:50px;
				inset: auto auto 0 calc((100% - 50px) / 2) !important;
				flex-direction:row-reverse;
				gap: 8px;
				background-color:$themecolor;
				color:$themetextcolor;
				span.caption {
					font-size: 12px;
				}
				&:hover {
					opacity:1;
				}
				body.menu_open & {
					background-color: transparent;
				}
			}
		}
	}
}

div#recruitNotice {
	position:relative;
	z-index:10;
	a {
		width: calc((100% - 50px) / 2);
		height: 50px;
		position:fixed;
		inset: auto auto 0 0;
		font-size: 14px;
		font-weight: 700;
		background-color:$accentcolor;
		color:$accenttextcolor;
		display:none;
		@include maxwidth(768){
			display:flex;
			@include flex_position(center);
		}
	}
}

div#mainVisual {
	position:relative;
	z-index:1;
	div.container {
		div.slides {
			div.item {
				img {
					@include obj100(cover);
					height:100vh;
					@include maxwidth(768){
						height: calc(100vh - 50px);
					}
				}
			}
		}
		ul.slick-dots{
			position:absolute;
			z-index:2;
			inset: 0 30px 0 auto;
			flex-direction:column;
			gap: 12px;
			padding:0;
			@include maxwidth(800){
				flex-direction:row;
				inset: auto 14px 35px auto;
				button { @include wh(10); }
			}
		}
		div.decoration {
			span {
				display:block;
				position:absolute;
				z-index:1;
				&.cover1 {
					inset: 0;
					background: rgba(0, 0, 0, 0.25);
				}
				&.cover2 {
					inset: 0 0 auto 0;
					height:250px;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.00) 100%);
				}
				&.shape {
					background-color:$themecolor;
					&.shape1 {
						clip-path: polygon(0 0, 100% 0, 100% 100%);
						inset:0 0 auto auto;
						width: 32.08vw;
						aspect-ratio: 462 / 80;
					}
					&.shape2 {
						clip-path: polygon(0 0, 100% 100%, 0 100%);
						inset:auto auto 0 0;
						width: 100%;
						aspect-ratio: 1440 / 248.75;
						@include maxwidth(500){
							clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%);
							aspect-ratio: 375 / 165;
						}
					}
				}
			}
		}
		div.overlay {
			position:absolute;
			z-index:1;
			//font-size: 64px;
			//font-size: clamp(40px, 4.44vw, 64px);
			font-size: clamp(40px, 3.33vw, 48px);
			//inset: 0 calc(100% - 13em - 50px) 0 3.47vw;
			inset: 0 0 35px 6.94vw;
			@include maxwidth(1240){
				inset: 0 0 35px 90px;
			}
			@include maxwidth(800){
				inset: 0 0 100px 15px;
			}
			@include maxwidth(640){
				//inset: 0 calc(100% - 6em - 50px) 0 3.47vw;
				//inset: 0 0 35px 80px;
			}
			//align-items:center;
			align-items:flex-end;
			display:flex;
			pointer-events: none;
			p {
				text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
				font-weight: 700;
				line-height: 140%;
				color:$basecolor;
				span.l {
					display:block;
					margin-top:10px;
				}
				span.mkr {
					// font-size: 96px;
					// font-size: clamp(46px, 6.67vw, 96px);
					font-size: clamp(46px, 5.00vw, 72px);
					font-weight: 700;
					line-height: 100%;
					letter-spacing: 4.8px;
					background-color:$accentcolor;
					color:$accenttextcolor;
					display:inline-flex;
					align-items:center;
					text-shadow: none;
					padding: .025em .2em .15em;
					margin-inline: .175em;
				}
				span.l > span.mkr:first-child{margin-left:0;}
				//br ~ span.mkr{margin-block:.175em;}
				&.pc {}
				&.sp { display: none; }
				@include maxwidth(800){
					&.pc { display: none; }
					&.sp { display: initial; }
				}
			}
		}
		div.headerscroll {
			a {
				display:flex;
				align-items:center;
				&:before {
					display:block;
					@include before_as_image('../images/icon-lightning-color.svg', 20);
					margin-bottom:6px;
				}
				&:after {
					content:'';
					display:block;
					height:60px;
					width: 1px;
					background-color:$basecolor;
					margin-top:14px;
				}
				position:absolute;
				z-index:1;
				inset: auto auto 0px 33px;
				font-size: 10px;
				font-weight: 700;
				writing-mode: vertical-rl;
				color:$basecolor;
				@include maxwidth(800){
					writing-mode: horizontal-tb;
					inset: auto auto 30px 15px;
					&:before {
						margin-bottom: 0px;
					}
					&:after {
						display:none;
					}
				}
			}
		}
	}
}

.item.commonstyle1 {
	a {
		display:flex;
		flex-direction:column;
		& > span {
			display:block;
		}
		span.visual {
			aspect-ratio: 1 / 1;
			img {
				@include obj100;
			}
		}
		span.meta {
			display:flex;
			align-items:center;
			gap: 23px;
			span.date {
				font-size: 15px;
				font-weight: 700;
			}
			span.terms {
				display:flex;
				gap: 5px;
				span.term {
					font-size: 14px;
					font-weight: 500;
					height:22px;
					padding: 0 10px 2px;
					display:flex;
					align-items:center;
					&.main {
						background-color: $basetextcolor;
						color:$basecolor;
					}
					&.sub {
						background-color:$themecolor;
						color:$themetextcolor;
					}
				}
			}
		}
		span.title {
			font-size: 15px;
			font-weight: 700;
			line-height: 120%;
		}
	}
}

div#toppageWhatsNew { //newsを1件表示
	display:flex;
	padding: 20px;
	background-color:$basecolor;
	color:$basetextcolor;
	gap: 20px;
	position:absolute;
	inset: calc(100vh - 120px) 0 auto auto;
	width: 860px;
	box-sizing: border-box;
	z-index:1;
	@include maxwidth(1550){
		width: 50%;
	}
	@include maxwidth(1000){
		position:relative;
		inset: auto;
		width: auto;
	}
	@include maxwidth(500){
		flex-direction:column;
		gap: 14px;
	}
	div.heading {
		font-size: 16px;
		font-weight: 700;
		position:relative;
		padding-right:18px;
		&:after {
			content:'';
			display:block;
			@include wh(2, 20);
			background-color:$themecolor;
			position:absolute;
			inset: 0 0 auto auto;
		}
		@include maxwidth(500){
			padding-bottom:16px;
			&:after {
				inset: auto auto 0 0;
				@include wh(20, 2);
			}
		}
	}
	div.body {
		margin-top:-3px;
		div.headline.news_headline {
			div.item {
				a {
					//display:flex;
					//flex-direction:column;
					//gap: 11px;
					span.visual {
						display:none;
						img {
						}
					}
					//font-size: 15px;
					//font-weight: 700;
					span.meta {
						margin-bottom:8px;
					//	display:flex;
					//	gap: 28px;
					//	align-items:center;
					//	span.date {
					//	}
					//	span.terms {
					//		display:flex;
					//		gap: 6px;
					//		span.term {
					//			height:21px;
					//			display:flex;
					//			align-items:center;
					//			padding: 0 6px 1px;
					//			box-sizing: border-box;
					//			background-color:$basetextcolor;
					//			color:$basecolor;
					//			font-size: 12px;
					//			font-weight: 700;
					//		}
					//	}
					}
					//span.title {
					//	line-height: 150%;
					//}
				}
			}
		}
	}
}

.ani_area {
	.ani_target {
		transition: .50s;
		&[data-aindex="1"] { transition-delay: 0.00s;}
		&[data-aindex="2"] { transition-delay: 0.25s;}
		&[data-aindex="3"] { transition-delay: 0.50s;}
		&[data-aindex="4"] { transition-delay: 0.75s;}
		&[data-aindex="5"] { transition-delay: 1.00s;}
		&[data-aindex="6"] { transition-delay: 1.25s;}
		&[data-aindex="7"] { transition-delay: 1.50s;}
		&[data-aindex="8"] { transition-delay: 1.75s;}
		&[data-aindex="9"] { transition-delay: 2.00s;}
		clip-path: inset(0 100% 0 0);
		position:relative;
		&:after {
			content:'';
			display:block;
			position: absolute;
			inset: 0;
			background-color: $accentcolor;
			z-index: 1;
		}
	}
	&.show {
		.ani_target {
			clip-path: inset(0);
			&:after {
				animation: revealCover 0.50s forwards; /* アニメーションの適用 */
			}
			&[data-aindex="1"]:after { animation-delay: 0.50s;}
			&[data-aindex="2"]:after { animation-delay: 0.75s;}
			&[data-aindex="3"]:after { animation-delay: 1.00s;}
			&[data-aindex="4"]:after { animation-delay: 1.25s;}
			&[data-aindex="5"]:after { animation-delay: 1.50s;}
			&[data-aindex="6"]:after { animation-delay: 1.75s;}
			&[data-aindex="7"]:after { animation-delay: 1.50s;}
			&[data-aindex="8"]:after { animation-delay: 1.75s;}
			&[data-aindex="9"]:after { animation-delay: 3.00s;}
		}
	}
}
@keyframes revealCover {
	0% {
		left: 0;
	}
	100% {
		left: 100%;
	}
}

div#subpageHeadingVisual {
	background-color:$basecolor;
	padding-top: 100px;
	position:relative;
	div.container {
		div.decoration {
			span.shape {
				position:absolute;
				&.shape1 {
					background-color:$themecolor;
					clip-path: polygon(0 0, 100% 0, 0 100%);
					inset:0 auto auto 0;
					aspect-ratio: 462 / 80;
					width: 462px;
					max-width:100%;
				}
			}
		}
		div.image {
			height:200px;
			position:relative;
			img {
				@include obj100;
			}
			&:after {
				content:'';
				display:block;
				position:absolute;
				inset:0;
				background-color: rgba(0, 0, 0, 0.25);
			}
		}
	}
}

main { }

div.heading.common_heading {
	h2 {
		display:flex;
		flex-direction:column;
		align-items:center;
		position:relative;
		span.en {
			font-size: clamp(80px, 7.64vw, 110px);
			line-height: 105%;
			@include maxwidth(800){
				font-size: clamp(60px, 7.64vw, 110px);
				//line-height: 100%;
			}
			@include maxwidth(480){
				font-size: clamp(50px, 7.64vw, 110px);
				//line-height: 100%;
			}
			font-weight: 300;
			overflow:hidden;
			width:100%;
			display:flex;
			justify-content:center;
		}
		span.ja {
			background-color:$accentcolor;
			color:$accenttextcolor;
			font-size: clamp(10px, 0.97vw, 14px);
			font-weight: 700;
			display:flex;
			height: 1.71em;
			padding: 0 0.71em 0.14em;
			box-sizing: border-box;
			align-items: center;
			position:absolute;
			bottom: -0.21vw;
			@include maxwidth(800){
				font-size: 13px;
				position:relative;
				bottom: .75em;
			}
			@include maxwidth(480){
				margin-top:3px;
				bottom: 0;
			}
		}
	}
}

div#content {
	section { }

	div#subpageTopicPath {
		background-color:$themetextcolor;
		color:$themecolor;
		padding-top:23px;;
		div.container {
			@include container(1200, 20);
			font-size: 14px;
			font-weight: 700;
			line-height: 150%;
			ul {
				display:block;
				li {
					display:inline;
					&:before {
						display:inline-block;
						@include before_as_image('../images/icon-arrow-right-color.svg', 7, 12);
						margin-inline: .5em .65em;
						transform: translateY(1px);
					}
					&:first-child:before { display:none; }
					a {
					}
				}
			}
		}
	}
	div#subpageHeading {
		background-color:$themetextcolor;
		color:$themecolor;
		padding-top:25px;
		div.container {
			@include container(1200, 20);
			div.heading.common_heading {
				display:flex;
				@include maxwidth(800){}
				h2 {
					align-items:flex-start;
					flex-basis: 100%;
					span.en {
						justify-content: start;
					}
					span.ja {
						margin-left:40px;
						@include maxwidth(800){
							margin-left: 0;
						}
					}
				}
			}
		}
	}
	div#subpageColumns {
		background-color:$basecolor;
		color:$basetextcolor;
		padding-block:50px 100px;
		div.container {
			@include container(1200, 20);
			display:flex;
			justify-content:space-between;
			gap: 40px;
			body.single-news &{
				@include container(800, 20);
			}
			@include maxwidth(1000){
				display:block;
			}
			div#subpageAside {
				flex: 0 0 280px;
				@include maxwidth(1000){
					margin-bottom:40px;
				}
				//body.tax-workscategory &{
				//	display: none;
				//}
				div.pageanchor {
					ul {
						display:flex;
						flex-direction:column;
						gap: 2px;
						li {
							a {
								color: $themecolor;
								background: url(../images/icon-arrow-right-color.svg) 16px center / 7px auto no-repeat mix($themetextcolor,$themecolor, .9);
								font-size: 14px;
								font-weight: 700;
								line-height: 120%;
								padding:17px 20px 17px 35px;
								display:block;
								word-break: break-all;
							}
						}
						@include maxwidth(1000){
							flex-wrap: wrap;
							flex-direction:row;
							li {
								a {
									padding: 7px 15px 9px 26px;
									background-size: 5px auto;
									background-position: 12px center;
								}
							}
						}
					}
				}
			}
			div#subpageContent {
				// flex: 0 1 800px;
				flex: 1 1 auto;
				div.container {
					div.default.page-company {
						h3.wp-block-heading {
						}
					}
				}
				.default{
					//施工事例のシングルページ
					.terms-wrapper{
						margin-bottom: 1em;
						ul.terms{
							list-style: none;
							margin-left: 0;
							display:flex;
							align-items: center;
							gap: 5px;               
							.term{
								font-size: 13px;
								font-weight: 500;
								height:22px;
								padding: 2px 8px;
								display:flex;
								align-items:center;
								&:nth-child(1) {
									background-color: $basetextcolor;
									color:$basecolor;
								}
								&:nth-child(n+2) {
									background-color:$themecolor;
									color:$themetextcolor;
								}				
							}
						}
					}
					//アイキャッチ画像
					figure.img-icatch{
						margin-top: 10px !important;
						width: 100%;
						max-width: 800px;
						height: calc( 534 / 800 * 100vw);
						max-height: 534px;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
							object-fit: cover;
							object-position: center;
						}
					}
					// ギャラリー
					div.works-gallery {
						display: flex;
						flex-wrap: wrap;
						gap: 0.5em;
						figure.gallery-item {
							margin: 0;
							flex-basis: calc((100% - (0.5em * 2)) / 3);
							@include maxwidth(800) {
								flex-basis: calc((100% - (0.5em * 1)) / 2);
							}
							img {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
					}
				}
			}
		}
	}
}

a.common_btn {
	width: 296px;
	max-width:100%;
	height: 50px;
	font-size: 15px;
	font-weight: 700;
	line-height: 120%;
	display:inline-flex;
	box-sizing: border-box;
	background: url(../images/icon-arrow-right-white.svg) 20px center / 7px auto no-repeat $themecolor;
	color:$themetextcolor;
	justify-content:center;
	align-items:center;
}
a.common_btn, a.btn_hover_ani {
	position: relative;
	z-index: 1;
	&::after {
		background: $accentcolor;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		transform: scale(0, 1);
		transform-origin: right top;
		transition: transform .3s;
		z-index: -1;
	}
	&:hover {
		color: #fff;
		opacity:1;
		&::after {
			transform-origin: left top;
			transform: scale(1, 1);
		}
	}
}
a.btn_hover_ani {
	&::after {
		background: $themecolor;
	}
	&.after_ac {
		&::after {
			background: $accentcolor;
		}
	}
}

div#toppageBgMedia {
	position:fixed;
	inset: 0;
	z-index:0;
	img {
		@include obj100;
	}
}

div#toppageAbout {
	position:relative;
	//background-color:$basetextcolor;
	color:$basecolor;
	//padding: 240px 0 300px;
	padding: 16.67vw 0 clamp(134px, 25.83vw, 280px);
	div.visual {
		img {
			@include obj100;
			position:absolute;
			inset: 0;
		}
	}
	div.decoration {
		span {
			display:block;
			position:absolute;
			z-index:1;
			&.cover1 {
				inset: 0;
				background: rgba(0, 0, 0, 0.65);
				backdrop-filter: blur(2px);
			}
			&.shape {
				&.shape1, &.shape2 {
					background-color:$themecolor;
				}
				&.shape3 {
					background-color:$basecolor;
				}
				&.shape1 {
					clip-path: polygon(0 0, 100% 0, 100% 100%);
					inset:0 0 auto auto;
					aspect-ratio: 1440 / 248.75;
					width: 100%;
				}
				&.shape2 {
					clip-path: polygon(0 0, 100% 100%, 0 100%);
					inset:auto auto 0 0;
					aspect-ratio: 1440 / 347;
					width: 100%;
				}
				&.shape3 {
					clip-path: polygon(0 100%, 100% 0, 100% 100%);
					inset:auto 0 0 auto;
					aspect-ratio: 1440 / 347;
					width: 75%;
				}
				//&.shape3 {
				//	clip-path: polygon(0 0, 100% 100%, 0 100%);
				//	inset:auto auto 0 0;
				//	width: 100%;
				//}
			}
		}
	}
	div.container {
		position:relative;
		z-index:1;
		div.body {
			div.heading.common_heading {
				margin-bottom:50px;
				h2 {
					span.en {
					}
					span.ja {
					}
				}
			}
			div.docs {
				@include container(520, 20);
				div.leadtext {
					font-size: clamp(24px, 2.22vw ,32px);
					font-weight: 700;
					line-height: 140%;
					text-align:center;
					margin-bottom:30px;
					@include maxwidth(800){
						font-size: clamp(20px, 2.22vw ,28px);
					}
				}
				div.text {
					font-size: 15px;
					font-weight: 500;
					line-height: 220%;
					margin-bottom:40px;
					@include maxwidth(800){
						font-size: 14px;
						line-height: 200%;
					}
				}
				div.link {
					text-align:center;
					a.btn.common_btn {
					}
				}
			}
		}
	}
}

div#toppageSlide {
	position:absolute;
	inset: auto 0;
	z-index:2;
	transform: translateY(-9.03vw);
	div.container {
		div.body {
			div.items {
				div.item {
					margin-inline: 2px;
					aspect-ratio:1 / 1;
					width: 27.5vw;
					@include maxwidth(800){
						width: 75vw;;
					}
					&.item1 {}
					img {
						@include obj100;
					}
				}
			}
		}
	}
}

div#toppageBusiness {
	background-color:$basecolor;
	color:$basetextcolor;
	padding-block: 22.57vw 0;
	@include maxwidth(800){
		padding-top:75vw;
	}
	position:relative;
	div.decoration {
		span.shape1 {
			display:block;
			background-color:mix($basecolor, $basetextcolor, .95);
			aspect-ratio: 1440 / 344;
			position:absolute;
			inset: auto auto 0 0;
			width: 100%;
			clip-path: polygon(0 0, 100% 0, 100% 100%, 44.4% 100%, 0 65%);
		}
	}
	div.container {
		@include container(1440, 0);
		div.heading.common_heading {
			margin-bottom:40px;
			color:$themecolor;
			h2 {
				span.en {
				}
				span.ja {
				}
			}
		}
		div.body {
			display:flex;
			gap: 4px;
			@include maxwidth(800){
				display:block;
				//flex-direction:column;
				//gap: 0;
			}
			div.item {
				flex: 0 0 calc((100% - 4px * 2) / 3);
				a {
					aspect-ratio: 1 / 1;
					@include maxwidth(800){
						aspect-ratio: auto;
						padding-block:78px 60px;
					}
					position:relative;
					display:block;
					background-color:$basetextcolor;
					color:$basecolor;
					&:after {
						content:'';
						display:block;
						position:absolute;
						inset: 0;
						background-color: rgba(0, 0, 0, 0.65);
					}
					span.visual {
						img {
							position:absolute;
							inset: 0;
							@include obj100;
						}
					}
					span.decoration {
						//display:none;
						span.shape {
							display:block;
							position:absolute;
							width:0;
							aspect-ratio: 276 / 48;
							background-color:$accentcolor;
							z-index:1;
							&.shape1 {
								clip-path: polygon(0 0, 100% 0, 0 100%);
								inset: 0 auto auto 0;
							}
							&.shape2 {
								clip-path: polygon(0 100%, 100% 0, 100% 100%);
								inset: auto 0 0 auto;
							}
						}
					}
					div.docs {
						display:flex;
						flex-direction:column;
						justify-content:space-between;
						align-items:center;
						position:absolute;
						z-index:1;
						//inset: 100px 47px 57px;
						inset:
							clamp(38px, 6.94vw, 100px)
							clamp(27.5px, 3.26vw, 47px)
							clamp(30px, 5.34vw, 77px)
						;
						@include maxwidth(1200){ inset: 50px 27.5px 50px; }
						@include maxwidth(800){ inset: 30px 27.5px 20px; }
						@include maxwidth(800){
							position:relative;
							inset: auto !important;
							gap: 20px;
						}
						&:after {
							content:'';
							display:block;
							@include wh(50);
							background: url(../images/icon-plus-white.svg) center / 14px auto no-repeat $themecolor;
							flex: 0 0 50px;
							@include maxwidth(1200){
								@include wh(40);
								flex-basis: 40px;
							}
						}
						span.index {
							font-size: 24px;
							font-weight: 700;
						}
						h3.caption {
							text-align: center;
							//font-size: 24px;
							font-size: clamp(20px, 1.67vw, 24px);
							font-weight: 700;
							line-height: 150%;
						}
						p.text {
							text-align: justify;
							font-size: clamp(10px, 1.04vw, 15px);
							//font-size: 14px;
							font-weight: 500;
							line-height: 180%;
							display:none;
							@include maxwidth(800){
								font-size: 14px;
								width:320px;
								margin-inline:auto;
								max-width:100%;
								padding-inline:20px;
								box-sizing: border-box;
							}
						}
					}
					&:hover {
						opacity:1;
						color: $accentcolor;
						span.decoration {
							//display:block;
							span.shape {
								width: clamp(200px, 19.17vw, 276px);
								transition: .25s;
							}
						}
						div.docs {
							&:after {
								background: url(../images/icon-arrow-right-white.svg) center / 10px  auto no-repeat $accentcolor;
							}
							p.text {
								display:block;
								color:$basecolor;
							}
						}
						&:after {
							background: linear-gradient(180deg, #2850A2 0%, #2F2E33 100%);
							//background-blend-mode: multiply;
							mix-blend-mode: multiply;
							backdrop-filter: blur(4px);
						}
					}
					@include maxwidth(800) {
						opacity:1;
						color: $accentcolor;
						span.decoration {
							display:block;
							span.shape {
								width: 100% !important;
								aspect-ratio: 374 / 64;
								background-color: $themecolor;
							}
						}
						h3.caption {
							color:$themetextcolor;
						}
						div.docs {
							&:after {
								background: url(../images/icon-arrow-right-white.svg) center / 10px  auto no-repeat $themecolor;
							}
							p.text {
								display:block;
								color:$basecolor;
							}
						}
						&:after {
							background: rgba(0, 0, 0, 0.65);
						}
					}
				}
				&.item1 {
				}
			}
		}
	}
}

.termlist.termlist_type1 {
	ul {
		display:flex;
		gap: 4px;
		position:relative;
		&:after {
			content:'';
			display:block;
			position:absolute;
			inset: auto 0 0;
			height:2px;
			background-color:$basetextcolor;
			@include maxwidth(600){
				content: none;
			}
		}
		@include maxwidth(600){
			flex-wrap: wrap;
		}
		li {
			flex: 0 0 calc((100% - 4px * 3) / 4);
			@include maxwidth(800){
				flex: 0 0 calc((100% - 4px * 2) / 3);
			}
			@include maxwidth(600){
				flex: 0 0 calc((100% - 4px * 1) / 2);
			}
			@include maxwidth(480){
				flex: 0 0 100%;
			}
			a {
				height:45px;
				padding: 0 17px 3px;
				box-sizing: border-box;
				display:flex;
				@include flex-position(center);
				background-color:mix($basecolor, $basetextcolor, .9);
				color: $basetextcolor;
				font-size: 15px;
				font-weight: 700;
				@include maxwidth(600){
					font-size: 14px;
				}
			}
			&.current {
				a {
					background-color: $basetextcolor;
					color:$basecolor;
				}
			}
		}
	}
}

.termlist.termlist_type2 {
	ul {
		display:flex;
		gap: 4px;
		flex-wrap:wrap;
		li {
			@include maxwidth(800){
				flex: 0 0 calc((100% - 4px * 2) / 3);
			}
			@include maxwidth(600){
				flex: 0 0 calc((100% - 4px * 1) / 2);
			}
			a {
				height:45px;
				padding: 0 30px 3px;
				box-sizing: border-box;
				display:flex;
				align-items:center;
				justify-content: center;
				font-size: 14px;
				font-weight: 700;

				background-color:mix($basecolor, $basetextcolor, .9);
				color: $basetextcolor;
				@include maxwidth(800){
					padding: 0 14px 3px;
				}
			}
			&.current {
				a {
					background-color: $themecolor;
					color:$themetextcolor;
				}
			}
		}
	}
}


div.works_headline.headline {
	div.item {
		a {
			display:block;
			width:100%;
			//display:flex;
			//flex-direction:column;
			span.visual {
				aspect-ratio: 1 / 1;
				margin-bottom:14px;
				img {
					@include obj100;
				}
			}
			span.meta {
				margin-bottom:8px;
			}
		}
	}
	div.noposts {
	}
}
div#subpageContent {

	div.termlist {
		margin-bottom:40px;
		@include maxwidth(600){
			margin-bottom: 20px;
		}

	}

	//div.works_headline.headline,
	//div.news_headline.headline {
	div.headline {
		display:flex;
		flex-wrap:wrap;
		gap: 40px 20px;
		@include maxwidth(640){
			// flex-direction:column;
		}
		div.item {
			flex: 0 0 calc((100% - 20px * 2) / 3);
			@include maxwidth(1100){
				flex: 0 0 calc((100% - 20px * 1) / 2);
			}
			@include maxwidth(480){
				flex: 0 0 100%;
			}
			a {
				text-decoration:none;
				span.visual {
					aspect-ratio:388 / 242;
				}
				span.meta{
					.terms{
						@include maxwidth(680){
							flex-wrap: wrap;
						}
					}
				}
			}
		}
		div.noposts {
			border: 1px solid mix($basetextcolor, $basecolor, .3);
			padding: 3em .2em;
			text-align:center;
			flex: 0 0 100%;
		}
	}
	// div.headline.works_headline {
	// 		//outline: 3px solid red;
	// 		gap: 10px;
	// 		margin-block:40px;
	// 		@include maxwidth(640){
	// 			flex-direction:column;
	// 		}
	// 		div.item {
	// 			flex: 0 0 calc((100% - 10px) / 3);
	// 			@include maxwidth(640){
	// 				flex: 0 0 auto;
	// 			}
	// 			a {
	// 				text-decoration:none;
	// 				span.visual {
	// 					aspect-ratio:388 / 242;
	// 				}
	// 			}
	// 		}
	// 	}

	div.default {
		div.headline.works_headline {
			gap: 40px 20px;
			margin-block:40px;
			flex-wrap:wrap;
			@include maxwidth(640){
				flex-direction:column;
				flex-wrap: nowrap;
				gap: 25px;
			}
			div.item {
				flex: 0 0 calc((100% - 20px) / 2);
				@include maxwidth(640){
					flex: 0 0 auto;
				}
				a {
					text-decoration:none;
					span.visual {
						aspect-ratio:388 / 242;
					}
				}
			}
		}
	}

}


div#toppageWorks {
	background-color:$basecolor;
	color:$basetextcolor;
	padding-block: 4.86vw 85px;
	margin-block: 0 0;
	position:relative;
	z-index:2;
	div.decoration {
		span.shape {
			display:block;
			background-color: mix($basecolor, $basetextcolor, .95);
			position:absolute;
			&.shape1 {
				aspect-ratio: 800 / 150;
				inset: 0 0 auto auto;
				width: 55.56vw;
				clip-path: polygon(0 0, 100% 0, 100% 100%);
			}
			&.shape2 {
				aspect-ratio: 462 / 80;
				inset: auto 0 0 auto;
				width: 32.08vw;
				clip-path: polygon(0 100%, 100% 0, 100% 100%);
			}
		}
	}
	div.container {
		position:relative;
		div.heading.common_heading {
			color: $themecolor;
			margin-bottom: 40px;
			display:flex;
			@include container(1200, 40);
			@include maxwidth(800){
				margin-inline:0;
				justify-content:center;
			}
			h2 {
				span.en {
				}
				span.ja {
				}
			}
		}
		div.body {
			div.heading {
				h3 {
					display:none;
				}
			}
			div.noposts {
				padding: 20px 5px;
				text-align:center;
				font-weight: 500;
				font-size: 14px;
			}
			ul.slick-dots {
				gap: 9px;
				margin-top: 25px;
				li {
					button {
						@include wh(15);
						background-color: mix($basecolor, $basetextcolor, .9);
					}
				}
				li.slick-active button {
					background-color: $accentcolor;
				}
			}
			div.works_headline.headline {
				div.item {
					width: 420px;
					@include maxwidth(800){
						width: calc(100vw - 40px);
					}
					margin-inline: 5px;
					div { width: 100%; }
					a {
					}
				}
				div.noposts {
				}
			}
		}
		div.link {
			a {
				position:absolute;
				inset: 40px calc((100% - 1200px) / 2) auto auto;
				@include maxwidth(1220){
					right: 40px;
				}
				@include maxwidth(800){
					position:static;
				}
			}
			@include maxwidth(800){
				text-align:center;
				margin-top:30px;
			}
		}
	}
}

//div#toppageProducts {
//	position:relative;
//	background-color: $basetextcolor;
//	color: $basecolor;
//	padding-block: 110px;
//	z-index:2;
//	div.visual {
//		position:absolute;
//		inset: 0;
//		img {
//			@include obj100;
//		}
//		&:after {
//			content:'';
//			display:block;
//			position:absolute;
//			inset: 0;
//			background: rgba(0, 0, 0, 0.65);
//		}
//	}
//	div.container {
//		position:relative;
//		z-index:1;
//		div.heading.common_heading {
//			margin-bottom:30px;
//			h2 {
//				span.en {
//				}
//				span.ja {
//				}
//			}
//		}
//		div.body {
//			div.catareas {
//				@include container(1200, 40);
//				display:flex;
//				gap: 40px;
//				@include maxwidth(800){
//					flex-direction:column;
//				}
//				div.catarea {
//					flex: 0 0 calc((100% - 40px) / 2);
//					&.used {}
//					&.rental {}
//					div.heading {
//						background-color:$basetextcolor;
//						color:$basecolor;
//						height: 70px;
//						display:flex;
//						align-items:center;
//						padding-inline: 20px;
//						h3 {
//							font-size: 20px;
//							font-weight: 700;
//						}
//						div.link {
//							margin-left: auto;
//							a.common_btn {
//								font-size: 15px;
//								font-weight: 700;
//								@include wh(110, 40);
//								padding: 0 7px 0 20px;
//								background-position: 14px center;
//							}
//						}
//					}
//					div.products_headline.headline {
//						display:flex;
//						flex-direction:column;
//						gap: 4px;
//						div.item {
//							a {
//								padding: 20px 50px 20px 20px;
//								background: url(../images/icon-arrow-right-color.svg) right 20px center / 8px auto no-repeat $basecolor;
//								color:$basetextcolor;
//								//display:flex;
//								//flex-direction:column;
//								//gap: 10px;
//								span.meta {
//									margin-bottom: 10px;
//								//	span.terms {
//								//		display:flex;
//								//		gap: 5px;
//								//		span.term {
//								//			font-size: 14px;
//								//			font-weight: 500;
//								//			height:22px;
//								//			padding-inline: 10px;
//								//			display:flex;
//								//			align-items:center;
//								//			&.main {
//								//				background-color:$basetextcolor;
//								//				color:$basecolor;
//								//			}
//								//			&.sub {
//								//				background-color: $themecolor;
//								//				color:$themetextcolor;
//								//			}
//								//		}
//								//	}
//								}
//								span.title {
//									font-size: 16px;
//								//	font-weight: 700;
//								//	line-height: 120%;
//								}
//							}
//						}
//					}
//				}
//			}
//		}
//	}
//}

div#toppageRecruit {
	padding-block: 10.83vw 3.19vw;
	position:relative;
	//background-color:$basetextcolor;
	color:$basecolor;
	div.visual {
		position:absolute;
		inset:0;
		img {
			@include obj100;;
		}
	}
	div.decoration {

		&:after {
			content:'';
			position:absolute;
			inset:0;
			background: linear-gradient(180deg, #2850A2 0%, #2F2E33 100%);
			//background-blend-mode: multiply;
			mix-blend-mode: multiply;
			backdrop-filter: blur(4px);
		}


		span.shape {
			display:block;
			background-color: $accentcolor;
			aspect-ratio: 1440 / 694.5;
			clip-path: polygon(0 35%, 100% 0, 100% 65%, 0 100%);
			position:absolute;
			z-index:1;
			&.shape1 {
				//inset: -32.29vw 0 auto 0;
				inset: -36.39vw 0 auto 0;
			}
			&.shape2 {
				inset: auto 0 -14.86vw 0;
			}
		}
	}
	div.container {
		position:relative;
		z-index:1;
		div.body {
			div.area.area1 {
				display:flex;
				//flex-wrap:wrap;
				gap: 40px;//160px
				@include container(1200, 40);
				margin-bottom:60px;
				justify-content:space-between;
				@include maxwidth(800){
					flex-direction:column;
					margin-inline: 25px;
				}
				div.child.c1 {
					flex: 0 1 480px;
					@include maxwidth(800){
						flex: 0 0 auto;
					}
					div.heading.common_heading {
						display:flex;
						margin-bottom: 30px;
						@include maxwidth(800){
							//margin-inline:0;
							justify-content:center;
						}
						h2 {
							span.en {
							}
							span.ja {
							}
						}
					}
					div.docs {
						margin-bottom:40px;
						div.catch {
							margin-bottom:30px;
							//font-size: 28px;
							font-size: clamp(24px, 1.94vw, 28px);
							font-weight: 700;
							line-height: 140%;
						}
						div.text {
							font-size: 15px;
							font-weight: 500;
							line-height: 200%;
						}
					}
					div.link {
						a.common_btn {
							background-color: $basetextcolor;
							color:$basecolor;
						}
					}
				}
				div.child.c2 {
					flex: 0 1 560px;
					position:relative;
					@include maxwidth(800){
						flex: 0 0 calc(100vw - 25px);
					}
					div.items {
						position:absolute;
						inset: 0 0 auto 0;
						div.item {
							aspect-ratio: 1 / 1;
							img {
								@include obj100;
							}
						}
						ul.slick-dots {
							gap: 13px;
						}
					}
				}
			}
			div.area.area2 {
				flex: 0 0 100%;
				display:flex;
				gap: 5px;
				margin-inline:5px;
				flex-wrap:wrap;
				div.item {
					flex: 0 0 calc((100% - 5px * 3) / 4);
					aspect-ratio:1 / 1;
					@include maxwidth(930){
						flex: 0 0 calc((100% - 5px * 1) / 2);
					}
					@include maxwidth(460){
						flex: 0 0 100%;
						aspect-ratio: 360 / 200;
					}
					position:relative;
					background-color:$basetextcolor;
					color:$basecolor;
					a {
						display:flex;
						@include flex_position(center);
						position:absolute;
						inset:0;
						span.visual {
							position:absolute;
							inset:0;
							img {
								@include obj100;
							}
							&:after {
								content:'';
								position:absolute;
								inset:0;
								background-color: rgba(0, 0, 0, 0.65);
							}
						}
						span.title {
							position:relative;
							z-index:1;
							font-size: 20px;
							font-weight: 700;
							letter-spacing: 2px;
							@include maxwidth(460){
								padding-bottom: 20px;
							}
						}
						&:after {
							content:'';
							display:block;
							@include wh(50);
							background: url(../images/icon-arrow-right-white.svg) center / 8px auto no-repeat $accentcolor;
							position:absolute;
							inset:auto 0 calc((((100% - 5px * 3) / 4) + 20px * 1.2 ) / 2) 0;
							margin-inline:auto;
							@include maxwidth(460){
								@include wh(45);
								inset:auto 0 calc((((100% - 5px * 3) / 4) + 20px * 0.2 ) / 2) 0;
							}
						}
					}
				}
			}
		}
	}
}

div.news_headline.headline {
	div.item {
		a {
			//display:block;
			//& > span { display: block; }
			span.visual {
				aspect-ratio:380 / 250;
				margin-bottom:12px;
				img {
					@include obj100;
				}
			}
			span.meta {
				margin-bottom:10px;
			//	span.date {
			//	}
				span.terms {
					span.term.main {
						background-color:$themecolor;
						color:$themetextcolor;
					}
				}
			}
			span.title {
				font-size: 14px;
			}
		}
	}
}

div#toppageNews {
	padding-block:0 60px;
	background-color:$basecolor;
	color:$basetextcolor;
	z-index:1;
	position:relative;
	div.visual {
		height:19.44vw;
		width: 100%;
		overflow:hidden;
		img {
			@include obj100;
			width: 100%;
			height:42vw;
			object-position: center 100%;
		}
		@include maxwidth(800){
			height: 288px;
			img {
				height: 298px;
				object-position: center 90%;
			}
		}
	}
	div.container {
		//padding-block:120px 0;
		padding-block:clamp(60px, 8.33vw, 120px) 0;
		div.heading.common_heading {
			color:$themecolor;
			margin-bottom: 30px;
			h2 {
				span.en {
				}
				span.ja {
				}
			}
		}
		div.body {
			div.news_termlist.termlist {
				@include container(1200, 30);
				margin-bottom:30px;
				li {
					a.current {
					}
					a {
					}
				}
			}
			div.news_headline.headline {
				display:flex;
				gap: 30px;
				@include container(1200, 30);
				@include maxwidth(800){
					display:block;
					margin-inline:0;
				}
				div.item {
					@include maxwidth(800){
						margin-bottom: 20px;
						margin-inline: 20px;
					}
					flex: 0 0 calc((100% - 30px * 2) / 3);
					a {
						span.visual {
						}
						span.meta {
						}
						span.title {
						}
					}
				}
			}
			div.link {
				margin-top: 40px;
				text-align:center;
			}
		}
	}
}

div#toppageServiceArea {
	position:relative;
	//background-color:$basetextcolor;
	color:$basecolor;
	div.visual {
		position:absolute;
		inset:0;
		img {
			@include obj100;
		}
	}
	div.decoration {
		&:after {
			content:'';
			position:absolute;
			inset:0;
			display:block;
			background-color: rgba(0, 0, 0, 0.85);
		}
		span.shape {
			display:block;
			background-color: $themecolor;
			aspect-ratio: 630 / 110;
			position:absolute;
			width: 43.75vw;
			z-index:1;
			&.shape1 {
				clip-path: polygon(0 0, 100% 0, 100% 100%);
				inset: 0 0 auto auto;
			}
			&.shape2 {
				clip-path: polygon(0 0, 100% 100%, 0 100%);
				inset: auto auto 0 0;
			}
		}
	}
	div.container {
		padding-block: 100px;
		position:relative;
		z-index:1;
		margin-inline: calc((100% - 1200px) / 2) 0;
		//flex: 0 0 484px;
		//width: 50%;
		width:484px;
		max-width: calc(100% - 30px);
		@include maxwidth(1300){
			margin-inline: 40px 0;
		}
		@include maxwidth(1080){
			padding-block:100px 70vw;
		}
		@include maxwidth(600){
			margin-inline:15px;
			padding-block:100px 130vw;
		}
		div.heading.common_heading {
			display:flex;
			margin-bottom:60px;
			@include maxwidth(800){
				margin-inline:0;
				justify-content:center;
				span.en {
					text-align:center;
					line-height:1.0;
				}
			}
			h2 {
				span.en {
				}
				span.ja {
					top: clamp(78px, 7.71vw, 111px);
					@include maxwidth(800){
						top:auto;
						position:relative;
						bottom:-10px;
					}
				}
			}
		}
		div.body {
			font-size: 14px;
			font-weight: 700;
			line-height: 150%;
			width: 100%;
			table {
				width: 100%;
				margin-bottom:2px;;
				tbody {
					display:flex;
					flex-direction:column;
					gap: 2px;
					tr {
						display:flex;
						width:100%;
						th, td {
							padding: 16px 20px 14px;
							@include maxwidth(600){
								padding: 12px 12px 10px;
							}
							box-sizing: border-box;
						}
						th {
							flex: 0 0 110px;
							text-align:center;
							background-color:$themecolor;
							color:$themetextcolor;
							white-space: nowrap;
						}
						td {
							flex: 1 1 auto;
							background-color:$basecolor;
							color:$basetextcolor;
						}
					}
				}
			}
			h3 {
				background-color:$accentcolor;
				color:$accenttextcolor;
				padding:15px 10px;
				text-align:center;
				margin-bottom:2px;
			}
			p {
				padding: 15px 23px;
				background-color:$basecolor;
				color:$basetextcolor;
			}
		}
	}
	div.visual2 {
		position:absolute;
		inset: 2px 0 100px auto;
		width: 55vw;
		z-index:1;
		span {
			position:absolute;
			inset:0;
			&.sp {
				left:15px; bottom:100px;
			}
			img {
				@include obj100(contain);
				object-position: right bottom;
			}
			@include maxwidth(800){
				display:none;
			}
		}
		span.pc { }
		span.sp {
			display:none;
			img {
			}
		}
		@include maxwidth(1300){
			width: 50vw;
			span.pc {
				img {
					object-position: right center;
				}
			}
		}
		@include maxwidth(1080){
			width: auto;
			height: 130vw;
			inset: auto 0 0 0;
			span.pc { display:none; }
			span.sp { display:block; }
		}
	}
}

div#contentFooter {
	background-color:$basetextcolor;
	color:$basecolor;
	padding-block: 100px 0;
	position:relative;
	div.footerContent {
		div.heading.common_heading {
			margin-bottom:40px;
			h2 {
				span.en {
				}
				span.ja {
				}
			}
		}
		div.body {
			@include container(1440, 15);
			padding-top: 20px;
			div.text {
				font-size: clamp(14px, 1.39vw, 20px);
				font-weight: 700;
				text-align:center;
				margin-bottom:30px;
			}
			div.contactButton {
				display:flex;
				justify-content:center;
				flex-wrap:wrap;
				gap: 14px;
				@include maxwidth(800){
					flex-direction:column;
				}
				& > div {
					flex: 0 1 380px;
					& > a {
						display:inline-flex;
						height:130px;
						//max-width:380px;
						width: 100%;
						flex-direction:column;
						background-color:$themecolor;
						color:$themetextcolor;
						@include flex_position(center);
						text-align:center;
					}
					@include maxwidth(800){
						flex: 0 0 auto;
						text-align:center;
						width: 100%;
						& > a {
							width: 380px;
							max-width: 100%;
						}
					}
				}
				div.button_tel {
					a {
						gap: 8px;
						span.main {
							display:flex;
							gap: 8px;
							align-items:baseline;
							img {
								width:22px;
							}
							span.telnum {
								font-size: 32px;
								font-weight: 700;
							}
						}
						span.sub {
							font-size: 13px;
							font-weight: 700;
						}
					}
				}
				div.button_mailform1, div.button_mailform2 {
					a {
						gap: 8px;
						span.main {
							img {
								width: 24px;
							}
						}
						span.sub {
							font-size: 17px;
							font-weight: 700;
							line-height:1.2;
						}
					}
				}
			}
		}
	}
}

footer {
}

div#footer {
	background-color:$basetextcolor;
	color:$basecolor;
	padding-block: 60px 40px;
	position:relative;
	@include maxwidth(800){
		padding-bottom:10px;
	}
	div.container {
		@include container(1200, 40);
		display:flex;
		justify-content:space-between;
		gap: 40px;
		@include maxwidth(800){
			flex-direction:column;
			align-items:center;
			text-align:center;
		}
		@include maxwidth(480){
			margin-left: 20px;
			margin-right: 20px;
		}
		div.footermain {
			div.sitename {
				margin-bottom:10px;
				a {
					display:inline-flex;
					flex-direction:column;
					align-items:center;
					gap: 14px;
					span.logomark {
						img {
							width: 80px;
						}
					}
					span.logotype {
						img {
							width:230px;
						}
					}
				}
			}
			div.address {
				font-size: 13px;
				font-weight: 500;
				line-height: 130%;
			}
		}
		div.footerasidemenu {
			margin-top:94px;
			@include maxwidth(800){
				margin-top:0;
				width: 90%;
				margin-right: auto;
				margin-left: auto;
			}
			@include maxwidth(480){
					width: 100%;
				}
			div.footermenu {
				font-size: 14px;
				font-weight: 700;
				line-height: 150%;
				display:flex;
				flex-direction:column;
				gap: 14px;
				ul {
					display:flex;
					gap: .5em 2em;
					flex-wrap:wrap;
					justify-content:flex-end;
					li {
						a {
						}
					}
				}
				@include maxwidth(800){
					flex-direction:column;
					gap:2px;
					ul {
						flex-direction:column;
						max-width: 100%;
						gap: 2px;
						li {
							a {
								display:block;
								text-align:center;
								background: url(../images/icon-arrow-right-white.svg) 15px center / 8px auto no-repeat mix($basetextcolor, $basecolor, .9);
								padding: 12px 30px 12px 35px;
								box-sizing: border-box;
							}
						}
					}
				}
				@include maxwidth(480){
					ul{
						li{
							a{
								padding: 12px 12px 12px 35px;
							}
						}
					}
				}
			}
		}
	}
}

div#copyRight {
	background-color:$basetextcolor;
	color:$basecolor;
	padding-block: 10px 85px;
	position:relative;
	div.container {
		@include container(1200, 40);
		font-size: 12px;
		font-weight: 500;
		text-align: right;
		@include maxwidth(800){
			text-align:center;
		}
	}
}

div#totopWrapper {
	a#totop {
		@include wh(65);
		background: url(../images/icon-arrow-up-white.svg) center 35% / 13px auto no-repeat $basetextcolor;
		color:$basecolor;
		font-size: 10px;
		font-weight: 700;

		position:fixed;
		inset:auto 30px 20px auto;
		display:flex;
		@include flex_position(center);
		box-sizing: border-box;
		padding-top:20px;

		z-index:100;

		transition: .5s;
		transform: translateY(85px);
		body.sp_menu & {
			transform: translateY(0);
		}

		@include maxwidth(768){
			@include wh(50);
			//transform: translateY(0);
			inset: auto 0 0 auto;
		}
		&:hover {
			opacity:initial;
			background-color: $accentcolor;
		}
	}
}






















// Pager
.pager {
	text-align: center;
	margin: 40px 0;
	@include f_all(14);
	a,
	span {
		display: inline-block;
		margin: 0 0 0.25em 0.75em;
		min-width: 3em;
		padding: 1em;
		box-sizing: border-box;
		background-color: #afafb0;
		color: #fff;
	}
	.current {
		background-color: $themecolor;
	}
}

// 月別アーカイブへのリンク
div.monthly_archive_link {
	@include container(800, 10);
	margin-top: 50px;
	@include f_all(14);
	a.show_archive_links {
		display: block;
		width: 200px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: mix($basetextcolor, $basecolor, 0.1);
		margin: auto;
		border-radius: 30px;
		position: relative;
		&:after {
			content: ">";
			display: inline-block;
			transform: rotateZ(90deg) scaleX(0.5);
			position: absolute;
			right: 30px;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	ul {
		margin-top: 20px;
		display: none;
		&.show {
			display: flex;
		}
		justify-content: center;
		flex-wrap: wrap;
		li {
			margin: 0 5px 10px;
			flex: 0 0 113px;
			text-align: center;
			a {
				display: block;
				background-color: mix($basetextcolor, $basecolor, 0.05);
				padding: 7px 0;
				border-radius: 15px;
			}
		}
	}
}

ul.slick-dots {
	display: flex;
	justify-content: center;
	padding: 1em 0;
	list-style-type: none;

	li {
		button {
			cursor: pointer;
			display: block;
			width: 12px;
			height: 12px;
			padding: 0;
			border: none;
			background-color: $basecolor;
			text-indent: -9999px;
		}
	}

	li.slick-active button {
		background-color: $accentcolor;
	}
}


button.slick-arrow {
	$bottom_offset: 60px;
	$button_size: 80px;
	$arrow_size: 8px;
	$button_x_offset: 40px; /* スライドエリア端からの距離 */
	$arrow_x_offset: 3px; /* 矢印x位置の調整 */
	width: $button_size;
	height: $button_size;
	border-radius: $button_size;
	background-color: $basetextcolor;
	color: $basecolor;
	border: none;
	text-indent: 9999px;
	overflow: hidden;
	white-space: nowrap;
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: $bottom_offset;
	margin: auto;

	&:after {
		text-indent: 0;
		content: '';
		display: block;
		width: $arrow_size;
		height: $arrow_size;
		border: 2px solid currentcolor;
		border-color: currentcolor currentcolor transparent transparent;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}

	&.slick-prev {
		left: $button_x_offset;

		&:after {
			left: $arrow_x_offset;
			transform: rotateZ(-135deg);
		}
	}

	&.slick-next {
		right: $button_x_offset;

		&:after {
			right: $arrow_x_offset;
			transform: rotateZ(45deg);
		}
	}
	@include maxwidth(800){
		@include wh(50);
		background-color: $themecolor;
		&.slick-prev { left:5px; }
		&.slick-next { right:5px; }
	}

}