@charset "UTF-8";

/*-----------------------------
color
-----------------------------*/
/* 
【サイトカラーの変数】
ここの色を変更すると全体の色を変更できます(^)o(^)bたぶん
使用例) color: var(--black-color);
*/
:root {
	--white: #ffffff;
	--black: #4E4E4E;
	--gray: #585961;
	--pink: #FF38A1;
	--blue: #48B8F5;
	--yellow: #FFED09;
  
	--color1: #041A68;
	--color2: #858DD9;
	--color3: #B26DC3;
}

/*------------------------------
共通
------------------------------*/

* {
}
body {
  color: var(--gray);
  background: url(../images/page-campaign-2504/bg.jpg) repeat center !important;
  background-attachment: fixed !important;
}
header.header {
	display: none;
}
img {
  image-rendering: auto;         /* ← 基本はこれ（ブラウザ任せ） */
  image-rendering: smooth;       /* ← 滑らかに表示（非標準だけど効果ある場合あり） */
  image-rendering: -webkit-optimize-contrast; /* ← Safari向けにくっきりさせる */
}
.page-campaign {
  overflow-x: hidden;
}
.page-campaign h1 {
  font-size: 50px;
  text-align: center;
}
.page-campaign h2 {
  font-size: 50px;
  color: #62B1DD;
  border-bottom: 0px solid var(--pink);
  text-align: center;
  position: relative;
  padding-bottom: 60px;
}
.page-campaign h2::before {
  width: 0;
  height: 0;
  content: "";
  position: absolute;
  top: 100%;
}
.page-campaign h2.fade-line::after {
  content: "";
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: left center;
  opacity: 0;
  width: 182px;
  height: 6px;
  background-image: url("../images/page-campaign-2504/line.png");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 1s ease-out, opacity 1s ease-out;
}

.page-campaign h2.fade-line.animate::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}
.page-campaign .inner {
  padding: 80px 50px;
  max-width: 1200px;
  width: 100%;
}
br.sp {
  display: none;
}
br2.sp {
  display: none;
}
li.sp {
  display: none;
}

/*------------------------------
コンテンツ
------------------------------*/
.page-campaign .campaign-fv {
  background: url("../images/page-campaign-2504/bg_campaign.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
	margin-top: -80px;
  z-index: 0;
	position: relative;
}
.bg-bottom-img {
	position: absolute;
	bottom: 200px;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 99;
	pointer-events: none;
}
.page-campaign .campaign-fv .inner {
  position: relative;
  height: 800px;
}
.page-campaign .campaign-fv .campaign-catch {
  position: absolute;
	top: 150px;
	left: 60px;
  width: 650px;
  z-index: 99;
}
.campaign-ch {
  position: absolute;
  right: -250px;
  bottom: 0;
  width: 900px;
  z-index: 5;
  opacity: 0;
  transform: translateX(100%);
  will-change: transform, opacity;
}

/* スライドイン */
.campaign-ch.animate {
  animation: slideIn 0.6s ease-out forwards;
}

/* 拡大ポップ（位置は維持） */
.campaign-ch.pop {
  animation: popScale 0.4s ease-out forwards;
}

/* スライドインアニメーション */
@keyframes slideIn {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ポンっと拡大→戻るアニメーション */
@keyframes popScale {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(0) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}



.page-campaign section.okomari {
  position: relative;
  background: var(--color1);
  z-index: 9;
}
.page-campaign .okomari .okomari-top {
  width: 100%;
  position: absolute;
  top: -120px;
  z-index: 1;
}
.page-campaign section.okomari .inner {
  padding: 80px 50px 50px;
}
.page-campaign section.okomari h2 {
  color: var(--yellow);
  padding-bottom: 70px;
}
.page-campaign section.okomari ul,
.page-campaign section.usage-flow ul {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  justify-content: space-between; /* 均等に配置 */
}
.page-campaign section.usage-flow ul {
  margin-top: 50px;
}
.page-campaign section.okomari ul li {
  position: relative;
  width: calc(25% - 20px);
  margin: 10px;
  list-style: none;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0px 0px 10px #00000029;
  line-height: 30px;
  padding: 30px;
  background: var(--white);
}
.page-campaign section.usage-flow li {
  position: relative;
  width: calc(25% - 20px);
  margin: 10px;
  list-style: none;
  text-align: center;
}
.page-campaign section.usage-flow li {
  width: calc(25% - 30px) !important;
  margin: 0px !important;
}
.page-campaign section.okomari ul li img,
.page-campaign section.usage-flow div.step img {
  padding-top: 10px;
  padding-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
}
.page-campaign section.okomari ul li em,
.page-campaign section.usage-flow div.step span {
  top: -25px;
  font-size: 24px;
  position: absolute;
  border-radius: 50px;
  background: var(--blue);
  left: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  transform: translateX(-50%);
  font-family: "title", sans-serif;
  color: #fff;
	font-style: normal;
}
.step-label {
  position: absolute;
  top: -30px;
  left: 0%;
  transform: scale(1.29);
  width: 100%;
  height: 80px;
  background: #4fc3f7;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  line-height: 60px;
  text-align: center;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
  z-index: 2;
}
.usage-flow div.step {
	height: 350px;
  margin-top: 13%; 
  border-radius: 10px;
  line-height: 30px;
  padding: 20px;
  background: var(--white);
  position: relative;
    z-index: 50;
}
.usage-flow div.step h3 {
	font-size: 25px;
	margin-bottom: 15px;
}
.usage-flow div.step p {
	text-align: left;
}
.usage-flow li:nth-child(1) div.step {
  border: 3px solid var(--blue);
}
.usage-flow li:nth-child(1) div.step h3 {
  color: var(--blue);
}
.usage-flow li:nth-child(2) div.step {
  border: 3px solid var(--color2);
}
.usage-flow li:nth-child(2) div.step h3 {
  color: var(--color2);
}
.usage-flow li:nth-child(3) div.step {
  border: 3px solid var(--color3);
}
.usage-flow li:nth-child(3) div.step h3 {
  color: var(--color3);
}
.usage-flow li:nth-child(4) div.step {
  border: 3px solid var(--pink);
}
.usage-flow li:nth-child(4) div.step h3 {
  color: var(--pink);
}

/* STEP別カラー */
.step1 .step-label { background: var(--blue); z-index: 10 !important;}
.step2 .step-label { background: var(--color2); z-index: 9 !important; }
.step3 .step-label { background: var(--color3); z-index: 8 !important; }
.step4 .step-label { background: var(--pink); z-index: 7 !important; }
.step1 { z-index: 10 !important;}
.step2 { z-index: 9 !important; }
.step3 { z-index: 8 !important; }
.step4 { z-index: 7 !important; }

.page-campaign section.usage-flow ul li span {
  top: -25px;
  font-size: 24px;
  border-radius: 0px;
  background: var(--blue);
  left: 50%;
  width: 100%;
  height: 100px;
  line-height: 100px;
}
.page-campaign .onayamikaiketsu {
  background: url("../images/page-campaign-2504/triangle.svg") no-repeat top;
  width: 100%;
}
.page-campaign .onayamikaiketsu .inner {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
  padding: 120px 50px 0;
}
.page-campaign .onayamikaiketsu .inner .kaiketsu-catch,
.page-campaign .website-production .inner .website-production-catch {
  position: relative;
  width: 75%;
  margin: 50px auto 20px;
}
.page-campaign .onayamikaiketsu .inner .kaiketsu-catch img,
.page-campaign .website-production .inner .website-production-catch img{
  margin: 0 auto;
}
.page-campaign .website-production .inner .website-production-catch img{
  width: 70%;
}
.page-campaign .onayamikaiketsu .inner .kaiketsu-catch h1 {
  position: relative;
  z-index: 2;
}
.page-campaign .onayamikaiketsu .inner p .bold {
  font-weight: bold;
}
.page-campaign .onayamikaiketsu .inner p .red {
  color: #FF5E5E;
  font-size: 22px;
  font-weight: bold;
}
.page-campaign .onayamikaiketsu .img-sun {
  width: 100px !important;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.page-campaign .onayamikaiketsu .img-hili {
  width: 100px !important;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.page-campaign .onayamikaiketsu h1 {
  color: #62B1DD;
  font-size: 35px !important;
  padding-bottom: 5px;
  text-align: center;
}
.page-campaign .onayamikaiketsu b {
  color: #F46195;
  font-size: 60px !important;
}
.page-campaign .onayamikaiketsu em {
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  position: relative;
  display: inline-block;
}
.page-campaign .onayamikaiketsu em::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 5px;
  background-color: var(--pink);
  transition: width 0.3s ease-in-out;
}
.page-campaign .onayamikaiketsu em.active::after {
  width: 100%; /* クラスを付与したときにアニメーション開始 */
}
.page-campaign .onayamikaiketsu em span {
  font-size: 40px;
}

.page-campaign .service-block {
	width: 800px;
	margin: 0 auto;
}
.page-campaign .service-block h3 {
	font-size: 30px;
  background: var(--color1);
  color: var(--yellow);
  text-align: center;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  margin-bottom: 5px;
}
.page-campaign .service-cards {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
}
.page-campaign .service-card {
  background: var(--white);
  border-radius: 0 0 10px 10px;
  padding: 30px 30px 50px;
  width: 263px;
  box-shadow: 0 0 10px #00000029;
  text-align: center;
}
.page-campaign .service-card p {
  font-size: 18px;
}
.page-campaign .icon-placeholder {
  margin: 0 auto 20px;
	line-height: 30px;
}
.page-campaign .icon-placeholder img {
  margin: 0 auto;
}

.price-table {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.price-header, 
.price-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
	font-weight: bold;
}
.price-header div,
.price-row div {
	height: 70px;
  padding: 0 20px;
  margin-right: 3px;
  background: #fff;
}
.price-row span.number {
	background: var(--blue);
	color: var(--white);
	width: 30px;
	height: 30px;
	border-radius: 30px;
	text-align: center;
}
/* 左右間の線（右側の左線） */
.price-header div:last-child,
.price-row > div:last-child {
  padding-left: 20px;
	width: 450px;
	background: #EBEDF3;
}
.price-header div.col-title {
	font-size: 20px;
	text-align: center;
	background: var(--blue);
	color: var(--white);
	border-radius: 10px 0 0 0;
}
.price-header div.col-price {
	font-size: 20px;
	text-align: center;
	background: var(--color1);
	color: var(--white);
	border-radius: 0 10px 0 0;
}
.col-title,
.col-price,
.item-info,
.item-price
{
  display: flex;
  align-items: center;	
  gap: 10px;
}
.item-info img
{
  width: 40px;
}
.price-total {
	background: var(--white);
	padding: 20px;
	border-radius: 0 0 10px 10px;
	font-weight: bold;
	font-size: 1.2em;
	margin-right: 3px;
}
.price-total img {
	margin: 20px;
}
.price-total p {
}
.total-right .highlight {
  font-size: 2em;
  color: #ff3399;
}

.website-production em {
  font-style: normal;
  text-decoration: none;
  color: var(--white);
  padding-top: 10px;
  display: block;
}
.campaign-service {
  background: #EBEDF3;
  padding: 50px;
  width: 1100px;
  text-align: center;
  border-radius: 10px;
  margin: 100px 0;
	margin-bottom: 150px;
}
.campaign-service h3 {
  color: var(--color1);
  font-size: 30px;
}
.campaign-service ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.campaign-service ul li {
}
.campaign-service div.basic-service,
.campaign-service div.maintenance-service {
  margin-top: 50px;
  padding: 15px;
  border-radius: 10px;
  position: relative;
}
.campaign-service div.basic-service p,
.campaign-service div.maintenance-service p {
  position: absolute;
  background: #EBEDF3;
  padding: 0 50px;
  font-size: 20px;
  font-weight: bold;
  top: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.campaign-service div.basic-service ul li,
.campaign-service div.maintenance-service ul li {
  position: relative;
  width: calc(30% - 0px);
  margin: 10px;
  list-style: none;
  text-align: center;
  border-radius: 10px;
  padding: 20px;
  background: var(--white);
  transform: scale(1);
  transition: transform 0.3s ease;
}

.campaign-service div.basic-service {
  color: var(--color3);
  border: 1px solid  var(--color3) !important;
}
.campaign-service div.basic-service p {
  color: var(--color3);
}
.campaign-service div.basic-service li {
  background: var(--color3) !important;
  color: var(--white);
}
.campaign-service div.maintenance-service {
  color: var(--color2);
  border: 1px solid  var(--color2) !important;
}
.campaign-service div.maintenance-service p {
  color: var(--color2);
}
.campaign-service div.maintenance-service li {
  background: var(--color2) !important;
  color: var(--white);
}
.campaign-service div.add-on-options {
  margin-top: 50px;
  border: 1px solid var(--blue) !important;
  border-radius: 10px;
  background: var(--white);
  padding: 30px;
}
.campaign-service div.add-on-options p {
  margin: 30px;
  font-size: 16px;
  font-weight: normal;
}
.campaign-service div.add-on-options ul {
  justify-content: flex-start;
}
.campaign-service div.add-on-options ul li {
  list-style: disc;
  margin-left: 30px;
  margin-right: 20px;
  margin-bottom: 10px;
}
.campaign-service div.add-on-options ul li::marker {
  color: var(--blue);
}
.usage-flow {
  background: var(--white);
}
.usage-flow h2,
.qa h2 {
  color: var(--color1) !important;
}

.campaign-note {
  background: linear-gradient(
    90deg,
    var(--blue),
    var(--color2),
    var(--color3),
    var(--pink),
    var(--color3),
    var(--color2),
    var(--blue),
		var(--blue) /* ← これで始点と終点がつながる！ */
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: moveGradient 8s linear infinite;
  margin: 20px;
  text-align: center;
  color: white;
  padding: 10px;
  font-weight: bold;
  overflow: hidden;
}
@keyframes moveGradient {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

.page-campaign .website-production {
  background: url("../images/page-campaign-2504/overview-top.png") no-repeat center bottom;
  background-size: contain; /* または cover/auto 好みに応じて */
}
.page-campaign .website-production h2 {
  color: #fff;
}
.page-campaign .website-production h2::after {
  background-image: url("../images/web-subsc1/line-w.png");
}
.page-campaign .website-production ul.main-ul {
  max-width: 800px;
  width: 100%;
  border: 3px solid #fff;
  border-radius: 20px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .9);
}
.page-campaign .website-production ul.main-ul li.main-li {
  list-style: none;
  margin: 0;
  text-align: center;
}
.page-campaign .website-production ul.main-ul li.main-li div:first-child {
  background: #F46195;
  border-radius: 16px 16px 0 0;
  text-align: center;
  color: #fff;
  padding: 20px 0;
  font-size: 24px;
  font-weight: bold;
  font-weight: inherit;
  font-family: "title", sans-serif;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child {
  padding: 30px 50px;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child em {
  text-decoration: line-through;
  font-weight: bold;
  font-style: normal;
  font-size: 24px;
  margin: 0 2px;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child p {
  text-align: left;
  line-height: normal;
  font-size: 18px;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child p:first-child {
  text-align: center;
  font-size: 20px;
}
.page-campaign .website-production ul.main-ul li.main-li p.plan {
  font-size:32px;
  font-weight: bold;
}
.page-campaign .website-production ul.main-ul li.main-li p.plan span {
  color: #F46195;
  font-size: 56px;
  font-weight: bold;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child p.plan {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #62B1DD;
  margin-bottom: 30px;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child p:last-child {
  color:#97979B;
  margin: 20px 0;
  font-size: 16px;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child p:nth-child(3),
.page-campaign .website-production ul.main-ul li.main-li div:last-child p:nth-child(4) {
  line-height: 1.8;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child span.circle {
  color: #62B1DD;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child b {
  color: #F46195;
  text-align: left;
  display: block;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child ul {
  display: flex;
  flex-wrap: wrap; /* 折り返しを可能にする */
  gap: 0px;
  font-size: 14px;
  background: #F6F4EA;
  border: 2px solid #B6B6BC;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child ul li {
  list-style: none;
  flex: 1 1 calc(25% - 0px);
  text-align: center;
  border: 0.25px solid #B6B6BC;
  margin: 0;
  padding: 20px;
  background: #fff;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child ul li:nth-child(8) {
  background: #F6F4EA;
  border-right: 0;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child ul li:nth-child(9) {
  background: #F6F4EA;
  border-left: 0;
}
.page-campaign .website-production ul.main-ul li.main-li div:last-child ul li img {
  border-radius: 0;
  margin: 0 auto 10px;
  width: 40px;
  height: 40px;
}

.page-campaign .overview,
.page-campaign .qa {
  background: #fff;
	padding-bottom: 150px;
}
.page-campaign .overview .inner {
    padding: 80px 50px 80px;
}
.page-campaign .overview h2 {
  background-image: linear-gradient(to right,
    var(--blue),  /* 色1 */
    var(--color2),  /* 色2 */
    var(--color3),  /* 色3 */
    var(--pink)   /* 色4 */
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: 40px;
}
.page-campaign .overview .left {
  display: inline-block;
}
.page-campaign .overview .right {
  display: inline-block;
  width: 45%;
  margin-left: 2%;
  vertical-align: top;  
}
.page-campaign .overview .overview-cnt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 40px;
}
.page-campaign .overview .overview-cnt li {
  background: #fff;
  border-radius: 10px;
  border: 2px solid #62B1DD;
  width: 48.5%;
  margin-bottom: 45px;
  position: relative;
  padding: 50px 30px 30px;
}
.page-campaign .overview .overview-cnt li>span {
  top: -25px;
  font-size: 24px;
  position: absolute;
  border-radius: 50px;
  background: #F46195;
  left: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  transform: translateX(-50%);
  font-family: "title", sans-serif;
  text-align: center;
  color: #fff;
}
.page-campaign .overview .overview-cnt li .overview-title {
  border-bottom: 1px solid #62B1DD;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.page-campaign .overview .overview-cnt li .overview-title img {
  margin: 0 auto 20px;
}
.page-campaign .overview .overview-cnt li .overview-title h4 {
  text-align: center;
  font-size: 24px;
  color: #F46195;
  font-family: "number", "Noto Sans JP", sans-serif;
  font-weight: bold;
}
.page-campaign .overview .overview-cnt li .overview-text p {
  text-align: left;
  font-size: 16px;
  line-height: 2;
}
.page-campaign .overview .overview-cnt li .overview-text .place {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #62B1DD;
  width: 100%;
  padding: 20px;
}
.page-campaign .overview .overview-cnt li .overview-text .place p:first-child span {
  font-weight: bold;
  text-decoration: line-through;
  font-size: 20px;
}
.page-campaign .overview .overview-cnt li .overview-text .place p:last-child {
  font-weight: bold;
  line-height: 1.3;
}
.page-campaign .overview .overview-cnt li .overview-text .place p:last-child span {
  font-size: 32px;
  font-weight: bold;
  color: #F46195;
}
.page-campaign .overview .overview-cnt li .overview-text .place p br:last-child {
  display: none;
}
.page-campaign .overview .overview-cnt li .overview-text .place img {
  margin: 0 20px;
  width: 15px;
}
.page-campaign .overview .note-box {
  border: 1px solid #4F6479;
  border-radius: 20px;
  margin-bottom: 40px;
  max-width: 1000px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.page-campaign .overview .note-box h3 {
  background: #4F6479;
  color: #fff;
  text-align: center;
  font-size: 20px;
  border-radius: 18px 18px 0 0;
  padding: 15px 0;
}
.page-campaign .overview .note-box ul {
  padding: 30px;
  text-align: center;
  font-size: 16px;
}
.page-campaign .overview .inner .note-box:first-of-type ul li .bold {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
  display: block;
}
.page-campaign .overview .inner .note-box:first-of-type ul li .red {
  color: #ff0000;
}
.page-campaign .overview .inner .note-box:last-of-type ul li {
  text-align: left;
  margin-bottom: 30px;
}
.page-campaign .overview .inner .note-box:last-of-type ul li .bold {
  font-size: 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid #4F6479;
  margin-bottom: 10px;
  font-weight: bold;
  display: block;
}


/*------------------------------
Q&A　テンプレ
------------------------------*/

.qa {
}
.qa li {
	margin-bottom: 50px;
}
.qa .qa-q,
.qa .qa-a {
	position: relative;
	margin-bottom: 20px;
}
.qa .qa-q::before,
.qa .qa-a::before {
	content: "Q";
	position: absolute;
	top: 0;
	left: 0;
	width: 67px;
	height: 67px;
	line-height: 63px;
	font-size: 30px;
	border-radius: 50px;
	font-weight: bold;
	background-color: var(--blue);
	color: var(--white);
	transition: width 0.3s ease-in-out;
	text-align: center;
}
.qa .qa-q {
	position: relative;
	cursor: pointer;
}
.qa .qa-q p {
	background: #EBEDF3;
	padding: 20px;
	border-radius: 15px;
	margin-left: 90px;
	letter-spacing: 1px;
	line-height: 2;
}
.qa .qa-q p::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	width: 20px;
	height: 11px;
	background-image: url('../images/page-campaign-2504/down-arrow.svg'); /* 下向きの矢印画像 */
	background-size: contain;
	background-repeat: no-repeat;
	transform: translateY(-50%) rotate(0deg);
	transition: transform 0.3s ease;
}
.qa .qa-q.open p::after {
	transform: translateY(-50%) rotate(180deg); /* または画像切替じゃなく回転だけでもOK */
}
.qa .qa-a {
	max-height: 0;
  overflow: hidden;
  transition: max-height 1.0s ease;
}
.qa-a.open {
  max-height: 1000px; /* 十分大きければOK（中身によって調整してね） */
}
.qa .qa-a::before {
	content: "A" !important;
	background-color: var(--pink) !important;
}
.qa .qa-a p {
	padding: 20px;
	border-radius: 15px;
	margin-left: 90px;
	letter-spacing: 1px;
	line-height: 2;
	color: var(--pink);
	font-weight: bold;
}
.typewriter .cursor {
  display: inline-block;
  width: 1px;
  height: 1em;
  background-color: var(--black);
  margin-left: 4px;
  animation: blink 0.8s infinite;
  vertical-align: middle;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.step-num {
  animation: none !important;
  opacity: 1 !important;
}

@media (max-width: 580px) {
 
  .qa .qa-q::before, .qa .qa-a::before {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
  }
  .qa .qa-q p,
  .qa .qa-a p {
    margin-left: 10px;
    letter-spacing: 0px;
  }
  .qa .qa-q p::after {
    right: 2%;
    top: 85%;
    width: 15px;
  }
  .qa li {
    margin-bottom: 10px;
  }
}
/*--------------------------------------------------------------------*/

/*------------------------------
コンタクト
------------------------------*/

.contact-wire {
	position: relative;
  background: url(../images/page-campaign-2504/otoiawase-bg.png) no-repeat center;
  background-size: cover;
	height: 420px;
}
.contact-wire .contact-ch {
	position: absolute;
	bottom: 0;
	left: 7%;
	
}
.contact-wire .contact-catch {
	position: relative;
  left: 30%;
}
.contact-wire div h4 {
  font-size: 42px;
  font-weight: bold;
  font-weight: inherit;
  font-family: "title", sans-serif;
  color: #4F6479;
  border: none;
  margin-bottom: 20px;
}
.contact-wire div p {
  font-size: 20px;
  color: #4F6479;
  margin-bottom: 30px;
  text-align: left;
}
.contact-wire div ul {
  display: flex;
  align-items: center;
	position: absolute;
  left: 39%;
	bottom: 13%;
}
.contact-wire div ul li {
  position: relative;
}
.contact-wire div ul li a {
  width: 320px;
  background: #F46195;
  color: #fff;
  font-size: 22px;
  font-family: "title", sans-serif;
  text-decoration: none;
  text-align: center;
  padding: 28px 0;
  border-radius: 50px;
  border: 3px solid #FFf;
	text-indent: 30px;
}
.contact-wire div ul li a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 22px;
	width: 36px;
	height: 26px;
	background-image: url('../images/page-campaign-2504/form-icon.svg'); /* 下向きの矢印画像 */
	background-size: contain;
	background-repeat: no-repeat;
	transform: translateY(-50%) rotate(0deg);
	transition: transform 0.3s ease;
}
.contact-wire div ul li:last-child a {
  background: #43D884;
  margin-left: 20px;
}
.contact-wire div ul li:last-child a::before {
	width: 36px;
	height: 34px;
	background-image: url('../images/page-campaign-2504/line-icon.svg'); /* 下向きの矢印画像 */
}


.contact {
  padding: 100px 0 160px;
  background: url(../images/page-campaign-2504/contact-bg.jpg) repeat center !important;
  background-attachment: fixed !important;
}
.contact .inner {
  max-width: 1100px;
  padding: 80px 100px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #00000029;
  overflow: hidden;
}
.contact .inner iframe {
  min-height: 3242px;
  height: auto;
  margin: 0 auto;
}

.achievement {
  width: 1956px;
  overflow: hidden !important;
  white-space: nowrap;
  position: relative;
  background: #fff;
  padding-bottom: 30px;
  max-width: none!important;
}
.achievement .scroll-content {
  display: flex;
  gap: 0;
  will-change: transform;
}
.achievement .scroll-content img {
  width: 1956px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

/*------------------------------
お問い合わせフォーム
------------------------------*/
.contact .contact-text {
  padding-bottom: 30px;
  margin-bottom: 50px;
  border-bottom: 1px solid #4F6479;
}
.contact .contactBox p {
  text-align: left;
  font-size: 16px;
	width: 70%;
}
.contact .contactBox li {
	margin-bottom: 60px;
  display: flex;
  align-items: center;
}
.contact .contactBox li:last-of-type {
  margin-bottom: 80px;
}
.contact .contactBox li.aria-title h3 {
  background: #4F6479;
  color: #fff;
  text-align: center;
  font-size: 20px;
  padding: 12px 0;
  margin-top: 100px;
  margin-bottom: 20px;
}
.contact .contactBox li.aria-title p {
  padding-bottom: 30px;
  margin-bottom: -20px;
  border-bottom: 1px solid #4F6479;
}
.contact .contactBox li>h4 {
  font-size: 18px;
  font-family: "number", "Noto Sans JP", sans-serif;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.4;
	width: 30%;
  margin-right: 20px;
	margin-right: 7%;
}
.contact .contactBox li>h4::before {
  margin-right: 10px;
  padding: 6px 10px;
  line-height: 1;
  background-color: #9799A5;
  border-radius: 20px;
  color: #fff;
  content: "任意";
  font-size: 14px;
  display: inline-block;
}
.contact .contactBox li>h4.req::before {
  background-color: #FF5E5E;
  content: "必須";
}
.contact .contactBox .wpcf7-list-item {
  margin: 0 40px 0 0;
  display: inline-block;
}
.contact .contactBox .wpcf7-list-item label {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-bottom: 20px;
}
.contact .contactBox .wpcf7-list-item input {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
.contact .contactBox .other-text {
  width: calc(100% - 44px);
  display: block;
  margin-left: 44px;
}
.contact .contactBox .wpcf7-form-control-wrap .wpcf7-text {
  border-radius: 5px;
  border: 1px solid #97979B;
  width: 100%;
}
.contact .contactBox .wpcf7-form-control-wrap .wpcf7-textarea {
  border-radius: 5px;
  border: 1px solid #97979B;
  width: 100%;
  height: 200px;
}
.contact .contactBox .radio-client-type {
  display: flex;
  align-items: center;
}
.contact .contactBox li .accept {
  border-top: 1px solid #4F6479;
  border-bottom: 1px solid #4F6479;
  max-width: 500px;
  width: 100%;
  margin: 20px auto 0;
  padding: 30px 0;
}
.contact .contactBox li .accept p {
  text-align: center;
  width: 100%;
}
.contact .contactBox li .accept p a {
  color: var(--blue);
  text-decoration: underline;
  display: inline-block;
}
.contact .contactBox li .accept p a:hover {
  color: var(--pink);
}
.contact .contactBox li .accept .wpcf7-list-item {
  margin: 0 !important;
}
.contact .contactBox li .accept .wpcf7-list-item>label {
  padding: 20px;
  border-radius: 5px;
  border: 1px solid #97979B;
  margin: 20px auto 0;
  width: 150px;
}
.contact .contactBox li .contact-note {
  margin-bottom: 20px;
}
.contact .contactBox li img {
  margin: 0 auto 30px;
}
.contact .contactBox li span.wpcf7-list-item-label {
    flex: 1;
}
.contact .button {
  padding: 10px 45px;
  background-color: #F46195 !important;
  color: #fff;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 300px;
  margin: 50px auto 0;
  border-radius: 100px;
  transition: all 0.2s;
}
.contact .button:hover {
  background-color: #62B1DD !important;
}

.contact .wpcf7-form-control-wrap input::placeholder,
.contact .wpcf7-form-control-wrap textarea::placeholder {
    opacity: 0.5; /* 一部ブラウザで色が薄くなるのを防ぐ */
}

/*------------------------------
めでぃあくえり
------------------------------*/
@media (max-width: 959px) {
	.page-campaign .campaign-fv {
	  background: url("../images/page-campaign-2504/bg_campaign-sp.jpg") no-repeat center center;
  	  background-size: cover;
		position: relative;
	}
	.page-campaign .campaign-fv .inner {
      height: 620px;
	}
	.page-campaign .campaign-fv .campaign-catch {
      top: 140px;
      left: 40px;
      width: 400px;
      z-index: 99;
	}
	.page-campaign .campaign-fv .campaign-ch {
	  right: 40px;
	  bottom: 0;
	  width: 420px;
	  z-index: 1;
	}
	.page-campaign .inner {
    padding: 80px 3%;
	}
	.page-campaign section.okomari .inner {
    padding: 80px 3% 50px;
	}
	.page-campaign .onayamikaiketsu .inner {
		padding: 150px 3% 50px;
	}
	.page-campaign .onayamikaiketsu h1 {
    	font-size: 30px !important;
	}
	.page-campaign .onayamikaiketsu b {
    	font-size: 48px !important;
	}
	.page-campaign .overview .inner {
    	padding: 80px 3% 50px;
	}
	.page-campaign .overview .overview-cnt li {
		padding: 50px 20px 20px;
	}
	.page-campaign .overview .overview-cnt li .overview-title h4 {
    	font-size: 20px;
	}
	.page-campaign .overview .overview-cnt li .overview-text .place {
		padding: 15px;
	}
	.page-campaign .overview .overview-cnt li .overview-text .place img {
    	margin: 0px 15px;
    	width: 12px;
	}
	.page-campaign .overview .overview-cnt li .overview-text .place p {
	    line-height: 1.3;
		text-align: center;
	}
	.page-campaign .overview .overview-cnt li .overview-text .place p:last-child span {
    	font-size: 24px;
	}
	.page-campaign .overview .overview-cnt li .overview-text .place p br:last-child {
  		display: block;
	}
	.contact-wire .inner {
		padding: 50px 3%;
	}
	.contact-wire div h4 {
		font-size: 32px;
		margin-bottom: 15px;
		margin-left: 3px;
	}
	.contact-wire div p {
		font-size: 16px;
		margin-bottom: 20px;
		margin-left: 3px;
	}
	.contact-wire div ul {
		justify-content: space-between;
	}
	.contact-wire div ul li {
		width: 49%;
	}
	.contact-wire div ul li a {
		width: 100%;
		font-size: 18px;
		padding: 20px 0;
		border: 3px solid #FFf;
	}
	.contact-wire div ul li:last-child a {
		width: 100%;
		margin-left: 0;
	}
	.contact {
    	padding: 100px 3% 160px;
	}
	.page-campaign .website-production {
	}
}
	
@media (max-width: 768px) {
	br.sp {
		display: block;
	}
	.page-campaign h2 {
		font-size: 28px;
	}
	.page-campaign .campaign-fv .inner {
        height: 560px;
    }
	.page-campaign .campaign-fv .campaign-catch {
        top: 120px;
        left: 15px;
        width: 350px;
        z-index: 2;
    }
	.page-campaign .campaign-fv .campaign-ch {
        right: 10px;
        bottom: 0;
        width: 360px;
        z-index: 1;
    }
	.page-campaign section.okomari .inner {
        padding: 70px 3% 10px;
    }
	.page-campaign section.okomari ul li {
		position: relative;
		width: calc(50% - 16px);
		margin: 10px 8px 20px;
		padding: 25px 10px;
		font-size: 15px;
	}
	.page-campaign section.okomari ul li em {
		top: -20px;
		font-size: 18px;
		width: 40px;
		height: 40px;
		line-height: 40px;
	}
	.page-campaign .onayamikaiketsu h1 {
		color: #62B1DD;
		font-size: 24px !important;
		padding-bottom: 15px;
		line-height: 1.1;
	}
	.page-campaign .onayamikaiketsu b {
        font-size: 32px !important;
    }
	.page-campaign .onayamikaiketsu .img-sun {
		width: 80px !important;
		position: absolute;
		left: -40px;
		top: 0;
		z-index: 1;
	}
	.page-campaign .onayamikaiketsu .img-hili {
		width: 80px !important;
		position: absolute;
		right: -20px;
		top: 0;
		z-index: 1;
	}
  .page-campaign .service-cards {
    margin: 30px 0;
  }
  .page-campaign .service-card {
    width: 90%;
    padding: 30px 0;
    border-radius: 10px;
		min-height: 310px;
  }
  .page-campaign .service-card:nth-child(1) {
  }
  .page-campaign .service-card:nth-child(2) {
  }
  .page-campaign .service-card:nth-child(3) {
  }
	.page-campaign .onayamikaiketsu p {
		padding: 0;
    font-size: 16px;
	}
	.page-campaign .onayamikaiketsu .inner p .red {
		color: #FF5E5E;
		font-size: 20px;
		font-weight: bold;
	}
	.page-campaign .website-production ul.main-ul li.main-li div:first-child {
    	padding: 15px 0;
    	font-size: 20px;
	}
	.page-campaign .website-production ul.main-ul li.main-li div:last-child {
    	padding: 30px 3%;
	}
	.page-campaign .website-production ul.main-ul li.main-li div:last-child p:first-child {
    	font-size: 18px;
	}
	.page-campaign .website-production ul.main-ul li.main-li p.plan span {
    	font-size: 42px;
	}
	.page-campaign .website-production ul.main-ul li.main-li div:last-child ul li {
		flex: 1 1 calc(33% - 0px);
		padding: 10px;
		background: #fff;
	}
	.page-campaign .website-production ul.main-ul li.main-li div:last-child ul li:nth-of-type(3n) {
		flex: 1 1 calc(34% - 0px);
	}
	li.sp {
  		display: block;
	}
	.page-campaign .overview .overview-cnt li {
		border: 2px solid #62B1DD;
		width: 94%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 45px;
		position: relative;
		padding: 40px 20px 20px;
	}
	.page-campaign .overview .note-box {
		width: 94%;
	}
	.page-campaign .overview .note-box h3 {
    	font-size: 18px;
    	padding: 12px 0;
	}
	.page-campaign .overview .inner .note-box:first-of-type ul li .bold {
    	font-size: 20px;
	}
	.page-campaign .overview .note-box ul {
		padding: 30px 15px;
		text-align: center;
		font-size: 14px;
	}
	.page-campaign .overview .inner .note-box:last-of-type ul li .bold {
    	font-size: 18px;
	}
	.contact-wire {
    height: auto;
	}
	.contact-wire div h4 {
        font-size: 28px;
        text-align: center;
        margin-left: 0;
    }
	.contact-wire div p {
        text-align: center;
        margin-left: 0;
    }
	.contact-wire div ul {
    display: block;
    position: static;
    margin-top: 10%;
	}
	.contact-wire div ul li {
    width: 100%;
		margin-bottom: 20px;
    }
	.contact-wire div ul li:last-of-type {
		margin-bottom: 0;
	}
  .contact-wire .contact-catch {
    left: 0%;
}
	.contact {
        padding: 80px 3% 120px;
    }
	.contact .inner {
        padding: 50px 5% !important;
	}
	.page-campaign .inner {
        padding: 50px 3%;
    }
	.achievement {
	  width: 1400px;
	}
	.achievement .scroll-content img {
	  width: 1400px;
	}
	.contact .contactBox li>h4::before {
	  padding: 4px 6px;
	  font-size: 12px;
	}
  .contact .contactBox li {
    display: block;
  }
  .contact .contactBox li>h4 {
    width: 100%;
  }
  .contact .contactBox p {
    width: 100%;
  }
}
@media (max-width: 580px) {
	.bg-bottom-img {
			bottom: 0px;
		}
	.page-campaign .campaign-fv .inner {
        height: 480px;
    }
	.page-campaign .campaign-fv .campaign-catch {
        top: 95px;
        left: 10px;
        width: 350px;
        z-index: 99999 !important;
    }
	.page-campaign .campaign-fv .campaign-ch {
        right: -180px;
        bottom: 0;
        width: 400px;
        z-index: 1;
    }
	br2.sp {
  		display: block;
	}
  .page-campaign .okomari .okomari-top {
    top: -28px;
  }
  .page-campaign .onayamikaiketsu .inner .kaiketsu-catch {
    margin-top: 0px;
    margin-bottom: -30px;
    width: 100%;
  }
  .page-campaign h2.fade-line::after {
    top: 60px;
  }
  .page-campaign .website-production .inner .website-production-catch img,
  .page-campaign .onayamikaiketsu .inner .kaiketsu-catch, .page-campaign .website-production .inner .website-production-catch {
    width: 100%;
  }
  .price-header div,
  .price-row div {
    width: 100% !important;
  }
  .price-total {
    margin-right: 0;
    padding: 0px;
  }
  .price-header div, .price-row div {
    height: 80px;
    position: relative;
    padding: 10px;
    font-size: 14px;
  }
  .price-row span.number {
    position: absolute;
    top: 5px;
    left: -10px;
    line-height: 25px;
    width: 25px;
    height: 25px;
    border-radius: 25px;
  }
  .price-header div:last-child, .price-row > div:last-child {
    padding-left: 10px;
  }
  .price-total img {
    margin: 0px;
    padding: 10px;
    margin: 50px 0;
  }
  .campaign-note {
    margin: 0;
    border-radius: 0 0 9px 9px;
  }
  .website-production em {
    font-size: 12px;
  }
  .campaign-service {
    padding: 20px;
    width: 100%;
    margin: 50px 0 0 0;
  }
  .campaign-service div.basic-service p, .campaign-service div.maintenance-service p {
    width: 60%;
    padding: 0 20px;
  }
  .campaign-service div.basic-service ul li, .campaign-service div.maintenance-service ul li {
    width: 100%;
    font-size: 15px;
    padding: 10px;
  }
  .campaign-service div.basic-service, .campaign-service div.maintenance-service {
    margin-top: 30px;
  }
  .campaign-service ul {
    margin-top: 10px;
  }
  .campaign-service div.add-on-options {
    padding: 20px;
  }
  .campaign-service div.add-on-options p {
    margin: 0px;
    margin-top: 20px;
    font-size: 14px;
    text-align: left;
  }
  .campaign-service div.add-on-options ul li {
    font-size: 14px;
    text-align: left;
  }
  .campaign-service div.add-on-options ul {
    margin-top: 20px;
  }
  .page-campaign .overview .left {
    display: block;
  }
  .page-campaign .overview .right {
    display: block;
    width: 100%;
    margin-left: 0%;
    margin-top: 5%;
  }
  .page-campaign .overview .right p {
    
  }
  .page-campaign .overview {
    padding-bottom: 0px !important;
  }
  .page-campaign .qa {
    padding-bottom: 200px;
  }
  .page-campaign section.usage-flow li {
    width: calc(25% - 10px) !important;
  }
  .usage-flow div.step {
    height: 300px;
    margin-top: 30%;
    padding: 10px;
  }
  .page-campaign .icon-placeholder img {
    width: 60%;
		max-height: 150px;
  }
  .contact-wire .contact-ch {
    position: absolute;
    bottom: 100%;
    left: 0%;
    z-index: 0;
  }
}
@media (max-width: 420px) {
    .page-campaign .campaign-fv .inner {
        height: 460px;
    }
	.page-campaign .campaign-fv .campaign-catch {
        top: 95px;
        left: 10px;
        width: 350px;
        z-index: 2;
    }
	.page-campaign .campaign-fv .campaign-ch {
        right: -180px;
        bottom: 0;
        width: 400px;
        z-index: 1;
    }
  .page-campaign .okomari .okomari-top {
    top: -28px;
  }
	.page-campaign .overview .overview-cnt li {
		width: 98%;
		padding: 40px 15px 20px;
	}
}