@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300&display=swap');

/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
@font-face {
  font-family: 'myfont';
  src: url('../../assets/fonts/NotoSansJP-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'myfont-semi';
  src: url('../../assets/fonts/NotoSansJP-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'myfont-bold';
  src: url('../../assets/fonts/NotoSansJP-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'myfont-medium';
  src: url('../../assets/fonts/NotoSansJP-Medium.otf') format('opentype');
}

@font-face {
  font-family: 'myfont-exbold';
  src: url('../../assets/fonts/NotoSansJP-ExtraBold.ttf') format('truetype');
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3*/
  font-family: 'Zen Kaku Gothic New', sans-serif;
  text-align: justify;
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
  font-family: 'myfont';
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
  font-weight: normal;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: normal;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
  font-weight: normal;
}

dd {
  margin-left: 0;
  font-weight: normal;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
  font-weight: normal;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
  font-weight: normal;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
  cursor: default;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove arrow in IE10 & IE11
 */
select::-ms-expand {
  display: none;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px;
  /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* ヘッダーナビゲーション用のメディクリ設定　*/
@media only screen and (max-width: 1267px) {
  .header {
    position: fixed;
    width: 100%;
    background: white;
    height: 70px;
    display: flex;
    z-index: 10;
    top: 0;
  }

  .disktop {
    display: none;
  }

  .header-company {
    position: absolute;
  }

  .header-nav__desktop {
    display: none !important;
  }

  /* ================================
   Mobile Nav Refresh (SP/Tablet)
   既存HTMLそのまま差し替えOK
   ================================ */

  /* ハンバーガー自体（ガラス風ボタン） */
  .header-nav__mobile{
    display:block;
    position:fixed; right: 12px; top: 12px;
    z-index: 30000;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.7);
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
    backdrop-filter: blur(6px);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .header-nav__mobile:hover{ box-shadow: 0 6px 20px rgba(0,0,0,.12); }
  .header-nav__mobile:active{ transform: scale(.96); }
  
  /* 3本線 → × へのモーフ */
  .header-nav__mobile span{
    position:absolute; left: 7px; right: 7px;
    height: 2px; background:#333; border-radius: 2px;
    transition: transform .28s ease, top .28s ease, opacity .2s ease, background .28s ease;
  }
  .header-nav__mobile span:nth-child(1){ top: 13px; }
  .header-nav__mobile span:nth-child(2){ top: 21px; }
  .header-nav__mobile span:nth-child(3){ top: 29px; }
  
  .header-nav__mobile.active{ background: rgba(255,255,255,.9); }
  .header-nav__mobile.active span:nth-child(1){
    top: 21px; transform: rotate(45deg);
  }
  .header-nav__mobile.active span:nth-child(2){
    opacity: 0;
  }
  .header-nav__mobile.active span:nth-child(3){
    top: 21px; transform: rotate(-45deg);
  }
  
  /* 旧指定の影響を無効化 */
  .header-nav{ position: static; }
  
  /* オーバーレイ全体（.header-mobile を画面全体に） */
  .header-mobile{
    /* 旧: display:none; width:0; margin-left:-100px; を上書き */
    display: block;
    position: fixed; inset: 64px 0 0 0;  /* ヘッダー高を避ける */
    z-index: 29999;
    pointer-events: none;                 /* 非表示時クリック無効 */
    opacity: 0;                           /* 非表示 */
    transition: opacity .25s ease;
  }
  
  /* 半透明の暗幕 */
  .header-mobile::before{
    content:"";
    position: absolute; inset: 0;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .25s ease;
  }
  
  /* ドロワーパネルとして ul を利用（右からスライド） */
  .header-mobile ul{
    position: absolute; top:0; right:0; bottom:0;
    width: min(86vw, 420px);
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(0,0,0,.12);
    border-radius: 16px 0 0 16px;
    padding: 80px 18px 18px;   /* 上マージン多めで余裕 */
    overflow: auto;
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.22,.9,.23,1);
  }
  
  /* 表示状態 */
  .header-mobile.active{
    pointer-events: auto;
    opacity: 1;
  }
  .header-mobile.active::before{ opacity: 1; }
  .header-mobile.active ul{ transform: translateX(0); }
  
  /* アイテムの見た目（落ち着いたカード＋アイコン対応） */
  .header-mobile ul li{
    display: block;
    margin: 0 0 10px 0;
    padding: 0; border-radius: 12px;
    background: transparent;            /* 旧の原色背景は撤廃 */
  }
  .header-mobile ul li a{
    display:flex; align-items:center; gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: #1d1d1f; text-decoration: none;
    background: #f7f7f8;
    box-shadow: 0 1px 0 rgba(0,0,0,.04) inset;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .header-mobile ul li a img{
    width: 20px; height: 20px; object-fit: contain;
  }
  
  /* 末尾だけ強調（例：お問い合わせ）にしたい時 */
  .header-mobile ul li.is-emphasis a{
    background: #E84B42; color: #fff;
  }
  
  /* ホバー／押下（モバイルは触覚的に軽く） */
  @media (hover:hover){
    .header-mobile ul li a:hover{
      background:#efeff0; transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0,0,0,.06);
    }
  }
  .header-mobile ul li a:active{ transform: scale(.98); }
  
  /* 区切り・小見出し（任意で li に .nav-label を付与して使える） */
  .header-mobile ul li.nav-label{
    margin-top: 8px;
    padding: 8px 0 4px;
    color: #6b7280; font-size: 12px; letter-spacing: .06em;
    background: transparent; box-shadow: none;
  }
  .header-mobile ul li.nav-label a{ background: transparent; box-shadow: none; padding: 6px 4px; pointer-events:none; }
  
  /* リスト下部の補助情報（電話・SNSなどを固定表示したい場合） */
  .header-mobile .nav-meta{
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid #eee;
    display:grid; gap:8px;
  }
  .header-mobile .nav-meta a{
    display:flex; align-items:center; gap:10px;
    padding: 12px; border-radius: 12px;
    background:#fff; border:1px solid #eee;
  }
  
  /* フォーカスリング（アクセシビリティ） */
  .header-nav__mobile:focus-visible,
  .header-mobile a:focus-visible{
    outline: 3px solid #1e90ff; outline-offset: 3px;
  }
  
  /* “動きを減らす”ユーザー配慮 */
  @media (prefers-reduced-motion: reduce){
    .header-nav__mobile,
    .header-mobile, .header-mobile::before, .header-mobile ul,
    .header-mobile ul li a{
      transition: none !important;
    }
  }
  
  /* 画面が横長でも確実に出るよう安全高さを確保 */
  @media screen and (max-height: 540px){
    .header-mobile ul{ padding-top: 68px; }
  }
  

  .header-mobile ul li a img {
    width: 17px;
    margin-right: 10px;
  }

  .header-mobile {
    display: none;
    background: white;
    height: calc(100vh - 60px);
    margin-top: -6px;
    padding: 100px 20px;
    text-align: center;
  }

  .header-nav__mobile span {
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 6px;
    background: #5d3c3c;
  }

  .header-nav__desktop {
    display: none;
  }

  .header-nav__mobile span:nth-child(1) {
    top: 10px;
  }

  .header-nav__mobile span:nth-child(2) {
    top: 20px;
  }

  .header-nav__mobile span:nth-child(3) {
    top: 30px;
  }

  .header-nav__mobile.active {
    transform: rotate(360deg);
  }

  .header-nav__mobile.active span:nth-child(1) {
    top: 16px;
    left: 6px;
    background: #646464;
    transform: rotate(-45deg);
  }

  .header-nav__mobile.active span:nth-child(2) {
    top: 16px;
    background: #646464;
    transform: rotate(45deg);
  }

  .header-nav__mobile.active span:nth-child(3) {
    opacity: 0;
  }
}

/* ヘッダーナビゲーション用のメディクリ設定　ここまで　*/

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
  }

  to {
    filter: blur(0);
    transform: scale(1);
  }
}

@media print,
screen and (min-width:769px) {
  .display {
    display: none;
  }
  .sp{
    display:none;
  }
  .header-company h1 img {
    margin-bottom: 15px !important;
  }
  .top-button-sp { display: none !important; }
  .js-inview {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s;
  }

  .inview {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s;
  }

  .js-inview2 {
    opacity: 0;
  }

  .js-inview2.tlt {
    opacity: 1;
  }
  /* 新ドロワーを優先、旧 display:none などを打ち消し */
.header-mobile{
  display:block; /* 新仕様に合わせる */
}
.header-mobile:not(.active){
  pointer-events:none; opacity:0;
}
.header-mobile.active{
  pointer-events:auto; opacity:1;
}
/* 旧指定での text-align:center / padding などは
   .header-mobile ul のスライドパネルに委譲するため影響最低限に */
  .header{
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    background:white;
    justify-content: space-between;
    z-index: 9;
    height: 100px;
    padding: 0 30px;
  }
  .header-company{
    padding: 20px;
  }
  .header-company h1 img{
    width: 220px;
    margin-top: 18px;
  }
  .header-nav__desktop{
    display: flex;
    font-size: 15px;
    align-items: center;
    font-family: 'myfont-medium';
  }
  .header-nav__desktop li{
    padding: 0 10px;
  }
  .header-nav__desktop li a:hover{
    color: #e94a42;
  }
  .footer-menu li a:hover{
    color: #fffc00;
  }
  .header-nav__desktop li img{
    width: 25px;
  }
  .header-nav__desktop li:nth-last-child(1){
    font-size: 41px;
    line-height: 38px;
    margin-left: 30px;
  }
  .header-nav__desktop li span{
    display: block;
    font-size: 13px;
    margin-top: -1px;
  }
  .header-nav__desktop li b{
    border-radius: 3px;
    background: #E84B42;
    color: white;
    padding: 1px 6px 2px;
    margin-right: 5px;
  }
  .main{
    margin-top: 100px;
  }
  .hero ul li{
    height:90vh;
  }
  .hero{
    position: relative;
  }
  .hero img{
    width: 100%;
    position: absolute;
    top: 6vh;
    padding: 50px;
  }
  .hero-bottom{
    position: absolute !important;
    bottom: 0;
    width: 100% !important;
    height: auto;
    left: 0;
    padding: 0 !important;
    top: unset !important;
  }
  .welcome{
    text-align: center;
    padding: 100px 50px;
    background: #ededed;
  }
  .welcome-inner{
    max-width: 1300px;
    margin: 0 auto;
  }
  .welcome h2{
    font-size: 38px;
    line-height: 55px;
    margin-bottom: 50px;
    font-family: 'myfont-exbold';
  }
  .welcome h3{
    font-size: 28px;
    line-height: 40px;
    margin-bottom: 30px;
    position:relative;
    display: inline-block;
    font-family: 'myfont-medium';
  }
  .welcome h3:before{
    content: "";
    position: absolute;
    left: -34px;
    top: 5px;
    background: url(../../assets/images/icon-left-line.png);
    background-repeat: no-repeat;
    width: 21px;
    height: 37px;
    background-size: 20px;
  }
  .welcome h3:after{
    content: "";
    position: absolute;
    right: -35px;
    top: 5px;
    background: url(../../assets/images/icon-right-line.png);
    background-repeat: no-repeat;
    width: 21px;
    height: 37px;
    background-size: 20px;
  }
  .welcome-contents{
    background: white;
    border-width: 2px;
    border-color: #E7473E;
    border-radius: 20px;
    padding: 70px 50px 20px;
  }
  .welcome-contents-inner{
    border-width: 1px 0;
    border-color: #BAB9A9;
    font-family: 'myfont-semi';
  }
  .welcome-contents h4{
    font-size: 28px;
    line-height: 40px;
    margin-bottom: 20px;
    margin-top: -40px;
    background: url(../../assets/images/icon-welcome-ribon.png);
    background-size: 400px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 18px 0;
    font-family: 'myfont-bold';
  }
  .welcome-contents.second{
    margin-top: 80px;
  }
  .welcome-contents.second h6{
    font-size: 28px;
    line-height: 40px;
    color: #E84B42;
    margin-bottom: 15px;
    font-family: 'myfont-medium';
  }
  .welcome-contents.second .welcome-contents-inner{
    padding-top: 50px;
    border-width: 1px 0 0;
  }
  .welcome-contents.second .welcome-contents-inner ul{
    width:430px;
  }
  .welcome-contents.second .welcome-contents-inner p{
    width: 430px;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 5px;
  }
  .welcome-contents img{
    width: 170px;
    margin-bottom: 20px;
  }
  .welcome-contents ul{
    text-align: left;
    width: 130px;
    margin: 0 auto;
    line-height: 34px;
    margin-bottom: 20px;
    font-family: 'myfont-semi';
  }
  .welcome-contents h5{
    font-size: 18px;
    line-height: 26px;
    margin-top: 30px;
    font-family: 'myfont-semi';
  }
  .welcome-contact{
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
    font-size:36px;
    line-height:52px;
    font-family: 'myfont-exbold';
  }
  .welcome-contact img{
    width:50px;
    margin-right: 10px;
  }
  .welcome-contact .left a{
    border-radius: 60px;
    background: #F4743E;
    color: white;
    display: flex;
    align-items: center;
    padding: 10px 50px;
  }
  .welcome-contact .right a{
    border-radius: 60px;
    background: #E84B42;
    color: white;
    display: flex;
    align-items: center;
    padding: 10px 50px;
  }
  .merit{
    text-align: center;
    padding: 100px 50px;
  }
  .merit-inner{
    max-width: 1200px;
    margin: 0 auto;
  }
  .merit h2{
    font-size: 38px;
    line-height: 55px;
    margin-bottom: 17px;
    position: relative;
    display: inline-block;
    font-family: 'myfont-exbold';
  }
  .merit h2:before{
    content: "";
    position: absolute;
    background: url(../../assets/images/icon-info-title-left.png);
    background-repeat: no-repeat;
    background-size: 94px;
    width: 94px;
    height: 91px;
    left: -200px;
    margin: 0 auto;
    top: 0px;
  }
  .merit h2:after{
    content: "";
    position: absolute;
    background: url(../../assets/images/icon-human.png);
    background-repeat: no-repeat;
    background-size: 95px;
    width: 95px;
    height: 109px;
    right: -200px;
    margin: 0 auto;
    bottom: -17px;
  }
  .merit h2 span{
    color: #F4743E;
  }
  .merit h2 b{
    position:relative;
    display:inline-block;
  }
  .merit h2 b:after{
    content: "⚫︎";
    position: absolute;
    font-size: 20px;
    color: #FFD010;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -36px;
  }
  .merit h3{
    font-size: 24px;
    line-height: 35px;
    margin-bottom: 30px;
    border-top-width: 2px;
    padding-top: 50px;
    color: #1A1311;
    font-family: 'myfont-semi';
  }
  .merit p{
    font-size: 16px;
    line-height: 32px;
  }
  .about{
    text-align: center;
  }
  .about h2{
    font-size: 22px;
    line-height: 32px;
    position: relative;
    display:inline-block;
    padding: 0 5px;
    margin-bottom: 50px;
    font-family: 'myfont-semi';
  }
  .about h2:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 20px;
    background: #FEF740;
    left: 0;
    bottom: -4px;
    z-index: -1;
  }
  .about h3{
    font-size: 30px;
    line-height: 32px;
    font-family: 'myfont-semi';
  }
  .about h3 span{
    font-size: 50px;
    margin: 0 10px;
  }
  .point-icon{
    width:110px;
    margin-right: 32px;
  }
  .point-img{
    width:245px;
  }
  .about-contents{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 130px;
  }
  .about-inner{
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 100px;
  }
  .about-box{
    flex-basis: calc((100% / 3) - 40px);
    text-align: left;
    background: #FFF9CB;
    border-radius: 30px;
    margin: 0 20px;
    margin-bottom: 60px;
    padding: 10px;
    height:495px;
    max-width: 410px;
    border-width: 1px;
    border-color: #BAB9A9;
  }
  .about-box:nth-child(2){
    margin-top: 100px;
  }
  .about-box h4{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -50px;
    margin-right: -16px;
  }
  .about-box h5{
    background: #E84B42;
    color: white;
    border-radius: 0 20px 20px 0;
    margin-left: -10px;
    padding: 10px;
    max-width: 390px;
    margin-top: -40px;
    position: relative;
    min-height: 100px;
    font-size: 20px;
    line-height: 38px;
    font-family: 'myfont';
  }
  .about-box p{
    font-size: 16px;
    line-height: 28px;
    margin-top: 20px;
    max-width: 340px;
  }
  .detail-inner{
    display: flex;
  }
  .detail-inner .left{
    width: 50%;
    background: #5AC8FA;
    text-align: center;
  }
  .detail-inner .left img{
    width: 100%;
    padding: 20px;
  }
  .detail-inner .right{
    width: 50%;
    background: #FF9500;
    text-align: center;
  }
  .detail-inner .right img{
    width: 100%;
    padding: 20px;
  }
  .detail h6{
    color: white;
    text-align: center;
    font-size: 25px;
    line-height: 49px;
    font-family: 'myfont-exbold';
  }
  .detail .left a img{
    width: 10px;
    padding: 0;
    display: inline-block;
    vertical-align: inherit;
    margin-left: 20px;
  }
  .detail .left a{
    font-size: 21px;
    line-height: 36px;
    margin-top: 20px;
    display: inline-block;
    border-radius: 45px;
    padding: 11px 30px;
    background: white;
    border-width: 5px;
    border-color: #5A66FA;
    margin-bottom: 30px;
    font-family: 'myfont-semi';
  }
  .detail .right a img{
    width: 10px;
    padding: 0;
    display: inline-block;
    vertical-align: inherit;
    margin-left: 20px;
  }
  .detail .right a{
    font-size: 21px;
    line-height: 36px;
    margin-top: 20px;
    display: inline-block;
    border-radius: 45px;
    padding: 11px 30px;
    background: white;
    border-width: 5px;
    border-color: #E84B42;
    margin-bottom: 30px;
    font-family: 'myfont-semi';
  }
  .company{
    background: #ededed;
    text-align: center;
    padding: 250px 50px 100px;
  }
  .company-inner{
    max-width: 1350px;
    margin: 0 auto;
  }
  .company-inner h2{
    font-size: 50px;
    line-height: 70px;
    margin-bottom: 150px;
    position: relative;
    font-family: 'myfont-semi';
  }
  .company-inner h2:before{
    content: "";
    position: absolute;
    background: url(../../assets/images/icon-human-shadow.png);
    background-repeat: no-repeat;
    background-size: 435px;
    width: 435px;
    height: 353px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -137px;
  }
  .company-box{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 80px;
  }
  .company-box img{
    width:100%;
  }
  .company-box:nth-child(1) .left, .company-box:nth-child(3) .left{
    flex-basis: 40%;
    padding: 0 20px;
  }
  .company-box:nth-child(1) .right, .company-box:nth-child(3) .right{
    flex-basis: 60%;
    padding: 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 3px 6px #e3e3e3;
    text-align: left;
    line-height: 36px;
    max-width: 710px;
  }
  .company-box:nth-child(2) .right{
    flex-basis: 40%;
    padding: 0 20px;
  }
  .company-box:nth-child(2) .left{
    flex-basis: 60%;
    padding: 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 3px 6px #e3e3e3;
    text-align: left;
    line-height: 36px;
    max-width: 710px;
  }
  .company-box h3{
    font-size: 24px;
    font-family: 'myfont-semi';
    line-height: 27px;
  }
  .company-box h3 b{
    background: #E84B42;
    color: white;
    padding: 0 30px;
    font-size: 18px;
    margin-right: 10px;
    font-family: 'myfont-semi';
  }
  .company-box th{
    color:#E84B42;
    font-size:18px;
    padding: 5px 25px 0 0;
    font-family: 'myfont-bold';
  }
  .company-box td{
    font-family: 'myfont-medium';
    padding-top:5px;
  }
  .company-box h4{
    color:#E84B42;
    font-size:18px;
    padding: 0 25px 0 0;
    font-family: 'myfont-bold';
  }
  .company-box p{
    font-family: 'myfont-medium';
  }
  .company-box ul{
    list-style: disc;
    padding-left: 19px;
    font-family: 'myfont-medium';
  }
  .company-box ol{
    list-style: decimal;
    padding-left: 19px;
    font-family: 'myfont-medium';
  }
  .welcome.welcome2{
    background: #FFF9CB;
  }
  .pro{
    text-align: center;
    padding:100px 50px;
    background: url(../../assets/images/background-pro.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .pro img{
    max-width:1320px;
  }
  .shop{
    background: #F5F5F5;
    text-align: center;
    padding: 200px 50px 100px;
  }
  .shop-inner{
    max-width: 1320px;
    margin: 0 auto;
  }
  .shop h2{
    font-size: 50px;
    line-height: 70px;
    margin-bottom: 70px;
    font-family: 'myfont-semi';
  }
  .shop h2 span{
    display: block;
    font-size: 28px;
    line-height: 38px;
    color: #FF9500;
    margin-top: 10px;
  }
  .shop-contents{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
  }
  .shop-contents .left{
    flex-basis: 55%;
  }
  .shop-contents .left img{
    width: 100%;
    padding: 0 30px 0 0;
  }
  .shop-contents .right{
    flex-basis: 45%;
    text-align: left;
    line-height: 38px;
    font-size: 17px;
  }
  .shop-contents .right th{
    border-width: 1px 0;
    border-color: #707070;
    padding: 15px 20px 15px 0;
    font-family: 'myfont-medium';
  }
  .shop-contents .right td{
    border-width: 1px 0;
    border-color: #707070;
    padding: 15px 0px 15px 0;
    font-family: 'myfont';
  }
  .shop-contents .right table{
    width:100%;
  }
  iframe{
    width:100%;
    height:600px;
  }
  .cararea{
    padding: 80px 50px;
  }
  .cararea h3{
    font-size: 28px;
    line-height: 36px;
    color: #003366;
    margin-bottom: 70px;
    position: relative;
    display:inline-block;
    font-family: 'myfont-semi';
  }
  .cararea h3:before{
    content: "";
    position: absolute;
    background: url(../../assets/images/icon-cararea.png);
    background-repeat: no-repeat;
    background-size: 550px;
    width: 550px;
    height: 70px;
    top: -15px;
    left: -186px;
  }
  .cararea p{
    font-size: 18px;
    line-height: 35px;
    margin-bottom: 30px;
    font-family: 'myfont-medium';
  }
  .cararea-contents{
    display: flex;
  }
  .cararea-contents .left{
    width: 50%;
    padding: 10px;
  }
  .cararea-contents .left img{
    width: 100%;
  }
  .cararea-contents .right{
    width: 50%;
    padding: 10px;
  }
  .cararea-contents .right img{
    width: 100%;
  }
  .plan{
    background: #FFF9CB;
    text-align: center;
    padding: 100px 50px;
  }
  .plan-inner{
    max-width: 1320px;
    margin: 0 auto;
    background: white;
    padding: 30px 50px 80px;
    border-width: 2px;
    border-radius: 20px;
    border-color: #E7473E;
  }
  .plan h2{
    font-size: 38px;
    line-height: 70px;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
    font-family: 'myfont-semi';
  }
  .plan h2:before{
    content: "";
    position: absolute;
    background: url(../../assets/images/icon-price.png);
    background-repeat: no-repeat;
    background-size: 61px;
    width: 61px;
    height: 57px;
    left: -79px;
    top: 9px;
  }
  .plan p{
    font-size: 18px;
    line-height: 35px;
    margin-bottom: 60px;
    border-top-width: 1px;
    padding-top: 40px;
    border-color: #BAB9A9;
  }
  .plan-contents{
    display: flex;
    justify-content: space-around;
  }
  .plan-contents img{
    width:10px;
    margin-left:10px;
  }
  .plan-contents .left a{
    border-width: 5px;
    border-radius: 45px;
    border-color: #5A66FA;
    padding: 15px 60px;
    font-size: 21px;
    display: flex;
    align-items: center;
  }
  .detail .left a:hover{
    color:#5A66FA;
  }
  .plan-contents .left a:hover{
    color:#5A66FA;
  }
  .plan-contents .right a{
    border-width: 5px;
    border-radius: 45px;
    border-color: #E84B42;
    padding: 15px 60px;
    font-size: 21px;
    display: flex;
    align-items: center;
  }
  .detail .right a:hover{
    color:#E84B42;
  }
  .plan-contents .right a:hover{
    color:#e94a42;
  }
  .hero-sp{
    display: none;
  }
  .youtube{
    background: #fff9cb url(../../assets/images/background-youtube.png);
    background-size: cover;
    padding-bottom: 50px;
  }
  .jr .youtube{
    background: white url(../../assets/images/background-youtube.png);
    background-size: cover;
    padding-bottom: 50px;
  }
  .fitness .youtube{
    background: white url(../../assets/images/background-youtube.png);
    background-size: cover;
    padding-bottom: 50px;
  }
  .youtube-inner{
    max-width: 1120px;
    margin: 0 auto;
  }
  .youtube-contents{
    text-align: center;
    margin-bottom: 100px;
  }
  .youtube h2{
    text-align: center;
    margin-bottom: 30px;
  }
  .youtube iframe{
    height:450px;
    max-width: 790px;
  }
  .youtube video{
    height:450px;
    max-width: 790px;
  }
  .youtube h2 img{
    width: 830px;
  }
  .youtube h3{
    font-size: 18px;
    line-height: 39px;
    text-align: center;
    color: white;
    background: #003366;
    margin: 30px 0;
    padding: 10px 0;
    font-family: 'myfont-semi';
  }
  .news{
    background: #fff9cb url(../../assets/images/background-news.png);
    background-size: cover;
    text-align: center;
    padding: 50px 50px 80px;
  }
  .news-inner{
    max-width: 1120px;
    margin: 0 auto;
  }
  .news .news-title{
    max-width: 412px;
  }
  .news-contents{
    background: #FFD010;
    padding: 20px 30px 10px;
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
    border-radius: 20px;
  }
  .news-info{
    width: 225px;
    margin-top: -40px;
  }
  .news-contents a{
    background: white;
    height: 195px;
    display: flex;
    flex-direction: column;
    width: 380px;
    justify-content: center;
    align-items: center;
  }
  .news-line{
    width:325px;
  }
  .news-insta{
    width:326px;
  }
  footer{
    color: white;
    background: #E84B42;
    font-size: 15px;
  }
  footer ul li{
    width:320px;
    height:250px;
  }
  .footer-inner{
    max-width: 1800px;
    margin: 0 auto;
    margin-top: -3px;
    padding: 50px;
  }
  .footer-contents{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer-contents ul{
    font-family: 'myfont-medium';
    line-height: 24px;
  }
  .footer-contents img{
    width: 236px;
    margin-right: 35px;
  }
  .footer-address li{
    height: auto;
    width: auto;
  }
  .footer-menu{
    display: flex;
    justify-content: space-between;
    margin-left: 70px;
    align-items: center;
  }
  .footer-menu li{
    height: auto;
    width: auto;
    padding: 0 14px;
  }
  .footer-menu li img{
    width:30px;
    margin-right:0;
  }
  footer small{
    display: block;
    text-align: center;
    background: #D10B00;
    font-size: 14px;
    padding: 7px;
    font-family: 'myfont-semi';
  }

}

/* ===== Welcome: confetti only ===== */
.welcome-contents { position: relative; } /* 紙吹雪の基準位置 */
.confetti-layer { position:absolute; inset:0; pointer-events:none; z-index:1; }

@media (prefers-reduced-motion: no-preference) {
  .confetti-layer i{
    position:absolute; top:-10px; opacity:.9; pointer-events:none;
    width:var(--s,8px); height:var(--s,8px); background:var(--c,#FFD010);
    border-radius:var(--r,2px);
    transform: translate(var(--x0,0px), 0) rotate(var(--rot0,0deg));
    animation: confetti-fall var(--dur,1400ms) cubic-bezier(.22,.9,.23,1) forwards,
               confetti-wiggle calc(var(--dur,1400ms) * 0.9) ease-in-out 1;
  }
  @keyframes confetti-fall {
    to {
      transform: translate(var(--x1,0px), var(--y,200px)) rotate(var(--rot1,180deg));
      opacity:.05;
    }
  }
  @keyframes confetti-wiggle {
    50% { transform: translate(calc(var(--x0,0px) + var(--wig,12px)), calc(var(--y,200px) * .5)) rotate(calc(var(--rot0,0deg) + 90deg)); }
  }
}
/* ===== Welcome: more motions ===== */
.welcome { overflow: hidden; }
.welcome-contents { position: relative; }

/* 枠線を描く */
@media (prefers-reduced-motion: no-preference) {

  .welcome.is-inview .welcome-contents::before{ opacity:1; transform:none; }

  /* カード全体の持ち上がり */
  .welcome .welcome-contents{
    opacity:0; transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.22,.9,.23,1), transform .6s cubic-bezier(.22,.9,.23,1);
  }
  .welcome.is-inview .welcome-contents{ opacity:1; transform:none; }

  /* h3（「お気軽にお越しください」）の軽い出現 */
  .welcome h3{ opacity:0; transform: translateY(8px); transition: opacity .6s .05s, transform .6s .05s; }
  .welcome.is-inview h3{ opacity:1; transform:none; }

  /* リボン見出し（h4）を“着地”させる */
  .welcome-contents h4{
    opacity:0; transform: translateY(-12px) scale(.98);
    filter: blur(2px);
    transition: opacity .7s .1s, transform .7s .1s, filter .7s .1s;
  }
  .welcome.is-inview .welcome-contents h4{ opacity:1; transform:none; filter: none; }

  /* ストップウォッチ画像のふわっと */
  .welcome-contents img[alt*="所要時間"]{
    opacity:0; transform: translateY(8px) scale(.96);
    transition: opacity .6s .18s, transform .6s .18s;
  }
  .welcome.is-inview .welcome-contents img[alt*="所要時間"]{ opacity:1; transform:none; }

  /* 説明テキスト（p/h5） */
  .welcome-contents p,
  .welcome-contents h5{
    opacity:0; transform: translateY(8px);
    transition: opacity .6s .22s, transform .6s .22s;
    font-family: 'myfont-semi';
  }
  .welcome.is-inview .welcome-contents p,
  .welcome.is-inview .welcome-contents h5{ opacity:1; transform:none; }

  /* リスト段階表示 */
  .welcome-contents-inner ul li{
    opacity:0; transform: translateY(10px);
  }
  .welcome.is-inview .welcome-contents-inner ul li{
    animation: w-fadeup .45s forwards;
  }
  .welcome.is-inview .welcome-contents-inner ul li:nth-child(1){ animation-delay:.26s }
  .welcome.is-inview .welcome-contents-inner ul li:nth-child(2){ animation-delay:.36s }
  .welcome.is-inview .welcome-contents-inner ul li:nth-child(3){ animation-delay:.46s }

  @keyframes w-fadeup { from {opacity:0; transform: translateY(10px)} to {opacity:1; transform:none} }

  /* CTAボタンの波紋（クリック時） */
  .welcome-contact a{ position:relative; overflow:hidden; }
  .welcome-contact a .ripple{
    position:absolute; border-radius:50%; pointer-events:none;
    width:12px; height:12px; background: rgba(255,255,255,.55);
    left:0; top:0; transform: translate(-50%,-50%) scale(1); opacity:0;
    animation: welcome-ripple .6s ease-out forwards;
  }
  @keyframes welcome-ripple{
    from{ opacity:.75; transform: translate(-50%,-50%) scale(1); }
    to  { opacity:0; transform: translate(-50%,-50%) scale(28); }
  }
}

/* 動きを減らす：静的表示 */
@media (prefers-reduced-motion: reduce) {
  .welcome .welcome-contents,
  .welcome h3, .welcome-contents h4,
  .welcome-contents img[alt*="所要時間"],
  .welcome-contents p, .welcome-contents h5,
  .welcome-contents-inner ul li{
    opacity:1 !important; transform:none !important; transition:none !important; animation:none !important;
  }
  .welcome .welcome-contents::before{ display:none !important; }
}


/* ===== Merit section motion ===== */
.merit { overflow: hidden; } /* はみ出し対策 */
.merit-inner { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* 初期状態 */
  .merit h2 { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
  .merit h2::before { /* 左の矢印（既存の:before画像）をスライドイン */
    transform: translateX(-30px);
    opacity: 0;
    transition: transform .7s cubic-bezier(.22,.9,.23,1) .05s, opacity .7s .05s;
  }
  .merit h2::after { /* 右の人アイコン（既存）も軽くふわっと */
    transform: translateY(-6px) scale(.96);
    opacity: 0;
    transition: transform .7s cubic-bezier(.22,.9,.23,1) .1s, opacity .7s .1s;
  }

  /* h2 内の強調文字とドット（既存で b:after="⚫︎"） */
  .merit h2 b { position: relative; display: inline-block; transform: translateY(6px) scale(.94); opacity: 0; }
  .merit h2 b:after { opacity: 0; transform: translateY(-6px) scale(.6); transition: transform .45s, opacity .45s; }

  /* サブ見出し h3… 下線が描かれるように */
  .merit h3 { position: relative; opacity: 0; transform: translateY(8px); transition: opacity .6s .2s, transform .6s .2s; }
  .merit h3::before {
    content:""; position:absolute; left:0; right:0; bottom:-14px; margin:0 auto;
    width:0; height:2px; background:#000; transition: width .7s .45s cubic-bezier(.22,.9,.23,1);
  }

  /* 本文（JSでspan.segに分割） */
  .merit p .seg { display:block; opacity:0; transform: translateY(10px); }

  /* 表示時 */
  .merit.is-inview h2 { opacity: 1; transform: none; }
  .merit.is-inview h2::before,
  .merit.is-inview h2::after { transform:none; opacity:1; }

  /* b を順番にポップ */
  .merit.is-inview h2 b { opacity:1; transform:none; transition: transform .45s, opacity .45s; }
  .merit.is-inview h2 b:nth-of-type(1){ transition-delay:.08s }
  .merit.is-inview h2 b:nth-of-type(2){ transition-delay:.16s }
  .merit.is-inview h2 b:nth-of-type(3){ transition-delay:.24s }
  .merit.is-inview h2 b:nth-of-type(4){ transition-delay:.32s }

  /* b の頭上の●もポップ */
  .merit.is-inview h2 b:after { opacity:1; transform:none; }
  .merit.is-inview h2 b:nth-of-type(1):after{ transition-delay:.18s }
  .merit.is-inview h2 b:nth-of-type(2):after{ transition-delay:.26s }
  .merit.is-inview h2 b:nth-of-type(3):after{ transition-delay:.34s }
  .merit.is-inview h2 b:nth-of-type(4):after{ transition-delay:.42s }

  .merit.is-inview h3 { opacity:1; transform:none; }
  .merit.is-inview h3::before { width: 0; }

  /* 本文の段落を順番に */
  .merit.is-inview p .seg { 
    animation: meritFadeUp .55s forwards;
  }
  .merit.is-inview p .seg:nth-child(1){ animation-delay:.10s }
  .merit.is-inview p .seg:nth-child(2){ animation-delay:.22s }
  .merit.is-inview p .seg:nth-child(3){ animation-delay:.34s }
  .merit.is-inview p .seg:nth-child(4){ animation-delay:.46s }
  .merit.is-inview p .seg:nth-child(5){ animation-delay:.58s }
  .merit.is-inview p .seg:nth-child(6){ animation-delay:.70s }

  @keyframes meritFadeUp {
    from { opacity:0; transform: translateY(10px); }
    to   { opacity:1; transform: none; }
  }
}



/* ===== About section motion ===== */
.about { overflow: hidden; }
.about-inner { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* カード初期状態 */
  .about-contents { will-change: transform, opacity; }
  .about-box {
    transform: translateY(20px) scale(.98);
    opacity: 0;
    transition:
      transform .6s cubic-bezier(.22,.9,.23,1),
      opacity  .6s;
  }
  /* 表示時（JSで .is-inview を .about に付与、各カードは .is-show を順次付与） */
  .about.is-inview .about-box.is-show {
    transform: none;
    opacity: 1;
  }

  /* 画像の“丸マスクでふわっと出現” */
  .about-box .point-img {
    display:block;
    border-radius: 20px; /* 既存デザインを壊さない程度に */
    transform: scale(1.02);
    filter: saturate(.96);
    /* 最初は小さめの円でクリップしておく */
    clip-path: circle(0% at 50% 50%);
    transition: clip-path .7s cubic-bezier(.22,.9,.23,1) .05s,
                transform .7s,
                filter .7s;
  }
  .about-box.is-show .point-img {
    clip-path: circle(75% at 50% 50%);
    transform: none;
    filter: saturate(1);
  }

  /* ポイントバッジ（左の丸アイコン）をコトンと着地 */
  .about-box .point-icon {
    transform-origin: 50% 0%;
    transform: translateY(-6px) rotate(-6deg) scale(.96);
    opacity: .0;
    transition: transform .5s ease, opacity .5s ease;
  }
  .about-box.is-show .point-icon {
    transform: none;
    opacity: 1;
  }

  /* 見出しに下線が描かれる */
  .about-box h5 {
    position: relative;
  }
  .about-box h5::after {
    content:""; position:absolute; left:0; bottom:-6px; height:3px; width:0;
    background:#E84B42; border-radius:2px;
    transition: width .6s cubic-bezier(.22,.9,.23,1) .2s;
  }
  .about-box.is-show h5::after { width: 68%; }

  /* ホバーの微スケール＆影（PCだけ効けばOK） */
  @media (hover:hover) {
    .about-box.is-show:hover {
      transform: translateY(-4px) scale(1.01);
      box-shadow: 0 6px 20px rgba(0,0,0,.08);
    }
  }

  /* スタッガーのタイミング（nthで遅延） */
  .about.is-inview .about-box:nth-child(1).is-show { transition-delay: .00s, .00s; }
  .about.is-inview .about-box:nth-child(2).is-show { transition-delay: .06s, .06s; }
  .about.is-inview .about-box:nth-child(3).is-show { transition-delay: .12s, .12s; }
  .about.is-inview .about-box:nth-child(4).is-show { transition-delay: .18s, .18s; }
  .about.is-inview .about-box:nth-child(5).is-show { transition-delay: .24s, .24s; }
}

/* “動きを減らす”の時はそのまま静的表示 */
@media (prefers-reduced-motion: reduce) {
  .about-box,
  .about-box .point-img,
  .about-box .point-icon { transition: none !important; opacity: 1; transform: none; clip-path: none; }
  .about-box h5::after { width:68%; }
}

/* ===== Detail section motion ===== */
.detail { overflow: hidden; }
.detail-inner { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* パネル初期状態 */
  .detail .left,
  .detail .right {
    will-change: transform, opacity;
    transform: translateY(18px);
    opacity: 0;
    transition: transform .6s cubic-bezier(.22,.9,.23,1), opacity .6s;
  }

  /* 画像：斜めワイプで出現（clip-path） */
  .detail .left img,
  .detail .right img {
    display:block;
    will-change: clip-path, transform, filter;
    transform: scale(1.02);
    filter: saturate(.95);
    /* 左右でワイプ方向を変える */
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: clip-path .9s cubic-bezier(.22,.9,.23,1) .05s,
                transform .9s, filter .9s;
  }
  .detail.is-inview .left { transform: none; opacity: 1; transition-delay: .0s, .0s; }
  .detail.is-inview .right{ transform: none; opacity: 1; transition-delay: .12s, .12s; }

  /* ワイプ完了形 */
  .detail.is-inview .left img {
    /* 左→右の斜めワイプ */
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    transform: none; filter: saturate(1);
  }
  .detail.is-inview .right img {
    /* 右→左の斜めワイプ */
    clip-path: polygon(0 0%, 100% 0, 100% 100%, 0% 100%);
    transform: none; filter: saturate(1);
  }

  /* 見出しを遅れてフェードアップ */
  .detail h6 {
    opacity: 0; transform: translateY(10px);
    transition: opacity .6s .25s, transform .6s .25s;
  }
  .detail.is-inview .left h6  { opacity:1; transform:none; transition-delay:.20s,.20s; }
  .detail.is-inview .right h6 { opacity:1; transform:none; transition-delay:.32s,.32s; }

  /* CTA：下線風の強調＋矢印スライド */
  .detail a { position: relative; overflow: hidden; }
  .detail a::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; margin:auto;
    width:0; height:4px; background: currentColor; opacity:.2;
    transition: width .45s ease;
  }
  .detail.is-inview .left a::after  { width: 28%; transition-delay:.28s; }
  .detail.is-inview .right a::after { width: 28%; transition-delay:.40s; }

  .detail a img[alt=""] { transition: transform .35s ease; }
  .detail a:hover img[alt=""] { transform: translateX(6px); }

  /* 画像の緩やかなホバーパン */
  @media (hover:hover) {
    .detail .left img:hover,
    .detail .right img:hover { transform: scale(1.03); }
  }
}

/* reduce-motion: アニメ無効で静的表示 */
@media (prefers-reduced-motion: reduce) {
  .detail .left,.detail .right,
  .detail h6 { opacity:1 !important; transform:none !important; transition:none !important; }
  .detail img { clip-path: none !important; transform:none !important; }
  .detail a::after { width:28%; }
}

/* ===== Coach (company) section motion ===== */
.company { overflow: hidden; }
.company-inner { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* 見出し */
  .company-inner h2 {
    opacity: 0; transform: translateY(8px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .company.is-inview .company-inner h2 { opacity: 1; transform: none; }
  /* 背景シルエット（:before 既存）を軽く出す */
  .company-inner h2::before { opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .7s .05s, transform .7s .05s; }
  .company.is-inview .company-inner h2::before { opacity: 1; transform: none; }

  /* カード全体（左右ペア） */
  .company-box {
    will-change: transform, opacity;
    opacity: 0; transform: translateY(18px);
    transition: transform .6s cubic-bezier(.22,.9,.23,1), opacity .6s;
  }
  .company.is-inview .company-box.is-show { opacity: 1; transform: none; }

  /* 左右カラムの入り方（左右から少しスライド） */
  .company-box .left,
  .company-box .right { will-change: transform, opacity; }
  .company-box .left  { transform: translateX(-12px); opacity: 0; transition: transform .6s, opacity .6s; }
  .company-box .right { transform: translateX(12px);  opacity: 0; transition: transform .6s, opacity .6s; }
  .company-box.is-show .left,
  .company-box.is-show .right { transform: none; opacity: 1; }
  .company-box:nth-of-type(1).is-show .left,
  .company-box:nth-of-type(1).is-show .right { transition-delay: .05s; }
  .company-box:nth-of-type(2).is-show .left,
  .company-box:nth-of-type(2).is-show .right { transition-delay: .10s; }
  .company-box:nth-of-type(3).is-show .left,
  .company-box:nth-of-type(3).is-show .right { transition-delay: .15s; }

  /* 写真は軽くズーム→等倍へ（質感アップ） */
  .company-box img {
    display:block; transform: scale(1.03); filter: saturate(.95);
    transition: transform .9s cubic-bezier(.22,.9,.23,1) .05s, filter .9s .05s;
    border-radius: 8px;
  }
  .company-box.is-show img { transform: none; filter: saturate(1); }

  /* h3 内の肩書きバッジ（既存で b に背景色）を“コトン” */
  .company-box h3 b {
    display:inline-block; transform-origin: 10% 50%;
    transform: rotate(-6deg) scale(.96); opacity: 0;
    transition: transform .45s ease, opacity .45s ease;
  }
  .company-box.is-show h3 b { transform: none; opacity: 1; }

  /* テキスト群の段階表示（ul/ol/p table など） */
  .company-box .right > * { will-change: opacity, transform; }
  .company-box.is-show .right > h3 { transition-delay: .06s; }
  .company-box.is-show .right > table { animation: c-fade .45s .10s forwards; opacity:0; transform: translateY(8px); }
  .company-box.is-show .right > h4    { animation: c-fade .45s .16s forwards; opacity:0; transform: translateY(8px); }
  .company-box.is-show .right > p     { animation: c-fade .45s .22s forwards; opacity:0; transform: translateY(8px); }
  .company-box.is-show .right > ul,
  .company-box.is-show .right > ol    { animation: c-fade .45s .22s forwards; opacity:0; transform: translateY(8px); }

  /* 箇条書きは1行ずつ */
  .company-box .right ul li,
  .company-box .right ol li { opacity: 0; transform: translateY(6px); }
  .company-box.is-show .right ul li,
  .company-box.is-show .right ol li { animation: c-fade .42s forwards; }
  .company-box.is-show .right ul li:nth-child(1),
  .company-box.is-show .right ol li:nth-child(1){ animation-delay:.10s }
  .company-box.is-show .right ul li:nth-child(2),
  .company-box.is-show .right ol li:nth-child(2){ animation-delay:.16s }
  .company-box.is-show .right ul li:nth-child(3),
  .company-box.is-show .right ol li:nth-child(3){ animation-delay:.22s }
  .company-box.is-show .right ul li:nth-child(4),
  .company-box.is-show .right ol li:nth-child(4){ animation-delay:.28s }
  .company-box.is-show .right ul li:nth-child(5),
  .company-box.is-show .right ol li:nth-child(5){ animation-delay:.34s }

  @keyframes c-fade {
    from { opacity:0; transform: translateY(8px); }
    to   { opacity:1; transform: none; }
  }

  /* PCホバー：画像を僅かに持ち上げる */
  @media (hover:hover) {
    .company-box .left img:hover { transform: translateY(-2px) scale(1.02); }
  }
}

/* reduce-motion: 静的表示 */
@media (prefers-reduced-motion: reduce) {
  .company-inner h2,
  .company-inner h2::before,
  .company-box,
  .company-box .left, .company-box .right,
  .company-box img,
  .company-box h3 b,
  .company-box .right > * { opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }
}

/* ===== welcome2 motion ===== */
.welcome.welcome2 { overflow: hidden; }
.welcome.welcome2 .welcome-contents { position: relative; }

/* 枠線を“描く” */
@media (prefers-reduced-motion: no-preference) {
  .welcome.welcome2 .welcome-contents::before {
    content:""; position:absolute; inset:0; border-radius:20px;
    /* 枠線の色は既存に合わせる（お好みで） */
    --stroke: #E7473E;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box, 
      linear-gradient(#000 0 0) padding-box;
    -webkit-mask-composite: destination-out;
            mask-composite: exclude;
    padding: 2px;               /* 枠線の太さ */
    opacity: 0;
    transform: scale(.98);
    transition: opacity .5s, transform .5s;
  }
  .welcome.welcome2 .welcome-contents::after{
    /* 線がぐるっと回って描かれる演出 */
    content:""; position:absolute; inset:0; border-radius:20px;
    border:2px solid transparent; 
    background:
      conic-gradient(from -90deg, var(--stroke) 0 360deg) border-box;
    -webkit-mask:
      radial-gradient(closest-side, transparent 98%, #000 100%) content-box,
      linear-gradient(#000 0 0) padding-box;
    -webkit-mask-composite: source-over, xor;
            mask-composite: exclude;
    padding:2px; opacity:0;
  }
  .welcome.welcome2.is-inview .welcome-contents::before { opacity:1; transform:none; }
  .welcome.welcome2.is-inview .welcome-contents::after  { 
    animation: welcome-stroke 1.1s cubic-bezier(.22,.9,.23,1) both; 
  }
  @keyframes welcome-stroke {
    from { opacity:1; transform: rotate(0turn); }
    to   { opacity:0; transform: rotate(1turn); }
  }

  /* リストを段階表示（上の枠線が描かれた後に） */
  .welcome.welcome2 .welcome-contents-inner li { 
    opacity:0; transform: translateY(8px);
  }
  .welcome.welcome2.is-inview .welcome-contents-inner li {
    animation: w2-fadeup .45s forwards;
  }
  .welcome.welcome2.is-inview .welcome-contents:first-of-type .welcome-contents-inner li:nth-child(1){ animation-delay:.15s }
  .welcome.welcome2.is-inview .welcome-contents:first-of-type .welcome-contents-inner li:nth-child(2){ animation-delay:.27s }
  .welcome.welcome2.is-inview .welcome-contents:first-of-type .welcome-contents-inner li:nth-child(3){ animation-delay:.39s }


  /* 下段のリストも段階表示 */
  .welcome.welcome2.is-inview .welcome-contents.second .second-ul li { animation: w2-fadeup .42s forwards; }
  .welcome.welcome2.is-inview .welcome-contents.second .second-ul li:nth-child(1){ animation-delay:.18s }
  .welcome.welcome2.is-inview .welcome-contents.second .second-ul li:nth-child(2){ animation-delay:.28s }
  .welcome.welcome2.is-inview .welcome-contents.second .second-ul li:nth-child(3){ animation-delay:.38s }
  .welcome.welcome2.is-inview .welcome-contents.second .second-ul li:nth-child(4){ animation-delay:.48s }
  .welcome.welcome2.is-inview .welcome-contents.second .second-ul li:nth-child(5){ animation-delay:.58s }
  .welcome.welcome2.is-inview .welcome-contents.second .second-ul li:nth-child(6){ animation-delay:.68s }

  @keyframes w2-fadeup {
    from { opacity:0; transform: translateY(8px); }
    to   { opacity:1; transform: none; }
  }
}

/* 動きを減らす：静的表示 */
@media (prefers-reduced-motion: reduce) {
  .welcome.welcome2 .welcome-contents::before,
  .welcome.welcome2 .welcome-contents::after { display:none !important; }
  .welcome.welcome2 .welcome-contents-inner li,
  .welcome.welcome2 .welcome-contents.second .second-ul li,
  .welcome.welcome2 .welcome-contents.second h6 { opacity:1 !important; transform:none !important; }
}

/* ===== Shop section motion ===== */
.shop { overflow: hidden; }
.shop-inner { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* 見出し */
  .shop h2 { opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
  .shop h2 span { display:block; opacity:0; transform: translateY(6px); transition: opacity .6s .2s, transform .6s .2s; color:#FF9500; }

  .shop.is-inview h2 { opacity:1; transform:none; }
  .shop.is-inview h2::after { width: 180px; }
  .shop.is-inview h2 span { opacity:1; transform:none; }

  /* 画像：斜めワイプで出現 */
  .shop-contents .left img{
    display:block; transform: scale(1.02);
    filter: saturate(.95);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: clip-path .9s cubic-bezier(.22,.9,.23,1) .05s, transform .9s, filter .9s;
  }
  .shop.is-inview .shop-contents .left img{
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
    transform:none; filter:saturate(1);
  }

  /* テーブル：行ごとにフェードアップ */
  .shop-contents .right tr { opacity:0; transform: translateY(8px); }
  .shop.is-inview .shop-contents .right tr { animation: rowUp .45s forwards; }
  .shop.is-inview .shop-contents .right tr:nth-child(1){ animation-delay:.10s }
  .shop.is-inview .shop-contents .right tr:nth-child(2){ animation-delay:.18s }
  .shop.is-inview .shop-contents .right tr:nth-child(3){ animation-delay:.26s }
  .shop.is-inview .shop-contents .right tr:nth-child(4){ animation-delay:.34s }
  .shop.is-inview .shop-contents .right tr:nth-child(5){ animation-delay:.42s }
  .shop.is-inview .shop-contents .right tr:nth-child(6){ animation-delay:.50s }
  .shop.is-inview .shop-contents .right tr:nth-child(7){ animation-delay:.58s }

  @keyframes rowUp { from {opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }

  /* Google Map：枠が描かれる */
  .shop iframe{ position:relative; border-radius:8px; }
  .shop iframe::before,
  .shop iframe::after{ content:none; } /* 念のため */
  .shop iframe { box-shadow: 0 0 0 0 rgba(0,0,0,.15); transition: box-shadow .9s ease; }
  .shop.is-inview iframe { box-shadow: 0 0 0 4px rgba(0,0,0,.08); }


  /* 駐車場の左右画像：スライドイン */
  .cararea-contents .left  { opacity:0; transform: translateX(-16px); transition: opacity .6s .1s, transform .6s .1s; }
  .cararea-contents .right { opacity:0; transform: translateX( 16px); transition: opacity .6s .18s, transform .6s .18s; }

  /* 表示時（.shop-car-inview はJSで付与） */
  .shop-car-inview .cararea h3 { opacity:1; transform:none; }
  .shop-car-inview .cararea h3::after{ width: 220px; }
  .shop-car-inview .cararea-contents .left,
  .shop-car-inview .cararea-contents .right { opacity:1; transform:none; }
}

/* reduce-motion: 静的表示 */
@media (prefers-reduced-motion: reduce) {
  .shop h2, .shop h2 span, .cararea h3,
  .cararea-contents .left, .cararea-contents .right { opacity:1 !important; transform:none !important; transition:none !important; }
  .shop h2::after, .cararea h3::after { width:180px !important; }
  .shop-contents .right tr { opacity:1 !important; transform:none !important; animation:none !important; }
  .shop-contents .left img { clip-path:none !important; transform:none !important; filter:saturate(1) !important; }
  .shop iframe { box-shadow: 0 0 0 4px rgba(0,0,0,.08) !important; }
}


/* ===== Plan section motion ===== */
.plan { overflow: hidden; }
.plan-inner { position: relative; }

/* reduce-motion で静的 */
@media (prefers-reduced-motion: reduce) {
  .plan-inner,
  .plan h2, .plan p, .plan-contents .left, .plan-contents .right { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* 通常モーション */
@media (prefers-reduced-motion: no-preference) {
  /* カード枠が描かれる */
  .plan-inner::before{
    content:""; position:absolute; inset:0; border-radius:11px;
    --stroke:#E7473E; padding:2px;
    background: conic-gradient(from 0turn, var(--stroke) 0 0) padding-box;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box;
    -webkit-mask-composite: destination-out; mask-composite: exclude;
    opacity:0; transform: scale(.985);
    transition: opacity .6s, transform .6s;
  }
  .plan.is-inview .plan-inner::before{ opacity:1; transform:none; }

  /* 見出し＋アイコン（:before 既存） */
  .plan h2{ opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
  .plan.is-inview h2{ opacity:1; transform:none; }
  .plan h2::before{ opacity:0; transform: translateY(-8px) rotate(-8deg) scale(.9); transition: opacity .5s .15s, transform .5s .15s; }
  .plan.is-inview h2::before{ opacity:1; transform:none; }

  /* 説明文 */
  .plan p{ opacity:0; transform: translateY(10px); transition: opacity .6s .15s, transform .6s .15s; }
  .plan.is-inview p{ opacity:1; transform:none; }

  /* CTAブロック */
  .plan-contents .left,
  .plan-contents .right{
    opacity:0; transform: translateY(12px);
    transition: opacity .6s, transform .6s;
  }
  .plan.is-inview .plan-contents .left { opacity:1; transform:none; transition-delay:.10s; }
  .plan.is-inview .plan-contents .right{ opacity:1; transform:none; transition-delay:.20s; }

  /* ボタン演出：外枠スッ、ホバーで矢印がスライド */
  .plan-contents a{ font-family: 'myfont-semi'; position:relative; display:inline-flex; align-items:center; gap:.5em; overflow:hidden; }
  .plan.is-inview .plan-contents a::after{ transform:none; opacity:.35; }

  .plan-contents a img[alt=""]{ transition: transform .28s ease; }
  .plan-contents a:hover img[alt=""]{ transform: translateX(6px); }

  /* キラッと走る微グロウ（控えめ） */
  .plan-contents a > span, .plan-contents a { position:relative; }
  .plan-contents a::before{
    content:""; position:absolute; top:0; left:-120%;
    width:80%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    opacity:0;
  }
  .plan-contents a:hover::before{
    animation: plan-shine .7s forwards;
  }
  @keyframes plan-shine { to { left:140%; opacity:1; } }
}

/* ===== Youtube section motion ===== */
.youtube { overflow: hidden; }
.youtube-inner { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* 見出し画像 */
  .youtube h2 img{
    opacity:0; transform: translateY(-8px) scale(.98);
    transition: opacity .6s ease, transform .6s ease;
  }
  .youtube.is-inview h2 img{ opacity:1; transform:none; }

  /* 各ブロック本体 */
  .youtube-contents{
    opacity:0; transform: translateY(16px);
    transition: opacity .6s, transform .6s;
  }
  .youtube.is-inview .youtube-contents.show{
    opacity:1; transform:none;
  }

  /* iframe をラップした .yt-frame に演出を掛ける */
  .yt-frame{
    position: relative; overflow: hidden;
    transform: translateZ(0); /* crisp */
  }

  /* 薄い縁取り */
  .yt-frame::after{
    content:""; position:absolute; inset:0; border-radius:10px;
    box-shadow: 0 0 0 0 rgba(0,0,0,.12); transition: box-shadow .9s ease .15s;
    pointer-events:none;
  }
  .youtube.is-inview .youtube-contents.show .yt-frame::after{
    box-shadow: 0 0 0 4px rgba(0,0,0,.06);
  }

  /* 再生パルス（1回だけ） */
  .yt-pulse{
    position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
    opacity:0;
  }
  .youtube.is-inview .youtube-contents.show .yt-pulse{ opacity:1; animation: yt-pulse-hide 1.3s forwards .2s; }
  .yt-pulse::before, .yt-pulse::after{
    content:""; width:70px; height:70px; border-radius:50%;
    position:absolute; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0 40%, transparent 45%);
    transform: scale(.6);
    animation: yt-pulse 1.1s ease-out 1;
  }
  .yt-pulse::after{ animation-delay: .15s; }
  @keyframes yt-pulse{
    from { opacity:.75; transform: scale(.6); }
    to   { opacity:0;   transform: scale(1.6); }
  }
  @keyframes yt-pulse-hide{ to { opacity:0; } }

  /* 紺帯テキスト（h3）が描かれる */
  .youtube-contents h3{
    opacity:0; transform: translateY(8px);
    transition: opacity .6s .25s, transform .6s .25s;
  }
  .youtube.is-inview .youtube-contents.show h3{ opacity:1; transform:none; }
}

/* reduce-motion: 静的表示 */
@media (prefers-reduced-motion: reduce) {
  .youtube h2 img, .youtube-contents, .yt-frame::after, .youtube-contents h3{
    opacity:1 !important; transform:none !important; transition:none !important; animation:none !important;
  }
  .yt-frame .yt-media{ clip-path:none !important; transform:none !important; filter:saturate(1) !important; }
  .yt-pulse{ display:none !important; }
}

/* ===== News section motion ===== */
.news { overflow: hidden; }
.news-inner { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* 見出し画像のふわっと登場 */
  .news .news-title{
    opacity:0; transform: translateY(-8px) scale(.98);
    transition: opacity .6s ease, transform .6s ease;
  }
  .news.is-inview .news-title{ opacity:1; transform:none; }

  /* コンテンツ全体の持ち上がり */
  .news-contents{
    opacity:0; transform: translateY(16px);
    transition: opacity .6s, transform .6s;
  }
  .news.is-inview .news-contents{ opacity:1; transform:none; }

  /* 左のインフォアイコン：コトン＋一回だけゆらり */
  .news-info{
    opacity:0; transform: translateY(8px) rotate(-5deg) scale(.96);
    transition: opacity .5s .05s, transform .5s .05s;
  }
  .news.is-inview .news-info{ opacity:1; transform:none; }
  .news.is-inview .news-info.wiggle-once{
    animation: news-wiggle .9s .15s ease-out 1;
  }
  @keyframes news-wiggle{
    0%{ transform: rotate(-6deg); }
    30%{ transform: rotate(4deg); }
    60%{ transform: rotate(-2deg); }
    100%{ transform: rotate(0deg); }
  }

  /* 2つのバナー：順番にポップ＋ホバーで気持ちよく */
  .news-contents a{
    position: relative;
    opacity:0; transform: translateY(12px) scale(.98);
    transition: opacity .55s, transform .55s, box-shadow .35s;
    border-radius: 12px; overflow: hidden;
  }
  .news-contents a:nth-of-type(1){ transition-delay: .12s; }
  .news-contents a:nth-of-type(2){ transition-delay: .22s; }
  .news.is-inview .news-contents a{ opacity:1; transform:none; }

  /* 画像の軽い質感UP */
  .news-contents a img{ display:block; height:auto; transform: scale(1.0); transition: transform .45s; }
  .news-contents a:hover img{ transform: scale(1.015); }
  .news-contents a:hover{ box-shadow: 0 10px 26px rgba(0,0,0,.12); }

  /* アクセシビリティ：キーボードフォーカス */
  .news-contents a:focus-visible{
    outline: 3px solid #1e90ff; outline-offset: 4px;
  }

  /* クリック波紋（JSで .ripple span を注入） */
  .news-contents a { overflow: hidden; }
  .news-contents a .ripple{
    position:absolute; border-radius:50%; pointer-events:none;
    width:12px; height:12px; background: rgba(255,255,255,.5);
    left:0; top:0; transform: translate(-50%,-50%) scale(1); opacity:0;
    animation: rippleNews .6s ease-out forwards;
  }
  @keyframes rippleNews{
    from{ opacity:.7; transform: translate(-50%,-50%) scale(1); }
    to  { opacity:0; transform: translate(-50%,-50%) scale(26); }
  }
}

/* reduce-motion: 静的表示 */
@media (prefers-reduced-motion: reduce) {
  .news .news-title, .news .news-contents, .news .news-info,
  .news-contents a { opacity:1 !important; transform:none !important; transition:none !important; }
}



/* ジュニアコースのCSS *//* ジュニアコースのCSS *//* ジュニアコースのCSS *//* ジュニアコースのCSS *//* ジュニアコースのCSS *//* ジュニアコースのCSS *//* ジュニアコースのCSS *//* ジュニアコースのCSS */
:root{
  --brand:#25b7ff;          /* 水色のアクセント */
  --text:#1b2a3a;
  --muted:#333333;
  --bg:#f5f8fb;
  --card:#ffffff;
  --radius:16px;
  --shadow:0 6px 24px rgba(0,0,0,.06);
  --speed:280ms;
}
.wrap{
  max-width:980px;
  margin:40px auto;
  padding:0 16px 120px;
}
h1{
  font-size:clamp(22px,2.5vw,28px);
  font-weight:800;
  letter-spacing:.02em;
}
.lead{color:var(--muted); margin:0 0 28px}

/* アコーディオン本体 */
.accordion{
  display:grid;
  gap:12px;
  padding: 0 8px;
}
.acc-item{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden; /* 角を綺麗に切る */
}

/* 見出しボタン */
.acc-trigger{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  border:0;
  background:transparent;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:20px 20px;
  cursor:pointer;
}
.acc-trigger:focus{
  outline-offset: 2px;
}
.acc-heading{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
}
.acc-eyebrow{
  font-size:12px;
  color:#ff7a7a;
  font-weight:700;
  letter-spacing:.05em;
  font-family: "myfont-medium";
}
.acc-title{
  font-size:clamp(18px,2.2vw,24px);
  font-weight:900;
  color:#42C8E8;
  letter-spacing:.03em;
  font-family: "myfont-bold";
}

/* 右側の丸アイコン（矢印） */
.chev{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:999px;
  background:#42C8E8;
  display:grid; place-items:center;
  transition:transform var(--speed) ease;
}
.chev svg{width:18px;height:18px;fill:white;transform:rotate(-90deg);transition:transform var(--speed) ease}
.acc-item.is-open .chev svg{ transform:rotate(90deg); } /* 開いたら上向きに */

/* パネル（中身） */
.acc-panel{
  /* アニメ用に高さをJSでセット */
  max-height:0;
  overflow:hidden;
  transition:max-height var(--speed) ease;
  background:linear-gradient(#fff,#fff);
}
.acc-inner{
  margin: 0px 20px 22px;
  display: flex;
  gap: 14px;
  box-shadow: inset 0 1px 0 #42C8E8;
  border-top: 1px solid #42C8E8;
  padding-top: 20px;
}
.acc-text{
  text-align: left;
  padding-right: 10px;
}
.acc-inner .thumb{
  width:100%;
  max-width:450px;
  height:auto;
}
.acc-text h3{
  font-size: 18px;
  line-height: 28px;
  margin-top: 20px;
  padding-left: 30px;
  position: relative;
  display: inline-block;
  font-family: "myfont-semi";
}
.acc-item:nth-child(1) .acc-text h3:before, .acc-item:nth-child(2) .acc-text h3:before{
  content: "";
  background: url(../../assets/images/icon-mini-globe-red.png);
  background-size: 25px;
  left: 0;
  width: 25px;
  height: 15px;
  top: 6px;
  position: absolute;
}
.acc-item:nth-child(1) .acc-text h3:after, .acc-item:nth-child(2) .acc-text h3:after{
  content: "";
  background: url(../../assets/images/icon-mini-globe-red.png);
  background-size: 25px;
  right: -32px;
  width: 25px;
  height: 15px;
  top: 6px;
  position: absolute;
}
.acc-item:nth-child(3) .acc-text h3:before, .acc-item:nth-child(4) .acc-text h3:before, .acc-item:nth-child(5) .acc-text h3:before{
  content: "";
  background: url(../../assets/images/icon-mini-globe-blue.png);
  background-size: 25px;
  left: 0;
  width: 25px;
  height: 15px;
  top: 6px;
  position: absolute;
}
.acc-item:nth-child(3) .acc-text h3:after, .acc-item:nth-child(4) .acc-text h3:after, .acc-item:nth-child(5) .acc-text h3:after{
  content: "";
  background: url(../../assets/images/icon-mini-globe-blue.png);
  background-size: 25px;
  right: -32px;
  width: 25px;
  height: 15px;
  top: 6px;
  position: absolute;
}
.list{
  margin:0; padding:0 0 0 1.1em;
  font-family: "myfont-semi";
  line-height: 25px;
}
.muted{ color:var(--muted);
  font-size: 18px;
  line-height: 28px;
 }
.thumb{
  width:100%; max-width:720px; display:block;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}

/* 詳細ブロック（下段に表示される大カード） */
.detail{
  border-top:1px dashed #e6eef5;
  background:#fbfdff;
  display:grid;
  gap:12px;
}
.detail h3{
  margin:0 0 6px;
  font-size:18px;
  font-weight:800;
}
.badge{
  display:inline-grid; place-items:center;
  background:#ffefef; color:#e45858;
  font-weight:700; font-size:12px; letter-spacing:.03em;
  height:22px; padding:0 10px; border-radius:999px;
}

/* “下にある詳細カードだけ先に見せたい”場合の見栄え */
.acc-item.is-open .acc-panel{ /* 高さはJSが設定、ここでは影の強調だけ */

}
/* タイムライン全体 */
.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 83px;
  border-left: 2px solid #0A2540;
  margin-top: 50px;
  text-align: left;
}

/* 各項目 */
.timeline-item {
  position: relative;
  margin-bottom: 90px;
}

/* 時計アイコン */
.timeline-item:nth-child(1):before {
  content: "";
  position: absolute;
  left: -123px;
  top: -10px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock0530.png') no-repeat center center;
  background-size: contain;
}
.timeline-item:nth-child(2):before {
  content: "";
  position: absolute;
  left: -123px;
  top: -10px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock0535.png') no-repeat center center;
  background-size: contain;
}
.timeline-item:nth-child(3):before {
  content: "";
  position: absolute;
  left: -123px;
  top: -10px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock0600.png') no-repeat center center;
  background-size: contain;
}
.timeline-item:nth-child(4):before {
  content: "";
  position: absolute;
  left: -123px;
  top: -10px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock0610.png') no-repeat center center;
  background-size: contain;
}
.timeline-item:nth-child(5):before {
  content: "";
  position: absolute;
  left: -123px;
  top: -10px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock0615.png') no-repeat center center;
  background-size: contain;
}
.timeline-item:nth-child(6):before {
  content: "";
  position: absolute;
  left: -123px;
  top: -10px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock0630.png') no-repeat center center;
  background-size: contain;
}

/* 時間テキスト */
.time {
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  font-family: "myfont-semi";
  font-size: 30px;
}

/* タイトル */
.title {
  font-weight: 700;
  font-size: 25px;
  color: #42C8E8;
  margin-bottom: 6px;
  font-family: "myfont-semi";
  padding: 8px 0;
}

/* 説明 */
.desc {
  font-size: 18px;
  color: #444;
  margin-bottom: 10px;
  font-family: "myfont-semi";
  line-height: 30px;
}

/* 画像 */
.timeline img {
  width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  max-width: 446px;
  margin: 10px 0;
}

/* 最後の項目には縦線を延ばさない */
.timeline-item:last-child::after {
  content: none;
}


/* ============ 備考 ============ */
.note{
  color:#ff7a00;
  font-weight:900;
  margin:8px 0 4px;
  text-align: left;
  font-family: "myfont-semi";
  font-size:26px;
  padding-bottom: 10px;
  margin-top: -40px;
}
.small{
  color: var(--muted);
  font-size: 16px;
  text-align: left;
  line-height: 32px;
  text-align: justify;
}
.pankuzu{
  position: absolute;
  left: 50px;
}
.pankuzu-inner{
  max-width: 1200px;
  margin: 0 auto;
}
.pankuzu-inner ul{
  display: flex;
  align-items: center;
  font-size: 15px;
}
.pankuzu-inner ul li {
  padding: 5px 15px 5px 6px;
}
.pankuzu-inner ul li img{
  width: 13px;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 5px;
}
.pankuzu-inner ul li{
  padding-right:5px;
}
.about.junior{
  background:url(../../assets/images/background-about-junior.png);
  background-position:center;
  background-size:cover;
  padding-top: 200px;
}
.parents-voice{
  background: #FF9500;
  text-align: center;
}
.parents-voice-inner{
  max-width: 1550px;
  margin: 0 auto;
}
.parents-voice h2{
  font-size: 50px;
  line-height: 70px;
  color: white;
  padding: 100px 0 100px;
  font-family: 'myfont-semi';
  letter-spacing: 7px;
  position: relative;
  display: inline-block;
}
.parents-voice h2:before{
  content: "";
  background: url(../../assets/images/icon-megahone-left.png);
  background-size: 122px;
  left: -144px;
  width: 122px;
  height: 69px;
  top: 96px;
  position: absolute;
}
.parents-voice h2:after{
  content: "";
  background: url(../../assets/images/icon-megahone-right.png);
  background-size: 122px;
  right: -132px;
  width: 122px;
  height: 69px;
  top: 96px;
  position: absolute;
}
.parents-voice-contents{
  background: white url(../../assets/images/background-parents-voice.png);
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
}
.parents-voice-box{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 100px;
}
.img-parents-voice{
  width:327px;
}
.icon-human2{
  width:209px;
}
.parents-voice-box .left p{
  text-align: justify;
  padding: 0 0 20px 20px;
  font-size: 20px;
  line-height: 30px;
  color: #0A2540;
}
.parents-voice-box:nth-child(1) .left{
  display: flex;
  background: white;
  margin-top: -50px;
  border-radius: 30px;
  border-width: 2px;
  border-color: #FF9500;
  padding: 20px;
  align-items: center;
  max-width: 930px;
}
.parents-voice-box:nth-child(2) .left{
  display: flex;
  background: white;
  margin-top: -50px;
  border-radius: 30px;
  border-width: 2px;
  border-color: #FF9500;
  padding: 20px;
  align-items: center;
  max-width: 930px;
}
.icon-glove-red, .icon-glove-blue{
  width:248px;
}
.parents-voice-box:nth-child(3) .left{
  display: flex;
  background: white;
  margin-top: -50px;
  border-radius: 30px;
  border-width: 2px;
  border-color: #FF9500;
  padding: 20px;
  align-items: center;
  max-width: 930px;
}
.parents-voice-box:nth-last-child(1){
  margin-bottom:0;
  padding-bottom:100px;
  background: #cdf1ff;
}
.junior-course{
  text-align: center;
  padding: 0px 0px;
  background: #F5F5F5;
}
.junior-course h2{
  font-size:50px;
  line-height:70px;
  color:white;
  padding-bottom: 100px;
  position:relative;
  background: #42C8E8;
  padding-top: 100px;
  z-index: 2;
  font-family: 'myfont-semi';
}
.junior-course h2:before{
  background:url(../../assets/images/icon-human-jr.png);
  position:absolute;
  content: "";
  left:0;
  right:0;
  margin:0 auto;
  width:118px;
  height:298px;
  background-size:118px;
  top: 25px;
  z-index: -1;
  background-repeat: no-repeat;
}
.junior-course.fitness h2:before{
  background:url(../../assets/images/icon-human-fitness.png);
  position:absolute;
  content: "";
  left:0;
  right:0;
  margin:0 auto;
  width:89px;
  height:307px;
  background-size:contain;
  top: 25px;
  z-index: -1;
  background-repeat: no-repeat;
}
.junior-course-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom:100px;
}
.junior-traning{
  text-align: center;
  background: #42C8E8;
  padding: 100px 0;
}
.junior-traning h2{
  font-size:50px;
  line-height:70px;
  color:white;
  padding-bottom: 130px;
  position:relative;
  background: #42C8E8;
  padding-top: 100px;
  z-index: 2;
  font-family: "myfont-semi";
}
.junior-traning h2:before{
  background:url(../../assets/images/icon-glove-back.png);
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 188px;
  height: 185px;
  background-size: 188px;
  top: 25px;
  background-repeat: no-repeat;
  z-index: -1;
}
.junior-traning-inner{
  border-radius: 20px;
  max-width: 1320px;
  margin: 0 auto;
  background: white;
  padding: 50px;
  box-shadow: 0 3px 10px #e8898a;
}
.junior-traning-inner h3{
  font-size: 40px;
  line-height: 70px;
  color: #F4743E;
  font-family: "myfont-semi";
}
.junior-traning-inner h3 span{
  display: block;
  font-size: 25px;
  line-height: 30px;
}
.junior-plan{
  text-align: center;
  padding: 100px 0 0;
  background: white;
  margin-bottom: -60px;
}
.junior-plan .table-box table{
  max-width: 1120px;
}
.junior-plan .table-box.dropin table{
  max-width: 880px;
}
.junior-plan .table-box.dropin th, .junior-plan .table-box.dropin td{
  width: 50%;
}
.junior-plan .table-box th, .junior-plan .table-box td{
  width: auto;
}
.junior-plan-inner{
  max-width: 1320px;
  margin: 0 auto;
}
.junior-plan-inner h2{
  font-size: 50px;
  line-height: 70px; 
  font-family: "myfont-semi";
}
/* --- 見出しデザイン --- */
.section-title {
  position: relative;
  font-size: 1.5rem;
  font-weight: 800;
  color: #333;
  background: #fffacd;
  padding: 5px 0 5px 20px;
  margin: 0;
  line-height: 1.4;
  overflow: hidden;
  text-align: left;
}

/* 右側の水色スラッシュ帯 */
.section-title::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 35%;
  height: 100%;
  background: #69c4e6;
  clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 11% 100%);
}

/* 全体を横いっぱいに */
.section-title {
  display: block;
  width: 100%;
  border: 1px solid #d8e4ef; /* 薄い境界線 */
  box-sizing: border-box;
  font-family: "myfont-semi";
}
.table-box{
  margin-top: 30px;
  margin-bottom:80px;
}
.table-box table{
  width:100%;
  font-family: "myfont-semi";
  max-width: 880px;
}
.table-box th, .table-box td{
  border-width: 1px;
  border-color: #707070;
  padding: 30px 20px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}
.table-box .price{
  color:#E84B42;
  font-size: 25px;
}
.table-box th{
  background: #fffacd;
  font-size: 20px;
  width: 50%;
}

/* 画像パスが存在しない場合用のフォールバック */
.timeline-item::before{
  /* 既存の nth-child 指定より下に書いて優先度を下げないため、
     画像が 404 の時だけ背景色アイコンに見せるトリック */
  background-color: transparent; /* 既定 */
}
@supports (background: paint(worklet)){
  /* 何もしない（環境依存） */
}
/* 画像読み込みに失敗した場合の簡易丸アイコン */
.timeline-item:before{
  background-size: contain;
}
.timeline-item:before { /* 背景画像が無いブラウザで視覚が欠けないように */
  outline: 0; /* reset */
}
.timeline-item:before:empty{
  /* CSSだけで“時計風”の当てアイコン */
  background: radial-gradient(circle at 50% 50%, #fff 54%, #69c4e6 55%) center/100% 100% no-repeat;
  box-shadow: 0 0 0 2px #69c4e6 inset;
}

.parents-voice-box {
  opacity: 0;
  transform: translateY(30px);
  transition: all .6s ease;
}
.parents-voice-box.show {
  opacity: 1;
  transform: translateY(0);
}
.header-mobile.active {
  transform: translateX(0);
  opacity: 1;
  transition: all .3s ease;
}
.header-mobile {
  transform: translateX(100%);
  opacity: 0;
  transition: all .3s ease;
}
.about.fitness{
  background:url(../../assets/images/background-about-fitness.png);
  background-position:center;
  background-size:cover;
  padding-top: 200px;
}
.about.fitness .about-box{
  background: #ffd9cb;
  border-width: 1px;
  border-color: #707070;
}
.voice {
  position: relative;
  background: linear-gradient(to bottom right, #e45c5a 0%, #f7a45c 100%);
  color: #333;
  padding: 0px 20px 80px;
}

.voice-inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

.voice h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  position: relative;
  margin-bottom: 60px;
}

.voice h2::before,
.voice h2::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background: url('assets/images/icon-megaphone.png') no-repeat center/contain;
  top: 50%;
  transform: translateY(-50%);
}

.voice h2::before {
  left: calc(50% - 160px);
}
.voice h2::after {
  right: calc(50% - 160px);
}

.voice-item {
  margin-bottom: 80px;
  position: relative;
  max-width: 820px;
  z-index: 2;
}

.voice-item.reverse {
  display: flex;
  flex-direction: row-reverse;
}
.voice-meta {
  text-align: center;
  position: absolute;
  z-index: 2;
  left: -52px;
  top: -42px;
  rotate: -10deg;
}

.voice-age {
  display: inline-block;
  background: #f79830;
  color: #fff;
  border-radius: 50%;
  width: 125px;
  height: 125px;
  font-size: 16px;
  line-height: 115px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-width: 5px;
}

.voice-content {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  padding: 30px 50px 30px 150px;
  position: relative;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transform: rotate(-2deg);
  max-width: 670px;
  border-width: 1px;
  border-color: #707070;
}

.voice-item.reverse .voice-content {
  transform: rotate(2deg);
}
.voice{
  background: white url(../../assets/images/background-voice.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.voice-stars {
  font-size: 37px;
  color: #ffcc00;
  letter-spacing: 4px;
  margin-bottom: 10px;
  text-align: right;
  position: absolute;
  right: 0;
  top: -27px;
  text-shadow: 2px 1px 0px #f1f1f1;
}

.voice-content p {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  text-align: justify;
  max-width: 530px;
  position: relative;
}

.voice-content p::before {
  content: "“";
  position: absolute;
  font-size: 160px;
  color: #F28705;
  left: -105px;
  z-index: 1;
  bottom: -98px;
  line-height: normal;
  height: auto;
}

.voice-item.reverse::before {
  right: 0;
  left: auto;
}
/* 基本トークン（既存フォントがあれば継承されます） */
:root{
  --pt-red:#d7584e;
  --pt-red-dark:#c44e46;
  --pt-accent:#ffd84a;
  --pt-ink:#0a2540;
  --pt-card:#fff;
  --pt-line:#e6e6e6;
  --pt-shadow:0 10px 28px rgba(0,0,0,.08);
}

/* セクション外側 */
.pt{
  padding: 48px 16px 96px;
  background: linear-gradient(180deg, #fff 0, #fff 40%, #faf7f2 100%);
}
.pt-inner{ max-width: 1240px; margin: 0 auto; }

/* タイトル（黄色のライン強調） */
.pt-title{
  text-align: center;
  font-size: clamp(20px, 2.6vw, 30px);
  color: var(--pt-ink);
  line-height: 1.6;
  margin: 8px 0 28px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  font-family: "myfont-semi";
}
.pt-title::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.1em; height: 0.5em;
  background: #fef740;
  z-index:-1; border-radius:4px;
}

/* ------------- メインビジュアル ------------- */
.pt-hero{
  position: relative;
  margin: 26px 0 56px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--pt-shadow);
}

/* 上の白い三角形（左上から斜めに被る） */
.pt-hero::before{
  content:"";
  position:absolute; inset:-8% 45% 60% -8%;
  background:#fff;
  transform: skewY(-8deg);
}

/* 下の赤い斜め帯 */
.pt-hero::after{
  content:"";
  position:absolute; left:-10%; right:-10%; bottom:-1px; height: 34%;
  background: linear-gradient(180deg, var(--pt-red) 0, var(--pt-red-dark) 100%);
  transform: skewY(-6deg);
  transform-origin: left bottom;
}

/* メイン画像 */
.pt-hero-img{ display:block; width:100%; height:auto; }

/* 左に重ねる説明カード */
.pt-hero-note{
  position:absolute; left: clamp(18px, 5vw, 48px); top: clamp(18px, 6vw, 60px);
  width: min(520px, 58vw);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
  border-radius: 10px;
  padding: clamp(14px, 2.4vw, 22px);
  line-height: 1.9;
  font-size: clamp(14px, 1.6vw, 15.5px);
  color:#333;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* レッスン時間バッジ（赤帯の上に） */
.pt-duration{
  position:absolute; right: clamp(16px, 6vw, 60px); bottom: 10%;
  display:flex; align-items:center; gap:12px;
  color:#fff;
}
.pt-duration-icon{
  display:grid; place-items:center;
  width:48px; height:48px; border:2px solid #fff; border-radius:999px;
}
.pt-duration-text b{
  display:block; font-size:13px; opacity:.9; letter-spacing:.06em;
}
.pt-duration-text em{
  display:block; font-style:normal; font-weight:900; font-size: clamp(20px, 4vw, 28px);
}

/* ------------- 料金表 ------------- */
.pt-table-wrap{
  margin: 24px auto 64px;
  background:#fff;
  box-shadow: var(--pt-shadow);
  padding: 0;
  overflow: hidden;
  border:1px solid #eee;
}
.pt-table{
  width:100%;
  border-collapse: collapse;
  font-size: 15px;
}
.pt-table thead th{
  background:#fff7c9;
  color:#333;
  text-align:center;
  padding: 16px 10px;
  border-bottom:1px solid var(--pt-line);
  font-size: 22px;
  font-family: "myfont-semi";
}
.pt-table td{
  padding: 18px 14px;
  border-bottom:1px solid var(--pt-line);
  border-right:1px solid var(--pt-line);
  font-size: 22px;
  font-family: "myfont-semi";
  text-align: center;
  vertical-align: middle;
}
.pt-table td:last-child,
.pt-table th:last-child{ }
.pt-table .price{ color:#e6523d; font-weight:800; text-align:center; font-size: 25px; }
.pt-table .menu{ line-height: 1.9; text-align: left; padding-left: 150px;}

/* ------------- 効果タイトル ------------- */
.pt-effects-title{
  text-align: center;
  margin: 16px auto 24px;
  padding: 12px 18px;
  margin-bottom: 59px;
  font-size: 35px;
  font-family: "myfont-medium";
  line-height:50px;
}
.pt-effects-title span{ font-weight: 700; }
.pt-effects-title strong{}

/* ------------- 効果4つ ------------- */
.pt-effects{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex
;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2.2vw, 26px);
  align-items: start;
  justify-content: center;
}
.pt-effects li:nth-child(1), .pt-effects li:nth-child(3){
  margin-top: -54px;
}
.pt-effect{ text-align:center; }

/* 吹き出しバッジ */
.pt-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid #ddd; border-radius:999px;
  padding: 8px 12px; font-weight: 800; color:#333; box-shadow: 0 2px 10px rgba(0,0,0,.04);
  margin-bottom: 10px; position: relative;
}
.pt-badge i{
  display:grid; place-items:center; width:20px; height:20px;
  background:#ff6b6b; color:#fff; border-radius:999px; font-style:normal; font-size: 12px; font-weight:900;
}

/* 画像を円形にクリップ */
.pt-circle{
  width: 210px; max-width: 95%; margin: 0 auto;
  aspect-ratio: 1/1; border-radius: 999px; overflow: hidden;
  box-shadow: var(--pt-shadow); background:#fff;
}
.pt-circle img{ width:100%; height:100%; object-fit: cover; }
/* 斜め角度を一括管理（数値を変えると全体の傾きが揃って変わります） */
:root{
  --skewTop: 6vw;   /* 上辺の傾き量 */
  --skewBtm: 6vw;   /* 下辺の傾き量 */
  --copyBg: #f1f1f1;
}

/* セクション全体（上下を白い斜めで切る） */
.pt-hero{
  position: relative;
  overflow: hidden;
  background: #fff;              /* ページ地色 */
  padding: 16vw 0;               /* 上下は大きめ余白（擬似要素で視覚的に切る） */
}

/* 上辺・下辺の白い斜めマスク（＝背景を削って中央帯だけ見せる） */
.pt-hero::before,
.pt-hero::after{
  content:"";
  position: absolute; inset: 0;
  background:#fff;
  z-index: 1;                    /* 中身より下げない */
  pointer-events: none;
}
.pt-hero::before{
  /* 上側の白い三角形（左→右に上がる） */
  clip-path: polygon(0 0, 100% 0, 100% calc(var(--skewTop)), 0 calc(var(--skewTop) + 4vw));
}
.pt-hero::after{
  /* 下側の白い三角形（左→右に下がる） */
  clip-path: polygon(0 calc(100% - var(--skewBtm) - 4vw), 100% calc(100% - var(--skewBtm)), 100% 100%, 0 100%);
}

/* 中身の2カラム帯（上下が斜めになるよう箱ごとクリップ） */
.pt-hero__inner{
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;     /* 左右比率 */
  gap: 40px;
  padding: 0 24px;
  /* セクション中央の帯自体を平行四辺形に */
  clip-path: polygon(
    0 calc(var(--skewTop) + 2vw),
    100% calc(var(--skewTop)),
    100% calc(100% - var(--skewBtm)),
    0 calc(100% - var(--skewBtm) - 2vw)
  );
}

/* 左：薄グレーの台形パネル */
.pt-copy{
  align-self: center;
  background: var(--copyBg);
  padding: 48px 40px;
  line-height: 1.9;
  color:#333;
  font-size: 15px;
  /* 上下のエッジを右上がり/右下がりに合わせる */
  clip-path: polygon(
    0 6%,
    100% 0,
    100% 94%,
    0 100%
  );
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.pt-copy p{ margin:0; }

/* 右：上下が斜めの大きい画像 */
.pt-photo{
  position: relative;
  overflow: hidden;
  /* 見た目のエッジを画像側でも合わせる */
  clip-path: polygon(
    0 4%,
    100% 0,
    100% 96%,
    0 100%
  );
}
.pt-photo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* わずかに拡大してクリップで欠けないように */
  transform: scale(1.04);
}
.pt{
  padding: 48px 16px 96px;
  background: url(../../assets/images/background-fitness.png);
  background-size:contain;
  background-repeat: no-repeat;
  background-position-y: 100px;
}
.training-section{
  margin-top: 24%;
  margin-bottom: 200px;
}
.training-inner{
  width: 474px;
  font-size: 18px;
  line-height: 33px;
}
.lesson75{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 205px;
  margin-top: -120px;
}
/* 時計アイコン */
.timeline-item.fitness:nth-child(1):before {
  content: "";
  position: absolute;
  left: -123px; /* 位置を微調整（画像サイズに合わせて調整可能） */
  top: -9px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock1900.png') no-repeat center center;
  background-size: contain;
}
.timeline-item.fitness:nth-child(2):before {
  content: "";
  position: absolute;
  left: -123px; /* 位置を微調整（画像サイズに合わせて調整可能） */
  top: -9px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock1910.png') no-repeat center center;
  background-size: contain;
}
.timeline-item.fitness:nth-child(3):before {
  content: "";
  position: absolute;
  left: -123px; /* 位置を微調整（画像サイズに合わせて調整可能） */
  top: -9px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock1920.png') no-repeat center center;
  background-size: contain;
}
.timeline-item.fitness:nth-child(4):before {
  content: "";
  position: absolute;
  left: -123px; /* 位置を微調整（画像サイズに合わせて調整可能） */
  top: -9px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock1930.png') no-repeat center center;
  background-size: contain;
}
.timeline-item.fitness:nth-child(5):before {
  content: "";
  position: absolute;
  left: -123px; /* 位置を微調整（画像サイズに合わせて調整可能） */
  top: -9px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock2015.png') no-repeat center center;
  background-size: contain;
}
.timeline-item.fitness:nth-child(6):before {
  content: "";
  position: absolute;
  left: -123px; /* 位置を微調整（画像サイズに合わせて調整可能） */
  top: -9px;
  width: 78px;
  height: 78px;
  background: url('../../assets/images/icon-clock2030.png') no-repeat center center;
  background-size: contain;
}
.pt-effect img{
  width:290px;
}
.junior-traning.fitness{
  background:#FF9898;
}
.junior-traning.fitness h2{
  background:#FF9898; 
}
.junior-traning.fitness .title{
  color:#E84B42;
}
.junior-course.fitness h2{
  background:#FF9898;
}

.parents-voice.fitness {
  background: #EC6363;
}
.parents-voice.fitness .voice:before{
  content: "";
  width:110px;
  height:380px;
  position:absolute;
  left:50px;
  top:150px;
  background: url(../../assets/images/icon-voice-human-left.png);
  background-size: contain;
}
.parents-voice.fitness .voice:after{
  content: "";
  width:189px;
  height:378px;
  position:absolute;
  right:50px;
  bottom:50px;
  background: url(../../assets/images/icon-voice-human-right.png);
  background-size: contain;
}
.voice-item:nth-child(2) .voice-stars{
  left: 22px;
  right: auto;
}
.voice-item:nth-child(2) .voice-meta{
  z-index: 2;
  top: -58px;
  rotate: 3deg;
  left: auto;
  right: -68px;
}
.voice-item:nth-child(2) .voice-content{
  padding: 30px 150px 30px 50px;
}
.voice-item:nth-child(2) .voice-content p:before{
  bottom: -107px;
  left: auto;
  right: -121px;
}
.page-title.junior{
  height: 290px;
  background: url(../../assets/images/page-title-back-junior.jpg);
  background-size:cover;
  width:100%;
  background-position: center;
}
.page-title.fitness{
  height: 290px;
  background: url(../../assets/images/page-title-back-fitness.jpg);
  background-size:cover;
  width:100%;
  background-position: center;
}