@charset "utf-8";

/* -------------------------------------------------------------------
 * 修成について
------------------------------------------------------------------- */

.about-home   { margin-bottom:20px;}
.about-home a { margin:0 auto;}
.about-home-sub { margin-bottom:60px; padding:50px 0 10px; background-color:#e4e4e4;}
.about-home-sub h4 { margin-bottom:0.5em; font-size:1.8rem; font-weight:700;}
.about-home-sub p  { font-size:1.4rem; line-height:1.8;}
.about-home-sub a.image-on-arrow { margin-bottom:10px;}
.about-home-sub ul li { margin-bottom:40px; width:100%;}

@media screen and (min-width:768px) {

  .about-home   { margin-bottom:0px;}
  .about-home h3 {
    font-size:3.2rem;
  }
  .about-home-sub { margin-bottom:80px; padding:80px 0 40px;}
  .about-home-sub ul li { width:22.5%;}
  .about-home-sub h4 { font-size:2.0rem;}
  .about-home-sub p  { font-size:1.6rem;}

}



/* -------------------------------------------------------------------
 * 教育ポリシー
------------------------------------------------------------------- */

.about-aisatsu  { margin-bottom:40px;}
.about-aisatsu figure figcaption { padding:1em 0;  font-size:1.6rem;}
.about-policy   { margin-bottom:40px;}

.about-policies { background-color: #f4f4f4;}
.about-policies .container {
  margin-bottom:60px; padding:40px 0%;
  background-color: #f4f4f4;
}
.about-policies .inner  { margin:0 auto; max-width:997px;}
.about-policies .inner:first-child {
  position:relative;
  margin:0 auto 20px; padding-bottom:80px;
}
.about-policies .inner:first-child:after {
  position:absolute; bottom:0; left:0; content:'';
  width:100%; height:60px;
  background: url(../img/about/greeting_policy/arrow.png) no-repeat center top / 60px auto;
}
.about-policies p:first-of-type {
  margin-bottom: 32px;
  padding:1rem 1em;
  font-size: 2.2rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; text-align: center; color: #fff;
  background-color: #000;
  border-radius: 10px;
}
.about-policies p:nth-of-type(2) {
  margin-bottom: 24px;
  text-align: center; font-size: 2.4rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em;
}
.about-policies p:last-of-type {
  margin-bottom: 30px;
}
.about-policies img {
  max-width: 788px;
  margin: 0 auto;
}


@media screen and (min-width:768px) {

  .about-aisatsu  { margin-bottom:40px;}
  .about-aisatsu figure figcaption { padding:1em 0;  font-size:1.6rem;}
  .about-aisatsu .aisatsu { display:flex; flex-flow:row-reverse wrap; justify-content:space-between; align-items:flex-start;}
  .about-aisatsu .aisatsu figure  { width:25%;}
  .about-aisatsu .aisatsu .body  { width:70%;}
  .about-policies .container { margin-bottom:100px; padding:80px 0%;}
  .about-policy p.lead  { font-size:3.2rem;}
  .about-policies .inner:first-child { margin:0 auto 40px; padding-bottom:100px; }

  .about-policies p:first-of-type {
    margin-bottom: 32px;
    padding:1.8rem 1em;
    font-size: 2.8rem;
    background-color: #000;
  }
  .about-policies p:nth-of-type(2) {
    font-size: 3.2rem;
  }


}



/* -------------------------------------------------------------------
 * 施設紹介
------------------------------------------------------------------- */

.facilities-photo {}
.facilities-photo h4  { margin:0 0 0.25em; font-size:2.0rem; font-weight:700;}
.facilities-photo h4 span { 
  display:inline-block; vertical-align:baseline; 
  margin:0 0.5em 0 0; padding:0.2em 0.5em; 
  font-size:1.6rem; line-height:1;
  color:#fff; background-color:#000; 
}
.facilities-photo .block-2 ul li { margin-bottom:10px;}

.facilities-gaiyou  { margin:0 auto 5rem;}
.facilities-gaiyou ul { margin:0; list-style:none;}
.facilities-gaiyou ul li  { position:relative; margin:0 0 0.8em; padding:0 0 0 1em; font-size:1.6rem;}
.facilities-gaiyou ul li:before { 
  position:absolute; top:0.7em; left:0.4em; content:''; 
  width:3px; height:3px; border-radius:100%; background-color:#000;
}

.facilities-drama { background-color:#F4F4F4;}
.facilities-drama .container  { padding:4rem 0;}
.facilities-drama h3  { margin:0 0 1em; font-size:2.0rem;}
.facilities-drama p { margin-bottom:2em; line-height:2.2;}

.facilities-banner .container  { padding:4rem 0;}
.facilities-banner .block-2 ul li { margin-bottom:10px;}

@media screen and (min-width:768px) {
  
  .facilities-photo {margin:0 auto 2rem;}
  .facilities-photo .block-2 ul li { margin-bottom:20px;}
  .facilities-gaiyou  { margin:0 auto 8rem;}
  .facilities-gaiyou-list {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
    margin:0 auto 4rem;
  }
  .facilities-gaiyou-list ul  { widows:24%;}
  .facilities-drama h3  { margin:0 0 1em; font-size:3.2rem;}
  .facilities-drama .container  { padding:8rem 0;}
  .facilities-drama-content {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .facilities-drama-content > div { width:65%;}
  .facilities-drama-content > figure  { width:30%;}
  .facilities-banner .container  { padding:6rem 0 10rem;}

}



/* -------------------------------------------------------------------
 * 学園ビジョン
------------------------------------------------------------------- */

.vision-hajimeni  { margin:0 auto 6rem;}
.vision-hajimeni p  { line-height:2.5;}
.vision-hajimeni figure { margin:3.0em auto; max-width:994px;}

.vision-mirai  { margin:0 auto 6rem;}
.vision-mirai p { margin-bottom:1.8em;}
.vision-mirai img { border-radius:10px;}
.vision-mirai-zou { margin:0 auto 4rem; padding: 0 0 4rem; border-bottom:1px solid #cccccc;}
.vision-mirai-zou h3  { font-size:2.0rem;}
.vision-mirai-zou p { margin-bottom:2em;}
.vision-mirai-zou img { width:100%; max-width:480px; height:100px; object-fit:cover;}


@media screen and (min-width:768px) {

  .vision-hajimeni  { margin:0 auto 8rem;}
  .vision-hajimeni .lead  { margin:1em 0;}
  .vision-hajimeni figure { margin:4.0em auto;}
  .vision-mirai-zou { 
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
    margin:0 auto 6rem;
  }
  .vision-mirai-zou > div { width:55%;}
  .vision-mirai-zou > figure { width:40%;}
  .vision-mirai-zou h3  { font-size:2.4rem;}
  .vision-mirai-zou img { width:100%; height:auto; object-fit:inherit;}
  .vision-mirai  { margin:0 auto 10rem;}

}



/* -------------------------------------------------------------------
 * VRツアー
------------------------------------------------------------------- */

.vr_tour-tour a { margin:0 auto;}
.vr_tour-yousu  { margin-bottom:6rem;}
.vr_tour-yousu p  { margin-bottom:1.8em;}
.vr_tour-yousu .block-3 ul li { margin-bottom:0;}
.vr_tour-yousu figure figcaption { padding:0.5em 0; font-size:1.6rem;}

@media screen and (min-width:768px) {

  .vr_tour-yousu .block-3 ul li { margin-bottom:20px;}

}



/* -------------------------------------------------------------------
 * 免震構造校舎
------------------------------------------------------------------- */

.isolation  { margin:0 auto 4rem;}
.isolation p  { margin-bottom:2em;}
.isolation-pit > div  { margin-bottom:10px;}
.isolation-outline  {}
.isolation-outline-idea > div { margin-bottom:3rem;}
.isolation-outline-idea > div:first-child figure { margin:0 auto; max-width:273px;}
.isolation-outline-idea p { margin-bottom:2em;}
.isolation-outline-idea .block-3 ul li  { margin-bottom:0;}
.isolation-banner .container  { padding:4rem 0;}

@media screen and (min-width:768px) {

  .isolation-pit  {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .isolation-pit > div:nth-child(1)  { width:65%;}
  .isolation-pit > div:nth-child(2)  { width:31%;}
  .isolation-outline-idea  {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .isolation-outline-idea > div:nth-child(1)  { width:25%;}
  .isolation-outline-idea > div:nth-child(2)  { width:72%;}
  .isolation-outline-idea .block-3 ul li  { margin:0;}
  .isolation-banner .container  { padding:6rem 0 6rem;}
  .isolation-banner .block-2 ul { justify-content:center;}
}


/* -------------------------------------------------------------------
 * 教員紹介
------------------------------------------------------------------- */

.teacher-wrap { margin-bottom:8rem;}
.teachers { margin-bottom:6rem;}
.teachers li  { margin:0 4% 40px 0; padding:10px; width:48%; background-color:#F4F4F4;}
.teachers li:nth-child(2n)  { margin-right:0;}
.teachers p  { margin-bottom:1rem; font-size:1.4rem; line-height:1.8;}
.teachers p.name  { margin-bottom:0.5rem; font-size:1.6rem;}
.teachers p.tantou{ padding-top:1rem; line-height:1.5; border-top:1px solid #707070;}
.teachers figure  { position:relative; margin-bottom:1rem;}
.teachers figcaption  { 
  display:inline-block; position:absolute; bottom:0; left:0; 
  padding:0.5rem 1rem;
  font-size:1.4rem; line-height:1; color:#fff; 
  background-color:#000;
}
.teacher-sonota { margin-bottom:6rem; padding:2rem 5%; background-color:#f4f4f4;}
.teacher-sonota h3  { font-size:2.0rem;}
.teacher-sonota p  { font-size:1.4rem;}

@media screen and (min-width:768px) {

  .teachers li  { margin:0 2% 40px 0; width:23.4%;}
  .teachers li:nth-child(2n)  { margin-right:2%;}
  .teachers li:nth-child(4n)  { margin-right:0%;}
  .teachers p  { padding:0 1rem;}

}




/* -------------------------------------------------------------------
 * 沿革
------------------------------------------------------------------- */

.history-lead { margin:0 auto 4rem; background-color:#f4f4f4;}
.history-lead .container  { padding:3rem 0;}
.history-lead .lead { margin:1em 0; line-height:1.8;}
.history-lead p { line-height:2.25;}
.history-wrap { margin:0 auto 4rem;}
.history-wrap .histories > div  { margin: 0 0 3rem;}
.history-wrap .common-button  { margin:0 auto;}
ul.history li { margin:0 0 2em;}
ul.history .nenn  { font-size:1.6rem; line-height:1.8;}
ul.history .nenn span  { margin-right:1em;}
ul.history p  { line-height:1.8;}
.histories .block-2 ul {
  display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
}
.histories .block-2 ul li { margin:0; width:48.5%;}
.histories .block-2 figcaption  { font-size:1.4rem;}

.history-yurai  { margin:0 auto 8rem;}
.history-yurai-story  {}
.history-yurai-story > div  {}
.history-yurai-story > div:nth-child(2){
  display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
}
.history-yurai-story > div:nth-child(2) figure  { width:48.5%;}
.history-yurai-story figcaption  { padding:0.8rem 0; font-size:1.4rem;}

@media screen and (min-width:768px) {

  .history-lead .lead { font-size:3.2rem}
  .history-wrap { margin:0 auto 8rem;}
  .history-wrap .histories { 
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .history-wrap .histories > div  { width:48.5%;}
  .histories .block-2 ul li { margin:0 0 10px;}
  .histories .block-2 figcaption  { padding:0.8rem 0; font-size:1.6rem;}
  ul.history .nenn  { display:inline-block; vertical-align:top; width:12em;}
  ul.history .nenn span  { margin-right:2em;}
  ul.history p  { display:inline-block; vertical-align:top; width:calc(100% - 13em);}
  .history-wrap .common-button  { margin:0; min-width:48%; font-size:1.8rem;}

  .history-yurai-story  {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .history-yurai-story > div:nth-child(1)  { width:70%;}
  .history-yurai-story > div:nth-child(2)  { width:25%;}
  .history-yurai-story > div:nth-child(1) figure  { margin:40px 0 0; float:right; width:170px;}
  .history-yurai-story > div:nth-child(2){ display:block;}
  .history-yurai-story > div:nth-child(2) figure  { width:100%;}


}




/* -------------------------------------------------------------------
 * 段組
------------------------------------------------------------------- */

/* 2段 */
.block-2 ul {
  display:flex; flex-wrap:wrap;
}
.block-2 ul li{
  margin-bottom:60px;
}
.block-2 ul li figure {
  margin-bottom:20px;
}
.block-2 ul li p {
  margin-bottom:30px;
}

@media screen and (min-width:768px) {

  .block-2 ul {
    margin-bottom:0px;
  }
  .block-2 ul li {
    width:48.5%; margin-bottom:80px;
  }
  .block-2 ul li:nth-of-type(2n + 2) {
    margin-left:3%;
  }

}




/* 3段 */
.block-3 ul {
  display:block;
}
.block-3 ul li {
  display:block; width:100%;
}
.block-3 ul li figure {
  margin-bottom:20px;
}
.block-3 ul li h3 {
  margin-bottom:10px;
}
.block-3 ul li p {
  margin-bottom:30px;
  font-weight:500;
  line-height:2;
}

@media screen and (min-width:768px) {

  .block-3 ul {
    display:flex; flex-flow:row wrap; justify-content:space-between;
  }
  .block-3 ul li {
    display:flex; flex-direction:column; width:31.3%;
  }

}



/* 4段 */
.block-4 ul {
  display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
}
.block-4 ul li {
  width:48.5%;
}
.block-4 ul li figure {
  margin-bottom:20px;
}

@media screen and (min-width:768px) {

  .block-4 ul {
    display:flex; justify-content:space-between;
  }
  .block-4 ul li {
    display:flex; flex-direction:column; width:22.5%;
  }

}




/* -------------------------------------------------------------------
 * 
------------------------------------------------------------------- */

article h3 {
  font-size:2.4rem; font-weight:700; letter-spacing:0.04em; 
}
article p {
  font-size:1.6rem; line-height:2.0;
}
p.lead  { font-size:1.8rem; font-weight:700; line-height:1.8;}
p.note  { font-size:1.4rem; line-height:1.4;}

a.image-on-arrow {
  display:block;
  overflow:hidden;
  position:relative;
  margin-bottom:20px;
}
a.image-on-arrow figure { margin-bottom:0 !important;}
a.image-on-arrow::before,
a.image-on-arrow::after {
  position:absolute; z-index:1; content:"";
}
a.image-on-arrow::before {
  right:0;
  bottom:0;
  width:32px;
  height:32px;
  background-color:#000;
}
a.image-on-arrow::after {
  background-image:url(../img/common/icon-arrow-right-white.png);
  background-size:cover;
  right:8px;
  bottom:8.5px;
  width:16px;
  height:15px;
}
a.image-on-arrow img {
  transition:transform .3s;
}
a.image-on-arrow:hover img {
  transform:scale(1.1);
}


@media screen and (min-width:768px) {

  p.lead  { font-size:2.4rem;}


}