@font-face {
font-family: "mobo-sb";
src:url("fonts/mobo-semibold-subset-02.woff2") format("woff2");
}

@font-face {
font-family: "mobo-bold";
src:url("fonts/mobo-bold-subset-02.woff2") format("woff2");
}

html{
font-size:min(0.94339623vw, 10px);
}

body{
color: #4c4948;
font-family:"mobo-sb", sans-serif;
}


h1,h2,h3,h4,h5,strong, .bold{
font-family: "mobo-bold", sans-serif;
}

h2{
font-size: 4.4rem;
}

h2 span{
font-size:0.75em;
}

section:last-of-type h2{
line-height: 1;
font-size: 6.084rem;
}

section:last-of-type h2 span{
display: inline-block;
font-size: 4.232rem;
}

h3{
color: #fff;
border-radius: 2em;
max-width: 70rem;
margin: auto;
line-height: 1.7;
font-size: 1.852rem;
text-align: center;
letter-spacing: 0.2em;
}

p{
font-size:2.1rem;
}

section > p:last-of-type{
font-size: 1.8rem;
text-align: center;
}

dt{
font-size: 1.85rem;
}

dd{
font-size: 2.315rem;
}



.sp{
display: none;
}


@media screen and (max-width: 880px) {

html{
font-size:min(1.136364vw, 10px);
}

br.sp{
display: block;
}
}


@media screen and (max-width: 700px) {
html{
font-size:min(1.333333vw, 10px);
}
}

#header{
margin-bottom: 3.6rem;
}

#header .mv{
position: relative;
}

#header picture{
display: block;
}

#header picture img{
width: 100%;
}

#header h1{
position: absolute;
z-index: 1;
bottom:max(-16.226415vw, -172px);
left: 50%;
transform: translateX(-50%);
width: min(1000px, 94.339523vw);
}


#header h1 > img{
position: relative;
z-index: 1;
width: 100%;
}

#header span{
position: absolute;
bottom:max(-16.226415vw, -172px);
left: 50%;
transform: translateX(-50%);
display: block;
mix-blend-mode: multiply;
width: min(1000px, 94.339523vw);
}

#header span img{
width: 100%;
height: 100%;
}

#header .desc{
background: linear-gradient(to bottom, #84ccc9, #badfdc 35.586%);
padding: min(16.226415vw, 172px) 0 min(7.5472vw, 80px) 0;
text-align: center;
}

#header .desc p:first-child{
color: #004ea2;
margin:60px 0;
font-family: "mobo-bold", sans-serif;
font-size: 3.6rem;
text-align: center;
}

#header .desc p:last-child{
display: inline-block;
background-color: #fff;
color:#004ea2;
border-radius:20px;
padding: 1em;
font-family: "mobo-bold", sans-serif;
font-size: 4rem;
text-align: center;
}

@media screen and (max-width: 880px) {

#header .mv{
height: 101.25vw;
}

#header h1{
top: 44%;
bottom: auto;
left: 50%;
transform: translateX(-50%);
width: 93.75vw;
margin: 0;
}

#header span{
top: 44%;
bottom: auto;
left: 50%;
transform: translateX(-50%);
width: 93.75vw;
margin: 0;
}

#header .desc{
padding-top: 4.6rem;
}

#header .desc p:first-child{
margin: 0 0 4.6rem 0;
font-size: 3rem;
}

#header .desc p:last-child{
padding: 1em 1.5em;
}

}


/*
SECTION
*/

section{
padding: 0 0 min(7.5472vw, 80px) 0;
}

section header > div{
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
max-width: 70rem;
margin: 0 auto 5rem auto;
padding-bottom: 2rem;
text-align: center;
}


section:not(:last-of-type) h2{
background-color: #fff;
border-radius: 0 0 20px 20px;
box-shadow:0 0 10px rgba(0,0,0,0.4);
padding: 0.1em 0.7em 0.3em 0.7em;
line-height: 1;
}

section header p{
color: #fff;
font-family: "mobo-bold", sans-serif;
text-align: center;
}

section header .date{
font-size: 7.15rem;
}

section header .date span:nth-of-type(1),
section header .date span:nth-of-type(2){
font-size: 0.65em;
}

section header .date span:nth-of-type(3){
display: inline-block;
background-color: #fff;
border-radius: 50%;
width: 1.5em;
height: 1em;
padding: 0.2em 0 0.3em 0;
line-height: 1;
font-size:4.09rem;
text-align: center;
vertical-align: middle;
}

section header .time{
margin-bottom: 0.5em;
font-size: 3rem;
}

section header dl{
display: flex;
align-items: center;
color: #fff;
font-family: "mobo-bold", sans-serif;
}

section header dt{
background-color: #fff;
border-radius: 4px;
padding: 0.2em 0.4em 0.3em 0.4em;
margin-right: 1em;
}

section .name{
margin: 0.6em 0 0.1em 0;
line-height: 1;
font-family: "mobo-bold", sans-serif;
font-size: 3.44rem;
letter-spacing: 0.2em;
text-align: center;
}

section .name:has(span){
margin-top: 0.4em;
}


section .name small{
font-size: 0.8em;
letter-spacing: 0;
}

section .name span{
display: inline-block;
margin-bottom: 0.5em;
font-family: "mobo-sb", sans-serif;
font-size: 2.126rem;
letter-spacing: 0;
}

section .name + h3{
margin-top: 2em;
}

section > p:not(.name):not(.introduction):not(:last-of-type){
max-width: 64.6rem;
margin: 0.7em auto 2em auto;
}

section > .introduction{
max-width: 66rem;
margin: 0.7em auto 1.5em auto;
font-family: "mobo-bold", sans-serif;
font-size: 2.976rem;
text-align: center;
}



section:first-of-type{
background-color: #dff2fc;
}

section:first-of-type header,
section:first-of-type h3{
background-color:#00b4ed;
}

section:first-of-type h2,
section:first-of-type header .date span:nth-of-type(3),
section:first-of-type header dt{
color: #00b4ed;
}



section:nth-of-type(2){
background-color: #feecd2;
}

section:nth-of-type(2) header,
section:nth-of-type(2) h3{
background-color:#f39800;
}

section:nth-of-type(2) h2,
section:nth-of-type(2) header .date span:nth-of-type(3),
section:nth-of-type(2) header dt{
color:#f39800;
}

section:last-of-type{
background-color: #e2ecaf;
margin-top: 3.6rem;
padding: 2rem 0 3.6rem 0;
}


section:last-of-type h2{
color: #00a33e;
text-align: center;
}

section:last-of-type h2 span{
position: relative;
margin-bottom: 0.4em;
}

section:last-of-type h2 span::before,
section:last-of-type h2 span::after{
content: "";
position: absolute;
top: -0.1em;
display: block;
background-color:#00a33e;
width: 3px;
height: 1.3em;
}

section:last-of-type h2 span::before{
left: -1.2em;
transform: rotate(-25deg);
}

section:last-of-type h2 span::after{
right: -1.2em;
transform: rotate(25deg);
}

section:last-of-type div{
display: flex;
align-items: center;
justify-content: center;
padding-top: 3.6rem;
}

section:last-of-type div p{
background-color: #fff;
border-radius: 2rem;
color: #231815;
padding: 0 0.6em 0 0.7em;
line-height: 1.8;
font-family: "mobo-bold", sans-serif;
font-size: 1.99rem;
letter-spacing: 0.1em;
}

section:last-of-type div p:last-child{
padding: 0 0.8em 0 0.9em;
margin-left: 1em;
}

/*
ENTRY BUTTON
*/

.entry{
position: fixed;
bottom: 2.4rem;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: flex-end;
width: 100rem;
}

.entry a{
display: flex;
align-items: center;
background-color: #e9546b;
border:2px solid #fff;
border-radius: 10rem;
padding: 0.4em 0.8em 0.4em 0.4em;
line-height: 1;
font-family: "mobo-bold", sans-serif;
font-size: 3.4rem;
text-decoration: none;
transition: opacity 0.3s ease-in-out;
}

.entry a:link,
.entry a:visited{
color: #fff;
}

.entry a:hover{
opacity: 0.7;
}

.entry span{
display: inline-block;
background-color: #fff;
border-radius: 10rem;
color: #e9546b;
padding: 0.4em 0.4em 0.5em 0.4em;
margin-right: 0.7em;
line-height: 1;
font-size: 0.8em;
}

@media screen and (max-width: 880px) {

.entry{
bottom: 3rem;
left: 0;
transform: translateX(0);
width: 100%;
}

.entry a{
margin:auto;
}

}

/*
SNS
*/
.sns{
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
}

.sns div{
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 1rem 0 0 1rem;
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

.sns a{
display: block;
padding: 2.3rem;
transition: opacity 0.3s ease-in-out;
}

.sns a:hover{
opacity: 0.7;
}

.sns a:first-child{
border-bottom: 1px solid #c7c7c7;
}

@media screen and (max-width: 880px) {
.sns{
top: auto;
bottom: 25%;
transform: translateY(0%);
}

.sns a{
padding: 1.5rem;
}

.sns img{
width: 5rem;
}


}


/*
FOOTER
*/

footer{
background-color: #0068b7;
color: #fff;
}

footer div{
max-width: 100rem;
margin: auto;
padding: 3rem 0 15.5rem 0;
}

footer dl{
display: flex;
align-items: center;
border-bottom: 1px solid #fff;
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
}

footer dt{
background-color: #fff;
color: #0068b7;
padding: 0 0.3em 0 0.5em;
margin-right: 1em;
font-size: 1.4rem;
letter-spacing: 0.2em;
}

footer dd{
font-size: 1.852rem;
letter-spacing: 0.075em;
}

footer dd:first-of-type{
margin-right: 2em;
}


footer p{
margin-bottom: 0.3em;
font-size: 1.688rem;
letter-spacing: 0.025em;
}

footer address{
padding-left: 1em;
font-size: 1.969rem;
letter-spacing: 0.025em;
}

footer address span{
font-size: 0.75em;
}


@media screen and (max-width: 880px) {
footer div{
padding:4rem 5rem 15.5rem 5rem;
}
}

@media screen and (max-width: 700px) {
footer div{
padding:4rem 3rem 15.5rem 3rem;
}
}