@import"https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap";

@media only screen and (max-width: 750px) {
  .pc-only {
    display: none !important;
  }
}
.sp-only {
  display: none !important;
}
@media only screen and (max-width: 750px) {
  .sp-only {
    display: block !important
  }
}
html {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 62.5%;
  vertical-align: baseline
}
body {
  width: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: #000;
  font-style: normal;
  font-weight: 300;
  font-size: 10px;
  font-size: 1rem;
  line-height: 1.6;
  font-family: 'Noto Sans JP',a-otf-ud-shin-go-pr6n, sans-serif;
  letter-spacing: .1em;
  vertical-align: baseline
}
div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,input,textarea {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  vertical-align: baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,textarea {
  display: block
}
nav ul {
  list-style: none
}
blockquote,q {
  quotes: none
}
blockquote:before,blockquote:after,q:before,q:after {
  content: none
}
a {
  margin: 0;
  padding: 0;
  outline: none;
  background: transparent;
  color: #333;
  font-size: 100%;
  vertical-align: baseline;
  cursor: pointer
}
input[type=submit] {
  border: none;
  cursor: pointer
}
textarea {
  overflow: hidden;
  resize: vertical
}
input,select {
  border-radius: 0;
  vertical-align: middle;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -o-border-radius: 0;
  -ms-border-radius: 0;
  -webkit-appearance: none;
  border: none
}
h1,h2,h3,h4,h5,h6 {
  font-weight: 400
}
li {
  list-style: none
}
address {
  font-style: normal
}
a {
  color: #000;
  text-decoration: none;
  cursor: pointer
}
a img {
  outline: none
}
a:hover,a li:hover,a img:hover {
  background: none;
  opacity: .7
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom
}
* {
  letter-spacing: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #000;
  font-style: normal;
  font-weight: 400;
  font-family: "M PLUS 1", serif;
  font-optical-sizing: auto
}
main {
  /* padding-bottom: 3.3333333333vw; */
  background-image: url(../img/bg-ot0yrQWC.png);
  background-size: 100%;
  background-repeat: repeat-y
}
main>header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
	  top: 2.7777777778vw;
	  right: 2.7777777778vw;
  top: 0vw;
  right: 0vw;
  width: 46.3194444444vw;
  width: 66.3194444444vw;
  height: 5vw;
  height: 4vw;
  border-radius: 69.375vw;
  border-radius: 0vw;
    border-bottom-left-radius: 1vw;
  background-color: #fff;
  justify-content: space-around;
  justify-content: right;
  gap: 43px;
  gap: 5.5%;


  z-index: 999;
  align-items: center;
}
main>header>a {
  font-weight: 700;
  font-size: .9722222222vw;
  font-size: 1.2222vw;
  line-height: .9722222222vw;
  line-height: 1.2222vw;
}
main>header>a.contact {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 11.1111111111vw;
  width: 16.1111111111vw;
  height: 2.7777777778vw;
  height: 4vw;
  border-radius: 3.3333333333vw;
  border-radius: 0vw;
  background: #3f00eb;
  background: #000000;
  color: #fff;
}
@media only screen and (max-width: 750px) {
  main>header {
    display: none
  }
}
main>footer {
  margin-top: 12.8472222222vw;
  background-color: white;
  border-image: url(../img/footer_line.webp) 8;
  border-image-width: 8px 0 0 0;
  padding: 2vw 0;

}
@media only screen and (max-width: 750px) {
  main>footer {
    margin-top: 15vw;
  }
}
main>footer>div+div {
  margin-top: 3.3333333333vw
}
@media only screen and (max-width: 750px) {
  main>footer>div+div {
    margin-top: 17.0666666667vw
  }
}
main>footer>div>p {
  margin-top: 2.0833333333vw;
  font-weight: 450;
  font-size: 1.5416666667vw;
  line-height: 2.0833333333vw;
  text-align: center
}
@media only screen and (max-width: 750px) {
  main>footer>div>p {
    margin-top: 8vw;
    font-size: 6vw;
    line-height: 8vw
  }
}
main>footer>div>a {
  display: block;
  width: 7.9166666667vw;
  margin: 0 auto;
  margin-top: 0.3888888889vw
}
main>footer>div>a>img {
  width: 100%
}
@media only screen and (max-width: 750px) {
  main>footer>div>a {
    width: 28.4vw;
    margin-top: 4.3333333333vw
  }
}
main>section#mv>h1 {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
  line-height: 0;
}
main>section#mv>div.wrapper {
  display: block;
  width: 100%;
  height: 57.66666666666vw;
  background-color: white;
  background-image: url(../img/bg01_pc.webp);
  background-size: 100%;
  background-repeat: no-repeat
}
@media only screen and (max-width: 750px) {
  main>section#mv>div.wrapper {
    height: 173.666667vw;
    background-image: url(../img/bg01_sp.webp);
  }
}
main>section#about {
  background-color: white;
  background-image: url(../img/bg02_pc.webp);
  background-size: 100%;
  background-repeat: no-repeat
}
@media only screen and (max-width: 750px) {
  main>section#about {
    background-image: url(../img/bg02_sp.webp);
    height: 147.111111vw;
  }
}
main>section#about>div.wrapper {
  width: 69.4444444444vw;
  margin: 0 auto;
  padding: 6.3333333333vw 0 6.9138888889vw;
  max-width: 1000px;
}
@media only screen and (max-width: 750px) {
  main>section#about>div.wrapper {
    width: 91.4666666667vw;
    padding: 6.4vw 0
  }
}

main>section#about>div.wrapper>h2 {
  text-align: center;
  color: #000;
  background-color: white;
  width: 100%;
  margin: 0 auto;
  font-size: clamp(10px, 2.3vw + 1rem, 48px);
  font-weight: 800;
}
@media only screen and (max-width: 750px) {
  main>section#about>div.wrapper>h2 {
    display: block;
    position: relative;
    z-index: 1;
    background-color: unset;
    width: 82.9333333333vw;
    font-size: 6.3333333333vw;
    text-align: left;
    letter-spacing: 0.6vw;
    font-weight: 800;
  }
  main>section#about>div.wrapper>h2::before{
    content: "";
    position: absolute;
    left: 0.0em;
    right: 2.6em;
    top: 0.33em;          /* News 文字の途中あたりから */
    height: 1.10em;      /* 帯の太さ */
    background: #fff;
    z-index: -1;
  }
  main>section#about>div.wrapper>h2.about_h2_2::before{
    right: 3.2em;
  }


}
main>section#about>div.wrapper>p {
  margin-top: 3.8222222222vw;
  color: #000;
  font-size: 1.3666666667vw;
  font-size: clamp(8px, 0.7vw + 0.5rem, 25px);
  text-align: center;
  background-image: url(../img/aboutbg01_pc.webp);
  background-size: 100%;
  background-repeat: no-repeat;
  background-repeat: round;
  margin-left: auto;
  width: 52%;
  margin-right: 3%;
  padding-top: 3vw;
  padding-bottom: 3vw;
  font-weight: 700;
  line-height: 3.4444444vw;
}
@media only screen and (max-width: 750px) {
  main>section#about>div.wrapper>p {
    margin: 0 auto;
    font-size: 3.6666666667vw;
    text-align: left;

    background-image: unset;
    margin-top: 65vw;
    width: 85%;
    line-height: 7.3444444vw;


  }
}


/* news setting
------------------------------------*/
section#news {
  position: relative;
  padding: 100px 0 0px;
}
@media only screen and (max-width: 750px) {
  section#news {
    padding: 11vw 0 0px;
  }
}

section#news .wrapper {
  margin: 0 auto;
  width: 69.4444444444vw;
  text-align: center;
  padding: 0 4vw;
}
@media only screen and (max-width: 750px) {
  section#news .wrapper {
    width: 95%;
  }
}

section#news .wrapper h2 {
  position: relative;
  z-index: 0; 
  display: inline-block;
  font-size: 6vw;       /* 指定サイズ */
  line-height: 2.9vw;
  margin-bottom: 4vw;
  margin-left: -46vw;

}
section#news .wrapper h2 small {
  display: block;
  font-size: 0.25em;    /* “News”に対する比率 */
  font-family: 'Noto Sans JP', a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: bold;
  text-align: left;
  padding-left: 0.2em;
}
section#news .wrapper h2 span {
  display: block;
  position: relative;
  z-index: 1;
  font-family: 'Noto Sans JP', a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: bold;
}

section#news .wrapper h2 small::before {
  content: "";
  position: absolute;
  left: 0.2em;
  right: 6.6em;
  top: 0.5em;          /* News 文字の途中あたりから */
  height: 1.25em;      /* 帯の太さ */
  background: #d5ff00;
  z-index: -1;
}
section#news .wrapper h2 span::before {
  content: "";
  position: absolute;
  left: 0.05em;
  right: 0em;
  top: -0.07em;          /* News 文字の途中あたりから */
  height: 0.75em;      /* 帯の太さ */
  background: #d5ff00;
  z-index: -1;      
}
@media only screen and (max-width: 750px) {
  section#news .wrapper h2 {
    font-size: 16vw;       /* 指定サイズ */
    line-height: 7.9vw;
    margin-bottom: 9vw;
  }
}



section#news .wrapper ul {
  border-radius: 0px;
  border: 2px solid #2c2c2c;
  margin: 0 0 15px;
  padding: 40px 40px 55px;
  max-height: 360px;
  min-height: 360px;
  overflow-y: scroll;
  background: white;
}
@media only screen and (max-width: 750px) {
  section#news .wrapper ul {
    max-height: 100vw;
    padding: 8vw 5vw 5vw;
  }
}
section#news .wrapper .news_ul {
  position: relative;
  z-index: 0; 
}

section#news .wrapper .news_ul::before {
  content: "";
  position: absolute;
  left: 1.5em;
  right: -1.5em;
  top: 1.5em;          /* News 文字の途中あたりから */
  height: 36em;      /* 帯の太さ */
  background: #d5ff00;
  z-index: -1;      
}
@media only screen and (max-width: 750px) {
  section#news .wrapper .news_ul::before {
    height: 77.7em;      /* 帯の太さ */
    max-height: 100vw;
  }
}
section#news .wrapper ul li:not(:last-child) {
  margin: 0 0 5em;
}
section#news .wrapper ul li a {
  position: relative;
  display: block;
  padding: 0 0 0 18.292%;
}
@media only screen and (max-width: 750px) {
  section#news .wrapper ul li a {
    padding: 0 0 0 0;
  }
}

section#news .wrapper ul li a picture {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  width: 15.116%;
  overflow: hidden;
}
@media only screen and (max-width: 750px) {
  section#news .wrapper ul li a picture {
    position: unset;
    width: 40vw;
    margin: 0 auto 0;
  }
}




section#news .wrapper ul li a picture.noImage {
  background: #d5ff00 url("../img/logo_hakui_esports_city.webp") center/96.5% no-repeat;
}
section#news .wrapper ul li a picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
section#news .wrapper ul li a span {
  display: block;
  padding: 1em 0;
  text-align: left;
  font-weight: 700;
  font-size: 16px;
  color: #1b8acc;
}
section#news .wrapper ul li a h3 {
  display: block;
  padding: 0 0 1em;
  text-align: left;
  line-height: 1.3;
  font-weight: 700;
  font-size: 18px;
  color: #333;
}
section#news .wrapper ul li a p {
  text-align: left;
  line-height: 1.7;
  font-weight: 500;
  font-size: 14px;
  color: #333;
}

/* club setting
------------------------------------*/
section#club {
  position: relative;
  padding: 100px 0 0px;
}

section#club .wrapper {
  margin: 0 auto;
  width: 69.4444444444vw;
  text-align: center;
  padding: 0 4vw;
}
@media only screen and (max-width: 750px) {
  section#club .wrapper {
    width: 95%;
  }
}
section#club .wrapper h2{
  text-align: left;
}
section#club .wrapper h2 img{
  max-width: 95%;
}
section#club .wrapper h2 span{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
section#club .wrapper .club_box {
  display: flex;
  width: 100%;
  margin: 2.5vw 0 0;
}
@media only screen and (max-width: 750px) {
  section#club .wrapper .club_box {
    display: block;
  }
}
section#club .wrapper .club_box .image{
  width: 29.1667vw;
  margin-right: 4.1667vw;
  width: 42%;
  margin-right: 6%;
}
@media only screen and (max-width: 750px) {
  section#club .wrapper .club_box .image{
    margin: 4vw 26% 4vw 4%;
    margin: 4vw auto 4vw auto;
    width: 70%;
  }
}


section#club .wrapper .club_box .description{
  width: 36.1111vw;
  width: 52%;
  text-align: left;
}
@media only screen and (max-width: 750px) {
  section#club .wrapper .club_box .description{
    width: 100%;
    text-align: center;
  }
}
section#club .wrapper .club_box .description p{
  font-size: 1.379999vw;
  font-weight: 700;
}
@media only screen and (max-width: 750px) {
  section#club .wrapper .club_box .description p{
    font-size: 3.679999vw;
    text-align: left;
  }
}
section#club .wrapper .club_box .club_button1{
  display: inline-block;
  padding: 0.5vw 3vw;
  font-size: 1.599999vw;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-radius: 9999px; /* 丸みを最大にしてカプセル形に */
  background: linear-gradient(90deg, #42c5ff 0%, #6526ff 100%);
  transition: 0.3s ease;
  font-family: 'Noto Sans JP', a-otf-ud-shin-go-pr6n, sans-serif;
  margin-top: 2.999999vw;
}
@media only screen and (max-width: 750px) {
  section#club .wrapper .club_box .club_button1{
    font-size: 3.679999vw;
    margin-top: 3.999999vw;
    padding: 1.5vw 8vw;
  }
}

section#club .wrapper .club_box .club_button1:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
section#club .wrapper .club_box .club_button2{
  display: block;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* テキストとアイコンの間隔 */
  text-decoration: none;
  color: #000;
  padding-bottom: 2px;
  margin-top: 1.3333333vw;
}
@media only screen and (max-width: 750px) {
  section#club .wrapper .club_box .club_button2{
    margin-top: 3.999999vw;
  }
}


section#club .wrapper .club_box .club_button2 .club_button_txt {
  font-size: 1.399999vw;
  font-weight: 700;
  border-bottom: 1px solid #000; /* テキスト下線 */
}
@media only screen and (max-width: 750px) {
  section#club .wrapper .club_box .club_button2 .club_button_txt {
    font-size: 3.679999vw;
  }
}


section#club .wrapper .club_box .club_button2 .club_button_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #9ee2ff; /* 水色の背景 */
  border-radius: 2px;
  font-size: 12px;
  line-height: 1;
  color: #000;
  margin-top: 0.4vw;
}


/* others event setting
------------------------------------*/
main>section#others>div.wrapper {
  width: 69.4444444444vw;
  margin: 0 auto;
  padding: 6.6666666667vw 4vw
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper {
    width: 95%;
    padding: 12.8vw 0
  }
}
main>section#others>div.wrapper>div>h3 {
  width: 69.4444444444vw;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div>h3 {
    width: 100%;
    height: 10.6666666667vw;
    font-size: 5.3333333333vw
  }
}

main>section#others>div.wrapper>div>h3 {
  width: 69.4444444444vw;
  position: relative;
  z-index: 0; 
  display: inline-block;
  font-size: 6vw;       /* 指定サイズ */
  line-height: 2.9vw;
  margin-bottom: 4vw;
  margin-left: 0vw;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div>h3 {
    width: 100%;
    height: auto;
    font-size: 15.3vw;
    line-height: 13.9vw;
    margin-left: 2vw;
  }
}
main>section#others>div.wrapper>div>h3 small {
  display: block;
  font-size: 0.25em;    /* “News”に対する比率 */
  font-family: 'Noto Sans JP', a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: bold;
  text-align: left;
  padding-left: 0.2em;
  padding-bottom: 0.2em;
  /*height: 9vw;*/
}
main>section#others>div.wrapper>div>h3 span {
  display: block;
  position: relative;
  z-index: 1;
  font-family: 'Noto Sans JP', a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: bold;
}

main>section#others>div.wrapper>div>h3 small::before {
  content: "";
  position: absolute;
  left: 0.2em;
  right: 40em;
  top: 0.5em;          /* News 文字の途中あたりから */
  height: 1.25em;      /* 帯の太さ */
  background: #cf68ff;
  z-index: -1;
}
main>section#others>div.wrapper>div>h3 span::before {
  content: "";
  position: absolute;
  left: 0.05em;
  right: 2.7em;
  top: -0.15em;          /* News 文字の途中あたりから */
  height: 0.84em;      /* 帯の太さ */
  background: #cf68ff;
  z-index: -1;      
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div>h3 small {
    padding-bottom: 0em;
    height: 9vw;
  }

  main>section#others>div.wrapper>div>h3 small::before {
    content: "";
    position: absolute;
    left: 0.2em;
    right: 18.5em;
    top: 1.3em;          /* News 文字の途中あたりから */
    height: 1.65em;      /* 帯の太さ */
    background: #cf68ff;
    z-index: -1;
  }
  main>section#others>div.wrapper>div>h3 span::before {
    content: "";
    position: absolute;
    left: 0.05em;
    right: 2.7em;
    top: -0.15em;          /* News 文字の途中あたりから */
    height: 0.84em;      /* 帯の太さ */
    background: #cf68ff;
    z-index: -1;      
  }
  main>section#others>div.wrapper>div>h3 span.event_h3_1::before {
    content: "";
    position: absolute;
    left: 0.05em;
    right: 3.4em;
    top: 0.1em;          /* News 文字の途中あたりから */
    height: 0.84em;      /* 帯の太さ */
    background: #cf68ff;
    z-index: -1;      
  }
  main>section#others>div.wrapper>div>h3 span.event_h3_2::before {
    content: "";
    position: absolute;
    left: 0.05em;
    right: 0.34em;
    top: 0.01em;          /* News 文字の途中あたりから */
    height: 0.94em;      /* 帯の太さ */
    background: #cf68ff;
    z-index: -1;      
  }


}

main>section#others>div.wrapper>div#events {
  padding: 3.3333333333vw 0
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events {
    padding: 6.4vw 0
  }
}

main>section#others>div.wrapper>div#events>ul>li>div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  display: block;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  z-index: 2;
  position: relative;
  align-items: flex-start;
  gap: 2.7777777778vw
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div {
    display: block;
    width: 95%;
    margin: 0 auto
  }
}
main>section#others>div.wrapper>div#events>ul>li>div>.image {
  width: 100%;
  text-align: center;
  margin-bottom: 1.5em;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.image {
  width: 100%;
  }
}
main>section#others>div.wrapper>div#events>ul>li>div>.image>img {
  width: 80%;
  display: block;
  height: auto;
  box-shadow: 1.5em 1.5em 0 #cf68ff; /* ← 紫の帯影 */
  margin-left: auto;
  margin-right: auto;
  /* border: 0.122222vw solid gainsboro; */
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.image>img {
    width: 99%;
  }
}



main>section#others>div.wrapper>div#events>ul>li>div>.image>img::before {
    content: "";
    position: absolute;
    left: 1.5em;
    right: -1.5em;
    top: 1.5em;
    height: 36em;
    background: #d5ff00;
    z-index: -1;
}
main>section#others>div.wrapper>div#events>ul>li>div>.description {
  width: 100%;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description {
    width: 100%;
    margin-top: 6.4vw
  }
}
main>section#others>div.wrapper>div#events>ul>li>div>.description>h4 {
  font-weight: 800;
  font-size: 2.2222222222vw;
  margin-top: 3.3333333vw;
  margin-bottom: 2.3333333vw;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description>h4 {
    font-size: 6.4vw;
    line-height: 8vw;
    margin-top: 8vw;
  }
}

main>section#others>div.wrapper>div#events>ul>li>div>.description>div>p {
  margin-top: -1.9999999vw;
  margin-bottom: 1.6666666667vw;
  margin-right: 1%;
  font-size: 1.179999vw;
  font-weight: 700;
  width: 50%;
  
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description>div>p {
    margin-top: 0vw;
    margin-bottom: 5.2vw;
    font-size: 3.679999vw;
    width: 100%;
  }
}
main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl {
  border: 0.301222vw solid #000;;
  width: 47%;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl {
    border: .2666666667vw solid #000000;
    width: 100%;
  }
}
main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl>div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: auto;
  min-height: 2.9861111111vw;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description>div>div>dl>div {
    width: 82.1333333333vw;
    height: auto;
    min-height: 10.6666666667vw
  }
}
main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl>div>dt {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 8.3333333333vw;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #000;
  color: #fff;
  font-weight: 500;
  font-size: 1.25vw;
  border-bottom: 0.152222vw solid #fff;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl>div>dt {
    width: 32vw;
    font-size: 4.2666666667vw
  }
}
main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl>div:last-child>dt {
    border-bottom: 0.0vw solid #000;
}

main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl>div>.event_05 {
  width: 17.3333333333vw;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl>div>.event_05 {
    width: 84vw;
    font-size: 3.666667vw;
  }
}





main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl>div>dd {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
  -webkit-justify-content: left;
  -ms-flex-pack: left;
  justify-content: left;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 1.1111111111vw;
  padding: 1vw;
  background-color: #fff;
  font-weight: 700;
  font-size: 1.15vw;
  border-bottom: 0.152222vw solid #000;
  width: 72%;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl>div>dd {
    width: 100%;
    padding: 2.1333333333vw;
    font-size: 4.2666666667vw
  }
}
main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl>div:last-child>dd {
    border-bottom: 0.0vw solid #000;
}



main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl>div+div {
  border-top: .0694444444vw solid #000;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description>div>dl>div+div {
    /* border-top: .2666666667vw solid rgb(0, 146, 158) */
  }
}
main>section#others>div.wrapper>div#events>ul>li>div>.description>div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color: #00929e;
  -webkit-box-pack: right;
  -webkit-justify-content: right;
  -ms-flex-pack: right;
  justify-content: right;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.6666666667vw;
  margin-top: 2vw;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description>div {
    display: block;
    margin-top: 3.2vw;
    gap: 6.4vw;
    font-size: 4.2666666667vw
  }
}

main>section#others>div.wrapper>div#events>ul>li>div>.description>.event_link_div {
  margin-top: 0.5vw;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description>.event_link_div {
    margin-top: 0vw;
  }
}



main>section#others>div.wrapper>div#events>ul>li>div>.description a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #000;
  padding-bottom: 2px;
  margin-top: 1.3333333vw;
  margin-top: 0vw;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description a {
    display: block;
    text-align: end;
  }
}
main>section#others>div.wrapper>div#events>ul>li>div>.description a .event_button_txt {
  font-size: 1.399999vw;
  font-size: 1.15vw;
  font-weight: 700;
  border-bottom: 1px solid #000;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description a .event_button_txt {
    font-size: 3.679999vw;
    font-size: 5.679999vw;
  }
}

main>section#others>div.wrapper>div#events>ul>li>div>.description a .event_button_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #cf68ff;
  border-radius: 2px;
  font-size: 12px;
  line-height: 1;
  color: #000;
  margin-top: 0.4vw;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li>div>.description a .event_button_icon {
    width: 6vw;
    height: 6vw;
    font-size: 4.44444444vw;
    width: 7vw;
    height: 7vw;
    font-size: 5.44444444vw;
    padding-bottom: 0.6vw;
  }
}


main>section#others>div.wrapper>div#events>ul>li:nth-of-type(2)>div>.image>img,
main>section#others>div.wrapper>div#events>ul>li:nth-of-type(4)>div>.image>img {
  box-shadow: 1.5em 1.5em 0 #fb6266;
}
main>section#others>div.wrapper>div#events>ul>li:nth-of-type(2)>div>.description a .event_button_icon,
main>section#others>div.wrapper>div#events>ul>li:nth-of-type(4)>div>.description a .event_button_icon {
  background: #fb6266;
}
main>section#others>div.wrapper>div#events>ul>li:nth-of-type(3)>div>.image>img,
main>section#others>div.wrapper>div#events>ul>li:nth-of-type(4)>div>.image>img,
main>section#others>div.wrapper>div#events>ul>li:nth-of-type(5)>div>.image>img {
  width: 55%;
}


main>section#others>div.wrapper>div#events>ul>li+li {
  margin-top: 3.3333333333vw;
  margin-top: 7.333333vw;
}
@media only screen and (max-width: 750px) {
  main>section#others>div.wrapper>div#events>ul>li+li {
    margin-top: 6.4vw
  }
}


main>section#what_hakui {
  background-color: rgb(255 144 0 / 80%);
}
main>section#what_hakui .wrapper{
  margin: 0 auto;
  width: 69.4444444444vw;
  max-width: 1000px;
  text-align: center;
  padding-bottom: 50px;
}
@media only screen and (max-width: 750px) {
  main>section#what_hakui .wrapper{
    width: 95%;
    padding: 0 4vw 6vw;
  }
}


main>section#what_hakui>div.wrapper>#haiku>h3 {
  position: relative;
  color: #fff;
  font-size: 3.6vw;
  font-weight: 750;
  text-align: center;
  padding: 50px 0;                  /* アイコンが大きくなる分少し上下余白を拡げる */
  margin: 0;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;              /* 縦中央揃え */
  justify-content: center;
  gap: 20px;                        /* テキストとアイコンの間隔 */
}
@media only screen and (max-width: 750px) {
  main>section#what_hakui>div.wrapper>#haiku>h3 {
    font-size: 7.2vw;
    padding: 7vw 0;
    gap: 1vw;                        /* テキストとアイコンの間隔 */
  }
}

/* 左右の装飾アイコン */
main>section#what_hakui>div.wrapper>#haiku>h3::before,
main>section#what_hakui>div.wrapper>#haiku>h3::after {
  content: "";
  display: inline-block;
  width: 48px;                      /* ← 大きめに変更 */
  height: 68px;                     /* ← 大きめに変更 */
  background: url("../img/haiku_h3_icon.webp") no-repeat center/contain;
  flex-shrink: 0;                   /* 文字サイズに押されて縮まないように固定 */
}
@media only screen and (max-width: 750px) {
  main>section#what_hakui>div.wrapper>#haiku>h3::before,
  main>section#what_hakui>div.wrapper>#haiku>h3::after {
    height: 11vw;
    width: 7vw;
  }
}
/* 右アイコンを反転 */
main>section#what_hakui>div.wrapper>#haiku>h3::after {
  transform: scaleX(-1);
}


/* コンテンツ全体 */
main>section#what_hakui>div.wrapper>#haiku>#haiku_topic1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;                 /* 左右の間隔 */
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;       /* 白いボックスの角を丸く */
  padding: 40px 60px;
  box-sizing: border-box;
}
@media only screen and (max-width: 750px) {
  main>section#what_hakui>div.wrapper>#haiku>#haiku_topic1 {
    display: block;
    padding: 5vw 5vw;
    border-radius: 4vw;
  }
}
/* 左のロゴ */
main>section#what_hakui>div.wrapper>#haiku>#haiku_topic1 img {
  width: 280px;              /* ロゴサイズ */
  width: clamp(7.5rem, 1.09rem + 13.68vw, 17.5rem);
  width: clamp(120px, 7.7vw + 7.5rem, 280px);
  height: auto;
  flex-shrink: 0;
}
@media only screen and (max-width: 750px) {
  main>section#what_hakui>div.wrapper>#haiku>#haiku_topic1 img {
    width: 60vw;
  }
}


/* 右側のテキスト */
main>section#what_hakui>div.wrapper>#haiku>#haiku_topic1 p {
  line-height: 2;
  color: #000;
  margin: 0;
  font-size: 1.233333333vw;
  font-size: clamp(8px, 0.7vw + 0.5rem, 25px);
  text-align: center;
  font-weight: 700;
}
@media only screen and (max-width: 750px) {
  main>section#what_hakui>div.wrapper>#haiku>#haiku_topic1 p {
    width: 100%;
    margin-top: 4vw;
    font-size: 3.679999vw;
  }
}

/* カード全体（白い大きな角丸ボックス） */
main>section#what_hakui>div.wrapper>#haiku>#haiku_topic2 {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border-radius: 32px;
  padding: 40px 40px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 20px;
  margin: 50px 0 0;
}
@media only screen and (max-width: 750px) {
  main>section#what_hakui>div.wrapper>#haiku>#haiku_topic2 {
    display: block;
    padding: 5vw 5vw;
    border-radius: 4vw;
  }
}

/* 左側テキストブロック */
main>section#what_hakui>div.wrapper>#haiku #haiku_topic2_box1 {
  flex: 1 1 0;
  flex: 0 0 45%;
}

/* 見出し */
main>section#what_hakui>div.wrapper>#haiku #haiku_topic2_box1 h4 {
  font-size: clamp(21px, 2.8vw, 40px);
  line-height: 1.4;
  font-weight: 800;
  margin: 0 0 20px;
  text-align: left;
  letter-spacing: 2px;
}
@media only screen and (max-width: 750px) {
  main>section#what_hakui>div.wrapper>#haiku #haiku_topic2_box1 h4 {
    font-size: 7vw;
    text-align: center;
    line-height: 8vw;
    margin: 4vw auto;
  }
}

/* 説明文 */
main>section#what_hakui>div.wrapper>#haiku #haiku_topic2_box1 p {
  font-size: 16px;
  line-height: 1.9;
  margin: 0 0 32px;
  font-size: 1.133333333vw;
  font-size: clamp(1.0rem, -0.181rem + 1.45vw, 1.563rem);
  text-align: center;
  font-weight: 700;
  text-align: left;
  letter-spacing: 1.1px;
}
@media only screen and (max-width: 750px) {
  main>section#what_hakui>div.wrapper>#haiku #haiku_topic2_box1 p {
    width: 100%;
    font-size: 3.679999vw;
    text-align: center;
    margin-bottom: 7vw;
  }
}

/* 「詳しくはこちら」ボタン */
main>section#what_hakui>div.wrapper>#haiku #haiku_topic2_box1 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #ff8a3c 0%, #ff1f6b 50%, #ff3c8f 100%);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  font-size: 1.433333333vw;
  /* font-size: clamp(21px, 2.8vw, 40px); */
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: 0.25s ease;
  letter-spacing: 4px;
}
@media only screen and (max-width: 750px) {
  main>section#what_hakui>div.wrapper>#haiku #haiku_topic2_box1 a {
    font-size: 3.679999vw;
    padding: 2vw 16vw;
  }
}


main>section#what_hakui>div.wrapper>#haiku #haiku_topic2_box1 a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* 右側画像ブロック */
main>section#what_hakui>div.wrapper>#haiku #haiku_topic2_box2 {
  flex: 1 1 0;
  flex: 0 0 55%;
  padding-right: 30px;
}

/* 画像 */
main>section#what_hakui>div.wrapper>#haiku #haiku_topic2_box2 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ===== Access ===== */
@media only screen and (max-width: 750px) {
    main>section#access {
    padding: 11vw 0 0px;
  }
}



main>section#access>div.wrapper {
  margin: 0 auto;
  width: 69.4444444444vw;
  max-width: 1000px;
  text-align: left;
  padding-bottom: 50px;
  padding-top: 100px;
}
@media only screen and (max-width: 750px) {
    main>section#access>div.wrapper {
    width: 95%;
    padding: 0 4vw 6vw;
  }
}

main>section#access>div.wrapper h3 {
  position: relative;
  z-index: 0; 
  display: inline-block;
  font-size: 6vw;       /* 指定サイズ */
  line-height: 2.9vw;
  margin-bottom: 4vw;
  margin-left: 0vw;
}
@media only screen and (max-width: 750px) {
  main>section#access>div.wrapper h3 {
    font-size: 16vw;       /* 指定サイズ */
    line-height: 7.9vw;
    margin-bottom: 9vw;
  }
}




main>section#access>div.wrapper h3 small {
  display: block;
  font-size: 0.25em;    /* “News”に対する比率 */
  font-family: 'Noto Sans JP', a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: bold;
  text-align: left;
  padding-left: 0.2em;
  padding-bottom: 0.2em;
}

main>section#access>div.wrapper h3 span {
  display: block;
  position: relative;
  z-index: 1;
  font-family: 'Noto Sans JP', a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: bold;
}

/* Access のピンクマーカー */
main>section#access>div.wrapper h3 small::before {
  content: "";
  position: absolute;
  left: -0.01em;
  right: 8.6em;
  top: 0.5em;          /* News 文字の途中あたりから */
  height: 1.25em;      /* 帯の太さ */
  background: #ff8bd9;
  z-index: -1;
}
main>section#access>div.wrapper h3 span::before {
  content: "";
  position: absolute;
  left: -0.01em;
  right: 0.0em;
  top: -0.15em;          /* News 文字の途中あたりから */
  height: 0.84em;      /* 帯の太さ */
  background: #ff8bd9;
  z-index: -1;      

}

/* ===== Access 本体カード ===== */
#access > .wrapper > div {
  position: relative;
  padding: 32px 32px 32px;
  border: 1px solid #000;
  background: #fff;
  display: flex;
  gap: 32px;
  align-items: flex-start;
  box-sizing: border-box;
}
@media only screen and (max-width: 750px) {
  #access > .wrapper > div {
    box-shadow: 1.5em 1.5em 0 #ff8bd9;
  }
}



/* 下にずれたピンクの帯（影っぽいやつ） */
#access > .wrapper > div::after {
  content: "";
  position: absolute;
  left: 1.5vw;
  right: -1.5vw;
  height: 564px;
  background: #ff8bd9;
  bottom: -1.5vw;
  z-index: -1;
}
@media only screen and (max-width: 750px) {
  #access > .wrapper > div::after {
    background: unset;
  }
}


/* Googleマップ */
#access iframe {
  flex: 0 0 55%;          /* 左の地図の幅 */
  min-height: 360px;
  border: 0;
}

/* 右側の情報カラム */
#access > .wrapper > div > div:last-child {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 各ブロック（所在地 / 営業時間 / 電話番号/FAX） */
#access > .wrapper > div > div:last-child > div {
  font-size: 14px;
  line-height: 1.9;
}

/* ブロック内見出し（ピンク文字） */
#access > .wrapper > div > div:last-child > div > div:first-child {
  font-weight: 700;
  color: #ff8bd9;
  margin-bottom: 4px;
}
@media only screen and (max-width: 750px) {
  #access > .wrapper > div > div:last-child > div > div:first-child {
    font-size: 3.679999vw;
    margin-bottom: 0vw;
  }
}

/* ブロック内本文 */
#access > .wrapper > div > div:last-child > div > div:last-child {
  color: #000;
  font-weight: 700;
}
@media only screen and (max-width: 750px) {
  #access > .wrapper > div > div:last-child > div > div:last-child {
    font-size: 3.679999vw;
    line-height: 6vw;
  }
}

/* ===== レスポンシブ（スマホ） ===== */
@media (max-width: 750px) {
  #access > .wrapper > div {
    flex-direction: column;
    padding: 20px;
  }
  #access iframe {
    flex: 1 1 auto;
    width: 100%;
    min-height: 260px;
  }
  #access > .wrapper > div > div:last-child {
    width: 100%;
  }
}
@media only screen and (max-width: 750px) {
    #access iframe {
    min-height: auto;
    height: 100vw;
  }
}

/* ===== Archive ===== */
@media only screen and (max-width: 750px) {
    main>section#archive {
    padding: 11vw 0 0px;
  }
}

main>section#archive>div.wrapper {
  margin: 0 auto;
  width: 69.4444444444vw;
  max-width: 1000px;
  text-align: left;
  padding-bottom: 50px;
  padding-top: 100px;
}
@media only screen and (max-width: 750px) {
    main>section#archive>div.wrapper {
    width: 95%;
    padding: 0 4vw 6vw;
  }
}

main>section#archive>div.wrapper h3 {
  position: relative;
  z-index: 0; 
  display: inline-block;
  font-size: 6vw;       /* 指定サイズ */
  line-height: 2.9vw;
  margin-bottom: 4vw;
  margin-left: 0vw;
}
@media only screen and (max-width: 750px) {
  main>section#archive>div.wrapper h3 {
    font-size: 16vw;       /* 指定サイズ */
    line-height: 7.9vw;
    margin-bottom: 9vw;
  }
}

main>section#archive>div.wrapper h3 small {
  display: block;
  font-size: 0.25em;    /* “News”に対する比率 */
  font-family: 'Noto Sans JP', a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: bold;
  text-align: left;
  padding-left: 0.2em;
  padding-bottom: 0.2em;
}

main>section#archive>div.wrapper h3 span {
  display: block;
  position: relative;
  z-index: 1;
  font-family: 'Noto Sans JP', a-otf-ud-shin-go-pr6n, sans-serif;
  font-weight: bold;
}

/* Access のピンクマーカー */
main>section#archive>div.wrapper h3 small::before {
  content: "";
  position: absolute;
  left: -0.01em;
  right: 8.6em;
  top: 0.5em;          /* News 文字の途中あたりから */
  height: 1.25em;      /* 帯の太さ */
  background: #fff352;
  z-index: -1;
}
main>section#archive>div.wrapper h3 span::before {
  content: "";
  position: absolute;
  left: -0.01em;
  right: 0.0em;
  top: -0.15em;          /* News 文字の途中あたりから */
  height: 0.84em;      /* 帯の太さ */
  background: #fff352;
  z-index: -1;      

}


main>section#archive>div.wrapper .archive_button{
  text-align: center;
}

main>section#archive>div.wrapper .archive_button a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 5%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #ff8a3c 0%, #ff1f6b 50%, #ff3c8f 100%);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  font-size: 1.433333333vw;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: 0.25s ease;
  letter-spacing: 4px;
}
@media only screen and (max-width: 750px) {
  main>section#archive>div.wrapper .archive_button a{
    font-size: 3.679999vw;
    padding: 2vw 5vw;
  }
}