/****************************************
  gi2020_css_9_original.css
  since 2020-03-15 update 2026-02-15
****************************************/

/* original color setting */

/******************************/
/* navigation back color setting */
.navigation__wrapper,
.home-slider {
  background: linear-gradient(-45deg, rgba(230, 0, 18, 1), rgba(0, 43, 105, 1), rgba(0, 43, 105, 1) , rgba(230, 0, 18, 1));
}
/* fukuda-san
  background-image: url(/_gi2020_test/header_back.jpg);
*/

/******************************/
/* my original start */
/* middle of text and picture  back color setting */
.max-width-1200.gi_header{
  background: linear-gradient(-20deg, rgba(255, 255, 255, 0) 60%, rgba(0, 43, 105, 0.5), rgba(0, 43, 105, 1), rgba230, 0, 18, 1));
}
/* my original end */
/* fukuda-san upper css cut! */

/* for fukuda-san font & color 
.max-width-1200.gi_header h1,
.max-width-1200.gi_header h3,
.navigation-links__wrapper h1,
.navigation-links__wrapper h3,
.navigation-links__wrapper p {
  text-shadow: none;
  color: rgb(206,22,74);
  font-family: "Noto Serif JP", sans-serif;
}
.menu-inner-line {
  background-color:rgb(206,22,74);
}
*/

/******************************/
/* top page picture and color setting */
.slide-1-home {
  background-image: url(header_pic_1.jpg);
}
/* fukuda-san
  background-image: url(/_gi2020_test/header_pic_1.png);
*/
.slide-2-home {
  background-image: url(header_pic_2.jpg)
}
.slide-3-home {
  background-image: url(header_pic_3.jpg)
}
.slide-4-home {
  background-image: url(header_pic_4.jpg)
}
.slide-5-home {
  background-image: url(header_pic_5.jpg)
}
.slide-6-home {
  background: none;
}
.slide-7-home {
  background: none;
}
.slide-8-home {
  background: none;
}
.slide-9-home {
  background: none;
}
.slide-10-home {
  background: none;
}
.slide-11-home {
  background: none;
}
.slide-12-home {
  background: none;
}
.slide-13-home {
  background: none;
}
.slide-14-home {
  background: none;
}
.slide-15-home {
  background: none;
}
.slide-16-home {
  background: none;
}
.slide-17-home {
  background: none;
}
.slide-18-home {
  background: none;
}
.slide-19-home {
  background: none;
}
.slide-20-home {
  background: none;
}
/* ===== sample =====
  background: none;
  background: linear-gradient(-45deg, rgba(39, 154, 200, 1), rgba(33, 38, 78, 1));
  background: linear-gradient(-45deg, rgba(33, 38, 78, 1), rgba(39, 154, 200, 1));
  background: linear-gradient(-45deg, rgba(39, 154, 200, 1), rgba(33, 38, 78, 1)), url(/_gi2020/img/test__.jpg);
  background-image: none;
  background-image: url(/_gi2020_test/header_pic_1.jpg);
  background-image: url(/_gi2020_test/header_pic_20.jpg);
*/
/*rgba(230, 0, 18, 1), rgba(0, 43, 105, 1)*/
/******************************/
/* small header color setting */
.gi-header-container.gi-header-gen{
  background: linear-gradient(135deg, rgba(0, 43, 105, 0.7), rgba(0, 43, 105, 1), rgba(230, 0, 18, 1), rgba(230, 0, 18, 1), rgba(0, 43, 105, 1), rgba(0, 43, 105, 0.7));
  border-top:10px solid rgba(255, 255, 255, 0.5);
  border-bottom:10px solid rgba(255, 255, 255, 0.5);
}

/******************************/
/* menu back color setting */
.section.med-gray-bg {
  background-color: rgba(0, 43, 105, 0.1);
}
/* menu border setting */
.values-cell {
  border-top:2px solid rgba(230, 0, 18, 1);
}
/* menu "MENU" color setting */
.h3-gray.values-h3 {
  color:rgba(0, 43, 105, 1);
}
/* menu title color setting */
.values-cell p strong {
  color:rgba(0, 43, 105, 1);
}

/******************************/
/* page title h2 color setting */
.page-container.bg-transparent.gi_entry_keywords h2 {
  color:rgba(0, 43, 105, 1);
}
/******************************/
/* entry page h3 color and border setting */
.introduction-content__container h3 {
  color:rgba(0, 43, 105, 1);
  border-top:2px solid rgba(230, 0, 18, 1);
}


/******************************/
/* media max-width = 991px */
@media screen and (min-width: 1250px){
  /* top page picture position setting
     from left % from top % */
  .slide-1-home {
    background-position: 50% 50%;
  }
/* fukuda-san
    height:110vh;
    background-position: 70% 50%;
    background-position: 50% -22vh;
    background-position: 50% -4vh;
    height:110vh;
*/
  .slide-2-home {
    background-position: 50% 0%;
  }
  .slide-3-home {
    background-position: 50% 50%;
  }
  .slide-4-home {
    background-position: 50% 60%;
  }
  .slide-5-home {
    background-position: 50% 50%;
  }
}


/******************************/
/* media max-width = 991px */
@media screen and (max-width: 1249px){
  /* top page picture position setting
     from left % from top % */
  .slide-1-home {
    background-position: 50% 50%;
  }
/* fukuda-san
    height:110vh;
    height:110vh;
    background-position: 70% 50%;
*/
  .slide-2-home {
    background-position: 35% 50%;
  }
  .slide-3-home {
    background-position: 70% 50%;
  }
  .slide-4-home {
    height:110vh;
    background-position: 30% 50%;
  }
  .slide-5-home {
    background-position: 50% 50%;
  }
}



/* media max-width = 767px */
@media screen and (max-width: 767px){
}



/* media max-width = 479px */
@media screen and (max-width: 479px){
}


/* --- ヘッダーの文字サイズを全デバイスでh3と同期させる --- */

/* 1. 基本設定（PCサイズ） */
.max-width-1200.gi_header .hero-rank-title, 
.max-width-1200.gi_header .hero-en-name {
    font-size: 2.4rem !important;
    font-weight: 200 !important;
    line-height: 1.1 !important;
    text-shadow: 2px 2px 2px #606060 !important;
    color: #fff !important;
    margin-bottom: 24px !important;
    display: block !important;
    letter-spacing: 1px !important;
}

/* 2. タブレット（1280px以下） */
@media screen and (max-width: 1280px) {
    .max-width-1200.gi_header .hero-rank-title, 
    .max-width-1200.gi_header .hero-en-name {
        font-size: 2.21rem !important;
        margin-bottom: 12px !important;
    }
}

/* 3. 小さめのタブレット（1024px以下） */
@media screen and (max-width: 1024px) {
    .max-width-1200.gi_header .hero-rank-title, 
    .max-width-1200.gi_header .hero-en-name {
        font-size: 1.88rem !important;
    }
}

/* 4. モバイル横向き（991px以下） */
@media screen and (max-width: 991px) {
    .max-width-1200.gi_header .hero-rank-title, 
    .max-width-1200.gi_header .hero-en-name {
        font-size: 1.61rem !important;
    }
}

/* 5. スマホ（767px以下） */
@media screen and (max-width: 767px) {
    .max-width-1200.gi_header .hero-rank-title, 
    .max-width-1200.gi_header .hero-en-name {
        font-size: 1.28rem !important;
        padding-top: 0 !important;
    }
}

/* 6. 小さなスマホ（479px以下） */
@media screen and (max-width: 479px) {
    .max-width-1200.gi_header .hero-rank-title, 
    .max-width-1200.gi_header .hero-en-name {
        font-size: 1.14rem !important;
    }
}


/*スマホの文字のために*/
/* --- 1. 全デバイス共通の基本設定 --- */
body, p, div, h3, h4 {
    font-family: "nsjp-gi", "Hiragino Kaku Gothic ProN", "sans-serif" !important;
}

/* <b>タグなどの太字設定 */
b, strong {
    font-family: "nsjp-gi" !important;
    font-weight: 700 !important;

}
/*    display: inline-block;*/

/* PC版のh4の基本設定（400でクッキリさせる） */
/* ※これを一番上に置くことで、下の@media（スマホ用）で上書きできるようにします */
.introduction-content__container h4 {
    font-weight: 400 !important; 
    color: #222 !important;
    letter-spacing: 0.02em !important;
}

/* --- 2. タブレット・スマホ（1024px以下）の共通調整 --- */
@media screen and (max-width: 1024px) {
    .introduction-content__container p, 
    .introduction-content__container a, 
    p, a, ul, li {
        font-size: 1.25rem !important;
        font-weight: 400 !important;
        line-height: 1.8 !important;
    }

    /* タブレット以下のh4は700（太字）で存在感を出す */
    .introduction-content__container h4 {
        font-size: 1.8rem !important; 
        font-weight: 700 !important; /* ← これが効くようになります！ */
        line-height: 1.4 !important;
        margin-top: 1.8em !important; 
        margin-bottom: 0.8em !important;
    }
}

/* --- 3. スマホ（767px以下）の微調整 --- */
@media screen and (max-width: 767px) {
    .introduction-content__container h4 {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        margin-top: 1.5em !important;
    }
}

/* --- 4. 小さなスマホ（479px以下）の最終調整 --- */
@media screen and (max-width: 479px) {
    p, a, ul, li {
        font-size: 1.2rem !important;
    }
    .introduction-content__container h4 {
        font-size: 1.35rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
    }
}

/* --- メインスライダー内のキャッチコピー強化 --- */

/* 1. 全デバイス共通：文字に芯を通し、視認性を劇的に上げる */
.slide-text {
    font-family: "nsjp-gi", sans-serif !important;
    font-weight: 700 !important;      /* しっかりとした太字に */
    line-height: 1.5 !important;
    color: #ffffff !important;         /* 真っ白に */
    
    /* 文字の周りに「光彩（縁取り）」または「影」を入れて、写真の色に負けないようにする */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), 
                 0px 0px 10px rgba(0, 0, 0, 0.4) !important;
    
    /* 少しだけ背景を暗くして文字を浮かび上がらせる（必要に応じて） */
    background: rgba(0, 0, 0, 0.2); 
    padding: 10px 20px;
    display: inline-block; /* 背景をつける場合はこれが必要 */
}

/* 2. PC版でのサイズ調整 */
@media screen and (min-width: 1025px) {
    .slide-text {
        font-size: 2.2rem !important;  /* 画面の大きさに負けないサイズ */
    }
}

/* 3. タブレット・スマホでのサイズ調整 */
@media screen and (max-width: 1024px) {
    .slide-text {
        font-size: 1.6rem !important;  /* モバイルでもしっかり読めるサイズ */
        padding: 8px 15px;
    }
}

/* 4. 小さなスマホでの微調整 */
@media screen and (max-width: 479px) {
    .slide-text {
        font-size: 1.25rem !important; /* スマホ画面に収まりつつ、存在感は維持 */
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important; /* スマホでは影をより濃く */
    }
}

/* --- メインスライダー内のキャッチコピー強化 --- */
/* 1. 全デバイス共通：文字に芯を通し、視認性を劇的に上げる */
.slide-text {
    font-family: "nsjp-gi", sans-serif !important;
    font-weight: 700 !important;      /* しっかりとした太字に */
    line-height: 1.5 !important;
    color: #ffffff !important;         /* 真っ白に */
    /* 文字の周りに「光彩（縁取り）」または「影」を入れて、写真の色に負けないようにする */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), 
                 0px 0px 10px rgba(0, 0, 0, 0.4) !important;
    /* 少しだけ背景を暗くして文字を浮かび上がらせる（必要に応じて） */
    background: rgba(0, 0, 0, 0.2); 
    padding: 10px 20px;
    display: inline-block; /* 背景をつける場合はこれが必要 */
}

/* 2. PC版（1025px以上）：完全中央配置・左右対称化 */
@media screen and (min-width: 1025px) {
    .slide-caption-wrapper {
        /* 左寄せの癖を完全にリセット */
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        
        /* 中身を中央へ */
        display: flex !important;
        justify-content: center !important; 
        
        /* 邪魔な余白をゼロに */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 auto !important;
    }

    .slide-text {
        /* 文字の箱自体の設定 */
        font-size: 2.2rem !important;
        display: block !important;
        
        /* 幅を指定して、左右の余白を自動計算させる */
        width: 80% !important;        /* 画面の8割の幅を使う */
        max-width: 1100px !important;  /* 巨大な画面でも広がりすぎない */
        
        /* これが左右対称の決め手です */
        margin-left: auto !important;
        margin-right: auto !important;
        
        text-align: left !important;   /* 箱は中央ですが、文字は左から */
        padding: 30px 50px !important;
        box-sizing: border-box !important;
    }
}

/* 2. PC版でのサイズ調整 
@media screen and (min-width: 1025px) {
    .slide-text {
        font-size: 2.2rem !important;
    }
}
*/
/* 3. タブレット・スマホでのサイズ調整 */
@media screen and (max-width: 1024px) {
    .slide-text {
        font-size: 1.6rem !important;  /* モバイルでもしっかり読めるサイズ */
        padding: 8px 15px;
    }
}
/* 4. 小さなスマホでの微調整 */
@media screen and (max-width: 479px) {
    .slide-text {
        font-size: 1.25rem !important; /* スマホ画面に収まりつつ、存在感は維持 */
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important; /* スマホでは影をより濃く */
    }
}
/* --- スライダーの文字表示エリアを横に最大化する --- */
/* --- スライダーの文字を左寄せにし、配置を最適化する --- */
/* --- スライダーの文字：左寄せ ＆ 横幅最大化 --- */
/* --- スライダー調整：モバイルでは枠を中央、文字は左寄せ --- */
/* 1. 全体的な配置：PCは左寄り、モバイルは中央寄りに */
.slide-caption-wrapper {
    width: 95% !important;
    max-width: 1400px !important;
    display: flex !important;
    justify-content: flex-start; /* 基本は左寄せ */
    padding-left: 2% !important;
    margin: 0 auto !important;
}
/* 2. 文字要素：モバイルでのみ「中央配置」を上書き */
.slide-text {
    width: auto !important;
    text-align: left !important;  /* 文字自体は常に左寄せ */
    display: block !important;
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 25px 40px !important;
    line-height: 1.6 !important;
}
/* --- 【ここが肝】タブレット・スマホ（1024px以下）の調整 --- */
@media screen and (max-width: 1024px) {
    .slide-caption-wrapper {
        justify-content: center !important; /* 親要素を中央揃えに固定 */
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    .slide-text {
        /* 1. 幅を「文字に合わせる」のではなく「画面に対する割合」で固定する */
        display: block !important;
        width: 90% !important;      /* 左右の余白を5%ずつ均等にする */
        margin-left: auto !important;  /* 左の余白を自動調整 */
        margin-right: auto !important; /* 右の余白を自動調整（これで中央に！） */
        /* 2. その他の設定 */
        text-align: left !important; /* 文字は左寄せ */
        max-width: none !important;  /* 幅の制限を解除して右まで伸ばす */
        background: rgba(0, 0, 0, 0.4) !important;
        padding: 20px 25px !important;
        font-size: 1.35rem !important;
        box-sizing: border-box !important; /* 余白を含めて幅を計算する */
    }
}
/* スマホ（479px以下）の最終調整 */
@media screen and (max-width: 479px) {
    .slide-text {
        width: 92% !important;      /* スマホでは画面いっぱいに近く */
        font-size: 1.2rem !important;
        padding: 15px 20px !important;
    }
}


/* --- プロフィール下の実績テキスト（歴任）の調整 --- */

/* 1. 全体的な調整：幅を広げて読みやすく */
.column-quote__author__subtext_2 {
    max-width: 100% !important; /* 幅の制限を解除して、1行にたくさん入るようにする */
    font-size: 0.95rem !important; /* 少し大きく（約15px） */
    line-height: 1.6 !important; /* 行間を広げて読みやすく */
    color: #444 !important; /* 真っ黒より少しだけ柔らかい色に */
    margin-top: 10px !important;
}

/* --- プロフィール下の実績テキスト：PCはシンプル、スマホは強調 --- */

/* 1. PC版（1025px以上）：知的に、さらりと見せる */
@media screen and (min-width: 1025px) {
    .column-quote__author__subtext_2 {
        max-width: 100% !important;
        font-size: 1.0rem !important;
        line-height: 1.5 !important;
        color: #444 !important;
        background: none !important; /* 装飾なし */
        border: none !important;
        padding: 0 !important;
        margin-top: 15px !important;
    }
}

/* 2. スマホ・タブレット（1024px以下）：目に留まるアクセントを */
@media screen and (max-width: 1024px) {
    .column-quote__author__subtext_2 {
        font-size: 1.15rem !important; /* 文字を読みやすく大きく */
        line-height: 1.5 !important;
        text-align: left !important;
        
        /* ほんの少しだけ特別なエリアに見せる装飾 */
        background: rgba(39, 154, 200, 0.05) !important; /* 中原さんカラーを極薄く敷く */
        border-left: 4px solid #279ac8 !important;     /* 左側に信頼の青線を */
        padding: 15px !important;                       /* 枠内の余白 */
        margin: 20px 0 !important;                      /* 前後の文章との間隔 */
        border-radius: 0 5px 5px 0 !important;          /* 角を少し丸めて柔らかく */
    }
}

/* --- プロフィール下の実績テキスト（歴任）：強制反映版 --- */

/* 1. PC・スマホ共通 */
.column-quote__author__subtext_2 {
    max-width: 100% !important;   /* 292pxの制限を強制解除 */
    line-height: 1.6 !important;
    display: block !important;
}

/* 2. PC版（1025px以上） */
@media screen and (min-width: 1025px) {
    .column-quote__author__subtext_2 {
        font-size: 1.1rem !important; /* ここでサイズを確定 */
        margin-top: 15px !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }
}

/* 3. スマホ版（1024px以下） */
@media screen and (max-width: 1024px) {
    .column-quote__author__subtext_2 {
        font-size: 1.2rem !important; /* スマホではさらに大きく */
        background: rgba(39, 154, 200, 0.08) !important; /* 少し濃くしました */
        border-left: 5px solid #279ac8 !important;     /* 青線を太く */
        padding: 15px !important;
        margin: 20px 0 !important;
        border-radius: 0 5px 5px 0 !important;
    }
}

/* --- プロフィールエリア：中原様選定・ベストバランス（15px）版 --- */

/* 1. 全デバイス共通：枠の制限を解除 */
.column-quote__author, 
.column-quote__author__subtext_1, 
.column-quote__author__subtext_2 {
    max-width: 100% !important;
    display: block !important;
}

/* 2. PC版（1025px以上）：ゆとりとセット感の共存 */
@media screen and (min-width: 1025px) {
    .column-quote__author {
        font-size: 2.2rem !important;
        font-weight: 700 !important;
        margin-bottom: 25px !important; /* お名前の下は堂々と空ける */
    }
    .column-quote__author__subtext_1 {
        font-size: 1.4rem !important;
        margin-bottom: 15px !important;  /* ← 中原様ベストチョイス！ */
        color: #555 !important;
    }
    .column-quote__author__subtext_2 {
        font-size: 1.1rem !important;
        line-height: 1.7 !important;
        margin-top: 15px !important;   /* 上下15pxで程よい空気感 */
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }
}

/* 3. スマホ・タブレット版（1024px以下） */
@media screen and (max-width: 1024px) {
    .column-quote__author {
        font-size: 1.8rem !important;
        margin-bottom: 20px !important;
    }
    .column-quote__author__subtext_1 {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
    }
    .column-quote__author__subtext_2 {
        font-size: 1.2rem !important;
        line-height: 1.6 !important;
        background: rgba(39, 154, 200, 0.08) !important;
        border-left: 5px solid #279ac8 !important;
        padding: 15px !important;
        margin-top: 15px !important;
        border-radius: 0 5px 5px 0 !important;
    }
}

/* --- ページ見出しの太さだけを強化（レイアウトへの影響なし） --- */
.gi_entry_keywords .centered-text h2 {
    font-weight: 700 !important; /* 標準(400)から太字(700)へ */
}

h3 {
font-size: 1.4em;
font-weight: 600 !important;
}
h4 {
font-size: 1.4em;
font-weight: 600 !important;
}