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

.page_title{
background-image: url("images/pagetitle.jpg");
background-image: -webkit-image-set(url("images/pagetitle.jpg") 1x, url("images/pagetitle@2x.jpg") 2x);
}

/* 中身-モバイルファースト======================================================================================================== */
#top{
text-align: center;
position: relative;
}
#top::before{
content: "";
display: block;
background-image: url("../images/decoration02.svg");
background-repeat: no-repeat;
background-position: left top;
background-size: 100%;
aspect-ratio: 213 / 216;
width: 12%;
position: absolute;
top: 10vw;
right: 0;
}
#top::after{
content: "";
display: block;
background-image: url("../images/decoration03.svg");
background-repeat: no-repeat;
background-position: left top;
background-size: 100%;
aspect-ratio: 370 / 254;
width: 20%;
position: absolute;
bottom: -6vw;
left: 0;
}
#top em{
display: block;
font-size: 20px;
letter-spacing: .25em;
}
#top h2{
display: block;
letter-spacing: .25em;
}


.section .en{
color: #c0d382;
font-size: 20px;
}
.section .box{
margin-bottom: 20px;
}
.section .box:last-child{
margin-bottom: 0px;
}
.section strong{
color: #555;
font-weight: bold;
}
.section .flex .photo{
text-align: center;
}
.section .flex .photo .p img{
max-height: 65vw;
}


.section#days .program{
margin-bottom: 20px;
}
.section#days .facility{
background-color: #f9f6ed;
padding: 20px;
margin-bottom: 20px;
}
.section#days .flex .photo{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.section#days .flex .photo .p{
width: 49%;
margin-bottom: 2%;
}
.section#days .flex .photo .p:last-child{
margin-bottom: 0px;
}


/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#top::before{
width: 120px;
top: -40px;
}
#top::after{
width: 200px;
bottom: -40px;
}

#top em{
font-size: 40px;
letter-spacing: .5em;
}
#top h2{
font-size: 24px;
letter-spacing: .5em;
}

.section .flex{
display: flex;
}
.section .flex .text{
flex: 1;
margin-right: 40px;
}
.section .flex .photo .p img{
max-width: 220px;
}

.section#days .program{
}
.section#days .facility{
margin-bottom: 0px;
}

.section#days .flex .photo{
display: block;
}
.section#days .flex .photo{
width: 220px;
}
.section#days .flex .photo .p{
width: auto;
margin-bottom: 10px;
}
.section#days .flex .photo .p img{
max-width: 100%;
}


}