@charset "UTF-8";

/* ---------------------------------
 TOP
--------------------------------- */
#top {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
	/*min-height: 930px;*/
}
#top__inner {
	position: relative;
	width: 100%;
	height: 100vh;
	/*min-height: 930px;*/
	padding: 64px 0 0;
	background-image: url("../img/page/home/port_h1380.webp");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}
#top__inner::before {
	transition: opacity 7s ease-in-out;
	z-index: 1;
	opacity: 0.9; 
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #1a2a4b; 
}
/* コンテンツがオーバーレイの上に表示されるようにする */
#top__inner > * {
  position: relative;
  z-index: 2; 
}
/* JavaScriptでこのクラスが追加されたときに「朝」になる */
#top__inner.is-revealed::before {
  opacity: 0;
}
/* JavaScriptで追加するクラス 透明度を0%にして画像を完全に表示 */
#top__inner.is-revealed {
  opacity: 1;
}

/* ---------------------------------
 Logo
--------------------------------- */
#siteId .svg-logo {
	fill: #fff;
}
#header.onScroll #siteId .svg-logo { /* on scroll */
	fill: #595656;
}

/* ---------------------------------
 Main Catch
--------------------------------- */
#mainCatch {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc( 100% - 160px );
	text-align: center;
	color: #fff;
}
#mainCatch__desc {
	line-height: 2.4;
	letter-spacing: 2px;
	font-weight: 400;
	font-size: 17px;
}
#mainCatch__title .char.space {
	overflow: hidden;
	width: 24px;
}

/* 1. タイトル文字の初期設定 */
/* jQueryアニメーションの都合上、初期状態はCSSで非表示にしておくとスムーズです */
#mainCatch__title .char {
	/* display: inline-block; は文字間の崩れを防ぐために入れておくと安心です */
	display: inline-block;
	opacity: 0; 
}
/* 2. サブテキストの初期設定 */
#mainCatch__desc .mainCatch__desc--line {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 1.3s ease-out, transform 1.3s ease-out;
	display: block; 
}
/* * 注意: CSSの transform による移動は、
 * jQueryの .animate() で直接操作できないため、
 * ここでは transition を使った CSSアニメーションと組み合わせます。
 */

/* ---------------------------------
 Top Banner Area
--------------------------------- */
#topLink__Area {
	overflow: hidden;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	width: 1110px;
	margin: 0 auto;
}
#topLink__Area.is-revealed {
	opacity: 1.0; 
}
#topLink__list {
	display: flex;
	justify-content: space-between;
}
.topLink__Item {
	flex: 0 0 375px;
	display: block;
	width: 375px;
	height: 120px;
}
.topLink__Item a {
	display: block;
	width: 360px;
	height: 120px;
	border: solid 1px #fff;
	text-decoration: none;
}
#mainCatch__title {
	margin: 0 0 40px;
	font-weight: 400;
	font-size: 60px;
}
/* ドットナビゲーションのスタイル（追加） */
.slider-dots {
	text-align: center;
	margin-top: 10px;
}
.slider-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 6px;
	background-color: var(--turquoise);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s;
}
.slider-dot.active {
	background-color: var(--water);
}

/* ---------------------------------
 Global Navi
--------------------------------- */
.gNavi__listItem a {
	color: #fff;
}
.gNavi__listItem::after {
	color: #fff;
}

/* ---------------------------------
 Information
--------------------------------- */
#info {
	width: 1280px;
	display: flex;
	justify-content: space-between;
	margin: 100px auto;
	padding: 0 20px;
}
#info__title {
	flex: 0 0 180px;
}
#info__contents {
	flex: 0 0 700px;
}
#info__data {
	flex: 0 0 300px;
}
#info .engTitle {
	letter-spacing: 0;
	font-weight: 600;
	font-size: 30px;
	color: var(--dull-blue);
}

#info__switch--area {
	display: flex;
	justify-content: space-between;
	margin: 0 0 30px;
}
.info__switch {
	transition: 0.4s;
	flex: 0 0 calc( 100% / 4 - 6px );
	padding: 13px 0;
	border-bottom: solid 1px var(--silver);
	letter-spacing: 1.5px;
	font-weight: 600;
	font-size: 15px;
	color: var(--silver);
}
.info__switch.is-active {
	border-bottom: solid 1px #000;
	color: #000;
}
.info__block {
	display: none;
}
.info__item {
	margin: 0 0 20px;
	border-bottom: dotted 1px var(--silver);
	line-height: 1.3;
}
.info__item--date {
	margin: 0 0 15px;
}
.info__item--title {
	margin: 0 0 20px;
}
.info__item--title a {
	text-decoration: none;
	color: #000;
}
.info__item--title a::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	background-image: url("../img/icon/rect-arrow-right.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	vertical-align: -2px;
}
.for-sp-parts {
	display: none;
}
.view-all a {
	transition: 0.4s;
	position: relative;
	display: block;
	width: 200px;
	padding: 10px;
	margin: auto;
	border-radius: 5px;
	background-color: var(--dull-blue);
	text-decoration: none;
	text-align: center;
	font-weight: 600;
	color: #fff;
}
.view-all a:hover {
	background-color: var(--navy);
}
.view-all a span::before {
	position: absolute;
	top: calc( 50% - 4px );
	right: 20px;
	content: "";
	display: inline-block;
	width: 20px;
	height: 7px;
	background-image: url("../img/icon/arrow_long_right_white.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* ---------------------------------
 Section
--------------------------------- */
.homeSection {
	padding: 100px 0;
}
.wrapSection {
	display: flex;
	justify-content: space-between;
	width: 1540px;
	padding: 0 20px;
	margin: auto;
}
/* FX */
#fxSection {
	background-color: var(--dull-blue);
	color: #fff;
}
#fxSection .wrapSection {
	flex-direction: row-reverse;
}
.photo__area {
	position: relative;
	flex: 0 0 600px;
}
.text__area {
	flex: 0 0 calc( 100% - 600px - 60px );
}
.text__area--title {
	display: flex;
	margin: 0 0 60px;
}
.text__area--title br {
	display: none;
}
.sectionTitle_eng { /* h2 > div */
	margin: 0 30px 0 0;
	padding: 0;
	line-height: 1.3;
	letter-spacing: 5px;
	font-weight: 400;
	font-size: 150px;
	color: var(--light-sky);
}
.sectionTitle_jpn { /* h2 > div */
	display: flex;
	align-items: center;
	line-height: 1.3;
	font-size: 24px;
}
.sectionTitle_jpn em {
	display: block;
	margin: 0 0 10px 0; 
}
.sectionTitle_jpn small {
	display: block;
	line-height: 1.3;
	font-size: 14px;
} 
.text__area p {
	margin: 0 0 40px;
	letter-spacing: 2px;
	line-height: 1.9;
	font-size: 17px;
}
.photo__outer { /* figure */
	width: 600px;
	height: 600px;
}
.paraImage {
	object-fit: cover; 
	display: block;
	width: 100%;
	height: 100%;
	box-shadow: 9px 9px 0px rgba(0, 15, 93, 0.4);
}

/* CX */
#cxSection {
	background-color: var(--pale-sky);
	color: #000;
}
#cxSection .sectionTitle_eng {
	color: #fff;
}
.homeSection h3 {
	padding: 13px 5px 11px;
	margin: 0 0 20px;
	border-top: solid 1px #000;
	border-bottom: solid 1px #000;
	line-height: 1.3;
	font-size: 18px;
}
.homeSection h4::before {
	content: "-";
	margin: 0 5px 0 0;
}
#cxSection .paraImage {
	box-shadow: 9px 9px 0px rgba(101, 167, 202, 0.4);
}

/* section navigation */
.snavi {
	display: grid;
	gap: 2px;
	margin: 0 0 15px;
}
.snavi p {
	display: block;
	margin: 0;
}
.column-3 {
	grid-template-columns: repeat(3, 1fr);
	/*flex: 0 0 calc( 100% / 3 - 1px );*/
}
.column-2 {
	grid-template-columns: repeat(2, 1fr);
	/*flex: 0 0 calc( 100% / 2 - 1px );*/
}
.snavi p a {
	transition: 0.4s;
	position: relative;
	display: block;
	padding: 10px;
	border-radius: 5px;
	background-color: var(--navy);
	text-decoration: none;
	text-align: center;
	font-family:
		"Noto Sans JP",
		"游ゴシック Medium", "Yu Gothic Medium",
		"游ゴシック体", "YuGothic",
		"ヒラギノ角ゴシック", "Hiragino Sans",
		"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
		"メイリオ", "Meiryo",
		sans-serif;
	color: #fff;
}
.snavi.snavi-cx p a {
	background-color: var(--dull-blue);
}
.snavi p a:hover {
	background-color: var(--deep-navy);
}
.snavi.snavi-cx p a:hover {
	background-color: var(--navy);
}
.snavi p a::after {
	position: absolute;
	top: calc( 50% - 6px );
	right: 15px;
	content: "";
	display: inline-block;
	width: 8px;
	height: 13px;
	margin: 0 0 0 0;
	background-color: #fff;
	mask: url("../img/icon/gt_thinline.svg") no-repeat 50% 50% / contain;
	-webkit-mask: url("../img/icon/gt_thinline.svg") no-repeat 50% 50% / contain;
	vertical-align: 0px;
}

/* toiawase */
.homeSection h3.toiawase__title {
	margin: 0;
	border-top: 0;
	border-bottom: 0;
	border-top-left-radius : 4px;
	border-top-right-radius : 4px;
	background-color: var(--pale-sky);
	text-align: center;
	color: var(--navy);
}
.homeSection .toiawase-cx h3.toiawase__title {
	background-color: #81baeb;
	color: #fff;
}
.toiawase__content {
	padding: 20px;
	border-bottom-left-radius : 4px;
	border-bottom-right-radius : 4px;
	background-color: #fff;
	color: #000;
}
.toiawase__content--inner {
	display: flex;
	justify-content: space-around;
}
.sectionInfo {
	flex: 0 0 calc( 50% - 20px );
}
#front-page .sectionInfo:first-child {
	margin: 0;
}
.sectionInfo__label {
	padding: 0 0 7px;
	margin: 0 0 10px;
	border-bottom: solid 2px var(--dull-blue);
}
.sectionInfo__label::before {
	content: '';
	display: inline-block;
	width: 25px;
	height: 25px;
	margin-right: 0px;
	background-image: url("../img/icon/bill.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	vertical-align: -4px;
}
.sectionInfo__label span {
	font-weight: 600;
	font-size: 17px;
	color: var(--dull-blue);
}
.sectionInfo__label small {
	display: inline-block;
	letter-spacing: 0.5px;
	margin: 0 0 0 15px;
	font-size: 12px;
}
.sectionInfo__number {
	text-align: center;
}
.toiawase .telnumber {
	letter-spacing: 2px;
	font-weight: 500;
	font-size: 40px;
}
.toiawase .telnumber::before {
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-right: 7px;
	background-image: url("../img/icon/telphone_boldline.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	vertical-align: -4px;
}

/* --- end of css --- */