@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto:wght@700&display=swap');

.page-template-page-custom-top {
  --bg-color01: #e9f3ff;
  --bg-color02: #f2f2f2;
  --text-color: #333;
  --link-color: #2350d2;
  --link-hover-color: #5374d4;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.aa {
  /*
  color: var(--primary-color);
  border-left: 4px solid var(--secondary-color);
  */
}


html {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
}

body.page-template-page-custom-top {
  padding: 0;
}

.contents {
  z-index: 1;
}

/* ベースの追加スタイル */
.sp_only,
.mobile_only {
  display: none;
}

/* --------------------------------------
中央寄せ・右寄せ
-------------------------------------- */
.ac {
  text-align: center;
}

.ar {
  text-align: right;
}

.al {
  text-align: left;
}

/* --------------------------------------
テキスト飾り設定
-------------------------------------- */

.hosoku {
  color: #5a5a5a;
  font-size: 90%;
  line-height: 1.7;
}

.datetxt {
  color: gray;
  font-size: 90%;
}

.fs2 {
  font-size: 114.2857%;
}

.fs3 {
  font-size: 130%;
}

.fs4 {
  font-size: 160%;
  line-height: 1.5;
}

.fs5 {
  font-size: 200%;
  line-height: 1.5;
}

.mt0 {
  margin-top: 0 !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mt70 {
  margin-top: 70px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.mb70 {
  margin-bottom: 70px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.yellow {
  background-color: #ffff85;
  padding: 4px 5px 2px 5px;
  font-weight: normal;
}

/* テキスト装飾 */
.tk1 {
  color: #e60000;
}

.tk2 {
  font-weight: bold;
  background: linear-gradient(transparent 60%, rgba(255, 216, 0, 1) 40%);
  text-shadow: 0 2px 0 rgb(255, 255, 255);
  padding-bottom: 3px;
  color: #000;
}

.tk3 {
  font-weight: bold;
  background: linear-gradient(transparent 70%, #ff3737 20%);
  text-shadow: 0 2px 0 rgb(255, 255, 255);
  padding-bottom: 3px;
}

/* コンタクトフォーム */

.wpcf7-form {}

input.wpcf7-form-control {
  width: 100%;
  height: 52px;
  border-radius: 3px;
  padding: 5px 15px;
  background: #f2f2f2;
  border: none;
  font-family: 'Noto Sans JP', sans-serif;
}

textarea.wpcf7-form-control {
  width: 100%;
  display: block;
  border-radius: 3px;
  padding: 15px;
  background: #f2f2f2;
  border: none;
  font-size: 0.9em;
  font-family: 'Noto Sans JP', sans-serif;
}

textarea.wpcf7-form-control::placeholder {
  color: #999;
}

/* プルダウンメニュー */
select.wpcf7-form-control {
  max-width: 100%;
  height: 52px;
  border-radius: 3px;
  padding: 5px 45px 5px 15px;
  background: #f2f2f2;
  border: none;
  font-size: 0.9em;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ラジオボタン */
.wpcf7-radio .wpcf7-list-item {
  display: inline-flex;
  margin: 7.5px;
}

.wpcf7-form-control input[type="radio"] {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 50%;
  outline: none;
  background-color: #fff;
}

/* チェックボックス */
.wpcf7-checkbox .wpcf7-list-item {
  display: inline-flex;
  margin: 7.5px;
}

.wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  padding-left: 7.5px;
  color: #555;
}

.wpcf7-form-control input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 2px;
  outline: none;
  background-color: #fff;
}


/* フォーム幅の調整 */
.field_wrap {
  font-family: 'Noto Sans JP', sans-serif;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-bottom: 30px;
}

.field_wrap.first {
  margin-top: 30px;
}

.field_name {
  flex-shrink: 0;
  width: 180px;
  padding-top: 12px;
  font-weight: bold;
  color: #555;
  vertical-align: middle;
  position: relative;
}

.field {
  flex-grow: 1;
}

.field_name label {
  font-weight: bold;
}

div.field_name.require::after,
div.field_name.any::after {
  display: inline-block;
  font-size: 12px;
  line-height: normal;
  padding: 0 6px 1px;
  margin: 8px 0 0;
  visibility: visible;
  height: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

div.field_name.require::after {
  content: "必須";
  color: #fff;
  background: #e24a37;
}

div.field_name.any::after {
  content: "任意";
  color: #999;
  border: 1px solid #999;
}

div.field_wrap::after {
  content: none;
}


div.sbtn_1 input[type="submit"] {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 290px;
  height: 65px;
  border-radius: 0;
  background: linear-gradient(to right, #d94545 0%, #a00101 100%, transparent);
  font-weight: bold;
  letter-spacing: 0.075em;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);
  transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out;
  margin: auto;
}

.pagination .page-numbers {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 3px;
  border: 1px solid #ccc;
  background-color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.pagination .page-numbers.current {
  background-color: #333333;
  color: #fff;
  border-color: #333333;
}

.pagination a.page-numbers:hover {
  background-color: #f0f0f0;
}


/* トップページテンプレート用の全幅スタイル設定 */
.contents.contents-fullwidth {
  padding-top: 0;
}

.fullwidth-block .articleContainer-full {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.fullwidth-block .articleBody {
  margin: 0;
}

.inner {
  width: 1200px;
  margin: auto;
  position: relative;
}


.page-template-page-custom-top section {
  margin: 0;
}

/* スライダー全体の枠 */
.mySwiper {
  width: 100%;
  max-width: 1000px;
  /* スライダー全体の横幅（好みに合わせて調整） */
  margin: 0 auto;
  padding: 50px 0;
  overflow: visible;
}

.mySwiper .swiper-slide {
  width: 320px;
  height: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

/* 中央（active）と左右（prev / next）の合計3枚だけを表示 */
.mySwiper .swiper-slide-active,
.mySwiper .swiper-slide-prev,
.mySwiper .swiper-slide-next {
  opacity: 1;
  visibility: visible;
}

.mySwiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.swiper-button-prev,
.swiper-button-next {
  z-index: 10;
  cursor: pointer;
}

.swiper-button-next {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: transparent;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: all 0.3s ease;
}

/* 6. ホバー（マウスを乗せた時）の動き */
.swiper-button-next:hover {
  background-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

.swiper-button-next::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: translate(-65%, -50%) rotate(45deg);
}


.swiper-button-prev {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: transparent;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  z-index: 10;
  transition: all 0.3s ease;
}

.swiper-button-prev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: translate(-35%, -50%) rotate(-135deg);
}

section.subs_mv {
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/lp_02.webp')center no-repeat;
  background-size: cover;
}

.subs_mv .mySwiper {
  width: 100%;
  max-width: 57%;
  margin: 0 0 0 auto;
  padding: 170px 0 220px;
  overflow: hidden;
  position: relative;
}

.subs_mv .mySwiper .swiper-slide {
  width: 280px;
  height: auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(25, 56, 205, 0.6);
}

.subs_mv .swiper-horizontal .swiper-button-next {
  right: 1px;
}

.subs_mv .swiper-horizontal .swiper-button-prev {
  left: 1px;
}

.subs_mv .inner:before {
  content: "";
  display: block;
  width: 746px;
  height: 571px;
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/mv_text.webp')center no-repeat;
  position: absolute;
  left: -82px;
  top: 67px;
}

section.subs_fv {
  position: relative;
}

.articleBody section.subs_fv img {
  width: 100%;

}

ul.fv_btn {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

ul.fv_btn li a {
  display: block;
  padding: 12px 2em;
  background: linear-gradient(to right, #d94545 0%, #a00202 100%);
  border: 1px solid #fff;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 26px;
  box-shadow: 9px 9px 10px rgba(38, 116, 204, .6);
}

.articleBody h2.main_title {
  background: none;
  margin: 50px 0;
  color: #333;
  font-size: 50px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .1em;
}

.articleBody h2.main_title .note {
  display: block;
  margin: 20px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #666;
  letter-spacing: 3px;
}

.articleBody h2.main_title.fc_white,
.articleBody h2.main_title .note.fc_white {
  color: #fff;
}

.articleBody h2.main_title.fc_blue {
  background: linear-gradient(to right, #649deb 0%, #649deb 40%, #1d6cdd 60%, #1d6cdd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.articleBody h2.main_title .note.grad_orange {
  background: linear-gradient(to right, #ffa713 0%, #ffa713 40%, #ff4901 60%, #ff4901 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.articleBody h2.main_title .note.grad_blue {
  background: linear-gradient(to right, #659eeb 0%, #659eeb 40%, #216fde 60%, #216fde 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.main_text {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  margin: 0 0 40px 0;
}

.subs_worry {
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/subs_worry_bg02.webp')left bottom no-repeat, url("https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/subs_worry_bg.png")center no-repeat;
  background-size: contain, cover;
  padding: 60px 20px 100px;
  margin: 0;
  box-sizing: border-box;
  position: relative;
}

.subs_worry::after {
  content: '';
  position: absolute;
  bottom: -95px;
  left: 50%;
  transform: translateX(-50%);
  width: 923px;
  height: 180px;
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/arrow_blue.webp')center no-repeat;
  /* clip-path: polygon(0 0, 100% 0, 50% 100%); */
  z-index: 2;
}

.subs_worry .inner {
  margin: 0 auto;
  position: relative;
}

/*
.subs_worry .inner::before {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 20px;
  width: 320px;
  height: 420px;
  background-image: url('https://cms-professional.net/wp-content/uploads/eyecatch-newstar.webp');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  z-index: 1;
}
*/
.subs_worry .main_title.is-style-default {
  font-size: 42px;
  font-weight: 900;
  margin: 0 0 1em;
  padding: 0;
  border: none;
  background: none;
  letter-spacing: 8px;
}

.worry {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 590px;
  margin-left: 38%;
  z-index: 2;
}

.worry li {
  display: inline-block;
  background: linear-gradient(90deg, #334679 0%, #3f548d 100%);
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  padding: 20px 20px 20px 60px;
  margin: 0 0 14px;
  border: 1px solid #fff;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
  position: relative;
  line-height: 1.4;
}

.worry li::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-image: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/moyamoya.webp');
  background-size: contain;
  background-repeat: no-repeat;
}

.large_text {
  text-align: center;
  font-size: 38px;
  font-weight: bold;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 36px;
}

.bg_grad_blue {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(90deg, #659eeb 0%, #1d6cdd 100%);
  color: #ffffff;
  padding: 0 16px;
  margin-right: 12px;
  line-height: 1.3;
}

.large_text+p {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.9;
  margin: 0;
}

.subs_worry02 {
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/worry02_bg01.png')left top no-repeat, url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/worry02_bg02.png')right top no-repeat, #e9f3ff;
  background-size: contain;
  padding: 70px 0 90px;
  margin: 0;
}

.tk_label {
  font-size: 46px;
}

.tk_label .number {
  font-size: 70px;
}


.subs_worry02 .large_text {
  line-height: 2.2;
}

section.subs_reason {
  background: #fff;
  padding: 10px 0 120px;
}

.articleBody h2.main_title .num {
  color: #ff4701;
  font-size: 86px;
  font-weight: 700;
  line-height: 1;
}

.reason_box_wrap.flex {
  display: flex;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}

.reason_box {
  flex: 1;
  background-color: #ffece5;
  border-radius: 20px;
  padding: 32px 20px;
  box-sizing: border-box;
}

.reason_box .box_title {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff4701;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 20px;
  min-height: 90px;
}

.reason_box .box_title .title_inner {}

.reason_box .box_title.fs_m {
  font-size: 26px;
  line-height: 1.3;
}

.reason_box .box_title .num,
.reason_box .box_title .num02 {
  font-size: 57px;
  font-weight: 700;
  line-height: 1;
  margin-right: 2px;
}

.reason_box .box_title .num02 {
  font-size: 40px;
}

.reason_box figure {
  margin: 0 auto 20px;
  width: 120px;
  height: 120px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reason_box figure img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

/*
.reason_box figure img[src=""],
.reason_box figure img:not([src]) {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea4e1b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
}
*/
.reason_box p {
  margin: 0;
  text-align: left;
  width: 100%;
}

/* plan */

section.subs_price {
  background: #ffece5;
  padding: 10px 0 100px;
}

.plan_wrap {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin: 75px 0;
}

.plan_box {
  width: 100%;
  background-color: #ffffff;
  border-radius: 20px;
  font-family: sans-serif;
  margin: 0 auto;
  position: relative;
}

.recommend_label {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #ff4701;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translate(-50%, 0);
}

.plan_box .recommend_label:before,
.plan_box .recommend_label::after {
  content: '';
  width: 31px;
  height: 31px;
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/recommend_arrow01.webp')center no-repeat;
  background-size: contain;
  margin: 0 10px;
}

.plan_box .recommend_label::after {
  transform: scaleX(-1);
}


.plan_title {
  background: linear-gradient(90deg, #2d77df 0%, #6299e7 100%);
  border-radius: 20px 20px 0 0;
  color: #ffffff;
  text-align: center;
  padding: 18px 15px;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 3px;

}

.plan_title.sta {
  background: linear-gradient(90deg, #aa65db 0%, #c08ce4 100%);
}

.plan_title.pre {
  background: linear-gradient(90deg, #e869ad 0%, #ee8fc2 100%);
}


.plan_title .note {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 4px;
}

.plan_desc {
  padding: 30px 0 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.label_radius {
  background-color: #fcebe8;
  color: #e13621;
  font-size: 18px;
  font-weight: bold;
  padding: 4px 20px;
  border-radius: 20px;
  letter-spacing: 1px;
}

.plan_price {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.plan_price .label {
  writing-mode: vertical-rl;
  border: 2px solid #e03816;
  border-radius: 6px;
  color: #e03816;
  font-size: 24px;
  font-weight: bold;
  padding: 6px;
  margin-right: 5px;
  transform: translateY(5px);
  line-height: 1;
}

.plan_price .number {
  color: #e03816;
  font-size: 76px;
  font-weight: bold;
  line-height: 1;
}

.price_unit {
  display: flex;
  flex-direction: column;
}

.price_unit span:not(.note) {
  color: #e03816;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.1;
}

.price_unit .note {
  font-weight: bold;
  line-height: 1.1;
}

/* --- キャンペーンバナー全体 --- */
.campaign {
  position: relative;
  overflow: visible;
  width: 880px;
  margin: 0px auto;
  padding: 20px 0px 50px;
  box-sizing: border-box;
  border-radius: 20px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", MeiYo, sans-serif;
  background-image: linear-gradient(to right, #ffa813 0%, #ff4801 100%);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.campaign_title::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -4px;
  width: 225px;
  height: 96px;
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/ribbon01.webp') no-repeat left top / contain;
  pointer-events: none;
}

.campaign::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -15px;
  width: 170px;
  height: 139px;
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/ribbon02.webp') no-repeat center center / contain;
  pointer-events: none;
}

.campaign::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -4px;
  width: 151px;
  height: 65px;
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/ribbon03.webp') no-repeat right bottom / contain;
  pointer-events: none;
  z-index: 2;
}

/* --- タイトル（初回限定キャンペーン） --- */
.campaign_title {
  color: #ffffff;
  font-size: 46px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.campaign_desc {
  border-radius: 16px;
  padding: 30px;
  margin: 16px 30px 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #b79671 0%, #bca271 30%, #fff3dc 70%, #b08d68 100%);
  border: 4px solid #fff;
}

.campaign_desc::before {
  content: '';
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  border-radius: 10px;
  background: #fff;
}

.label_circle {
  width: 130px;
  height: 130px;
  min-width: 105px;
  background-color: #e13621;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.25;
  box-sizing: border-box;
  z-index: 10;
}

.label_circle .num {
  font-size: 30px;
  margin: 0 1px;
}

.campaign_price {
  color: #e13621;
  line-height: 1;
  z-index: 10;
}

.campaign_price .before_price {
  color: #333;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

.campaign_price .before_price .number {
  font-size: 32px;
  font-weight: 700;
}

.campaign_price>.number {
  font-size: 100px;
  font-weight: 700;
  letter-spacing: -2px;
  vertical-align: middle;
}

.campaign_price>span:not(.number):not(.note) {
  font-size: 76px;
  font-weight: 600;
  margin-left: 2px;
  vertical-align: bottom;
}

.campaign_price .note {
  font-size: 46px;
  font-weight: 600;
  margin-left: 2px;
  vertical-align: bottom;
}

/* 全体共通・テキストカラー用クラス */
.fc_white {
  color: #ffffff;
}

/* セクション全体の背景と余白 */
.subs_contact {
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/subs_contact_bg.png')center no-repeat, #1a73e8;
  padding: 10px 20px 100px;
  margin: 0;
  text-align: center;
}

.articleBody .subs_contact h2.main_title {
  font-size: 40px;
}

.subs_contact .contact_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.subs_contact .contact_btn a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px;
  padding: .6em;
  border-radius: 100px;
  font-size: 28px;
  letter-spacing: 2px;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}

.subs_contact .contact_btn a:hover {
  opacity: 0.85;
}

/* 左側：TELボタン（白背景 / 青文字） */
.subs_contact .contact_btn a[href^="tel:"] {
  background-color: #ffffff;
  color: #1f6ddd;
  font-weight: bold;
  font-size: 28px;
}

/* 右側：フォームボタン（濃い青背景 / 白枠線） */
.subs_contact .contact_btn a[href="#form"] {
  background-color: #003499;
  color: #ffffff;
  border: 4px solid #ffffff;
}


/* service */

section.subs_service {
  background: #e9f3ff;
  padding: 10px 0 100px;
}


.service_box {
  display: flex;
  align-items: center;
  padding: 24px 50px;
  border-bottom: 1px solid #d4e3f8;
  margin: 0 auto;
}

.service_box:last-child {
  border-bottom: none;
}

.service_title {
  width: 130px;
  flex-shrink: 0;
  color: #1d6be5;
  font-size: 24px;
  font-weight: bold;
}

.service_box ul {
  flex-grow: 1;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  margin: 0;
  padding: 0;

}

.service_box li {
  width: calc((100% - 72px) / 3);
  min-height: 80px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  background-color: #ffffff;
  color: #1d6be5;
  font-weight: bold;
  box-sizing: border-box;
}


/* flow */

section.subs_flow {
  background: #fff;
  padding: 10px 0 100px;
}

.flow_wrap {
  max-width: 800px;
  padding: 30px;
  margin: auto;
  background: #f1f1f1;
}

.flow {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: stretch;
  gap: 24px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.flow_title {
  width: 220px;
  flex-shrink: 0;
  padding: 12px;
  padding-left: 30px;
}

.flow_step {
  display: inline-block;
  background-color: #1f6ddd;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: bold;
  padding: 3px 1.5em;
  border-radius: 20px;
  margin-bottom: 1rem;
  letter-spacing: 2px;
}

.flow_title h3.is-style-default {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 3px 0;
  border: none;
  background: none;
}

.flow_title h3.is-style-default:before {
  content: none;
}

.flow_text {
  height: auto;
  flex-grow: 1;
  background-color: #e9f3ff;
  border-radius: 8px;
  padding: 20px 24px;
}

.flow_text p {
  margin: 0;
  font-weight: bold;
}

/* achive */
section.subs_achiev {
  background: #f2f2f2;
  padding: 10px 0 100px;
}

.achiev_wrap {
  display: flex;
  gap: 30px;
  margin: 20px auto 60px;
  box-sizing: border-box;
  counter-reset: case-count;
}

.achiev_box {
  flex: 1;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(222, 222, 222, 1);
  padding: 24px 20px;
  position: relative;
  box-sizing: border-box;
  counter-increment: case-count;
}

.achiev_box::before {
  content: "CASE" counter(case-count);
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #ffaa00 0%, #ff4500 100%);
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  padding: 4px 24px;
  border-radius: 10px;
  letter-spacing: 3px;
  box-shadow: 0 2px 8px rgba(255, 69, 0, 0.3);
}

.achiev_box figure {
  margin: 10px 0 20px 0;
}

.achiev_box figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.achiev_box h3.is-style-default {
  font-weight: bold;
  margin: 0 0 20px 0;
  padding: 0 0 16px 0;
  border: none;
  border-bottom: 1px solid #dedede;
}

.achiev_box h3.is-style-default:before {
  content: none;
}

.achiev_cat {
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: bold;
}

.achiev_cat li:nth-child(1) {
  margin-bottom: 4px;
}

a.btn01 {
  max-width: 500px;
  display: block;
  padding: 16px 1em;
  margin: auto;
  border: 1px solid #fff;
  background: linear-gradient(to right, #d94545 0%, #a00202 100%);
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 26px;
  box-shadow: 9px 9px 10px rgba(0, 0, 0, 0.04);
}

/* voice */
section.subs_voice {
  background: #fff;
  padding: 10px 0 100px;
}

.voice_wrap {
  display: flex;
  gap: 40px;
  margin: 0 auto;
  box-sizing: border-box;
}

.voice_box {
  flex: 1;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(222, 222, 222, 1);
  padding: 32px 24px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  box-sizing: border-box;
}

.voice_box figure {
  margin: 0;
  width: 170px;
  flex-shrink: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.voice_box figure img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #ebf3fe;
  display: block;
  margin: 0 auto 12px;
}

.voice_box figcaption {
  font-size: 12px;
  text-align: left;
}

.voice_desc {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.voice_desc .job {
  font-size: 14px;
  font-weight: bold;
}

.voice_desc .name {
  display: block;
  font-size: 20px;
  font-weight: bold;
}

.voice_desc .copy {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
}

.voice_desc p {
  margin: 0 0 20px 0;
}

/* options */
.subs_option {
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/bg_deco_line_orange.png')center no-repeat, #fff;
  background-size: cover;
  padding: 10px 0 100px;
  margin: 0;
}

.box_white {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 40px;
  margin: 0 auto;
  box-sizing: border-box;
}

.subs_option .main_text {
  margin: 0 0 50px;
}

.main_text.fs_medium {
  font-size: 24px;
}

.main_text.fs_medium .fs_large {
  font-size: 32px;
  font-weight: 900;
}

.option_list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 90px;

}

.option_list li {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffaa00 0%, #ff3300 100%);
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px;
}

.option_list li:nth-child(even) {
  transform: translateY(60px);
}

.option_list li:nth-last-child(-n + 2) {
  font-size: 18px;
}

.articleBody .option_list img {
  max-width: 100px;
  margin: 0 0 10px;
}

.option_list li:nth-child(2) img {
  margin: 0;
}


.box_white.shadow {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(222, 222, 222, 1);
  padding: 70px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
  box-sizing: border-box;
}

section.subs_members {
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/member_bg02.png')left center no-repeat,
    url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/member_bg01.png')right center no-repeat, #fff;
  background-size: contain;
  padding: 10px 0 100px;
}

.subs_message {
  padding: 140px 0 0;
}

.subs_message figure {
  margin: 0;
  width: 320px;
  flex-shrink: 0;
}

.subs_message figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.subs_message .message {
  flex-grow: 1;
}

.subs_message .message p {
  line-height: 1.8;
  margin: 0 0 24px 0;
}

.subs_message .message p.sign {
  text-align: right;
  margin: 32px 0 0 0;
  font-weight: bold;
}


/* faq */
.subs_faq {
  background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/bg_deco_line_orange.png')center no-repeat, #fff;
  background-size: cover;
  padding: 10px 0 100px;
  margin: 0;
}

.articleBody .faq p {
  margin-block-start: 0;
  margin-block-end: 1em;
}

.faq {
  padding: 40px 40px 20px 100px;
  border-radius: 10px;
  background: #fff;
  margin: 0 0 30px;
  position: relative;
}

.articleBody h3.question.is-style-default {
  padding: 10px 10px 10px 60px;
  margin: 0 0 20px;
  border: none;
  font-size: 16px;
  text-align: left;
}

.articleBody h3.question:before {
  content: "Q";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: #ff4701;
  border-radius: 50%;
  font-size: 20px;
  font-weight: normal;
  color: #fff;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.answer {
  padding: 0 0 0 60px;
  position: relative;
}

.answer:before {
  content: "A";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 2px solid #ff4701;
  border-radius: 50%;
  font-size: 20px;
  color: #ff4701;
  position: absolute;
  left: 10px;
  top: 0;
}

.click_title:hover {
  color: #999;
}

.click_title:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 12px;
  height: 12px;
  border-top: 2px solid #1f6ddd;
  border-right: 2px solid #1f6ddd;
  transform: translateY(-50%) rotate(135deg);
  pointer-events: none;
  transition: .3s;
}

.click_title.open:after {
  transform: translateY(-50%) rotate(-45deg);
}

.subs_form .wpcf7 {
  width: 100%;
}

.subs_form .box_white {
  max-width: 800px;
  padding: 50px;
  margin: auto;
}

@media screen and (max-width: 1200px) {
  .inner {
    width: 100%;
    padding: 0 10px;
    margin: auto;
  }

  .subs_mv .mySwiper {
    width: 100%;
    max-width: 50%;
    margin: 0 0 0 auto;
    padding: 100px 0 120px;
    overflow: hidden;
    position: relative;
  }

  .subs_mv .mySwiper .swiper-slide {
    width: 50%;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 40px;
    height: 40px;
  }

  .subs_mv .inner:before {
    content: "";
    display: block;
    width: 55%;
    height: calc(100% - 70px);
    background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/mv_text.webp')center no-repeat;
    position: absolute;
    background-size: contain;
    left: 0;
    top: 0px;
  }

  ul.fv_btn li a {
    display: block;
    padding: 8px 1.5em;
    font-size: 18px;
  }
}

@media screen and (max-width: 1000px) {
  .pc_only {
    display: none;
  }

  .mobile_only {
    display: block;
  }

  .articleBody h2.main_title {
    font-size: 40px;
  }

  .subs_worry .main_title.is-style-default,
  .articleBody .subs_contact h2.main_title {
    font-size: 36px;
  }

  .articleBody h2.main_title.fc_blue {
    font-size: 36px;
    padding: 0.6em 0;
  }

  .subs_worry {
    background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/subs_worry_bg02.webp')left -140px bottom 0 no-repeat, url("https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/subs_worry_bg.png")center no-repeat;
    background-size: contain, cover;
    padding: 40px 0 60px;
  }

  .subs_worry .inner {
    align-items: center;
  }

  .subs_worry .inner::before {
    display: none;
  }

  .worry {
    margin-left: 40%;
  }

  .worry li {
    font-size: 1em;
    padding: 12px 12px 12px 40px;
  }

  .worry li::before {
    left: 10px;
  }

  .subs_worry::after {
    bottom: -60px;
    height: 120px;
    background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/arrow_blue.webp')center no-repeat;
    background-size: contain;
  }


  .large_text {
    margin-bottom: 24px;
  }

  .bg_grad_blue {
    padding: 2px 10px;
    margin-right: 6px;
  }

  .large_text+p {
    font-size: 1.2em;
    line-height: 1.6;
  }

  .tk_label {
    font-size: 30px;
  }

  .tk_label .number {
    font-size: 60px;
  }

  .reason_box_wrap.flex {
    flex-wrap: wrap;
  }

  .plan_wrap {
    gap: 20px;
    margin: 75px 0 30px;
  }

  .plan_title {
    font-size: 20px;
    padding: 18px 0;
  }

  .plan_title .note {
    font-size: 16px;
  }

  .plan_price .label {
    font-size: 16px;
    padding: 3px;
  }

  .plan_price .number {
    font-size: 5.5vw;
  }

  .price_unit {
    gap: 5px;
  }

  .recommend_label {
    font-size: 20px;
  }

  .plan_box .recommend_label:before,
  .plan_box .recommend_label::after {
    content: '';
    width: 24px;
    height: 24px;
  }

  .campaign {
    width: 95%;
    max-width: 880px;
  }

  .campaign_title {
    font-size: 30px;
    margin: 30px 0 10px;
  }

  .campaign_price>.number {
    font-size: 60px;
  }

  .campaign_price>span:not(.number):not(.note) {
    font-size: 40px;
  }

  .campaign_price .note {
    font-size: 30px;
  }

  .campaign_price .before_price {
    font-size: 20px;
  }

  .service_box {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
  }

  .service_box ul {
    width: 100%;
    gap: 20px;
  }

  .service_box li {
    width: calc((100% - 40px) / 3);
  }

  .reason_box {
    flex: 0 0 calc(50% - 10px);
  }


  .flow_title {
    width: 180px;
    padding-left: 10px;
  }

  .voice_wrap {
    flex-direction: column;
  }

  .voice_box {
    flex-direction: column;
    align-items: center;
    padding: 24px 20px;
  }

  .voice_desc {
    align-items: center;
    text-align: center;
  }

  .box_white.shadow {
    flex-direction: column;
    padding: 24px;
    gap: 24px;
  }

  .subs_message figure {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }

  .achiev_wrap {
    gap: 20px;
  }

  .achiev_box::before {
    top: -20px;
    font-size: 16px;
    white-space: nowrap;
  }

  a.btn01 {
    width: 100%;
    max-width: 500px;
    font-size: 18px;
  }

  .box_white {
    padding: 32px 16px;
  }

  .main_text {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .option_list {
    flex-wrap: wrap;
    justify-content: center;
  }

  .option_list li:nth-child(even) {
    transform: translateY(0);
  }

  .option_list li {
    font-size: 18px;
  }

  .subs_message {
    padding: 30px 0 0;
  }

  .subs_contact {
    padding: 40px 16px;
  }

  .subs_contact .main_title {
    font-size: 24px;
    margin-bottom: 28px;
  }

  .subs_contact .main_title .note {
    font-size: 14px;
    margin-top: 8px;
  }

  .subs_contact .contact_btn {
    flex-direction: column;
    gap: 16px;
  }

  .subs_contact .contact_btn a {
    height: 56px;
    font-size: 20px;
    letter-spacing: 0;
  }

  .faq {
    padding: 40px 40px 20px;
  }

  .faq .click_title:after {
    position: absolute;
    top: 50%;
    right: -10px;
  }

}

@media screen and (max-width: 599px) {
  .sp_only {
    display: block;
  }

  .articleBody h2.main_title.fc_blue {
    font-size: 30px;
  }

  .field_wrap {
    flex-direction: column;
    gap: 10px;
  }

  .field_name {
    display: flex;
    align-items: center;
  }

  div.field_name.require::after,
  div.field_name.any::after {
    margin: 0 10px;
    position: relative;
    transform: translateY(0);
  }

  .field {
    width: 100%;
  }

  .subs_mv .mySwiper {
    max-width: 100%;
    padding: 0 0 30px;
  }

  section.subs_mv {
    padding: 30px 0;
  }

  .subs_mv .inner:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-top: calc(76% + 30px);
    background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/mv_text.webp')center top no-repeat;
    position: relative;
    background-size: contain;
    left: 0;
    top: 0px;
  }

  .subs_mv .swiper-horizontal .swiper-button-prev,
  .subs_mv .swiper-horizontal .swiper-button-next {
    transform: translateY(-50%);
    top: calc(50% + 15px);
  }

  section.subs_fv {
    padding-bottom: 10px;
    background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/lp_02.webp')center bottom no-repeat;
    background-size: cover;
    position: relative;
  }

  ul.fv_btn {
    width: 95%;
    max-width: 400px;
    flex-direction: column;
    gap: 5px;
    position: relative;
  }

  ul.fv_btn li a {
    font-size: 14px;
  }

  .subs_fv ul.fv_btn {
    transform: translate(-50%, -20px);
  }

  section.subs_reason,
  section.subs_price,
  section.subs_service,
  section.subs_flow,
  section.subs_achiev,
  section.subs_voice,
  section.subs_option,
  section.subs_members,
  section.subs_faq {
    padding: 10px 0 60px;
  }

  .articleBody h2.main_title {
    padding: 0.6em 0;
    margin: 30px 0;
    font-size: 30px;
  }

  .articleBody h2.main_title .note {
    margin: 10px 0 0;
    font-size: 16px;
  }

  .subs_worry .main_title.is-style-default,
  .articleBody .subs_contact h2.main_title {
    font-size: 26px;
    letter-spacing: 1px;
  }

  .articleBody h2.main_title .num {
    font-size: 60px;
  }

  .main_text.fs_medium {
    font-size: 20px;
  }

  .main_text.fs_medium .fs_large {
    font-size: 22px;
  }

  .subs_worry02 {
    padding: 30px 0 60px;
  }

  .subs_worry02 .large_text {
    font-size: 26px;
  }

  .subs_worry {
    background: url('https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/subs_worry_man.webp')left bottom -70px no-repeat, url("https://cms-professional.net/subscription_hp/wp-content/uploads/2026/08/subs_worry_bg.png")center no-repeat;
    background-size: 240px, cover;
  }

  .tk_label {
    font-size: 22px;
  }

  .tk_label .number {
    font-size: 40px;
  }

  .worry {
    margin: 0 auto 160px;
    width: 90%;
  }

  .worry li {
    display: block;
  }

  .plan_wrap {
    flex-direction: column;
    margin: 30px 0 75px;
  }

  .plan_box:nth-child(2) {
    margin-top: 50px;
  }

  .plan_title {
    padding: 10px 0;
  }

  .plan_desc {
    padding: 20px 0;
  }

  .plan_price .number {
    font-size: 50px;
  }

  .campaign {
    padding: 20px 0px 30px;
  }

  .campaign_title::before {
    width: 160px;
  }

  .campaign::before {
    top: -50px;
    width: 140px;
  }

  .campaign_desc {
    padding: 60px 16px 16px;
    margin: 30px 20px 0;
    gap: 0;
    text-align: center;
  }

  .label_circle {
    width: 100px;
    height: 100px;
    min-width: auto;
    font-size: 14px;
    position: absolute;
    top: -30px;
    left: -10px;
  }

  .label_circle .num {
    font-size: 20px;
  }

  .campaign_price>.number {
    font-size: 48px;
  }

  .campaign_price>span:not(.number):not(.note) {
    font-size: 26px;
  }

  .campaign_price .before_price {
    font-size: 18px;
  }

  .campaign_price .note {
    font-size: 20px;
  }

  .flow {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .flow_title {
    width: 100%;
  }

  .flow_text {
    width: 100%;
    box-sizing: border-box;
  }

  .reason_box {
    flex: 0 0 100%;
  }

  .reason_box .box_title {
    min-height: auto;
  }

  .service_box ul {
    gap: 10px;
  }

  .service_box li {
    width: 100%;
    min-height: 60px;
  }

  .achiev_wrap {
    flex-direction: column;
    gap: 40px;
  }

  .achiev_box {
    width: 100%;
  }

  .option_list li {
    width: 130px;
    height: 130px;
  }

  .faq {
    padding: 40px 20px 20px;
  }

  .click_title:after {
    right: 0;
  }
}