@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  color: #000;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

body {
  font-family:"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'palt';
  -webkit-font-feature-settings: 'palt';
  letter-spacing: 0.02em;
}

img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}

.fade-txt {
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.catchphrase {
  width: 100%;
  min-width: 1150px;
  padding: 10px 0;
  background: #181818;
}

.catchphrase-inner {
  justify-content: center;
  align-items: center;
  webkit-justify-content: space-between;
  justify-content: space-between;
  display: -webkit-flex;
  display: flex;
  /* -webkit-flex-wrap: wrap; */
  /* flex-wrap: wrap; */
  max-width: 1150px;
  width: 100%;
  margin: 0 auto;
}

.catchphrase-txt {
  text-align: left;
  line-height: 1;
  color: #fff;
  font-size: 14px;
}

.catchphrase-sns {}

.catchphrase-sns li {
  display: inline-block;
  padding: 0 0 0 15px;
  vertical-align: middle;
}
.catchphrase-sns li a {
  display: block;
}
.catchphrase-sns_facebook svg {
  width: 13px;
  height: auto;
}
.catchphrase-sns_facebook a:hover .fill {
  fill:#3b5998;
}
.catchphrase-sns_twitter svg {
  width: 23px;
  height: auto;
}
.catchphrase-sns_twitter a:hover .fill {
  fill:#00acee;
}
.catchphrase-sns_mail svg {
  width: 25px;
  height: auto;
}
.catchphrase-sns_mail a:hover .fill {
  fill:#be4c4c;
}

.fill { fill: #fff; }

#header {
  min-width: 1150px;
  border-bottom: 1px solid #181818;
  margin: 15px 0 25px;
  padding: 0 0 15px;
}

#header a {
  text-decoration: none;
}

#header .inner {
  justify-content: center;
  align-items: center;
  webkit-justify-content: space-between;
  justify-content: space-between;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 1150px;
  width: 100%;
  margin: 0 auto;
}

#header .header-ttl {}
#header .header-ttl span {
  display: none;
}
#header .header-ttl a {
  display: block;
  position: relative;
  transition: .5s linear;
  -webkit-transition: .5s linear;
  -moz-transition: .5s linear;
  z-index: 2;
}

#header .header-nav {
  display: table;
  font-size: 18px;
}

#header .header-nav li {
  display: table-cell;
  padding: 5px 20px;
  font-size: 14px;
  font-weight: bold;
  border-left: 1px solid #181818;
}

#header .header-nav li:first-child {
  border-left: none;
}
#header .header-nav li:last-child {
  padding: 5px 0 5px 20px;
}

#header .header-nav li a {
  display: block;
  position: relative;
  color: #181818;
}

#header .header-nav li a:hover {
  color: #8f8f8f;
}

#header .header-nav li a:after {
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: -10px;
  opacity: 0;
  content: '';
  background-color: #181818;
  -webkit-transition: opacity 0.5s, transform 0.3s;
  -o-transition: opacity 0.5s, transform 0.3s;
  transition: opacity 0.5s, transform 0.3s;
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
}

#header .header-nav li a:hover:after {
  opacity: 1;
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

#header .drawer-wrap {
  display: none;
}

#header .header-ttl a svg {
  width: 150px;
  height: auto;
}

@keyframes shiny {
  0% {
    left: -30%;
  }
  20% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

@-webkit-keyframes shiny {
  0% {
    left: -30%;
  }
  20% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

@-moz-keyframes shiny {
  0% {
    left: -30%;
  }
  20% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

@keyframes fadeIn {
    0% {opacity: 0}
    50% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    50% {opacity: 0}
    100% {opacity: 1}
}

.scroll-header {
  display: none;
}

.content {
  justify-content: center;
  align-items: flex-start;
  webkit-justify-content: space-between;
  justify-content: space-between;
  display: -webkit-flex;
  display: flex;
  position: relative;
  width: 1150px;
  margin: 0 auto;
  padding: 0 0 100px;
  /* overflow: hidden; */
}

.content .section-l-wrap {
  /* float: left; */
  width: 800px;
}

.content .section-r-wrap {
  /* float: right; */
  width: 300px;
  line-height: 1.5;
}

.content .section-r-wrap .box {
  margin: 0 0 30px;
/*  padding: 0 0 20px;*/
  font-size: 16px;
/*  border-bottom: 2px solid #e9e9e9;*/
}

.content .section-r-wrap .box._last {
  border: none;
}

.content .section-r-wrap .box h3 {
  line-height: 1;
  margin: 0 0 15px;
  padding: 10px;
  font-weight: bold;
  border-top: solid 1px #e9e9e9;
  border-bottom: solid 1px #e9e9e9;
  background:#f6f6f6;
}

.content .section-r-wrap .box-prof {
  margin: 0 0 10px;
  text-align: center;
}

.content .section-r-wrap .box-prof dt {
  margin: 0 0 5px;
}

.content .section-r-wrap .box-prof dt img {
  border-radius: 50%;
  height: 165px;
  width: 165px;
  padding: 5px;
  background: #eee;
}

.content .section-r-wrap .box-prof dd {
  text-align: left;
  font-size: 14px;
  line-height: 1.8;
}

.content .section-r-wrap .box .box-ad {
  line-height: 0;
}
.content .section-r-wrap .box .box-ad:nth-child(n + 3) {
  margin: 20px 0 0;
}

.article-list {
  justify-content: center;
  webkit-justify-content: space-between;
  justify-content: space-between;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 20px 0;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}

.article-list:first-child {
  border-top: 1px solid #ccc;
}

.article-list .article-left {
  width: 240px;
  height: 160px;
  margin: 0 25px 0 0;
}

.article-list .article-left .post-thumbnail {
  display: block;
  line-height: 0;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.article-list .article-left .post-thumbnail:hover {
  opacity: 0.7;
}

.article-list .article-left .post-thumbnail img {
  width: 100%;
  height: auto;
}

.article-list .article-right {
  position: relative;
  width: 535px;
  min-height: 160px;
}

.article-list .article-right .article-right_tit {
  line-height: 1.5;
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: bold;
}

.article-list .article-right .article-right_tit a {
  text-decoration: none;
  color: #434343;
}

.article-list .article-right .article-right_tit a:hover {
color: #3ebed5;
}

.article-list .article-right .post-categories {
  margin: 0 0 50px;
  font-size: 16px;
}

.article-list .article-right .post-categories li { }
.article-list .article-right .post-categories li:before {
  content: '/';
  padding: 0 5px 0 0;
  color: #3ebed5;
}

.article-list .article-right .post-categories li:first-child:before {
  display: none;
}

.article-list .article-right .article-right_data {
  position: absolute;
  bottom: 0;
  font-weight: bold;
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.blog-notice {
  line-height: 1.5;
  padding: 0 0 15px;
  font-size: 14px;
  font-weight: bold;
}

.page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.page-top a {
  background: #666;
  text-decoration: none;
  color: #fff;
  width: 100px;
  padding: 30px 0;
  text-align: center;
  display: block;
}

footer {
  min-width: 1200px;
  padding: 25px 0 30px;
  color: #fff;
  background: #181818;
}

footer a {
  color: #fff;
}
footer a:hover {
  text-decoration:none;
}

footer .inner {
  justify-content: center;
  align-items: center;
  webkit-justify-content: space-between;
  justify-content: space-between;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 25px;
}

footer .inner .footer-logo {
  width: 120px;
}

footer .inner .footer-logo a {
  display: block;
  line-height: 0;
}


footer .inner .footer-link {
  font-size: 14px;
}

footer .inner .footer-link li {
  display: inline-block;
  margin: 0 0 0 15px;
}
footer .inner .footer-link li:first-child {
  margin: 0;
}
footer small {
  font-size: 12px;
}
footer .copyright {
  display: block;
  text-align: center;
}

/*共通
===========================*/
.pc-none { display: none; }
.sp-none { display: block; }


/*汎用
===========================*/
.is-mb10 {
  margin-bottom: 10px;
}
.is-mb20 {
  margin-bottom: 20px;
}
.is-mb30 {
  margin-bottom: 40px;
}

.is-oh {
  overflow: hidden;
}

.is-center {
  text-align: center;
}


/*カテゴリー
===========================*/
.post-categories li {
  display:inline-block;
}
.post-categories li a {
  color: #3ebed5;
  text-decoration: none;
}
.page-header {
  width: 1150px;
  margin: 0 auto;
}
.page-header .page-title {
  padding: 0 0 25px;
  font-size: 14px;
}

/*サイド
===========================*/
.widget {
  margin: 20px 0;
  font-size: 14px;
}

.widget a {
text-decoration:none;
}
.widget a:hover {
  color: #3ebed5;
}
.widget_search { }
.widget_recent_entries { }
.widget_archive { }

.widget-title {
  margin: 0 0 10px;
  padding: 10px;
  border-top: solid 1px #e9e9e9;
  border-bottom: solid 1px #e9e9e9;
  background:#f6f6f6;
  font-weight: bold;
}
.widget li {
  margin: 5px 0 0;
  font-size: 13px;
}
.widget li:first-child {
  margin: 0;
}

#search-2 input {
  width: 230px;
  padding: 6px 20px 6px 8px;
  font-size: 14px;
}

#search-2 .search-submit {
  padding: 6px 8px;
  font-size: 14px;
  background:#fafafa;
  cursor: pointer;
}

.widget .tagcloud a {
  text-decoration: none;
  display: inline-block;
  border: 1px solid #e9e9e9;
  padding: 3px 4px;
  margin: 0 2px 10px 0;
  font-size: 12px;
}


/*Ranking
===========================*/
.rank {}

.rank-list {
  position: relative;
  margin: 0 0 10px;
}

.rank-no {
  position: absolute;
  line-height: 1;
  padding: 3px 7px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background: #000;
}

.rank-link {
  webkit-justify-content: space-between;
  justify-content: space-between;
/*  align-items: center;*/
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  text-decoration: none;
}

.rank-link__thum {
  width: 30%;
}
.rank-link__thum img {
  width: 100%;
}

.rank-link__text {
  width: 66%;
  font-size: 13px;
  font-weight: bold;
}


/*投稿ページ
===========================*/
#single .section-l-wrap {
  padding: 45px 35px 25px;
  border: 1px solid #c1c1c1;
}

#single .entry-title {
  line-height: 1.5;
  margin: 0 0 35px;
  font-size: 28px;
  font-weight: bold;
  animation: fadeIn 1.5s linear 0s 1 normal;
  -webkit-animation: fadeIn 1.5s linear 0s 1 normal;
}
#single .post-thumbnail {
  display: none;
}
#single .post-thumbnail img {
  width: 480px;
}

#single .entry-content {
  line-height: 1.6;
  padding: 0 0 60px;
  font-size: 16px;
}

#single .entry-content .indent {
  padding-left:1em;
  text-indent:-1em;
}

#single .entry-content .notice {
  font-size: 15px;
}
#single .entry-content p.notice {
  margin: 0 0 0.5em;
}

/*#single .entry-content .list-title {
  margin: 60px 0 30px;
  padding: 16px 20px;
  border-left: 5px solid #4c71af;
  font-weight: bold;
  font-size: 18px;
  background: #f6f6f6;
  line-height: 1.5;
}*/

.list-title {
  line-height: 1.5;
  margin: 45px 0 20px;
  background: #2f2e2e;
  padding: 10px 15px;
  color: #fff;
  font-size: 1.875vw;
  font-weight: bold;
  letter-spacing: 0.06em;
}

#single .entry-content .tit-02 {
  margin: 40px 0 25px;
  padding: 10px 15px;
  border-top: solid 1px #c1c1c1;
  border-bottom: solid 1px #c1c1c1;
  font-size: 20px;
  font-weight: bold;
}

#single .entry-content .tit-03 {
  margin: 3em -1.25em 0;
  padding: 1em 0 .9em ;
  font-size: 120%;
  border-top: 4px solid #4CAF50;
  background: #f2f2f2;
  border-bottom: 1px solid #ddd;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
}
#single .entry-content .tit-04 {
  margin-top: 2.5em;
  margin-bottom: .5em;
  padding-bottom: .3em;
  border-bottom: solid 1px #eee;
  font-size: 1.6em;
  line-height: 1.225;
}
#single .entry-content .tit-05 {
  margin: 0 0 10px;
  padding: 0 0 5px;
  border-bottom: solid 1px #c1c1c1;
  font-size: 20px;
  font-weight: bold;
}

#single .entry-content p {
  margin: 0 0 20px;
  line-height: 2;
  letter-spacing: 0.4px;
}

#single .entry-content p strong,#single .entry-content p em {
  font-weight: bold;
}

#single .entry-content a {
  color: #339fb3;
  word-break: break-all;
}

#single .entry-content .table-column_03 {
  width: 100%;
  border: 1px solid #c1c1c1;
}
#single .entry-content .table-column_03 tr {
  border-top: 1px solid #c1c1c1;
}
#single .entry-content .table-column_03 tr:first-child {
  border: none;
}

#single .entry-content .table-column_03 td,
#single .entry-content .table-column_03 th {
  padding: 10px 15px;
}

#single .entry-content .table-column_03 th {
  font-weight: bold;
}

#single .entry-content .table-column_03 .cell-01,#single .entry-content .table-column_03 .cell-02 {
  border-right: 1px solid #c1c1c1;
}

#single .entry-content .blockquote {
  position: relative;
  padding:35px 20px 30px 45px;
  color: #666;
  background: #f6f6f6;
  font-size: 16px;
}
#single .entry-content .blockquote:before {
  color: #ccc;
  content: "“";
  font: 80px/1 Georgia,serif;
  position: absolute;
  top: 10px;
  left: 10px;
}

#single .entry-content .blockquote .blockquote-txt {
  word-wrap:break-word;
  font-size: 12px;
}

#single .entry-content .jq-tag {
  color: #006661;
}

#single .entry-content .img-adjust01 {
  width: 65%;
  margin: 0 auto;
}

#single .entry-content .link-demo {
  line-height: 1.8;
  margin:0;
  padding: 0 0 25px;
  font-size: 24px;
  font-weight: bold;
}
#single .entry-content .link-demo.m--first {
  padding: 5px 0;
}

#single .entry-content .link-demo.m--first + .link-demo {
  padding: 0 0 5px;
}

#single .entry-content .link-demo.m--bottom {
  padding: 0 0 10px;
}

#single .entry-content .link-demo a {
  text-decoration: none;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

#single .entry-content .link-demo a:hover {
  color: #337986;
}

#single .entry-content .link--min-technique {
  margin: 0 0 30px;
  font-size: 18px;
}

#single .entry-content .link--min-technique a {
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

#single .entry-content .link--min-technique a:hover {
  text-decoration: none;
  opacity: 0.7;
}

#single .external-link:after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 0 0 5px;
  background:url("/wp-content/themes/kata-tip/image/icon_external-link.png") no-repeat;
  background-size: 13px 13px;
}

#single .entry-content .list-box-01 {
    line-height: 1.9;
    padding: 21px 20px 0;
    border: 1px solid #e1e1e1;
    box-shadow: 0 3px 0 rgba(8,1,2,0.03);
    font-size: 16px;
    margin: 50px 0 20px;
}
#single .entry-content .list-box-01._end {
    margin: 50px 0 0;
}

#single .entry-content .list-box-01 dt {
    display: inline-block;
    background: #fff;
    padding: 0 10px;
    font-weight: bold;
    position: relative;
    top: -40px;
}

#single .entry-content .list-box-01 dd {
    position: relative;
    top: -30px;
    padding-left: 10px;
}

#single .entry-content .list-box-02 { }
#single .entry-content .list-box-02 dt {
  margin: 0 0 5px;
  font-weight: bold;
}
#single .entry-content .list-box-02 dd {
  margin: 0 0 10px;
}

#single .entry-content .list {
  margin: 0 0 20px;
}
#single .entry-content .list li {
  line-height: 1.8;
  margin: 10px 0 0;
  padding-left:1em;
  text-indent:-1em
}
#single .entry-content .list li:first-child {
  margin: 0;
}

#single .entry-content .list-text-01 {
    margin: 1.6em 0;
    padding: 15px 10px 15px 15px;
    border: 1px solid #c1c1c1;
}

#single .entry-content .list-text-01 ul {
  padding-left:1em;
  text-indent:-1em;
}

#single .entry-content .list-text-01 ul li {
  margin: 5px 0 0;
}
#single .entry-content .list-text-01 ul li:first-child {
  margin: 0;
}

#single .entry-content .list-text-01._code ul li {
  margin: 10px 0 0;
}

#single .entry-content code.code-tag {
  padding: 0px 5px;
  margin: 0 2px;
  background: #eee;
/*  border: 1px solid #bbb;*/
  border-radius: 5px;
  font-size: 15px;
}
#single .entry-content .img-gifmovie {
  display: inline-block;
  line-height: 0;
  margin: 0 0 50px;
  border: 1px solid #2f2e2e;
}

#single .entry-content .img-gifmovie img {
  width: 100%;
  height: auto;
}

#single .entry-content .m-bold {
  font-weight: bold;
}
#single .entry-content .m-red {
  color: #ff0000;
}
#single .entry-content .m-blue {
  color: #1818180c;
}

#single .entry-content .text-highlight {
  background: linear-gradient(transparent 50%,#ffff4d 50%);
  font-weight: 700;
}

.movie-box {
  margin: 0 0 15px;
}

.movie-inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.movie-inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*おすすめ記事
===========================*/
#single .entry-content .recomend {
  margin: 0 0 10px;
}

#single .entry-content .recomend-list {

}

#single .entry-content .recomend a {
  justify-content: center;
  webkit-justify-content: space-between;
  justify-content: space-between;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 15px 0;
  overflow: hidden;
  border-bottom: 1px solid #c1c1c1;
  color:#000;
}

#single .entry-content .recomend a:hover {
  text-decoration: none;
}

#single .entry-content .recomend-list:last-child a {
  border-bottom: none;
}

#single .entry-content .recomend-thumbnail {
  width: 30%;
  line-height: 0;
}
#single .entry-content .recomend-thumbnail img {
  width: 100%;
  border: 1px solid #000;
}
#single .entry-content .recomend-text {
  width: 65%;
  font-weight: bold;
  font-size: 15px;
}

@media screen and (max-width: 768px) {
  #single .entry-content .recomend {
    margin: 0;
  }
  #single .entry-content .recomend-thumbnail {
    width: 40%;
  }
  #single .entry-content .recomend-text {
    width: 55%;
    font-size: 12px;
  }
}


/*コメント
===========================*/
#comments {
  display: none;
  padding: 15px 15px 30px;
  background: #f8f8f8;
  border-top: 5px solid #e4e4e4;
}
#comments .comment-form-comment label {
  display: block;
  margin: 0 0 10px;
}
#comments textarea {
  width: 400px;
  padding: 15px;
}
#comments .comment-form-comment {
  margin: 0 0 20px;
}
#comments .submit {
  padding: 6px 8px;
  font-size: 14px;
  background:#fafafa;
}

/*ナビ
===========================*/
.navigation.pagination {
  margin: 30px 0 0;
  text-align: center;
}

.navigation.pagination .nav-links {
  justify-content: center;
  align-items: flex-start;
  display: -webkit-flex;
  display: flex;
}

.navigation.pagination .nav-links .prev,.navigation.pagination .nav-links .next {
  text-decoration:none;
}

.navigation.pagination .nav-links .page-numbers {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0 5.5px;
  border-radius: 5px;
  box-shadow: 0 3px 0 #f2f2f2;
  letter-spacing: normal;
  text-decoration:none;
  color: #181818;
  font-size: 15px;
  border: 1px solid #434343;
  -webkit-transition: color .35s,background-color .35s;
  transition: color .35s,background-color .35s;
}
.navigation.pagination .nav-links .page-numbers.current,
.navigation.pagination .nav-links a.page-numbers:hover {
  color: #FFF;
  background: #181818;
}

/*非表示
===========================*/
.logged-in-as {
  display: none;
}
.comment-reply-title {
  display: none;
}
/*.nav-links {
  display: none;
}*/

.navigation.pagination .screen-reader-text {
  display: none;
}
.navigation.post-navigation {
  display: none;
}

/*BreadList
===========================*/
.bread-list {
  margin: 0 0 20px;
  font-size: 13px;
}
.bread-list a {
  text-decoration:none;
}

.bread-list {
  display: flex;
  width: 1150px;
  margin: 0 auto;
  padding: 0 0 25px;
}

.bread-list li {
  position: relative;
  padding: 0 20px 0 0;
}

.bread-list li:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  border: 0px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -3px;
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  -webkit-backface-visibility: hidden;
}

.bread-list li:last-child:after {
  display: none;
}


@media screen and (max-width: 768px) {
  .bread-list {
    width: 100%;
    padding: 0 3% 25px;
  }
  .bread-list li:after {
    top: 5px;
    margin-top: 0;
  }
}


/*Time
===========================*/
.entry-date {
  margin: 0 0 15px;
  font-size: 13px;
}

.entry-date time:first-child {
  margin: 0 5px 0 0;
}

/*記事詳細
===========================*/
.entry-article { }
.entry-article .content-alert {
  margin: 0 0 35px;
  color: #cc3622;
  line-height: 1.3;
  font-weight: bold;
}
.entry-article .content-alert p:first-child {
  margin: 0 0 5px;
}


/*SNS
===========================*/
.sns {
  width: 100%;
  overflow: hidden;
  margin: 0 0 50px;
}

.sns li {
  float: left;
  width: 174px;
  margin: 0  0 0 10px;
}
.sns li:first-child {
  margin: 0;
}

.sns li a {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 4px;
  padding: 20px 0;
  text-align: center;
  color: #fff;
  text-decoration:none;
  font-weight: bold;
  text-align: center;
  font-size: 15px;
  border-radius: 5px;
}

.sns .fb-btn a {
  background: #2e4a88;
  box-shadow: 0 4px 0 #1B3D82;
  text-shadow: 0 -1px -1px #1B3D82;
}
.sns .fb-btn a:hover {
  background: #354F84;
}
.sns .fb-btn a:active {
  top: 2px;
  box-shadow: 0 2px 0 #1B3D82;
}

.sns .tw-btn a {
  background: #008DDE;
  box-shadow: 0 4px 0 #0078BD;
}
.sns .tw-btn:active a {
  top: 2px;
  box-shadow: 0 2px 0 #0078BD;
}
.sns .tw-btn a:hover {
  background: #1397D8;
}

.sns .hatena-btn a {
  background: #2c6ebd;
  box-shadow: 0 4px 0 #225694;
}
.sns .hatena-btn a:active {
  top: 2px;
  box-shadow: 0 2px 0 #0078BD;
}
.sns .hatena-btn a:hover {
  background: #1397D8;
}

.sns .google-btn a {
  background: #CC3622;
  box-shadow: 0 4px 0 #BA2714;
  color: white;
}
.sns .google-btn a:active {
  top: 2px;
  box-shadow: 0 2px 0 #BA2714;
}
.sns .google-btn a:hover {
  background: #D04829;
}

.sns li a .txt {
  margin: 0 0 0 5px;
}

.icon-tw:before {
    content: "\f309";
    font-family: 'entypo', sans-serif;
}
.icon-fb:before {
    content: "\f30c";
    font-family: 'entypo', sans-serif;
}
.icon-hatena:before {
    content: "B!";
}
.icon-google:before {
    content: "\f30f";
    font-family: 'entypo', sans-serif;
}


/*.sns {
  margin: 0 0 50px;
}

.sns li {
  display:inline-block;
  vertical-align:top;
}

.sns li a {
  vertical-align:middle;
  text-align: center;
  color: #fff;
  text-decoration:none;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
}

.sns .fb-btn a {
  background: #2e4a88;
  box-shadow: 0 4px 0 #1B3D82;
  text-shadow: 0 -1px -1px #1B3D82;
  display: inline;
  position: relative;
  border-radius: 5px;
  padding: 14px 80px;
}
.sns .fb-btn a:hover {
  background: #354F84;
}
.sns .fb-btn a:active {
  top: 2px;
  box-shadow: 0 2px 0 #1B3D82;
}

.sns .tw-btn a {
  background: #008DDE;
  box-shadow: 0 4px 0 #0078BD;
  display: inline;
  position: relative;
  border-radius: 5px;
  padding: 14px 80px;
}
.sns .tw-btn:active a {
  top: 2px;
  box-shadow: 0 2px 0 #0078BD;
}
.sns .tw-btn a:hover {
  background: #1397D8;
}

.sns .hatena-btn a {
  background: #2c6ebd;
  box-shadow: 0 4px 0 #225694;
  display: inline;
  position: relative;
  border-radius: 5px;
  padding: 14px 80px;
}
.sns .hatena-btn a:active {
  top: 2px;
  box-shadow: 0 2px 0 #0078BD;
}
.sns .hatena-btn a:hover {
  background: #1397D8;
}

.sns .google-btn a {
  background: #CC3622;
  box-shadow: 0 4px 0 #BA2714;
  display: inline;
  position: relative;
  color: white;
  border-radius: 5px;
  padding: 14px 80px;
}
.sns .google-btn a:active {
  top: 2px;
  box-shadow: 0 2px 0 #BA2714;
}
.sns .google-btn a:hover {
  background: #D04829;
}*/

/*contact
===========================*/
.contact {
  width: 1000px;
  margin: 70px auto 90px;
}
.contact .contact-tit {
  font-size: 17px;
  font-weight: bold;
  margin: 0 0 50px;
  text-align: center;
}
.contact .contact-tit span {
  font-size: 40px;
}

.contact .contact-table {
  margin: 0 0 50px;
}

.contact .contact-table tr {
  border-bottom: 1px solid #eaeaea;
}

.contact .contact-table tr:first-child {
  border-top: 1px solid #eaeaea;
}

.contact .contact-table th {
  width: 195px;
  line-height: 1.4;
  padding: 20px 10px 20px 25px;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  vertical-align:middle;
  background: #f3f3f3;
}
.contact .contact-table th span {
  font-weight: normal;
}

.contact .contact-table td {
  line-height: 1.8;
  width: 805px;
  padding: 30px 0 30px 40px;
}

.contact .contact-table .name-block {
  float: left;
  margin: 0 30px 0 0;
}

.contact .contact-table textarea,
.contact .contact-table input {
  width: 100%;
  padding: 4px;
}

.contact .contact-table .name-block input {
  width: 200px;
}

.contact .contact-table .name-block label {
  display: inline-block;
  width: 20px;
}

.contact .contact-table .tel-block input {
  display: inline-block;
  width: 144px;
}

.contact .btn {
  width: 600px;
  margin: 0 auto;
}

.contact .btn input {
  font-weight: bold;
  display: block;
  width: 100%;
  padding: 10px 0;
  cursor: pointer;
  -webkit-transition: .2s ease-in;
  transition: .2s ease-in;
  text-align: center;
  font-size: 18px;
  color: #181818;
  border: #ccc solid 2px;
}

.contact .btn input:hover {
  opacity: .7;
  filter: alpha(opacity=70);
}

span.wpcf7-not-valid-tip {
    color: #c51d11!important;
    font-size: 14px!important;
    font-weight: bold;
}

div.wpcf7-validation-errors,.wpcf7-mail-sent-ok {
  padding: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  border: none!important;
  color: #c51d11;
}

/*検索エラー
===========================*/
.not-found .page-header .page-title {
  font-weight: bold;
  font-size: 20px;
}

.not-found .page-content p {
  margin: 0 0 15px;
}

.not-found .page-content input {
  width: 230px;
  padding: 6px 20px 6px 8px;
  font-size: 14px;
  outline: none;
}

.not-found .page-content .search-submit {
    padding: 6px 8px;
    font-size: 14px;
    background: #fafafa;
    cursor: pointer;
}

/*404
===========================*/
.error-404 .page-title {
  line-height: 1.5;
  margin: 0 0 30px;
  text-align: center;
  font-size: 30px;
}
.error-404 .page-title span {
  font-weight: bold;
  font-size: 40px;
}
.error-404 .error-txt {
  margin: 0 0 50px;
  font-size: 16px;
  line-height: 1.5;
}
.error-404 .search-box {
  width: 375px;
  margin: 0 auto;
}
.error-404 .search-box .search-field {
  width: 300px;
  font-size: 16px;
  padding: 10px 15px;
}
.error-404 .search-box .search-submit {
  font-size: 16px;
  padding: 10px 15px;
}

@media screen and (max-width: 768px) {

  .wrap {
    border-top: 5px solid #181818;
  }
  .catchphrase {
    display: none;
  }
  #header {
    min-width: 100%;
    width: 100%;
    margin: 0 0 20px;
    padding: 0 3%;
  }

  #header a {
    text-decoration: none;
  }
  #header .header-ttl {
    width: 100px;
  }
  #header .header-ttl a svg {
    width: 100%;
  }
  #header .inner {
  position: relative;
  max-width: 100%;
  width: 100%;
  height: 50px;
  }

  #header .header-nav {
    display: none;
    float: right;
  }
  #header .header-nav li {
    display: table-cell;
    padding: 5px 30px;
    border-left: 1px solid #181818;
  }
  #header .header-nav li:first-child {
    border-left: none;
  }
  #header .header-nav li a {
    display: block;
    position: relative;
    color: #181818;
  }
  #header .header-nav li a:after {
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    bottom: -5px;
    opacity: 0;
    content: '';
    background-color: #181818;
    -webkit-transition: opacity 0.3s, transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
  #header .header-nav li a:hover:after {
    opacity: 1;
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  #header .drawer-wrap {
  display: block;
  }
  .scroll-header {
    position: fixed;
    z-index: 100;
    display: block;
    top: -200px;
    left: 0;
    width: 100%;
    height: 45px;
    padding: 0 3%;
    -webkit-transition: top 0.9s ease 0s;
    -moz-transition: top 0.9s ease 0s;
    transition: top 0.9s ease 0s;
    background: #fff;
    box-shadow: 0px 3px 3px -3px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0px 3px 3px -3px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 3px 3px -3px rgba(0, 0, 0, 0.6);
    border-top: 5px solid #181818;
  }
  .scroll-header .inner {
    position: relative;
  }
  .scroll-header.fixed {
    top: 0;
    left: 0;
  }
  .scroll-header .scroll-header_link {
    padding: 10px 0 0;
    text-align: center;
    font-weight: bold;
  }

  .scroll-header .scroll-header_link a {
    text-decoration:none;
  }
  .scroll-header_logo {
   line-height: 40px;
   width: 100px;
  }


  .page-header {
    width: 100%;
  }

  .page-header .page-title {
    padding: 0 3% 15px;
    font-size: 12px;
  }

  .content {
    display: block;
    width: 100%;
    padding: 0;
    border-top: none;
    overflow: hidden;
  }
  .content .section-l-wrap {
    float: none;
    width: 100%;
  }
  .content .section-r-wrap {
    float: none;
    width: 100%;
    margin: 20px 0 0;
    background: none;
  }
  .content .section-r-wrap .box {
    margin: 0 0 20px;
    padding: 0 3% 25px;
    font-size: 14px;
    border-bottom: 2px solid #ccc;
  }

  .content .section-r-wrap .box-ad {
    width: 300px;
    margin: 0 auto;
  }
.content .section-r-wrap .box .box-ad:nth-child(n + 3) {
  margin: 20px auto 0;
}
  .content .section-r-wrap .box-prof dt img {
    height: 60%;
    width: 60%;
  }

  .article-list {
    padding: 10px 3%;
  }

  .article-list .article-left {
    width: 35%;
    height: auto;
    margin: 0;
  }

  .article-list .article-left .post-thumbnail img {
    width: 100%;
    height: auto;
  }

  .article-list .article-right {
    width: 60%;
    min-height: auto;
  }

.article-list .article-right .article-right_tit {
  margin: 0 0 10px;
  font-size: 13px;
}

.article-list .article-right .article-right_txt {
  margin: 0 0 30px;
  font-size: 14px;
}

.article-list .article-right .article-right_data {
  font-size: 11px;
}

.article-list .article-right .post-categories {
  line-height:1.5;
  margin: 0 0 20px;
  font-size: 12px;
}

/*共通
===========================*/
.pc-none { display: block; }
.sp-none { display: none; }

/*パンクズ
===========================*/
#single .bread-list {
  width: 100%;
  line-height: 1.5;
  margin: 0 0 20px;
  padding: 0 3%;
  font-size: 11px;
}

/*投稿ページ
===========================*/
#single .section-l-wrap {
  width: 100%;
  padding: 20px 3% 20px;
  border: none;
  border-top: 1px solid #c1c1c1;
}
#single .entry-title {
  margin: 0 0 20px;
  line-height: 1.7;
  font-size: 16px;
}

#single .post-thumbnail {
  width: 100%;
}
#single .post-thumbnail img {
  width: 100%;
  height: auto;
}

#single .entry-content {
  line-height: 1.6;
  padding: 0 0 30px;
  font-size: 14px;
}

.list-title {
  margin: 30px 0 15px;
  padding: 10px 3%;
  font-size: 4.8vw;
}

#single .entry-content .tit-02 {
    margin: 30px 0 15px;
    padding: 10px 0px;
    font-size: 15px;
}

#single .entry-content .tit-05 {
  font-size: 15px;
}

#single .entry-content p {
     margin: 1em 0;
}

#single .entry-content .table-column_03 {
  display: block;
  width: 100%;
}

#single .entry-content .table-column_03 tbody {
  display: block;
  width: 100%;
}

#single .entry-content .table-column_03 tr {
  display: block;
  width: 100%;
}

#single .entry-content .table-column_03 td,
#single .entry-content .table-column_03 th {
  display: block;
  width: 100%;
}

#single .entry-content .table-column_03 th.cell-02,
#single .entry-content .table-column_03 th.cell-03 {
  display: none;
}

#single .entry-content .table-column_03 .cell-01,#single .entry-content .table-column_03 .cell-02 {
  border-right: none;
}

#single .entry-content .table-column_03 td.cell-03 {
  display: none;
}

#single .entry-content .table-column_03 td.cell-02 .pc-none {
  display: inline-block;
}

#single .entry-content .link-demo {
  padding: 0.3em 0 0.5em;
  font-size: 18px;
}

#single .entry-content .list-box-01 {
  padding: 25px 3% 0;
  font-size: 14px;
  margin: 40px 0 20px;
}
#single .entry-content .list-box-01._end {
    margin: 30px 0 0;
}

#single .entry-content .list-box-01 dt {
    display: inline-block;
    background: #fff;
    padding: 0 10px;
    font-weight: bold;
    position: relative;
    top: -40px;
}

#single .entry-content .list-box-01 dd {
    position: relative;
    top: -30px;
    padding-left: 10px;
}

#single .entry-content code.code-tag {
    font-size: 14px;
}

/*コメント
===========================*/
#comments {
  padding: 15px 3% 30px;
  border-top: 3px solid #e4e4e4;
  font-size: 14px;
}
#comments .comment-form-comment label {
  display: block;
  margin: 0 0 10px;
}
#comments textarea {
  width: 100%;
}
#comments .comment-form-comment {
  margin: 0 0 20px;
}
#comments .submit {
  padding: 6px 8px;
  font-size: 14px;
  background:#fafafa;
}

/*ナビ
===========================*/
.navigation.pagination {
  margin: 20px 0 0;
}

.navigation.pagination .nav-links .page-numbers {
  height: 30px;
  line-height: 30px;
  width: 30px;
  margin: 0 2px;
}


/*SNS
===========================*/
.sns {
  width: 100%;
  margin: 0;
}

.sns li {
  float: left;
  width: 23%;
  margin: 0  0 0 2%;
}
.sns li:first-child {
  margin: 0;
}

.sns li a {
  padding: 10px 0;
  font-size: 2.6vw;
}

/*CONTACT
===========================*/
.contact {
    width: 100%;
    padding: 0 3%;
    margin: 30px auto 40px;
  }
.contact .contact-tit {
    font-size: 11px;
    margin: 0 0 20px;
    text-align: center;
}
  .contact .contact-tit span {
    font-size: 20px;
}
  .contact .contact-table {
    margin: 0 0 20px;
  }
  .contact .contact-table tr {
    border-right: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;
  }
  .contact .contact-table th {
    font-size: 11px;
    width: 35%;
    padding: 10px 3%;
    text-align: left;
  }
  .contact .contact-table td {
    font-size: 11px;
    width: 65%;
    padding: 10px 3%;
  }

  .contact .contact-table .name-block {
    float: none;
    margin: 10px 0 0;
  }
  .contact .contact-table .name-block:first-child {
    margin: 0;
}
  .contact .contact-table textarea,
  .contact .contact-table input {
    width: 100%;
    padding: 4px;
  }

  .contact .contact-table .name-block input {
    width: 90%;
  }

  .contact .contact-table .name-block label {
    width: 10%;
  }

  .contact .contact-table .tel-block input {
    display: inline-block;
    width: 25%;
  }

  .contact .btn {
    width: 80%;
  }

  .contact .btn a {
    font-size: 13px;
    width: 65%;
    margin: 0 auto;
    padding: 13px 0;
  }

.contact .btn input {
    text-align: center;
    font-size: 12px;
}
    /*Contact Form 7*/
  div.wpcf7 {
    margin: 0 0 25px!important;
  }
 .widget {
  padding: 0 3%;
 }

div.wpcf7-validation-errors, .wpcf7-mail-sent-ok {
    font-size: 12px;
}
div.wpcf7-response-output {
    margin: 0!important;
    padding: 0!important;
}

span.wpcf7-not-valid-tip {
    font-size: 11px!important;
}

.blog-notice {
  padding: 0 3% 15px;
  font-size: 12px;
}
  .page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
  .page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
  }
  footer {
    width: 100%;
    min-width:100%;
    padding: 25px 0 40px;
  }
  footer a {
    color: #fff;
  }
  footer .inner {
    width: 100%;
    margin: 0 0 20px;
    padding: 0 3%;
  }

  footer .inner .footer-logo {
    width: 30%;
    margin: 0 0 20px;
  }
  footer .inner .footer-link {
  }
  footer .inner small {
    font-size: 12px;
  }footer .inner .footer-link li:first-child {
    margin: 0 0 15px;
  }
  footer .inner .footer-link li:last-child {
    margin: 0;
  }
  footer .inner .footer-link li {
      margin: 0 0 15px 15px;
      text-align: left;
  }
}

/*Add*/
.tags-links {
  display: none;
}

#single .ad-01 {
  margin: 0 0 35px;
}

#single .entry-content p.ad-02_ttl,#single .ad-01_ttl {
  margin: 0 0 10px;
}

#single .entry-content p.ad-02_ttl {
  text-align: center;
}

.ad-02_list {
webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
  #single .entry-content p.ad-02_ttl,#single .ad-01_ttl {
    font-size: 14px;
  }
 .ad-02_list {
  display: block;
 }
 .ad-02_list li:first-child {
  margin: 0 0 20px;
 }
}

.ad-aside {
  margin: 0 0 25px;
  text-align: center;
}

#single .entry-content .btn-ad {
  margin: 40px 0 50px;
}

#single .entry-content .btn-ad a {
  position: relative;
  display: inline-block;
  padding: 20px 30px 17px 40px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
  border-radius: 4px;
  box-shadow: 0 3px 0 0 rgba(0,0,0,.06);
  -webkit-transition: background .25s,color .25s;
  transition: background .25s,color .25s;
  color: #fff;
    background: #c00;
}

#single .entry-content .btn-ad a:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 15px;
  width: 10px;
  height: 10px;
  border: 0px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -5px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}

#single .entry-content .btn-ad a:before {

}

@media screen and (max-width: 768px) {
  #single .entry-content .btn-ad a {
    max-width: 100%;
    padding: 20px 1% 17px;
    font-size: 3.2vw;
  }

  #single .entry-content .btn-ad a:before {
  }
}

#single .entry-content .author {
  display: -webkit-flex;
  display: flex;
  flex-direction: row-reverse;
  webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0 0 30px;
}

#single .entry-content .author-ttl {
  margin: 0 0 5px;
}

#single .entry-content .author-name {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 20px;
}

#single .entry-content .author-text {
  line-height: 1.5;
  font-size: 14px;
}

#single .entry-content .author-box {
  width: 78%;
}

#single .entry-content .author-img {
  width: 19%;
  line-height: 0;
}

#single .entry-content .author-img img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  padding: 3px;
  background: #eee;
}

.animetion {
    fill: none;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: DASH 4s ease-in 1s forwards;
    -webkit-animation: DASH 4s ease-in 1s forwards;
}

@keyframes DASH {
    0% {
        stroke-dashoffset: 3000;
        fill: rgba(0, 0, 0, 0);
    }
    50% {
        stroke-dashoffset: 2000;
        fill: rgba(0, 0, 0, 0.2);
    }
    70% {
        stroke-dashoffset: 1000;
        fill: rgba(0, 0, 0, 0.4);
    }
    100% {
        stroke-dashoffset: 0;
        fill: rgba(0, 0, 0, 1);
    }
}

@-webkit-keyframes DASH {
    0% {
        stroke-dashoffset: 3000;
        fill: rgba(0, 0, 0, 0);
    }
    50% {
        stroke-dashoffset: 2000;
        fill: rgba(0, 0, 0, 0.2);
    }
    70% {
        stroke-dashoffset: 1000;
        fill: rgba(0, 0, 0, 0.4);
    }
    100% {
        stroke-dashoffset: 0;
        fill: rgba(0, 0, 0, 1);
    }
}

@keyframes shiny {
  0% {
    left: -30%;
  }
  20% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

@-webkit-keyframes shiny {
  0% {
    left: -30%;
  }
  20% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

@-moz-keyframes shiny {
  0% {
    left: -30%;
  }
  20% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}



/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript&plugins=line-highlight+line-numbers+toolbar+show-language */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
  color: #f8f8f2;
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #f8f8f2;
}

.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #f92672;
}

.token.boolean,
.token.number {
  color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function {
  color: #e6db74;
}

.token.keyword {
  color: #66d9ef;
}

.token.regex,
.token.important {
  color: #fd971f;
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}

.line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em; /* Same as .prism’s padding-top */

  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));

  pointer-events: none;

  line-height: inherit;
  white-space: pre;
}

  .line-highlight:before,
  .line-highlight[data-end]:after {
    content: attr(data-start);
    position: absolute;
    top: .4em;
    left: .6em;
    min-width: 1em;
    padding: 0 .5em;
    background-color: hsla(24, 20%, 50%,.4);
    color: hsl(24, 20%, 95%);
    font: bold 65%/1.5 sans-serif;
    text-align: center;
    vertical-align: .3em;
    border-radius: 999px;
    text-shadow: none;
    box-shadow: 0 1px white;
  }

  .line-highlight[data-end]:after {
    content: attr(data-end);
    top: auto;
    bottom: .4em;
  }

pre.line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}

pre.line-numbers > code {
  position: relative;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em; /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

  .line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
  }

    .line-numbers-rows > span:before {
      content: counter(linenumber);
      color: #999;
      display: block;
      padding-right: 0.8em;
      text-align: right;
    }
pre.code-toolbar {
  position: relative;
  margin: 0 0 1.5em;
  font-size: 14px;
}

pre.code-toolbar > .toolbar {
  position: absolute;
  top: 0;
  right: 0;
}

pre.code-toolbar > .toolbar .toolbar-item {
  display: inline-block;
}

pre.code-toolbar > .toolbar a {
  cursor: pointer;
}

pre.code-toolbar > .toolbar button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none; /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
}

pre.code-toolbar > .toolbar a,
pre.code-toolbar > .toolbar button,
pre.code-toolbar > .toolbar span {
  color: #bbb;
  padding: 5px;
  background: #f5f2f0;
  background: rgba(224, 224, 224, 0.2);
  box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
}

pre.code-toolbar > .toolbar a:hover,
pre.code-toolbar > .toolbar a:focus,
pre.code-toolbar > .toolbar button:hover,
pre.code-toolbar > .toolbar button:focus,
pre.code-toolbar > .toolbar span:hover,
pre.code-toolbar > .toolbar span:focus {
  color: inherit;
  text-decoration: none;
}

.wrap {
  width: 1150px;
  margin: 0 auto;
  padding: 0 0 25px;
}

.wrap p {
    margin: 0 0 10px;
    line-height: 1.5;
    letter-spacing: 0.4px;
    font-size: 1.25vw;
}

.wrap-title {
  line-height: 1.5;
  font-size: 2.1875vw;
  font-weight: bold;
}

.age-title {
line-height: 1.5;
  margin: 45px 0 20px;
  background: #2f2e2e;
  padding: 10px 15px;
  color: #fff;
  font-size: 1.875vw;
  font-weight: bold;
  letter-spacing: 0.06em;
}

.age-info {
   margin: 0 0 20px;
  line-height: 2;
  letter-spacing: 0.4px;
font-size: 1.40vw;
}

.age-info dt {
  font-weight: bold;
}

.list-age {
}

.list-age li {
  margin: 0 0 10px;
  line-height: 2;
  letter-spacing: 0.4px;
  font-size: 1.40vw;
}

.list-age li a {
  color: #339fb3;
  word-break: break-all;
}

.list-sub-title {
    line-height: 1.5;
  margin: 40px 0 25px;
  padding: 10px 15px;
  border-top: solid 1px #2f2e2e;
  border-bottom: solid 1px #2f2e2e;
  font-size: 1.56vw;
  font-weight: bold;
}

#age {
  font-size: 2.1875vw;
  font-weight: bold;
  color: #ed0505;
}


@media screen and (max-width: 768px) {
.wrap {
  width: 100%;
  padding: 25px 3%;
  border-top: 1px solid #c1c1c1;
}

.wrap p {
  font-size: 3.73vw;
}

.wrap-title {
   margin: 0 0 30px;
  font-size: 5.86vw;
}


.age-title {
margin: 30px 0 15px;
    padding: 10px 3%;
    font-size: 4.8vw;
}
.age-info {
    font-size: 4.26vw;
}
.list-age li {
  font-size: 4.26vw;
  }
.list-sub-title {
  font-size: 4.8vw;
}

#age {
    font-size: 9.6vw;
}

}


@media screen and (max-width: 768px) {
  .content-ad02 table,
  .content-ad01 table {
    margin-top: 0!important;
    width: 100%;
  }
  .content-ad02 table td,
  .content-ad01 table td {
      width: 50%!important;
  }
  .content-ad02 table td div,
  .content-ad01 table td div {
       width: 100%!important;
  }

  .content-ad02 table img,
  .content-ad01 table img {
    width: 100%!important;
  }
}



.author {
  display: -webkit-flex;
  display: flex;
  flex-direction: row-reverse;
  webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0 0 30px;
}

.author-ttl {
  margin: 0 0 15px;
}

.author-name {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 20px;
}

.author-text {
  line-height: 1.5;
  font-size: 14px;
}

.author-box {
  width: 78%;
}

.author-img {
  width: 19%;
  line-height: 0;
}

.author-img img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  padding: 3px;
  background: #eee;
}


 .news-link a {
  font-weight: bold;
 }
 .news-link a:hover {
  text-decoration: none;
 }