@charset "UTF-8";
/* CSS Document */

.line02 table {
    border-spacing:0;
    margin: 0 auto;
    padding: 0;
    width:100%;
}
.line02 table th{
	border-bottom: solid 2px #ba2636;
	padding: 1em;
	width: 25%;
	min-width: 9em;
}
.line02 table td{
	border-bottom: solid 2px #ccc;
	padding: 1em;
}
.line02 table td i{
	color: #ba2636;
	padding-left: 1em;
}
.line02 dl{
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}
.line02 dl dt{
	padding: 0.25em;
	font-weight: 600;
}
.line02 dl dd{
	padding: 0.25em;
}

.line02 ul li{
	padding-left: 1em;
	text-indent: -1em;
	margin-bottom: 0.5em;
}
@media (max-width: 768px){
	.line02 table th{
		display: block;
		width: 100%;
		border-bottom: none;
		text-align: left;
		padding-bottom: 0;
	}
	.line02 table td{
		display: block;
		width: 100%;
		border-bottom: solid 2px #ba2636;
	}
	.line02 dl{
		flex-direction: column;
		align-self: flex-start;
		justify-content: flex-start;
	}
}
.simple01 table {
	border-collapse: collapse;
    border-spacing: 5px;
    margin: 0 auto;
    padding: 0;
    width:100%;
	background: rgba(255,255,255,0.3);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.simple01 table tr{
	border-bottom: solid 1px #ccc;
}
.simple01 table th,.simple01 table td{
	padding: 1.5em 1em;
	text-align: left;
	vertical-align: top;
}
.simple01 table th{
	color: #8a9898;
	font-weight: 600;
	width: 20%;
	min-width: 6em;
}
.simple01 table td i{
	color: #8a9898;
}
@media (max-width: 960px){
	.simple01 table th,.simple01 table td{
		display: block;
		width: 100%;
	}
	.simple01 table th{
		padding-bottom: 0;
	}
}

ul.border01{
	padding-left: 1em;
	font-size: 1.2em;
	font-family: "Noto Serif JP", serif;
}
ul.border01 li{
	border-bottom: dotted 1px #ba2636;
	margin-bottom: 1rem;
}
ul.border01 li i{
	color: #ba2636;
}
.dl_border01{
	padding: 1rem;
}
.dl_border01 dl{
	display: flex;
	align-items: flex-start;
	border-bottom: dotted 1px #ba2636;
}
.dl_border01 dl dt{
	width: 20%;
	padding: 1em 0 1em 1em;
	font-weight: 600;
}
.dl_border01 dl dt i{
	color: dotted ;
}
.dl_border01 dl dd{
	padding: 1em;
}
@media (max-width: 960px){
	.dl_border01 dl{
		display: block;
		width: 100%;
	}
	.dl_border01 dl dt{
		width: 100%;
		padding: 1em 1em 0.5em;
	}
	.dl_border01 dl dd{
		width: 100%;
		padding:0.5em 1em 1em;
	}
}
.border02{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap:15px;
	padding: 15px 0;
}
.border02 li{
	border-bottom: dashed 1px #ba2636;
}
/* ボタン　================================================== */
.button_wrap{
	width: fit-content;
	margin: auto;
}
.spiral {
	display:inline-block;
	width: 300px;
	height: 4rem;
	text-align: center;
	position: relative;
	cursor: pointer;
	margin: 15px auto;
	border:solid 1px #fff;
	background: rgba(0,0,0,0.25);
	transition: .5s;
}
.spiral span {
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	font-style: normal;
	color: #fff;
	text-align: center;
	line-height: 4rem;
	margin: auto;
	font-size: 1rem;
	transition-duration: 0.5s;
}
.spiral span::before{
	display: inline-block;
    position: absolute;
    top: 50%;
    left: -1em;
    width: 2em;
    height: 1px;
	border-bottom: solid 1px #ba2636;
    content: "";
	transition-duration: 0.5s;
}

.spiral-top::before,
.spiral-top::after,
.spiral-bottom::before,
.spiral-bottom::after {
	content: " ";
	background: #ba2636;
	position: absolute;
	transition-duration: 0.5s;
}

.spiral-top::before {
	top: -1px;
	left: -1px;
	width: 1px;
	height: 0px;
}
.spiral-top::after {
	top: -1px;
	right: -1px;
	width: 0px;
	height: 1px;
}
.spiral-bottom::before {
	bottom: -1px;
	left: -1px;
	width: 0px;
	height: 1px;
}
.spiral-bottom::after {
	bottom: -1px;
	right: -1px;
	width: 1px;
	height: 0px;
}
.spiral:hover{
	border:solid 1px #666;
}
.spiral:hover span::before{
	left: -0.25em;
}
.spiral:hover
.spiral-top::before {
	height:calc(100% + 2px);
}
.spiral:hover
.spiral-top::after {
	width:calc(100% + 2px);
}
.spiral:hover
.spiral-bottom::before {
	width:calc(100% + 2px);
}
.spiral:hover
.spiral-bottom::after {
	height:calc(100% + 2px);
}
@media (max-width: 450px){
	.spiral{
		width: calc(100% - 1rem);
		max-width: 300px;
		min-width: 260px;
	}
}
/* ボタン　================================================== */

.btn_st{
	width: 250px;
	margin: 30px auto;
	text-align: center;
}
.btn_st a{
	display: block;
	width: 100%;
	background: #ba2636; 
	outline: none;
	position: relative;
	padding: 15px;
	overflow: hidden;
	color: #fff;
	font-size: 1em;
	font-weight: 500;
	border-radius: 50px;
}

.btn_st a:hover:before{
	opacity: 1; 
	transform: translate(0,0);
}
.btn_st a:before{
	content: attr(data-hover);
	position: absolute;
	top: 0.8em; 
	left: 0;
	width: 100%;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-family: "Cormorant Garamond", serif;
	font-weight: 600;
	font-size: 1.1em;
	opacity: 0;
	transform: translate(-100%,0);
	transition: all .3s ease-in-out;
}
.btn_st a:hover div{
	opacity: 0; 
	transform: translate(100%,0)
}
.btn_st a div{
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: .8em;
	transition: all .3s ease-in-out;
}

/*  リンクコンテンツ ================================================== */

.gene_link{
	position: relative;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
}
.gene_link a{
	display: block;
	width: calc(100% / 2);
	background-size: cover;
	background-position: center;
	height: 500px;
	padding: 20px;
}
.gene_link a::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 3;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: transform 10s, opacity 1s;
}
.gene_link a:hover::after{
	transform: scale(1.2);
	opacity: 1;
}
.gene_link a h3{
	color: #fff;
	position: relative;
	z-index: 2;
	writing-mode: vertical-rl;
	text-shadow: rgba(51,51,51,0.6) 0 0 10px;
}
.gene_link a h3 span.en{
	display: block;
	text-transform: uppercase;
	font-family: "Cormorant Garamond", serif;
	font-weight: 600;
	font-size: 0.8rem;
	color: #ba2636;
	letter-spacing: 0.3em;
	margin-bottom: 5px;
}
.gene_link a h3 span.ja{
	display: block;
	font-weight: 500;
	font-size: 1.4rem;
	letter-spacing: 0.2em;
}
.gene_link a:hover h3{
	z-index: 4;
}

.gene_link a.link01,
.gene_link a.link01::after{
	background-image: linear-gradient(to right , rgba(0,0,0,0.2) 60%,rgba(0,0,0,0.5)) ,url("../img/img102.webp");
}
.gene_link a.link02,
.gene_link a.link02::after{
	background-image: linear-gradient(to right , rgba(0,0,0,0.2) 60%,rgba(0,0,0,0.5)) ,url("../img/img103.webp");
}

@media (max-width: 1100px){
	.gene_link{
		flex-wrap: wrap;
		height: auto;
	}
	.gene_link a{
		width: 100%;
		height: 300px;
	}
	.gene_link a h3{
		writing-mode: horizontal-tb;
	}
}

@media (max-width: 450px){
	.gene_link{
		height: auto;
	}
	.gene_link a{
		min-height: 100px;
	}
}
.map{
	width: 100%;
	padding: 10px;
	margin-bottom: 30px;
}

.map iframe{
	width: 100%;
	vertical-align: middle;
}


/* ビフォーアフター ================================================== */
.before_after{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 900px;
	margin: 20px auto 5px;
}
.before_after .ba_img{
	width: calc(100% / 2 - 30px);
	aspect-ratio: 3 / 2;
	position: relative;
	background: #f7f6f5;
}
.before_after .ba_img img.ba01{
	width: 100%;
	height: 100%;
	padding: 10px;
	vertical-align: middle;
	object-fit: contain;
	object-position: center;
}

.before_after .ba_img h4{
	position: absolute;
	top: 20px;
	left: -15px;
	transform: rotate(-10deg);
	font-size: 3em;
	color: #e65912;;
	font-family: 'Noto Serif JP', serif;
	filter: drop-shadow(2px 2px 5px rgba(255,255,255,0.5));
}
.ba_arrow{
	padding: 5px;
}
.ba_arrow i{
	color: #8a9898;
	font-size: 2em;
}
.ba h3{
	vertical-align: middle;
	text-align: left;
	border-left: 3px solid #339966;
	padding-left: 0.5em;
	font-size: 1.5em;
}
@media (max-width: 960px){
	/* ビフォーアフター==================================================  */
	.before_after{
		flex-direction: column;
		justify-content: center;
	}
	.before_after .ba_img {
		max-width: 380px;
		width: calc(100% - 30px);
		margin: auto;
	}
	.ba_arrow{
		transform: rotate(90deg);
		margin: 10px;
	}
}

/* QA ============================================================ */
.qa-list dl {
    position: relative;
    margin: 0;
    padding: 28px 80px 28px 30px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}
.qa-list dl:first-child {
    border-top: 1px solid #ccc;
}
.qa-list dl::before {
    position: absolute;
    top: 35px;
    right: 35px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #8a9898;
    border-right: 2px solid #8a9898;
}
.qa-list .open::before {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 0 0 0 50px;
    font-weight: bold;
    font-size: 1.2rem;
}
.qa-list dl dt::before {
    font-size: 30px;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: 'Q.';
    color:#8a9898;
}
.qa-list dl dd::before {
    font-size: 30px;
    line-height: 1;
    position: absolute;
    top: 3px;
    left: 2px;
    display: block;
    content: 'A.';
    color: #e65912;
}
.qa-list dl dd {
    position: relative;
    display: none;
    height: auto;
    margin: 20px 0 0;
    padding: 0 0 0 50px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}
@media (max-width: 750px){
	.qa-list dl{
		 padding: 28px 30px 28px 15px;
	}
	.qa-list dl::before{
		right: 15px;
	}
	.qa-list dl dt{
		padding: 0 0 0 40px;
	}
}
/* ながれ ================================================== */
.flow_wrap{
	padding: 50px 0;
}
.flow_inner{
	width:100%;
	max-width: 850px;
	margin: auto;
	padding: 15px;
	background: #fff;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
	display: flex;
	align-items: flex-start;
}

.flow_photo{
	align-self: center;
	width: 300px;
	text-align: center;
	padding: 15px;
	position: relative;
}
.flow_photo img{
	width: 100%;
	height: 200px;
	border-radius: 15px;
	object-fit: cover;
}

.h_number{
	font-family: 'Noto Serif JP', serif;
	position: absolute;
	top:-40px;
	left: -50px;
	display: inline-block;
	line-height: 80px;
	width: 80px;
	background: linear-gradient( 130deg, #12e6e6 , #12e69f);
	text-align: center;
	vertical-align: middle;
	margin-bottom: 10px;
	color: #fff;
	font-size: 3em;
	z-index: 1;
}
.flow_txt{
	padding: 10px 10px 10px 30px;
	font-size: 1em;
	flex:1;
}
.flow_txt p{
	
}
.flow_txt h3{
	font-size: 1.2em;
	color: #333;
	border-bottom: solid 3px #8a9898;
	margin-bottom: 15px;
	font-weight: 600;
}
.flow_arrow{
	font-size: 2em;
	text-align: center;
	color:#8a9898;
	margin: 10px;
}
.flow_link{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
}
.flow_link li {
	padding: 5px;
	text-align: center;
	font-size: 0.9em;
	align-self: stretch;
	transition: .5s;
}
.flow_link li a{
	display: block;
	padding: 0.5em 1em;
	line-height: 100%;
	vertical-align: middle;
	background: linear-gradient( 130deg, #12e6e6 , #12e69f);
	border-radius: 30px;
	border:solid 1px #12e69f;
	color: #fff;
	transition: .5s;
}
.flow_link li :hover{
	background: #fff;
	color: #1a1a1a;
}
@media (max-width: 1200px){
	.flow_inner{
		width:100%;
		max-width: 680px;
	}
	.flow_photo{
		width: 270px;
		height: 200px;
	}
	.flow_photo img{
		width: 270px;
		height: 200px;
	}
	.flow_link{
		flex-direction: column;
		justify-content: flex-start;
	}
}
@media (max-width: 765px){
	/* 流れ======================================== */
	.flow_inner{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.flow_txt{
		width: 100%;
		margin-top: 30px;
	}
	.h_number{
		left: -50px;
	}
}
/*背景のネオン======================================== */
.glow{
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	animation: glow 3s linear 0s infinite alternate;
}
.particles {
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
	width: 100px;
	height: 100px;
}
.particles .rotate {
	position: absolute;
	top: calc(50% - 5px);
	left: calc(50% - 5px);
	width: 10px;
	height: 10px;
}
.particles .angle {
	position: absolute;
	top: 0;
	left: 0;
}
.particles .size {
	position: absolute;
	top: 0;
	left: 0;
}
.particles .position {
	position: absolute;
	top: 0;
	left: 0;
}
.particles .pulse {
	position: absolute;
	top: 0;
	left: 0;
}
.particles .particle{
	position: absolute;
	top: calc(50% - 5px);
	left: calc(50% - 5px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
.particles .rotate {
	animation: rotate 20s linear 0s infinite alternate;
}
.particles .pulse{
	animation: pulse 1.5s linear 0s infinite alternate;
}
@keyframes glow {
	0% {
	  transform: rotate(0deg);
	  box-shadow: 0 0 60px 20px #56bcf9, 25px 15px 50px 10px #fff, -5px -25px 30px 5px #fff;
	}
	100% {
		  transform: rotate(5deg);
	  box-shadow: 0 0 90px 20px #56bcf9, 35px 20px 40px 10px #fff, -30px -30px 40px 5px #fff;
	}
}
@keyframes rotate {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
}
@keyframes angle {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
}
@keyframes size {
	0% {
	  transform: scale(.2);
	}
	100% {
	  transform: scale(.6);
	}
}
@keyframes position {
	0% {
	  transform: translate3d(0,0,0);
	  opacity: 1;
	}
	50%{
	  opacity: 1;
	}
	100% {
	  transform: translate3d(100px,100px,0);
	  opacity: 0;
	}
}
@keyframes pulse {
	0% {
	  transform: scale(1);
	}
	100% {
	  transform: scale(.5);
	}
}
@keyframes particle {
	0% {
	  box-shadow: inset 0 0 20px 20px #0079e8, 0 0 50px 10px #0079e8, inset 0 0 80px 80px #269aff;
	}
	33.33% {
	  box-shadow: inset 0 0 20px 20px #0079e8, 0 0 130px 10px #0079e8, inset 0 0 50px 50px #269aff;
	}
	33.34% {
	  box-shadow: inset 0 0 20px 20px #2693ff, 0 0 50px 10px #2693ff, inset 0 0 80px 80px #52abff;
	}
	66.66% {
	  box-shadow: inset 0 0 20px 20px #2693ff, 0 0 130px 10px #2693ff, inset 0 0 50px 50px #52abff;
	}
	66.67% {
	  box-shadow: inset 0 0 20px 20px #485fe8, 0 0 50px 10px #485fe8, inset 0 0 80px 80px #7d71e8;
	}
	100% {
	  box-shadow: inset 0 0 20px 20px #485fe8, 0 0 130px 10px #485fe8, inset 0 0 50px 50px #7d71e8;
	}
}
.particles .rotate .angle:nth-child(1){
	/* change the angle every 2 seconds */
	animation: angle 10s steps(5) 0s infinite;
}
.particles .rotate .angle:nth-child(1) .size{
	/* change the size of the particle every 2 seconds */
	animation: size 10s steps(5) 0s infinite;
}
.particles .rotate .angle:nth-child(1) .particle{
	/* animate the glow and change the color every 2 seconds */
	animation: particle 6s linear infinite alternate;
}
.particles .rotate .angle:nth-child(1) .position{
	/* animate the fly out of the particle and its fade out at the end */
	animation: position 2s linear 0s infinite;
}
.particles .rotate .angle:nth-child(2){
	/* change the angle every 2 seconds */
	animation: angle 4.95s steps(3) -1.65s infinite;
}
.particles .rotate .angle:nth-child(2) .size{
	/* change the size of the particle every 2 seconds */
	animation: size 4.95s steps(3) -1.65s infinite alternate;
}
.particles .rotate .angle:nth-child(2) .particle{
	/* animate the glow and change the color every 2 seconds */
	animation: particle 4.95s linear -3.3s infinite alternate;
}
.particles .rotate .angle:nth-child(2) .position{
	/* animate the fly out of the particle and its fade out at the end */
	animation: position 1.65s linear 0s infinite;
}
.particles .rotate .angle:nth-child(3){
	/* change the angle every 2 seconds */
	animation: angle 13.76s steps(8) -6.88s infinite;
}
.particles .rotate .angle:nth-child(3) .size{
	/* change the size of the particle every 2 seconds */
	animation: size 6.88s steps(4) -5.16s infinite alternate;
}
.particles .rotate .angle:nth-child(3) .particle{
	/* animate the glow and change the color every 2 seconds */
	animation: particle 5.16s linear -1.72 infinite alternate;
}
.particles .rotate .angle:nth-child(3) .position{
	/* animate the fly out of the particle and its fade out at the end */
	animation: position 1.72s linear 0s infinite;
}
.particles .rotate .angle:nth-child(5) .position{
	/* animate the fly out of the particle and its fade out at the end */
	animation: position 2.45s linear 0s infinite;
}

/* ナンバーリスト======================================== */

.number_list{
	padding: 2rem;
}
.number_list li{
	padding: 1rem 0;
	border-bottom: solid 2px #ba2636;
	position: relative;
}

.number_list li .li_numbar{
	font-size: 3rem;
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	color:#ba2636;
}
.number_list li .li_txt{
	font-size: 1.2rem;
	font-weight: 600;
	margin-left: 0.5rem
}
.number_list li p{
	margin-top: 1em;
	margin-left: 4.5em;
}

.bg_in_w .number_list li::before{
	border-bottom: solid 1px #fff;
}
@media (max-width: 960px){
	.number_list li .inner_flex{
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
	}
	.number_list li .li_numbar{
		width: 1.5em;
		align-self: flex-end;
	}
	.number_list li .li_txt{
		flex: 1;
		align-self: flex-end;
	}
	.number_list li p{
		margin-top: 1em;
		margin-left: 0;
	}
	.number_list.flow li .li_numbar{
		width: inherit;
		
	}
}
@media (max-width: 750px){
	.number_list.flow .inner_flex{
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		text-align: left;
	}
	.number_list.flow li .li_numbar,
	.number_list.flow li .li_txt{
		align-self: flex-start;
	}
		
}
@media (max-width: 450px){
	.number_list{
		padding: 1rem 0;
	}
}

.photo_flame {
	width: 100%;
	margin: auto;
}

.photo_flame .inner{
	width: 100%;
	padding: 10px;
}
.photo_flame .inner img{
	width: 100%;
	overflow: hidden;
	object-fit: cover;
}
.card003 .photo_flame{
	max-width: 350px;
}

.card002 .photo_flame_wrap{
	width: 50%;
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;
}

.photo_flame_wrap .photo_flame02 {
	width: 50%;
	margin: auto;
}
.photo_flame_wrap .photo_flame02:last-child{
	margin-top: 70px;
}

.photo_flame02 .inner{
	width: 100%;
	padding: 10px;

	
}
.photo_flame02 .inner img{
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	object-fit: cover;
}
@media (max-width: 960px){
	.card002 .photo_flame_wrap{
		width: 100%;
	}
}