@charset "UTF-8";
/* Eric Meyer's Reset CSS v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 text-decoration: none;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
 display: block;
}

body {
 line-height: 1;
}

ol,
ul {
 list-style: none;
}

blockquote,
q {
 quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
 content: "";
 content: none;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

/*theme--------------------------*/
/*-------------------------------*/
/*breakpointes-------------------*/
/*-------------------------------*/
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

*:focus {
 outline: none;
}

body {
 font-size: 16px;
 color: #333;
 background-color: #fff;
 background-size: 100%;
 background-repeat: no-repeat;
 font-family: "Noto Sans JP", serif;
 font-feature-settings: "halt" on;
}
@media screen and (max-width: 820px) {
 body {
  font-size: 14px;
 }
}

a {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 cursor: pointer;
}

img,
picture {
 max-width: 100%;
 width: 100%;
 height: auto;
 vertical-align: bottom;
 font-size: 0;
 line-height: 0;
}

/* スクロールバーのスタイル */
::-webkit-scrollbar {
 width: 10px; /* スクロールバーの幅 */
}

/* スクロールバーのトラック（背景） */
::-webkit-scrollbar-track {
 background: #f0f0f0; /* 明るいグレー */
 border-radius: 10px;
}

/* スクロールバーのハンドル（動かす部分） */
::-webkit-scrollbar-thumb {
 background: #0066b5;
 border-radius: 10px;
 border: 2px solid #fff; /* 内側に白枠をつけてシャープな見た目に */
}

/* ホバー時のスクロールバー */
::-webkit-scrollbar-thumb:hover {
 background: #0066b5;
}

/* Firefox対応（オプション） */
* {
 scrollbar-width: thin;
 scrollbar-color: #0066b5 #f0f0f0;
}

h2 {
 text-align: center;
 margin: 0 auto 60px;
 width: 60%;
 max-width: 500px;
}
@media screen and (max-width: 820px) {
 h2 {
  width: 100%;
  height: 24px;
  margin-bottom: 40px;
 }
}

footer .footer {
 background-color: #fff;
 min-height: 50vw;
 background-image: url(../img/img_footer.jpg);
 background-position: center top;
 background-size: cover;
 padding: 80px;
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
}
@media screen and (max-width: 820px) {
 footer .footer {
  padding-bottom: 120px;
  background-position: bottom 0 left 0%;
  background-repeat: no-repeat;
 }
}
footer .footer .title {
 max-width: 366px;
 margin: 0 auto 20px;
}
footer .footer .release {
 max-width: 360px;
 margin: 0 auto;
}
@media screen and (max-width: 820px) {
 footer .footer .release {
  margin-bottom: 30vw;
 }
}

@media screen and (max-width: 820px) {
 .pc-only {
  display: none;
 }
}

.sp-only {
 display: none;
}
@media screen and (max-width: 820px) {
 .sp-only {
  display: block;
 }
}

.br-pc {
 display: block;
}
@media screen and (max-width: 820px) {
 .br-pc {
  display: none;
 }
}

.br-sp {
 display: none;
}
@media screen and (max-width: 820px) {
 .br-sp {
  display: block;
 }
}

/*fixed_bg------------------------*/
.fixed_bg {
 z-index: -10;
 position: fixed;
 width: 100%;
 height: 100vh;
 height: 100lvh;
 background-image: url(../img/bg.jpg);
 background-repeat: repeat;
 background-size: 100%;
 top: 0;
 left: 0;
}

/*-------------------------------*/
/*loading------------------------*/
.loading {
 background-color: #fff;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 height: 100lvh;
 z-index: 1001;
 display: flex;
 align-items: center;
 justify-content: center;
}
.loading .loadeing_inner {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 height: 100svh;
 display: flex;
 align-items: center;
 justify-content: center;
}
.loading .loadeing_inner .loader {
 animation: loadingFlash 1s infinite;
}
.loading .loader {
 width: 50px;
 --b: 8px;
 aspect-ratio: 1;
 border-radius: 50%;
 padding: 1px;
 background: conic-gradient(rgba(0, 0, 0, 0) 10%, #333) content-box;
 -webkit-mask: repeating-conic-gradient(rgba(0, 0, 0, 0) 0deg, #000 1deg 20deg, rgba(0, 0, 0, 0) 21deg 36deg), radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
 -webkit-mask-composite: destination-in;
 mask-composite: intersect;
 animation: l4 1s infinite steps(10);
}
@keyframes l4 {
 to {
  transform: rotate(1turn);
 }
}

/*-------------------------------*/
/*nav----------------------------*/
.nav_btn {
 display: none;
 z-index: 104;
 position: fixed;
 opacity: 0;
}
@media screen and (max-width: 820px) {
 .nav_btn {
  background-color: rgba(255, 255, 255, 0.8);
  display: unset;
  top: 10px;
  right: 10px;
  background-image: url(../img/icon_menu.svg);
  background-size: 100%;
  width: 50px;
  height: 50px;
  transition: 0.4s;
  opacity: 0;
 }
 .nav_btn.active {
  opacity: 0.8;
 }
}
.nav_btn.show {
 background-image: url(../img/icon_close.svg);
 opacity: 0.8;
}

.gnav {
 z-index: 100;
 width: 100%;
 position: sticky;
 top: 0px;
 left: 0;
 height: 50px;
 transition: 1s;
 background-color: rgba(255, 255, 255, 0.9);
}
@media screen and (max-width: 820px) {
 .gnav {
  z-index: 103;
  position: fixed;
  top: 0;
  left: 100%;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.8s;
  background-image: url(../img/bg.jpg);
  background-size: cover;
  background-position: bottom left;
  background-repeat: no-repeat;
 }
 .gnav.show {
  left: 0;
  opacity: 1;
 }
}
.gnav.active {
 opacity: 1;
}
.gnav .gnav_list {
 font-weight: 700;
 font-family: "Noto Serif JP", serif;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 0 40px;
}
@media screen and (max-width: 820px) {
 .gnav .gnav_list {
  padding-right: 0px;
  justify-content: center;
  flex-direction: column;
  align-items: start;
  margin-bottom: 40px;
 }
}
.gnav .gnav_list li a {
 display: block;
 height: 50px;
 line-height: 50px;
 padding: 0 0.5em;
 font-size: 1em;
 color: #0066b5;
 font-weight: 700;
}
@media screen and (max-width: 820px) {
 .gnav .gnav_list li a {
  font-size: 1.3em;
 }
}
.gnav .gnav_list li a:hover {
 opacity: 0.6;
}
.gnav .gnav_list li a.construction {
 opacity: 0.4;
 pointer-events: none;
}
.gnav .gnav_list li a .icon_menu {
 width: 24px;
 margin-bottom: 13px;
}

.to_top {
 z-index: 99;
 margin: 0 auto;
 position: fixed;
 bottom: 10px;
 right: 20px;
 width: 50px;
 background-color: rgba(255, 255, 255, 0.8);
 opacity: 0;
 transition: 1s;
}
.to_top:hover {
 opacity: 0.3;
}
.to_top.active {
 right: 20px;
 opacity: 1;
}

/*-------------------------------*/
/*sharebtn-----------------------*/
.shares {
 display: flex;
 align-items: center;
 justify-content: center;
}
@media screen and (max-width: 820px) {
 .shares {
  flex-direction: column;
 }
}

.share_btns {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 line-height: 1;
 box-sizing: border-box;
}
.share_btns li {
 height: 22px;
 overflow: hidden;
 border-radius: 5px;
 box-sizing: border-box;
 margin: 2px 5px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.share_btns li img {
 height: 20px;
 width: auto;
}

.share_btns-square {
 display: flex;
 justify-content: center;
 align-items: center;
}
@media screen and (max-width: 820px) {
 .share_btns-square {
  margin-bottom: 10px;
 }
}
.share_btns-square::before {
 content: "Share:";
 letter-spacing: 0.1em;
 font-size: 12px;
 text-transform: uppercase;
 padding-right: 6.5px;
 color: #333;
}
.share_btns-square li {
 cursor: pointer;
 margin: 0 10px 0px;
 width: 24px;
}
@media screen and (max-width: 820px) {
 .share_btns-square li {
  margin: 0 10px 10px;
 }
}

/*-------------------------------*/
/*noiseOverlay-------------------*/
/*-------------------------------*/
/*-------------------------------*/
/*-------------------------------*/
@keyframes flash {
 0%,
 100% {
  opacity: 0.1;
 }
 50% {
  opacity: 0.5;
 }
}
/*-inview------------------------*/
.fadeInUp {
 opacity: 0;
 transition: 1s;
 transform: translateY(10px);
}
.fadeInUp.is-inview {
 transform: translateY(0);
 opacity: 1;
}

/*-------------------------------*/
/*-keyframes--------------------*/
/*-------------------------------*/
#top {
 position: relative;
 width: 100%;
 padding: 50px 50px 20px;
 background-color: #fff;
 margin: 0 auto;
 max-width: 2500px;
 transition: 3s;
 filter: grayscale(100%);
}
@media screen and (max-width: 820px) {
 #top {
  padding: 0;
 }
}
#top.active {
 filter: grayscale(0%);
}
#top .top_inner {
 position: relative;
}
@media screen and (max-width: 820px) {
 #top .top_inner {
  height: 180vw;
 }
}
#top .top_inner .main {
 position: relative;
 width: 51.48%;
 overflow: hidden;
}
@media screen and (max-width: 820px) {
 #top .top_inner .main {
  position: absolute;
  width: 100%;
  top: 0%;
  left: 0%;
 }
}
#top .top_inner .main img {
 transform: scale(1.1);
 transition: 3s;
}
#top .top_inner .main img.active {
 transform: scale(1);
}
#top .top_inner .yoko {
 position: absolute;
 width: 20%;
 top: 69%;
 left: 3.82%;
 transition: 1s;
 transform: translateX(-10px);
 opacity: 0;
}
@media screen and (max-width: 820px) {
 #top .top_inner .yoko {
  width: 41.79%;
  top: 60.19%;
  left: 6.15%;
 }
}
#top .top_inner .yoko.active {
 transform: translateX(0px);
 opacity: 1;
}
#top .top_inner .tate {
 position: absolute;
 width: 7.8%;
 top: 0.96%;
 left: 92.07%;
}
@media screen and (max-width: 820px) {
 #top .top_inner .tate {
  width: 23%;
  top: 22%;
  left: 72.33%;
  filter: drop-shadow(1px 1px 0px #fff) drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 5px #fff);
 }
}
#top .top_inner .title {
 position: absolute;
 width: 36.09%;
 top: 55%;
 left: 59.03%;
}
@media screen and (max-width: 820px) {
 #top .top_inner .title {
  width: 63.85%;
  top: 8.08%;
  left: 18.21%;
 }
}
#top .top_inner .awards {
 position: absolute;
 width: 32%;
 top: 38%;
 left: 61%;
}
#top .top_inner .awards img {
}
@media screen and (max-width: 820px) {
 #top .top_inner .awards {
  width: 63.85%;
  top: 0.8%;
  left: 18.21%;
 }
}
#top .top_inner .credit {
 position: absolute;
 width: 35.36%;
 top: 84.26%;
 left: 59.65%;
}
@media screen and (max-width: 820px) {
 #top .top_inner .credit {
  width: 89.74%;
  top: 90.22%;
  left: 5.13%;
 }
}
#top .top_inner .release {
 position: absolute;
 width: 30.49%;
 top: 72.55%;
 left: 62.16%;
}
@media screen and (max-width: 820px) {
 #top .top_inner .release {
  width: 89.74%;
  top: 84.51%;
  left: 5.13%;
 }
}

#info {
 width: 100%;
 max-width: 1500px;
 padding: 40px 40px 40px;
 margin: 0 auto;
}
@media screen and (max-width: 820px) {
 #info {
  padding: 20px 10px 40px;
 }
}
#info .talk {
 max-width: 1100px;
 margin: 0 auto 30px;
 width: 100%;
}
@media screen and (max-width: 820px) {
 #info .talk {
  margin-bottom: 20px;
 }
}
#info .talks {
 display: flex;
 justify-content: center;
 margin: 0 auto 20px;
 max-width: 1300px;
 flex-wrap: wrap;
}
@media screen and (max-width: 820px) {
 #info .talks {
  margin-bottom: 10px;
 }
}
#info .talks div {
 width: 33.33%;
}
@media screen and (max-width: 820px) {
 #info .talks div {
  margin-bottom: 10px;
  width: 100%;
  max-width: 300px;
 }
}
#info .btn_cau {
 max-width: 220px;
 margin: 0 auto 20px;
 cursor: pointer;
 transition: 0.3s;
}
#info .btn_cau:hover {
 background-color: rgba(255, 135, 135, 0.1);
}
#info .btns {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 gap: 20px;
 margin-bottom: 20px;
}
#info .btns a {
 display: block;
 max-width: 180px;
 width: 50%;
}
#info .btns .sns {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 20px;
}
#info .btns .sns .btn {
 display: block;
 width: 32px;
 height: 32px;
}
#info .btns .sns .btn a {
 display: block;
 width: 32px;
 height: 32px;
 padding: 0px;
 fill: #0066b5;
}
#info .btns .sns .btn a .icon {
 max-width: 100%;
 max-height: 100%;
}
@media screen and (min-width: 821px) {
 #info .btns .sns .btn a:hover {
  fill: #000000;
 }
 #info .btns a:hover {
  filter: brightness(110%);
 }
}

#info .sc_bnrs {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 10px;
}
#info .ti_bnrs {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 gap: 10px;
 margin-bottom: 20px;
}
#info .sc_bnrs a {
 max-width: 500px;
 display: block;
 width: calc((100% - 20px) * 0.3333);
}
#info .ti_bnrs a {
 max-width: 280px;
 display: block;
 width: calc((100% - 30px) * 0.25);
}
#info .sc_bnrs a img,
#info .ti_bnrs a img {
 border-radius: 5px;
}

@media screen and (min-width: 821px) {
 #info .sc_bnrs a:hover,
 #info .ti_bnrs a:hover {
  filter: brightness(120%);
 }
}

@media screen and (max-width: 600px) {
 #info .sc_bnrs a {
  max-width: unset;
  width: 100%;
 }
 #info .ti_bnrs {
  gap: 5px;
 }
 #info .ti_bnrs a {
  width: calc((100% - 5px) * 0.5);
 }
}

#info .bnrs .no-link {
 max-width: 320px;
 margin: 0 auto 20px;
}
#info .mvtk {
 width: 100%;
}
#info .mvtk #mvtk-widgets-container {
 margin: 0 auto 30px;
}

/* ポップアップ全体のオーバーレイ */
.popup_overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.6);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 1000;
 opacity: 0; /* 初期は透明 */
 visibility: hidden; /* 初期は見えない */
 transition: opacity 0.5s ease, visibility 0.5s ease; /* フェードエフェクト */
}

/* 表示状態にする */
.popup_overlay.active {
 opacity: 1; /* フェードイン */
 visibility: visible; /* 見えるようにする */
}

.popup_window {
 background: #fff;
 padding: 80px 40px;
 border-radius: 10px;
 width: 90%;
 max-width: 900px;
 position: relative; /* これを追加 */
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 text-align: center;
}
@media screen and (max-width: 820px) {
 .popup_window {
  padding: 60px 20px 40px;
 }
}
.popup_window p {
 line-height: 2;
}
@media screen and (max-width: 820px) {
 .popup_window p {
  text-align: left;
 }
}
.popup_window p.title {
 margin-bottom: 10px;
 font-weight: 700;
 color: #920000;
}
.popup_window p.title span {
 display: inline-block;
}
@media screen and (max-width: 820px) {
 .popup_window p.title {
  text-align: center;
 }
}

.close_btn {
 position: absolute; /* これでポップアップ内の自由な場所に配置可能 */
 top: 10px; /* 上からの距離を調整 */
 right: 20px; /* 右からの距離を調整 */
 background: none;
 border: none;
 font-size: 40px;
 cursor: pointer;
 color: #333;
}

.com_line1 {
 height: 1px;
 width: 100%;
 background-color: #a5a5a5;
 margin-bottom: 80px;
}
@media screen and (max-width: 820px) {
 .com_line1 {
  margin-bottom: 60px;
 }
}

.com_line2 {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
}
.com_line2 .com_line {
 height: 1px;
 background-color: #a5a5a5;
 width: calc(100% - 200px);
}

.paw {
 width: 200px;
 margin: 0 20% 0 auto;
}
@media screen and (max-width: 820px) {
 .paw {
  margin: 0 0% 0 auto;
 }
}

#comment {
 font-weight: 700;
 font-family: "Noto Serif JP", serif;
 background-color: rgb(245, 254, 255);
 background-size: cover;
}
#comment .section_inner {
 width: 100%;
 padding: 120px 100px 40px;
 max-width: 1500px;
 margin: 0 auto;
}
@media screen and (max-width: 820px) {
 #comment .section_inner {
  max-width: 500px;
  padding: 80px 30px 40px;
 }
}
#comment .section_inner .section_main .section_body .comment_items .comment_item {
 border-bottom: solid 1px #b9cfec;
 max-width: 800px;
 margin: 0 auto 60px;
}
#comment .section_inner .section_main .section_body .comment_items .comment_item .names {
 display: flex;
 align-items: baseline;
}
#comment .section_inner .section_main .section_body .comment_items .comment_item .names .name {
 font-size: 1.3em;
 font-weight: 700;
 margin-right: 0.5em;
}
#comment .section_inner .section_main .section_body .comment_items .comment_item .names .role {
 font-size: 0.8em;
 font-weight: 500;
 color: #cd0000;
}
#comment .section_inner .section_main .section_body .comment_items .comment_item .comment_body {
 margin: 0 auto 20px;
}
#comment .section_inner .section_main .section_body .comment_items .comment_item .comment_body p {
 line-height: 2;
 color: #0066b5;
 text-align: justify;
 margin-bottom: 0.5em;
}
#comment .section_inner .section_main .section_body .comment_items .comment_item .comment_body p:last-of-type {
 margin-bottom: 0;
}

#trailer {
 background-color: rgb(245, 254, 255);
 background-image: url(../img/bg2.jpg);
}
#trailer .section_inner {
 width: 100%;
 padding: 120px 100px 120px;
 max-width: 1500px;
 margin: 0 auto;
}
@media screen and (max-width: 820px) {
 #trailer .section_inner {
  max-width: 500px;
  padding: 80px 30px;
 }
}
#trailer .section_inner .section_main {
 margin: 0 auto;
 width: 100%;
 max-width: 800px;
 padding: 0;
}
@media screen and (max-width: 820px) {
 #trailer .section_inner .section_main {
  max-width: 500px;
 }
}
#trailer .section_inner .section_main .youtube_outer {
 position: relative;
 margin: 0 auto;
 max-width: 800px;
 overflow: hidden;
}
@media screen and (max-width: 820px) {
 #trailer .section_inner .section_main .youtube_outer {
  width: 100%;
  margin-bottom: 0px;
 }
}
#trailer .section_inner .section_main .youtube_outer .youtube_embed {
 border-radius: 5px;
 width: 100%;
 position: relative;
 padding-bottom: 56.25%;
 height: 0;
 overflow: hidden;
}
#trailer .section_inner .section_main .youtube_outer .youtube_embed iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.trailer_tab {
 color: #d1d1d1;
 display: flex;
 width: 100%;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 5px;
 margin-top: 5px;
}
.trailer_tab li {
 flex: 1 1 auto;
 display: flex;
 justify-content: space-between;
}
.trailer_tab li a {
 border: solid 1px #333;
 border-radius: 5px;
 height: 3em;
 width: 100%;
 display: block;
 justify-content: center;
 text-align: center;
 line-height: 1.2;
 letter-spacing: 0.15em;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #333;
 background-color: #f2f2f2;
}
@media screen and (max-width: 820px) {
 .trailer_tab li a {
  height: 3em;
 }
}
.trailer_tab li a:hover {
 transition: 0.4s;
 background-color: #fff;
}
.trailer_tab .tab.active a {
 pointer-events: none;
 background-color: #fff;
}
.trailer_tab .tab.active a::before {
 content: "● ";
}

#intro .section_inner {
 width: 100%;
 padding: 120px 100px 120px;
 margin: 0 auto;
 overflow-x: hidden;
 max-width: 1500px;
}
@media screen and (max-width: 820px) {
 #intro .section_inner {
  padding: 80px 30px 0;
 }
}
#intro .section_inner .section_main {
 padding-bottom: 80px;
}
#intro .section_inner .section_main .section_body .intro_in {
 max-width: 900px;
 margin: 0 auto 30px;
}
@media screen and (max-width: 820px) {
 #intro .section_inner .section_main .section_body .intro_in {
  max-width: 460px;
 }
}
#intro .section_inner .section_main .section_body .intro_img {
 margin-bottom: -5%;
}
@media screen and (max-width: 820px) {
 #intro .section_inner .section_main .section_body .intro_img {
  width: calc(100% + 60px);
  margin-left: -30px;
 }
}
#intro .section_inner .section_main .section_body .intro_catch {
 width: 140%;
 margin-left: -10%;
}
@media screen and (max-width: 820px) {
 #intro .section_inner .section_main .section_body .intro_catch {
  width: calc(100% + 60px);
  margin-left: -30px;
 }
}
#intro .section_inner .section_main .section_body .intro_body {
 max-width: 1200px;
 margin: 0 auto 40px;
}
@media screen and (max-width: 820px) {
 #intro .section_inner .section_main .section_body .intro_body {
  margin: 0 auto 30px;
 }
}
#intro .section_inner .section_main .section_body .intro_body p {
 line-height: 2;
 text-align: justify;
 color: #002167;
 margin-bottom: 1em;
 display: block;
}
#intro .section_inner .section_main .section_body .intro_body p:last-of-type {
 margin-bottom: 0;
}
#intro .section_inner .section_main .section_body .intro_line {
 margin: 0 auto;
 max-width: 600px;
}
@media screen and (max-width: 820px) {
 #intro .section_inner .section_main .section_body .intro_line {
  max-width: 280px;
 }
}
#intro .imgs {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
}
#intro .imgs div {
 width: calc(33.33% - 20px);
 margin: 0 10px;
}
@media screen and (max-width: 820px) {
 #intro .imgs div {
  width: 60%;
  margin: 0 auto 20px 0;
 }
 #intro .imgs div:first-of-type {
  width: 100%;
  margin: 0;
  margin-bottom: 20px;
 }
 #intro .imgs div:last-of-type {
  margin: 0 0 20px auto;
  margin-top: -20%;
 }
}
#intro .imgs2 {
 margin-top: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
}
@media screen and (max-width: 820px) {
 #intro .imgs2 {
  margin-top: 0;
 }
}
#intro .imgs2 div {
 width: calc(33.33% - 20px);
 margin: 0 20px;
}
@media screen and (max-width: 820px) {
 #intro .imgs2 div {
  width: 60%;
  margin: 0 auto 20px 0;
 }
 #intro .imgs2 div:last-of-type {
  width: 100%;
  margin: 0;
 }
}

#credit {
 background-color: #fff;
 width: 100%;
 padding: 120px 100px 40px;
 max-width: 1500px;
 margin: 0 auto;
}
@media screen and (max-width: 820px) {
 #credit {
  max-width: 500px;
  padding: 80px 30px 20px;
 }
}
#credit .section_inner .section_main .section_body .credit_body {
 max-width: 780px;
 margin: 0 auto;
}

#theater {
 background-color: rgba(253, 255, 119, 0.1);
 font-size: 16px;
}
@media screen and (max-width: 820px) {
 #theater {
  font-size: 14px;
 }
}
#theater .section_inner {
 width: 100%;
 padding: 120px 100px;
 margin: 0 auto;
 line-height: 1.4;
 max-width: 1200px;
}
@media screen and (max-width: 820px) {
 #theater .section_inner {
  max-width: 500px;
  padding: 80px 20px;
 }
}
#theater .caution {
 text-align: center;
 font-size: 0.8em;
 line-height: 1.8;
 margin: 40px auto 0;
}
#theater .theater_anchor {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 margin: 40px auto 0px;
}
@media screen and (max-width: 820px) {
 #theater .theater_anchor {
  margin: 20px auto 0px;
 }
}
#theater .theater_anchor li {
 padding: 0 0.5em 0.8em;
}
#theater .theater_anchor li a {
 color: #0066b5;
}
#theater .theater_anchor li a:hover {
 opacity: 0.5;
}

.area_head {
 margin-top: 80px;
 margin-bottom: 20px;
 font-weight: bold;
}
@media screen and (max-width: 820px) {
 .area_head {
  margin-top: 40px;
  margin-bottom: 0;
 }
}

ul.theater_info {
 display: flex;
 flex-wrap: wrap;
 line-height: 1.3;
 width: 100%;
 padding: 16px 0;
 border-bottom: solid 1px #0066b5;
 margin-bottom: 10px;
}
@media screen and (max-width: 820px) {
 ul.theater_info {
  padding: 0 0 12px;
 }
}
ul.theater_info.head-pc {
 padding: 0;
 background-color: #fff;
 background-color: #0066b5;
}
@media screen and (max-width: 820px) {
 ul.theater_info.head-pc {
  display: none;
 }
}
ul.theater_info.th {
 border: 0;
 color: #fff;
}
@media screen and (max-width: 820px) {
 ul.theater_info.th {
  color: #333;
  margin-top: 10px;
  margin-bottom: 0;
  padding-bottom: 0;
 }
}
ul.theater_info li {
 word-break: break-all;
 white-space: wrap;
}
ul.theater_info li.area {
 width: 10%;
}
ul.theater_info li.area.area_cap {
 padding: 0.5em 0.2em;
 font-weight: bold;
 order: 1;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.area.area_cap {
  order: 1;
  width: 4em;
  padding-left: 0.5em;
  display: none;
 }
}
ul.theater_info li.area.area_body {
 order: 6;
 font-weight: bold;
 padding: 0em 0.2em;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.area.area_body {
  order: 1;
  width: 100%;
  margin-top: 20px;
  overflow: 0em 2em 0 0;
 }
}
ul.theater_info li.theater-name {
 width: 40%;
}
ul.theater_info li.theater-name.theater-name_cap {
 padding: 0.5em 0.5em;
 font-weight: bold;
 order: 2;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.theater-name.theater-name_cap {
  order: 2;
  width: calc(100% - 11em);
 }
}
ul.theater_info li.theater-name.theater-name_body {
 order: 7;
 font-weight: bold;
 position: relative;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.theater-name.theater-name_body {
  border-top: solid 1px #0066b5;
  width: calc(100% - 11em);
  order: 4;
  display: flex;
 }
}
ul.theater_info li.theater-name.theater-name_body a {
 text-decoration: underline;
 color: #0066b5;
 padding: 0em 0.2em;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 display: flex;
 justify-content: flex-start;
 align-items: center;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.theater-name.theater-name_body a {
  padding: 12px 0.5em 5px;
 }
}
ul.theater_info li.theater-name.theater-name_body a:hover {
 text-decoration: none;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.theater-name.theater-name_body a:hover {
  text-decoration: underline;
 }
}
ul.theater_info li.tel {
 width: 15%;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.tel {
  width: 10%;
 }
}
ul.theater_info li.tel.tel_cap {
 padding: 0.5em 0.2em;
 font-weight: bold;
 order: 3;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.tel.tel_cap {
  order: 7;
  width: 3em;
 }
}
ul.theater_info li.tel.tel_body {
 order: 9;
 padding: 0em 0.2em;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.tel.tel_body {
  border-top: solid 1px #0066b5;
  order: 8;
  width: 3em;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 12px 0.5em 5px;
  position: relative;
 }
 ul.theater_info li.tel.tel_body a {
  width: 3em;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
 }
 ul.theater_info li.tel.tel_body a img {
  width: 14px;
  line-height: 1em;
 }
}
ul.theater_info li.date {
 width: 15%;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.date {
  width: 10%;
 }
}
ul.theater_info li.date.date_cap {
 padding: 0.5em 0.2em;
 font-weight: bold;
 order: 4;
 background-color: var(--mainColor);
 color: var(--fontLight);
}
@media screen and (max-width: 820px) {
 ul.theater_info li.date.date_cap {
  order: 6;
  padding-top: 0.5em;
  width: 8em;
 }
}
ul.theater_info li.date.date_body {
 order: 9;
 padding: 0em 0.2em;
}
ul.theater_info li.date.date_body .te-lop {
 display: none;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.date.date_body {
  border-top: solid 1px #0066b5;
  order: 5;
  width: 8em;
  padding: 12px 0.5em 5px;
  font-weight: bold;
  letter-spacing: 0.1em;
 }
 ul.theater_info li.date.date_body .te-lop {
  display: inline;
 }
}
ul.theater_info li.ticket {
 width: 20%;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.ticket {
  width: 30%;
 }
}
ul.theater_info li.ticket.ticket_cap {
 letter-spacing: -0.1em;
 padding: 0.5em 0.2em;
 font-weight: bold;
 order: 5;
 background-color: var(--mainColor);
 color: var(--fontLight);
}
@media screen and (max-width: 820px) {
 ul.theater_info li.ticket.ticket_cap {
  order: 9;
  width: 3em;
  display: none;
  padding: 2px 0.5em 0;
 }
}
ul.theater_info li.ticket.ticket_body {
 order: 10;
 padding: 0em 0 0 0.2em;
}
ul.theater_info li.ticket.ticket_body .te-lop {
 display: none;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.ticket.ticket_body {
  border-top: 0;
  padding: 0em 0.5em 0;
  order: 10;
  width: 100%;
 }
 ul.theater_info li.ticket.ticket_body .te-lop {
  display: inline;
 }
}
ul.theater_info li.biko {
 display: block;
 width: 100%;
}
ul.theater_info li.biko.biko_body {
 order: 11;
 font-size: 12px;
 opacity: 0.7;
 padding: 0.5em 0 0 10%;
}
@media screen and (max-width: 820px) {
 ul.theater_info li.biko.biko_body {
  order: 11;
  display: inline-block;
  padding: 2px 0.5em 0em;
 }
}
@media screen and (max-width: 820px) {
 ul.theater_info.notfirst {
  margin-top: -11px;
 }
 ul.theater_info.notfirst .area_body {
  display: none;
 }
}

#staff,
#characters {
 color: #002167;
}
#staff .section_header,
#characters .section_header {
 position: relative;
}
#staff .section_header div,
#characters .section_header div {
 position: relative;
}
#staff .section_header h2,
#characters .section_header h2 {
 position: absolute;
 bottom: 0;
 margin-bottom: 0;
 left: 50%;
 transform: translateX(-50%);
}
#staff .section_inner .section_main,
#characters .section_inner .section_main {
 position: relative;
 padding: 120px 50px;
 max-width: 1000px;
 margin: 0 auto;
}
@media screen and (max-width: 820px) {
 #staff .section_inner .section_main,
 #characters .section_inner .section_main {
  padding: 80px 30px;
  max-width: 500px;
 }
}
#staff .section_inner {
 background-color: rgba(165, 176, 204, 0.1);
}

#characters .section_inner {
 background-image: url(../img/bg2.jpg);
 background-color: rgb(245, 254, 255);
}

.prof_items {
 width: 100%;
}
.prof_items .prof_item {
 display: flex;
 width: 100%;
 justify-content: center;
 align-items: flex-start;
 margin-bottom: 80px;
}
@media screen and (max-width: 820px) {
 .prof_items .prof_item {
  display: block;
 }
}
.prof_items .prof_item:last-of-type {
 margin-bottom: 0;
}
.prof_items .prof_item .prof_img {
 width: 30%;
 transform: rotate(2deg);
}
@media screen and (max-width: 820px) {
 .prof_items .prof_item .prof_img {
  width: 80%;
  margin: 0 auto 20px;
 }
}
.prof_items .prof_item .prof_img span {
 font-size: 10px;
 color: #aaa;
}
.prof_items .prof_item .prof_img img {
 border: solid 8px #fff;
 filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
}
.prof_items .prof_item .prof_img.tate .prof_img_inner {
 width: 73%;
 margin: 0 0 0 auto;
}
@media screen and (max-width: 820px) {
 .prof_items .prof_item .prof_img.tate .prof_img_inner {
  margin: 0 auto;
 }
}
.prof_items .prof_item .prof_img img {
 transition: 2s;
 transform: rotate(-2deg) scale(1.1);
}
.prof_items .prof_item .prof_img.is-inview img {
 transform: rotate(0deg) scale(1);
}
.prof_items .prof_item .prof_texts {
 width: 70%;
 padding-left: 40px;
}
@media screen and (max-width: 820px) {
 .prof_items .prof_item .prof_texts {
  width: 100%;
  padding-left: 0;
 }
}
.prof_items .prof_item .prof_texts .names {
 margin-bottom: 1em;
}
@media screen and (max-width: 820px) {
 .prof_items .prof_item .prof_texts .names {
  text-align: center;
 }
}
.prof_items .prof_item .prof_texts .names .role {
 font-size: 0.9em;
 margin-bottom: 0.5em;
 font-weight: 700;
}
.prof_items .prof_item .prof_texts .names .name {
 margin-bottom: 0.5em;
 color: #cd0000;
 font-size: 1.4em;
 line-height: 1.3;
 font-weight: 900;
}
.prof_items .prof_item .prof_texts .names .name span {
 display: inline-block;
 font-weight: 900;
}
.prof_items .prof_item .prof_texts .names .nation {
 font-size: 0.8em;
 font-weight: 700;
}
.prof_items .prof_item .prof_texts .prof_body p {
 line-height: 1.8;
 text-align: justify;
}
.prof_items .prof_item .prof_texts .prof_comment {
 background-color: rgba(247, 255, 140, 0.1);
 padding: 20px 30px;
 margin-top: 1em;
}
@media screen and (max-width: 820px) {
 .prof_items .prof_item .prof_texts .prof_comment {
  padding: 20px;
 }
}
.prof_items .prof_item .prof_texts .prof_comment .comment_title {
 color: #ffd700;
 text-transform: uppercase;
 letter-spacing: 0.3em;
 font-weight: 900;
}
.prof_items .prof_item .prof_texts .prof_comment p {
 line-height: 1.8;
 text-align: justify;
}
.prof_items .prof_item:nth-of-type(2n) .prof_img {
 transform: rotate(-2deg);
}

#interview {
 background-color: rgba(202, 202, 202, 0.2);
}
#interview .section_inner {
 width: 100%;
 padding: 120px 100px 120px 0;
 margin: 0 auto;
 overflow-x: hidden;
 max-width: 1500px;
}
@media screen and (max-width: 820px) {
 #interview .section_inner {
  padding: 80px 30px 80px 0;
 }
}
#interview .section_inner .section_main .arrow {
 width: 30%;
 max-width: 180px;
 margin: 0 auto 10px 0;
 transform: scaleX(-1);
}
@media screen and (max-width: 820px) {
 #interview .section_inner .section_main .arrow {
  transform: scaleX(1);
 }
}
#interview .section_inner .section_main .column_box {
 font-feature-settings: "halt" off;
 overflow-x: scroll;
 width: 100%;
 height: 75vh;
 min-height: 500px;
 max-height: 1000px;
 writing-mode: vertical-rl;
 line-height: 2;
 background-color: #fff;
 padding-left: 40px;
 margin-bottom: 80px;
}
#interview .section_inner .section_main .column_box span.num {
 text-orientation: upright;
 -webkit-text-orientation: upright; /* Safari 対策 */
}
@media screen and (max-width: 820px) {
 #interview .section_inner .section_main .column_box {
  min-height: unset;
  padding-left: 30px;
  margin-bottom: 60px;
  height: 70vh;
  height: 70lvh;
 }
}
#interview .section_inner .section_main .column_box:last-of-type {
 margin-bottom: 0;
}
#interview .section_inner .section_main .column_box .column_box_inner {
 background-image: url(../img/bgp.jpg);
 background-repeat: repeat-x;
 background-size: contain;
 padding: 50px 80px;
}
@media screen and (max-width: 820px) {
 #interview .section_inner .section_main .column_box .column_box_inner {
  padding: 20px 30px;
 }
}
#interview .section_inner .section_main .column_box .column_box_inner h3 {
 margin-left: 0.5em;
 font-family: "Noto Serif JP", serif;
}
#interview .section_inner .section_main .column_box .column_box_inner h3 span {
 font-size: 1.2em;
 font-weight: bold;
 display: inline-block;
}
#interview .section_inner .section_main .column_box .column_box_inner .column_body {
 margin: 0 1em 0 2em;
}
#interview .section_inner .section_main .column_box .column_box_inner .column_body p {
 margin-left: 1.5em;
 text-align: justify;
}
#interview .section_inner .section_main .column_box .column_box_inner .column_body p.ques {
 font-weight: 500;
 color: #5c5c5c;
}
#interview .section_inner .section_main .column_box .column_box_inner .column_body p span.co1 {
 color: #0066b5;
}
#interview .section_inner .section_main .column_box .column_box_inner .column_body p span.co2 {
 color: #a72222;
}
#interview .section_inner .section_main .column_box .column_box_inner .column_body p .font-smaller {
 font-size: 0.8em;
}
#interview .section_inner .section_main .column_box .column_box_inner .column_body::after {
 content: "";
 display: block;
 clear: both;
}
#interview .section_inner .section_main .column_box .column_box_inner .column_body .sashi-yoko,
#interview .section_inner .section_main .column_box .column_box_inner .column_body .sashi-tate {
 float: left; /* または right にすると右寄せ */
 margin: 0 0px 20px; /* テキストと画像の間に余白をつける */
}
@media screen and (max-width: 820px) {
 #interview .section_inner .section_main .column_box .column_box_inner .column_body .sashi-yoko,
 #interview .section_inner .section_main .column_box .column_box_inner .column_body .sashi-tate {
  margin: 0 10px 20px;
 }
}
#interview .section_inner .section_main .column_box .column_box_inner .column_body .sashi-yoko img {
 width: 100%;
 max-width: 340px;
}
@media screen and (max-width: 820px) {
 #interview .section_inner .section_main .column_box .column_box_inner .column_body .sashi-yoko img {
  max-width: 280px;
 }
}
#interview .section_inner .section_main .column_box .column_box_inner .column_body .sashi-tate img {
 width: 100%;
 max-width: 240px;
}
@media screen and (max-width: 820px) {
 #interview .section_inner .section_main .column_box .column_box_inner .column_body .sashi-tate img {
  max-width: 180px;
 }
} /*# sourceMappingURL=style.css.map */