@charset "UTF-8";
/* ////////////////////////////
WEB MAGAZINE
//////////////////////////// */
html,body { overflow-x: hidden; }
.didot {
  font-family: 'Didot', sans-serif;
}
.montserrat, time { /* 日付・Readmore用フォント */
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
@keyframes rotation {
  0% { transform: rotateZ(0);}
  100% { transform: rotateZ(360deg); }
}
.sp { display: none; }

/* ヘッダー */
header {
  background: #fff;
  padding: 50px 0 30px;
  position: relative;
  z-index: 2;
}
.hdr_ttl {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 50px;
}

/*見出し*/
.hdr_ttl + .page_head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.54545455%;
}
.hdr_ttl + .page_head .ph_left {
  width: 34.72727273%;
}
.hdr_ttl + .page_head .ph_right {
  /* width: 30.27272727%; */
  width: 25%;
  position: relative;
}
.hdr_ttl + .page_head .ph_right .txt_circle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -54%;
  /* width: 61.56156156%; */
  width: 78%;
}
.hdr_ttl + .page_head .ph_right .txt_circle img {
  animation: 18s linear infinite rotation;
}

/*見出し（トップ）*/
.indexP .page_head {
  position: relative;
}
.indexP .page_head::before {
  content: "";
  display: block;
  width: 100vw;
  background: #fff;
  position: absolute;
  height: 185px;
  top: 0;
  left: 0;
  margin: 0 calc(50% - 50vw);
  z-index: 0;
}
.indexP .page_head .ph_txt {
  width: 50%;
}
.indexP .page_head .ph_logo {
  width: 69.81818182%;
  margin-bottom: 11%;
}
.indexP .page_head .ph_ttl {
  width: 69.81818182%;
  position: relative;
  margin-bottom: 11%;
}
.indexP .page_head .ph_ttl .txt_circle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -9%;
  width: 55%;
}
.indexP .page_head .ph_ttl .txt_circle img {
  animation: 18s linear infinite rotation;
}
.indexP .page_head .ph_copy {
  font-size: min(1.4vw, 20px);
  font-weight: 700;
  line-height: 1.75;
  padding-right: 1em;
}
.ph_imgwrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
}
.ph_imgarea {
  position: relative;
  aspect-ratio: 1212/919;
  width: 50vw;
  margin: 0 0 0 auto;
}
.ph_imgarea .image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  animation: image-switch-animation 10s infinite;
}
.src1 {
  background: url(../img/mv_img01.png) no-repeat center center / contain;
}
.src2 {
  background: url(../img/mv_img02.png) no-repeat center center / contain;
}
@keyframes image-switch-animation {
  0%{ opacity: 0;}
  10%{ opacity: 1;}
  60%{ opacity: 1;}
  70%{ opacity: 0;}
  100%{ opacity: 0;}
}
.ph_imgarea .image:nth-of-type(1) {
  animation-delay: 0s;
}
.ph_imgarea .image:nth-of-type(2) {
  animation-delay: 5s;
}

/* コンテンツ（共通） */
#content_Wrap {
  padding: 100px 0 30px;
  background: #FFF000;
  position: relative;
  color: #231815;
}
.indexP #content_Wrap {
  padding-top: 0;
}
.inner_1100 {
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
}
#content_Wrap .con_leftTxt {
  writing-mode: vertical-rl;
  font-weight: 700;
  letter-spacing: 0.2em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  white-space: nowrap;
}
#content_Wrap::before {
  content: "";
  width: 100%;
  aspect-ratio: 217/39;
  background: url(../img/bottom.svg) no-repeat center bottom / 102%;
  position: absolute;
  left: 0;
  bottom: -3vw;
  z-index: 0;
}
.category_tag {
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  padding: 0.5em;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  letter-spacing: 0.2em;
}
.tag01 { background: #fc92e3; }
.tag02 { background: #a91d70; }
.tag03 { background: #f29600; }
.tag04 { background: #009fe8; }
.tag05 { background: #c8bb9b; }

.capimg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
}
.capimg.cap_B {
  color: #000;
}

.article_wrap {
  margin: 0 auto 200px;
}
.article_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 40px;
}
.article_list--item {
  position: relative;
}
.article_list--item .listItem_img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 15px;
}
.article_list--item .listItem_img img {
  width: 100%;
  transition: .3s;
}
.article_list--item .listItem_tag {
  position: absolute;
  top: 15px;
  left: -15px;
}
.article_list--item .listItem_tag .category_tag {
  min-width: 140px;
}
.article_list--item .listItem_date {
  font-size: 11.5px;
  letter-spacing: 0.2em;
}
.article_list--item .listItem_ttl {
  margin: 10px 0;
  font-weight: 700;
  line-height: 1.75;
}
.article_list--item .listItem_more {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  font-weight: 700;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;

}
.article_list--item .listItem_more::after {
  content: "";
  width: 0px;
  background: #231815;
  height: 1px;
  transition: .3s;
}
/*hover*/
.article_list--item a:hover .listItem_img img {
  transform: scale(1.1);
}
.article_list--item a:hover .listItem_more::after {
  width: 30px;
  margin-left: 10px;
}

#content_Wrap .con_btm_link {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
#content_Wrap .con_btm_link .bdr_link {
  position: relative;
  font-size: 36.5px;
  text-align: center;
  width: 130px;
}
#content_Wrap .con_btm_link .bdr_link::after {
  content: "";
  display: block;
  width: 130px;
  height: 2px;
  background: #231815;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -3px;
}
#content_Wrap .con_btm_link .link {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
#content_Wrap .con_btm_link .link.prev::before {
  content: "";
  width: 0.75em;
  height: 0.9em;
  background: #231815;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
#content_Wrap .con_btm_link .link.next::after {
  content: "";
  width: 0.75em;
  height: 0.9em;
  background: #231815;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/*コンテンツ（トップ）*/
.news_wrap {
  margin: 70px auto 100px;
}
.news_ttl {
  margin: 0 0 30px;
}
.news_ttl .flex {
  display: flex;
  align-items: baseline;
  margin: 0 0 15px;
  gap: 1em;
}
.news_ttl::after {
  content: "";
  display: block;
  width: 42vw;
  height: 1px;
  background: #231815;
  margin-left: calc(50% - 50vw);
}
.news_ttl h3 {
  font-size: 36px;
}
.news_ttl time {
  font-size: 13px;
  letter-spacing: 0.2em;
}
.news_content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.news_content .news_content--tag .category_tag {
  width: 180px;
  font-size: 16px;
}
.news_content .news_content--tag .category_tag.tag03 {
  width: 210px;
}
.news_content .news_content--ttl {
  font-size: 22px;
  font-weight: 700;
  background: #fff;
  padding: 0.25em 0.5em;
  min-width: 400px;
}

/* フッター */
footer {
  background: #eeeeef;
  padding: 35px 0 25px;
  text-align: center;
}
.ftr_logo {
  width: 212px;
  margin: 0 auto;
}
.ftr_link {
  font-size: 11px;
  display: flex;
  justify-content: center;
  margin: 15px 0 30px;
}
.ftr_link li:not(:last-child) {
  margin-right: 0.5em;
  display: flex;
  align-items: center;
}
.ftr_link li:not(:last-child)::after {
  content: "|";
  font-size: 1em;
  margin-left: 0.5em;
}
.ftr_link a { transition: .3s; }
.ftr_link a:hover { opacity: .6; }

.ftr_copyright {
  font-size: 11.5px;
  letter-spacing: 0.1em;
}


/*=========================================================================================================
tab
=========================================================================================================*/
@media screen and (max-width: 1024px) {

}


/*=========================================================================================================
調整
=========================================================================================================*/

@media screen and (max-width: 1450px) {

  .ph_imgarea {
    position: relative;
    aspect-ratio: 1212/919;
    width: 52vw;
    margin: 0 0 0 auto;
  }

}

@media only screen and (min-width: 1700px) and (max-width: 1999px) {

  .news_wrap {
    margin: 180px auto 100px;
  }

}
@media only screen and (min-width: 2000px) and (max-width: 2499px) {

  .news_wrap {
    margin: 350px auto 100px;
  }

}
@media only screen and (min-width: 2500px) and (max-width: 2999px) {

  .news_wrap {
    margin: 20% auto 100px;
  }

}
@media screen and (min-width: 3000px) {

  .news_wrap {
    margin: 25% auto 100px;
  }

}

/*=========================================================================================================
sp
=========================================================================================================*/
@media screen and (max-width: 767px) {

  .pc { display: none; }
  .sp { display: block; }

  /* ヘッダー */
  header {
    padding: 40px 0 25px;
  }

  /*見出し*/
  .hdr_ttl {
    font-size: 13px;
    margin-bottom: 30px;
  }
  .hdr_ttl + .page_head {
    gap: 5%;
  }
  .hdr_ttl + .page_head .ph_left {
    width: 48%;
  }
  .hdr_ttl + .page_head .ph_right {
    width: 45%;
    padding-right: 10%;
  }
  .hdr_ttl + .page_head .ph_right .txt_circle {
    right: -6%;
    width: 60%;
  }

  /*見出し（トップ）*/
  .indexP .page_head::before {
    height: 100px;
  }
  .indexP .page_head .ph_txt {
    width: 70%;
    margin: 0 auto;
  }
  .indexP .page_head .ph_logo {
    width: 100%;
  }
  .indexP .page_head .ph_ttl {
    width: 100%;
    margin-bottom: 11%;
  }
  .indexP .page_head .ph_ttl .txt_circle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -9%;
    width: 55%;
  }

  .indexP .page_head .ph_copy {
    font-size: 13px;
    padding-right: 0;
  }
  .ph_imgwrap {
    position: static;
  }
  .ph_imgarea {
    width: 90%;
    margin: 0 auto 30px;
  }

  /* コンテンツ（共通） */
  #content_Wrap {
    padding: 100px 0 30px;
    background: #FFF000;
    position: relative;
    color: #231815;
  }
  #content_Wrap .con_leftTxt {
    left: 3vw;
    font-size: 3vw;
  }

.capimg {
  font-size: 14px;
}

  .category_tag {
    font-size: 10px;
  }

  .article_wrap {
    margin: 0 auto 100px;
  }
  .article_list {
    width: 80%;
    margin: 0 auto;
  }
  .article_list--item .listItem_img {
    border-radius: 15px;
    margin-bottom: 10px;
  }
  .article_list--item .listItem_tag {
    top: 10px;
    left: -10px;
  }
  .article_list--item .listItem_tag .category_tag {
    min-width: 100px;
  }
  .article_list--item .listItem_date {
    font-size: 11px;
  }
  .article_list--item .listItem_ttl {
    margin: 7.5px 0;
  }
  .article_list--item .listItem_more {
    font-size: 11px;
  }
  .article_list--item .listItem_more::after {
    content: none;
  }


  #content_Wrap .con_btm_link {
    gap: 20px;
  }
  #content_Wrap .con_btm_link .bdr_link {
    font-size: 22px;
    width: 100px;
  }
  #content_Wrap .con_btm_link .bdr_link::after {
    width: 100px;
  }
  #content_Wrap .con_btm_link .link {
    font-size: 13px;
  }

  /*コンテンツ（トップ）*/
  .news_wrap {
    margin:40px auto 50px;
  }
  .news_ttl {
    margin: 0 0 20px;
  }
  .news_ttl .flex {
    margin: 0 0 10px;
  }
  .news_ttl::after {
    width: 86vw;
  }
  .news_ttl h3 {
    font-size: 25px;
  }
  .news_ttl time {
    font-size: 12px;
  }
  .news_content {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .news_content .news_content--tag .category_tag {
    width: auto;
    font-size: 11px;
    letter-spacing: 0;
  }
  .news_content .news_content--ttl {
    font-size: 15px;
    padding: 0.25em 0.5em;
    min-width: auto;
  }

  /* フッター */
  footer {
    padding: 20px 0 15px;
  }
  .ftr_logo {
    width: 190px;
  }
  .ftr_link {
    margin: 15px 0 20px;
  }
  .ftr_copyright {
    font-size: 10px;
  }

}