@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique&display=swap');
/* CSS Document */
html{
	scroll-behavior: smooth;
}
body {
	position: relative;
	font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","Zen Kaku Gothic Antique",sans-serif;
	color: #000;
	background: url(img/penki.webp) top left no-repeat;
	background-size: 380px;
}
body.home{
	background: none;
}
.home::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 380px;
	height: 372px;
	background: url(img/penki.webp) top left / contain no-repeat;
	z-index: 10;
}
a{
	transition: all 0.3s ease;
}
.pc{
	display: block;
}
.sp,
.br-sp{
	display:none;
}
.fc-pink{
	color: #e50947;
}
.fc-red{
	color: #e60012;
}
.fc-yellow{
	color: #ffff00;
}
.fb{
	font-weight: 700;
}
.marker-pink{
	background: linear-gradient(transparent 65%, #ff00ff 65%);
}
.marker-yellow{
	background: linear-gradient(transparent 65%, #ffff00 65%);
}
.marker-yellow02{
	background: linear-gradient(transparent 65%, #f2ed56 65%);
}
:where(.c-entry__content>:not(.alignleft):not(.alignright):not(.alignfull)){
	max-width: none;
}
.c-container{
	padding-right: .75rem;
	padding-left: .75rem;
}
.home .c-container{
	padding: 0;
}
.home header .c-container,
.home .c-container .c-container,
.home footer .c-container{
	padding: 0 1rem;
}
.p-entry-content>:where(:not(:first-child)){
	margin-top: 0;
}
.container{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}
.btn-normal{
	display: block;
	text-decoration: none;
	text-align: center;
	color: #000;
	background-color: #fff;
	border: solid 1px #000;
	border-radius: 4rem;
	margin: 0 auto;
	padding: .75rem;
}
.btn-normal:hover{
	background-color: #e74076;
}
.wp-block-buttons.btn01 .wp-block-button__link{
	width: 16rem;
	font-size: 1.125rem;
	font-weight: 700;
}
.wp-block-buttons.btn01 .wp-block-button__link:hover{
	background-color: #e74076;
}
.arrow01{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem;
	width: 19rem;
}
.arrow01::after{
	content: "";
	display: inline-block;
	height: 20px;
	width: 18px;
	background: #ff0000;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@media (min-width: 1024px) {
	[data-scrolled=false] .l-header--sticky-overlay-colored-lg{
		color: #000;
	}
}
@media (max-width: 1360px) {
	.home::before{
		width: 325px;
		height: 318px;
	}
}
@media (max-width: 767px) {
	.pc,
	.br-pc{
		display:none;
	}
	.sp,
	.br-sp{
		display:block;
	}
}
.l-contents{
	padding-top: 68px;
}
@media (max-width: 1023px) {
	.l-contents{
		padding-top: 0;
	}
	.home::before{
		content: none;
	}
}
/* =======================================
    animation
======================================= */
/* 共通：初期状態は透明 */
.anim-box {
  opacity: 0;
}

/* 上から下へスライドイン */
.anim-slide-down {
  transform: translateY(-40px);
  transition:
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.anim-slide-down.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* 右から左へスライドイン */
.anim-box.anim-slide-right {
  transform: translateX(60px); /* もっとズラしたければ 120px などに */
  display: inline-block;       /* span でも動きが分かるように */
  transition:
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.anim-box.anim-slide-right.is-animated {
  opacity: 1;
  transform: translateX(0) !important;
}

/* その場でふわっとフェードイン（少しだけ下から） */
.anim-fade {
  transform: translateY(20px);
  transition:
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.anim-fade.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* smooth：文字がなめらかに表示される */
.anim-box.smooth {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition:
    clip-path 1.4s cubic-bezier(0.37, 0, 0.63, 1),
    opacity 1.4s cubic-bezier(0.37, 0, 0.63, 1);
}

.anim-box.smooth.is-animated {
  clip-path: inset(0);
  opacity: 1;
}

/* ▼ 遅延ユーティリティ（.js-io + delay-x + .is-animated で効く） */
.js-io.delay-0.is-animated {
  transition-delay: 0s;
  animation-delay: 0s;
}

.js-io.delay-1.is-animated {
  transition-delay: 0.3s;
  animation-delay: 0.3s;
}

.js-io.delay-2.is-animated {
  transition-delay: 0.6s;
  animation-delay: 0.6s;
}

.js-io.delay-3.is-animated {
  transition-delay: 0.9s;
  animation-delay: 0.9s;
}
.js-io.delay-4.is-animated {
  transition-delay: 1.2s;
  animation-delay: 1.2s;
}
.js-io.delay-5.is-animated {
  transition-delay: 1.5s;
  animation-delay: 1.5s;
}

/* =======================================
    header
======================================= */
@media (min-width: 64em) {
	.c-site-branding__title .custom-logo{
		width: 270px;
	}
}
/* =======================================
    swiper
======================================= */
/* ========== post-slider 専用の安定化パッチ ========== */
#post-slider { width: 100%; overflow: visible; }

/* テーマの上書き対策：Swiperの基本挙動を保証 */
#post-slider .swiper-wrapper { display: flex; }
#post-slider .swiper-slide { flex-shrink: 0; height: auto !important; transition: transform .6s; }

/* 16:9 ラッパー。動画/画像どちらでもOK */
#post-slider .video-16x9 { position: relative; width: 100%; padding-top: 56.25%; overflow: visible; }
/* 動画本体にだけイベントを通す */
#post-slider .video-16x9,
#post-slider .video-16x9 iframe { pointer-events: auto; }
/* 念のため：以前の「iframeを無効化する」ルールがあれば上書き */
#post-slider .swiper-slide iframe { pointer-events: auto !important; }
#post-slider .video-16x9 iframe,
#post-slider .video-16x9 img { position: absolute; inset: 0; width: 100%; height: 100%; border: 4px solid #000; border-radius: 15px; object-fit: cover;
	background-color: #000;
}

/* 既存の .swiper img の「正方形(4/4)固定」を、このスライダーでは無効化 */
#post-slider img { aspect-ratio: auto; }  /* もしくは消してOK */

/* スライド内レイアウト */
#post-slider .slide-link { display: block; max-width: 500px; margin: 0 auto; color: inherit; text-decoration: none; height: 100%; }
#post-slider .slide-inner { margin-right: 1rem; }
#post-slider .slide-inner:last-child { margin-right: 0; }
#post-slider .slide-meta { padding: .75rem 1rem; }
#post-slider .slide-title { font-size: 1rem; }

/* ページネーションの位置・余白 */
#post-slider { padding-bottom: 60px !important; margin-bottom: 2rem; }
#post-slider .swiper-pagination { position: relative; margin-top: 8px; }
#post-slider .swiper-horizontal>.swiper-pagination-bullets,
#post-slider .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 0 !important; margin-bottom: -.5rem; }

/* SPでのタップ妨害を避ける（保険。JSでも制御可能） */
#post-slider .swiper-slide iframe { pointer-events: none; }
#post-slider .swiper-slide-active iframe { pointer-events: auto; }

/* 既存の no-image も16:9 で整えるなら： */
#post-slider .video-placeholder { aspect-ratio: 16/9; background: #dfdfdf; border: 4px solid #000; border-radius: 20px; display:flex; align-items:center; justify-content:center; color:#666; }
/* スライドラッパーは何も奪わない */
#post-slider .slide-link { pointer-events: none; }
#post-slider .swiper-pagination-bullet{
	width: 20px;
	height: 20px;
}

/* =======================================
    index
======================================= */
/* mainview */
.p-section-front-page-content{
	padding-top: 0;
}
.main-top{
	background-color: #f2f2f2;
	background-image: url(img/bg-mainview.webp);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: 620px;
}
.mainview{
	position: relative;
	max-width: 1232px;
	margin: 0 auto;
	z-index: 1;
}
.main-text{
	padding: 7rem 0 4rem 7rem;
}
.main-text h1{
	font-size: 3rem;
	line-height: 1.4;
	margin-bottom: 2rem;
}
.main-text h1 span{
	display: block;
	font-size: 1.375rem;
	font-weight: normal;
	margin-bottom: .5rem;
}
.btn-mainview{
	font-size: 1.25rem;
	color: #000;
	text-decoration: none;
	background-color: #fff;
	border-radius: 3rem;
	margin-top: 2rem;
	padding: 1rem;
}
.mainview img{
	position: absolute;
	bottom: 1rem;
	right: 4rem;
	width: 38%;
}
.btn-mainview.sp{
	display: none;
}
@media (max-width: 1200px) {
	.main-text{
		padding-left: 4rem;
	}
}
@media (max-width: 960px) {
	.main-text{
		padding: 3rem 0 3rem 2rem;
	}
	.mainview img{
		right: 2rem;
	}
}
@media (max-width: 768px) {
	.main-text h1{
		font-size: 2rem;
		margin-bottom: 1rem;
	}
	.main-text h1 span{
		font-size: 1.25rem;
	}
	.btn-mainview.pc{
		display: none;
	}
	.mainview img{
		right: 1rem;
	}
	.btn-mainview.sp{
		display: flex;
		border: solid 4px #000;
	}
}
@media (max-width: 640px) {
	.mainview{
		padding-bottom: 1rem;
	}
	.main-text{
		padding: 2rem 1rem 0;
	}
	.btn-mainview{
		margin: 1rem auto;
	}
	.mainview img{
		position: inherit;
		right: inherit;
		bottom: inherit;
		display: block;
		width: 90%;
		max-width: 360px;
		margin: 0 auto;
	}
}
@media (max-width: 480px) {
	.main-text h1{
		font-size: 1.625rem;
	}
}
/*実績に裏打ちされた、SNS運用のプロフェッショナル。*/
.wrap-reason{
	background: url(img/penki02.webp) left top no-repeat;
	background-size: 800px;
	padding-bottom: 3rem;
}
.reason{
	position: relative;
	padding: 6rem 0 6rem;
}
.reason01{
	position: absolute;
	top: 3rem;
	left: 4rem;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 2.4;
	writing-mode: vertical-rl;
	background-color: #fff;
}
.reason-text{
	width: 55%;
	margin-left: auto;
}
.reason h1{
	font-size: 3rem;
	line-height: 1.4;
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
	margin-bottom: 1.5rem;
}
.reason h1 span{
	display: block;
}
.reason-text p{
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.reason-box{
	display: flex;
	justify-content: space-between;
	gap: 2%;
	max-width: 960px;
	margin: 0 auto;
}
.reason-box p{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 32%;
	max-width: 280px;
	line-height: 1.5;
	text-align: center;
	background-color: #fff;
	border: solid 5px #000;
	border-radius: 20px;
	padding: 2rem 0;
}
.reason02{
	font-size: 1.25rem;
}
.reason02 .fb{
	font-size: 1.75rem;
}
.reason02 .fc-pink{
	font-size: 2rem;
}
.reason03{
	font-size: 1.5rem;
}
.reason03 .fc-pink{
	font-size: 2.25rem;
}
.reason04{
	font-size: 1.75rem;
}
.reason04 .fc-pink{
	font-size: 2.375rem;
}
@media (max-width: 960px) {
	.reason-text{
		width: 70%;
	}
	.reason02{
		font-size: 1.125rem;
	}
	.reason02 .fb{
		font-size: 1.5rem;
	}
	.reason02 .fc-pink{
		font-size: 1.875rem;
	}
	.reason03{
		font-size: 1.25rem;
	}
	.reason03 .fc-pink{
		font-size: 2rem;
	}
	.reason04{
		font-size: 1.5rem;
	}
	.reason04 .fc-pink{
		font-size: 2rem;
	}
}
@media (max-width: 768px) {
	.reason{
		padding-bottom: 4rem;
	}
	.reason01{
		position: inherit;
		top: inherit;
		left: inherit;
		width: 24rem;
		font-size: 1.5rem;
		text-align: center;
		writing-mode: horizontal-tb;
		margin: 0 auto 1rem;
	}
	.reason-text{
		width: 100%;
		background-color: rgba(255, 255, 255, .7);
		padding: 2rem;
	}
	.reason h1{
		font-size: 2.5rem;
		text-shadow: none;
	}
	.reason-text p{
		text-shadow: none;
	}
	.reason-box p{
		border-width: 4px;
		padding: 1rem 0;
	}
	.reason02{
		font-size: 1rem;
	}
	.reason02 .fb{
		display: block;
		font-size: 1.25rem;
	}
	.reason02 .fc-pink{
		font-size: 1.5rem;
	}
	.reason03{
		font-size: 1.125rem;
	}
	.reason03 .fc-pink{
		font-size: 1.625rem;
	}
	.reason04{
		font-size: 1.25rem;
	}
	.reason04 .fc-pink{
		font-size: 1.75rem;
	}
}
@media (max-width: 640px) {
	.reason{
		padding: 3rem 0 2rem;
	}
	.reason h1{
		font-size: 1.625rem;
		margin-right: -1rem;
	}
	.reason-box{
		flex-direction: column;
		gap: 1rem;
	}
	.reason-box p{
		display: block;
		width: 100%;
		max-width: none;
		border-radius: 10px;
		padding: 1rem .5rem;
	}
	.reason03,
	.reason04{
		font-size: 1rem;
	}
	.reason03 .fc-pink,
	.reason04 .fc-pink{
		font-size: 1.5rem;
	}
	.reason04 .fc-pink br{
		display: none;
	}
}
@media (max-width: 480px) {
	.reason01{
		font-size: 1.25rem;
		width: 20rem;
	}
	.reason-text{
		padding: 1.5rem;
	}
}
/*inde service*/
.wrap-index-service{
	position: relative;
	background-color: #009fc9;
	padding: 5rem 0;
	overflow: hidden;
}
.wrap-index-service::before{
	content: "";
	position: absolute;
	top: -15px;
	right: 50%;
	display: block;
	width: 700px;
	height: 578px;
	background: url(img/penki03.webp) right top / contain no-repeat;
	margin-right: 320px;
	z-index: 1;
}
.wrap-index-service *{
	position: relative;
	z-index: 10;
}
.index-service{
	display: flex;
	gap: 3rem;
}
.ind-ser-title h1{
	font-size: 3rem;
	margin-bottom: 2rem;
}
.index-service .btn-normal{
	max-width: 12rem;
}
.ind-ser-title{
	padding-top: 3rem;
}
.ind-ser-title p{
	font-size: 1.75rem;
	font-weight: 700;
	writing-mode: vertical-rl;
	margin: 2rem auto 0;
}
.ind-ser-box{
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.ind-ser-box a{
	position: relative;
	display: block;
	width: 48%;
	text-decoration: none;
	color: #000;
	background-color: #fff;
	border: solid 6px #000;
	border-radius: 16px;
	padding: 16px 24px 80px 24px;
}
.ind-ser-box a::before,
.ind-ser-box a::after{
	content: "";
	position: absolute;
}
.ind-ser-box a::before{
	bottom: 16px;
	right: 24px;
	display: block;
	width: 60px;
	height: 60px;
	background-color: #808080;
	border-radius: 50%;
}
.ind-ser-box a:hover::before{
	background-color: #e50947;
}
.ind-ser-box a::after{
	bottom: 36px;
	right: 36px;
	display: block;
	width: 18px;
	height: 18px;
	margin: 0 10px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	transform: rotate(45deg);
}
.ind-ser-box img{
	display: block;
	width: 100%;
	margin-bottom: .75rem;
}
.ind-ser-box h2{
	font-size: 1.625rem;
	margin-bottom: 1rem;
}
.ind-ser-box .marker-pink span{
	font-size: 1.25rem;
}
.btn-normal.sp560{
	display: none;
}
@media (max-width: 1200px) {
	.wrap-index-service::before{
		right: inherit;
		left: -390px;
		margin-right: 0;
	}
	.ind-ser-box a{
		padding: 16px 16px 80px 16px;
	}
	.ind-ser-box a::before{
		width: 50px;
		height: 50px;
	}
	.ind-ser-box a::after{
		bottom: 33px;
		right: 33px;
		width: 16px;
		height: 16px;
	}
}
@media (max-width: 960px) {
	.ind-ser-box a{
		width: 100%;
	}
}
@media (max-width: 768px) {
	.wrap-index-service{
		padding: 3rem 0;
	}
	.wrap-index-service::before{
		top: -50px;
	}
	.index-service{
		flex-direction: column;
		gap: 1.5rem;
		margin-bottom: 2rem;
	}
	.ind-ser-title{
		padding-top: 0;
	}
	.index-service01{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 1rem;
		margin-bottom: 1rem;
	}
	.ind-ser-title h1{
		flex: 1;
		font-size: 2.5rem;
		line-height: 1;
		margin-bottom: 0;
	}
	.index-service .btn-normal{
		width: 12rem;
		font-size: .875rem;
		padding: .25rem;
	}
	.ind-ser-title p{
		font-size: 1.5rem;
		text-align: center;
		writing-mode: horizontal-tb;
		margin-top: 0;
	}
	.ind-ser-box a{
		border-width: 4px;
	}
}
@media (max-width: 560px) {
	.ind-ser-title p span{
		display: block;
	}
}
@media (max-width: 480px) {
	.wrap-index-service::before{
		left: -420px;
	}
}
/* WHY? 高品質と低価格を両立できる理由*/
.wrap-why{
	background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f7f7f7 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f7f7f7 calc(100% - 1px));
	background-size: 12px 12px;
	background-repeat: repeat;
	background-position: center center;
	padding: 5rem 0 20rem;
}
.why{
	display: flex;
	justify-content: center;
	gap: 2rem;
}
.why-left{
	position: relative;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.why-left::before{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 180px;
	height: 100%;
	background-color: #f5e340;
	margin-left: -90px;
	z-index: 1;
}
.why-left *{
	position: relative;
	z-index: 10;
}
.why-left span{
	font-size: 4rem;
	font-weight: 700;
}
.why-left h1{
	font-size: 2rem;
	line-height: 1.4;
	text-align: center;
}
.why-right{
	counter-reset: number 0;
	padding: 2rem 0;
}
.why-right p{
	position: relative;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 2.5rem;
	padding-left: 7rem;
	padding-top: 1rem;
}
.why-right p:last-child{
	margin-bottom: 0;
}
.why-right p::before{
	counter-increment: number 1;      /* number カウンタの増加数をセット */
	content: counter(number) " ";      /* 表示形式を指定 */
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 6rem;
	height: 6rem;
	background: url(img/why.svg) center center / contain no-repeat;
}
.why-right br{
	display: none;
}
@media (max-width: 960px) {
	.why-right br{
		display: block;
	}
}
@media (max-width: 768px) {
	.wrap-why{
		padding: 2rem 0 19rem;
	}
	.why{
		flex-direction: column;
	}
	.why-left{
		width: 100%;
		max-width: 22rem;
		margin: 0 auto;
	}
	.why-left::before{
		top: 50%;
		width: 15rem;
		height: 7rem;
		margin-top: -3.5rem;
		margin-left: -7.5rem;
	}
	.why-left span{
		line-height: 1.4;
	}
	.why-right{
		display: flex;
		flex-direction: column;
		padding: 0;
	}
	.why-right p{
		font-size: 1.875rem;
		margin-bottom: 2rem;
		padding-top: 0;
		padding-left: 6rem;
	}
	.why-right p::before{
		width: 4.5rem;
		height: 4.5rem;
		font-size: 1.5rem;
	}
}
@media (max-width: 480px) {
	.why-left span{
		font-size: 3rem;
	}
}
/* index 制作事例*/
.index-works{
	margin-top: -19rem;
}
.index-works .c-container{
	max-width: none;
	padding: 0 !important;
}
.index-works .smb-section__header{
	position: relative;
}
.index-works .smb-section__header::before{
	content: "";
	position: absolute;
	top: 53px;
	left: 0;
	display: block;
	background: #e74076;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	height: 150%;
	width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-left: 100px;
	padding-right: 100px;
}
.index-works .smb-section__title{
	position: relative;
	display: inline-block;
	width: 300px;
	margin-bottom: 28px;
	padding: 24px 16px;
	border: 4px solid #000000;
	border-radius: 9999px;
	background-color: #ffffff;
	font-size: 2rem;
}
.index-works .smb-section__title::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	border-style: solid;
	border-width: 28px 16px 0 16px;
	border-color: #000000 transparent transparent;
	translate: -50% 100%;
}

.index-works .smb-section__title::after {
	content: "" !important;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: auto;
	height: auto;
	background: transparent;
	border-style: solid;
	border-width: 19.9px 11.4px 0 11.4px;
	border-color: #ffffff transparent transparent;
	translate: -50% 100%;
}
.index-works .smb-section__body{
	background-color: #e74076;
	padding-bottom: 5rem;
}
.check{
	position: relative;
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
}
.check::after{
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	display: block;
	width: 140px;
	height: 140px;
	background: url(img/check.webp) center center / contain no-repeat;
	margin-left: 170px;
	margin-bottom: 30px;
}
.index-works .wrap-slider{
	background-color: #e74076;
}
.index-works .wp-block-buttons.btn01 .wp-block-button__link:hover{
	background-color: #f5e340 !important;
}
@media (max-width: 768px) {
	.index-works .smb-section__header::before{
		top: 30px;
	}
	.index-works .smb-section__title{
		width: 305px;
		font-size: 1.5rem;
		padding: 14px 10px;
	}
	.check{
		font-size: 1.25rem;
		padding: 0 1rem;
	}
	.check::after{
		width: 100px;
		height: 100px;
		margin-left: 70px;
		margin-bottom: 10px;
	}
}
@media (max-width: 480px) {
	.index-works .smb-section__header::before{
		top: 20px;
	}
}
/*index news blog*/
.index-news-text{
	max-width: 30rem;
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background-color: #000;
	margin: 0 auto 4rem;
	padding: .25rem 0;
}
.index-news-left{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
}
.index-news-left::before{
	content: "";
	position: absolute;
	top: 0;
	right: 3rem;
	display: block;
	width: 420px;
	height: 100%;
	background: url(img/penki04.webp) center center / contain no-repeat;
	z-index: -1;
}
.index-news-left h2{
	font-size: 2.5rem;
	line-height: 1.4;
	text-align: center;
}
.index-news-left h2 span{
	display: block;
	padding-left: 4rem;
}
.index-news-left .btn-normal{
	width: 100%;
	max-width: 15rem;
}
.index-news .c-entries--simple .c-entries__item>a{
	padding: 1.5rem 0;
}
.index-news .c-entries--simple .c-entry-summary__figure{
	width: 30%;
	aspect-ratio: 5 / 3;
	border-radius: 10px;
}
.index-news .c-entry-summary__figure span{
	display: none;
}
.index-news .c-entries--simple,
.index-news .c-entries--simple .c-entries__item{
	border-color: #ccc;
}
.index-news .c-entry-summary__body{
	display: flex;
	flex-direction: column-reverse;
}
.index-news h3{
	font-size: 1.25rem;
}
.index-news .c-entry-summary__meta{
	margin-top: 0;
	margin-bottom: .75rem;
}
.index-news .c-entry-summary__meta .c-meta__item--categories{
	display: block;
}
.index-news .c-entry-summary__term{
	font-size: .75rem;
	color: #000;
	background: transparent;
	border: solid 1px #ccc;
	border-radius: 4rem;
	padding: .25rem .75rem;
}
@media (max-width: 784px) {
	.index-news.smb-box{
		padding-top: 0;
	}
	.index-news-text{
		font-size: 1.25rem;
	}
	.index-news-left::before{
		top: -90px;
		right: 50%;
		width: 340px;
		height: 320px;
		margin-right: -115px;
	}
	.index-news .c-entries--simple .c-entries__item>a{
		padding: 1rem 0;
	}
	.index-news h3{
		font-size: 1.125rem;
	}
}
@media (max-width: 640px) {
	.index-news .c-entries--simple .c-entry-summary__figure{
		aspect-ratio: 5 / 4;
		margin-right: 1rem;
	}
}
/* =======================================
    footer
======================================= */
.l-footer{
	color: #fff;
	background-color: #204160;
	background-image: url(img/bg-footer.webp);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 650px;
	border-top: none;
}
.l-footer--default .l-footer-widget-area{
	padding: 7rem 0 9rem;
}
.l-footer .c-row{
	align-items: center;
}
.footer-contact{
	text-align: center;
}
.footer-contact h2{
	font-size: 3rem;
	margin-bottom: 1rem;
}
.footer-contact p{
	line-height: 2;
}
.footer-btn a{
	font-size: 1.125rem;
	text-decoration: none;
	border-radius: 4rem;
	padding: 1.5rem;
}
.footer-btn .arrow01{
	width: 100%;
	max-width: 21rem;
}
.btn-download{
	color: #000;
	background-color: #fff;
	margin-bottom: 3rem;
}
.btn-download:hover{
	background-color: #fff3d9;
}
.btn-line{
	color: #fff;
	background-color: #39b54a;
}
.btn-line:hover{
	background-color: #42d055;
}
.c-copyright--inverse{
	background-color: #000;
}
@media (max-width: 1024px) {
	.l-footer--default .l-footer-widget-area{
		padding: 3rem 0;
	}
	.footer-btn a{
		margin: 0 auto 2rem;
	}
}
@media (max-width: 784px) {
	.l-footer{
		background-size: 530px;
	}
}
/* =======================================
    page common
======================================= */
.c-entry__title,
.p-breadcrumbs-wrapper{
	width: 1200px;
	font-size: 3rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (max-width: 784px) {
	.c-entry__title{
		font-size: 2rem;
	}
}
/* =======================================
    サービス一覧
======================================= */
.service01{
	position: relative;
	padding: 3rem 0 7rem;
}
.service01::after{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 570px;
	height: 740px;
	background: url(img/penki05.webp) right top / contain no-repeat;
	margin-left: 6rem;
	z-index: 10;
}
.service01 p{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
	z-index: 100;
}
.service{
	position: relative;
	padding-bottom: 4rem;
}
.service::before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: calc(100% - 270px);
	background-color: #009fc9;
	z-index: 1;
}
.service::after{
	content: "";
	position: absolute;
	bottom: 0;
	right: 50%;
	display: block;
	width: 600px;
	height: 600px;
	background: url(img/penki06.webp) center center / contain no-repeat;
	margin-right: 20rem;
	z-index: 10;
}
.service .ind-ser-box{
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1rem;
	z-index: 100;
}
@media (max-width: 1024px) {
	.service::after{
		right: inherit;
		left: -14rem;
		margin-right: 0;
	}
}
@media (max-width: 960px) {
	.service01::after{
		margin-left: 0;
	}
	.service .ind-ser-box a{
		width: 48%;
	}
}
@media (max-width: 784px) {
	.service .ind-ser-box a{
		width: 100%;
	}
	.service01{
		padding: 0 0 3rem;
	}
}
/* =======================================
    会社案内
======================================= */
.title-daihyo{
	font-size: 2.25rem;
	margin-bottom: 4rem;
}
.aisatu{
	position: relative;
	margin-bottom: 2rem;
}
.aisatu::before{
	content: "";
	position: absolute;
	bottom: 0;
	right: 53%;
	display: block;
	width: 900px;
	height: 432px;
	background: url(img/penki07.webp) center center / contain no-repeat;
	z-index: -1;
}
.aisatu section{
	display: flex;
	align-items: center;
	gap: 4rem;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1rem;
}
.aisatu img{
	width: 40%;
	box-shadow: -12px 12px #204160;
}
.aisatu-text{
	flex: 1;
}
.aisatu h3{
	font-size: 1.75rem;
	margin-bottom: 1rem;
}
.daihyo{
	font-size: 1.25rem;
	text-align: right;
	margin-top: 1rem;
}
.mission{
	max-width: 960px;
	text-align: center;
	margin: 0 auto;
	padding: 0 1rem;
}
.mission h3{
	font-size: 2rem;
	color: #e63d8f;
	margin-bottom: 1rem;
}
.mission.value01 h3{
	color: #f08800;
}
.mission h3 span{
	display: block;
	font-size: 1rem;
	color: #000;
}
.mission.value01 h3 span{
	color: #000;
}
.mission p{
	font-size: 1.25rem;
	font-weight: 700;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 4px 4px 5px 1px #3d3d3d;
	margin-bottom: 3rem;
	padding: 3rem 2rem;
}
.gaiyou{
	max-width: 960px;
	margin: 8rem auto;
	padding: 0 1rem;
}
.gaiyou h3{
	font-size: 3rem;
	text-align: center;
	margin-bottom: 2rem;
}
.gaiyou img{
	display: block;
	max-width: 120px;
	border-radius: 10px;
	margin: 0 auto 2rem;
}
.gaiyou dl{
	display: flex;
	gap: 1rem;
	border-top: solid 1px #110508;
	padding: 1rem 0;
}
.gaiyou dl:last-child{
	border-bottom: solid 1px #110508;
}
.gaiyou dt{
	width: 12rem;
	text-align: center;
}
.gaiyou dd{
	flex: 1;
}
@media (max-width: 784px) {
	.title-daihyo{
		font-size: 2rem;
		margin-bottom: 1rem;
	}
	.aisatu{
		margin-bottom: 3rem;
	}
	.aisatu::before{
		right: 0;
		bottom: inherit;
		top: -70px;
	}
	.aisatu section{
		flex-direction: column;
		gap: 1rem;
	}
	.aisatu h3{
		font-size: 1.5rem;
		line-height: 1.4;
	}
	.aisatu img{
		width: 100%;
	}
	.daihyo{
		font-size: 1.125rem;
	}
	.mission p{
		font-size: 1.125rem;
		padding: 1.5rem .75rem;
	}
	.gaiyou{
		margin: 4rem 0;
	}
	.gaiyou h3{
		font-size: 2rem;
	}
	.gaiyou dl{
		flex-direction: column;
		gap: 0;
		padding: .5rem 0;
	}
	.gaiyou dt{
		width: 100%;
		text-align: left;
	}
}
/*沿革*/
.history{
	padding-bottom: 6rem;
}
.history h3{
	font-size: 3rem;
	margin-bottom: 2rem;
}
.history .c-row>.c-row__col{
	margin-bottom: 0;
}
.history .smb-testimonial__item__figure{
	display: none;
}
.history .smb-testimonial__item__body{
	position: relative;
	padding-left: 200px;
	padding-bottom: 30px;
}
.history .smb-testimonial__item__body::before{
	content: "";
	position: absolute;
	top: 0;
	left: 170px;
	display: block;
	width: 3px;
	height: 100%;
	background-color: #e5e5d1;
}
.history .smb-testimonial__item__body::after{
	content: "";
	position: absolute;
	left: 165px;
	top: 12px;
	width: 12px;
	height: 12px;
	background: #e63d8f;
	border-radius: 50%;
}
.history .smb-testimonial__item__content{
	position: absolute;
	top: 5px;
	left: 0;
}
.history .smb-testimonial__item__content:after{
	content: none;
}
.history .smb-testimonial__item__name{
	font-size: 1.25rem;
	font-weight: 700;
}
.history .smb-testimonial__item__lede{
	font-size: 1rem;
}
@media (max-width: 784px) {
	.history h3{
		font-size: 2rem;
	}
}
@media (max-width: 640px) {
	.history .smb-testimonial__item__body{
		padding-left: 145px;
	}
	.history .smb-testimonial__item__body::before{
		left: 124px;
	}
	.history .smb-testimonial__item__body::after{
		top: 9px;
		left: 119px;
	}
	.history .smb-testimonial__item__content{
		top: 2px;
	}
	.history .smb-testimonial__item__name{
		font-size: 1rem;
	}
	.history .smb-testimonial__item__lede{
		font-size: .875rem;
	}
}
/* =======================================
    お問合せ
======================================= */
.post-120{
	position: relative;
	padding-bottom: 6rem;
}
.post-120::before{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 800px;
	height: 808px;
	background: url(img/penki08.webp) center center / contain no-repeat;
	z-index: -1;
}
.snow-monkey-form{
	background-color: #fff;
	box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, .3);
	border-radius: 10px;
	padding: 1rem 3rem;
}
.snow-monkey-form[data-screen="confirm"] .smf-item{
	border-bottom: solid 1px #eee;
}
.smf-item__col--label{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
}
.smf-item__description{
	font-size: .75rem;
	font-weight: 700;
	color: #fff;
	background-color: #e50947;
	border-radius: 4rem;
	margin-top: 0;
	padding: 0 .5rem;
}
.smf-form .smf-text-control__control,
.smf-form .smf-checkbox-control__control,
.smf-form .smf-textarea-control__control{
	background: #e6e6e6;
	border: none;
	box-shadow: none;
}
.smf-form .smf-text-control__control{
	width: 100%;
}
.smf-action{
	display: flex;
	justify-content:center;
	align-items: center;
	gap: 2rem;
	flex-direction: column-reverse;
}
.smf-button-control{
	width: 100%;
	max-width: 18rem;
}
.smf-action .smf-button-control__control{
	width: 100%;
	font-size: 1.25rem;
	color: #fff;
	border: none;
	background: #c70080;
	border-radius: 10rem;
	padding: .75rem;
	transition: all 0.3s ease;
}
.smf-action .smf-button-control+.smf-button-control{
	margin-left: 0;
}
.smf-action .smf-button-control__control:hover{
	background: #e74076;
}
.smf-action .smf-button-control__control[data-action="back"]{
	background: #aaa;
}
.smf-action .smf-button-control__control[data-action="back"]:hover{
	background: #999;
}
.thanks-text p{
	text-align: center;
	margin-bottom: 2rem;
}
.thanks-text .btn-normal{
	max-width: 20rem;
}
@media (max-width: 640px) {
	.snow-monkey-form{
		padding: 1rem;
	}
	.smf-form--simple-table .smf-item{
		padding: .5rem 0;
	}
	.smf-form--simple-table .smf-item__col--label{
		font-weight: 700;
		padding-bottom: 0;
	}
	.smf-action .smf-button-control__control{
		font-size: 1rem;
	}
}
/* =======================================
    記事一覧　共通
======================================= */
.blog .c-entry,
.post-type-archive-influencer .c-entry,
.tax-inf_cate .c-entry{
	max-width: 1200px;
}
.nav-terms {
    display: flex;
	justify-content: center;
    gap: .5rem;
	margin: 1.5rem auto;
    padding: 0;
    list-style: none;
}
.nav-terms__item a {
	font-size: .875rem;
	text-decoration: none;
	color: #000;
	border: 1px solid #000;
	border-radius: 10px;
	padding: 5px 10px;
}
.nav-terms__item.is-current a {
	color: #e50947;
	background: #ffedf2;
	border-color: #e50947;
}
/* =======================================
    詳細ページ　共通
======================================= */
.single .c-entry__body{
	max-width: 736px;
}
.single .c-meta__item--author{
	display: none;
}
.c-prev-next-nav__item>a{
	color: #000;
	background: transparent;
	padding: 0;
}
.c-prev-next-nav__item>a:hover{
	text-decoration: underline;
}
.c-prev-next-nav__item-figure{
	display: none;
}
/* =======================================
    制作実績一覧
======================================= */
.video-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.video-card { grid-column: span 12; }
@media (min-width: 640px) { .video-card { grid-column: span 6; } }
@media (min-width: 1024px) { .video-card { grid-column: span 4; } }

.video-16x9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}
.video-16x9 iframe,
.video-16x9 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.video-card__title {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0.75rem;
  font-weight: 600;
}
.video-placeholder {
  aspect-ratio: 16/9;
  background: #f2f2f2;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#888;
  font-size: 0.9rem;
}
.c-pagination__item-ellipsis,
.c-pagination__item-link{
	background-color: transparent;
	border: solid 1px #000;
}
.video-card__categories{
	list-style: none;
	margin: .25rem 0 0;
	padding: 0;
}
.video-card__categories li{
	display: inline-block;
	font-size: .75rem;
	vertical-align: middle;
	color: #333;
	border: solid 1px #666;
	border-radius: 6px;
	margin-right: .25rem;
	padding: 2px 6px;
}
.video-card__categories li:last-child{
	margin-right: 0;
}
/* =======================================
    インフルエンサー一覧
======================================= */
.influencer-card{
	height: 100%;
	background-color: #dce6e6;
	border-radius: 1rem;
	padding: 1rem 1.5rem;
}
.influencer-card > a{
	color: #000;
	text-decoration: none;
}
.influencer-card .thumb{
	margin-bottom: .5rem;
}
.influencer-card h2{
	font-size: 1.25rem;
}
.influencer-card .catchcopy{
	font-size: .875rem;
}
.entry-sns-buttons{
	margin-top: 1rem;
}
.entry-sns-buttons a{
	display: block;
	max-width: 14rem;
	font-size: .875rem;
	text-align: center;
	text-decoration: none;
	border-radius: 6px;
	margin: 0 auto .75rem;
	padding: 1px;
}
.btn-youtube{
	color: #fff;
	background-color: #ff0000;
}
.btn-instagram{
	color: #fff;
	background-color: #ff0069;
	padding: 5px !important;
}
.btn-tiktok{
	color: #fff;
	background-color: #000;
}
.btn-x{
	color: #000;
	background-color: #fff;
	border: solid 1px #000;
	padding: 4px !important;
}
.entry-sns-buttons img{
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	margin-right: 15px;
}
.entry-sns-buttons .btn-instagram img{
	width: 22px;
}
.entry-sns-buttons .btn-x img{
	width: 16px;
}
@media (max-width: 784px) {
	.influencer-card h2{
		font-size: 1rem;
	}
}
@media (max-width: 640px) {
	.influencer-card{
		padding: 1rem;
	}
}
@media (max-width: 480px) {
	.post-type-archive-influencer .c-entries{
		--entries--item-width: 100%;
	}
}
/* =======================================
    インフルエンサー詳細
======================================= */
.inf-grid{
	display: flex;
	align-items: flex-start;
	gap: 3rem;
}
/* 左：アイキャッチ（4:3で統一） */
.inf-thumb {
  width: 100%;
  display: block;
}

/* アイキャッチが無い場合のグレー枠 */
.inf-thumb--placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;     /* ← ここも同じに */
  background: #e5e5e5;
}
.inf-col--media{
	width: 49%;
}
.inf-col--meta{
	flex: 1;
}
.inf-title{
	font-size: 1.5rem;
}
.inf-catchcopy{
	margin-bottom: 1rem;
}
.inf-content{
	margin-bottom: 2rem;
}
@media (max-width: 784px) {
	.inf-grid{
		flex-direction: column;
		gap: 1rem;
	}
	.inf-col--media,
	.inf-col--meta{
		width: 100%;
	}
}
/* =======================================
    SNS運用代行
======================================= */
.wrap-page-mainview{
	background-color: #efefef;
}
.page-mainview{
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	padding: 3rem 1rem;
}
.page-mainview h1{
	font-size: 4rem;
}
.main-text01{
	margin-bottom: 3rem;
}
.main-sns-img{
	position: absolute;
	bottom: 0;
	right: -60px;
	display: block;
	width: 77%;
	z-index: 1;
}
.main-text02{
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 1rem;
}
.main-text02 .fc-red{
	font-size: 2rem;
	margin-bottom: 1rem;
}
.page-mainview .btn-normal{
	position: absolute;
	bottom: 3rem;
	right: 1rem;
	width: 40%;
	max-width: 20rem;
	z-index: 10;
}
.sns-obi{
	font-size: 2.5rem;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background-color: #a72227;
	padding: 1rem;
}
.sns-obi br{
	display: none;
}
@media (max-width: 960px) {
	.main-text03 span{
		position: relative;
		background-color: #fff;
		padding: 0 8px;
		z-index: 10;
	}
	.sns-obi{
		font-size: 2rem;
	}
}
@media (max-width: 784px) {
	.page-mainview{
		padding-top: 1rem;
	}
	.page-mainview h1{
		font-size: 3rem;
	}
	.main-text01{
		margin-bottom: 2rem;
	}
	.sns-obi{
		font-size: 1.75rem;
	}
}
@media (max-width: 640px) {
	.page-mainview{
		text-align: center;
		padding-bottom: 2rem;
	}
	.main-text01{
		position: relative;
		display: inline-block;
		background-color: rgba(255, 255, 255, .8);
		margin-bottom: 0;
		padding: 0 6px;
		z-index: 10;
	}
	.main-sns-img{
		position: inherit;
		right: inherit;
		bottom: inherit;
		width: 100%;
		margin-top: -4rem;
	}
	.main-text02{
		background-color: #fff;
		padding: 1rem;
	}
	.main-text03 span{
		background-color: transparent;
		padding: 0;
	}
	.page-mainview .btn-normal{
		position: inherit;
		bottom: inherit;
		right: inherit;
		width: 100%;
		margin-top: 1rem;
	}
	.sns-obi{
		line-height: 1.5;
	}
	.sns-obi br{
		display: block;
	}
}
/*SNS運用代行お悩み*/
.onayami{
	max-width: 960px;
	margin: 0 auto;
	padding: 4rem 1rem;
}
.onayami h2{
	max-width: 44rem;
	font-size: 3rem;
	text-align: center;
	color: #ffff00;
	background-color: #000;
	margin: 0 auto 2rem;
}
.onayami ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	list-style: none;
	border: solid 4px #000;
	border-radius: 30px;
	margin: 0 auto;
	padding: 2rem 2rem 0;
}
.onayami li{
	position: relative;
	width: 49%;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 2rem;
	padding-left: 3.5rem;
}
.onayami li::before{
	content: "";
	position: absolute;
	top: .25rem;
	left: 0;
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	background: url(img/icon-check.svg) center center / contain no-repeat;
}
.kaiketu h2{
	font-size: 3rem;
	text-align: center;
	color: #ed1e79;
	margin-bottom: 3rem;
}
.sns-toha{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	max-width: 1024px;
	margin: 0 auto 3rem;
	padding: 0 1rem;
}
.sns-toha-text{
	flex: 1;
	max-width: 26rem;
}
.sns-toha h3{
	font-size: 2.5rem;
	margin-bottom: 1rem;
}
.sns-toha img{
	width: 45%;
}
.unyou{
	text-align: center;
	background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f7f7f7 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f7f7f7 calc(100% - 1px));
	background-size: 12px 12px;
	background-repeat: repeat;
	background-position: center center;
	padding: 4rem 1rem;
}
.unyou h3{
	font-size: 2.5rem;
	margin-bottom: 3rem;
}
.unyou ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 1200px;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
.unyou li{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: .5rem;
	width: 32%;
	height: 12.5rem;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: #e50947;
	background-color: #fff;
	border: solid 6px #000;
	border-radius: 20px;
	margin-bottom: 1.5rem;
	padding: 0;
}
.unyou li span{
	font-size: 1rem;
	font-weight: normal;
	color: #000;
}
.unyou li span.sns-kome{
	font-size: .75rem;
}
@media (max-width: 1200px) {
	.unyou li{
		font-size: 2rem;
	}
	.unyou li:last-child{
		font-size: 1.75rem;
	}
}
@media (max-width: 960px) {
	.onayami ul{
		padding: 1.5rem 1.5rem 0;
	}
	.onayami li{
		font-size: 1.75rem;
		padding-left: 2.5rem;
		margin-bottom: 1.5rem;
	}
	.onayami li::before{
		width: 2rem;
		height: 2rem;
	}
	.sns-toha h3{
		font-size: 2.25rem;
	}
	.unyou li{
		height: 10rem;
		font-size: 1.75rem;
		border-width: 4px;
	}
	.unyou li:last-child{
		font-size: 1.375rem;
	}
}
@media (max-width: 784px) {
	.onayami{
		padding: 3rem 1rem;
	}
	.onayami h2{
		width: 100%;
		font-size: 2rem;
		padding: .25rem;
	}
	.onayami ul{
		justify-content: center;
	}
	.onayami li{
		width: 100%;
		max-width: 21rem;
	}
	.kaiketu h2{
		font-size: 2rem;
		margin-bottom: 1rem;
	}
	.sns-toha{
		flex-direction: column-reverse;
		gap: 1rem;
		margin-bottom: 2rem;
	}
	.sns-toha-text{
		max-width: none;
	}
	.sns-toha h3{
		font-size: 1.75rem;
		margin-bottom: .5rem;
	}
	.sns-toha img{
		width: 100%;
	}
	.unyou{
		padding: 2rem 1rem;
	}
	.unyou h3{
		font-size: 2rem;
		margin-bottom: 1.5rem;
	}
	.unyou li{
		width: 49%;
		height: 8rem;
		font-size: 1.5rem;
	}
	.unyou li:last-child{
		font-size: 1.25rem;
	}
}
@media (max-width: 640px) {
	.onayami h2{
		font-size: 1.75rem;
	}
}
@media (max-width: 480px) {
	.onayami h2{
		font-size: 1.375rem;
		margin-bottom: 1.5rem;
	}
	.onayami ul{
		padding: 1rem 1rem 0;
	}
	.onayami li{
		font-size: 1.375rem;
		margin-bottom: 1rem;
		padding-left: 1.875rem;
	}
	.onayami li::before{
		top: .375rem;
		width: 1.375rem;
		height: 1.375rem;
	}
	.kaiketu h2{
		font-size: 1.375rem;
	}
	.sns-toha h3{
		font-size: 1.5rem;
	}
	.unyou h3{
		font-size: 1.25rem;
	}
	.unyou li{
		height: 7rem;
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}
	.unyou li:last-child{
		font-size: 1rem;
	}
	.unyou li span{
		font-size: .875rem;
	}
}
/*スタートライクのSNS運用代行が選ばれる理由*/
.wrap-reason-sns{
	background-color: #009fc9;
	padding: 3rem 0 15rem;
}
.wrap-reason-sns .container{
	display: flex;
}
.reason-sns-left{
	position: relative;
	display: flex;
	justify-content: center;
	width: 18rem;
	padding-top: 3.5rem;
}
.reason-sns-left::before{
	content: "";
	position: absolute;
	top: 426px;
	left: 0;
	display: block;
	width: 520px;
	height: 498px;
	background: url(img/penki09.webp) center center / contain no-repeat;
	margin-left: -165px;
	z-index: 0;
}
.reason-sns-left h2{
	position: relative;
	font-size: 2rem;
	writing-mode: vertical-lr;
	z-index: 10;
}
.reason-sns-moji01{
	writing-mode: vertical-rl;
	transform: rotate(90deg);
	margin: -.5rem 0;
}
.reason-sns-right{
	flex: 1;
}
.reason-sns-moji02{
	display: block;
	font-size: 5rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 1rem;
}
.reason-sns{
	position: relative;
	display: flex;
	align-items: center;
	gap: 2rem;
	background-color: #fff;
	margin-bottom: 3rem;
	padding: 2rem;
	z-index: 10;
}
.reason-sns-text{
	flex: 1;
}
.reason-sns h3{
	font-size: 2rem;
	text-align: center;
	margin-bottom: 1rem;
}
.reason-sns p{
	max-width: 30rem;
	margin: 0 auto;
}
.reason-sns img{
	width: 33%;
}
@media (max-width: 1200px) {
	.reason-sns-left{
		width: 14rem;
	}
	.reason-sns-left::before{
		top: 436px;
		width: 480px;
		height: 460px;
		margin-left: -175px;
	}
	.reason-sns h3{
		font-size: 1.75rem;
	}
}
@media (max-width: 1024px) {
	.reason-sns-left{
		width: 10rem;
	}
	.reason-sns-left::before{
		top: 455px;
		width: 430px;
		height: 414px;
	}
	.reason-sns{
		gap: 1rem;
		padding: 1.5rem;
	}
}
@media (max-width: 960px) {
	.wrap-reason-sns .container{
		flex-direction: column;
	}
	.reason-sns-left{
		width: 100%;
	}
	.reason-sns-left::before{
		top: -9rem;
		left: 50%;
		margin-left: 4rem;
	}
	.reason-sns-left h2{
		writing-mode: rl;
	}
	.reason-sns-moji01{
		writing-mode: rl;
		transform: none;
		margin: 0;
	}
}
@media (max-width: 784px) {
	.reason-sns-left{
		padding-top: 0;
	}
	.reason-sns-left::before{
		top: -9rem;
		left: inherit;
		right: -2rem;
		width: 300px;
		height: 288px;
		margin-left: 0;
	}
	.reason-sns-left h2{
		font-size: 1.5rem;
		text-align: center;
	}
	.reason-sns-left h2 .fc-yellow{
		display: inline-block;
	}
	.reason-sns-moji02{
		font-size: 3rem;
	}
	.reason-sns img{
		width: 40%;
	}
}
@media (max-width: 640px) {
	.reason-sns{
		flex-direction: column-reverse;
		margin-bottom: 2rem;
		padding: 1rem;
	}
	.reason-sns h3{
		font-size: 1.25rem;
	}
	.reason-sns img{
		width: 100%;
	}
}
/*SNS運用代行　制作事例*/

/*料金について*/
.wrap-sns-price{
	padding: 0 0 4rem;
}
.wrap-sns-price h2{
	font-size: 4rem;
	text-align: center;
	margin-bottom: 2rem;
}
.sns-price{
	max-width: 50rem;
	text-align: center;
	border: solid 6px #000;
	border-radius: 10px;
	margin: 0 auto 2rem;
	padding: 2rem 1rem;
}
.sns-te{
	font-size: 1.375rem;
}
.sns-te::before,
.sns-te::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 38px;
    background-color: #000;
    margin-bottom: -10px;
}
.sns-te::before {
	transform: rotate(-30deg);
	margin-right: 1.25rem;
}
.sns-te::after {
	transform: rotate(30deg);
	margin-left: .5rem;
}
.sns-getugaku{
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 1.5rem;
}
.sns-getugaku .fc-red{
	display: inline-block;
	font-size: 5rem;
	font-weight: 700;
	color: #c1272d;
	padding: 0 .25rem;
}
.sns-hendou{
	font-size: 1.125rem;
}
.btn-price{
	display: block;
	max-width: 30rem;
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	color: #000;
	background-color: #ffff00;
	border-radius: 1000px;
	margin: 0 auto 3rem;
	padding: 1rem;
}
.sns-teian{
	text-align: center;
	background-color: #f2f2f2;
	border-radius: 20px;
	padding: 3rem 2rem 4rem;
}
.sns-teian h3{
	font-size: 2rem;
	line-height: 1.4;
	margin-bottom: 1.5rem;
}
.sns-teian h3 br{
	display: none;
}
.sns-teian ul{
	display: flex;
	justify-content: space-between;
	max-width: 54rem;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
.sns-teian li{
	width: 22%;
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
	background-image: url(img/sns-teian01.webp);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 10px;
	box-shadow: 2px 2px 5px 2px #747474;
	padding: 2.5rem 1rem;
}
.sns-teian li:nth-of-type(2){
	background-image: url(img/sns-teian02.webp);
}
.sns-teian li:nth-of-type(3){
	background-image: url(img/sns-teian03.webp);
}
.sns-teian li:nth-of-type(4){
	background-image: url(img/sns-teian04.webp);
}
@media (max-width: 960px) {
	.sns-teian h3 br{
		display: block;
	}
}
@media (max-width: 784px) {
	.wrap-sns-price{
		padding: 0 0 2rem;
	}
	.wrap-sns-price h2{
		font-size: 2.25rem;
		margin-bottom: 1rem;
	}
	.sns-getugaku{
		font-size: 1rem;
	}
	.sns-getugaku .fc-red{
		font-size: 3rem;
	}
	.sns-hendou{
		font-size: 1rem;
	}
	.btn-price{
		font-size: 1.25rem;
		padding: .5rem;
	}
	.sns-teian{
		padding: 2rem 1rem;
	}
	.sns-teian h3{
		font-size: 1.5rem;
	}
	.sns-teian li{
		width: 23.5%;
		font-size: 1.5rem;
	}
}
@media (max-width: 640px) {
	.sns-teian ul{
		flex-wrap: wrap;
	}
	.sns-teian li{
		width: 49%;
		margin-bottom: .75rem;
		padding: 1.5rem 1rem;
	}
}
/*運用の流れ*/
.sns-flow{
	background-color: #009fc9;
	padding: 3rem 1rem 5rem;
}
.sns-flow h2{
	font-size: 3rem;
	text-align: center;
	color: #fff;
	margin-bottom: 2rem;
}
.sns-flow ol{
	display: flex;
	justify-content: space-between;
	gap: 40px;
	max-width: 1200px;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
.sns-flow li{
	position: relative;
	width: 25%;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 3px 3px 9px 0px black;
	padding: 1rem 1rem 2rem;
}
.sns-flow li::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	display: block;
	width: 20px;
	height: 30px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	background: #000;
	margin-top: -15px;
	margin-left: 12px;
}
.sns-flow li:last-child::after{
	content: none;
}
.sns-flow-top{
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: .5rem;
	height: 9.5rem;
	border-bottom: solid 1px #000;
	margin-bottom: .5rem;
	padding-bottom: .5rem;
}
.sns-flow img{
	display: block;
	max-width: 90px;
	margin: 0 auto;
}
.sns-flow h3{
	font-size: 1.5rem;
	line-height: 1.2;
	color: #ed1e79;
	text-align: center;
}
.sns-flow p{
	padding: 0 .25rem;
}
@media (max-width: 960px) {
	.sns-flow h3{
		font-size: 1.25rem;
	}
	.sns-flow ol{
		gap: 30px;
	}
	.sns-flow li{
		padding: 1rem .75rem;
	}
	.sns-flow li::after{
		width: 14px;
		height: 24px;
		margin-top: -12px;
		margin-left: 10px;
	}
	.sns-flow-top{
		height: 9rem;
	}
}
@media (max-width: 784px) {
	.sns-flow h2{
		font-size: 2rem;
	}
	.sns-flow ol{
		flex-direction: column;
		align-items: center;
	}
	.sns-flow li{
		width: 100%;
		max-width: 30rem;
	}
	.sns-flow li::after{
		top: 100%;
		left: 50%;
		margin-top: 4px;
		margin-left: -7px;
		transform: rotate(90deg);
	}
}
/*よくある質問*/
.sns-qa{
	padding: 4rem 1rem;
}
.sns-qa h2{
	font-size: 2rem;
}
.smb-accordion__item__title{
	position: relative;
	background-color: #ffff00;
	padding-left: 3rem;
}
.smb-accordion__item__title::before{
	content: "Q";
	position: absolute;
	top: 0;
	left: 1rem;
	font-size: 1.5rem;
}