@charset "UTF-8";
@import url("global.css");
#mainarea {
  background-color: #FFF;
  padding: 80px 0;
}
#mainarea .intro {
  display: flex;
  justify-content: center;
  align-items: center;
}
#mainarea .intro .title {
  padding-right: 80px;
  line-height: 1.6;
  font-size: clamp(27px, 3.6vw, 42px);
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#mainarea .intro .title .logotype {
  display: inline-block;
  width: 336px;
  margin-right: 10px;
  line-height: 0;
  vertical-align: -14px;
}
#mainarea .intro .title .logotype img {
  width: 100%;
}
#mainarea .owner_menu {
  max-width: 1000px;
  margin: 80px auto 0;
}
#mainarea .owner_menu ul {
  border-top: #dcdcdc solid 1px;
}
#mainarea .owner_menu ul li {
  border-bottom: #dcdcdc solid 1px;
}
#mainarea .owner_menu ul li a {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  padding: 40px 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media (any-hover: hover) {
  #mainarea .owner_menu ul li a:hover .textbox .more::after {
    translate: 10px 0;
    scale: 1.5;
  }
}
#mainarea .owner_menu ul li a .textbox {
  width: 100%;
  padding: 40px 0 0 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: justify;
  position: relative;
}
#mainarea .owner_menu ul li a .textbox .title {
  margin-bottom: 20px;
}
#mainarea .owner_menu ul li a .textbox .title span {
  display: block;
}
#mainarea .owner_menu ul li a .textbox .title .en {
  font-family: "Marcellus", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: .87rem;
}
#mainarea .owner_menu ul li a .textbox .title .ja {
  font-size: clamp(16px, 1.8vw, 20px);
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#mainarea .owner_menu ul li a .textbox .more {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  padding-right: 60px;
  font-size: 18px;
  line-height: 1;
  font-family: "Marcellus", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#mainarea .owner_menu ul li a .textbox .more::after {
  content: "";
  width: 10px;
  height: 8px;
  background: url("../img/arrow.svg") no-repeat center center;
  background-size: contain;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -6px;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#mainarea .owner_menu ul li a .ph {
  flex-shrink: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 39%;
}
#mainarea .owner_menu ul li a .ph figure {
  width: 100%;
  height: 0;
  padding-top: 66.67%;
  overflow: hidden;
  position: relative;
}
#mainarea .owner_menu ul li a .ph figure img {
  position: absolute;
  left: 0;
  top: 0;
}
#mainarea .club_link {
  margin-top: 80px;
}
#mainarea .club_link > p:not([class]) {
  text-align: center;
  color: #727E82;
  margin-bottom: 5px;
}
#mainarea .club_link > p:not([class]) br {
  display: none;
}
#mainarea .club_link .btn a {
  display: block;
  margin: 0 auto;
  width: 450px;
  height: 80px;
  line-height: 80px;
  padding-inline: 35px;
  box-sizing: border-box;
  color: #fff;
  background-color: #727E82;
  font-size: 16px;
  position: relative;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@media (any-hover: hover) {
  #mainarea .club_link .btn a:hover {
    background-color: #8B835A;
  }
  #mainarea .club_link .btn a:hover::after {
    translate: 10px 0;
    scale: 1.5;
  }
}
#mainarea .club_link .btn a::after {
  content: "";
  width: 10px;
  height: 8px;
  background: url("../img/arrow.svg") no-repeat center center;
  background-size: contain;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 40px;
  margin-top: -4px;
  filter: brightness(0) invert(1);
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#owner_event {
  padding-top: 80px;
}
#owner_event .titleblock {
  text-align: center;
  margin-bottom: 50px;
}
#owner_event .titleblock .title .slash {
  display: inline-block;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.6;
  padding: 0 1.5em;
  position: relative;
}
#owner_event .titleblock .title .slash::before, #owner_event .titleblock .title .slash::after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 1.2em;
}
#owner_event .titleblock .title .slash::before {
  content: "＼";
  left: 0;
}
#owner_event .titleblock .title .slash::after {
  content: "／";
  right: 0;
}
#owner_event ul.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 max(-20px,-1.25vw);
  row-gap: 55px;
}
#owner_event ul.list li {
  width: 33.3333333333%;
  box-sizing: border-box;
  padding-inline: min(20px,1.25vw);
}
#owner_event ul.list li.end .image::before {
  opacity: .7;
}
#owner_event ul.list li.end .image::after {
  text-align: center;
  content: "- 終了しました -";
  bottom: auto;
  right: 0;
  left: 0;
  top: 50%;
  margin-top: -14px;
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
  padding: 0;
  background: none;
  opacity: 1;
}
@media (any-hover: hover) {
  #owner_event ul.list li.end a:hover .image::after {
    translate: none;
  }
  #owner_event ul.list li.end a:hover .image img {
    filter: none;
  }
}
#owner_event ul.list li a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #e9e9e5;
  box-sizing: border-box;
  padding-bottom: 40px;
}
@media (any-hover: hover) {
  #owner_event ul.list li a:hover .image::before {
    opacity: .6;
  }
  #owner_event ul.list li a:hover .image::after {
    opacity: 1;
    translate: 20px 0;
  }
  #owner_event ul.list li a:hover .image img {
    filter: blur(3px);
  }
}
#owner_event ul.list li .image {
  position: relative;
  height: 0;
  padding-top: 75%;
  overflow: hidden;
  margin-bottom: 25px;
}
#owner_event ul.list li .image img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#owner_event ul.list li .image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #3E4443;
  mix-blend-mode: multiply;
  opacity: 0;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#owner_event ul.list li .image::after {
  content: "More";
  position: absolute;
  bottom: 10px;
  right: 40px;
  z-index: 2;
  font-family: "Marcellus", "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  padding-right: 20px;
  background: url("../img/arrow.svg") no-repeat center right;
  background-size: 10px auto;
  filter: brightness(0) invert(1);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0.2s;
  -webkit-transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0.2s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#owner_event ul.list li .title {
  line-height: 1.7;
  font-size: 1.1em;
  font-weight: 500;
  padding-inline: 20px;
  margin-bottom: 10px;
}
#owner_event ul.list li .data {
  margin-top: auto;
  font-size: .9em;
  line-height: 1.5;
  padding-inline: 20px;
  letter-spacing: 0;
}
#owner_event ul.list li .data dl {
  margin-top: 5px;
  display: flex;
}
#owner_event ul.list li .data dl dt {
  width: 20px;
  align-content: center;
  flex-shrink: 0;
}
#owner_event ul.list li .data dl dt span {
  display: block;
  width: 12px;
  height: 12px;
  line-height: 0;
  margin-bottom: 2px;
}

#owner_event_exsample {
  padding-top: 80px;
}
#owner_event_exsample .exsample_title {
  text-align: center;
  margin-bottom: 50px;
}
#owner_event_exsample .exsample_title p:not([class]) {
  margin-bottom: 5px;
}
#owner_event_exsample .exsample_title .title {
  display: block;
  font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: clamp(21px, 3vw, 35px);
}
#owner_event_exsample .exsample_title .title::before, #owner_event_exsample .exsample_title .title::after {
  content: "";
  display: inline-block;
  vertical-align: 6px;
  margin: 0 15px;
  width: 40px;
  height: 1px;
  background-color: #727E82;
}
#owner_event_exsample ul.exsample {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: #727E82 1px solid;
  border-bottom: #727E82 1px solid;
  gap: 1px;
  background-color: #727E82;
}
#owner_event_exsample ul.exsample li {
  display: grid;
  background-color: #F1F1EE;
  grid-template-rows: subgrid;
  grid-row: span 4;
  height: 100%;
  box-sizing: border-box;
  padding: 40px 2.3vw 30px;
  text-align: center;
  line-height: 1.5;
}
#owner_event_exsample ul.exsample li .image {
  position: relative;
  height: auto;
  aspect-ratio: 3 / 2;
  margin-bottom: 20px;
  overflow: hidden;
}
#owner_event_exsample ul.exsample li .image figure {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

 Responsive-Breakpoint-1 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  #mainarea .intro .title {
    padding-right: 50px;
  }
  #mainarea .intro .title .logotype {
    width: 290px;
  }
  #mainarea .owner_menu ul li a {
    padding: 40px 25px;
  }
  #mainarea .owner_menu ul li a .textbox {
    padding: 35px 0 0 40px;
  }
  #mainarea .owner_menu ul li a .textbox .more {
    padding-right: 50px;
  }

  #owner_event ul.list {
    margin: 0 -35px;
    row-gap: 55px;
  }
  #owner_event ul.list li {
    padding-inline: 15px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #mainarea {
    padding: 65px 0;
  }
  #mainarea .intro {
    display: block;
    text-align: center;
  }
  #mainarea .intro .title {
    padding: 0 0 30px;
  }
  #mainarea .intro .title .logotype {
    vertical-align: -12px;
  }
  #mainarea .owner_menu {
    margin: 65px auto 0;
  }
  #mainarea .owner_menu ul li a {
    padding: 30px 15px;
  }
  #mainarea .owner_menu ul li a .textbox {
    padding: 10px 0 0 30px;
  }
  #mainarea .owner_menu ul li a .textbox .title {
    margin-bottom: 15px;
  }
  #mainarea .owner_menu ul li a .textbox .more {
    padding-right: 30px;
    font-size: 16px;
  }
  #mainarea .owner_menu ul li a .textbox .more::after {
    margin-top: -5px;
  }
  #mainarea .owner_menu ul li a .ph {
    width: 38%;
  }
  #mainarea .club_link {
    margin-top: 65px;
  }
  #mainarea .club_link .btn a {
    height: 76px;
    line-height: 76px;
    padding-inline: 30px;
    font-size: 15px;
  }
  #mainarea .club_link .btn a::after {
    right: 35px;
  }

  #owner_event {
    padding-top: 70px;
  }
  #owner_event .titleblock {
    margin-bottom: 45px;
  }
  #owner_event ul.list {
    margin: 0 -4vw;
    row-gap: 55px;
  }
  #owner_event ul.list li {
    width: 50%;
    padding-inline: 2vw;
  }

  #owner_event_exsample {
    padding-top: 70px;
  }
  #owner_event_exsample .exsample_title {
    margin-bottom: 45px;
  }
  #owner_event_exsample .exsample_title .title::before, #owner_event_exsample .exsample_title .title::after {
    margin: 0 10px;
    width: 36px;
  }
  #owner_event_exsample ul.exsample li {
    padding: 25px 2vw 20px;
  }
  #owner_event_exsample ul.exsample li .main {
    font-size: 13px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #mainarea {
    padding: 50px 0;
  }
  #mainarea .intro .title {
    padding-bottom: 25px;
    line-height: 1.5;
  }
  #mainarea .intro .title .logotype {
    width: 220px;
    margin-right: 7px;
    vertical-align: -9px;
  }
  #mainarea .intro .text {
    text-align: justify;
  }
  #mainarea .intro .text > p br {
    display: none;
  }
  #mainarea .owner_menu {
    margin: 50px auto 0;
  }
  #mainarea .owner_menu ul li a {
    display: block;
    padding: 25px 15px;
  }
  #mainarea .owner_menu ul li a .textbox {
    width: auto;
    padding: 0 0 20px;
  }
  #mainarea .owner_menu ul li a .textbox .title {
    margin-bottom: 3px;
  }
  #mainarea .owner_menu ul li a .textbox .title span {
    line-height: 1.5;
  }
  #mainarea .owner_menu ul li a .textbox .more {
    text-align: right;
    margin-top: 10px;
    position: relative;
    padding-right: 25px;
    font-size: 14px;
  }
  #mainarea .owner_menu ul li a .textbox .more::after {
    width: 8px;
    height: 6px;
    margin-top: -3px;
  }
  #mainarea .owner_menu ul li a .ph {
    width: 100%;
  }
  #mainarea .club_link {
    margin-top: 50px;
  }
  #mainarea .club_link > p:not([class]) br {
    display: block;
  }
  #mainarea .club_link .btn a {
    width: auto;
    height: 56px;
    line-height: 56px;
    padding-inline: 25px;
    font-size: 14px;
  }
  #mainarea .club_link .btn a::after {
    width: 8px;
    height: 6px;
    right: 25px;
  }

  #owner_event {
    padding-top: 50px;
  }
  #owner_event .titleblock {
    margin-bottom: 35px;
  }
  #owner_event .titleblock .title .slash {
    line-height: 1.5;
  }
  #owner_event ul.list {
    display: block;
    margin: 0 auto;
    width: 90%;
  }
  #owner_event ul.list li {
    width: auto;
    padding-inline: 0;
    margin-bottom: 40px;
  }

  #owner_event_exsample {
    padding-top: 50px;
  }
  #owner_event_exsample .exsample_title {
    margin: 0 5vw 35px;
  }
  #owner_event_exsample .exsample_title p:not([class]) {
    text-align: justify;
  }
  #owner_event_exsample .exsample_title .title::before, #owner_event_exsample .exsample_title .title::after {
    margin: 0 7px;
    width: 24px;
  }
  #owner_event_exsample ul.exsample {
    display: block;
  }
  #owner_event_exsample ul.exsample li {
    display: block;
    padding: 30px 5vw 20px;
    border-bottom: #727E82 1px solid;
  }
  #owner_event_exsample ul.exsample li:last-of-type {
    border: none;
  }
  #owner_event_exsample ul.exsample li .image {
    width: auto;
    margin: 0 0 15px;
  }
  #owner_event_exsample ul.exsample li .main {
    display: block;
    align-content: center;
    text-align: center;
    font-size: inherit;
    font-weight: 500;
  }
}