body {
  font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", "游ゴシック体", "Yu Gothic Medium", YU Gothic,
    "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@font-face {
  font-family: "maruGothic";
  src: url("../fonts/ZenMaruGothic-Bold.woff2") format("woff2");
}

/*** main ***/
.mainWrapper {
  width: 100%;
  background-image: url("../image/main/index_topbg_sp.png");
  background-repeat: repeat-x;
  background-size: 375px auto;
  background-position: top left;
  background-color: #d9f0ff;
  position: relative;
  margin-top: 170px;
  padding-bottom: 80px;
}

.mainWrapper .main {
  background-image: url("../image/main/main_topship1_sp.png");
  background-repeat: no-repeat;
  background-size: 375px auto;
  background-position: center top;
}

.only-sp {
  display: inline;
}

.only-sp-block {
  display: block;
}

.only-pc {
  display: none;
}

.only-pc-block {
  display: none;
}

.textcenter {
  text-align: center;
}

.textcenter-sp {
  text-align: center;
}

/*** parts ***/

.maruGo {
  font-family: "maruGothic";
}

.maruGo-blue {
  font-family: "maruGothic";
  color: #015fb0;
}

.maruGo-white {
  font-family: "maruGothic";
  color: #fff;
}

.btn-blue {
  display: block;
  border: solid 1px #2ca3dd;
  color: #fff;
  background-color: #2ca3dd;
  text-decoration: none;
  padding: 8px 0;
  transition: all 0.2s;
  text-align: center;
}

.btn-blue:visited {
  color: #fff;
}

.btn-blue:hover {
  background-color: #fff;
  color: #2ca3dd;
}

.btn-blueMaru {
  font-family: "maruGothic";
  font-size: 15px;
  text-align: center;
  display: block;
  border-radius: 500px;
  border: solid 2px #fff;
  background-color: #015fb0;
  text-decoration: none;
  padding: 8px 0;
  transition: all 0.2s;
  background-image: url("../image/main/icon_arrow_down_white.svg");
  background-repeat: no-repeat;
  background-size: 11px auto;
  background-position: right 20px center;
  margin-bottom: 10px;
}

.textBoldRed {
  color: #ff0000 !important;
  font-family: initial;
  font-weight: bold;
}

.btn-blueMaru:link,
.btn-blueMaru:visited {
  color: #fff;
}

.btn-blueMaru:hover {
  background-image: url("../image/main/icon_arrow_down_blue.svg");
  background-color: #fff;
  color: #015fb0;
  cursor: pointer;
}

.btn-disabled,
.btn-disabled:hover {
  color: #fff;
  background-color: #696969 !important;
}

.btn-blueMaru-1col {
  padding: 20px;
}

.btn-greenMaru {
  font-family: "maruGothic";
  font-size: 15px;
  text-align: center;
  display: block;
  border-radius: 500px;
  border: solid 2px #fff;
  background-color: #1e9039;
  text-decoration: none;
  padding: 8px 0;
  transition: all 0.2s;
  background-image: url("../image/main/icon_arrow_down_white.svg");
  background-repeat: no-repeat;
  background-size: 11px auto;
  background-position: right 20px center;
}

.btn-greenMaru:link,
.btn-greenMaru:visited {
  color: #fff;
}

.btn-greenMaru:hover {
  background-image: url("../image/main/icon_arrow_down_green.svg");
  background-color: #fff;
  color: #1e9039;
  cursor: pointer;
}

.frame-blue {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 30px;
  border: solid 3px #015fb0;
  color: #015fb0;
  background-color: #fff;
  padding: 40px 20px;
  margin-bottom: 20px;
}

.frame-blue p {
  text-align: center;
  line-height: 2.2em;
}

/* ページネーション */
.pager {
  padding-top: 40px;
  text-align: center;
  color: #015fb0;
}

.pager > span {
  font-size: 1.2rem;
  color: #015fb0;
}

.pager .pagination {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
  margin: 20px auto;
  padding: 0;
  width: 90%;
}

.pager .pagination li,
.mobile .pager .pagination li {
  margin: 2px;
  padding: 0;
  display: block;
  background: #015fb0;
  width: 40px;
  height: 40px;
  text-align: center;
  position: relative;
  border: 2px solid #015fb0;
}

.pager .pagination li a,
.pager .pagination li.disabled span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.mobile .pager .pagination li.active span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.pager .pagination li a:hover,
.pager .pagination li a.active,
.mobile .pager .pagination li.active {
  color: #015fb0;
  background: #fff;
}

.pager .pagination li a.active,
.pager .pagination li a.disabled {
  pointer-events: none;
}

/* エディタ */
.ql-container {
  font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", "游ゴシック体", "Yu Gothic Medium", YU Gothic,
    "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

.ql-editor {
  padding: 0 !important;
}

@media screen and (min-width: 768px) {
  .only-sp {
    display: none;
  }

  .only-sp-block {
    display: none;
  }

  .only-pc {
    display: inline;
  }

  .only-pc-block {
    display: block;
  }

  .textcenter-sp {
    text-align: left;
  }

  .btn-blueMaru {
    padding: 15px 0;
    font-size: 22px;
  }

  .btn-blueMaru-1col {
    padding: 30px;
  }

  .btn-greenMaru {
    padding: 15px 0;
    font-size: 22px;
  }

  .frame-blue {
    max-width: 800px;
    padding: 40px 20px;
  }

  /*** main ***/
  .mainWrapper {
    background-image: url("../image/main/index_topbg_pc.png");
    background-size: 1365px auto;
    margin-top: 170px;
    padding-bottom: 80px;
  }

  .mainWrapper .main {
    background-image: url("../image/main/main_topship1_pc.png");
    background-size: 90px auto;
    background-position: right 15% top;
  }

  /* ページネーション */
  .pager {
    padding-bottom: 40px;
    background-image: url("../image/main/img_fish3_pc.png");
    background-repeat: no-repeat;
    background-size: 120px auto;
    background-position: left 10% bottom;
  }
}