/* =========================================================
   下層ページ(コンセプト / 事業内容 / 会社概要 / 法人のお客様 / お問合せ)専用スタイル
   現行サイト(comojapan-tokyo.com)のstyle.cssから、各ページで使われている
   部品だけを .subpage 配下に限定して移植しています。
   現行CSSのrem指定(1rem=10px)はpxに換算しています。
   読み込み条件: functions.php の cje_enqueue_assets() を参照(subpage.css の後に読み込み)
   ========================================================= */

/* ---- 追加ユーティリティ(subpage.cssに無いもの) ---- */
.subpage .mb-5 { margin-bottom: 5px !important; }
.subpage .mb-15 { margin-bottom: 5px !important; }
.subpage .mb-20-xs { margin-bottom: 20px !important; }
.subpage .mb-40 { margin-bottom: 20px !important; }
.subpage .mb-40-xs { margin-bottom: 40px !important; }
.subpage .lh-1 { line-height: 1; }
.subpage .txt-blue { color: #02aedf; }
.subpage .txt-gray { opacity: .7; }
.subpage .txt-eng { font-family: Poppins, sans-serif; font-weight: 700; }
.subpage .txt-13 { font-size: 12px; }
.subpage .txt-26 { font-size: 19px; }
.subpage .txt-48 { font-size: 26px; }
.subpage .visible-sm { display: none !important; }

/* 画像枠(縦横比を保ってはめ込む) */
.subpage .js-photo-ofi {
	height: 0;
	display: block;
	padding-bottom: 65%;
	background-color: #efefef;
	overflow: hidden;
	position: relative;
}
.subpage .js-photo-ofi img {
	max-width: inherit;
	max-height: inherit;
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	position: absolute;
	left: 0;
	top: 0;
}
.subpage .js-photo-ofi.cover img { object-fit: cover; }

/* 画像ファイルが未配置のときの代替枠 */
.subpage .img-placeholder-box {
	display: block;
	width: 100%;
	height: 0;
	background-color: #efefef;
}

/* ---- 見出しラベル ---- */
.subpage .ttl-min {
	background-color: #38c9f3;
	color: #fff;
	display: inline-block;
	line-height: 1.3;
	padding: .2em 10px;
	min-width: 90px;
	text-align: center;
}
.subpage .ttl-min.black { background-color: #131313; }

/* ---- 電話番号リンク(PCでは通常の文字、スマホでタップして発信) ---- */
.subpage .tel-link,
.subpage .tel-link:hover { color: inherit; }

/* ---- 点リスト ---- */
.subpage .list-simple { padding: 0; margin: 0; list-style: none; }
.subpage .list-simple .min { font-size: 85%; }
.subpage .list-simple li {
	position: relative;
	padding: 0 0 0 10px;
	margin-bottom: 5px;
	line-height: 1.5;
}
.subpage .list-simple li::after {
	position: absolute;
	content: " ";
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #38c9f3;
	left: 0;
	top: .7em;
	transform: translate(0, -50%);
}
.subpage .list-simple.list-inline li { margin-right: .8em; display: inline-block; }
.subpage .list-simple.list-narrow li { margin-bottom: 2px; }

/* ---- 定義リスト(代表者) ---- */
.subpage .dl-horizontal { margin: 0; }
.subpage .dl-horizontal::after { content: ""; display: block; clear: both; }
.subpage .dl-horizontal dt { position: relative; float: left; clear: both; font-weight: bold; }
.subpage .dl-horizontal dd { float: left; width: 100%; margin: 0 0 5px; }
.subpage .dl-horizontal.dl-md dt { width: 9em; }
.subpage .dl-horizontal.dl-md dd { margin-left: -9em; padding-left: 9em; }

/* ---- 罫線テーブル(会社概要) ---- */
.subpage .table-lined {
	width: 100%;
	font-size: 10px;
	line-height: 1.5;
	border-collapse: collapse;
	border-top: 1px solid #cecece;
}
.subpage .table-lined th,
.subpage .table-lined td { vertical-align: middle; padding: 10px 5px; }
.subpage .table-lined tbody th {
	font-weight: 500;
	white-space: nowrap;
	vertical-align: top;
	text-align: left;
	width: 80px;
}
.subpage .table-lined tbody td { font-size: 95%; }
.subpage .table-lined .min { font-size: 90%; }
.subpage .table-lined tr { border-bottom: 1px solid #cecece; }
.subpage .table-lined.table-lined-th th { border-bottom: 1px solid #02aedf; }
.subpage .table-lined.table-lined-th tr:first-child th { border-top: 1px solid #02aedf; }
.subpage .table-lined.table-lined-th tbody th { padding-left: 0; background-color: transparent; }
.subpage .table-lined p { margin: 0; }
.subpage .table-lined .mb-5 { margin-bottom: 5px !important; }

/* ---- コンセプト ---- */
.subpage .lead-top-concept { font-style: italic; }
.subpage .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%;
}
.subpage .row-concept { position: relative; isolation: isolate; padding-bottom: 30px; }
.subpage .row-concept .content { position: relative; z-index: 1; }
.subpage .row-concept .thumb {
	position: relative;
	margin: 0 10% 20px 0;
	padding-bottom: 45%;
	overflow: visible;
}
.subpage .row-concept .thumb::before {
	position: absolute;
	content: " ";
	display: block;
	background-image: linear-gradient(-45deg, #f1eee5 25%, #fff 25%, #fff 50%, #f1eee5 50%, #f1eee5 75%, #fff 75%, #fff);
	background-size: 3px 3px;
	width: 100%;
	height: 100%;
	left: 10px;
	top: 10px;
	z-index: -1;
}

/* ---- 事業内容 ---- */
.subpage .ttl-bb.ttl-bb--plain { margin-bottom: 20px; }
.subpage .box-service {
	position: relative;
	border: 2px solid #02aedf;
	padding: 30px 10px 20px;
}
.subpage .box-service .ttl {
	position: absolute;
	top: -.8em;
	left: 10px;
	background-color: #02aedf;
	color: #fff;
	line-height: 1.3;
	padding: 5px 10px;
	font-weight: bold;
	text-align: center;
	min-width: 120px;
}
.subpage .img-service-illust {
	position: relative;
	width: 100%;
	max-width: 555px;
	margin: 0 auto;
}

/* ---- お問合せフォーム ---- */
.subpage .mark-req {
	display: inline-block;
	padding: 2px 5px;
	line-height: 1;
	color: #fff;
	text-align: center;
	font-weight: 500;
	border-radius: 2px;
	font-size: 11px;
	background-color: #d9254f;
}
.subpage .table-form { width: 100%; border-collapse: collapse; }
.subpage #mail-form .table-form,
.subpage #mail-form .table-form tbody { display: block; }
.subpage #mail-form .table-form { line-height: 1.3; }
.subpage #mail-form .table-form .form-row {
	display: block;
	background: none;
	border-bottom: 1px solid #e6e6e6;
	margin-bottom: 0;
}
.subpage #mail-form .table-form .form-head,
.subpage #mail-form .table-form .form-content { display: block; }
.subpage #mail-form .table-form .form-head {
	position: relative;
	font-weight: 500;
	text-align: left;
	padding: 10px 0 0;
	margin-bottom: 5px;
}
.subpage #mail-form .table-form .form-head label { cursor: pointer; }
.subpage #mail-form .table-form .form-head .mark-req {
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: 7px;
	transform: translate(0, -50%);
}
.subpage #mail-form .table-form .form-content { padding-bottom: 10px; }
.subpage #mail-form .form-control {
	width: 100%;
	height: 35px;
	padding: 5px;
	box-shadow: none;
	border: 1px solid #eee;
	border-radius: 3px;
	background-color: #f6f6f6;
	font-family: inherit;
	font-size: 14px;
	color: #131313;
}
.subpage #mail-form .form-control.input-inline { width: auto; max-width: 100%; display: inline-block; }
.subpage #mail-form textarea.form-control { line-height: 1.5; height: auto; }
.subpage #mail-form .has-error .form-control { border-color: #ea321f; }
.subpage #mail-form .form-error {
	display: block;
	margin-top: 5px;
	color: #ea321f;
	font-size: 12px;
	line-height: 1.5;
}
.subpage #mail-form .form-value { margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.subpage .form-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.subpage .btn-base.btn-long { width: 100%; }
.subpage button.btn-base { cursor: pointer; font-family: inherit; border: 0; }
.subpage .btn-base.btn-back-form {
	background-color: #fff;
	color: #02aedf;
	border: 1px solid #02aedf;
}
.subpage .btn-base.btn-back-form:hover { color: #02aedf; opacity: .8; }

.subpage .form-notice {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid #ea321f;
	color: #ea321f;
	background: #fff;
	font-size: 13px;
	line-height: 1.6;
}
.subpage .form-complete { text-align: center; padding: 20px 0; }
.subpage .form-complete .ttl { font-size: 20px; font-weight: 800; margin-bottom: 15px; }

/* =========================================================
   PC(768px以上)
   ========================================================= */
@media only screen and (min-width: 768px) {
	.subpage .mb-15 { margin-bottom: 15px !important; }
	.subpage .mb-20-xs { margin-bottom: 0 !important; }
	.subpage .mb-40 { margin-bottom: 40px !important; }
	.subpage .mb-40-xs { margin-bottom: 0 !important; }
	.subpage .txt-13 { font-size: 13px; }
	.subpage .txt-26 { font-size: 26px; }
	.subpage .txt-48 { font-size: 48px; }

	.subpage .tel-link { pointer-events: none; cursor: default; }

	.subpage .list-simple li { padding-left: 15px; margin-bottom: 10px; }
	.subpage .list-simple li::after { width: 5px; height: 5px; }
	.subpage .list-simple.list-narrow li { margin-bottom: 3px; }

	.subpage .dl-horizontal dd { margin-bottom: 8px; }

	.subpage .table-lined { font-size: 15px; line-height: 1.75; }
	.subpage .table-lined th,
	.subpage .table-lined td { padding: 25px 15px; }
	.subpage .table-lined tbody th { width: 130px; height: 80px; }

	.subpage .row-concept { padding-top: 30px; padding-bottom: 50px; }
	.subpage .row-concept .content { width: 50%; left: 50%; padding-left: 50px; }
	.subpage .row-concept .thumb::before { left: 30px; top: 30px; }
	.subpage .row-concept .thumb {
		position: absolute;
		top: 0;
		left: 0;
		height: 380px;
		padding: 0;
		margin: 0;
		width: 50%;
	}

	.subpage .row-match { display: flex; flex-wrap: wrap; }
	.subpage .row-match > [class*="col-"] { display: flex; flex-direction: column; }
	.subpage .row-match .box-service { flex: 1 1 auto; }
	.subpage .box-service { padding: 30px 20px 20px; }
	.subpage .box-service .ttl { left: 20px; }

	.subpage #mail-form .table-form .form-row { display: flex; align-items: center; }
	.subpage #mail-form .table-form .form-head,
	.subpage #mail-form .table-form .form-content { padding: 10px 0; }
	.subpage #mail-form .table-form .form-head { margin-bottom: 0; width: 260px; }
	.subpage #mail-form .table-form .form-head .mark-req { margin-top: 0; }
	.subpage #mail-form .table-form .form-content { flex: 1 1 0%; padding-left: 30px; }
	.subpage #mail-form .form-control { height: 50px; padding: 5px 10px; }
	.subpage #mail-form textarea.form-control { height: auto; }
	.subpage .btn-base.btn-long { width: 460px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.subpage .visible-sm { display: block !important; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.subpage .table-lined tbody th { width: 130px; }
}

@media only screen and (min-width: 992px) {
	.subpage .row-concept { padding-top: 200px; padding-bottom: 200px; }
	.subpage .row-concept .thumb { height: 560px; }
	.subpage .table-lined tbody th { width: 210px; }
}

@media print {
	.subpage .tel-link { pointer-events: none; }
}

/* ---- 法人のお客様 ---- */
.subpage .contract-list {
	margin: 0 0 1em;
	padding-left: 1.5em;
	list-style: disc;
}
.subpage .contract-list li { margin: 0; }

.subpage--contract .btn-base .icon { margin-right: .3em; }

/* ---- 取り扱いブランド ---- */
.subpage .logo-brand { width: 120px; height: auto; }
.subpage .ttl-bb.center { text-align: center; }
.subpage .ttl-bb.center::before { left: 50%; transform: translate(-50%, 0); }
.subpage--brand figure { margin: 0; }
.subpage--brand hr {
	box-sizing: content-box;
	height: 0;
	margin-top: 20px;
	border: 0;
	border-top: 1px solid #eee;
}
.subpage--brand section .img-placeholder-box { max-width: 555px; margin: 0 auto; }
@media only screen and (min-width: 768px) {
	.subpage .logo-brand { width: 180px; }
}

/* ---- プライバシーポリシー(page-privacy.php) ---- */
.subpage--privacy .page-content { font-size: 14px; line-height: 1.9; }
.subpage--privacy .page-content > p { margin: 0 0 1.4em; }
.subpage--privacy .page-content h3 {
	margin: 2em 0 .7em;
	padding: 0 0 .4em;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	border-bottom: 2px solid #02aedf;
}
.subpage--privacy .page-content ul { margin: 0 0 1.4em; padding-left: 1.4em; list-style: disc; }
.subpage--privacy .page-content li { margin: 0 0 .4em; }
.subpage--privacy .page-content .txt-indent { padding-left: 1em; margin-bottom: .9em; }
.subpage--privacy .page-content .box-sm { margin: 0 0 1.4em; padding: 16px 20px; }
.subpage--privacy .page-content .box-sm p { margin: .6em 0 0; }
.subpage--privacy .mb-none { margin-bottom: 0 !important; }
@media (min-width: 768px) {
	.subpage--privacy .page-content { font-size: 15px; }
	.subpage--privacy .page-content h3 { font-size: 19px; }
}