/*===============================================================================
コンポーネント
================================================================================*/
/*===============================
* タイトル
* =================================*/
.c-mkt-title{
	font-family: var(--ff-m);
	font-weight: var(--fw-lg);
	font-size: clamp(1.75rem, 1.036rem + 1.9vw, 2.75rem); /* 44 > 25 */
}
.c-mkt-title.--fz-lg{
	font-size: clamp(1.75rem, 0.679rem + 2.86vw, 3.25rem); /* 52 > 25 */
}
/*===============================
* サブテキスト有のタイトル
* =================================*/
.c-mkt-col-title{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.c-mkt-col-title__sub{
	line-height: var(--lh-md);
	text-transform: capitalize;
	font-weight: var(--fw-md);
	font-family: var(--ff-bc);
}
/*===============================
* ・ありのリスト
* =================================*/
.c-mkt-icon-list > li {
	display: flex;
	align-items: center;
	gap: 0.5em;
	line-height: var(--lh-md);
}
.c-mkt-icon-list > li::before {
	display: inline-block;
	content: "";
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--c-main);
}
/*===============================
* ボタン
* =================================*/
.c-mkt-btn{
	--icon-size: .5em;
	position: relative;
	display: inline-block;
	max-width: clamp(22.5rem, 20.714rem + 4.76vw, 25rem);
	width: 100%;
	padding: 1.25em calc(var(--icon-size) * 2);
	text-align: center;
	background: var(--c-dark);
	border: 1px solid var(--c-dark);
	line-height: var(--lh-md);
	color: var(--c-light);
	font-weight: var(--fw-lg);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
.c-mkt-btn:is(:focus, :hover){
	background: var(--c-light);
	color: var(--c-dark);
}
/* アイコン */
.c-mkt-btn__icon{
	position: absolute;
	top: 50%;
	right: 1.5em;
	transform: translateY(-50%);
	transition: var(--ani-t--normal) ease-out;
	z-index: 1;
	width: var(--icon-size);
}
.c-mkt-btn__icon svg {
	width: var(--icon-size);
	color: var(--c-current);
}
.c-mkt-btn:is(:focus, :hover) .c-mkt-btn__icon {
	right: 1.25em;
}
/*===============================
* 余白
* =================================*/
.c-mkt-group:not(:last-child){
	margin-bottom: 1.75rem;
}
.c-mkt-group.--mb-lg:not(:last-child){
	margin-bottom: var(--g-sec--xs);
}
.c-mkt-group.--mb-sm:not(:last-child){
	margin-bottom: 1.25rem;
}
/*===============================
* バナー
* =================================*/
.mkt-bannar{
	position: fixed;
	bottom: .5rem;
	right: .5rem;
	z-index: 10;
	width: clamp(12.5rem, 10.714rem + 4.76vw, 15rem);
	transition: var(--ani-t--normal) ease-out;
}
.mkt-bannar:is(:hover, :focus){
	opacity: .7;
}
/*===============================
* ToTopボタン
* =================================*/
.p-fixBtnWrap{
	bottom: 7rem;
}
/*===============================================================================
ページ共通
================================================================================*/
#content{
	--c-main: #2463A7;
	--c-dark: #333;
	--c-gray: #F5F5F5;
	--width-sm: 1200px;
	--width-xs: 960px;
	max-width: calc(1320px + var(--swl-pad_container, 0px) * 2);
	font-weight: var(--fw-md);
	line-height: 1.8;
}


/*===============================================================================
MV
================================================================================*/
.mkt-mv{
	margin-bottom: var(--g-sec--lg);
}
.mkt-mv__inner{
	position: relative;
}
.mkt-mv__container{
	--cont-layer: 5;
	position: relative;
	display: flex;
	justify-content: center;
	padding: var(--g-sec--xl) 0 var(--g-sec--lg);
}
/* グレースケール */
.mkt-mv__grayscale{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: calc( var(--cont-layer) - 1 );
	width: 100vw;
	height: 100%;
	background: linear-gradient(-90deg, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 0) 100%);
}
@media (min-width: 960px){
	.mkt-mv__grayscale{
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 0) 100%);
	}
}
/* 背景画像 */
.mkt-mv__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: calc( var(--cont-layer) - 2 );
	max-width: 100vw;
	width: 100vw;
	height: 100%;
	object-fit: cover;
}
.mkt-mv__bgi img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
/* コンテンツ */
.mkt-mv__content-layer{
	position: relative;
	width: 100%;
	z-index: var(--cont-layer);
}
.mkt-mv__content{
	max-width: clamp(35rem, 5rem + 50vw, 50rem);
}
.mkt-mv__title{
	margin-bottom: var(--g-sec--xs);
	font-family: var(--ff-m);
	font-weight: var(--fw-xl);
	font-size: clamp(1.5rem, 1.143rem + 0.95vw, 2rem);
}
.mkt-mv__title strong{
	color: var(--c-main);
}
.mkt-mv__text-area{
	margin-bottom: var(--g-sec--sm);
}
.mkt-mv__btn{
	text-align: center;
}
/*===============================
* 装飾テキスト
* =================================*/
.mkt-mv__decor{
	position: absolute;
	left: calc( 50% - 50vw + .5rem );
	bottom: -.4%;
	z-index: var(--cont-layer);
	display: flex;
	flex-direction: column;
	gap: .333em;
	width: 100%;
	line-height: var(--lh-xs);
	font-weight: var(--fw-lg);
	font-family: var(--ff-m);
	color: var(--c-light);
	opacity: .8;
}
@media (min-width: 600px){
	.mkt-mv__decor{
		bottom: -.7%;
	}
}
@media (min-width: 960px){
	.mkt-mv__decor{
		bottom: -1%;
	}
}
.mkt-mv__decor-sub{
	font-size: clamp(1rem, 0.643rem + 0.95vw, 1.5rem);
}
.mv__decor-main{
	font-size: clamp(2.25rem, -0.429rem + 7.14vw, 6rem);
}
/*===============================
* SCROLL
* =================================*/
.mkt-mv__scroll{
	display: none;
}
@media (min-width: 1200px){
	.mkt-mv__scroll {
		position: absolute;
		bottom: .75rem;
		right: calc( 50% - 50vw + 1.75rem );
		z-index: 5;
		display: flex;
		gap: 1rem;
		align-items: center;
		writing-mode: sideways-rl;
		text-orientation: upright;
		text-transform: uppercase;
		font-family: var(--ff-bc);
		color: var(--c-light);
	}
}
.mkt-mv__scroll-line {
	position: relative;
	width: 1px;
	height: 17.5rem;
	background: var(--c-light);
	animation: scrollSide 5s ease infinite;
}
@keyframes scrollSide {
	0%{
		transform-origin: top;
		transform: scaleY(0);
	}
	45%{
		transform-origin: top;
		transform: scaleY(1);
	}
	55%{
		transform-origin: bottom;
		transform: scaleY(1);
	}
	100%{
		transform-origin: bottom;
		transform: scaleY(0);
	}
}


/*===============================================================================
こんなお悩みはありませんか？
================================================================================*/
.mkt-trouble{
	margin-bottom: var(--g-sec--lg);
}
.mkt-trouble__flex{
	--count: 1;
	--gap: var(--g-sec--md);
	--media-width: 100%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 960px){
	.mkt-trouble__flex{
		--count: 2;
		--media-width: 97%;
		flex-direction: row-reverse;
	}
}
.mkt-trouble__image{
	width: calc( ( var(--media-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.mkt-trouble__image img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 350 / 197;
	object-position: 50% 0%;
}
@media (min-width: 960px){
	.mkt-trouble__image img{
		aspect-ratio: 600 / 680;
		object-position: 92% 50%;
	}
}
.mkt-trouble__content{
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.mkt-trouble__title{
	margin-bottom: var(--g-sec--sm);
}
.mkt-trouble__text-bgc{
	padding: clamp(1rem, 0.464rem + 1.43vw, 1.75rem);
	background: var(--c-gray);
}
.mkt-trouble__list{
	line-height: var(--lh-md);
}
.mkt-trouble__list li:not(:last-of-type){
	margin-bottom: .75rem;
}
.mkt-trouble__list li{
	display: flex;
	gap: .25em;
	align-items: baseline;
	counter-increment: number;
}
.mkt-trouble__list li::before,{
	display: inline-block;
	font-size: inherit;
	color: inherit;
}
.mkt-trouble__list li::before{
	content: counter(number) ".";
}
.mkt-trouble__list span{
	--line-heght: .5rem;
	display: inline;
	background: linear-gradient(transparent calc(100% - var(--line-heght)), rgb(36 99 167 / 15%) var(--line-heght));
}


/*===============================================================================
なぜ、WEB集客はうまくいかないのか？
================================================================================*/
.mkt-cause{
	margin-bottom: var(--g-sec--xl);
}
.mkt-cause__inner{
	position: relative;
	padding: var(--g-sec--lg) 0 var(--g-sec--xl);
	color: var(--c-light);
}
.mkt-cause__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
.mkt-cause__bgi img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 28% 50%;
}
.mkt-cause__head{
	margin-bottom: var(--g-sec--md);
}
.mkt-cause__text-box{
	max-width: 644px;
	margin-inline: auto;
}
.mkt-cause__text-box b{
	font-weight: var(--fw-xl);
}
@media (min-width: 600px){
	.mkt-cause__text-box > *{
		text-align: center;
		justify-content: center;
	}
}
@media (min-width: 600px){
	.mkt-cause__text-area, 
	.mkt-cause__text-area .c-autoWrap{
		justify-content: center;
		text-align: center;
	}
}

/*===============================================================================
WeathercockのWEBマーケティング支援
================================================================================*/
.mkt-ukezara{
	margin-bottom: var(--g-sec--xl);
}
.mkt-ukezara__head{
	max-width: var(--width-sm);
	margin-inline: auto;
	margin-bottom: var(--g-sec--md);
}
.mkt-ukezara__title{
	display: flex;
	flex-direction: column;
}
.mkt-ukezara__title > span:nth-of-type(2){
	display: flex;
	align-items: center;
	gap: var(--g-sec--xs);
	padding-left: 1.5em;
}
.mkt-ukezara__title-line{
	flex-grow: 1;
	height: 1px;
	background: var(--c-dark);
}
.mkt-ukezara-mediaText{
	--count: 1;
	--gap: 0rem;
	--media-width: 100%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	background: var(--c-gray);
}
.mkt-ukezara-mediaText:not(:last-child){
	margin-bottom: var(--g-sec--md);
}
@media (min-width: 768px){
	.mkt-ukezara-mediaText{
		--media-width: 88.5%;
		--count: 2;
	}
	/* 偶数番目 */
	.mkt-ukezara-mediaText:nth-child(even){
		flex-direction: row-reverse;
	}
}
.mkt-ukezara-mediaText__media{
	width: calc( ( var(--media-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.mkt-ukezara-mediaText__media img{
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 390 / 219;
	object-fit: cover;
	object-position: 50% 50%;
}
@media (min-width: 768px){
	.mkt-ukezara-mediaText__media img{
		aspect-ratio: auto;
	}
}
.mkt-ukezara-mediaText__body{
	align-self: center;
	max-width: calc( 600px + 1rem * 2 );
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
	margin-inline: auto;
	padding: var(--g-sec--sm) 1rem;
}
.mkt-ukezara-mediaText__title{
	display: flex;
	flex-direction: column;
	margin-bottom: 1.75rem;
}



/*===============================================================================
WeathercockのWEBマーケティング支援
================================================================================*/
.mkt-marketing{
	margin-bottom: var(--g-sec--lg);
}
/*===============================
* 背景色
* =================================*/
.mkt-marketing__inner{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
.mkt-marketing__inner::before{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	content: "";
	max-width: 100vw;
	width: 100vw;
	height: 100%;
	background: var(--c-gray);
}
/*===============================
* ヘッド
* =================================*/
.mkt-marketing__head{
	max-width: var(--width-sm);
	margin-inline: auto;
	margin-bottom: var(--g-sec--md);
}
.mkt-marketing__title{
	margin-bottom: var(--g-sec--xs);
	text-align: center;
}
@media (min-width: 600px){
	.mkt-marketing__lead{
		text-align: center;
	}
}

.mkt-marketing__body{
	position: relative;
	left: calc( 50% - 50vw );
	width: 100vw;
}
@media (min-width: 1200px){
	.mkt-marketing__body{
		left: 0;
		max-width: 1200px;
		margin-inline: auto;
	}
}
/*===============================
* ﾒﾃﾞｨｱﾃｷｽﾄ
* =================================*/
.mkt-marketing-mediaText{
	--count: 1;
	--gap: 0rem;
	--media-width: 100%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	background: var(--c-light);
}
.mkt-marketing-mediaText:not(:last-child){
	margin-bottom: var(--g-sec--xs);
}
@media (min-width: 960px){
	.mkt-marketing-mediaText{
		--count: 2;
	}
	/* 偶数番目 */
	.mkt-marketing-mediaText:nth-child(even){
		flex-direction: row-reverse;
	}
}
.mkt-marketing-mediaText__media{
	width: calc( ( var(--media-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.mkt-marketing-mediaText__media img{
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 390 / 219;
	object-fit: cover;
	object-position: 50% 50%;
}
@media (min-width: 960px){
	.mkt-marketing-mediaText__media img{
		aspect-ratio: auto;
	}
}
.mkt-marketing-mediaText__body{
	align-self: center;
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
	margin-inline: auto;
	padding: var(--g-sec--sm) 1rem;
}
@media (min-width: 768px){
	.mkt-marketing-mediaText__body{
		max-width: calc( 504px + 1rem * 2 );
	}
}
.mkt-marketing-mediaText__title {
	position: relative;
	margin-bottom: 1.75rem;
	padding-left: 1.25rem;
	line-height: var(--lh-md);
	font-weight: var(--fw-xl);
	font-size: clamp(1.25rem, 1.071rem + 0.48vw, 1.5rem);
	font-family: var(--ff-m);
}
.mkt-marketing-mediaText__title::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 3px;
	height: 1em;
	background: var(--c-main);
	transform: translate(0, 30%);
}


/*===============================================================================
必要な施策を、必要な分だけ。
================================================================================*/
.mkt-timing{
	margin-bottom: var(--g-sec--lg);
}
.mkt-timing__head{
	margin-bottom: var(--g-sec--lg);
}
.mkt-timing__title{
	margin-bottom: var(--g-sec--sm);
	text-align: center;
}
@media (min-width: 600px){
	.mkt-timing__lead{
		text-align: center;
	}
}
.mkt-timing__image img{
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 390 / 293;
	object-fit: cover;
	object-position: 50% 50%;
}
@media (min-width: 600px){
	.mkt-timing__image img{
		aspect-ratio: 1440 / 480;
	}
}


/*===============================================================================
Weathercockが選ばれる理由
================================================================================*/
.mkt-reason{
	margin-bottom: var(--g-sec--lg);
}
.mkt-reason__inner{
	position: relative;
	padding: var(--g-sec--lg) 0 var(--g-sec--xl);
}
.mkt-reason__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
.mkt-reason__bgi img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 28% 50%;
}
.mkt-reason__head{
	margin-bottom: var(--g-sec--md);
	color: var(--c-light);
}
.mkt-reason__title{
	margin-bottom: var(--g-sec--sm);
}
@media (min-width: 600px){
	.mkt-reason__lead{
		text-align: center;
	}
}
/*===============================
* ページネーション
* =================================*/
.mkt-reason-pagination {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1.25rem;
}
.mkt-reason-dot {
	width: .75rem;
	height: .75rem;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	transition: var(--ani-t--normal) ease-out;
}
.mkt-reason-dot.is-active {
	width: 2.5rem;
	background-color: var(--c-light);
	border-radius: var(--bd-r--sm);
}
/*===============================
* ﾒﾃﾞｨｱﾃｷｽﾄ
* =================================*/
.mkt-reason-mediaText{
	--count: 1;
	--gap: 0rem;
	--media-width: 100%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	height: 100%;
}
.mkt-reason-mediaText:not(:last-of-type){
	margin-bottom: var(--g-sec--xs);
}
@media (min-width: 960px){
	.mkt-reason-mediaText{
		--count: 2;
		flex-direction: row-reverse;
	}
	.mkt-reason-mediaText:not(:last-of-type){
		margin-bottom: 0;
	}
}
/* 画像 */
.mkt-reason-mediaText__media{
	width: calc( ( var(--media-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.mkt-reason-mediaText__media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
/* テキストエリア */
.mkt-reason-mediaText__container{
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
	padding: var(--g-sec--sm) clamp(1rem, -0.071rem + 2.86vw, 2.5rem);
	background: var(--c-light);
}
.mkt-reason-mediaText__head{
	position: relative;
	padding: clamp(2rem, 1.821rem + 0.48vw, 2.25rem) clamp(0.5rem, 0.321rem + 0.48vw, 0.75rem) clamp(1.5rem, 1.321rem + 0.48vw, 1.75rem);
	border-top: 1px solid var(--c-dark);
	border-bottom: 1px solid var(--c-dark);
	margin-bottom: var(--g-sec--xs);
	font-family: var(--ff-m);
}
.mkt-reason-mediaText__label{
	position: absolute;
	top: 0;
	left: auto;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: baseline;
	gap: .5em;
	padding: .25rem .75rem;
	line-height: var(--lh-xs);
	background: var(--c-dark);
	color: var(--c-light);
}
.mkt-reason-mediaText__label span:nth-of-type(1){
	text-transform: capitalize;
	font-size: 1.25rem;
}
.mkt-reason-mediaText__label span:nth-of-type(2){
	font-size: 1.5rem;
}
.mkt-reason-mediaText__title{
	display: flex;
	flex-direction: column;
	font-weight: var(--fw-xl);
	font-size: clamp(1.5rem, 1.321rem + 0.48vw, 1.75rem);
}


/*===============================================================================
WEB集客のパートナーとして
================================================================================*/
.mkt-partner{
	margin-bottom: var(--g-sec--lg);
}
.mkt-partner__title{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: var(--g-sec--sm);
}
@media (min-width: 600px){
	.mkt-partner__text-box{
		text-align: center;
	}
}


/*===============================================================================
数字と実績で見るWeathercock
================================================================================*/
.mkt-data{
	margin-bottom: var(--g-sec--lg);
}
/*===============================
* 背景画像
* =================================*/
.mkt-data__inner{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
.mkt-data__bgi{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	content: "";
	max-width: 100vw;
	width: 100vw;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
/*===============================
* ヘッド
* =================================*/
.mkt-data__head{
	max-width: var(--width-sm);
	margin-inline: auto;
	margin-bottom: var(--g-sec--md);
	text-align: center;
}
.mkt-data__title{
	margin-bottom: var(--g-sec--xs);
}
/*===============================
* body
* =================================*/
.mkt-data__body{
	--count: 1;
	--gap: 1.25rem;
	--line-weight: 1px;
	--line-style: solid;
	--line-color: var(--c-main);
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 768px){
	.mkt-data__body{
		--count: 2;
	}
}
.mkt-data__item{
	width: calc( ( 100% - var(--gap) * var(--count) - var(--line-weight) ) / var(--count) );
	padding: var(--g-sec--sm) clamp(1rem, -0.071rem + 2.86vw, 2.5rem);
}
/* 数値での結果 */
.mkt-data__result {
	display: flex;
	align-items: baseline;
	gap: .2em;
	line-height: var(--lh-xs);
	color: var(--c-main);
	font-size: clamp(2rem, 1.643rem + 0.95vw, 2.5rem);
	font-weight: var(--fw-xl);
}
.mkt-data__result-number {
	font-weight: var(--fw-lg);
	font-size: 3em;
	font-family: var(--ff-bc);
}
.mkt-data__result-unit {
	font-size: .8em;
}
/* リード */
.mkt-data__lead{
	text-align: center;
	line-height: var(--lh-md);
	font-weight: var(--fw-xl);
	font-size: clamp(1.25rem, 1.071rem + 0.48vw, 1.5rem);
}
/*===============================
* SEO上位表示率
* =================================*/
.mkt-data-seo__circle {
	--ring-size: clamp(17.5rem, 13.929rem + 9.52vw, 22.5rem);
	--ring-width: 24;
	position: relative;
	width: var(--ring-size);
	height: var(--ring-size);
	margin-inline: auto;
}
@media (min-width: 768px){
	.mkt-data-seo__circle {
		--ring-width: 32;
	}
}
.mkt-data-seo__ring {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
.mkt-data-seo__ring-background,
.mkt-data-seo__ring-progress {
	cx: 50%;
	cy: 50%;
	r: calc(50% - var(--ring-width) / 2 * 1px );
	fill: none;
	stroke-width: var(--ring-width);
}
.mkt-data-seo__ring-background {
	stroke: var(--c-main);
	opacity: .2;
}
.mkt-data-seo__ring-progress {
	stroke: var(--c-main);
	stroke-linecap: butt;
}
.mkt-data-seo__content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/*===============================
* 問い合わせ数
* =================================*/
.mkt-data-contact__illust{
	position: relative;
	max-width: clamp(17rem, 14.857rem + 5.71vw, 20rem);
	margin-inline: auto;
}
.mkt-data-contact__result{
	position: absolute;
	bottom: 1.5rem;
	left: clamp(2rem, 0.929rem + 2.86vw, 3.5rem);
}
/*===============================
* 広告運用でコンバージョン数
* =================================*/
.mkt-data-conversion__illust{
	position: relative;
	max-width: clamp(17rem, 14.857rem + 5.71vw, 20rem);
	margin-inline: auto;
}
.mkt-data-conversion__result{
	position: absolute;
	bottom: 3.5rem;
	left: 2.75rem;
}
/*===============================
* 区切り線
* =================================*/
.mkt-data__line{
	width: 100%;
	border-top: var(--line-weight) var(--line-style) var(--line-color);
	opacity: .3;
}
@media (min-width: 768px){
	.mkt-data__line.--01, 
	.mkt-data__line.--03{
		width: var(--line-weight);
		border-top: none;
		border-right: var(--line-weight) var(--line-style) var(--line-color);
	}
}



/*===============================================================================
こんな企業におすすめです
================================================================================*/
.mkt-point{
	margin-bottom: var(--g-sec--lg);
}
.mkt-point__head{
	margin-bottom: var(--g-sec--sm);
}
.mkt-point{
	margin-bottom: var(--g-sec--lg);
}
.mkt-point__body{
	--count: 1;
	--gap: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--g-sec--xs) var(--gap);
}
@media (min-width: 600px){
	.mkt-point__body{
		--count: 2;
	}
}
@media (min-width: 960px){
	.mkt-point__body{
		--count: 3;
	}
}
.mkt-point-card{
	display: flex;
	flex-direction: column;
	width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.mkt-point-card__image{
	position: relative;
	padding-bottom: 1.25rem;
	text-align: center;
}
.mkt-point-card__image img{
	width: clamp(10rem, 8.214rem + 4.76vw, 12.5rem);
}
.mkt-point-card__image::before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	width: 100%;
	height: 75%;
	background: var(--c-main);
	opacity: .05;
}
@media (min-width: 960px){
	.mkt-point-card__image::before{
		height: 50%;
	}
}
.mkt-point-card__contents{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
	padding: 0 1rem var(--g-sec--xs);
	text-align: center;
	line-height: var(--lh-md);
	font-weight: var(--fw-lg);
	font-size: 1.25rem;
}
.mkt-point-card__contents::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	width: 100%;
	height: 100%;
	background: var(--c-main);
	opacity: .05;
}

/*===============================================================================
「集客のこと」をご相談ください。
================================================================================*/
.mkt-cta__inner{
	position: relative;
	padding: var(--g-sec--lg) 0 var(--g-sec--xl);
	text-shadow: 0px 2px 2px rgba(51, 51, 51, 0.5);
	color: var(--c-light);
}
.mkt-cta__bgi, 
.mkt-cta__grayscale{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	content: "";
	max-width: 100vw;
	width: 100vw;
	height: 100%;
}
/* 背景画像 */
.mkt-cta__bgi{
	z-index: -2;
	object-fit: cover;
	object-position: 50% 50%;
}
/* グレースケール */
.mkt-cta__grayscale{
	z-index: -1;
	content: "";
	background: linear-gradient(90deg, rgba(51, 51, 51, 0.8) 30.29%, rgba(51, 51, 51, 0) 100%), url(31922197_m.jpg);
}
.mkt-cta__head{
	margin-bottom: var(--g-sec--sm);
}
.mkt-cta__title{
	display: flex;
	flex-direction: column;
}


/*===============================================================================
ご相談からWEB集客支援までの流れ
================================================================================*/
.mkt-step{
	margin-bottom: var(--g-sec--lg);
}
.mkt-step__inner{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
.mkt-step__inner::before{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	content: "";
	width: 100vw;
	height: 100%;
	background: var(--c-gray);
}
.mkt-step__head{
	margin-bottom: var(--g-sec--md);
}
.mkt-step__title{
	margin-bottom: var(--g-sec--sm);
}
@media (min-width: 600px){
	.mkt-step__lead{
		text-align: center;
	}
}
/*===============================
* ステップ
* =================================*/
.mkt-step-flows{
	max-width: var(--width-xs);
	margin-inline: auto;
}
.mkt-step-flow{
	--step-mb: var(--g-sec--xs);
	--circle-size: .75rem;
	--current-color: var(--c-main);
	position: relative;
	padding: clamp(1.25rem, 0.357rem + 2.38vw, 2.5rem);
	background: var(--c-light);
}
.mkt-step-flow:not(:last-of-type){
	margin-bottom: var(--step-mb);
}
/* 装飾 */
@media (min-width: 960px){
	.mkt-step-flow__decor{
		--gap: .5rem;
		position: absolute;
		top: 50%;
		right: calc( 100% + clamp(1rem, -2rem + 5vw, 2.5rem) );
		transform: translateY(-50%);
		z-index: 1;
		align-items: center;
		width: var(--circle-size);
		height: 100%;
	}
	.mkt-step-flow__decor-line{
		position: absolute;
		left: 50%;
		display: inline-block;
		width: 1px;
		height: calc( (50% + var(--step-mb) / 2) - (var(--circle-size) / 2 + var(--gap)) );
		background: var(--current-color);
	}
	.mkt-step-flow__decor-line.--top{
		bottom: 50%;
		transform: translate(-50%, calc( var(--circle-size) / -2 - var(--gap) ));
	}
	.mkt-step-flow:first-of-type .mkt-step-flow__decor-line.--top{
		display: none;
	}
	.mkt-step-flow__decor-line.--bottom{
		top: 50%;
		transform: translate(-50%, calc( var(--circle-size) / 2 + var(--gap) ));
	}
	.mkt-step-flow:last-of-type .mkt-step-flow__decor-line.--bottom{
		display: none;
	}
	.mkt-step-flow__decor-circle{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: inline-block;
		width: var(--circle-size);
		height: var(--circle-size);
		aspect-ratio: 1;
		background: var(--current-color);
		border-radius: 50%;
	}
}

/* カラム */
.mkt-step-flow__flex{
	--count: 1;
	--gap: var(--g-sec--xs);
	--media-width: 100%;
	--body-width: calc( 200% - var(--media-width) );
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--gap);
}
@media (min-width: 768px){
	.mkt-step-flow__flex{
		--count: 2;
		--media-width: 88%;
		flex-direction: row-reverse;
	}
}
/* メディア */
.mkt-step-flow__media{
	width: calc( ( var(--media-width) - var(--gap) * (var(--count) - 1) ) / var(--count) ); 
}
.mkt-step-flow__media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
/* コンテンツ */
.mkt-step-flow__container{
	width: calc( ( var(--body-width) - var(--gap) * (var(--count) - 1) ) / var(--count) );
}
.mkt-step-flow__head{
	margin-bottom: 1.75rem;
}
.mkt-step-flow__label{
	margin-bottom: .25rem;
	line-height: var(--lh-xs);
	font-weight: var(--fw-lg);
	font-family: var(--ff-bc);
	color: var(--current-color);
}
.mkt-step-flow__title{
	line-height: var(--lh-md);
	font-weight: var(--fw-lg);
	font-size: clamp(1.5rem, 1.321rem + 0.48vw, 1.75rem);
}


/*===============================================================================
よくある質問
================================================================================*/
.mkt-faq{
	margin-bottom: var(--g-sec--lg);
}
.mkt-faq__head{
	margin-bottom: var(--g-sec--md);
}
.mkt-faq__title{
	text-align: center;
}
.mkt-faq__body{
	max-width: var(--width-xs);
	margin-inline: auto;
}
/*===============================
アコーディオン
=================================*/
.mkt-faq-accordion{
	--side-pad: clamp(0rem, -1.25rem + 3.33vw, 1.75rem);
	--vertical-pad: 1.75rem;
	--gap: clamp(1.25rem, 0.893rem + 0.95vw, 1.75rem);
	--this-color: #3333334d;
	display: block;
	width: 100%;
	padding: var(--vertical-pad) var(--side-pad);
	border-bottom: 1px solid var(--this-color);
}
.mkt-faq-accordion:first-of-type{
	border-top: 1px solid var(--this-color);
}

/*===============================
質問
=================================*/
.mkt-faq-accordion__head{
	display: flex;
	gap: var(--gap);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
/* アニメーション */
.mkt-faq-accordion[open] .mkt-faq-accordion__head{
	margin-bottom: var(--g-sec--xs);
}
.mkt-faq-accordion__head-inner{
	flex-grow: 1;
	font-weight: var(--fw-lg);
}

/*===============================
回答
=================================*/
.mkt-faq-accordion__body{
	display: flex;
	gap: var(--gap);
}
/* アニメーション */
.mkt-faq-accordion[open] .mkt-faq-accordion__body {
	padding-bottom: .75rem;
	animation: fadein 0.5s ease;
}
@keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.mkt-faq-accordion__body-inner{
	flex-grow: 1;
}

/*===============================
QA文字
=================================*/
/* QA文字　共通 */
.mkt-faq-accordion__icon{
	display: inline-block;
	line-height: var(--lh-xs);
	font-size: 1.5em;
}
/* Q.文字 */
.mkt-faq-accordion__icon.--q::before{
	content: 'Q';
	font-weight: var(--fw-xl);
}
/* A.文字 */
.mkt-faq-accordion__icon.--a::before{
	content: 'A';
	font-weight: var(--fw-lg);
	color: var(--c-main);
}

/*===============================
開閉アイコン
=================================*/
.mkt-faq-accordion__toggle{
	--toggle-size: 1em;
	--toggle-weight: 2px;
	--this-color: var(--c-main);
	position: relative;
	display: inline-block;
	align-self: center;
	width: var(--toggle-size);
	min-width: var(--toggle-size);
	aspect-ratio: 1;
}
.mkt-faq-accordion__toggle::before,
.mkt-faq-accordion__toggle::after{
	position: absolute;
	top: 50%;
	left: 50%;
	content: '';
	width: var(--toggle-size);
	height: var(--toggle-weight);
	background: var(--this-color);
	transition: var(--ani-t--normal) ease-out;
}
.mkt-faq-accordion__toggle::before{transform: translate(-50%, -50%) rotate(90deg);}
.mkt-faq-accordion__toggle::after{transform: translate(-50%, -50%) rotate(0deg);}

/* アニメーション */
.mkt-faq-accordion[open] .mkt-faq-accordion__toggle{
	--this-color: var(--c-dark);
}
.mkt-faq-accordion[open] .mkt-faq-accordion__toggle::before{transform: translate(-50%, -50%) rotate(180deg);}
.mkt-faq-accordion[open] .mkt-faq-accordion__toggle::after{
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* 既存のマーカー */
.mkt-faq-accordion__head {
	list-style: none;
}
.mkt-faq-accordion__head::-webkit-details-marker {
	display: none;
}

/*===============================================================================
まずはご相談ください
================================================================================*/
.mkt-soudan__inner {
	position: relative;
	display: flex;
	align-items: stretch;
	flex-direction: column;
}
@media (min-width: 960px){
	.mkt-soudan__inner {
		flex-direction: row-reverse;
	}
}
.mkt-soudan__bgc{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -2;
	width: 100vw;
	height: 100%;
	background: linear-gradient(90deg, rgba(36, 99, 167, 0.06) 0%, rgba(36, 99, 167, 0.3) 100%), #333333;
}
.mkt-soudan__decor-text{
	display: none;
}
@media (min-width: 960px){
	.mkt-soudan__decor-text{
		position: absolute;
		left: calc( 50% - 50vw );
		top: 0;
		z-index: -1;
		display: block;
		line-height: var(--lh-xs);
		font-family: var(--ff-m);
		font-weight: var(--fw-xl);
		font-size: 10rem;
		color: var(--c-light);
		opacity: 0.03;
		text-transform: uppercase;
		white-space: pre;
		writing-mode: sideways-rl;
		text-orientation: upright;
	}
}
/*===============================
* レイヤー：スライド
* =================================*/
.mkt-soudan__slide-layer {
	position: relative;
	flex: 1;
	overflow: hidden;
}
.mkt-soudan__swiper .swiper-wrapper {
	transition-timing-function: linear !important;
}
/* SP時（横方向）の設定 */
@media not all and (min-width: 960px){
	.mkt-soudan__slide-layer {
		--gap: .5rem;
		left: calc( 50% - 50vw );
		display: flex;
		flex-direction: column;
		gap: var(--gap);
		width: 100vw;
	}
	.mkt-soudan__swiper {
		width: 100%;
	}
}
/* PC時（縦方向）の設定 */
@media screen and (min-width: 960px) {
	.mkt-soudan__slide-layer {
		--gap: 1.75rem;
		right: calc( 50% - 50vw );
		display: flex;
		gap: var(--gap);
		min-height: 500px; /* ★Swiperの計算エラーを防ぐための最小高さ */
	}
	.mkt-soudan__swiper {
		position: absolute;
		top: 0;
		bottom: 0;
		flex: 1;
		height: 100%;
		/* 隣のコンテンツ層に合わせて高さを出す場合、絶対配置にする */
	}
	/* 絶対配置にしたため、それぞれの位置と幅を指定 */
	.mkt-soudan__swiper.--01 {
		left: 0;
		width: calc(50% - var(--gap) / 2);
	}
	.mkt-soudan__swiper.--02 {
		right: 0;
		width: calc(50% - var(--gap) / 2);
	}
	.swiper__thumbnail{
		width: 100%;
		height: 100%;
	}
	.mkt-soudan__swiper img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}
}

/*===============================
* レイヤー：コンテンツ
* =================================*/
.mkt-soudan__content-layer{
	flex: 1;
	padding-top: 4rem;
	padding-bottom: 1.75rem;
	color: var(--c-light);
	opacity: .9;
}
@media (min-width: 960px){
	.mkt-soudan__content-layer{
		max-width: calc(514px + clamp(0rem, -3.214rem + 8.57vw, 4.5rem) * 2);
		padding-left: clamp(0rem, -9rem + 15vw, 4.5rem);
		padding-right: clamp(0rem, -9rem + 15vw, 4.5rem);
	}
}
.mkt-soudan__head{
	margin-bottom: var(--g-sec--sm);
}
.mkt-soudan__title{
	display: flex;
	flex-direction: column;
}


/*===============================================================================
WEB集客について無料相談する
================================================================================*/
.mkt-contact__inner{
	position: relative;
	padding: var(--g-sec--md) 0;
}
.mkt-contact__inner::before{
	position: absolute;
	top: 0;
	left: calc( 50% - 50vw );
	z-index: -1;
	content: "";
	width: 100vw;
	height: 100%;
	background: var(--c-gray);
}
/*===============================
* head
* =================================*/
.mkt-contact__head{
	margin-bottom: var(--g-sec--sm);
	text-align: center;
}
/*===============================
* body
* =================================*/
.mkt-contact__body{
	max-width: 800px;
	margin-inline: auto;
}
.cf-table {
	width: 100%;
	margin-bottom: var(--g-sec--sm);
}
.wpcf7-text, .wpcf7-textarea, .wpcf7-select, .wpcf7-number, .wpcf7-date {
	border: 0;
	border-radius: 0;
	background-color: var(--c-light);
}
.cf-table tr:not(:last-of-type) {
	margin-bottom: 1.5rem;
}
.cf-table tr {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
/* 必須ラベル */
.cfLabel::before {
	border-radius: 0;
}
.cfLabel.--required::before {
	background: #B24545;
}
.cfLabel.--any::before {
	background: #888888;
}
/* 送信ボタン */
.cfBtn .contactBtn{
	--c-current: var(--c-dark);
	border-radius: 0;
	border: 1px solid var(--c-dark);
}
.contactBtn:is(:focus, :hover){
	background: var(--c-light);
	color: var(--c-dark);
}