// スタイルシート common

@charset "utf-8";

@import "mixin";

html { scroll-behavior: smooth; }

body {
	@include root;
	position: relative;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

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_pos($jc, $ai:$jc) {
	justify-content:$jc;
	align-items:$ai;
}

@mixin area_color($bgc, $c) {
	background-color: $bgc;
	color: $c;
}

@keyframes parts_rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

*.btn.common_btn {
	@include area_color($themecolor, $themetextcolor);
	font-size: 14px;
	font-weight: 500;
	height:50px;
	width: 100%;
	max-width: 280px;
	display:inline-flex;
	@include flex_pos(center);
	position:relative;
	padding: 5px 48px;
	box-sizing: border-box;
	overflow: hidden;
	z-index:0;
	@include maxwidth(768) {
		max-width: initial;
	}
	&:before {
		@include before_as_image('../images/icon-arrow-right-color-in-circle-white.svg', 18);
		position:absolute;
		inset: 0 auto 0 15px;
		margin-block:auto;
		box-shadow: 0px 0px 0 1.5px $themecolor;
		border-radius: 18px;
	}
	&:after {
		content:'';
		background-color:mix($themetextcolor, $themecolor, .95);
		inset:0;
		margin:auto;
		position:absolute;
		clip-path: inset(50% 2px 50% 2px);
		transition: .25s;
		z-index:-1;
	}
	&:hover {
		opacity:1;
		color:$themecolor !important;
		//background: url(../images/decoration-02.svg) right bottom -50px / 100px auto no-repeat $themecolor;
		&:after {
			clip-path: inset(2px);
		}
	}
}

.slick-slide {
	&.add-animation {
	  animation: zoomUp 8s linear 0s normal both;
	}
}

ul.slick-dots {
	display: flex;
	margin:auto;
	justify-content:center;
	li {
		@include wh(10);
		cursor: pointer;
		button {
			text-indent: -999px;
			overflow: hidden;
		}
		&.slick-active {
		}
	}
	button {
		margin: 0;
		padding: 0;
		background: none;
		border: none;
		border-radius: 0;
		outline: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
}

div.heading.common_heading {
	h2 {
		span {
			&.index {
				color:$themecolor;
				font-size: 36px;
				font-weight: 600;
				position:absolute;
				transform: translateX(-83px);
				body.sp_menu & {
					position:static;
					transform:none;
					display:block;
					margin-bottom:30px;
				}
			}
			&.en, &.ja {
				display:block;
			}
			&.en {
				color:$themecolor;
				font-size: 14px;
				font-weight: 500;
				margin-bottom:13px;
			}
			&.ja {
				font-size: 24px;
				font-weight: 700;
			}
		}
	}
}

div.decoration_parts {
	clip-path: inset(100px 0 0 100px);
	&.noclip { clip-path: none; } 
	position:absolute;
	inset: -100px auto auto -100px;
	aspect-ratio:1 / 1;
	width: clamp(350px, 45.14vw, 650px);
	span.c {
		display:block;
		width: 100%;
		height:100%;
		background: none center / contain no-repeat;
		animation: parts_rotation 10s linear infinite;
	}
	&.c1 span.c { background-image:url(../images/decoration-01.svg); }
	&.c2 span.c { background-image:url(../images/decoration-02.svg?2); }
	&.c3 span.c { background-image:url(../images/decoration-03.svg); }
	&.c4 span.c { background-image:url(../images/decoration-04.svg); }
}

.ani_area {
	.ani_target {
		transition: .5s;
		&[data-aindex="1"] { transition-delay: calc(0.15s * 0);}
		&[data-aindex="2"] { transition-delay: calc(0.15s * 1);}
		&[data-aindex="3"] { transition-delay: calc(0.15s * 2);}
		&[data-aindex="4"] { transition-delay: calc(0.15s * 3);}
		&[data-aindex="5"] { transition-delay: calc(0.15s * 4);}
		&[data-aindex="6"] { transition-delay: calc(0.15s * 5);}
	}
	&.show {
		.ani_target {
		}
	}
	&.slidein1 {
		.ani_target {
			opacity: 0;
			transform: translateX(-100px);
			transition: 1s;
		}
		&.show {
			.ani_target {
				opacity:1;
				transform: translateX(0px);
			}
		}
	}
	&.slideup1 {
		.ani_target {
			//opacity: 0;
			clip-path: inset(0 100% 0 0);
			//transform: translateX(-100%);
			position:relative;
			&:after {
				content:'';
				display:block;
				position:absolute;
				inset:0;
				background-color: $themecolor;
				transition: 0s;
				transition-delay: .2s;
			}
		}
		&.overlay_white .ani_target:after {
			background-color: #fff;
		}
		&.show {
			.ani_target {
				//opacity:1;
				clip-path: inset(0);
				//transform: translateX(0%);
				&:after {
					inset: 0 0 0 100%;
					transition: .5s;
					transition-delay: .7s;
				}
			}
		}
	}
	&.fadein1 {
		.ani_target {
			opacity: 0;
			filter: blur(20px);
				transition: .2s;
		}
		&.show {
			.ani_target {
				opacity:1;
				filter: blur(0px);
				transition: 1s;
				&[data-aindex="1"] { transition-delay: calc(1s + 0.5s * 0);}
				&[data-aindex="2"] { transition-delay: calc(1s + 0.5s * 1);}
				&[data-aindex="3"] { transition-delay: calc(1s + 0.5s * 2);}
			}
		}
	}
}

div.termlist.product_termlist {
	font-size: 15px;
	font-weight: 700;
	margin-bottom:30px;
	@include maxwidth(768) {
		font-size: 14px;
	}
	ul {
		display:flex;
		gap: 4px;
		.subpage & {
			flex-wrap: wrap;
		}
		li {
			.subpage & {
				@include maxwidth(768) {
					flex-basis: calc((100% - 4px) / 2);
					a { width: 100% !important; }
				}
			}
			a {
				color: $themecolor;
				display:flex;
				@include wh(150, 45);
				@include maxwidth(768) {
					width: 140px;
				}
				@include flex_pos(center);
				position:relative;
				gap: .5em;
				z-index:1;
				&:before {
					content:'#';
				}
				&:after {
					content:'';
					display:block;
					position:absolute;
					inset: auto 0 0 0;
					height:2px;
					background-color: $themecolor;
				}
				&:hover {
					opacity:initial;
				}
			}
			position:relative;
			&:after {
				content:'';
				display:block;
				position:absolute;
				inset: 50% 0 50% 0;
				background-color:mix($themetextcolor,$themecolor, .9);
				transition: .25s;
			}
			&:hover {
				&:after {
					inset:0;
				}
			}
			&.current {
				a {
					&:before { display:none; }
					@include area_color($basetextcolor, $basecolor);
				}
			}
		}
	}
}

div.product_headline.headline {
	div.slide {
		a {
			display:block;
			& > span {
				display:block;
			}
			span.image {
				aspect-ratio: 1/1;
				margin-bottom:12px;
				position:relative;
				img {
					@include obj100;
				}
				&:after {
					content:'詳細をみる';
					font-size: 14px;
					@include maxwidth(768) {
						font-size: 13px;
					}
					inset:0;
					margin:auto;
					width:10em;
					height:3em;
					background-color: rgba($basecolor, .9);
					color: $basetextcolor;
					display:flex;
					@include flex_pos(center);
					position:absolute;
					letter-spacing: 1px;
					transition: .25s;
					clip-path: inset(50% 0 50% 0);
				}
			}
			span.title {
				font-size: 18px;
				@include maxwidth(768) { font-size: 14px; }
				font-weight: 700;
				line-height: 120%;
				margin-bottom:7px;
			}
			span.terms {
				display:flex;
				gap: 10px;
				color:$themecolor;
				font-size: 14px;
				@include maxwidth(768) { font-size: 13px; }
				font-weight: 700;
				span.term {
					display:flex;
					gap: .5em;
					&:before {
						content:'#';
					}
				}
			}
			&:hover {
				opacity:1;
				span.image {
					position:relative;
					&:after {
						transform: translateX(0);
						clip-path: inset(0);
					}
				}
			}
		}
	}
	button.slick-arrow {
		@include wh(55);
		border-radius:55px;
		@include area_color($basetextcolor, $basecolor);
		border:none;;
		text-indent: 9999px;
		overflow:hidden;
		white-space:nowrap;
		display:block;
		position:absolute;
		z-index:1;
		inset: calc(30 / 1440 * 100vw) auto 150px;
		margin-block:auto;
		cursor: pointer;
		&:after {
			content:'';
			display:block;
			@include before_as_image("../images/icon-arrow-left-white.svg", 8);
			position:absolute;
			inset:0;
			margin:auto;
		}
		&.slick-prev {
			left: 2.7778vw;
			&:after {
			}
		}
		&.slick-next {
			right: 2.7778vw;
			&:after {
				background-image: url(../images/icon-arrow-right-white.svg);
			}
		}
	}
	ul.slick-dots {
		gap: 8px;
		li {
			background: mix($basecolor, $basetextcolor, .95);
			button {
			}
			&.slick-active {
				background: $accentcolor;
			}
		}
		button {
		}
	}
}

div.newstopics_termlist.termlist {
	margin-bottom:42px;
	ul {
		display:flex;
		flex-wrap:wrap;
		gap: 4px;
		li {
			.subpage & {
				@include maxwidth(768) {
					flex-basis: calc((100% - 4px) / 2);
					a { width: 100% !important; }
				}
			}
			a {
				display: flex;
				@include wh(150, 45);
				padding: 5px;
				@include flex_pos(center);
				@include area_color($themetextcolor, $themecolor);
				font-size: 15px;
				@include maxwidth(768) { font-size: 14px; }
				font-weight: 700;
				box-sizing: border-box;
				gap: .5em;
				&:before {
					content:'#';
				}
				position:relative;
				&:after {
					content:'';
					display:block;
					position:absolute;
					inset: 50% 0 50% 0;
					background-color:$themecolor;
					transition: .25s;
					opacity:.1;
				}
				&:hover {
					opacity:initial;
					&:after {
						inset:0;
					}
				}
			}
			&.current {
				a {
					@include area_color($basetextcolor, $basecolor);
					&:before { display:none; }
					&:after { display:none; }
				}
			}
		}
	}
}

div.newstopics_headline.headline {
	div.item {
		font-size: 14px;
		@include maxwidth(768) { font-size: 13px; }
		font-weight: 600;
		line-height: 150%;
		border-top: 1px solid rgba(43, 71, 132, 0.20);
		&:first-child { border-top: none; }
		a {
			display:flex;
			gap: 20px;
			align-items:center;
			padding-block: 20px;
			@include maxwidth(768){
				flex-wrap:wrap;
				gap: 5px 20px;
				padding:20px 10px;
				span.meta {
					flex: 0 0 100%;
				}
			}
			span.meta {
				display:flex;
				gap: 15px;
				span.date {
				}
				span.terms {
					display:flex;
					gap: .5em;
					span.term {
						@include area_color($basetextcolor, $basecolor);
						font-size: 12px;
						@include maxwidth(768) { font-size: 10px; }
						font-weight: 700;
						height:20px;
						padding: 0 6px 1px;
						box-sizing: border-box;
						display:flex;
						align-items:center;
						white-space: nowrap;
					}
				}
			}
			span.title {
			}
			&:after {
				flex: 0 0 18px;
				@include before_as_image('../images/icon-arrow-right-white-in-circle-black.svg', 18);
				margin-inline:auto 40px;
				transition: .25s;
				background-position:right center;
				border-radius:18px;
				@include maxwidth(768){
					margin-inline: auto 18px;
				}
			}
			&:hover {
				opacity:1;
				background-color: mix($themecolor, $themetextcolor, .1);
				transition: .25s;
				&:after {
					background-image:url(../images/icon-arrow-right-color-in-circle-white.svg);
					transform: translateX(15px);
					padding-left:15px;
					background-color: $themecolor;
					box-shadow: 0 0 0 1px $themecolor;
				}
			}
		}
	}
}

div.monthly_archive_link {
	@include container(800,10);
	margin-top:35px;
	@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;
			}
		}
	}
}

header { }

div#header {
	position:absolute;
	inset: 35px 0 auto 0;
	body.sp_menu & {
		top: 23px;
	}
	z-index:2;
	div.container {
		//@include container(1360, 40);
		margin-inline:40px;
		display:flex;
		justify-content:space-between;
		@include maxwidth(1200){
			margin-left:  25px;
		}
		body.sp_menu & {
			margin-inline: 15px 70px;
		}
		div.sitename {
			h1 {
				a {
					display:block;
					height:45px;
					@include maxwidth(1200){
						width: auto;
						height:32px;
						margin-top: 6px;
					}
					body.sp_menu & {
						margin-top:0;
					}
					img {
						@include obj100(contain);
						object-position: left;
					}
				}
			}
		}

		div#gnav {
			color:$basecolor;
			font-weight: 700;
			display:flex;
			gap: 29px;
			align-items:center;
			body.sp_menu & {
				display:none;
			}
			nav {
				font-size: 14px;
				& > ul {
					display:flex;
					gap: 2em;
					@include maxwidth(1200){
						gap: 1.25em;
					}
					& > li {
						& > a {
							display:flex;
							gap: 7px;
							align-items:center;
						}
						&:has(> ul) > a,
						&.haschild > a {
							&:after {
								@include before_as_image('../images/icon-expand-color.svg', 13);
							}
						}
						& > a + ul {
							position:absolute;
							flex-direction:column;
							background-color:$basecolor;
							color:$basetextcolor;
							transform: translateY(1em);
							clip-path: inset(0 0 100% 0);
							transition: clip-path .25s;
							padding-block: .5em;
							li {
								a {
									padding: 1em;
									display:block;
								}
							}
						}
						&.open > a + ul {
							clip-path: inset(0);
						}
					}
				}
			}
			div.contact {
				font-size: 13px;
				a {
					display:flex;
					gap: 5px;
					@include wh(147, 45);
					@include flex_pos(center);
					@include area_color($accentcolor, $accenttextcolor);
					span.icon {
					}
					span.caption {
						
					}
				}
			}
			body.sp_menu & {
				display:flex;
				position:fixed;
				inset:0;
				height:auto;
				background-color:rgba($themecolor, .8);
				align-items:center;
				justify-content:center;
				flex-direction:column;
				clip-path: inset(0 0 100% 0);
				nav {
					& > ul {
						flex-direction:column;
						gap: 2px;
						& > li {
							& > a {
								background-color: $themetextcolor;
								color:$themecolor;
								width:300px;
								padding: 1em;
								box-sizing: border-box;
								text-align:center;
								position:relative;
								height:45px;
								justify-content:center;
							}
							&:has(> ul) > a,
							&.haschild > a {
								&:after {
									position:absolute;
									inset: 0 10px 0 auto;
									margin-block:auto;
								}
							}
							& > a + ul {
								position:fixed;
								z-index:1;
								background-color:rgba($basecolor, .9);
								color:$basetextcolor;
								transform: translateY(1em);
								clip-path: inset(0 0 100% 0);
								transition: clip-path .25s;
								padding-block: .5em;
								inset:0;
								display:flex;
								justify-content:center;
								align-items:center;
								gap: 2px;
								li {
									a {
										width: 260px;
										padding: 1em;
										box-sizing: border-box;
										display:block;
										background: url(../images/icon-arrow-right-white.svg) right 10px center / 5px auto no-repeat $themecolor;
										color:$themetextcolor;
									}
								}
							}
							&.open > a + ul {
								clip-path: inset(0);
							}
						}
					}
				}
				div.contact {
					a {
						width:300px;
					}
					@include maxwidth(768){
						display:none;//下部のfixedなバナーがあるため
					}
				}
			}
			body.menu_open.sp_menu & {
				clip-path: inset(0);
			}
		}
	}
}

div#mainVisual {
	div.container {
		position:relative;
		div.slides {
			&:after {
				content:'';
				position:absolute;
				inset:0;
				// background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.20) 100%);
				// @追加
				background: linear-gradient( 
					to bottom,
					rgba(0, 0, 0, 0.5) 0%,
					rgba(0, 0, 0, 0) 180px,
					rgba(0, 0, 0, 0) 100%
				);
				body.sp_menu & {
					// @追加
					background: linear-gradient(
						to bottom,
						rgba(0, 0, 0, 0.5) 0%,
						rgba(0, 0, 0, 0) 140px,
						rgba(0, 0, 0, 0) 100%
					);
					// background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.30) 100%);
				}
			}
			div {
				height: calc(100vh - 110px);
				body.sp_menu & {
					height: 670px;
				}
			}
			div.item-slider {
				img {
					@include obj100;
				}
			}
			ul.slick-dots {
				flex-direction:column;
				gap: 8px;
				position:absolute;
				inset: 0 35px 0 auto;
				z-index:1;
				@include wh(10, 82);
				li {
					background: $accenttextcolor;
					button {
					}
					&.slick-active {
						background: $accentcolor;
					}
				}
				button {
				}
				body.sp_menu & {
					flex-direction:row;
					@include wh(64, 8);
					inset: auto 20px 26px auto;
					gap: 6px;
					li {
						@include wh(8);
					}
				}
			}
		}
		div.overlay {
			position:absolute;
			inset:auto auto 70px 40px;
			color: #fff;
			// font-size: clamp(28px, 3.125vw ,45px);
			font-size: clamp(20px, 2.778vw, 40px); // @追加
			font-weight: 700;
			span.mkr {
				@include area_color($themecolor, $themetextcolor);
				display: inline-flex;
				font-size: clamp(20px, 2.778vw, 40px);
				height: 1.75em;
				align-items:center;
				padding: 0 0.75em 0.15em;
				box-sizing: border-box;
				margin-inline:0.2em;
				color: #FFF;
			}
			& > * { margin-bottom: 0.889em; }
			& > :last-child { margin-bottom:0;}

			// @追加
			.text2 {
				display: inline-flex;
				align-items: center;
				padding: 0 0.75em 0.15em 0.05em;
				box-sizing: border-box;
				margin-inline: 0.2em;
				color: #FFF;
				background-color: $basetextcolor;
				height: 1.75em;
			}

			body.sp_menu & {
				writing-mode: vertical-rl;
				inset: auto 20px 89px auto;
				letter-spacing: .1em;
				span.mkr {
					letter-spacing: .2em;
					writing-mode: vertical-rl;
					height:auto;
					width:1.85em;
					padding: 0.4em 0;
					//margin-top:30px;
					&:first-child { margin-top:20px;}
				}
				& > * { margin-bottom: 0 !important; }
				& > * { margin-left: 0.689em; }
				& > :last-child { margin-left:0;}

				// @追加
				.text2 {
					height: auto;
					width: 1.85em;
					padding: 0.1em 0 0.4em;
					margin-top: 20px;
				}
			}
		}
		div.headerscroll {
			font-size: 14px;
			font-weight: 700;
			@include maxwidth(768) {
				font-size: 12px;
				font-weight: 600;
			}
			position:absolute;
			inset: auto auto -63px 40px;
			z-index:1;
			a {
				//display:flex;
				//gap: 12px;
				//align-items:center;
				display:inline-flex;
				align-items:center;
				padding-left:30px;
				@include maxwidth(768) {
					padding-left: 25px;
				}
				&:before {
					@include before_as_image('../images/icon-arrow-down-white-in-circle-color.svg', 18);
					background-position: center bottom;
					transition: .25s;
					position:absolute;
					inset: -2px auto auto 0;
					border-radius:18px;
					background-color:mix($themecolor,$themetextcolor, .4);
				}
				&:hover {
					opacity:1;
					&:before {
						padding-top: 15px;
					}
				}
			}
			body.sp_menu & {
				inset: auto auto 20px 40px;
				@include maxwidth(768) {
					inset: auto auto 20px 20px;
				}
				color:$basecolor;
				a:hover:before {
					padding-top:10px;
				}
			}
		}
	}
}

div#firstviewHeadline {
	@include area_color(#f4f4f4, $basetextcolor);
	font-size: 15px;
	@include maxwidth(768) { font-size: 13px; }
	font-weight: 700;
	display:flex;
	gap: 25px;
	align-items:center;
	//padding: 44px 40px;
	height:110px;
	//max-width:820px;
	//width:56.944vw;
	padding-left: clamp(1px, 43.0556vw, 100620px);
	box-sizing: border-box;
	@include maxwidth(1000){
		flex-direction:column;
		align-items:flex-start;
		padding: 25px 20px;
		gap: 20px;
		height:auto;
	}
	div.heading {
		padding-right: 25px;
		position:relative;
		&:after {
			content:'';
			display:block;
			position:absolute;
			inset:0 0 0 auto;
			width: 2px;
			background-color:$themecolor;
		}
		@include maxwidth(1000){
			padding: 0 0 15px 0;
			&:after {
				inset: auto auto 0 0;
				@include wh(20, 2);
			}
		}
	}
	div.body {
		a {
			display:flex;
			gap: 14px;
			align-items:center;
			@include maxwidth(1000){
				flex-direction:column;
				align-items:flex-start;
				gap: 7px;
			}
			span.meta {
				display:flex;
				gap: 14px;
				align-items:center;
				span.date {
				}
				span.terms {
					display:flex;
					gap: 10px;
					span.term {
						display: inline-flex;
						height: 20px;
						align-items:center;
						padding: 0 6px 1px 6px;
						@include area_color($basetextcolor, $basecolor);
						font-size: 12px;
						@include maxwidth(768) { font-size: 10px; }
						font-weight: 700;
					}
				}
			}
			span.title {
				display:flex;
				gap: 9px;
				align-items:center;
				&:after {
					@include before_as_image('../images/icon-arrow-right-white-in-circle-black.svg', 18);
					border-radius:18px;
					transition: .25s;
				}
			}
			&:hover {
				opacity: 1;
				span.title {
					&:after {
						//@include before_as_image('../images/icon-arrow-right-color-in-circle-white.svg', 18);
						background-size: 18px auto;
						background-position: right 1px center;
						//box-shadow: 0 0 0 1px $themecolor;
						padding: 0 0 0 15px;
						background-color: mix($themecolor, $themetextcolor, .3);
					}
				}
			}
		}
	}
}

main { }


div#subpageHeadingVisual {
	div.container {
		height:180px;
		position:relative;
		position: relative;
		&::after{
			content: "";
			@include absolute_centering;
			background-color: rgba($basetextcolor, .4);
		}
		img {
			@include obj100;
		}
	}
}

div#content {
	body.subpage & {
		position:relative;
	}
}

div#subpageTopicPath {
	padding-top:33px;
	div.container {
		@include container(1120, 20);
		ul {
			display:inline;
			li {
				font-size: 14px;
				font-weight: 500;
				display:inline;
				&:before {
					@include before_as_image('../images/icon-arrow-right-white-in-circle-black.svg', 17, 17, inline-block);
					vertical-align:middle;
					margin-right:11px;
					margin-left: 6px;
					margin-top:-2px;
				}
				&:first-child {
					margin-left:0;
					&:before { display:none; }
				}
				a {
				}
			}
		}
	}
}

div#subpageHeading {
	padding-top:70px;
	div.container {
		@include container(1020, 20);
		div.heading.common_heading {
			h2 {
				span.en {
					color:$themecolor;
					font-size: 14px;
					font-weight: 500;
					line-height: 120%;
					margin-bottom:8px;
				}
				span.ja {
					font-size: 32px;
					@include maxwidth(768) { font-size: 24px; }
					font-weight: 700;
					line-height: 120%;
				}
			}
		}
	}
}

div#subpageContent {
	padding-block: 80px 100px;
	div.container {
		@include container(1020, 20);
		div.default.page-company {
		}

		div.product_headline.headline {
			display:flex;
			flex-wrap:wrap;
			gap: 55px 40px;
			@include maxwidth(768) {
				gap: 30px 10px;
			}
			div.slide {
				flex: 0 0 calc((100% - 40px * 2) / 3);
				@include maxwidth(768) {
					flex: 0 0 calc((100% - 10px) / 2);
				}
			}
		}


	}
}

div#toppageAboutus {
	position:relative;
	@include area_color(#f4f4f4, $basetextcolor);
	@include maxwidth(1000){
		padding-top: 85px;
		div.decoration_parts {
			top:0px;
		}
	}
	//div.decoration_parts {
	//	transform: translateX(-400px);
	//	transition: 1s;
	//	opacity:.1;
	//}
	//&.show div.decoration_parts {
	//	transform: translateX(0px);
	//}
	div.container {
		//width: calc(1440px - 120px);
		//max-width: calc(100% - 120px);
		display:flex;
		width:1440px;
		margin-inline:auto;
		z-index:1;
		position:relative;
		gap: 80px;
		align-items:center;
		@include maxwidth(1770){
			width: auto;
			margin-inline: 160px auto;
		}
		@include maxwidth(1200){
			margin-inline: 40px auto;
			gap: 30px;
		}
		@include maxwidth(768){
			display:block;
			margin-inline: auto;
		}
		div.body {
			flex: 0 1 480px;
			padding-bottom:100px;
			@include maxwidth(768){
				margin-inline:20px;
				padding-bottom:30px;
			}
			div.heading.common_heading {
				margin-bottom:50px;
				@include maxwidth(768) {
					margin-bottom: 25px;
				}
				h2 {
					span {
						&.index {
						}
						&.en {
						}
						&.ja {
						}
					}
				}
			}
			div.docs {
				h3 {
					color:$themecolor;
					font-size: 24px;
					@include maxwidth(768) {
						font-size: 20px;
					}
					font-weight: 700;
					line-height: 160%;
					margin-bottom:20px;
				}
				div.text {
					font-size: 14px;
					font-weight: 500;
					line-height: 200%;
					margin-bottom:40px;
					p {
						margin-bottom: 1em;
						&:last-child { margin-bottom:0;}
					}
				}
				div.btnarea {
					a.btn_common_btn {
					}
				}
			}
		}
		div.visual {
			flex: 0 1 720px;
			aspect-ratio: 720/960;
			position:relative;
			@include maxwidth(768){
				aspect-ratio: 375/406;
			}
			div.i1 {
				aspect-ratio: 515/672;
				width: 71.528%;
				inset: 0;
				margin:auto;
				position:absolute;
				img {
					@include obj100;
				}
			}
			div.i2 {
				aspect-ratio: 320/320;
				width: 44.444%;
				position:absolute;
				z-index:1;
				inset: 0 auto auto 0;
				img {
					@include obj100;
				}
			}
			div.i3 {
				aspect-ratio: 400/320;
				width: 55.5556%;
				position:absolute;
				inset: auto 0 0 auto;
				img {
					@include obj100;
				}
			}
			@include maxwidth(768){
				div.i1 {
					aspect-ratio: 375/240;
					width:100%;
				}
			}
		}
	}
}

div#toppageProduct {
	margin-top:-50px;
	@include area_color($basecolor,$basetextcolor);
	padding-block: 155px 85px;
	position:relative;
	div.container {
		div.heading.common_heading {
			margin-bottom:24px;
			@include container(1120, 160);
			@include maxwidth(1080){
				width: auto;
				margin-inline:20px;
			}
			h2 {
				span.index {
				}
				span.en {
				}
				span.ja {
				}
			}
		}
		div.body {
			div.termlist.product_termlist {
				ul {
					justify-content:center;
					li {
						a {
						}
					}
				}
				@include maxwidth(1080){
					width: auto;
					margin-inline:20px 0;
					//padding-bottom: 20px;
					overflow-x: auto;
					ul {
						justify-content: initial;
					}
				}
			}
			div.product_headline.headline {
				margin-bottom: 26px;
				div.slide {
					margin-inline: 7px;
					margin-bottom:70px;
					width:365px;
					@include maxwidth(768) {
						width: 315px;
					}
					a {
						span.image {
							img {
							}
						}
						span.title {
						}
						span.terms {
							span.term {
							}
						}
					}
				}
			}
			div.link {
				text-align:center;
				margin: 0 20px;
				a {
				}
			}
		}
	}
}

div#toppageItemEquipment {
	position:relative;
	div.bgimage {
		position:absolute;
		inset: 0;
		img {
			@include  obj100;
		}
		&:after {
			content:'';
			position:absolute;
			inset:0;
			background-color: rgba(0, 0, 0, .6);
			backdrop-filter: blur(6px);
		}
	}
	.decoration_parts {
	}
	div.container {
		position:relative;
		padding-block: 143px 120px;
		@include maxwidth(768) {
			padding-block: 80px 40px;
		}
		div.heading.common_heading {
			margin-bottom:58px;
			@include container(1120, 20);
			color:$basecolor;
			h2 {
				span.index {
					color: inherit;
				}
				span.en {
					color: inherit;
				}
				span.ja {
				}
			}
		}
		div.body {
			@include container(1120, 20);
			display:flex;
			gap: 40px;
			@include maxwidth(1200){
				gap: 20px;
			}
			@include maxwidth(768){
				display:block;
				margin-left: 0;
				margin-right: 0;
			}
			div.item {
				flex-basis: calc(50% - 20px);
				@include maxwidth(1200){
					flex-basis: calc(50% - 10px);
				}
				div.visual {
					aspect-ratio: 1.618/1;					
					img {
						@include obj100;
					}
					@include maxwidth(768){
						flex-basis:auto;
						aspect-ratio: auto;
						height:150px;
					}
				}
				div.docs {
					padding:40px;
					@include maxwidth(768) {
						padding-left: 20px;
						padding-right: 20px;
					}
					position:relative;
					&:after {
						// .docsの背景色にするとmix-blend-modeが子要素にも影響してしまうため
						content:'';
						display:block;
						position:absolute;
						inset:0;
						@include area_color($themecolor, $themetextcolor);
						mix-blend-mode: lighten;
					}
					& > * {
						position:relative;
						z-index:1;
						display:block;
					}
					h3.heading, div.text {
						color:$themetextcolor;
					}
					h3.heading {
						margin-bottom:19px;
						font-size: 24px;
						font-weight: 700;
						text-align:center;
						padding-block: 5px;
						margin-top:-15px;
						@include maxwidth(768){
							top:-140px;
							margin-bottom:-70px;
							font-size: 20px;
							letter-spacing: 4px;
							background-color: rgba(0, 0, 0, .8);
							@include wh(335, 70);
							max-width:98%;
							margin-inline:auto;
							display:flex;
							align-items:center;
							justify-content:center;
						}
					}
					div.text {
						margin-bottom:30px;
						font-size: 14px;
						font-weight: 500;
						line-height: 200%;
					}
					span.btnarea {
						text-align:center;
						a.btn.common_btn {
							@include area_color($basetextcolor, $basecolor);
						}
					}
				}
			}
		}
	}
}

div#toppageRecruit {
	@include area_color($basetextcolor, $basecolor);
	position:relative;
	div.container {
		@include container(1120, 20);
		padding-block: 97px 151px;
		div.row.row1 {
			margin-bottom:60px;
			@include maxwidth(900){
				margin-bottom:30px;
			}
			div.cols {
				display:flex;
				gap: 100px;
				align-items:flex-end;
				@include maxwidth(1240){
					gap: 8.06451612903226vw;
				}
				@include maxwidth(900){
					flex-direction:column;
					gap: 30px;
						div.col {
							flex-basis: auto !important;
						}
				}
				div.col.col1 {
					flex: 0 1 500px;
					div.heading.common_heading {
						margin-bottom:50px;
						@include maxwidth(768) {
							margin-bottom: 25px;
						}
						h2 {
							span.index {
								color:inherit;
							}
							span.en {
								color:inherit;
							}
							span.ja {
							}
						}
					}
					h3.leadtext {
						font-size: 24px;
						@include maxwidth(768) {
							font-size: 20px;
						}
						font-weight: 700;
						line-height: 150%;
						margin-bottom:20px;
					}
					div.text {
						font-size: 14px;
						font-weight: 500;
						line-height: 200%;
						p {
							margin-bottom: 1em;
							&:last-child { margin-bottom:0;}
						}
					}
				}
				div.col.col2 {
					flex: 0 1 520px;
					aspect-ratio: 520/498;
					img {
						@include obj100;
					}
				}
			}
		}
		div.row.row2 {
			ul {
				display:flex;
				gap: 10px;
				flex-wrap:wrap;
				li {
					flex: 0 0 calc((100% - 10px * 3) / 4);
					aspect-ratio: 272/150;
					@include maxwidth(900){
						flex-basis: calc((100% - 10px * 1) / 2);
						aspect-ratio: auto;
						height:130px;
					}
					@include maxwidth(400){
						flex-basis: 100%;
						height: 110px;
					}
					position:relative;
					@include area_color($accentcolor, $accenttextcolor);
					border-radius: 5px;
					a {
						position:absolute;
						inset:0;
						display:flex;
						flex-direction:column;
						@include flex_pos(center);
						font-size: 16px;
						@include maxwidth(768) {
							font-size: 14px;
						}
						font-weight: 700;
						line-height: 120%;
						gap: 16px;
						&:after {
							@include before_as_image('../images/icon-arrow-right-color2-in-circle-white.svg', 18);
						}
						overflow:hidden;
						&:before {
							content:'';
							background: url(../images/decoration-01.svg) center / contain no-repeat;
							position:absolute;
							width: 100px;
							aspect-ratio:1 / 1;
							inset: 0;
							margin:auto;
							display:block;
							opacity:0;
							width:90%;
							//width: 250px;
							//left: calc((100% - 250px) / 2);
							transition: .25s;
							animation: parts_rotation 5s linear infinite;
						}
						&:hover {
							opacity:1;
							&:before {
								opacity:.25;
							}
						}
					}
					&:before {
						content:'';
						display:block;
						position:absolute;
						inset:10px;
						border: 8px solid transparent;
						border-image-source: url(../images/decoration-holes.svg);
						border-image-slice: 8;
					}
				}
			}
		}
	}
	div.visual {
		position:absolute;
		margin-top:-58px;
		inset: auto 0;
		z-index:1;
		@include maxwidth(900){
			margin-top: -120px;
		}
		div.item {
			aspect-ratio: 1/1;
			margin-inline: 6px;
			width:380px;
			@include maxwidth(900){
				width:250px;
			}
			@include maxwidth(768) {
				margin-inline: 2px;
			}
			img {
				@include obj100;
			}
		}
	}
}

div#toppageNewsTopics {
	@include area_color(#F4F4F4, $basetextcolor);
	padding-block:427px 80px;
	@include maxwidth(900){
		padding-top: 297px;
	}
	@include maxwidth(1000){
		padding-bottom:30px;
	}
	position:relative;
	div.decoration_parts {
		top: 7.917vw;
	}
	div.container {
		div.heading.common_heading {
			@include container(1120, 20);
			margin-bottom:48px;
			h2 {
				span.index {
				}
				span.en {
				}
				span.ja {
				}
			}
		}
		div.body {
			@include container(1440, 0);
			div.cols {
				display:flex;
				gap: 70px;
				@include maxwidth(1000){
					flex-direction:column-reverse;
					margin-inline:20px;
					gap: 30px;
					div.col {
						flex-basis: auto !important;
					}
				}
				div.col.col1 {
					flex: 0 0 450px;
					div.visual {
						aspect-ratio: 450/350;
						img {
							@include obj100;
						}
					}
				}
				div.col.col2 {
					flex: 0 1 760px;
					//padding-right:11.111vw;
					//@include maxwidth(1200){
					//	padding-right:0;
					//}
					padding-right:20px;
					@include maxwidth(1000) {
						padding-right: 0;
					}
					div.newstopics_termlist.termlist {
						ul {
							li {
								a {
								}
								
							}
						}
						@include maxwidth(1080){
							width: auto;
							// margin-inline:20px 0;
							//padding-bottom: 20px;
							margin-right: -20px;
							overflow-x: auto;
							ul {
								flex-wrap: nowrap;
								justify-content: initial;
							}
						}
					}
					div.newstopics_headline.headline {
						margin-bottom:25px;
						div.item {
							a {
								span.meta {
									span.date {
									}
									span.terms {
										span.term {
										}
									}
								}
								span.title {
								}
							}
						}
					}
					div.link {
						text-align:right;
						@include maxwidth(768){
							text-align:center;
						}
						a {
						}
					}
				}
			}
		}
	}
}



div#contentFooter {

	div#contentFooterContact {
		position:relative;
		@include area_color($basetextcolor, $basecolor);
		div.bgimage {
			position:absolute;
			inset:0;
			img {
				@include obj100;
			}
			&:after {
				content:'';
				display:block;
				position:absolute;
				inset:0;
				background-color: rgba(0, 0, 0, 0.40);
			}
		}
		div.container {
			position:relative;
			@include container(1120,20);
			padding-block: 60px;
			display:flex;
			gap: 10px;
			& > div {
				flex: 0 0 calc((100% - 10px * 1) / 2);
				a {
					display:flex;
					height:179px;
					@include flex_pos(center);
				}
			}
			@include maxwidth(1000){
				flex-direction:column;
				padding-block:40px;
				gap: 5px;
				align-items:center;
				& > div {
					width: 335px;
					max-width:100%;
					a {
						height:100px;
					}
				}
			}
			div.telButton {
				a {
					@include area_color($basetextcolor, $basecolor);
					flex-direction:column;
					gap: 6px;
					span.tel {
						span.lanel {
							font-size: 13px;
							font-weight: 700;
							bottom:.2em;
							position:relative;
						}
						span.telnum {
							font-size: 30px;
							font-weight: 700;
						}
					}
					span.teltime {
						font-size: 14px;
						font-size: 11px;
						font-weight: 700;
					}
				}
			}
			div.formButton {
				a {
					@include area_color($themecolor, $themetextcolor);
					gap: 8px;
					img {
						width: 20px;
							bottom:-.1em;
							position:relative;
					}
					span.text {
						font-size: 20px;
						font-weight: 700;
					}
					@include maxwidth(1000){
						span.text {
							font-size: 14px;
						}
					}
				}
			}
		}
	}
}

footer { }

div#footer {
	@include area_color($basetextcolor, $basecolor);
	div.container {
		display:flex;
		justify-content:space-between;
		@include container(1400, 20);
		padding-block: 60px 30px;
		@include maxwidth(1020){
			display:block;
			padding-block:40px 70px;
		}
		div.col1 {
			flex: 0 0 400px;
			@include maxwidth(1020){
				text-align:center;
				margin-bottom:20px;
			}
			div.sitename {
				margin-bottom:10px;
				a {
					img {
						height:45px;
						@include maxwidth(768) { height: 32px; }
						width:auto;
					}
				}
			}
			div.address {
				font-size: 14px;
				@include maxwidth(768) {font-size: 13px; }
				font-weight: 500;
				line-height: 130%;
			}
		}
		div.col2 {
			div.footermenu {
				margin-bottom:60px;
				ul {
					display:flex;
					justify-content: flex-end;
					gap: 2em;
					margin-bottom:20px;
					li {
						a {
							font-size: 14px;
							font-weight: 500;
						}
					}
				}
				@include maxwidth(1020){
					margin-bottom:25px;;
					ul {
						flex-direction:column;
						gap: 1px;
						align-items:center;
						li {
							width: 335px;
							max-width: 100%;
							a {
								display:block;
								position:relative;
								background-color:$themecolor;
								color:$themetextcolor;
								padding:16px 36px 16px;
								text-align:center;
								&:before {
									@include before_as_image('../images/icon-arrow-right-white.svg', 6, block);
									position:absolute;
									inset: 0 auto 0 15px;
									margin:auto;
								}
								font-size: 13px;
								font-weight: 500;
								line-height: 120%;
							}
						}
					}
				}
			}
			div.footerasidemenu {
				margin-bottom: 25px;
				ul {
					display:flex;
					justify-content: flex-end;
					gap: 1em;
					li {
						a {
							font-size: 13px;
							@include maxwidth(768) { font-size: 12px; }
							font-weight: 500;
							line-height: 130%;
						}
					}
				}
				@include maxwidth(1020){
					margin-bottom: 28px;
					ul {
						flex-direction:column;
						align-items:center;
						font-size: 12px;
						font-weight: 500;
						gap: 17px;
						li {
							a {
							}
						}
					}
				}
			}
			div.copyright {
				text-align:right;
				font-size: 13px;
				font-weight: 400;
				@include maxwidth(1020){
					font-size: 10px;
					text-align:center;
				}
			}
		}
	}
}

a.gnavtoggle {
	@include wh(48);
	background-color: $themecolor;
	&:hover {
		opacity: 1;
	}
	span.b {
		display: block;
		@include wh(20, 1);
		background-color: #fff;
		@include absolute_centering;
		transition: .25s;
		&.b1 { transform: translateY(-7px); }
		&.b3 { transform: translateY(7px); }
	}
	body.menu_open & {
		background-color: $accentcolor;
		span.b {
			width:25px;
			&.b1 { transform: rotateZ(-45deg); }
			&.b2 { transform: rotateY(90deg); }
			&.b3 { transform: rotateZ(45deg); }
		}
	}
}

#gnavToggleWrapper {
	display: none;
	body.sp_menu & {
		display: block;
	}
	a#gnavToggle {
		position: fixed;
		top: 15px;
		right: 12px;
		body.admin-bar &{
			top: calc(15px + 32px);
		}
	}
	@include maxwidth(768){
		body.header_scrollout & {
			transform: translateY(-100px);
		}
	}
}

div#bottomBar {
	position:fixed;
	inset: auto 0 0 0;
	display:flex;
	gap: 1px;
	height: 48px;
	z-index:10;
	transform: translateY(48px);
	transition: transform 1s;
	//一定幅以上の場合は出さない
	@media screen and (min-width: 769px){
		display:none !important;
	}
	body.header_scrollout & {
		transform: translateY(0);
	}
	a {
		display:flex;
		align-items:center;
		justify-content:center;
		@include wh(100%);
	}
	div.contact {
		flex: 1 1 auto;
		a {
			background-color:$accentcolor;
			color:$accenttextcolor;
			gap: 5px;
			span.icon {
				flex: 0 0 14px;
				@include wh(14, 11);
				img {
					display:block;
					@include obj100(contain);
				}
			}
			span.caption {
				font-size: 13px;
				font-weight: 700;
			}
		}
	}
	div.second_gnavbtn {
		flex: 0 0 48px;
		a {
			position:relative;
			span.b.b1 {
			}
			span.b.b2 {
			}
			span.b.b3 {
			}
		}
	}
	div.totop {
		flex: 0 0 48px;
		a#totop {
			background-color:$themecolor;
			color:$themetextcolor;
			display:flex;
			flex-direction:column;
			gap: 5px;
			&:before {
				@include before_as_image('../images/icon-arrow-up-white.svg', 5);
				flex: 0 0 5px;
			}
			font-size: 10px;
			font-weight: 600;
		}
	}
}

.pager {
    text-align: center;
    margin: 40px 0;
    @include f_all(13);
    font-weight: 500;
    a,
    span {
        display: inline-block;
        margin: 0 0 0.25em 0.75em;
        min-width: 3em;
        padding: 1em;
        box-sizing: border-box;
        background-color: mix($basetextcolor, $basecolor, 0.1);
    }
    .current {
        color: $themetextcolor;
        background-color: $themecolor;
    }
}


// @追加 20250911 先輩社員の声 single.php
.voice-index {
	@include f_all(14);
	line-height: 1.2;
	margin-top: 0.15em;
	margin-right: -0.8em;
}
.voice-group {
	position: relative;
	&__inner {
		.cols {
			display: flex;
			gap: 30px;
			@include maxwidth(768) {
				flex-wrap: wrap;
				&>* { flex-basis: 100% !important; }
			}
			.col {
				&:nth-child(1) { flex-basis: 310px; }
				&:nth-child(2) { flex-basis: 650px; }
				&>*:not(:first-child) {
					margin-top: 20px;
				}
			}
		}
	}

	.main-image {
		aspect-ratio: 310 / 202;
		position: relative;
		&>img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.table {
		@include f_all(13);
		font-weight: bold;
		line-height: 1.2;
		table {
			width: 100%;
			tr {
				&:last-child th,
				&:last-child td {
					border-bottom: none;
				}
				th, td {
					border: none;
					padding: 0.65em 24px;
					@include maxwidth(768) {
						padding-left: 1em;
						padding-right: 1em;
					}
					box-sizing: border-box;
					background-color: #E1E4E8;
					border-bottom: solid 1px $basecolor;
				}
				th {
					width: 100px;
					@include maxwidth(768) { width: 90px; }
					color: $themetextcolor;
					background-color: $basetextcolor;
					font-weight: bold;
				}
				td {  }
			}
		}
	}

	.qanda-items {
		.qanda-item {
			@include f_all(14);
			font-weight: 500;
			line-height: 1.5;
			&:not(:first-child) { margin-top: 15px; }
			.question, .answer {
				display: flex;
				&::before {
					font-weight: bold;
					flex-shrink: 0;
					@include flex_centering;
					color: $themetextcolor;
					background-color: $accentcolor;
					width: 50px;
					height: auto;
					min-height: 50px;
					padding-left: 4px;
					box-sizing: border-box;
					@include maxwidth(768) {
						width: 45px;
						min-height: 45px;
					}
				}
				&>span {
					flex: auto;
					display: block;
					padding: 10px 20px;
					box-sizing: border-box;
					border-bottom: solid 1.5px #D0D0D0;
				}
			}
			.question {
				font-weight: bold;
				&::before {
					content: "Q.";
					background-color: $accentcolor;
				}
			}
			.answer {
				&::before {
					content: "A.";
					background-color: $themecolor;
				}
			}
		}
	}

	.links {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 1rem;
		margin-top: 50px !important;
		.link {
			color: $themecolor;
			@include f_all(15);
			@include maxwidth(768) {
				@include f_all(14);
			}
			font-weight: bold;
			line-height: 1.2;
			a {
				text-decoration: none;
				display: inline-flex;
				align-items: center;
				gap: 1em;
				@include maxwidth(768) { gap: 0.5em; }
				&::before {
					content: "";
					flex-shrink: 0;
					display: block;
					width: 18px;
					height: 18px;
					border-radius: 18px;
					background: url(../images/icon-arrow-right-white.svg) no-repeat center / 6px auto;
					background-color: $basetextcolor;
					margin-top: 2px;
					@include maxwidth(768) {
						width: 16px;
						height: 16px;
						background-size: 5px auto;
					}
				}
			}
			&.prev {
				a {
					&::before {
						transform: scale(-1, 1);
					}
				}
			}
			&.next {
			}
		}
	}

	.backbutton {
		margin-top: 60px;
		.btn.common_btn {
			text-decoration: none;
			min-width: 100%;
		}
	}
}

// @追加 20250912 先輩社員の声 page.php
// カテゴリー
.voice-terms {
	position: relative;
	&:has(+ .voice-headline),
	&:has(+ .noposts)
	{ margin-bottom: 40px; }
	ul {
		color: $themecolor;
		@include f_all(15);
		@include maxwidth(768) {
			@include f_all(14);
		}
		font-weight: bold;
		line-height: 1.2;
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		li {
			@include maxwidth(768) {
				flex-basis: calc((100% - 4px) / 2);
			}
			height: auto;
			position: relative;
			&::after {
				content: "";
				display: block;
				position: absolute;
				inset: 50% 0 50% 0;
				background-color: mix($themecolor, $basecolor, 0.1);
				transition: 0.25s;
			}
			a {
				@include flex_centering;
				min-width: 140px;
				height: 100%;
				min-height: 45px;
				@include maxwidth(768) {
					min-width: initial;
					min-height: 40px;
				}
				box-sizing: border-box;
				border-bottom: solid 2px;
				position: relative;
				z-index: 1;
				// &::before {
				// 	content: "#";
				// 	margin-right: 0.5em;
				// }
				&:hover { opacity: 1; }
			}
			&.current {
				a {
					color: $themetextcolor;
					background-color: $basetextcolor;
					border-bottom: none;
				}
			}
			&:hover {
				&::after { inset: 0%; }
			}
		}
	}
}
// サムネイル
.voice-headline {
	position: relative;
	ul {
		display: flex;
		flex-wrap: wrap;
		gap: 30px 20px;
		position: relative;
		@include maxwidth(480) { column-gap: 10px; }
		li {
			flex-basis: calc((100% - (20px * 3)) / 4);
			@include maxwidth(1024) { flex-basis: calc((100% - (20px * 2)) / 3); }
			@include maxwidth(768) { flex-basis: calc((100% - 20px) / 2); }
			@include maxwidth(480) { flex-basis: calc((100% - 10px) / 2); }
			height: auto;
			a {
				&>* { display: block; }
				.img {
					aspect-ratio: 240 / 156;
					position: relative;
					&>img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					&::after {
						content: '詳細をみる';
						@include f_all(13);
						inset: 0;
						margin: auto;
						width: 8.5em;
						height: 2.5em;
						background-color: rgba(255, 255, 255, .9);
						color: $basetextcolor;
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						letter-spacing: 1px;
						transition: 0.25s;
						clip-path: inset(50% 0 50% 0);
					}
				}
				.title {
					@include f_all(18);
					font-weight: bold;
					line-height: 1.2;
					padding-right: 20px;
					box-sizing: border-box;
					margin-top: 6px;
					position: relative;
	
					&::after {
						content: "";
						display: inline-block;
						width: 18px;
						height: 18px;
						border-radius: 18px;
						background: url(../images/icon-arrow-right-white.svg) no-repeat center / 6px auto;
						background-color: $themecolor;
						position: absolute;
						top: 0.1em;
						bottom: 0;
						right: 0;
						margin: auto;
					}
	
					&>.index {
						@include f_all(14);
						margin-right: 10px;
					}
				}
				.terms {
					color: $themecolor;
					@include f_all(13);
					font-weight: bold;
					line-height: 1.2;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					gap: 0.5em;
					margin-top: 5px;
					.term {
						display: inline-flex;
						align-items: center;
						&::before {
							content: "#";
							margin-right: 0.5em;
						}
					}
				}
	
				&:hover {
					opacity: 1;
					.img::after { clip-path: inset(0% 0% 0% 0%); }
				}
			}
		}
	}
}