html {
  font-size: 62.5%;
}

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;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  font-feature-settings: 'palt';
  width: 100%;    
  position: fixed;  
  font-size: 1.3em;    
}

*, :before, :after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
  width: 100%;
  height: auto;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  text-decoration: none;
  vertical-align: bottom;
  cursor: pointer;
}



hr {
  border: 0;
  border-top: 2px solid #111;
  margin: 3rem 0;
  padding: 0;
  width: 100%;
}

h1, h2, h3, h4, h5, h6, p, span, a {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  vertical-align: initial;    
}

h1, h2, h3, h4, h5, h6{
  font-weight: 700;
}

a:focus {
  outline: 0;
}

a:hover, a:active {
  outline: 0;  
}

img {
  width: 100%;
  width: auto;
  height: auto;
  max-width: 100%;
  backface-visibility: hidden;
  font-size: 0;
  line-height: 0;
}

a img {
  border: 0;
}

small{
  font-size: 80%;    
}

ul , ol{
    padding-left: 2.8rem;
}


li{
  margin-bottom: 0.5rem;    
}

.text-justify{
	text-align: justify;
}

.youtube {
    width: 70%;
    margin: 0 auto 6rem;
}

.video-wrap {
    width:100%;
    padding-bottom: 56.25%;
    height:0px;
    position: relative;
}

.video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ==================================================== */
html{
  height: auto;
  position: relative;
}

body{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.4rem;    
  color: #111;
  letter-spacing: .1rem;
  position: relative;
  height: auto;
  overflow-y: auto;    
  overflow-x: hidden;   
  width: 100%;
  line-height: 1.8; 
  background: linear-gradient(#fff,#daedff,#fff,#d9feff);    

}

body:before{

}

h1{
	font-weight: 800;
    font-size: 2.6rem;
    letter-spacing: 0.05rem;
    line-height: 1.4;
    margin-bottom: 3rem; 
	color: #2a53a1;
}

#CD-DL h2 {
  font-size: 2.8rem; 
  position: relative;
  display: inline-block;
  padding: 0 9.5rem;
  margin-bottom: 2.5rem;    
}

#CD-DL h2:before, #CD-DL h2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 7rem;
  height: 2px;
  background-color: black;
}

#CD-DL h2:before {
  left:0;
}

#CD-DL h2:after {
  right: 0;
}


#tracklist h2{
    font-size: 2.8rem;
    letter-spacing: 0.2rem;
    line-height: 1;
    margin-bottom: 0rem;
    padding-bottom: 0.8rem;
    border-bottom: solid 2px #111;
}


h3{
    font-size: 2.3rem;
    letter-spacing: 0.05rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}

h4{
    font-size: 1.5rem;
    letter-spacing: 0.02rem;
    margin-bottom: 1.8rem;    
}

p{
  font-size: 1.4rem;    
}

.release{  
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;
    text-align: center;
    font-size: 4.5rem;
    margin: 3rem 0;
}

.release span{
    color: #6a539f;
}

.inner{
  max-width: 970px;
  width: 96%;    
  margin: 0 auto;

}


.container p{
    text-align: justify;
}


section{
    padding-top: 5rem;
}

.top-img{
    top:0;
    position: relative;
}

.top-img img{
    overflow: hidden;
    width: 100%;
    max-height: 100vh;    
    object-fit: cover;
    object-position: 100% 45%;
} 

#info{
    background-color: #fff;
    padding: 6rem 0;
}

.bdr01{
  display: inline-block;
  margin: 0;
  border-top: solid 12px #111;
  border-bottom: solid 10px #111;    
  position: relative;
}

.bdr01:after{
  content: "";
  border-top: solid 4px #ecd88c;
  border-bottom: solid 4px #ecd88c;    
  position: absolute;
  top: 3px;
  bottom: 3px;    
  left: 0px;
  width: 100%;
}

#info .container{
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;
    width: 100%;
}

.jacket{
    width: 40%;
}

.content{
    width: 55%;
}

#tracklist .inner{
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;    
    padding: 4rem 5rem;
    background-color: #fff;
    border: solid 5px #000;
    position: relative;
    
}

#tracklist .inner:after{
  content: "";
  border: dotted 2px #e13739;  
  position: absolute;
  top: 3px;
  bottom: 3px;    
  left: 3px;
  right: 3px;
}

.tracklist{
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;  	
    width: 100%;
	position: relative;
}

#tracklist .container{
    width: 47%;
	margin-top: 3rem;
}  

#tracklist h4{
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.6;
    text-align: justify;
    border-bottom: solid 1px;
	letter-spacing: 0;
	margin-bottom: 1rem;
}
  

.btn-container{
    flex-wrap: wrap;
    justify-content: center;
    display: flex;    
}

.btn {
    font-style: normal;
    text-align: center;
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 1rem 5rem;
    border: solid 3px #6a539f;
	background-image: linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(106,83,159,1) 50%);
	background-position: 0 0;
	background-size: 200% auto;
	transition: .3s;
    color: #6a539f;
    text-decoration: none;
    margin: 0 2rem 2.5rem 2rem;   
}

.OS{
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.OS .btn {
    font-style: normal;
    text-align: center;
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 1rem 5rem;
    border: solid 3px #2a53a1;
	background-image: linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(42,83,161,1) 50%);
	background-position: 0 0;
	background-size: 200% auto;
	transition: .3s;
    color: #2a53a1;
    text-decoration: none;
    margin: 0 1.5rem 0rem 1.5rem;   
}

.btn:hover {
	background-position: -100% 0;
    color: #fff;
}

.btn2 {
    text-align: center;
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 700;
    width: 2%;
    padding: 1rem 0;
    color: #6a539f;
    text-decoration: none;
    margin-left: 1rem;    
}

.banner{
    flex-wrap: wrap;
    justify-content: space-between;
    display: flex;
    margin-bottom: 5rem;
}

.banner a{
    width: 49%;  
    position: relative;  
    display: inline-block;    
}

.official{
    width: 50%;
    margin-bottom: 3rem;
}


footer{
	margin-top: 8rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #111;
    text-align: center;    
}

footer p{
    color: #fff;    
    text-align: center;
    
}

.logo{
	max-width: 200px;
    margin-bottom: 1rem;
}



@media screen and (max-width: 991px) {
    
.inner{
  width: 92%; 

}
    
.release{
    font-size: 3.5rem;
    margin: 3rem 0;
} 
  
section{
    padding-top: 3rem;
    padding-bottom: 3rem;
}    
    
#info{
    margin-bottom: 3rem;
    padding: 4.5rem 0;
}    
    
h1{
    font-size: 2.8rem;
    letter-spacing: 0.05rem;
    margin-bottom: 2rem;
}    
    
h3{
    font-size: 1.7rem;
    letter-spacing: 0.05rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    
}   
    
    
#CD-DL h2 {
  font-size: 2.2rem;
  padding: 0 9rem;
  margin-bottom: 1.5rem;    
}   
    
#tracklist h2{
    font-size: 2.2rem;
    margin-bottom: 2rem;
    padding-bottom: 0.6rem;
}   
    
.CD{
    margin-bottom: 3rem;
    
}    
	
	
    
.btn {
    font-size: 1.6rem;
    padding: 1rem 3.5rem;
    border: solid 2px;
    margin-bottom: 2rem;    
}
	
.OS .btn {
    font-size: 1.6rem;
    padding: 1rem 3.5rem;
    border: solid 2px #2a53a1;
}	

.btn2 {
    font-size: 1.6rem;
    padding: 1rem 0;
    margin-top: 0.5rem;    
}
    
#tracklist .inner{
    padding: 3.5rem 4rem;
    border: solid 4px #111;
    
}    

    
#tracklist .container p{
    font-size: 90%;
        
}
    
    
    
}
    
@media screen and (max-width: 767px) {

html{

    font-size: 0.6em;
}    

    
  
    
h1{
    font-size: 2.4rem;
    letter-spacing: 0.05rem;
    line-height: 1.2;
    margin-bottom: 2rem;
}        
    
.youtube {
    width: 80%;
    margin: 0 auto 4rem;
}
    
.jacket{
    width: 40%;
}

.content{
    width: 55%;
}  
    
#tracklist .container p{
    font-size: 100%;
        
}
	
#tracklist .container{
    width: 100%;
	margin-top: 3rem;
}  	
    
.banner{
    margin-bottom: 3rem;
}    
    
    
}

@media screen and (max-width: 576px) {
html{

    font-size: 0.5em;
}    
	
body{
    line-height: 1.6;
	letter-spacing: 0.02rem;
        
} 
    
.inner{
  width: 92%; 

}
    
.release{
    font-size: 3rem;
    margin: 2rem 0;
} 
  
section{
    padding-top: 2rem;
    padding-bottom: 2rem;
} 
    
#info{
    margin-bottom: 2rem;
    padding: 4rem 0;
}  
    
h1{
    font-size: 2.2rem;
}      
    
.jacket{
    width: 100%;
    margin-bottom: 2rem;
	text-align: center;
}
	
.jacket img{
    width: 80%;
}

.content{
    width: 100%;
}      
    
.btn, .OS .btn {
    padding: 0.8rem 2rem;
	margin: 0 1rem 2rem 1rem;
}
	
    
#CD-DL h2 {
  padding: 0 8.5rem;
  margin-bottom: 2rem;    
}  
    
#tracklist h2{
    margin-bottom: 0rem;
    padding-bottom: 0.4rem;
}     
    
#tracklist .inner{
    padding: 2.5rem 2.5rem;
    border: solid 3px;
    
} 

.banner{
    margin-bottom: 2rem;
}       

.official{
    margin-bottom: 2rem;
}
	
.logo{
	max-width: 150px;
    margin-bottom: 1rem;
}	
    
footer{
	margin-top: 3rem;
		
	}	
	
}

@media screen and (max-width: 414px) {
    
h1{
    font-size: 2.2rem;
}        
    
    
.official{
    width: 90%;
} 
    
.banner a{
    width: 100%;

}  
    
.mb-2{
    margin-bottom: 2rem;        
}    
    
}

@media screen and (max-width: 320px) {

html{
    font-size: 0.4em;
}
    

    
}