@@charset "UTF-8";
/*全体のスタイル調整*/
*{

}

/*bodyの初期スタイル調整*/
body{
  font-family: 'EB Garamond','Sawarabi Mincho', serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  line-break: strict;
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: #333333;
}

/*aスタイル調整*/
a{
  color:#555555;
}

a:hover{
  border-bottom: 1px solid #c0c0c0;
}

/*画像キャプションのスタイル調整*/
figure{
  text-align: right;
  font-size: 0.9rem;
}

/*ヘッダー部分のスタイル調整*/
h1{
  text-align: center;
  padding-top:300px;
  padding-bottom: 500px;
}

h1 img{

}

/*PC用Aboutのスタイル調整*/
@media (orientation: landscape) and (max-width: 767px){

  h1{
    padding-top:200px;
  }
}
@media screen and (min-width: 768px) {
  h1{
    padding-top:380px;
  }
}

/*ナビゲーションメニュー
.mainmenu{
  margin: 0 auto 36px;
}

.mainmenu ul{
  margin-bottom: 24px;
}

.mainmenu ul li{
  padding: 8px 0;
}
*/

/*見出し関連のスタイル調整*/
h2{
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 16px;
  text-align: center;
}

h3{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: 0.07em;
  margin-bottom: 5px;
}

h4{
  text-align: right;
  margin-top: 24px;
  padding-bottom: 36px;
}



/*big_bgのスタイル調整*/
#big_bg{
  background: url("../img/bg_main.jpg") no-repeat center center / cover;
  height:auto;
  margin-bottom: 180px;
}

/*Aboutのスタイル調整*/
.feature_01{
  font-family: 'Sawarabi Gothic', sans-serif;
  text-align: justify;
  letter-spacing: 0.07em;
  line-height: 1.7;
  width: 300px;
  margin: 0 auto 120px;
}

.feature_02{
  width: 300px;
  margin: 0 auto 24px;
  padding-bottom: 36px;
}

.feature_02 p{
  line-height: 2em;
  font-size: 0.85rem;
  text-align: justify;
}

.feature_02 #poem p{
  text-align: right;
}

#feature_jump{
  padding-top:50px;
}

#poem_en{
  margin-top: 200px;
}

#poem_en p{
  font-size: 1rem;
  text-align:left;
}

/*続きを読むCSS*/
.cp_box03 *, .cp_box03 *:before, .cp_box03 *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box03 {
	width: auto;
	margin: 1.8em auto;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: left;
}
.cp_box03 label {
	font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 16px;
	padding: 0.3em;
	cursor: pointer;
	transition: all 0.3s;
	text-align: left;
	color: #ffffff;
  background-color: #c0c0c0;
	border: 1px solid #c0c0c0;
}
.cp_box03 label:hover {
	transition: all 0.3s;
	color: #ffffff;
	background: #808080;
}
.cp_box03 label::after {
	color: #808080;
}
.cp_box03 label:hover::after {
	color: #ffffff;
}
.cp_box03 input:checked ~ label::after {
	color: #c0c0c0;
}
.cp_box03 input:checked ~ label:hover::after {
	color: #ffffff;
}
.cp_box03 input {
	display: none;
}
.cp_box03 .cp_container03 {
	position: relative;
	z-index: 10;
	overflow: hidden;
	height: 0;
	margin-top: -1px;
	transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
	background: rgba(255, 255, 255, 0.5);
}
.cp_box03 input:checked ~ div {
	transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
}
/* 続きを読むを押すと表示されるテキストの高さ */
.cp_box03 input:checked ~ div.cp_container03 {
	height: 1500px;
}
/*PC用続きを読む押すと表示されるテキスト高さのスタイル調整*/
@media screen and (min-width: 768px) {
  .cp_box03 input:checked ~ div.cp_container03 {
  	height: 700px;
  }
}

/*PC用Aboutのスタイル調整*/
@media screen and (min-width: 768px) {
  .feature_01,
  .feature_02{
    width:740px;
  }

  #poem_en{
    margin-top: 280px;
  }
}

/*Blue帯のスタイル調整
#blue{
  width: 100%;
  margin-bottom: 52px;
}
*/

/*big_bgのスタイル調整*/
#blue_bg{
  background: url("../img/blue_ok.jpg") no-repeat center center / cover;
  height:150px;
  margin-top: 180px;
  margin-bottom: 170px;
}

/*bg02のスタイル調整*/
#bg02{
  background: url("../img/bg_02.jpg") no-repeat center center / cover;
  height:150px;
  margin-bottom: 140px;
}

/*Archiveのスタイル調整*/
.archive{
  margin-bottom: 8px;
  padding-bottom: 10px;
  font-family: 'Sawarabi Gothic', sans-serif;
  color: #222222;
}

.archive h3{
  border-bottom: 1px solid #222222;

}

.archive a{
  color:#222222;
}

.archive a:hover{
  color: #222222;
  border-bottom: 1px solid #222222;
}

.archive_01{
  width: 300px;
  margin: 0 auto 0px auto;
  font-size: 0.85rem;
}

.archive_01 ul{
  margin-bottom: 24px;
}

.archive_01 ul li{
  padding: 8px 0;
}

.ac_info{
  font-size: 0.9rem;
}

.ac_words{
  font-size: 0.96rem;
}

#ac_en{
  margin-top: 48px;
  margin-bottom: 60px;
}

.archive_movie{
  width: 300px;
  margin: 0 auto 0 auto;
  font-size: 0.9rem;
}
.archive_movie dl dt{
  font-size: 1.1rem;
  font-weight: normal;
  margin-top: 12px;
  margin-bottom: 6px;
}

.archive_movie dl dd{
  font-size: 1rem;
  font-weight: bold;
  padding-bottom: 12px;
}

.archive_movie .stwords{
  font-size: 1rem;
}

.archive_movie .smwords{
  font-size: 0.8rem;
  margin-top: -6px;
}

#movielist_en{
  margin-bottom: 36px;
}

#movielist_en dl dt{
  font-weight: bold;
}

#movielist_en dl dd{
  font-weight: normal;
}

.movie_en{
  margin-top: 18px;
}

/*20200914追加*/
.movies{

  margin-bottom: 24px;
  font-family: 'Sawarabi Gothic', sans-serif;
  color: #222222;
}

.movies h3{
  font-size: 0.95rem;
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  margin-bottom: 24px;
}

.movies .yt_b{
  background-color: #333333;
}

.movies p{
  padding-bottom: 14px;
}
.movies .qsbox{
  text-align: center;
  margin-top: 100px;
}

.movies .qs{
  display: inline;
  background-color: #666666;
  color: #ffffff;
  padding-bottom:0px;
}


.movies a{
  color:#ffffff;
}

.movies a:hover{
  color: #666666;
  background-color: #ffffff;
}

.youtubelist{
  width: 300px;
  margin: 0 auto 48px auto;
  font-size: 0.85rem;
}

.vimeolist{
  width: 300px;
  margin: 0 auto 0 auto;
  font-size: 0.85rem;
}

.vimeolist .ac_words02{
  font-size: 1rem;
}

.vimeolist .ac_words03{
  font-size: 0.9rem;
}

.vimeolist .vm_ll{
  text-align: left;
  padding-bottom: 24px;
}

.vimeolist .vm_l{
  padding-bottom: 0px;
}

.vimeolist .vimeomovies{
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
  margin-bottom: 12px;
}

.vimeolist .vimeomovies iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtubelist .youtubecm{
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
  margin-bottom: 12px;
}

.youtubelist .youtubecm iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtubelist .cm_p{
  font-family: 'Sawarabi Gothic', sans-serif;
  font-size: 0.85rem;
}

.youtubelist .ytcm_words{
  margin-top: 24px;

}

.youtubelist ul{
  margin-top: 24px;
}

.vimeolist ul{
  margin-top: 24px;
  margin-bottom: 24px;
}

.youtubelist ul li{
  padding: 1px 0;
}

.youtubelist .ytcm_words02{
  font-size: 1rem;
}

.vimeolist ul li{
  padding: 8px 0;
  text-align: center;
  color:#666666;
}

.vimeolist ul li img{
  width: 100%;
}

/*PC用Archiveのスタイル調整*/
@media screen and (min-width: 768px) {
  .archive{
    width:740px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: space-around;
  }

  .youtubelist{
    width:740px;
    justify-content: space-around;
  }

  .vimeolist{
    width:832px;
    justify-content: space-around;
  }

  .movie_en{
    margin-top: 115px;
  }

}

/*Artistのスタイル調整*/
.artist{
  width: 300px;
  margin: 8px auto 70px auto;
  font-size: 0.85rem;
  font-family: 'Sawarabi Gothic', sans-serif;
}

.artist h3{
  margin-bottom: -36px;
}

.artist dl dt{
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.7;
  margin-top: 52px;
  margin-bottom: 16px;
  border-bottom: 1px solid #333333;
}

.artist dl dd{
  margin-bottom: 18px;

  text-align: justify;
  letter-spacing: 0.05em;
}

/*.offweb{

}*/

#atw{
  letter-spacing: 0.05em;
}

/*続きを読むCSS*/
.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	width: auto;
	margin: 1.8em auto;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.cp_box label {
	font-weight: bold;
  font-family: 'Noto Sans JP', sans-serif;
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 16px;
	padding: 0.3em;
	cursor: pointer;
	transition: all 0.3s;
	text-align: left;
	color: #ffffff;
  background-color: #c0c0c0;
	border: 1px solid #c0c0c0;
}
.cp_box label:hover {
	transition: all 0.3s;
	color: #ffffff;
	background: #808080;
}
.cp_box label::after {
	color: #808080;
}
.cp_box label:hover::after {
	color: #ffffff;
}
.cp_box input:checked ~ label::after {
	color: #c0c0c0;
}
.cp_box input:checked ~ label:hover::after {
	color: #ffffff;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	position: relative;
	z-index: 10;
	overflow: hidden;
	height: 0;
	margin-top: -1px;
	transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
	background: rgba(255, 255, 255, 0.5);
}
.cp_box input:checked ~ div {
	transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
}
/* 続きを読むを押すと表示されるテキストの高さ */
.cp_box input:checked ~ div.cp_container {
	height: 500px;
}
/*PC用続きを読む押すと表示されるテキスト高さのスタイル調整*/
@media screen and (min-width: 768px) {
  .cp_box input:checked ~ div.cp_container {
  	height: 300px;
  }
}

/*PC用Artistのスタイル調整*/
@media screen and (min-width: 768px) {
  .artist{
    width:740px;
  }
}

/*Playlistのスタイル調整*/
.playlist{
  width: 300px;
  margin: 0px auto 160px auto;
  font-size: 0.85rem;
  font-family: 'Sawarabi Gothic', sans-serif;
}

.playlist h3{
  margin-bottom: 16px;
  border-bottom: 1px solid #333333;
}

.playlist dl dt{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: 0.07em;
  margin-top: 52px;
  margin-bottom: 16px;
  border-bottom: 1px solid #333333;
}

.playlist dl dd{
  margin-bottom: 18px;
  text-align: left;

}

.jp{
  margin-bottom: 36px;
}

/*PC用Artistのスタイル調整*/
@media screen and (min-width: 768px) {
  .playlist{
    width:740px;
  }
}

/*Footerのスタイル調整*/
.footer-info{
  width: 300px;
  margin: 0px auto 24px auto;
  font-size: 0.85rem;
  font-family: 'Sawarabi Gothic', sans-serif;
}

.footer-info h3{
  border-bottom: 1px solid #333333;
  margin-bottom: 18px;

}

.footer-info ul{

}

.footer-info ul li{
  margin-bottom: 10px;
}

.footer-info p{
  margin-top: 24px;
  margin-bottom: 18px;
  text-align: center;
}

.staff_ja{
  margin-bottom: 18px;
}

.staff_en{
  margin-bottom: 48px;
}

/*PC用Footerのスタイル調整*/
@media screen and (min-width: 768px) {
  .footer-info{
    width:740px;
  }

}