@charset "utf-8";

/* 命名はチェイン IDとファイル名はスネーク */

/* めも
------------------------------ */
.blog-wrap {
margin: 0 10px 30px 10px;
padding: 20px;
border: solid 1px #454e56;
border-radius: 4px;
}

.blog-title {
font-family: 'Raleway', sans-serif;
color: #333b42;
font-size: 20px;
font-weight: 600;
line-height: 26px;
padding-left: 28px;
border-bottom: solid 2px #333b42;
background: url(../img/icon_bl.png) no-repeat left bottom;
background-size: 24px 24px;
}

.blog-body {
font-size: 14px;
color: #333b42;
line-height: 180%;
padding: 20px 10px 0 10px;
}
.blog-body h3 {margin: 20px 0 0 0;}


/* ギャラリー表示
------------------------------ */
.gallery-memo {margin: 5px 0 5px 0; font-size: 0;}
.gallery-memo img {
margin: 4px 4px 0 0;
border: solid 1px #CED2D6;
border-radius: 5px;
}

.gallery-rayz {margin-top: 4px; font-size: 0;}
.gallery-rayz img {
margin: 8px 0 0 8px;
border: solid 1px #CED2D6;
border-radius: 5px;
}


/* レイ部屋
------------------------------ */
.data-s {font-size: 14px; font-weight: normal;}

.data-box .data-l {
font-size: 17px;
font-weight: 600;
padding-bottom: 10px;
}

.data-box2 .data-l {
font-size: 16px;
font-weight: 600;
padding-bottom: 10px;
}

.data-box2 .read {line-height: 200%;}

.com-box {
font-size: 14px;
color: #777e84;
line-height: 160%;
background: #F9FAFC;
padding: 16px 15px 15px 20px;
margin-top: 30px;
border: solid 1px #CED2D6;
border-radius: 15px 0 15px 0;
}

.com-box a {color: #777e84; text-decoration: underline;}
.com-box a:hover {color: #C2C7CC; text-decoration: underline;}


/* 設定テーブル
------------------------------ */
.data-ta td {vertical-align: top;}

table.history {
border-top: solid 1px #CED2D6;
border-left: solid 1px #CED2D6;
border-collapse: collapse;
border-spacing: 0;
}

.history td {
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 8px 10px;
vertical-align: top;
}

.history th { /*エスコン時系列用*/
color: #777e84;
font-weight: normal;
text-align:center;
background-color: #F4F6F9;
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 4px 8px;
}

.history .year {
text-align: center;
white-space: nowrap;
}

table.mission {
border: solid 1px #CED2D6;
border-collapse: collapse;
border-spacing: 0;
}

.mission td {
border-bottom: solid 1px #CED2D6;
padding: 8px 10px;
vertical-align: top;
}

.mission2 td {
padding: 5px 0;
vertical-align: top;
}

.spec {
font-size: 15px;
line-height: 160%;
}

table.spec {margin-top: 20px;}
.spec td {vertical-align: top;}

.cls-bx {
font-size: 15px;
color: #566069;
padding: 10px 15px;
margin: 30px 0;
border: solid 1px #CED2D6;
}


/* システム備忘録
------------------------------ */
table.lock { /*倍率*/
border-top: solid 1px #CED2D6;
border-left: solid 1px #CED2D6;
border-collapse: collapse;
border-spacing: 0;
line-height: 100%;
table-layout: fixed;
width: 100%;
}

.lock td {
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
text-align: center;
padding: 6px 4px;
vertical-align: top;
}

.lock th {
color: #777e84;
font-weight: normal;
background-color: #F4F6F9;
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 6px 4px;
}

table.lock-s { /*倍率表(小)*/
border-top: solid 1px #CED2D6;
border-left: solid 1px #CED2D6;
border-collapse: collapse;
border-spacing: 0;
font-size: 12px;
line-height: 100%;
margin-top: 15px;
word-break: break-all;
}

.lock-s td {
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 6px 6px;
vertical-align: top;
}

.lock-s th {
color: #777e84;
font-weight: normal;
background-color: #F4F6F9;
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 6px 6px;
}

table.bonus { /*侵食率ボーナス*/
border-top: solid 1px #CED2D6;
border-left: solid 1px #CED2D6;
border-collapse: collapse;
border-spacing: 0;
margin-top: 15px;
}

.bonus td {
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 3px 12px;
font-size: 12px;
line-height: 160%;
text-align: right;
}

.bonus th {
color: #777e84;
background-color: #F4F6F9;
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 3px 8px 3px 16px;
text-align: left;
}

table.map { /*MAP構成*/
border-top: solid 1px #CED2D6;
border-left: solid 1px #CED2D6;
border-collapse: collapse;
border-spacing: 0;
font-size: 12px;
line-height: 100%;
margin: 15px 15px 0 0;
}

.map td {
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 6px 10px;
vertical-align: top;
}

.map th {
color: #777e84;
font-weight: normal;
background-color: #F4F6F9;
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 6px 8px;
}


/* データベース
------------------------------ */
table.item { /*商品リスト*/
border-top: solid 1px #CED2D6;
border-left: solid 1px #CED2D6;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

.item td {
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 8px 12px;
}

.item th {
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
}

.item .name {
color: #333b42;
font-size: 15px;
font-weight: 600;
line-height: 140%;
text-align: left;
padding: 8px 10px;
border-left: solid 4px #7EE1E9;
width: 80%;
}

.item .type {
color: #777e84;
font-size: 12px;
line-height: 120%;
text-align: center;
background-color: #F4F6F9;
width: 20%;
}

.item .image {
font-size: 10px;
line-height: 140%;
color: #777e84;
text-align: center;
margin-top: 10px;
}


table.music { /*楽曲リスト*/
border-top: solid 1px #CED2D6;
border-collapse: collapse;
border-spacing: 0;
font-size: 12px;
width: 100%;
}

.music td {
border-bottom: solid 1px #CED2D6;
padding: 8px 4px 8px 12px;
vertical-align: top;
}

.music th {
color: #777e84;
font-weight: normal;
text-align: left;
background-color: #F4F6F9;
border-bottom: solid 1px #CED2D6;
padding: 2px 4px 2px 12px;
}

.music .title {font-size: 14px;}

.music1 {width: 74%;}
.music2 {width: 26%;}

.cd-wrap {display: flex; flex-wrap: wrap;}
.cd-bx {width:100px;}

div.cd-wrap ol {margin-left: 30px;}
div.cd-wrap li {list-style-type: decimal;}

dt {font-weight:600;} /*スタッフリスト*/
dd {margin-left:20px;}

table.score { /*スコア集計*/
border-top: solid 1px #CED2D6;
border-left: solid 1px #CED2D6;
border-collapse: collapse;
border-spacing: 0;
font-size: 12px;
width: 100%;
}

.score td {
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 8px 6px;
vertical-align: top;
}

.score th {
color: #777e84;
font-weight: normal;
text-align:center;
background-color: #F4F6F9;
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 2px 6px;
}

.score .pt {
font-size: 14px;
font-weight: 600;
white-space: nowrap;
padding: 8px 8px;
}


/* ピアノ
------------------------------ */
.piano-wrap {
padding: 20px 20px 30px 20px;
border-bottom: solid 1px #777e84;
}

.piano-bx {
display: flex;
flex-wrap: wrap;
align-self: baseline;
padding-bottom: 10px;
margin-top: 30px;
}
.piano-bx h3 {margin: 0;}


/* エスコン部屋
------------------------------ */
.chara-wrap {
display: flex;
flex-wrap: wrap;
padding: 10px 0 20px 0;
border-bottom: solid 1px #777e84;
}

.chara-wrap2 { /*メイン５人*/
display: flex;
flex-wrap: wrap;
padding: 0;
border-bottom: solid 1px #CED2D6;
}
.chara-wrap2 .big {font-size: 18px;}

.chara-bx {
padding: 15px 0 0 15px;
line-height: 160%;
}

.wanco-bx {
text-align: center;
width: 100%;
padding-top: 20px;
}

.wanco-cap {
font-size:12px;
color:#777e84;
line-height:160%;
padding-top:15px;
}

.emb-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
padding: 10px 0 20px 0;
border-bottom: solid 1px #777e84;
}
.emb-bx {
padding: 10px 8px;
text-align: center;
}

.book-wrap {
text-align: center;
padding-bottom: 10px;
border-bottom: solid 1px #777e84;
}
.book-wrap table {margin: 0 auto;}
.book-wrap td {padding: 10px 2px;}
.book-wrap img {border: solid 1px #CED2D6;}
.book-wrap .cap {padding-top:4px;}


/* メモ・200質・時系列
------------------------------ */
table.list {
font-size: 12px;
color: #777e84;
border-top: solid 1px #CED2D6;
border-left: solid 1px #CED2D6;
border-collapse: collapse;
border-spacing: 0;
}

.list td {
border-right: solid 1px #CED2D6;
border-bottom: solid 1px #CED2D6;
padding: 4px 8px;
}

.q200 {background-color: #F4F6F9;}
.a200 {width: 20%;}

.time1 {width: 10%;}
.time2 {width: 60%;}
.time3 {width: 30%;}

.color-mb {color: #2266CC;}
.color-gp {color: #33AACC;}
.color-bz {color: #559966;}
.color-tm {color: #7744AA;}
.color-cp {color: #993333;}
.color-tr {color: #eeaa11;}


/* ピックアップ
------------------------------ */
.pickup {
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s ease 0s;
}

.pickup:hover {
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
transform: translateY(-4px);
}

.pickup-bx {
float: left;
padding: 10px 10px 0 0;
}

.pickup-cap {
font-size:12px;
color:#777e84;
text-align: center;
padding-top:2px;
}