// スタイルシート 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;
}

iframe {
	max-width: 100%;
}

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;
}

// 旧デザインでNoto Sans JPを指定していた箇所の指定
// コメントアウト状態だと何も出力しないので親のフォントを継承（Hina Mincho@400）
// コメントアウトを外せばNoto Sans JPに再変更可能
@mixin past_noto_sans($weight: 400) {
	//font-family: "Noto Sans JP";
	//@if ($weight != 400) {
	//	font-weight: $weight;
	//}
}

@mixin button_hover_effect($rev:null) {
	position:relative;
	&::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #fff;
		@if $rev { transform-origin: 0% 50%; }
		@else { transform-origin: 100% 50%; }
		transform: scaleX(0);
		transition: transform ease .3s;
		mix-blend-mode: soft-light;
	}
	&:hover::before {
		@if $rev { transform-origin: 100% 50%; }
		@else { transform-origin: 0% 50%; }
		transform: scaleX(1);
	}
}

body {
	background-color:mix($basecolor, $basetextcolor, .75);
	color: $basetextcolor;
}

div#wrapper { }

div#header {
	height:30px;
	background-color:$themecolor;
	color:$themetextcolor;
	position:relative;
	z-index:200;

	body.sp_menu.menu_open & {
		position:fixed;
		top:0;
		left:0;
		right:0;
	}
	body.sp_menu.menu_open.admin-bar & { top:32px; }

	h1 {
		a {
			//padding: 18px 30px 20px;
			padding: 8px 10px;
			//background-color:$themecolor;
			background-color:#fff;
			color:$themetextcolor;
			display:block;
			position:absolute;
			z-index:1;
			//inset: 0 auto auto 30px;
			inset: 10px auto auto 30px;
			body.sp_menu & { top: 15px; }
			img {
				//width: 185px;
				//width: 200px;
				width: 230px;
			}
			@include maxwidth(800){
				padding: 10px 15px;
				left:15px;
				img {
					width: 140px;
				}
			}
		}
	}
	div.links {
		position:absolute;
		inset: 0 30px 0 auto;
		display:flex;
		align-items:center;
		gap: 17px;
		body.sp_menu & {
			display:none;
		}
		ul.icon {
			display:flex;
			gap: 15px;
			li {
				flex: 0 0 16px;
				aspect-ratio:1 / 1;
				a {
					display:block;
					aspect-ratio:1 / 1;
					img {
						@include obj100(contain);
					}
				}
			}
		}
		ul.text {
			font-size: 12px;
			li {
				a {
					display:flex;
					align-items:center;
					gap: 5px;
					&:before {
						flex: 0 0 9px;
						@include before_as_image('../images/icon-arrow-right-white.svg', 9);
					}
				}
			}
		}
	}
}

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


div#mainVisual {
	position:relative;
	height: calc(100vh - 30px - 53px);
	@include maxwidth(800){
		height: calc(100vh - 30px);
		max-height: 750px;
		min-height: 600px;
	}
	padding-bottom:53px;
	background-color:$basecolor;
	@include maxwidth(800){
		padding-bottom:0;
	}
	&:after {
		content:'';
		background-color:transparent;
		display:block;
		position:absolute;
		inset: 0;
		transition: .5s;
		pointer-events: none;
	}
	&[data-blur="1"]:after {
		//background: rgba(0, 0, 0, 0.25);
		backdrop-filter: blur(7px);
		pointer-events: auto;
	}
	& > * {
		transition: filter 1s;
	}
	&[data-blur="1"] > * {
		filter: brightness(0.85);
	}
	div.slides {
		height:100%;
		position:relative;
		background-color:$basetextcolor;
		div { height:100%;}
		div.item {
			img {
				@include obj100;
			}
		}
		&:after {
			content:'';
			display:block;
			position:absolute;
			inset:0 0 auto 0;
			height: 120px;
			//background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.60) 100%);
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.00) 100%);
			pointer-events: none;
		}
		ul.slick-dots {
			position: absolute;
			z-index:1;
			margin: auto;
			inset: 30px 28px 0 auto;
			display: flex;
			flex-direction:column;
			justify-content: center;
			list-style-type: none;
			gap: 11px;
			li {
			}
			button {
				cursor: pointer;
				display: block;
				@include wh(13);
				padding: 0;
				border: none;
				border-radius: 100%;
				background-color: $accenttextcolor;
				text-indent: -9999px;
			}
			li.slick-active button {
				background-color: $accentcolor;
			}
			@include maxwidth(800){
				flex-direction:row;
				inset: clamp(450px, calc(100vh - 180px), 600px) auto auto 15px;
				gap: 8px;
				button {
					@include wh(10);
				}
			}
		}
	}

	// スライドにズーム追加
	.slides {
		// overflow: hidden; //画像がはみ出ないようにする
		div.item {
			img {
				//display:block;
			}
			&.add-animation {
				animation: zoomUp 8s linear 0s normal both;
			}
		}
	}

	div.overlay_text {
		color: #FFF;
		font-size: clamp(0px, 6.5vh, 52px);
		font-weight: 400;
		position:absolute;
		//inset: 0px auto 20px 9.03vw;
		inset: 0px auto 0.385em 9.03vw;
		writing-mode: vertical-rl;
		display:flex;
		justify-content:center;
		letter-spacing: .1em;
		@include maxwidth(800){
			font-size: 35px;
			inset: 0px auto 90px 3vw;
		}
		span.w {
			display:block;
			background: rgba(0, 0, 0, 0.60);
			//padding:25px;
			padding:0.480769230769231em;
			span.l {
				display:block;
				//margin-block: 0 30px;
				margin-block: 0 0.576923076923077em;
				&.l1 {
				}
				&.l2 {
					margin-block: 0;
				}
			}
		}
	}
	div.scrolltocontent {
		color:$basecolor;
		position:absolute;
		inset: auto clamp(0px, 2.08vw, 28px) 53px auto;
		@include maxwidth(800){
			bottom: 107px;
		}
		a {
			display:flex;
			flex-direction:column;
			gap: 10px;
			span.caption {
				writing-mode: vertical-rl;
			}
			&:after {
				content:'';
				background-color:currentcolor;
				@include wh(1, 55);
				left: .1em;
				position:relative;
			}
		}
	}
}

div.firstViewHeadline {
	background-color:rgba($basetextcolor, .95);
	color:$basecolor;
	backdrop-filter: blur(5px);
	min-height:70px;
	margin-inline:auto;
	margin-block: -35px 0;
	display:flex;
	align-items:center;
	gap: 40px;
	padding: 10px 40px;
	position:absolute;
	inset: auto 80px;
	//margin-top: -89px;
	box-sizing: border-box;
	@include maxwidth(1000){
		gap: 20px;
		padding: 10px 20px;
		inset: auto 40px;
	}
	@include maxwidth(800){
		margin:0;
		display:block;
		padding: 0 20px 20px;
		inset: auto 0 0 0;
	}
	a:hover {
		transition: .25s;
		opacity: .75;
	}
	div.label {
		flex: 0 0 130px;
		background-color:$themecolor;
		color:$themetextcolor;
		height:31px;
		font-size: 13px;
		display:flex;
		align-items:center;
		justify-content:center;
		@include maxwidth(800){
			margin: -13.5px 0 10px -20px;
			width: 120px;
			font-size: 12px;
			height:27px;
		}
	}
	div.headline.topics_headline {
		min-width:0;
		//min-height:0;
		flex: 1 1 auto;
		//height:100%;
		//width: 100%;
		//max-width:100%;
		div.item {
			max-width: 100%;
			a {
				border-bottom: none;
				padding:0;
				background-image:none;
				span.date {
					margin-right:20px;
				}
				span.terms {
					margin-right:20px;
					width:auto;
					color:inherit;
					span.term {
					}
				}
				span.title {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				@include maxwidth(800){
					flex-wrap:wrap;
					font-size: 13px;
					gap: 5px 0;
					span.date {
						margin-right:10px;
					}
					span.title {
						flex: 0 0 100%;
					}
				}
				&:before {
					display:none;
				}
			}
		}
	}
	div.controller {
		flex: 0 0 65px;
		margin-left: auto;
		font-size: 14px;
		display:flex;
		align-items:center;
		gap: 9px;
		a.arrow {
			flex: 0 0 5px;
			img {
				position:relative;
				bottom:2px;
				@include maxwidth(800){
					bottom:0;
				}
			}
			&.prev { }
			&.next { }
		}
		@include maxwidth(800){
			font-size: 12px;
			justify-content:center;
			margin-top:10px;
			flex: 0 0 100px;
			a.arrow {
				@include wh(25);
				background-color:mix($basecolor, $basetextcolor, .25);
				display:inline-flex;
				flex: 0 0 25px;
				border-radius:20px;
				box-sizing: border-box;
				&.prev { padding: 8px 7px 8px 9px; }
				&.next { padding: 8px 6px 8px 10px; }
			}
		}
		span.cur_index {
		}
		span.pm {
			position:relative;
			bottom:2px;
		}
		span.count {
		}
	}
}

div#gnav {
	position:absolute;
	inset: 30px 0 auto 0;
	color:$basecolor;
	&.blacktext {
		color:$basetextcolor;
	}
	div.mainmenu {
		display:flex;
		font-size: 14px;
		position:absolute;
		inset: 40px 210px auto auto;
		align-items:flex-end;
		gap: 16px;
		z-index:2;
		div.links {
			display: none;
		}
		div.menu {
			margin-bottom:6px;
			& > ul {
				display:flex;
				gap: 24px;
				justify-content:flex-end;
				& > li {
					& > ul {
						display:none;
					}
					& > a {
						display:flex;
						gap: 5px;
						&:after {
							display: none;
							@include before_as_image('../images/icon-expand1-color.svg', 14);
						}
						&:hover:after {
							@include before_as_image('../images/icon-expand2-color.svg', 14);
						}
					}
					&.open {
						a:after {
							@include before_as_image('../images/icon-expand2-color.svg', 14);
						}
					}
					&[data-submenu] {
						a {
							&:after {
								display: inline;
							}
						}
					}
				}
			}
		}
	}
	div.submenu {
		position:absolute;
		inset: 0 0 auto 0;
		z-index:1;
		div.item {
			position:absolute;
			inset:0 0 auto 0;
			clip-path: inset(0 0 100% 0);
			transition: .25s;
			&.show {
				clip-path: inset(0);
			}
			padding: 73px 30px 10px 0;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.81) 100%);
			display:flex;
			gap: 10px;
			flex-wrap:wrap;
			justify-content:flex-end;
			a {
				display:block;
				aspect-ratio: 154 / 95;
				flex: 0 0 154px;
				position:relative;
				span.image {
					position:absolute;
					inset: 0;
					img {
						@include obj100;
					}
				}
				span.caption {
					@include past_noto_sans;
					position:absolute;
					inset:0;
					display:flex;
					align-items:center;
					justify-content:center;
					font-size: 14px;
					background: rgba(#000, 0.40);
					color:#fff;
				}
				&[data-thumb=""] {
					span.caption {
						background-color:$themecolor;
						color:$themetextcolor;
					}
				}
			}
		}
	}
	body.sp_menu & {
		position:fixed;
		z-index:50;
		inset:0;
		clip-path: inset(0 0 0 100%);
		transition: clip-path .5s;
		div.mainmenu {
			position:absolute;
			inset: 0;
			background-color:rgba($basecolor, .95);
			color:$basetextcolor;
			backdrop-filter: blur(10px);
			align-items:center;
			justify-content:flex-start;
			flex-direction:column;
			padding: 135px 20px 60px;
			@include maxwidth(800){
				padding-top: 105px;
			}
			overflow:scroll;
			& > div {
				width: 500px;
				max-width:100%;
			}
			div.links {
				display:flex;
				justify-content:space-between;
				ul.icon {
					display:flex;
					gap: 20px;
					align-items:center;
					li {
						flex: 0 0 21px;
					}
				}
				ul.text {
					font-size: 14px;
					li {
						display:flex;
						align-items:center;
						gap: 5px;
						&:before {
							flex: 0 0 9px;
							@include before_as_image('../images/icon-arrow-right-black.svg', 9);
						}
					}
				}
			}
			div.menu {
				@include past_noto_sans(500);
				font-size: 13px;
				& > ul {
					flex-direction:column;
					gap:1px;
					& > li {
						a {
							position:relative;
							@include button_hover_effect;
							//&:before {
							//	content: "";
							//	width: 100%;
							//	height: 100%;
							//	position: absolute;
							//	top: 0;
							//	left: 0;
							//	//z-index: -1;
							//	background: #fff;
							//	transform-origin: 100% 50%;
							//	transform: scaleX(0);
							//	transition: transform ease .5s;
							//	mix-blend-mode: soft-light;
							//}
							//&:hover:before {
							//	transform-origin: 0% 50%;
							//	transform: scaleX(1);
							//}
						}
						& > a {
							background: url('../images/icon-arrow-right-white.svg') 10px center / 5px auto no-repeat $basetextcolor;
							color:$basecolor;
							padding: 13px 14px 14px 25px;
						}
						&[data-submenu] {
							& > a {
								background-image:none;
								&:after {
									margin-left:auto;
								}
							}
						}
						& > ul {
							display:flex;
							flex-wrap:wrap;
							gap: 1px;
							margin-top:1px;
							& > li {
								flex: 0 0 calc((100% - 1px * 1) / 2);
								//background-color:yellow;
								& > a {
									display:block;
									background: url('../images/icon-arrow-right-white.svg') 10px center / 5px auto no-repeat $themecolor;
									color:$themetextcolor;
									padding: 13px 14px 14px 25px;
									&:before {
										background: #555;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	body.sp_menu.menu_open & {
		clip-path: inset(0);
	}
}

div#siteStickyButtons {
	height:0;
	position:sticky;
	top:0px;
	padding-right:30px;
	body.sp_menu & {
		padding-right: 10px;
	}
	transform: translateY(15px);
	display:flex;
	gap: 4px;
	justify-content:flex-end;
	z-index:100;
	body.admin-bar & {
		top: 35px;
	}
	body.sp_menu & {
		position:fixed;
		inset: 0 0 auto 0;
		z-index:300;
	}
	body.admin-bar.sp_menu & {
		top:30px;
	}
	div#gnavToggleWrapper {
		display:inline-block;
		@include wh(50);
		a#gnavToggle {
			display:none;
			background-color: $basetextcolor;
			color:$basecolor;
			position: relative;
			@include wh(100%);
			//inset: 50px 90px auto auto;
			//body.admin-bar & {
			//	top: 75px;
			//}
			//clip-path: inset(0 0 0 100%);
			transition: clip-path .5s;
			z-index:100;
			transition: .25s;
			body.sp_menu & {
				//clip-path: inset(0);
				display:block;
			}
			span {
				display:block;
				position:absolute;
				inset:0;
				margin:auto;
				transition: .25s;
				&.b {
					@include wh(20, 1);
					background-color:$basecolor;
					&.b1 { transform: translateY(-8px);}
					&.b2 { transform: translateY(-2px);}
				}
				&.text {
					height:1em;
					width:100%;
					font-size: 15px;
					font-weight: 400;
					text-align:center;
					transform: translateY(7px);
				}
			}
			body.menu_open & {
				background-color:$accentcolor;
				span.b {
					&.b1 { transform: translateY(-5px) rotateZ(-45deg); }
					&.b2 { transform: translateY(-5px) rotateZ(45deg); }
				}
				span.text { transform: translateY(10px); }
			}
		}
	}
	div#shopBtnWrapper {
		display:inline-block;
		@include wh(150, 44);
		a {
			@include wh(100%);
			display:flex;
			align-items:center;
			justify-content:center;
			background-color:$accentcolor;
			color:$accenttextcolor;
			gap: 8px;
			//width: 280px;
			span {
				opacity:1;
			}
			span.icon {
				img {
				}
			}
			span.caption {
				font-size: 15px;
				span.pc {
				}
			}
		}
		body.sp_menu & {
			transition: .5s;
			@include wh(50);
			a {
				flex-direction:column;
				gap: 0;
				span.caption {
					font-size: 14px;
					span.pc {
						display:none;
					}
				}
			}
		}
	}
}

div#subpageHeadingVisual {
	div.container {
		height: 340px;
		position:relative;
		@media screen and (orientation: portrait) {
			height: 200px;
		}
		img {
			@include obj100;
		}
		&:after {
			content:'';
			position:absolute;
			inset:0;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.25) 100%);
		}
	}
	&:after {
		content:'';
		background-color:transparent;
		display:block;
		position:absolute;
		inset: 0;
		transition: .5s;
		pointer-events: none;
	}
	&[data-blur="1"]:after {
		//background: rgba(0, 0, 0, 0.25);
		backdrop-filter: blur(7px);
		pointer-events: auto;
	}
	& > * {
		transition: filter 1s;
	}
	&[data-blur="1"] > * {
		filter: brightness(0.85);
	}
}

div#subpageTopicPath {
	position: relative;
	z-index: 1;
	div.container {
		@include container(1294, 30);
		font-weight: 400;
		ul {
			position:absolute;
			top:80px;
			display:flex;
			flex-direction:column;
			@include maxwidth(980) {
				//flex-direction: row;
				display:inline;
			}
			li {
				writing-mode: vertical-rl;
				font-size: 14px;
				letter-spacing: .2em;
				@include maxwidth(980) {
					writing-mode: horizontal-tb;
					display:inline;
					font-size: 12px;
					letter-spacing: initial;
				}
				&:before {
					@include before_as_image('../images/icon-arrow-down-black.svg', 6, 6, inline-block);
					margin-inline:13px;
					@include maxwidth(980) {
						transform: rotate(-90deg);
						margin:0 8px 1px 5px;
					}
				}
				&:first-child:before {
					display:none;
				}
			}
		}
	}
}
/*
div#subpageTopicPath {
	position: relative;
	z-index: 1;
	div.container {
		@include container(1294, 30);
		font-size: 14px;
		font-weight: 400;
		ul {
			position:absolute;
			top:80px;
			display:flex;
			flex-direction:column;
			@include maxwidth(980) {
				flex-direction: row;
			}
			li {
				writing-mode: vertical-rl;
				@include maxwidth(980) {
					writing-mode: horizontal-tb;
				}
				letter-spacing: .2em;
				&:before {
					@include before_as_image('../images/icon-arrow-down-black.svg', 6, 6, inline-block);
					margin-inline:13px;
					@include maxwidth(980) {
						transform: rotate(-90deg);
					}
				}
				&:first-child:before {
					display:none;
				}
			}
		}
	}
}
*/
div#content {
}

div#subpageHeading {
	transition: filter 1s;
	&[data-blur="1"] {
		filter: blur(5px);
	}
	div.container {
		div.heading {
			h2 {
				height:0;
				position:relative;
				span.ja {
					position:absolute;
					inset: auto 0 -40px;
					margin-block:auto;
					//@include wh(67, auto);
					width: 67px;
					@include flex_centering;
					background-color:$basetextcolor;
					color:$basecolor;
					writing-mode: vertical-rl;
					box-sizing: border-box;
					min-height: 232px;
					font-size: 20px;
					font-weight: 400;
					letter-spacing: .2em;
					white-space: nowrap;
					padding: 15px 0;
					@media screen and (orientation: portrait) {
						font-size: 12px;
						min-height: 140px;
						width: 40px;
						inset: auto 0 -24px;
					}
				}
			}
		}
	}
}

div#subpageContent {
	min-height: 100vh;
	@include maxwidth(980){
		min-height: auto;
	}
	background-color:$basecolor;
	color:$basetextcolor;
	div.container {
		@include container(1040, 80);
		// width: 1040px;
		@include maxwidth(1200) {
			margin: 0 60px 0 80px;
		}
		@include maxwidth(980) {
			//margin: 0 30px;
			margin: 0 20px;
		}
		padding-block:140px;
	}
	div.common_termlink {
		margin-bottom:40px;
	}
}

div.heading.common_heading {
	h2 {
		text-align:center;
		span {
			display:block;
			&.en {
				color:$themecolor;
				font-size: 16px;
			}
			&.ja {
				font-size: 24px;
				letter-spacing: 2.4px;
				margin-top:10px;
			}
		}
	}
}

div.more.allview {
	a {
		font-size: 16px;
		letter-spacing: 0.8px;
		display:inline-flex;
		gap: 14px;
		align-items:center;
		&:after {
			@include before_as_image('../images/icon-arrow-right-white.svg', 30);
			background-color:$basetextcolor;
			background-size: 5px auto;
			background-position: left 55% center;
			border-radius:30px;
			transition: .25s;
		}
		&:hover {
			&:after {
				opacity:.5;
			}
		}
	}
}

div#toppageLineup {
	background-color: mix($themetextcolor, $themecolor, .93);
	padding-block: 67px 71px;
	div.container {
		div.heading.common_heading {
			margin-bottom:30px;
			position:relative;
			@include container(1280, 20);
			h2 {
				@include maxwidth(750){
					text-align:initial;
				}
				span.en {
				}
				span.ja {
				}
			}
			div.more.allview {
				a {
					position:absolute;
					inset: 20px 0 auto auto;
					@include maxwidth(750){
						letter-spacing: initial;
						font-size: 14px;
						gap: 10px;
					}
				}
			}
		}
		div.body {
			position:relative;
			div.terms_link {
				margin-bottom:30px;
				@include container(1280, 20);
				ul {
					display:flex;
					gap: 7px;
					li {
						flex: 0 0 calc((100% - 7px * 4) / 5);
						a {
							height: 50px;
							padding-inline: 33px;
							font-size: 15px;
							background-color:mix($themetextcolor, $themecolor, .854);
							color:$basetextcolor;
							display:flex;
							align-items:center;
							justify-content:center;
							&:hover {
								background-color:mix($themetextcolor, $themecolor, .75);
							}
							transition: .5s;
						}
						&.current {
							a {
								background-color:$basetextcolor;
								color:$basecolor;
							}
						}
					}
					@include maxwidth(750){
						gap: 3px;
						flex-wrap:wrap;
						li {
							flex: 0 0 calc((100% - 3px * 2) / 3);
							&:nth-child(1), &:nth-child(2) {
								flex: 0 0 calc((100% - 3px * 1) / 2);
							}
							a {
								padding-inline:5px;
								height:40px;
							}
						}
					}
				}
			}
			div.contents {
				@include container(1160, 20);
				div.content {
					&.c1 div.col1 div.heading h3 { background-color: #e5b1a3; }
					&.c2 div.col1 div.heading h3 { background-color: #6a8c7b; }
					&.c3 div.col1 div.heading h3 { background-color: #cd412e; }
					&.c4 div.col1 div.heading h3 { background-color: #6a528c; }
					&.c5 div.col1 div.heading h3 { background-color: #4374bc; }
					display:flex;
					gap: clamp(0px, 4.16vw, 60px);
					@include maxwidth(750){
						flex-direction:column;
					}
					div.col { flex: 0 1 auto; }
					div.col1 {
						flex-basis: 540px;
						div.leadimage {
							margin-bottom:30px;
							aspect-ratio: 540 / 334;
							img {
								@include obj100;
							}
						}
						div.heading {
							text-align:center;
							margin-bottom:30px;
							h3 {
								padding-inline: 45px;
								display:inline-flex;
								height:58px;
								background: #777777;
								color: #fff;
								font-size: 20px;
								align-items:center;
							}
						}
						div.leadtext {
							text-align:center;
							margin-bottom:20px;
							font-size: 20px;
							line-height:1.4;
						}
						div.text {
							@include past_noto_sans;
							font-size: 14px;
							line-height: 150%;
							p {
								margin-bottom:1em;
								&:last-child { margin-bottom:0;}
							}
						}
					}
					div.col2 {
						flex-basis: 560px;
						div.headline.lineup_headline {
							display:flex;
							flex-wrap:wrap;
							gap: 30px 20px;
							margin-bottom:40px;
							div.item {
								flex: 0 0 calc((100% - 20px * 1) / 2);
								a {
									display:block;
									span { display:block; }
									span.image {
										aspect-ratio:1 / 1;
										margin-bottom:10px;
										img {
											@include obj100;
										}
									}
									span.title {
										@include past_noto_sans(500);
										font-size: 14px;
										line-height: 130%;
									}
								}
							}
						}
						div.more {
							a {
								height: 45px;
								display:flex;
								@include past_noto_sans(500);
								font-size: 14px;
								align-items:center;
								justify-content:center;
								background: url(../images/icon-arrow-right-white.svg) right 19px center / 4px auto no-repeat $basetextcolor;
								color:$basecolor;
								@include button_hover_effect;
							}
						}
					}
				}
			}
			div.arrows {
				span {
					a {
						position:absolute;
						inset: 0 auto;
						margin-block:auto;
						display:flex;
						flex-direction:column;
						justify-content:center;
						height: 100px;
						font-size: 16px;
						letter-spacing: 0.8px;
						z-index:1;
						padding-bottom:5px;
						box-sizing: border-box;
						&:after {
							margin-top:12px;
							display:block;
							@include before_as_image('../images/icon-lineup-arrow-prev-color.svg', 80, 7);
							background-size: cover;
							background-position:right top;
						}
						&:hover {
							background-color:mix($themetextcolor, $themecolor, .75);
						}
						@include maxwidth(750){
							font-size: 14px;
							letter-spacing: initial;
							height:50px;
							margin-block: calc(80px + (100% - 40px) / (540 / 334) + 67px) 0; // 写真上辺までの位置（固定） + 写真底辺までの位置（領域幅で変動するのでcalc） + 見出しの中間あたりまでの位置（固定）
							&:after {
								width: 40px;
								margin-top:6px;
							}
						}
					}
					&.prev {
						text-align:right;
						a {
							left:0;
							padding-right:20px;
							border-radius: 0 20px 20px 0;
						}
					}
					&.next {
						a {
							right:0;
							padding-left:20px;
							border-radius: 20px 0 0 20px;
							&:after {
								background-image:url(../images/icon-lineup-arrow-next-color.svg?2);
								background-position:left top;
							}
						}
					}
				}
			}
		}
	}
}

div#toppageConcept1 {//1440 960
	background-color:$basecolor;
	color:$basetextcolor;
	position:relative;
	height: 400vh;
	div.visual {
		overflow: hidden;
		position:sticky;
		inset: 0 0 auto 0;
		height:100vh;
		span {
			display:block;
			transition: .5s;
			// スマホ時のみtransitionを使わない
			body.os-touch & { transition: none; }
			//transition-function: linear;
		}
		span.main {
			//transition-delay: .05s;
			//width: 43.1944444444444vw;
			//aspect-ratio: 622 / 384;
			position:absolute;
			inset:0;
			margin:auto;
			overflow:hidden;
			img {
				@include obj100;
				transition: .5s;
				// スマホ時のみtransitionを使わない
				body.os-touch & { transition: none; }
				//object-position: 50% 0%;
			}
			//&[data-pos="4"] {
			//	width: 64.7916666666667vw;
			//}
			span.overlay {
				position:absolute;
				display:block;
				inset:0;
				background-color:#000;
				opacity: 0;
			}
		}
		span.sub {
			position:absolute;
			//aspect-ratio: 622 / 384;
			overflow:hidden;
			img {
				@include obj100;
				transition: .5s;
				// スマホ時のみtransitionを使わない
				body.os-touch & { transition: none; }
			}
			//&.sub1, &.sub4 {
			//	width: 22.1527777777778vw;
			//	aspect-ratio:319/384;
			//}
			//&.sub2, &.sub3 {
			//	width: 43.1944444444444vw;
			//	aspect-ratio:622/268;
			//}
			inset: 0;
			margin:auto;
			//&.sub1 { transform: translateX(-33vw) translateY(-20vw); }
			//&.sub2 { transform: translateX(22.5vw)  translateY(-23vw); }
			//&.sub3 { transform: translateX(-22.5vw) translateY(23vw); }
			//&.sub4 { transform: translateX(33vw)  translateY(20vw); }
			//&[data-pos="4"] {
			//	&.sub1 { transform: translateX(-48vw) translateY(-30vw); }
			//	&.sub2 { transform: translateX(32.5vw)  translateY(-43vw); }
			//	&.sub3 { transform: translateX(-32.5vw) translateY(43vw); }
			//	&.sub4 { transform: translateX(48vw)  translateY(30vw); }
			//}
		}
	}
	div.container {

		opacity:0;
		transition: 1s;

		//background: rgba(#000, 0.5);
		color:#fff;
		backdrop-filter: blur(5px);
		position:sticky;
		inset: 0 0 auto 0;
		height:100vh;
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		div.heading.common_heading {
			margin-bottom:25px;
			h2 {
				span.en {
				}
				span.ja {
				}
			}
		}
		div.body {
			div.leadtext {
				text-align: center;
				font-size: 20px;
				margin-bottom:20px;
				line-height:normal;
			}
			div.text {
				text-align: center;
				@include past_noto_sans;
				font-size: 14px;
				line-height: 180%;
				margin-bottom:30px;
				p {
					margin-bottom: 1em;
					&:last-child { margin-bottom:0; }
				}
			}
			div.more {
				text-align:center;
				a {
					display:inline-flex;
					@include wh(30);
					background-color:$themecolor;
					color:$themetextcolor;
					align-items:center;
					justify-content:center;
					border-radius: 30px;
					img {
						width: 5px;
					}
					transition: .25s;
					&:hover {
						opacity: .5;
					}
				}
			}
		}
	}
}

div#toppageConcept2 {
	padding-block: 177px 150px;
	background-color:$basecolor;
	color:$basetextcolor;
	position:relative;
	overflow-x:hidden;
	div.container {
		@include container(1440, 0);
		div.body {
			div.item {
				display:flex;
				margin-bottom:120px;
				&:last-child { margin-bottom:0;}
				&.item1 { }
				&.item2 { flex-direction:row-reverse; }
				&.item3 { }
				@include maxwidth(800){
					flex-direction:column !important;
					padding-inline: 0 20px;
					margin-bottom: 10vw;
					&.item1 { }
					&.item2 { padding-inline: 20px 0; }
					&.item3 { }
				}
				div.image {
					flex: 0 0 50%;
					aspect-ratio: 720/398;
					img {
						@include obj100;
					}
					@include maxwidth(800){
						margin-bottom:10vw;
					}
				}
				div.docs {
					flex: 0 0 50%;
					display:flex;
					align-items:center;
					justify-content:center;
					flex-direction:column;
					span.index {
						font-size: 14px;
						display:flex;
						gap: 5px;
						align-items:center;
						margin-bottom:23px;
						&:before, &:after {
							@include before_as_image('../images/icon-bracket-left-black.svg', 3, 12);
							flex: 0 0 3px;
							position:relative;
							top:1px;
						}
						&:after {
							background-image:url(../images/icon-bracket-right-black.svg);
						}
					}
					span.ja {
						font-size: 24px;
						font-weight: 400;
						letter-spacing: 2.4px;
						margin-bottom:13px;
					}
					span.en {
						color:$themecolor;
						font-size: 16px;
					}
					span.link {
						text-align:center;
						margin-top:23px;
						a {
							display:inline-flex;
							background-color:$basetextcolor;
							width:30px;
							aspect-ratio:1 / 1;
							align-items:center;
							justify-content:center;
							border-radius:30px;
							img {
								width: 5px;
							}
							transition: .25s;
							&:hover {
								opacity:.5;
							}
						}
					}
				}
			}
		}
	}
	div.decoration {
		position:absolute;
		justify-content:space-between;
		display:flex;
		align-items:center;
		flex-direction:column;
		pointer-events: none;
		&.decoration1 {
			img { transition-delay: 0s;}
		}
		&.decoration2 {
			img { transition-delay: 0;}
		}
		&.decoration1 {
			inset: 67px 80px 300px;
			//background-color:red;
			img {
				height:auto;
				width:auto;
				&.cb {
					//filter: blur(3px);
					&.cb1 {
						aspect-ratio:243 / 75;
						width:243px;
					}
					&.cb2 {
						aspect-ratio:281 / 104;
						width: 281px;
					}
					&.cb3 {
						aspect-ratio:121 / 47;
						width: 121px;
					}
					&.i7 {
						align-self: flex-start;
					}
					&.i1 {
						align-self: flex-end;
					}
					&.i2 {
					}
					&.i3 {
						align-self: flex-start;
					}
					&.i4 {
					}
					&.i5 {
						align-self: flex-end;
					}
					&.i6 {
					}
				}
			}
		}
		&.decoration2 {
			inset: 0px -193px auto;
			height: 120vh;
			img {
				height:auto;
				width:auto;
				//filter: blur(6px);
				filter: blur(0.4167vw);
				//transition: 2s;
				//transition-delay: .05s;
				mix-blend-mode: multiply;
				opacity:.8;
				&.cf {
					&.cf1 {
						aspect-ratio:465 / 215;
						//width: 465px;
						width: clamp(0px, 72.29vw, 465px);
					}
					&.cf2 {
						aspect-ratio:572 / 220;
						//width: 572px;
						width: clamp(0px, 79.72vw, 572px);
					}
					&.i1 {
						align-self: flex-end;
						margin-right:150px;
					}
					&.i2 {
						align-self: flex-start;
						//left:-100px;
					}
					&.i3 {
						margin-left:80px;
					}
				}
			}
		}
	}
}

div#toppageTopics {
	background-color:$basecolor;
	color:$basetextcolor;
	padding-block: 0 123px;
	@include maxwidth(800){
		padding-block: 0 50px;
	}
	div.container {
		@include container(1040, 20);
		div.heading.common_heading {
			margin-bottom:40px;
			span.en {
			}
			span.ja {
			}
		}
		div.body {
			div.common_termlink {
				margin-bottom:40px;
			}
			div.headline.topics_headline {
				div.item {
					a {
						span.date {
						}
						span.terms {
							span.term {
							}
						}
						span.title {
						}
					}
				}
			}
			div.more.allview {
				margin-top:30px;
				text-align:right;
				a {
				}
			}
		}
	}
}

@mixin hover_effect_image_banner {
	&:before {
		content:'';
		display:block;
		position:absolute;
		inset: 0;
		z-index:1;
		clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%);
		transition: .25s;
		background-color:rgba(#fff, .3);
		mix-blend-mode: overlay;
	}
	&:hover:before {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}

div#contentFooter {
	background-color:$basecolor;
	color:$basetextcolor;
	padding-block: 0 51px;
	div#contentFooterBanner {
		display:flex;
		gap: 1px;
		@include container(1440, 0);
		@include maxwidth(800){
			margin-inline: 10px;
			flex-direction:column;
			gap: 4px;
			align-items:center;
		}
		div.item {
			flex: 0 0 calc((100% - 1px * 1) / 2);
			@include maxwidth(800){
				flex: 0 0 170px;
				width: 100%;
				max-width:600px;
			}
			a {
				display:block;
				aspect-ratio: 719 / 306;
				position:relative;
				background-color:$basetextcolor;
				color:$basecolor;
				@include maxwidth(800){
					height:100%;
					width:100%;
					aspect-ratio: auto;
				}
				span.image {
					position:absolute;
					inset: 0;
					img {
						@include obj100;
					}
					&:after {
						content:'';
						position:absolute;
						inset: 0;
						display:block;
						background: rgba(#000, .4);
					}
				}
				span.caption {
					position:absolute;
					inset: 0;
					display:flex;
					align-items:center;
					justify-content:center;
					text-align:center;
					font-size: 20px;
					letter-spacing: 2px;
					line-height:1.4;
					flex-direction:column;
					padding-top:38px; // span.external分の高さを上部にもつける
					span.external {
						display:block;
						margin-top:8px;
						@include wh(30);
						background: url(../images/icon-external-white.svg) center / 10px auto no-repeat;
						background-color: $themecolor;
						border-radius:30px;
					}
					&:before, &:after {
						@include before_as_image('../images/decoration-05.svg',25, 25, block);
						background-size:contain;
						position:absolute;
						inset: 10px auto auto 10px;
					}
					&:after {
						inset: auto 10px 10px auto;
						background-image: url(../images/decoration-06.svg);
					}
				}
				@include hover_effect_image_banner;
			}
		}
	}
}




div#footer {
	background-color: mix($themetextcolor, $themecolor, .93);
	color:$basetextcolor;
	padding-block: 60px 100px;
	@include maxwidth(1080) {
		padding-block: 40px 60px;
	}
	div.container {
		@include container(1280, 80);
		@include maxwidth(1200){ margin-inline: 30px; }
		@include maxwidth(1000){ margin-inline: 20px; }
		div.sec1 {
			text-align:center;
			margin-bottom:40px;
			div.sitename {
				h2 {
					display:inline-block;
					padding: 8px 5px;
					background-color: #fff;
					img {
						//width: 185px;
						//width: 200px;
						width: 230px;
					}
				}
			}
			div.address {
				margin-top:12px;
				@include past_noto_sans;
				font-size: 13px;
				line-height: 130%;
			}
			div.sns {
				margin-top:20px;
				ul {
					display:flex;
					justify-content:center;
					align-items:center;
					gap: 15px;
					li {
						a {
							img {
								width: 23px;
							}
						}
					}
				}
			}
		}
		div.sec2 {
			display:flex;
			@include past_noto_sans;
			gap: 80px;
			@include maxwidth(1200) {
				gap: 10px;
			}
			@include maxwidth(1000){
				display:block;
				div.col1 { margin-bottom:20px;}
			}
			div.col.col1 {
				flex: 0 0 280px;
				div.heading {
					height: 22px;
					display:inline-flex;
					align-items:center;
					padding: 0 13px 1px;
					background-color:$basetextcolor;
					color: $basecolor;
					font-size: 13px;
					font-weight: 500;
					line-height: 130%;
					box-sizing: border-box;
					margin-bottom:8px;
				}
				div.docs {
					font-size: 13px;
					font-weight: 400;
					line-height: 130%;
				}
				@include maxwidth(1000){
					text-align:center;
				}
			}
			div.col.col2 {
				flex: 1 1 auto;
				margin-left: auto;
				display:flex;
				gap: 60px;
				@include maxwidth(1300){
					gap: 30px;
				}
				@include maxwidth(1000){
					display:block;
					width: 335px;
					max-width:100%;
					margin-inline:auto;
				}
				div.item {
					flex: 1 1 auto;
					h4 {
						font-size: 15px;
						font-weight: 500;
						line-height: 130%;
						padding: 0 0 8px;
						border-bottom: 1px solid $themecolor;
						margin-bottom:10px;
						min-width: 200px;
						@include maxwidth(1300){
							min-width: initial;
						}
						@include maxwidth(1000){
							font-size: 13px;
							background-color: $basetextcolor;
							color:$basecolor;
							height:40px;
							margin-bottom:0;
							display:flex;
							align-items:center;
							padding:0 13px 0 25px;
							margin-bottom:1px;
							border-bottom:none;
							&:after {
								@include before_as_image('../images/icon-expand1-color.svg', 14);
								margin-left:auto;
							}
						}
					}
					ul {
						margin-bottom:.75em;
						&:last-child {
							margin-bottom:0;
						}
						@include maxwidth(1000){
							display:block;
							//display:flex;
							//flex-direction:column;
							//gap: 1px;
							margin-bottom:0;
						}
						li {
							@include maxwidth(1000){
								margin-bottom:1px;
							}

							a {
								font-size: 13px;
								font-weight: 500;
								line-height: 180%;
								background: url(../images/icon-arrow-right-black.svg) left top .45em  / auto .65em no-repeat;
								padding-inline: 1.25em 0;
								white-space: nowrap;
								@include maxwidth(1000){
									display:flex;
									height:40px;
									background: url(../images/icon-arrow-right-white.svg) 10px center  / auto .65em no-repeat $basetextcolor;
									color: $basecolor;
									align-items:center;
									padding-inline:25px;
									@include button_hover_effect;
								}
								&:hover {
									opacity:.5;
								}
							}
						}
					}
					@include maxwidth(1000){
						h4 + ul {
							display:flex;
							//width:100%;
							gap: 0 1px;
							flex-wrap:wrap;
							li {
								flex: 0 0 calc((100% - 1px * 1) / 2);
								a {
									background-color: $themecolor;
									color:$themetextcolor;
									&:before {
										background: #555;
									}
									&:hover {
										opacity:1;
									}
								}
							}
						}
					}
				}
			}
			div.col.col2 {
			}
		}
	}
}


div#copyright {
	background-color:$basetextcolor;
	color:$basecolor;
	padding-block: 8px;
	div.container {
		font-size: 13px;
		@include container(1280, 20);
		text-align:right;
	}
}











body .mouse-stalker {
	display:none;
}
body.use_mousestalker {
	// デフォルトのマウスカーソルを非表示
	cursor: none !important;
	a { cursor: none !important; }

	.mouse-stalker {
		display:initial;
	}
	.mouse-stalker-a, .mouse-stalker-b, .mouse-stalker-text {
		position: fixed;
		border-radius: 50%;
		pointer-events: none; /* マウスイベントを透過させる */
		transform: translate(-50%, -50%); /* 中心に配置 */
		z-index: 9999;
	}

	.mouse-stalker-a {
		@include wh(6);
		background-color: $accentcolor;
	}

	.mouse-stalker-b {
		@include wh(100);

	background-color: rgb(173, 0, 45);
	//background-blend-mode: hard-light;

		clip-path:circle(0%);
		opacity:.4;
		transition: clip-path .75s;
	}

	.mouse-stalker-text {
		@include wh(100);
		transition: opacity .5s .25s;
		opacity: 0;
		color: #fff;
		white-space: nowrap;
		display:flex;
		align-items:center;
		justify-content:center;
		box-sizing: border-box;
		padding-top:30px;

	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.8px;

	}
}

// 固定ページ - 商品紹介
div.lineup_cat_banners {
	display:flex;
	flex-wrap:wrap;
	gap: 21px;
	margin-bottom:40px;
	div.item {
		flex: 0 0 calc((100% - 21px * 1) / 2);
		@include maxwidth(640){
			flex: 0 0 100%;
		}
		height:200px;
		a {
			display:block;
			@include wh(100%);
			position:relative;
			background-color:$basetextcolor;
			color:$basecolor;
			span.image {
				position:absolute;
				inset:0;
				img {
					@include obj100;
				}
				&:after {
					content:'';
					position:absolute;
					inset:0;
					background: rgba($basetextcolor, .6);
				}
			}
			span.caption {
				position:absolute;
				inset:0;
				display:flex;
				flex-direction:column;
				gap: 16px;
				@include flex_centering;
				padding-inline: 20px;
				span.main {
					font-size: 32px;
				}
				span.sub {
					font-size: 15px;
					line-height:1.3;
					//@include maxwidth(840){
					//	font-size: 12px;
					//}
				}
				&:before {
					@include before_as_image("../images/decoration-05.svg", 25, 25, block);
					position:absolute;
					inset:0 auto auto 0;
				}
				&:after {
					@include before_as_image("../images/icon-arrow-right-white.svg", 45, 45, block);
					background-size: 4px auto;
					background-color: $themecolor;
					position:absolute;
					inset:auto 0 0 auto;
				}
			}
		}
	}
}
div.lineup_cat_backlink {
	a {
		display:flex;
		height:45px;
		align-items:center;
		justify-content:center;
		font-size: 14px;
		background:url(../images/icon-arrow-right-white.svg) right 15px center / 6px auto no-repeat $basetextcolor;
		color:$basecolor;
	}
}




div.lineup_cat_detail {
	div.heading {
		margin-bottom:30px;
		div.default {
			h3 {
				margin-bottom:20px;
			}
			div.page_leadtext {
				margin-top:0;
				text-align:center;
			}
		}
	}
	div.detail {
		// &:after {
			// content:'';
			// display:block;
			// @include wh(5, 29);
			// margin-inline:auto;
			// background:url(../images/decoration-07.svg) center / contain no-repeat;
		// }
		margin-bottom:50px;
		div.row1 {
			display:flex;
			gap: 40px;
			margin-bottom:50px;
			@include maxwidth(880){
				flex-direction:column;
			}
			div.image {
				flex: 0 0 calc((100% - 40px) / 2);
				img {
				}
			}
			div.description {
				flex: 0 0 calc((100% - 40px) / 2);
				font-size: 14px;
				font-weight: 400;
				line-height: 200%;
			}
		}
		div.row2 {
			margin-bottom:96px;
			div.subterm_list {
				display:flex;
				gap: 20px;
				margin-bottom:30px;
				flex-wrap:wrap;
				div.item {
					flex: 0 0 calc((100% - 20px * 3) / 4);
					@include maxwidth(900){
						flex: 0 0 calc((100% - 20px * 1) / 2);
					}
					a {
						span { display:block; }
						span.image {
							display:block;
							aspect-ratio:1 / 1;
							margin-bottom:10px;
							img {
								@include obj100;
							}
						}
						span.caption {
							font-size: 14px;
							font-weight: 400;
							line-height: 130%;
						}
					}
				}
			}
		}
	}

	div.seisaku_scenes {
		margin-bottom:52px;
		div.default {
			margin-bottom:24px;
			h4 {
			}
		}
		div.body {
			div.items {
				display:flex;
				gap: 27px;
				margin-bottom: 30px;
				&:last-child { margin-bottom: 0; }
				@include maxwidth(800){
					flex-wrap:wrap;
				}
				div.item {
					flex: 0 0 calc((100% - 27px * 2) / 3);
					@include maxwidth(800){
						flex: 0 0 100%;
					}
					div.image {
						margin-bottom:15px;
						aspect-ratio: 329/250;
						img {
							@include obj100;
						}
					}
					div.text {
						font-size: 14px;
						line-height: 150%;
					}
				}
			}
		}
	}
	div.faq {
		div.default {
			margin-bottom:20px;
			h4 {
			}
		}
		div.faq_headline.headline {
			margin-bottom:20px;
			div.item {
				a.heading {
					span.terms {
						span.term {
						}
					}
					span.title {
					}
				}
				div.body {
					p {
					}
				}
			}
		}
		div.more.allview {
			text-align:right;
			a {
			}
		}
	}
}

div.common_termlink {
	body.page-lineup_child & { // page 商品紹介 下部のターム一覧
		margin-top:50px;
	}
	a { // ul外にあるaにも適用するのでこの位置
		white-space: nowrap;
		font-size: 15px;
		// background: url(../images/icon-arrow-right-white.svg) right 15px center / 5px auto no-repeat $basetextcolor;
		// color: $basecolor;
		background: url(../images/icon-arrow-right-black.svg) right 15px center / 5px auto no-repeat #f0efed;
		color:$basetextcolor;
		display:flex;
		padding: 0 30px 0 15px;
		align-items:center;
		justify-content:center;
		height:45px;
		box-sizing: border-box;
		transition: .5s;
		&:hover {
			background-color: mix(#f0efed, #000, .95);
		}
	}

	ul {
		margin-bottom: 5px;
		display:flex;
		gap: 5px;
		li {
			flex: 1 1 100%;
			//min-width: 200px;
			&.current {
				a {
					background: url(../images/icon-arrow-right-white.svg) right 15px center / 5px auto no-repeat $basetextcolor;
					color: $basecolor;
				}
			}
		}
		&.lv1 {
			li{
				//&:nth-child(2).current a {background-color: #e5b1a3;}
				//&:nth-child(3).current a {background-color: #6a8c7b;}
				//&:nth-child(4).current a {background-color: #cd412e;}
				//&:nth-child(5).current a {background-color: #6a528c;}
				//&:nth-child(6).current a {background-color: #4374bc;}
			}
		}
		&.lv2 {
			margin-top: 15px;
			gap: 15px;
			a {
				height:35px;
				border-radius:2px;
			}
		}
	}
	@include maxwidth(1000){
		ul {
			flex-wrap:wrap;
			li {
				flex: 0 0 auto;
			}
			&.lv1 {
				li {
					a {
						font-size: 13px;
						background-position: right 10px center;
						height: 35px;
					}
				}
			}
			&.lv2 {
				gap: 4px;
				li {
					a {
						font-size: 12px;
						background-position: right 10px center;
						height: 30px;
					}
				}
			}
		}
	}
	a.back {
	}
	&.products_termlink {
		ul {
			&.lv1 {
				li {
					&.current.hina a     {background-color: #e5b1a3;}
					&.current.gogatsu a  {background-color: #6a8c7b;}
					&.current.shogatsu a {background-color: #cd412e;}
					&.current.bon a      {background-color: #6a528c;}
					&.current.others a   {background-color: #4374bc;}
				}
			}
		}
	}
}
// 製品情報詳細ページ
div.product_detail {
	display:flex;
	gap:40px;
	margin-bottom:80px;
	& > * {
		flex: 0 0 calc((100% - 40px) / 2);
	}
	@include maxwidth(740){
		flex-direction:column-reverse;
		gap: 20px;
	}
	div.col1 {
		width: calc((100% - 40px) / 2);//スライダー動作のため幅が確定している必要があるため、自動計算されるflex幅以外にも指定が必要
		@include maxwidth(740){
			width: 500px;
			margin-inline:auto;
			max-width: 100%;
		}
		div.display {
			width: 100%;
			border: 1px solid #F0EFED;
			box-sizing: border-box;
			margin-bottom:10px;
			div.item {
				aspect-ratio: 1/1;
				img {
					@include obj100;
				}
			}
			button.slick-arrow {
				position:absolute;
				inset: 0 auto;
				z-index:1;
				@include wh(30);
				text-indent: 30px;
				white-space: nowrap;
				overflow: hidden;
				border:none;
				border-radius:15px;
				margin-block:auto;
				background: url(../images/icon-arrow-left-white.svg) center / 4px auto no-repeat $basetextcolor;
				&.slick-prev {
					left: 10px;
				}
				&.slick-next {
					background-image: url(../images/icon-arrow-right-white.svg);
					right: 10px;
				}
			}
		}
		div.dots {
			ul.slick-dots { // 通常 button の dots を customPaging で画像化している
				display:flex;
				flex-wrap:wrap;
				gap: 10px;
				li {
					flex: 0 0 calc((100% - 10px * 3) / 4);
					border: 1px solid #F0EFED;
					box-sizing: border-box;
					position:relative;
					aspect-ratio: 1 / 1;
					img {
						@include obj100;
					}
					&.slick-active {
						&:after {
							content:'';
							background: rgba(0, 0, 0, 0.50);
							position:absolute;
							inset:0;
						}
					}
				}
			}
		}
	}
	div.col2 {
		div.terms {
			display:flex;
			gap: 10px;
			flex-wrap:wrap;
			margin-bottom:30px;
			span {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				height:30px;
				padding:0 10px;
				font-size: 14px;
			}
			span.parent {
				&.hina     { background-color: #e5b1a3; }
				&.gogatsu  { background-color: #6a8c7b; }
				&.shogatsu { background-color: #cd412e; }
				&.bon      { background-color: #6a528c; }
				&.others   { background-color: #4374bc; }
				color:#fff;
			}
			span.child {
				background-color:$basetextcolor;
				color:$basecolor;
			}
		}
		div.heading {
			color: $themecolor;
			font-size: 32px;
			line-height: 120%;
			margin-bottom: 8px;
		}
		div.price {
			font-size: 24px;
			line-height: 120%;
			margin-bottom: 20px;
		}
		div.description {
			font-size: 14px;
			line-height: 200%;
			margin-bottom: 20px;
		}
		div.spec {
			margin-bottom:20px;
			table {
				width: 100%;
				tbody {
					tr {
						border-bottom: 1px solid $basecolor;
						th, td {
							padding: 12px 15px;
							font-size: 14px;
							line-height: 150%;
							box-sizing: border-box;
						}
						th {
							background: $themecolor;
							color:$themetextcolor;
							width: 150px;
						}
						td {
							background: #F8F7F6;
							color:$basetextcolor;
						}
					}
				}
			}
		}
		div.link {
			div { margin-bottom:8px; }
			a {
				display: flex;
				height:45px;
				padding: 0 15px;
				justify-content: center;
				align-items: center;
				background: url(../images/icon-arrow-right-white.svg) right 15px center / 5px auto no-repeat $basetextcolor;
				color:$basecolor;
			}
			div.shop {
				a {
				}
			}
			div.video {
				a {
				}
			}
		}
	}
}
div.product_related {
	margin-bottom:66px;
	div.heading {
		text-align:center;
		font-size: 20px;
		margin-bottom:40px;
		h4 {
		}
	}
	div.lineup_headline.headline {
		div.items {
			a {
				span.image {
				}
				span.title {
				}
			}
		}
	}
}
div.product_backlink {
	a {
		height:45px;
		display:flex;
		align-items:center;
		justify-content:center;
		font-size: 14px;
		background: url(../images/icon-arrow-left-white.svg) 15px center / 6px auto no-repeat $basetextcolor;
		color:$basecolor;
		margin-bottom:4px;
		position:relative;
		@include button_hover_effect(1);
	}
}

// 職人紹介ページ
div.shokunin_detail {
	div.profiles {
		display:flex;
		gap: clamp(0px, 2.778vw, 40px);
		margin-bottom:60px;
		@include maxwidth(800){
			display:block;
			& > *:not(:last-child) {
				margin-bottom: 40px;
			}
		}
		div.h {
			flex: 0 0 328px;
			div.cat {
				color: $themecolor;
				font-size: 14px;
				margin-bottom:18px;
				display:flex;
				align-items:center;
				gap: 5px;
				&:before, &:after {
					@include before_as_image('../images/icon-bracket-left-color.svg', 3, 12);
				}
				&:after {
					background-image:url(../images/icon-bracket-right-color.svg);
				}
			}
			h3.name {
				font-size: 24px;
				letter-spacing: 2.4px;
				margin-bottom:12px;
			}
			div.cert {
				font-size: 14px;
				line-height: 150%;
			}
		}
		div.b {
			flex: 1 1 auto;
			p {
				font-size: 14px;
				line-height: 200%;
				margin-bottom: 1em;
				&:last-child { margin-bottom: 0; } 
			}
		}
	}
	div.main_image {
		margin-bottom:45px;
		img {
		}
	}
	div.video {
		margin-bottom:55px;
		video {
			source {
			}
		}
	}
	div.leadtext {
		text-align:center;
		margin-bottom:40px;
		p {
			font-size: 14px;
			line-height: 200%;
		}
	}
	div.detail {
		div.section {
			margin-bottom:55px;
			h4.detail_h {
				font-size: 24px;
				letter-spacing: 2.4px;
				margin-bottom:25px;
				line-height:1.4;
			}
			div.detail_b {
				margin-bottom:55px;
				p {
					font-size: 14px;
					line-height: 200%;
					margin-bottom: 1em;
					&:last-child { margin-bottom: 0; }
				}
			}
			div.detail_img {
				display:flex;
				gap: 10px;
				@include maxwidth(800){
					flex-direction: column !important;
				}
				& > div {
					flex: 0 0 calc((100% - 10px) / 2);
					@include maxwidth(800){
						flex: 0 0 auto;
					}
					span.image {
						display:block;
						img { @include obj100; }
					}
					&.col1 {
						span.image {
							aspect-ratio: 510 / 326;
						}
					}
					&.col2 {
						display:flex;
						flex-wrap:wrap;
						gap: 10px;
						span.image {
							aspect-ratio: 255 / 158;
							flex: 0 0 calc((100% - 10px) / 2);
						}
					}
				}
			}
			&.section2 {
				div.detail_img {
					flex-direction: row-reverse;
				}
			}
		}
	}
	div.product_link {
		margin-bottom:60px;
		a {
			display:block;
			height:200px;
			position:relative;
			background-color:$basetextcolor;
			color: $basecolor;
			span.image {
				position:absolute;
				inset:0;
				opacity:.45;
				img {
					@include obj100;
				}
			}
			span.caption {
				font-size: 24px;
				position:absolute;
				inset:0;
				display:flex;
				align-items:center;
				justify-content:center;
				&:before {
					@include before_as_image('../images/decoration-05.svg', 25);
					position:absolute;
					inset: 0 auto auto 0;
				}
				&:after {
					content:'';
					display:block;
					background: url(../images/icon-arrow-right-white.svg) center / 5px auto no-repeat $themecolor;
					@include wh(45);
					position:absolute;
					inset: auto 0 0 auto;
				}
			}
			@include hover_effect_image_banner;
		}
	}
	div.siblings_link {
		h3 {
			font-size: 24px;
			letter-spacing: 2.4px;
			margin-bottom:40px;
			text-align:center;
		}
		div.items {
			display:flex;
			gap: 20px;
			flex-wrap:wrap;
			@include maxwidth(700){
				flex-direction:column;
				gap: 10px;
			}
			div.item {
				flex: 0 0 calc((100% - 20px) / 2);
				height: 150px;
				@include maxwidth(700){
					flex: 0 0 auto;
				}
				a {
					display:flex;
					@include wh(100%);
					flex-direction: column;
					justify-content:center;
					background-color: $basetextcolor;
					color:$basecolor;
					padding-inline: 35px 90px;
					box-sizing: border-box;
					position:relative;
					span.cat {
						font-size: 14px;
						margin-bottom:16px;
						display:flex;
						align-items:center;
						gap: 5px;
						&:before, &:after {
							@include before_as_image('../images/icon-bracket-left-white.svg', 3, 12);
						}
						&:after {
							background-image:url(../images/icon-bracket-right-white.svg);
						}
					}
					span.name {
						font-size: 24px;
						letter-spacing: 2.4px;
						margin-bottom:10px;
						line-height:1.2;
					}
					span.cert {
						font-size: 14px;
						line-height:1.4;
					}
					&:after {
						content:'';
						@include wh(30);
						border-radius:30px;
						background: url(../images/icon-arrow-right-white.svg) center / 5px auto no-repeat $themecolor;
						position:absolute;
						inset: 0 40px 0 auto;
						margin-block: auto;
					}
					@include hover_effect_image_banner;
				}
			}
		}
	}
}

// 職人一覧（ショートコード）
div.shokunin_list {
	margin: 100px 0 0;
	div.item {
		margin-bottom: 60px;
		&:last-child { margin-bottom: 0; }
		display:flex;
		&:nth-child(2n) a {
			flex-direction: row-reverse !important;
		}
		position:relative;
		&:before {
			content:'';
			display:block;
			position:absolute;
			inset: 0 40px 0 0;
			background-color: #f7f6f4;
		}
		&:nth-child(2n) {
			&:before {
				inset: 0 0 0 40px;
			}
			a {
				flex-direction: row-reverse !important;
			}
		}
		a {
			display:flex;
			width: 100%;
			text-decoration:none;
			position:relative;
			& > span {
				flex: 0 0 50%;
			}
			span.col1 {
				& > span { display:block; }
				display:flex;
				flex-direction: column;
				align-items:center;
				justify-content:center;
				padding: 20px;
				box-sizing: border-box;
				span.cat {
					color: $themecolor;
					font-size: 14px;
					margin-bottom:18px;
					display:flex;
					align-items:center;
					gap: 5px;
					&:before, &:after {
						@include before_as_image('../images/icon-bracket-left-color.svg', 3, 12);
					}
					&:after {
						background-image:url(../images/icon-bracket-right-color.svg);
					}
				}
				span.name {
					font-size: 24px;
					letter-spacing: 2.4px;
					margin-bottom:12px;
				}
				span.cert {
					font-size: 14px;
					line-height: 150%;
					margin-bottom:30px;
				}
				&:after {
					content:'';
					@include wh(30);
					background: url(../images/icon-arrow-right-white.svg) center / 5px auto no-repeat $basetextcolor;
					border-radius: 30px;
					transition: .25s;
				}
			}
			span.col2 {
				//flex: 0 0 calc(50% - 40px);
				span.image {
					display:block;
					aspect-ratio: 520 / 322;
					transform: translateY(-20px);
					img {
						@include obj100;
					}
				}
			}
			&:hover {
				span.col1 {
					&:after {
						opacity:.5;
					}
				}
			}
		}
	}
	@include maxwidth(800){
		margin: 50px 0;
		div.item{
			display:block;
			margin-bottom: 30px;
			&:before {
				inset: 0 !important;
			}
			a {
				display:block;
				span.col1 {
					padding: 30px 15px;
				}
				span.col2 {
					margin-top:40px;
					span.image {
						transform: translateY(0);
					}
				}
			}
		}
	}
}

div.lineup_headline.headline,
div.products_headline.headline {
	display:flex;
	gap: 20px;
	flex-wrap:wrap;
	div.item {
		flex: 0 0 calc((100% - 20px * 3) / 4);
		a {
			display:block;
			span { display:block; }
			span.image {
				aspect-ratio:1 / 1;
				border: 1px solid #F0EFED;
				box-sizing: border-box;
				margin-bottom:10px;
				img {
					@include obj100;
				}
			}
			span.title {
				font-size: 15px;
				line-height: 130%;
			}
		}
		@include maxwidth(800){
			flex: 0 0 calc((100% - 20px * 2) / 3);
			a {
				span.title {
					font-size: 13px;
				}
			}
		}
		@include maxwidth(600){
			flex: 0 0 calc((100% - 20px * 1) / 2);
		}
	}
}

div.faq_headline.headline {
	div.item {
		margin-bottom:2px;
		a.heading {
			background: #F8F7F6;
			font-size: 14px;
			display:flex;
			padding:20px 40px 21px 20px;
			gap: 10px;
			line-height: 1.4;
			position:relative;
			@include maxwidth(800){
				flex-wrap:wrap;
				gap: 5px;
			}
			span.terms {
				@include maxwidth(800){
					flex: 0 0 100%;
				}
				color: $themecolor;
				display:flex;
				gap: 5px;
				flex: 0 0 7em;
				span.term {
					&:before { content:'#'; margin-right:.5em; }
				}
			}
			span.title {
				flex: 1 1 auto;
				&:before { content:'Q.'; margin-right: .25em; }
			}
			&:after {
				flex: 0 0 8px;
				align-self: center;
				@include before_as_image('../images/icon-arrow-down-black.svg', 8);
				transition: .5s;
				//@include maxwidth(800){
					position:absolute;
					inset:0 20px 0 auto;
					margin-block: auto;
				//}
			}
			&.open {
				background-color: mix($themecolor, $themetextcolor, .35);
				&:after {
					transform: rotateX(180deg);
				}
			}
		}
		div.body {
			font-size: 14px;
			line-height:1.7;
			padding: 20px 0;
			p {
			}
		}
	}
}


div.headline.topics_headline {
	div.item {
		a {
			display:flex;
			padding: 20px 30px 20px 15px;
			font-size: 14px;
			line-height:1.4;
			border-bottom: 1px solid mix($themetextcolor, $themecolor, .854);
			background: url(../images/icon-arrow-right-black.svg) right 15px center / 5px auto no-repeat;
			position:relative;
			span.date {
				margin-right:55px;
			}
			span.terms {
				width: 6em;
				margin-right:35px;
				display:flex;
				gap: 10px;
				color:$themecolor;
				span.term {
					white-space: nowrap;
					&:before { content:'#'; margin-right:.5em;}
				}
			}
			span.title {
			}
			&:before {
				content:'';
				display:block;
				height:0;
				position:absolute;
				inset: auto 0 0 0;
				background-color:rgba($themecolor, .25);
				transition: .5s;
			}
			&:hover:before {
				height: 7px;
			}
			@include maxwidth(700){
				flex-wrap:wrap;
				gap: 5px 0;
				padding: 13px 30px 15px 0;
				span.date {
					margin-right: 20px;
				}
				span.terms {
				}
				span.title {
					flex: 0 0 100%;
				}
			}
		}
	}
}


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;
			}
		}
	}
}

// ページャー
.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);
        border-radius: 5px;
    }
    .current {
        color: $themetextcolor;
        background-color: $basetextcolor;
    }
}