#container,
#main {
  min-height: calc(100vh - 150px);
}

/* ---------------------------------------------
 h2 h3 h4 ..
--------------------------------------------- */
.h_area { position: relative; max-width: 900px; width: 100%; margin: 0 auto; }
h1.pagetitle,
.h_area h2 { 
  display: inline-block; margin-top:50px; position: relative; z-index: 300; padding:0 0 10px;
  text-align: left; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 300; font-style: normal;  
}
h1.pagetitle span.en,
.h_area h2 span.en { 
    display: block; font-size:min(6rem,9vw); padding:0.05em 0 0.05em 0.5em; }
h1.pagetitle  span.jp,
.h_area h2 span.jp { 
    font-weight: 400; padding-top: 5px; font-size: 1.6rem; font-weight: 600; padding: 0 0 0 2.2em; }
h1.pagetitle ::before,
.h_area h2::before { 
    display: inline-block; background-color: #aaa; content: ""; 
    height: 1px;  width:300px;  transform: rotate(145deg);
    position: absolute; top:min(20px,1vw); left: -100px; }
h3 { font-weight: 400;}
h4 { margin: 0px 0 10px 0; }

/* ---------------------------------------------
 a
--------------------------------------------- */
a.link { 
  margin: 20px auto 30px 0; padding: 0.5em 1em; display: inline-block; 
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 1.5rem; text-align: center; 
  background-color: #fff16a; display: block; width: 180px; border: 1px solid #fff; }

/* ---------------------------------------------
 btn
--------------------------------------------- */
a.btn { 
  margin:10px auto; width: 200px; display:block; 
  color:#fff; text-align:center; text-decoration:none; 
  transition: .2s; background-color:#392613; position:relative; padding:15px 20px; }

/* -----------------------------------
contents
-------------------------------------*/
#container,
#main { padding:0; padding-top:min(200px,10vw); }
body.home #container { padding-top:0; }
body.home #contents { overflow:hidden; }

/* ------------------------------------
header
------------------------------------ */
#header { background-color: rgb(0, 0, 0, 0.8);  margin: 0 auto; padding:5px 0 0 0; position: absolute; z-index: 100;}
#header .head_navi ul li.sitelogo { padding:0 0 30px; }
body.home #header .head_navi ul li.sitelogo { visibility: hidden; }
#header .head_navi ul li.sitelogo a { color:#fff; font-size:1.2em; }
#header .head_navi ul li.sitelogo a span { color:#fff; }
#header .head_navi ul li.nav { padding: 2.5em 0 .5em 0; }
#header .head_navi ul li.nav a { color: #fff; padding-bottom:1em; }
#header .head_navi ul li.nav a::after { background:#fff; }
@media screen and (min-width:961px) {
  #header .head_navi ul li.sns ul li img { filter:invert(1); } /*アイコンを白くする*/
}
@media screen and (max-width:960px) {
  #header .sitelogo_sp { display: block; margin: 0px 0 5px 5%; /* display: none; */ }
  #header .sitelogo_sp a { color: #fff; }
  #header .sitelogo_sp a span { color: #fff; }
  #header .head_navi ul li.nav { padding:0.5em 5%; }
  #header .head_navi ul li.nav a { color:#000; padding-bottom:0; }
  #header .head_navi ul li.sns ul { padding:0 0 5px; }
}

/* ------------------------------------
mainv_area
------------------------------------ */
.mainv_area { padding:160px 1% 20px 50%; }
.mainv_area .mainv_area_img { 
  background-color: #fff16a; width:100%; padding:80px 53% 0 0; text-align:right;
  position:absolute; top:0; left:0; z-index:-1; 
}
.mainv_area .mainv_area_img img { 
    max-width:min(380px,80vw); transform:translateY(40px); display:inline-block; }
.mainv_area .sitelogo { position: relative;
  text-align: left; color: #000; font-size: 4.0rem; font-family: "Noto Serif JP", serif; 
  font-optical-sizing: auto; font-weight: 300; font-style: normal; 
}
.mainv_area .sitelogo span { color: #000; display: block; font-size: 0.6em; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 200; font-style: normal;}
.mainv_area .txt { position: relative; margin-top:min(60px,2vw); margin-bottom:min(70px,12vw);
  font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal;}
.mainv_area .txt .h { font-weight: 400; font-size:min(2.5rem,2vw); padding-bottom: 10px; }
.mainv_area .txt .h::first-letter { font-size: 2.0em; }
.mainv_area .txt p { line-height:1.8; font-size:1.6rem; }

@media only screen and (max-width:767px) {
  .mainv_area { padding:0; }
  .mainv_area .mainv_area_img { position: relative; padding:10vw 0 0; margin-bottom:9vw; text-align:center; }
  .mainv_area .sitelogo { font-size: 3.0rem; margin-left:4vw; margin-right:4vw; }
  .mainv_area .txt { margin-left:4vw; margin-right:4vw; }
  .mainv_area .txt .h { font-size: 1.8rem; }
}
@media (min-width: 421px) and (max-width: 620px) {
}
@media only screen and (max-width:420px) {
  .mainv_area .sitelogo { font-size: 2.6rem; }
}

/* ------------------------------------
news
------------------------------------ */
#section-news { background-color: inherit; }
#section-news .box_paper { max-width: 900px; margin: 0 auto; background-color: #F9F9F5; padding:3em 5em 2em 5em; position: relative; z-index: 100; }
#section-news .news_h { color: #aaa; position: absolute; top:-40px; font-size:5.0rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 300; font-style: normal; }
#section-news .news_h::before {display: none; }
#section-news dl { width: 100%; margin-left: 0px;  }
#section-news dl dt { background-color: #fff; margin-right: 0px; padding:5px 0 5px 10px; margin-bottom: 10px; }
#section-news dl dd { background-color: #fff; margin-bottom: 10px; padding:5px 10px 5px 10px; }
@media only screen and (max-width:767px) {
  #section-news .box_paper { padding:2.5em 1em 1em; }
  #section-news dl dt { margin-bottom: 0; }
}

/* ------------------------------------
Lesson
------------------------------------ */
#section-lesson .contentsinner { width: 90vw; margin: 0 auto; max-width:835px; }
/*
#section-lesson .h_area { position: relative; max-width: 900px; width: 100%; margin: 0 auto; }
#section-lesson .h_area h2 { 
  display: inline-block; margin-top:50px; position: relative; z-index: 300; background:#fff; padding:0 0 10px;
  text-align: left; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 300; font-style: normal;  
}
#section-lesson .h_area h2 span.en { 
    display: block; font-size: 6rem; background-color: #fff; padding: 0.05em 0.5em; }
#section-lesson .h_area h2 span.jp { 
    font-weight: 400; padding-top: 5px; font-size: 1.6rem; font-weight: 600; padding: 0 0 0 2.2em; }
#section-lesson .h_area h2::before { 
    display: inline-block; background-color: #aaa; content: ""; 
    height: 1px; width:300px; transform: rotate(145deg); 
    position: absolute; top: 20px; left: -100px; }
#section-lesson h3 { font-weight: 400;}
#section-lesson h4 { margin: 0px 0 10px 0; }
*/
#section-lesson .h_area h2 span.en,
#section-lesson .h_area h2 span.jp { background-color:#fff; }
#section-lesson .h_area img.designC_lesson_img { 
  margin:-150px 0 50px 280px;
  width:min(700px,90vw); z-index: 200; }

@media only screen and (max-width:767px) {
  /*
  #section-lesson .h_area { max-height: inherit; }
  #section-lesson .h_area h2 span.en { font-size: 5rem; }
  */
  #section-lesson .h_area img.designC_lesson_img { 
    margin:5px 0 20px 5vw; 
  }
}
/* ------------------------------------
free_area
------------------------------------ */
/*
#section-free .h_area { position: relative; max-width: 900px; width: 100%; height: 33vw; max-height: 470px; margin: 0 auto; }
#section-free .h_area h2 { text-align: left; position: relative; z-index: 300; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 300; font-style: normal;  display: inline-block; top:50px; }
#section-free .h_area h2 span.en { display: block; font-size: 6rem; background-color: #fff; padding: 0.05em 0.5em; }
#section-free .h_area h2 span.jp { font-weight: 400; padding-top: 5px; font-size: 1.6rem; font-weight: 600; padding: 0 0 0 2.2em; }
#section-free .h_area h2::before { display: inline-block; background-color: #aaa; content: ""; height: 1px;  width:300px; transform: rotate(145deg); position: absolute; top: 20px; left: -100px; }
*/
#section-free .h_area img.designC_free_img { position: absolute; right: 100px; top: 0; max-width: 600px; max-height: 400px; width: auto; height: 30vw; z-index: 200; }
/*
@media (min-width: 768px) and (max-width: 1300px) {
    #section-free .h_area { height: 37vw; }
}
*/
@media only screen and (max-width:767px) {
  /*
  #section-free .h_area { height: 38vw; max-height: inherit; }
  #section-free .h_area h2 span.en { font-size: 5rem; }
  */
  #section-free .h_area img.designC_free_img { right: 5vw; }
}

/* ------------------------------------
profile_area
------------------------------------ */
#section-profile { padding:0; background-color: #F9F9F5; position: relative;}
#section-profile .prof_frm { 
  position: static; border: none; padding-left: 30px; padding-left:max(40%,100px); }
#section-profile .img { width:40%; position:absolute; top:-30px; left:0; }
#section-profile .img img { max-width:100%; }

#section-profile .h_area img.designC_free_img { position: absolute; right: 100px; top: 0; max-width: 600px; max-height: 400px; width: auto; height: 30vw; z-index: 200; }
#section-profile .h_area h2 .en,
#section-profile .h_area h2 .jp { padding-left:30px; }
#section-profile .prof_frm .prof .txt { padding-left: 30px; }
#section-profile .prof_frm .prof .txt .name { 
  font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 2.6rem; margin:10px 0 15px 0;}

@media only screen and (max-width:600px) {
  #section-profile .prof_frm { padding-left:10vw; }
  #section-profile .img { position:relative; width:80%; top:20px; left:30px; }
  #section-profile .img img { transform:scale(.9) translateY(-6%); }
}

/* ------------------------------------
access_area
------------------------------------ */
#section-access { padding:50px 0 0px 0; }
#section-access p { text-align: center; margin: 0; padding: 20px 0; }

/* ------------------------------------
contact_area
------------------------------------ */
#section-contact { background-color: #fff16a; margin: 0; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
#section-contact h2 { font-size: 2.0rem; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;  margin:0 auto 40px auto; padding:20px 0px; display: table; text-align: center; border: none; }
#section-contact a.btn:hover { color:#000; }
@media only screen and (max-width:767px) {
  #section-contact h2 { margin: 0 auto 20px auto; }
}