@charset "utf-8";

/*---wrapper---*/

#wrapper {
width: 100%;
margin: 0 auto;
z-index: 600;
overflow: hidden;
}


/*---container---*/

#container {
width: 100%;
}


/*---header--*/

header {
width: 100%;
position: relative;
}

header #navout {
width: 100%;
left: 0;
right: 0;
margin: auto;
position: absolute;
}

header ul.navarea {
width: 100%;
}

header ul.navarea li.logobox_pc {
position: absolute;
z-index: 9999;
top: 30px;
left: 20px;
}

header ul.navarea li.logobox_sp {
display: none;
}

header ul.navarea #g-nav {
position: fixed;
z-index: -1;
opacity: 0;
top:0;
width: 100%;
height: 100vh;
background: rgba(32,34,49,0.80);
transition: all 0.3s;
}

header ul.navarea #g-nav.panelactive {
opacity: 1;
z-index: 9999;
}

header ul.navarea #g-nav.panelactive #g-nav-list {
position: absolute;
z-index: 9999;
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

header ul.navarea #g-nav ul {
display: none;
position: absolute;
z-index: 9999;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
}

header ul.navarea #g-nav.panelactive ul {
display: block;
}

header ul.navarea #g-nav li {
list-style: none;
}

header ul.navarea #g-nav li a.primary {
color: #fff;
text-decoration: none;
text-shadow: 0 0 4px  #060907;
padding: 10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 17px;
}

header ul.navarea #g-nav li a.secondary {
color: #fff;
text-decoration: none;
text-shadow: 0 0 4px #060A07;
padding: 10px 10px 10px 25px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 15px;
}

header ul.navarea #g-nav li a {
color: #fff;
text-decoration: none;
text-shadow: 0 0 4px #3d6547;
padding: 10px;
display: block;
font-family: 'Noto Serif JP', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 17px;
}

header ul.navarea .openbtn {
position: absolute;
z-index: 999999;
top: 30px;
right: 10px;
cursor: pointer;
width: 60px;
height: 60px;
background: #2BA2D5;
border-radius: 2px;
}

header ul.navarea .openbtn span {
display: inline-block;
transition: all .4s;
position: absolute;
left: 16px;
height: 3px;
border-radius: 2px;
background-color: #fff;
width: 45%;
}

header ul.navarea .openbtn span:nth-of-type(1) {
top: 15px;	
}

header ul.navarea .openbtn span:nth-of-type(2) {
top: 23px;
}

header ul.navarea .openbtn span:nth-of-type(3) {
top: 31px;
}

header ul.navarea .openbtn p {
font-size: 11px;
color: #fff;
margin-top: 38px;
letter-spacing: 0.04em;
font-family: 'Montserrat', sans-serif;
text-align: center;
}

header ul.navarea .openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}

header ul.navarea .openbtn.active span:nth-of-type(2) {
opacity: 0;
}

header ul.navarea .openbtn.active span:nth-of-type(3){
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}

@media only screen and (max-width: 900px) {
header ul.navarea li.logobox_pc {
display: none;
}

header ul.navarea li.logobox_sp {
display: block;
position: absolute;
z-index: 9999;
top: 5px;
left: 15px;
}

header ul.navarea #g-nav ul {
left: 35%;
transform: translate(-50%,-50%);
}

header ul.navarea #g-nav li a.primary {
font-size: 15px;
}

header ul.navarea #g-nav li a.secondary {
font-size: 13px;
}

header ul.navarea .openbtn {
top: 10px;
}
}



/*---mainimg---*/
	
#mainimg {
width: 100%;
position: relative;
margin-bottom: 100px;
}

#mainimg .sdgs {
position: absolute;
z-index: 999999;
left: 80%
}

#mainimg .video-container {
margin: 0 auto;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

#mainimg .video-wrap {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}

#mainimg video.topmovie {
min-width: 100%;
min-height: 100vh;
position: absolute;
}

@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
#mainimg video.topmovie {
width: 100%;
top: 50%;
transform: translateY(-50%);
}
}

@media (max-aspect-ratio: 16/9) {
#mainimg video.topmovie {
height: 100%;
left: 50%;
transform: translateX(-50%);
}
}

#mainimg_sp {
display: none;
}

@media only screen and ( max-width : 850px ) {
#mainimg {
display: none;
}

#mainimg_sp {
background: url("../images/movie/mainimg_sp.jpg") no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
}
}


/*---scrolldown---*/

.scrolldown {
position: absolute;
bottom: 10px;
left: 50%;
}

.scrolldown span {
position: absolute;
left: 7px;
bottom: 3px;
color: #fff;
word-break: keep-all;
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
text-shadow: 0 0 4px #000;
letter-spacing: 0.1em;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}

.scrolldown:before {
content: "";
position: absolute;
bottom: 0;
left: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
animation:
circlemove 1.7s ease-in-out infinite,
cirlemovehide 1.7s ease-out infinite;
}

@keyframes circlemove{
0%{bottom:45px;}
100%{bottom:-5px;}
}

@keyframes cirlemovehide{
0%{opacity:0}
50%{opacity:1;}
80%{opacity:0.9;}
100%{opacity:0;}
}

.scrolldown:after {
content:"";
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 50px;
background: #fff;
}



/*---underimg---*/

.undertitle ul.title {
width: 100%;
text-align: center;
}

.undertitle ul.title h2 {
font-size: 34px;
color: #fff;
text-shadow: 0 0 4px #222;
font-family: 'Noto Serif JP', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
letter-spacing: 0.06em;
padding-top: 223px;
}

#undermainimg {
width: 100%;
height: 440px;
position: relative;
overflow: hidden;
margin-bottom: 48px;
}

#undermainimg .sdgs {
position: absolute;
z-index: 999999;
left: 80%
}

.unimg_comm {
background: url("../images/untitbg/titimg_comm.jpg")no-repeat;
background-size: cover;
}

@media only screen and ( max-width : 1200px ) {
undertitle ul.title h2 {
padding-top: 15px;
}

#undermainimg {
height: 330px;
}
}
	
@media only screen and (max-width: 900px) {
#undermainimg .sdgs {
display: none;
}

.undertitle ul.title h2 {
font-size: 23px;
padding-top: 98px;
}

#undermainimg {
height: 200px;
background-position: 50% center;
padding-top: 0px;
margin-bottom: 27px;
}
}




/*---contents---*/

#contents {
width: 100%;
max-width: 75%;
margin: 0 auto 40px auto;
box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
#contents {
max-width: 100%;
padding: 0 3%;
}
}


/*---title---*/

h3.mt01 {
font-family: 'Noto Serif JP', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
font-size: 32px;
letter-spacing: 0.05em;
text-align: center;
margin-bottom: 40px;
line-height: 140%;
}

h3.mt01 hr {
border: none;
border-bottom: 2px solid #333;
width: 30%;
margin: 0 auto;
padding-top: 5px;
}

h3.mt02 {
margin-bottom: 40px;
}

h3.mt02 img {
width: 100%;
max-width: 100%;
}

@media only screen and (max-width: 850px) {
h3.mt01 {
margin-bottom: 30px;
font-size: 26px;
}
}


/*---pagetop---*/

#page-top a {
display: flex;
justify-content: center;
align-items :center;
background: #222;
border-radius: 2px;
width: 48px;
height: 48px;
color: #fff;
text-align: center;
text-transform: uppercase; 
text-decoration: none;
letter-spacing: 0.1em;
font-family: 'Montserrat', sans-serif;
transition:all 0.3s;
opacity: 0.9;
}

#page-top a:hover {
opacity: 0.6;
}

#page-top {
position: fixed;
right: 10px;
bottom: 20px;
z-index: 2;
opacity: 0;
transform: translateY(100px);
}

#page-top.UpMove {
animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime{
from {
opacity: 0;
transform: translateY(100px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

#page-top.DownMove{
animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime{
from {
opacity: 1;
transform: translateY(0);
}

to {
opacity: 1;
transform: translateY(100px);
}
}




/*---footer---*/

#footer {
width: 100%;
}

#footer .footerbox {
width: 75%;
margin: 0 auto;
}

#footer .footerbox ul.infobox {
padding: 2% 0;
text-align: center;
margin-top: 25px;
}

#footer .footerbox ul.infobox h1 {
font-size: 11px;
padding-bottom: 8px;
}

#footer .footerbox ul.infobox p {
font-size: 14px;
line-height: 170%;
margin: 10px 0;
}

#footer .footerbox ul.infobox .ftlogo {
padding-bottom: 12px;
}

#footer .footerbox ul.copy {
clear: both;
width: 100%;
padding: 2% 0;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.06em;
font-family: 'Montserrat', sans-serif;
text-align: center;
}

#footer .footerbox ul.ftnavi {
float: right;
width: 25%;
padding: 3% 0;
}

#footer .footerbox ul.ftnavi li {
float: left;
margin-right: 30px;
}

#footer .footerbox ul.ftnavi li p {
line-height: 250%;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.08em;
}

#footer .footerbox ul.ftnavi li p a {
font-size: 14px;
font-weight: 500;
text-decoration: none;
}

@media only screen and ( max-width : 1200px ) {
#footer .footerbox {
width: 98%;
margin: 0 auto;
}

#footer .footerbox ul.ftnavi {
width: 35%;
padding: 5% 0 3% 0;
}
}

@media only screen and (max-width: 900px) {
#footer {
text-align: center;
padding: 3% 0;
}

#footer .footerbox {
width: 100%;
margin: 0 auto;
}

#footer .footerbox ul.infobox {
width: 100%;
margin: 0 auto;
}

#footer .footerbox ul.infobox h1 {
display: none;
}

#footer .footerbox ul.ftnavi {
display: none;
}

#footer .footerbox ul.infobox li.copy {
padding: 2% 0;
}
}