@charset "UTF-8";
/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body {
	font-size: 100%;
	line-height: 1.6;scroll-behavior: smooth;
	}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
fieldset, img
{ border: 0;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
/* ol, ul
{ list-style: none;} */
ul{
  margin: 0;
  padding: 0;
}
dl{
  margin: 0;
  padding: 0;
}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ outline: none; }
input, textarea
{ border-radius: 0; }
input[type="button"],input[type="submit"]
{ -webkit-appearance: none; background: none; border: none; padding: 0; cursor: pointer;}
abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

/* !Layout
---------------------------------------------------------- */
html { overflow-y: scroll; width: 100%;scroll-behavior: smooth; }
body { text-align: center;width: 100%;  font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
background-color: #62626b;
}

/* ======================================== */

a:link { color: #eaeaea; text-decoration:none; transition: 0.5s;}
a:visited { color: #050404; }
a:hover { color: #c8161d; }
a:active { color: #7b828c; }

/* contents
---------------------------------------------------------- */
#contents {	
	margin: 0 auto; position:relative;
	width: 100%;height: auto;
	padding:0;
	text-align:left;
}

#contents:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
.wrap {
overflow: hidden;
}
header.head{ width: 100%; height: auto; position: relative; margin: auto;
text-align:center;
}


.top-title{ width: 100%; height: auto; margin:auto ; }
.top-title img{ width: 100%; height: auto; }


div.pc_head{display:flex;flex-direction:column;}

.mob-head{ display: none;}
.mob-head figure{ max-width: 100%;  height: auto;}



.menu-bar {
  width: 100%;
  padding: 30px;
  box-sizing: border-box; 
}

.menu-bar ul {
  list-style: none; 
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center; justify-content: space-between;
}
.menu-bar ul li{
font-size: clamp(1rem, 0.111rem + 1.85vw, 1.5rem); font-weight: bold;
}

.menu-bar .logo {
  flex-grow: 1; 
  margin-right: auto; 
}

.menu-bar .logo img {
  height: 100%; max-width: 100%;
}

.menu-bar .menu-item a {
  display: block;
  color: white;
  text-decoration: none; 
  padding: 10px 15px;
  transition: color 0.3s;
}

.menu-bar .menu-item a:hover {
  color: #be1029;
}

.menu-bar ul {
  justify-content: flex-end;
}

.menu-bar .logo {
  display:flex;justify-content:flex-start;
}
.menu-bar .menu-item:not(:first-child) {
  margin-left: 10px; 
}
@media screen and (max-width: 1100px) {
.menu-bar {
  padding: 10px;}
.menu-bar .menu-item a {
  padding: 10px ;
}
.menu-bar .menu-item:not(:first-child) {
  margin-left: 0px; 
}
}


h1.top-copy{ color: #f7f3e3; font-size: 64px; border-top: 1px #050404 solid; }

.top-jkt {
  border: 10px solid #000;
  box-sizing: border-box;
  display: block;
}
.top-box{ width: 90%; margin: auto; }

.copy-box { margin-top: 60px;display:flex;justify-content:center;align-items:center; flex-direction: column; padding: 30px;
  border: 6px solid;
  border-image: linear-gradient(to bottom, #a7a6a1, #f8e7a3) 1;
  height: auto;
  margin-inline: auto;
  max-width: 80%;
  width: auto; color: #f7f3e3;
}

div.pc_head{display: block ;}

.mob-head{ display: none;}
.mob-head figure{ max-width: 100%;  height: auto;}



/* モバイル用トップ */
.mob-top-box{ width: 100%; height: auto; }
.mob-top-box img{ width: 100%; height: auto; }

/* モバイル用メニュー */
.menu-button {
  position: fixed;
  top: 1px;
  right: 1px;
  z-index: 1001; 
  padding: 10px 15px;
  font-size: 14px; font-weight: bold;
  cursor: pointer; border-radius: 5px; background-color: #050404;
color: #eaeaea;
}


.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); 
  z-index: 1000;
  transform: translateY(-100%); 
  transition: transform 0.5s ease-in-out; 
  display: flex;
  justify-content: center;
  align-items: center;
}


.nav-drawer.nav-open {
  transform: translateY(0); 
}


.nav-drawer ul { width: 100vw;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.nav-drawer li { width: 100%; display: block;
  margin: 20px 0;
}

.nav-drawer a { width: 100%;
  color: #fff;
  text-decoration: none;
  font-size: 24px;
  padding: 15px 30px; 
  display: block; 
  transition: background-color 0.3s ease; 
}

.nav-drawer a:hover {
  background-color: #575757; 
}

.mob-logo-in{ width: 60%; }



@media screen and (max-width: 767px) {
header.head{ width: 100%; height: auto; position: relative;text-align:center; margin: auto;
}
div.pc_head{display: none ;}
.mob-head{ display: block; width: 100%;}
 }



/* @media screen and (min-width:391px) and (max-width: 767px) {
header.head{ height: auto;}
.mob-head{display: block;width: 100%; height: 60px; text-align: left; }
.mob-head figure{ max-width: 100%; height: auto;}
.top-mob-head{display: block;width: 100%; height: auto; margin-bottom: 30px;}
.top-mob-head img{ width: 100%; height: auto;}
div.pc_head{ display: none;}
} */


/* For iPad */
@media screen and (min-width:768px) and (max-width:949px){
header.head{height: auto;}

div.flame-box{ width: 100%; margin-top: 30px; margin-bottom: 50px; padding: 10px ; display:flex;justify-content:center;justify-content:space-around;
}


}

/* For Laptop */
@media screen and (min-width:950px) and (max-width:1620px){
header.head{height: auto;}




}

/* For hajikko */
@media screen and (min-width:1630px) and (max-width:1920px){
header.head{height: auto;}


}

/* ======================================== */

.main {
	margin: 0 auto; padding: 0;
	width: 100%; height:100%;
    display:flex;	
    flex-direction:column;
    flex-wrap:wrap;
}

.br-sp {display: none; }
.br-pc {display: block; }


.main-box{ width: 100%; height: auto; position: relative;text-align:center; padding:0; margin-top: 100px;}

.main-box-in{ width: 100%; height: auto; position: relative;text-align:center; padding:0; margin-top: 10px;}


h3.news {
    font-size:36px; margin: 40px 0; color: #eaeaea;border-bottom: 1px #050404 solid; letter-spacing: 0.1em;width: 90%; margin: auto;
    display:flex; align-items:flex-start;
}
.top-more-box{ width: 90%; margin: auto;
    display:flex; align-items:center;justify-content:flex-end; }

.more-btn{ width: 130px; margin-top: 20px; padding: 10px; color: #eaeaea; font-size: 20px;
font-weight: bold; border: 1px #050404 solid; border-radius: 10px;
  transition: all 0.5s ease-out; }
.more-btn:hover{ background-color: #be1029; color: #050404; }

dl.news-box{ width: 80%; margin: auto; display:flex;justify-content:flex-start;align-items:center;}
dl.news-box dt{width: 140px; text-align: center; padding: 10px;

 }
dl.news-box dd{ padding: 10px;text-align: left; flex:1 auto;color: #eaeaea;
font-size: 24px;
}
dl.news-box dd img{width: 100%; height: auto;
}
.circle{ background-color: #eaeaea; width: 130px; height: 130px; border-radius: 50%; line-height: 1.3;display:flex;align-items:center;justify-content:center; font-weight: bold; font-size: 22px; }

h2.sub-title{ color: #eaeaea; border-bottom: 1px #050404 solid;
font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
letter-spacing: 0.1em;width: 90%; margin: auto;
    display:flex; align-items:flex-start; align-items:flex-start; }


dl.album-box{ width: 90%; background-color: #050404; padding: 10px;display:flex; align-items:flex-start; margin: auto; margin-top: 30px; }
dl.album-box dt{ width: 50%; text-align: left;}
dl.album-box dd{width: 50%;color: #eaeaea; text-align: left; padding-left: 40px;}
dl.album-box dt img{ width: 100%; height: auto;}

.album-date{ font-size: clamp(1.25rem, 0.886rem + 1.82vw, 2.25rem); border-bottom: 1px #eaeaea solid;color: #eaeaea;}
.komidashi{ font-size:clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem); color: #eaeaea;}
.album-title{ color: #c8161d; font-size: clamp(1.625rem, 1.261rem + 1.82vw, 2.625rem);
}

ol.song-list{ width: 80%; margin-left: 30px; list-style-type: decimal; line-height: 2;
display: flex;
align-items: left;
flex-direction: column;  text-align: left;
 }
ol.song-list li{font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem); font-weight: normal; letter-spacing: normal;}

ul.song-list-analog{ width: 80%; margin-left: 0px; margin-top: 30px; list-style-type: none; line-height: 2;
display: flex;
align-items: left;
flex-direction: column;  text-align: left; color: #eaeaea;}
ul.song-list-analog li{font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem); font-weight: normal; letter-spacing: normal;}

.analob-box{ padding: 30px; }


.btn-box{ width: 100%; text-align: left; margin: auto; padding: 60px 0; }

.buy-btn{width: 450px; border-radius: 20px;
  background-color: #62626b; padding: 20px 10px ; 
  font-optical-sizing: auto; 
  font-weight: bold; font-size: 20px; cursor: pointer;
  color: #eaeaea;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 3px 3px 10px 10px rgba(0, 0, 0, 0.6);

  position: relative;
  border: 0 solid #62626b;
  box-sizing: border-box;
  &::before{
    content: attr(data);
    display: block;
    position: relative;
    z-index: 1;
  }
  &::after{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transition: border-width 300ms;
    border: 0 solid #c8161d;
    box-sizing: border-box;
    z-index: 0;
  }
  &:hover{
    &::after{
      border-width: 10px; border-radius: 20px;
    }
  }
}

.buy-btn:hover{ color: #c8161d; background-color: #050404;}

dl.album-discrip-box{ width: 90%; margin: auto; padding-top: 30px; padding-bottom: 30px; font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem); color: #eaeaea; text-align: left;display:flex;
}
dl.album-discrip-box dt{width: 50%; padding: 0 10px 0 0; }
dl.album-discrip-box dd{width: 50%; padding: 0 0 0 10px; }
dl.album-discrip-box p{ padding-bottom: 20px; }
dl.album-discrip-box dd div{ padding: 20px; background-color: #050404; }
.message-tit{ width: 100%; text-align: center; }


dl.movie-box{ width: 90%; margin: auto; display:flex;justify-content:space-between; 
text-align: left; margin-bottom: 100px;}
dl.movie-box dt{width: 49%; padding-right: 2px;}
dl.movie-box dd{width: 49%; padding-left: 2px;}

/* youtube埋め込み */
.youtube-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 縦幅の指定 (16:9のアスペクト比) */
  height: 0; /* 縦幅はpadding-topで確保するので0に */
}

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

h3.sub-title{ color: #eaeaea; border-bottom: 1px #050404 solid;
font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
letter-spacing: 0.1em;width: 90%; margin: auto; margin-bottom: 20px;
margin-top: 20px;
    display:flex; align-items:flex-start; align-items:flex-start; }


h4.sub-title{ color: #050404; 
font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
letter-spacing: 0.1em;width: 90%; margin: auto; margin-bottom: 20px;
margin-top: 20px;
    display:flex; align-items:flex-start; align-items:flex-start; }

div.info-box{ background-color: #eaeaea; padding: 30px; width: 90%; margin: auto; }

dl.information{ width: 90%; margin: auto; display: flex; flex-direction: column; text-align: left; margin-bottom: 100px; color: #050404; }
dl.information dt{width: 100%; font-weight: bold;font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);border-left:4px #050404 solid; padding: 10px;}
dl.information dd{width: 100%;border-top: 1px #050404 solid;  padding: 10px;}
dl.information dd p{ padding-bottom: 10px;}
ul.sub-nav{ display:flex;justify-content:center; list-style: none; width: 90%; margin: auto; padding: 20px; }
ul.sub-nav li {  display: block;
  margin: 0 20px;color: #eaeaea;
}

.info-img{ float: right; margin: 5px;border: 4px #62626b solid;box-sizing: border-box; max-width: 100%; height: auto;}

a.red-link:link { color: #c8161d;  text-decoration:none; transition: 0.5s; }
a.red-link:hover { color: yellow; }
a.red-link:visited { color: #050404; }


div.message-con { width: 80%; margin: auto;
    display:grid;grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: auto;
 gap: 50px;
}
div.message-con .person {display:flex; flex-direction: column; justify-content:center;align-items:center;
}
div.message-con .person img{ width: 100%; height: auto; }
div.message-con .person img:hover{ opacity: 0.6; transition: 0.5s ease-out;}
div.message-con .person p{ font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); font-weight: bold; }

 p.junbi{ width: 600px; margin: auto;border: 10px #62626b solid; padding: 40px;
text-align: center; font-size: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem); color: #050404;
}

.name-title{ width: 100%; text-align: center; font-weight: bold; font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem); }
div.message-bg{ background-color: #62626c; padding: 30px; }
.message-photo{ float: left; border-bottom: 1px #050404 solid;}

dl.message-box{ width: 96%; margin: auto; display: flex; flex-direction: row; text-align: left; color: #050404; }
dl.message-box dt{width: 30%; font-weight: bold;font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem); padding: 10px;}
dl.message-box dd{width: 70%;  padding: 10px;color: #eaeaea; font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); line-height: 1.8;}
dl.message-box dt img{width: 100%; height: auto;}
.massage-title-mini{ width: 100%; text-align: left; font-weight: bold;color: #eaeaea; }

body .remodal {
  max-width: 80vw;
  padding: 50px;background-color: #eaeaea;
}

@media screen and (min-width:769px) and (max-width:1100px) {
  div.message-con {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; 
  }

dl.album-discrip-box{ flex-direction: column;
}
dl.album-discrip-box dt{width: 100%; padding: 0 0px 0 0; }
dl.album-discrip-box dd{width: 100%; padding: 0 0 0 0px; }
}

@media screen and (max-width: 768px) {
  div.message-con {
    grid-template-columns: 1fr; 
    gap: 30px; 
  }

ul.sub-nav{ width: 96%; margin: auto; padding: 20px; flex-direction: column; }
ul.sub-nav li { width: 100%; display: block;
  margin: 0 20px; text-align: left;
}

dl.message-box{ width: 96%; margin: auto;  flex-direction: column;  }
dl.message-box dt{width: 100%; }
dl.message-box dd{width: 100%; }

dl.album-discrip-box{ flex-direction: column;
}
dl.album-discrip-box dt{width: 100%; padding: 0 0px 0 0; }
dl.album-discrip-box dd{width: 100%; padding: 0 0 0 0px; }


dl.album-box{ width: 90%;  padding: 10px;flex-direction: column; margin: auto; margin-top: 30px; }
dl.album-box dt{ width: 100%; text-align: left;}
dl.album-box dd{width: 100%; padding-left: 0px;}

.btn-box{ width: 100%; text-align: center; padding: 30px 0; }
.buy-btn{width: 80%; margin: auto;
  font-optical-sizing: auto; 
  font-weight: bold; font-size: 18px;}

dl.movie-box{ width: 90%; margin: auto; flex-direction: column;
text-align: left; margin-bottom: 50px;}
dl.movie-box dt{width: 100%; padding-right: 0px; padding-bottom: 10px;}
dl.movie-box dd{width: 100%; padding-left: 0px; }

div.info-box{ padding: 10px; width: 96%;}
dl.information{ width: 96%;  margin-bottom: 30px; color: #050404; }
dl.information dt{width: 100%;font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem); padding: 5px;}
dl.information dd{width: 100%;  padding: 5px;}


body .remodal {
  max-width: 100vw;
  padding: 30px;background-color: #eaeaea;
}

 p.junbi{ width: 90%; margin: auto;border: 10px #62626b solid; padding: 40px;
text-align: center; font-size: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem); color: #050404;}


}

a.grey-link:link { color: #050404;  text-decoration:none; transition: 0.5s; }
a.grey-link:hover { color: #c8161d; }
a.grey-link:visited { color: #050404; }





@media screen and (max-width: 767px) {
.br-sp {display: block; }.br-pc {display: none; }

h3.news {
    font-size:26px; margin: 10px ; letter-spacing: 0.1em;width: 96%; 
}

.main-box{  margin-top: 10px;}
.more-btn{ width: 80px; margin-top: 10px; padding: 5px; font-size: 14px;
 }

dl.news-box{ width: 96%; margin: auto;}
dl.news-box dt{width: 100px; text-align: center; padding: 10px;

 }
dl.news-box dd{ padding: 10px;text-align: left; flex:1 auto;color: #eaeaea;
font-size: 18px;
}
dl.news-box dd img{width: 100%; height: auto;
}
.circle{ width: 90px; height: 90px; border-radius: 50%; line-height: 1.3; font-weight: bold; font-size: 18px; }

}









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

} 

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

}*/



/* For iPad */
@media screen and (min-width:768px) and (max-width:949px){
.k-sen{ width: 100%;display:flex;justify-content:center; margin-top: 20px; }
.br-sp {display: none; }.br-pc {display: none; }
.br-ipad{display: block; }





}


/* For Laptop */
@media screen and (min-width:950px) and (max-width:1329px){





}

/* nandemonai size */
@media screen and (min-width:1330px) and (max-width:1620px){



}
/* For hajikko */
@media screen and (min-width:1630px) and (max-width:1920px){



}


/* footer
---------------------------------------------------------- */
#foot{
margin-top: auto; margin: 0; padding: 3% ;
width:100%; bottom:0;

display:flex;
flex-direction:column;
align-items:center;
}
.copyright-text{ font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem); }

/*
=========================================
  Utilities
=========================================
*/

/* txt
---------------------------------*/
.txt-48{ font-size: clamp(1.625rem, 0.641rem + 4.92vw, 3rem); }
.txt-36{ font-size: clamp(1rem, 0.105rem + 4.47vw, 2.25rem); }
.txt-22{ font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem) }
.txt-20{ font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem)}
.txt-red{ color: #be1029; }
.txt-white{color: #eaeaea; }
.bg-white{ background-color: #eaeaea; }






/* inview
---------------------------------*/
.fadeIn{
   opacity: 0; 
  transition: 0.8s; 
  transition-delay: 0.2s; 
}
.fadeIn.show{
  opacity: 1;
}