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

body {
  margin: 0;
  font-family: "Kozuka Gothic Pr6N", "メイリオ", Meiryo, sans-serif;
  color: #333;
  text-align: center;

  /* 追加 */
  background-image: url("../img/bg_paper.png");
  background-repeat: repeat;
  background-size: auto;
}

h2 {
	color:#ea0029;
}

section {
	padding : 50px 0; /* 上下20px、左右0px */
}
/* =========================
   Section Scroll Indicator
========================= */

.section {
  position: relative; /* ← indicatorの基準 */
}

.section-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.7;
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-indicator span {
  display: block;
  width: 2px;
  height: 40px;
  background: #ea0029;
  animation: scrollLine 1.6s ease-in-out infinite;
}



/* ------------------------
   イメージコンテナ
------------------------- */
.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100%; /* 高さを固定したい値 */
  overflow: hidden; /* はみ出た部分を隠す */
}

.image-container img {
  display: block; /* インライン要素の挙動をブロック要素に */
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* 画像を縦横比を保ったまま表示 */
}

/* ------------------------
   左右2カラム
------------------------- */
.container {
	display:inline-flex;
	flex-wrap: wrap;
	width:80%;
	justify-content: center;
}
.column {
  width:100%;
}
.column img {
    max-width: 100%;
    height: auto;
}
.center-p-l {
	text-align: left;
}
.center-p-r {
	text-align:right;
}
.center-p-c {
	text-align:center;
}

@media (min-width: 1024px) {
  .column {
    width: 50%;
  }
}

/* ------------------------
   HEADER（右寄せ調整）
------------------------- */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}

.nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav li {
    display: inline-block;
    margin-left: 30px;
}

.nav a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
}

/* ハンバーガー */
.menu-btn {
    display: none;
    font-size: 28px;
    cursor: pointer;
}



/* ------------------------
   service-flow
------------------------- */
.flow-icons img {
    max-width: 80%;
    height: auto;
}
/* Steps */
.steps {
    display: inline-flex;
    justify-content: center;
    margin-top: 40px;
    gap: 40px;
	width:80%;
}
.step {
    width: 220px;
    padding: 20px;
    border: 2.5px solid #E60026;
    border-radius: 15px;
}


/* ------------------------
   RIBBON SVG アニメーション
------------------------- */
.ribbon-svg path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: draw 2.5s ease forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* ------------------------
   HAND SVG アニメーション
------------------------- */
.hand-svg path {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawHand 2s ease forwards;
}

@keyframes drawHand {
    to {
        stroke-dashoffset: 0;
    }
}

/* ------------------------
   WAVE BACKGROUND
------------------------- */
.wave-container {
    position: relative;
    overflow: hidden;
    margin-top: 120px;
}

.wave {
    width: 200%;
    animation: waveMove 10s linear infinite;
}

@keyframes waveMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ------------------------
   portfolio
------------------------- */
.works-p-c {
	position: relative;
}

/* ------------------------
   Fade Up
------------------------- */
.fadeup {
    opacity: 0;
    transform: translateY(20px);
    transition: 1s ease;
}
.fadeup.show {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 768px) {
    .menu-btn {
        display: block;
        position: absolute;
        right: 20px;
        top: 20px;
    }

    #navList li {
        margin: 15px 0;
        display: block;
    }

    .circle {
        width: 120px;
        height: 120px;
    }
}

/* ------------------------
  　ribbon
------------------------- */
.ribbon {
    border-top: 4px solid #E60026;
    margin-top: 50px;
    width: 100%;
}

/* ------------------------
  　footer
------------------------- */
#wrapper {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}
@media (min-width: 768px) {
    #wrapper {
        height: 300px;
    }
}


.footer-info {
	padding-top: 15vw;
	display:block;
}

/*========= waveを描画するエリア設定 ===============*/

canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* =========================
   Loading Hero
========================= */

#loading-hero {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  animation: loadingFade 2.8s ease forwards;
}

#loading-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* フェードイン → フェードアウト */
@keyframes loadingFade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* =========================
   HERO SECTION
========================= */

.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 8%;
  box-sizing: border-box;
}

.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-content {
  position: relative;
  max-width: 600px;
  text-align: left;
}

.hero-title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.2;
  margin: 0 0 20px;
  color: #ea0029;
  font-weight: 700;
}

.hero-title span {
  display: block;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: #333;
  margin-top: 10px;
}

.hero-lead {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* =========================
   Responsive
========================= */

@media (max-width: 768px) {
  .hero {
    padding: 0 6%;
    justify-content: center;   /* ← 追加 */
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
    margin: 0 auto;           /* ← 追加 */
  }

  .section-scroll {
    bottom: 12px;
  }

  .steps {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center;    /* 中央寄せ */
    width: 100%;            /* 幅をいっぱいに広げる（任意） */
    gap: 20px;              /* 縦の隙間を少し狭める（任意） */
  }

  .step {
    width: 90%;             /* 横幅を画面に合わせる */
    max-width: 300px;       /* 広がりすぎないように制限 */
  }
}


/* =========================
   Floating Menu
========================= */



.floating-menu {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999; /* ← 最前面 */
}

.floating-btn {
  width: 100px;
  height: 100px;
  border-radius: 64% 36% 54% 46% / 49% 41% 59% 51%;
  border: none;
  background: #ea0029;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.floating-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 14px 30px rgba(0,0,0,0.3);
}

/* メニュー本体 */
.floating-nav {
  position: absolute;
  bottom: 70px;
  right: 0;
  background: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  list-style: none;
  margin: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  display: none;
}

.floating-nav li {
  margin: 12px 0;
}

.floating-nav a {
  color: #333;
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
}

/* 表示状態 */
.floating-nav.show {
  display: block;
  animation: fadeUpMenu 0.25s ease;
}

@keyframes fadeUpMenu {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   Floating Menu fix (SP)
========================= */

.floating-menu .floating-nav {
  display: none;
}

.floating-menu .floating-nav.show {
  display: block;
}

/* =========================
   Floating Button Animation
========================= */

.floating-btn {
  animation: floaty 3.5s ease-in-out infinite;
}

/* ホバー時は止める（任意だけどおすすめ） */
.floating-btn:hover {
  animation-play-state: paused;
}

/* ふわふわアニメーション */
@keyframes floaty {
0%, 100% {
	border-radius: 64% 36% 54% 46% / 49% 41% 59% 51%;
	transform: scale(1);
}
50% {
	border-radius: 39% 61% 48% 52% / 43% 55% 45% 57%;
	transform: scale(1.02);
}
}




/*セクション区切り飾り*/
.home-line{
	height: 11vw;	/*下の行の飾り分の高さ*/
	position: relative;
}
.Line-d1 {
	background: url('../img/kugiri_d1.png') no-repeat center bottom / 100%;	/*背景画像*/
	bottom: 200px;
}
.Line-d2 {
	background: url('../img/kugiri_d2.png') no-repeat center bottom / 100%;	/*背景画像*/
}
.Line-d3 {
	background: url('../img/kugiri_d3.png') no-repeat center bottom / 100%;	/*背景画像*/
}