@charset "utf-8";

/* -------------------------------------------------------------------
 * キャンパスライフ
------------------------------------------------------------------- */

.campuslife-home  { padding:4rem 0 6rem; background: url(../img/campuslife/index/nami-w-shita.svg) repeat-x center top, url(../img/campuslife/index/nami-w-ue.svg) repeat-x center bottom; background-color: #FFEC00;}
.campuslife-home .common-button { margin:0 auto;}

.campuslife-syusei { margin:-70px 0 0; padding:0 0 4rem;}
.campuslife-syusei .syusei-nav p { margin-bottom:30px;}
.campuslife-syusei .common-button { margin:0 auto;}

.campuslife-message { padding:5rem 0; background: url(../img/campuslife/index/nami-w-shita.svg) repeat-x center top, url(../img/campuslife/index/nami-w-ue.svg) repeat-x center bottom; background-color:#FFEC00;}
.campuslife-message .heading-style-3:before { background-color:#fff;}
.campuslife-message .videowrap  { margin:0 auto; max-width:582px;}
.campuslife-message .videowrap video  { width:100%; height:auto;}

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


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

  .campuslife-home  { padding:8rem 0 20rem;}
  .campuslife-syusei  { margin:-200px 0 0; text-align:right;}
  .campuslife-syusei .syusei-nav { 
    position:relative; display:inline-block; 
    margin:-180px 0 0; padding:4rem; width:412px; text-align:left; 
    background-color:#fff;
  }

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

}



/* -------------------------------------------------------------------
 * GATUNクラブ
------------------------------------------------------------------- */

.campuslife-club  { margin:0 auto 4rem;}
.campuslife-club .block-2 ul li  { margin:0;}
a.btn-gatun:after { position:absolute; top:0; left:0; content:''; width:100%; height:100%; border:3px solid #9A1B20; background:none;}
a.btn-gatun:before  { background:url(../img/common/icon-arrow-right-white.png) no-repeat center center / 20px; background-color:#9A1B20; transform:rotate(90deg);}
a.btn-sekkei:after { position:absolute; top:0; left:0; content:''; width:100%; height:100%; border:3px solid #32276F; background:none;}
a.btn-sekkei:before  { background:url(../img/common/icon-arrow-right-white.png) no-repeat center center / 20px; background-color:#32276F; transform:rotate(90deg);}

.campuslife-gatun { margin:0 auto 6rem;}
.campuslife-gatun h2 { margin:0 0 2rem; padding:0.2em 0; text-align:center; font-size:2.0rem; font-weight:700; color:#fff; background-color:#9A1B20;}
.campuslife-gatun figure.gatun-logo  { margin:0 auto 2rem; max-width:994px;}
.heading-style-1-campuslife  { border-bottom-color:#FFE33F;}
.heading-style-1-campuslife::after { background-color: #9A1B20;}
.campuslife-gatun h4  { font-size:2.0rem; font-weight:700; color:#9A1B20;}
.campuslife-gatun p { margin-bottom:1.8em;}
.campuslife-gatun figcaption  { padding:0.4em 0; font-size:1.6rem;}
.campuslife-gatun-mori  { margin:5rem 0 0; padding:1px 8%; background-color:#FFE33F;}
.campuslife-gatun-mori h3 { 
  margin:-24px auto 24px; text-align:center; font-size:2.4rem; color:#9A1B20;
}
.campuslife-gatun-mori h3 span  { display:inline-block; position:relative;}
.campuslife-gatun-mori h3 span:before  { 
  position:absolute; bottom:6px; left:-10px; content:'';
  width:3px; height:30px; background-color:#9A1B20; transform:skew(30deg);
}
.campuslife-gatun-mori h3 span:after  { 
  position:absolute; bottom:6px; right:-10px; content:'';
  width:3px; height:30px; background-color:#9A1B20; transform:skew(-30deg);
}
.campuslife-gatun-mori .block-3 > div { margin-bottom:30px;}

.campuslife-sekkei { margin:0 auto 10rem;}
.campuslife-sekkei h2 { margin:0 0 2rem; padding:0.2em 0; text-align:center; font-size:2.0rem; font-weight:700; color:#fff; background-color:#32276F;}
.campuslife-sekkei figure.sekkei-logo  { margin:0 auto 2rem; max-width:994px;}
.campuslife-sekkei p { margin-bottom:1.8em;}
.campuslife-sekkei p.lead { color:#32276F;}
.heading-style-1-sekkei { border-bottom-color:#FFE33F;}
.heading-style-1-sekkei::after { background-color: #32276F;}


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

  .campuslife-gatun { margin:0 auto 10rem;}
  .campuslife-gatun h2 { margin:0 0 2rem; padding:0.4em 0; font-size:2.8rem;}
  .campuslife-gatun .gatun-lead  { margin-bottom:5em; text-align:center;}
  .campuslife-gatun h4  { font-size:2.4rem;}
  .campuslife-gatun p { margin-bottom:2.4em;}
  .campuslife-gatun .lead  { margin:0 0 1em;}
  .gatun-projects { margin-bottom:8rem;}
  .campuslife-gatun .block-3  { margin-bottom:6rem;}
  .campuslife-gatun .block-3 ul li  { margin-bottom:2rem;}
  .campuslife-gatun-mori h3 { font-size:3.2rem;}
  .campuslife-gatun-mori h3 span { display:inline-block; padding:0 1em; font-size:3.2rem;}
  .campuslife-gatun-mori h3 span br { display:none;}
  .campuslife-gatun-mori h3 span:before,
  .campuslife-gatun-mori h3 span:after  { width:5px;}
  .campuslife-gatun-mori .block-3 {
    display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start;
    margin:0;
  }
  .campuslife-gatun-mori .block-3 > div {
    display:flex; flex-direction:column; margin:0 3% 0 0; width:31.3%;
  }
  .campuslife-gatun-mori .block-3 > div:nth-child(3n) { margin-right:0;}

  .campuslife-sekkei h2 { margin:0 0 2rem; padding:0.4em 0; font-size:2.8rem;}
  .campuslife-sekkei .sekkei-lead  { margin-bottom:5em; text-align:center;}
  .campuslife-sekkei .lead  { margin:0 0 1em;}
  .campuslife-sekkei h3 { margin:4rem 0 2rem;}

}



/* -------------------------------------------------------------------
 * Calendar
------------------------------------------------------------------- */

.campuslife-calendar  { margin:0 auto 8rem;}
.calendar-wrap .calendar  { padding:4rem 0;}
.calendar-wrap .calendar:nth-child(odd){
  padding:5rem 0;
  background: url(../img/campuslife/index/nami-w-shita.svg) repeat-x center top, url(../img/campuslife/index/nami-w-ue.svg) repeat-x center bottom; background-color: #FFEC00;
}
.calendar-wrap .calendar .container { position:relative; margin:0 auto; padding:0 0 0 8rem; max-width:880px;}
.calendar-wrap .calendar .container:before  {
  position:absolute; top:8px; left:61px; content:'';
  width:0; height:calc(100% + 90px);
  border-left:2px solid #000;
}
.calendar-wrap .calendar:last-child .container:before  { border:0;}
.calendar .month  { 
  position:absolute; top:0;left: -1em;
   width: 2em; text-align:right;
  font-size:4rem; line-height:1; font-family:'Roboto', sans-serif;
}
.calendar .month:before { 
  position:absolute; top:8px; right:-30px; content:'';
  width:16px; height:16px; 
  background-color:#000; border-radius:20px;
}
.calendar ul  { margin:0 0 0em; list-style:none; font-size:1.6rem; line-height:1.5;}
.calendar li  { position:relative; margin:0 0 0.8em; padding:0 0 0 1em; font-size:1.6rem;}
.calendar li:last-child { margin:0;}
.calendar li:before {
  position:absolute; top:0.7em; left:0.4em; content:''; 
  width:3px; height:3px; border-radius:100%; background-color:#000;
}
.calendar-photo { padding:20px 0;}
.calendar-photo figure  { margin-bottom:20px;}
.calendar-photo figure img  { border-radius:10px;}
.calendar-photo figure figcaption  { padding:0.5rem 0; font-size:1.6rem; line-height:1.5;}}
.calendar-photo .figure { margin-bottom:20px;}
.calendar-photo .figure caption { padding:0.5rem 0; font-size:1.6rem; line-height:1.5;}


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

  .campuslife-calendar .container  { max-width:880px;}
  
  .calendar-wrap .calendar  { padding:7rem 0;}
  .calendar-wrap .calendar:nth-child(odd){ padding:8rem 0;}
  .calendar-wrap .calendar .container { padding:0 0 0 13rem;}
  .calendar-wrap .calendar .container:before  { top:14px; left:85px; height:calc(100% + 160px);}
  .calendar .month  { font-size:5.6rem;}
  .calendar .month:before { top:14px; right:-40px; width:20px; height:20px;}

  .calendar ul  { font-size:2.0rem;}
  .calendar-photo {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .calendar-photo figure,
  .calendar-photo .figure { width:48.5%;}

}




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

/* 2段 */
.block-2 ul {
  display:flex; flex-wrap:wrap; justify-content:space-between;
}
.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;
  }

}



/* 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:flex-start; align-items:flex-start;
  }
  .block-3 ul li {
    display:flex; flex-direction:column; margin-right:3%; width:31.3%;
  }
  .block-3 ul li:nth-child(3n) { margin-right:0;}

}



/* 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);
}

.embed  {
  position:relative;
  padding-top:56.25%;
  width:100%; height:0;
  overflow:hidden;
}
.embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; border-radius:10px;}


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

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

}