/* クラス名を実名に、weight は数値に */
.inter-thin{
  font-family: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-weight: 200;
  font-optical-sizing: auto;        /* あってOK（可変軸があれば効く） */
  font-style: normal;
  font-synthesis-weight: none;      /* 擬似ボールド防止（任意） */
  font-variation-settings: "wght" 200; /* 任意の保険 */
}

html, body {
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100%;
}

/* 枠：そのまま全画面。余白が出たら白に見えるよう背景を白に */

.catchphrase {

    font-weight: bold;
    white-space: nowrap;
    font-family: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN",
               "Noto Serif JP", "MS PMincho", serif;
    
}


/* ? 用フォント（外側は従来どおり translate のアニメ対象でOK） */
.catchphrase .hannari-mark{
  font-family: 'Hannari','Yu Mincho','Hiragino Mincho ProN',
               'Noto Serif JP','MS PMincho',serif;
  display: inline-block;
  font-weight: 400;
}

/* ? の内側：アニメを外し、必ず表示＋回転させる */
.catchphrase .tilt-q{
  display:inline-block;
  animation: none;              /* transformアニメ無効 */
  opacity: 1;                   /* ← 初期opacity:0 を打ち消す */
  transform: rotate(10deg);     /* 角度は調整可 */
  transform-origin: 50% 75%;
}
.hero-message{
  position: absolute;
    top: 84%;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 1em;
    font-weight: 600;
    font-family: "A P-OTF 秀英明朝 Pr6N", "A-OTF Shuei Mincho Pr6N",
               "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
.hero-message-sp{
  position: absolute;
    top: 84%;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 1em;
    font-weight: 600;
    font-family: "A P-OTF 秀英明朝 Pr6N", "A-OTF Shuei Mincho Pr6N",
               "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
               position: static;
    transform: none;
    width: auto;
    margin-top: 10px;
}

span.em-word{
  font-size: 1.4em;
}
span.em-word-sp{
  font-size: 1.4em;
}

/* ヒーロー枠（そのまま全画面） */
.hero-area.hero--vh{
  position: relative;
  width: 100%;
  height: 900px;            /* 100vh でもOK。iOSは svh が安定 */
  overflow: hidden;
  background: #fff;          /* 縁に出る帯の色 */
  --hero-shift: 0px;         /* ← 下を多く見せたい時は 24px 等に */
}

/* 動画：枠いっぱいに配置して“見た目だけ”縮小 */
.hero--vh .hero-video{
  position: absolute;
  /* 1pxオーバースキャンで細い線を防ぐ＋上方向へ任意にシフト */
  top: calc(-1px - var(--hero-shift));
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px + var(--hero-shift));

  display: block;
  object-fit: cover;         /* 端までピッタリ（トリミングあり） */
  transform: scale(var(--hero-zoom));
}

video {
  position: absolute;
  inset: -1px;
}


.hero-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 100%; /* 下寄せ（中央なら 50% 50%） */
  z-index: 0;
}

/* ▼ 下端固定のオーバーレイ（動画の上に重ねる） */
.hero-overlay{
  position: absolute;
  left: 0; right: 0;
  bottom: max(0px, env(safe-area-inset-bottom)); /* iOS 安全域 */
  z-index: 2;

  display: flex;
  justify-content: center;   /* ← 中央に配置 */
  align-items: flex-end;     /* 下端に寄せる（任意） */
 
}
.hero-overlay-sp{
  position: absolute;
  left: 0; right: 0;
  bottom: max(0px, env(safe-area-inset-bottom)); /* iOS 安全域 */
  z-index: 2;

  display: flex;
  justify-content: center;   /* ← 中央に配置 */
  align-items: flex-end;     /* 下端に寄せる（任意） */
 
}
.hero-overlay__inner{
  margin: 0 auto;
  text-align: center;
}

/* 以降、テキストは“通常フロー”でレイアウト（絶対配置はやめる） */
.catchphrase{
  position: static;          /* ← 既存の position/top/left/transform を無効化 */
  transform: none;
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 4.5em;
  line-height: 1.15;
  color:#111;
  font-family: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN",
               "Noto Serif JP", "MS PMincho", serif;
}
.hero-message{
  position: static;          /* ← 既存の absolute を無効化 */
  transform: none;
  width: auto;
  margin-top: 10px;
}




.hero-video{
  position: absolute;
  /* 1pxオーバースキャン＋上方向へシフト */
  top: calc(-1px - var(--hero-shift));
  left: -1px;
  width: calc(100% + 2px);
  height: calc(80% + 2px + var(--hero-shift));

  object-fit: cover;
  object-position: 50% 50%;   /* 基準は中央（下寄せにしたければ 50% 100%） */
  display: block;
}









/* 初期は非表示（レイアウトは保持） */
.section-title,
.section-number,
.summary-item01 h3,
.summary-item02 h3,
.service-area01 h4,
.service-box01 h4,
.service-box02 h4,
.service-box03 h4,
.service-box04 h4,
.service-box05 h4
 {
  visibility: hidden;
}

/* 1文字アニメーション（0.6s固定） */
.section-title span,
.section-number span,
.summary-item01 h3 span,
.summary-item02 h3 span,
.service-area01 h4 span,
.service-box01 h4 span,
.service-box02 h4 span,
.service-box03 h4 span,
.service-box04 h4 span,
.service-box05 h4 span
{
  opacity: 0;
  display: inline-block;
  transform: translate(-10px, 14px); /* 左＆下から */
  animation: riseFromLeft 0.6s ease-out forwards;
}

@keyframes riseFromLeft {
  0%   { opacity: 0; transform: translate(-10px, 14px); }
  100% { opacity: 1; transform: translate(0, 0); }
}




/* 親を基準にする（z-indexは付けない） */
.history-section{
  position: relative;
  text-align: center;
  margin-top: 20em;
}

/* ── 最背面にしたい2枚 ───────────────── */
.history-image,
.history-image02{
  position: absolute;
  z-index: 0;            /* ← ここが“背面レイヤ” */
  pointer-events: none;  /* クリックを邪魔しない */
}
.history-image{
  top: 25%;
    left: 5%;
}
.history-image img{ width: 35vw; display:block; }

.history-image02{
  left: 61%;
    top: -20%;
  /* width 指定は不要。img 側で%指定してOK */
}
.history-image02 img{ width: 35vw; display:block; }

/* ── 前面に出したい要素（人物・見出し・ボタン・説明）── */
.person-image img,
.person-image02 img,
.history-title,
.special-button,
.description{
  position: relative;  /* または absolute のままでも可 */
  z-index: 1;          /* 背景(0)より手前に出す */
}

/* 既存の人物配置はそのまま生かす */
.person-image img{
  width: 10vw!important;
  position: absolute;
  left: 10%;
  top: -20%;
  z-index: 3;
}
.person-image02 img{
  width: 10vw!important;
  position: absolute;
  left: 80%;
  top: 72%;
  z-index: 3;
   transform: scaleX(-1);
}

.person-image-new01 img{
  width: 10vw!important;
    position: absolute;
    left: 72%;
    top: -40%;
    z-index: 3;
}

.history-title2{
width:28%;
}

@media screen and (max-width:344px) {
.button1{width: 50%;
position: relative;
bottom: 115px!important;
margin-left: 25%;}
}

@media screen and (min-width:400px) and (max-width:470px) {
.button1{width: 50%;
position: relative;
bottom:56px!important;
margin-left: 25%;}
}

@media screen and (max-width:767px) {
.history-title2{
width:47%;
}

.pc{display:none;}

.button1{width: 50%;
position: relative;
bottom: 80px;
margin-left: 25%;}

.description{
margin-top: 2em!important;
font-size: 0.7em!important;
}

.service-section {
border-top: 0px solid #ccc!important;
}

.special-button {
width: 50%!important;}
.history-image img {
width: 70vw;}

.history-image02 img {
width: 70vw;}
.history-image02 {
left: 37%;
top: -65%;
}

.history-image {
top: 65%;
left: 1%;
}

.history-section {
margin-top: 12em!important;
margin-bottom: 4em;
}

.person-image-new01 img {
left: 74%;
top: -73%;
}
}

.history-title {
    font-weight: 200 !important;
    line-height: 1;
    font-size: 10vw;
    font-family: "Inter", "Helvetica Neue", "Arial", "system-ui", "sans-serif";
    font-weight: 200;
    margin: 30px;
}


.special-button {
  display: flex;
    align-items: center;
    gap: 7vw;
    background-size: 6px 6px;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #ffffff;
    font-size: 2vw;
    width: 25%;
    margin: 0 auto;
}

.history-btn{
width: 100%;
}

.special-button span {
  white-space: nowrap;
  font-family:
    "Hiragino Sans",               /* 新しめのmacOS */
    "Hiragino Kaku Gothic ProN",   /* 旧名称 */
    "Hiragino Kaku Gothic Pro",
    "Yu Gothic", "Meiryo",         /* Windows フォールバック */
    "Noto Sans JP",                 /* 汎用Webフォント */
    sans-serif;
}

.special-button .line {
  flex-grow: 1;
  height: 0.05em;
  background-color: #ffffff;
  min-width: 1vw;
  max-width: 5vw;
}
.description{
margin-top: 2em;
padding-bottom: 8em;
font-family: "Yu Gothic", "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
font-weight: 500;
font-size: 1em;
}

.description.show,
 .summary-item01 p.show,
 .summary-item02 p.show,
 img.section-text-E.show,
 .service-area01 img.show,
 .service-box01 img.show,
 .service-box02 img.show,
 .service-box03 img.show,
 .service-box04 img.show,
 .service-box05 img.show,
 img.works-w.show,
 .number--text.show,
 .works-description.show,
 img.news-text-ws.show,
 .news-list.show,
 .magnifier.show,.history-title2.show
 {
    opacity: 1;
    transform: translateY(0);
}

.description,
.summary-item01 p,
.summary-item02 p,
.service-area01 img,
.service-box01 img,
 .service-box02 img,
 .service-box03 img,
 .service-box04 img,
 .service-box05 img,
.number--text,
.works-description,
.news-list,
.magnifier,.history-title2 {
  opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

img.section-text-E,
 img.works-w,
  img.news-text-ws{
  opacity: 0;
 transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

@keyframes fadeInUpAll {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}




.service-section{
    padding-top: 12em;
    border-top: 1px solid #ccc;
    position: relative;

}
.person-image03 img{
 width: 10vw!important;
    position: absolute;
    left: 57%;
    top: 5%;
}


/* セクション〜画像の箱は上にはみ出せるように */
.service-section-02,
.service-section-02 .service-visual,
.service-section-02 .service-image--overlay{
  overflow: visible !important;
}

/* 画像の箱を基準点にする */
.service-image--overlay{
  position: relative;
  display: block;
  line-height: 0;
}
.service-image__bg,
.service-image > img{
  display: block;
  width: 100%;
  height: auto;
}

/* ← オーバーレイ（自転車など）ここが主役 */
.overlay{
  position: absolute;
  z-index: 3;
  pointer-events: none;

  /* グローバルの img { width:100% } を打ち消す */
   width: 10vw!important;
  height: auto !important;
  max-width: none !important;
}

/* きれいに“画像の上端”に乗せる（Xだけ％で調整） */
.overlay--bike{
  /* 好みで位置調整（0〜100：左→右） */
  --x: 90;
  --lift: 95%;                 /* 上にどれだけ浮かせるか（%は自分の高さ基準） */

  left: calc(var(--x) * 1%);
  top: 0;
  transform: translate(-50%, calc(-1 * var(--lift)));
}

.section-header{
    display: flex;
    align-items: baseline;
    margin-left: 48px;
    gap: 2em;
    margin-bottom: 1em;
    position: relative;            /* ← 絶対配置の基準にする */
    white-space: nowrap;
}



img.section-text {
  width: 30%;   /* 画像サイズを変える */
 
}

img.section-text-E {
width: 20%;
    position: absolute;
    left: 25%;
    bottom: 25%;
}

.section-number{
   font-size: 1.2em;
   font-family: "Inter", "Helvetica Neue", "Arial", "system-ui", "sans-serif";
}






























.service-image {
  overflow: hidden;
}

.service-image img {
  object-position: center 88%;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}


.service-summary{
    display: flex;
    justify-content: center;
    gap: 5em;
    margin-top: 8em;
    margin-bottom: 9em;
}
.person-image04 img{
 width: 10vw!important;
    position: absolute;
    left: 11%;
    top: 60%;
}

.person-image05 img{
  width: 10vw!important;
    position: absolute;
    left: 80%;
    top: 69%;
}
.person-image-new03 img{
  width: 10vw!important;
    position: absolute;
    left: 90%;
    top: 64%;

}
.person-image06 img{
   width: 10vw!important;
    position: absolute;
    left: 18%;
    top: 106%;
}
.person-image07 img {
    width: 10vw!important;
    position: absolute;
    left: 48%;
    top: 111%;
}
.person-image-new04 img{
  width: 10vw!important;
    position: absolute;
   left: 88%;
    top: 120%;
    
}

.summary-item01,
.summary-item02{
    width: 26%;
}
.summary-item01 h3,
.summary-item02 h3{
    font-size: 1.3em;
    font-family: "Yu Gothic", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "Meiryo", sans-serif;
    font-weight: 700;
    margin: 0;
}
.summary-item01 p,
 .summary-item02 p{
  line-height: 2em;
  font-size: 1em;
  opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    margin: 0;
    font-family: "Yu Gothic","YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "Meiryo", sans-serif;
    font-weight: 500;
  margin-top: 1em;
}
.service-list{
    display: flex;
    justify-content: center;
    gap: 0.5em;
    margin-top: 2em;
    font-size: 0.9em;
}


.service-box01,
.service-box02,
.service-box03,
.service-box04,
.service-box05{
    border-left: 1px solid #ccc;
    text-align: center;
    border-right: 1px solid #ccc;
    width: 18%;
    position: relative;
    padding: 0 1em;
}


/* 最初のボックス（左端）の左線を消す */
.service-box01 {
  border-left: none;
}

/* 最後のボックス（右端）の右線を消す */
.service-box05 {
  border-right: none;
}
.service-box01 .number01 {
 position: absolute;
    top: 2%;
    left: 38%;
    font-size: 1em;
    background: transparent;
    font-family: "Yu Gothic", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "Meiryo", sans-serif;
    font-weight: 700;
}
.service-box02 .number02 {
  position: absolute;
    top: 2%;
    left: 30%;
    font-size: 1em;
   font-family: "Yu Gothic", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "Meiryo", sans-serif;
    font-weight: 700;
    background: transparent;
}
.service-box03 .number03 {
  position: absolute;
  top: 2%;
    left: 30%;
    font-size: 1em;
   font-family: "Yu Gothic", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "Meiryo", sans-serif;
    font-weight: 700;
    background: transparent;
}
.service-box04 .number04 {
 position: absolute;
  top: 2%;
    left: 30%;
    font-size: 1em;
   font-family: "Yu Gothic", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "Meiryo", sans-serif;
    font-weight: 700;
    background: transparent;
}
.service-box05 .number05 {
 position: absolute;
    top: 2%;
    left: 38%;
    font-size: 1em;
    background: transparent;
    font-family: "Yu Gothic", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "Meiryo", sans-serif;
    font-weight: 700;
}

.icon img{
    width: 75%;
} 
.service-box01 h4,
.service-box02 h4,
.service-box03 h4,
.service-box04 h4,
.service-box05 h4{
  font-size: 1.3em;
    font-family: "Yu Gothic", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "Meiryo", sans-serif;
    font-weight: 700;
    margin-bottom: 0em;
}
.service-box01 p,
 .service-box02 p,
 .service-box03 p,
 .service-box04 p,
 .service-box05 p{
 text-align: left;
    font-family: "Yu Gothic", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "Meiryo", sans-serif;
    font-weight: 500;
    font-size: 1em;
}



.service-list > div{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

/* 表示状態 */
.service-list > div.show{
  opacity: 1;
  transform: none;
}


.works-description{color:#000;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 2em;
    margin-top: 5em;
    font-family: var(--font-ja);
    width: 100%;}



.number--text{
      width: fit-content;        /* テキストの幅に縮める */
  margin-left: auto;         /* 左右中央に配置 */
  margin-right: auto;
  text-align: left;  
  line-height: 2em;
}


.works-section{
    margin-top: 15em;
}
.works-buildin{
width: 45%;
position: relative;
z-index: 10;
}
.works-image{
  display: flex;
  min-width:0;
  background: url(images/top__久原本家天神ビル切り抜き.png);
  background-size: cover;                /* 親も縮め可 */
}

.button1pc{
  position: absolute;
  width: 30%;
  bottom: 10%;
}

@media screen and (max-width:767px){
.works-image{
  display: flex;
  min-width:0;
  background: url(images/top__久原本家天神ビル切り抜き_sp.png) no-repeat;
  background-size: 100%;
  height: 450px;          /* 親も縮め可 */
}
.works-description{display:none;}
.works-button {display:none!important;}
}

.works-section {
  width: 100%;
  overflow: hidden;
}

.works-container {
  width: 100%;
  position: relative;
}
.works-text{
margin-top: 10em;
    margin-left: 9em;
    width: 30%;
    color: #fff;
     min-width: 0;
}
.works-title{
position: relative;
margin-bottom: 4em;
}

img.works-text-img {
width: 25vw;
}

img.works-w{
width: 20vw;
    position: absolute;
    top: -8.2vw;
    left: -15.5vw;
}
.works-description{
    line-height: 2em;
    font-family: var(--font-ja);
    margin-top: 2em;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.works-button{
    display: flex;
    align-items: center;
    gap: 2.5em;
    /* background-image: radial-gradient(circle, #8b8b8b 1px, transparent 1px); */
    background-size: 6px 6px;
    /* padding: 1em 2em; */
    text-decoration: none;
    color: #fff;
    font-size: 1.5em;
    margin-top: 4em;
    white-space: nowrap;
    margin-bottom: 2em;
    font-family: var(--font-ja);
    width: 100%;
}















.works-image{

  min-width:0;                /* 親も縮め可 */
}
img.works-building{
  flex:0 0 45%;               /* 左カラムは45%固定 */
  max-width:45%;
  height:auto;
  min-width:0;
}
.works-text{
    flex: 0 1 30%;  /* basis:30%、必要なら縮む */
  min-width: 0;
  color:#fff;
  /* 既存の margin/top/left は必要に応じて調整 */
}
.works-description{
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:2em;
  margin-top:2em;
  font-family:var(--font-ja);
}









.works-button .line {
  flex-grow: 1;
  height: 0.075em;
  background-color: #5c5c5c;
  min-width: 20px;
    max-width: 100px;
}

.news-section{
  margin-top: 15em;
  position: relative;
}
.person-image08 img{
width: 7vw!important;
    position: absolute;
    left: 85%;
    top: -30%;
}

.person-image09 img{
 width: 10vw!important;
    position: absolute;
    left: 2%;
    top: -30%;
    transform: scaleX(-1);
}
.person-image10 img{
  width: 10vw!important;
    position: absolute;
    left: 84%;
    top: 75%;
}

.person-image-new05 img{
  width: 10vw!important;
    position: absolute;
    left: 40%;
    top: -20%;
}
.person-image-new06 img{
  width: 10vw!important;
    position: absolute;
    left: 10%;
    top: 80%;
}


img.news-text{
width: 13vw;
    margin-left: 8vw;
}

 img.news-text-ws {
width: 20vw;
    position: absolute;
    top: -7.5vw;
    left: 16.5vw;
}

.news-list {
  list-style: none;
  padding: 0;
  margin-top: 5em;
}
.news-list li {
  display: flex;
  padding: 1.5em 0 0.2em 0;
  border-bottom: 1px solid #ccc;
  font-size: 1em;
  gap: 5em;
  align-items: baseline;
}
.news-date{
  margin-left: 5em;
  font-size: 1.4em;
  white-space: nowrap;
  font-family: "Yu Gothic", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "Meiryo", sans-serif;
    font-weight: 500;
}
.news-text a {
  color: #221911;         
  text-decoration: none;    /* 下線を削除 */
  font-family: "Yu Gothic", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "Meiryo", sans-serif;
    font-weight: 700;
}
.news-button01{
width: 25vw;
    margin-left: 37.5vw;
    margin-top: 4em;
    margin-bottom: 5em;
}
.news-button .line {
  flex-grow: 1;
  height: 0.075em;
  background-color: #5c5c5c;
  min-width: 20px;
    max-width: 70px;
}


.header-area {
    margin-top: 0.5em;
}


.sp-text01{
  margin-bottom: 0.7em;
}
.sp-text02{
  margin-bottom: 0.7em;
}
.sp-text03{

  margin-top: 0.7em;
}

/* 1600px以上*/
@media (min-width:1600px){
  .history-section {
    position: relative;
    text-align: center;
    margin-top: 25em;
}


}



/* レスポンシブ1281~1599.98 */
@media (min-width: 1281px) and (max-width: 1599.98px) {
  
  
  .history-section {
    position: relative;
    text-align: center;
    margin-top: 25em;
}
  .hero-area.hero--vh {
    height: 1100px;
}

}


/* レスポンシブ1280以上 */
@media (min-width: 1280px){
  .catchphrase {
    font-size: 3em;
}
  .hero-message {
    
    font-size: 0.8em;
}
   .hero-area.hero--vh {
    height: 100vh;
}

.works-text{margin-top:16em;
margin-left:16em;}

.works-container {
margin-top: 14vw;
}
}



/* レスポンシブ1280 */
@media (min-width: 1280px) and (max-width: 1280px) {
  
  
  
  .service-section{
    font-size: 0.9em;
  }
  .works-section{
    font-size: 0.9em;
  }
  .works-button{
    gap: 2em;
  }
  .news-section{
    font-size: 0.9em;
  }
  .news-button{
    gap: 5em;
  }
  


}




/* レスポンシブ1024～1280 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  
   .catchphrase {
    font-size: 2.5em;
}
  
  
  .service-section{
    font-size: 0.75em;
  }
  
  .works-section{
    font-size: 0.75em;
  }
  .works-button{
    gap: 2em;
  }
  .news-section{
    font-size: 0.75em;
  }
  .news-button{
    gap: 4em;
  }
  .footer-section{
    font-size: 0.7em;
  }
  .person-image04 img{
    top: 63%;
  }
  .person-image03 img {
    left: 68%;
}
.hero-message {
    font-size: 0.6em;
}
.hero--vh .hero-video {
    margin-top: 4.5em;
}
.works-container {
margin-top: 14vw;
}
}

@media (min-width: 768px){
.sp{display:none;}
}


/* レスポンシブ768～1024 */
@media (min-width: 768px) and (max-width: 1023.98px) {
 
.history-section {
    margin-top: 10em;
}

  .hero--vh .hero-video {
    margin-top: 4.5em;
}
  
.tel img {
    width: 25px;
}

  .service-section{
    font-size: 0.8em;
  }
  .service-box01 .number01 {
    top: 4%;
    left: 32%;
}
.service-box02 .number02,
.service-box03 .number03,
.service-box04 .number04 {
    top: 4%;
    left: 16%;
}
.service-box05 .number05 {
    top: 4%;
    left: 30%;
}
.number--text br{
display: none;
}

.works-container {
margin-top: 14vw;
}

  .works-section{
    font-size: 0.7em;
  }
  .works-button{
    gap: 1em;
  }




  .news-section{
    font-size: 0.7em;
  }
  .news-button{
    gap: 3em;
  }
  


  .person-image img,
.person-image02 img,
.person-image03 img,
.person-image05 img,
.person-image06 img,
.person-image07 img,
.person-image08 img,
.person-image10 img {
  width: 70px;
}

.person-image-new03 img {
    width: 10vw!important;
    position: absolute;
    left: 92%;
    top: 60%;
}



.person-image03 img {
    left: 70%;
 
}
.person-image04 img {
    width: 70px;
    left: 9%;
    top: 58%;
}

  br.pc-br { display: none; }
  .catchphrase {
    font-size: 2.3em;
}
.hero-message {
    font-size: 0.75em;
}

}
/* 1024px以上（PC/タブレット）では br を無視する */
@media (min-width: 1024px){
  br.sp-br02 { display: none; }
}

/* 768px以上（PC/タブレット）では br を無視する */
@media (min-width: 768px){
  br.sp-br { display: none; }
  .hero-area.hero--vh{
        --focus-x: 67%;
        --focus-y: 70%;
    }
    nav {
    align-items: center;
}
.hero-overlay-sp{
      display: none;
    }
    .person-image-new05 img{
 
    left: 45%;
}
}




@media(max-width: 767.98px){
  .history-section {
    margin-top: 15em;
}
.hero--vh .hero-video {
    margin-top: 3em;
}
.hero-message-sp{
    font-size: 10px;
}
.catchphrase{
  font-size:1.2em;
}

br.pc-br { display: none; }
br.sp-br02 { display: none; }

/* 好みの表示位置を変数で調整（横・縦）*/
.hero-area.hero--vh{
 --focus-x: 67%;
  --focus-y: 70%;  /* ← 下を多めに見せたいなら 60〜80% に上げる / 上を見せたいなら 20〜40% */
}



/* 動画のトリミング位置（焦点） */
.hero--vh .hero-video{
  object-position: var(--focus-x) var(--focus-y);
}
.catchphrase {
    font-weight: 600;
}
span.em-word {
    font-size: 1.3em;
}
 .hero-area.hero--vh {
        height: 1200px;
    }
    .hero--vh .hero-video {
        width: calc(114% + 2px);
        height: calc(64% + 2px + var(--hero-shift));
    }
    .hero-overlay{
      display: none;
    }
.person-image-new03 img {
    width: 10vw!important;
    position: absolute;
    left: 92%;
    top: 15%;
}
    .person-image05 img {
        width: 60px;
        position: absolute;
        left: 82%;
        top: 21%;
    }
    .person-image-new05 img{
  
    left: 45%;
    
}
.person-image-new04 img {
    width: 10vw!important;
    position: absolute;
    left: 88%;
    top: 103%;
}
.person-image07 img {
        width: 60px;
        position: absolute;
        left: 44%;
        top: 101.5%;
    }

}


/* レスポンシブ600～768 */
@media(min-width: 600px) and (max-width: 767.98px) {
  


  
  
.hero-overlay__inner {
    margin: 0 auto;
    text-align: left;
    margin-bottom: 3.5em;
}


 
  .service-box01 .number01,
  .service-box05 .number05{
    top: 6%;
        left: 44%;
  }
  .service-box02 .number02,
  .service-box03 .number03,
  .service-box04 .number04{
    top: 6%;
        left: 40%;
  }

  .number--text{
    margin-bottom: 3em;
  }
  
  
  .service-summary{
    flex-wrap: wrap;
    font-size: 1.2em;
  }
  .summary-item01,
  .summary-item02{
    width: 50%;
  }
  .service-list{
    flex-wrap: wrap;
    font-size: 1.2em;
  }
  .service-box01{
    width: 70%;
    border-top: 1px solid#ccc;
    border-bottom: 1px solid#ccc;
    border-left: none;
    border-right: none;
    padding-top: 2em;
    }
    .service-box02,
    .service-box03,
    .service-box04,
    .service-box05{
    width: 70%;
    border-bottom: 1px solid#ccc;
    border-left: none;
    border-right: none;
    padding-top: 2em;
    }


  .service-section{
    font-size: 0.8em;
  }

  



   .person-image img,
.person-image02 img,
.person-image08 img,
.person-image10 img {
  width: 60px;
}
  .person-image03 img{
    width: 60px;
        position: absolute;
        left: 67%;
        top: 3.5%;
  }
  .person-image04 img {
    width: 60px;
    position: absolute;
    left: 11%;
    top: 14%;
}
 



.person-image06 img {
    width: 60px;
    position: absolute;
    left: 11%;
    top: 100.5%;
}


 


img.section-text{
  width: 270px;
}

img.section-text-E {
        width: 180px;
        top: -80px;
        left: 231px;
    }

img.works-text-img {
    width: 200px;
}

img.works-w {
    width: 170px;
    position: absolute;
    top: -64px;
    right: 462px;
}

img.news-text {
    width: 110px;
}


   img.news-text-ws {
        width: 180px;
        top: -70px;
        left: 95px;
    }

  .works-section{
    font-size: 0.45em;
  }
  
  .works-description {
    line-height: 3.5em;
}


  .news-section{
    font-size: 0.6em;
  }
  .news-button{
    gap: 2em;
  }



  }



  /* レスポンシブ600以下 */
  @media(max-width: 599.98px) {


  .history-section {
        margin-top: 8em;
    }
  
  


  
 .service-box01 .number01,
  .service-box05 .number05{
    top: 6%;
        left: 44%;
  }
  .service-box02 .number02,
  .service-box03 .number03,
  .service-box04 .number04{
   top: 6%;
        left: 39%;
  }
  .service-summary{
    flex-wrap: wrap;
    font-size: 1.2em;
  }
  .summary-item01,
  .summary-item02{
    width: 50%;
  }
  .service-list{
    flex-wrap: wrap;
    font-size: 1.2em;
  }
  .service-box01{
    width: 70%;
    border-top: 1px solid#ccc;
    border-bottom: 1px solid#ccc;
    border-left: none;
    border-right: none;
    padding-top: 2em;
    }
    .service-box02,
    .service-box03,
    .service-box04,
    .service-box05{
    width: 70%;
    border-bottom: 1px solid#ccc;
    border-left: none;
    border-right: none;
    padding-top: 2em;
    }

 .number--text{
    margin-bottom: 3em;
  }




  .service-section{
    font-size: 0.65em;
  }

  
.person-image08 img
{
  width: 11vw!important;
}

   .person-image img,
.person-image02 img,
.person-image03 img,
.person-image09 img
 {
  width: 17vw!important;
}
  .person-image03 img{
    width: 17vw!important;
        position: absolute;
        left: 67%;
        top: 4%;
  }
  .person-image04 img {
  width: 17vw!important;
        position: absolute;
        left: 11%;
        top: 14%;}

.news-list{
width: 90%;
margin-left: 5%;
}

.news-date{
margin-left: 0em;
}

.person-image06 img {
    width: 17vw!important;
    position: absolute;
    left: 11%;
    top: 100.5%;
}

.person-image07 img
 {
        width: 17vw!important;
        position: absolute;
        left: 48%;
        top: 101.5%;
    }

.person-image10 img{
 width: 17vw!important;
 top: 85%;
}

.person-image-new01 img,
.person-image img,
.overlay--bike,
.person-image05 img,
.person-image-new03 img,
.person-image-new04 img,
.person-image-new05 img,
.person-image-new06 img,
.person-image11 img,
.person-image12 img{
width: 17vw!important;
}

img.section-text-E {
        width: 140px;
        position: absolute;
        top: -62px;
        left: 168px;
    }
img.works-text-img {
    width: 140px;
}
img.works-w {
    width: 110px;
    position: absolute;
    top: -39px;
    right: 475px;
}

img.news-text {
    width: 65px;
    margin-left: 6em;
}

img.news-text-ws {
top: -40px;
width: 100px;
left: 95px;
    }

img.section-text {
    width: 200px;
}



  .works-section{
    font-size: 0.33em;
  }
  
.works-button{
   
        margin-bottom: 2em;
       
    }

.works-description {
    line-height: 3em;
}
  

  .news-section{
    font-size: 0.4em;
  }
  .news-button01{
width: 50vw;
    margin-left: 25vw;
    margin-top: 4em;
    margin-bottom: 5em;
}
  }

  /* レスポンシブ470以下 */
  @media(max-width: 470px) {


  .section-header{
  margin-left: 30px;
  font-size: 0.8em;
}

  .service-box01 .number01,
  .service-box05 .number05{
    top: 9%;
    left: 37%;
  }
  .service-box02 .number02,
  .service-box03 .number03,
  .service-box04 .number04{
    top: 9%;
    left: 33%;
  }
  img.works-building {
    width: 30%;
    position: relative;
    z-index: 10;
}
    img.section-text {
        width: 150px;
    }
       img.section-text-E {
width: 100px;
        position: absolute;
        top: -47px;
        left: 126px;
    }
    img.works-w {
width: 85px;
        position: absolute;
        top: -28px;
        left: -68px;
    }
    .works-text {
    width: 25%;
    
}
        img.works-text-img {
        width: 120px;
    }
    .person-image03 img {
       position: absolute;
        left: 74%;
        top: 3%;
    }
    
.person-image04 img {
        width: 60px;
        position: absolute;
        left: 5%;
        top: 12%;
}
    .person-image05 img {
        width: 60px;
        position: absolute;
        left: 82%;
        top: 26%;

      }
  
      .person-image-new03 img{
    left: 85%;

}
     img.works-building {
    width: 35%;
    position: relative;
    z-index: 10;
}

.works-button{
    width: 60%;
    gap: 0.8em;
}

}



/* レスポンシブ600～768 */
@media(min-width: 500px) and (max-width: 599.98px) {
.hero-overlay__inner {
    margin: 0 auto;
    text-align: center;
    
}
}

/* レスポンシブ400～500 */
@media(min-width: 400px) and (max-width: 499.98px) {
.hero-overlay__inner {
    margin: 0 auto;
    text-align: center;
   margin-bottom: 2em;
}
}

/* レスポンシブ420以下 */
  @media(max-width: 420px){
        .service-box01 .number01,
  .service-box05 .number05{
    top: 8%;
    left: 38%;
  }
  .service-box02 .number02,
  .service-box03 .number03,
  .service-box04 .number04{
    top: 8%;
    left: 31%;
  }
  .person-image-new05 img {
    width: 17vw!important;
    position: absolute;
    left: 60%;
}
  }

/* レスポンシブ400以下 */
  @media(max-width: 399.98px) {

.hero-overlay__inner {
    margin: 0 auto;
    text-align: center;
    margin-bottom: 2em;
}


 .works-text {
    width: 20%;
    margin-left: 10em;
}
   img.works-building {
    width: 30%;
    position: relative;
    z-index: 10;
}
.works-button{
    width: 75%;
    gap: 0.2em;
}
.person-image08 img{
  top: -28%;
}

      .service-box01 .number01,
  .service-box05 .number05{
    top: 9%;
    left: 37%;
  }
  .service-box02 .number02,
  .service-box03 .number03,
  .service-box04 .number04{
    top: 8%;
    left: 30%;
  }
}
/* レスポンシブ344のみ */
@media (min-width: 344px) and (max-width: 344.98px){

.hero-area.hero--vh {
        height: 732px;
    }
     .hero-overlay__inner {
        margin-bottom: 5em;
    }
        .hero--vh .hero-video {
        width: calc(133% + 2px);
    }
    .hero--vh .hero-video {
        margin-top: 3em;
    }
        .catchphrase {
        font-size: 1.1em;
    }
}

/* レスポンシブ360のみ */
@media (min-width: 360px) and (max-width: 360.98px){

.hero-area.hero--vh {
        height: 614px;
    }
    .hero-overlay__inner {
        margin-bottom: 2em;
    }
        .hero--vh .hero-video {
        width: calc(121% + 2px);
    }
    .hero--vh .hero-video {
        margin-top: 3em;
    }
}

/* レスポンシブ375のみ */
@media (min-width: 375px) and (max-width: 375.98px){

.hero-area.hero--vh {
        height: 554px;
    }
    .hero-overlay__inner {
        margin-bottom: 0em;
    }
    .hero--vh .hero-video {
        width: calc(118% + 3px);
        height: calc(67% + 2px + var(--hero-shift));
        margin-top: 2.5em;
    }
}
/* レスポンシブ390のみ */
@media (min-width: 390px) and (max-width: 393.98px){

.hero-area.hero--vh {
        height: 700px;
    }
    
       .hero--vh .hero-video {
        width: calc(129% + 2px);
        height: calc(70% + 2px + var(--hero-shift));
    }
    
    .hero--vh .hero-video {
        margin-top: 3em;
    }
        .hero-overlay__inner {
        margin-bottom: 3em;
    }
    
}
/* レスポンシブ402のみ */
@media (min-width: 402px) and (max-width: 402.98px){

.hero-area.hero--vh {
        height: 725px;
    }
    .hero-overlay__inner {
        margin-bottom: 5em;
    }
    .hero--vh .hero-video {
        margin-top: 3em;
    }
   
}
/* レスポンシブ412のみ */
@media (min-width: 412px) and (max-width: 412.98px){

.hero-area.hero--vh {
        height: 760px;
    }
    .hero-overlay__inner {
        margin-bottom: 7em;
    }
    .hero--vh .hero-video {
        width: calc(126% + 2px);
    }
   .hero--vh .hero-video {
        margin-top: 3em;
    }
}

/* レスポンシブ414のみ */
@media (min-width: 414px) and (max-width: 414.98px){

.hero-area.hero--vh {
        height: 744px;
    }
       .hero-overlay__inner{
        margin-bottom: 6em;
    }
    .hero--vh .hero-video {
        width: calc(123% + 2px);
    }
    .hero--vh .hero-video {
        margin-top: 3em;
    }
}


/* レスポンシブ430のみ */
@media (min-width: 430px) and (max-width: 430.98px){

.hero-area.hero--vh {
        height: 774px;
    }
    .hero-overlay__inner {
        margin-bottom: 6em;
    }
    .hero--vh .hero-video {
        width: calc(128% + 2px);
        height: calc(68% + 2px + var(--hero-shift));
    }
    .hero--vh .hero-video {
        margin-top: 3em;
    }
}
/* レスポンシブ440のみ */
@media (min-width: 440px) and (max-width: 440.98px){

.hero-area.hero--vh {
        height: 793px;
    }
     .hero-overlay__inner {
        margin-bottom: 6em;
    }
    .hero--vh .hero-video {
        width: calc(125% + 2px);
        height: calc(64% + 2px + var(--hero-shift));
    }
    .hero--vh .hero-video {
        margin-top: 3em;
    }
}
/* レスポンシブ540のみ */
@media (min-width: 540px) and (max-width: 540.98px){

.hero-area.hero--vh {
        height: 598px;
    }
    .hero--vh .hero-video {
        margin-top: 3em;
    }
        .hero-overlay__inner {
        margin-bottom: 2em;
    }
}
/* レスポンシブ768のみ */
@media (min-width: 768px) and (max-width: 768.98px){

.hero-area.hero--vh {
        height: 1024px;
    }
    .hero-overlay__inner {
    margin-bottom: 4em;
}
.hero--vh .hero-video {
        margin-top: 4em;
    }
    .hero--vh .hero-video {
    height: calc(90% + 2px + var(--hero-shift));
}
}
/* レスポンシブ820のみ */
@media (min-width: 820px) and (max-width: 820.98px){

.hero-area.hero--vh {
        height: 1180px;
    }
    .hero--vh .hero-video {
    width: calc(100% + 2px);
    height: calc(93% + 2px + var(--hero-shift));
}
.hero--vh .hero-video {
        margin-top: 4em;
    }
      .hero-overlay__inner {
    margin-bottom: 5em;
}
}
/* レスポンシブ853のみ */
@media (min-width: 853px) and (max-width: 853.98px){

.hero-area.hero--vh {
        height: 1280px;
    }
    .hero--vh .hero-video {
    width: calc(100% + 2px);
    height: calc(84% + 2px + var(--hero-shift));
    margin-top: 4em;
}
.hero-overlay {
    margin-bottom: 10em;
}
}

/* レスポンシブ912のみ */
@media (min-width: 912px) and (max-width: 912.98px){

.hero-area.hero--vh {
        height: 1368px;
    }
    .hero--vh .hero-video {
    width: calc(100% + 2px);
    height: calc(90% + 2px + var(--hero-shift));
}
.hero-overlay__inner {
    margin: 0 auto;
    text-align: center;
    margin-bottom: 9em;
}
.hero--vh .hero-video {
        margin-top: 4em;
    }
}


/* レスポンシブ1024のみ */
@media (min-width: 1024px) and (max-width: 1024.98px){

.hero-area.hero--vh {
        height: 600px;
    }
    .hero--vh .hero-video {
    width: calc(100% + 2px);
    height: calc(75% + 2px + var(--hero-shift));
}
.hero--vh .hero-video {
        margin-top: 4.5em;
    }
    .hero-overlay__inner {
    
    margin-bottom: 0em;
;
}
}


/* レスポンシブ1600以上 */
@media (min-width: 1600px) {
.hero-area.hero--vh {
        height: 970px;
    }
    .hero--vh .hero-video {
    width: calc(100% + 2px);
    height: calc(100% + 2px + var(--hero-shift));
}
.hero--vh .hero-video {
        margin-top: 0em;
    }
.hero-overlay__inner {
margin-bottom: 0em;
}

.catchphrase {
font-size: 4.5em;
margin-bottom: 0.5em;
}

.hero-message{font-size: 0.96em;
}
}

/* 1) レイアウト側の前提：横はみ出しの細線を抑止 */
html, body { overflow-x: hidden; }

/* 2) ヒーロー全体を“白背景＋クリッピング” */
.hero-area {
  position: relative;
  overflow: hidden;
  background: #fff;           /* ← 黒が透けないようにサイト背景色 */
}

/* 3) 動画そのものを +2px 拡大して隙間を物理的に消す */
.hero-area > .hero-video{
  position: absolute;
  top: -1px; left: -1px;      /* 右・下の 1px 黒線対策の中核 */
  object-fit: cover;
  border: 0; outline: 0; background: transparent;

  /* スクロール再描画時のチラ見え抑制（Safari/iOS 対策） */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  contain: paint;
}

/* 4) 念押しで“白ペイント”を端に重ねる（一瞬の線も上書き） */
.hero-area::after,
.hero-area::before{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:2;
  background:#fff;            /* 右下を白で塗る(色を変えたい場合はここを変更) */
}
.hero-area::after{ /* 右端 1～2px を白で覆う */
  top:0; right:0; width:2px; height:100%;
}
.hero-area::before{ /* 下端 1～2px を白で覆う */
  left:0; bottom:0; width:100%; height:2px;
}

/* 5) iOS で object-fit:cover が不安定な環境用の保険（効く場合のみ） */
@supports (-webkit-touch-callout: none) {
  .hero-area > .hero-video{
    /* cover で問題なければこのブロックは不要。残る場合だけ有効化して様子見 */
    /* width:auto; height:auto; min-width:101%; min-height:101%; object-fit:fill; */
  }
}