@charset "UTF-8";
/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
figure,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 1em;
}

body,
table,
input,
textarea,
select,
option {
  font-family: "Noto Sans JP", sans-serif;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

:focus {
  outline: 0;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

img {
  vertical-align: top;
  height: auto;
  width: 100%;
}

/*------------------------------------------------------------
	color
------------------------------------------------------------*/
/*------------------------------------------------------------
	layout
------------------------------------------------------------*/
html {
  font-size: 13px;
}

@media (max-width: 768px) {
  html {
    font-size: calc(10 / 384 * 100vw);
  }
}

body {
  color: #3f3f3f;
  font-size: 1.4rem;
  line-height: 1.6;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  letter-spacing: 0.05em;
}

/*------------------------------------------------------------
	common
------------------------------------------------------------*/
summary,
a {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  text-decoration: none;
  display: block;
}

summary:hover,
a:hover {
  cursor: pointer;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

@media (max-width: 768px) {
  ::-webkit-scrollbar {
    display: none;
  }
}

.scrAnim {
  -webkit-transition: all 0.8s 0.3s ease-in-out;
  transition: all 0.8s 0.3s ease-in-out;
  opacity: 0;
  -webkit-transform: translateY(4rem);
          transform: translateY(4rem);
}

.scrAnim.toRight {
  -webkit-transform: translateX(-4rem);
          transform: translateX(-4rem);
}

.scrAnim.on {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

#container {
  z-index: 1;
}

#container,
header,
#keyVisual,
main,
footer {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  position: relative;
}

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #e10012;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  z-index: 2;
}

header .logo {
  height: 1.4rem;
  display: block;
  padding: 1rem 0;
  line-height: 0;
}

header .logo img {
  height: 100%;
}

#keyVisual {
  height: auto;
  background: #e10012;
  margin-top: -3.93rem;
}

#keyVisual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 15.5rem;
  /* 背景を出す高さを調整 */
  background: url("../img/kv_bg2.webp") no-repeat center bottom;
  background-size: cover;
  z-index: 0;
  /* コンテンツの後ろに表示 */
}

#keyVisual .kv {
  width: 100%;
  position: relative;
  aspect-ratio: 1536 / 2508;
  min-height: 63.3rem;
  background: url(../img/kv_bg.webp) no-repeat top/100% auto;
  z-index: 1;
  /*
        .option{
            display: flex;
            flex-direction: column;
            font-weight: bold;
            font-size: 1.1rem;
            gap:2px;
            width: calc(136 / 768 *100%);
            position:absolute;
            text-align: center;
            bottom:9rem;
            right: 2rem;
            z-index: 0;
            dd{
                color:#395560;
                background:#fff;
            }
        }
        */
  /*
        width: 25%;
    position: absolute;
    bottom: 1rem;
    left: 40%;
*/
}

#keyVisual .kv h1 {
  width: 100%;
  padding: 0 0;
  position: absolute;
  margin: 0 auto;
  z-index: 1;
  top: 26.15rem;
  left: 8.5rem;
}

#keyVisual .kv h1 img {
  width: calc(435 / 768 * 100%);
  /*width: 56.5%;*/
  height: auto;
}

#keyVisual .kv .catch {
  width: calc(142 / 768 * 100%);
  margin: 0 auto;
  position: absolute;
  top: 3.5rem;
  right: 3.2rem;
  z-index: 1;
}

#keyVisual .kv .eventBtn {
  display: block;
  margin: 0 auto;
  width: calc(215 / 768 * 100%);
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  -webkit-animation: event_btn 1.9s ease-in-out 0.5s infinite;
          animation: event_btn 1.9s ease-in-out 0.5s infinite;
  z-index: 1;
}

@-webkit-keyframes event_btn {
  0% {
    left: 0;
  }
  10% {
    left: 0.25rem;
  }
  20% {
    left: -0.25rem;
  }
  30% {
    left: 0.5rem;
  }
  40% {
    left: -0.5rem;
  }
  50% {
    left: 0.25rem;
  }
  60% {
    left: -0.25rem;
  }
  70% {
    left: 0;
  }
}

@keyframes event_btn {
  0% {
    left: 0;
  }
  10% {
    left: 0.25rem;
  }
  20% {
    left: -0.25rem;
  }
  30% {
    left: 0.5rem;
  }
  40% {
    left: -0.5rem;
  }
  50% {
    left: 0.25rem;
  }
  60% {
    left: -0.25rem;
  }
  70% {
    left: 0;
  }
}

#keyVisual .kv .animeCopyright {
  font-size: 1rem;
  position: absolute;
  left: 2rem;
  bottom: 5rem;
}

/*
.infoOC__card {
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    gap: 1rem;
    transition: .4s;
    background:#fff;
    border-radius: 1rem;
    .infoOC__figure {
        width: 27%;
        border-radius: 1rem;
        overflow: hidden;
        align-self: center;
        .infoOC__img {
            aspect-ratio: 1 / 1;
            width: 100%;
        }
    }
    .infoOC__textArea {
        width: 65.7%;

        .infoOC__timeWrapper {
            display: flex;
            gap: 0.5rem;
            font-size: 1.4rem;
            //color: #E72100;
            .infoOC__time{
                font-size: 1.2rem;;
                //border: 1px solid #E72100;
                font-weight: bold;
                color: #e7752f;
                border-radius: 0.5rem;
                padding: .1rem 0;
                .schoolname{
                    display: none;
                }
                span{
                    font-size:1rem;
                    background:#dbdbdb;
                    display: inline-block;
                    padding:0 0.5rem;
                    margin-right: 0.5rem;
                    color:#333;
                }
            }
        }
        .infoOC__text {
            color:#00238b;
            font-size: 1.4rem;
            font-weight: bold;
            line-height: 1.5;
        }
    }
}
*/
#love {
  background: url(../img/frame_wavy-yellow.webp) no-repeat top/100% auto, linear-gradient(135deg, #9deea4 20%, #76e8ee 62%);
  padding-bottom: 10rem;
}

#love h2 {
  padding-top: 2rem;
  width: 100%;
}

#love .conjunction {
  width: calc(204 / 768 * 100%);
  margin: 0 auto;
  position: absolute;
  top: -5rem;
  right: 0;
  left: 0;
}

#love .lead {
  text-align: center;
  font-weight: 800;
  font-size: 2.2rem;
  top: -1rem;
  position: relative;
}

#love .slide-box {
  padding-bottom: 2rem;
}

#love .slide-box .infoOC__list {
  height: auto;
}

#love .slide-box .infoOC__list .infoOC__card {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

#love .slide-box .infoOC__list .infoOC__card .infoOC__figure {
  width: 100%;
}

#love .slide-box .infoOC__list .infoOC__card .infoOC__textArea {
  width: 100%;
}

#love .slide-box .infoOC__list .infoOC__card .infoOC__textArea .infoOC__time .schoolname {
  display: inline;
  background: none;
  border: #e60012 solid 2px;
  border-radius: 3rem;
  color: #e60012;
  background: #fff;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  right: 0;
  padding: 1rem;
  -webkit-transform: translateY(-5rem);
          transform: translateY(-5rem);
}

.btn_school {
  display: block;
  margin: 0 auto;
  width: calc(704 / 768 * 100%);
}

/*
#train{
    background:url(../img/frame_wavy-pink.webp) no-repeat bottom /100% auto;
    //background-attachment : local, fixed;
    padding-bottom: 6rem;
    &::before{
        content:"";
        top: 0;
        left: 0;
        right: 0;
        content: "";
        width: 100%;
        height: 100%;
        position: fixed;
        background:  url(../img/train_bg.webp) repeat-y top / 100% auto;
        z-index: -1;
    }
    .lead{
        width: calc(682 / 768 *100%);
        margin:0 auto;
        top: -3rem;
        position: relative;
    }
    h2{
        width: calc(700 / 768 *100%);
        margin:0 auto;
    }
    figure{
        width: calc(258 / 768 *100%);
        margin:0 auto 1rem;
    }
    .captionBox{
        background:#fff;
        border-radius: 2rem;
        width: 90%;
        padding:0rem 2rem 2rem;
        margin:3rem auto 0;
        box-sizing: border-box;
        dl{
            padding-bottom:1rem;
            dt{
                font-family: "Zen Maru Gothic", serif;
                font-weight: 800;
                font-size: 2.4rem;
                text-align: center;
                line-height: 1;
                padding-bottom:1rem;
                span.pink{
                    font-size:6rem;
                    color:#e6558d;
                }
            }
            dd{
                display: grid;
                grid-template-columns: 2.2rem auto;
                span.num{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 2rem;
                    height: 2rem;
                    margin-top: 0.4rem;
                    border-radius: 50%;
                    aspect-ratio: 1/1;
                    color:#fff;
                    background:#e6558d;
                }
            }
        }
        .btn a {
            width:100%;
            padding:1rem;
            justify-content: center;
            box-sizing: border-box;
            display: flex;
            border-radius: 3rem;
            background:#f9db26;
            color:#fff;
            position: relative;
            filter: drop-shadow(0.3rem 0.3rem 0rem #763e2b);
            &::after{
                content:"";
                transform: rotate(45deg);
                width:1rem;
                height:1rem;
                border-top:#fff 0.2rem solid;
                border-right:#fff 0.2rem solid;
                position:absolute;
                right:2rem;
                margin: auto 0;
                top: 0;
                bottom: 0;
            }
        }
    }
}


#reserve{
    background:url(../img/reserve_bg.webp) no-repeat top/100% auto,linear-gradient(135deg,#eec8c9 20%, #eee286 62%);
    padding-bottom:10rem;
    h2{
        width: calc(654 / 768 *100%);
        margin:0 auto;
        padding-top:2rem;
    }
    .reserves{
        width:100%;
        margin:0 auto;
        padding-bottom:2rem;
        display: flex;
        flex-direction: column;
        gap:2rem;
        dt{
            display: flex;
            align-items: center;
            font-weight: bold;
            margin-bottom:1rem;
            padding: 0 2rem;
            gap:1rem;
            img{
                width: calc(84 / 768 *100%);
            }
        }
        dd{
            margin:0 auto;
                width: calc(588 / 768 *100%);
            img{
            }
        }
    }
}
*/
.head {
  width: 100%;
  max-width: inherit;
  position: fixed;
  top: 0;
}

main {
  padding-top: 70rem;
  pointer-events: none;
}

#event,
#event2,
#gakuinsai,
#school,
#illust-contest,
#illust-contest-gallery,
#gakubu,
#about,
#learn,
#select,
#menjo,
#principal {
  position: relative;
  pointer-events: fill;
}

#event h2,
#event2 h2,
#gakuinsai h2,
#school h2,
#illust-contest h2,
#illust-contest-gallery h2,
#gakubu h2,
#about h2,
#learn h2,
#select h2,
#menjo h2,
#principal h2 {
  width: 100%;
  margin: 0 auto;
  padding: 2rem 0 2rem;
  position: absolute;
  z-index: 1;
}

#event .mainBox,
#event2 .mainBox,
#gakuinsai .mainBox,
#school .mainBox,
#illust-contest .mainBox,
#illust-contest-gallery .mainBox,
#gakubu .mainBox,
#about .mainBox,
#learn .mainBox,
#select .mainBox,
#menjo .mainBox,
#principal .mainBox {
  background: #76e8ee;
  padding: 12.5rem 0 15rem;
}

#event,
#event2 {
  position: relative;
  padding: 0rem 0 15rem;
}

#event .mainBox,
#event2 .mainBox {
  padding: 7rem 0 7rem;
  padding: 0 0 7rem;
}

#event .mainBox h2,
#event2 .mainBox h2 {
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding: 2rem 0 2rem;
}

#event .mainBox .lead,
#event2 .mainBox .lead {
  text-align: center;
  font-weight: 800;
  font-size: 2rem;
  top: -1rem;
  padding-bottom: 1rem;
  position: relative;
  color: #2f3192;
}

#event .mainBox .buttonBox,
#event2 .mainBox .buttonBox {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  gap: 0.8rem;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 2rem;
}

#event .mainBox .buttonBox li a,
#event2 .mainBox .buttonBox li a {
  display: block;
  width: 100%;
  color: #3f3f3f;
  background: #f9db26;
  border-radius: 1rem;
  position: relative;
  text-align: center;
  -webkit-filter: drop-shadow(0.3rem 0.3rem 0rem #5263b9);
          filter: drop-shadow(0.3rem 0.3rem 0rem #5263b9);
  padding: 1rem 2.2rem 1rem 1rem;
  outline: 0.14rem solid #fff;
  outline-offset: -0.4rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: 800;
}

#event .mainBox .buttonBox li a::after,
#event2 .mainBox .buttonBox li a::after {
  content: "";
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 0.6rem;
  height: 0.6rem;
  border-top: #3f3f3f 0.2rem solid;
  border-right: #3f3f3f 0.2rem solid;
  position: absolute;
  right: 1.4rem;
  margin: auto 0;
  top: 0;
  bottom: 0;
}

#event .mainBox .buttonBox li a.tab-active,
#event2 .mainBox .buttonBox li a.tab-active {
  color: #3f3f3f;
  background: #fff;
  outline: 0.14rem solid #3f3f3f;
}

#event .mainBox .buttonBox li a.tab-active::after,
#event2 .mainBox .buttonBox li a.tab-active::after {
  border-top: #3f3f3f 0.2rem solid;
  border-right: #3f3f3f 0.2rem solid;
}

#event .mainBox .contentBox,
#event2 .mainBox .contentBox {
  position: relative;
  width: 90%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}

#event .mainBox .contentBox .tab-content,
#event2 .mainBox .contentBox .tab-content {
  display: none;
}

#event .mainBox .contentBox .tab-content .more,
#event2 .mainBox .contentBox .tab-content .more {
  margin-top: 2rem;
  width: 100%;
  padding: 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 3rem;
  background: #f9db26;
  color: #3f3f3f;
  position: relative;
  font-weight: 800;
  -webkit-filter: drop-shadow(0.3rem 0.3rem 0rem #5263b9);
          filter: drop-shadow(0.3rem 0.3rem 0rem #5263b9);
}

#event .mainBox .contentBox .tab-content .more::after,
#event2 .mainBox .contentBox .tab-content .more::after {
  content: "";
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 1rem;
  height: 1rem;
  border-top: #3f3f3f 0.2rem solid;
  border-right: #3f3f3f 0.2rem solid;
  position: absolute;
  right: 2rem;
  margin: auto 0;
  top: 0;
  bottom: 0;
}

#event .mainBox .contentBox .tab-content ul,
#event2 .mainBox .contentBox .tab-content ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

#event .mainBox .contentBox .tab-content.tab-content-active,
#event2 .mainBox .contentBox .tab-content.tab-content-active {
  display: block;
}

#event .mainBox .bnr,
#event2 .mainBox .bnr {
  width: 90%;
  margin: auto;
  padding-top: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 3rem;
}

#event .mainBox .bnr a img,
#event2 .mainBox .bnr a img {
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0.3rem 0.3rem 0;
          box-shadow: rgba(0, 0, 0, 0.3) 0.3rem 0.3rem 0;
}

#event {
  margin-top: -6.6rem;
  padding-bottom: 0;
}

#event .mainBox {
  background: url(../img/summary_top.webp) no-repeat bottom/100% auto, url(../img/bg_gakubu2.webp) top -13rem center/100% auto, url(../img/bg_gakubu.webp) no-repeat top -20rem center/100% auto, url(../img/bg_gakubu.webp) no-repeat bottom -27rem center/100% auto, #ffea9b;
  /*clip-path: polygon(0 0,50% 5.9rem , 100% 0, 100% 100%, 0 100%);*/
  padding-bottom: 12rem;
}

#event .mainBox .courseTitle {
  padding: 4rem 0 1rem;
}

#event .mainBox .course {
  padding: 0 2rem 5rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

#event .mainBox .course li {
  position: relative;
}

#event .mainBox .course li::before {
  content: "";
  background: #f9db26;
  height: 6rem;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

#event .mainBox .course li a {
  color: #333;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  height: 6rem;
}

#event .mainBox .course li a::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
  margin: auto;
  right: 1.5rem;
  top: 0;
  bottom: 0;
  border-top: #333 solid 1px;
  border-right: #333 solid 1px;
  rotate: 45deg;
}

#event2 {
  padding: 0rem 0 0rem;
  background-blend-mode: normal, color-dodge;
  margin-top: -10rem;
}

#event2 .mainBox {
  -webkit-clip-path: polygon(0 0, 100% 9rem, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 9rem, 100% 100%, 0 100%);
  background: url(../img/bg_gakubu2.webp) top -7rem center/100% auto, url(../img/bg_gakubu.webp) no-repeat top -20rem center/100% auto, url(../img/bg_gakubu.webp) no-repeat bottom -27rem center/100% auto, #ffea9b;
  padding-top: 10rem;
}

.infoOC__card {
  padding: 1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  background: #fff;
  border-radius: 1rem;
}

.infoOC__card .infoOC__figure {
  width: 27%;
  border-radius: 1rem;
  overflow: hidden;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.infoOC__card .infoOC__figure .infoOC__img {
  aspect-ratio: 1 / 1;
  width: 100%;
}

.infoOC__card .infoOC__textArea {
  width: 65.7%;
}

.infoOC__card .infoOC__textArea .infoOC__timeWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  font-size: 1.4rem;
}

.infoOC__card .infoOC__textArea .infoOC__timeWrapper .infoOC__time {
  font-size: 1.2rem;
  font-weight: bold;
  color: #e7752f;
  border-radius: 0.5rem;
  padding: 0.1rem 0;
}

.infoOC__card .infoOC__textArea .infoOC__timeWrapper .infoOC__time .schoolname {
  display: none;
}

.infoOC__card .infoOC__textArea .infoOC__timeWrapper .infoOC__time span {
  font-size: 1rem;
  background: #dbdbdb;
  display: inline-block;
  padding: 0 0.5rem;
  margin-right: 0.5rem;
  color: #333;
}

.infoOC__card .infoOC__textArea .infoOC__text {
  color: #00238b;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.5;
}

#gakuinsai {
  margin-top: -8rem;
  margin-top: -6.6rem;
  background: #fff;
  padding-top: 3.5rem;
  /*padding: 40px 16px;*/
}

#gakuinsai .gakuinsai__title {
  text-align: center;
  margin: 0 0 24px;
}

#gakuinsai .gakuinsai__title picture,
#gakuinsai .gakuinsai__title img {
  display: inline-block;
  vertical-align: middle;
}

#gakuinsai .gakuinsai__title img {
  width: clamp(320px, 80vw, 400px);
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

#gakuinsai .mainBox {
  background: #fff;
  padding: 6rem 0;
}

#gakuinsai .mainBox > div {
  background: #fff4da;
  /*border-radius: 12px;*/
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: 20px;
  margin: 0 auto;
  max-width: 980px;
}

#gakuinsai .mainBox > div:nth-of-type(odd) {
  background: #fff;
}

#gakuinsai .mainBox > div:nth-of-type(even) {
  background: #fff4da;
}

#gakuinsai .mainBox > div h3 {
  color: #e53935;
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.8rem, 2.2vw, 1.5rem);
  margin: 0 0 12px;
  position: relative;
}

#gakuinsai .mainBox > div h3::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin: 8px auto 0;
  background: #e53935;
  border-radius: 999px;
}

#gakuinsai .mainBox > div .lead {
  margin: 0 auto 16px;
  color: #222;
  line-height: 1.85;
  font-size: clamp(1.2rem, 1.6vw, 1rem);
}

#gakuinsai .mainBox > div > img,
#gakuinsai .mainBox > div > p > img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
          box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

#gakuinsai .mainBox > div ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

#gakuinsai .mainBox > div ul li img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#gakuinsai .mainBox h2 {
  position: relative;
  padding-bottom: 0;
}

#gakuinsai .gakuinsai2,
#gakuinsai .gakuinsai4 {
  margin-top: 2rem;
}

@media (max-width: 600px) {
  #gakuinsai .mainBox {
    padding: 6rem 0 6.5rem;
  }
  #gakuinsai .mainBox > div {
    padding: 16px;
    /*.lead{ width: 94%; }
        ul{ grid-template-columns: 1fr; }*/
  }
  #gakuinsai .mainBox .ctaBlock {
    margin: 1em;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

@media (min-width: 960px) {
  #gakuinsai .mainBox > div {
    padding: 28px;
  }
  #gakuinsai .mainBox > div .lead {
    margin-bottom: 20px;
  }
  #gakuinsai .mainBox > div ul {
    gap: 12px;
  }
}

#school {
  position: relative;
  padding: 0rem 0 15rem;
}

#school .mainBox {
  padding: 7rem 0 7rem;
  padding: 0 0 7rem;
  /* optional: ふわっと表示用 */
}

#school .mainBox h2 {
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding: 2rem 0 2rem;
  text-align: center;
}

#school .mainBox h2 img {
  display: inline-block;
  vertical-align: middle;
  width: clamp(320px, 80vw, 400px);
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

#school .mainBox .lead {
  text-align: center;
  font-weight: 800;
  font-size: 2rem;
  top: -1rem;
  padding-bottom: 1rem;
  position: relative;
  color: #fcdc4a;
}

#school .mainBox .buttonBox {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  gap: 0.8rem;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 2rem;
}

#school .mainBox .buttonBox li a {
  display: block;
  width: 100%;
  color: #3f3f3f;
  background: #f9db26;
  border-radius: 1rem;
  position: relative;
  text-align: center;
  -webkit-filter: drop-shadow(0.3rem 0.3rem 0rem #5263b9);
          filter: drop-shadow(0.3rem 0.3rem 0rem #5263b9);
  padding: 1rem 2.2rem 1rem 1rem;
  outline: 0.14rem solid #fff;
  outline-offset: -0.4rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-weight: 800;
}

#school .mainBox .buttonBox li a::after {
  content: "";
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  width: 0.6rem;
  height: 0.6rem;
  border-top: #fff 0.2rem solid;
  border-right: #fff 0.2rem solid;
  position: absolute;
  right: 1.4rem;
  margin: auto 0;
  top: 0;
  bottom: 0;
}

#school .mainBox .buttonBox li a.tab-active {
  color: #3f3f3f;
  background: #fff;
  outline: 0.14rem solid #3f3f3f;
}

#school .mainBox .buttonBox li a.tab-active::after {
  border-top: #3f3f3f 0.2rem solid;
  border-right: #3f3f3f 0.2rem solid;
}

#school .mainBox .contentBox {
  position: relative;
  width: 90%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  /* 校名タイトル＋上下ボーダー風 */
  /* 開催時間 */
  /* アクセス */
  /* --- アコーディオンの赤帯ボタン --- */
  /* 余白やレイアウト微調整（任意） */
}

#school .mainBox .contentBox .tab-content {
  display: none;
}

#school .mainBox .contentBox .tab-content .more {
  margin-top: 2rem;
  width: 100%;
  padding: 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 3rem;
  background: #f9db26;
  color: #3f3f3f;
  position: relative;
  font-weight: 800;
  -webkit-filter: drop-shadow(0.3rem 0.3rem 0rem #5263b9);
          filter: drop-shadow(0.3rem 0.3rem 0rem #5263b9);
}

#school .mainBox .contentBox .tab-content .more::after {
  content: "";
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 1rem;
  height: 1rem;
  border-top: #3f3f3f 0.2rem solid;
  border-right: #3f3f3f 0.2rem solid;
  position: absolute;
  right: 2rem;
  margin: auto 0;
  top: 0;
  bottom: 0;
}

#school .mainBox .contentBox .tab-content ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

#school .mainBox .contentBox .tab-content.tab-content-active {
  display: block;
}

#school .mainBox .contentBox .tab-content ul.planBox {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  gap: 2em;
  /* 本文部分を可変にして余白を調整 */
  /* モバイル：縦積み */
}

#school .mainBox .contentBox .tab-content ul.planBox .plan {
  background: #fff;
  color: #222;
  border-radius: 18px 0 0 0;
  /*padding: 0 14px 18px;*/
  -webkit-box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
          box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

#school .mainBox .contentBox .tab-content ul.planBox .plan .plan-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin: 0;
}

#school .mainBox .contentBox .tab-content ul.planBox .plan .campus {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  background: #8fc6e8;
  /*align-self: center;*/
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: #fff;
  font-weight: 800;
  padding: 12px 16px;
  font-size: clamp(16px, 3.5vw, 22px);
  line-height: 1.3;
  border-radius: 18px 0 0 0;
}

#school .mainBox .contentBox .tab-content ul.planBox .plan .plan-title {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: 0;
  background: #e9e9e9;
  font-weight: 900;
  font-size: clamp(16px, 3.5vw, 22px);
  line-height: 1.3;
  padding: 12px 14px;
  border-radius: 0;
}

#school .mainBox .contentBox .tab-content ul.planBox .plan .plan-body {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr auto;
      grid-template-columns: 1fr auto;
  gap: 14px;
  margin-top: 12px;
  /*margin: 12px 12px 20px;*/
}

#school .mainBox .contentBox .tab-content ul.planBox .plan-body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 12px;
  padding: 0 14px 18px;
  gap: 12px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

#school .mainBox .contentBox .tab-content ul.planBox .plan-body p {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: 0 0 12px;
  font-weight: 700;
  line-height: 1.65;
  font-size: clamp(14px, 3vw, 16px);
  min-width: 180px;
}

#school .mainBox .contentBox .tab-content ul.planBox .plan-body .plan-figure {
  -ms-flex-item-align: start;
      -ms-grid-row-align: start;
      align-self: start;
  -ms-grid-column-align: end;
      justify-self: end;
  position: relative;
  display: inline-block;
  overflow: visible;
  z-index: 0;
  margin-top: 10px;
  margin-left: 10px;
  /* 赤い台紙（画像と同サイズ、角度だけ変える） */
}

#school .mainBox .contentBox .tab-content ul.planBox .plan-body .plan-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #c23a2e;
  border-radius: inherit;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-4deg);
          transform: rotate(-4deg);
  z-index: -1;
  /* 立体感が欲しければ↓を追加（任意）
    box-shadow: 0 8px 16px rgba(0,0,0,.18);
    */
  pointer-events: none;
}

#school .mainBox .contentBox .tab-content ul.planBox .plan-body .plan-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  #school .mainBox .contentBox .tab-content ul.planBox .plan-body {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }
  #school .mainBox .contentBox .tab-content ul.planBox .plan-figure {
    width: 100%;
    -ms-grid-column-align: start;
        justify-self: start;
    margin-top: 6px;
  }
}

#school .mainBox .contentBox .tab-content ul.planBox .plan.is-extra {
  display: none;
}

#school .mainBox .contentBox .tab-content ul.planBox.is-open .plan.is-extra {
  display: block;
  /* スライド感を出すなら下の1行をコメント解除してもOK
        animation: fadeIn .18s ease;
        */
}

#school .mainBox .contentBox .school-header {
  max-width: 980px;
  margin: 0 24px 24px;
}

#school .mainBox .contentBox .school-title {
  margin: 0 0 18px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .04em;
  font-size: clamp(22px, 6vw, 36px);
  line-height: 1.2;
  position: relative;
  padding: 8px 0;
  color: #fff;
  /* 上下の白線 */
}

#school .mainBox .contentBox .school-title::before, #school .mainBox .contentBox .school-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  opacity: .9;
}

#school .mainBox .contentBox .school-title::before {
  top: 0;
}

#school .mainBox .contentBox .school-title::after {
  bottom: 0;
}

#school .mainBox .contentBox .schedule {
  margin: 14px 0 16px;
}

#school .mainBox .contentBox .schedule .badge {
  display: inline-block;
  background: #fff;
  color: #e10012;
  font-weight: 900;
  border-radius: 5px;
  padding: 6px 10px;
  font-size: clamp(11px, 2.7vw, 12px);
  line-height: 1;
  margin-bottom: 6px;
  font-size: 16px;
}

#school .mainBox .contentBox .schedule .time {
  margin: 6px 0 0;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
  font-size: 2em;
  letter-spacing: .02em;
}

#school .mainBox .contentBox .schedule .time .day {
  font-size: .5em;
  vertical-align: baseline;
  margin: 0 .1em 0 .1em;
}

#school .mainBox .contentBox .schedule .notice {
  margin: 6px 0 0;
  color: #fff;
  font-weight: 700;
  line-height: 1.6;
  font-size: clamp(14px, 3.6vw, 18px);
}

#school .mainBox .contentBox .access {
  margin: 12px 0 8px;
}

#school .mainBox .contentBox .access .badge {
  display: inline-block;
  background: #fff;
  color: #e10012;
  font-weight: 900;
  border-radius: 5px;
  padding: 6px 10px;
  font-size: clamp(11px, 2.7vw, 12px);
  line-height: 1;
  margin-bottom: 6px;
  font-size: 16px;
}

#school .mainBox .contentBox .access .access-text {
  margin: 6px 0 0;
  color: #fff;
  font-weight: 700;
  line-height: 1.6;
  font-size: clamp(14px, 3.6vw, 18px);
}

#school .mainBox .contentBox .moreschool {
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 900;
  font-size: 1.2em;
  text-decoration: none;
  padding: 10px 40px 12px;
  position: relative;
  line-height: 1.2;
  margin-top: 1em;
}

#school .mainBox .contentBox .moreschool::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 10px;
  height: 10px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  -webkit-transition: -webkit-transform .2s ease;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
}

#school .mainBox .contentBox .moreschool[aria-expanded="true"]::after {
  -webkit-transform: translateY(-50%) rotate(-135deg);
          transform: translateY(-50%) rotate(-135deg);
}

#school .mainBox .contentBox .ctaBox {
  margin-top: 2em;
}

#school .mainBox .contentBox .ctaBox .ctaBtn {
  width: 100%;
}

@media (min-width: 720px) {
  #school .mainBox .contentBox .school-header {
    margin-bottom: 28px;
  }
}

#school .mainBox .bnr {
  width: 90%;
  margin: auto;
  padding-top: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 3rem;
}

#school .mainBox .bnr a img {
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0.3rem 0.3rem 0;
          box-shadow: rgba(0, 0, 0, 0.3) 0.3rem 0.3rem 0;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

#school {
  margin-top: -6.6rem;
  padding-bottom: 0;
  /*
  .bnrBox {
    background: #fff;
    padding: 1rem 1rem;
  }*/
}

#school .mainBox {
  background: #e10012;
  /*clip-path: polygon(0 0,50% 5.9rem , 100% 0, 100% 100%, 0 100%);*/
  padding-bottom: 4rem;
}

#school .mainBox .courseTitle {
  padding: 4rem 0 1rem;
}

#school .mainBox .course {
  padding: 0 2rem 5rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

#school .mainBox .course li {
  position: relative;
}

#school .mainBox .course li::before {
  content: "";
  background: #f9db26;
  height: 6rem;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

#school .mainBox .course li a {
  color: #333;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  height: 6rem;
}

#school .mainBox .course li a::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
  margin: auto;
  right: 1.5rem;
  top: 0;
  bottom: 0;
  border-top: #333 solid 1px;
  border-right: #333 solid 1px;
  rotate: 45deg;
}

#illust-contest {
  background: #fff;
}

#illust-contest .illust-contest__title {
  text-align: center;
  margin: 0 0 24px;
}

#illust-contest .illust-contest__title picture,
#illust-contest .illust-contest__title img {
  display: inline-block;
  vertical-align: middle;
}

#illust-contest .illust-contest__title img {
  width: clamp(320px, 80vw, 400px);
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

#illust-contest .headBox .lead {
  padding: 12rem 2rem 1rem;
}

#illust-contest .mainBox {
  padding: 1rem 2rem 19rem;
  background: -webkit-gradient(linear, left top, right top, from(#6eeee9), to(#eeea66));
  background: linear-gradient(to right, #6eeee9, #eeea66);
  /* 受賞者行 */
  /* SP：縦積み＋しっぽを上に変更 */
}

#illust-contest .mainBox h3 {
  text-align: center;
  font-weight: 900;
  font-size: 2.2rem;
  margin: 2rem 0 2rem;
}

#illust-contest .mainBox .winner__img {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: auto;
  display: block;
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
          box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

#illust-contest .mainBox .winner {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 150px 250px;
      grid-template-columns: 150px 250px;
  gap: 4px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 18px;
  /* 左：プロフィール（背景なし・文字やや小さく） */
  /* 右：見出しは吹き出しの外（中央）→キャプチャの雰囲気に */
}

#illust-contest .mainBox .winner .profile {
  text-align: center;
  /*margin-top: 2rem;*/
}

#illust-contest .mainBox .winner .profile img {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto 10px;
  background: #fff;
  border: 6px solid #fff;
  -webkit-box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
          box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

#illust-contest .mainBox .winner .profile p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #222;
  font-weight: 700;
  text-align: left;
  margin-left: 2.8rem;
}

#illust-contest .mainBox .winner .comment {
  padding-top: 2px;
  z-index: 2;
}

#illust-contest .mainBox .winner .comment .comment__title {
  display: block;
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  font-size: 1.2rem;
}

#illust-contest .mainBox .winner .comment .bubble {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 16px 18px;
  -webkit-box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
  font-size: 1.2rem;
  /* 強調見出し(質問部分)を段落っぽく見せる */
  /* しっぽ：画像の中心付近に来るように少し下げて大きめに */
}

#illust-contest .mainBox .winner .comment .bubble strong {
  display: block;
  margin: 0.4em 0 0.1em;
  font-weight: 900;
  color: #222;
  line-height: 1.5;
}

#illust-contest .mainBox .winner .comment .bubble::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 45px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 18px solid #fff;
}

#illust-contest .mainBox .winner .comment .bubble p {
  margin: 0;
  line-height: 1.9;
}

@media (max-width: 720px) {
  #illust-contest .mainBox .winner {
    -ms-grid-columns: 130px 230px;
        grid-template-columns: 130px 230px;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  #illust-contest .mainBox .winner {
    -ms-grid-columns: 130px 200px;
        grid-template-columns: 130px 200px;
    gap: 15px;
  }
}

.illust-contest__gallery-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/about_bg.webp) no-repeat center center/cover;
  -webkit-clip-path: polygon(0 11rem, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 11rem, 100% 0, 100% 100%, 0 100%);
}

.illust-contest__galleryBox {
  padding: 1rem 1rem 4rem;
  position: relative;
  margin-top: -22em;
  z-index: 1;
}

.illust-contest__galleryBox .lead-row {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 14px;
  margin-top: 10em;
}

.illust-contest__galleryBox .lead-icon {
  width: 44px;
  height: 44px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 44px;
          flex: 0 0 44px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.illust-contest__galleryBox .lead {
  margin: 0;
  font-weight: 900;
  color: #333;
  line-height: 1.6;
  /*font-size: clamp(16px, 2.4vw, 22px);*/
  font-size: .88em;
}

@media (max-width: 560px) {
  .illust-contest__galleryBox .lead-row {
    gap: 10px;
    padding: 8px 12px;
  }
  .illust-contest__galleryBox .lead-icon {
    width: 36px;
    height: 36px;
    -ms-flex-preferred-size: 36px;
        flex-basis: 36px;
  }
  .illust-contest__galleryBox .lead {
    line-height: 1.5;
  }
}

.illust-contest__galleryBox .ctaBox {
  margin-top: 2rem;
}

.illust-contest__galleryBox .illust-contest__gallery {
  position: relative;
  /* ギャラリー */
  /* 狭い画面は2列 → 1列 */
}

.illust-contest__galleryBox .illust-contest__gallery ul {
  /* 中央寄せ＋幅制限 */
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  list-style: none;
  /* 可変グリッド（2～4列） */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.illust-contest__galleryBox .illust-contest__gallery li {
  /* カード感 */
  background: #fff;
  /*border-radius: 14px;*/
  -webkit-box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  isolation: isolate;
  /* 影のにじみ防止 */
  /* 画像 */
}

.illust-contest__galleryBox .illust-contest__gallery li img {
  display: block;
  width: 100%;
  height: auto;
  /* 元比率を活かす（すべて同寸ならOK） */
  -webkit-transition: -webkit-transform 0.35s ease, -webkit-filter 0.35s ease;
  transition: -webkit-transform 0.35s ease, -webkit-filter 0.35s ease;
  transition: transform 0.35s ease, filter 0.35s ease;
  transition: transform 0.35s ease, filter 0.35s ease, -webkit-transform 0.35s ease, -webkit-filter 0.35s ease;
}

@media (max-width: 720px) {
  .illust-contest__galleryBox .illust-contest__gallery ul {
    gap: 12px;
  }
}

#gakubu {
  margin-top: -8rem;
}

#gakubu .mainBox {
  background: url(../img/summary_top.webp) no-repeat bottom/100% auto, url(../img/bg_gakubu2.webp) top -23rem center/100% auto, url(../img/bg_gakubu.webp) no-repeat top -20rem center/100% auto, url(../img/bg_gakubu.webp) no-repeat bottom -27rem center/100% auto, #ffea9b;
  padding: 0rem 0 6rem;
}

#gakubu .mainBox h2 {
  position: relative;
  padding-bottom: 0;
}

#gakubu .mainBox .warrie {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  margin: 0 5%;
  gap: 1rem;
  row-gap: 3rem;
}

#gakubu .mainBox .warrie li .baloon {
  border-radius: 1rem;
  background: #fff;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.5;
  padding: 0.5rem 1rem;
  color: #2e3192;
  position: relative;
  height: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#gakubu .mainBox .warrie li .baloon:after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background: #fff;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%);
  position: absolute;
  bottom: -1rem;
  left: 2rem;
}

#gakubu .mainBox .warrie li figure {
  text-align: center;
}

#gakubu .mainBox .warrie li figure .student {
  width: 80%;
  padding-block: 1rem;
}

#gakubu .mainBox .warrie li figure .arrow {
  width: 30%;
}

#gakubu .mainBox .warrie li .title {
  color: #2e3192;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  line-height: 1.3;
}

#gakubu .mainBox .warrie li .title span {
  font-family: "Oswald";
  font-weight: 400;
  font-size: 4rem;
  padding-bottom: 0.3rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 0.7;
}

#gakubu .mainBox .warrie li .text {
  color: #3f3f3f;
  font-size: 1.2rem;
}

#gakubu .mainBox .subText {
  padding: 0 0 4rem;
  width: 90%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.4rem;
}

#gakubu .mainBox .subText li {
  font-size: 1.7rem;
  font-weight: bold;
  background: #2e3192;
  color: #fff;
  line-height: 1.2;
}

#gakubu .mainBox .lead {
  width: 90%;
  margin: 0 auto 3rem;
}

#gakubu .mainBox h3 {
  padding-bottom: 2rem;
}

#gakubu .mainBox .points {
  width: 90%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
}

#gakubu .mainBox .points > div {
  display: -ms-grid;
  display: grid;
  -webkit-column-gap: 1rem;
          column-gap: 1rem;
  row-gap: 0.6rem;
      grid-template-areas: "c a"
 "c b";
  -ms-grid-rows: 3rem auto;
      grid-template-rows: 3rem auto;
}

#gakubu .mainBox .points > div dt {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: a;
  font-size: 2rem;
  font-weight: bold;
}

#gakubu .mainBox .points > div dt span {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, #ffed3f), to(#ffed3f));
  background: linear-gradient(transparent 70%, #ffed3f 70%, #ffed3f 100%);
}

#gakubu .mainBox .points > div .text {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: b;
}

#gakubu .mainBox .points > div .thumb {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: c;
  width: 14rem;
}

#summary {
  background: #2e3192;
  text-align: center;
  padding-block: 2rem;
  color: #fff;
  font-size: 1.2rem;
  position: relative;
}

#summary .arrow {
  position: absolute;
  width: calc(168 / 768 * 100%);
  margin: -5.5rem auto auto auto;
  left: 0;
  right: 0;
}

#summary .title {
  width: calc(690 / 768 * 100%);
  margin-bottom: 0.5rem;
}

#summary .title2 {
  margin-top: -1rem;
}

#select {
  position: relative;
}

#select .mainBox {
  background: url(../img/summary_bottom.webp) no-repeat top/100% auto, url(../img/summary_top.webp) no-repeat bottom/100% auto, url(../img/bg_learn.webp) no-repeat top -20rem center/100% auto, url(../img/bg_learn.webp) no-repeat bottom -28rem center/100% auto, -webkit-gradient(linear, left top, right top, from(#c5ee9a), color-stop(62%, #73ee9b));
  background: url(../img/summary_bottom.webp) no-repeat top/100% auto, url(../img/summary_top.webp) no-repeat bottom/100% auto, url(../img/bg_learn.webp) no-repeat top -20rem center/100% auto, url(../img/bg_learn.webp) no-repeat bottom -28rem center/100% auto, linear-gradient(to right, #c5ee9a 0%, #73ee9b 62%);
  padding: 7rem 0 8rem;
}

#select .mainBox h2 {
  position: relative;
}

#learn {
  position: relative;
}

#learn .mainBox {
  background: url(../img/summary_bottom.webp) no-repeat top/100% auto, url(../img/bg_learn.webp) no-repeat top -20rem center/100% auto, url(../img/bg_learn.webp) no-repeat bottom -27rem center/100% auto, #7bd9ff;
  padding: 4.5rem 0 6rem;
  color: #2e3192;
}

#learn .mainBox h2 {
  position: relative;
}

#learn .mainBox .lead {
  text-align: center;
  padding: 0 5%;
}

#learn .mainBox .week {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: max-content 1fr 1fr;
      grid-template-columns: -webkit-max-content 1fr 1fr;
      grid-template-columns: max-content 1fr 1fr;
  line-height: 1.2;
  margin: 3rem 5% 0;
  background: #e5e5e5;
}

#learn .mainBox .week dt,
#learn .mainBox .week dd {
  padding: 0.9rem;
}

#learn .mainBox .week dt {
  background: #2e3192;
  text-align: center;
  color: #fff;
}

#learn .mainBox .week dt.lineR {
  border-right: #fff solid 1px;
}

#learn .mainBox .week dd {
  color: #3f3f3f;
  font-size: 1.3rem;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: #3f3f3f dashed 1px;
}

#learn .mainBox .week dd.anime {
  border-right: #3f3f3f dashed 1px;
}

#learn .mainBox .week dd.lastline {
  border-bottom: none;
}

#learn .mainBox .week dd.dayof1, #learn .mainBox .week dd.dayof2, #learn .mainBox .week dd.dayof3, #learn .mainBox .week dd.dayof4, #learn .mainBox .week dd.dayof5 {
  color: #fff;
  border: none;
}

#learn .mainBox .week dd.dayof1 {
  background: #ed669d;
}

#learn .mainBox .week dd.dayof2 {
  background: #ef9d60;
}

#learn .mainBox .week dd.dayof3 {
  background: #bad868;
}

#learn .mainBox .week dd.dayof4 {
  background: #5ecc5e;
}

#learn .mainBox .week dd.dayof5 {
  background: #69ccc5;
}

#learn .mainBox .tri {
  text-align: center;
  padding: 1rem 0 4rem;
}

#learn .mainBox .tri p {
  display: block;
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  z-index: 1;
  position: relative;
  padding-top: 0.5rem;
  font-weight: bold;
}

#learn .mainBox .tri::before {
  content: "";
  display: block;
  position: absolute;
  width: 11rem;
  height: 6rem;
  background: #d9f1ff;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 0;
  margin: auto;
  left: 0;
  right: 0;
}

#learn .mainBox .learnImg1 {
  width: calc(508 / 768 * 100%);
  margin: 0 auto 3rem;
  display: block;
}

#learn .mainBox .learnImg2 {
  width: calc(700 / 768 * 100%);
  margin: 0 auto 3rem;
  display: block;
}

.bt_menjoBox {
  position: relative;
  width: calc(678 / 768 * 100%);
  margin: 3rem auto 0;
}

.bt_menjoBox .bt_menjo {
  display: block;
}

.bt_menjoBox .bt_menjo-baloon {
  position: absolute;
  width: calc(96 / 768 * 100%);
  right: -1.5rem;
  top: -2rem;
}

#menjo .mainBox {
  color: #fff;
  background: #2c5db9;
  padding: 6rem 0 8rem;
}

#menjo .mainBox h2 {
  position: relative;
}

#menjo .mainBox .menjoList {
  padding: 3rem 5% 0;
  font-size: 1.4rem;
}

#menjo .mainBox .menjoList div {
  padding-bottom: 2rem;
}

#menjo .mainBox .menjoList div dt {
  font-size: 1.6rem;
  font-weight: bold;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr max-content 1fr;
      grid-template-columns: 1fr -webkit-max-content 1fr;
      grid-template-columns: 1fr max-content 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1rem;
}

#menjo .mainBox .menjoList div dt span {
  display: block;
  padding: 0 1rem;
}

#menjo .mainBox .menjoList div dt::before, #menjo .mainBox .menjoList div dt::after {
  content: "";
  display: block;
  height: 1px;
  background: #fff;
}

#menjo .mainBox .menjoList div dd.strong {
  font-weight: bold;
  margin-top: 2rem;
}

#menjo .mainBox .menjoList div.attention {
  padding: 0;
}

#menjo .mainBox .menjoList div.attention dd {
  font-size: 1.2rem;
  text-indent: -1em;
  padding-left: 1em;
}

.details {
  margin-top: 2rem;
}

.details[open] .details__summary::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.details[open] .more {
  -webkit-transition: all 0.5s ease 0.3s;
  transition: all 0.5s ease 0.3s;
  opacity: 1;
}

.details .details__summary {
  width: auto;
  line-height: 2;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1rem 3rem 1rem 5rem;
  position: relative;
  display: block;
  cursor: pointer;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 90%;
  border: #fff solid 1px;
}

.details .details__summary::-webkit-details-marker {
  display: none;
}

.details .details__summary::before {
  display: block;
  content: "";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  top: calc(50% - 0.35rem);
  right: 1.5rem;
  width: 1rem;
  height: 1rem;
  border-top: 0.25rem solid #fff;
  border-left: 0.25rem solid #fff;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform-origin: 0.35rem 0.35rem;
          transform-origin: 0.35rem 0.35rem;
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}

.details .details__content {
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem 0rem 2rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#principal {
  position: relative;
}

#principal .mainBox {
  background: url(../img/bg_principal.webp) top/10% auto, #c23a2e;
  padding: 4.5rem 0 26rem;
  color: #fff;
}

#principal .mainBox h2 {
  width: calc(592 / 768 * 100%);
  position: relative;
}

#principal .mainBox .subText {
  padding: 0 0 2rem;
  width: 90%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.4rem;
}

#principal .mainBox .subText li {
  font-size: 1.7rem;
  font-weight: bold;
  background: #9b000f;
  color: #fff;
  line-height: 1.2;
}

#principal .mainBox .lead {
  width: 90%;
  margin: 0 auto 3rem;
  position: relative;
}

#principal .mainBox .lead .principalImg {
  width: calc(194 / 768 * 100%);
  position: absolute;
  bottom: -4rem;
  right: 0;
}

#campaign {
  margin-top: 0;
}

#campaign .mainBox {
  padding-top: 17rem;
  padding-bottom: 23rem;
  background: #f4f2c9;
}

#campaign .mainBox dl {
  width: 90%;
  margin: auto;
  padding-bottom: 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
}

#campaign .mainBox dl dt {
  text-align: center;
  font-size: 1.2rem;
  padding-bottom: 1rem;
}

#campaign .mainBox dl dd a {
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0.3rem 0.3rem 0;
          box-shadow: rgba(0, 0, 0, 0.3) 0.3rem 0.3rem 0;
}

#about {
  margin-top: -14rem;
}

#about h2 {
  width: calc(544 / 768 * 100%);
  padding: 0;
  margin: auto;
  left: 0;
  right: 0;
  top: -8rem;
}

#about > figure {
  margin-top: -9rem;
  width: calc(178 / 768 * 100%);
  right: 3rem;
  position: absolute;
  display: block;
  z-index: 1;
}

#about .mainBox {
  padding: 18rem 0 12rem;
  -webkit-clip-path: polygon(0 11rem, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 11rem, 100% 0, 100% 100%, 0 100%);
}

#about .mainBox > figure {
  margin-top: -4rem;
  width: calc(248 / 768 * 100%);
  position: absolute;
  display: block;
}

#about .mainBox::before {
  content: "";
  top: 0;
  left: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  background: url(../img/about_bg.webp) repeat-y top/100% auto;
  z-index: -1;
}

#about .mainBox .copy {
  text-align: center;
}

#about .mainBox .copy span {
  background: #fff;
  line-height: 2.4;
}

#about .mainBox .copy span.strong {
  color: #b89435;
  font-size: 4rem;
  font-weight: 600;
  font-family: "Oswald";
  line-height: 1.6;
  background: none;
}

#about .mainBox .prizes {
  margin: 5rem auto 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 4rem;
}

#about .mainBox .prizes li {
  font-size: 2rem;
  width: 70%;
  margin: 0 auto;
  padding: 0 4rem;
  position: relative;
  color: #b89435;
  line-height: 1;
  text-align: center;
  font-weight: bold;
}

#about .mainBox .prizes li .S {
  font-size: 2rem;
}

#about .mainBox .prizes li .L {
  font-size: 7rem;
  font-family: "Oswald";
  font-weight: 900;
}

#about .mainBox .prizes li .LL {
  font-size: 9rem;
  font-family: "Oswald";
  font-weight: 900;
}

#about .mainBox .prizes li::before, #about .mainBox .prizes li::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 6rem;
  height: 100%;
  top: 0;
  aspect-ratio: 10/20;
  margin: 0 2rem;
  background: url(../img/bg_prize.webp) no-repeat top/auto 100%;
  left: 0;
}

#about .mainBox .prizes li::after {
  -webkit-transform: scaleX(-100%);
          transform: scaleX(-100%);
  right: 0;
  left: auto;
}

#about .mainBox .lead {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  padding-bottom: 1rem;
}

#about .mainBox .swiper {
  padding-bottom: 3rem;
}

#about .mainBox .swiper .swiper-slide {
  text-align: center;
}

#about .mainBox .swiper .swiper-slide iframe {
  width: 90% !important;
  max-width: 414px;
  height: auto;
  aspect-ratio: 9 / 16;
}

:root {
  --swiper-navigation-size: 44px;
}

.swiper-button-next,
.swiper-button-prev {
  color: #333;
  right: var(--swiper-navigation-sides-offset, 0);
  left: auto;
  position: absolute;
  top: var(--swiper-navigation-top-offset, 49%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: "next";
  color: #3f3f3f;
  background: #f9db26;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 2rem;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1rem;
  margin: auto 1rem;
  font-size: 1.6rem;
  font-weight: bold;
  font-family: swiper-icons;
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 0);
  right: auto;
}

.swiper-button-prev::after {
  content: "prev";
}

.slide-navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-top: 2rem;
  margin: 0 auto;
  gap: 2rem;
}

.slide-navigation .item {
  width: 2rem;
  height: 2rem;
  background-color: #f9db26;
  cursor: pointer;
}

.slide-navigation .item.is-active {
  background-color: #fff;
  cursor: default;
}

.spCTABtnBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.ctaBox {
  position: relative;
  z-index: 1;
  width: 100%;
}

.ctaBox.gakubu {
  position: absolute;
  top: 0.5rem;
}

.ctaBox.select {
  position: absolute;
  top: 0rem;
}

.ctaBox.principal {
  position: absolute;
  top: -2rem;
}

.ctaBox .captionBox {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  padding: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.ctaBox .captionBox .caption {
  font-size: 1.4rem;
  font-weight: bold;
  padding-bottom: 1rem;
}

.ctaBox .captionBox .caption p {
  color: #674987;
  font-weight: bold;
  line-height: 1.4;
  padding-top: 0.2rem;
  font-size: 2rem;
}

.ctaBox .captionBox .caption p span {
  -webkit-text-decoration: underline wavy #e9c063;
          text-decoration: underline wavy #e9c063;
}

.ctaBox .captionBox img {
  width: 30%;
  z-index: 1;
}

.ctaBox .ctaBtn {
  color: #2e3192;
  width: calc(700 / 768 * 100%);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: -1rem auto 0;
  position: relative;
  display: block;
  -webkit-animation: anim_btn 1.9s ease-in-out 0s infinite;
          animation: anim_btn 1.9s ease-in-out 0s infinite;
  background: #FFED3F;
  color: #000;
  border: #c23a2e 3px solid;
  padding: 1.5rem 4rem 1.5rem 1rem;
  border-radius: 6rem;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
          box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
}

.ctaBox .ctaBtn span {
  position: absolute;
  border: #2e3192 2px solid;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50%;
  line-height: 1.2;
  width: 5rem;
  height: 5rem;
  top: -1.2rem;
  left: -1rem;
  background: #ffed3f;
  font-size: 1.2rem;
  color: #2e3192;
  rotate: -8deg;
}

.ctaBox .ctaBtn.yellow {
  color: #2e3192;
  background: #ffed3f;
}

.ctaBox .ctaBtn.yellow span {
  color: #2e3192;
  background: #fff;
}

.ctaBox .ctaBtn::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-top: 2px solid #c23a2e;
  border-right: 2px solid #c23a2e;
  rotate: 45deg;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 2rem;
}

@-webkit-keyframes anim_btn {
  0% {
    left: 0;
  }
  10% {
    left: 0.25rem;
  }
  20% {
    left: -0.25rem;
  }
  30% {
    left: 0.5rem;
  }
  40% {
    left: -0.5rem;
  }
  50% {
    left: 0.25rem;
  }
  60% {
    left: -0.25rem;
  }
  70% {
    left: 0;
  }
}

@keyframes anim_btn {
  0% {
    left: 0;
  }
  10% {
    left: 0.25rem;
  }
  20% {
    left: -0.25rem;
  }
  30% {
    left: 0.5rem;
  }
  40% {
    left: -0.5rem;
  }
  50% {
    left: 0.25rem;
  }
  60% {
    left: -0.25rem;
  }
  70% {
    left: 0;
  }
}

#fixdBtnSP,
#fixdBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
  width: 100%;
  max-width: 768px;
  bottom: 0;
  opacity: 1;
  z-index: 10;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}

#fixdBtnSP.is-bnrHide,
#fixdBtn.is-bnrHide {
  opacity: 0;
  pointer-events: none;
}

#fixdBtnSP a,
#fixdBtn a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 6rem;
  font-size: 1.4rem;
  font-weight: bold;
  -webkit-animation: anim_btn_trace 2s ease 0s infinite;
          animation: anim_btn_trace 2s ease 0s infinite;
}

#fixdBtnSP a:nth-of-type(2),
#fixdBtn a:nth-of-type(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

#fixdBtnSP .fixdBtn_campus,
#fixdBtn .fixdBtn_campus {
  background: linear-gradient(45deg, #c23a2e 25%, #d76908 25%, #d76908 50%, #c23a2e 50%, #c23a2e 75%, #d76908 75%, #d76908);
  background-size: 4rem 4rem;
  -webkit-animation: anim_btn_trace_wide 2s ease 0s infinite,
 anime_stripeBtn 0.8s infinite linear;
          animation: anim_btn_trace_wide 2s ease 0s infinite,
 anime_stripeBtn 0.8s infinite linear;
  color: #fff;
  position: relative;
}

@-webkit-keyframes anime_stripeBtn {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: -4rem;
  }
}

@keyframes anime_stripeBtn {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: -4rem;
  }
}

#fixdBtnSP .fixdBtn_campus span,
#fixdBtn .fixdBtn_campus span {
  color: #3f3f3f;
  width: 3.4rem;
  height: 3.4rem;
  aspect-ratio: 1/1;
  font-size: 1rem;
  padding: 1rem;
  top: -4rem;
  right: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  background: #fcee21;
  border-radius: 50%;
  -webkit-filter: drop-shadow(0px 1px 1px black);
          filter: drop-shadow(0px 1px 1px black);
  -webkit-transform: rotate(6deg);
          transform: rotate(6deg);
  line-height: 1.2;
}

#fixdBtnSP .fixdBtn_campus span::after,
#fixdBtn .fixdBtn_campus span::after {
  content: "";
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #fcee21;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -0.5rem;
}

#fixdBtnSP .fixdBtn_info,
#fixdBtn .fixdBtn_info {
  background: #fff;
  color: #000;
  border: solid 0.2rem #3f3f3f;
}

#fixdBtn {
  display: none;
}

#fixdBtnSP {
  position: relative;
  bottom: auto;
}

#fixdBtnSP a {
  -webkit-animation: none;
          animation: none;
  line-height: 1.3;
}

#fixdBtnSP a.fixdBtn_campus {
  -webkit-animation: anime_stripeBtn 0.8s infinite linear;
          animation: anime_stripeBtn 0.8s infinite linear;
}

#fixdBtnSP a.fixdBtn_campus span {
  top: -4.5rem;
  right: 0.8rem;
}

@-webkit-keyframes anim_btn_trace {
  0% {
    height: 6rem;
  }
  10% {
    height: 6.2rem;
  }
  20% {
    height: 5.8rem;
  }
  30% {
    height: 6.4rem;
  }
  40% {
    height: 5.6rem;
  }
  50% {
    height: 6.2rem;
  }
  60% {
    height: 5.8rem;
  }
  70% {
    height: 6rem;
  }
  100% {
    height: 6rem;
  }
}

@keyframes anim_btn_trace {
  0% {
    height: 6rem;
  }
  10% {
    height: 6.2rem;
  }
  20% {
    height: 5.8rem;
  }
  30% {
    height: 6.4rem;
  }
  40% {
    height: 5.6rem;
  }
  50% {
    height: 6.2rem;
  }
  60% {
    height: 5.8rem;
  }
  70% {
    height: 6rem;
  }
  100% {
    height: 6rem;
  }
}

@-webkit-keyframes anim_btn_trace_wide {
  0% {
    padding: 0 2rem;
  }
  10% {
    padding: 0 2.1rem;
  }
  20% {
    padding: 0 1.9rem;
  }
  30% {
    padding: 0 2.2rem;
  }
  40% {
    padding: 0 1.8rem;
  }
  50% {
    padding: 0 2.1rem;
  }
  60% {
    padding: 0 1.9rem;
  }
  70% {
    padding: 0 2rem;
  }
  100% {
    padding: 0 2rem;
  }
}

@keyframes anim_btn_trace_wide {
  0% {
    padding: 0 2rem;
  }
  10% {
    padding: 0 2.1rem;
  }
  20% {
    padding: 0 1.9rem;
  }
  30% {
    padding: 0 2.2rem;
  }
  40% {
    padding: 0 1.8rem;
  }
  50% {
    padding: 0 2.1rem;
  }
  60% {
    padding: 0 1.9rem;
  }
  70% {
    padding: 0 2rem;
  }
  100% {
    padding: 0 2rem;
  }
}

.pc_content {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto auto auto;
      grid-template-rows: auto auto auto;
}

.pc_content .logoBox {
  width: calc((100% - 504px) / 2);
  position: relative;
  padding: 8rem 2rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.pc_content .logoBox .logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.5rem 0rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  gap: 4%;
  width: 18rem;
}

.pc_content .logoBox .logos .logo {
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.pc_content .logoBox .logos .logo_batsu {
  width: 4%;
}

.pc_content .logoBox .logos .logo2 {
  width: 60%;
}

.pc_content .logoBox .title {
  width: 28rem;
}

.pc_content nav {
  width: calc((100% - 504px) / 2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.pc_content nav .pageNavi {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 1rem;
  padding: 2rem;
  -webkit-clip-path: polygon(0 8%, 12% 0%, 92% 5%, 100% 9%, 94% 96%, 14% 100%, 2% 93%);
          clip-path: polygon(0 8%, 12% 0%, 92% 5%, 100% 9%, 94% 96%, 14% 100%, 2% 93%);
}

.pc_content nav .pageNavi li a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #3f3f3f;
  padding-left: 1.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  background: url(../img/ico_link.webp) no-repeat left center/1rem auto;
  display: block;
}

.pc_content .slider-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.pc_content .slider-wrapper .slider {
  -webkit-animation: scroll-left 10s infinite linear 0.5s both;
          animation: scroll-left 10s infinite linear 0.5s both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.pc_content .slider-wrapper .slider .slide {
  width: calc(100vw / 6);
  /* 画面内に表示するスライドの枚数 */
  display: block;
}

.pc_content .slider-wrapper .slider .slide img {
  width: 100%;
}

footer {
  padding-bottom: 6rem;
  background: #e60012;
  overflow: hidden;
}

footer a {
  display: block;
  padding: 5rem 7rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #fff;
}

footer address {
  color: #fff;
  font-style: normal;
  font-size: 1rem;
  text-align: center;
  background: #e60012;
  padding: 0.5rem 0;
  border-top: #e67590 solid 1rem;
  position: relative;
}

.attention {
  padding: 0.5rem 5% 2rem;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: left;
}

.attention li {
  padding-left: 1em;
}

.attention li::before {
  content: "※";
  display: inline-block;
  text-indent: -1em;
}

.sp-menu .sp-menu__box {
  -webkit-transition: all 500ms;
  transition: all 500ms;
  position: fixed;
  height: 4rem;
  width: 4rem;
  top: 0.5rem;
  right: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 90;
  background: #fff;
  cursor: pointer;
  border: #fff 1px solid;
}

.sp-menu .sp-menu__box.on {
  border: 1px solid #fff;
  top: 1rem;
  right: 1rem;
  left: auto;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

.sp-menu .sp-menu__box span, .sp-menu .sp-menu__box:before, .sp-menu .sp-menu__box:after {
  content: "";
  display: block;
  height: 0.2rem;
  width: 80%;
  border-radius: 0.5rem;
  background: #666;
}

.sp-menu #sp-menu__check {
  display: none;
}

.sp-menu #sp-menu__check:checked ~ .sp-menu__box {
  background: #fffde9;
  border: none;
}

.sp-menu #sp-menu__check:checked ~ .sp-menu__box span {
  background: rgba(255, 255, 255, 0);
}

.sp-menu #sp-menu__check:checked ~ .sp-menu__box::before {
  position: absolute;
  -webkit-transform: translateY(100%) rotate(45deg);
          transform: translateY(100%) rotate(45deg);
  margin-bottom: 0.5rem;
}

.sp-menu #sp-menu__check:checked ~ .sp-menu__box::after {
  position: absolute;
  -webkit-transform: translateY(100%) rotate(-45deg);
          transform: translateY(100%) rotate(-45deg);
  margin-bottom: 0.5rem;
}

.sp-menu #sp-menu__check:checked ~ .sp-menu__content {
  left: auto;
  right: 0;
}

.sp-menu .sp-menu__content {
  width: 40%;
  height: 100%;
  position: fixed;
  top: 0;
  right: -40%;
  z-index: 80;
  background: #fffde9;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  padding: 0;
}

.sp-menu .sp-menu__content .bn_box {
  padding: 1rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.sp-menu .sp-menu__content .bn_box .bn_sq {
  font-size: 2rem;
  font-weight: 700;
  padding: 1rem 1rem 1rem 2rem;
  background: #dcd1e1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-left: solid 1rem #a401ff;
  -webkit-box-shadow: 0.5rem 0.5rem 0 rgba(1, 1, 1, 0.3);
          box-shadow: 0.5rem 0.5rem 0 rgba(1, 1, 1, 0.3);
  line-height: 1.4;
  color: #fff;
}

.sp-menu .sp-menu__content .bn_box .bt_hakkutsu {
  padding: 1.6rem 3.8rem 1.6rem 6rem;
}

.sp-menu .sp-menu__list {
  padding: 5rem 0 0;
  text-align: center;
  width: 80%;
  margin: 0 auto;
}

.sp-menu .sp-menu__list dt {
  font-size: 3.6rem;
  font-family: "Oswald";
  font-weight: bold;
  margin-bottom: -2rem;
}

.sp-menu .sp-menu__list .sp-menu__item {
  border-bottom: dotted 0.2rem #d3ca85;
  list-style: none;
  font-size: 1.2rem;
  display: block;
}

.sp-menu .sp-menu__list .sp-menu__item:last-of-type {
  border: none;
}

.sp-menu .sp-menu__list .sp-menu__item .sp-menu__link {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #000;
  text-align: left;
  text-decoration: none;
  padding: 1rem 0 1rem 2rem;
  background: url(../img/ico_link.webp) no-repeat left center/auto 1rem;
}

.charaScrBox {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp-menu .sp-menu__content {
    width: 100%;
    right: -100%;
  }
  #container {
    max-width: 768px;
  }
  #fixdBtn {
    max-width: 768px;
  }
  #fixdBtn .fixdBtn_campus {
    -webkit-animation: anim_btn_trace 2s ease 0s infinite,
 anime_stripeBtn 0.8s infinite linear;
            animation: anim_btn_trace 2s ease 0s infinite,
 anime_stripeBtn 0.8s infinite linear;
  }
  .pc_content {
    display: none;
  }
  #about .mainBox .swiper .swiper-slide iframe {
    width: 82% !important;
  }
}

@media screen and (min-width: 769px) {
  .sp {
    display: none;
  }
  .sp-menu .sp-menu__content {
    width: 504px;
    right: -504px;
  }
  body {
    background: url(../img/bg_weathering.webp) top left, linear-gradient(140deg, #89f9f5 24%, #fffcf2 48%, #ffe7a2 94%);
    background-blend-mode: screen, overlay;
    background-attachment: fixed;
  }
  header {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden;
  }
  #about .mainBox::before {
    width: 504px;
    margin: 0 auto;
  }
  #container {
    -webkit-box-shadow: rgba(60, 40, 1, 0.3) 0px 0px 54px;
            box-shadow: rgba(60, 40, 1, 0.3) 0px 0px 54px;
    max-width: 504px;
    margin: 0 auto;
  }
  .pc_content {
    display: none;
  }
  /*
    #fixdBtn {
        max-width: 504px;
        margin: 0 auto;
    }
        */
  #fixdBtn {
    max-width: 504px;
  }
  #fixdBtn a {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 4.5rem;
  }
  #fixdBtn a.fixdBtn_campus {
    -webkit-animation: anim_btn_trace 2s ease 0s infinite,
 anime_stripeBtn 0.8s infinite linear;
            animation: anim_btn_trace 2s ease 0s infinite,
 anime_stripeBtn 0.8s infinite linear;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
}

@media screen and (min-width: 1240px) {
  .pc_content {
    display: -ms-grid;
    display: grid;
  }
  .sp-menu {
    display: none;
  }
  #fixdBtn {
    display: -ms-grid;
    display: grid;
    bottom: 5vh;
    right: 0;
    width: auto;
    justify-items: end;
    gap: 0.5rem;
    -webkit-transform: skewY(-7deg);
            transform: skewY(-7deg);
  }
  #fixdBtn a {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 4.5rem;
    -webkit-animation: anim_btn_trace_wide 2s ease 0s infinite;
            animation: anim_btn_trace_wide 2s ease 0s infinite;
    padding: 0 3rem;
  }
  #fixdBtn a.fixdBtn_info {
    border: none;
  }
  #fixdBtn a.fixdBtn_campus {
    -webkit-animation: anim_btn_trace_wide 2s ease 0s infinite,
 anime_stripeBtn 0.8s infinite linear;
            animation: anim_btn_trace_wide 2s ease 0s infinite,
 anime_stripeBtn 0.8s infinite linear;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
  #fixdBtn a.fixdBtn_campus span {
    top: -4.5rem;
    left: -2.5rem;
    -webkit-transform: rotate(-6deg);
            transform: rotate(-6deg);
  }
  #fixdBtn a.fixdBtn_campus::before, #fixdBtn a.fixdBtn_campus::after {
    content: "　　";
    display: inline;
  }
  footer {
    margin-bottom: 0;
  }
  .charaScrBox {
    top: 0;
    right: 0;
    width: calc(50% - 250px);
    height: 100vh;
    position: fixed;
    z-index: 1;
    display: block;
  }
  .charaScrBox::after {
    content: "";
    position: absolute;
    display: block;
    z-index: 1001;
    width: 100%;
    height: 100%;
  }
  .charaScrBox .charaScr {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 100vh);
            transform: translate(-50%, 100vh);
    -webkit-transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
    transition: opacity 0.8s ease, -webkit-transform 0.8s ease;
    transition: transform 0.8s ease, opacity 0.8s ease;
    transition: transform 0.8s ease, opacity 0.8s ease, -webkit-transform 0.8s ease;
    width: 100px;
    height: 100px;
    background-color: coral;
    z-index: 1000;
    opacity: 0;
  }
  .charaScrBox .charaScr.active {
    -webkit-transform: translate(-50%, calc(50vh - 50%));
            transform: translate(-50%, calc(50vh - 50%));
    opacity: 1;
  }
  .charaScrBox .charaScr.exit {
    -webkit-transform: translate(-50%, -100vh);
            transform: translate(-50%, -100vh);
    opacity: 0;
  }
  .charaScrBox .charaScr.charaScrA {
    width: 400px;
    height: 400px;
    background: url(../img/charaA.webp);
  }
  .charaScrBox .charaScr.charaScrB {
    width: 400px;
    height: 400px;
    background: url(../img/charaB.webp);
  }
  .charaScrBox .charaScr.charaScrC {
    width: 400px;
    height: 400px;
    background: url(../img/charaC.webp);
  }
  .charaScrBox .charaScr.charaScrD {
    width: 400px;
    height: 400px;
    background: url(../img/charaD.webp);
  }
  .charaScrBox .charaScr.charaScrE {
    width: 400px;
    height: 400px;
    background: url(../img/charaE.webp);
  }
  .charaScrBox .charaScr.charaScrF {
    width: 400px;
    height: 400px;
    background: url(../img/charaF.webp);
  }
  .charaScrBox .charaScr.charaScrG {
    width: 400px;
    height: 400px;
    background: url(../img/charaB.webp);
  }
}

.sakura {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  pointer-events: none;
  z-index: 2;
}

.sakura li {
  width: 18px;
  position: absolute;
  list-style: none;
  top: -50px;
  -webkit-animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate;
          animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate;
}

@-webkit-keyframes fall {
  to {
    top: 120%;
  }
}

@keyframes fall {
  to {
    top: 120%;
  }
}

@-webkit-keyframes rotate1 {
  from {
    -webkit-transform: translateX(0px) rotate(0deg);
            transform: translateX(0px) rotate(0deg);
  }
  to {
    -webkit-transform: translateX(200px) rotate(-80deg) rotateX(180deg);
            transform: translateX(200px) rotate(-80deg) rotateX(180deg);
  }
}

@keyframes rotate1 {
  from {
    -webkit-transform: translateX(0px) rotate(0deg);
            transform: translateX(0px) rotate(0deg);
  }
  to {
    -webkit-transform: translateX(200px) rotate(-80deg) rotateX(180deg);
            transform: translateX(200px) rotate(-80deg) rotateX(180deg);
  }
}

@-webkit-keyframes rotate2 {
  from {
    -webkit-transform: translateX(200px) rotate(-45deg);
            transform: translateX(200px) rotate(-45deg);
  }
  to {
    -webkit-transform: translateX(0px) rotate(0deg);
            transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rotate2 {
  from {
    -webkit-transform: translateX(200px) rotate(-45deg);
            transform: translateX(200px) rotate(-45deg);
  }
  to {
    -webkit-transform: translateX(0px) rotate(0deg);
            transform: translateX(0px) rotate(0deg);
  }
}

.sakura li:nth-child(1) {
  left: 0;
  -webkit-animation: fall 10s linear infinite,
 rotate1 3s ease-in-out infinite alternate;
          animation: fall 10s linear infinite,
 rotate1 3s ease-in-out infinite alternate;
}

.sakura li:nth-child(2) {
  left: 5vw;
  -webkit-animation: fall 15s linear infinite,
 rotate1 2s ease-in-out infinite alternate;
          animation: fall 15s linear infinite,
 rotate1 2s ease-in-out infinite alternate;
}

.sakura li:nth-child(3) {
  left: 15vw;
  -webkit-animation: fall 9s linear infinite,
 rotate1 3.5s ease-in-out infinite alternate;
          animation: fall 9s linear infinite,
 rotate1 3.5s ease-in-out infinite alternate;
}

.sakura li:nth-child(4) {
  left: 30vw;
  -webkit-animation: fall 8s linear infinite,
 rotate2 4s ease-in-out infinite alternate;
          animation: fall 8s linear infinite,
 rotate2 4s ease-in-out infinite alternate;
}

.sakura li:nth-child(5) {
  left: 40vw;
  -webkit-animation: fall 10s linear infinite,
 rotate1 4s ease-in-out infinite alternate;
          animation: fall 10s linear infinite,
 rotate1 4s ease-in-out infinite alternate;
}

.sakura li:nth-child(6) {
  left: 55vw;
  -webkit-animation: fall 11s linear infinite,
 rotate2 3s ease-in-out infinite alternate;
          animation: fall 11s linear infinite,
 rotate2 3s ease-in-out infinite alternate;
}

.sakura li:nth-child(7) {
  left: 65vw;
  -webkit-animation: fall 5.5s linear infinite,
 rotate2 2.5s ease-in-out infinite alternate;
          animation: fall 5.5s linear infinite,
 rotate2 2.5s ease-in-out infinite alternate;
}

.sakura li:nth-child(8) {
  left: 75vw;
  -webkit-animation: fall 7s linear infinite,
 rotate1 3s ease-in-out infinite alternate;
          animation: fall 7s linear infinite,
 rotate1 3s ease-in-out infinite alternate;
}

.sakura li:nth-child(9) {
  left: 85vw;
  -webkit-animation: fall 12s linear infinite,
 rotate1 4s ease-in-out infinite alternate;
          animation: fall 12s linear infinite,
 rotate1 4s ease-in-out infinite alternate;
}

.sakura li:nth-child(10) {
  left: 95vw;
  -webkit-animation: fall 11.4s linear infinite,
 rotate2 3.8s ease-in-out infinite alternate;
          animation: fall 11.4s linear infinite,
 rotate2 3.8s ease-in-out infinite alternate;
}

.sakura li:nth-child(11) {
  left: 65vw;
  -webkit-animation: fall 6.8s linear infinite,
 rotate2 3.5s ease-in-out infinite alternate;
          animation: fall 6.8s linear infinite,
 rotate2 3.5s ease-in-out infinite alternate;
}

.sakura li:nth-child(12) {
  left: 50vw;
  -webkit-animation: fall 6s linear infinite,
 rotate1 2s ease-in-out infinite alternate;
          animation: fall 6s linear infinite,
 rotate1 2s ease-in-out infinite alternate;
}
/*# sourceMappingURL=index.css.map */