﻿@charset "UTF-8";

/* ----------------------------------
 アフターサービス - 共通
---------------------------------- */
/* 管理画面のみ表示 - js管理ブロック表示用 - */
body:has(.smzpreview-preview-content):has(.inc_afterservice_sideNav) .inc_afterservice_sideNav_wrap,
body:has(.smzpreview-preview-content):has(.inc_afterservice_search)  .inc_afterservice_search_wrap,
body:has(.smzpreview-preview-content):has(.inc_afterservice_contact) .inc_afterservice_contact_wrap {
	height: 160px;
	border-top: #CCC 1px dashed;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
body:has(.smzpreview-preview-content):has(.inc_afterservice_sideNav) .inc_afterservice_sideNav_wrap::before { content: '「アフターサービス共通サイドメニュー」を編集';}
body:has(.smzpreview-preview-content):has(.inc_afterservice_search)  .inc_afterservice_search_wrap::before  { content: '「お近くの店舗を探す」を編集';}
body:has(.smzpreview-preview-content):has(.inc_afterservice_contact) .inc_afterservice_contact_wrap::before { content: '「お問い合わせ」を編集';}
body:has(.smzpreview-preview-content):has(.inc_afterservice_sideNav) .inc_afterservice_sideNav_wrap::after,
body:has(.smzpreview-preview-content):has(.inc_afterservice_search)  .inc_afterservice_search_wrap::after,
body:has(.smzpreview-preview-content):has(.inc_afterservice_contact) .inc_afterservice_contact_wrap::after  { content: '※公開時このエリアは表示されません'; font-size: 12px; color: #999;}

/* レイアウト */
.pane-header .container { padding-top: 0;}
@media screen and (min-width: 1001px) {
	main.contents .store-department_store-lead { line-height: 2.0; letter-spacing: 0;}
}
main.contents .mod-sideNav-nav * { line-height: 1.5;}
main.contents .mod-button-txt { line-height: 1.4;}
main.contents .mod-link02 { line-height: 1.5;}
main.contents .js-toggleBlock .mod-link02 { line-height: 1.0;}
main.contents .icon.icon-blank { line-height: 1.0; vertical-align: middle;}

@media screen and (max-width: 47.938em) {
  main.contents .mod-head01 .mod-head01-inner,
  main.contents .mod-head01 .mod-head01-inner span { font-size: 2.2rem}
}
@media screen and (max-width: 1000px) {
	main.contents .mod-topicPath { padding: 20px 10px;}
	main.contents .mod-topicPath_sp { margin-top: 40px;}
	.page-top-notice { padding-top: 80px;}
}
.store-detail-main-info-txt tr th {
	font-weight: bold;
}
.store-detail-main-info-txt tr td {
    padding: 10px 20px;
    line-height: 1.5;
}
.store-detail-main-info-txt tr td div {
	line-height: 1.5;
}

/* ----------------------------------
 メガネの取扱説明書
---------------------------------- */
#afterservice_manual .pc { display: block !important;}
#afterservice_manual .sp { display: none !important;}
#afterservice_manual h2 {
	margin-top: 0;
	margin-bottom: 20px;
	border-bottom: 1px solid #14195a;
	font-size: 30px;
	font-size: 3.0rem;
	font-weight: 700;
	color: #14195a;
	line-height: 1.6;
}
#afterservice_manual h2.mod-spacer-section { margin-top: 80px;}
#afterservice_manual h2.mod-corp-bclo-title-lg { font-weight: 400;}
#afterservice_manual h2.mod-corp-bclo-title-sm { font-size: 2.4rem;}
#afterservice_manual h2.warning:before {
	content: "";
	width: 64px;
	height: 64px;
	margin-top: -5px;
	margin-right: 5px;
	vertical-align: middle;
	display: inline-block;
	background: url(/cms/images/afterservice/manual/warning.png) no-repeat;
	background-size: contain;
}
#afterservice_manual h3.prohibition {
	width: 100%;
	padding: 0;
	margin-top: 30px;	
	margin-bottom: 20px;	
	border-bottom: 1px solid #e60012;
	font-size: 2rem;
	font-weight: 700;
	color: #e60012;
}
#afterservice_manual h3.prohibition:before {
	content: "";
	width: 52px;
	height: 52px;
	margin-top: -5px;
	margin-left: -2px;
	margin-right: 2px;
	background: url(/cms/images/afterservice/manual/prohibition.png) no-repeat;
	background-size: contain;
	display: inline-block;
	vertical-align: middle;
}
#afterservice_manual h3.caution {
	width: 100%;
	padding: 0;
	margin-top: 10px;	
	margin-bottom: 20px;
	border-bottom: 1px solid #e60012;
	font-size: 2rem;
	font-weight: 700;
	color: #e60012;
}
#afterservice_manual h3.caution:before {
	content: "";
	width: 52px;
	height: 52px;
	margin-top: -5px;
	margin-left: -2px;	
	margin-right: 2px;
	background: url(/cms/images/afterservice/manual/caution.png) no-repeat;
	background-size: contain;
	display: inline-block;
	vertical-align: middle;
}
#afterservice_manual h3.mandatory {
	width: 100%;
	padding: 0;
	margin-top: 30px;	
	margin-bottom: 20px;
	border-bottom: 1px solid #005bac;
	font-size: 2rem;
	font-weight: 700;
	color: #005bac;
}
#afterservice_manual h3.mandatory:before {
	content: "";
	width: 52px;
	height: 52px;
	margin-top: -5px;
	margin-left: -2px;	
	margin-right: 2px;
	background: url(/cms/images/afterservice/manual/mandatory.png) no-repeat;
	background-size: contain;
	display: inline-block;
	vertical-align: middle;
}
#afterservice_manual p.attention { margin-bottom: 15px;}
#afterservice_manual p.warning { margin-bottom: 15px;}
#afterservice_manual ul.manual { padding: 0; margin: 0 auto; text-indent: -1em; list-style: none;}
#afterservice_manual ul.manual li { margin-left: 1em; margin-bottom: 15px;}
#afterservice_manual ul.manual li:before {
	content: "";
	width: 7px;
	height: 7px;
	margin-right: 10px;
	border-radius: 50%;
	vertical-align: middle;
	display: inline-block;
	background-color: #14195a;
	position: relative;
	top: -2px;
}
#afterservice_manual ul.warning { padding: 0; margin: 0 auto; text-indent: -1em; list-style: none;}
#afterservice_manual ul.warning li { margin-left: 1em; margin-bottom: 24px;}
#afterservice_manual .accordion { width: 100%; padding: 0; margin: 0; position: relative;}
#afterservice_manual .accordion-title { padding: 10px 20px; margin-bottom: 10px; border-right: 40px solid #333; font-size: 1.8rem; font-weight: bolder; white-space: nowrap; color: #14195a; cursor: pointer;}
#afterservice_manual .accordion-content { padding: 10px 20px; margin-top: -10px; margin-bottom: 15px;	display: none;}
#afterservice_manual .accordion-item .accordion-title { background-color: #efefef;}
#afterservice_manual .accordion-item  .accordion-content { border-bottom: 7px solid #efefef; border-left: 7px solid #efefef; border-right: 7px solid #efefef;}
#afterservice_manual .accordion-title { position: relative;}
#afterservice_manual .accordion-title::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: solid 3px #fff;
  border-top: solid 3px #fff;
  display: block;
  position: absolute;
  right: -25px;
  top: 38%;
  transform: rotate(135deg);
  transition: transform .3s ease-in-out, top .3s ease-in-out;
}
#afterservice_manual .accordion-title.open::after { top: 45%; transform: rotate(-45deg);}

@media only screen and (max-width: 767px) {
 #afterservice_manual .pc { display: none !important;}
 #afterservice_manual .sp { display: block !important;}
 #afterservice_manual .accordion-title { font-size: 1.6rem;}
}

/* ----------------------------------
 メガネの国家検定資格 眼鏡作製技能士
---------------------------------- */
#professional_optician .sp { display: none;}
#professional_optician a { overflow-wrap: break-word;}
#professional_optician p { padding: 0 25px;}
#professional_optician h3 { font-size: 1.17em; font-weight: bold;}
#professional_optician section .product { margin: 120px auto;}
#professional_optician section .product:last-of-type { margin: 120px auto 20px;}
#professional_optician .ta-center { text-align: center;}
#professional_optician .flex100 { width: 100%; margin: 30px auto 60px; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;}
#professional_optician .flex100 div.text { flex-basis: 60%; flex-shrink: 0;}
#professional_optician .flex100 img { width: 100%; height: auto; display: inline-block;}
#professional_optician .flex100 img.width50 { width: 50%; height: auto; margin-bottom: 36px;}
#professional_optician .order-1 { order: 1;}
#professional_optician .order-2 { order: 2;}
#professional_optician .strong { margin: 20px auto; color: #14195a; font-size: 120%;}
#professional_optician .flex { width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;}
#professional_optician .flex:nth-child(1) { padding-right: 100px;}
#professional_optician .flex img { width: 90%; height: auto;}
#professional_optician .flex img.width50 { width: 50%; height: auto;}
#professional_optician .button { height: 48px; padding: 3px 17px; margin: 10px 15px; border: 2px solid #000; outline: 0; text-align: center; text-decoration: none; font-weight: normal; letter-spacing: -.7px; line-height: 24px; background-color: #fff; box-sizing: border-box; color: #222; fill: #222; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; transition: all .3s; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; position: relative;}
#professional_optician .width40 { width: 40%;}
#professional_optician .width50 { width: 50%;}
#professional_optician .button:after { content: ">"; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
#professional_optician .button:hover { border-color: #ff0000; color: #ff0000; fill: #ff0000;}
#professional_optician .bold { font-weight: bold; font-size: 22px; margin: 30px 0; padding: inherit;}
#professional_optician .attention { margin-top: 20px; display: block;}
#professional_optician .-title p { padding-top: 36px; padding-bottom: .3em; padding-left: .3em; border-bottom: 2px solid #999; font-size: 32px; position: relative;}
#professional_optician .-title p::after { content: ''; width: 50%; height: 2px; background-color: #000; position: absolute; bottom: -2px; left: 0; z-index: 2;}
#professional_optician .youtube { width: 95%; aspect-ratio: 16 / 9; margin: 0 auto 30px;}
#professional_optician .youtube iframe { width: 100%; height: 100%;}
#professional_optician span .space { margin: 30px auto;}
#professional_optician .mod-auto-pcFull { width: 100%; padding-right: 20px; padding-left: 20px;}
#professional_optician .mod-topicPath-a,
#professional_optician .mod-topicPath-a:visited,
#professional_optician .mod-topicPath-a:link { display: inline-block; color: #14195a;}
#professional_optician .mod-topicPath-a:hover,
#professional_optician .mod-topicPath-a:visited:hover,
#professional_optician .mod-topicPath-a:link:hover { text-decoration: underline; color: #333;}
#professional_optician table.list { width: 60%; margin: 0 auto;}
#professional_optician table.list,
#professional_optician table.list td,
#professional_optician table.list th { border-collapse: collapse;}
#professional_optician table.list th { width: 23%;}
#professional_optician table.list td,
#professional_optician table.list th { padding: 10px 5px; white-space: nowrap;}
#professional_optician a.link { text-decoration: underline; overflow-wrap: break-word;}

@media screen and (max-width:768px) {
	#professional_optician .flex img { width: 100%; height: auto; display: block; margin-top: 30px;}
	#professional_optician .bold { font-weight: bold; font-size: 16px; margin: 10px 0; padding: inherit;}
	#professional_optician p.text { padding: 0 10px !important;}
	#professional_optician .sp { display: block !important;}
	#professional_optician .pc { display: none;}
	#professional_optician .tablet { display: none;}
	#professional_optician .-title p { font-size: 24px !important;}
	#professional_optician .button { width: 100%; margin: 25px 0 5px;}
	#professional_optician .button:after { right: 5px;}
	#professional_optician .flex { width: 100%; padding: 10px 5px !important; display: flex; flex-direction: column; justify-content: center; align-items: center;}
	#professional_optician .flex div { flex-basis: 100%;}
	#professional_optician .flex100 { width: 100%; padding: 10px 5px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
	#professional_optician .flex100 img.width50 { width: 100%; height: auto; margin-bottom: 36px;}
	#professional_optician .order-1 { order: 2;}
	#professional_optician .order-2 { order: 1;}
	#professional_optician table.list { width: 100%; margin: 0 auto; table-layout: fixed; overflow-wrap: break-word !important; box-sizing: border-box;}
	#professional_optician table.list th,
	#professional_optician table.list td { width: 100%; padding: 5px 20px; font-size: 90%; word-break: break-word; display: block;}
	#professional_optician table.list th { text-justify: none; text-align: center;}
}

/* ----------------------------------
 補聴器に関するアフターサービス
---------------------------------- */
#hearingaid ul.circle { list-style: none;}
#hearingaid ul.circle > li { margin-left: 3em; text-indent: -1em; list-style: none;}
#hearingaid ul.circle > li:before {
	content: "";
	width: 7px;
	height: 7px;
	margin-right: 10px;
	border-radius: 50%;
	vertical-align: middle;
	display: inline-block;
	background-color: #14195a;
	position: relative;
	top: -2px;
}
#hearingaid ul.circle > li.style-none { margin: 1em 0 1em 2em;}
#hearingaid ul.circle > li.style-none::before { content: none;}
#hearingaid td > ul.circle { margin-left: 1.2em;}
#hearingaid td > ul.circle > li { margin-left: 0;}
#hearingaid ol.count { list-style: none; counter-reset: number;}
#hearingaid ol.count li { list-style: none;}
#hearingaid ol.count li > span { padding-left: 1.8em; margin: 0.5em 0; display: block; position: relative;}
#hearingaid ol.count li > span::before {
  width: 1.5em;
  height: 1.5em;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 0.8em;
  text-align: center;
  line-height: 1.5;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  counter-increment: number;
  content: counter(number);
}
@media only screen and (max-width: 767px) {
	#hearingaid ol.count li > span::before { top: 0.5em; transform: translateY(0);}
	#hearingaid ul.circle > li { text-indent: -1.2em;}
	#hearingaid ul.circle > li.style-none {  margin: 1em 0 2em 0em;}
}
