@charset "UTF-8";
/*  modules
================================================ */
/*
Archive

mod_archive01

.mod_archive01 - base style

Markup:
<ul class="mod_archive01">
	<?php for ($i=0; $i < 5; $i++) : ?>
		<li class="item">
			<div class="meta">
				<p class="time">2019.00.00</p>
				<p class="cat">カテゴリ</p>
			</div>
			<p class="sub">
			 記事タイトル
			</p>
		</li>
	<?php endfor; ?>
</ul>

Styleguide 1.0.0
*/
.mod_archive01 .item { border-bottom: 1px solid #e6e6e6; }

.mod_archive01 .item:first-of-type { border-top: 1px solid #e6e6e6; }

.mod_archive01 .item a { display: block; text-decoration: none; padding: 14px 14px 6px; box-sizing: border-box; }

.mod_archive01 .item a .meta { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap;}

.mod_archive01 .item a .meta .time { margin-right: 8px; font-size: 1.5rem; }

.mod_archive01 .item a .meta .cat { display: inline-block; padding: 0 8px; border: 1px solid #0097e0; color: #0097e0; font-size: 1.3rem; }

.mod_archive01 .item a .sub { text-decoration: underline; font-size: 1.5rem; }

@media all and (min-width: 600px) { .mod_archive01 .item:first-of-type { border-top: none; }
  .mod_archive01 .item a { /*display: -webkit-box; display: -ms-flexbox; display: flex;*/ padding: 32px 52px 20px; }
  .mod_archive01 .item a:hover .sub { text-decoration: none; }
	.mod_archive01 .item a .meta { margin-bottom: 5px; }
  .mod_archive01 .item a .meta .time { margin-right: 40px; font-size: 1.6rem; }
  .mod_archive01 .item a .meta .cat { margin-right: 40px; padding: 0 14px; } }

/*
Button

mod_btn01

.mod_btn01 - base style


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

Styleguide 2.0.0
*/
.mod_btn01 a { position: relative; display: block; box-sizing: border-box; padding: 18px 20px; background: #fff; border-radius: 4px; color: #0097e0; text-align: center; text-decoration: none; font-size: 1.3rem; font-weight: 500; }

.mod_btn01 a:before { content: ""; position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 7px; height: 10px; background: url("../img/common/ico_arrow01.png") no-repeat center/contain; }

@media all and (min-width: 600px) { .mod_btn01 { width: 360px; }
  .mod_btn01 a { width: 100%; padding: 20px 40px; font-size: 1.6rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn01 a:hover { background: #0097e0; color: #fff; }
  .mod_btn01 a:hover:before { background-image: url("../img/common/ico_arrow03.png"); } }

/*
Button

mod_btn02

.mod_btn02 - base style


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

Styleguide 2.0.1
*/
.mod_btn02 { position: relative; max-width: 325px; }

.mod_btn02:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background-image: linear-gradient(to right, #0097e0 0%, #53b5ce 100%); border-radius: 4px; }

.mod_btn02 a { box-sizing: border-box; position: relative; display: block; padding: 18px 20px; text-align: center; text-decoration: none; font-size: 1.3rem; font-weight: 500; color: #fff; z-index: 1; }

.mod_btn02 a:before { content: ""; position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 7px; height: 10px; background: url("../img/common/ico_arrow03.png") no-repeat center/contain; }

.mod_btn02.is_blank a:before { top: auto; bottom: 10px; right: 10px; width: 10px; height: 10px; background: url("../img/common/ico_blank03.png") no-repeat center/contain; }

.mod_btn02.is_thin { margin: auto; }

.mod_btn02.is_thin a { padding: 12px 20px; }

@media all and (min-width: 600px) { .mod_btn02 { width: 360px; max-width: none; }
  .mod_btn02:after { width: 100%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn02 a { width: 100%; padding: 20px 40px; font-size: 1.6rem; }
  .mod_btn02:hover:after { background: -webkit-gradient(linear, right top, left top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to left, #0097e0 0%, #53b5ce 100%); }
  .mod_btn02.is_thin a { padding: 16px 40px; } }

/*
Button

mod_btn05

.mod_btn05 - base style


Markup:
<ul class="mod_btn03_list">
	<li class="mod_btn03">製品について</li>
	<li class="mod_btn03">設計について</li>
	<li class="mod_btn03">施工について</li>
	<li class="mod_btn03">MIRAIEの<br>取り扱いについて</li>
</ul>

Styleguide 2.0.2
*/
.mod_btn03 { 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: 0 -5px 40px; }

.mod_btn03_item { position: relative; 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; width: calc(50% - 10px); height: 60px; margin: 0 5px; padding: 0 25px; border-radius: 4px; text-align: center; border: 2px solid #0097e0; cursor: pointer; }

.mod_btn03_item:before { content: ""; position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); width: 7px; height: 10px; background: url("../img/common/ico_arrow01.png") no-repeat center/contain; }

.mod_btn03_item:nth-child(n + 3) { margin-top: 5px; }

.mod_btn03_item span { line-height: 1.2; color: #0097e0; font-size: 1.3rem; font-weight: 700; }

.mod_btn03_item.is_active { border: none; background: -webkit-gradient(linear, left top, right top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to right, #0097e0 0%, #53b5ce 100%); }

.mod_btn03_item.is_active:before { background: url("../img/common/ico_arrow03.png") no-repeat center/contain; }

.mod_btn03_item.is_active span { color: #fff; }

@media all and (min-width: 600px) { .mod_btn03 { margin: 0 -3px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
  .mod_btn03_item { width: auto; margin: 0 3px; padding: 18px 70px; border-radius: 4px 4px 0 0; word-break: keep-all; }
  .mod_btn03_item:hover { opacity: 0.7; }
  .mod_btn03_item:before { right: 24px; width: 8px; height: 12px; }
  .mod_btn03_item:nth-child(n + 3) { margin-top: 0; }
  .mod_btn03_item span { font-size: 1.6rem; } }

/*
Button

mod_contact_btn01

.mod_contact_btn01 - base style


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

Styleguide 2.0.3
*/
.mod_contact_btn01 a { position: relative; display: block; box-sizing: border-box; padding: 18px 20px; background: #fff; border: 2px solid #0097e0; border-radius: 4px; color: #0097e0; text-align: center; text-decoration: none; font-size: 1.3rem; font-weight: 500; }

.mod_contact_btn01 a:before { content: ""; position: absolute; top: 50%; left: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 7px; height: 10px; background: url("../img/common/ico_arrow07.png") no-repeat center/contain; }

@media all and (min-width: 600px) { .mod_contact_btn01 { width: 360px; }
  .mod_contact_btn01 a { width: 100%; padding: 18px 40px; font-size: 1.6rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_contact_btn01 a:hover { opacity: 0.7; } }

/*
Button

mod_contact_btn02

.mod_contact_btn02 - base style


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

Styleguide 2.0.4
*/
.mod_contact_btn02 { position: relative; }

.mod_contact_btn02:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, right top, from(#dc7200), to(#f59a39)); background-image: linear-gradient(to right, #dc7200 0%, #f59a39 100%); border-radius: 4px; }

.mod_contact_btn02 a, .mod_contact_btn02 span { position: relative; display: block; box-sizing: border-box; padding: 18px 20px; text-align: center; text-decoration: none; font-size: 1.3rem; font-weight: 500; color: #fff; z-index: 1; }

.mod_contact_btn02 a:before, .mod_contact_btn02 span:before { content: ""; position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 7px; height: 10px; background: url("../img/common/ico_arrow03.png") no-repeat center/contain; }

.mod_contact_btn02.is_back:after { background: -webkit-gradient(linear, right top, left top, from(#0097e0), to(#53b5ce)); background: linear-gradient(to left, #0097e0 0%, #53b5ce 100%); }

.mod_contact_btn02.is_back a:before, .mod_contact_btn02.is_back span:before { right: auto; left: 15px; -webkit-transform: translateY(-50%) rotate(-180deg); -ms-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); }

@media all and (min-width: 600px) { .mod_contact_btn02 { width: 360px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_contact_btn02:hover { opacity: 0.7; }
  .mod_contact_btn02 a, .mod_contact_btn02 span { width: 100%; padding: 20px 40px; font-size: 1.6rem; } }

/*
Button

mod_btn04

.mod_btn04 - base style


Markup:
<p class="mod_btn04">
 <a href="#" class="alpha">画像のダウンロードはこちら</a>
</p>

Styleguide 2.0.5
*/
.mod_btn04 a { position: relative; display: block; box-sizing: border-box; margin: 0 8px; padding: 14px 20px; background: #fff; border: 2px solid #0097e0; border-radius: 4px; color: #0097e0; text-align: center; text-decoration: none; font-size: 1.3rem; font-weight: 500; }

.mod_btn04 a:before { content: ""; position: absolute; top: 50%; right: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 7px; height: 10px; background: url("../img/common/ico_arrow01.png") no-repeat center/contain; }

@media all and (min-width: 600px) { .mod_btn04 { margin: 0 auto; width: 360px; }
  .mod_btn04 a { width: 100%; padding: 18px 40px; font-size: 1.6rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_btn04 a:hover { opacity: 0.7; } }

/*
Form

mod_form01

.mod_form01 - base style

Markup:
<div></div>

Styleguide 3.0.0
*/
.mod_form01 table { table-layout: fixed; }

.mod_form01 th, .mod_form01 td { display: block; }

.mod_form01 th { position: relative; padding: 10px 0 5px; font-size: 1.6rem; font-weight: 700; }

.mod_form01 th .tag { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; padding: 5px 10px; color: #fff; font-size: 1rem; line-height: 1.2; }

.mod_form01 th .tag.required { background: #0097e0; }

.mod_form01 th .tag.optional { background: #848484; }

.mod_form01 td { padding: 5px 0 10px; }

.mod_form01 .note { margin: 10px 0; }

.mod_form01 input, .mod_form01 select, .mod_form01 textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; outline: 0; border-radius: 0; border: 1px solid #e1e1e1; background: #fff; }

.mod_form01 input[type="text"], .mod_form01 input[type="email"], .mod_form01 input[type="tel"], .mod_form01 textarea { box-sizing: border-box; width: 100%; padding: 5px 10px; }

.mod_form01 input[type="tel"] { width: 50%; }

.mod_form01 textarea { min-height: 114px; resize: vertical; }

.mod_form01 input::-webkit-input-placeholder { color: #848484; }

.mod_form01 input:-ms-input-placeholder { color: #848484; }

.mod_form01 input::placeholder { color: #848484; }

.mod_form01 input:-ms-input-placeholder { color: #848484; }

.mod_form01 input::-ms-input-placeholder { color: #848484; }

.mod_form01 select::-ms-expand { display: none; }

.mod_form01 button, .mod_form01 label { cursor: pointer; }

.mod_form01 select { box-sizing: border-box; padding: 5px 30px 5px 10px; background: #fff url("../img/common/ico_select01.png") no-repeat right 10px center/8px 5px; }

.mod_form01 input[type="checkbox"] { display: none; }

.mod_form01 input[type="checkbox"] + span { position: relative; display: inline-block; padding-left: 35px; width: 100%; box-sizing: border-box; margin-top: 10px; }

.mod_form01 input[type="checkbox"] + span:before { content: ""; position: absolute; top: 50%; box-sizing: border-box; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 25px; height: 25px; border: 2px solid #bebebe; }

.mod_form01 input[type="checkbox"]:checked + span:after { content: ""; position: absolute; top: 50%; left: 6px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 16px; height: 13px; background: url("../img/common/ico_check01.png") no-repeat center/contain; }

.mod_form01 input[type="radio"] { display: none; }

.mod_form01 input[type="radio"] + span { position: relative; display: inline-block; padding-left: 35px; width: 100%; margin-top: 10px; }

.mod_form01 input[type="radio"] + span:before { content: ""; position: absolute; top: 50%; box-sizing: border-box; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 25px; height: 25px; border: 2px solid #bebebe; border-radius: 50%; }

.mod_form01 input[type="radio"]:checked + span:after { content: ""; position: absolute; top: 50%; left: 8px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 10px; height: 10px; background: #0097e0; border-radius: 50%; }

.mod_form01 .address .zip .txt { display: inline-block; padding-right: 10px; }

.mod_form01 .address .zip input[type="text"] { display: inline-block; width: 50%; }

.mod_form01 .address .pref { margin-top: 10px; }

.mod_form01 .address .pref .txt { display: inline-block; padding-right: 10px; }

/* .mod_form01 .address .add input[type="text"] { margin-top: 10px; } */

@media all and (min-width: 600px) { .mod_form01 th, .mod_form01 td { display: table-cell; box-sizing: border-box; }
  .mod_form01 th { width: 245px; padding: 15px 20px; font-size: 1.6rem; font-weight: 700; }
  .mod_form01 th .tag { top: 27px; right: 10px; font-size: 1.2rem; }
  .mod_form01 td { padding: 13px 0 13px 30px; }
  .mod_form01 input[type="text"], .mod_form01 input[type="email"], .mod_form01 input[type="tel"], .mod_form01 textarea { box-sizing: border-box; width: 100%; padding: 10px 20px; }
  .mod_form01 input[type="tel"] { width: 300px; }
  .mod_form01 textarea { min-height: 146px; }
  .mod_form01 select { box-sizing: border-box; padding: 10px 45px 10px 20px; background: #fff url("../img/common/ico_select01.png") no-repeat right 20px center/10px 6px; }
  .mod_form01 input[type="radio"] + span { width: 44.7%; }
  .mod_form01 input[type="checkbox"] + span { width: 49%; }
  .mod_form01 input[type="checkbox"] + span:before { width: 25px; height: 25px; box-sizing: border-box; }
  .mod_form01 input[type="checkbox"]:checked + span:after { left: 6px; width: 17px; height: 14px; }
  .mod_form01 .address .zip,.add,.county,.city { margin-bottom: 26px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .mod_form01 .address .city { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .mod_form01 .address .room { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .mod_form01 .address .zip .txt { padding: 0 15px 0 0; word-break: keep-all; }
  .mod_form01 .address .add .txt { padding: 0 15px 0 0; word-break: keep-all; }
  .mod_form01 .address .county .txt { padding: 0 15px 0 0; word-break: keep-all; }
  .mod_form01 .address .city .txt { padding: 0 15px 0 0; width: 110px; }
  .mod_form01 .address .room .txt { padding: 0 15px 0 0; width: 110px; }
  .mod_form01 .address .zip input[type="text"] { width: 350px; }
  .mod_form01 .address .zip,.add,.county input[type="text"] { width: 820px; }
  .mod_form01 .address .city input[type="text"] { width: 880px; }
  .mod_form01 .address .room input[type="text"] { width: 880px; }
  .mod_form01 .address .pref { margin-top: 12px; }
  .mod_form01 .address .pref .txt { padding: 10px 15px 10px 0; }
  /* .mod_form01 .address .add input[type="text"] { margin-top: 12px; } */
}

.mw_wp_form .horizontal-item + .horizontal-item { margin-left: 0 !important; }

/*
Inner

mod_inner01

.mod_inner01 - base style

Markup:
<section id="hoge">
	<div class="inner mod_inner01 {$modifiers}">
		<h2 class="tit">タイトル</h3>
		<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</section>

Styleguide 4.0.0
*/
.mod_inner01 { padding-left: 15px; padding-right: 15px; }

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

/*
List

mod_list01

.mod_list01 - Base styles

Markup:
<h2 class="mod_list01 {$modifiers}">なぜ余震対策が必要なのか</h2>

Styleguide 9.0.0
*/
.mod_list01 .item { position: relative; padding: 10px 15px; border-bottom: 1px solid #e1e1e1; }

.mod_list01 .item:before { content: ''; position: absolute; top: 20px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #0097e0; }

@media all and (min-width: 600px) { .mod_list01 .item { padding: 13px 20px; }
  .mod_list01 .item:before { top: 24px; } }

/*
List

mod_list02

.mod_list02 - Base styles

Markup:
<h2 class="mod_list02 {$modifiers}">なぜ余震対策が必要なのか</h2>

Styleguide 9.0.1
*/
.mod_list02 { counter-reset: num; }

.mod_list02 .item { counter-increment: num; position: relative; padding: 10px 0; border-bottom: 1px solid #e1e1e1; }

.mod_list02 .item:before { content: counter(num) "."; display: inline-block; padding-right: 10px; font-weight: 700; color: #0097e0; }

@media all and (min-width: 600px) { .mod_list02 .item { padding: 13px 0; } }

/*
Mainimg

mod_mainimg01

.mod_mainimg01 - Base styles

Markup:
<section id="intro" class="mod_mainimg01">
	<div class="inner mod_inner01">
		<div class="box">
			<div class="img">
				<img src="/img/cost/img_intro01.png" alt="">
			</div>
			<div class="txtArea">
				<header class="head">
					<p class="sub">MIRAIEが選ばれている理由</p>
					<h1 class="tit">低価格で導入できる</h1>
				</header>
				<p class="txt">MIRAIEは、多くの人に利用してもらうために、費用をできるだけ抑える努力を続けてまいりました。</p>
			</div>
		</div>
	</div>
</section>

Styleguide 13.0.0
*/
.mod_mainimg01 { background-image: url("../img/common/bg_blue01.png"); background-size: cover; }

.mod_mainimg01.is_no_subtitle .inner { padding-bottom: 35px; }

.mod_mainimg01.is_no_subtitle .box { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.mod_mainimg01.is_no_subtitle .head .tit { margin-top: 19px; }

.mod_mainimg01 .inner { padding-top: 35px; padding-bottom: 32px; }

.mod_mainimg01 .head .sub { display: inline-block; color: #0097e0; font-size: 1.2rem; font-weight: bold; background-color: #fff; margin-top: 25px; padding: 2px 14px; }

.mod_mainimg01 .head .lead { margin-top: 8px; color: #fff; font-size: 1.5rem; font-weight: 700; }

.mod_mainimg01 .head .lead + .tit { margin-top: 2px; }

.mod_mainimg01 .head .tit { margin-top: 8px; color: #fff; font-size: 2.5rem; font-weight: bold; letter-spacing: 0.2em; }

.mod_mainimg01 .txt { margin-top: 10px; font-size: 1rem; color: #fff; }

.mod_mainimg01 .btn { max-width: 325px; margin: 0 auto; margin-top: 16px; padding-bottom: 7px; }

.mod_mainimg01 .btn a { display: block; background-color: #fff; border-radius: 5px; text-decoration: none; color: #0097e0; font-weight: 500; font-size: 1.3rem; text-align: center; padding: 11px 0 12px; }

.mod_mainimg01 .btn a[target="_blank"] { background-image: url("../img/common/ico_blank02.png"); background-repeat: no-repeat; background-size: 10px; background-position: right 15px center; }

@media all and (min-width: 600px) { .mod_mainimg01 { background-image: url("../img/common/bg_blue01-pc.png"); background-size: contain; }
  .mod_mainimg01.is_no_subtitle .inner { padding-bottom: 70px; }
  .mod_mainimg01.is_no_subtitle .box { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
  .mod_mainimg01.is_no_subtitle .head .tit { margin-top: 0; }
  .mod_mainimg01 .box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
  .mod_mainimg01 .img { width: 660px; }
  .mod_mainimg01 .inner { padding-top: 70px; padding-bottom: 70px; }
  .mod_mainimg01 .txtArea { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 50px; }
  .mod_mainimg01 .head .sub { font-size: 2rem; margin-top: 0px; padding: 6px 18px 8px; }
  .mod_mainimg01 .head .lead { margin-top: 10px; font-size: 2.1rem; }
  .mod_mainimg01 .head .lead + .tit { margin-top: 5px; }
  .mod_mainimg01 .head .tit { margin-top: 19px; font-size: 3.6rem; letter-spacing: 0.15em; }
  .mod_mainimg01 .txt { margin-top: 24px; font-size: 1.6rem; }
  .mod_mainimg01 .btn { max-width: 360px; margin: 0; margin-top: 44px; padding-bottom: 7px; }
  .mod_mainimg01 .btn a { font-size: 1.5rem; padding: 22px 0 21px; }
  .mod_mainimg01 .btn a[target="_blank"] { background-size: 10px; background-position: right 25px center; } }

/*
Mainimg

mod_mainimg02

.mod_mainimg02 - Base styles

Markup:
<div id="mainImg" class="mod_mainimg02">
 <div class="inner mod_inner01">
	 <header class="tit">
		 <p class="en">miraie news</p>
		 <h1 class="ja">お知らせ一覧</h1>
	 </header>
 </div>
</div>

Styleguide 13.0.1
*/
.mod_mainimg02 { background: url("../img/common/bg_blue01.png") center/350px; }

.mod_mainimg02 .inner { padding-top: 54px; padding-bottom: 54px; }

.mod_mainimg02 .tit .ja { color: #fff; font-weight: bold; font-size: 2.5rem; letter-spacing: 0.2em; }

@media all and (min-width: 600px) { .mod_mainimg02 { margin: 0 0 0px; background-size: 500px; }
  .mod_mainimg02 .inner { padding: 76px 0 76px; }
  .mod_mainimg02 .tit { display: -webkit-box; display: -ms-flexbox; display: flex; }
  .mod_mainimg02 .tit .ja { line-height: 1; margin: 0 0 0 28px; font-size: 3.6rem; letter-spacing: 0.16em; } }

.mod_note01 { font-size: 1.1rem; padding-left: 1em; text-indent: -1em; color: #848484; }

.mod_note01.is_mainimg { margin-top: 5px; color: #a3bfd8; }

.mod_note01.is_txt { color: #333; padding: 0 3px 0 0; line-height: 2.5; }

.mod_note01.is_mainTxt { color: #fff; padding: 0 3px 0 0; font-size: 0.8rem; line-height: 2.0; }

.mod_note01.is_tit { color: #333; position: relative; top: 3px; }

@media all and (min-width: 600px) { .mod_note01 { font-size: 1.3rem; }
	.mod_note01.is_mainimg { margin-top: 10px; }
	.mod_note01.is_txt { line-height: 3.2; font-size: 1.0rem; }
	.mod_note01.is_mainTxt { font-size: 1.0rem; line-height: 3.2; }
	.mod_note01.is_tit {top: 5px;}
}

/*
Others

mod_bg01

.mod_bg01 - Base styles

Markup:
<p class="note mod_bg01">※1：2017年1月京都大学防災研究所での実大振動台実験。加振2回目（前震+本震級）の結果による。</p>


Styleguide 11.0.1
*/
.mod_bg01 { background: #f3f6f8; }

/*
Others

mod_cv01

.mod_cv01 - Base styles

Markup:


Styleguide 11.0.2
*/
.mod_cv01 { background: url("../img/common/cv/bg01_sp.png") no-repeat center bottom/cover; }

.mod_cv01 .inner { position: relative; padding-top: 50px; padding-bottom: 50px; }

.mod_cv01 .imgWrap { position: absolute; top: 50px; right: 15px; width: 140px; height: auto; }

.mod_cv01 .txtWrap .tit { padding-right: 140px; font-size: 2rem; font-weight: 700; color: #fff; }

.mod_cv01 .txtWrap .txt { margin-top: 20px; color: #fff; }

.mod_cv01 .txtWrap .btn { margin-top: 12px; }

@media all and (min-width: 600px) { .mod_cv01 { background-image: url("../img/common/cv/bg01_pc.png"); }
  .mod_cv01 .inner { padding-top: 80px; padding-bottom: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
  .mod_cv01 .imgWrap { position: relative; top: 0; right: 0; width: 339px; padding-right: 115px; }
  .mod_cv01 .txtWrap { width: 550px; }
  .mod_cv01 .txtWrap .tit { padding-right: 0; font-size: 3rem; }
  .mod_cv01 .txtWrap .txt { margin-top: 15px; }
  .mod_cv01 .txtWrap .btn { margin-top: 35px; } }

/*
Others

mod_cv02

.mod_cv02 - Base styles

Markup:


Styleguide 11.0.3
*/
.mod_cv02 { border-top: 4px solid #0097e0; background-color: #96c7de; background-image: url("../img/cost/bg_cv01-sp.png"); background-size: 600px 170px; background-repeat: no-repeat; background-position: 50% 0; }

.mod_cv02 .inner { padding-bottom: 40px; }

.mod_cv02 .head .sub { margin-top: 26px; padding-bottom: 8px; color: #0097e0; font-weight: bold; letter-spacing: 0.1em; font-size: 1.5rem; position: relative; display: inline-block; margin-bottom: 11px; }

.mod_cv02 .head .sub:after { content: ""; z-index: 1; display: block; position: absolute; bottom: 0; left: 52px; height: 2px; width: 13px; background-color: #0097e0; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.mod_cv02 .head .sub span:before, .mod_cv02 .head .sub span:after { content: ""; z-index: 1; display: block; position: absolute; bottom: 0; height: 2px; background-color: #0097e0; }

.mod_cv02 .head .sub span:before { width: 52px; left: 0; }

.mod_cv02 .head .sub span:after { width: 117px; right: 0; }

.mod_cv02 .head .tit { font-weight: bold; font-size: 2.3rem; line-height: 1.43478; }

.mod_cv02 .head .tit span { letter-spacing: 0.1em; font-weight: bold; font-size: 2.7rem; line-height: 1.15; }

.mod_cv02 .lead { margin-top: 58px; text-align: center; color: #fff; }

.mod_cv02 .box { margin-top: 20px; }

.mod_cv02 .box .telBox { border: 2.5px solid #e1e1e1; background-color: #fff; max-width: 345px; text-align: center; box-sizing: border-box; margin: 0 auto; padding: 14px 0 9px; }

.mod_cv02 .box .telBox .tit { display: inline-block; background-color: #0097e0; color: #fff; line-height: 1; padding: 4px 54px 5px; margin-bottom: 8px; }

.mod_cv02 .box .telBox .num { padding-bottom: 3px; display: inline-block; border-bottom: 2px solid #e1e1e1; }

.mod_cv02 .box .telBox .num a { background-image: url("../img/common/ico_tel02.png"); background-repeat: no-repeat; background-size: 25px; background-position: left center; display: inline-block; text-decoration: none; font-weight: bold; font-size: 3.5rem; padding-left: 29px; letter-spacing: 0.02em; line-height: 1; }

.mod_cv02 .box .telBox .note { font-size: 1.2rem; letter-spacing: 0.05em; color: #848484; }

.mod_cv02 .box .bnrs { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 345px; margin: 0 auto; margin-top: 15px; }

.mod_cv02 .box .bnrs .bnr { width: calc(50% - 4.5px); max-width: 168px; }

.mod_cv02 .box .bnrs .bnr + .bnr { margin-left: 9px; }

@media all and (min-width: 600px) { .mod_cv02 { border: none; background-color: #fff; background-size: cover; background-image: url("../img/cost/bg_cv01-pc.png"); }
  .mod_cv02 .inner { padding-bottom: 81px; }
  .mod_cv02 .head .sub { margin-top: 68px; padding-bottom: 5px; font-size: 2.8rem; margin-bottom: 17px; }
  .mod_cv02 .head .sub:after { left: 77px; width: 13px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
  .mod_cv02 .head .sub span:before { width: 77px; left: 0; }
  .mod_cv02 .head .sub span:after { width: 247px; right: 0; }
  .mod_cv02 .head .tit { letter-spacing: 0.1em; font-size: 3.2rem; line-height: 1.43478; font-weight: 900; }
  .mod_cv02 .head .tit span { margin-right: 5px; letter-spacing: 0.1em; font-weight: 900; font-size: 3.8rem; line-height: 1.15; }
  .mod_cv02 .lead { margin-top: 24px; text-align: left; color: #333; }
  .mod_cv02 .box { margin-top: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; }
  .mod_cv02 .box .telBox { border: 5px solid #dfe9f1; max-width: 370px; margin: 0; padding: 23px 0 13px; }
  .mod_cv02 .box .telBox .tit { padding: 5px 59px 6px; margin-bottom: 9px; }
  .mod_cv02 .box .telBox .num { padding-bottom: 6px; border-bottom: 1px solid #e1e1e1; }
  .mod_cv02 .box .telBox .num a { background-size: 29px; pointer-events: none; background-position: left 3px center; font-size: 4rem; padding-left: 34px; }
  .mod_cv02 .box .telBox .note { margin-top: 6px; font-size: 1.4rem; }
  .mod_cv02 .box .bnrs { max-width: none; margin: 0; margin-top: 0; margin-left: 25px; }
  .mod_cv02 .box .bnrs .bnr { width: 370px; max-width: none; }
  .mod_cv02 .box .bnrs .bnr a { display: block; position: relative; }
  .mod_cv02 .box .bnrs .bnr a:hover img { opacity: 0.7; }
  .mod_cv02 .box .bnrs .bnr a:before { content: ""; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background-color: #fff; }
  .mod_cv02 .box .bnrs .bnr a img { position: relative; z-index: 1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
  .mod_cv02 .box .bnrs .bnr + .bnr { margin-left: 25px; } }

  /*
  Others

  mod_cv03

  .mod_cv03 - Base styles

  Markup:


  Styleguide 11.0.4
  */
.mod_cv03 .list { background: #f3f6f8; box-sizing: border-box; padding: 25px 25px 10px; margin-bottom: 40px; }

.mod_cv03 .list .item:first-child { background: url("../img/common/cv/cv03_bg01_sp.png")no-repeat center center/cover; }

.mod_cv03 .list .item:nth-child(2) { background: url("../img/common/cv/cv03_bg02_sp.png")no-repeat center center/cover; }

.mod_cv03 .list .item:nth-child(3) { background: url("../img/common/cv/cv03_bg03_sp.png")no-repeat center center/cover; }

.mod_cv03 .list .item:nth-child(4) { background: url("../img/common/cv/cv03_bg04_sp.png")no-repeat center center/cover; }

.mod_cv03 .list .item:nth-child(5) { background: url("../img/common/cv/cv03_bg05_sp.png")no-repeat center center/cover; }

.mod_cv03 .list .item:last-child { background: url("../img/common/cv/cv03_bg06_sp.png")no-repeat center center/cover; }

.mod_cv03 .list .item .link { position: relative; text-decoration: none; color: #fff; text-align: center; font-size: 1.3rem; padding: 25px 0; display: block; margin-bottom: 15px; }

.mod_cv03 .list .item .link::after { content: ''; display: block; position: absolute; background: url("../img/common/ico_arrow03.png")no-repeat center center/cover; width: 7px; height: 10px; top: 32px; right: 15px; }

  @media all and (min-width: 600px) {
	  .mod_cv03 .list { padding: 40px 40px 30px; margin-bottom: 60px; display: flex; justify-content: space-between; flex-wrap: wrap; }
	  .mod_cv03 .list .item { width: 350px; height: 100px; margin-bottom: 10px; display: table; }
	  .mod_cv03 .list .item:first-child { background: url("../img/common/cv/cv03_bg01_pc.png")no-repeat center center/cover; }
	  .mod_cv03 .list .item:nth-child(2) { background: url("../img/common/cv/cv03_bg02_pc.png")no-repeat center center/cover; }
	  .mod_cv03 .list .item:nth-child(3) { background: url("../img/common/cv/cv03_bg03_pc.png")no-repeat center center/cover; }
	  .mod_cv03 .list .item:nth-child(4) { background: url("../img/common/cv/cv03_bg04_pc.png")no-repeat center center/cover; }
	  .mod_cv03 .list .item:nth-child(5) { background: url("../img/common/cv/cv03_bg05_pc.png")no-repeat center center/cover; }
	  .mod_cv03 .list .item:last-child { background: url("../img/common/cv/cv03_bg06_pc.png")no-repeat center center/cover; }
	  .mod_cv03 .list .item .link { font-size: 1.7rem; padding: 0; margin-bottom: 0; line-height: 1.3; vertical-align: middle; display: table-cell; margin: 0 auto; }
	  .mod_cv03 .list .item .link::after { top: 45px; right: 25px; }
	  .mod_cv03 .list .item a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
	  .mod_cv03 .list .item a:hover { opacity: 0.5; height: 100px; width: 350px; background: #333; }
  }

/*
Pagination

mod_pagination01

.mod_pagination01 - base style

Markup:
<ul class="pagination mod_pagination01">
	<li class="previous"><a href="#">&lt;</a></li>
	<li class="current num"><span>1</span></li>
	<li class="num"><a href="#">2</a></li>
	<li class="num"><a href="#">3</a></li>
	<li class="next"><a href="#">&gt;</a></li>
</ul>

Styleguide 5.0.0
*/
.mod_pagination01 { margin-top: 30px; text-align: center; letter-spacing: -.5em; }

.mod_pagination01 li { display: inline-block; margin: 0 0 10px; letter-spacing: 0; }

.mod_pagination01 li a, .mod_pagination01 li span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 35px; height: 35px; box-sizing: border-box; border: 1px solid #0097e0; text-decoration: none; color: #0097e0; font-weight: 700; }

.mod_pagination01 li.num + .num a { border-left: 0; }

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

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

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

@media all and (min-width: 600px) { .mod_pagination01 { margin-top: 100px; }
  .mod_pagination01 li a, .mod_pagination01 li span { width: 40px; height: 40px; font-size: 1.6rem; }
  .mod_pagination01 li a:hover, .mod_pagination01 li span:hover { background-color: #0097e0; color: #fff; }
  .mod_pagination01 li.previous { margin-right: 10px; }
  .mod_pagination01 li.next { margin-left: 10px; } }

/*
Pagination

mod_pagination02

.mod_pagination02 - base style

Markup:
<ul class="pagination mod_pagination02">
	<li class="previous"><a href="#"><span>前の記事へ</span></a></li>
	<li class="back"><a href="#"><span>ニュース一覧</span></a></li>
	<li class="next"><a href="#"><span>次の記事へ</span></a></li>
</ul>

Styleguide 5.0.1
*/
.mod_pagination02 { position: relative; width: 295px; margin: auto; padding-bottom: 40px; }

.mod_pagination02 .back a { display: block; padding: 15px 20px; text-align: center; background: #0097e0; color: #fff; text-decoration: none; font-weight: 700; }

.mod_pagination02 .previous a, .mod_pagination02 .next a { position: relative; display: block; text-decoration: none; font-weight: 500; color: #0097e0; }

.mod_pagination02 .previous a:before, .mod_pagination02 .next a:before { content: ''; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 25px; height: 12px; }

.mod_pagination02 .previous { position: absolute; bottom: 0; left: 0; }

.mod_pagination02 .previous a { padding-left: 35px; }

.mod_pagination02 .previous a:before { left: 0; background: url("../img/common/ico_arrow04.png") no-repeat center/contain; }

.mod_pagination02 .next { position: absolute; bottom: 0; right: 0; }

.mod_pagination02 .next a { padding-right: 35px; }

.mod_pagination02 .next a:before { right: 0; background: url("../img/common/ico_arrow05.png") no-repeat center/contain; }

@media all and (min-width: 600px) { .mod_pagination02 { width: 610px; padding-bottom: 0; }
  .mod_pagination02 .back { width: 165px; margin: 0 auto; }
  .mod_pagination02 .back a { padding: 15px 30px; }
  .mod_pagination02 .previous a, .mod_pagination02 .next a { font-size: 1.6rem; }
  .mod_pagination02 .previous { bottom: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); }
  .mod_pagination02 .previous a { padding-left: 40px; }
  .mod_pagination02 .next { bottom: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); }
  .mod_pagination02 .next a { padding-right: 40px; } }

/*
Set

mod_set01

.mod_set01 - Base styles

Markup:


Styleguide 10.0.0
*/
.mod_set01 .txtWrap { margin-top: 20px; }

.mod_set01 .setTxt { padding-left: 20px; border-left: 1px solid #333333; }

.mod_set01 .setTit { font-size: 1.6rem; font-weight: 700; }

.mod_set01 .txt { margin-top: 15px; }

.mod_set01 .txt small { font-size: 1.3rem; }

.mod_set01 .btn { margin: 20px 10px 0; }

@media all and (min-width: 600px) { .mod_set01 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
  .mod_set01.is_left { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }
  .mod_set01 .img { width: 550px; -ms-flex-negative: 0; flex-shrink: 0; }
  .mod_set01 .txtWrap { margin-top: 0; width: 550px; }
  .mod_set01 .setTxt { padding-left: 40px; }
  .mod_set01 .setTit { font-size: 2.2rem; }
  .mod_set01 .txt { margin-top: 30px; }
  .mod_set01 .txt small { font-size: 1.4rem; }
  .mod_set01 .btn { margin: 35px 0 0; } }

/*
Set

mod_set02

.mod_set02 - Base styles
.mod_set02.is_border - 写真・タイトル下に下線

Markup:


Styleguide 10.0.1
*/
.mod_set02 + .mod_set02 { margin-top: 20px; }

.mod_set02 .imgWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.mod_set02 .img { -ms-flex-negative: 0; flex-shrink: 0; width: 35%; }

.mod_set02 .setTit { padding-left: 15px; font-size: 1.6rem; font-weight: 700; color: #0097e0; }

.mod_set02.is_border .imgWrap { margin-bottom: 10px; padding-bottom: 20px; border-bottom: 1px solid #e1e1e1; }

@media all and (min-width: 600px) { .mod_set02 { width: calc(33.333% - 40px); margin: 0 20px; }
  .mod_set02_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -20px; }
  .mod_set02 + .mod_set02 { margin-top: 0; }
  .mod_set02 .imgWrap { display: block; margin-bottom: 25px; }
  .mod_set02 .img { width: 100%; margin-bottom: 25px; }
  .mod_set02 .setTit { text-align: center; padding-left: 0; font-size: 2rem; }
  .mod_set02.is_border .imgWrap { margin-bottom: 15px; padding-bottom: 15px; } }

/*
Set

mod_set03

.mod_set03 - Base styles

Markup:


Styleguide 10.0.2
*/
.mod_set03 + .mod_set03 { margin-top: 25px; }

.mod_set03 .txtWrap { margin-top: 10px; }

.mod_set03 .voice { font-size: 1.6rem; font-weight: 700; }

.mod_set03 .person { margin-top: 5px; font-size: 1.5rem; font-weight: 700; color: #0097e0; }

.mod_set03 .txt { margin-top: 10px; }

@media all and (min-width: 600px) { .mod_set03 { width: calc(50% - 60px); margin: 0px 30px; }
  .mod_set03_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -30px; }
  .mod_set03 + .mod_set03 { margin-top: 0; }
  .mod_set03 .txtWrap { margin: 20px 0; }
  .mod_set03 .voice { font-size: 2.2rem; }
  .mod_set03 .person { margin-top: 10px; font-size: 1.8rem; }
  .mod_set03 .txt { margin-top: 20px; }
  .mod_set03.is_interview { width: calc(33% - 60px); }
 }

/*
Set

mod_set04

.mod_set04 - Base styles

Markup:


Styleguide 10.0.3
*/
.mod_set04 .txtWrap { margin-top: 25px; padding-left: 20px; border-left: 1px solid #333333; }

.mod_set04 .setTit { font-size: 1.6rem; font-weight: 700; line-height: 1.5; }

.mod_set04 .setSubTit { font-size: 1.5rem; font-weight: 700; color: #0097e0; }

.mod_set04 .txt { margin-top: 10px; }

.mod_set04 .note { position: relative; margin-top: 10px; padding-left: 20px; box-sizing: border-box; color: #f59a39; }

.mod_set04 .note span { position: absolute; top: 0; left: 0; }

@media all and (min-width: 600px) { .mod_set04 { overflow: hidden; }
  .mod_set04 .img { float: right; width: 550px; }
  .mod_set04 .txtWrap { box-sizing: border-box; float: left; width: 550px; margin-top: 0; padding-left: 40px; }
  .mod_set04 .setTit { font-size: 2.2rem; }
  .mod_set04 .setSubTit { margin-top: 5px; font-size: 1.8rem; }
  .mod_set04 .txt { margin-top: 20px; }
  .mod_set04.is_left .img { float: left; }
  .mod_set04.is_left .txtWrap { float: right; } }

/*
Set

mod_set05

.mod_set05 - Base styles

Markup:


Styleguide 10.0.4
*/
.mod_set05 { overflow: hidden; padding: 25px; background: #fff; border: 5px solid #dfe9f1; }

.mod_set05 + .mod_set05 { border-top: 0; }

.mod_set05 .img { float: left; width: 45%; padding-right: 13px; }

.mod_set05 .setTit { padding-top: 10px; color: #0097e0; font-size: 1.6rem; font-weight: 700; }

.mod_set05 .txt { clear: both; padding-top: 15px; }

@media all and (min-width: 600px) { .mod_set05 { padding: 50px; }
  .mod_set05 .img { width: 355px; padding-right: 40px; }
  .mod_set05 .setTit { padding-top: 20px; font-size: 2.2rem; }
  .mod_set05 .txt { clear: none; padding-top: 20px; } }

/*
Single

mod_single01

.mod_single01 - base style

Markup:
<article class="mod_single">
	<header class="head">
	 <div class="meta">
		 <time class="time">2019.00.00</time>
		 <p class="cat">カテゴリ</p>
	 </div>
	 <h1>ダミータイトル〇〇〇〇〇〇〇〇〇〇</h1>
	 <p class="lead">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
	</header>
	<div class="entry">
	 <h2>中見出し</h2>
	 <p>
		 ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
	 </p>
	</div>
	<div class="case">
		<p class="sub">制振ダンパー採用事例</p>
		<ul class="list">
		 <li class="item">
			 <div class="img"><img src="https://placehold.jp/690x426.png" alt=""></div>
			 <p class="name">写真説明が入ります</p>
		 </li>
		 <li class="item">
			 <div class="img"><img src="https://placehold.jp/690x426.png" alt=""></div>
			 <p class="name">写真説明が入ります</p>
		 </li>
		 <li class="item">
			 <div class="img"><img src="https://placehold.jp/690x426.png" alt=""></div>
			 <p class="name">写真説明が入ります<br>写真説明が入ります</p>
		 </li>
		</ul>
		<p class="mod_btn04">
		 <a href="#" class="alpha">画像のダウンロードはこちら</a>
		</p>
		<p class="note">※画像のダウンロードは報道関係者の方のみとなっております。ご了承ください。</p>
	</div>
</article>

Styleguide 6.0.0
*/
.mod_single01 { margin-bottom: 26px; padding: 28px 0 10px; border-bottom: 1px solid #e6e6e6; }

.mod_single01 .head { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #0097e0; }

.mod_single01 .head .meta { display: -webkit-box; display: -ms-flexbox; display: flex; }

.mod_single01 .head .meta .time { margin: 0 8px 0 4px; font-size: 1.5rem; }

.mod_single01 .head .meta .cat { display: inline-block; padding: 0 8px; border: 1px solid #0097e0; color: #0097e0; font-size: 1.3rem; }

.mod_single01 .head h1 { line-height: 1.6; margin-top: 8px; font-weight: normal; font-size: 2.1rem; }

.mod_single01 .lead { font-weight: bold; }

.mod_single01 .entry { padding-bottom: 20px; }

.mod_single01 .entry h2 { margin: 20px 0 10px; color: #0097e0; font-weight: bold; font-size: 1.6rem; }

.mod_single01 .entry img { display: block; margin: 15px /*auto*/; width: auto; max-width: 100%; }

.mod_single01 .entry .scroll { margin: 15px 0; overflow-x: scroll; }

.mod_single01 .entry .scroll > table { margin: 0; }

.mod_single01 .entry table { table-layout: fixed; border: solid #e1e1e1; border-width: 1px 0 0 1px; margin: 15px 0; }

.mod_single01 .entry table th, .mod_single01 .entry table td { box-sizing: border-box; border: solid #e1e1e1; border-width: 0 1px 1px 0; }

.mod_single01 .entry table th { padding: 10px 25px; background: #f3f6f8; font-size: 1.4rem; font-weight: 700; }

.mod_single01 .entry table td { padding: 15px 25px; background: #fff; }

.mod_single01 .entry .aligncenter { text-align: center; }

.mod_single01 .entry strong { font-weight: 700; }

@media all and (max-width: 599px) {
	.mod_single01 .entry .scroll table { width: auto; }

}

.mod_single01 .case .sub { position: relative; margin-bottom: 16px; padding-left: 14px; }

.mod_single01 .case .sub:before { content: ''; display: inline-block; position: absolute; top: 8px; left: 0; width: 11px; height: 11px; background: #333; }

.mod_single01 .case .list { padding-bottom: 20px; }

.mod_single01 .case .list .item + .item { margin-top: 14px; }

.mod_single01 .case .list .item .img { margin-bottom: 4px; }

.mod_single01 .case .list .item .name { text-align: center; }

.mod_single01 .case .note { line-height: 1.9; margin-top: 10px; padding: 0 10px; color: #666; font-size: 1.2rem; }

@media all and (min-width: 600px) { .mod_single01 { margin-bottom: 40px; padding: 20px 0 14px; }
  .mod_single01 .head { margin-bottom: 20px; padding-bottom: 15px; }
  .mod_single01 .head .meta .time { margin: 0 18px 0 4px; font-size: 1.8rem; }
  .mod_single01 .head .meta .cat { line-height: 2; padding: 0 16px; font-size: 1.5rem; }
  .mod_single01 .head h1 { margin-top: 15px; font-size: 3rem; letter-spacing: .07em; }
  .mod_single01 .entry { padding-bottom: 56px; }
  .mod_single01 .entry h2 { margin: 24px 0 8px; font-size: 1.8rem; }
  .mod_single01 .entry img { display: block; margin: 30px /*auto*/; }
  .mod_single01 .entry .scroll { margin: 20px 0; overflow: visible; }
  .mod_single01 .entry th { width: 290px; padding: 25px 30px; }
  .mod_single01 .entry td { padding: 25px 30px; }
  .mod_single01 .entry .alignleft{max-width:600px;float:left;margin:5px 30px 15px 0}
  .mod_single01 .entry .alignright{max-width:600px;float:right;margin:5px 0 15px 30px}
  .mod_single01 .entry .aligncenter{display:block;margin:0 auto 15px;}
  .mod_single01 .entry img.alignleft{max-width:600px;float:left;margin:5px 30px 15px 0}
  .mod_single01 .entry img.alignright{max-width:600px;float:right;margin:5px 0 15px 30px}
  .mod_single01 .entry img.aligncenter{display:block;margin:0 auto 15px}
  .mod_single01 .case .sub { margin-bottom: 42px; padding-left: 16px; }
  .mod_single01 .case .sub:before { width: 12px; height: 12px; }
  .mod_single01 .case .list { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 170px 40px; }
  .mod_single01 .case .list .item + .item { margin: 0 0 0 35px; }
  .mod_single01 .case .note { margin-top: 14px; padding: 0; font-size: 1.4rem; text-align: center; }
}

/*
Table

mod_table01

.mod_table01 - Base styles

Markup:
<div class="mod_table01 {$modifiers}">
	<table><tbody>
		<tr>
			<th></th>
			<td></td>
		</tr>
	</tbody></table>
</div>

Styleguide 7.0.0
*/
.mod_table01 { table-layout: fixed; border: solid #e1e1e1; border-width: 1px 0 0 1px; }

.mod_table01 th, .mod_table01 td { box-sizing: border-box; border: solid #e1e1e1; border-width: 0 1px 1px 0; }

.mod_table01 th { padding: 10px 25px; background: #f3f6f8; font-size: 1.4rem; font-weight: 700; }

.mod_table01 td { padding: 15px 25px; background: #fff; }

@media all and (max-width: 599px) { .mod_table01 table, .mod_table01 thead, .mod_table01 tbody, .mod_table01 tr, .mod_table01 th, .mod_table01 td { display: block; } }

@media all and (min-width: 600px) { .mod_table01 th { width: 290px; padding: 25px 30px; }
  .mod_table01 td { padding: 25px 30px; } }

/*
Title

mod_tit01

.mod_tit01 - Base styles

Markup:
<h2 class="mod_tit01 {$modifiers}">なぜ余震対策が必要なのか</h2>

Styleguide 8.0.0
*/
.mod_tit01 { position: relative; text-align: center; font-size: 2rem; font-weight: 700; padding-bottom: 20px; margin-bottom: 25px; }

.mod_tit01:before { content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 46px; height: 3px; background: url("../img/common/ico_bar01.png") no-repeat center/contain; }

@media all and (min-width: 600px) { .mod_tit01 { font-size: 3rem; padding-bottom: 30px; margin-bottom: 50px; } }

/*
Title

mod_tit02

.mod_tit02 - Base styles

Markup:
<h3 class="mod_tit02 {$modifiers}">実験内容</h3>

Styleguide 8.0.1
*/
.mod_tit02 { font-size: 1.8rem; font-weight: 700; padding-bottom: 15px; margin-bottom: 20px; border-bottom: #0097e0 1px solid; }

@media all and (min-width: 600px) { .mod_tit02 { font-size: 2.4rem; padding-bottom: 15px; margin-bottom: 30px; } }

/*
Title

mod_tit03

.mod_tit03 - Base styles

Markup:
<h4 class="mod_tit03 {$modifiers}">実験で証明された、制震技術の効果</h4>


Styleguide 8.0.2
*/
.mod_tit03 { margin-bottom: 20px; padding: 12px 15px; background: #e6f0f7; font-size: 1.7rem; font-weight: 700; }

@media all and (min-width: 600px) { .mod_tit03 { margin-bottom: 30px; padding: 15px 30px; font-size: 2.2rem; } }

/*
Title

mod_tit04

.mod_tit04 - Base styles

Markup:
<h5 class="mod_tit04 {$modifiers}">1. 壁面にMIRAIE<br class="viewSp">をセット</h5>


Styleguide 8.0.3
*/
.mod_tit04 { margin-bottom: 20px; padding-left: 15px; font-size: 1.6rem; font-weight: 700; color: #0097e0; }

@media all and (min-width: 600px) { .mod_tit04 { margin-bottom: 30px; padding-left: 0; font-size: 2.2rem; } }







/* flow arrow */
.u-arrow {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 25px;
    border-color: #1874b1 transparent transparent transparent;
}

@media (min-width: 600px){
.u-arrow{
    border-width: 50px 50px 0 50px;
}
}


@media all and (min-width: 768px) { 
.organicSolvent{width:640px; margin:30px auto;}
.organicSolvent a:hover img{opacity:0.7}
}


@media all and (max-width: 767px) { 
.organicSolvent{width:96%; margin:15px auto;}
}