/* =========================================================
   下層ページ共通スタイル(LINEページ・ブログなど)
   現行サイト(comojapan-tokyo.com)の下層ページの見た目を再現するための
   共通部品です(ページタイトル帯・パンくず・余白・グリッド・見出し等)。
   他のページのスタイルと干渉しないよう、すべて .subpage 配下に限定しています。
   現行CSSのrem指定(1rem=10px)はpxに換算しています。
   ========================================================= */

.subpage {
	position: relative;
	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;
	padding-bottom: 0 !important;
}

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

.subpage h1, .subpage h2, .subpage h3, .subpage p {
	margin: 0;
}

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

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

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

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

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

/* ---- グリッド ---- */
.subpage .container-lg {
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto;
}

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

.subpage .row::before,
.subpage .row::after {
	display: table;
	content: " ";
}

.subpage .row::after {
	clear: both;
}

.subpage [class*="col-"] {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}

.subpage .col-xs-12 {
	float: left;
	width: 100%;
}

.subpage .visible-xs { display: none !important; }

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

.subpage .txt-center { text-align: center; }
.subpage .txt-right { text-align: right; }
.subpage .txt-bold { font-weight: 800; }
.subpage .lh-sm { line-height: 1.5; }
.subpage .txt-line { color: #0ab43c; }

.subpage .txt-14 { font-size: 13px; }
.subpage .txt-16 { font-size: 14px; }
.subpage .txt-18 { font-size: 15px; }
.subpage .txt-20 { font-size: 16px; }
.subpage .txt-22 { font-size: 17px; }
.subpage .txt-24 { font-size: 18px; }
.subpage .txt-36 { font-size: 23px; }

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

.subpage .bg-white { background-color: #fff; }
.subpage .bg-light2 { background-color: #f6f6f6; }
.subpage .box-sm { padding: 10px; }
.subpage .box-md { padding: 20px 10px; }

.subpage .section-lg { padding: 30px 0; }

/* ---- ページタイトル帯 ---- */
.subpage .pgttl {
	position: relative;
	background-color: #02aedf;
	color: #fff;
}

.subpage .pgttl.line {
	background-color: #0ab43c;
}

.subpage .pgttl .inner-pgttl {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

.subpage .pgttl .en {
	font-family: Poppins, sans-serif;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	text-shadow: #013847 1px 1px 0;
	font-size: 24px;
}

.subpage .pgttl .ja {
	line-height: 1.3;
	margin-top: 0.1em;
	font-weight: 500;
	text-shadow: #013847 1px 1px 0;
	font-size: 14px;
}

/* ---- パンくず ---- */
.subpage .breadcrumbs {
	text-align: right;
	background: #f6f6f6;
	padding: 2px 15px 2px 0;
}

.subpage .breadcrumbs ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.subpage .breadcrumbs ul li {
	padding: 0 0 0 10px;
	margin: 0 0 0 5px;
	display: inline-block;
	position: relative;
	color: #666;
	line-height: 1;
	letter-spacing: 0;
	font-size: 10px;
}

.subpage .breadcrumbs ul li::after {
	position: absolute;
	content: " ";
	display: block;
	left: 0;
	width: 1px;
	height: 120%;
	top: 50%;
	transform: rotate(30deg) translate(0, -50%);
	background-color: #02aedf;
}

.subpage .breadcrumbs ul li:first-child {
	padding-left: 0;
	margin: 0;
}

.subpage .breadcrumbs ul li:first-child::after {
	content: none;
}

.subpage .breadcrumbs ul li a {
	line-height: 1;
	color: #02aedf;
	text-decoration: none !important;
}

/* ---- 下線付き見出し ---- */
.subpage .ttl-bb {
	position: relative;
	line-height: 1.3;
	padding-bottom: 15px;
}

.subpage .ttl-bb::before {
	position: absolute;
	content: " ";
	display: block;
	bottom: 0;
	height: 2px;
	width: 40px;
	background-color: #02aedf;
}

/* ---- ボタン ---- */
.subpage .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;
}

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

.subpage .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;
}

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

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

@media only screen and (min-width: 768px) {
	.subpage {
		font-size: 15px;
		line-height: 1.8;
	}

	.subpage .col-sm-3, .subpage .col-sm-4, .subpage .col-sm-6,
	.subpage .col-sm-8, .subpage .col-sm-9 {
		float: left;
	}

	.subpage .col-sm-3 { width: 25%; }
	.subpage .col-sm-4 { width: 33.3333%; }
	.subpage .col-sm-6 { width: 50%; }
	.subpage .col-sm-8 { width: 66.6667%; }
	.subpage .col-sm-9 { width: 75%; }

	.subpage .mb-10-xs,
	.subpage .mb-30-xs { margin-bottom: 0 !important; }
	.subpage .mb-20 { margin-bottom: 20px !important; }
	.subpage .mb-30 { margin-bottom: 30px !important; }
	.subpage .mb-60 { margin-bottom: 60px !important; }

	.subpage .txt-14 { font-size: 14px; }
	.subpage .txt-16 { font-size: 16px; }
	.subpage .txt-18 { font-size: 18px; }
	.subpage .txt-20 { font-size: 20px; }
	.subpage .txt-22 { font-size: 22px; }
	.subpage .txt-24 { font-size: 24px; }
	.subpage .txt-36 { font-size: 36px; }

	.subpage .box-sm { padding: 20px; }
	.subpage .box-md { padding: 30px; }
	.subpage .section-lg { padding: 60px 0; }

	.subpage .pgttl .inner-pgttl {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.subpage .pgttl .en {
		font-size: 60px;
		text-shadow: #000 1px 1px 0, #000 -1px 1px 0, #000 1px -1px 0, #000 -1px -1px 0, #013847 4px 4px 0;
	}

	.subpage .pgttl .ja { font-size: 16px; }

	.subpage .breadcrumbs ul li {
		padding-left: 15px;
		margin-left: 10px;
		font-size: 12px;
	}

	.subpage .ttl-bb {
		padding-bottom: 20px;
		line-height: 1.5;
	}

	.subpage .ttl-bb::before { width: 60px; }

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

@media only screen and (min-width: 768px) and (max-width: 991px) {
	/* col-md-* は 992px 以上で有効 */
}

@media only screen and (max-width: 767px) {
	.subpage .visible-xs { display: block !important; }
	.subpage .hidden-xs { display: none !important; }
}

@media only screen and (min-width: 992px) {
	.subpage .col-md-3, .subpage .col-md-9 { float: left; }
	.subpage .col-md-3 { width: 25%; }
	.subpage .col-md-9 { width: 75%; }
}

@media only screen and (min-width: 1200px) {
	.subpage .col-lg-2, .subpage .col-lg-10 { float: left; }
	.subpage .col-lg-2 { width: 16.6667%; }
	.subpage .col-lg-10 { width: 83.3333%; }
}