@charset "UTF-8";
/* --------------------------------------------------
    s t y l e
-------------------------------------------------- */
/* --------------------------------------------------
    c o r e

    @forward で abstracts フォルダ内まとめ
-------------------------------------------------- */
/* --------------------------------------------------
   r e s e t

   2025, JPサイト向けモダンリセット

   - 最小限で副作用少なめ
   - A11y: focus-visible, コントラスト配慮の余地確保
   - 日本語フォント/レンダリング最適化
-------------------------------------------------- */
/* 1) Box sizing: レイアウト安定化 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2) 余白の初期化（必要最低限） */
* {
  margin: 0;
  padding: 0;
}

/* 3) HTMLドキュメントの基本設定 */
html {
  /* iOS の文字サイズ自動拡大抑止 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* スムーススクロール（内部リンクなど） */
  scroll-behavior: smooth;
}

/* ビューポート高の初期化（100vhレイアウトを安定） */
html, body {
  height: 100%;
}

/* 4) Body タイポ・色・レガシーレンダリング最適化 */
body {
  line-height: 1.5;
  color: #111; /* 初期色（WCAG的に黒より目に優しい） */
  background-color: #fff;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* スクロールバーのチラつき防止（余白の溝を確保） */
  /* もし左右余白が気になる場合は both-edges を検討 */
  scrollbar-gutter: stable;
}

/* 5) メディア要素: はみ出し防止＆表示の一貫性 */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 画像ぼやけ防止（必要なら） */
/* img { image-rendering: -webkit-optimize-contrast; } */
/* 6) タイポ系：見出しや段落はデフォルト余白を消しておく */
h1, h2, h3, h4, h5, h6,
p, blockquote, figure {
  margin: 0;
}

/* 引用符記号の抑制（必要なときに個別指定） */
blockquote, q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
}

/* 7) リスト：デフォルトの黒丸/番号を除去（必要時に個別付与） */
ul, ol {
  list-style: none;
}

/* 8) アンカー：色は継承、下線はプロジェクト側で制御 */
a {
  color: inherit;
  text-decoration: none;
}

/* 9) テーブル：一枚板で扱いやすく */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* 10) 区切り線：見た目をフラットに */
hr {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 2rem 0;
}

/* 11) フォーム初期化：フォント継承とベースリセット */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* iOS の角丸・余計なスタイル抑止（必要に応じて） */
input,
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none; /* プロジェクト側で付与 */
  outline: none; /* focus-visible でカバー */
}

/* ボタンはベタ塗りや枠を消してから設計 */
button {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* フォームの画像／svg は高さ自動に */
img, svg {
  height: auto;
}

/* 12) アクセシビリティ：フォーカスリングは残す（色は後でテーマに合わせて） */
:focus-visible {
  outline: 2px solid #0a7aff; /* 仮: iOSブルーに近い */
  outline-offset: 2px;
}

/* 13) ユーザー選択（選択色は必要時だけ） */
/*
::selection {
  color: #fff;
  background: #0a7aff;
}
*/
/* 14) モーション控えめ設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* 15) ダークモード準備（後でテーマが乗る想定。必要なら有効化） */
/*
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  body {
    background-color: #0b0b0b;
    color: #e9e9e9;
  }
  hr { border-top-color: #2a2a2a; }
}
*/
/* 16) スクロールバー（Chrome/Edge/Firefox）— 必要な時だけ有効化 */
/*
/* Chrome/Edge */
/* ::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 999px; }
*/
/* Firefox */
/* * { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.35) transparent; } */
/* --------------------------------------------------
    m i x i n
-------------------------------------------------- */
/* --------------------------------------------------
    @ u s e 宣 言（ sass:map ）
-------------------------------------------------- */
/* --------------------------------------------------
   ブ レ ー ク ポ イ ン ト
-------------------------------------------------- */
/* --------------------------------------------------
    i m g
-------------------------------------------------- */
/* --------------------------------------------------
    relative / absolute / fixed / static
-------------------------------------------------- */
/* --------------------------------------------------
    c o l o r
-------------------------------------------------- */
/* --------------------------------------------------
    i m a g e s
-------------------------------------------------- */
/* --------------------------------------------------
    L O G O
-------------------------------------------------- */
.logo_t_color {
  background-image: url("../images/icon/logo_t_color.svg");
}

.logo_t_blk {
  background-image: url("../images/icon/logo_t_blk.svg");
}

.logo_t_wht {
  background-image: url("../images/icon/logo_t_wht.svg");
}

.logo_y_color {
  background-image: url("../images/icon/logo_y_color.svg");
}

.logo_y_blk {
  background-image: url("../images/icon/logo_y_blk.svg");
}

.logo_y_wht {
  background-image: url("../images/icon/logo_y_wht.svg");
}

/* --------------------------------------------------
    T O P
-------------------------------------------------- */
.img-top-view {
  background-image: url("../images/common/img-top.jpg");
}

/* --------------------------------------------------
    アイコン
-------------------------------------------------- */
.icon-logo {
  background-image: url("../images/icon/logo.svg");
}

.icon-logo-wht {
  background-image: url("../images/icon/logo_wht.svg");
}

/* --------------------------------------------------
    s t y l e
-------------------------------------------------- */
/* --------------------------------------------------
    c o m m o n
-------------------------------------------------- */
/* --------------------------------------------------
    @ u s e 宣 言
-------------------------------------------------- */
/* --------------------------------------------------
    共 通
-------------------------------------------------- */
input {
  appearance: none;
  -webkit-appearance: none;
}

a {
  text-decoration: none;
  text-decoration-color: none;
  color: inherit;
}

/* --------------------------------------------------
    100vh ：カクつき回避
-------------------------------------------------- */
/* CSS：vhの代替。ヒーロー等はこれに置換 */
/* これを 100vh を使っていたセクションに付ける（KV/ヒーロー、モーダル全画面など） */
.hero,
.fullvh {
  /* 古い環境フォールバック → 新しいviewport単位 → JS変数 の優先順 */
  min-height: 100vh;
  min-height: 100svh; /* Safari 16+ / Chrome 108+ */
  min-height: calc(var(--vvh, 1vh) * 100); /* LINE内で効く */
}

/* LINE内だけスクロール関連の揺れを抑制 */
html.is-line {
  /* アドレスバーの出入りでの自動スムースを避ける */
  scroll-behavior: auto;
  /* 画面端のバウンスでの再計算抑制（対応環境で有効） */
  overscroll-behavior-y: contain;
}

/* --------------------------------------------------
    h t m l
-------------------------------------------------- */
html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/* --------------------------------------------------
    b o d y
-------------------------------------------------- */
body {
  position: relative;
  background: #fdfdfd;
  overflow-y: scroll;
  margin: 0px;
  text-align: center;
  border: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------
    m a i n
-------------------------------------------------- */
main {
  width: 100%;
  overflow: hidden;
  overflow-anchor: none;
}

/* --------------------------------------------------
    ア ニ メ - s c r o l l d o w n 
-------------------------------------------------- */
.scrolldown {
  position: absolute;
  top: 80vh;
  left: 50%;
}
@media screen and (min-width: 768px) {
  .scrolldown {
    position: absolute;
    top: 85vh;
    left: 50%;
  }
}
.scrolldown span {
  position: absolute;
  top: -25px;
  left: -20px;
  color: #3c261b;
  font-weight: 500;
}
.scrolldown::after {
  position: absolute;
  top: 0;
  background: #3c261b;
  content: "";
  width: 2px;
  height: 30px;
  animation: pathmove 1.4s ease-in-out infinite;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 30px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 50px;
    opacity: 0;
  }
}
/* --------------------------------------------------
    b t n - ト ッ プ に 戻 る
-------------------------------------------------- */
.gotop {
  position: fixed;
  right: 16px;
  bottom: calc(16px + var(--safe-bottom, 0px));
  transform: translateZ(0);
  will-change: transform;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background: transparent;
  border: none;
  padding: 0;
  color: #000;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1000;
}

.gotop.is-show {
  opacity: 1;
  pointer-events: auto;
}

/* 全体ふわふわ */
.gotop__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: floatUp 3s ease-in-out infinite;
}

/* ∧マーク */
.gotop__icon {
  position: relative;
  width: 40px;
  height: 18px;
  display: block;
}

.gotop__icon::before,
.gotop__icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 23px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}

.gotop__icon::before {
  left: 0;
  transform: rotate(-40deg);
}

.gotop__icon::after {
  right: 0;
  transform: rotate(40deg);
}

.gotop__label {
  font-size: 12px;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.gotop:hover .gotop__inner {
  animation-play-state: paused;
  transform: translateY(-3px);
}

/* ふわふわ全体アニメ */
@keyframes floatUp {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}
@media (max-width: 480px) {
  .gotop {
    right: 12px;
    bottom: calc(12px + var(--safe-bottom, 0px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .gotop__inner {
    animation: none;
  }
}
/* --------------------------------------------------
    s t y l e
-------------------------------------------------- */
/* --------------------------------------------------
    f o n t
-------------------------------------------------- */
/* --------------------------------------------------
    @ u s e 宣 言
-------------------------------------------------- */
/* --------------------------------------------------
    基本
-------------------------------------------------- */
/*16p*0.625 = 10px(=1rem)*/
html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  text-align: left;
  line-height: 180%;
  color: #3c261b;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 1.5rem;
    line-height: 180%;
  }
}

/* --------------------------------------------------
    カ ラ ー 
-------------------------------------------------- */
h1 {
  color: #f3efd0;
}

h2, h3, h4, h5, p {
  color: #3c261b;
}

.mini {
  color: #dccb18;
}

/* --------------------------------------------------
    G o o g l e  F o n t s
-------------------------------------------------- */
body {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-style: normal;
}

h2,
h3 {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-style: normal;
}

p,
.mini {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-style: normal;
}

/* --------------------------------------------------
    h 1 /// Cabin 
-------------------------------------------------- */
h1 {
  font-family: "Cabin", sans-serif;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0.02em;
  text-align: center;
  font-size: 6rem;
}
@media screen and (min-width: 768px) {
  h1 {
    font-size: 7.5rem;
  }
}

/* --------------------------------------------------
    h 2 /// Zen Maru Gothic 
-------------------------------------------------- */
h2 {
  font-family: "Zen Maru Gothic", sans-serif;
  line-height: 140%;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  font-size: 2.7rem;
}
@media screen and (min-width: 768px) {
  h2 {
    font-size: 3.2rem;
  }
}

/* --------------------------------------------------
    h 3 /// Zen Maru Gothic 
-------------------------------------------------- */
h3 {
  line-height: 140%;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  font-size: 2.5rem;
}
@media screen and (min-width: 768px) {
  h3 {
    font-size: 2.9rem;
  }
}

/* --------------------------------------------------
    h 4 /// Zen Maru Gothic 
-------------------------------------------------- */
h4 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0.02em;
  text-align: left;
  font-size: 3rem;
}
@media screen and (min-width: 768px) {
  h4 {
    font-size: 4rem;
  }
}

/* --------------------------------------------------
    h 5 /// Zen Maru Gothic 
-------------------------------------------------- */
h5 {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 600;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0.02em;
  text-align: center;
  font-size: 2.6rem;
}
@media screen and (min-width: 768px) {
  h5 {
    font-size: 3.2rem;
  }
}

/* --------------------------------------------------
    p /// Zen Maru Gothic 
-------------------------------------------------- */
p {
  line-height: 190%;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: left;
  font-size: 1.7rem;
}
@media screen and (min-width: 768px) {
  p {
    font-size: 1.9rem;
  }
}

/* --------------------------------------------------
    . m i n i /// Zen Maru Gothic 
-------------------------------------------------- */
.mini {
  line-height: 100%;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  font-size: 1.7rem;
}
@media screen and (min-width: 768px) {
  .mini {
    font-size: 2rem;
  }
}

/* --------------------------------------------------
    タ テ 書 き
-------------------------------------------------- */
.tategaki {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: block;
  margin: 0 auto;
  /* ブラウザの余白を消す */
  padding: 0;
  line-height: 200%;
}

/* --------------------------------------------------
    s t y l e
-------------------------------------------------- */
/* --------------------------------------------------
    h e a d e r
-------------------------------------------------- */
/* --------------------------------------------------
    @ u s e 宣 言
-------------------------------------------------- */
/* --------------------------------------------------
    基本 - h e a d e r
-------------------------------------------------- */
body.menu-open {
  overflow: hidden;
}

/* LINE内はできれば fixed → sticky にしてさらに安定化（難しければスキップ可） */
html.is-line header {
  position: sticky;
  top: 0;
}

/* --------------------------------------------------
    コ ピ ー ラ イ ト header
-------------------------------------------------- */
.copyright-h {
  color: #c79157;
  position: fixed;
  top: 50%;
  left: 6px;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: left bottom;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: none;
  z-index: 9999;
}
@media screen and (min-width: 768px) {
  .copyright-h {
    display: block;
  }
}

/* --------------------------------------------------
    本 体 - h e a d e r
-------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 92px;
  transition: transform 0.36s ease, background-color 0.24s ease, box-shadow 0.24s ease;
  background: transparent;
  backdrop-filter: none;
}

.site-header.is-solid {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__inner {
  height: 92px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand */
.brand {
  color: #c79157;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand img {
  display: block;
  height: auto;
  width: 0;
}
@media screen and (min-width: 768px) {
  .brand img {
    width: 480px;
  }
}

/* PCナビ */
.primary-nav {
  display: none;
}

.primary-nav ul {
  display: flex;
  gap: 2.5vw;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  color: #3c261b;
  display: inline-flex;
  align-items: enter;
  padding: 10px 6px;
  text-decoration: none;
  font-weight: 500;
}
.primary-nav a:hover {
  color: #dccb18;
}

.primary-nav .btn {
  padding: 10px 14px;
  border-radius: 999px;
}

.primary-nav .btn.-accent {
  background: #00648b;
  color: #fdfdfd;
}
.primary-nav .btn.-accent:hover {
  background: #dccb18;
}

/* --------------------------------------------------
    S P
-------------------------------------------------- */
.hamburger {
  background: #00648b;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  padding: 0;
  outline: none;
  display: inline-grid;
  place-items: center;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.hamburger__bar {
  background: #fdfdfd;
  position: relative;
  width: 24px;
  height: 2px;
  display: block;
  transition: transform 0.25s ease;
}

.hamburger__bar::before,
.hamburger__bar::after {
  content: "";
  background: #fdfdfd;
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}

.hamburger__bar::before {
  top: -7px;
}

.hamburger__bar::after {
  bottom: -7px;
}

.hamburger[aria-expanded=true] .hamburger__bar {
  background: transparent;
}

.hamburger[aria-expanded=true] .hamburger__bar::before {
  top: 0;
  transform: rotate(45deg);
}

.hamburger[aria-expanded=true] .hamburger__bar::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/* ドロワー */
.mobile-drawer[hidden] {
  display: none;
}

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.mobile-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* 背景  */
.mobile-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(15, 122, 229, 0.08), rgba(15, 122, 229, 0.08)), linear-gradient(180deg, #b7922f, #654e0d);
}

/* ×ボタン（独立） */
.drawer-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: transparent;
  border: 2px solid #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  outline: none;
}
.drawer-close:hover {
  background: #dccb18;
}

.drawer-close::before, .drawer-close::after {
  background: #fdfdfd;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 2px;
  transform-origin: center;
}

.drawer-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.drawer-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* メニュー本体 */
.mobile-nav {
  color: #fdfdfd;
  position: relative;
  z-index: 2;
  height: 100svh;
  min-height: 100vh;
  overflow: auto;
  padding: 96px 24px 48px;
}

.mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px;
}

.mobile-list a {
  color: #fdfdfd;
  display: inline-flex;
  align-items: baseline;
  gap: 16px;
  text-decoration: none;
}
.mobile-list a:hover {
  color: #dccb18;
  transition: color 0.2s ease;
}

.mobile-list a .en {
  font-size: clamp(28px, 6.2vw, 48px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mobile-list a .ja {
  font-size: clamp(14px, 3.8vw, 18px);
  opacity: 0.85;
}

/* コンタクト btn */
.contact-cta {
  color: #fdfdfd;
  display: block;
  margin-top: 48px;
  padding: 16px 18px;
  border-radius: 999px;
  border: 2px solid #fff;
  text-decoration: none;
  text-align: center;
  font-size: 2rem;
  font-weight: 400;
}
.contact-cta:hover {
  background: #dccb18;
  transition: color 0.2s ease;
  font-weight: 700;
}

/* アンカーのオフセット */
#about, #service, #works, #news, #contact, #jobs {
  scroll-margin-top: 86px;
}

/* PCでの表示 */
@media (min-width: 1200px) {
  .primary-nav {
    display: block;
  }
  .hamburger {
    display: none;
  }
  .mobile-drawer {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* --------------------------------------------------
    s t y l e
-------------------------------------------------- */
/* --------------------------------------------------
    f o o t e r
-------------------------------------------------- */
/* --------------------------------------------------
    @ u s e 宣 言
-------------------------------------------------- */
/* --------------------------------------------------
    f o o t e r
-------------------------------------------------- */
footer .in_footer {
  position: relative;
  background: #f3efd0;
}
footer .in_footer .inner {
  padding-top: 40px;
  padding-bottom: 15px;
}
@media screen and (min-width: 768px) {
  footer .in_footer .inner {
    padding-top: 100px;
    padding-bottom: 0px;
  }
}
footer .in_footer .inner .footer-add {
  display: block;
  padding-bottom: 80px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  footer .in_footer .inner .footer-add {
    padding-bottom: 120px;
  }
}
footer .in_footer .inner .footer-add a.logo {
  display: inline-block;
  margin: 0 auto 30px;
}
footer .in_footer .inner .footer-add a.logo img {
  width: 200px;
}
@media screen and (min-width: 768px) {
  footer .in_footer .inner .footer-add a.logo img {
    width: 280px;
  }
}
footer .in_footer .inner .footer-add a.logo:hover img {
  opacity: 0.5;
}
footer .in_footer .inner .footer-add p.add-txt {
  text-align: center;
  font-size: 1.6rem;
}
footer .in_footer .inner .copyright-f {
  color: #c79157;
  text-align: center;
  font-size: 1.5rem;
  line-height: 100%;
  display: block;
}
@media screen and (min-width: 768px) {
  footer .in_footer .inner .copyright-f {
    display: none;
  }
}

/* --------------------------------------------------
    s t y l e
-------------------------------------------------- */
/* --------------------------------------------------
    t o p
-------------------------------------------------- */
/* --------------------------------------------------
    @ u s e 宣 言
-------------------------------------------------- */
/* --------------------------------------------------
    ⚫︎ 共 通 - padding
-------------------------------------------------- */
#about,
#service,
#works,
#company,
#jobs,
#contact {
  padding: 80px 0;
}
@media screen and (min-width: 768px) {
  #about,
  #service,
  #works,
  #company,
  #jobs,
  #contact {
    padding: 120px 0;
  }
}

/* --------------------------------------------------
    ⚫︎ 共 通 - 背 景 カ ラ ー
-------------------------------------------------- */
#about,
#works,
#jobs {
  background: #f3efd0;
}
#about h1,
#works h1,
#jobs h1 {
  color: #fdfdfd;
}

#service,
#company,
#contact {
  background: #fdfdfd;
}

/* --------------------------------------------------
    ⚫︎ 共 通 - i n n e r
-------------------------------------------------- */
.inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (min-width: 768px) {
  .inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* --------------------------------------------------
    ⚫︎ 共 通 - タ イ ト ル
-------------------------------------------------- */
.ttl-1000 {
  padding-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .ttl-1000 {
    padding-bottom: 45px;
  }
}
.ttl-1000 h1 {
  position: relative;
  text-align: center;
  margin-bottom: 10px;
}
.ttl-1000 p {
  text-align: center;
  display: block;
}

/* --------------------------------------------------
    ⚫︎ 共 通 - 山
-------------------------------------------------- */
.yama-beg {
  background: #f3efd0;
  width: 100%;
  height: 80px;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
@media screen and (min-width: 768px) {
  .yama-beg {
    height: 100px;
  }
}

/* --------------------------------------------------
    ⚫︎ 共 通 - ド ッ ト 線
-------------------------------------------------- */
.dot-line {
  width: 100%;
  height: 2px;
  background-image: repeating-linear-gradient(to right, #c79157 0 2px, transparent 2px 6px);
  background-repeat: repeat-x;
  background-size: auto 2px;
  margin-top: 50px;
  margin-bottom: 50px;
}
@media screen and (min-width: 768px) {
  .dot-line {
    margin-top: 80px;
    margin-bottom: 80px;
  }
}

.first-line {
  margin-top: 0;
}

.last-line {
  margin-bottom: 0;
}

/* --------------------------------------------------
    ⚫︎ 共 通 - タ イ ト ル
-------------------------------------------------- */
.works-ttl .mini {
  margin-bottom: 15px;
}
.works-ttl h3 {
  text-align: left;
  padding-bottom: 15px;
}
@media screen and (min-width: 768px) {
  .works-ttl h3 {
    padding-bottom: 25px;
  }
}

.center-ttl {
  margin: 0 auto;
}
.center-ttl .mini {
  margin-bottom: 15px;
  text-align: center;
}
.center-ttl h3 {
  text-align: center;
  padding-bottom: 15px;
}
@media screen and (min-width: 768px) {
  .center-ttl h3 {
    padding-bottom: 30px;
  }
}
.center-ttl .center-txt {
  margin: 0 auto;
  max-width: none;
}
@media screen and (min-width: 768px) {
  .center-ttl .center-txt {
    max-width: 750px;
  }
}
.center-ttl .center-txt p {
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .center-ttl .center-txt p {
    padding-bottom: 25px;
  }
}

/* --------------------------------------------------
    T O P
-------------------------------------------------- */
.top-view {
  position: relative;
  background: #fdfdfd;
  margin: 0 auto 90px;
}
@media screen and (min-width: 768px) {
  .top-view {
    margin: 0 auto 100px;
  }
}
.top-view .top-view-inner {
  margin: 0 auto;
  width: 100%;
  height: 61vh;
}
@media screen and (min-width: 768px) {
  .top-view .top-view-inner {
    height: 66vh;
  }
}
.top-view .top-view-inner .top-logo {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-view .top-view-inner .top-logo img {
  width: 236px;
  height: auto;
}
@media screen and (min-width: 768px) {
  .top-view .top-view-inner .top-logo img {
    width: 330px;
  }
}
@media screen and (min-width: 1500px) {
  .top-view .top-view-inner .top-logo img {
    width: 380px;
  }
}
.top-view .top-view-inner .scrolldown {
  position: absolute;
  top: 60vh;
  left: 50%;
}
@media screen and (min-width: 768px) {
  .top-view .top-view-inner .scrolldown {
    position: absolute;
    top: 65vh;
    left: 50%;
  }
}

/* --------------------------------------------------
    A b o u t
-------------------------------------------------- */
#about .inner-about {
  background: #fdfdfd;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 80px auto 0;
  padding: 70px 20px;
  border-radius: 0;
}
@media screen and (min-width: 768px) {
  #about .inner-about {
    margin: 90px auto 0;
    padding: 70px 60px;
    border-radius: 80px;
  }
}
#about .inner-about .logologo {
  display: block;
  height: auto;
  width: 130px;
  margin: 0 auto 25px;
}
@media screen and (min-width: 768px) {
  #about .inner-about .logologo {
    width: 160px;
    margin: 0 auto 30px;
  }
}
#about .inner-about img {
  width: 240px;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 60px auto 0;
}
@media screen and (min-width: 768px) {
  #about .inner-about img {
    width: 350px;
  }
}
#about .inner-about .ttl-1000 h1 {
  color: #f3efd0;
}

/* --------------------------------------------------
    S e r v i c e
-------------------------------------------------- */
#service .inner .box2 .box_inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-bottom: 60px;
}
@media screen and (min-width: 768px) {
  #service .inner .box2 .box_inner {
    gap: 30px;
  }
}
#service .inner .box2 .box_inner .btn-pc {
  width: 100%;
  height: 250px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
#service .inner .box2 .box_inner .btn-pc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 30px;
  border: 7px solid #eeece1;
}
#service .inner .box2 .box_inner .txt {
  width: 100%;
}
@media screen and (min-width: 768px) {
  #service .inner .box2 .box_inner {
    grid-template-columns: 47% 45%;
    justify-content: space-between;
    align-items: start;
    padding-bottom: 80px;
    gap: 8%;
  }
  #service .inner .box2 .box_inner .btn-pc {
    height: 360px;
    margin-bottom: 0;
  }
  #service .inner .box2 .box_inner .txt {
    width: 100%;
  }
}
#service .inner .box2 .box_inner:last-child {
  padding-bottom: 0;
}

/* --------------------------------------------------
    W o r k s
-------------------------------------------------- */
#works .inner img {
  width: 150px;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto 40px;
}
@media screen and (min-width: 768px) {
  #works .inner img {
    width: 250px;
  }
}
#works .inner .grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
#works .inner .grid .item {
  background: #fdfdfd;
  text-align: center;
  border-radius: 30px;
  border: 5px solid #ffffff;
}
#works .inner .grid .item img {
  width: 100%;
  height: 300px;
  /* ← 高さを固定 */
  object-fit: cover;
  /* ← 中央を表示 */
  margin-bottom: 10px;
  border-radius: 30px 30px 0 0;
}
#works .inner .grid .item p.img-p {
  text-align: center;
  padding: 15px 0 25px;
  font-weight: 600;
}
#works .inner .grid .text-box {
  background-color: transparent;
  border-radius: 0;
  padding-right: 0;
  border: none;
}
@media screen and (min-width: 768px) {
  #works .inner .grid .text-box {
    padding-right: 30px;
  }
}
#works .inner .grid .text-box p {
  text-align: left;
}

/* --------------------------------------------------
    C o m p a n y
-------------------------------------------------- */
#company .inner {
  /* COMPANY 表（スマホでも重なり/飛びなし） */
}
#company .inner .tbl_company {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
#company .inner .tbl_company tbody {
  /* 最終行だけ下側にも線を追加 */
}
#company .inner .tbl_company tbody tr {
  /* 行の上側に1pxの実線 */
  background-image: linear-gradient(to right, #b5b5b5 100%, transparent 0);
  background-size: 100% 1px; /* 線の太さ */
  background-repeat: no-repeat;
  background-position: 0 0; /* 上側に配置 */
}
#company .inner .tbl_company tbody tr th, #company .inner .tbl_company tbody tr td {
  border: 0; /* セルの線は無し（重なり防止） */
  font-size: 1.6rem;
  font-weight: 500;
  padding: 21px 8px 19px 0;
  line-height: 180%;
}
@media screen and (min-width: 768px) {
  #company .inner .tbl_company tbody tr th, #company .inner .tbl_company tbody tr td {
    font-size: 1.9rem;
    padding: 25px 13px 23px 0;
  }
}
#company .inner .tbl_company tbody tr th {
  font-size: 1.6rem;
  font-weight: normal;
  width: 80px;
  vertical-align: top;
}
@media screen and (min-width: 768px) {
  #company .inner .tbl_company tbody tr th {
    width: 130px;
  }
}
#company .inner .tbl_company tbody tr:last-child {
  background-image: linear-gradient(to right, #b5b5b5 100%, transparent 0), linear-gradient(to right, #b5b5b5 100%, transparent 0);
  background-size: 100% 1px, 100% 1px;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 100%; /* 上と下 */
}

/* --------------------------------------------------
    J o b s
-------------------------------------------------- */
#jobs .inner {
  max-width: 800px;
}
#jobs .inner img {
  width: 300px;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 60px auto 0;
}
@media screen and (min-width: 768px) {
  #jobs .inner img {
    width: 400px;
  }
}

/* --------------------------------------------------
    C o n t a c t
-------------------------------------------------- */
#contact .inner {
  max-width: 800px;
}
#contact .inner .in-txt {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  #contact .inner .in-txt {
    margin-bottom: 40px;
  }
}
#contact .inner .in-txt p {
  text-align: center;
}
#contact .inner .in-btn {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
#contact .inner .in-btn a.btn-inner {
  position: relative;
  background: #00648b;
  color: #fdfdfd;
  border: 4px solid #eeece1;
  display: block;
  margin: 0 auto;
  width: 100%;
  font-size: 1.8rem;
  line-height: 50px;
  overflow: hidden;
  outline: none;
  z-index: 2;
  text-align: center;
  max-width: none;
  padding: 20px 20px;
  border-radius: 60px;
}
@media screen and (min-width: 768px) {
  #contact .inner .in-btn a.btn-inner {
    display: inline-block;
    font-size: 2rem;
  }
}
#contact .inner .in-btn a.btn-inner:first-child {
  margin-bottom: 10px;
}
#contact .inner .in-btn a.btn-inner:hover {
  background: #dccb18;
  font-weight: 600;
}/*# sourceMappingURL=style.css.map */