/*utility*/
.cf:after,.cf:before { content:""; display:table }
.cf:after { clear:both }
.ad-block { display:block!important }
.disp-sp { display:none }
.loading { position:relative; text-align:center; width:100%; z-index:1 }
.loading:before { background-image:url(/common/images/common/loader.gif); background-position:0 0; background-repeat:no-repeat; content:""; display:block; height:58px; margin:auto; width:58px }
.lazy { opacity:0; -webkit-transition:opacity .5s ease; transition:opacity .5s ease }
.lazy.not-trans,.lazy.lazy-bg,.lazy.loaded { opacity:1 }
.lazy {
  opacity: 0!important;
  transition: opacity .5s ease!important;
}
.lazy[data-loaded="true"]{
  opacity: 1!important;
}
.u_undownloadable { pointer-events:none }
.u-fs-XS { font-size:1.2rem }
.u-fs-S { font-size:1.4rem }
.u-fs-M { font-size:1.6rem }
.u-fs-L { font-size:1.8rem }
.u-fs-XL { font-size:2rem }
.u-lh-S { line-height:1.2 }
.u-lh-M { line-height:1.4 }
.u-lh-L { line-height:1.6 }
.u-lh-XL { line-height:1.8 }
.u-m-reset { margin:0 }
.u-mt-reset { margin-top:0 }
.u-mr-reset { margin-right:0 }
.u-mb-reset { margin-bottom:0 }
.u-ml-reset { margin-left:0 }
.u-mt-XS { margin-top:4px }
.u-mr-XS { margin-right:4px }
.u-mb-XS { margin-bottom:4px }
.u-ml-XS { margin-left:4px }
.u-mt-S { margin-top:8px }
.u-mr-S { margin-right:8px }
.u-mb-S { margin-bottom:8px }
.u-ml-S { margin-left:8px }
.u-mt-M { margin-top:16px }
.u-mr-M { margin-right:16px }
.u-mb-M { margin-bottom:16px }
.u-ml-M { margin-left:16px }
.u-mt-L { margin-top:24px }
.u-mr-L { margin-right:24px }
.u-mb-L { margin-bottom:24px }
.u-ml-L { margin-left:24px }
.u-mt-XL { margin-top:32px }
.u-mr-XL { margin-right:32px }
.u-mb-XL { margin-bottom:32px }
.u-ml-XL { margin-left:32px }
.u-mt-XXL { margin-top:40px }
.u-mr-XXL { margin-right:40px }
.u-mb-XXL { margin-bottom:40px }
.u-ml-XXL { margin-left:40px }
.u-mb-XXXL { margin-bottom: 80px; }
.u-color-white { color:#fff }
.u-color-black { color:#222 }
.u-color-free { color:#006387 }
.u-color-premium { color:#915a00 }
.u-color-emp { color:#ff2929 }
.u-color-cap { color:#909090 }
.u-bg-black { background-color:#3b3b3b }
.u-bold { font-weight:700 }
.u-ta-left { text-align:left }
.u-ta-center { text-align:center }
.u-ta-right { text-align:right }
.u-gradient-free-horizontal { background:-webkit-gradient(linear,left top,right top,from(#1e5799),to(#008b5b)); background:linear-gradient(90deg,#1e5799 0,#008b5b) }
.u-gradient-free-diagonal { background:linear-gradient(135deg,#1e5799,#008b5b) }
.u-gradient-free-vertical { background:-webkit-gradient(linear,left top,left bottom,from(#1e5799),to(#008b5b)); background:linear-gradient(180deg,#1e5799 0,#008b5b) }
.u-gradient-premium-horizontal { background:-webkit-gradient(linear,left top,right top,from(#915a00),to(#d1c100)); background:linear-gradient(90deg,#915a00 0,#d1c100) }
.u-gradient-premium-diagonal { background:linear-gradient(135deg,#915a00,#d1c100) }
.u-gradient-premium-vertical { background:-webkit-gradient(linear,left top,left bottom,from(#915a00),to(#d1c100)); background:linear-gradient(180deg,#915a00 0,#d1c100) }

.m-article-3colm {
  clear: both;
  width: 100%;
  float: left;
}

.ad-gate {
  width: 1000px;
  height: 800px;
  margin: 0 auto -632px;
  position: relative;
  z-index: 10;
}
.ad-gate > div:nth-child(1) {
  position: absolute;
  left: -140px;
  top: 0;
}
.ad-gate > div:nth-child(2) {
  position: absolute;
  text-align: right;
  left: -160px;
  top: 200px;
  width: 160px;
}
.ad-gate > div:nth-child(3) {
  position: absolute;
  text-align: left;
  right: -160px;
  top: 200px;
  width: 160px;
}
.l-inner {
  position: relative;
  z-index: 10;
}
.recommended-by {
  color: #999;
  text-decoration: none;
  font-size: 11px;
  text-align: right;
  margin: 10px 50px -30px;
}
.recommended-by img {
  width: 120px;
  position: relative;
  top: 5px;
}
.template-box.\--custom {
  padding-bottom: 0;
}
.template-box.\--custom .figure-left {
  margin: 0 4em 15px 0;
  padding: 0;
  border: 0;
}

.ad-overlay {
  position: fixed;
  width: 400px;
  height: 150px;
  margin: auto;
  bottom: -120px;
  left: 0;
  right: 0;
  z-index: 1000;
  transform: translateX(-400px);
  transition: bottom .5s ease;
}
.ad-overlay a:hover { opacity: 1; }
.ad-overlay.is-hidden {
  bottom: -150px;
}
.ad-overlay:hover {
  bottom: 0;
}
.ad-overlay.is-active {
  bottom: 0;
}
.ad-overlay__close {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background-color: rgba(255,255,255, .3);
  cursor: pointer;
}
.ad-overlay__close:hover {
  background-color: rgba(255,255,255, .6);
}
.ad-overlay__close::before,
.ad-overlay__close::after {
  content: '';
  width: 20px;
  height: 1px;
  background-color: #333;
  transform: rotate(45deg);
  display: block;
  position: relative;
  top: 14px;
  left: 5px;
}
.ad-overlay__close::after {
  transform: rotate(-45deg);
  top: 13px;
}

/*JBinformation*/
.article-information{margin:30px 50px;}
.article-information__inner{
  padding:25px 16px;
  color:#fff; font-size:1.4rem;
  background:linear-gradient(135deg,#000,#3f3f3e);
  position:relative;
}
.article-information__headline{text-align:center; margin-bottom:15px; border-bottom:solid 3px #ccc; padding-bottom:5px;}
.article-infotitle{width:auto; margin-bottom:8px; width:182px;}
.article-information__headline__text{display:block;}
.article-information__link{background-color:#0b7a70; border:solid 2px #0b7a70; padding:7px 25px; color:#fff; border-radius:20px; margin-top:10px; display:block; width:50%; text-align:center; margin:10px auto 0; position:relative;}
.article-information__link::after{content:""; position:absolute; top:15px; width: 5px; height: 5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-top: 1px solid #fff; border-right: 1px solid #fff; right:16px;}
.article-information__link:hover{text-decoration:none; border:solid 2px #fff;}
.article-information__image{margin-top:15px; text-align:center;}
.article-information__image img{max-width:100%;}
/*gallery*/
.article-gallery__backto{display:block; text-align:center; padding:10px 0; border:solid 2px #006387; color:#006387; font-size:1.8rem;}
.skin-premium .article-gallery__backto{border:solid 2px #915a00; color:#915a00;}

.article-body .talk {
  overflow: hidden;
  margin: 50px 0;
  width: 100%;
}
.article-body .talk .talk-img {
  width: 80px;
  min-width: 80px;
}
.article-body .talk-l .talk-img { float: left; }
.article-body .talk-r .talk-img { float: right; }
.article-body .talk .talk-name {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 1.4rem;
}
.article-body .talk-l .talk-name { margin-left: 100px; }
.article-body .talk-r .talk-name { margin-right: 100px; text-align: right; }

.article-body .talk p {
  position: relative;
  padding: 16px;
  border-radius: 2px;
  width: calc(100% - 100px);
  margin-top: 0;
  background-color: #f3f3f3;
  font-size: 1.6rem;
  line-height: 1.8;
  margin-left: 20px;
  float: left;
}
.article-body .talk p:before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 14px 8px 0;
  border-color: transparent #f3f3f3 transparent transparent;
}
.article-body .talk-r p { margin-left: 0; }
.article-body .talk-l p:before { left: -14px; }
.article-body .talk-r p:before { right: -14px; transform: rotate(180deg); }

.article-body .talk p.bg-lightgray:before{border-color: transparent #f3f3f3 transparent transparent;}
.article-body .talk p.bg-cream:before{border-color: transparent #ffefd5 transparent transparent;}
.article-body .talk p.bg-pink:before{border-color: transparent #ffeeff transparent transparent;}
.article-body .talk p.bg-yellow:before{border-color: transparent #ffffcc transparent transparent;}
.article-body .talk p.bg-lightblue:before{border-color: transparent #ddffff transparent transparent;}
.article-body .talk p.bg-lightgreen:before{border-color: transparent #f3ffd8 transparent transparent;}

.article-body .talk p.bg-lightgray{background-color:#f3f3f3;}
.article-body .talk p.bg-cream{background-color:#ffefd5;}
.article-body .talk p.bg-pink{background-color:#ffeeff;}
.article-body .talk p.bg-yellow{background-color:#ffffcc;}
.article-body .talk p.bg-lightblue{background-color:#ddffff;}
.article-body .talk p.bg-lightgreen{background-color:#f3ffd8;}

.vjs-social-overlay a { color: #fff; }


.m-pickup-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 20px;
}
.m-pickup-layout__main {
  -ms-flex-preferred-size: 670px;
      flex-basis: 670px;
  margin-right: 30px;
  max-height: 532px;
  min-height: 532px;
}
.m-pickup-layout__main .m-pickup__link { height: 530px; }
.m-pickup-layout__side {
  -ms-flex-preferred-size: 300px;
      flex-basis: 300px;
}

.m-pickup__img--size-L {
  display: block;
  height: 375px;
  overflow: hidden;
  position: relative;
}
.m-pickup__img {
  display: block;
  height: 168px;
  overflow: hidden;
  position: relative;
}
.m-pickup__img--size-L img,
.m-pickup__img img {
  bottom: 0;
  height: auto;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}
.m-pickup__ttl {
  font-size: 1.4rem;
  margin-bottom: 4px;
  margin-top: 8px;
  font-weight: bold;
}
.m-pickup__ttl--size-L {
  font-size: 2rem;
  margin-bottom: 4px;
  margin-top: 8px;
  font-weight: bold;
}
.m-pickup__summary {
  margin-bottom: 5px;
}
.m-pickup__link {
  display: block;
  background-color: #fff;
  min-height: 260px;
  position: relative;
}
.m-pickup__link::after {
  content: '';
  display: block;
  margin-top: 5px;
  background: -webkit-gradient(linear,left top, right top,color-stop(0, #1e5799),to(#008b5b));
  background: linear-gradient(90deg,#1e5799 0,#008b5b);
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.m-pickup__link + .m-pickup__link { margin-top: 10px; }
.m-pickup__link:hover { text-decoration: none; }
.m-pickup__link:hover .m-pickup__ttl,
.m-pickup__link:hover .m-pickup__ttl--size-L { text-decoration: underline; }
.m-pickup__caption {
  color: #909090;
  font-size: 1.2rem;
}
.m-pickup__caption-date {
  padding-left: 8px;
}

.c-head {
  font-size: 2.4rem;
  color: #006387;
  padding-bottom: 5px;
}
.skin-premium .c-head { color: #915a00; }

.c-border {
  padding: 0 20px 20px;
  border: 6px solid #f0f0f0;
  box-sizing: border-box;
}

.c-border__ttl {
  position: relative;
  display: block;
  padding-left: 28px;
  margin-bottom: 26px;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .05em;
  line-height: 1.5;
  border-left: 4px solid;
}

.c-border__img {
  margin: 0;
}

.c-border__img img {
  width: 100%;
}

.c-border__txt p {
  font-size: 14px;
}
.c-border__caption {
  font-size: 10px;
  line-height: 1.75;
  color: #8B8B8B;
  margin: 30px 0 40px;
}