@charset "utf-8";

@import "style.css";

@import "font.css";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap');

/*--------------------初期化--------------------*/

body{
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
width:100%;
font-size: 0px;
font-family: 'Noto Sans JP', sans-serif;
}

body {
animation: fadeIn 0.6s ease 0s 1 normal;
-webkit-animation: fadeIn 0.6s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

.menuIn{
animation-fill-mode:both;
animation-duration:0.4s; 
animation-name: menuIn;
display: block!important
}

@keyframes menuIn {

0% { opacity: 0;  }
100% { opacity: 1;}

}

*{
margin:0px;
padding:0px;
box-sizing:border-box;
}

img{
max-width:100%;
display:block;
}

a{
transition: 0.2s;
text-decoration:none;
}

a.full{
width: 100%;
height: 100%;
top:0px;
left: 0px;
position: absolute;
}

a:hover{
cursor:pointer;
text-decoration:none;
}

div.contener{
width: 100%;
max-width: 700px;
margin: 0px auto;
background-color: #f6f6f6;
}

/*--------------------menu--------------------*/

a.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
position: relative;
}

a.menu-trigger {
position: absolute;
width: 22px;
height: 18px;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}

a.menu-trigger span {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}

a.menu-trigger span:nth-of-type(2) {
top: 9px;
}

a.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(9px) rotate(-45deg);
transform: translateY(9px) rotate(-45deg);
}

a.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

a.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-9px) rotate(45deg);
transform: translateY(-9px) rotate(45deg);
}

/*--------------------breadcrumb--------------------*/

ol {
display: block;
font-size: 11px;
padding: 0px 20px 30px 20px;
}

ol li{
display:inline-block;
vertical-align: middle
}

ol li:after{
content: '»';
padding: 0 3px;
color:#999
}

ol li:last-child:after{
content: '';
}

ol li a {
text-decoration: none;
color: #000;
}

ol li:first-child a{
background: url(../img/icon/home.png) no-repeat left center;
background-size: 15px;
padding-left: 20px;
}

ol li a:hover {
text-decoration: underline;
}

span.name{
width: 130px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
text-overflow: ellipsis; /* 末尾に「…」を付加する */
}

/*--------------------pager--------------------*/

ul#pager{
text-align: center;
font-family: 'Barlow Condensed', sans-serif;
margin: 40px 0px 40px 0px;
font-size:15px;
}

ul#pager li{
height:50px;
min-width: 40px;
display: inline-block;
border:solid 1px #efefef;
line-height: 50px;
}

a.next{
padding: 0px 10px 0px 10px;
}

ul#pager li a{
display: block;
width:100%;
height:100%;
color:#999
}

a.current{
display: block;
background: #444;
color:#fff!important;
font-weight: bold;
}

span.dot{
color:#999;
display: inline-block;
margin: 0px 5px 0px 5px;
}