/* ---------------------------------------------
 h2 h3 h4 ...
--------------------------------------------- */
h1.pagetitle,
h2.h2 { text-align: left; margin-bottom: 20px; position: relative; z-index: 200; margin-bottom:min(50px,10vw); }
/*
h1.pagetitle::before,
h2.h2::before { position: absolute; content: ""; width: 50px; height: 40px; background-image: url('/images/designA_lesson_h2_icon.svg'); background-position: center; background-size: contain; left: -55px; top: 10px; }
*/
h1.pagetitle span.en,
h2.h2 span.en { display: block; font-size: 3rem; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; border-bottom: 1px solid #aaa; }
h1.pagetitle span.jp,
h2.h2 span.jp { font-weight: 400; padding-top: 5px; font-size:1.3rem; display:block; }

h3.h3 { color: #B5987A; font-size: 2.6rem; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }

h4.h4 { color: #333; font-size: 1.6rem; margin: 0px 0 10px 0;}

@media only screen and (max-width:767px) {
  h1.pagetitle,
  h2.h2 { width: calc(100% - 70px); z-index: 70; }
}

/* ---------------------------------------------
 a
--------------------------------------------- */
a.link { margin:3px auto; padding: 0.5em 1em; display:inline-block; font-family:'Noto Sans JP', sans-serif; font-weight: 700; font-size: 1.5rem; background-color: #EEECDD; border-radius: 20px; display: block; width: 180px; text-align: center; }
a.link:after { font-family:"Font Awesome 5 Free"; content:'\f061'; font-weight:900; margin-left:5px; display:inline-block; transition:.2s; }
a.link:hover:after { transform:translateX(2px); }

/* ---------------------------------------------
 btn
--------------------------------------------- */

/* -----------------------------------
contents
-------------------------------------*/
body { background-color: #f9f9f5; background-image: url(/images/designA_bg.png); background-repeat: repeat-y; }
#container,
#main { padding:0; padding-top:min(200px,10vw); min-height: calc(100vh - 150px); }
body.home #container { padding-top:0; }
body.home #contents { overflow:hidden; }
@media only screen and (max-width:767px) {
  body { background-size: contain; }
}

/* ------------------------------------
header
------------------------------------ */
#header { background-color: rgb(0, 0, 0, 0.8);  margin: 0 auto; padding:10px 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; display:inline-block; 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 { background-color: initial; }
  #header .head_navi ul li.nav { padding:0.5em 5%; }
  #header .head_navi ul li.nav a { color:#000; padding-bottom:0; }
  #header .sitelogo_sp { display: none; }
  #header .head_navi ul li.sns ul { padding:0 0 5px; }
}

/* ------------------------------------
mainv_area
------------------------------------ */
.mainv_area { position: relative; padding: 0px 0; height: 68vw; }
.mainv_area img { width: 100%; position: absolute; }
.mainv_area .sitelogo { position: absolute; text-align: center; color: #fff; font-size: 4.0rem; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.mainv_area .sitelogo span { color: #fff; display: block; font-size: 0.6em; font-family: "Pinyon Script"; font-weight: 400; font-style: normal;}
/*
.mainv_area .sitelogo::before { 
  content: ""; display: inline-block; width: 54px; height: 63px; 
  background-image: url('/images/designA_sitelogo_illust.png'); background-position: center; background-size: contain; }
*/
.main_catch { position: relative; }
.main_catch .img_catch { position: absolute; top:-100px; left: 0; width:330px; max-width:22vw; }
.main_catch .img_catch img { max-width:100%; display:block; }
.main_catch .img_catch img.img1 { position: relative; z-index:2; box-shadow:0 0 5px rgba(0,0,0,.2); }
.main_catch .img_catch img.img2 { position:absolute; bottom:-11%; right:-13%; opacity:.4; transform:scale(.9); z-index:1; }

.main_catch { max-width: 900px; text-align: left; padding:0 0 50px 25vw; margin: 0 auto; }
.main_catch .body { padding-left: 20px; }
@media only screen and (max-width:767px) {
  .mainv_area .sitelogo { font-size: 2.8rem; position: static; text-align: center; color: #fff; padding-top: 22vw; top: 0; left: 0; transform: translate(0); -webkit-transform: translate(0); -ms-transform: translate(0);}
  .mainv_area .sitelogo::before { width: 42px; height: 50px; }
  .main_catch { width: 90vw; padding:60px 0 50px 0; margin: 0 5vw; }
  .main_catch img.img_catch { top:-80px; left:initial; right:20px; width: 40vw; }
  .main_catch .body { padding-left: 0px; }
}

/* ------------------------------------
news
------------------------------------ */
#section-news { background-color: inherit; }
#section-news .box_paper { max-width: 900px; margin: 0 auto; background-color: #fff; padding:3% 8% 3% 6%; box-shadow: 0 0 8px #dbdbdb; position: relative; z-index: 100; }
#section-news .box_paper img { position: absolute; right: -40px; top: -40px; z-index: 120; }
#section-news .box_paper .news_h { padding:10px 0 5px 0; margin:0 70px 0 0; color:#654A2E; border-bottom: 2px solid #aaa; font-weight: 800; }
#section-news dl { width: 100%; margin-left: 0px;  }
#section-news dl dt { width: 100px; margin-right: 0px;  padding-top: 1em; color: #888; padding-bottom: 1em; font-family: inherit; border-bottom: 1px dashed #ccc; }
#section-news dl dd { padding: 1em 0; border-bottom: 1px dashed #ccc; }
@media only screen and (max-width: 767px) {
    #section-news dl dt { padding-bottom:0; border-bottom:none; }
    #section-news dl dd { padding-top:0; }
}
/* ------------------------------------
Lesson
------------------------------------ */
#section-lesson { position: relative; max-width: 900px; padding-left: 55px; width: 100%; }
#section-lesson .contentsinner { margin:0 0 0 25px; width:calc(100% - 310px); }
#section-lesson img.designA_lesson_img { position: absolute; right:-30px; top:-10px; 
  max-width: 305px; width: 100%; z-index: 300; box-shadow:0 0 5px rgba(0,0,0,.3); }
/*
#section-lesson h2 { text-align: left; margin-bottom: 20px; position: relative; z-index: 200; }
#section-lesson h2.h2 span.en { display: block; font-size: 3rem; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; border-bottom: 1px solid #aaa; }
#section-lesson h2.h2 span.jp { font-weight: 400; padding-top: 5px; }
#section-lesson h3.h3 { color: #B5987A; font-size: 2.6rem; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
#section-lesson h4.h4 { color: #333; font-size: 1.6rem; margin: 0px 0 10px 0;}
*/
#section-lesson h2::before { position: absolute; content: ""; width: 50px; height: 40px; background-image: url('/images/designA_lesson_h2_icon.svg'); background-position: center; background-size: contain; left: -55px; top: 10px; }
@media only screen and (max-width:767px) {
  #section-lesson { width: 90vw; padding: 30px 0; margin: 0 auto;  }
  #section-lesson img.designA_lesson_img { position: static; }
  /*
  #section-lesson h2 { width: calc(100% - 70px); z-index: 70; }
  */
  #section-lesson .contentsinner { width:90%; }
}
/* ------------------------------------
free_area
------------------------------------ */
#section-free .contentsinner { display: flex; width: 100%; max-width: 1024px; margin: 0 auto; }
#section-free img.designA_freearea_img { max-width: 413px; margin-right: 17px; width: 100%; z-index: 300; height: fit-content;  }
#section-free .body { width:calc(100% - 490px); margin-left: 60px; margin-top: 50px; }
/*
#section-free h2 { text-align: left; margin-bottom: 20px; position: relative; z-index: 200; }
#section-free h2.h2 span.en { display: block; font-size: 3rem; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; border-bottom: 1px solid #aaa; }
#section-free h2.h2 span.jp { font-weight: 400; padding-top: 5px; }
#section-free h3.h3 { color: #B5987A; font-size: 2.6rem; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
#section-free h4.h4 { color: #333; font-size: 1.6rem; margin: 0px 0 10px 0;}
*/
#section-free h2::before { position: absolute; content: ""; width: 50px; height: 40px; background-image: url('/images/designA_freearea_h2_icon.svg'); background-position: center; background-size: contain; left: -55px; top: 10px; }
@media only screen and (max-width:767px) {
  #section-free .contentsinner { display: block; }
  #section-free .body { width:90vw; margin-left: 0px; margin: 20px auto; }
  /*
  #section-free h2 { width: calc(100% - 70px); z-index: 70; }
  */
}

/* ------------------------------------
profile_area
------------------------------------ */
#section-profile { padding:80px 0; background-color: #F0F0E8; }
#section-profile .prof_frm { border:none; background-color: #fff; padding:50px 80px; width: 100%; position: relative; }
#section-profile .prof_frm .img { position: absolute; width: 100%; max-width: 330px; top:20px; left: -50px; }
#section-profile .prof_frm .img img { max-width:100%; display:block; }
#section-profile .prof_frm .img img.img1 { position: relative; z-index:2; }
#section-profile .prof_frm .img img.img2 { position:absolute; bottom:-10%; right:-10%; opacity:.4; transform:scale(.9); z-index:1; }
#section-profile .prof_frm .prof { padding: 80px 0 0 270px; }
/*
#section-profile .prof_frm .prof h2 { text-align: left; margin-bottom: 20px; position: relative; z-index: 200; }
#section-profile .prof_frm .prof h2.h2 span.en { display: block; font-size: 3rem; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; border-bottom: 1px solid #aaa; }
#section-profile .prof_frm .prof h2.h2 span.jp { font-weight: 400; padding-top: 5px; }
*/
#section-profile .prof_frm .prof h2::before { position: absolute; content: ""; width: 50px; height: 40px; background-image: url('/images/designA_prof_h2_icon.svg'); background-position: center; background-size: contain; left: -55px; top: 10px; }
.body .prof_frm .prof .txt .name { font-family: initial; font-size: 2.6rem; }
@media only screen and (max-width:767px) {
  #section-profile { padding:30px 0; }
  #section-profile .prof_frm { padding:20px 30px; }
  #section-profile .prof_frm .img { position:relative; }
  #section-profile .prof_frm .prof { padding: 80px 0 0 0px; }
  /*
  #section-profile .prof_frm .prof h2 { width: calc(100% - 55px); z-index: 70; }
  */
}
/* ------------------------------------
access_area
------------------------------------ */
#section-access { padding:0 0 50px 0; }
#section-access p { text-align: center; margin-top: 10px; margin-bottom: 20px; }
@media only screen and (max-width:767px) {
  #section-access { padding:0 0 30px 0; }
}

/* ------------------------------------
contact_area
------------------------------------ */
#section-contact { background-image: url(/images/designA_contact_bg.jpg); background-size:cover; position:relative; }
#section-contact::before { content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background-color:rgba(0,0,0,.5); }
#section-contact .contentsinner { position: relative; }
#section-contact h2 { color: #fff; font-size: 2.0rem; margin:0 auto 30px auto; padding:20px; border:none; display: table; text-align: center; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
.fukidashi { color: #fff; font-family: initial; }
.fukidashi:before,
.fukidashi:after { background: #fff;/ }
#section-contact a.btn { margin:10px auto; width: 200px; display:block; color:#654A2E; text-align:center; text-decoration:none; transition: .2s; background-color:#EEECDD; position:relative; padding:15px 20px; border-radius: 30px; font-family: initial; }
#section-contact a.btn:hover { text-decoration:none; background-color:#e2e0d1; color:#654A2E; }
#section-contact a.btn::after { content:'\f35a'; display:inline-block; margin-left:0.5em; font-family:"Font Awesome 5 Free"; font-weight:900; transition:.2s; }
#section-contact a.btn:hover::after { transform:translateX(2px); }
#section-contact .tel_num { color: #fff; font-family: initial; font-size: 3.5rem; text-align: center; }

/* ------------------------------------
  footer
------------------------------------ */
footer { color: #fff; }
footer .foot { background-color:#978675; }
footer .foot .contentsinner ul.links li a { color: #fff; }