@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/* Scss Document */
/*------------------------
		タイトルイメージ
------------------------*/
.mainimg {
  position: relative; }
  .mainimg__box .arrow {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 90%;
    width: 10%;
    max-width: 50px; }

/*------------------------
		メニューボタン
------------------------*/
.menubtn {
  padding: 40px 0; }
  .menubtn__wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between; }
    .menubtn__wrap .btn {
      flex: 0 1 49%;
      width: 49%;
      max-width: 49%; }
      .menubtn__wrap .btn a {
        position: relative;
        padding: 20px 0;
        border-radius: 0px;
        border: 1px solid #1BA0BB;
        background: #1BA0BB;
        color: #fff;
        font-size: 1.4rem; }
        @media (min-width: 769px) {
          .menubtn__wrap .btn a {
            font-size: calc( 1.4rem + ( 1vw - 7.69px ) * 4.7120418848 ); } }
        @media (min-width: 960px) {
          .menubtn__wrap .btn a {
            font-size: 2.3rem; } }
        .menubtn__wrap .btn a:before {
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          top: 45%;
          right: 5%;
          border: 5px solid transparent;
          border-top: 7px solid #fff;
          z-index: 1; }
        .menubtn__wrap .btn a:hover {
          color: #1BA0BB;
          background: #fff; }
          .menubtn__wrap .btn a:hover:before {
            border-top: 7px solid #1BA0BB; }

/*------------------------
　 　　定期便キャッチコピー
------------------------*/
.copy {
  padding: 5% 0;
  background: url("/kitshigadane/img/common/bg_sp.png") center/cover no-repeat; }
  .copy h2 {
    width: 70%;
    max-width: 800px;
    margin: 10px auto; }

/*------------------------
		入会注意
------------------------*/
.attention-box {
  max-width: 780px;
  margin: auto;
  margin-bottom: 40px;
  padding: 20px;
  border: 5px solid #E40011;
  color: #E40011;
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-weight: bold; }
  .attention-box-point {
    margin-bottom: 10px;
    font-size: 1.8rem;
    text-align: center; }
    @media (min-width: 769px) {
      .attention-box-point {
        font-size: calc( 1.8rem + ( 1vw - 7.69px ) * 1.0471204188 ); } }
    @media (min-width: 960px) {
      .attention-box-point {
        font-size: 2rem; } }
  .attention-box p {
    font-size: 1.4rem; }
    @media (min-width: 769px) {
      .attention-box p {
        font-size: calc( 1.4rem + ( 1vw - 7.69px ) * 1.0471204188 ); } }
    @media (min-width: 960px) {
      .attention-box p {
        font-size: 1.6rem; } }

/*------------------------
　 　　入会金について
------------------------*/
.join figure {
  margin-bottom: 5%; }
.join__discount {
  margin-bottom: 7%; }
  .join__discount h3 {
    margin-bottom: 30px;
    color: #1BA0BB;
    font-size: 2.5rem;
    font-family: a-otf-ryumin-pr6n, "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    font-weight: bold; }
    @media (min-width: 769px) {
      .join__discount h3 {
        font-size: calc( 2.5rem + ( 1vw - 7.69px ) * 2.6178010471 ); } }
    @media (min-width: 960px) {
      .join__discount h3 {
        font-size: 3rem; } }
  .join__discount p {
    font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; }
.join__present {
  margin-bottom: 30px;
  padding: 50px 2%;
  background: url("/kitshigadane/img/common/bg_sp.png") center/cover no-repeat; }
  .join__present h3 {
    max-width: 800px;
    width: 80%;
    margin: auto;
    margin-bottom: 40px; }
  .join__present-cap {
    margin-bottom: 40px;
    font-size: 1rem;
    font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bold; }
    @media (min-width: 769px) {
      .join__present-cap {
        font-size: calc( 1rem + ( 1vw - 7.69px ) * 1.0471204188 ); } }
    @media (min-width: 960px) {
      .join__present-cap {
        font-size: 1.2rem; } }
  .join__present figure {
    max-width: 650px;
    margin: auto;
    margin-bottom: 40px; }
  .join__present-txt {
    max-width: 600px;
    margin: auto;
    margin-bottom: 70px;
    font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; }

/*------------------------
　 　　おすすめ記事
------------------------*/
.article__wrap {
  margin-bottom: 30px;
  padding: 7%;
  background: url("/kitshigadane/img/teikibin/article_bg_sp.jpg") center/cover no-repeat; }
  .article__wrap-contents {
    padding: 8% 6% 1%;
    border-radius: 20px 20px 0 0;
    background: #fff; }
    .article__wrap-contents-recommended {
      margin-bottom: 15%; }
      .article__wrap-contents-recommended h3 {
        max-width: 700px;
        margin: auto; }
      .article__wrap-contents-recommended p {
        margin-bottom: 30px;
        color: #D27663;
        font-size: 2.2rem;
        text-align: center;
        line-height: 1.3;
        font-weight: bold; }
        @media (min-width: 769px) {
          .article__wrap-contents-recommended p {
            font-size: calc( 2.2rem + ( 1vw - 7.69px ) * 9.4240837696 ); } }
        @media (min-width: 960px) {
          .article__wrap-contents-recommended p {
            font-size: 4rem; } }
      .article__wrap-contents-recommended ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between; }
        .article__wrap-contents-recommended ul li {
          flex: 0 1 49%;
          width: 49%;
          max-width: 49%;
          margin-bottom: 3%; }
          .article__wrap-contents-recommended ul li figure {
            margin-bottom: 10px; }
          .article__wrap-contents-recommended ul li p {
            margin-bottom: 5px;
            font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
            color: #000;
            font-size: 1rem;
            text-align: left; }
            @media (min-width: 769px) {
              .article__wrap-contents-recommended ul li p {
                font-size: calc( 1rem + ( 1vw - 7.69px ) * 5.2356020942 ); } }
            @media (min-width: 960px) {
              .article__wrap-contents-recommended ul li p {
                font-size: 2rem; } }

/*------------------------
　 　　注目ポイント
------------------------*/
.teikibin__point {
  padding: 15% 0; }
  .teikibin__point-list ul {
    max-width: 1000px;
    margin: auto; }
    .teikibin__point-list ul li {
      margin-bottom: 30px; }
      .teikibin__point-list ul li figure {
        width: 30%;
        margin: auto;
        margin-bottom: 35px; }
      .teikibin__point-list ul li .txt {
        margin-bottom: 5px;
        text-align: center; }
        .teikibin__point-list ul li .txt p {
          display: inline-block;
          background: linear-gradient(transparent 45%, #F9EC00 45%);
          font-size: 1.5rem;
          font-family: a-otf-ryumin-pr6n, "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
          font-weight: bold; }
          @media (min-width: 769px) {
            .teikibin__point-list ul li .txt p {
              font-size: calc( 1.5rem + ( 1vw - 7.69px ) * 2.6178010471 ); } }
          @media (min-width: 960px) {
            .teikibin__point-list ul li .txt p {
              font-size: 2rem; } }
      .teikibin__point-list ul li p {
        font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-size: 1.2rem;
        text-align: center; }
        @media (min-width: 769px) {
          .teikibin__point-list ul li p {
            font-size: calc( 1.2rem + ( 1vw - 7.69px ) * 1.0471204188 ); } }
        @media (min-width: 960px) {
          .teikibin__point-list ul li p {
            font-size: 1.4rem; } }

/*------------------------
　 　　定期便利用者の声
------------------------*/
.teikibin__voice h3 {
  margin-bottom: 25px;
  padding: 10px 0;
  border-top: 1px solid #606060;
  border-bottom: 1px solid #606060;
  color: #D27663;
  font-size: 2.3rem;
  font-weight: bold; }
  @media (min-width: 769px) {
    .teikibin__voice h3 {
      font-size: calc( 2.3rem + ( 1vw - 7.69px ) * 14.1361256545 ); } }
  @media (min-width: 960px) {
    .teikibin__voice h3 {
      font-size: 5rem; } }
  .teikibin__voice h3 span {
    display: inline-block;
    width: 45%;
    max-width: 350px; }
.teikibin__voice-list {
  margin-bottom: 10%; }
  .teikibin__voice-list ul li {
    margin-bottom: 30px; }
  .teikibin__voice-list-user {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
    font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; }
    .teikibin__voice-list-user figure {
      flex: 0 1 20%;
      width: 20%;
      max-width: 20%; }
    .teikibin__voice-list-user .txt {
      flex: 0 1 75%;
      width: 75%;
      max-width: 75%; }
      .teikibin__voice-list-user .txt h4 {
        font-size: 1.5rem;
        line-height: 1.5; }
        @media (min-width: 769px) {
          .teikibin__voice-list-user .txt h4 {
            font-size: calc( 1.5rem + ( 1vw - 7.69px ) * 10.4712041885 ); } }
        @media (min-width: 960px) {
          .teikibin__voice-list-user .txt h4 {
            font-size: 3.5rem; } }
      .teikibin__voice-list-user .txt-name {
        font-size: 1.2rem;
        font-weight: bold; }
        @media (min-width: 769px) {
          .teikibin__voice-list-user .txt-name {
            font-size: calc( 1.2rem + ( 1vw - 7.69px ) * 0 ); } }
        @media (min-width: 960px) {
          .teikibin__voice-list-user .txt-name {
            font-size: 1.2rem; } }
  .teikibin__voice-list p {
    font-size: 1.2rem;
    font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; }
    @media (min-width: 769px) {
      .teikibin__voice-list p {
        font-size: calc( 1.2rem + ( 1vw - 7.69px ) * 1.0471204188 ); } }
    @media (min-width: 960px) {
      .teikibin__voice-list p {
        font-size: 1.4rem; } }

/*------------------------
　 　　入会ステップ
------------------------*/
.step {
  padding: 20px 0;
  background: url("/kitshigadane/img/common/bg_sp.png") center/cover no-repeat; }
  .step h3 {
    max-width: 500px;
    margin: auto;
    margin-bottom: 30px; }
  .step__list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 10px; }
    .step__list-box {
      flex: 0 1 48%;
      width: 48%;
      max-width: 48%;
      text-align: center;
      font-weight: bold; }
      .step__list-box-num {
        display: inline-block;
        margin-bottom: 10px;
        border-bottom: 2px solid #d27663;
        color: #d27663;
        font-size: 2rem; }
        @media (min-width: 769px) {
          .step__list-box-num {
            font-size: calc( 2rem + ( 1vw - 7.69px ) * 2.6178010471 ); } }
        @media (min-width: 960px) {
          .step__list-box-num {
            font-size: 2.5rem; } }
        .step__list-box-num span {
          margin-left: 5px;
          font-size: 2.5rem;
          line-height: 1.2; }
          @media (min-width: 769px) {
            .step__list-box-num span {
              font-size: calc( 2.5rem + ( 1vw - 7.69px ) * 7.8534031414 ); } }
          @media (min-width: 960px) {
            .step__list-box-num span {
              font-size: 4rem; } }
      .step__list-box-txt {
        color: #1BA0BB;
        font-size: 1.8rem;
        line-height: 1.3; }
        @media (min-width: 769px) {
          .step__list-box-txt {
            font-size: calc( 1.8rem + ( 1vw - 7.69px ) * 5.2356020942 ); } }
        @media (min-width: 960px) {
          .step__list-box-txt {
            font-size: 2.8rem; } }
  .step figure {
    max-width: 850px;
    margin: auto;
    margin-bottom: 30px; }
  .step__cap {
    margin-bottom: 5%;
    color: #707070;
    font-size: 1.2rem;
    font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: bold; }
    @media (min-width: 769px) {
      .step__cap {
        font-size: calc( 1.2rem + ( 1vw - 7.69px ) * 1.0471204188 ); } }
    @media (min-width: 960px) {
      .step__cap {
        font-size: 1.4rem; } }
  .step .attention-box {
    margin-bottom: 0; }

/*------------------------
　 　　ボタン＆脚注
------------------------*/
.other {
  padding: 70px 0; }
  .other__btn {
    margin-bottom: 30px; }
  .other__annotation {
    font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; }
    .other__annotation table {
      width: 100%;
      border: 1px solid #606060; }
      .other__annotation table tr {
        border-bottom: 1px solid #606060; }
        .other__annotation table tr th {
          background: #dbdbdb;
          font-size: 1.6rem; }
          @media (min-width: 769px) {
            .other__annotation table tr th {
              font-size: calc( 1.6rem + ( 1vw - 7.69px ) * 1.0471204188 ); } }
          @media (min-width: 960px) {
            .other__annotation table tr th {
              font-size: 1.8rem; } }
        .other__annotation table tr td {
          font-size: 1.4rem;
          font-weight: bold; }
          @media (min-width: 769px) {
            .other__annotation table tr td {
              font-size: calc( 1.4rem + ( 1vw - 7.69px ) * 1.0471204188 ); } }
          @media (min-width: 960px) {
            .other__annotation table tr td {
              font-size: 1.6rem; } }
        .other__annotation table tr th, .other__annotation table tr td {
          padding: 10px; }

/*------------------------
　 　　sns
------------------------*/
.sns {
  margin-bottom: 40px; }
  .sns__link ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 240px; }
    .sns__link ul li {
      margin-bottom: 10px;
      font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; }
      .sns__link ul li .facebook {
        padding: 4px 20px;
        border-radius: 3px;
        background: #577eb6;
        color: #fff;
        font-size: 1.2rem; }
        .sns__link ul li .facebook i {
          margin-right: 5px; }
      .sns__link ul li .twitter {
        padding: 4px 20px;
        border-radius: 3px;
        background: #3594d1;
        color: #fff;
        font-size: 1.2rem; }
        .sns__link ul li .twitter i {
          margin-right: 5px; }
      .sns__link ul li .instagram {
        padding: 4px 20px;
        border-radius: 3px;
        background: #000;
        color: #fff;
        font-size: 1.2rem; }
        .sns__link ul li .instagram i {
          margin-right: 5px; }

/*------------------------------
		769px以上
------------------------------*/
@media screen and (min-width: 769px) {
    /*------------------------
		タイトルイメージ
    ------------------------*/
  .mainimg__box .arrow {
    top: 80%;
    width: 6%; }

  /*------------------------
      定期便キャッチコピー
  ------------------------*/
  .copy {
    background: url("/kitshigadane/img/common/bg_pc.png") center/cover no-repeat; }
    .copy h2 {
      width: 100%;
      max-width: 800px; }

  /*------------------------
      入会金について
  ------------------------*/
  .join__img {
    max-width: 980px;
    margin: 50px auto; }
  .join__discount p {
    max-width: 600px;
    margin: auto;
    line-height: 2.3; }
  .join__present {
    background: url("/kitshigadane/img/common/bg_pc.png") center/cover no-repeat;
    line-height: 2.3; }
    .join__present-cap {
      text-align: center; }

  /*------------------------
      注目ポイント
  ------------------------*/
  .teikibin__point {
    padding: 10% 0;
    background: url("/kitshigadane/img/common/bg_pc.png") center/cover no-repeat; }
    .teikibin__point-list ul {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      flex-flow: row wrap;
      -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
      align-content: flex-start;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between; }
      .teikibin__point-list ul li {
        flex: 0 1 100%;
        width: 100%;
        max-width: 100%; }
        .teikibin__point-list ul li figure {
          width: 30%; }

  .article {
    margin-bottom: 30px; }
    .article__wrap {
      background: url("/kitshigadane/img/teikibin/article_bg_pc.jpg") center/cover no-repeat;
      padding: 3%; }

  /*------------------------
      定期便利用者の声
  ------------------------*/
  .teikibin__voice h3 {
    margin-bottom: 50px;
    padding: 20px 0; }
  .teikibin__voice-list-user .txt {
    flex: 0 1 70%;
    width: 70%;
    max-width: 70%; }
    .teikibin__voice-list-user .txt h4 {
      margin-bottom: 10px; }
  .teikibin__voice-list p {
    line-height: 2.3; }

  /*------------------------
      入会ステップ
  ------------------------*/
  .step {
    background: url("/kitshigadane/img/common/bg_pc.png") center/cover no-repeat; }
    .step__list {
      max-width: 950px;
      margin: auto;
      margin-bottom: 30px; }
    .step__cap {
      margin-bottom: 8%;
      text-align: center; }
    .step h3 {
      margin-bottom: 80px; }
    .step .attention-box {
      margin-bottom: 60px; }

  .sns__link ul li .facebook {
    flex: 0 1 20%;
    width: 20%;
    max-width: 20%; }
  .sns__link ul li .twitter {
    flex: 0 1 70%;
    width: 70%;
    max-width: 70%; } }
/*------------------------------
		961px以上
------------------------------*/
/*------------------------------
		1181px以上
------------------------------*/
/*------------------------------
		1600px以上
------------------------------*/