/*
Theme Name: relax-to
Author: relax-to
Description: Simple and responsive WordPress theme.
Version: 1.0
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* Reset & base */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, li, figure { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul,ol,li,dl,dd,dt{
  list-style: none;
  margin: 0;
  padding: 0;
    margin-inline-start: 0;
    padding-inline-start: 0; /* インデントも消す場合 */
}
button,
input.btn { font: inherit; }
:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; }

/* Tokens */
:root {
  --font-family: 'Noto Sans JP', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;

  /* brand */
  --color-brand: #007bc7;
  --color-brand-sub: #52b8f6;
  --color-brand-ink: #ffffff;

  /*index-img*/
  --index-main-vis:650px;
  
  /*Cnt-Header*/
  --page-main-vis:400px;
  

  /*backGround*/
  --bg-color-blk: #000;
  --bg-color-gry:#dce1e4;
  --bg-color-news:#e6e6e6;
  --bg-color-grd-1: linear-gradient(135deg, #0398f4, #0182d2);
  --bg-color-grd-2: linear-gradient(135deg, #007bc7, #52b7f6);
  --bg-color-grd-3: linear-gradient(-135deg, #007bc7, #52b7f6);

  /* surface */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-elev: #ffffff;
  --shadow-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 8px rgba(0,0,0,.04);

  /* text */
  --color-text: #222;
  --color-text-weak: #666;
  --color-text-white: #FFF;
  --color-text-red:#bc045a;
  --color-subColor-1:#b7e3fd;

  /* accent */
  --focus-color: #5b9dd9;

  /* spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  /* radius */
  --radius-1: .5rem;
  --radius-2: 1rem;

  /* breakpoints */
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* z-index */
  --z-header: 100;
  --z-modal: 1000;

  /* font */
  --font-h1:4rem;
  --font-h2:3rem;
  --font-h3:2.5rem;
  --font-h4:2rem;
  --font-h5:1.5rem;
  --font-h6:1rem;
}

/* Dark scheme */
/*@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0b0b0c;
    --color-surface: #141416;
    --color-elev: #1b1c1f;
    --color-text: #f5f6f7;
    --color-text-weak: #b7bcc2;
    --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 8px rgba(0,0,0,.3);
  }
}*/

/* Typography (fluid) */
html { font-size: clamp(15px, 1.2vw + .2rem, 18px); }
body {
  font-family: var(--font-family);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
}

main{
  position: relative;
}

section.bg-blk{
  background: var(--bg-color-blk);
  color: var(--color-text-white);
}
section.bg-gry{
  background: var(--bg-color-gry);
}
section.pd-0{
  padding-top: 0;
}

/* Layout helpers */
.container { width: min(1200px, 100%); margin-inline: auto; padding-inline: var(--space-3); }
.section { padding: 4rem 0; position: relative;}
.section-title { font-size: 1.6rem; font-weight: 700; }
.mt-3 { margin-top: var(--space-4); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.cluster { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; justify-content: center;}
.center { text-align: center; }

/* Grid utilities */
.grid { display: grid; gap: var(--space-3); }
.grid0 { display: grid; gap: 0; }
.cols-1 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (min-width: 768px) {
  .md-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .lg-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
  .xl-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .xl-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/*position*/
.posi-re{
  position: relative;
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1rem; border-radius: var(--radius-1); border: 1px solid transparent; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease; text-decoration: none; margin-top: 1.5rem; position: relative;text-align: center; min-width: 300px;}
/*.btn::before{
  content: '→';
   color: var(--color-subColor-1);
   margin-right: 4rem;
}*/
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--bg-color-grd-3); color: var(--color-brand-ink, #ffffff); }
.btn-primary:hover { filter: brightness(1.03); box-shadow: var(--shadow-1); }
.btn-ghost { background: transparent; border-color: var(--color-subColor-1); color: var(--color-subColor-1); }
.btn-ghost:hover { background: rgba(0,0,0,.06); }

/* Header */
.site-header { 
  position: sticky;
  top: 0;
  z-index: var(--z-header); 
  padding-top: 2rem;
}
.header-inner{ background: rgba(255, 255, 255, 0.8); display: grid; grid-template-columns: 1fr auto auto; align-items: center; /*gap: var(--space-3); min-height: 64px;*/ border-radius: 0.25rem; overflow: auto;}
.brand { display: inline-flex; gap: .5rem; align-items: center; font-weight: 700; }

.brand-logo {
  position: absolute;
  object-fit: cover; border-radius: .25rem; }

.brand-name { 
  margin-left: 6.5rem;
  font-size: 1.4rem; 
  display: none;
  line-height: 1.05;
  font-weight: bold;
}
.brand-name span{
  display: block;
  font-size: 0.8rem;
  opacity: .6;
  padding-left: .3rem;
}

.container.header-inner{
  padding-inline: inherit;
}
@media (min-width: 768px) { .brand-name { display: inline; } }

/* Nav (desktop) */
.nav { display: none; }
.nav-list { list-style: none; display: flex; gap: var(--space-1); }
.nav-list a { padding: 1rem;  font-size: .86rem;font-weight: bold;display: block;}
.nav-list a:hover { background: rgba(0,0,0,.05); }
.nav-list .Contact-btn a{
  background: var(--bg-color-grd-1);
  color:var(--color-text-white) ;
  padding: 1rem 1.5rem 1rem 3rem;
  position: relative;
}
.nav-list .Contact-btn a::before{
  content: '';
  position: absolute;
  background-image: url(./img/icon-mail.png);
  background-repeat: no-repeat;
  width: 25px;
  height: 17px;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 15px;
}
@media (min-width: 768px) { .nav { display: block; } }

/* Hamburger */
.nav-toggle { display: inline-flex; flex-direction: column; gap: 4px; width: 40px; height: 40px; padding: 10px 8px 8px 8px; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; background: var(--color-surface, #ffffff); margin-right: 10px;}
.nav-toggle span { display: block; height: 3px; width: 100%; background: var(--color-brand); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
@media (min-width: 768px) { .nav-toggle { display: none; } }
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity: 0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Drawer (mobile nav) */
@media (max-width: 767.98px) {
  .nav { display: block; position: fixed; z-index: var(--z-header); inset: 64px 0 auto 0; background: var(--color-surface, #ffffff); border-top: 1px solid rgba(0,0,0,.06); transform: translateY(-10px); opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease; padding: var(--space-3); }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-list { flex-direction: column; gap: .5rem; }
  .nav-list a { padding: .8rem 1rem; border-radius: .6rem; }
}

/* Hero */
.hero { background: linear-gradient(180deg, rgba(215,40,76,.12), transparent); padding: 4rem 0; }
.hero-title { font-size: clamp(1.6rem, 1.2rem + 2.4vw, 3rem); line-height: 1.2; }
.hero-lead { color: var(--color-text-weak); max-width: 60ch; }

/* Cards */
.card { background: var(--color-elev); border-radius: var(--radius-2); box-shadow: var(--shadow-1); overflow: clip; }
.card-media { aspect-ratio: 16 / 9; object-fit: cover; }
.card-body { padding: var(--space-4); }
.card-title { font-size: 1.1rem; font-weight: 700; }
.card-text { color: var(--color-text-weak); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in-view { opacity: 1; transform: none; }

/* Form */
.form { background: var(--color-elev); border-radius: var(--radius-2); box-shadow: var(--shadow-1); padding: var(--space-5); }
.field { display: grid; gap: .4rem; margin-bottom: var(--space-4); }
.label { font-weight: 700; }
.req { color: var(--color-brand); }
.input { width: 100%; padding: .7rem .9rem; border: 1px solid rgba(0,0,0,.12); border-radius: .6rem; background: var(--color-surface, #ffffff); color: var(--color-text); }
.input:focus { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198,40,40,.15); }
.help { color: var(--color-text-weak); font-size: .9rem; }
.error { color: #c62828; min-height: 1.25em; }
.checkbox { display: inline-flex; align-items: center; gap: .5rem; }
.form-result { margin-top: var(--space-3); font-weight: 700; }

/* Tabs */
.tabs { background: var(--color-elev); border-radius: var(--radius-2); box-shadow: var(--shadow-1); }
.tablist { display: flex; gap: .25rem; padding: .25rem; border-bottom: 1px solid rgba(0,0,0,.08); overflow-x: auto; }
.tab { appearance: none; border: none; padding: .7rem 1rem; background: transparent; border-radius: .6rem .6rem 0 0; font-weight: 700; cursor: pointer; }
.tab[aria-selected="true"] { background: rgba(0,0,0,.06); }
.tabpanel { padding: var(--space-4); }

/* Accordion */
.acc-item { background: var(--color-elev); border-radius: var(--radius-2); box-shadow: var(--shadow-1); }
.acc-item + .acc-item { margin-top: var(--space-3); }
.acc-trigger { appearance: none; border: none; width: 100%; text-align: left; padding: 1rem 1.25rem; background: transparent; font-weight: 700; cursor: pointer; }
.acc-panel { padding: 0 1.25rem 1rem; }
.acc-trigger[aria-expanded="true"] { background: rgba(0,0,0,.06); }

/* Modal */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: var(--z-modal); }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal-dialog {
  position: relative;
  margin: 5vh auto;
  background: var(--color-elev);
  width: min(720px, 92%);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  outline: none;

  /* 高さ制限を入れてスクロール可能にする */
  max-height: 90vh;   /* ブラウザ高さの90%まで */
  display: flex;
  flex-direction: column;
}

.modal-header, .modal-footer { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0,0,0,.06); }
.modal-footer { border-top: 1px solid rgba(0,0,0,.06); border-bottom: none; text-align: right; }
.modal-body { padding: 1rem 1.25rem; padding: 1rem 1.25rem; overflow-y: auto;}
.modal-close { appearance: none; border: none; background: transparent; font-size: 1.2rem; cursor: pointer; }
.modal-body img{
  width: 100%;
}
/* Footer */
.site-footer { background: var(--bg-color-grd-2); padding:3rem 0 2rem;}
.footer-inner { display: flex; justify-content: center; align-items: center;}
.adTxt{
  font-size: 0.7rem;
    font-weight: bold;
    line-height: 1.2;
}
  .site-footer .header-inner{
    grid-template-columns: 1fr 1.75fr auto auto;
  }
  .site-footer .container small{
    display: block;
    text-align: center;
    padding-top: 1rem;
    font-weight: bold;
    margin: auto;
  }

/* Skip link */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: static; width: auto; height: auto; padding: .5rem 1rem; background: var(--color-brand); color: var(--color-brand-ink, #ffffff); border-radius: .5rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-brand);
  color: var(--color-brand-ink, #ffffff);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .2s ease;
  z-index: var(--z-modal);
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: scale(1.05); }

/*トップページ*/

.index-back {
  position: absolute;
  top: 0;
  width: 100%;
  min-height: calc(var(--index-main-vis) + 98px);
  z-index: -1;

  background-image: url(./img/back-main.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;  /* ← 初期は上端 */
  animation: indexBackPan 2.5s ease-out forwards; /* 好きな時間に調整 */
}

@keyframes indexBackPan {
  from { background-position: center top; }
  to   { background-position: center bottom; } /* ← 下端で停止 */
}


.index-copy{
  display: grid;
  align-items: center;
    min-height: var(--index-main-vis);
    padding-bottom: 97px;
}
  .index-copy .container{
    text-align: center;
  }
  .index-copy .container img{
    margin: auto;
  }
  .index-copy .container h2{
    font-size: var(--font-h2);
      font-weight: bold;
      line-height: 1.2;
  }
  .index-copy .container P{
    font-weight: bold;
      color: var(--color-subColor-1);
  }

#Product .container{
  padding-top: 3rem;
}

#News .container .Case .CntArea{
  background: var(--bg-color-gry);
}
#News .container .News .CntArea{
  background: var(--bg-color-news);
  color: var(--color-text);
}
#News .container .CntArea{
  padding: 2rem;
}

#News .container .Case,
#News .container .News{
  padding-top: 3rem;
}
#News .container .Case.posi-re .TtlArea{
  left: 0;
}

#News .container .News dl dd{
  border-bottom: 1px solid var(--color-brand);
  padding: 0.5rem;
  display: block;
  width: 100%;
}
#News .container .News dl dd span{
  color: var(--color-brand);
  font-size: 0.86rem;
}

#News .container .Case .CntArea,
#News .container .News .CntArea {
  min-height: 30rem;
}

/*Imgカード*/
.card-img li{
  position: relative;
}
.card-img li::after{
  content: "";
  position: absolute;
  inset: 0; /* 全面に配置 */
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
  z-index: 1;
  pointer-events: none;
}
  .card-img dl{
    position: absolute;
    bottom: 0;
    padding: 0.5rem 0.25rem;
    text-align: left;
    z-index: 2;
  }
  .card-img dl dt{
    font-size: var(--font-h1);
    font-weight: bold;
    line-height: 1.1;
  }
  .card-img dl dd{
    margin-left: 0.25rem;
    font-weight: bold;
  }

.card-case li{
  background: var(--color-bg);
    padding: 0.25rem;
    border-radius: 0.25rem;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.05);
}

.card-case li dd{
  padding: 0.5rem;
}

.card-case li dd h3{
  text-align: center;
}

.card-case li dd P{
  font-size: 1rem;
}

.card-case li dd span{
  font-size: 1.4rem;
    color: var(--color-text-red);
    font-weight: bold;
}

.link-Pointer{
  cursor: pointer;
}
  .link-Pointer dt{
    height: 245px;
      overflow: hidden;
  }
  /*タイトル*/
  .TtlArea{
    grid-template-columns: repeat(2, auto auto);
    align-items: start;
    padding-bottom: 2rem;
    position: relative;
  }
    .posi-re .TtlArea{
      position: absolute;
      right: 0;
      top:0;
    }
  section.bg-blk .TtlArea{
    color: var(--color-subColor-1);
  }

.TtlArea .Enttl{
  color: var(--color-text-white);
    font-size: var(--font-h3);
    background: var(--bg-color-grd-2);
    font-weight: bold;
    width: fit-content;
      padding: 0 1rem;
      margin-top: 0.5rem;
      position: relative;
      z-index: 1;
}

/* ライン左伸びアニメーション */
.line-l { position: relative; }

/* 初期状態：0%（左基点で縮小） */
.line-l::after{
  content: "";
  position: absolute;
  left: 0;                /* ← 画面左から */
  top: 6.5rem;            /* 既存指定 */
  width: 100%;
  height: 2px;
  background-color: var(--color-subColor-1);
  transform-origin: left; /* 左端を基点に伸ばす */
  transform: scaleX(0);
  transition: transform 2s ease; /* 伸びる速度 */
}

#Product.line-l::after{
  top:3rem;
  transform-origin: right; 
}

  .pd-0.line-l::after{
    top:3rem;
  }

.LinRight.line-l::after{
  transform-origin: right;
}

/* ビューインしたら100%まで伸ばす */
.line-l.in-view::after{
  transform: scaleX(0.5);
}
.home #Topics.line-l.in-view::after{
  transform: scaleX(0.4);
}

#Product.line-l.in-view::after,
#Recruit.line-l.in-view::after{
  transform: scaleX(0.3);
}

.LinRight.line-l.in-view::after{
  transform: scaleX(0.5);
}

/* お好みでディレイ（段階的に伸ばしたい要素に付与） */
.line-l.delay-1::after { transition-delay: .15s; }
.line-l.delay-2::after { transition-delay: .3s; }

/* アニメーション苦手設定の配慮（省略可） */
@media (prefers-reduced-motion: reduce){
  .line-l::after{ transition: none; transform: scaleX(1); }
}

/*ページヘッダー*/

.Cnt-header-img{
  position: absolute;
  top: 0;
  width: 100%;
  height: var(--page-main-vis);
  overflow: hidden;
  z-index: -1;
}

/* 画像をコンテナにフィットさせ、上→下へパン */
.Cnt-header-img img{
  width: 100%;
  height: 100%;                /* ← 高さもコンテナに合わせる */
  display: block;
  object-fit: cover;           /* アスペクト維持で拡大・トリミング */
  object-position: center top; /* 初期は上端を見せる */
  animation: headerPan 2s ease-out forwards;
}

@keyframes headerPan{
  from { object-position: center top; }
  to   { object-position: center bottom; } /* 下端で止める */
}

.Cnt-header{
  min-height: calc(var(--page-main-vis) - 98px);
    position: relative;
}

.pageTtl{
  background: var(--bg-color-grd-2);
  padding: 0 1rem;
  position: absolute;
    bottom: 0;
    width: 100%;
}
.pageTtl P{
  font-size: 2.4rem;
  color: var(--color-text-white);
  font-weight: bold;
}
.pageTtl h1{
  font-size: 1.2rem;
  color: var(--color-subColor-1);
  font-weight: bold;
}
  .pageTtl .grid{
    align-items: center;
  }
  .pageTtl .cols-2{
    grid-template-columns: repeat(2, auto 1fr);
  }

/*会社概要*/

.Cnt-Table .grid0{
  align-items: start;
}
.Cnt-Table .cols-2{
  grid-template-columns: repeat(2, 30% 70%);
}

.map iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.Recruite-dit{
  border: 1px solid var(--bg-color-gry);
  border-radius: 0.25rem;
  padding: 2rem;
  margin: 2rem;
}

#Recruit .TtlArea.cols-2{
  grid-template-columns: repeat(2, auto 1fr);
}

/*スライダー*/

#Topics .card-case{
  color: var(--color-text);
}

/* === Topics slider: horizontal motion === */
.topics-slider { position: relative; overflow: hidden; }
.topics-slider .slides {
  display: flex;
  will-change: transform;
  transition: transform .45s ease; /* ← アニメーション */
}
.topics-slider .slide {
  flex: 0 0 100%;        /* ビューポート幅ぶんを1枚とする */
  max-width: 100%;
}
.topics-slider img { display: block; width: 100%; height: auto; }

.topics-slider .nav { position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(0,0,0,.4); color:#fff; padding:.4rem .6rem; cursor:pointer; }
.topics-slider .nav.prev { left:.5rem; }
.topics-slider .nav.next { right:.5rem; }
.topics-slider .dots { display:flex; gap:.4rem; justify-content:center; margin-top:.5rem; }
.topics-slider .dots button { width:.6rem; height:.6rem; border-radius:50%; border:0; background:#ccc; cursor:pointer; }
.topics-slider .dots button.is-active { background:#333; }

.news-dit{
    background: var(--color-elev);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    padding: var(--space-5);
}

.topics_none{
  padding: 1rem;
  width: 100%;
    background: var(--bg-color-blk);
}

/* ======================================================
   Responsive layout
   ====================================================== */

/* === スマホ（〜768px） === */
@media screen and (max-width: 767.98px) { 
  .brand-logo {
    width: 20%;
    left: 10px;
  }

  .header-inner{
    background: inherit;
  }
    .site-footer .header-inner {
        display: block;
        text-align: center;
    }
  .site-footer .header-inner .brand-logo {
    left: 0;
    right: 0;
    margin: auto;
  }
    .site-footer .header-inner .adTxt{
      padding-top: 3rem;
    }
  /* 全体の余白をやや詰める */
  .container {
    padding-inline: 1rem;
  }

  /* flex / grid 系は縦並びに */
  .cluster,
  .TtlArea,
  .grid,
  .cols-2,
  .cols-3,
  .cols-4,
  .cols-5 {
    display: block;
  }
  .pageTtl{
    padding: 1rem 0;
  }
  .pageTtl .cols-2{
    display: grid;
  }
    .TtlArea.cols-2{
      display: inline-flex;
    }
    .posi-re .TtlArea{
      position: inherit;
      right: inherit;
      flex-direction: row-reverse;
    }
    #News .container .Case.posi-re .TtlArea {
      flex-direction: row;
    }
    #Product.line-l::after {
      top: 5.5rem;
      transform-origin: left;
    }
  /* ニュース一覧（1列表示） */
  #News .container .News dl dd {
    display: block;
    width: 100%;
    padding: 0.75rem 0;
  }
  #News .container .News dl dd span {
    display: block;
    margin-bottom: .3rem;
  }

  /* 画像やカード */
  .card-case li {
    width: 100%;
    margin-bottom: 1rem;
  }

  .grid0.cols-4.card-img{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

  /* ページタイトルなど */
  .pageTtl p {
    font-size: 1.8rem;
  }
  .pageTtl h1 {
    font-size: 1rem;
  }
  
  /* ボタンの幅調整 */
  .btn {
    width: auto;
    justify-content: center;
  }

  /* テーブルを縦積み */
  .Cnt-Table .grid0,
  .Cnt-Table .cols-2 {
    display: block;
  }
  .Cnt-Table .cols-2 > * {
    width: 100%;
  }

  /* 見出しエリアなど */
  .TtlArea {
    padding-bottom: 1rem;
  }
  .TtlArea .Enttl {
    font-size: 1.6rem;
  }

  /* スライダーや画像カードを全幅に */
  .topics-slider .slide {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* indexコピーなど */
  .index-copy .container h2 {
    font-size: 2rem;
  }
  .index-copy .container p {
    font-size: 1rem;
  }

  #News .container .Case .CntArea,
  #News .container .News .CntArea {
    min-height: inherit;
  }
  .Cnt-Table .cols-2{
    display: grid;
  }
  .LinRight.line-l::after {
    transform-origin: left;
  }
  #Woks2 ul.cols-2,
  #Woks4 ul.cols-2{
    grid-template-columns: repeat(1, 1fr);
    flex-direction: column-reverse;
    display: flex;
  }
  #Woks2 ul.cols-2 li,
  #Woks4 ul.cols-2 li{
    width: 100%;
  }
  .Recruite-dit {
    padding: 1rem;
    margin: 1rem 0;
  }
}

/* === タブレット〜PC（769px以上） === */
@media screen and (min-width: 768px) {
  .brand-logo {
    width: 100px;
  }
  .site-footer .brand-name{
    display: none;
  }
  .TtlArea .Enttl {
    font-size: 1.92rem;
  }
  /* PCの基本構成を維持、特別な調整不要 */
  .footer-inner {
    display: flex;
  }
}