@charset "UTF-8";


/*
=======================================
= Animaton
=======================================
*/

.js-effect {
  opacity: 0;
  will-change: opacity, transform;
  transition: all 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.fadeIn      { transform: none; }
.fadeInUp    { transform: translateY(40px); }
.fadeInDown  { transform: translateY(-40px); }
.slideLeft   { transform: translateX(-50px); }
.slideRight  { transform: translateX(50px); }
.zoomIn      { transform: scale(0.9); }
.zoomInDown  { transform: scale(1.2) translateY(-60px); }
.zoomInUp    { transform: scale(1.2) translateY(60px); }
.blur        { filter: blur(10px); transform: scale(1.05); }

.bounceInUp    {
  transform: translateY(100px); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bounceInDown  {
  transform: translateY(-100px); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bounceInLeft  {
  transform: translateX(-100px);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bounceInRight {
  transform: translateX(100px);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rubberBand {
  0% { transform: scale(1); }
  30% { transform: scaleX(1.25) scaleY(0.75); }
  40% { transform: scaleX(0.75) scaleY(1.25); }
  60% { transform: scaleX(1.15) scaleY(0.85); }
  100% { transform: scale(1); }
}
@keyframes heartBeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

.js-effect.is-show.bounceIn   {
  animation: bounceIn 0.8s both;
}
.js-effect.is-show.rubberBand {
  animation: rubberBand 0.8s both;
  opacity: 1;
}
.js-effect.is-show.heartBeat  {
  animation: heartBeat 1.3s ease-in-out both;
  opacity: 1;
}
.js-effect.is-show {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  filter: blur(0) !important;
  animation-delay: inherit;
}

.reveal {
  position: relative;
  display: inline-block;
  color: transparent;
  transition: color 0s 0.4s;
}
.reveal::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-black);
  z-index: -1;
}
.reveal.is-animated {
  color: #fff;
}
.reveal-exit.is-animated::after {
  animation: reveal-exit-anim 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes reveal-exit-anim {
  0%   { width: 0; left: 0; }
  50%  { width: 100%; left: 0; }
  100% { width: 0; left: 100%; }
}

.reveal-stay.is-animated::after {
  animation: reveal-stay-anim 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes reveal-stay-anim {
  0%   { width: 0; }
  100% { width: 100%; }
}

/* Delay classes */
.delay-1  { transition-delay: 0.1s !important; animation-delay: 0.1s !important; }
.delay-2  { transition-delay: 0.2s !important; animation-delay: 0.2s !important; }
.delay-3  { transition-delay: 0.3s !important; animation-delay: 0.3s !important; }
.delay-4  { transition-delay: 0.4s !important; animation-delay: 0.4s !important; }
.delay-5  { transition-delay: 0.5s !important; animation-delay: 0.5s !important; }
.delay-6  { transition-delay: 0.6s !important; animation-delay: 0.6s !important; }
.delay-7  { transition-delay: 0.7s !important; animation-delay: 0.7s !important; }
.delay-8  { transition-delay: 0.8s !important; animation-delay: 0.8s !important; }
.delay-9  { transition-delay: 0.9s !important; animation-delay: 0.9s !important; }
.delay-10 { transition-delay: 1.0s !important; animation-delay: 1.0s !important; }
.delay-12 { transition-delay: 1.2s !important; animation-delay: 1.2s !important; }
.delay-14 { transition-delay: 1.4s !important; animation-delay: 1.4s !important; }
.delay-16 { transition-delay: 1.6s !important; animation-delay: 1.6s !important; }
.delay-18 { transition-delay: 1.8s !important; animation-delay: 1.8s !important; }
.delay-20 { transition-delay: 2.0s !important; animation-delay: 2.0s !important; }


/* hover Animation */
.ov-action-item-non .ov-action-item_ttl span,
.ov-action-item .ov-action-item_ttl span {
    background-image: linear-gradient(#222, #222);
    background-repeat: no-repeat;
    transition: background-size 0.6s cubic-bezier(0.17, 0.935, 0.305, 1);
}
.ov-action-item-non .ov-action-item_ttl span {
    background-position: 100% 100%;
    background-size: 0% 1px;
}
.ov-action-item-non:hover .ov-action-item_ttl span {
    background-position: 0% 100%;
    background-size: 100% 1px;
}
.ov-action-item .ov-action-item_ttl span {
    background-position: 0% 100%;
    background-size: 100% 1px;
}
.ov-action-item:hover .ov-action-item_ttl span {
    background-position: 100% 100%;
    background-size: 0% 1px;
}
.ov-action-item-non .ov-action-item__thumb img,
.ov-action-item .ov-action-item__thumb img {
    transition: transform 0.4s cubic-bezier(0.17, 0.935, 0.305, 1);
}
.ov-action-item-non:hover .ov-action-item__thumb img,
.ov-action-item:hover .ov-action-item__thumb img {
    transform: scale(1.1);
    opacity: .8;
}


/*
=======================================
= Swiper
=======================================
*/
.swiper-wrap { position: relative; }
.swiper-button-next,.swiper-button-prev {
  background-image: none;
}
.swiper-button-prev,.swiper-button-next {
    display: grid;
    cursor: pointer;
    place-content: center;
    transform: scale(1);
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    border: 1px solid var(--color-black);
    background-color: #fff;
    transition: 0.3s ease all;
    z-index: 2;
}
.swiper-button-prev::after,.swiper-button-next::after {
    background-size: 1rem auto;
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.swiper-button-prev::after { background-image: url("../img/icon/prev-arrow.svg"); }
.swiper-button-next::after { background-image: url("../img/icon/next-arrow.svg"); }

.swiper-button-prev:hover,.swiper-button-next:hover {
  opacity: .4;
}
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled {
  display: none;
}
@media screen and (max-width: 960px) {
    .swiper-button-prev, .swiper-button-next {
      width: 4rem;
      height: 4rem;
    }
    .swiper-button-prev::after,.swiper-button-next::after {
      background-size: 8px auto;
      width: 8px;
      height: 8px;
  }
}

/* Swiper Controller */
.swiper-controller {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
}
.swiper-controller .swiper-button-next,
.swiper-controller .swiper-button-prev {
    position: relative;
    top: auto;
    margin-top: auto;
}
.swiper-controller .swiper-button-prev {
    left: auto;
    margin-right: 24px;
}
.swiper-controller .swiper-button-next {
    right: auto;
    margin-left: 24px;
}
.swiper-controller .swiper-pagination {
    position: relative;
    text-align: center;
    transition: 0.3s opacity;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10;
}
.swiper-pagination-bullet {
  background-color: #fff;
  opacity: .3;
}
.swiper-controller .swiper-horizontal>.swiper-pagination-bullets,
.swiper-controller .swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-controller .swiper-pagination-custom,
.swiper-controller .swiper-pagination-fraction {
    width: auto;
}
.swiper-controller .swiper-pagination-bullet-active {
    background: #fff;
}

/* Common Styles */
/* .swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -30px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 6px;
} */



/*
=======================================
= Btn
=======================================
*/

/* Link btn
---------------------------------*/
.link-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: var(--color-black);
  border-radius: 60px;
  border: 2px solid var(--color-black);
  color: #fff;
  padding: 2rem 4rem 2rem 3.2rem;
  width: 26rem;
  z-index:1;
  overflow: hidden;
  transition: .3s ease-in-out;
}
.link-btn::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 1.6rem;
  width: 2.8rem;
  height: 2.8rem;
  -webkit-mask-image: url(../img/icon/btn-circle-arrow.svg);
  mask-image: url(../img/icon/btn-circle-arrow.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: translateY(-50%);
  background-color: #fff;
}
.link-btn.blank-link::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 1.6rem;
  width: 2.8rem;
  height: 2.8rem;
  -webkit-mask-image: url(../img/icon/btn-circle-blink.svg);
  mask-image: url(../img/icon/btn-circle-blink.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: translateY(-50%);
  background-color: #fff;
}
.link-btn .link-btn__txt{
  position: relative;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: .02em;
}
@media screen and (max-width: 960px) {
  .link-btn {
    width: 22rem;
    padding: 1.6rem 2.4rem 1.6rem 2.4rem;
  }
  .link-btn .link-btn__txt {
    font-size: 1.3rem;
  }
  .link-btn::after,
  .link-btn.blank-link::after {
    width: 2rem;
    height: 2rem;
  }
}
@media (hover: hover){
  .link-btn:hover {
    background-color: #fff;
    color:#222;
  }
  .link-btn:hover::after {
    background-color: #222;
  }
}
@media (hover: none) {
  .link-btn:active{
    transform: scale(.95);
    background-color: #fff;
    color:#222;
  }
}


/* Detail Link
---------------------------------*/
.detail-link {
  border-radius: 6rem;
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #C3C3C3;
  padding: 1.8rem 3.2rem 1.8rem 3.2rem;
  text-align: center;
  margin: 0;
  z-index: 1;
  overflow: hidden;
  transition: .3s ease-in-out;
  cursor: pointer;
}
.detail-link .txt{
  position: relative;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  padding-right:1.2rem;
}
.detail-link .txt::before {
  content: "";
  width: .8rem;
  height: .8rem;
   -webkit-mask-image: url(../img/icon/next-arrow.svg);
  mask-image: url(../img/icon/next-arrow.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--color-black);
  position: absolute;
  top: calc(50% - .4rem);
  right:0;
}
.detail-link.blank-link .txt::before {
  content: "";
  width: .8rem;
  height: .8rem;
   -webkit-mask-image: url(../img/icon/icon-blanklink.svg);
  mask-image: url(../img/icon/icon-blanklink.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--color-black);
  position: absolute;
  top: calc(50% - .4rem);
  right:0;
}
@media screen and (max-width: 960px) {
  .detail-link{
    min-width: auto;
    padding: 1.8rem 2.4rem 1.8rem 2.4rem;
  }
  .detail-link .txt {
    font-size: 1.3rem;
  }
}

@media (hover: hover){
  .detail-link:hover {
     border: 1px solid var(--color-black);
     background-color: var(--color-black);
     color:#fff;
  }
  .detail-link:hover::before {
    background-color: #fff;
  }
  .detail-link.blank-link:hover .txt::before {
    background-color: #fff;
  }
}
@media (hover: none) {
  .detail-link:active{
    transform: scale(.95);
    border: 1px solid var(--color-black);
    background-color: var(--color-black);
    color:#fff;
  }
}

.c-btn {
  text-align: center;
  margin-top: 8rem;
}
.linkbtns-2row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  row-gap: 1rem;
  max-width: 54rem;
  margin-top: 4.8rem;
}

@media screen and (max-width: 960px) {
  .c-btn {
    margin-top: 4rem;
  }
  .linkbtns-2row {
    grid-template-columns: repeat(1, 1fr);
    margin: 3.2rem auto 0;
    text-align: center;
  }
}

.ttl-link {
    display: inline-block;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.44;
    padding-right: 3rem;
    position: relative;
}
.ttl-link::before {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/icon/link-arrow.svg) center / cover;
    transform: translateY(-50%);
}
@media screen and (max-width:960px) {
    .ttl-link  {
        font-size: 1.8rem;
        padding-right: 2.6rem;
    }
    .ttl-link::before {
        width: 2rem;
        height: 2rem;
    }
}

/*
=======================================
= Category/Tag
=======================================
*/
.entry-meta {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: 0;
    margin-bottom: 1rem;
}
.entry-meta .entry-date {
    font-family: var(--font-family-en);
    margin-left: 1rem;
}
/* entry-category */
.entry-category,.entry-category-nolink{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    z-index: 2;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}
.entry-category li a{
    border-radius: .4rem;
    display: inline-flex;
    letter-spacing: 0;
    padding: .2rem .8rem .2rem;
    /* background-color: #fff; */
    border: 1px solid var(--color-black);
    color: var(--color-black);
}
.entry-category li a:hover{
    background-color: #111;
    border:1px solid #111;
    color:#fff;
}
.entry-category-nolink li{
    border-radius: .4rem;
    display: inline-flex;
    letter-spacing: 0;
    padding: .2rem .8rem .2rem;
    /* background-color: #fff; */
    border: 1px solid var(--color-black);
    color: var(--color-black);
}
/* entry-taglist */
.entry-taglist,
.entry-taglist-nolink,
.entry-round-taglist {
    font-size: 1.2rem;
    letter-spacing: 0;
    line-height: 1.22;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    gap: 10px;
    z-index: 2;
}
.entry-taglist a {
    color:var(--color-black);
    display: inline-block;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    transition: .3s ease;
    position: relative;
    z-index: 2;
}
.entry-taglist a:hover {
    opacity: .4;
}
.entry-taglist-nolink li {
    color: var(--color-black);
    position: relative;
}
.entry-taglist a:before,
.entry-taglist-nolink li:before {
    content: '#';
    color: var(--color-black);
    padding-right: 0.2em;
    vertical-align: middle;
}
.entry-round-taglist a {
    color:var(--color-black);
    border-radius: 60px;
    display: inline-block;
    border: rgba(255, 255, 255, .12) solid 1px;
    background-color: #fff;
    padding: .8rem .8rem .6rem;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    transition: .3s ease;
    position: relative;
    z-index: 2;
}
.entry-round-taglist li a:before {
    content: '#';
    color: var(--color-black);
    padding-right: 0.3em;
}
.entry-round-taglist li a:hover {
    border:1px solid var(--color-black);
    background: var(--color-black);
    color:#fff;
}
.entry-round-taglist li a:hover::before {
    color: #fff;
}

@media only screen and ( max-width:960px) {
    .entry-category,.entry-category-nolink{
        font-size: 1rem;
    }
    .entry-category-nolink li{
        padding: .5rem .5rem .5rem;
    }
    .entry-taglist,.entry-round-taglist{
        font-size: 1rem;
    }
}



/*
=======================================
= Wordpress
=======================================
*/
/* WordPress Specific */
body.admin-bar #header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar #header {
        top: 46px;
    }
}

/* wp-pagenavi
---------------------------------*/
.wp-pagenavi {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8rem;
  font-family: var(--font-family-en);
}
.wp-pagenavi .pages {
	display: none
}
.wp-pagenavi .page,
.wp-pagenavi .current,
.wp-pagenavi .first,
.wp-pagenavi .last {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  /* background-color: #fff; */
  border: 1px solid var(--color-black);
  border-radius: 100%;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  margin: 2px 1px;
  height: 50px;
  width: 50px;
  position: relative;
}
.wp-pagenavi .current {
  border: 1px solid  var(--color-black);
  background:  var(--color-black);
  color: #fff ;
}
.wp-pagenavi .page:hover,
.wp-pagenavi .last:hover {
  background: #fff;
  border: 1px solid  var(--color-black);
  color:  var(--color-black);
}
.wp-pagenavi .extend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1rem;
  height: .2rem;
  margin: 0 .8rem
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
  position: relative;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-black);
  border: 1px solid var(--color-black);
  border-radius: 5rem;
}
.wp-pagenavi .previouspostslink::before,
.wp-pagenavi .nextpostslink::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-image: url(../img/icon/next-arrow.svg), url(../img/icon/next-arrow-w.svg);
  background-size: contain, 0 0;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover {
  background-color:  var(--color-black);
  color: #fff;
}
.wp-pagenavi .previouspostslink:hover::before,
.wp-pagenavi .nextpostslink:hover::before {
  background-size: 0 0, contain
}
.wp-pagenavi .previouspostslink {
  -webkit-box-ordinal-group: 0;
  -webkit-order: -1;
  -ms-flex-order: -1;
  order: -1;
  padding: 1.4rem 2rem 1.4rem 3.2rem;
  margin-right: 1rem;
}
.wp-pagenavi .previouspostslink::before {
  left: 1.8rem;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1)
}
.wp-pagenavi .nextpostslink {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  padding: 1.4rem 3.2rem 1.4rem 2rem;
  margin-left: 1rem;
}
.wp-pagenavi .nextpostslink::before {
  right: 1.8rem;
}
@media screen and (max-width: 960px) {
  .wp-pagenavi {
    margin-top: 4rem;
  }
  .wp-pagenavi .page,
  .wp-pagenavi .current,
  .wp-pagenavi .first,
  .wp-pagenavi .last,
  .wp-pagenavi .previouspostslink,
  .wp-pagenavi .nextpostslink {
    font-size: 1.1rem;
    height: 36px;
    width: 36px;
  }
  .wp-pagenavi .extend {
    display: none;
  }
  .wp-pagenavi .previouspostslink,
  .wp-pagenavi .nextpostslink {
    display: none
  }
}

/* Table of Contents (TOC+) */
#toc_container {
    background: #FAFAFA !important;
    margin: 4rem 0 !important;
    width: 100% !important;
}

#toc_container .toc_title {
    background: var(--color-black);
    color: #fff;
    padding: 1.6rem 3.2rem !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
}

#toc_container .toc_list { padding: 1rem 4rem 3rem; }

#toc_container .toc_list li::before {
    content: '';
    width: 8px;
    height: 1px;
    background: #222;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}