@charset "UTF-8";

/* CSS INFORMATION -====================================================
File name : add.css
Description : 追加パーツ
===================================================================== */
/* =====================================================================
    共通（大枠）
======================================================================*/
.main section.intro ~ section + section {
  padding-top: 0;
}


/* =====================================================================
    共通
======================================================================*/
.main {
  overflow: hidden;
}
a.btn1 {
  overflow: hidden;
  background: transparent !important;
}

.btn1::after {
  height: 0.6em;
  border: none;
  background-color: #ffffff;
  transform: none;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.btn1::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 200%;
  height: 100%;
  background: url(../images/common/bg_btn.jpg) no-repeat top right;
  background-size: cover;
  transition: 0.8s ease;
  z-index: -1;
}
.btn1:hover::before {
   right: -100%;
   background-position: top left;
}

.sns_list li a {
  color: var(--color-bg4);
  background: transparent;
  overflow: hidden;
  position: relative;
}

.sns_list li a::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 200%;
  height: 100%;
  background: url(../images/common/bg_btn.jpg) no-repeat top right;
  background-size: cover;
  transition: 0.8s ease;
  z-index: -1;
}

.sns_list li a:hover::before {
  right: -100%;
   background-position: top left;
}
.nav_sns li a {
  background: var(--color-sns);
}

.nav_sns li a svg,
.sns_list li a svg {
  fill: var(--color-bg3);
}

.nav_menu li a {
  background-position: bottom center;
  transition: all .3s;
}
.nav_menu li a img {
  position: relative;
  z-index: 2;
}
.nav_menu li a:hover {
    opacity: 1 !important;
}
.nav_menu li a::after {
    transition: all .3s;
    opacity: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/nav/bg_nav_hover.png) no-repeat center center/contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.nav_menu li a:hover::after {
        opacity: 1;

}

.delivery_bnr_content p {
  color: #fff;
  padding-bottom: 0.5em;
}

.pagetop a::after {
  border-color: #fff;
}

.deco_light,
.deco_dark {
  position: relative;
}
.deco_light p,
.deco_dark p {
  position: relative;
  z-index: 3;
}
.deco_light::before,
.deco_light::after,
.deco_dark::before,
.deco_dark::after {
  content: "";
  position: absolute;
  display: block;
  z-index: 1;
}

.deco_light::before,
.deco_dark::before {
    width: 124px;
    height: 313px;
    left: -45px;
    bottom: -10px;
  background: url(../images/common/deco_textbox_left02_sp.png) no-repeat bottom left/cover;
}
.deco_light::after,
.deco_dark::after {
    width: 160px;
    height: 262px;
    right: -44px;
    bottom: -10px;
  background: url(../images/common/deco_textbox_right02_sp.png) no-repeat bottom right/cover;
}

.deco_dark::before {
  background-image: url(../images/common/deco_textbox_left_sp.png);
}
.deco_dark::after {
  background-image: url(../images/common/deco_textbox_right_sp.png);
}
@media screen and (min-width: 768px) {
  .deco_light::before {
  background: url(../images/common/deco_textbox_left02.png) no-repeat bottom left/contain;
  }
  .deco_light::after {
  background: url(../images/common/deco_textbox_right02.png) no-repeat bottom right/contain;
  }
  .deco_dark::before {
  background: url(../images/common/deco_textbox_left.png) no-repeat bottom left/contain;
  }
  .deco_dark::after {
  background: url(../images/common/deco_textbox_right.png) no-repeat bottom right/contain;
  }
}



/* =====================================================================
    intro
======================================================================*/
#intro {
  background: none;
  position: relative;
}
#intro::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-sns);
  opacity: 0.5;
}
.intro_content strong {
  font-weight: bold;
}
.intro_content .bold {
  font-weight: 700;
}
.intro_content .exbold {
  font-weight: 800;
  font-size: 1.2em;
}
.intro_content .grade {
  background: linear-gradient(90deg, rgb(240, 158, 58), rgba(54, 103, 129, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color3 {
  color:rgb(219, 123, 206);
}
.color4 {
  color:rgb(234, 109, 54);
}


/* =====================================================================
    cast
======================================================================*/
.cast_list li > dl dt figure {
  position: relative;
}
.cast_list li > dl dt figure::before,
.cast_list li > dl dt figure::after {
  content: "";
  display: block;
  position: absolute;
  opacity: 0.7;
}
.cast_list li > dl dt figure::before {
  width: calc(150 / 210 * 100%);
  height: 5rem;
  background: url(../images/top/dec_01.png) no-repeat top left/contain;
  top: -2rem;
  left: -0.6rem;
}
.cast_list li > dl dt figure::after {
  width: calc(150 / 210 * 100%);
  height: 5rem;
  background: url(../images/top/dec_02.png) no-repeat bottom right/contain;
  bottom: -0.8rem;
  right: -1.3rem;
}
.cast_list li > dl dd .cast_name {
  font-size: 4.4rem;
  font-weight: 500;
}
.cast_list li > dl dd .cast_name small {
  font-size: 50%;
  font-weight: normal;
  letter-spacing: 0.1em;
}
.cast_list li > dl dd .cast_name span {
  font-size: 2.6rem;
  display: inline-block;
  color: var(--color-bg4);
  background: var(--color-base);
  line-height: 1;
  padding: 0.5rem 2rem;
  margin-left: 0.7em;
}
[data-ruby] {
	position: relative;
}
[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -1.2em;
	left: -0.5em;
	right: 0;
	margin: auto;
	font-size: 0.4em;
  text-align: center;
  width: calc(100% + 1em);
}
em {
  font-style: normal;
}

.cast_list li dl.comment {
  width: 100%;
  flex-wrap: wrap;
}
.cast_list li dl.comment dt {
  width: 100%;
  text-align: center;
  padding: 1rem !important;
  border-top: 1px solid var(--color-accent1);
}
.cast_list li dl.comment dd {
  width: 100%;
}

.cast_list li dl p {
  font-size: 120%;
}
@media screen and (min-width: 768px) {
  .cast_list li dl p {
    font-size: 100%;
  }
  .cast_list li > dl dd .cast_name {
    font-size: 3.4rem;
  }
  .cast_list li > dl dd .cast_name small {
    font-size: 50%;
  }
  .cast_list li > dl dd .cast_name span {
    font-size: 2rem;
    padding: 0.5rem 3rem;
    margin-left: 1em;
  }

}

/* =====================================================================
    staff
======================================================================*/
.line_degi {
  background: url(../images/common/line_degi.png) repeat-x top left/auto;
}

.staff_column {
  margin: 12rem auto 0;
  padding-top: 12rem;
}
.staff_column .staff_name {
  width: 100%;
  margin: auto;
}
.staff_column .staff_name dt {
  width: 70%;
  text-align: left;
  color: var(--color-bg4);
  background: var(--color-base);
  padding: 0.2em 1em;
  font-size: 3rem;
  box-sizing: border-box;
  margin-bottom: 2rem;
}
.staff_column .staff_name dd {
  width: 100%;
  font-size: 3.2rem;
  margin-bottom: 6rem;
  text-align: center;
}
.staff_column .staff_name dd span {
  display: block;
}
.staff_column .staff_name dd span small {
  display: block;
  font-size: 60%;
}
.staff_column .staff_name dd span:not(:last-child) {
  margin-bottom: 0.6em;
}

.staff_column .staff_name:nth-child(2) dt {
  background: rgba(0,0,0,0.9);
}
.staff_column .staff_name:nth-child(3) dt {
  background: rgba(0,0,0,0.85);
}
.staff_column .staff_name:nth-child(4) dt {
  background: rgba(0,0,0,0.8);
}
.staff_column .staff_name:nth-child(5) dt {
  background: rgba(0,0,0,0.75);
}
.staff_column .staff_name:nth-child(6) dt {
  background: rgba(0,0,0,0.7);
}
.staff_column .staff_name:nth-child(7) dt {
  background: rgba(0,0,0,0.65);
}
.staff_column .staff_name:nth-child(8) dt {
  background: rgba(0,0,0,0.6);
}
.staff_column .staff_name:nth-child(9) dt {
  background: rgba(0,0,0,0.55);
}
@media screen and (min-width: 768px) {
  .staff_column .staff_name {
    width: 90%;
  }
  .staff_column .staff_name dt {
    width: 50%;
    font-size: 2rem;
    text-align: right;
  }
  .staff_column .staff_name dd {
    width: 40%;
    font-size: 2.2rem;
    margin-bottom: 6rem;
    margin-left: 2em;
    text-align: left;
  }
  .staff_column .staff_name dd span small {
    display:inline;
  }
  .staff_column .staff_name dd span:not(:last-child) {
    margin-bottom: 1em;
  }
  .staff_column .staff_name {
    display: flex;
    justify-content: center;
    align-items:flex-start;
  }
}



/* =====================================================================
    chart
======================================================================*/
.chart_list_comment {
  padding: 1rem 0 0 0;
}

.chart_tab {
  position: relative;
  width: 100%;
  margin: 6rem 0;
}

.chart_tab > li {
  display: none;
}

.chart_tab > li.is-active {
  display: block;
}

.chart_panel {
  position: relative;
  width: 100%;
}

.chart_panel > li {
  display: none;
}

.chart_panel > li.is-show {
  display: block;
}

.chart_order {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  width: 100%;
}

.chart_order > li {
  width: calc(100% / 3);
}

.chart_order > li > span {
  position: relative;
  display: inline-block;
  padding: 0.5rem 3rem;
  color: var(--color-accent1);
  font-family: var(--font-en);
  font-size: 3.2rem;
  font-weight: 900;
}

.chart_order > li > span:has(a) {
  padding: 0;
}

.chart_order > li > span > a {
  display: block;
  padding: 0.5rem 3rem;
  color: var(--color-accent1);
}

.chart_order > li.prev {
  text-align: left;
}

.chart_order > li.prev > span {
  border-bottom: 1px solid var(--color-accent1);
  cursor: pointer;
}

.chart_order > li.prev > span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 0.4em;
  height: 0.5em;
  background-color: var(--color-accent1);
  transform: translateY(-50%);
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}

.chart_order > li.current {
  text-align: center;
}

.chart_order > li.current > span {
  border: 1px solid var(--color-accent1);
}

.chart_order > li.next {
  text-align: right;
}

.chart_order > li.next > span {
  border-bottom: 1px solid var(--color-accent1);
  cursor: pointer;
}

.chart_order > li.next > span::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  width: 0.4em;
  height: 0.5em;
  background-color: var(--color-accent1);
  transform: translateY(-50%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}



@media screen and (min-width: 768px) {
  .chart_order > li > span {
    font-size: 2.4rem;
  } 

}

.button001 a {
    background: #eee;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 2em auto 0;
    max-width: 280px;
    padding: 0.5em;
    color: var(--color-sns);
    transition: 0.3s ease-in-out;
    font-weight: 500;
    font-size: 3rem;
}
.button001 a:hover {
    background:var(--color-sns);
    color: #FFF;
}
.button001 a:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 3px solid var(--color-sns);
    border-right: 3px solid var(--color-sns);
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button001 a:hover:after {
    border-color: #FFF;
}

@media screen and (min-width: 768px) {
.button001 a {
    max-width: 350px;
    font-size: 2.5rem;
  } 
.button001 a:after {
    width: 10px;
    height: 10px;
}
}
/* =====================================================================
    topics .guest_list
======================================================================*/

.guest_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: 1em;
}
.guest_list li{
  width: calc(100% / 2 - 1em);
  margin-right: 1em;
  margin-bottom: 1em;
}

.guest_list figcaption{
  margin-top: 0.3em;
}

@media screen and (min-width: 768px) {
  .guest_list{
  justify-content:flex-start;
}
.guest_list li{
  width: calc(100% / 4 - 1em);
  margin-bottom: 1em;
}

}