// スタイルシート common

@charset "utf-8";

@import "mixin";

body{
	@include root;
	position: relative;
}

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

$breakpoint_tab: 1024;
$breakpoint_mob: 599;

.default {
	@include contentdefault;
	@include maxwidth(1700){
		margin-left: 100px;
	}
	@include maxwidth($breakpoint_tab){
		margin-left: 0;
	}
}

@media screen and (min-width: 901px) {
	.fadein_object {
		opacity:0;
		transform: translateY(40px);
		transition: 2s;
		//&[data-top="already"] {
		[data-top="already"] & {
			opacity:1;
			transform: translateY(0);
		}
	}
}

.circlearrow,
.circlearrow_area a{
	position:relative;
	&:before, &:after {
		content:'';
		display:block;
	}
	&:before {
		width:40px;
		height:40px;
		border-radius: 9999px;
		background-color:$themecolor;
		color:$themecolor;
		position:absolute;
		right:0;
		top:0;
		bottom:0;
		margin:auto;
		box-sizing: border-box;
		transition: .4s;
		border: 1px solid transparent;
		@include maxwidth($breakpoint_mob){
			width: 32px;
			height: 32px;
		}
	}
	&:after {
		width:7px;
		height:7px;
		box-shadow: -2px -2px 0 0 $themetextcolor inset;
		position:absolute;
		right:17px;
		top:0;
		bottom:0;
		margin:auto;
		transform:rotateZ(-45deg);
		transition: .2s;
		@include maxwidth($breakpoint_mob){
			right: 13px;
		}
	}
	&:hover:before {
		background-color:$themetextcolor;
		border: 1px solid $themecolor;
	}
	&:hover:after {
		box-shadow: -2px -2px 0 0 $themecolor inset;
		//transform: translateX(3px) rotateZ(-45deg);
	}
}

@mixin circlearrow_detail($widthpx, $rightpospx, $circlebgcolor, $arrowcolor) {
	&:before {
		width: $widthpx * 1px;
		height: $widthpx * 1px;
		right: $rightpospx * 1px;
		background-color: $circlebgcolor;
	}
	&:after {
		right: ( $rightpospx + ( $widthpx - 7 ) / 2 ) * 1px;
		box-shadow: -2px -2px 0 0 $arrowcolor inset;
	}

}

.circlearrow_area.circlearrow_links {
	ul {
		display:inline-flex;
		flex-direction: column;
		li {
			margin-bottom:25px;
			@include maxwidth($breakpoint_mob){
				margin-bottom: 1rem;
			}
			&:last-child {
				margin-bottom:0;
			}
			a {
				color:$themecolor;
				@include f_all(16);
				display:flex;
				padding: 0 65px 0 0;
				min-height: 40px;
				align-items:center;
				justify-content:center;
				@include maxwidth($breakpoint_mob){
					padding-right: 48px;
					@include f_all(14);
				}
			}
		}
	}
}

header {
	position: relative;
/*============================
#header
============================*/
	div#header {
		position: absolute;
		left:0;
		right:0;
		top:0;
		padding-top:30px;
		z-index: 999;
		// body.subpage &{
		// 	position: absolute;
		// }
		div.container {
			display:flex;
			align-items: flex-start;
			@include container(1734, 20);
			div.title {
				margin-right: 50px;
				@include maxwidth(1400){
					margin-right: 0;
				}
				@include maxwidth($breakpoint_mob){
					margin-right: 80px;
				}
				h1.sitename {
					a {
						transition: .15s;
						display: inline-block;
						&:hover {
							opacity:.7;
						}
						img {
							width:370px;
							body.subpage &{
								width: 330px;
							}
							@include maxwidth(1100){
								width: 300px;
							}
							@include maxwidth($breakpoint_mob){
								width: 250px;
								min-width: 180px;
							}
						}
					}
				}
			}

/*============================
#gnav
============================*/
			div#gnav {
				margin-left:auto;
				a.close_button.noscroll {
				}
				@media (max-height:600px), (max-width:1024px){
					position: fixed;
					top: -120%;
					left: 0;
					right: 0;
					height: 100vh;
					background-color: #fff;
					transition: all 0.6s;
					body.menu_open & {
						top: 0;
					}
				}
				body.page-anniversary & {
				    opacity: 0;
					pointer-events: none;
				}
				body.page-anniversary.menu_open & {
				    opacity: 1;
					pointer-events: auto;
				}
				div.gnav_frame{
					display:flex;
					align-items:center;
					@include maxwidth(1400){
						flex-direction: column-reverse;
						align-items: flex-end;
					}
					@media (max-height:600px), (max-width:1024px){
						display: block;
					    position: absolute;
					    z-index: 999;
					    top:50%;
					    left:50%;
					    transform: translate(-50%,-50%);
					}
					div.main {
						@include f_all(16);
						margin-right: 22px;
						@include maxwidth(1400){
							margin-right: 0;
						}
						@include maxwidth($breakpoint_mob){
							@include f_all(14);
						}
						ul {
							display:flex;
							@media (max-height:600px), (max-width:1024px){
								display: block;
							}
							@media screen and(max-height:480px){
								display: flex;
							}
							li {
								margin-right:7px;
								@include maxwidth($breakpoint_tab){
									margin-right: 0;
								}
								@media screen and(max-height:600px){
									margin-left: 10px;
									margin-right: 10px;
								}
								&:last-child { margin-right:0; }
								a {
									display:inline-block;
									height: 28px;
									color: $themecolor;
									@include fw_b;
									display:flex;
									align-items:center;
									justify-content: center;
									//padding-bottom:10px;
									//padding-top:25px;
									//border-bottom: 2px solid transparent;
									position:relative;
									padding: 0 .5em .15em;
									border-radius:2px;
									transition: .15s;
									@include maxwidth($breakpoint_tab){
										justify-content: center;
										width: 80%;
										margin-right: auto;
										margin-left: auto;
									}
									@include maxwidth(680){
										width: auto;
									}
									@media screen and(max-height:480px){
										height: auto;
										writing-mode: vertical-lr;
										-webkit-writing-mode: vertical-lr;
										-ms-writing-mode:tb-lr;
										padding: .5em 1em .5em;
										width: auto;
									}
									&:hover {
										background-color:$themecolor;
										color:$themetextcolor;
									}
									margin-top:1.25em;
									//&:after {
									//	content:'';
									//	height:2px;
									//	position:absolute;
									//	left:0;
									//	right:0;
									//	bottom:0;
									//	background-color:$themecolor;
									//	transform: scaleX(0);
									//	transform-origin: left bottom;
									//	transition: .15s;
									//}
									//&:hover:after {
									//	//border-bottom: 2px solid $themecolor;;
									//	transform: scaleX(1);
	                                //
									//}
								}
							}
						}
					}
					div.contact {
						@media screen and(max-height:600px),(max-width:1024px){
							margin-top:2em;
						}
						ul {
							li {
								a.circlearrow {
									@include f_all(18, 90 ,"");
									@include fw_b;
									background:url(../images/icon-phone-white.png) 30px center / 19px auto no-repeat $themecolor;
									color:$themetextcolor;
									display:flex;
									width:264px;
									height:46px;
									align-items:center;
									border-radius:23px;
									padding-left:64px;
									box-sizing: border-box;
									position:relative;
									@include circlearrow_detail(25, 22, $themetextcolor, $themecolor);
									@media screen and(max-height:600px){
										margin-left: auto;
										margin-right: auto;
									}
								}
							}
						}
					}
				}
				body.menubutton_scrollout &,
				body.page-anniversary &
				{
					position: fixed;
					top: -120%;
					left: 0;
					right: 0;
					height: 100vh;
					background-color: #fff;
					transition: all 0.6s;
					div.gnav_frame{
						display: block;
					    position: absolute;
					    z-index: 999;
					    top:50%;
					    left:50%;
					    transform: translate(-50%,-50%);
					    div.main {
					    	ul{
					    		display: block;
								@media screen and(max-height:480px){
									display: flex;
								}
					    		li{
					    			a{
										justify-content: center;
										width: 80%;
										margin-right: auto;
										margin-left: auto;

					    			}
					    		}
					    	}
					    }
						div.contact {
								margin-top:2em;
						}
					}
				}
				body.menubutton_scrollout.menu_open &,
				body.page-anniversary.menu_open &
				{
					top: 0;
					div.gnav_frame{

					}
				}
			}
		}
	}
}

/*============================
#mainVisual
============================*/
div#mainVisual {
	div.container {
		position:relative;
		overflow: hidden;
		div.slides {
			div.slide_frame {
				p {
					height:100vh;//885px;
					width:100%;
					span {
						background:none center bottom 190px / cover no-repeat;
						display:block;
						width:100%;
						height:100vh;
						position:relative;
						@include maxwidth($breakpoint_tab){
							background-position: right 40% bottom 80px;
						}
						@include maxwidth($breakpoint_mob){
							background-position: left 45% bottom 80px;
						}
						@media screen and(max-height:750px){
							background-position: left 45% bottom 100px;
						}
						@media screen and(max-height:480px){
							background-position: center bottom 50px;
						}
						&:before {
							content:'';
							display:block;
							background-color:rgba(#e6e5ef, .4);
							position:absolute;
							top:0;
							right:0;
							// bottom:0;
							left:0;
							height: 120px;
							@include maxwidth(1400){
								height: 150px;
							}
							@include maxwidth(1024){
								height: 120px;
							}
						}
					}
				}
			}
		}
		div.overlay_frame{
			position: relative;
			&::before{
				content: "";
				position:absolute;
				left:0;
				bottom:0;
				right:0;
				//padding:16px 0 148px 58px;
				height: 50vh;
				// padding: 1.48148148148148vh 0 13.7037037037037vh 58px;
				background-color:$pastelcolor;
				clip-path: polygon(0 0, 100% 44.9725776965265%, 100% 100%, 0 100%);
				@include maxwidth(1400){
					height: 40vh;
				}
				@include maxwidth($breakpoint_tab){
					max-height: 382px;
				}
			}
			div.overlay_illust {
				position:absolute;
				right: 80px;
				//bottom: 62px;
				bottom: 5.74074074074074vh;
				@include maxwidth(1400){
					right: 5vw;
				}
				@include maxwidth($breakpoint_tab){
					right: -30px;
					bottom: 10.74074074074074vh;
				}
				@include maxwidth($breakpoint_mob){
					margin-bottom: 20%;
					margin-left: 20px;
					bottom: 50%;
					// transform: translateY(-60%);
				}
				@include maxwidth(480){
					margin-bottom: 140px;
				}
				@media (min-height:780px) and (max-width:480px){
					transform: translateY(-20%);
				}
				@media screen and(max-height:320px){
					right: 3.74074074074074vw;
					margin-bottom: 0;
					bottom: 30px;
				}
				img {
					//width:831px;
					//width: 43.28125vw;;
					//height: 886/1080;
					// height:82.037037037037vh;
					height:85.037037037037vh;
					width: auto;
					@include maxwidth(1400){
						height: 77vh;
					}
					@include maxwidth($breakpoint_mob){
						// max-height: 443px;
						max-height: 520px;
						// height: 90%;
						height: auto;

					}
				}
			}
			div.overlay_textimage {
				position:absolute;
				left:72px;
				bottom:115px;
				right:0;
				@include maxwidth(1400){
					left: 30px;
				}
				@include maxwidth($breakpoint_mob){
					left: 10px;
					bottom: 92px;
				}
				@media screen and(max-height:480px){
					bottom: 50px;
				}
				img {
					//width: 709px;
					//width: 36.9270833333333vw;
					//height:382px;
					height: 35.3703703703704vh;
					width:auto;
					@include maxwidth(1800){
						height: 27vh;
					}
					// @media (max-height:600px), (max-width:1024px){
					@include maxwidth($breakpoint_tab){
						// height: 20vh;
						min-height: 140px;
					}
					@include maxwidth(800){
						max-height: 180px;
					}
					@include maxwidth($breakpoint_mob){
						height: 20vh;
						min-height: 140px;
					}
				}
			}
		}
		div.headerScroll {
			position:absolute;
			width:54px;
			// height:68px;
			height: auto;
			left:0;
			right:0;
			bottom:40px;
			margin:auto;
			@include maxwidth(1400){bottom: 30px;}
			@include maxwidth($breakpoint_mob){
				bottom: 20px;
			}
			@media screen and(max-height:600px){
				bottom: 15px;
			}
			&:before {
				content:'SCROLL';
				@include f_all(12, 120, "");
				text-align:center;
				display:block;
			}
			a {
				display:block;
				width:42px;
				height:42px;
				//background:url(../images/icon-scroll-color.png) center / contain no-repeat;
				white-space: nowrap;
				text-indent: 42px;
				overflow:hidden;
				border-radius:21px;
				box-sizing: border-box;
				border:1.5px solid $themecolor;
				margin:13px auto 0;
				position:relative;
				@include maxwidth($breakpoint_mob){
					width: 28px;
					height: 28px;
					margin-top: 8px;
				}
				@media screen and(max-height:480px){
					width: 28px;
					height: 28px;
					margin-top: 8px;
				}
				&:after {
					content:'';
					display:block;
					width:8px;
					height:8px;
					box-shadow: -2px -2px 0 0 $themecolor inset;
					position:absolute;
					right:0;
					left:0;
					top:0;
					bottom:0;
					margin:auto;
					transform:translateY(-1px) rotateZ(45deg);
					transition: .2s;
				}
				&:hover:after {
					transform:translateY(4px) rotateZ(45deg);
				}
			}
		}
	}
}

.common_heading_frame{
	position: relative;
	&:before, &:after {
		content:'';
		display:block;
		background-color:$themecolor;
		position:absolute;
		z-index:1;
	}
	&:before {
		width: 1px;
		height:148px;
		@include maxwidth($breakpoint_mob){
			height: 100px;
		}
	}
	&:after {
		width: 9px;
		height:9px;
		top:146px;
	}
}
.common_heading_01 {
	@include f_all(16, 160, "");
	&:after {
		content:attr(data-en);
		display:block;
		@include f_all(42, "", 96);
		color:$themecolor;
		@include fw_b;
		margin-top:-20px;
		@include maxwidth($breakpoint_mob){
			@include f_all(32, 80, 96);
		}
	}
}

main {

/*============================
#content
============================*/
	div#content {
		$threshold-a:1400;
		position: relative;
		body.subpage &{
			padding-top: 110px;
			@include maxwidth($threshold-a){
				padding-top: 150px;
			}
			@include maxwidth($breakpoint_tab){
				padding-top: 110px;
			}
		}
		body.page-anniversary & {
		    padding-top: 0px;
		}
		&:before{
			content:'';
			display:block;
			position:absolute;
			height: 580px;
			width: 100%;
			background: $pastelcolor;
			top: 190px;
			left: 0;
			right: 0;
			clip-path: polygon(0 0, 100% 0, 100% 400px, 0 100%);
			@include maxwidth($threshold-a){
				top: 230px;
			}
			@include maxwidth($breakpoint_tab){
				top: 190px;
			}
		}
		div#subpageHeading {
			// background: none center / cover no-repeat;
			background: url(../images/contentheader-default.jpg) center center / cover no-repeat;
			color:$basecolor;
			max-width: 1500px;
			height:320px;
			margin-left: 410px;
			position:relative;
			@include maxwidth($threshold-a){
				margin-left: 180px;
			}
			@include maxwidth($breakpoint_tab){
				margin-left: 0;
				height: 280px;
			}
			@include maxwidth($breakpoint_mob){
				height: 230px;
			}
			&:before {
					content:'';
					display:block;
					position:absolute;
					left:0;
					right:0;
					top:0;
					bottom:0;
					background: rgba($themecolor, .15);
					@include maxwidth($breakpoint_tab){
						background: rgba($themecolor, .3);
					}
			}
			div.container {
				position: absolute;
				left: -152px;
				top: 80px;
				@include maxwidth($threshold-a){
					left: -100px;
				}
				@include maxwidth($breakpoint_tab){
					left: 50px;
					top: 0;
				}
				@include maxwidth($breakpoint_mob){
					left: 30px;
				}
				h2 {
					display:flex;
					flex-direction: column;
					justify-content:center;
					writing-mode: vertical-lr;
					-webkit-writing-mode: vertical-lr;
					-ms-writing-mode:tb-lr;
					color: $themecolor;
					padding-top: 120px;
					position: relative;
					white-space: nowrap;
					@include maxwidth($breakpoint_tab){
						padding-top: 90px;
						padding-right: 30px;
						writing-mode: horizontal-tb;
						-webkit-writing-mode: horizontal-tb;
						-ms-writing-mode:lr-tb;
						flex-direction: column-reverse;
						white-space: normal;
					}
					&:before, &:after {
						content:'';
						display:block;
						background-color:$themecolor;
						position:absolute;
						z-index:1;
						@include maxwidth($breakpoint_tab){
							background-color: #fff;
						}
					}
					&:before {
						margin-right: 22px;
						width: 1px;
						height:80px;
						top: 0;
						@include maxwidth($breakpoint_tab){
							left: 14px;
						}
					}
					&:after {
						margin-right: 22px;
						width: 9px;
						height:9px;
						top:80px;
						@include maxwidth($breakpoint_tab){
							left: 10px;
						}
					}
					span {
						&.heading_ja {
							@include f_all(36, 360, 40);
							color: #000;
							margin-bottom:6px;
							@include maxwidth($breakpoint_tab){
								@include f_all(32, 160, 35);
								color: #fff;
							}
							@include maxwidth($breakpoint_mob){
								@include f_all(24, 80, 30);
							}
							&:before {
								content:'';
								display:block;
								position:absolute;
								bottom: -25px;
								left: 0;
								right: 0;
								background-color: $themecolor;
								height: 1px;
								width: 40px;
								transform:rotateZ(25deg);
								@include maxwidth($breakpoint_tab){
									background-color: #fff;
								}
								@include maxwidth($breakpoint_mob){
									bottom: -20px;
								}
							}
						}
						&.heading_en {
							margin-left: 5px;
							margin-top: 5px;
							@include f_all(16, 320, 22);
							text-stroke:.5px $themecolor;
							-webkit-text-stroke:.5px $themecolor;
							@include maxwidth($breakpoint_tab){
								margin-bottom: 5px;
								color: #fff;
								text-stroke:.5px #fff;
								-webkit-text-stroke:.5px #fff;
							}
						}
					}
				}
			}
		}

		div#subpageTopicPath {
			position: relative;
			color:$basetextcolor;
			margin-left: 410px;
			padding:16px 0;
			background-color: transparent;
			@include maxwidth($threshold-a){
				margin-left: 180px;
			}
			@include maxwidth($breakpoint_tab){
				margin-left: 30px;
				margin-right: 30px;
				padding:16px 20px 20px;
				border-bottom: 1px solid $themecolor;
			}
			div.container {
				ul {
					@include f_all(16, "", 21);
					@include maxwidth($breakpoint_tab){
						@include f_all(14, "", 18);
					}
					@include maxwidth($breakpoint_mob){
						@include f_all(12, "", 16);
					}
					li {
						display:inline;
						&:before {
							content:'|';
							margin: 0 1em;
						}
						&:first-child:before {
							display:none;
						}
					}
				}
			}
		}

		div#subpageContent {
			color:$basetextcolor;
			position:relative;
			min-height: calc(232px * 2);
			padding:120px 0 120px;
			box-sizing: border-box;
			@include maxwidth($breakpoint_tab){
				padding-top: 80px;
				padding-bottom: 80px;
			}
			div.container {
				@include container(900, 30);
				position:relative;
				z-index:1;
			}
		}

		section {
/*============================
#toppageCompany
============================*/
			div#toppageCompany {
				position:relative;
				padding: 78px 0 141px;
				display:flex;
				align-items:center;
				justify-content:center;
				@include maxwidth($breakpoint_mob){
					padding: 50px 0 80px;
				}
				&:before, &:after {
					content:'';
					display:block;
					background-color:$themecolor;
					position:absolute;
					left:0;
					right:0;
					margin:auto;
					z-index:1;
				}
				&:before {
					width: 1px;
					height:120px;
					top:0;
					@include maxwidth($breakpoint_mob){
						height: 100px;
					}
				}
				&:after {
					width: 9px;
					height:9px;
					top:118px;
					@include maxwidth($breakpoint_mob){
						top: 95px;
					}
				}
				div.bgimage {
					position:absolute;
					left:0;
					top:0;
					bottom: 0;
					width:100%;
					div {
						height:100%;
					}
					p {
						height:100%;
						background:none center / cover no-repeat;
					}
				}
				div.container {
					@include container(812,50);
					margin-top: 80px;
					@include maxwidth($breakpoint_mob){
						margin-left: 20px;
						margin-right: 20px;
					}
					div.heading {
						text-align:center;
						margin-bottom: 25px;
						position: relative;
						p {
							img {
								width: 80%;
								// width: 220px;
								@include maxwidth($breakpoint_tab){
									// width: 380px;
								}
								@include maxwidth($breakpoint_mob){
									// width: 235px;
									max-width: 520px;
									width: 90%;
								}
							}
						}
					}
					div.body {
						position: relative;
						background-color:rgba($pastelcolor, .85);
						padding: 40px 20px 40px;
						// @include maxwidth($breakpoint_mob){
						// 	padding-top: 80px;
						// 	padding-bottom: 50px;
						// }
						// &::before{
						// 	content: "";
						// 	position: absolute;
						// 	top: 75px;
						// 	left: 50%;
						// 	transform: translateX(-50%);
						// 	width: 395px;
						// 	height: 265px;
						// 	background: url(../images/concept-illust01.png) center / contain no-repeat;
						// 	@include maxwidth($breakpoint_mob){
						// 		width: 280px;
						// 		height: 188px;
						// 		top: 110px;
						// 	}
						// 	@include maxwidth(400){
						// 		width: 260px;
						// 		height: 174px;
						// 	}
						// }
						div.text {
							width:540px;
							margin:0 auto 30px;
							position: relative;
							@include f_all(16, "", 32);
							@include maxwidth($breakpoint_mob){
								@include f_all(14, "", 28);
							}
							@include maxwidth(700){
								width: auto;
								margin: 0 10px 1rem;
							}
							p {
							}
						}
					}
					div.link.circlearrow_area.circlearrow_links {
						text-align:center;
						ul {
							// margin-right: -55px;
							display: flex;
							flex-direction: row;
							justify-content: center;
							@include maxwidth($breakpoint_mob){
								// margin-right: -32px;
								display: inline-block;
							}
							li {
								margin: 0 25px;
								@include maxwidth($breakpoint_tab){
									margin: 0 15px;
								}
								@include maxwidth($breakpoint_mob){
									margin: 10px 0 0;
								}
								a {
									&::before{
										content: none;
									}
									color: #fff;
									background-color: $themecolor;
									padding: 0 35px 0 25px;
									width: 185px;
									box-sizing: border-box;
								}
							}
						}
					}
				}
			}

/*============================
#toppageBusiness
============================*/
			div#toppageBusiness {
				$threshold-a:1280;
				position:relative;
				// background: none center / cover no-repeat;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover!important;
				padding-top:115px;
				padding-bottom:60px;
				@include maxwidth($breakpoint_mob){
					padding-top: 98px;
				}
				&:before {
					z-index:1;
					content:'';
					display:block;
					background-color:$pastelcolor;
					left:0;
					right:0;
					top:0;
					height:270px;
					position:absolute;
					clip-path: polygon(0 0, 100% 0, 100% 100%, 0 20px);
					@include maxwidth($breakpoint_tab){
						height: 232px;
						clip-path: polygon(0 0, 100% 0, 100% 100%, 0 145px);
					}
				}
				&:after {
					content:'';
					background-color:rgba($basecolor, .85);
					display:block;
					position:absolute;
					top:0;
					right:0;
					bottom:0;
					left:0;
				}
				div.container {
					z-index:1;
					@include container(1334, 50);
					@include maxwidth($breakpoint_mob){
						margin-right: 30px;
						margin-left: 30px;
					}
					div.heading {
						padding-left: 30px;
						&:before{
							height: 145px;
							top: -115px;
							left: 5px;
							@include maxwidth($breakpoint_mob){
								height: 135px;
								top: -100px;
							}
						}
						&:after {
							top: 30px;
							left: 1px;
						}
						h2.common_heading_01 {
						}
					}
					div.text {
						max-width: 536px;
						@include f_all(16, "", 32);
						margin-bottom:90px;
						@include maxwidth($breakpoint_mob){
							@include f_all(14, "", 28);
						}
					}
					div.body {
						div.item {
							display:flex;
							align-items: flex-end;
							margin-bottom:40px;
							position: relative;
							@include maxwidth(1500){
								justify-content: center;
							}
							@include maxwidth($threshold-a){
								display: block;
								margin-bottom: 0px;
								padding-bottom: 60px;
							}
							@include maxwidth($breakpoint_tab){
								min-height: 480px;
							}
							&:nth-child(2n) {
								flex-direction: row-reverse;
								div.c {
									border-radius: 35px 0 0 35px;
								}
								@include maxwidth($threshold-a){
									div.c {
										margin-right: auto;
										border-radius: 35px;
									}
									div.v { right: 0;}
								}
								@include maxwidth($breakpoint_mob){
									div.v {	right: -30px;
									}
								}
							}
							&:nth-child(2n+1) {
								@include maxwidth($threshold-a){
									div.c {	margin-left: auto;}
									div.v {	left: 0;}
								}
								@include maxwidth($breakpoint_mob){
									div.v {
										left: -30px;
										right: -30px;
									}
								}
							}
							div.v {
								flex: 0 1 675px;
								height: 400px;
								@include maxwidth(1500){
									width: 588px;
								}
								@include maxwidth($threshold-a){
									position: absolute;
									bottom: 0;
									top: 25px;
								}
								@include maxwidth($breakpoint_tab){
									width: 80%;
									max-width: 588px;
									top: auto;
									height: 280px;
								}
								@include maxwidth($breakpoint_mob){
									width: 100%;
								}
								img {
									width: 100%;
									height: 100%;
									object-fit: cover;
								}
							}
							div.c {
								flex: 0 1 660px;
								background-color:$basecolor;
								margin-top:60px;
								border-radius: 0 35px 35px 0;
								padding: 15px 90px 80px 100px;
								box-sizing: border-box;
								position:relative;
								@include maxwidth(1500){
									flex: 0 1 540px;
									padding: 15px 60px 30px;
								}
								@include maxwidth($threshold-a){
									width: 540px;
									border-radius: 35px;
									background-color:rgba($basecolor,.9);
									margin-top: 80px;
									// margin-bottom: 80px;
								}
								@include maxwidth($breakpoint_tab){
									margin-bottom: 0;
									padding: 15px 40px 30px;
								}
								@include maxwidth($breakpoint_mob){
									width: auto;
									padding: 15px 20px 30px;
									margin-top: 40px;
								}
								&:before {
									content:'';
									position:absolute;
									left:64px;
									top:-47px;
									display:block;
									width:164px;
									height:164px;
									border-radius:82px;
									background-color:#eef5f4;
									@include maxwidth($breakpoint_tab){
										width: 156px;
										height: 156px;
										left: 0;
										right: 0;
										margin: 0 auto;
									}
									@include maxwidth($breakpoint_mob){
										width: 100px;
										height: 100px;
										top: -25px;
									}
								}
								h3 {
									@include f_all(32);
									margin-bottom:35px;
									position:relative;
									color: $themecolor;
									-webkit-text-stroke: .5px $themecolor;
									text-stroke: .5px $themecolor;
									@include maxwidth($breakpoint_tab){
										@include f_all(28);
										text-align: center;
									}
									@include maxwidth($breakpoint_mob){
										@include f_all(24, 80, "");
										margin-bottom: 1em;
									}
									&:before {
										content:attr(data-num);
										display:block;
										@include f_all(28, 80, "");
										@include fw_b;
										margin-bottom: 20px;
										@include maxwidth($breakpoint_tab){
											@include f_all(24, 80, "");
										}
									}
								}
								div.text2 {
									@include f_all(16, "", 32);
									margin-bottom:25px;
									@include maxwidth($breakpoint_mob){
										@include f_all(14, "", 28);
									}
								}
								div.link.circlearrow_area {
									@include maxwidth($threshold-a){
										text-align: right;
									}
									ul {
										li {
											a {
											}
										}
									}
								}
							}
						}
					}
				}
			}


			div.product_nav,div.newstopics_nav{
				@include container(800, 20);
				margin-bottom: 25px;
				ul {
					display:flex;
					justify-content:center;
					flex-wrap:wrap;
					li {
						margin: 0 10px 20px;
						a {
							background-color:$basecolor;
							color:$basetextcolor;
							border:1px solid currentcolor;
							width: 150px;
							height:32px;
							display:flex;
							justify-content:center;
							align-items:center;
							box-sizing: border-box;
							@include f_all(14);
							&.current {
								background-color: $basetextcolor;
								color:$basecolor;
								border-color:$basetextcolor
							}

						}
					}
					@include maxwidth(720){
						justify-content: normal;
						li {
							flex: 0 0 50%;
							margin: 0;
							padding: 0 10px 10px 0;
							box-sizing: border-box;
							&:nth-child(2n) {
								padding-right:0;
							}
							a {
								width: auto;
							}
						}
					}
				}
			}

/*============================
#toppageProduct
============================*/

			div#subpageProductArchive {
				padding: 70px 0 140px;
				div.container {
					@include container(1000, 20);
				}
				div.body {
					ul {
						display:flex;
						flex-wrap:wrap;
						@include maxwidth($breakpoint_tab){
							max-width: 800px;
							margin-left: auto;
							margin-right: auto;
						}
						li {
							flex: 0 0 calc(33.33% - 30px);
							flex-basis: calc(33.33% - 30px);
							margin:0 15px 40px;
							@include maxwidth($breakpoint_tab){
								flex: 0 0 calc(50% - 12px);
								flex-basis: calc(50% - 12px);
								margin:0 6px 30px;
							}
							a {
								& > span {
									display:block;
									//outline: 1px solid red;
									&.image{
										height:320px;
										background:none center / cover no-repeat;
										margin-bottom:15px;
										@include maxwidth($breakpoint_tab){
											height: 50vw;
											max-height: 320px;
										}
									}
									&.terms {
										@include f_all(14);
										display:flex;
										span.term {
											border-radius:5px;
											display:flex;
											align-items:center;
											height: 26px;
											padding: 0 20px;
											margin: 0 10px 7px 0;
											color: $basecolor;
											background-color: $themecolor;
											@include maxwidth($breakpoint_mob){
												padding: 5px 10px;
												box-sizing: border-box;
												margin-right: 0;
											}
										}
									}
									&.title {
										@include f_all(16, "", 22);
									}
								}
							}
						}
					}
				}
			}
			div#toppageProduct {
				background-color:$pastelcolor;
				padding: 115px 0 85px;
				@include maxwidth($breakpoint_mob){
					padding-top: 100px;
				}
				div.container {
					@include container(1364, 50);
					@include maxwidth($breakpoint_mob){
						margin-left: 30px;
						margin-right: 30px;
					}
					div.heading {
						padding-right: 30px;
						&:before{
							height: 145px;
							top: -115px;
							right: 5px;
							@include maxwidth($breakpoint_mob){
								height: 135px;
								top: -100px;
							}
						}
						&:after {
							top: 30px;
							right: 1px;
						}
						h2 {
							text-align:right;
						}
					}
					div.body {
						div.nav {
							margin-bottom:45px;
							@include maxwidth($breakpoint_tab){
								margin-top: 30px;
							}
							@include maxwidth($breakpoint_mob){
								margin-left: -10px;
								margin-right: -10px;
							}
							ul {
								display:flex;
								flex-wrap: wrap;
								@include maxwidth($breakpoint_tab){
									margin-left: auto;
									margin-right: auto;
									justify-content: center;
									max-width: 624px + 50px;
								}
								li {
									margin-right: 25px;
									margin-bottom: 15px;
									@include maxwidth($breakpoint_tab){
										margin: 0 10px 15px;
									}
									&:first-child {
										a{
											background-color: #000;
										}
									}
									&:last-child {
										margin-right:0;
										@include maxwidth($breakpoint_tab){
											margin-right: 12px;
										}
									}
									a {
										@include f_all(16);
										height:36px;
										padding: 0 15px;
										display:flex;
										align-items:center;
										background-color:$themecolor;
										color:$themetextcolor;
										transition: .2s;
										@include maxwidth($breakpoint_mob){
											@include f_all(14);
										}
										&.current {
										}
										&:hover {
											background-color:$themetextcolor;
											color:$themecolor;
										}
									}
								}
							}
						}
						div.headline.product_headline {
							margin-bottom:50px;
							@include maxwidth($breakpoint_tab){
								max-width: 682px;
								margin-right: auto;
								margin-left: auto;
							}
							@include maxwidth($breakpoint_mob){
								// max-width: (682px/2);
								margin-bottom: 30px;
							}
							ul {
								// @include clearfloat;
								display: grid;
								grid-template-columns: 2fr 1fr 1fr;
								grid-template-rows: 1fr 1fr;
								@include maxwidth($breakpoint_tab){
									grid-template-columns: 1fr 1fr;
									grid-template-rows: 2fr 1fr 1fr;
								}
								li {
									// float: left;
									// width: 341px;
									width: 100%;
									height: 25vw;
									max-height: 341px;
									@include maxwidth($breakpoint_tab){
										height: 50vw;
									}
									@include maxwidth($breakpoint_mob){
										// max-height: (341px/2);
									}
									&:first-child {
										width: 100%;
										height: 50vw;
										max-height:682px;
										grid-row: 1 / 3;
										grid-column: 1 / 2;
										@include maxwidth($breakpoint_tab){
											grid-row: 1 / 2;
											grid-column: 1 / 3;
											height: 100vw;
										}
										@include maxwidth($breakpoint_mob){
											// max-height:(682px/2);
										}
									}
									&:nth-child(2) {
										grid-row: 1 / 2;
										grid-column: 2 / 3;
										@include maxwidth($breakpoint_tab){
											grid-row: 2 / 3;
											grid-column: 1 / 2;
										}
									}
									&:nth-child(3) {
										grid-row: 1 / 2;
										grid-column: 3 / 4;
										@include maxwidth($breakpoint_tab){
											grid-row: 2 / 3;
											grid-column: 2 / 3;
										}
									}
									&:nth-child(4) {
										grid-row: 2 / 3;
										grid-column: 2 / 3;
										@include maxwidth($breakpoint_tab){
											grid-row: 3 / 4;
											grid-column: 1 / 2;
										}
									}
									&:nth-child(5) {
										grid-row: 2 / 3;
										grid-column: 3 / 4;
										@include maxwidth($breakpoint_tab){
											grid-row: 3 / 4;
											grid-column: 2 / 3;
										}
									}
									a {
										display:block;
										width:100%;
										height:100%;
										position:relative;
										span {
											display:block;
											&.image {
												background: none center / cover no-repeat;
												width:100%;
												height:100%;
											}
											&.terms {
												position: absolute;
												right: 0;
												bottom: 0;
												top: 0;
												left: 0;
												@include f_all(14);
												display:flex;
												@include maxwidth($breakpoint_tab){
													display: none;
												}
												span.term {
													border-radius:5px;
													display:flex;
													align-items:center;
													height: 26px;
													padding: 0 20px;
													margin: 10px 10px 0 10px;
													color: $basecolor;
													background-color: $themecolor;
												}
											}
											&.title {
												position:absolute;
												right:0;
												bottom:0;
												top:0;
												left:0;
												display:flex;
												@include f_all(20);
												background-color:rgba($themecolor, .85);
												justify-content:center;
												align-items:center;
												color:$themetextcolor;
												padding:20px;
												//@include fw_b;
												opacity:0;
												transition: .25s;
												@include maxwidth($breakpoint_tab){
													@include f_all(16);
													opacity:1;
													top: auto;
													padding:15px 20px;
												}
												@include maxwidth($breakpoint_mob){
													@include f_all(13);
													padding:10px 8px;
													height: 45px;
													box-sizing: border-box;
												}
											}
										}
										&:hover {
											span.title {
												opacity:1;
											}
										}
									}
								}
							}
						}
						div.more {
							text-align:center;
							a {
							}
						}
					}
				}
			}

/*============================
#toppageGreeting
============================*/
			div#toppageGreeting {
				position:relative;
				padding:50px 0 55px;
				background:none center left 0 / cover no-repeat $basecolor;
				&:before {
					content:'';
					background-color: rgba($basecolor, .7);
					position:absolute;
					top:0;
					right:0;
					bottom:0;
					left:0;
				}
				div.container {
					z-index:1;
					position:relative;
					text-align:center;
					@include container(615, 20);
					div.heading {
						margin-bottom:35px;
						h2 {
							img {
								width: 404px;
							}
						}
					}
					div.body {
						div.text {
							@include f_all(16, "", 32);
							margin-bottom:35px;
							@include maxwidth($breakpoint_mob){
								@include f_all(14);
							}
						}
						div.link {
							ul {
								li {
									a {
									}
								}
							}
						}
					}
				}
			}

/*============================
#toppageInformation
============================*/
			div#toppageInformation {
				padding: 113px 0 0px;
				@include maxwidth($breakpoint_mob){
					padding-top: 98px;
				}
				div.container {
					@include container(1364, 50);
					@include maxwidth($breakpoint_mob){
						margin-left: 30px;
						margin-right: 30px;
					}
					div.heading {
						margin-bottom:30px;
						padding-left: 30px;
						&:before{
							height: 145px;
							top: -115px;
							left: 5px;
							@include maxwidth($breakpoint_mob){
								height: 135px;
								top: -98px;
							}
						}
						&:after {
							top: 30px;
							left: 1px;
						}
						h2 {
						}
					}
					div.body {
						ul {
							display:flex;
							flex-wrap:wrap;
							justify-content:space-between;;
							li {
								margin: 0 0 20px;
								width: 49.4134897360704%;
								@include maxwidth($breakpoint_tab){
									max-width: 674px;
									width: 99.4134897360704%;
									margin-left: auto;
									margin-right: auto;
								}
								a {
									display:block;
									position:relative;
									transition: .25s;
									&:hover {
										box-shadow: .5px .5px 0 0 $themetextcolor, 8px 8px 0 0 rgba($themecolor, .85);
										span.text {
											&:before {
												border: 1px solid transparent;
												background-color:$themetextcolor;
											}
											&:after {
												box-shadow: -2px -2px 0 0 $themecolor inset;
											}
										}
									}
									span.text {
										position:absolute;
										left:0;
										top:0;
										bottom:0;
										background-color:rgba($themecolor, .85);
										color:$themetextcolor;
										width:353px;
										clip-path: polygon(0 0 , calc(100% - 100px) 0, 100% 100%, 0% 100%);
										@include f_all(26, "", 36);
										display:flex;
										align-items:center;
										padding-left: 75px;
										box-sizing: border-box;
										@include maxwidth($breakpoint_tab){
											@include f_all(20, "", 33);
										}
										@include maxwidth($breakpoint_mob){
											padding-left:15px;
											padding-top: 30px;
											align-items:start;
											@include f_all(16, "", 28);
											width: 180px;
											clip-path: polygon(0 0 , calc(100% - 60px) 0, 100% 100%, 0% 100%);
										}
										&:before {
											background-color: #000;
											right:auto;
											left: 20px;
											@include maxwidth($breakpoint_mob){
												left: 12px;
												top: auto;
												bottom: 20px;
											}
										}
										&:after {
											right:auto;
											left: 37px;
											@include maxwidth($breakpoint_mob){
												left: 24px;
												top: auto;
												bottom: 32px;
											}
										}
									}
									span.image {
										display: block;
										@include maxwidth($breakpoint_tab){
											height: 120px;
										}
										img {
											width: 100%;
											height: 100%;
											object-fit: cover;
										}
									}
								}
							}
						}
					}
				}
			}

/*============================
#toppageSdgs
============================*/
			div#toppageSdgs {
				padding: 60px 0 80px;
				@include maxwidth(800){
					padding: 20px 0 40px;
				}
				div.container {
					@include container(1364, 50);
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
					padding: 30px;
					box-sizing: border-box;
					@include maxwidth(800){
						margin-left: 30px;
						margin-right: 30px;
						padding: 24px;
					}
					@include maxwidth($breakpoint_mob){
						margin-left: 0;
						margin-right: 0;
					}
					&:before{
						content: "";
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;
						background-color: rgba(#000,0.65);
						backdrop-filter:blur(2px);
						-webkit-backdrop-filter:blur(2px);
					}
					div.body {
						position: relative;
						border: 1px solid #fff;
						padding: 65px 40px 40px;
						box-sizing: border-box;
						@include maxwidth(800){
							padding: 50px 30px 40px;
						}
						p.image{
							margin-bottom: 46px;
							text-align: center;
							@include maxwidth(800){
								margin-bottom: 35px;
							}
							img{
								width: 400px;
								height: auto;
								@include maxwidth(800){
									width: 90%;
									max-width: 400px;
									min-width: 230px;
								}
								@include maxwidth($breakpoint_mob){
									width: 100%;
									min-width: auto;
								}
							}
						}
						p.text{
							color: #fff;
							text-align: justify;
							width: 100%;
							max-width: 632px;
							margin: 0 auto 30px;
							@include f_all(16, "", 32);
							@include maxwidth(800){
								@include f_all(14, "", 28);
								width: auto;
							}
						}
						p.link{
							text-align: center;
							a{
								color: #fff;
								background-color: rgba(#24275a,.85);
								text-align: center;
								width: 320px;
								padding: 22px 20px 22px 40px;
								display: inline-block;
								box-sizing: border-box;
								@include f_all(16, "", 24);
								position: relative;
								@include maxwidth(800){
									width: 100%;
									max-width: 280px;
									@include f_all(14, "", 20);
								}
								&:before {
									content: "";
									position: absolute;
									width: 40px;
									height: 40px;
									border-radius: 50%;
									background-color: #000;
									right:auto;
									left: 15px;
									top: 50%;
									transform: translateY(-50%);
									@include maxwidth(800){
										left: 12px;
									}
								}
								&:after {
									content: "";
									position: absolute;
									right:auto;
									left: 30px;
									width:7px;
									height:7px;
									box-shadow: -2px -2px 0 0 #fff inset;
									position:absolute;
									top:0;
									bottom:0;
									margin:auto;
									transform:rotateZ(-45deg);
									transition: .2s;
									@include maxwidth($breakpoint_mob){
										left: 28px;
									}
								}
								&:hover{
									&:before {
										background-color: #fff;
									}
									&:after {
										box-shadow: -2px -2px 0 0 #000 inset;
									}
								}
							}
						}
					}
				}
			}

/*============================
#toppageNewstopics
============================*/
			div.newstopics_headline {
				ul {
					li {
						margin-bottom:15px;
						a {
							background-color:$basecolor;
							color:$basetextcolor;
							display:flex;
							flex-wrap:wrap;
							align-items:center;
							padding:16px 50px 20px 50px;
							transition: .25s;
							border-radius: 3px;
							border: 1px solid rgba($themecolor,.25);
							@include maxwidth($threshold-a){
								padding:16px 30px 20px;
							}
							@include maxwidth($breakpoint_mob){
								padding:16px 20px;
							}
							@include maxwidth(350){
								display: block;
							}
							&:hover {
								// border: 1px solid transparent;
								box-shadow: 3px 3px 0 0 rgba($themecolor, .75);
							}
							span.date {
								margin-right: 30px;
								@include f_all(16);
								margin-bottom:10px;
								color:#24275a;
								display: block;
								@include maxwidth($breakpoint_mob){
									margin-right: 15px;
									margin-bottom: 7px;
								}
							}
							span.terms {
								display: flex;
								flex-wrap: wrap;
								span.term,span.noterm {
									@include f_all(14);
									background-color:$pastelcolor;
									color:$themecolor;
									height: 29px;
									display:flex;
									align-items:center;
									padding:0 15px;
									margin: 0 15px 10px 0;
									@include maxwidth($breakpoint_mob){
										margin-right: 10px;
									}
								}
							}
							span.title {
								flex: 1 1 100%;
								@include f_all(18,"",23);
								@include maxwidth($breakpoint_mob){
									@include f_all(14,"",21);
								}
							}
						}
						// a {
						// 	padding: 33px 40px 33px 20px;
						// 	display:flex;
						// 	@include f_all(18, "", 24);
						// 	background:url(../images/icon-arrow-right-black.svg) right 18px center / 12px auto no-repeat;
						// 	border-bottom: 1px solid currentcolor;
						// 	@include maxwidth(900){
						// 		flex-direction: column;
						// 		@include f_all(14, "", 19);
						// 		padding-top:18px;
						// 		padding-bottom:18px;
						// 	}
						// 	span.date {
						// 		white-space: nowrap;
						// 		margin-right:42px;
						// 		@include maxwidth(900){
						// 			margin-right:0;
						// 			margin-bottom:10px;
						// 		}
						// 	}
						// 	span.title {
						// 	}
						// }
					}
				}
			}


			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#subpageNewstopicsArchive {
				background-color:$basecolor;
				color:$basetextcolor;
				padding:120px 0 240px;
				div.container {
					@include container(900, 30);
					//z-index:1;
					//position:relative;
				}
			}
			div#toppageNewstopics {
				$threshold-a:1420;
				$threshold-b:800;
				background-color:#eef5f4;
				padding:120px 0 105px;
				@include maxwidth($breakpoint_mob){
					padding-top: 100px;
					padding-bottom: 80px;
				}
				div.container {
					@include container(1364, 50);
					display:flex;
					flex-direction: row-reverse;
					@include maxwidth($breakpoint_tab){
						display: block;
					}
					@include maxwidth($breakpoint_mob){
						margin-left: 30px;
						margin-right: 30px;
					}
					div.heading {
						margin-left:auto;
						padding-right: 30px;
						@include maxwidth($breakpoint_tab){
							height: 170px;
							margin-bottom: 30px;
						}
						@include maxwidth($threshold-b){
							height: auto;
						}
						&:before{
							height: 145px;
							top: -115px;
							right: 5px;
							@include maxwidth($breakpoint_mob){
								height: 135px;
								top: -100px;
							}
						}
						&:after {
							top: 30px;
							right: 1px;
						}
						h2 {
							text-align:right;
							white-space: nowrap;
							@include maxwidth(380){
								margin-left: -15px;
								&::after{
									@include f_all(30, 30, 96);

								}
							}
						}
						div.nav {
							@include maxwidth($breakpoint_tab){
								position: absolute;
								left: 0;
								top: 0;
							}
							@include maxwidth($threshold-b){
								position: static;
								text-align: right;
							}
							@include maxwidth($breakpoint_mob){
								text-align: left;
							}
							ul {
								li {
									margin-bottom:0;
									&:first-child { margin-bottom: 12px;
										a{
											&:before {
												background-color: #000;
											}
										}
										&:hover{
											a{
												&:before {
													background-color: #fff;
												}
											}
										}
									}
									a {
										padding-right:0;
										padding-left:65px;
										&:before {
											right:auto; left: 0;
										}
										&:after {
											right:auto; left: 16px;
											@include maxwidth($breakpoint_mob){
												left: 12px;
											}
										}
										justify-content:flex-start;

										&:not(.current) {
											&:before {
												background-color: transparent;
											}
											&:after {
												box-shadow:-2px -2px 0 0 $themecolor inset;
											}
										}
									}
								}
							}
						}
					}
					div.body {
						margin-right:70px;
						flex: 0 1 897px;
						@include maxwidth($threshold-a){
							flex: 0 1 100%;
							max-width: 897px;
							margin-right: 50px;
						}
						@include maxwidth($breakpoint_tab){
							margin-right: 0;
							max-width: none;
							// max-width: 674px;
							// margin-right: auto;
							// margin-left: auto;
						}
						div.headline.newstopics_headline {
							ul {
								li {
									margin-bottom:15px;
									a {
										background-color:$basecolor;
										color:$basetextcolor;
										display:flex;
										flex-wrap:wrap;
										align-items:center;
										padding:16px 50px 20px 50px;
										transition: .25s;
										@include maxwidth($threshold-a){
											padding:16px 30px 20px;
										}
										@include maxwidth($breakpoint_mob){
											padding:16px 20px;
										}
										@include maxwidth(350){
											display: block;
										}
										&:hover {
											//opacity:.5;
											box-shadow: 3px 3px 0 0 rgba($themecolor, .75);
										}
										span.date {
											margin-right: 30px;
											@include f_all(16);
											margin-bottom:10px;
											color:#24275a;
											display: block;
											@include maxwidth($breakpoint_mob){
												margin-right: 15px;
												margin-bottom: 7px;
											}
										}
										span.terms {
											display: flex;
											span.term,span.noterm {
												@include f_all(14);
												background-color:$pastelcolor;
												color:$themecolor;
												height: 29px;
												display:flex;
												align-items:center;
												padding:0 15px;
												margin: 0 15px 10px 0;
												@include maxwidth($breakpoint_mob){
													margin-right: 10px;
												}
											}
										}
										span.title {
											flex: 1 1 100%;
											@include f_all(18,"",23);
											@include maxwidth($breakpoint_mob){
												@include f_all(16,"",21);
											}
										}
									}
								}
							}
						}
					}
				}
			}

/*============================
#toppageRecruit
============================*/
			div#toppageRecruit {
				$threshold-a:1800;
				$threshold-b:800;
				padding:110px 0 90px;
				position:relative;
				@include maxwidth($breakpoint_mob){
					padding-top: 100px;
					padding-bottom: 0;
				}
				div.container {
					@include container(1364, 50);
					@include maxwidth($threshold-b){
						margin-left: 0px;
						margin-right: 0px;
					}
					position:static;
					div.heading {
						margin-bottom:35px;
						padding-left: 30px;
						@include maxwidth($threshold-b){
							margin-left: 50px;
						}
						@include maxwidth($breakpoint_mob){
							margin-left: 30px;
						}
						&:before{
							height: 145px;
							top: -110px;
							left: 5px;
							@include maxwidth($breakpoint_mob){
								height: 135px;
								top: -100px;
							}
						}
						&:after {
							top: 30px;
							left: 1px;
						}
						h2 {
						}
					}
					div.body {
						@include maxwidth($threshold-a){
							display: flex;
							margin-bottom: 50px;
							position: relative;
						}
						@include maxwidth($threshold-b){
							display: block;
							margin-left: 50px;
							margin-right: 50px;
						}
						@include maxwidth($breakpoint_mob){
							margin-left: 30px;
							margin-right: 30px;
						}
						div.text {
							max-width: 472px;
							@include f_all(16, "",32);
							margin-bottom:50px;
							@include maxwidth($threshold-a){
								margin-bottom: 0;
							}
							@include maxwidth($threshold-b){
								margin-bottom: 35px;
								@include f_all(14, "",28);
							}
						}
						div.link {
							@include maxwidth($threshold-a){
								position: absolute;
								bottom: 0;
								right: 0;
							}
							@include maxwidth($threshold-b){
								position: static;
								text-align: center;
							}
							ul {
								li {
									a {
									}
								}
							}
						}
					}
					div.visual {
						position:absolute;
						right:0;
						top:0;
						bottom:0;
						width:51.5625%;
						display:flex;
						@include maxwidth($threshold-a){
							position:static;
							height: 500px;
							width: 100%;
						}
						@include maxwidth($breakpoint_mob){
							display: block;
							height: auto;
						}
						span {
							flex: 1 1 33.33%;
							display:block;
							background:none center left 51% / cover no-repeat;
							@include maxwidth($breakpoint_mob){
								display: block;
								height: 180px;
								width: 100%;
							}
						}
					}
				}
			}
		}

/*============================
#contentFooter
============================*/
		div#contentFooter {

/*============================
#contentFooterContact
============================*/
			div#contentFooterContact {
				background:none cover / cover no-repeat $themecolor;
				color: $themetextcolor;
				padding:115px 0 100px;
				position:relative;
				@include maxwidth($breakpoint_tab){
					padding-top: 100px;
				}
				&:before {
					content:'';
					background-color: rgba($themecolor, .6);
					position:absolute;
					top:0;
					right:0;
					bottom:0;
					left:0;
				}
				div.container {
					display:flex;
					flex-direction: row-reverse;
					@include container(1315, 50);
					@include maxwidth($breakpoint_tab){
						display: block;
					}
					@include maxwidth($breakpoint_mob){
						margin-left: 30px;
						margin-right: 30px;
					}
					div.heading {
						text-align:right;
						margin-left: auto;
						&:before{
							height: 145px;
							top: -115px;
							right: 5px;
							background-color: $basecolor;
							@include maxwidth($breakpoint_mob){
								height: 135px;
								top: -100px;
							}
						}
						&:after {
							background-color: $basecolor;
							top: 30px;
							right: 1px;
						}
						h2 {
							padding-right: 30px;
							&:after {
								color:inherit;
							}
						}
						div.text {
							max-width: 472px;
							@include f_all(16, "", 42);
							text-align: left;
							@include maxwidth($breakpoint_tab){
								margin: 0 auto 40px;
								@include f_all(14, "", 28);
							}
						}
					}
					div.body {
						margin-right: 50px;
						@include maxwidth($breakpoint_tab){
							max-width: 472px;
							margin-left: auto;
							margin-right: auto;
						}
						div.buttons {
							ul {
								li {
									margin-bottom:30px;
									&:last-child {
										margin-bottom:0;
									}
									a {
										background-color: $pastelcolor;
										color: $basetextcolor;
										width: 486px;
										height:120px;
										display:flex;
										align-items:center;
										flex-direction: column;
										justify-content:center;
										transition: .25s;
										@include maxwidth($breakpoint_mob){
											width: auto;
											height: 106px;
											padding: 7px 20px;
											box-sizing: border-box;
										}
										@include maxwidth(380){
											padding: 7px 12px;
										}
										div {
											text-align:center;
										}
										&:hover {
											//transform: translateX(2px) translateY(2px);
											box-shadow: .5px .5px 0 0 $themecolor, 7px 7px 0 0 $themetextcolor;
										}
									}
								}
								li.tel {
									a {
										div.text {
											@include f_all(14);
											margin-bottom:8px;
										}
										div.num {
											@include f_all(32, 90, "");
											@include fw_b;
											color:$themecolor;
											margin-bottom:5px;
											display:flex;
											align-items:center;
											@include maxwidth($breakpoint_mob){
												@include f_all(26, 90, "");
											}
											@include maxwidth(380){
												white-space: nowrap;
											}
											img {
												width:45px;
												margin-right:20px;
												//margin-top:-5px;
												@include maxwidth($breakpoint_mob){
													width: 36px;
													margin-right: 12px;
												}
												@include maxwidth(380){
													width: 28px;
												}
											}
										}
										div.time {
											@include f_all(16);
											@include maxwidth($breakpoint_mob){
												@include f_all(14)
											}
										}
									}
								}
								li.mail {
									a {
										div.text {
											display:flex;
											align-items:center;
											margin-top:15px;
											@include f_all(18,"",23);
											@include maxwidth($breakpoint_mob){
												@include f_all(16);
												margin-top: 0;
												margin-bottom: 8px;
											}
											@include maxwidth(380){
												text-align: left;
												@include f_all(14);
											}
											br.m-d-b{
												display: none;
												@include maxwidth(340){
													display: block;
												}
											}
											img {
												width:45px;
												margin-right:20px;
												@include maxwidth($breakpoint_mob){
													width: 36px;
													margin-right: 12px;
												}
												@include maxwidth(380){
													width: 28px;
												}
											}
										}
										div.time {
											@include f_all(16);
											@include maxwidth($breakpoint_mob){
												@include f_all(14)
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

/*============================
#totop
============================*/
div#totop {
	position:fixed;
	bottom:0;
	right:0;
	transform: translateY(50px);
	transition: .2s;
	z-index: 12;
	body.menubutton_scrollout & {
		transform: translateY(0);
	}
	div.container {
		a {
			display:block;
			background-color:$themecolor;
			color:$themetextcolor;
			width:50px;
			height:50px;
			overflow:hidden;
			span.l {
				visibility: hidden;
				display:block;
				width:0;
				height:30px;
			}
			&:before {
				content:'';
				display:block;
				position:absolute;
				margin:auto;
				left:0;
				right:0;
				top: 14px;
				width: 7px;
				height:7px;
				transform: rotateZ(45deg);
				box-shadow: 2px 2px 0 0 $themetextcolor inset;
				transition: .5s;
			}
			&:hover:before {
				transform: translateY(-5px) rotateZ(45deg);
			}
			&:after {
				content:'TOP';
				@include f_all(11);
				display:block;
				text-align:center;
			}
		}
	}
}
footer {
	div#footer {
		$threshold-a:1200;
		$threshold-b:800;
		$threshold-c:480;
		background-color:$pastelcolor;
		color:$basetextcolor;
		padding: 110px 0 60px;
		div.container {
			@include container(1640);
			display:flex;
			flex-wrap:wrap;
			@include maxwidth($breakpoint_tab){
				display: block;
			}
			div#footerContent {
				@include maxwidth($breakpoint_tab){
					text-align: center;
					margin-bottom: 80px;
				}
				div#footerLogo {
					margin-bottom:25px;
					a{
						display: inline-block;
						img {
							width:370px;
							@include maxwidth(1100){
								width: 320px;
							}
						}
					}
				}
				div#footerAddress {
					margin-bottom:30px;
					@include f_all(16, "", 36);

				}
				div#footerBanner {
					p {
						@include f_all(18, "", 36);
					}
				}
			}

			div#footerMenu {
				margin-left:auto;
				display:flex;
				@include maxwidth($breakpoint_tab){
					justify-content: center;
					margin-bottom: 110px;
				}
				@include maxwidth($threshold-b){
					flex-wrap: wrap;
					justify-content: space-between;
					max-width: 485px;
					margin-left: auto;
					margin-right: auto;
				}
				@include maxwidth($threshold-c){
					display: block;
				}
				div.item {
					margin-right:80px;
					@include maxwidth($threshold-a){
						margin-right: 30px;
					}
					@include maxwidth($threshold-b){
						flex: 1 0 50%;
						margin-right: 0;
						max-width: 200px;
					}
					@include maxwidth($threshold-c){
						max-width: none;
						margin-right: auto;
						margin-left: auto;
					}
					&:nth-child(2) {
						@include maxwidth($threshold-c){
							margin-top: 30px;
						}
					}
					&:last-child {
						margin-right:0;
						@include maxwidth($threshold-b){
							margin-top: 50px;
						}
						@include maxwidth($threshold-c){
							margin-right: auto;
							margin-top: 30px;
						}
					}
					ul {
						@include f_all(16);
						@include maxwidth($threshold-c){
							@include f_all(14);
						}
						ul {
							@include f_all(14);
							margin-top:21px;
							@include maxwidth($threshold-c){
								margin-top: 8px;
							}
							li {
								position:relative;
								padding-left:2em;
								@include maxwidth($threshold-c){
									padding-left: 0;
								}
								a{
									@include maxwidth($threshold-c){
										padding-left: 40px;
									}
								}
								&:before {
									content:'－';
									position:absolute;
									left:0;
									z-index: 1;
									@include maxwidth($threshold-c){
										left: 15px;
										top: 25%;
									}
								}
							}
						}
						li {
							margin-bottom:21px;
							@include maxwidth($threshold-c){
								margin-bottom: 8px;
							}
							a {
								@include circlearrow_detail(19, 0, transparent, $themecolor);
								display:block;
								padding-right: 40px;
								@include maxwidth($threshold-c){
									background-color:rgba(#fff,.5);
									display: flex;
									align-items: center;
									padding: 5px 20px;
									border-radius: 5px;
									height: 38px;
									box-sizing: border-box;
								}
								&:before {
									border: 1px solid $themecolor;
									transition: .25s;
									@include maxwidth($threshold-c){
										right: 15px;
									}
								}
								&:after {
									transform: translateX(-1px) rotateZ(-45deg);
									@include maxwidth($threshold-c){
										right: 21px;
									}
								}
								&:hover {
									&:before {
										background-color:$themetextcolor;
										border-color: $themetextcolor;
									}
								}
							}
						}
					}
				}
			}

			div#footerAsideMenu {
				flex: 1 1 100%;
				text-align:right;
				margin-bottom:35px;
				@include f_all(16);
				@include maxwidth($breakpoint_mob){
					@include f_all(14);
				}
				ul {
					li {
						display:inline;
						@include maxwidth($breakpoint_mob){
							display: block;
							margin-bottom: 12px;
						}
						&:after {content:'|'; margin: 0 1em 0 .85em;
							@include maxwidth($breakpoint_mob){
								content: none;
							}
						}
						&:last-child:after {display:none;}
						a {
							&:hover {
								opacity:.5;
							}
						}
					}
				}
			}

			div#footerCopy {
				flex: 1 1 100%;
				text-align:right;
				@include f_all(14);
				p {
				}
			}
		}
	}
}


/*============================
#gnavtoggleWrapper
============================*/

div#gnavtoggleWrapper {
	display:none;
	@media (max-height:600px), (max-width:1024px){
		display: block;
	}
	body.menubutton_scrollout & {
		display: block;
	}
	body.page-anniversary & {
	    display: block;
	}
	div.container {

/*============================
#gnavToggle
============================*/

		div#gnavToggle {
			a {
				width:54px;
				height:54px;
				background-color:$themecolor;
				position:absolute;
				right:30px;
				top:27px;
				z-index:10000;
				display:block;
				border-radius: 5px;
				@include maxwidth($breakpoint_mob){
					right: 20px;
				}
				// transform: translateY(-160px);
				// transition: .25s;
				body.admin-bar & {
					// top: 20px + 32px;
				}
				// body.spmenu_enable & {
				// 	transform: translateY(0);
				// }
				// body.menu_open & {
				// 	display:none;
				// }
				body.menubutton_scrollout & {
					top: 20px;
					position:fixed;
				}
				body.admin-bar.menubutton_scrollout & {
					top: calc(20px + 32px);
				}
				//display:none;
				//@include maxwidth(1140){
				//	display:block;
				//	body.menu_open & {
				//		display:none;
				//	}
				//}
				span {
					display:block;
					position:absolute;
					top:0;
					right:0;
					bottom:0;
					left:0;
					margin:auto;
					text-align:center;
					&.b {
						background-color: $accenttextcolor;
						width:32px;
						height:3px;
						&.b1 { transform: translateY(-11px);}
						&.b2 { transform: translateY(-1px);}
					}
					&.label {
						width:100%;
						height:15px;
						color:$accenttextcolor;
						@include f_all(12, 80, "");
						transform: translateY(12px) scale(0.8);
					}
					body.menu_open & {
						&.b {
							background-color:#CB2525;
							transition: all 0.6s;
						}
						&.b.b1 {
							transform: rotate(45deg);
						}
						&.b.b2 {
							transform: rotate(-45deg);
						}
						&.label {
							display: none;
						}
					}
				}
			}
		}
	}
}
div.pager {
    text-align: center;
    font-size: .875em;
    @media screen and (max-width: 540px) {
        font-size: .6875em;
    }
    a, span {
        display: inline-block;
        margin: 0 0.25em 0.75em;
        min-width: 3em;
        padding: 1em 1em;
        box-sizing: border-box;
        background-color: #eeeeee;
        &.current {
            background-color: $themecolor;
            color: $themetextcolor;
        }
        // border-radius: 10px;
    }
}


// 80th
// 2026-06-19 改修作業
#anniversaryFirstview {
    height: 100vh;
    height: 100svh;
    position: relative;
    font-family: "Noto Serif JP", serif;
    margin-bottom: 100px;
    &::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 740px;
        background: #e6e5ef;
        inset: auto 0 -60px 0;
        clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
    }
    .container {
        height: 100%;
        position: relative;
        .img {
            height: 100%;
            position: relative;
            &::after {
                content: '';
                pointer-events: none;
                position: absolute;
                inset: 0;
                background-color: rgba(#000, 0.5);
            }
            > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .overlay {
            color: $themetextcolor;
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding-top: 10px;
            box-sizing: border-box;

            .logo {
                width: 232px;
                > img {
                }
            }

            .text {
                font-size: clamp(30px, (48 / 1024 * 100vw),48px);
                font-weight: 500;
                line-height: 1.8;
                text-align: center;
                margin-top: 40px;
            }

            .logo2 {
                width: 382px;
                margin-top: 20px;
                > img {
                }
            }

            .topicpath {
                @include f_all(15);
                font-weight: 500;
                position: absolute;
                inset: 30px auto auto (50 / 1440 * 100vw);
                @include ff_ja;
                ul {
                    li {
                        display: inline-flex;
                        align-items: center;
                        &::after {
                            content: '｜';
                            margin: 0 0.5em;
                        }
                        &:last-of-type::after {
                            display: none;
                        }
                    }
                }
            }

            .scrolldown {
                --diff: 40px;
                display: block;
                width: 1em;
                height: calc(var(--diff) * 2);
                overflow: hidden;
                text-indent: -9999px;
                position: absolute;
                inset: auto 0 calc(var(--diff) * -1) 0;
                margin: auto;
                @include flex_centering;

                &::before, &::after {
                    content: '';
                    display: block;
                    width: 1px;
                    height: var(--diff);
                    position: absolute;
                    margin: auto;
                    background-color: #fff;
                }
                &::before {
                    inset: 0 0 auto 0;
                }
                &::after {
                    inset: auto 0 0 0;
                    background-color: $themecolor;
                }
            }
        }
    }
}

#anniversaryContent {
    margin: 100px 0 80px;
    position: relative;
    .container {
        @include container(1140, 20);

        .default {
            margin-left: 0px;
            > *:first-child {
                margin-top: 0px !important;
            }
        }

    }
}