@charset "utf-8";
/*--------------------------------------------------- */
body { line-height: 1.6; color: #000; font-size: 16px; font-family: "Noto Serif JP", serif; background: #fff; box-sizing: border-box; overflow-x: hidden;}
p a{text-decoration: none; color:#000;}
p a:hover{text-decoration: underline; color:#000;}
/*------------------base.css-------------------*/
.container { width: 100%; margin: 0 auto; overflow-x: hidden;}
.footer { text-align: center; padding: 20px;}
/*------------------style.css-------------------*/
h1, h2, h3 { text-align: center; }
h1 { margin: 30px auto 20px; }
section { margin-bottom: 120px; }
.footer p { text-align: center; text-decoration: none;}
.footer p a{text-decoration: none; color:#000;}
/*COMMON*/
br.sponly_br{
display:none;
}
br.pconly_br{
display:block;
}
#link{
display:block;
margin:150px auto 30px;
}
.link_table{
    display:flex;
    width:250px;
    margin:auto;
}
.link_table .link_td{
    display:block;
    margin:auto;
    text-align:center;
}
.link_table .link_td img{
    width:65%;
}
a:hover{
    opacity: 0.5;
    transition : 0.5s;
}
.wrapper {
width: 100%;
overflow: hidden;
}

/*HEADER*/
.header {
position:fixed;
top:0;
display:block;
width:100%;
height:62px;
margin:0;
background-color:#fff;
opacity: 0.65;
z-index: 100;
}
.header img{
position:fixed;
top:15px;
left: 50%;
transform: translate(-50%, 0);
display:block;
margin:0 auto;
width:120px;
}

/*MOVIE*/
.video-background {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  max-height: 1080px;
  aspect-ratio: 9 / 16;
  /*border:1px solid;*/
}
.video-background video {
  position: absolute;
  top: 55px;
  left: 0;
  width: 100%;
  height: calc(100% - 55px);
  object-fit: cover;
  z-index: 0; 
  object-position: center center;
}
.controls {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 0);
  display: flex;
  gap: 10px;
  z-index: 2;
  height:auto;
  align-items: center;
  /*border:1px solid #c00;*/
}
.controls button {
  padding: 5px;
  background: rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
  align-self: center;
  /*border:1px solid #ccc;*/
}
.controls img{
display:block;
  /*border:1px solid #ff9;*/
}
.controls2 {
  position: absolute;
  left: 50%;
  bottom: 35px;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  height: 32px;
  /*border: 1px solid #c00;*/
}
.controls2 button {
  padding: 5px;
  background: rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
  align-self: center;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  /*border:1px solid #ccc;*/
}
.controls2 img{
display:block;
heght:16px;
width:16px;
/*border:1px solid #ff9;*/
}
.video-overlay_thum{
position: absolute;
top: 55px;
left:-2px;
width:101%;
height: 100%;
z-index: 3;
/*border:1px solid #ccc;*/
}
.video-overlay_thum img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center center;
}
.video-overlay {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  cursor: pointer;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  flex-direction: column;
}
#seekBar {
  position: absolute;
  bottom: 10px;
  left: 10%;
  width: 80%;
  z-index: 5;
}
/*TITLE*/
.title_text{
display:block;
width:600px;
margin:50px auto;
}
h1{
font-size:24px;
font-weight:200;
line-height: 1.6;
}
h1 span{
font-size:24px;
font-weight:200;
letter-spacing: 0.02em;
font-family: "Great Vibes", serif;
}
.title_text p.subtitle_text{
display:block;
margin:50px auto 0;
text-align:center;
}
.title_text img{
display:block;
margin:40px auto;
width:80%;
}
.title_text p.profile{
display:block;
width:80%;
margin:30px auto;
font-size:14px;
}
.title_text p.interview_title{
font-size:20px;
font-weight:200;
text-align:center;
display:block;
margin:80px auto 0;
}
.title_text p.interview_title span.script {
  font-family: "Great Vibes", serif;
  font-style: italic;
  font-size: 1.2em;
  letter-spacing: 0.05em;
}
.title_text p.subtitle_text2 span.h2{
display:block;
margin:30px auto 20px;
text-align:center;
font-size:18px;
color:rgba(39,80,135,1.00);
font-weight:bold;
}
.title_text p.subtitle_text2{
display:block;
margin:10px auto;
}

/* WATCH MOVIE BUTTON 
.open-btn {
  padding: 10px 80px;
  font-size: 12px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
  display: block;
  margin: 20px auto 0;
  transition: 0.3s;
  border-radius: 2px;
}
.open-btn:hover {
  background: #eee;
  border-radius: 2px;
}
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
}
.modal-content {
display: inline-block;
  height:80%;
  width: auto;
  max-width: 80%;
  max-height: 80%;
  justify-content: center;
  align-items: center;
}
video {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}
*/

/*INTERVIE*/
.interview{
display:block;
width:600px;
margin:80px auto;
}
.interview .Question{
display:block;
margin:50px auto 10px;
font-size:18px;
color:rgba(39,80,135,1.00)
}
.interview .Answer_visible{
display:block;
margin:10px auto 0;
font-size:16px;
/*border:1px solid #000;*/
}
.Answer-inner {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
margin-top: 0;
/*border:1px solid #c00;*/
}
/*.interview.open .Answer-inner {
max-height: 1000px;
}*/
.Answer-inner.open {
  max-height: 1000px;
}
.toggle {
cursor: pointer;
margin-top: 10px;
text-align: center;
font-size:14px;
}
.Answer_visible p{
  margin: 10px auto 0;
  padding: 10px auto 0;
}
.Answer-inner p {
  margin: 0 auto 10px;
  padding: 0 auto 10px;
}

/*CORDINATE*/
.cordinate_item p{
display:block;
width:600px;
margin:30px auto;
font-size:14px;
text-align:center;
}

/*---------------SP------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 798px) {
html{
font-size: calc(100vw / 40);
}
br.sponly_br{
display:block;
}
br.pconly_br{
display:none;
}
#link{
display:block;
margin:80px auto 30px;
}
.link_table{
    display:flex;
    width:60%;
    margin:auto;
}
.link_table .link_td{
    display:block;
    margin:auto;
    text-align:center;
}
.link_table .link_td img{
    width:65%;
}
.wrapper {
  width: 100%;
  overflow: hidden;
}

/*HEADER*/
.header {
position:relative;
display:flex;
width:100%;
height:60px;
background-color:#fff;
opacity: 0.95;
z-index: 100;
justify-content: center;
align-items: center;
}
.header img{
position:absolute;
display:block;
width:120px;
}

/*MOVIE*/
.video-background {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  max-height: 1080px;
  aspect-ratio: 9 / 16;
  /*border:1px solid;*/
}
.video-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  aspect-ratio: 9 / 16;
}
.controls {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 0);
  display: flex;
  gap: 10px;
  z-index: 2;
  height:auto;
  align-items: center;
  /*border:1px solid #c00;*/
}
.controls button {
  padding: 5px;
  background: rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
  align-self: center;
  /*border:1px solid #ccc;*/
}
.controls img{
display:block;
  /*border:1px solid #ff9;*/
}
.controls2 {
  position: absolute;
  left: 50%;
  bottom: 35px;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  height: 32px;
  /*border: 1px solid #c00;*/
}
.controls2 button {
  padding: 5px;
  background: rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
  align-self: center;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  /*border:1px solid #ccc;*/
}
.controls2 img{
display:block;
heght:16px;
width:16px;
/*border:1px solid #ff9;*/
}
.video-overlay_thum{
position: absolute;
top:-40px;
left:0;
width:auto;
height: 100%;
z-index: 3;
}
.video-overlay {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: #fff;
  cursor: pointer;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*TITLE*/
.title_text{
display:block;
width:95%;
margin:30px auto;
}
h1{
font-size:2.6rem;
font-weight:200;
line-height: 1.6;
}
h1 span{
font-size:2.2rem;
font-weight:200;
letter-spacing: 0.02em;
font-family: "Great Vibes", serif;
}
.title_text p.subtitle_text{
display:block;
margin:30px auto 0;
text-align:left;
}
.title_text img{
display:block;
margin:40px auto;
width:100%;
}
.title_text p.profile{
display:block;
width:90%;
margin:30px auto;
font-size:1.4rem;
}
.title_text p.interview_title{
font-size:2rem;
font-weight:200;
text-align:center;
display:block;
margin:40px auto 0;
}
.title_text p.interview_title span.script {
  font-family: "Great Vibes", serif;
  font-style: italic;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
}
.title_text p.subtitle_text2 span.h2{
display:block;
margin:30px auto 30px;
text-align:center;
font-size:1.8rem;
color:rgba(39,80,135,1.00);
font-weight:bold;
}
.title_text p.subtitle_text2{
display:block;
margin:10px auto;
}

/* WATCH MOVIE BUTTON
.open-btn {
  padding: 10px 80px;
  font-size: 12px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  cursor: pointer;
  display: block;
  margin: 20px auto 0;
  transition: 0.3s;
  border-radius: 2px;
}
.open-btn:hover {
  background: #eee;
  border-radius: 2px;
}
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
}
.modal-content {
display: inline-block;
  height:80%;
  width: auto;
  max-width: 80%;
  max-height: 80%;
  justify-content: center;
  align-items: center;
}
video {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 30px;
  cursor: pointer;
} */

/*INTERVIE*/
.interview{
display:block;
width:95%;
margin:60px auto;
}
.interview .Question{
display:block;
margin:40px auto 10px;
font-size:1.8rem;
color:rgba(39,80,135,1.00)
}
.interview .Answer_visible{
display:block;
margin:10px auto 0;
font-size:1.6rem;
/*border:1px solid #000;*/
}
.Answer-inner {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
margin-top: 0;
/*border:1px solid #c00;*/
}
/*.interview.open .Answer-inner {
max-height: 1000px;
}*/
.Answer-inner.open {
  max-height: 1000px;
}
.toggle {
cursor: pointer;
margin-top: 10px;
text-align: center;
font-size:1.2rem;
}
.Answer_visible p{
  margin: 10px auto 0;
  padding: 10px auto 0;
}
.Answer-inner p {
  margin: 0 auto 10px;
  padding: 0 auto 10px;
}

/*CORDINATE*/
.cordinate_item p{
display:block;
width:95%;
margin:30px auto;
font-size:1.2rem;
text-align:center;
}


}