@charset "utf-8";
/* CSS Document */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Noto+Sans+JP:wght@100..900&display=swap');

/************　全ページ　************/

/* font */

:root{
	--font-d: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	--font-en: "Manrope", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.font_en{
	font-family: var(--font-en);
}

/* parallax */

.parallax, .parallax2 {
	will-change: transform;
}

/* svg icon */

.icon_wrap{
	.s_icon{
		fill: currentColor;
		fill-rule: evenodd;
		stroke: none;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.icon_symbol{
		aspect-ratio: 7 / 12;
	}
}

/* form */

input{
	outline: none!important;
	box-shadow: none!important;
	&[type="submit"],
	&[type="button"] {
		border-radius: 0;
		-webkit-box-sizing: content-box;
		-webkit-appearance: button;
		appearance: button;
		border: none;
		box-sizing: border-box;
		cursor: pointer;
		&::focus{
			outline-offset: -2px;
		}
	}
	&[type="submit"]::-webkit-search-decoration,
	&[type="button"]::-webkit-search-decoration {
		display: none;
	}
	&::placeholder{
		color: var(--black);
		opacity: 0.3;
	}
}
textarea{
	overflow: auto;
	&::placeholder{
		color: var(--black);
		opacity: 0.3;
	}
}
button, select{
	outline: none!important;
	box-shadow: none!important;
	&::placeholder{
		color: var(--black);
		opacity: 0.3;
	}
}
.form-check-input{
	border-color: var(--color4)!important;
	border-width: 2px;
	&:checked{
		border-color: var(--color1)!important;
		background-color: var(--color1)!important;
	}
}

/* bootstrap custom */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	&:focus{
		outline:none;
	}
}
html{
	font-size: 16px;
	@media (max-width: 565px) {
		font-size: 14px;
	}
	body{
		margin: 0;
		padding: 0;
		line-height: 1.7;
		color: var(--bs-body-color);
		-webkit-text-size-adjust: 100%;
		font-family: var(--font-d);
		font-style: normal;
		word-wrap : break-word;
		overflow-wrap : break-word;
		p, ul, ol, li, figure {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		h1, h2, h3, h4, h5, h6 {
			font-size:100%;
			margin: 0;
			font-weight: normal;
			line-height: 1.3;
		}
		img{
			display: block;
			vertical-align:bottom;
			width: 100%;
			height: auto;
		}
		a{
			color: currentColor;
			text-decoration: none;
		}
	}
}

/* modal */
.modal-backdrop {
    --bs-backdrop-bg: color-mix(in srgb, var(--color4) 80%, transparent);
	--bs-backdrop-opacity: 1;
	&.fade{
		backdrop-filter: blur(0);
	}
	&.show{
		backdrop-filter: blur(3px);
	}
}
.modal{
	&.fade .modal-dialog{
		transform: scale(0.95);
	}
	&.show .modal-dialog{
		transform: scale(1);
	}
}

.fade {
	transition-property: opacity, backdrop-filter;
}

.cursor-pointer{
	cursor: pointer;
}

/* size */

.wc-1000{width: 1000px;}
.wc-900{width: 900px;}
.wc-800{width: 800px;}
.wc-700{width: 600px;}
.wc-600{width: 600px;}
.wc-500{width: 500px;}
.wc-400{width: 400px;}
.wc-300{width: 300px;}
.wc-200{width: 200px;}
.wc-150{width: 150px;}
.wc-100{width: 100px;}
.wc-90{width: 90px;}
.wc-80{width: 80px;}
.wc-70{width: 70px;}
.wc-60{width: 60px;}
.wc-50{width: 50px;}
.wc-40{width: 40px;}
.wc-30{width: 30px;}
.wc-20{width: 20px;}
.wc-10{width: 10px;}

/* transition */
.transition-02 {
    transition: 0.2s
}
.transition-03 {
    transition: 0.3s
}
.transition-05 {
    transition: 0.5s
}

.tracking-tighter{letter-spacing: -0.1em;}
.tracking-tight{letter-spacing: -0.05em;}
.tracking-normal{letter-spacing: 0em;}
.tracking-wide{letter-spacing: 0.05em;}
.tracking-wider{letter-spacing: 0.1em;}
.tracking-widest{letter-spacing: 0.15em;}

.square_box{
	aspect-ratio: 1;
}
.square_img img{
	aspect-ratio: 1;
	object-fit: cover;
}
.rectangle_box{
	aspect-ratio: 16 / 9;
}
.rectangle_img img{
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@media (min-width:576px) { /* sm */
	.square_box-sm{
		aspect-ratio: 1;
	}
	.square_img-sm img{
		aspect-ratio: 1;
		object-fit: cover;
	}
	.rectangle_box-sm{
		aspect-ratio: 16 / 9;
	}
	.rectangle_img-sm img{
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
}

@media (min-width:768px) { /* md */
	.square_box-md{
		aspect-ratio: 1;
	}
	.square_img-md img{
		aspect-ratio: 1;
		object-fit: cover;
	}
	.rectangle_box-md{
		aspect-ratio: 16 / 9;
	}
	.rectangle_img-md img{
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
}
@media (min-width:992px) { /* lg */
	.square_box-lg{
		aspect-ratio: 1;
	}
	.square_img-lg img{
		aspect-ratio: 1;
		object-fit: cover;
	}
	.rectangle_box-lg{
		aspect-ratio: 16 / 9;
	}
	.rectangle_img-lg img{
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
}
@media (min-width:1200px) { /* xl */
	.square_box-xl{
		aspect-ratio: 1;
	}
	.square_img-xl img{
		aspect-ratio: 1;
		object-fit: cover;
	}
	.rectangle_box-xl{
		aspect-ratio: 16 / 9;
	}
	.rectangle_img-xl img{
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
}

@media (hover: hover) and (pointer: fine){
	.opacity-100-hover,
	.opacity-75-hover,
	.opacity-50-hover,
	.opacity-25-hover{
		transition: opacity 0.3s;
	}
	.opacity-100-hover:hover{opacity: 1;}
	.opacity-75-hover:hover{opacity: 0.75;}
	.opacity-50-hover:hover{opacity: 0.5;}
	.opacity-25-hover:hover{opacity: 0.25;}
}

.box-shadow-blue1{
	box-shadow: 0 10px 20px color-mix(in srgb, var(--color1) 10%, transparent);
}
.box-shadow-gray{
	box-shadow: 0 10px 20px color-mix(in srgb, var(--gray) 10%, transparent);
}

@media (hover: hover) and (pointer: fine){
	.box-shadow-blue1_hv:hover{
		box-shadow: 0 10px 20px color-mix(in srgb, var(--color1) 10%, transparent);
	}
}

.fs-7{
	font-size: 0.85rem;
}
.fs-8{
	font-size: 0.7rem;
}

.over_txt{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.backdrop-5{
	backdrop-filter: blur(5px);
}
.backdrop-10{
	backdrop-filter: blur(10px);
}
.backdrop-20{
	backdrop-filter: blur(20px);
}

/* section space */
:root{
	--section-y: 6rem;
	--section-x: 2rem;
	--section-mw: 1440px;
	@media (min-width:576px) { /* sm */
		--section-y: 6rem;
		--section-x: 3rem;
	}
	@media (min-width:992px) { /* lg */
		--section-y: 8rem;
		--section-x: 5rem;
	}
	@media (min-width:1200px) { /* xl */
		--section-y: 12rem;
		--section-x: 8rem;
	}
}
.section-p{padding: var(--section-y) var(--section-x)}
.section-px{padding-left: var(--section-x);padding-right: var(--section-x);}
.section-py{padding-top: var(--section-y);padding-bottom: var(--section-y);}
.section-pt{padding-top: var(--section-y);}
.section-ps{padding-left: var(--section-x)}
.section-pb{padding-bottom: var(--section-y)}
.section-pe{padding-right: var(--section-x)}

.section-m{margin: var(--section-y) var(--section-x)}
.section-mx{margin-left: var(--section-x);margin-right: var(--section-x)}
.section-my{margin-top: var(--section-y);margin-bottom: var(--section-y);}
.section-mt{margin-top: var(--section-y);}
.section-ms{margin-left: var(--section-x)}
.section-mb{margin-bottom: var(--section-y)}
.section-me{margin-right: var(--section-x)}

.section-mw{max-width: var(--section-mw);margin-left: auto;margin-right: auto;}

@media (min-width:576px) { /* sm */
	.section-sm-p{padding: var(--section-y) var(--section-x)}
	.section-sm-px{padding-left: var(--section-x);padding-right: var(--section-x);}
	.section-sm-py{padding-top: var(--section-y);padding-bottom: var(--section-y);}
	.section-sm-pt{padding-top: var(--section-y);}
	.section-sm-ps{padding-left: var(--section-x)}
	.section-sm-pb{padding-bottom: var(--section-y)}
	.section-sm-pe{padding-right: var(--section-x)}
	
	.section-sm-m{margin: var(--section-y) var(--section-x)}
	.section-sm-mx{margin-left: var(--section-x);margin-right: var(--section-x)}
	.section-sm-my{margin-top: var(--section-y);margin-bottom: var(--section-y);}
	.section-sm-mt{margin-top: var(--section-y);}
	.section-sm-ms{margin-left: var(--section-x)}
	.section-sm-mb{margin-bottom: var(--section-y)}
	.section-sm-me{margin-right: var(--section-x)}

	.section-sm-mw{max-width: var(--section-mw);margin-left: auto;margin-right: auto;}
}

@media (min-width:992px) { /* lg */
	.section-lg-p{padding: var(--section-y) var(--section-x)}
	.section-lg-px{padding-left: var(--section-x);padding-right: var(--section-x);}
	.section-lg-py{padding-top: var(--section-y);padding-bottom: var(--section-y);}
	.section-lg-pt{padding-top: var(--section-y);}
	.section-lg-ps{padding-left: var(--section-x)}
	.section-lg-pb{padding-bottom: var(--section-y)}
	.section-lg-pe{padding-right: var(--section-x)}

	.section-lg-m{margin: var(--section-y) var(--section-x)}
	.section-lg-mx{margin-left: var(--section-x);margin-right: var(--section-x)}
	.section-lg-my{margin-top: var(--section-y);margin-bottom: var(--section-y);}
	.section-lg-mt{margin-top: var(--section-y);}
	.section-lg-ms{margin-left: var(--section-x)}
	.section-lg-mb{margin-bottom: var(--section-y)}
	.section-lg-me{margin-right: var(--section-x)}

	.section-lg-mw{max-width: var(--section-mw);margin-left: auto;margin-right: auto;}
}

/************　ヘッダー　************/

#header{
	width: stretch;
	&.active{
		color: var(--black);
		#logo{
			filter: none!important
		}
		.header_filter{
			background-color: rgb(255 255 255 / 0.6);
			backdrop-filter: blur(20px);
			box-shadow: 0 10px 20px color-mix(in srgb, var(--color1) 10%, transparent);
		}
		@media (min-width:992px) {
			margin-left: 2rem;
			margin-right: 2rem;
		}
	}
	@media (max-width:991px) {
		margin-right: 1rem;
	}
}

#nav_icon {
	.nav_icon{
		&::before, &::after{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			content: "";
			width: 70%;
			height: 1px;
			background-color: currentColor;
			transition: 0.3s cubic-bezier(.8,0,.3,1);
			@media (max-width:991px) {
				background-color: var(--black);
			}
		}
		&::before{
			bottom: 15%
		}
		&::after{
			top: 15%
		}
		@media (hover: hover) and (pointer: fine){
			&:hover::before, &:hover::after{
				width: 100%;
			}
		}
	}
	&.active .nav_icon{
		&::before, &::after{
			width: 100%;
			background-color: var(--gray);
		}
		&::before{
			bottom: 0;
			transform: rotate(30deg);
		}
		&::after{
			top: 0;
			transform: rotate(-30deg);
		}
	}
	@media (min-width:992px) {
		transform: translateY(-50%);
	}
	@media (max-width:991px) {
		&:not(.active){
			background-color: rgb(255 255 255 / 0.8);
			backdrop-filter: blur(20px);
			box-shadow: 0 10px 20px color-mix(in srgb, var(--color1) 10%, transparent);
		}
	}
}

/************　フッター　************/


/************　index　************/

/* main_svg */
#main_svg svg{
	width: 90vw;
	margin-left: 27%;
	margin-bottom: -5%;
	max-width: 1920px;
	bottom: 0;
	left: 0;
	@media (max-width:991px) {
		width: auto;
		height: 120vh;
		margin-left: -5%;
	}
	@media (max-width:575px) {
		width: auto;
		height: 80vh;
		top: 10%;
		bottom: auto;
	}
}

/* fv */
#fv{
	.scroll_down .scroll_bar{
		height: 1px;
		background-color: rgb(255 255 255 / 0.6);
		&::before{
			position: absolute;
			content: "";
			width: 100%;
			height: 100%;
			background-color: #fff;
			top: 0;
			left: 0;
			animation: revealBox 3s cubic-bezier(.8,0,.3,1) infinite;
		}
	}
}

/* icon_bg_logo */
.icon_wrap{
	.icon_bg_logo{
		transform: scale(0.9);
		transition: 1s cubic-bezier(.01,.73,.27,1);
		color: transparent;
		aspect-ratio: 11 / 10;
		stroke: var(--color1);
		stroke-width: 0.2;
		stroke-dasharray: 1200;
		stroke-dashoffset: 1200;
		animation: drawLine 2s ease-in-out forwards;
		circle{
			transition: 0.5s;
		}
		#icon2_grad stop{
			stop-color: transparent;
		}
		&.trans{
			transform: scale(1);
			color: var(--color3);
			stroke-width: 0;
			#icon2_grad{
				stop:first-child{
					stop-color: var(--color1);
				}
				stop:last-child{
					stop-color: var(--color3);
				}
			}
			&.active{
				color: var(--color2s);
				#icon2_grad{
					stop{
						stop-color: var(--color2s);
					}
				}
			}
		}
	}
}
@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

/* reveal title */
.reveal-box, .reveal-box-load {
	.reveal-text {
		position: relative;
		width: fit-content;
		color: transparent;
		transition: color 0s 0.5s;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 100%;
			background-color: var(--color1);
		}
	}
	.fade_box{
		transition: 1s;
		transition-property: opacity, transform;
		transform: translateY(1rem);
		opacity: 0;
		&.active{
			opacity: 1;
			transform: none;
		}
	}
	&.is-active {
		.reveal-text {
			color: currentColor;
			opacity: 1;
			&::after {
				animation: revealBox 1s cubic-bezier(.9,0,.14,1) forwards;
			}
		}
		.fade_box{
			opacity: 1;
			transform: none;
		}
	}
}
#fv .reveal-box-load {
	.reveal-text {
		&::after {
			background-color: #fff;
		}
	}
}
@keyframes revealBox {
	0% {
		width: 0;
		left: 0;
	}
	50% {
		width: 100%;
		left: 0;
	}
	50.1% {
		width: 100%;
		left: auto;
		right: 0
	}
	100% {
		width: 0;
		left: auto;
		right: 0
	}
}

/* plus_btn */
.plus_btn{
	a{
		.btn_txt{
			padding-right: 2.5rem;
			transition-timing-function: cubic-bezier(.1,.6,.3,1);
		}
		.arrow{
			&::before, &::after{
				position: absolute;
				content: "";
				width: 40%;
				height: 2px;
				border-radius: 2px;
				display: block;
				background-color: var(--gray);
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				transition: 0.2s cubic-bezier(.1,.6,.3,1);
			}
			&::after{
				transform: rotate(90deg);
			}
		}
		@media (hover: hover) and (pointer: fine){
			&:hover {
				.btn_txt{
					padding-left: 1.5rem;
					padding-right: 1rem;
				}
				.arrow{
					background-color: #fff;
					&::before, &::after{
						width: 25%;
						left: 5%;
						background-color: var(--color1);
					}
					&::before{
						transform: rotate(-45deg);
						top: 16%;
					}
					&::after{
						transform: rotate(45deg);
						bottom: 16%;
					}
				}
			}
		}
		@media (max-width: 575px) {
			background-color: var(--color1);
			color: #fff;
			.btn_txt{
				padding-left: 1.5rem;
				padding-right: 1rem;
			}
			.arrow{
				background-color: #fff;
				&::before, &::after{
					width: 25%;
					left: 5%;
					background-color: var(--color1);
				}
				&::before{
					transform: rotate(-45deg);
					top: 15%;
				}
				&::after{
					transform: rotate(45deg);
					bottom: 14%;
				}
			}
		}
	}
	&.fv_contact a{
		@media (max-width: 575px) {
			background-color: #fff;
			color: var(--color1);
		}
	}
}

/* conveyer_txt */
#ticker {
	white-space: nowrap;
	will-change: transform;
	.ticker-item {
		white-space: nowrap;
	}
}

/* top_business */
#top_business{
	@media (min-width:992px) {
		.title_wrap{
			position: sticky
		}
		.title_wrap{
			margin-top: 0!important
		}
	}
	@media (max-width:991px) {
		.box_wrap{
			margin-left: 0!important;
		}
	}
}

/***　under_svg / page_title / cate / cate_list　***/

#under_svg svg{
	filter: blur(3px);
	opacity: 0.05;
	aspect-ratio: 11 / 10;
	#icon2_grad{
		stop:first-child{
			stop-color: var(--color1);
		}
		stop:last-child{
			stop-color: var(--color3);
		}
	}
	height: 200%;
	bottom: 20%;
	right: -20%;
	max-width: 1920px;
	@media (max-width:991px) {
		height: 200%;
		bottom: 40%;
	}
	@media (max-width:575px) {
		height: 150%;
		bottom: 60%;
		right: -30%
	}
}

#page_title {
	h2, p {
		position: relative;
		width: fit-content;
		transition: color 0s 0.5s;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 100%;
			background-color: var(--color1);
		}
	}
	&:not(.is-active) h2, &:not(.is-active) p{
		color: transparent;
	}
	&.is-active {
		h2, p {
			&::after {
				animation: revealBox 1s cubic-bezier(.9,0,.14,1) forwards;
			}
		}
	}
}

.cate_wrap{
	counter-reset: cateNo 0;
	.cate{
		transition: 1s;
		transition-property: opacity, transform;
		transform: translateY(1rem);
		opacity: 0;
		&.active{
			opacity: 1;
			transform: none;
		}
	}
}
.cate_title{
	margin-bottom: 5rem!important;
	&::before{
		counter-increment: cateNo;
		content: counter(cateNo,decimal-leading-zero);
		font-weight: 400;
		display: block;
		width: fit-content;
		font-size: 1rem;
		color: var(--color1);
		padding-top: 1rem;
		border-top: solid 1px;
		font-family: var(--font-en);
		margin-bottom: 1rem;
	}
}

.cate_list{
	li:last-of-type{
		padding-right: 0!important;
		margin-right: 0!important;
	}
	li:not(:last-of-type)::before{
		position: absolute;
		content: "";
		width: 1px;
		height: 1rem;
		right: 0;
		top: 50%;
		transform: translateY(-50%) rotate(20deg);
		background-color: currentColor;
		opacity: 0.5;
	}
}

/***　page02　***/

.blog_cate li.active a{
	background-color: var(--color1);
	color: #fff;
	border-color: var(--color1)!important;
}

/***　page03　***/

#page03{
	.map iframe{
		display: block;
		width: 100%!important;
		height: 100%!important;
	} 
	.flow_wrap{
		.cate_box{
			.box_title1{
				span::before{
					position: absolute;
					content: "";
					width: 0.5rem;
					aspect-ratio: 1;
					border-radius: 50%;
					border: solid 4px #fff;
					box-sizing: content-box;
					background-color: currentColor;
					top: 50%;
					right: 0;
					transform: translate(50%, -50%);
				}
			}
			&:not(:last-of-type:first-of-type){
				.box_title1{
					background-image: linear-gradient(to bottom, color-mix(in srgb, var(--black) 40%, transparent), color-mix(in srgb, var(--black) 40%, transparent));
					background-size: 1px 100%;
					background-position: bottom right;
					background-repeat: no-repeat;
				}
				&:first-of-type .box_title1{
					background-image: linear-gradient(to bottom, transparent calc(1rem + 0.7em), color-mix(in srgb, var(--black) 40%, transparent) 0);
				}
				&:last-of-type .box_title1{
					background-image: linear-gradient(to bottom, color-mix(in srgb, var(--black) 40%, transparent) calc(1rem + 0.7em), transparent 0);
				}
			}
		}
	}
}

/***　page04　***/

#top_business{
	counter-reset: business_number 0;
	.top_business_no::before{
		counter-increment: business_number 1;
		content: counter(business_number, decimal-leading-zero); 
	}
}

#page04 .cate_item{
	@media (min-width:992px) {
		position: sticky;
		top: 10rem;
	}
}

/***　page05　***/
.con_fade_box{
	transition: 1s;
	transition-property: opacity, transform;
	transform: translateY(1rem);
	opacity: 0;
	&.active{
		opacity: 1;
		transform: none;
	}
}
#page05{
	
	/*グラフ------------------*/
	/* グラフ全体のコンテナ */
	.graph-section {
		max-width: 800px;
		margin: 50px auto;
		font-family: sans-serif;
		background: var(--color2s);
		.graph-container {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			height: 220px;
			padding-top: 40px;
			border-bottom: 1px solid var(--color4);
			.bar-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				height: 100%;
				margin: 0 5px;
				position: relative;
				/* 数字ラベル */
				.bar-label {
					margin-bottom: 5px;
					font-weight: bold;
					color: var(--color1);
					opacity: 0;
					transition: opacity 0.5s;
					span {
						font-size: 0.8em;
					}
				}
				/* 棒グラフの本体 */
				.bar {
				width: 90%;
				height: 0;
				background: linear-gradient(to top, var(--color1), #00a0e9);
				transition: height 0.8s ease-out;
				position: relative;
				}
				/* 年度ラベル */
				.bar-year {
				position: absolute;
				top: 100%;
				padding-top: 10px;
				width: 100%;
				text-align: center;
				font-size: 12px;
				color: #333;
				white-space: nowrap;
				}
				/* 2025年の特別な色（一番右） */
				&.highlight .bar {
				background: linear-gradient(to top, var(--color1), #73eaff);
				}
			}
			@media (min-width: 768px) {
				height: 300px; /* グラフの最大高さ */
				.bar-year {font-size: 14px;}
			}
		}
	}
	/* アニメーション用クラス */
	.is-active .bar {
	  /* jQueryでdata-heightの値を代入 */
	}

	/* // Medium devices (tablets, 768px and up) */
	/* モーダル ------------------*/
	#modal_contents .modal_bt{
		.box_img1 img{
			transition: all 0.3s ease-out;
			transform: scale(1);
		}
		@media (hover: hover) and (pointer: fine){
			a:hover{
				.box_img1 img{
					transform: scale(1.15);
				}
				.more_btn{
					color: var(--color1)
				}
			}
		}
	}
}
/* エントリーボタン */
#entry_btn{
	transition-property: opacity, transform;
	opacity: 0;
	transform: translateY(5rem);
	&.active{
		opacity: 1;
		transform: translateY(0);
	}
}

/***　page09　***/

#page09 {
	.cate_list{
		&.plus_btn{
			li:not(:last-of-type)::before{
				display: none;
			}
			li a{
				border: 1px solid var(--gray);
				@media (hover: hover) and (pointer: fine){
					&:hover{
						background-color: var(--color1);
						color: white;
						border-color: var(--color1);
					}
				}
				@media (max-width:575px) { /* sm */
					border: 1px solid var(--color1);
				}
			}
		}
	}
}

.saiyou_form{
	.content_title{
		display: none;
	}
	.required_color{
		background-color: var(--color2)!important;
	}
	.content_form .input_unit{
		width: 100%!important;
	}
	form.myForm input[type="text"], form.myForm input[type="password"], form.myForm select{
		width: 100%!important;
		border: none!important;
		border-radius: 0.5rem!important;
		line-height: 1.7;
		color: var(--black);
		padding: 0.5rem 1rem!important;
	}
	form.myForm select{
		border: 1px solid var(--color4)!important;
	}
	.content_form .label_frame{
		font-weight: normal;
	}
	form.myForm .required .my_column.my_left label:first-child:after, form.myForm th.required label:first-child:after, form.myForm span.required:after, div.komoju_form .required .my_column.my_left label:first-child:after{
		background-color: var(--color3);
		height: auto;
		width: auto;
		line-height: 1.25 !important;
		font-weight: 400;
		font-size: 0.85rem;
		padding: 0.3rem 0.5rem;
		border-radius: 0.375rem;
	}
	input {
		transition: all 0.2s;
		&[type="submit"], &[type="button"]{
			background-color: var(--color3);
			color: white;
			padding: 0.5rem 0;
			border-radius: 10rem;
			width: 10em;
		}
	}
	input:hover{
		opacity: 0.7;
	}
	form.myForm select{
		max-width: 100%;
		width: calc(100% - 20.0px - 2.8px);
	}
	.content_form label{
		text-align: left;
		width: auto;
	}
	.content_form .input_unit .my_left.my_column{
		width: 30%;
	}

}
/* lg */
@media (max-width: 800px){
	.content_form .input_unit .my_left.my_column{
		width: 100%!important;
		text-align: left;
		padding-bottom: 10px!important;
		padding-top: 30px!important;
	}
	.content_form .input_unit .my_right.my_column{
		padding: 0!important;
	}
}