@charset "UTF-8";

/* ==========================================
   1. Reset & Base Styles
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
  color: #333333;
  line-height: 1.6;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* 共通コンテナ幅：1120px */
.container {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}


/* ==========================================
   2. Headings (見出し共通定義)
   ========================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: #004097;
}


/* ==========================================
   3. Utility Classes (クリアランス・改行など)
   ========================================== */
/* PC版クリアランス */
.cl_pc120 { margin-bottom: 120px !important;}
.cl_pc100 { margin-bottom: 100px !important;}
.cl_pc80  { margin-bottom: 80px !important;}
.cl_pc50  { margin-bottom: 50px !important;}
.cl_pc30  { margin-bottom: 30px !important;}

@media screen and (max-width: 767px) {
  .cl_pc120 { margin-bottom: 60px !important;}
  .cl_pc100 { margin-bottom: 50px !important;}
  .cl_pc80  { margin-bottom: 40px !important;}
  .cl_pc50  { margin-bottom: 25px !important;}
  .cl_pc30  { margin-bottom: 15px !important;}
}

/* SMP版クリアランス */
.cl_sm20 { margin-bottom: 10px !important;}
.cl_sm40 { margin-bottom: 20px !important;}

@media screen and (max-width: 767px) {
  .cl_sm20 { margin-bottom: 20px !important;}	
  .cl_sm40 { margin-bottom: 40px !important;}	
}

/* 固定クリアランス */
.cl_10 { margin-bottom: 10px !important;}
.cl_20 { margin-bottom: 20px !important;}
.cl_30 { margin-bottom: 30px !important;}

/* 表示切り替え（PC / スマホ） */
.pc_view { display: block; }
.smp_view { display: none; }
.pc_only { display: inline; }

@media screen and (max-width: 767px) {
  .pc_view { display: none !important; }
  .smp_view { display: block !important; }
  .pc_only { display: none !important; }
}


/* ==========================================
   4. Header
   ========================================== */
.header {
  width: 100%;
  background-color: #ffffff;
  padding: 12px 0;
  position: relative;
  z-index: 10;
}

.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.header-logo-img {
  height: 70px;
  width: auto;
  display: block;
}
.header-logo-link {
  display: block;
	cursor: pointer;
  transition: opacity 0.3s ease;
}

.header-logo-link:hover {
  opacity: 0.8;
}

/* ==========================================
   5. Section 1: Main Visual (FV)
   ========================================== */
.fv {
  width: 100%;
  aspect-ratio: 1600 / 1193;
  background: url('../images/top.jpg') center top / cover no-repeat;
  display: flex;
  align-items: center;
  padding-top: 0px;
  position: relative;
  overflow: hidden;
}

.fv-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* 紙飛行機（plain.png） */
.fv-plane {
  position: absolute;
  top: 15%;
  left: 26%;
  z-index: 3;
  width: 95px;
  max-width: 95px;
}

.fv-plane-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 左側：メインコピー */
.fv-content {
  flex: 0 1 auto;
}

.fv-main-copy {
  font-size: clamp(2.5rem, 3.5vw + 1rem, 3.75rem);
  font-weight: 700;
  color: #004097;
  line-height: 1.35;
  letter-spacing: 0.05em;
}

.fv-sub-copy {
  font-size: clamp(1rem, 1.2vw + 0.4rem, 1.375rem);
  font-weight: 500;
  color: #004097;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* 右側：10周年ロゴ */
.fv-logo {
  flex-shrink: 0;
  width: clamp(300px, 30vw, 440px);
}

.fv-logo-img {
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================
   6. Section 2: MESSAGE
   ========================================== */
.message {
  width: 100%;
  aspect-ratio: 1600 / 1180;
  min-height: 1180px;
  background: url('../images/bg_sky.jpg') center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #ffffff;
  padding: 80px 0;
}

.message-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  transform: translateY(-80px);
}

/* MESSAGE 見出し (PC版：固定サイズ) */
.message-title {
  font-size: 2.3125rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

/* 4色アクセントライン */
.message-line {
  width: 80px;
  height: 4px;
  margin: 0 auto;
  background: linear-gradient(to right, #004097 25%, #E50012 25% 50%, #37A0DA 50% 75%, #6BBB6E 75%);
  border-radius: 2px;
}

/* サブタイトル (PC版：固定サイズ) */
.message-sub-copy {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* 本文ブロック共通 (PC版：固定サイズ) */
.message-text-block {
  font-size: 1.375rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* 右上の紙飛行機 */
.message-plane {
  position: absolute;
  top: 15%;
  right: 20%;
  z-index: 3;
  width: 90px;
  max-width: 90px;
  transform: rotate(-15deg);
}

.message-plane-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 左下の装飾 (deco_1.png) - PC版 */
.message-deco {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 350px;
  max-width: 350px;
  pointer-events: none;
}

.message-deco-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================
   7. Section 3: OUR HISTORY (PC Base)
   ========================================== */
.history {
  width: 100%;
  position: relative;
  padding: 100px 0 320px; /* ★下部に十分な余白を確保して、04の写真と被らないように外だしのスペースを作る */
  background-color: #ffffff;
  overflow: hidden;
}

/* 装飾・背景素材配置 */
.history-bg-sky {
  position: absolute;
  top: -100px;
  right: 0;
  width: 650px;
  height: 510px;
  z-index: 1;
  pointer-events: none;
}

.history-sky-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.history-deco-2 {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 2;
  width: 300px;
  pointer-events: none;
}

.history-deco-3 {
  position: absolute;
  top: 60px;
  left: 22%;
  z-index: 2;
  width: 160px;
  pointer-events: none;
}

.history-plane-3 {
  position: absolute;
  top: 250px;
  right: 18%;
  z-index: 3;
  width: 100px;
  pointer-events: none;
}

.history-inner {
  position: relative;
  z-index: 5;
}

/* セクションタイトル */
.history-title {
  font-size: 2.3125rem;
  font-weight: 700;
  color: #004097;
  text-align: center;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.history-line {
  width: 80px;
  height: 4px;
  margin: 0 auto 20px;
  background: linear-gradient(to right, #004097 25%, #E50012 25% 50%, #37A0DA 50% 75%, #6BBB6E 75%);
  border-radius: 2px;
}

.history-sub-copy {
  font-size: 2.5rem;
  font-weight: 700;
  color: #000000;
  text-align: center;
  letter-spacing: 0.05em;
}

/* タイムラインアイテムリスト */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.history-item-reverse {
  flex-direction: row-reverse;
}

.history-content {
  flex: 0 0 450px;
  font-family: "游明朝", "Yu Mincho", "YuMincho", "A-OTF リュウミン Pr6N", "Hiragino Mincho ProN", serif;
}

.history-header-box {
  display: block;
}

/* 数字 */
.history-num {
  font-size: 8.375rem;
  font-weight: 100;
  color: #82A1CC;
  line-height: 0.9;
  font-style: italic;
  margin-bottom: 5px;
}

.history-en {
  font-size: 1.0625rem;
  color: #82A1CC;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}

.history-heading {
  font-size: 3.0625rem;
  font-weight: 500;
  color: #004097;
  line-header: 1.2;
  margin-bottom: 12px;
}

.history-lead {
  font-size: 1.5rem;
  font-weight: 500;
  color: #004097;
  line-height: 1.4;
  margin-bottom: 20px;
}

.history-border {
  width: 117px;
  height: 3px;
  background-color: #004097;
  margin-bottom: 20px;
}

.history-desc {
  font-size: 1.0625rem;
  font-weight: 500;
  color: #000000;
  line-height: 1.8;
}

.history-img-wrap {
  max-width: 604px;
}

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



/* ==========================================
   8. Section 4: NEXT 10 YEARS
   ========================================== */
.next-years {
  width: 100%;
  aspect-ratio: 1600 / 1480;
  min-height: 1480px;
  background: url('../images/NEXT 10 YEARS_bg.jpg') center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #000000;
  padding: 80px 0;
}

.next-years-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  transform: translateY(-370px); 
}

/* 見出し (37ポイント / #004097 / ボールド) */
.next-years-title {
  font-size: 2.3125rem;
  font-weight: 700;
  color: #004097;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

/* 4色アクセントライン */
.next-years-line {
  width: 80px;
  height: 4px;
  margin: 0 auto;
  background: linear-gradient(to right, #004097 25%, #E50012 25% 50%, #37A0DA 50% 75%, #6BBB6E 75%);
  border-radius: 2px;
}

/* サブコピー (40ポイント / #000 / ボールド) */
.next-years-sub-copy {
  font-size: 2.5rem;
  font-weight: 700;
  color: #000000;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* 本文ブロック (22ポイント / #000 / ミディアム) */
.next-years-text-block {
  font-size: 1.375rem;
  font-weight: 500;
  color: #000000;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* 右上の紙飛行機 (plain_4.png) */
.next-years-plane {
  position: absolute;
  top: 5%;
  right: 18%;
  z-index: 3;
  width: 90px;
  max-width: 90px;
  transform: rotate(-15deg);
}

.next-years-plane-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================
   NEXT 10 YEARS スマホ版 (767px以下)
   ========================================== */
@media screen and (max-width: 767px) {
  .next-years {
    aspect-ratio: auto;
    min-height: 760px; /* スマホでテキストが収まる十分な高さを確保します */
    padding: 60px 0;
    display: flex;
    align-items: center;      /* 縦方向の中央に配置 */
    justify-content: center;  /* 横方向の中央に配置 */
  }

  .next-years-inner {
    transform: translateY(-200px);
    width: 100%;
  }

  .next-years-title {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
  }

  .next-years-sub-copy {
    font-size: clamp(1.05rem, 4.5vw, 1.3rem);
  }

  .next-years-text-block {
    font-size: clamp(0.85rem, 3.5vw, 1.05rem);
    line-height: 1.75;
  }

  .next-years-plane {
    top: 5%;
    right: 8%;
    width: 60px;
    max-width: 60px;
  }
}

/* ==========================================
   9. Section 5: Footer / Last Section
   ========================================== */
.footer {
  width: 100%;
  aspect-ratio: 1600 / 900;
  min-height: 700px;
  background: url('../images/last_bg.jpg') center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 80px 0;
}

.footer-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-80px); /* ★ご指定の移動位置を反映 */
}

/* 10th Anniversary ロゴのサイズと個別位置調整 */
.footer-10th-logo {
  width: clamp(320px, 38vw, 460px);
  margin: 0 auto;
  transform: translateY(-30px); /* 10thロゴ単体の追加持ち上げ */
}

.footer-10th-logo-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 企業ロゴのサイズ調整とリンク設定 */
.footer-company-logo {
  width: clamp(260px, 30vw, 380px);
  margin: 0 auto;
}

.footer-company-link {
  display: block;
  transition: opacity 0.3s ease;
}

.footer-company-link:hover {
  opacity: 0.8;
}

.footer-company-logo-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================
   Footer スマホ版 (767px以下)
   ========================================== */
@media screen and (max-width: 767px) {
  .footer {
    aspect-ratio: auto;
    min-height: 550px;
    padding: 60px 0;
  }

  .footer-inner {
    transform: translateY(-40px); /* スマホ版での全体持ち上げ調整 */
  }

  .footer-10th-logo {
    width: clamp(240px, 65vw, 320px);
    transform: translateY(-20px);
  }

  .footer-company-logo {
    width: clamp(220px, 60vw, 300px);
  }
}
/* ==========================================
   10. Page Top Button (トップへ戻るボタン)
   ========================================== */
.page-top-btn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 99;
  width: 100px; /* PC版の表示サイズ（お好みで調整可能） */
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

.page-top-btn:hover {
  transform: translateY(-5px); /* ホバー時に少しフワッと浮く */
  opacity: 0.9;
}

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

/* ==========================================
   Page Top Button スマホ版 (767px以下)
   ========================================== */
@media screen and (max-width: 767px) {
  .page-top-btn {
    right: 15px;
    bottom: 15px;
    width: 75px; /* スマホ画面に合わせて少しコンパクトに調整 */
  }
}

/* ==========================================
   OUR HISTORY 中間サイズ調整 (768px 〜 1024px)
   ========================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .history-item,
  .history-item-reverse {
    gap: 30px;
  }

  .history-content {
    flex: 0 0 380px;
  }

  .history-num {
    font-size: 6.5rem;
  }

  .history-heading {
    font-size: 2.3rem;
  }

  .history-lead {
    font-size: 1.25rem;
  }

  .history-img-wrap {
    flex: 0 1 480px;
  }

  .history-deco-3 {
    left: 5%;
    width: 120px;
  }
}

/* ==========================================
   Section 3: 最下部デコレーション (deco_boy & deco_girl - 外だし配置)
   ========================================== */
.history-deco-boy {
  position: absolute;
  bottom: 0;
  left: 0; /* 画面左端に外だし配置 */
  z-index: 2;
  width: 420px;
  pointer-events: none;
}

.history-boy-img {
  width: 100%;
  height: auto;
  display: block;
}

.history-deco-girl {
  position: absolute;
  bottom: 20px;
  right: 0; /* 画面右端に外だし配置 */
  z-index: 2;
  width: 230px;
  pointer-events: none;
}

.history-girl-img {
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================
   OUR HISTORY スマホ版 (767px以下)
   ========================================== */
@media screen and (max-width: 767px) {
  .history {
    padding: 50px 0;
  }

  /* 背景空画像をしっかり上に持ち上げる */
  .history-bg-sky {
    width: 80%;
    height: auto;
    top: -45px; 
  }

  /* デコキャラ（妖精）を左上に配置 */
  .history-deco-3 {
    width: 90px;
    top: 15px;
    left: 10px;
    z-index: 6;
  }

  /* 飛行機を生かし、スマホ画面に合うサイズと位置に調整 */
  .history-plane-3 {
    display: block;
    position: absolute;
    top: 35px;
    right: 8%;
    width: 65px;
    z-index: 6;
    pointer-events: none;
  }

  /* deco_2 のみスマホでは非表示 */
  .history-deco-2 {
    display: none;
  }

  .history-title {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
  }

  .history-sub-copy {
    font-size: clamp(1.05rem, 4.5vw, 1.3rem);
  }

  .history-list {
    gap: 45px;
  }

  .history-item,
  .history-item-reverse {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .history-content {
    flex: 1 1 100%;
    width: 100%;
    text-align: center;
  }

  .history-header-box {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 8px;
  }

  .history-num {
    font-size: 4rem;
    line-height: 0.9;
    margin-bottom: 0;
  }

  .history-title-group {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .history-en {
    font-size: 0.8rem;
    margin-bottom: 2px;
  }

  .history-heading {
    font-size: 1.75rem;
    margin-bottom: 0;
  }

  .history-lead {
    font-size: 1.05rem;
    margin-bottom: 10px;
    text-align: center;
  }

  .history-border {
    width: 75px;
    height: 3px;
    margin: 0 auto 10px;
  }

  .history-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: center;
  }

  .history-img-wrap {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }
}

@media screen and (max-width: 480px) {
  .history-bg-sky {
    width: 60%;
    height: auto;
    top: -5px; 
  } 
}


/* ==========================================
   Responsive (スマホ対応 - 767px以下)
   ========================================== */
@media screen and (max-width: 767px) {
  .fv {
    aspect-ratio: auto;
    min-height: 720px;
    align-items: center;
    padding: 60px 0 130px;
  }

  .fv-inner {
    flex-direction: column-reverse;
    text-align: center;
    gap: 30px;
  }

  .fv-plane {
    top: 5%;
    left: 10%;
    width: 90px;
    max-width: 90px;
  }

  .fv-logo {
    width: 60%;
    max-width: 260px;
    margin: 0 auto;
  }

  .fv-main-copy {
    font-size: 1.85rem;
  }

  .fv-sub-copy {
    font-size: 1.05rem;
  }

  /* MESSAGE セクション スマホ用 */
  .message {
    aspect-ratio: auto;
    min-height: 700px;
    padding: 0px 0 0px;
  }

  .message-inner {
    transform: translateY(-65px);
  }

  .message-title {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
  }

  .message-sub-copy {
    font-size: clamp(1.05rem, 4.5vw, 1.3rem);
  }

  .message-text-block {
    font-size: clamp(0.78rem, 3.2vw, 0.95rem);
    line-height: 1.75;
  }

  .message-plane {
    top: 10%;
    right: 18%;
    width: 70px;
    max-width: 70px;
  }

  .message-deco {
    width: 120px;
    max-width: 120px;
    bottom: 0;
    left: 0;
  }

  .history-deco-boy,
  .history-deco-girl {
    display: none;
  }
}

@media screen and (max-width: 375px) {
  .message-text-block {
    font-size: 0.875rem;
    text-align: justify;
  }

  .message-plane {
    top: 7%;
    right: 10%;
    width: 70px;
    max-width: 70px;
  }
	.next-years-text-block {
    font-size: clamp(0.85rem, 3.5vw, 1.05rem);
    line-height: 1.75;
		 text-align: justify;
  }

}