@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Asap+Condensed:600');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}

ol, ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption, th, td{font-weight:normal;text-align:left;}
blockquote:before, blockquote:after,q:before, q:after{content:"";}
blockquote, q{quotes:"" "";}
a img{border:0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}

body{
color:#555;
font-size:13px;
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ＭＳ Ｐゴシック",sans-serif!important;
line-height:1.5;
-webkit-text-size-adjust:100%;
background-color:#f1f1f1;
}

a{color:#6caefe;text-decoration:none;}
a:hover{color:#488fdd;}
a:active, a:focus {outline:0;}

#wrapper{
margin:0 auto;
padding:1%;
width:98%;
position:relative;
background-color: #fff;

}

.inner{
margin:0 auto;
width:100%;
}

#header h1{
padding:10px 0 ;
font-size:22px;
font-weight:bold;
line-height: 2rem;
text-align: center;
}

#mainBanner{
clear:both;
margin:25px auto 40px;
padding:0;
position:relative;
text-align: center;
}
#mainBanner .inner{position:relative;}

#mainBanner img{
max-width:100%;
height:auto;
}

section.content article{
padding:30px 20px 20px;
margin-bottom:10px;
overflow:hidden;
}

section.toppage article,section.content .archive{border:0;}

section.content p{line-height: 2rem; font-size: 16px;}

section.content img{
max-width:90%;
height:auto;
}

.b{font-weight: bold;}
.fo20 {font-size: 20px;}
.fo24 {font-size: 24px;}
.d_m{color: #8b008b}
.red{color: #ff0000}
.pink{color: #ff0080}
.under {background: linear-gradient(transparent 50%, yellow 50%);}
.mt20{margin-top:20px!important;}
.mt40{margin-top:40px!important;}
.t_r{text-align: right;}


#copyright{
clear:both;
padding:20px 0 10px 0;
text-align:center;
font-style:normal;
font-size:10px;
color:#555;
}

.post p{padding-bottom:10px; font-size: 100%;}
.post ul{margin:0 0 10px 10px;}
.post ul li{margin-bottom:5px;padding-left:15px;background:url(images/bullet.png) no-repeat 0 8px;}
.post ol{margin:0 0 10px 30px;}
.post ol li{list-style:decimal;}

.post h1{
margin:20px 0;
padding:5px 0;
font-size:150%;
color:#000;
border-bottom:3px solid #cf6a88;
}

.post h2{
margin: 10px 0;
font-size: 130%;
color: #333;
border-bottom: 2px solid #cf6a88;
background-color: #ffd7d7;
padding: 0.75rem;
line-height: 1.75rem;
}

.post h3{
margin:10px 0 25px 0;
padding:10px 0 10px 0;
font-size:130%;
font-weight:normal;
border-bottom:2px solid #ddd;
}
.post img{max-width:100%;height:auto;}

/* PC */
@media only screen and (min-width:960px){
#header{width:960px;padding:0;margin:0 auto;background-color: #fff;}
#wrapper{width:960px;clear:both;padding:20px 0;}
}

@media only screen and (max-width:959px){
	*{
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
         -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;
	}
#header{padding-left:10px;}
#footer .grid,#footer ul.footnav{float:none;width:100%;text-align:center;}
}

@media only screen and (max-width:640px){
#header{height:auto;}
#header h1{text-align:center;}
}

@media only screen and (max-width:480px){
	#mainBanner h2,#mainBanner p{font-size:80%;}
}

.wrapper {
  position: relative;
  max-width: 420px;
}
.heading {
  position: absolute;
  bottom: 5px;
  left: 15px;
  color: #FFF;
}
video { max-width: 100%;}