html, .section, .table, .card { background-color: transparent;}
body {
	background: url("../img/back.gif") #000000;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

body, .section, .table, .panel-block, .card, .card-header-title, .panel-heading, .content { color: #FFFFCC; }

strong { color: #FFFFCC; }

/* ナビゲーションバー */
.nav { background-color: rgba(0,0,0,.6);}
.nav-item a, a.nav-item { color: #FFFFCC; }

a { color: #FAB702; }
a:hover { color: #FF3300; transition: 0.5s ;}


h2{ color: #FFFFFF; font-size: 22px; line-height: 28px; margin-bottom: 25px;}


.card-content, .panel-body, .tweetBars { background: url("../img/back85.png") #000000; }

.panel-body { padding: 5px 10px 10px 10px; }


/* ツィート群 */
.tweetBars{
	font-size: 0.9em;
	cursor: pointer;
}
.tweetBars .message{
	margin: 10px 5px;
}
.image.is-blogcard {
  width: 200px;
  height: 150px;
}
.image.is-ogp {
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
}

.ogpfig{
	width: 96px;
	height: 60px;
}
.message.is-trans {
  background-color: rgba(0,0,0,.1);
}
.is-trans .message-body{
	border: 1px solid #000000;
	font-size: 0.9em;
	color: #ffffdd;
}
.media + .media{ /* 打ち消し */
	padding: 1rem 2rem;
	margin: 0;
}
.media{
	padding: 1rem 2rem;
}

/* パネルヘッダー部 */
.panel-heading, .card-header {
	background-color: #993300;
	background: url("https://kettya.com/img/backBrown.png");
	margin-bottom: 10px;
	font-size: 1.0em;
	padding: 12px 20px 12px 20px;
	letter-spacing: 5px;
	text-shadow: 1px 1px #000000;
}

/* overflow指定で角丸のはみ出しをカット */
.panel-heading, .card-header, .panel-body, .tweetBars { border-radius: 4px;  overflow:hidden; }


/* テーブル、パネルのポップアップカラー */
.table tr:hover, .content table tr:hover, a.panel-block:hover, .tweetBar:hover {
	background-color: rgba(0,0,0,.2);
	color: #FE4641 ;
	transition: 0.4s ;
}

/* パネルのデザイン　線*/

.panel-heading:first-child, .panel-tabs:first-child, .panel-block:first-child { border: 0px; }
.panel-heading, .panel-tabs, .panel-block { border: 0px; }
.panel-block, .panel-block:first-child { /* 疑似要素でCSS優先点数が1点付くので再指定 */
	border: 0px;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.panel-block:last-child {
	border-bottom: 0px ;
}
.panel-tabs a { color: #FFFFCC; border-bottom: 1px solid rgba(255,255,255,.1); }
.panel-tabs a:hover {
	color: #FE4641;
	border-bottom: 1px solid rgba(255,255,255,.9);
	transition: 0.5s;
}
.panel-tabs a.is-active {
	color: #FAB702;
	border-bottom: 1px solid rgba(255,255,255,.9);
}


/* overflow指定で角丸のはみ出しをカット */
.panel, .card { border-radius: 4px;  overflow:hidden; }

.box {
  background-color: rgba(30, 30, 31, 0.9);
  color: #e0e0e0;
}


/* 日付BOXのスペースを左に確保 */
main.post { padding: 40px 20px; }

/* 日付BOX */
.dateBox {
    width: 60px;
    position: absolute;
    text-align: center;
    color:#111111;
}

    .dateBox .year {
    	font-size: 14px;
	    font-weight:500;
	    color:#FFFFFF;
	    padding-top:3px;
    }

    .dateBox .day {
	    font-weight:600;
	    font-size: 32px;
	    padding-top: 5px;
	    padding-bottom:7px;
   		background-color: #FAB702;
    }

    .dateBox .month {
		font-family:"Open Sans";
		font-weight:700;
		padding: 10px 0 5px 0;
   		background-color: #FAB702;
		}

.titleBox {
	padding-top: 15px;
	padding-left: 85px;
	height: 150px;
}

/* 黒デザインに */
.textarea, .input {
	color: #ffffdd;
	background-color: rgba(0, 0, 0, 0.9);
	border-color: rgba(0, 0, 0, 0.35);
	box-shadow : 0 1px 0 rgba(255, 255, 255, 0.05),0px 2px 1px rgba(0, 0, 0, 0.15) inset;
	transition: background-color 0.3s;
}

/* 最小高が指定されているので */
.textarea { min-height: 0; }

/* 赤紫カラーセット */
.button.is-redpurple {
  background-color: #a54351;
  border-color: transparent;
  color: #ffffff;
}

.button.is-redpurple:hover, .button.is-redpurple.is-hovered {
  background-color: rgb(138,58,70);
  border-color: transparent;
  color: #ffffff;
}

.button.is-redpurple:active, .button.is-redpurple.is-active {
  background-color: rgb(94,44,51);
  border-color: transparent;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
  color: #ffffff;
}

.button.is-primary[disabled] {
  background-color: rgb(192,123,133);
  border-color: transparent;
  box-shadow: none;
}


/* 帯 */
.hero.is-brown {
  background: url("https://kettya.com/img/backBrown.png");
  background-color: #993300;
  color: #ffffff;
}
.hero .title {
  color: #ffffff;
}


/* 帯 */
.box.is-brown {
  background: url("https://kettya.com/img/backBrown.png");
  background-color: #993300;
  color: #ffffee;
}


/* モデル名タイトル */

.modelTitle {
	margin-top: 20px;
}
.modelTitle h1 {
	font-size: 1.5em;
}


/* panelコンポーネントのspanタグ */

.newReport span:nth-child(2), .newReport span:nth-child(3), .newReport span:nth-child(4) {
	display: inline-block;
}

.newReport span:nth-child(2){
	width: 42%;
}
.newReport span:nth-child(3){
	width: 33%;
}
.newReport span:nth-child(4){
	width: 20%;
}

/* ブログカード */
.blogcard {
	border: 1px solid #FFFFFF;
	font-size: 0.8rem;
}
.blogcard h3{
	color: #ffffee;
	font-size: 1.0rem;
}


/* 個別レポート */

.grid_report {
	display: grid;
	grid-template: 1fr / 1fr 10px 2fr;
	grid-template-areas:
		"gr1 gr2 gr3";
}

#report_info_table td:nth-of-type(1) { /* レポートの基礎情報欄 */
	font-size: 0.9rem;
	width: 70px;
}

@media screen and (max-width: 767px) {
	.grid_report {
		grid-template: max-content 10px max-content / 1fr;
		grid-template-areas:
			"gr1"
			"gr2"
			"gr3";
	}
}