@charset "utf-8";
/* CSS Document */

/*==========================================
 pc/tab
===========================================*/

/*-------------top-------------*/
#top .logo{
 margin: 0 auto;
 padding: 80px 0;
 width: 55%;
}

#top header nav{
 margin-bottom: 60px;
 width: 100%;
 background: -webkit-linear-gradient(bottom right, #e4477b 25%, #df2764 25%, #df2764 50%, #e4477b 50%, #e4477b 75%, #df2764 75%, #df2764);
 background: linear-gradient(to top left, #e4477b 25%, #df2764 25%, #df2764 50%, #e4477b 50%, #e4477b 75%, #df2764 75%, #df2764);
 background-size: 6px 6px;
}

#top header nav .menu{
 margin: 0 auto;
 width: 92%;
 max-width: 580px;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 -webkit-align-items: stretch;
 align-items: stretch;
}

#top header nav li{
 margin: 0;
 font-family: 'Vidaloka', serif;
 font-size: 150%;
}

#top header nav li a{
 padding: 10px;
 display: block;
 color: #fff;
 -moz-transition: -moz-transform 0.2s linear;
 -webkit-transition: -webkit-transform 0.2s linear;
 -ms-transition: -ms-transform 0.2s linear;
 transition: transform 0.2s linear;
}

@media screen and (min-width: 801px){
 #top header nav li a:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
 }
}

#top .bnrBox{
 margin: 0px auto;
 width: 92%;
 max-width: 1000px;
 text-align: center;
}

#top .bnrBox .mi{
 margin: 0 auto 10px;
 font-size: 150%;
 font-weight: bold;
 color: #69c8ff; 
}

#twi{ 
 margin: 0 auto;
 width: 92%;
 max-width: 1000px;
 text-align: right;
 box-sizing: border-box;
}
#twi iframe {
  width: 100% !important;
  max-width: 100px;
  height: 100% !important;
  max-height: 22px;
}

#top .main_contents p{
 margin-bottom: 24px;
 font-size: 100%;
}

#top .main_contents p.reservation{
 text-align: center;
 font-weight: bold;
}

#top .main_contents a{
 color: #df2764;
 font-weight: bold;
 text-decoration: underline;
}

#top .main_contents a:hover{
 text-decoration: none;
}

#top .main_contents .intro h2{
 font-size: 175%;
 font-weight: bold;
 line-height: 1.3;
 text-align: center;
 color: #df2764; 
}

#top .main_contents .intro h2 span{
 font-size: 172%;
 font-family: 'Vidaloka', serif;
}

#top .main_contents .intro h2 span.sp_none{
 font-size: 100%;
}

#top .main_contents .intro h2 span.small{
 font-size: 107%;
}

#top .main_contents .coverBox{
 padding: 0 0 40px;
 text-align: center;
}

#top .main_contents .coverBox .bookPh{
 margin: 0 auto;
 width: 45%;
 text-align: center;
 border: 1px solid #c8c8c8;
}

/*表紙が横向きの場合*/
#top .main_contents .coverBox .cover_side {
 width: 50%;
}

/*表紙、裏表紙並べる場合------------------------*/
#top .main_contents .coverBox .cover_wrap {
 margin: 0 auto;
 width: 85%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

#top .main_contents .coverBox .cover_wrap dl {
 margin: 0;
 padding: 0;
 width: 49%;
}
#top .main_contents .coverBox .cover_wrap dl dt {
 padding: 0 0 8px;
}

/*#top .main_contents .coverBox .cover_wrap dl dt img {
 border: 1px solid #ccc;
}画像に線が無い場合表示*/

#top .main_contents .coverBox .cover_wrap dl dd span {
 font-size: 75%;
}

/*-------------------------------------------*/

#top .main_contents .coverBox .Copy {
 padding: 5px 0 20px;
 margin-bottom: 0;
 text-align: center;
}

#top .main_contents .fs_big01{
 font-size: 180%;
}

#top .main_contents .fs_big02{
 font-size: 160%;
}
	
#top .main_contents .fs_big03{
 font-size: 140%;
}	

#top .main_contents .ann{
 font-size: 87.5%;
 font-weight: normal;
}
 
#top .main_contents h4{
 margin: 0 auto;
 padding: 0 0 8px;
 font-weight: bold;
}

#top .main_contents .intro{
 padding: 0 0 30px;
}
 
#top .main_contents .intro p{
 padding: 16px 0 0;
}

#top .main_contents .detail p.top_img {
 margin: 0 0 5px;
 width: 35%;
}
@media screen and (max-width: 800px) {
#top .main_contents .detail p.top_img {
 margin: 0 auto 5px;
 width: 100%;
}
}

/*ポスターや特典画像を載せた時のimg調整*/
#top .main_contents .detail p img {
 width: 40%;
 height: auto;
}
@media screen and (max-width: 800px) {
#top .main_contents .detail p img {
 width: 100%;
 height: auto;
}
}

#top .main_contents .detail p.Copy {
 margin-top: 5px;
 margin-bottom: 30px;
}
@media screen and (max-width: 800px) {
#top .main_contents .detail p.Copy {
 margin-top: 5px;
 margin-bottom: 20px;
 text-align: center;
}
}

#top .main_contents .phBox{
 margin: 0;
 padding: 0 0 10px; 
}

#top .main_contents .privilegeBox{
 margin: 0 0 20px;
 padding: 20px 30px;
 color: #FFF;
	background-color: #dddddd; 
} 
 
#top .main_contents .privilegeBox h3{
	margin: 0px 0px 16px;
 padding: 6px 12px;
	font-size: 1.0rem;
 font-weight: bold;
 display: inline-block;
 color: #e071b6;
 background-color: #FFF;
 vertical-align: middle;
 line-height: 1.6;
 border-radius: 4px;
}

#top .apology{
 margin: 0 auto 40px;
 padding: 20px 3%;
 background: #e6e6e6;
 box-sizing: border-box;
}

#top .btBox{
 margin-bottom: 60px;
}

#top .infoBox{
	margin: 0 0px 50px;
	padding: 30px 3%;
 width: 60%;
 border: 2px solid #323232;
 box-sizing: border-box;
}

#top .infoBox .mi{
 margin-bottom: 20px;
 padding-bottom: 4px;
 font-size: 175%;
 font-weight: bold;
 font-family: 'Vidaloka', serif;
 border-bottom: 2px solid #df2764;
}

#top .infoBox li{
 margin-bottom: 10px;
 font-size: 100%;
 font-weight: bold;
 border-bottom: 1px solid #dddddd;
}

#top .infoBox a{
 margin-bottom: 10px; 
 padding: 10px;
 color: #323232;
 display: block;
}

@media screen and (min-width: 801px) {
 #top .infoBox a:hover{
  color: #df2764;
 }
}

#top .infoBox span{
 text-align: right;
 display: block;
}

#top .twitterBox{
 margin-bottom: 50px;
 padding: 20px 3%;
 width: 38%;
 border: 2px solid #323232;
 box-sizing: border-box;
}

#top .twitterBox .timeline{
 margin: 0 0 10px;
} 
#top .tw_btn iframe {
 width: 100%!important;
 max-width: 215px;
 height: 100%!important;
 max-height: 32px;
}

#top .main_contents .notice{
 font-size: 175%;
 font-weight: bold;
 text-align: center;
 color: #df2764;
}

#top .main_contents .notice p{
 margin-bottom: 0;
}


/*-------------information-------------*/

#information .main_contents p img{
 width: 40%;
}

#information .main_contents a{
 font-weight: bold;
 text-decoration: underline;
 color: #6a9dca;
}

@media screen and (min-width: 801px) {
 #information .main_contents a:hover{
  text-decoration: none;
 }
}

#information .infoHead{
 margin: 0px 0px 30px;
 border-bottom: 2px solid #df2764;
}

#information .infoHead dt{
 font-size: 125%;
 font-family: 'Vidaloka', serif;
 color: #df2764;
 display: inline-block;
}

#information .infoHead dd{
 padding: 0px 0px 10px;
}

#information .infoHead dd h3{
 font-size: 150%;
 font-weight: bold;
}

#information .detail{
 padding: 0px 0px 10px;
}

/*表紙、裏表紙並べる場合------------------------*/
#information .detail .cover_wrap {
 margin: 0 auto;
 width: 85%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

#information .detail .cover_wrap dl {
 margin: 0;
 padding: 0;
 width: 49%;
}
#information .detail .cover_wrap dl dt {
 padding: 0 0 8px;
}

#information .detail .cover_wrap dl dt img {
 border: 1px solid #ccc;
}

#information .detail .cover_wrap dl dt.border_none img {
 border: none;
}

#information .detail .cover_wrap dl dd {
 text-align: center;
}

#information .detail .cover_wrap dl dd span {
 font-size: 75%;
}
/*-------------------------------------------*/

#information .detail h4{
 padding: 0;
 margin: 0;
 font-weight: bold;
}

#information .detail ul.img_side01{
 margin: 0;
 padding: 0;
 width: 60%;
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-between;
}

@media screen and (max-width: 800px) {
 #information .detail ul.img_side01{
  width: 100%;
 }
}

#information .detail ul.img_side02 {
 width: 60%;
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-between;
}

#information .detail ul.img_side03 {
 width: 80%;
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-between;
}

@media screen and (max-width: 800px) {
#information .detail ul.img_side02,
#information .detail ul.img_side03 {
 width: 100%;
 display: block; 
}

#information .detail ul.img_side02 li,
#information .detail ul.img_side03 li {
 margin: 0 auto;
 width: 70%;
}
}

#information .detail ul li {
 margin: 0;
 padding: 0;
 width: 49%;
}
#information .detail ul li img {
 width: 100%;
 height: auto;
}

#information .detail .phBox{
 padding: 0px 0px 30px;
 text-align: center;
}

#information .detail .phBox img{
 width: 50%;
 border: 1px solid #ccc;  
}

#information .detail p.border_none_img {
 text-align: center;
}

#information .detail p.border_none_img img {
 width: 50%;
 border: none;
}

#information .detail p {
 padding: 0px 0px 20px;
 word-break: break-all;
}

/*折り込みポスター　縦と横が並んだ場合の下揃え調整*/
#information .detail li p.sideways {
 padding: 71% 0 0;
}

#information .detail .Copy {
 padding: 10px 0 30px;
 text-align: center;
}
#information .detail .Copy2 {
 padding: 5px 0 40px;
 text-align: left;
}
@media screen and (max-width: 800px) {
#information .detail .Copy2,
#information .info_area .Copy2 {
 text-align: center;
 padding: 5px 0 25px;
}
}

#information .info_area {
 padding-bottom: 20px;
 background-color: #f0dde3;
}

#information .info_area h4{
 margin-bottom: 20px;
 padding: 10px 3%;
 font-size: 16px;
 font-weight: bold;
 color: #FFF;
 background-color: #cd5f84;
}


#information .info_area ul.img_side02 {
 margin: 0 3% 0;
 padding: 0;
 width: 60%;
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-between;
}

@media screen and (max-width: 800px) {
 #information .info_area ul.img_side02 {
 display: flex;
 flex-wrap: wrap;
 width: 94%;
 }
}

#information .info_area ul li {
 margin: 0;
 padding: 0;
 width: 49%;
}
#information .info_area ul li img{
 width: 100%;
 height: auto;
}

#information .info_area p{
 padding: 0 3% 20px;
 font-size: 87.5%;
}

#information .info_area dl {
 margin: 0;
 padding: 0 3% 20px;
 font-size: 87.5%;
}

#information .info_area dl dd {
 padding: 0 0 14px;
}

#information .info_area dl dd:last-of-type {
 padding: 0;
}

#information .main_contents p a{
 color: #df2764;
}
 
#information .main_contents .present_box{
 margin: 0px auto;
 width: 90%;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 -webkit-align-items: stretch;
 align-items: stretch;
} 
 
#information .main_contents .present_box dl{
 margin: 0px 0 20px;
 padding: 20px 3%;
 width: 42%;
 text-align: center;
 background: #dddddd;
 position: relative;
 display: flex;
 flex-direction: column;
}
 
#information .main_contents .present_box dl dt{
 margin: 0px auto 20px;
 width: 30px;
 height: 30px;
 color: #FFF;
 line-height: 30px;
 vertical-align: middle;
 background-color: #df2764;
 border-radius: 50%;
 position: absolute;
 top: -10px;
 left: -10px;
}
 
#information .main_contents .present_box dl .item_name{
 margin: 0px auto 20px;
 font-size: 125%;
 font-weight: bold;
}
 
#information .main_contents .present_box dl .ph{
 margin: 0px auto 20px;
 width: 100%;
}
 
#information .main_contents .present_box dl .ph img{
 width: 100%;
}

#information .main_contents .present_box dl .vertical img{
 width: 80%;
}

#information .main_contents .present_box dl .number_p{
 margin-top: auto;
}

 
/*-------------magazine-------------*/

#magazine .coverBox {
 padding: 20px 0 40px;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 -webkit-align-items: center;
 align-items: center;
}

#magazine .coverBox > dt{
 width: 38%;
}

#magazine .coverBox > dd{
 width: 58%;
}

#magazine .cover{
	border: 1px solid #ccc;
 box-sizing: border-box;
}

#magazine .cover_mi{
 margin-bottom: 10px;
 font-size: 150%;
 font-weight: bold;
 color: #df2764; 
}

#magazine .btBox{
 margin-bottom: 40px;
}

#magazine .btBox .acc_btn{
 margin: 0 auto 20px;
 padding: 16px 0;
 width: 80%;
 position: relative;
 font-weight: bold;
 color: #df2764;
 border: 2px solid #df2764;
 overflow: hidden;
 text-align: center;
 display: block;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

#magazine .btBox .acc_btn:before {
 content: "";
 z-index: -1;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: -100%;
 background-color: #df2764;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

/*ポスター画像調整　縦向きと横向きの場合*/
#magazine dl.txtBox dd.img_side02 ul.img_side03 {
 width: 60%;
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-between;
}
#magazine dl.txtBox dd.img_side02 ul li {
 width: 49%;
}
#magazine dl.txtBox dd.img_side02 ul li img {
 width: 100%;
 height: auto;
}
@media screen and (max-width: 800px) {
#magazine dl.txtBox dd.img_side02 ul {
 width: 100%;
}
#magazine .txtBox dd ul.img_side03 li {
 width: 49%;
}
}

#magazine .img_side02 ul.img_side03 li p.sideways {
 padding: 191px 0 0;
}
@media screen and (max-width: 800px) {
#magazine .img_side02 ul.sp_flx_none {
 display: block !important;
}
#magazine .img_side02 ul.sp_flx_none li {
 width: 100% !important;
}
#magazine .img_side02 ul.img_side03 li p.sideways {
 padding: 0;
}
}

/*ポスター画像調整　両方横向きの場合*/
#magazine dl.txtBox dd.img_side02 ul.img_side04 {
 width: 80%;
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-between;
}
@media screen and (max-width: 800px) {
#magazine dl.txtBox dd.img_side02 ul.img_side04 {
 width: 100%;
 display: block;
}
#magazine dl.txtBox dd.img_side02 ul.img_side04 li {
width: 100%;
}
}

@media screen and (min-width: 801px) {
 #magazine .btBox .acc_btn:hover{
  color: #ecf0f1;
 }
 #magazine .btBox .acc_btn:hover:before{
  left: 0;
 }
}

#magazine .detail_area{
 display: none;
} 

#magazine .detail_area .txt,
#magazine .detail_area .detail{
 margin-bottom: 40px;
} 

#magazine .txtBox{
 padding-bottom: 20px;
}

#magazine .txtBox img{
 width: 40%;
}

#magazine .txtBox dl dt{
 margin-bottom: 10px;
 font-size: 125%;
 font-weight: bold;
 border-bottom: 1px solid #df2764;
}

#magazine .txtBox dd p {
 padding-bottom: 20px;
}

@media screen and (max-width: 800px) {
#magazine .txtBox .Copy2 {
 margin-top: 5px;
 text-align: center;
}
}

#magazine .page{
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 -webkit-align-items: stretch;
 align-items: stretch;
}

#magazine .page li{
 margin-bottom: 20px;
 width: 100%;
}

#magazine .page li:last-child{
 margin-bottom: 40px;
}

#magazine .page .col2{
 width: 49%;
}

#magazine .page .col3{
 width: 33%;
}

#magazine .page .col4{
 width: 24%;
}

@media screen and (max-width: 800px) {
#magazine ul.page li.col2.sp_width {
 width: 100%;
}

#magazine ul.page li.col3 {
 width: 49%;
}

#magazine ul.page li.col4 {
 width: 49%;
}
}

#magazine .page img{
 border: 1px solid #dcdcdc;
 box-sizing: border-box;
}



/*-------------event-------------*/

#event .main_contents p{
 padding-bottom: 20px;
}

@media screen and (min-width: 801px) {
 #event .main_contents a:hover{
 text-decoration: none;
 }
}

#event .main_contents .phBox{
 padding: 40px 0px;
 text-align: center;
}

/*-------------present-------------*/
#present .main_contents .present_box{
 margin: 0px auto;
 width: 94%;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 -webkit-align-items: stretch;
 align-items: stretch;
} 
 
#present .main_contents .present_box dl{
 margin-bottom: 30px;
 padding: 20px 3%;
 width: 42%;
 text-align: center;
 background: #dddddd;
 position: relative;
 display: flex;
 flex-direction: column;
}
 
#present .main_contents .present_box dl dt{
 width: 30px;
 height: 30px;
 color: #FFF;
 line-height: 30px;
 vertical-align: middle;
 background-color: #df2764;
 border-radius: 50%;
 position: absolute;
 top: -10px;
 left: -10px;
}
 
#present .main_contents .present_box dl .item_name{
 margin: 0px auto 20px;
 font-size: 125%;
 font-weight: bold;
}
 
#present .main_contents .present_box dl .ph{
 margin: 0px auto 20px;
 width: 100%;
}
 
#present .main_contents .present_box dl .ph img{
 width: 100%;
}

#present .main_contents .present_box dl .vertical img{
 width: 80%;
}

#present .main_contents .present_box dl .number_p{
 margin-top: auto;
}

#present .presentHead .end{
 color: #FFF;
 background: #91c3ca;
 display: block;
} 
 
#present .main_contents .detail .cm{ font-family: 'Vidaloka', serif;
 font-size: 3.125rem;
 font-weight: 700; 
 color: #edce42;
 text-align: center;
} 
 

@media screen and (max-width: 800px) {
/*==========================================
 smp
===========================================*/
 /*-------------top-------------*/
 #top.wrapper{
  padding-top: 0;
 }
 
 #top header{
  position: static;
 }
 
 #top header .logo{
  margin: 0px auto;
  padding: 40px 0;
  width: 80%;
 }

 #top header nav{
  margin-bottom: 20px;
  width: 100%;
  height: auto;
  display: block;
  position: static;
 }

 #top header nav .menu{
  padding: 10px 0;
  width: 86%; 
 }

 #top header .menu li{
  padding: 0px;
  width: auto;
  font-size: 100%;
  font-size: 4.0vw;
 }

 #top header .menu li a{
  padding: 4px 0;
  display: inline-block;
  border-bottom: none;
 }

 #top .bnrBox .mi{
  font-size: 1.0rem;
 }

 #twi{ 
  margin: 0px auto;
  padding: 0;
  width: 92%;
 }
 #twi iframe {
  width: 100% !important;
  max-width: 100px;
  height: 100% !important;
  max-height: 22px;
}
  
 #top .main_contents .intro{
  padding-bottom: 20px;
 }

 #top .main_contents .intro h2{
  font-size: 138.4%;
 }

 #top .main_contents .coverBox{
  padding-bottom: 20px;
 }

 #top .main_contents .coverBox .bookPh{
  width: 90%;
 }
 
 /*表紙、裏表紙並べる場合 SP------------------------*/
#top .main_contents .coverBox .cover_wrap {
 margin: 0 auto;
 width: 100%;
 display: block;
}

#top .main_contents .coverBox .cover_wrap dl {
 margin: 0 auto;
 padding: 0;
 width: 85%;
}

#top .main_contents .coverBox .cover_wrap dl:first-child {
 padding: 0 0 10px;
}

#top .main_contents .coverBox .cover_wrap dl dt {
 padding: 0 0 8px;
}

#top .main_contents .coverBox .cover_wrap dl dt img {
 border: 1px solid #ccc;
}
/*-------------------------------------------*/

 #top .main_contents .coverBox .Copy {
  margin-bottom: 0;
 }

 #top .main_contents .ph{
  margin: 0 auto 24px;
  width: 80%
 }
 
 #top .apology{
  margin-bottom: 15px;
  padding: 20px 5%;
 }

 #top .btBox{
  margin-bottom: 30px;
 }
 
 #top .main_contents .bt01{
  margin-bottom: 10px;
  width: 90%;
 }
 
 #top .infoBox{
  padding: 16px 4%; 
  width: 100%;
 }

 #top .infoBox .mi{
  font-size: 150%;
 }
 
 #top .infoBox li{
  font-size: 108%;
 }

 #top .infoBox li a{
  text-decoration: underline;
 }

 #top .twitterBox{
  width: 100%;
 }
  
 #top .main_contents .notice{
  font-size: 110%;
  font-size: 3.7vw;
 }

/*-------------information-------------*/
 #information .main_contents p img{
  margin: 0 auto;
  width: 70%;
  display: block;
 }

 #information .infoHead dd h3{
  font-size: 115.4%;
 }
 
 /*表紙、裏表紙並べる場合------------------------*/
#information .detail .cover_wrap {
 margin: 0 auto;
 width: 100%;
 display: block;
}

#information .detail .cover_wrap dl {
 margin: 0 auto;
 padding: 0;
 width: 85%;
}
#information .detail .cover_wrap dl:first-child {
 padding: 0 0 10px;
}

#information .detail .cover_wrap dl dt {
 padding: 0 0 8px;
}

#information .detail .cover_wrap dl dt img {
 border: 1px solid #ccc;
}
#information .detail .cover_wrap dl dd {
 text-align: center;
}
/*-------------------------------------------*/
 
 #information .detail .phBox img,
 #information .detail p.border_none_img img {
  width: 80%;
 }
 
 #information .detail li p.sideways {
 padding: 0;
}

/*-------------magazine-------------*/

 #magazine .coverBox {
  padding: 20px 0 0;
 }
 
 #magazine .coverBox > dt{
  margin: 0 auto 20px;
  width: 80%;
 }

 #magazine .coverBox > dd{
  width: 100%;
 }
 
 #magazine .btBox{
  margin-bottom: 20px;
 }
 
 #magazine .btBox .acc_btn{
  width: 85%;
 }
 
 #magazine .btBox .acc_btn::after{
  background-color: #df2764;
 }
 
 #magazine .detail_area .txt,
 #magazine .detail_area .detail{
  margin-bottom: 20px;
 }
 
 #magazine .txtBox img{
  width: 100%;
 }

 /*-------------event-------------*/

 #event .main_contents .phBox{
  padding: 20px 0px;
 }


 /*-------------present-------------*/
 
 #present .main_contents .present_box{
  width: 100%;
 }
 
 #present .main_contents .present_box dl{
  margin: 0 auto 30px;
  padding: 30px 8% 10px;
  width: 76%;
 }
 
 #present .main_contents .present_box dl dt{
  position: absolute;
  top: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
 }
 
 #present .main_contents .present_box dl .item_name{
  margin-bottom: 10px;
  font-size: 115%;
 }
 
 #present .main_contents .txt_d {
  font-size: 120%;
 }
 
 

}