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


.scrollin {
    opacity : 0;
    transform : translate(0, -30px);
    }	
 
.scrollin.on {
    opacity : 1;
    transform : translate(0, 0);
    transition : transform 1200ms,opacity 1200ms;
    -webkit-transition : transform 1200ms,opacity 1200ms;
    }
h4::after{
	display: inline-block;
	text-align: center;
	margin-left: 15px;
	padding: 3px 8px;
	font-size: 12px;
	line-height: 1.2;
	border: 1px solid #000;
	border-radius: 4px;
	vertical-align: middle;
	white-space: nowrap;
	}
.fee h4::after{
	content:"WELLNESS";
	color:#8D5C16;
	border-color:#8D5C16;
	background-color: #f9f0e8;
	font-weight: bold;
	}
.free h4::after{
	content:"Activity";
	color:#006699;
	border-color:#006699;
	background-color: #e8f3f9;
	font-weight: bold;
	}
	

/* pc */
@media screen and (min-width: 801px),screen and (orientation: landscape), print {

	
#contents {
	margin-bottom: 200px;
	}
	
	
	#title{
		height:583px;
		background-image:url(../../../news/wp-content/uploads/2025/05/sowaka_photoshop_final_crop.jpg);
		background-position:center;
		background-size:cover;
		position:relative;
		}
		#title_wrap h2{
			margin-top:-105px;
			display:block;
			margin-left:auto;
			margin-right:auto;
			text-align:center;
			position:relative;
			z-index:1;
			font-weight:normal;
			}
			#title_wrap h2 > span{
				padding:25px 40px 40px;
				background:rgba(0,0,0,0.8);
				box-sizing:border-box;
				display:inline-block;
				font-size: 18px;
				line-height: 2em;
				letter-spacing: 0.1em;
				color:#fff;
				}
				#title_wrap h2 > span span{
					display:block;
					font-size: 12px;
					margin-bottom: 10px;
					}
					
	.intro{
		line-height: 3em;
		text-align: center;
		margin: 40px auto 0;
		font-size: 14px;
		}


	h3{
		line-height:1;
		font-size:16px;
		font-weight:normal;
		text-align:center;
		margin-bottom:100px;
		}
		h3 span.border::before{
			top:0;
			}
		h3 span.border::after{
			bottom:0;
			}
		h3 span.border::before,
		h3 span.border::after{
			content:"";
			position:absolute;
			width:1px;
			height:30px;
			-webkit-transform: scaleY(0);
			background-color:#CFCFCF;
			left:50%;
			}
		h3.on span.border::before,
		h3.on span.border::after{
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
			transition:2000ms;
			}
		h3 .border{
			position: relative;
			display: inline-block;
			padding: 55px 0;
			box-sizing: border-box;
			}
		.fee h3 .border{
			}
		.free h3 .border{
			}
		h3 .border span{
			opacity:0;
			}
		h3 .border span.on{
			opacity:1;
			transition:2000ms;
			-webkit-transition:2000ms;
			}
		h3 .border span{
			line-height: 1.5em;
			}
		

.fee h4::after,
.free h4::after{
	/*width: 130px;*/
	font-size:12px;
	white-space: nowrap;
	}
	
	
	.howto_wrap{
		margin-right:auto;
		margin-left:auto;
		width:1040px;
		margin-top:120px;
		}
	
	.howto_wrap + .howto_wrap{
		margin-top:170px;
		}
		
		.howto_wrap figure{
			position:relative;
			}
			.howto_wrap figure .page_link{
				position:absolute;
				top:-93px;
				}
		.howto_wrap figure + figure{
			margin-top:120px;
			}
		.howto_wrap figure > figcaption{
			width:570px;
			float:left;
			}
			.howto_wrap figure > figcaption h4{
				font-weight:normal;
				font-size:17px;
				}
			.howto_wrap figure > figcaption p{
				margin-top:27px;
				font-size:13px;
				line-height:1.8em;
				}
			.howto_wrap figure > figcaption table{
				margin-top:35px;
				width:100%;
				border-collapse:collapse;
				font-size:12px;
				line-height:1.8em;
				box-sizing:border-box;
				}
			.howto_wrap figure > figcaption table tr th{
				white-space:nowrap;
				text-align:left;
				vertical-align:top;
				padding:1.5em 16px 1.5em 5px;
				width:5em;
				}
			.howto_wrap figure > figcaption table tr td{
				padding:1.5em 16px 1.5em 0px;
				}
			.howto_wrap figure > figcaption table tr td a{
				word-break:break-all;
				}
			.howto_wrap figure > figcaption table tr td p{
				font-size:12px;
				line-height:1.8em;
				margin-top:0;
				margin-bottom:1em;
				}
			.howto_wrap figure > figcaption table tr th,
			.howto_wrap figure > figcaption table tr td{
				border-top:1px solid rgba(0,0,0,0.1);
				}
			.howto_wrap figure > figcaption table tr:last-child th,
			.howto_wrap figure > figcaption table tr:last-child td{
				padding-bottom:0;
				}
			.howto_wrap figure > figcaption img{
				margin-top:35px;
				width:50%;
				}
				
		.howto_wrap figure > .img{
			float:right;
			width:420px;
			height:auto;
			}
		.howto_wrap figure > .img img{
			width:100%;
			}
		.howto_wrap figure > .img img + img{
			margin-top:5px;
			}
			.howto_wrap figure > .img p{
				margin-top:5px;
				font-size:12px;
				text-align:right;
				}
		
		


	
	
	
}

/* sp =============================================================================================*/
@media only screen and (max-width: 800px) and (orientation: portrait) {

	
#contents {
	margin-bottom: 200px;
	}
	
	
	#title{
		height:400px;
		background-image:url(../../../news/wp-content/uploads/2025/05/sowaka_photoshop_final_crop.jpg);
		background-position: 51% center; /* ←位置を微調整 */
		background-size:cover;
		position:relative;
		}
		#title_wrap{
			position:relative;
			}
		#title_wrap h2{
			display:block;
			margin-left:auto;
			margin-right:auto;
			text-align:center;
			position:absolute;
			bottom:-50px;
			width:100%;
			z-index:1;
			}
			#title_wrap h2 > span{
				max-width:80%;
				padding:15px 5% 20px;
				background:rgba(0,0,0,0.8);
				box-sizing:border-box;
				display:inline-block;
				font-size: 16px;
				line-height: 2em;
				letter-spacing: 0.1em;
				color:#fff;
				}
				#title_wrap h2 > span span{
					display:block;
					font-size: 12px;
					margin-bottom: 10px;
					}
					
	.intro{
		line-height: 2em;
		margin: 100px auto;
		font-size: 14px;
		padding:0 30px;
		}
		
		
	h3{
		line-height:1;
		font-size:16px;
		font-weight:normal;
		text-align:center;
		margin-bottom:50px;
		line-height:1.6em;
		}
		h3 span.border::before{
			top:0;
			}
		h3 span.border::after{
			bottom:0;
			}
		h3 span.border::before,
		h3 span.border::after{
			content:"";
			position:absolute;
			width:1px;
			height:30px;
			-webkit-transform: scaleY(0);
			background-color:#CFCFCF;
			left:50%;
			}
		h3.on span.border::before,
		h3.on span.border::after{
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
			transition:2000ms;
			}
		h3 .border{
			position: relative;
			display: inline-block;
			padding: 55px 0;
			box-sizing: border-box;
			}
		h3 .border span{
			opacity:0;
			}
		h3 .border span.on{
			opacity:1;
			transition:2000ms;
			-webkit-transition:2000ms;
			}
			
.fee h4::after,
.free h4::after{
	/*width: 130px;*/
	font-size:12px;
	white-space: nowrap;
	}	
	
	.howto_wrap{
		padding-left:10px;
		padding-right:10px;
		}
	
	.howto_wrap + .howto_wrap{
		margin-top:100px;
		}
		
		.howto_wrap figure{
			position:relative;
			}
			.howto_wrap figure .page_link{
				position:absolute;
				top:-63px;
				}
		.howto_wrap figure + figure{
			margin-top:100px;
			}
		.howto_wrap figure > figcaption{
			}
			.howto_wrap figure > figcaption h4{
				font-weight:normal;
				font-size:17px;
				}
			.howto_wrap figure > figcaption p{
				margin-top:27px;
				font-size:13px;
				line-height:1.8em;
				}
			.howto_wrap figure > figcaption table{
				margin-top:35px;
				width:100%;
				box-sizing:border-box;
				border-collapse:collapse;
				font-size:12px;
				line-height:1.8em;
				}
			.howto_wrap figure > figcaption table tr th{
				text-align:left;
				vertical-align:top;
				padding:1.5em 16px 1.5em 0px;
				white-space:nowrap;
				width:5em;
				}
			.howto_wrap figure > figcaption table tr td{
				padding:1.5em 0px 1.5em 0px;
				}
			.howto_wrap figure > figcaption table tr td p{
				font-size:12px;
				line-height:1.8em;
				margin-top:0;
				margin-bottom:1em;
				}
			.howto_wrap figure > figcaption table tr td a{
				word-break:break-all;
				}
			.howto_wrap figure > figcaption table tr th,
			.howto_wrap figure > figcaption table tr td{
				border-top:1px solid rgba(0,0,0,0.1);
				}
			.howto_wrap figure > figcaption table tr:last-child th,
			.howto_wrap figure > figcaption table tr:last-child td{
				padding-bottom:0;
				}
			.howto_wrap figure > figcaption img{
				margin-top:35px;
				width:50%;
				}
				
		.howto_wrap figure > .img{
			margin-top:20px;
			width:100%;
			}
		.howto_wrap figure > .img img{
			width:100%;
			}
		.howto_wrap figure > .img img + img{
			margin-top:5px;
			}
			.howto_wrap figure > .img p{
				margin-top:5px;
				font-size:12px;
				text-align:right;
				}
		
		
		
}