@charset "UTF-8";
/*=============================================================
 04_modules
=============================================================*/
/*  inner
================================================ */
.mod_inner01 { box-sizing: border-box; padding: 0 15px; }
@media all and (min-width: 600px) { .mod_inner01 { width: 1200px; margin: 0 auto; padding: 0; } }
/*
#styleguide
mod_inner01

1カラムでのセンタリング用
```
	<section id="hoge">
		<div class="inner mod_inner01">
		</div>
	</section>
	<!-- /#course -->
```
*/
/*  button
================================================ */
.mod_btn01 a { display: block; position: relative; box-sizing: border-box; width: 200px; margin: 0 auto; padding: 9px 5px; border: 2px solid #a89e8e; border-radius: 3px; color: #221815; font-weight: 500; font-size: 1.3rem; text-align: center; letter-spacing: 0; }
.mod_btn01 a:before { position: absolute; right: 4px; bottom: 4px; width: 0; height: 0; border-width: 0 0 8px 8px; border-style: solid; border-color: transparent transparent #9e9382 transparent; content: ""; }
/*
#styleguide
mod_btn01

mod_btn01

```
<p class="mod_btn01"><a href="#">mod_btn01</a></p>
```
*/
.mod_btn02 { margin: 0 auto; }
.mod_btn02 a { display: block; position: relative; box-sizing: border-box; padding: 15px 5px; border: 2px solid #3d3838; border-radius: 8px; color: #3d3838; font-weight: 500; text-align: center; letter-spacing: 0; }
.mod_btn02 a:before { position: absolute; right: 4px; bottom: 4px; width: 0; height: 0; border-width: 0 0 8px 8px; border-style: solid; border-color: transparent transparent #3d3838 transparent; content: ""; }
.mod_btn02.is_pdf a { background: url(../img/common/ico_pdf01.png) no-repeat 13px 50%; background-size: 24px 25px; }
.mod_btn02.is_excel a { background: url(../img/common/ico_excel01.png) no-repeat 10px 50%; background-size: 28px 25px; }
@media all and (min-width: 600px) { .mod_btn02 { width: 400px; }  .mod_btn02 a { padding: 23px 5px; font-size: 1.6rem; }  .mod_btn02 a:before { right: 8px; bottom: 8px; border-width: 0 0 10px 10px; }  .mod_btn02.is_pdf a { background-position: 28px 50%; background-size: 35px auto; }  .mod_btn02.is_excel a { background-position: 23px 50%; background-size: 40px auto; } }
/*
#styleguide
mod_btn02

一覧へ戻る　など

```
<p class="btn alpha mod_btn02"><a href="#">嵯峨野観光鉄道株式会社</a></p>
<br>
<p class="btn alpha mod_btn02 is_pdf"><a href="#">PSDファイル</a></p>
<br>
<p class="btn alpha mod_btn02 is_excel"><a href="#">EXCElファイル</a></p>
```
*/
/*  tit
================================================ */
.mod_tit01 { margin-bottom: 20px; padding: 10px 10px; border-left: 5px solid #e7e3dc; font-weight: 700; font-size: 1.6rem; }
@media all and (min-width: 600px) { .mod_tit01 { margin-bottom: 30px; padding: 22px 20px; font-size: 2.2rem; } }
/*
#styleguide
mod_tit01

mod_tit01

```
<p class="mod_tit01">mod_tit01</p>
```
*/
.mod_tit02 { line-height: 1.21053; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #333; font-weight: 700; font-size: 1.9rem; }
.mod_tit02 .small { font-weight: 700; font-size: 1.4rem; }
@media all and (max-width: 599px) { .mod_tit02 .small { display: block; margin: 4px 0 0; } }
@media all and (min-width: 600px) { .mod_tit02 { line-height: 1.25; margin-bottom: 40px; padding-bottom: 15px; font-size: 2.4rem; }  .mod_tit02 .small { margin-left: 30px; font-size: 1.8rem; vertical-align: text-bottom; } }
/*
#styleguide
mod_tit02

mod_tit02

```
<p class="mod_tit02">mod_tit02</p>
```
*/
.mod_tit03 { line-height: 1.23529; margin-bottom: 20px; padding: 12px 15px; background: #f4efe6; font-weight: 700; font-size: 1.7rem; }
@media all and (min-width: 600px) { .mod_tit03 { line-height: 1.5; margin-bottom: 40px; padding: 16px 24px 14px; font-size: 2.4rem; } }
/*
#styleguide
mod_tit03

mod_tit03

```
<p class="mod_tit03">mod_tit03</p>
```
*/
.mod_tit04 { position: relative; line-height: 1.43; margin: 0 -15px 20px; font-size: 1.9rem; text-align: center; }
.mod_tit04 .titBg { display: inline-block; position: relative; z-index: 1; padding: 0 8px; background: #fff; }
.mod_tit04:before { display: block; position: absolute; top: 50%; left: 0; z-index: -1; width: 100%; height: 1px; margin: -1px 0 0; background: #000; content: ""; }
.mod_tit04 b { font-weight: bold; }
@media all and (min-width: 600px) { .mod_tit04 { margin: 0 0 40px; font-size: 2.6rem; }  .mod_tit04 .titBg { padding: 0 15px; } }
/*
#styleguide
mod_tit04

mod_tit04

```
<p class="mod_tit04"><span class="titBg"><b>mod_tit04</b></span></p>
```
*/
/* mod_archive
================================================ */
.mod_archive01 .art { border: 1px solid #dfdbd0; }
.mod_archive01 .art a { display: block; }
.mod_archive01 .art + .art { margin: 10px 0 0; }
.mod_archive01 .art .head { padding: 10px 9px 14px; border-bottom: 1px solid #dfdbd0; background: #f4efe6; }
.mod_archive01 .art .head .tit { line-height: 1.41; margin-bottom: 7px; font-weight: 700; font-size: 1.7rem; }
.mod_archive01 .art .head .category .item { float: left; }
.mod_archive01 .art .head .category .item + .item { margin-left: 5px; }
.mod_archive01 .art .head .category .item .cat { line-height: 20px; padding: 1px 10px; border-radius: 10px; background: #ccc; color: #fff; font-size: 1.1rem; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color01"] { background-color: #d07a78; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color02"] { background-color: #db9b89; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color03"] { background-color: #de9e71; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color04"] { background-color: #e3b260; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color05"] { background-color: #c7bf67; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color06"] { background-color: #b2c28b; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color07"] { background-color: #8fae8d; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color08"] { background-color: #72b8b1; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color09"] { background-color: #81abb9; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color10"] { background-color: #9d9fc1; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color11"] { background-color: #8281a1; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color12"] { background-color: #b69aab; }
.mod_archive01 .art .head .category .item .cat.genre[class$="_color13"] { background-color: #c69691; }
.mod_archive01 .art .head .category .item .cat.area[class$="_color01"] { background-color: #b1d26b; }
.mod_archive01 .art .head .category .item .cat.area[class$="_color02"] { background-color: #f4bab3; }
.mod_archive01 .art .head .category .item .cat.area[class$="_color03"] { background-color: #afa4cd; }
.mod_archive01 .art .head .category .item .cat.area[class$="_color04"] { background-color: #f4bb21; }
.mod_archive01 .art .head .category .item .cat.area[class$="_color05"] { background-color: #a8d7eb; }
.mod_archive01 .art .cont { position: relative; padding: 12px 15px; }
.mod_archive01 .art .cont:before { position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-width: 0 0 8px 8px; border-style: solid; border-color: transparent transparent #333 transparent; content: ""; }
.mod_archive01 .art .cont .sub { line-height: 1.3; margin-bottom: 10px; font-weight: 700; font-size: 1.5rem; }
.mod_archive01 .art .cont .pic { float: left; width: 130px; margin-right: 10px; }
@media all and (min-width: 600px) { .mod_archive01 .art + .art { margin: 20px 0 0; }  .mod_archive01 .art .head { padding: 15px 20px 16px 25px; }  .mod_archive01 .art .head .tit { float: left; margin-bottom: 0; font-size: 2.4rem; }  .mod_archive01 .art .head .category { float: right; padding-top: 5px; }  .mod_archive01 .art .head .category .item { float: left; font-size: 1.4rem; }  .mod_archive01 .art .head .category .item + .item { margin-left: 10px; }  .mod_archive01 .art .head .category .item .viewPc { float: left; }  .mod_archive01 .art .head .category .item .cat { line-height: 20px; font-size: 1.2rem; }  .mod_archive01 .art .cont { min-height: 164px; padding: 30px 30px 30px 310px; }  .mod_archive01 .art .cont:before { right: 10px; bottom: 10px; border-width: 0 0 10px 10px; }  .mod_archive01 .art .cont .sub { margin-top: 5px; margin-bottom: 12px; font-size: 2rem; }  .mod_archive01 .art .cont .pic { position: absolute; top: 30px; left: 30px; float: none; width: 260px; margin-right: 0; background: #ccc; text-align: center; }  .mod_archive01 .art .cont .pic img { width: auto; height: 164px; } }
/*
#styleguide
mod_archive01

観る　など

```
<ul class="mod_archive01">
	<li class="art alpha">
		<a href="#">
			<div class="head cf">
				<h2 class="tit">トロッコ列車</h2>
				<ul class="category">
					<li class="item"><span class="viewPc">ジャンル：</span><span class="cat color01">亀岡イチオシ</span></li>
					<li class="item"><span class="viewPc">エリア：</span><span class="cat color02">エリア名</span></li>
				</ul>
			</div>
			<div class="cont cf">
				<h3 class="sub">嵐山から 25 分の旅！ワクワク時間は</h3>
				<p class="pic"><img src="/img/seeing/img_seeing01.png" alt=""></p>
				<p class="txt">嵯峨野トロッコ列車は、山陰本線の旧線を活用した観光列車です。<br>四季折々の保津川渓谷の美しさを満喫できます。</p>
			</div>
		</a>
	</li>
	<li class="art alpha">
		<a href="#">
			<div class="head cf">
				<h2 class="tit">保津川下り</h2>
				<ul class="category">
					<li class="item"><span class="viewPc">ジャンル：</span><span class="cat color01">亀岡イチオシ</span></li>
					<li class="item"><span class="viewPc">エリア：</span><span class="cat color03">エリア名</span></li>
				</ul>
			</div>
			<div class="cont cf">
				<h3 class="sub">スリル満点！豪快な川下り！</h3>
				<p class="pic"><img src="/img/seeing/img_seeing02.png" alt=""></p>
				<p class="txt">保津川下りは、丹波亀岡から京都の名勝嵐山まで約１６ｋｍの渓流を約２時間で下るスリル満点の舟下りです。</p>
			</div>
		</a>
	</li>
</ul>
```
*/
.mod_archive02 .article { margin-bottom: 15px; }
.mod_archive02 .article .inner { display: block; position: relative; background: #f6f1e8; }
.mod_archive02 .article .inner:after { position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-width: 0 0 8px 8px; border-style: solid; border-color: transparent transparent #333; content: ""; }
.mod_archive02 .article .pic { margin-bottom: 13px; }
.mod_archive02 .article .pic img { width: 100%; }
.mod_archive02 .article .content { padding: 0 15px 20px; }
.mod_archive02 .article .content .sub { line-height: 1.25; margin-bottom: 11px; padding-bottom: 12px; border-bottom: 1px solid #d6d6d6; font-weight: 700; font-size: 1.6rem; }
.mod_archive02 .article .content .txt { margin-bottom: 12px; }
.mod_archive02 .article .content .date { overflow: hidden; }
.mod_archive02 .article .content .date dt { float: left; box-sizing: border-box; width: 100px; height: 19px; margin-right: 10px; padding-top: 2px; background: #9e9382; color: #fff; font-size: 1.1rem; text-align: center; }
.mod_archive02 .article .content .date dd { line-height: 1.5; font-size: 1.2rem; }
@media all and (min-width: 600px) { .mod_archive02 .article { margin-bottom: 20px; }  .mod_archive02 .article .inner { overflow: hidden; }  .mod_archive02 .article .inner:after { right: 10px; bottom: 10px; border-width: 0 0 10px 10px; }  .mod_archive02 .article .pic { float: left; width: 320px; margin-bottom: 0; }  .mod_archive02 .article .content { float: right; width: 480px; padding: 40px 30px; }  .mod_archive02 .article .content .sub { line-height: 1.27273; font-size: 2.2rem; }  .mod_archive02 .article .content .txt { margin-bottom: 25px; }  .mod_archive02 .article .content .date dt { width: 115px; height: 20px; margin-right: 17px; padding-top: 1px; font-size: 1.2rem; }  .mod_archive02 .article .content .date dd { line-height: 1.2; font-size: 1.5rem; } }
/*
#styleguide
mod_archive02

特集イベント　など

```
<ul class="archive mod_archive02">
	<li class="article alpha"><a class="inner" href="#">
		<div class="pic"><img src="http://dummyimage.com/580x362/333333/ffffff.png&amp;text=580x362" alt=""></div>
		<div class="content">
			<h3 class="sub">タイトルが入ります</h3>
			<p class="txt">テキストが入りますテキストが入りますテキストが入ります</p>
			<dl class="date">
				<dt>開催時期</dt>
				<dd>毎年00月00日</dd>
			</dl>
		</div>
	</a></li>
	<li class="article alpha"><a class="inner" href="#">
		<div class="pic"><img src="http://dummyimage.com/580x362/333333/ffffff.png&amp;text=580x362" alt=""></div>
		<div class="content">
			<h3 class="sub">タイトルが入ります</h3>
			<p class="txt">テキストが入りますテキストが入りますテキストが入ります</p>
			<dl class="date">
				<dt>開催時期</dt>
				<dd>毎年00月00日</dd>
			</dl>
		</div>
	</a></li>
</ul>
```
*/
.mod_archive03 .article + .article { margin-top: 7px; }
.mod_archive03 .article a { display: block; padding: 8px 0 6px; border-bottom: 2px dotted #dadada; }
.mod_archive03 .article a .date { box-sizing: border-box; width: 100px; height: 19px; line-height: 1.18182; margin-bottom: 7px; padding-top: 3px; background: #9e9382; color: #fff; font-size: 1.1rem; text-align: center; }
@media all and (min-width: 600px) { .mod_archive03 .article + .article { margin-top: 0; }  .mod_archive03 .article a { overflow: hidden; padding: 20px 0 13px; }  .mod_archive03 .article a .date { float: left; width: 85px; height: 20px; line-height: 1.5; margin: 0 34px 0 0; padding-top: 1px; font-size: 1.2rem; }  .mod_archive03 .article a .txt { line-height: 1.33333; }  .mod_archive03 .article a:hover .txt { text-decoration: underline; } }
/*
#styleguide
mod_archive03

イベント一覧　など
```
<ul class="archive mod_archive03">
	<li class="article"><a href="single.php">
		<p class="date">00日</p>
		<p class="txt"><?php echo $m+1; ?>月のイベント名が入ります。</p>
	</a></a></li>
	<li class="article"><a href="single.php">
		<p class="date">00日</p>
		<p class="txt"><?php echo $m+1; ?>月のイベント名が入ります。</p>
	</a></a></li>
</ul>
```
*/
.mod_archive04 .article { border: 1px solid #dfdbd0; }
.mod_archive04 .article + .article { margin-top: 15px; }
.mod_archive04 .article a { display: block; position: relative; padding: 20px 19px 16px; }
.mod_archive04 .article a:after { position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-width: 0 0 8px 8px; border-style: solid; border-color: transparent transparent #333 transparent; content: ""; }
.mod_archive04 .article .pic { margin-bottom: 11px; }
.mod_archive04 .article .content .copy { line-height: 1.53333; font-weight: 700; font-size: 1.5rem; }
.mod_archive04 .article .content .sub { line-height: 1.53333; font-weight: 700; font-size: 1.7rem; }
.mod_archive04 .article .content .info { padding-top: 2px; }
.mod_archive04 .article .content .info dl dt { line-height: 1.5; margin: 11px 0 6px; padding: 4px 15px 3px; background: #c4bba1; color: #fff; font-weight: 700; font-size: 1.2rem; }
@media all and (min-width: 600px) { .mod_archive04 .article + .article { margin-top: 20px; }  .mod_archive04 .article a { overflow: hidden; padding: 29px; }  .mod_archive04 .article a:after { right: 10px; bottom: 10px; border-width: 0 0 10px 10px; }  .mod_archive04 .article .pic { float: left; width: 260px; margin-bottom: 0; }  .mod_archive04 .article .content { position: relative; float: right; width: 520px; min-height: 164px; }  .mod_archive04 .article .content .copy { line-height: 1.66667; font-size: 1.8rem; }  .mod_archive04 .article .content .sub { line-height: 1.25; font-size: 2.4rem; }  .mod_archive04 .article .content .info { position: absolute; bottom: 0; left: 0; padding-top: 0; }  .mod_archive04 .article .content .info dl { display: table; width: 100%; margin-top: 10px; }  .mod_archive04 .article .content .info dl dt , .mod_archive04 .article .content .info dl dd { display: table-cell; vertical-align: middle; }  .mod_archive04 .article .content .info dl dt { width: 90px; min-height: 28px; margin: 0; padding: 0; font-size: 1.3rem; text-align: center; }  .mod_archive04 .article .content .info dl dd { padding-left: 12px; } }
/*
#styleguide
mod_archive04

モデルコース　など
```
<ul class="articles mod_archive04">
	<li class="article alpha"><a href="single.php">
		<div class="pic" data-mh="course-list"><img src="http://dummyimage.com/500x316/333333/ffffff.png&amp;text=500x316" alt=""></div>
		<div class="content" data-mh="course-list">
			<p class="copy">コピーが入ります</p>
			<h3 class="sub">コース名が入ります</h3>
			<div class="info">
				<dl>
					<dt>行先</dt>
					<dd>〇〇〇〇〇、〇〇〇〇〇、〇〇〇〇〇、〇〇〇〇〇、〇〇〇〇〇、〇〇〇〇〇</dd>
				</dl>
				<dl>
					<dt>所要時間</dt>
					<dd>00時間</dd>
				</dl>
			</div>
		</div>
	</a></li>
	<li class="article alpha"><a href="single.php">
		<div class="pic" data-mh="course-list"><img src="http://dummyimage.com/500x316/333333/ffffff.png&amp;text=500x316" alt=""></div>
		<div class="content" data-mh="course-list">
			<p class="copy">コピーが入ります</p>
			<h3 class="sub">コース名が入ります</h3>
			<div class="info">
				<dl>
					<dt>行先</dt>
					<dd>〇〇〇〇〇、〇〇〇〇〇、〇〇〇〇〇、〇〇〇〇〇、〇〇〇〇〇、〇〇〇〇〇</dd>
				</dl>
				<dl>
					<dt>所要時間</dt>
					<dd>00時間</dd>
				</dl>
			</div>
		</div>
	</a></li>
</ul>
```
*/
.mod_archive05 .article { padding-bottom: 20px; border-bottom: 2px dotted #e6e6e6; }
.mod_archive05 .article + .article { padding-top: 20px; }
.mod_archive05 .article .gallery { margin-bottom: 13px; }
.mod_archive05 .article .gallery .pics { margin-bottom: 10px; }
.mod_archive05 .article .gallery .pics .slick-slide .pic { position: relative; width: 100%; height: 0; padding-top: 56.25%; background: #dadada; }
.mod_archive05 .article .gallery .pics .slick-slide .pic img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: 100%; height: auto; max-height: 100%; margin: auto; }
.mod_archive05 .article .gallery .pics .slick-prev , .mod_archive05 .article .gallery .pics .slick-next { display: block; position: absolute; top: 50%; z-index: 10; width: 19px; height: 29px; overflow: hidden; background-repeat: no-repeat; background-size: cover; text-indent: 100%; white-space: nowrap; }
.mod_archive05 .article .gallery .pics .slick-prev:before , .mod_archive05 .article .gallery .pics .slick-next:before { display: none; }
.mod_archive05 .article .gallery .pics .slick-prev { left: 7px; background-image: url(../img/common/ico_arrow01_prev.png); }
.mod_archive05 .article .gallery .pics .slick-next { right: 7px; background-image: url(../img/common/ico_arrow01_next.png); }
.mod_archive05 .article .gallery .thumbs { width: 270px; margin: 0 auto; }
.mod_archive05 .article .gallery .thumbs .slick-slide { position: relative; width: 80px !important; height: 45px; margin: 0 5px; padding-top: 0; background: #dadada; cursor: pointer; }
.mod_archive05 .article .gallery .thumbs .slick-slide:after { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; border: 2px solid #d84227; opacity: 0; content: ""; -webkit-transition: all .3s ease; transition: all .3s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
.mod_archive05 .article .gallery .thumbs .slick-slide.slick-current:after { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.mod_archive05 .article .gallery .thumbs .slick-slide img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: 100%; height: auto; max-height: 100%; margin: auto; }
.mod_archive05 .article .txt .sub { line-height: 1.4; margin-bottom: 5px; font-weight: 700; font-size: 1.5rem; }
.mod_archive05 .article .txt .sub span { color: #d84227; }
.mod_archive05 .article .txt .entry { margin-bottom: 13px; }
@media all and (min-width: 600px) { .mod_archive05 .article { overflow: hidden; padding-bottom: 30px; }  .mod_archive05 .article + .article { padding-top: 30px; }  .mod_archive05 .article .gallery { float: left; width: 344px; overflow: hidden; margin-bottom: 0; }  .mod_archive05 .article .gallery .pics .slick-prev , .mod_archive05 .article .gallery .pics .slick-next { width: 25px; height: 45px; }  .mod_archive05 .article .gallery .pics .slick-prev { left: 0; background-image: url(../img/common/ico_arrow02_prev.png); }  .mod_archive05 .article .gallery .pics .slick-next { right: 0; background-image: url(../img/common/ico_arrow02_next.png); }  .mod_archive05 .article .gallery .thumbs { width: 348px; margin: 0 -2px; }  .mod_archive05 .article .gallery .thumbs .slick-slide { width: 112px !important; height: 63px; margin: 0 2px; }  .mod_archive05 .article .txt { float: right; width: 496px; }  .mod_archive05 .article .txt .sub { line-height: 1.3; margin-bottom: 7px; font-size: 2rem; }  .mod_archive05 .article .txt .entry { line-height: 1.86667; margin-bottom: 24px; } }
/*
#styleguide
mod_archive05

グッズ　など
```
<ul class="archive mod_archive05">
	<li class="article">
		<div class="gallery js-goods-slider">
			<div class="pics js-goods-pics">
				<div><div class="pic"><img src="http://dummyimage.com/580x326/333333/ffffff.png&amp;text=16:9の画像(580x326)" alt=""></div></div>
				<div><div class="pic"><img src="http://dummyimage.com/580x800/333333/ffffff.png&amp;text=縦長の画像(580x800)" alt=""></div></div>
				<div><div class="pic"><img src="http://dummyimage.com/580x200/333333/ffffff.png&amp;text=横長の画像(580x200)" alt=""></div></div>
			</div>
			<div class="thumbs js-goods-thumbs">
				<div class="thumb"><img src="http://dummyimage.com/160x90/333333/ffffff.png&amp;text=16:9の画像(160x90)" alt=""></div>
				<div class="thumb"><img src="http://dummyimage.com/160x221/333333/ffffff.png&amp;text=縦長の画像(160x221)" alt=""></div>
				<div class="thumb"><img src="http://dummyimage.com/160x55/333333/ffffff.png&amp;text=横長の画像(160x55)" alt=""></div>
			</div>
		</div>
		<div class="txt">
			<h3 class="sub">(<?php echo $i+1; ?>)商品名が入ります　000円（税抜）</h3>
			<div class="entry">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
			<table class="info mod_table01">
				<tr>
					<th>項目名1</th><td>項目の内容</td>
				</tr>
				<tr>
					<th>項目名2</th><td>項目の内容が入ります。項目の内容が入ります。</td>
				</tr>
				<tr>
					<th>項目名3</th><td>項目の内容</td>
				</tr>
			</table>
		</div>
	</li>
	<li class="article">
		<div class="gallery js-goods-slider">
			<div class="pics js-goods-pics">
				<div><div class="pic"><img src="http://dummyimage.com/580x326/333333/ffffff.png&amp;text=16:9の画像(580x326)" alt=""></div></div>
				<div><div class="pic"><img src="http://dummyimage.com/580x800/333333/ffffff.png&amp;text=縦長の画像(580x800)" alt=""></div></div>
				<div><div class="pic"><img src="http://dummyimage.com/580x200/333333/ffffff.png&amp;text=横長の画像(580x200)" alt=""></div></div>
			</div>
			<div class="thumbs js-goods-thumbs">
				<div class="thumb"><img src="http://dummyimage.com/160x90/333333/ffffff.png&amp;text=16:9の画像(160x90)" alt=""></div>
				<div class="thumb"><img src="http://dummyimage.com/160x221/333333/ffffff.png&amp;text=縦長の画像(160x221)" alt=""></div>
				<div class="thumb"><img src="http://dummyimage.com/160x55/333333/ffffff.png&amp;text=横長の画像(160x55)" alt=""></div>
			</div>
		</div>
		<div class="txt">
			<h3 class="sub">(<?php echo $i+1; ?>)商品名が入ります　000円（税抜）</h3>
			<div class="entry">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
			<table class="info mod_table01">
				<tr>
					<th>項目名1</th><td>項目の内容</td>
				</tr>
				<tr>
					<th>項目名2</th><td>項目の内容が入ります。項目の内容が入ります。</td>
				</tr>
				<tr>
					<th>項目名3</th><td>項目の内容</td>
				</tr>
			</table>
		</div>
	</li>
</ul>
```
*/
.mod_archive06 { border-top: 1px solid #d6d6d6; }
.mod_archive06 .article > a , .mod_archive06 .article > .inner { display: block; padding: 12px 0 10px; border-bottom: 1px solid #d6d6d6; }
.mod_archive06 .article > a .meta , .mod_archive06 .article > .inner .meta { position: relative; overflow: hidden; padding-bottom: 6px; padding-left: 80px; }
.mod_archive06 .article > a .meta .date , .mod_archive06 .article > .inner .meta .date { position: absolute; top: 0; left: 0; width: 80px; font-size: 1.2rem; }
.mod_archive06 .article > a .meta .cat , .mod_archive06 .article > .inner .meta .cat { float: left; box-sizing: border-box; min-width: 100px; height: 19px; margin: 0 3px 3px 0; padding: 1px 5px 0; background: #9e9382; color: #fff; font-size: 1.1rem; text-align: center; }
.mod_archive06 .article > a .sub , .mod_archive06 .article > .inner .sub { line-height: 1.5; margin-bottom: 6px; font-weight: 700; font-size: 1.4rem; }
@media all and (min-width: 600px) { .mod_archive06 .article > a , .mod_archive06 .article > .inner { padding-bottom: 18px; }  .mod_archive06 .article > a .meta , .mod_archive06 .article > .inner .meta { margin-bottom: 12px; }  .mod_archive06 .article > a .meta .date , .mod_archive06 .article > .inner .meta .date { width: 90px; font-size: 1.5rem; }  .mod_archive06 .article > a .meta .cat , .mod_archive06 .article > .inner .meta .cat { min-width: 115px; height: 20px; padding: 1px 10px 0; font-size: 1.2rem; }  .mod_archive06 .article > a .sub , .mod_archive06 .article > .inner .sub { line-height: 1.5; margin-bottom: 5px; font-size: 2.2rem; }  .mod_archive06 .article > a .txt , .mod_archive06 .article > .inner .txt { line-height: 1.86667; } }
/*
#styleguide
mod_archive06

亀岡だより　など
```
<ul class="mod_archive06">
	<li class="article alpha">
		<a href="single.php">
			<div class="head cf">
				<ul class="meta">
					<li class="date">2018.00.00</li>
					<li class="cat">カテゴリ名</li>
				</ul>
				<h2 class="sub">タイトルが入ります</h2>
			</div>
			<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
		</a>
	</li>
	<li class="article alpha">
		<a href="single.php">
			<div class="head cf">
				<ul class="meta">
					<li class="date">2018.00.00</li>
					<li class="cat">カテゴリ名</li>
				</ul>
				<h2 class="sub">タイトルが入りますタイトルが入りますタイトルが入ります</h2>
			</div>
			<p class="txt">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
		</a>
	</li>
</ul>
<!-- /.mod_archive06 -->
```
*/
/*  tabs
================================================ */
.mod_tabs01 { margin: 0 -15px 20px 0; }
.mod_tabs01 .slick-list { border-bottom: 2px solid #d84227; }
.mod_tabs01 .tab { position: relative; box-sizing: border-box; width: 110px; height: 33px; padding-top: 5px; border: 1px solid #dadada; border-width: 1px 1px 0; font-size: 1.4rem; text-align: center; letter-spacing: 0; cursor: pointer; }
.mod_tabs01 .tab + .tab { margin-left: 5px; }
.mod_tabs01 .tab.active { border-color: #d84227; background: #d84227; color: #fff; }
@media all and (min-width: 600px) { .mod_tabs01 { margin: 0 0 30px; padding: 0 30px; }  .mod_tabs01 .slick-prev , .mod_tabs01 .slick-next { width: 25px; height: 45px; overflow: hidden; background-repeat: no-repeat; background-size: cover; text-indent: 100%; white-space: nowrap; -webkit-transition: all .3s ease; transition: all .3s ease; }  .mod_tabs01 .slick-prev:before , .mod_tabs01 .slick-next:before { display: none; }  .mod_tabs01 .slick-prev[aria-disabled="true"] , .mod_tabs01 .slick-next[aria-disabled="true"] { opacity: .5; cursor: default; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }  .mod_tabs01 .slick-prev { left: 0; background-image: url(../img/common/ico_arrow02_prev.png); }  .mod_tabs01 .slick-next { right: 0; background-image: url(../img/common/ico_arrow02_next.png); }  .mod_tabs01 .tab { width: 152px; height: 48px; padding-top: 13px; font-size: 1.5rem; }  .mod_tabs01 .tab + .tab { margin-left: 10px; } }
/*
#styleguide
mod_tabs01

PCでもSPでも横スライドするタブ
```
	<section id="hoge">
		<div class="inner mod_inner01">
		</div>
	</section>
	<!-- /#course -->
```
*/
/* mod_single
================================================ */
.mod_single01 header { margin: 0 0 13px; padding: 0 0 10px; border-bottom: 1px solid #333; }
.mod_single01 header .tit01 { line-height: 1.41; margin-bottom: 5px; font-weight: 700; font-size: 1.7rem; }
.mod_single01 header .category .cat { line-height: 20px; padding: 1px 10px; border-radius: 10px; color: #fff; font-size: 1.1rem; }
.mod_single01 header .category .cat.genre[class$="_color01"] { background-color: #d07a78; }
.mod_single01 header .category .cat.genre[class$="_color02"] { background-color: #db9b89; }
.mod_single01 header .category .cat.genre[class$="_color03"] { background-color: #de9e71; }
.mod_single01 header .category .cat.genre[class$="_color04"] { background-color: #e3b260; }
.mod_single01 header .category .cat.genre[class$="_color05"] { background-color: #c7bf67; }
.mod_single01 header .category .cat.genre[class$="_color06"] { background-color: #b2c28b; }
.mod_single01 header .category .cat.genre[class$="_color07"] { background-color: #8fae8d; }
.mod_single01 header .category .cat.genre[class$="_color08"] { background-color: #72b8b1; }
.mod_single01 header .category .cat.genre[class$="_color09"] { background-color: #81abb9; }
.mod_single01 header .category .cat.genre[class$="_color10"] { background-color: #9d9fc1; }
.mod_single01 header .category .cat.genre[class$="_color11"] { background-color: #8281a1; }
.mod_single01 header .category .cat.genre[class$="_color12"] { background-color: #b69aab; }
.mod_single01 header .category .cat.genre[class$="_color13"] { background-color: #c69691; }
.mod_single01 header .category .cat.area[class$="_color01"] { background-color: #b1d26b; }
.mod_single01 header .category .cat.area[class$="_color02"] { background-color: #f4bab3; }
.mod_single01 header .category .cat.area[class$="_color03"] { background-color: #afa4cd; }
.mod_single01 header .category .cat.area[class$="_color04"] { background-color: #f4bb21; }
.mod_single01 header .category .cat.area[class$="_color05"] { background-color: #a8d7eb; }
@media all and (min-width: 600px) { .mod_single01 header { margin: 0 0 40px; padding: 0 0 20px; }  .mod_single01 header .tit01 { margin-bottom: 17px; font-size: 2.4rem; }  .mod_single01 header .category .cat { height: 30px; line-height: 30px; padding: 3px 15px; border-radius: 15px; color: #fff; font-size: 1.6rem; }  .mod_single01 header .category .cat + .cat { margin-left: 10px; } }
.mod_single01 .slider { margin: 0 0 30px; }
.mod_single01 .slider .js-slider-for .slick-prev { left: 0; background: url(../img/common/ico_arrow01_prev.png) center no-repeat; background-size: contain; }
.mod_single01 .slider .js-slider-for .slick-next { right: 0; background: url(../img/common/ico_arrow01_next.png) center no-repeat; background-size: contain; }
.mod_single01 .slider .js-slider-for .slick-prev , .mod_single01 .slider .js-slider-for .slick-next { z-index: 5; width: 19px; height: 29px; }
.mod_single01 .slider .js-slider-for .slick-prev:before , .mod_single01 .slider .js-slider-for .slick-next:before { display: none; }
.mod_single01 .slider .js-slider-nav { margin-top: 10px; }
.mod_single01 .slider .js-slider-nav img { margin: 0 3px; }
@media all and (min-width: 600px) { .mod_single01 .slider { margin: 0 0 60px; }  .mod_single01 .slider .js-slider-for .slick-prev { left: 0; background: url(../img/common/ico_arrow02_prev.png) center no-repeat; background-size: auto; }  .mod_single01 .slider .js-slider-for .slick-next { right: 0; background: url(../img/common/ico_arrow02_next.png) center no-repeat; background-size: auto; }  .mod_single01 .slider .js-slider-for .slick-prev , .mod_single01 .slider .js-slider-for .slick-next { width: 50px; height: 90px; }  .mod_single01 .slider .js-slider-nav { margin-top: 20px; }  .mod_single01 .slider .js-slider-nav img { margin: 0 10px 0 0; } }
.mod_single01 .cont .tit02 { line-height: 1; margin: 0 0 18px; padding: 15px; background: #f4efe6; font-weight: 700; font-size: 1.7rem; }
.mod_single01 .cont .txt { margin-bottom: 20px; }
.mod_single01 .cont table { margin-bottom: 27px; }
@media all and (max-width: 599px) { .mod_single01 .cont table { display: block; }  .mod_single01 .cont table tbody , .mod_single01 .cont table tr , .mod_single01 .cont table td , .mod_single01 .cont table th { display: block; } }
.mod_single01 .cont table th { padding: 12px 15px; border-top: 1px solid #d9d9d9; background: url(../img/common/bg_pattern02.png) repeat; background-size: 75px; font-weight: bold; }
@media all and (min-width: 600px) { .mod_single01 .cont table th { background-size: 150px; } }
.mod_single01 .cont table td { padding: 12px 0; }
.mod_single01 .cont table td span.bold { font-weight: 700; font-size: 1.4rem; }
.mod_single01 .cont table td {word-break: break-all;}
.mod_single01 .cont table tr:last-of-type td { border-bottom: none; }
.mod_single01 .cont .map { margin: 0 0 20px; }
.mod_single01 .cont .map iframe { width: 100%; height: 160px; }
@media all and (min-width: 600px) { .mod_single01 .cont .tit02 { margin: 0 0 40px; padding: 21px 23px; font-size: 2.4rem; }  .mod_single01 .cont .txt { line-height: 1.71; margin-bottom: 40px; }  .mod_single01 .cont table { margin-bottom: 60px; }  .mod_single01 .cont table th , .mod_single01 .cont table td { padding: 21px 24px; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; }  .mod_single01 .cont table th { width: 202px; }  .mod_single01 .cont table tr:last-of-type td { border-bottom: 1px solid #d9d9d9; }  .mod_single01 .cont .map { margin: 0 0 40px; }  .mod_single01 .cont .map iframe { height: 380px; } }
/*
#styleguide
mod_single01

「観る」記事詳細
*/
/* mod_relation
================================================ */
.mod_relation01 { margin-bottom: 25px; }
.mod_relation01 .item { border: 1px solid #dfdbd0; }
.mod_relation01 .item + .item { margin-top: 15px; }
.mod_relation01 .item a { display: block; }
.mod_relation01 .item .tit { margin: 14px 15px 7px; font-weight: 700; font-size: 1.5rem; }
.mod_relation01 .item .category { margin: 1px 15px; padding-bottom: 15px; }
.mod_relation01 .item .category .cat { line-height: 20px; padding: 0 10px; border-radius: 10px; background-color: #ccc; color: #fff; font-size: 1.1rem; }
.mod_relation01 .item .category .cat + .cat { margin-left: 5px; }
.mod_relation01 .item .category .cat.genre[class$="_color01"] { background-color: #d07a78; }
.mod_relation01 .item .category .cat.genre[class$="_color02"] { background-color: #db9b89; }
.mod_relation01 .item .category .cat.genre[class$="_color03"] { background-color: #de9e71; }
.mod_relation01 .item .category .cat.genre[class$="_color04"] { background-color: #e3b260; }
.mod_relation01 .item .category .cat.genre[class$="_color05"] { background-color: #c7bf67; }
.mod_relation01 .item .category .cat.genre[class$="_color06"] { background-color: #b2c28b; }
.mod_relation01 .item .category .cat.genre[class$="_color07"] { background-color: #8fae8d; }
.mod_relation01 .item .category .cat.genre[class$="_color08"] { background-color: #72b8b1; }
.mod_relation01 .item .category .cat.genre[class$="_color09"] { background-color: #81abb9; }
.mod_relation01 .item .category .cat.genre[class$="_color10"] { background-color: #9d9fc1; }
.mod_relation01 .item .category .cat.genre[class$="_color11"] { background-color: #8281a1; }
.mod_relation01 .item .category .cat.genre[class$="_color12"] { background-color: #b69aab; }
.mod_relation01 .item .category .cat.genre[class$="_color13"] { background-color: #c69691; }
.mod_relation01 .item .category .cat.area[class$="_color01"] { background-color: #b1d26b; }
.mod_relation01 .item .category .cat.area[class$="_color02"] { background-color: #f4bab3; }
.mod_relation01 .item .category .cat.area[class$="_color03"] { background-color: #afa4cd; }
.mod_relation01 .item .category .cat.area[class$="_color04"] { background-color: #f4bb21; }
.mod_relation01 .item .category .cat.area[class$="_color05"] { background-color: #a8d7eb; }
@media all and (min-width: 600px) { .mod_relation01 { margin-bottom: 50px; }  .mod_relation01 .item { float: left; width: 270px; margin-right: 20px; }  .mod_relation01 .item + .item { margin-top: 0; }  .mod_relation01 .item:nth-of-type(3n) { margin-right: 0; }  .mod_relation01 .item .tit { margin: 17px 20px 7px; }  .mod_relation01 .item .category { margin: 0 20px; padding-bottom: 20px; }  .mod_relation01 .item .category .cat { padding: 1px 12px; border-radius: 15px; color: #fff; font-size: 1.2rem; }  .mod_relation01 .item .category .cat + .cat { margin-left: 10px; } }
/*
#styleguide
mod_relation01

「観る」記事詳細の下部
*/
/*  table
================================================ */
.mod_table01 { width: 100%; }
.mod_table01 th , .mod_table01 td { line-height: 1.66667; padding: 9px 15px 10px; border: 1px solid #d6d6d6; border-width: 1px 0; font-size: 1.2rem; }
.mod_table01 th { min-width: 50px; background: url(../img/common/bg_pattern03.png) repeat; background-size: 75px; font-weight: 500; }
@media all and (min-width: 600px) { .mod_table01 th { background-size: 150px; } }
@media all and (min-width: 600px) { .mod_table01 th , .mod_table01 td { line-height: 1.46667; padding: 14px 25px 13px; font-size: 1.5rem; }  .mod_table01 th { min-width: 80px; } }
/*
#styleguide
mod_table01

グッズ詳細　など

```
<table class="info mod_table01">
	<tr>
		<th>項目名1</th><td>項目の内容</td>
	</tr>
	<tr>
		<th>項目名2</th><td>項目の内容が入ります。項目の内容が入ります。</td>
	</tr>
	<tr>
		<th>項目名3</th><td>項目の内容</td>
	</tr>
</table>
```
*/
.mod_table02 { width: 100%; margin-bottom: 15px; border-bottom: 1px solid #d9d9d8; }
@media all and (max-width: 600px) { .mod_table02 { display: block; }  .mod_table02 thead , .mod_table02 tbody , .mod_table02 tr , .mod_table02 th , .mod_table02 td { display: block; } }
.mod_table02 th { line-height: 1.5; padding: 11px 14px; border-top: 1px solid #d9d9d8; background: url(../img/common/bg_pattern03.png) repeat; background-size: 75px; font-weight: 500; font-size: 1.4rem; }
@media all and (min-width: 600px) { .mod_table02 th { background-size: 150px; } }
.mod_table02 td { padding: 11px 0; }
.mod_table02 td .note { color: #83785d; }
@media all and (min-width: 600px) { .mod_table02 { margin-bottom: 30px; border-bottom: 1px solid #d9d9d8; }  .mod_table02 th { width: 200px; line-height: 1.66667; padding: 19px 25px; background-size: 150px; font-size: 1.5rem; vertical-align: top; }  .mod_table02 td { line-height: 1.66667; padding: 19px 25px; border-top: 1px solid #d9d9d8; font-size: 1.5rem; vertical-align: top; }  .mod_table02 td .note { color: #83785d; } }
/*
#styleguide
mod_table02

トロッコ　など

```
<table class="schedule mod_table02">
	<tr>
		<th scope="row">運転日</th>
		<td>3月1日～12月29日</td>
	</tr>
	<tr>
		<th scope="row">定休日</th>
		<td>
			水曜日（水曜日が祝日の場合は運転いたします）
			<p class="note">※ただし、春休み・GW・夏休み・紅葉の時期には、水曜日も運転いたします。</p>
		</td>
	</tr>
</table>
```
*/
/*  pager
================================================ */
.mod_pager01 { padding-top: 21px; text-align: center; letter-spacing: -.5em; }
.mod_pager01 .item { display: inline-block; width: 33px; height: 33px; margin: 4px 2px 0; letter-spacing: 0; }
.mod_pager01 .item a , .mod_pager01 .item span { display: block; box-sizing: border-box; width: 100%; height: 100%; padding-top: 7px; border: 1px solid #f1f1f1; background: #f1f1f1; font-weight: 500; text-align: center; }
.mod_pager01 .item span { border-color: #a5a5a5; background: #adadad; color: #fff; }
.mod_pager01 .item.prev a , .mod_pager01 .item.next a { position: relative; overflow: hidden; text-indent: 100%; white-space: nowrap; }
.mod_pager01 .item.prev a:before , .mod_pager01 .item.next a:before { position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 2px solid #757575; content: ""; }
.mod_pager01 .item.prev a:before { left: 40%; border-width: 0 0 2px 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.mod_pager01 .item.next a:before { right: 40%; border-width: 2px 2px 0 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
@media all and (min-width: 600px) { .mod_pager01 { padding-top: 40px; }  .mod_pager01 .item { width: 60px; height: 60px; margin: 10px 5px 0; }  .mod_pager01 .item a { -webkit-transition: all .3s ease; transition: all .3s ease; }  .mod_pager01 .item a , .mod_pager01 .item span { padding-top: 17px; border-width: 2px; font-size: 1.6rem; }  .mod_pager01 .item a:hover { border-color: #a5a5a5; background: #adadad; color: #fff; }  .mod_pager01 .item.prev a:before , .mod_pager01 .item.next a:before { width: 10px; height: 10px; margin-top: -5px; }  .mod_pager01 .item.prev a:before { left: 45%; -webkit-transition: all .3s ease; transition: all .3s ease; }  .mod_pager01 .item.prev a:hover:before { border-color: #fff; }  .mod_pager01 .item.next a:before { right: 45%; -webkit-transition: all .3s ease; transition: all .3s ease; }  .mod_pager01 .item.next a:hover:before { border-color: #fff; } }
/*
#styleguide
mod_pager01

ページナビ　※Page Bute 使用

```
<div class="pager mod_pager01">
	<ul class="list">
		<li class="item prev"><a href="#">前へ</a></li>
		<li class="item"><a href="#">1</a></li>
		<li class="item"><a href="#">2</a></li>
		<li class="item current"><span>3</span></li>
		<li class="item"><a href="#">4</a></li>
		<li class="item"><a href="#">5</a></li>
		<li class="item next"><a href="#">次へ</a></li>
	</ul>
</div>
<!-- /.mod_pager01 -->
```
*/
/*  form
================================================ */
.mod_form01 { /*Radio Check*/ /** before after **/ /** input **/ /** checked forcus */ }
.mod_form01 input[type="text"] , .mod_form01 input[type="tel"] , .mod_form01 input[type="email"] , .mod_form01 input[type="date"] , .mod_form01 textarea , .mod_form01 select { display: inline-block; box-sizing: border-box; width: 100%; height: 27px; padding: 5px; border: 1px solid #dadada; border-radius: 0; background: #fff; outline: none; box-shadow: 0 4px 0 -2px #f2f2f2 inset; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.mod_form01 textarea { min-height: 150px; }
.mod_form01 select { width: 50%; font-size: 1.1rem; }
.mod_form01 input[type="radio"] , .mod_form01 input[type="checkbox"] { margin-right: 5px; }
.mod_form01 .ico { display: block; width: 35px; line-height: 1.09091; padding: 2px 0; color: #fff; font-size: 1.1rem; text-align: center; }
.mod_form01 .ico.is_require { background: #d84227; }
.mod_form01 .ico.is_option { background: #ddd; }
.mod_form01 .zip input[type="text"] { width: 50%; margin-left: 5px; }
.mod_form01 .zip button { position: relative; width: 102px; margin-left: 10px; padding: 5px 0; border: none; background-color: #333; color: #fff; font-size: 1.1rem; outline: 0; box-shadow: 2.828px 2.828px 0 0 rgba(4, 0, 0, .15); }
.mod_form01 .zip button:after { position: absolute; right: 3px; bottom: 3px; width: 0; height: 0; border-width: 0 0 6px 6px; border-style: solid; border-color: transparent transparent #919191 transparent; content: ""; }
.mod_form01 .radio label { float: left; margin: 5px 0; }
.mod_form01 .error { color: #d84227; font-weight: 700; }
.mod_form01 .middle { vertical-align: middle; }
.mod_form01 th .ico { float: right; }
.mod_form01 td .error { display: block; padding-top: 3px; }
.mod_form01 .submitArea { padding-top: 25px; text-align: center; }
.mod_form01 .submitArea input[type="submit"] , .mod_form01 .submitArea input[type="button"] { display: block; box-sizing: border-box; width: 100%; height: 50px; border: 2px solid #3d3838; border-radius: 3px; background: #fff url(../img/inquiry/ico_submit01.png) no-repeat 100% 100%; background-size: 14px; color: #3d3838; font-weight: 500; font-size: 1.4rem; text-align: center; outline: none; cursor: pointer; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.mod_form01 .submitArea input[type="button"] { width: 60%; margin: 0 auto 10px; border-color: #dadada; background-color: #dadada; }
.mod_form01 .radio_text label { display: inline-block; position: relative; box-sizing: border-box; overflow: hidden; cursor: pointer; }
.mod_form01 .radio_text label { min-height: calc(20px + 5px); line-height: calc(20px + 5px); padding-left: calc(20px + 5px); }
.mod_form01 .radio_text label:before , .mod_form01 .radio_text label:after { position: absolute; box-sizing: border-box; content: ""; }
.mod_form01 .radio_text label:before { border-radius: 100%; }
.mod_form01 .radio_text label:before , .mod_form01 .radio_text label:after { top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
.mod_form01 .radio_text label:before { left: 0; z-index: 3; width: 20px; height: 20px; border: 1px solid #dadada; }
.mod_form01 .radio_text label:after { left: calc(((20px/2) - (10px) / 2)); z-index: 1; width: 10px; height: 10px; border-radius: 100%; background-color: #d84227; }
.mod_form01 .radio_text label input[type="radio"] { position: absolute; z-index: 2; box-sizing: border-box; width: 20px; height: 20px; margin: 0; outline: none; -moz-appearance: none; -webkit-appearance: none; }
.mod_form01 .radio_text label input[type="radio"] { top: 0; bottom: 0; left: calc(20px * -1); width: 20px; height: 20px; margin-top: auto; margin-bottom: auto; border-radius: 100%; }
.mod_form01 .radio_text label input[type="radio"] { box-shadow: 20px 0 #fff; }
.mod_form01 .radio_text label input[type="radio"]:checked { box-shadow: none; }
.mod_form01 .radio_text label input[type="radio"]:focus { opacity: .2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; }
.mod_form01 .radio_text label input[type="radio"]:focus { box-shadow: 20px 0 #fff; }
@media all and (min-width: 600px) { .mod_form01 input[type="text"] , .mod_form01 input[type="tel"] , .mod_form01 input[type="email"] , .mod_form01 input[type="date"] , .mod_form01 textarea { box-shadow: 0 6px 0 -3px #f2f2f2 inset; }  .mod_form01 select { width: 172px; height: 35px; font-size: 1.4rem; }  .mod_form01 input[type="radio"] , .mod_form01 input[type="checkbox"] { margin-right: 8px; vertical-align: middle; }  .mod_form01 .ico { width: 46px; line-height: 1.5; padding: 1px 0; font-size: 1.2rem; }  .mod_form01 .zip input[type="text"] { width: 175px; margin-left: 10px; }  .mod_form01 .zip button { display: inline-block; margin-left: 20px; padding: 3px 0; font-size: 1.3rem; cursor: pointer; }  .mod_form01 .zip button:after { border-width: 0 0 8px 8px; }  .mod_form01 .zip button:hover { opacity: .7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }  .mod_form01 .radio label { float: none; margin: 0; }  .mod_form01 .submitArea { padding-top: 30px; }  .mod_form01 .submitArea input[type="submit"] , .mod_form01 .submitArea input[type="button"] { display: inline-block; width: 400px; height: 73px; margin: 0 10px; border-radius: 6px; background-size: 18px; font-size: 1.6rem; -webkit-transition: all .3s ease; transition: all .3s ease; }  .mod_form01 .submitArea input[type="submit"]:hover , .mod_form01 .submitArea input[type="button"]:hover { opacity: .7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }  .mod_form01 .submitArea input[type="button"] { width: 200px; margin: 0 10px; } }
/*
#styleguide
mod_tabs01

PCでもSPでも横スライドするタブ
```
	<section id="hoge">
		<div class="inner mod_inner01">
		</div>
	</section>
	<!-- /#course -->
```
*/

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