@charset "utf-8";

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　初版 1.0.0
	┃　2版 1.0.1 update 2024/01/10 (日付はYYYY/MM/DDで記述)
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/* CSS Document */

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ テストコンテンツ
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/
/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ 子要素
	│　
	└──────────────────────────────────────────────────────────┘*/
/*	┌─────────────────────────────┐
	│
	│　□ 子要素
	│
	└─────────────────────────────┘*/

/*	┌…………………………………………………………………………………………………………………………………………………………┐
	︙
	︙　□ 説明
	︙
	└…………………………………………………………………………………………………………………………………………………………┘*/

/*	┏──────────────────────────────────────────────────────────┓
	│
	│　★ 特殊なケース					
	│			
	┗──────────────────────────────────────────────────────────┛*/

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ ウィンドウサイズによってCSSの指定を帰る場合の雛形
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/* xs .col- 指定はしません */

/* sm .col-sm- */
@media screen and (min-width: 576px) {
	
}
/* md .col-md- */
@media screen and (min-width: 768px) {
	
}
/* lg .col-lg- */
@media screen and (min-width: 992px) {
	
}
/* xl .col-xl- */
@media screen and (min-width: 1200px) {
	
}
/* xxl .col-xxl- */
@media screen and (min-width: 1400px) {
	
}


/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ テストコンテンツ
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌──────────────────────────────
	│　
	│　□ 
	│　
	└──────────────────────────────*/

	.template-content{
		/* */
		display:none;
	}

/*	┌──────────────────────────────
	│　
	│　①　このテスト掲載する場合に使用する。
	│　　　完成コンテンツのときには、display:none;を有効にする
	│　
	└──────────────────────────────*/

	.test-content{
		/* */
		display:none;
	}

/*	┌─────────────────────────────┐
	│
	│　□ 説明をするための情報を掲載するdivに適用
	│
	└─────────────────────────────┘*/
	
	.info-text {
		margin:1rem 0.5rem 1rem 0.5rem;/*  */
		border:1px solid #FF0004;
		padding:0.5rem 1rem 3rem 1rem;
		color:#FF0004;
		background-color:#ffffff;
		border-radius:10px;
		position:relative;
		width: calc(100% - 1rem);
	}
	ol.info-text {
		padding-left:2rem !important;
		padding-right:2rem !important;
		}

		.info-text:after {
			content:"※この赤枠は表示内容を説明する情報で、実際のサイトでは表示しません。";
			position:absolute;
			bottom:0.75rem;
			left:1rem;
			padding-left:0.5rem;
			font-size:0.75em;
			background-color: rgba(255,221,221,1.00);
		} 

/*	┌─────────────────────────────┐
	│
	│　□ 説明をするための情報を一括で非表示にする
	│　
	│　上位のタグに対して、下記のCSSを適用する
	│　info-textを子要素として持つ最上位のcontainerタグごと非表示に指定する。
	│
	└─────────────────────────────┘*/

	.info-text {
		/* display:none; */
	}

	div.container-lg.container-inner-space:has(p.info-text),
	div.container-lg.container-inner-space:has(ol.info-text) {
		/* display:none; */
	}

/*	┌…………………………………………………………………………………………………………………………┐
	︙　
	︙　□ animete.css
	︙　
	︙　animete.css は、インライン要素では動かないための対応
	︙　
	└…………………………………………………………………………………………………………………………┘*/

		span.wow {
			display: inline-block;
		}

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 標準 htmlタグ
	┃　
	┃　html { 原則ここに記載しない }
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

body {
	color:rgba(35,35,35,1.00);
	font-family: 'Noto Sans JP', sans-serif;
	scroll-behavior: smooth; /* .anchor-item {scroll-margin-top:100px;}とセットで使用する */
	}

.h1,h1 {
	padding:.25rem 0rem;
}
h1.lead{
	font-weight:bold;
}


.h2,h2 {
	font-weight:bold;
	text-align:center;
	margin-bottom:1.5em;
}

	/* sm .col-sm- */
	@media screen and (min-width: 576px) {
		.h2,h2 {
			text-align:center;
		}
	}
	/* md .col-md- */
	@media screen and (min-width: 768px) {
		.h2,h2 {
			text-align:center;
		}
	}
	/* lg .col-lg- */
	@media screen and (min-width: 992px) {
		.h2,h2 {
			text-align:left;
		}
	}
h2.lead {
	font-size:2.5em ;
	font-weight:bold;
}

.h3,h3 {
	font-size:1.4em;
	font-weight:bold;
	margin:0.25rem 0 1rem 0;
}
h3.lead {
	font-size:2.5em ;
	font-weight:bold;
}
.h4,h4 {
	font-size:1.3rem;
	/* letter-spacing: 0.12em; */
	margin-bottom:1rem;
}
h4.lead {
	font-size:2.5em ;
	font-weight:bold;
}
.h5, h5 {
	font-size:1.05rem;
	font-weight:bold;
}

section {
	margin-bottom:5rem; /* 次の要素との間に余白をつくる */
}

li {
	margin-bottom:0.5rem;
}
	li:last-child {
		margin-bottom:0rem;
	}

p {
	margin: 1rem 1rem;
}
iframe {
	
}

.lead {
	font-weight:400; /* 400=normal 700=bold */
}
/*	 ┌──────────────────────────────
	 │　
	 │　□ darkmodeの対応（暫定）
	 │　
	 └──────────────────────────────*/

		.darkmode h2{color:#eeeeee;}
		.darkmode h2 span.text-muted{color:#dddddd;line-height: 1.2em; margin-top:.5rem;}
		.darkmode p{
			/* filter: brightness(0.9); 【要確認】テキストに対して明度の変更は出来ない。要素内のimgタグ以外の要素を明度90%を指定 */
			color:#eeeeee;
		} 

/*	┌…………………………………………………………………………………………………………………………┐
	︙　
	︙　□ aタグ
	︙　
	︙　要素にマウスが重なったときだけアンダーラインを表示する。img要素では機能しない。
	︙　
	└…………………………………………………………………………………………………………………………┘*/

		a {text-decoration: none;}
		a:hover {text-decoration: underline;}

/*	┌…………………………………………………………………………………………………………………………┐
	︙　
	︙　□ aタグ 
	︙　  target="_blank" でアイコンを追加
	︙　
	︙　　2023/10/25
	︙　	._targetBlankの指定は、a[target="_blank"]:not(img):afterが機能しない。
	︙　	また、下記の指定で消すことも出来ない。（:befor:afterは、擬似クラスの中で最後に記述する）
	︙　	→　https://yossense.com/css-last-child-after/
	︙　	→　https://www.sejuku.net/blog/56193
	︙　	→　https://magazine.techacademy.jp/magazine/26720
	︙　	a[target="_blank"] img:after　{content:none;}
	︙　	（構造上当たり前といえば当たり前ではある）
	︙　	
	︙　　2024/01/10
	︙　	→　https://tedate.jp/coding/match-specific-character-using-css-attribute-selector
	︙　	上記のページを参照することで、urlに「.pdf」が含まれる場合は、そのリンクの後方にPDFアイコンを設置する事ができる。
	︙　	
	︙　
	└…………………………………………………………………………………………………………………………┘*/

/*	┌─────────────────────────────┐
	│
	│　□ target="_blank"
	│
	└─────────────────────────────┘*/

		a._targetBlank[target="_blank"]:after,
		p a[target="_blank"]:after,
		li a[target="_blank"]:after,
		figcaption a[target="_blank"]:after {
			content: "\F6D2";
			font-family: bootstrap-icons;
			margin-left:0.25em;
			margin-right:0.25em;
			vertical-align: bottom;
		}

/*	┌─────────────────────────────┐
	│
	│　□ target="_PDF"
	│
	└─────────────────────────────┘*/

		a._targetPDF[target="_PDF"]:after,
		li a[target="_PDF"]:after,
		figcaption a[target="_PDF"]:after {
			content: "\F63E";
			font-family: bootstrap-icons;
			margin-left:0.5em;
			vertical-align: bottom;
		}

/*	┌─────────────────────────────┐
	│
	│　□ target="_Youtube"
	│
	└─────────────────────────────┘*/

		a._targetYoutube[target="_Youtube"]:after,
		li a[target="_Youtube"]:after,
		figcaption a[target="_Youtube"]:after {
			content: "\F62B";
			font-family: bootstrap-icons;
			margin-left:0.5em;
			vertical-align: bottom;
		}

/*	┌─────────────────────────────┐
	│
	│　□ 上記の設定を、無効にする場合に記述する。
	│
	└─────────────────────────────┘*/

		/* ヘッダのnav-itemは、 */
		a[target="_blank"].after-none-icon:after,
		header li.nav-item a[target="_blank"]:after {
			content: "";
			margin-left:0em;
		}

/*	┌…………………………………………………………………………………………………………………………┐
	︙　
	︙　□ anchor（#）の設定（a href="path/to/page.htm#anchor"）
	︙　
	︙　aタグの#で指定するページ無いリンクで、ヘッダが固定している場合に隠れてしまう。
	︙　これを回避するために<a name="XXXXXX" id="XXXXXX" class="anchor-item"></a>のように
	︙　classに設置することで、このリンクを呼び出された場合は指定のマージンを取った位置で頭出しするようになります。
	︙　
	︙　固定ヘッダがある場合に、「scroll-behavior: smooth;」とともに使用します。bodyタグに設定済み
	︙　
	└…………………………………………………………………………………………………………………………┘*/

	.anchor-item {scroll-margin-top:100px;}

/*	┌…………………………………………………………………………………………………………………………┐
	︙　
	︙　□ list-style
	︙　
	︙　lstyleは、list-sytle　の略
	︙　
	└…………………………………………………………………………………………………………………………┘*/
/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ list-style（略：lstyle）の設定
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌─────────────────────────────┐
	│　□ リストのCSS設定は残し、リストのスタイルのみ削除。
	└─────────────────────────────┘*/

		ul.lstyle-none {padding-left:0.2em;}
			ul.lstyle-none li {list-style-type:none; padding-left:0;}

/*	┌─────────────────────────────┐
	│　□ リストのCSS設定は残し、、リストのスタイルを※にする。
	└─────────────────────────────┘*/

		ul.lstyle-kome {padding-left: 1em;}
			ul.lstyle-kome li {list-style-type:"※"; padding-left:0.25rem;}


/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ header要素
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌─────────────────────────────┐
	│
	│　□ 基本設定
	│
	└─────────────────────────────┘*/

		ul.nav.nav-color-01 li.nav-item a.nav-link  {
			color:#7C92B1;
			text-decoration:none;
				background-color:transparent;
		}

		ul.nav.nav-color-01 li.nav-item a.nav-link:hover  {
			color:#0060FF;
			text-decoration:underline;
			/*text-shadow:
				1px 0px 0px rgba(255,255,255,0.95),
				-1px 0px 0px rgba(255,255,255,0.95),
				0px -1px 0px rgba(255,255,255,0.95),
				-1px 0px 0px rgba(255,255,255,0.95);*/
		}

			ul.nav.nav-color-01 li.nav-item a.nav-link.active {
				color:#0060FF;
				font-weight:bold;
				position:relative;
				padding:0.5rem 1rem 0.25rem 1rem;
						
						background-color:rgba(0,96,255,0.10);
			}
/* 
				ul.nav.nav-color-01 li.nav-item a.nav-link.active::after {
						position:absolute;
						
						background-color:#0060FF;
						
						width:100%;
						height:100%;
						top:0;
						left:0;
					
						color:#0060FF;
						font-weight:bold;
				}
 */
			ul.nav.nav-color-01 li.nav-item a.nav-link.active:hover {
				font-weight:bold;
				text-decoration:none;
			}




/*	┌…………………………………………………………………………………………………………………………………………………………┐
	︙
	︙　□ よくある質問
	︙
	└…………………………………………………………………………………………………………………………………………………………┘*/

		/* QAの設置 */
		.faqMark-01,
		dl.faqMark-01{

		}

			.faqMark-01 .question,
			dl.faqMark-01 dt {
				position: relative;
				padding-left:2.50rem;
			}

				.faqMark-01 .question::before,
				dl.faqMark-01 dt::before {
					position: absolute;
					content: "Q.";
					top:1rem;
					left:1.25em;
				}

			.faqMark-01 .anser,
			dl.faqMark-01 dd {
				position: relative;
			}

				.faqMark-01 .anser::before,
				dl.faqMark-01 dd::before{
					position: absolute;
					content: "A.";
					top:0;
					left:1.25em;

				}


/*	┌──────────────────────────────
	│　■ MARKETING CONTENT
	│　Center align the text within the three columns below the carousel
	└──────────────────────────────*/

.marketing h2 {
	font-weight: 400;
	text-align: center;
}

.marketing .row div {
	text-align: center;
	margin-bottom: 1rem;
}
	.marketing .row div:last-child {
		margin-bottom: 3rem;
	}

	.marketing .row div p {
		margin-right: .75rem;
		margin-left: .75rem;
		text-align: center;
		min-height:5em;
		line-height:130%;
	}

	/* lg .col-lg- */
	@media screen and (min-width: 768px) {
		.marketing .row div p {
			margin-right: .75rem;
			margin-left: .75rem;
			text-align: center;
			min-height:7em;
		}
		.marketing .row div p:last-child {
			margin-bottom: 0rem;
			min-height:1em;
		}
	}

/*	┌──────────────────────────────
	│　
	│　■ Google Fonts Material Icons CSS
	│　 (https://developers.google.com/fonts/docs/material_icons?hl=ja)
	│　
	│　■ Bootstrap Icons
	│　 (https://icons.getbootstrap.jp/)
	│　
	│　Font Awesomeは使えません。
	│　
	└──────────────────────────────*/
.setIcon {
	word-wrap: break-word;
    display: inline-block;
}
.setIcon::before {
	font-style: normal;
	font-weight: 400;
	margin-left:0.250em;
	margin-right:0.25em;
	vertical-align: bottom;
}

/* 飛行機アイコンの設置 */

.icon-airplane-export::before {
    content: '\e905'; /* 追記したコード */
	font-family: 'Material Icons';
	color:rgba(0,27,152,1.00);
}

.icon-airplane-import::before {
	content: '\e904'; /* 追記したコード */
	font-family: 'Material Icons';
	color:rgba(0,27,152,1.00);
}

/* 船アイコンの設置 */
.icon-ship::before {
	content: '\e532'; /* 追記したコード */
	font-family: 'Material Icons';
	color:rgba(0,27,152,1.00);
}

/* 箱の設置 */
.icon-box::before {
	content: '\F1C7'; /* 追記したコード */
	font-family: 'bootstrap-icons';
	color:rgba(0,27,152,1.00);
}