@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body{line-height:1; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block; }
ul{list-style:none; }
blockquote, q{quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after{content:''; content:none; }
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
img{vertical-align:top; font-size:0; line-height:0; }
ins{background-color:#ff9; color:#000; text-decoration:none; }
mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del{text-decoration:line-through; }
abbr[title], dfn[title]{border-bottom:1px dotted; cursor:help; }
table{border-collapse:collapse; border-spacing:0; }
em{font-style:normal; }
hr{display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select{vertical-align:middle;}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{display:block;}

*,:before,:after{box-sizing:border-box;-webkit-text-size-adjust:100%; max-height: 100%;}
.cf:before,.cf:after{content:"";display:table;}
.cf:after{clear:both;}
.cf{*zoom:1;}

html{font-size:62.5%;}
body{font-size:14px; font-size:1.4rem; font-family:system-ui, "Hiragino Sans", "YuGothic","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Gothic",sans-serif; letter-spacing:0.1rem; line-height:1.5; text-align:center; -webkit-text-size-adjust:100%; color:#fff; max-height: 100%; box-sizing:border-box; margin:0;}
body:before{content:""; display:block; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100vh; background:url("../lib/bg.jpg") center; background-size:cover;}

@font-face {
  font-family: 'gtft';
  src:  url('../lib/fonts/gtft.eot?ahals8');
  src:  url('../lib/fonts/gtft.eot?ahals8#iefix') format('embedded-opentype'),
    url('../lib/fonts/gtft.ttf?ahals8') format('truetype'),
    url('../lib/fonts/gtft.woff?ahals8') format('woff'),
    url('../lib/fonts/gtft.svg?ahals8#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'gtft' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play:before {
  content: "\e912";
}
.icon-film:before {
  content: "\e913";
}



img {width:100%; max-width:100%; height:auto;}

/*Layout*/
a{color:#FFFF99; text-decoration:none; opacity: 1; transition: 0.5s; -webkit-transition:0.5s; text-decoration:underline;}
a:hover{opacity: 0.7; transition: 0.5s; -webkit-transition:0.5s;}
a.line{text-decoration:underline;}

.red{color:#ff0000;}
.bold{font-weight:700;}
.sml{padding-left:4px; font-size:0.8em;}
strong{font-weight:700;}



br.pc{display:none;}
br.smp{display:block;}
br.tbl{display:block;}
@media only screen and (min-width:980px) {
br.pc{display:block;}
br.smp{display:none;}
}

img[src$=".svg"] {width: 100%;}

.box{position:relative; display:block; padding:0 15px; max-width:1045px; margin:0 auto;}
@media only screen and (min-width:740px) {
.box{padding:0 20px;}
}

body{}

header.box{max-width:1045px;}
header h1{margin:20px 0 16px 0; max-width:600px;}
header #jacket{margin-bottom:8px;}
header .date{margin-bottom:8px;}
header h2{margin-bottom:8px; font-size:16px; font-size:1.6rem; text-align:left;}

@media only screen and (min-width:380px) {
header .date{margin-bottom:16px; max-width:500px;}
}

@media only screen and (min-width:740px) {
header.box{padding:0 20px;}
header #hdtitle{float:right; margin-top:5%; width:46%;}
header #jacket{float:left; margin-top:30px; width:52%;}
header .date{line-height:3; margin-bottom:8px;}
header .photo{max-width:220px;}
}

@media only screen and (min-width:840px) {
header h2{margin-top:8px; font-size:19px; font-size:1.9rem;}
header .photo{margin-top:16px; max-width:250px;}
}

@media only screen and (min-width:1045px) {
header.box{padding:0;}
}

#information{background:rgba(0, 0, 0, 0.40); margin:16px 15px; padding:10px 20px; text-align:left; font-size:15px; font-size:1.5rem;}

@media only screen and (min-width:1085px) {
#information{padding:30px; margin:30px auto 0 auto;}
}

#information2{background:rgba(0, 0, 0, 0.40); margin:16px 15px; padding:10px 20px; text-align:left; font-size:15px; font-size:1.5rem;}
#information2 p{margin-bottom:16px;}

@media only screen and (min-width:1085px) {
#information2{padding:30px; margin:30px auto 0 auto;}
}

#btnarea|{text-align:center;}
#btnarea .btn{display:block; width:80%; margin:1% auto; padding:1%; max-width:340px;}
#btnarea .btn a{position:relative; display:block; background:#ffff00; color:#000; font-weight:700; text-align:center; text-decoration:none; padding:15px 10px;}
#btnarea .btn a:after{position:absolute; content:""; right:8px; bottom:8px; display:block; background:#ffff00; border-left: 10px solid transparent; border-bottom: 10px solid #000;}

@media only screen and (min-width:740px) {
#btnarea .btn{width:50%; margin:1% auto; display:inline-block; padding:1%;}
}

#tracklist{background:rgba(0, 0, 0, 0.40); margin:16px 15px; padding:20px;}
#tracklist h3 img{height:25px; width:auto;}
#tracklist ol{margin:16px auto; text-align:left; max-width:700px;}
#tracklist ol li{list-style:decimal-leading-zero; padding:8px 5px; border-bottom:1px solid #ccc; list-style-position: inside;}
#tracklist ol li a{text-decoration:none;}
#tracklist ol li a span{font-size:18px; vertical-align:sub;}

@media only screen and (min-width:380px) {
#tracklist ol li{font-size:15px; font-size:1.5rem;}
}
@media only screen and (min-width:740px) {
#tracklist{margin-top:30px; padding:30px;}
}
@media only screen and (min-width:1085px) {
#tracklist{padding:30px; margin:30px auto 0 auto;}
}

#movie{background:rgba(0, 0, 0, 0.40); margin:16px 15px; padding:20px;}
#movie h3 img{height:25px; width:auto;}
#movie .moviebox{position:relative; width:100%; height:0; margin-top:16px; padding-bottom: 56.25%; overflow:hidden;}
#movie .moviebox iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#movie h4{margin-top:16px; font-size:16px; font-size:1.6rem;}

@media only screen and (min-width:740px) {
#movie{margin-top:30px; padding:30px;}
#movie .mvbox{display:inline-block; width:45%; margin:16px 1%;}
}

@media only screen and (min-width:960px) {

}
@media only screen and (min-width:1085px) {
#movie{padding:30px; margin:30px auto 0 auto;}
}

#credit{background:rgba(0, 0, 0, 0.40); margin:16px 15px; padding:20px;}
#credit h3{margin-bottom:16px;}
#credit h3 img{height:25px; width:auto;}
#credit p{margin-bottom:16px; text-align:left;}

@media only screen and (min-width:740px) {
#credit{margin-top:30px; padding:30px; font-size:15px; font-size:1.5rem;}
}
@media only screen and (min-width:1085px) {
#credit{padding:30px; margin:30px auto 0 auto;}
}

footer{padding:60px 0 20px 0; font-size:12px; font-size:1.2rem; letter-spacing:0;}