@charset "UTF-8";

/*=============================================================
 04_modules
=============================================================*/
/*
#styleguide
mod_btn01

mod_btn01

```
<p class="btn mod_btn01 is_transparent"><a href="#">会社概要</a></p>
<p class="btn mod_btn01"><a href="#">カービューのサービス</a></p>
```
*/
.mod_btn01 a {
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 15px 10px;
	border: 2px solid #0195d1;
	background: #0195d1;
	color: #fff;
	font-weight: 600;
	font-size: 1.2rem;
	text-align: center;
}

.mod_btn01.is_current a {
	border-color: #0c2b55;
	background: #0c2b55;
}

@media screen and (min-width: 600px) {
	.mod_btn01 a {
		width: 320px;
		margin-right: auto;
		margin-left: auto;
		padding: 16px 10px;
		font-size: 1.5rem;
		-webkit-transition: all .3s ease;
		transition: all .3s ease;
	}

	.mod_btn01 a:hover {
		border-color: #0c2b55;
		background: #0c2b55;
	}
}

.mod_btn01 a:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 15px;
	height: 8px;
	background: url("../img/common/ico_arw01.png") no-repeat center;
	background-size: contain;
	content: "";
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

@media screen and (min-width: 600px) {
	.mod_btn01 a:after {
		right: 25px;
		width: 17px;
		height: 10px;
		-webkit-transition: all .3s ease;
		transition: all .3s ease;
	}
}

@media screen and (min-width: 600px) {

	.mod_btn01 a:hover:after,
	.mod_btn01.is_current a::after {
		right: 20px;
	}
}

.mod_btn01.is_transparent a {
	border-color: #fff;
	background: transparent;
}

.mod_btn01.is_transparent a:hover {
	background: #fff;
	color: #0195d1;
}

.mod_btn01.is_transparent a:hover:after {
	background-image: url("../img/common/ico_arw01_sky.png");
}

/*!  tit
================================================ */
.mod_tit01 {
	position: relative;
	font-weight: 700;
	text-align: center;
}

.mod_tit01:after {
	display: inline-block;
	position: absolute;
	bottom: 0;
	background-color: #0195d1;
	content: "";
}

@media screen and (max-width: 599px) {
	.mod_tit01 {
		line-height: 1.5;
		padding-bottom: 13px;
		font-size: 2.2rem;
		letter-spacing: .132rem;
	}

	.mod_tit01:after {
		left: 43.95%;
		width: 12.1%;
		height: 3px;
	}
}

@media screen and (min-width: 600px) {
	.mod_tit01 {
		padding-bottom: 18px;
		font-size: 3.4rem;
		letter-spacing: .204rem;
	}

	.mod_tit01:after {
		left: 50%;
		width: 70px;
		height: 5px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

.mod_tit02 {
	position: relative;
	border-bottom: 1px solid #dce1e1;
	font-weight: 700;
}

@media screen and (max-width: 599px) {
	.mod_tit02 {
		line-height: 1.5;
		padding: 0 0 8px 14px;
		font-size: 1.9rem;
		letter-spacing: .114rem;
	}
}

@media screen and (min-width: 600px) {
	.mod_tit02 {
		line-height: calc(29 / 24);
		padding: 0 0 16px 21px;
		font-size: 2.4rem;
		letter-spacing: .144rem;
	}
}

.mod_tit02:before {
	display: block;
	position: absolute;
	content: "";
}

@media screen and (max-width: 599px) {
	.mod_tit02:before {
		top: 2px;
		left: 0;
		width: 4px;
		height: 24px;
		background-color: #0195d1;
	}
}

@media screen and (min-width: 600px) {
	.mod_tit02:before {
		top: 0;
		left: 0;
		width: 5px;
		height: 30px;
		background-color: #0195d1;
	}
}

.mod_tit03 {
	background-color: #f6f6f6;
	font-weight: 700;
}

@media screen and (max-width: 599px) {
	.mod_tit03 {
		line-height: 1.42;
		padding: 9px 13px 10px;
		font-size: 1.7rem;
		letter-spacing: .102rem;
	}
}

@media screen and (min-width: 600px) {
	.mod_tit03 {
		line-height: calc(30 / 20);
		padding: 12px 21px 10px;
		font-size: 2rem;
		letter-spacing: .12rem;
	}
}

.mod_inner01 {
	box-sizing: border-box;
}

@media screen and (max-width: 599px) {
	.mod_inner01 {
		padding: 0 15px;
	}
}

@media screen and (min-width: 600px) {
	.mod_inner01 {
		width: 1100px;
		margin: 0 auto;
	}
}

/*
#styleguide
mod_article01

mod_article01

```
<ul class="list mod_article01_list">
	<li class="mod_article01"><a href="#">
	<div class="thumb"><img src="/img/dummy/img_dummy01.png" alt=""></div>
	<p class="tit">carview!</p>
	<div class="txt">名実ともに業界No.1のトラフィックを誇る自動車・バイクの情報メディアサイトです。ユーザーの「知りたい」「買いたい」「乗りたい」を楽しめるサービスを提供します。</div>
	</a></li>
	<li class="mod_article01"><a href="#">
	<div class="thumb"><img src="/img/dummy/img_dummy02.png" alt=""></div>
	<p class="tit">みんカラ</p>
	<div class="txt">「中古車査定仲介サービス」になります。愛車の売却を検討しているユーザーは、当社が提携する複数の中古車買取事業者等から出張訪問などを通じ、査定を受けことができます。</div>
	</a></li>
	<li class="mod_article01"><a href="#">
	<div class="thumb"><img src="/img/dummy/img_dummy03.png" alt=""></div>
	<p class="tit">tradecarview</p>
	<div class="txt">中古車輸出入の取引のサポートしている「中古車輸出支援サイト」になります。中古車情報を掲載し、中古車の購入を希望する200以上の国と地域のバイヤーへ情報を提供します。</div>
	</a></li>
	<li class="mod_article01"><a href="#">
	<div class="thumb"><img src="/img/dummy/img_dummy04.png" alt=""></div>
	<p class="tit">ヤフオク！サービス</p>
	<div class="txt">「ヤフオク!」の自動車分野の営業・企画を担うことを目的に、2015年1月にスタート致しました。自動車の売り買いにおいてユーザーが「使いたい」と思うサービスを提供することを目指します。</div>
	</a></li>
</ul>
```
*/
.mod_article01 {
	position: relative;
	background: #fff;
}

.mod_article01_list {
	padding: 0 15px;
}

@media screen and (min-width: 600px) {
	.mod_article01_list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: 0 20px;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}

.mod_article01_list:after {
	display: block;
	clear: both;
	content: "";
}

@media screen and (max-width: 599px) {
	.mod_article01_list .mod_article01+.mod_article01 {
		margin-top: 10px;
	}
}

@media screen and (min-width: 600px) {
	.mod_article01 {
		width: calc(25% - 20px);
		margin: 0 10px 20px;
	}

	.mod_article01_list.is_column5 .mod_article01 {
		width: calc(20% - 20px);
	}
	.mod_article01_list.is_column3 .mod_article01 {
		width: calc(calc(100% / 3) - 20px);
	}
}

.mod_article01 a {
	display: block;
	position: relative;
	box-sizing: border-box;
	height: 100%;
	padding: 0 20px 20px;
	border: 1px solid #dce1e1;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.mod_article01 a:after {
	display: block;
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 10px;
	height: 10px;
	background: url("../img/common/ico_arw02.png") no-repeat center;
	background-size: contain;
	content: "";
}

@media screen and (min-width: 600px) {
	.mod_article01 a:after {
		right: 20px;
		bottom: 20px;
		width: 15px;
		height: 15px;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
	}
}

@media screen and (min-width: 600px) {
	.mod_article01 a:hover {
		box-shadow: 0 0 22px 1px rgba(0, 0, 0, .25);
	}

	.mod_article01 a:hover:after {
		right: 14px;
		bottom: 14px;
	}
}

@media screen and (min-width: 600px) {
	.mod_article01 a {
		padding: 0 40px 45px;
	}
}

.mod_article01 .thumb {
	margin: 0 -21px;
	border-bottom: 1px solid #dce1e1;
}

@media screen and (min-width: 600px) {
	.mod_article01 .thumb {
		margin: 0 -41px;
	}
}

.mod_article01 .tit {
	margin-top: 10px;
	font-weight: 700;
	font-size: 1.6rem;
	text-align: center;
	word-break: break-all;
	/* add 20190207 */
	color: #0195d1;
}

@media screen and (min-width: 600px) {
	.mod_article01 .tit {
		margin-top: 28px;
		font-size: 2rem;
	}
}

.mod_article01 .txt {
	margin-top: 5px;
}

@media screen and (min-width: 600px) {
	.mod_article01 .txt {
		margin-top: 14px;
		font-size: 1.5rem;
	}
}

/*
#styleguide
mod_section01

mod_section01

```
<section id="recruit" class="mod_section01 is_img_left">
	<div class="js-animation-item animationFadeIn mod_section01_img is_animated"><img src="/img/home/img_recruit01.png" alt=""></div>
	<div class="mod_section01_area_txt"><a href="">
	<p class="js-animation-item animationFadeIn mod_section01_en is_font_roboto is_animated">Recruit</p>
	<h2 class="js-animation-item animationFadeIn mod_section01_tit is_animated">採用情報</h2>
	<p class="js-animation-item animationFadeIn mod_section01_cory is_animated">ダイナミックに成長するカービューで<br class="viewPc">あなたも成長できる</p>
	<p class="js-animation-item animationFadeIn mod_section01_txt is_animated">常に自由な発想を持ち、新しいものをゼロから生み出す喜びを感じることが、この世界では何よりも重要です。アイデアは誰が出したっていい。何かを感じたら臆せず言ってほしい。私はそんな皆さんの声をしっかり受け止めることを約束します。</p>
	<p class="js-animation-item animationFadeIn mod_section01_bnr is_animated"><img src="/img/home/bnr_recruit01.png" alt=""></p>
	</a></div>
</section>
<section id="affiliation" class="mod_section01 is_img_right">
	<div class="js-animation-item animationFadeIn mod_section01_img is_animated"><img src="/img/home/img_affiliation01.png" alt=""></div>
	<div class="mod_section01_area_txt"><a href="">
	<p class="js-animation-item animationFadeIn mod_section01_en is_font_roboto is_animated">Affiliation</p>
	<h2 class="js-animation-item animationFadeIn mod_section01_tit is_animated">加盟店募集</h2>
	<p class="js-animation-item animationFadeIn mod_section01_cory is_animated">日本最大級のクルマ情報<br>プラットホームで<br>情報を発信しませんか？</p>
	<p class="js-animation-item animationFadeIn mod_section01_txt is_animated">carviewでは加盟店を募集しています。</p>
	<ul class="js-animation-item animationFadeIn mod_section01_logo_list cf is_animated">
		<li class="mod_section01_logo"><img src="/img/dummy/logo_dummy01.png" alt=""></li>
		<li class="mod_section01_logo"><img src="/img/dummy/logo_dummy01.png" alt=""></li>
		<li class="mod_section01_logo"><img src="/img/dummy/logo_dummy01.png" alt=""></li>
		<li class="mod_section01_logo"><img src="/img/dummy/logo_dummy01.png" alt=""></li>
	</ul>
	</a></div>
</section>
```
*/
.mod_section01 {
	padding: 0 15px;
}

.mod_section01_list .mod_section01+.mod_section01 {
	margin-top: 30px;
}

@media screen and (min-width: 600px) {
	.mod_section01_list .mod_section01+.mod_section01 {
		margin-top: 80px;
	}
}

@media screen and (min-width: 600px) {
	.mod_section01 {
		padding: 0 0 100px;
	}
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_img {
		position: absolute;
		left: 0;
		width: calc(100% - 540px);
	}

	.mod_section01 .mod_section01_img img {
		float: right;
		width: 1380px;
		max-width: 1380px;
	}
}

@media screen and (max-width: 599px) {
	.mod_section01 .mod_section01_area_txt {
		margin-top: -15px;
	}
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_area_txt {
		position: relative;
		top: 100px;
		right: 100px;
		width: 635px;
		margin-left: auto;
	}
}

.mod_section01 .mod_section01_area_txt a {
	display: block;
	position: relative;
	padding: 20px 20px 30px;
	background: #eef0f0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.mod_section01 .mod_section01_area_txt a:after {
	display: block;
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 10px;
	height: 10px;
	background: url("../img/common/ico_arw02.png") no-repeat center;
	background-size: contain;
	content: "";
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_area_txt a:after {
		right: 20px;
		bottom: 20px;
		width: 15px;
		height: 15px;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
	}
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_area_txt a:hover {
		box-shadow: 0 0 22px 1px rgba(0, 0, 0, .25);
	}

	.mod_section01 .mod_section01_area_txt a:hover:after {
		right: 14px;
		bottom: 14px;
	}
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_area_txt a {
		padding: 61px 80px 80px;
	}
}

.mod_section01 .mod_section01_en,
.mod_section01 .mod_section01_tit {
	color: #0195d1;
	font-style: italic;
}

.mod_section01 .mod_section01_en {
	line-height: 1;
	font-weight: 900;
	font-size: 4.3rem;
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_en {
		font-size: 8.8rem;
	}
}

.mod_section01 .mod_section01_tit {
	font-weight: 700;
	font-size: 1.1rem;
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_tit {
		font-size: 1.7rem;
	}
}

.mod_section01 .mod_section01_cory {
	line-height: 1.5;
	margin-top: 12px;
	font-weight: 700;
	font-size: 1.8rem;
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_cory {
		margin-top: 36px;
		font-size: 2.5rem;
	}
}

.mod_section01 .mod_section01_txt {
	margin-top: 5px;
	font-weight: 300;
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_txt {
		margin-top: 20px;
	}
}

.mod_section01 .mod_section01_bnr,
.mod_section01 .mod_section01_logo_list {
	margin: 12px auto 0;
}

@media screen and (max-width: 599px) {

	.mod_section01 .mod_section01_bnr,
	.mod_section01 .mod_section01_logo_list {
		width: 220px;
	}
}

@media screen and (min-width: 600px) {

	.mod_section01 .mod_section01_bnr,
	.mod_section01 .mod_section01_logo_list {
		margin-top: 23px;
	}
}

.mod_section01 .mod_section01_logo {
	float: left;
	box-sizing: border-box;
	width: 50%;
}

.mod_section01 .mod_section01_logo:nth-child(odd) {
	padding-right: 3px;
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_logo:nth-child(odd) {
		padding-right: 5px;
	}
}

.mod_section01 .mod_section01_logo:nth-child(even) {
	padding-left: 3px;
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_logo:nth-child(even) {
		padding-left: 5px;
	}
}

.mod_section01 .mod_section01_logo:nth-child(n+3) {
	margin-top: 6px;
}

@media screen and (min-width: 600px) {
	.mod_section01 .mod_section01_logo:nth-child(n+3) {
		margin-top: 10px;
	}
}

.mod_section01.is_img_right .mod_section01_img {
	right: 0;
	left: auto;
	overflow: hidden;
}

@media screen and (min-width: 600px) {
	.mod_section01.is_img_right .mod_section01_img img {
		float: left;
	}
}

.mod_section01.is_img_right .mod_section01_area_txt {
	right: auto;
	left: 100px;
	margin-right: auto;
	margin-left: 0;
}

/*!  pager
================================================ */
.mod_pagination01 .links {
	text-align: center;
}

@media screen and (max-width: 599px) {
	.mod_pagination01 .links {
		display: block;
		margin: 0 auto;
		padding: 12px 0 42px;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination01 .links {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: 40px 0 100px;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}

@media screen and (max-width: 599px) {
	.mod_pagination01 li {
		display: inline-block;
	}
}

@media screen and (max-width: 599px) {
	.mod_pagination01 li.current:first-child {
        margin-right: -8px;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination01 li.current:first-child {
		margin-right: -10px;
	}
}

@media screen and (max-width: 599px) {
	.mod_pagination01 li:not(:first-of-type):not(:last-of-type):not(:nth-of-type(2)) {
        margin-top: 8px;
        margin-left: 8px;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination01 li:not(:first-of-type):not(:last-of-type):not(:nth-of-type(2)) {
		margin-left: 10px;
	}
}

@media screen and (max-width: 599px) {

	.mod_pagination01 li:nth-of-type(2),
	.mod_pagination01 li:last-of-type {
        margin-top: 8px;
		margin-left: 16px;
	}
}

@media screen and (min-width: 600px) {

	.mod_pagination01 li:nth-of-type(2),
	.mod_pagination01 li:last-of-type {
		margin-left: 20px;
	}
}
@media screen and (max-width: 599px) {
	.mod_pagination01 li.current:last-child {
        margin-left: 8px;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination01 li.current:last-child {
		margin-left: 10px;
	}
}
.mod_pagination01 li a,
.mod_pagination01 li span {
	display: block;
	border: 1px solid #0195d1;
}

@media screen and (max-width: 599px) {

	.mod_pagination01 li a,
	.mod_pagination01 li span {
		width: 28px;
		height: 28px;
		line-height: 28px;
		font-size: 1.2rem;
		letter-spacing: .072rem;
	}
}

@media screen and (min-width: 600px) {

	.mod_pagination01 li a,
	.mod_pagination01 li span {
		width: 38px;
		height: 38px;
		line-height: 38px;
		font-size: 1.5rem;
		letter-spacing: .009rem;
	}

	.mod_pagination01 li a:hover,
	.mod_pagination01 li span:hover {
		background-color: #0195d1;
		color: #fff;
		-webkit-transition: all .3s ease;
		transition: all .3s ease;
	}
}

.mod_pagination01 .prev a,
.mod_pagination01 .previous a {
	position: relative;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

@media screen and (min-width: 600px) {
    .mod_pagination01 .prev a:hover:after,
    .mod_pagination01 .previous a:hover:after {
		background: url("../img/common/ico_arw01.png") 0 0 no-repeat;
		background-size: 12px 7px;
	}
}

.mod_pagination01 .prev a:after,
.mod_pagination01 .previous a:after {
	display: block;
	position: absolute;
	content: "";
	-webkit-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

@media screen and (max-width: 599px) {
    .mod_pagination01 .prev a:after,
    .mod_pagination01 .previous a:after {
		top: 12px;
		left: -9px;
		width: 28px;
		height: 28px;
		background: url("../img/common/ico_arw01_sky.png") 0 0 no-repeat;
		background-size: 10px 5px;
	}
}

@media screen and (min-width: 600px) {
    .mod_pagination01 .prev a:after,
    .mod_pagination01 .previous a:after {
		top: 16px;
		left: -14px;
		width: 39px;
		height: 39px;
		background: url("../img/common/ico_arw01_sky.png") 0 0 no-repeat;
		background-size: 12px 7px;
	}
}

.mod_pagination01 .next a {
	position: relative;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

@media screen and (min-width: 600px) {
	.mod_pagination01 .next a:hover:after {
		background: url("../img/common/ico_arw01.png") 0 0 no-repeat;
		background-size: 12px 7px;
	}
}

.mod_pagination01 .next a:after {
	display: block;
	position: absolute;
	content: "";
}

@media screen and (max-width: 599px) {
	.mod_pagination01 .next a:after {
		top: 12px;
		left: 9px;
		width: 28px;
		height: 28px;
		background: url("../img/common/ico_arw01_sky.png") 0 0 no-repeat;
		background-size: 10px 5px;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination01 .next a:after {
		top: 16px;
		left: 14px;
		width: 39px;
		height: 39px;
		background: url("../img/common/ico_arw01_sky.png") 0 0 no-repeat;
		background-size: 12px 7px;
	}
}

.mod_pagination01 .current {
	background-color: #0195d1;
	color: #fff;
}

.mod_pagination02 {
	border-top: 1px solid #dce1e1;
}

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

@media screen and (min-width: 600px) {
	.mod_pagination02 .links {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
}

.mod_pagination02 li.prev,
.mod_pagination02 li.next {
	position: relative;
}

@media screen and (max-width: 599px) {

	.mod_pagination02 li.prev,
	.mod_pagination02 li.next {
		display: inline-block;
	}
}

@media screen and (min-width: 600px) {

	.mod_pagination02 li.prev,
	.mod_pagination02 li.next {
		display: inline-block;
	}

	.mod_pagination02 li.prev:hover,
	.mod_pagination02 li.next:hover {
		text-decoration: underline;
		-webkit-transition: all .3s ease;
		transition: all .3s ease;
	}
}

@media screen and (max-width: 599px) {
	.mod_pagination02 li.prev {
		float: left;
	}

	.mod_pagination02 li.prev a {
		padding: 19px 0 19px 20px;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination02 li.prev {
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
	}

	.mod_pagination02 li.prev a {
		padding-left: 33px;
	}
}

.mod_pagination02 li.prev a:after {
	display: block;
	position: absolute;
	content: "";
	-webkit-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

@media screen and (max-width: 599px) {
	.mod_pagination02 li.prev a:after {
		top: 25px;
		left: 0;
		width: 14px;
		height: 8px;
		background: url("../img/common/ico_arw01_sky.png") 0 0 no-repeat;
		background-size: 14px 8px;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination02 li.prev a:after {
		top: 9px;
		left: 0;
		width: 12px;
		height: 7px;
		background: url("../img/common/ico_arw01_sky.png") 0 0 no-repeat;
		background-size: 12px 7px;
	}
}

@media screen and (max-width: 599px) {
	.mod_pagination02 li.next {
		float: right;
		text-align: right;
	}

	.mod_pagination02 li.next a {
		padding: 19px 20px 19px 0;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination02 li.next {
		-webkit-box-ordinal-group: 4;
		-ms-flex-order: 3;
		order: 3;
	}

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

.mod_pagination02 li.next a:after {
	display: block;
	position: absolute;
	content: "";
}

@media screen and (max-width: 599px) {
	.mod_pagination02 li.next a:after {
		top: 25px;
		right: 0;
		width: 14px;
		height: 8px;
		background: url("../img/common/ico_arw01_sky.png") 0 0 no-repeat;
		background-size: 14px 8px;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination02 li.next a:after {
		top: 9px;
		right: 0;
		width: 12px;
		height: 7px;
		background: url("../img/common/ico_arw01_sky.png") 0 0 no-repeat;
		background-size: 12px 7px;
	}
}

@media screen and (max-width: 599px) {
	.mod_pagination02 li.archive {
		clear: both;
		width: 100%;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination02 li.archive {
		width: 160px;
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2;
	}
}

.mod_pagination02 li.archive a {
	background-color: #0195d1;
	color: #fff;
	text-align: center;
}

@media screen and (max-width: 599px) {
	.mod_pagination02 li.archive a {
		padding: 18px 15px;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination02 li.archive a {
		padding: 14px 20px 13px;
	}

	.mod_pagination02 li.archive a:hover {
		background-color: #0c2b55;
		-webkit-transition: all .3s ease;
		transition: all .3s ease;
	}
}

.mod_pagination02 li a {
	display: block;
}

@media screen and (max-width: 599px) {
	.mod_pagination02 li a {
		font-size: 1.2rem;
		letter-spacing: .072rem;
	}
}

@media screen and (min-width: 600px) {
	.mod_pagination02 li a {
		font-size: 1.5rem;
		letter-spacing: .09rem;
	}
}

/*
#styleguide
mod_pagination01

pager

```
<div class="mod_pagination01">
	<ul class="links">
	<li class="prev"><a href="">前へ</a></li>
	<li><a href="">1</a></li>
	<li class="current"><span>2</span></li>
	<li><a href="">3</a></li>
	<li class="next"><a href="">次へ</a></li>
	</ul>
</div>
```
*/

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