*{
margin:0;
padding:0;
letter-spacing: 0;
font-feature-settings:"palt";
}

ul,ol,li {
list-style:none;
}

body {
/*background: #f5f2e9;*/
color: #1f1a17;
font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", sans-serif;
}
.pc{
display:none;
}
.sp{
display:block;
}



.wrap{
background: #f5f2e9;
/*max-width:500px;*/
margin:0 auto;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
}
article img{
max-width:100%;
}


.hero{
margin-bottom:10%;
}
.mv_bg{
background:url(../img/mv_reef.png),url(../img/logo.png),url(../img/mv_bg.png);
background-repeat:no-repeat,no-repeat,no-repeat;
background-size:contain,62.5% auto,contain;
background-position:top center,top center,top center;
width: 100%;
height: 100%;
aspect-ratio: 400 / 673;
position:relative;
}

.mv_bg::after{
content:"";
display:block;
width:100%;
background:;
background-size:contain;
z-index:10;
}
.hero-copy{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
}
.coming{
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%,38%);
width:100%;
}

.intro{
margin-bottom:10%;
text-align:center;
line-height:3em;
}

.entry{
margin-bottom:10%;
}

.landplan{
margin-bottom:10%;
}
.landplan h2{
margin:0 auto 2%;
}
.landplan h2 + .section_kicker{
text-align:center;
font-size: clamp(1rem, 2.5vw, 20px);
margin:0 auto 5%;
width:82.5%;
letter-spacing:0.1em;
color:#40210f;
}

.landplan h3{
margin:5% 0;
}

.landplan .body-copy{
margin:0 auto 5%;
width:82.5%;
text-align:justify;
font-size: clamp(0.8rem, 3.5vw, 19px);
line-height:3em;
letter-spacing:0.1em;
margin-bottom:10%;
}


.features{
width:84%;
margin:0 auto 15%;
}
.features li{
margin-bottom:5%;
}
.features li::last-child{
margin-bottom:0;
}

.custom{
background:#eb6b4a;
padding:10% 0;
margin-bottom:10%;
position:relative;
}
.custom::before{
}
.my_home{
font-size: clamp(1rem, 2.2vw, 20px);
text-align:center;
color:#fff;
line-height:1.5em;
position:relative;
z-index:10;
}
.landplan .freeplan{
margin-top:-12%;
margin-bottom:5%;
}
.feature-item{
margin-bottom:5%;
}


.location{
margin-bottom:10%;
}
.location h2{
margin:0 auto 2%;
}
.location h2 + .section_kicker{
text-align:center;
font-size: clamp(1rem, 2.5vw, 20px);
margin:0 auto 5%;
width:82.5%;
letter-spacing:0.1em;
color:#40210f;
}
.g_map{
margin-bottom:5%;
}
.g_map iframe{
width:100%;
height:400px;
}
.map{
max-width:84%;
margin:0 auto 5%;
}
.guide{
}

.wisteria{
background:url(../img/wisteria_bg.png);
background-size:cover;
padding:10% 0;
margin-bottom:10%;
}
.wisteria_img{
margin-bottom:5%;
}
.wisteria_txt{
max-width:81%;
margin:0 auto;
line-height:2.5em;
color:#fff;
font-size: clamp(1rem, 2.4vw, 20px);
}

.facilities{
max-width:85%;
margin:0 auto 10%;
}
.facilities li{
margin-bottom:8%;
}
.facilities li::last-child{
margin-bottom:0;
}

.life_info{
max-width:85%;
margin:0 auto 10%;
}
.life_info li{
margin-bottom:8%;
}
.life_info li::last-child{
margin-bottom:0;
}
.life_info .note{
font-size: clamp(0.8rem, 1.0vw, 12px);
}

.access{
margin-bottom:10%;
}
.access h2{
margin:0 auto 2%;
}
.access h2 + .section_kicker{
text-align:center;
font-size: clamp(1rem, 2.5vw, 20px);
margin:0 auto 5%;
width:82.5%;
letter-spacing:0.1em;
color:#40210f;
}
.station{
max-width:78%;
margin:0 auto;
}
.station p{
margin-bottom:8%;
}
.route_map{
max-width:78%;
margin:0 auto 8%;
}
.time{
background:#fff;
padding:8% 0;
text-align:center;
margin:0 auto 3%;
}
.time img{
max-width:85%;
margin:0 auto;
}
.access .note{
max-width:85%;
margin:0 auto;
font-size: clamp(0.8rem, 1.0vw, 12px);
}

.outline h2{
margin:0 auto 5%;
}
.outline table {
width: 100%;
border-collapse: collapse;
font-size: clamp(0.8rem, 2.0vw, 16px);
line-height: 1.7;
}

.outline th,
.outline td {
padding: 3%;
border-top: 2px dotted #b69a86;
vertical-align: top;
}

.outline th {
width: 33%;
background: #fff;
font-weight:normal;
letter-spacing:0.1em;
}

.outline_note {
max-width:85%;
margin:5% auto;
font-size: clamp(0.8rem, 1.0vw, 12px);
line-height: 1.8;
}


.contact {
  padding: 11.6% 8% 11.2%;
  color: #fff;
  text-align: center;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px),
    #ef6548;
}

.contact p {
  display: flex;
  align-items: center;
  gap: 3%;
  justify-content: center;
  margin: 0 0 4%;
  font: var(--f-lg)/1.4 "Hiragino Sans", sans-serif;
}

.tel {
  display: block;
  color: #fff;
  text-decoration: none;
  font: clamp(2.6rem, 11.6vw, 3.625rem)/1 Georgia, serif;
}

.buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.3%;
  margin-top: 7.1%;
}
.buttons a:hover{
opacity:0.6;
}


.footer {
  padding: 12.8% 6.4% 11.2%;
  text-align: center;
  background: var(--cream);
  font: var(--f-lg)/1.6 "Hiragino Sans", sans-serif;
}

.family-logo {
  margin-bottom: 3.6%;
  color: #b20b67;
  font: 700 clamp(2.2rem, 9.6vw, 3rem)/1 Arial, sans-serif;
mix-blend-mode: multiply;
}

.footer p { margin: 0 0 3.6%; }
.footer small { font-size: var(--f-md);
}




/*pc*/
@media screen and (min-width: 768px) {
.pc{
display:block;
}
.sp{
display:none;

}
body{
background:url(../img/pc_bg.png);
background-repeat:no-repeat;
background-size:cover;
background-position:top center;
background-attachment: fixed;

position:relative;
}
/*body::before{
content:"";
background:url(../img/68family.png) no-repeat;
background-size:20% auto;
display:block;
width:100px;
height:100px;
position: absolute;
top:5%;
right:10%;
}

body::after{
content:"";
background:url(../img/pc_logo.png) no-repeat;
background-size:20% auto;
display:block;
width:100px;
height:100px;
position: absolute;
top:50%;
left:10%;
}*/
.pc_logo{
display: block;
max-width:410px;
width:21%;
position: fixed;
top: 50%;
left: 4%;
transform:translateY(-60%);

}

.pc_68{
display: block;
max-width:410px;
width:19%;
position: fixed;
top: 50%;
right: 4%;
transform:translateY(-60%);
}


.wrap{
max-width:500px;
}

.pc_contact {
width:100%;
position:fixed;
bottom:0;
left:0;
padding:20px 0;
color: #fff;
text-align: center;
background:repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 10px, transparent 10px 20px),
    #ef6548;
z-index:100;
}
.buttons{
max-width:500px;
margin:0 auto;
}

.footer{
padding: 12.8% 6.4% 30%;
}
}

@media screen and (min-width: 768px) and (max-width: 1020px){
.pc_logo{
display: block;
width:14%;
position: fixed;
top: 50%;
left: 2%;
transform:translateY(-60%);
}

.pc_68{
display: block;
width:13%;
position: fixed;
top: 50%;
right: 2%;
transform:translateY(-60%);
}
}