@charset "utf-8";
@media all and (max-width: 750px) and (min-width: 0px) {

/* RESET
-------------------------------------------------------------- */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-width: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]){
    display:none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]){
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}


.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

img { border:none; }
.sphide {	display:none;}
.spbr { display: block; }

/* -------------------------------------------------------------- */

  body { font-family: "Noto Sans JP"; background-color: #F2F2F2; color: #333333; font-size: 3.5vw; line-height: 1.6; }
  a { cursor: pointer; }
  header { width: 100%; background-color: #FF3E5F; }
  header h1 { text-align: center; font-size: 5vw; font-weight: bold; padding: 2%; letter-spacing: 2px; color: #fff; }
  header div.title { text-align: center; font-size: 5vw; font-weight: bold; padding: 2%; letter-spacing: 2px; color: #fff; }
  #wrapper { }
  #wrapper .contents { width: 95%; margin-left: auto; margin-right: auto; padding: 2% 3%; background-color: #FCF2F2; border-radius: 10px; margin-top: 3%; margin-bottom: 4%; }
  #wrapper .contents h2 { font-weight: bold; font-size: 5vw; line-height: 1.6; color: #FF3E5F; }
  #wrapper .contents h1.ren { font-weight: bold !important; font-size: 5vw !important; line-height: 1.6 !important; color: #FF3E5F !important; }
  #wrapper .contents .date { text-align: right; font-size: 3.5vw; margin-bottom: 2%; padding-top: 1%; }
  #wrapper .contents .date span { padding-right: 1vw; }
  #wrapper .contents h3 { background-color: #FF3E5F; color: #fff; font-size: 4vw; line-height: 1.5; padding: 2% 4%; }
  #wrapper .contents h2.ren { background-color: #FF3E5F; color: #fff; font-size: 4vw; line-height: 1.5; padding: 2% 4%; }
  #wrapper .contents h3 span { padding-right: 1vw; }
  #wrapper .contents h2.ren span { padding-right: 1vw; }
  #wrapper .contents p { line-height: 1.6; font-size: 3.6vw; padding-top: 2%; padding-bottom: 5%; margin-bottom: 5%; }
  #wrapper .contents p.read { padding-bottom: 0px; margin-bottom: 5%; }
  #wrapper .contents .twitter { margin-bottom: 5%; }
  #wrapper .contents .af { margin-top: -4%; }
  #wrapper .contents .af ul { font-family: icomoon; }
  #wrapper .contents .af ul li { width: 100%; float: left; margin-right: 1%; margin-bottom: 1%; }
  #wrapper .contents .af ul li.amazon { background-color: #fff; padding: 3%; border-radius: 5px; }
  #wrapper .contents .af ul li.amazon a { line-height: 1; padding-left: 8vw; }
  #wrapper .contents .af ul li.amazon .icon-amazon- { font-size: 6vw; position: absolute; }
  #wrapper .contents .af ul li.rakuten { background-color: #fff; padding: 3%; border-radius: 5px; }
  #wrapper .contents .af ul li.rakuten a { line-height: 1; padding-left: 8vw; }
  #wrapper .contents .af ul li.rakuten .icon-rakuten- { font-size: 6vw; position: absolute; }
  #wrapper .contents .af ul li.yahoo { background-color: #fff; padding: 3%; border-radius: 5px; }
  #wrapper .contents .af ul li.yahoo a { line-height: 1; padding-left: 8vw; }
  #wrapper .contents .af ul li.yahoo .icon-yahoo- { font-size: 6vw; position: absolute; }
  #wrapper .contents h4 { margin-top: 30px; margin-bottom: 10px; border-bottom: solid 1px ; font-size: 5vw; padding-bottom: 5px;}
  #wrapper .contents h2.kanren { margin-top: 30px !important; margin-bottom: 10px !important; border-bottom: solid 1px !important; font-size: 5vw !important; padding-bottom: 5px !important;}
  #wrapper .contents .card { width: 95%; background-color: #fff; border-radius: 6px; margin-top: 1%; margin-bottom: 5%; padding: 5%; margin-left: auto; margin-right: auto; }
  #wrapper .contents .card p { padding-bottom: 0; margin-bottom: 0; }
  #wrapper .contents .card2 { width: 100%; background-color: #fff; border-radius: 6px; margin-top: 1%; margin-bottom: 2%; padding: 2%; }
  #wrapper .contents .card2 h5 { font-weight: bold; }
  #wrapper .contents .card2 h6 { text-align: center; padding-top: 2%; padding-bottom: 2%; }
  #wrapper .contents .card2 h6 img { height: auto; width: 100%; }
  #wrapper .contents .card2 p { padding-bottom: 0px; margin-bottom: 0; }
  #wrapper .contents .card2 a {}
  #wrapper #google-ad { width:90%; margin-left: auto; margin-right: auto; }
  #wrapper .side { width: 95%; margin-left: auto; margin-right: auto; background-color: #FCF2F2; border-radius: 10px; margin-top: 3%; margin-bottom: 5%; padding: 3%; }
  #wrapper .side h3 { font-weight: bold; font-size: 4vw; border-bottom: solid 1px #FF3E5F; margin-bottom: 5%; padding-bottom: 1%; color: #FF3E5F; }
  #wrapper .side h2.kate { font-weight: bold !important; font-size: 4vw !important; border-bottom: solid 1px #FF3E5F !important; margin-bottom: 5% !important; padding-bottom: 1% !important; color: #FF3E5F !important; }
  #wrapper .side .cate li { font-size: 4vw; line-height: 2; padding-left: 3%; }
  #wrapper .side .cate li.icon-circle-right:before {
    content: "\ea42";
    color: #333333;
    padding-right: 2vw;
    font-size: 3.3vw;
  }
  #wrapper .side .cupramen li { padding-bottom: 3%; padding-left: 1%; padding-right: 2%; }
  #wrapper .side .cupramen li a { text-decoration: underline; font-size: 3.3vw; }
  #wrapper .side .cupramen {}
  div.easyLink-box div.easyLink-img p.easyLink-img-box span > img { width: auto !important; }
  .pagen {
    clear: both;
    text-align: center;
    letter-spacing: 1px;
    padding-top: 5%;
    padding-bottom: 5%;
    font-size: 3.5vw;
  }
  .pagen a { text-decoration: underline; padding-left: 1%; padding-right: 1%; }
  .pagen span { padding-left: 1%; padding-right: 1%; }
  
  footer { background-color: #fff; }
  footer ul.nav { padding-top: 2%; padding-bottom: 3%; line-height: 1.5; padding-left: 3%; padding-right: 3%; }
  footer ul.nav li { float: left; line-height: 1.6; }
  footer ul li::after { content: '＞'; font-size: 4vw; padding-left: 2vw; padding-right: 2vw; }
  footer ul li:last-child::after { content: ''; }
  footer .copyright { clear: both; text-align: center; padding: 1%; font-size: 3vw; background-color: #FF3E5F; }
  footer .copyright div { padding-bottom: 3%; }
  footer .copyright a { color:#333333; text-decoration: none; }
  
  
/* -------------------------------------------------------------- */
  
  body.book {}
  body.book .af { width: 90%; margin-left: auto; margin-right: auto; }
  body.book .b_amazon { text-align: center; width: 90%; margin-left: auto; margin-right: auto; margin-top: 4%; }
  body.book .b_amazon a { width: 100%; padding: 3%; background-color: #F3A322; color: #fff; display: block; border-radius: 6px; font-size: 4vw; border: solid 2px #fff; }
  body.book .b_comic { width: 100%;  }
  body.book .b_comic a { width: 100%; padding: 3%; text-align: center; background-color: #F3A322; color: #fff; display: block; border-radius: 6px; font-size: 4vw;  border: solid 2px #fff;}
  body.book .b_unext { width: 100%; }
  body.book .b_unext a { width: 100%; padding: 3%; text-align: center; background-color: #3a3938; color: #fff; display: block; border-radius: 6px; font-size: 4vw; border: solid 2px #fff; }
  body.book .b_zenkan { width: 100%; }
  body.book .b_zenkan a { width: 100%; padding: 3%; text-align: center; background-color: #1d9bf0; color: #fff; display: block; border-radius: 6px; font-size: 4vw; border: solid 2px #fff; }
  body.book .b_itudemo { width: 100%; }
  body.book .b_itudemo a { width: 100%; padding: 3%; text-align: center; background-color: #7c3f17; color: #fff; display: block; border-radius: 6px; font-size: 4vw; border: solid 2px #fff; }
  body.book .b_abema { width: 100%; }
  body.book .b_abema a { width: 100%; padding: 3%; text-align: center; background-color: #2b9b34; color: #fff; display: block; border-radius: 6px; font-size: 4vw;  border: solid 2px #fff;}
  body.book .b_sukima { width: 100%; }
  body.book .b_sukima a { width: 100%; padding: 3%; text-align: center; background-color: #c53e2c; color: #fff; display: block; border-radius: 6px; font-size: 4vw; border: solid 2px #fff; }
  body.book .b_houdai { width: 100%; }
  body.book .b_houdai a { width: 100%; padding: 3%; text-align: center; background-color: #e5dc3f; color: #2e2c2d; display: block; border-radius: 6px; font-size: 4vw; border: solid 2px #fff; }
  body.book .b_kindle { width: 100%; margin-bottom: 5%; }
  body.book .b_kindle a { width: 100%; padding: 3%; text-align: center; background-color: #3a3938; color: #F3A322; display: block; border-radius: 6px; font-size: 4vw; border: solid 2px #fff; }
  body.book .side .card {}
  body.book .side .card a { background-color: #fff; border-radius: 10px; display: block; padding: 5%; margin-bottom: 3%; }
  body.book .side .card h5 { font-size: 4vw; }
  body.book .side .card p { text-align: right; font-size: 3vw; }
  body.book .side h3.akasatana { margin-top: 10%; }
  body.book .side ul.akasatana li { float: left; padding: 3vw 5vw; font-size: 5vw; }
  body.book .side ul.akasatana li:nth-child(5n+1) { clear: both; }
  
}