@charset "utf-8";
/****************************************
　リセットＣＳＳ
*****************************************/

html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption, 
tbody, tfoot, thead, table, label, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	font-weight:normal;
	vertical-align: baseline;
	list-style: none;
	scroll-behavior: smooth;
}




/****************************************
　サイト全体のフォント設定
*****************************************/

body{
font-family: 'Noto Sans JP', sans-serif;
            background-color: #f4f6f8;
            color: #333;
letter-spacing:0.1em;	
}

.font5  {font-size:38.5%;}
.font6  {font-size:46.2%;}
.font7  {font-size:53.8%;}
.font8  {font-size:61.5%;}
.font9  {font-size:69.2%;}
.font10 {font-size:77%;}
.font11 {font-size:85%;}
.font12 {font-size:93%;}
.font13 {font-size:100%;}
.font14 {font-size:108%;}
.font15 {font-size:116%;}
.font16 {font-size:123.1%;}
.font17 {font-size:131%;}
.font18 {font-size:138.5%;}
.font19 {font-size:146.5%;}
.font20 {font-size:153.9%;}
.font21 {font-size:161.5%;}
.font22 {font-size:169.2%;}
.font23 {font-size:176.9%;}
.font24 {font-size:184.6%;}
.font25 {font-size:192.3%;}
.font26 {font-size:200.0%;}
.font27 {font-size:207.7%;}
.font28 {font-size:215.4%;}
.font29 {font-size:223.1%;}
.font30 {font-size:230.8%;}
.font35 {font-size:269.2%;}
.font37 {font-size:284.6%;}
.font40 {font-size:307.7%;}
.font45 {font-size:346.2%;}
.font50 {font-size:384.6%;}
.font60 {font-size:461.5%;}
.font70 {font-size:538.5%;}
.font75 {font-size:576.9%;}
.font80 {font-size:615.4%;}
.font90 {font-size:692.3%;}


.f_w_bold {font-weight:bold;}

.f_KZ_Mincho {font-family:"小塚明朝 Pro";}
.f_KZ_Gothic {font-family:"小塚ゴシック Pro";}
.f_HR_Mincho {font-family:"ヒラギノ明朝 Pro W3";}
.f_MSP_Mincho {font-family:"ＭＳ Ｐ明朝";}
.f_MS_Mincho {font-family:"ＭＳ 明朝";}
.f_MS_Gothic {font-family:"ＭＳ ゴシック";}
.f_MS_PGothic {font-family:"ＭＳ Ｐゴシック";}
.f_meirio {font-family:"メイリオ";}
.f_sunselif {font-family:"sans-serif";}

/****************************************
　ＨＴＭＬ5の新要素に対する初期設定
*****************************************/


/* HTML5 New tag Reset */
header, section, footer, aside, nav, article, figure, figcaption, hgroup { 
	margin:0;
	padding:0;
	display: block;
}

.right{                           /*　Div　右寄せ　*/
    float:right;
}


.left{                            /*　Div　左寄せ　*/
    float:left;
}



.clear_both{                      /*　Div　両初期化　*/
    clear:both;
}


.text_center{                     /*　文字　中央寄せ　*/
    text-align:center;
}

.text_right{                     /*　文字　右寄せ　*/
    text-align:right;
}
.img_full{
  width:100%;
}

.yohaku50{
  margin-bottom:50px;
}

.color_yellow{
  background-color: #dbb800;

}

.color_gray{
  background-color: #f4f6f8;

}

/* 飛び先のID要素に「少し上の余白」を設定する */
#service_1,
#service_2,
#service_3 {
  scroll-margin-top: 100px; /* 固定ヘッダーの高さなどに合わせて数値を調整してください */
}


/****************************************
　header設定
*****************************************/

/* ヘッダー全体（デフォルト＝モバイル向けのベーススタイル） */
        .site-header {
            background-color: #0d1527;
            color: #fff;
            width: 100%;
            position: fixed;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            z-index: 1000;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1280px;
            margin: 0 auto;
            height: 60px;
            position: relative;
        }

        /* 左側：黄色帯 ＆ ロゴ */
        .header-left {
            display: flex;
            align-items: center;
            height: 100%;
            position: relative;
        }

/* アクセントボックスを配置する親コンテナのスタイル例 */
        .accent-wrapper {
            position: relative;
			height: 60px;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding-left: 80px; /* ボックスがはみ出さないように余白を調整 */
        }


        /* 共通のアクセントボックス設定 */
        .accent-box {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            pointer-events: none;
        }

        /* 【鋭角の角度を完全に一緒にするポイント】
          clip-pathで「％（割合）」を使うと、ボックス自体の幅（width）が変わったときに傾きの角度がズレてしまいます。
          そのため、「ピクセル値（px）」を使って、下辺の斜めになる幅（スライドさせる距離）を両者で完全に固定します。
          例：右側に「50px」斜めにスライドさせる場合
        */

        /* 1. 下層のボックス（青系・幅200px） */
        .accent-box-bottom {
            width: 80px;
            background-color: #999999;
            clip-path: polygon(0 0, 100% 0, calc(100% - 50px) 100%, 0 100%);
            z-index: 1;
        }

        /* 2. 上層のボックス（黄色・幅150px） */
        .yellow-accent-box {
            width: 60px;
            background-color: #dbb800;
            clip-path: polygon(0 0, 100% 0, calc(100% - 50px) 100%, 0 100%);
            z-index: 2;
        }

        .logo-area {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #fff;
        }

        .logo-mark {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-text {
			font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
			margin-left:10px;
            font-weight: bold;
            line-height: 1.15;
            letter-spacing: 0.03em;
            white-space: nowrap;
        }

        .logo-text span {
            display: none; /* モバイルではサブタイトル非表示 */
        }

        /* モバイル用の初期状態（PC用ナビは非表示、ハンバーガーは表示） */
        .header-right {
            display: none;
        }

        .hamburger-btn {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 22px;
            background: transparent;
            border: none;
            cursor: pointer;
            z-index: 1100;
            margin-right: 15px;
        }

        .hamburger-btn span {
            display: block;
            width: 100%;
            height: 2px;
            background-color: #fff;
            transition: all 0.3s;
        }

        /* モバイル用ドロワーメニュー */
        .mobile-drawer {
            position: fixed;
            top: 0;
            right: -100%;
            width: 80%;
            max-width: 320px;
            height: 100vh;
            background-color: #0d1527;
            box-shadow: -5px 0 20px rgba(0,0,0,0.5);
            transition: right 0.35s ease-in-out;
            z-index: 1050;
            padding: 80px 20px 40px;
            overflow-y: auto;
        }

        .mobile-drawer.active {
            right: 0;
        }

        .mobile-nav {
            list-style: none;
            margin-bottom: 30px;
        }

        .mobile-nav li {
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .mobile-nav a {
            display: block;
            padding: 14px 10px;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
        }

        .mobile-sub-menu {
            list-style: none;
            background-color: #131d35;
            display: none;
            padding-left: 15px;
        }

        .mobile-sub-menu li a {
            font-size: 13px;
            color: #cbd5e1;
        }

        .mobile-cta-container {
            text-align: center;
        }

        .mobile-cta {
            display: block;
            background-color: #ffb700;
            color: #0d1527;
            padding: 12px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 700;
            font-size: 14px;
        }

        /* 背景オーバーレイ */
        .drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0,0,0,0.5);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            z-index: 1020;
        }

        .drawer-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* メインコンテンツ確認用 */
        .main-content {
            padding: 80px 20px;
            text-align: center;
        }
        .main-content h1 {
            font-size: 26px;
            margin-bottom: 15px;
            color: #0d1527;
        }
		
		
/****************************************
　メインコンテンツ
*****************************************/

/****************************************
　タイポグラフィふわりアニメーション開始
*****************************************/

    .fuwari-text {
      opacity: 0;
    }

    .fuwari-text.is-active span {
      opacity: 0;
      transform: translateX(-15px);
      display: inline-block;
      animation: fuwariAnim 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
      animation-delay: calc(0.05s * var(--index));
    }

    @keyframes fuwariAnim {
      0% {
        opacity: 0;
        transform: translateX(-15px);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

/****************************************
　タイポグラフィふわりアニメーション終了
*****************************************/


/****************************************
　汎用divふわり出現アニメーション開始
*****************************************/

/* ==========================================
       スロー＆ダイナミックなアニメーション設定
       ========================================== */
    .scroll-animate {
      opacity: 0;
      transition: opacity 1.8s cubic-bezier(0.25, 1, 0.5, 1), 
                  transform 1.8s cubic-bezier(0.25, 1, 0.5, 1);
      will-change: opacity, transform;
    }

    /* 方向ごとの初期位置 */
    .scroll-animate[data-anim="fade-up"] {
      transform: translateY(60px);
    }
    .scroll-animate[data-anim="fade-left"] {
      transform: translateX(-60px);
    }
    .scroll-animate[data-anim="fade-right"] {
      transform: translateX(60px);
    }
    .scroll-animate[data-anim="fade-down"] {
      transform: translateY(-60px);
    }

    /* 画面内に入ったとき */
    .scroll-animate.is-animated {
      opacity: 1;
      transform: translate(0, 0);
    }

/****************************************
　汎用divふわり出現アニメーション終了
*****************************************/


	
/****************************************
　フッター設定
*****************************************/

/* ==========================================
           フッダー全体のデザインA再現（モバイル基準ベース）
           ========================================== */
        .site-footer {
            background-color: #0d1527;
            color: #fff;
            padding: 40px 20px;
        }

        .footer-container {
            max-width: 1280px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 30px;
            padding-bottom: 30px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* フッダー左側：グループ企業ロゴ一覧 */
        .footer-left {
            width: 100%;
        }

        .footer-group-list {
            list-style: none;
        }

        .footer-group-item a {
            color: #cbd5e1;
            text-decoration: none;
            font-size: 12px;
            display: inline-block;
        }
		
		.footer_middle{
			display: flex;
            flex-direction: column; /* 項目を縦に並べる */
		}
		
		.footer-middle a {
			display: block; /* 1行を占有させて強制的に縦に落とし、paddingやwidthを効きやすくする */
            color: #cbd5e1; /* 文字色（必要に応じて変更） */
            text-decoration: none; /* テキストの下線を消す */
            padding: 12px 0; /* 上下にゆとりを持たせる（タップしやすくする） */
            border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 項目ごとの仕切り線 */ 
         }

/* 一番下の項目の下線を消したい場合はこちらを追加 */
        .footer-middle a:last-child {
            border-bottom: none;
        }

        .footer-logo-area {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #fff;
        }

        .footer-logo-mark {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .footer-logo-text {
			font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
			margin-left:10px;
            font-weight: bold;
            line-height: 1.15;
            letter-spacing: 0.03em;

        }

        .footer-logo-text span {
            font-size: 10px;
            color: #9ca3af;
            display: block;
            font-weight: normal;
        }

        /* フッダー中央～右側：拠点情報 */
        .footer-right {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 左寄せ */
            justify-content: flex-start; /* 上寄せ */
        }

        /* フッダー最下部：コピーライト・リンク */
        .footer-bottom {
            max-width: 1280px;
            margin: 0 auto;
            padding-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            font-size: 11px;
            color: #9ca3af;
        }

        .footer-links {
            display: flex;
            justify-content: center;
        }

				
		
/****************************************
　可変グリッドに関する設定
*****************************************/



img, object, embed, video {
/*	max-width: ;
*/}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/



/* デスクトップレイアウト :モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 1024px) {
.gridContainer {
}
#header {
}

        .logo-text span {
            font-size: 10px;
            color: #9ca3af;
            display: block;
            font-weight: normal;
        }


/* 変更：ナビゲーションと右側要素をまとめるグループ、かつ右寄せにする指定 */
        .header-right {
            display: flex;
            align-items: center;
            margin-left: auto;
            height: 100%;
        }
		
        .global-nav {
            display: flex;
            align-items: center;
            height: 100%;
            list-style: none;
			margin-right: 20px; /* ナビとCTAボタンの間隔 */
        }

        .global-nav > li {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .global-nav > li > a {
            display: flex;
            align-items: center;
            padding: 0 12px;
            height: 100%;
            color: #fff;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            transition: color 0.3s;
        }

        .global-nav > li > a:hover {
            color: #ffb700;
        }

        .global-nav .sub-menu {
            position: absolute;
            top: 100%;
            left: 0;
            width: 200px;
            background-color: #131d35;
            list-style: none;
            box-shadow: 0 10px 20px rgba(0,0,0,0.4);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            border-top: 2px solid #dbb800;
        }

        .global-nav li.has-child:hover .sub-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .sub-menu li a {
            display: block;
            padding: 10px 16px;
            color: #fff;
            text-decoration: none;
            font-size: 12px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            transition: background-color 0.2s, padding-left 0.2s;
        }

        .sub-menu li:last-child a {
            border-bottom: none;
        }

        .sub-menu li a:hover {
            background-color: rgba(255, 183, 0, 0.15);
            color: #ffb700;
            padding-left: 20px;
        }

        .header-cta {
            background-color: #dbb800;
            color: #0d1527;
            padding: 9px 18px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: bold;
            font-size: 12px;
            transition: background-color 0.3s, transform 0.2s;
            white-space: nowrap;
        }

        .header-cta:hover {
            background-color: #ffca28;
            transform: translateY(-1px);
        }

        .main-content {
            padding: 60px 20px;
            text-align: center;
        }

/* アクセントボックスを配置する親コンテナのスタイル例 */
        .accent-wrapper {
            position: relative;
			height: 60px;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding-left: 180px; /* ボックスがはみ出さないように余白を調整 */
        }


        /* 共通のアクセントボックス設定 */
        .accent-box {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            pointer-events: none;
        }

        /* 【鋭角の角度を完全に一緒にするポイント】
          clip-pathで「％（割合）」を使うと、ボックス自体の幅（width）が変わったときに傾きの角度がズレてしまいます。
          そのため、「ピクセル値（px）」を使って、下辺の斜めになる幅（スライドさせる距離）を両者で完全に固定します。
          例：右側に「50px」斜めにスライドさせる場合
        */

        /* 1. 下層のボックス（青系・幅200px） */
        .accent-box-bottom {
            width: 180px;
            background-color: #999999;
            clip-path: polygon(0 0, 100% 0, calc(100% - 50px) 100%, 0 100%);
            z-index: 1;
        }

        /* 2. 上層のボックス（黄色・幅150px） */
        .yellow-accent-box {
            width: 160px;
            background-color: #dbb800;
            clip-path: polygon(0 0, 100% 0, calc(100% - 50px) 100%, 0 100%);
            z-index: 2;
        }


/* スマホ用パーツを非表示 */
            .hamburger-btn {
                display: none;
            }
            .mobile-drawer, .drawer-overlay {
                display: none;
            }
			
			
#topPicture {
}
#mainContents {
	width: 100%;
	margin:0 auto;
}
#hutter {
}


/****************************************
　ヘッダ設定
*****************************************/


/****************************************
　メインコンテンツ
*****************************************/

/****************************************
　フッター設定
*****************************************/

.site-footer {
                padding: 50px 20px 30px;
            }

            .footer-container {
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-start;
                gap: 40px;
                padding-bottom: 40px;
            }

            .footer-left {
                flex: 1;
                width: auto;
            }

		    .footer-middle{
                flex: 1;
                width: auto;
	     	}

						
		    .footer-right{
                flex: 1;
                width: auto;
				align-items: center; /* 左右の中央揃え */
                justify-content: flex-start; /* 上寄せを維持 */
	     	}

						
}