/* =========================
   共通テキスト
========================= */

.site_main .page_service__1 {
  max-width: 820px;
  margin: 20px auto 40px;
  line-height: 2;
  text-align: left;
  box-sizing: border-box;
}

/* =========================
   サービス説明
========================= */

.servicedetail {
  padding: 2em;
}

.points {
  padding: 1em;
  background-color: #fff8dc;
}

.points2 {
  padding: 1em;
  background-color: #f3f3f3;
}

/* =========================
   ボタン
========================= */

.btn {
  font-size: 1.6rem;
  font-weight: 700;
  padding: 1rem 4rem;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
  transition: 0.3s;
}

/* =========================
   お勧め
========================= */

.recommendbox ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.recommendbox ul li{
  list-style: none!important;
  margin-left: 0!important;
  display: flex;
  flex-direction: column;
}

.recommendbox ul li:last-child {
  margin-bottom: 0px!important;
}

.recommendbox ul li p {
  flex-grow: 1;
  display: flex;
}

.recommendbox ul li img {
  margin-top: 16px;
}

/* =========================
   プランカード
========================= */

.planbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 3em auto;
  width: 97%;
}

.plandetail {
  width: 43%;
  padding: 3%;
  margin: .5% 0;
}

.bshadow {
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
}

.planitem {
  text-align: center;
}

.greentitle {
  font-weight: bold;
  color: #3e82f7;
}

.planprice {
  font-size: 2em;
  font-weight: bold;
  letter-spacing: .1em;
}

.japen {
  font-size: .5em;
  color: gray;
}

.planlist {
  margin-top: 1em;
  padding-top: 2em;
  border-top: 1px solid #ccc;
}

.planlist ul {
  text-align: left;
}

.planlist li {
  position: relative;
  margin-left: 1.5em;
  line-height: 1.8;
}

.planlist li::before {
  content: "";
  position: absolute;
  left: -1.5em;
  top: .6em;
  width: 10px;
  height: 5px;
  border-left: 3px solid #999;
  border-bottom: 3px solid #999;
  transform: rotate(-45deg);
}

@media (max-width: 480px) {

  .plandetail {
    width: 100%;
    margin-bottom: 2em;
  }

}

/* =========================
   テーブル
========================= */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9em;
  margin: 2em 0;
}

td, th {
  border: 1px solid #999;
  padding: .4em;
  text-align: center;
}

.colorange {
  background: #f3f3f3;
}

.fbd {
  font-weight: bold;
  font-size: 1.2em;
}

@media (max-width: 480px) {

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}