@charset "UTF-8";
/* CSS Document */

/*reset css*/
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  vertical-align:baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

main, article, aside, header, canvas, details, figcaption, figure, footer, nav, section, summary {
display: block;box-sizing: border-box;
}

body {
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
 display: flex;
  flex-flow: column;
  min-height: 100vh;
}
main{flex: 1;}

ol, ul {
  list-style: none;
  list-style-type: none;
}


/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:block;
    overflow:hidden;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

/*extra css*/

img{vertical-align: bottom;}

a img{
    border-style:none;
    }

/*font size css*/
html{
    font-size:62.5%;
    }

h1{
    font-size:3vw;
    }
h2{
    font-size:2vw;
}

.pd5{padding:5px;}
.pd10{padding:10px;}
.mg5{margin:5px;}
.mg10{margin:10px;}
.pd10-t{padding-top:10px;}
.pd10-b{padding-bottom:10px;}
.pd20-b{padding-bottom:20px;}
.mg10-b{margin-bottom:10px;}
.fb{font-weight: bold;}
.f60r{font-size:0.6rem;}
.f80r{font-size:0.8rem;}
.f100r{font-size:1rem;}
.f120r{font-size:1.2rem;}
.f140r{font-size:1.4rem;}
.f160r{font-size:1.6rem;}
.f180r{font-size:1.8rem;}
.f200r{font-size:2rem;}
.lh150{line-height:150%;}
.lh200{line-height:200%;}
.lh250{line-height:250%;}
.lh300{line-height:300%;}
.op60{opacity:0.6; }
.op70{opacity:0.7; }
.op80{opacity:0.8; }
.tx-c{text-align:center;}

.fl{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
}

.f-w{-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;}

.w25{width:25%;height:auto;}
.w30{width:30%;height:auto;}
.w33{width:33%;height:auto;}
.w50{width:50%;height:auto;}
.w70{width:70%;height:auto;}
.w100{width: 100%;height: auto;}

@media screen and (max-width:768px){
.w25{width:100%;height:auto;}
.w30{width:100%;height:auto;}
.w33{width:100%;height:auto;}
.w50{width:100%;height:auto;}
.w70{width:100%;height:auto;}
}

.po-ab{position:absolute;}

.po-re{position: relative;}

.fuwafuwa {
    animation: purupuru 2s linear infinite;
} 
/* fuwafuwa */
@keyframes purupuru {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  20%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  50%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  65%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  80%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.yurayura {
    animation: yurayura 2s linear infinite;
}

@keyframes yurayura {
    0% {
        transform: rotate(10deg);//時計回りに20度傾いた状態からスタート
    }
    50% {
        transform: rotate(-10deg);//反時計回りに20度まで回転
    }
    100% {
        transform: rotate(10deg);//時計回りに20度の位置まで回転
    }
}

/* pager */

.pagination .nav-links {
	text-align: center;
     background:#fafafa;
}
.pagination .nav-links .current {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 8px;
	border: 1px solid #ffb100;
	border-radius: 50%;
	background: #ffb100;
	color: #fff;
	font-size: 1.4rem;
	line-height: 30px;
}
.pagination .nav-links .dots {
	display: inline-block;
	margin: 8px;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 30px;
}
.pagination .nav-links a.page-numbers {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 8px;
	border: 1px solid #ffb100;
	border-radius: 50%;
	font-size: 1.4rem;
	text-decoration: none;
	line-height: 30px;
}
.pagination .nav-links a.page-numbers:hover {
	background: #ffb100;
	color: #fff;
	transition: all .3s;
}
.pagination .nav-links a.prev.page-numbers,
.pagination .nav-links a.next.page-numbers {
	width: auto;
	padding-right: 6px;
	padding-left: 6px;
	border: 0;
	border-bottom: 1px solid #ffb100;
	border-radius: 0;
	background: transparent;
}
.pagination .nav-links a.prev.page-numbers:hover,
.pagination .nav-links a.next.page-numbers:hover {
	background: #ffb100;
	color: #fff;
}