/* 改善版の共通CSS（使い勝手・ユーザー補助と、10/23 決定のトーン「A2：余白・角丸・大きめの英字見出し」） */

/* スライダーの丸ボタン：見た目（10pxの丸）はそのまま、押せる範囲だけ広げる */
.owl-dots .owl-dot { position: relative; }
.owl-dots .owl-dot::after { content: ""; position: absolute; inset: -7px -3px; }

/* 日付のグレーをコントラスト比4.5以上に（#999 → #707070） */
.meta .date, p.meta span.date { color: #707070; }

/* YouTube：クリックまでサムネイルだけを表示 */
.yt-lite {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; padding: 0; cursor: pointer; background: #000 center / cover no-repeat;
}
.youtube .yt-lite, .wp-has-aspect-ratio .yt-lite { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.yt-lite::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 48px;
  transform: translate(-50%, -50%); border-radius: 12px; background: rgba(0, 0, 0, .7);
  transition: background .2s;
}
.yt-lite::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
  border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff;
}
.yt-lite:hover::before, .yt-lite:focus-visible::before { background: #f00; }
.yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* フォーム：送信前のチェック表示 */
.de-form .wpcf7-not-valid-tip { display: block; color: #d00; font-size: 13px; margin-top: 4px; }
.de-form .wpcf7-not-valid { border-color: #d00 !important; }
.de-form [type="submit"][disabled] { opacity: .6; cursor: wait; }

/* サイト内検索・404の案内 */
.de-search { max-width: 960px; margin: 0 auto; padding: 40px 20px 80px; }
.de-search form { display: flex; gap: 8px; margin-bottom: 24px; }
.de-search input[type="search"] { flex: 1; padding: 12px 14px; font-size: 16px; border: 1px solid #ccc; }
.de-search button { padding: 0 20px; background: #000; color: #fff; border: 0; font-weight: 700; cursor: pointer; }
.de-search__count { font-size: 13px; color: #555; margin-bottom: 12px; }
.de-search__list { list-style: none; margin: 0; padding: 0; }
.de-search__list li { border-top: 1px solid #e5e5e5; }
.de-search__list a { display: block; padding: 16px 4px; color: inherit; text-decoration: none; }
.de-search__list a:hover .t { text-decoration: underline; }
.de-search__list .t { display: block; font-weight: 700; line-height: 1.5; }
.de-search__list .m { display: block; font-size: 12px; color: #707070; margin-top: 4px; }
.de-search__list .d { display: block; font-size: 13px; color: #333; margin-top: 6px; line-height: 1.6; }
.de-404links { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; padding: 0; margin: 24px 0 0; }
.de-404links a { display: block; padding: 16px; border: 1px solid #000; font-weight: 700; color: #000; text-decoration: none; }
.de-404links a:hover { background: #000; color: #fff; }
.de-search__h { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.de-search__ex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -8px 0 24px; font-size: 13px; }
.de-search__ex span { font-weight: 700; }
.de-search__ex ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.de-search__ex a { display: inline-block; padding: 6px 12px; border: 1px solid #222; color: #222; text-decoration: none; }
.de-search__ex a:hover { background: #222; color: #fff; }

/* ヘッダーの JA / EN 切り替え */
.de-lang { display: flex; align-items: center; gap: 6px; margin-right: 18px; font-family: "Lato", "Noto Sans JP", sans-serif; font-size: 13px; letter-spacing: .04em; }
.de-lang a { color: #222; text-decoration: none; font-weight: 400; padding: 8px 2px; }
.de-lang a[aria-current="true"] { font-weight: 700; }
.de-lang a:hover { color: #f00; }
.de-lang span { color: #999; }
.hd__right { display: flex; align-items: center; }
/* スマホ：ヘッダーからは外し、メニューの中に表示（ヘッダーの幅が足りずハンバーガーがはみ出すため） */
.de-lang--nav { display: none; }
@media (max-width: 768px) {
  .hd__right .de-lang { display: none; }
  .de-lang--nav { display: flex; margin: 24px 0 16px; font-size: 16px; gap: 10px; }
  .de-lang--nav a { color: #fff; padding: 8px 4px; }
  .de-lang--nav span { color: #888; }
}

/* スマホの下部固定ボタン（768px以下） */
.de-sticky { display: none; }
@media (max-width: 768px) {
  .de-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: grid; grid-template-columns: 2fr 3fr;
    padding-bottom: env(safe-area-inset-bottom); background: #222;
    transform: translateY(110%); transition: transform .25s ease;
  }
  .de-sticky.is-show { transform: translateY(0); }
  .de-sticky__btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px;
    color: #fff; background: #222; text-decoration: none; font-weight: 700; font-size: 14px;
    font-family: "Lato", "Noto Sans JP", sans-serif;
  }
  .de-sticky__btn--main { background: #f00; }
  .de-sticky__arrow { font-family: "Lato", sans-serif; }
  body:has(.de-sticky) { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { .de-sticky { transition: none; } }

/* 英語トップ（/en） */
.de-en__hero { padding: 72px 0 56px; border-bottom: 1px solid #e5e5e5; }
.de-en__eyebrow { font-family: "Lato", sans-serif; font-weight: 700; letter-spacing: .12em; font-size: 13px; color: #f00; margin-bottom: 16px; }
.de-en__h1 { font-family: "Lato", "Noto Sans JP", sans-serif; font-weight: 700; font-size: clamp(32px, 5vw, 56px); line-height: 1.15; margin-bottom: 24px; }
.de-en__lead { max-width: 760px; font-size: 16px; line-height: 1.9; }
.de-en__cta { margin-top: 32px; }
.de-en__btn, .de-en__submit button {
  display: inline-flex; align-items: center; gap: 16px; padding: 16px 28px; background: #f00; color: #fff;
  font-family: "Lato", sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; border: 0; cursor: pointer;
}
.de-en__sec { padding: 64px 0; }
.de-en__sec--gray { background: #f6f6f6; }
.de-en .ttl { margin-bottom: 32px; }
.de-en__h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.de-en__sec p { line-height: 1.9; margin-bottom: 12px; }
.de-en__list { margin: 12px 0 20px 1.2em; list-style: square; line-height: 2; }
.de-en__list--works li { margin-bottom: 4px; }
.de-en__cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.de-en__card { background: #fff; padding: 24px; border-top: 3px solid #222; }
.de-en__card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; line-height: 1.5; }
.de-en__card p { font-size: 14px; }
.de-en__price { font-weight: 700; }
.de-en__price span { display: block; font-family: "Lato", sans-serif; font-size: 11px; letter-spacing: .1em; color: #707070; font-weight: 700; }
.de-en__note { font-size: 13px; color: #555; margin-top: 16px; }
.de-en__link { color: #222; font-weight: 700; text-decoration: none; border-bottom: 1px solid #222; }
.de-en__dl { display: grid; grid-template-columns: 160px 1fr; border-top: 1px solid #ddd; }
.de-en__dl dt, .de-en__dl dd { padding: 14px 0; border-bottom: 1px solid #ddd; }
.de-en__dl dt { font-weight: 700; }
.de-en__form { max-width: 720px; margin-top: 24px; }
.de-en__field { display: block; margin-bottom: 18px; }
.de-en__label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.de-en__req { color: #d00; }
.de-en__field input, .de-en__field select, .de-en__field textarea {
  width: 100%; padding: 12px 14px; font-size: 16px; border: 1px solid #ccc; background: #fff; border-radius: 0; font-family: inherit;
}
.de-en__form .wpcf7-response-output { margin-top: 16px; font-weight: 700; }
.de-en__form.sent .wpcf7-response-output { color: #1a7f37; }
.de-en__form.invalid .wpcf7-response-output { color: #d00; }
@media (max-width: 768px) {
  .de-en__hero { padding: 48px 0 40px; }
  .de-en__sec { padding: 48px 0; }
  .de-en__dl { grid-template-columns: 110px 1fr; }
}
.de-en h2.ttl { display: inline-block; padding-left: 0; padding-right: 8px; }
.de-en h2.ttl small { margin-left: 14px; font-size: 13px; font-weight: 700; }
/* 送信完了ページ：次に読む記事（トップのカードと同じ大きさ） */
.de-thanks-more { padding: 0 0 80px; }
.de-thanks-more .archive__inner { display: block; }
.de-thanks-more .post__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; margin: 32px 0 0; padding: 0; }
.de-thanks-more .post__inner li { width: auto; margin: 0; background: #fff; }
.de-thanks-more .post__inner a { display: block; color: #222; text-decoration: none; }
.de-thanks-more .post__inner dl { margin: 0; }
.de-thanks-more .post__inner dt img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.de-thanks-more .post__inner dd { margin: 0; padding: 14px 16px 18px; }
.de-thanks-more .post__inner h3 { font-size: 14px; font-weight: 700; line-height: 1.6; margin: 0 0 8px; }
.de-thanks-more .post__inner .meta { font-size: 12px; }
.de-thanks-more .post__inner .cat { display: inline-block; background: #f00; color: #fff; font-weight: 700; padding: 1px 8px; margin-right: 8px; }
.de-thanks-more .post__inner a:hover h3 { text-decoration: underline; }
@media (max-width: 768px) { .de-thanks-more .post__inner { grid-template-columns: 1fr; gap: 16px; } }
.de-thanks-more .de-ttl-center { display: table; margin: 40px auto 0; padding: 0 0 6px; text-align: center; }
.de-movies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; max-width: 840px; margin: 28px auto 8px; padding: 0; }
.de-movies p { margin: 8px 0 0; font-size: 12px; font-weight: 700; line-height: 1.5; text-align: center; }
@media (max-width: 768px) { .de-movies { grid-template-columns: repeat(3, 1fr); gap: 8px; } .de-movies p { font-size: 10px; } }

/* ===== トーン A2（10/23決定）：トップ ===== */

/* 共通：広い余白・角丸・ボタンは丸く（塗りのアニメは丸の中に収める） */
html .index .works,html .index .info,html .index .blog,html .index .interview,html .index .service{padding-top:120px;padding-bottom:120px}
html .index .about__wrapper{padding-top:120px}
html .index .info__wrapper,html .index .blog__wrapper,html .index .interview__wrapper{margin-top:56px}
html .index section:not(.fv) .cat{border-radius:999px;padding:1px 10px !important;font-size:11px;line-height:1.7}
html .index .blog__more a,html .index .interview__more a,html .index .works__bg .more,html .index .contact__more a,html .index .service__inner>li>a{border-radius:999px !important;overflow:hidden;isolation:isolate}
html .index .blog__more a,html .index .interview__more a{height:46px;padding:0 28px}
html .index .blog__more a .arrow,html .index .interview__more a .arrow,html .index .works__bg .more .arrow,html .index .contact__more a .arrow,html .index .service__inner>li>a .arrow{transition:transform .3s}
html .index .blog__more a:hover .arrow,html .index .interview__more a:hover .arrow,html .index .works__bg .more:hover .arrow,html .index .contact__more a:hover .arrow,html .index .service__inner>li>a:hover .arrow{transform:translateX(6px)}
html .index .works__bg{border-radius:0 28px 28px 0}
html .index .works__bg .more{height:50px !important;right:28px;padding:0 30px;z-index:3}
html .index .works .thumb,html .index .works .thumb img{border-radius:20px;overflow:hidden}
html .index .works .owl-item .txt{border-radius:0 0 20px 0}
html .index .about__list dt{border-radius:20px;overflow:hidden}
html .index .about__list dt img{transition:transform .5s ease}
html .index .about__list dd{border-radius:999px;overflow:hidden;isolation:isolate}
html .index .about__list dd .txt{position:relative;z-index:2}
html .index .about__list dd .arrow{transition:transform .3s;position:relative;z-index:2}
html .index .about__list .link:hover dd .arrow{transform:translateX(6px)}
html .index .about__list .link:hover dt img{transform:scale(1.04)}
html .index .service h2.ttl{border-bottom:0}
html .index .service__inner>li>a{transition:transform .25s}
html .index .service__inner>li>a .txt{position:relative;z-index:2}
html .index .contact{padding:80px}
html .index .contact__wrapper{border-radius:32px;padding:72px 40px}
@media (min-width:769px){html .index .works__bg .more{bottom:104px !important}}
@media (max-width:768px){
 html .index .works,html .index .info,html .index .blog,html .index .interview,html .index .service{padding-top:72px;padding-bottom:72px}
 html .index .about__wrapper{padding-top:72px}
 html .index .works__bg{border-radius:0}
 html .index .works__bg .more{height:44px !important;right:16px;padding:0 22px}
 html .index .works .thumb,html .index .works .thumb img{border-radius:16px}
 html .index .contact{padding:40px 16px}
 html .index .contact__wrapper{border-radius:24px;padding:48px 20px}
 html .index .service__inner>li>a{height:56px !important}
}
@media (hover:hover){html .index .service__inner>li>a:hover{transform:translateY(-2px)}}

html .index h2.ttl{border-bottom:0;font-size:clamp(32px,3.6vw,48px);line-height:1;letter-spacing:.02em;color:#111;display:block}
html .index h2.ttl small{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;letter-spacing:.16em;color:#555}
html .index h2.ttl small::before{content:"";width:24px;height:2px;background:#f00}
html .index .service h2.ttl{color:#fff}
html .index .service h2.ttl small{color:#bbb}
html .index .blog__more,html .index .interview__more{top:-62px !important}
@media (max-width:768px){html .index h2.ttl{font-size:32px}}

html .index .info__inner li dl,html .index .blog__inner li dl,html .index .interview__inner li dl{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;height:100%}
html .index .blog__inner li dl{background:#f6f6f6;box-shadow:none}
html .index .info__inner li .link:hover dl,html .index .blog__inner li .link:hover dl,html .index .interview__inner li .link:hover dl{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.10)}
html .index .info__inner li .link:hover h3,html .index .blog__inner li .link:hover h3,html .index .interview__inner li .link:hover h3{color:#f00}

html .index .service__inner>li>a{background:#111 !important}

/* ===== トーン A2：下層ページ（一覧・記事・会社・サービス・フォーム） ===== */
/* 見出し：英字を大きく、下に赤い線＋日本語 */
html body main h1.ttl,html body main h2.ttl{border-bottom:0;font-size:clamp(28px,3vw,40px);line-height:1.25;letter-spacing:.02em;color:#111;display:block;text-transform:uppercase}
html body main h1.ttl small,html body main h2.ttl small{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:13px;letter-spacing:.16em;color:#555}
html body main h1.ttl small::before,html body main h2.ttl small::before{content:"";width:24px;height:2px;background:#f00;flex:none}
html body main .service h2.ttl,html body main .contact h2.ttl{color:inherit}
html body .de-thanks-more .de-ttl-center{display:table;font-size:26px;margin:56px auto 0}
html body .de-en h2.ttl{display:block;padding-right:0}
html body .de-en h2.ttl small{margin-left:0}
/* カテゴリ・タグは丸く */
html body main .cat{border-radius:999px;padding:1px 10px !important;font-size:11px;line-height:1.7}
html body main .cat a{border-radius:999px}
html body .tag-cloud-link{border-radius:999px;padding-left:10px !important;padding-right:10px !important}
/* 一覧のカード：角丸・薄い影・乗せると浮いてタイトルが赤く */
html body .archive .post__inner li,html body .history__inner li{border-radius:18px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s}
html body .archive .post__inner li:hover,html body .history__inner li:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.10)}
html body .archive .post__inner li .link:hover,html body .history__inner li .link:hover{opacity:1}
html body .archive .post__inner li dt,html body .history__inner li dt{overflow:hidden}
html body .archive .post__inner li dt img,html body .history__inner li dt img{transition:transform .5s ease}
html body .archive .post__inner li:hover dt img,html body .history__inner li:hover dt img{transform:scale(1.04)}
html body .archive .post__inner li:hover h3,html body .history__inner li:hover h3{color:#f00}
/* サイドバー */
html body .sidebar__wrapper{border-radius:18px;overflow:hidden}
html body .sidebar .ranking__list img{border-radius:8px}
/* ページ送り */
html body .archive .post__pager .page-numbers{border-radius:999px}
/* 記事 */
html body .single .post__wrapper>.thumb,html body .single .post__wrapper>.thumb img{border-radius:20px;overflow:hidden}
html body .post__content .yt-lite,html body .post__content iframe{border-radius:14px;overflow:hidden}
html body #ez-toc-container{border-radius:16px}
html body .post__tag a{border-radius:999px}
/* 会社・サービス・採用：白い箱と赤い色面、写真を角丸に */
html body .intro__wrapper,html body .representative__wrapper,html body .overview__wrapper{border-radius:24px}
html body .intro__bg,html body .representative__bg{border-radius:28px}
html body .intro__img,html body .intro__img img,html body .representative__img,html body .representative__img img,html body .feature__img,html body .feature__img img{border-radius:20px;overflow:hidden}
html body .flow__inner li{border-radius:16px}
html body .svc-row-img,html body .svc-row-img img{border-radius:16px;overflow:hidden}
html body .svc-row-btn,html body .svc-btn-black,html body .svc-btn-red,html body .de-en__btn,html body .de-en__submit button{border-radius:999px}
html body .de-en__card{border-radius:16px}
/* お問い合わせ（全ページ下部）：角丸の赤い箱・丸いボタン（塗りの動きは丸の中に収める） */
html body .contact__wrapper{border-radius:32px}
html body .contact__more a{border-radius:999px;overflow:hidden;isolation:isolate}
html body .contact__more a .arrow{transition:transform .3s}
html body .contact__more a:hover .arrow{transform:translateX(6px)}
/* フォーム */
html body .form__input input,html body .form__select select,html body .form__textarea textarea,html body .de-en__field input,html body .de-en__field select,html body .de-en__field textarea,html body .de-search input[type="search"]{border-radius:10px}
html body .page .form input[type="submit"],html body .form__button input,html body .form__button button,html body .wpcf7-submit,html body .de-search button{border-radius:999px}
html body .de-404links a,html body .de-search__ex a{border-radius:999px}
@media (max-width:768px){
 html body main h1.ttl,html body main h2.ttl{font-size:24px}
 html body .contact__wrapper{border-radius:24px}
}

/* 送信完了ページの READ MORE：動画と同じ幅・同じ3列にそろえる（スマホは横長の小さいリスト） */
html body .de-thanks-more .archive__inner{max-width:840px;margin:0 auto}
html body .de-thanks-more .post__inner{gap:16px;margin-top:28px}
html body .de-thanks-more .post__inner li{border-radius:14px}
html body .de-thanks-more .post__inner dd{padding:10px 12px 14px}
html body .de-thanks-more .post__inner h3{font-size:12px;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
html body .de-thanks-more .post__inner .meta{font-size:11px;margin-top:6px}
html body .de-movies .yt-lite{border-radius:14px;overflow:hidden}
@media (max-width:768px){
 html body .de-thanks-more .post__inner{grid-template-columns:1fr;gap:10px}
 html body .de-thanks-more .post__inner dl{display:grid;grid-template-columns:120px 1fr;align-items:center}
 html body .de-thanks-more .post__inner dd{padding:8px 12px}
}

/* フッターの MESSAGE 欄を外したので、スマホ（メニュー一覧は元々非表示）では上の帯ごと隠す */
@media (max-width:768px){ html body .ft__wrapper{display:none} }