/*=============================================================
 04_modules
=============================================================*/

/*!  枠内にfitするimg ※高さは各箇所で設定
================================================ */

/*
#styleguide
mod_btn01

```
<div class="imgFitBox"><img src=""></div>
```
*/

.imgFitBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover; object-position: center;';
}


/*!  button
================================================ */
/*
#styleguide
mod_btn01

```
<div class="mod_btn01"><a href="#">テキスト</a></div>
```
*/

.mod_btn01 {
	width: 270px;
}

.mod_btn01 a {
  position: relative;
  display: block;
  padding: 15px 0;
  text-align: center;
}

.mod_btn01 a:before {
  content: "";
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.05);
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: right center 0;
          transform-origin: right center 0;
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0s, -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

.mod_btn01 a:after {
  content: "";
  z-index: 2;
  display: block;
  position: absolute;
  top: 45%;
  right: 31px;
  margin-top: -3px;
  width: 6px;
  height: 11px;
  -webkit-transition: .3s;
  transition: .3s;
}

.mod_btn01 a span {
  z-index: 2;
  position: relative;
	line-height: 1.8;
}

.mod_btn01 a:hover:before {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transform-origin: left center 0;
          transform-origin: left center 0;
}

.mod_btn01 a:hover:after {
  right: 21px;
}


/* color */
.mod_btn01.navy {
	color: #1f364d;
	border: 2px solid #1f364d;
}
.mod_btn01.navy span {
	color: #1f364d;
}
.mod_btn01.navy a:after {
  background: url(../image/ico_arrow01.png) no-repeat;
}

.mod_btn01.white {
	color: #fff;
	border: 2px solid #fff;
}
.mod_btn01.white span {
	color: #fff;
}
.mod_btn01.white a:after {
  background: url(../image/ico_arrow02.png) no-repeat;
}

_:lang(x)::-ms-backdrop, .mod_btn01 a {
	padding: 18px 0 12px;
}


/*!  mod_tit01
================================================ */
/*
#styleguide
mod_tit01

```
<h2 class="mod_tit01 mainTit"><span class="oswald">テキスト</span>テキスト</h2>
```
*/

.mod_tit01 {
	text-align: center;
	font-weight: bold;
	font-size: 2rem;
	line-height: 1.45;
	margin-bottom: 45px;
}

.mod_tit01 span {
	display: block;
	font-size: 6rem;
	font-weight: normal;
	letter-spacing: 1px;
}



/*!  pager
================================================ */
/*
#styleguide
mod_pagination01

pager

```
```
*/

.mod_pagination01 {
	display: table;
	margin: 50px auto 0;
}

.mod_pagination01 li {
	color: #fff;
	float: left;
	height: 50px;
	width: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 1.6rem;
	background: #c2c4c6;
}

.mod_pagination01 li + li {
	margin-left: 5px;
}

.mod_pagination01 li a {
	color: #fff;
	height: 100%;
	display: block;
}

.mod_pagination01 li span{
	display: block;
}

.mod_pagination01 a.link_next,
.mod_pagination01 a.link_before {
	font-size: 0;
}

.mod_pagination01 a.link_next,
.mod_pagination01 a.link_before {
	background-position: center;
	background-repeat: no-repeat;
}

.mod_pagination01 a.link_before {
	background-image: url(../image/ico_arrow04.png);
}

.mod_pagination01 a.link_next {
	background-image: url(../image/ico_arrow05.png);
}

.mod_pagination01 li .current_page,
.mod_pagination01 li a:hover {
	background-color: #1f364d;
}