@charset "UTF-8";

/* ==========================================================================
   ダンスLP固有スタイル
   lp-common.css の後に読み込む。
   このファイルでは：
   1. テーマ変数（色）の上書き
   2. 画像の指定（このファイルからの相対パスで解決される）
   3. ダンスLP独自のセクション（MV テキスト構造、特徴の2カード、
      レビューの flexヘッド構造、メリットの色など）の定義
   ========================================================================== */

/* ==========================================================================
   1. テーマ変数の上書き
   ========================================================================== */

.lpvt {
	/* primary 系をブルー/パープルのグラデーション + 中間単色に変更 */
	--lp-color-primary:          #7DA7DC;
	--lp-color-primary-gradient: linear-gradient(to right, #ce93d8 0%, #575aea 100%);
	--lp-color-primary-gradient-reverse: linear-gradient(to left, #ce93d8 0%, #575aea 100%);  
  --lp-color-blue: #575AEA;
  --lp-color-orange: #FCA828;
	--lp-color-soft-bg:       #F5F5F5;
  --lp-color-primary-light: #CE93D8;
  --lp-color-bg-gradient: linear-gradient(to left, #f0fff4 0%, #e3f2fd 100%);
  --lp-color-red: #EB6877;
}
.lpvt h2 {
	font-size: 24px;
}
.txt-orange {
  color: var(--lp-color-orange);
}
.txt-red {
  color: var(--lp-color-red);
}

.txt-blue {
  color: var(--lp-color-blue);
}
.txt-green {
  color: #69BB00;
}
.lp-bg {
	background: var(--lp-color-soft-bg);
}
.lp-sec.-top-0 {
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  .lp-sec {
    padding: 60px 0;
  }
  .lp-sec-h {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 767px) {
  .lp-sec {
    font-size: 14px;
    padding: 30px 0;
  }
  .lp-sec-h {
    margin-bottom: 20px;
  }
}


/* ------------------------------------------------
 */
.lp-sec-mv {
  height: 640px;
	background-image: url('./dance02-mv.jpg');
  padding-top: 20px;
}
.lp-mv-h {
  margin: 0;
  line-height: 1.5;
}
.lp-mv-h-catch {
  position: relative;
  background: #FFF;
  color: var(--lp-color-blue);
  border: 3px solid var(--lp-color-blue);
  text-shadow: none;
  border-radius: 10px;
  padding: .1em .5em;
}
.lp-mv-h-catch::before,
.lp-mv-h-catch::after {
  position: absolute;
  top: 100%;
  left: 50%;
  content: "";
  height: 0;
  width: 0;
  border-color: transparent;
  border-top-color: transparent;
  border-left-color: transparent;
  border-style: solid;
}
.lp-mv-h-catch::before {
  border-width: 6px;
  border-top-color: var(--lp-color-blue);
  border-left-color: var(--lp-color-blue);  
  margin-left: -6px;
}
.lp-mv-h-catch::after {
  border-width: 4px;
  border-top-color: #FFF;
  border-left-color: #FFF;
  margin-left: -4px;
}
.lp-mv-badges {
  font-weight: bold;
	color: #FFF;
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.64);
}
.lp-mv-badges * {
  margin: 0;
  padding: 0;
}
.lp-mv-badges li {
  display: inline-block;
}
.lp-mv-badges > :not(:first-child) {
  margin-top: 20px;
}
.lp-mv-badges li:not(:first-child) {
  margin-left: 20px;
}
@media screen and (min-width: 768px) {
  .lp-mv-title {
    top: 40px;
  }
  .lp-mv-h {
    font-size: 42px;
    position: relative;
  }
  .lp-mv-h,
  .lp-mv-badges {
	  left: 10%;
  }
  .lp-mv-badges {
    bottom: 40px;
    font-size: 24px;
	  position: absolute;
  }
  .lp-mv-badges li img {
    width: 184px;
    height: 184px;
  }
  .lp-mv-h-catch::before {
    border-width: 12px;
    margin-left: -12px;
  }
  .lp-mv-h-catch::after {
    border-width: 8px;
    margin-left: -8px;
  }
}
@media only screen and (max-width: 767px) {
	.lp-sec-mv {
		background-image: url('./dance02-mv-sp.jpg');
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	}
  .lp-mv-h {
    font-size: 24px;
  }
  .lp-mv-h .maker-style {
    background: none;
  }
  .lp-mv-h-catch {
    font-size: 14px;
  }
  .lp-mv-badges  {
    font-size: 16px;
  }
  .lp-mv-badges li img {
    width: 120px;
    height: 120px;
  }
  .lp-mv-h-catch::before {
    border-width: 6px;
    margin-left: -6px;
  }
  .lp-mv-h-catch::after {
    border-width: 4px;
    margin-left: -4px;
  }
}


/* ------------------------------------------------
 */
.lp-information-option,
.lp-intro-frame {
  background: #FFF;
}
.lp-intro-frame {
  position: relative;
  margin-bottom: 16px;
}
.lp-intro-frame::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 16px 28px 0;
  border-top-color: #FFF;
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -28px;
}
.lp-intro-frame-catch {
  font-size: 18px;
  font-weight: bold;
}
.lp-intro-frame-main {
  display: flex;
}
.lp-intro-list {
  margin: 0 20px;
  width: auto;
}
.lp-intro-list li {
  background-image: url('./icon-check.png');
  margin: 0 0 .75em;
}
.lp-intro-frame-f {
  font-weight: bold;
}
.lp-intro-lead {
  font-weight: bold;
}
.lp-intro-lead dt {
  margin-bottom: .5em;
}

@media screen and (min-width: 768px) {
  .lp-intro-frame {
    padding: 20px 40px;
  }
  .lp-intro-frame > :not(:first-child) {
    margin-top: 2em;
  }
  .lp-intro-frame-main {
    display: flex;
    justify-content: space-between;
    align-items: end;
  }
  .lp-intro-frame-illust {
    flex: 0 0 140px;
  }
  .lp-intro-frame-f {
    font-size: 20px;
  }
  .lp-intro-lead {
    margin-top: 40px;
  }
  .lp-intro-lead dt {
    font-size: 32px;
  }
  .lp-intro-frame-catch::before,
  .lp-intro-frame-catch::after {
    font-size: 24px;
  }
  .lp-intro-frame-catch::after {
    content: "/";
    margin-left: 1em;
  }
  .lp-intro-frame-catch::before {
    content: "\\";
    margin-right: 1em;
  }
}

@media screen and (max-width: 767px) {
  .lp-intro-frame {
    padding: 20px 20px;
  }
  .lp-intro-frame > :not(:first-child) {
    margin-top: 1em;
  }
  .lp-intro-frame-main {
    flex-wrap: wrap;
    justify-content: center;
  }
  .lp-intro-list {
    order: -1;
    padding: 0;
    margin: 0;
  }
  .lp-intro-list li {
    background-position-y: .3em;
  }
  .lp-intro-frame-illust:last-child {
    margin-left: 10px;
  }
  .lp-intro-frame-illust img {
    height: 100px;
  }
  .lp-intro-frame-f {
    font-size: 16px;
  }
  .lp-intro-lead {
    margin-top: 24px;
  }
  .lp-intro-lead dt {
    font-size: 20px;
  }
}

/* ------------------------------------------------
 */
h2.lp-merit-copy {
  margin-top: 0;
}
.lp-merit-list {
  padding-top: 0;
}
.lp-merit-text h3.lp-merit-num-h {
  display: flex;
  align-items: center;
  margin-bottom: .5em;
}
.lp-merit-num {
  color: var(--lp-color-primary-light);
  margin-right: .2em;
}
.lpvt .lp-merit-catch {
  color: var(--lp-color-blue);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .lp-merit-num {
    font-size: 64px;
  }
}
@media screen and (max-width: 767px) {
  .lp-sec-merit {
    padding-bottom: 0;
  }
  .lp-merit-num {
    font-size: 48px;
  }
  .lp-merit-text h3.lp-merit-num-h {
    margin-bottom: .25em;
  }
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 */
.lp-roadmap-list .-step {
  color: #FFF;
  font-weight: bold;
  text-align: center;
  padding: .5em;
  background-image: var(--lp-color-primary-gradient-reverse);
  background-size: 333% 100%;
}
.lp-roadmap-list .-item:nth-child(1) .-step {
  background-position: left;
}
.lp-roadmap-list .-item:nth-child(3) .-step {
  background-position: center;  
}
.lp-roadmap-list .-item:nth-child(5) .-step {
  background-position: right;
}
.lp-roadmap-list dt {
  color: var(--lp-color-blue);
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}
.lp-roadmap-list dd {
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .lp-roadmap-list {
    display: flex;
    justify-content: space-between;
  }
  .lp-roadmap-list .-arrow {
    align-self: center;
  }
  .lp-roadmap-list .-arrow img {
    height: 24px;
  }  
  .lp-roadmap-list .-item {
    flex: 0 0 30%;
  }
  .lp-roadmap-list .-step {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  .lp-roadmap-list .-arrow {
    display: none;
  }
  .lp-roadmap-list .-item:not(:first-child) {
    margin-top: 40px;
  }
  .lp-roadmap-list .-item:not(:last-child)::after {
    content: '';
    position: relative;
    bottom: -12px;
    display: block;
    width: 100%;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('./arrow-d-blue.png');
    height: 16px;
    background-size: contain;
  }
  .lp-roadmap-list .-step {
    font-size: 20px;
  }
}


/* ------------------------------------------------
 */
.lp-sec-feature {
  background: 0;
}
.lp-feature-title {
  color: var(--lp-color-blue);
}
.lp-feature-text h3 {
  color: var(--lp-color-orange);
  margin-bottom: .5em;
}
.lp-feature-list > li {
  border-color: var(--lp-color-orange);
}

/* ------------------------------------------------
 */
.lp-sec-teachers {
  background: var(--lp-color-bg-gradient);
}

/* ------------------------------------------------
 */
.lp-review-list > li {
  background: var(--lp-color-soft-bg);
}
.lp-review-h h3 {
  color: var(--lp-color-blue);
}

/* ------------------------------------------------
 */
.lp-faq-item {
  border: 1px solid var(--lp-color-primary-light);
  border-radius: 5px;
  margin-bottom: 20px;
  background: #FFF;
}
.lp-faq-item dt,
.lp-faq-item dd {
  margin: 0;
  padding: .5em 1em;
  display: flex;
}
.lp-faq-item dt {
  background: var(--lp-color-primary-light);
  color: #FFF;
  font-weight: bold;
  align-items: center;
}
.lp-faq-item dd {
  padding-bottom: 1.5em;
}
.lp-faq-item dt::before,
.lp-faq-item dd::before {
  flex: 0 0 2em;
  font-size: 24px;
  font-weight: bold;
}

.lp-faq-item dt::before {
  content: "Q";
}
.lp-faq-item dd::before {
  content: "A";
  color: var(--lp-color-red);
}

/* ------------------------------------------------
 */
.lp-promise-list > li {
  border-color: var(--lp-color-primary-light);
}

/* ==========================================================================
   12. コース：薄カラーグラデ背景 + アイテム白背景
   ========================================================================== */

.lp-sec-course {
  background: var(--lp-color-bg-gradient);
}
.lp-sec-course h3 {
  color: #FFF;
  background: var(--lp-color-blue);
  height: 2.5em;
  overflow: hidden;  
}

/* ==========================================================================
   13. 料金：「料金見出し」をグラデに、サブテキストの SP サイズ調整
   ========================================================================== */

.lp-price-table h3 {
	color: #FFF;
	background: var(--lp-color-primary-gradient);
}


/* ==========================================================================
   14. 流れ：枠線・STEP背景をパープルに
   --lp-color-primary（青）ではなく primary-light（紫）を使う。
   ========================================================================== */

.lp-flow-item {
	border-color: var(--lp-color-primary-light);
}
.lp-flow-step {
	background: var(--lp-color-primary-light);
}
.lp-flow-list > li::after {
  background-image: url('./arrow-d-blue.png');
  height: 16px;
  background-size: contain;
}
.lp-flow-list h3 {
  color: var(--lp-color-primary-light);
}


/* ==========================================================================
   15. 校舎一覧
   通常は 2 列レイアウト（複数校舎時）。
   ただし校舎が 1 つだけのページ（特定校舎LP）では、:only-child で自動的に
   60% 幅・中央寄せに切り替える。
   ========================================================================== */

@media only screen and (max-width: 768px) {
  .lp-school-copy {
    font-size: 18px;
  }
}