/* 1. まずベースとして「PC大画面・固定」を指定（1500px以上のときはこれが適用） */
html {
  font-size: 10px;
}

.sp{
display: none;
}

/* 2. 1499px以下になったら、PC・タブレット可変用に上書き */
@media (max-width: 1536px) {
  html {
    font-size: 0.651041667vw;
  }
}

/* 3. 599px以下になったら、スマホ用にさらに上書き */
@media (max-width: 600px) {
  html {
    font-size: 1.666667vw;
  }
  img.sp{
    display: inline-block;
  }
  .pc{
    display: none;
  }
}


body{
color: #334;
font-family: "Noto Sans JP";
font-weight: 500;
}

a{
font-weight: 700;
text-decoration: none;
}

img{
max-width: 100%;
image-rendering: -webkit-optimize-contrast;
image-rendering: auto;
}





#header{
z-index: 100;
}

#header .content{
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
max-width: 153.6rem;
margin: 0 auto;
padding:0 4rem 1.5rem 4rem;
}

#header .content > div{
padding-top: 3rem;
}

#header .content > div:first-child{
margin-right: auto;
padding-top: 2.5rem;
}

#header .content > div:first-child img{
width: 41.8rem;
}

#header .content > div:first-child p:last-child{
margin-top: 1rem;
line-height: 1;
font-size: 1.9rem;
font-weight: 500;
letter-spacing: 0.27em;
}

#header img{
vertical-align: top;
}

#header .tel{
margin-bottom: 3px;
line-height: 1;
font-size: 2.4rem;
}
#header .tel a{
display: inline-block;
line-height: 1;
font-size: 3.2rem;
}
#header .tel + p{
font-size: 1.4rem;
letter-spacing: 0.05em;
}

#header .nav{
display: flex;
align-items: center;
margin-left: 4.5rem;
}

#header .nav a{
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 7px;
width: 18.5rem;
height: 5rem;
margin-left: 2rem;
font-size: 1.7rem;
}

#header .nav a:first-child{
margin-left: 0;
}

#header .nav a img{
margin-right: 1rem;
}

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

#header .inquiry:link,
#header .inquiry:visited{
background-color:#72AF2C;
}

#header .entry:link,
#header .entry:visited{
background-color:#FABE00;
}

#header .login:link,
#header .login:visited{
background-color:#1256AC;
}


#global{
position:sticky;
z-index: 1;
top: 0;
background-color: #fff;
width: 100%;
height: 8rem;
transition: all 0.2s ease-in-out;
}

#global::before{
content: "";
position: absolute;
z-index: 0;
display: block;
background-color: #fff;
width: 100%;
height: 100%;
}

#global::after{
content: "";
display: block;
position: absolute;
z-index: -1;
bottom: 0;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 100%;
height: 1rem;
}

#global ul{
position: relative;
z-index: 1;
display: flex;
background-color: #fff;
max-width: 153.6rem;
height: 8rem;
margin: 0 auto;
padding:0 4rem;
font-size: 1.8rem;
list-style: none;
}

#global li{
position: relative;
width: calc(100% / 6);
height: 8rem;
}

#global li:not(:last-child)::after{
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
display: block;
background-color: #ddd;
width: 1px;
height: 3rem;
}

#global li a{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
transition: all 0.3s ease-in-out;
}

#global li a::after{
content: "";
display: inline-block;
transform: rotate(45deg);
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
width: 7px;
height: 7px;
margin-left: 1em;
transition: all 0.3s ease-in-out;
}

#global li a:link,
#global li a:visited{
color: #334;
}

#global li a:hover{
color: #1256AC;
}

#global li a:hover::after{
border-color: #1256AC;
}

#global > div{
display: none;
}


#menu-flg{
display: none;
}


#menu-btn{
position: fixed;
z-index: 100;
top: 2rem;
right: 2rem;
display: none;
background-color: #fff;
border: 1px solid #DFE7F2;
border-radius: 7px;
width: 6rem;
height: 6rem;
}

#menu-btn span{
position: absolute;
display: block;
transition: all 0.3s ease-in-out;
}

#menu-btn span:not(:last-child){
background-color:#0B56C0;
left: calc(1rem - 1px);
width: 4rem;
height: 2px;
}
#menu-btn span:nth-child(1){
top: 1.3rem;
}
#menu-btn span:nth-child(2){
top: 2.1rem;
}
#menu-btn span:nth-child(3){
top: 2.9rem;
}

#menu-btn span:last-child{
bottom: 0.4rem;
color: #0B56C0;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
}

#menu-flg:checked + #menu-btn span:nth-child(1){
top: 2.1rem;
transform: rotate(32deg);
}
#menu-flg:checked + #menu-btn span:nth-child(2){
left: 50%;
width: 0;
height: 0;
}
#menu-flg:checked + #menu-btn span:nth-child(3){
top: 2.1rem;
transform: rotate(-32deg);
}


@media (max-width: 600px) {

#global > div,
#menu-btn{
display: block;
}

#header{
position: sticky;
top: 0;
left: 0;
}

#header .content{
padding: 2rem;
}

#header .content > div:first-child{
padding-top: 0;
}

#header img{
width: 40rem;
}

#header .content > div:first-child p:last-child{
margin-top: 1rem;
font-size: 1.82rem;
}

#header .content > div:not(:first-child){
display: none;
}

#global{
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
height: 0;
opacity: 0;
}

#menu-flg:checked + #menu-btn + #global{
width: 100%;
height: 100vh;
opacity: 1;
}

#global::before{
display: none;
}

#global ul{
flex-direction: column;
width: 37rem;
height: auto;
padding: 0;
line-height: 1;
font-size: 2.8rem;
letter-spacing: 0.15em;
}

#global li{
position: relative;
width: 100%;
height: auto;
}

#global li a{
justify-content: flex-start;
border-bottom: 1px solid #ddd;
padding: 0.7em 0;
}

#global li:last-child a{
border-bottom: none;
}

#global li a::after{
position: absolute;
right: 0;
top: calc(50% - 0.3em);
width: 0.5em;
height: 0.5em;
}

#global li:not(:last-child)::after{
display: none;
}

#global .btns{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color:#F7F8FB;
border: 1px solid #DFE7F2;
border-radius: 7px;
width: 37rem;
padding: 2rem 0;
margin: 2rem 0 3rem 0;
}


#global .btns a{
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
width: 33rem;
height: 3em;
margin-top:1rem;
font-size: 2.3rem;
letter-spacing: 0.15em;
}

#global .btns a:first-child{
margin-top: 0;
}

#global .btns a img{
width: auto;
height: 50%;
margin-right: 1.5rem;
}

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

#global .inquiry:link,
#global .inquiry:visited{
background-color:#72AF2C;
}

#global .entry:link,
#global .entry:visited{
background-color:#FABE00;
}

#global .login:link,
#global .login:visited{
background-color:#1256AC;
}

#global .tel p:first-child{
margin-bottom: 0.3rem;
line-height: 1;
font-size: 3.5rem;
text-align: center;
}
#global .tel a{
display: inline-block;
line-height: 1;
font-size: 132%;
}
#global .tel p:last-child{
font-size: 2rem;
text-align: center;
letter-spacing: 0.05em;
}


}






/*
MAIN
*/

main > article > header{
background-image: url("../images/common/page-header-bg.webp");
background-size: 100% 100%;
}

main > article > header > div{
max-width: 132.4rem;
padding:9rem 4rem 7.4rem 4rem;
margin: auto auto 4rem auto;
}

main > article > header p:first-child{
color: #09306C;
line-height: 1;
font-size: 1.1rem;
font-weight: 700;
}

main > article > header h1{
color: #09306C;
margin: 1rem 0 1.6rem 0;
line-height: 1;
font-size: 3.6rem;
letter-spacing: 0.15em;
}

main > article > header p:last-child{
color: #09306C;
line-height: 1;
font-size: 1.3rem;
}

main > article > section{
max-width: 132.4rem;
padding:7rem 4rem;
margin: auto;
}

main > article > section:first-of-type{
padding-top: 0;
}

main > article > section:last-of-type:not(:nth-of-type(even)){
padding-bottom: 0;
}


main > article > section:nth-of-type(even){
background-color: #F5FBFF;
max-width: initial;
padding:7rem 4rem;
}

body:not(.elearning) main > article > section h2{
display: flex;
align-items: center;
justify-content: center;
color: #09306C;
line-height: 1;
font-size:2.7rem;
font-weight: 700;
text-align: center;
letter-spacing: 0.15em;
}

body:not(.elearning) main > article > section h2::before,
body:not(.elearning) main > article > section h2::after{
content: "";
display: inline-block;
background-color: #16B9F0;
width: 100px;
height: 2px;
margin-right: 36px;
}
main > article > section h2::after{
margin-right: 0;
margin-left: 36px;
}

body:not(.elearning) main > article > section h2 span{
display: inline-block;
color:#FABE00;
padding-bottom: 0.2em;
line-height: 1;
font-size: 1.40741em;
}

body:not(.elearning) main > article > section h2 br{
display: none;
}






main > article > section h2{
margin-bottom: 7rem;
}


@media (max-width: 600px) {


main > article > header > div{
padding:8rem 4rem 6rem 4rem;
margin: auto auto 4rem auto;
}

main > article > header p:first-child{
font-size: 1.3rem;
}

main > article > header h1{
margin: 1rem 0 1.6rem 0;
font-size: 4rem;
}

main > article > header p:last-child{
font-size: 2rem;
line-height: 1.8;
}



main > article > section{
padding:6rem 4rem;
margin: auto;
}


main > article > section:nth-of-type(even){
padding:6rem 4rem;
}




main > article > section h2{
font-size:2.7rem;
line-height: 1.6;
}

main > article > section h2::before,
main > article > section h2::after{
width: 5rem;
margin-right: 3rem;
}
main > article > section h2::after{
margin-right: 0;
margin-left: 3rem;
}
main > article > section h2 br{
  display: block;
}


}

/*
CTA
*/

#cta{
display: flex;
align-items: center;
justify-content: center;
background-color: #F5FBFF;
border: 1px solid #DFE7F2;
border-radius: 7px;
max-width:124.4rem;
margin:8rem auto;
padding: 3rem;
}

#cta p{
color: #0B56C0;
padding-right: 2rem;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.2em;
}

#cta a{
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 7px;
width: 25.5rem;
height: 5rem;
margin-left: 2rem;
font-size: 1.7rem;
}

#cta a:first-child{
margin-left: 0;
}

#cta a img{
margin-right: 1rem;
}

#cta a:link,
#cta a:visited{
color: #fff;
}

#cta .inquiry:link,
#cta .inquiry:visited{
background-color:#72AF2C;
}

#cta .entry:link,
#cta .entry:visited{
background-color:#FABE00;
}


@media (max-width: 600px) {

#cta{
flex-direction: column;
width: calc(100% - 8rem);
margin:6rem auto;
padding: 3rem;
}

#cta p{
color: #0B56C0;
padding-right: 0;
font-size: 2rem;
font-weight: 700;
text-align: center;
}

#cta a{
width: 80%;
height: 3em;
margin:2rem 0 0 0;
font-size: 2rem;
}

}


/*
FOOTER
*/
#footer{
background-color: #F7F8FB;
border-top: 1px solid #DFE7F2;
padding: 6rem 0 0 0;
}

#footer .content{
max-width: 159.6rem;
margin: 0 auto;
padding: 0 3rem;
}

#footer .logo{
margin-bottom: 3rem;
font-size: 2rem;
font-weight: 700;
}

#footer nav{
margin-bottom: 4rem;
}

#footer nav ul{
display: flex;
flex-wrap: wrap;
list-style: none;
font-size: 1.6rem;
}

#footer nav li{
position: relative;
margin-right: 3rem;
padding-right: 3rem;
}

#footer nav li::after{
content: "";
position: absolute;
top: 50%;
right: 0;
display: block;
background-color: #ccc;
width: 1px;
height: 1.4rem;
margin-top: -0.7rem;
}

#footer nav li:last-child{
margin-right: 0;
padding-right: 0;
}

#footer nav li:last-child::after{
display: none;
}


#footer nav a:link,
#footer nav a:visited{
color: #334;
}

#footer .info{
margin-bottom: 4rem;
}

#footer .tel{
margin-bottom: 0.5rem;
font-size: 2.4rem;
}

#footer .tel a:link,
#footer .tel a:visited{
color: #334;
}

#footer .info p:last-child{
font-size: 1.5rem;
}

#footer .copyright{
background-color: #fff;
border-top: 1px solid #DFE7F2;
padding: 2.5rem;
text-align: center;
font-size: 1.3rem;
letter-spacing: 0.05em;
}


@media (max-width: 600px) {

#footer{
padding: 6rem 0 0 0;
}

#footer .content{
padding: 0 4rem;
}

#footer .logo{
margin-bottom: 3rem;
font-size: 3rem;
}

#footer nav{
margin-bottom: 4rem;
}

#footer nav ul{
line-height: 2;
font-size: 1.9rem;
}

#footer nav li{
position: relative;
margin-right: 3rem;
padding-right: 3rem;
}

#footer nav li::after{
content: "";
position: absolute;
top: 50%;
right: 0;
display: block;
background-color: #ccc;
width: 1px;
height: 1.4rem;
margin-top: -0.7rem;
}

#footer nav li:nth-child(3)::after,
#footer nav li:nth-child(6)::after{
display: none;
}

#footer nav li:nth-child(3),
#footer nav li:nth-child(6){
margin-right: 0;
padding-right: 0;
}

#footer .tel{
margin-bottom: 0.5rem;
font-size: 3rem;
}

#footer .info p:last-child{
font-size: 1.8rem;
}

#footer .copyright{
padding: 2.5rem;
font-size: 1.8rem;
}


}