@charset "UTF-8";
/*  04_modules
================================================ */
/*!  bg
================================================ */
/*
Background

mod_bg_gradation
 
.mod_bg_gradation
 
Markup:
<p class="mod_bg_gradation" style="width:100px;height:100px; ">Title</p>
 
Styleguide 3.0.0
*/
.mod_bg_gradation { background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), color-stop(50%, #f7f7f7)); background: linear-gradient(#fff 50%, #f7f7f7 50%); }

/*
Background

mod_bg_beige
 
.mod_bg_beige
 
Markup:
<p class="mod_bg_beige" style="width:100px;height:100px; ">Title</p>
 
Styleguide 3.0.1
*/
.mod_bg_beige { background: #f7efde; }

/*
Background

mod_bg_gray
 
.mod_bg_gray
 
Markup:
<p class="mod_bg_gray" style="width:100px;height:100px; ">Title</p>
 
Styleguide 3.0.2
*/
.mod_bg_gray { background: #e8e8e8; }

/*
Background

mod_bg_gray_light
 
.mod_bg_gray_light
 
Markup:
<p class="mod_bg_gray_light" style="width:100px;height:100px; ">Title</p>
 
Styleguide 3.0.3
*/
.mod_bg_gray_light { background: #f3f3f3; }

/*
Background

mod_bg_tile01
 
.mod_bg_tile01
 
Markup:
<p class="mod_bg_tile01" style="width:100px;height:100px; ">Title</p>
 
Styleguide 3.0.4
*/
.mod_bg_tile01 { background: url("../img/common/bg_tile01.png") center; background-size: 74px; }

/*!  tit
================================================ */
/*
Button

mod_btn01
 
.mod_btn01 -base style
.mod_btn01.is_left -is_left
 
Markup:
<p class="mod_btn01 {$modifiers}"><a href="#">Button</a></p>
 
Styleguide 2.0.0
*/
.mod_btn01 { margin: 25px auto 0; padding: 0 30px; }

.mod_btn01 a { position: relative; display: block; padding: 14px 15px 15px; color: #fff; font-size: 1.4rem; line-height: 1.4; text-align: center; border: 1px solid #7faf20; text-decoration: none; background: #7faf20; overflow: hidden; border-radius: 5px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_btn01 .mod_btn01_txt { position: relative; z-index: 1; display: inline-block; padding-left: 16px; font-weight: 600; }

.mod_btn01 .mod_btn01_txt:before { position: absolute; top: 4px; left: 0; content: ""; display: block; width: 7px; height: 11px; background: url("../img/common/ico_arw01_white.png") no-repeat center; background-size: contain; }

@media screen and (min-width: 600px) { .mod_btn01 { width: 300px; margin-top: 40px; padding: 0; }
  .mod_btn01 a { padding: 14px 15px 13px 26px; font-size: 1.5rem; }
  .mod_btn01 a:before { position: absolute; top: -1px; left: -100%; content: ""; display: block; width: calc(100% + 2px); height: calc(100% + 2px); background: #8cb737; opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn01 a:hover:before { left: 0; opacity: 1; }
  .mod_btn01.is_left { margin-left: 0; }
  .mod_btn01 .mod_btn01_txt { padding-left: 20px; } }

/*!  list
================================================ */
/*
List

mod_list01
 
.mod_list01
 
Markup:
<ul class="list mod_list01">
	<li class="mod_list01_item" data-mh="mod_list01_item">
		<p class="mod_list01_item_tit">一般歯科</p>
		<p class="mod_list01_item_en fontQuicksand">GENERAL</p>
		<div class="mod_list01_item_ico"><img src="/img/common/ico_treatment01.png" alt=""></div>
		<p class="mod_list01_item_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</li>
	<li class="mod_list01_item" data-mh="mod_list01_item">
		<p class="mod_list01_item_tit">矯正歯科</p>
		<p class="mod_list01_item_en fontQuicksand">ORTHODONTIST</p>
		<div class="mod_list01_item_ico"><img src="/img/common/ico_treatment02.png" alt=""></div>
		<p class="mod_list01_item_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</li>
	<li class="mod_list01_item" data-mh="mod_list01_item">
		<p class="mod_list01_item_tit">口腔外科</p>
		<p class="mod_list01_item_en fontQuicksand">DENTAL SURGERY</p>
		<div class="mod_list01_item_ico"><img src="/img/common/ico_treatment03.png" alt=""></div>
		<p class="mod_list01_item_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</li>
	<li class="mod_list01_item" data-mh="mod_list01_item">
		<p class="mod_list01_item_tit">入れ歯治療</p>
		<p class="mod_list01_item_en fontQuicksand">ARTIFICIAL TOOTH</p>
		<div class="mod_list01_item_ico"><img src="/img/common/ico_treatment04.png" alt=""></div>
		<p class="mod_list01_item_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</li>
	<li class="mod_list01_item" data-mh="mod_list01_item">
		<p class="mod_list01_item_tit">インプラント</p>
		<p class="mod_list01_item_en fontQuicksand">IMPLANT</p>
		<div class="mod_list01_item_ico"><img src="/img/common/ico_treatment05.png" alt=""></div>
		<p class="mod_list01_item_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</li>
	<li class="mod_list01_item" data-mh="mod_list01_item">
		<p class="mod_list01_item_tit">ホワイトニング</p>
		<p class="mod_list01_item_en fontQuicksand">WHITENING</p>
		<div class="mod_list01_item_ico"><img src="/img/common/ico_treatment06.png" alt=""></div>
		<p class="mod_list01_item_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</li>
	<li class="mod_list01_item" data-mh="mod_list01_item">
		<p class="mod_list01_item_tit">審美治療</p>
		<p class="mod_list01_item_en fontQuicksand">ESTHETIC</p>
		<div class="mod_list01_item_ico"><img src="/img/common/ico_treatment07.png" alt=""></div>
		<p class="mod_list01_item_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</li>
	<li class="mod_list01_item" data-mh="mod_list01_item">
		<p class="mod_list01_item_tit">定期健診</p>
		<p class="mod_list01_item_en fontQuicksand">MEDICAL CHECK-UP</p>
		<div class="mod_list01_item_ico"><img src="/img/common/ico_treatment08.png" alt=""></div>
		<p class="mod_list01_item_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</li>
</ul>
 
Styleguide 6.0.0
*/
.mod_list01 { margin-left: -1.45%; margin-right: -1.45%; }

.mod_list01 .mod_list01_item { box-sizing: border-box; float: left; width: 47.1%; margin: 0 1.45%; padding: 22px 16px; background: #fff; text-align: center; }

.mod_list01 .mod_list01_item_tit { font-size: 1.6rem; font-weight: 700; line-height: 1.38; letter-spacing: .08em; }

.mod_list01 .mod_list01_item_en { margin-top: 5px; font-size: 1.1rem; line-height: 1; color: #412210; font-weight: 500; }

.mod_list01 .mod_list01_item_ico { width: 60px; margin: 15px auto 0; }

.mod_list01 .mod_list01_item_txt { margin-top: 12px; text-align: left; }

@media screen and (max-width: 599px) { .mod_list01 { overflow: hidden; }
  .mod_list01 .mod_list01_item:nth-child(n+3) { margin-top: 2.9%; } }

@media screen and (min-width: 600px) { .mod_list01 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -6px; margin-right: -6px; }
  .mod_list01 .mod_list01_item { box-sizing: border-box; float: none; width: calc(25% - 6px*2); margin: 0 6px; padding: 50px 30px; }
  .mod_list01 .mod_list01_item:nth-child(n+5) { margin-top: 17px; }
  .mod_list01 .mod_list01_item_tit { font-size: 2.2rem; line-height: 2; }
  .mod_list01 .mod_list01_item_en { margin-top: 2px; font-size: 1.2rem; }
  .mod_list01 .mod_list01_item_ico { width: 90px; margin-top: 30px; }
  .mod_list01 .mod_list01_item_ico.is_ico05 { position: relative; top: -11px; }
  .mod_list01 .mod_list01_item_ico.is_ico06 { position: relative; top: -9px; }
  .mod_list01 .mod_list01_item_ico.is_ico07 { position: relative; top: -9px; right: -4px; }
  .mod_list01 .mod_list01_item_txt { margin-top: 12px; font-size: 1.5rem; } }

/*!  section
================================================ */
/*
Section

mod_section01
 
.mod_section01            - Base styles
 
Markup:
<section class="mod_section01 mod_bg_beige">
	<div class="mod_section01_inner mod_inner01">
		<div class="mod_section01_area_txt">
			<header class="mod_head01">
				<p class="mod_head01_en fontQuicksand">CONCEPT</p>
				<h2 class="mod_head01_tit">コンセプトが<br>入ります。コンセプトが入ります。コンセプトが入ります。</h2>
			</header>
			<p class="mod_section01_txt">当院では来てくれる全ての患者さんとそのご家族の皆様の健康と笑顔のために、検査と予防を徹底しております。治療をしなければならない場合はその患者さんが一番に望んでいることを、できるだけそのご希望に沿った治療を主軸としてご提案させていただいております。<br>ですので、突然注射したり、削ったり、抜いたりはしませんので、まずはご相談ください。</p>
			<p class="mod_section01_btn mod_btn01 is_left"><a href="/about/"><span class="mod_btn01_txt">クリニックについて</span></a></p>
		</div>
		<div class="mod_section01_img"><img src="/img/home/img_about01_pc.png" alt=""></div>
	</div>
</section>
 
Styleguide 5.0.0
*/
.mod_section01 .mod_section01_inner { padding-top: 40px; padding-bottom: 50px; }

.mod_section01 .mod_section01_txt { margin-top: 15px; }

.mod_section01 .mod_section01_btn { margin-top: 20px; }

.mod_section01 .mod_section01_img { padding-top: 20px; }

@media screen and (min-width: 600px) { .mod_section01 .mod_section01_inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-top: 98px; padding-bottom: 100px; }
  .mod_section01 .mod_section01_area_txt { box-sizing: border-box; width: calc(100% - 600px); margin-top: -5px; padding-right: 90px; }
  .mod_section01 .mod_section01_txt { margin-top: 12px; }
  .mod_section01 .mod_section01_btn { margin-top: 35px; }
  .mod_section01 .mod_section01_img { box-sizing: border-box; width: 600px; padding-top: 0; }
  .mod_section01 .mod_section01_img img { max-width: none; } }

/*
Section

mod_section02
 
.mod_section02            - Base styles
.mod_section02.is_reverse            - is_reverse
 
Markup:
<section class="mod_section02 {$modifiers}">
	<div class="mod_section02_img"><img src="/img/home/img_feature01.jpg" alt=""></div>
	<div class="mod_section02_area_txt">
		<p class="mod_section02_logo"><img src="/img/home/ico_feature01_pc.png" alt="FEATURE01"></p>
		<h3 class="mod_section02_tit">特徴が入ります。特徴が入ります。<br>特徴が入ります。</h3>
		<p class="mod_section02_txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</section>
 
Styleguide 5.0.1
*/
.mod_section02 + .mod_section02 { margin-top: 20px; }

.mod_section02 .mod_section02_area_txt { position: relative; z-index: 1; margin: -21px 15px 0; padding: 50px 20px 24px; border-radius: 3px; background: #fff; box-shadow: 0px 2px 5px 1px rgba(75, 75, 75, 0.3); text-align: center; }

.mod_section02 .mod_section02_logo { position: absolute; top: -26px; left: 50%; width: 58px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

.mod_section02 .mod_section02_tit { display: inline; text-align: center; font-size: 1.6rem; line-height: 1.64; font-weight: 700; color: #412210; letter-spacing: .08em; background: url("../img/common/ico_wave01.png") repeat-x bottom center; background-size: 11px; }

.mod_section02 .mod_section02_txt { margin-top: 10px; text-align: left; }

@media screen and (min-width: 600px) { .mod_section02 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .mod_section02 + .mod_section02 { margin-top: 50px; }
  .mod_section02 .mod_section02_img { width: 660px; margin-right: -210px; }
  .mod_section02 .mod_section02_img:after { content: ""; display: block; clear: both; }
  .mod_section02 .mod_section02_img img { float: right; max-width: none; }
  .mod_section02.is_reverse .mod_section02_img { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-right: 0; margin-left: -210px; }
  .mod_section02.is_reverse .mod_section02_img img { float: left; }
  .mod_section02 .mod_section02_area_txt { box-sizing: border-box; width: calc(100% - 660px + 210px); margin: 0 0 -35px 0; padding: 95px 48px 70px; border-radius: 6px; box-shadow: 0px 4px 9.6px 0.4px rgba(75, 75, 75, 0.3); }
  .mod_section02.is_reverse .mod_section02_area_txt { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  .mod_section02 .mod_section02_logo { top: -40px; width: 92px; margin-left: -15px; }
  .mod_section02 .mod_section02_tit { font-size: 2.6rem; line-height: 1.62; background-size: 22px; }
  .mod_section02 .mod_section02_txt { margin-top: 15px; } }

/*
Section

mod_section03
 
.mod_section03            - Base styles
 
Markup:
<section class="mod_section03">
	<div class="mod_section03_img"><img src="/img/treatment/img01_01.jpg" alt=""></div>
	<div class="mod_section03_area_txt">
		<h4 class="mod_tit03 is_txt_green">・口内炎の治療</h4>
		<p class="mod_section03_txt">ほっとくとなかなか治らない口内炎に直接お薬を塗ります。お薬を塗ると個人差はありますが比較的早く治ってくれます。<br>怖い病気のサインであることもありますので、早めの受診をお勧め致します。</p>
	</div>
</section>
 
Styleguide 5.0.2
*/
.mod_section03 { padding: 20px 0; }

.mod_section03 + .mod_section03 { padding-top: 25px; border-top: 1px solid #dcdcdc; }

.mod_section03 .mod_section03_area_txt { padding: 8px 0 0; }

.mod_section03 .mod_section03_txt { margin-top: 3px; }

.mod_section03 .mod_section03_txt:first-child { margin-top: 0; }

@media screen and (min-width: 600px) { .mod_section03 { padding: 30px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .mod_section03 + .mod_section03 { padding-top: 30px; }
  .mod_section03 .mod_section03_img { width: 340px; min-height: 216px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
  .mod_section03 .mod_section03_img img { min-height: 216px; object-fit: cover; }
  .mod_section03 .mod_section03_area_txt { box-sizing: border-box; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: calc(100% - 340px); margin: -10px 0 0; padding: 0 60px 0 0; }
  .mod_section03 .mod_section03_txt { margin-top: 4px; letter-spacing: 0; line-height: 1.9; }
  .mod_section03 .mod_section03_txt:first-child { margin-top: 0; } }

/*!  table
================================================ */
/*
Table

mod_table01
 
.mod_table01            - Base styles
 
Markup:
<div class="mod_table01">
	<table><tbody>
		<tr>
			<th>名称</th>
			<td>長谷川歯科医院</td>
		</tr>
		<tr>
			<th>所在地</th>
			<td>〒332-0011 <br class="viewSp">埼玉県川口市元郷2-1-11</td>
		</tr>
		<tr>
			<th>院長</th>
			<td>長谷川 肇</td>
		</tr>
		<tr>
			<th>電話</th>
			<td>048-211-6692</td>
		</tr>
		<tr>
			<th>診療科目</th>
			<td>一般歯科、矯正歯科、口腔外科、入れ歯治療、インプラント、ホワイトニング、審美治療、定期健診</td>
		</tr>
	</tbody></table>
</div>
 
Styleguide 4.0.0
*/
.mod_table01 { line-height: 1.75; }

.mod_table01 th, .mod_table01 td { padding: 10px 10px 10px 20px; border-style: solid; border-width: 1px 0; border-color: #dcdcdc; }

.mod_table01 th { box-sizing: border-box; width: 106px; background: #7faf20; color: #fff; }

.mod_table01 td { background: #fff; }

@media screen and (min-width: 600px) { .mod_table01 { font-size: 1.5rem; letter-spacing: .15em; }
  .mod_table01 th, .mod_table01 td { padding: 11px 12px 11px 30px; }
  .mod_table01 th { width: 126px; } }

/*
Table

mod_table02
 
.mod_table02            - Base styles
.mod_table02.is_column2            - is_column2
 
Markup:
<div class="mod_table02">
	<table class="{$modifiers}">
		<thead>
			<tr>
				<th colspan="2">基本料金</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>乳歯混合歯列期</th>
				<td>30万円</td>
			</tr>
		</tbody>
	</table>
	<p class="mod_table02_attention">※すべて税別表記です。</p>
</div>
 
Styleguide 4.0.1
*/
.mod_table02 table { border-bottom: 1px solid #dcdcdc; }

.mod_table02 th { padding: 7px 10px 8px; text-align: center; color: #412210; font-size: 1.6rem; font-weight: 700; background: #f3f3f3; border-style: solid; border-width: 1px 0; border-color: #dcdcdc; }

.mod_table02 td { padding: 8px 20px; background: #fff; }

.mod_table02 td:last-child { text-align: right; color: #89b03a; }

.mod_table02 thead { padding-bottom: 15px; }

.mod_table02 thead th { background: #f7efde; color: #89b03a; border-top-width: 0; }

@media screen and (max-width: 599px) { .mod_table02 table, .mod_table02 thead, .mod_table02 tbody, .mod_table02 tr, .mod_table02 th, .mod_table02 td { display: block; }
  .mod_table02 td:last-child:nth-child(3) { position: relative; }
  .mod_table02 td:last-child:nth-child(3):before { content: ""; display: block; padding-bottom: 5px; border-style: dashed; border-width: 1px 0 0; border-color: #dcdcdc; } }

@media screen and (min-width: 600px) { .mod_table02 th, .mod_table02 td { letter-spacing: .15em; }
  .mod_table02 th { box-sizing: border-box; width: 314px; padding: 11px 30px 12px; text-align: left; background: #fff; }
  .mod_table02 td { box-sizing: border-box; padding: 12px 35px; background: #fff; border-style: solid; border-width: 1px 0 1px 1px; border-color: #dcdcdc; font-size: 1.5rem; }
  .mod_table02 td:last-child:nth-child(3) { width: 200px; padding-right: 32px; }
  .mod_table02 .is_column2 th { width: 900px; }
  .mod_table02 thead { padding-bottom: 15px; }
  .mod_table02 thead th { text-align: center; } }

.mod_table02_attention { margin-top: 5px; text-align: right; color: #939393; }

@media screen and (min-width: 600px) { .mod_table02_attention { margin-top: 7px; } }

/*!  tit
================================================ */
/*
Title

mod_head01
 
.mod_head01            - Base styles
 
Markup:
<header class="mod_head01 {$modifiers}">
	<p class="mod_head01_en fontQuicksand">CONCEPT</p>
	<h2 class="mod_head01_tit">コンセプトが<br>入ります。コンセプトが入ります。コンセプトが入ります。</h2>
</header>
 
Styleguide 1.0.0
*/
.mod_head01 .mod_head01_en { line-height: 1.2; color: #89b03a; font-size: 1.2rem; letter-spacing: .15em; font-weight: 500; }

.mod_head01 .mod_head01_tit { margin-top: 2px; font-size: 1.8rem; line-height: 1.5; font-weight: 700; letter-spacing: .08em; color: #412210; }

@media screen and (min-width: 600px) { .mod_head01 .mod_head01_en { font-size: 1.5rem; }
  .mod_head01 .mod_head01_tit { margin: 6px -10px 0 0; font-size: 2.8rem; line-height: 1.57; } }

/*
Title

mod_tit01
 
.mod_tit01            - Base styles
 
Markup:
<h2 class="mod_tit01 {$modifiers}">治療案内</h2>
 
Styleguide 1.0.1
*/
.mod_tit01 { position: relative; padding-bottom: 14px; text-align: center; font-size: 2.1rem; line-height: 1.4; font-weight: 700; letter-spacing: .08em; }

.mod_tit01:after { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); content: ""; display: block; width: 24px; height: 4px; background: -webkit-gradient(linear, left top, right top, color-stop(50%, #7faf20), color-stop(50%, #8cb737)); background: linear-gradient(90deg, #7faf20 50%, #8cb737 50%); }

@media screen and (min-width: 600px) { .mod_tit01 { padding-bottom: 19px; font-size: 3.2rem; line-height: 1.38; }
  .mod_tit01:after { width: 36px; } }

/*
Title

mod_head02
 
.mod_head02            - Base styles
 
Markup:
<header class="mod_head02">
	<h2 class="mod_head02_tit">3つの特徴</h2>
	<p class="mod_head02_en fontQuicksand">FEATURE</p>
</header>
 
Styleguide 1.0.2
*/
.mod_head02 { position: relative; padding: 22px 15px 20px; text-align: center; color: #fff; background: url("../img/common/bg_tree01.jpg") no-repeat center; background-size: cover; }

.mod_head02:after { position: absolute; bottom: -16px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); content: ""; display: block; border-style: solid; border-width: 8px; border-color: #412210 transparent transparent; }

.mod_head02 .mod_head02_tit { position: relative; display: inline-block; padding: 8px 22px 0 30px; font-size: 2.6rem; line-height: 1.4; font-weight: 700; letter-spacing: .08em; }

.mod_head02 .mod_head02_tit:after { position: absolute; top: 0; right: 0; content: ""; display: block; width: 19px; height: 16px; background: url("../img/common/ico_mod_head02.png") no-repeat center; background-size: contain; }

.mod_head02 .mod_head02_en { margin-top: 12px; font-size: 1.2rem; line-height: 1.2; letter-spacing: .12em; font-weight: 500; }

@media screen and (min-width: 600px) { .mod_head02 { padding: 37px 15px 45px; }
  .mod_head02:after { bottom: -27px; border-width: 14px; border-top-color: #503015; }
  .mod_head02 .mod_head02_tit { padding: 18px 30px 0 20px; font-size: 4.2rem; }
  .mod_head02 .mod_head02_tit:after { width: 29px; height: 25px; }
  .mod_head02 .mod_head02_en { margin-top: 8px; font-size: 1.4rem; } }

/*
Title

mod_tit02
 
.mod_tit02            - Base styles
.mod_tit02.is_ico01            - is_ico01
.mod_tit02.is_ico02            - is_ico02
.mod_tit02.is_ico03            - is_ico03
.mod_tit02.is_ico04            - is_ico04
.mod_tit02.is_ico05            - is_ico05
.mod_tit02.is_ico06            - is_ico06
.mod_tit02.is_ico07            - is_ico07
.mod_tit02.is_ico08            - is_ico08
 
Markup:
<h3 class="mod_tit02 {$modifiers}">一般歯科</h3>
 
Styleguide 1.0.3
*/
.mod_tit02 { position: relative; padding: 9px 9px 9px 38px; font-size: 1.8rem; line-height: 1.22; font-weight: 700; border-bottom: 3px solid #7faf20; }

.mod_tit02:before { position: absolute; top: 50%; left: 0; content: ""; display: block; width: 38px; height: 26px; margin-top: -13px; background: no-repeat center; background-size: contain; }

.mod_tit02.is_ico01:before { background-image: url("../img/common/ico_treatment01.png"); }

.mod_tit02.is_ico02:before { background-image: url("../img/common/ico_treatment02.png"); }

.mod_tit02.is_ico03:before { background-image: url("../img/common/ico_treatment03.png"); }

.mod_tit02.is_ico04:before { background-image: url("../img/common/ico_treatment04.png"); }

.mod_tit02.is_ico05:before { background-image: url("../img/common/ico_treatment05.png"); }

.mod_tit02.is_ico06:before { background-image: url("../img/common/ico_treatment06.png"); }

.mod_tit02.is_ico07:before { background-image: url("../img/common/ico_treatment07.png"); }

.mod_tit02.is_ico08:before { background-image: url("../img/common/ico_treatment08.png"); }

.mod_tit02.is_ico09:before { background-image: url("../img/common/ico_treatment09.png"); }

@media screen and (min-width: 600px) { .mod_tit02 { padding: 12px 12px 12px 60px; font-size: 2.2rem; }
  .mod_tit02:before { left: 1px; width: 58px; height: 40px; margin-top: -20px; } }

/*
Title

mod_tit03
 
.mod_tit03            - Base styles
 
Markup:
<h4 class="mod_tit03 {$modifiers}">治療案内</h4>
 
Styleguide 1.0.4
*/
.mod_tit03 { font-size: 1.6rem; line-height: 1.75; letter-spacing: .08em; font-weight: 700; text-indent: -1em; padding-left: 1em; }

@media screen and (min-width: 600px) { .mod_tit03 { font-size: 2rem; } }

/*!  txt
================================================ */
/*
Text

mod_txt01
 
.mod_txt01            - Base styles
 
Markup:
<p class="mod_txt01">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入りますテキストが入りますテキストが入ります</p>
 
Styleguide 7.0.0
*/
.mod_txt01 { margin-top: 15px; }

@media screen and (min-width: 600px) { .mod_txt01 { margin-top: 20px; text-align: center; } }