@charset "UTF-8";
/*  04_modules
================================================ */
/* archive
================================================ */
/*
#styleguide
mod_archive01

ブログ記事一覧
高さ揃えはdata-mh属性でmatchheight使用。
```
<ul class="archive mod_archive01">
	<li class="post" data-mh="home-blog"><a href="#" class="alpha">
		<div class="pic"><img src="http://wptest.mh-test.com/cms/wp-content/uploads/2015/07/pic_dummy01-640x400.png" class="attachment-pic640 size-pic640 wp-post-image" alt="" title="" width="576" height="360"></div>
		<ul class="meta">
			<li class="cat">カテゴリ</li>
			<li class="date">0000.00.00</li>
		</ul>
		<p class="sub">記事タイトル</p>
	</a></li>
	<li class="post" data-mh="home-blog"><a href="#" class="alpha">
		<div class="pic"><img src="http://wptest.mh-test.com/cms/wp-content/uploads/2015/07/pic_dummy01-640x400.png" class="attachment-pic640 size-pic640 wp-post-image" alt="" title="" width="576" height="360"></div>
		<ul class="meta">
			<li class="cat">カテゴリ</li>
			<li class="date">0000.00.00</li>
		</ul>
		<p class="sub">記事タイトル</p>
	</a></li>
	<li class="post" data-mh="home-blog"><a href="#" class="alpha">
		<div class="pic"><img src="http://wptest.mh-test.com/cms/wp-content/uploads/2015/07/pic_dummy01-640x400.png" class="attachment-pic640 size-pic640 wp-post-image" alt="" title="" width="576" height="360"></div>
		<ul class="meta">
			<li class="cat">カテゴリ</li>
			<li class="date">0000.00.00</li>
		</ul>
		<p class="sub">記事タイトル</p>
	</a></li>
</ul>
```
*/
.mod_archive01 { margin-bottom: 50px; }

.mod_archive01 .post { border-bottom: 1px solid #d9d9d9; padding: 0 0 20px 0; margin-bottom: 20px; overflow: hidden; }

.mod_archive01 .post .img { width: 270px; float: left; box-sizing: border-box; }

.mod_archive01 .post .txtArea { width: 470px; margin-left: 30px; float: left; }

.mod_archive01 .post .txtArea .cat { display: inline-block; color: #fff; background: #999; padding: 0 14px 1px; margin-right: 10px; font-size: 1.1rem; }

.mod_archive01 .post .txtArea .time { display: inline-block; color: #a22626; font-weight: 500; font-size: 1.5rem; line-height: 1.5; }

.mod_archive01 .post .txtArea .tit { font-size: 2rem; font-weight: 500; line-height: 1.6; margin: 14px 0 10px; }

.mod_archive01 .post .txtArea .txt { font-size: 1.5rem; line-height: 1.7; }

.mod_archive01 .post .txtArea .txt a { display: block; }

.mod_archive01 .post .sub { font-weight: 700; }

@media screen and (max-width: 599px) { .mod_archive01 { margin-bottom: 30px; }
  .mod_archive01 .post .img { width: 30%; }
  .mod_archive01 .post .txtArea { width: 65%; margin-left: 5%; margin-top: -5px; }
  .mod_archive01 .post .txtArea .tit { font-size: 1.5rem; margin: 6px 0 4px; font-weight: 700; }
  .mod_archive01 .post .txtArea .txt { font-size: 1.3rem; } }

/*!  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%); }

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

ボタン

Styleguide 2.0.0
*/
/*
mod_btn01

ボタン1

.mod_btn01 - base style
.mod_btn01.is_blue - is_blue

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

Styleguide 2.1.0
*/
.mod_btn01 { width: 350px; margin: 0 auto; position: relative; background: url(../img/common/bg_btn01.png) 0 0 no-repeat; background-size: cover; }

.mod_btn01 a { display: block; padding: 21px 0; color: #fff; font-size: 1.6rem; text-align: center; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; box-sizing: border-box; }

.mod_btn01 a:after { position: absolute; top: 45%; right: 10px; content: ''; width: 6px; height: 9px; background: url(../img/common/ico_arrow01.png) no-repeat; background-size: contain; }

.mod_btn01 a:hover { background: #db0012; }

@media screen and (max-width: 599px) { .mod_btn01 { width: 100%; }
  .mod_btn01 a { font-size: 1.5rem; padding: 20px 0; } }

/*!  tit
================================================ */
/*
form

フォーム

Styleguide 8.0.0
*/
/*
mod_form01

インプット系
 
.mod_form01 - base style
.mod_form01.required - 必須
.mod_form01.col2 - 横幅50%
.mod_form01.zipcode - 郵便番号
 
Markup:
<dl class="mod_form01 {$modifiers}">
  <dt>タイトル</dt>
  <dd><input type="text"></dd>
</dl>
 
Styleguide 8.1.0
*/
#errorMsg { text-align: center; margin: 20px 0; }

.mod_form01 dt { margin-bottom: 13px; }

.mod_form01 dt:after { content: "任意"; font-size: 1.4rem; color: #fff; background-color: #372625; padding: 1px 10px 3px; margin-left: 16px; }

.mod_form01 dd input[type="text"] { background-color: #efeeee; width: 100%; padding: 19px 20px 20px; box-sizing: border-box; }

.mod_form01 dd select { width: 100%; padding: 19px 20px 20px; box-sizing: border-box; background: #efeeee url(../img/contactus/ico_arrow01.png) no-repeat right top; background-size: contain; }

.mod_form01 dd textarea { background-color: #efeeee; resize: none; padding: 19px 20px 20px; box-sizing: border-box; width: 100%; height: 200px; }

.mod_form01.required dt:after { content: "必須"; background-color: #a22626; }

.mod_form01.col2 { width: 525px; }

.mod_form01.zipcode dd { position: relative; }

.mod_form01.zipcode dd input[type="text"] { width: 300px; margin-left: 32px; }

.mod_form01.zipcode dd:before { content: "〒"; position: absolute; font-weight: bold; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.mod_form01.zipcode dd span.input_wrap { margin-left: 17px; }

@media screen and (max-width: 599px) { .mod_form01 dt { margin-bottom: 10px; font-size: 1.5rem; }
  .mod_form01 dt:after { font-size: 1.3rem; padding: 1px 8px 2px; margin-left: 12px; }
  .mod_form01 dd input[type="text"], .mod_form01 dd input[type="tel"] { padding: 15px 20px; }
  .mod_form01 dd select { padding: 15px 20px; }
  .mod_form01 dd textarea { padding: 15px 20px; height: 175px; }
  .mod_form01.col2 { width: 100%; }
  .mod_form01.zipcode dd input[type="text"] { width: 50%; margin-left: 25px; } }

/*
mod_form_submit01

送信ボタン
 
.mod_form01_submit01 - base style
 
Markup:
<p class="btn mod_form_submit01"><input type="submit" value="上記の内容で送信する"/></p>
 
Styleguide 8.2.0
*/
.mod_form_submit01 { width: 350px; margin: 0 auto; }

.mod_form_submit01 input[type="submit"], .mod_form_submit01 input[type="button"] { height: 70px; width: 100%; margin-bottom: 20px; color: #fff; background: #a22626 url(../img/common/ico_arrow01.png) no-repeat right 20px top 50%; -webkit-transition: all ease 0.3s; transition: all ease 0.3s; cursor: pointer; }

.mod_form_submit01 input[type="submit"]:hover, .mod_form_submit01 input[type="button"]:hover { background-position: right 10px top 50%; }

.mod_form_submit01 input[type="submit"] { margin-bottom: 0; }

.mod_form_submit01 input[type="button"] { background: #a22626 url(../img/common/ico_arrow01_rev.png) no-repeat left 20px top 50%; }

.mod_form_submit01 input[type="button"]:hover { background-position: left 10px top 50%; }

@media screen and (max-width: 599px) { .mod_form_submit01 { width: 100%; margin: 0 10px; }
  .mod_form_submit01 input[type="submit"], .mod_form_submit01 input[type="button"] { height: 65px; } }

.mod_inner01 { box-sizing: border-box; width: 1100px; margin: auto; }

@media screen and (max-width: 599px) { .mod_inner01 { width: auto; margin: 0 15px; } }

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

リストシリーズ

Styleguide 5.0
*/
/*
mod_ulList01

ULリスト

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

Styleguide 5.1
*/
.mod_ulList01 > li { position: relative; padding-left: 16px; line-height: 1.7; }

.mod_ulList01 > li:before { content: ''; display: block; position: absolute; top: 9px; left: 4px; width: 6px; height: 6px; border-radius: 3px; background: #666; }

/*
mod_deptList01

所属部署・名前セット①

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

Styleguide 5.2
*/
.mod_deptList01 { line-height: 1.5; }

.mod_deptList01 .dept { color: #666; font-size: 1.3rem; font-weight: 500; }

.mod_deptList01 .name { margin: 5px 0 0; font-size: 2.0rem; font-weight: 700; }

/*
mod_deptList02

所属部署・名前セット②

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

Styleguide 5.3
*/
.mod_deptList02 { min-height: 120px; line-height: 1.5; padding: 28px 40px; background: #fff; box-sizing: border-box; }

.mod_deptList02 .name { margin: 0 0 15px; line-height: 1.0; font-size: 3.0rem; font-weight: 700; }

.mod_deptList02 .name .sub { display: inline-block; vertical-align: baseline; margin-left: 20px; font-size: 1.6rem; font-weight: 700; }

.mod_deptList02 .dept { color: #666; font-size: 1.3rem; font-weight: 500; }

/*
.mod_runnerList01

その他のランナーリスト

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

Styleguide 5.4
*/
.mod_runnerList01 { margin: 0 0 -15px; }

.mod_runnerList01 .item { float: left; width: 178px; margin: 0 0 15px 15px; }

.mod_runnerList01 .item:first-child, .mod_runnerList01 .item:nth-child(5n+1) { clear: both; margin-left: 0; }

.mod_runnerList01 .item .img { position: relative; display: inline-block; width: 178px; height: 125px; overflow: hidden; }

.mod_runnerList01 .item .img img { width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; object-fit: cover; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_runnerList01 .item .txtBox { position: relative; height: 99px; }

.mod_runnerList01 .item .txtBox .mod_deptList01 { position: absolute; bottom: 20px; left: 20px; line-height: 1.4; }

.mod_runnerList01 .item .txtBox .mod_deptList01 .dept { font-size: 1.2rem; }

.mod_runnerList01 .item .txtBox .mod_deptList01 .name { font-size: 1.7rem; }

.mod_runnerList01 .item a { display: block; position: relative; min-height: 224px; background: #fff; box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_runnerList01 .item a:after { content: ''; display: inline-block; position: absolute; right: 20px; bottom: 20px; width: 20px; height: 8px; background: url(../img/common/ico_arrow02.png) center center no-repeat; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_runnerList01 .item a:hover { color: #fff; background: #000; }

.mod_runnerList01 .item a:hover:after { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); }

.mod_runnerList01 .item a:hover .img img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

/*
.mod_pickupList01

ピックアップリスト

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

Styleguide 5.5
*/
.mod_pickupList01 { margin: 40px 0 -40px; text-align: center; font-size: 0; letter-spacing: 0; }

.mod_pickupList01 .item { display: inline-block; position: relative; margin-bottom: 40px; text-align: left; overflow: hidden; font-size: 1.5rem; letter-spacing: .08em; background: #fff; }

.mod_pickupList01 .item:nth-child(even) { margin-left: 40px; }

.mod_pickupList01 .item a { display: -webkit-box; display: -ms-flexbox; display: flex; width: 455px; min-height: 265px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_pickupList01 .item a:after { content: ''; display: inline-block; position: absolute; right: 20px; bottom: 20px; width: 20px; height: 8px; background: url(../img/common/ico_arrow02.png) center center no-repeat; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_pickupList01 .item a:hover { text-decoration: none; color: #fff; background: #000; }

.mod_pickupList01 .item a:hover:after { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); }

.mod_pickupList01 .item a:hover .img img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

.mod_pickupList01 .item .txtBox { position: relative; width: 200px; padding: 25px 25px 100px; box-sizing: border-box; }

.mod_pickupList01 .item .txtBox .tit { display: table-cell; height: 120px; line-height: 1.5; vertical-align: middle; font-size: 2.0rem; font-weight: 700; }

.mod_pickupList01 .item .txtBox .tit em { color: #666; font-style: normal; font-weight: 700; }

.mod_pickupList01 .item .txtBox .deptSet { position: absolute; left: 25px; bottom: 25px; }

.mod_pickupList01 .item .txtBox .deptSet .name { margin: 7px 0 0; font-size: 1.6rem; }

.mod_pickupList01 .item .img { width: 255px; height: 100%; overflow: hidden; object-fit: cover; }

.mod_pickupList01 .item .img img { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/*
.mod_newsList01

ニュースリスト

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

Styleguide 5.6
*/
.mod_newsList01 { overflow: hidden; border-top: 1px solid #666; }

.mod_newsList01 > .item { border-bottom: 1px solid #666; }

.mod_newsList01 > .item a, .mod_newsList01 > .item span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding: 18px 0; }

.mod_newsList01 > .item a:after, .mod_newsList01 > .item span:after { content: ''; display: block; position: absolute; top: 0; left: -100%; z-index: -1; width: 100%; height: 100%; background: #666; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }

.mod_newsList01 > .item a .date, .mod_newsList01 > .item span .date { width: 170px; text-align: center; color: #666; font-weight: 500; }

.mod_newsList01 > .item a .txt, .mod_newsList01 > .item span .txt { width: 780px; padding-right: 60px; box-sizing: border-box; }

.mod_newsList01 > .item a:before { content: ''; display: inline-block; position: absolute; top: 0; right: 25px; bottom: 0; width: 20px; height: 8px; margin: auto 0; background: url(../img/common/ico_arrow02.png) center center no-repeat; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_newsList01 > .item a:hover { text-decoration: none; }

.mod_newsList01 > .item a:hover:before { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); }

.mod_newsList01 > .item a:hover:after { left: 0; }

.mod_newsList01 > .item a:hover .txt { text-decoration: none; }

.mod_newsList01 > .item a .txt { text-decoration: underline; }

/*
.mod_tabList01

疑似タブリスト

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

Styleguide 5.7
*/
.mod_tabList01 { position: relative; display: table; width: 100%; background: #fff; box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1); }

.mod_tabList01 > .item { display: table-cell; width: 33%; border-left: 1px solid #666; }

.mod_tabList01 > .item:first-child { border-left: none; }

.mod_tabList01 > .item a, .mod_tabList01 > .item span { display: table-cell; width: 316px; height: 60px; vertical-align: middle; text-align: center; box-sizing: border-box; }

.mod_tabList01 > .item a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_tabList01 > .item a:hover { text-decoration: none; color: #666; background: #666; }

.mod_tabList01 > .item.current a { border-bottom: 3px solid #666; pointer-events: none; }

/* pager
================================================ */
/*
#styleguide
mod_pagination01

pager

```
<ul class="pager mod_pagination01">
	<li class="previous"><a href="#">&lt;</a></li>
	<li class="current"><span>1</span></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li class="next"><a href="#">&gt;</a></li>
</ul>
```
*/
.mod_pagination01 { text-align: center; letter-spacing: -.5em; }

.mod_pagination01 li { display: inline-block; margin: 0 5px 10px; font-size: 1.5rem; letter-spacing: 0; }

.mod_pagination01 li a, .mod_pagination01 li span { display: block; width: 50px; height: 50px; box-sizing: border-box; padding-top: 11px; text-decoration: none; color: #fff; background: #a22626; }

.mod_pagination01 li a:hover { background: #db0012; }

.mod_pagination01 li .current_page { color: #333; background: #efeeee; }

.mod_pagination01 li .link_before, .mod_pagination01 li .link_next { position: relative; text-indent: -9999px; }

.mod_pagination01 li .link_before:after, .mod_pagination01 li .link_next:after { position: absolute; top: 42%; left: 21px; content: ''; width: 6px; height: 9px; }

.mod_pagination01 li .link_before { margin-right: 35px; }

.mod_pagination01 li .link_before:after { background: url(../img/common/ico_arrow01.png) no-repeat; background-size: contain; -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); }

.mod_pagination01 li .link_next { margin-left: 35px; }

.mod_pagination01 li .link_next:after { background: url(../img/common/ico_arrow01.png) no-repeat; background-size: contain; }

@media screen and (max-width: 599px) { .mod_pagination01 li { margin: 0 2px 10px; }
  .mod_pagination01 li a, .mod_pagination01 li span { width: 45px; height: 45px; padding-top: 9px; }
  .mod_pagination01 li .link_before { margin: 0 10px 0 0; }
  .mod_pagination01 li .link_before:after { top: 40%; left: 18px; }
  .mod_pagination01 li .link_next { margin: 0 0 0 10px; }
  .mod_pagination01 li .link_next:after { top: 40%; right: 18px; } }

/*
#styleguide
mod_pagination02

pager

```
<ul class="mod_pagination02">
	<li class="mod_pagination02_previous"><a href="">前へ</a></li>
	<li class="mod_pagination02_back"><a href="/blog/">一覧へ</a></li>
	<li class="mod_pagination02_next"><a href="">次へ</a></li>
</ul>
```
*/
.mod_pagination02 { margin-top: 50px; text-align: center; letter-spacing: -.5em; }

.mod_pagination02 li { display: inline-block; font-size: 1.5rem; letter-spacing: 0; width: 50px; height: 50px; }

.mod_pagination02 li a, .mod_pagination02 li span { display: block; box-sizing: border-box; padding: 11px 0; text-decoration: none; color: #fff; background: #a22626; }

.mod_pagination02 li a:hover, .mod_pagination02 li span:hover { background: #db0012; }

.mod_pagination02 li.mod_pagination02_back { width: 170px; margin: 0 40px; }

.mod_pagination02_previous { position: relative; }

.mod_pagination02_previous:after { position: absolute; top: 42%; left: 21px; content: ''; width: 6px; height: 9px; background: url(../img/common/ico_arrow01.png) no-repeat; background-size: contain; -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); }

.mod_pagination02_next { position: relative; }

.mod_pagination02_next:after { position: absolute; top: 42%; right: 21px; content: ''; width: 6px; height: 9px; background: url(../img/common/ico_arrow01.png) no-repeat; background-size: contain; }

@media screen and (max-width: 599px) { .mod_pagination02 li { width: 45px; height: 45px; }
  .mod_pagination02 li a, .mod_pagination02 li span { padding: 9px 0; }
  .mod_pagination02 li.mod_pagination02_back { width: 45%; margin: 0 25px; }
  .mod_pagination02_previous:after { top: 40%; left: 18px; }
  .mod_pagination02_next:after { top: 40%; right: 18px; } }

/*!  single
================================================ */
/*
#styleguide
mod_single01
 
.mod_single01 - base style
 
```
<article class="mod_single01">
	<div class="mod_single01_thum"><img src="https://placehold.jp/810x522.png" alt=""></div>
	<header class="mod_single01_head">
		<div class="mod_single01_meta">
			<ul class="mod_single01_tag mod_tag01 is_black">
				<li>ニュース</li>
			</ul>
			<time class="mod_single01_date">2019.12.12</time>
		</div>
		<h1>年末年始休業日お知らせ</h1>
	</header>
	<div class="mod_single01_content">
		<p>12/29(土)～1/6(日)まで誠に勝手ながら冬季休暇とさせていただきます。<br>新年2019年1月7日より通常営業致します。</p>
		<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
	<p class="mod_single01_btn mod_btn01"><a href="/news/">一覧に戻る</a></p>
</article>
```
*/
.mod_single01_head h1 { margin: 16px 0 30px; padding: 0 0 17px; font-size: 2.6rem; font-weight: 500; line-height: 1.6; border-bottom: 1px solid #392827; }

.mod_single01_cat { display: inline-block; color: #fff; background: #999; padding: 0 14px 1px; margin-right: 10px; font-size: 1.1rem; }

.mod_single01_time { display: inline-block; color: #a22626; font-weight: 500; font-size: 1.5rem; line-height: 1.5; }

.mod_single01_content { margin-top: 25px; }

.mod_single01_content *:first-child { margin-top: 0; }

.mod_single01_content *:last-child { margin-bottom: 0; }

.mod_single01_content p { margin: 20px 0; }

.mod_single01_content h2 { margin-top: 50px; padding: 0 0 17px; border-bottom: 1px solid #392827; color: #a32626; font-size: 2.0rem; font-weight: 500; line-height: 1.4; }

.mod_single01_content h3 { margin-top: 50px; padding: 5px 16px 7px; background: #392827; color: #fff; font-size: 1.6rem; }

.mod_single01_content ul li { padding: 4px 0 4px 20px; position: relative; }

.mod_single01_content ul li:before { position: absolute; content: ''; width: 4px; height: 4px; border-radius: 50%; background: #a32626; top: 15px; left: 6px; }

@media screen and (max-width: 599px) { .mod_single01_head h1 { margin: 12px 0 25px; padding: 0 0 12px; font-size: 2.4rem; line-height: 1.4; }
  .mod_single01_content { margin-top: 20px; }
  .mod_single01_content p { margin: 15px 0; }
  .mod_single01_content h2 { margin-top: 40px; padding: 0 0 7px; }
  .mod_single01_content h3 { margin-top: 40px; padding: 6px 16px 7px; font-size: 1.5rem; line-height: 1.6; } }

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

mod_table01
 
.mod_table01            - Base styles
.mod_table01.is_white            - is_white
 
Markup:
<div class="mod_table01 {$modifiers}">
	<table><tbody>
		<tr>
			<th></th>
			<td></td>
		</tr>
	</tbody></table>
</div>
 
Styleguide 4.0.0
*/
.mod_table01 tr { border: solid 1px #dfdede; font-size: 1.5rem; background: #fff; box-sizing: border-box; }

.mod_table01 th, .mod_table01 td { padding: 11px 30px; vertical-align: middle; box-sizing: border-box; line-height: 2; }

.mod_table01 th { background: #a22626; color: #fff; }

@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; }
  .mod_table01 th, .mod_table01 td { padding: 11px 20px 12px; box-sizing: border-box; } }

.mod_table02 tr { border: solid 1px #dfdede; font-size: 1.5rem; background: #fff; box-sizing: border-box; }

.mod_table02 th, .mod_table02 td { border: solid 1px #dfdede; vertical-align: middle; box-sizing: border-box; line-height: 2; text-align: center; }

.mod_table02 th { background: #a22626; color: #25201f; padding: 10px 5px; }

.mod_table02 .name th { background: #dfdede; font-size: 1.6rem; }

.mod_table02 .cell01 th, .mod_table02 .cell02 th { background: #f7f7f7; padding: 8px 5px; }

.mod_table02 .cell01 th .is_small, .mod_table02 .cell02 th .is_small { font-size: 1.3rem; }

.mod_table02 td { line-height: 1.3; padding: 10px 5px; line-height: 1.3; font-size: 1.4rem; }

.mod_table02 td .is_small { font-size: 1.3rem; }

.mod_table02 td a[href$=".pdf"] { position: relative; font-size: 1.3rem; text-decoration: none; display: block; padding: 15px 5px 15px 28px; }

.mod_table02 td a[href$=".pdf"]:before { position: absolute; content: ''; width: 17px; height: 24px; background: url(../img/products/detail/icon_pdf01.png) no-repeat; background-size: contain; top: 28%; left: 10px; }

.mod_table02 td a[href$=".pdf"]:hover { opacity: .7; }

@media screen and (max-width: 599px) { .mod_table02 { width: 770px; } }

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

タイトル

Styleguide 1.0.0
*/
/*
mod_tit01

タイトル1
 
.mod_tit01 - Base styles
.mod_tit01.is_white - is_white
 
Markup:
<p class="mod_tit01 {$modifiers}">Title</p>
 
Styleguide 1.1.0
*/
.mod_tit01 { font-size: 3.6rem; color: #a32727; text-align: center; margin-bottom: 40px; }

@media screen and (max-width: 599px) { .mod_tit01 { font-size: 2.5rem; margin-bottom: 35px; line-height: 1.4; } }

.mod_tit02 { font-size: 4.4rem; font-weight: 500; position: relative; padding-bottom: 28px; margin-bottom: 70px; }

.mod_tit02:before { content: ''; background: url(../img/common/ico_tit02.png) 0 0 no-repeat; background-size: contain; width: 40px; height: 7px; position: absolute; bottom: 0; left: 0; }

.mod_tit02.is_center { text-align: center; }

.mod_tit02.is_center:before { right: 0; margin: auto; }

.mod_tit02.is_wh { color: #fff; }

.mod_tit02.is_wh:before { background: url(../img/common/ico_tit01.png) 0 0 no-repeat; background-size: contain; }

@media screen and (max-width: 599px) { .mod_tit02 { font-size: 2.5rem; margin-bottom: 30px; padding-bottom: 17px; }
  .mod_tit02:before { width: 20px; height: 8px; } }

.mod_tit03 { padding: 0 0 17px; border-bottom: 1px solid #392827; color: #a32626; font-size: 2rem; font-weight: 500; line-height: 1.4; }

@media screen and (max-width: 599px) { .mod_tit03 { padding: 0 0 7px; } }

.mod_tit04 { padding: 5px 16px 7px; background: #392827; color: #fff; font-size: 1.6rem; }

@media screen and (max-width: 599px) { .mod_tit04 { padding: 6px 16px 7px; font-size: 1.5rem; line-height: 1.6; text-align: center; } }