/* =================================
	present CSS
================================= */

/*	intro_text
============================== */

.intro_text{
	font-weight: 400;
	color: #000000;
	line-height: 1.6;
}
.t_shadow{
	text-shadow:rgba(250,251,55,0.5) 2px 2px 0;
}
.intro_color1{
	color: #f5855e;
}
.intro_color2{
	color: #721d00;
}
.yellow_line{
	background: linear-gradient(transparent 70%, #fff500 0%);
	font-weight: 800;
	font-size: 110%;
}
.t_center{
	text-align: center;
}
.book_about{
	border-top: 1px solid #696049;
}
.pre_text1{
	line-height: 1.5;
}
.pre_text1_a{
	font-size: 140%;
}
.kome{
	margin: 3em 0 1em;

	font-size: 90%;
	color: #7b7b7b;
}
.red{
	font-weight: 800;
	font-size: 110%;
}
@media all and (min-width: 768px) {
.intro_text{
	font-size: 140%;
	margin: 40px 0 40px;
	text-align: left;
}
.pre_text1{
	text-align: center;
}
.large{
	font-size: 160%;
}
.book_about{
	margin-top: 30px;
	padding-top: 30px;
}
.book_box{
	margin-bottom: 30px;
}
}
@media all and (max-width: 767px) {
.intro_text{
	font-size: 120%;
	margin-bottom: 20px;
	text-align: left;
}
.book_about{
	margin-top:20px;
	padding-top: 25px;
}
.book_box{
	margin: 30px 0 30px;
}
}

/*	book_tit
============================== */

.book_tit{
	color: #800000;
	padding: 5px;
	text-shadow:rgba(214,185,130,0.7) 1px 1px 0;
}
@media all and (min-width: 768px) {
.book_tit{
	font-size: 130%;
	border-bottom: 1px solid #800000;
	text-align: center;
}
}
@media all and (max-width: 767px) {
.book_tit{
	font-size: 110%;
	border-bottom: 1px solid #800000;
}
}

/*	main_pics
============================== */
.main_pics span{
	display: block;
	background-repeat: no-repeat;
	/*background-color: #fff338;
	box-shadow: 4px 4px #fff338;*/
}
@media all and (min-width: 768px) {
.main_pics{
	margin: 20px 0 5px;
}
.main_pics span{
	width: 400px;
	height: 568px;
	background-size: 400px 568px;
	margin: 30px auto 0px;
}
.c_text{
	margin-bottom: 20px;
	font-size: 80%;
}
}
@media all and (max-width: 767px) {
.main_pics span{
	margin: 15px auto 5px;
	width: 270px;
	height: 383px;
	background-size: 270px 383px;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
}
.c_text{
	margin-bottom: 15px;
	font-size: 80%;
}
}

/*	pics
============================== */
.pics span{
	display: block;
	background-repeat: no-repeat;
	/*background-color: #fff338;
	box-shadow: 4px 4px #fff338;*/
}
@media all and (min-width: 768px) {
.pics{
	margin: 20px 0;
}
.pics span{
	width: 300px;
	height: 427px;
	background-size: 300px 427px;
	margin: 40px auto 0px;
}
}
@media all and (max-width: 767px) {
.pics span{
	margin: 15px auto 20px;
	width: 270px;
	height: 383px;
	background-size: 270px 383px;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
}
}

/*	Q_A_box
============================== */
.Q_A_box{
	/*background-color: rgba(213,192,142,0.3);*/
	background-color: #cfe950;
	color: #000;
}
.Q_text{
	font-weight: 400;
	line-height: 1.5;
}
.p1{
	color: #000;
}
.qa_a span{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-flow: column;
  width: 1em;
  height: 1em;
  color: #fff;
	background-color: #ed1a3d;
  font-size: 1em;
  line-height: 1.2em;
	padding: 3px;
}
.rei{
	font-size: 100%;
	font-weight: 800;
	color: #268112;
}
@media all and (min-width: 768px) {
.Q_A_box{
	margin: 60px 0 40px;
	padding: 20px 20px 20px;
}
.prof_tit span{
	font-size: 150%;
	padding: 5px 10px;
}
.Q_text{
	font-size: 90%;
}
.p1{
	font-size: 150%;
}
.qa_a{
	font-size: 140%;
	text-align: center;
	margin-top: 0.5em;
}
}
@media all and (max-width: 767px) {
.Q_A_box{
	margin: 3em 0 1.5em;
	padding: 15px 15px 15px;
}
.prof_tit span{
	font-size: 110%;
	padding: 4px 7px;
}
.Q_text{
	font-size: 110%;
}
.p1{
	font-size: 100%;
}
.qa_a{
	font-size: 110%;
}
}

/*	ribbon_tit
============================== */
.ribbon_tit_area{
	text-align: center;
}
.ribbon_tit {
  display: inline-block;
  text-align: center;
  padding: 0 50px;
  font-size: 120%;
  background: #1f561e;
  color: #FFF;
  box-sizing: border-box;
}
@media all and (min-width: 768px) {
.ribbon_tit_area{
	margin: -38px auto 15px;
}
}
@media all and (max-width: 767px) {
.ribbon_tit_area{
	margin: -30px auto 15px;
}
.ribbon_tit {
  height: 30px;
  line-height: 30px;
}
}

/*	button
============================== */
.button{
  display: block;
  text-align: center;
}
.button a {
  display: block;
  cursor: pointer;
  margin: 0 auto;
  padding: 30px;
  color: #4e3f1b;
  font-size: 130%;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  border-radius: 50px;
  background-color: #fff500;
  box-shadow: 0 6px 0 #d4d4d4, 0 12px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;
	position: relative;
}

.button a:hover {
  background-color: #fff500;
  box-shadow: 0 3px 0 #d4d4d4, 0 6px 0px rgba(0, 0, 0, 0.1);
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
}

.button a:active {
  color: #1e1e1e;
  background-color: #fff500;
  box-shadow: 0 0 0 #d4d4d4, 0 0 0px rgba(0, 0, 0, 0.1);
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  transition-duration: 0.1s;
}
.button a::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 2px #a38b4f;
  border-right: solid 2px #a38b4f;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -5px;
	transition: all 0.2s;
}

@media all and (min-width: 768px) {
  .button a {
    width: 380px;
    padding: 20px 0;
    font-size: 130%;
    line-height: 100%;
    margin: 40px auto 0px;
  }
}

@media all and (max-width: 767px) {
  .button a {
    width: 70%;
    padding: 1em 0;
    font-size: 100%;
    line-height: 100%;
    margin: 20px auto 20px;
  }
}

/*	guest_area
============================== */
.guest_tit{
	color: #5b4a1f;
	text-shadow:rgba(214,185,130,0.7) 2px 2px 1px;
	text-align: center;
}
@media all and (min-width: 768px) {
.guest_area{
	margin: 55px 0 0;
	padding-top: 25px;
}
.guest_tit{
	font-size: 160%;
	border-top:2px solid #5b4a1f;
	border-bottom:2px solid #5b4a1f;
	margin: 70px 0 15px;

}
}
@media all and (max-width: 767px) {
.guest_area{
	margin: 30px 0 10px;
	padding-top: 10px;
}
.guest_tit{
	font-size: 130%;
	border-top:1px solid #5b4a1f;
	border-bottom:1px solid #5b4a1f;
	margin: 40px 0 0px;
}
}

/*	bknm_area
============================== */
.bknm_area li{
	margin-bottom: 1em;
	padding-bottom: 1em;
}
.bknm_area h4{
	margin: 0 auto;
}
.bknm_area h4 span{
	background-color: #fff500;
	color: #4a3b15;
	padding: 6px;
	font-size: 110%;
}
.bknm_area .p2{
	color: #97824c;
}
.bknm_area .qa_a_bk{
	line-height: 1.5em;
}
.bknm_area .qa_a_bk span{
	border-radius: 50%;
	font-size: 100%;
	line-height: 1.5em;
	padding:4px;
	color: #fff;
	background: #ed1a3d;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  width: 1em;
  height: 1em;
}
@media all and (min-width: 768px) {
.bknm_area li{
	border-bottom: 2px dashed #4a3b15;
}
}
@media all and (max-width: 767px) {
.bk_memlist{
	margin-top: 1.5em;
}
.bknm_area li{
	border-bottom: 1px dashed #4a3b15;
}
}

/* q_text */
.q_text{
	color: #268112;
	font-weight: bold;
	margin-bottom:0.5em;
	position: relative;
	/*text-shadow:rgba(214,185,130,0.4) 1px 1px 0;*/
	letter-spacing:0.05em;
}
.q_text:before{
    display:inline-block;
	content: "";
	/*top: 50%;*/
    background-image: url(../qanda/img/q_icon.png);
    background-repeat: no-repeat;
    position: absolute;
}
.q_text span{
	color: #fff;
	padding: 3px;
}
@media all and (min-width: 768px) {
.q_text{
	font-size: 140%;
	line-height: 1.5;
}
.q_text:before{
    width: 26px;
    height: 26px;
    background-size: 26px 26px;
    margin-top: 3px;
}
.q_text span{
	padding-left: 32px;
}
}
@media all and (max-width: 767px) {
.q_text{
	font-size: 110%;
	line-height: 1.5;
}
.q_text:before{
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
    margin-top: 1px;
}
.q_text span{
	padding-left: 25px;
}
}
/* a_text */
.a_text{
	position: relative;
	letter-spacing:0.05em;
}
.a_text:before{
    display:inline-block;
	content: "";
	/*top: 50%;*/
    background-image: url(../qanda/img/a_icon.png);
    background-repeat: no-repeat;
    position: absolute;
}
.a_text span{
	color: #fff;
	padding: 3px;
}
@media all and (min-width: 768px) {
.a_text{
	font-size: 100%;
	line-height: 1.7;
}
.a_text:before{
    width: 26px;
    height: 26px;
    background-size: 26px 26px;
    margin-top: 0px;
}
.a_text span{
	padding-left: 32px;
}
}
@media all and (max-width: 767px) {
.a_text{
	font-size: 100%;
	line-height: 1.5;
}
.a_text:before{
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
    margin-top: 0px;
}
.a_text span{
	padding-left: 25px;
}
}
@media all and (min-width: 768px) {
.bbs-loop{padding:20px;margin-bottom:20px;}
.bbs-tbs{border:solid 3px #cccccc;color:#010101;}
.bbs-from{font-size:110%;margin-top:20px;}
.bbs-post{font-size:80%; color:#449321;}
}

@media all and (max-width: 767px) {
.bbs-loop{padding:1em;margin-bottom:1em;}
.bbs-tbs{border:solid 3px #cccccc;color:#010101;}
.bbs-from{font-size:100%;margin-top:1em;}
.bbs-post{font-size:80%; color:#449321;}
 }