/*
 * スタイルシートのリセットと基本的な設定
 */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    font-size: 16px;
	overflow-x: clip;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

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

ul {
    list-style: none;
}

h2,h3{
	font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
	color: #1b3882;
}

h2{
	font-size: 50px;
}

p,dd{
	word-break: break-all;
}

p{
	line-height: 2;
}

/*
 * ヘルパークラス
 */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
}

.h-en{
	font-size: 30px;
    position: relative;
    display: flex;
    width: fit-content;
    line-height: 1;
    height: fit-content;
    flex-direction: column;
    gap: 0.5em;
	    min-width: 142px;
    text-align: center;
}
.h-en::after{
	content:'';
	display: inline-block;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #c40b1d, #fb6a2c);
}

.flex-box{
	display: flex;
}

.inner-left,
.inner-right{
	width: 50%;
}

.text{
	color: #333;
	font-size: 16px;
	line-height: 2;
	margin-bottom: 36px;
}

.emphasis{
	/*text-emphasis: circle;*/
	text-emphasis: dot;
}



/* ヘッダー ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.site-header {
	width: 100%;
	height: 102px;
	position: relative;
    top: 0;
    left: 0;
	z-index: 999;
	background: rgba(27,56,130,0.9);
}

.site-header::after{
	content: '';
	width: 417px;
	position: absolute;
	top: 0;
	left: 43.84vw;
	z-index: -1;
	background: url("../images/top-header-back.svg");
	background-repeat: no-repeat;
	aspect-ratio: 417 / 102;
}





.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
	max-width: 100%;
	padding: 30px 77px 16px 66px;
}

.site-logo{
	width: 17.24%;
	max-width:331px;
	min-width: 251px;
	height: auto;
	aspect-ratio: 331 / 42;
}
/*.child-page .site-logo{
	width: 15.83%;
	max-width:304px;
	min-width: 251px;
	height: auto;
	aspect-ratio: 304 / 57;
}*/

.site-logo img{
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(24deg) brightness(105%) contrast(103%);
}

.site-header .flex-box{
	gap: 34px;
	align-items: center;
}


.main-nav {
    display: flex;
    height: 100%;
}



    .main-nav ul {
		display: flex;
        justify-content: center;
        align-items: center;
		height: 100%;
    position: relative;
		gap: 88px;
    }

    .main-nav li {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
    }
.main-nav li.nav-recruit{
	width: 190px;
	background: #ffe100;
	
}
.main-nav li.nav-contact{
	width: 173px;
    height: 55px;
	background: linear-gradient(to right, #c40b1d, #fb6a2c);
    margin-left: 8px;
}	
	.main-nav a{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		transition: 0.3s;
		font-family: "Noto Serif JP", serif;
        font-optical-sizing: auto;
        font-style: normal;
		font-size: 20px;
		font-weight: 900;
		color: #fff;
	}
/*.main-nav a:hover{
	opacity: 0.5;
}*/

.main-nav li.nav-contact a{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	font-size: 18px;
	padding-right: 18px;
}


.main-nav li.nav-contact a::after{
	content: '';
	display: inline-block;
	background-image: url("../images/arrow.svg");
	background-size: cover;
	width: 7px;
	height: 11px;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	transition: 0.3s;
	
}
.main-nav li.nav-contact a:hover::after{
	right: 16px;
}

.main-nav li.nav-contact a span{
	margin-bottom: 1em;
}

.main-nav li.nav-recruit a img{
	width: 96px;
	height: 16px;
}
.main-nav li.nav-contact a img{
	width: 106px;
	height: 16px;
}

.main-nav li.nav-about_us a img{
	width: 84px;
	height: 16px;
}

.main-nav li.nav-service a img{
	width: 70px;
	height: 16px;
}

.main-nav li.nav-about_us{
	padding-right: 50px;
}
.main-nav li.nav-service{
	padding-right: 42px;
}
   


.menu-toggle { /* ハンバーガーメニューボタン（モバイル用） */
    display: none; /* デスクトップでは非表示 */
    background: none;
    border: none;
    cursor: pointer;
    /*padding: 10px;*/
    position: relative;
    z-index: 1001;
	margin-top: 20px;
	margin-right: 12px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 4px;
    background-color: #3d3f4a;
    margin-bottom: 7px;
    transition: all 0.3s ease;
}

.menu-toggle span:nth-child(2){
	display: none;
}

.menu-toggle span:last-child {
    margin-bottom: 0;
}


.child-page .main-nav .nav-about_us a,
.child-page .main-nav .nav-service a{
	color: #000;
}




/* フッター ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

footer{
	position: relative;
}

.site-footer{
	background-color: #1b3882;
	color: #fff;
	width: 100%;
	height: auto;
	min-height: 260px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px 40px;
}

.site-footer .content-wrapper{
	width: 96%;
	max-width: 1564px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.address-wrapper{
	gap: 42px;
}

.address-wrapper .inner-left,
.address-wrapper .inner-right{
	width: fit-content;
}



.f-nav-wrapper{
	width: fit-content;
}


.footer-logo{
	display: block;
	font-size: 24px;
	margin-bottom: 1em;
}


.footer-nav{
	display: flex;
	gap: 20px 50px;
	margin-bottom: 65px;
}

.footer-nav li a{
	/*color: #45b035;*/
}

.copyright{
	text-align: end;
	font-size: 12px;
}



/*.pagetop{
	position: absolute;
	bottom: 36px;
	right: 32px;
	width: 101px;
	height: 136px;
	display: block;
}*/

.pagetop {
    position: fixed;
    bottom: -50px;  /* 画面外に沈める */
    right: 20px;
    width: 101px;
    height: 136px;
    opacity: 0;
    transform: translateY(20px); /* 少し下に構える */
    z-index: 999;
    transition: opacity .3s ease, transform .3s ease, bottom .3s ease;
}

/* ▼ 表示状態（ひょこっと上がって出てくる） */
.pagetop.is-fixed {
    bottom: 20px;          /* 画面内に戻す */
    opacity: 1;
    transform: translateY(0);
}



/* 子ページ共通部 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.child-page .site-header{
	background: none;
}
.child-page .site-header::after{
	display: none;
}

.child-page #main-content{
	margin-top: -102px;
}


.child-header{
	padding-top: 102px;
	position: relative;
	width: 100%;
	background: url("../images/child header-back.png");
	background-size: cover;
	padding-bottom: 100px;
}

.child-header .title-box{
	width: 522px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-bottom: 74px;
}
.child-header .title-box h2{
	color: #fff;
}




@media (max-width: 1280px) {
	.child-page .site-header{
	background: #fff;
}
	.child-page #main-content{
	margin-top: 0;
}
	.child-header .title-box{
		margin-left: 130px;
		margin-right: 65px;
	}
}
@media (max-width: 960px) {
	.child-header{
		padding: 0;
	}
	.child-header .flex-box{
		flex-direction: column;
	}
	.child-header .title-box{
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		padding-top: 40px;
		padding-bottom: 40px;
	}
}




.child-page h3{
	font-size: 50px;
	color: #1b3882;
	margin-bottom: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.child-page h3 .h-en{
	font-size: 20px;
  background-image: linear-gradient(to right, #c40b1d, #fb6a2c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
	line-height: 1.5;
}
.child-page h3 .h-en::after{
	display: none;
}



/* TOP ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.bg-video{
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.bg-video video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}



#hero{
    margin-top: -102px;
    padding-top: 102px;
	width: 100%;
	position: relative;
	color: #fff;
	min-height: 1114px;
}

#hero::before{
	content: '';
	width: 423px;
	height: calc(100% - 102px);
	position: absolute;
	top: 102px;
	left: 0;
	background: rgba(27, 56, 130, 0.9);
	z-index: 0;
}

#hero::after{
	content: '';
	width: 751px;
	position: absolute;
	bottom: -84px;
	left: 0;
	z-index: 1;
	background: url("../images/top-copy-back-bottom.svg");
	background-repeat: no-repeat;
	aspect-ratio: 751 / 443;
}

.kiha-kun{
	width: 13.6vw;
	max-width: 261px;
	height: auto;
	aspect-ratio: 261 / 255;
	position: absolute;
	bottom: 140px;
	right: 45px;
	z-index: 1;
	transform-origin: center bottom;
    animation: motion-yurikago 1.8s ease-in-out infinite;
}
@keyframes motion-yurikago {
    0%   { transform: rotate(-3deg); }
    50%  { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}
.kiha-kun-name{
	color: #77d2c3;
	line-height: 1;
	position: absolute;
	bottom: 108px;
	right: 11.15vw;
	z-index: 1;
	display: block;
	margin-top: clamp(0.52vw,0.52vw,10px);
	width: 4vw;
	aspect-ratio: 77 / 18;
	max-width: 77px;
}



#hero video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: -1;
}



.top-copy{
	margin-top: 116px;
    position: relative;
	background: url("../images/top-copy-back.svg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 908px;
	aspect-ratio: 908 / 444;
	padding-top: 114px;
	padding-left: 120px;
}

.top-copy h2{
	color: #fff;
	font-size: 80px;
    letter-spacing: -9px;
	z-index: 2;
    position: relative;
	margin-bottom: 105px;
	
}








	  
#top-01{
	/*background: url("../images/top-02-back.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;*/
	padding-top: 84px;
	padding-bottom: 127px;
	position: relative;
}

#top-01 video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: 0;
}

#top-01::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: rgba(27,56,130,0.9);
}


/* 弧SVG用ラッパー：動画の上、テキストの下 */
#top-01 .top-curve{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index:0;
}

/* SVG の位置とスケール：数値は目で見て調整してください */
#top-01 .top-curve-svg{
  position: absolute;
  width: 120%;   /* 左右にはみ出すくらい */
  height: auto;
  left: 50%;    /* 左にずらす量 */
  transform: translateX(-50%);
  top: 27%;      /* 縦位置（デザインに合わせて調整） */
}

/* パスの見た目（色・太さ）はアセットに合わせて調整 */
#top-01 .top-curve-path{
  fill: none; 
  stroke: #16377b; 
  stroke-miterlimit: 10; 
  stroke-width: 200px;

  /* アニメ開始前の状態（全部隠す） */
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}

/* 描画アニメが始まったとき */
#top-01 .top-curve-path.is-drawing{
  animation: top-curve-draw 3s ease-out forwards;
}

/* 左→右へ描かれるアニメーション */
@keyframes top-curve-draw{
  to{
    stroke-dashoffset: 0;
  }
}



/* 文字アニメーション ////////////////*/


.animated-text{
  display:inline-block;
  vertical-align:bottom;
}

/* 初期状態：下に沈めて透明 */
.animated-text .letter{
  display:inline-block;

  /* ★ここがポイント：
     1つ目の translateY(1.2em) で「下に沈める」
     2つ目の translateY(var(--curve-offset)) で「カーブの上下」を足す
  */
  transform: translateY(1.2em) translateY(var(--curve-offset, 0px));

  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(.2,.65,.2,1),
    opacity 0.7s cubic-bezier(.2,.65,.2,1);

  /* 行ディレイ + 文字ごとのディレイ */
  transition-delay: calc(
    var(--line-delay, 0ms) +
    var(--i, 0) * var(--stagger, 140ms)
  );

  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* 表示状態：カーブだけ残して上に戻る */
.animated-text.aos-animate .letter{
  transform: translateY(0) translateY(var(--curve-offset, 0px));
  opacity: 1;
}

/* AOS の「最初は透明」を無効化（親は常に見えててOK） */
.animated-text[data-aos="stagger-up"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}





/* ブロック全体 */
.animated-text-01{
  display:inline-block;
  font-weight: 700;
  line-height: 1.3;
}

/* 2行目全体のスタイル（ベース） */
.arc-line{
  display:inline-block;
  font-size: 70px; 
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

/* Arctext が作る各文字 span（.char1, .char2, ...）を基準に */
.arc-line span{
  display:inline-block;
}








/* 内側のラッパーをアニメ対象にする */
.arc-animated .letter-inner{
  display:inline-block;
  transform: translateY(1em);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(.2,.65,.2,1),
    opacity 0.7s cubic-bezier(.2,.65,.2,1);

  /* 文字ごとのディレイ（--i を JSで入れている） */
  transition-delay: calc(
    var(--line-delay, 0ms) +
    var(--i, 0) * var(--stagger, 140ms)
  );

  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* AOS が arc-line に .aos-animate を付けた瞬間 → 発火 */
.arc-line.aos-animate .letter-inner{
  transform: translateY(0);
  opacity: 1;
}

/* この行にだけ行全体の遅延を指定したければここで */
#arc-line2{
  --line-delay: 0ms;   /* すでに data-aos-delay="700" を使っているなら、後述のJS拡張で拾えます */
	margin-top: -0.5em;
    margin-left: -0.7em;
    transform: rotate(8deg);
	margin-bottom: 1em;
}





/* モーション軽減設定のユーザーにはアニメ無効化 */
@media (prefers-reduced-motion: reduce){
  .animated-text .letter{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}



/* 基本の拡大：70px ベース → 200px 相当 */
#arc-line2 .digit70{
  display:inline-block;
  font-size: 2.857em;   /* 70px × 2.857 ≒ 200px */
  line-height: 1;
}
/* 70 全体を少しだけ上に持ち上げて「他の文字と上下中央を合わせる」 */
#arc-line2 .digit70{
  display:inline-block;
  font-size: 2.857em;
  line-height: 1;
  position: relative;
	top: 0.25em;
}


/* 7 だけ微妙に下げる */
#arc-line2 .char9 .digit70{
  transform: translateY(0.1em);  /* 全体より少しだけ値を小さくする */
}

/* 0 はそのまま中央合わせを維持 */
#arc-line2 .char10 .digit70{
  transform: translateY(0);
}

#arc-line2 > span{
  margin: 0 0.02em;   /* 値は 0〜0.05emくらいで試す。狭めたいならマイナスも可 */
}

#arc-line2 .char11{
	margin: 0 0 0 0.3em;
}




#top-01 h2{
	color: #FFF;
	margin-bottom: 100px;
}


#top-01 .container{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1920px;;
	padding-top: 180px;
	padding: 180px 127px 0 140px; 
	position: relative;
	z-index: 2;
}


#top-01 .inner-left{
	width: fit-content;
	margin-right: 84px;
}

#top-01 .inner-left .img-box{
	/*display: block;*/
	position: relative;
	/*margin-right: 203px;*/
	display: flex;
}

/*#top-01 .inner-left .img-box img{
	width: 100%;
}*/


/*#top-01 .inner-left .img-box::after{
	content: '';
	background: url("../images/top-01-02.jpg");
	background-size: cover;
	width: 280px;
	height: auto;
	aspect-ratio:280 / 337;
	
	position: absolute;
	bottom:	-54px;
	right: -203px;
	
	margin-bottom: -54px;
	margin-left: -77px;
	    flex-shrink: 0;
    align-self: flex-end;
}
*/

#top-01 .inner-right-inner{
	padding-left: 68px;
}

#top-01 .animated-text{
	color: #fff;
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
	font-size: 58px;
	font-weight: 900;
	letter-spacing: -9px;
}
	 
#top-01 .container p{
	color: #fff;
	margin-top: 64px;
	line-height: 2;
	max-width: 730px;
}

#top-01 .container .flex-box:nth-child(1){
	margin-bottom: 100px;
}

#top-01 .container .flex-box:nth-child(2){
	width: 100%;
	min-height: 682px;
}

#top-01 .container .flex-box:nth-child(2) img:nth-child(1){
	aspect-ratio: 390 / 322;
	max-width: 390px;
	width: 23%;
	align-self: flex-end;
	margin-right: -26px;
}
#top-01 .container .flex-box:nth-child(2) img:nth-child(2){
	aspect-ratio: 936 / 595;
	max-width: 936px;
	width: 55.23%;
	align-self: flex-start;
}
#top-01 .container .flex-box:nth-child(2) img:nth-child(3){
	aspect-ratio: 390 / 322;
	max-width: 390px;
	width: 23%;
	align-self: flex-start;
	margin-top: -36px;
}

.kiha-kun-sp,
.kiha-kun-sp-name{
	display: none;
}







#top-02{
	padding-top: 83px;
	position: relative;
	background: #fff;
	z-index: 0;
}

#top-02::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: url("../images/top-02-back.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.3;
}



#top-02 .container{
	max-width: 1445px;
	z-index: 2;
	position: relative;
}



#top-02 .flex-box:nth-child(1){
	flex-direction: column;
    align-items: center;
}

#top-02 .flex-box:nth-child(1) .inner-left{
	width: fit-content;
	align-self: flex-start;
	transform: translateY(100%);
}


#top-02 .flex-box:nth-child(1) .inner-right-scale{
	width: fit-content;
}

#top-02 .flex-box:nth-child(1) .inner-right{
  text-align: center;         
	display: flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
}


/* 1行目：青い帯のラベル */
.catch-01{
  display: block;
  margin-bottom: 40px;         /* 2行目との間隔は好みで */
}

.catch-01 .animated-text{
  display: inline-block;
  padding: 6px 30px;
  background: #1b3882;         
  color: #fff;    
  font-size: 40px; 
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 900;
}

/* 2行目：バナー＋カーブ文字 */
.catch-02{
  display: block;
  margin-top: 8px;
}

.arc-title-wrap{
  position: relative;
  display: block;
}



/* カーブ文字のベース。
   バナーの上で中央寄せ＆少し上に乗るイメージで調整 */
#arc-line3.arc-line{
  white-space: nowrap;
  font-weight: 700;
  color: #fff;
  font-size: 85px;  
	z-index: 2;
	position: relative;
	display: inline-block;
	letter-spacing: 0.1em;
}

#arc-line3.arc-line::before{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 765px;
  height: auto;
  aspect-ratio: 765 / 165;
	transform: translate(-50%,-36%);
	background: url("../images/top-02-title-bg.svg") no-repeat center / contain;
	z-index: 0;
}



/* Arctextで分解された文字に対して、
   すでに使っている .arc-line 共通スタイルがあればそれを流用。
   もし未定義なら最低限これだけ。 */
#arc-line3 .char{
  display: inline-block;
}

.catch-01 .animated-text .letter{
	margin: 0 -0.1em;
}



/* 例えばデザインベースで約480pxくらいなら */
.arc-title-wrap{
  position: relative;
  display: inline-block;
}



#top-02 .flex-box:nth-child(2) {
	margin-top: 24px;
	align-items: center;
	min-height: 652px;
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}

/*#top-02 .flex-box:nth-child(2) img:nth-child(1){
	width: 362px;
	aspect-ratio: 362 / 391;
	    align-self: flex-end;
}
#top-02 .flex-box:nth-child(2) img:nth-child(2){
	width: 812px;
	aspect-ratio: 812 / 449;
	margin-left: -50px;
}
#top-02 .flex-box:nth-child(2) img:nth-child(3){
	width: 321px;
	aspect-ratio: 321 / 333;
	    align-self: flex-start;
}*/
#top-02 .flex-box:nth-child(2) picture:nth-child(1){
	width: 362px;
	aspect-ratio: 362 / 391;
	    align-self: flex-end;
}
#top-02 .flex-box:nth-child(2) picture:nth-child(2){
	width: 812px;
	aspect-ratio: 812 / 449;
	margin-left: -50px;
}
#top-02 .flex-box:nth-child(2) picture:nth-child(3){
	width: 321px;
	aspect-ratio: 321 / 333;
	    align-self: flex-start;
}


#top-02 p{
	text-align: center;
}

#top-02 ul{
	margin: 100px auto;
	gap: 30px 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	z-index: 1;
}
#top-02 ul li{
	width: calc((100% - 30px) / 2 );
	max-width: 695px;
	background: #1b3882;
}
#top-02 ul li a{
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	position: relative;
	padding: 48px;
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
	font-weight: 900;
	font-size: 30px;
}
#top-02 ul li a::after{
	content: '';
	display: inline-block;
	background: url("../images/arrow.svg");
	background-size: contain;
	width: 8px;
	height: 13px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 50px;
	transition: 0.3s;
}

#top-02 ul li a:hover::after{
	right: 40px;
}

#top-02 ul li a::before{
	content: '';
	display: inline-block;
	width: 87px;
	height: auto;
	aspect-ratio: 1 / 1;
	background-size: contain;
	margin-right: 26px;
}


#top-02 ul li:nth-child(1) a::before{
	background: url("../images/business-icon-01.svg");
}
#top-02 ul li:nth-child(2) a::before{
	background: url("../images/business-icon-02.svg");
}
#top-02 ul li:nth-child(3) a::before{
	background: url("../images/business-icon-03.svg");
}
#top-02 ul li:nth-child(4) a::before{
	background: url("../images/business-icon-04.svg");
}
#top-02 ul li:nth-child(5) a::before{
	background: url("../images/business-icon-05.svg");
}
#top-02 ul li:nth-child(6) a::before{
	background: url("../images/business-icon-06.svg");
}

#top-02 h3{
	font-size: 30px;
	position: relative;
	display: flex;
    align-items: center;
	margin-bottom: 60px;
}
#top-02 h3::before{
	content: '';
	display: inline-block;
	width: 142px;
	height: 1px;
	background: linear-gradient(to right, #c40b1d, #fb6a2c);
	margin-right: 30px;
}


#top-02 .flex-box:nth-of-type(3){
	/*max-width: 1920px!important;*/
	position: relative;
	z-index: 1;
}

#top-02 .flex-box:nth-of-type(3) .inner-left,
#top-02 .flex-box:nth-of-type(3) .inner-right{
	background-size: cover;
	min-height: 233px;
	position: relative;
	transition: 0.3s;
	
}

#top-02 .flex-box:nth-of-type(3) .inner-left{
	background: url("../images/top-02-link-back-01.jpg");
	background-size: cover;
}

#top-02 .flex-box:nth-of-type(3) .inner-right{
	background: url("../images/top-02-link-back-02.jpg");
	background-size: cover;
}

#top-02 .flex-box:nth-of-type(3) .inner-left::after,
#top-02 .flex-box:nth-of-type(3) .inner-right::after{
	content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.2);
	transition: 0.3s;
}
#top-02 .flex-box:nth-of-type(3) .inner-left:hover::after,
#top-02 .flex-box:nth-of-type(3) .inner-right:hover::after{
    background: rgba(0, 0, 0, 0);
}

#top-02 .flex-box:nth-of-type(3) .inner-left a,
#top-02 .flex-box:nth-of-type(3) .inner-right a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 900;
	font-size: 30px;
	z-index: 1;
	position: relative;
}

#top-02 .flex-box:nth-of-type(3) .inner-left a::after,
#top-02 .flex-box:nth-of-type(3) .inner-right a::after{
	content: '';
	display: inline-block;
	background: url("../images/arrow.svg");
	background-size: contain;
	width: 8px;
	height: 13px;
	margin-left: 24px;
	transition: 0.3s;
}




#top-02 .bg-line-wrap {
  position: absolute;
  inset: 0;
  width: 130vw;
  height: 100%;
  overflow: visible;
  pointer-events: none;
	z-index: 2;
	display: flex;
    justify-content: center;
	align-items: center;
	left: 50%;
    transform: translateX(-50%);
}

#top-02 .bg-line-svg {
  width: 100%;
  height: auto;
  display: block;
  /* ---- アニメーション初期状態 ---- */
  stroke-dasharray: 2500;     /* SVG の長さに合わせて後で調整 */
  stroke-dashoffset: 2500;
  opacity: 0;
  transition: none;
}

/* AOS により表示されたときアニメ開始 */
#top-02.aos-animate .bg-line-svg {
  animation: draw-line 2.8s ease-out forwards;
  opacity: 1;
}

@keyframes draw-line {
  0%   { stroke-dashoffset: 2500; opacity: 0; }
  10%  { opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 1; }
}






#top-03{
	padding:180px 0;
	position: relative;
	background: #fff;
	z-index: 0;
}

#top-03::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: url("../images/top-03-back.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.2;
}

#top-03 .container{
	max-width: 1420px;
	z-index: 2;
}

#top-03 .flex-box{
	/*gap: 45px;*/
	gap: 95px;
}
/*#top-03 .flex-box .inner-left,
#top-03 .flex-box .inner-right{
	width: calc((100% - 45px) / 2);
}*/

#top-03 .flex-box .inner-left{
	/*width: 67.92%;*/
	width: auto;
	max-width: 900px;
}
#top-03 .flex-box .inner-right{
	/*width: calc(100% - 45px - 67.92%) ;*/
	width: auto;
}




#top-03 h2{
	margin-bottom: 1em;
}

#top-03 .flex-box .inner-left p{
	margin-bottom: 78px;
	/*max-width: 575px;*/
	max-width: 900px;
}


#top-03 ul{
	position: relative;
    z-index: 3;
	gap: 20px 10px;
    display: flex;
    flex-wrap: wrap;
}
#top-03 ul li {
    width: calc((100% - 10px) / 2);
    max-width: 313px;
	min-width: 83px;
    background: linear-gradient(to right, #1b3882, #0c75d9);
	aspect-ratio: 313 / 83;
}
#top-03 ul li a{
	display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    position: relative;
    padding: 48px;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 900;
    font-size: 20px;
}
#top-03 ul li a::after {
    content: '';
    display: inline-block;
    background: url(../images/arrow.svg);
    background-size: contain;
    width: 8px;
    height: 13px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 36px;
	transition: 0.3s;
}
#top-03 ul li a:hover::after{
	right: 32px;
}

#top-03 .inner-right .img-box {
    display: block;
    position: relative;
    /*margin-right: 310px;
	margin-top: 60px;
	width: 420px;
	aspect-ratio: 420 / 472;*/
	/*width: 731px;
	aspect-ratio: 731 / 531;*/
	width: 420px;
	aspect-ratio: 420 / 472;
}
#top-03 .inner-right .img-box img{
    position: relative;
	z-index: 4;
}
/*#top-03 .inner-right .img-box::after {
    content: '';
    background: url("../images/top-03-02.jpg");
    background-size: cover;
    width: 420px;
    height: auto;
    aspect-ratio: 420 / 472;
    position: absolute;
    bottom: 60px;
    right: -310px;
	z-index: 3;
}*/
#top-03 .inner-right ul{
	display: none;
}





#top-04{
	/*background: url("../images/top-02-back.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;*/
	position: relative;
	z-index: 0;
	overflow: hidden;
	min-height: calc(1155px - ((1920px - 100vw) * 0.50));
	display: flex;
    flex-direction: column;
}

/*#top-04 video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: -1;
}*/

/*#top-04::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	background: rgba(27,56,130,0.9);
}*/

#top-04 .container{
	position: relative;
	z-index:2;
	max-width: 1634px;
    margin-left: auto;
    margin-right: 0;
	padding-top: 13vw;
}


#top-04 h2{
	color: #fff;
	margin-bottom: 1em;
}
#top-04 p{
	color: #fff;
	margin-bottom: 62px;
	max-width: 370px;
}

.rectangle-button {
    width: 365px;
    height: 83px;
    background: linear-gradient(to right, #c40b1d, #fb6a2c);
}

.rectangle-button a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
	font-weight: 900;
    font-size: 18px;
    padding: 0 45px;
}
.rectangle-button a::after {
    content: '';
    display: inline-block;
    background-image: url(../images/arrow.svg);
    background-size: cover;
    width: 7px;
    height: 11px;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
	transition: 0.3s;
}
.rectangle-button a:hover::after{
	right: 44px;
}




/* ▼ #top-04 のライン（結び目）用レイヤー */
#top-04 .top-curve {
  position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
    /*top: 178px;*/
	top: 9.27083vw;
    left: 50%;
    width: 115.78%;
    height: auto;
    aspect-ratio: 2223 / 880;
    max-width: 2223px;
    max-height: 880px;
    transform: translateX(-50%);
}


/* ▼ SVG 本体 */
#top-04 .top-curve-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ▼ パスのアニメ初期値 */
#top-04 .top-curve-path {
  stroke-dasharray: 0;   /* JS で上書きされる */
  stroke-dashoffset: 0;  /* JS で上書きされる */
  opacity: 1;
  transition: none;
}

/* ▼ 開始したら描く */
#top-04 .top-curve-path.is-drawing {
  animation: drawTop04 3.0s ease-out forwards;
}

@keyframes drawTop04 {
  0%   { stroke-dashoffset: var(--dash-length); opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: 1; }
}


#loop-mask {
  position: absolute;
  /*top: 48%;*/
	top: 12.65625vw;
  left: 57%;
  width: 31.4%; /* 必要に応じて修正 */
  height: auto;
	aspect-ratio: 603 / 609;
  transform: translate(-50%);
/*  border-radius: 50%;*/
  overflow: hidden;
  /*opacity: 0;*/
  transition: opacity 0.8s ease-out;
  z-index: 1;
	pointer-events: none;
}

/* アニメ後に表示 */
/*#loop-mask.is-visible {
  opacity: 1;
}

#loop-mask img {
  width: 100%;
  height: auto;
	aspect-ratio: 603 / 609;
  object-fit: cover;
}*/


#vertical-curve-absolute {
  position: absolute;
  /*top: 185px;*/
	/*top: 9.6354vw;*/
	top: calc(9.6354vw - ((1920px - 100vw) * 0.20)); 
 /* right: 11.54%;*/
	right: calc(11.54% - ((1920px - 100vw) * 0.05));
  width: 245px;
  height: 674px;
  z-index: 30;
  pointer-events: none;
	 /* ★ 連続スケール（1920px → 1430px）*/
  transform: scale(
    clamp(
      0.75,
      calc( 0.75 + (1 - 0.75) * ((100vw - 1430px) / (1920px - 1430px)) ),
      1
    )
  );
}

#vertical-curve-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}



.curve-line {
  position: absolute;
  left: 0;
  top: 0;
	pointer-events: none;
}

.vt-char {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
}

/* ▼ アニメーション：inner が担当（下からふわっと） */
.vt-char .inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.4em);
  transition:
    opacity 0.7s cubic-bezier(.2,.65,.2,1),
    transform 0.7s cubic-bezier(.2,.65,.2,1);
  transition-delay: calc(var(--i) * 120ms);
 
  font-family: "Noto Serif JP", serif;
  font-size: 60px;
  font-weight: 900;
  color: #fff;
}

/* ▼ 回転専用（アニメと干渉しない） */
/*.char-rotate {
  display: inline-block;
  transform: rotate(var(--rot));
  transform-origin: center;
}*/

/* ▼ AOS発火後（inner だけ動く） */
/*#vertical-curve-wrap.aos-animate .vt-char .inner {
  opacity: 1;
  transform: translateY(0);
}*/

/*.vt-char.char-animate .inner {
  opacity: 1;
  transform: translateY(0);
}*/

.vt-char .inner.in {
  opacity: 1;
  transform: translateY(0);
}

.vt-char .inner.char-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================
   ▼ ここが角度指定（必ず --rot で渡す）
   =========================================== */
.vt-char[data-i="0"]  { --rot: -30deg; }
.vt-char[data-i="1"]  { --rot: -18.6deg; }
.vt-char[data-i="2"]  { --rot: -13.9deg; }
.vt-char[data-i="3"]  { --rot: -8.5deg; }
.vt-char[data-i="4"]  { --rot: -3.5deg; }
.vt-char[data-i="5"]  { --rot: -0deg; }
.vt-char[data-i="6"]  { --rot: 7.19deg; }
.vt-char[data-i="7"]  { --rot: 13.5deg; }
.vt-char[data-i="8"]  { --rot: 19deg; }

.vt-char[data-i="9"]  { --rot: -12deg; }
.vt-char[data-i="10"] { --rot: -0deg; }
.vt-char[data-i="11"] { --rot: 6.5deg; }
.vt-char[data-i="12"] { --rot: 8.8deg; }
.vt-char[data-i="13"] { --rot: 14.6deg; }
.vt-char[data-i="14"] { --rot: 19.5deg; }
.vt-char[data-i="15"] { --rot: 26.1deg; }
.vt-char[data-i="16"] { --rot: 33.5deg; }

/* ▼ 回転を適用するレイヤー */
.char-rotate {
  display: inline-block;
  transform: rotate(var(--rot));
}






#top-04-sp-layout{
	background: url("../images/top-02-back.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	/*z-index: -2;*/
	z-index: 0;
	overflow: hidden;
	display: flex;
    flex-direction: column;
}

#top-04-sp-layout video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: -2;
}

#top-04-sp-layout::after{
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: rgba(27,56,130,0.9);
}

#top-04-sp-layout h2,
#top-04-sp-layout p{
	color: #fff;
}

.sp-layout{
	display: none;
}
.pc-layout{
	display: block;
}















#f-contact-area{
	padding: 100px 40px;
}

#f-contact-area .container{
	width: 96%;
	max-width: 1564px;
	min-height: 539px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: url("../images/f-contact-area-back.jpg");
    background-size: cover;
}

#f-contact-area h2{
	margin-bottom: 40px;
	display: flex;
    flex-direction: column;
    align-items: center;
}


#f-contact-area .flex-box{
	margin-top: 40px;
	gap: 36px 36px;
}

#f-contact-area .flex-box .inner-left,
#f-contact-area .flex-box .inner-right{
	width: 360px;
	height: 130px;
}

#f-contact-area .flex-box .inner-left{
	background: #fff;
}

#f-contact-area .flex-box .inner-right{
	background: linear-gradient(to right, #c40b1d, #fb6a2c);
}

#f-contact-area .flex-box .inner-left a,
#f-contact-area .flex-box .inner-right a{
	height: 100%;
    width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
    position: relative;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

#f-contact-area .flex-box .inner-left a{
	color: #1b3882;
	pointer-events: none;
	font-size: 30px;
	font-weight: 900;
	align-items: center;
}

#f-contact-area .flex-box .inner-left a .mini{
	font-size: 0.6em;
}

#f-contact-area .flex-box .inner-right a{
	font-size: 18px;
	font-weight: 900;
	align-items: flex-start;
	padding-left: 45px;
}

#f-contact-area .flex-box .inner-right a:after{
	content: '';
    display: inline-block;
    background-image: url(../images/arrow.svg);
    background-size: cover;
    width: 8px;
    height: 13px;
    position: absolute;
    right: 37px;
    top: 50%;
    transform: translateY(-50%);
	transition: 0.3s;
}
#f-contact-area .flex-box .inner-right a:hover:after{
	right: 32px;
}

#f-contact-area p br{
		display: none;
	}




























/* サステナビリティ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/



/* 404 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


.notfound .child-header{
	padding-bottom: 0;
}


/* 会社案内 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#company #company-01 .container{
	padding: 180px 40px;
}
#company #company-01 .container .flex-box{
	gap: 40px 40px;
}
#company #company-01 .container .flex-box .inner-left{
	/*width: 61.67%;*/
	width: 100%;
}
#company #company-01 .container .flex-box .inner-right{
	width: fit-content;
}

.text-wrapper{
	display: flex;
	flex-direction: column;
	position: relative;
}

.text-wrapper::after{
	content: '';
	display: block;
	background: url("../images/greeting-back.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	width: 46.9%;
	height: auto;
	max-width: 544px;
	aspect-ratio: 544 / 422;
	top: 10px;
	left: -12.5vw;
	z-index: -1;
}



.text-wrapper .text:last-of-type{
	margin-bottom: 60px;
}

.signature-wrapper{
	align-self: flex-end;
}
.signature-wrapper span{
	color: #1b3882;
	display: block;
	margin-bottom: 0.5em;
}



#company #company-02{
	position: relative;
}

#company #company-02::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background: url(../images/top-03-back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}
#company #company-02 .container{
	padding: 180px 40px 100px;
}

/* --- 1. コンテナ全体のスタイル --- */
.table-container {
    /* 表全体の幅を固定 */
    width: 1202px; 
    /* 行が縦に並ぶように Grid を設定 */
    display: grid;
    /* 2列のグリッド。各行がこの設定を継承 */
    grid-template-columns: 100%; 
    /* セル間の隙間はなし */
    gap: 0;
	margin-bottom: 70px;
}

/* --- 2. 各行のスタイル (Grid設定) --- */
.table-row {
    display: grid;
    /* 1列目: 194px固定 (項目名) / 2列目: 残りの幅 (内容) */
    /* 1202px - 194px = 1008px が2列目の幅 */
    grid-template-columns: 194px 1fr; 
}

/* --- 3. 項目名の欄 (.header) のスタイル --- */
.header {
    /* 指定されたスタイル */
    min-height: 60px; /* 内容の高さに関わらず項目名の高さを固定 */
    font-size: 16px;
    color: #fff;
    background-color: #1b3882;
    padding: 20px;
    
    /* 下線（最後の行を除く） */
    border-bottom: 1px solid #fff;
    
    /* height: 60px に padding を足すと80pxになるので、
       Flexboxでテキストを中央揃えにするのが一般的です */
    display: flex;
    align-items: center;
}

/* --- 4. 内容欄 (.content) のスタイル --- */
.content {
    /* 指定されたスタイル */
    font-size: 16px;
    color: #333;
    background-color: #fff;
    padding: 20px;
    
    /* 下線（最後の行を除く） */
    border-bottom: 1px solid #1b3882;
    
    /* headerと高さを合わせるため、最低限の高さを設定 */
    min-height: 60px;
    display: flex; /* 内部コンテンツを制御するためFlexboxを使用 */
    align-items: center;
}

/* --- 5. 最後の行の下線削除 (CSS Gridの行を使う) --- */

/* 最後の行の項目欄と内容欄の下線を削除 */
.last-row .header,
.last-row .content {
    border-bottom: none;
}


/* --- 6. 最後の内容欄のFlexbox分割 --- */
.content-flex-split {
    display: flex;
    align-items: stretch; /* 内部要素が親の高さ全体に広がるように */
    padding: 0 0 35px; /* 内部でpaddingを制御するため、contentのpaddingをリセット */
}

/* 最後の内容欄の50%分割アイテム */
.content-flex-split .flex-item {
    width: 50%;
    /* contentの padding: 20px を内部で再現 */
    padding: 20px 20px 0; 
    box-sizing: border-box; /* paddingを含めて50%幅を維持 */
}

.table-row .content ul{
	display: flex;
	list-style-type: disc;
  padding-left: 1em;
    gap: 0 20px;
}
.table-row .content ul li{
	margin-right: 2em;
}


.cp-image-wrapper{
	gap: 20px 24px;
	max-width: 1028px;
	margin:0 auto;
}
.left-image{
	aspect-ratio: 515 / 613;
}

.right-image{
	display: flex;
	flex-direction: column;
	gap: 20px 24px;
	justify-content: space-between;
}

.right-image img{
	aspect-ratio: 489 / 297;
}


#company #company-03 .container{
	padding: 100px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.history-list{
	width: fit-content;
	margin: 0 auto 55px;
}

.history-list li{
	display: flex;
	gap: 45px;
	position: relative;
}
.history-list li:not(:last-child) {
    margin-bottom: 55px;
}
.history-list li:not(:last-child)::after{
	content: '';
	position: absolute;
    width: 1px; 
    height: 55px;
    background-color: #1b3882;
    bottom: -55px;
    left: 185px;;     
    z-index: 0;
	
}

.history-list li p{
	line-height: 1.5;
}

.year{
	color: #1b3882;
	font-size: 30px;
	font-weight: 900;
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
	line-height: 1;
	display: flex;
	min-width: 135.86px;
}

.month{
	font-size: 0.533em;
	display: inline-block;
	padding-top: 0.5em;
	    letter-spacing: 0.2em;
    padding-left: 0.3em;
}



.h-detail{
	display: flex;
	align-items: flex-start;
	gap: 45px;
	
}

.bullet {
    width: 8px;
    height: 8px;
    background-color: #1b3882; 
    border-radius: 50%;
    margin-top: 0.75em;
    flex-shrink: 0;
}

#company #company-03 .container > p{
	width: fit-content;
}





#company #company-04{
	position: relative;
}

#company #company-04::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background: url(../images/top-03-back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}
#company #company-04 .container{
	padding: 100px 40px;
}

#company-04 .text-wrapper{
	max-width: 472px;
}

#company-04 .sdgs-intro {
	margin-bottom: 100px;
}

#company-04 .sdgs-intro .inner-right{
	width: 54.5%;
}
#company-04 .sdgs-intro .inner-left{
    display: flex;
	width: 45.5%;
	align-items: center;
}

#company-04 h4,
#company-04 h5{
	color: #1b3882;
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
	font-size: 24px;
	width: fit-content;
	margin-bottom: 30px;
}

.sdgs-list-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sdgs-list{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 35px;
}

.sdgs-list li{
	background: #fff;
	border: solid 1px #1b3882;
	padding: 48px;
	width: 100%;
}

.sdgs-li-inner{
	display: flex;
}

.sdgs-li-inner .inner-left{
	width: auto;
	max-width: 709px;
	padding-bottom: 20px;
}

.sdgs-li-inner .inner-right{
	display: flex;
	gap: 20px;
	justify-content: flex-end;
	align-items: flex-end;
}
.sdgs-li-inner .inner-right img{
	width: 143px;
	aspect-ratio: 1 / 1;
}




/* 業務案内 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#business-01{
	padding: 100px 40px;
}

#business-01 .container{
	width: 100%;
	max-width: 1500px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.business-content-header{
	width: 100%;
	display: flex;
	background: #1b3882;
	justify-content: space-between;
	margin-bottom: 100px;
}

.child-page .business-content-header h3{
	color: #fff;
	align-items: flex-start;
}
.child-page .business-content-header h3 .h-en{
	color: #affcff;
}

.business-content-header .inner-left{
	padding: 20px 0 20px 75px;
	width: 57.33%;
	display: flex;
    flex-direction: column;
    justify-content: center;
}

.business-content-header p{
	color: #fff;
	position: relative;
}
.business-content-header p::before{
	content: '';
	position: absolute;
	left: -167px;
	top: 50%;
	transform: translateY(50%);
	width: 142px;
	height: 1px;
	background: linear-gradient(to right, #c40b1d, #fb6a2c);
}

.business-content-header p span{
	display: inline-block;
}

.business-content-header .inner-right{
	width: 42.67%;
	aspect-ratio: 640 / 349;
	overflow: hidden;
}
.business-content-header .inner-right img{
	object-fit: cover;
	object-position: left center;
	max-width: unset;
}

#business-01 .image-wrapper{
	width: 100%;
	max-width: 1352px;
	margin-bottom: 100px;
}

.business-01-contents-list{
	width: 100%;
	max-width: 1352px;
	/*margin-bottom: 100px;*/
	display: flex;
	flex-wrap: wrap;
	gap: 35px 22px;
}
.business-01-contents-list li {
    flex-grow: 0; 
    flex-shrink: 0;
    flex-basis: calc(50% - 11px); 
    padding: 44px 2px 10px 32px;
    min-height: 475px;
	border: solid 1px #1b3882;
    background-color: #fff;
    color: #333;
    display: flex;
	flex-direction: column;
}

#business-03 .container > h4,
.business-01-contents-list li h4,
.business-02-contents-list li h4,
.business-03-contents-list li h4{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
	font-weight: 900;
	font-size: 36px;
    color: #1b3882;
	display: flex;
	align-items: center;
	gap: 15px;
}
.business-01-contents-list li h4{
	margin-bottom: 30px;
}


.business-01-contents-list li:nth-child(3) h4{
	font-size: 33px;
	margin-left: 14px;
}

.business-01-contents-list li h4::before{
	content: '';
	display: inline-block;
	width: 87px;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-repeat: no-repeat;
}

.business-01-contents-list li:nth-child(1) h4::before{
	background-image: url("../images/business-icon-01-b.svg");
}
.business-01-contents-list li:nth-child(2) h4::before{
	background-image: url("../images/business-icon-02-b.svg");
}
.business-01-contents-list li:nth-child(3) h4::before{
	background-image: url("../images/business-icon-03-b.svg");
}
.business-01-contents-list li:nth-child(4) h4::before{
	background-image: url("../images/business-icon-04-b.svg");
}
.business-01-contents-list li:nth-child(5) h4::before{
	background-image: url("../images/business-icon-05-b.svg");
}
.business-01-contents-list li:nth-child(6) h4::before{
	background-image: url("../images/business-icon-06-b.svg");
}

.business-01-contents-list li p,
.business-02-contents-list li p{
	/*margin: 1em 0 45px;*/
	margin: 0 0 45px;
}

.business-01-contents-list li p:nth-of-type(1){
	margin-left: 14px;
}

.handled{
	color: #fff;
	font-size: 18px;
	font-weight: bold;
    background: linear-gradient(to right, #1b3882, #22b573);
	width: 138px;
	height: 46px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin-left: 14px;
	margin-bottom: 26px;
}
.handled::after{
	content: '';
    position: absolute;
    bottom: -13px;
    left: 0;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 17px 0px 0px;
    border-color: #1b3882 transparent transparent transparent;
}
.handled-item{
	line-height: 2;
	margin-bottom: 0!important;
}

.handled-item span{
	background: #cee4f0;
	font-weight: bold;
	padding: 0 8px;
}


#business-02{
	padding: 100px 40px;
}

#business-02 .container{
	width: 100%;
	max-width: 1500px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.business-02-contents-list{
	width: 100%;
	max-width: unset;
	/*margin-bottom: 100px;*/
	display: flex;
	flex-wrap: wrap;
	padding-left: 30px;
	gap: 100px 5.1%;
}
.business-02-contents-list li {
    width: 686px;
    background-color: #fff;
    color: #333;
    display: flex;
	flex-direction: column;
}

.business-02-contents-list li img{
	margin: 20px auto 30px;
	width: 658px;
	max-width: 100%;
}
.business-02-contents-list li h4{
	margin-left: 14px;
}
.business-02-contents-list li .handled{
	margin-left: 14px;
}








#business-03{
	padding: 100px 40px 120px;
}

#business-03 .container{
	width: 100%;
	max-width: 1500px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.business-03-contents-list{
	width: 100%;
	max-width: unset;
	margin-bottom: 55px;
	display: flex;
	flex-wrap: wrap;
	padding-left: 30px;
	gap: 100px 5.1vw;
}
.business-03-contents-list li {
    width: 686px;
    background-color: #fff;
    color: #333;
    display: flex;
	flex-direction: column;
}

.business-03-contents-list li img{
	margin: 20px auto 0;
	width: 658px;
	max-width: 100%;
}

#business-03 .container > h4{
	margin-top: 112px;
	align-self: flex-start;
	margin-left: 40px;
	margin-bottom: 30px;
}

/* 採用情報 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#recruit-01{
	padding: 180px 40px 100px;
}
#recruit-01 .container{
	width: 100%;
	max-width: 1180px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#recruit-01 .container .flex-box{
	width: 100%;
}

#recruit-01 .inner-left{
	width: 50.85%;
}

#recruit-01 .inner-left img{
	width: 384px;
	aspect-ratio: 384 / 88;
	margin-bottom: 55px;
}

#recruit-01 .inner-left .sp-image-wrapper{
	display: none;
}



#recruit-01 .inner-left p:nth-of-type(1){
	margin-bottom: 65px;
}
#recruit-01 .inner-left p:nth-of-type(2),
#recruit-01 .inner-left p:nth-of-type(3),
#recruit-01 .inner-left p:nth-of-type(4){
	font-size: 30px;
	font-weight: bold;
	color: #1b3882;
    margin-bottom: 35px;
    line-height: 1;
	text-indent: -0.5em;
}
#recruit-01 .inner-left p:nth-of-type(5){
	margin-bottom: 0;
}


#recruit-01 .inner-right{
	width: 49.15%;
	max-height: 792px;
	overflow-x: visible;
	overflow-y: clip;
}
#recruit-01 .inner-right img{
	width: 85.04vw;
	padding-left: 3.85vw;
	max-width: 1632px;
	position: relative;
	z-index: -1;
}


#recruit-02{
	position: relative;
	background: #3d5695;
	z-index: -3;
}

#recruit-02::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background: url(../images/top-03-back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.6;
}
#recruit-02 .container{
	padding: 100px 40px;
}

#recruit-02 h3{
	color: #fff;
}

.job-list{
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1106px;
	gap: 40px;
}

.job-list li{
	width: 100%;
	display: flex;
	border-radius: 22.426px;
	background: #fff;
}

.job-list li .inner-right{
	padding: 45px 40px;
}
.job-list li h4{
	max-width: 245px;
	width: fit-content;
	padding: 0 20px;
	height: 63px;
	color: #fff;
	background: linear-gradient(to right, #1b3882, #0c75d9);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
	font-size: 24px;
	font-weight: 900;
	margin-bottom: 40px;
}

#recruit-03{
	padding: 100px 40px 100px;
}
#recruit-03 .container{
	width: 100%;
	max-width: 1230px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.environment-list{
	display: flex;
	flex-wrap: wrap;
	gap: 108px 70px;
	justify-content: space-between;
}

.environment-list li{
	width: 578px;
	display: flex;
}

.environment-list li .inner-left{
	aspect-ratio: 265 / 278;
	width: 45.85%;
}

.environment-list li .inner-right{
	padding-left: 40px;
	width: 54.15%;
}

.environment-list li h4{
	font-size: 30px;
    font-weight: bold;
    color: #1b3882;
    margin-bottom: 25px;
}
.environment-list li p{
	line-height: 1.5;
}





#recruit-04{
	position: relative;
	background: url(../images/recruit-04-back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
}

#recruit-04 .container{
	padding: 100px 40px 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#recruit-04 .container > p{
	text-align: center;
	margin-bottom: 70px;
}

.speech-wrapper {
  position: relative;
  width: 1248px;
  height: 429px;
	margin-bottom: 15px;
}

/* 絶対配置は「wrap」のみ */
.bubble-wrap {
  position: absolute;
}

.b1 { top: 0; left: 14.42%; width: 426px; }
.b2 { top: 32px; right: 0%; width: 426px; }
.b3 { top: 195px; left: 33.09%; width: 426px; }
.b4 { bottom: 0; left: 0%; width: 360px; }
.b5 { bottom: 53px; right: 6.97%; width: 260px; }



.bubble {
  position: relative;
  background: #1b3882;
  color: #fff;
  padding: 0 35px;
  border-radius: 5px;
	font-size: 23px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 140px;
}
.b5 .bubble { height: 100px; }


.bubble-left::after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0px 0px;
	border-color: #1b3882 transparent transparent transparent;
	position: absolute;
	bottom: -20px;
	left: 20px;
}
.bubble-right::after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0px 0px 20px;
	border-color: #1b3882 transparent transparent transparent;
	position: absolute;
	bottom: -20px;
	left: 20px;
}

.b1 .bubble-right::after,
.b2 .bubble-left::after,
.b3 .bubble-right::after{
	left: 200px;
}
.b4 .bubble-right::after{
	left: 154px;
}
.b5 .bubble-left::after{
	left: 120px;
}




#recruit-04 .rectangle-button{
	/*background: linear-gradient(to right, #1b3882, #0c75d9);*/
	max-width: 313px;
}

#recruit-05 {
	padding: 100px 40px;
	background: #1b3882;
	color: #fff;
}

#recruit-05 .container{	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

#recruit-05 .flex-box{
	    width: 100%;
    max-width: 1074px;
    justify-content: space-between;
}

#recruit-05 .flex-box .inner-left,
#recruit-05 .flex-box .inner-right{
	max-width: 466px;
}

#recruit-05 h3{
	color: #fff;
	font-size: 40px;
	/*padding-bottom: 0.35em;*/
	border-bottom: solid 4px #fff;
	margin-bottom: 1.5em;
}

#recruit-05 h4{
	font-size: 30px;
	font-weight: bold;
	display: flex;
	align-items: flex-end;
	position: relative;
	margin-bottom: 15px;
}
#recruit-05 h4::before{
	content: '';
	margin-right: 22px;
	width: 80px;
	aspect-ratio: 1/ 1;
	background: url("../images/icon-check.svg");
	background-size: contain;
}
#recruit-05 h4 span{
	padding-bottom: 10px;
}

.recruit-footer{
	padding: 100px 40px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	width: 100%;
}
.recruit-footer p{
	color: #1b3882;
	text-align: center;
	font-size: 16px;
}




/* 先輩社員の声 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#voice-01{
	position: relative;
}

#voice-01 .container {
    padding: 180px 40px 100px;
	display: flex;
	flex-direction: column;
    align-items: center;
	max-width: unset;
}
#voice-01::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    background: url(../images/top-03-back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
}

#voice-01 .container > p{
	text-align: center;
	margin-bottom: 180px;
}

.voice-list{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 100px;
	margin-bottom: 180px;
	width: 100%;
	max-width: 1350px;
}

.voice-list li{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.voice-list li img{
	width: 268px;
	aspect-ratio: 1 / 1;
	margin-bottom: 34px;
}

.voice-list li h4{
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #1b3882;
	font-size: 40px;
	font-weight: 900;
	padding: 25px 35px;
	background: #fff;
	position: relative;
	line-height: 1;
	margin-bottom: 63px;
}

.voice-list li h4::after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 23px 13px 0px 13px;
	border-color: #fff transparent transparent transparent;
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
}


.voice-box-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:20px 35px;
}

.voice-list li:nth-last-of-type(3) .voice-box-wrapper{
	max-width: 887px;
}


.voice-box-inner-wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap:20px 35px;
}

.voice-box {
    position: relative;
    background: #1b3882;
    color: #fff;
    padding: 35px;
    border-radius: 5px;
    font-size: 23px;
    font-weight: bold;
    display: flex;
	flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 105px;
	height: auto;
	width: 425px;
}

.voice-box h5{
	font-size: 23px;
	font-weight: bold;
	line-height: 1.5;
}

.voice-box p{
	font-size: 16px;
	font-weight: normal;
	margin-top: 25px;
}



#voice-01 .rectangle-button {
    background: linear-gradient(to right, #1b3882, #0c75d9);
    max-width: 313px;
}


/* お問い合わせ ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#contact-01 {
	padding: 180px 40px;
}
#contact-01 .container{
	width: 100%;
	max-width: 1020px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#contact-01 .container > p{
	text-align: center;
	margin-bottom: 45px;
	width: fit-content;
}
#contact-01 .container > p:nth-child(2){
	display: flex;
    align-items: center;
    gap: 12px;
}
#contact-01 .container > p span{
	display: inline-block;
}



#contact-01 .form-wrap {
	width: 100%;
  max-width: 1020px;
  margin: 0 auto;
	padding-top: 42px;
	border-top: solid 1px #ccc;
}

#contact-01 .form-group {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
}

#contact-01 .label-name {
  width: 258px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
	display: flex;
	justify-content: space-between;
	padding-right: 35px;
}

#contact-01 input[type="text"],
#contact-01 input[type="email"],
#contact-01 textarea {
  width: calc(100% - 258px);
  padding: 10px 14px;
  border: 1px solid #ccc;
  font-size: 16px;
  box-sizing: border-box;
}

/* ----------------------------
   必須マーク
-----------------------------*/
.required {
  background: #314a70;
  color: #fff;
  font-size: 13px;
  border-radius: 13px;
	    display: flex;
    width: 52px;
    height: 26px;
    text-align: center;
    justify-content: center;
    align-items: center;
	font-weight: normal;
	letter-spacing: 0.5em;
    padding-left: 0.5em;
}

/* ----------------------------
   電話番号 3分割
-----------------------------*/
.tel-group .tel-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(100% - 258px);
}

.tel-group input {
  width: 75px!important;
}

/* ----------------------------
   チェックボックス
-----------------------------*/
.checkbox-wrapper label {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
}

.checkbox-wrapper input {
  margin-right: 6px;
}

/* ----------------------------
   お問い合わせ詳細
-----------------------------*/
.text-area textarea {
  min-height: 200px;
}

/* ----------------------------
   営業目的チェック
-----------------------------*/
.policy .policy-notice {
  width: 258px;
    display: flex;
    justify-content: flex-end;
	padding-right: 35px;
}

.policy-check {
  display: flex;
  flex-direction: column;
}

.policy-check input {
  margin-right: 8px;
}

/* ----------------------------
   送信ボタン
-----------------------------*/
.button_area {
  text-align: center;
  margin-top: 60px;
}

.button_area .button {
  background: #1b3882;
  border: none;
  /*padding: 14px 60px;*/
  color: #fff;
  font-size: 16px;
  cursor: pointer;
	width: 236px;
	height: 77px;
}

/* ----------------------------
   スマホ（ラベルの下に入力欄）
-----------------------------*/
@media (max-width: 768px) {
  #contact-01 .form-group {
    display: block;
  }

  #contact-01 .label-name {
    justify-content: flex-start;
    padding-right: 0;
    gap: 1em;
    margin-bottom: 0.5em;
  }
	
  #contact-01 input[type="text"], 
	#contact-01 input[type="email"], 
	#contact-01 textarea{
		width: 100%;
	}

  .tel-group .tel-wrapper {
    display: flex;
    gap: 6px;
  }

  .tel-group input {
    width: 100%;
  }
	
	.policy .policy-notice{
		width: 100%;
    display: flex;
    justify-content: center;
    padding-right: 0;
	}
	.policy-check {
    display: flex;
    flex-direction: column;
    align-items: center;
}
	
	.policy-check p:nth-of-type(1){
		margin-bottom: 2em;
	}
	
	
	#contact-01 {
    padding: 100px 40px;
}
	
	.thanks #contact-01 .container > p{
		text-align: left;
	}
	
	
}



.confirmation-box{
	width: calc(100% - 258px);
    padding: 10px 14px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box;
}


.confirm .button_area{
	display: flex;
	justify-content: center;
    gap: 40px;
}


/* リンク位置調整　///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

[id]{
	scroll-margin-top: 102px;
}


/* レスポンシブデザイン ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media (min-width: 1921px) {
	
	#top-04 .top-curve{
		max-width: none;
		max-height: none;
	}
	
	#loop-mask img{
		max-width: none;
    width: 100%;
	}
	
	#top-04 .container{
		max-width: none;
        margin-left: 14.8958vw;
	}
	
	.child-header .flex-box{
		justify-content: space-between;
	}
	
	.kiha-kun-name{
		right: 214px;
	}
	

}
@media (max-width: 1920px) {
	.site-footer{
		padding-bottom: 200px;
	}
}

@media (max-width: 1830px) {
	#top-01 .container,
	#top-02,
	#top-03,
	.site-footer{
		padding-right: 40px;
		padding-left: 40px;
	}
	
	#top-04{
		padding-right: 40px;
		padding-left: 80px;
	}

	
	#top-01 .animated-text{
		font-size: 2.6vw;
    letter-spacing: -0.1em;
	}
	.arc-line{
		font-size: 3vw;
	}
	


}


@media (max-width: 1640px) {
.text-wrapper::after{
	left: 0;
}
}





@media (max-width: 1561px) {
	.business-02-contents-list li,
	.business-03-contents-list li{
		width: 45%;
	}
}



@media (max-width: 1496px) {
	#top-01 .inner-right-inner {
    padding-left: 0;
}
	#top-01 .container .flex-box:nth-child(1) .inner-right{
		width: 80%;
	}
	
	
	
	
}
	
@media (max-width: 1430px) {
	.site-header .container{
		padding: 0 40px;
	}
	
	.speech-wrapper{
		width: calc(100% - 80px);
		height: 512px;
	}
	
	.environment-list{
		flex-direction: column;
		gap: 70px;
	}
	.environment-list li{
		width: 100%;
	}
	.environment-list li .inner-left{
		max-width: 265px;
	}
	.environment-list li .inner-right{
		width: 100%;
	}
	.environment-list li h4 br{
		display: none;
	}
	
	/*.voice-box-wrapper{
		flex-direction: column;
	}
	.voice-box{
		width: 100%;
		max-width: 425px;
	}*/
	
}

@media (max-width: 1280px) {
	
	.site-header{
		height: 84px;
		position: sticky;
		background: #fff;
	}
	
	.site-header::after{
		display: none;
	}
	
	.site-header .container {
        padding: 20px 16px 14px;
    }
	
	.site-logo img{
	filter: invert(25%) sepia(6%) saturate(4954%) hue-rotate(178deg) brightness(90%) contrast(81%);
}
	
	 .main-nav {
        display: none; /* ハンバーガーメニュー表示時は非表示 */
        width: 100%;
        order: 3; /* 下に配置 */
        margin-top: 0;
		position: absolute;
        top: -40px;
        left: 0;
    }

    .main-nav.is-open { /* JavaScriptで追加されるクラス */
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
		height: auto;
		background: rgba(255, 255, 255, 0.9);
		padding-top: 120px;
		padding-bottom: 30px;
		box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
        width: 100%;
    }

    .main-nav li {
        margin: 10px 0;
    }
	
	.main-nav a{
		font-size: 20px;
		margin-bottom: 0;
	}
	.child-page .main-nav .nav-about_us a,
    .child-page .main-nav .nav-service a{
        color: #fff;
    }

    .menu-toggle {
        display: block;
		align-self: flex-start;
        /*margin-top: 20px;*/
       /*background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);*/
        /*aspect-ratio: 1 / 1;*/
		/*padding: 14px;*/
    }

    /* ハンバーガーメニューのアニメーション */
    .menu-toggle.is-active span:nth-child(1) {
        transform: translateY(3px) rotate(45deg);
    }

    .menu-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
	
	
	
	
	.main-nav ul{
		gap:0;
	}
    .main-nav a{
		color: #3d3f4a;
	}
	.main-nav li.nav-contact{
		background: none;
		width: auto;
    height: auto;
	}
    .main-nav li.nav-contact a{
        font-size: 20px;
        padding-right: 0;
    }
    .main-nav li.nav-contact a::after{
        display: none;
    }
	
	
	
	
	
	
	
	
	.site-footer .content-wrapper{
		flex-direction: column;
	}
	.footer-logo{
		width: 90%;
		max-width: 330px;
        margin-bottom: 40px;
	}
	
	
	h2{
		display: flex;
        flex-direction: column;
        align-items: center;
	}
	
	
	.kiha-kun,
	.kiha-kun-name{
	display: none;
}
	
	#hero{
		min-height: 760px;
	}
	
	#hero::before{
		width: 100%;
        height: 32.89%;
		top: unset;
        left: 0;
        bottom: 0;
	}
	#hero::after{
		display: none;
	}
	.top-copy{
		margin-top: 360px;
		width: 100%;
		background-size: 132.82%;
		padding-left: 40px;
        padding-right: 40px;
		padding-bottom: 56px;
	}
	
	.hero-title br{
		display: none;
	}
	.top-copy h2{
		margin-bottom: 44px;
	}

	
	.top-copy-sub {
        width: 100%;
        margin: 0 auto;
        max-width: 563px;
    }

	
	
	#top-01 .container .flex-box:nth-child(1){
		flex-direction: column-reverse;
	}
	#top-01 .inner-left,
	#top-01 .inner-right{
		width: 100%;
	}
	#top-01 .inner-left{
		margin-right: 0;
		margin-top: 45px;

	}
	#top-01 .inner-left .img-box{
		margin-right: 0;
        width: 100%;
		display: flex;
        justify-content: center;
	}
	
	#top-01 .inner-right{
		display: flex;
    flex-direction: column;
    align-items: center;
	}
	#top-01 .container .flex-box:nth-child(1) .inner-right {
        width: 100%;
    }
	
	#top-01 .inner-right-inner{
		padding-left: 0;
		display: flex;
    flex-direction: column;
    align-items: center;
	}
	#top-01 .animated-text{
		font-size: 4.6vw;
	}
	
	#top-01 .animated-text-01{
		text-align: center;
		font-size: 58px;
    letter-spacing: -9px;
	}
	#arc-line2{
		transform: rotate(3deg);
		font-size: 70px;
	}
	#top-01 .top-curve{
		display: none;
	}
	
	#top-01 .container{
		padding-top: 0;
	}
	
	
	
	#top-01 .container .flex-box:nth-child(1) {
    margin-bottom: 40px;
}
	#top-01 .container .flex-box:nth-child(2) {
    width: 100%;
    min-height: unset;
		flex-direction: column;
}
	#top-01 .container .flex-box:nth-child(2) img:nth-child(1){
		display: none;
	}
	#top-01 .container .flex-box:nth-child(2) img:nth-child(2),
	#top-01 .container .flex-box:nth-child(2) img:nth-child(3){
		width: 100%;
		align-self: center;
		
	}
	#top-01 .container .flex-box:nth-child(2) img:nth-child(3){
		margin-top: calc(36px + 36px);
	}
	
	.kiha-kun-sp{
	display: block;
		width: 184px;
		aspect-ratio:184 / 180;
		transform-origin: center bottom;
    animation: motion-yurikago 1.8s ease-in-out infinite;
}
	.kiha-kun-sp-name{
		margin-bottom: 46px;
		display: block;
        margin-top: 10px;
        aspect-ratio: 54 / 13;
        width: 54px;
		transform: translateX(-100%);
	}	
	
	
	
	
	#top-02{
		padding-right: 10px;
        padding-left: 10px;
	}
	
	
	#top-02 .bg-line-wrap{
		display: none;
	}
	
	#top-02 .flex-box:nth-child(1){
		flex-direction: column;
	}
	#top-02 .flex-box:nth-child(1) .inner-left{
		align-self: center;
		transform: translateY(0%);
		margin-bottom: 34px;
	}
	#top-02 .flex-box:nth-child(2){
		flex-direction: column;
		margin-top: 90px;
	}
	#top-02 .flex-box:nth-child(2) picture:nth-child(1),
	#top-02 .flex-box:nth-child(2) picture:nth-child(3){
		align-self: center;
	}
	#top-02 .flex-box:nth-child(2) picture:nth-child(1){
		width: 33.51vw;
		min-width: 248px;
        aspect-ratio: 248 / 257;
		order: 3;
	}
	#top-02 .flex-box:nth-child(2) picture:nth-child(2){
		width: 50vw;
		min-width: 370px;
        aspect-ratio: 370 / 204;
		order: 1;
		margin: 0 auto 42px;
        max-width: 94.87%;
	}
	#top-02 .flex-box:nth-child(2) picture:nth-child(3){
		width: 28.24vw;
		min-width: 209px;
        aspect-ratio: 209 / 257;
		order: 2;
		margin-bottom: 12px;
	}
	#top-02 ul{
		margin-bottom: 65px;
		margin-top: 38px;
	}
	#top-02 ul li{
		width: 100%;
	}
	#top-02 ul li a{
		padding: 28px 34px;
	}
	#top-02 ul li a::before{
		width: 50px;
	}
	
	#top-02 .flex-box:nth-of-type(3){
		flex-direction: column;
		gap: 20px;
	}
	#top-02 .flex-box:nth-of-type(3) .inner-left,
	#top-02 .flex-box:nth-of-type(3) .inner-right{
		width: 100%;
		height: 233px;
	}
	
	#top-02 h3{
		font-size: 24px;
	}
	
	#top-02 h3::before{
		width: 37px;
		margin-left: 24px;
	}
	
	
	
	#top-02 .flex-box:nth-of-type(3) .inner-left a, 
	#top-02 .flex-box:nth-of-type(3) .inner-right a{
		font-size: 24px;
	}
	#top-02 .flex-box:nth-of-type(3) .inner-left::after, 
	#top-02 .flex-box:nth-of-type(3) .inner-right::after{
		background: rgba(0, 0, 0, 0.6);
	}
	
	
	
	#top-03{
		padding: 92px 20px 56px;
	}
	
	#top-03 .container{
		max-width: none;
	}
	#top-03 .flex-box{
		flex-direction: column;
		align-items: center;
		gap: 45px;
	}
	#top-03 .flex-box .inner-left, 
	#top-03 .flex-box .inner-right{
		width: 100%;
		display: flex;
        flex-direction: column;
        align-items: center;
	}
	
	#top-03 .flex-box .inner-left{
		padding: 0 14px;
	}
	
	#top-03 .inner-left ul{
	display: none;
    }
	#top-03 .inner-right ul{
	display: flex;
		margin-top: 43px;
		padding: 0 14px;
    }
	#top-03 ul li{
		width: 100%;
    max-width: none;
    aspect-ratio: none;
		max-height: 83px;
	}
	
	#top-03 .inner-right .img-box{
		max-width: 100%;
		width: fit-content;
	}
	#top-03 .flex-box .inner-left p {
		margin-bottom: 55px;
	}
	#top-03 ul li a{
		padding: 35px;
	}
	
	
	
	#top-04{
        /*padding-right: 40px;
        padding-left: 40px;*/
		/*min-height: 367px;*/
		min-height: calc(1155px - ((1920px - 100vw) * 0.46));
	}
	#top-04-sp-layout{
		padding: 84px 0 64px;
	}
	
	#top-04-sp-layout .container{
		max-width: none;
		width: 100%;
		display: flex;
        flex-direction: column;
        align-items: center;
		padding: 0 40px;
	}

	#top-04-sp-layout p{
		max-width: 610px;
		margin-top: 35px;
	}
	#top-04-sp-layout .rectangle-button{
		margin: 0 auto;
		width: 313px;
	}
	#top-04-sp-layout .rectangle-button a{
		font-size: 20px;
	}
	
	#vertical-curve-absolute{
		display: none;
	}
	
	.footer-nav{
		margin-top: 65px;
	}
	
	.site-footer .content-wrapper .inner-left{
		width: auto;
	}
	.copyright{
		text-align: center;
	}
	
	.table-container{
		width: 100%;
	}
	.content-flex-split{
		flex-direction: column;
	}
	.content-flex-split .flex-item{
		width: 100%;
	}
	
	#company #company-01 .container .flex-box{
		flex-direction: column;
	}
	#company #company-01 .container .flex-box .inner-left,
	#company #company-01 .container .flex-box .inner-right{
		width: 100%;
	}
	
	#company #company-01 .container .flex-box .inner-right{
		display: flex;
		justify-content: center;
	}
	
	#company-04 .sdgs-intro{
		flex-direction: column;
	}
	#company-04 .sdgs-intro .inner-left{
		width: 100%;
		display: flex;
        justify-content: center;
	}
	#company-04 .text-wrapper {
    max-width: unset;
}
	#company-04 .sdgs-intro .inner-right{
		width: 100%;
		display: flex;
        justify-content: center;
	}
	#company-04 h4, #company-04 h5{
		margin: 0 auto 30px;
	}
	.sdgs-li-inner {
    flex-direction: column-reverse;
		align-items: center;
		gap: 30px;
}
	.sdgs-li-inner .inner-left,
	.sdgs-li-inner .inner-right{
		max-width: unset;
		justify-content: center;
    align-items: center;
	}
	
	.business-01-contents-list{
		    flex-direction: column;
	}
	.business-01-contents-list li{
		width: 100%;
		flex-basis: unset;
		padding: 80px 38px 40px;
	}
	
	.speech-wrapper {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
		margin-bottom: 100px;
  }

  /* wrap を通常フローに戻す */
  .bubble-wrap {
    position: static !important;
    width: fit-content !important;
	  min-width: 50%;
	  
  }
	
	.speech-wrapper .bubble-wrap:nth-child(odd){
		align-self: flex-start;
	}
	.speech-wrapper .bubble-wrap:nth-child(even){
		align-self: flex-end;
	}
	
	.bubble{
		height: auto;
		min-height: 140px;
		font-size: 18px;
	}	
	
	.b1 .bubble-right::after{
		left: 10%;
		border-width: 20px 20px 0px 0px;
	}
    .b2 .bubble-left::after{
		left: 90%;
		border-width: 20px 0px 0px 20px;
	}
    .b3 .bubble-right::after{
        left: 10%;
		border-width: 20px 20px 0px 0px;
    }
    .b4 .bubble-right::after{
        left: 90%;
    }
    .b5 .bubble-left::after{
        left: 10%;
    }
	
	.bubble-wrap br{
		display: none;
	}
	
	#recruit-01 .container .flex-box{
		flex-direction: column;
	}
	#recruit-01 .inner-left{
    width: 100%;
		position: relative;
}
	#recruit-01 h3{
		align-items: flex-start;
	}
	#recruit-01 .inner-right{
		display: none;
	}
	
	
	#recruit-01 .inner-left .sp-image-wrapper{
		display: block;
		position: absolute;
		right: -40%;
        top: -20%;
}

	#recruit-01 .inner-left .sp-image-wrapper img{
		width: 75.04vw;
    padding-left: 0;
    max-width: 1632px;
    z-index: -1;
		aspect-ratio: unset;
		margin-bottom: 0;
	}
	
	#recruit-05 .flex-box{
		flex-direction: column;
        gap: 80px;
		align-items: center;
	}
	#recruit-05 .flex-box .inner-left, 
	#recruit-05 .flex-box .inner-right{
		max-width: 630px;
		width: 100%;
	}
	
	
	.notfound .child-header{
	display: none;
}
	

	
	
	.sp-layout{
	display: flex;
}
	.pc-layout{
	display: none;
}

}

@media (max-width: 1080px) {
	#recruit-01 .inner-left .sp-image-wrapper{
		right: -48%;
        top: -15%;
}
}




@media (max-width: 960px) {
	
	.top-copy-sub {
        width: fit-content;
        margin: 0 auto;
    }
	
	
	.footer-nav{
		flex-direction: column;
        justify-content: center;
	}
	#top-04{
		min-height: unset;
	}
	
    #top-04 .top-curve{
    width: 261.03%;
    left: 33%;
	}
	#loop-mask{
		top: 16.65625vw;
    left: 51%;
    width: 72.33%;
	}
	
	
	#f-contact-area{
		padding: 0;
	}
	#f-contact-area .container{
		width: 100%;
		min-height: unset;
		padding-top: 77px;
		padding-bottom: 80px;
	}
	#f-contact-area .flex-box{
		gap: 18px 36px;
    flex-direction: column;
	}
	
	.site-footer {
		padding-top: 60px;
        padding-left: 20px;
        padding-right: 20px;
	}
	
	.footer-nav{
		display: none;
	}
	.copyright{
		margin-top: 63px;
		text-align: center;
	}
	
	 .inner-right-scale {
    transform-origin: top center;
    transform: scale(calc(100vw / 960px));
		 height: 0; /* scale の影響で生じる疑似的な“空白高さ”を排除 */
    overflow: visible;

    /* 実寸の幅・高さ（あなたの環境） */
    --ar-w: 765;
    --ar-h: 239;

    /* scale 前の内部コンテンツ幅 */
    --base-width: var(--ar-w);

    /* 見た目の高さ補正
       = 元の幅 × (高さ/幅) × scale値
     */
    margin-bottom: calc(
        var(--base-width) * (var(--ar-h) / var(--ar-w))
        * (100vw / 960)
    );
  }
	
	
	.animated-text-01-scale {
    display: inline-block;   /* scale の高さ補正が効く */
		transform-origin: top center;
	}
	.animated-text-01-scale {
      --scale: calc(100vw / 960);
      transform: scale(var(--scale));
      /* scale によって高さが1/scaleになる問題を相殺する補正 */
      height: calc(100% / var(--scale));
  }
	
	
	
	
	#top-01 .container{
		padding: 60px 25px 0;
	}
	
	#top-01 .animated-text{
		font-size: 6.1538vw;
    font-weight: 900;
    letter-spacing: -0.1em;
	}
	#arc-line2{
		font-size: 8.72vw;
		letter-spacing: -0.02em;
		margin-left: auto;
	}
	#top-01 .container p{
		/*margin-top: 90px;*/
		margin-top: 0;
		margin-right: 15px;
		margin-left: 15px;
	}
	#top-01 .inner-left{
		margin-top: 45px;
		padding-right: 15px;
		padding-left: 15px;
	}
	#top-01 h2 {
    margin-bottom: 45px;
}
	/*#top-01 .container .flex-box:nth-child(1) {
    margin-bottom: 40px;
}
	#top-01 .container .flex-box:nth-child(2) {
    width: 100%;
    min-height: unset;
		flex-direction: column;
}
	#top-01 .container .flex-box:nth-child(2) img:nth-child(1){
		display: none;
	}
	#top-01 .container .flex-box:nth-child(2) img:nth-child(2),
	#top-01 .container .flex-box:nth-child(2) img:nth-child(3){
		width: 100%;
	}
	#top-01 .container .flex-box:nth-child(2) img:nth-child(3){
		margin-top: calc(36px + 36px);
	}*/
	
	.address-wrapper{
		flex-direction: column;
	}
	
	.site-footer .content-wrapper .inner-left,
	.site-footer .content-wrapper .inner-right{
		width: 100%;
	}
	.site-footer .content-wrapper .inner-left{
		max-width: 256px;
	}
	
	.top-copy h2{
		font-size: clamp(40px, calc(29.82px + 2.61vw), 80px);
		letter-spacing: -0.1125em;
		align-items: flex-start;
        max-width: 510.41px;
        margin-left: auto;
        margin-right: auto;
	}
	
	.table-row .content ul{
		flex-direction: column;
	}
	.cp-image-wrapper,
	.right-image{
		gap: 1.04vw 1.25vw;
	}
	
	.history-list li{
		flex-direction: column;
		gap: 10px;
	}
	.history-list li:not(:last-child){
		margin-bottom: 75px;
	}
	
	.h-detail{
		gap: 10px;
	}
	.history-list li:not(:last-child)::after{
		left: 4px;
	}
	
	.business-02-contents-list,
	.business-03-contents-list{
		padding-left: 0;
	}
	
	.business-02-contents-list li,
	.business-03-contents-list li{
		width: 100%;
	}
	.business-01-contents-list li p:nth-of-type(1),
	.business-01-contents-list li h4,
	.business-01-contents-list li .handled,
	.business-02-contents-list li h4,
	.business-02-contents-list li .handled{
		margin-left: 0;
	}
	.handled-item br{
		display: none;
	}
	.business-01-contents-list,
	.business-02-contents-list,
	.business-03-contents-list{
		margin-bottom: 0;
	}
	
	.business-content-header{
		flex-direction: column-reverse;
	}
	.business-content-header .inner-left{
		width: 100%;
		padding-right: 40px;
	}
	.business-content-header .inner-right{
		display: none;
	}
	
	.business-content-header p::before{
        left: -160px;
	}
	.business-content-header .inner-left{
		padding-left: 40px;
	}
	
	.child-page .business-content-header h3{
		margin-bottom: 30px;
	}
	#business-03 .container > h4,
	.business-01-contents-list li h4,
	.business-01-contents-list li:nth-child(3) h4,
	.business-02-contents-list li h4, 
	.business-03-contents-list li h4{
		font-size: 26px;
	}
	#business-03 .container > h4{
		margin-left: 0;
		margin-bottom: 20px;
	}
	.business-03-contents-list li img{
		margin: 0;
		width: 100%;
	}
	
	
	.child-page h3{
		font-size: 30px;
		/*margin-bottom: 1em;*/
	}
	.child-page h4{
		font-size: 24px;
	}
	.business-02-contents-list,
	.business-03-contents-list{
		    gap: 40px 5.1%;
	}
	.business-03-contents-list{
		margin-bottom: 40px;
	}
	
	#recruit-01{
		padding: 100px 40px 100px;
	}
	
	#recruit-01 .inner-left p:nth-of-type(2), 
	#recruit-01 .inner-left p:nth-of-type(3), 
	#recruit-01 .inner-left p:nth-of-type(4){
		font-size: 24px;
		margin-bottom: 24px;
	}
	
	.job-list{
        align-items: center;
	}
	
	.job-list li{
		flex-direction: column;
		max-width: 552px;
		overflow-x: hidden;
	}
	.job-list li .inner-left,
	.job-list li .inner-right{
		width: 100%;
	}
	
	
	.environment-list li .inner-left{
		width: 20%;
	}
	
	.recruit-footer{
		padding-bottom: 100px;
	}
	
	.environment-list li h4{
		font-size: 24px;
	}
	
	.voice-list li h4{
		font-size: 22px;
	}
	
	#company #company-02 .container{
		padding: 100px 40px;
	}
	
	.text-wrapper::after {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
		width: 100%; 
    }

	
	
}


@media (max-width: 768px) {
	
	.top-copy h2{
		max-width:446.41px;
	}
	
	#top-02 .flex-box:nth-child(2){
		margin-top: 50px;
	}
	#top-02 ul li a{
		font-size: 20px;
	}
	#arc-line2{
		font-size: 8.52vw;
	}
	#f-contact-area p{
		text-align: center;
	}
	#f-contact-area p br{
		display: inline;
	}
	
	#top-01 .container p{
		margin-top: 0;
	}
	
	#top-01 .container .flex-box:nth-child(2) img:nth-child(3){
		max-width: unset;
	}
	
	#top-02 ul li{
		max-width: none;
	}
	
	#top-02 p {
    text-align: left;
		padding: 0 33px;
}
	#top-02 p br{
		display: none;
	}
	.top-copy-sub{
		letter-spacing: -2px;
	}
	h2{
		font-size: 30px;
	}
	
	
	.business-content-header,
	#business-01 .image-wrapper{
		margin-bottom: 40px;
	}
	
	.business-01-contents-list li{
        padding: 40px 20px;
	}
	#business-02,
	#business-03{
		padding-top: 0;
	}
	
	.handled{
		font-size: 16px;
	}
	
	

    .table-row {
        grid-template-columns: 1fr; 
    }
    .header {
        border-bottom: none;
    }
    .table-row {
        border-bottom: 1px solid #1b3882;
    }
    .table-container > .table-row:last-of-type {
        border-bottom: none;
    }
    .table-row .header,
    .table-row .content {
        border-bottom: none !important;
    }
    .content-flex-split {
        flex-direction: column;
    }
    
    .content-flex-split .flex-item {
        width: 100%;
    }
    .content-flex-split .left-half {
        border-right: none;
        border-bottom: 1px solid #eee; 
    }
	.content-flex-split .flex-item span{
		display: inline-block;
	}
	
	
	#recruit-04 .container > p{
		text-align: left;
	}
	.speech-wrapper{
		width: 100%;
	}
	
	.bubble {
        min-height: 100px;
        font-size: 16px;
    }
	
	#recruit-01 .inner-left img{
		max-width: 384px;
		width: 80%;
        margin-bottom: clamp(20px, 6vw, 55px);
	}
	
	
	#recruit-01 .inner-left .sp-image-wrapper{
		position: static;
		display: block;
        width: 200%;
        overflow: hidden;
		max-width: 964px;
		aspect-ratio: 600 / 268;
		margin-bottom: 40px;
}

	#recruit-01 .inner-left .sp-image-wrapper img{
		width: 100%;
		aspect-ratio: 1633 / 1011;
	}
	#recruit-01 .inner-left p:nth-of-type(2),
	#recruit-01 .inner-left p:nth-of-type(3), 
	#recruit-01 .inner-left p:nth-of-type(4){
		font-size: 22px;
	}
	
	#recruit-02 .container{
		padding: 100px 20px;
	}
	
	.job-list li h4{
		font-size: 18px;
        height: 46px;
		margin-bottom: 20px;
	}
	
	.environment-list{
		gap: 100px;
	}
	
	.environment-list li{
		flex-direction: column;
	}
	.environment-list li .inner-left{
		width: 100%;
		margin: 0 auto 40px;
	}
	.environment-list li h4{
		width: fit-content;
		margin: 0 auto 25px;
	}
	.environment-list li .inner-right{
		padding-left: 0;
	}
	
	#recruit-05 h3{
		font-size: 28px;
	}
	#recruit-05 h4{
		font-size: 24px;
	}
	#recruit-05 h4::before{
		width: 60px;
	}
	
	#recruit-01 h3{
		font-size: 28px;
		margin-bottom: 20px;
	}
	#recruit-01 .inner-left p:nth-of-type(1){
		margin-bottom: 40px;
	}
	
	#voice-01 .container > p{
		text-align: left;
        margin-bottom: 60px;
	}
	.voice-box-inner-wrapper{
		width: 100%;
	}
	.voice-box{
		width: 100%;
		max-width: 425px;
	}
	.voice-box h5{
		font-size: 18px;
	}
	
	#company #company-01 .container,
	#voice-01 .container{
		padding-top: 100px;
		padding-bottom: 100px;
	}
	
	.voice-list{
		    margin-bottom: 80px;
	}
	
	#top-03 .flex-box .inner-left p{
		margin-bottom: 0;
	}
	.business-01-contents-list li h4{
		flex-direction: column;
	}
	
	
	.pagetop {
		aspect-ratio: 101 / 136;
        width: 79px;
        height: auto;
}

	
}

@media (max-width: 465px) {
	#contact-01 .container > p{
		text-align: left;
	}
	#contact-01 .container > p br{
		display: none;
	}
	.table-container{
		margin-bottom: 20px;
	}
	
	
	.bg-video{
		height: 75vh;
	}
	.top-copy{
		padding-top: 60px;
	}
	
}




.full-bleed{
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}