@charset "UTF-8";
@import url('//fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

/*#########################################################

各種設定ファイル読み込み

#########################################################*/
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  outline: none !important;
}

/* HTML5 display-role reset for older browsers 
*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  scroll-behavior: smooth;
}

@media print, screen and (min-width: 769px) {
  html {
    overflow: auto;
  }
}

h1, h2, h3, h4, h5 {
	font-weight: bold;
}

* {
	--color-main: #333333;
	--color-sub: #BAA777;
	--color-require: #FF0000;
	--color-bg: #FAF6EC;
	--color-menu: #E0D7BF;
	--color-border: #707070;
	--font-oswald: "Oswald", sans-serif;
	
}

body {
  color: var(--color-main);
  background-color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: 'palt';
}

@media print, screen and (width > 768px) {
  body {
    min-width: 1000px;
    overflow: hidden;
  }
}

@media only screen and (width <= 768px) {
  .pc-only {
    display: none !important;
  }
}

@media print, screen and (width > 768px) {
  .sp-only {
    display: none !important;
  }
}

@keyframes loadingFade {
	0% {
		visibility: visible;
		opacity: 1;
	}
	
	98% {
		opacity: 0;
	}
	
	100% {
		visibility: hidden;
		opacity: 0;
	}
}

#yairo {
	.y-section {
		padding: 0 28px;
		
		&.y-section--case {
			margin-top: 17.06vw;
			padding: 84px 0 20px;
			background-color: var(--color-bg);
			position: relative;
			
			&::before {
				content: '';
				width: 100%;
				height: 17.06vw;
				background: var(--color-bg);
				clip-path: polygon(50% 0, 100% 100%, 0 100%);
				position: absolute;
				top: -17.06vw;
				left: 50%;
				translate: -50% 0;
			}
			
			@media print, screen and (width > 768px) {
				margin-top: 146px;
				padding-top: 74px;
				padding-bottom: 38px;
				
				&::before {
					min-width: 1440px;
					height: 146px;
					top: -146px;
				}
			}
			
			.y-lead {
				width: min(360px,85.333vw);
				margin: 0 auto 34px;
				
				@media print, screen and (width > 768px) {
					margin-bottom: 70px;
				}
			}
		}
		&.y-section--intro {
			padding-top: 100px;
			
			@media print, screen and (width > 768px) {
				padding: 200px 20px 0;
			}
			
			.y-lead {
				margin-bottom: 37px;
				max-width: 548px;
				
				@media print, screen and (width > 768px) {
					margin-bottom: 95px;
				}
			}
		}
		
		&.y-section--standard {
			padding-top: 100px;
			padding-bottom: 100px;
			
			@media print, screen and (width > 768px) {
				padding: 180px 20px 190px;
			}
		}
		&.y-section--faq {
			padding-top: 115px;
			padding-bottom: 70px;
			background: var(--color-bg);
			
			@media print, screen and (width > 768px) {
				padding: 130px 20px;
			}
			.y-lead {
				margin-bottom: 25px;
				
				@media print, screen and (width > 768px) {
					margin-bottom: 70px;
				}
			}	
		}
		
		&.y-section--contact {
			padding-top: 120px;
			padding-bottom: 70px;
			
			@media print,screen and (width > 768px) {
				padding-top: 200px;
				padding-bottom: 200px;
			}
			
			.y-lead {
				margin-bottom: 37px;
				
				@media print, screen and (width > 768px) {
					margin-bottom: 100px;
				}
			}
		}
	}
	
	.y-hd {
		margin: 0 auto 30px;

		font-weight: 700;
		letter-spacing: 0.2em;
		text-align: center;
		
		@media print, screen and (width > 768px) {
			margin-bottom: 34px;
		}
		
		&.y-hd--primary {
			padding-bottom: 22px;
			font-size: 31px;
			line-height: 1.25;
			
			position: relative;
			
			&::before {
				content: '';
				width: 100px;
				height: 8px;
				-webkit-mask-image: url(../images/category/yairo/img_wave.svg);
				-webkit-mask-size: auto 100%;
				-webkit-mask-repeat: repeat-x;
				-webkit-mask-position: left;
			
				mask-image: url(../images/category/yairo/img_wave.svg);
				mask-size: auto 100%;
				mask-repeat: repeat-x;
				mask-position: left;
				background-color: var(--color-main);
				
				position: absolute;
				left: 50%;
				bottom: 0;
				translate: -50% 0;
			}
			
			@media print, screen and (width > 768px) {
				padding-bottom: 27px;
				font-size: 42px;
				line-height: 1.57;
			}
		}
		
		&.y-hd--secondary {
			font-size: 25px;
			line-height: 1.36;
			
			@media print, screen and (width > 768px) {
				font-size: 33px;
			}
		}
	}
	
	.y-lead {
		width: fit-content;
		margin: auto;
		
		font-size: 16px;
		font-weight: 500;
		line-height: 1.6875;
		
		@media print, screen and (width > 768px) {
			font-size: 17px;
			line-height: 1.58;
		}
	}
	
	.y-table {
		width: 100%;
		
		.y-table__th ,
		.y-table__td {
			padding: 18px 0 18px 5px;
			border-bottom: 1px solid;
			text-align: left;
			vertical-align: top;
		}
		
		.y-table__th {
			padding-right: 15px;
			font-size: 16px;
			font-weight: 700;
			white-space: nowrap;
			
			@media print, screen and (width > 768px) {
				font-size: 17px;
			}
		}
		
		.y-table__td {
			font-size: 16px;
			line-height: 1.5625;
			@media print, screen and (width > 768px) {
				font-size: 17px;
			}
		}
		
		.y-table__em {
			font-weight: 700;
		}
		
		.y-table__big {
			font-size: 22px;
		}
		
		.y-table__note {
			&:not(:last-child) {
				margin-bottom: 8px;
			}
		}
	}
	
	.y-copy {
		margin: 0 auto 60px;
		display: grid;
		gap: 23px;
		font-size: 19px;
		font-weight: 700;
		letter-spacing: 0.5em;
		line-height: 1.4;
		color: #fff;
		writing-mode: vertical-rl;
		
		@media print, screen and (width > 768px) {
			font-size: 27px;
			margin: 0;
			position: absolute;
			top: 50%;
			right: 100px;
			translate: 0 -50%;
		}
		
		.y-copy__txt {
			&.y-animetitle {
				justify-content: flex-start;
				flex-wrap: nowrap;
					
				.y-animetitle__char {
					overflow: hidden;
					flex-wrap: nowrap;
					.y-animetitle__char__text {
						display: inline-block;
						transform: translateY(var(--x, -101%));
						transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
						transition-delay: calc(0.05s * var(--char-index));
					}
				}
					
			}			
		}
		
	}
	
	.y-logo {
		width: 226px;
		margin: 0 auto 200px;
		overflow: hidden;
		position: relative;
		
		@media print, screen and (width > 768px) {
			width: 296px;
			margin-bottom: 0;
		}
		
		.y-logo__img {
			width: 100%;
			height: auto;
			translate: -100% 0;
			opacity: 0;
		}
	}
	
	.y-catch {
		padding-bottom: 38px;
		margin-bottom: 34px;
		font-size: 34px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0.2em;
		color: #fff;
		text-align: center;
		
		position: relative;
		
		&::after {
			content: '';
			width: 120px;
			height: 5px;
			
			-webkit-mask-image: url(../images/category/yairo/img_weve.svg);
			-webkit-mask-position: left top;
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: 100%;
			
			mask-image: url(../images/category/yairo/img_wave.svg);
			mask-position: left top;
			mask-repeat: no-repeat;
			mask-size: 100%;
			
			background-color: #fff;
			
			position: absolute;
			left: 50%;
			bottom: 0;
			
			translate: -50% 0;
		}
		
		@media print, screen and (width > 768px) {
			padding-bottom: 47px;
			font-size: 58px;
			line-height: 1.48;
			
			&::after {
				width: 200px;
				height: 8px;
			}
		}
	}
	
	.y-animetitle {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
			
		.y-animetitle__char {
			overflow: hidden;
			.y-animetitle__char__text {
				display: inline-block;
				transform: translateX(var(--x, -101%));
				transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
				transition-delay: calc(0.05s * var(--char-index));
			}
		}
			
	}
	.y-animeimg {
		-webkit-filter: brightness(1500%); /* Safari */
		filter: brightness(1500%);
	}
	.js-animation {
		&.is-show {
			.y-animetitle {
				--x: 0;
			}
			.y-animeimg {
				-webkit-filter: brightness(100%); /* Safari */
				filter: brightness(100%);
				transition: filter .8s .5s;
			}
			
		}
	}
		
	
	.y-loading {
		display: grid;
		place-items: center;
		width: 100%;
		height: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		
		&.is_fade {
			animation: .6s ease-in .2s loadingFade forwards;
		}
		
		@media screen and (width <= 768px) {
			#lottie-player {
				width: 226px !important;
				height: auto;
			}
		}
		
	}

	.y-header {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 10;		
		
		.y-header__button {
			width: 36px;
			padding: 25px 0 0;
			background: none;
			border: 0;
			position: absolute;
			top: 22px;
			right: 20px;
			z-index: 10;
			
			@media print, screen and (width > 768px) {
				top: 67px;
				right: 53px;
			}
		}
		
		.y-header__line {
			width: 20px;
			height: 3px;
			background-color: var(--color-menu);
			border-radius: 2px;
			position: absolute;
			left: 50%;
			translate: -50% 0;
			
			&:nth-child(1) {
				top: 0;
				rotate: 0deg;
				transition: rotate .2s, top .3s .3s;
			}
			&:nth-child(2) {
				top: 8px;
				opacity: 1;
				transition: opacity .2s;
			}
			&:nth-child(3) {
				top: 16px;
				rotate: 0deg;
				transition: rotate .2s, top .3s .3s;
			}
		}
		
		.y-header__txt {
			font-size: 10px;
			line-height: 1.5;
			font-weight: 700;
			text-align: center;
			letter-spacing: 0.21em;
			color: var(--color-menu);
			display: grid;
		}
		
		.y-header__open,
		.y-header__close {
			grid-column: 1/2;
			grid-row: 1/2;
			position: relative;
			z-index: 2;
		}
		
		.y-header__close {
			z-index: 1;
			visibility: hidden;
		}
		
		&.is_open {
			.y-gmenu {
				translate: 0;
				transition: translate .4s;
			}
			
			.y-header__line {
				&:nth-child(1) {
					top: 8px;
					rotate: 35deg;
					transition: top .4s, rotate .2s .5s;
				}
				&:nth-child(2) {
					opacity: 0;
					transition: opacity .2s;
				}
				&:nth-child(3) {
					top: 8px;
					rotate: -35deg;
					transition: top .4s, rotate .2s .5s;
				}
			}
			
			.y-header__open {
				z-index: 1;
				visibility: hidden;
			}
			
			.y-header__close {
				z-index: 2;
				visibility: visible;
			}
		}
	}
	
	.y-gmenu {
		width: auto;
		height: 100vh;
		background: transparent;
		backdrop-filter: blur(20.18630027770996px);
		--webkit-backdrop-filter: blur(20.18630027770996px);
		background-color: rgb(44 24 0 / .4);

		position: fixed;
		top: 0;
		right: 0;
		z-index: 5;
		overflow-y: auto;
		translate: 100% 0;
		transition: translate .3s;		
		
		.y-gmenu__inner {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100vw;
			padding: 100px 34px 30px;
			
			@media print, screen and (width >768px) {
				width: fit-content;
				height: 100%;
				padding-top: 180px;
			}
		}
		
		.y-gmenu__list {
			width: fit-content;
			margin: 0 auto 140px;
		}
		
		.y-gmenu__item {
			&:not(:last-child) {
				margin-bottom: 20px;
			}
		}
		
		.y-gmenu__link {
			width: fit-content;
			display: block;
			font-size: 20px;
			line-height: 1.5;
			font-weight: 700;
			color: #fff;
			text-decoration: none;
			position: relative;
			padding-left: 25px;
			
			&::after {
				position: absolute;
				bottom: -5px;
				left: 0;
				width: 100%;
				height: 2px;
				content: "";
				transition: transform 0.2s;
				transform: translate(0, 0) scale(0, 1);
				transform-origin: center right;
				background-color: #fff;
			}
			
			&::before {
				content: '';
				width: 10px;
				height: 10px;
				background: url(../images/category/yairo/icon_menu.svg) no-repeat left top;
				background-size: 100%;
				position: absolute;
				left: 0;
				top: 50%;
				translate: 0 -50%;
			}
			
			&:hover&::after {
				transition: transform 0.3s;
				transform: translate(0, 0) scale(1);
				transform-origin: center left;
			}
		}

		.y-gmenu__info {
			color: #fff;
			.y-gmenu__company {
				margin-bottom: 6px;
				font-size: 14px;
				font-weight: 500;
				
				.y-gmenu__company__big {
					font-size: 18px;
					font-weight: 700;
				}
			}
			
			.y-gmenu__address {
				font-size: 16px;
				margin-bottom: 6px;
			}
			
			.y-gmenu__tel {
				display: block;
				position: relative;
				text-decoration: none;
				margin-bottom: 3px;
				padding-left: 20px;
				
				font-family: var(--font-oswald);
				font-size: 24px;
				font-weight: 500;
				line-height: 2;
				color: inherit;
				
				&::before {
					content: '';
					width: 14px;
					height: 15px;
					background: url(../images/category/yairo/icon_tel.svg) no-repeat left top;
					background-size: cover;
					position: absolute;
					left: 0;
					top: 19px;
				}
				@media print, screen and (width > 768px) {
					pointer-events: none;
					
				}
			}
			
			.y-gmenu__link {
				font-size: 16px;
				font-weight: 700;
				color: inherit;
				text-decoration: none;
			}
		}
	}

	.y-main {
		
		&::before {
			background: url(../images/category/yairo/bg_mv.png) repeat left top;
			background-size: 864px 560px;
			background-attachment: fixed;
			content: '';
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: fixed;
			z-index: 1;
			-webkit-filter: brightness(1500%); /* Safari */
			filter: brightness(1500%);
		}
		.y-main__inner {
			background-color: #fff;
			position: relative;
			z-index: 2;			
		}
		
		&.is_start {
			
			&::before {
				-webkit-filter: brightness(100%); /* Safari */
				filter: brightness(100%);		
				transition: filter .4s;
			}
			.y-logo__img {
				translate: 0 0;
				opacity: 1;
			}
			
			.y-catch.is-show {
				.y-animetitle {
					--x: 0;
				}
			}
			.y-mv__lead.is-show {
				translate: 0 0;
				opacity: 1;
				transition: opacity .4s, translate .3s;
			}
			
			.y-mv__box.is-show {
				.y-mv__txt {
					translate: 0 0;
					opacity: 1;
					transition: opacity .4s calc(0.2s * var(--txt-delay)), translate .4s calc(0.1s * var(--txt-delay));	
				}
			}
			.y-copy__txt.y-animetitle {
				--x: 0;
			}
		}
	}
	
	.y-mv {
		padding: 0 20px 65px;
		background-color: transparent;
		position: relative;
		z-index: 1;
		
		@media print,screen and (width > 768px) {
			padding: 0 20px 280px;
		}
		
		.y-mv__first {
			padding-top: 100px;
			position: relative;
			@media print,screen and (width > 768px) {
				height: 100lvh;
				display: grid;
				place-items: center;
				padding: 0 20px;
			}
		}
		
		.y-mv__inner {
			max-width: 884px;
			margin: auto;
			position: relative;
			@media print, screen and (width > 768px) {
				padding-top: 100px;
			}
		}
		
		.y-mv__lead {
			width: 74.666vw;
			margin: 0 auto 60px;
			font-size: 17px;
			font-weight: 900;
			line-height: 1.58;
			color: #fff;
			text-align: center;
			translate: 0 40px;
			opacity: 0;
			
			@media print,screen and (width > 768px) {
				width: auto;
				margin-bottom: 55px;
				font-size: 20px;
				line-height: 1.65;
			}
		}
		
		.y-mv__txt {
			width: 74.666vw;
			margin: 0 auto;
			font-size: 16px;
			line-height: 1.5625;
			font-weight: 700;
			color: #fff;
			translate: 0 30px;
			opacity: 0;
			
			&:not(:last-child) {
				margin-bottom: 30px;
			}
			
			@media print, screen and (width > 768px) {
				width: auto;
				font-size: 17px;
				line-height: 1.88;
				text-align: center;
				margin-bottom: 0 !important;
			}
		}
	}
	
	.y-about {
		width: calc(100% - 56px);
		padding: 70px 0 60px;
		margin: auto;
		
		@media print, screen and (width > 768px) {
			width: min(100%, 1200px);
		}
		
		.y-about__first {
			@media print, screen and (width > 768px) {
				padding: 180px 0 140px;
				margin-bottom: 130px;
				display: grid;
				grid-template-columns: 37.5% 1fr;
				gap: 0 9%;
			}
			
		}
		
		.y-about__txt {
			font-size: 16px;
			line-height: 1.6875;
			font-weight: 500;
			&:not(:last-child) {
				margin-bottom: 20px;
			}
			
			@media print,screen and (width > 768px) {
				font-size: 17px;
				line-height: 1.9;
				margin-bottom: 0 !important;
			}
		}
		
		.y-about__catch {
			width: fit-content;
			padding-right: 64px;
			margin-bottom: 12px;
			font-size: 31px;
			line-height: 1.25;
			letter-spacing: 0.1em;
			font-weight: 700;
			position: relative;
			
			&::after {
				content: '';
				width: 59px;
				height: 89px;
				background: url(../images/category/yairo/img_leaf.svg) no-repeat left top;
				background-size: 100%;
				position: absolute;
				right: 0;
				top: 50%;
				translate: 0 -50%;
			}
			
			@media print,screen and (width > 768px) {
				padding-right: 66px;
				margin-bottom: 18px;
				font-size: 49px;
				line-height: 1.34;
				
				&::after {
					width: 66px;
					height: 100px;
				}
			}
		}
		
		.y-about__lead {
			letter-spacing: 0.1em;
			font-weight: 700;
		}
		
		.y-about__desc {
			.y-about__lead {
				padding-bottom: 30px;
				margin-bottom: 30px;
				font-size: 20px;
				line-height: 1.45;
				position: relative;
				
				&::before {
					content: '';
					width: 153px;
					height: 6px;

					-webkit-mask-image: url(../images/category/yairo/img_wave.svg);
					-webkit-mask-size: auto 100%;
					-webkit-mask-repeat: repeat-x;
					-webkit-mask-position: left;
					
					mask-image: url(../images/category/yairo/img_wave.svg);
					mask-size: auto 100%;
					mask-repeat: repeat-x;
					mask-position: left;
					background-color: var(--color-main);

					position: absolute;
					left: 0;
					bottom: 0;
				}
				
				@media print, screen and (width > 768px) {
					padding-bottom: 37px;
					margin-bottom: 48px;
					font-size: 22px;
					line-height: 1.63;
					
					&::before {
						width: 200px;
						height: 8px;
					}
				}
			}
		}
		
		.y-about__photo {			
			@media screen and (width <= 768px) {
				width: calc(100vw - 28px);
				margin: 50px -28px 68px 0;
			}
		}
		
		.y-about__img {
			width: 100%;
			
			@media print, screen and (width > 768px) {
				width: max(100%, 52.986vw);
			}
		}
		
		.y-about__box {
			padding: 20px 18px 28px;
			border: 2px solid var(--color-border);
			border-radius: 10px;
			position: relative;
			
			@media print,screen and (width > 768px) {
				padding: 48px 53px;
				display: grid;
				grid-template-columns: 340px 1fr;
				grid-template-rows: 30px 1fr;
				gap: 23px 4.4%;
			}
			
			.y-about__lead {
				font-size: 20px;
				
				@media screen and (width <= 768px) {
					margin-bottom: 23px;
					font-size: 18px;
				}
			}
			
			.y-about__txt {
				font-size: 16px;
				line-height: 1.6875;
			}
		}
		
		.y-about__hd {
			margin-bottom: 22px;
			padding-bottom: 133px;
			font-size: 25px;
			letter-spacing: 0.1em;
			line-height: 1.36;
			font-weight: 700;
			position: relative;
			
			&::after {
				content: '';
				width: 168px;
				height: 113px;
				background: url(../images/category/yairo/img_forest.svg) no-repeat left top;
				background-size: 100%;
				position: absolute;
				bottom: 0;
				left: 50%;
				translate: -50% 0;
			}

			@media print,screen and (width > 768px) {
				margin-bottom: 0;
				padding-bottom: 0;
				font-size: 32px;
				line-height: 1.28;
				grid-row: 1/3;
				
				&::after {
					left: 30px;
					bottom: -83px;
					translate: 0;
				}
			}
			
		}
	}
	
	.y-case {
		overflow: hidden;
		
		.y-case__slider {
			height: auto !important;
			padding-bottom: 55px;
			
			@media print, screen and (width > 768px) {
				padding-bottom: 28px;
			}
			
			.slick-prev, 
			.slick-next {
				display: grid;
				place-items: center;
				width: 35px;
				height: 35px;
				background: #fff !important;
				border: 1px solid var(--color-border);
				border-radius: 50%;
				position: absolute;
				top: auto;
				left: auto;
				bottom: 0;
				cursor: pointer;
				
				&::before {
					content: '';
					width: 9px;
					height: 9px;
					background: url(../images/category/yairo/icon_arrow.svg) no-repeat left top;
					background-size: 100%;
				}
				
				@media print, screen and (width > 768px) {
					width: 50px;
					height: 50px;
					
					&::before {
						width: 13px;
						height: 13px;
					}
				}
				
			}
			.slick-next {
				right: 20px !important;
				
				@media print, screen and (width > 768px) {
					right: 30px !important;
				}
			}
			
			.slick-prev {
				right: 63px !important;
				
				&::before {
					scale: -1 1;
				}
				
				@media print, screen and (width > 768px) {
					right: 91px !important;
				}
			}
			
		}
		
		.y-case__item {
			width: 92.533vw;
			margin-right: 13px;
			
			@media print, screen and (width > 768px) {
				width: 54.166vw;
				margin-right: 30px;
			}
		}
		
		.y-case__img {
			width: 100%;
		}
		
		.y-case__caption {
			margin-top: 5px;
			padding-left: 9px;
			font-size: 10px;
			font-weight: 700;
			line-height: 1.5;
			position: relative;
			
			&::before {
				content: '';
				width: 6px;
				height: 6px;
				background: var(--color-main);
				position: absolute;
				top: 6px;
				left: 0;
			}
			
			@media print, screen and (width > 768px) {
				margin-top: 10px;
				padding-left: 30px;
				font-size: 19px;
				&::before {
					width: 10px;
					height: 10px;
					top: 10px;
				}
			}
		}
	}
	.y-intro {
		width: min(100%, 1200px);
		padding: 20px;
		margin: 0 auto;
		border: 2px solid var(--color-border);
		border-radius: 10px;
		
		&:not(:last-child) {
			margin-bottom: 34px;
		}
		
		@media print, screen and (width > 768px) {
			padding: 55px;
			&:not(:last-child) {
				margin-bottom: 74px;
			}
		}
		
		&.y-intro--woodlong {
			@media print, screen and (width > 768px) {
				display: grid;
				grid-template-columns: 1fr 460px;
				gap: 60px 64px;
				
				.y-intro__head {
					margin-bottom: 0;
				}
				
				.y-intro__woodlong {
					grid-column: 1/3;
				}
			}
		}
		
		&.y-intro--livos {
			@media print, screen and (width > 768px) {
				.y-intro__head {
					display: grid;
					grid-template-columns: auto 1fr;
					gap: 10px 100px;
				}
				
				.y-intro__hd {
					grid-column: 1/2;
					margin-bottom: 0;
				}				
				
				.y-intro__txt {
					grid-column: 2/3;
					margin-bottom: 0;
				}
				
				.y-intro__refer {
					grid-column: 2/3;
					grid-row: 2/3;
				}
			}
		}
		
		.y-intro__head {
			margin-bottom: 30px;
			
			@media print, screen and (width > 768px) {
				margin-bottom: 50px;
			}
		}
		
		.y-intro__hd {
			display: grid;
			gap: 5px 0;
			margin-bottom: 25px;
			font-size: 16px;
			font-weight: 700;
			
			.y-intro__hd__en {
				font-family: var(--font-oswald);
				font-size: 35px !important;
				font-weight: 500;
			}
			
			@media print, screen and (width > 768px) {
				grid-template-columns: auto 1fr;
				gap: 0 17px;
				place-items: center start;
				font-size: 19px;
				
				.y-intro__hd__ja {
					position: relative;
					top: 5px;
				}
			}
		}
		
		.y-intro__lead {
			margin-bottom: 20px;
			font-size: 18px;
			line-height: 1.444;
			font-weight: 700;
			
			@media print,screen and (width > 768px) {
				font-size: 22px;
			}
		}
		
		.y-intro__txt {
			margin-bottom: 17px;
			font-size: 16px;
			font-weight: 400;
			line-height: 1.6875;
			
			@media pritn,screen and (width > 768px) {
				font-size: 17px;
				line-height: 1.58;
			}
		}
		
		.y-intro__refer {
			font-size: 15px;
			font-weight: 700;
			
			@media print,screen and (width > 768px) {
				font-size: 16px;
			}
		}
		
		.y-intro__link {
			margin-left: 22px;
			color: var(--color-main);
			text-decoration: none;
			
			@media screen and (width <= 768px) {
				display: block;
				width: fit-content;
				margin: 3px 0 0;
			}
		}
		
		.y-intro__variation {
			margin-bottom: 45px;
			
			@media print, screen and (width > 768px) {
				margin-bottom: 55px;
				display: grid;
				grid-template-columns: 222px 1fr;
				gap: 0 25px;
			}
			
			.y-intro__variation__hd {
				padding-bottom: 12px;
				margin-bottom: 22px;
				font-size: 18px;
				font-weight: 700;
				line-height: 1.5;
				position: relative;
				
				&::before {
					content: '';
					width: 58px;
					height: 2px;
					background-color: var(--color-main);
					position: absolute;
					left: 0;
					bottom: 0;
				}
				
				@media print, screen and (width > 768px) {
					padding: 0;
					margin: 0;
					
					&::before {
						width: 2px;
						height: 51px;
						left: auto;
						right: 0;
					}
				}
			}
			
			.y-intro__variation__txt {
				font-size: 15px;
				line-height: 1.466;
				
				@media print, screen and (width > 768px) {
					font-size: 16px;
					line-height: 1.6875;
				}
			}
		}
		
		.y-intro__figure {
			@media screen and (width <= 768px) {
				margin-bottom: 24px;
			}
		}
		
		.y-intro__caption {
			margin-top: 9px;
			font-size: 14px;
			
			@media print, screen and (width > 768px) {
				margin-top: 13px;
				font-size: 17px;
			}
		}
		
		.y-intro__img {
			width: 100%;
			height: auto;
		}
		
		.y-intro__woodlong {
			display: grid;
			gap: 13px 0;
			
			@media print, screen and (width > 768px) {
				grid-template-columns: repeat(2,1fr);
				gap: 0 50px;
			}
		}
		
		.y-intro__feature {
			padding: 25px 23px 32px;
			background: var(--color-bg);
			border-radius: 7px;
			
			@media print, screen and (width > 768px) {
				padding: 50px 55px 44px;
			}
			
			.y-intro__feature__head {
				margin-bottom: 20px;
				padding-bottom: 12px;
				border-bottom: 1px solid var(--color-main);
				
				@media print,screen and (width > 768px) {
					padding: 0;
					border: 0;
					display: grid;
					grid-template-columns: auto 1fr;
					gap: 0 14px;
					place-items: center start;
					
					&::after {
						content: '';
						width: 100%;
						height: 1px;
						background-color: var(--color-main);
					}
				}
			}
			
			.y-intro__feature__hd {
				font-size: 18px;
				font-weight: 700;
				
				@media print,screen and (width > 768px) {
					font-size: 22px;
				}
			}
			
			.y-intro__feature__dl {
			}
			
			.y-intro__feature__dt {
				margin-bottom: 5px;
				font-size: 16px;
				line-height: 1.375;
				font-weight: 700;
				
				@media print,screen and (width > 768px) {
					font-size: 17px;
				}
			}
			
			.y-intro__feature__dd {
				font-size: 15px;
				line-height: 1.466;

				&:not(:last-child) {
					margin-bottom: 20px;
				}

				
				@media print, screen and (width > 768px) {
					font-size: 16px;
				}
			}
		}
		
	}
	
	.y-standard {
		width: min(100%, 1200px);
		margin: 0 auto;
		
		@media print, screen and (width > 768px) {
			margin-top: 65px;
			display: grid;
			//grid-template-columns: 28.33% 64.16%;
			gap: 120px 7.51%;
		}
		
		.y-standard__inner {
			@media screen and (width <= 768px) {
				&:not(:last-child) {
					margin-bottom: 100px;
				}				
			}
			/* @media print, screen and (width > 768px) {
				&:nth-child(1) ,
				&:nth-child(4) {
					grid-column: 1/3;
				}
			} */
		}
		
		.y-standard__hd {
			margin-bottom: 45px;
			padding-left: 27px;
			font-size: 20px;
			line-height: 1.85;
			font-weight: 700;
			position: relative;
			
			&::before {
				content: '';
				width: 12px;
				height: 12px;
				background-color: var(--color-main);
				position: absolute;
				left: 0;
				top: 50%;
				translate: 0 -50%;
			}
			
			@media print, screen and (width > 768px) {
				margin-bottom: 35px;
				padding-left: 36px;
				font-size: 26px;
				
				&::before {
					width: 16px;
					height: 16px;
				}
			}
		}
		
		.y-standard__hd--info {
			padding-bottom: 10px;
			margin-bottom: 10px;
			font-size: 18px;
			line-height: 2.4;
			font-weight: 700;
			border-bottom: 1px solid;
			
			@media print, screen and (width > 768px) {
				font-size: 22px;
				line-height: 2;
			}
		}
		
		.y-standard__txt {
			font-size: 16px;
			line-height: 1.6875;
			
			.y-standard__txt__bold {
				font-weight: 700;
			}
			
			&:not(:last-child) {
				margin-bottom: 8px;
			}
		}
		
		.y-standard__link {
			font-size: 15px;
			font-weight: 700;
			color: var(--color-main);
			text-decoration: none;
		}
		
		.y-standard__figure {
			width: 100%;
			
			@media screen and (width <= 768px) {
				overflow-x: auto;
				&.y-standard__figure--01 ,
				&.y-standard__figure--03 {
					width: calc(100% + 28px);
					margin-right: -28px;
				}
			}
		}
		
		.y-standard__img {
			width: 100%;
			height: auto;
			
			&.y-standard__img--01 {
				@media screen and (width <= 768px) {
					min-width: 640px;				
				}				
			}

			&.y-standard__img--03 {
				@media screen and (width <= 768px) {
					min-width: 580px;
				}				
			}	
		}
		
		.y-standard__pdf {
			display: block;
			width: fit-content;
			margin-top: 30px;
			padding: 6px 18px 6px 35px;
			font-size: 11px;
			font-weight: 700;
			line-height: 1.5;
			color: var(--color-main);
			text-decoration: none;
			border: 1px solid var(--color-border);
			border-radius: 3px;
			position: relative;
			
			&::before {
				content: '';
				width: 18px;
				height: 18px;
				background: url(../images/category/yairo/icon_pdf.svg) no-repeat left top;
				background-size: 100%;
				position: absolute;
				left: 5px;
				top: 50%;
				translate: 0 -50%;
			}
			
			@media print, screen and (width > 768px) {
				padding: 6px 14px 6px 37px;
				font-size: 13px;

				&::before {
					width: 20px;
					height: 20px;
				}
			}
		}
		
		.y-standard__details {
			display: grid;
			gap: 50px 0;
			
			@media print, screen and (width > 768px) {
				grid-template-columns: 24.16% 43.33% 25.83%;
				gap: 35px 3.34%;
			}
		}
		
		.y-standard__box {
			@media print, screen and (width > 768px) {
				grid-row: 1/3;
			}			
		}
		.y-standard__info {
			@media print, screen and (width > 768px) {
				grid-column: 3/4;
				&:last-of-type(1) {
					grid-row: 2/3;
				}
				&:last-of-type(2) {
					grid-row: 1/2;
				}
			}
		}
	}
	
	.y-faq {
		max-width: 750px;
		margin: 0 auto;
		padding: 25px 20px;
		background-color: #fff;
		border-radius: 10px;

		&:not(last-child) {
			margin-bottom: 12px;
		}
		
		@media print, screen and (width > 768px) {
			padding: 33px 40px;
			&:not(:last-child) {
				margin-bottom: 23px;
			}
		}
		
		.y-faq__question {
			margin-bottom: 10px;
			padding-left: 42px;
			font-size: 18px;
			line-height: 1.8333;
			font-weight: 700;
			position: relative;
			
			&::before {
				content: 'Q.';
				font-size: 19px;
				font-weight: 700;
				color: var(--color-sub);
				position: absolute;
				left: 0;
			}
			
			@media print, screen and (width > 768px) {
				padding-left: 54px;
				font-size: 24px;
				
				&::before {
					font-size: 25px;
				}
			}
		}

		.y-faq__answer {
			margin-bottom: 10px;
			padding-left: 42px;
			font-size: 16px;
			line-height: 1.4375;
			font-weight: 400;
			position: relative;
			
			&::before {
				content: 'A.';
				font-size: 19px;
				line-height: 1.2;
				font-weight: 700;
				color: var(--color-sub);
				position: absolute;
				left: 0;
			}
			@media print, screen and (width > 768px) {
				padding-left: 54px;
				font-size: 17px;
				line-height: 1.588;
				
				&::before {
					font-size: 25px;
				}
			}
		}
	}

	.y-contact {
		width: min(100%,750px);
		margin: auto;
		
		.y-require {
			width: fit-content;
			margin-left: 10px;
			padding: 0 5px;
			font-size: 10px;
			line-height: 1.5;
			font-weight: 400;
			color: var(--color-require);
			border: 1px solid var(--color-require);
			border-radius: 3px;
			@media print,screen and (width > 768px) {
				margin-left: 7px;
				font-size: 12px;
			}
		}
		
		.y-radio {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 30px;
			
			.y-radio__input {
				display: none;
				
				&:checked ~ .y-radio__label {
					&::after {
						width: 7px;
						height: 7px;
						background: var(--color-main);
						border-radius: 50%;
						left: 4px;
					}
				}
			}
			
			.y-radio__label {
				padding-left: 18px;
				font-size: 16px;
				line-height: 1;
				font-weight: 500;
				position: relative;
				cursor: pointer;
				
				&::before ,
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					translate: 0 -50%;
				}
				
				&::before {
					width: 13px;
					height: 13px;
					background: #fff;
					border: 1px solid #707070;
					border-radius: 50%;
					left: 0;
				}
			}
		}
		
		.y-select {
			width: min(100%,327px);
			background: #f7f7f7 !important;
			font-family: "Zen Kaku Gothic New", sans-serif;
			font-size: 16px;
			font-weight: 500;
			border: 1px solid #e3e3e3;
		}
		
		.y-input {
			width: min(100%,327px);
			height: 36px;
			background: #f7f7f7;
			font-family: "Zen Kaku Gothic New", sans-serif;
			font-size: 16px;
			font-weight: 500;
			color: var(--color-main);
			border: 1px solid #e3e3e3;
		}

		.y-textarea {
			width: 100%;
			min-height: 290px;
			background: #f7f7f7;
			font-family: "Zen Kaku Gothic New", sans-serif;
			font-size: 16px;
			font-weight: 500;
			color: var(--color-main);
			border: 1px solid #e3e3e3;
		}
		
		.y-btn {
			display: block;
			width: min(85.333vw,318px);
			height: 52px;
			font-size: 17px;
			font-weight: 700;
			border: 1px solid var(--color-main);
			border-radius: 7px;
			position: relative;
			overflow: hidden;
			
			&::before {
				content: '';
				width: 0;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				transition: width .2s;
			}
			
			&::after {
				content: '';
				width: 14px;
				height: 14px;
				-webkit-mask-image: url(../images/category/yairo/icon_arrow.svg);
				-webkit-mask-position: left top;
				-webkit-mask-repeat: no-repeat;
				-webkit-mask-size: 100%;

				mask-image: url(../images/category/yairo/icon_arrow.svg);
				mask-position: left top;
				mask-repeat: no-repeat;
				mask-size: 100%;
				position: absolute;
				top: 50%;
				translate: 0 -50%;
				z-index: 3;
				transition: background-color .2s;
			}
			
			.y-btn__inner {
				position: relative;
				z-index: 3;
			}
			
			&.y-btn--submit {
				color: #fff;
				background-color: var(--color-main);
				
				&::before {
					background-color: #fff;
				}
				
				&::after {
					right: 20px;
										
					background-color: #fff;
				}
				
				&:hover {
					color: var(--color-main);
					&::before {
						width: 100%;
						transition: width .3s;
					}
					
					&:after {
						background-color: var(--color-main);
						transition: background-color .3s;
					}
				}
			}
			
			&.y-btn--back {
				color: var(--color-main);
				background-color: #fff;
				
				&::before {
					background-color: var(--color-main);
				}

				&::after {
					left: 20px;
										
					background-color: var(--color-main);

					scale: -1 1;
				}

				&:hover {
					color: #fff;
					
					&::before {
						width: 100%;
						transition: width .3s;
					}
					
					&:after {
						background-color: #fff;
						transition: background-color .3s;
					}
				}
			}
		}
		
		.y-contact__hd {
			font-size: 20px;
			font-size: 20px;
			line-height: 1.5;
			font-weight: 700;
		}
		
		.y-contact__txt {
			margin-bottom: 30px;
			font-size: 16px;
			line-height: 1.5;
			font-weight: 500;
		}
		
		.y-contact__link {
			display: block;
			width: fit-content;
			font-size: 16px;
			line-height: 1.5;
			font-weight: 700;
			color: var(--color-main);
		}
	
		@media screen and (width <= 768px) {
			.y-contact__table ,
			.y-contact__body ,
			.y-contact__tr ,
			.y-contact__th ,
			.y-contact__td {
				width: 100%;
				display: block;
			}
		}
		.y-contact__table {
			width: 100%;
			margin-bottom: 45px;
			
			@media print, screen and (width > 768px) {
				margin-bottom: 49px;
			}
		}
		
		.y-contact__th ,
		.y-contact__td {
			text-align: left;
			vertical-align: top;
			font-size: 16px;
			line-height: 1.5;
			font-weight: 700;
		}
		
		.y-contact__th {
			padding: 23px 0 16px;
			
			@media print, screen and (width > 768px) {
				width: 216px;
				padding: 30px 0 34px 5px;
				font-size: 17px;
				border-bottom: 1px solid var(--color-main);
			}
		}
		
		.y-contact__td {
			padding-bottom: 30px;
			border-bottom: 1px solid var(--color-main);
			@media print, screen and (width > 768px) {
				padding: 30px 8px 34px 0;
			}
		}
		
		.y-contact__btns {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20px;
			
			@media print,screen and (width > 768px) {
				flex-direction: row;
			}
		}
	}
	
	.y-footer {
		background-color: #fff;
		width: 100%;
		position: sticky;
		top: 100vh;
		z-index: 5;
		padding: 0 10px 20px;
		
		@media print, screen and (width > 768px) {
			padding: 0 20px 24px;
		}
		
		.y-footer__box {
			color: #fff;
			width: 100%;
			padding: 30px 20px;
			background-color: var(--color-main);
			border-radius: 10px;
			
		
			@media print, screen and (width > 768px) {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				padding: 50px 45px 40px;
			}			
		}
		
		.y-footer__company {
			margin-bottom: 6px;
			font-size: 14px;
			font-weight: 500;
			
			.y-footer__company__big {
				font-size: 18px;
				font-weight: 700;
			}
		}
		
		.y-footer__address {
			font-size: 16px;
			margin-bottom: 6px;
		}
		
		.y-footer__tel {
			display: block;
			position: relative;
			text-decoration: none;
			margin-bottom: 3px;
			padding-left: 20px;
			
			font-family: var(--font-oswald);
			font-size: 24px;
			font-weight: 500;
			line-height: 2;
			color: inherit;
			
			&::before {
				content: '';
				width: 14px;
				height: 15px;
				background: url(../images/category/yairo/icon_tel.svg) no-repeat left top;
				background-size: cover;
				position: absolute;
				left: 0;
				top: 19px;
			}
			@media print, screen and (width > 768px) {
				pointer-events: none;
				
			}
		}
		
		.y-footer__link {
			font-size: 16px;
			font-weight: 700;
			color: inherit;
			text-decoration: none;
		}
	}
	
	.y-copyright {
		margin-top: 28px;
		font-size: 13px;
		font-weight: 500;
		
		@media print, screen and (width > 768px) {
			font-size: 14px;
		}
	}
}