@charset "utf-8";

/* base&reset settings ----------------------------------------------------*/
/*TOP*/
#first{
position:relative;
width:100%;
}

.main{
position: relative;
width:700px;
margin:0 auto;
text-align: center;
padding:100px 0 0;
}

.title{
width:700px;
margin:0 auto;
border-top:1px solid #000;
border-bottom:1px solid #000;
padding:20px 0;
text-align: left;
}

.title img{
height:25px;
}

h3{
font-size:0.8vw;
padding:20px 10px;
border:1px solid #000000;
width:200px;
margin:0 auto;
}

.extra{
background:#000000!important;
color:#ffffff!important;
}

.extra a{
color:#ffffff!important;
}

.visual{
width:400px;
}

.visua2{
width:700px;
}


#first p{
padding:60px 0;
font-size:0.8vw;
line-height:2vw;
}

h4{
font-size:1.1vw;
line-height:2vw;
margin-top:100px;
}

h4:first-of-type{
margin-top:0px;
}

h4.obi{
color:#ffffff;
background: #000000;
font-weight: 400;
font-size:0.8vw;
}

ul{
padding:60px 0 0;
font-size:0.8vw;
width:80%;
margin:0 auto;
}

li{
padding-bottom:20px;
text-align: left;
}

h3 a{
text-decoration: none;
color: #000000;
}

/*レッスン*/
#second p{
padding:60px 0;
font-size:0.8vw;
line-height:2vw;
}

h4.message{
font-size:1vw;
}

#second span.name{
text-align: right;
display: block;
font-size:0.8vw;
line-height:2vw;
}

h2.sub_title{
height:25px;
margin-top:60px;
text-align: center;
min-height: 60px;
}

h2.sub_title img{
width:auto;
height:20px;
padding-bottom:30px;
border-bottom:3px solid #000;
}

.flex2{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}

.flex2 div{
width:42%;
padding:20px;
background:#fff;
margin-bottom:30px;
}

p.lesson{
margin: 0;
padding: 0 0 20px 0!important;
font-weight: 700;
font-size:1vw!important;
}

p.rank{
margin: 0;
padding: 10px 0 10px 0!important;
border-bottom:1px solid #000;
font-size:0.6vw!important;
text-align: left;
}

p.dcopy{
margin: 0;
padding: 10px 0 20px 0!important;
line-height: 1.2vw!important;
text-align: left;
}

.att{
font-size:0.6vw!important;
text-align: left;
padding: 0 0 0 0!important;
}

.attex{
font-size:0.6vw!important;
text-align: center;
padding: 0 0 0 0!important;
}

.list{
margin:60px 0 0 0;
}

.list h4{
padding:10px 0 0 0!important;
margin:0!important;
}

.list img{
padding:60px 0 30px 0;
}

.list h4{
font-weight: 700;
font-size:1.2vw;
}

.list p{
padding:10px 0 0 0!important;
}

#map p{
padding:0!important;
}

#map h4{
margin:30px 0 0 0;
}

.map{
padding:50px;
background:#fff;
margin: 60px 0 0 0;
max-width:600px;
}

.googlemap{
width:24px;
margin:20px 0 20px 0;
}

.traffic{
font-size:0.6vw!important;
line-height: 1vw!important;
}

@media screen and (max-width: 768px){
#first{
position:relative;
width:100%;
}

.main{
position: relative;
width:90%;
margin:0 auto;
text-align: center;
padding:100px 0 0;
}

.title{
width:700px;
margin:0 auto;
border-top:1px solid #000;
border-bottom:1px solid #000;
padding:20px 0;
text-align: left;
}

.title img{
height:25px;
}

h3{
font-size:1.8vw;
padding:20px 10px;
border:1px solid #000000;
width:200px;
margin:0 auto;
}

.extra{
background:#000000!important;
color:#ffffff!important;
}

.visual{
width:60%;
}

.visual2{
width:90%;
}


#first p{
padding:60px 0;
font-size:1.8vw;
line-height:4vw;
}

h4{
font-size:2.6vw;
line-height:2vw;
margin-top:100px;
}

h4:first-of-type{
margin-top:0px;
}

h4.obi{
color:#ffffff;
background: #000000;
font-weight: 400;
font-size:1.8vw;
padding:10px 0;
width:80%;
margin-left:auto;
margin-right:auto;
}

ul{
padding:60px 0 0;
font-size:1.8vw;
width:80%;
margin:0 auto;
}

li{
padding-bottom:20px;
text-align: left;
}

nav li{
text-align: center;
}

/*レッスン*/
#second p{
padding:60px 0;
font-size:1.8vw;
line-height:4vw;
}

h4.message{
font-size:2.4vw;
padding-bottom:20px;
}

#second span.name{
text-align: right;
display: block;
font-size:1.4vw;
line-height:2vw;
}

p.lesson{
margin: 0;
padding: 0 0 20px 0!important;
font-weight: 700;
font-size:2vw!important;
}

p.rank{
margin: 0;
padding: 10px 0 10px 0!important;
border-bottom:1px solid #000;
font-size:1.4vw!important;
text-align: left;
}

p.dcopy{
margin: 0;
padding: 10px 0 20px 0!important;
line-height: 2.4vw!important;
text-align: left;
}

.att{
font-size:1.4vw!important;
text-align: left;
padding: 0 0 0 0!important;
}

.attex{
font-size:1.4vw!important;
text-align: center;
padding: 0 0 0 0!important;
}

.map{
padding:5%;
background:#fff;
margin: 60px 0 0 0;
max-width:90%;
}

.googlemap{
width:24px;
margin:20px 0 20px 0;
}

.traffic{
font-size:1.6vw!important;
line-height: 2.4vw!important;
}
}

@media screen and (max-width: 640px){
#first{
position:relative;
width:100%;
}

.main{
position: relative;
width:90%;
margin:0 auto;
text-align: center;
padding:60px 0 0;
}

.title{
width:90%;
margin:0 auto;
border-top:1px solid #000;
border-bottom:1px solid #000;
padding:20px 0;
text-align: center;
}

.title img{
height:25px;
}

h3{
font-size:3.6vw;
padding:20px 10px;
border:1px solid #000000;
width:200px;
margin:0 auto;
}

.extra{
background:#000000!important;
color:#ffffff!important;
}

.visual{
width:75%;
}

.visual2{
width:90%;
}


#first p{
padding:40px 0;
font-size:2.8vw;
line-height:6vw;
}

h4{
font-size:4vw;
line-height:2vw;
margin-top:60px;
}

h4:first-of-type{
margin-top:0px;
}

h4.obi{
color:#ffffff;
background: #000000;
font-weight: 400;
font-size:2.8vw;
padding:10px 0;
width:90%;
margin-left:auto;
margin-right:auto;
}

ul{
padding:60px 0 0;
font-size:2.8vw;
width:80%;
margin:0 auto;
}

li{
padding-bottom:20px;
text-align: left;
}

nav li{
text-align: center;
}

/*レッスン*/
#second p{
padding:40px 0;
font-size:2.8vw;
line-height:6vw;
}

h4.message{
font-size:4vw;
line-height: 6vw;
padding-bottom:20px;
}

#second span.name{
text-align: right;
display: block;
font-size:2vw;
line-height:3vw;
}

.flex2 div{
width:70%;
padding:20px;
background:#fff;
margin:0 auto 30px;
}

p.lesson{
margin: 0;
padding: 0 0 20px 0!important;
font-weight: 700;
font-size:4vw!important;
}

p.rank{
margin: 0;
padding: 10px 0 10px 0!important;
border-bottom:1px solid #000;
font-size:2vw!important;
text-align: left;
}

p.dcopy{
margin: 0;
padding: 10px 0 20px 0!important;
line-height: 4vw!important;
text-align: left;
}

.att{
font-size:2vw!important;
text-align: left;
padding: 0 0 0 0!important;
}

.attex{
font-size:2vw!important;
text-align: center;
padding: 0 0 0 0!important;
}

.map{
padding:5%;
background:#fff;
margin: 60px 0 0 0;
max-width:90%;
}

.googlemap{
width:24px;
margin:20px 0 20px 0;
}

#map h4{
margin-bottom:20px;
}

.traffic{
font-size:2vw!important;
line-height: 3vw!important;
}
}

#first h2{
padding:300px 0;
text-align: center
}

/*プライスリスト*/
#tab_menu,#tab_menu2 {
display: flex;
align-items: center;
width: 100%;
padding: 0;
margin: 0 0 1em;
}

#tab_menu li,#tab_menu2 li{
width: 50%;
padding: 17px 0 16px;
margin: 0 1px 0 0;
text-align: center;
list-style: none;
cursor: pointer;
color: #fff;
background: #000;
font-size: 125%;
}

#tab_menu li:last-child {
margin-right: 0;
}

#tab_menu li.selected {
background: #fff;
color:#000!important;
}

#tab_menu li:hover {
background: #333;
color:#fff!important;
}

#tab_menu li img {
display: inline-block;
vertical-align: middle;
position: relative;
bottom: 2px;
padding: 13.5px .4em 13.5px 0;
}

img.lstitle{
width:140px;
padding:10px 0 0 0!important;
}


/*/*/*/*/*/*/*20250822*/*/*/*/*/*/*/
/* #region Card ---------------------------------------------------------- */
h4.philosophy{
font-size:1vw;
margin-top:100px;
}

h2.twopart{
margin-top:0px;
min-height: 120px;
}

h2.twopart img{
height:50px;
}

.flex2 div.nobg{
width:42%;
padding:20px;
background:none;
margin-bottom:30px;
}

.flex2 div h3{
font-size:1.3vw;
line-height: 1.5vw;
}

.flex2 div h3 span{
font-size:0.8vw!important;
line-height: 1.3vw;
font-weight: normal;
}

.op-price{
    border:none /*1px solid #000*/;
    padding:20px;
    margin:20px 0 100px;
    border-radius: 10px;
    background:#fff;
}

.op-price p{
    margin:0!important;
    padding:0!important;
}

.op-price p.lesson_link{
  margin: 30px 0 20px !important;
}

.op-price a.lesson_bt{
  background:#E9E6DD;
  padding:15px 25px;
  text-decoration:none;
}

table.s_price{
  width:60%;
  margin:0 auto;
}

table.s_price td{
  padding:20px;
}

table.s_price td.cat{
  width:35%;
}

table.s_price td.list{
  width:65%;
}

table.s_price h4{
  line-height:1.4vw;
}

span.big{
    font-weight: 700;
    font-size:2vw;
}

span.semi_big{
    font-weight: 700;
    font-size:1.2vw;
}
/* #endregion Card ------------------------------------------------------- */

/*スマホ*/
/* #region Card ---------------------------------------------------------- */
@media screen and (max-width: 640px){
.flex2 div.nobg{
width:45%;
padding:0px;
background:none;
margin-bottom:30px;
}

.flex2 div h3{
font-size:3.6vw;
line-height: 4vw;
max-width:140px;
}

.flex2 div h3 span{
font-weight: normal;
font-size:3vw!important;
line-height: 4vw;
}

.op-price{
    border:none /*1px solid #000*/;
    padding:20px;
    margin:0px 0 100px;
    border-radius: 10px;
    background:#fff;
}

.op-price p{
    margin:0!important;
    padding:0!important;
}

.op-price p.lesson_link{
  margin: 30px 0 20px !important;
}

.op-price a.lesson_bt{
  background:#E9E6DD;
  padding:15px 25px;
  text-decoration:none;
  color:#000;
}

table.s_price{
  width:80%;
  margin:0 auto;
}

table.s_price td{
  padding:20px;
}

table.s_price td{
  padding:20px;
}

table.s_price td.cat{
  width:35%;
}

table.s_price h4{
  line-height:5vw;
}

.course h4{
  line-height:8vw;
}

span.big{
    font-weight: 700;
    font-size:8vw;
}

span.semi_big{
    font-weight: 700;
    font-size:4vw;
}

}
/* #endregion Card ---------------------------------------------------------- */

/*アニメ*/
/* #region Card ---------------------------------------------------------- */
.rotate-text {
  display: inline-block;
  opacity: 0;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden; /* 背面を消す（読みやすさUP） */
  will-change: transform;
}

/* 見えたら再生（1回版でも繰り返し版でも共通で使えます） */
.rotate-text.is-inview {
  /* timing-function は @keyframes 側で区間ごとに指定 */
  animation: rotateY 0.8s forwards;
  opacity: 1;
}

/* 最初ゆっくり → 後半グッと加速してそのまま着地 */
@keyframes rotateY {
  /* 0%→65%：強めの ease-in で“ため”を作る */
  0% {
    transform: perspective(600px) rotateY(0deg);
    animation-timing-function: cubic-bezier(.55, .085, .68, .53); /* easeInQuad 系 */
  }

  /* 45% 時点でまだ 220deg。見た目の加速の余地を残す */
  45% {
    transform: perspective(600px) rotateY(220deg);
    animation-timing-function: cubic-bezier(.55, .085, .68, .53); /* 後半も加速し続ける */
  }

  /* 100%：360deg 到達。終盤まで速度が乗ったまま“キュッ”と回り切る */
  100% {
    transform: perspective(600px) rotateY(360deg);
  }
}

/* ユーザーがモーション軽減を希望する場合の配慮（任意） */
@media (prefers-reduced-motion: reduce) {
  .rotate-text { animation: none !important; }
}
/* #endregion Card ---------------------------------------------------------- */