/*  04_modules
================================================ */
/*!  animation
================================================ */
.fadeUp { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 0.8s ease; transition: all 0.8s ease; }

.fadeUp.is_show { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

.is_delay10 { -webkit-transition-delay: 1s; transition-delay: 1s; }

.is_delay11 { -webkit-transition-delay: 1.1s; transition-delay: 1.1s; }

.is_delay12 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }

.is_delay13 { -webkit-transition-delay: 1.3s; transition-delay: 1.3s; }

.is_delay14 { -webkit-transition-delay: 1.4s; transition-delay: 1.4s; }

.is_delay15 { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }

.is_delay16 { -webkit-transition-delay: 1.6s; transition-delay: 1.6s; }

.is_delay17 { -webkit-transition-delay: 1.7s; transition-delay: 1.7s; }

.is_delay18 { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; }

.is_delay19 { -webkit-transition-delay: 1.9s; transition-delay: 1.9s; }

.is_delay20 { -webkit-transition-delay: 2s; transition-delay: 2s; }

.is_delay21 { -webkit-transition-delay: 2.1s; transition-delay: 2.1s; }

.is_delay22 { -webkit-transition-delay: 2.2s; transition-delay: 2.2s; }

.is_delay23 { -webkit-transition-delay: 2.3s; transition-delay: 2.3s; }

.is_delay24 { -webkit-transition-delay: 2.4s; transition-delay: 2.4s; }

/*!  bg
================================================ */
/*
Background

mod_bg_gradation
 
.mod_bg_gradation
 
Markup:
<p class="mod_bg_gradation" style="width:100px;height:100px; ">Title</p>
 
Styleguide 3.0.0
*/
.mod_bg_gradation { background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), color-stop(50%, #f7f7f7)); background: linear-gradient(#fff 50%, #f7f7f7 50%); }

/*!  tit
================================================ */
/*
Button

mod_btn01
 
.mod_btn01 -base style
.mod_btn01.is_white -is_white
 
Markup:
<p class="mod_btn01 {$modifiers}"><a href="#">Button</a></p>
 
Styleguide 2.0.0
*/
.mod_btn01 a { display: block; padding: 10px; background: #333; color: #fff; font-size: 1.5rem; line-height: 1.2; text-align: center; border: 1px solid #333; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

@media screen and (min-width: 600px) { .mod_btn01:hover { background: #fff; color: #333; } }

.mod_btn01.is_white a { background: #fff; color: #333; }

@media screen and (min-width: 600px) { .mod_btn01.is_white:hover { background: #333; color: #fff; } }

/*!  table
================================================ */
/*
Table

mod_table01
 
.mod_table01            - Base styles
.mod_table01.is_white            - is_white
 
Markup:
<div class="mod_table01 {$modifiers}">
	<table><tbody>
		<tr>
			<th></th>
			<td></td>
		</tr>
	</tbody></table>
</div>
 
Styleguide 4.0.0
*/
@media screen and (max-width: 599px) { .mod_table01 table, .mod_table01 thead, .mod_table01 tbody, .mod_table01 tr, .mod_table01 th, .mod_table01 td { display: block; } }

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

mod_tit01

.mod_tit01            - Base styles
.mod_tit01.is_white            - is_white

Markup:
<p class="mod_tit01 {$modifiers}">Title</p>

Styleguide 1.0.0
*/
.mod_tit01 { text-align: center; }

.mod_tit01 img { width: 85px; }

@media screen and (min-width: 600px) { .mod_tit01 { position: absolute; top: 50px; left: 50px; }
  .mod_tit01 img { width: 120px; } }

@media screen and (min-width: 600px) { .mod_tit01.is_right { top: 50px; left: auto; right: 50px; } }

.mod_tit02 { line-height: 1.2; color: #fff; text-align: center; }

.mod_tit02 .jp { font-weight: 500; font-size: 3.2rem; letter-spacing: .06em; }

.mod_tit02 .eng { font-weight: 500; display: inline-block; font-size: 1rem; letter-spacing: .14em; }

@media screen and (min-width: 600px) { .mod_tit02 .jp { font-weight: bold; font-size: 5rem; }
  .mod_tit02 .eng { font-size: 1.4rem; margin-top: 14px; } }

.mod_tit02.is_black { color: #333; }

.mod_tit02.is_small .jp { font-size: 2rem; }

.mod_tit02.is_small .eng { font-size: 1rem; }

@media screen and (min-width: 600px) { .mod_tit02.is_small .jp { font-size: 3.2rem; }
  .mod_tit02.is_small .eng { font-size: 1.4rem; margin-top: 10px; } }
