@charset "UTF-8";

/*
 * ===================================================================
 * 1. Global Styles (統合済みの最終版スタイル)
 * ===================================================================
 * 解説：
 * 両方の提案の良い点を統合しました。
 * materials.cssの包括的なリセットを採用しつつ、意図しないレイアウト崩れを
 * 防ぐために過剰な指定は削除。両方のCSSから最適な基本スタイルを
 * 抽出し、サイト全体の土台となるスタイルをここで一元管理します。
 * ===================================================================
 */

// --- Reset & Basic Settings ---
// materials.cssの包括的なリセットを採用しつつ、意図しないレイアウト崩れを防ぐために`position: relative`は削除
*,
*::before,
*::after {
  border: 0;
  outline: none;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5% !important; // remの基準 (1rem = 10px)
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0;
  color: #333;
  background-color: #fff;
  font-size: 1.6rem; // 16px相当
  line-height: 1.8;  // 単位なしが推奨
  letter-spacing: .07em;
  font-feature-settings: "palt";
  // 両方のfont-familyを参考に、よりモダンで互換性の高いスタックに調整
  font-family: 'Noto Sans JP', "YakuHanJP", 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// --- Basic Typography & Elements ---
ul, ol {
  list-style: none;
}

p {
  line-height: 1.75;
  // text-align: justify; は日本語では読みづらくなることがあるため、必要であればセクション側で指定
}

a {
  color: #3B85D8; // クリックできることが分かりやすい青色を優先
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.7;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; // `middle`より`bottom`の方が意図しない隙間を防ぎやすい
  border-style: none;
}

.flow-container {
  display: flex;
  font-family: sans-serif;
}

.flow-step {
  position: relative;
  flex: 1;
  height: 80px; /* 少し高さ増やして数字を目立たせる */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

/* 矢印部分（全ステップ尖らせる） */
.flow-step::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 20px solid;
  z-index: 2;
}


/* 背景色 
.flow-step:nth-child(1) { background: #A6BFDB; }
.flow-step:nth-child(2) { background: #90ADD1; }
.flow-step:nth-child(3) { background: #7A9BC7; }
.flow-step:nth-child(4) { background: #6489BD; }
.flow-step:nth-child(5) { background: #4E77B3; }
.flow-step:nth-child(6) { background: #205EA4; }

矢印色
.flow-step:nth-child(1)::after { border-left-color: #A6BFDB; }
.flow-step:nth-child(2)::after { border-left-color: #90ADD1; }
.flow-step:nth-child(3)::after { border-left-color: #7A9BC7; }
.flow-step:nth-child(4)::after { border-left-color: #6489BD; }
.flow-step:nth-child(5)::after { border-left-color: #4E77B3; }
.flow-step:nth-child(6)::after { border-left-color: #205EA4; }
*/

/* 背景色 */ 
.flow-step:nth-child(1) { background: #A6BFDB; }
.flow-step:nth-child(2) { background: #638FC0; }
.flow-step:nth-child(3) { background: #205EA4; }

/* 矢印色 */
.flow-step:nth-child(1)::after { border-left-color: #A6BFDB; }
.flow-step:nth-child(2)::after { border-left-color: #638FC0; }
.flow-step:nth-child(3)::after { border-left-color: #205EA4; }

/* FLOWラベル部分 */
.label {
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: bold;
}

/* 数字部分を大きく */
.num {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}

.gladient{
  background: linear-gradient(90deg, #2790BE 0%, #19467A 100%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.materials .margin-auto .ttl {
 margin: auto;
}

.materials .topFormSec__inner__intro{
  font-size: 18px;
}

.m0{
  margin: 0 !important;
}
.mb40{
  margin-bottom: 40px !important;
}