@charset "UTF-8";
/*  04_modules
================================================ */
/*!  article
================================================ */
/*
Article

mod_article01

.mod_article01 - base style

Markup:
<article class="mod_article01">
	<div class="mod_article01_thum"><img src="https://placehold.jp/810x522.png" alt=""></div>
	<header class="mod_article01_head">
		<div class="mod_article01_meta">
			<ul class="mod_article01_tag mod_tag01 is_black">
				<li>ニュース</li>
			</ul>
			<time class="mod_article01_date fontOzwald">2019.12.12</time>
		</div>
		<h1>年末年始休業日お知らせ</h1>
	</header>
	<div class="mod_article01_content">
		<p>12/29(土)～1/6(日)まで誠に勝手ながら冬季休暇とさせていただきます。<br>新年2019年1月7日より通常営業致します。</p>
		<p>テキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
	<p class="mod_article01_btn mod_btn01 is_black is_back"><a href="/news/"><span class="mod_btn01_arw"></span>一覧に戻る</a></p>
</article>

Styleguide 13.0.0
*/
.mod_article01 { padding: 40px 25px; background: #fff; color: #222; }

.mod_article01_head { margin-top: 20px; }

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

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

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

.mod_article01_content { margin-top: 12px; }

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

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

.mod_article01_content p { margin: 10px 0; }

.mod_article01_otherWrap { margin-top: 30px; padding: 20px; background: #f5f5f5; }

.mod_article01 .mod_article01_post + .mod_article01_post { margin-top: 35px; }

@media screen and (min-width: 600px) { .mod_article01 { padding: 60px; }
  .mod_article01_head { margin-top: 40px; }
  .mod_article01_head h1 { margin-top: 15px; font-size: 3rem; }
  .mod_article01_tag { margin-right: 11px; }
  .mod_article01_content { margin-top: 24px; }
  .mod_article01_content p { margin: 26px 0; }
  .mod_article01 .mod_article01_btn { width: 330px; margin: 40px auto 0; }
  .mod_article01_otherWrap { margin-top: 75px; padding: 45px 50px 31px; }
  .mod_article01 .mod_article01_post + .mod_article01_post { margin-top: 0; } }

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

/*!  box
================================================ */
/*
Box

mod_box01

.mod_box01            - Base styles

Markup:
<div class="mod_box01 {$modifiers}">
	<div class="mod_box01_img"><img src="https://placehold.jp/670x472.png" alt=""></div>
	<div class="mod_box01_area_txt">
		<h3 class="mod_tit03">東京営業所</h3>
		<address class="mod_box01_txt">〒141-0033<br>東京都品川区西品川3-5-3</address>
		<p class="mod_box01_txt">Tel : 03-3779-4340<br>Fax : 03-3779-4585</p>
		<p class="mod_box01_txt"><a href="" class="mod_btn_inline01">地図・アクセス<span class="mod_btn_inline01_arw"></span></a></p>
	</div>
</div>

Styleguide 8.0.0
*/
.mod_box01 + .mod_box01 { margin-top: 28px; }

.mod_box01_area_txt { margin-top: 13px; }

.mod_box01_txt { margin-top: 10px; }

.mod_box01_txt + .mod_box01_txt { margin-top: 5px; }

@media screen and (min-width: 600px) { .mod_box01 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .mod_box01 + .mod_box01 { margin-top: 50px; }
  .mod_box01_img { box-sizing: border-box; width: 497px; padding-right: 40px; }
  .mod_box01_area_txt { width: calc(100% - 497px); margin-top: 0; padding: 20px 0; }
  .mod_box01_txt { margin-top: 25px; }
  .mod_box01_txt + .mod_box01_txt { margin-top: 18px; } }

/*!  button
================================================ */
/*
Button

mod_btn01

.mod_btn01 -base style
.mod_btn01.is_black -is_black

Markup:
<p class="btn mod_btn01 {$modifiers}"><a href="/company/"><span class="mod_btn01_txt">ニチネンの強み</span><span class="mod_btn01_arw"></span></a></p>

Styleguide 2.0.0
*/
.mod_btn01 { margin-top: 20px; }

.mod_btn01 a { position: relative; display: block; padding: 10px; color: #fff; text-align: center; border: 1px solid #979797; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_btn01 .mod_btn01_arw { position: absolute; top: 50%; right: 15px; display: block; margin-top: -4px; width: 22px; height: 8px; background: url("../img/common/ico_arw01.png") no-repeat right center; background-size: contain; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.mod_btn01.is_black a { border-color: #dedede; color: #222; }

.mod_btn01.is_black .mod_btn01_arw { background-image: url("../img/common/ico_arw01_black.png"); }

.mod_btn01.is_back .mod_btn01_arw { right: auto; left: 15px; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

@media screen and (min-width: 600px) { .mod_btn01 { max-width: 330px; margin: 42px 0 0; }
  .mod_btn01 a { padding: 23px; }
  .mod_btn01 .mod_btn01_arw { right: 22px; margin-top: -6px; }
  .mod_btn01 a:hover { background: #1065c6; border-color: #1065c6; color: #fff; }
  .mod_btn01 a:hover .mod_btn01_arw { background-image: url("../img/common/ico_arw01.png"); }
  .mod_btn01.is_black a:hover { background: #1065c6; border-color: #1065c6; }
  .mod_btn01.is_back .mod_btn01_arw { left: 22px; } }

.mod_btn01_list { margin-top: 20px; padding: 0 18px; }

.mod_btn01_list .mod_btn01 { margin-top: 0; }

.mod_btn01_list .mod_btn01 + .mod_btn01 { margin-top: 10px; }

@media screen and (min-width: 600px) { .mod_btn01_list { margin: 42px -5px 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .mod_btn01_list .mod_btn01 { width: calc(50% - 10px); margin: 0 5px; }
  .mod_btn01_list .mod_btn01 + .mod_btn01 { margin-top: 0; }
  .mod_btn01_list .mod_btn01:nth-child(n+3) { margin-top: 10px; } }

/*
Button

mod_btn_inline01

.mod_btn_inline01 -base style
.mod_btn_inline01.is_white -is_white

Markup:
<a href="" class="mod_btn_inline01 {$modifiers}">地図・アクセス<span class="mod_btn_inline01_arw"></span></a>

Styleguide 2.0.1
*/
.mod_btn_inline01 { color: #0b6791; text-decoration: none; }

.mod_btn_inline01_arw { display: inline-block; vertical-align: middle; width: 22px; height: 7px; margin-left: 10px; background: url("../img/common/ico_arw01_blue.png") no-repeat center; background-size: contain; }

.mod_btn_inline01.is_white { color: #fff; }

.mod_btn_inline01.is_white .mod_btn_inline01_arw { background-image: url("../img/common/ico_arw01.png"); }

@media screen and (min-width: 600px) { .mod_btn_inline01:hover .mod_btn_inline01_arw { margin-left: 20px; }
  .mod_btn_inline01_arw { margin-left: 14px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } }

/*
Button

mod_btn_contact

.mod_btn_contact  - base style
.mod_btn_contact.is_transparent  - .is_transparent
.mod_btn_contact.is_large  - .is_large

Markup:
<p class="btn mod_btn_contact {$modifiers}"><a href="/contact/"><span>お問い合わせ</span></a></p>

Styleguide 2.0.2
*/
.mod_btn_contact a { display: block; background: #fff; color: #222; font-weight: 700; text-decoration: none; padding: 13px 0; text-align: center; }

.mod_btn_contact span { position: relative; display: inline-block; padding-left: 33px; letter-spacing: .06em; }

.mod_btn_contact span:before { position: absolute; top: 50%; left: 0; content: ""; display: block; width: 22px; height: 15px; margin-top: -7px; background: url("../img/common/ico_mail01_black.png") no-repeat center; background-size: contain; }

.mod_btn_contact.is_transparent a { border: 1px solid #929292; background-color: transparent; color: #fff; }

.mod_btn_contact.is_transparent a span:before { background-image: url("../img/common/ico_mail01.png"); }

.mod_btn_contact.is_large a { padding: 15px 0 16px; }

@media screen and (min-width: 600px) { .mod_btn_contact { font-size: 1.8rem; }
  .mod_btn_contact a { padding: 22px; }
  .mod_btn_contact a:hover { background: #222; color: #fff; }
  .mod_btn_contact a:hover span:before { background-image: url("../img/common/ico_mail01.png"); }
  .mod_btn_contact span { padding-left: 37px; }
  .mod_btn_contact span:before { width: 28px; height: 18px; margin-top: -9px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn_contact.is_transparent a:hover { border-color: #222; }
  .mod_btn_contact.is_large { font-size: 2.5rem; }
  .mod_btn_contact.is_large a { padding: 27px 0 26px; }
  .mod_btn_contact.is_large a span { padding-left: 48px; }
  .mod_btn_contact.is_large a span:before { width: 32px; height: 22px; margin-top: -11px; } }

/*
Button

mod_btn02

.mod_btn02  - base style

Markup:

Styleguide 2.0.3
*/
.mod_btn02_list { overflow: hidden; margin: 0 -2px; }

.mod_btn02_list .mod_btn02 { float: left; box-sizing: border-box; width: 50%; padding: 0 2px; }

.mod_btn02_list .mod_btn02 a { position: relative; display: inline-block; box-sizing: border-box; width: 100%; padding: 16px; border: 1px solid #dedede; text-decoration: none; line-height: 1; }

.mod_btn02_list .mod_btn02 a:before { content: ''; position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%) rotate(-45deg); -ms-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); width: 6px; height: 6px; border: solid #222; border-width: 0 0 1px 1px; }

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

@media screen and (min-width: 600px) { .mod_btn02_list { margin: 0 -5px; }
  .mod_btn02_list .mod_btn02 { float: left; box-sizing: border-box; width: 16.666%; padding: 0 5px; }
  .mod_btn02_list .mod_btn02 a { padding: 20px; }
  .mod_btn02_list .mod_btn02 a:before { right: 20px; width: 5px; height: 5px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn02_list .mod_btn02 a:hover { background: #1065c6; border-color: #1065c6; color: #fff; }
  .mod_btn02_list .mod_btn02 a:hover:before { border-color: #fff; }
  .mod_btn02_list .mod_btn02:nth-child(n+3) { margin-top: 0; } }

/*!  cv
================================================ */
/*
Cv

mod_cv01

.mod_cv01            - Base styles

Markup:
<p class="mod_cv01">オフィス、工場、学校、ショップ、塾など様々な空間をご提案させていただきます。利用する方のことを第一に考え、安全・快適な空間提案をご提案いたします。</p>

Styleguide 14.0.0
*/
.mod_cv01 { background: url("../img/work/bg_contact01_sp.jpg") no-repeat center; background-size: cover; }

.mod_cv01 .mod_cv01_inner { padding-top: 45px; padding-bottom: 72px; }

.mod_cv01 .mod_cv01_list { margin-top: 24px; padding: 4px 23px 0; border-top: 1px solid #434343; }

.mod_cv01 .mod_cv01_list li { padding-top: 20px; }

.mod_cv01 .mod_cv01_list .mod_cv01_tit { position: relative; padding-left: 25px; font-size: 1.8rem; font-weight: 700; }

.mod_cv01 .mod_cv01_list .mod_cv01_tit:before { position: absolute; top: 9px; left: 0; box-sizing: border-box; content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; }

.mod_cv01 .mod_cv01_list .mod_cv01_btn { margin-top: 12px; }

@media screen and (min-width: 600px) { .mod_cv01 { background-image: url("../img/work/bg_contact01_pc.jpg"); }
  .mod_cv01 .mod_cv01_inner { padding: 90px 0 100px; }
  .mod_cv01 .mod_cv01_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 42px; padding: 24px 0 0; }
  .mod_cv01 .mod_cv01_list li { width: calc(50% - 20px); }
  .mod_cv01 .mod_cv01_list li + li { margin-left: 40px; }
  .mod_cv01 .mod_cv01_list .mod_cv01_tit { padding-left: 28px; }
  .mod_cv01 .mod_cv01_list .mod_cv01_tit:before { top: 9px; width: 18px; height: 18px; }
  .mod_cv01 .mod_cv01_list .mod_cv01_btn { margin-top: 12px; } }

/*!  pagination
================================================ */
/*
Pagination

mod_pagination01

.mod_pagination01 - base style

Markup:
<ul class="mod_pagination01">
	<li class="prev"><a href="">前のページへ</a></li>
	<li class="current"><span>2</span></li>
	<li><a href="">2</a></li>
	<li class="next"><a href="">次のページへ</a></li>
</ul>

Styleguide 12.0.0
*/
.mod_pagination01 { margin-top: 40px; letter-spacing: -.5em; line-height: 1; text-align: center; font-size: 0; }

.mod_pagination01 li { box-sizing: border-box; display: inline-block; width: 40px; height: 40px; margin: 5px; font-size: 1.5rem; }

.mod_pagination01 a, .mod_pagination01 span { box-sizing: border-box; display: block; height: 100%; padding: 12px 1px 0 0; border: 1px solid #fff; }

.mod_pagination01 a { text-decoration: none; }

.mod_pagination01 span { background: #fff; color: #222; }

.mod_pagination01 .previous a, .mod_pagination01 .next a { position: relative; overflow: hidden; text-indent: 200%; white-space: nowrap; border-color: #999; }

.mod_pagination01 .previous a:before, .mod_pagination01 .next a:before { position: absolute; top: 14px; left: 8px; content: ""; display: block; width: 22px; height: 7px; background: url("../img/common/ico_arw01.png") no-repeat center; background-size: contain; opacity: .8; }

.mod_pagination01 .previous { margin-right: 20px; margin-left: 0; }

.mod_pagination01 .previous a:before { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

.mod_pagination01 .next { margin-right: 0; margin-left: 20px; }

@media screen and (min-width: 600px) { .mod_pagination01 { position: relative; margin-top: 74px; padding: 0 140px; }
  .mod_pagination01 a:hover { background: #fff; color: #222; }
  .mod_pagination01 .previous, .mod_pagination01 .next { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 140px; margin-top: 0; }
  .mod_pagination01 .previous a, .mod_pagination01 .next a { text-indent: 0; border-color: transparent; color: #999; }
  .mod_pagination01 .previous a:before, .mod_pagination01 .next a:before { top: 13px; }
  .mod_pagination01 .previous a:hover, .mod_pagination01 .next a:hover { background: transparent; color: #fff; }
  .mod_pagination01 .previous { left: 0; margin-right: 0; text-align: right; }
  .mod_pagination01 .previous a:before { left: 0; }
  .mod_pagination01 .next { right: 0; margin-left: 0; text-align: left; }
  .mod_pagination01 .next a:before { left: auto; right: 0; } }

/*!  post
================================================ */
/*
Post

mod_post01

.mod_post01            - Base styles

Markup:
<ul class="mod_post01_list">
	<li class="mod_post01"><a href="">
		<p class="mod_post01_date fontOzwald">2019.12.12</p>
		<p class="mod_post01_cat"><span>ニュース</span></p>
		<div class="mod_post01_content">
			<p class="mod_post01_tit">年末年始休業日お知らせ</p>
			<div class="mod_post01_txt">12/29(土)～1/6(日)まで誠に勝手ながら冬季休暇とさせていただきます。<br>新年2019年1月7日より通常営業致します。</div>
		</div>
	</a></li>
	<li class="mod_post01"><a href="">
		<p class="mod_post01_date fontOzwald">2019.12.12</p>
		<p class="mod_post01_cat"><span>採用情報</span></p>
		<div class="mod_post01_content">
			<p class="mod_post01_tit">採用情報更新のお知らせ</p>
			<div class="mod_post01_txt">「守口配送センター」の配送スタッフ採用情報を公開いたしました。</div>
		</div>
	</a></li>
</ul>

Styleguide 7.0.0
*/
.mod_post01 { border-top: 1px solid #575757; }

.mod_post01_list { margin-top: 24px; }

.mod_post01:last-child { border-bottom: 1px solid #575757; }

.mod_post01 a { display: block; padding: 25px 0 20px; text-decoration: none; }

.mod_post01 .mod_post01_date { display: inline-block; padding: 6px 0 0; vertical-align: top; line-height: 1.1; color: #999; margin-right: 15px; }

.mod_post01 .mod_post01_cat { display: inline-block; }

.mod_post01 .mod_post01_cat span { display: inline-block; padding: 1px 14px; font-size: 1.3rem; background: #fff; color: #222; margin-right: 10px; }

.mod_post01 .mod_post01_content { margin-top: 12px; font-size: 1.3rem; }

.mod_post01 .mod_post01_tit { font-size: 1.5rem; font-weight: 700; }

@media screen and (min-width: 600px) { .mod_post01_list { margin-top: 5px; }
  .mod_post01 a { padding: 38px 0 43px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .mod_post01 a:hover .mod_post01_txt { text-decoration: underline; }
  .mod_post01 .mod_post01_date { box-sizing: border-box; width: 105px; padding: 4px 0 0 2px; margin-right: 0; }
  .mod_post01 .mod_post01_cat { box-sizing: border-box; width: 124px; }
  .mod_post01 .mod_post01_cat span { padding: 2px 20px; margin-right: 0; }
  .mod_post01 .mod_post01_content { box-sizing: border-box; width: calc(100% - 105px - 124px); margin-top: 0; padding: 2px 0; font-size: 1.3rem; } }

/*
Post

mod_post02

.mod_post02            - Base styles

Markup:
<ul class="mod_post02_list">
	<li class="mod_post02"><a href="single.php" class="opacity">
		<div class="mod_post02_img"><img src="https://placehold.jp/670x432.png" alt=""></div>
		<div class="mod_post02_meta">
			<ul class="mod_post02_tag mod_tag01">
				<li>ニュース</li>
			</ul>
			<p class="mod_post02_date fontOzwald">2019.12.12</p>
		</div>
		<p class="mod_post02_tit">年末年始休業日お知らせ</p>
	</a></li>
	<li class="mod_post02"><a href="single.php" class="opacity">
		<div class="mod_post02_img"><img src="https://placehold.jp/670x432.png" alt=""></div>
		<div class="mod_post02_meta">
			<ul class="mod_post02_tag mod_tag01">
				<li>ニュース</li>
			</ul>
			<p class="mod_post02_date fontOzwald">2019.12.12</p>
		</div>
		<p class="mod_post02_tit">年末年始休業日お知らせ</p>
	</a></li>
</ul>

Styleguide 7.0.1
*/
.mod_post02_list { margin-top: 40px; }

.mod_post02 + .mod_post02 { margin-top: 35px; }

.mod_post02 a { display: block; text-decoration: none; }

.mod_post02_meta { margin-top: 20px; }

.mod_post02_tag { display: inline-block; vertical-align: middle; margin-right: 10px; }

.mod_post02_date { display: inline-block; color: #999; }

.mod_post02_tit { margin-top: 10px; font-size: 1.7rem; font-weight: 700; }

.mod_post02.is_side + .is_side { margin-top: 18px; padding-top: 20px; border-top: 1px solid #e5e5e5; }

.mod_post02.is_side .mod_post02_tag li { background-color: #fff; color: #222; }

@media screen and (min-width: 600px) { .mod_post02 { margin: 0 15px; width: calc(33.333% - 30px); }
  .mod_post02_list { margin: 80px -15px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
  .mod_post02 + .mod_post02 { margin-top: 0; }
  .mod_post02:nth-child(n+4) { margin-top: 60px; }
  .mod_post02 a { padding-bottom: 15px; }
  .mod_post02_meta { margin-top: 30px; }
  .mod_post02_tit { margin-top: 12px; font-size: 1.6rem; }
  .mod_post02.is_column2 { width: calc(50% - 30px); }
  .mod_post02.is_side { display: block; width: 100%; }
  .mod_post02.is_side + .is_side { margin-top: 14px; padding-top: 30px; border-top: 1px solid #e5e5e5; }
  .mod_post02.is_side .mod_post02_meta { margin-top: 17px; }
  .mod_post02.is_side .mod_post02_tag li { background-color: #fff; color: #222; } }

/*!  section
================================================ */
/*
Section

mod_section01
is_reverseの時はjs-modal-triggerのボタン画像を<img src="/img/common/btn_more01_white.jpg" alt="MORE">

.mod_section01            - Base styles
.mod_section01.is_reverse            - .is_reverse

Markup:
<section class="mod_section01 {$modifiers}">
	<div class="mod_section01_img">
		<div class="mod_section01_img_inner">
			<img src="/img/work/img09_01.jpg" alt="">
			<p class="js-modal-trigger mod_section01_btn" data-modal="popup01"><img src="/img/common/btn_more01.jpg" alt="MORE"></p>
		</div>
	</div>
	<div class="js-modal-layer" data-modal="popup01">
		<div class="js-modal-content">
			<div class="js-modal-close" data-modal="popup01">閉じる</div>
			<div class="js-modal-slider mod_slider01">
				<div class="mod_slider01_item"><img src="/img/work/img01_01.jpg" alt=""></div>
				<div class="mod_slider01_item"><img src="/img/work/img01_02.jpg" alt=""></div>
				<div class="mod_slider01_item"><img src="/img/work/img01_03.jpg" alt=""></div>
			</div>
		</div>
	</div>
	<div class="mod_section01_area_txt">
		<div class="mod_section01_content">
			<ul class="mod_tag01">
				<li>オフィス</li>
			</ul>
			<h3 class="mod_section01_tit">沢井</h3>
			<p class="mod_section01_txt">〇〇〇〇〇〇〇〇〇10〇〇〇〇〇〇〇〇〇20〇〇〇〇〇〇〇〇〇30〇〇〇〇〇〇〇〇〇40〇〇〇〇〇〇〇〇〇50〇〇〇〇〇〇〇〇〇60〇〇〇〇〇〇〇〇〇70〇〇〇〇〇〇〇〇〇80〇〇〇〇〇〇〇〇〇90〇〇〇〇〇〇〇〇〇100〇〇〇〇〇〇〇〇〇10〇〇〇〇〇〇〇〇〇20〇〇〇〇〇〇〇〇〇30〇〇〇〇〇〇〇〇〇40〇〇〇〇〇〇〇〇〇50</p>
		</div>
	</div>
</section>

Styleguide 10.0.0
*/
.mod_section01_list { margin: 40px -20px 0; }

.mod_section01 + .mod_section01 { margin-top: 40px; }

.mod_section01_img { position: relative; }

.mod_section01_btn { position: absolute; right: 0; bottom: 0; width: 50px; cursor: pointer; }

.mod_section01_area_txt { padding: 30px 20px 32px; background: #fff; color: #222; }

.mod_section01_tit { margin-top: 16px; font-size: 2rem; font-weight: 700; line-height: 1.4; }

.mod_section01_txt { margin-top: 16px; }

.mod_section01.is_reverse .mod_section01_btn { right: auto; left: 0; }

.mod_section01.is_reverse .mod_section01_area_txt { background: #f5f5f5; }

@media screen and (min-width: 600px) { .mod_section01 { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 50px; }
  .mod_section01_list { margin: 80px 0 0; }
  .mod_section01 + .mod_section01 { margin-top: 100px; }
  .mod_section01_img { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; position: relative; z-index: 2; width: 50%; }
  .mod_section01_img:after { content: ""; display: block; clear: both; }
  .mod_section01_img_inner { float: left; position: relative; margin-left: -45px; width: calc(50vw + 45px); min-width: 694px; }
  .mod_section01_img_inner > img { float: left; width: 100%; max-width: none; min-width: 960px; }
  .mod_section01_btn { z-index: 3; right: 49px; width: 70px; }
  .mod_section01_area_txt { position: relative; box-sizing: border-box; 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-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 50%; margin: 50px 0 -50px; padding: 35px 270px 30px 0; }
  .mod_section01_area_txt:before { content: ""; display: block; position: absolute; top: 0; bottom: 0; right: -60px; width: calc(50vw + 55px); min-width: 970px; background: #fff; }
  .mod_section01_tit { position: relative; z-index: 1; margin-top: 22px; font-size: 3rem; }
  .mod_section01_txt { position: relative; z-index: 1; margin-top: 36px; }
  .mod_section01.is_reverse .mod_section01_btn { right: auto; left: 49px; }
  .mod_section01.is_reverse .mod_section01_img { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  .mod_section01.is_reverse .mod_section01_img_inner { float: right; margin: 0 -45px 0 auto; }
  .mod_section01.is_reverse .mod_section01_img_inner > img { float: right; }
  .mod_section01.is_reverse .mod_section01_area_txt { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-right: 0; padding-left: 270px; background: #f5f5f5; }
  .mod_section01.is_reverse .mod_section01_area_txt:before { right: auto; left: -60px; } }

/*!  slider
================================================ */
/*
Slider

mod_slider01

.mod_slider01            - Base styles

Markup:
<div class="js-modal-slider mod_slider01">
	<div class="mod_slider01_item"><img src="/img/work/img01_01.jpg" alt=""></div>
	<div class="mod_slider01_item"><img src="/img/work/img01_02.jpg" alt=""></div>
	<div class="mod_slider01_item"><img src="/img/work/img01_03.jpg" alt=""></div>
</div>

Styleguide 9.0.0
*/
.mod_slider01_item { position: relative; }

.mod_slider01_item .tag { position: absolute; top: 0; left: 0; display: inline-block; font-size: 1.3rem; padding: 6px 20px; line-height: 1; color: #fff; background: #222222; }

.mod_slider01.slick-slider { width: 100%; margin-bottom: 0; }

.mod_slider01 .slick-dots { position: static; margin-top: 25px; line-height: 1; font-size: 0; letter-spacing: -.5em; }

.mod_slider01 .slick-dots li { width: 10px; height: 10px; margin: 0 5px; }

.mod_slider01 .slick-dots li button { box-sizing: border-box; width: 10px; height: 10px; padding: 0; border: 2px solid #fff; border-radius: 50%; }

.mod_slider01 .slick-dots li button:before { display: none; }

.mod_slider01 .slick-dots li.slick-active button { background: #fff; }

@media screen and (max-width: 599px) { .mod_slider01 .slick-arrow { display: none; } }

@media screen and (min-width: 600px) { .mod_slider01_item .tag { font-size: 1.8rem; padding: 8px 15px; }
  .mod_slider01 .slick-dots { margin-top: 40px; }
  .mod_slider01 .slick-dots li { margin: 0 10px; }
  .mod_slider01 .slick-dots li button { border-width: 1px; }
  .mod_slider01 .slick-arrow { z-index: 1; width: 50px; height: 18px; margin: -50px 0 0; background: url("../img/common/ico_arw01.png") no-repeat center; background-size: contain; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_slider01 .slick-arrow:before { display: none; }
  .mod_slider01 .slick-arrow:hover { opacity: .7; }
  .mod_slider01 .slick-next { right: -90px; }
  .mod_slider01 .slick-prev { left: -90px; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } }

/*!  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>株式会社ニチネン<br>NICHINEN Co., Ltd.</td>
		</tr>
		<tr>
			<th>代表者</th>
			<td>服部 哲史</td>
		</tr>
	</tbody></table>
</div>

Styleguide 4.0.0
*/
.mod_table01 { margin-top: 23px; }

.mod_table01:first-child { margin-top: 0; }

.mod_table01 th { padding: 9px 15px; }

.mod_table01 td { padding: 9px 15px 20px; }

@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 { background: #f5f5f5; } }

@media screen and (min-width: 600px) { .mod_table01 { margin-top: 42px; }
  .mod_table01 th, .mod_table01 td { border-top: 1px solid #dedede; }
  .mod_table01 th { position: relative; box-sizing: border-box; width: 247px; padding: 26px 15px; }
  .mod_table01 th:after { position: absolute; top: 0; bottom: 0; right: 0; content: ""; display: block; width: 1px; margin: 20px 0; background: #dedede; }
  .mod_table01 td { padding: 26px 30px; } }

/*!  tag
================================================ */
/*
Tag

mod_tag01

.mod_tag01            - Base styles
.mod_tag01.is_white            - .is_white

Markup:
<ul class="mod_tag01 {$modifiers}">
	<li>オフィス</li>
</ul>

Styleguide 11.0.0
*/
.mod_tag01 { position: relative; z-index: 1; font-size: 1.3rem; letter-spacing: -.5em; }

.mod_tag01 li { display: inline-block; margin-right: 5px; padding: 1px 12px; background: #222; color: #fff; letter-spacing: .06em; }

.mod_tag01.is_white li { background: #fff; color: #222; }

@media screen and (min-width: 600px) { .mod_tag01 li { padding: 2px 20px 3px; } }

/*!  tel
================================================ */
/*
Tel

mod_tel01

.mod_tel01 - base style
.mod_tel01.is_btn - is_btn

Markup:
<p class="tel mod_tel {$modifiers}"><a href="tel:06-6458-4141" class="fontOzwald">06-6458-4141</a></p>

Styleguide 5.0.0
*/
.mod_tel { font-size: 3rem; line-height: 1; }

.mod_tel a { position: relative; display: inline-block; text-decoration: none; padding-left: 25px; }

.mod_tel a:before { position: absolute; top: 50%; left: 0; content: ""; display: block; width: 18px; height: 25px; margin-top: -12px; background: url("../img/common/ico_tel01.png") no-repeat center; background-size: contain; }

.mod_tel.is_btn a { display: block; background: #222; padding: 15px 0; text-align: center; }

.mod_tel.is_btn a:before { display: none; }

.mod_tel.is_btn a span { position: relative; display: inline-block; padding-left: 25px; }

.mod_tel.is_btn a span:before { position: absolute; top: 50%; left: 0; content: ""; display: block; width: 18px; height: 25px; margin-top: -12px; background: url("../img/common/ico_tel01.png") no-repeat center; background-size: contain; }

@media screen and (min-width: 600px) { .mod_tel { font-size: 4.6rem; }
  .mod_tel a { padding-left: 38px; }
  .mod_tel a:before { width: 28px; height: 38px; margin-top: -16px; }
  .mod_tel.is_btn a span { padding-left: 32px; }
  .mod_tel.is_btn a span:before { width: 18px; height: 25px; margin-top: -12px; }
  .mod_tel.is_large { font-size: 3.6rem; }
  .mod_tel.is_large a { padding: 32px; } }

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

mod_tit01

.mod_tit01            - Base styles
.mod_tit01.is_small            - is_small
.mod_tit01.is_center            - is_center

Markup:
<header class="mod_tit01 {$modifiers}">
	<p class="mod_tit01_en fontOzwald">WORKS</p>
	<h2 class="mod_tit01_ja">事業内容</h2>
</header>

Styleguide 1.0.0
*/
.mod_tit01 .mod_tit01_en { font-size: 4rem; letter-spacing: .02em; line-height: 1; }

.mod_tit01 .mod_tit01_ja { margin-top: 4px; font-size: 1.2rem; font-weight: 700; }

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

@media screen and (min-width: 600px) { .mod_tit01 .mod_tit01_en { font-size: 8rem; }
  .mod_tit01 .mod_tit01_ja { margin-top: 4px; font-size: 2rem; }
  .mod_tit01.is_small .mod_tit01_en { font-size: 6.5rem; }
  .mod_tit01.is_small .mod_tit01_ja { margin-top: 12px; font-size: 1.8rem; } }

/*
Title

mod_tit02

.mod_tit02            - Base styles

Markup:
<p class="mod_tit02 fontOzwald {$modifiers}">WORKS</p>

Styleguide 1.0.1
*/
.mod_tit02 { position: relative; padding-left: 23px; font-size: 1.1rem; line-height: 1.1; letter-spacing: .03em; }

.mod_tit02:before, .mod_tit02:after { position: absolute; top: 1px; content: ""; display: block; width: 1px; height: 10px; -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); transform: skew(-45deg); }

.mod_tit02:before { left: 4px; background: #f70300; }

.mod_tit02:after { left: 9px; background: #0b6791; }

.mod_tit02.is_medium, .mod_tit02.is_large { padding-left: 38px; font-size: 2rem; font-weight: 700; line-height: 1.5; }

.mod_tit02.is_medium:before, .mod_tit02.is_large:before { left: 10px; }

.mod_tit02.is_medium:after, .mod_tit02.is_large:after { left: 20px; }

.mod_tit02.is_medium:before, .mod_tit02.is_medium:after, .mod_tit02.is_large:before, .mod_tit02.is_large:after { height: 14px; top: 8px; }

@media screen and (min-width: 600px) { .mod_tit02 { padding-left: 36px; font-size: 1.6rem; }
  .mod_tit02:before, .mod_tit02:after { height: 16px; }
  .mod_tit02:before { left: 6px; }
  .mod_tit02:after { left: 14px; }
  .mod_tit02.is_medium { padding-left: 32px; font-size: 2rem; }
  .mod_tit02.is_medium:before { left: 5px; }
  .mod_tit02.is_medium:after { left: 14px; }
  .mod_tit02.is_medium:before, .mod_tit02.is_medium:after { height: 15px; top: 7px; }
  .mod_tit02.is_large { padding-left: 50px; font-size: 3rem; letter-spacing: .06em; }
  .mod_tit02.is_large:before { left: 15px; }
  .mod_tit02.is_large:after { left: 28px; }
  .mod_tit02.is_large:before, .mod_tit02.is_large:after { height: 23px; top: 13px; } }

/*
Title

mod_tit03

.mod_tit03            - Base styles

Markup:
<h3 class="mod_tit03 {$modifiers}">東京営業所</h3>

Styleguide 1.0.2
*/
.mod_tit03 { padding-bottom: 10px; font-size: 2rem; font-weight: 700; border-bottom: 1px solid #4e4e4e; }

@media screen and (min-width: 600px) { .mod_tit03 { padding-bottom: 20px; font-size: 2.2rem; } }

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

mod_txt01

.mod_txt01            - Base styles

Markup:
<p class="mod_txt01">オフィス、工場、学校、ショップ、塾など様々な空間をご提案させていただきます。利用する方のことを第一に考え、安全・快適な空間提案をご提案いたします。</p>

Styleguide 6.0.0
*/
.mod_txt01 { margin-top: 16px; }

@media screen and (min-width: 600px) { .mod_txt01 { margin-top: 40px; } }