@charset "utf-8";
@import url('html5reset-1.6.1.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@300;400;500;600;700&display=swap');

@media print{
  body::after{ display:none; }
  #loader-bg,#t-mv:before{ display:none; }
}

:root {
  --head-height:8rem;
  --color-green: #00a34e;
  --color-green2: #7ac177;
  --color-base: #d00e28;
  --color-base2: #00b2de;
  --color-bg1:#FDF6F6;
  --color-bg2:#F9F9F9;
  --color-bg3:#ebe8e5;
  --color-imp: #b76771;

  --ease-out:cubic-bezier(0.33, 1, 0.68, 1);

  --hover-brightness:brightness(1.1) saturate(130%);
  --hover-brightness2:brightness(1.3) saturate(130%);
  --hover-brightness3:brightness(1.02) opacity(85%) saturate(140%);
  --tra1:.5s cubic-bezier(0.33, 1, 0.68, 1);

  --f-go:"Jost", "IBM Plex Sans JP", sans-serif;
  --jp-go:"IBM Plex Sans JP", sans-serif;
  --en-go:"Jost", sans-serif;
  /*Zen Kaku Gothic New*/
}

.en-go{ font-family: var(--en-go); }

@keyframes fadeIn {
    0% { opacity:0; transform:translateY(2rem); }
    to { opacity:1; transform:translateY(0); }
}
@keyframes fade {
  0% {opacity: 0;}
  100% {opacity: 1; }
}
@keyframes fade2 {
  0% {opacity: 0; transform: translateY(8vh);}
  100% {opacity: 1;  transform: translateY(0); }
}
@keyframes scale {
  0% {opacity: 0; transform: scale(1.2);}
  100% {opacity: 1;  transform: scale(1); }
}
@keyframes UpAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 0;
  transform: translateY(-70px);
  }
}
@keyframes DownAnime{
  from {
    opacity: 0;
  transform: translateY(-70px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
@keyframes line{
  0% { left: 0; width: 100%;}
  45% { left: 100%; width: 0;}
  55% { left: 0; width: 0;}
  100% { left: 0; width: 100%; }
}
@keyframes line2{
  0% { right: 0; width: 2rem;}
  45% { right: 0; width: 0;}
  55% { right: 2rem; width: 0;}
  100% { right: 0; width: 2rem; }
}
@keyframes insetWipeIn {
    0% {
        clip-path: inset(0 0 0 100%)
    }
    to {
        clip-path: inset(0 0 0 0)
    }
}
@keyframes insetWipeOut {
    0% {
        clip-path: inset(0 0 0 0)
    }
    to {
        clip-path: inset(0 0 0 100%)
    }
}
@keyframes topWipeIn {
    0% {
        clip-path: inset(0 0 100% 0)
    }
    to {
        clip-path: inset(0 0 0 0)
    }
}
@keyframes topWipeOut {
    0% {
        clip-path: inset(0 0 0 0)
    }
    to {
        clip-path: inset(0 0 100% 0)
    }
}
@keyframes wid1 {
  0% {width: 0;}
  100% {width: 100%; }
}



*{ box-sizing: border-box; }
html{ height: 100%; }
body{
  font-family: var(--f-go);
  font-weight: 400;
  color: #000;
  line-height: 1.5;
  overflow: visible;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
  background-color: #fff;
  word-wrap: break-word;
  min-height: 100svh;
  text-align: left;
  text-justify: inter-ideograph;
}
body.gnav{ overflow-y:hidden; }
body.index{ background:var(--color-bg2); }
body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color:#fff;
      z-index: 9999;
      pointer-events: none;
      opacity: 0;
      transition: 1s .2s;
      z-index: 1000;
}
body.fadeout::after {
      opacity: 1;
      transition: opacity .4s ease;
}


img{
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  line-height: 0;
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
}

a{
  text-decoration: none;
  color: var(--color-base);
}
a:hover{
  text-decoration: underline;
}


#wrap{ max-width: 1920px; margin: 0 auto; padding-top: 7rem; position: relative; z-index: 1;}

.ef{ opacity:0; }
.ef.play{ animation: fade2 .5s forwards; }

header{
  position: fixed; top: 0; left: 0;
  padding: 2.5rem calc(6rem + 36px) 2.5rem 3rem;
  display: flex; align-items: center;
  justify-content: space-between;
  z-index: 10;
  width: 100%;
  transition: .5s;
}
header:before{ position:absolute; left:0; top:0; content:""; width:100%; height:100%; background-color: var(--color-base); z-index:-1; border-radius:0 0 2rem 2rem; color:#fff; }
header:after{ content:""; position:fixed; width:100vw; height:100vh; left:0; top:0; background:rgba(0, 0, 0, .5); z-index:2; visibility:hidden; opacity:0; transition:.3s; }
header.nav:after{ opacity:1; visibility:visible; }
header.DownMove{ position:fixed; top:0;  }
header.UpMove{ position:fixed;  top:-50%; }

header > h1{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
header > h1 a{ transition: .3s; display:block; }
header > h1 a:hover,header > div a:hover{ opacity:.7; text-decoration:none; }
header a{ color:#fff; }
header > div:not(#gnav) > a{ transition: .3s; }
header > div:not(#gnav),header > div:not(#gnav) > a{ display:flex; align-items:center; }
header > ul{ display:flex; letter-spacing:0.1em; gap:4em; font-size:90%; }
header > ul a{ font-weight:bold; position:relative; display:block; }
header > ul a:before{ content:""; position:absolute; left:50%; bottom:0; width:0; height:1px; background:#fff; transition:var(--tra1); }
header > ul a:hover{ text-decoration:none; }
header > ul a:hover:before{ width:100%; left:0; }


.menu-trigger,
.menu-trigger span {
  display: block;
  transition: all .3s;
  box-sizing: border-box;
}
.menu-trigger {
  position: absolute;  right: 3rem; top: calc(50% - 10px);
  width: 36px;
  height: 21px;
  z-index: 100;
}
.menu-trigger.active {  }
.menu-trigger :before{}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fff;
}
header.bk .menu-trigger span{ background-color: #fff; }
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 9px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span {  }
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(9px) rotate(-26deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-9px) rotate(26deg);
}


#gnav{ position:absolute; right:0; top:0; width:75%; max-width: 350px; height:100svh; background:var(--color-base); z-index:7; padding:0 3rem; box-sizing:border-box; clip-path: inset(0 0 0 100%);  }
#gnav.active{  animation: insetWipeIn .6s cubic-bezier(.19, 1, .22, 1) 0s 1 normal both; }
#gnav.active.close{ animation: insetWipeOut .6s cubic-bezier(.19, 1, .22, 1) 0s 1 normal both; }
#gnav p{ line-height:1.8; }
#gnav a{ transition:.3s; }
#gnav a:hover{ text-decoration:none; }
#gnav > div{  }
.g-menu{ margin:6rem auto 0;  }
.g-menu li a{ display:flex; gap:.8rem; align-items:center; padding:.8rem 0; }
.g-menu li a b{ font-size:120%; }
.g-menu li a span{ font-size:78%; font-weight:500; }
.g-sns{ border-top:1px solid #fff; margin-top:1rem; padding-top:1.8rem; }
.g-sns li a{ display:flex; gap:1rem; align-items:center; padding:.8rem 0 .8rem 3rem; font-weight:600; font-size:110%; position:relative; }
.g-sns li a:before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:2rem; height:2rem; background:url(../img/icon_x.svg) no-repeat center center; background-size:contain; filter: brightness(0) invert(1) }
.g-sns li.facebook a:before{ background-image:url(../img/icon_facebook.svg); }
.g-sns li.youtube a:before{ background-image:url(../img/icon_youtube.svg); }
.g-sns li.instagram a:before{ background-image:url(../img/icon_instagram.svg); }

footer { background: #222; color:#fff; padding:7rem 0; position:relative; z-index:1; text-align:center; }
footer a{ color:#fff; }
footer p{ line-height:1.8; }
footer a:hover{ text-decoration:none; }
footer ul{ display:flex; justify-content:center; gap:1rem; margin-top:4rem; flex-wrap: wrap; font-size:110%; }
footer ul li{ text-align:center; width:9em; }
footer ul li a{ font-weight:600; letter-spacing:0.05rem; position:relative; }
footer ul li a:before{ content:""; position:absolute; left:50%; bottom:0; width:0; height:1px; background:#fff; transition:var(--tra1); }
footer ul li a:hover{ text-decoration:none; }
footer ul li a:hover:before{ width:100%; left:0; }
footer ul.fnav{  font-size:90%; gap:3rem; width: 90%; margin:3rem auto 0; }
footer ul.fnav li{ width:auto; }
footer ul.fnav li a{ font-weight:400; opacity:0.8; font-size:85%; display:inline-block; transition:opacity .3s; position:relative; }
footer ul.fnav li a:hover{ opacity:1; }
footer ul.fnav li a b{ display:block; font-weight:600; font-size:130%; }

footer p#copy{ opacity:0.5; font-size:85%; position:relative; padding-top:3rem; margin-top:4rem; }
footer p#copy:before{ content:""; position:absolute; left:calc(50% - 3rem); top:0; width:6rem; height:1px; background:#fff; }

/* モーダル */
.iziModal-overlay{ background:rgba(0, 0, 0, 0.5) !important;  }
.iziModal { max-width:1200px !important; width:90%; max-height:90vh; border:2px solid #899FC7; }
.icon-close{ width:2.4em; height:2.4em; background-color:#899FC7; position:fixed; right:-1em; top:-1em; transition:.4s; z-index:10; border:none; border-radius:200px; }
.icon-close:before,.icon-close:after{ content:""; height:2px; width:1.4em; position:absolute; left:50%; top:50%; background-color:#fff; display:block; }
.icon-close:before{ transform:translate(-50%,-50%) rotate(45deg); }
.icon-close:after{ transform:translate(-50%,-50%) rotate(-45deg); }
.icon-close:hover{ cursor:pointer; background-color:var(--color-base); }
.modal-in{ margin: 5%; background-color:#fff; display:flex; justify-content:space-between; gap:5%; }
.modal-txt{ flex:1; }
.modal-txt h3{ color:var(--color-base); border-bottom:1px solid var(--color-base); font-size:140%; padding-bottom:.5rem; margin-bottom:1rem; }
.modal-txt .txt{ margin-bottom:1rem; }
.modal-txt .protag{ margin-bottom:1rem; font-size: 90%;}
.modal-txt .maker{ font-size: 90%; }
.modal-ph{ width:50%; display:flex; flex-wrap:wrap; gap:1rem; }
.modal-ph > div{ width:100%; }

/* TOP */
#top-rank{ background:var(--color-bg1); }
#top-ctg{ background:var(--color-bg2); }
.ctg-list{ max-width:1400px; margin:0 auto; width:90%; display:flex; flex-wrap: wrap; justify-content:space-between; gap:3rem 0; }
.ctg-list .item{ width:33%; text-align:center; padding:0 1.5rem; }
.ctg-list .item a{ color:#000; }
.ctg-list .item a img{ transition:var(--tra1); }
.ctg-list .item h3{ font-size:140%; transition:var(--tra1); }
.ctg-list .item h3 + p{ font-size:95%; font-weight:600; color:#555; }
.ctg-list .item a:hover{ text-decoration:none; }
.ctg-list .item a:hover img{ transform:scale(1.1); }
.ctg-list .item a:hover h3{ color:var(--color-base); }
.ctg-list .slide-arrow{ top:50%; position:absolute; transform:translateY(-50%); background:#fff; border-radius:100px; width:3rem; height:3rem; z-index:3; transition:var(--tra1); }
.ctg-list .slide-arrow:before{ content:""; position: absolute; top:45%; left: 50%; transform: translate(-50%,-50%); width:1rem; height:1rem; background:url(../img/arr.svg) no-repeat center center; background-size: contain; transition:var(--tra1); }
.ctg-list .slide-arrow.prev-arrow{ left:-1rem; }
.ctg-list .slide-arrow.prev-arrow:before{ transform: translate(-50%,-50%) scaleX(-1); }
.ctg-list .slide-arrow.next-arrow{ right:-1rem; }
.ctg-list .slide-arrow:hover{ background:var(--color-base); cursor:pointer; transform:translateY(-50%) scale(1.2);  }
.ctg-list .slide-arrow:hover:before{ filter: brightness(0) invert(1); }


.hash-list{ display:flex; max-width:1400px; margin:0 auto; width:90%; text-align: center; justify-content: center;}
.hash-list h3{ font-size:120%; margin-bottom:.8em; }
.hash-list > div{ width:33.3%; position:relative; }
.hash-list > div:nth-of-type(2):before,
.hash-list > div:nth-of-type(2):after{ content:""; height:100%; width:1px; position:absolute; left:0; top:0; background:#999; }
.hash-list > div:nth-of-type(2):after{ left:auto; right:0; }
.hash-area{ overflow:hidden; height:7em;  margin-bottom: .5rem;  }
.hash-area.act{ }
.hash-list ul.hash{ justify-content:center; position:relative; gap: .5em; padding:0 2em; margin-top: 0;}
.hash-list ul.hash li a{ border-color: #000; color:#000; transition:none; }
.hash-list ul.hash li a:hover{ background:#000; border-color:#000; }
.hash-ph{ display:flex; justify-content:space-between; gap:2rem; padding:0 2rem; margin-top:1.5rem; }
.hash-more{ width:12em; height: 2rem; line-height: 2rem; display: block; margin:0 auto; background:#999; border-radius:100px; color:#fff; font-weight:500; font-size:80%; position:relative; transition:.5s; }
.hash-more.off{ opacity:0; pointer-events:none; }
.hash-more:before{ content:""; display: inline-block; transform:translateY(-15%) rotate(135deg); width:.8em; height:.8em;
  color: #fff;
  line-height: 1;
  border: 0.2em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  margin-right: .5em;
  box-sizing: border-box; }
.hash-more:hover{ background:#000; cursor:pointer; }
.hash-more.act:before{ transform:translateY(30%) rotate(-45deg); }

/* 記事 */
.is-root-container{ font-family:var(--f-go); }
.is-root-container h2{ font-size:200%; font-family:var(--jp-go); font-weight:900; padding-top:1.7em; border-top:1px solid var(--color-base); margin:2em 0 .8em; }
.is-root-container h3{ font-size:150%; color:#333;  font-family:var(--jp-go); margin-bottom:1rem; }
.is-root-container h4{ font-size:120%; font-family:var(--jp-go); margin-bottom:1rem; }
.is-root-container p{ padding:.6em 0; line-height:2; }
.is-root-container img{ border-radius:5px; display:block; }
.is-root-container figure{ margin:3rem auto; }
.is-root-container h3 + figure,
.is-root-container h4 + figure  { margin-top:1rem; }
.is-root-container ol,.is-root-container ul{ padding:1.5em 2em 1.5em 3.2em; background:var(--color-bg1); border-radius:5px; margin:2rem 0; }
.is-root-container ol li,.is-root-container ul li{ margin:.5em 0; }
.is-root-container ol{}
.is-root-container ul li{ position:relative; }
.is-root-container ul li:before{ content:""; width:5px; height:5px; position:absolute; left:-1em; top:.6em; background:var(--color-base); border-radius:10px; }
.is-root-container .is-layout-flex { display:flex; gap: 2em; }
.is-root-container #toc{ background:var(--color-bg2); padding:2rem 3rem; border-radius:5px; margin-bottom:3rem; }
.is-root-container #toc h3{ font-size:90%; letter-spacing:0.1em; margin-bottom:.5rem; color:#000; font-family:var(--f-go); }
.is-root-container #toc ul{ padding:0; background:none; margin:0; }
.is-root-container #toc ul li{ padding:.3rem; margin:0; }
.is-root-container #toc ul li:before{ display:none; }
.is-root-container #toc ul li a{ color:#555; transition:.5s; }
.is-root-container #toc ul li a:hover{ color:var(--color-base); text-decoration:none; }

.spec{ margin:0 0 3rem; }
.spec h4{ font-size:100%; font-family:var(--jp-go); background:#A3ACB4; color:#fff; padding:1em; margin-top: 4rem; border-radius:5px; }
/* wp:groupの内部コンテナ対策 */
.spec > .wp-block-group__inner-container{ display:contents; }
.spec-area > .wp-block-group__inner-container{ display:flex; justify-content:space-between; }
.spec table{ margin:.5rem auto; width:100%; }
.spec table th,.spec table td{ padding:1.2em 2em; border:1px solid #ccc; border-width:0 0 1px 0; }
.spec table th{ font-weight:500; width: 10em; color:#555;  }
.spec table td{ width:calc(100% - 10em); }
.spec-btn{ text-align:center; margin-top:2rem; }
.spec-area{ display:flex; justify-content:space-between; }
.spec-area figure.ph{ width:30%; margin:1.5em 0 0; }
.spec-area figure.wp-block-table{ width:70%; padding-left:1rem; margin:0; }
.spec-area table{ width:100%; }

.important{ display:flex; align-items:center; justify-content:space-between; margin: 1rem 0; padding: 2em 2em 2em 0; border:1px solid var(--color-base); background-color:#fff; font-size:90%; }
.important > h2{ width:20%; text-align:center; color:var(--color-base); font-size:100%; font-weight: 600; padding:0; border:none; margin:0; }
.important > div{ width:80%; border-left:1px solid var(--color-base); padding-left:3%; color:#555; }
.section-inner .important{ width:90%; margin:0 auto; }
.important h3{ color:var(--color-base); font-size:110%;  }

#article-end{ background:var(--color-bg2); margin:5rem auto; border-radius:5px; padding:3rem 2rem; }
ul.article-list{ position:relative; display:flex; justify-content:space-between; align-items:center; border:1px solid #ccc; border-width:1px 0; padding:1em 0; margin-top:2.5em; font-size:90%; }
ul.article-list a{ color:#555; }
ul.article-list a:hover{ color: #000; }
ul.article-list li{ width:calc(50% - 7em); }
ul.article-list li.prev{}
ul.article-list li a{ display:flex; align-items:center; gap:1em; }
ul.article-list li.next a{ flex-direction: row-reverse; text-align: right;}
ul.article-list li .ph{ overflow:hidden; width:80px; height:80px; border-radius:5px; }
ul.article-list li .ph img{ object-fit:cover; width:100%; height:100%; }
ul.article-list li p{ width:calc(100% - 80px - 1em); }
ul.article-list li.all{ width:7em; text-align:center; }
ul.article-list li.all a{ justify-content:center; }


 /* 汎用 */
.area{ padding:7rem 0; }
h2.area-tit{ text-align:center; margin-bottom:3em; }
h2.area-tit.main{ margin-bottom:6rem; }
h2.area-tit u{ background:#000; color:#fff; text-decoration:none; display:inline-block; padding:.2em 1.2em; }
h2.area-tit b{ display:block; font-size:200%; letter-spacing:0.05em; padding:.3em 0 0; font-family:var(--jp-go) }
h2.area-tit span{ color:var(--color-base); display:block; }
h2.side-tit{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
h2.side-tit b{ font-weight:600; font-size:200%; }
h2.side-tit span{ color:var(--color-base); }
h3.side-tit{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
h3.side-tit b{ font-weight:600; font-size:110%; }
h3.side-tit span{ color:#999; font-size:90%; }
h3.side-tit2{ color:var(--color-base); font-size:90%; letter-spacing:0.05em; }

#mv{ padding:5rem 0; margin:0 auto; max-width:1600px; width:90%; }
.mv{ display:flex !important; justify-content:space-between; align-items:center; gap:4%; }
.mv .ph{ max-width:950px; width:58%; border-radius:1rem; overflow:hidden; }
.mv .txt{ width:38%; max-width: 550px; margin-top:-2rem;  }
.mv .txt > a{ display:block; color:#000; }
.mv .txt > a:hover{ text-decoration:none; }
.mv .date{ font-size:100%; }
.mv h2{ font-weight:900; font-size:250%; margin:.5em 0; line-height:1.3; font-family:var(--jp-go); }
.mv h2 + p{ font-weight:500; font-size:130%; margin-bottom:1.5em; }
#mv .slick-track{  }
#mv .slick-dots{ bottom:6rem; left:67%; width:33%; display:flex; gap:10px; }
#mv .slick-dots li{ margin:0; padding:0; width:40px; height:12px; }
#mv .slick-dots li button{ width: 100%; height: 50%; background:#A3ACB4; padding:0; border-radius:20px; }
#mv .slick-dots li button::before { display:none;   }
#mv .slick-dots li.slick-active button{ background:var(--color-base); }

.share{ text-align:center; }
.share h3{ font-size:110%; margin-bottom:1rem; }
.share ul{ display:flex; gap:2rem; align-items:center; justify-content:center; }
.share ul li a{ position:relative; display:block; width:2.2rem; height:2.2rem; }
.share ul li a:before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:100%; background:url(../img/icon_x.svg) no-repeat center center; background-size:contain; filter: brightness(0); opacity:.6; transition:.5s; }
.share ul li a:hover:before{ opacity:1; }
.share ul li.facebook a:before{ background-image:url(../img/icon_facebook.svg); }
.share ul li.line a:before{ background-image:url(../img/icon_line.svg); }
.share ul li.link a:before{ background-image:url(../img/icon_link.svg); }
.mv .share{ display:flex; text-align:left; align-items: center; margin-top:2.5rem; gap:2rem; }
.mv .share h3{ font-size:100%; margin-bottom:0; }
.mv .share ul li a{ width:1.8rem; height:1.8rem; }

#content{  background:var(--color-bg2); padding:7rem 0; }
#content.bgw{ background:#fff; padding:3rem 0 7rem; }
#content > div{ display:flex; max-width:1100px; margin:0 auto; width:90%; justify-content:space-between; }
.cont-area{ width:calc(100% - 300px - 5%); }
.side-area{ width:300px; }

ul.rank-list{ display:flex; justify-content:start; flex-wrap:wrap; gap:4rem 3%; width: 95%; max-width:1400px; margin:0 auto; }
ul.rank-list > li{ max-width:420px; width:30%; position:relative; background:#fff; border-radius:0 0 5px 5px; display: flex; flex-direction: column; }
.cont-area ul.rank-list{ gap:3rem 4%; width:100%; }
.cont-area ul.rank-list > li{ width:48%; max-width:500px; }

ul.rank-list > li b,ul.side-list > li b{ color:#fff; font-size:200%; display:flex; align-items:center; justify-content:center; width:1.5em; height:1.5em; box-shadow:2px 2px 0 #fff; background:var(--color-base); position:absolute; left:-.5em; top:-.5em; z-index:2; pointer-events:none; border-radius:3px; }
ul.rank-list > li .ph{ border-radius:5px 5px 0 0; overflow:hidden; aspect-ratio:16/9; }
ul.rank-list > li .ph img{ width:100%; height:100%; display:block; object-fit:cover; }
ul.rank-list > li .txt{ padding:1rem 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
ul.rank-list > li .txt a{ color:#000;  }
ul.rank-list > li .txt a:hover{ text-decoration: none; }
ul.rank-list .date{}
ul.rank-list h3{ font-size:110%; margin:.5em 0 .3em; }
ul.rank-list p{ font-size:95%;  }
ul.rank-list li > a:hover{ text-decoration:none; }

ul.side-list{  }
ul.side-list > li{ display:flex; background:#fff; border-radius:5px; position:relative; margin:2rem 0; }
ul.side-list > li.new:before,
ul.rank-list > li.new:before{ content:""; width:3rem; height:3rem; position:absolute; left:-1.3rem; top:-1.3rem; background:url(../img/icon_new.svg) no-repeat; background-size:contain; z-index:2; pointer-events:none; }
ul.side-list > li b{ font-size:160%; }
ul.side-list .ph{ width:35%; border-radius:5px 0 0 5px; overflow:hidden; aspect-ratio:16/9; }
ul.side-list .ph img{ object-fit:cover; width:100%; height:100%; }
ul.side-list .txt{ width:65%; padding:1rem 2rem; display:flex; align-items:center; min-height:12rem; }
ul.side-list .ph > a{  display: block; height:100%; width:100%; }
ul.side-list .txt > div{ width:100%; }
ul.side-list .txt > div > a{ display: block;  color:#000; }
ul.side-list .txt .date{  }
ul.side-list .txt h3{ font-size:120%; margin:.3em 0 .2em; }
ul.side-list .txt p{ font-size:85%;  }
ul.side-list ul.hash{ }
ul.side-list .txt > div > a:hover{ text-decoration:none; }

ul.side-ctg-list{}
ul.side-ctg-list li{ margin:1rem 0; }
ul.side-ctg-list li a{ display:flex; align-items: center; color:#000; padding:0; transition:.5s; position:relative; justify-content:flex-start; gap:.5em; }
ul.side-ctg-list li a picture{ width:6em; }
ul.side-ctg-list li a b{ font-weight:600; font-size:120%; width:calc(100% - 6.5em); }
ul.side-ctg-list li a span{ display:block; font-size:75%; color:#555; font-weight:500; transition:.5s; }
ul.side-ctg-list li a:before{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--color-base); transition:var(--tra1); }
ul.side-ctg-list li a:hover{ text-decoration:none; color:var(--color-base); }
ul.side-ctg-list li a:hover:before{  }
ul.side-ctg-list li a:hover span{ color:#000; }

ul.side-item-list{}
ul.side-item-list li{ margin:1.2rem 0; }
ul.side-item-list li a{ display:flex; flex-direction:column; gap:.6rem; color:#000; transition:.5s; font-weight:500; font-size:110%; }
ul.side-item-list li a .ph{  border-radius: 5px; overflow:hidden; }
ul.side-item-list li a img{  transition:var(--tra1); }
ul.side-item-list li a:hover{ text-decoration:none; color:var(--color-base); }
ul.side-item-list li a:hover img{ transform:scale(1.15); }


ul.hash{ display:flex; flex-wrap:wrap; font-size:80%; gap:8px; margin-top:.8rem; }
ul.hash li a{ display:block; border:1px solid #777; color:#777; font-weight:600; padding:.4em .8em; transition:.5s; }
ul.hash li a:hover{ background:#555; border-color:#555; color:#fff; text-decoration:none; }
ul.hash li a:before{ content:"#"; display:inline-block; }

.thead{ display:flex; align-items:center; gap:1rem; margin-bottom:.5rem; }
.date{ color:#999; font-weight:bold; font-size:90%; }
ul.ctg{ display:flex; flex-wrap:wrap; font-size:80%; gap:6px; }
ul.ctg li a{ display:block; background:var(--color-bg1); border-radius:3rem; padding:.3em 1em; color:var(--color-base) !important; transition:.5s; }
ul.ctg li a:hover{ background:var(--color-base); color:#fff !important; text-decoration:none; }
.txt a h2,.txt a h3{ transition:.5s; }
.ph img{ transition:var(--tra1); }
.hover:not(.mv) .txt a h2,.hover .txt a h3{ color:var(--color-base); }
.hover .ph img{ transform:scale(1.15); }

ul.link-list{ display:flex; flex-direction:column; gap:1rem; }
ul.link-list li{ overflow:hidden; border-radius:5px; }
ul.link-list li a{ transition:.5s; }
ul.link-list li a:hover{ opacity:.7; }

.line1,ul.side-list .txt p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
.line2,ul.side-list .txt h3,ul.rank-list .txt h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}
.line3,ul.rank-list .txt p,#mv.top .mv h2,#mv.top .mv h2 + p,ul.article-list li p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

div.link-btn a,a.link-btn {
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #555;
  color: #fff;
  padding: .8rem 2.5rem .8rem 1.5rem;
  position: relative;
  font-family: var(--f-min);
  font-size: 100%;
  transition: .3s;
  border-radius: 5px;
  font-weight: 500;
  min-width: 15em;
}
a.link-btn.big{ padding:1.3em 1em; letter-spacing: 0.05em; font-size: 150%; }
div.link-btn a:before,a.link-btn:before{ content: ""; position:absolute; right: 1em; top:45%; transform: translateY(-50%); width:1rem; height:1rem; background:url(../img/arr.svg) no-repeat center center; background-size: contain; transition: .4s cubic-bezier(0.33, 1, 0.68, 1); filter: brightness(0) invert(1); }
div.link-btn a:hover,a.link-btn:hover{text-decoration:none; background-color: #000;}
div.link-btn a:hover:before,a.link-btn:hover:before{ right:0.4em; }
a.link-btn.col1{ background-color:#8d7b62; }
a.link-btn.col2{ background-color:#579e54; }
a.link-btn.imp{ background-color:var(--color-imp); }
a.link-btn.col1:hover,a.link-btn.col2:hover,a.link-btn.imp:hover{ filter:saturate(130%) brightness(1.1); }

#sns-area{ background:var(--color-bg2); padding:12rem 0; text-align:center; }
#content + #sns-area{ padding-top:3rem; }
#sns-area h2{ font-size:130%; letter-spacing:0.3rem; margin-bottom:2rem; }
.sns-icon{ display:flex; justify-content:center; align-items:center; gap:3rem; }
.sns-icon a{ display:block; transition:var(--tra1); }
.sns-icon a:hover{ transform:scale(1.2); }

.win{ }
.win:after{ content:""; width:1rem; height:1rem; display: inline-block; background:url(../img/icon_newwin.svg) no-repeat center center; background-size:contain; vertical-align:middle; margin:-3px 0 0 .3rem; }

/* モーダル */
.modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0,0,0,60%);
  padding: 3rem;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
  z-index: 10;
}
.modal:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin-left: -0.2em;
}
.modal.is-active{
  opacity: 1;
  visibility: visible;
}

.modal-container{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  vertical-align: middle;
  max-width: 800px;
  width: 90%;
}
.modal-close{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  color: #fff;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  font-size: 180%;
}
.modal-close span{ line-height: 1; display:block; margin-top:-.15em; }
.modal-content{
  background: #fff;
  text-align: center;
  line-height: 1.8;
  padding: 4rem 2rem;
  border-radius: 1rem;
  overflow-y: auto;
  max-height: 90svh;

}
.modal-content h2{ color:var(--color-base); font-size:180%; margin-bottom:1rem; }
.modal-content h3{ font-size:130%; }
.modal-content .ph{ max-width:300px; width: 60%; margin:0 auto; }
.modal-content p{  margin: 1em 0; }


@media screen and (max-width: 1600px) {
  .mv h2 { font-size:230%; }
  .mv h2 + p { font-size:120%; }
}
@media screen and (max-width: 1440px) {
  body{ font-size:1.2vw; }
  header > ul{ gap:2em; }
  header > h1 { width:26%; text-align:center; }
  .hash-ph { gap:1rem; }
  .mv h2 { font-size:210%; }
  .mv h2 + p { font-size:110%; }
  #mv .slick-dots { bottom:5rem; }
  .thead { font-size:90%; }
}
@media screen and (max-width: 1080px) {
  #wrap { padding-top:5rem; }
  header { padding: 2rem calc(6rem + 36px) 2rem 3rem; }
  header > h1 { width:32%; }
  header > ul{ display:none; }
  header > div{ width:15%; }
  .area,#content { padding: 5rem 0; }

  .cont-area { width: calc(100% - 34%); }
  .side-area { width:30%; }
  ul.side-list .txt { padding:1rem 1.5rem; }
  #sns-area { padding: 8rem 0;}
  ul.article-list li .ph { width:60px; height:60px; }
  ul.article-list li p { width: calc(100% - 60px - 1em);}
}


@media screen and (max-width: 810px) {
  body{ font-size:2vw; }
  #wrap { padding-top:4rem; }
  header { padding: 1.5rem calc(5rem + 36px) 1.5rem 2rem; }
  header::before { border-radius: 0 0 1rem 1rem; }
  header > h1 { width:36%; }
  header > div{ width:18%; }
  .menu-trigger { right:2rem; height: 18px; }
  .menu-trigger span { height:2px; }
  .menu-trigger span:nth-of-type(2) { top:8px; }
  .menu-trigger.active span:nth-of-type(1) { transform: translateY(8px) rotate(-26deg); }
  .menu-trigger.active span:nth-of-type(3) { transform: translateY(-8px) rotate(26deg); }
  .thead { font-size:100%; }

  #mv { padding: 3rem 0 6rem; }
  .mv { flex-direction:column; }
  .mv h2 + p { font-size:120%; }
  .mv .ph { width:100%; }
  .mv .txt { width: 90%; margin-top: 2rem; max-width:600px; }
  #mv .slick-dots { bottom: 3rem; left:0; width:100%; justify-content:center; }
  #content > div { display:block; }
  .cont-area { width: 100%; }
  .side-area { width: 100%; max-width:300px; margin:4rem auto 0; }

  .modal { padding:2rem 1rem; }
/*
  .ctg-list{ flex-wrap:wrap; gap:2rem 0; }
  .ctg-list .item{ width:48%; }*/

  ul.rank-list{ gap: 2rem 4%; justify-content:start; width: 90%; }
  ul.rank-list > li { width:48%; }
  ul.rank-list .thead{ display:block; }
  ul.rank-list .date{ margin-bottom:.5rem; display:block; }
  ul.rank-list > li b { width:1.4em; height:1.4em; top:-.3em; left:-.3em; font-size: 160%; }
  .hash-list { flex-direction:column; align-items:center; gap:3rem; }
  .hash-list > div { width:100%; max-width:600px; }
  .hash-list > div:nth-of-type(2) ul.hash::before, .hash-list > div:nth-of-type(2) ul.hash::after{ background:none; }
  .hash-list > div:nth-of-type(2){ border:1px solid #000; border-width:1px 0; padding:3rem 0; }
  ul.side-list .txt h3 { font-size:110%; }
  .hash-more.off{ display:none; }
  .hash-list > div:nth-of-type(2)::before, .hash-list > div:nth-of-type(2)::after { display:none; }

  footer ul.fnav{  gap:1.5rem 0;  font-size:100%; }
  footer ul.fnav li{ width: 33%;}

}


@media screen and (min-width: 551px){ .ssp{ display: none; } }
@media screen and (max-width: 550px) {
  body{ font-size:3.2vw; }
  #wrap { padding-top:3rem; }
  header { padding: 1.2rem calc(5rem + 36px) 1.2rem 1.5rem; }
  header > h1 { width:40%; }
  header > div{ width:24%; }
  .menu-trigger { right:1.5rem; }
  #gnav { padding: 0 2rem; }
  .g-menu { margin: 4rem auto 0; }

  ul.rank-list:not(.col2) > li { width:100%; margin:0 auto; }
  ul.rank-list:not(.col2) .txt{ padding:1.3rem; }
  ul.rank-list:not(.col2) .thead{ display:flex; }
  ul.rank-list:not(.col2) .date{ margin-bottom:0; }
  ul.rank-list:not(.col2) > li b { width:1.5em; height:1.5em; top:-.5em; left:-.5em; font-size: 180%; }
  ul.rank-list.col2 .thead{ margin-bottom: .3rem; }
  ul.rank-list.col2 .txt{ padding:1rem; font-size:90%; }

  .ctg-list { width:85%; }
  .ctg-list .item { padding:0 .5rem; }
  .ctg-list .slide-arrow.prev-arrow,.ctg-list .slide-arrow.next-arrow{ width: 2.5rem; height: 2.5rem; }
  .ctg-list .slide-arrow.prev-arrow { left:-1.6rem;  }
  .ctg-list .slide-arrow.next-arrow { right:-1.6rem; }
  ul.side-list:not(.col1) .ph { width:40%; }
  ul.side-list:not(.col1) .txt { width:60%; padding:1rem 1rem; }
  ul.side-list:not(.col1) .thead{ display:block; }
  ul.side-list:not(.col1) .date{ margin-bottom:.5rem; display:block; }
  ul.side-list:not(.col1) ul.ctg { font-size:72%; }
  ul.side-list.col1 > li{ flex-direction:column;  width:95%; margin:2rem auto; }
  ul.side-list.col1 .ph { width:100%; border-radius:5px 5px 0 0; }
  ul.side-list.col1 .txt{ width:100%; padding:1.3rem; }
  ul.side-list.col1 .txt p { font-size:95%; }

  #mv:not(.slick-slider) { padding: 3rem 0; }
  .mv h2 { font-size:190%; }
  #content.bgw { padding:2rem 0 5rem; }
  #toc { padding:1.5rem; }
  .is-root-container h2 { font-size:160%; }
  .is-root-container .important h2 { font-size:100%; }
  .is-root-container figure { margin:2rem auto; }
  .is-root-container .is-layout-flex { flex-direction:column; margin:2rem auto; }
  .is-root-container .is-layout-flex figure { margin:0; }
  .spec { margin: 0 0 2rem;}
  .spec h4 { margin-top:3rem; }
  .spec table th, #spec table td { padding:1em 1em; }
  .spec table td { padding-left:0; }
  .spec-area{ display:block; }
  .spec-area > .wp-block-group__inner-container { display:block; }
  .spec-area figure.wp-block-table { width:100%; padding-left:0; margin:0 auto; }
  .spec-area figure.ph { width:50%; margin:1.5em auto 1em; }
  .spec-area table{ width:100%; }
  .share ul li a { width: 2rem; height: 2rem; }
  .mv .share ul li a{ width:1.6rem; height:1.6rem; }
  #article-end { padding:3rem 1rem; }
  ul.article-list li { width: calc(50% - 3.5em); }
  ul.article-list li .ph { display:none; }
  ul.article-list li p { width: 100%; }
  ul.article-list li.all { width:5em; }


  #content + #sns-area { padding-top:1rem; }
  #sns-area { padding: 5rem 0;}
  .sns-icon { max-width:280px; margin:0 auto; }
  footer { padding:5rem 2rem; }
  footer .logo{ width:80%; margin:0 auto; }
  footer ul.fnav { width:100%; }

  ul.side-list.col1 .txt h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
  }
  ul.side-list.col1 .txt p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }

  .modal-content { padding: 3rem 1rem; }
  .modal-content h2{ font-size:140%; }
  .modal-content h3{ font-size:100%; }
  .modal-content p{ font-size:76%; }

}




/* ボックス内dloatｖalear */
.cf:after {
	content: ".";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
}
.cf {display: inline-block;}
/* Hides from macIE \*/
* html .cf,* html #product .detail,* html #product > dl {height: 1%;}
.cf {display: block;}
/* End hide from macIE */

sup{ font-size: 70%; margin-top: -2em; display: inline-block;}
.fontP-1{ font-size: 90%;}
.fontP-2{ font-size: 80%;}
.fontP-3{ font-size: 70%;}
.fontP1{ font-size: 110%;}
.fontP2{ font-size: 120%;}
.fontP3{ font-size: 130%;}
.fb{ font-weight: bold;}
.fl { float: left !important; }
.fr { float: right !important; }
.tac{ text-align: center !important;}
.tal{ text-align: left !important;}
.tar{ text-align: right !important;}

.fc01{ color:  #006bb5; }
.fc-red{ color: var(--color-red); }
.fc-red a{ color: var(--color-red); }

a.tlink{ text-decoration:underline; }
a.tlink:hover{ text-decoration:none; }


/* margin-top */
.mt0{margin-top: 0px !important;}
.mt1{margin-top: 1px !important;}
.mt2{margin-top: 2px !important;}
.mt3{margin-top: 3px !important;}
.mt4{margin-top: 4px !important;}
.mt5{margin-top: 5px !important;}
.mt7{margin-top: 7px !important;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important; }
.mt50{margin-top: 50px !important; }
.mt100{margin-top: 100px !important; }
.mt150{margin-top: 150px !important; }

.mt1em{margin-top: 1em !important;}
.mt2em{margin-top: 2em !important;}
.mt3em{margin-top: 3em !important;}
.mt4em{margin-top: 4em !important;}
.mt5em{margin-top: 5em !important;}

/* margin-right */
.mr1{margin-right: 1px !important;}
.mr2{margin-right: 2px !important;}
.mr3{margin-right: 3px !important;}
.mr4{margin-right: 4px !important;}
.mr5{margin-right: 5px !important;}
.mr8{margin-right: 8px !important;}
.mr10{margin-right: 10px !important;}
.mr15{margin-right: 15px !important;}
.mr20{margin-right: 20px !important;}
.mr70{margin-right: 70px !important;}

/* margin-bottom */
.mb0{margin-bottom: 0px !important;}
.mb1{margin-bottom: 1px !important;}
.mb2{margin-bottom: 2px !important;}
.mb3{margin-bottom: 3px !important;}
.mb4{margin-bottom: 4px !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb15{margin-bottom: 15px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb50{margin-bottom: 50px !important;}
.mb80{margin-bottom: 80px !important;}

.mb1em{margin-bottom: 1em !important;}
.mb2em{margin-bottom: 2em !important;}
.mb3em{margin-bottom: 3em !important;}
.mb4em{margin-bottom: 4em !important;}
.mb5em{margin-bottom: 5em !important;}

/* margin-left */
.ml1{margin-left: 1px !important;}
.ml2{margin-left: 2px !important;}
.ml3{margin-left: 3px !important;}
.ml4{margin-left: 4px !important;}
.ml5{margin-left: 5px !important;}
.ml10{margin-left: 10px !important;}
.ml15{margin-left: 15px !important;}
.ml20{margin-left: 20px !important;}

/* padding-top */
.pt0{padding-top: 0px !important;}
.pt1{padding-top: 1px !important;}
.pt2{padding-top: 2px !important;}
.pt3{padding-top: 3px !important;}
.pt4{padding-top: 4px !important;}
.pt5{padding-top: 5px !important;}
.pt10{padding-top: 10px !important;}
.pt15{padding-top: 15px !important;}
.pt20{padding-top: 20px !important;}
.pt50{padding-top: 50px !important;}

/* padding-right */
.pr1{padding-right: 1px !important;}
.pr2{padding-right: 2px !important;}
.pr3{padding-right: 3px !important;}
.pr4{padding-right: 4px !important;}
.pr5{padding-right: 5px !important;}
.pr10{padding-right: 10px !important;}
.pr15{padding-right: 15px !important;}
.pr20{padding-right: 20px !important;}

/* padding-bottom */
.pb0{padding-bottom: 0px !important;}
.pb1{padding-bottom: 1px !important;}
.pb2{padding-bottom: 2px !important;}
.pb3{padding-bottom: 3px !important;}
.pb4{padding-bottom: 4px !important;}
.pb5{padding-bottom: 5px !important;}
.pb10{padding-bottom: 10px !important;}
.pb15{padding-bottom: 15px !important;}
.pb20{padding-bottom: 20px !important;}
.pb80{padding-bottom: 80px !important;}

/* padding-left */
.pl1{padding-left: 1px !important;}
.pl2{padding-left: 2px !important;}
.pl3{padding-left: 3px !important;}
.pl4{padding-left: 4px !important;}
.pl5{padding-left: 5px !important;}
.pl10{padding-left: 10px !important;}
.pl15{padding-left: 15px !important;}
.pl20{padding-left: 20px !important;}