// スタイルシート common

@charset "utf-8";

@import "mixin";

body {
	@include root;
	position: relative;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	// メニューが開いている場合はスクロール不可
	&.menu_open { overflow: hidden; }
}

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

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

@mixin first_last_nomargin {
	&:first-child { margin-block-start: 0;}
	&:last-child { margin-block-end: 0;}
}

@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+"";}
}

@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 obj100($fit_method: cover) {
	@include wh(100%);
	object-fit: $fit_method;
}

div#wrapper {
	background-color: #808080;
}


@mixin a_hover($bgcolor: #333, $invert: 0.0) {
	&:after {
		content:'';
		position:absolute;
		inset: 0;
		background-color: $bgcolor;
		transition: .1s;
		z-index: 0;
		clip-path: inset(0 100% 0 0);
	}
	& > * { z-index:1;}
	&:hover {
		& > * { filter: invert($invert);}
	}
	&:hover {
		&:after {
			transition: .25s;
			clip-path: inset(0);
		}
	}

}

div#header {
	position:relative;
	z-index:1;

	// 波型のデコレーション
	div.wave_decoration {
		position:absolute;
		inset: 0 0 auto 0;
		div.d {
			position:absolute;
			background: none center / contain no-repeat;
		}
		div.d1 {
			inset: 0 auto auto 0;
			width:38.33vw;//552
			aspect-ratio: 552/292;
			background-image: url(../images/wave-header-02.svg);
		}
		div.d2 {
			inset: 0 0 auto 0;
			aspect-ratio: 1440/181;
			background-image: url(../images/wave-header-04.svg);
			z-index:1;
		}
	}


	div.container {
		div.sitename {
			h1 {
				a {
					@include flex_centering;
					width: clamp(120px, 12.5vw, 180px);
					aspect-ratio: 1/1;
					background-color:#fff;
					position:absolute;
					inset: 20px auto auto 20px;
					@include maxwidth(768){
						inset: 0 auto auto 10px;
					}
					z-index:1;
					img {
						max-height:70%;
						max-width:70%;
					}
					transition: .25s;
					@include a_hover($themecolor);
					&:hover {
						img { filter: grayscale(100%) brightness(0) invert(1);}
					}
				}
			}
		}
	}
}


div#contactButton {
	color: #fff;
	position:absolute;
	inset:  40px 30px auto auto;
	@include maxwidth(768){
		inset:10px 10px auto auto;
	}
	display:flex;
	gap: 10px;
	z-index:1;
	div.button_tel {
//		margin-right:15px;
		@include maxwidth(768){
			display:none;
		}
		a {
			padding-inline:15px;
			display:flex;
			flex-direction: column;
			justify-content:center;
			align-items:center;
			height:60px;
			gap: 7px;
			padding-bottom:5px;
			box-sizing: border-box;
			span.telnum {
				display:flex;
				align-items:baseline;
				gap: 6px;
				font-size: 26px;
				span.icon {
					flex: 0 0 .7em;
					position:relative;
					bottom: 1px;
					img {
					}
				}
				span.caption {
					flex: 1 1 auto;
					font-weight: 400;
				}
			}
			span.teltime {
				font-size: 14px;
				font-weight: 500;
			}

			body.subpage & {
				background-color: rgba($themecolor, .5);
				color:$themetextcolor;
				//box-shadow: 2px 2px 2px 0 rgba($themetextcolor, .05);
				span.telnum {
					font-size: 20px;
					//span.icon { flex-basis: 15px; }
				}
				span.teltime {
					font-size: 12px;
				}
			}

			//body.subpage & {
			//	background-color: $themecolor;
			//	color:$themetextcolor;
			//	span.telnum {
			//		span.caption { font-size: 20px; }
			//	}
			//	span.teltime {
			//		font-size: 12px;
			//	}
			//}


		}
	}
	div.square {
		a {
			//@include wh(60);
			width:60px;
			aspect-ratio: 1/1;
			@include maxwidth(768){
				width:50px;
			}
			@include flex_centering;
			flex-direction: column;
			background-color:$themecolor;
			color:$themetextcolor;
			gap: 7px;
			span.icon {
				flex: 0 0 17px;
				width:17px;
				img {
					@include obj100(contain);
				}
			}
			span.text {
				font-size: 8px;
				font-weight: 500;
			}
			position:relative;
			@include a_hover($basecolor, .65);
		}
	}
	div.button_contact.square {
		a {
			background-color: $accentcolor;
			color:$accenttextcolor;
		}
	}

	div.button_gnav {//#gnavToggleWrapper
		body.header_scrollout & {
			order: -1;
		}
		a#gnavToggle {
			display:block;
			width: 60px;
			aspect-ratio: 1/1;
			//position:absolute;
			//inset: 40px 30px auto auto;
			position:relative;
			position:relative;
			background-color: #1A171B;
			z-index:1;

			position:relative;
			@include a_hover($basecolor, .65);

			span.b {
				display:block;
				position:absolute;
				inset: 0;
				margin:auto;
				@include wh(50%, 2);
				background-color: #fff;
				--trlyp: 11px;
				--trlym: -11px;
				@include maxwidth(768){
					--trlyp: 8px;
					--trlym: -8px;
				}
				&.b1 { transform: translateY(var(--trlym)); }
				&.b2 { transform: translateY(0px); }
				&.b3 { transform: translateY(var(--trlyp)); }
			}
			@include maxwidth(768){
				width: 50px;
				//span.b.b1 { transform: translateY(-9px);}
				//span.b.b3 { transform: translateY(9px);}
				//inset: 10px 10px auto auto;
			}
		}
	}


	body.header_scrollout & {
		position:fixed;
		inset:0 0 0 auto;
		z-index:9998;
		body.admin-bar { top: 32px; }
		flex-direction:column;
		justify-content:flex-end;;
		gap: 5px;
		margin-block:auto;;
		height: calc(60px * 4 + 5px * 3);
		div.button_tel { display:none; }
		//アニメーション
		clip-path: inset(0 100% 0 0);
		animation: ani2 .25s .25s forwards;
	}

	@include maxwidth(768){
		div.button_facebook.square,
		div.button_youtube.square {
			display:none;
		}
		body.header_scrollout & {
			background-color:$themetextcolor;
			inset:auto 0 0 0;
			flex-direction:row;
			justify-content:flex-end;;
			gap: 1px;
			height:auto;
			box-shadow: 0 -1px 0 0 $themetextcolor;
			div.button_tel {
				flex: 1 1 auto;
				display:block;
				background-color:$themecolor;
				color:$themetextcolor;
				//a {
				//	gap: 3px;
				//}
			}
			div.square a { width: 60px; }
			div.button_tel {
				order: 0;
				a {
					span.telnum { font-size: 20px;}
					span.teltime { font-size: 11px;}
					
				}
			}
			div.button_contact { order: 1;}
			div.button_gnav { order: 2;
				a#gnavToggle {
					width: 60px;
					span.b { --trlyp: 11px; --trlym: -11px; }
				}
			}
		}

	}
}

@keyframes ani2 {
	0% { clip-path: inset(0 100% 0 0); }
	100% { clip-path: inset(0); }
}

div#gnav {
	position: fixed;
	inset: 0;
	background-color: rgba($basetextcolor, .95);
	z-index: 9999; 
	// スクロールバーが出た場合のための対策
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	// 中央配置のレイアウト
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px 20px;
	// 円状にクリップして隠しておく（右上から広がるイメージ）
	clip-path: circle(0% at 90% 10%);
	transition: clip-path .6s cubic-bezier(0.77, 0, 0.175, 1);
	// 初期状態ではリンクをクリックできないようにする
	visibility: hidden;
	pointer-events: none;
	nav {
		width: 100%;
		max-width: 600px; // メニューの最大幅
		margin: auto;
	}

	// 第一階層のメニュー（ホーム、事業案内など）
	& > nav > ul > li {
		margin-bottom: 25px;
		opacity: 0;
		transform: translateY(30px);
		transition: opacity 0.4s ease, transform 0.4s ease;
		& > a {
			display: block;
			color: $basecolor;
			font-size: clamp(15px, 1.67vw ,24px);
			text-decoration: none;
			transition: color 0.3s ease;
			padding-left: 1.5em;
			position:relative;
			
			border-bottom:1px solid rgba($basecolor, .25);
			padding-bottom:.5em;
			
			&:before, &:after {
				content:'';
				display:inline-block;
				@include wh(.8em, 2px);
				background-color: currentcolor;
				position:absolute;
				inset: -.3em auto 0 0;
				margin-block:auto;
			}
			&:after {
				transform: rotateZ(90deg);
			}
			&:hover {
				color: $accentcolor;
			}
		}
		&.haschild {
			& > a {
				&:before, &:after {
					@include wh(.6em, .1em);
					display:inline-block;
					left: calc(.1em);
					top:-.6em;
					transition: .5s;
				}
				&:before { transform: rotateZ(45deg)  translateY(.25em); }
				&:after  { transform: rotateZ(-45deg) translateY(.25em); }
			}
		}
	}

	ul ul {
		//margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		//justify-content: center;
		gap: 0 .75em;

		// --- 追記・変更部分 ---
		max-height: 0;			 // 初期状態は高さを0にして隠す
		overflow: hidden;		// はみ出た部分を非表示に
		opacity: 0;
		transition: max-height 0.4s ease, opacity 0.3s ease;
		// --------------------
		font-size: clamp(13px,  1.04vw ,15px);

		li {
			margin-top:1.3em;
			margin-bottom:.65em;
			a {
				color: mix($basecolor, $basetextcolor, .75);
				border: 1px solid currentcolor;
				text-decoration: none;
				padding:4px 12px;
				transition: color 0.3s ease;
				border-radius:100px;
				&:hover {
					color: $accenttextcolor;
					background-color: $accentcolor;
				}
			}
		}
	}

	// --- 新たに追記：親liに .open クラスがついたらサブメニューを表示 ---
	> nav > ul > li.open {
		& > a {
			&:before, &:after {
				@include wh(.9em, 2px);
				left:-.05em;
				top:-.25em;
			}
			&:before {
				transform: rotateZ(-45deg);
			}
			&:after {
				transform: rotateZ(-135deg);
			}
		}
		ul {
			max-height: 300px; // サブメニューが収まる十分な高さを指定（アニメーション用）
			opacity: 1;
			//margin-bottom: 15px;
		}
	}

	body.menu_open & {
		// 円状に画面全体へ広がる
		clip-path: circle(150% at 90% 10%);
		visibility: visible;
		pointer-events: auto;

		// 中のリンクを順番にふわっと表示（ディレイをかける）
		> nav > ul > li {
			opacity: 1;
			transform: translateY(0);

			// SCSSのループ機能で、各項目にズレ（ディレイ）を作る
			@for $i from 1 through 6 {
				&:nth-child(#{$i}) {
					// メニューが開く速度（0.6s）に合わせて少し遅らせて開始
					transition-delay: 0.3s + ($i * 0.08s);
				}
			}
		}
	}
}

*.heading.common_heading {
	h2 { }
	span.ja, span.en {
		display:block;
	}
	span.ja {
		color: $themecolor;
		font-size: 14px;
		font-weight: 500;
	}
	span.en {
		//font-size: 32px;
		font-size: clamp(24px, 2.22vw, 32px);
		font-weight: 500;
		margin-top: 8px;
	}
}

div.catch.common_catch {
	font-size: 24px;
	font-weight: 500;
	line-height: 150%;
	br.sp { display:none; }
}
div.text.common_text {
	font-size: 15px;
	font-weight: 400;
	line-height: 200%;
	br.sp { display:none; }
}

@mixin button_hover($round: 45px, $bgcolor: #fff) {

	-webkit-clip-path: inset(0 round $round); //Safari用
	clip-path: inset(0 round $round);
	//	border-radius: $round;

	position: relative;
	z-index: 1;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: $bgcolor;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform ease .3s;
	}
	&:hover {
		&:after {
			transform-origin: 0% 50%;
			transform: scaleX(1);
		}
	}
}

*.btn.common_btn {
	position:relative;
	display: inline-flex;
	@include wh(350, 45);
	max-width:100%;
	padding: 0 35px 3px;
	box-sizing: border-box;
	align-items: center;
	justify-content:center;
	background-color:$themecolor;
	color:$themetextcolor;

	&:before {
		@include before_as_image('../images/icon-plus-white.svg');
		@include wh(14);
		position:absolute;
		inset: 0 auto 0 20px;
		margin:auto;
	}
	&[target="_blank"] {
		&:before {
			@include before_as_image('../images/icon-external-white.svg');
			@include wh(18);
			position:absolute;
			inset: 0 auto 0 18px;
			margin:auto;
		}
	}
	@include button_hover(45px, mix($themecolor, $themetextcolor, .65));
}


div#mainVisual {
	position:relative;
	background-color:$basetextcolor;
	color:$basecolor;
	div.container {
		position:relative;
		div.video, div.image {
			height: 100dvh;
			&:before {
				content:'';
				display:block;
				height:100px;
				background: linear-gradient(180deg, #000 -159.42%, rgba(#000, 0.0) 100%);
				position:absolute;
				inset: 0 0 auto 0;
			}
			video, img {
				@include obj100;
			}
		}
		div.image {
			display:none;
		}
		div.overlay {
			text-align: right;
			position:absolute;
			inset: auto 20px 35px auto;
			z-index:2;
			p.catch {
				text-shadow: 0 4px 8px rgba(#000, .3);
				font-size: clamp(28px, 4.44vw, 64px);//64;
				font-weight: 400;
				line-height: 130%;
			}
			p.text {
				text-shadow: 0 4px 8px rgba(#000, .3);
				font-size: clamp(13px, 1.39vw, 20px);//20;
				font-weight: 500;
				line-height: 150%;
				margin-top:20px;
				margin-right:28px;
			}
			br.sp {
				display:none;
				@include maxwidth(768){
					display:block;
				}
			}
			@include maxwidth(768){
				inset: 160px 10px 50px;
				text-align:center;
				display:flex;
				flex-direction:column;
				justify-content:space-between;
				p.text {
					margin-right:initial;
				}
			}
		}
		div.headerscroll {
			position:absolute;
			inset: auto auto 0 60px;
			z-index:2;
			@include maxwidth(768){
				inset: auto 0 0;
			}
			a {
				display:flex;
				gap: 14px;
				align-items:center;
				@include maxwidth(768){
					justify-content:center;
				}
				&:before {
					flex: 0 0 20px;
					@include before_as_image('../images/icon-mouse-white.svg', 20, 32);
				}
				text-shadow: 0 4px 8px rgba(#000, 0.30);
				font-size: 12px;
				font-weight: 500;
			}
		}
	}

	// 波型のデコレーション
	div.wave_decoration {
		position:absolute;
		inset: auto 0 0 0;
		div.d {
			position:absolute;
			background: none center / contain no-repeat;
		}
		div.d1 {
			inset: auto 0 0 auto;
			width:40.56vw;//584
			aspect-ratio: 584/367;
			background-image: url(../images/wave-header-01.svg);
			@include maxwidth(768){
				width: 72.41vw;
			}
		}
		div.d2 {
			inset: auto 0 0 0;
			aspect-ratio: 1440/265;
			background-image: url(../images/wave-header-03.svg?1);
			z-index:1;
			@include maxwidth(768){
				aspect-ratio: 2/1;
				background-position: bottom center;
				background-size: 130% 110%;
			}
		}
	}


}

main { }
div#content {
	section { }
}

div#subpageTopicPath {

	// デザイン上座りが悪いため非表示
	// 必要であれば設置場所を検討
	// display:none !important;
	div.container {
		@include container(1240, 30);
		@include maxwidth(1400){
			margin-left: 30px;
			margin-right: 80px;
		}
		@include maxwidth(768){
			margin-left: 20px;
			margin-right: 20px;
		}
		position:absolute;
		inset: 250px 20px auto 20px;
		z-index:1;
		width: calc(100% - 40px);
		background-color: rgba(#fff,.85);
		padding: 0.8em 2em;
		box-sizing: border-box;
		// text-align: right;
		@include maxwidth(1400){
			inset: 280px 30px auto 30px;
			padding: 0;
		}
		@include maxwidth(768){
			inset: 175px 20px auto 20px;
		}
		@include maxwidth(530){
			inset: 190px 20px auto 20px;
		}
		ul {
			display:inline;
			font-size: 14px;
			@include maxwidth(768){ font-size: 13px; }
			li {
				display:inline;
				&:before {
					content:'>';
					margin-inline: .2em .4em;
				}
				&:first-child:before { display:none; }
				a {
					font-weight: 500;
				}
			}
		}
	}
}

div#subpageHeading {
	background-color: $basecolor;
	color:$basetextcolor;
	//padding-block:177px 0;
	padding-block:150px 0;
	@include maxwidth(768){ padding-top:100px; }
	@include maxwidth(530){ padding-top:120px; }
	text-align:center;
	div.container {
		div.heading.common_heading {
			h2 {
				span.ja {
				}
				span.en {
				}
			}
		}
	}
}

div#subpageContent {
	background-color: $basecolor;
	color:$basetextcolor;
	padding-block:120px 120px;
	margin-top: -1px;
	@include maxwidth(768){
		padding-block:80px 80px;
	}
	div.container {
		@include container(1240, 30);
		@include maxwidth(1400){
			margin-left: 30px;
			margin-right: 80px;
		}
		@include maxwidth(768){
			margin-left: 20px;
			margin-right: 20px;
		}
		div.default {

		}
	}
}

div#subpageNav {
	background-color:$basecolor;
	color:$basetextcolor;
	padding-bottom:100px;
	div.container {
		@include container(1240,20);
		ul {
			display:flex;
			gap: 5px;
			flex-wrap:wrap;
			li {
				flex: 0 0 calc((100% - 5px * 2) / 3);
				@include maxwidth(870){
					flex-basis: calc((100% - 5px * 1) / 2);
				}
				@include maxwidth(590){
					flex-basis: 100%;
				}
				a {
					display:flex;
					height:120px;
					@include maxwidth(590){ height:70px; }
					background-color:mix($basetextcolor,$basecolor, .05);
					flex-direction:column;
					justify-content:center;
					padding:10px 100px 10px 30px;
					@include maxwidth(590){ padding-left: 17px; }
					box-sizing: border-box;
					gap: 5px;
					position:relative;
					transition: .25s;
					span {
						&.en {
							font-size: 13px;
							@include maxwidth(590){ font-size: 11px; }
							font-weight: 500;
						}
						&.ja {
							font-size: 20px;
							@include maxwidth(590){ font-size: 16px; }
							font-weight: 500;
						}
					}
					&:after {
						@include before_as_image('../images/icon-plus-white.svg', 40);
						background-color: $themecolor;
						background-size: 14px auto;
						position:absolute;
						inset:0 30px 0 auto;
						margin:auto;
						border-radius:40px;
					}
					&:hover {
						background-color:mix($themecolor,$themetextcolor, .25);
					}
				}
				&.current a {
					background-color: $themecolor;
					color:$themetextcolor;
					&:after {
						background-color: $basetextcolor;
					}
				}
			}
		}
	}
}

div.sustainable_syouene {
	dl {
		display:flex;
		gap: 8px;
		width: 100%;
		flex-wrap:wrap;
		div {
			flex: 0 0 57.14%;
			&:first-child { flex: 0 0 42.86%;}
			@include maxwidth(1060){
				flex-basis: 100% !important;
			}
			flex: 1 1 auto;
			display:flex;
			gap: 10px;
			flex-direction:column;
			dt {
				background-color: #71b2e8;
				color:#fff;
				height:54px;
				display:flex;
				align-items:center;
				justify-content:center;
			}
			dd {
				display:flex;
				gap: 8px;
				flex-wrap:wrap;
				span.item {
					flex: 0 0 calc((100% - 8px * 3) / 4);
					@include maxwidth(470){
						flex-basis: calc((100% - 8px * 1) / 2);
					}
					height:170px;
					display:flex;
					align-items:center;
					justify-content:center;
					flex-direction:column;
					padding:30px 5px 20px;
					box-sizing: border-box;
					justify-content:space-between;
					background-color: mix($basecolor, $basetextcolor, .95);
					//outline: 1px solid red;
					//& > * { outline: 1px solid green}
					span.icon {
						@include wh(72, 60);
						img {
							@include obj100(contain);
						}
					}
					span.label {
						flex: 0 0 3em;
						display:flex;
						align-items:center;
						font-size: 14px;
						font-weight: 500;
						line-height: 130%;
						text-align:center;
					}
				}
			}
			&:first-child {
				dt {
					background-color: $themecolor;
					color:$themetextcolor;
				}
				dd span.item {
					flex: 0 0 calc((100% - 8px * 2) / 3);
				}
			}
		}
	}
}

div.business_service_list {
	div.item {
		a {
			text-decoration:initial;
			display:flex;
			gap: 20px;
			margin-bottom:20px;
			& > div {
				flex: 0 0 calc((100% - 20px * 1) / 2);
				background-color: mix($basetextcolor, $basecolor, .05);
			}
			@include maxwidth(700){
				display:block;
			}
			div.visual {
				@include maxwidth(700){
					height:260px;
				}
				img {
					@include obj100;
				}
			}
			div.body {
				padding:40px;
				box-sizing: border-box;
				position:relative;
				&:after {
					@include before_as_image('../images/icon-plus-white.svg', 40);
					background-size: 13px;
					border-radius: 40px;
					background-color:$themecolor;
					position:absolute;
					inset: 40px 40px auto auto;
					@include maxwidth(700){
					}
				}
				div.menu {
					display:flex;
					flex-wrap:wrap;
					align-items:baseline;
					span.num {
						color:$themecolor;
						font-size: 24px;
						font-weight: 500;
					}
					span.title_en {
						&:before {
							content:':';
							margin-inline: .25em;
						}
						font-size: 14px;
						font-weight: 500;
					}
					span.title {
						flex: 0 0 100%;
						color:$themecolor;
						font-size: 24px;
						font-weight: 500;
						line-height:1;
					}
				}
				div.docs {
					margin-top:20px;
					p {
					}
					ul {
						margin-top: 10px;
						margin-left:1em;
						li { margin-bottom:0;}
					}
				}
			}
		}
	}
}

div#toppageAboutus {

	// 波型のデコレーション
	div.wave_decoration {
		position:absolute;
		inset: 0 0 auto 0;
		div.d {
			position:absolute;
			background: none center / contain no-repeat;
		}
		div.d1 {
			inset: 0 auto auto 0;
			width:38.33vw;//552
			aspect-ratio: 552/292;
			background-image: url(../images/wave-header-02.svg);
		}
		div.d2 {
			inset: 0 0 auto 0;
			aspect-ratio: 1440/181;
			background-image: url(../images/wave-header-04.svg);
			z-index:1;
		}
	}

	position:relative;
	background-color:$basecolor;
	color:$basetextcolor;
	div.container {
		padding-top: clamp(100px, 17.36vw, 250px);//250
		margin-inline:20px;
		margin-bottom:125px;
		text-align:center;
		div.body {
			div.heading.common_heading {
				margin-bottom:60px;
			}
			div.docs {
				div.logo {
					margin-bottom:40px;
					img {
						max-width: 120px;
						max-height: 115px;
					}
				}
				div.catch.common_catch {
					margin-bottom:40px;
					@include maxwidth(650){
						br.sp { display:block;}
					}
				}
				div.text.common_text {
					margin-bottom:50px;
					//@include maxwidth(650){
					//	br { display:none;}
					//}
				}
				div.btnarea {
					a.btn.common_btn {
					}
				}
			}
		}
	}
	div.image {
		height:320px;
		img {
			@include obj100;
		}
	}
}

@mixin area_isnt_wide_enough {
	@media (max-aspect-ratio: 1/1) ,(max-height: 520px){
	//@media (max-aspect-ratio: 3/2) {
		@content;
	}
}

div#toppageBusiness {
	background-color: $basecolor;
	color:$basetextcolor;
	padding-block:250px 220px;
	position:relative;
	@include area_isnt_wide_enough {
		padding-block: 100px 100px;
	}
	&:before {
		content:'';
		background-color: #eff1f7;
		width: 47.22vw;//680
		position:absolute;
		inset: 80px auto 170px 0;
		@include area_isnt_wide_enough {
			inset: 40px 0;
			margin-inline:auto;
			width:100px;
		}
	}
	div.container {
		//@include container(1280, 20);
		display:flex;
		flex-direction:row-reverse;
		position:relative;
		justify-content:center;
		//height: 200dvh;
		//min-height:0;
		@include area_isnt_wide_enough {
			display:block;
		}
		div.image {
		
		//max-width:calc(100vw - 35vw - 160px);
		
			flex: 0 0 calc(100dvh - 40px);
			transform: translateX(60px);
			//max-width:calc(100vw - 700px);
			@include maxwidth(1140){
				flex: 1 1 calc(100dvh - 40px);
				transform: translateX(-1vw);
			}

			//height:calc(100dvh - 80px + 30px);
			aspect-ratio: 1/1;
			//padding-left:30px;
			@include area_isnt_wide_enough {
				align-items:center;
				justify-content:center;
			}

			//body.admin-bar & {
			//	top:calc(40px + 32px);
			//	height:calc(100dvh - 80px - 32px);
			//	@include area_isnt_wide_enough {
			//		top:initial; height: auto;
			//	}
			//}

			display:flex;
			div.graphic {
				//inset: 0;
				position:sticky;
				top: 40px;

				height:90dvh;
				@include area_isnt_wide_enough {
					height:initial;
					margin-bottom: 10vw;
				}

				img {
					@include obj100(contain);
				}

				div.pins {
					position:absolute;
					inset: 0;
					span.pin {
						display:flex;
						width: 5.21dvh;
						inset: -2.605dvh 0 0 -2.605dvh;
						color: $themecolor;
						font-weight: 500;
						font-size: clamp(0px, 1.67dvh, 16px);
						box-sizing: border-box;
						padding: 1.45dvh 0 0 1.4dvh;
						aspect-ratio: 1/1;
						background: url(../images/toppage-business-pin.svg) center / contain no-repeat;
						--pin-scale: 1;
						--pin-rotate: 0deg;
						&.is-active {
							--pin-scale: 1.5;
							--pin-rotate: -15deg;
							//バウンドしつつ大きくする
							transition: transform 0.4s cubic-bezier(0.175, 5.885, 0.32, 4.5);
							background-image:url(../images/toppage-business-pin-current.svg);
							color: $accentcolor;
						}
						position:absolute;
						z-index:1;
						margin:auto;
						vertical-align:bottom;
						&.pin1 { transform: translateX(-16dvh) translateY(-11dvh) scale(var(--pin-scale)) rotateZ(var(--pin-rotate)); }
						&.pin2 { transform: translateX(17dvh) translateY(-12dvh) scale(var(--pin-scale)) rotateZ(var(--pin-rotate)); }
						&.pin3 { transform: translateX(-20.5dvh) translateY(12.5dvh) scale(var(--pin-scale)) rotateZ(var(--pin-rotate)); }
						&.pin4 { transform: translateX(8dvh) translateY(14.5dvh) scale(var(--pin-scale)) rotateZ(var(--pin-rotate)); }
						&.pin5 { transform: translateX(-14.5dvh) translateY(31dvh) scale(var(--pin-scale)) rotateZ(var(--pin-rotate)); }
					}
					@include area_isnt_wide_enough {
						display:none;
					}
				}
			}
			@include area_isnt_wide_enough {
				position:static;
				aspect-ratio: auto;
				//height:auto;
				width:90vw;;
				padding-left:initial;
				transform: initial;
				margin-inline:auto;
				div.graphic {
					position:static;
					div.pins { display:none; }
				}
			}
		}

		div.body {
			//outline: 2px solid blue;
			flex: 1 1 auto;
			width: 35vw;
			max-width: 450px;
			padding-left:60px;
			//margin-right: -20px;

			@include area_isnt_wide_enough {
				margin-inline:auto;
				padding-left:initial;
				width: 335px;//600px;
				max-width:100%;
			}

			div.heading.common_heading {
				margin-bottom:34px;
				@include area_isnt_wide_enough {
					text-align:center;
				}
				h2 {
					span.ja {
					}
					span.en {
					}
				}
			}
			div.docs {
				padding-bottom:40dvh;
				display:flex;
				flex-direction:column;
				@include area_isnt_wide_enough {
					align-items:center;
					padding-bottom:100px;
				}
				div.text.common_text {
					margin-bottom:34px;
					p {
					}
				}
				div.link {
					a.btn.common_btn {
						margin-bottom: 80px;
					}
					div.item {
						margin-bottom:20px;
						@include first_last_nomargin;
						@include area_isnt_wide_enough {
							margin-bottom:10px;
						}
						&.item1 { }
						a {
							background-color: $basecolor;
							border-radius:20px;
							padding:40px 40px 50px;
							padding:clamp(20px,2.78vw,40px) clamp(20px,2.78vw,40px) clamp(35px,3.47vw,50px);
							display:block;
							@include area_isnt_wide_enough {
								background: rgba(255, 255, 255, 0.85);
								box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
							}
							div.subimage {
								display:none;
								margin-bottom:30px;
								@include area_isnt_wide_enough { display:block; }
							}
							div.subheading {
								margin-bottom:clamp(10px, 0.014vw, 20px);
								position:relative;
								div.submeta {
									span.num {
										color: $themecolor;
										font-size: clamp(20px, 1.67vw, 24px);
										font-weight: 500;
									}
									span.en {
										font-size: 14px;
										font-weight: 500;
									}
								}
								h3.ja {
									color:$themecolor;
									font-size: clamp(20px, 1.67vw, 24px);
									font-weight: 500;
									line-height: 180%;
								}
								&:before {
									content:'';
									background: url(../images/icon-plus-white.svg) center / 13px auto no-repeat $themecolor;
									@include wh(40);
									position:absolute;
									inset: 0 0 auto auto;
									@include area_isnt_wide_enough { right: 10px; }
									border-radius: 40px;
								}

							}
							div.subtext {
								font-size: 15px;
								font-weight: 400;
								line-height: 160%;
								p {
									margin-block: 1.6em;
									@include first_last_nomargin;
								}
							}
							div.list {
								margin-top:clamp(10px, 0.014vw, 20px);
								font-size: 15px;
								ul {
									li {
										line-height:1.2;
										margin-block: .4em;
										@include first_last_nomargin;
										&:before {
											content:'';
											display:inline-block;
											background-color: $themecolor;
											@include wh(6);
											position:absolute;
											inset: 7px auto auto 0;
										}
										position:relative;
										padding: 0 0 0 16px;;
									}
								}
							}
						}
						//バウンドしつつ大きくする
						transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
						&.is-active { //.item.is-active
							transform:scale(1.1);
							z-index:1;
							@include area_isnt_wide_enough {
								transform:scale(1);
							}
							a {
								box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
								div.subheading {
									div.submeta span.num,
									h3.ja {
										transition: .25s;
										color: $accentcolor;
									}
									&:before {
										transition: .25s;
										background-color: $accentcolor;
									}
								}
							}
						}
					}
				}
			}
		}

	}

	// 波型のデコレーション
	div.wave_decoration {
		position:absolute;
		inset: auto 0 0 0;
		div.d {
			position:absolute;
			background: none center / contain no-repeat;
		}
		div.d1 {
			inset: auto 0 0 auto;
			width:40.56vw;//584
			aspect-ratio: 584/437;
			background-image: url(../images/wave-business-01.svg);
		}
		div.d2 {
			inset: auto 0 calc(321 / 1440 * -100vw / 2) 0;
			aspect-ratio: 1440/321;
			background-image: url(../images/wave-business-03.svg);
			z-index:1;
		}
	}


}

div#toppageRecruit {
	background-color: $themecolor;
	color:$themetextcolor;
	position:relative;
	padding: clamp(150px, 20.83vw, 300px) 0 200px;
	div.bgimage {
		position:absolute;
		inset: 0;
		img {
			@include obj100;
		}
		&:before {
			content:'';
			position:absolute;
			inset: 0;
			background: rgba(#000 , 0.65);
			backdrop-filter: blur(4px);
		}
	}

	// 波型のデコレーション
	div.wave_decoration {
		position:absolute;
		inset: auto 0 0 0;
		div.d {
			position:absolute;
			background: none center / contain no-repeat;
		}
		div.d1 {
			inset: auto auto 0 0;
			width:40.56vw;//584
			aspect-ratio: 584/437;
			background-image: url(../images/wave-business-02.svg);
		}
		div.d2 {
			inset: auto 0 calc(421 / 1440 * -100vw / 1.35) 0;
			aspect-ratio: 1440/421;
			background-image: url(../images/wave-business-04.svg);
			z-index:1;
		}
	}


	div.container {
		z-index:1;
		display:flex;
		justify-content:space-between;
		@include maxwidth(880){
			flex-direction:column;
			gap: 10px;
		}
		div.body {
			flex: 1 1 auto;
			padding: 0 clamp(0px, 6.94vw, 100px);
			@include maxwidth(1200){ padding:0 40px; }
			@include maxwidth(880){ padding:0 20px; }
			text-align:center;
			z-index:1;
			div.heading.common_heading {
				margin-bottom:40px;
				h2 {
					span.en, span.ja {
						color: inherit;
					}
				}
			}
			div.docs {
				div.catch.common_catch {
					margin-bottom: 30px;
				}
				div.text.common_text {
					margin-bottom: 30px;
				}
				div.link {
					display:inline-flex;
					flex-direction: column;
					gap: 10px;
					width:100%;
					max-width:350px;
					a {
						display:inline-flex;
						@include wh(100%, 80);
						@include maxwidth(880){
							height:60px;
						}
						justify-content:center;
						align-items:center;
						//border-radius: 20px;
						background-color: $accentcolor;
						color:$accenttextcolor;
						position:relative;
						&:before {
							content:'';
							@include wh(40);
							border-radius:40px;
							display:block;
							background-color: currentcolor;
							position:absolute;
							inset: 0 auto 0 10px;
							margin:auto;

							background: url('../images/icon-plus-red.svg') center / 13px auto no-repeat $accenttextcolor;

						}
						@include button_hover(20px, mix($accenttextcolor, $accentcolor, .9));
						&:hover {
							color: $accentcolor;
						}
						//&:after {
						//	display:block;
						//	@include before_as_image('../images/icon-plus-red.svg', 13);
						//	position:absolute;
						//	inset: 0 auto 0 23px;
						//	margin:auto;
						//}
					}
				}
			}
		}
		div.image {
			flex: 0 0 350px;
			@include maxwidth(1200){
				flex-basis: 250px;
			}
			@include maxwidth(880){
				aspect-ratio: 355/220;
			}
			min-width:0;
			z-index:1;
			&.image1 {
				order: -1;
			}
			img {
				@include obj100;
			}
			@include maxwidth(880){
				&.image1 {
					margin-top:35px;
					order: initial;
					margin-right:20px;
				}
				&.image2 {
					margin-left:20px;
				}
			}
		}
	}
}

div#toppagePickupInfo {
	background-color:$basecolor;
	color:$basetextcolor;
	padding-block:60px 40px;
	position:relative;
	z-index:1;
	div.container {
		@include container(1320, 20);
		display:flex;
		gap: 15px;
		@include maxwidth(1040){
			flex-direction:column;
		}
		div.item {
			flex: 1 1 calc((100% - 15px * 2) / 3);
			a {
				display:flex;
				height:230px;
				justify-content:center;
				align-items:center;
				position:relative;
				background-color: $basetextcolor;
				color:$basecolor;
				flex-direction: column;
				gap: 20px;
				text-align:center;
				padding-top:40px;
				box-sizing: border-box;
				& > span {
					display:block;
				}
				span.image {
					position:absolute;
					inset: 0;
					&:before {
						content:'';
						position:absolute;
						inset: 0;
						background: rgba(#000, 0.40);
						backdrop-filter: blur(2px);
						transition: .25s;
					}
					img {
						@include obj100;
					}
				}
				&:hover {
					span.image {
						&:before {
							background: rgba(#000, .15);
							backdrop-filter: none;
						}
					}
				}
				span.heading.common_heading {
					position:relative;
					z-index:1;
					span.ja, span.en {
						color:inherit;
					}
				}
				&:hover {
					span.image {
						&:before {
							background: rgba(#000, .15);
							backdrop-filter: none;
						}
					}
					span.heading.common_heading {
						text-shadow: 0 0 10px #000;
					}
				}

				&:after {
					z-index:1;
					content:'';
					display:block;
					@include wh(40);
					border-radius:40px;
					background: url(../images/icon-plus-white.svg) center / 13px auto no-repeat;
					background-color:$themecolor;
				}
			}
		}
	}
}

div#toppageVideo {
	background-color: #eff1f7;
	color:$basetextcolor;
	div.container {
		@include container(1320, 20);
		padding-block:100px 80px;
		div.body {
			text-align:center;
			div.heading.common_heading {
				margin-bottom:40px;
			}
			div.docs {
				div.text {
					margin-bottom:40px;
					p {
					}
				}
				div.videos {
					display:flex;
					flex-wrap:wrap;
					gap: 47px;
					div.item {
						flex: 0 0 calc((100% - 47px * 1) / 2);
						aspect-ratio: 16/9;
						iframe {
							width: 100% !important;
							height: 100% !important;
						}
					}
					@include maxwidth(1000){
						gap: 15px;
						flex-direction:column;
						div.item {
							flex: 1 1 auto;
							width:100%;
							iframe {
							}
						}
					}
				}
				div.more {
					margin-top:60px;
					a.btn.common_btn {
					}
				}
			}
		}
	}
}

div.news_termlist.termlist {
	margin-bottom:30px;
	ul {
		display:flex;
		gap: 10px;
		flex-wrap:wrap;
		@include maxwidth(1040){
			body.toppage.os-touch & {
				margin-inline:-20px;
				flex-wrap:nowrap;
				overflow:auto;
				width: calc(100% + 40px);
				li:first-child { margin-left:20px;}
				li:last-child { margin-right:20px;}
			}
		}
		li {
			a {
				@include flex_centering(inline-flex);
				@include wh(230, 45);
				background-color: #eff1f7;
				color: $basetextcolor;
				font-size: 14px;
				font-weight: 500;
				padding: 0 0 2px;
				box-sizing: border-box;
				position:relative;
				white-space: nowrap;
				@include maxwidth(1040){
					width: auto;
					padding: 0 20px 2px 45px;
				}
				&:before {
					@include before_as_image('../images/icon-plus-blue.svg', 14);
					display:block;
					position:absolute;
					inset: 0 auto 0 20px;
					margin:auto;
				}
				@include button_hover(45px);
				&.current {
					background-color: $themecolor;
					color:$themetextcolor;
					&:before {
						background-image:url(../images/icon-plus-white.svg);
					}
					&:hover:after {
						background-color: mix($themetextcolor, $themecolor, .45);
					}
				}
			}
			&:first-child {
				a { width: 250px; }
			}
		}
	}
}

div.news_headline.headline {
	display:flex;
	gap: 15px;
	flex-wrap:wrap;
	div.item {
		flex: 0 0 calc((100% - 15px * 2) / 3);
		@include maxwidth(800){ flex-basis: calc((100% - 15px * 1) / 2); }
		@include maxwidth(540){ flex-basis: 100%; }
		a {
			display:flex;
			flex-direction:column;
			span.image {
				aspect-ratio: 430/304;
				margin-bottom:14px;
				min-height: 0;
				img {
					@include obj100;
				}
			}
			span.meta {
				margin-bottom:3px;
				display:flex;
				gap: 12px;
				align-items:center;
				span.terms {
					display:flex;
					gap: 5px;
					span.term {
						display:flex;
						height:25px;
						padding-inline:8px;
						align-items: center;
						background-color:$accentcolor;
						color:$accenttextcolor;
						font-size: 12px;
						font-weight: 500;
					}
				}
				span.date {
					font-size: 14px;
					font-weight: 500;
				}
			}
			span.title {
				font-size: 15px;
				font-weight: 500;
				line-height: 160%;
			}
		}
	}
	// トップページで幅狭の場合
	@include maxwidth(800){
		// 画面が狭いPC：縦一列
		body.toppage & {
			flex-direction:column;
			align-items:center;
			div.item {
				width:360px;
				max-width:100%;
			}
		}
		// タッチデバイス：スワイプ対応
		body.toppage.os-touch & {
			flex-wrap:initial;
			flex-direction:row;
			align-items:initial;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			// スクロールバーを非表示
			scrollbar-width: none; // firefox
			&::-webkit-scrollbar { display: none; }//chrome
			gap: 20px;
			margin-inline:-20px;;
			div.item {
				width:auto;
				scroll-snap-align: center;
				flex: 0 0 80%;
				&:first-child { margin-left:20px; }
				&:last-child { margin-right:20px; }
			}
		}
	}
}

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

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

div#toppageNews {
	background-color: $basecolor;
	color:$basetextcolor;
	div.container {
		@include container(1320, 20);
		padding-block:80px 100px;
		div.heading.common_heading {
			margin-bottom:40px;
			h2 {
				span.amp {
					margin-inline: .25em;
				}
				span.ja {
				}
				span.en {
					span.amp {
						font-size: 0.625em;
					}
				}
			}
		}
		div.body {
			div.news_termlist {
			}
			div.news_headline.headline {
			}
		}
		div.more {
			margin-top:50px;
				text-align:center;
			a.btn.common_btn {
			}
		}
	}
}

footer { }

div#footer {
	background-color: $themecolor;
	color:$themetextcolor;
	div.container {
		@include container(1320, 20);
		padding-block: 60px;
		div#footerContact {
			position: relative;
			padding: 40px clamp(17px, 4.17vw ,60px);
			margin-bottom: 60px;
			div.bgimage {
				position: absolute;
				inset: 0;
				img {
					@include obj100;
				}
				&:before {
					content:'';
					position:absolute;
					inset:0;
					background:rgba(#000, .5);
					backdrop-filter: grayscale(1);
				}
			}
			div.leadtext, div.heading, div.links {
				position:relative;
				z-index:1;
				text-align:center;
			}
			div.heading {
				margin-bottom:22px;
				span.ja {
					color: inherit;
				}
				span.en {
				}
			}
			div.leadtext {
				margin-bottom:29px;
				font-size: 15px;
				font-weight: 400;
				line-height: 180%;
				br.sp {
					display:none;
					@include maxwidth(768){ display:block; }
				}
			}
			div.links {
				display:flex;
				gap: 15px;
				flex-wrap:wrap;
				justify-content:center;
				a {
					//flex: 0 0 calc((100% - 15px * 2) / 3);
					@include flex_centering;
					gap: 12px;
					height:120px;
					//width:390px;
					background-color:$basetextcolor;
					color:$basecolor;
					font-size: 14px;
					font-weight: 500;
					@include a_hover($basecolor, .7);
				}
				& > div {
					position:relative;
					flex: 0 0 calc((100% - 15px * 2) / 3);
					@include maxwidth(1030){
						flex-basis: calc((100% - 15px * 1) / 2);
					}
					@include maxwidth(680){ flex-basis: 100%; max-width:300px;}
				}
				div.button_tel {
					@include maxwidth(1030){
						flex-basis: 100%;
					}
					a {
						flex-direction:column;
						span.telnum {
							display:flex;
							gap: 5px;
							align-items:baseline;
							span.icon {
								flex: 0 0 1em;
								img {
								}
							}
							span.caption {
								flex: 1 1 auto;
								font-size: 26px;
								font-weight: 400;
							}
						}
						span.teltime {
						}
					}
				}
				div.button_mail1 {
					a {
						span.icon {
							img {
							}
						}
						span.caption {
						}
					}
				}
				div.button_mail2 {
					a {
						span.icon {
							img {
							}
						}
						span.caption {
						}
					}
				}
			}
		}
		div#footerMain {
			display:flex;
			justify-content:space-between;
			@include maxwidth(1120){
				flex-direction:column;
				justify-content: flex-start;
				align-items:center;
				text-align:center;
				gap: 30px;
			}
			div.col {
				div.sitename {
					margin-bottom:30px;
					a {
						img {
							max-width: 203px;
							max-height: 100px;
						}
					}
				}
				div.address {
					font-size: 13px;
					font-weight: 500;
					line-height: 140%;
					p {
						margin-block: 1.4em;
						@include first_last_nomargin;
					}
				}
				div.footermenu {
					font-size: 14px;
					font-weight: 400;
					// PCスマホ共通
					div.item {
						& > ul {
							& > li {
								&.has_icon {
									& > a {
										&:before {
											top:-2px;
										}
										display:inline-flex;
										align-items:center;
										gap: 5px;
										span.icon {
											flex: 0 0 18px;
											height:18px;
											margin-block: -1px;
											img {
												@include obj100(contain);
											}
										}
										span.caption {
										}
									}
								}
								& > a {
									&:before {
										display:inline-block;
										@include before_as_image('../images/icon-plus-white.svg', 13);
										position:relative;
										top:1px;
										margin-right:8px;
									}
									font-size: 13px;
									font-weight: 500;
								}
								& > ul {
									& > li {
										& > a {
											&:before {
												content:'';
												display:inline-block;
												@include wh(5);
												background-color:currentcolor;
												top:-4px;
												margin-inline:4px 12px;;
												position:relative;
											}
										}
									}
								}
							}
						}
					}


@media screen and (min-width: 1120px) {
					display:inline-flex;
					gap: 53px;
					div.item {
						& > ul {
							margin-bottom: 2.5em;
							& > li {
								margin-bottom:1em;
								& > a {
								}
								& > ul {
									margin-top:1em;
									& > li {
										margin-bottom:1em;
										& > a {
										}
									}
								}
							}
						}
					}
}
@media screen and (max-width: 1120px) {
					display:flex;
					gap: 2px;
					flex-direction:column;
					width: 335px;
					max-width:100%;
					div.item {
						display:flex;
						flex-direction:column;
						gap: 2px;
						& > ul {
							display:flex;
							flex-direction:column;
							gap: 2px;
							& > li {
								a {
									display:flex;
									align-items:center;
									@include wh(100%, 45);
									padding: 0 0 2px 10px;
									box-sizing: border-box;
									text-align: left;
								}
								&.has_icon {
									& > a {
										&:before {
											top:1px;
										}
									}
								}
								& > a {
									background-color: $basetextcolor;
									color: $basecolor;
								}
								& > ul {
									display:flex;
									flex-wrap:wrap;
									gap: 2px;
									margin-top:2px;
									& > li {
										flex: 0 0 calc((100% - 2px * 1) / 2);
										& > a {
											background-color: $basecolor;
											color:$basetextcolor;
											&:before {
												top: 1px;
											}
										}
									}
								}
							}
						}
					}

}


				}
			}
		}
	}
}

div#copyRight {
	background-color: $basetextcolor;
	color:$basecolor;
	padding-block:26px;
	@include maxwidth(768){
		padding-block-end: 86px;
	}
	text-align:right;
	font-size: 12px;
	font-weight: 500;
	line-height: 130%;
	@include maxwidth(768){
		font-size: 11px;
		text-align:center;
	}

	div.container {
		@include container(1320, 20);
		p {
		}
	}
}

div#totop {
	a {
	}
}


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

		transform: translateX(0px);
	}
}
*/