@charset "UTF-8";

/* layout
-------------------------------------------------------------*/
div.content_wrapper {
  width: 950px;
  margin: 10px auto;
  background: #FFF;
}
div.content_wrapper #navi_left {
  padding-right: 15px;
}
article.special_content_wrapper {
  width: 770px;
  padding-bottom: 10px;
}
article.special_content_wrapper * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  line-height: 1.5;
  font-size: 16px;
  color:#883939;
}

/* common
-------------------------------------------------------------*/
.common_box {
  margin: 13px 8px 38px;
}
.common_box img{
  width: 100%;
}
.common_box .title {
  margin: 0 auto;
  text-align: center;
}
.common_box .contents {
  margin: 10px auto;
  line-height: 1.6;
}

/* header
-------------------------------------------------------------*/
.header_area{
  width: 100%;
  max-width: 770px;
  margin: 0 auto;
  text-align: center;
}
.header_area img{
  width: 100%;
  max-width: 770px;
}

/* nav_area
-------------------------------------------------------------*/
.nav_area{
  width: 98%;
  max-width: 770px;
  margin: auto;
}
.nav_area ul{
  display: table;
  table-layout: fixed;
  width: 100%;
}
.nav_area ul:after{
  content:" ";
  display:block;
  clear:both;
}
.nav_area ul li{
  display: table-cell;
  width: 33.3%;
  vertical-align: middle;
  text-align: center;
}
.nav_area ul li a{
  display: block;
}
.nav_area img{
  width: 100%;
  max-width: 256px;
}

/* intro
-------------------------------------------------------------*/
.intro .details {
  display: block !important;
}
.intro dt{
  font-weight: bold;
}

/* info
-------------------------------------------------------------*/
.info dl{
  width: 65%;
  margin: 0 auto;
}
.info dt{
  float: left;
  width: 100px;
}
.info dd{
  margin-left: 100px;
}
.info dd:after{
  content:" ";
  display:block;
  clear:both;
}
.info dd a{
  color: #08C;
}

/* person
-------------------------------------------------------------*/

.person ul{
  width: 100%;
  margin-bottom:30px;
  list-style:none;
}
.person ul li + li{
  margin-top:18px;
}
.person li:after{
  content:" ";
  display:block;
  clear:both;
}
.person .thum_box{
  display: table-cell;
  width: 25%;
  margin: auto;
  vertical-align: top;
  text-align: center;
}
.person .thum_box img{
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  border-radius: 3px;
  border: 1px solid #DCD1D1;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
.person .text_box{
  display: table-cell;
  margin: auto;
  padding: 0 10px;
  vertical-align: top;
}
.person .text_box span{
  display: block;
  margin-bottom: 3px;
  line-height: 1;
  font-size: 22px;
  color: #F25755;
}
.person p{
  text-align: center;
}

/* title
------------------------------------------------------------- */
.title img {
  margin: 0 0 13px;
}
.title .h-center {
  text-align: center;
}

/* sample
------------------------------------------------------------- */
.sample .titleinfo_box{
  float:left;
  display:table;
  width:377px;
  margin: 8px auto;
  text-decoration:none;
}
.sample .left_box{
  display:table-cell;
  width:145px;
  padding:0 10px 0 0;
  vertical-align:top;
}
.sample .left_box a{
  display:block;
}
.sample .left_box img{
  width:100%;
  max-width: 135px;
  border: 1px solid #DDD;
  border-radius: 2px;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
.sample .right_box{
  display:table-cell;
  padding:0 20px 0 0;
  vertical-align:top;
}
.sample .right_box{
  display:table-cell;
  padding:0 20px 0 0;
  vertical-align:top;
}
.sample .titleinfo_box:nth-child(2) .right_box{
  padding:0 10px 0 0;
}
.sample .right_box .title_name{
  font-size:16px;
}
.sample .right_box .title_name a{
  font-size:16px;
  color:#F25755;
}
.sample .right_box .author_name{
  height: auto;
  font-size:14px;
  white-space: normal;
}
.sample .right_box .author_name a{
  color:#883939;
}
.sample .right_box .appeal_text{
  margin-top: 5px;
  text-align: left;
}
.sample .right_box .appeal_text span{
  display: inline-block;
  padding:2px 7px 1px 7px;
  background: #FF6699;
  border: 1px solid #FF6699;
  border-radius: 3px;
  text-align: left;
  font-size: 12px;
  font-weight:bold;
  color: #FFF;
}
.sample .right_box .intro{
  margin: 3px 0;
  line-height: 1.3;
  text-align:left;
  color:#666;
}
.sample .right_box .btn_box {
  display: table;
  width:auto;
  margin:7px 0 0 auto;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
.sample .right_box .btn_box_left {
  display: table-cell;
  width:92px;
  padding:2px 2px 2px 0;
}
.sample .right_box .btn_box_right {
  display: table-cell;
  width:92px;
  padding:2px 0 2px 2px;
}
.sample .right_box .btn_read,
.sample .right_box .btn_buy {
  display:inline-block;
  width:90px;
  height:30px;
  margin:0;
  padding:0;
  line-height:29px;
  vertical-align:middle;
  text-align:center;
  background: #FFF;
  border: 1px solid #946160;
  border-bottom: 2px solid #7b4c4c;
  border-right: 1px solid #7b4c4c;
  border-radius: 3px;
  font-size:13px;
  font-weight:bold;
  color: #946160;
  white-space:nowrap;
  cursor:pointer;
  text-decoration: none;
}

.fl {
    display: flex;
}
.ju_sa {
    justify-content: space-around;
    margin: auto;
    width: 668px;
}


.grad-btn {
  font-size:1em;
  width:150px;
  padding:5px 30px;
  border:1px solid #000;
  margin:0 0 15px;
}
.grad-btn::before {
  content: "終了しました▼"
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 180px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる▲" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

.grad-item{
  font-size:1em;
}

.grad-item span{
  font-weight:bold;

}

#h1 {
    background-color: #ffcdce;
  padding: 10px 0px 1px 0px;
}

.h1sec p.titlelogo {
    font-size: 50px!important;
    text-align: center!important;
    padding: 17px 0 0 0;
  line-height: 65px;
  font-family: Yu Mincho;
    font-weight: bold;
}
.h1sec p.titleno {
    text-align: center;
    font-size: 39px;
    font-weight: 400;
    color: #f82428;
  font-family: Yu Mincho;
    font-weight: bold;
}

#h1 .bg-box.fl.ju {
    background-color: white;
    width: 700px;
  margin: auto;
  padding: 7px 20px 7px 20px;
}
#present .presec {
    border: 1px solid #f0f0f0;
    padding: 5px;
    margin: 5px auto;
    font-size: 1em;
  text-align: left;
}

.karuta.mb20 {
    width: 80%;
    margin: auto;
}

.camtime.mb30 {
    font-size: 25px;
    font-weight: bold;
    line-height: 30px;
}
  



/********************************************************************
  追加
********************************************************************/

/*margin*/
.m_mb15{margin-bottom: -15px!important;}
.m_mb30{margin-bottom: -30px!important;}
.m_mb45{margin-bottom: -45px!important;}
.m_mb70{margin-bottom: -70px!important;}
.mb5{margin-bottom: 5px!important;}
.mb10{margin-bottom: 10px!important;}
.mb15{margin-bottom: 15px!important;}
.mb20{margin-bottom: 20px!important;}
.mb25{margin-bottom: 25px!important;}
.mb30{margin-bottom: 30px!important;}
.mb35{margin-bottom: 35px!important;}
.mb40{margin-bottom: 40px!important;}
.mb42{margin-bottom: 42px!important;}
.mb45{margin-bottom: 45px!important;}
.mb47{margin-bottom: 47px!important;}
.mb50{margin-bottom: 50px!important;}
.mb60{margin-bottom: 60px!important;}
.mb70{margin-bottom: 70px!important;}
.mb80{margin-bottom: 80px!important;}
.mb100{margin-bottom: 100px!important;}
.mb110{margin-bottom: 110px!important;}
.mb120{margin-bottom: 120px!important;}
.mb150{margin-bottom: 150px!important;}
.mb180{margin-bottom: 180px!important;}
.mb200{margin-bottom: 200px!important;}

.mt10{margin-top: 10px!important;}
.mt13{margin-top: 13px!important;}
.mt15{margin-top: 15px!important;}
.mt20{margin-top: 20px!important;}
.mt26{margin-top: 26px!important;}
.mt28{margin-top: 28px!important;}
.mt30{margin-top: 30px!important;}
.mt33{margin-top: 33px!important;}
.mt35{margin-top: 35px!important;}
.mt50{margin-top: 50px!important;}
.mt58{margin-top: 58px!important;}
.mt70{margin-top: 70px!important;}
.mt100{margin-top: 100px!important;}

.mr10{margin-right: 10px!important;}
.mr15{margin-right: 15px!important;}

/*padding*/
.pt10{padding-top: 10px!important;}
.pt20{padding-top: 20px!important;}
.pt30{padding-top: 30px!important;}

.pb20{padding-bottom: 20px!important;}
.pb30{padding-bottom: 30px!important;}

.width42{width: 42%!important;}
.width47{width: 47%!important;}
.width48{width: 48%!important;}
.width49{width: 49%!important;}
.width50{width: 50%!important;}
.width51{width: 51%!important;}
.width52{width: 52%!important;}
.width53{width: 53%!important;}
.width54{width: 54%!important;}
.width55{width: 55%!important;}
.width56{width: 56%!important;}
.width57{width: 57%!important;}
.width58{width: 58%!important;}

/*text*/
.text_left{text-align: left;}
.text_right{text-align: right;}

/*poti_re*/
.posi_ab{position: absolute;}
.posi_re{position: relative;}

/*flex*/
.fl{display: flex;}/*コンテンツ回り込み*/
.ju{justify-content: space-between;}/*左右にわける*/
/* 各アイテムを均等に配置し各アイテムの両側に半分の大きさの間隔を置く */
.ju_left{justify-content: left;}
.ju_f_end{justify-content: flex-end;}
.ju_se{justify-content: space-evenly;}/* 各アイテムを均等に配置し各アイテムの周りに同じ大きさの間隔を置く */
.ju_center{justify-content: center;}
.items_center{align-items: center;}
.fl_wr{flex-wrap: wrap;}
.fl_co{flex-direction: column;}/* 横並びになったアイテムをタテ並びにする */