@charset "UTF-8";
/* CSS Document */


/* ====== 基本：画面幅に追随するスケール（vwのみ） ====== */
:root{
  --green: #00913A;
  --green-soft: rgba(57, 211, 83, 0.18);
  --text: #111;
  --gray: #e6e6e6;

  /* 画面幅依存のみ（後で必要ならmin/max追加） */
  --header-h: 7vw;
}



body{
  color: var(--text);
  line-height: 1.6;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  overflow-x: hidden;
}

/* ====== ヘッダー ====== */
.site-header{
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: #fff;
	 min-height: 64px;
}

.header-inner{
  width: 100%;
  padding: 0 2.2vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4vw;
}

.logo img{
  height: 6vw;
　min-height: 64px; 
  width: auto;
  display: block;
}

.global-nav{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6vw;
  flex-wrap: nowrap;
}

.global-nav a{
  display: inline-flex;
  align-items: center;
  padding: max(0.9vw, 10px) max(1.1vw, 12px);
  border-radius: 0.4vw;
  color: #111;
  text-decoration: none;
  font-weight: 600;
　font-size: 1.3vw;
  transition: background-color .2s ease, color .2s ease;
}

.global-nav a.is-current{
  color: var(--green);
}

.global-nav a:hover{
  background: var(--green-soft);
}


/* ====== HERO（左右2分割スライダー） ====== */
.hero{
  width: 100%;
}

.hero-sliders{
  position: relative;
  width: 100%;
  display: flex;
	 aspect-ratio: 16 / 9;   /* ← 比率固定 */
  display: flex;
  overflow: hidden;
}

.mainslide{
  width: 50%;
  height: 100%;
}

/* slickの内部が高さを持てるように */
.mainslide .slider,
.mainslide .slider-item{
  height: 100%;
}

/* 中央オーバーレイ */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hero-overlay-img{
  width: 40vw;     /* PC基準：ここだけ好みで調整 */
  height: auto;
  max-height: 80%;
  object-fit: contain;
}

/* スライダー下キャッチ */
.hero-catch{
  text-align: center;
  padding: 2.4vw 2vw;
  font-weight: 700;
  font-size: 1.4vw;
  background: var(--green); /* 緑 */
  color: #fff;              /* 白文字 */
}

/* ====== NEWS ====== */
.news{
  position: relative;
  width: 100%;
  min-height: 26vw;
  padding: 3.2vw 0;
  overflow: hidden;
}

.news-bg{
  position: absolute;
  inset: 0;
  background: url("../img/top_newsback.jpg") center / cover no-repeat;
  opacity: 0.22; /* 薄く */
}

.news-inner{
  position: relative;
  width: 92vw;
  margin: 0 auto;
}

.news-title{
  color: var(--green);
  font-weight: 900;
  letter-spacing: 0.08em;
  font-size: 3vw;
  margin-bottom: 2vw;
}

.news-list{
  display: grid;
  gap: 1.2vw;
}

.news-link{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4vw;
  align-items: center;
  background: rgba(230,230,230,0.9);
  padding: 1.6vw 2vw;
  text-decoration: none;
  color: #111;
}

.news-date{
  font-weight: 800;
  color: var(--green);
  white-space: nowrap;
}

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

/* ==================================================
  Company page common blocks
================================================== */
.content-container{
  width: 92vw;
  margin: 0 auto;
}

.section-block{
  padding: 4.5vw 0;
}

.section-title{
  text-align: center;
  margin: 0 auto 3vw;
}

.section-title-en{
  color: var(--green);
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: 4vw;
  line-height: 1.05;
}

.section-title-jp{
  margin-top: 0.8vw;
  font-weight: 700;
  font-size: 1.4vw;
}

/* page hero */
.page-hero{
  padding: 2.2vw 0 0;
}

.page-hero-inner{
  width: 92vw;
  margin: 0 auto;
}

.page-hero-img{
  width: 100%;
  height: auto;
  display: block;
}

/* Our Story */
.story-grid{
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 3vw;
  align-items: start;
  margin-top: 1.8vw;
}

.story-photo img{
  width: 100%;
  height: auto;
  display: block;
}

.story-name{
    margin-top: 2.2vw;
    font-size: 1.4vw;
    line-height: 1.9;
    font-weight: 700;
    font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
    color: #00913A;
}

.story-person{ font-size: 1.7vw; }


.story-heading{
  color: var(--green);
  font-weight: 900;
  font-size: 2.6vw;
  line-height: 1.25;
  margin-bottom: 1.6vw;
}

.story-text p{
  font-size: 1.1vw;
  font-weight: 600;
  margin-bottom: 1.2vw;
}

.company-slider-wrap{
  margin-top: 2.8vw;
}

/* Our Company (green line table) */
.info-table{
  border-top: 0.18vw solid var(--green);
}

.info-row{
  display: grid;
  grid-template-columns: 18vw 1fr;
  gap: 2vw;
  padding: 1.8vw 0;
  border-bottom: 0.18vw solid var(--green);
}

.info-key{
  color: var(--green);
  font-weight: 900;
  font-size: 1.2vw;
  text-align: left;
}

.info-val{
  font-weight: 700;
  font-size: 1.2vw;
  text-align: left;
}

/* Access */
.access-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3vw;
  align-items: start;
}

/* left photo */
.access-photo--left{
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 4;   /* 縦長 */
  overflow: hidden;
  border-radius: 0.8vw;
  box-shadow: 0 0.8vw 1.8vw rgba(0,0,0,0.12);
}
.access-photo--left img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* right stack */
.access-right{
  display: grid;
  gap: 2vw;              /* map と text の間 */
}

/* map */
.access-map iframe{
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border: 0;
  display: block;
}

/* text */
.access-info{
  text-align: left;      /* 右カラム内は左揃えが読みやすい */
}

.access-text{
  font-size: 1.2vw;
  font-weight: 700;
  line-height: 1.9;
}

/* ==================================================
  Works page
================================================== */
.works-block{
  text-align: center;
}

.works-intro{
  margin: 1.6vw auto 3.2vw;
  font-weight: 700;
  font-size: 1.2vw;
  line-height: 2;
}

/* カテゴリ全体 */
.works-categories{
  display: grid;
  gap: 4.2vw;
  justify-items: center;
}

/* 1カテゴリ（販売/印刷...） */
.works-category{
  width: 92vw;
  max-width: 1200px;
  margin: 0 auto;
}

.works-category-title{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  font-size: 1.3vw;
  padding: 0.9vw 1.8vw;
  border-radius: 0.8vw;
  letter-spacing: 0.06em;
  margin-bottom: 2.0vw;
}

/* 2カラム（左：list / 右：photo） */
.works-category-body{
  display: grid;
  justify-content: center;                 /* 全体を中央寄せ */
  grid-template-columns: 320px 460px;      /* 安定させる（中央に寄る） */
  gap: 3vw;
  align-items: center;
}

/* ★ここが「listを中央揃え」する肝
   ul自体を“中身幅”にして中央へ置く */
.works-category .works-list{
  display: inline-grid;     /* 中身の幅にフィット */
  justify-items: center;    /* li要素を中央 */
  text-align: center;       /* 文字も中央 */
  margin: 0 auto;           /* ulを左カラムの中央へ */
  padding: 0;
  list-style: none;
  gap: 0.9vw;
}

.works-list li{
  font-weight: 700;
  font-size: 1.2vw;
  line-height: 2.1;
  text-align: center;
}

.works-list li::before{
  content: "・";
}

/* 右：写真 */
.works-category-photo{
  margin: 0;
  width: 100%;
  max-width: 460px;
  justify-self: center;
  border-radius: 0.8vw;
  overflow: hidden;
  box-shadow: 0 0.8vw 1.8vw rgba(0,0,0,0.12);
  background: #fff;
}

.works-category-photo img{
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 16 / 10; /* 横長で綺麗（好みで 4/3 に変えてOK） */
  object-fit: cover;
}

/* 下部3枚画像 */
.works-gallery{
  margin-top: 5vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2vw;
  align-items: start;
}

.works-gallery-item{
  margin: 0;
  background: #fff;
  border-radius: 0.8vw;
  overflow: hidden;
  box-shadow: 0 0.8vw 1.8vw rgba(0,0,0,0.12);
}

.works-gallery-item img{
  width: 100%;
  height: auto;
  display: block;
}

/* --- Scroll reveal animation --- */
.js-reveal{
  opacity: 0;
  transform: translateY(1.2vw);
  filter: blur(6px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change: opacity, transform, filter;
}

.js-reveal.is-inview{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ==================================================
  Equipment page
================================================== */
.equipment-page .section-block{
  padding-bottom: 6vw;
}

/* floor jump buttons */
.equip-jump{
  margin: 2.4vw auto 4.2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.2vw;
  flex-wrap: wrap;
}

.equip-jump-item{
  width: 9.2vw;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  display: block;
  box-shadow: 0 0.8vw 1.8vw rgba(0,0,0,0.10);
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease;
}

.equip-jump-item:hover{
  transform: translateY(-0.4vw);
  box-shadow: 0 1.2vw 2.6vw rgba(0,0,0,0.14);
}

.equip-jump-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* floor block */
.equip-floor{
  margin: 5vw 0;
  display: grid;
  grid-template-columns: 8vw 1fr;
  gap: 2.6vw;
  align-items: start;
}

.equip-floor-label{
  color: rgba(0,0,0,0.18);
  font-weight: 900;
  letter-spacing: 0.08em;
  font-size: 4.8vw;
  line-height: 1;
  display: flex;
  align-items: flex-start;   /* 上寄せ */
  justify-content: center;
   align-self: start;         /* ← さらに上固定 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.equip-floor-body{
  background: rgba(0,145,58,0.10);
  padding: 1.8vw 2vw 2.2vw;
}

/* photos: 2〜3枚でも崩れない */
.equip-photos{
  display: grid;
  gap: 1.2vw;
  grid-template-columns: repeat(auto-fit, minmax(18vw, 1fr));
  align-items: stretch;
}

.equip-photo{
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.equipment-page .equip-photos + .equip-photos{
  margin-top: 1.6vw;
}

.equip-photo img{
  width: 100%;
  height: auto;
  display: block;
}

/* text area */
.equip-text{
  margin-top: 1.6vw;
}

.equip-lead{
  color: var(--green);
  font-weight: 900;
  font-size: 1.2vw;
  letter-spacing: 0.03em;
  margin-bottom: 0.8vw;
}

.equip-list{
  margin: 0;
  padding-left: 1.2em;
}

.equip-list li{
  font-weight: 600;
  font-size: 1.1vw;
  color: #111;
  line-height: 1.9;
}

/* 文章を2カラムにしたい時（FLOOR2みたいなケース） */
.equip-text--split{
  display: grid;
    grid-template-columns: max-content max-content;
  column-gap: 3vw;
  align-items: start;
}

.equipment-page .equip-lead--mt{
  margin-top: 1.4vw;
}

.equipment-page .equip-subcols{
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 3vw;
  align-items: start;
}


/* ====== フッター ====== */
.site-footer{
  background: var(--green); /* 緑 */
  color: #fff;              /* 白文字 */
  padding: 2.4vw 0 2vw;
}

.copyright{
  display: block;
  text-align: center;
  font-size: 1vw;
  color: #fff;
}


/* ====== スマホ（最初から用意） ====== */
@media (max-width: 768px){
  html{
    /* スマホはvwのみだと極端に小さくなるのでここだけ上書き */
    font-size: 3.6vw;
  }

  :root{
    --header-h: 14vw;
  }

  .header-inner{
    padding: 0 4vw;
    gap: 2vw;
  }

  .logo img{
    height: 14vw;
  }

  .global-nav{
    gap: 1.6vw;
    flex-wrap: wrap; /* 横が苦しい時の保険 */
	display: none;
  }

  .global-nav a{
    padding: 2.2vw 2.4vw;
    border-radius: 2vw;
  }

  .hero-sliders{
    flex-direction: column;
    height: calc(100vh - var(--header-h));
  }

  .mainslide{
    width: 100%;
    height: 50%;
  }

	.hero-overlay-img{
    width: 78vw;   /* スマホ：ここだけ好みで調整 */
    max-height: 72%;
  }

	
  .hero-catch{
    font-size: 4.2vw;
    padding: 4vw;
  }

  .news{
    min-height: 60vw;
    padding: 6vw 0;
  }

  .news-inner{
    width: 92vw;
  }

  .news-title{
    font-size: 8vw;
    margin-bottom: 4vw;
  }

  .news-list{
    gap: 2.8vw;
  }

  .news-link{
    grid-template-columns: 1fr;
    gap: 1.6vw;
    padding: 4vw;
  }
	
.section-block{ padding: 10vw 0; }

  .section-title-en{ font-size: 10vw; }
  .section-title-jp{ font-size: 4vw; margin-top: 2vw; }

  .page-hero{ padding-top: 4vw; }

  .story-grid{
    grid-template-columns: 1fr;
    gap: 6vw;
  }

  .story-name{ font-size: 3.6vw; }
.story-person{ font-size: 4.0vw; }
  .story-heading{ font-size: 7vw; margin-bottom: 4vw; }
  .story-text p{ font-size: 3.6vw; margin-bottom: 3vw; }

  .info-row{
    grid-template-columns: 30vw 1fr;
    gap: 4vw;
    padding: 4vw 0;
    border-width: 0.6vw;
  }
  .info-table{ border-top-width: 0.6vw; }

  .info-key,
  .info-val{
    font-size: 3.6vw;
  }

 .access-grid{
    grid-template-columns: 1fr;
    gap: 6vw;
  }

  .access-right{
    gap: 5vw;
  }

  .access-photo--left{
    border-radius: 3vw;
    box-shadow: 0 2.6vw 5vw rgba(0,0,0,0.12);
  }
	
.access-text{
    font-size: 3.6vw;
  }
	
 .works-intro{
    font-size: 3.8vw;
    margin: 4vw auto 8vw;
    padding: 0 2vw;
  }

  .works-categories{
    gap: 10vw;
  }

  .works-category{
    width: 92vw;
  }

  .works-category-title{
    font-size: 4.2vw;
    padding: 2.6vw 5vw;
    border-radius: 2.4vw;
    margin-bottom: 4vw;
  }

  /* SPは縦積み（list→photo） */
  .works-category-body{
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 5vw;
    align-items: start;
  }

  .works-category .works-list{
    display: inline-grid;
    justify-items: center;
    text-align: center;
    margin: 0 auto;
    gap: 2.2vw;
  }

  .works-list li{
    font-size: 3.8vw;
    line-height: 2.0;
  }

  .works-category-photo{
    max-width: 92vw;
    border-radius: 3vw;
    box-shadow: 0 2.6vw 5vw rgba(0,0,0,0.12);
  }

  .works-gallery{
    margin-top: 12vw;
    grid-template-columns: 1fr;
    gap: 5vw;
  }

  .works-gallery-item{
    border-radius: 3vw;
    box-shadow: 0 2.6vw 5vw rgba(0,0,0,0.12);
  }

  .js-reveal{
    transform: translateY(3vw);
  }
	
.equip-jump{
    margin: 6vw auto 8vw;
    gap: 3.4vw;
  }

  .equip-jump-item{
    width: 18vw;
    box-shadow: 0 2.6vw 5vw rgba(0,0,0,0.12);
  }

  .equip-floor{
    grid-template-columns: 10vw 1fr;
    gap: 4vw;
    margin: 10vw 0;
  }

  .equip-floor-label{
    font-size: 10vw;
  }

  .equip-floor-body{
    padding: 4vw 4vw 5vw;
  }

  .equip-photos{
    gap: 3vw;
    grid-template-columns: repeat(auto-fit, minmax(34vw, 1fr));
  }

.equipment-page .equip-photos + .equip-photos{
    margin-top: 4vw;
  }	
	
  .equip-lead{
    font-size: 4.2vw;
    margin-bottom: 2vw;
  }

  .equip-list li{
    font-size: 3.8vw;
    line-height: 2.0;
  }

  .equip-text--split{
    grid-template-columns: 1fr;
    gap: 6vw;
  }
	
.equipment-page .equip-lead--mt{
    margin-top: 4vw;
  }
  .equipment-page .equip-subcols{
    grid-template-columns: 1fr; /* SPは1列でOK（読みやすさ優先） */
    gap: 4vw;
  }

  .copyright{
    font-size: 3.2vw;
    padding: 0 4vw 3vw;
  }

  .footer-bar{
    height: 6vw;
  }
}


@media (prefers-reduced-motion: reduce){
  .js-reveal{
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}