@charset "utf-8";

/* 上から落ちてくる */
.animation-gif {
  position: absolute;
  width: 100%;
  -webkit-animation: animation-gif 2s ease-in 1s 1 alternate none running;
          animation: animation-gif 2s ease-in 1s 1 alternate none running;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
  @media screen and (max-width:749px) { /* スマホ */
    .animation-gif .item {
      width: 40px;
    }
    @-webkit-keyframes animation-gif {
      0% {
        bottom: 1430px;
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        bottom: 100px;
        opacity: 0;
      }
    }
    @keyframes animation-gif {
      0% {
        bottom: 1430px;
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        bottom: 100px;
        opacity: 0;
      }
    }
  }
  @media screen and (min-width:750px) { /* PC */
    @-webkit-keyframes animation-gif {
      0% {
        bottom: 1520px;
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        bottom: 120px;
        opacity: 0;
      }
    }
    @keyframes animation-gif {
      0% {
        bottom: 1520px;
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        bottom: 120px;
        opacity: 0;
      }
    }
  }


/* git動画 */
.topImage-gif {
  position: relative;
  height: 700px;
}
  .topImage-gif .wrapper {
    text-align: center;
    position: relative;
    bottom: 750px;
  }
  @media screen and (max-width:749px) { /* スマホ */
    .topImage-gif {
      height: 460px;
    }
      .topImage-gif .wrapper {
        bottom: 150px
      }
  }
  @media screen and (min-width:750px) { /* PC */
  }


/* アプリストア誘導 */
.app-area {}
  .app-store {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 30px auto 0 auto;
    padding: 30px 0px;

  }
    .app-store .item {
      width: 33%;
    }
    @media screen and (max-width:749px) { /* スマホ */
      .txt-area {
        padding: 10px 15px;
      }
      .app-store {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        display: block;
      }
        .app-store .item {
          width: 48%;
          display: inline-block;
        }
        .app-store .catch {
          width: 100%;
          text-align: center;
          height: auto;
          margin-bottom: 30px;
        }
    }
    @media screen and (min-width:750px) { /* PC */
      .txt-area {
        width: 650px;
        margin: 0 auto;
      }
      .app-img {
        margin-top: 30px;
      }
      .app-store {
        width: 650px;
      }
      .app-store .item {
        height: 62px;
      }
    }

/* スライドショー */
.media-slide {
  display: none
}
  .media-slide .slick-prev {
    display: none;
  }
  .slick-arrow:before {
    background-repeat: no-repeat;
    background-size: 10px;
    font-family: auto;
    opacity:1;
  }
    .slick-prev:before {
      background-image: url(../img/top/icon_arrow_left.png);
    }
    .slick-next:before {
      background-image: url(../img/top/icon_arrow_right.png);
    }
  @media screen and (max-width:749px) { /* スマホ */
    .media-slide.sp {
      display: block;
    }
  }
  @media screen and (min-width:750px) { /* PC */
    .media-slide.pc {
      display: block;
    }
  }

/* ダンボールの移動 */
.danboru-movie-area {
  position: relative;
}
  @media screen and (max-width:749px) { /* スマホ */
    .danboru-movie-area {
      position: relative;
      width: 100%;
      height: 600px;
      overflow: hidden;
    }
      .danboru-movie {
        position: absolute;
        margin: auto;
        -webkit-animation: rotation 5s ease-in 0s 1 alternate none running;
                animation: rotation 5s ease-in 0s 1 alternate none running;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
      }
      @-webkit-keyframes rotation {
        0% {
          top: 100px;
          left: 0;
          width: 441px;
          height: 200px;
        }
        100% {
          top: -100px;
          left: -900px;
          width: 1324px;
          height: 600px;
        }
      }
      @keyframes rotation {
        0% {
          top: 100px;
          left: 0;
          width: 441px;
          height: 200px;
        }
        100% {
          top: -100px;
          left: -900px;
          width: 1324px;
          height: 600px;
        }
      }
  }
  @media screen and (min-width:750px) { /* PC */
    .danboru-movie-area {
      position: relative;
      width: 960px;
      height: 434px;
    }
      .danboru-movie {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        -webkit-animation: rotation 8s ease-in 0s 1 alternate none running;
                animation: rotation 8s ease-in 0s 1 alternate none running;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
      }
      @keyframes rotation {
        0% {
          right: -300px;
          width: 960px;
          height: 434px;
        }
        100% {
          top: -400px;
          right: -300px;
          width: 3312px;
          height: 1500px;
        }
      }
  }

/* 他 */
.youtube {
  width: 100%;
}
  @media screen and (max-width:749px) { /* スマホ */
    .youtube-area {
      padding: 10px;
    }
      .youtube {
        margin-top: 40px;
      }
  }
  @media screen and (min-width:750px) { /* PC */
    .youtube {
      height: 540px;
    }
  }

.btn-area {
  position: relative;
}
  .linkGuide {
    color: #2ab078;
    text-align: center;
    display: block;
  }
    @media screen and (max-width:749px) { /* スマホ */
      .btn-area {
        margin-top: -30px;
      }
      .linkGuide {
        padding: 30px 0;
      }
    }
    @media screen and (min-width:750px) { /* PC */
      .linkGuide {
        position: absolute;
        left: 0;
        top: 30px;
      }
    }
@charset "utf-8";

/* common */
a{
text-decoration: none;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
}
a:hover{
    opacity: .7;
    text-decoration: none;
}
@media screen and (max-width:749px) { /* スマホ */
  body {
    font-size: 14px;
    letter-spacing: 2px;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

@media screen and (min-width:750px) { /* PC */
  body {
    letter-spacing: 2px;
  }
  .pc {
    display: block;
  }
  .sp {
    display: none;
  }
}

.z1 {
  position: relative;
  z-index: 1 !important;
}
.z2 {
  position: relative;
  z-index: 2 !important;
}
.z3 {
  position: relative;
  z-index: 3 !important;
}
.z10 {
  z-index: 10 !important;
}
.z20 {
  position: relative;
  z-index: 20 !important;
}
.z30 {
  position: relative;
  z-index: 30 !important;
}
.z100 {
  position: relative;
  z-index: 100 !important;
}
.z999 {
  position: relative;
  z-index: 999 !important;
}
p {
  line-height: 2;
}
.is-border-bottom {
  border-bottom: 1px solid #e7e7e7 !important;
}
.is-border-none {
  border: none !important;
}
.add-paddingLayout {
  padding-top: 120px;
  padding-bottom: 120px;
}
  @media screen and (max-width:749px) { /* スマホ */
    .add-paddingLayout {
      padding-top: 30px;
      padding-bottom: 30px;
    }
    .is-main .add-paddingLayout {
      padding-top: 100px;
      padding-bottom: 100px;
    }
  }
  @media screen and (min-width:750px) { /* PC */
    .is-sub .add-paddingLayout {
      padding-top: 60px;
      padding-bottom: 60px;
    }
  }
.mt0 {
  margin-top: 0 !important;
}
.pt0 {
  padding-top: 0 !important;
}

/* -----
  layout
  -----*/
.container {
  position: relative;
}
  .container.background01 {
    background-color: #f5f5f0;
  }
    .container-image {
      position: relative;
    }
  @media screen and (max-width:749px) { /* スマホ */
   
   .container-image {
 
    }
      .container-image .page-header,
      .container-image .container-txt {
        margin-left: 15px;
        margin-right: 15px;
      }
      .container-txt {
        margin-left: 50px;
        margin-right: 50px;
      }
  }
  @media screen and (min-width:750px) { /* PC */
    .container-image {
      /** width: 960px; **/
      width: 100%;
      margin: 0 auto;
    }
    .container-image.-wide {
      width: 1134px;
    }
  }
/* containerの周り全体の要素 */
.container-cover {
  margin-bottom: 60px;
}

/* -----
  layout End
  -----*/

/* -----
  components
  -----*/
/* ヘッダー */
.site-header {
  padding: 10px 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,0.9);
  width: 100%;
  z-index: 10;
}
  .site-header .logo {
    display: block;
  }
  .site-header .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  @media screen and (max-width:749px) { /* スマホ */
    .header {
      height: 60px;
    }
    .site-header {
      padding: 15px 10px;
    }
      .site-header .logo {
        width: 100px;
        height: 17.7px;
        background: url(/assets/img/top/sp/logo_okippa.png) no-repeat;
        background-size: 100px 17.7px;
      }
  }
  @media screen and (min-width:750px) { /* PC */
    .header {
      height: 90px;
    }
    .site-header .wrapper {
      width: 960px;
      margin: 0 auto;
    }
    .site-header .logo {
      width: 70px;
      height: 70px;
      background: url(/assets/img/top/logo_okippa.png) no-repeat;
      background-size: 70px 70px;
    }
    .site-header .rCont {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
      .site-header .rCont .twBtn {
        margin: 0 0 0 10px;
      }
        .twBtn img {
          max-width: none;
        }
  }

/* タイトル */
.page-header {
  font-size: 24px;
  margin-bottom: 10px;
}
  .page-header.-lv2 {
    margin-bottom: 10px;
  }
    .page-header.-lv2.-main {
      margin-bottom: 90px;
      text-align: center;
      font-weight: bold;
    }
    .page-header.-lv2.-normal {
   position: relative;
    text-align: center;
    font-weight: bold;
    }
    .page-header.-lv2.-normal span{
    font-size: 14px;
    color: #98A6B5;
    font-weight: normal;
    }
   /*   .page-header.-lv2.-normal:before {
        content: '';
        position: absolute;
        left: -26px;
        top: 8px;
        width: 21.6px;
        height: 21.6px;
        border: solid 6px #2ab078;
        border-radius: 50%;
      }*/
  .page-header.-lv3 {
    text-align: center;
  }

  .page-header.-special {
    display: inline-block;
    color: #2ab078;
    border: 1px solid #2ab078;
    border-radius: 22.5px;
    line-height: 45px;
    padding: 0 20px;
    text-align: center;
    margin: 0 auto;
  }
  .page-header.-sub {
    margin: 0 0 40px 30px;
    position: relative;
  }
  @media screen and (max-width:749px) { /* スマホ */
    .page-header {
      font-size: 17px;
    }
      .page-header.-lv2.-main {
        margin-bottom: 0;
      }
      .page-header.-lv2.-normal:before {
        top: 5px;
      }
    .page-header.-sub {
      margin: 0;
    }
  }
  @media screen and (min-width:750px) { /* PC */
  }


/* コンテンツリスト */
.content-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  flex-wrap: wrap;
}
  .content-card .item {
    padding: 10px;
  }
    .content-card .itemWrap {
      margin: 7.5px;
      background-color: #f5f5f0;
      border-radius: 10px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
      .content-card .item img {
        border-radius: 10px;
      }
      .content-card .btn {
        margin-top: 35px;
      }
      .content-card .date {
        color: #2ab078;
      }
  @media screen and (max-width:749px) { /* スマホ */
    .content-card {
      display: block;
    }
      .content-card .item {
        margin-bottom: 30px;
      }
  }
  @media screen and (min-width:750px) { /* PC */
    .content-card .item {
      padding: 10px;
      width: 320px;
    }
  }

  /* ユーザーの声 */
  .user_voice {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
    .user_voice .item {
      padding: 0;
    }
      .user_voice .item .itemWrap {
        padding: 25px;
      }
      .user_voice .user{
        width:20%;
        font-size: 11px;
        text-align: center;
      }
      .user_voice .txt{
        width: 73%;
        margin-left: 10px;
      }
  @media screen and (max-width:749px) { /* スマホ */
  }
  @media screen and (min-width:750px) { /* PC */
    .user_voice .item {
      width: 50%;
    }
  }

  /* よくある質問 */
  .faq-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-bottom: 40px;
  }
    .faq-list .item {
      width: 50%;
      padding: 0;
    }
      .faq-list .itemWrap {
        display: block;
        position: relative;
      }
        .faq-list .answer {
          background-color: #f5f5e0;
        }
        .faq-list .question, .faq-list .answer {
          position: relative;
          padding: 35px;
        }
          .faq-list .question:before, .faq-list .answer:before {
            content: '';
            position: absolute;
            top: 10px;
            left: 10px;
            background-size: 20px;
            display: block;
            width: 20px;
            height: 20px;
            background-repeat: no-repeat;
          }
          .faq-list .question:before {
            background-image: url(/assets/img/top/question_q.jpg);
          }
          .faq-list .answer:before {
            background-image: url(/assets/img/top/question_a.jpg);
          }
        .faq-list .answer {
          display: none; /* デフォルト隠す */
        }
  @media screen and (max-width:749px) { /* スマホ */
    .faq-list .item {
      width: 100%;
    }
  }
  @media screen and (min-width:750px) { /* PC */
  }

/* 画像セクション */
.sec-image .itemImg {
  position: relative;
  background: url(/assets/img/top/image_model01.jpg) no-repeat;
  background-size: cover;
}
  .sec-image.-type2 .itemImg {
    background-image: url(/assets/img/top/image_model02.jpg);
  }
  @media screen and (max-width:749px) { /* スマホ */
    .sec-image.-type2 {
      margin-top: 100px;
    }
    .sec-image .itemImg {
      height: 260px;
      border-radius: 10px;
    }
  }
  @media screen and (min-width:750px) { /* PC */
    .sec-image {
      height: 520px;
      width: 1000px;
      background-position: 0px -148px;
    }
    .sec-image .itemImg {
      height: 500px;
      border-radius: 30px;
    }
    .sec-image.-type2 {
      margin-top: 120px;
    }
  }

/* 吹き出し */
.message-box .page-header {
  font-size: 24px;
}
  @media screen and (max-width:749px) { /* スマホ */
    .message-box {
      margin-top: 30px;
    }
      .message-box .page-header {
        font-size: 17px;
      }
  }
  @media screen and (min-width:750px) { /* PC */
    .message-box {
      position: absolute;
      background-color: #fff;
      padding: 50px;
      bottom: -80px;
      right: -20px;
      width: 500px;
      border-radius: 20px;
    }
  }

/* ボタン */
.btn {
  display: block;
  margin: 0 auto;
  line-height: 63px;
  border-radius: 47px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 30px;
}
  .btn.-main {
    border: 7px solid #d4f3ca;
    background-color: #2ab078;
    color: #fff;
  }
  .btn.-sub {
    border: none;
    background-color: #fff;
    color: #434343;
    line-height: 45px;
    font-size: 16px;
  }
    .btn.-sub:hover, .btn.-sub:active {
      color: #434343;
    }
  .btn:hover, .btn:active {
    color: #fff;
    opacity: 0.8;
  }
  @media screen and (max-width:749px) { /* スマホ */
    .btn {
      font-size: 17px;
    }
  }
  @media screen and (min-width:750px) { /* PC */
    .btn {
      width: 312px;
    }
  }


/* サイトナビ */
.site-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
}
  .site-nav .item {
    width: 25%;
    position: relative;
  }
    .site-nav .item a {
      display: block;
      color: #2ab078;
      border-right: 1px solid #e6e6e6;
      line-height: 50px;
      margin: 20px 0;
    }
      .site-nav .item a:hover {
        opacity: 0.8;
      }
    .site-nav .item span {
      position: relative;
    }
      .site-nav .item span:before {
        content: '';
        display: inline-block;
        position: absolute;
        width: 40px;
        height: 40px;
        background-size: 40px;
        left: -45px;
        top: -12px;
      }
      .site-nav .blog:before {
        background: url(/assets/img/top/icon_blog.jpg) no-repeat;
      }
      .site-nav .inquiry:before {
        background: url(/assets/img/top/icon_letter.jpg) no-repeat;
      }
      .site-nav .guide:before {
        background: url(/assets/img/top/icon_guide.jpg) no-repeat;
      }
      .site-nav .question:before {
        background: url(/assets/img/top/icon_question.jpg) no-repeat;
      }
  @media screen and (max-width:749px) { /* スマホ */
    .site-nav {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }
      .site-nav .item {
        width: 50%;
        line-height: 60px;
        margin-top: 10px;
      }
        .site-nav .item a {
          border: none;
        }
  }
  @media screen and (min-width:750px) { /* PC */
  }

/* フッター最後のリスト */
/*footer*/

footer {
    color: #ffffff;
    padding: 0;
}

.footer-nav {
    margin-bottom: 2em;
}

.footer-nav p {
    font-size: 16px;
}

.footer-end {
  background-color: #f7f7f4;
  padding: 45px 0 0 0;
}
  .site-nav-sub {
    text-align: center;
    padding-bottom: 45px;
  }
    .site-nav-sub .item {
      padding: 0 30px;
      line-height: 1;
    }
      .site-nav-sub a {
        color: #434343;
      }
    .yper-link {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: 11px;
      background-color: #fff;
      border-radius: 10px;
      padding: 25px;
      text-align: center;
    }
      .yper-link img {
        height: 40px !important;
        margin-right: 10px;
      }
    .copyright {
      font-size: 11px;
      margin-left: 10px;
    }
  @media screen and (max-width:749px) { /* スマホ */
    .footer-end {
      padding-top: 30px;
      padding-bottom: 30px;
    }
      .site-nav-sub {
        padding-bottom: 30px;
      }
        .site-nav-sub .item{
          line-height: 44px;
        }
      .yper-link {
        margin-bottom: 30px;
      }
  }
  @media screen and (min-width:750px) { /* PC */
    .site-nav-sub {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
      .site-nav-sub .item{
        border-right: 1px solid #434343;
      }
      .site-nav-sub .item:last-of-type {
        border-right: none;
      }
    .footer-info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: justify;
                  -ms-flex-pack: justify;
                      justify-content: space-between;
    }
      .yper-link .address {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: left;
      }
      .yper-link .address p:first-of-type {
        margin-right: 10px;
      }
  }

/* 注釈リスト */
.comment-list {
  font-size: 11px;
}
  .comment-list .item{
    padding-left: 1em;
    text-indent: -1em;
  }
  @media screen and (max-width:749px) { /* スマホ */
    .comment-list {
      padding: 30px 0;
      font-size: 10px;
    }
  }
  @media screen and (min-width:750px) { /* PC */
    .comment-list {
      font-size: 11px;
      padding: 30px 0;
      width: 960px;
      margin: 0 auto;
      border-top: 1px solid #f5f5f0;
      border-bottom: 3px solid #f5f5f0;
    }
  }
/* -----
  components End
  -----*/


/* txtを飛ばす */
.txtHide {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/* bulma reset */
img {
/*  max-width: none; */
  height: inherit
}

/* リンク */
.link-area {
  display: block;
  color: #4a4a4a;
}
  .link-area:hover {
    opacity: 0.8;
  }

/* 検索フォーム */
.search-form {
  position: relative;
}
  .search-form .textForm {
    line-height: 35px;
    border-radius: 18px;
    border: 1px solid #e7e7e7;
    vertical-align: top;
    width: 222px;
    padding: 0 10px;
  }
  .search-form .searchImg {
    position: absolute;
    right: 5px;
    top: 6px;
  }

/* ページネーション */
.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 24px;
  color: #adadae;
}
  .page-numbers > li > a, .page-numbers > li > span {
    width: 46px;
    height: 46px;
    display: flex;
  }
  .page-numbers img {
    height: auto;
  }
  .page-numbers .current {
    color: #4a4a4a;
  }
  @media screen and (max-width:749px) { /* スマホ */
  }
  @media screen and (min-width:750px) { /* PC */
    .page-numbers {
      margin-top: 30px;
    }
  }

/* シェアボタン*/
.shareBtn-list {
  display: flex;
  align-items: center;
}
  @media screen and (max-width:749px) { /* スマホ */
    .shareBtn-list {
      justify-content: space-around;
    }
      .shareBtn-list li {
        width: 80px;
        text-align: center;
      }
  }
  @media screen and (min-width:750px) { /* PC */
    .shareBtn-list {
      justify-content: center;
      /** padding: 60px 0 0 0; **/
    }
      .shareBtn-list li {
        width: 80px;
        text-align: center;
      }
  }

/* -----
  コンテンツ
  -----*/
.blog {}
  @media screen and (max-width:749px) { /* スマホ */
    .blog.content-card .item img {
      width: 100%;
    }
  }
  @media screen and (min-width:750px) { /* PC */
    .blog.content-card .item img {
      width: 300px;
      height: 200px;
    }
  }

/* -----
  人気記事
  -----*/
.popularpost .list {
  background-color: transparent;
}
.article-list .popularpost {
  margin: 0;
}
  .list .post_links {
    border: none;
  }
  #page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 14px;
  line-height: 1;
  z-index: 99;
}
#page-top a {
  text-decoration: none;
  color: #fff;
  width: 60px;
  text-align: center;
  display: block;
  border-radius: 90px;
  opacity: 0.9;
  transition: all .3s ease;
}
#page-top a:hover {
  text-decoration: none;
  opacity: .5;
}
#page-top img{
width:100%;
}
@media screen and (max-width: 900px){
#page-top {
  bottom: 10px;
  right: 10px;
}
#page-top a {
  width: 30px;
}
}

#wpstats {
  display: none;
}

body{
font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    font-size:16px;
}
a{
color:#2AB078;
text-decoration: none;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
}
a:hover{
    opacity: .7;
    text-decoration: none;
}
img{
margin:20px auto;
}
  @media screen and (max-width:749px) { /* スマホ */
  img{
margin:10px auto;
}
  }
/*
.site-header2 {
  background: url(/assets/img/blog/blog_top.png);
}*/
  .site-header2 h1 {
    font-weight: bold;
    top: 50%;
    left: 100px;
    position: absolute;
    font-size: 24px;
        transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
  .site-header2 .img {
  }
  @media screen and (max-width:749px) { /* スマホ */
    .site-header2 {
      background-size: 46px;
      margin-bottom: 60px;
    }
    body{
		font-size:14px;
}
      .site-header2 .container {

        text-align: center;
      }
 
      .site-header2 .img {
      }
          .site-header2 h1{
    top: 25%;
    left: 5%;
    transform: translateY(-25%);
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    }

  }
  @media screen and (min-width:750px) { /* PC */
  /*  .site-header2 {
      background-size: 50px;
      height: 170px;
    }*/

      .site-header2 .img {
        position: absolute;
        top: 0;
        height: 161px;
        right: 170px;
      }
  }

.article-list {
}
  /* reset */
  .article-list .list {
    box-shadow: none;
  }
  .article-list .popularbox {
      display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: space-between;
    flex-wrap: wrap;
        width: 90%;
    margin: 0 auto;
    max-width: 1000px;
  }
  .article-list .popularbox .list_big{
      padding: 10px;
    width: 32%;
  }
    .article-list .popularpost {
      margin: 0 10px;
    }
      .article-list .popularpost:hover {
        opacity: 0.8;
      }
    .article-list .post_thumb {
     width: 270px;
    object-fit: cover;
    height: 180px;
    margin: auto;
    background-size: cover;
	margin: 20px auto;  
    background-position: center;
    }
    .article-list a {
      color: #4a4a4a;
    }
     @media screen and (max-width:749px) { /* スマホ */
    .article-list .container{
    padding:0;
    }
    .article-list .post_thumb {
      width: 100%;
    }
      .article-list .popularbox{
      width:100%;
      }
  }
     @media screen and (max-width:499px) {
    .article-list .post_thumb {
    height: 100px;
    }
  }
    @media screen and (min-width: 500px) and (max-width: 749px){
    .article-list .post_thumb {
    height: 200px;
    }
  }
  @media screen and (min-width: 750px) and (max-width: 999px){
    .article-list .post_thumb {
    width: 200px;
    object-fit: cover;
    height: 140px;
    }
  }
  @media screen and (min-width:1000px) { /* PC */
     .article-list .post_thumb {
    width: 270px;
    object-fit: cover;
    height: 180px;
    }
  }
  @media screen and (max-width:749px) { /* スマホ */
  .article-list .post_thumb{
    width: 100%;
    object-fit: cover;
    margin: auto;
    background-size: cover;
    margin: 20px auto;
}
.article-list .popularbox .list_big{
	padding:0;
   width:48%;
}
    .article-list {
    }
      .article-list .popularpost {
        margin-bottom: 30px;
      }
  }
  @media screen and (min-width:750px) { /* PC */
    .article-list .popularbox {
      display: flex;
    }
      .article-list .popularpost {
        padding: 10px;
        width: 320px;
      }
  }

  .container {}
  @media screen and (min-width:750px) { /* PC */
    .post_body .container {
      max-width: 1000px;
      width:80%;
      margin:40px auto;
    }
      .post_body .container-image {
        width: 100%;
      }
  }
  @media screen and (max-width:749px) { /* スマホ */
  }

/*
  見出し
  */
.post_body h1 {
  border: none;
 margin-bottom:20px;
}
  .post_body h1 > span {
    padding: 0;
  }
  @media screen and (min-width:750px) { /* PC */
    .post_body h1 {
      font-size: 30px;
     padding:10px 0 20px;
      font-weight: bold;
    }
  }
  @media screen and (max-width:749px) { /* スマホ */
    .post_body h1 {
      font-size: 20px;
     padding:10px 0 0;
    }
  }

.post_body h2 {
  font-weight: bold;
  font-size:24px;
  padding:30px 0 20px;
  
}
.post_body h2{
	position:relative;
}
.post_body h2:before{
	position: absolute;
    content: "";
    z-index: 0;
    bottom: 0;
    left: 0px;
    width: 100%;
    height: 6px;
    border-radius: 5px;
    background-image: linear-gradient(-45deg, transparent 25%, #CCC5B8 25%, #CCC5B8 50%, transparent 50%, transparent 75%, #CCC5B8 75%, #CCC5B8);
    background-size: 6px 6px;
}
  .post_body h2 > span {
    padding: 0;
    border: none;
  }
  @media screen and (min-width:750px) { /* PC */

  }
  @media screen and (max-width:749px) { /* スマホ */
.post_body h2{
	font-size:16px;
	padding-bottom:15px;
}
.post_body h2:before{
height:4px;
}

  }
  .post_body h3{
    border-bottom: 5px dotted #CCC5B9;
    border-left:none;
    background:none;
    font-size: 18px;
    padding: 0.4em 0;
}
.post_body h4 {
  background: #CCC5B9;
  border: none;
  font-weight: bold;
  margin-bottom:5px;
}
.post_body h4:before{
display:none;
}
  .post_body h4 > span {
    padding: 0;
  }
  @media screen and (min-width:750px) { /* PC */
    .post_body h4 {
      font-size: 16px;
      padding: 15px;
    }
  }
  @media screen and (max-width:749px) { /* スマホ */
    .post_body h4{
      font-size: 12px;
      padding: 10px;
    }
  }
.post_body h5 {
  line-height: 1.5;
  border: none;
  border-bottom: 2px solid #DEDEDE;
}
  .post_body h5 > span {
    padding: 0;
  }
  .post_body h5:before {
    display: none;
  }
  @media screen and (min-width:750px) { /* PC */
    .post_body h5 {
      font-size: 19px;
      font-weight: bold;
      padding: 7.5px 0;
    }
  }
  @media screen and (max-width:749px) { /* スマホ */
    .post_body h5 {
      font-size: 14.5px;
      font-weight: normal;
      padding: 11.5px 0;
    }
  }

.post_body {
  word-break: break-word;
}
  @media screen and (min-width:750px) { /* PC */
  }
  @media screen and (max-width:749px) { /* スマホ */
    .post_body {
      padding: 0 10px;
    }
  }

.post-date {
 	color: #98A6B5;
   font-size: 14px;
   text-align:right;
}

.post-content {
  padding: 10px 0;
}
  @media screen and (min-width:750px) { /* PC */
  }
  @media screen and (max-width:749px) { /* スマホ */
  }
  
/*ブログ下部共通*/
.btn-okippa-rakuten {
    width: 200px;
    height: 52px;
    border-radius: 4px;
    background-color: #D22C39;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.23;
    text-align: center;
    color: #fff;
    padding: 17px 0;
    border: solid 2px #D22C39;
}
.btn-okippa-yahoo-shopping {
    width: 200px;
    height: 52px;
    border-radius: 4px;
    background-color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.23;
    text-align: center;
    color: #FF0433;
    padding: 17px 0;
    border: solid 2px #FF0433;
}
.btn-okippa-yahoo-shopping:hover {
    color: #ff4d6d;
}

.btn-okippa {
    width: 200px;
    height: 52px;
    border-radius: 4px;
    background-color: #2ab978;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.23;
    text-align: center;
    color: #ffffff;
    padding: 17px 0;
}

.btn-okippa-amazon {
    width: 200px;
    height: 52px;
    border-radius: 4px;
    background-color: #fff;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.23;
    text-align: center;
    color: #000;
    padding: 17px 0;
    border: solid 2px #fa9901;
}
.btn-okippa-amazon:hover {
    color: #666;
}

.pc-area .btn-okippa {
    margin-left: 0;
}

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

    .btn-okippa {
        width: 200px;
        height: 52px;
        border-radius: 4px;
        background-color: #2ab978;
        font-size: 13px;
        font-weight: bold;
        line-height: 1.23;
        text-align: center;
        color: #ffffff;
        padding: 17px 0;
        /*margin-left: 0;*/
    }

    .btn-okippa-amazon {
        width: 200px;
        height: 52px;
        border-radius: 4px;
        background-color: #fff;
        font-size: 13px;
        font-weight: bold;
        line-height: 1.23;
        text-align: center;
        color: #000;
        padding: 17px 0;
        border: solid 2px #fa9901;
        /*margin-right: 0;*/
        margin-bottom: 24px;
    }
}

.pc-area {
    display: block;
}

.sp-area {
    display: none;
}

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

@media screen and (max-width: 900px) {
    .sp-img {
        width: 100%;
    }
    .pc-area {
        display: none;
    }
    .sp-area {
        display: block;
    }
    .pc-center {
        text-align: start;
    }
}

.pager-post-navi {
margin-bottom: 32px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: initial;
    justify-content: space-between;
}

.pager-post-navi a {
    padding: 10px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    font-size: .8em;
}
.pager-post-navi a.prev-post {
   flex-direction: row;
    padding-left: 5px;
    width: 40%;
    cursor: pointer;
}
.pager-post-navi a.next-post {
    flex-direction: row-reverse;
    width: 40%;
    cursor: pointer;
}

.pager-post-navi a figure {
    min-width: 120px;
    max-width: 120px;
}

.pager-post-navi a.prev-post .prev-post-title {
    margin-left: 10px;
}
.pager-post-navi a.next-post .next-post-title {
    margin-right: 10px;
}

.a--button {
    width: 30%;
    margin:auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-decoration: none;
}
@media screen and (max-width:749px) {
.pager-post-navi a.prev-post,
.pager-post-navi a.next-post{
display:block;
}
.a--button{
width:60%;
}
}
.okippa__button {
    z-index: 1;
	width:100%;
    max-width: 100%;
    height: 48px;
    border-radius: 24px;
    border-style: none;
    color: #ffffff;
    background: #2AB978;
    font-size: 16px;
    font-weight: 600;
    vertical-align: middle;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    margin-bottom: 2.4rem;
}

/* reset */
ol {
  margin-left: 30px;
}
.detail {
  padding-top: 0;
}

/*追加*/
#toc_container{
    background: #fff;
    border: 4px double #CCC5B8;
    padding: 30px 10%;
    margin-bottom: 1em;
    width: 100%;
}
#toc_container a{
	color:#777777;
}
#toc_container li a::before{
　content: "«";
}
#toc_container span.toc_toggle{
	font-weight:bold;
}

@media screen and (max-width:749px) { /* スマホ */
   #toc_container{
   padding:20px 5%;
   }
   .lkc-external-wrap,
   .lkc-internal-wrap{
     width:100%;
    }
    .lkc-thumbnail{
    padding:0;
    width:23%;
    }
    .lkc-title-text{
    font-size:12px;}
  }

.linkcard{
	margin:50px auto;
}
.lkc-external-wrap,
.lkc-internal-wrap{
  position: relative;
  margin: 15px 0 16px;
  padding:15px 20px 25px;
  border: 2px solid #CCC5B9;
  background-color: #fff;
  width:90%;
  margin:auto;
  max-width:none;
      border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.lkc-external-wrap p:last-child,
.lkc-internal-wrap p:last-child{
  margin-bottom: 0;
}

.lkc-external-wrap::before,
.lkc-internal-wrap::before {
  font-family: FontAwesome;
  position: absolute;
  bottom: 100%;
  left: 5px;
  padding: 7px 20px 5px;
  content: "あわせて読みたい";
  background-color: #CCC5B9;
  color: #fff;
  font-weight: bold;
  border-radius: 15px 15px 0px 0px;
  font-size:14px;
}
#toc_container li{
	margin-bottom:10px;
}
.lkc-title{
   margin-bottom: 10px;
}
.lkc-title-text{
	padding-left: 20px;
    display:block;
}
.lkc-url{
	padding-left: 20px;
    margin-bottom:10px;
}
.lkc-excerpt{
	padding-left: 20px;
}
.lkc-thumbnail{
	max-width:none;
   max-height:none;
   width:20%;
   padding:10px;
}
img.lkc-thumbnail-img{
	width:100%;
}
.lkc-content{

}


.under{
    background: linear-gradient(transparent 70%,yellow 70%);
    font-weight:bold;
}

.box1{
border: 2px solid #CCC5B9;
    padding: 20px;
    border-radius: 30px;
    margin: 30px 0;
    line-height:2;
}
.box2{
border: 2px solid #2AB978;
    padding: 30px;
    border-radius: 30px;
    margin: 30px 0;
        line-height:2;
}
.box4{
border:2px solid #2AB978;
padding:20px;
}
.box4 .box-title{
	color:#2AB978;
}
.box4 ul{
margin-bottom:0;
margin-top:20px;
}
.box1 ul{
margin-bottom:0;
margin-top:0px;
}
@media screen and (max-width:749px) { /* スマホ */
.box1,.box2{
	padding:10px 20px;
    margin:20px auto;
}
}
/*table*/
.footable{
	margin-bottom:20px;
   border-radius:0;
   border:1px solid #CCC5B9;
   border-collapse: collapse;
}

.footable>thead>tr>th, .footable>thead>tr>td{
background-color: #F7F3ED;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#F7F3ED),to(#F7F3ED));
    background-image: -webkit-linear-gradient(top,#F7F3ED,#F7F3ED);
    background-image: -moz-linear-gradient(top,#F7F3ED,#F7F3ED);
    background-image: -ms-linear-gradient(top,#F7F3ED,#F7F3ED);
    background-image: -o-linear-gradient(top,#F7F3ED,#F7F3ED);
    background-image: linear-gradient(to bottom,#F7F3ED,#F7F3ED);
}
.footable>tbody>tr>td{
	padding:20px;
   border-top: 1px solid #CCC5B9;
    border-left: 1px solid #CCC5B9;
}
.footable>thead>tr>th{
	padding:30px 15px;
   border-left: 1px solid #CCC5B9;
}
.footable>tbody>tr:hover{
	background-color: inherit;
}
@media screen and (max-width:749px) { /* スマホ */
.footable{
font-size:12px;
}
.footable>thead>tr>th{
	padding:10px;
}
}
.container-cover{
background:#fff;
}
.pagination{
margin:0;
}
@media screen and (max-width:749px) {
.pick-up__block{
display:block;
}
.pick-up__block img{
margin:0 auto;}
}
.container-image__block{
 	display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 60px 30px 30px;
 }
  .container-image__block div{
  	 width: 50%;
    padding: 30px;
  }
    .container-image__block img{
  	width: 50%;
    height: auto;
    margin-top: 0;
  }

.container-image__block .block-title{
	font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.container-image__block .block-subtitle{
	font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
}

.container-image__block .block-text{

}
  @media screen and (max-width:749px) { /* スマホ */
   .container-image__block {
      display:block;
      padding:50px 5% 10px;
    }
    .container-image__block div{
		padding:0;
    width:100%;
}
.container-image__block img{
	width:100%;
    margin-top:20px;
}
.container-image__block .block-title{
	font-size:18px;
}

  }
.pick-up__block{
	display:flex;
   flex-wrap:wrap;
   justify-content: space-between;
   width:90%;
   margin:auto;

}
.pick-up__block a{
	width:32%;
}
.pick-up p{
    width: 90%;
    margin: auto;
    text-align: center;
    color: #A5A5A5;
    font-weight: bold;
    border-bottom: 1px solid  #A5A5A5;
    margin-bottom: 30px;
    padding-bottom: 10px;
}
  @media screen and (max-width:749px) { /* スマホ */
.pick-up__block a{
	width:100%;
    margin:5px auto;
}
  }
 .container-image.link{
    background: #F6F6F6;
    padding:0;
    padding-bottom: 60px;
    margin-bottom: 60px;
 }
 .list_big .post_ttl{
height:auto;
}