/* =========================
   Root variables (日本語版 common.css より移植)
========================= */
:root {
	/* 色のリストを共通化 */
	--main-colors: #1ed07f 3%, #3ebeec 26%, #ba8efd 50%, #fb96d8 74%, #feb971 97%;

	/* 基本の「横グラ」を定義 */
	--main-gradient: linear-gradient(90deg, var(--main-colors));
}

/* =========================
   Body
========================= */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-image: url("/img/bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;
}

/* =========================
   Bg animation
========================= */

.bg-circle {
	top: -10%;
	left: -15%;
	position: fixed;
	z-index: -1;

	width: 80vw;
	height: 80vw;
	max-width: 1000px;
	max-height: 1000px;

	background-image: url("/img/bg-circle.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* アニメーションの設定 */
	animation: rotate-circle 30s linear infinite;

	overflow: hidden;
}

/* 回転アニメーションの定義 */
@keyframes rotate-circle {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@media (max-width: 480px) {
	.bg-circle {
		top: 0;
		left: -25%;
		width: 120vw;
		height: 120vw;
	}
}

/* =========================
   Container
========================= */
.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
}

/* =========================
   Header
========================= */
header {
	width: 100%;
}

/* =========================
   Main
========================= */
main {
	padding-bottom: 50px;
	min-height: 600px;
}


/* =========================
   Title(SECTION) (日本語版 common.css より移植、インバウンド調整)
========================= */
.section-title {
	font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
	font-size: 40px; /* 4rem相当 (10px基準値) */
	line-height: 1.5;
	text-align: center;
	position: relative;
	padding-top: 15px;
	letter-spacing: 0.1em;
	margin-bottom: 40px;
	color: #000;
}

.section-title i.notranslate {
	font-style: normal;
}

.section-title:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	border-top: 3px solid;
	border-image: var(--main-gradient) 1;
}

.section-title__sub {
	font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
	display: block;
	font-size: 14px; /* 1.4rem相当 (10px基準値) */
	font-weight: normal;
	letter-spacing: 0.5em;
	color: #000;
}

@media screen and (max-width: 767px) {
	.section-title {
		font-size: 30px; /* 3rem相当 (10px基準値) */
		padding-top: 10px;
		margin-bottom: 25px;
	}
}

/* ===============================================
   Inbound Common Styles (daysche_i & guide_i より移植)
=============================================== */
/* Heading */
h2.basicHeading {
  background: #fd5ea1;
  color: #fff;
}

h3.basicHeading {
  margin-bottom: 40px;
  font-size: 3rem;
  font-weight: 900;
  color: #fc56b5;
  text-align: center;
  line-height: 1.2;
}

h4.basicHeading {
  color: #000 !important;
  display: flex;
  align-items: center;
  line-height: 1;
}

h4.basicHeading::before {
  width: 1.25em;
  height: 1px;
  content: "";
  background-color: #000;
  margin-right: 0.25em;
}

/* Header Lang */
.headerLang {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
}

header .headerLang .column,
.headerLang .column {
  white-space: nowrap;
}

/* Hero Section */
#guideHero {
  width: 100%;
  aspect-ratio: 1920/840;
  background: url(/img/inbound/inbound_cover_pc.webp) no-repeat top center;
  background-size: cover;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  #guideHero {
    aspect-ratio: 1/1;
    background: url(/img/inbound/inbound_cover_sp.webp) no-repeat top center;
    background-size: 100%;
  }
}

/* Access Map */
.AccessMap iframe,
#modalAccess iframe {
  width: 100%;
  aspect-ratio: 3/1;
}

/* Container & ScrollUp (PC Specific to General) */
#container {
  text-align: left;
  padding-top: 0;
}

#scrollUp {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 3;
}

#scrollUp a {
  width: 70px;
  height: 70px;
  display: block;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  background: #55d4fa;
  border: 0;
}

#scrollUp a:hover {
  background: #fff;
  color: #55d4fa;
}

/* フォント依存を排除し、CSSで上向き矢印を描画 */
#scrollUp i {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-top: 4px solid currentColor;
  border-left: 4px solid currentColor;
  transform: translateY(5px) rotate(45deg);
  font-family: unset !important;
}
#scrollUp i::before {
  content: none !important;
}

/* Footer SP */
@media screen and (max-width: 768px) {
  footer {
    background: linear-gradient(rgba(254, 203, 225, 0), 10%, #fecbe1);
    padding: 15px 0 !important;
  }
  footer img {
    width: 50%;
    height: auto;
    margin: 0 auto;
  }
}

/* =========================
   inView Effect (日本語版 common.css より移植)
========================= */
.mask-text {
	clip-path: inset(0 100% 0 0);
	opacity: 0;
	transition:
		clip-path 1.5s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.mask-text.is-inview {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}