@charset "UTF-8";
/*=============================================================
 04_modules
=============================================================*/
.fn-container { overflow: auto; color: #fff; }
/*!  box
================================================ */
.mod_box01 + .mod_box01 { margin-top: 20px; }
.mod_box01 .img { margin-bottom: 13px; }
.mod_box01 .img img { vertical-align: top; }
.mod_box01 .txtBox .tit { line-height: 1.34; margin: 0 0 10px; font-weight: 700; font-size: 38.4px; font-size: 2.4rem; letter-spacing: .1em; }
.mod_box01 .txtBox .tit em { color: #06a577; font-style: normal; }
@media all and (min-width: 600px) { .mod_box01 { overflow: hidden; }  .mod_box01 + .mod_box01 { margin-top: 75px; }  .mod_box01 .img { float: left; width: 550px; overflow: hidden; margin-bottom: 0; border-radius: 12px; }  .mod_box01 .txtBox { float: right; width: 510px; }  .mod_box01 .txtBox .tit { line-height: 1.5; margin: -2px 0 20px; font-weight: 500; font-size: 3.2rem; } }
/*
#styleguide
mod_inner01

```
<section id="bcp" class="mod_box01">
	<div class="img"><img src="/img/company/vision/img_contribute01.png" alt="事業継続計画（BCP）の策定"></div>
	<div class="txtBox">
		<h3 class="tit"><em>事業継続計画（BCP）</em>の策定</h3>
		<p class="txt">震災対策の視点から建設会社の果たす役割への期待が高まる中、当社では災害・事故発生時に行うべき項目をまとめた復旧支援内容をマニュアル化、事業継続計画（BCP）として策定しています。<br>
		施工協力会社も一緒になり、定期的にマニュアルに沿った訓練も実施し、対応力強化に努めています。</p>
	</div>
</section>
<section id="firefiting" class="mod_box01">
	<div class="img"><img src="/img/company/vision/img_contribute02.png" alt="消防署への訓練場の提供"></div>
	<div class="txtBox">
		<h3 class="tit">消防署への<em>訓練場の提供</em></h3>
		<p class="txt">火災やその他災害が発生した場合、消防員は建物を破壊して侵入する必要がありますが、この実地訓練は実現が難しいのが現状です。<br>
		そのため当社では、建物の解体依頼を受けた際、解体作業の着手前に消防署へ連絡し実施訓練の場を提供しています。<br>
		消防員の能力向上、ひいては人命救助の確率を高める一助を担う重要な活動の一環として、今後も推進していきます。</p>
	</div>
</section>
```
*/
/*!  inner
================================================ */
.mod_inner01 { padding: 0 15px; }
@media all and (min-width: 600px) { .mod_inner01 { padding: 0; } }
/*
#styleguide
mod_inner01

```
<div class="mod_inner01">
	<p>DUMMY</p>
</div>
```
*/
/*!  table
================================================ */
.mod_table01 { border-bottom: 1px solid #e2e2e2; }
.mod_table01 th , .mod_table01 td { display: block; }
.mod_table01 th { line-height: 1.5; padding: 10px 15px; border-top: 1px solid #e2e2e2; background: #f3fef7; font-weight: 500; font-size: 22.4px; font-size: 1.4rem; }
.mod_table01 td { line-height: 1.77; padding: 10px 15px; font-size: 20.8px; font-size: 1.3rem; }
.mod_table01.inline th , .mod_table01.inline td { display: table-cell; border-top: 1px solid #e2e2e2; }
.mod_table01.inline th { width: 67px; }
@media all and (min-width: 600px) { .mod_table01 th , .mod_table01 td { display: table-cell; }  .mod_table01 th { width: 200px; line-height: 1.8; padding: 20px 40px; font-size: 1.5rem; }  .mod_table01 td { line-height: 1.8; padding: 20px 40px; border-top: 1px solid #e2e2e2; font-weight: 500; font-size: 1.5rem; }  .mod_table01.inline th { width: 200px; } }
/*
#styleguide
mod_table01
.inline付与でth, tdがテーブルセルに戻ります

```
<table class="mod_table01">
	<tr>
		<th>社名</th>
		<td>株式会社森長工務店</td>
	</tr>
	<tr>
		<th>代表取締役</th>
		<td>森長敬</td>
	</tr>
</table>

<table class="mod_table01 inline" style="margin-top: 30px;">
	<tr>
		<th>社名</th>
		<td>株式会社森長工務店</td>
	</tr>
	<tr>
		<th>代表取締役</th>
		<td>森長敬</td>
	</tr>
</table>
```
*/
/*!  tit
================================================ */
.mod_tit01 { line-height: 1.44; margin: 0 auto 25px; font-weight: 500; font-size: 38.4px; font-size: 2.4rem; text-align: center; letter-spacing: .1em; }
.mod_tit01 .sub { display: block; height: 11px; margin: 0 0 12px; }
.mod_tit01 .sub img { width: auto; height: 100%; vertical-align: top; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.mod_tit01 .subTit { display: block; margin: 0 0 4px; font-size: 28.8px; font-size: 1.8rem; }
.mod_tit01 i { color: #06a577; }
@media all and (min-width: 600px) { .mod_tit01 { margin: 0 auto 40px; font-size: 3.2rem; }  .mod_tit01 .sub { display: block; height: 16px; margin: 0 0 20px; }  .mod_tit01 .subTit { display: inline-block; margin: 0 18px 2px 0; font-size: 2.4rem; } }
/*
#styleguide
mod_tit01


```
<h2 class="mod_tit01"><span class="sub"><img src="/img/company/tit_company01.png" alt="COMPANY"></span>会社プロフィール</h2>
```
*/
.mod_tit02 { line-height: 1.44; margin: 0 auto 15px; padding: 11px 15px; background: url(../img/common/bg_pattern01.png) left top repeat; background-size: 50px; font-weight: 700; font-size: 32px; font-size: 2.0rem; letter-spacing: .05em; }
@media all and (min-width: 600px) { .mod_tit02 { margin: 0 auto 25px; padding: 14px 20px 15px; border-radius: 6px; font-size: 2.2rem; letter-spacing: .1em; } }
/*
#styleguide
mod_tit02


```
<h3 class="mod_tit02">社会福祉法人旭長寿の森</h3>
```
*/
.mod_tit03 { line-height: 1.44; margin: 0 0 18px; color: #06a577; font-weight: 700; font-size: 35.2px; font-size: 2.2rem; letter-spacing: .05em; }
@media all and (min-width: 600px) { .mod_tit03 { margin: 0 0 25px; font-size: 2.4rem; letter-spacing: .12em; } }
/*
#styleguide
mod_tit03


```
<h3 class="mod_tit03">環境方針</h3>
```
*/
.mod_tit04 { line-height: 1.4; margin: 0 0 22px; font-weight: 700; font-size: 38.4px; font-size: 2.4rem; letter-spacing: .1em; }
@media all and (min-width: 600px) { .mod_tit04 { margin: 0 0 10px; font-size: 3.2rem; letter-spacing: .05em; } }
/*
#styleguide
mod_tit04
ブログ用タイトル

```
<h3 class="mod_tit04">ブログ用タイトル</h3>
```
*/
/*!  text
================================================ */
.mod_marker01 { background: -webkit-linear-gradient(transparent 60%, #ffea78 60%); background: linear-gradient(transparent 60%, #ffea78 60%); }
/*
#styleguide
mod_marker01

```
<p class="copy"><mark class="mod_marker01">お客様、ビジネスパートナー、社員が相互に有機的な繋がりを持ち、優れた顧客価値を提供し続ける建設会社</mark></p>
```
*/
/*!  link, navigation
================================================ */
.mod_link01 { color: #06a577; }
.mod_link01 .underline { text-decoration: underline; }
@media all and (min-width: 600px) { .mod_link01:hover { text-decoration: underline; }  .mod_link01.underline:hover { text-decoration: none; } }
/*
#styleguide
mod_link01
緑テキストリンク

```
<p><a href="" class="mod_link01">リンク</a></p>
<p><a href="" class="mod_link01 underline">.underlineでアンダーライン</a></p>
<!-- /.mod_link01 -->
```
*/
.mod_site01:after { display: inline-block; width: 12px; height: 11px; margin-left: .5em; background: url(../img/common/ico_site01.png) center center no-repeat; background-size: cover; vertical-align: baseline; content: ""; }
/*
#styleguide
mod_site01
外部サイトアイコン付き

```
<a href="" class="mod_site01">リンク</a>
<!-- /.link01 -->
```
*/
/*!  list
================================================ */
.mod_ulList01 > li { position: relative; padding-left: 15px; }
.mod_ulList01 > li:before { position: absolute; top: 7px; left: 0; width: 10px; height: 10px; overflow: hidden; border-radius: 5px; background: #06a577; content: ""; }
@media all and (min-width: 600px) { .mod_ulList01 > li { padding-left: 20px; }  .mod_ulList01 > li:before { top: 8px; width: 12px; height: 12px; border-radius: 6px; } }
/*
#styleguide
mod_ulList01
箇条書きリンク

```
<ul class="mod_ulList01">
	<li>社員をはじめ会社に関わる人々を幸福にする会社</li>
	<li>長期にわたって安定的に成長する会社</li>
	<li>社員の社会性と人間性を育む会社</li>
</ul>
<!-- /.mod_ulList01 -->
```
*/
.mod_olList01 { counter-reset: list; }
.mod_olList01 > li { position: relative; padding-left: 1.5em; counter-increment: list; }
.mod_olList01 > li:before { position: absolute; left: 0; color: #06a577; content: counter(list) "."; }
/*
#styleguide
mod_olList01
順序リンク

```
<ol class="mod_olList01">
	<li>社員をはじめ会社に関わる人々を幸福にする会社</li>
	<li>長期にわたって安定的に成長する会社</li>
	<li>社員の社会性と人間性を育む会社</li>
</ol>
<!-- /.mod_olList01 -->
```
*/
.mod_linkList01 > li.border { border-bottom: 1px solid #e2e2e2; }
.mod_linkList01 > li + li { border-top: 1px solid #e2e2e2; }
.mod_linkList01 > li a { display: block; position: relative; line-height: 1.5; padding: 12px 15px 12px 30px; }
.mod_linkList01 > li a:before { position: absolute; top: 14px; left: 15px; width: 7px; height: 13px; background: url(../img/common/ico_arw01.png) left center no-repeat; background-size: contain; content: ""; }
@media all and (min-width: 600px) { .mod_linkList01 > li { margin: 11px 0; }  .mod_linkList01 > li.border , .mod_linkList01 > li + li { border: none; }  .mod_linkList01 > li a { display: inline-block; padding: 4px 0 4px 16px; font-size: 1.7rem; }  .mod_linkList01 > li a:before { top: 10px; left: 0; background: url(../img/common/ico_arw01.png) left center no-repeat; background-size: contain; }  .mod_linkList01 > li a:hover { text-decoration: underline; } }
/*
#styleguide
mod_ulList01
矢印付きリンクリスト

```
<ul class="mod_ulList01">
	<li>社員をはじめ会社に関わる人々を幸福にする会社</li>
	<li>長期にわたって安定的に成長する会社</li>
	<li>社員の社会性と人間性を育む会社</li>
</ul>
<!-- /.mod_ulList01 -->
```
*/
.mod_worksList01 { overflow: hidden; margin-bottom: -12px; }
.mod_worksList01 > .item { float: left; width: calc(50% - 5px); margin-bottom: 12px; }
.mod_worksList01 > .item:nth-child(even) { margin-left: 10px; }
.mod_worksList01 > .item a { display: block; }
.mod_worksList01 > .item .img { overflow: hidden; margin-bottom: -10px; border-radius: 6px; }
.mod_worksList01 > .item .img img { display: block; backface-visiblity: hidden; }
.mod_worksList01 > .item .img .more { display: none; }
.mod_worksList01 > .item .cat { display: inline-block; position: relative; line-height: 1.18; margin: 0 13px 8px 0; padding: 8px 7px 8px 7px; border-radius: 4px; background: #ffea78; font-size: 17.6px; font-size: 1.2rem; letter-spacing: .1em; }
.mod_worksList01 > .item .txt { line-height: 1.33; font-weight: 700; font-size: 24px; font-size: 1.5rem; }
@media all and (min-width: 600px) { .mod_worksList01 { overflow: hidden; margin-bottom: -44px; }  .mod_worksList01 > .item { width: 340px; margin: 0 0 44px 40px; }  .mod_worksList01 > .item:nth-child(even) { margin-left: 40px; }  .mod_worksList01 > .item:first-child , .mod_worksList01 > .item:nth-child(3n+1) { margin-left: 0; }  .mod_worksList01 > .item .img { position: relative; margin-bottom: -15px; }  .mod_worksList01 > .item .img .more { display: block; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; line-height: 1.0; visibility: hidden; padding: 105px 0 0; background: rgba(6, 165, 119, .8); opacity: 0; color: #fff; font-size: 1.7rem; text-align: center; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }  .mod_worksList01 > .item .img .more:before { position: absolute; top: 135px; left: 50%; width: 6px; height: 12px; background: url(../img/common/ico_arw02.png) no-repeat; background-size: 100%; content: ""; }  .mod_worksList01 > .item a:hover .img .more { visibility: visible; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }  .mod_worksList01 > .item .cat { margin-bottom: 16px; font-size: 1.4rem; }  .mod_worksList01 > .item .txt { font-size: 1.8rem; } }
/*
#styleguide
mod_worksList01
実績リスト

```
<ul class="mod_worksList01">
	<div class="item" data-mh="works-item"><a href="#">
		<div class="img"><img src="https://placehold.jp/340x225.png" alt=""><p class="more">詳しく見る</p></div>
		<p class="cat">集合住宅・事務所・店舗・個人住宅</p>
		<p class="txt">セシリア九条マンション 新築工事</p>
	</a></div>
	<div class="item" data-mh="works-item"><a href="#">
		<div class="img"><img src="https://placehold.jp/340x225.png" alt=""><p class="more">詳しく見る</p></div>
		<p class="cat">集合住宅・事務所・店舗・個人住宅</p>
		<p class="txt">セシリア九条マンション 新築工事</p>
	</a></div>
	<div class="item" data-mh="works-item"><a href="#">
		<div class="img"><img src="https://placehold.jp/340x225.png" alt=""><p class="more">詳しく見る</p></div>
		<p class="cat">集合住宅・事務所・店舗・個人住宅</p>
		<p class="txt">セシリア九条マンション 新築工事</p>
	</a></div>
	</ul>
<!-- /.mod_worksList01 -->
```
*/
.mod_blogList01 { margin-bottom: -12px; }
.mod_blogList01 > .item { float: left; width: calc(50% - 5px); margin-bottom: 15px; }
.mod_blogList01 > .item:nth-child(even) { margin-left: 10px; }
.mod_blogList01 > .item a { display: block; position: relative; }
.mod_blogList01 > .item .icon { position: absolute; top: -10px; left: -7px; width: 49px; height: 42px; }
.mod_blogList01 > .item .icon img { vertical-align: top; backface-vibility: hidden; }
.mod_blogList01 > .item .img { overflow: hidden; margin-bottom: -10px; border-radius: 6px; }
.mod_blogList01 > .item .img img { display: block; backface-visiblity: hidden; }
.mod_blogList01 > .item .img .more { display: none; }
.mod_blogList01 > .item .cat { display: inline-block; position: relative; line-height: 1.18; margin: 0 13px 8px 0; padding: 8px 7px 8px 7px; border-radius: 4px; background: #d4efdf; font-size: 17.6px; font-size: 1.1rem; letter-spacing: .1em; }
.mod_blogList01 > .item .txt { line-height: 1.33; font-weight: 700; font-size: 24px; font-size: 1.5rem; }
.mod_blogList01 > .item time { line-height: 1.2; font-size: 19.2px; font-size: 1.2rem; }
@media all and (min-width: 600px) { .mod_blogList01 { margin-bottom: -32px; }  .mod_blogList01 > .item { width: 276px; margin: 0 0 32px 26px; }  .mod_blogList01 > .item:nth-child(even) { margin-left: 26px; }  .mod_blogList01 > .item:first-child , .mod_blogList01 > .item:nth-child(3n+1) { margin-left: 0; }  .mod_blogList01 > .item .icon { top: -11px; left: -14px; z-index: 3; width: 61px; height: 53px; }  .mod_blogList01 > .item .img { position: relative; margin-bottom: -15px; }  .mod_blogList01 > .item .img .more { display: block; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; line-height: 1.0; visibility: hidden; padding: 70px 0 0; background: rgba(6, 165, 119, .8); opacity: 0; color: #fff; font-size: 1.7rem; text-align: center; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }  .mod_blogList01 > .item .img .more:before { position: absolute; top: 105px; left: 50%; width: 6px; height: 12px; background: url(../img/common/ico_arw02.png) no-repeat; background-size: 100%; content: ""; }  .mod_blogList01 > .item a:hover .img .more { visibility: visible; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }  .mod_blogList01 > .item .cat { margin: 0 0 10px; padding: 5px 8px; font-size: 1.3rem; }  .mod_blogList01 > .item .txt { font-size: 1.6rem; }  .mod_blogList01 > .item time { font-size: 1.3rem; } }
/*
#styleguide
mod_blogList01
ブログアーカイブリスト

```
<div class="cf" style="margin-top: 30px;">
	<ul class="mod_blogList01">
		<li class="item" data-mh="blog-item"><a href="#">
			<div class="icon"><img src="/img/common/ico_new01.png" alt="NEW"></div>
			<div class="img"><img src="https://placehold.jp/340x225.png" alt=""><p class="more">詳しく見る</p></div>
			<p class="cat">社長ブログ</p>
			<p class="txt">タイトルが入ります。</p>
			<time>2018.00.00</time>
		</a></li>
		<li class="item" data-mh="blog-item"><a href="#">
			<div class="img"><img src="https://placehold.jp/340x225.png" alt=""><p class="more">詳しく見る</p></div>
			<p class="cat">社長ブログ</p>
			<p class="txt">タイトルが入ります。</p>
			<time>2018.00.00</time>
		</a></li>
	</ul>
</div>
<!-- /.mod_blogList01 -->
```
*/
.mod_topicsList01 > .item { border-bottom: 1px solid #e2e2e2; }
.mod_topicsList01 > .item a { display: block; position: relative; padding: 12px 30px 12px 0; }
.mod_topicsList01 > .item a:after { position: absolute; top: 0; right: 0; bottom: 0; width: 6px; height: 10px; margin: auto; background: url(../img/common/ico_arw01.png) center right no-repeat; background-size: contain; content: ""; }
.mod_topicsList01 > .item .cat { display: inline-block; line-height: 1.3; margin: 0 0 7px; padding: 5px 8px; border-radius: 3px; background: #dff5ca; font-size: 17.6px; font-size: 1.1rem; }
.mod_topicsList01 > .item time { display: inline-block; line-height: 1.2; margin: 0 0 5px; font-weight: 500; font-size: 19.2px; font-size: 1.2rem; }
.mod_topicsList01 > .item .txt { line-height: 1.44; font-weight: 700; font-size: 22.4px; font-size: 1.4rem; }
.mod_topicsList01.category > .item .cat { display: table; margin: 0 0 4px; }
@media all and (min-width: 600px) { .mod_topicsList01 > .item a { overflow: hidden; padding: 17px 46px 19px 0; }  .mod_topicsList01 > .item a:after { right: 20px; width: 7px; height: 13px; }  .mod_topicsList01 > .item a:hover .txt { text-decoration: underline; }  .mod_topicsList01 > .item .cat { margin: 0 10px 8px 0; padding: 4px 11px; font-size: 1.3rem; }  .mod_topicsList01 > .item time { margin: 0 0 10px; font-size: 1.3rem; }  .mod_topicsList01 > .item .txt { line-height: 1.5; font-size: 1.6rem; }  .mod_topicsList01.category > .item a { padding: 18px 46px 15px 0; }  .mod_topicsList01.category > .item .cat { display: table; margin: 4px 0 15px; }  .mod_topicsList01.category > .item time { float: left; width: 90px; }  .mod_topicsList01.category > .item .txt { margin: -6px 0 0 95px; } }
/*
#styleguide
mod_topicsList01
トピックスアーカイブリスト

```
<div class="content">
	<ul class="mod_topicsList01">
		<li class="item"><a href="#">
			<time>2018.00.00</time>
			<p class="txt">タイトルが入ります。タイトルが入ります。</p>
		</a></li>
		<li class="item"><a href="#">
			<time>2018.00.00</time>
			<p class="txt">タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
		</a></li>
		<li class="item"><a href="#">
			<p class="cat">カテゴリー</p><time>2018.00.00</time>
			<p class="txt">タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
		</a></li>
	</ul>
</div>
<div class="content">
	<ul class="mod_topicsList01 category">
		<li class="item"><a href="#">
			<p class="cat">カテゴリー</p>
			<time>2018.00.00</time>
			<p class="txt">タイトルが入ります。タイトルが入ります。</p>
		</a></li>
	</ul>
</div>
<!-- /.mod_blogList01 -->
```
*/
/*!  button
================================================ */
.mod_btn01 { width: 290px; margin: 0 auto; }
.mod_btn01 a , .mod_btn01 button { display: block; position: relative; box-sizing: border-box; width: 100%; line-height: 1.5; padding: 9px 20px; border: 3px solid #06a577; border-radius: 6px; background: #fff; font-weight: bold; font-size: 25.6px; font-size: 1.6rem; text-align: center; letter-spacing: .12em; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.mod_btn01 a:before , .mod_btn01 button:before { position: absolute; top: 50%; right: 12px; width: 7px; height: 13px; margin-top: -6px; background: url(../img/common/ico_arw01.png) no-repeat; background-size: 100%; content: ""; }
.mod_btn01.return a:before , .mod_btn01.return button:before { right: auto; left: 12px; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.mod_btn01.download a:before , .mod_btn01.download button:before { top: 0; right: 12px; bottom: 0; width: 10px; height: 13px; margin: auto; background: url(../img/common/ico_download01.png) no-repeat; background-size: cover; }
@media all and (min-width: 600px) { .mod_btn01 { width: 350px; }  .mod_btn01 a , .mod_btn01 button { padding: 12px 20px; background: #fff; font-size: 1.7rem; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; }  .mod_btn01 a:before , .mod_btn01 button:before { -webkit-transition: all .5s ease-out; transition: all .5s ease-out; }  .mod_btn01 a:hover , .mod_btn01 button:hover { background: #06a577; color: #fff; }  .mod_btn01 a:hover:before , .mod_btn01 button:hover:before { background-image: url(../img/common/ico_arw02.png); }  .mod_btn01.return a:before , .mod_btn01.return button:before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }  .mod_btn01.download a:before { right: 15px; width: 15px; height: 19px; background-size: 15px auto; }  .mod_btn01.download a:hover:before { background: url(../img/common/ico_download02.png) no-repeat; background-size: 15px auto; } }
/*
#styleguide
mod_btn01

```
<p class="btn mod_btn01"><a href="#">DUMMY</a></p>
```
*/
.mod_btn02 { width: 290px; max-width: 100%; margin: 0 auto; }
.mod_btn02 a { display: table-cell; width: 284px; height: 74px; line-height: 1.375; padding: 0 0 0 19px; border: 3px solid #06a577; border-radius: 6px; font-weight: 700; font-size: 25.6px; font-size: 1.6rem; vertical-align: middle; text-shadow: 0 2px 0 #fff,
 2px 0 0 #fff,
 0 -2px 0 #fff,
 -2px 0 0 #fff,
 -2px -2px 0 #fff,
 2px -2px 0 #fff,
 -2px 2px 0 #fff,
 2px 2px 0 #fff; }
.mod_btn02 a .sub { display: block; color: #06a577; font-size: 20.8px; font-size: 1.3rem; }
.mod_btn02.blog a { background: url(../img/common/btn_blog01_sp.png) right center no-repeat; background-size: auto 100%; }
@media all and (min-width: 600px) { .mod_btn02 { width: 600px; }  .mod_btn02 a { position: relative; width: 592px; height: 132px; line-height: 1.6; padding: 0 0 0 40px; border: 4px solid #06a577; border-radius: 10px; background-size: auto 132px !important; font-size: 2.2rem; text-shadow: none; }  .mod_btn02 a .sub { font-size: 1.8rem; }  .mod_btn02 a:hover { background: #06a577 !important; color: #fff; }  .mod_btn02 a:hover:after { position: absolute; top: 0; right: 20px; bottom: 0; width: 7px; height: 13px; margin: auto; background: url(../img/common/ico_arw02.png) center center no-repeat; background-size: cover; content: ""; }  .mod_btn02 a:hover .sub { color: #fff; }  .mod_btn02.blog a { background: url(../img/common/btn_blog01_pc.png) right center no-repeat; background-size: auto 100%; } }
/*
#styleguide
mod_link02
背景画像付き緑枠リンク

```
<p class="mod_btn02><a href="" class="mod_link02">社長ブログ<br>BLOG</a></p>
<!-- /.mod_btn02 -->
```
*/
.mod_btn03 { width: 290px; margin: 0 auto; }
.mod_btn03 a , .mod_btn03 input { display: block; position: relative; width: 100%; line-height: 1.5; padding: 12px 20px; border: none; border-radius: 6px; background: #06a577; color: #fff; font-weight: bold; font-size: 25.6px; font-size: 1.6rem; text-align: center; letter-spacing: .12em; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.mod_btn03 a:before , .mod_btn03 input:before { position: absolute; top: 50%; right: 15px; width: 7px; height: 13px; margin-top: -6px; background: url(../img/common/ico_arw02.png) no-repeat; background-size: 100%; content: ""; }
.mod_btn03.return a:before , .mod_btn03.return input:before { right: auto; left: 15px; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
@media all and (min-width: 600px) { .mod_btn03 { width: 350px; }  .mod_btn03 a , .mod_btn03 input { padding: 15px 20px; font-size: 1.7rem; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; }  .mod_btn03 a:before , .mod_btn03 input:before { -webkit-transition: all .5s ease-out; transition: all .5s ease-out; }  .mod_btn03 a:hover , .mod_btn03 input:hover { opacity: .6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; } }
/*
#styleguide
mod_btn01

```
<p class="btn mod_btn01"><a href="#">DUMMY</a></p>
```
*/
.mod_migratory01 { margin: 35px 0 0; }
.mod_migratory01 .links { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 15px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.mod_migratory01 .links > li { width: calc(50% - 5px); position: relative; }
.mod_migratory01 .links > li:nth-child(odd) { margin-right: 10px; }
.mod_migratory01 .links > li:nth-child(n+3) { margin-top: 10px; }
.mod_migratory01 .links > li a { display: table-cell; width: 600px; height: 62px; line-height: 1.375; padding: 0 0 0 16px; border: 3px solid #06a577; border-radius: 8px; font-weight: 700; font-size: 25.6px; font-size: 1.6rem; vertical-align: middle; text-shadow: 0 2px 0 #fff,
 2px 0 0 #fff,
 0 -2px 0 #fff,
 -2px 0 0 #fff,
 -2px -2px 0 #fff,
 2px -2px 0 #fff,
 -2px 2px 0 #fff,
 2px 2px 0 #fff; }
.mod_migratory01 .links > li:nth-child(1) a { background: url(../img/company/btn_link06.png) right center no-repeat; background-size: auto 68px; }
.mod_migratory01 .links > li:nth-child(2) a { background: url(../img/company/btn_link07.png) right center no-repeat; background-size: auto 68px; }
.mod_migratory01 .links > li:nth-child(3) a { background: url(../img/company/btn_link08.png) right center no-repeat; background-size: auto 68px; }
.mod_migratory01 .links > li:nth-child(4) a { background: url(../img/company/btn_link09.png) right center no-repeat; background-size: auto 68px; }
.mod_migratory01 .links > li:nth-child(5) a { background: url(../img/company/btn_link05.png) right center no-repeat; background-size: auto 68px; }


.mod_migratory01 .links > li:nth-child(3):hover::before,
.mod_migratory01 .links > li:nth-child(5):hover::before {
	display: none;
}

@media all and (min-width: 600px) { .mod_migratory01 { width: 1100px; margin: 90px auto 0; }  .mod_migratory01 .links { display: block; margin: 0; }  .mod_migratory01 .links > li { position: relative; float: left; width: 350px; margin-left: 25px; }  .mod_migratory01 .links > li:nth-child(odd) { margin-right: 0; }  .mod_migratory01 .links > li:nth-child(n+3) { margin-top: 0; }  .mod_migratory01 .links > li:nth-child(n+4) { margin-top: 20px; }  .mod_migratory01 .links > li:nth-child(odd) { margin-right: 0; }  .mod_migratory01 .links > li:first-child , .mod_migratory01 .links > li:nth-child(3n+1) { margin-left: 0; }  .mod_migratory01 .links > li a { width: 350px; height: 102px; line-height: 1.6; padding: 0 0 0 25px; border: 4px solid #06a577; border-radius: 10px; background-size: auto 102px !important; font-size: 2.0rem; }  .mod_migratory01 .links > li a:hover { background: #06a577; color: #fff; text-shadow: none; }  .mod_migratory01 .links > li a:hover:after { position: absolute; top: 0; right: 20px; bottom: 0; width: 7px; height: 13px; margin: auto; background: url(../img/common/ico_arw02.png) center center no-repeat; background-size: cover; content: ""; } }
/*
#styleguide
mod_migratory01
回遊用ナビ

```
<nav class="mod_migratory01">
	<ul class="links">
		<li><a href="/company/">会社概要</a></li>child(3)
		<li><a href="/company/greeting/">ご挨拶</a></li>
		<li><a href="/company/history/">あゆみ</a></li>
		<li><a href="/company/vision/">経営理念</a></li>
		<li><a href="/company/morinaga-press/">MORINAGA<br>PRESS</a></li>
	</ul>
</nav>
<!-- /#hoge -->
```
*/
/*!  pager
================================================ */
.mod_pagination01 { margin: 30px 0 0; padding: 20px 12px; background: url(../img/common/bg_pattern02.png) repeat; background-size: 55px; }
.mod_pagination01 .page_navi { position: relative; box-sizing: border-box; overflow: hidden; padding: 0 48px; text-align: center; letter-spacing: -.5em; }
.mod_pagination01 .page_navi > li { display: inline-block; width: 45px; height: 45px; overflow: hidden; margin: 0 3px; vertical-align: top; letter-spacing: .1em; }
.mod_pagination01 .page_navi > li a { display: block; position: relative; width: 39px; height: 39px; line-height: 39px; overflow: hidden; border: 3px solid #06a577; border-radius: 6px; background: #fff; font-weight: 700; font-size: 22.4px; font-size: 1.4rem; text-align: center; }
.mod_pagination01 .page_navi > li.current { width: 32px; }
.mod_pagination01 .page_navi > li.current span { display: block; width: 32px; height: 45px; line-height: 45px; font-weight: 700; font-size: 22.4px; font-size: 1.4rem; }
.mod_pagination01 .page_navi > li.previous , .mod_pagination01 .page_navi > li.next { position: absolute; right: 0; }
.mod_pagination01 .page_navi > li.previous a , .mod_pagination01 .page_navi > li.next a { text-indent: 50px; white-space: nowrap; }
.mod_pagination01 .page_navi > li.previous a:before , .mod_pagination01 .page_navi > li.next a:before { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 7px; height: 13px; margin: auto; background: url(../img/common/ico_arw01.png) center center no-repeat; background-size: cover; content: ""; }
.mod_pagination01 .page_navi > li.previous { right: auto; left: 0; }
.mod_pagination01 .page_navi > li.previous a:before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
@media all and (max-width: 370px) { .mod_pagination01 .page_navi { padding: 0 39px; }  .mod_pagination01 .page_navi > li { width: 36px; height: 36px; }  .mod_pagination01 .page_navi > li a { width: 30px; height: 30px; line-height: 30px; }  .mod_pagination01 .page_navi > li.current { width: 28px; }  .mod_pagination01 .page_navi > li.current span { width: 28px; height: 36px; line-height: 36px; } }
@media all and (min-width: 600px) { .mod_pagination01 { margin: 70px auto 0; padding: 25px 0; }  .mod_pagination01 .page_navi { width: 350px; margin: 0 auto; padding: 0 45px; }  .mod_pagination01 .page_navi > li { width: 40px; height: 40px; margin: 0 5px; }  .mod_pagination01 .page_navi > li a { width: 34px; height: 34px; line-height: 34px; font-size: 1.5rem; -webkit-transition: all .2s ease; transition: all .2s ease; }  .mod_pagination01 .page_navi > li a:hover { background: #06a577; color: #fff; }  .mod_pagination01 .page_navi > li.current { width: 40px; }  .mod_pagination01 .page_navi > li.current span { width: 40px; height: 40px; line-height: 40px; font-size: 1.5rem; }  .mod_pagination01 .page_navi > li.previous a:before , .mod_pagination01 .page_navi > li.next a:before { -webkit-transition: all .2s ease; transition: all .2s ease; }  .mod_pagination01 .page_navi > li.previous a:hover:before , .mod_pagination01 .page_navi > li.next a:hover:before { background: url(../img/common/ico_arw02.png) center center no-repeat; background-size: cover; } }
/*
#styleguide
mod_pagination01

pager

```

<nav class="mod_pagination01">
	<ul class="page_navi">
		<li class="previous"><a href="">前へ</a></li>
		<li><a href="">1</a></li>
		<li><a href="">2</a></li>
		<li class="current"><span>3</span></li>
		<li><a href="">1</a></li>
		<li><a href="">2</a></li>
		<li class="next"><a href="">次へ</a></li>
	</ul>
</nav>
```
*/
.mod_pagination02 { margin: 30px 0 0; padding: 20px 15px; background: url(../img/common/bg_pattern02.png) repeat; background-size: 55px; }
.mod_pagination02 .page_navi { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.mod_pagination02 .page_navi > li { width: 45px; height: 45px; overflow: hidden; vertical-align: top; letter-spacing: .1em; }
.mod_pagination02 .page_navi > li a { display: block; position: relative; width: 39px; height: 39px; line-height: 39px; overflow: hidden; border: 3px solid #06a577; border-radius: 6px; background: #fff; font-weight: 700; font-size: 22.4px; font-size: 1.4rem; text-align: center; }
.mod_pagination02 .page_navi > li.previous , .mod_pagination02 .page_navi > li.next { float: right; }
.mod_pagination02 .page_navi > li.previous a , .mod_pagination02 .page_navi > li.next a { text-indent: 50px; white-space: nowrap; }
.mod_pagination02 .page_navi > li.previous a:before , .mod_pagination02 .page_navi > li.next a:before { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 7px; height: 13px; margin: auto; background: url(../img/common/ico_arw01.png) center center no-repeat; background-size: cover; content: ""; }
.mod_pagination02 .page_navi > li.list { margin: 0 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.mod_pagination02 .page_navi > li.list a { box-sizing: border-box; width: 100%; height: 45px; }
.mod_pagination02 .page_navi > li.previous { float: left; }
.mod_pagination02 .page_navi > li.previous a:before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
@media all and (max-width: 370px) { .mod_pagination02 .page_navi > li { width: 36px; height: 36px; }  .mod_pagination02 .page_navi > li a { width: 30px; height: 30px; line-height: 30px; }  .mod_pagination02 .page_navi > li.list a { height: 36px; } }
@media all and (min-width: 600px) { .mod_pagination02 { margin: 70px auto 0; padding: 25px 0; }  .mod_pagination02 .page_navi { width: 540px; margin: 0 auto; }  .mod_pagination02 .page_navi > li { width: 40px; height: 40px; }  .mod_pagination02 .page_navi > li a { width: 34px; height: 34px; line-height: 34px; font-size: 1.5rem; -webkit-transition: all .2s ease; transition: all .2s ease; }  .mod_pagination02 .page_navi > li a:hover { background: #06a577; color: #fff; }  .mod_pagination02 .page_navi > li.list a { height: 40px; }  .mod_pagination02 .page_navi > li.previous , .mod_pagination02 .page_navi > li.next { width: 140px; }  .mod_pagination02 .page_navi > li.previous a , .mod_pagination02 .page_navi > li.next a { width: 128px; padding-left: 6px; text-indent: 0; text-align: center; }  .mod_pagination02 .page_navi > li.previous a:before , .mod_pagination02 .page_navi > li.next a:before { right: auto; left: 10px; -webkit-transition: all .2s ease; transition: all .2s ease; }  .mod_pagination02 .page_navi > li.previous a:hover:before , .mod_pagination02 .page_navi > li.next a:hover:before { background: url(../img/common/ico_arw02.png) center center no-repeat; background-size: cover; }  .mod_pagination02 .page_navi > li.next a { padding-right: 6px; padding-left: 0; }  .mod_pagination02 .page_navi > li.next a:before { right: 10px; left: auto; } }
/*
#styleguide
mod_pagination01

pager

```

<nav class="mod_pagination01">
	<ul class="page_navi">
		<li class="previous"><a href="">前へ</a></li>
		<li><a href="">1</a></li>
		<li><a href="">2</a></li>
		<li class="current"><span>3</span></li>
		<li><a href="">1</a></li>
		<li><a href="">2</a></li>
		<li class="next"><a href="">次へ</a></li>
	</ul>
</nav>
```
*/

/*# sourceMappingURL=maps/modules.css.map */