@charset "utf-8";
body{
line-height: 1.8rem;
text-align: justify;
font-family: 'Zen Maru Gothic', sans-serif;
margin: 0;
padding: 0;
}
.zen-maru-regular {
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 400;
font-style: normal;
}
.zen-maru-bold {
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 700;
font-style: normal;
}
section{
margin: 30px auto;
}
a{
cursor: pointer;
transition: 0.3s;
}
a:hover{
opacity: 60%;
}
h1{
font-size: 24px;
}
h1 span{
font-size: 36px;
}
h2{
font-size: 32px;
text-align: center;
font-weight: 700;
color: #fff;
}
h3{
font-size: 24px;
text-align: center;
font-weight: 600;
color: #fff;
line-height: 40px;
}
P{
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.6;
}
.background-image img{
width: 100%;
height: auto;
object-fit: cover;
}
.img-sp{
display: none;
}
.title{
width: 30%;
position: absolute;
top: 36px;
right: 10%;
}
.max-wrap{
padding: 40px 0;
}
.border1{
width: 320px;
border-bottom: solid 4px #00DBB3;
margin-bottom: 12px;
}
.conbox{
display: grid;
gap: 8px;
grid-template-columns: repeat(4, 1fr);
}
.conboxB{
margin: 0 12px;
}
.conboxA{
max-height: 440px;
}
.conboxA img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.event{
background-color: #00DBB3;
position: relative;
}
.illust{
  display: none; /* スマホやタブレットなど、1200px以下では画面から消す */
}
.img01{
  position: absolute;
  right: 5%;
}
.img02{
  position: absolute;
  top:1100px;
  left: 5%;
}
.img03{
  position: absolute;
  top:2200px;
  right: 5%;
}
.img04{
  position: absolute;
  top:-60px;
  left: 5%;
}
.img05{
  position: absolute;
  top:1600px;
  right: 5%;
}
.img06{
  position: absolute;
  top:3100px;
  left: 5%;
}
.midashiSet{
position: relative;
}
.midashi{
position: absolute;
top: -269px;
left: 0px;
z-index: 10;
}
.midashi img{
height: 360px;
}
.nami img{
width: 100%;
}
.border{
text-align: center;
}
.item-box{
display: grid;
grid-template-columns: repeat(4, 1fr);
place-items: center;
margin: 30px auto;
max-width: 1240px;
}
.item{
position: relative;
max-width: 300px;/*画像の幅*/
width: 95%;
background-color:#fff;
border-bottom: 100px solid #fff;
box-shadow: 3px 3px 3px #777;
padding: 12px;
border-radius: 8px;
margin: 4px;
}
.moji {
position: absolute;
width: 90%;
font-weight: 600;
font-size: 16px;
}
.moji span{
font-size: 14px;
}
.docchi{
background-color: #B5EFEA;
}
.midashi2Set{
position: relative;
}
.midashi2sp{
position: absolute;
top:-270px;
right: 0px;
display: none;
}
.midashi2pc{
position: absolute;
top:-270px;
right: 0px;
}
.con03{
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 30px auto;
max-width: 1240px;
}
.spotbox{
padding: 8px;
width: 50%;
}
.spotbox img{
width: 100%;
margin: 0 auto;
display: block;
z-index: 20;
}
.spotrink{
padding: 24px;
}
.spotrink p{
border-bottom: 2px dashed #fff;
padding: 4px;
}
.refresh-course{
margin: 0 8px auto;
border:4px solid #1cc5be;
border-radius:32px;
overflow:hidden;
background:#EBFDFC;
z-index: 30;
}
.course-header{
height:135px;
background:
linear-gradient(
rgba(0,0,0,.25),
rgba(0,0,0,.25)
),
url("../img/refresh.jpg");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
}
.course-inner{
padding:
32px 16px 16px;
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:24px;
}
.course-card img{
width:100%;
height:240px;
object-fit:cover;
display:block;
}
.course-card h4{
margin: 18px 0 24px;
font-size:20px;
font-weight:700;
line-height:1.2;
color:#000;
}
.course-card p{
font-size:16px;
line-height:1.6;
color:#222;
margin:0;
}
.btn {
display: flex;
justify-content: center;
width: 100%;
}

.rounded-btn {
display: block;
width: 90%;
max-width: 400px;
padding: 16px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: 600;
background-color: #1cc5be;
border-radius: 30px;
}
.contact{
text-align: center;
}
.footer{
text-align: center;
background-color: #01A385;
color: #fff;
padding: 40px;
}
.accese{
background-color: #FFF9B6;
}
.black{
color: #000;
margin-bottom: 32px;
}
.map{
margin: 0 auto;
width: 80%;
max-width: 1024px;
}
.map img{
width: 100%;
margin: 0 auto;
}
.btn span{
font-size: 20px;
}
.link{
text-align: center;
padding: 24px;
}
.logo{
padding: 24px;
width: 240px;
margin: 0 auto;
}
.copy{
margin-top: 40px;
font-size: 12px;
}

@media screen and (min-width: 1280px){
.illust {
    display: block; 
  }
}
@media screen and (max-width: 1024px){
.moji span{
font-size: 12px;
}
.conbox{
grid-template-columns: repeat(2, 1fr);
}
.conboxB{
padding: 8px;
}
}
@media screen and (max-width: 900px){
.item-box{
grid-template-columns: repeat(2, 1fr);
}
.midashi2pc{
position: absolute;
top:-240px;
right: 0px;
}
.midashi2pc img, .midashi img {
height: 300px;
}
.course-inner{
grid-template-columns:1fr;
gap:50px;
padding:40px;
}
.course-card img{
height:auto;
}
}
@media screen and (max-width: 600px){
.img-pc{
display: none;
}
.img-sp{
display: block;
}
.title{
width: 60%;
right: 3%;
}
.conbox{
grid-template-columns: 1fr;
}
.conboxA{
height: 360px;
}
.midashi2sp{
display: block;
top:-110px;
right: 0px;
z-index: 20;
}
.midashi2pc{
display: none;
}
.spotbox{
padding: 8px;
width: 90%;
}
.midashi2sp img, .midashi img{
height: 240px;
}
}
@media screen and (max-width: 480px){
.title img {
max-width: 320px;
}
.item-box{
grid-template-columns: 1fr;
}
.midashi{
top: -180px;
}
.midashi img{
height: 240px;
}
h3{
font-size: 18px;
line-height: 40px;
}
}