@charset "utf-8";
/* CSS Document */

/*****************************************************
                    共通設定
******************************************************/
/* body * {
    outline: red 1px solid;
  } */

html { scroll-behavior: smooth;} 
body ul{list-style: none;}
img{max-width: 100%;height: auto;}
svg {max-width: 100%;height: auto;}
input,
textarea,
select{
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
body{
	font-size: 1rem;
	line-height:190%;
	color: #565656;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1em;
}
h1{
    font-size: 3rem;
    line-height:160%;
}
h2{
    font-size: 2.5rem;
    line-height:160%;
    font-weight: 700;
    font-style: bold;
}
h3{
    font-size: 2rem;
    line-height:160%;
    font-weight: 500;
    font-style: normal;
}
h4{
    font-size: 1.5rem;
    line-height:160%;
    font-weight: 500;
    font-style: normal;
}
@media screen and (width<=450px){
    h1{
        font-size: 2.5rem;        
    }
    h2{
        font-size: 1.8rem;
    }
    h3{
        font-size: 1.5rem;
    }
    h4{
        font-size: 1.2rem;
    }
}

a:link,a:visited{text-decoration:none;color:#333;}
a:hover,a:active{text-decoration:none;color:#5a5a5a;}

.zen-maru-gothic-regular {
    font-family: "Zen Maru Gothic", serif;
    font-weight: 400;
    font-style: normal;
}
.lower__Wrapper{
    max-width: 1200px;
    margin: 0 auto;
}
/* svgアイコン */
.icon_sharp{
    width: 3rem;
    vertical-align:text-bottom;
}
.icon_play1{
    width: 2rem;
    min-width: 2rem;
    fill:#565656;
}
/* 文字色・svg色指定 */
.color_pink{
    color: #FFBEBE;
    fill: #FFBEBE;
}
.color_yellow{
    color: #F9EE7A;
    fill: #F9EE7A;
}
.color_pastelyellow{
    color: #FFF8D5;
    fill: #FFF8D5;
}
.color_blue{
    color: #ABF9FB;
    fill: #ABF9FB;
}
/* リンクボタン */
.linkBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Zen Maru Gothic", serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.5rem;
    color: #565656;
    text-wrap: nowrap;
    background-color: #fff;
    border: 3px solid #ffe0e0;
    border-radius: 50%;
    padding: 1.5rem 4.5rem 1.5rem 4rem;
    transition: .3s;
    transition: transform .3s ease;
    max-width: 450px;
}
.linkBtn .icon_play1{
    margin-right: 0.5rem;
    transition: .5s;
    fill: #FFBEBE;
}
.linkBtn:hover,
.linkBtn:active{
    color: #6b6b6b;
    border: 3px solid #e46a7d;
    transform: scale(1.05);
    background-color: #e46a7d;
    color: #fff;
}
.linkBtn:hover .icon_play1{
    fill: #fff;
}
#js-hidden{
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
#js-hidden.hidden{
    opacity: 0; 
    transform: translateY(-10px); 
    pointer-events: none; 
}
#js-hidden2 {
    transition: opacity 0.6s ease, transform 0.6s ease;
    opacity: 0;
    transform: translateY(0);
    pointer-events: none; 
}
#js-hidden2.visible {
    opacity: 1;
    transform: translateY(10px); 
    pointer-events: all;
}

@media screen and (width<=450px){
    .linkBtn{
        text-wrap: wrap;
        padding: 1.5rem 4.5rem;
        background-color: #e46a7d;
        color: #fff;
    }
    .icon_play1{
        display: none;
    }   
}
/*****************************************************
                    ヘッダー
******************************************************/
header{
    width: 100%;
    background: linear-gradient(0deg, #FFF8F8, #fbfcf0);
    background-size: 200% 200%;
    animation: GradMV 10s ease infinite;
}
@keyframes GradMV {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
  }
/*****************************************************
	                ナビゲーション
******************************************************/
.nav--pc{
    width: 100%;
    position: fixed;
    z-index: 10001;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1% 1%;
    pointer-events: none;
}
.logo{
    width: 15%;
    min-width: 300px;
    margin: 1%;
    pointer-events:all;
}
.nav--pc .linkBtn{
    pointer-events:all;
    font-size: 1rem;
    padding: 1rem 2rem;
    background-color: #e46a7d;
    color: #fff;
    border: none;
}
#js-hidden2.active.visible{
    opacity: 0;
}
.menu{
    background-color: #fcfcfc;
    border-radius: 3px;
    box-shadow: -5px 10px 10px -6px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top:1vh;
    right:0;
    width: 35vw;
    min-width: 660px;
    height: 98vh;
    z-index: 10000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.menu.active{
    transform: translateX(0);
}
.menu__logo{
    max-width: 50%;
    margin: 10vh 0;
}
.menu__contact{
    margin-top: 10vh;
    border-radius: 50%;
    width: 35%;
    background-color: #d4596b;
    transition: transform .6s ease;
}
.menu__contact:hover{
    transform: scale(1.05);
    background-color: #e46a7d;
}
.menu__contact a{
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 1.5rem 0;
    color: #fff;
}
@media screen and (width<=1025px) {
    .nav__contact{
        display: none;
    }
}
@media screen and (width<=450px){
    .menu{
        min-width: 450px;
    }
    .logo{
        min-width: 200px;
    }
    .logo.active{
        opacity: 0;
    }
    .menu{
        background-color: #fcfcfc;
        border-radius: 3px;
        box-shadow: -5px 10px 10px -6px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top:0;
        right:0;
        width: 100%;
        min-width:auto;
        height: 100vh;
        z-index: 10000;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
}
/* ハンバーガーメニュー */
.hamburgermenuContainer{
    margin-right: 1%;
    pointer-events:all;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 15%;
    min-width: fit-content;
}
.hamburgermenu {
    margin-left: 24px;
    width: 50px;
    height: 44px;
    cursor: pointer;
    background-color: unset;
    border: none;
    position: relative;
    transform: translateY(10px); 
}
  .hamburgermenu span{
    position: absolute;
    right: 5%;
    width: 100%;
    height: 4px;
    background-color: #666;
    border-radius: 4px;
}
  .hamburgermenu, .hamburgermenu span {
    display: inline-block;
    transition: all .5s;
    box-sizing: border-box;
  }
  .hamburgermenu span:nth-of-type(1) {
    top: 0;
  }
  .hamburgermenu span:nth-of-type(2) {
    top: 20px;
  }
  .hamburgermenu span:nth-of-type(3) {
    bottom: 0;
  }
/* btn */
#btn07 span:nth-of-type(1) {
    -webkit-animation: btn07-bar01 .75s forwards;
    animation: btn07-bar01 .75s forwards;
  }
  @-webkit-keyframes btn07-bar01 {
    0% {
      -webkit-transform: translateY(20px) rotate(45deg);
    }
    50% {
      -webkit-transform: translateY(20px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(0) rotate(0);
    }
  }
  @keyframes btn07-bar01 {
    0% {
      transform: translateY(20px) rotate(45deg);
    }
    50% {
      transform: translateY(20px) rotate(0);
    }
    100% {
      transform: translateY(0) rotate(0);
    }
  }
  #btn07 span:nth-of-type(2) {
    transition: all .25s .25s;
    opacity: 1;
  }
  #btn07 span:nth-of-type(3) {
    -webkit-animation: btn07-bar03 .75s forwards;
    animation: btn07-bar03 .75s forwards;
  }
  @-webkit-keyframes btn07-bar03 {
    0% {
      -webkit-transform: translateY(-20px) rotate(-45deg);
    }
    50% {
      -webkit-transform: translateY(-20px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(0) rotate(0);
    }
  }
  @keyframes btn07-bar03 {
    0% {
      transform: translateY(-20px) rotate(-45deg);
    }
    50% {
      transform: translateY(-20px) rotate(0);
    }
    100% {
      transform: translateY(0) rotate(0);
    }
  }
  #btn07.active span:nth-of-type(1) {
    -webkit-animation: active-btn07-bar01 .75s forwards;
    animation: active-btn07-bar01 .75s forwards;
  }
  @-webkit-keyframes active-btn07-bar01 {
    0% {
      -webkit-transform: translateY(0) rotate(0);
    }
    50% {
      -webkit-transform: translateY(20px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(20px) rotate(45deg);
    }
  }
  @keyframes active-btn07-bar01 {
    0% {
      transform: translateY(0) rotate(0);
    }
    50% {
      transform: translateY(20px) rotate(0);
    }
    100% {
      transform: translateY(20px) rotate(45deg);
    }
  }
  #btn07.active span:nth-of-type(2) {
    opacity: 0;
  }
  #btn07.active span:nth-of-type(3) {
    -webkit-animation: active-btn07-bar03 .75s forwards;
    animation: active-btn07-bar03 .75s forwards;
  }
  @-webkit-keyframes active-btn07-bar03 {
    0% {
      -webkit-transform: translateY(0) rotate(0);
    }
    50% {
      -webkit-transform: translateY(-20px) rotate(0);
    }
    100% {
      -webkit-transform: translateY(-20px) rotate(-45deg);
    }
  }
  @keyframes active-btn07-bar03 {
    0% {
      transform: translateY(0) rotate(0);
    }
    50% {
      transform: translateY(-20px) rotate(0);
    }
    100% {
      transform: translateY(-20px) rotate(-45deg);
    }
  }
  @media screen and (width<=1024px){
    .hamburgermenuContainer{
        width: auto;
    }
    
  }

/*****************************************************
	                ローディング
******************************************************/
.loadingpage{
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #FFBEBE;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
  color: #FFF8D5;
}
.loader:after {
  left: 3.5em;
  color: #ABF9FB;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/*****************************************************
	                MV(TOP)
******************************************************/
.mvWrapper{
    position: relative;
    height: 100vh;
}
.mv{
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.mv_catchcopy{
    width: fit-content;
    height: fit-content;
    position: absolute;
    margin: auto;
    inset: 0;
    left:2%;
    overflow: hidden;
}
.mv_catchcopyColor{
    animation: Grad2 10s infinite;
}
/* MV_サークル文字 */
.otonowa_msCircle{
    max-height: 650px;
    max-width: 650px;
    animation: Grad 20s infinite, rotation 120s linear infinite;
    z-index: 1;
    position: absolute;
    inset: 0;
    margin: auto;
}
/* MV背景   */
.mv__bgRight{
    position: absolute;
    width: 30%;
    top:0;
    right: 0;
}
.mv__bgLeft{
    position: absolute;
    width: 30%;
    left: -10%;
    bottom: -15%;
}
.mv__piano{
    position: absolute;
    max-width: 40%;
    right: 0;
    bottom: -12%;
}
.mv__flute{
    position: absolute;
    max-width: 45%;
    left: -5%;
}
@media screen and (width<=450px){
    .mv__bgRight{
        width: 40%;
    }
    .mv__bgLeft{
        width: 40%;
        left: -5%;
        bottom: -5%;
    }
    .mv__piano{
        max-width: 80%;
        right: 0;
        bottom: -5%;
    }
    .mv__flute{
        max-width: 80%;
    }
  }


/* サークル文字グラデーション */
@keyframes Grad {
  0%{fill:hsl(0,50%,50%);}
  1%{fill:hsl(3.6,50%,50%);}
  2%{fill:hsl(7.2,50%,50%);}
  3%{fill:hsl(10.8,50%,50%);}
  4%{fill:hsl(14.4,50%,50%);}
  5%{fill:hsl(18,50%,50%);}
  6%{fill:hsl(21.6,50%,50%);}
  7%{fill:hsl(25.2,50%,50%);}
  8%{fill:hsl(28.8,50%,50%);}
  9%{fill:hsl(32.4,50%,50%);}
  10%{fill:hsl(36,50%,50%);}
  11%{fill:hsl(39.6,50%,50%);}
  12%{fill:hsl(43.2,50%,50%);}
  13%{fill:hsl(46.8,50%,50%);}
  14%{fill:hsl(50.4,50%,50%);}
  15%{fill:hsl(54,50%,50%);}
  16%{fill:hsl(57.6,50%,50%);}
  17%{fill:hsl(61.2,50%,50%);}
  18%{fill:hsl(64.8,50%,50%);}
  19%{fill:hsl(68.4,50%,50%);}
  20%{fill:hsl(72,50%,50%);}
  21%{fill:hsl(75.6,50%,50%);}
  22%{fill:hsl(79.2,50%,50%);}
  23%{fill:hsl(82.8,50%,50%);}
  24%{fill:hsl(86.4,50%,50%);}
  25%{fill:hsl(90,50%,50%);}
  26%{fill:hsl(93.6,50%,50%);}
  27%{fill:hsl(97.2,50%,50%);}
  28%{fill:hsl(100.8,50%,50%);}
  29%{fill:hsl(104.4,50%,50%);}
  30%{fill:hsl(108,50%,50%);}
  31%{fill:hsl(111.6,50%,50%);}
  32%{fill:hsl(115.2,50%,50%);}
  33%{fill:hsl(118.8,50%,50%);}
  34%{fill:hsl(122.4,50%,50%);}
  35%{fill:hsl(126,50%,50%);}
  36%{fill:hsl(129.6,50%,50%);}
  37%{fill:hsl(133.2,50%,50%);}
  38%{fill:hsl(136.8,50%,50%);}
  39%{fill:hsl(140.4,50%,50%);}
  40%{fill:hsl(144,50%,50%);}
  41%{fill:hsl(147.6,50%,50%);}
  42%{fill:hsl(151.2,50%,50%);}
  43%{fill:hsl(154.8,50%,50%);}
  44%{fill:hsl(158.4,50%,50%);}
  45%{fill:hsl(162,50%,50%);}
  46%{fill:hsl(165.6,50%,50%);}
  47%{fill:hsl(169.2,50%,50%);}
  48%{fill:hsl(172.8,50%,50%);}
  49%{fill:hsl(176.4,50%,50%);}
  50%{fill:hsl(180,50%,50%);}
  51%{fill:hsl(183.6,50%,50%);}
  52%{fill:hsl(187.2,50%,50%);}
  53%{fill:hsl(190.8,50%,50%);}
  54%{fill:hsl(194.4,50%,50%);}
  55%{fill:hsl(198,50%,50%);}
  56%{fill:hsl(201.6,50%,50%);}
  57%{fill:hsl(205.2,50%,50%);}
  58%{fill:hsl(208.8,50%,50%);}
  59%{fill:hsl(212.4,50%,50%);}
  60%{fill:hsl(216,50%,50%);}
  61%{fill:hsl(219.6,50%,50%);}
  62%{fill:hsl(223.2,50%,50%);}
  63%{fill:hsl(226.8,50%,50%);}
  64%{fill:hsl(230.4,50%,50%);}
  65%{fill:hsl(234,50%,50%);}
  66%{fill:hsl(237.6,50%,50%);}
  67%{fill:hsl(241.2,50%,50%);}
  68%{fill:hsl(244.8,50%,50%);}
  69%{fill:hsl(248.4,50%,50%);}
  70%{fill:hsl(252,50%,50%);}
  71%{fill:hsl(255.6,50%,50%);}
  72%{fill:hsl(259.2,50%,50%);}
  73%{fill:hsl(262.8,50%,50%);}
  74%{fill:hsl(266.4,50%,50%);}
  75%{fill:hsl(270,50%,50%);}
  76%{fill:hsl(273.6,50%,50%);}
  77%{fill:hsl(277.2,50%,50%);}
  78%{fill:hsl(280.8,50%,50%);}
  79%{fill:hsl(284.4,50%,50%);}
  80%{fill:hsl(288,50%,50%);}
  81%{fill:hsl(291.6,50%,50%);}
  82%{fill:hsl(295.2,50%,50%);}
  83%{fill:hsl(298.8,50%,50%);}
  84%{fill:hsl(302.4,50%,50%);}
  85%{fill:hsl(306,50%,50%);}
  86%{fill:hsl(309.6,50%,50%);}
  87%{fill:hsl(313.2,50%,50%);}
  88%{fill:hsl(316.8,50%,50%);}
  89%{fill:hsl(320.4,50%,50%);}
  90%{fill:hsl(324,50%,50%);}
  91%{fill:hsl(327.6,50%,50%);}
  92%{fill:hsl(331.2,50%,50%);}
  93%{fill:hsl(334.8,50%,50%);}
  94%{fill:hsl(338.4,50%,50%);}
  95%{fill:hsl(342,50%,50%);}
  96%{fill:hsl(345.6,50%,50%);}
  97%{fill:hsl(349.2,50%,50%);}
  98%{fill:hsl(352.8,50%,50%);}
  99%{fill:hsl(356.4,50%,50%);}
  100%{fill:hsl(360,50%,50%);}
}
/* キャッチコピーグラデーション */
@keyframes Grad2 {
    0%{color:hsl(0,50%,50%);}
    1%{color:hsl(3.6,50%,50%);}
    2%{color:hsl(7.2,50%,50%);}
    3%{color:hsl(10.8,50%,50%);}
    4%{color:hsl(14.4,50%,50%);}
    5%{color:hsl(18,50%,50%);}
    6%{color:hsl(21.6,50%,50%);}
    7%{color:hsl(25.2,50%,50%);}
    8%{color:hsl(28.8,50%,50%);}
    9%{color:hsl(32.4,50%,50%);}
    10%{color:hsl(36,50%,50%);}
    11%{color:hsl(39.6,50%,50%);}
    12%{color:hsl(43.2,50%,50%);}
    13%{color:hsl(46.8,50%,50%);}
    14%{color:hsl(50.4,50%,50%);}
    15%{color:hsl(54,50%,50%);}
    16%{color:hsl(57.6,50%,50%);}
    17%{color:hsl(61.2,50%,50%);}
    18%{color:hsl(64.8,50%,50%);}
    19%{color:hsl(68.4,50%,50%);}
    20%{color:hsl(72,50%,50%);}
    21%{color:hsl(75.6,50%,50%);}
    22%{color:hsl(79.2,50%,50%);}
    23%{color:hsl(82.8,50%,50%);}
    24%{color:hsl(86.4,50%,50%);}
    25%{color:hsl(90,50%,50%);}
    26%{color:hsl(93.6,50%,50%);}
    27%{color:hsl(97.2,50%,50%);}
    28%{color:hsl(100.8,50%,50%);}
    29%{color:hsl(104.4,50%,50%);}
    30%{color:hsl(108,50%,50%);}
    31%{color:hsl(111.6,50%,50%);}
    32%{color:hsl(115.2,50%,50%);}
    33%{color:hsl(118.8,50%,50%);}
    34%{color:hsl(122.4,50%,50%);}
    35%{color:hsl(126,50%,50%);}
    36%{color:hsl(129.6,50%,50%);}
    37%{color:hsl(133.2,50%,50%);}
    38%{color:hsl(136.8,50%,50%);}
    39%{color:hsl(140.4,50%,50%);}
    40%{color:hsl(144,50%,50%);}
    41%{color:hsl(147.6,50%,50%);}
    42%{color:hsl(151.2,50%,50%);}
    43%{color:hsl(154.8,50%,50%);}
    44%{color:hsl(158.4,50%,50%);}
    45%{color:hsl(162,50%,50%);}
    46%{color:hsl(165.6,50%,50%);}
    47%{color:hsl(169.2,50%,50%);}
    48%{color:hsl(172.8,50%,50%);}
    49%{color:hsl(176.4,50%,50%);}
    50%{color:hsl(180,50%,50%);}
    51%{color:hsl(183.6,50%,50%);}
    52%{color:hsl(187.2,50%,50%);}
    53%{color:hsl(190.8,50%,50%);}
    54%{color:hsl(194.4,50%,50%);}
    55%{color:hsl(198,50%,50%);}
    56%{color:hsl(201.6,50%,50%);}
    57%{color:hsl(205.2,50%,50%);}
    58%{color:hsl(208.8,50%,50%);}
    59%{color:hsl(212.4,50%,50%);}
    60%{color:hsl(216,50%,50%);}
    61%{color:hsl(219.6,50%,50%);}
    62%{color:hsl(223.2,50%,50%);}
    63%{color:hsl(226.8,50%,50%);}
    64%{color:hsl(230.4,50%,50%);}
    65%{color:hsl(234,50%,50%);}
    66%{color:hsl(237.6,50%,50%);}
    67%{color:hsl(241.2,50%,50%);}
    68%{color:hsl(244.8,50%,50%);}
    69%{color:hsl(248.4,50%,50%);}
    70%{color:hsl(252,50%,50%);}
    71%{color:hsl(255.6,50%,50%);}
    72%{color:hsl(259.2,50%,50%);}
    73%{color:hsl(262.8,50%,50%);}
    74%{color:hsl(266.4,50%,50%);}
    75%{color:hsl(270,50%,50%);}
    76%{color:hsl(273.6,50%,50%);}
    77%{color:hsl(277.2,50%,50%);}
    78%{color:hsl(280.8,50%,50%);}
    79%{color:hsl(284.4,50%,50%);}
    80%{color:hsl(288,50%,50%);}
    81%{color:hsl(291.6,50%,50%);}
    82%{color:hsl(295.2,50%,50%);}
    83%{color:hsl(298.8,50%,50%);}
    84%{color:hsl(302.4,50%,50%);}
    85%{color:hsl(306,50%,50%);}
    86%{color:hsl(309.6,50%,50%);}
    87%{color:hsl(313.2,50%,50%);}
    88%{color:hsl(316.8,50%,50%);}
    89%{color:hsl(320.4,50%,50%);}
    90%{color:hsl(324,50%,50%);}
    91%{color:hsl(327.6,50%,50%);}
    92%{color:hsl(331.2,50%,50%);}
    93%{color:hsl(334.8,50%,50%);}
    94%{color:hsl(338.4,50%,50%);}
    95%{color:hsl(342,50%,50%);}
    96%{color:hsl(345.6,50%,50%);}
    97%{color:hsl(349.2,50%,50%);}
    98%{color:hsl(352.8,50%,50%);}
    99%{color:hsl(356.4,50%,50%);}
    100%{color:hsl(360,50%,50%);}
}
/* 回転 */
@keyframes rotation{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
}

/* ローディングページ */
.loadingpage{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20000;
    transition: ease-out 1.2s;
    background-color: #f5f5f5;
  }
  .loadingpage.js-loaded{
    opacity: 0;
    visibility: hidden;
  }
  .loadingpage_mv{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .loadingpage_catchcopy{
    position: absolute;
    z-index: 2;
    width: 40%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
  }
  @media screen and (width<=1536px){
    .loadingpage_catchcopy{width:35%; height: 45%;}
  }
  @media screen and (width<=1280px) {
    .loadingpage_catchcopy{height: 30%;}
  }

/* MV（下層） */
.mvLower{
    height: 75vh;
    background-image: url(../img/mv_bgLower.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 90%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mvLower__discription p{
    text-align: center;
}
/*****************************************************
	                about(TOP)
******************************************************/
#about{
    position: relative;
}
.about__wrapper{
    padding: 0px 3% 100px 3%;
    display: flex;
    overflow: hidden;
}
.about__wrapper h2{
    margin-top: 100px;
}
.about__titleFix1{
    margin-left: 62px;
}
.about__titleFix2{
    margin-left: 20px;
}
.about__mainsection{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.about__mainsection p{
    margin: 2rem auto 1rem 5%;
    width: 80%;
}
.about__mainsection button{
    width: 25%;
    max-width: 25%;
    margin-top: 1rem;
    margin-left: 40%;
}
.about__subsection{
    flex: 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5%;
    margin-top: 10%;
}
.about__subsectionImg1,
.about__subsectionImg2,
.about__subsectionImg3{
    min-width: 50%;
    margin-right: 5%;
}
.about__subsectionImg1{
    margin-top: -20%;
}
.about__subsectionImg2{
    margin-top: 20%;
}
.about__subsectionImg3{
    margin-top: -40%;
}
@media screen and (width<=1280px) {
    .about__wrapper{
        flex-direction: column;
    }
    .about__subsection{
        margin-top: -1%;
    }
    .about__subsectionImg1,
    .about__subsectionImg2,
    .about__subsectionImg3{
        min-width: 30%;
        margin-right: 5%;
    }
    .about__subsectionImg1{
        margin-top: 0%;
    }
    .about__subsectionImg2{
        margin-top: 10%;
    }
    .about__subsectionImg3{
        margin-top: 0%;
    } 
}
@media screen and (width<=450px) {
    .about__wrapper{
        padding: 0px 5% 100px 5%;
    }
    .about__titleFix1{
        margin-left: 0px;
    }
    .about__titleFix2{
        margin-left: 0px;
    }
    .icon_sharp{
        width: 2rem;
    }
    .about__mainsection p{
        width: 100%;
        margin: 2rem 0 1rem 0;
    }
}
/*****************************************************
	            レッスン(TOP)
******************************************************/
#lesson{
    position: relative;
}
.lesson__wrapper{
    background-color: #FFBEBE;
    padding-top: 200px;
}
.lesson__container{
    padding-top: 3rem;
    background-color: #fff;
    border-radius: 600px 600px 0 0;
}
.lesson__container h2{
    text-align: center;
    padding-top: 3rem;
}
.lesson__container button{
    margin: 0 auto;
}
.lesson__container .linkBtn{
    margin-bottom: 100px;
}
.lesson__lessonCourse{
    margin: 4rem auto 1.5rem auto;
    width: 60%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
}
.lesson__lessonCourceBtn{
    width: calc(100% / 2);
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
    margin-bottom: 2rem;
}
.lesson__lessonCourceBtn h3{
    margin: 1rem 0;
}
.lesson__lessonCourceBtn p{
    width: 80%;
}
.lesson__lessonCourceBtn button{
    border: none;
    width: 70%;
    aspect-ratio: 1 / 1.01;
    border-radius: 16px;
    background-color: #F9EE7A;
    background-size:  contain;
    background-position: center;
    background-repeat: no-repeat;
}
.lessonCourceBtn--standard{
    background-image: url(../img/icon_lesson_st1.png);
    transition: transform .6s ease;
}
.lessonCourceBtn--rythmique{
    background-image: url(../img/icon_lesson_ry1.png);
    transition: transform .6s ease;
}
.lessonCourceBtn--examination{
    background-image: url(../img/icon_lesson_uv1.png);
    transition: transform .6s ease;
}
.lessonCourceBtn--triallesson{
    background-image: url(../img/icon_lesson_tr1.png);
    transition: transform .6s ease;
}
/* ホバー後 */
.lesson__lessonCourceBtn:hover .lessonCourceBtn--standard,
.lesson__lessonCourceBtn:active .lessonCourceBtn--standard{
    background-image: url(../img/icon_lesson_st2.png);
    transform: scale(1.05);
}
.lesson__lessonCourceBtn:hover .lessonCourceBtn--rythmique,
.lesson__lessonCourceBtn:active .lessonCourceBtn--rythmique{
    background-image: url(../img/icon_lesson_ry2.png);
    transform: scale(1.05);
}
.lesson__lessonCourceBtn:hover .lessonCourceBtn--examination,
.lesson__lessonCourceBtn:active .lessonCourceBtn--examination{
    background-image: url(../img/icon_lesson_uv2.png);
    transform: scale(1.05);
}
.lesson__lessonCourceBtn:hover .lessonCourceBtn--triallesson,
.lesson__lessonCourceBtn:active .lessonCourceBtn--triallesson{
    background-image: url(../img/icon_lesson_tr2.png);
    transform: scale(1.05);
}
@media screen and (width<=1280px){
    .lesson__container{
        border-radius: 200px 200px 0 0;
    }
    .lesson__lessonCourceBtn button{
        width: 60%;
    }
    .lesson__lessonCourceBtn{
        width: calc(100% / 1);
    }
    .lesson__lessonCourceBtn p{
        width: 60%;
    }
}
@media screen and (width<=450px){
    .lesson__wrapper{
        padding-top: 100px;
    }
    .lesson__container{
        border-radius: 100px 100px 0 0;
    }
    .lesson__container{
        padding: 0 1%;
    }
    .lesson__lessonCourse{
        width: 100%;
    }
    .lesson__lessonCourceBtn button{
        width: 80%;
    }
    .lesson__lessonCourceBtn{
        width: calc(100% / 1);
    }
    .lesson__lessonCourceBtn p{
        width: 80%;
    }
    .lesson__wrapper .linkBtn{
        width: 80%;
    }
    .lesson__wrapper .linkBtn{
        font-size: 1.2rem;
    }
}
/*****************************************************
	                講師紹介(TOP)
******************************************************/
#profile{
    background-color: #FFF8D5;
    position: relative;
    padding-top: 200px;
}
.profile__container{
    padding-top: 50px;
    background-color: #fff;
    border-radius: 600px 600px 0 0;
}
.profile__container h2{
    text-align: center;
    padding-top: 3rem;
    margin-bottom: 4rem;
}
.profile__wrapper{
    display: flex;
    justify-content: center;
    gap: 5%;
    margin: 0 auto;
    max-width: 1200px;
}
.profile__teacherImg{
    margin-top: 4rem;
    border-radius: 80px;
    overflow: hidden;
    width: 40%;
    max-height:700px;
}
.profile__teacherImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; 
}
.profile__teacherCareer{
    width: 50%;
}
.teacherName{
    font-size: 2rem;
    line-height:160%;
    font-weight: 500;
    font-style: normal;
    margin: 8rem 0 1.5rem 0;
}
.teacherName span{
    font-weight: 400;
    font-size: 0.7em;
    color: #FFBEBE;
}
.profile__teacherCareer .linkBtn{
    margin: 10% 0 0 auto;
    max-width: 50%;
}
@media screen and (width<=1280px){
    .profile__container{
        border-radius: 200px 200px 0 0;
    }
    .profile__wrapper{
        flex-direction: column;
        align-items: center;
    }
    .profile__teacherImg{
        max-height:500px;
    }
    .profile__teacherCareer{
        width: 70%;
    }
    .teacherName{
        margin: 1rem 0 1.5rem 0;
        text-align: center;
    }
}
@media screen and (width<=450px){
    #profile{
        padding-top: 100px;
    }
    .profile__wrapper{
        padding: 0 5%;
    }
    .profile__container h2{
        margin-bottom:0;
    }
    .profile__teacherImg{
        width: 100%;
        max-height: 400px;
    }
    .profile__container{
        border-radius: 100px 100px 0 0;
    }
    .profile__teacherCareer{
        width: 100%;
    }
}
/*****************************************************
	                お知らせ(TOP)
******************************************************/
.news__wrapper{
    width: 80%;
    margin-top: 10rem;
    background-color: #FFE6E6;
    border-radius: 0 80px 80px 0;
    display: flex;
    background-image: url(../img/icon_speaker.png);
    background-repeat: no-repeat;
    background-position: left 98%;
}
.news__title{
    background-color: #fff;
    margin-top: 2rem;
    border-radius: 0 80px 80px 0;
    min-width: 450px;
}
.news__title h2{
    padding: 1.5rem 0;
    margin-left: 40%;
}
.speakericon{
    margin: 5% 0 3% 35%;
    max-width: 350px;
}
.news__articlecontainer{
    width: 60%;
    min-width: 350px;
    margin: 12% 4rem 2rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.news__article li{
    font-size: 1.5rem;
    letter-spacing: 0.3rem;
    vertical-align:text-bottom;
    margin-left: 2rem;
    display: flex;
    align-items: center;
}
.news__article li p{
    font-size: 1rem;
    letter-spacing: 0.4rem;
    width: 30%;
}
.border{
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    margin: 0.9rem auto;
}
.news__articlecontainer .linkBtn{
    margin: 2rem 0 0 auto;
}
.news__sns{
    margin: 2rem auto 10rem auto;
    display: flex;
    justify-content: right;
}
.news__sns button{
    width: 90px;
    height: 90px;
    border: none;
    border-radius: 20px;
    background-color: #F9EE7A;
    margin-right: 3%;
    transition: transform .6s ease;
}
.news__sns button img{
    width: 60px;
    height: 60px;
}
.news__sns button:hover{
    transform: scale(1.05);
}
@media screen and (width<=1280px){
    .news__wrapper{
        width: 95%;
        margin-top: 10rem;
        background-color: #FFE6E6;
        border-radius: 0 80px 80px 0;
        display: flex;
        flex-direction: column;
    }
    .news__title{
        background-color: #fff;
        margin-top: 2rem;
        border-radius: 0 80px 80px 0;
        min-width: 450px;
    }
    .news__titlecontainer{
        display: flex;
        align-items: center;
    }
    .news__articlecontainer{
        width: 80%;
    }
    .news__article li{
        margin-left: 3rem;
    }
    .news__article li span{
        margin-right: 10%;
    }
    .news__articlecontainer .linkBtn{
        margin: 2rem 0 0 auto;
        width: 80%;
    }
    .news__article li{
        font-size: 1.2rem;
        flex-direction: column;
        align-items:baseline;
    }
    .news__article li p{
        width: 80%;
    }
}
@media screen and (width<=450px) {
    .news__wrapper{
        width: 100%;
        border-radius: 0 0 0 0;
        background-image:unset;
    }
    .news__title{
        min-width: 350px;
    }
    .news__articlecontainer{
        margin: 2rem 0 0 0;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .news__articlecontainer .linkBtn{
        width: 80%;
        margin: 2rem 0 40px 0;
    }
    .news__article li{
        width: 100%;
        margin-left: 1rem;
    }
}

/*****************************************************
	            体験レッスン（TOP）
******************************************************/
.triallesson__wrapper{
    width: 100%;
    margin-top: 5rem;
}
.triallesson__title{
    position: relative;
}
.triallesson__title h2{
    margin-left: 3%;
}
.triallesson__title span{
    position: relative;
    padding: 0 3rem;
}
.triallesson__title span:before {
    position: absolute;
    left: 0;
    top: 0.5rem;
    content: "";
    width: 2px;
    height: 100%;
    background: #565656;
    border-radius: 3px;
    transform: rotate(-40deg);
}
.triallesson__title span:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0.5rem;
    width: 2px;
    height: 100%;
    background: #565656;
    border-radius: 3px;
    transform: rotate(40deg);
}
.triallesson__information{
    padding: 3rem 10% 100px 10%;
}
.triallesson__informationText h3{
    margin-bottom: 1rem;
}
.triallesson__informationText .linkBtn{
    margin: 3rem auto 0 auto;
}
/* 画像横スクロール */
@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
}
.triallesson__wavesection{
    background-image: url(../img/bg_wave_blueTop.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
}    
.triallesson__imgs{
    display: flex;
    background-color: #ABF9FB;
    padding-top: 35px;
    overflow: hidden;
}
.triallesson__imgs ul{
    display: flex;
    list-style: none;
    padding: 0;
}
.triallesson__imgs ul{
    animation: infinity-scroll-left 50s infinite linear 0.5s both;
}
.triallesson__imgs ul li{
    width: 200px;   
}
.triallesson__imgs ul li:nth-child(1n){
    width: calc(100vw / 2.5);
}
.triallesson__imgs ul li:nth-child(2n){
    width: calc(100vw / 4);
    margin: 0 6rem 0 2rem;
}
.triallesson__imgs ul li img{
    width: 100%;
}
/* バウンド文字 */
.triallesson__enjoy{
    background-image: url(../img/bg_wave_blueBottom.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 300px;
}
.triallesson__boundtext{
    font-size: 8rem;
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: bold;
    color: #F9EE7A;
}
.triallesson__boundtext.sp1,
.triallesson__boundtext.sp2{
    display: none;
}
@keyframes bound-anim{
    0%{transform: translateY(0);}
    100%{transform: translateY(1rem);}
}
.triallesson__boundtext.pc span{
    display: inline-block;
    animation: 0.6s bound-anim ease-in infinite alternate;
}
.triallesson__boundtext span:nth-child(1){animation-delay: 0;}
.triallesson__boundtext span:nth-child(2){animation-delay: 0.3s;}
.triallesson__boundtext span:nth-child(3){animation-delay: 0.6s;}
.triallesson__boundtext span:nth-child(4){animation-delay: 0.9s;}
.triallesson__boundtext span:nth-child(5){animation-delay: 1.2s;}
.triallesson__boundtext span:nth-child(7){animation-delay: 0s;}
.triallesson__boundtext span:nth-child(8){animation-delay: 0.3s;}
.triallesson__boundtext span:nth-child(9){animation-delay: 0.6s;}
.triallesson__boundtext span:nth-child(10){animation-delay: 0.9s;}
.triallesson__boundtext span:nth-child(11){animation-delay: 1.2s;}
.triallesson__boundtext span:nth-child(12){animation-delay: 1.5s;}

@media screen and (width<=1400px){
    .triallesson__boundtext{
        font-size: 6.8rem;
}
}
@media screen and (width<=960px){
    .triallesson__boundtext{
        font-size: 5rem;
}
}
@media screen and (width<=450px){
    .triallesson__title{
        margin: 0 auto;
    }
    .triallesson__title h2{
        margin-left: 0;
    }
    .triallesson__title span{
        padding: 0 1rem;
    }
    .triallesson__title span:before{
        display: none;
    }
    .triallesson__title span:after{
        display: none;
    }
    .triallesson__information{
        padding: 3rem 5% 100px 5%;
    }
    .triallesson__boundtext.pc{
        display: none;
    }
    .triallesson__boundtext.sp1,
    .triallesson__boundtext.sp2{
        display: inline-block;
        font-size: 4rem;
        margin-left: 5%;
    }
    .triallesson__boundtext.sp1{
        margin-bottom: 3rem;
    }
    .triallesson__wavesection{
        height: 50px;
    }
    .triallesson__enjoy{
        height: auto;
    }
}

/*****************************************************
	                アクセス(TOP)
******************************************************/
.access__wrapper{
    width: 90%;
    margin: 100px 0 0 auto;
    background-color: #FFF8D5;
    border-radius: 80px 0 0px 80px;
    background-image: url(../img/icon_map.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}
.access__titlecontainer{
    width: 90%;
    margin: 0 0 0 auto;
    padding-top: 3rem;
}
.access__title{
    background-color: #fff;
    border-radius: 80px 0 0 80px;
    min-width: 450px;
    display: flex;
    align-items: center;
}
.access__title h2{
    padding: 1.5rem 0;
    margin-left: 5%;
}
.access__titleAddress{
    margin-left: 4rem;
}
.access__titleAddress p:nth-child(odd){
    font-size: 0.9rem;
}
.access__titleAddress p:nth-child(2){
    margin-left: 1rem;
    font-size: 1.2rem;
}
.access__titleAddress a{
    position: relative;
}
.access__titleAddress a::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -1.5rem;
    width: 1rem;
    height: 1rem;
    background-image: url("../img/icon_targetblank.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.access__titleAddress--tbsp{
    display: none;
}
.access__route{
    margin: 3rem 0 0 15%;
    padding-bottom: 4rem;
    display: flex;
    justify-content: space-between;
    align-items:last baseline;
}
.access__routeText{
    width: 80%;
}
.access__routeTextTransportation h3{
    background-color: #F9EE7A;
    width:fit-content;
    font-size: 1.5rem;
    padding: 0 2rem;
    border-radius: 10rem;
}
.access__routeTextTransportation p{
    margin: 1rem 0 3rem 2rem;
}
.access__routeTextPublic h3{
    background-color: #FFBEBE;
    width:fit-content;
    font-size: 1.5rem;
    padding: 0 2rem;
    border-radius: 10rem;
}
.access__routeTextPublic p{
    margin: 1rem 0 0 2rem;
}
.access__routeImg{
    width: 40%;
    margin-right: 5%;
}
.access__routeImg img{
    max-width: 350px;
}
@media screen and (width<=1025px) {
    .access__wrapper{
        width: 95%;
        margin: 2rem 0 0 auto;
        background-color: #FFF8D5;
        border-radius: 80px 0 0px 80px;
    }
    .access__titleAddress{
        display: none;
    }
    .access__titleAddress--tbsp{
        display: block;
    }
    .access__titleAddress--tbsp{
        margin: 1rem 0 3rem 2rem;;
    }
    .access__titleAddress--tbsp p:nth-child(odd){
        font-size: 0.9rem;
    }
    .access__titleAddress--tbsp p:nth-child(2){
        margin-left: 1rem;
        font-size: 1.2rem;
    }
    .access__titleAddress--tbsp a{
        position: relative;
    }
    .access__titleAddress--tbsp a::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -1.5rem;
        width: 1rem;
        height: 1rem;
        background-image: url("../img/icon_targetblank.png");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .access__route{
        margin: 1rem 0 0 3rem;
    }   
}
@media screen and (width<=450px){
    .access__title{
        margin-left:auto;
        margin-left: 5%;
    }
    .access__titlecontainer{
        width: 100%;
        margin: 0 0 0 0;
    }
    .access__wrapper{
        width: 100%;
        border-radius: 0 0 0 0;
        overflow: hidden;
    }
    .access__routeText{
        width: 100%;
        padding: 0 3%;
    }
    .access__route{
        margin: 0 0 0 0;
    }
    .access__routeTextTransportation h3,
    .access__routeTextPublic h3{
        font-size: 1.2rem;
    }
    .access__titleAddress--tbsp p:nth-child(2){
        margin-left:0;

    }
}
/*****************************************************
	                お問い合わせ（TOP）
******************************************************/
.contact__wrapper{
    overflow: hidden;
}
.contact__container .icon_sharp{
    fill: #FFBEBE;
}
.contact__container{
    position: relative;
    width: 50%;
    margin: 120px auto 200px auto;
    border: 3px solid #ffe0e0;
    border-radius: 80px;
    transition: transform .6s ease;
    padding: 0 40px;
}
.contact__container h2{
    padding-top: 30px;
}
.contact__container:hover{
    transform: scale(1.02);
    border: 3px solid #FFBEBE;
}
#contact h2{
    margin: 2rem 0 1rem 0;
    text-align: center;
}
#contact p{
    text-align: center;
    padding-bottom: 80px;
}
.contact__icon1{
    display: none;
    position: absolute;
    width: 50px;
    top: 20%;
    left:-10%;
}
.contact__icon2{
    display: none;
    position: absolute;
    width: 200px;
    top: -30%;
    left:-30%;
}
.contact__icon3{
    display: none;
    position: absolute;
    width: 200px;
    bottom: 20%;
    right:-40%;
}
.contact__container:hover .contact__icon1,
.contact__container:hover .contact__icon2,
.contact__container:hover .contact__icon3{
    display: block;
}
@media screen and (width<=1025px) {
    .contact__container{
        width: 80%;
    }
}
@media screen and (width<=450px){
    .contact__container{
        width: 90%;
        margin: 100px auto 120px auto;
    }
    .contact__icon1,
    .contact__icon2,
    .contact__icon3{
        display: block;
    }
    .contact__icon1{
        width: 50px;
        top: 40%;
        left:-5%;
        transform: rotate(10deg);
    }
    .contact__icon2{
        width: 100px;
        top: -10%;
        left:-10%;
    }
    .contact__icon3{
        width: 120px;
        bottom: 0;
        right:-10%;
        transform: rotate(40deg);
    }
}
/*****************************************************
	                フッター
******************************************************/
.footer__wrapper{
    background-color: #FFE6E6;
    border-radius: 45% 45% 0 0;
}
.footer__container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer__title{
    margin: 100px auto 40px auto;
    text-align: center;
}
.footer__titleLogo{
    margin: 0 auto;
    width: 50%;
    min-width: 200px;
}
.footer__address{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
}
.footer__address a{
    position: relative;
}
.footer__address a::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -1.5rem;
    width: 1rem;
    height: 1rem;
    background-image: url("../img/icon_targetblank.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.footer__address span{
    font-size: 0.9rem;
}
.footer__mainNav{
    display: flex;
}
.footer__mainNav li{
    margin-right: 1.5rem;
}
.footer__mainNav li:first-child{
    margin-left: 2rem;
}
.footer__mainNav li:last-child{
    margin-right: 2rem;
}
.footer__snsNav{
    display: flex;
    font-size: 0.9rem;
    margin-top: 1rem;
}
.footer__snsNav li:first-child{
    margin-right: 3rem;
}
.footer__snsNav a{
    position: relative;
}
.footer__snsNav a::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -1.5rem;
    width: 1rem;
    height: 1rem;
    background-image: url("../img/icon_targetblank.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.footer__subNav{
    width: 100%;
    margin: 50px auto;
    display: flex;
    justify-content: space-around;
}
.footer__subNav ul{
    font-size: 0.9rem;
    display: flex;
}
.footer__subNav ul li:first-child{
    margin-right: 1.5rem;
}
.footer__subNav p{
    font-size: 0.8rem;
}
@media screen and (width<=1280px) {
    .footer__wrapper{
        border-radius: 200px 200px 0 0;
    }
}
@media screen and (width<=650px){
    .footer__mainNav{
        display: block;
    }
    .footer__mainNav li{
        margin-right: 0;
        text-align: center;
    }
    .footer__mainNav li:first-child{
        margin-left: 0rem;
    }
    .footer__mainNav li:last-child{
        margin-right: 0;
    }
    .footer__subNav{
        flex-direction: column;
        align-items: center;
    }
    .footer__subNav ul li:first-child{
        margin-right: 1.5rem;
    }
    .footer__subNav p{
        font-size: 0.8rem;
    }
}
@media screen and (width<=450px) {
    .footer__wrapper{
        border-radius: 0 0 0 0;
    }
}
/*****************************************************
	            セクション(TOP)
******************************************************/
.wave{
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0;
}
#about #wave{
    fill: #FFBEBE;
}
#lesson #wave2{
    fill: #FFF8D5;
}
/*****************************************************
	            レッスン(下層)
******************************************************/
.lessonLower__description{
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0;
}
.lessonLower__description p{
    padding: 1.5rem 4rem 2rem 4rem;
}
.lessonLower__descriptionBtn{
    width: 100%;
    margin-top: 20px;
    padding: 0 4rem;
}
.lessonLower__mainmenu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.lessonLower__mainmenu li{
    background-color: #d4596b;
    color: #fff;
    margin-right: 1rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    padding: 0.5rem 2rem;
    transition: transform .6s ease;
    min-width: 250px;
    min-height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lessonLower__submenu{
    display: flex;
    justify-content: center;
    background-color: #f5f5f5;
    border-radius: 3px;
    padding: 0.5rem 0;
    margin-top: 1rem;
}
.lessonLower__submenu li:first-child{
    margin-right: 1.5rem;
}
.lessonLower__mainmenu li:hover{
    transform: scale(1.02);
    background-color: #e46a7d;
}
.lessonLower h3{
    padding-left: 3rem;
    margin-bottom: 2rem;
}
.lessonLower__ul{
    margin: 0 5%;
    padding-left: 1.5rem;
    list-style:disc;
}
.lessonLower__ul li{
    margin-bottom: 0.5rem;
}
/* スタンダードコース */
.lessonLower__standard{
    background-color: #fff3f3;
    background-image: url(../img/icon_lesson_st2.png);
    background-repeat: no-repeat;
    background-position:right 20vh bottom 0;
    background-size: contain;
}
.lessonLower__standardWrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0;
}
.lessonLower__rythmiqueWrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 0 80px 0;
}
.lessonLower__examination{
    background-color: #fffbe5;
    background-image: url(../img/icon_lesson_uv2.png);
    background-repeat: no-repeat;
    background-position:right 20vh bottom 0;
    background-size: contain;
}
.lessonLower__rythmiqueText{
    display: flex;
    justify-content: center;
}
.lessonLower__examinationWrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0;
}
.lessonLower__triallessonWrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 0 80px 0;
}
.lessonLower__triallessonText{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 料金表テーブル */
.lessonLower__fee{
    background-color: #e4f6f9;
    padding: 120px 0 100px 0;
}
.lessonLower__feeWrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 0 100px 0;
    border-radius: 300px 300px 20px 20px;
    background-color: #fff;
    overflow-x: auto;
}
.contents_box::-webkit-scrollbar{
    display: none;
  }
.lessonLower__feeWrapper h2{
    text-align: center;
    margin-bottom: 40px;
}
.lessonLower__tableWrapper{
    width: fit-content;
    margin: 0 auto;
}
.lessonLower__feeText p{
    text-align: right;
    font-size: 0.8rem;
    line-height: 190%;
}
.lessonLower__feeText p:first-child{
    margin-top: 1rem;
}
.lessonLower__fee table{
    margin: 0 auto;
    max-width: 1200px;
    border-collapse: separate; 
}
.lessonLower__fee table{
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 0 5%;
    overflow: hidden;
}
.lessonLower__fee table th,
.lessonLower__fee table td{
    border: 1px solid #ffffff;
    padding: 0.5rem 2rem;
    text-align: center;
    overflow: hidden;
}
.table__course th{
    background-color: #bddfe0;
    text-wrap: nowrap;
}
.table__course td{
    background-color: #f5f5f5;
}
.table__lesson1{
    background-color: #a7dee0;
    height: 70px;
    text-wrap: nowrap;
}
.table__lesson2{
    background-color: #dfeced;
    color: #666;
    font-size: 0.9rem;
    text-wrap: nowrap;
}   
.table__radius1{
    border-radius: 20px 0 0 0;
}
.table__radius2{
    border-radius: 0 20px 0 0 ;
}
.table__radius3{
    border-radius: 0 0 20px 0;
}
.table__radius4{
    border-radius: 0 0 0 20px;
}
/* レッスン規約 */
#lessonaAreements{
    background-color: #fff5f5;
}
.lessonaAreementsWrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 0;
}
.lessonaAreementsWrapper h3{
    padding-left: 3rem;
    padding-bottom: 1.5rem;
}
.lessonaAreementsWrapper ul{
    margin: 3rem 0;
    padding: 0 5rem;
}
.lessonaAreementsWrapper ul li{
    margin-bottom: 1rem;
}
.lessonaAreementsWrapper p{
    margin-left: 1rem;
}
@media screen and (width<=450px){
    .lessonLower h3{
        padding-left:0;
        padding: 0 5%;
    }
    .lessonLower__description p{
        padding: 1.5rem 5% 2rem 5%;
    }
    .lessonLower__descriptionBtn{
        padding: 0 5%;
    }
    .lessonaAreementsWrapper ul{
        padding: 0;
    }
    .lessonaAreementsWrapper{
        padding: 100px 5%;
    }
    .lessonLower__feeWrapper{
        border-radius: 100px 100px 0 0;
        padding: 100px 0 40px 0;
    }
    .lessonLower__triallessonText{
        padding: 0 5%;
    }
}
/* あしらい/// */
.heading1 {
    position: relative;
    padding: 1.5rem 0;
}
.heading1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-image: repeating-linear-gradient(45deg, #b4a983 0px, #b4a983 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
    background-size: 8px 8px;
}
.heading1.pink::after{
    background-image: repeating-linear-gradient(45deg, #FFBEBE 0px, #FFBEBE 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
}
.heading1.yellow::after{
    background-image: repeating-linear-gradient(45deg, #F9EE7A 0px, #F9EE7A 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
}
.arrow_u {
    position: relative;
    display: inline-block;
    padding-left: 20px;
}
.arrow_u:before {
    content: '';
    width: 6px;
    height: 6px;
    border: 0;
    border-bottom: solid 2px #333;
    border-right: solid 2px #333;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}
/*****************************************************
	            お知らせ（下層）news
******************************************************/
.newsLower__description{
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0 0 0;
}
.newsLower__description p{
    padding: 1.5rem 4rem 2rem 4rem;
}
/* コピペ */
.newsLower__Wrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4%;
}
.news__newsWrapper{
    display: flex;
    justify-content: space-between;
    margin-top: 120px;
}
.news__listTitle{
    font-weight: bold;
}
.news__categoryArchive{
    margin-right: 70px;
}
.news__newsArticle{
    width: 800px;
    max-width: 800px;
}
/* 記事カテゴリ */
.news__categorylist{
    margin-bottom: 5vh;
}
.news__categorylistItem{
    padding:2px 0 2px 1em;
}

/* アーカイブ */
.news__archiveBox{
    display: inline-flex;
    align-items: center;
    position: relative;
}
.news__archiveBox::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #4a4a4a;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}
.news__archiveBox select{
    appearance: none;
    min-width: 120px;
    height: 2.8em;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #FFBEBE;
    border-radius: 3px;
    background-color: #fff;
    color: #2a2a2a;
    font-size: 1em;
    cursor: pointer;
}
/* 記事アコーディオン */
.news__accordion_container {
    max-width: 800px;
    margin: 0 auto;
}
.news__accordion_articletitle{
    display: flex;
    margin-bottom: 10px;
}
.news__accordion_text_date{
    font-size: 10pt;
    margin-right: 32px;
}
.news__accordion_text_title{
    font-weight: bold;
}
.news__accordion_text_category{
    background-color: #BE4B5C;
    border-radius: 3px;
    font-size: 10pt;
    color: #fff;
    padding: 0 5px;
}
.news__accordion_title {
    font-size: 16px;
    font-weight: bold;
    padding: 20px 5%;
    border-top: 2px solid #FFBEBE;
    text-align: left;
    position: relative;
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.2s;
}
.news__accordion_container:last-child{
    border-bottom: 2px solid #FFBEBE;
}
.news__accordion_title:hover {
    opacity: 0.8;
}
.icon_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 5%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
}
.icon {
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
    position: relative;
}
.news__accordion_title.open 
  .icon_wrap {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
.icon:before, .icon:after {
    display: flex;
    content: '';
    background-color: #BE4B5C;
    border-radius: 10px;
    width: 18px;
    height: 4px;
    position: absolute;
    top: 7px;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: center center;
}
.icon:before {
    width: 4px;
    height: 18px;
    top: 0;
    left: 7px;
}
.news__accordion_title.open 
.icon_wrap .icon:before {
    content: none;
  }
.news__accordion_title.open 
.icon_wrap .icon:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
.news__accordion_inner {
    display: none;
    padding: 20px 20px;
    border-top: 1px solid #FFBEBE;
    border-bottom: 1px solid #FFBEBE;
    box-sizing: border-box;
}
.ac_inner_wraper {
    padding-left:2em;
}
p.txt_a_ac {
    margin: 0;
}
@media screen and (width<=1025px) {
    .news__accordion_title {
      font-size: 18px;
    }
    .icon_wrap {
      width: 30px;
      height: 30px;
      margin-top: -15px;
    }
}
@media screen and (width<=769px) {
    .news__accordion_title {
      font-size: 16px;
      text-align: left;
      padding: 15px 60px 15px 15px;
    }
}
/* ページネーション */
.pagination{
    display: flex;
    justify-content:center;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 70px;
}
.pagination__paginationItemLink{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 40px;
    height: 40px;
    background: #FFBEBE;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.15s linear;
}
.pagination__paginationItemLinkIcon{
    width: 20px;
}
.pagination__paginationItemLink.isActive{
    background: #BE4B5C;
    color: #ffffff;
    pointer-events: none;
}
.pagination__paginationItemLink:not(.isActive):hover {
    background: #d4596b;
    color: #ffffff;
}
.pagination > * + * {
    margin-left: 12px;
}
.news__categorylistItems--sp{
    display: none;
}

@media screen and (width<=769px){
    .news__newsWrapper{
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        padding: 2em 3.5%;
    }
    .news__categoryArchive{
        margin-right: 1em;
        width: 30%;
    }
}
@media screen and (width<=451px){
    .news__categorylistItem{
        display: none;
    }
    .news__newsWrapper{
        flex-direction: column-reverse;
        justify-content: space-between;
        padding: 70px 0;
    }
    .news__categoryArchive{
        width: 100%;
        justify-content: space-between;
        
    }
    .news__categorylistItems--sp{
        display: inline-flex;
        align-items: center;
        position: relative;
    }
    .news__categorylistItems--sp::after {
        position: absolute;
        right: 15px;
        width: 10px;
        height: 7px;
        background-color: #4a4a4a;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        content: '';
        pointer-events: none;
    }
    .news__categoryArchive{
        width: 100%;
    }
    .news__categorylist{
        margin-top: 2em;
        margin-bottom: 0;
    }
    .news__categorylistItems--sp select{
        appearance: none;
        width: 350px;
        height: 2.8em;
        padding: .4em calc(.8em + 30px) .4em .8em;
        border: 1px solid #9d6435;
        border-radius: 3px;
        background-color: #fff;
        color: #2a2a2a;
        font-size: 1em;
        cursor: pointer;
    }
    .news__archiveBox select{
        width: 350px;
    }
    .news__newsArticle{
        width: 100%;
    }
}

/* コピペここまで */
/*****************************************************
	            お問い合わせ(下層)
******************************************************/
.contactLower__Wrapper{
    background: linear-gradient(0deg, #FFF8F8, #fbfcf0);
    background-size: 200% 200%;
    animation: GradMV 10s ease infinite;
    padding: 120px 4%;
}
.contactLower__Container{
    margin: 0 auto;
    padding: 120px 0;
    max-width: 1200px;
    background-color: #fff;
    border-radius: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.contactLower__discription{
    margin-top: 2rem;
}
.contactLower__discription p{
    margin: 0 auto;
    width: 80%;
    text-align: center;
}
.contactLower__step{
    width: 40%;
}
.contactLower__stepItems{
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
}
.contactLower__stepCircle{
    position: relative;
    border: 2px solid #ccc;
    background-color: #f5f5f5;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    font-size: 1.5rem;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contactLower__stepItem.current .contactLower__stepCircle{
    border: 2px solid #FFBEBE;
    background-color: #fff5f5;    
}
.contactLower__step p{
    text-align: center;
    color: #6b6b6b;
}
.contactform{
    width: 100%;
    padding: 0 10%;
    margin-top: 50px;
}
.contactform__table{
    margin: 0 auto;
}
.contactform__table .required{
    margin-left: 1rem;
    font-size: 0.8rem;
    border-radius: 20px;
    color: #fff;
    background-color: #BE4B5C;
    padding: 3px 10px;
    vertical-align: bottom;
}
.contactform__table tr{
    padding: 50px;
}
.contactform__table th{
    width: 100%;
    display: block;
    padding: 1rem 0 0.8rem 0;
}
.contactform__table td{
    width: 100%;
    display: block;
    margin-left: 1.5rem;
}
/* ラジオボタン */
.contactformSelect{
    position: relative;
}
.contactformSelect:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 12px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(135deg);
    pointer-events: none;
}
.contactformSelect select {
    height: 2.4em;
    width: 100%;
    padding: 0 1rem;
    border-radius: 4px;
    border: none;
    box-shadow: 0 0 0 1px #ccc inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}
.contactformSelect select::-ms-expand {
    display: none;
}
.contactformSelect select:focus {
    outline: 0;
    box-shadow: 0 0 0 2px #FFBEBE inset;
}
/* チェックボックス */
.contactformCheckbox{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.contactformCheckbox input {
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
}
.contactformCheckbox-name {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: #666;
    position: relative;
}
.contactformCheckbox-name:before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-right: 6px;
    flex-shrink: 0;
}
.contactformCheckbox input:checked + .contactformCheckbox-name:before {
    border: 1px solid #BE4B5C;
    background-color: #BE4B5C;
}
.contactformCheckbox input:checked + .contactformCheckbox-name:after {
    content: "";
    position: absolute;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    left: 0.4em;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0.4em;
    height: 0.65em;
    transform: translateY(-1px) rotate(45deg);
}
.contactformCheckbox input:focus-visible + .contactformCheckbox-name .contactformCheckbox-text {
    background: linear-gradient(transparent 90%, #FFBEBE 90%);
}
/* テキスト入力 */
.contactformText{
    height: 3rem;
    width: 100%;
    padding: 0 1rem;
    border-radius: 4px;
    border: none;
    box-shadow: 0 0 0 1px #ccc inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.contactformText:focus{
    outline: 0;
    box-shadow: 0 0 0 2px #FFBEBE inset;
}
/* テキストエリア */
.contactformTextarea{
    resize: vertical;
    display: block;
    width: 100%;
    min-height: 200px;
    padding: 4px 16px;
    border-radius: 4px;
    border: none;
    box-shadow: 0 0 0 1px #ccc inset;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    resize: vertical;
}
.contactformTextarea:focus {
    outline: 0;
    box-shadow: 0 0 0 2px #FFBEBE inset;
}
/* プライバシーポリシー */
.contactformPrivacypolicy{
    height: 200px;
    width: 100%;
    padding: 4px 16px;
    border: none;
    box-shadow: 0 0 0 1px #ccc inset;
    border-radius: 4px;
    overflow-y: scroll;
    margin-bottom: 1rem;
}
.contactformPrivacypolicy:focus {
    outline: 0;
    box-shadow: 0 0 0 2px #FFBEBE inset;
}
.contactformPrivacypolicy span{
    display: block;
    margin-top: 1rem;
}
.contactformPrivacypolicy ul li ul{
    list-style: disc;
    padding-left: 1.5rem;
}
.contactformPrivacypolicy__text p{
    margin-left: 1rem;
}

/* 送信ボタン */
.contactformSubmitBtn {
    display: inline-block;
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 4px;
    background-color: #BE4B5C;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    border: 2px solid transparent;
}
.contactformSubmitBtn:hover {
    background-color: #ad4555;
}
.contactformSubmitBtn:focus {
    outline: 0;
    background-color: #ad4555;
    border: 2px solid #FFBEBE;
}
/* 個別調整 */
.contactform__tableSubmit{
    margin: 0 auto;
}
.contactform__tableSubmit th{
    padding: 0;
}
.contactform__tableSubmit td{
    margin: 0;
    padding: 0;
}
.contactform__tableReply td{
    width: 100%;
    display: flex;
}
.contactform__tableReply label{
    display: flex;
}
.contactform__tableReply p{
    margin: 0 1.5rem 0 0.5rem;
}
.contactformText.age{
    width: 10%;
}
.contactformTextSup{
    margin-left: 0;
    font-size: 0.8rem;
}
@media screen and (width<=450px){
    .contactLower__Wrapper{
        padding: 100px 0;
    }
    .contactLower__Container{
        padding:40px 0;
        border-radius: 80px;
    }
    .contactform{
        padding: 0 6%;
    }
    .contactLower__stepItems{
        display: none;
    }
    .contactform__table td{
        margin-left: 0;
    }
    .contactformText.age{
        width: 40%;
    }
}
/*****************************************************
	            プライバシーポリシー
******************************************************/
.privacypolicyWrapper{
    max-width: 1200px;
    margin: 0 auto 120px auto;
}
.privacypolicy__description{
    padding: 80px 0 0 0;
}
.privacypolicy__description p{
    padding: 1.5rem 4rem 2rem 4rem;
}
.privacypolicyWrapper h3{
    margin-top: 4rem;
    padding-left: 3rem;
}
.privacypolicyWrapper ul ul{
    margin: 1rem 0;
    padding: 0 5rem;
    list-style: disc;
}
.privacypolicyWrapper ul li{
    margin-bottom: 1rem;
}
.privacypolicyWrapper p{
    margin-left: 1rem;
}
.privacypolicyDate{
    text-align: right;
}

/*****************************************************
                  Animate.css調整
******************************************************/
@-webkit-keyframes fadeInUpSmall {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 30%, 0);
      transform: translate3d(0, 30%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fadeInUpSmall {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 30%, 0);
      transform: translate3d(0, 30%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .fadeInUpSmall {
    -webkit-animation-name: fadeInUpSmall;
    animation-name: fadeInUpSmall;
  }
  @-webkit-keyframes fadeInLeftSmall {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-10%, 0, 0);
      transform: translate3d(-10%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fadeInLeftSmall {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-10%, 0, 0);
      transform: translate3d(-10%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .fadeInLeftSmall {
    -webkit-animation-name: fadeInLeftSmall;
    animation-name: fadeInLeftSmall;
  }
  @-webkit-keyframes fadeInRightSmall {
    from {
      opacity: 0;
      -webkit-transform: translate3d(10%, 0, 0);
      transform: translate3d(10%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fadeInRightSmall {
    from {
      opacity: 0;
      -webkit-transform: translate3d(10%, 0, 0);
      transform: translate3d(10%, 0, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .fadeInRightSmall {
    -webkit-animation-name: fadeInRightSmall;
    animation-name: fadeInRightSmall;
  }
  @-webkit-keyframes fadeInDownSmall {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -30%, 0);
      transform: translate3d(0, -30%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fadeInDownSmall {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -30%, 0);
      transform: translate3d(0, -30%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .fadeInDownSmall {
    -webkit-animation-name: fadeInDownSmall;
    animation-name: fadeInDownSmall;
  }