@CHARSET "UTF-8";

.foogallery {
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	-webkit-justify-content: center;
}
h3 {
	color: #fff;
}
.taylor_made {
	background: #808080;
	color: #fff;
}
.main_message {
	background: #000;
	color: #fff;
	width: 100%;
	margin: 0!important;
}
p {
	font-size: .8rem;
	line-height: 1.5rem;
}
.under_bar {
	display: none;
}
.chart-box-font {
	font-size: 12px;
}
/* 吹き出し */
.balloon1, .chart-box {
  position: relative;
  display: inline-block;
  margin: 2em 0;
  padding: 15px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 16px;
  background: #5c5c5c;
}
.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #5c5c5c;
}
.balloon1 span {
  margin: 0;
  padding: 0;
}

/* 吹き出し2 */

.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 14px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 2px #555;
  box-sizing: border-box;
}

.balloon2:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 14px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}
.balloon2:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 16px solid transparent;
  border-top: 14px solid #555;
  z-index: 1;
}
.balloon2 p {
  margin: 0;
  padding: 0;
}
.bitei {
	background: #000;
}
.bitei div:nth-child(2) {
	color: #999;
}
.bitei > p {
	color: #fff;
}
.bitei_title {
	font-size: 1.2rem;
	letter-spacing: .2rem;
}
.bg_gray {
  background: #999;
}
.creator_message {
	font-size: 1.3rem;
  letter-spacing: .25rem;
  line-height: 2rem;
}
.gugemka {
	background: #000;
	color: #fff;
	width: 100%!important;
}
.gugemka_box .img-box,
.gugemka_box.jisseki .img-box,
.gugemka_box.hosyou .img-box {
	background-size: cover;
	height: 180px;
}
.gugemka_box .img-box {
	background-image: url(images/gugengka_img.jpg);
}
.gugemka_box.jisseki .img-box {
	background-image: url(images/jisseki_img.jpg);
}
.gugemka_box.hosyou .img-box {
	background-image: url(images/hosyou_img.jpg);
}

.gugemka_box .position-absolute {
    top: 122px;
    width: 57%;
}
.gugemka_box .jisseki_font {
    top: 122px;
    width: 46%;
}
.gugemka_box .hosyou_font {
    top: 122px;
    width: 46%;
}

.gugemka p:first-child {
	font-size: 1.2rem;
	letter-spacing: .2rem;
}
.chart ul {
	width: 100%;
}
.gugemka_box.jisseki div {
	flex-wrap: wrap-reverse;
	-webkit-flex-wrap: wrap-reverse;
}


/* 方眼紙 */
.chart {
	margin: auto;
	background-color: #ffffff;
	background-image: repeating-linear-gradient(to bottom, /* 横線 */ transparent 12px, rgba(153, 153, 153, 0.06) 13px, rgba(153, 153, 153, 0.06) 13px, transparent 14px, transparent 25px, rgba(153, 153, 153, 0.06) 26px, rgba(153, 153, 153, 0.06) 26px, transparent 27px, transparent 38px, rgba(153, 153, 153, 0.06) 39px, rgba(153, 153, 153, 0.06) 39px, transparent 40px, transparent 51px, rgba(153, 153, 153, 0.06) 52px, rgba(153, 153, 153, 0.06) 52px, transparent 53px, transparent 64px, rgba(153, 153, 153, 0.06) 65px, rgba(153, 153, 153, 0.06) 65px), repeating-linear-gradient(to right, /* 縦線 */ transparent 12px, rgba(153, 153, 153, 0.06) 13px, rgba(153, 153, 153, 0.06) 13px, transparent 14px, transparent 25px, rgba(153, 153, 153, 0.06) 26px, rgba(153, 153, 153, 0.06) 26px, transparent 27px, transparent 38px, rgba(153, 153, 153, 0.06) 39px, rgba(153, 153, 153, 0.06) 39px, transparent 40px, transparent 51px, rgba(153, 153, 153, 0.06) 52px, rgba(153, 153, 153, 0.06) 52px, transparent 53px, transparent 64px, rgba(153, 153, 153, 0.06) 65px, rgba(153, 153, 153, 0.06) 65px);
}






@media (min-width: 768px) {
	p {
		font-size: .8rem;
		line-height: 1.5rem;
	}
	.sp_br {
		display: none;
	}
	.main_message {
    background: none;
    color: #000;
    width: 100%;
    margin: 0!important;
	}
	.first_message {
	  background-image: url(/concept/images/first_message_bg.jpg);
		background-size: cover;
	}
	.first_message p, .second_message p{
		background: #fff;
		width: 60%;
		opacity: .8;
	}
	.second_message {
		background-image: url(/concept/images/second_message_bg.jpg);
		background-size: cover;
	}
	.first_message p {
		margin-left: 10%;
	}
	.second_message p{
		margin-left: 30%;
	}
	.bitei {
		background: #fff;
		position: relative;
	}
	.bitei_title {
		font-size: 1.8rem;
		letter-spacing: .6rem;
	}
	.bitei div:nth-child(2), .bitei > p {
		color: #000;
		background: none;
	}
	.bitei div:nth-child(2) p {
		font-size: 1.2rem!important;
		line-height: 1.6!important;
	}
	.bitei > p {
		position: absolute;
	  left: 35%;
	  bottom: 3%;
	  width: 64%;
	}
	.creator_message2 {
		font-family: ten-mincho-text, serif;
		font-weight: 400;
		font-style: normal;
	}
	.creators p:first-child {
		width: 30%;
		margin-left: 0!important;
	}
	.gugemka_box .position-absolute {
		top: 122px;
		width: 64%;
	}
	.gugemka_box .position-absolute {
		top: -15px;
		left: 52%;
		width: 350px;
	}
	.gugemka p:first-child {
		font-size: 1.6rem;
		line-height: 1.2;
	}
	.gugemka_box .img-box,
	.gugemka_box.jisseki .img-box,
	.gugemka_box.hosyou .img-box {
		height: auto;
	}

	.chart ul {
		width: 50%;
		letter-spacing: .2rem;
	}
	.gugemka_box .jisseki_font  {
		left: 2%;
		top: 340px;
		width: 269px;
	}
	.gugemka_box .hosyou_font {
		top: -2px;
		left: 51%;
		width: 255px;
	}

}