@charset "UTF-8";
/*
scss variables

# z-index
# colors

*/
/* use iscroll.js inline style */
/*
    $z-index--scrollbar: 9999
    */
/* use modal.js inline style */
/*
    $z-index--modal--in: 9999
    $z-index--modal--out: -9999
    */
/* desktop */
/* mobile */
/* link $z-index--modal--out */
/* brand */
/* web color */
/* text */
/* border */
/* header */
/*
scss function

# x-strip-units

*/
/*
scss mixin

# rem
# media queries
# background-image-retina
# icon-font
# grid

*/
/* 
.hoge {
    @include rem(margin, .2rem 4% 3px 2rem);
    @include rem(font-size, 1.2rem);
}
 */
/* usage */
/*
// desktop
@include desktop {
    width: 100%;
}
// mobile
@include mobile {
    width: 50%;
}
*/
/* about */
/*
    必須引数として「拡張子を除く画像パス」と「拡張子」を指定することで、メディアクエリのRetina対応コードを出力。
    */
/* usage */
/*
    // --- scss code
    .section--index.section--01.loaded {
        @include background-image-retina('../img/index/desktop/section--01', 'jpg');
        background-size: 1308px 600px;
    }

    // --- output css
    .section--index.section--01.loaded {
        background-image:url("../img/index/desktop/section--01.jpg");
        background-size:1308px 600px;
    }
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
        .section--index.section--01.loaded {
            background-image:url("../img/index/desktop/section--01@2x.jpg");
        }
    }
    ---
    */
/*
// usage
&:before {
    @include icon-font;
    content: "\e020";
}

 */
/*
// usage
.hoge {
    @include valign;
}
 */
/*
Animation keyframes

# zoomIn, zoomOut : modal.js
# fadeIn          : drawer.js, pagemap.js
# fadeInUp        : scrollLoader.js
# a to b          : buynow modal window
# bounce          : buynow modal window

*/
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@-moz-keyframes zoomIn {
  from {
    opacity: 0;
    -moz-transform: scale3d(0.3, 0.3, 0.3);
         transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
       -moz-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  65% {
    opacity: 0;
    -webkit-transform: scale3d(0.6, 0.6, 0.6);
  }
  to {
    opacity: 0;
  }
}

@-moz-keyframes zoomOut {
  from {
    opacity: 1;
  }
  65% {
    opacity: 0;
    -moz-transform: scale3d(0.6, 0.6, 0.6);
         transform: scale3d(0.6, 0.6, 0.6);
  }
  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }
  65% {
    opacity: 0;
    -webkit-transform: scale3d(0.6, 0.6, 0.6);
       -moz-transform: scale3d(0.6, 0.6, 0.6);
            transform: scale3d(0.6, 0.6, 0.6);
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

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

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

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

@-webkit-keyframes right-to-center {
  0% {
    opacity: 0;
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-moz-keyframes right-to-center {
  0% {
    opacity: 0;
    -moz-transform: translateX(30px);
         transform: translateX(30px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
         transform: translateX(0);
  }
}

@keyframes right-to-center {
  0% {
    opacity: 0;
    -webkit-transform: translateX(30px);
       -moz-transform: translateX(30px);
            transform: translateX(30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes left-to-center {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@-moz-keyframes left-to-center {
  0% {
    opacity: 0;
    -moz-transform: translateX(-30px);
         transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
         transform: translateX(0);
  }
}

@keyframes left-to-center {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
       -moz-transform: translateX(-30px);
            transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
            transform: translateX(0);
  }
}

@-webkit-keyframes center-to-left {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
  }
}

@-moz-keyframes center-to-left {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
         transform: translateX(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(-30px);
         transform: translateX(-30px);
  }
}

@keyframes center-to-left {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-30px);
       -moz-transform: translateX(-30px);
            transform: translateX(-30px);
  }
}

@-webkit-keyframes center-to-right {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
}

@-moz-keyframes center-to-right {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
         transform: translateX(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(30px);
         transform: translateX(30px);
  }
}

@keyframes center-to-right {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(30px);
       -moz-transform: translateX(30px);
            transform: translateX(30px);
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
  }
  60% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
}

@-moz-keyframes bounce {
  0% {
    -moz-transform: scale(1);
         transform: scale(1);
  }
  30% {
    -moz-transform: scale(1.4);
         transform: scale(1.4);
  }
  60% {
    -moz-transform: scale(1.2);
         transform: scale(1.2);
  }
  100% {
    -moz-transform: scale(1.3);
         transform: scale(1.3);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.4);
       -moz-transform: scale(1.4);
            transform: scale(1.4);
  }
  60% {
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1.3);
       -moz-transform: scale(1.3);
            transform: scale(1.3);
  }
}

.lazyload {
  opacity: 0;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
}

.lazyload.loaded {
  opacity: 1;
}

#GradLayer {
  /* for Main contents area bottom's gradation. */
  padding-bottom: 0;
  padding-top: 48px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  #GradLayer {
    background-size: 100% 100px;
  }
}

#Wrapper {
  margin: 0 auto;
}

/* Container */
#Container {
  clear: both;
  width: 980px;
  overflow: hidden;
  margin: 16px auto;
  text-align: left;
}

#Container .Contents {
  padding: 0 50px 80px 50px;
}

#Container hr.Hyde0 {
  clear: both;
  text-align: left;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

#Nav {
  height: 80px;
  padding: 0 20px 0 5%;
}

#Nav #PageTitle {
  width: 112px;
  height: 80px;
  background-image: url(../../_Image/PageTitle.png);
  background-repeat: no-repeat;
}

#Nav #PageTitle a {
  display: block;
  width: 70px;
  height: 80px;
}

#Nav #PageTitle a span {
  display: none;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  #Nav #PageTitle {
    background-image: url(../../_Image/PageTitle@2x.png);
    -webkit-background-size: 70px 80px;
  }
}

/* Overwrite Lang_JP_7.0.css */
#Container {
  width: 100%;
}

#Container p {
  font-size: 14px;
  line-height: 26px;
}

/* CONTENTS */
#Contents {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 17px;
  /* .ThePost */
  /* .PageNavigation */
}

#Contents .ThePost {
  width: 90%;
  clear: both;
  margin: 0 auto 40px;
  padding: 0 0 30px;
  border-bottom: 1px solid #CCC;
}

#Contents .ThePost h3 {
  width: 87%;
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 26px;
  font-weight: bold;
}

#Contents .ThePost h3 a {
  color: #000000;
  text-decoration: none;
}

#Contents .ThePost h3 a:hover {
  color: #4ba53a;
  text-decoration: underline;
}

#Contents .ThePost span.PostDate {
  margin-bottom: 20px;
  display: block;
  font-size: 11px;
  line-height: 14px;
}

#Contents .ThePost .ColumnPostMain p {
  margin-bottom: 18px;
  color: #666;
  line-height: 24px;
}

#Contents .ThePost .ColumnPostMain p a {
  color: #4ba53a;
}

#Contents .ThePost .ColumnPostMain p a span {
  display: block;
  padding-top: 18px;
}

#Contents .ThePost .ColumnPostMain img {
  width: 100%;
  height: auto;
  float: none;
  margin: 0 0 20px;
}

#Contents .PageNavigation {
  width: 90%;
  clear: both;
  margin: 0 auto;
  text-align: right;
}

#Contents .PageNavigation a {
  margin: 0 0 40px;
  padding: 0 0 0 10px;
  display: inline-block;
  color: #000000;
  text-decoration: none;
}

/* .Contents */
#SideBar {
  float: none;
  width: 90%;
  margin: 0 auto;
  padding: 15px 0 0 0;
}

#SideBar h5 {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
}

#SideBar ul {
  margin: 0 0 67px 0;
  padding: 0.8em 0 0;
  list-style: none;
}

#SideBar ul li {
  margin: 0 0.6em 0.5em 0;
  display: inline-block;
  font-size: 13px;
  line-height: 19px;
}

#SideBar ul li a {
  color: #666666;
  text-decoration: none;
}

#SideBar ul.CategoryList {
  margin-bottom: 47px;
  padding: 0 0 32px;
  border-bottom: 1px solid #C9C6C6;
}

#SideBar ul.CategoryList li {
  margin: 0;
  padding: 0;
  display: block;
}

#SideBar ul.CategoryList li a {
  padding: 1.2em 0;
  display: block;
  border-bottom: 1px solid #E3E2E2;
}

#SideBar ul.CategoryList li:last-of-type a {
  border: none;
}
