/* クラス名を実名に、weight は数値に */
.inter-thin{
  font-family: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-weight: 200;
  font-optical-sizing: auto;
  font-style: normal;
  font-synthesis-weight: none;
  font-variation-settings: "wght" 200;
}

.works-description{color:#000;
white-space: normal !important;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 2em;
margin-top: 5em;
width: 100%;
font-family:"Noto Sans JP",sans-serif!important;
}

.works-description{font-family:"Noto Sans JP",sans-serif;
}

.summary-item01 p, .summary-item02 p{font-size: 17px!important;}
.number--text{font-size: 17px!important;}
.works-description,
.news-list li{font-size: 17px;}

:root {
  --fixed-vh: 100vh;
}

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

.catchphrase {
    font-weight: bold;
    white-space: nowrap;
    font-family: "Zen Old Mincho","Noto Serif JP", serif;
}

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

/* ? の内側：アニメを外し、必ず表示＋回転させる */
.catchphrase .tilt-q{
  display:inline-block;
  animation: none;
  opacity: 1;
  transform: rotate(15deg);
  transform-origin: 50% 75%;
}

.hero-message{
  position: static;
  transform: none;
  width: auto;
  margin-top: 10px;
  text-align: center;
  font-size: 1em;
  font-weight: 600;
  font-family:"Zen Old Mincho","Noto Serif JP", serif;
}

.hero-message-sp{
  position: static;
  transform: none;
  width: auto;
  margin-top: 10px;
  text-align: center;
  font-size: 1em;
  font-weight: 600;
  font-family: "Zen Old Mincho","Noto Serif JP", serif;
}

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

/* ===== ヒーローセクション：完全固定 ===== */
.hero-area.hero--vh{
  position: relative;
  width: 100%;
  height: var(--fixed-vh);
  min-height: var(--fixed-vh);
  max-height: var(--fixed-vh);
  overflow: hidden;
  background: #fff;
  --hero-shift: 0px;
}

/* 動画：枠いっぱいに配置 */
.hero--vh .hero-video{
  position: absolute;
  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: translateZ(0);
  backface-visibility: hidden;
}

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

.hero-video{
  position: absolute; 
  inset: 0;
  width: 100%; 
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 100%;
  z-index: 0;
}

/* ===== PC版オーバーレイ（768px以上で表示） ===== */
.hero-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: none;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 30px;
}

/* ===== SP版オーバーレイ（767px以下で表示） ===== */
.hero-overlay-sp{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: none;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 20px;
}

/* 768px以上: PC版のみ表示 */
@media (min-width: 768px) {
  .hero-overlay {
    display: flex !important;
  }
  .hero-overlay-sp {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* 767px以下: SP版のみ表示 */
@media (max-width: 767.98px) {
  .hero-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  .hero-overlay-sp {
    display: flex !important;
  }

.news-date {
font-size: 13px!important;
font-weight: 500!important;
}

.news-text {
font-size: 12px!important;
font-weight: 500!important;
}

.news-list li {
padding: 0.65em 0 0.2em 0!important;}
}

.hero-overlay__inner{
  margin: 0 auto;
  text-align: center;
  max-width: 90%;
}

/* 以降、テキストは"通常フロー"でレイアウト（絶対配置はやめる） */
.catchphrase{
  position: static !important;
  transform: none !important;
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 4.5em;
  line-height: 1.15;
  color:#111;
  font-family: "Zen Old Mincho","Noto Serif JP","MS PMincho", serif;
}

.hero-message{
  position: static !important;
  transform: none !important;
  width: auto;
  margin-top: 10px;
}

.hero-message-sp{
  position: static !important;
  transform: none !important;
  width: auto;
  margin-top: 10px;
}

.hero-message__inner,
.hero-message__inner-sp{
  max-width: 100%;
}

/* Safari専用の強制固定 */
@supports (-webkit-touch-callout: none) {
  .hero-area.hero--vh {
    position: relative;
    width: 100%;
    height: var(--fixed-vh) !important;
    min-height: var(--fixed-vh) !important;
    max-height: var(--fixed-vh) !important;
    overflow: hidden !important;
  }
  
  .hero-overlay,
  .hero-overlay-sp {
    position: absolute !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
  
  .hero-overlay *,
  .hero-overlay-sp * {
    -webkit-transform: none !important;
    -webkit-backface-visibility: hidden;
  }
}

/* 全てのテキスト要素の動きを強制停止 */
.catchphrase,
.hero-message,
.hero-message-sp,
.hero-message__inner,
.hero-message__inner-sp,
.sp-text01,
.sp-text02,
.sp-text03,
.em-word,
.em-word-sp {
  position: static !important;
  transform: none !important;
  -webkit-transform: none !important;
}

/* 初期は非表示（レイアウトは保持） */
.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%;
}
.history-image02 img{ width: 35vw; display:block; }

/* ── 前面に出したい要素（人物・見出し・ボタン・説明）── */
.person-image img,
.person-image02 img,
.history-title,
.special-button,
.description{
  position: relative;
  z-index: 1;
}

/* 既存の人物配置はそのまま生かす */
.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: 0.5em!important;;
line-height: 2em!important;
font-size: 12px !important;
font-weight: 500!important;
}

.summary-item01 p, .summary-item02 p{font-size: 12px !important;font-weight: 500!important;}
.service-box01 p, .service-box02 p, .service-box03 p, .service-box04 p, .service-box05 p{font-size: 12px !important;font-weight: 500!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:
    "Noto Sans JP",
    sans-serif;
}

.special-button .line {
  flex-grow: 1;
  height: 0.05em;
  background-color: #ffffff;
  min-width: 1vw;
  max-width: 5vw;
}
.description{
margin-top: 0.5em;
padding-bottom: 10em;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 2em;
margin-bottom: 0.5em;
}

.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;
font-weight:400;
}

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;
    gap: 2em;
    position: relative;
    white-space: nowrap;
}

img.section-text {
  width: 100%;
 
}

img.section-text-E {
width: 100%;
    position: absolute;
}

.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: 62%;
}

.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: 25px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    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: "Noto Sans JP", sans-serif;
    font-weight: 400;
  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: "Noto Sans JP", sans-serif;
    font-weight: 600;
}
.service-box02 .number02 {
  position: absolute;
    top: 2%;
    left: 30%;
    font-size: 1em;
   font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    background: transparent;
}
.service-box03 .number03 {
  position: absolute;
  top: 2%;
    left: 30%;
    font-size: 1em;
   font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    background: transparent;
}
.service-box04 .number04 {
 position: absolute;
  top: 2%;
    left: 30%;
    font-size: 1em;
   font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    background: transparent;
}
.service-box05 .number05 {
 position: absolute;
    top: 2%;
    left: 38%;
    font-size: 1em;
    background: transparent;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
}

.icon img{
    width: 75%;
} 
.service-box01 h4,
.service-box02 h4,
.service-box03 h4,
.service-box04 h4,
.service-box05 h4{
font-size: 25px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
    margin-bottom: 0em;
}
.service-box01 p,
 .service-box02 p,
 .service-box03 p,
 .service-box04 p,
 .service-box05 p{
 text-align: left;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    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;
    width: 100%;
font-size:17px;}



.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.jpg) 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: 100vw;
}

img.works-w{
width: 100vw;
    position: absolute;
}
.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-size: 6px 6px;
    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%;
  max-width:45%;
  height:auto;
  min-width:0;
}
.works-text{
    flex: 0 1 30%;
  min-width: 0;
  color:#fff;
}
.works-description{
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:2em;
  margin-top:4em;
}

.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: 100vw;
}

 img.news-text-ws {
width: 100vw;
position: absolute;
}

.news-list {
  list-style: none;
  padding: 0;
}
.news-list li {
  display: flex;
  padding: 1.5em 0 0.2em 0;
  border-bottom: 1px solid #ccc;
font-family: "Noto Sans JP", "Meiryo", sans-serif;
font-size:17px;
  gap: 5em;
  align-items: baseline;
}
.news-date{
  margin-left: 5em;
  white-space: nowrap;
  font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}
.news-text a {
  color: #221911;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}
.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;
}

.sp-text01{
  margin-bottom: 0.7em;
line-height: 1.5em;
}
.sp-text02{
  margin-bottom: 0.7em;
}
.sp-text03{
  margin-top: 0.7em;
line-height: 1.4em;
}

/* 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;
}
}

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


.news-text{
font-weight:500;}

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

.hero-message-sp{font-size: 1em;}

@media (min-width: 1280px) and (max-width:1599px){
    .hero-message-sp {
        font-size: 0.9em;
    }
}

.sp-text03
 {margin-top: 1.2em;
}

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

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

/* レスポンシブ1280 */
@media (min-width: 1280px) and (max-width: 1599px) {
  .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;
  }

.sp-text03 {
        margin-top: 1.2em;
        font-size: 0.85em;
    }

.sp-text01 {
        font-size: 0.85em;
line-height:1.4!important;}
}


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

.description{
border-bottom: 1px solid #ccc;}
}

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

  .hero--vh .hero-video {
    margin-top: -1.5em;
}

.sp-text01 {
font-size: 1em;
}

.sp-text03
{
font-size: 1em;
}

.hero-overlay__inner {
margin-bottom: 0em;
}

span.em-word-sp {
    font-size: 1.3em;
}
  
.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;
}
}

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

  .hero--vh .hero-video {
    margin-top: -1.5em;
}

.sp-text01 {
font-size: 1em;
}

.sp-text03
{
font-size: 1em;
}

span.em-word-sp {
    font-size: 1.3em;
}
  
.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;
}

.description{font-size:14px;
}

.summary-item01 h3, .summary-item02 h3 {
font-size: 20px;
}

.service-box01 h4, .service-box02 h4, .service-box03 h4, .service-box04 h4, .service-box05 h4 {
    font-size: 20px;
}

.summary-item01 p, .summary-item02 p {
 font-size: 14px !important;}

.number--text {
    font-size: 14px !important;
}

.works-description{
font-size: 14px;
margin-bottom: 9em;
}

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

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

/* 768px以上（PC/タブレット）では br を無視する */
@media (min-width: 768px){
  br.sp-br { display: none!important; }
  .hero-area.hero--vh{
        --focus-x: 67%;
        --focus-y: 70%;
    }
    nav {
    align-items: center;
}
.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: 10.5px;
}
.catchphrase{
  font-size:1.26em;
margin-left: -0.5em;
margin-bottom: 0.7em;
}

.summary-item01 h3, .summary-item02 h3 {
    font-size: 18px;}
.service-box01 h4, .service-box02 h4, .service-box03 h4, .service-box04 h4, .service-box05 h4 {
    font-size:18px;}

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

/* 好みの表示位置を変数で調整（横・縦）*/
.hero-area.hero--vh{
 --focus-x: 67%;
  --focus-y: 70%;
}

/* 動画のトリミング位置（焦点） */
.hero--vh .hero-video{
  object-position: var(--focus-x) var(--focus-y);
}
.catchphrase {
    font-weight: 600;
}
span.em-word {
    font-size: 1.3em;
}
    .hero--vh .hero-video {
        width: calc(114% + 2px);
        height: calc(64% + 2px + var(--hero-shift));
    }
.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: 102%;
}
.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%;
}

  .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;
top:-8%!important;
}

.person-image09 img {top: -15%;}

   .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;
}

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

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

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

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

  .section-header{
  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;
}
    .person-image03 img {
       position: absolute;
        left: 74%;
        top: 3%;
    }
    
.person-image04 img {
        width: 60px;
        position: absolute;
        left: 5%;
        top: 13%;
}
    .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;
}
}

/* レスポンシブ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%;
}

.news-list li{
    gap: 2em;
}
  }

/* レスポンシブ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: -16%;
}

      .service-box01 .number01,
  .service-box05 .number05{
    top: 9%;
    left: 37%;
  }
  .service-box02 .number02,
  .service-box03 .number03,
  .service-box04 .number04{
    top: 8%;
    left: 30%;
  }


}

/* 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;
  object-fit: cover;
  border: 0; outline: 0; background: transparent;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 4) 念押しで"白ペイント"を端に重ねる（一瞬の線も上書き） */
.hero-area::after,
.hero-area::before{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:2;
  background:#fff;
}
.hero-area::after{
  top:0; right:0; width:2px; height:100%;
}
.hero-area::before{
  left:0; bottom:0; width:100%; height:2px;
}

@media (min-width: 1600px) {
    .catchphrase {
        font-size: 4.5em;
        margin-bottom: 0.5em;
    }
.works-text {
        margin-top: 26em;
        margin-left: 22em;
    }
}

@media (max-width: 374px){
.catchphrase {
font-size: 1.15em;
}
}


/* レスポンシブ1024 */
@media (min-width: 1024px) and (max-width: 1279px) and (max-aspect-ratio: 1/1) {
   .catchphrase {
    font-size: 2.5em;
}

.works-text {margin-top: 12em;
margin-left: 16em;
}
  
  .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;
}

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

.description{font-size:14px;
}

.summary-item01 h3, .summary-item02 h3 {
font-size: 20px;
}

.service-box01 h4, .service-box02 h4, .service-box03 h4, .service-box04 h4, .service-box05 h4 {
    font-size: 20px;
}

.summary-item01 p, .summary-item02 p {
 font-size: 14px !important;}

.number--text {
    font-size: 14px !important;
}

.works-description{
font-size: 14px;
}
}

@media (min-width: 1024px) and (max-width: 1279px) and (min-aspect-ratio: 1/1) {
.hero--vh .hero-video {
    margin-top: -1.5em;
}

.person-image-new04 img {
top: 108%;
}

.person-image07 img {
top: 104%;
}

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

.catchphrase {
    font-size: 2.5em;
}

.sp-text01 {
font-size: 0.7em;
}

.sp-text03
{
font-size: 0.7em;
}

.hero-overlay__inner {
margin-bottom: -1em;
}

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

.description{font-size:14px;
}

.summary-item01 h3, .summary-item02 h3 {
font-size: 20px;
}

.service-box01 h4, .service-box02 h4, .service-box03 h4, .service-box04 h4, .service-box05 h4 {
    font-size: 20px;
}

.summary-item01 p, .summary-item02 p {
 font-size: 14px !important;}

.number--text {
    font-size: 14px !important;
}

.works-description{
font-size: 14px;
}

.news-list li {
font-size: 14px;
}
}

/* レスポンシブ912 */
@media (min-width: 912px) and (max-width: 1023px) and (max-aspect-ratio: 1/1) {
   .catchphrase {
    font-size: 2.3em;
}
  
  .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: 1.5em;
}
.works-container {
margin-top: 14vw;
}

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

.sp-text01 {
font-size: 0.8em;
}

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


.sp-text03 {
font-size: 0.9em;
}

.hero-overlay__inner {
margin-bottom: 5em;
}

.news-list li {
font-size: 14px;
}

}

@media (min-width: 912px) and (max-width: 1023px) and (min-aspect-ratio: 1/1) {
.hero--vh .hero-video {
margin-top: -1.5em;
}

.catchphrase {
font-size: 2.3em;
}

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

.sp-text01 {
font-size: 0.7em;
}

.sp-text03
{
font-size: 0.7em;
}

.hero-overlay__inner {
margin-bottom: -1em;
}

.news-list li {
font-size: 14px;
}
}

/* レスポンシブ820 */
@media (min-width: 820px) and (max-width: 911px) and (max-aspect-ratio: 1/1) {
   .catchphrase {
    font-size: 2.3em;
}
  
  .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: 1.5em;
}
.works-container {
margin-top: 14vw;
}

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

.sp-text01 {
font-size: 0.8em;
}

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


.sp-text03 {
font-size: 0.9em;
}

.hero-overlay__inner {
margin-bottom: 3em;
}

.news-list li {
font-size: 14px;
}
}

@media (min-width: 820px) and (max-width: 911px) and (min-aspect-ratio: 1/1) {
.hero--vh .hero-video {
margin-top: -1.5em;
}

.catchphrase {
font-size: 2.3em;
}

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

.sp-text01 {
font-size: 0.7em;
}

.sp-text03
{
font-size: 0.7em;
}

.news-list li {
font-size: 14px;
}

.hero-overlay__inner {
margin-bottom: -1em;
}
}

/* レスポンシブ768 */
@media (min-width: 768px) and (max-width: 819px) and (max-aspect-ratio: 1/1) {
   .catchphrase {
    font-size: 2.3em;
}
  
  .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: 1.5em;
}
.works-container {
margin-top: 14vw;
}

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

.sp-text01 {
font-size: 0.8em;
}

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


.sp-text03 {
font-size: 0.9em;
}

.news-list li {
font-size: 14px;
}

}

@media (min-width: 768px) and (max-width: 819px) and (min-aspect-ratio: 1/1) {
.hero--vh .hero-video {
margin-top: -1.5em;
}

.catchphrase {
font-size: 2.3em;
}

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

.sp-text01 {
font-size: 0.7em;
}

.sp-text03
{font-size: 0.7em;
}

.hero-overlay__inner {
margin-bottom: -1em;
}
}



@media (min-width: 540px) and  (max-width: 767px){
    .hero--vh .hero-video {
        width: calc(128% + 2px);
        height: calc(76% + 2px + var(--hero-shift));
}

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

.works-image {
        height: 600px;
        margin-top: 7em;}
}

@media (min-width: 570px) and  (max-width: 600px){
.works-image {
        height: 650px;
}
}

@media (min-width: 601px) and  (max-width: 670px){
.works-image {
        height: 700px;
}
}

@media (min-width: 671px) and  (max-width: 730px){
.works-image {
        height: 750px;
}
}

@media (min-width: 731px) and  (max-width: 767px){
.works-image {
        height: 800px;
}
}


@media (min-width: 430px) and (max-width:539px) {
.hero--vh .hero-video {
        width: calc(139% + 2px);
        height: calc(73% + 2px + var(--hero-shift));
    }

.person-image07 img {
top: 100.3%;
}
}

@media (min-width: 431px) and  (max-width: 470px){
.works-image {
        height: 500px;
}
}

@media (min-width: 471px) and  (max-width: 510px){
.works-image {
        height: 550px;
}
}

@media (min-width: 511px) and  (max-width: 539px){
.works-image {
        height: 600px;
}
}

@media (min-width: 414px) and (max-width: 429px){
.catchphrase {
font-size: 1.15em;
}

.hero--vh .hero-video {
width: calc(139% + 2px);
height: calc(73% + 2px + var(--hero-shift));
}

.person-image07 img {
top: 100.5%;
}
}



@media (min-width: 390px) and (max-width:413px) {
    .hero--vh .hero-video {
        width: calc(125% + 2px);
        height: calc(68% + 2px + var(--hero-shift));
    }
.hero-overlay__inner {
        margin-bottom: 0em;
    }
}

@media (min-width: 412px) and (max-width:412.99px) {
    .hero--vh .hero-video {
        width: calc(188% + 2px);
        height: calc(75% + 2px + var(--hero-shift));
    }
.hero-overlay__inner {
        margin-bottom: 2em;
    }
}

@media (min-width: 375px) and (max-width:389px) {
.hero-overlay__inner {
        margin-bottom: 0em;
    }


    .hero--vh .hero-video {
        width: calc(130% + 2px);
        height: calc(64% + 2px + var(--hero-shift));
}
}

@media (min-width: 360px) and (max-width: 374px){
.catchphrase {
font-size: 1.05em;
}

.hero--vh .hero-video
 {
        width: calc(187% + 2px);
        height: calc(71% + 2px + var(--hero-shift));
    }
}


@media (max-width: 359px){
.catchphrase {
font-size: 1.05em;
}

.hero--vh .hero-video
 {
        width: calc(210% + 2px);
        height: calc(76% + 2px + var(--hero-shift));
    }
}

@media (min-width: 768px) and (max-width: 1800px){
.history-image02 {
    left: 64%;
}

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


@media (max-width: 767px){
.tab_br{
display:none;
}
}

@media (min-width: 1400px){
.tab_br{
display:none;
}
}