@charset "UTF-8";
/*--------------------------
リセット
---------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
  overflow-y: scroll;
  font-size: 16px; /* 1rem = 16px */
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

img {
  height: auto;


	width:100%;


}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
  position:relative;
}

/*--------------------------
基本：基本タグ
---------------------------- */
.pcOFF {
  /* ここで必要な基本設定があれば記述 */
}
@media screen and (min-width: 768px) {
  .pcOFF {
    display: none !important;
  }
}

.spOFF {
  /* ここで必要な基本設定があれば記述 */
}
@media screen and (max-width: 767px) {
  .spOFF {
    display: none !important;
  }
}



/*--------------------------
基本：フォント
---------------------------- */



.eng_lbl_tit {
	color:#fff;
	font-size: clamp(70.0000px, calc(35.1563vw + -200.0000px), 160.0000px);
	font-family: "Roboto", sans-serif;
	position:absolute;
	top:0;
	right:0;
	text-align:right;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	font-weight:bold;
}

.titBox{
}

.titBox .tit{
	font-size: clamp(50.0000px, calc(19.5313vw + -100.0000px), 100.0000px);
	font-weight:bold;
	font-family: "Roboto", sans-serif;
}

.tit01{
  margin: 0 0 18px;
  font-size: clamp(22px, calc(7.8125vw + -38px), 42px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.txt01{
  font-size: clamp(16px, calc(1.5625vw + 4px), 20px);
  line-height: 1.9;
  margin: 0 0 18px;
}

.lst01{
  margin: 0 0 18px;
}

@media screen and (max-width: 500px) {
	.eng_lbl_tit {
		/*font-size:50px;*/
	}
}

/*--------------------------

---------------------------- */
body.otherPage #wrapper{
	position:relative;
}
body.otherPage .mainContent{
	position:relative;
	z-index:10;
}
body.otherPage .footer{
	position:relative;
	z-index:10;
}

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

---------------------------- */
.mainContent{
	margin-top:80px;
}	
.mainContent__inner{
	width:100%;
	max-width:900px;
	margin:0 auto;
	padding-top: clamp(50.0000px, calc(19.5313vw + -100.0000px), 100.0000px);
	padding-bottom: clamp(50.0000px, calc(19.5313vw + -100.0000px), 100.0000px);
}	
@media screen and (max-width: 1200px) {
	.mainContent__inner{
		max-width:calc( 100% - 30px);
	}
}
/* SP */
@media screen and (max-width: 767px) {
	.mainContent{
		margin-top:60px;
	}	
}



/* ----------
footer
   ---------- */
.footer {
	background:#202020;
	padding-top: clamp(40.0000px, calc(15.6250vw + -80.0000px), 80.0000px);
	padding-bottom: clamp(40.0000px, calc(15.6250vw + -80.0000px), 80.0000px);
  position:relative;
}

.footer .inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* ---- */
.footer .footer_header {
	display:flex;
	flex-wrap:wrap;
	gap:10px 0;
	align-items:center;
	border-bottom:solid 1px #fff;
	padding-bottom:clamp(15.0000px, calc(9.7656vw + -60.0000px), 40.0000px);
	margin-bottom:clamp(15.0000px, calc(9.7656vw + -60.0000px), 40.0000px);
}

.footer .footer_header .pic {
	width:300px;
}

.footer .footer_header .pic img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.footer .footer_header .cnt {
	width:calc( 100% - (300px + 0px) );

	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	gap:0px 0;
}

.footer .footer_header .cnt .lst01 {
	width:100%;

	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	gap:0px 0;
}

.footer .footer_header .cnt .lst01 .item {
	width:100%;
	max-width:300px;
}

.footer .footer_header .cnt .lst01 .item a {
	display:inline-block;
	background:#333333;
	color:#fff;

	text-decoration:none;
	padding:10px;
	width:100%;
	font-size: clamp(14.0000px, calc(0.7813vw + 8.0000px), 16.0000px);
	text-align:center;
}

/* ---- */
.footer .footer_copy {
	display:flex;
	flex-wrap:wrap;
	gap:10px 0;
	align-items:center;
	justify-content:space-between;
}

.footer .footer_copy .copyright {
	color:#fff;
	font-size:12px;
}

.footer .footer_copy .cnt {
}

.footer .footer_copy .cnt .lst01 {
}

.footer .footer_copy .cnt .lst01 .item {
}

.footer .footer_copy .cnt .lst01 .item a {
	text-decoration:none;
	color:#fff;
	font-size:12px;
}

.footer .pageTop{
	width: 100%;

	position:absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
		text-align:right;
}
.footer .pageTop img{
	width:100%;
	max-width:150px;
	height:auto;
}

/* Wide Breakpoint */
@media screen and (max-width: 1000px) {
  .footer .inner {
    width: calc(100% - 30px);
  }
}

/* SP */
@media screen and (max-width: 767px) {
	.footer{
		padding-top:65px;
	}
	.footer .footer_header {
		gap:10px 0;
		flex-direction:column;
		border-bottom:0;
	}



	.footer .footer_header .pic {
		width:100%;
		text-align:center;
	}

	.footer .footer_header .pic img {
	  width: 100%;
	  max-width: 300px;
	}

	.footer .footer_header .cnt {
		width:100%;
		justify-content:center;
		gap:0px 0;
	}
	.footer .footer_header .cnt .lst01 {
		width:100%;
		display:block;
	}
	.footer .footer_header .cnt .lst01 .item{
		margin:0 auto;
	}

	.footer .footer_copy .copyright {
		display:block;
		width:100%;
		padding-bottom:15px;
		border-bottom:solid 1px #fff;
		text-align:center;
	}
	.footer .footer_copy .cnt{
		display:block;
		width:100%;
	}
	.footer .footer_copy .lst01{
		text-align:center;
	}

	.footer .pageTop img{
		max-width:100px;
	}
}

/* ----------
companySec
   ---------- */
.companySec {
	margin-bottom: clamp(80.0000px, calc(68.3594vw + -445.0000px), 255.0000px);
}

.companySec .company_maintitarea {
	background:url(../img/company_maintitarea_pc_bk.png) no-repeat;
	background-position:center center;
	background-size:cover;

	margin-bottom:clamp(60.0000px, calc(15.6250vw + -60.0000px), 100.0000px);
	height:clamp(280.0000px, calc(85.9375vw + -380.0000px), 500.0000px);

	position:relative;
}

.companySec .company_maintitarea .tit {
	width:100%;
	max-width:1400px;
	margin:0 auto;
	color:#fff;
	text-align:right;


	font-size: clamp(70.0000px, calc(35.1563vw + -200.0000px), 160.0000px);
	font-weight:bold;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;

	position:absolute;
	bottom:0;
}

/* ---- */
.companySec .inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

	display:flex;
	gap:15px 4%;
	flex-wrap:wrap;


}

.companySec .pic {
	width:41%;
	order:2;
}

.companySec .pic img {
  width: 100%;
  max-width: 500px;
  height: auto;
  vertical-align:bottom;
}

/* ---- */
.companySec .cnt {
	width:55%;
	order:1;
}

.companySec .cnt .company_logo{
}
.companySec .cnt .company_logo img{
	width:100%;
	height:auto;
	max-width:500px;
}

.companySec .cnt .tbl {
}

.companySec .cnt .tbl tr {
}

.companySec .cnt .tbl th {
	width:140px;
	color:#8A8B8D;
}

.companySec .cnt .tbl td {

	width:calc(100% - 140px);
	padding-top: clamp(10.0000px, calc(5.8594vw + -35.0000px), 25.0000px);
	padding-bottom: clamp(10.0000px, calc(5.8594vw + -35.0000px), 25.0000px);
}
.companySec .cnt .tbl td .tb_cnt{
	border-left:solid 1px #15171B;
	padding-left:15px;
}
/* Wide Breakpoint */
@media screen and (max-width: 1100px) {
  .companySec .inner {
  }
}

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

	.companySec {
		margin-bottom:0;
	}

	.companySec .company_maintitarea {
		background-image:url(../img/company_maintitarea_sp_bk.png);
		margin-bottom:0;
		z-index:1;
	} 
	.companySec .company_maintitarea .tit {
		bottom:50px;
		text-align:left;
	}
	.companySec .inner {
		width: 100%;
		margin-top:-50px;
		position:relative;
		z-index:10;
	}
	.companySec .inner {
		flex-direction:column;

	}

	.companySec .pic {
		width:100%;
		order:2;
		position:relative;
		margin-top:-40px;
		z-index:1;
	}
	 .companySec .pic img{
		 max-width:100%;
	}
	/* ---- */
	.companySec .cnt {
		width: calc(100% - 15px);
		margin:0 ;
		order:1;
		z-index:15;
		background:#fff;
		padding:15px;
	}

	.companySec .cnt .tbl {
	}

	.companySec .cnt .tbl tr {
		display:block;
		width:100%;
	}

	.companySec .cnt .tbl th {
		display:block;
		width:100%;
		margin-bottom:10px;
	}

	.companySec .cnt .tbl td {
		display:block;
		width:100%;
		padding:0;
		margin-bottom:25px;
	}
	.companySec .cnt .tbl td .tb_cnt{
		border-left:none;
		padding-left:0;
	}


}
@media screen and (max-width: 500px) {
	.companySec .company_maintitarea .tit {
		/*font-size:50px;*/
	}
}

/* ----------
aboutSec
   ---------- */
.aboutSec {
	background:#F3F3F3;
	overflow:clip;
}


/* ---- */
.aboutSec .inner {
	position:relative;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding-top: clamp(80.0000px, calc(68.3594vw + -445.0000px), 255.0000px);
	padding-bottom: clamp(80.0000px, calc(68.3594vw + -445.0000px), 255.0000px);
}

/* ---- */
.aboutSec .aboutLst {
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	gap:clamp(30.0000px, calc(7.8125vw + -30.0000px), 50.0000px) 0;
}

/* ---- */
.aboutSec .aboutLst__item {
	width:100%;
}

.aboutSec .aboutLst__item .pic {
	position:relative;
	z-index:1;
}

.aboutSec .pic img {
  width: 100%;
  height: auto;
}

/* ---- */
.aboutSec .aboutLst__item__cnt {
	margin-top:-100px;
}
.aboutSec .aboutLst__item__cnt .aboutLst__item__cnt_inner{
	background:#fff;
	width:100%;
	max-width:630px;
	padding:5%;
	position:relative;
	z-index:10;
}
.aboutSec .aboutLst__item:nth-child(odd) .aboutLst__item__cnt .aboutLst__item__cnt_inner{
	margin-right:calc( 100% - 630px);
}
.aboutSec .aboutLst__item:nth-child(even) .aboutLst__item__cnt .aboutLst__item__cnt_inner{
	margin-left:calc( 100% - 630px);
}

.aboutSec .aboutLst__item__header {
	display:flex;
	gap:10px;
}

.aboutSec .aboutLst__item__header .lbl {
	font-size: clamp(50.0000px, calc(5.8594vw + 5.0000px), 65.0000px);
	font-weight:bold;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	font-family: "Roboto", sans-serif;
	color:#004097;
}

.aboutSec .aboutLst__item__header .tit {
	display:flex;
	flex-direction:column;
	gap:15px;
	border-left:solid 1px #A9A9A9;
	padding-left:15px;
	margin-bottom:clamp(15.0000px, calc(5.8594vw + -30.0000px), 30.0000px);
}

.aboutSec .aboutLst__item__header .tit .en {
	font-family: "Roboto", sans-serif;
	font-size: clamp(10.0000px, calc(1.5625vw + -2.0000px), 14.0000px);
	font-weight:bold;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.aboutSec .aboutLst__item__header .tit .ja {
	font-size: clamp(20.0000px, calc(4.6875vw + -16.0000px), 32.0000px);
	font-weight:bold;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.aboutSec .aboutLst__item__cnt .txt {
	font-size: clamp(15.0000px, calc(1.9531vw + 0.0000px), 20.0000px);
	line-height:2;
}

/* Wide Breakpoint */
@media screen and (max-width: 1100px) {
  .aboutSec .inner {
  }
}

/* SP */
@media screen and (max-width: 767px) {
	.aboutSec .aboutLst__item__cnt {
		margin-top:-5%;
	}
	.aboutSec .aboutLst__item__cnt .aboutLst__item__cnt_inner{
		padding:8%;
	}
	.aboutSec .aboutLst__item:nth-child(odd) .aboutLst__item__cnt .aboutLst__item__cnt_inner{
		max-width:calc(100% - 10%);
	}
	.aboutSec .aboutLst__item:nth-child(even) .aboutLst__item__cnt .aboutLst__item__cnt_inner{
		margin-left:10%;
	}

}





/* ===== scroll reveal（about） ===== */
/* まずは見えない状態 */
.aboutSec .aboutLst__item .pic,
.aboutSec .aboutLst__item__cnt_inner {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

/* 表示状態 */
.aboutSec .aboutLst__item .pic.is-inview,
.aboutSec .aboutLst__item__cnt_inner.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* 画像→テキストを少し遅らせたい場合（任意） */
.aboutSec .aboutLst__item__cnt_inner {
  transition-delay: 0.12s;
}

/* reduce motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .aboutSec .aboutLst__item .pic,
  .aboutSec .aboutLst__item__cnt_inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}



/* ----------
solutionSec
   ---------- */
.solutionSec {
	position:relative;
	margin-bottom:clamp(95.0000px, calc(11.7188vw + 5.0000px), 125.0000px);
}

.solutionSec .eng_lbl_tit {
	color:#F3F3F3;
}

/* ---- */
.solutionSec .inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-top:clamp(100.0000px, calc(46.8750vw + -260.0000px), 220.0000px);
}

/* ---- */
.solutionSec .inner .tit {
	font-weight:bold;
	font-size: clamp(22.0000px, calc(7.8125vw + -38.0000px), 42.0000px);
	margin-bottom:clamp(15.0000px, calc(5.8594vw + -30.0000px), 30.0000px);
}

.solutionSec .inner .txt {
	font-size: clamp(15.0000px, calc(1.9531vw + 0.0000px), 20.0000px);
	line-height:2;
}

/* Wide Breakpoint */
@media screen and (max-width: 1400px) {
  .solutionSec .inner {
    width: calc(100% - 30px);
  }
}

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

/* ----------
flowSec
---------- */
.flowSec {
  width: 100%;
}

.flowSec .inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  margin-bottom: clamp(100px, calc(7.8125vw + 40px), 120px);
  position: relative; /* ナビ配置用 */
  padding: 0 20px;
}

.flowSec .flowSec_tit {
  margin: 0px 0 clamp(35.0000px, calc(33.2031vw + -220.0000px), 120.0000px);
font-family: "Roboto", sans-serif;
  font-size: clamp(25.0000px, calc(8.9844vw + -44.0000px), 48.0000px);
  font-weight:bold;
  color:#004097;
}

/* ---- PC：横並び ---- */
.flowSec .flow__viewport {
  overflow: visible; /* PCは viewport で切らずにそのまま見せる */
}

.flowSec .flow__lst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 40px; /* カラム間 */
}

.flowSec .flow__lst .item {
  flex: 1 1 0;
  padding: 10px 0 10px 40px;
  position: relative;
}

.flowSec .flow__lst .item:after {
	content:"";
	width:20px;
	height:14px;
	background:url(../img/flow_arrow.png) no-repeat center center;
	position:absolute;
	right:-56px;
	top: 50%;
	transform: translateY(-50%);
}
.flowSec .flow__lst .item:last-child:after {
	content:none;
}
/* 縦の仕切り線（2つ目以降） */
.flowSec .flow__lst .item:not(:first-child) {
  border-left: 1px solid #ddd;
}

.flowSec .flow__lst .item .lbl {
	font-family: segoe-ui, sans-serif;
  display: block;
  width:100%;
  max-width:120px;
  text-align:center;
  font-weight:bold;
  margin:0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: #111;
  color: #fff;
}

.flowSec .flow__lst .item .tit {
  margin: 18px 0 12px;
  font-size:18px;
  text-align:center;
  font-weight:bold;
}

.flowSec .flow__lst .item .tit span {
  display: inline-block;
}

.flowSec .flow__lst .item .txt {
  margin: 0;
  font-size:15px;
  line-height:2;
}

/* ナビはPCでは不要なので隠す */
.flowSec .flow__nav {
  display: none;
}

/* Wide Breakpoint */
@media screen and (max-width: 1100px) {
  .flowSec .flow__lst {
    gap: 24px;
  }
  .flowSec .flow__lst .item {
    padding-left: 20px;
  }
	.flowSec .flow__lst .item:after {
		right:-41px;
	}
}
/* ----------
SP：横スクロール + 前後ボタン + 下部スクロールバー表示
---------- */
@media screen and (max-width: 767px) {
  .flowSec .inner {
    padding: 0 0 0 16px; /* 左は寄せる。右は余白なし */
    position: relative;
  }

  /* 右端に余白が出やすいので、見せたい“チラ見せ量”を変数化 */
  .flowSec {
    --flow-peek: 56px; /* 次カードの見え幅（調整OK） */
  }

  /* ナビ表示（右上） */
  .flowSec .flow__nav {
    display: flex;
    gap: 10px;
    position: absolute;
    top: 0;
    right: 16px;
    z-index: 2;
  }

  .flowSec .flow__btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #bbb;
    background: #fff;
    cursor: pointer;
    position: relative;
  }

  .flowSec .flow__btn.is-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
  }

  /* 簡易矢印 */
  .flowSec .flow__btn::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .flowSec .flow__btn.is-prev::before {
    transform: translate(-50%, -50%) rotate(-135deg);
  }

  /* 横スクロール本体（スクロールバー表示） */
  .flowSec .flow__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* スクロールバーを下部に見せるための余白 */
    padding-bottom: 12px;

    overscroll-behavior-x: contain;
    touch-action: pan-x;

    /* スクロールバーを“隠さない” */
    scrollbar-width: auto;     /* Firefox */
    -ms-overflow-style: auto;  /* 旧Edge/IE */
  }

  /* WebKit系（Chrome/Safari）：スクロールバー表示 */
  .flowSec .flow__viewport::-webkit-scrollbar {
    height: 6px; /* 好みで調整 */
  }
  .flowSec .flow__viewport::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 999px;
  }
  .flowSec .flow__viewport::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.45);
    border-radius: 999px;
  }

  /* リスト本体（右側の余白なし） */
  .flowSec .flow__lst {
    list-style: none;
    margin: 0;
    padding: 0; /* 右の余白を作らない */
    display: flex;
    gap: 16px;
  }

  /* 末尾スペーサー：最後のカードも他と同じ左位置に揃えやすくする */
  .flowSec .flow__lst::after {
    content: "";
    flex: 0 0 var(--flow-peek);
  }

  .flowSec .flow__lst .item {
    flex: 0 0 calc(100% - var(--flow-peek)); /* 右に次カードがチラ見え */
    scroll-snap-align: start;

    padding: 10px 0 10px 18px;
    border-left: 1px solid #ddd;
  }

  /* PC用の “2枚目以降だけ線” はSPでは統一 */
  .flowSec .flow__lst .item:not(:first-child) {
    border-left: 1px solid #ddd;

  }
	.flowSec .flow__lst .item:after {
		right:-31px;
	}
}