@charset "UTF-8";
/*=============================================================
 04_modules
=============================================================*/
/*!  button .mod_btn01 toggle
================================================ */
.mod_btn01 { display: block; position: relative; line-height: 1.36; padding: 13px 15px; background: #353536; color: #fff; font-weight: bold; font-size: 1.4rem; }
.mod_btn01:after { display: block; position: absolute; top: 50%; right: 15px; width: 0; height: 0; margin-top: -3px; border-width: 5px 4px 0 4px; border-style: solid; border-color: #65b1e1 transparent transparent transparent; content: ""; -webkit-transition: all linear .3s; transition: all linear .3s; }
.mod_btn01.on:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
/* forPC */
@media screen and (min-width: 600px) { .mod_btn01 { padding: 14px 15px 16px; border-width: 3px 0; border-style: solid; border-color: #65b1e1 transparent; background: #fff; color: #353536; font-size: 2.8rem; text-align: center; letter-spacing: .075em; }  .mod_btn01:after { display: none; } }
/*
#styleguide
mod_btn01

mod_btn01

```
<p class="mod_btn01"><a href="#">mod_btn01</a></p>
```
*/
.mod_btn02 { display: block; position: relative; position: relative; top: 0; line-height: 1; padding: 11px 0; border-radius: 4px; background: #1693d4; color: #fff; font-weight: bold; font-size: 1.3rem; text-align: center; box-shadow: 0 4px 0 0 #037ab8; }
.mod_btn02:hover { top: 4px; -webkit-transition: all linear .3s; transition: all linear .3s; box-shadow: none; }
@media screen and (min-width: 600px) { .mod_btn02 { box-shadow: 0 5px 0 0 #037ab8; }  .mod_btn02:hover { top: 5px; } }
.mod_btn02 .ico { position: absolute; top: 50%; right: 15px; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; }
.mod_btn02 .ico:after { display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: #1693d4; content: ""; }
.mod_btn02.on .ico:before { display: block; position: absolute; top: 50%; left: 50%; width: 2px; height: 10px; margin: -5px 0 0 -1px; background: #1693d4; content: ""; }
/* forPC */
@media screen and (min-width: 600px) { .mod_btn02 { padding: 18px 0 21px; font-size: 2.5rem; letter-spacing: .075em; cursor: pointer; }  .mod_btn02 .ico { right: 20px; width: 30px; height: 30px; margin-top: -15px; }  .mod_btn02 .ico:after { width: 18px; height: 4px; margin: -2px 0 0 -9px; }  .mod_btn02.on .ico:before { width: 4px; height: 18px; margin: -9px 0 0 -2px; } }
/*
#styleguide
mod_btn02

mod_btn02

```
<p class="mod_btn02"><a href="#">mod_btn01</a></p>
```
*/
/*!  tit
================================================ */
.mod_tit01 { line-height: 1.33; padding: 8px 0; border-width: 2px 0; border-style: solid; border-color: #1693d4; font-weight: bold; font-size: 1.5rem; text-align: center; }
.mod_tit01 span { display: block; line-height: 1.82; font-weight: bold; font-size: 1.1rem; }
/* forPC */
@media screen and (min-width: 600px) { .mod_tit01 { line-height: 1.29; padding: 16px 0 13px; border-width: 3px 0; font-size: 2.8rem; letter-spacing: .075em; }  .mod_tit01 span { line-height: 2.25; margin-top: -6px; font-size: 1.6rem; } }
/*
#styleguide
mod_tit01

mod_tit01

```
<p class="mod_tit01">mod_tit01</p>
```
*/
/*!  box
================================================ */
/* forPC */
@media screen and (min-width: 600px) { .mod_inner { width: 1050px; margin: 0 auto; } }
/*
#styleguide
mod_inner

真ん中よせ

```
<div class="mod_inner">mod_inner</div>
```
*/
.mod_bg_stripe01 { background: url("../img/common/bg_stripe01.png"); background-size: 17px; }
.mod_bg_stripe02 { background: url("../img/common/bg_stripe02.png"); background-size: 17px; }
/*!  tit
================================================ */
.mod_contact01 { position: relative; overflow: hidden; padding: 15px 15px 35px; background: #65b1e1 url("../img/common/mod_contact01/bg_mod_contact01.png") repeat-x bottom left; background-size: 216px; }
.mod_contact01 .msg { line-height: 1.45; padding: 17px 18px 20px; border: 2px solid #353536; border-radius: 2px; background: #fff; letter-spacing: .03em; }
.mod_contact01 .msg .txt { font-weight: bold; font-size: 1.1rem; }
.mod_contact01 .msg strong { display: block; line-height: 1.26; padding: 5px 0 0 2px; font-weight: bold; font-size: 1.9rem; }
.mod_contact01 .list { margin-top: 15px; padding: 0 0 0 10px; }
.mod_contact01 .list li { position: relative; padding: 0 0 0 18px; font-weight: bold; font-size: 1.2rem; }
.mod_contact01 .list li + li { margin-top: 10px; }
.mod_contact01 .list li:after { display: block; position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; background-image: url("../img/common/ico_check01.png"); background-repeat: no-repeat; background-position: center; background-size: contain; content: ""; }
.mod_contact01 .img { position: absolute; right: 0; bottom: -30px; width: 116px; }
/* forPC */
@media screen and (min-width: 600px) { .mod_contact01 { padding: 64px 0 108px 102px; background-image: url("../img/common/mod_contact01/bg_mod_contact01_pc.png"); background-size: 1235px; }  .mod_contact01 .mod_contactIn { position: relative; }  .mod_contact01 .msg { position: relative; width: 715px; padding: 45px 0 52px 38px; border-width: 3px; border-radius: 4px; letter-spacing: .1em; }  .mod_contact01 .msg:after { display: block; position: absolute; top: 50%; right: -16px; box-sizing: border-box; width: 32px; height: 32px; margin-top: -16px; border-width: 3px; border-style: solid; border-color: transparent transparent #353536 #353536; background: #fff; content: ""; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }  .mod_contact01 .msg .txt { font-size: 2.2rem; }  .mod_contact01 .msg strong { margin-left: -5px; padding: 2px 0 0; font-size: 3.4rem; letter-spacing: .1em; }  .mod_contact01 .list { overflow: hidden; margin-top: 35px; padding: 0 0 1px 48px; }  .mod_contact01 .list li { float: left; padding: 0 0 0 37px; font-size: 2.3rem; }  .mod_contact01 .list li + li { margin: 0 0 0 30px; }  .mod_contact01 .list li:after { width: 24px; height: 24px; margin-top: -12px; }  .mod_contact01 .img { right: 50px; bottom: -195px; width: 296px; } }
/*
#styleguide
mod_contact01

mod_contact01

```
<div class="mod_contact01">
	<div class="mod_inner">
		<div class="msg">
			<p class="txt">所有者(管理組合)の皆さまが<br>安心して定期報告を実施できるよう、<strong>さくら事務所が<br>フルポートいたします!</strong></p>
		</div>
		<!-- /.msg -->
		<ul class="list">
			<li>マンション診断のプロが対応!</li>
			<li>完全自社対応!</li>
		</ul>
		<!-- /.list -->
		<div class="img"><img src="/img/common/mod_contact01/img_mod_contact01.png" alt=""></div>
	</div>
	<!-- /.mod_inner -->
</div>
<!-- /.mod_contact01 -->
```
*/