@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =======================
共通
======================= */
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
}
a {
  transition: 0.3s;
}

/* フォント */
.ff-en {
  font-family: "Cormorant Garamond", serif !important;
  font-weight: 400;
}
.ff-mincho {
  font-family: "Shippori Mincho", serif !important;
  font-weight: 400;
}

/* 改行 */
@media print, screen and (min-width: 600px) {
  br.spview2 {
      display: none !important;
  }
}

/* タイトル */
.cmn-title {
  margin-bottom: 36px;
  .ff-en {
    color: #E8524C;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 0;
  }
  .is-style-section_ttl {
    font-family: "Shippori Mincho", serif;
    font-size: 65px;
    font-weight: 400;
    line-height: 1.1;
    text-align: left;
  }
}
.cmn-title.right {
  .ff-en {
    text-align: right;
  }
  h2 {
    text-align: right;
  }
}
@media (max-width: 960px) {
  .cmn-title {
    margin-bottom: 32px;
    .ff-en {
      font-size: 24px;
    }
    .is-style-section_ttl {
      font-size: 40px;
    }
  }
}

/* 丸いボタン */
.cmn-btn__circle {
  a {
    background: #E8524C;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.375;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 50%;
    width: 110px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    text-align: center;
    transform: scale(0.3);
    transition: 0.7s;
    opacity: 0;
    &::after {
      content: "";
      width: 20px;
      height: 14px;
      background: url(./img/arrow-icon-wh.png) no-repeat center/contain; 
    }
    &:hover {
      transform: scale(1.05);
      &::after {
        animation: hover-arrow 0.7s;
      }
    }
  }
  &.show a {
    transform: none;
    opacity: 1;
  }
}
@keyframes hover-arrow {
  0%, 100% {
    transform: none;
    opacity: 1;
  }
  50% {
    transform: translateX(30px);
    opacity: 0;
  }
  51% {
    transform: translateX(-30px);
    opacity: 0;
  }
  
}

/* リンク一覧 */
.cmn-links {
  justify-content: center;
  gap: 43px;
  p {
    width: calc((100% - 86px) / 3);
  }
  a {
    display: flex;
    position: relative;
    border: 1px solid #0B5989;
    background: #0B5989;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    gap: 16px;
    padding: 7px 10px;
    border-radius: 100px;
    &::before {
      content: "";
      width: 118px;
      height: 118px;
      aspect-ratio: 1 / 1;
      background: url(/wp-content/uploads/2026/06/link-img1.webp) no-repeat center/cover;
      border-radius: 50%;
    }
    &::after {
      content: "Schedule";
      color: #E8524C;
      font-size: 40px;
      font-weight: 500;
      line-height: 0.7;
      font-family: "Cormorant Garamond", serif;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -100%);
    }
    &:hover {
      background: #fff;
      color: #0B5989;
    }
  }
  .access {
    a::before {
      background-image: url(/wp-content/uploads/2026/06/link-img2.webp);
    }
    a::after {
      content: "Access";
    }
  }
  .faq {
    a::before {
      background-image: url(/wp-content/uploads/2026/06/link-img3.webp);
    }
    a::after {
      content: "FAQ";
    }
  }
}

@media (max-width: 960px) {
  .cmn-links {
    gap: 40px;
    flex-wrap: wrap;
    p {
      width: 100%;
    }
    a {
      font-size: 16px;  /* 18px → 16px */
      &::before {
        width: 80px;    /* 110px → 80px */
        height: 80px;   /* 110px → 80px */
      }
      &::after {
        font-size: 32px; /* 37px → 32px */
      }
    }
  }  
}

/* SNS一覧 */
.cmn-sns__lists {
  gap: 10px;
  align-items: center;
  margin-bottom: 35px;
  a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0B5989;
    border-radius: 50%;
    width: 67px;
    height: 67px;
    padding: 10px;
    transition: 0.3s;
    &:hover {
      background: #fff;
      opacity: 1;
    }
    img {
      height: 26px;
      object-fit: contain;
    }
  }
  .line img {
    height: 34px;
  }
}

/* コンテンツ */
.container-wide {
  width: calc(100vw - var(--swl-scrollbar_width, 0px));
  margin-left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px)/2);
  .container {
    max-width: 1232px;
    margin-inline: auto;
    padding-inline: 16px;
  }
}
.bg-lightblue {
  background: rgb(255 255 255 / 35%);
  background: #b6e1e6;
  width: calc(100vw - var(--swl-scrollbar_width, 0px));
  margin-left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px)/2);
  margin-bottom: 0;
  section {
    max-width: 1028px;
    margin-inline: auto;
    padding-inline: 16px;
  }
}

/* =======================
ヘッダー
======================= */
.-series .l-header__inner {
  align-items: center;
}
.l-header .c-gnav>li>a:after {
  bottom: -10px;
}
.c-gnav>.menu-item>a .ttl {
  font-size: 16px;
  font-weight: 700;
}

/* 追従ヘッダー */
.l-fixHeader {
  box-shadow: none;
}
.l-fixHeader:before {
  opacity: 0.85;
}
.l-fixHeader__inner {
  max-width: none;
}
.l-header__menuBtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 13px;
}
.c-iconBtn__icon {
  font-size: 20px;
  color: #fff;
}
.p-spMenu__closeBtn {
  width: 40px;
  height: 40px;
  background: #E8524C;
  border-radius: 50%;
  margin-top: 13px;
  margin-right: 13px;
}

/* =======================
ハンバーガーメニュー
======================= */
.p-spMenu {
  .c-widget__title {
    display: none;
  }
}
.p-spMenu__body {
  overflow: auto;
  .swell-block-button a {
    border: 1px solid var(--the-btn-bg);
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    max-width: 400px;
    margin-inline: auto;
    transition: 0.3s;
    &:hover {
      color: var(--the-btn-bg);
      background: #fff;
    }
  }
  .cmn-sns__lists {
    justify-content: center;
  }
}
.p-spMenu__nav {
  a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
    border: none;
    padding: 10px 0;
    &::before {
      content: none;
    }
    &:hover {
      background: none;
      padding: 10px 0;
    }
  }
  .c-smallNavTitle {
    margin: 0;
    opacity: 1;
    display: block;
    color: #E8524C;
    font-size: 12px;
    font-weight: 500;
    font-family: "Cormorant Garamond", serif;
  }

}

/* =======================
フッター
======================= */
.home :is(footer, .l-footer__widgetArea) {
  background: #90D1D8;
}
.w-beforeFooter {
  overflow: visible;
}

/* 追従CTA */
#fix_bottom_menu {
  display: block !important;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  &::before {
    content: none;
  }
  .menu_list {
    height: 100%;
    background: url(/wp-content/uploads/2026/05/fix-bg.png) no-repeat center/contain;
    width: 200px;
    height: 200px;
    position: fixed;
    right: 20px;
    bottom: 50px;
  }
  .menu-item a {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    &::before {
      content: "Let’s try!";
      color: #ffffff;
      opacity: 0.2;
      white-space: nowrap;
      font-size: 43px;
      font-weight: 600;
      font-family: "Cormorant Garamond", serif;
      order: 0;
      transition: 0.3s;
    }
    &::after {
      content: "";
      width: 20px;
      height: 14px;
      background: url(./img/arrow-icon-wh.png) no-repeat center / contain;
      margin-top: 10px;
    }
    &:hover {
      &::before {
        opacity: 1;
      }
      &::after {
        animation: hover-arrow 0.7s;
      }
    }
  }
  i {
    display: none !important;
  }
  span {
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    line-height: 1.5;
  }
}
[data-scrolled=true] #fix_bottom_menu {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 960px) {
  #fix_bottom_menu+.p-fixBtnWrap {
    bottom: 69px;
  }
  #fix_bottom_menu {
    box-shadow: 0 0 10px rgb(0 0 0 / 16%);
    &::before {
      content: "";
    }
    .menu_list {
      background: none;
      width: 100%;
      height: 65px;
      position: static;
    }
    .menu-item a {
      &::before {
        content: "Let’s try Flamenco!";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        font-size: 50px;
      }
      &:after {
        content: none;
      }
      &:hover::before {
        opacity: 0.2;
      }
    }
    i {
      display: none !important;
    }
    span {
      font-size: 16px;
    }
  }
}

/* 共通お問い合わせ */
.cmn-contact {
  position: relative;
  padding-block: 114px !important;
  .try {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    position: absolute;
    top: -114px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
  }
  h2 {
    margin-top: 0;
    margin-bottom: 32px;
    font-size: 50px;
    font-weight: 400;
  }
  .top {
    margin-bottom: 36px;
  }
  .line {
    position: absolute;
    right: 0;
    top: 0;
    p {
      font-weight: 500;
      margin-bottom: 10px;
      text-align: center;
    }
    figure {
      width: 120px;
      height: 120px;
      margin-inline: auto;
    }
  }
}
.cmn-contact__links {
  max-width: 940px;
  margin-inline: auto;
  > div {
    column-gap: 10%;
  }
  h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 26px;
    padding-bottom: 0;
    width: 80%;
    margin-inline: auto;
    &::before, &::after {
      content: "";
      height: 1px;
      width: 1px;
      background: #fff;
      position: static;
      flex-grow: 1;
    }
  }
  a {
    color: inherit;
  }
  .phone {
    width: 45%;
    a {
      font-size: 45px;
      letter-spacing: 0.05em;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      line-height: 1.4;
      &::before {
        content: "";
        width: 34px;
        height: 34px;
        background: url(/wp-content/uploads/2026/05/phone-icon.png) no-repeat center/contain;
        margin-top: 6px;
        transition: 0.3s;
      }
      &:hover {
        color: #E8524C;
        &::before {
          background-image: url(/wp-content/uploads/2026/05/phone-icon-red.png);
        }
      }
    }
  }
  .contact {
    width: 45%;
    h3 {
      margin-bottom: 20px;
    }
    .swell-block-button a {
      border: 1px solid var(--the-btn-bg);
      font-size: 22px;
      min-height: 80px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      transition: 0.3s;
      &:hover {
        color: var(--the-btn-bg);
        background: #fff;
      }
    }
  }
}

@media (max-width: 960px) {
  .cmn-contact {
    padding-block: 105px 65px !important;
    .try {
      width: 134px;
      height: 134px;
      font-size: 29px;
    }
    h2 {
      font-size: 32px;
    }
    .line {
      position: static;
    }
  }
  .cmn-contact__links {
    > div {
      column-gap: 4%;
    }
    h3 {
      gap: 12px;
      font-size: 16px;
      width: 100%;
      margin-inline: auto;
    }
    .phone {
      width: 48%;
      a {
        font-size: 32px;
        gap: 11px;
        &::before {
          width: 24px;
          height: 24px;
          margin-top: 6px;
        }
      }
    }
    .contact {
      width: 48%;
      .swell-block-button a {
        min-height: 60px;
        font-size: clamp(17px, 2vw, 22px);
      }
    }
  }
}

@media (max-width: 600px) {
  .cmn-contact {
    background-image: url(/wp-content/uploads/2026/05/contact-bg-sp.jpg) !important;
  }
  .cmn-contact__links {
    h3 {
      margin-bottom: 15px !important;
    }
    .phone {
      width: 100%;
    }
    .contact {
      width: 100%;
      .swell-block-button a {
        font-size: 18px;
      }
    }
  }
}
footer .l-container {
  max-width: 1296px;
}
.w-footer__box {
  flex-basis: auto;
}
.w-footer__box+.w-footer__box {
  margin-top: 0;
}
.w-footer__box:nth-of-type(1) {
  img {
    display: block;
    width: 170px;
    margin-bottom: 28px;
  }
  p {
    font-weight: 500;
  }
}
.w-footer__box:nth-of-type(2) {
  .menu {
    a {
      padding: 10px 0;
      font-weight: 500;
      border: none;
      transition: 0.3s;
      &::before {
        content: none;
      }
      &:hover {
        background: none;
        font-weight: 700;
      }
    }
  }
}
.w-footer__box:nth-of-type(3) {
  width: fit-content;
  margin-left: auto;
  flex-grow: 0;
  .swell-block-button a {
    box-shadow: none;
    width: 300px;
    min-height: 70px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0B5989;
    transition: 0.3s;
    &:hover {
      background: #fff;
      color: #0B5989;
    }
  }
}
.l-footer__foot {
  padding-bottom: 2em;
  .copyright {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    text-align: right;
  }
}

@media (max-width: 960px) {
  .w-footer__box:nth-of-type(1) {
    img {
      margin-inline: auto;
      margin-bottom: 24px;
    }
    p {
      text-align: center;
      font-size: 16px;
    }
  }
  .w-footer__box:nth-of-type(2) {
    padding-bottom: 50px;
    .menu {
      display: grid;
      grid-template-columns: 45% 45%;
      column-gap: 10%;
      row-gap: 15px;
      max-width: 400px;
      margin-inline: auto;
      a {
        padding: 0;
        font-size: 15px;
        display: flex;
        &::before {
          content: "・";
          position: static;
          transform: none;
          margin-top: 3px;
        }
      }
    }
  }
  .w-footer__box:nth-of-type(3) {
    margin-inline: auto;
    .cmn-sns__lists {
      justify-content: center;
    }
    .swell-block-button a {
      margin-inline: auto;
    }
  }
  .l-footer__foot {
    padding-bottom: 1em;
    .copyright {
      text-align: center;
    }
  }
}

@media (max-width: 600px) {
  .w-footer__box:nth-of-type(2) {
    .menu {
      grid-template-columns: 40% 50%;
    }
  }
}

/* =======================
トップページ
======================= */
.home {
  background: #90D1D8;
  color: var(--color_main);
  font-weight: 500;
  h2, h3, h4 {
    margin-top: 0;
  }
}

/* ローディング */
.loading {
  width: 100%;
  height: 100%;
  background: #91D2D8;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 1;
  transition: 1s 4.2s;
  .rose {
    width: 75.5%;
    height: auto;
    aspect-ratio: 1010 / 607;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .inner {
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
  figure {
    opacity: 0;
    transition: 1s 0.2s;
  }
  .dot1 {
    width: 25.8%;
    position: absolute;
    top: 11%;
    left: 13.5%;
  }
  .dot2 {
    width: 17.6%;
    position: absolute;
    bottom: 14%;
    right: 20.5%;
  }
  .rose1 {
    width: 51.2%;
    position: absolute;
    top: 0%;
    left: 17%;
    transition-delay: 1.4s;
    transform: translateY(10%) scale(0.3);
  }
  .rose2 {
    width: 39.6%;
    position: absolute;
    bottom: 13%;
    left: 0%;
    transition-delay: 0.5s;
    transform: translate(10%, 10%) scale(0.3);
  }
  .rose3 {
    width: 16.6%;
    position: absolute;
    bottom: 22.5%;
    left: 28.5%;
    transition-delay: 1.1s;
    transform: translate(10%, 10%) scale(0.3);
  }
  .rose4 {
    width: 26.8%;
    position: absolute;
    bottom: 0%;
    left: 38.5%;
    transition-delay: 0.8s;
    transform: translate(-10%, -10%) scale(0.3);
  }
  .rose5 {
    width: 20.7%;
    position: absolute;
    bottom: 22.5%;
    left: 52.5%;
    z-index: 1;
    transition-delay: 0.5s;
    transform: translate(-10%, 10%) scale(0.3);
  }
  .rose6 {
    width: 40.2%;
    position: absolute;
    bottom: 7%;
    right: 1%;
    transition-delay: 1.1s;
    transform: translate(-10%, 10%) scale(0.3);
  }
  .logo {
    width: 29%;
    height: 13.5%;
    position: absolute;
    top: 37.5%;
    left: 50%;
    z-index: 1;
    transition: 1.5s;
    transition-delay: 2.3s;
    transform: translate(-50%, 30%);
  }
}
.active.loading {
  opacity: 0;
  visibility: hidden;
  figure {
    opacity: 1;
    transform: none;
  }
  .logo {
    transform: translate(-50%);
  }
}

@media (max-width: 960px) {
  .loading {
    .rose {
      width: min(90%, 600px);
    }
    .logo {
      width: 40%;
    }
  }
}


/* FV */
.p-mainVisual, .p-mainVisual__slide {
  overflow: visible;
}
.p-mainVisual__textLayer {
  text-shadow: 0 0 6px rgb(0 0 0 / 65%) !important;
  &::before {
    content: "";
    width: 100vw;
    height: 26vw;
    background: url(/wp-content/uploads/2026/05/fv-wave.png) no-repeat bottom/100% auto;
    position: absolute;
    bottom: -2px;
    left: calc(50% - 50vw);
  }
  .p-blogParts {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.fv__spain {
  font-size: clamp(32px, 6vw, 60px);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0;
}
.fv__lead {
  font-size: clamp(16px, 2.2vw, 24px);
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.2;
}
.fv__studio {
  font-size: clamp(60px, 8vw, 81px);
  font-weight: 700;
  line-height: 1.2;
}
.fv__lesson {
  width: clamp(126px, 16vw, 188px);
  height: auto;
  aspect-ratio: 1 / 1;
  position: absolute;
  bottom: 10%;
  left: 60px;
  text-shadow: none;
  > div {
    height: 100%;
    position: relative;
    &::before {
      content: "";
      width: 57.4%;
      height: auto;
      aspect-ratio: 1 / 1;
      background: url(./img/fv-dot.png) no-repeat center/contain;
      position: absolute;
      bottom: -40px;
      left: -60px;
      opacity: 0;
      transition: 0.5s 1s;
    }
  }
  p {
    height: 100%;
    border-radius: 50%;
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px !important;
    position: relative;
    z-index: 1;
    transform: scale(0.3);
    opacity: 0;
    transition: 1s 1s;
  }
}
.fv__left-rose {
  width: min(21vw, 331px);
  position: absolute;
  bottom: 5vw;
  left: calc(50% - 50vw);
  transform: translateX(-21%);
  > div {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 331 / 415;
  }
  figure {
    position: absolute;
    opacity: 0;
    transform: translate(-10%, 10%) scale(0.3);
    transition: 1s 0.2s;
  }
  .img1 {
    width: calc( 183 / 331 * 100%);
    top: 5%;
    left: 0;
  }
  .img2 {
    width: calc( 231 / 331 * 100%);
    top: 0%;
    right: 0;
    z-index: 1;
    transition-delay: 0.8s;
  }
  .img3 {
    width: calc( 165 / 331 * 100%);
    bottom: 2%;
    left: 19%;
    transform: translate(-10%, -10%) scale(0.3);
    transition-delay: 0.5s;
  }
}
.fv__right-rose {
  width: min(35%, 375px);
  position: absolute;
  bottom: 0;
  right: calc(50% - 50vw);
  > div {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 375 / 266;
  }
  figure {
    position: absolute;
    opacity: 0;
    transform: translate(-10%, 10%) scale(0.3);
    transition: 1s 0.2s;
  }
  .img1 {
    width: calc( 284 / 375 * 100%);
    top: 0;
    right: 0;
    transition-delay: 0.5s;
  }
  .img2 {
    width: calc( 134 / 375 * 100%);
    bottom: 0%;
    left: 0;
    transform: translate(10%, 10%) scale(0.3);
  }
}
.loaded {
  .fv__lesson {
    > div::before {
      opacity: 1;
    }
    p {
      opacity: 1;
      transform: scale(1);
    }
  }
  :is(.fv__left-rose, .fv__right-rose) {
    figure {
      opacity: 1;
      transform: none;
    }
  }
}
@media (max-width: 1350px) {
  .fv__lesson {
    left: 150px;
    bottom: 5%;
  }
  .fv__left-rose {
    bottom: 0;
  }
}
@media (max-width: 960px) {
  .p-mainVisual__img {
    height: 90vh !important;
    object-fit: cover;
  }
  .p-mainVisual__textLayer {
    &::before {
      height: 50vw;
      background: url(/wp-content/uploads/2026/05/fv-wave-sp.png) no-repeat bottom/100% auto;
    }
  }
  .fv__lead {
    margin-bottom: 12px;
  }
  .fv__lesson {
    bottom: 0%;
    left: auto;
    right: 0;
    > div {
      &::before {
        bottom: -20px;
        left: -40px;
      }
    }
  }
  .fv__left-rose {
    width: min(51vw, 331px);
    bottom: max(-16%, -30px);
    > div {
      position: relative;
      width: 100%;
      height: auto;
      aspect-ratio: 331 / 415;
    }
    figure {
      position: absolute;
    }
    .img1 {
      width: calc( 183 / 331 * 100%);
      top: 5%;
      left: 0;
    }
    .img2 {
      width: calc( 231 / 331 * 100%);
      top: 0%;
      right: 0;
      z-index: 1;
    }
    .img3 {
      width: calc( 165 / 331 * 100%);
      bottom: 2%;
      left: 19%;
    }
  }
}
@media (max-width: 600px) {
  .fv__lesson {
    bottom: -8%;
  }
  .fv__left-rose {
    bottom: max(-16%, -75px);
  }
}

/* about */
.top-about {
  padding-bottom: 285px;
  margin-bottom: 0;
  position: relative;
  .rose {
    width: min(31%, 416px);
    position: absolute;
    bottom: 0;
    left: calc(50% - 50vw);
    transform: translateX(-17%);
    pointer-events: none;
  }
  h2 {
    font-size: 42px;
    line-height: 1.2;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    margin-bottom: 0;
    .aire {
      font-family: "Cormorant Garamond", serif;
      color: #E8524C;
      font-size: 80px;
      margin-right: 20px;
    }
    .small {
      font-family: "Zen Kaku Gothic New", sans-serif;
      color: #E8524C;
      font-size: 24px;
      font-weight: 700;
      display: block;
    }
  } 
}
.top-about__class {
  font-size: 27px;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
}
.top-about__contents {
  display: flex;
  justify-content: space-between;
}
.top-about__message {
  width: 50%;
  p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 60px;
  }
}
.top-about__img {
  width: 42%;
  position: relative;
  .img {
    position: relative;
    &::before {
      content: "";
      width: 52%;
      height: auto;
      aspect-ratio: 1 / 1;
      background: url(./img/about-img-dot.png) no-repeat center/contain;
      position: absolute;
      top: 0;
      left: -20%;
      z-index: -1;
      opacity: 0;
      transition: 0.5s 0.2s;
    }
    &::after {
      content: "";
      width: 29%;
      height: auto;
      aspect-ratio: 1 / 1;
      background: url(./img/about-img-rose.png) no-repeat center/contain;
      position: absolute;
      bottom: 0;
      right: 0;
      transform: translate(-10%, -3%) scale(0.3);
      opacity: 0;
      transition: 1s 0.3s;
    }
    img {
      display: block;
      border-radius: 50%;
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
  }
  .aire {
    width: 57.2%;
    position: absolute;
    bottom: -230px;
    left: 0;
    clip-path: inset(0 0 100% 0);
    transition: 1.5s 1s;
  }
  &.show {
    .img {
      &::before {
        opacity: 1;
      }
      &::after {
        transform: none;
        opacity: 1;
      }
    }
    .aire {
    clip-path: inset(0);
    }
  }
}

@media (max-width: 960px) {
  .top-about {
    padding-bottom: 270px;
    h2 {
      font-size: 18px;
      margin-bottom: 12px;
      .aire {
        font-size: 35px;
        margin-right: 5px;
      }
      .small {
        font-size: 12px;
      }
    } 
  }
  .top-about__class {
    font-size: 18px;
    margin-bottom: 48px;
    text-align: left;
  }
  .top-about__contents {
    flex-direction: column;
    gap: 35px;
  }
  .top-about__message {
    width: 100%;
    p {
      font-size: 16px;
      margin-bottom: 36px;
    }
  }
  .top-about__img {
    width: min(90%, 450px);
    position: relative;
    margin-left: auto;
    .img {
      position: relative;
      &::before {
        position: absolute;
        top: -10px;
      }
      &::after {
        bottom: -10px;
        right: 0;
      }
    }
    .aire {
      bottom: -220px;
      left: 0;
      width: min(57.2%, 220px);
    }
  }
}
@media (max-width: 600px) {
  .top-about {
    padding-top: min(17vw, 110px);
  }
}
/* ニュース */
.top-news {
  margin-bottom: 130px;
  position: relative;
  .rose1 {
    width: min(28vw, 331px);
    position: absolute;
    bottom: 0;
    right: calc(50% - 50vw);
    transform: translateX(20%);
  }
  h2 {
    font-size: 100px;
    font-weight: 500;
    writing-mode: vertical-rl;
    line-height: 0.65;
    flex-shrink: 0;
    text-align: left !important;
  }
}
.top-news__contents {
  display: flex;
  column-gap: 100px;
}
.top-news__tab {
  padding-top: 100px;
  width: min(100%, 634px);
  /* タブボタン */
  nav {
    display: flex;
    gap: 8px;
    margin-bottom: 36px;
    max-width: 507px;
  }
  button {
    flex: 1;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border: 1px solid var(--color_main);
    border-radius: 30px;
    background: transparent;
    color: var(--color_main);
    background: #fff;
    cursor: pointer;
    transition: 0.3s
  }
  button.is-active {
    background: var(--color_main);
    color: #fff;
  }
  button:hover {
    background: var(--color_main);
    color: #fff;
  }
}
/* タブコンテンツ */
.top-news__posts {
  display: none;
  &.is-active {
    display: block;
  }
}
  
/* メイン投稿 */
.top-news__lists {
  padding-left: 0 !important;
  border-top: 1px solid #187DBC80;
  margin-bottom: 16px;
  list-style: none;
  .post-item {
    margin: 0;
    &:first-of-type {
      .post-link {
        display: flex;
        gap: 22px;
        align-items: flex-start;
        padding-block: 16px;
      }
    }
  }
  .post-link {
    display: block;
    color: inherit;
    border-bottom: 1px solid #187DBC80;
    padding-block: 14px;
    &:hover {
      opacity: 0.7;
    }
  }
  .thumb {
    width: 150px;
    height: auto;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    figure {
      height: 100%;
      width: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .new-label {
    font-size: 18px;
    font-weight: 700;
    color: #E8524C;
    margin-bottom: 12px;
  }
  .post-date {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 7px;
  }
    
  .post-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  
  .post-excerpt {
    font-size: 12px;
    opacity: 0.85;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
  
/* View all */
.view-all {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #E8524C;
  &::after {
    content: "";
    width: 15px;
    height: 11px;
    background: url(./img/arrow-icon-red.png) no-repeat center/contain; 
    transition: 0.3s;
  }
  &:hover::after {
    transform: translateX(5px);
  }
}
@media (max-width: 1200px) {
  .top-news__tab {
    width: min(calc(100% - 29vw), 634px);
  }
}
@media (max-width: 1100px) {
  .top-news {
    .rose1 {
      width: min(23vw, 331px);
    }
  }
}

@media (max-width: 960px) {
  .top-news {
    margin-bottom: 100px;
    position: relative;
    .rose2 {
      width: min(80%, 300px);
      position: absolute;
      top: 0;
      right:  calc(50% - 50vw);
      transform: translate(20%, -55%);
      pointer-events: none;
    }
    h2 {
      font-size: 65px;
      writing-mode: horizontal-tb;
      line-height: 1;
      margin-bottom: 66px;
    }
  }
  .top-news__contents {
    flex-direction: column;
  }
  .top-news__tab {
    width: 100%;
    padding-top: 0;
    nav {
      gap: 5px;
      margin-bottom: 50px;
      margin-inline: auto;
    }
    button {
      padding: 6px;
      font-size: 13px;
    }
  }
    
  /* メイン投稿 */
  .top-news__lists {
    margin-bottom: 24px;
    .new-label {
      margin-bottom: 2px;
    }
    .post-date {
      font-size: 12px;
      margin-bottom: 2px;
    }
    .post-title {
      margin-bottom: 7px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    
    .post-excerpt {
      -webkit-line-clamp: 3;
    }
  }
    
  /* View all */
  .view-all {
    justify-content: flex-end;
  }
}

/* AiReの特徴 */
.top-feature {
  padding-bottom: 200px;
  margin-bottom: 0;
  .cmn-title {
    margin-bottom: 100px;
  }
  .cmn-btn__circle {
    position: relative;
    max-width: 110px;
    margin-inline: auto;
    margin-bottom: 150px;
    .text {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-48%, -43%);
      width: 110%;
    }
  }
}
.top-feature__lists {
  margin-bottom: 34px;
  position: relative;
  .leaf {
    width: min(17vw, 220px);
    position: absolute;
    top: 33%;
    left: calc(48% - 50vw);
    transform: translateY(-50%);
  }
  ul {
    padding-left: 0 !important;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    column-gap: 15%;
    row-gap: 60px;  
  }
  .img {
    margin-bottom: 12px;
    width: 310px;
    margin-inline: auto;
    position: relative;
    .text {
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(5%, -20%);
      width: 43%;
    }
    .picture img {
      border-radius: 50%;
      display: block;
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
  }
  h3 {
    font-size: 24px;
    margin-bottom: 12px;
  }
  p {
    text-align: center;
    color: #444444;
  }
  li {
    width: 320px;
    margin: 0;
    &:nth-of-type(1) {
      transform: translateY(-150px);
      margin-left: 40px;
      .img {
        &::before {
          content: "";
          width: 34.5%;
          height: auto;
          aspect-ratio: 1 / 1;
          background: url(./img/feature-img-dot.png) no-repeat center/contain;
          position: absolute;
          top: -5px;
          left: -40px;
          z-index: -1;
          opacity: 0;
          transition: 0.5s 0.2s;
        }
        &::after {
          content: "";
          width: 25.8%;
          height: auto;
          aspect-ratio: 1 / 1;
          background: url(./img/feature-img-rose.png) no-repeat center/contain;
          position: absolute;
          top: 20%;
          left: -40px;
          transform: translate(5%, 10%) scale(0.3);
          transition: 1s 0.5s;
          opacity: 0;
        }
      }
      &.show {
        .img {
          &::before {
            opacity: 1;
          }
          &::after {
            opacity: 1;
            transform: none;
          }
        }
      }
    }
    &:nth-of-type(2) {
      .img {
        &::before {
          content: "";
          width: 21.6%;
          height: auto;
          aspect-ratio: 1 / 1;
          background: #ED9BB4;
          border-radius: 50%;
          position: absolute;
          bottom: 22px;
          left: -11px;
          transform: scale(0);
          transition: 0.5s;
        }
        .text {
          width: 44.5%;
        }
      }
      &.show {
        .img::before {
          transform: none;
        }
      }
    }
    &:nth-of-type(3) {
      transform: translateY(-50px);
      margin-left: 13%;
      .img {
        &::before {
          content: "";
          width: 34.1%;
          height: auto;
          aspect-ratio: 1 / 1;
          background: url(./img/feature-img-dot2.png) no-repeat center/contain;
          position: absolute;
          bottom: 0;
          left: -34px;
          z-index: -1;
          opacity: 0;
          transition: 0.5s 0.2s;
        }
        .text {
          transform: translate(17%, -14%);
          width: 50.6%;
        }
      }
      &.show {
        .img::before {
          opacity: 1;
        }
      }
    }
    &:nth-of-type(4) {
      margin-left: 2%;
      .img {
        &::before {
          content: "";
          width: 14.5%;
          height: auto;
          aspect-ratio: 1 / 1;
          background: #F0DF83;
          border-radius: 50%;
          position: absolute;
          bottom: 72px;
          right: -11px;
          transform: scale(0);
          transition: 0.5s;
        }
        &::after {
          content: "";
          width: 27%;
          height: auto;
          aspect-ratio: 1 / 1;
          background: url(./img/feature-img-rose2.png) no-repeat center/contain;
          position: absolute;
          bottom: 0;
          right: -23px;
          transform: translate(-10%, 10%) scale(0.3);
          opacity: 0;
          transition: 1s 0.5s;
        }
        .text {
          transform: translate(13%, -15%);
          width: 49.3%;
        }
      }
      &.show {
        .img {
          &::before {
            transform: none;
          }
          &::after {
            opacity: 1;
            transform: none;
          }
        }
      }
    }
  }
}
.top-feature__bottom {
  position: relative;
  .rose {
    width: min(28vw, 391px);
    height: auto;
    aspect-ratio: 391 / 468;
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    transform: translate(-15%, -80%);
    pointer-events: none;
    .inner {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .img1 {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      img {
        opacity: 0;
        transform: translate(-10%, 10%) scale(0.3);
        transition: 2s;
      }
      &.show img {
        opacity: 1;
        transform: none;
      }
    }
    .img2 {
      position: absolute;
      width: calc( 136 / 391 * 100%);
      position: absolute;
      left: 12%;
      bottom: 5%;
    }
  }
  .rose2 {
    width: min(33%, 335px);
    position: absolute;
    bottom: -5vw;
    right: calc(50% - 50vw);
    transform: translate(19%, 50%);
    z-index: 1;
    pointer-events: none;
  }
  .dance-img {
    margin-bottom: 45px;
    border-radius: 15px;
    overflow: hidden;
    max-width: 760px;
    margin-inline: auto;
    img {
      display: block;
      object-fit: cover;
    }
  }
  p {
    font-size: 39px;
    text-align: center;
  }
}

@media (max-width: 1200px) {
  .top-feature__lists {
    .leaf {
      top: 40%;
    }
  }
}
@media (max-width: 1100px) {
  .top-feature__lists {
    ul {
      column-gap: 10%;
    }
    li {
      &:nth-of-type(3) {
          margin-left: 10%;
      }
      &:nth-of-type(4) {
        margin-left: 2%;
      }
    }
  }
}
@media (max-width: 960px) {
  .top-feature {
    padding-bottom: 130px;
    position: relative;
    .rose {
      width: min(47%, 171px);
      position: absolute;
      top: 0;
      left: calc(50% - 50vw);
      transform: translate(-19%, -50%);
    }
    .cmn-title {
      margin-bottom: 100px;
    }
    .cmn-btn__circle {
      margin-bottom: 348px;
    }
  }
  .top-feature__lists {
    margin-bottom: 65px;
    ul {
      flex-direction: column;
      row-gap: 67px;
    }
    li {
      width: 320px;
      margin: 0 auto !important;
      transform: none !important;
    }
    .img {
      margin-bottom: 12px;
      width: 270px;
      .ff-en {
        font-size: 21px;
      }
      svg{
        position: absolute;
        top: -78px;
        transform: rotate(36deg) translateX(106px);
      }
    }
    h3 {
      font-size: 20px;
    }
    p {
      font-size: 16px;
    }
  }
  .top-feature__bottom {
    .rose {
      width: min(40vw, 300px);
      transform: translate(-15%, -100%);
    }
    .rose2 {
      width: min(64%, 250px);
      bottom: -14%;
      transform: translate(17%, 50%);
    }
    figure {
      margin-bottom: 20px;
    }
    p {
      font-size: 24px;
    }
  }
}
@media (max-width: 600px) {
  .top-feature__bottom {
    .rose {
      width: min(65%, 280px);
      transform: translate(-15%, -110%);
    }
    .rose2 {
      bottom: -33%;
      transform: translate(20%, 50%);
    }
  }
}
/* ギャラリー */
.top-gallery {
  position: relative;
  margin-bottom: 180px;
  &::before {
    content: "";
    width: 100vw;
    height: 11vw;
    background: url(./img/gallery-top.png) no-repeat bottom/100% auto;
    position: absolute;
    top: 1px;
    left: calc(50% - 50vw);
    transform: translateY(-100%);
  }
}
.top-gallery__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
  margin-top: 16px;
  .cmn-btn__circle {
    margin-top: 20px;
  }
}
.top-gallery__swiper {
  width: calc(100vw - var(--swl-scrollbar_width, 0px));
  margin-left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px)/2);
  .swiper-slide {
    width: 320px;
    margin-right: 60px;
    &.is-offset {
      margin-top: 70px;
    }
  }
  a {
    color: inherit;
    &:hover {
      opacity: 0.7;
      img {
        transform: scale(1.05);
      }
    }
  }
  .thumb {
    margin-bottom: 20px;
    img {
      width: 100%;
      height: 100%;
      max-height: 320px;
      object-fit: contain;
      transition: 0.3s;
    }
  }
  figure {
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: 0.3s;
    }
  }
  h3 {
    font-size: 24px;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .swiper-wrapper {
    transition-timing-function: linear;
  }
}

@media (max-width: 960px) {
  .top-gallery {
    margin-bottom: 213px;
    &::before {
      height: 11vw;
      background: url(./img/gallery-top-sp.png) no-repeat bottom/100% auto;
    }
  }
  .top-gallery__head {
    margin-bottom: 56px;
    padding-top: 60px;
    margin-top: 0;
    .cmn-btn__circle {
      margin-top: 0px;
    }
  } 
  .top-gallery__swiper {
    margin-bottom: 50px;
    .swiper-slide {
      width: 280px;
      margin-right: 30px;
      &.is-offset {
        margin-top: 64px;
      }
    }
    .thumb {
      margin-bottom: 16px;
    }
    h3 {
      font-size: 20px;
    }
  }
}

/* 生徒さまの声 */
.top-voice {
  position: relative;
  margin-bottom: 0;
  .leaf {
    width: min(18%, 180px);
    position: absolute;
    top: 0;
    right: calc(50% - 50vw);
    transform: translate(10%, -75%);
  }
  &::after {
    content: "";
    width: 100vw;
    height: 11vw;
    background: url(./img/voice-bottom.png) no-repeat top/100% auto;
    position: absolute;
    bottom: 1px;
    left: calc(50% - 50vw);
    transform: translateY(100%);
  }
  .lead {
    text-align: right;
    margin-bottom: 80px;
  }
  .cmn-btn__circle {
    position: absolute;
    left: 50%;
    bottom: -10.5vw;
    transform: translateX(-50%);
    z-index: 1;
  }
}
.top-voice__posts {
  padding-bottom: 30px;
  margin-bottom: 0;
  position: relative;
  .rose1 {
    width: min(29vw, 400px);
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    transform: translate(-23%, -80%);
    img {
      opacity: 0;
      transform: translateX(-10%) scale(0.3);
      transition: 2s;
    }
    &.show img {
      opacity: 1;
      transform: none;
    }
  }
  .rose2 {
    width: min(12vw, 156px);
    position: absolute;
    top: -31%;
    left: 10%;
    transform: translateY(-80%);
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 34px;
    row-gap: 0;
    list-style: none;
    padding-left: 0 !important;
  }
  li {
    width: calc((100% - 34px) / 2);
    margin: 0;
    &:nth-of-type(2n) {
      margin-top: 140px;
    }
  }
  a {
    display: block;
    width: 100%;
    background: #ffffff80;
    border-radius: 80px 80px 80px 0;
    position: relative;
    color: inherit;
    padding: 30px 40px 50px;
    &::before {
      content: "";
      width: 49px;
      height: 43px;
      background: url(./img/voice-quotation.png) no-repeat center/contain;
      position: absolute;
      top: 0;
      right: 56px;
      transform: translateY(-50%);
    }
    &:hover {
      background: #fff;
    }
  }
  h3 {
    text-align: left !important;
    font-weight: 400;
    font-size: 24px;
    margin-bottom: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: #444444;
    font-size: 15px;
  }
}

@media (max-width: 1250px) {
  .top-voice {
    .leaf {
      transform: translate(10%, -100%);
    }
  }
}
@media (max-width: 960px) {
  .top-voice {
    margin-bottom: 0;
    .leaf {
      transform: translate(10%, -200%);
    }
    &::after {
      height: 11vw;
      background: url(./img/voice-bottom-sp.png) no-repeat top/100% auto;
    }
    .lead {
      margin-bottom: 45px;
    }
    .cmn-btn__circle {
      bottom: -7.5%;
    }
  }
  .top-voice__posts {
    padding-bottom: 100px;
    .rose1 {
      width: min(62%, 250px);
      transform: translate(-20%, -130%);
    }
    ul {
      row-gap: 42px;
    }
    li {
      width: 100%;
      &:nth-of-type(2n) {
        margin-top: 0;
      }
    }
    a {
      border-radius: 70px 70px 70px 0;
      padding: 30px 30px 40px;
      &::before {
        content: "";
        width: 35px;
        height: 31px;
        right: 41px;
        transform: translateY(-50%);
      }
    }
    h3 {
      margin-bottom: 18px;
      font-size: 18px;
    }
  }
}
@media (max-width: 600px) {
  .top-voice {
    .leaf {
      width: min(29%, 180px);
      transform: translate(10%, -200%);
    }
    .cmn-btn__circle {
      bottom: -5%;
    }
  }
  .top-voice__posts {
    .rose1 {
      transform: translate(-20%, -164%);
    }
    p {
      -webkit-line-clamp: 4;
    }
  }
}

/* リンク一覧 */
.top-links {
  padding-top: 16vw;
  margin-bottom: 90px;
}

@media (max-width: 960px) {
  .top-links {
    padding-top: clamp(100px,36vw, 150px);
    margin-bottom: 56px;
  }
}

/* SNS */
.top-sns {
  margin-bottom: 180px;
  position: relative;
  .leaf1 {
    width: min(15vw, 200px);
    position: absolute;
    top: 50%;
    left: calc(50% - 50vw);
    transform: translate(-15%, 50%);
  }
  .leaf2 {
    width: min(15vw, 200px);
    position: absolute;
    bottom: -180px;
    right: calc(47% - 50vw);
    transform: translateY(50%);
  }
  h2 {
    font-size: 80px;
    font-weight: 500;
    margin-bottom: 40px;
    line-height: 1.1;
  }
}
.top-sns__rose {
  width: min(82%, 550px);
  height: auto;
  aspect-ratio: 558 / 223;
  margin-inline: auto;
  margin-bottom: 5px;
  position: relative;
  figure {
    opacity: 0;
    transition: 1s 0.2s;
  }
  .img1 {
    position: absolute;
    width: 45.5%;
    bottom: 0;
    left: 0;
    transform: translate(10%, 10%) scale(0.3);
  }
  .img2 {
    position: absolute;
    width: 33.1%;
    top: 10%;
    left: 30%;
    z-index: 1;
    transition-delay: 0.8s;
    transform: translateY(10%) scale(0.3);
  }
  .img3 {
    position: absolute;
    width: 39.7%;
    bottom: 1%;
    right: 0;
    transition-delay: 0.5s;
    transform: translate(-10%, 10%) scale(0.3);
  }
  &.show {
    figure {
      opacity: 1;
      transform: none;
    }
  }
}
.top-sns__contents {
  display: flex;
  align-items: center;
  column-gap: 70px;
  row-gap: 42px;
}
.top-sns__youtube {
  flex: 1;
  .wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
  
    iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
  }
}
.top-sns__links {
  flex: 1;
  list-style: none;
  padding-left: 0 !important;
  li {
    margin-top: 0;
    margin-bottom: 36px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: inherit;
    font-size: 34px;
    font-weight: 500;
    background: #B6E1E6;
    border: 2px solid #fff;
    min-height: 115px;
    padding: 20px 30px;
    border-radius: 15px;
    span {
      font-size: 18px;
    }
    &:hover {
      background: #fff;
    }
    &::before {
      content: "";
      width: 38px;
      height: 38px;
      background: url(./img/instagram-icon.png) no-repeat center/contain;
    }
    &::after {
      content: "";
      width: 20px;
      height: 14px;
      background: url(./img/arrow-icon-blue.png) no-repeat center/contain;
    }
    &.facebook {
      &::before {
        background-image: url(./img/facebook-icon.png);
      }
    }
  }
}
@media (max-width: 1200px) {
  .top-sns__contents {
    margin-inline: 30px;
  }
}
@media (max-width: 960px) {
  .top-sns {
    margin-bottom: 76px;
    &::before, &::after {
      content: none;
    }
    h2 {
      font-size: 60px;
      margin-bottom: 34px;
    }
  }
  .top-sns__rose {
    margin-bottom: 16px;
  }
  .top-sns__contents {
    flex-direction: column;
    margin-inline: 0;
  }
  .top-sns__youtube {
    width: 100%;
  }
  .top-sns__links {
    width: 100%;
    li {
      margin-bottom: 30px;
    }
    a {
      gap: 16px;
      font-size: 26px;
      min-height: 90px;
      &::before {
        width: 30px;
        height: 30px;
      }
      &::after {
        content: none;
      }
    }
  }
}

/* tocotoco */
.top-toco {
  width: calc(100vw - var(--swl-scrollbar_width, 0px));
  margin-left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px)/2);
  padding-bottom: 80px;
}
.top-toco__contents {
  display: flex;
  gap: 66px;
  align-items: flex-start;
  .img {
    width: 48%;
    position: relative;
    .rose {
      width: min(22vw, 300px);
      position: absolute;
      bottom: 4%;
      left: 0;
      transform: translateY(50%);
    }
    .picture {
      border-radius: 0 100vw 100vw 0;
      overflow: hidden;
      img {
        display: block;
      }
    }
  }
  .top-toco__text {
    width: calc(52% - 66px);
    padding-right: max(50vw - 600px, 20px);
  }
  .top-toco__detail {
    margin-bottom: 10px;
    font-size: 16px;
  }
  .cmn-btn__circle a {
    margin-right: 0;
  }
}
.top-toco__text h2.ff-en {
    background: none;
    padding: 0; 
}
.top-toco__text .is-style-section_ttl {
    color: #E8524C;
    font-size: 32px;
}

.top-toco__text h2.ff-en {
    background: none;
    padding: 0;
    color: inherit;
}

.top-toco__text .toco-name {
    font-size: 65px;
}

@media (max-width: 960px) {
  .top-toco {
    width: 100%;
    margin-left: 0;
    padding-bottom: 25px;
  }
  .top-toco__contents {
    flex-direction: column;
    gap: 66px;
    .img {
      width: calc(100% + 4vw);
      margin-left: calc(50% - 50vw);
      .rose {
        width: min(44vw, 300px);
        bottom: 8%;
      }
    }
    .top-toco__text {
      width: 100%;
      padding-right: 0;
    }
    .cmn-title {
      .is-style-section_ttl {
          font-size: 24px;
      }
    }
    .top-toco__detail {
      margin-bottom: 36px;
    }
    .cmn-btn__circle a {
      margin-right: auto;
    }
  }
}

/* アニメーション */
.rose-anime {
  opacity: 0;
  transition: 2s;
}
.show.rose-anime {
  opacity: 1;
}
.show.rose-anime img {
  animation: left-rose 8s;
}
.show.rose-anime-right img {
  animation: right-rose 8s;
}
@keyframes left-rose {
  0% {
    scale: 0.3;
    rotate: -360deg;
    translate: -10px 10px;
  }
  15% {
    rotate: -360deg;
  }
  40% {
    scale: 1;
    translate: 0 0;
  }
  100% {
    rotate: 0deg;
  }
}

@keyframes right-rose {
  0% {
    scale: 0.3;
    rotate: 360deg;
    translate: 10px 10px;
  }
  15% {
    rotate: 360deg;
  }
  40% {
    scale: 1;
    translate: 0 0;
  }
  100% {
    rotate: 0deg;
  }
}


.leaf-anime img {
  transform: scale(0.1);
  transform-origin: left;
  opacity: 0;
  transition: 0.7s;
}
.leaf-anime-right img {
  transform-origin: right;
}
.show.leaf-anime img {
  opacity: 1;
  transform: none;
}

@media (max-width: 960px) {
  .show.rose-anime img {
    animation-duration: 7s;
  }
  .show.rose-anime-right img {
    animation-duration: 7s;
  }
  
}