@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=Afacad+Flux:wght@100..1000&family=Noto+Sans+JP:wght@100..900&display=swap');

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

/* font */

:root{
	--font-d: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	--font-en: "Afacad Flux", "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
.font_jp{
	font-family: var(--font-d);
}
.font_en{
	font-family: var(--font-en);
}

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

/* svg icon */

.icon_wrap{
	.s_icon{
		fill: currentColor;
		fill-rule: evenodd;
		stroke: none;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

/* form */

input{
	&[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;
	}
}
textarea{overflow: auto}
.form-select{
	outline: none;
}
.form-select:focus{
	border-color: var(--bs-border-color);
	box-shadow: none;
}
.form-check-input:focus{
	border-color: var(--bs-border-color);
	box-shadow: none;
}
.form-check-input:checked{
    background-color: var(--color3);
    border-color: var(--color3);
}

/* fade */

.fade_box{
    transition: 1s;
    transition-property: opacity, transform;
    transform: translateY(1rem);
	opacity: 0;
	&.active{
		opacity: 1;
		transform: none;
	}
}

.fade_txt span{
    transition: opacity 1s;
	opacity: 0;
	&.active{
		animation: fadeTxt 0.5s both;
	}
}
@keyframes fadeTxt {
	0%{opacity: 0;}
	33%{opacity: 1;}
	66%{opacity: 0;}
	100%{opacity: 1;}
}

/* bootstrap custom */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	&:focus{
		outline:none;
	}
}
html{
	font-size: 16px;
	@media (max-width: 565px) {
		font-size: 14px;
	}
	overflow: auto;
	height: 100%;
	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;
		#wrap{
			transition: opacity 1s;
			opacity: 0;
			&.active{
				opacity: 1;
			}
		}
		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;
		}
	}
}

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

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

.fs-7{font-size: 0.8rem;}
.fs-8{font-size: 0.65rem;}

.box-shadow-blue1,.box-shadow-blue1_hv:hover{
	box-shadow: 20px 30px 50px color-mix(in srgb, var(--color1) 50%, white);
}
.box-shadow-blue2,.box-shadow-blue2_hv:hover{
	box-shadow: 3px 6px 15px color-mix(in srgb, var(--color1) 20%, white);
}
.drop-shadow-blue1{
	filter: drop-shadow(15px 10px 20px color-mix(in srgb, var(--color1) 50%, transparent))
}

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

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

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

#header{
	&::before{
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		pointer-events: none;
		top: 0;
		left: 0;
		backdrop-filter: blur(5px);
		background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0));
		transition: opacity 0.5s;
		opacity: 0;
	}
	&.active::before{
		opacity: 1;
	}
	.nav_icon{
		span{
			width: 1.8rem;
			height: 0.6rem;
			&::before,
			&::after{
				position: absolute;
				content: "";
				width: 80%;
				height: 1px;
				background-color: currentColor;
				left: 0;
				right: 0;
				margin: auto;
				transition: 0.3s cubic-bezier(.1,.4,.2,1);
				transition-property: transform, width;
			}
			&::before{
				top: 0
			}
			&::after{
				bottom: 0
			}
		}
		&:hover span::before,
		&:hover span::after{
			@media (hover: hover) and (pointer: fine){
				width: 100%
			}
		}
		&.active span::before,
		&.active span::after{
			width: 100%;
			top: 0;
			bottom: 0;
		}
		&.active span::before{
			transform: rotate(30deg);
		}
		&.active span::after{
			transform: rotate(-30deg);
		}
	}
	ul li a{
		transition: 0.2s;
	}
}

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

footer{
	ul li a{
		transition: 0.2s;
	}
}

/* ▼ movie bot */

/* ▼ movie bot */

#page_15{
	.cate{
		&:first-of-type .prev_btn{
			display: none;
		}
	}
	.box_wrap .cate_box{
		a{
			transition-property: opacity;
		}
	}
	.box_item{
		background-image: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.8));
		.nav_arrow{
			text-shadow: 0 0 5px black;
			cursor: pointer;
			transition: opacity 0.2s;
			span{
				transition: transform 0.2s;
			}
			&::after{
				content: "MENU";
				display: block;
			}
			&.active::after{
				content: "CLOSE";
			}
			&.active i{
				transform: rotateX(180deg);
			}
		}
	}
	.top_nav > div{
		background-image: linear-gradient(to bottom, rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.4));
		background-size: 100% 2px;
		background-repeat: no-repeat;
		background-position: center;
		transition: background-size 0.2s;
		&:hover{
			background-size: 100% 4px;
			span{
				background-size: 100% 4px;
				&::before{
					opacity: 1;
				}
			}
		}
		span{
			background-image: linear-gradient(to bottom, #fff, #fff);
			background-size: 100% 2px;
			background-repeat: no-repeat;
			background-position: center;
			transition: background-size 0.2s;
			position: relative;
			&::before{
				position: absolute;
				content: "";
				pointer-events: none;
				opacity: 0;
				transition: opacity 0.2s;
				background-color: #fff;
				width: 0.8em;
				aspect-ratio: 1;
				border-radius: 50%;
				right: -0.5em;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
}

.volume_bt{
	text-shadow: 0 0 5px black;
	top: 42px;
	right: -6%;
	cursor: pointer;
	&[data-volume="true"] .on{
		display: block;
	}
	&[data-volume="true"] .off{
		display: none;
	}
	&[data-volume="false"] .on{
		display: none;
	}
	&[data-volume="false"] .off{
		display: block;
	}
}
.control_bt{
	transform: translate(-50%, -50%) scale(100%, 100%);
	animation: controlbt 0.2s ease-in-out;
}
@keyframes controlbt {
	from {
		transform: translate(-50%, -50%) scale(90%, 90%)
	}
}
#movie_frame{
	width: 100vw;
	iframe{
		aspect-ratio: 9 / 16
	}
	.close_bt{
		right: 0;
		top: 0;
		cursor: pointer;
		text-shadow: 0 0 5px black;
		border-radius: 0 0 0 10px;
		aspect-ratio: 1;
	}
	@media (max-width: 575px) {
		height: 100%;
		aspect-ratio: auto;
		border-radius: 0!important;
		border: none;
		right: 0;
		bottom: 0;
	}
}

/* ▲ movie bot */


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

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

/* arrow_btn */

.arrow_btn a{
	i.bi-arrow-right{
		transition: transform 0.5s cubic-bezier(.1,.4,.2,1)
	}
	&:hover i.bi-arrow-right{
		@media (hover: hover) and (pointer: fine){
			transform: translateX(5px);
		}
	}
	&::before{
		position: absolute;
		content: "";
		width: 0;
		height: 100%;
		background-color: rgb(255 255 255 / 0.1);
		transition: width 0.3s cubic-bezier(.1,.4,.2,1);
		left: 0;
		top: 0;
	}
	&:hover::before{
		@media (hover: hover) and (pointer: fine){
			width: 100%
		}
	}
}

.arrow_btn2 a{
	transition: color 0.2s;
	.icon_box{
		transition: 0.2s;
	}
	&:hover .icon_box{
		@media (hover: hover) and (pointer: fine){
			background-color: var(--color1);
			color: #fff;
			border-color: transparent!important;
			i{
				animation: arrow 0.4s cubic-bezier(.1,.4,.2,1);
			}
		}
	}
}
@keyframes arrow{
	0%{
		margin-left: 0;
	}
	49%{
		margin-left: 100%;
		opacity: 1;
	}
	50%{
		margin-left: 100%;
		opacity: 0;
	}
	51%{
		margin-left: -100%;
		opacity: 0;
	}
	52%{
		margin-left: -100%;
		opacity: 1;
	}
	100%{
		margin-left: 0;
	}
}

.arrow_btn3 a{
	transition: color 0.2s;
	.icon_box{
		i{
			transition: transform 0.3s cubic-bezier(.1,.4,.2,1);
		}
		&::before{
			position: absolute;
			content: "";
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: var(--color1);
			opacity: 0.2;
			transition: 0.3s cubic-bezier(.1,.4,.2,1);
			transition-property: opacity, transform;
			z-index: -1;
		}
	}
	&:hover .icon_box{
		i{
			transform: scale(1.2);
		}
		&::before{
			transform: scale(1.2);
		}
	}
}

/* parallax */

.bg_parallax{
	@media (max-width:991px) { /* lg */
		font-size: 13px;
	}
	@media (max-width: 567px) { /* sm */
		font-size: 8px;
	}
	.symbol1{
		width: 17em;top: 2%;left: -8%;
		@media (max-width:768px) { /* md */
			left: -14%;
		}
	}
	.symbol2{
		opacity: 0.2;width: 20em;top: -75%;left: 17%;filter: blur(20px);
		@media (max-width:991px) { /* lg */
			width: 30em;
			top: auto;
			bottom: -50%;
			left: -30%;
		}
	}
	.symbol3{
		width: 40em;bottom: 30%;right: 4%;
		@media (max-width:991px) { /* lg */
			bottom: 40%;right: -11%;
		}
		@media (max-width:768px) { /* md */
			right: -24%;
		}
		@media (max-width: 567px) { /* sm */
			width: 34em;bottom: 70%;right: -16%;
		}
	}
	.symbol4{
		width: 22em;bottom: -20%;right: 8%;
		@media (max-width:991px) { /* lg */
			right: 8%;
		}
		@media (max-width: 567px) { /* sm */
			width: 24em;right: -7%;bottom: -12%;
		}
	}
	.symbol5{
		width: 12em;bottom: -10%;right: 10%;
		@media (max-width:991px) { /* lg */
			width: 14em;bottom: 0;
		}
		@media (max-width: 567px) { /* sm */
			width: 9em;right: 9%;bottom: 2%
		}
	}
	.symbol6{
		opacity: 0.1;width: 20em;top: -10%;left: -4%;filter: blur(10px);
	}
	.symbol7{
		width: 15em;bottom: -8%;left: 1%;
		@media (max-width:991px) { /* lg */
			bottom: -16%;left: -5%;
		}
	}
	.symbol8{
		opacity: 0.2;width: 50em;top: 100%;right: -14%;filter: blur(20px);
	}
	.symbol9{
		width: 30em;top: -30%;left: 5%
	}
	.symbol10{
		width: 20em;top: 70%;left: 15%
	}
	.symbol11{
		width: 30em;top: 50%;right: 10%
	}
	.symbol12{
		width: 15em;bottom: -8%;right: -1%;
		@media (max-width:991px) { /* lg */
			width: 13em;bottom: -12%;
		}
	}
	.symbol13{
		opacity: 0.1;width: 20em;top: 100%;left: -2%;filter: blur(10px);
	}
	.symbol14{
		opacity: 0.1;width: 30em;top: -60%;right: -10%;filter: blur(20px);
		@media (max-width: 567px) { /* sm */
			top: 0;right: -17%
		}
	}
	.symbol15{
		opacity: 0.1;width: 26em;bottom: 90%;left: -5%;filter: blur(20px);
	}
	.symbol16{
		width: 30em;bottom: 15%;right: 4%;
		@media (max-width:991px) { /* lg */
			width: 26em;
			bottom: 35%;
			right: -11%;
		}
		@media (max-width: 567px) { /* sm */
			width: 24em;
			bottom: 40%;
			right: -12%;
		}
	}
	.symbol17{
		width: 12em;bottom: -20%;right: 10%;
		@media (max-width:991px) { /* lg */
			right: -5%;
		}
		@media (max-width: 567px) { /* sm */
			width: 14em;
			bottom: -19%;
			right: -3%;
		}
	}
}

.icon_wrap{
	pointer-events: none;
	.main_symbol{
		aspect-ratio: 91 / 152;
		animation: horizontal ease-in-out infinite alternate, vertical ease-in-out infinite alternate;
		position: relative;
	}
	&:nth-of-type(3n) .main_symbol{
		animation-duration: 1.7s, 2s;
	}
	&:nth-of-type(3n-1) .main_symbol{
		animation-duration: 2s, 2.5s;
	}
	&:nth-of-type(3n-2) .main_symbol{
		animation-duration: 1.9s, 1.7s;
	}
}
@keyframes horizontal {
    0%{translate: -4px 0;}
  100%{translate: 0 0;}
}
@keyframes vertical {
    0%{transform: translateY(-15px);}
  100%{transform: translateY(0px);}
}

/* top_fv_news */

.top_fv_news{
	@media (max-width: 575px) {
		border-top-left-radius: 0!important;
		border-bottom-left-radius: 0!important;
	}
}

.con_title_wrap{
	.con_title{
		font-size: 5rem;
		@media (max-width: 575px) {
			font-size: 4rem;
		}
	}
}

/* fv */

#fv{
	scale: 1.1;
	opacity: 0;
	filter: blur(5px);
	transition: 3s cubic-bezier(0,.67,.27,1);
	transition-property: scale, opacity, filter;
	&.active{
		scale: 1;
		opacity: 1;
		filter: blur(0);
	}
	@media (max-width: 575px) {
		height: 600px!important;
	}
}

/* top_con1 */

#top_con1{
	.top_con1_bg{
		transform: translateX(-100%);
		transition: transform 1s cubic-bezier(.69,0,0,1);
		border-top-right-radius: 6rem;
		@media (max-width: 991px) {
			height: 80vw!important;
		}
		@media (max-width: 575px) {
			height: 100vw!important;
		}
		&.active{
			transform: translateX(0);
		}
	}
	.cate_box{
		padding-bottom: 6rem;
	}
}

/* top_con2 */

#top_con2{
	margin-top: -6rem;
	border-top-left-radius: 6rem;
	.box_txt1{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
.swiper{
	.swiper-button-next, .swiper-button-prev{
		transition: 0.2s;
		transition-property: background-color, color;
		padding: 0.5rem 2rem;
		&:after{
			font-size: inherit;
		}
	}
}

/* top_con2-2 */

#top_con2-2,#page_04{
	.swiper-slide,.box{
		padding-bottom: 15px;
		&::after{
			position: absolute;
			content: "";
			display: block;
			width: 16px;
			aspect-ratio: 1;
			right: 5%;
			bottom: 0;
			background-color: var(--color1);
			clip-path: polygon(100% 0, 100% 100%, 0 0);
			margin-top: -1px;
		}
		.box_txt1{
			-webkit-line-clamp: 3;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}
		.tag a{
			transition: opacity 0.2s;
		}
	}
}

/* top_con3 */

#top_con3 {
	.con3_bg{
		left: var(--section-x);
		margin-top: -7rem;
		margin-left: -7rem;
		@media (max-width: 991px) {
			margin-top: -4rem;
			margin-left: -4rem;
		}
		img{
			animation: con3Bg 20s linear infinite;
		}
	}
	.con3_wrap{
		padding-top: var(--section-x);
		padding-bottom: var(--section-x);
		@media (max-width: 575px) {
			padding-top: 3rem;
			padding-bottom: 3rem;
		}
	}
}
@keyframes con3Bg {
	from {
		transform: rotate(360deg)
	}
}

/* top_con4 */

#top_con4 {
	.conveyer_txt{
		background-image: url(../img/con4_bg.png);
		background-size: 1760px;
		background-repeat: repeat-x;
		background-position-x: 0;
		background-position-y: center;
		animation: con4Bg 30s linear infinite;
	}
	@media (max-width: 565px) {
		height: 500px!important
	}
}
@keyframes con4Bg {
	from {
		background-position-x: 1760px;
	}
}

/* top_con5 */

#top_con5{
	.box_title1, .box_txt1{
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		@media (max-width: 575px) {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}

/* top_con6 */

#top_con6{
	.cate_box a{
		@media (hover: hover) and (pointer: fine){
			transition: 0.2s;
		}
		i{
			transition: 0.2s;
		}
		&:hover i{
			@media (hover: hover) and (pointer: fine){
				transform: translateX(5px);
			}
		}
	}
}

/* top_con7 */

#top_con7{
	.cate_box a{
		@media (hover: hover) and (pointer: fine){
			transition: background-color 0.2s;
		}
	}
}

/***　page_title, pager　***/

#page_title{
	.con_title{
		font-size: 6rem;
		@media (max-width: 575px) {
			font-size: 4rem;
		}
	}
}

.pager li a{
	&:has(i){
		background-color: transparent;
	}
}


/***　page_02　***/

#page_02{
	.blogListPattern_item a{
		@media (hover: hover) and (pointer: fine){
			transition: 0.2s;
		}
		i{
			transition: 0.2s;
		}
		&:hover i{
			@media (hover: hover) and (pointer: fine){
				transform: translateX(5px);
			}
		}
	}
	.blog_cate li{
		a{
			transition: color 0.2s;
		}
		&.active a{
			color: var(--color1);
			border-color: var(--color1)!important;
		}
	}
	.blog_body .blog_bodyCate a{
		transition: background-color 0.2s;
	}
	.all_blog_link a{
		transition: color 0.2s;
	}
}


/***　page_03　***/

.modal_bt .box_txt1{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 2行に制限 */
    overflow: hidden;
    text-overflow: ellipsis;
}


#modal_contents .cate_wrap {
		.cate_box{
		cursor: pointer;
		transition: all .3s;
		}
}



/* modal */
#modal_contents .modal_box {
	display: none;
	position: fixed;
	top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.15);
    z-index: 101;
    overflow-y: scroll;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-align: left;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
	overflow: auto;
	padding: 40px;
	padding-top: 50px;
	padding-bottom: 50px;
	.close{
		position: fixed;
		top: 60px;
		right: 60px;
		cursor: pointer;
	}

}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	#modal_contents{ 
		.modal_box{
			padding-top: 50px;
			padding-bottom: 30px;
				.close{
					top: 3%;
					right: 4%;
				}
		}
		.cate_box{
			width: 100% !important;
		}
		.modal_box {
			padding: 3%;
		}

	}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){}


/***　page_04　***/

#page_04{
	.blog_cate_wrap li{
		a{
			transition: .2s;
		}
		a:hover{
			background: var(--bs-success-bg-subtle);
			border-color: var(--bs-success)!important;
			color: var(--bs-success);
		}
		a:before{
		content: "\0023 ";
		margin-right: .25rem !important;
		}
		a:before{}
	}
}



/***　Page05　***/
#page_05{
	.box_title1{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.box_txt2 {
		.content_form .input_unit{
			margin-top: 0;
			margin-left: 0;
			margin-right: 0;
		}
		.input, div[class*="input"], p{
			margin-bottom: 1em;
			width: 100%;
		}
		input[type="text"], select{
			border: none;
			background-color: var(--color2);
			border-radius: 0.3em;
			display: block;
			padding: 0.3em 0.5em;
			font-size: 100%;
			line-height: 1.5;
			width: 100%;
		}
		input[type="submit"]{
			display: block;
			padding: 0.5em 0;
			width: 100%;
			text-align: center;
			border-radius: 0.5em;
			background-color: var(--color1);
			color: #fff;
			max-width: 400px;
			margin: 2em auto 0;
			transition: opacity 0.2s;
			border: none;
			font-weight: bold;
			font-size: 100%;
			letter-spacing: 0.1em;
			&:hover{
				opacity: 0.75;
			}
		}
		input[type="checkbox"], input[type="radio"]{
			display: inline-block;
			width: 1em;
			height: 1em;
			margin-right: 0.5em;
		}
		label {
			display: block;
			font-weight: bold;
			margin-bottom: 0.2em;
		}
		.content_form .input_unit .my_left.my_column, .content_form .input_unit .my_right.my_column{
			padding: 0;
			width: 100%;
		}
	}
}
#modal_contents{
	.box_item{
		margin: 0;
		padding: 0;
		.box_img1{
			margin-top: 0;
			padding:0;
		}
	}
}

/***　page_06　***/

#page_06{
/* padding: var(--section-y) 5rem 0; */
    .cate_wrap{
        padding-top:var(--section-y);
      /*   width: calc(100% - 180px);
      margin: 0 0 0 auto; */
        }
	.cate_list li{
		a{
			transition: color 0.2s;
		}
		&.active a{
			color: var(--color1);
			border-color: var(--color1)!important;
		}
	}
	.cate{
		background-image: linear-gradient(to bottom, var(--color2),
 #fff 20rem);
		border-radius: 4rem 4rem 0 0;
		.cate_item1{
			padding-bottom: 4rem!important;
			margin-bottom: 5rem!important;
			&::before, &::after{
				--scrollH: 4em;
				position: absolute;
				content: "";
				width: 1px;
				height: var(--scrollH);
				left: 0;
				right: 0;
				bottom: calc(var(--scrollH) / 2 * -1);
				margin: auto;
				background-color: var(--color1);
			}
			&::before{
				opacity: 0.1;
			}
			&::after{
				animation: scrollBottom 3s infinite;
			}
		}
		.cate_item2 .box_title1{
			&::before{
				position: absolute;
				content: "";
				width: 0;
				height: 0;
				border-left: solid 0.6em transparent;
				border-top: solid 0.7em var(--color3);
				border-right: solid 0.6em transparent;
				left: 0;
				right: 0;
				bottom: calc(-0.6em + 1px);
				margin: auto
			}
		}
		.cate_title3 div{
			&::before, &::after{
				position: absolute;
				content: "";
				width: 3em;
				height: 2em;
			}
			&::before{
				border-top: solid 1px var(--color1);
				border-left: solid 1px var(--color1);
				top: 0;
				left: 0
			}
			&::after{
				border-bottom: solid 1px var(--color1);
				border-right: solid 1px var(--color1);
				bottom: 0;
				right: 0
			}
		}
	}
}
@keyframes scrollBottom{
	0%{
		opacity: 0;
		transform: scaleY(0);
		transform-origin: top;
	}
	1%{
		opacity: 1;
		transform: scaleY(0);
		transform-origin: top;
	}
	50%{
		opacity: 1;
		transform: scaleY(1);
		transform-origin: top;
	}
	51%{
		opacity: 1;
		transform: scaleY(1);
		transform-origin: bottom;
	}
	99%{
		opacity: 1;
		transform: scaleY(0);
		transform-origin: bottom;
	}
	100%{
		opacity: 0;
		transform: scaleY(0);
		transform-origin: bottom;
	}
}
/* 
#tab-menu{
    padding-top: calc(var(--section-y) / 2);
}
#tab-menu.fix_menu{
    top: 3rem;
    position: fixed;
    z-index: 2;
}
@media screen and (max-width: 768px){
    #page_06{
        .cate_wrap{
        width:100% !important;
    }
} */

/***　page_07　***/

#page_07{
	.cate_list li{
		a{
			transition: 0.2s;
			transition-property: border-color, color;
		}
		&.active a{
			color: var(--color1);
			border-color: var(--color1)!important;
		}
	}
	.cate{
		background-image: linear-gradient(to bottom, var(--color2),
 #fff 20rem);
		border-radius: 4rem 4rem 0 0;
	}
	.sub_cate_list li{
		&.active a{
			border-color: var(--color1)!important;
		}
		a{
			transition: border-color 0.2s;
		}
	}
	.voice_main{
		background-size: cover;
		background-position: center;
		.voice_bg{
			background-color: rgb(255 255 255 / 0.2);
			backdrop-filter: blur(8px);
		}
	}
	.arrow_btn2 a{
		transition: 0.2s;
		transition-property: border-color, color;
	}
	.step_wrap{
		.cate_box{
			.step_no{
				background-image: linear-gradient(to bottom, var(--bs-border-color), var(--bs-border-color));
				background-repeat: no-repeat;
				background-size: 1px 100%;
				background-position: top 0 right 0;
				&::before{
					position: absolute;
					content: "";
					display: block;
					width: 0.5em;
					height: 0.5em;
					right: calc(-0.25em + 1px);
					top: 0.2em;
					background-color: var(--color1);
					border-radius: 100%;;
				}
			}
			&:first-of-type .step_no{
				background-size: 1px calc(100% - 0.3em);
				background-position: bottom 0 right 0;
			}
			&:last-of-type .step_no{
				background-size: 1px 0.3em;
				background-position: top 0 right 0;
			}
		}
	}
}

/***　page_08　***/
#page_08 #form_box .box input::-webkit-input-placeholder,#page_08 #form_box .box textarea::-webkit-input-placeholder{
	font-family: var(--font-d);
	font-size: inherit;
	opacity: 0.5;
}
#page_08 #form_box .box input:-moz-placeholder,#page_08 #form_box .box textarea:-moz-placeholder{
	font-family: var(--font-d);
	font-size: inherit;
	opacity: 0.5;
}
#page_08 #form_box .box input::-moz-placeholder,#page_08 #form_box .box textarea::-moz-placeholder{
	font-family: var(--font-d);
	font-size: inherit;
	opacity: 0.5;
}
#page_08 #form_box .box input:-ms-input-placeholder,#page_08 #form_box .box textarea:-ms-input-placeholder {
	font-family: var(--font-d);
	font-size: inherit;
	opacity: 0.5;
}
#page_08 #form_box #form_bt div{
	display: inline-block;
	height: 50px;
	position: relative;
	-ms-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
#page_08 #form_box #form_bt div input{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 99;
	top: 0;
	left: 0;
	padding: 15px;
	border: none;
	background-color: transparent;
	-webkit-appearance: none;
}
#page_08 #form_box #form_bt .bt_on input{
	cursor: pointer;
}
#page_08 #form_box #form_bt .bt_on:hover{
	transform: translate(0,-5px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.g-recaptcha > div {
	margin-bottom: 30px;
	overflow: hidden;
}
#page_08 #form_box #form_bt div::after{
	display: block;
	position: absolute;
	width: auto;
	height: 18px;
	letter-spacing: 3px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	line-height: 1;
	z-index: 98
}
#page_08 #form_box #form_bt #submit::after{
	content: "送信";
}


#page_08 .box input, #page_08 .box textarea{
	appearance: none;
	border: 1px solid var(--color4);
	outline: none;
}
.g-recaptcha > div{
	margin: 0 auto;
}


/*** page_12　***/
#page_12{
	.cate_wrap{
		.map iframe{
			width: 100%;
			height: 350px;
		}
	}
}

/***　page_13　***/


/***　page_14　***/


/***　マイスピーフォーム　***/

.saiyou_form{
    .content_title{
        display: none;
    }
    .required_color{
        background-color: #fff4f7 !important;
    }
    input {
        &[type="submit"]{
        display: inline-block;
        height: 50px;
        width: 33%;
        position: relative;
        background-color: var(--color1);
        color: white;
        border-radius: 10px;
    }
    }
    .content_form{
        max-width: 900px;
        .input_unit .my_left.my_column{
        text-align: left;
        }
        .label_frame{
        font-weight: normal;
        }
    }


    form.myForm input[type="text"], form.myForm input[type="password"] {
        -webkit-border-radius: 5px!important;
        border-radius: 5px!important;
        width: 100%;
    }
    form.myForm .required .my_column.my_left label:first-child:after{
        font-size: 0.8rem;
        height: 1rem;
        line-height: 1;
        padding: 0.3rem 0.2rem 0.15rem;
        background-color:var(--red);
    }
    form.myForm select,form.myForm select:first-of-type{
        margin-left: 0px;
        margin-right: auto;
        display: block;
    }
}

/***　カテゴリリストPage_06、Page_07　***/
/* 必須: 親要素を基準にする */
.container {
    position: relative; 
}
/* 基本スタイルとトランジションの設定 */
.sticky-header {
    /*transition: opacity 0.3s ease-out;  ふわっと消えるための設定 */
	right: 0%;
	left: 0%;
	position: absolute;
    opacity: 0; /* 初期表示 */
    transition: 0.2s;
    transition-property: left, right;
    z-index: 1;
	width: max-content;
	margin: 0 0 0 auto;
	.box_item{
		display: block;
	}
}
.sticky-header .box_item{
		display: block;
	}
	
/* --- PC (非モバイル) の固定スタイル --- */
/* PCで固定される位置 (メインヘッダーの下) はJSで計算してインラインスタイルで設定 */
.is-stuck {
	backdrop-filter: blur(10px);
    background-color: rgba(255 255 255 / 0.7);
    position: fixed;
	right: 3%;
	left: auto;
    opacity: 1;
	padding: 0.5rem 2rem 0.5rem 3rem;
	border-radius: 4rem 0 0 4rem;
}

/* --- PC (非モバイル) の固定解除スタイル --- */
.is-stopped {
    position: absolute; /* 親要素基準で位置を確定 */
    bottom: 0;          /* 親要素の底に張り付く */
    top: auto !important; 
    /* right: 0; */
    /* width: 100%; */
    opacity: 1;
}

    .open_bt{
        display: none!important;
    }
/* --- スマホ (モバイル) 時の固定スタイル --- */
@media (max-width: 767px) {
	.sticky-header {
		width: 100%;
		margin: 0 auto;
		position: relative;
		opacity: 1;
		left: 0;
		z-index: 1;
	}
    .is-stuck {
        /* スマホ時: 画面の左下に固定 */
		position: fixed;
        top: auto;
        bottom: 0px; 
        left: 3%;
        right: auto;
        width: auto; /* 幅はコンテンツ幅を維持 */
		width: calc(90% - 100px);
		padding: 0.3rem 1.5rem 0.5rem 0.3rem;
		border-radius: 0rem 2rem 0 0;
    }

    /* --- スマホ (モバイル) 時 --- */
    .is-stopped {
        /* スマホ時: 親要素の底に張り付く (PCと同じスタイルで動作) */
        left: 0;
        width: 100%;
    }
	/*閉じるボタン*/
	.sticky-header{
		.box_item{
			display: none;
		}
			.arrow {
			position: relative;
			/* left: 2px;
			top: 50%; */
			margin-top: 0px;
			transform: translate(6px, 8.5px);
		}
		.open_bt{
		    display: flex!important;
			position: relative;
			width: 100%;
			cursor: pointer;
			padding: 20px 0
		}
	}
	.sticky-header .open_bt .arrow::before, .sticky-header .open_bt .arrow::after {
		position: absolute;
		content: '';
		width: 15px;
		height: 1px;
		background-color: var(--color1);
		transform: rotate(45deg);
	}
	.sticky-header .open_bt .arrow::after {
	top: 0%;
	left: 0px;
	transform: rotate(135deg);
	transition: all 0.5s;
	}
	.sticky-header .cate_box .open_bt .arrow.arrow_be::before {
		transform: rotate(180deg);
		transition: all 0.5s;
	}
	.sticky-header .cate_box .open_bt .arrow.arrow_be::after {
		transform: rotate(270deg);
		transition: all 0.5s;
	}
}