/***************************
共通
****************************/
body {
  color: #101010;
  background-color: #fff;
  font-family: 'Zen Maru Gothic', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/***************************
ヘッダー
****************************/
.header {
  position: relative;
  width: 95%;
  max-width: 1000px;
  height: 70px;
  margin: 0 auto;
  padding: 10px 0;
}

.header__logo {
  font-family: 'Kaisei HarunoUmi', serif;
  font-size: min(8vw, 42px);
}

.header__bg {
  position: absolute;
  top: 0;
  right: -10px;
  width: 40%;
  max-width: 165px;
}

/***************************
メインビジュアル
****************************/
.hero-header {
  margin-bottom: 20px;
}

.hero-header__slide-container {
  position: relative;
  width: 95%;
  max-width: 1000px;
  height: 300px;
  margin: 0 auto 25px;
}

.hero-header__slide-container .hero-header__slide-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: slide-anime 30s 0s infinite;
  opacity: 0;
  object-fit: cover;
}

.hero-header__slide-container .hero-header__slide-img:nth-of-type(2) {
  animation-delay: 6s
}

.hero-header__slide-container .hero-header__slide-img:nth-of-type(3) {
  animation-delay: 12s
}

.hero-header__slide-container .hero-header__slide-img:nth-of-type(4) {
  animation-delay: 18s
}

.hero-header__slide-container .hero-header__slide-img:nth-of-type(5) {
  animation-delay: 24s
}

@keyframes slide-anime {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
    z-index: 0;
  }
  100% {
    opacity: 0;
  }
}

/***************************
メインコンテンツ（WordPress編集領域
****************************/
.content {
  width: 95%;
  max-width: 1000px;
  margin: 0 auto 50px;
}

.content .wp-block-heading {
  margin-top: 40px;
  margin-bottom: 10px;
  padding: 5px 2px;
  border-top: 2px solid #ef8121;
}

.content .wp-block-table.is-style-stripes {
  border-bottom: none;
}

.content p {
  margin-bottom: 20px;
}

.content ul {
  margin: 0 0 20px 20px;
}

.content ul li {
  margin-bottom: 10px;
  list-style: disc;
}

/***************************
プラン
****************************/
.plan_title_img {
  width: 60%;
  max-width: 280px;
  margin: 20px auto;
}

.plan_agent {
  position: relative;
  display: block;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  width: 95%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}

.plan_agent .mini {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0px;
}

.plan_agent .mini:nth-of-type(n+2) {
  margin-top: 25px;
}

.plan_agent .plan_img {
  position: relative;
  border-radius: 30px;
}

.plan_agent .rakuten .plan_img {
  border: 7px solid #00b900;
}

.plan_agent .jalan .plan_img {
  border: 7px solid #eb5c03;
}

.plan_agent .yahoo .plan_img {
  border: 7px solid #ff0033;
}

.plan_agent .line .plan_img {
  border: 7px solid #06c755;
}

.plan_agent .plan_img::before {
  display: block;
  width: 100%;
  padding-top: 56.6%;
  content: "";
}

.plan_agent .mini .plan_text {
  box-sizing: border-box;
  width: 100%;
  padding-top: 10px;
  text-align: left;
}

.plan_agent .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: left 50% top 50%;
  background-size: contain;
}

.plan_agent .rakuten .logo {
  background-image: url(../img/agent_rakuten.png);
}

.plan_agent .jalan .logo {
  background-image: url(../img/agent_jalan.png);
}

.plan_agent .yahoo .logo {
  background-image: url(../img/agent_yahoo.png);
}

.plan_agent .line .logo {
  background-image: url(../img/agent_line.png);
}

.plan_agent .logo::before {
  display: block;
  width: 100%;
  padding-top: calc(100% * 2.0 * 0.566 * 0.333);
  content: "";
}

/***************************
SNS
****************************/
.sns_wrap {
  width: 95%;
  margin: 100px auto 0 auto;
}

.top_facebook {
  margin-bottom: 25px;
  text-align: center;
}

.top_other_sns {
  display: flex;
  justify-content: space-between;
}

.top_other_sns div {
  width: 32%;
}

.top_other_sns div img {
  width: 100%;
  max-height: 394px;
}

/***************************
フッター
****************************/
.footer {
  padding: 10px;
  text-align: center;
}

.footer__address {
  display: inline;
  font-size: 14px;
}

.footer__tel {
  margin-left: 15px;
  font-size: 14px;
}

.footer__copyright {
  display: block;
  margin-top: 10px;
}

@media (min-width: 768px) {
  /********************************
  ヘッダー
  *********************************/
  .hero-header__slide-container {
    height: 500px;
  }

  /********************************
  プラン
  *********************************/
  .plan_agent {
    display: flex;
    width: 100%;
  }

  .plan_agent .mini {
    width: 47%;
    margin-bottom: 25px;
  }

  .plan_agent .mini:nth-of-type(n+2) {
    margin-top: 0;
  }
}

@media (min-width: 992px) {
  .hero-header__slide-container {
    height: 600px;
  }

  /********************************
  プラン
  *********************************/
  .plan_agent {
    width: 100%;
  }

  .plan_agent .mini {
    width: 47%;
  }

  /********************************
  SNS
  *********************************/
  .sns_wrap {
    display: table;
    width: 90%;
    max-width: 1400px;
    margin: 50px auto 0 auto;
    table-layout: fixed;
  }

  .top_sns_r {
    display: table-cell;
    width: 62%;
    vertical-align: middle;
  }

  .top_sns_l {
    display: table-cell;
    width: 38%;
    vertical-align: middle;
  }
}

@media (min-width: 1250px) {
  /********************************
  プラン
  *********************************/
  .plan_agent {
    width: 962px;
  }

  .plan_agent .mini:nth-of-type(n+3) {
    margin-top: 50px;
  }

  /********************************
  SNS
  *********************************/
  .top_sns_r {
    vertical-align: top;
  }
}

@media (min-width: 1600px) {
  /********************************
  プラン
  *********************************/
  .plan_agent {
    width: 1200px;
  }
}