@charset "utf-8";

.pc{
display: none!important;
}

*{
font-size:14px;
letter-spacing: 0.05em;
}

:root {
--main-width: 1200px;
}

/*--------------------menu-------------------*/

menu.menu{
width: 100%;
height: 100%;
position: fixed;
top:0px;
left: 0px;
background: #fff;
z-index: 10;
display: none
}

li.menu{
width: 80%;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%)
}

a.menu_logo{
display: none
}

a.menu{
color: #205389;
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
display: block;
border-bottom: solid 1px #dcdcdc;
padding: 15px 0px;
font-size: 16px;
background: url(../img/icon/triangle_orange.png) no-repeat center right 0px;
background-size: 14px
}

.menuIn{
animation-fill-mode:both;
animation-duration:0.5s; 
animation-name: menuIn;
display: block!important;
}
 
@keyframes menuIn {
0% { opacity: 0;}
100% {opacity: 100;}
}


/*--------------------nav-------------------*/

nav.nav{
width: 60px;
height: 60px;
border-radius: 50%;
position: fixed;
background: #ed881f;
position: fixed;
top:15px;
right: 5%;
z-index: 11;
display: flex;
align-items: center;
justify-content: center
}

a.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
position: relative;
}

a.menu-trigger {
width: 24px;
height: 15px;
}

a.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 1.5px;
background: #fff;
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}
a.menu-trigger span:nth-of-type(2) {
top: 6.5px;
}
a.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(7px) rotate(-45deg);
transform: translateY(7px) rotate(-45deg);
}

a.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

a.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-7px) rotate(45deg);
transform: translateY(-7px) rotate(45deg);
}

/*--------------------header-------------------*/

header.header{
aspect-ratio: 2 / 3;
background: url(../img/header/header_image.webp) no-repeat center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
position: relative
}

header.header:after{
content:"";
width: 100%;
height: 50%;
position: absolute;
left: 0px;
bottom: 0%;
background: linear-gradient(0deg,rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
}

img.header_top{
width: 40%;
top:20px;
left: 5%;
position: absolute;

}

article.header{
position: relative;
z-index: 1;
text-align: center
}

img.header_mark{
width: 22%;
margin: 0px auto 20px auto
}

img.header_logo{
width: 70%;
margin: 0px auto 40px auto;
filter:drop-shadow(0 0 16px rgba(255,255,255,0.85)) drop-shadow(0 0 32px rgba(255,255,255,0.6)) drop-shadow(0 0 60px rgba(255,255,255,0.35));
}

h1.header{
font-family: "Noto Serif JP", serif;
font-weight: 900;
font-style: normal;
font-size: 18px;
line-height: 1.4;
margin-bottom: 20px
}

p.header{
font-family: "Noto Serif JP", serif;
font-weight: 600;
font-size: 13px;
line-height: 1.6
}

/*--------------------about--------------------*/

section#about{
padding: 60px 3%;
aspect-ratio: 16 / 9;
color: #fff;
background: url(../img/about/back.webp) no-repeat center;
background-size: cover;
}

h4.about{
font-family: "Noto Serif JP", serif;
font-weight: 600;
font-size: 24px;
margin-bottom: 50px
}

article.about{
margin-bottom: 120px
}

h2.about{
font-family: "Noto Serif JP", serif;
font-weight: 900;
font-size: 28px;
margin-bottom: 20px;
line-height: 1.4
}

p.about{
font-family: "Noto Sans JP", sans-serif;
margin-bottom: 10px;
font-weight: 500;
font-style: normal;
font-size:12px
}

/*--------------------about--------------------*/

section#contents{
padding: 60px 3%;
background: url(../img/contents/back.webp) no-repeat center;
background-size: cover;
}

.kon{
color: #1f5288
}

.orange{
color: #ed881f
}

p.contents{
font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
line-height: 1.8;
font-weight: 500;
font-style: normal;
font-size: 13px
}

div.contents{
width: 90%;
display: flex;
align-items: center;
gap: 20px;
margin:0px auto
}

img.learning{
width: 45%
}

a.service{
width:55%;
height: 48px;
line-height: 48px;
text-align: center;
font-weight: 600;
color: #fff;
border-radius: 24px;
background: #ed881f;
display: flex;
align-items: center;
justify-content: center;
gap: 10px
}

a.service:after{
content: "";
width: 16px;
height: 16px;
background: url(../img/icon/triangle.png) no-repeat center;
background-size: 100%;
}

/*--------------------about--------------------*/

section#message{
padding: 60px 3%;
background: url(../img/message/back.webp) no-repeat center bottom;
background-size: cover;
}

p.message{
font-family: "Noto Serif JP", serif;
font-weight: 600;
font-size: 14px;
line-height: 1.8
}

h3.message{
width: max-content;
margin: 20px 0px 0px auto;
font-family: "Noto Serif JP", serif;
font-weight: 600;
font-size: 20px;
margin-bottom: 10px
}

h3.message small{
font-size: 14px;
display: inline-block;
margin-right: 10px
}

/*--------------------about--------------------*/

section#company{
padding: 60px 3%;
background: #fff;
}

ul.company{
width: 100%;
display: table;
table-layout: fixed
}

ul.company li{
display: table-cell;
padding: 20px 0px 20px 15px;
font-size: 14px;
font-family: "Noto Serif JP", serif;
font-weight: 300
}

li.company_left{
width: 30%;
border-top: solid 2px #fa7722;
}

li.company_right{
border-top: solid 2px #fff4d5;
line-height: 1.8
}

ul.company:last-of-type li.company_left{
border-bottom: solid 2px #fa7722;
}

ul.company:last-of-type li.company_right{
border-bottom: solid 2px #fff4d5;
}

/*--------------------contact--------------------*/

section#contact{
padding: 30px 3%;
background: #fff4d5;
}

h4.contact{
font-size: 28px;
margin-bottom: 50px;
text-align: center
}

div.contact{
margin-bottom: 40px;
}

p.complete{
line-height: 1.8;
text-align: center
}

a.complete{
width: 200px;
height: 40px;
display: block;
background: #fa7722;
border-radius: 20px;
-webkit-appearance: none;
border:none;
font-weight: 600;
line-height: 40px;
text-align: center;
color:#fff;
font-size: 13px;
margin: 40px auto 0px auto;
}

div.contact{
margin-bottom: 40px
}

h5.contact{
color: #fa7722;
margin-bottom: 15px
}

div.privacy{
width: 100%;
height: 250px;
border-radius: 5px;
background: #fff;
overflow-y: scroll;
padding: 15px;
margin-bottom: 30px;
color: #000;
scrollbar-color: #fa7722 #f0f0f0; 
scrollbar-width: thin;
}

p.content_lead{
font-size: 14px;
margin-bottom: 20px
}

article.contents{
margin-bottom: 20px;
}

h3.privacy{
margin-bottom: 20px;
color:#fa7722;
font-weight: 400;
font-size: 13px
}

h4.privacy{
font-size: 12px;
color:#222;
font-weight: 400;
line-height: 1.8
}

div.checkbox{
display: flex;
align-items: center;
gap: 10px
}

p.required{
background: #fa7722;
color: #fff;
font-size:14px;
text-align: center;
width: 80px;
height: 20px;
border-radius: 10px
}



/*--------------------footer--------------------*/

footer.footer{
aspect-ratio: 200 / 23;
background: url(../img/footer/back.webp) no-repeat center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center
}

p.copy{
color: #fff;
font-size: 12px;
}