@charset "utf-8";

* {
padding: 0;
margin: 0;
}

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

html {
height: 100%;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-style:normal;
font-weight: normal;
font-size: 100%;
vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

img{
vertical-align: top;
line-height: 0;
margin:0;
padding:0;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

input, textarea{
margin: 0;
padding: 0;
}

ol, ul{
list-style:none;
}

li {
list-style-type: none;
}

table{
border-collapse: collapse;
border-spacing:0;
}

table td {
border-collapse: collapse;
}

caption, th{
text-align: left;
}

a:focus {
outline:none;
}

.inline_block {
display: inline-block;
*display: inline;
*zoom: 1;
}

input{
-webkit-appearance: none;
}

input[type="checkbox"]{
-webkit-appearance: checkbox;
}

input[type="radio"]{
-webkit-appearance: radio;
}

button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
font: initial;
}

button, input, select, textarea {
font-family : inherit;
font-size   : 100%;
}

/*------ 回り込み解除 ------*/
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
min-height: 1px;
}

.both{
clear:both;
}

/*-------------------------------------------
float・回り込み解除
-------------------------------------------*/
.clfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.both{
clear:both;
}
.img_center {
display: block;
margin: 0 auto;
max-width: 100%;
}
.img_left {
float: left;
padding: 20px;
max-width: 50%;
}
.img_right {
float: right;
padding: 20px;
max-width: 50%;
}
@media screen and (max-width:768px) {
.img_right,.img_left {
float: none;
margin: 0 auto;
}
}

/*------------------------------------------
表示・非表示
------------------------------------------*/
.pc {display: block !important;}
.tb {display: none !important;}
.sp {display: none !important;}

@media screen and (max-width:960px) {
.pc {display: none !important;}
.tb {display: block !important;}
.sp {display: none !important;}
}

@media screen and (max-width:460px) {
.pc {display: none !important;}
.tb {display: none !important;}
.sp {display: block !important;}
}


/* ----------------------------------------
エフェクト
-------------------------------------------*/
.effect {
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha( opacity=0 )";
transform: translateY(20px);
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-webkit-transition: 1.0s ease-out;
-moz-transition: 1.0s ease-out;
transition: 1.0s ease-out;
}
.effect.d_02 {
transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
}
.effect.d_04 {
transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
}
.effect.d_06 {
transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
}
.effect.d_08 {
transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
}
.effect.start {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha( opacity=100 )";
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
}

/* ----------------------------------------
loader
------------------------------------------- */
.loader-wrap {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 10000;
background-color: #000;
}
.loader {
color: #888;
font-size: 40px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 72px auto;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
5%, 95% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
10%, 59% {box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;}
20% {box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;}
38% {box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;}
100% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
}
@keyframes load6 {
0% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
5%, 95% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
10%, 59% {box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;}
20% {box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;}
38% {box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;}
100% {box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;}
}
@-webkit-keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}