// スタイルシート common

@charset "utf-8";

@import "mixin";

$themecolorlight: mix($themecolor, $basecolor, .045);

html {
	scroll-behavior: smooth;
}

body {
	@include root;
	position: relative;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
//	overflow-x:hidden;

	&.menu_open {
		overflow-y:hidden;
	}
}

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

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

div#wrapper {
	//width: 50%;
	//overflow:hidden;
	//& > * { display:none !important;}
}

@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); }
	// 以下は条件式が不足している 煩雑になるとコンパイル速度にも影響が出るので断念
	//@if $t == $r and $t == $b and $t == $l {
	//	padding: add-px($t);
	//} @elseif $t == $b and $r == $l {
	//	padding: add-px($t) add-px($r);
	//} @elseif $r == $l {
	//	padding: add-px($t) add-px($r) add-px($b);
	//} @elseif $t and $r and $b and $l {
	//	padding: add-px($t) add-px($r) add-px($b) add-px($l);
	//} @else {
	//	@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;
}

div#header {
	div.container {
		div.sitename {
			h1 {
				a {
					display:block;
					@include wh(255, 75);
					@include borderbox(14, 23);
					z-index:1;
					body.toppage & {
						@include absolute(20, null, null, 30);
						background-color:$basecolor;
						color: $basetextcolor;
						@include maxwidth($dev){
							position:static;
						}
						&:hover {
							background-color:rgba($basecolor, .6);
						}
					}
					body.subpage & {
						margin: 20px 0 0 30px;
						background-color:$themecolorlight;
						color: $basetextcolor;
						@include maxwidth($dev){
							margin:0;
							background-color:$basecolor;
						}
						&:hover {
							background-color: $basecolor;
						}
					}
					@include maxwidth($dev){
						@include borderbox(18, 15);
						@include wh(255, 80);
					}
					img {
						@include obj100(contain);
						object-position: left center;
					}
					transition: .5s;
				}
			}
		}
	}
}

@mixin button_comm_style_01 {
	display:flex;
	@include wh(120, 75);
	flex-direction: column;
	background-color:$basetextcolor;
	color:$basecolor;
	@include absolute(0, null, null);
	position:fixed;
	align-items:center;
	justify-content:center;
	gap: 6px;
	span.caption {
		font-size: 14px;
		font-weight: 500;
	}
}

@mixin menu_style_01 {
	font-size: 13px;
	font-weight: 500;
	line-height:110%;
	ul {
		display:flex;
		flex-direction:column;
		gap: 1px;
		li {
			a {
				background-color: $basecolor;
				color: $basetextcolor;
				@include borderbox(0, 10, 0, 15);
				@include wh(null, 45);
				display:flex;
				align-items:center;
				gap: 14px;
				&:before {
					content:'';
					flex: 0 0 6px;
					@include wh(6);
					background-color:$themecolor;
				}
				&:after {
					flex: 0 0 16px;
					@include before_as_image('../images/icon-triangle-right-color-in-circle-color.svg', 16);
					margin-left:auto;
				}
				transition: .25s;
				&:hover {
					opacity:.8;
				}
			}
			ul {
				display:flex;
				flex-direction:row;
				flex-wrap:wrap;
				margin-top:1px;
				gap: 1px 2px;
				li {
					flex: 0 0 calc((100% - 2px) / 2);
					a {
						background-color: $themecolorlight;
						padding-left:0;
						//@include wh(null, 48);
						&:before {
							content:'';
							flex: 0 0 15px;
							@include wh(15, 1);
							background-color:$themecolor;
						}
					}
				}
			}
		}
	}
}


div#gnavToggleWrapper {
	a#gnavToggle {
		@include button_comm_style_01;
		&:hover {
			transition: .5s;
			background-color:rgba($basetextcolor, .6);
		}
		top:20px;
		body.admin-bar & { top:52px;}
		right:0;
		z-index:100;
		@include maxwidth($dev){
			top:15px;
			body.admin-bar & { top:47px;}
		}
		right:0;
		span.icon {
			@include wh(24);
			flex: 0 0 24px;
			position:relative;
			span.b {
				display:block;
				@include wh(18, 2);
				background-color: $basecolor;
				@include absolute(0);
				margin:auto;
				&.b1 {
					transform: translateY(-5px);
				}
				&.b2 {
				}
				&.b3 {
					transform: translateY(5px);
				}
			}
		}
		span.caption {
		}
		@include maxwidth($dev){
			@include wh(80, 50);
			gap: 4px;
			span.icon {
				@include wh(18, 10);
				flex: 0 0 18px;
				span.b {
					@include wh(18, 1);
				}
			}
			span.caption {
				font-size: 10px;
				font-weight: 500;
			}
			body.header_scrollout & {
				transform: translateY(60px);
				top:auto;
				bottom:0;
				right: 60px;
				@include wh(60);
				animation: gnavToggleSlideIn .5s .15s ease forwards;
			}
		}
	}
}

div#gnav {
	background-color:red;
	@include absolute(0);
	position:fixed;
	z-index:200;
	background: rgba(6, 6, 8, 0.85);
	color:#fff;

	display:none;
	body.menu_open & { display:block; }

	overflow-y: auto;
	scrollbar-width: none;

	//@include maxwidth(770){
	//}

	nav {
		display:flex;
		flex-direction:row-reverse;
		max-width: 690px;
		margin-left:auto;
		gap: 10px;
		margin-top: 128px;
		body.admin-bar & { margin-top: 160px; }
		margin-right:20px;
		flex-wrap:wrap;
		position:relative;
		//& > * {
		//	flex: 0 0 calc((100% - 10px) / 2);
		//	&:nth-child(1){outline: 4px solid red;}
		//	&:nth-child(2){outline: 4px solid blue;}
		//	&:nth-child(3){outline: 4px solid green;}
		//	&:nth-child(4){outline: 4px solid yellow;}
		//}
		@include maxwidth(770){
			flex-direction:column;
			margin-left:20px;
			margin-top:80px;
			body.admin-bar & { margin-top: 112px; }
		}
		a.close {
			@include wh(120, 75);
			background-color:$accentcolor;
			color:$accenttextcolor;
			position:fixed;
			top:20px;
			body.admin-bar & { top:52px;}
			right:0;
			display:flex;
			flex-direction:column;
			justify-content:center;
			align-items:center;
			transition: .5s;
			z-index:1;
			&:hover {
				background-color:rgba($accentcolor, .6);
			}
			span.caption {
				font-size: 14px;
				font-weight: 500;
				transform: translateY(14px);
			}
			&:before, &:after {
				content:'';
				@include wh(18, 1.5);
				display:block;
				@include absolute(0, 0, 18, 0);
				margin:auto;
				background-color:$accenttextcolor;
				transform: rotateZ(45deg);
			}
			&:after {
				transform: rotateZ(-45deg);
			}
			@include maxwidth($dev){
				top:15px;
				body.admin-bar & { top:47px;}
				@include wh(80, 50);
				&:before, &:after {
					bottom: 12px;
				}
				span.caption {
					font-size: 10px;
					transform: translateY(12px);
				}
			}
		}
		div.sitename {
			background-color: $basecolor;
			@include absolute(-108, null, null, 0);
			@include wh(null, 75);
			width: calc((100% - 10px) / 2);
			transition: background-color .5s;
			&:hover {
				background-color: rgba($basecolor, .8);
			}
			a {
				display:block;
				@include wh(100%);
				@include borderbox(12, 20);
				img {
					object-fit: contain;
					object-position: left center;
					height:100%;
					width:100%;
				}
			}
			@include maxwidth(770){
				top:-64px;
				@include wh(null, 48);
				a {
					padding:7px 10px;
				}
			}
		}
		div.menu {
			flex: 0 0 340px;
			@include menu_style_01;
		}
		div.address_cards {
			flex: 0 0 340px;
			display:flex;
			flex-direction:column;
			gap: 11px;
			div.item {
				&.item1 {}
				flex: 1 1 100%;
				background-color:$basecolor;
				color:$basetextcolor;
				div.docs {
					height:100%;
					display:flex;
					flex-direction:column;
					align-items:center;
					justify-content:center;
					@include borderbox(10, 20);
					div.heading {
						background-color: $accentcolor;
						color:$accenttextcolor;
						font-size: 14px;
						font-weight: 500;
						@include wh(200, 26);
						display:flex;
						align-items:center;
						justify-content:center;
						margin-bottom:8px;
					}
					div.map {
						display:none;
						margin-bottom:8px;
					}
					div.doc {
						div.address {
							font-size: 12px;
							font-weight: 400;
							line-height: 150%;
							text-align:center;
							margin: 0 -15px;
							p {
								a.maplink {
									margin-top:10px;
									margin-left:15px;
									@include wh(300, 65);
									background-color:$basetextcolor;
									color:$basecolor;
									font-size: 14px;
									font-weight: 500;
									display:flex;
									align-items:center;
									justify-content:center;
									gap: 5px;
									&:before {
										@include before_as_image('../images/icon-pin-white.svg', 14, 16);
									}
									&:after {
										@include before_as_image('../images/icon-triangle-right-white-in-circle-white.svg', 16);
									}
									transition: .5s;
									&:hover {
										background-color:rgba($basetextcolor, .6);
									}
								}
							}
						}
						div.contact {
							display:flex;
							flex-direction:column;
							margin-top:2px;
							gap: 2px;
							a {
								@include wh(300, 65);
								display:flex;
								justify-content:center;
								align-items:center;
							}
							div.tel {
								a {
									flex-direction:column;
									background-color:$basetextcolor;
									color:$basecolor;
									gap: 3px;
									span.telnum {
										display:flex;
										gap: 5px;
										font-size: 20px;
										font-weight: 500;
										&:before {
											@include before_as_image('../images/icon-phone-white.svg', 15);
											position:relative;
											top:.2em;
										}
									}
									span.teltime, span.telnote {
										font-size: 11px;
										font-weight: 500;
										line-height: 110%;
									}
								}
							}
							div.mail {
								a {
									background-color:$themecolor;
									color:$themetextcolor;
									font-size: 14px;
									font-weight: 500;
									line-height: 120%;
									gap: 5px;
									display:flex;
									align-items:center;
									&:before {
										@include before_as_image('../images/icon-mail-white.svg', 15, 12);
										position:relative;
										top:.05em;
									}
									&:after {
										@include before_as_image('../images/icon-triangle-right-white-in-circle-white.svg', 16);
									}
									transition: .5s;
									&:hover {
										background-color:rgba($themecolor, .6);
									}
								}
							}
						}
					}
				}
			}
		}
		div.muryou_soudan_jisshichu2 {
			flex: 0 0 100%;
			a {
				display:flex;
				@include wh(100%, 119);
				background-color:$accentcolor;
				color:$accenttextcolor;
				gap: 15px;
				flex-direction:column;
				justify-content:center;
				align-items:center;
				transition: .5s;
				&:hover {
					background-color:rgba($accentcolor, .6);
				}
				span.main {
					font-size: 25px;
					font-weight: 500;
				}
				span.sub {
					font-size: 15px;
					font-weight: 500;
					@include wh(149, 28);
					display:flex;
					gap: 5px;
					background-color:$basetextcolor;
					color:$basecolor;
					border-radius:100px;
					justify-content:center;
					align-items:center;
					&:after {
						@include before_as_image('../images/icon-triangle-right-white.svg', 5, 10);
						position:relative;
						top: .1em;
					}
				}
			}
		}
	}
}

div#mainVisual {
	position:relative;
	div.container {
		div.slides {
			div.item-slider {
				height:100vh;
				min-height: 250px;
				body.admin-bar & {
					height: calc(100vh - 32px);
				}
				position:relative;
				&:after {
					content:'';
					display:block;
					@include absolute(0);
					background: rgba(#000, 0.30);
				}
				img {
					@include obj100;
					@include maxwidth($dev){
						object-position: 65% center;
					}
				}
				@include maxwidth($dev){
					height:calc(100vh - 305px);
					body.admin-bar & {
						height: calc(100vh - 32px - 305px);
					}
				}
			}
		}
		div.overlay {
			div.text {
				@include absolute(null, null, 120, 30);
				color: #fff;
				font-size:clamp(20px, 4vw, 48px);
				font-weight: 700;
				line-height: 150%;
				@include maxwidth($dev){
					@include absolute(null, null, 25, 20);
				}
			}
		}
	}
}

div.foobar_buttons {
	a {
		@include button_comm_style_01;
		top:20px;
		body.admin-bar & { top:52px;}
		&:before {
			flex: 0 0 24px;
			@include before_as_image(none, 24);
		}
		z-index:300;
		transition: .5s;
	}
	@include maxwidth($dev){
		display:flex;
		gap: 1px;
		margin-top:1px;
		& > div {
			flex: 0 0 calc((100% - 1px) / 2);
		}
		a {
			position:static;
			width:auto;
		}
	}
	div.recruit {
		a {
			background-color: $accentcolor;
			color:$accenttextcolor;
			@include maxwidth($dev){
				background-color: $themecolor;
				color:$themetextcolor;
			}
			right:240px;
			&:before {
				background-image: url(../images/icon-target-white.svg);
			}
			&:hover {
				background-color:rgba($accentcolor, .6);
			}
		}
	}
	div.yoyaku {
		a {
			background-color: $themecolor;
			color:$themetextcolor;
			right:120px;
			&:before {
				background-image: url(../images/icon-talk-white.svg);
			}
			&:hover {
				background-color:rgba($themecolor, .6);
			}
		}
	}
}


div.muryou_soudan_jisshichu {
	a {
		@include absolute(null, 30, null, null);
		top: calc(100vh - 180px - 30px);
		body.admin-bar & {
			top: calc(100vh - 180px - 30px - 32px);
		}
		@include wh(180);
		display:flex;
		flex-direction: column;
		background-color: $accentcolor;
		color:$accenttextcolor;
		border-radius:180px;
		align-items:center;
		justify-content:center;
		transition: .5s;
		&:hover {
			background-color:rgba($accentcolor, .6);
		}
		span.main {
			color: #FFF;
			text-align: center;
			font-size: 24px;
			font-weight: 500;
			line-height: 130%;
			margin-bottom:8px;
			display:flex;
			flex-direction:column;
			align-items:center;
			&:before {
				flex: 0 0 34px;
				@include before_as_image('../images/icon-talk2-white.svg', 37, 34);
				margin-bottom:4px;
			}
		}
		span.sub {
			color: #FFF;
			text-align: center;
			font-family: "M PLUS 1";
			font-size: 12px;
			font-weight: 500;
			padding: 4px 11px 5px 11px;
			display:flex;
			gap: 3px;
			background-color:$basetextcolor;
			color:$basecolor;
			white-space: nowrap;
			border-radius:9999px;
			align-items:center;
			&:after {
				@include before_as_image('../images/icon-triangle-right-white.svg', 4, 8);
				flex: 0 0 4px;
				top: 1px;
				position:relative;
			}
		}
		@include maxwidth($dev){
			@include wh(auto, 74px);
			br { display:none; }
			position:static;
			border-radius:0;
			margin-top:1px;
			span.main {
				font-size: 18px;
				font-weight: 500;
				line-height:1;
				flex-direction:row;
				gap: 4px;
				align-items:initial;
				margin-bottom:4px;
				&:before {
					flex-basis: 21px;
					@include wh(21, 19);
					display:inline-block;
					vertical-align:middle;
				}
			}
		}
	}
}

div.headerscroll {
	a {
		font-size: 12px;
		font-weight: 500;
		display:flex;
		@include wh(100, 45);
		@include absolute(null, 0, null, 0);

		top: calc(100vh - 45px - 30px);
		body.admin-bar & {
			top: calc(100vh - 45px - 30px - 32px);
		}
		margin:auto;
		flex-direction: column;
		align-items:center;
		justify-content:space-between;
		color:$basecolor;
		&:after {
			flex: 0 0 20px;
			@include before_as_image('../images/icon-triangle-down-white-in-circle-white.svg', 20);
		}
		@include maxwidth($dev){
			font-size: 10px;
			position:static;
			color:$themecolor;
			@include wh(100%, 71px);
			@include borderbox(20,null,14);
			&:after {
				background-image:url(../images/icon-triangle-right-white-in-circle-color.svg);
			}
		}

	}
}

div#content {
	section {
	}
}

div.heading.common_heading {
	& > * {
		display:flex;
		flex-direction: column;
		align-items:center;
		gap: 6px;
		span.en {
			color: #1896D4;
			font-size: 14px;
			font-weight: 400;
		}
		span.index {
			margin-top:6px;
			flex: 0 0 28px;
			@include wh(28);
			border-radius:28px;
			background-color: #1896D4;
			color: $themetextcolor;
			font-size: 13px;
			font-weight: 600;
			display:flex;
			align-items:center;
			justify-content:center;
		}
		span.ja {
			margin-top:5px;
			color: $themecolor;
			font-size: 24px;
			font-weight: 500;
		}
	}

}

*.common_btn {
	display:inline-flex;
	@include wh(350, 50);
	max-width: 100%;
	background-color: $basetextcolor;
	color:$basecolor;
	align-items:center;
	justify-content:center;
	position:relative;
	font-size: 14px;
	&:after {
		@include before_as_image('../images/icon-triangle-right-white-in-circle-white.svg', 20);
		@include absolute(0, 15, 0, null);
		margin:auto;
	}
	&.type_search {
		background-color: $accentcolor;
		color:$accenttextcolor;
		gap: 5px;
		&:before {
			@include before_as_image('../images/icon-loope-white.svg', 1em);
		}
	}
	&:not(.type_search) {
		z-index:1;
		&:before {
		  content: "";
		  width: 100%;
		  height: 100%;
		  position: absolute;
		  top: 0;
		  left: 0;
		  z-index: -1;
		  background: $accentcolor;
		  transform-origin: 100% 50%;
		  transform: scaleX(0);
		  transition: transform ease .3s;
		}
		&:hover {
		  color: $accenttextcolor;
		}
		&:hover:before {
		  transform-origin: 0% 50%;
		  transform: scaleX(1);
		}
		}
}

*.ani_area {
	*.ani_target {
		opacity:0;
		transform: translateY(80px);
		//filter: grayscale(100);
		//transition: opacity 1s, transform 1s, filter 1s;
		transition: opacity 1s, transform 1s;
		&[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;}
	}
	&.show {
		*.ani_target {
			opacity:1;
			transform: translateY(0px);
			//filter: grayscale(0);
		}
	}
}

div.termlist.termlist_news {
	$tsh: 940;
	margin-bottom:22px;
	ul {
		display:flex;
		flex-wrap:wrap;
		gap: 10px;
		li {
			flex: 0 0 180px;
			height: 45px;
			a {
				display: flex;
				@include wh(null, 100%);
				@include borderbox(null, null, 1.5, null);
				justify-content: center;
				align-items: center;
				color:$themecolor;
				font-size: 14px;
				font-weight: 500;
				&:before { content:'#';}
				transition: .5s;
				background-color:mix($themecolor, $themetextcolor, .075);
				&:hover {
					background-color: $themetextcolor;
				}
			}
			&.current a {
				background-color:$themecolor;
				color:$themetextcolor;
			}
		}
		@include maxwidth($tsh){
			gap: 5px;
			li {
				flex: 0 0 calc((100% - 5px) / 2);
				&:first-child {
					flex: 0 0 100%;
				}
			}
		}
	}
}

div.headline.headline_news {
	$tsh: 940;
	div.item {
		border-bottom: 1px solid rgba($basetextcolor, 0.2);
		a {
			display:flex;
			padding: 25px 40px 25px 20px;
			position:relative;
			@include maxwidth($tsh){
				gap: 8px;
				flex-direction:column;
				padding: 10px 40px 10px 0;
			}
			span.date {
				margin-right:20px;
			}
			span.terms {
				margin-right:15px;
				display:flex;
				flex-wrap:wrap;
				gap: 13px;
				@include maxwidth($tsh){
					gap: 8px;
				}
				span.term {
					height:19px;
					@include borderbox(0, 13, 2);
					font-size: 12px;
					font-weight: 600;
					display:flex;
					align-items:center;
					white-space: nowrap;
					&.main {
						background-color:$themecolor;
						color:$themetextcolor;
					}
					&.sub {
						background-color: $accentcolor;
						color:$accenttextcolor;
					}
				}
			}
			span.date, span.title {
				font-size: 14px;
				font-weight: 500;
				line-height: 120%;
			}
			&:after {
				@include before_as_image('../images/icon-triangle-right-color-in-circle-color.svg', 20);
				@include absolute(0, 10, 0, null);
				margin:auto;
			}
			transition: .5s;
			&:hover {
				opacity:.6;
			}
		}
		&:last-child {
			border-bottom: none;
		}
	}
	div.noposts {
		text-align:center;
		padding: 40px 10px;
	}
}

div.monthly_archive_link {
	@include container(800,10);
	margin-top:25px;
	@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,.1);
		margin:auto;
		border-radius:30px;
		position:relative;
		&:after {
			content:'>';
			display:inline-block;
			transform: rotateZ(90deg) scaleX(.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,.05);
				padding: 7px 0;
				border-radius:3px;
			}
		}
	}
}

div.pager {
	text-align: center;
	font-size: .875em;
	margin-top:25px;
	@media screen and (max-width: 540px) {
		font-size: .6875em;
	}
	a, span {
		display: inline-block;
		margin: 0 0.25em 0.75em;
		min-width: 3em;
		padding: 1em 1em;
		box-sizing: border-box;
		background-color: #ddd;
		&.current {
			background-color: #131d48;
			color: #fff;
		}
	}
}

div#toppageNews {
	$tsh: 940;
	padding: 100px 0 30px;
	@include maxwidth($tsh){
		padding:40px 0;
	}
	background-color: $themecolorlight;
	div.container {
		@include container(1240, 20);
		display:flex;
		flex-wrap:wrap;
		gap: 10px 115px;
		div.heading.common_heading {
			flex: 0 0 45px;
			padding-left:20px;
			h2 {
				flex-direction: column-reverse;
				writing-mode: vertical-rl;
				align-items:flex-start;
				span.en {
					position:relative;
					top:3px;
				}
				span.ja {
				}
			}
		}
		@include maxwidth($tsh){
			display:block;
			div.heading.common_heading {
				margin-bottom:20px;
				padding-left:0;
				h2 {
					writing-mode: horizontal-tb;
					flex-direction:column;
					align-items:center;
				}
			}
		}

		div.body {
			flex: 1 1 auto;
			div.termlist.termlist_news {
				margin-bottom:6px;
				ul {
					li {
						a {
							background-color: $themetextcolor;
							&:hover {
								background-color:mix($themecolor, $themetextcolor, .15);
							}
						}
						&.current a {
							background-color:$themecolor;
							color:$themetextcolor;
						}
					}
				}
			}
			div.headline.headline_news {
				div.item {
					a {
						span.date {
						}
						span.terms {
							span.term {
								&.main {
								}
								&.sub {
								}
							}
						}
					}
				}
			}
		}
		div.footer {
			margin-top:10px;
			flex: 1 1 100%;
			text-align:right;
			a.common_btn { }
			@include maxwidth($tsh){
				margin-top:20px;
				text-align:center;
				a.common_btn {
					background-color:$themecolor;
					color:$themetextcolor;
				}
			}
		}
	}
}

*.common_btn2 {
	display:flex;
	@include wh(null, 50);
	@include borderbox(0, 30, 2, 15);
	align-items:center;
	background-color:$themecolorlight;
	position:relative;
	&:before {
		@include before_as_image(none, 12);
		margin: auto 0;
	}
	&.arrow_on_left {
		@include borderbox(0, 20, 2, 35);
		justify-content:center;
		color: $themecolor;
		font-size: 15px;
		font-weight: 500;
		&:before {
			background-image: url(../images/icon-triangle-right-color.svg);
			@include absolute(0, null, 0, 15);
		}
		//&:hover:before {
		//	background-image: url(../images/icon-triangle-right-white.svg);
		//}
	}
	&.arrow_on_right {
		color: $basetextcolor;
		font-size: 15px;
		font-weight: 700;
		&:before {
			background-image: url(../images/icon-triangle-right-black.svg);
			@include absolute(0, 15, 0, null);
		}
		//&:hover:before {
		//	background-image: url(../images/icon-triangle-right-white.svg);
		//}
	}
	transition: .25s;
	&:hover {
		background-color:mix($themecolor,$themetextcolor, .25);
		//color:$basecolor;
	}
}

div.termlist_common.lv1 {
	&:after {
		content:'';
		display:block;
		@include wh(null, 2);
		background-color:$basetextcolor;
	}
	ul {
		display:flex;
		gap: 5px;
		li {
			flex: 1 1 100%;
			a {
			}
			&.current a {
				background-color: $basetextcolor;
				color:$basecolor;
				&:before {
					background-image: url(../images/icon-triangle-right-white.svg);
					transform: rotateZ(90deg);
				}
			}
		}
	}
}
div.termlist_common.lv2 {
	ul {
		display:flex;
		flex-wrap:wrap;
		gap: 8px 10px;
		li {
			flex: 0 0 calc((100% - 10px * 6) / 7);
			a {
				display:flex;
				width:100%;
				align-items:center;
				justify-content:center;
				background-color:$themecolorlight;
				@include wh(null, 45);
				@include borderbox(null, 10, 1);
				color: $themecolor;
				font-size: 14px;
				font-weight: 500;
				line-height:1.2;
				span {
					&:before { content:'#'; }
				}
				transition: .5s;
				&:hover {
					background-color:mix($themecolor, $themetextcolor, .15);
				}
			}
			&.current a {
				background-color: $accentcolor;
				color:$accenttextcolor;
			}
		}
	}
	//&.termlist_c0{
	//	display: none;
	//}
}
div.termlist_common.lv2 {
	@include maxwidth($dev){
		margin-top:20px;
		background-color:$themecolorlight;
		padding:15px 20px 0;
	}
	div.term_link {
		margin-bottom: 8px;
		a {
			display:flex;
			@include wh(null, 45);
			@include borderbox(0, 10, 1);
			background-color:$themecolorlight;
			color: $themecolor;
			align-items:center;
			justify-content:center;
			font-size: 14px;
			font-weight: 500;
			line-height:1.2;
			@include maxwidth($dev){
				background-color: $basetextcolor !important;
				color:$basecolor !important;
			}
			transition: .5s;
			&:hover {
				background-color:mix($themecolor, $themetextcolor, .15);
			}
			span.caption {
				&:before { content:'#';}
			}
		}
	}
	div.heading {
		color: $themecolor;
		font-size: 12px;
		font-weight: 700;
		line-height: 120%;
		margin: 20px 0 12px;
		display:none;
		@include maxwidth($dev){
			display:block;
		}
	}
	ul {
		li {
		}
		@include maxwidth($dev){
			gap: 4px;
			li {
				flex: 0 0 auto;
				gap: 4px;
				a {
					background-color:$basecolor;
					color:$themecolor;
					@include borderbox(0, 10);
				}
			}
		}
	}
	div.link {
		margin-top:20px;
		text-align:center;
		a.common_btn.type_search {
		}
		@include maxwidth($dev){
			margin-top:10px;
			padding-bottom:30px;
			background-color: $themecolorlight;
		}
	}
}

div.termlist_common.lv1 {
	margin-top:20px;
	margin-bottom:20px;
	&:after {
	}
	ul {
		li {
			a {
			}
			&.current a {
			}
		}
	}
	@include maxwidth($dev){
		margin-bottom: 15px;
		&:after { display:none; }
		ul {
			display:block;
			li {
				margin: 0 2.5px;
				a {
					@include wh(100%, 80);
					background-color: $themecolor;
					color:$themetextcolor;
					//@include borderbox(0,null,14,null);
					@include borderbox(0,0,14,0);
					&:before {
						@include absolute(auto, 0, 10, 0);
						margin: 0 auto;
						@include before_as_image('../images/icon-triangle-right-white.svg', 6, 12);
						transform: rotateZ(90deg);
					}
				}
				&.current a {
					background-color:$basetextcolor;
					color:$basecolor;
				}
			}
		}
	}
}

div.headline.headline_service {
	display:flex;
	flex-wrap:wrap;
	gap: 20px 22px;
	@include maxwidth(600){
		display:block;
		div.item {
			margin: 20px 10px 22px;
		}
	}
	div.item {
		flex: 0 0 calc((100% - 22px * 2) / 3);
		@include maxwidth(1000){
			flex: 0 0 calc((100% - 22px * 1) / 2);
		}
		@include borderbox(15, 20, 25);
		background: $basecolor;
		color:$basetextcolor;
		box-shadow: 0px 0px 12px 0px rgba($basetextcolor, 0.1);
		&.item1 {}
		div.terms {
			display:flex;
			flex-direction:column;
			gap: 5px;
			margin-bottom:10px;
			span.term {
				@include wh(null, 26);
				display:flex;
				@include borderbox(0, 10, 1);
				font-size: 13px;
				font-weight: 500;
				align-items:center;
				&:before { content:'#';}
			}
			div.main, div.sub {
				flex-wrap:wrap;
				display:flex;
				gap: 5px;
			}
			div.main {
				span.term {
					background-color: $basetextcolor;
					color:$basecolor;
				}
			}
			div.sub {
				span.term {
					background-color: $themecolor;
					color:$themetextcolor;
				}
			}
		}
		div.permalink {
			margin-bottom:10px;
			a {
			}
		}
		div.text {
			margin-bottom:15px;
			font-size: 14px;
			font-weight: 400;
			line-height: 150%;
		}
		div.check {
			font-size: 14px;
			font-weight: 400;
			line-height: 120%;
			ul {
				display:flex;
				flex-direction:column;
				gap: 6px;
				li {
					display:flex;
					gap: 8px;
					&:before {
						flex: 0 0 18px;
						@include before_as_image('../images/icon-check-white-in-circle-color.svg', 18);
					}
				}
			}
		}
	}
	ul.slick-dots {
		margin:auto;
		display: flex;
		justify-content: center;
		gap: 8px;
		li {
			button {
				cursor: pointer;
				display: block;
				width: 10px;
				height: 10px;
				padding: 0;
				border: none;
				background-color: mix($basetextcolor, $basecolor, .1);
				text-indent: -9999px;
			}
		}
		li.slick-active button {
			background-color: $accentcolor;
		}
	}
}

div.termcontents {
	div.area {
		&.area1 {}
		transform:scale(0);
		position:absolute;
		margin-top: 100px;
		opacity:0;
		//width: 100vw;
		width: 100%;
		&.show {
			transition: margin-top 1s, opacity 1s;
			position:static;
			transform:scale(1);
			margin-top:0;
			opacity:1;
		}
	}
}

div#toppageService {
	background-color:$basecolor;
	color:$basetextcolor;
	padding: 100px 0 80px;
	@include maxwidth($dev){
		padding:50px 0 60px;
	}
	div.container {
		@include container(1320, 20);
		@include maxwidth($dev){
			margin:0;
		}
		div.heading.common_heading {
			margin-bottom: 40px;
			h2 {
				span.en {
				}
				span.ja {
				}
			}
		}
		div.body {
			div.termlist.termlist_service.lv1 {
				//margin-bottom:20px;
				&:after {
				}
				ul {
					li {
						a {
						}
						&.current a {
						}
					}
				}
				//@include maxwidth($dev){
				//	margin-bottom: 15px;
				//	&:after { display:none; }
				//	ul {
				//		display:block;
				//		li {
				//			margin: 0 2.5px;
				//			a {
				//				@include wh(100%, 80);
				//				background-color: $themecolor;
				//				color:$themetextcolor;
				//				@include borderbox(0,null,14,null);
				//				&:before {
				//					@include absolute(auto, 0, 10, 0);
				//					margin: 0 auto;
				//					@include before_as_image('../images/icon-triangle-right-white.svg', 6, 12);
				//					transform: rotateZ(90deg);
				//				}
				//			}
				//			&.current a {
				//				background-color:$basetextcolor;
				//				color:$basecolor;
				//			}
				//		}
				//	}
				//}
			}
			div.termcontents {
				div.area {
					&.area1 {}
					div.termdetail {
						background-color:$themecolorlight;
						display:flex;
						div.visual {
							flex: 1 1 425px;
							position:relative;
							img {
								@include obj100;
								@include absolute(0, 0, null, 0);
							}
						}
						div.doc {
							flex: 1 1 895px;
							@include borderbox(30, 30, 25, 35);
							div.heading {
								color:$themecolor;
								font-size: 18px;
								font-weight: 700;
								line-height: 120%;
								margin-bottom: 10px;
							}
							div.text {
								font-size: 15px;
								font-weight: 400;
								line-height: 120%;
								margin-bottom:18px;
							}
							div.link {
								a.common_btn {
								}
							}
						}
						@include maxwidth($dev){
							flex-direction:column;
							div.visual {
								flex: 0 0 182px;
							}
							div.doc {
								flex: 0 0 auto;
								@include borderbox(20, 25, 30);
								div.heading {
									font-size: 16px;
									margin-bottom: 15px;
								}
								div.text {
									font-size: 14px;
									font-weight: 400;
									line-height: 150%;
									margin-bottom:20px;
								}
								div.link {
									a.common_btn {
										background-color:$themecolor;
										color:$themetextcolor;
									}
								}
							}
						}
					}
					div.termlist.termlist_service.lv2 {
						margin-top:8px;
						//div.term_link {
						//	margin-bottom: 8px;
						//	a {
						//		display:flex;
						//		@include wh(null, 45);
						//		background-color:$themecolorlight;
						//		color: $themecolor;
						//		align-items:center;
						//		justify-content:center;
						//		font-size: 14px;
						//		font-weight: 500;
						//		@include maxwidth($dev){
						//			background-color: $basetextcolor;
						//			color:$basecolor;
						//		}
						//	}
						//}
						//div.heading {
						//	color: $themecolor;
						//	font-size: 12px;
						//	font-weight: 700;
						//	line-height: 120%;
						//	margin: 20px 0 12px;
						//	display:none;
						//	@include maxwidth($dev){
						//		display:block;
						//	}
						//}
						//ul {
						//	li {
						//	}
						//	@include maxwidth($dev){
						//		gap: 4px;
						//		li {
						//			flex: 0 0 auto;
						//			gap: 4px;
						//			a {
						//				background-color:$basecolor;
						//				color:$themecolor;
						//				@include borderbox(0, 10);
						//			}
						//		}
						//	}
						//}
						//div.link {
						//	margin-top:20px;
						//	text-align:center;
						//	a.common_btn.type_search {
						//	}
						//	@include maxwidth($dev){
						//		margin-top:0;
						//		padding-bottom:30px;
						//		background-color: $themecolorlight;
						//	}
						//}
					}
					div.headline.headline_service {
						margin-top:40px;
						//display:flex;
						//flex-wrap:wrap;
						//gap: 20px 22px;
						@include maxwidth($dev){
							margin: 40px 20px 0;
						//	display:block;
						//	div.item {
						//		margin: 20px 10px 22px;
						//	}
						}
						@include maxwidth(600){
							margin: 0;
						}
						//div.item {
						//	flex: 0 0 calc((100% - 22px * 2) / 3);
						//	@include borderbox(15, 20, 25);
						//	background: $basecolor;
						//	color:$basetextcolor;
						//	box-shadow: 0px 0px 12px 0px rgba($basetextcolor, 0.1);
						//	&.item1 {}
						//	div.terms {
						//		display:flex;
						//		flex-direction:column;
						//		gap: 5px;
						//		margin-bottom:10px;
						//		span.term {
						//			@include wh(null, 28);
						//			display:flex;
						//			@include borderbox(0, 15, 1);
						//			font-size: 13px;
						//			font-weight: 500;
						//			align-items:center;
						//			&:before { content:'#';}
						//		}
						//		div.main, div.sub {
						//			flex-wrap:wrap;
						//			display:flex;
						//			gap: 5px;
						//		}
						//		div.main {
						//			span.term {
						//				background-color: $basetextcolor;
						//				color:$basecolor;
						//			}
						//		}
						//		div.sub {
						//			span.term {
						//				background-color: $themecolor;
						//				color:$themetextcolor;
						//			}
						//		}
						//	}
						//	div.permalink {
						//		margin-bottom:10px;
						//		a {
						//		}
						//	}
						//	div.text {
						//		margin-bottom:15px;
						//		font-size: 14px;
						//		font-weight: 400;
						//		line-height: 150%;
						//	}
						//	div.check {
						//		font-size: 14px;
						//		font-weight: 400;
						//		line-height: 120%;
						//		ul {
						//			display:flex;
						//			flex-direction:column;
						//			gap: 6px;
						//			li {
						//				display:flex;
						//				gap: 8px;
						//				&:before {
						//					flex: 0 0 18px;
						//					@include before_as_image('../images/icon-check-white-in-circle-color.svg', 18);
						//				}
						//			}
						//		}
						//	}
						//}
						//ul.slick-dots {
						//	margin:auto;
						//	display: flex;
						//	justify-content: center;
						//	gap: 8px;
						//	li {
						//		button {
						//			cursor: pointer;
						//			display: block;
						//			width: 10px;
						//			height: 10px;
						//			padding: 0;
						//			border: none;
						//			background-color: mix($basetextcolor, $basecolor, .1);
						//			text-indent: -9999px;
						//		}
						//	}
						//	li.slick-active button {
						//		background-color: $accentcolor;
						//	}
						//}
					}
				}
			}
		}
		div.footer {
			margin-top:20px;
			text-align:center;
			a {
			}
			@include maxwidth($dev){
				margin-top:30px;
				a {
					background-color:$themecolor;
				}
			}
		}
	}
}


div#toppageAboutus {
	$tsh: 900;
	background-color: $basetextcolor;
	color:$basecolor;
	//padding:60px 0;
	div.container {
		@include container(1240, 0);
		@include maxwidth($tsh){ position: sticky; }
		div.heading.common_heading {
			//margin-bottom:20px;
			h2 {
				span.en {
				}
				span.ja {
					color: inherit;
				}
			}
		}
		div.body {
			div.leadtext {
				margin-bottom:17px;
				text-align:center;
				br { display:none; }
				span.num {
					font-size: 24px;
					font-weight: 700;
					@include wh(50);
					border-radius:50px;
					display:inline-flex;
					@include borderbox(0, 0, .1em, .1em);
					justify-content:center;
					align-items:center;
					background-color:$themecolor;
					color:$themetextcolor;
					vertical-align:middle;
					position:relative;
					top:-.075em;
					margin: 0 .15em;
				}
				@include maxwidth($tsh){
					line-height:2.2;
					br { display:block; }
					span.num {
						@include wh(40);
					}
				}
			}
			div.items {
				padding-left: 20px;
				padding-right: 20px;
				display:flex;
				gap: 20px;
// todo
// 縦幅が小さすぎる場合は横スクロールを断念して縦に並べる
@media screen and (max-height: 680px) {
flex-direction:column;
align-items:center;
}
				div.item {
					flex: 0 0 calc((100% - 20px * 2) / 3);

@include maxwidth(920){
	height: calc(60vh);
}

					@include maxwidth($tsh){
						flex: 0 0 300px;//0 0 calc((100% - 20px * 2) / 3);


min-height: calc(100vh - 350px);

					}
					@include maxwidth(400){
						flex: 0 0 100vw;//0 0 calc((100% - 20px * 2) / 3);
					}

// todo
// 縦幅が小さすぎる場合は横スクロールを断念して縦に並べる
@media screen and (max-height: 680px) {
	flex: 0 0 auto;
	width: 768px;
	max-width: 90%;
	height:auto;
}


					&.item1 {}
					display:flex;
					flex-direction:column;
					div.visual {
						//flex: 0 0 270px;
		flex: 0 0 50%;
		@include wh(null, 50%);
		//@include maxwidth($tsh){
		//	flex-basis: 210px;
		//	@include wh(null, 210);
		//}
						//@include maxwidth(400){
						//	flex-basis: 30%;
						//	@include wh(null, 30%);
						//}
						img {
							@include obj100;
						}
					}
					div.doc {
						flex: 1 1 auto;
						//flex: 1 1 300px;
						background-color: $basecolor;
						color: $basetextcolor;
						display:flex;
						flex-direction:column;
						align-items:center;
						@include borderbox(16, 30, 30);
						div.index {
							flex: 0 0 30px;
							@include wh(30);
							margin-bottom:15px;
							background-color:$themecolor;
							color:$themetextcolor;
							font-size: 14px;
							font-weight: 500;
							display:flex;
							align-items:center;
							justify-content:center;
							border-radius:30px;
							@include borderbox(0, 0, .1em, .2em);
						}
						div.heading {
							margin-bottom:10px;
							font-size: 16px;
							font-weight: 700;
							line-height: 120%;
						}
						div.text {
							font-size: 14px;
							font-weight: 400;
							line-height: 150%;
						}
					}
				}
			}
		}
		div.footer {
			//margin-top:30px;
			text-align:center;
			a {
				background-color:$themecolor;
				color:$themetextcolor;
			}
		}
	}
}

.horizontal_scroll {
	--sticky-container-height: 100vh;
	@include maxwidth(800){
		height: var(--sticky-container-height);
		min-height: 100vh;
	}
	//box-sizing: border-box;
}
.horizontal_scroll .sticky {
	position: sticky;
	top:0;
	//body.admin-bar & { top:32px;}

	//top:-80px;
	//body.admin-bar & { top:-48px;}
	
	//padding-bottom:32px;

	@include maxwidth(800){
		min-height: calc(100vh - 60px);
		padding-bottom:0;
	}

	display:flex;
	flex-direction:column;
	& > div.heading {
		flex: 0 0 100px;
		display:flex;
		align-items:center;
		justify-content:center;
		//outline: 2px solid yellow;
	}
	& > div.body {
		flex: 1 1 auto;
		//min-height: calc(100vh - 150px);
		//outline: 2px solid yellow;
	}
	& > div.footer {
		flex: 0 0 100px;
		display:flex;
		align-items:center;
		justify-content:center;
		//outline: 2px solid yellow;
	}
}
.horizontal_scroll .scroller {
	overflow: auto;
}
.horizontal_scroll .scroller.nobar {
	overflow: hidden;
}
.horizontal_scroll .scroller > * {
	//flex-basis: 66%;
	//flex-shrink: 0;
	//aspect-ratio: 16 / 9;
	//display: flex;
	//justify-content: center;
	//align-items: center;
	//background-color: whitesmoke;
	//height: 600px;
	//max-height:calc(100vh - 200px);
}
.horizontal_scroll .scroller > *:not(:first-child) {
	//margin-left: 1%;
}





div.headline.headline_case {
	div.item {
		&.item1 {}
		border-bottom: 1px solid rgba($basetextcolor, 0.2);
		a {
			padding: 16px 35px 16px 30px;
			display:flex;
			flex-wrap:wrap;
			// align-items:center;
			gap: 10px 20px;
			flex-direction: column;//追加
			span.terms {
				display:flex;
				flex-wrap:wrap;
				gap: 6px;
				span.term {
					@include wh(null, 24);
					display:flex;
					align-items:center;
					padding: 0 10px;
				}
				span.term.main {
					background-color: $basetextcolor;
					color: $basecolor;
					font-size: 13px;
					font-weight: 500;
				}
				span.term.sub {
					background-color: $themecolor;
					color: $themetextcolor;
					font-size: 13px;
					font-weight: 500;
				}
			}
			span.title {
				font-size: 14px;
				font-weight: 700;
				line-height: 120%;
			}
			position:relative;
			&:after {
				flex: 0 0 20px;
				@include before_as_image('../images/icon-triangle-right-color-in-circle-color.svg', 20);
				//margin-left:auto;
				@include absolute(0, 10, 0, null);
				margin:auto;
			}
			transition: .5s;
			&:hover {
				opacity:.6;
			}
		}
		&:last-child { border-bottom:none; }
	}
}

div#toppageCase {
	padding: 80px 0;
	background-color: $basecolor;
	color:$basetextcolor;
	@include maxwidth($dev){
		padding: 50px 0 30px;
	}
	div.container {
		@include container(1240, 20);
		@include maxwidth($dev){
			margin: 0;
		}
		div.heading.common_heading {
			margin-bottom:36px;
			h2 {
				span.en {
				}
				span.ja {
				}
			}
		}
		div.body {
			div.termlist.termlist_case.lv1 {
				margin-bottom: 20px;
			}
			div.termcontents {
				div.area {
					div.termlist.termlist_case.lv2 {
						margin-bottom: 20px;
						div.term_link {
							a {
								background-color:$themecolor;
								color:$themetextcolor;
							}
						}
						ul {
							li {
								&:first-child {
								}
							}
						}
					}
					//div.link {
					//	text-align:center;
					//	margin-bottom:30px;
					//	a {
					//	}
					//}
					div.headline.headline_case {
						//div.item {
						//	&.item1 {}
						//	border-bottom: 1px solid rgba($basetextcolor, 0.2);
						//	a {
						//		padding: 16px 20px 16px 30px;
						//		display:flex;
						//		flex-wrap:wrap;
						//		align-items:center;
						//		gap: 10px 20px;
						//		span.terms {
						//			display:flex;
						//			flex-wrap:wrap;
						//			gap: 8px;
						//			span.term {
						//				@include wh(null, 28);
						//				display:flex;
						//				align-items:center;
						//				padding: 0 15px;
						//			}
						//			span.term.main {
						//				background-color: $basetextcolor;
						//				color: $basecolor;
						//				font-size: 13px;
						//				font-weight: 500;
						//			}
						//			span.term.sub {
						//				background-color: $themecolor;
						//				color: $themetextcolor;
						//				font-size: 13px;
						//				font-weight: 500;
						//			}
						//		}
						//		span.title {
						//			font-size: 14px;
						//			font-weight: 700;
						//			line-height: 120%;
						//		}
						//		&:after {
						//			flex: 0 0 20px;
						//			@include before_as_image('../images/icon-triangle-right-color-in-circle-color.svg', 20);
						//			margin-left:auto;
						//		}
						//	}
						//	&:last-child { border-bottom:none; }
						//}
					}
				}
			}
		}
		div.footer {
			text-align:center;
			margin-top:40px;
			a {
			}
		}
	}
}
div#toppageOutline {
	background-color: $basecolor;
	color:$basetextcolor;
	@include maxwidth($dev){
		padding: 30px 0;
		position:relative;
		&:before, &:after {
			content:'';
			display:block;
			background-color: $basetextcolor;
			@include absolute(0, 20, auto, 20);
			height: 30px;
		}
		&:after {
			@include absolute(auto, 20, 0, 20);
		}
	}
	div.container {
		&.ani_area.show {
			div.body div.items div.item div.visual:after {
				opacity:1 !important;
				transition: 2s .5s;
			}
		}
		@include container(2560, 0);
		div.body {
			div.items {
				display:flex;
				flex-wrap:wrap;
				gap: 1px 2px;
				@include maxwidth($dev){
					flex-direction:column;
					gap: 1px;
				}
				div.item {
					flex: 0 0 calc((100% - 2px) / 2);
					height:240px;
					@include maxwidth($dev){
						flex: 0 0 140px;
						height:140px;
					}
					position:relative;
					&.item1 {}
					div.visual {
						img {
							@include absolute(0);
							@include obj100;
						}
						&:after {
							content:'';
							display:block;
							@include absolute(0);
							background-color:rgba(0, 0, 0, 0.60);
							opacity:0;
						}
					}
					div.doc {
						div.link {
							a {
								@include absolute(0);
								display:flex;
								gap: 4px;
								align-items:center;
								justify-content:center;
								font-size: 20px;
								font-weight: 500;
								//background-color:rgba(0, 0, 0, 0.60);
								color:#fff;
								&:after {
									@include before_as_image('../images/icon-triangle-right-white-in-circle-white.svg', 20);
								}
								&:hover {
									backdrop-filter: blur(5px);
								}
								transition: .25s;
							}
							span.en {
								color:#1896dc;
								font-size: 14px;
								font-weight: 400;
								@include absolute(0, null, 0, 27);
								margin:auto;
								transform:rotateZ(90deg) translateY(113px);
								display:block;
								@include wh(240, 14);
								text-align:center;
								pointer-events: none;
							}
						}
					}
				}
			}
		}
	}
}
div#toppageSupportarea {
	$tsh: 1000;
	padding: 21px 0;
	position:relative;
	overflow:hidden;
	@include maxwidth($tsh){
		padding: 20px 0 75vw;
	}
	&:after {
		@include before_as_image('../images/map2.png', 850, null, block);
		position:absolute;
		right:0;
		top:-25vw;
		aspect-ratio: 1584 / 2762;
		width: 40vw;
		@include maxwidth(1500){
			width: 45vw;
			top:-24vw;
		}
		@include maxwidth(1200){
			width: 50vw;
			top:-24vw;
		}
		@include maxwidth($tsh){
			@include absolute(auto, 0vw, -35vw, null);
			width: 90vw;
		}
		@include maxwidth(500){
			@include absolute(auto, -15vw, -65vw, null);
			width: 120vw;
		}
	}
	div.container {
		@include container(1340, 30);
		background-color: $themecolorlight;
		@include borderbox(70, 70, 60);
		min-height: 380px;
		box-sizing: border-box;
		@include maxwidth($tsh){
			min-height: auto;
			margin: 0 20px;
			padding: 30px 20px;
			z-index:1;
		}
		div.heading.common_heading {
			margin-bottom:20px;
			h2 {
				align-items:flex-start;
				@include maxwidth($tsh){
					align-items:center;
				}
				span.en {
				}
				span.ja {
				}
			}
		}
		div.body {
			max-width:480px;
			@include maxwidth($tsh){
				align-items:center;
				display:flex;
				flex-direction:column;
				max-width:none;
				div.text {
					max-width: 480px;
				}
				div.link a {
					background-color:$themecolor;
					color: $themetextcolor;
				}
			}
			div.leadtext {
				margin-bottom:14px;
				font-size: 16px;
				font-weight: 700;
				line-height: 130%;
			}
			div.text {
				margin-bottom:20px;
				font-size: 14px;
				font-weight: 400;
				line-height: 150%;
			}
			div.link {
				a {
				}
			}
		}
	}
}

div#contentFooter {
	background-color: $basetextcolor;
	color:$basecolor;
	padding:50px 0 40px;
	div#contentFooterContact {
		$tsh: 1070;
		div.container {
			div.heading.common_heading {
				margin-bottom:30px;
				h3 {
					span.en {
					}
					span.ja {
						color: inherit;
					}
				}
			}
			div.body {
				display:flex;
				flex-direction:column;
				gap: 5px;
				div.item {
					&.item1 {}
					position:relative;
					div.visual {
						@include absolute(0);
						img {
							@include obj100;
						}
						&:after {
							content:'';
							display:block;
							@include absolute(0);
							background: rgba(6, 6, 8, 0.8);
						}
					}
					div.docs {
						@include container(1160, 60);
						display:flex;
						align-items:center;
						gap: 60px;
						padding: 40px 0;
						@include maxwidth($tsh){
							flex-direction:column;
							gap:0;
							margin: 0 20px;
						}
						div.heading {
							flex: 0 0 43px;
							@include wh(43, 200);
							writing-mode: vertical-rl;
							font-size: 16px;
							font-weight: 500;
							background-color:$accentcolor;
							color:$accenttextcolor;
							display:flex;
							align-items:center;
							justify-content:center;
							letter-spacing: .25em;
							h4 {
							}
							@include maxwidth($tsh){
								flex: 0 0 30px;
								height: auto;
								width: 180px;
								writing-mode: horizontal-tb;
								letter-spacing: 0;
								margin-bottom:10px;
							}
						}
						div.map {
							@include wh(480, 300);
							background: #535257;
							@include maxwidth($tsh){
								max-width:100%;
								width: 335px;
								height:200px;
								margin-bottom:10px;
							}
							overflow:hidden;
							iframe {
								width:100% !important;
								height:300% !important;
								position:relative;
								top: -100%;
							}
						}
						div.doc {
							display:flex;
							flex-direction:column;
							gap: 20px;
							@include maxwidth($tsh){
								gap: 33px;
							}
							div.address {
								p {
									font-size: 16px;
									font-weight: 400;
									line-height: 150%;
									a.maplink {
										font-size: 14px;
										font-weight: 400;
										text-decoration: underline;
										display:inline-flex;
										align-items:center;
										gap: 7px;
										&:before {
											flex: 0 0 1em;
											@include before_as_image('../images/icon-triangle-right-white-in-circle-white.svg', 1em);
											position:relative;
											top:.1em;
										}
									}
								}
								@include maxwidth($tsh){
									text-align:center;
								}
							}
							div.contact {
								display:flex;
								flex-direction:column;
								gap: 4px;
								div.tel {
									a {
										font-weight: 500;
										display:flex;
										flex-direction:column;
										display:flex;
										@include wh(480, 100);
										border: 1px solid currentcolor;
										@include borderbox(4, 0, 4);
										justify-content:center;
										align-items:center;
										gap: 5px;
										@include maxwidth($tsh){
											width: 100%;
											gap: 8px;
										}
										span.telnum {
											font-size: 32px;
											display:flex;
											gap: 10px;
											align-items:center;
											&:before {
												@include before_as_image('../images/icon-phone-white.svg', 20);
												position:relative;
												top:.15em;
											}
											@include maxwidth($tsh){
												font-size: 24px;
												&:before {
													@include wh(17);
													top:.1em;
												}
											}
										}
										span.teltime {
											font-size: 14px;
										}
										span.telnote {
											font-size: 12px;
										}
									}
								}
								div.mail {
									a {
										font-size: 20px;
										font-weight: 500;
										display:flex;
										@include wh(480, 100);
										@include maxwidth($tsh){
											width: 100%;
										}
										@include borderbox(0, 0, 4);
										justify-content:center;
										align-items:center;
										gap: 10px;
										background-color:$themecolor;
										color:$themetextcolor;
										&:before {
											@include before_as_image('../images/icon-mail-white.svg', 20, 16);
											position:relative;
											top:.1em;
										}
										@include maxwidth($tsh){
											font-size: 16px;
											&:before {
												@include wh(17, 14);
											}
										}
										transition: .5s;
										&:hover {
											background-color:rgba($themecolor, .6);
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

footer {
}

div#footer {
	$tsh: 1000;
	background-color: $basecolor;
	color: $basetextcolor;
	padding: 40px 0 0;
	@include maxwidth($tsh){
		padding-top: 35px;
	}
	div.container {
		@include container(1320, 20);
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
		@include maxwidth($tsh){
			flex-direction:column;
			margin:0;
		}
		div.left {
			flex: 0 0 380px;
			@include maxwidth($tsh){
				flex: 0 0 auto;
				margin: 0 20px;
			}
			div.sitename {
				margin-bottom:16px;
				a {
					span.pc {
						display:block;
						@include wh(250, 60);
					}
					span.sp {
						display:none;
						@include wh(140, 116);
						margin:auto;
					}
					@include maxwidth($tsh){
						span.pc { display:none; }
						span.sp { display:block; }
					}
					img {
						@include obj100(contain);
					}
				}
			}
			div.address {
				display:flex;
				flex-direction:column;
				gap: 14px;
				margin-bottom:18px;
				div.item {
					@include maxwidth($tsh){
						text-align:center;
					}
					&.item1 {}
					div.heading {
						background-color: $themecolor;
						color:$themetextcolor;
						font-size: 13px;
						font-weight: 500;
						@include wh(null, 21);
						display:inline-flex;
						align-items:center;
						@include borderbox(0, 15, 2);
						margin-bottom:5px;
					}
					div.body {
						font-size: 14px;
						font-weight: 400;
						line-height: 130%;
					}
				}
			}
			div.banner {
				@include maxwidth($tsh){
					text-align:center;
				}
				p {
				}
			}
		}
		div.right {
			flex: 1 1 auto;
			@include maxwidth($tsh){
				margin-top:27px;
			}
			@include maxwidth($tsh){
				background-color:$basetextcolor;
				color:$basecolor;
			}
			div.footermenu {
				display:flex;
				justify-content:flex-end;
				gap: 10px;
				@media screen and (min-width: $tsh+px) {
					ul {
						flex: 0 0 250px;
						display:flex;
						flex-direction:column;
						gap: 1px;
						font-size: 13px;
						font-weight: 500;
						li {
							align-items:center;
							a {
								display:block;
								padding: 10px 5px 10px 10px;
								background-color: $themecolorlight;
								&:before {
									content:'';
									display:inline-block;
									@include wh(6);
									background-color:$themecolor;
									margin-right:14px;
									vertical-align:middle;
									position:relative;
									top:-.1em;
								}
								transition: .25s;
								&:hover {
									background-color: transparent;
								}
							}
							ul {
								margin-top:1px;
								li {
									a {
										&:before {
											@include wh(6, 1);
										}
									}
								}
							}
						}
					}
				}
				@include maxwidth(1200){
					ul {
						flex-basis: 19vw;
					}
				}
				@media screen and (max-width: $tsh+px){
					padding:20px 0;
					display:block;
					max-width: 335px;
					margin:auto;
					@include menu_style_01;
					& > ul {
						margin-top:1px;
					}
				}
			}
		}
		div.bottom {
			flex: 0 0 100%;
			@include maxwidth($tsh){
				background-color: $basetextcolor;
				color:$basecolor;
			}
			div.asidemenu {
				ul {
					display:flex;
					justify-content:flex-end;
					gap: 2em;
					font-size: 13px;
					font-weight: 500;
					@include maxwidth($tsh){
						display:block;
						max-width:335px;
						margin:auto;
						li {
							margin-bottom: 10px;
						}
					}
					li {
						a {
							&:before {
								content:'';
								display:inline-block;
								@include wh(6);
								background-color:$themecolor;
								margin-right:14px;
								vertical-align:middle;
								position:relative;
								top:-.1em;
							}
							&:hover {
								opacity:.75;
							}
						}
					}
				}
			}
			div.copyright {
				margin-top:20px;
				font-size: 12px;
				font-weight: 500;
				line-height: 130%;
				text-align:right;
				padding-bottom:30px;
				@include maxwidth($tsh){
					font-size: 10px;
					text-align:center;
					margin:0 20px;
					margin-top:25px;
					padding-bottom:100px;
				}
			}
		}
	}
}

// =====================================================================
// サブページ

div#subpageHeadingVisual {
	margin-bottom:23px;
	div.container {
		margin-top:20px;
		position:relative;
		@include container(1380, 30);
		height:246px;
		div.visual {
			img {
				@include absolute(0);
				@include obj100;
			}
			&:after {
				content:'';
				@include absolute(0);
				background: rgba($basetextcolor, .5);
				backdrop-filter: blur(2px);
			}
		}
		div.heading.common_heading {
			@include absolute(0);
			display:flex;
			align-items:center;
			justify-content:center;
			margin:auto;
			z-index:1;
			span.ja {
				color: $basecolor;
			}
		}
	}
}

div#subpageTopicPath {
	margin-bottom:45px;
	div.container {
		@include container(1200, 20);
		font-size: 14px;
		font-weight: 500;
		line-height: 130%;
		ul {
			display:block;
			li {
				display:inline-block;
				margin-left:.75em;
				&:before {
					@include before_as_image('../images/icon-triangle-right-color-in-circle-color.svg', 16);
					display:inline-block;
					//margin-right:.5em;
					position:relative;
					top: .2em;
					right: .5em;
					//transform: translateY(.15em);
				}
				&:first-child:before { display:none; }
				a {}
			}
		}
	}
}

div#subpageContent {
	div.container {
		@include container(1200, 20);
		padding-bottom:80px;
		div.pageAnchor {
			margin-top: 30px;
			margin-bottom:50px;
			ul {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 10px;
				@include maxwidth(780){
					grid-template-columns: repeat(2, 1fr);
				}
				@include maxwidth(620){
					grid-template-columns: repeat(1, 1fr);
				}
				&:has(> :nth-child(2):last-child) {
					grid-template-columns: repeat(2, 1fr);
				}
				li {
					position:relative;
					a {
						position:relative;
						display:flex;
						flex-direction:column;
						background-color:$themecolorlight;
						color:$themecolor;
						justify-content:center;
						align-items:center;
						font-size: 14px;
						font-weight: 500;
						line-height: 120%;
						// @include borderbox(25, 20, 45);
						@include borderbox(20, 40, 20, 20);
						height: 100%;
						&:after {
							@include before_as_image('../images/icon-triangle-right-color-in-circle-color.svg', 20);
							transform: rotateZ(90deg);
							position: absolute;
							// @include absolute(null, 0, 15, 0);
							right: 12px;
							top: calc(50% - 10px);
							// bottom: auto;
							// margin:auto;
						}
					}
				}
				@include maxwidth(1000){
					// gap: 10px;
					li {
						flex-basis: calc((100% - 10px * 2) / 3);
						a {
							font-size: 12px;
							// @include borderbox(10, 10, 30);
							@include borderbox(12, 35, 12, 12);
							&:after {
								// bottom:10px;
								@include wh(15);
							}
						}
					}
				}
				@include maxwidth(620){
					li {
						flex-basis: calc((100% - 10px * 1) / 2);
					}
				}
				@include maxwidth(400){
					gap: 6px;
					li {
						flex-basis: (100% - 10px * 1);
					}
				}
			}
		}
		div.default {
		}

		body.post-type-archive-service &,
		body.archive.tax-servicecategory & {
			div.sec01 {
				background-color:$themecolorlight;
				padding:30px 20px;
				text-align:center;
				margin-bottom:50px;
				p {
					max-width:750px;
					margin:auto;
					color:$basetextcolor;
					font-size: 14px;
					font-weight: 500;
					line-height: 150%;
				}
			}
			div.termdetail {
				display:none;
			}
			div.termlist.termlist_common.lv2 {
				margin-top: 21px;
				margin-bottom:40px;
				div.term_link {
					a {
					background-color:$themecolor;
					color:$themetextcolor;
					}
				}
			}
			div.footer {
				a {
					background-color:$themecolor;
					color:$themetextcolor;
				}
			}
		}

		div.other_services {
			margin-top:80px;
			h3 {
				color:$themecolor;
				font-size: 20px;
				font-weight: 700;
				line-height: 120%;
				margin-bottom:32px;
				text-align:center;
			}
			div.items {
				display:flex;
				flex-wrap:wrap;
				gap: 26px;
				@include maxwidth(550){
					gap: 8px;
				}
				div.item {
					flex: 0 0 calc((100% - 26px * 3) / 4);
					@include maxwidth($dev){
						flex: 0 0 calc((100% - 26px * 1) / 2);
					}
					aspect-ratio: 1 / 1;
					position:relative;
					span.visual {
						@include absolute(0);
						img {
							@include obj100;
						}
					}
					a {
						background-color: rgba(0, 0, 0, 0.40);
						backdrop-filter: blur(2px);
						transition: .5s;
						&:hover {
							backdrop-filter: blur(0px);
							background-color: rgba(0, 0, 0, 0.70);
						}
						display:flex;
						@include wh(100%);
						position:relative;
						flex-direction: column;
						color:$themetextcolor;
						gap: 15px;
						justify-content:center;
						align-items:center;
						span.cap1 {
							color: #1896D4;
							font-size: 14px;
							font-weight: 500;
							display:flex;
							flex-direction: column;
							gap: 6px;
							align-items:center;
							span.index {
								background-color:#1896D4;
								color:$themetextcolor;
								font-size: 13px;
								font-weight: 600;
								display:flex;
								font-size: 13px;
								@include wh(28);
								align-items:center;
								justify-content:center;
								border-radius:28px;
							}
						}
						span.cap2 {
							font-size: 20px;
							font-weight: 700;
							line-height: 120%;
							margin:0 20px;
							@include maxwidth(550){
								font-size: 16px;
							}
						}
					}
					&.current {
						a {
							background: rgba(197, 197, 197, 0.90);
							span.cap1 {
								color: $themecolor;
								span.index { background-color:$themecolor;}
							}
							span.cap2 {
								color:$themecolor;
							}
						}
					}
				}
			}
		}

		body.single & {
			div.terms {
				margin-top:20px;
				display:flex;
				justify-content:center;
				gap: 10px;
				ul {
					display:flex;
					gap: 10px;
					flex-wrap:wrap;
					justify-content:center;
					li {
						height:24px;
						a.term {
							font-size: 13px;
							font-weight: 500;
							display:flex;
							align-items:center;
							height:100%;
							@include borderbox(0,12,2);
							&:before { content:'#'; }
							&.main {
								background-color:$basetextcolor;
								color:$basecolor;
							}
							&.sub {
								background-color: $themecolor;
								color:$themetextcolor;
							}
						}
					}
					&.officecategory {
						li a.term {
							&.main { background-color: $accentcolor; color: $accenttextcolor; }
						}
					}
					&.newscategory {
						li a.term {
							&.main { background-color: $themecolor; color: $themetextcolor; }
						}
					}
				}
			}
		}

		//body.single-service & {
		//	div.pageAnchor {
		//		margin-top:30px;
		//	}
		//	div.default.maincontent {
		//		padding-top:40px;
		//	}
		//}

		div.foot_nav_btns {
			margin-top:80px;
			display:flex;
			flex-direction: column;
			gap: 5px;
			div a {
				display:flex;
				padding:21px;
				background-color:$basetextcolor;
				color:$basecolor;
				font-size: 15px;
				font-weight: 500;
				line-height: 120%;
				align-items:center;
				justify-content:center;
				gap: 8px;
			}
			div.contactaboutthis a {
				background-color: $themecolor;
				color:$themetextcolor;
				&:before {
					@include before_as_image('../images/icon-mail-white.svg', 18, 14);
				}
			}
			div.siblings a {
			}
			div.back a {
			}
		}

		div.notfound {
			text-align:center;
			font-size: 1rem;
			line-height:1.6;
			border: 1px solid $themecolor;
			background-color: $themecolorlight;
			border-radius: .5em;
			padding: 2em 1em;
		}

	}
}

div.muryou_soudan_jisshichu3 {
	a {
		background-color: $accentcolor;
		color:$accenttextcolor;
		font-size: 15px;
		font-weight: 500;
		display:none;
		@include maxwidth($dev){
			display:flex;
		}
		justify-content:center;
		align-items:center;
		gap: 4px;


		position:fixed;
		bottom:0;
		left:0;
		width: calc(100% - 120px);
		height:60px;

		z-index:1;

		&:before {
			@include before_as_image('../images/icon-talk2-white.svg', 19, 17);
		}
		&:after {
			@include before_as_image('../images/icon-triangle-right-white-in-circle-white.svg', 16);
		}
		transform: translateY(60px);
		body.header_scrollout & {
			animation: gnavToggleSlideIn .5s 0s ease forwards;
		}
	}
}

a#totop {
	background-color: $themecolor;
	color:$themetextcolor;
	@include wh(60);
	@include absolute(null, 0, 0, null);
	position:fixed;
	display:none;
	display: flex;
	// @include maxwidth($dev){
	// 	display:flex;
	// }
	flex-direction:column;
	justify-content:center;
	align-items:center;
	transform: translateY(60px);
	z-index:1;
	body.header_scrollout & {
		animation: gnavToggleSlideIn .5s .30s ease forwards;
	}
	&:before {
		content:'';
		@include before_as_image('../images/icon-triangle-right-white.svg', 22);
		background-size: 4px 8px;
		background-position:60% 50%;
		transform:rotateZ(-90deg);
	}
	span.caption {
		font-size: 10px;
		font-weight: 500;
	}
}

@keyframes gnavToggleSlideIn {
	from {
		transform: translateY(60px);
	}
	to {
		transform: translateY(0);
	}
}


div.pager {
	text-align: center;
	font-size: .875em;
	@media screen and (max-width: 540px) {
		font-size: .6875em;
	}
	a, span {
		display: inline-block;
		margin: 0 0.25em 0.75em;
		min-width: 3em;
		padding: 1em 1em;
		box-sizing: border-box;
		background-color: #ddd;
		&.current {
			background-color: #131d48;
			color: #fff;
		}
	}
}