@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: 15px; }

.mod_archive01 .post { border-bottom: 1px solid #000; }

.mod_archive01 .post a { padding: 15px 0; }

.mod_archive01 .post .pic { margin-bottom: 5px; }

.mod_archive01 .post .meta { margin-bottom: 5px; overflow: hidden; }

.mod_archive01 .post .meta .cat { position: relative; float: left; margin-right: 10px; padding-right: 10px; }

.mod_archive01 .post .meta .cat:after { position: absolute; top: 6px; right: 0; width: 1px; height: 14px; content: ''; background: #000; }

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

@media all and (min-width: 600px) { .mod_archive01 { margin-bottom: 30px; overflow: hidden; }
  .mod_archive01 .post { float: left; width: 50%; padding-right: 15px; box-sizing: border-box; }
  .mod_archive01 .post a { overflow: hidden; }
  .mod_archive01 .post .pic { float: left; width: 30%; max-width: 200px; margin-right: 15px; margin-bottom: 0; }
  .mod_archive01 .post .sub { font-size: 2rem; overflow: hidden; } }

/*
#styleguide
mod_archive02

FAQ一覧
```
<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_archive02 { margin-bottom: 15px; }

.mod_archive02 .post { padding-top: 15px; border-bottom: 1px solid #000; }

.mod_archive02 .post .sub { font-size: 1.5rem; font-weight: 700; }

@media all and (min-width: 600px) { .mod_archive02 { margin-bottom: 30px; } }

/*
#styleguide
mod_archive03

スタッフ一覧
高さ揃えはdata-mh属性でmatchheight使用。
```
<ul class="archive mod_archive03">
	<li class="post" data-mh="staff-list">
		<h3 class="name">苗字名前</h3>
		<p class="pic"><img src="http://dummyimage.com/190x135/333333/ffffff.png&amp;text=190x135" alt="苗字名前近影"></p>
		<dl class="info">
			<dt>【年齢】</dt>
			<dd>00</dd>
			<dt>【出身】</dt>
			<dd>〇〇県</dd>
			<dt>【メッセージ】</dt>
			<dd>
				<p>コメントが入ります。コメントが入ります。</p>
			</dd>
		</dl>
	</li>
	<li class="post" data-mh="staff-list">
		<h3 class="name">苗字名前</h3>
		<p class="pic"><img src="http://dummyimage.com/190x135/333333/ffffff.png&amp;text=190x135" alt="苗字名前近影"></p>
		<dl class="info">
			<dt>【年齢】</dt>
			<dd>00</dd>
			<dt>【出身】</dt>
			<dd>〇〇県</dd>
			<dt>【メッセージ】</dt>
			<dd>
				<p>コメントが入ります。コメントが入ります。</p>
			</dd>
		</dl>
	</li>
</ul>
```
*/
.mod_archive03 { margin-bottom: 15px; }

.mod_archive03 .post { margin: 15px 0; padding: 15px; border: 1px solid #000; }

.mod_archive03 .post .name { margin-bottom: 5px; font-weight: 1.5rem; font-weight: 700; text-align: center; }

.mod_archive03 .post .pic { margin-bottom: 10px; text-align: center; }

.mod_archive03 .post .pic img { width: 190px; border: 1px solid #ccc; }

.mod_archive03 .post .info { overflow: hidden; }

.mod_archive03 .post .info dt { clear: left; float: left; width: 110px; }

.mod_archive03 .post .info dd { padding-left: 110px; }

@media all and (min-width: 600px) { .mod_archive03 { margin-bottom: 30px; margin-right: -25px; overflow: hidden; }
  .mod_archive03 .post { float: left; width: 318px; margin: 0 25px 25px 0; } }

/* inner
================================================ */
/* #styleguide mod_bg01 mod_bg01 is_rev 背景色２色 ``` <section id="policy" class="mod_bg01"> <div class="inner mod_inner01"> <h3 class="tit mod_tit01">POLICY</h3> <p>ヤマト住建は健康快適住宅を提供する日本のハウスメーカーです（後翻訳）</p> <p>TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT </p> </div> </section> <section id="policy" class="mod_bg01 is_rev"> <div class="inner mod_inner01"> <h3 class="tit mod_tit01">POLICY</h3> <p>ヤマト住建は健康快適住宅を提供する日本のハウスメーカーです（後翻訳）</p> <p>TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT TEXTTEXTTEXT </p> </div> </section> ``` */
.mod_bg01 { background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(50%, #fff), color-stop(50%, #f5f5f5), to(#f5f5f5)); background: linear-gradient(90deg, #fff 0%, #fff 50%, #f5f5f5 50%, #f5f5f5 100%); }

.mod_bg01.is_rev { background: -webkit-gradient(linear, left top, right top, from(#f5f5f5), color-stop(50%, #f5f5f5), color-stop(50%, #fff), to(#fff)); background: linear-gradient(90deg, #f5f5f5 0%, #f5f5f5 50%, #fff 50%, #fff 100%); }

/* box
================================================ */
.mod_box01 { background: #fff; border: 1px solid #f5f5f5; position: relative; }

.mod_box01:before, .mod_box01:after, .mod_box01_in:before, .mod_box01_in:after { content: ""; display: block; width: 20px; height: 20px; border-top: 2px solid #1d2088; border-left: 2px solid #1d2088; position: absolute; pointer-events: none; }

.mod_box01:before { top: -1px; left: -1px; }

.mod_box01:after { top: -1px; right: -1px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }

.mod_box01_in:before { bottom: -1px; left: -1px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }

.mod_box01_in:after { bottom: -1px; right: -1px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

.mod_box01_in { padding: 19px 25px; position: relative; }

@media all and (min-width: 600px) { .mod_box01:before, .mod_box01:after, .mod_box01_in:before, .mod_box01_in:after { width: 40px; height: 40px; }
  .mod_box01_in { padding: 52px 60px; } }

/* button
================================================ */
/*
#styleguide
mod_btn01


```
<p class="btn mod_btn01"><a class="alpha" href="#">ボタンテキスト</a></p>
```
*/
.mod_btn01 { width: 257.5px; margin: auto; }

.mod_btn01.is_white a { color: #fff; border: 1px solid #fff; }

.mod_btn01 a { display: block; color: #1d2088; text-align: center; text-decoration: none; border: 1px solid #1d2088; padding: 18px 0; }

@media all and (min-width: 600px) { .mod_btn01 { max-width: 1200px; width: 100%; margin: auto; }
  .mod_btn01.is_white a:hover { background-color: #fff; color: #1d2088; }
  .mod_btn01 a { font-size: 1.9rem; padding: 26px 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn01 a:hover { background-color: #1d2088; color: #fff; } }

.mod_btn02 { display: block; height: 120px; padding: 5px 10px; text-decoration: none; background-position: center; background-repeat: repeat; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; }

.mod_btn02 .txt { color: #fff; text-align: center; font-size: 3.3rem; font-weight: 600; line-height: 1.2; }

@media all and (min-width: 600px) { .mod_btn02 { height: 305px; text-decoration: none; position: relative; }
  .mod_btn02:before { content: ''; background-color: rgba(29, 32, 136, 0.5); position: absolute; top: 0; left: 0; width: 0; height: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn02:hover:before { width: 100%; }
  .mod_btn02 .txt { font-size: 4.6rem; } }

/* form
================================================ */
/*
#styleguide
mod_form01

form
```


```
*/
/* inner
================================================ */
/* #styleguide mod_inner01 SP:両端パディング15px PC:1100pxでセンタリング＆border-box ``` <section id="hoge"> <div class="inner mod_inner01"> <h2 class="tit">タイトル</h3> <p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。</p> </div> </section> ``` */
.mod_inner01 { padding-left: 18px; padding-right: 18px; }

@media all and (min-width: 600px) { .mod_inner01 { box-sizing: border-box; width: 1200px; margin: auto; padding-right: 0; padding-left: 0; } }

.mod_inner02 { padding-left: 18px; padding-right: 18px; }

@media all and (min-width: 600px) { .mod_inner02 { box-sizing: border-box; width: 1080px; margin: auto; padding-right: 0; padding-left: 0; } }

/* 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; letter-spacing: 0; }

.mod_pagination01 li a, .mod_pagination01 li span { display: block; width: 30px; height: 30px; box-sizing: border-box; padding-top: 1px; border: 1px solid #000; text-decoration: none; }

.mod_pagination01 li.current span { color: #fff; background: #000; }

.mod_pagination01 li.previous { margin-right: 15px; }

.mod_pagination01 li.next { margin-left: 15px; }

@media all and (min-width: 600px) { .mod_pagination01 li { margin: 0 3px; }
  .mod_pagination01 li a { width: 30px; height: 30px; padding: 4px 0 0 0; font-size: 1.3rem; }
  .mod_pagination01 li a:hover { text-decoration: none; border: 1px solid #034198; background-color: #034198; color: #fff; }
  .mod_pagination01 li.current { width: 30px; height: 30px; font-size: 1.3rem; padding: 4px 0 0 0; }
  .mod_pagination01 li.previous { margin-right: 0; }
  .mod_pagination01 li.next { margin-left: 0; } }

/*
#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>
```
*/
/*!  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 { padding: 40px 25px; background: #fff; }

.mod_single01_head { margin-top: 20px; }

.mod_single01_head h1 { margin-top: 8px; font-size: 2rem; font-weight: 700; letter-spacing: .06em; }

.mod_single01_tag { display: inline-block; margin-right: 5px; }

.mod_single01_date { display: inline-block; color: #999; letter-spacing: .1em; }

.mod_single01_content { margin-top: 12px; }

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

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

.mod_single01_content p { margin: 10px 0; }

@media all and (min-width: 600px) { .mod_single01 { padding: 60px; }
  .mod_single01_head { margin-top: 40px; }
  .mod_single01_head h1 { margin-top: 15px; font-size: 3rem; }
  .mod_single01_tag { margin-right: 11px; }
  .mod_single01_content { margin-top: 24px; }
  .mod_single01_content p { margin: 26px 0; }
  .mod_single01_btn { width: 330px; margin: 40px auto 0; } }

/* table
================================================ */
/*
#styleguide
mod_table01

会社概要など
```
<table class="table mod_table01" border="1">
	<tr>
		<th scope="row">社名</th>
		<td>株式会社エムハンド</td>
	</tr>
	<tr>
		<th scope="row">設立</th>
		<td>2003年10月</td>
	</tr>
	<tr>
		<th scope="row">従業員</th>
		<td>35名<span>（ディレクター：11名、デザイナー：13名、エンジニア：8名、エディター：3名）</span></td>
	</tr>
	<tr>
		<th scope="row">資本金</th>
		<td>1,000万円</td>
	</tr>
	<tr>
		<th scope="row">事業内容</th>
		<td><b>ウェブサイト事業</b>（コンサルティング、制作、運営）<br>
			<b>メディア事業</b>（企画、制作、実施）</td>
	</tr>
</table>

```
*/
.mod_table01 { width: 100%; background: #fff; border-top: 1px solid #d9d9d9; }

.mod_table01 tr { border-bottom: 1px solid #d9d9d9; }

.mod_table01 th, .mod_table01 td { display: block; width: 100%; padding: 10px; box-sizing: border-box; }

.mod_table01 th { font-weight: bold; line-height: 1.4; padding: 16px 15px 4px; }

.mod_table01 td { padding: 5px 15px 15px; }

@media all and (min-width: 600px) { .mod_table01 th, .mod_table01 td { display: table-cell; width: auto; padding: 24px 0 23px; }
  .mod_table01 th { width: 370px; line-height: 1.7; padding-left: 32px; }
  .mod_table01 td { padding-right: 29px; } }

/* title
================================================ */
/*
#styleguide
mod_tit01


```
<p class="tit mod_tit01">見出しテキスト</p>
```
*/
.mod_tit01 { font-size: 3.5rem; text-align: center; color: #1d2088; line-height: 1.1; letter-spacing: 0.01em; }

@media all and (min-width: 600px) { .mod_tit01 { font-size: 6.6rem; letter-spacing: 0.04em; } }

.mod_tit01 { font-size: 3.3rem; text-align: center; color: #1d2088; line-height: 1.1; letter-spacing: .7px; }

@media all and (min-width: 600px) { .mod_tit01 { font-size: 5.6rem; letter-spacing: 2.9px; } }