@font-face {
  font-display: block;
  font-family: 'FA-Regular';
  font-style: normal;
  font-weight: 400;
  src: url(../../assets/fonts/webfonts/fa-regular-400.woff2) format("woff2"),
  url(/assets/fonts/webfonts/fa-regular-400.ttf) format("truetype");
}

@font-face {
  font-display: block;
  font-family: 'FA-Solid9';
  font-style: normal;
  font-weight: 900;
  src: url(../../assets/fonts/webfonts/fa-solid-900.woff2) format("woff2"),
  url(/assets/fonts/webfonts/fa-solid-900.ttf) format("truetype");
}

:root {
  --main-color: #2F6CF9;
  --main-color2: #EE5B26;
  --main-color3: #00c755;
  --main-color4: rgb(0,161,233);
  --text-color: #17055a;
  --text-color-gray: #989898;
  --background: #FFFFFF;
  --theme-dark: #2B1B02;
  --theme-darker: rgb(202, 168, 124);
  --theme-lighter: rgb(196, 171, 112);
  --font-poppins: 'Poppins', sans-serif;
  --font-gothic: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  --font-mincho: 'Noto Serif JP', serif;
  --font-english: sans-serif;
  --shadow: 3px 3px 8px -2px rgb(20 40 90 / 12%), 0px 2px 2px 0px rgb(20 40 90 / 9%), 0px 1px 5px 0px rgb(20 40 90 / 7%);
  --shadow-light: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
  --gradient: linear-gradient(100deg, #2F6CF9 0%, #4f8cff 100%);
  --theme-gold2: linear-gradient(225deg, var(--theme-darker) 0%, var(--theme-lighter) 45%, #e1ca98 70%, var(--theme-lighter) 85%, var(--theme-darker) 90% 100%);
  --mc-gradient: linear-gradient(135deg, var(--main-color) 0%, #ff6975 100%);
  --theme-gold: linear-gradient(135deg, var(--theme-darker) 0%, var(--theme-lighter) 45%, #e1ca98 70%, var(--theme-lighter) 85%, var(--theme-darker) 90% 100%);

  --exclusive-height: 0px;
}

* {
  font-family: var(--font-gothic);
  box-sizing: border-box;
  color: #2B1B02;
  font-size: 15px;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

input[type="text"],
input[type="email"],
input[type="password"],
button,
/* select, */
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

strong {
  color: inherit;
  font-size: inherit;
}


img {
  object-fit: cover;
}

div, span, p, h1, h2, h3, h4 {
  color: var(--text-color);
  letter-spacing: .05em;
}

html, body, .container {
  background-color: var(--background);
  /* overflow-x: hidden; */
  width: 100%;
  position: relative;
}

html, body {
  position: initial;
}

body {
  -webkit-text-size-adjust:100%;
  background-color: var(--background);
}

.content-area {
  padding-bottom: 0;
}

.container {
  padding: 0;
  padding-top: 0px;
}
main { 
  padding-bottom: 60px;
}

section {
  width: 100%;
  padding-top: 90px;
  /* hidden だと overflow-y が auto に計算され縦スクロールバーが出るため clip を使う
     （clip は他軸を巻き込まず横だけクリップ） */
  overflow-x: clip;
  max-width: 1000px;
  margin: 0 auto;
}

.p-container {
  padding: 0 20px;
}

figure.wp-block-image {
  margin-bottom: 0;
}

.main-color {color: var(--main-color);}
.main-color2 {color: var(--main-color2);}
.main-color3 {color: var(--main-color3);}

.max-width-600,.max-width-700,.max-width-800,.max-width-1000 {
  margin: 0 auto;
  display: block;
}
.max-width-600 {max-width: 600px;}.max-width-700 {max-width: 700px;}.max-width-800 {max-width: 800px;}.max-width-1000 {max-width: 1000px;}

.pd-3 {padding: 3px;}.pd-5 {padding: 5px;}.pd-10 {padding: 10px;}.pd-15 {padding: 15px;}.pd-20 {padding: 20px;}.pd-25 {padding: 25px;}.pd-30 {padding: 30px;}
.md-3 {margin: 3px;}.md-5 {margin: 5px;}.md-10 {margin: 10px;}.md-15 {margin: 15px;}.md-20 {margin: 20px;}.md-25 {margin: 25px;}.md-30 {margin: 30px;}

.plr-10 {padding-left: 10px;padding-right: 10px;}
.mtb-3 {margin-top: 3px;margin-bottom: 3px;}.mtb-5 {margin-top: 5px;margin-bottom: 5px;}.mtb-10 {margin-top: 10px;margin-bottom: 10px;}.mtb-15 {margin-top: 15px;margin-bottom: 15px;}.mtb-20 {margin-top: 20px;margin-bottom: 20px;}.mtb-25 {margin-top: 25px;margin-bottom: 25px;}.mtb-30 {margin-top: 30px;margin-bottom: 30px;}
.ptb-3 {padding-top: 3px;padding-bottom: 3px;}.ptb-5 {padding-top: 5px;padding-bottom: 5px;}.ptb-10 {padding-top: 10px;padding-bottom: 10px;}.ptb-15 {padding-top: 15px;padding-bottom: 15px;}.ptb-20 {padding-top: 20px;padding-bottom: 20px;}.ptb-25 {padding-top: 25px;padding-bottom: 25px;}.ptb-30 {padding-top: 30px;padding-bottom: 30px;}
.mlr-3 {margin-left: 3px;margin-right: 3px;}.mlr-5 {margin-left: 5px;margin-right: 5px;}.mlr-10 {margin-left: 10px;margin-right: 10px;}.mlr-15 {margin-left: 15px;margin-right: 15px;}.mlr-20 {margin-left: 20px;margin-right: 20px;}.mlr-25 {margin-left: 25px;margin-right: 25px;}.mlr-30 {margin-left: 30px;margin-right: 30px;}
.plr-3 {padding-left: 3px;padding-right: 3px;}.plr-5 {padding-left: 5px;padding-right: 5px;}.plr-10 {padding-left: 10px;padding-right: 10px;}.plr-15 {padding-left: 15px;padding-right: 15px;}.plr-20 {padding-left: 20px;padding-right: 20px;}.plr-25 {padding-left: 25px;padding-right: 25px;}.plr-30 {padding-left: 30px;padding-right: 30px;}
.pl-3 {padding-left: 3px;}.pl-5 {padding-left: 5px;}.pl-10 {padding-left: 10px;}.pl-15 {padding-left: 15px;}.pl-20 {padding-left: 20px;}
.pr-3 {padding-right: 3px;}.pr-5 {padding-right: 5px;}.pr-10 {padding-right: 10px;}.pr-15 {padding-right: 15px;}.pr-20 {padding-right: 20px;}
.ml-3 {margin-left: 3px;}.ml-5 {margin-left: 5px;}.ml-10 {margin-left: 10px;}.ml-15 {margin-left: 15px;}.ml-20 {margin-left: 20px;}
.mr-3 {margin-right: 3px;}.mr-5 {margin-right: 5px;}.mr-10 {margin-right: 10px;}.mr-15 {margin-right: 15px;}.mr-20 {margin-right: 20px;}
.pt-0 {padding-top: 0!important;}.pt-10 {padding-top: 10px;}.pt-15 {padding-top: 15px;}.pt-20 {padding-top: 20px;}.pt-25 {padding-top: 25px;}.pt-30 {padding-top: 30px;}
.pb-0 {padding-bottom: 0!important;}.pb-10 {padding-bottom: 10px;}.pb-15 {padding-bottom: 15px;}.pb-20 {padding-bottom: 20px;}.pb-25 {padding-bottom: 25px;}.pb-30 {padding-bottom: 30px;}
.mt-0 {margin-top: 0!important;}.mt-10 {margin-top: 10px;}.mt-15 {margin-top: 15px;}.mt-20 {margin-top: 20px;}.mt-25 {margin-top: 25px;}.mt-30 {margin-top: 30px;}
.mb-0 {margin-bottom: 0!important;}.mb-10 {margin-bottom: 10px;}.mb-15 {margin-bottom: 15px;}.mb-20 {margin-bottom: 20px;}.mb-25 {margin-bottom: 25px;}.mb-30 {margin-bottom: 30px;}
.fs-8 {font-size: 8px;}.fs-10 {font-size: 10px;}.fs-12 {font-size: 12px;}.fs-14 {font-size: 14px;}.fs-16 {font-size: 16px;}.fs-18 {font-size: 18px;}.fs-20 {font-size: 20px;}.fs-22 {font-size: 22px;}.fs-24 {font-size: 24px;}.fs-26 {font-size: 26px;}.fs-28 {font-size: 28px;}.fs-30 {font-size: 30px;}
.fw-b {font-weight: bold;}.fw-n {font-weight: normal;}.ta-c {text-align: center;}.ta-l {text-align: left;}.ta-r {text-align: right;}
.flex {display: flex;flex-wrap: nowrap;}
.d-flex {display: flex;}.d-iflex {display: inline-flex;}.fd-c {flex-direction: column;}.fd-cr {flex-direction:column-reverse;}.fd-r {flex-direction: row;}.fd-rr {flex-direction:row-reverse;}.fw-w {flex-wrap: wrap;}.fw-n {flex-wrap: nowrap;}.jc-fs {justify-content: flex-start;}.jc-fe {justify-content: flex-end;}.jc-c {justify-content: center;}.jc-sb {justify-content: space-between;}.jc-sa {justify-content: space-around;}.ai-c {align-items: center;}.ai-fs {align-items: flex-start;}.ai-fe {align-items: flex-end;}.flex-1 {flex: 1;}

/* ----------------------------- loading wall ----------------------------- */

/* ----------------------------- header ----------------------------- */


.site-header {
  height: 80px;
  position: static; /* 下層ページのヘッダーは固定しない（ページと一緒にスクロール） */
  background: #fff;
  border-bottom: 1px dashed var(--main-color);
  width: 100%;
  z-index: 200;
  padding: 5px 20px;
  display: none; /* 既定は非表示（フロントはヒーローを使うため） */
  align-items: center;
}

#page.company .site-header,
#page.services .site-header {
  border-bottom: none;
}

/* 下層ページのみヘッダーを表示（フロント = body.home は非表示のまま） */
body:not(.home) .site-header {
  display: flex;
}

@media(min-width: 600px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

@media(min-width: 783px) {
  body.admin-bar .site-header {
    top: 32px;
  }
}

.site-header.visible {
  background-color: rgba(249,245,241,1);
}

.site-header .site-branding {
  height: 55px;
  padding-left: 0;
  position: static;
  transform: initial;
  width: initial;
}

.site-branding > a {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.site-branding > a img {
  height: 55px;
  object-fit: contain;
}

.site-header.visible .site-branding {
  opacity: 1;
  transition: .5s ease-in-out;
}

/* ----------------------------- first view ----------------------------- */

.home #primary {
  padding-top: calc(100vh - var(--exclusive-height));
}

#top-view {
  /* display: none; */
  height: calc(100vh - var(--exclusive-height));
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  z-index: 1000;
}



#top-view .hamburger-menu {
  opacity: 0;
  position: absolute;
  right : 30px;
  top: 20px;
  width: 30px;
  height: 30px;
  z-index: 1000;
  transition: opacity .6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
}
#top-view .hamburger-menu > span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-color);
  margin: 6px 0;
  border-radius: 2px;
  transition-duration: .3s;
}

.first-animation {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  opacity: 1;
}

.hero-logo {
  position: relative;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
  margin: 0 auto;
  max-width: 600px;

}

.shooting-arrow {
  position: absolute;
  z-index: 900;
  width: 100%;
  height: calc(100vh - var(--exclusive-height));
}

.shooting-arrow-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
}

.shooting-arrow-inner svg {
  width: 2000px;
  transition: transform 1.2s cubic-bezier(0.87, 0.11, 0.26, 0.75);
  transform: translateX(-1500px);
}

.logo-text {
  position: absolute;
  display: inline-block;
  width: 90.5%;
  opacity: 0;
  top: 47%;
  right: 0;
}

.tagline {
  position: absolute;
  text-align: center;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  opacity: 0;
}


.tagline > div {
  overflow: hidden;
  position: relative;
}

.tagline > div + div {
  margin-top: 10px;
}

.tagline > div > span {
  font-size: 20px;
  font-weight: bold;
  white-space: nowrap;
  color: #FFFFFF;
  padding: 3px 20px;
  /* グラデ(--gradient)の色をalpha 0.75で透過。文字は不透明のまま */
  background: linear-gradient(100deg, rgba(47, 108, 249, 0.75) 0%, rgba(79, 140, 255, 0.75) 100%);
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75) 0s;
}

.tagline > div:last-child > span {
  transition: transform 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75) .1s;
}

.tap-to-start {
  position: absolute;
  bottom: 0;
  left: 25px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.87, 0.11, 0.26, 0.75);
}

.scroll-line {
  width: 2px;
  height: 80px;
  background: rgba(255, 255, 255, 1);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.tap-to-start:before {
  content: "GET SET, GO!";
  top: -135px;
  writing-mode: vertical-rl;
  font-family: var(--font-poppins);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  font-size: 16px;
  color: var(--main-color);
}

.scroll-line-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: var(--main-color);
  border-radius: 2px;
  animation: scrollLineMove 2s ease-in-out infinite;
}

@keyframes scrollLineMove {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(400%);
    opacity: 0;
  }
}


@media(max-width: 389px) {
  .tagline {
    top: 25%;
  }
  .tagline > div > span {
    font-size: 20px;
  }
  
  .scroll-line {
    height: 60px;
  }
  .scroll-line-inner {
    height: 15px;
  }

  .tap-to-start::before {
    font-size: 14px;
    top: -115px;
  }
  .shooting-arrow-inner svg {
    width: 1800px;
  }
}



canvas {
  margin: 0 auto;
  width: 100px;
  height: auto;
  aspect-ratio: 212.16 / 280.58;
  display: block;
  /* filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)); */
}

/* オープニングのロゴcanvasは hero-logo 幅に対する割合で指定し、リサイズに追従させる
   （旧: first-animation.js で windowWidth から px 固定していた 289/1000 = 28.9%） */
#c {
  width: 28.9%;
}

.fade-area {
  filter: blur(10px);
  opacity: 0.5;
  transition: filter 1s cubic-bezier(0.87, 0.11, 0.26, 0.75);
  padding-left: 0;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}

/* 背景画像の上に六角形（ハニカム）の白線パターンをリピートさせ、白いフィルター風の質感を重ねる */
.fade-area::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* .fade-list の画像より前面 */
  pointer-events: none;
  opacity: 1;
  background-image: url(../svg/white_honeycomb_seamless_tile.svg);
  background-repeat: repeat;
  background-size: 4px 7px; /* ネイティブ(42x72)の約1/10にして網目をさらに細かく */
}
.fade-list {
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}

.fade-list > img{
  vertical-align: bottom;
  height: calc(100vh - var(--exclusive-height));
  width: 110vw;
  max-width: none;
  object-fit: cover;
  transform: scale(1.05);
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin : 500px 0%;
  object-position: center center;
}

@keyframes loop {
    0% { transform-origin : 0 0%;}
  100% { transform-origin : 1000px 0%;}
}

@media(min-width: 450px) {
  #top-view, .fade-list > img {
    height: 100vh;
  }
}

/* ----------------------------- common ----------------------------- */

.section-title {
  text-align: center;
  margin-bottom: 40px;
  padding: 0 15px;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
}

.section-title.animated {
  opacity: 1;
}

.section-title-e {
  position: relative;
  margin-bottom: 10px;
}

.section-title-e > div {
  text-align: left;
  position: relative;
}

.section-title-e > div img {
  width: auto;
  height: 30px;
  object-fit: contain;
}

.section-title-e > div:first-child {
  z-index: 2;
}

.section-title-e > div:first-child img {
  height: 29px;
}

.section-title-e > div:last-child {
  position: absolute;
  transition: all .6s cubic-bezier(0.87, 0.11, 0.26, 0.75), left 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
  top: -4px;
  left: -4px;

}

.section-title.animated .section-title-e > div:last-child {
  top: 2px;
  left: 2px;
}

.section-line {
  width: 0%;
  height: 1px;
  background: var(--main-color2);
  position: relative;
  transition: width 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
}

.section-title.animated .section-line {
  width: 100%;
}

.section-line span {
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  padding-right: 6px;
  width: 0px;
  transition: width 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75) .4s;
  height: 4px;
  background: #FFFFFF;
  z-index: 1;
}

.section-title.animated .section-line span {
  width: 100px;
}

.section-line span:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 2px 2px 0;
  background: var(--main-color2);
}


.section-title-j {
  margin-top: 6px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.15em;
  color: var(--text-color);
  text-align: right;
  transform: translateX(20px);
  transition: transform 0.6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
}

.section-title.animated .section-title-j {
  transform: translateX(0px);
}

section#dummy {
  display: none;
  width: 100%;
  background: #FFFFEE;
  height: 100vh;
}

/* ----------------------------- services ----------------------------- */

#services .section-content {
  padding: 0 15px;
}

.services-list {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  margin-top: 75px;
}

.service-item {
  display: flex;
  flex-direction: column;
}

/* 番号サークル同士をつなぐ縦線（左ガター内に絶対配置） */
.service-item::after {
  content: "";
  position: absolute;
  left: 36px;
  top: 37.5px;
  bottom: 0;
  width: 3px;
  height: 0%;
  background: var(--main-color);
  opacity: 0.2;
  z-index: 0;
}

.service-item.animated::after {
  height: 90%;
  transition: height 1s cubic-bezier(0.87, 0.11, 0.26, 0.75) .6s;
}

/* START / FINISH の旗（左ガターに左寄せ＝番号の上下に配置） */
.service-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 58px;
  left: 10px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.service-flag img {
  display: block;
  width: 54px;
  height: auto;
  object-fit: contain;
}

.service-flag--start {
  position: absolute;
  top: -58px;
}

.service-flag--finish {
  margin-top: 6px;
}

/* 上段：番号サークル + タイトル を同一flexコンテナで横並び */
.service-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.service-number {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 1px solid var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-poppins);
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
  color: var(--main-color);
  flex-shrink: 0;
  background: #fff;
}

/* 下段：テキスト（説明+VIEW MORE）と画像を横並び。
   番号幅ぶん左にインデントしてタイトル開始位置に揃え、左ガターに縦線スペースを残す */
.service-body {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  margin-bottom: 40px;
  z-index: 1;
  position: relative;
}

/* 大きな半透明の番号ウォーターマーク */
.service-body::before {
  content: attr(data-num);
  position: absolute;
  right: 40%;
  bottom: 0;
  font-family: var(--font-poppins);
  font-style: italic;
  font-weight: 700;
  font-size: 92px;
  line-height: 1;
  color: rgba(47, 108, 249, 0.08);
  z-index: 0;
  pointer-events: none;
}


.service-item:last-child .service-body {
  padding-bottom: 0;
}

/* テキスト */
.service-text {
  flex: 1;
  min-width: 0;
  text-align: right;
}

/* タイトル：青グラデの行ごとハイライト（白文字）。head内で番号の右に伸びる */
.service-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  line-height: 1.8;
}

.service-title span {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: var(--gradient);
  color: #fff;
  font-size: 15px;
  padding: 5px 10px;
  letter-spacing: .1em;
}

.service-desc {
  font-size: 15px;
  color: var(--text-color);
  line-height: 1.9;
  text-align: justify;
  margin: 0 0 0px;
}

/* VIEW MORE：枠なしの矢印リンク（左寄せ） */
/* ===== 矢印リンク共通スタイル（service / news / equipment で共有） =====
   枠なし＋テキスト＋右肩45度の矢印線。差分は各 *-view-more 側で上書きする。 */
a.view-more.view-more--arrow {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

a.view-more.view-more--arrow span:first-child {
  height: auto;
  vertical-align: baseline;
}

a.view-more.view-more--arrow span:last-child {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  margin-left: 10px;
  width: 34px;
  height: 1px;
  background: var(--text-color);
  overflow: visible;
}

a.view-more.view-more--arrow span:last-child::before {
  display: none;
}

a.view-more.view-more--arrow span:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--text-color);
  transform: translateY(-50%) rotate(45deg);
}

/* service 固有：右マージン */
a.view-more.service-view-more {
  margin-right: 10px;
}

/* 画像列（右にはみ出し＋左上オレンジコーナー） */
.service-image {
  flex-shrink: 0;
  width: 36%;
  margin-right: -15px;
  margin-top: 4px;
  position: relative;
  z-index: 1;
  align-self: flex-start;
}

.service-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 4;
  object-fit: cover;
  border-radius: 8px 0 0 8px;
  display: block;
}

/* ----------------------------- achievement ----------------------------- */
#achievement .section-content {
  padding: 0 15px;
}

.achievement-group {
  margin-bottom: 30px;
}
.achievement-group:last-child {
  margin-bottom: 0;
}

/* グループ見出しバー */
.achievement-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(90deg, #2F6CF9 0%, #2F6CF9 38%, #93b4f7 70%, #e3edff 100%);
  padding: 9px 12px;
  margin-bottom: 2px;
}

.achievement-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.achievement-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex-shrink: 0;
}
.achievement-head-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.achievement-head-label {
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.achievement-head-cols {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.achievement-head-cols span {
  width: 42px;
  text-align: center;
  font-size: 8px;
  font-weight: bold;
  color: var(--text-color);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* リスト */
.achievement-list {
  margin-bottom: 4px;
}

.achievement-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 12px;
  border-bottom: 1px solid rgba(23, 5, 90, 0.6);
}

/* スクロールで出現する実績リスト（.ani-obj グループ＝トップページ）の各行を、
   --row（PHPで付与した行番号）×0.1s ずつ遅延させ、上から順番に表示する。
   ※アーカイブの achievement-group は .ani-obj を持たないため対象外（行は常時表示）。 */
.achievement-group.ani-obj .achievement-item {
  opacity: 0;
  transform: translateY(15px);
  filter: blur(2px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  transition-delay: calc(var(--row, 0) * 0.1s);
}
.achievement-group.ani-obj.animated .achievement-item {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.achievement-info {
  flex: 1;
  min-width: 0;
}

.achievement-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 3px;
}
.achievement-date {
  font-size: 12px;
  font-weight: 600;
  color: #3a5bbf;
  white-space: nowrap;
}
.achievement-loc {
  font-size: 12px;
  color: #8a8a98;
}

.achievement-name {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
  color: var(--text-color);
}

/* ボタン */
.achievement-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.achievement-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s, transform .2s;
}
.achievement-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.achievement-btn--report {
  background: var(--main-color2);
}
.achievement-btn--web {
  background: var(--main-color);
}
a.achievement-btn:active {
  transform: scale(0.94);
}
.achievement-btn.is-disabled {
  opacity: 0.28;
  pointer-events: none;
}

.achievement-empty {
  padding: 22px 12px;
  text-align: center;
  color: #8a8a98;
  font-size: 13px;
}


/* ----------------------------- information / news ----------------------------- */
#information .section-content {
  padding: 0 15px;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
  max-width: 800px;
  margin: 0 auto;
}

.news-item {
  display: flex;
  align-items: stretch;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--main-color);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px 14px;
}

.news-date {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 12px;
  font-family: var(--font-poppins);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--text-color);
}
.news-date::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1px;
  bottom: 1px;
  width: 2px;
  border-radius: 1px;
  background: var(--main-color);
}

.news-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.news-title {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--text-color);
}

/* カード内 VIEW MORE：右寄せの矢印リンク */
/* news 固有：右下寄せ＋上マージン（共通スタイルは .view-more--arrow 参照） */
a.view-more.news-view-more {
  align-self: flex-end;
  margin: 8px 0 0;
  position: static; /* カード全面ストレッチリンク（::after）の基準をカードにするため */
}

.news-empty {
  padding: 22px 12px;
  text-align: center;
  color: #8a8a98;
  font-size: 13px;
}

/* ----------------------------- event report（実施報告 カルーセル） ----------------------------- */
#report .section-content {
  padding: 0;
}

.report-carousel-wrap {
  position: relative;
}

/* カルーセル本体（スクロールスナップ＋両脇ピーク）
   手動スクロールは無効化し、report-navボタンのJS(scrollBy)でのみスライドさせる。
   ※clipではなくhidden: hiddenはプログラム的scrollByが効くがclipは効かない */
.report-carousel {
  display: flex;
  gap: 12px;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* カード幅をvw基準にし、左右ピークも同じvwにすることで1枚目も含め全カードが中央スナップする
     （%だとpadding込みのcontent基準になり1枚目が中央化できずズレる） */
  padding: 4px 10vw 8px;
  scrollbar-width: none;
}
.report-carousel::-webkit-scrollbar {
  display: none;
}

.report-card {
  flex: 0 0 80vw;
  scroll-snap-align: center;
  background: #fff;
  border: 1px solid var(--main-color);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text-color);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.report-card:hover {
  transform: translateY(-4px);
  box-shadow: 3px 6px 16px -2px rgb(20 40 90 / 18%);
}

/* EVENTカードと同じホバー（少し浮く）の transition 指定。
   transform 上書きの hover 本体は .ani-obj.animated より後ろで定義（詳細度同値のため順序で勝たせる） */
.news-item,
.equipment-card,
.blog-card {
  transition: transform .25s ease, box-shadow .25s ease;
}

.report-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 16px;
  padding-bottom: 0;
}
.report-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.report-card-body {
  padding: 12px 16px 16px;
}

.report-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.report-card-date {
  font-family: var(--font-poppins);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color);
}
.report-badge {
  font-size: 10px;
  font-weight: bold;
  color: var(--main-color2);
  border: 1px solid var(--main-color2);
  border-radius: 4px;
  padding: 1px 9px;
  line-height: 1.7;
}

.report-card-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
  color: var(--text-color);
}

.report-card-table {
  margin: 0 0 14px;
}
.report-row {
  display: flex;
  gap: 8px;
  padding: 6px 2px;
  border-bottom: 1px dashed rgba(47, 108, 249, 0.28);
  font-size: 11px;
  line-height: 1.6;
}
.report-row:first-child {
  border-top: 1px dashed rgba(47, 108, 249, 0.28);
}
.report-row dt {
  flex: 0 0 64px;
  margin: 0;
  font-weight: bold;
  color: var(--main-color);
  white-space: nowrap;
}
.report-row dd {
  flex: 1;
  margin: 0;
  color: var(--text-color);
  font-size: 12px;
}

/* runner ナビボタン */
.report-nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--main-color);
  box-shadow: 0 3px 9px rgba(23, 5, 90, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.report-nav img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
/* アクティブカードと隣のカードの間(gap中心)に配置。
   カード左端=10vw / gap=12px → gap中心=10vw-6px、ボタン半幅22pxを引いて 10vw-28px */
.report-nav--prev {
  left: calc(10vw - 28px);
}
.report-nav--next img {
  transform: scaleX(-1);
}
.report-nav--next {
  right: calc(10vw - 28px);
}
.report-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.report-empty {
  padding: 22px 12px;
  text-align: center;
  color: #8a8a98;
  font-size: 13px;
}

/* ----------------------------- equipment（機材レンタル） ----------------------------- */
#equipment .section-content {
  padding: 0 15px;
}

.equipment-intro {
  font-size: 13px;
  line-height: 1.9;
  color: var(--text-color);
  margin: 0 0 22px;
}
.equipment-intro a {
  color: var(--main-color);
  text-decoration: underline;
  font-weight: bold;
}

.equipment-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}

.equipment-card {
  background: #fff;
  border: 1px solid var(--main-color);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.equipment-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eef1fb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.equipment-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.equipment-body {
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.equipment-name {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  color: var(--text-color);
}

.equipment-desc {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.7;
  color: #6c6f86;
  text-align: justify;
}

.equipment-price {
  margin: auto 0 0;
  text-align: right;
  font-size: 15px;
  font-weight: bold;
  color: var(--text-color);
  font-family: var(--font-poppins);
}
.equipment-price .equipment-unit {
  font-size: 13px;
  font-weight: bold;
}
.equipment-price .equipment-tilde {
  font-size: 14px;
}

/* カード内 VIEW MORE：右寄せ矢印リンク */
/* equipment 固有：右下寄せ＋上マージン、ラベル小さめ＋矢印線やや短め
   （共通スタイルは .view-more--arrow 参照） */
a.view-more.equipment-view-more {
  align-self: flex-end;
  margin: 8px 0 0;
  position: static; /* カード全面ストレッチリンク（::after）の基準をカードにするため */
}
a.view-more.equipment-view-more span:first-child {
  font-size: 11px;
}
a.view-more.equipment-view-more span:last-child {
  margin-left: 8px;
  width: 28px;
}

.equipment-empty {
  grid-column: 1 / -1;
  padding: 22px 12px;
  text-align: center;
  color: #8a8a98;
  font-size: 13px;
}

/* ----------------------------- daily blog（代表の毎日） ----------------------------- */
#blog .section-content {
  padding: 0 15px;
}

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 4px;
}

.blog-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--main-color);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px;
}

.blog-card-thumb {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  background: #eef1fb;
}
.blog-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-body {
  flex: 1;
  min-width: 0;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.blog-card-date {
  font-family: var(--font-poppins);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color);
}
.blog-tag {
  font-size: 10px;
  font-weight: bold;
  color: var(--main-color2);
  border: 1px solid var(--main-color2);
  border-radius: 11px;
  padding: 1px 12px;
  line-height: 1.7;
}

.blog-card-title {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
  color: var(--text-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-excerpt {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: #6c6f86;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-empty {
  padding: 22px 12px;
  text-align: center;
  color: #8a8a98;
  font-size: 13px;
}

/* ----------------------------- contact（お問い合わせ） ----------------------------- */

#contact .section-content {
  padding: 0 15px;
  max-width: 450px;
  margin: 0 auto;
}

.contact-text {
  margin-bottom: 10px;
}
.contact-text p {
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-color);
  margin: 0 0 20px;
}
.contact-text p:last-child {
  margin-bottom: 0;
}

/* ----------------------------- concept ----------------------------- */

#concept {
  max-width: 800px;
  /* overflow:initial(=visible)だと section の overflow-x:clip を打ち消し、
     右からのreveal演出(.right-to-left の初期 translateX(30px))が右にはみ出して白帯になる。
     横だけクリップし縦は見せる。 */
  overflow-x: clip;
}

@media(min-width: 800px) {
  #concept {
    overflow: visible;
  }
}

#concept .section-content > div {
  position: relative;
  display: flex;
}

#concept .section-content > div > div:first-child {
  width: 40%;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

#concept .section-content > div > div:nth-child(2) {
  flex: 1;
  margin-top: 30px;
  position: relative;
  z-index: 1;
}

.vertical-text-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
  color: var(--text-color);
  display: block;
  line-height: 1.8;
  text-align: left;
}

#concept .section-content > div > div:nth-child(2) > div {
  display: flex;
  flex-direction: column;
}

#concept .section-content > div > div:nth-child(2) > div img {
border-radius: 10px 0 0 10px;
}

#concept .section-content > div > div:nth-child(2) > div .text-wrapper {
  position: relative;
  margin-top: 40px;
  width: 120%;
  position: relative;
  left: -20%;
}

#concept .section-content > div > div:nth-child(2) > div .text-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--main-color2);
}

#concept .section-content > div > div:nth-child(2) > div p {
  padding: 3px 12px;
  margin: 0;
  text-align: justify;
}

#concept .concept-bg-logo {
  position: absolute;
  top: 50px;
  left: -40px;
  width: 200px;
  object-fit: contain;
  opacity: 0.1;
}

a.view-more {
  position: relative;
  display: block;
  width: fit-content;
  height: 40px;
  padding: 10px 50px;
  margin: 36px auto;
  border-radius: 20px;
  border: 1px solid var(--main-color);
  background: var(--background);
  box-shadow: var(--shadow);
  cursor: pointer;
}

a.view-more span {
  color: var(--text-color);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  font-family: var(--font-poppins);
  font-style: italic;
}

a.view-more span:first-child {
  display: inline-block;
  height: 20px;
  vertical-align: super;
}

a.view-more span:last-child {
  position: absolute;
  overflow: hidden;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 50px;
  height: 1px;
}

a.view-more span:last-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--text-color);
  animation: lineEffect 1.2s cubic-bezier(0.87, 0.11, 0.26, 0.75) infinite;
}

@keyframes lineEffect {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* ----------------------------- footer ----------------------------- */

.site-footer {
  position: relative;
  z-index: 100;
  background: #FFFFFF;
  border-top: 1px dashed var(--main-color);
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 40px 20px 70px;
  max-width: 800px;
  margin: 0 auto;
}

.footer-logo {
  text-align: center;
}
.footer-logo img {
  width: 100%;
  max-width: 175px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.footer-left {
  flex: 1;
}

.footer-right {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-nav li {
  margin: 0;
}
/* モダンなリンク：日本語＋英語サブラベル、左アクセントバー、ホバーでスライド */
.footer-nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-color);
  transition: background-color .25s ease, transform .25s ease;
}
.footer-nav a::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  border-radius: 3px;
  background: var(--gradient);
  transition: transform .25s ease;
}
.footer-nav-ja {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.footer-nav-en {
  font-family: var(--font-poppins);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--main-color);
  opacity: .65;
  transition: opacity .25s ease;
}
.footer-nav a:hover {
  background: #f2f6ff;
  transform: translateX(2px);
}
.footer-nav a:hover::before {
  transform: translateY(-50%) scaleY(1);
}
.footer-nav a:hover .footer-nav-en {
  opacity: 1;
}

.footer-social {
  display: flex;
  margin-top: 24px;
  justify-content: center;

}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-social img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.site-footer .site-info {
  background: var(--gradient);
  color: #fff;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 0;
  height: 52.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.conversion-area-bottom {
  position: fixed;
  bottom: 20px;
  right: -100%;
  width: 350px;
  background: rgba(255, 255, 255, .9);
  z-index: 2000;
  border-top: 1px solid #FFFFFF;
  padding: 10px;
  padding-right: 0;
  border-radius: 30px 0 0 30px;
  border-right: none;
  transition-duration: .5s;
  transition-timing-function: ease-in-out;
  box-shadow: var(--shadow);
}

.conversion-area-bottom .appeal-text {
  position: absolute;
  top: -41px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.conversion-area-bottom .appeal-text > div {
  font-size: 14px;
  font-weight: bold;
  color: var(--main-color);
}

.conversion-area-bottom .appeal-text > img{
  width: 60%;
}

.conversion-area-bottom .contact-btn {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 5px;
  height: 40px;
  width: 100%;
  border-radius: 20px 0 0 20px;
  background: var(--main-color);
  margin: 0 auto;
  margin-right: 0;
  position: relative;
  overflow: hidden;
}

.conversion-area-bottom .contact-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
  animation: shine 4s infinite;
}

.conversion-area-bottom .contact-btn > div {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .1em;
}

@media(max-width: 500px) {
  .conversion-area-bottom {
    width: 300px;
  }

  .conversion-area-bottom .appeal-text {
    top: -37px;
  }
  
  
}

/* ----------------------------- side menu ----------------------------- */

/* ----------------------------- components ----------------------------- */

.bottom-menu-container {
  position: fixed;
  bottom: 20px;
  right: -75px;
  transition: right .6s cubic-bezier(0.87, 0.11, 0.26, 0.75);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 65px;
}


#scrollTopButton {
  padding: 10px 20px;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.7);
  width: 65px;
  height: 65px;
  color: white;
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  cursor: pointer;
  transition-duration: .3s;
  box-shadow: var(--shadow);
  display: none;
  background:conic-gradient(var(--main-color) 0%, var(--main-color) 39.2%, rgb(255,255,255) 38.2%, rgb(255,255,255) 100%);
}

#scrollTopButton .scroll-top-button-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  display: flex;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  z-index: 1;
}

#scrollTopButton .scroll-top-button-inner > div {
  width: 100%;
  text-align: center;
}

.km-display-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  font-family: var(--font-poppins);
  font-style: italic;
  position: absolute;
  bottom: 10px;
}

.km-display-container > div {
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  font-family: var(--font-poppins);
  font-style: italic;
  line-height: 1.2;
  color: var(--main-color);
}

#scrollTopButton:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow);

}

#scrollTopButton::before,
#scrollTopButton::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 25%;
  width: 12px;
  height: 2px;
  background: var(--main-color);
  transform: translate(-50%, -50%);
  opacity: 1;
  z-index: 2;
}

#scrollTopButton::before {
  transform: translate(-50%, -50%) rotate(45deg);
  left: calc(50% + 4px);

}

#scrollTopButton::after {
  transform: translate(-50%, -50%) rotate(-45deg);
  left: calc(50% - 4px);

}

#menuButton {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 10px;
  font-size: 18px;
  width: 65px;
  height: 65px;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  cursor: pointer;
  transition-duration: .3s;
  box-shadow: var(--shadow);
  background: var(--gradient);
  transition: all .3s cubic-bezier(0.87, 0.11, 0.26, 0.75);
  z-index: 10;
}
#menuButton:hover {
  transform: scale(1.01);
  box-shadow: var(--shadow);
}

#menuButton > div {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#menuButton .hamburger-menu > span {
  display: block;
  width: 28px;
  height: 2px;
  background: white;
  margin: 6px 0;
  border-radius: 2px;
  transition-duration: .3s;
}

/* ----------------------------- animation ----------------------------- */

.ani-obj, .ani-obj-0, .ani-obj-250 {
  opacity: 0!important;
  transition-duration: .6s;
  transform: translateY(15px);
  filter: blur(2px);

}

.right-to-left {
  transform: translateX(30px);
}

.text-wrapper::before {
  transition: height .6s cubic-bezier(0.87, 0.11, 0.26, 0.75) .4s;
  height: 0%!important;
}

.ani-obj.animated, .ani-obj-0.animated, .ani-obj-250.animated {
  opacity: 1!important;
  transform: translateY(0px);
  filter: blur(0px);

}

/* EVENT REPORTカードと同じホバー（少し浮く）を他セクションのカードにも適用。
   .ani-obj.animated が transform:translateY(0) を当てるため、ここで（後方＝同詳細度で勝つ）上書きする。
   informationは VIEW MORE（記事リンク）を持つカードのみホバーさせる */
.news-item:has(.news-view-more):hover,
.equipment-card:hover,
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 3px 6px 16px -2px rgb(20 40 90 / 18%);
}

/* カード全体をリンクにする（VIEW MOREリンクの擬似要素をカード全面に拡張＝ストレッチリンク）。
   informationは VIEW MORE 有りのカードのみ、equipmentは全カードが対象 */
.news-item,
.equipment-card {
  position: relative;
}
.news-view-more::after,
.equipment-view-more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ani-obj-opacity02.animated {
  opacity: 0.1!important;
}

.right-to-left.animated {
  transform: translateX(0);
}

.text-wrapper.animated::before {
  height: 100%!important;
}


/* ----------------------------- responsive ----------------------------- */

@media(min-width: 600px) {

  .footer-right {
    width: 320px;
  }

  .footer-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .footer-nav ul > li {
    width: calc(50% - 3px);
  }

}

@media(min-width: 776px) {
  .vertical-text {
    font-size: 32px;
    line-height: 2;
  }

  #concept .concept-bg-logo {
    width: 300px;
  }

  #concept .section-content > div > div:nth-child(2) > div p {
    line-height: 2;
  }

  .service-body {
    padding-left: 300px;
  }
  .service-image img {
    aspect-ratio: 4 / 3.5;
  }
  .service-body::before {
    right: 25%;
  }

  /* EVENT REPORT: カルーセルは維持したまま1度に2枚表示する
     カード幅を (コンテンツ幅 - gap) / 2 にして2枚ぴったり。左右はnavボタン用のガター */
  .report-carousel {
    padding: 4px 48px 8px;
    /* start スナップ時にカードが左ガターを食い潰さないよう、padding分スナップ位置をずらす */
    scroll-padding-left: 48px;
  }
  .report-card {
    flex: 0 0 calc((100% - 12px) / 2);
    scroll-snap-align: start;
  }
  /* navボタンを左右カードの外側端に対称に重ねる（card左端/右端＝padding48px、ボタン半径22px → 48-22=26px） */
  .report-nav--prev {
    left: 20px;
  }
  .report-nav--next {
    right: 20px;
  }

  /* EQUIPMENT: 2列 → 3列グリッド */
  .equipment-list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* DAILY BLOG: 1列 → 2列グリッド */
  .blog-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(min-width: 800px) {

  #concept .section-content > div > div:nth-child(2) > div img {
    border-radius: 10px;
  }

  #concept .concept-bg-logo {
    left: -23px;
  }

}

@media(min-width: 900px) {
  .service-body {
    padding-left: 360px;
    margin-top: -80px;
  }
  .service-image img {
    aspect-ratio: 4 / 2.5;
  }
}

@media(min-width: 1000px) {

  .tap-to-start {
    transform: scale(1.5);
    left: 50px;
  }

  .tagline {
    top: 20%
  }

  .tagline > div > span {
    font-size: 30px;
  }

  /* .hero-logo {
    left: -150px;
  }
  .tagline {
    left: calc(50% - 150px);
  } */

  /* EVENT REPORT: 1度に3枚表示。左右の見切れカードを出さないため padding 0 で
     3枚がコンテナ幅を丁度埋める（4枚目は完全に画面外）。navボタンはカード端に重ねる。 */
  .report-carousel {
    padding: 4px 0 8px;
    scroll-padding-left: 0;
  }
  .report-card {
    flex: 0 0 calc((100% - 24px) / 3); /* 3枚 + gap(12px)×2 */
  }
  .report-nav--prev {
    left: 4px;
  }
  .report-nav--next {
    right: 4px;
  }

  /* EQUIPMENT: 3列 → 4列グリッド */
  .equipment-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .service-image {
    margin-right: 0px;
  }

  .service-image img {
    border-radius: 10px;
  }

  #achievement .section-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
  }
  #achievement .section-content > div { 
    width: calc(50% - 10px);
  }

}
/* ----------------------------- single post (daily blog) ----------------------------- */

/* 本文＋サイドバーのレイアウト（固定ヘッダー分の余白を確保） */
.single-post #content-inside {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px 40px;
}
.single-post #primary {
  max-width: 900px;
  margin: 0 auto;
}

/* 記事ヘッダー */
.single-post .entry-header {
  margin-bottom: 20px;
}
.single-post .entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.single-post .entry-date {
  font-family: var(--font-poppins);
  font-weight: bold;
  font-size: 13px;
  color: var(--main-color);
}
.single-post .entry-tag {
  font-size: 11px;
  font-weight: bold;
  color: var(--main-color);
  border: 1px solid var(--main-color);
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 1.6;
}
/* テーマの .entry-header .entry-title(中央寄せ/32px) を上書きするため詳細度を上げる */
.single-post .entry-header .entry-title {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
  letter-spacing: .02em;
  color: var(--text-color);
}

/* アイキャッチ */
.single-post .entry-thumbnail {
  margin-bottom: 28px;
}
.single-post .entry-thumbnail img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}

/* 本文タイポグラフィ */
.single-post .entry-content {
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-color);
}
.single-post .entry-content > * + * {
  margin-top: 1.4em;
}
.single-post .entry-content h2 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  margin-top: 2em;
  padding: 8px 0 8px 14px;
  border-left: 5px solid var(--main-color);
}
.single-post .entry-content h3 {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.5;
  margin-top: 1.8em;
  padding-bottom: 6px;
  border-bottom: 2px solid #d6e1fb;
}
.single-post .entry-content h4 {
  font-size: 15px;
  font-weight: bold;
  margin-top: 1.6em;
}
.single-post .entry-content p {
  margin: 0;
}
.single-post .entry-content a {
  color: var(--main-color);
  text-decoration: underline;
}
.single-post .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.single-post .entry-content ul,
.single-post .entry-content ol {
  padding-left: 1.5em;
}
.single-post .entry-content li + li {
  margin-top: 0.4em;
}
.single-post .entry-content blockquote {
  margin: 1.4em 0;
  padding: 12px 16px;
  background: #f2f6ff;
  border-left: 4px solid var(--main-color);
  border-radius: 0 8px 8px 0;
  color: #50607a;
}
.single-post .entry-content blockquote p {
  font-size: 14px;
}

/* 一覧に戻る */
.single-post .return-to,
.blog-archive .return-to,
.archive-page .return-to,
.company-page .return-to,
.services-page .return-to,
.contact-page .return-to {
  margin: 36px auto 0;
  text-align: center;
}
.single-post .return-to {
  max-width: 720px;
}
.single-post .return-to a,
.blog-archive .return-to a,
.archive-page .return-to a,
.company-page .return-to a,
.services-page .return-to a,
.contact-page .return-to a {
  display: inline-block;
  padding: 12px 32px;
  border: 1px solid var(--main-color);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: bold;
  color: var(--main-color);
}

/* サイドバー：グローバル section の余白(90px/max-width)を打ち消す */
.single-post #secondary {
  max-width: 720px;
  margin: 56px auto 0;
}
.single-post .widget-area .widget {
  width: 100%;
  max-width: none;
  margin: 0 0 24px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #d6e1fb;
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow-x: visible;
}
/* ウィジェット見出し。レガシー(.widget-title)もブロック(.wp-block-heading)も両対応 */
.single-post .widget-area .widget .widget-title,
.single-post .widget-area .widget .wp-block-heading {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: .04em;
  text-transform: none;
  line-height: 1.5;
  color: var(--text-color);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #d6e1fb;
}
.single-post .widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.single-post .widget li {
  padding: 6px 0;
  border-bottom: 1px dashed #e3e9f7;
  font-size: 13px;
  line-height: 1.6;
}
.single-post .widget li:last-child {
  border-bottom: none;
}
.single-post .widget a {
  color: var(--text-color);
}
.single-post .widget a:hover {
  color: var(--main-color);
}

/* PC：本文とサイドバーを横並び（サイドバーがある .right-sidebar の時のみ。
   サイドバー無しのページ（実績報告など）は #primary 中央寄せのまま） */
@media(min-width: 900px) {
  .single-post #content-inside.right-sidebar {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }
  .single-post #content-inside.right-sidebar #primary {
    flex: 1;
    min-width: 0;
    margin: 0;
  }
  .single-post #secondary {
    flex: 0 0 280px;
    margin: 0;
  }
}

/* 実績報告（EVENT REPORT）個別ページの情報リスト */
.report-info-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;                 /* セル間の罫線として背景色を見せる */
  background: #d6e1fb;
  border: 1px solid #d6e1fb;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 28px;
}
.report-info-row {
  display: flex;
  background: #fff;
  flex-direction: column;
}
.report-info-row dt {
  padding: 12px 14px;
  background: #f2f6ff;
  font-size: 13px;
  font-weight: bold;
  color: var(--main-color);
  line-height: 1.6;
  margin: 0;
}
.report-info-row dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-color);
}

/* PC：2列。実施種目など長い項目は全幅に */
@media(min-width: 768px) {
  .report-info-list {
    grid-template-columns: 1fr 1fr;
  }
  .report-info-row--full {
    grid-column: 1 / -1;
  }
}

/* 機材レンタル 個別ページの価格表示 */
.equipment-single-price {
  margin: 0 0 20px;
  font-family: var(--font-poppins);
  font-weight: bold;
  font-size: 28px;
  line-height: 1.2;
  color: var(--main-color);
}
.equipment-single-price .equipment-tilde {
  font-size: 16px;
  margin: 0 2px;
}
.equipment-single-price .equipment-unit {
  font-size: 14px;
  font-weight: normal;
  color: var(--text-color);
}

/* ----------------------------- 一覧ページ（daily blog / 各CPTアーカイブ）共通 ----------------------------- */
.blog-archive,
.archive-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px 40px;
}
.blog-archive .entry-header,
.archive-page .entry-header,
.contact-page .entry-header {
  margin-bottom: 24px;
}
.blog-archive .entry-title,
.archive-page .entry-title,
.contact-page .entry-title {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
  color: var(--text-color);
}
/* カード一覧は #blog セクションと同じ .blog-list（モバイル1列 / 776px〜2列）を流用 */

/* ページネーション */
.blog-pagination {
  margin-top: 32px;
}
.blog-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-pagination .page-numbers li {
  margin: 0;
}
.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #d6e1fb;
  background: #fff;
  font-size: 14px;
  font-weight: bold;
  color: var(--main-color);
}
.blog-pagination .page-numbers span.current {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}
.blog-pagination .page-numbers a:hover {
  background: #f2f6ff;
}

/* 下層ページのフローティング メニューボタン（scrollTopButtonは無し） */
.page-menu-fixed {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 65px;
  height: 65px;
  z-index: 1100;
}

/* 事業実績アーカイブ：主催/受託 タブ切り替え */
.achievement-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.achievement-tab {
  padding: 11px 26px;
  border: 1px solid var(--main-color);
  border-radius: 999px;
  background: #fff;
  color: var(--main-color);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.achievement-tab.is-active {
  background: var(--main-color);
  color: #fff;
}
/* アーカイブではタブで該当グループのみ表示（フロントは両方表示のまま） */
.archive-page .achievement-group {
  display: none;
}
.archive-page .achievement-group.is-active {
  display: block;
}

/* ----------------------------- 会社紹介（COMPANY PROFILE）ページ ----------------------------- */
.company-page,
.services-page {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 60px;
}
.company-hero,
.services-hero {
  width: 100%;
  aspect-ratio: 16 / 7;
  background: #eef1fb;
  overflow: hidden;
}
.company-hero img,
.services-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.company-inner,
.services-inner {
  padding: 0 20px;
}

/* 下層ページの 日本語見出し / 英字見出し（会社紹介・事業紹介で共用） */
.company-head,
.services-head {
  margin: -20px 0 8px;
  position: relative;
  z-index: 1;
}
.company-head-ja,
.services-head-ja {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
  background: #FFFFFF;
  width: fit-content;
  padding: 5px 10px;
}
.company-head-line,
.services-head-line {
  height: 1px;
  background: #c9d6f4;
  margin: 10px 0;
}
.company-head-en,
.services-head-en {
  text-align: right;
  margin: 0;
  font-family: var(--font-poppins);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: .04em;
  color: #dbe4f7;
}

.company-head-en {
  font-size: 30px;
}

/* セクション共通 */
.company-section {
  margin-top: 48px;
}
.company-section-title {
  margin: 0 0 28px;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: var(--text-color);
}

/* 代表挨拶（スマホは縦積み、768px以上で写真+本文の横並び） */
.company-greeting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.company-greeting-photo {
  flex: none;
  width: 180px;
  max-width: 70%;
  margin: 0;
}
.company-greeting-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.company-greeting-photo figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: var(--text-color);
}
.company-greeting-text {
  flex: 1;
  min-width: 0;
}
.company-greeting-text p {
  margin: 0 0 1.2em;
  font-size: 14px;
  line-height: 1.95;
  color: var(--text-color);
  text-align: justify;
}
.company-greeting-text p:last-child {
  margin-bottom: 0;
}

/* 会社概要テーブル */
.company-table {
  margin: 0;
  border-top: 1px solid #c9d6f4;
}
.company-row {
  display: flex;
  border-bottom: 1px solid #c9d6f4;
}
.company-row dt {
  flex: 0 0 110px;
  margin: 0;
  padding: 14px 12px;
  background: #f2f6ff;
  font-size: 13px;
  font-weight: bold;
  color: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.company-row dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-color);
  text-align: center;
}

@media(min-width: 768px) {
  .company-greeting {
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
  }
  .company-greeting-photo {
    flex: 0 0 200px;
    width: 200px;
    max-width: none;
  }
  .company-greeting-photo figcaption {
    font-size: 13px;
  }
  .company-head-en,
  .services-head-en {
    font-size: 50px;
  }
  .company-row dt {
    flex-basis: 200px;
  }
}

/* ----------------------------- サイドメニュー（右からスライドイン） ----------------------------- */
.side-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 60, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 1200;
}
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 80%;
  height: 100%;
  background: #fff;
  /* 隠れている時に影が画面左へ滲まないよう、初期は透明にして開いた時だけ表示 */
  box-shadow: -4px 0 24px rgba(20, 40, 90, 0);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(0.87, 0.11, 0.26, 0.75), box-shadow .35s ease;
  z-index: 1300;
  padding: 30px 0 40px;
  overflow-y: auto;
}
/* メニュー表示中は背面のページスクロールを禁止（インラインstyleに勝つため!important） */
body.side-menu-open {
  overflow: hidden !important;
}
body.side-menu-open .side-menu-overlay {
  opacity: 1;
  visibility: visible;
}
body.side-menu-open .side-menu {
  transform: translateX(0);
  box-shadow: -4px 0 24px rgba(20, 40, 90, 0.15);
}

/* メニューを開いている間は menuButton を最前面に出して閉じるボタン化する */
body.side-menu-open .bottom-menu-container,
body.side-menu-open .page-menu-fixed {
  z-index: 1400;
}
/* 開いている時は3本線を×に変形 */
body.side-menu-open #menuButton .hamburger-menu span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
body.side-menu-open #menuButton .hamburger-menu span:nth-child(2) {
  opacity: 0;
}
body.side-menu-open #menuButton .hamburger-menu span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
/* 開いている時はトップへ戻るボタン（フロント）を隠してメニューと重ならないように */
body.side-menu-open #scrollTopButton {
  opacity: 0;
  visibility: hidden;
}

/* メニュー上のロゴ */
.side-menu-logo {
  padding: 0 24px 30px;
}
.side-menu-logo img {
  width: 225px;
  max-width: 90%;
  height: auto;
  display: block;
}

.side-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #eef1fb;
}
.side-menu-list li {
  border-bottom: 1px solid #eef1fb;
  margin: 0;
}
.side-menu-list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 24px;
}
.side-menu-ja {
  font-size: 15px;
  font-weight: bold;
  color: var(--text-color);
  transition: color .2s;
}
.side-menu-en {
  font-family: var(--font-poppins);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--main-color);
  opacity: .75;
}
.side-menu-list a:hover {
  background: #f6f9ff;
}
.side-menu-list a:hover .side-menu-ja {
  color: var(--main-color);
}

/* スマホはリストを2列表示（パネルを広げて折り返しを防ぐ） */
@media(max-width: 767px) {
  .side-menu {
    width: 340px;
    max-width: 88%;
  }
  .side-menu-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .side-menu-list li:nth-child(odd) {
    border-right: 1px solid #eef1fb;
  }
  .side-menu-list a {
    padding: 12px 16px;
  }
  .side-menu-en {
    letter-spacing: .1em;
  }
}

/* メニュー下のソーシャルアイコン */
.side-menu-social {
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 26px 24px;
}
.side-menu-social img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* ----------------------------- 事業紹介ページ 本文 ----------------------------- */
.svc {
  margin-top: 56px;
  scroll-margin-top: 24px; /* WHAT WE DO からのアンカー着地時に上部へ少し余白 */
}
/* グラデ文字の番号 ＋ SERVICE ラベル ＋ グラデのアクセント下線 */
.svc-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
  padding-bottom: 18px;
}
.svc-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--main-color) 0%, #4f8cff 64px, #d9e3f8 64px, #d9e3f8 100%);
}
.svc-num {
  flex-shrink: 0;
  position: relative;
  font-family: var(--font-poppins);
  font-style: italic;
  font-weight: 700;
  font-size: 52px;
  line-height: .85;
  /* 斜体グリフの右端が background-clip:text の描画域から欠けないよう右に余白を確保 */
  padding-right: .14em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.svc-num::before {
  content: "SERVICE";
  position: absolute;
  top: -14px;
  left: 2px;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--main-color);
  -webkit-text-fill-color: var(--main-color);
}
.svc-title {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.45;
  color: var(--text-color);
}

/* 小見出し（マラソン計測事業 など） */
.svc-sub {
  margin: 36px 0 18px;
  padding: 8px 14px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: var(--gradient);
  border-radius: 6px;
}
.svc-body > .svc-sub:first-child {
  margin-top: 0;
}

.svc-lead {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: bold;
  color: var(--main-color);
}
.svc-desc {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--text-color);
  text-align: justify;
}

/* 画像＋テキストの特徴ブロック */
.svc-feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
}
.svc-feature-img {
  text-align: center;
}
.svc-feature-img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  box-shadow: var(--shadow);
}
/* 機材・制作物などは欠けさせず全体を見せる（影なし） */
.svc-feature-img--contain img {
  object-fit: contain;
  box-shadow: none;
  margin: 0 auto;
  width: 80%;
}

#service01 > div.svc-body > div:nth-child(3) > div.svc-feature-img.svc-feature-img--contain > img {
  background-color: #f4f8ff;
}


.svc-feature-text h4 {
  margin: 0 0 8px;
  padding-left: 12px;
  border-left: 4px solid var(--main-color);
  font-size: 15px;
  font-weight: bold;
  color: var(--text-color);
}
.svc-feature-text h4 + p {
  margin-top: 0;
}
.svc-feature-text p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-color);
  text-align: justify;
}
.svc-feature-text p:last-child {
  margin-bottom: 0;
}

/* 実績リスト */
.svc-list {
  list-style: none;
  margin: 4px 0 18px;
  padding: 16px 18px;
  background: #f2f6ff;
  border-radius: 10px;
}
.svc-list li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color);
}
.svc-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--main-color2);
  border-right: 2px solid var(--main-color2);
  transform: rotate(45deg);
}

/* ギャラリー */
.svc-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}


.svc-gallery-item {
  overflow: hidden;
  border-radius: 8px;
}


.svc-gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  transform: scale(1.05);
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Coming soon */
.svc-coming {
  text-align: center;
  padding: 48px 20px;
  background: #f2f6ff;
  border-radius: 12px;
}
.svc-coming-en {
  font-family: var(--font-poppins);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .05em;
  color: var(--main-color);
}
.svc-coming p {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-color-gray);
}

/* PC */
@media(min-width: 768px) {
  .svc-num {
    font-size: 64px;
  }
  .svc-title {
    font-size: 22px;
  }
  .svc-feature {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }
  .svc-feature-img {
    flex: 0 0 42%;
  }
  .svc-feature-text {
    flex: 1;
    min-width: 0;
  }
  .svc-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .svc-gallery--2col {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----------------------------- お問い合わせページ ----------------------------- */
.contact-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}
.contact-lead {
  margin: 0 0 32px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-color);
}

/* Contact Form 7 フォーム */
.contact-form .cf-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cf-row {
  display: flex;
  flex-direction: column;
}
.cf-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
  color: var(--text-color);
}
.cf-req {
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  background: var(--main-color2);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: .02em;
}

/* 入力欄 */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--text-color);
  background: #fff;
  border: 1px solid #c9d6f4;
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.7;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px rgba(47, 108, 249, .12);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #aeb8cf;
}

/* セレクト（都道府県）：カスタム矢印 */
.cf-select {
  position: relative;
  display: block;
}
.cf-select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--main-color);
  border-bottom: 2px solid var(--main-color);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.contact-form .cf-select select {
  padding-right: 38px;
  cursor: pointer;
}

/* チェックボックス群 */
.contact-form .wpcf7-checkbox {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid #c9d6f4;
  border-radius: 10px;
  overflow: hidden;
}
.contact-form .wpcf7-checkbox .wpcf7-list-item {
  margin: 0;
  border-bottom: 1px solid #eef1fb;
}
.contact-form .wpcf7-checkbox .wpcf7-list-item:last-child {
  border-bottom: none;
}
.contact-form .wpcf7-checkbox .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-color);
  transition: background-color .2s;
}
.contact-form .wpcf7-checkbox .wpcf7-list-item label:hover {
  background: #f6f9ff;
}
.contact-form .wpcf7-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--main-color);
  cursor: pointer;
}

/* 送信ボタン */
.cf-submit {
  position: relative;
  margin-top: 8px;
  text-align: center;
}
/* スピナーはレイアウトから外す（ボタンの中央寄せがズレないように） */
.contact-form .wpcf7-spinner {
  position: absolute;
  margin: 0;
}
.contact-form .wpcf7-submit {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  min-width: 220px;
  padding: 15px 40px;
  border: none;
  border-radius: 999px;
  background: var(--gradient);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
}
.contact-form .wpcf7-submit:hover {
  transform: translateY(-2px);
}

/* バリデーション・応答メッセージ */
.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #e0344b;
}
.contact-form .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.7;
}

@media(min-width: 768px) {
  /* PCは2列グリッド。長い項目（お問い合わせ項目・メッセージ本文・送信）は全幅 */
  .contact-form .cf-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 24px;
  }
  .cf-row--full,
  .cf-submit {
    grid-column: 1 / -1;
  }
  /* お問い合わせ項目のチェックボックスも2列 */
  .contact-form .wpcf7-checkbox {
    grid-template-columns: 1fr 1fr;
  }
  .contact-form .wpcf7-checkbox .wpcf7-list-item:nth-child(odd) {
    border-right: 1px solid #eef1fb;
  }
  .contact-form .wpcf7-checkbox .wpcf7-list-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

/* ----------------------------- ヒーロー画像の左右余白をタイル背景で埋める ----------------------------- */
/* ヒーローのバンドを全幅にし、画像は中央1000px、左右の余白に薄いヘッダー画像タイルを敷く */
body.tiled-bg #content {
  overflow-x: clip; /* full-bleed(100vw)による横スクロール防止 */
}
body.tiled-bg .company-hero,
body.tiled-bg .services-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: auto;          /* バンドの高さは画像に合わせる */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* 左右に薄く敷く写真は、各ページのヒーロー画像に合わせる（白オーバーレイで薄く） */
body.tiled-bg .company-hero {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    url(../images/header/header-image2.webp);
}
body.tiled-bg .services-hero {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    url(../images/header/header-image1.webp);
}
/* JSで生成する青ハニカム格子のオーバーレイ（背景の上・中央画像の下）。
   背景リピートで敷くので右端まで必ず全面を覆う（隙間なし） */
.hex-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: repeat;
  background-position: top left;
  pointer-events: none;
}
body.tiled-bg .company-hero > img,
body.tiled-bg .services-hero > img {
  position: relative;
  z-index: 1;          /* 中央画像はハニカムより前面（左右の余白だけハニカムが見える） */
  width: 100%;
  max-width: 1200px;
  height: auto;
  aspect-ratio: 8 / 3;
  margin: 0 auto;
}

/* ----------------------------- 個別記事下部「他の商品」など関連リスト ----------------------------- */
.single-related {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px dashed var(--main-color);
}
.single-related-title {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-color);
  text-align: center;
}
.single-related-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 3px;
  background: var(--main-color);
}

/* ----------------------------- 実施報告 一覧ページ（page-report） ----------------------------- */
.report-archive {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 8px;
}
/* カルーセル用のカード幅/スナップ指定を一覧では無効化（グリッドのトラック幅に従わせる） */
.report-archive .report-card {
  flex: none;
  width: auto;
  scroll-snap-align: none;
}
@media(min-width: 600px) {
  .report-archive {
    grid-template-columns: 1fr 1fr;
  }
}
@media(min-width: 900px) {
  .report-archive {
    grid-template-columns: repeat(3, 1fr);
  }
}