@charset "UTF-8";
/*  04_modules
================================================ */
/*!  anchor
================================================ */
/*
Anchor

mod_anchor01

.mod_anchor01            - Base styles

Markup:
<ul class="list mod_anchor01">
	<li class="item"><a href="#hoge1">口臭検査</a></li>
	<li class="item"><a href="#hoge2">唾液検査</a></li>
	<li class="item"><a href="#hoge3">相違差顕微鏡<br>（細菌検査）</a></li>
	<li class="item"><a href="#hoge4">CT画像検査</a></li>
</ul>

Styleguide 9.0.0
*/
.mod_anchor01 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -5px; margin-right: -5px; }

.mod_anchor01 .item { padding: 0 5px; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.3rem; color: #666464; width: 50%; }

.mod_anchor01 .item:nth-child(n+3) { margin-top: 10px; }

.mod_anchor01 .item a { position: relative; text-decoration: none; display: -webkit-box; display: -ms-flexbox; display: flex; border: 2px solid #b0afaf; background: #fff; padding: 17px 20px; width: 100%; text-align: center; font-weight: 500; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.mod_anchor01 .item a:after { content: ""; position: absolute; right: 13px; top: 50%; margin-top: -4px; width: 0; height: 0; border-style: solid; border-width: 7px 6.5px 0 6.5px; border-color: #ff7391 transparent transparent transparent; }

@media screen and (min-width: 600px) { .mod_anchor01 { -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding: 0; font-size: 1.6rem; margin-left: 0; margin-right: 0; }
  .mod_anchor01 .item { padding: 0; font-size: 1.6rem; }
  .mod_anchor01 .item + .item { margin-left: 13px; }
  .mod_anchor01 .item:nth-child(n+3) { margin-top: 0; }
  .mod_anchor01 .item a { padding: 20px 10px; }
  .mod_anchor01 .item a:after { right: 14px; top: 50%; margin-top: -2px; }
  .mod_anchor01 .item a:hover { background: #ff7391; color: #fff; border-color: #ff7391; }
  .mod_anchor01 .item a:hover:after { border-color: #fff transparent transparent transparent; } }

/*!  archives
================================================ */
/*
ARCHIVES

mod_archive01

.mod_archive01            - Base styles

Markup:
<div class="archive mod_archive01">
	<div class="mod_archive01_item">
		<a href="#" class="mod_archive01_link">
			<div class="mod_archive01_img"><img src="https://placehold.jp/460x289.png" alt=""></div>
			<div class="mod_archive01_detail">
				<p class="mod_archive01_time font_cinzel">2019.00.00</p>
				<p class="mod_archive01_tit">インプラント治療</p>
			</div>
		</a>
	</div>
</div>

Styleguide 6.0.0
*/
.mod_archive01 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; box-sizing: border-box; }

.mod_archive01_item { width: 50%; padding: 0 8px 33px; box-sizing: border-box; }

.mod_archive01_link { text-decoration: none; }

.mod_archive01_img { display: -webkit-box; display: -ms-flexbox; display: flex; height: 119px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #d4d4d4; }

.mod_archive01_img img { object-fit: contain; }

.mod_archive01_detail { padding-top: 15px; }

.mod_archive01_time { font-size: 1.2rem; color: #666464; line-height: 1; }

@media screen and (min-width: 600px) { .mod_archive01 { margin: 0 -18px; box-sizing: border-box; }
  .mod_archive01_item { width: 25%; margin-right: 0; padding: 0 18px 33px; box-sizing: border-box; }
  .mod_archive01_link { width: 100%; }
  .mod_archive01_link:hover .mod_archive01_img img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
  .mod_archive01_link:hover .mod_archive01_tit, .mod_archive01_link:hover .mod_archive01_time { color: #ff7391; }
  .mod_archive01_detail { padding-top: 20px; }
  .mod_archive01_img { width: 100%; height: 159px; overflow: hidden; }
  .mod_archive01_img img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_archive01_time { font-size: 1.3rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_archive01_tit { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 1.6rem; } }

/*
ARCHIVES

mod_archive02

.mod_archive02            - Base styles

Markup:
<ul class="archive mod_archive02">
		<li class="mod_archive02_item">
			<a href="#" class="mod_archive02_link">
				<p class="mod_archive02_time font_cinzel">2019.00.00</p>
				<p class="mod_archive02_tit">タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
			</a>
		</li>
</ul>

Styleguide 6.1.0
*/
.mod_archive02 { border-top: 1px solid #e6e1e1; }

.mod_archive02_item { border-bottom: 1px solid #e6e1e1; }

.mod_archive02_link { display: block; padding: 18px 2px 11px; text-decoration: none; }

.mod_archive02_time { font-size: 1.2rem; color: #666; line-height: 1; }

.mod_archive02_tit { font-size: 1.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media screen and (min-width: 600px) { .mod_archive02_link { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 22px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .mod_archive02_link:hover .mod_archive02_time, .mod_archive02_link:hover .mod_archive02_tit { color: #ff7391; }
  .mod_archive02_time { padding-right: 20px; font-size: 1.3rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_archive02_tit { width: 500px; font-size: 1.5rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } }

/*!  bg
================================================ */
/*
Background

mod_bg_gradation

.mod_bg_gradation

Markup:
<section id="hoge" class="hogeSec mod_bg_oblique01">
	<div class="inner mod_inner01">
	 ------
	</div>
</section>

Styleguide 3.0.0
*/
.mod_bg_oblique01 { position: relative; overflow: hidden; background: #fafafa; }

.mod_bg_oblique01 > .inner { position: relative; z-index: 1; }

.mod_bg_oblique01:after { position: absolute; z-index: 0; bottom: 0; right: 0; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 0 645px 645px; border-color: transparent transparent #f5f5f5 transparent; }

@media screen and (min-width: 600px) { .mod_bg_oblique01:after { right: 0; border-width: 0 0 1086px 1086px; } }

.mod_bg_oblique01.is_pink { background: #fff1f3; }

.mod_bg_oblique01.is_pink:after { border-color: transparent transparent #faecee transparent; }

.mod_bg_oblique02 { background: -webkit-linear-gradient(316deg, #fc6a89 0%, #fc6a89 41%, #ff7391 41%, #ff7391 100%); background: linear-gradient(134deg, #fc6a89 0%, #fc6a89 41%, #ff7391 41%, #ff7391 100%); }

.mod_bg_oblique03 { background: -webkit-linear-gradient(316deg, #ffeced 0%, #ffeced 41%, #fff1f3 41%, #fff1f3 100%); background: linear-gradient(134deg, #ffeced 0%, #ffeced 41%, #fff1f3 41%, #fff1f3 100%); }

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

mod_btn01

.mod_btn01 -base style
.mod_btn01.is_white -is_white

Markup:
<p class="mod_btn01 {$modifiers}"><a href="#">Button</a></p>

Styleguide 2.0.0
*/
.mod_btn01 { max-width: 315px; margin: 0 auto; }

.mod_btn01 a { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 67px; border: 2px solid #e61d47; background: #fff; overflow: hidden; color: #e61d47; text-decoration: none; text-align: center; font-size: 1.5rem; line-height: 1.4; font-weight: 500; box-sizing: border-box; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_btn01 a:before { content: ""; position: absolute; right: -7px; bottom: -7px; width: 13px; height: 13px; background: #e61d47; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.mod_btn01 a .small { padding-top: 7px; font-size: 1.2rem; font-weight: 400; }

.mod_btn01.is_size_large a { height: 80px; }

@media screen and (min-width: 600px) { .mod_btn01 { max-width: none; width: 370px; }
  .mod_btn01 a { font-size: 1.6rem; height: 72px; }
  .mod_btn01 a:hover { background: #ff7391; color: #fff; }
  .mod_btn01 a .small { padding-top: 0; font-size: 1.4rem; }
  .mod_btn01.is_size_large a { border-width: 1px; height: 85px; } }

/*
Button

mod_btn02

.mod_btn02 -base style
.mod_btn02.is_white -is_white

Markup:
<p class="mod_btn02 {$modifiers}"><a href="#">Button</a></p>

Styleguide 2.1.0
*/
.mod_btn02 a { display: inline-block; width: 75px; padding: 8px 0; text-align: center; border: 2px solid #ebe6e6; color: #666; font-size: 1.4rem; line-height: 1; text-decoration: none; }

@media screen and (min-width: 600px) { .mod_btn02 { font-size: 1.5rem; }
  .mod_btn02 a { width: 80px; padding: 12px 0; }
  .mod_btn02 a:hover { border-color: #ff7391; color: #ff7391; } }

/*!  form
================================================ */
/*
mod_pagination

mod_pagination01

.mod_pagination01 -base style

Markup:
<div class="mod_form01">
	<table class="mod_form01_table">
		<tr>
			<th>氏名<span>※</span>(a)</th>
			<td><input type="text"></td>
		</tr>
		<tr>
			<th>メールアドレス<span>※</span>(b)</th>
			<td><input type="text"></td>
		</tr>
	</table>
</div>

Styleguide 8.0.0
*/
.mod_form01_table { table-layout: fixed; border-right: 1px solid #ff7391; border-left: 1px solid #ff7391; margin-bottom: 21px; }

.mod_form01_table input[type="text"] { color: #666464; border: 1px solid #d9d9d9; width: 100%; box-shadow: 0px 2px 0px 0px #d9d9d9 inset; padding: 9px 7px 9px 11px; box-sizing: border-box; border-radius: 0; }

.mod_form01_table select { -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #666464; border: 1px solid #d9d9d9; width: 150px; box-shadow: 0px 2px 0px 0px #d9d9d9 inset; padding: 9px 0px 9px 11px; box-sizing: border-box; border-radius: 0; background: url(../img/contact/select_ico01.png) right 9px top 17px no-repeat, #fff; background-size: 9px 6px; }

.mod_form01_table select::-ms-expand { display: none; }

.mod_form01_table textarea { resize: none; color: #666464; border: 1px solid #d9d9d9; width: 100%; min-height: 248px; box-shadow: 0px 2px 0px 0px #d9d9d9 inset; padding: 9px 0px 9px 11px; box-sizing: border-box; border-radius: 0; }

.mod_form01_table tr:first-of-type th { border-top: 1px solid #ff7391; }

.mod_form01_table th { background: #fee6ea; font-size: 1.6rem; font-weight: bold; padding: 10px 0 12px 17px; border-bottom: 1px solid #ff7391; }

.mod_form01_table th span { color: #e61d47; margin-right: 10px; }

.mod_form01_table td { padding: 18px 17px 18px 17px; border-bottom: 1px solid #ff7391; background: #fff; vertical-align: middle; }

.mod_form01_table td span { display: inline-block; font-size: 1.4rem; color: #666464; padding: 0 8px 7px; }

.mod_form01 .box input[type="checkbox"] { display: none; }

.mod_form01 .box label { position: relative; padding-left: 33px; }

.mod_form01 .box label span { font-size: 1.2rem; letter-spacing: .08em; color: #666464; }

.mod_form01 .box label:before { position: absolute; top: 0; left: 0; content: ""; height: 25px; width: 25px; box-sizing: border-box; border: 1px solid #d9d9d9; box-shadow: 0px 2px 0px 0px #d9d9d9 inset; background-color: #fff; }

.mod_form01 .box input[type="checkbox"]:checked + span:after { display: block; position: absolute; content: ""; top: 5px; left: 8px; width: 5px; height: 9px; -webkit-transform: rotate(43deg); -ms-transform: rotate(43deg); transform: rotate(43deg); border-bottom: 3px solid #e61d47; border-right: 3px solid #e61d47; }

.mod_form01 .date { overflow: hidden; }

.mod_form01 .date .select { float: left; }

.mod_form01 .date select { width: 60px; }

.mod_form01 .agree { margin-top: 20px; }

.mod_form01 .agree input[type="submit"] { cursor: pointer; display: block; background: url(../img/contact/bg01.png) right bottom no-repeat; background-size: cover; color: #fff; font-size: 1.7rem; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", sans-serif; letter-spacing: .16em; text-align: center; width: 290px; border-style: none; border-radius: 2px; padding: 24px 0 21px; margin: 0 auto; }

@media screen and (max-width: 599px) { .mod_form01_table table, .mod_form01_table thead, .mod_form01_table tbody, .mod_form01_table tr, .mod_form01_table th, .mod_form01_table td { display: block; } }

@media screen and (min-width: 600px) { .mod_form01_table { margin-bottom: 38px; }
  .mod_form01_table input[type="text"] { width: auto; max-width: 100%; padding: 11px 7px 11px 11px; }
  .mod_form01_table select { width: 127px; padding: 11px 7px 11px 11px; background-size: 12px 8px; background-position: right 9px top 18px; }
  .mod_form01_table input[type="date"] { padding: 11px 7px 11px 11px; width: 160px; }
  .mod_form01_table textarea { min-height: 300px; padding-top: 11px; }
  .mod_form01_table tr:first-of-type td { border-top: 1px solid #ff7391; }
  .mod_form01_table th { border-right: 1px solid #ff7391; width: 270px; box-sizing: border-box; font-size: 1.8rem; padding: 30px 0 31px 32px; }
  .mod_form01_table td { padding: 23px 24px 20px 24px; }
  .mod_form01_table td span { margin-right: 16px; }
  .mod_form01 .box { text-align: center; }
  .mod_form01 .box label { margin-left: 8px; }
  .mod_form01 .box label span { margin-left: 5px; font-size: 1.5rem; }
  .mod_form01 .date select { width: 90px; }
  .mod_form01 .agree { margin-top: 40px; }
  .mod_form01 .agree input[type="submit"] { width: 300px; padding: 25px 0 27px; font-size: 2rem; border-radius: 4px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_form01 .agree input[type="submit"]:hover { opacity: .8; } }

/*!  pager
================================================ */
/*
mod_pagination

mod_pagination01

.mod_pagination01 -base style

Markup:
<div class="mod_pagination01">
	<ul class="mod_pagination01_navi">
		<li class="previous">
			<a href="" class="font_cinzel"><</a>
		</li>
		<li class="current head">
			<a href="" class="font_cinzel">01</a>
		</li>
		<li class="after">
			<a href="" class="font_cinzel">02</a>
		</li>
		<li class="after">
			<a href="" class="font_cinzel">03</a>
		</li>
		<li class="after">
			<a href="" class="font_cinzel">04</a>
		</li>
		<li class="next">
			<a href="" class="font_cinzel">></a>
		</li>
	</ul>
</div>

Styleguide 7.0.0
*/
.mod_pagination01 { margin-top: 32px; text-align: center; }

.mod_pagination01_navi li { display: inline-block; }

.mod_pagination01_navi li + li { margin-left: 6px; }

.mod_pagination01_navi a { position: relative; display: block; color: #ff7391; text-decoration: none; font-size: 1.6rem; font-weight: bold; letter-spacing: .08em; width: 35px; height: 35px; border: 1px solid #ff7391; padding-top: 3px; box-sizing: border-box; }

.mod_pagination01_navi span { display: block; color: #ff7391; text-decoration: none; font-size: 1.6rem; font-weight: bold; letter-spacing: .08em; width: 35px; height: 35px; border: 1px solid #ff7391; padding-top: 3px; box-sizing: border-box; }

.mod_pagination01_navi .current span { color: #fff; background-color: #ff7391; }

.mod_pagination01 .previous, .mod_pagination01 .next { position: relative; }

.mod_pagination01 .previous a, .mod_pagination01 .next a { overflow: hidden; text-indent: 100%; }

.mod_pagination01 .previous a:before { position: absolute; content: ""; top: 10px; left: 13px; width: 0; height: 0; border-style: solid; border-width: 6px 6px 6px 0; border-color: transparent #ff7391 transparent transparent; }

.mod_pagination01 .next a:after { position: absolute; content: ""; top: 10px; left: 14px; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #ff7391; }

@media screen and (min-width: 600px) { .mod_pagination01 { margin-top: 50px; }
  .mod_pagination01_navi li + li { margin-left: 5px; }
  .mod_pagination01_navi a { font-size: 1.8rem; width: 40px; height: 40px; padding-top: 3px; }
  .mod_pagination01_navi a:hover { color: #fff; background-color: #ff7391; }
  .mod_pagination01_navi span { font-size: 1.8rem; width: 40px; height: 40px; padding-top: 3px; }
  .mod_pagination01 .previous a:before { top: 13px; left: 16px; }
  .mod_pagination01 .previous:hover a:before { border-color: transparent #fff transparent transparent; }
  .mod_pagination01 .next a:after { top: 13px; left: 16px; }
  .mod_pagination01 .next:hover a:after { border-color: transparent transparent transparent #fff; } }

/*
mod_pagination

mod_pagination02

.mod_pagination01 -base style

Markup:
<div class="mod_pagination02">
	<ul class="mod_pagination02_navi">
		<li class="previous">
			<a href="" class="font_cinzel"><</a>
		</li>
		<li class="current head">
			<span class="font_cinzel">01</span>
		</li>
		<li class="next">
			<a href="" class="font_cinzel">></a>
		</li>
	</ul>
</div>

Styleguide 7.1.0
*/
.mod_pagination02_navi { margin-top: 25px; text-align: center; }

.mod_pagination02_navi li { display: inline-block; }

.mod_pagination02_navi li + li { margin-left: 6px; }

.mod_pagination02_navi li.head a { display: block; width: 150px; color: #fff; background-color: #ff7391; text-decoration: none; font-size: 1.4rem; font-weight: 200; letter-spacing: .08em; height: 35px; border: 1px solid #ff7391; padding-top: 3px; box-sizing: border-box; }

.mod_pagination02_navi a { position: relative; display: block; color: #ff7391; text-decoration: none; letter-spacing: .08em; width: 35px; height: 35px; border: 1px solid #ff7391; padding-top: 3px; box-sizing: border-box; }

.mod_pagination02_navi .previous, .mod_pagination02_navi .next { position: relative; }

.mod_pagination02_navi .previous a, .mod_pagination02_navi .next a { overflow: hidden; text-indent: 100%; }

.mod_pagination02_navi .previous a:before { position: absolute; content: ""; top: 12px; left: 15px; width: 0; height: 0; border-style: solid; border-width: 6px 6px 6px 0; border-color: transparent #ff7391 transparent transparent; }

.mod_pagination02_navi .next a:after { position: absolute; content: ""; top: 12px; left: 14px; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #ff7391; }

@media screen and (min-width: 600px) { .mod_pagination02 { margin-top: 50px; }
  .mod_pagination02_navi li { display: inline-block; }
  .mod_pagination02_navi li + li { margin-left: 3px; }
  .mod_pagination02_navi li.head a { font-size: 1.5rem; width: 180px; height: 50px; padding-top: 10px; }
  .mod_pagination02_navi a { font-size: 1.5rem; width: 180px; height: 50px; padding: 10px 0 0 15px; }
  .mod_pagination02_navi a:hover { color: #fff; background-color: #ff7391; }
  .mod_pagination02_navi .previous a, .mod_pagination02_navi .next a { text-indent: 0; }
  .mod_pagination02_navi .previous a:before { top: 18px; left: 13px; }
  .mod_pagination02_navi .next a { padding-left: 0px; }
  .mod_pagination02_navi .next a:after { top: 18px; left: auto; right: 13px; }
  .mod_pagination02_navi .previous:hover a:before { border-color: transparent #fff transparent transparent; }
  .mod_pagination02_navi .next:hover a:after { border-color: transparent transparent transparent #fff; } }

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

mod_table01

.mod_table01            - Base styles

Markup:
<div class="mod_table01 {$modifiers}">
	<table><tbody>
		<tr>
			<th></th>
			<td></td>
		</tr>
	</tbody></table>
</div>

Styleguide 4.0.0
*/
.mod_table01 { border-left: 1px solid #ff7391; border-right: 1px solid #ff7391; }

.mod_table01 tr:first-of-type th { border-top: 1px solid #ff7391; }

.mod_table01 th { font-size: 1.6rem; font-weight: bold; background: #fee6ea; border-bottom: 1px solid #ff7391; padding: 9px 0 12px 16px; }

.mod_table01 td { border-bottom: 1px solid #ff7391; padding: 12px 7px 13px 17px; }

@media screen and (max-width: 599px) { .mod_table01 table, .mod_table01 thead, .mod_table01 tbody, .mod_table01 tr, .mod_table01 th, .mod_table01 td { display: block; } }

@media screen and (min-width: 600px) { .mod_table01 { table-layout: fixed; }
  .mod_table01 tr:first-of-type td { border-top: 1px solid #ff7391; }
  .mod_table01 tr:nth-child(2) th { padding-top: 36px; }
  .mod_table01 th { display: table-cell; border-right: 1px solid #ff7391; font-size: 1.8rem; width: 220px; box-sizing: border-box; padding: 23px 0 24px 29px; }
  .mod_table01 td { display: table-cell; font-size: 1.6rem; padding: 24px 0px 25px 28px; } }

/*
Table

mod_table02

.mod_table02            - Base styles

Markup:
<div class="mod_table02 {$modifiers}">
	<table>
		<thead>
			<tr>
				<th></th>
				<td></td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th></th>
				<td></td>
			</tr>
		</tbody>
	</table>
</div>

Styleguide 4.0.1
*/
.mod_table02 { padding-top: 10px; margin-bottom: 10px; }

.mod_table02 thead th { background: #ff7391; padding: 10px; text-align: center; color: #fff; font-size: 1.6rem; font-weight: 500; }

.mod_table02 thead th:nth-child(n+2) { border-left: 1px solid #fff; }

.mod_table02 thead th:last-child { border-right: 1px solid #ff7391; }

.mod_table02 tbody th { border: 1px solid #ff7391; background: #fee6ea; padding: 10px 20px; text-align: center; vertical-align: middle; font-weight: 500; }

.mod_table02 tbody td { border: 1px solid #ff7391; background: #fff; padding: 10px 20px; text-align: center; white-space: pre-wrap; }

@media screen and (max-width: 599px) { .mod_table02 { overflow: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } }

@media screen and (min-width: 600px) { .mod_table02 { padding-top: 40px; padding-left: 1px; padding-right: 1px; margin-bottom: 42px; }
  .mod_table02 thead th { font-size: 1.8rem; padding: 14px; }
  .mod_table02 thead th:nth-child(1) { border-left: 1px solid #ff7391; }
  .mod_table02 tbody th { font-size: 1.8rem; padding: 18px 20px; line-height: 2.2; letter-spacing: 0.08em; }
  .mod_table02 tbody td { font-size: 1.6rem; vertical-align: middle; } }

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

mod_tit01

.mod_tit01            - Base styles

Markup:
<header class="headerTit mod_tit01">
	<h2 class="mod_tit01_main font_serif">当院の提供する精密治療</h2>
	<p class="mod_tit01_sub font_cinzel">TREATMENT</p>
</header>

Styleguide 1.0.0
*/
.mod_tit01 { position: relative; padding: 27px 0 15px; text-align: center; }

.mod_tit01_main { font-size: 2.1rem; font-weight: 600; line-height: 1.2; }

.mod_tit01_sub { padding-top: 8px; font-size: 1.1rem; color: #ff7391; line-height: 1; }

.mod_tit01:before { content: ""; position: absolute; top: 10px; left: 50%; -webkit-transform: translate(-50%, 0) rotate(-45deg); -ms-transform: translate(-50%, 0) rotate(-45deg); transform: translate(-50%, 0) rotate(-45deg); width: 23px; height: 1px; background: #ff7391; }

.mod_tit01.is_left { text-align: left; }

.mod_tit01.is_left:before { left: 0; -webkit-transform: translate(0, 0) rotate(-45deg); -ms-transform: translate(0, 0) rotate(-45deg); transform: translate(0, 0) rotate(-45deg); }

@media screen and (min-width: 600px) { .mod_tit01 { padding: 37px 0; }
  .mod_tit01_main { font-size: 3.2rem; }
  .mod_tit01_sub { padding-top: 18px; font-size: 1.6rem; }
  .mod_tit01:before { width: 34px; height: 2px; } }

/*
Title

mod_tit01.is_line

.mod_tit01.is_line            - is_line

Markup:
<header class="headerTit mod_tit01 is_line">
	<h2 class="mod_tit01_main font_serif">当院の提供する精密治療</h2>
</header>

Styleguide 1.0.1
*/
.mod_tit01.is_line { position: relative; padding: 22px 15px 12px; margin-bottom: 30px; text-align: center; }

.mod_tit01.is_line .mod_tit01_main { font-size: 2.1rem; font-weight: 600; line-height: 1.75; letter-spacing: 0.08em; }

.mod_tit01.is_line:before { content: ""; position: absolute; top: 10px; left: 50%; -webkit-transform: translate(-50%, 0) rotate(-45deg); -ms-transform: translate(-50%, 0) rotate(-45deg); transform: translate(-50%, 0) rotate(-45deg); width: 23px; height: 1px; background: #ff7391; }

.mod_tit01.is_line:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 24px; height: 3px; background: #ff7391; }

@media all and (max-width: 350px) { .mod_tit01.is_line .mod_tit01_main { font-size: 1.8rem; } }

@media screen and (min-width: 600px) { .mod_tit01.is_line { padding: 28px 0 12px; margin-bottom: 50px; }
  .mod_tit01.is_line .mod_tit01_main { font-size: 3.2rem; }
  .mod_tit01.is_line:before { width: 34px; height: 2px; }
  .mod_tit01.is_line:after { width: 28px; } }

/*
Title

mod_tit02

.mod_tit02            - Base styles

Markup:
<h3 class="mod_tit02">その他の精密治療はこちら</h3>

Styleguide 1.1.0
*/
.mod_tit02 { padding: 5px; margin-bottom: 17px; background: #ff7391; color: #fff; font-size: 1.5rem; font-weight: 500; text-align: center; }

@media screen and (min-width: 600px) { .mod_tit02 { padding: 4px 0 11px; margin-bottom: 31px; font-size: 1.6rem; } }

/*
Title

mod_tit03

.mod_tit03            - Base styles

Markup:
<h3 class="mod_tit03">その他の精密治療はこちら</h3>

Styleguide 1.2.0
*/
.mod_tit03 { padding: 9px 15px; margin-bottom: 17px; color: #fff; letter-spacing: 0.08em; line-height: 1.75; font-size: 1.9rem; font-weight: 500; background: -webkit-linear-gradient(316deg, #fc6a89 0%, #fc6a89 35px, #ff7391 35px, #ff7391 100%); background: linear-gradient(134deg, #fc6a89 0%, #fc6a89 35px, #ff7391 35px, #ff7391 100%); }

@media screen and (min-width: 600px) { .mod_tit03 { padding: 5px 30px; margin-bottom: 31px; font-size: 2.8rem; background: -webkit-linear-gradient(316deg, #fc6a89 0%, #fc6a89 40px, #ff7391 40px, #ff7391 100%); background: linear-gradient(134deg, #fc6a89 0%, #fc6a89 40px, #ff7391 40px, #ff7391 100%); } }

/*
Title

mod_tit04

.mod_tit04            - Base styles

Markup:
<h4 class="mod_tit04">その他の精密治療はこちら</h4>

Styleguide 1.3.0
*/
.mod_tit04 { position: relative; margin-bottom: 30px; padding: 0 15px; line-height: 1.65; font-size: 1.7rem; font-weight: 500; letter-spacing: 0.08em; }

.mod_tit04:before { position: absolute; left: 0; bottom: 0; content: ''; width: 4px; height: 100%; background: -webkit-linear-gradient(316deg, #ff88a1 0%, #ff88a1 50%, #ff7391 50%, #ff7391 100%); background: linear-gradient(134deg, #ff88a1 0%, #ff88a1 50%, #ff7391 50%, #ff7391 100%); }

.mod_tit04:after { position: absolute; left: 0; bottom: -10px; content: ''; width: 100%; height: 0; border-bottom: 1px solid #fbdfe5; }

@media screen and (min-width: 600px) { .mod_tit04 { padding: 0 25px; margin-bottom: 60px; font-size: 2.4rem; }
  .mod_tit04:before { width: 5px; }
  .mod_tit04:after { bottom: -23px; } }

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

mod_txt01

.mod_txt01            - Base styles

Markup:
<p class="mod_introTxt01">当院では、あらゆる歯科治療を精密に行い、本気で治したい」という方の想いに応える技術をご提供いたします。</p>

Styleguide 5.0.0
*/
.mod_introTxt01 { padding: 0 35px; font-size: 1.5rem; line-height: 2.2; }

@media screen and (min-width: 600px) { .mod_introTxt01 { padding: 0; font-size: 1.6rem; text-align: center; } }
