@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&family=M+PLUS+Rounded+1c:wght@700;800&family=Noto+Sans+JP:wght@300;500;700;900&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
margin-block-start:0;
margin-block-end:0;
}

html{
font-size: 62.5%;
/*\*/
_font-size: 62.5%;
/**/
}
::selection{
background: #000000;
color: #ffffff;
}

a{
color: #000000;
text-decoration: none;
}

a.out{
background: url(../img/ico_out.png) no-repeat top right;
background-size: 16px 16px;
}

a:hover, a:focus{text-decoration: none;}

a:hover,a:focus,
a:hover img,
a:focus img{
filter: alpha(opacity=9) !important;
-moz-opacity: 0.9 !important;
opacity: 0.9 !important;
}

img {
margin: 0;
padding: 0;
border: 0;
vertical-align:top;
}

ul, ol {
list-style: none;
}

strong{
font-weight: bold;
}

.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end MacIE5 */

.embed{
width: 100%;
display: block;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.embed iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.embed video{
width: 100%;
height: auto;
margin: 0;
padding: 0;
background-size: contain;
}
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}

body{
height: 100vh;
display: block;
background-image: url(../img/bg_top_left.png),url(../img/bg_top_right.png),url(../img/bg_bottom_left.png),url(../img/bg_bottom_right.png);
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
background-size: 445px 297px,420px 238px,267px 243px,388px 440px;
background-position: left top, right top, left bottom, right bottom;
background-color: #d2d8dc;
color: #000000;
font-family:'Noto Sans JP','ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-size: 1.6rem;
line-height: 2;
box-sizing: border-box;
font-feature-settings:"palt";
letter-spacing: 0.5px;
text-align: center;
position: relative;
overflow-x: hidden;
}
body.scroll-prevent{
overflow: hidden;
}

/* Layout */
section{
width:100%;
display:block;
}
#page{
width: 100vw;
min-height: 540px;
display: block;
position: relative;
}

.scroll-prevent {
position: fixed;
width: 100%;
height: 100vh;
overflow: hidden;
}
.wrapper{
width: 720px;
display: block;
margin: 0 auto 0 auto;
text-align: center;
position: relative;
overflow: visible;
}
.wrapper *{
position: relative;
}

.nolink{
color: #666666;
pointer-events: none;
cursor: default;
}

.pcHide{
display: none !important;
}
.spHide{
display: block !important;
}
.pcHide_ib{
display: none !important;
}
.spHide_ib{
display: inline-block !important;
}
.pc_br{
display: inline;
}
.sp_br{
display: none;
}

#page:after{
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

/* page element */
header{
width: 100vw;
display: block;
position: absolute;
top: 20px;
left: 0;
}
header h1{
width: 100%;
height: 0;
display: block;
padding-top: 87px;
background: url(../img/h1.png) no-repeat center center;
background-size: contain;
overflow: hidden;
}
header h2{
width: 660px;
display: block;
margin: 15px auto 0 auto;
background-color: #b50083;
color: #ffffff;
font-size: 3rem;
font-weight: 700;
line-height: 56px;
letter-spacing: 2px;
}

#movie{
height: 100vh;
display: flex;
align-items: center;
z-index: 1000;
}
#movie .wrapper{
width: 100vw;
margin-top: 50px;
padding: 40px;
background: url(../img/bg_movie.jpg) no-repeat center top;
background-color: #e7e7e7;
filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}
.movieBlock{
width: 660px;
display: block;
margin: 0 auto 0 auto;
border: 10px solid #ffffff;
}

footer{
width: 100vw;
display: block;
position: absolute;
bottom: 20px;
left: 0;
}


/* -- */
/* -- */
/* SP */
/* -- */
/* -- */
@media screen and (max-width: 768px) {
/* */
/* */

a{
}

a.out{
background: url(../img/ico_out.png) no-repeat top right;
background-size: 14px 14px;
}

a:hover, a:focus{text-decoration: none;}

a:hover,a:focus,
a:hover img,
a:focus img{
filter: alpha(opacity=1) !important;
-moz-opacity: 1 !important;
opacity: 1 !important;
}

body{
background-image: url(../img/bg_top_left.png),url(../img/bg_top_right.png),url(../img/bg_bottom_left.png),url(../img/bg_bottom_right.png),url(../img/bg_sp.jpg);
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-size: 39% auto,42% auto,28% auto,36% auto,auto calc(50vh - 80px);
background-position:left top, right top, left bottom, right bottom,center bottom;
font-size: 1.5rem;
line-height: 1.75;
letter-spacing: 0.5px;
}

/* Layout */
section{
}
#page{
width: 100vw;
min-width: auto;
overflow: hidden;
}
.wrapper{
width: auto;
margin: 0 20px 0 20px;
}
.wrapper *{
position: relative;
}

.nolink{
color: #666666;
pointer-events: none;
cursor: default;
}

.pcHide{
display: block !important;
}
.spHide{
display: none !important;
}
.pcHide_ib{
display: inline-block !important;
}
.spHide_ib{
display: none !important;
}
.pc_br{
display: none;
}
.sp_br{
display: inline;
}

.contents{
height: 100vh;
display: flex;
align-items: center;
}
.contents_element{
width: 100vw;
display: block;
padding-bottom: 130px;
}

/* page element */
header{
width: auto;
display: block;
position: relative;
top: auto;
}
header h1{
padding-top: 14.26%;
background: url(../img/h1.png) no-repeat center center;
background-size: contain;
}
header h2{
width: auto;
margin: 12px auto 0 auto;
font-size: 3rem;
line-height: 52px;
letter-spacing: 1px;
}

#movie{
width: auto;
height: auto;
display: block;
margin-top: 24px;
}
#movie .wrapper{
margin: 0 0 100px 0;
padding: 2px 12px 2px 12px;
background: none;
background-color: #ffffff;
filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}

.movieBlock{
width: auto;
border: 8px solid #ffffff;
box-sizing: border-box;
}

footer{
bottom: 20px;
left: 0;
}

/* */
/* */
}
/* -- */
/* -- */
/* SP */
/* -- */
/* -- */