@charset "UTF-8";

/*-----------------------------------------------------------
	
	
	contents.css


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


/*==========================================================
   HOME
==========================================================*/

.home {
	position: relative;
	height: 100vh;
	overflow: hidden;
	z-index: 1;
}

@supports (height: 100dvh) {
	.home { height: 100dvh; }
}

.home__logo {
    width: 1433.04px;
    height: 37.7px;
	color: #fff; /* FVでは白ロゴ */
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
}

.home__logo img {
    width: 1433.04px;
    height: 37.7px;
}

@media only screen and (min-width: 768px) {
	
	.home__logo {
		width: 170.52px;
		height: 44.94px;
	}
	
	.home__logo img {
		width: 170.52px;
		height: 44.94px;
	}

}

/*==========================================================
   CONCEPT / SHIPNAME
==========================================================*/

/* 両セクション共通レイアウト */
.concept.section,
.ship-name.section {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;            /* 背景動画より前 */
  text-align: center;    /* 両方中央揃え */
  color: #fff;
}

.concept.section {
  padding: 225px 0 145px;
  top: 0;
}

html[lang^="en"] .concept.section {
  padding: 240px 0 145px;
  top: 0;
}

.ship-name.section {
	padding: 120px 0 255px;
	top: 0;
}

html[lang^="en"] .ship-name.section {
	padding: 125px 0 265px;
	top: 0;
}

@media only screen and (min-width: 768px) {
	
	.concept.section {
	  padding: 300px 0 80px;
	}
	
	html[lang^="en"] .concept.section {
		padding: 300px 0 80px;
	}
	
	.ship-name.section {
	  padding: 198px 0 300px;
	}
	
	html[lang^="en"] .ship-name.section {
		padding: 205px 0 305px;
	}
		
}


#concept .concept__lead,
#concept .concept__text {
  opacity: 0;
  transform: translateY(20px);
  transition: none; /* 重要 CSS遷移が先に走るとチラつく */
  will-change: opacity, transform;
}

html[lang^="ja"] .concept__lead {
	font: 600 1.9rem/1.9 "Noto Serif JP";
	letter-spacing: 0.1em;
	margin-bottom: 34px;
}

html[lang^="en"] .concept__lead {
	font: 300 3.0rem/1.3666 "ABC Arizona Flare";
	letter-spacing: 0.04em;
	margin-bottom: 37px;
}

@media only screen and (min-width: 768px) {
	
	html[lang^="ja"] .concept__lead {
		font-size: 2.4rem;
		font-weight: 500;
		line-height: 1.9;
		margin-bottom: 51px;
	}
	
	html[lang^="en"] .concept__lead {
		font-size: 4rem;
		line-height: 1.3;
		letter-spacing: 0.04em;
		margin-bottom: 53px;
	}
	
}

html[lang^="ja"] .concept__text,
html[lang^="ja"] .ship-name__text {
	font-size: 1.3rem;
	line-height: 2.15;
	letter-spacing: 0.1em;
}

html[lang^="en"] .concept__text,
html[lang^="en"] .ship-name__text {
	font-size: 1.5rem;
	line-height: 1.733;
	letter-spacing: 0.06em;
}

@media only screen and (min-width: 768px) {
	
	html[lang^="ja"] .concept__text,
	html[lang^="ja"] .ship-name__text {
		font-size: 1.4rem;
		line-height: 2.18; /* 1107_コンセプトのみ変更 */
	}
	
	html[lang^="ja"] .ship-name__text {
		line-height: 2.14;
	}

	html[lang^="en"] .concept__text,
	html[lang^="en"] .ship-name__text {
		font-size: 1.6rem;
		line-height: 1.875;
	}
		
}

/* SHIP NAME */
.ship-name__title {
	font-size: 1.3rem;
	letter-spacing: 0.1em;
}

/* SEFU ロゴ */
.ship-name__logo {
  width: 192.92px;
  height: 50.84px;
  margin: 53px auto;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.ship-name__logo-img {
  display: block;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 768px) {
	
	.ship-name__title {
		font-size: 1.5rem;
	}
	
	.ship-name__logo {
		width: 205.97px;
		height: 54.28px;
	}
		
}

/*==========================================================
   SPECIALIST
==========================================================*/

.specialist.section {
	background: #031024;
	color: #fff;
	padding: 99px 0 92px;
}

.specialist.section .section__inner {
	width: 100%;
	padding: 0 6.41vw 9px;
	box-sizing: border-box;
	position: relative;
}

.specialist__title {
	font-size: 4.5rem;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0.1em;
	margin-bottom: 37px;
	color: #B0B9BF;
}

@media only screen and (min-width: 768px) {
	
	.specialist.section {
		background: #031024;
		color: #fff;
		padding: 153px 0 150px;
		padding: 110px 0 150px;
	}
	
	.specialist.section .section__inner {
		width: 100%;
		min-width: 1024px;
		max-width: 1420px;
		padding: 0 50px;
		box-sizing: border-box;
		margin: 0 auto;
	}
	
	.specialist__title {
		font-size: 6rem;
		margin-bottom: 62px;
	}

}

.specialist__grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.specialist__card {
	display: flex;
	flex-direction: column;
	width: calc(50% - 5px);
	margin: 0 10px 90px 0;
	padding-bottom: 20px;
}

.specialist__card:nth-child(2n) {
	margin-right: 0;
}

.specialist__card:nth-child(n+3) {
	margin-bottom: 0;
}
	  
@media only screen and (min-width: 768px) {
	
	.specialist__card {
	  width: calc(96.667% / 4);
	  margin: 0 1.111% 0 0;
	  padding-bottom: 31px;
	}
	
	html[lang^="en"] .specialist__card {
	  padding-bottom: 29px;
	}
	
	.specialist__card:nth-child(2n) {
		margin-right: 1.111%;
	}
	
	.specialist__card:last-child {
		margin-right: 0;
	}

}

/* インタビュー サムネイル */
.specialist__thumb {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  z-index: 10;
}

.specialist__photo__holder {
	background: #000;
	margin-bottom: 10px;
}

.specialist__photo {
	display: block;
	width: 100%;
	aspect-ratio: 319 / 500;
	object-fit: cover;
	transition: opacity .5s ease;
}

.specialist__thumb:hover .specialist__photo {
	opacity: 0.75;
}

@media (max-width: 768px) {
	
	.specialist__thumb {
		pointer-events: none;　/*aタグ無効化*/
	}
	
}
	
@media only screen and (min-width: 768px) {
		
	.specialist__photo__holder {
		margin-bottom: 0;
	}
	
	.specialist__photo__holder::after {
	  content: '';
	  position: absolute;
	  inset: auto 0 0 0;
	  height: 50%;
	  background: linear-gradient(
	    to top,
	    rgba(84, 84, 84, 0.8) 0%,   /* 下端：濃いめ */
	    rgba(84, 84, 84, 0.0) 100%  /* 上端：透明 */
	  );
	  mix-blend-mode: multiply;      /* ★ XDの「乗算」を再現 */
	  pointer-events: none;
	  transition:
	    height 0.8s ease-in-out,
	    background 0.8s ease-in-out;
	}

}


/* プロフィール */
.specialist__profile {
	position: relative;
	color: #B0B9BF;
	z-index: 5;
}

@media only screen and (min-width: 768px) {
	
	.specialist__profile {
		position: absolute;
	    bottom: 17px;
	    left: 20px;
		color: #fff;
	}
	
	html[lang^="en"] .specialist__profile {
		bottom: 12px;
	}
	
}

.specialist__position {
	font-size: 1.3rem;
	line-height: 1.38;
	letter-spacing: .05em;
}

.specialist__name {
    font-size: 2.5rem;
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: .05em;
    margin: 4px 0 8px;
}

.specialist__name-ja {
	font-size: 1.2rem;
	font-weight: 400;
    line-height: 1.16;
	letter-spacing: .1em;
}

@media (min-width:768px) and (max-width:1024px) {
	
  .specialist__position {
    font-size: 1.1rem;
  }

  .specialist__name {
    font-size: 2.0rem;
  }

  .specialist__name-ja {
    font-size: 1.0rem;
  }
  
}

@media (min-width:1025px) and (max-width:1420px) {
	
  .specialist__position {
	font-size: 1.055vw;
  }

  .specialist__name {
	font-size: 1.97vw;
  }

  .specialist__name-ja {
	font-size: 0.99vw;
  }
  
}

@media only screen and (min-width: 1421px) {
	
	.specialist__position {
		font-size: 1.5rem;
	}
	
	.specialist__name {
	    font-size: 2.8rem;
	    margin: 6px 0 8px;
	}
	
	.specialist__name-ja {
		font-size: 1.4rem;
	}
	
}

.specialist__quote {
	font-size: 1.2rem;
	line-height: 1.92;
	letter-spacing: .06em;
	margin-top: 24px;
	color: #B0B9BF;
}

html[lang^="en"] .specialist__quote {
	font-size: 1.3rem;
	line-height: 1.53;
	margin-top: 18px;
}

.specialist__link {
	display: block;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1;
	color: #B0B9BF;
	text-align: left;
	letter-spacing: .1em;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: opacity .3s ease;
}

.specialist__link:hover {
	text-decoration: none;
	opacity: 0.7;
	transition: opacity .3s ease;
}

.specialist__link svg {
    width: auto;
    height: 10.93px;
    margin-right: 5px;
    position: relative;
    top: 1px;
}

@media only screen and (min-width: 768px) {
	
	.specialist__quote {
		font-size: 1.4rem;
		margin-top: 12px;
		letter-spacing: .1em;
	}
	
	html[lang^="en"] .specialist__quote {
		font-size: 1.6rem;
		margin-top: 10px;
		line-height: 1.5;
		letter-spacing: .06em;
	}
	
	.specialist__link {
		font-size: 1.5rem;
		left: auto;
		right: 0;
	}
	
	.specialist__link svg {
	    height: 12.27px;
	}
	
}



/*==========================================================
   Specialist / Video Modal 
==========================================================*/

/* Base overlay */
.video-modal{
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	background: #020914;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility .8s ease;
	will-change: opacity, visibility;
	text-align: right;
}

/* 表示時（背景フェードイン） */
.video-modal.is-open {
	opacity: 1;
	visibility: visible;
}

/* hidden 属性のときは完全に非表示 */
.video-modal[hidden] {
	display: none !important;
}

/* 背景クリック領域（全面） */
.video-modal__backdrop {
	position: absolute;
	inset: 0;
}

/* 中身コンテナ（動画＋ボタン＋スピナー） */
.video-modal__bowl{
  position: relative;
  width: 100%;
  max-width: 990px;
  padding: 24px 24px 32px;
  box-sizing: border-box;
  transform: scale(0.96);
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* 開いたらふわっと拡大＋フェードイン */
.video-modal.is-open .video-modal__bowl{
	transform: scale(1);
	opacity: 1;
}

/* 閉じるとき（念のためリセット） */
.video-modal:not(.is-open) .video-modal__bowl{
	transform: scale(0.96);
	opacity: 0;
}

/* プレイヤー枠 */
.video-modal__player-wrap {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
	position: relative;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* <video> 本体 */
.video-modal__player {
  display: block;
  background: #000;
  width: 100%;
  height: 100%;
  outline: none;
}

/* ローディングスピナー */
.video-modal__spinner{
	position: absolute; 
	inset: 0;
	display: none;
	place-items: center;
	pointer-events: none;
}


.video-modal__spinner::after{
	content: "";
	width: 48px; height: 48px; border-radius: 50%;
	border: 4px solid rgba(255,255,255,.25);
	border-top-color: #fff;
	animation: vmspin 1s linear infinite;
}

@keyframes vmspin{ to { transform: rotate(360deg); } }


/* 閉じるボタン */
.video-modal__close {
	margin: 50px auto 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border: none;
	background: transparent;
	color: #B0B9BF;
	cursor: pointer;
	transition: background 0.25s, color 0.25s, transform 0.1s, opacity .25s ease;
}

.video-modal__close:focus {
	border: none;
}

/* hover時 */
.video-modal__close:hover {
	opacity: .7;
	transition: opacity .25s ease;
}

/* active時の押し込み */
.video-modal__close:active {
  transform: translateY(1px);
}

/* モーダル内：フォーカスリングの扱いを調整 */
.video-modal__close {
  outline: none;             /* 既定の輪郭 */
  -webkit-appearance: none;  /* Safari */
  appearance: none;
}

/* マウス操作時はリングを出さない */
.video-modal__close:focus { outline: none; }

/* キーボード操作時（Tabで来たとき）だけリングを消す */
.video-modal__close:focus-visible {
  outline: none; 
}

/* Firefoxの古い青内枠対策 */
.video-modal__close::-moz-focus-inner { border: 0; }

/* モバイルの青ハイライト対策（任意） */
.video-modal * { -webkit-tap-highlight-color: transparent; }



/* SVGアイコン */
.video-modal__close-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  color: currentColor; /* ボタンの色に追従 */
  transition: color 0.25s;
}

/* テキスト */
.video-modal__close-label {
	font-size: 1.7rem;
	font-family: 'ABC Arizona Flare';
	font-weight: 400;
	letter-spacing: 0.1em;
}



/* レスポンシブ */
@media (max-width: 1024px){
  .video-modal__bowl{ max-width: 92vw; padding: 16px; }
}





/*==========================================================
   mailing-list
==========================================================*/

.mailing-list {
  position: relative;
  color: #B0B9BF;
  text-align: center;
  padding: 164.1vw 0 110px;
  overflow: hidden;
}

.mailing-list__bg {
	width: 100vw;
	height: 164.1vw;
	min-height: 260px;
	position: absolute;
	inset: 0;
	background-image: url('../img/bg_sea_view_sp.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;
}

@media only screen and (min-width: 768px) {
	
	.mailing-list {
	  padding: 31vw 0 193px;
	}
	
	.mailing-list__bg {
		height: 31.04vw;
		background-image: image-set(
			url('../img/bg_sea_view.jpg') 1x,
			url('../img/bg_sea_view@2x.jpg') 2x
		);
	}
	
}

/* セクションタイトル */
.mailing-list__heading {
  font-size: 5.3rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .05em;
  position: relative;
  top: -3rem;
}

.mailing-list__heading .mailing-list__sub {
	display: block;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .1em;
	margin-top: 17px;
}

.mailing-list__heading .mailing-list__sub .list__sub__en {
	font: 300 2rem/1 'ABC Arizona Flare';
	letter-spacing: .1em;
}

@media only screen and (min-width: 768px) {
	
	.mailing-list__heading {
		font-size: 8rem;
		top: -4.4rem;
	}
		
	.mailing-list__heading .mailing-list__sub {
		font-size: 2.3rem;
		margin-top: 20px;
	}
	
	.mailing-list__heading .mailing-list__sub .list__sub__en {
		font-size: 2.6rem;
	}
	
}


#mailing-list.section__inner {
	padding-top: 196px;
}

html[lang^="en"]  #mailing-list.section__inner {
	padding-top: 190px;
}

@media only screen and (min-width: 768px) {
	
	#mailing-list.section__inner {
		padding-top: 260px;
	}
	
	html[lang^="en"]  #mailing-list.section__inner {
		padding-top: 250px;
	}
	
}

/* メール登録タイトル */
.mailing-list__title {
	font-size: 3rem;
	line-height: 1;
	color: #B0B9BF;
	letter-spacing: 0.04em;
	margin-bottom: 34px;
}

html[lang^="en"] .mailing-list__title {
	margin-bottom: 30px;
}

.mailing-list__title-sub {
	display: block;
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	margin-top: 12px;
}

@media only screen and (min-width: 768px) {
	
	/* メール登録タイトル */
	.mailing-list__title {
		font-size: 4.3rem;
		margin-bottom: 63px;
	}
	
	html[lang^="en"] .mailing-list__title {
		margin-bottom: 77px;
	}

	
	.mailing-list__title-sub {
		font-size: 1.6rem;
		font-weight: 600;
		margin-top: 22px;
	}
	
}


/* ====== 入力フィールド（１本のみ） ====== */

.mailing-list__field {
  width: 100%;
  max-width: 340px;
  margin:0 auto 62.5px;
  position:relative;
}

.mailing-list__input[type="email"] {
	background: #031024;
	width:100%;
	font: 300 2rem/1 'ABC Arizona Flare';
	color:#B0B9BF;
	letter-spacing: 0.05em;
	padding:26px 10px 6px;
	border:none;
	border-bottom:1px solid rgba(255,255,255,.55);
	/*iOS RESET*/
	border-radius: 0;
	outline:none;
	transition: border-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

@media only screen and (min-width: 768px) {
	
	.mailing-list__field {
		width: 750px;
		max-width: 750px;
		margin: 0 auto 103.5px;
	}
	
	html[lang^="en"] .mailing-list__field {
		margin: 0 auto 98.5px;
	}
	
	.mailing-list__input[type="email"] {
		font-size: 3.2rem;
	}
	
}


/* バリデーションエラー表示（透明にしておく） */
.mailing-list__error {
	width: 100%;
	font-size: 1.1rem;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: #B52424;
	position: absolute;
	left: 0;
	bottom: -23px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

html[lang^="en"] .mailing-list__error {
	font-size: 1.4rem;
	letter-spacing: 0.06em;
	bottom: -26px;
}

.mailing-list__error.is-active {
  opacity: 1;
}

@media only screen and (min-width: 768px) {
	
	.mailing-list__error {
		font-size: 1.4rem;
		font-weight: 500;
		bottom: -32px;
	}
	
	html[lang^="en"] .mailing-list__error {
		font-size: 1.9rem;
		font-weight: 300;
		bottom: -36px;
	}
	
}

/* Chrome / Safari / Edge 対応: autofill時の背景色を打ち消す */
.mailing-list__input:-webkit-autofill,
.mailing-list__input:-webkit-autofill:hover,
.mailing-list__input:-webkit-autofill:focus,
.mailing-list__input:-webkit-autofill:active {
  transition: background-color 9999s ease-in-out 0s;  /* 背景を透明に見せる */
  -webkit-text-fill-color: #B0B9BF !important;       /* テキスト色を維持 */
  caret-color: #B0B9BF;                              /* カーソル色も合わせる */
}

/* Firefox 対応（主にデフォルトスタイル無効化） */
.mailing-list__input:-moz-autofill {
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.1) inset;
  -moz-text-fill-color: #B0B9BF;
}

/* 入力エラー時：フォーカスの有無に関係なく値の文字色も赤くする */
.mailing-list__input.is-error {
  color: #B52424 !important;          /* フォーカスの有無に関わらず赤 */
  -webkit-text-fill-color: #B52424 !important; /* Safari/Chrome対策 */
  caret-color: #B52424;
  border-bottom-color: #B52424;
}

/* (オートフィル中でも赤を優先) */
.mailing-list__input.is-error:-webkit-autofill {
  -webkit-text-fill-color: #B52424 !important;
}



/* iOS のフォーカス拡大を抑止（任意） */
@supports (-webkit-touch-callout: none) {
  .mailing-list__input { font-size: 16px; } /* iOSのズーム回避ライン */
}

/* ネイティブplaceholderは不可視に（ラベルで代用） */
.mailing-list__input::placeholder{ color:transparent; }



/* 擬似プレースホルダー（＝重ねるラベル） */
.mailing-list__ph {
	font: 300 2rem/1 'ABC Arizona Flare';
	letter-spacing: 0.05em;
	position:absolute;
	top:31px;
	left: 7px;
/* 	left:calc(50% - 127.5px); */
	color:rgba(176,185,191,.5);
	pointer-events:none;
	transform:translateY(0);
	transition:opacity .25s ease, transform .25s ease;
}

html[lang^="en"] .mailing-list__ph {
	left: 7px;
}

.mailing-list__ph .ph-ja {
  	font: 300 1.3rem/1 'Noto Serif JP';
	color:rgba(176,185,191,.5);
	letter-spacing: 0.1em;
	margin-left: 3px;
}

@media only screen and (min-width: 768px) {
	
	.mailing-list__ph {
		font-size: 3.2rem;
		top: 30px;
		left:6px;
	}
	
	html[lang^="en"] .mailing-list__ph {
		left: 6px;
	}
	
	.mailing-list__ph .ph-ja {
		font-size: 1.6rem;
	}
	
}

/* 入力中/入力済みでラベルを消す（CSSのみでOK） */
.mailing-list__input:focus + .mailing-list__ph,
.mailing-list__input:not(:placeholder-shown) + .mailing-list__ph{
  opacity:0;
  transform:translateX(-6px);
}

/* 登録ボタン */
.mailing-list__button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.8rem;
	background:transparent;
	width: 223px;
    padding: 9px 0 10px;
	border:1px solid #D7DEE4;
	transition: background .3s, color .3s, transform .3s;
	cursor: pointer;
}

.mailing-list__button .btn-en {
	font: 300 2.2rem/1 'ABC Arizona Flare';
	color: #B0B9BF;
	letter-spacing: 0.05em;
    position: relative;
    left: 3px;
}

.mailing-list__button .btn-ja {
  	font: 300 1.4rem/1 'Noto Serif JP';
	color: #B0B9BF;
	letter-spacing: 0.1em;
    position: relative;
    top: 1px;
    left: 4px;
}

@media only screen and (min-width: 768px) {
	
	.mailing-list__button {
		width: 248px;
        padding: 10px 0 13px;
        box-sizing: border-box;
	}
	
	.mailing-list__button .btn-en {
		font-size: 2.5rem;
	    position: relative;
	    top: 1px;
	    left: 1px;
	}
	
	.mailing-list__button .btn-ja {
		font-size: 1.6rem;
        position: relative;
        top: 2px;
        left: 2px;
	}
	
}

.mailing-list__button:hover{
	background:#B0B9BF;
}

.mailing-list__button:hover .btn-en,
.mailing-list__button:hover .btn-ja,
.mailing-list__button:hover .icon-play {
	color:#031024;
}

.mailing-list__button:active {
	transform: translateY(1px); 
}

/* SVGアイコン（矢印） */
.mailing-list__button .icon-play {
	width: 1.398rem;
	height: auto;
	color: #B0B9BF;
	margin-left: 18px;
}

@media only screen and (min-width: 768px) {
	
	.mailing-list__button .icon-play {
		width: 1.554rem;
        margin-left: 17px;
        position: relative;
        top: 1px;
        left: 2px;
	}

}


/* メール登録フォーム用（ハニーポット） */
.hp-field {
	position:absolute;
	left:-9999px; 
	width:1px; 
	height:1px; 
	overflow:hidden;
}