/*
Theme Name:開星中学・高等学校
Theme URI:
Author: takami
Author URI: https://yoshida-designbu.com
License: takami
*/

/*--------------
common
--------------*/
html {
  font-size:0.624vw;
}

@media print,screen and (max-width:1024px) {
  html {
    font-size:1.02vw;
  }
}

@media print,screen and (max-width: 768px) {
  html {
    font-size:1.44444vw;
  }
}

@media print,screen and (max-width: 521px) {
  html {
    font-size:2.666vw;
  }
}


*,
*::before,
*::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  --color-black:#222222;
  --color-white:#fefefe;
  --kaisei-green:#00956e;
  --kaisei-green50:#80cab6;
  --color-yellow:#d4db25;
  --color-red:#d61518;
  --color-red20:#f7d0d1;
  --color-gray:#dddddd;
  --color-hs:#009fe8;
  --color-jhs:#f4ce0f;
  --opacity-white:rgba(255,255,255,.9);
  --opacity-black:rgba(34,34,34,.5);
  --opacity-green:rgba(0,149,110,.5);
  --bs-black:4px 4px 8px rgba(34,34,34,.25);
  --bs-green:3px 3px 14px rgba(0,149,110,.4);
  --shadow-black:drop-shadow(3px 3px 8px rgba(34,34,34, 0.75));
  --shadow-green:drop-shadow(3px 3px 8px rgba(0,149,110, 0.75));
  --gradation:linear-gradient(97deg, rgba(255,251,224,1) 0%, rgba(224,243,238,1) 50%, rgba(224,243,252,1) 100%);
  --gradation-rgb:rgb(255,251,224);
  --bg:#f0f9f6;
  --font-20:2rem;
  --font-exTxt:1.83rem;
  --title214:min(2.14rem,4.6vw);
  --translate:translate(0, -6px);
  --transition:all .5s cubic-bezier(0.43, 0.05, 0.17, 1);
  --opacity:.6;
  --section-margin:13rem;
  --border-radius:min(2rem,4vw);
  --bg-padding:6rem;
}

body {
  font-size: 1.24rem;
  font-family: "Montserrat","Noto Sans JP",'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
  line-height: 1.75;
  letter-spacing: .14em;
  font-feature-settings:"palt";
  font-weight: 400;
  color: var(--color-black);
  background: var(--gradation);
  position: relative;
  animation: opacityAnimation .5s cubic-bezier(.55,.05,.22,.99) normal forwards;
  opacity: 0;
}

@keyframes opacityAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

a {
  text-decoration: none;
  color: var(--color-black);
  transition: var(--transition);
  font-weight: 500;
}

li{
  list-style: none;
}

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

table {
  clear: both;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

td,th{
  padding: min(1rem, 1.6vw);
  border: solid 1px var(--color-gray);
  line-height: 1.75;
}

.contents{
  margin: auto;
}

.title-flex{
  display: flex;
  align-items: end;
  gap: min(6rem, 4vw);
  margin-bottom: min(4rem, 5vw);
}

.contents-title{
  position: relative;
  color: var(--kaisei-green);
  font-size: min(4.83rem, 7.4vw);
  font-weight: 500;
  position: relative;
  margin-bottom: min(3rem, 6vw);
  line-height: 1.5;
  letter-spacing: .08em;
}

.title-flex .contents-title{
  margin-bottom: 0;
}

span.-title_en{
  font-weight: 500;
  font-size: min(2.4rem, 4vw);
  color: var(--kaisei-green50);
  display: block;
  letter-spacing: .06em;
  line-height: 1.3;
}

.title-wrap p{
  line-height: 2;
}

.line-title{
  position: relative;
  font-size: min(2.18rem,4.72vw);
  line-height: 1.5;
  padding-left: min(2.2rem, 5vw);
  font-weight: 600;
  margin-bottom: .6rem;
}
.line-title::before{
  position: absolute;
  content: "";
  background: var(--kaisei-green);
  width: min(1.4rem, 3vw);
  height: 2px;
  top: min(1.4rem, 3vw);
  left: 0;
}


/*---link---*/
.linkBox {
  text-align: center;
  font-weight: 500;
  border-radius: 9999px;
  padding: min(1.24rem, 2.4vw) min(2rem, 4vw);
  border: solid 1px var(--kaisei-green);
  color: var(--kaisei-green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(2rem, 2vw);
  line-height: 1.5;
}

.linkBox>.linkBox-arrow{
  width: min(1.4rem);
  height: min(1.4rem);
  display: block;
  transform: rotate(-90deg);
  transition: var(--transition);
}
.linkBox>.linkBox-arrow img{
  display: block;
}

.hoverRoll{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.hoverRoll-item1{
  display: block;
  width: 100%;
}
.hoverRoll-item2{
  display: block;
  width: 100%;
  transform: translateY(120%);
  position: absolute;
}

.linkBox-bg{
  background: var(--kaisei-green);
  color: var(--color-white);
  border-radius: 9999px;
  padding: min(2rem,4vw) min(7rem,14vw) min(2rem,4vw) min(3rem,6vw);
  position: relative;
  display: block;
  width: min(34rem, 80vw);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .05em;
}
.linkBox-bg::before,
.linkBox-bg::after{
  position: absolute;
  content: "";
  transition: var(--transition);
}
.linkBox-bg::before{
  background: var(--color-white);
  border-radius: 50%;
  width: min(4rem, 10vw);
  height: min(4rem, 10vw);
  right: min(.6rem, 1.4vw);
  top: 50%;
  transform: translateY(-50%);
}

.linkBox-bg::after{
  -webkit-mask: url(img/hn-arrow.svg);
  mask: url(img/hn-arrow.svg);
  -webkit-mask-size: auto;
  mask-size: auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-repeat: no-repeat;
  background-color: var(--kaisei-green);
  width: min(1.4rem, 4vw);
  height: min(1rem, 3vw);
  right: min(1.8rem, 4vw);
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

.linkBox-bg.--download::after{
  -webkit-mask: url(img/icon-download.svg);
  mask: url(img/icon-download.svg);
  width: min(1.6rem, 4.24vw);
  height: min(1.6rem, 4.24vw);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}
.linkBox-bg.--tab::after{
  -webkit-mask: url(img/icon-tab.svg);
  mask: url(img/icon-tab.svg);
  width: min(1.6rem, 4vw);
  height: min(1.6rem, 4vw);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

.linkBox-bg.noLinks{
  background: var(--color-gray)!important;
}

.linkBox-bg.noLinks::after,
.linkBox-bg.noLinks.--tab::after,
.linkBox-bg.noLinks.--download::after{
  background: var(--color-gray)!important;
}

.menuList-link li::before{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  background-color: var(--color-gray);
  left: 0;
  bottom: 0;
}

a.cardLink{
  display: flex;
  color: var(--kaisei-green)!important;
  background: var(--color-white);
  border-radius: var(--border-radius);
  align-items: center;
}
a.cardLink picture{
  display: block;
  width: 40%;
  height: 100%;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  transition: var(--transition);
  overflow: hidden;
  height: min(15rem, 14vw);
}
a.cardLink picture img{
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  transition: var(--transition);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cardLink-title{
  width: 60%;
  padding: 0 min(2rem,3vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cardLink-title p{
  font-size: min(1.83rem, 4vw);;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
}
.cardLink-title p>span.-title_en{
  display: block;
  font-size: min(1.4rem,3vw);
  padding-top: min(.8rem, .8vw);
}

.cardLink-title>.arrow-icon{
  width: min(4rem, 6vw);
  height: min(4rem, 6vw);
}
.cardLink-title>.arrow-icon .arrow{
  width: min(.8rem, 1.2vw);
  height: min(.8rem, 1.2vw);
}

.cardLink-pic{
  display: block;
  color: var(--color-white);
  border-radius: var(--border-radius);
  position: relative;
  aspect-ratio: 3 / 4;
  font-weight: 700;
}

.cardLink-pic>picture{
  display: block;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: var(--border-radius);
  transition: var(--transition);
  aspect-ratio: 3 / 4;
}
.cardLink-pic>picture::before {
  position: absolute;
  content: "";
  background: rgb(0, 149, 110);
  background: linear-gradient(0deg, rgba(0, 149, 110, 1) 0%, rgba(0, 149, 110, .14) 34%);
  width: 100%;
  height: 100%;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  transition: var(--transition);
  z-index: 2;
}

.cardLink-pic>picture img{
  transition: var(--transition);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cardLink-pic>.cardLink-pic_textArea{
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: 90%;
  z-index: 2;
  transform: translateX(-50%);
}

.cardLink-pic>.cardLink-pic_textArea>.cardLink-pic_title{
  font-size: var(--font-18);
  line-height: 1.5;
  letter-spacing: .02em;
}

/*---arrow---*/
.arrow{
  vertical-align: middle;
  color: var(--color-white);
  line-height: 1;
  width: .6rem;
  height: .6rem;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
}

.arrow.arrow-right{
  transform: translateX(-25%) rotate(45deg);
}
.arrow.arrow-bottom{
  transform: translateY(-25%) rotate(135deg);
}

.arrow-icon{
  background: var(--kaisei-green);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(3rem, 6vw);
  height: min(3rem, 6vw);
  transition: var(--transition);
}

.download-icon{
  -webkit-mask: url(img/icon-download.svg);
  mask: url(img/icon-download.svg);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-repeat: no-repeat;
  background-color: var(--kaisei-green);
  width: min(1.6rem, 5vw);
  height: min(1.6rem, 5vw);
  transition: var(--transition);
}

.tab-icon{
  -webkit-mask: url(img/icon-tab.svg);
  mask: url(img/icon-tab.svg);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-repeat: no-repeat;
  background-color: var(--kaisei-green);
  width: min(1.6rem, 5vw);
  height: min(1.6rem, 5vw);
  transition: var(--transition);
}

.important-text{
  color: #ea0000;
  font-weight: 500;
}

@media print, screen and (min-width: 768px) {
  body {
    font-size: 1.4rem;
  }

  .contents{
    width: 120rem;
  }

  .contents-title{
    font-size: 4.83rem;
  }

  /*---link---*/
  .linkBox:hover .linkBox-arrow{
    transform: rotate(-90deg) translateY(.5rem);
  }
  a:hover .hoverRoll-item1{
    animation: hover-text-out 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }
  a:hover .hoverRoll-item2{
    animation: hover-text-in 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }
  @keyframes hover-text-in {
    0% {
      transform: translateY(120%)
    }

    100% {
      transform: translateY(0)
    }
  }

  @keyframes hover-text-out {
    0% {
      transform: translateY(0)
    }

    100% {
      transform: translateY(-120%)
    }
  }

  a.cardLink:hover{
    box-shadow: var(--bs-green);
    transform: scale(1.01);
  }

  a.cardLink:hover .arrow-icon{
    transform: scale(1.1);
  }

  .linkBox-bg:hover::before{
    transform: translateY(-50%) scale(1.08);
  }

  a.cardLink:hover picture img{
    transform: scale(1.02);
  }

  .cardLink-pic:hover{
    box-shadow: var(--bs-green);
    transform: scale(1.01);
  }
  .cardLink-pic:hover>picture img{
    transform: scale(1.05);
  }
}

@media print, screen and (max-width: 1024px){
  .contents {
    width: 88rem;
  }
}

@media print, screen and (max-width: 768px) {
  :root{
    --font-size-normal2:1.3rem;
    --font-exTxt: 1.4rem;
    --section-margin:min(15rem,22vw);
    --bg-padding:min(3rem,6vw);
    --font-20:1.6rem;
  }

  .contents{
    width: 88%;
  }

  a.cardLink picture{
    width: 37%;
    height: min(14rem, 28vw);
  }

  .cardLink-title{
    width: 63%;
  }

  .title-flex{
    flex-wrap: wrap;
  }
  .title-flex .contents-title{
    width: 100%;
  }
}

/*-- scroll animation --*/
.scroll-fadeIn {
  opacity: 0;
}
.scroll-fadeIn.is-active{
  animation: scroll-fadeIn .75s ease .6s normal forwards;
}
@keyframes scroll-fadeIn {
  0%{
    opacity: 0;
    transform: translateY(6%);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-title{
  translate: 0% 0%;
  opacity: 0;
}

.scroll-title.is-active{
  display: block;
  animation: titleEffectAnimation .75s cubic-bezier(.55,.05,.22,.99) .2s normal forwards;
  opacity: 0;
  translate: 0% 140%;
}

/*----- breadcrumbs/pageTop -----*/
.breadcrumbs {
  text-align: left;
  font-size: min(1rem, 2.4vw);
  margin: auto;
  padding: min(1.4rem) min(10rem, 5vw);
  color: var(--kaisei-green);
  letter-spacing: .08em;
}

.breadcrumbs span {
  padding: 0;
  letter-spacing: .04em;
}

.breadcrumbs a {
  color: var(--kaisei-green);
  text-decoration: underline;
}

#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	width: 50px;
	height: 50px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	font-size:0.6rem;
}

/*---- page top -----*/
.page-top{
  right: min(12px, 2vw);
  bottom: min(12px, 1vw);
  position: fixed;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.page-top.is-show {
  visibility: inherit;
  opacity: 1;
}

.page-top a{
  background: var(--kaisei-green);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: min(7rem, 16vw);
  width: min(7rem, 16vw);
  text-align: center;
  color: var(--color-white);
  line-height: 1.4;
  box-shadow: var(--bs-black);
  letter-spacing: .08em;
  font-size: min(1.2rem, 3vw);
  text-transform: uppercase;
}


/*----- googleMap/youtube -----*/
.googleMap{
  position: relative;
  padding-bottom: 50.25%;
  overflow: hidden;
}

.googleMap iframe, .googleMap object, .googleMap embed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube{
  position:relative;
  width:100%;
  padding-top:62.25%;
}

.youtube iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

/*----- not found -----*/
.notFound{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: min(20vh, 38vw) 0;
}

.notFont-wrapper{
  padding: 0 10vw 0;
}

.notFont-wrapper h2{
  font-size: min(6.24rem, 14vw);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .02em;
  padding-bottom: 16px;
  color: var(--kaisei-green);
}
.notFont-wrapper h2 span{
  font-size: min(4.24rem,5vw);
  display: block;
}

.notFont-wrapper p{
  font-size: min(1.6rem, 3.24vw);
  padding-bottom: 40px;
}

.notFont-wrapper .linkBox{
  width: min(23rem, 54vw);
  margin: 0 auto;
}

/*----- thumbnail -----*/
.thumbnail {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 72.25%;
  background: var(--color-white);
  border-radius: min(1.4rem, 3vw);
}

.thumbnail img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width:100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.2s ease;
}

/*----- swiper -----*/
.swiper-wrapper{
  transition-timing-function: linear!important;
}

.swiper-slide{
  padding: 0 2px;
}

.swiper-slide img {
  width: 100%;
  width: 100%;
}

.swiper-slide > div {
  height: 100%;
  width: 100%;
}

.swiper-controller .swiper-pagination-fraction{
  color: var(--kaisei-green);
  position: static;
  width: auto;
  margin: 0px min(16px, 3vw) 0 0;
}

/*----- パンフレットダウンロード -----*/
.sideFixed.is-show {
  visibility: inherit;
  opacity: 1;
  transition: var(--transition);
}

.sideFixed{
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  transition: var(--transition);
}

.sideFixed>ul.sideFixed-list{
  display: flex;
  flex-wrap: wrap;
  gap: 1vw;
  width: min(78%, 42rem);
}

.sideFixed>ul.sideFixed-list li{
width: calc((100% - 1vw) / 2);
}

.sideFixed>ul.sideFixed-list li a{
  transition: var(--transition);
  display: block;
}


/*--------------
  loading
--------------*/
/*.loading{
  background-color:var(--kaisei-green);
  bottom: 0;
  display: block;
  height: 100vh;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transform: scaleY(1);
  transform-origin: center top;
  width: 100vw;
  z-index: 999;
}

#js-loading {
  animation: hideAnimation .5s cubic-bezier(.04,.435,.315,.9) 5s normal forwards;
}

@keyframes hideAnimation {
  0% {
    display: block;
    transform: scaleY(1);
    transform-origin: center top;
  }
  100% {
    transform: scaleY(0);
    display: none;
    transform-origin: center top;
  }
}

.-loading_imagesWrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  text-align: center;
  overflow: hidden;
}
.-loading_imagesWrapper img{
  width: min(60rem, 90vw);
  /*opacity: 0;
  transform: translate(0, 10rem);
  animation: loadingLogoAnime .75s cubic-bezier(0.54, 0.02, 0.5, 0.99) .7s normal forwards;
}

@keyframes loadingLogoAnime {
  0% {
    opacity: 0;
    transform: translate(0, 10rem);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
*/


/*--------------
  header
--------------*/
header h1{
  width: min(37rem, 65vw);
  z-index: 1;
}

header h1 img{
  display: block;
}

header.fixed-header{
  position: fixed;
  top: min(2rem, 8vw);
  z-index: 7;
  opacity: 0;
  animation: fallInAnimation .85s cubic-bezier(.04,.435,.315,.9) .6s normal forwards;
}

@keyframes fallInAnimation {
  0% {
    opacity: 0;
    top: -1rem;
  }
  100% {
    opacity: 1;
    top: min(2rem, 4vw);
  }
}

@keyframes fallInAnimation2 {
  0% {
    opacity: 0;
    top: -1rem;
  }
  100% {
    opacity: 1;
    top: min(2rem, 4vw);
  }
}

@media screen and (min-width:1024px) {
  header h1 {
    width: min(22rem, 50vw);
    z-index: 1;
  }

  header.fixed-header {
    width: calc(92% - min(74px, 16vw));
    left: 4%;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    box-shadow: var(--bs-black);
    transition: ease-in .3s;
    background: var(--opacity-white);
    border-radius: 9999px;
  }

  .hHeader-logo a:hover{
    opacity: .6;
  }

  nav.headerNav{
    display: flex;
    gap: 20px;
  }

  .headerNav-menu_content{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    visibility:hidden;
    opacity: 0;
    z-index: -1;
    position: absolute;
    top: min(70px, 19vw);
    width: 70%;
    right: 2rem;
    transition: var(--transition);
    transform:translate(0px, -8px);
    background-color: var(--opacity-white);
    border-radius: 2rem;
  }

  .headerNav-menu:hover .headerNav-menu_content{
    opacity: 1;
    visibility: visible;
    transform:translate(0px, 0);
  }

  .headerNav-menu:hover a.headerNav-menu_link{
    color: var(--kaisei-green);
  }

  picture.headerNav-image{
    display: block;
    width: 28%;
    border-radius: 2rem 0 0 2rem;
    max-height: 23rem;
    overflow: hidden;
  }
  picture.headerNav-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 2rem 0 0 2rem;
  }

  ul.hn-menu{
    width: calc(100% - 28%);
    display: flex;
    flex-wrap: wrap;
    padding: min(3rem, 6vw);
    align-items: flex-start;
    gap: 0;
    justify-content: space-between;
  }
  ul.hn-menu>li{
    width: calc((100% - 4rem) / 2);
    position: relative;
  }
  ul.hn-menu>li::before{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    background-color: var(--color-gray);
    left: 0;
    bottom: 0;
  }
  ul.hn-menu>li a{
    display: flex;
    justify-content: space-between;
    padding: min(1.4rem, 1.4vw);
    align-items: center;
    font-size: min(1.24rem);
  }

  ul.hn-menu>li a .arrow-icon{
    width: min(2rem, 4vw);
    height: min(2rem, 4vw);
  }

  ul.hn-menu>li a::after{
    position: absolute;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: var(--kaisei-green);
    bottom: 0;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.5s;
  }
  ul.hn-menu>li a:hover::after{
    transform: scale(1, 1);
  }

  /*----- header nav -----*/
  .headerNav-menu>a.headerNav-menu_link{
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.24rem;
  }

  .headerNav-menu>a.headerNav-menu_link span.click-icon{
    width: 1rem;
    height: .6rem;
    margin-left: 0.5rem;
    display: block;
    background: url(img/hn-arrow.svg) no-repeat center;
    background-size: contain;
  }
}

@media screen and (max-width:1024px) {
  header.fixed-header{
    left: min(4rem, 3vw);
  }

  header.fixed-header nav.headerNav{
    display: none;
  }
}

@media screen and (min-width:768px) {
  header h1 a:hover{
    opacity: 0.6;
  }

  a:hover .thumbnail img{
    transform: translate(-50%,-50%) scale(1.05);
  }

  .sideFixed {
    bottom: 30svh;
  }

  .sideFixed>ul.sideFixed-list a:hover{
    transform: scale(1.05);
  }

  .sideFixed>ul.sideFixed-list{
    width: 100%;
  }

  .sideFixed{
    position: fixed;
    right: 0;
    width: min(6rem,14vw);
  }

  .sideFixed>ul.sideFixed-list li{
    width: 100%;
  }
}

/*----- hamburger -----*/
.fixedBtn{
  cursor: pointer;
  position: fixed;
  top: min(3rem, 3vw);
  right: min(4rem, 3vw);
  z-index: 200;
  transition: ease .5s;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 1rem;
  opacity: 0;
  animation: fallInAnimation2 .85s cubic-bezier(.04,.435,.315,.9) .6s normal forwards;
}

.openBtn{
  width: min(72px, 15vw);
  height: min(72px, 15vw);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .5s cubic-bezier(.215,.61,.355,1);
  gap: min(5.4px, 1.4vw);
  background: var(--opacity-white);
  border-radius: 50%;
  box-shadow: var(--bs-black);
}

.openBtn span{
  background-color: var(--kaisei-green);
  border-radius: 50%;
  height: min(6px, 1.4vw);
  width: min(6px, 1.4vw);
  transition: transform .3s cubic-bezier(.215,.61,.355,1);
  position: relative;
}

.openBtn.active span:nth-of-type(1){
  transform: translateX(200%);
}
.openBtn.active span:nth-of-type(3){
  transform: translateX(-200%);
}

.openBtn::before{
  position: absolute;
  content: "menu";
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-size: min(12px, 2.6vw);
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kaisei-green);
  transition: transform .5s cubic-bezier(.215,.61,.355,1);
}
.openBtn.active::before{
  content: "close";
}

#js-g-nav{
  transition: all .5s cubic-bezier(0.43, 0.05, 0.17, 1);
  -webkit-transition: all .5s cubic-bezier(0.43, 0.05, 0.17, 1);
  opacity: 0;
  visibility: hidden;
}

#js-g-nav.panelactive{
  opacity: 1;
  visibility: inherit;
}

.g-nav{
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  width: 100%;
  height: 100svh;
  color: var(--color-black);
  background: rgba(0, 149, 110, .9);
  background-size: cover;
  backdrop-filter: blur(3px);
  visibility: hidden;
}

.g-nav a{
  color: var(--color-white);
}

.g-nav_container{
  display: flex;
  flex-direction: row-reverse;
  height: 100svh;
}

.g-nav_images{
  overflow: hidden;
}

picture._images__image{
  display: block;
  height: 100%;
}

._images__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

a.g-nav_logo{
  display: block;
  width: min(36rem, 62vw);
  margin: min(3rem, 5vw);
}

.g-nav_mainMenu_acc,.g-nav_mainMenu_list{
  width: calc(100% / 2);
}

.g-nav_menu{
  padding: 10rem;
  overflow-y: auto;
}

.g-nav_mainMenu{
  display: flex;
  justify-content: space-between;
  gap: 8rem;
}

.g-nav_mainMenu li._mainMenu-item{
  border-bottom: solid 1px var(--color-white);
  padding: min(2rem,4vw) 0;
  cursor: pointer;
}

.g-nav_mainMenu li._mainMenu-item ul._mainMenu_menuList{
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .3em;
}
.g-nav_mainMenu li._mainMenu-item ul._mainMenu_menuList li a{
  position: relative;
  padding-left: 1.4rem;
  font-size: min(1.24rem, 3vw);
}
.g-nav_mainMenu li._mainMenu-item ul._mainMenu_menuList li a::before{
  position: absolute;
  content: "";
  background: var(--color-white);
  width: min(1rem, 2vw);
  height: 1px;
  top: .7rem;
  left: 0;
}

._mainMenu-inner{
  display: flex;
  flex-direction: column;
  gap: min(1.2rem, 2vw);
}

.g-nav_mainMenu li._mainMenu-item a._mainMenu__topics{
  display: block;
  position: relative;
}
.g-nav_mainMenu li._mainMenu-item a._mainMenu__topics::after{
  position: absolute;
  content: "";
  -webkit-mask: url(img/hn-arrow.svg);
  mask: url(img/hn-arrow.svg);
  -webkit-mask-size: auto;
  mask-size: auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-repeat: no-repeat;
  background-color: var(--color-white);
  width: 1.2rem;
  height: 1.2rem;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  right: 0;
  transition: var(--transition);
}

.-nav_sns{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: min(1rem, 2vw);
  width: min(48vw, 18rem);
  margin-top: min(4rem, 8vw);
}

.-nav_sns li img{
  display: block;
  height: min(3rem, 8vw);
  width: auto;
  margin: 0 auto;
  transition: var(--transition);
}

.accordion-menu .box{
  display: none;
}

.accordion-menu .title{
  color: var(--color-white);
  position: relative;
}
.accordion-menu .title::before,
.accordion-menu .title::after{
  position: absolute;
  content: "";
  background: var(--color-white);
  width: 16px;
  height: 1px;
  transition: var(--transition);
}
.accordion-menu .title::before{
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.accordion-menu .title::after{
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

.accordion-menu .title.close::after{
  transform: translateY(-50%) rotate(0deg);
}

.easing-fade{
  opacity: 0;
}

#js-g-nav.panelactive .easing-fade{
  opacity: 1;
  transition: all .75s cubic-bezier(0.43, 0.05, 0.17, 1);
  -webkit-transition: all .75s cubic-bezier(0.43, 0.05, 0.17, 1);
  transition-delay: .4s;
}

@media screen and (min-width:1024px) {
  .g-nav_mainMenu li._mainMenu-item:hover a._mainMenu__topics::after{
    right: .5rem;
  }

  .g-nav_images{
    width: 40%;
    height: 100%;
  }

  .g-nav_menu{
    width: 60%;
  }

  picture._images__image img{
    border-top-right-radius: calc(var(--border-radius) * 2);
  }
}

@media screen and (max-width:1024px) {
  .g-nav{
    overflow: auto;
  }

  .g-nav_container{
    flex-wrap: wrap;
    gap: min(10vw,7rem);
    margin-top: min(5rem, 8vw);
    justify-content: flex-end;
  }

  .g-nav_images{
    display: contents;
  }

  a.g-nav_logo{
    order: 1;
    margin: 0 min(3rem, 5vw);
  }
  .g-nav_menu{
    width: 100%;
    padding: 0 min(6rem, 8vw);
    order: 2;
  }
  picture._images__image{
    order: 3;
    height: 40svh;
    width: 100%;
  }

  .g-nav_mainMenu{
    gap: min(4rem, 4vw);
  }

  .g-nav_subMenu{
    width: min(460px, 100%);
    }
}

@media screen and (min-width:768px) {
  a.g-nav_cardLink:hover .cardLink-title::before{
    transform: scale(1.1);
  }

  .g-nav_mainMenu_acc .title:hover .hoverRoll-item1{
    animation: hover-text-out 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }
  .g-nav_mainMenu_acc .title:hover .hoverRoll-item2{
    animation: hover-text-in 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  a.g-nav_logo:hover,
  ._mainMenu_menuList li a:hover,
  .g-nav_subMenu>.-nav_sns li a:hover{
    opacity: var(--opacity);
  }

  .-nav_sns li a:hover img{
    transform: scale(1.05);
  }
}

@media screen and (max-width:768px) {
  .g-nav_mainMenu{
    flex-wrap: wrap;
  }
  .g-nav_mainMenu_acc,
  .g-nav_mainMenu_list{
    width: 100%;
  }

  .g-nav_mainMenu_list{
    margin-top: min(4rem, 8vw);
  }
}

/*--------------
KV
--------------*/
.KV{
  height: 104svh;
  min-height: 740px;
  position: relative;
  background: url(img/KV-dummy.webp) no-repeat center;
  background-size: cover;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.KV-movie{
  height: 100svh;
  overflow: hidden;
}

.KV-movie video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.indexWrapper{
  background: var(--color-white);
  border-radius: calc(var(--border-radius)* 3) 0 0 0;
  position: relative;
  margin-top: -8rem;
}

@media screen and (min-width:768px) {
  .KV-movie{
  height: 100svh;
  }

  .indexWrapper{
    margin-top: -2rem;
  }
}

/*--------------
top pickUp
--------------*/
.top-pickUp{
  margin: 0 0 calc(var(--section-margin) / 2) min(4rem, 8vw);
  -webkit-transform: translateY(-4rem);
  transform: translateY(-4rem);
  overflow-x: hidden;
}

.top-pickUp .thumbnail{
  box-shadow: var(--bs-black);
  background: var(--color-white);
}

.top-pickUp_item a{
  color: var(--kaisei-green);
}

p.pickup-title{
  padding-top: min(1.2rem,3vw);
  font-weight: 600;
  line-height: 1.5;
  font-size: min(1.3rem, 2.83vw);
}

/*----- pickUp slide -----*/
.slide-swiper .swiper{
  overflow: visible;
  padding-left: 0vw;
  padding-right: 0vw;
}

.slide-swiper .swiper-slide{
  width: 20rem;
}

.top-pickUp_item{
  margin-right: min(2rem, 2vw);
}

.swiper-controller{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-top: min(4rem, 6vw);
  margin-right: min(8rem, 5vw);
}

.swiper-controller .swiper-button-prev,
.swiper-controller .swiper-button-next {
  position: relative;
  left: initial;
  right: initial;
  margin: 0 min(10px, 2vw) 0 0;
  width: min(5rem, 9vw);
  height: min(5rem, 9vw);
  background: #f0f9f6;
  border-radius: 50%;
}

.swiper-controller .swiper-button-prev::after,
.swiper-controller .swiper-button-next::after {
  content: "";
  border-top: var(--kaisei-green) solid 2px;
  border-left: var(--kaisei-green) solid 2px;
  width: min(1rem, 2vw);
  height: min(1rem, 2vw);
}

.swiper-button-next::after {
  margin-right: 0.4rem;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.swiper-button-prev::after {
  margin-left: 0.4rem;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


@media screen and (min-width:1024px) {
  .top-pickUp{
    margin: 0 0 calc(var(--section-margin) / 3) 10rem;
  }

  .slide-swiper .swiper-slide{
    width: 26rem;
  }

  .top-pickUp_item a:hover .pickup-title{
    opacity: .6;
  }
}



/*--------------
post
--------------*/
/*----- common -----*/
.new-text{
  text-transform: uppercase;
  color: var(--color-yellow);
  font-weight: 500;
}

.cate-name{
  background: var(--color-white);
  color: var(--kaisei-green);
  padding: min(2px, .8vw) min(6px, 1vw);
  border-radius: 4px;
  line-height: 1.5;
  font-size: 98%;
}

.cate-name.important-cate,.new-text.important-new{
  color: #ff1f54;
}

ul.newsList li.newsList-item{
  position: relative;
}
ul.newsList li.newsList-item::before{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  background-color: var(--color-gray);
  left: 0;
  bottom: 0;
}

ul.newsList li.newsList-item a{
  padding: min(2rem, 4vw);
  display: block;
}

p.news-title{
  line-height: 1.75;
}

/*----- important news -----*/
.importantNotice{
  margin: 0 auto var(--section-margin);
  background: #f7d0d140;
  border-radius: var(--border-radius);
  padding:var(--bg-padding);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.importantNotice a{
  color: #ff1f54;
  transition: 0.2s ease-in-out;
  display: flex;
  flex-wrap: wrap;
  gap: min(2rem, 1vw);
}

.importantNotice h3{
  font-size: min(2.4rem, 4vw);
  font-weight: 500;
  color: #ff1f54;
  width: 100%;
}

ul.importantNotice-list{
  width: 100%;
}

li.importantNotice-item{
  position: relative;
}

li.importantNotice-item::before{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  background-color: var(--color-gray);
  left: 0;
  bottom: 0;
}

li.importantNotice-item a{
  padding: min(2rem, 4vw) 0;
  line-height: 1.5;
}

li.importantNotice-item a>time.date{
  width: 100%;
  font-size: min(1.24rem,2.8vw);
}

/*----- index news -----*/
.news{
  margin:0 0 var(--section-margin);
}

.news .newsList{
  display: flex;
  flex-wrap: wrap;
  gap: 0 4rem;
  transition: var(--transition);
}

.news ul.newsList li.newsList-item a{
  padding: min(2rem, 4vw) 0;
}

.newsList-dateArea{
  font-size: min(1.24rem,2.8vw);
  padding-bottom: min(1.24rem, 1.24vw);
  letter-spacing: .12rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: min(6px, 1.2vw);
}

.newsList-dateArea .cate-name{
  background: #e0f2ee;
}

.news .contents .linkBox{
  width: min(35rem, 78vw);
  margin: min(3rem, 6vw) 0 0 auto;
}

/*----- news tab -----*/
.tabBtn{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  text-align: center;
  margin-bottom: min(3rem, 4vw);
  gap: .6rem;
}
.tabMenu-contents-item{
  transition: var(--transition);
  display: none;
}
.tabMenu-contents-item.is-active{
  display: block;
}

.tabMenu-contents-item .newsList,
.tabMenu-contents-item .linkBox{
  opacity: 0;
}
.tabMenu-contents-item.is-active .newsList,
.tabMenu-contents-item.is-active .linkBox{
  animation: scroll-fadeIn .6s ease .12s normal forwards;
}

.tabBtn-btn{
  cursor: pointer;
  transition: var(--transition);
  width: calc((100% - calc(1rem* 1)) / 2);
}

.tabBtn-btn a{
  position: relative;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--kaisei-green50);
  border: solid 1px var(--kaisei-green50);
  border-radius: 9999px;
  display: block;
  padding: min(4px, 1vw);
  font-size: min(1.24rem, 3vw);
}

.tabBtn-btn a.is-active{
  color: var(--color-white);
  background: var(--kaisei-green);
  border: none;
}

@media screen and (min-width:768px) {
  ul.newsList li.newsList-item::after{
    position: absolute;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: var(--kaisei-green);
    bottom: 0;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
  }
  ul.newsList li.newsList-item:hover::after{
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  ul.newsList li.newsList-item a:hover{
    transform: translateX(.5rem);
  }

  .p-adHS ul.newsList li.newsList-item::after{
    background: var(--color-hs);
  }

  .p-adJHS ul.newsList li.newsList-item::after{
    background: var(--color-jhs);
  }

  /*----- important news -----*/
  .importantNotice{
    gap: var(--flex-gap);
  }

  .importantNotice h3{
    width: 20rem;
  }

  ul.importantNotice-list{
    width: calc((100% - var(--flex-gap)) - 20rem);
  }

  li.importantNotice-item::after{
    position: absolute;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: #ff1f54;
    bottom: 0;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
  }

  li.importantNotice-item a>time.date{
    width: 11rem;
  }

  ul.importantNotice-list li.importantNotice-item:hover::after{
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  /*----- index news -----*/
  .news .newsList li{
    width: calc((100% - 4rem) / 2);
  }

  /*----- news tab -----*/
  div.tabBtn-btn{
    width: calc((100% - calc(.6rem* 3)) / 4);
  }

  .tabBtn-btn:hover{
    opacity: .6;
  }
}

@media screen and (min-width:1024px) {
  /*----- news tab -----*/
  div.tabBtn-btn{
    width: calc((100% - calc(.6rem * 6)) / 7);
  }
}

@media screen and (max-width:768px) {
  .news .title-flex{
    display: contents;
  }

  .news .title-flex_btn{
    order: 3;
    text-align: right;
  }

  .newsList-dateArea .date{
    display: block;
    width: 100%;
  }

  .news .contents{
    display: flex;
    flex-direction: column;
  }

  ul.newsList li.newsList-item{
    width: 100%;
  }

  .news p.news-title{
    font-size: 1.34rem;
    line-height: 1.6;
  }
}

.bg-gradation{
  position: relative;
  background: url(img/wave-gra.webp) no-repeat top;
  background-size: cover;
  width: 100%;
  height: 100%;
}

/*--------------
about
--------------*/
.aboutUs{
  position: relative;
  z-index: 1;
  margin: 0 min(4rem, 6vw);
  padding-bottom: min(8rem, 8vw);
}
.aboutUs::before{
  position: absolute;
  content: "";
  background: url(img/about-bgText.svg) no-repeat center;
  background-size: 100%;
  width: 100%;
  height: 19vw;
  bottom: -6rem;
  left: 0;
  z-index: -1;
}

.aboutUs h2{
  color: var(--kaisei-green);
  text-transform: uppercase;
  font-size: 8rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .03em;
  width: min(82rem, 100%);
  margin-bottom: min(2rem, 2vw);
}

.aboutUs-ex{
  display: flex;
  gap: min(10rem, 5vw);
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
}


.aboutUs-ex p{
  font-size: min(1.83rem,3.24vw);
  line-height: 2.24;
}

@media screen and (min-width:768px) {
  .aboutUs-ex_textArea{
    width: 86rem;
  }
}

@media screen and (min-width:1024px) {
  .aboutUs {
    margin: 0 10rem;
  }
}

@media screen and (max-width:768px) {
  .aboutUs{
    overflow: hidden;
  }
  .aboutUs::before{
    bottom: 0;
  }
  .aboutUs h2 {
    font-size: min(6.24rem, 11.24vw);
  }
}

/*--------------
slider
--------------*/
.life-slider .swiper-a{
  margin-bottom: 4px;
}

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

/*--------------
mainContentsMenu
--------------*/
.mainContentsMenu{
  position: relative;
  background: var(--gradation);
  padding: var(--section-margin) 0 0;
  z-index: 1;
}

.mainContentsMenu-contents.-contents_sl{
  margin-bottom: calc(var(--section-margin) * 1.5);
}

.mainContentsMenu-contents.-contents_ai{
  margin-bottom: var(--section-margin);
}

.mainContentsMenu-contents>.-contents_images{
  overflow: hidden;
  height: min(620px, 64vw);
}

.mainContentsMenu-contents>.-contents_images img{
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.mainContentsMenu-contents .linkBox{
  margin-top: min(2rem,4vw);
}

/*---- menu list -----*/
ul.menuList-link li{
  position: relative;
}
ul.menuList-link li::before{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  background-color:var(--color-gray);
  left: 0;
  bottom: 0;
}

ul.menuList-link li a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: min(2rem,4vw) 0;
}


/*---- club -----*/
.mainContentsMenu-club{
  display: block;
  background: var(--color-white);
  border-radius: var(--border-radius);
  position: relative;
  padding:var(--bg-padding) calc(var(--bg-padding) / 2);
  margin-bottom: calc(var(--section-margin) * 1.5);
}

section>.-club_introduction{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--flex-gap);
}

.-club_introduction__imageArea,
.-club_introduction__textArea{
  width: 100%;
}

.-club_introduction__imageArea{
  margin-top: -15vw;
  position: relative;
}
.-club_introduction__imageArea>.-club_introduction__image1{
  width: 78%;
}
.-club_introduction__imageArea>.-club_introduction__image2{
  width: 32%;
  margin: -21% 0rem 0 auto;
}
.-club_introduction__textArea{
  position: relative;
  z-index: 1;
}

.swiper-fadeIn img,
.swiper-fadeIn2 img{
  border-radius: var(--border-radius);
}

.-club_introduction>.-club_introduction__textArea h3{
  color: var(--kaisei-green);
  font-size: min(4rem, 7.4vw);
  font-weight: 500;
  padding-bottom: min(2rem, 4vw);
  line-height: 1.5;
  letter-spacing: .08em;
}

span.-club_button{
  background: #e5f4f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: min(7rem, 14vw);
  height: min(7rem, 14vw);
  right: 1rem;
  transition: var(--transition);
  position: relative;
  margin: 0 0 0 auto;
  cursor: pointer;
}
span.-club_button::before,
span.-club_button::after{
  position: absolute;
  content: "";
  background: var(--kaisei-green);
  top: 50%;
  left: 50%;
  width: min(4vw,2rem);
  height: 1px;
  transition: var(--transition);
}
span.-club_button::before{
  transform: translate(-50%,-50%);
}
span.-club_button::after{
  transform: translate(-50%,-50%) rotate(90deg);
}

.-club_introduction.close span.-club_button::after{
  transform: translate(-50%,-50%) rotate(0deg);
}

.box.-club_listBox{
  background: var(--bg);
  display: none;
  border-radius: var(--border-radius);
  padding: calc(var(--bg-padding) / 1.4);
  margin-top: min(4rem,4vw);
}

.box.-club_listBox h4{
  color: var(--kaisei-green);
  font-size: min(2.4rem, 4vw);
  font-weight: 500;
  line-height: 1.5;
  padding-bottom: min(1.4rem, 3vw);
}

._listBox__contents{
  margin-bottom: calc(var(--section-margin) / 3);
}

ul.-club_listBox__list.p-club_linkList{
  gap: min(2rem, 3vw);
}

ul.-club_listBox__list.p-club_linkList li a.linkBox-bg{
  padding:min(2rem,4vw) min(5rem,15vw) min(2rem,4vw) min(2rem,5vw);
  font-size: min(1.14rem);
}

ul.-club_listBox__list.p-club_linkList li a.linkBox-bg::before{
  right: min(.5rem, 1.4vw);
}
ul.-club_listBox__list.p-club_linkList li a.linkBox-bg::after{
  right: min(1.6rem, 4vw);
}

@media screen and (min-width:768px) {
  a:hover .arrow-icon{
    transform: scale(1.15);
  }
  a:hover .download-icon,a:hover .tab-icon{
    transform: scale(1.1);
  }

  ul.menuList-link li a::after{
    position: absolute;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: var(--kaisei-green);
    bottom: 0;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.5s;
  }
  ul.menuList-link li a:hover::after{
    transform: scale(1, 1);
  }

  /*---- main contents -----*/
  .mainContentsMenu-contents{
    display: flex;
    gap: min(12rem, 5vw);
    justify-content: space-between;
  }

  .mainContentsMenu-contents.-contents_sl{
    margin-left: min(12rem,8vw);
  }

  .mainContentsMenu-contents>.-contents_images{
    width: 52rem;
    height: 50svw;
  }

  .mainContentsMenu-contents>.-contents_textArea{
    width: calc(100% - 52rem);
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: min(3rem);
  }

  .mainContentsMenu-contents.-contents_ai{
    margin-right: min(12rem, 8vw);
    margin-bottom: calc(var(--section-margin) * 2);
    flex-direction: row-reverse;
  }

  .mainContentsMenu-contents.-contents_sl>.-contents_images{
    border-radius: min(4rem,3vw) 0 0 min(4rem,3vw);
  }
  .mainContentsMenu-contents.-contents_ai>.-contents_images{
    border-radius: 0 min(4rem,3vw) min(4rem,3vw) 0;
  }

  /*---- club -----*/
  .-club_introduction__imageArea,
  .-club_introduction__textArea{
    width: calc((100% - var(--flex-gap)) / 2);
  }

  .-club_introduction__imageArea{
    margin-top: -11rem;
  }

  .-club_introduction__imageArea>.-club_introduction__image2{
    margin: -12rem 0rem 0 auto;
  }

  span.-club_button:hover{
    transform: scale(1.1);
  }
}

@media screen and (min-width:1024px) {
  /*----- main -----*/
  .mainContentsMenu-contents>.-contents_images{
    width: 96rem;
    height: 38svw;
  }

  .mainContentsMenu-contents>.-contents_textArea{
    width: 52rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: min(3rem);
  }

  /*----- club -----*/
  ul.-club_listBox__list.p-club_linkList li{
    width: calc((100% - calc(min(2rem, 3vw)* 3)) / 4);
  }
}

@media screen and (max-width:768px) {
  .mainContentsMenu-contents>.-contents_textArea{
    width: 86%;
    margin: 0 auto min(6rem, 12vw);
  }

  .menuList-link{
    margin-top: min(2rem, 4vw);
  }
}

/*--------------
kaisei blog
--------------*/
.kaiseiBlog{
  position: relative;
  z-index: 1;
  margin: 0 0 var(--section-margin) min(4rem, 6vw);
}

.kaiseiBlog-slide{
  overflow: hidden;
  margin-top: calc(var(--section-margin) / 2);
  margin-bottom: min(4rem, 8vw);
}

.blog-swiper .swiper-slide {
  width: 19rem;
  margin-right: min(2rem, 2vw);
}

.kaiseiBlog-titleArea{
  position: relative;
  padding: min(2rem, 4vw) 0;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.kaiseiBlog-dateArea{
  font-size: min(1.24rem, 2.83vw);
  padding-bottom: min(.8rem, 2.4vw);
  display: flex;
  align-items: center;
  gap: .3rem .6rem;
}

.kaiseiBlog-dateArea .cate-name {
  display: block;
}

.kaiseiBlog-item a::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  background-color: var(--color-gray);
  left: 0;
  bottom: 0;
}

.kaiseiBlog .linkBox-right{
  text-align: right;
  width: min(25rem, 58vw);
  margin: 0 0 0 auto;
}

.kaiseiBlog>a.linkBox{
  margin: 0 0 0 auto;
}

.linkBox-right{
  text-align: right;
}

@media screen and (min-width:768px) {
  .blog-swiper .swiper-slide {
    width: 31rem;
  }

  .kaiseiBlog{
    margin: 0 10rem var(--section-margin);
  }

  .kaiseiBlog-item a::after{
    position: absolute;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background: var(--kaisei-green);
    bottom: 0;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
  }

  .kaiseiBlog-item a:hover::after{
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@media screen and (max-width:768px) {
  .kaiseiBlog-dateArea{
    flex-wrap: wrap;
  }
  .kaiseiBlog-dateArea .date{
    display: block;
    width: 100%;
  }

  .kaiseiBlog .linkBox-right{
    margin: 0 min(4rem, 5vw) 0 auto
  }

}

/*--------------
other contents
--------------*/
.otherContents{
  background: var(--kaisei-green);
  border-radius: calc(var(--border-radius) * 2) calc(var(--border-radius) * 2) 0 0;
  position: relative;
  padding:var(--section-margin) 0;
}

/*-------sns-------*/
.otherContents-sns{
  display: flex;
  gap: calc(var(--flex-gap) * 2);
  flex-wrap: wrap;
  padding-bottom: calc(var(--section-margin) / 2);
}

.otherContents-sns_item{
  width: 100%;
  position: relative;
}

.otherContents-sns_item>.-sns_item__inner{
  background: var(--color-white);
  border-radius: var(--border-radius);
  padding: var(--bg-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.otherContents-sns>.otherContents-sns_item>h2{
  text-align: center;
  font-weight: 700;
  font-size: min(5rem, 10vw);
  line-height: 1;
  margin-bottom: -.8rem;
  color: var(--color-white);
}

.otherContents-sns_item>.-sns_item__inner .linkArea{
  width: 100%;
}

.otherContents-sns_item>.-sns_item__inner .linkBox{
  font-weight: 600;
  width: min(28rem, 82%);
  margin: 3rem auto 0;
  letter-spacing: .12rem;
}

.sns-tiktok .tiktok-embed{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: var(--color-white);
}

.sbi_photo{
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.sns-tiktok_main{
  width: 100%;
}


/*-------pamphlet-------*/
.otherContents-pamphlet_links{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--bg-padding);
  background: var(--color-white);
  border-radius: var(--border-radius);
  gap: var(--flex-gap);
}

.otherContents-pamphlet h3.contents-title{
  font-size: min(3.83rem, 6.24vw);
  font-weight: 500;
  letter-spacing: .08em;
  margin-bottom: min(2rem, 4vw);
}

.otherContents-pamphlet h3.contents-title .-title_en{
  font-size: min(2.24rem, 4vw);
}

.otherContents-pamphlet_links>.-pamphlet_links__textArea{
  width: 100%;
  text-align: center;
}

.otherContents-pamphlet_links>.-pamphlet_links__imageArea{
  width: min(46rem, 70vw);
  transition: var(--transition);
}

.otherContents-pamphlet>p{
  padding-bottom: min(2rem, 6vw);
}

.otherContents-pamphlet>a.linkBox-bg{
  background: var(--color-white);
  color: var(--kaisei-green);
  font-size: min(2.4rem,4.83vw);
  display: block;
  width: min(50rem, 80vw);
  margin: 0 auto;
}
.otherContents-pamphlet>a.linkBox-bg::before{
  background: var(--kaisei-green);
  border-radius: 50%;
  width: min(7rem, 12vw);
  height: min(7rem, 12vw);
}
.otherContents-pamphlet>a.linkBox-bg::after{
  width: min(2rem, 4vw);
  height: min(2rem, 4vw);
  right: min(3rem, 5.4vw);
  -webkit-mask: url(img/hn-arrow.svg);
  mask: url(img/hn-arrow.svg);
  -webkit-mask-size: auto;
  mask-size: auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-repeat: no-repeat;
  background-color: var(--color-white);
}

@media screen and (min-width:1024px) {
  /*-------sns-------*/
  .otherContents-sns_item{
    width: calc((100% - var(--flex-gap)) / 2);
  }

  .otherContents-sns_item>.-sns_item__inner{
    padding: calc(var(--bg-padding) / 2);
    height: min(100%);
  }

  #sb_instagram #sbi_images .sbi_item:hover{
    opacity: var(--opacity);
  }
}

@media screen and (min-width:768px) {
  ul.cardLinkList a:hover{
    box-shadow: var(--bs-green);
    color: var(--kaisei-green);
  }

  /*-------sns-------*/
  .otherContents-sns{
    padding-bottom: calc(var(--section-margin) * 1);
    gap: var(--flex-gap);
  }

  /*-------pamphlet-------*/
  .otherContents-pamphlet_links{
    padding: calc(var(--bg-padding) / 2);
  }

  a.otherContents-pamphlet_links:hover{
    box-shadow: var(--shadow-black);
  }

  .otherContents-pamphlet_links>.-pamphlet_links__textArea{
    width: min(40rem);
    text-align: left;
  }

  .otherContents-pamphlet_links>.-pamphlet_links__imageArea{
    margin-top: -6rem;
    width: min(46rem, 38vw);
  }

  .otherContents-pamphlet_links:hover .-pamphlet_links__imageArea{
    transform: scale(1.05);
  }

}

/*--------------
footer
--------------*/
footer {
  z-index: 1;
  position: relative;
  background: url(img/footerBg.webp) no-repeat center;
  background-size: cover;
  padding: 8rem 0 2rem;
}
footer::before{
  position: absolute;
  content: "";
  background: var(--opacity-black);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

footer,footer a {
  color: var(--color-white);
}

.footerMenu{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  padding-bottom: 7rem;
}

ul.footerMenu-list{
  display: flex;
  flex-direction: column;
  gap: min(1rem, 2vw);
}

ul.footerMenu-list li>ul.-list_inner li a span{
  position: relative;
  padding-left: min(1.4rem, 3vw);
}
ul.footerMenu-list li>ul.-list_inner li a span::before{
  content: "";
  position: absolute;
  background: var(--color-white);
  width: min(1rem, 2vw);
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

ul.footerMenu-list a{
  font-weight: 500;
}

ul.-list_inner{
  padding-top: .5rem;
  display: flex;
  flex-direction: column;
}
ul.-list_inner li a{
  font-weight: 400;
  font-size: min(1.24rem, 2.83vw);
}

div.footer-info{
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px var(--color-white);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  align-items: end;
}

div.footer-info>.-info_address p.school-name{
  font-weight: 600;
  font-size: min(1.6rem, 3vw);
  line-height: 1.5;
  padding-bottom: 1rem;
  letter-spacing: .14em;
}
div.footer-info>.-info_address p.school-name span{
  font-size: min(2.4rem, 4vw);
  display: block;
}
div.footer-info>.-info_address ul li{
  font-size: min(1.2rem, 2.83vw);
  letter-spacing: .12em;
}

div.footer-info>ul.-info_sns{
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: min(16rem, 14vw);
}
div.footer-info>ul.-info_sns li{
  width: calc(100% / 4);
}
div.footer-info>ul.-info_sns img{
  display: block;
}

ul.footer-otherMenu{
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  font-size: min(1.2rem, 2.83vw);
}

footer small{
  display: block;
  padding: 4rem 0 0;
  font-size: min(1rem, 2vw);
  text-align: right;
  letter-spacing: .12em;
}

@media print,screen and (min-width:768px) {
  footer a:hover{
    opacity: .6;
  }
}

@media print,screen and (max-width:1024px) {
  .footerMenu{
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  ul.footerMenu-list{
    width: calc((100% - calc(4rem * 2)) / 3);
  }
}

@media print,screen and (max-width:768px) {
  footer{
    padding: min(8rem, 12vw) 0 min(4rem, 4vw);
  }
  .footerMenu{
    flex-wrap: wrap;
    gap: 2rem;
  }

  div.footer-info{
    flex-wrap: wrap;
    gap: 3rem;
  }
  div.footer-info>.-info_address{
    width: 100%;
  }

  div.footer-info>ul.-info_sns{
    width: min(16rem, 40vw);
  }

  ul.footerMenu-list{
    width: 100%;
  }

  ul.footer-otherMenu{
    flex-wrap: wrap;
    gap: min(1.3rem, 2vw) min(1.3rem, 4vw);
  }
}

/*--------------
responsive
--------------*/
nav.globalMenuSp {
  display: none;
}