@charset "utf-8";

body {
  background: #f8f7f3;
}

img {
  pointer-events: none;
  /* 画像がポインターで抜き取れなくなる */
}

.first-view {
  max-width: 1300px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

.first-view-title {
  background: radial-gradient(#ffffff, #f3c5bd);
  z-index: 1;
  width: 370px;
  height: 370px;
  border-radius: 50%;
  padding: 30px 30px 30px;
  position: absolute;
  top: 5px;
  left: 45px;
}

.first-view-title h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 58px;
  font-weight: bold;
  color: #595757;
  line-height: 1.1;
  text-align: center;
}

.first-view-title img {
  width: 68%;
  margin-left: 50px;
  margin-right: 50px;
}

.first-view-title p {
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}

.lead {
  line-height: 1.8;
  margin-top: 5px;
  text-align: center;
}

.lead p {
  font-size: 16px;
}

.menu-change {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
  text-align: center;
  border-bottom: 1px solid #aaaaaa;
}


.jouhou-btn {
  background-color: #f3c5bd;
  ;
  width: 200px;
  height: 50px;
  font-size: 18px;
  color: #333333;
  margin-top: 30px;
  margin-left: 15px;
  margin-right: 15px;
  padding: 15px 0 15px;
  order: -1;
  text-align: center;
  line-height: 1.3;

}

.madori-btn,
.tochi-sindan-btn,
.technical-btn,
.money-btn,
.other-btn {
  width: 200px;
  height: 40px;
  color: #727171;
  font-size: 15px;
  margin-top: 40px;
  margin-right: 15px;
  padding: 10px;
  order: -1;
  text-align: center;
  line-height: 1.3;
}

/*hoverをしたらボックスに影がつき、上に上がる*/
.madori-btn:hover,
.tochi-sindan-btn:hover,
.technical-btn:hover,
.money-btn:hover,
.other-btn:hover,
.pattern-01:hover {
  top: -10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.jouhou-btn {
  background-color: #f3c5bd;
}

.madori-btn {
  background-color: #cde0a7;
}

.tochi-sindan-btn {
  background-color: #f1e1a1;
}

.technical-btn {
  background-color: #cee0cd;
}

.money-btn {
  background-color: #c8e3df;
}

.other-btn {
  background-color: #ebe3bd;
}

/* 各ページ */

.group-title {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.index-title {
  display: flex;
  align-items: flex-start;
  margin-top: 30px;
  margin-left: 20px;
  border-bottom: 4px dotted #f3c5bd;
  width: fit-content;
  /* 要素の幅を合わせる */
}

.index-title img {
  width: 80px;
  margin-left: 10px;
  padding-top: 10px;
}

.index-title h2 {
  font-size: 42px;
  margin-top: 30px;
  margin-right: 0;
  color: #555555;
  padding-left: 30px;
  padding-right: 5px;
  padding-bottom: 0;
}

/* ここからマンガ紹介 */
.manga-area {
  padding-bottom: 70px;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.jyouhou-01 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  justify-content: center;
}

.jyouhou-01 h3 {
  font-family: 'Kaisei Opti', serif;
  font-size: 22px;
  margin-top: 20px;
  margin-left: 20px;
  color: #676565;
}

.manga-text {
  width: 280px;
  margin-top: 15px;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 14px;
  line-height: 1.3;
}

.number-01,
.number-02,
.number-03,
.number-04,
.number-05,
.number-06,
.number-07,
.number-08,
.number-09,
.number-10,
.number-11 {
  font-size: 8px;
  color: #808080;
}

/* 会員マーク */

.muryou-mark {
  z-index: 6;
  position: absolute;
  bottom: 3px;
  right: 89px;
}

.muryou-mark img {
  width: 38px;
}

.standard-mark {
  z-index: 6;
  position: absolute;
  bottom: 3px;
  right: 46px;
}

.standard-mark img {
  width: 38px;
}

.higi-mark {
  z-index: 6;
  position: absolute;
  bottom: 3px;
  right: 3px;
}

.higi-mark img {
  width: 38px;
}


/* 会員マークの三角デザインのみ */
.muryou-mark-01 {
  width: 41px;
  z-index: 6;
  position: absolute;
  bottom: 3px;
  right: 92px;
}


.standard-mark-01 {
  width: 41px;
  z-index: 6;
  position: absolute;
  bottom: 3px;
  right: 51px;
}

.higi-mark-01 {
  width: 41px;
  z-index: 6;
  position: absolute;
  bottom: 3px;
  right: 10px;
}





/* パターン1 ４コマー００*/
.pattern-01 {
  background-color: #fada9d;
  z-index: -1;
  width: 280px;
  height: 285px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;

}

.title-01 {
  z-index: 1;
  position: absolute;
  margin-top: 10px;
}

.manga-01-01 img {
  width: 90%;
  margin-top: 90px;
  margin-left: 15px;
  margin-right: 15px;
}

.number-01 {
  text-align: right;
  margin-right: 2px;
  margin-top: 10px;
}

/* パターン2　４コマー０１ */
.pattern-02 {
  background-color: #ffffff;
  z-index: -1;
  width: 280px;
  height: 330px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;

}

.shape-02-01 {
  background: #f3c5bd;
  z-index: 0;
  width: 220px;
  height: 163px;
  position: absolute;
}

.title-02 {
  z-index: 1;
  position: absolute;
}

.manga-02-01,
.manga-02-02 {
  z-index: 1;
}

.manga-02-01 img {
  width: 78%;
  margin-top: 60px;
  margin-left: 30px;
  margin-right: 20px;
  transform: rotate(-5deg)
    /* 画像回転 */
}

.manga-02-02 img {
  width: 55%;
  margin-top: 7px;
  margin-left: 90px;
}

.shape-02-02 {
  z-index: 2;
  background: #f3c5bd;
  width: 40px;
  height: 40px;
  margin-left: auto;
  margin-top: -25px;
  text-align: right;
}

.number-02 {
  padding-top: 23px;
  padding-right: 2px;
}


/* パターン3 ４コマー０３*/
.pattern-03 {
  z-index: -1;
  background-color: #ffffff;
  width: 280px;
  height: 250px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;

}

.title-03 {
  z-index: 3;
  position: absolute;
}

.container-03 {
  z-index: 4;
}

.container-03 img {
  width: 90%;
  margin-top: 70px;
  margin-left: 20px;
  margin-right: 20px;
}

.shape-03 {
  z-index: 2;
  background: #c9e7e6;
  width: 280px;
  height: 165px;
  margin-top: -145px;
  text-align: right;
}

.shape-01 p {
  position: absolute;
  margin-top: 160px;
  margin-left: 300px;
}

.number-03 {
  padding-top: 150px;
  margin-right: 2px;
}


/* パターン4　４コマ−０８ */
.pattern-04 {
  background-color: #ffffff;
  z-index: -1;
  width: 280px;
  height: 307px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
}


.shape-04-01 {
  background: #cde0a7;
  z-index: 0;
  width: 280px;
  height: 82px;
  position: absolute;
}

.container-04 {
  z-index: 1;
  position: absolute;
}

.manga-04-01,
.manga-04-02 {
  z-index: 1;
}

.manga-04-01 img {
  width: 47%;
  margin-top: 55px;
  margin-left: 130px;
  margin-right: 20px;
  transform: rotate(-1deg);
  /* 画像回転 */
}

.manga-04-02 img {
  width: 78%;
  margin-top: 7px;
  margin-left: 30px;
  transform: rotate(5deg);
  /* 画像回転 */
}

.shape-04-02 {
  z-index: 2;
  background: #cde0a7;
  width: 280px;
  height: 11px;
  margin-bottom: auto;
  text-align: right;
}

.number-04 {
  padding-right: 2px;
}

/* パターン５ （パターン２の色違い） ４コマー１２ */
.pattern-05 {
  background-color: #ffffff;
  z-index: -1;
  width: 280px;
  height: 330px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;

}

.shape-05-01 {
  background: #e5dbc4;
  z-index: 0;
  width: 220px;
  height: 163px;
  position: absolute;
}

.container-05 {
  z-index: 1;
  position: absolute;
}

.manga-05-01,
.manga-05-02 {
  z-index: 1;
}

.manga-05-01 img {
  width: 78%;
  margin-top: 57px;
  margin-left: 30px;
  margin-right: 20px;
  transform: rotate(-5deg)
    /* 画像回転 */
}

.manga-05-02 img {
  width: 58%;
  margin-top: 8px;
  margin-left: 84px;
}

.shape-05-02 {
  z-index: 2;
  background: #e5dbc4;
  width: 40px;
  height: 40px;
  margin-left: auto;
  margin-top: -23px;
  text-align: right;
}

.number-05 {
  padding-top: 23px;
  padding-right: 2px;
}


/* パターン6 ４コマー１３*/
.pattern-06 {
  background-color: #ffffff;
  z-index: -3;
  width: 280px;
  height: 285px;
  margin-top: 70px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;

}

.shape-06 {
  width: 0;
  z-index: 0;
  margin-top: 10px;
  border-right: solid 280px #fbdacf;
  border-bottom: solid 280px transparent;
  transform: rotate(90deg);
  /* 画像回転 */
  position: absolute;
}

.container-06 {
  z-index: 1;
  position: absolute;
}

.manga-06 {
  z-index: 1;
}

.manga-06-01 img {
  width: 90%;
  z-index: 1;
  margin-top: 95px;
  margin-left: 10px;
  margin-right: 20px;
  transform: rotate(0.01deg);
  /* 画像回転 要確認 */
}

.manga-06-01 {
  z-index: 1;
}

.number-06 {
  margin-top: 10px;
  margin-left: 263px;
  transform: rotate(0.001deg);
  /* 画像回転 要確認 三角形の上に入れるために指示！？ */
}

.mark {
  right: -5px;
}

/* パターン7　４コマ−１５ */
.pattern-07 {
  background-color: #dcd3ce;
  z-index: -1;
  width: 280px;
  height: 360px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;

}

.title-07 {
  z-index: 3;
  position: absolute;
}

.manga-07-01,
.manga-07-02 {
  z-index: 1;
}

.manga-07-01 img {
  width: 55%;
  margin-top: 65px;
  margin-left: 20px;
  margin-right: 20px;
  transform: rotate(-0deg);
  /* 画像回転 */
}

.manga-07-02 img {
  width: 82%;
  margin-top: 10px;
  margin-left: 35px;
  transform: rotate(-5deg);
  /* 画像回転 */
}

.number-07 {
  margin-left: 262px;
  margin-top: 15px;
}

/* パターン8 ４コマー16*/
.pattern-08 {
  z-index: -1;
  background-color: #ffffff;
  width: 280px;
  height: 250px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;

}

.title-08 {
  z-index: 3;
  position: absolute;
}

.container-08 {
  z-index: 4;
}

.container-08 img {
  width: 90%;
  margin-top: 70px;
  margin-left: 20px;
  margin-right: 20px;
}

.shape-08 {
  z-index: 2;
  background: #c9e7e6;
  width: 280px;
  height: 165px;
  margin-top: -145px;
  text-align: right;
}

.number-08 {
  padding-top: 150px;
  padding-right: 2px;
}

/* パターン9　４コマ−26 */
.pattern-09 {
  background-color: #ffffff;
  z-index: -1;
  width: 280px;
  height: 307px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;

}

.shape-09-01 {
  background: #fada9d;
  z-index: 0;
  width: 280px;
  height: 82px;
  position: absolute;
}

.container-09 {
  z-index: 1;
  position: absolute;
}

.manga-09-01,
.manga-09-02 {
  z-index: 1;
}

.manga-09-01 img {
  width: 47%;
  margin-top: 55px;
  margin-left: 130px;
  margin-right: 20px;
  transform: rotate(-1deg);
  /* 画像回転 */
}

.manga-09-02 img {
  width: 78%;
  margin-top: 7px;
  margin-left: 30px;
  transform: rotate(5deg);
  /* 画像回転 */
}

.shape-09-02 {
  z-index: 2;
  background: #fada9d;
  width: 280px;
  height: 11px;
  margin-bottom: auto;
  text-align: right;
}

.number-04 {
  padding-right: 2px;
}

/* パターン10 (パターン１の高さと色アレンジ） ４コマー32*/
.pattern-10 {
  background-color: #cde0a7;
  z-index: -1;
  width: 280px;
  height: 265px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;

}

.title-10 {
  z-index: 1;
  position: absolute;
  margin-top: 10px;
}

.manga-10-01 img {
  width: 90%;
  margin-top: 70px;
  margin-left: 15px;
  margin-right: 15px;
}

.number-10 {
  text-align: right;
  margin-right: 2px;
  margin-top: 10px;
}


/*　１１（パターン4の色違い）　４コマ−3５ */
.pattern-11 {
  /* -01 をつけて、高さの位置変更*/
  background-color: #ffffff;
  z-index: -1;
  width: 280px;
  height: 307px;
  margin-top: 30px;
  margin-left: 20px;
  margin-right: 20px;
  position: relative;

}

.shape-11-01 {
  background: #c9e7e6;
  z-index: 0;
  width: 280px;
  height: 82px;
  position: absolute;
}

.container-11 {
  z-index: 1;
  position: absolute;
}

.manga-11-01,
.manga-11-02 {
  z-index: 1;
}

.manga-11-01 img {
  width: 47%;
  margin-top: 55px;
  margin-left: 130px;
  margin-right: 20px;
  transform: rotate(-1deg);
  /* 画像回転 */
}

.manga-11-02 img {
  width: 78%;
  margin-top: 7px;
  margin-left: 30px;
  transform: rotate(5deg);
  /* 画像回転 */
}

.shape-11-02 {
  z-index: 2;
  background: #c9e7e6;
  width: 280px;
  height: 11px;
  margin-bottom: auto;
  text-align: right;
}

.number-11 {
  padding-right: 2px;
}

/*hoverをしたらボックスに影がつく*/
.pattern-01:hover,
.pattern-02:hover,
.pattern-03:hover,
.pattern-04:hover,
.pattern-05:hover,
.pattern-06:hover,
.pattern-07:hover,
.pattern-08:hover,
.pattern-09:hover,
.pattern-11:hover {
  top: -10px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
}

/* 空のマス3個*/
.pattern-000 {
  width: 280px;
  height: 285px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}


/* ======================================================================= */

/* ここから　　タイトルだけ */

@media (min-width:640px) and (max-width: 1200px) {

  /* 丸タイトルvw指定に */
  .first-view-title {
    background: radial-gradient(#ffffff, #f3c5bd);
    z-index: 1;
    width: 30.833vw;
    height: 30.833vw;
    border-radius: 50%;
    padding: 2.5vw 2.5vw 2.5vw;
    position: absolute;
    top: 0.417vw;
    left: 3.75vw;
  }

  .first-view-title h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 4.833vw;
    font-weight: bold;
    color: #595757;
    line-height: 1.1;
    text-align: center;
  }

  .first-view-title img {
    width: 68%;
    margin-left: 4.167vw;
    margin-right: 4.167vw;
  }

  .first-view-title p {
    font-size: 1.167vw;
    line-height: 1.3;
    text-align: center;
  }

}

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

  /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  .first-view img {
    position: relative;
    z-index: -1;
  }

  .first-view-title {
    background: none;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1;
    width: 57.368vw;
    height: 57.368vw;
    border-radius: 50%;
    margin-right: auto;
    padding: 5.263vw 0 5.263vw;
    position: absolute;
    left: 2.632vw;
  }

  .first-view-title h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 9.079vw;
    font-weight: bold;
    color: #595757;
    line-height: 1.1;
    text-align: center;
  }

  .first-view-title img {
    width: 50%;
  }

  .first-view-title p {
    margin-top: 2.632vw;
    font-size: 2.105vw;
    line-height: 1.3;
    text-align: center;
  }

  .lead {
    line-height: 1.3;
    margin-top: 4vw;
    margin-bottom: 2.632vw;
    text-align: center;
  }

  .lead p {
    font-size: 2.895vw;
  }
}

/* ここまで　　タイトルだけ */

/* ここから　　メニューボタンなど */
@media (min-width:801px) and (max-width: 1024px) {

  /* メニューの文字サイズだけ小さく */
  .jouhou-btn {
    font-size: 12px;
    padding: 17px 0 15px 3px;
    margin-top: 10px;
  }

  .madori-btn,
  .tochi-sindan-btn,
  .technical-btn,
  .money-btn,
  .other-btn {
    font-size: 11px;
    margin-top: 20px;
    padding: 13px 0;
  }

}

@media (min-width:521px) and (max-width: 800px) {

  /* メニューの文字サイズだけ小さく */
  .jouhou-btn {
    font-size: 9px;
    padding: 17px 0 15px 3px;
    margin-top: 10px;
  }

  .madori-btn,
  .tochi-sindan-btn,
  .technical-btn,
  .money-btn,
  .other-btn {
    font-size: 7px;
    margin-top: 20px;
    padding: 13px 0;
  }

}


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

  /* メニューを2列に */
  .menu-change {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    font-size: 10px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    border-bottom: none;
  }

  /* 表示中のボタン */
  .jouhou-btn {
    background-color: #f3c5bd;
    width: 110px;
    height: 35px;
    font-weight: 500;
    font-size: 11px;
    color: #333333;
    margin-top: 5px;
    margin-left: 8px;
    margin-right: 8px;
    padding: 10px 0 10px 1px;
    order: -1;
    text-align: center;
    line-height: 1.3;

  }

  /* その他のボタン */
  .madori-btn,
  .tochi-sindan-btn,
  .technical-btn,
  .money-btn,
  .other-btn {
    width: 110px;
    height: 25px;
    color: #727171;
    font-size: 10px;
    font-weight: 500;
    margin-top: 10px;
    margin-right: 8px;
    margin-left: 8px;
    padding: 6px 0 8px 0;
    order: -1;
    text-align: center;
    line-height: 1.3;
  }

  .madori-btn {
    background-color: #cde0a7;
  }

  .tochi-sindan-btn {
    background-color: #f1e1a1;
  }

  .technical-btn {
    background-color: #cee0cd;
  }

  .money-btn {
    background-color: #c8e3df;
  }

  .other-btn {
    background-color: #ebe3bd;
  }

  /* タイトル */

  .index-title {
    margin-top: 15px;
    margin-left: 10px;
  }

  .index-title img {
    width: 60px;
    margin-left: 10px;
    padding-top: 10px;
  }

  .index-title h2 {
    font-size: 25px;
    margin-top: 25px;
    padding-left: 20px;
  }

  /* 隙間を統一 */
  .pattern-01,
  .pattern-02,
  .pattern-03,
  .pattern-04,
  .pattern-05,
  .pattern-06,
  .pattern-07,
  .pattern-08,
  .pattern-09,
  .pattern-10,
  .pattern-11,
  .pattern-12 {
    margin-top: 35px;
  }

  .jyouhou-01 {
    margin-top: 0;
  }


}