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

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


.textanimation {
	&.l {
		display:block;
	}
	& span {
		display: inline-block;
	}
	& > span {
		overflow: hidden;
	}
	& > span > span {
		transform: translateY(100%) rotateZ(-90deg);
		transition: .25s;
	}
	&.effect[data-done="1"] > span > span {
		// animation: showTextFromBottom 0.5s forwards;
		transform: translateY(0px);
	}
}

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

@mixin wh($w:null, $h:$w) {
	@if $w { width: add-px($w); }
	@if $h { height: add-px($h); }
}

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

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


div#wrapper { }
header { }

div#header {
	div.container {
		div.sitename {
			h1 {
				a {
					z-index:1;
					position:absolute;
					inset: 20px auto auto clamp(20px, 3.47vw, 50px);
					width: clamp(120px,23.60vw,170px);
					aspect-ratio:1 / 1;
					background: $basecolor;
					color:$basetextcolor;
					display:flex;
					@include flex_centering;
					flex-direction: column;
					gap: 7px;
					span.title {
						@include ff_en;
						font-size: clamp(17px,2.72vw ,20px);
						font-weight: 500;
					}
					span.place {
						background: #000;
						font-size: 11px;
						font-weight: 500;
						padding-bottom:1px;
						width:115px;;
						width:clamp(100px, 15.98vw, 115px);
						height:19px;
						@include flex_centering;
					}
				}
			}
		}
		div.sitenavbutton {
			z-index:100;
			position:absolute;
			position:fixed;
			inset: 20px clamp(20px, 3.47vw, 50px) auto auto;

			transition: .25s;
			body.header_scrollout & {
				top: -25px;
			}

			& > * { margin-bottom:20px; }
			div.button.button_parentcomp {
				a {
					img {
					}
				}
			}
			div.w {
				display:flex;
				justify-content:flex-end;
				gap: 10px;
				div#gnavToggleWrapper {
					a#gnavToggle {
						display:block;
						@include wh(60);
						background-color:$themecolor;
						transition: .25s;
						&:hover {
							background-color: $accentcolor;
						}
						position:relative;
						span.b {
							display:block;
							width: 41.67%;
							height:1.5px;
							background-color: $themetextcolor;
							position:absolute;
							inset: 0;
							margin:auto;
							&.b1 { transform: translateY(-8px); }
							&.b2 { }
							&.b3 { transform: translateY(8px); }
						}
					}
				}
				div.button.button_instagram {
					a {
						display:flex;
						flex-direction: column;
						@include flex_centering;
						@include wh(60);
						gap: 2px;
						background-color:$themecolor;
						position:relative;
						&:before {
							content:'';
							position:absolute;
							inset:0;
							background: linear-gradient(to top right,
							rgba(247, 207, 0, 0.85),
							rgba(246, 37, 2, 0.85) 45%,
							rgba(182, 47, 82, 0.85) 75%,
							rgba(113, 58, 166, 0.85));
							opacity:0;
							transition: .25s;
							z-index:0;
						}
						&:hover {
							background-color:transparent;
							&:before {
								opacity:1;
							}
						}
						span.icon, span.caption {
							position:relative;
						}
						span.icon {
							@include wh(18);
							img {
								@include obj100(contain);
							}
						}
						span.caption {
							font-size: 10px;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
}

div#gnav {
	nav {
		ul {
			li {
				a {
				}
				ul {
					li {
						a {
						}
					}
				}
			}
		}
	}
}
aside { }

// ==========================================================================
// ベーススタイル（ライブハウス・ジャズ風）
// ==========================================================================
#gnav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(18, 18, 20, 0.95);
	backdrop-filter: blur(8px);
	z-index: 999;

	opacity: 0;
	visibility: hidden;
	transform: translateX(100%);
	transition: all 0.4s ease-in-out;
	body.menu_open & {
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
	}

	nav {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		width: 100%;
		max-width: 400px; // メニューの最大幅
		text-align: center;
	}

	li {
		position: relative;
		margin-bottom: 1.5rem;
		a{}
		&:has(ul) > a::after {
			content: '▼';
			font-size: 0.7rem;
			margin-left: 8px;
			display: inline-block;
			transition: transform 0.3s ease;
			color: #888;
		}

		&.child_open {
			> a::after {
				transform: rotate(180deg);
				color: $accentcolor2;
			}
			> ul {
				max-height: 500px; // メニューの中身に応じて適宜調整
				opacity: 1;
				margin-top: 10px;
				padding: 10px 0;
			}
		}

		// サブメニューの初期状態（閉じた状態）
		ul {
			max-height: 0;
			overflow: hidden;
			opacity: 0;
			transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
			padding-left: 0;
			margin-top: 0;
			background-color: rgba(255, 255, 255, 0.03); // ほんのり背景を変える
			border-radius: 4px;

			// サブメニュー内のリンクスタイル
			a {
				font-size: 0.95rem;
				color: #bbb;
			}
		}
	}

	a {
		display: block;
		color: #f5f5f7;
		text-decoration: none;
		font-size: 1.1rem;
		letter-spacing: 0.15em;
		padding: 10px;
		transition: color 0.3s ease;
		@include ff_en;
		&:hover {
			color: $accentcolor2;
		}
	}
}


div#contactButtonWrapper {
	div#contactButton {
		z-index:10;
		position:fixed;
		inset:0 0 0 auto;
		display:flex;
		flex-direction:column;
		justify-content:center;
		pointer-events: none;
		@include maxwidth(540){
			inset:auto 0 0 0;
			flex-direction:row;
		}
		div.schedulecal {
			pointer-events: auto;
			width: 60px;
			//height:250px;
			flex: 0 0 250px;
			@include maxwidth(540){
				flex-basis: 100%;
				height: 50px;
			}
			a {
				letter-spacing: .1em;
				display:flex;
				@include wh(100%);
				flex-direction:column;
				@include maxwidth(540){
					flex-direction:row;
				}
				gap: 10px;
				background-color: $basecolor;
				color: $basetextcolor;
				font-size: 14px;
				font-weight: 500;
				flex-direction:column;
				@include flex_centering;
				transition: .25s;
				&:hover {
					background-color:$accentcolor;
					box-shadow: inset 0px 0px 30px 0 rgba($themecolor,.5);
				}
				span.l {
					writing-mode: vertical-rl;
					@include maxwidth(540){
						writing-mode: initial;
					}
				}
				&:after {
					@include before_as_image('../images/icon-arrow-right-black.svg', 16);
					border-radius:16px;
					background-size: 8px auto;
					background-color: currentcolor;
					transform:rotateZ(90deg);
					@include maxwidth(540){
						transform: rotateZ(0deg);
					}
				}
			}
		}
	}
}

div#mainVisual {
	position:relative;
	div.container {
		height:100dvh;
		position:relative;
		div.video {
			height:100%;
			video {
				@include obj100(cover);
				source {
				}
			}
		}
		div.overlay {
			position:absolute;
			inset:0;
			margin:auto;
			display:flex;
			@include flex_centering;
			pointer-events: none;
			p.text {
				pointer-events: auto;
				display:flex;
				text-align:center;
				flex-direction:column;
				//font-size: clamp(16px, 2.22vw, 32px);
				font-size: clamp(19px, 3.33vw, 48px);
				font-weight: 500;
				gap: 10px;
				line-height:1.2;
			}
		}
		div.whatsnew {
			position:absolute;
			z-index:1;
			inset: auto 120px 0;
			@include maxwidth(540){
				inset-inline: 20px;
			}
			h2 {
				@include ff_en;
				font-size: 16px;
				font-weight: 300;
			}
			div.newstopics_headline.headline {
				div.item {
					a {
						padding: 15px 0;
						&:after {
							display:none;
						}
					}
				}
				button.slick-arrow {
					position:absolute;
					z-index:1;
					inset:20px 0 auto auto;
					background: url(../images/icon-arrow-right-white.svg) center / 8px auto no-repeat $themecolor;
					border:none;
					@include wh(16);
					text-indent:1000px;
					overflow: hidden;
					white-space: nowrap;
					border-radius:16px;
					cursor: pointer;
					&.slick-prev {
						right: 83px;
						transform:rotateZ(180deg);
					}
					&.slick-next {
						right: 0;
					}
				}
			}
			div.slidepos {
				position:absolute;
				inset:37px 30px auto auto;
				@include ff_en;
				font-size: 14px;
				font-weight: 300;
			}
		}
	}
}
div.headerscroll {
	position:absolute;
	inset: auto auto -80px 40px;
	writing-mode: vertical-rl;
	@include ff_en;
	z-index:1;
	display:flex;
	gap: 20px;
	align-items:center;
	&:after {
		height: 180px;
		flex: 1 1 auto;
		content:'';
		display:inline-block;
		width:1px;
		background: linear-gradient(180deg, #A2A2A2 0%, #0E172A 100%);
	}
	@include maxwidth(540){
		display:none;
	}
}

div#subpageHeadingVisual {
	div.container {
		height:clamp(160px, 29.16vw, 210px);
		img {
			@include obj100;;
		}
	}
}

main { }

div#content { }

div#subpageTopicPath {
	div.container {
		@include container(1000, 20);
		padding-block:20px;
		font-size: 13px;
		ul {
			display:block;
			li {
				display:inline;
				&:before {
					content:'-';
					margin-inline: .35em .65em;
				}
				&:first-child:before {
					display:none;
				}
			}
		}
	}
}
div#subpageHeading {
	padding: 40px 10px 80px;
	div.container {
		div.heading.common_heading {
			text-align:center;
			h2 {
				span.ja {
				}
				span.en {
				}
			}
		}
	}
}
div#subpageContent {
	padding: 0 0 100px;
	div.container {
		@include container(1000, 100);
		@include maxwidth(980){
			margin-left: 40px;
			margin-right: 80px;
		}
		@include maxwidth(540){
			width:auto;
			margin-inline:20px;
		}
		.default {
			@include contentdefault;
			@include eachcss;
		}
	}
}

section { }

div.asidelabel {
	position:absolute;
	inset: 90px auto -40px 40px;
	writing-mode: vertical-rl;
	@include ff_en;
	z-index:1;
	display:flex;
	gap: 20px;
	align-items:center;
	&:after {
		flex: 1 1 auto;
		content:'';
		display:inline-block;
		width:1px;
		background: linear-gradient(180deg,
		#A2A2A2 0%, #0E172A 100% );
	}
	@include maxwidth(540){
		display:none;
	}
}

div.heading.common_heading {
	h2 {
		& > span { display:block; }
		span.ja {
			font-size: clamp(10px, 0.83vw, 12px);
			font-weight: 400;
			margin-bottom:10px;
		}
		span.en {
			font-family: Orbitron;
			font-size: clamp(20px, 2.08vw, 30px);
			font-weight: 300;
			line-height: 130%;
		}
	}
}


div#toppageAboutus {
	position:relative;
	padding-block:210px 180px;
	div.bgimage {
		position:absolute;
		inset:0;
		img {
			@include obj100();
		}
		&:before {
			content:'';
			position:absolute;
			inset:0;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 24, 150, 0.25) 100%);
			backdrop-filter: blur(2px);
		}
	}
	div.container {
		@include container(1140, 100);
		@include maxwidth(540){
			width:auto;
			margin-inline:20px;
		}
		display:flex;
		gap: 8.77%;
		@include maxwidth(1160){
			display:block;
			div.visual {
				width:100%;
				max-width: 640px;
				margin-bottom:5vw;
			}
		}
		div.visual {
			flex: 0 0 620px;
			min-width:0;
			div.item {
				aspect-ratio: 620/420;
				img {
					@include obj100;
				}
			}
			ul.slick-dots {
				display: flex;
				justify-content: center;
				margin-top:20px;
				list-style-type: none;
				gap: 15px;
				li {
					button {
						cursor: pointer;
						display: block;
						width: 10px;
						height: 10px;
						padding: 0;
						border: none;
						background-color: mix($basecolor, $basetextcolor, .3);
						text-indent: -9999px;
					}
					&.slick-active button {
						background-color: $accentcolor;
					}
				}
			}
		}
		div.body {
			flex: 1 1 420px;
			div.heading.common_heading {
				margin-bottom:20px;
			}
			div.docs {
				div.text.common_text {
					font-size: 15px;
					font-weight: 500;
					line-height: 200%;
					margin-bottom:30px;;
					p {
						margin-block: 30px;
						&:first-child { margin-top: 0; }
						&:last-child { margin-bottom: 0; }
					}
				}
				div.btnarea {
					a.btn.common_btn {
					}
				}
			}
		}
	}
}

a.btn.common_btn {
	display:inline-flex;
	align-items: center;
	gap: 20px;
	&:before {
		flex: 0 0 42px;
		@include before_as_image('../images/icon-arrow-right-white.svg', 42);
		border-radius:42px;
		background-color: $themecolor;
		background-size: 9px auto;
		transition: .2s;
	}
	font-family: Orbitron;
	font-size: 15px;
	font-weight: 700;
	position:relative;
	&:after {
		content:'';
		height:1px;
		position:absolute;
		background:linear-gradient(90deg, $basetextcolor 0%, rgba(0,0,0,0) 100%);
		inset: auto 100% 6px 0;
		transition: .2s;
	}
	&:hover {
		&:before {
			background-color: $accentcolor;
			background-size: 14px auto;
		}
		&:after {
			inset:auto -40px 6px 0px;
		}
	}
}

div.events_headline.headline {
	// デザイン上ではスライドになっていますが
	// スライドにすると2つ目以降の注目度が下がってしまうため
	// 縦に列挙にしています
	display:flex;
	div.item {
		@include maxwidth(760){
			margin-bottom:20px;
		}
		& > a:hover {
			div.visual {
				img {
					transform:scale(1.2);
				}
			}
		}
		& > .w { //divまたはa
			display:flex;
			gap: 10px;
			@include maxwidth(760){
				display:block;
			}
			div.visual {
				aspect-ratio:1 / 1;
				background-color:#000;
				overflow:hidden;
				@include maxwidth(760){
					aspect-ratio:auto;
					height:400px;
					margin-bottom:10px;
				}
				img {
					@include obj100(contain);
					transition: .25s;
				}
			}
			div.docs {
				flex: 1 1 auto;
				background-color:$basecolor;
				color:$basetextcolor;
				div.meta {
					display:flex;
					gap: 10px 20px;
					align-items:center;
					flex-wrap:wrap;
					margin-bottom: 5px;
					div.time {
						font-size: 15px;
						font-weight: 400;
						display:flex;
						gap: 10px;
						span.l {
							@include ff_en;
						}
						span.c {
						}
					}
					div.terms {
						display:flex;
						span.term {
							@include ff_en;
							font-size: 10px;
							font-weight: 500;
							background-color: $accentcolor;
							color:$accenttextcolor;
							height:20px;
							padding-inline: 6px;
							display: flex;
							align-items:center;
						}
					}
				}
				div.title {
					font-size: 24px;
					font-weight: 500;
					line-height: 120%;
					margin-bottom:10px;
				}
				div.detail {
					margin-bottom:20px;
					dl {
						display:flex;
						flex-direction:column;
						gap: 1px;
						div {
							display:flex;
							gap: 15px;
							dt, dd {
								padding: 1px 0 2px;
							}
							dt {
								flex: 0 0 115px;
								background-color: #000;
								color: #fff;
								font-size: 13px;
								font-weight: 500;
								line-height: 150%;
								text-align:center;
								display:flex;
								align-items:center;
								justify-content:center;
							}
							dd {
								font-size: 15px;
								font-weight: 400;
								line-height: 120%;
							}
						}
					}
				}
				div.more {
					a {
					}
				}
			}
		}
	}
}

div#toppageSchedule {
	background: linear-gradient(180deg, #000 0%, rgba(0, 24, 150, 0.25) 100%);
	padding-block: 80px 120px;
	position:relative;
	div.container {
		@include container(1140, 100);
		@include maxwidth(540){
			width:auto;
			margin-inline:20px;
		}
		div.heading.common_heading {
			text-align:center;
			margin-bottom:20px;
		}
		div.events_headline.headline {
			margin-bottom:80px;
			flex-direction:column;
			gap: 10px;
			div.item {
				& > .w {
					div.visual {
						flex: 0 0 270px;
						img {
						}
					}
					div.docs {
						//padding:40px 60px;
						padding:clamp(0px, 2.78vw,40px) clamp(0px, 4.17vw, 60px);
						div.meta {
							div.time {
								span.l {
								}
								span.c {
								}
							}
							div.terms {
								span.term {
								}
							}
						}
						div.title {
						}
						div.detail {
							dl {
								div {
									dt, dd {
									}
									dt {
									}
									dd {
									}
								}
							}
						}
						div.more {
							a {
							}
						}
					}
				}
			}
			.noposts{
				margin-top: 20px;
				padding: 3em 2em;
				background-color: #000;
				text-align: center;
				border:0.5px solid mix($basecolor, $basetextcolor, .85);
			}
		}
		div.calendar {
			//display:flex;
			//@include flex_centering;
			//text-align:center;
			width:1140px;
			max-width:100%;
			//aspect-ratio: 16/9;
			aspect-ratio: 800/600;//埋め込みコードに記載の縦横比
			//background-color:#808080;
			iframe {
				@include wh(100%);
			}
		}
	}
}

div.termlist {
	margin-bottom:20px;
	div#subpageContent & { margin-bottom:35px;}
	ul {
		display:flex;
		gap: 5px;
		flex-wrap:wrap;
		li {
			flex: 0 0 174px;
			height: 45px;
			&:not(:first-child) {
				@include ff_en;
			}
			a {
				@include wh(100%);
				display:flex;
				@include flex_centering;
				background-color: #000;
				color: #fff;
				font-size: 14px;
				font-weight: 500;
				&.current {
					background-color:$themecolor;
					color:$themetextcolor;
				}
				transition: .25s;
				&:hover {
					//background: radial-gradient(rgba($accentcolor,.5), $themecolor);
					background-color:$accentcolor;
					box-shadow: inset 0 0 20px 0 $themecolor;
				}
			}
		}
	}
}

div#toppageInformation {
	position:relative;
}

div#toppageEvents,
div#toppageNewstopics {
	div.container {
		div.more {
			position:absolute;
			inset:0 0 auto auto;
			@include maxwidth(700){
				position:relative;
				inset:auto;
				margin-top:20px;
			}
			a {
			}
		}
	}
}

div#toppageEvents {
	padding-block:100px 120px;
	background-color: $basecolor;
	color:$basetextcolor;
	div.container {
		@include container(1140, 100);
		@include maxwidth(540){
			width:auto;
			margin-inline:20px;
		}
		position:relative;
		div.heading.common_heading {
			margin-bottom:20px;
		}
		div.body {
			div.events_termlist.termlist {
				margin-bottom:35px;
				ul {
					li {
						a {
						}
					}
				}
			}
			div.events_headline.headline {
				div.item {
					& > .w {
						div.visual {
							img {
							}
						}
						div.docs {
							div.meta {
								div.time {
									span.l {
									}
									span.c {
									}
								}
								div.terms {
									span.term.session {
									}
								}
							}
							div.title {
							}
							div.detail {
							}
							div.more {
							}
						}
					}
				}
			}
		}
		div.more {
			a {
			}
		}
	}
}

div#toppageEvents div.events_headline.headline,
div#subpageContent div.events_headline.headline {
	gap: 20px;
	flex-wrap:wrap;
	div.item {
		flex: 0 0 calc((100% - 20px * 3) / 4);
		@include maxwidth(1000){
			flex-basis: calc((100% - 20px * 1) / 2);
		}
		@include maxwidth(450){
			flex-basis: 100%;
		}
		& > .w {
			flex-direction:column;
			div.visual {
				@include maxwidth(1000){
					height:200px;
				}
				img {
				}
			}
			div.docs {
				flex-direction:column;
				div.meta {
					div.time {
						span.l {
						}
						span.c {
						}
					}
					div.terms {
						span.term.session {
						}
					}
				}
				div.title {
					font-size: 20px;
				}
				div.detail {
					display:none;
				}
				div.more {
					display:none;
				}
			}
		}
	}
}

div.newstopics_headline.headline {
	div.item {
		a {
			padding: clamp(15px, 2.08vw, 30px) clamp(10px, 2.08vw, 30px);
			display:flex;
			gap: 30px;
			position:relative;
			transition: .5s .25s;
			@include maxwidth(800){
				display:block;
			}
			span.docs {
				display:flex;
				gap: 25px;
				span.terms {
					span.term {
						padding: 0 8px;
						height:24px;
						@include ff_en;
						font-size: 12px;
						font-weight: 500;
						display:flex;
						align-items:center;
						background-color:$accentcolor;
						color:$accenttextcolor;
					}
				}
				span.date {
				}
			}
			span.title {
			}
			span.date, span.title {
				font-size: 15px;
				font-weight: 400;
				line-height: 150%;
			}
			&:after {
				@include before_as_image('../images/icon-arrow-right-white.svg', 9);
				align-self: center;
				margin-left: auto;
			}
			&:before {
				content:'';
				position:absolute;
				inset: auto 100% 0 0;
				height:1px;
				background:linear-gradient(90deg, $accentcolor 0%, $accenttextcolor 100%);
				transition: .25s;
			}
			&:hover {
				background-color: rgba($accentcolor, .2);
				&:before {
					inset: auto 0 0 0;
				}
			}
		}
	}
}

div#toppageNewstopics {
	padding-block: 0 120px;
	div.container {
		@include container(1140, 100);
		@include maxwidth(540){
			width:auto;
			margin-inline:20px;
		}
		position:relative;
		div.heading.common_heading {
			margin-bottom:20px;
			h2 {
				span.ja {
				}
				span.en {
				}
			}
		}
		div.body {
			div.newstopics_termlist.termlist {
				margin-bottom:30px;
				li {
					a.current {
					}
					a {
					}
				}
			}
			div.newstopics_headline.headline {
				div.item {
					border-bottom: 1px solid #353A4D;
					a {
						span.docs {
							span.terms {
								span.term {
								}
							}
							span.date {
							}
						}
						span.title {
						}
						span.date, span.title {
						}
					}
				}
			}
		}
		div.more {
			a {
			}
		}
	}
}

div#toppageService {
	position:relative;
	padding:60px 0;
	div.bgimage {
		position:absolute;
		inset:0;
		img {
			@include obj100;
		}
		&:after {
			content:'';
			position:absolute;
			inset:0;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 24, 150, 0.25) 100%);
			backdrop-filter: blur(2px);
		}
	}
	div.container {
		position:relative;
		@include container(1280, 100);
		@include maxwidth(540){
			width:auto;
			margin-inline:20px;
		}
		display:flex;
		flex-direction:column;
		gap:10px;
		div.item {
			&.item1 { }
			&.item2 { }
			a {
				display:flex;
				height:230px;
				position:relative;
				padding: 0 clamp(0px, 4.86vw, 70px);
				align-items:center;
				justify-content:space-between;
				gap: 20px;
				div.image {
					position:absolute;
					inset:0;
					img {
						@include obj100;
					}
					&:after {
						content:'';
						display:block;
						inset:0;
						position:absolute;
						background-color: rgba(0, 0, 0, 0.65);
						transition: .15s .25s;
					}
				}
				div.heading.common_heading {
					position:relative;
					h2 {
						span.ja {
						}
						span.en {
						}
					}
				}
				&:after {
					position:relative;
					flex: 0 0 42px;
					@include before_as_image('../images/icon-arrow-right-white.svg', 42);
					border-radius:42px;
					background-size: 10px auto;
					background-color:$themecolor;
					transition: .25s;
				}
				&:hover {
					div.image:after {
						opacity:0;
					}
					&:after {
						background-color:$accentcolor;
					}
				}
			}
		}
	}
}

div#toppageAccess {
	padding-block: 80px 100px;
	position:relative;
	div.container {
		@include container(1140, 100);
		@include maxwidth(540){
			width:auto;
			margin-inline:20px;
		}
		div.heading.common_heading {
			margin-bottom:20px;
			text-align:center;
		}
		div.body {
			display:flex;
			& > * {
				flex: 0 0 50%;
				min-width:0;
				min-height:0;
			}
			@include maxwidth(980){
				display:block;
				div.visual {
					height:400px;
				}
			}
			div.visual {
				//position:relative;
				iframe {
					width: 100% !important;
					height:100% !important;
					//position:absolute;
					//inset:0;
					//googleマップ
					//width: auto !important;
					//height:auto !important;
				}
			}
			div.docs {
				padding: clamp(16px, 5.56vw, 80px) clamp(12px, 4.17vw, 60px);
				box-sizing: border-box;
				font-size: 14px;
				font-weight: 400;
				line-height: 150%;
				align-self: center;
				background-color:#000;
				color:#fff;
				p {
					margin-block: 21px;
					&:first-child { margin-top: 0;}
					&:last-child { margin-bottom: 0;}
				}
			}
		}
	}
}

div#contentFooter {
	div#ContentFooterContact {
		position:relative;
		padding-block:50px;
		div.bgimage {
			position:absolute;
			inset:0;
			img {
				@include obj100;
			}
			&:after {
				content:'';
				position:absolute;
				inset:0;
				background-color: rgba(0, 0, 0, 0.65);
			}
		}
		div.container {
			position:relative;
			@include container(1000, 100);
			@include maxwidth(540){
				width:auto;
				margin-inline:20px;
			}
			div.heading.common_heading {
				text-align:center;
				margin-bottom:20px;
				h2 {
					span.ja {
					}
					span.en {
					}
				}
			}
			div.body {
				display:flex;
				flex-direction:column;
				gap: 14px;
				& > div {
				}
				a {
					height:132px;
					display:flex;
					justify-content:center;
					align-items:center;
					transition: .25s;
					@include maxwidth(540){
						min-height: 100px;
						height: auto;
					}
				}
				div.telButton {
					a {
						flex-direction:column;
						gap: 10px;
						background-color:$themecolor;
						color:$themetextcolor;
						padding: 0.5em 1em;
						box-sizing: border-box;
						@include maxwidth(540){
							padding: 1.5em 1em;
						}
						span.tel {
							display:flex;
							gap: 4px;
							align-items:center;
							span.icon {
								flex: 0 0 23px;
								@include wh(23);
								img {
									@include obj100(contain);
								}
							}
							span.caption {
								font-size: 30px;
								font-weight: 400;
								@include maxwidth(540){
									font-size: 25px;
								}
							}
						}
						span.teltime {
							font-size: 14px;
							font-weight: 400;
							line-height: 150%;
							@include maxwidth(540){
								font-size: 13px;
								text-align: center;
							}
						}
					}
				}
				div.formButton {
					a {
						background-color: $basecolor;
						color:$basetextcolor;
						&:hover {
							background-color:$accentcolor;
							box-shadow: inset 0px 0px 30px 0 rgba($themecolor,.5);
						}
						gap: 8px;
						span.icon {
							flex: 0 0 20px;
							@include wh(20);
							position:relative;
							top:2px;
							img {
								@include obj100(contain);
							}
						}
						span.caption {
							font-size: 18px;
							font-weight: 500;
							@include maxwidth(540){
								font-size: 16px;
							}
						}
					}
				}
			}
		}
	}
}

footer { }

div#footer {
	background: linear-gradient(180deg, #0E172A 0%, #000 100%);
	color:#fff;
	padding-block: 50px 45px;
	div.container {
		@include container(1280, 50);
		@include maxwidth(540){
			width:auto;
			margin-inline:20px;
		}
		div.footermain {
			display:flex;
			justify-content:space-between;
			div.col {
				margin-bottom:45px;
			}
			@include maxwidth(1040){
				flex-direction:column;
				align-items:center;
			}
			div.col.col1 {
				div.sitename {
					margin-bottom:10px;
					a {
						@include wh(140);
						background-color:$basecolor;
						color:$basetextcolor;
						display:flex;
						@include flex_centering;
						span.title {
							@include ff_en;
							font-size: 15px;
						}
						border: 1px solid currentcolor;
						box-sizing: border-box;
					}
				}
				div.address {
					font-size: 14px;
					font-weight: 400;
					line-height: 130%;
				}
			}
			div.col.col2 {
				div.footermenu {
					display:flex;
					gap: clamp(20px, 7.64vw, 110px);
					@include maxwidth(700){
						display:block;
						width: 280px;
					}
					& > ul {
						font-size: 15px;
						font-weight: 500;
						line-height: 130%;
						& > li {
							margin-bottom:20px;
							@include maxwidth(700){
								margin-bottom:12px;
							}
							& > a {
								@include maxwidth(700){
									border: 1px solid mix($basecolor, $basetextcolor, .8);
									display:block;
									padding:12px;
									transition: .25s;
									&:hover {
										background-color:$accentcolor;
										box-shadow: inset 0 0 10px 0 rgba($themecolor, .25);
									}
								}
							}
							& > ul {
								margin-top:10px;
								font-size: 14px;
								font-weight: 400;
								line-height: 120%;
								& > li {
									margin-bottom:10px;
									@include maxwidth(700){
										margin-block:15px;
									}
									padding-left: 2em;
									position:relative;
									&:before {
										content:'－　';
										position:absolute;
										left:0;
									}
									& > a {
									}
								}
							}
						}
					}
				}
			}
		}
		div#footeraside {
			font-size: 12px;
			font-weight: 500;
			text-align:right;
		}
	}
}

div#totop {
	a {
	}
}


























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

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