@charset "utf-8";

@import url('//fonts.googleapis.com/earlyaccess/notosansjapanese.css');

/*****************************************************************************
reset 
*****************************************************************************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
}

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

em,strong,th,address {
font-style: normal;
font-weight: normal;
text-align: left;
}

h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}

img,
object,
embed {
border: 0;
vertical-align: top;
}

img {
max-width: 100%;
height: auto;
}

hr {
display: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
font-size: 100%;
}

li {
list-style-type: none;
}

strong {
font-weight: bold;
}

/*****************************************************************************
linkColor 
*****************************************************************************/

a:link {
color: #1e2432;
text-decoration: none;
}

a:visited {
color: #1e2432;
text-decoration: none;
}

a:hover,a:active {
text-decoration: underline;
}

/*****************************************************************************
clearfix 
*****************************************************************************/

.cb {
clear: both;
font-size: 1%;
height: 0;
line-height: 0;
}

.clearfix:after {
content: ".";
display: block;
height: 0.1px;
font-size: 0.1em;
line-height: 0; 
clear: both;
visibility: hidden; 
}

.clearfix {
display: inline-block;
}

/* Hide from IE-mac \*/

* html .clearfix { height: 1%; }
.clearfix { display:block; }

/* End hide from IE-mac */

/*****************************************************************************
base
*****************************************************************************/

html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
}
body {
font-family: "Noto Sans Japanese", sans-serif;
line-height: 1.5;
font-size: 1.5rem;
color: #1e2432;
}
.logo {
width: 120px;
margin-bottom: 50px;
}
@media screen and (max-width: 670px) {
.logo {
width: 80px;
margin-bottom: 25px;
}
}
.catalog-list {
padding: 50px;
}
@media screen and (max-width: 670px) {
.catalog-list {
padding: 25px;
}
}
.catalog-list ul {
display: flex;
flex-wrap: wrap;
}
.catalog-list li {
width: 25%;
cursor: pointer;
}
@media screen and (max-width: 900px) {
.catalog-list li {
width: 50%;
}
}
.catalog-list li img {
transition: 0.6s;
}
.catalog-list li:hover img {
opacity: 0.5;
}
.catalog-list li.extra {
width: 50%;
}
@media screen and (max-width: 900px) {
.catalog-list li.extra {
width: 100%;
}
}