h1 { font-family: 'Roboto', sans-serif !important; text-shadow: 1px 2px 3px #808080;  line-height: 1.25em !important; }

/* #mainImg
================================================ */
#ep #mainImg { background: url("../img/blog/bg_cv01_sp1.jpg") no-repeat top center/cover; margin-top: 0; padding-top: 50px; }

#ep #mainImg .inner { position: static; }

#ep #mainImg .inner:before { display: none; }

@media all and (min-width: 600px) { #ep #mainImg { background: url("../img/blog/bg_cv01_pc1.jpg") no-repeat top center/cover; margin-top: 95px; padding-top: 0; }
  #ep #mainImg .inner:before { display: none; } }

/*  single
---------------------------------------- */
#single .inner { padding-top: 50px; padding-bottom: 25px; }

#single .return { margin-top: 40px; padding: 25px 0; background-color: #eeeeee; }

#single .return .btn { margin-top: 0; }

#single .tit { margin-top: 20px; margin-bottom: 20px; }
#single .txt { margin-bottom: 10px; }
#single .subTit { margin-bottom: 5px; font-size: 1.5rem; font-weight: 700; }

@media all and (min-width: 600px) { #single .inner { padding-top: 72px; }
  #single .return { margin-top: 80px; }
  #single .tit { margin-top: 30px; margin-bottom: 30px; }
  #single .txt { margin-bottom: 15px; }
  #single .subTit { margin-bottom: 5px; font-size: 2rem; }
  #single .return .btn { max-width: 350px; }
 }


/*  装飾
================================================== */
.mgr-3em{margin-right : 3em;}



.back {text-align: left; float: left; }
.next {text-align: right; }

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

.mod_img_box02_txt { font-size: 1.1em; }
.mod_single01_content p { font-size: 1.1em; }



/*  log
---------------------------------------- */

.logbox {
    padding: 0.25em 1em;
    margin: 2em 0 ;
    color: #fff;
    background: #666;/*背景色*/
}

@media all and (min-width: 600px) { .logbox {
    padding: 1em 2em;
    margin: 2em 10em;
}}
.logbox p {
    margin: 0; 
    padding: 0;
}

.logbox-midasi {
    margin-left:-1em; 
    margin-top:-0.3em; 
    vertical-align: middle; 
    background-color:#eee; 
    color:#666; 
    font-weight: bold; 
    padding:3px 10px;
    text-align:center; 
    width: 50%;
}

@media all and (min-width: 600px) {
 .logbox-midasi {
    margin-left:-2em; 
    margin-top:-1em; 
    vertical-align: middle; 
    background-color:#eee; 
    color:#666; 
    font-weight: bold; 
    padding:3px 10px;
    text-align:center; 
    width: 28%;
}}



/*  吹き出し
---------------------------------------- */
.balloon_l, .balloon_r{
  margin: 10px 0;
  display:flex;
  justify-content: flex-start;
  align-items: flex-start; /*縦位置を上揃え*/
/*   align-items: center; */ /*縦位置を真ん中揃え*/
}
.balloon_r{
  justify-content:flex-end;
}
.faceicon img{
  width: 110px; /*任意のサイズ*/
  height: auto;
}

/* 左の画像の下のテキスト */
.faceicon-description_l {
  padding: 5px 0 0;
  text-align: center;
  position: relative;
}

/* 右の画像の下のテキスト */
.faceicon-description_r {
  padding: 5px 0 0;
  text-align: center;
  position: relative;
}
.balloon_r .faceicon{
  margin-left:25px;
}
.balloon_l .faceicon{
  margin-right:25px;
}
.balloon_r .faceicon{
  order:2 !important;
}
.says {
  max-width:700px; /*最大幅は任意*/
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 25px;
  border-radius: 20px;
  box-sizing:border-box;
  margin:0 !important;
  line-height:1.5;
 font-size: 1.1em; 
/*   align-items: center; */
}
.says_l {
  background: #f2f3f7; /*左の吹き出し*/
}
.says_r {
  background: #fffacd;/*色は任意*/
}
.says p{
  margin:8px 0 0 !important; 
}
.says p:first-child{
  margin-top:0 !important;
}
.says:after {
  content: "";
  position: absolute;
  border: 10px solid transparent;
/*   margin-top:-3px;  */
}
.balloon_l .says:after {
  left: -26px;
  border-right: 22px solid #f2f3f7; /*左の吹き出し*/
}
.balloon_r .says:after {
  right: -26px;
  border-left: 22px solid  #fffacd; /*右の吹き出し*/
}



/*  用意するもの
---------------------------------------- */

.tbl-r02 table {
  margin: 10px auto;
}
.tbl-r02 th {
    width: 24%;
  padding: 5px 10px;
}
.tbl-r02 td {
  padding: 5px 10px;
  font-size: 1.1em;
}
 
@media screen and (max-width: 600px) {
  .tbl-r02 {
    width: 100%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
  padding: 5px 10px;
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}



/*  ポイント
---------------------------------------- */

.point {
    background: #e5f0f7;
    padding: 10px;
    display: inline-block;
}
 
.point p {
    font-weight: bold;
color:#016cb1;
}

.pot {
    padding: 0.25em 1em;
    margin: 2em 0 ;
    background: #e5f0f7;/*背景色*/
}

@media all and (min-width: 600px) { .pot {
    padding: 1em 2em;
    margin: 2em 10em;
}}
.pot p {
    margin: 0; 
    padding: 0;
}



/*  レスポンシブ対応の横スクロール
---------------------------------------- */

.scroll-table {
  overflow: auto;
  white-space: nowrap;
}

@media all and (min-width: 600px) { .scroll-table {
  overflow: visible;
  white-space: nowrap;
}
}


/*  コード見出し
---------------------------------------- */
.code-midasi {
  color:#0FF;
  background-color:#0f0f0f;
  padding: 0.5em 3em;
border-radius: 8px;
    }




/*画像2つ横並び
---------------------------------------- */
div#double-img {
	margin: auto;
	text-align: center;
}
div#left-img {
	display: inline-block;
	padding: 10px 30px;
}
div#right-img {
	display: inline-block;
	padding: 10px 30px;
}



/*前後の記事
---------------------------------------- */

.prev-next-link a {
  border-bottom: 1px #ddd solid;
  display: block;
  text-decoration: none;
  padding: 10px 40px;
  color: #016cb1;
  font-size: 1.1em;
}
.prev-next-link a:hover {
  color: #0bd;
}
.prev-next-link a:first-child {
  border-top: 1px #ddd solid;
}
.prev-next-label {
  font-size: .9em;
  color: #666;
  margin-bottom: 5px;
}

/* Arrows */
.prev-link {
  background: url(../../img/blog/arrow-prev.png) no-repeat 10px center;
}
.next-link {
  background: url(../../img/blog/arrow-next.png) no-repeat right 10px center;
}
.prev-link,
.next-link {
  background-size: 16px 28px;
}

/* Larger devices */
@media ( min-width: 600px) {
  .prev-next-link {
    display: flex;
  }
  .prev-next-link a {
    flex: 1;
  }
  .prev-next-link a,
  .prev-next-link a:first-child {
    border: none;
  }
  .next-link {
    text-align: right;
  }
}