@charset "utf-8";

/* for hongram index+present */

@import url(reset.css);

/*---------------------- link ----------------------*/


a:link {
color: /*#FF6633*/ #111111;
text-decoration: none;
}
a:visited {
color: /*#FF6633*/ #111111;
text-decoration: none;
}
a:hover {
color: /*#FF147B*/ #000000;
text-decoration: underline;
}
a:active {
color: #ee0000;
text-decoration: none;
}

.hide{ display:none;}


/*---------------------- digital content ----------------------*/

html,body{
color:#000000;
font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
width:100%;
}

/*web font*/
h1,
.heading,
#tab-ODB-list{
font-family: 'Roboto Condensed',"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.tag,.notice span{
font-family: 'Roboto Condensed';
letter-spacing:0.05em;
}

/* header */

#header{
border-bottom:solid 1px #000000;
background:url(../img/hongram/dot.png) center -10px repeat-x;
padding:4px 0 4px 0;
width:100%;
}
#headerInner{
position:relative;
margin:0 auto;
width:96%;
max-width:860px;
text-align:center;
}
.logo{
text-align:left;
max-width:70%;
}
.logo img{
vertical-align:bottom;
width:100%;
max-width:276px;
}
.headerNav{
position:absolute;
right:0;
top:32%;
}

.navLinkAbout{ position: absolute; right:0; bottom:-36px; font-size:70%;}
.navLinkAbout a{ display:block; background:#ffffff; border:solid 1px #000000; border-radius:6px; padding:4px 6px; width:8em;}

/* main */

#main{
margin:0 auto;
width:860px;
padding:10px 0 0 0;
}

.leftContainer{
float:left;
width:620px;
}
.leftContainer .heading{
max-width:602px;
}
.rightContainer{
float:right;
width:204px;
}

.rightContainer img{ max-width:100%;}
.bnr-howto img{ max-width:100%;}

.rightContainer .heading{
margin:0 0 15px 0;
}

.heading{/*midasi*/
clear:both;
display:block;
border-bottom: solid 2px #000000;
padding:40px 0 4px 18px;
margin:0 0 25px 0;
background:url(../img/hongram/icon_waves.gif) left 38px no-repeat;
font-weight:bold;
font-size:130%;
}
.heading .sub{
font-size:60%;
padding:0 0 0 1em;
position:relative;
top:-1px;
}
.heading .sub2{
font-size:60%;
padding:0 0 0 1em;
position:relative;
float:right;
top:6px;
}
.heading .sub a,
.heading .sub2 a{ padding:6px 0 6px 6px;}
.heading .sub a:before,
.heading .sub2 a:before{
content:" ";
display: inline-block;
font-size:1px;
width:0;
padding:0;
margin:-2px 0 0 0.5em;
overflow:hidden;
border-top:4px solid transparent;
border-right:4px solid transparent;
border-bottom:4px solid transparent;
border-left:4px solid #999999;
}

.summary{ font-size:78%; line-height:1.5; margin:1em 0;}

.color-pink{ color:#ff147b;}

.list-text{ font-size:78%; margin:0.7em 0 1em 0;}
.list-text li{ line-height:1.5; margin:0.4em 0;}
.list-text li:before{
content:" ";
display: inline-block;
font-size:1px;
width:0;
padding:0;
margin:-2px 0 0 0.5em;
overflow:hidden;
border-top:4px solid transparent;
border-right:4px solid transparent;
border-bottom:4px solid transparent;
border-left:4px solid #999999;
}

.bookListMin{}
.bookListMin li{ clear:both; margin:0.2em 0;}
.bookListMin a{ text-decoration:none;}
.bookListMin a:hover .name,
.bookListMin a:hover .author{ text-decoration:underline;}
.bookListMin .date{ float:none; text-decoration:none; color:#777777; margin:0 0 1px 0;}
.bookListMin .name{ font-size:75%;}
.bookListMin .author{ font-size:75%; margin:5px 0 0 0; font-weight:bold;}
.bookListMin .pic{ float:left; width:20%; min-width:45px; max-width:70px; margin:0 10px 0 0;}
.bookListMin .pic img{}

.trim3l{ line-height:1.3; overflow:hidden; max-height:3.6em;}
.trim2l{  line-height:1.3;overflow:hidden; max-height:2.4em;}

.rightContainer .heading .sub{
float:right;
top:6px;
}

.local-box {
float:right;
width:202px;
margin:0 0 0 0;
}
.local-box .tag{
float:left;
margin-right:6px;
}
.local-box h3{
font-size:75%;
margin-top:1px;
}
.local-bnr{
width:200px;
height:110px;
margin:6px 0 11px 0;
background:#f5f5f5;
border:1px solid #bbbbbb;
}
.local-bnr img{
width:100%;
height:100%;
margin:0 0 0 0;
}

/*General Mosaic Styles*/

.mosaic-box {}
.mosaic-backdrop {
display:none;
position:absolute;
top:0;
height:100%;
width:100%;
}
.mosaic-backdrop img{
height:100%;
width:100%;
}

.mosaic-overlay {
display:none;
z-index:5;
position:absolute;
width:100%;
height:100%;
background: url(../img/hongram/dot.png) left top repeat;
opacity:0.3;
}

.moveslide .mosaic-overlay {
bottom:-200px;
height:200px;
opacity:0.4;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.moveslide.half .mosaic-overlay {
bottom:-200px;
height:200px;
opacity:0.4;
}
.moveslide:hover .mosaic-overlay {
opacity:1;
}


.square-box {
float:left;
position:relative;
overflow:hidden;
width:413px;
height:413px;
margin:0 0 10px 0;
background:#f5f5f5;
}
.hover-shadow{
border:1px solid #bbbbbb;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
box-shadow:2px 2px 3px rgba(0,0,0,0.0);
}
.hover-shadow:hover {
box-shadow:2px 2px 3px rgba(0,0,0,0.33);
}

.hover-shadow-dot img{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border:1px solid #bbbbbb;
box-shadow:2px 2px 3px rgba(0,0,0,0.0);
}
.hover-shadow-dot:hover img{
box-shadow:2px 2px 3px rgba(0,0,0,0.33);
opacity:0.8;
}
.hover-shadow-dot:before{
content: " ";
position:relative;
z-index:100;
display:block;
width:100%;
height:100%;
background: url(../img/hongram/dot_white.png) left -1px repeat;
opacity:0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.hover-shadow-dot:hover:before{
opacity:1;
}

.square-box .details{
margin:20px;
padding:8px 10px;
background:rgba(255,255,255,0.87);
height:150px;
overflow:hidden;
color:#000000;
line-height:1.3;
}
.square-box .details{ /* -ie8 */
	background:#ffffff\9;
	opacity:0.85\9;
}
.square-box .details:not(:target){ /* ie9 */
}


.square-box.half {
float: left;
width:200px;
height:200px;
margin:0 0 11px 20px;
}
.square-box.half .details{
margin:10px;
padding:8px 10px;
height:164px;
}



.tag{
display:inline-block;
background:#E95A24;
padding:0 5px;
vertical-align:middle;
color:#fefefe;
font-size:11px;
font-weight:bold;
line-height:1.3;
min-width:26px;
text-align:center;
text-decoration:none;
}
.square-box .tag{
display:inline-block;
background:#FF147B;
}
.tag.bookpass{background:#E95A24;}
.tag.free{background:#E51C24;}
.tag.amazon{background:#fc9b18;}
.date{
float:right;
padding:5px 0;
font-size:11px;
}
.square-box h3{
font-size:110%;
margin:8px 0 0 0;
/*text-align:justify;*/
word-wrap:normal;
word-break:break-all;
text-justify: inter-ideograph;
}
.square-box.half h3{
font-size:86%;
}
.square-box h3:hover{
text-decoration:underline;
}



ul.column2{
width:102%;
}
ul.column2 li{
width:48%;
min-height:26px;
display:inline-block;
}
ul.column2 li a{
width:48%;
}
ul.column2 li img{
max-height:100%;
max-width:99px;/* ie、100%では崩れる*/
}
ul.column2 li a:hover img{
}


ul.storelink li{
height:44px;
display: inline-block;
overflow:hidden;
}
ul.storelink li a{
width:100%;
height:44px;
display: table-cell;
text-align:center;
vertical-align:middle;
}
ul.storelink li img{
vertical-align:middle;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
transition: all 0.25s;
}
ul.storelink li a:hover img{
opacity:0.7;
}

ul.snsIcon{}
ul.snsIcon li img{
max-height:20px;
}
.facebookLike{ position:relative; margin:0; top:-2px;}
.mixiCheck iframe{ margin:3px 0 0 0;}
iframe{/* FB 対策*/
max-height:800px;
overflow:hidden;
}

/* swiper */
.swiper-container {
width: 100.1%;
height:240px;
text-align: center;
padding:0;
margin:0;
cursor:w-resize;
overflow:hidden;
}
.swiper-container .swiper-slide{
height:240px;
vertical-align:bottom;
list-style:none;
text-indent:0;
position:relative;
vertical-align:bottom;
display: inline-table;
}
.pagination {
text-align:center;
margin:10px 0 0 0;
}
.pagination{ /* ie8 */
	display:none\9;
}
.pagination:not(:target){ /* ie9 */
	display: block\9;
}

.swiper-pagination-switch {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 7px;
background: #ddd;
margin-right: 4px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-visible-switch {
background: #aaa;
}
.swiper-active-switch {
background: #aaa;
}

.itemlistTight{
width: 100%;
text-align: left;
padding:0;
margin:0;
}
.itemlistTight li{
width:120px;
height:246px;
vertical-align:bottom;
list-style:none;
text-indent:0;
margin:0;
padding:0 0 0 3px;
position:relative;
display: inline-table;
float:left;
font-size:70%;
}
.itemlistTight li a{
margin:0;
padding:0;
list-style-type:none;
display: inline-table;
color:#222222;
vertical-align:bottom;
line-height:1.3;
}
.itemlistTight li a .pic{
color:#ffffff;
width:104px;
height:150px;
position:relative;
}
.itemlistTight li a .pic img{
width:102px;
min-width:80px;
max-height:144px;
position:absolute;
bottom: 1px;
border:solid 1px #bbbbbb;
}
.itemlistTight li a p{
display:block;
margin:5px 0 0 6px;
width:106px;
text-align:left;

}
.itemlistTight li a p.title{ margin:7px 0 0 6px;max-height:3.7em; overflow:hidden;}
.itemlistTight li a p.writer{ font-weight:bold;max-height:2.5em; overflow:hidden; color:#000000;}


/* tab */
@media projection, screen {
.ui-tabs-hide {
	display: none;
}
}
@media print {
.ui-tabs-nav {
	display: none;
}
}

#tabs{
margin:0 0 0 0;
}

#tabs ul li{
list-style-type:none;
}

.ui-tabs-nav, .ui-tabs-panel {
background: none;
}
.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0;
}
.ui-tabs-nav:after {
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
margin:0 0 0 0;
text-align:center;
}
.ui-tabs-nav a, .ui-tabs-nav a span {
padding: 0;
}
.ui-tabs-nav a span {
padding: 0 0 0 0;
font-weight:bold;

}
.ui-tabs-nav a{
display: block;
margin: 1px 0 0;
padding: 0;
color: #000000;
text-align: center;
text-decoration: none;
white-space: nowrap; 
outline: 0;
}
.ui-tabs-nav a:hover{
}
.ui-tabs-nav .ui-tabs-selected {
position: relative;
z-index: 20;
margin-top: 0;
}
.ui-tabs-nav .ui-tabs-selected a{
}

.ui-tabs-nav a span {
}
.ui-tabs-nav .ui-tabs-selected a span {
}
.ui-tabs-nav .ui-tabs-selected a{
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.ui-tabs-disabled {
opacity: .4;
filter: alpha(opacity=40);
}
.ui-tabs-panel {
padding: 11px 0 0 0;
margin:0 0 0 0;
}
.ui-tabs-loading em {
padding: 0 0 0 20px;
}

* html .ui-tabs-nav {/* ie6 */
display: inline-block;
}
*:first-child+html .ui-tabs-nav  {/* ie7 */
display: inline-block;
}

/* tab custom */
#tabs{
width:620px;
min-height:600px;
margin:-27px 0 0 0;
padding:0;
padding:0 0 50px 0;
}
#tab-ODB-list{
font-size:120%;
width:619px;
height:31px;
overflow:hidden;
border:solid 1px #000000;
border-top:solid 2px #000000;
border-right:none;
}
#tab-ODB-list ul{
width:100%;
display: table;
}
#tab-ODB-list li{
height:30px;
display: table-cell;
border-right:solid 1px #000000;
line-height:30px;
overflow:hidden;
}
#tab-ODB-list li a{
background:#fefefe;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position:relative;
top:0px;
background:#ffffff 1px top repeat;
}

#tab-ODB-list li a{ /* -ie8 */
	margin-top:-1px\9;
	padding-top:1px\9;
}
#tab-ODB-list li a:not(:target){ /* ie9 */
	margin-top:-1px\9;
	padding-top:1px\9;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* ie10 */
	:root #tab-ODB-list li a{
	-webkit-transition: all 0.0s;
	-moz-transition: all 0.0s;
	transition: all 0.0s;
	margin-top:-1px;
	padding-top:1px;
	}
}

#tab-ODB-list li a:hover{
background: #C7D300 url(../img/hongram/dot_green.gif) 1px top repeat;
position:relative;
top:-30px;
}
#tab-ODB-list li.tab2 a:hover{
background: #C7D300 url(../img/hongram/dot_yellow.gif) 1px top repeat;
}
#tab-ODB-list li.tab3 a:hover{
background: #90cdcc url(../img/hongram/dot_blue.gif) 1px top repeat;
}
#tab-ODB-list li.ui-tabs-selected a{
background: #C7D300 url(../img/hongram/dot_green.gif) 1px top repeat;
position:relative;
top:-30px;
}
#tab-ODB-list li.tab2.ui-tabs-selected a{
background: #C7D300 url(../img/hongram/dot_yellow.gif) 1px top repeat;
}
#tab-ODB-list li.tab3.ui-tabs-selected a{
background: #90cdcc url(../img/hongram/dot_blue.gif) 1px top repeat;
}

#tab-ODB-list li .sub{
display:block;
font-size:75%;
letter-spacing:0.2em;
padding:0 20px;
}
#tabs .tab-summary{
background:#000000;
font-size:11px;
color:#ffffff;
padding:7px 10px 6px 10px;
line-height:1.2;
margin:0 0 20px 0;
}
.line_dash{ border-bottom: dashed 1px #ffffff; padding:0;}
#tabs .tab-summary:before{
content:"▲";
display:block;
position:absolute;
margin:-20px 0 0 0;
color:#000000;
font-size:16px;
-moz-transform: scale(1.4, 1);
-webkit-transform: scale(1.4, 1);
-o-transform: scale(1.4, 1);
-ms-transform: scale(1.4, 1);
transform: scale(1.4, 1);
}
#tabs #tab-ODB-1 .tab-summary:before{
margin-left: 56px;
}
#tabs #tab-ODB-2 .tab-summary:before{
margin-left: 238px;
}
#tabs #tab-ODB-3 .tab-summary:before{
margin-left: 472px;
}

.itemlistTight .list-link {
position:relative;
}
.itemlistTight .list-link a{
width:102px;
max-height:144px;
border:solid 1px #bbbbbb;
background:url(../img/hongram/dot.png) left top repeat;
padding:8px 0;
margin:0 0 0 6px;
position:absolute;
bottom:/*96px*/ 136px;
}
.itemlistTight .list-link a:before{
content:" ";
background:url(../img/hongram/icon_list.gif) left top no-repeat;
display:block;
margin:6px auto 10px;
width:19px;
height:13px;
float:none;
}
.itemlistTight .list-link a:hover:before{
text-decoration:none;
}
.itemlistTight li.list-link a p{
text-align:center;
padding:0;
margin:0;
width:100px;
}

/* pick up */

.picup-content{
clear:both;
margin:-3px 0 0 0;
background:#fefefe;
}
.picup-content dl{
margin:0 0 28px 0;
}

.picup-content .coma{
width:100%;
margin:0 auto 5px auto;
text-align:center;
}
.picup-content .coma a{
display:block;
background:#111111 url(../img/hongram/dot_white.png) left 0px repeat;
border:solid 3px #000000;
}
.picup-content .coma a img{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
max-width:100%;
max-height:170px;
border:none;
display:block;
margin:0 auto;
text-align:center;
}
.picup-content .coma a:hover img{
box-shadow:0px 0px 6px 2px rgba(255,255,255,0.8);
}


.picup-content .notice{  font-size:12px; color:#999999; font-weight:bold; line-height:1; padding-top:2px; vertical-align: middle;}
.picup-content .bg-black{ font-size:12px; background:#000; color:#fff; padding:2px 4px;}
.picup-content .bg-orange{ font-size:12px; background: #FFB500; color:#fff; padding:2px 4px;}
.picup-content .bg-skygreen{ font-size:12px; background: #00bbcc; color:#fff; padding:2px 4px;}
.picup-content .bg-skyblue{ font-size:12px; background: #0088dd; color:#fff; padding:2px 4px;}
.picup-content .red{ color:#ff0000; padding:0 4px; }
.picup-content .detail{ display:table; position:relative;z-index:1;background:#ffffff; border:solid 1px #ababab; width:99.5%; min-height:167px;
box-shadow: 3px 3px 0px rgba(0,0,0,1.00); line-height:1.7; margin:2px 0 0 0;}
.picup-content .detail:before{ content:"　"; display:block; background:url(../img/hongram/arrow_fukidasi.gif) right bottom no-repeat; position: absolute;
width:90%; height:17px; margin:-17px 0 0 0;vertical-align:middle;}
.picup-content .detail .detailInner{display:table-cell; vertical-align: middle;}
.picup-content .detail .detailInner:hover{text-decoration:none; color:#444444;}
.picup-content .detail h3{ font-size:95%;padding:15px 15px 0 15px; margin:0 0 10px 0; text-indent:-7px; line-height:1.5; overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;}
.picup-content .detail h3 .sub{ font-size:80%;}
.picup-content .detail p{ font-size:75%; padding:0 15px 15px 15px;}

a.btnOtameshi{ display:block; width:130px; text-align:right; float:right; padding:10px 0 10px 0;}
a.btnOtameshi img{ width:100%; padding:0;}


.picup-content .coma{
width:48%;
margin:0 3.5% 30px 0;
float:left;
display:table;
min-height:236px;
}
.picup-content .coma a{
min-height:236px;
display:table-cell;
vertical-align:middle;
}
.picup-content .coma a img{
max-width:100%;
max-height:226px;
}
.picup-content .detail{width:48%; min-height:213px;}
.picup-content .detail:before{ background:url(../img/hongram/arrow_fukidasi.gif) left top no-repeat;
width:17px; height:17px; margin:80px 0 0 -17px;}


/* how to otameshi */

.how-to-otameshi{
display:block;
position:relative;
margin:50px 0 0 0;
border: dotted 2px #666666;
border-left:none;
border-right:none;
padding:10px 0;
}
.how-to-otameshi img{ margin:0 auto; vertical-align:middle;}
.how-to-otameshi:after{
content:"　";
display:block;
position:absolute;
left:49%;
bottom:-18px;
width:18px;
height:22px;
background:url(../img/hongram/arrow_dot_down.gif) center top no-repeat;
}

/* big-bnr (1culmn) */
.big-bnr{
text-align:center;
padding:40px 0 0 0;
}
.big-bnr a img{
border:none;
}
a.btnEbookPresent{
display:block;
margin:0 auto;
width:556px;
height:106px;
background:url(../img/hongram/bnr_ebook-present_wide_over.gif);
}
a.btnEbookPresent:hover img{
opacity:0;
}

/*---------------------- footer ----------------------*/

#footer{
clear:both;
border-top:solid 1px #000000;
text-align:left;
font-size:100%;
width:100%;
background:#F4F4F4 url(../img/hongram/footer_dot.png) center bottom repeat-x;
}

#footer a:hover{
text-decoration:none;
color:#777777;
}
#footerInner{
position:relative;
padding:20px 0 0 0;
margin:0 auto;
width:96%;
max-width:860px;
}

#copy{
text-align:center;
color:#777777;
padding:40px 0 20px 0;
font-size:70%;
}

.pageTopBtn{
position:absolute;
top:-17px;
right:0px;
text-align:center;
font-size:9px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
display:block;
text-align:center;
}
.pageTopBtn a:before{
content: url(../img/hongram/arrow_top.gif);
background:url(../img/hongram/dot.png) 1px top repeat #ffffff;
padding:3px 5px 5px 5px;
border: solid 1px #000000;
vertical-align: middle;
display:block;
width:20px;
height:22px;
margin:0 15px 5px 15px;

}
.pageTopBtn:hover{
top:-26px;
}
.pageTopBtn:hover a:before{
border: solid 1px #bbbbbb;
}
.pageTopBtn:hover a{
padding:0 0 20px 0;
}

.footerNav{}
.footerNav dl{ float:left; width:25%; padding:20px 0 15px 0;}
.footerNav dt{ font-size:65%; font-weight: normal; padding:0 0 0 4px;}
.footerNav dl.ebook dt{ color:#31AAA4;}
.footerNav dl.paperbook dt{ color:#B941CE;}
.footerNav dl.website dt{ color:#FFC408;}
.footerNav dl.company dt{ color:#ED3926;}

.footerNav dd{ font-size:80%; line-height:1.2;}
.footerNav dd a{ display:block; padding:12px 0 0 4px;}
.footerNav dd a:before {
content: " ";
display: inline-block;
font-size: 1px;
width: 0;
padding: 0;
margin: -2px 0 0 0.2em;
overflow: hidden;
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #999999;
}
.footerNav dd a small{ display:block; font-size:80%; color:#999999; padding:2px 0 0 10px; text-decoration:none;}
@media all and (max-width: 720px){
.footerNav dl{min-width:150px; width:50%;}
}


/* ---------- ebook-present ---------- */

.present{ min-width:320px;}
.present #header{ border-bottom:none;}
.present .logo{ background:none; text-align:center; width:100%; padding:10px 0 15px 0; margin:0 auto;}
.present .logo img{ display:block; margin:0 auto; width:100%; max-width:804px; height:auto;}
.present .logo img{ max-width:804px;}
.present .logo .min{ max-width:580px; max-height:222px;}
.present .summary{ position:static; width:100%; text-align:center; font-size:18px; line-height:40px; padding:0; margin:0 0 50px 0;}
.present .snsIcon{ display:block;  padding:0 0 15px 0;}
.present .snsIcon li{ display:inline-block;}
.present #main{ text-align:center; background:url(../img/hongram/stripe_blue.gif) 0px 9px repeat; max-width:900px; margin: auto;}

.btnBlue{ padding:0 0 90px 0;}
.btnBlue a{
color:#ffffff;
text-align:center;
text-decoration:none;
display:inline-block;
min-width:240px;
font-weight:bold;
font-size:28px;
padding:15px 10px 13px 10px;
border-radius:28px;
background: #56beff;
background: -moz-linear-gradient(top,  #56beff 0%, #0089d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56beff), color-stop(100%,#0089d3));
background: -webkit-linear-gradient(top,  #56beff 0%,#0089d3 100%);
background: -o-linear-gradient(top,  #56beff 0%,#0089d3 100%);
background: -ms-linear-gradient(top,  #56beff 0%,#0089d3 100%);
background: linear-gradient(to bottom,  #56beff 0%,#0089d3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#0089d3',GradientType=0 );
box-shadow: 2px 2px 10px rgba(0,50,100,0.5);
text-shadow:0px -2px 0px rgba(0,0,0,0.3);
}
.btnBlue a:hover{background: #56beff;box-shadow: none;text-shadow:none;}

.boxBlue{ border: solid 2px #004090; background: rgba(255,255,255,0.6); width:690px; padding:20px; margin:0 auto 63px auto;}
.boxBlue .title{ margin:-34px 0 25px 0;}
.present .boxBlue a{ color:#006fb4; text-decoration:underline;}

.boxBlue .listFlow{display: table; width:100%;}
.boxBlue .listFlow li{ list-style-type:none; display: table-cell; font-weight:bold; font-size:110%; width:33.3%;}
.boxBlue .listFlow li img{ display:block; margin:15px auto 25px auto;}

.boxBlue .listDisc { margin:0 0 0 2.8em; font-size:80%; line-height:1.5; color:#666666;}
.boxBlue .listDisc li { list-style-type:disc; text-align:left;}

.hdPink{ text-align:center; font-size:28px; font-weight:bold; color:#ff14bb; margin: 0 0 27px 0; text-shadow:4px 0px 0px rgba(255,255,255,1),-4px 0px 0px rgba(255,255,255,1);}

.postLink dl{ display:block; width:720px; margin:0 auto 32px auto; background: right bottom no-repeat;text-align:left;}
.postLink dt,
.postLink dd{text-align:left;}
.postLink dd{line-height:1.5; width:220px; padding:10px 0 20px 20px; font-weight:bold;}
.postLink dl.web{ background-image:url(../img/hongram/pic_postlink_web.gif); min-height:234px;}
.postLink dl.twitter{ background-image:url(../img/hongram/pic_postlink_twitter.gif); min-height:278px;}
.postLink dl.facebook{ background-image:url(../img/hongram/pic_postlink_facebook.gif); min-height:350px;}

.present .notice{ width:680px; margin: 0 auto 50px auto;}
.present .notice dt{ font-family:serif; font-size:18px; line-height:40px; color:#2c4298;}
.present .notice dd{ font-size:80%; line-height:1.8; text-align:left;}

@media all and (max-width: 720px){
.present *{ max-width:100%;}
.present .logo{ padding:0 0 15px 0;}
.present .logo img{ width:94%;}
.present .snsIcon{text-align: center; padding:0 10px 10px 10px;}
.present .snsIcon li{ padding:6px 0 0 0;}
.present .summary{ font-size:14px; width:auto; line-height:25px;margin:10px 5px 25px 5px;}
.present .summary .note{ font-size:75%; line-height:1.5;}
.present #main{ width: auto; padding:0 10px; background-size:25px;}
.btnBlue{ padding:0 0 50px 0;}
.btnBlue a{ min-width:160px;font-size:20px;box-shadow: 2px 2px 8px rgba(0,50,100,0.5);padding:10px 10px 10px 10px;}
.present .boxBlue{width: auto; padding:10px;margin:0 auto 35px auto;}
.boxBlue .title{ margin:-20px 0 10px 0;}
.boxBlue .title img{ height:20px;}
.boxBlue .listFlow{display: block;}
.boxBlue .listFlow li{ clear:both;display: block; width:auto; font-size:85%; text-align:left; padding:10px;}
.boxBlue .listFlow li img{ display:block; float: right;margin:0; width:45%; max-width:166px;}
.boxBlue .listDisc { clear:both;margin:0 0 0 1.8em; padding:15px 0 0 0 ;font-size:70%; line-height:1.5; color:#666666;}
.hdPink{ font-size:19px; margin: 0 0 8px 0;}
.postLink dl{width:auto; margin:0 auto 25px auto; background: center bottom no-repeat; background-size:280px auto;text-align:left;}
.postLink dt{text-align: center;}
.postLink dt img{height:54px;}
.postLink dd{line-height:1.5; width:auto; padding:10px 15px 20px 15px; font-weight: normal; font-size:90%;}
.postLink dl.web{min-height: 1em; padding:10px 0 144px 0;}
.postLink dl.twitter{min-height: 1em; padding:10px 0 180px 0;}
.postLink dl.facebook{min-height: 1em; padding:10px 0 230px 0;}
.present .notice{ width:auto; margin: 0 10px 40px 10px;}
.present .notice dt{font-size:17px;}
.present .notice dd{ font-size:70%;}
.present #footer{ font-size:70%;}
.present #copy{padding:0 0 8px 15px;}
.present .localNav{ clear:both;}
.present .localNav li{margin-left:5px;}
.present #footerInner{min-height:62px;}
}