@charset "utf-8";

/* ================= */
/* 要素のリセット    */
/* ================= */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

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

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

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

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

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

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* ================= */
/* Base             */
/* ================= */
* {
  box-sizing: border-box;
}

img {
  vertical-align: bottom;
}

a:link {
  color: black;
  text-decoration: none;
  transition: color 0.5s;
}
a:visited {
  color: black;
}
a:hover {
  color: red;
}
a:active {
  color: red;
}


/* ================= */
/* layout           */
/* ================= */
#layout-header,#layout-footer,#layout-main {
  background: white;
  color: black;
  font-size: 62.5%;
  line-height: 1.7;
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

#layout-header,#layout-main,#layout-footer {
  width: 100%;
  max-width: 100%;
  text-align: center;
}

/* ================= */
/* module           */
/* ================= */
#layout-header img {
   width: 960px;
   max-width: 100%;
   height: auto;
}

.midashi {
   width: 50%;
   margin: 3em auto;
   padding: 0 0.5em;
   border-left: double 7px #ffafc8;
   border-right: double 7px #ffafc8;
   font-size: 1rem;
}

.category,.brand,.shareBtn {
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
  padding: 3em 0.5em;
  text-align: center;
  font-size: 1rem;
}
.shareBtn {
   padding: 3em 0.5em 1em 0.5em;
}


.wrap-category {
   margin: 3em 0;
}
.wrap-category:last-child {
   margin: 0;
}
.wrap-category img {
   width: 960px;
   max-width: 100%;
}
.category_link {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
a.category_link_item,a.category_link_item_b {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 50%;
   max-width: 100%;
   position: relative;
   padding: 0.8em 0;
   background: #d9d9d9;
   border: solid 1px black;
   font-weight: bold;
   font-size: 1rem;
   letter-spacing: 0.1em;
}
a.category_link_item_b {
   width: 100%;
}
.category_link_item+.category_link_item+.category_link_item {
   border-top: none;
}
a.category_link_item::after,a.category_link_item_b::after {
   content: '';
   display: inline-block;
   position: absolute;
   width: 12px;
   height: 12px;
   right: 20px;
   margin: 0 0 0 0;
   border-bottom: 3px solid #404041;
   border-right: 3px solid #404041;
   transform: rotate(45deg);
}
a.category_link_item:hover,.category_link_item_b:hover {
  opacity: 0.7;
}


.wrap-brand {
   display: flex;
   flex-wrap: wrap;
}
.brand_link {
   width: calc(100%/3);
   padding-right: 10px;
   margin-top: 1em;
}
.brand_link_item img {
   width: 100%;
   max-width: 100%;
   height: auto;
}
.brand_link_item:hover {
   opacity: 0.7;
}

h2 {
   margin-bottom: 1.5em;
   font-size: 1.5rem;
}
h3 {
   margin-bottom: 0.5em;
   font-size: 1.3rem;
}
.margin_t_2em {
   margin-top: 2em;
}
.sp {
   display: none;
}


/*** シェアボタン ***/
.shareBtn a:link {
   color: white;
}
.shareBtn a:visited {
   color: white;
}
.btn-social-square {
   display: inline-block;
   text-decoration: none;
   width: 50px;
   margin:2px;
   height: 50px;
   line-height: 50px;
   font-size: 23px;
   border-radius: 12px;
   text-align: center;
   overflow: hidden;
   font-weight: bold;
}
.btn-social-square i {
   line-height:50px;
}
.btn-social-square--twitter {
   background: #22b8ff;
   font-family: "Font Awesome 5 Brands";
}
.btn-social-square--facebook {
   background: #6680d8;
   font-family: "Font Awesome 5 Brands";
}
.btn-social-square--hatebu {
   background: #49a8fb;
}
.btn-social-square--pocket {
   background: #ff6d82;
   font-family: "Font Awesome 5 Brands";
}
.btn-social-square--feedly {
   background: #7bda72;
   font-family: "Font Awesome 5 Brands";
}


/*** フッタ ***/
#layout-footer {
   background: #333333;
   padding: 5px;
}
#layout-footer p {
   color: white;
   font-size: 0.8rem;
}
#layout-footer a:link {
  color: white;
  text-decoration: none;
  transition: color 0.5s;
}
#layout-footer a:visited {
  color: white;
}
#layout-footer a:hover {
  color: red;
}


@media screen and (max-width: 880px) {
   .midashi {width: 90%; margin: 1em auto; font-size: 0.9rem;}
   .brand_link {width: calc(100%/2);}
}

@media screen and (max-width: 600px) {
   .wrap-category {margin: 2em 0;}
   a.category_link_item,a.category_link_item_b {font-size: 0.9rem;}
   a.category_link_item::after,a.category_link_item_b::after {width: 9px; height: 9px; right: 10px;}
   .wrap-brand {flex-direction: column;}
   .brand_link {width: 100%; padding-right: 0;}
   h2 {font-size: 1.3rem;}
   h3 {font-size: 1rem;}
   .sp {display: block;}
   .shareBtn {padding: 1em 0.5em;}
}

@media screen and (max-width: 320px) {
   a.category_link_item::after,a.category_link_item_b::after {display: none;}
}