@charset "utf-8";

/* == reset == */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,a,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,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 {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  vertical-align: baseline;
  font-size: 100%;
}
html {
  font-size: 62.5%;
}
body {
  position: relative;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
}
@media screen and (mix-width: 767.5px) {
  body {
    min-width: 1000px;
  }
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
ul {
	list-style: none;
}
*::before,
*::after {
  box-sizing: border-box;
}
@media screen and (max-width: 767.5px) {
  body {
    overflow-x: hidden;
  }
}

/* == mainTtl == */
.mainTtl01 {
  position: relative;
  color: #fff;
}
#snap .mainTtl01 {background-color: #C55093;}
#interview .mainTtl01 {background-color: #FEE69C; color: #544A47;}
#trip .mainTtl01 {background-color: #c8eee4; color: #544A47;}
#nightout .mainTtl01 {background-color: #000;}
#geek .mainTtl01 {background-color: #F2C327;}
#gift .mainTtl01 {background-color: #AD8BAB;}
#news .mainTtl01 {background-color: #53BBA9;}
#lunch .mainTtl01 {background-color: #F08E56; color: #544A47;}
#store .mainTtl01 {background-color: #E6DDD9; color: #544A47;}
#ai .mainTtl01 {background-color: #E9E9E9; color: #544A47;}
.mainTtl01 .inner {
  position: relative;
}
.mainTtl01 .logo {
  position: absolute;
  top: 12px;
  left: 10px;
  width: 74px;
}
.mainTtl01Left {
  text-align: center;
}
@media screen and (max-width: 767.5px) {
  .mainTtl01 > .inner {
    padding: 25px 0;
  }
  .mainTtl01 h1 {
    width: 89.7436vw;
    margin: 0 auto;
  }
  .mainTtl01 .leadText,
  .mainTtl01Right {
    display: none;
  }
}
@media (min-width: 767.5px) {
  .mainTtl01 > .inner {
    display: flex;
    width: 1000px;
    margin: 0 auto;
  }
  .mainTtl01 .logo {
    left: 0;
    width: 90px;
  }
  .mainTtl01 h1 {
    width: 420px;
    margin: 0 auto;
  }
  .mainTtl01Left {
    width: calc(100% - 554px);
    padding: 48px 0 0;
  }
  .mainTtl01 .leadText {
    margin-top: 21px;
    font-size: 1.5rem;
  }
  .mainTtl01Right {
    width: 554px;
  }
}

/* == countainer == */
.articleList .ttl {
  margin-bottom: 8px;
  color: #544A47;
  font-size: 1.4rem;
}
.articleList .offer {
  color: #8C8C8C;
  font-size: 1.1rem;
}
.articleList .bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: #8C8C8C;
  font-size: 1.1rem;
}
.articleList a {
  height: 100%;
}
.articleList .img {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
}
.articleList .img .label {
  display: inline-block;
  border-radius: 4px;
  background-color: #00b4be;
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
}
.paginationBlock .wrap {
  display: flex;
  justify-content: center;
}
.paginationBlock a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin: 0 4px;
  border-radius: 10px;
  font-size: 1.4rem;
  color: #544A47;
}
.paginationBlock a.current {
  background-color: #00B4BE;
  color: #fff;
}
.paginationBlock a.prev,
.paginationBlock a.next {
  position: relative;
  background-color: #F6F6F5;
}
.paginationBlock a.prev::before,
.paginationBlock a.next::before {
  content: '';
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  border-right: 2px solid #00B4BE;
  border-bottom: 2px solid #00B4BE;
}
.paginationBlock a.prev::before {
  margin-right: -3px;
  transform: rotate(135deg);
}
.paginationBlock a.next::before {
  margin-left: -3px;
  transform: rotate(-45deg);
}
.paginationBlock a.hidden {
  visibility: hidden;
}
.paginationBlock a.dot {
  pointer-events: none;
}
@media screen and (max-width: 767.5px) {
  .countainerWarp {
    margin: 16px auto 0;
  }
  .countainerLeft {
    padding-left: 20px;
    padding-right: 20px;
  }
  .articleList > li + li {
    margin-top: 20px;
  }
  .articleList a {
    display: flex;
    justify-content: space-between;
  }
  .articleList .img {
    width: 43.3334vw;
    min-height: 24.2667vw;
    border-radius: 8px 0 0 8px;
    background-size: cover;
  }
  .articleList .img .label {
    margin: 4px 0 0 4px;
    padding: 3px 4px;
  }
  .articleList .ttl {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .articleList .pr .ttl {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .articleList .textBlock {
    position: relative;
    padding-bottom: 1.7rem;
    width: 43.3334vw;
  }
  .countainerRight {
    display: none;
  }
  .paginationBlock {
    margin: 32px auto 40px;
  }
  .paginationBlock a.prev {
    margin-right: 14px;
  }
  .paginationBlock a.next {
    margin-left: 14px;
  }
}
@media (min-width: 767.5px) {
  .countainerWarp {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin: 56px auto 0;
  }
  .countainerLeft {
    width: 780px;
  }
  .articleList {
    display: flex;
    flex-wrap: wrap;
  }
  .articleList > li {
    width: 247px;
  }
  .articleList > li:nth-child(3n + 2),
  .articleList > li:nth-child(3n + 3) {
    margin-left: 19px;
  }
  .articleList > li:nth-child(n + 4) {
    margin-top: 50px;
  }
  .articleList .img {
    height: 139px;
    margin-bottom: 15px;
  }
  .articleList .img .label {
    width: 60px;
    margin: 6px 0 0 6px;
    padding: 3px;
  }
  .articleList a {
    position: relative;
    display: block;
    padding-bottom: 1.7rem;
  }
  .articleList .ttl {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .countainerRight {
    width: 167px;
    text-align: center;
  }
  .asideTtl {
    margin-bottom: 12px;
    color: #00B4BE;
    font-size: 1.5rem;
  }
  .asideList {
    margin-bottom: 50px;
  }
  .asideList li + li {
    margin-top: 12px;
  }
  .asideList a {
    position: relative;
    display: block;
  }
  .asideList .label {
    position: absolute;
    top: 4px;
    left: 4px;
    display: inline-block;
    padding: 3px 4px;
    border-radius: 4px;
    background-color: #00b4be;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
  }
  .paginationBlock {
    margin: 50px auto 56px;
  }
  .paginationBlock a.prev {
    margin-right: 28px;
  }
  .paginationBlock a.next {
    margin-left: 28px;
  }
}

/*==.categoryModal ==*/
.categoryModalBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  background: url(/article/backnumber/category/image/backnumber_btn_01.png) 0 0 no-repeat;
  background-size: 100%;
}
.categoryModalBtn > span {
  display: none;
}
.categoryModalWrap input{display:none}
.modalOverlay{overflow:auto;position:fixed;top:0;left:0;z-index:999999;width:100%;height:100%;padding:0 8.9743vw;background:rgba(0,0,0,.5);opacity:0;-webkit-transition:opacity .3s,-webkit-transform 0 .3s;transition:opacity .3s,-webkit-transform 0 .3s;transition:opacity .3s,transform 0 .3s;transition:opacity .3s,transform 0 .3s,-webkit-transform 0 .3s;-webkit-transform:scale(0);transform:scale(0)}
.modalOverlay::-webkit-scrollbar{width:10px}
.modalOverlay::-webkit-scrollbar-track{background:#fff;border-left:solid 1px #ececec}
.modalOverlay::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px;-webkit-box-shadow:inset 0 0 0 2px #fff;box-shadow:inset 0 0 0 2px #fff}
.modalTrigger{position:absolute;top:0;left:0;width:100%;height:100%}
.modalContent{position:relative;top:50%;width:100%; max-width: 340px; margin:0 auto;border-radius:12px;background:#fff;box-shadow:0 5px 15px rgba(0,0,0,.5);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}
.modalContentInner{padding:20px 19px;text-align:center}
#ancModalSideNav .modalContentInner{padding-bottom:40px}
.closeButton{display: block; margin-top: 20px; border-radius:10px;background-color:#F4F8F8;font-size: 1.7rem; line-height: 3.0589em; color: #00B4BE;}
.categoryModalWrap input:checked ~ .modalOverlay{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .5s;transition:opacity .5s}
#ancModalSideNav .modalContent{top:0;transform:translateY(0)}
.modalContent .ttl {
  margin-bottom: 20px;
  font-size: 2rem;
  color: #544A47;
}
.modalContent .categoryList {
  display: flex;
  flex-wrap: wrap;
}
.modalContent .categoryList li {
  width: 48.7%;
}
.modalContent .categoryList li:nth-child(even) {
  margin-left: 2.6%;
}
.modalContent .categoryList li:nth-child(n + 3) {
  margin-top: 6px;
}
.modalContent .categoryList li a {
  display: block;
  height: 100%;
  color: #000;
}
@media (min-width: 767.5px) {
  .categoryModalWrap,
  .categoryModalBtn {
    display: none;
  }
}

.pcOnly,.pcDisplay,.isPc{display:none!important}
@media (min-width: 767.5px) {
  .spOnly,.spDisplay,.isSp{display:none!important}
  .pcOnly,.pcDisplay,.isPc{display:block!important}
}