/* CSS Document */

/*松林さん作　共通？CSSここから*/
.page-nav{
	max-width: 1300px;width: 96%;margin: 0 auto 7.5%;
}
.section-title{
	font-size: var(--fs50);
	text-align: center;
	font-weight: bold;
	padding: 0;
	margin: 1% 0;;
}
.page-nav-nav{
	padding-top: 0.5%;
}
.page-nav-list{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
	width: 89%;
	margin: auto;
}
.page-nav-list li{
	text-align: center;
}
.page-nav-list img{
	display: block;
}
.page-nav-list .link-box{
	width: 72%;
	margin: 7% auto;
}
.page-nav-list.page-nav-list-onsen{
		flex-wrap: wrap;
	width: 72%;
}
.page-nav-list.page-nav-list-onsen li{
	width: 28%;
	margin: 0 2%;
}
.page-nav-list.page-nav-list-onsen li a{width: 100%;}
@media(max-width:767px){
	.page-nav-list.page-nav-list-onsen{
		width: 92%;
	}
	.page-nav-nav .page-nav-list.page-nav-list-onsen li{
		width: 46%;
		margin: 2%;
		font-size: 16px;
	}
	.page-nav-nav .page-nav-list.page-nav-list-onsen li a{
		font-size: 15px;
	}
}
/*松林さん作　共通？CSSここまで*/

/*メインコンテンツ幅*/
#triple,#annai,#daiyokuzyou,#rotenburo,#kazokuburo,#oyu
{
	max-width: 1300px;
	width:90%;
	position: relative;
	margin: 10% auto;
	overflow: visible;
}
/*20px*/
.fs20,.triple-chi h4,.triple-chi p,#daiyokuzyou p,#rotenburo p,#kazokuburo p,#oyu p,#oyu li,#oyu dt,#oyu dd,#oyu dd span{
	font-size:var(--fs20);
}
#oyu dd,#oyu dd span{
	color: var(--koi-navy);
	font-family: var(--ryo-gothic-plusn);
}
/*22px*/
.fs22{
	font-size:var(--fs22);
}
/*24px*/
.fs24,.triple-h2-region p,.kazoku-chi dd,#kazokuburo h3{
	font-size:var(--fs24);
}
/*28px*/
.fs28,.triple-h2-region h2,.triple-chi h3{
	font-size:var(--fs28);
}
/*30px*/
#annai h2,#daiyokuzyou h2,#rotenburo h2,#kazokuburo h2,#oyu h2,#oyu h3{
	font-size:var(--fs30);
}

/*white*/
.annai-chi h3,.kazoku-chi dd,.kazokuburo h3{color:var(--white);}

#triple{
	display:flex;
	justify-content: space-between;
}

.triple-h2-region{
	/*aspect-ratio:347/306;
	width:347px;*/
	background-size:auto;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
	height: 320px;
    margin-right: -150px;
    margin-left: 150px;
}
.triple-h2-region h2{
	margin: 0;
    background-color: var(--white);
    text-align: center;
    width: 95%;
    white-space: nowrap;
}
.triple-h2-region p{
	margin-bottom: -40px;
}
.triple-flex{
	display:flex;
	width: 808px;
	justify-content: center;
}
.triple-chi{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}
.triple-chi h4{
	order:1;
}
.triple-chi h3{
	order:2;
}
.triple-chi p{
	order:3;
}
.triple-chi h4,.triple-chi h3{
	text-align:center;
	width:300px;
}
.triple-chi h4,.triple-chi h3,.triple-chi p{
	margin: 0 auto;
	line-height: 1.5em;
}
.triple-chi p{
    width: 255px;
    text-align: justify;
}
.triple1,.triple2,.triple3{
	background-size:auto;
	background-repeat: no-repeat;
	background-position: center;
    flex-direction: column;
    gap: 15px;
    justify-content: flex-start;
    padding-top: 30px;
}
.triple1{
	margin: 0 auto;
	width: 357px;
    height: 353px;
}
.triple2{
	margin-right: auto;
	width: 339px;
    height: 341px;
}
.triple3{
	margin-left: auto;
	width:364px;
    height: 361px;
}
.triple-pc{
	display:block;
	position:absolute;
    bottom: 5%;
    left: -2.5%;
}
.triple-sp{
	display:none;
	position:absolute;
}
.triple-h2-region,.triple-flex-wrap{
	z-index:1;
}

#annai{
}
#annai h2{
	margin: auto auto 50px;
	width:fit-content;
	text-align: center;
    padding-right: 130px;
    padding-left: 130px;
}
.annai-flex{
	display:flex;
	justify-content: space-between;
	align-items: flex-start;
	width:100%;
}
.annai-chi{
	width: 32%;
}
.annai-chi h3{
	background-color:var(--navy);
	text-align: center;
	border-radius: 20px;
	width: 80%;
	padding:10px;
	white-space: nowrap;
	margin: auto auto -12%;
	z-index: 2;
	position:relative;
}
.annai-chi p{
	background-color: var(--white);
	border-radius: 20px;
	text-align: center;
	aspect-ratio: 397 / 515;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	position: relative;
	flex-direction: column;
}
.annai-chi p span{
	width:100%;
	margin-bottom: 10px;
}
.annai-chi3 p .pt30{padding-top:30px;}

#daiyokuzyou,#rotenburo{
	display:flex;
	align-items: center;
}
#daiyokuzyou h2,#rotenburo h2{
	padding-left: 15px;
}
#daiyokuzyou p,#rotenburo p{
    padding-left: 20px;
    padding-right: 20px;
}
#rotenburo{
	flex-direction: row-reverse;
}
.daiyokuzyou-img,.rotenburo-img{
	width:55%;
	position: relative;
}
.daiyokuzyou-txt,.rotenburo-txt{
	width:45%;
	padding:65px;
}
.daiyokuzyou-back,.rotenburo-back{
	position:absolute;
	z-index: 0;
	bottom:0;
}
.daiyokuzyou-front,.rotenburo-front{
	position:relative;
	z-index: 1;
}
.daiyokuzyou-back{
	left:-15%;
}
.rotenburo-back{
	right: -15%;
}

#kazokuburo{
	
}
#kazokuburo h2{
	width:fit-content;
    margin: auto auto 20px;
    padding-right: 150px;
    padding-left: 150px;
}
#kazokuburo p{
	width:50%;
	margin:10px auto;
}
.kazoku-flex{
	display:flex;
	justify-content: space-between;
	align-items: flex-start;
	width:60%;
	margin: 40px auto auto;
}
.kazoku-chi{width:48%;}
.kazoku-chi dd{
	background-color:var(--navy);
	padding:10px;
	width:80%;
	margin: 20px auto auto;
	color:var(--white);
	border-radius:30px;
	text-align: center;
}
#kazokuburo h3{
	background-color: var(--navy);
	text-align: center;
	border-radius: 10px;
	width: 25%;
	padding: 10px;
	white-space: nowrap;
	margin: 150px auto -2.23%;
	z-index: 2;
	position: relative;
	color:var(--white);
}
.kazoku-ryoukin-region{
	width:1105px;
	height: auto;
	margin: auto;
	background-color: var(--white);
	border-radius: 20px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	flex-direction: column;
	aspect-ratio:1105/300;
	padding-top:40px;
}
.ryoukin-flex{
	display:flex;
	width:70%;
	justify-content: space-between;
	align-items: center;
}
.ryoukin-flex h4,.ryoukin-flex p{
	margin: 0;
	text-align: left;
}
.ryoukin-flex h4{width:30%;}
.ryoukin-flex p{
	width:40%!important;
	margin: 0 auto;
}
.oyu1,.oyu2,.oyu3{
	background-size:auto;
	background-repeat: no-repeat;
	background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px;
}
.oyu1{
	width:775px;
	height: auto;
	aspect-ratio:775/365;
	margin-left: 20px;
}
.oyu2{
	width:775px;
	height: auto;
	aspect-ratio:775/396;
	margin:-130px 0 auto auto;
}
.oyu3{
	width:578px;
	height: auto;
	aspect-ratio:578/580;
	margin-top: -250px;
}

.oyu3 ol {
  list-style: none;
  counter-reset: num;
}

.oyu3 ol li {
  counter-increment: num;
}

.oyu3 ol li::marker {
  content: "(" counter(num) ")  ";
}

.oyu1 h2,.oyu2 h3,.oyu3 h3{
	margin:0;
}
.oyu1 p,.oyu2 p,.oyu3 p{
	margin-bottom:0;
}
.oyu-img{
	margin: -300px 220px auto auto;
    display: block;
}

.kouka{margin-top:200px;}

.kouka h3{
	background-color: var(--navy);
	text-align: center;
	border-radius: 10px;
	width: 25%;
	padding: 10px;
	white-space: nowrap;
	margin: auto auto -2.6%;
	z-index: 2;
	position: relative;
	color:var(--white);
}
.kouka dd{margin-left:0;}
.kouka dl{
	width:1105px;
	height: auto;
	margin: auto;
	background-color: var(--white);
	border-radius: 20px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	flex-direction: column;
	aspect-ratio:1105/340;
}
.kouka dt{
	font-weight:bold;
	margin-top:20px;
	color:var(--navy);
}
@media(max-width:1550px){
	#triple,#daiyokuzyou,#rotenburo{
		width:100%;
		/*overflow-x:hidden;*/
	}
	#daiyokuzyou{
		padding-left: 8%;
	}
	#rotenburo{
		
		padding-right: 8%;
	}
}
@media(max-width:1350px){
	#triple {
		display: block;
	}
	.triple-h2-region{
		width:fit-content;
		margin: auto;
		max-width:440px;
		width:90%;
		aspect-ratio: 441 / 305;
		position: relative;
	}
	.triple-h2-region h2{
		max-width:390px;
		width:90%;
	}
	.triple-h2-region p{
		text-align: center;
	}
	
	.triple-pc{
		display:none;
	}
	.triple-sp{
		display:block;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0%);
		width:60%;
	}
	.triple-flex-wrap{
		position: relative;
		margin-top: 150px;
	}
	.triple-flex{
		margin:auto;
		max-width:808px;
		width:90%;
	}
	
	.oyu1,.oyu2,.oyu3{
		margin:0 auto;
	}
	.oyu-img {
		margin: 50px auto auto;
	}
}
@media(max-width:1300px){
	.kazoku-ryoukin-region {
		width: 90%;
	}
	.ryoukin-flex {
		width: 90%;
		flex-wrap: wrap;
		justify-content: center;
	}
	.ryoukin-flex h4{
		width:100%;
		text-align: center;
	}
	.ryoukin-flex p{
		width: 30% !important;
    	margin: 10px 0!important;
		text-align: center;
	}
	
	.kazoku-ryoukin-region ,.kouka dl{
		max-width: 1105px;
		aspect-ratio: unset;
		padding: 40px 0;
		width: 90%;
	}
	#kazokuburo p {
		width: 90%;
	}
}
@media(max-width:1200px){
	.annai-flex{
		width: 90%;
		margin: auto;
		max-width: 800px;
		flex-wrap: wrap;
	}
	.annai-chi {
		margin-bottom: 50px;
		width: 397px;
		display: block;
		max-width: 397px;
		width: 48%;
	}
}
@media(max-width:1100px){
	.daiyokuzyou-txt, .rotenburo-txt {
		padding: 30px;
	}
	#kazokuburo h3 {
    	width: fit-content;
		padding-right: 40px;
		padding-left: 40px;
	}
}
@media(max-width:900px){
	#triple, #daiyokuzyou, #rotenburo {
         overflow-x: hidden; 
    }
	.triple-flex-wrap{
		position:relative;
		margin-top: 100px;
		padding-top:50px;
	}
	.triple-flex {
    	display: block;
		width:100%;
	}
	.triple1 {
		margin: auto 15% auto auto;
	}
	.triple2 {
		margin: auto auto auto 15%;
	}
	.triple3 {
		margin: auto 15% auto auto;
	}
	.triple-sp {
        width: 100%;
		left: 60%;
    }
	.annai-flex {
		display: block;
	}
	.annai-chi {
        max-width: 397px;
        width: 100%;
        margin: auto auto 50px;
    }
	.kouka dl{width:85%;padding:5%;}
	#oyu{
		width:100%;
		overflow: hidden;
	}
	.oyu1, .oyu2, .oyu3 {
		padding:10%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
		position:relative;
	}
	.oyu1, .oyu2{
		width:110%;
		right: 5%;
	}
	.oyu2{margin-top:40px;}
	.oyu3{width:95%;}
	.kouka dd span{display:inline-block;}
}
@media(max-width:768px){ 
	.page-hero-title {
		font-size: 18px!important;
	}
	.page-hero-text {
		font-size: 16px!important;
	}
	#kazokuburo h3 {
		padding-right: 20px;
		padding-left: 20px;
	}
	.annai-chi3 p .pt30 {
		padding-top: 10px;
	}
	.fs24, .triple-h2-region p, .kazoku-chi dd, #kazokuburo h3 {
		font-size: var(--fs18);
	}
	#annai h2, #daiyokuzyou h2, #rotenburo h2, #kazokuburo h2, #oyu h2, #oyu h3 {
		font-size: var(--fs28);
	}
	.triple-chi p{
		font-size: var(--fs18);
		line-height: 1.8em;
	}
	.fs20,.fs22, .triple-chi h4,  #daiyokuzyou p, #rotenburo p, #kazokuburo p, #oyu p, #oyu li, #oyu dt, #oyu dd, #oyu dd span {
		font-size: var(--fs16);
	}
	.ryoukin-flex {
		justify-content: space-evenly;
		white-space: nowrap;
	}
	.fs28, .triple-h2-region h2, .triple-chi h3 {
		font-size: var(--fs24);
	}
	.triple-h2-region p{font-size:var(--fs18);}
	.triple-h2-region h2 {
        margin: 0 auto;
    }
	.triple-h2-region {
        aspect-ratio: 1 / 1;
		margin: auto auto 5%;
    }
	.triple-flex-wrap{
		margin-top:0;
		padding-top:0;
	}
	        
	.triple-sp {
        width: 75%;
        left: 56%;
    }
	.triple1 {
		margin: auto 10% auto auto;
	}
	.triple2 {
		margin: auto auto auto 10%;
	}
	.triple3 {
		margin: auto 10% auto auto;
	}
	#daiyokuzyou, #rotenburo {
		display: block;
	}
	.daiyokuzyou-img, .rotenburo-img,.daiyokuzyou-txt, .rotenburo-txt {
		width: 100%;
	}
	.daiyokuzyou-txt{
		padding-left: 0;
		padding-right: 10%;
	}
	.rotenburo-txt{
		padding-right: 0;
		padding-left: 10%;
	}
	.kazoku-flex {
		display: block;
	}
	.kazoku-chi {
		width: 100%;
	}
	.kazoku-chi dt{
		text-align: center;
	}   
	#kazokuburo p {
        width: 70%;
    }
	.kouka h3 {
		width: fit-content;
		padding-right: 40px;
		padding-left: 40px;
    }
	.ryoukin-flex3 p{width:90%;}
}
@media(max-width:500px){
	.oyu1, .oyu2 {
        width: 200%;
        right: 50%;
		padding: 20% 60%;
    }
	.oyu3{
		width:100%;
		padding: 10% 10% 15% 10%;
	}
}
@media(max-width:600px){
	#kazokuburo p {
        width: 80%;
    }
	.oyu3 ol li {
		line-height: 1.4em;
	}
	.triple1,.triple2,.triple3 {
		margin: auto auto 5%;
	}
	.triple-sp {
        width: 100%;
        left: 50%;
    }
	#annai h2 ,#kazokuburo h2 {
		width: 90%;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}
	.annai-chi p {
		aspect-ratio: unset;
		padding:10% 5% 5% 5%;
	}
	.kouka dl {
        padding: 3%;
    }
	.kouka dd span,.kouka dd {
        font-size:var(--fs16);
    }
	.daiyokuzyou-back,.rotenburo-back {
		width: 60%;
	}
}
@media(max-width:500px){
	.triple-sp{display:none;}
}