@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
}
html{
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body{ 
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: normal;
  min-width: 32.0rem;
  color: var(--black-color);
}
.en{
  font-family: "Cormorant Garamond", serif;
  font-weight: var(--fw-600);
  color: var(--main-color);
}
.mincho{
  font-family: "Shippori Mincho", serif;
  font-weight: var(--fw-600);
}
/* ------------------------------------------ */
/* ------------------------------------------ */
.tb{ display: none !important;}
.sp{ display: none !important;}
.tbsp{ display: none !important;}
/* ------------------------------------------ */
/* ------------------------------------------ */
.section-inner-max{ padding:15.0rem 0;}
.section-inner{ padding:12.0rem 0;}
.section-inner-min{ padding:8.0rem 0;}
.wrap-wide{ max-width: 128.0rem; margin:0 auto; padding-inline: max(4.0rem);}
.wrap-normal{ max-width: 108.0rem; margin:0 auto; padding-inline: max(4.0rem);}
.wrap-min{ max-width: 88.0rem; margin:0 auto; padding-inline: max(4.0rem);}
.bg-color-wht{ background-color: var(--white-color);}
.bg-color-key{ background-color: var(--main-color);}
.bg-color-sub{ background-color: var(--bg-main-color);}
.bg-color-gray{ background-color: var(--bg-gray-color);}
.fc-wht{ color: var(--white-color);}
.fc-key{ color: var(--main-color);}
.fc-red{ color: var(--red-color);}
.v-t{ vertical-align: top;}
.v-m{ vertical-align: middle;}
.v-b{ vertical-align: bottom;}
.t-l{ text-align: left;}
.t-c{ text-align: center;}
.t-r{ text-align: right;}
.mr-auto{ margin-right: auto;}
.ml-auto{ margin-left: auto;}
.fw-500{ font-weight: 500;}
.fw-600{ font-weight: 600;}
.m-t10{ margin-top: 1.0rem;}
.m-t20{ margin-top: 2.0rem;}
.m-t30{ margin-top: 3.0rem;}
.m-t40{ margin-top: 4.0rem;}
.m-t50{ margin-top: 5.0rem;}
.m-b20{ margin-bottom: 2.0rem;}
.p-t0{ padding-top: 0;}
.p-b0{ padding-bottom: 0;}
a{ color: var(--main-color); transition: 0.3s;}
img{ width: 100%; height: auto; vertical-align: bottom;}
.txt{ line-height: 2.0em;}
.txt-tall{ line-height: 2.5em;}
.txt-underline{ text-decoration: underline;}
.fs-sml{ font-size: 80%;}
.fs-tl{ font-size: 120%;}
h1,h2,h3,h4,h5,h6{ font-weight: unset;}
:root {
  --main-color: #6B1B7E;
  --main-color-hover: #541164;
  --white-color: #fff;
  --black-color: #333;
  --gray-color: #777;
  --red-color: #ce1e1e;
  --bg-maindark-color: #9E77AF;
  --bg-main-color: #EFEDF3;
  --bg-gray-color: #F8F8F8;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --txt-underline: underline;
  --fs-5: 0.5rem;
  --fs-6: 0.6rem;
  --fs-7: 0.7rem;
  --fs-8: 0.8rem;
  --fs-9: 0.9rem;
  --fs-10: 1.0rem;
  --fs-11: 1.1rem;
  --fs-12: 1.2rem;
  --fs-13: 1.3rem;
  --fs-14: 1.4rem;
  --fs-15: 1.5rem;
  --fs-16: 1.6rem;
  --fs-17: 1.7rem;
  --fs-18: 1.8rem;
  --fs-20: 2.0rem;
  --fs-22: 2.2rem;
  --fs-24: 2.4rem;
  --fs-26: 2.6rem;
  --fs-28: 2.8rem;
  --fs-30: 3.0rem;
  --fs-32: 3.2rem;
  --fs-36: 3.6rem;

  --mg-5: 0.5rem;
  --mg-10: 1.0rem;
  --mg-15: 1.5rem;
  --mg-20: 2.0rem;
  --mg-25: 2.5rem;
  --mg-30: 3.0rem;
  --mg-35: 3.5rem;
  --mg-40: 4.0rem;
  --mg-50: 5.0rem;
  --mg-60: 6.0rem;
  --mg-70: 7.0rem;
  --mg-80: 8.0rem;
  --mg-90: 9.0rem;
  --mg-100: 10.0rem;
  --header: 100px;
  --header-tb: 90px;
  --header-sp: 60px;
  --fixed-header: 80px;
  --fixed-header-tb: 70px;
  --fixed-header-sp: 60px;
}

@media  only screen and (max-width: 1199px){
  body{ font-size: 1.5rem;}
  .section-inner-max{ padding:12.0rem 0;}
  .section-inner{ padding:10.0rem 0;}
  .section-inner-min{ padding:8.0rem 0;}
  .pc{ display: none !important;}
  .tb{ display: block !important;}
  .sp{ display: none !important;}
  .pctb{ display: block !important;}
  .tbsp{ display: block !important;}
  .p-t0{ padding-top: 0;}
  .p-b0{ padding-bottom: 0;}
}

@media screen and (max-width: 767px) {
  body { width: 100%; font-size: 1.4rem;}
  .block{ width: 100%; max-width: 100%;}
  .section-inner-max{ padding:8.0rem 0;}
  .section-inner{ padding:8.0rem 0;}
  .section-inner-min{ padding:6.0rem 0;}
  .wrap-wide{ padding-inline: 4%;}
  .wrap-normal{ padding-inline: 4%;}
  .wrap-min{ padding-inline: 8%;}
  .pc{ display: none !important;}
  .tb{ display: none !important;}
  .sp{ display: block !important;}
  .pctb{ display: none !important;}
  .tbsp{ display: block !important;}
  .sp-t-l{ text-align: left;}
  .p-t0{ padding-top: 0;}
  .p-b0{ padding-bottom: 0;}
  .sp_m-t0{ margin-top: 0 !important;}
}
/* ------------------------------------------ */
/* ------------------------------------------ */
/* ------------------------------------------ */
/* ------------------------------------------ */
/* ------------------------------------------ */

/*  header
--------------------------------------------- */
.l-wrapper {
  position: relative;
  overflow: hidden;
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  height: var(--header);
}
.header-menu {
  position: relative;
  height: var(--header);
  overflow: visible;
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  padding-left: 2%;
  width: 100%;
  height: 100%;
}
.header-logo{
  position: relative;
  z-index: 10;
}
.header-logo a{
  display: flex;
  gap: var(--mg-20);
  align-items: flex-end;
}
.header-logo-img{
  opacity: 1;
  transition: 200ms;
  width: 13.0rem;
  height: auto;
  display: block;
}
.header-logo-img img{
  width: 100%;
}
.header-logo-txt{
  font-weight: var(--fw-600);
  font-size: 1.4rem;
}

/*  header-trigger
--------------------------------------------- */
.header-trigger {
  position: relative;
  z-index: 12;
  display: block;
  cursor: pointer;
  margin: 0 auto;
  width: 6.0rem;
  height: 6.0rem;
  border: 0.1rem solid var(--main-color);
  border-radius: 50%;
  box-sizing: border-box;
  background-color: var(--main-color);
  transition: .4s;
}
.header-trigger:hover{
  background-color: var(--main-color);
}
.header-trigger.is-opened .header-trigger_text span {
  background-color: var(--white-color) !important;
}
.header-trigger_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 2.6rem;
  margin: 0 auto;
  gap: 0.4rem; /* ← 3本線の間隔を均等に */
  position: relative;
}
.header-trigger_text span {
  display: block;
  width: 100%;
  height: 0.1rem;
  background-color: var(--white-color);
  transition: 0.4s;
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .header-trigger:hover .header-trigger_text span{ margin: 0.1rem 0;}
  .header-trigger.is-opened:hover .header-trigger_text span{ margin: unset;}
}
.header-trigger.is-opened .header-trigger_text span:nth-of-type(1) {
  -webkit-transform: translateY(0.25rem) rotate(-315deg);
  transform: translateY(0.25rem) rotate(-315deg);
}
.header-trigger.is-opened .header-trigger_text span:nth-of-type(2){
  display: none;
}
.header-trigger.is-opened .header-trigger_text span:nth-of-type(3) {
  -webkit-transform: translateY(-0.25rem) rotate(315deg);
  transform: translateY(-0.25rem) rotate(315deg);
}
.header-trigger.is-opened{
  border: 0.1rem solid var(--main-color);
  background-color: var(--bg-main-color);
}
.header-trigger.is-opened .header-trigger_text span {
  background-color: var(--main-color) !important;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9; /* メニューより下、背景より上 */
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

/*  header-scroll is-fixed スクロール固定
--------------------------------------------- */
.is-fixed .header{
  height: var(--fixed-header);
  background: var(--white-color);
  transition: 0.3s ease-in-out;
}
.is-fixed .header-menu {
  position: relative;
  height: var(--fixed-header);
  overflow: visible;
}
.is-fixed .header-logo-img{
  width: 9.0rem;
}
.is-fixed .header-logo-txt{
  font-size: 1.2rem;
}
.is-fixed .header-trigger {
  width: 5.2rem;
  height: 5.2rem;
}
.is-fixed .header-nav {
  top: 1.4rem;
}
.is-fixed .header-trigger_text {
  width: 2.2rem;
}

/*  header-open-menu button
--------------------------------------------- */
.header-open-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 12;
  display: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10.0rem 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  background-color: var(--bg-main-color);
}
.header-nav {
  position: fixed;
  top: 2.0rem;
  right: 2%;
  z-index: 12;
}

/*  header-open-menu container
--------------------------------------------- */
.open-menu-container{
  max-width: 130.0rem;
  margin: 0 auto;
  padding-inline: 6.0rem;
  display: flex;
  gap: 5.0rem;
  justify-content: space-between;
  color: var(--main-color);
}
.open-menu-container a{
  color: var(--main-color);
}
.open-menu-main{
  width: 86.0rem;
}
.open-menu-sub{
  width: 27.0rem;
}
.open-menu-item{
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
}
.open-menu-item a{
  transition: 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .open-menu-item a:hover{
    opacity: .6;
    transition: 0.3s ease-in-out;
  }
}
.open-menu-item:not(:first-child){
  margin-top: var(--mg-40);
}
.open-menu-item.sub{
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
  margin-bottom: var(--mg-10);
}
.open-menu-main .category-list ul li a,
.open-menu-main .tag-list ul li a{
  font-size: var(--fs-14);
}
.icon-key{
  margin-left: 0.6rem;
  width: 1.6rem;
  vertical-align: baseline;
}
.subkey img{
  width: 1.2rem;
  vertical-align: baseline;
}
.search-box{
  margin-top: 1.0rem;
}
.search-form {
  position: relative;
  width: 100%;
}
.search-input {
  width: 100%;
  max-width: 100%;
  background-color: var(--white-color);
  color: var(--main-color);
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  box-sizing: border-box;
  border: 1px solid #DDD6DE;
  border-radius: 0.3rem;
  padding: 1.2rem 4.5rem 1.0rem 1.5rem;
}
.search-input input::placeholder {
  color: #D1D1D1;
  font-size: 1.4rem;
}
.search-btn {
  position: absolute;
  top: 50%;
  right: 10px; /* 右端の余白 */
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; /* アイコンサイズに合わせて調整 */
  height: 24px;
}
.search-btn span img{
  vertical-align: baseline;
}
.search-input:focus {
  outline: none;
  box-shadow: none;
}
.header-sns.sns-list ul{
  justify-content: flex-start;
  margin-top: 4.5rem;
}
.header-official{
  margin-top: 4.5rem;
}
.header-official a{
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
}
.header-sublink{
  margin-top: var(--mg-15);
}
.header-sublink ul li a{
  font-size: var(--fs-14);
  color: var(--black-color);
}
@media (hover: hover) and (pointer: fine) {
  .header-official a:hover,
  .header-sublink ul li a:hover{ opacity:.6; transition: 0.3s ease-in-out;}
}
.header-sublink ul li{
  margin-top: 0.7rem;
}
@media  only screen and (max-width: 1279px){
  .open-menu-container{
    padding-inline: 4%;
    flex-direction: column;
    gap: 4.0rem;
  }
  .open-menu-main,
  .open-menu-sub{
    width: 100%;
  }
  .search-form,
  .search-input {
    max-width: 50.0rem;
  }
  .header-sns.sns-list ul,
  .header-official{
    margin-top: 3.0rem;
  }
  .header-sublink{
    max-width: 42.0rem;
  }
  .header-sublink ul{
    display: flex;
    gap: 1.0rem 2%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .header-sublink ul li{
    border-left: 1px solid #707070;
    line-height: 1.0em;
    margin-top: 0;
  }
  .header-sublink ul li:nth-child(odd){ width: 55%;}
  .header-sublink ul li:nth-child(even){ width: 43%;}
  .header-sublink ul li{ text-align: left;}
  .header-sublink ul li a{
    margin: 0 var(--mg-10);
  }
}
@media  only screen and (max-width: 1199px){
  .header,
  .header-menu {
    height: var(--header-tb);
  }
  .header-logo-img{
    width: 10.0rem;
  }
  .header-trigger {
    width: 5.2rem;
    height: 5.2rem;
  }
  .header-trigger_text {
    width: 2.2rem;
  }
  @media (hover: hover) and (pointer: fine) {
    .header-trigger:hover .header-trigger_text span{ margin: 0.05rem 0;}
  }
  .is-fixed .header,
  .is-fixed .header-menu {
    height: var(--fixed-header-tb);
  }
  .is-fixed .header-logo-img{
    width: 8.0rem;
  }
  .is-fixed .header-trigger {
    width: 4.6rem;
    height: 4.6rem;
  }
  .is-fixed .header-nav {
    top: 1.2rem;
  }
  .is-fixed .header-trigger_text {
    width: 2.0rem;
  }
}
@media screen and (max-width: 767px) {
  .header,
  .header-menu {
    height: var(--header-sp);
  }
  .header-logo-img{
    width: 6.6rem;
  }
  .header-logo a{
    gap: 1.0rem;
  }
  .header-trigger {
    width: 4.4rem;
    height: 4.4rem;
  }
  .header-nav {
    top: 0.8rem;
    right: 3%;
  }
  .header-trigger_text {
    width: 1.7rem;
    gap: 0.3rem;
  }
  .header-trigger.is-opened .header-trigger_text span:nth-of-type(1) {
    -webkit-transform: translateY(0.2rem) rotate(-315deg);
    transform: translateY(0.2rem) rotate(-315deg);
  }
  .header-trigger.is-opened .header-trigger_text span:nth-of-type(3) {
    -webkit-transform: translateY(-0.2rem) rotate(315deg);
    transform: translateY(-0.2rem) rotate(315deg);
  }
  .is-fixed .header,
  .is-fixed .header-menu{
    height: var(--fixed-header-sp);
  }
  .is-fixed .header-logo-img{
    width: 6.6rem;
  }
  .header-logo-txt{
    font-size: 1.2rem;
  }
  .is-fixed .header-trigger {
    width: 4.4rem;
    height: 4.4rem;
  }
  .is-fixed .header-nav {
    top: 0.8rem;
  }
  .is-fixed .header-trigger_text {
    width: 1.7rem;
  }
  .header-open-menu{
    padding: var(--mg-80) 0;  
  }
  .open-menu-container{
    gap: var(--mg-30);
  }
  .open-menu-item{
    font-size: var(--fs-15);
  }
  .open-menu-item:not(:first-child){
    margin-top: var(--mg-30);
  }
  .open-menu-item a{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .open-menu-item .sp-link2::after{
    content: "";
    display: inline-block;
    width: 0.8rem;
    height: 1.6rem;
    background: url(/assets/img/common/icon_arrow2link.svg) center / contain no-repeat;
    vertical-align: baseline;
  }
  .open-menu-item.link-member{
    font-size: var(--fs-14);
  }
  .open-menu-item.sub{
    font-size: var(--fs-14);
  }
  .open-menu-main .category-list ul li a,
  .open-menu-main .tag-list ul li a{
    font-size: var(--fs-13);
  }
  .icon-key{
    width: 1.4rem;
    height: 1.4rem;
    vertical-align: inherit;
  }
  .search-form{
    margin-top: var(--mg-10);
    font-size: var(--fs-13);
    max-width: 100%;
  }
  .search-input{
    padding: 1.3rem 1.5rem;
    max-width: 100%;
  }
  .search-box input::placeholder {
    font-size: var(--fs-12);
  }
  .header-sns.sns-list ul, .header-official{
    margin-top: var(--mg-30);
  }
  .header-official a{
    font-size: var(--fs-14);
  }
  .header-sublink{
    max-width: 100%;
  }
  .header-sublink ul li a{
    font-size: var(--fs-12);
    display: block;
  }
}

/* ------------------------------------------ */
/* ---------------------------------------------
共通パーツ
/* ------------------------------------------ */
/* --------------------------------------------- 

/*  ttl
--------------------------------------------- */
.ttl-wrapper-max{ margin-bottom: 6.0rem;}
.ttl-wrapper{ margin-bottom: 4.0rem;}
.ttl-wrapper-min{ margin-bottom: 2.0rem;}

.ttl-container{
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}
.main-ttl .en{ 
  font-size: 7.2rem;
  letter-spacing: -0.02em;
} 
.main-ttl .jp{ 
  font-weight: var(--fw-500);
}
.sub-ttl .en{ 
  font-size: 4.0rem;
} 
.sub-ttl .jp{ 
  font-weight: var(--fw-500);
}
.h3-ttl{ font-size: 2.2rem;}
.h4-ttl{ font-size: 1.8rem;}
@media  only screen and (max-width: 1199px){
  .main-ttl .en{ font-size: 6.4rem;} 
  .sub-ttl .en{ font-size: 3.6rem;} 
}
@media screen and (max-width: 767px) {
  .ttl-wrapper-max{ margin-bottom: 5.0rem;}
  .ttl-wrapper{ margin-bottom: 4.0rem;}
  .ttl-wrapper-min{ margin-bottom: 1.0rem;}
  .ttl-container{ 
    flex-wrap: wrap; 
    gap: 0.5rem;
    justify-content: center;
    text-align: center;
  }
  .ttl-container .sub-ttl{ width: 100%;}
  .main-ttl .en{ font-size: min(10.667vw, 6.4rem);} 
  .main-ttl .jp{ font-size: 1.4rem;}
  .sub-ttl .en{ font-size: min(7.6vw, 4.0rem);} 
  .sub-ttl .jp{ font-size: 1.4rem;} 
}

/*  article list
--------------------------------------------- */
.article-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6.0rem 5%;
}
.article-list02{
  grid-template-columns: repeat(2, 1fr);
}
.article-list03{
  grid-template-columns: repeat(3, 1fr);
}
.article-item{
  overflow: hidden;
  position: relative;
}
.article-item a{
  display: block; 
  text-decoration: none;
}
.article-img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0.8rem;
}
.article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.article-img .article-key{
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
}
@media (hover: hover) and (pointer: fine) {
  .article-item a:hover .article-img img { transform: scale(1.1);}
  .article-item a:hover .article-img .article-key img{ transform: unset;}
}
.article-block{
  padding-top: var(--mg-15);
}
.article-ttl{
  font-size: var(--fs-18);
  font-weight: var(--fw-600);
  padding-top: var(--mg-15);
}
.article-catfav{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.article-cat{
  border: 1px solid var(--main-color);
  border-radius: 2.0rem;
  font-size: var(--fs-12);
  font-weight: var(--fw-500);
  padding: 0.6rem 1.2rem;
  line-height: 100%;
}
.article-fav{
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.article-txt{
  color: #444;
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  padding-top: var(--mg-5);
}
.article-subtxt{
  display: flex;
  flex-wrap: wrap;
  gap: 2.0rem;
  color: var(--gray-color);
  font-size: var(--fs-12);
  font-weight: normal;
  padding-top: var(--mg-10);
}
.article-ttl,
.article-txt{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-tag-container{
  display: flex;
  flex-wrap: wrap;
  gap: 1.0rem;
}
.article-tag-container span:before{
  content: "#";
}

@media  only screen and (max-width: 1199px){
  .article-list {
    gap: 6.0rem 3%;
  }
  .article-ttl{
    font-size: var(--fs-16);
    padding-top: var(--mg-10);
  }
  .article-cat{
    font-size: var(--fs-10);
    padding: 0.5rem 1.1rem;
  }
  .article-txt{
    font-size: var(--fs-12);
  }
  .article-subtxt{
    gap: 0 1.5rem;
    font-size: var(--fs-11);
  }
  .article-tag-container{
    gap: 0.5rem;
  }
  .article-img .article-key{
    bottom: 1.0rem;
    right: 1.0rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media  only screen and (max-width: 767px){
  .article-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 5.0rem 4%;
  }
  .article-list02{
    grid-template-columns: repeat(2, 1fr);
  }
  .article-list03{
    grid-template-columns: repeat(2, 1fr);
  }
  .article-ttl{
    font-size: var(--fs-14);
    padding-top: 1.0rem;
  }
  .article-ttl,
  .article-txt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .article-cat{
    font-size: var(--fs-10);
    padding: 0.5rem 1.0rem;
  }
  .article-fav{
    gap: 0.2rem;
  }
  .article-subtxt{
    font-size: var(--fs-11);
    gap: 0 1.0rem;
  }
  .article-tag-container{
    gap: 0 0.5rem;
  }
  .article-img .article-key{
    bottom: 0.5rem;
    right: 0.5rem;
    width: 2.0rem;
    height: 2.0rem;
  }
}

/*  txtlink external
--------------------------------------------- */
.link-external::after {
  content: "";
  display: inline-block;
  width: 1.3rem;
  height: 1.0rem;
  padding-left: 0.5rem;
  background: url(/assets/img/common/icon_externallink-key.svg) center / contain no-repeat;
  vertical-align: baseline;
}
@media  only screen and (max-width: 767px){
  .link-external::after {
    width: 1.0rem;
    height: 0.8rem;
    padding-left: 1.0rem;
  }
}

/*  txtlink underline
--------------------------------------------- */
.link-underline{
  display: inline-block;
  position: relative;
}
.link-underline::before {
  background-color: var(--black-color);
  bottom: -3px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
  width: 100%;
}
.link-underline.cl-main::before{
  background-color: var(--main-color);
}
@media (hover: hover) and (pointer: fine) {
  .link-underline:hover::before { transform: scale(1, 1);}
}

/*  button
--------------------------------------------- */
.button-wrapper{ 
  margin-top: var(--mg-60);
}
.button-wrapper-min{
  margin-top: var(--mg-30);
}
/*  button bgcolor */
.button-round a{
  position: relative;
  background: var(--main-color);
  border-radius: 999px;
  color: var(--white-color);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: var(--fs-14);
  font-weight: var(--fw-400);
  padding: 1.8rem 0;
  min-width: 26.0rem;
  max-width: 26.0rem;
  margin: 0 auto;
  transition: 0.3s ease-in-out;
}
.button-round.btn-min a{
  padding: 1.4rem 0;
  min-width: 30.0rem;
  max-width: 30.0rem;
}
.button-round .link-arrow:after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: var(--mg-20);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 10px;
  background: url(/assets/img/common/icon_arrowlink-wht.svg) no-repeat center / contain;
  transition: none; 
  animation: none; 
  pointer-events: none;
}
/*  button 外部リンク */
.button-round .link-external:after{
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: var(--mg-20);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 10px;
  background: url(/assets/img/common/icon_externallink-wht.svg) no-repeat center / contain;
  transition: none; 
  animation: none; 
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .button-round a:hover{ background-color: var(--main-color-hover);}
  .button-round .link-arrow:hover::after,
  .button-round .link-external:hover::after{ animation: arrowSlide 0.3s ease-in-out forwards; }
}
@keyframes arrowSlide { 
  0% { transform: translate(0, -50%); opacity: 1; }
  49% { transform: translate(100%, -50%); opacity: 0; }
  50% { transform: translate(-100%, -50%); opacity: 0; }
  100% { transform: translate(0, -50%); opacity: 1; } 
}
@media  only screen and (max-width: 767px){
  .button-wrapper{ 
    margin-top: var(--mg-50);
  }
  .button-wrapper-min{
    margin-top: var(--mg-20);
  }
  .button-round a{
    padding: 1.6rem 0;
    min-width: max-content;
    max-width: 26.0rem;
  }
  .button-round.btn-min a{
    padding: 1.0rem 0;
    font-size: var(--fs-12);
  }
  .button-round .link-arrow:after{
    width: 1.0rem;
    height: 0.8rem;
  }
  .button-round .link-external:after{
    width: 1.0rem;
    height: 0.8rem;
  }
}

/*  button bordercolor */
.button-border a{
  position: relative;
  border: 1px solid var(--main-color);
  border-radius: 999px;
  color: var(--main-color);
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: var(--fs-14);
  font-weight: var(--fw-400);
  padding: 1.8rem 0;
  min-width: 26.0rem;
  max-width: 25.0rem;
  margin: 0 auto;
  transition: 0.3s ease-in-out;
}
.button-border.btn-min a{
  padding: 1.4rem 0;
  min-width: 30.0rem;
  max-width: 30.0rem;
}
.button-border .link-arrow:after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: var(--mg-20);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 10px;
  background: url(/assets/img/common/icon_arrowlink-wht.svg) no-repeat center / contain;
  filter: brightness(0) saturate(100%) invert(17%) sepia(40%) saturate(4039%) hue-rotate(272deg) brightness(89%) contrast(101%);
  transition: none; 
  animation: none; 
  pointer-events: none;
}
/*  button 外部リンク */
.button-border .link-external:after{
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: var(--mg-20);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 10px;
  background: url(/assets/img/common/icon_externallink-key.svg) no-repeat center / contain;
  transition: none; 
  animation: none; 
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .button-border .link-arrow:hover::after,
  .button-border .link-external:hover::after{ animation: arrowSlide 0.3s ease-in-out forwards; }
}
@media  only screen and (max-width: 767px){
  .button-border a{
    font-size: var(--fs-13);
    padding: 1.6rem 0;
    min-width: max-content;
    max-width: 26.0rem;
  }
  .button-border.btn-min a{
    padding: 1.0rem 0;
    font-size: var(--fs-12);
  }
  .button-border .link-arrow:after{
    width: 1.0rem;
    height: 0.8rem;
  }
  /*  button 外部リンク */
  .button-border .link-external:after{
    width: 1.0rem;
    height: 0.8rem;
  }
}
.button-flex{
  display: flex;
  justify-content: center;
  gap: 2.0rem;
}
@media  only screen and (max-width: 1199px){
  .button-flex{
    flex-direction: column;
    gap: 1.0rem;
  }
}

.single-block-contents .button-border.btn-min a{
  max-width: fit-content;
  padding: 1.4rem 4rem 1.4rem 3rem;
}
@media  only screen and (max-width: 767px){
  .single-block-contents .button-border.btn-min a{
    max-width: fit-content;
    padding: 1.0rem 4rem 1.0rem 3rem;
    box-sizing: border-box;
  }
}

/*  button txttype */
.button-txt a{
  position: relative;
  display: inline-block; 
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  transition: 0.3s ease-in-out;
  padding-right: var(--mg-40);
}
.button-txt .link-arrow:before {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--main-color);
  border-radius: 999px;
  color: var(--white-color);
}
.button-txt .link-arrow:after {
  position: absolute;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 8px;
  background: url(/assets/img/common/icon_arrowlink-wht.svg) no-repeat center / contain;
  transition: none; 
  animation: none; 
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .button-txt .link-arrow:hover::before{ background: var(--main-color-hover);}
  .button-txt .link-arrow:hover::after{ animation: arrowSlide 0.3s ease-in-out forwards; }
}

/*  category-list 共通
--------------------------------------------- */
.category-list ul{
  display: flex;
  gap: 1.0rem;
  flex-wrap: wrap;
}
.category-list ul li{
  width: calc((100% - 2rem)/3);
  display: flex;
}
.category-list ul li a{
  border: 1px solid #DDD6DE;
  border-radius: 0.3rem;
  background-color: var(--white-color);
  color: var(--main-color);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  padding: 1.0rem;
  width: 100%;
}
.category-list ul li a span{
  font-size: var(--fs-11); 
}
@media (hover: hover) and (pointer: fine) {
  .category-list ul li a:hover{ border: 1px solid var(--main-color);}
}
@media  only screen and (max-width: 767px){
  .category-list ul{ gap:  1.0rem 2%;}
  .category-list ul li{ 
    width: 49%;
  }
  .category-list ul li a{
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0.7rem 1.0rem;
    min-height: 3.8rem;
  }
  .category-list ul li a span{
    font-size: var(--fs-11); 
  }
}

/*  tag-list 共通
--------------------------------------------- */
.tag-list ul{
  display: flex;
  gap: 1.0rem;
  flex-wrap: wrap;
}
.tag-list ul li{
  width: max-content;
}
.tag-list ul li a{
  border-radius: 0.3rem;
  border: 1px solid #DDD6DE;
  color: var(--main-color);
  display: block;
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
  padding: 0.6rem 1.0rem;
  letter-spacing: -0.01em;
}
@media (hover: hover) and (pointer: fine) {
  .tag-list ul li a:hover{
    border: 1px solid var(--main-color);
    background-color: var(--main-color);
    color: var(--white-color);
  }
}
@media  only screen and (max-width: 767px){
  .tag-list ul{ gap:  1.0rem 2%;}
  .tag-list ul li a{ padding: 0.6rem 1.0rem; font-size: var(--fs-12);}
}

/*  sns-list 共通
--------------------------------------------- */
.sns-list ul{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  justify-content: center;
}
.sns-list ul li a img{
  height: var(--mg-25);
  transition: 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .sns-list ul li a:hover{ opacity: .8; transition: 0.3s ease-in-out;}
}
@media screen and (max-width: 767px) {
  .sns-list ul li a img{ 
    height: var(--mg-25);
  }
}

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

/*  footer
--------------------------------------------- */
.footer{
  background: url(/assets/img/common/footer_bg.webp) center / cover no-repeat;
}
.footer-container{
  padding: 10.0rem 0 48.0rem;
  text-align: center;
}
.footer-logo img{
  width: 20.0rem;
}
.footer-logotxt{
  margin-top: var(--mg-5);
  font-weight: var(--fw-500);
  font-size: var(--fs-14);
}
.footer-sns{
  margin-top: var(--mg-40);
}
.footer-official{
  margin-top: var(--mg-35);
}
.footer-sublink{
  margin-top: var(--mg-50);
}
.footer-sublink ul{
  display: flex;
  justify-content: center;
}
.footer-sublink ul li{
  border-left: 1px solid #707070;
  line-height: 1.0em;
}
@media  only screen and (min-width: 1200px){
  .footer-sublink ul li:first-child{
    border-left: none;
  }
}
.footer-sublink ul li a{
  color: var(--black-color);
  font-size: var(--fs-14);
  margin: 0 var(--mg-15);
  transition: 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .footer-sublink ul li a:hover{ opacity:.6; transition: 0.3s ease-in-out;}
}
.footer-copy{
  margin-top: var(--mg-30);
  font-size: var(--fs-12);
  font-weight: var(--fw-400);
  color: #6E6E6E;
}
@media  only screen and (max-width: 1199px){
  .footer-sublink{
    max-width: 50.0rem;
    margin: var(--mg-50) auto 0;
  }
  .footer-sublink ul{
    gap: 1.0rem 2%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .footer-sublink ul li:nth-child(odd){ width: 55%;}
  .footer-sublink ul li:nth-child(even){ width: 43%;}
  .footer-sublink ul li{ text-align: left;}
  .footer-sublink ul li a{
    margin: 0 var(--mg-10);
  }
}
@media screen and (max-width: 767px) {
  .footer{
    background: url(/assets/img/common/footer_bg_sp.webp) bottom center / contain no-repeat;
  }
  .footer-container{
    padding: 6.0rem 0 84vw;
  }
  .footer-logo img{
    width: 45%;
    max-width: 20.0rem;
  }
  .footer-sns{
    margin-top: var(--mg-30);
  }
  .footer-official{
    margin-top: var(--mg-25);
  }
  .footer-sublink{
    max-width: 100%;
  }
  .footer-sublink ul{
    gap: 1.0rem 2%;
  }
  .footer-sublink ul li a{
    font-size: var(--fs-12);
    margin: 0 var(--mg-5);
    display: block;
  }
  .footer-copy{
    font-size: var(--fs-10);
  }
}

/*  pagetop
--------------------------------------------- */
.pagetop {
  height: 5.0rem;
  width: 5.0rem;
  position: fixed;
  right: 2%;
  bottom: 2%;
  background: var(--main-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.pagetop_arrow {
  height: 1.0rem;
  width: 1.0rem;
  border-top: 1px solid var(--white-color);
  border-right: 1px solid var(--white-color);
  transform: translateY(20%) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
  .pagetop:hover{ background: var(--main-color-hover); transition: 0.3s ease-in-out;}
}
@media screen and (max-width: 767px) {
  .pagetop {
    height: 3.0rem;
    width: 3.0rem;
  }
  .pagetop_arrow {
    height: 0.6rem;
    width: 0.6rem;
  }
}

/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  ----------------------------------------  */
/*  scl ｜下から上、右から、左から出現
--------------------------------------------- */
.js-scl { opacity: 0; transform: translate(0, 0); transition: all 1.5s;}
.js-scl.js-scl-left { transform: translate(-30px, 0);}
.js-scl.js-scl-left-long { transform: translate(-160px, 0);}
.js-scl.js-scl-right { transform: translate(30px, 0);}
.js-scl.js-scl-up { transform: translate(0, 30px);}
.js-scl.js-scl-down { transform: translate(0, -30px);}
.js-scl.js-scl-normal { transform: translate(0, 0);}
.js-scl.scrollin { opacity: 1 !important; transform: translate(0, 0) !important;}
.time02 {transition-delay: .5s;}
.time03 {transition-delay: 1.0s;}
.time04 {transition-delay: 1.5s;}
.time05 {transition-delay: 2.0s;}
.time06 {transition-delay: 2.5s;}

/*  下から上に1文字ずつ遅延して現れるアニメーション
--------------------------------------------- */
.txt-anim-hidden{ overflow: hidden;}
.txt-anim { overflow: hidden;}
.char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: calc(0.04s * var(--char-index));
}
.txt-anim.is-active .char {
  transform: translateY(0);
}
.whitespace {
  display: inline-block;
}

/*  下から徐々に拡大して現れるアニメーション
--------------------------------------------- */
.scroll-image img {
  width: 100%;
  transform: scale(0.85) rotate(0.001deg);
  clip-path: inset(4.4%);
  transition: transform 0.1s ease-out, clip-path 0.1s ease-out;
  will-change: transform, clip-path;
}

/*  ----------------------------------------  */
/*  ----------------------------------------  */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}