/* =========================================================
   トップページ(HOME)
   現行サイト(comojapan-tokyo.com/index.html)のトップページと同じ見た目を
   再現するためのスタイルです。現行サイトのCSS(style.css)の寸法・色・余白を
   そのまま踏襲しています(rem指定はpxに換算)。
   他ページのスタイルと干渉しないよう、すべて .home-top 配下に限定しています。
   ========================================================= */

.home-top {
	position: relative;
	isolation: isolate; /* ::before の z-index:-1 をこの要素の内側に閉じ込める */
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Lato, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 13px;
	line-height: 1.66667;
	font-weight: 400;
	color: #131313;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.home-top *,
.home-top *::before,
.home-top *::after {
	box-sizing: border-box;
}

.home-top h2,
.home-top p {
	margin: 0;
}

.home-top figure {
	margin: 0;
	display: block;
}

.home-top section {
	display: block;
}

.home-top img {
	border: 0;
	vertical-align: middle;
}

.home-top a {
	color: #02aedf;
	text-decoration: none;
	background-color: transparent;
}

.home-top a:hover {
	color: #02aedf;
	text-decoration: none;
}

.home-top .img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

.home-top .center-block {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

/* ---- レイアウト(グリッド) ---- */
.home-top .container-lg {
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}

.home-top .row {
	margin-right: -15px;
	margin-left: -15px;
}

.home-top .row::before,
.home-top .row::after {
	display: table;
	content: " ";
}

.home-top .row::after {
	clear: both;
}

.home-top .col-sm-6,
.home-top .col-md-6,
.home-top .col-lg-5,
.home-top .col-lg-7 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

.home-top .visible-lg {
	display: none !important;
}

/* ---- 余白・文字サイズ・装飾のユーティリティ ---- */
.home-top .mb-10 { margin-bottom: 10px !important; }
.home-top .mb-20 { margin-bottom: 10px !important; }
.home-top .mb-30 { margin-bottom: 20px !important; }
.home-top .mb-40 { margin-bottom: 20px !important; }
.home-top .mb-60 { margin-bottom: 30px !important; }
.home-top .mb-100 { margin-bottom: 60px !important; }
.home-top .mb-20-xs { margin-bottom: 20px !important; }

.home-top .txt-center { text-align: center; }
.home-top .txt-bold { font-weight: 800; }
.home-top .txt-blue { color: #02aedf; }
.home-top .txt-eng { font-family: Poppins, sans-serif; font-weight: 700; }
.home-top .txt-eng.txt-bold { font-weight: 700; }
.home-top .txt-center-pc { text-align: left; }

.home-top .txt-15 { font-size: 13px; }
.home-top .txt-16 { font-size: 14px; }
.home-top .txt-18 { font-size: 15px; }
.home-top .txt-20 { font-size: 16px; }
.home-top .txt-28 { font-size: 20px; }
.home-top .txt-36 { font-size: 23px; }
.home-top .txt-40 { font-size: 24px; }

.home-top .lh-1 { line-height: 1; }
.home-top .lh-sm { line-height: 1.5; }

.home-top .txt-marker {
	padding-bottom: 0.2em;
	background-image: linear-gradient(transparent 60%, #ffef37 60%);
	background-repeat: repeat-x;
	background-size: 200% 100%;
}

/* ---- ボタン ---- */
.home-top .btn-base {
	position: relative;
	display: inline-block;
	text-align: center;
	width: 100%;
	max-width: 100%;
	padding: 1.3em 10px;
	line-height: 1.3;
	border: none;
	transition: 0.2s linear;
	text-decoration: none !important;
}

.home-top .btn-base .txt,
.home-top .btn-base .icon {
	position: relative;
	display: inline-block;
	z-index: 1;
}

.home-top .btn-base .icon {
	margin: 0 5px;
}

.home-top .btn-base .icon-right {
	position: absolute;
	display: block;
	right: 5px;
	top: 50%;
	margin-top: -0.5em;
	width: 1em;
	height: 1em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M2 1.5 8.5 8 2 14.5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 0.55em 0.9em no-repeat;
}

.home-top .btn-blue {
	background-color: #02aedf;
	color: #fff;
}

.home-top .btn-blue:hover,
.home-top .btn-blue:active,
.home-top .btn-blue:focus {
	color: #fff;
}

.home-top .btn-line {
	background-color: #00b900;
	color: #fff;
}

.home-top .btn-line:hover,
.home-top .btn-line:active,
.home-top .btn-line:focus {
	color: #fff;
}

.home-top .btn-line .icon {
	margin-right: 10px;
}

.home-top .btn-line .icon img {
	width: 40px;
	height: auto;
}

/* ---- 画像を枠いっぱいに表示(object-fit) ---- */
.home-top .js-photo-ofi {
	height: 0;
	display: block;
	padding-bottom: 65%;
	background-color: #efefef;
	overflow: hidden;
	position: relative;
}

.home-top .js-photo-ofi img {
	max-width: inherit;
	max-height: inherit;
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	position: absolute;
	left: 0;
	top: 0;
}

.home-top .js-photo-ofi.cover img {
	object-fit: cover;
}

/* ---- 英字見出し(白文字+黒フチ+水色ずらし) ---- */
.home-top .en-top {
	position: relative;
	line-height: 1;
	letter-spacing: 0.05em;
	font-family: Poppins, sans-serif;
	font-weight: 700;
}

.home-top .en-top .en-01 {
	position: relative;
	color: #fff;
	z-index: 1;
	text-shadow: #000 1px 1px 0, #000 -1px 1px 0, #000 1px -1px 0, #000 -1px -1px 0;
}

.home-top .en-top .en-02 {
	position: absolute;
	top: 3px;
	left: 3px;
	color: #02aedf;
}

/* =========================================================
   メインビジュアル(スライダー)
   ========================================================= */
.home-top .mv {
	background-color: #f6f6f6;
}

.home-top .slider-pro {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
}

.home-top .sp-mask {
	position: relative;
	overflow: hidden;
	height: 490px;
	cursor: grab;
	touch-action: pan-y; /* 縦スクロールはそのまま、横方向の操作をスライダーが受ける */
	-webkit-user-select: none;
	user-select: none;
}

.home-top .slider-pro.is-dragging .sp-mask {
	cursor: grabbing;
}

.home-top .slider-pro.is-single .sp-mask {
	cursor: default;
}

.home-top .sp-mask img {
	-webkit-user-drag: none;
	user-drag: none;
}

.home-top .sp-slides {
	position: relative;
	height: 100%;
}

.home-top .sp-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 800px;
	height: 490px;
	overflow: hidden;
	background-color: #f6f6f6;
	transition: transform 0.7s;
	will-change: transform;
}

.home-top .sp-slide.sp-notransition {
	transition: none;
}

.home-top .banner-event {
	position: relative;
	display: block;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 900;
	color: #fff !important;
}

.home-top .sp-slide a {
	display: block;
	opacity: 0.4;
	transition: opacity 0.25s !important;
}

.home-top .sp-slide.sp-selected a {
	opacity: 1;
}

.home-top .sp-image {
	width: 100%;
	height: auto;
	position: relative;
	display: block;
	max-width: none;
	max-height: none;
}

.home-top .main-thumb {
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
}

.home-top .main-thumb img {
	width: 100%;
	height: auto;
}

.home-top .line-img {
	/* LINEバナーは緑の背景を含む画像のため、枠線などは重ねない */
	height: 100%;
	display: flex;
	align-items: center;
}

.home-top .line-img img {
	width: 100% !important;
}

/* 画像(800x467)をスライドの高さ(490px)の上下中央に置く */
.home-top .sp-slide a.line-img { padding-top: 11px; }


/* 画像ファイルが未配置のときの代替表示 */
.home-top .line-img__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 220px;
	background-color: #0bb43d;
	color: #fff;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
}

.home-top .img-placeholder {
	width: 100%;
	max-width: 100%;
	background-color: #efefef;
	margin: 0 auto;
}

.home-top .img-placeholder--concept { aspect-ratio: 648 / 480; max-width: 648px; }
.home-top .img-placeholder--service { aspect-ratio: 1142 / 400; max-width: 1142px; }

/* 矢印 */
.home-top .sp-arrows {
	position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	margin-top: -15px;
	z-index: 9;
}

.home-top .sp-arrow {
	position: absolute;
	display: block;
	width: 45px;
	height: 45px;
	padding: 0;
	border: 0;
	background-color: transparent;
	/* arrow-l.png が無い場合は下の矢印(SVG)を使う */
	background-image: var(--home-arrow-img, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Ccircle cx='45' cy='45' r='45' fill='%23000' fill-opacity='.55'/%3E%3Cpath d='M52 28 35 45l17 17' fill='none' stroke='%23fff' stroke-width='5'/%3E%3C/svg%3E"));
	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
	transition: 0.25s;
}

.home-top .sp-arrow:hover {
	opacity: 0.8;
}

.home-top .sp-previous-arrow {
	left: 5px;
}

.home-top .sp-next-arrow {
	right: 5px;
	transform: rotate(180deg);
}

/* ドット */
.home-top .sp-buttons {
	position: absolute;
	bottom: -23px;
	left: 0;
	width: 100%;
	text-align: center;
	padding: 0;
	font-size: 15px;
	line-height: 27px;
	z-index: 2;
}

.home-top .sp-button {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 5px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #333;
	opacity: 0.4;
	transform: scale(0.8);
	cursor: pointer;
	vertical-align: baseline;
}

.home-top .sp-button.sp-selected-button {
	opacity: 1;
	transform: scale(1);
}

/* 1枚だけのときは矢印・ドットを出さない */
.home-top .slider-pro.is-single .sp-arrows,
.home-top .slider-pro.is-single .sp-buttons {
	display: none;
}

/* =========================================================
   EVENT / ONLINE SHOP セクション
   ========================================================= */
.home-top .section-event {
	position: relative;
	padding-top: 60px;
	padding-bottom: 60px;
}

.home-top .section-event.section-shop {
	padding-top: 0 !important;
}

.home-top .section-event::before {
	position: absolute;
	content: " ";
	display: block;
	left: 0;
	width: 25%;
	top: 0;
	bottom: 0;
	z-index: -1;
	background-image: linear-gradient(-45deg, #f1eee5 25%, #fff 25%, #fff 50%, #f1eee5 50%, #f1eee5 75%, #fff 75%, #fff);
	background-size: 3px 3px;
}

.home-top .section-event .content {
	position: relative;
	z-index: 1;
}

.home-top .section-event .en {
	margin-bottom: 10px;
	font-size: 42px;
}

.home-top .section-event .thumb {
	margin-top: 20px;
	margin-left: 10%;
	padding-bottom: 45%;
}

/* =========================================================
   CONCEPT セクション
   ========================================================= */
.home-top .section-concept {
	position: relative;
}

.home-top .section-concept::before {
	position: absolute;
	content: " ";
	display: block;
	width: 100%;
	left: 0;
	top: 0;
	bottom: 9vw;
	background-color: #d9ebf0;
	z-index: -1;
}

.home-top .section-concept .ttl {
	position: relative;
	top: -0.5em;
	font-size: 36px;
}

.home-top .section-concept .en {
	font-size: 36px;
}

.home-top .lead-top-concept {
	font-style: italic;
}

.home-top .lead-top-concept > span {
	display: inline-block;
	line-height: 1.3;
	background-image: linear-gradient(transparent 60%, #fff 60%);
	background-repeat: repeat-x;
	background-size: 200% 100%;
}

/* =========================================================
   CONTACT ボックス
   ========================================================= */
.home-top .box-top-contact {
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
	background-image: linear-gradient(-45deg, #d8e4e8 25%, #fff 25%, #fff 50%, #d8e4e8 50%, #d8e4e8 75%, #fff 75%, #fff);
	background-size: 12px 12px;
}

.home-top .box-top-contact .inner-top-contact {
	background-color: #fff;
	padding: 20px 10px;
}

.home-top .box-top-contact .btn-footer {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	height: 60px;
}

.home-top .box-top-contact .btn-blue .icon-envelope {
	display: inline-block;
	width: 1.5em;
	height: 1.1em;
	vertical-align: middle;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 17'%3E%3Crect x='1' y='1' width='22' height='15' rx='1.5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Cpath d='m2 2.5 10 7.5 10-7.5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   タブレット以上(768px〜)
   ========================================================= */
@media only screen and (min-width: 768px) {
	.home-top {
		font-size: 15px;
		line-height: 1.8;
	}

	.home-top .col-sm-6 {
		float: left;
		width: 50%;
	}

	.home-top .mb-20-xs { margin-bottom: 0 !important; }
	.home-top .mb-20 { margin-bottom: 20px !important; }
	.home-top .mb-30 { margin-bottom: 30px !important; }
	.home-top .mb-40 { margin-bottom: 40px !important; }
	.home-top .mb-60 { margin-bottom: 60px !important; }
	.home-top .mb-100 { margin-bottom: 100px !important; }

	.home-top .txt-center-pc { text-align: center; }
	.home-top .txt-15 { font-size: 15px; }
	.home-top .txt-16 { font-size: 16px; }
	.home-top .txt-18 { font-size: 18px; }
	.home-top .txt-20 { font-size: 20px; }
	.home-top .txt-28 { font-size: 28px; }
	.home-top .txt-36 { font-size: 36px; }
	.home-top .txt-40 { font-size: 40px; }

	.home-top .btn-base {
		padding: 1.2em 15px;
		width: 280px;
	}

	.home-top .btn-blue::after,
	.home-top .btn-blue::before,
	.home-top .btn-line::after,
	.home-top .btn-line::before {
		position: absolute;
		content: " ";
		display: block;
		top: 0;
		bottom: 0;
		width: 0;
	}

	.home-top .btn-blue::after,
	.home-top .btn-blue::before { background-color: #38c9f3; }

	.home-top .btn-line::after,
	.home-top .btn-line::before { background-color: #00d300; }

	.home-top .btn-blue::before,
	.home-top .btn-line::before { left: 0; }

	.home-top .btn-blue::after,
	.home-top .btn-line::after {
		right: 0;
		transition: width 0.3s cubic-bezier(0.6, 0, 0.3, 1);
	}

	.home-top .btn-blue:hover::before,
	.home-top .btn-line:hover::before {
		width: 100%;
		transition: width 0.3s cubic-bezier(0.6, 0, 0.3, 1);
	}

	.home-top .btn-blue:hover::after,
	.home-top .btn-line:hover::after {
		width: 100%;
		background: none;
	}

	.home-top .btn-line .icon img { width: 60px; }

	.home-top .en-top .en-02 { left: 5px; top: 5px; }

	.home-top .sp-slide a:hover { opacity: 0.8; }

	.home-top .main-thumb {
		padding-top: 15px;
		padding-bottom: 15px;
	}


	.home-top .sp-buttons { bottom: -30px; }

	.home-top .section-event {
		padding-top: 100px;
		padding-bottom: 45%;
	}

	.home-top .section-event .content {
		width: 80%;
		background-color: #d9ebf0;
		padding: 80px 30px 60px 50px;
	}

	.home-top .section-event .en {
		position: absolute;
		margin-bottom: 0;
		left: 50px;
		top: -0.5em;
		font-size: 70px;
	}

	.home-top .section-event .thumb {
		position: absolute;
		top: auto;
		bottom: 80px;
		right: 0;
		width: 85%;
	}

	.home-top .section-concept .ttl,
	.home-top .section-concept .en {
		font-size: 90px;
	}

	.home-top .box-top-contact {
		text-align: center;
		padding: 20px;
		margin-left: 15px;
		margin-right: 15px;
		background-size: 30px 30px;
	}

	.home-top .box-top-contact .inner-top-contact {
		text-align: center;
		padding: 50px 10px;
	}

	.home-top .box-top-contact .btn-footer {
		height: 90px;
		width: 420px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	/* sp-slide は幅可変のため JS 側でも調整(front-slider.js) */
}

/* 小さいスマホ: スライダーを1枚表示(矢印なし) */
@media only screen and (max-width: 767px) {
	.home-top .sp-arrows {
		display: none;
	}
}

/* 〜980px: スライドを画面幅いっぱい・高さは画像に合わせる */
@media only screen and (max-width: 980px) {
	.home-top .sp-mask {
		height: auto;
	}

	.home-top .sp-slide {
		height: auto;
	}
}

/* =========================================================
   992px〜
   ========================================================= */
@media only screen and (min-width: 992px) {
	.home-top .col-md-6 {
		float: left;
		width: 50%;
	}

	.home-top .section-event {
		padding-top: 200px;
		padding-bottom: 200px;
	}

	.home-top .section-event .content {
		width: 45%;
	}

	.home-top .section-event .content2 {
		width: 70% !important;
	}

	.home-top .section-event .en {
		font-size: 90px;
	}

	.home-top .section-event .thumb {
		top: 100px;
		bottom: auto;
		height: 560px;
		padding: 0;
		margin: 0;
		width: 60%;
	}
}

/* =========================================================
   1200px〜
   ========================================================= */
@media only screen and (min-width: 1200px) {
	.home-top .visible-lg {
		display: block !important;
	}

	.home-top .hidden-lg {
		display: none !important;
	}

	.home-top .col-lg-5,
	.home-top .col-lg-7 {
		float: left;
	}

	.home-top .col-lg-7 { width: 58.3333%; }
	.home-top .col-lg-5 { width: 41.6667%; }

	.home-top .sp-arrows {
		width: 1140px;
		left: 50%;
		margin-left: -570px;
	}

	.home-top .sp-previous-arrow { left: -20px; }
	.home-top .sp-next-arrow { right: -20px; }

	.home-top .section-concept::before {
		bottom: 120px;
	}

	.home-top .section-concept .content {
		padding-top: 60px;
	}

	.home-top .box-top-contact {
		margin-left: 30px;
		margin-right: 30px;
	}
}