@charset "utf-8";

.mobile{
display: none!important;
}

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

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

body{
padding-top: 80px
}

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

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

li.menu{
width: 1200px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 80px
}

a.menu_logo{
width: 200px;
display: block;
}

div.menu_right{
display: flex;
align-items: center;
gap:50px
}

a.menu{
color: #205389;
font-family: "Noto Sans JP", sans-serif;
font-weight: 900;
}

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

nav.nav{
display: none
}

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

header.header{
aspect-ratio: 16 / 6;
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{
display: none;
}

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

img.header_mark{
width: 160px;
margin: 0px auto 40px auto
}

img.header_logo{
width: 580px;
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: 24px;
margin-bottom: 20px
}

p.header{
font-family: "Noto Serif JP", serif;
font-weight: 600;
margin-bottom: 5px
}

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

section#about{
padding-top: 80px;
aspect-ratio: 16 / 9;
color: #fff;
background: url(../img/about/back.webp) no-repeat center;
background-size: cover;
padding-inline: calc((100% - 1000px) / 2);
}

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

article.about{
margin-bottom: 120px
}

h2.about{
font-family: "Noto Serif JP", serif;
font-weight: 900;
font-size: 34px;
margin-bottom: 30px
}

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

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

section#contents{
padding: 80px 0px;
background: url(../img/contents/back.webp) no-repeat center;
background-size: cover;
padding-inline: calc((100% - 1000px) / 2);
}

.kon{
color: #1f5288
}

.orange{
color: #ed881f
}

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

div.contents{
width: max-content;
display: flex;
align-items: center;
gap: 30px;
margin: 50px 100px 0px auto
}

img.learning{
width: 300px
}

a.service{
width: 230px;
height: 54px;
line-height: 54px;
text-align: center;
font-weight: 600;
color: #fff;
border-radius: 30px;
background: #ed881f;
position: relative
}

a.service:after{
content: "";
width: 18px;
height: 18px;
background: url(../img/icon/triangle.png) no-repeat center;
background-size: 100%;
position: absolute;
top:50%;
transform: translateY(-50%);
right: 24px
}

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

section#message{
padding: 200px 0px 80px 0px;
background: url(../img/message/back.webp) no-repeat center bottom;
background-size: cover;
padding-inline: calc((100% - 1000px) / 2);
}

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

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

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

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

section#company{
padding: 80px 0px 80px 0px;
background: #fff;
padding-inline: calc((100% - 1000px) / 2);
}

ul.company{
width: 900px;
display: table;
table-layout: fixed
}

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

li.company_left{
width: 160px;
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: 60px 0px 60px 0px;
background: #fff4d5;
padding-inline: calc((100% - 700px) / 2);
}

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;
}

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: 25px;
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: 14px;
}