@charset "UTF-8";

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Outfit:wght@400;600;700;900&display=swap');

/* ====================================
   Reset & Base Styles
   ==================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-padding-top: 130px; /* ヘッダーの高さ + 余白(20px程度) */
}
@media (max-width: 768px) {
  html {
    scroll-padding-top: 100px; /* スマホ用ヘッダーの高さ + 余白 */
  }
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    line-height: 1.8;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt";
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    scroll-padding-top: 130px; /* ヘッダーの高さ + 余白(20px程度) */
}

body.fixed {
    overflow-y: hidden;
}

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

.en {
    font-family: 'Outfit', sans-serif !important;
}

.bold {
    display: inline;
    font-weight: 700;
}

main {
    overflow: hidden;
}
/* 共通コンテナ */
.container {
    width: 90%;
    max-width: 1340px;
    margin: 0 auto;
}

/* セクション共通 */
.section {
    padding: 100px 0;
}
@media (max-width: 768px) {
    .section {
        padding: 40px 0;
    }
}

/* タイトルスタイル */
/* タイトル全体（英語部分） */
.section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 120px;       /* 指定サイズに変更 */
    font-weight: 600;
    line-height: 0.8;       /* 行間を詰めて引き締める */
    color: #000;
    margin-bottom: 50px;    /* 下の余白 */
    letter-spacing: -0.02em; /* 少し詰めて塊感を出す */
}

/* 日本語サブタイトル */
.section-title .ja {
    display: block;         /* 改行 */
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;        /* 指定サイズに変更 */
    font-weight: 700;       /* 太めに変更して視認性を高める */
    color: #008fcc;
    margin-top: 25px;       /* 英語との間隔 */
    line-height: 1;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 78px;    /* スマホでは半分程度に落とす */
        line-height: 1;
        margin-bottom: 20px;
    }
    
    .section-title .ja {
        font-size: 15px;    /* 日本語も読みやすいサイズに調整 */
        margin-top: 5px;
    }
}

ul {
  list-style: none; /* マーカーを非表示にする */
  padding-left: 0;  /* 左の余白をなくす */
}
li {
  list-style: none;
}

/* リンク共通アニメーション */
a {
    color: #333; /* 通常：黒系 */
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: #008fcc; /* ホバー：青 */
}

.pc-only {
    display: block !important;
}
.sp-only {
    display: none !important;
}
@media (max-width: 768px) {
    .pc-only {
        display: none !important;
    }
    .sp-only {
        display: block !important;
    }
}

/* ====================================
   VIEW MORE Link Style (修正版)
   ==================================== */

.link-view-more {
    display: inline-block;
    width: 300px;          /* ▼ 指定：幅を300pxに固定 */
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #008fcc;
    text-decoration: none;
    position: relative;
    padding-bottom: 8px;
    margin-top: 30px;
    transition: opacity 0.3s;
    /* vertical-align: bottom; */ /* 必要に応じて */
}
@media (max-width: 768px) {
    .link-view-more {
        width: 210px;
        margin-top: 0;
        font-size: 18px;
        line-height: 1.6;
    }
}
/* ライン（水平部分） */
.link-view-more::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;           /* テキスト幅に合わせる */
    height: 2px;           /* 指定：ライン幅2px */
    background: #008fcc;   /* 指定：#008fcc */
    transition: width 0.3s ease;
}

.link-view-more::after {
    content: '';
    position: absolute;
    bottom: 0;             /* ラインと同じ高さ */
    right: 0;              /* 右端揃え */
    width: 12px;           /* 少し長さを調整 */
    height: 2px;           /* 線の太さ */
    background: #008fcc;
    
    /* ▼ ここが重要です */
    transform-origin: right bottom; /* 右下を軸にする */
    transform: rotate(45deg);      /* マイナス45度で「左側」を持ち上げる */
    
    transition: right 0.3s ease;
}

/* ------------------------------------
   ホバー時のアニメーション
   ------------------------------------ */
.link-view-more:hover {
    opacity: 0.8; /* 少し薄くして反応を示す */
}

/* 下の線が右に5px伸びる */
.link-view-more:hover::before {
    width: calc(100% + 10px); 
}

/* 矢印の先端も一緒に右へ5px移動する */
.link-view-more:hover::after {
    right: -10px; 
}

/* フェードインアニメーション */
.js-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s, transform 1s;
}
.js-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.js-fade.fade-left {
  transform: translate(-50px, 0); 
}

.js-fade.is-visible.fade-left {
  transform: translate(0, 0);
}

.js-fade.fade-right {
  transform: translate(50px, 0); 
}
.js-fade.is-visible.fade-right {
  transform: translate(0, 0);
}

/* ------------------------------------
   3. 〇の中に→のリンクアイコン (GUIDEセクション等)
   マウスオーバーで中の矢印が3px右にアニメーション移動
   ------------------------------------ */
.icon-arrow-circle {
}

/* 矢印の文字（→） */
.icon-arrow-circle::before {
}



/* ------------------------------------
   4. ボタンの反転アニメーション
   ------------------------------------ */

/* 白色背景＋黒色フォント → ホバー：黒色背景＋白色フォント */
.btn-white {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    padding: 15px 40px;
    text-align: center;
    font-weight: 700;
    transition: all 0.3s ease;
}
.btn-white:hover {
    background-color: #000;
    color: #fff;
}
.btn-white .text {
    display: block;
    font-size: 18px;
    font-weight: 700;
}
.btn-white .icon {
    display: block;
    margin-left: 20px;
}
.btn-white .icon img {
    display: block;
    width: 20px;
    height: 20px;
}
.btn-white .icon img.icon_def {
    display: block;
}
.btn-white .icon img.icon_hover {
    display: none;
}
.btn-white:hover .icon img.icon_def {
    display: none;
}
.btn-white:hover .icon img.icon_hover {
    display: block;
}

/* 黒色背景＋白色フォント → ホバー：白色背景＋黒色フォント */
.btn-black {
    display: inline-block;
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    padding: 15px 60px;
    text-align: center;
    font-weight: 700;
    transition: all 0.3s ease;
}
.btn-black:hover {
    background-color: #fff;
    color: #000;
}

.fw-600 {
    display: inline;
  font-weight: 600;
}



/* ====================================
   Utility Margins (margin-bottom)
   ==================================== */
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb45 { margin-bottom: 45px; }
.mb50 { margin-bottom: 50px; }
.mb55 { margin-bottom: 55px; }
.mb60 { margin-bottom: 60px; }
.mb65 { margin-bottom: 65px; }
.mb70 { margin-bottom: 70px; }
.mb75 { margin-bottom: 75px; }
.mb80 { margin-bottom: 80px; }
.mb85 { margin-bottom: 85px; }
.mb90 { margin-bottom: 90px; }
.mb95 { margin-bottom: 95px; }
.mb100 { margin-bottom: 100px; }
.mb105 { margin-bottom: 105px; }
.mb110 { margin-bottom: 110px; }
.mb115 { margin-bottom: 115px; }
.mb120 { margin-bottom: 120px; }
@media (max-width: 768px) {
    .mb50 { margin-bottom: 40px; }
    .mb55 { margin-bottom: 44px; }
    .mb60 { margin-bottom: 48px; }
    .mb65 { margin-bottom: 52px; }
    .mb70 { margin-bottom: 56px; }
    .mb75 { margin-bottom: 60px; }
    .mb80 { margin-bottom: 64px; }
    .mb85 { margin-bottom: 68px; }
    .mb90 { margin-bottom: 72px; }
    .mb95 { margin-bottom: 76px; }
    .mb100 { margin-bottom: 80px; }
    .mb105 { margin-bottom: 84px; }
    .mb110 { margin-bottom: 88px; }
    .mb115 { margin-bottom: 92px; }
    .mb120 { margin-bottom: 96px; }
}
@media (max-width: 480px) {
    .mb50 { margin-bottom: 25px; }
    .mb55 { margin-bottom: 27.5px; }
    .mb60 { margin-bottom: 30px; }
    .mb65 { margin-bottom: 32.5px; }
    .mb70 { margin-bottom: 35px; }
    .mb75 { margin-bottom: 37.5px; }
    .mb80 { margin-bottom: 40px; }
    .mb85 { margin-bottom: 42.5px; }
    .mb90 { margin-bottom: 45px; }
    .mb95 { margin-bottom: 47.5px; }
    .mb100 { margin-bottom: 50px; }
    .mb105 { margin-bottom: 52.5px; }
    .mb110 { margin-bottom: 55px; }
    .mb115 { margin-bottom: 57.5px; }
    .mb120 { margin-bottom: 60px; }
}



/* ====================================
   Utility Paddings (Top & Bottom)
   ==================================== */

/* ------------------------------------
   Padding Top (.pt)
   ------------------------------------ */
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt25 { padding-top: 25px; }
.pt30 { padding-top: 30px; }
.pt35 { padding-top: 35px; }
.pt40 { padding-top: 40px; }
.pt45 { padding-top: 45px; }
.pt50 { padding-top: 50px; }
.pt55 { padding-top: 55px; }
.pt60 { padding-top: 60px; }
.pt65 { padding-top: 65px; }
.pt70 { padding-top: 70px; }
.pt75 { padding-top: 75px; }
.pt80 { padding-top: 80px; }
.pt85 { padding-top: 85px; }
.pt90 { padding-top: 90px; }
.pt95 { padding-top: 95px; }
.pt100 { padding-top: 100px; }

/* ------------------------------------
   Padding Bottom (.pb)
   ------------------------------------ */
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb25 { padding-bottom: 25px; }
.pb30 { padding-bottom: 30px; }
.pb35 { padding-bottom: 35px; }
.pb40 { padding-bottom: 40px; }
.pb45 { padding-bottom: 45px; }

/* Responsive Targets */
.pb50 { padding-bottom: 50px; }
.pb55 { padding-bottom: 55px; }
.pb60 { padding-bottom: 60px; }
.pb65 { padding-bottom: 65px; }
.pb70 { padding-bottom: 70px; }
.pb75 { padding-bottom: 75px; }
.pb80 { padding-bottom: 80px; }
.pb85 { padding-bottom: 85px; }
.pb90 { padding-bottom: 90px; }
.pb95 { padding-bottom: 95px; }
.pb100 { padding-bottom: 100px; }
@media (max-width: 768px) {
    .pt50 { padding-top: 40px; }
    .pt55 { padding-top: 44px; }
    .pt60 { padding-top: 48px; }
    .pt65 { padding-top: 52px; }
    .pt70 { padding-top: 56px; }
    .pt75 { padding-top: 60px; }
    .pt80 { padding-top: 64px; }
    .pt85 { padding-top: 68px; }
    .pt90 { padding-top: 72px; }
    .pt95 { padding-top: 76px; }
    .pt100 { padding-top: 80px; }
    .pb50 { padding-bottom: 40px; }
    .pb55 { padding-bottom: 44px; }
    .pb60 { padding-bottom: 48px; }
    .pb65 { padding-bottom: 52px; }
    .pb70 { padding-bottom: 56px; }
    .pb75 { padding-bottom: 60px; }
    .pb80 { padding-bottom: 64px; }
    .pb85 { padding-bottom: 68px; }
    .pb90 { padding-bottom: 72px; }
    .pb95 { padding-bottom: 76px; }
    .pb100 { padding-bottom: 80px; }
}
@media (max-width: 480px) {
    .pt50 { padding-top: 25px; }
    .pt55 { padding-top: 27.5px; }
    .pt60 { padding-top: 30px; }
    .pt65 { padding-top: 32.5px; }
    .pt70 { padding-top: 35px; }
    .pt75 { padding-top: 37.5px; }
    .pt80 { padding-top: 40px; }
    .pt85 { padding-top: 42.5px; }
    .pt90 { padding-top: 45px; }
    .pt95 { padding-top: 47.5px; }
    .pt100 { padding-top: 50px; }
    .pb50 { padding-bottom: 25px; }
    .pb55 { padding-bottom: 27.5px; }
    .pb60 { padding-bottom: 30px; }
    .pb65 { padding-bottom: 32.5px; }
    .pb70 { padding-bottom: 35px; }
    .pb75 { padding-bottom: 37.5px; }
    .pb80 { padding-bottom: 40px; }
    .pb85 { padding-bottom: 42.5px; }
    .pb90 { padding-bottom: 45px; }
    .pb95 { padding-bottom: 47.5px; }
    .pb100 { padding-bottom: 50px; }
}