@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Playfair+Display:wght@400;500;600;700&display=swap");
* {
  min-inline-size: 0; }

/*==================================================
ふわっ
===================================*/
/* fadeIn */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeInAnime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/* fadeDown */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/* fadeLeft */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
/* fadeRight */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0; }

/*==================================================
ぱたっ
===================================*/
/* flipDown */
.flipDown {
  animation-name: flipDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes flipDownAnime {
  from {
    transform: perspective(2500px) rotateX(100deg);
    opacity: 0; }
  to {
    transform: perspective(2500px) rotateX(0);
    opacity: 1; } }
/* flipLeft */
.flipLeft {
  animation-name: flipLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0; }

@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0; }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1; } }
/* flipLeftTop */
.flipLeftTop {
  animation-name: flipLeftTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(-15deg);
    opacity: 0; }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1; } }
/* flipRight */
.flipRight {
  animation-name: flipRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  opacity: 0; }

@keyframes flipRightAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
    opacity: 0; }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1; } }
/* flipRightTop */
.flipRightTop {
  animation-name: flipRightTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(25deg);
    opacity: 0; }
  to {
    transform: translate(0, 1) rotate(0deg);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger {
  opacity: 0; }

/*==================================================
くるっ
===================================*/
/* rotateX */
.rotateX {
  animation-name: rotateXAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateXAnime {
  from {
    transform: rotateX(0);
    opacity: 0; }
  to {
    transform: rotateX(-360deg);
    opacity: 1; } }
/* rotateY */
.rotateY {
  animation-name: rotateYAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateYAnime {
  from {
    transform: rotateY(0);
    opacity: 0; }
  to {
    transform: rotateY(-360deg);
    opacity: 1; } }
/* rotateLeftZ */
.rotateLeftZ {
  animation-name: rotateLeftZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateLeftZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0; }
  to {
    transform: rotateZ(-360deg);
    opacity: 1; } }
/* rotateRightZ */
.rotateRightZ {
  animation-name: rotateRightZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes rotateRightZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0; }
  to {
    transform: rotateZ(360deg);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger {
  opacity: 0; }

/*==================================================
ぶわっ、ぽんっ、どどんっ
===================================*/
/* zoomIn */
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; }

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }
/* zoomOut */
.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; }

@keyframes zoomOutAnime {
  from {
    transform: scale(1.2);
    opacity: 0; }
  to {
    transform: scale(1);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.zoomInTrigger,
.zoomOutTrigger {
  opacity: 0; }

/*==================================================
じわっ
===================================*/
/* blur */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0; }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.blurTrigger {
  opacity: 0; }

/*==================================================
にょろっ
===================================*/
/* smooth */
.smooth {
  animation-name: smoothAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  　transform-origin: left;
  opacity: 0; }

@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0; }
  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1; } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.smoothTrigger {
  opacity: 0; }

/*==================================================
背景色が伸びて出現
===================================*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0; }

@keyframes bgextendAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*左から右*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/ }

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }
/*右から左*/
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/ }

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0); }
  50% {
    transform-origin: right;
    transform: scaleX(1); }
  50.001% {
    transform-origin: left; }
  100% {
    transform-origin: left;
    transform: scaleX(0); } }
/*下から上*/
.bgDUextend::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/ }

@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0); }
  50% {
    transform-origin: bottom;
    transform: scaleY(1); }
  50.001% {
    transform-origin: top; }
  100% {
    transform-origin: top;
    transform: scaleY(0); } }
/*上から下*/
.bgUDextend::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #FFFF00;
  /*伸びる背景色の設定*/ }

@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0); }
  50% {
    transform-origin: top;
    transform: scaleY(1); }
  50.001% {
    transform-origin: bottom; }
  100% {
    transform-origin: bottom;
    transform: scaleY(0); } }
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
  opacity: 0; }

/*==================================================
枠線が伸びて出現
===================================*/
/*枠線が伸びて出現*/
.lineTrigger {
  position: relative;
  /* 枠線が書かれる基点*/
  opacity: 0; }

.lineTrigger.lineanime {
  animation-name: lineAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards; }

@keyframes lineAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/*上下線*/
.lineTrigger::before,
.lineTrigger::after {
  position: absolute;
  content: '';
  width: 0;
  height: 1px;
  background: #333;
  /* 枠線の色*/ }

/*左右線*/
.line2::before,
.line2::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 0;
  background: #333;
  /* 枠線の色*/ }

/*上線*/
.lineTrigger::before {
  top: 0;
  left: 0; }

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;
  /*表示されて0秒後に上線が0.5秒かけて表示*/ }

/*右線*/
.line2::before {
  top: 0;
  right: 0; }

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;
  /*表示されて0.5秒後に右線が0.5秒かけて表示*/ }

/*下線*/
.lineTrigger::after {
  bottom: 0;
  right: 0; }

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;
  /*表示されて1秒後に下線が0.5秒かけて表示*/ }

/*左線*/
.line2::after {
  bottom: 0;
  left: 0; }

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;
  /*表示されて1.5秒後に左線が0.5秒かけて表示*/ }

@keyframes lineAnime {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }
@keyframes lineAnime2 {
  0% {
    height: 0%; }
  100% {
    height: 100%; } }
/*枠線内側の要素*/
.lineTrigger.lineanime .lineinappear {
  animation: lineInnerAnime .5s linear 1.5s forwards;
  /*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;
  /*初期値を透過0にする*/ }

@keyframes lineInnerAnime {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*==================================================
アニメーション設定
===================================*/
/* アニメーションの回数を決めるCSS*/
.count2 {
  animation-iteration-count: 2;
  /*この数字を必要回数分に変更*/ }

.countinfinite {
  animation-iteration-count: infinite;
  /*無限ループ*/ }

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05 {
  animation-delay: 0.5s; }

.delay-time08 {
  animation-delay: 0.8s; }

.delay-time1 {
  animation-delay: 1s; }

.delay-time15 {
  animation-delay: 1.5s; }

.delay-time2 {
  animation-delay: 2s; }

.delay-time25 {
  animation-delay: 2.5s; }

/* アニメーション自体が変化する時間を決めるCSS*/
.change-time05 {
  animation-duration: 0.5s; }

.change-time1 {
  animation-duration: 1s; }

.change-time15 {
  animation-duration: 1.5s; }

.change-time2 {
  animation-duration: 2s; }

.change-time25 {
  animation-duration: 2.5s; }

#menuCol {
  font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  position: fixed;
  width: 180px;
  height: 100%;
  overflow: hidden;
  z-index: 1000;
  top: 0;
  left: 0; }

@media screen and (max-width: 991px) {
  #menuCol {
    width: 50px; } }
@media screen and (max-width: 767px) {
  #menuCol {
    width: 40px; } }
#headerCol {
  font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  position: relative;
  height: 100%;
  height: 100vh;
  height: 100dvh; }
  #headerCol #headerColInner {
    transition: .5s ease;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    height: 100dvh;
    padding: 40px 20px; }
    #headerCol #headerColInner .title {
      writing-mode: vertical-rl;
      text-orientation: upright;
      margin: 40px auto;
      font-size: clamp(0.625rem, calc(0.4464rem + 0.5714vw), 0.875rem);
      font-weight: 500;
      letter-spacing: 0.1em; }
    #headerCol #headerColInner .menuSet {
      margin-top: auto; }
      #headerCol #headerColInner .menuSet .item a {
        position: relative;
        font-size: clamp(0.625rem, calc(0.4464rem + 0.5714vw), 0.875rem);
        font-size: 0.875rem;
        line-height: 2.5em;
        width: 100%;
        display: block; }
        #headerCol #headerColInner .menuSet .item a:after {
          content: "";
          position: absolute;
          top: 50%;
          right: 0;
          font-size: 0.875rem;
          width: 0.5em;
          height: 0.5em;
          border-right: 1px solid #FFFFFF;
          border-bottom: 1px solid #FFFFFF;
          transform: translateY(-65%) rotate(-45deg);
          transition: .4s ease;
          z-index: -1; }
        #headerCol #headerColInner .menuSet .item a:hover:after {
          transform: translateY(-45%) rotate(0deg); }
      #headerCol #headerColInner .menuSet .openbtn {
        display: none; }

@media screen and (max-width: 991px) {
  #headerCol #headerColInner {
    padding: 20px 10px; }
    #headerCol #headerColInner .menuSet {
      display: none; }
    #headerCol #headerColInner .openbtn {
      position: relative;
      display: block;
      z-index: 9999;
      cursor: pointer;
      width: 100%;
      height: 50px;
      margin: 0 auto;
      transition: all .3s; }
      #headerCol #headerColInner .openbtn span {
        display: inline-block;
        transition: all .3s;
        position: absolute;
        left: 0;
        height: 1px;
        background-color: #FFFFFF;
        width: 100%; }
        #headerCol #headerColInner .openbtn span:nth-of-type(1) {
          top: 15px; }
        #headerCol #headerColInner .openbtn span:nth-of-type(2) {
          top: 23px; }
        #headerCol #headerColInner .openbtn span:nth-of-type(3) {
          top: 31px; }
      #headerCol #headerColInner .openbtn:hover {
        width: 80%; } }
#g-nav {
  font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  position: fixed;
  z-index: 99999999;
  top: 0;
  right: -120%;
  width: 100%;
  height: 100vh;
  transition: all 0.3s;
  color: #FFFFFF; }
  #g-nav::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/common/bg-gnavi.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; }
  #g-nav.panelactive {
    right: 0; }
    #g-nav.panelactive #g-nav-list {
      position: fixed;
      z-index: 999;
      width: 100%;
      height: 100vh;
      overflow: auto;
      -webkit-overflow-scrolling: touch; }
  #g-nav .navInner {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(80%, 600px); }
    #g-nav .navInner .logo {
      width: clamp(130px, 20vw, 300px);
      margin-inline: auto;
      margin-bottom: 50px; }
    #g-nav .navInner .navCol .item a {
      position: relative;
      font-size: 0.875rem;
      line-height: 2.5em;
      width: 100%;
      display: block; }
      #g-nav .navInner .navCol .item a:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        font-size: 0.875rem;
        width: 0.5em;
        height: 0.5em;
        border-right: 1px solid #FFFFFF;
        border-bottom: 1px solid #FFFFFF;
        transform: translateY(-65%) rotate(-45deg);
        transition: .4s ease;
        z-index: -1; }
      #g-nav .navInner .navCol .item a:hover:after {
        transform: translateY(-45%) rotate(0deg); }
    #g-nav .navInner .navCol .closeBtn {
      cursor: pointer;
      position: relative;
      width: clamp(200px, 20vw, 300px);
      position: relative;
      display: block;
      border: 1px solid #FFFFFF;
      text-align: center;
      font-size: 0.875rem;
      padding: 0.8em;
      margin-top: 50px;
      margin-inline: auto; }
      #g-nav .navInner .navCol .closeBtn .close {
        font-size: 0.875rem;
        position: absolute;
        z-index: 9999;
        top: 50%;
        right: 20px;
        cursor: pointer;
        width: 30px;
        height: 30px;
        transform: translateY(-50%); }
        #g-nav .navInner .navCol .closeBtn .close span {
          display: inline-block;
          transition: all .3s;
          position: absolute;
          right: 0;
          height: 1px;
          background-color: #FFFFFF;
          width: 100%; }
          #g-nav .navInner .navCol .closeBtn .close span:nth-of-type(1) {
            top: 50%;
            right: 0;
            transform: translateY(-50%) rotate(-45deg);
            width: 100%; }
          #g-nav .navInner .navCol .closeBtn .close span:nth-of-type(2) {
            opacity: 0; }
          #g-nav .navInner .navCol .closeBtn .close span:nth-of-type(3) {
            top: 50%;
            right: 0;
            transform: translateY(-50%) rotate(45deg);
            width: 100%; }

#latestArticle .list {
  container: list / inline-size; }
  #latestArticle .list .listContainer {
    transition: .4s ease;
    --_column: 2;
    display: block grid;
    grid-template-columns: repeat(var(--_column), 1fr);
    gap: clamp(20px, 3cqi, 40px); }
    #latestArticle .list .listContainer .listItem {
      position: relative;
      display: block grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      gap: 10px; }
      #latestArticle .list .listContainer .listItem .pic {
        overflow: hidden;
        border-radius: 0 20px 0 20px; }
        #latestArticle .list .listContainer .listItem .pic a {
          display: block; }
          #latestArticle .list .listContainer .listItem .pic a img {
            transition: .4s ease;
            object-fit: cover;
            aspect-ratio: 16 / 9;
            vertical-align: bottom; }
      #latestArticle .list .listContainer .listItem .data {
        margin-top: 8px; }
        #latestArticle .list .listContainer .listItem .data .category {
          display: inline-block;
          color: #FFF;
          font-size: 0.75rem;
          font-feature-settings: "palt";
          letter-spacing: 0.1em;
          line-height: 1.8em;
          font-weight: 600;
          background-color: #d7b575;
          padding: .3em .8em;
          margin-right: .5em; }
        #latestArticle .list .listContainer .listItem .data .time {
          display: inline-block;
          font-size: clamp(0.75rem, calc(0.6943rem + 0.241vw), 0.875rem);
          font-feature-settings: "palt";
          letter-spacing: 0.1em;
          line-height: 2em;
          color: #d7b575; }
      #latestArticle .list .listContainer .listItem .tit {
        transition: .4s ease;
        font-size: clamp(0.875rem, calc(0.8193rem + 0.241vw), 1rem); }
      #latestArticle .list .listContainer .listItem::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        color: antiquewhite;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid #d7b575; }
      #latestArticle .list .listContainer .listItem:hover .pic a img {
        transform: scale(1.1); }
      #latestArticle .list .listContainer .listItem:hover .tit {
        color: #42B975; }
@container list (inline-size >= 991px) {
  #latestArticle .list .listContainer {
    --_column: 3; } }
@media screen and (max-width: 767px) {
  #latestArticle .list .listContainer {
    --_column: 1;
    grid-template-columns: repeat(var(--_column), 1fr); } }
.l_post {
  margin-bottom: clamp(50px, 10vw, 200px); }
  .l_post .postTitleCol {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5em;
    border-bottom: 1px solid #000000; }
  .l_post .l_post__header {
    margin: clamp(30px, 9vw, 90px) auto; }
    .l_post .l_post__header .container {
      max-width: 1040px; }
    .l_post .l_post__header .txtCol {
      display: flex;
      flex-direction: column-reverse; }
      .l_post .l_post__header .txtCol .tit {
        margin: 0.5em 0; }
      .l_post .l_post__header .txtCol .time {
        font-size: 1rem;
        font-weight: 500; }
        @media screen and (max-width: 767px) {
          .l_post .l_post__header .txtCol .time {
            font-size: 0.75rem; } }
    .l_post .l_post__header .tagTit {
      font-size: 0.75rem;
      font-feature-settings: "palt";
      letter-spacing: 0.1em;
      line-height: 1.8em;
      background-color: #CEAAFF;
      color: #FFFFFF;
      padding: .2em 1em .3em;
      line-height: normal;
      display: inline-block;
      margin-top: 1em;
      margin-bottom: 1.5em; }
      @media screen and (max-width: 767px) {
        .l_post .l_post__header .tagTit {
          font-size: 0.625rem; } }
    .l_post .l_post__header .tagCol {
      display: flex;
      gap: 1em; }
      .l_post .l_post__header .tagCol .tag {
        font-size: 0.875rem;
        font-weight: 500; }
        @media screen and (max-width: 767px) {
          .l_post .l_post__header .tagCol .tag {
            font-size: 0.75rem; } }
        .l_post .l_post__header .tagCol .tag a {
          transition: all .5s ease; }
          .l_post .l_post__header .tagCol .tag a:hover {
            color: #CEAAFF; }
    .l_post .l_post__header .picCol {
      margin: clamp(30px, 9vw, 90px) auto 0; }
      .l_post .l_post__header .picCol .pic img {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: 100%;
        vertical-align: bottom; }
  .l_post .l_post__section .picCol .pic {
    margin-top: clamp(20px, 5vw, 50px); }
    .l_post .l_post__section .picCol .pic img {
      aspect-ratio: 3 / 2;
      width: 100%;
      height: 100%;
      vertical-align: bottom; }
  .l_post .l_post__section .picCol .notesText {
    margin-top: 1em; }
  .l_post .l_post__section .videoCol {
    margin-top: clamp(20px, 5vw, 50px); }
  .l_post .l_post__section .youtubeCol {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    margin-top: clamp(20px, 5vw, 50px); }
  .l_post .l_post__section:not(:last-child) {
    margin-bottom: clamp(80px, 10vw, 150px); }
  .l_post .l_post__section .mSet {
    margin: 50px 0; }
  .l_post .l_post__section .mB {
    margin-bottom: 50px; }
  .l_post .l_post__section .mT {
    margin-top: 50px; }
  .l_post .l_post__section .tit {
    padding-bottom: 1em;
    margin-bottom: clamp(0.5em, 2vw, 1em);
    border-bottom: 1px solid #e9e4f2;
    position: relative; }
  .l_post .l_post__section .txt {
    padding-top: 20px;
    padding-bottom: 20px; }
  .l_post .l_post__section .container {
    max-width: 1040px; }
  .l_post .l_post__section .listCol {
    padding-top: 10px;
    padding-bottom: 10px; }
    .l_post .l_post__section .listCol .listItem:not(:last-child) {
      margin-bottom: .5em; }
    .l_post .l_post__section .listCol.dot {
      padding-left: clamp(1.35em, 2vw, 1.25em); }
      .l_post .l_post__section .listCol.dot .listItem {
        list-style-type: disc; }
  .l_post .l_post__section .linkText {
    transition: all .5s ease;
    color: #42B975;
    text-decoration: underline; }
    .l_post .l_post__section .linkText:hover {
      color: #CEAAFF; }

#contact .gC01 {
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-areas: "logo tit" "logo txt";
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: center; }
  #contact .gC01 .logoCol {
    margin-inline: auto;
    width: clamp(200px, 20vw, 300px);
    grid-area: logo; }
  #contact .gC01 .tit {
    margin-bottom: 1em;
    grid-area: tit; }
    #contact .gC01 .tit .brTag {
      display: none; }
  #contact .gC01 .btmCol {
    grid-area: txt; }
  #contact .gC01 .btmCol .btnCol {
    margin-top: 2em; }
    #contact .gC01 .btmCol .btnCol .btn-l {
      width: clamp(200px, 20vw, 300px);
      position: relative;
      display: block;
      border: 1px solid #000000;
      text-align: center;
      font-size: clamp(0.75rem, calc(0.6386rem + 0.4819vw), 1rem);
      font-feature-settings: "palt";
      letter-spacing: 0.1em;
      line-height: 2em;
      padding: 0.8em; }
      #contact .gC01 .btmCol .btnCol .btn-l:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        font-size: clamp(0.75rem, calc(0.6386rem + 0.4819vw), 1rem);
        font-feature-settings: "palt";
        letter-spacing: 0.1em;
        line-height: 2em;
        width: 1em;
        height: 1em;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        transform: translateY(-65%) rotate(45deg);
        transition: .4s ease; }
      #contact .gC01 .btmCol .btnCol .btn-l:hover:after {
        transform: translateY(-45%) rotate(45deg); }

@media screen and (max-width: 1199px) {
  #contact .gC01 {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo tit" "txt txt";
    grid-column-gap: 50px;
    grid-row-gap: 50px; }
    #contact .gC01 .logoCol {
      margin: 0 auto;
      width: clamp(200px, 20vw, 300px);
      grid-area: logo; }
    #contact .gC01 .tit .brTag {
      display: block; } }
@media screen and (max-width: 767px) {
  #contact .gC01 {
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "tit" "txt";
    grid-column-gap: 20px;
    grid-row-gap: 20px; }
    #contact .gC01 .logoCol {
      width: clamp(100px, 15vw, 200px); }
    #contact .gC01 .tit {
      margin-bottom: 0.25em; } }
#mainFooter {
  font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
  #mainFooter .container {
    color: #000000;
    background-color: #FFFF00;
    position: relative;
    width: calc(100%  - 180px);
    padding: calc( var(--padding-set) + 4vw ) var(--padding-set) var(--padding-set);
    margin-left: auto;
    overflow: hidden; }
  #mainFooter .grCol {
    grid-template-columns: auto 1fr;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    margin-bottom: 1em; }
  #mainFooter .textCol {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-row-gap: 40px; }
    #mainFooter .textCol .tit01 .brTag {
      display: none; }
    #mainFooter .textCol .footerNavCol {
      margin: auto 0; }
      #mainFooter .textCol .footerNavCol .footerNav {
        font-size: 0.75rem;
        font-feature-settings: "palt";
        letter-spacing: 0.1em;
        line-height: 1.8em;
        font-weight: 700;
        display: flex;
        flex-wrap: wrap;
        line-height: 1em;
        gap: 20px; }
    #mainFooter .textCol .snsCol {
      margin-top: auto; }
      #mainFooter .textCol .snsCol .tit02 {
        font-size: 0.75rem;
        font-feature-settings: "palt";
        letter-spacing: 0.1em;
        line-height: 1.8em;
        background-color: #000000;
        color: #FFFFFF;
        padding: .3em 2em;
        line-height: normal;
        display: inline-block;
        margin-bottom: 1.5em; }
      #mainFooter .textCol .snsCol .list {
        display: flex;
        align-items: center;
        gap: 20px; }
        #mainFooter .textCol .snsCol .list .item a {
          width: 30px;
          height: auto;
          display: block; }
  #mainFooter .logoCol {
    width: clamp(100px, 15vw, 200px);
    margin: auto 0 0 auto;
    position: relative;
    aspect-ratio: 1 / 1; }
    #mainFooter .logoCol .logo01 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      aspect-ratio: 1 / 1;
      animation: rotate-z 30s linear infinite; }
@keyframes rotate-z {
  from {
    transform: rotateZ(0deg); }
  to {
    transform: rotateZ(360deg); } }
    #mainFooter .logoCol .logo02 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      aspect-ratio: 1 / 1; }
  #mainFooter small {
    font-size: 0.625rem;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
    line-height: 1.8em; }

@media screen and (max-width: 991px) {
  #mainFooter .container {
    width: calc(100%  - 50px); }
  #mainFooter .grCol {
    grid-column-gap: 20px; }
  #mainFooter .textCol .tit01 .brTag {
    display: block; } }
@media screen and (max-width: 767px) {
  #mainFooter .container {
    width: calc(100%  - 40px);
    padding: calc( var(--padding-set) + 8vw ) var(--padding-set) var(--padding-set); }
  #mainFooter .grCol {
    grid-template-columns: 1fr;
    grid-row-gap: 20px; }
  #mainFooter .textCol {
    grid-row-gap: 20px; }
  #mainFooter .logoCol {
    margin: 0 auto; } }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 0px;
  height: -webkit-fill-available; }

body {
  background-color: #000000;
  margin: 0;
  font-size: 16px;
  box-sizing: border-box;
  font-feature-settings: "palt";
  min-height: 100vh;
  min-height: -webkit-fill-available;
  position: relative; }

a:link, a:visited, a:hover, a:active {
  text-decoration: none; }

.flCol {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between; }

.grCol {
  display: grid; }

.spBr {
  display: none; }

.tabBr {
  display: none; }

.pcBr {
  display: block; }

@media screen and (max-width: 991px) {
  .tabBr {
    display: block; } }
@media screen and (max-width: 767px) {
  .spBr {
    display: block; }

  .pcBr {
    display: none; } }
.text-xxs {
  font-size: 0.625rem;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.8em;
  font-weight: 400; }

.text-xs {
  font-size: 0.75rem;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.8em;
  font-weight: 400; }

.text-sm {
  font-size: clamp(0.75rem, calc(0.6943rem + 0.241vw), 0.875rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 2em;
  font-weight: 400; }
  .text-sm.bold {
    font-weight: 700; }

.text-md {
  font-size: clamp(0.75rem, calc(0.6386rem + 0.4819vw), 1rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 2em;
  font-weight: 400; }
  .text-md.bold {
    font-weight: 700; }

.text-lg {
  font-size: clamp(1rem, calc(0.8886rem + 0.4819vw), 1.25rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.5em;
  font-weight: 700; }

.text-xl {
  font-size: clamp(1rem, calc(0.7214rem + 1.2048vw), 1.625rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.5em;
  font-weight: 700; }

.text-xxl {
  font-size: clamp(1.125rem, calc(0.7349rem + 1.6867vw), 2rem);
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.5em;
  font-weight: 700; }

.text-3l {
  font-size: clamp(1.375rem, calc(-0.3214rem + 5.4286vw), 3.75rem);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  line-height: 1.35em;
  font-weight: 900; }

.text-4l {
  font-size: clamp(1.625rem, calc(0.1071rem + 4.8571vw), 3.75rem);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  line-height: 1.35em;
  font-weight: 900; }

.notesText {
  font-size: 0.625rem;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  line-height: 1.8em;
  font-weight: 400; }

:root {
  --padding-set: 5vw; }
  @media screen and (max-width: 991px) {
    :root {
      --padding-set: 5vw; } }
  @media screen and (max-width: 767px) {
    :root {
      --padding-set: 10vw; } }

main {
  font-family: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
  main #wrap {
    width: calc(100% - 180px);
    margin-left: auto;
    overflow: hidden;
    background-color: #FFFFFF; }
  @media screen and (max-width: 991px) {
    main #wrap {
      width: calc(100%  - 50px); } }
  @media screen and (max-width: 767px) {
    main #wrap {
      width: calc(100%  - 40px); } }
  main .secCol {
    padding: calc( var(--padding-set) + 4vw ) 0; }
  main .container {
    padding: 0 var(--padding-set);
    max-width: 1400px;
    margin-inline: auto; }
  main .titleCol {
    margin-bottom: 1em;
    /* 上下のアニメーション*/ }
    main .titleCol span {
      display: block; }
    main .titleCol .slide-in {
      overflow: hidden;
      display: inline-block; }
      main .titleCol .slide-in .slide-in_inner {
        display: inline-block; }
    main .titleCol .downAnime {
      opacity: 0;
      /* 事前に透過0 にして消しておく*/ }
    main .titleCol .slideAnimeDownUp {
      animation-name: slideTextY100;
      animation-duration: 0.8s;
      animation-fill-mode: forwards;
      opacity: 0; }
@keyframes slideTextY100 {
  from {
    transform: translateY(100%);
    /* 要素を上の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateY(0);
    /* 要素を元の位置に移動*/
    opacity: 1; } }
    main .titleCol .slideAnimeUpDown {
      animation-name: slideTextY-100;
      animation-duration: 0.8s;
      animation-fill-mode: forwards;
      opacity: 0; }
@keyframes slideTextY-100 {
  from {
    transform: translateY(-100%);
    /* 要素を下の枠外に移動*/
    opacity: 0; }
  to {
    transform: translateY(0);
    /* 要素を元の位置に移動*/
    opacity: 1; } }
  @media screen and (max-width: 767px) {
    main .secCol {
      padding: calc( var(--padding-set) + 8vw ) 0; } }

#top #kvCol {
  position: relative;
  margin-left: auto;
  overflow: hidden;
  padding: 3vw;
  margin-bottom: 100px; }
  #top #kvCol .splide__track {
    max-width: 1400px;
    margin-inline: auto;
    border-radius: 50px;
    overflow: hidden; }
  #top #kvCol .splide__list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px; }
  #top #kvCol .splide__list .splide__slide {
    width: 100%;
    height: 90vh;
    overflow: hidden; }
    #top #kvCol .splide__list .splide__slide .infoCol {
      position: absolute;
      z-index: 500;
      color: black;
      padding: 20px;
      background-color: #FFFFFF;
      left: 0;
      bottom: 0; }
      #top #kvCol .splide__list .splide__slide .infoCol .role {
        color: #CEAAFF;
        font-size: 0.75rem;
        font-weight: 600; }
      #top #kvCol .splide__list .splide__slide .infoCol .name {
        font-size: clamp(1rem, calc(0.8886rem + 0.4819vw), 1.25rem);
        font-feature-settings: "palt";
        letter-spacing: 0.1em;
        line-height: 1.5em;
        font-weight: 600;
        letter-spacing: 0.05em; }
  #top #kvCol .controlCol {
    width: 150px;
    position: absolute;
    right: calc(2vw + 20px);
    bottom: calc(2vw + 20px);
    z-index: 500;
    border-radius: 10px; }
    #top #kvCol .controlCol .splide__progress {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      display: block;
      width: 40%;
      height: 2px; }
      #top #kvCol .controlCol .splide__progress .splide__progress__bar {
        height: 1px;
        background: #FFFFFF; }
    #top #kvCol .controlCol .splide__arrows {
      display: flex;
      justify-content: space-between;
      align-items: center; }
      #top #kvCol .controlCol .splide__arrows .splide__arrow {
        position: relative;
        top: unset;
        transform: unset;
        width: 1em;
        height: 1em;
        background: unset;
        border: unset;
        border-radius: unset;
        opacity: 1; }
        #top #kvCol .controlCol .splide__arrows .splide__arrow.splide__arrow--prev {
          left: unset; }
        #top #kvCol .controlCol .splide__arrows .splide__arrow.splide__arrow--next {
          right: unset; }
        #top #kvCol .controlCol .splide__arrows .splide__arrow svg {
          fill: #FFFFFF; }
@media screen and (max-width: 991px) {
  #top #kvCol {
    margin-bottom: 100px; }
    #top #kvCol .splide__track {
      border-radius: 30px; }
    #top #kvCol .splide__list img {
      border-radius: 30px; }
    #top #kvCol .splide__list .splide__slide {
      height: 85vh; }
      #top #kvCol .splide__list .splide__slide .infoCol {
        padding: 10px; }
        #top #kvCol .splide__list .splide__slide .infoCol .role {
          font-size: 0.625rem; }
        #top #kvCol .splide__list .splide__slide .infoCol .name {
          font-size: 0.875rem; }
    #top #kvCol .controlCol {
      width: 120px;
      padding: 0; } }
@media screen and (max-width: 767px) {
  #top #kvCol {
    margin-bottom: 50px; }
    #top #kvCol .splide__track {
      border-radius: 20px; }
    #top #kvCol .splide__list img {
      border-radius: 20px; } }
#top #about .gC01 {
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-areas: "logo tit" "logo txt";
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: center; }
  #top #about .gC01 .logoCol {
    margin-inline: auto;
    width: clamp(300px, 25vw, 400px);
    grid-area: logo; }
  #top #about .gC01 .tit {
    margin-bottom: 1em;
    grid-area: tit; }
    #top #about .gC01 .tit .brTag {
      display: none; }
  #top #about .gC01 .txt {
    grid-area: txt; }
    #top #about .gC01 .txt .txtItem:not(:last-child) {
      margin-bottom: 1em; }
#top #about .boxSet {
  position: relative;
  z-index: 1; }
  #top #about .boxSet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 300vw;
    height: 500px;
    background-color: rgba(255, 64, 64, 0.1);
    z-index: -5; }
#top #about .box {
  width: 80%;
  margin-top: 10vw; }
  #top #about .box .textCol {
    margin-bottom: 2em; }
    #top #about .box .textCol .titleCol {
      margin-bottom: 0.35em; }
      #top #about .box .textCol .titleCol span {
        font-weight: 300; }
  #top #about .box.box01 {
    margin-left: auto; }
    #top #about .box.box01 .textCol {
      padding-right: var(--padding-set); }
  #top #about .box.box02 {
    margin-right: auto; }
    #top #about .box.box02 .textCol {
      padding-left: var(--padding-set); }
@media screen and (max-width: 1199px) {
  #top #about .gC01 {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo tit" "txt txt";
    grid-column-gap: 50px;
    grid-row-gap: 50px; }
    #top #about .gC01 .tit .brTag {
      display: block; }
  #top #about .box {
    width: 90%; } }
@media screen and (max-width: 767px) {
  #top #about .gC01 {
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "tit" "txt";
    grid-column-gap: 20px;
    grid-row-gap: 20px; }
    #top #about .gC01 .logoCol {
      width: clamp(150px, 15vw, 200px); }
    #top #about .gC01 .tit {
      margin-bottom: 0.25em; }
  #top #about .box {
    width: 90%;
    margin-top: 12vw; }
    #top #about .box .textCol {
      margin-bottom: 1em; }
    #top #about .box.box02 .textCol .titleCol .brTag {
      display: none; } }
#top #members {
  background-color: #6133A0;
  color: #e9e4f2;
  position: relative;
  z-index: 1;
  overflow: hidden; }
  #top #members .titleCol {
    margin-bottom: 0em; }
  #top #members .tabCol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 20px;
    justify-items: stretch;
    align-items: center;
    padding: 5vw 8vw;
    margin-inline: auto;
    max-width: 1200px; }
    #top #members .tabCol .item a {
      position: relative;
      display: block;
      border: 1px solid #e9e4f2;
      text-align: center;
      font-size: clamp(0.75rem, calc(0.6386rem + 0.4819vw), 1rem);
      font-feature-settings: "palt";
      letter-spacing: 0.1em;
      line-height: 2em;
      padding: 0.8em; }
      #top #members .tabCol .item a:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        font-size: clamp(0.75rem, calc(0.6386rem + 0.4819vw), 1rem);
        font-feature-settings: "palt";
        letter-spacing: 0.1em;
        line-height: 2em;
        width: 1em;
        height: 1em;
        border-right: 1px solid #e9e4f2;
        border-bottom: 1px solid #e9e4f2;
        transform: translateY(-65%) rotate(45deg);
        transition: .4s ease; }
      #top #members .tabCol .item a:hover:after {
        transform: translateY(-45%) rotate(45deg); }
  #top #members .area {
    display: none;
    opacity: 0; }
    #top #members .area.is-active {
      display: block;
      animation-name: displayAnime;
      animation-duration: 2s;
      animation-fill-mode: forwards; }
@keyframes displayAnime {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
    #top #members .area .teamName {
      font-size: clamp(1rem, calc(0.8886rem + 0.4819vw), 1.25rem);
      font-feature-settings: "palt";
      letter-spacing: 0.1em;
      line-height: 1.5em;
      font-weight: 600;
      letter-spacing: 0.05em;
      border-bottom: 1px solid #49178D;
      padding-bottom: 0.5em;
      margin-bottom: 1.5em; }
    #top #members .area .list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-column-gap: 24px;
      grid-row-gap: 54px;
      justify-items: stretch;
      margin-inline: auto;
      max-width: 1500px; }
      #top #members .area .list .listItem {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        gap: 10px; }
        #top #members .area .list .listItem .pic img {
          border-radius: 10px;
          vertical-align: bottom; }
        #top #members .area .list .listItem .textCol .name {
          font-size: clamp(1rem, calc(0.8886rem + 0.4819vw), 1.25rem);
          font-feature-settings: "palt";
          letter-spacing: 0.1em;
          line-height: 1.5em;
          font-weight: 600;
          letter-spacing: 0.05em; }
        #top #members .area .list .listItem .textCol .role {
          color: #CEAAFF;
          font-size: 0.75rem;
          font-weight: 600; }
        #top #members .area .list .listItem .snsCol {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          gap: 12px;
          border-top: 1px solid #49178D;
          border-bottom: 1px solid #49178D;
          padding: 5px 0;
          margin-top: 10px; }
          #top #members .area .list .listItem .snsCol li {
            width: 15px;
            height: auto;
            opacity: 0.9; }
            #top #members .area .list .listItem .snsCol li a {
              transition: opacity .4s ease; }
              #top #members .area .list .listItem .snsCol li a:hover {
                opacity: 0.4; }
          #top #members .area .list .listItem .snsCol .none {
            color: #CEAAFF;
            font-size: 0.625rem; }
    #top #members .area .btnCol {
      padding: min(20%, 50px) 0 0; }
      #top #members .area .btnCol .linkItem a {
        width: clamp(200px, 20vw, 300px);
        position: relative;
        display: block;
        border: 1px solid #e9e4f2;
        text-align: center;
        font-size: clamp(0.75rem, calc(0.6386rem + 0.4819vw), 1rem);
        font-feature-settings: "palt";
        letter-spacing: 0.1em;
        line-height: 2em;
        padding: 0.8em;
        margin: 0 auto; }
        #top #members .area .btnCol .linkItem a:after {
          content: "";
          position: absolute;
          top: 50%;
          right: 20px;
          font-size: clamp(0.75rem, calc(0.6386rem + 0.4819vw), 1rem);
          font-feature-settings: "palt";
          letter-spacing: 0.1em;
          line-height: 2em;
          width: 1em;
          height: 1em;
          border-right: 1px solid #e9e4f2;
          border-bottom: 1px solid #e9e4f2;
          transform: translateY(-65%) rotate(45deg);
          transition: .4s ease; }
        #top #members .area .btnCol .linkItem a:hover:after {
          transform: translateY(-45%) rotate(45deg); }
  #top #members .logos {
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2; }
    #top #members .logos::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(../images/common/logo_mbd-w04.svg);
      background-repeat: repeat-y;
      background-position: 0 0;
      background-size: contain;
      z-index: 5;
      animation: logoText 30s linear infinite;
      opacity: .1; }
@keyframes logoText {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 0 -2500px; } }
@media screen and (max-width: 991px) {
  #top #members .area .list {
    grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 767px) {
  #top #members .tabCol {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    padding: 8vw 0; }
    #top #members .tabCol .item a {
      padding: 0.8em; }
  #top #members .area {
    margin-bottom: 2vw; }
    #top #members .area .list {
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 20px;
      grid-row-gap: 30px; }
      #top #members .area .list .listItem {
        gap: 5px; }
        #top #members .area .list .listItem .pic img {
          border-radius: 5px; }
        #top #members .area .list .listItem .snsCol {
          margin-top: 5px; }
          #top #members .area .list .listItem .snsCol li {
            width: 15px;
            height: auto;
            opacity: 0.9; }
            #top #members .area .list .listItem .snsCol li a {
              transition: opacity .4s ease; }
              #top #members .area .list .listItem .snsCol li a:hover {
                opacity: 0.4; }
    #top #members .area .btnCol .linkItem a {
      width: 100%; }
  #top #members .logos {
    width: 100px; } }
#top #services .list {
  container: list / inline-size; }
  #top #services .list .listContainer {
    transition: .4s ease;
    --_column: 2;
    display: block grid;
    grid-template-columns: repeat(var(--_column), 1fr);
    gap: clamp(20px, 3cqi, 40px); }
    #top #services .list .listContainer .listItem {
      position: relative;
      display: block grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      gap: 10px; }
      #top #services .list .listContainer .listItem .pic {
        overflow: hidden;
        border-radius: 0 20px 0 20px; }
        #top #services .list .listContainer .listItem .pic a {
          display: block; }
          #top #services .list .listContainer .listItem .pic a img {
            transition: .4s ease;
            object-fit: cover;
            aspect-ratio: 16 / 9;
            vertical-align: bottom; }
      #top #services .list .listContainer .listItem .data {
        margin-top: 8px; }
        #top #services .list .listContainer .listItem .data .category {
          display: inline-block;
          color: #FFF;
          font-size: 0.75rem;
          font-feature-settings: "palt";
          letter-spacing: 0.1em;
          line-height: 1.8em;
          font-weight: 600;
          background-color: #d7b575;
          padding: .3em .8em;
          margin-right: .5em; }
        #top #services .list .listContainer .listItem .data .time {
          display: inline-block;
          font-size: clamp(0.75rem, calc(0.6943rem + 0.241vw), 0.875rem);
          font-feature-settings: "palt";
          letter-spacing: 0.1em;
          line-height: 2em;
          color: #d7b575; }
      #top #services .list .listContainer .listItem .tit {
        transition: .4s ease;
        font-size: clamp(0.875rem, calc(0.8193rem + 0.241vw), 1rem); }
      #top #services .list .listContainer .listItem::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        color: antiquewhite;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid #d7b575; }
      #top #services .list .listContainer .listItem:hover .pic a img {
        transform: scale(1.1); }
      #top #services .list .listContainer .listItem:hover .tit {
        color: #42B975; }
@container list (inline-size >= 991px) {
  #top #services .list .listContainer {
    --_column: 3; } }
@media screen and (max-width: 767px) {
  #top #services .list .listContainer {
    --_column: 1;
    grid-template-columns: repeat(var(--_column), 1fr); } }
#top #imagesCol .scroll_wrap {
  transform: rotate(-5deg); }
  #top #imagesCol .scroll_wrap .scroll_track {
    position: relative;
    display: flex;
    width: 100vw; }
    #top #imagesCol .scroll_wrap .scroll_track .scrollCol {
      padding: 0;
      width: 100vw;
      display: flex;
      flex-shrink: 0; }
      #top #imagesCol .scroll_wrap .scroll_track .scrollCol.scroll_inner01 {
        animation: slide1 30s -15s linear infinite; }
      #top #imagesCol .scroll_wrap .scroll_track .scrollCol.scroll_inner02 {
        animation: slide2 30s linear infinite; }
      #top #imagesCol .scroll_wrap .scroll_track .scrollCol .scroll_cont {
        display: inline-block;
        width: 100%;
        min-width: 100px;
        margin-right: 20px;
        list-style: none;
        text-align: center; }
        #top #imagesCol .scroll_wrap .scroll_track .scrollCol .scroll_cont .pic {
          border-radius: 20px;
          overflow: hidden; }
          #top #imagesCol .scroll_wrap .scroll_track .scrollCol .scroll_cont .pic img {
            display: block;
            width: 100%;
            height: auto; }
@keyframes slide1 {
  0% {
    transform: translateX(-100%); }
  to {
    transform: translateX(100%); } }
@keyframes slide2 {
  0% {
    transform: translateX(-200%); }
  to {
    transform: translateX(0); } }
@media screen and (max-width: 991px) {
  #top #imagesCol .scroll_wrap {
    margin-top: 30px; }
    #top #imagesCol .scroll_wrap .scroll_track .scrollCol .scroll_cont {
      min-width: 50px;
      margin-right: 5px; }
      #top #imagesCol .scroll_wrap .scroll_track .scrollCol .scroll_cont .pic {
        border-radius: 5px; } }

/*# sourceMappingURL=top_style.css.map */