@charset "utf-8";


/*--------------------------------------------------------------
全ページ共通
--------------------------------------------------------------*/
html{
  min-height: 100%;
  position: relative;
}

body {
  background-color: #f2f2f2;
  width: 100%;
}

img{
	max-width: 100%;
	vertical-align:top; /*画像の周りにできる隙間を消す*/
}

.container-box{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 100%;
	display:flex; /*親要素のみに記述*/
	flex-flow: row wrap; /* flex-direction と flex-wrap を一括で設定する */
  justify-content: space-between; /* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
  align-items: stretch; /* アイテムの上下の余白を埋めるように配置 */ 
  align-content: flex-start;  /* アイテムの行が上揃えで配置 */ 
}


header{
  width: 20%;
  text-align: left;
  position: sticky;
  padding: 0%;
  box-sizing: border-box;
  position: fixed;
  right: 0%;
}

.contents-box{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 80%;
	box-sizing: border-box;
	position: fixed;
  overflow-y: scroll;
  height: 90%;
  left: 0%;
}

.area-box,.area-box-f-unlock{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 70%;
	display:flex; /*親要素のみに記述*/
	flex-flow: row wrap; /* flex-direction と flex-wrap を一括で設定する */
  justify-content: space-between; /* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
  align-items: stretch; /* アイテムの上下の余白を埋めるように配置 */ 
  align-content: flex-start;  /* アイテムの行が上揃えで配置 */
}

.area-box::after /* 数がピッタリでない時の解決 */{
content: "";
display: block;
width:32%;
}

.area-ttl{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 70%;
	padding-bottom: 0.2em;
	margin-bottom: 1em;
}

.logo{
	margin: 0 auto; /* 水平方向の中央揃え */
  width: 100%;
  margin-top: 3em;
  margin-bottom: 8em;
  padding-left: 5%;
  box-sizing: border-box;
}

.logo-img{
  width: auto;
  height: 3em;
}

/*--------------------------------------------------------------
コンテンツページ共通
--------------------------------------------------------------*/
.ttl-img{
	width: 60%;
}

.downarrow-box{
	width: 12%;
	padding-left: 2%;
	box-sizing: border-box;
}

.smalllink-box{
	width: 85%;
	display:flex; /*親要素のみに記述*/
	justify-content: flex-end; /* 右に揃える */
}

.small-link{
	width: 23%;
}

.sub-navi:hover{
	opacity: 0.1;
}

/*--------------------------------------------------------------
ナビ
--------------------------------------------------------------*/
.menu{
  margin: 0 auto; /* 水平方向の中央揃え */
  width: 100%;
  margin-top: 3em;
  box-sizing: border-box;
}

.nav_link {
  display: block;
  color: #000;
  padding:0.3em 0 0.3em 5%;
  margin: 0.3em 0;
}

/* ホバー時のアクション */
.nav_link:hover {
  color: #fff; /* ホバー時の文字色 */
  background-color: #dcdddd; /* ホバー時の背景色 */
}

@media screen and (max-width: 1400px) {
/* 1400pxまでの幅の場合に適応される */


}

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

.menu ul {
/* ハンバーガナビ背景 */

  padding: 150px 0 0 0;
  width: auto;
}

li{
  border-bottom: 1px solid #000;
  
  margin: 0 3%;
}

/* メニュー本体（左から出す） */
.menu {
  position: fixed;
  top: 0;
  right: -65%; /* ← 初期位置を左へ */
  width: 60%;
  height: 100%;
  background: #fff; /* メニュー背景色 */
  box-shadow: -2px 0 4px rgba(0,0,0,0.4);
  transition: right 0.4s ease;
  z-index: 2;
  text-align: left;
  margin-top: 0%;
  border-top: 0px solid #000;
}

#menu-toggle:checked ~ .menu {
  right: 0; /* ← 開いたときは左0へ */
}

}

/*--------------------------------------------------------------
サブナビ
--------------------------------------------------------------*/

.s-navi-ttl{
	width: 100%;
	padding-left: 5%;
	margin-bottom: 0.3em;
	box-sizing: border-box;
	border-bottom: 1px solid #000;
}

.sns{
	height: 1.5em;
	width: auto;
}

.ols{

	height: 3em;
	width: auto;
}

.s-navi-item{
	box-sizing: border-box;
	margin-bottom: 0.3em;
}

.subnav_link {
  display: block;
  color: #000;
  padding:0.3em 0 0.3em 5%;
  
}

/* ホバー時のアクション */
.subnav_link:hover {
  color: #fff; /* ホバー時の文字色 */
  background-color: #dcdddd; /* ホバー時の背景色 */
}


/*--------------------------------------------------------------
Toppageレイアウト
--------------------------------------------------------------*/
.copy-box,.lead-box{
	width: 100%;
	background-color: #000;
	border: 6px solid #000;
	box-sizing: border-box;
	text-align: center;
	margin: 0 auto; /* 水平方向の中央揃え */
	padding: 1%;
}

.lead-box{
	background-color: #fff;	
	border-top: none;
}


.arrow-box{
	width: 13%;
	margin: 0 auto; /* 水平方向の中央揃え */
	margin-bottom: 1em;
}

.item-3column{
	background-color: #fff;
	width: 27%;
	margin: 0 auto; /* 水平方向の中央揃え */
	text-align: center;
	box-sizing: border-box;
}

.item:hover{
filter: brightness(0.8); 
}

.side-l{
	width: 60%;
}

.side-r{
	width: 40%;
}

.myreco-box{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.myreco-btn{
	border: 3px solid #000;
	margin-right: 0.7em;
	border-radius: 8px;
	box-sizing: border-box;
}

.myreco-btn img{
	max-height:1.5em;

}



/*--------------------------------------------------------------
デザインワークスレイアウト
--------------------------------------------------------------*/
.backnext-box{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 70%;
	display:flex; /*親要素のみに記述*/
	flex-flow: row wrap; /* flex-direction と flex-wrap を一括で設定する */
	justify-content: space-between; /* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
	 -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.archive-box{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 100%;
	display:flex; /*親要素のみに記述*/
	flex-flow: row wrap; /* flex-direction と flex-wrap を一括で設定する */
	justify-content:  flex-end; /* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
}


.tp-gallery-box{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 100%;
	
	column-count: 3; /* 列数 */
	display: block;
}

.tp-gallery-box > div {
break-inside: avoid; /* こいつが肝 */
margin-bottom: 5%;
break-inside: auto; /* ここをオートに */
height: auto !important;
}

.gallery-box{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 100%;
	max-height: 100em;
	column-count: 4; /* 列数 */
	display: block;
	height: auto !important;
}

.gallery-box > div {
height: auto !important; /* 検証として高さは可変（auto）に設定しているだけです。実際は不要です。 */
break-inside: avoid; /* こいつが肝 */
margin-bottom: 5%;
break-inside: auto; /* ここをオートに */
height: auto !important;
}

.backnext{
	width: 23%;
}



/*--------------------------------------------------------------
ミュージックコンテンツレイアウト
--------------------------------------------------------------*/
.mc-box{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 70%;
	display:flex; /*親要素のみに記述*/
  flex-flow: row wrap; /* flex-direction と flex-wrap を一括で設定する */
  justify-content: space-between; /* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
  align-items: stretch; /* アイテムの上下の余白を埋めるように配置 */ 
  align-content: flex-start;  /* アイテムの行が上揃えで配置 */
}

.music-logo{
	background-color: #fff;
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 18%;
	border: 2px solid #000;
	border-radius: 10px;
}

.musicnavi{
	width: 40%;
}

/*--------------------------------------------------------------
フォトギャラリーレイアウト
--------------------------------------------------------------*/
.gallery-3column{
	width: 32%;
	box-sizing: border-box;
	margin-bottom: 1.5%;
}

/*--------------------------------------------------------------
4Tレイアウト
--------------------------------------------------------------*/
.ft-box{
	width: 100%;
	padding: 1%;
	box-sizing: border-box;
}

.ft-iconbox{
	width: 100%;
	display:flex; /*親要素のみに記述*/
  flex-flow: row wrap; /* flex-direction と flex-wrap を一括で設定する */
  align-items: stretch; /* アイテムの上下の余白を埋めるように配置 */ 
  align-content: flex-start;  /* アイテムの行が上揃えで配置 */
}

.icon-space{
	width: 48%;
	margin: 0 1% 1% 0;
	box-sizing: border-box;
}

.small-link-img{
	width: 100%;
}

/*--------------------------------------------------------------
プライスレイアウト
--------------------------------------------------------------*/
.price-box-l{
	width: 65%;
	text-align: left;
}

.price-box-r{
	width: 35%;
	text-align: right;
}

.price-box-c{
	width: 100%;
	text-align: left;
}

/*--------------------------------------------------------------
問い合わせレイアウト
--------------------------------------------------------------*/
.contact-box-l{
	width: 35%;
	padding-bottom: 1%;
	text-align: left;
}

.contact-box-r{
	width: 65%;
	padding-bottom: 1%;
	text-align: left;
}

.input{
	width: 99%;
	height: 2em;
	font-size: 1.2em;
	border:none;
}

.textarea{
	width: 99%;
	height: 7em;
	font-size: 1.2em;
	resize: vertical;  /* 横幅を広げるのを禁止 */
	border:none;
}

.req {
  color: red;
  margin-left: 1%;
}

.btn{
	display: inline-block;
	vertical-align: middle;
	padding: 0.5rem 5rem;
	margin: 0 1em;
	color: #fff;
	font-size: 1.2em;
	letter-spacing: 0.5pt;
	text-decoration: none;
	background-color: #000;
	border: 1px solid #000;
	cursor: pointer;
	transition-duration:0.3s;
    -webkit-transition-duration:0.3s;
    -moz-transition-duration:0.3s;
    -o-transition-duration:0.3s;
    -ms-transition-duration:0.3s;
}

.btn:hover {
  color: #fff;
  opacity: 0.5;
}

.complete-box{
	width: 50%;
	margin: 0 auto; /* 水平方向の中央揃え */
	text-align: center;
}

.con-box-l{
	width: 30%;
}

.con-box-r{
	width: 70%;
}

.btn-box{
	width: 100%;
	text-align: center;
}

/*--------------------------------------------------------------
アバウトレイアウト
--------------------------------------------------------------*/
.about-box-l{
	width: 30%;
	padding-bottom: 1%;
	text-align: left;
	margin: 0 auto; /* 水平方向の中央揃え */
}

.about-box-r{
	width: 70%;
	padding-bottom: 1%;
	text-align: left;
	margin: 0 auto; /* 水平方向の中央揃え */
}


/*--------------------------------------------------------------
フッターレイアウト
--------------------------------------------------------------*/
footer{
	margin: 0 auto; /* 水平方向の中央揃え */
	padding: 1% 0;
	text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2%;
}

/*--------------------------------------------------------------
装飾（マージン・ボーダー等）
--------------------------------------------------------------*/
.margin-bottom-1{
	margin-bottom: 7em;
}

.margin-bottom-2{
	margin-bottom: 2em;
}

.margin-bottom-3{
	margin-bottom: 1em;
}

.margin-bottom-4{
	margin-bottom: 0.5em;
}

.margin-top-1{
	margin-top: 5%;
}

.border-top-1{
	border-top: 1px solid #000;
}

.border-1{
	border: 6px solid #000;
	box-sizing: border-box;
}

.border-bottom-1{
	border-bottom: 6px solid #00636b;
}

.border-bottom-2{
	border-bottom: 1px solid #000;
}

.border-bottom-3{
	border-bottom: 4px solid #00636b;
}

.border-left-1{
	border-left: 1px solid #000;
}

.margin-left-1{
	margin-left: 2%;
}

.kadomaru{
	border-radius: 10px;
}

.kadomaru-2{
	border-radius: 4px;
}

@media screen and (min-width: 1400px){
br.lb {display: none; }
}

/*--------------------------------------------------------------
テキスト
--------------------------------------------------------------*/
h1{
	font-size: 2.4em;
	line-height:1.2em;
}

h2{
	font-size: 1.8em;
	line-height: 1.2em;
}

h3{
	font-size: 1.8em;
}

h4,h5{
	font-size: 1.2em;
}

p,ul,ol,li{
	font-size: 1em;
	font-weight: bold;
	font-feature-settings: "palt" ;
	line-height:1.4em;
}

.lead{
	font-size: 1.2em;
}

.text-copy{
	font-size: 2.4em;
	color: white;
}

.copyright{
	font-size: 1em;
	font-weight: 200;
}

.text-cate{
	font-weight: 200;
	font-size: 1em;
}

.text-cate-b{
	font-weight: bold;
	font-size: 1em;
}

.myreco-ttl{
	font-size: 1.5em;
	line-height: 1.5em;
}

.text-ols{
	font-size: 1em;
	font-weight: bold;
	font-feature-settings: "palt" ;
	line-height:1.4em;
}

.text-sns{
	font-size: 1em;
	font-weight: bold;
	font-feature-settings: "palt" ;
	line-height:1.4em;
}

.text-1{
	font-weight: 200;
	line-height: 1.8em;
	font-feature-settings: "palt" ;
	text-align: justify;
}

.text-2{
	font-size: 1.5em;
	color: white;
}

.text-note{
	font-weight: 200;
	font-size: 0.8em;
}

.price-box-c p {
  margin: 0;
  padding-left: 1em;
  text-indent: -1em;
}

.text-about{
	line-height: 2em;
}



@media screen and (max-width: 960px) {
/* 560pxまでの幅の場合に適応される */
/*--------------------------------------------------------------
全ページ共通レイアウト
--------------------------------------------------------------*/
.container-box{
	width: 95%;
	margin-bottom: 3em;
}

.contents-box{
	width: 100%;
	margin-bottom: 5em;
	position:static;

}

header{
  width: 100%;
  position:static;

}

.area-box,.area-box-f-unlock{
	width: 95%;
}

.area-box-f-unlock{
	display: block; /* 「display: flex」の解除*/

}

.area-ttl{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 95%;
	padding-bottom: 0.2em;
	margin-bottom: 1em;
}

.logo{
	margin-top: 2.5em;
	margin-bottom: 5em;
	width: 95%;
	padding-left: 0%;
}

.logo-img{
  height: 2.5em;
}

/*--------------------------------------------------------------
コンテンツページ共通
--------------------------------------------------------------*/
.ttl-img{
	width: 100%;
}

.downarrow-box{
	width: 17%;
}

.smalllink-box{
	width: 83%;
}

.small-link{
	width: 40%;
}



/*--------------------------------------------------------------
サブナビ
--------------------------------------------------------------*/
.subnavi-box{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 75%;
	display:flex; /*親要素のみに記述*/
	flex-flow: row wrap; /* flex-direction と flex-wrap を一括で設定する */
  justify-content: space-between; /* 両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置 */
  align-items: stretch; /* アイテムの上下の余白を埋めるように配置 */ 
  align-content: flex-start;  /* アイテムの行が上揃えで配置 */
}

.s-navi-ttl{
	padding-left: 0.3em;
}

.s-navi-item{
	margin-bottom: 2em;
	padding: 0.3em 0;
}


.sns{
	height: 2.5em;
	width: auto;
}


.subnav_link {
  padding:0 0.3em;
  margin: 0em;
}


/*--------------------------------------------------------------
Toppageレイアウト
--------------------------------------------------------------*/
.line-box{
	display: none;
}

.item-3column{
	width: 50%;
	margin: 0 auto; /* 水平方向の中央揃え */
	margin-top: 8%;
}

.myreco-btn{
	margin-right: 0em;
	margin-bottom: 0.5em;
}

.myreco-box{
	width: 95%;
}

/*--------------------------------------------------------------
デザインワークスレイアウト
--------------------------------------------------------------*/
.tp-gallery-box{
	column-count: 2; /* 列数 */
	max-height: 100em;
}

.gallery-box{
	column-count: 3; /* 列数 */
	max-height: 100em;
}

.backnext-box{
	width: 95%;
}

.backnext{
	width: 35%;
}

/*--------------------------------------------------------------
ミュージックコンテンツレイアウト
--------------------------------------------------------------*/
.music-logo{
	width: 25%;
}

.musicnavi{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 60%;
	margin-top: 5%;
}

/*--------------------------------------------------------------
フォトギャラリーレイアウト
--------------------------------------------------------------*/
.gallery-3column{
	width: 49%;
	margin-bottom: 1.5em;
}



/*--------------------------------------------------------------
問い合わせレイアウト
--------------------------------------------------------------*/
.contact-box-l,.contact-box-r{
	margin: 0 auto; /* 水平方向の中央揃え */
	width: 80%;
	text-align: center;
}

.input,.textarea{
	text-align: center;
}

.con-box-l{
	width: 100%;
	text-align: right;
	padding-bottom: 0.3em;
}

.con-box-r{
	width: 100%;
	text-align: center;
	padding-bottom: 0.3em;
}

.btn{
	width: 75%;
	margin-bottom: 2em;

}

.complete-box{
	width: 60%;
}

/*--------------------------------------------------------------
アバウトレイアウト
--------------------------------------------------------------*/

/*--------------------------------------------------------------
フッターレイアウト
--------------------------------------------------------------*/
footer{
  position: static;
  bottom: auto;
  left: auto;
  width: 95%;
}
/*--------------------------------------------------------------
装飾（マージン・ボーダー等）
--------------------------------------------------------------*/

.margin-bottom-2{
	margin-bottom: 2em;
}

.margin-left-1{
	margin-left: 4%;
}

.border-1{
	border: 4px solid #000;
}

.border-bottom-1{
	border-bottom: 6px solid #000;
}

.border-left-1{
	border-left: none;
}

.sp {
　　display: block;
　}

/*--------------------------------------------------------------
テキスト
--------------------------------------------------------------*/
h1{
	font-size: 1.8em;
}

h2{
	font-size: 1.5em;
}

h3{
	font-size: 1.5em;
}

h4,h5{
	font-size: 1em;
}

p,ul,ol,li{
	font-size: 1em;
	font-weight: bold;
	font-feature-settings: "palt" ;
}

.text-copy{
	font-size: 2em;
}

.text-note{
	font-weight: 200;
	font-size: 0.8em;
	line-height: 1.2em;
}

.text-cate{
	font-size: 0.8em;
	line-height: 0.8em;
}

.text-cate-b{
	font-size: 0.8em;
	line-height: 0.8em;
}

.myreco-ttl{
	font-size: 1.3em;
	line-height: 1.3em;
}

.text-sns{
	font-size: 1.2em;
}

.text-ols{
	font-size: 1.4em;
}

.text-1{
	font-size: 1.2em;
	text-align: center;
}

}