@charset "UTF-8";

.service_main_img {
	margin-top: 50px;
	margin-bottom: 30px;
}
.services_box .service_list {
	margin-top: 50px;
	margin-bottom: 50px;
}

.services_box .service_list > li {
	margin-bottom: 50px;
	padding: 40px 30px;
	background-color: #F0F2F9;
	border-radius: 20px;
}
.services_box .service_list  > li:last-child {
	margin-bottom: 0;
}
.services_box .service_list li h3 {
	position: relative;
	margin-bottom: 1.0em;
	padding-left: 1.2em;
	font-size: 23px;
	color: #061760;
}
.services_box .service_list li h3:before {
	position: absolute;
	left: 0;
	top: 0.7em;
	content: '';
	width: 0.7em;
	height: 0.7em;
	background-color: #061760;
	border-radius: 100px;
}

@media screen and (max-width: 767px) {
	.service_main_img {
		margin-top: 30px;
		margin-bottom: 20px;
	}
	.services_box .service_list {
		margin-top: 30px;
		margin-bottom: 40px;
	}

	.services_box .service_list > li {
		margin-bottom: 30px;
		padding: 20px 15px;
		border-radius: 10px;
	}
	.services_box .service_list li h3 {
		font-size: 20px;
		line-height: 1.4;
	}
	.services_box .service_list li h3:before {
		top: 0.4em;
	}


}

/*-----▼ 追従フッター 電話番号2件対応 ▼-----*/
.ctaBox .area {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* SP：上段に電話2件／下段にお問い合わせ */
@media screen and (max-width: 767px) {
	.ctaBox {
		display: block;
		text-align: center;
		padding: 0;
	}
	.ctaBox__tel {
		padding: 6px 0 4px;
	}
	.ctaBox__tel--nums {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
	}
	.ctaBox__tel--nums a.phone {
		width: 50%;
		font-size: 18px;
		line-height: 1.2;
		padding: 0 2px;
		border-right: 1px solid #ccc;
	}
	.ctaBox__tel--nums a.phone:last-child {
		border-right: none;
	}
	.ctaBox__tel--nums a.phone:before {
		width: 20px;
		height: 20px;
		margin-right: 2px;
		vertical-align: -3px;
	}
	/* アイコンと地域ラベルを1行にまとめ、番号を下段に */
	.ctaBox__tel--nums a.phone {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.ctaBox .area {
		width: 100%;
		order: -1;
	}
	.ctaBox .date {
		font-size: 11px;
		margin-top: 2px;
	}
	.ctaBox .lang {
		font-size: 10px;
	}
	.ctaBox a.mail {
		display: block;
		width: 100%;
		padding: 8px 0;
		margin-top: 4px;
		border-top: 1px solid #ccc;
		text-align: center;
	}
	.ctaBox a.mail img {
		width: 22px;
		margin-right: 6px;
		display: inline-block;
		vertical-align: -4px;
	}
	.ctaBox a.mail p {
		display: inline-block;
		vertical-align: middle;
	}
	/* 追従バーが2段になった分、フッター下の余白を確保 */
	.Footer {
		padding-bottom: 116px;
	}
}

/* PC：白いカード内に電話2件を縦並び */
@media screen and (min-width: 768px) {
	.ctaBox__tel {
		width: 250px;
		background: #fff;
		box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.1);
		padding: 6px 0 10px;
	}
	.ctaBox a.phone {
		width: 100%;
		background: transparent;
		box-shadow: none;
		padding: 8px 0;
		font-size: 19px;
	}
	.ctaBox a.phone + a.phone {
		border-top: 1px solid #e5e5e5;
	}
	.ctaBox a.phone:before {
		width: 26px;
		height: 26px;
	}
	.ctaBox .area {
		margin-right: 4px;
	}
	.ctaBox .date {
		margin-top: 8px;
	}
}

/*-----▼ TOP：featureセクション上部のグラデーション途切れ対策 ▼-----*/
/* 背景画像(aboutBg.webp)はcoverで上下がクロップされるため、
   画面幅が広いと画像が持つ白フェードが白になりきる前に切れて段差が出る。
   疑似要素でCSS側にもフェードを重ね、常に白で終わるようにする。 */
.about::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 42%;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
	pointer-events: none;
	z-index: 1;
}

/* グラデーション(z-index:1)より前面に強みセクションを出す
   ※.featureはstyle.cssで既にposition:relative */
.feature {
	z-index: 2;
}

@media screen and (max-width: 767px) {
	.about::after {
		height: 30%;
	}
}

/*-----▼ ノートPC〜タブレット幅(768〜1199px)の横スクロール対策 ▼-----*/
/* style.css の .wrapper{min-width:1200px} により768〜1199pxで必ず横スクロールが
   発生していたため解除。あわせて contentBox 系の固定幅を max-width 化し、
   ウィンドウ幅に追従して縮むようにする（* { box-sizing:border-box } 前提）。 */
@media screen and (min-width: 768px) {
	.wrapper {
		min-width: 0;
	}
	.contentBox,
	.contentBoxPc {
		width: 100%;
		max-width: 1440px;
	}
	.contentBoxM,
	.contentBoxMPc {
		width: 100%;
		max-width: 1000px;
	}
	.contentBoxL,
	.contentBoxLPc {
		width: 100%;
		max-width: 1200px;
	}
}

/*-----▼ 代表挨拶ページ：社長名鑑（industry_article）SPレイアウト変更 ▼-----*/
/* SPは背景画像をやめ、見出しの上にimgタグで表示する。
   PCは従来どおり .industry_article__wrap の背景画像を使用（img側はhidePcで非表示）。 */
@media screen and (max-width: 767px) {
	.industry_article__wrap {
		background: none;
	}
	.industry_article__wrap--img {
		width: 100%;
	}
	.industry_article__wrap--img img {
		display: block;
		width: 100%;
		height: auto;
		-o-object-fit: cover;
		object-fit: cover;
		/* 枠線6px・角丸25px の内側に合わせて上側だけ角丸 */
		border-radius: 19px 19px 0 0;
	}
	.industry_article__wrap--text {
		padding-top: 24px;
	}
}

/*-----▼ 代表挨拶・代表社員挨拶：レイアウト刷新（左テキスト5 : 右画像5）▼-----*/
/* 旧 .messagePage__item は画面端まで画像をfloatさせる裁ち落とし構造で、
   幅を狭めると画像が画面外へ飛び出していたため、コンテナ内に収める構造へ変更。
   gap は IE / 旧Safari 非対応のため margin で間隔を作っている。
   1024px以下は縦積み（画像が上）。 */
/* セクション間の余白は「会社案内グループのセクション間隔統一」で付ける */
.messageBlock__list {
	margin-top: 0;
	margin-bottom: 0;
}

.messageBlock {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 114px;
}

.messageBlock:last-child {
	margin-bottom: 0;
}

/* 左47% + 余白6% + 右47% = 100%（すべて%指定） */
.messageBlock__text {
	-ms-flex: 0 0 47%;
	flex: 0 0 47%;
	max-width: 47%;
	min-width: 0;
	margin-right: 6%;
}

.messageBlock__img {
	-ms-flex: 0 0 47%;
	flex: 0 0 47%;
	max-width: 47%;
	min-width: 0;
	position: relative;
}

.messageBlock__img img {
	display: block;
	width: 100%;
	height: auto;
}

/* EPA認定ロゴ（画像右下に重ねる） */
.messageBlock__badge {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 140px;
	height: auto;
}

.messageBlock__title {
	font-size: 40px;
}

.messageBlock__desc {
	margin-top: 24px;
	font-size: 18px;
	line-height: 2;
}

.messageBlock__name {
	font-size: 20px;
	font-weight: 600;
	margin-top: 24px;
}

/* 画像を左・テキストを右にしたい場合は li に付与する */
.messageBlock--reverse {
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.messageBlock--reverse .messageBlock__text {
	margin-right: 0;
	margin-left: 6%;
}

@media screen and (max-width: 1024px) {
	.messageBlock__list {
		margin-top: 0;
		margin-bottom: 0;
	}
	.messageBlock,
	.messageBlock--reverse {
		-ms-flex-direction: column;
		flex-direction: column;
		margin-bottom: 48px;
	}
	.messageBlock__text,
	.messageBlock--reverse .messageBlock__text,
	.messageBlock__img {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
	}
	/* SPは画像を上に */
	.messageBlock__img {
		-ms-flex-order: -1;
		order: -1;
	}
	.messageBlock__badge {
		width: 90px;
	}
	.messageBlock__title {
		font-size: 30px;
		margin-top: 16px;
	}
	.messageBlock__desc {
		margin-top: 14px;
		font-size: 16px;
	}
	.messageBlock__name {
		font-size: 18px;
		margin-top: 14px;
	}
}

/*-----▼ 会社概要：沿革タイムラインのピル高さを固定 ▼-----*/
/* .history__wrap div は align-items 未指定＝stretch のため、
   dd が2行になる行で dt（年月のピル）が引き伸ばされて高さが変わっていた。
   SP側(style.css)には既に align-items:center があるのでPCに合わせる。 */
.history__wrap div {
	-ms-flex-align: center;
	align-items: center;
}

/* 年月の文字数に関わらずピルの高さを一定にする */
.history__wrap dt {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	-ms-flex-item-align: center;
	align-self: center;
}

@media screen and (max-width: 767px) {
	/* 沿革の年月（style.cssのSP指定は14px） */
	.history__wrap dt {
		font-size: 13px;
	}
}

/*-----▼ お問い合わせ確認画面（マルチステップ最終ステップ）▼-----*/
/* 表組みは style.css の .table_confirm をそのまま使用。
   添付資料も他の項目と同じ tr として並べるため、file入力と注釈だけ整える。 */
.table_confirm td {
	line-height: 1.8;
}

.table_confirm input[type="file"] {
	font-size: 14px;
	max-width: 100%;
}

.table_confirm .fileNote {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #777;
	line-height: 1.6;
}

/* 「入力内容を修正する」リンク */
.backBtn {
	display: table;
	margin: 24px auto 0;
	font-size: 15px;
	font-weight: 600;
	color: #061760;
	text-decoration: underline;
	cursor: pointer;
}

.backBtn:hover {
	text-decoration: none;
}

/* style.css の .table_confirm はPC用指定のみ（width:60% / tr:flex）のため
   SPでは縦積みにする */
@media screen and (max-width: 767px) {
	.table_confirm {
		width: 100%;
	}
	.table_confirm tr {
		display: block;
		margin-bottom: 18px;
	}
	.table_confirm th {
		display: block;
		width: 100%;
		margin-bottom: 4px;
	}
	.table_confirm td {
		width: 100%;
	}
	.backBtn {
		font-size: 14px;
	}
}

/*-----▼ 通関サービス：STEPの縦線の途切れを修正 ▼-----*/
/* .customsPage__wrap dt:after は bottom:0 + margin-bottom:-90px で
   「円の高さ(=height:100%)ぶんの線を、円の下端から90px下まで」引いている。
   PCは円が90pxなので隙間ゼロだが、SPは円が70pxのため 90-70=20px の
   隙間が円の直下に出ていた。SPの円サイズに合わせる。 */
@media screen and (max-width: 767px) {
	.customsPage__wrap dt:after {
		margin-bottom: -70px;
	}
}

/*-----▼ 採用情報：集合写真が左右で切れる問題 ▼-----*/
/* style.css のSP指定 .statement__wrap--img img に aspect-ratio:1 があり、
   2140×1200の横長写真を正方形にcoverしていたため左右計273px（約44%）を
   切り落としていた。両端に人が写っているので写真本来の比率に戻す。 */
@media screen and (max-width: 767px) {
	.statement__wrap--img img {
		width: 100%;
		height: auto;
		aspect-ratio: auto;
	}
}

/*-----▼ statementセクション：SPの見出し〜コンテンツ間の余白を詰める ▼-----*/
/* .statement__wrap2 の margin:48px 0 がPC・SP共通で効いており、
   SPでは同じ cmnTtl__type3 を使う導入セクション（24px）の倍あって
   間延びしていた。SPのみ24pxに揃える。 */
@media screen and (max-width: 767px) {
	.statement__wrap2 {
		margin: 24px 0;
	}
}

/*-----▼ 見出しクラスごとの下余白を統一 ▼-----*/
/* 余白は見出しではなく「次の要素の margin-top」で個別に付けられており、
   同じ cmnTtl__type4 でも 50/48/32/64/0px と5種類に分かれていた。
   同じ要素が別タイプの見出しの下にも来るため、隣接セレクタで指定する。
   統一値は現状の最多数派に合わせている（PC: type3=32 / type4=48 / type5=32）。 */
@media screen and (min-width: 768px) {
	.cmnTtl__type3 + .statement__wrap2 {
		margin-top: 32px;
	}
	.cmnTtl__type4 + .service_main_img,
	.cmnTtl__type4 + .customsPage__wrap,
	.cmnTtl__type4 + .esgPage__text,
	.cmnTtl__type4 + .rinen__wrap,
	.cmnTtl__type4 + .headcopy,
	.cmnTtl__type4 + .recruitPage__voices--wrap,
	.cmnTtl__type4 + .recruitPage__wrap,
	.cmnTtl__type4 + .outlinePage__list,
	.cmnTtl__type4 + .statement__wrap,
	.cmnTtl__type4 + .approach__head,
	.cmnTtl__type4 + .contentBoxM,
	.cmnTtl__type4 + .tab-wrapper {
		margin-top: 48px;
	}
	.cmnTtl__type5 + .customsPage__docs--wrap,
	.cmnTtl__type5 + .services__area--list {
		margin-top: 32px;
	}
	/* packing系は見出し自体が24pxの下余白を持つ構造のため差分のみ */
	.cmnTtl__type5 + .autoImg,
	.cmnTtl__type5 + .mouse-over {
		margin-top: 8px;
	}
}

@media screen and (max-width: 767px) {
	.cmnTtl__type4 + .service_main_img,
	.cmnTtl__type4 + .customsPage__wrap,
	.cmnTtl__type4 + .esgPage__text,
	.cmnTtl__type4 + .rinen__wrap,
	.cmnTtl__type4 + .headcopy,
	.cmnTtl__type4 + .recruitPage__voices--wrap,
	.cmnTtl__type4 + .recruitPage__wrap,
	.cmnTtl__type4 + .outlinePage__list,
	.cmnTtl__type4 + .statement__wrap,
	.cmnTtl__type4 + .approach__head,
	.cmnTtl__type4 + .contentBoxM,
	.cmnTtl__type4 + .tab-wrapper {
		margin-top: 24px;
	}
	.cmnTtl__type5 + .customsPage__docs--wrap,
	.cmnTtl__type5 + .services__area--list {
		margin-top: 24px;
	}
	/* SPは見出し自体が14pxの下余白を持つため差分のみ */
	.cmnTtl__type5 + .autoImg,
	.cmnTtl__type5 + .mouse-over {
		margin-top: 10px;
	}
}

/*-----▼ 会社概要：各種認証・取り組みがSPで2カラムになる際の行間 ▼-----*/
/* .certification__wrap は flex-wrap で2列に折り返すが row 方向の間隔が
   0pxで、1行目と2行目が密着していた。横方向の間隔（23px）に合わせる。
   margin方式だと最終行の相殺で下のボタンまで詰まるため row-gap を使用。
   未対応ブラウザでは現状（間隔0）に戻るだけで、崩れは起きない。 */
@media screen and (max-width: 767px) {
	.certification__wrap {
		row-gap: 24px;
	}
}

/*-----▼ お問い合わせフォームの注記 ▼-----*/
/* 添付ファイルはマルチステップの仕様上、最終ステップ（確認画面）にしか
   置けないため、入力画面ではその旨をtd内で案内する。
   .contactPage__mail td / .contactPage td の color:#bbb（プレースホルダ用の
   淡色）を打ち消すため、td付きセレクタで指定している。 */
td.formNote {
	background: none;
	color: #282828;
	font-size: 15px;
	height: auto;
	padding: 8px 0;
}

@media screen and (max-width: 767px) {
	td.formNote {
		font-size: 14px;
	}
}

/*-----▼ 会社案内グループ（代表挨拶・会社概要・ESG）のセクション間隔を統一 ▼-----*/
/* 3ページでセクション間隔が PC 96/114/128、SP 24/32/48/64 とバラバラだったため、
   body_class() の page-id で対象を絞り、余白を margin-top に一本化する。
   page-id-28=代表挨拶 / page-id-30=会社概要 / page-id-32=ESGの取り組み */
.page-id-28 main > section,
.page-id-28 main > div,
.page-id-30 main > section,
.page-id-30 main > div,
.page-id-32 main > section,
.page-id-32 main > div {
	margin-bottom: 0;
}

/* mtLPc / mtXLPc などのユーティリティが !important で入っているため、
   統一側も !important で上書きする */
.page-id-28 main > section + section,
.page-id-28 main > section + div,
.page-id-30 main > section + section,
.page-id-30 main > section + div,
.page-id-32 main > section + section,
.page-id-32 main > section + div {
	margin-top: 128px !important;
}

/* ページ見出し（childHead）の直下は他ページと同じ間隔を維持する */
.page-id-28 main > .childHead + section,
.page-id-30 main > .childHead + section,
.page-id-32 main > .childHead + section {
	margin-top: 60px !important;
}

/*-----▼ 通関サービス：SPでstatementセクションの上余白がない ▼-----*/
/* mtXLPc はPC専用のため、SPでは前のセクションと密着していた（間隔0px）。
   国内輸送サービスの32pxに合わせる。 */
@media screen and (max-width: 767px) {
	.customsPage__flow + .statement {
		margin-top: 32px;
	}
	.page-id-28 main > section + section,
	.page-id-28 main > section + div,
	.page-id-30 main > section + section,
	.page-id-30 main > section + div,
	.page-id-32 main > section + div,
	.page-id-32 main > section + section {
		margin-top: 48px !important;
	}
	.page-id-28 main > .childHead + section,
	.page-id-30 main > .childHead + section,
	.page-id-32 main > .childHead + section {
		margin-top: 40px !important;
	}
}

/*-----▼ 会社案内：画像コンテナの高さ固定を解除＋SP切替を1024pxへ ▼-----*/
/* style.css のSP指定では .companyPage__text だけ height:auto にしていて、
   .companyPage__item--img の height:400px が残っていた。画像の実高は
   223〜296pxなので最大177pxの死んだ余白ができ、テキストカードの
   margin-top:-32px が画像に届かず宙に浮いていた。
   あわせて、縦積みへの切り替えを767px→1024pxに広げる。 */
@media screen and (max-width: 1024px) {
	.companyPage__wrap {
		margin-top: 48px;
		margin-bottom: 48px;
	}
	.companyPage__item {
		margin-bottom: 32px;
	}
	.companyPage__item--img {
		float: none;
		width: 100%;
		/* 高さ固定を解除し、画像にぴったり合わせる */
		height: auto;
	}
	.companyPage__item--img.right {
		float: none;
	}
	.companyPage__item--img img {
		display: block;
		width: 100%;
		height: auto;
	}
	.companyPage__item--textBox,
	.companyPage__item--textBox.right {
		display: block;
	}
	.companyPage__text,
	.companyPage__text.right {
		padding: 32px 24px 24px 24px;
		margin: -32px auto 0;
		height: auto;
	}
	.companyPage__text .title {
		font-size: 30px;
	}
	.companyPage__text .desc {
		margin-top: 14px;
		font-size: 16px;
	}
}

.Footer__copyYearContainer--wrap {
	justify-content: flex-end;
	-ms-flex-pack: end;
}

@media (max-width: 1024px) {
	.GNav__menu .mainMenu__list--lang {
		padding: 16px 0 32px;
	}
	.GNav__menu .mainMenu__list--lang .gtranslate_wrapper {
		display: inline-block;
		background: #fff;
		border-color: #fff;
	}
	.GNav__menu .mainMenu__list--lang .gt_selector {
		padding: 6px 14px;
		color: #061760;
	}
}

.FixedFt__toggle {
	display: none;
}

@media screen and (min-width: 768px) {
	.FixedFt__toggle {
		display: block;
		width: 250px;
		margin: 0 0 6px auto;
		padding: 6px 0;
		border: none;
		border-radius: 4px 0 0 4px;
		background: #061760;
		color: #fff;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-align: center;
		cursor: pointer;
		box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.1);
		transition: .3s;
	}
	.FixedFt__toggle:hover {
		background: #6A83F4;
	}
	.FixedFt__toggle--txt {
		position: relative;
		padding-right: 20px;
	}
	.FixedFt__toggle--txt:after {
		position: absolute;
		right: 0;
		top: 50%;
		content: '';
		width: 7px;
		height: 7px;
		margin-top: -6px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		transition: .3s;
	}
	.FixedFt__toggle.is-closed .FixedFt__toggle--txt:after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}
}