@charset "utf-8";
/* CSS Document */
/* bootstrap icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/* font */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Noto+Sans+JP:wght@100..900&display=swap');

:root{
	--trans: transparent;
	--white: #FFFFFF;
	--white70: #FFFFFFB3;
	--white90: #ffffffe6;
	--dark: #222222;
	--base: #F8F9FA;
	--color1: #008DD4;
	--color2: #EDF1F4;
	--color3: #8FBCFF;
	--color4: #E2E7EC;
	--color5: #7f8c9d;
	--color6: #dda623;
	--color1_05: #008dd40d;
	--color3_05: #8fbcff0d;
	--color3_30: #8fbcff4d;
	--color3_50: #8fbcff82;
	--gray: #B3B7BC;
	--gray50: #B3B7BC80;
	--lightgray50: #E2E7EC80;
	--dark80: #222222CC;
	--red: #F45E5E;

	--marginRight: 2%;
	--marginBottom: 1%;
    --marginRightClear: 0;

	--listBottom: 1%;
    --oneColWidth: 100%;
    --twoColWidth: 49%;
    --threeColWidth: 32%;
    --fourColWidth: 23.5%;

	--footerWidth: 400px;
}

.txt_base{color: var(--base);}
.bg_base{background-color: var(--base);}

.grade-b{background:linear-gradient(to bottom,var(--color1), var(--color3));}
.grade-r{background:linear-gradient(to right,var(--color1), var(--color3));}
.grade-r_5per{background:linear-gradient(to right,var(--color1_05), var(--color3_05));}
.grade-135{background:linear-gradient(-135deg,var(--color1), var(--color3));}

.bg_color1_a{background-color:color-mix(in srgb, var(--color1) 75%, #fff)}
.bg_color5_gra{background:linear-gradient(to right,var(--color5), color-mix(in srgb, var(--color5) 35%, #a9d6ed));}
.bg_color6_gra{background:linear-gradient(to right,var(--color6), color-mix(in srgb, var(--color6) 35%, #fffd89));}

.shadow-color3_30,.hvr_shadow-color3_30:hover{box-shadow: 0 0 30px var(--color3_30);}
.shadow-color3_50,.hvr_shadow-color3_50:hover{box-shadow: 0 0 30px var(--color3_50);}
.shadow-color3,.hvr_shadow-color3:hover{box-shadow: 0 0 30px var(--color3);}
.shadow-color{box-shadow: 0 0.1rem 0.3rem var(--bs-focus-ring-color)}
.hvr-shadow-txt_color1:hover{box-shadow: 0 0 10px var(--color1);}
.hvr-shadow-color3:hover{box-shadow: 0 0 30px var(--color3);}
.hvr-shadow-gray:hover{box-shadow: 0 0 10px var(--gray);}

.txt_dark_40{color: color-mix(in srgb, var(--dark) 40%, transparent);}

/*-----------------------------------------
			　bootstrap拡張
-----------------------------------------*/
/* font-size */
.fs-7{font-size:calc(1rem - 2px)!important;}
.fs-8{font-size:calc(1rem - 4px)!important;}
.fs-9{font-size:calc(1rem - 6px)!important;}

/* letter-spacing */
.letter_0-h{letter-spacing: 0.5px;}

/* line-height */
.lineheight_1{line-height: 1;}
.lineheight_1-h{line-height: 1.5;}

/* position */
.end-5{right: 5%!important}

/* width */
.w-40{width: 40%;}
.w-45{width: 45%;}
.w-55{width: 55%;}
.w-60{width: 60%;}
.w-70{width: 70%;}

/* height */
.h-5{height: 5em!important;}
.h-6{height: 6em!important;}

/* padding */
.pt-10{padding-top: 6rem;}
.pb-10{padding-bottom: 6rem;}

/* margin */
.mt-6{margin-top: 5rem!important}
.mt-10{margin-top: 6rem!important;}

.mb-2h{margin-bottom: .75rem!important;}
.mb-6{margin-bottom: 5rem!important}
.mb-10{margin-bottom: 6rem!important;}

/* z-index */
.z-6{z-index: 6!important;}

/* cursor */
.cur-auto{cursor: auto;}
.cur-pointer{cursor: pointer;}

/* transition */
.transition-02{transition: 0.2s}
.transition-03{transition: 0.3s}
.transition-05{transition: 0.5s}

/* aspect-ratio */
.square_box{
	aspect-ratio: 1;
}
.con_img.square_box img{
	position: static;
	object-fit: cover;
    transform: none;
	aspect-ratio: 1;
}

.rectangle_box{
	aspect-ratio: 16 / 9;
}

/* flex order */
.order1{order: 1;}
.order2{order: 2;}
.order3{order: 3;}

/* hvr-opacity */
.hvr-opacity01:hover{opacity: 0.1;}
.hvr-opacity02:hover{opacity: 0.2;}
.hvr-opacity03:hover{opacity: 0.3;}
.hvr-opacity04:hover{opacity: 0.4;}
.hvr-opacity05:hover{opacity: 0.5;}
.hvr-opacity06:hover{opacity: 0.6;}
.hvr-opacity07:hover{opacity: 0.7;}
.hvr-opacity08:hover{opacity: 0.8;}
.hvr-opacity09:hover{opacity: 0.9;}
.hvr-opacity1:hover{opacity: 1;}

/* テキスト　改行なしの非表示 */
.over_txt{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 変更 */
.sticky-top,.sticky-md-top{z-index: 0;}


/* sm */
@media screen and (min-width: 576px){
	/* font-size */
	.fs-sm-5{font-size:calc(1.25rem)!important;}
	/* padding */
	.pt-sm-10{padding-top: 6rem!important;}
	/* margin */
	.mt-sm-10{margin-top: 6rem!important;}
	/* flex order */
	.order-sm-1{order: 1;}
	.order-sm-2{order: 2;}
	.order-sm-3{order: 3;}
}
/* md */
@media screen and (min-width: 768px){
	/* font-size */
	.fs-md-5{font-size:calc(1.25rem)!important;}
	/* padding */
	.pt-md-10{padding-top: 6rem!important;}
	/* margin */
	.mt-md-10{margin-top: 6rem!important;}
	/* flex order */
	.order-md-1{order: 1;}
	.order-md-2{order: 2;}
	.order-md-3{order: 3;}
}
/* lg */
@media screen and (min-width: 992px){
	/* flex order */
	.order-lg-1{order: 1;}
	.order-lg-2{order: 2;}
	.order-lg-3{order: 3;}
}
/* xl */
@media screen and (min-width: 1200px){
	
}
/*-----------------------------------------
				  全体
-----------------------------------------*/
html{
	font-size: 14px;
}
body{
	letter-spacing: 1px;
	line-height: 2;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-style: normal;
	word-wrap : break-word;
	overflow-wrap : break-word;
}
.font_en{font-family: "Figtree", sans-serif;}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
	padding: 50px;
}
a{
	color: currentColor;
	text-decoration: none;
}
ol, ul {
	list-style-type: none;
}

/* form */
::placeholder{
	color: var(--dark)!important;
	opacity: 0.2!important;
}
.form-control{
	transition: 0.2s;
	border: solid 1px transparent;
    color: var(--dark)!important;
}
.form-control:focus, .form-select:focus {
	border: solid 1px var(--gray);
    outline: 0;
    box-shadow: none
}
.form_box .required{
	padding: 2px 5px 4px;
	transform: translateY(-2px);
}

.radio_custom input[type="radio"] + label{
	padding-left: 30px!important;
	position: relative;
}
.radio_custom input[type="radio"] + label::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
    transition: 0.2s;
}
.radio_custom input[type="radio"] + label::before{
	border-radius: 50%;
	border: solid 1px var(--gray50);
}
.radio_custom input[type="radio"] + label::after{
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    background-color: var(--color1);
    transition: 0.2s;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    margin: auto;
    border-radius: 50%;
	opacity: 0;
}
.radio_custom input[type="radio"]:checked + label::before{
    border-color: var(--color1);
}
.radio_custom input[type="radio"]:checked + label::after{
	opacity: 1;
}
.check_custom input[type="checkbox"]{
	-webkit-appearance: none;
    -moz-appearance: none;
	height: 21px;
	outline: none;
	display: inline-block;
	vertical-align: top;
	position: relative;
	margin: 0;
	cursor: pointer;
	border: 1px solid var(--bc, var(--color4));
	background: var(--b, var(--white));
	transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}
.check_custom input[type="checkbox"]:after{
	content: "";
	display: block;
	left: 0;
	top: 0;
	position: absolute;
	transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
}
.check_custom input[type="checkbox"]:checked{
	--b: var(--color1);
	--bc: var(--color1);
	--d-o: .3s;
	--d-t: .6s;
	--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
}
.check_custom input[type="checkbox"]:disabled{
	--b: var(--base);
	cursor: not-allowed;
	opacity: 0.9;
}
.check_custom input[type="checkbox"]:disabled:checked{
	--b: var(--color2);
	--bc: var(--color4);
}
.check_custom input[type="checkbox"]:disabled + label{
	cursor: not-allowed;
}
.check_custom input[type="checkbox"]:hover:not(:checked):not(:disabled){
	--bc: var(--color1);
}
.check_custom input[type="checkbox"]:focus{
	box-shadow: 0 0 0 var(--color1_05);
}
.check_custom input[type="checkbox"]{
	width: 21px;
}
.check_custom input[type="checkbox"]:after{
	opacity: var(--o, 0);
}
.check_custom input[type="checkbox"]:checked{
	--o: 1;
}
.check_custom input[type="checkbox"] + label{
	font-size: 14px;
	line-height: 21px;
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
	margin-left: 4px;
}
.check_custom input[type="checkbox"]{
	border-radius: 7px;
}
.check_custom input[type="checkbox"]:after {
	width: 5px;
	height: 9px;
	border: 2px solid var(--white);
	border-top: 0;
	border-left: 0;
	left: 7px;
	top: 4px;
	transform: rotate(var(--r, 20deg));
}
.check_custom input[type="checkbox"]:checked {
	--r: 43deg;
}

/* 疑似要素 */
.x-line,.check_box li,#con2 .con_box:last-of-type,#page_title,.faq .cate_box .box_title1,.faq .cate_box .box_txt1{position: relative;}
.x-line:before,#main_img:before,.check_box li:before,
#con2 .con_box:last-of-type:before,#con6 .con_box:before,#page_title:before,
.faq .cate_box .box_title1:before,.faq .cate_box .box_txt1:before{
	content: "";
	display: block;
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
}
.x-line:before{
	width: 10px;
	height: 1px;
	top:50%;
	left: -15px;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
#main_img:before{
	background-image: url("../img/main_img.png");
	width: 28vw;
    height: 44vw;
	top: 45%;
    left: -215px;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
.check_box li:before{
	font-family: bootstrap-icons;
	content: "\F26A";
	font-weight: 400;
	line-height: 1;
	vertical-align: -.125em;
	top: 8px;
	left: -25px;
}
#con2 .con_box:last-of-type:before,
#con6 .con_box:before{
	background-image: url("../img/main_img3.png");
	width: 19vw;
    height: 29vw;
    top: 48%;
	right: 5%;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
}
#con6:before{
	content: "";
	background-color: var(--gray50);
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#page_title:before{
	background-image: url("../img/main_img2.png");
	width: clamp(200px,15vw,270px);
    height: clamp(315px,24vw,430px);
    top: 43%;
    right: 12%;
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	transform: translate(0,-50%);
	opacity: 0.7;
}
.faq .cate_box .box_title1:before{
	content: "Q.";
	color: var(--color1);
	left: -0.5rem;
}
.faq .cate_box .box_txt1:before{
	content: "A.";
	color: var(--color3);
	left: -0.25rem;
}
/* header */
#logo{
	width: 60%!important;
	max-width: 150px;
}
#header{
	transition: background-color 0.3s;
	z-index: 11;
}
#header.active{background-color: var(--white90);}
header .nav_wrap{
	padding-top: 100px;
	padding-bottom: 50px;
	transform: translateY(-120%);
	z-index: 10;
}
header.open .nav_wrap{animation: nav_open 0.2s forwards linear;}
header.close .nav_wrap{animation: nav_close 0.2s forwards linear;}
header .nav_wrap li{
	width: 180px;
	margin: 0 auto;
}
@media screen and (min-width: 992px){
	header .nav_wrap .nav_list{
		display: flex;
		align-items: center;
		gap: 0 56px;
		padding-left: 5%;
	}
	header .nav_wrap .nav_list li{width: auto; margin: 0;}
}
/* メニュー内の申込みボタン：ふわっと影が出る（影はFVのボタンと同じ薄さ） */
header .nav_btn{transition: box-shadow .45s ease;}
header .nav_btn:hover{box-shadow: 0 0 30px var(--color3_50);}
header .nav_wrap .nav_sub a{font-size: 1rem; font-weight: 400;}
header .btn_wrap{right: 1%;}
header .x-line:before{background-color: var(--dark);}
#header .dl_btn{
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
#header .dl_btn.is-hide{
	opacity: 0;
	visibility: hidden;
}
/* SP：画面下に追従する申込みボタン（ヘッダーのボタンは出さない） */
.sp_fixed_cta{
	position: fixed;
	left: 0;
	right: 0;
	width: min(280px, calc(100% - 32px));
	margin: 0 auto;
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.sp_fixed_cta.is-show{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
	.sp_fixed_cta{transition: opacity .2s linear, visibility .2s; transform: none;}
}
.sp_fixed_cta .btn{
	padding: 14px 20px;
	font-size: 16px;
	box-shadow: 0 8px 24px var(--color3_50);
}
@media screen and (max-width: 767px){
	#header .dl_btn{display: none!important;}
}
.hamburger .line{
	width: 30px;
	height: 2px;
	border-radius: 30px;
	display: block;
	margin: 7px auto;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.hamburger.is-active .line:nth-child(2){
	opacity: 0;
}

.hamburger.is-active .line:nth-child(1){
  -webkit-transform: translateY(9px) rotate(45deg);
  -ms-transform: translateY(9px) rotate(45deg);
  -o-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg);
}

.hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-10px) rotate(-45deg);
  -ms-transform: translateY(-10px) rotate(-45deg);
  -o-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);
}
/* footer */
#logo2{
	width: 80%!important;
	max-width: 150px;
}
.f_sitemap{width: var(--footerWidth);}
footer .x-line:before{background-color: var(--white);}

/* btn */
.btn{border: none;}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
	color: var(--white);
    background-color: var(--trans);
	background:linear-gradient(to right,var(--color1), var(--color3));
    border-color: var(--trans);
}
/* more_btn */
.more_btn a{
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	border: 0;
	vertical-align: middle;
	text-decoration: none;
	background: transparent;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
}
.more_btn a{
	width: 13rem;
	height: auto;
}
.more_btn .circle {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: 0;
	width: 3rem;
	height: 3rem;
	border-radius: 1.625rem;
}
.more_btn .circle i{
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.more_btn .circle i{
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	left: 0.625rem;
	width: 1.125rem;
	height: 0.125rem;
	background: none;
}
.more_btn .circle i::before {
	position: absolute;
	content: "";
	top: -0.45rem;
	right: 0;
	width: 1rem;
	height: 1rem;
	border-top: 0.15rem solid #fff;
	border-right: 0.15rem solid #fff;
	transform: rotate(45deg);
}
.more_btn .button-text {
	transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
	position: absolute;
	top: -2px;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.75rem 0 1.5rem;
	margin: 0 2.5rem 0 2.5rem;
	color: #282936;
	font-weight: 700;
	line-height: 1.6;
	z-index: 1;
	text-align: center;
	text-transform: uppercase;
}
.more_btn a:hover .circle {
	width: 100%;
}
.more_btn a:hover .circle i{
	background: #fff;
	transform: translate(1rem, 0);
}
.more_btn a:hover .button-text {
	color: var(--white);
}

/* icon */
.bi-hexagon-fill:before{transform: rotate(30deg);}

/* svg */
.st0{fill: currentColor;}
/*-----------------------------------------
				 animation
-----------------------------------------*/
@keyframes nav_open{
	0%{
		transform: translateY(-120%);
	}
	100%{
		transform: translateY(0);
	}
}
@keyframes nav_close{
	0%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(-120%);
	}
}
@keyframes close_i{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(-180deg);
	}
}
@keyframes open_i{
	0%{
		transform: rotate(-180deg);
	}
	100%{
		transform: rotate(0deg);
	}
}
.fadein_up{
	opacity : 0;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	transform: translateY(50px);
	transition:transform 1.5s ease,opacity 2s ease; 
}
.fadein_up.scrollin{
	opacity : 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}
/*-----------------------------------------
				TOP
-----------------------------------------*/
.check_box li:before{color: var(--color3);}
.offer .check_box li:before{color: var(--white);}


/* ファーストビュー
   左＝キャッチ＋CTA／右＝管理画面2枚＋サイテキくん の2カラム。
   右の2枚目（shot2）とサイテキくんは1枚目に重ねて奥行きを出す */
#main_img{min-height: 0;}
#main_img .container-lg{
	max-width: 1280px;
	padding: 130px 50px 170px;
}
#main_img .catch h2{
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	line-height: 1.45;
}
#main_img .catch_lead{line-height: 1.8;}
#main_img .fv_badge{width: 170px;}
/* 無料で試してみるボタン：Bootstrapのユーティリティ（fs-6 / p-3 px-5）より大きく */
#main_img .fv_cta .btn{font-size: 1.45rem!important; padding: 1.15rem 3.5rem!important;}
#main_img .fv_cta{margin-top: 3rem!important;}
/* PC：FVの文字を全体的に大きく */
@media screen and (min-width: 992px){
	#main_img .catch h2{font-size: clamp(2.25rem, 3vw, 2.9rem);}
	#main_img .catch h2 .fs-5{font-size: 1.4rem!important;}
	#main_img .catch_lead{font-size: 1.15rem;}
}

/* 右：管理画面 */
#main_img .fv_visual{padding-bottom: 60px;}
#main_img .fv_shot{
	border: 5px solid var(--white);
	box-shadow: 0 18px 50px var(--color3_50);
	background-color: var(--white);
}
#main_img .fv_shot2{
	position: absolute;
	right: -4%;
	bottom: 0;
	width: 58%;
	z-index: 2;
}
/* ファーストビュー：サイテキくん
   管理画面の左下に重ねて配置。背景の光・回るリング・吹き出し・足元の影で主役感を出す */
#main_img .catch_chara{
	--chara-w: 230px;
	position: absolute;
	left: -12%;
	bottom: -70px;
	width: var(--chara-w);
	z-index: 3;
	pointer-events: none;
}
#main_img .chara_body{
	position: relative;
	width: 100%;
	z-index: 1;
}
#main_img .chara_body img{
	display: block;
	animation: chara_float 4s ease-in-out infinite;
}
/* 足元の影（キャラが浮くと小さく薄くなり、宙に浮いて見える） */
#main_img .chara_body:after{
	content: "";
	position: absolute;
	left: 24%;
	right: 24%;
	bottom: -8%;
	height: 9%;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(20, 50, 100, 0.2) 0%, rgba(20, 50, 100, 0.06) 45%, transparent 70%);
	z-index: -1;
	animation: chara_shadow 4s ease-in-out infinite;
}
/* 吹き出し（サイテキくんの右上に離して置き、しっぽで頭を指す）
   右側は管理画面の上なので、どの画面幅でも左のキャッチ文と重ならない */
#main_img .chara_bubble{
	position: absolute;
	left: 66%;
	bottom: 86%;
	z-index: 2;
	padding: .7em 1.1em;
	font-size: 14px;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--color1);
	background: var(--white);
	border-radius: 18px;
	box-shadow: 0 6px 20px var(--color3_50);
	animation: chara_bubble 4s ease-in-out infinite;
}
#main_img .chara_bubble:after{
	content: "";
	position: absolute;
	left: 16px;
	bottom: -11px;
	border-style: solid;
	border-width: 12px 14px 0 0;
	border-color: var(--white) transparent transparent transparent;
}
@keyframes chara_float{
	0%, 100%{transform: translateY(0);}
	50%{transform: translateY(-12px);}
}
@keyframes chara_shadow{
	0%, 100%{transform: scaleX(1); opacity: 1;}
	50%{transform: scaleX(.75); opacity: .55;}
}
@keyframes chara_bubble{
	0%, 100%{transform: translateY(0);}
	50%{transform: translateY(-5px);}
}
@media (prefers-reduced-motion: reduce){
	#main_img .chara_body img,
	#main_img .chara_body:after,
	#main_img .chara_bubble{animation: none;}
}
/* 〜1399px：左右の間隔を詰める */
@media screen and (max-width: 1399px){
	#main_img .container-lg{padding: 130px 40px 140px;}
	#main_img .catch_chara{--chara-w: 200px; left: -6%;}
	#main_img .chara_bubble{font-size: 13px;}
}
/* 〜991px：1カラム。キャッチの下に管理画面が回り込む */
@media screen and (max-width: 991px){
	#main_img{min-height: 0;}
	#main_img .container-lg{padding: 140px 40px 70px;}
	#main_img .fv_visual{
		max-width: 620px;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 40px;
	}
	#main_img .catch_chara{--chara-w: 180px; left: -4%; bottom: -20px;}
}
/* SP：キャッチ文の入れ物を display:contents で外し、要素を order で並べ替える */
@media screen and (max-width: 767px){
	#main_img .catch_wrap,
	#main_img .catch{display: contents;}
	#main_img .catch h2{order: 1;}
	#main_img .catch_lead{order: 2;}
	#main_img .fv_badge{order: 3; margin-top: 20px!important;}
	/* ボタンを開いてすぐ目に入るよう、スクショより先に出す */
	#main_img .fv_cta{order: 4; margin-top: 28px!important;}
	#main_img .fv_visual{order: 5; width: 100%; margin-top: 40px!important;}
}
/* SP */
@media screen and (max-width: 575px){
	#main_img .container-lg{padding: 100px 20px 140px;}
	#main_img .fv_cta{text-align: center;}
	#main_img .fv_badge{width: 140px; margin-left: auto; margin-right: auto;}
	#main_img .fv_shot2{width: 62%; right: -2%;}
	#main_img .catch_chara{--chara-w: 130px; left: -6px; bottom: -14px;}
	#main_img .chara_bubble{
		font-size: 11px;
		padding: .6em .9em;
		border-radius: 14px;
	}
	#main_img .chara_bubble:after{left: 12px; bottom: -8px; border-width: 9px 10px 0 0;}
}

#con1 .container-lg{padding-bottom: 100px;}
#con1 .con_img{
	margin-top: -8%;
	margin-right: -8%;
}
#con1 .con_item{width: 53%;}

#con2 .con_box:first-of-type .con_item1{margin-top: -100px;}
#con2 .con_box:first-of-type .con_item2{width: 55%;}
@media screen and (min-width: 992px){
	#con2 .con_box:first-of-type{margin-top: 64px;}
}
#con2 .con_img1{height: 100%;}
#con2 .con_img2{
	margin-left: -75%;
    margin-top: 20%;
}

#con3 .cate_box{
	width: var(--threeColWidth);
	margin-right: var(--marginRight);
}
#con3 .cate_box:last-of-type{
	margin-right: var(--marginRightClear);
}
#con3 .cate_box .box_img1{width: 70%;}
@media screen and (min-width: 768px) and (max-width: 991px){
	#con3 .cate_box{padding: 1.75rem 1rem!important;}
	#con3 .cate_box .box_title2{font-size: 1.1rem;}
}
#con4{
	background-image: url('../img/bg.jpg');
	background-size: cover;
	background-repeat:no-repeat;
}
/* #con4 機能紹介：タブ切り替え（アド.com の「広告データベース・AIツール」型）
   タブを押すと下のパネル（左：説明／右：動画・画像）が切り替わる。動作は design.js */
#con4 .container-xl{padding-top: 100px; padding-bottom: 100px;}
#con4 .con4_title .con_txt{max-width: 820px;}

/* タブ */
#con4 .feature_tabs_wrap{margin: 48px 0 40px;}
#con4 .feature_tabs{
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 8px;
	padding: 0;
}
#con4 .feature_tab{
	position: relative;
	min-width: 92px;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--dark);
	background-color: var(--white);
	border: 1px solid #DCE6EF;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 141, 212, 0.08);
	transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
	cursor: pointer;
}
#con4 .feature_tab:hover{
	color: var(--color1);
	border-color: var(--color3);
	transform: translateY(-2px);
}
#con4 .feature_tab:focus-visible{outline: 3px solid var(--color3_50); outline-offset: 2px;}
#con4 .feature_tab.is-active{
	color: var(--white);
	background: linear-gradient(to right, var(--color1), var(--color3));
	/* 透明な枠線の下までグラデーションを敷く（既定だと枠線部分にグラデーションの端が繰り返され、右端に濃い線が出る） */
	background-origin: border-box;
	border-color: transparent;
	box-shadow: 0 8px 20px var(--color3_50);
	transform: none;
}

/* パネル */
#con4 .feature_panels{
	padding: 48px;
	background-color: var(--white90);
	border: 1px solid var(--white);
	border-radius: 20px;
	box-shadow: 0 20px 60px var(--color3_30);
}
#con4 .feature_panel{
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 48px;
	align-items: center;
}
#con4 .feature_panel[hidden]{display: none;}
#con4 .feature_panel.is-active{animation: feature_fade .45s ease;}
@keyframes feature_fade{
	from{opacity: 0; transform: translateY(12px);}
	to{opacity: 1; transform: translateY(0);}
}
#con4 .panel_en{letter-spacing: 0.08em; font-size: 14px;}
#con4 .panel_en:before{
	content: "";
	display: inline-block;
	width: 24px;
	height: 2px;
	margin-right: 10px;
	vertical-align: middle;
	background-color: var(--color1);
}
#con4 .panel_title{font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.4;}
#con4 .panel_txt .con_txt{line-height: 2;}

/* 動画：素材ごとに縦横比が異なる（1.53〜1.80）ため 16:9 の枠に統一し、はみ出しは中央でトリミング */
#con4 .video_box{
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	/* 読み込み中に枠が黒く抜けるのを防ぐ下地 */
	background-color: var(--lightgray50);
	border: 5px solid var(--white);
	border-radius: 12px;
	box-shadow: 0 14px 40px var(--color3_50);
}
#con4 .video_box video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 全体像（01〜04 ＋ 図）：本文の下・タブの上に常に表示 */
#con4 .feature_intro{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	margin-top: 56px;
}
#con4 .benefit_list{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
#con4 .benefit_item{
	padding: 20px;
	border: 1px solid #E3EDF6;
	box-shadow: 0 4px 16px rgba(0, 141, 212, 0.06);
}
#con4 .benefit_item .num{font-size: 13px; letter-spacing: 0.1em;}
#con4 .benefit_item h5{font-size: 16px; line-height: 1.5;}
#con4 .intro_img{max-width: 460px;}

/* タブレット */
@media screen and (max-width: 991px){
	#con4 .container-xl{padding-top: 80px; padding-bottom: 80px;}
	#con4 .feature_panels{padding: 32px;}
	#con4 .feature_panel,
	#con4 .feature_intro{grid-template-columns: 1fr; gap: 28px;}
	#con4 .feature_intro{margin-top: 40px;}
	/* 1カラム時は画像・動画を先に見せる */
	#con4 .panel_media{order: -1;}
	#con4 .intro_img{max-width: 380px;}
}
/* SP：本文は左揃え、タブは折り返して全部表示 */
@media screen and (max-width: 767px){
	#con4 .container-xl{padding: 64px 20px;}
	#con4 .con4_title .con_txt{text-align: left;}
	#con4 .feature_intro{margin-top: 32px; gap: 20px;}
	/* タブは横スクロール（画面端まで広げ、続きがある側をフェード＋下に細いスクロールバー） */
	#con4 .feature_tabs_wrap{
		position: relative;
		margin: 40px -20px 8px;
		padding: 4px 20px 14px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: var(--color3) #E3EDF6;
	}
	#con4 .feature_tabs_wrap::-webkit-scrollbar{height: 4px;}
	#con4 .feature_tabs_wrap::-webkit-scrollbar-track{background: #E3EDF6; border-radius: 4px; margin: 0 20px;}
	#con4 .feature_tabs_wrap::-webkit-scrollbar-thumb{background: var(--color3); border-radius: 4px;}
	#con4 .feature_tabs_wrap.is-more-right{-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);}
	#con4 .feature_tabs_wrap.is-more-left{-webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px);}
	#con4 .feature_tabs_wrap.is-more-left.is-more-right{-webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);}
	#con4 .feature_tabs{flex-wrap: nowrap; gap: 8px; justify-content: flex-start; width: max-content;}
	#con4 .feature_tab{min-width: 0; padding: 10px 14px; font-size: 13px; box-shadow: 0 2px 8px rgba(0, 141, 212, 0.08);}
	#con4 .feature_tab.is-active{box-shadow: 0 4px 10px var(--color3_50);}
	#con4 .feature_panels{padding: 20px; border-radius: 16px;}
	#con4 .feature_panel{gap: 20px;}
	#con4 .benefit_item{padding: 16px;}
}
@media screen and (max-width: 575px){
	#con4 .benefit_list{grid-template-columns: 1fr; gap: 10px;}
}
/* 動きを抑える設定の環境ではアニメーションなし */
@media (prefers-reduced-motion: reduce){
	#con4 .feature_panel.is-active{animation: none;}
	#con4 .feature_tab{transition: none;}
}
#con6 .con_box{
	margin-top: -8%;
}
/* 「まずは無料でお試しください」CTA（#con2・#con6 共通）
   PC：サイテキくん｜文言｜ボタン の3列。タブレット以下は縦積みで中央寄せ */
.cta_box{
	padding: 48px 56px;
	box-shadow: 0 20px 50px var(--color3_50);
}
.cta_box .cta_inner{gap: 40px;}
.cta_box .cta_chara{width: 180px;}
.cta_box .cta_chara img{filter: drop-shadow(0 10px 20px rgba(0, 60, 120, 0.25));}
.cta_box .cta_body{flex: 1 1 auto; min-width: 0;}
.cta_box .cta_badge{letter-spacing: 0.06em; box-shadow: 0 4px 12px rgba(0, 60, 120, 0.15);}
.cta_box .con_title{font-size: clamp(1.75rem, 2.6vw, 2.2rem); line-height: 1.4;}
.cta_box .con_txt{font-size: 1.15rem; line-height: 1.8;}
.cta_box .check_box li{font-size: 1.1rem;}
.cta_box .check_box{padding-left: 1.75rem;}
.cta_box .check_box li + li{margin-top: 4px;}
.cta_box .cta_action{width: 300px;}
.cta_box .cta_btn{
	padding: 16px 24px;
	font-size: 1.25rem;
	/* ホバー時に白い枠線を出すため、通常時も同じ太さの白枠を付けておく（ホバーでボタンの大きさが変わらないように） */
	border: 2px solid var(--white)!important;
	box-shadow: 0 10px 24px rgba(0, 60, 120, 0.25);
	/* ふわっと色が変わるよう、少しゆっくり＆なめらかに */
	transition: color .45s ease, background-color .45s ease!important;
}
.cta_box .cta_btn i{margin-left: .8rem!important; transition: transform .45s ease;}
/* ホバー時は文字と背景の色を反転（青地に白文字）＋白い枠線 */
.cta_box .cta_btn:hover,
.cta_box .cta_btn:focus-visible,
.cta_box .cta_btn:active{
	color: var(--white)!important;
	background: var(--color1)!important;
}
.cta_box .cta_btn:hover i{transform: translateX(4px);}
/* 六角形の飾りはボタンと重ならないよう左下へ */
#con2 .cta_box:before,
#con6 .cta_box:before{
	right: auto;
	left: -3%;
	top: auto;
	bottom: -45%;
	transform: none;
	opacity: 0.6;
}
/* 1199px以下は縦積み（文字を大きくしたため、横3列だと本文の列が狭くなり1文字だけの改行が出る） */
@media screen and (max-width: 1199px){
	.cta_box{padding: 44px 40px;}
	.cta_box .cta_inner{gap: 20px;}
	.cta_box .cta_chara{width: 150px;}
	.cta_box .cta_action{width: 100%; max-width: 380px;}
}
@media screen and (max-width: 991px){
	.cta_box{padding: 40px 32px;}
	.cta_box .cta_chara{width: 140px;}
}
@media screen and (max-width: 575px){
	.cta_box{padding: 36px 20px;}
	.cta_box .cta_chara{width: 120px;}
	.cta_box .cta_btn{font-size: 1.1rem;}
	.cta_box .con_txt{font-size: 1rem;}
	.cta_box .check_box li{font-size: 1rem;}
}
/*-----------------------------------------
				下層
-----------------------------------------*/
/* page_title / pan_list */
#page_title .page_desc{line-height: 1.2;}
#pan_list .container-lg{padding: 10px 50px;}

/* タブ切り替え */
.cate_list{padding-left: 0;}
.cate_list li{
	width: var(--threeColWidth);
	margin-right: var(--marginRight);
	margin-bottom: var(--listBottom);
}
.cate_list li:nth-of-type(3n){
	margin-right: var(--marginRightClear);
}
.cate_list li a{width: 100%;}
.tab_content{display: none;}

/* プラン：内容図（旧 plan1〜3.png をHTML/CSS化）
   丸のサイズ --pd-c は図の横幅（cqw）から決め、文字・アイコン・線もこれに比例させる */
.plan_diagram{
	container-type: inline-size;
	--pd-c: min(150px, 24cqw);
	--pd-pad: calc(var(--pd-c) * .1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--pd-c) * .2);
	margin: 0;
}
.plan_diagram .pd_row{
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.plan_diagram .pd_group{
	background-color: var(--color2);
	border-radius: calc(var(--pd-c) * .12);
	overflow: hidden;
}
.plan_diagram .pd_label{
	background-color: var(--dark);
	color: var(--white);
	font-size: max(11px, calc(var(--pd-c) * .12));
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 1px;
	text-align: center;
	margin: 0;
}
.plan_diagram .pd_items{
	display: flex;
	align-items: center;
	padding: var(--pd-pad);
}
/* グループ外の丸・記号は、グループ内の丸と高さを揃えるため下に同じ余白をとる */
.plan_diagram .pd_group ~ .pd_op,
.plan_diagram .pd_group ~ .pd_item{margin-bottom: var(--pd-pad);}
.plan_diagram .pd_item{
	flex: 0 0 auto;
	width: var(--pd-c);
	height: var(--pd-c);
	border: max(2px, calc(var(--pd-c) * .02)) solid var(--dark);
	border-radius: 50%;
	background-color: var(--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--pd-c) * .05);
}
.plan_diagram .pd_name{
	font-size: calc(var(--pd-c) * .14);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-align: center;
	margin: 0;
}
.plan_diagram .pd_item .bi{
	font-size: calc(var(--pd-c) * .3);
	line-height: 1;
}
.plan_diagram .pd_op{
	flex: 0 0 auto;
	width: calc(var(--pd-c) * .4);
	height: var(--pd-c);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gray);
	font-family: "Figtree", sans-serif;
	font-size: calc(var(--pd-c) * .18);
	line-height: 1;
	letter-spacing: 0;
}

/* プラン：比較表（旧 plan_table.png / plan_table2.png をHTML/CSS化） */
.plan_table table{
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	text-align: center;
	font-weight: 700;
	line-height: 1.5;
}
.plan_table th,
.plan_table td{
	border: 1px solid var(--gray);
	padding: 1.5rem .75rem;
	vertical-align: middle;
}
.plan_table td{background-color: var(--white);}
.plan_table th{background-color: var(--color2);}
.plan_table thead th{font-size: 1.1rem;}
.plan_table tbody th{width: 30%;}
.plan_table .pt_blank{
	background-color: transparent;
	border-top: none;
	border-left: none;
}
.plan_table .pt_sub{
	display: block;
	font-size: .8em;
}
.plan_table .pt_note{
	display: block;
	color: var(--gray);
	font-size: .85em;
}
/* 狭い幅で折り返すときに語の途中で切れないよう、まとまりごとに改行させない */
.plan_table .pt_nw{
	display: inline-block;
	white-space: nowrap;
}
@media screen and (max-width: 575px){
	/* SPは列幅を中身に合わせて自動配分する */
	.plan_table table{
		table-layout: auto;
		font-size: 13px;
		letter-spacing: 0;
	}
	.plan_table tbody th{width: auto;}
	.plan_table thead th{font-size: 13px;}
	.plan_table th,
	.plan_table td{padding: 1rem .35rem;}
}

.sub .cate_list li{width: var(--oneColWidth);}

/* 機能紹介 */
.feature .cate_box.odd > div{order: 2;}
.feature .cate_box.odd > figure{order: 1;}

.update .cate_box{
	width: var(--threeColWidth);
	margin-right: var(--marginRight);
}
.update .cate_box.col2{width: var(--twoColWidth);}
.update .cate_box:nth-of-type(3n){
	margin-right: var(--marginRightClear);
}
.update .cate_box .box_title1{
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}

/* 課題から探す */
.solution .cate_item2{padding-top: 7%!important;}
.solution .cate_item2 svg{
	width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.solution .cate_item2 .con_item2{
	margin-left: -75%;
    margin-top: 20%;
}
.solution .cate_item3 .cate_box{
	width: var(--twoColWidth);
	margin-right: var(--marginRight);
}
.solution .cate_item3 .cate_box:nth-of-type(2n){
	margin-right: var(--marginRightClear);
}
.solution .cate_item4 .cate_box:nth-of-type(n+2){
    margin-top: -8%;
}
/* 活用シーン */
.industry .cate_item3 .cate_box{
	width: var(--threeColWidth);
	margin-right: var(--marginRight);
}
.industry .cate_item3 .cate_box:last-of-type{
	margin-right: var(--marginRightClear);
}
.industry .arrow{
	width: 300px;
	margin-top: -3%;
}

/* お役立ち資料 / お役立ちコラム / セミナー・イベント */
:is(.whitepaper,.column,.event,.case) .cate_box{
	width: var(--threeColWidth);
	margin-right: var(--marginRight);
}
:is(.whitepaper,.column,.event,.case) .cate_box:nth-of-type(3n){
	margin-right: var(--marginRightClear);
}
.sort_box{}
.sort_box :is(.radio_custom,.check_custom) input + label{
	padding: 3px 15px!important;
	border: solid 1px;
	border-radius: var(--bs-border-radius-lg);
	transition: 0.2s;
}

.sort_box .radio_custom input + label::before,
.sort_box .radio_custom input + label::after{display: none;}

.sort_box .category .radio_custom input + label{
	color: var(--color1);
	border-color: var(--color1);
}
.sort_box .category .radio_custom input:checked + label{
	background-color: var(--color1);
	color: var(--white);
}
.sort_box .tag .check_custom input + label:not([for="alltag"]){padding-left: 8px !important;}
.sort_box .tag .check_custom input + label{
	color: var(--gray);
	border-color: var(--gray);
}
.sort_box .tag .check_custom input:checked + label{
	background-color: var(--gray);
	color: var(--white);
}
:is(.column_wrap,.event_wrap,.case_wrap) .is-hide{display: none;}

/*料金*/
.price #main_content .con_box:first-of-type > p{width: 45%;}
.price #main_content .con_box:last-of-type .con_title{margin-bottom: -13px;}
.price .hexagon_box{width: 25%;}
.hexagon{
	--hex_w : 120px;
	width: 100%;
	max-width: var(--hex_w);
	background: var(--white);
	border-radius: 5px;
	position: relative;
}
.hexagon::before,
.hexagon::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
 	left: 0;
	background: var(--white);
	border-radius: 5px;
	z-index: 0;
}
.hexagon::before {
	transform: rotate(60deg);
}
.hexagon::after {
	transform: rotate(-60deg);
}
.hexagon .con_item{width: 165%;}
.hexagon .con_txt{line-height: 1.5;}
.price #form .container-lg{max-width: 900px;}
/* よくある質問 */
.faq .cate_box.close .box_item1 > i:before{animation: open_i 0.2s forwards linear;}
.faq .cate_box.open .box_item1 > i:before{animation: close_i 0.2s forwards linear;}

/* 無料アカウント作成 */
/* 背景は画面いっぱい、中身は最大1760pxで中央寄せ（超ワイド画面で左右に離れすぎないように） */
.signup_body{
	background:
		radial-gradient(900px 600px at 8% 12%, #CFE9FA 0%, transparent 60%),
		radial-gradient(700px 500px at 32% 92%, #D6E2FF 0%, transparent 62%),
		linear-gradient(135deg, #EAF5FD 0%, var(--base) 45%, #EDF1FB 100%);
	background-attachment: fixed;
}
.signup{
	min-height: 100vh;
	max-width: 1760px;
	margin: 0 auto;
}
/* 左：サービス訴求。
   ロゴ（左上）と戻るボタン（左下）は角に固定し、文字＋スクショのまとまりを画面の上下中央に置く。
   右のフォームも画面の上下中央にあるため、スクショとフォームの中央がそろう。
   スクショはフォームの下に潜り込ませるため、はみ出しを許可してフォームより下の重なり順にする */
.signup .signup_side{
	--side-x: 56px;
	flex: 1;
	min-width: 0;
	position: sticky;
	top: 0;
	z-index: 1;
	height: 100vh;
	/* 上下を同じだけ空けて、中央の位置がずれないようにする */
	padding: 170px 0 170px var(--side-x);
}
/* 上の段：ロゴ＋見出し（左上に固定） */
.signup .side_top{
	position: absolute;
	top: 40px;
	left: var(--side-x);
	right: 24px;
	gap: 48px;
	z-index: 2;
}
.signup .signup_side #logo{width: 150px; margin-top: 2px!important;}
.signup .side_head{min-width: 0;}
.signup .side_back{
	position: absolute;
	bottom: 40px;
	left: var(--side-x);
}
/* 3段のグリッド（上の余白｜機能リスト＋スクショ｜下の余白）。真ん中の段がちょうど画面の上下中央に来る。
   見出しは上の段の下端に寄せ、機能リスト＋スクショのすぐ上に置く */
.signup .side_body{
	height: 100%;
	display: grid;
	grid-template-rows: 1fr auto 1fr;
}
.signup .side_row{grid-row: 2; gap: 24px;}
.signup .side_badge{
	padding: 8px 18px;
	font-size: 15px;
	letter-spacing: 0.04em;
	background: linear-gradient(to right, var(--color1), var(--color3));
	box-shadow: 0 6px 16px var(--color3_50);
}
.signup .side_lead{
	font-size: clamp(22px, 1.75vw, 30px);
	line-height: 1.35;
	letter-spacing: 0.02em;
}
.signup .side_feature{
	/* 広い画面では機能リストも大きくして、スクショとの間が空きすぎないようにする */
	flex: 0 0 clamp(300px, 21vw, 400px);
	position: relative;
	z-index: 1;
	display: grid;
	gap: 8px;
}
.signup .side_feature li{
	padding: 10px 14px;
	border: 1px solid #DCEAF7;
	box-shadow: 0 4px 14px rgba(0, 141, 212, 0.08);
}
.signup .side_feature .icon{
	width: 44px;
	height: 44px;
	font-size: 20px;
	background: linear-gradient(135deg, var(--color1), var(--color3));
}
.signup .side_feature strong{font-size: clamp(16px, 1.15vw, 20px); line-height: 1.4;}
.signup .side_feature li .fs-8{font-size: clamp(12px, 0.8vw, 14px)!important;}
.signup .side_img{
	flex: 1 1 auto;
	min-width: 0;
	/* フォームカードの下に潜り込ませる（大きく見せるため潜り込み量を多めに） */
	margin-right: -260px;
	/* 広い画面ではフォームとの間いっぱいまで大きくする。
	   ただし縦が足りずに上の段へあふれないよう、画面の高さから決まる上限（16:9）を付ける */
	max-width: calc((100vh - 380px) * 16 / 9);
	/* 上限に達しても右寄せにして、常にフォームの下に潜り込ませる */
	margin-left: auto;
	border-radius: 12px;
	border: 5px solid var(--white);
	overflow: hidden;
	box-shadow: 0 16px 44px rgba(0, 141, 212, 0.2);
}
.signup .back_btn{white-space: nowrap;}

/* 右：フォームカード（左に寄せて幅を広げ、管理画面の上に重ねる） */
.signup .signup_main{
	position: relative;
	z-index: 2;
	width: 640px;
	flex-shrink: 0;
	padding: 24px 56px 24px 0;
}
.signup #logo_sp{width: 140px;}
.signup .signup_card{
	max-width: 584px;
	padding: 44px 48px;
	border: 1px solid var(--white);
	box-shadow: 0 24px 60px rgba(0, 90, 160, 0.18);
}
.signup .signup_card h2{font-size: 2rem!important;}
.signup .signup_sp_head{max-width: 600px; margin-bottom: 24px;}
.signup .sp_lead{font-size: clamp(22px, 5.4vw, 30px); line-height: 1.45; letter-spacing: 0.02em;}
.signup .sp_point li{font-size: 15px; font-weight: 700; line-height: 1.6;}
.signup .sp_point li + li{margin-top: 6px;}

/* 入力欄：Bootstrap と外部フォームCSSの指定を上書きして見た目をそろえる */
.signup .form_input_label{
	display: block;
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}
.signup .required_tag{padding: 3px 6px;}
.signup .signup_card :is(input[type="text"], input[type="email"], input[type="tel"], select){
	width: 100%;
	height: 48px;
	padding: 0 14px;
	font-size: 15px;
	color: var(--dark);
	background-color: var(--white) !important;
	border: 1px solid #D5DEE7 !important;
	border-radius: 8px;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
	appearance: none;
	-webkit-appearance: none;
}
.signup .signup_card :is(input[type="text"], input[type="email"], input[type="tel"], select):focus{
	border-color: var(--color1) !important;
	box-shadow: 0 0 0 3px var(--color3_30);
	outline: 0;
}
/* セレクトの矢印（appearance:none で消えるぶんを描き直す） */
.signup .signup_card .select_frame{position: relative;}
.signup .signup_card .select_frame:after{
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--color5);
	border-bottom: 2px solid var(--color5);
	transform: rotate(45deg);
	pointer-events: none;
}
.signup .signup_card select{padding-right: 36px; cursor: pointer;}
.signup .form_input_submit input[type="submit"]{border: none; font-size: 1.05rem!important;}
.signup .form_note{line-height: 1.7;}
.signup .form_note a{text-decoration: underline;}
.signup .signup_copy{opacity: 0.7; margin-top: 12px!important;}

/* 幅が狭くなるほど左カラムの要素を縮める */
@media screen and (max-width: 1399px){
	.signup .signup_side{--side-x: 40px;}
	.signup .side_feature{flex-basis: 290px;}
	.signup .side_feature strong{font-size: 16px;}
	.signup .side_img{margin-right: -220px;}
	.signup .signup_main{width: 560px; padding-right: 40px;}
	.signup .signup_card{padding: 40px;}
}
@media screen and (max-width: 1199px){
	.signup .signup_side{--side-x: 32px;}
	.signup .side_row{gap: 16px;}
	.signup .side_feature{flex-basis: 240px;}
	/* 列が狭く補足文が3行に折り返して縦に伸びるため、機能名だけにする */
	.signup .side_feature li .fs-8{display: none!important;}
	/* ロゴの横では見出しの幅が足りないため、ロゴの下に回す */
	.signup .side_top{flex-direction: column; align-items: flex-start!important; gap: 16px;}
	.signup .signup_side{padding-top: 220px; padding-bottom: 220px;}
	.signup .side_badge{font-size: 13px; padding: 6px 14px;}
	.signup .side_feature li{padding: 10px 12px;}
	.signup .side_feature .icon{width: 36px; height: 36px; font-size: 17px;}
	.signup .side_img{margin-right: -170px;}
	.signup .signup_main{width: 490px; padding: 32px 24px 32px 0;}
	.signup .signup_card{padding: 32px 28px;}
	.signup .signup_card h2{font-size: 1.75rem!important;}
}
@media screen and (min-width: 992px) and (max-height: 840px){
	.signup .signup_side{padding-top: 150px; padding-bottom: 150px;}
	.signup .side_top{top: 28px;}
	.signup .side_back{bottom: 28px;}
	.signup .side_feature{gap: 8px;}
	.signup .side_feature li{padding: 8px 14px;}
	/* フォームも詰めて画面内に収め、スクショと中央をそろえる */
	.signup .signup_main{padding-top: 16px; padding-bottom: 16px;}
	.signup .signup_card{padding: 24px 40px;}
	.signup .signup_card h2{font-size: 1.6rem!important;}
	.signup .signup_card .form_box{margin-bottom: 10px!important;}
	.signup .signup_card :is(input[type="text"], input[type="email"], input[type="tel"], select){height: 40px;}
	.signup .form_input_submit{margin-top: 16px!important;}
	.signup .signup_copy{margin-top: 12px!important;}
}
/* 横に広く縦が低い画面（ブラウザ最大化のノートPC等）はスクショが大きくなってタイトルに近づくため、
   真ん中の段を少し下げてタイトルの下に余白をとる */
@media screen and (min-width: 1600px) and (max-height: 920px){
	.signup .side_body{padding-top: 30px;}
}
/* タブレット以下は1カラム。左カラムは非表示（d-none d-lg-flex）になる */
@media screen and (max-width: 991px){
	.signup .signup_main{width: 100%; padding: 40px 24px; justify-content: flex-start!important;}
	.signup .signup_card{max-width: 600px;}
}
@media screen and (max-width: 575px){
	.signup .signup_main{padding: 32px 24px;}
	.signup .signup_card{padding: 28px 20px;}
	.signup .signup_card h2{font-size: 1.5rem!important;}
}
/*-----------------------------------------
			media query
-----------------------------------------*/
@media screen and (min-width: 1400px){
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1280px;
    }
}
@media screen and (max-width: 1399px){
	#main_img:before{
		width: 26vw;
		height: 41vw;
		top: 40%;
		left: -200px;
	}
}
/* xl */
@media screen and (max-width: 1199px){
	#main_img:before{
		width: 23vw;
        height: 36vw;
        top: 30%;
        left: -150px;
	}
	/*--
	TOP
	--*/
	#con2 .container-lg{padding-top: 60px;}
    /*--
	下層
	--*/
	/* 料金 */
	.price .hexagon_box{width: 33%;}
	.hexagon{
		--hex_w2 : 90px;
		max-width: var(--hex_w2);
	}
}
/* lg */
@media screen and (max-width: 991px){
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
		padding: 30px;
	}
	header .nav_wrap{padding-top: 70px;}
	header .nav_wrap ul{width: 300px;}
	header .nav_wrap ul.border-end{
		border: none!important;
		margin-bottom: 0;
	}
	header .nav_wrap ul.border-end:last-of-type{margin-bottom: 30px;}
	header .nav_wrap li{width: auto;}
	
	#main_img:before{
		width: 45vw;
        height: 62vw;
        top: 15%;
        left: auto;
        right: -2%;
	}
	/*--
	TOP
	--*/
	
	#con1 .con_item{width: 100%;}
	#con1 .con_img{
		width: 70%;
		margin: 0 auto;
	}
	#con2 .con_box:first-of-type .con_item1{width: 100%; margin-top: 0; margin-left: auto; margin-right: auto;}
	#con2 .con_box:first-of-type .con_item2{width: 100%; margin-top: 40px;}
}
/* タブレット（768〜991px）は画像が大きく見えるため幅を絞る */
@media screen and (min-width: 768px) and (max-width: 991px){
	#con1 .con_img{width: 65%;}
	#con2 .con_box:first-of-type .con_item1{width: 65%;}
}
@media screen and (max-width: 991px){
	/*--
	下層
	--*/
	/* 機能紹介 */
	.feature .cate_box.even > div{order: 2;}
	.feature .cate_box.even > figure{order: 1;}
	.feature .cate_box:is(.odd,.even) > div{margin-top: -5%;}
}
/* md */
@media screen and (max-width: 767px){
	:root{
		--marginBottom: 5%;
		--listBottom: 3%;
	}
	/*--
	TOP
	--*/
	#main_img .catch h2{font-size: 1.6rem;}
	#main_img .catch p{font-size: 13px;}
	#con1 .container-lg {padding-bottom: 50px;}
	#con1 .con_img{
		width: 70%;
		margin: 0 auto;
	}
	#con1 .con_item{width: 100%;}
	#con2 .con_box:first-of-type{margin-top: 0;}
	#con3 .cate_box{
		width: 100%;
		margin-right: 0;
	}
	#con3 .cate_box .box_img1{width: 50%;}
	/*--
	下層
	--*/
	.cate_list li{
		width: var(--twoColWidth);
	}
	.cate_list li:nth-of-type(2n){margin-right: var(--marginRightClear);}
	.cate_list li:nth-of-type(3n){margin-right: var(--marginRight);}

	#page_title .container-lg{padding-top: 70px;}
	/*課題から探す*/
	.solution .cate_item3 .cate_box{
		width: var(--onelWidth);
		margin-right: var(--marginRightClear);
		margin-bottom: var(--marginBottom);
	}
	.solution .cate_item4 .cate_box:nth-of-type(n+2){margin-top: 0;}
	.solution .cate_item4 .cate_box{margin-bottom: var(--marginBottom);}
	/*業界別活用方法*/
	.industry .arrow{
		width: 250px;
		margin-top: -4%;
	}
	.industry .cate_item3 .cate_box{
		width: var(--oneColWidth);
		margin-right: var(--marginRightClear);
	}
	/* お役立ち資料 / お役立ちコラム */
	:is(.whitepaper,.column) .cate_box{
		width: var(--twoColWidth);
		margin-right: var(--marginRight);
	}
	:is(.whitepaper,.column) .cate_box:nth-of-type(3n){margin-right: var(--marginRight);}
	:is(.whitepaper,.column) .cate_box:nth-of-type(2n){margin-right: var(--marginRightClear);}
	
}
/* sm */
@media screen and (max-width: 575px){
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
		padding: 30px 20px;
	}
	/*
	.dl_btn{
		width: 100%!important;
		max-width: 300px;
	}
		*/
	
	/* 疑似要素 */
	#main_img:before {
        width: 45vw;
        height: 71vw;
        top: 9%;
        left: auto;
        right: -15%;
    }
	#page_title:before{
		top: 43%;
		right: -7%;
	}
	/*--
	TOP
	--*/
	#main_img .catch .fs-5{font-size:calc(1rem - 2px)!important;}
	
	#con1 .con_img{
		width: 90%;
		margin-top: -20%;
	}
	#con2 .con_item2{width: 100%;}
	#con2 .con_box:first-of-type .con_item2{width: 100%;}
	#con2 .con_box:last-of-type:before{
		width: 52vw;
		height: 82vw;
		top: 64%;
		right: -8%;
	}
	#con4{background-image: url('../img/bg2.jpg');}
	#con6 .con_box{margin-top: -20%;}
	/*--
	下層
	--*/
	.cate_list li{
		width: var(--oneColWidth);
		margin-right: var(--marginRightClear);
	}

	#pan_list .container-lg{padding: 10px 20px;font-size: 12px;}
	/* 機能紹介 */
	.update .cate_box,
	.update .cate_box.col2{
		width: var(--oneColWidth);
		margin-right: var(--marginRightClear);
	}
	/* お役立ち資料 / お役立ちコラム */
	:is(.whitepaper,.column) .cate_box{
		width: var(--oneColWidth);
		margin-right: var(--marginRightClear);
	}
	:is(.whitepaper,.column) .cate_box:nth-of-type(2n){margin-right: var(--marginRightClear);}
}

/* 英字タイトル・数字は英字フォント（日本語が混ざっても崩れないよう Noto Sans JP を後ろに） */
.sub_title,
.en,
.panel_en,
.box_title1,
.pd_op,
#con4 .benefit_item .num{font-family: "Figtree", "Noto Sans JP", sans-serif;}
#con4 .benefit_item .num{font-size: 20px; letter-spacing: 0.06em; line-height: 1.2;}

/* TOP 機能紹介：全体像の図を元サイト並みに大きく */
#con4 .feature_intro{grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px;}
#con4 .intro_img{max-width: 640px;}
@media screen and (max-width: 991px){
	#con4 .feature_intro{grid-template-columns: 1fr; gap: 28px;}
	#con4 .intro_img{max-width: 560px;}
}
@media screen and (max-width: 767px){
	#con4 .intro_img{max-width: 100%;}
	#con4 .benefit_item .num{font-size: 18px;}
}

/* メニュー（タブレット以下）：プライバシーポリシーの下に余白、ボタン下の余白は詰める */
@media screen and (max-width: 991px){
	header .nav_wrap .nav_list{margin-bottom: 32px;}
	header .nav_wrap{padding-bottom: 24px !important;}
	header .nav_cta .dl_btn{margin-bottom: 0 !important;}
}
/* 申込みページ：送信ボタン下の注記はスマホでは左揃え */
@media screen and (max-width: 575px){
	.signup_card .form_note{text-align: left !important;}
	.signup_card .form_note .d-inline-block{display: inline !important;}
	.signup_card .form_note br{display: none;}
}
/* SP：ロゴを少し小さく（申込みページのSPロゴもそろえる） */
@media screen and (max-width: 767px){
	#logo{max-width: 120px;}
	.signup #logo_sp{width: 120px;}
}
/* 申込みページ：フォーム上の説明文の行間 */
.signup .signup_card .form_lead{line-height: 1.6;}
/* 文字は最小12px：申込みページの注記・必須バッジ、SPのキャラ吹き出し */
.signup .signup_card .form_lead.fs-8{font-size: 12px !important;}
.signup .required_tag{font-size: 12px !important; padding: 3px 6px 2px;}
@media screen and (max-width: 767px){
	#main_img .chara_bubble{font-size: 12px;}
}

/* ---- 2026-10-21 レスポンシブ確認での修正 ---- */
/* タブレット：業界別「活用シーン」は3カラムだと狭いので縦並びに */
@media screen and (min-width: 768px) and (max-width: 991px){
	.industry .cate_item3 .box_wrap{flex-direction: column !important;}
	.industry .cate_item3 .cate_box{width: 100%; max-width: 560px; margin: 0 auto 24px !important;}
	.industry .cate_item3 .cate_box img{max-width: 300px;}
}
/* 課題／業界タブ：「＞」だけ2行目に落ちないように */
.cate_list li a{display: flex; align-items: center; justify-content: center;}
@media screen and (min-width: 768px) and (max-width: 991px){
	.cate_list li a{padding-left: 12px !important; padding-right: 12px !important; font-size: 14px;}
}
/* SP：タブ右端の余白を全ボタンでそろえる */
@media screen and (max-width: 575px){
	.cate_list li:nth-of-type(n){margin-right: 0;}
}
.signup .signup_card .form_lead{word-break: auto-phrase;}
/* TOP：1024px前後で con1 の画像が右に8pxはみ出して横スクロールが出るのを防ぐ */
#con1{overflow-x: clip;}
/* プライバシーポリシー：「・」の箇条書きは2行目以降を文字の位置にそろえる（ぶら下げインデント） */
.pp_item{display: block; padding-left: 1em; text-indent: -1em;}
.pp_item.pp_sub{padding-left: 2em; text-indent: 0;}
.pp_blank{display: block; height: 1em;}
/* プライバシーポリシー：PCで1行が長すぎないよう本文幅を絞る */
.privacy #main_content .container-lg{max-width: 960px;}
/* お試し枠：左側の淡い水色だと白文字が読みにくいので、グラデーションの淡い側を少し濃く */
.cta_box.grade-135{background: linear-gradient(-135deg, var(--color1), #5FA4F0);}
/* お試し枠の六角形：#con2・#con6 で同じ大きさ・位置に（旧ルールの vw 指定を上書き）。タブレット以下は大きめに */
#con2 .con_box.cta_box:before,
#con6 .con_box.cta_box:before{
	width: 280px;
	height: 427px;
	left: -40px;
	right: auto;
	top: auto;
	bottom: -190px;
	transform: none;
	opacity: 1;
}
@media screen and (max-width: 1199px){
	#con2 .con_box.cta_box:before,
	#con6 .con_box.cta_box:before{width: 340px; height: 519px; left: -70px; bottom: -150px;}
}
@media screen and (max-width: 575px){
	#con2 .con_box.cta_box:before,
	#con6 .con_box.cta_box:before{width: 300px; height: 458px; left: -90px; bottom: -120px;}
}
/* フッター下に白い細線が出るのを防ぐ（タブレット幅などで高さが小数pxになり、フッターの下に0.5px以下の隙間ができるため） */
html:has(footer.bg_black){background-color: var(--dark);}

/* 業界別：タブは4つなので、576px以上は2×2（3列だと4つ目だけ2段目に残るため） */
@media screen and (min-width: 576px){
	.industry .cate_list{max-width: 900px; margin-left: auto; margin-right: auto;}
	.industry .cate_list li:nth-of-type(n){width: var(--twoColWidth); margin-right: var(--marginRight);}
	.industry .cate_list li:nth-of-type(2n){margin-right: var(--marginRightClear);}
}
/* 課題から探す：三角の区切りの上端に、下地の青が細い線で見えるのを防ぐ */
.solution .cate_item2 svg{overflow: visible;}
/* 課題から探す「導入メリット」：PCの互い違い（上に重ねる）配置はタブレットでは詰まるので、普通に間隔をあける */
@media screen and (min-width: 768px) and (max-width: 1199px){
	.solution .cate_item4 .cate_box:nth-of-type(n+2){margin-top: 0;}
}
/* SPフッター：ロゴも社名・住所と同じく左揃え */
@media screen and (max-width: 575px){
	#logo2{margin-left: 0 !important; margin-right: 0 !important;}
}
@media screen and (min-width: 768px) and (max-width: 991px){
	.solution .cate_item4 .cate_box:nth-of-type(n+2){margin-top: 32px;}
}
/* TOP機能紹介：パネル下の「前へ／次へ」（タブと連動） */
#con4 .feature_pager{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #E3EDF6;
}
#con4 .pager_btn{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--dark);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .2s;
}
#con4 .pager_prev{justify-self: start;}
#con4 .pager_next{justify-self: end;}
#con4 .pager_btn i{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 16px;
	color: var(--color1);
	background-color: var(--white);
	border: 1px solid #DCE6EF;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 141, 212, 0.08);
	transition: color .2s, background-color .2s, border-color .2s, transform .2s;
}
#con4 .pager_btn:hover{color: var(--color1);}
#con4 .pager_btn:hover i{color: var(--white); background-color: var(--color1); border-color: var(--color1);}
#con4 .pager_prev:hover i{transform: translateX(-2px);}
#con4 .pager_next:hover i{transform: translateX(2px);}
#con4 .pager_btn:focus-visible{outline: 3px solid var(--color3_50); outline-offset: 2px; border-radius: 8px;}
#con4 .pager_count{font-size: 13px; font-weight: 600; letter-spacing: .08em; color: #6B7785;}
#con4 .pager_current{color: var(--color1); font-size: 20px;}
#con4 .pager_sep{margin: 0 .4em;}
@media screen and (max-width: 991px){
	#con4 .feature_pager{margin-top: 28px; padding-top: 20px;}
}
/* SP：機能名は出さず、丸い矢印と番号だけ */
@media screen and (max-width: 767px){
	#con4 .feature_pager{margin-top: 20px; padding-top: 16px;}
	#con4 .pager_name{display: none;}
	#con4 .pager_btn i{width: 44px; height: 44px;}
}
@media (prefers-reduced-motion: reduce){
	#con4 .pager_btn,
	#con4 .pager_btn i{transition: none;}
}

/* ===== TOP機能紹介：切替スイッチ型のタブ =====
   薄い青の帯の中で、選択中のタブだけ白い丸で浮かせる。
   タブは1行で並べ、収まらない幅（991px以下）は横スクロール。続きがある側はフェードで示す */
#con4 .feature_tabs_wrap{margin: 48px 0 32px; text-align: center;}
#con4 .feature_tabs{
	/* ul の d-flex で横幅いっぱいに広がるため、文字幅に合わせて中央寄せ */
	width: fit-content;
	margin: 0 auto;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 2px;
	padding: 4px;
	background-color: #E1ECF7;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 141, 212, 0.08);
}
#con4 .feature_tab{
	min-width: 0;
	padding: 10px 15px;
	color: #4A5560;
	background: none;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
}
#con4 .feature_tab:hover{color: var(--color1); transform: none;}
#con4 .feature_tab.is-active{
	color: var(--color1);
	background: var(--white);
	box-shadow: 0 2px 6px rgba(0, 141, 212, 0.15);
}
/* 1199px以下：タブを少し小さくして1行に収める */
@media screen and (min-width: 992px) and (max-width: 1199px){
	#con4 .feature_tab{padding: 9px 11px; font-size: 14px;}
}
/* 991px以下：横スクロール */
@media screen and (max-width: 991px){
	#con4 .feature_tabs_wrap{
		margin: 40px -30px 24px;
		padding: 0 30px;
		text-align: left;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	#con4 .feature_tabs_wrap::-webkit-scrollbar{display: none;}
	#con4 .feature_tabs{width: max-content;}
	#con4 .feature_tabs_wrap.is-more-right{-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);}
	#con4 .feature_tabs_wrap.is-more-left{-webkit-mask-image: linear-gradient(to right, transparent, #000 48px); mask-image: linear-gradient(to right, transparent, #000 48px);}
	#con4 .feature_tabs_wrap.is-more-left.is-more-right{-webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);}
}
@media screen and (max-width: 767px){
	#con4 .feature_tabs_wrap{margin: 32px -20px 20px; padding: 0 20px;}
	#con4 .feature_tab{padding: 9px 13px; font-size: 13px;}
}
/* 「1 / 9」：現在の番号は青のまま、大きさは全体数と同じに */
#con4 .pager_current{font-size: inherit;}

/* ===== FV：六角形の背景（main_img.png 700×1080）=====
   幅ごとに高さを指定すると画像が途切れるため、縦横比を固定して幅だけで大きさを決める。
   PC（〜1399px）は狭めても隠れすぎないよう px で固定、タブレット以下は右上に丸ごと見せる */
@media screen and (max-width: 1399px){
	#main_img:before{width: 300px; height: auto; aspect-ratio: 700 / 1080; top: 45%; left: -150px;}
}
@media screen and (max-width: 1199px){
	#main_img:before{width: 260px; top: 50%; left: -135px;}
}
@media screen and (max-width: 991px){
	#main_img:before{width: 42vw; top: 0; left: auto; right: -8vw; transform: none;}
}
@media screen and (max-width: 575px){
	/* 見出し（サイテキ化）にかからないよう右上に寄せる */
	#main_img:before{width: 60vw; top: -17vw; right: -18vw;}
	/* SP：テキストは左揃え（HTML側の text-center を上書き） */
	/* 1カラム時は中央寄せの flex で並ぶため、横幅いっぱいに広げてから左揃え */
	#main_img .container-lg{align-items: stretch!important;}
	#main_img .catch,
	#main_img .catch_lead{text-align: left!important;}
	#main_img .fv_badge{margin-left: 0;}
	/* SP：見出しを大きく。上の小見出しは2行の行間を詰め、下に1行分ほど余白 */
	#main_img .catch h2{font-size: 2rem;}
	#main_img .catch h2 > span:first-child{display: block; line-height: 1.6; margin-bottom: 1.2rem;}
	#main_img .catch h2 > br:first-of-type{display: none;}
	/* SP：無料で試してみるボタンの文字は少し小さく */
	#main_img .fv_cta .btn{font-size: 1.2rem!important;}
}
/* タブレット：FVの見出しを大きく */
@media screen and (min-width: 576px) and (max-width: 991px){
	#main_img .catch h2{font-size: 2.6rem;}
}

/* ===== お試し枠（全ページ共通）：文字は左、サイテキくんは右（枠からはみ出す）、ボタンは文字の下 =====
   サイテキくんが左を向いているので、視線が文字とボタンに向くよう右に置く。
   枠からはみ出させるため overflow-hidden は外し、六角形の模様は枠の背景画像にして枠内に収める */
.cta_box.grade-135{
	background:
		url("../img/main_img3.png") no-repeat right -40px bottom -170px / 300px auto,
		linear-gradient(-135deg, var(--color1), #5FA4F0);
}
#con2 .con_box.cta_box:before,
#con6 .con_box.cta_box:before{display: none;}
.cta_box{padding: 56px 64px;}
.cta_box .cta_inner{flex-direction: column !important; align-items: flex-start !important; gap: 28px;}
.cta_box .cta_body{text-align: left !important; padding-right: 300px;}
.cta_box .cta_action{width: 320px; text-align: left !important;}
.cta_box .cta_chara{
	position: absolute;
	right: 24px;
	bottom: -8px;
	width: 300px;
	margin: 0;
	pointer-events: none;
}
.cta_box .cta_chara img{filter: drop-shadow(0 14px 24px rgba(0, 60, 120, 0.30));}
/* タブレット */
@media screen and (max-width: 1199px){
	.cta_box{padding: 48px 44px;}
	.cta_box .cta_inner{gap: 24px;}
	.cta_box .cta_body{padding-right: 220px;}
	.cta_box .cta_chara{width: 230px; right: 8px;}
	.cta_box .cta_action{width: 100%; max-width: 340px;}
	.cta_box.grade-135{background-position: right -60px bottom -150px, 0 0; background-size: 260px auto, auto;}
}
/* SP：サイテキくんは右上から顔を出す（文字の右上にかぶらないよう上に余白） */
@media screen and (max-width: 767px){
	.cta_box{padding: 72px 24px 32px;}
	.cta_box .cta_body{padding-right: 0;}
	.cta_box .cta_chara{width: 120px; right: 12px; top: -56px; bottom: auto;}
	.cta_box .cta_action{max-width: none;}
	.cta_box.grade-135{background-position: right -70px bottom -110px, 0 0; background-size: 200px auto, auto;}
}
@media screen and (max-width: 575px){
	.cta_box{padding: 68px 20px 28px;}
	.cta_box .cta_chara{width: 110px; top: -52px;}
}
/* サイテキくんは枠の上辺から顔を出す（PC・タブレット） */
@media screen and (min-width: 768px){
	.cta_box .cta_chara{top: -64px; bottom: auto;}
}
.cta_box .cta_inner{position: static !important;}

/* ===== お試し枠 改訂（担当者指示）：見出し・説明は中央、下段は左にチェックリスト／右にボタン。
   サイテキくんは小さく、枠の右上から顔を出す。余白を詰めるため右側の確保（padding-right）はなし ===== */
.cta_box{padding: 48px 56px;}
.cta_box .cta_inner{
	display: grid !important;
	grid-template-columns: auto auto;
	grid-template-areas: "title title" "lead lead" "list action";
	justify-content: center;
	align-items: center;
	column-gap: 56px;
	row-gap: 0;
}
.cta_box .cta_body{display: contents;}
.cta_box .cta_body .con_title{grid-area: title; text-align: center; margin-bottom: 12px !important;}
.cta_box .cta_body .con_txt{grid-area: lead; text-align: center; margin-bottom: 28px !important;}
.cta_box .cta_body .check_box{grid-area: list; justify-self: end;}
.cta_box .cta_action{grid-area: action; justify-self: start; width: 300px; max-width: none;}
.cta_box .cta_chara{width: 130px; top: -58px; right: 40px; bottom: auto;}
.cta_box.grade-135{background-position: right -50px bottom -160px, 0 0; background-size: 260px auto, auto;}
/* 991px以下：縦に1列（見出し → 説明 → チェックリスト → ボタン）、すべて中央 */
@media screen and (max-width: 991px){
	.cta_box{padding: 56px 32px 40px;}
	.cta_box .cta_inner{grid-template-columns: auto; grid-template-areas: "title" "lead" "list" "action"; justify-items: center;}
	.cta_box .cta_body .check_box{justify-self: center; margin-bottom: 24px !important;}
	.cta_box .cta_action{justify-self: stretch; width: 100%; max-width: 380px; margin: 0 auto;}
	.cta_box .cta_chara{width: 110px; top: -50px; right: 24px;}
}
@media screen and (max-width: 575px){
	.cta_box{padding: 60px 20px 28px;}
	.cta_box .cta_chara{width: 96px; top: -44px; right: 14px;}
	.cta_box .cta_body .con_txt{margin-bottom: 20px !important;}
	.cta_box.grade-135{background-position: right -70px bottom -110px, 0 0; background-size: 200px auto, auto;}
}
@media screen and (min-width: 992px){
	.cta_box{max-width: 980px; margin-left: auto !important; margin-right: auto !important;}
}

/* ===================== 申込みページ：アレンジ（2026-10-22） ===================== */
/* A. 「7日間 無料でお試し」：ボタンと間違えないよう、影なし・角丸小さめ・淡い地に青文字のラベルに */
.signup .side_badge{
	padding: 5px 12px;
	font-size: 14px;
	color: var(--color1) !important;
	background: #E8F3FC;
	border: 1px solid #BFDDF4;
	border-radius: 6px !important;
	box-shadow: none;
}
@media screen and (max-width: 1399px){
	.signup .side_badge{font-size: 13px; padding: 4px 10px;}
}

/* B-3. 左側の背景に六角形のモチーフ（TOPと統一）。左下と右上にうっすら */
.signup .signup_side:before,
.signup .signup_side:after{
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -70 330 330'%3E%3Cg fill='%23008DD4'%3E%3Cpath opacity='.07' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath opacity='.05' transform='translate(108 0)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath opacity='.09' transform='translate(54 94)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath opacity='.04' transform='translate(162 94)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath opacity='.06' transform='translate(108 188)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.signup .signup_side:before{width: 420px; height: 420px; left: -110px; bottom: -90px;}
.signup .signup_side:after{width: 300px; height: 300px; right: 8%; top: -70px; transform: rotate(180deg);}
.signup .side_top,.signup .side_body,.signup .side_back{position: relative; z-index: 1;}
.signup .side_top,.signup .side_back{position: absolute;}

/* スクショのスライドショー：16:9 の枠に重ね、ふわっと切り替え */
.signup .side_slides{position: relative; aspect-ratio: 16 / 9; background: var(--white);}
.signup .side_slides img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.signup .side_slides img.is-active{opacity: 1;}

/* B-1. サイテキくん：フォームの右上から顔を出し、吹き出しで一言。ゆっくり上下にふわふわ */
.signup .signup_card{position: relative;}
.signup .form_chara{
	position: absolute;
	top: -34px;
	right: 20px;
	width: 112px;
	z-index: 2;
	pointer-events: none;
	animation: form_chara_float 4s ease-in-out infinite;
}
.signup .form_chara img{display: block; width: 100%; filter: drop-shadow(0 8px 14px rgba(0, 60, 120, 0.22));}
.signup .form_bubble{
	position: absolute;
	right: calc(100% + 6px);
	top: 18px;
	padding: 8px 12px;
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--color1);
	background: var(--white);
	border: 1px solid #CFE3F4;
	border-radius: 12px;
	box-shadow: 0 6px 16px rgba(0, 141, 212, 0.12);
}
/* 吹き出しのしっぽ（右向き） */
.signup .form_bubble:after{
	content: "";
	position: absolute;
	right: -7px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	background: var(--white);
	border-top: 1px solid #CFE3F4;
	border-right: 1px solid #CFE3F4;
	transform: rotate(45deg);
}
@keyframes form_chara_float{
	0%, 100%{transform: translateY(0);}
	50%{transform: translateY(-8px);}
}
@media screen and (max-width: 991px){
	.signup .form_chara{width: 96px; top: -40px; right: 16px;}
}
@media screen and (max-width: 575px){
	.signup .form_chara{width: 80px; top: -36px; right: 10px;}
	.signup .form_bubble{font-size: 12px; padding: 6px 10px; top: 10px;}
}

/* C. ページを開いたとき：見出し → 機能リスト（1つずつ）→ スクショ の順に下からふわっと */
@keyframes su_fadeup{
	from{opacity: 0; transform: translateY(18px);}
	to{opacity: 1; transform: translateY(0);}
}
.signup .side_head,
.signup .side_feature li,
.signup .side_slides,
.signup .signup_sp_head > *,
.signup .signup_card{animation: su_fadeup .7s cubic-bezier(.22, .61, .36, 1) both;}
.signup .side_head{animation-delay: .1s;}
.signup .side_feature li:nth-child(1){animation-delay: .35s;}
.signup .side_feature li:nth-child(2){animation-delay: .47s;}
.signup .side_feature li:nth-child(3){animation-delay: .59s;}
.signup .side_feature li:nth-child(4){animation-delay: .71s;}
.signup .side_slides{animation-delay: .55s;}
.signup .signup_card{animation-delay: .2s;}
.signup .signup_sp_head > :nth-child(1){animation-delay: .05s;}
.signup .signup_sp_head > :nth-child(2){animation-delay: .15s;}
.signup .signup_sp_head > :nth-child(3){animation-delay: .25s;}
@media (prefers-reduced-motion: reduce){
	.signup .side_head,
	.signup .side_feature li,
	.signup .side_slides,
	.signup .signup_sp_head > *,
	.signup .signup_card,
	.signup .form_chara{animation: none;}
	.signup .side_slides img{transition: none;}
}
/* 調整：右上の六角形は見出しの後ろでうるさいので外し、左下だけに */
.signup .signup_side:after{display: none;}
.signup .signup_side:before{width: 480px; height: 480px; left: -120px; bottom: -110px;}
/* 992〜1399px：フォームが狭く、吹き出しが見出しにかぶるので見出しを下げる */
@media screen and (min-width: 992px) and (max-width: 1399px){
	.signup .signup_card{padding-top: 72px;}
}
/* 991px以下：吹き出しが上のチェックリストにかぶらないよう、間を空ける */
@media screen and (max-width: 991px){
	.signup .signup_sp_head{margin-bottom: 56px;}
}

/* SP（767px以下）のFV：小さいスクショを左、サイテキくんを右に（サイテキくんは左向きなので、スクショの方を見る形に）。
   吹き出しもサイテキくんの左上に移し、しっぽを右下（サイテキくんの頭）へ */
@media screen and (max-width: 767px){
	#main_img .fv_shot2{left: -2%; right: auto;}
	#main_img .catch_chara{left: auto; right: -4%;}
	#main_img .chara_bubble{left: auto; right: 66%;}
	#main_img .chara_bubble:after{left: auto; right: 12px; bottom: -8px; border-width: 9px 0 0 10px;}
}
@media screen and (max-width: 575px){
	#main_img .catch_chara{right: -6px;}
}
/* お試し枠：ボタンをチェックリストの上下中央に（前の align-items:flex-start!important を上書き）。サイテキくんは200px */
.cta_box .cta_inner{align-items: center !important;}
.cta_box .cta_chara{width: 200px; top: -96px; right: 32px;}
@media screen and (max-width: 991px){
	.cta_box{padding-top: 72px;}
	.cta_box .cta_chara{width: 150px; top: -80px; right: 20px;}
}
@media screen and (max-width: 575px){
	.cta_box{padding-top: 76px;}
	.cta_box .cta_chara{width: 120px; top: -64px; right: 12px;}
}

/* ===== 申込みページ PC：レイアウト変更（タイトル → 4項目を横並び → スクショのスライド） =====
   上から順に流し込み、スクショはフォームの下に少し潜らせる。高さが足りない画面ではスクショを縮める */
@media screen and (min-width: 992px){
	.signup .signup_side{
		display: flex !important;
		flex-direction: column;
		gap: 28px;
		padding: 40px 0 96px var(--side-x) !important;
	}
	.signup .side_top{position: static !important; right: auto;}
	.signup .side_body{height: auto !important; display: block !important; padding-top: 0 !important;}
	.signup .side_row{flex-direction: column !important; align-items: stretch !important; gap: 24px !important;}
	.signup .side_feature{
		flex: none !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 10px !important;
		margin-right: 24px;
	}
	.signup .side_feature li{flex-direction: column; align-items: flex-start !important; padding: 14px 14px 12px !important;}
	.signup .side_feature .icon{margin: 0 0 10px !important;}
	.signup .side_feature strong{font-size: 16px !important;}
	.signup .side_feature li .fs-8{font-size: 12px !important; line-height: 1.5; margin-bottom: 2px;}
	.signup .side_slides{
		margin-left: 0 !important;
		margin-right: -200px !important;
		width: min(calc(100% + 200px), calc((100vh - 440px) * 16 / 9));
		max-width: none !important;
	}
}
@media screen and (min-width: 992px) and (max-width: 1199px){
	.signup .side_feature{grid-template-columns: repeat(2, minmax(0, 1fr));}
	.signup .side_feature li{flex-direction: row; align-items: center !important; padding: 10px 12px !important;}
	.signup .side_feature .icon{margin: 0 10px 0 0 !important;}
	.signup .side_slides{margin-right: -150px !important; width: min(calc(100% + 150px), calc((100vh - 420px) * 16 / 9));}
}
@media screen and (min-width: 992px) and (max-height: 840px){
	.signup .signup_side{gap: 20px; padding-top: 28px !important;}
}

/* サイテキくんの位置：PCはもう少し下・左（見出しの右横）。SPはもう少し上、上のテキストとの間を広く */
@media screen and (min-width: 1400px){
	.signup .form_chara{top: 14px; right: 44px;}
}
@media screen and (min-width: 992px) and (max-width: 1399px){
	.signup .form_chara{top: -12px; right: 32px;}
}
@media screen and (max-width: 991px){
	.signup .signup_sp_head{margin-bottom: 84px;}
	.signup .form_chara{top: -60px;}
}
@media screen and (max-width: 575px){
	.signup .signup_sp_head{margin-bottom: 76px;}
	.signup .form_chara{top: -56px;}
}
/* スクショが下の「サービスサイトに戻る」に近づかないよう、高さの上限を少し厳しく */
@media screen and (min-width: 992px){
	.signup .side_slides{width: min(calc(100% + 200px), calc((100vh - 480px) * 16 / 9));}
}
@media screen and (min-width: 992px) and (max-width: 1199px){
	.signup .side_slides{width: min(calc(100% + 150px), calc((100vh - 490px) * 16 / 9));}
}
/* 4項目：機能名を先に、説明を下に（説明が2行になっても読みやすく） */
@media screen and (min-width: 1200px){
	.signup .side_feature li > span:last-child{display: flex; flex-direction: column-reverse;}
	.signup .side_feature li .fs-8{margin: 4px 0 0;}
}

/* ===== 2026-10-22 担当者指定の調整 ===== */
/* お試し枠：サイテキくん（PCは枠の上辺から少し出す） */
.cta_box .cta_chara{width: 200px; top: -36px;}
/* タブレット以下：文字を左揃えにして、サイテキくんは右下（枠の下辺から少し出す）。上・左右の余白を詰める */
@media screen and (max-width: 991px){
	.cta_box{padding: 40px 28px !important;}
	.cta_box .cta_inner{justify-items: start !important; justify-content: start !important;}
	.cta_box .cta_body .con_title,
	.cta_box .cta_body .con_txt{text-align: left !important;}
	.cta_box .cta_body .check_box{justify-self: start;}
	.cta_box .cta_action{justify-self: start; margin: 0 !important;}
	.cta_box .cta_chara{width: 170px; top: auto; bottom: -20px; right: 20px;}
}
/* スマホ：見出し・説明は左揃え、サイテキくんは右上（見出しの横） */
@media screen and (max-width: 575px){
	.cta_box.grade-135{padding: 10% 20px 28px !important;}
	.cta_box .cta_chara{width: 120px; top: 0; right: -12px; bottom: auto;}
}

/* 申込みページ：サイテキくん（1400px以上）とフォームの位置 */
@media screen and (min-width: 1400px){
	.signup .form_chara{top: -25px; right: 24px;}
	.signup .signup_main{padding: 32px 56px 14px 0;}
}
/* 4項目（4列のとき）：アイコンと文字を中央揃え */
@media screen and (min-width: 1200px){
	.signup .side_feature li{align-items: center !important; text-align: center;}
	.signup .side_feature li > span:last-child{align-items: center;}
}
/* 広い画面でスクショが4項目より狭くならないよう、4項目の幅をスクショの幅（高さから決まる上限）にそろえる */
@media screen and (min-width: 992px){
	.signup .side_feature{max-width: calc((100vh - 480px) * 16 / 9);}
}
@media screen and (min-width: 992px) and (max-width: 1199px){
	.signup .side_feature{max-width: calc((100vh - 490px) * 16 / 9);}
}
/* 576〜767px：サイテキくんがボタンにかぶらないよう、ボタン幅とキャラを少し小さく */
@media screen and (min-width: 576px) and (max-width: 767px){
	.cta_box .cta_action{max-width: 300px !important;}
	.cta_box .cta_chara{width: 140px; right: 8px;}
}

/* TOP お試し枠（タブレット 768〜991px）：枠を左右に少し内側へ寄せ、左の余白を広めに */
@media screen and (min-width: 768px) and (max-width: 991px){
	.cta_box{margin-left: 5% !important; margin-right: 5% !important; padding-left: 11% !important;}
}

/* 申込みページ（1200px以上）：横に広く縦が低い画面では左のまとまりが高さで縮み、フォームとの間が空くため、
   左カラムの幅をその中身の幅までにして、左右のまとまりを中央に寄せる */
@media screen and (min-width: 1200px){
	.signup{justify-content: center;}
	.signup .signup_side{max-width: calc(var(--side-x) + (100vh - 480px) * 16 / 9 + 64px);}
}
/* タブレット（768〜991px）のFVも SP と同じく、小さいスクショを左、サイテキくんを右に */
@media screen and (min-width: 768px) and (max-width: 991px){
	#main_img .fv_shot2{left: -2%; right: auto;}
	#main_img .catch_chara{left: auto; right: -4%;}
	#main_img .chara_bubble{left: auto; right: 66%;}
	#main_img .chara_bubble:after{left: auto; right: 16px; border-width: 12px 0 0 14px;}
}
/* お試し枠（タブレット）：サイテキくんの位置（担当者指定 top:20vw）。SP（575px以下）は top:0 のままにするため 576px 以上に限定 */
@media screen and (min-width: 576px) and (max-width: 991px){
	.cta_box .cta_chara{top: 20vw; bottom: auto;}
}

/* 申込みページ：背景の六角形は中央寄せの影響を受けないよう、画面の左下に固定（元の位置） */
.signup .signup_side:before{display: none;}
.signup_body:before{
	content: "";
	position: fixed;
	left: -120px;
	bottom: -110px;
	width: 480px;
	height: 480px;
	z-index: 0;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -70 330 330'%3E%3Cg fill='%23008DD4'%3E%3Cpath opacity='.07' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath opacity='.05' transform='translate(108 0)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath opacity='.09' transform='translate(54 94)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath opacity='.04' transform='translate(162 94)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath opacity='.06' transform='translate(108 188)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
@media screen and (max-width: 991px){
	.signup_body:before{display: none;}
}
/* 4項目の説明：<br> は4列表示（1200px以上）のときだけ効かせる */
@media screen and (max-width: 1199px){
	.signup .side_feature li .fs-8 br{display: none;}
}
.signup .signup_side,.signup .signup_main{position: relative;}
/* 申込みページ：スライドは切り替えを速く（フェード0.8秒） */
.signup .side_slides img{transition: opacity .8s ease;}

/* ===== 申込みページ：4項目が狭くて文字が折り返すとき（ノートPCなど）は 2×2 にする =====
   4列にできる幅は「左カラムの幅」と「画面の高さから決まる上限（スクショの幅）」の小さい方で決まる。
   高さが低い画面では上限が小さくなり、4列だと機能名が折り返すため、足りないときだけ 2×2 に切り替える */
.signup .side_row{container-type: inline-size;}
@media screen and (min-width: 1200px) and (max-height: 884px){
	.signup .side_feature{grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: max(calc((100vh - 480px) * 16 / 9), 560px);}
	.signup .side_feature li{flex-direction: row; align-items: center !important; text-align: left; padding: 10px 14px !important;}
	.signup .side_feature .icon{margin: 0 12px 0 0 !important;}
	.signup .side_feature li > span:last-child{align-items: flex-start;}
	.signup .side_feature li .fs-8 br{display: none;}
}
@media screen and (min-width: 1200px){
	@container (max-width: 743px){
		.signup .side_feature{grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: max(calc((100vh - 480px) * 16 / 9), 560px);}
		.signup .side_feature li{flex-direction: row; align-items: center !important; text-align: left; padding: 10px 14px !important;}
		.signup .side_feature .icon{margin: 0 12px 0 0 !important;}
		.signup .side_feature li > span:last-child{align-items: flex-start;}
		.signup .side_feature li .fs-8 br{display: none;}
	}
}

/* ===== TOP機能紹介：カテゴリ別ブロック（マーケティング／制作／運用改善）=====
   タブをやめ、カテゴリごとのブロックを上から順に並べる。複数ある制作・運用改善は従来どおりタブ＋スライド。
   画像と文字の配置は1ブロックごとに左右交互（is-rev のブロックは画像が左） */
#con4 .feature_blocks{margin-top: 72px;}
#con4 .feature_block + .feature_block{margin-top: 88px;}
#con4 .cat_head{margin-bottom: 32px;}
#con4 .cat_en{font-family: "Figtree", "Noto Sans JP", sans-serif; letter-spacing: 0.1em; font-size: 14px;}
#con4 .cat_no{display: inline-block; margin-right: 10px; padding-right: 10px; border-right: 2px solid var(--color1); line-height: 1;}
#con4 .cat_title{font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.4;}
#con4 .cat_lead{font-size: 15px; color: #4A5560;}
/* タブがあるブロックは、見出しとタブの間を詰める */
#con4 .cat_head + .feature_tabs_wrap{margin-top: 0;}
@media screen and (min-width: 992px){
	#con4 .feature_block.is-rev .feature_panel{grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);}
	#con4 .feature_block.is-rev .panel_media{order: -1;}
}
@media screen and (max-width: 991px){
	#con4 .feature_blocks{margin-top: 56px;}
	#con4 .feature_block + .feature_block{margin-top: 64px;}
}
@media screen and (max-width: 767px){
	#con4 .feature_blocks{margin-top: 48px;}
	#con4 .feature_block + .feature_block{margin-top: 56px;}
	#con4 .cat_head{margin-bottom: 20px; text-align: left !important;}
	#con4 .cat_lead{font-size: 14px;}
}
/* 2×2 にしても左カラムが狭い（〜559px）ときは、992〜1199pxと同じく機能名だけにして折り返しを防ぐ */
@media screen and (min-width: 1200px){
	@container (max-width: 559px){
		.signup .side_feature li .fs-8{display: none !important;}
		.signup .side_feature li{padding: 10px 12px !important;}
		.signup .side_feature .icon{width: 36px; height: 36px; font-size: 17px; margin-right: 10px !important;}
	}
}

/* ===== 申込みページ：画面の高さが低いとき（〜759px）に崩れないようにする =====
   左カラムの幅・スクショの幅は「画面の高さ」から計算しているため、高さが低いと幅が 0 に近づいて崩れていた。
   高さが 760px 未満のときは、760px のときの大きさで固定し、左カラムを画面に固定（sticky）せず、
   縦にスクロールできるようにする */
@media screen and (min-width: 992px) and (max-height: 759px){
	.signup .signup_side{position: relative; height: auto; min-height: 760px;}
	.signup .side_slides{width: min(calc(100% + 200px), 498px);}
	.signup .side_feature{max-width: 560px;}
}
@media screen and (min-width: 992px) and (max-width: 1199px) and (max-height: 759px){
	.signup .side_slides{width: min(calc(100% + 150px), 498px);}
}
@media screen and (min-width: 1200px) and (max-height: 759px){
	.signup .signup_side{max-width: calc(var(--side-x) + 498px + 64px);}
}

/* ===== TOP 3つの特長：スライド（#con3）=====
   青い背景に、左：文章（大きな番号つき）／右：画面のスクショを画面の右端まで大きく出す。
   スライドは重ねて置き、表示中のものだけフェード＋スクショが右からスライドイン。右の画像は現在は仮 */
#con3.point_section{
	position: relative;
	overflow-x: clip;
	background-image:
		radial-gradient(800px 520px at 88% 18%, rgba(255, 255, 255, 0.20), transparent 62%),
		radial-gradient(700px 600px at 0% 100%, rgba(0, 50, 150, 0.35), transparent 62%),
		linear-gradient(135deg, #008DD4 0%, #1C79E2 100%);
}
/* 背景の大きな六角形（輪郭だけ） */
#con3.point_section:before{
	content: "";
	position: absolute;
	right: -140px;
	bottom: -170px;
	width: 620px;
	height: 620px;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -70 330 330'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2' opacity='.28'%3E%3Cpath d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath transform='translate(108 0)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath transform='translate(54 94)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath transform='translate(162 94)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
#con3 .container-lg{position: relative; z-index: 1;}
#con3 .point_slider{container-type: inline-size; margin-top: 56px;}
#con3 .point_track{display: grid;}
#con3 .point_slide{
	grid-area: 1 / 1;
	min-width: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity .5s ease, visibility 0s .5s;
}
#con3 .point_slide.is-active{visibility: visible; opacity: 1; transition: opacity .6s ease;}
#con3 .point_card{
	display: grid;
	grid-template-columns: 34cqw minmax(0, 1fr);
	gap: 3cqw;
	align-items: center;
	/* スクショを画面の右端まで伸ばす */
	margin-right: calc(50% - 50vw);
}
#con3 .point_txt{position: relative; color: var(--white); text-align: left; padding: 24px 0;}
#con3 .point_txt > *{position: relative; z-index: 1;}
/* 背景に敷く大きな番号（輪郭だけ） */
#con3 .point_txt .point_no{
	position: absolute;
	z-index: 0;
	top: -0.42em;
	left: -0.06em;
	font-family: "Figtree", "Noto Sans JP", sans-serif;
	font-size: clamp(7rem, 13vw, 12rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.38);
	pointer-events: none;
}
#con3 .point_label{
	display: inline-block;
	margin: 0 0 16px;
	padding: 6px 16px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--color1);
	background: var(--white);
	border-radius: 999px;
}
#con3 .point_txt .box_title2{font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.5; margin: 0 0 20px; color: var(--white);}
#con3 .point_txt .box_txt1{font-size: 1rem; line-height: 2; color: rgba(255, 255, 255, 0.92);}
#con3 .point_shot{
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--white);
	border: 6px solid rgba(255, 255, 255, 0.92);
	border-right: 0;
	border-radius: 20px 0 0 20px;
	box-shadow: 0 30px 80px rgba(0, 30, 110, 0.45);
}
#con3 .shot_bar{display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #EEF3F8; border-bottom: 1px solid #DCE6EF;}
#con3 .shot_bar i{display: block; width: 9px; height: 9px; background: #C9D6E3; border-radius: 50%;}
#con3 .point_shot img{display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left;}
/* 表示中のスライドだけ：文字が下からふわっと、スクショが右から滑り込む */
#con3 .point_txt > :not(.point_no),
#con3 .point_shot{opacity: 0; transition: transform .9s cubic-bezier(.22, .61, .36, 1), opacity .7s ease;}
#con3 .point_txt > :not(.point_no){transform: translateY(24px);}
#con3 .point_shot{transform: translateX(90px);}
#con3 .point_slide.is-active .point_txt > :not(.point_no),
#con3 .point_slide.is-active .point_shot{opacity: 1; transform: none;}
#con3 .point_slide.is-active .point_label{transition-delay: .1s;}
#con3 .point_slide.is-active .box_title2{transition-delay: .2s;}
#con3 .point_slide.is-active .box_txt1{transition-delay: .3s;}
#con3 .point_slide.is-active .point_shot{transition-delay: .15s;}
/* 操作部：左寄せ（文章の下） */
#con3 .point_nav{display: flex; align-items: center; justify-content: flex-start; gap: 18px; margin-top: 24px;}
#con3 .point_btn{
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	font-size: 16px; color: var(--white);
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	cursor: pointer;
	transition: color .2s, background-color .2s;
}
#con3 .point_btn:hover{color: var(--color1); background-color: var(--white);}
#con3 .point_count{font-family: "Figtree", "Noto Sans JP", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .12em; color: rgba(255, 255, 255, 0.75);}
#con3 .point_cur{font-size: 22px; color: var(--white);}
#con3 .point_dots{display: flex; align-items: center; gap: 8px;}
#con3 .point_dot{
	display: block; width: 36px; height: 4px; padding: 0;
	background: rgba(255, 255, 255, 0.35);
	border: 0; border-radius: 999px;
	cursor: pointer;
	transition: background-color .3s;
}
#con3 .point_dot.is-active{background: var(--white);}
#con3 .point_btn:focus-visible,
#con3 .point_dot:focus-visible{outline: 3px solid var(--white); outline-offset: 3px;}
@media screen and (max-width: 991px){
	#con3 .point_card{grid-template-columns: 1fr; gap: 20px; margin-right: 0;}
	#con3 .point_shot{border-right: 6px solid rgba(255, 255, 255, 0.92); border-radius: 16px;}
	#con3 .point_txt{padding: 8px 0 0;}
	#con3 .point_shot{transform: translateY(30px);}
	#con3 .point_nav{justify-content: center;}
}
@media screen and (max-width: 575px){
	#con3 .point_dot{width: 24px;}
	#con3 .point_shot{border-width: 4px;}
}
@media (prefers-reduced-motion: reduce){
	#con3 .point_slide,
	#con3 .point_txt > :not(.point_no),
	#con3 .point_shot,
	#con3 .point_btn,
	#con3 .point_dot{transition: none;}
	#con3 .point_txt > :not(.point_no),
	#con3 .point_shot{transform: none;}
}

/* ===== TOP 機能紹介：スクショを画面の端まで出す（PC・992px以上）=====
   カード枠をやめ、動画（スクショ）が左右どちらかの画面端まで伸びる。
   文字が左のブロックは画像が右端、is-rev（画像が左）のブロックは左端へ。
   幅は .feature_panels（container-type）の cqw で決める */
#con4{overflow-x: clip;}
#con4 .feature_panels{container-type: inline-size;}
@media screen and (min-width: 992px){
	#con4 .feature_panels{padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;}
	#con4 .feature_panel{
		grid-template-columns: 38cqw minmax(0, 1fr);
		gap: 4cqw;
		margin-right: calc(50% - 50vw);
	}
	#con4 .feature_panel .video_box{border-right: 0; border-radius: 16px 0 0 16px;}
	#con4 .feature_block.is-rev .feature_panel{
		grid-template-columns: minmax(0, 1fr) 38cqw;
		margin-right: 0;
		margin-left: calc(50% - 50vw);
	}
	#con4 .feature_block.is-rev .feature_panel .video_box{border-left: 0; border-right: 5px solid var(--white); border-radius: 0 16px 16px 0;}
}

/* ===== TOP 機能紹介：スライドの下の矢印・枚数表示は非表示（タブと左右スワイプで切り替え。HTML・JSはそのまま残してある） ===== */
#con4 .feature_pager{display: none;}

/* ===== TOP アニメーション =====
   html.has-anim は design.js が付ける（JSが動かない環境・動きを減らす設定では付かず、すべて通常表示）。 */

/* スクロールで順番にふわっと表示（.rv は design.js が対象に付け、画面に入ると .is-in が付く） */
html.has-anim .rv{
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s ease var(--rv-d, 0s), transform .8s cubic-bezier(.22, .61, .36, 1) var(--rv-d, 0s);
}
html.has-anim .rv.is-in{opacity: 1; transform: none;}

/* 機能紹介：画像を画面の端から滑り込ませる（PC）。文字が左のブロックは右端から、画像が左のブロックは左端から */
@keyframes media_in_r{from{opacity: 0; transform: translateX(160px);} to{opacity: 1; transform: none;}}
@keyframes media_in_l{from{opacity: 0; transform: translateX(-160px);} to{opacity: 1; transform: none;}}
@media screen and (min-width: 992px){
	html.has-anim #con4 .feature_block:not(.is-in) .panel_media{opacity: 0;}
	html.has-anim #con4 .feature_block.is-in .feature_panel.is-active .panel_media{animation: media_in_r .95s cubic-bezier(.22, .61, .36, 1) .1s both;}
	html.has-anim #con4 .feature_block.is-rev.is-in .feature_panel.is-active .panel_media{animation-name: media_in_l;}
	/* パララックス：スクロールに合わせて画像を横にずらす（--p は 0〜1。ずらした分だけ端の外側に余白を足し、隙間が出ないようにする） */
	html.has-anim #con4 .feature_panel .video_box{margin-right: -48px; transform: translateX(calc(var(--p, 0) * -48px));}
	html.has-anim #con4 .feature_block.is-rev .feature_panel .video_box{margin-right: 0; margin-left: -48px; transform: translateX(calc(var(--p, 0) * 48px));}
}

/* お試し枠：サイテキくんが下からぽんっと顔を出し、そのあとゆっくり上下にふわふわ */
@keyframes chara_pop{
	0%{opacity: 0; transform: translateY(70px) scale(.8);}
	60%{opacity: 1; transform: translateY(-12px) scale(1.04);}
	100%{opacity: 1; transform: none;}
}
@keyframes chara_float{
	0%, 100%{transform: translateY(0);}
	50%{transform: translateY(-8px);}
}
html.has-anim .cta_box .cta_chara img{opacity: 0; transform-origin: 50% 100%;}
html.has-anim .cta_box.scrollin .cta_chara img{
	opacity: 1;
	animation: chara_pop .9s cubic-bezier(.34, 1.4, .64, 1) .6s backwards, chara_float 4s ease-in-out 1.6s infinite;
}

/* ===== 3つの特長（#con3）調整 2026-10-23 =====
   ・見出しは中央揃え（HTMLで text-center）
   ・大きな番号は見出しに重ねず、見出しの上に置く
   ・操作部：線（枚数）を左、矢印2つを右にまとめ、文章の列の幅にそろえる */
#con3 .point_txt .point_no{
	position: static;
	display: block;
	margin: 0 0 12px;
	font-size: clamp(4.5rem, 7vw, 6.5rem);
	line-height: .9;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
}
#con3 .point_nav{
	width: 34cqw;
	justify-content: space-between;
	gap: 16px;
	margin-top: 8px;
}
/* 線：細い線を3本。表示中は白で長く、切り替えると左から伸びる */
#con3 .point_dots{order: 1; gap: 10px; flex: 1 1 auto;}
#con3 .point_dots li{flex: 1 1 0; max-width: 72px;}
#con3 .point_dot{
	position: relative;
	width: 100%;
	height: 3px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.3);
}
/* 押しやすいよう、見た目より上下に当たり判定を広げる */
#con3 .point_dot:before{content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px;}
#con3 .point_dot:after{
	content: "";
	position: absolute;
	inset: 0;
	background: var(--white);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
#con3 .point_dot.is-active{background: rgba(255, 255, 255, 0.3);}
#con3 .point_dot.is-active:after{transform: scaleX(1);}
#con3 .point_dot{overflow: visible;}
#con3 .point_dot:after{border-radius: inherit;}
/* 矢印：2つを右にまとめる */
#con3 .point_prev{order: 2; margin-left: 8px;}
#con3 .point_next{order: 3;}
#con3 .point_btn{width: 48px; height: 48px; background: transparent; border-color: rgba(255, 255, 255, 0.55);}
#con3 .point_btn:hover{transform: none;}
#con3 .point_nav .point_btn + .point_btn{margin-left: -6px;}
@media screen and (max-width: 991px){
	#con3 .point_nav{width: 100%; max-width: 420px; margin: 24px auto 0;}
	#con3 .point_txt .point_no{font-size: 4rem; margin-bottom: 8px;}
}
@media (prefers-reduced-motion: reduce){
	#con3 .point_dot:after{transition: none;}
}

/* 機能紹介（PC）：画像は画面の端から出てきて、ブロックが画面の中央に来たときに定位置に寄る。
   --d（中央で0、上下の端で1。design.js）に合わせて画像を外側（画面の端の方向）へずらす。
   外側へずらすだけなので画面端に隙間は出ない。入場アニメーションは横移動を重ねず、ふわっと表示だけにする */
@keyframes media_fade_in{from{opacity: 0;} to{opacity: 1;}}
@media screen and (min-width: 992px){
	html.has-anim #con4 .feature_panel .video_box{margin-right: 0; transform: translateX(calc(var(--d, 0) * 220px)); will-change: transform;}
	html.has-anim #con4 .feature_block.is-rev .feature_panel .video_box{margin-left: 0; transform: translateX(calc(var(--d, 0) * -220px));}
	html.has-anim #con4 .feature_block.is-in .feature_panel.is-active .panel_media,
	html.has-anim #con4 .feature_block.is-rev.is-in .feature_panel.is-active .panel_media{animation: media_fade_in .8s ease .1s both;}
}

/* ===== 3つの特長（#con3）調整 2026-10-23 その2 =====
   ・見出しの下に POINT 1〜3 のタブ（線と矢印は廃止）
   ・スクショを小さく（文章の列を広げ、画像は 16:9）
   ・02（.is-rev）は画像を左、画面の左端まで */
#con3 .point_slider{margin-top: 40px;}
#con3 .point_tabs{
	display: flex;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 56px;
	padding: 6px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
}
#con3 .point_tabs li{flex: 1 1 0; min-width: 0;}
#con3 .point_tabs .point_dot{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: auto;
	padding: 12px 24px;
	overflow: visible;
	color: var(--white);
	background: transparent;
	border: 0;
	border-radius: 999px;
	white-space: nowrap;
	cursor: pointer;
	transition: color .3s, background-color .3s, box-shadow .3s;
}
#con3 .point_tabs .point_dot:before,
#con3 .point_tabs .point_dot:after{content: none;}
#con3 .point_tabs .point_dot:hover{background: rgba(255, 255, 255, 0.16);}
#con3 .point_tabs .point_dot.is-active{color: var(--color1); background: var(--white); box-shadow: 0 6px 18px rgba(0, 40, 120, 0.25);}
#con3 .pt_no{font-family: "Figtree", "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .1em; opacity: .85;}
#con3 .pt_name{font-size: 15px; font-weight: 700;}
#con3 .point_tabs .point_dot:focus-visible{outline: 3px solid var(--white); outline-offset: 2px;}

/* スクショを小さく */
#con3 .point_card{grid-template-columns: 44cqw minmax(0, 1fr); gap: 5cqw;}
#con3 .point_shot img{aspect-ratio: 16 / 9;}
/* 02：画像を左（画面の左端まで） */
@media screen and (min-width: 992px){
	#con3 .point_slide.is-rev .point_card{
		grid-template-columns: minmax(0, 1fr) 44cqw;
		margin-right: 0;
		margin-left: calc(50% - 50vw);
	}
	#con3 .point_slide.is-rev .point_shot{
		order: -1;
		border-right: 6px solid rgba(255, 255, 255, 0.92);
		border-left: 0;
		border-radius: 0 20px 20px 0;
		transform: translateX(-90px);
	}
	#con3 .point_slide.is-rev.is-active .point_shot{transform: none;}
}
@media screen and (max-width: 991px){
	#con3 .point_card{grid-template-columns: 1fr;}
	#con3 .point_tabs{margin-bottom: 32px;}
}
/* SP：タブは3等分で2行（POINT n／機能名）。背景の六角形は小さく */
@media screen and (max-width: 767px){
	#con3 .point_tabs{width: 100%; gap: 4px; padding: 4px; border-radius: 16px;}
	#con3 .point_tabs .point_dot{flex-direction: column; gap: 2px; padding: 8px 4px; border-radius: 12px; white-space: normal;}
	#con3 .pt_no{font-size: 12px;}
	#con3 .pt_name{font-size: 12px; line-height: 1.4;}
	#con3.point_section:before{width: 320px; height: 320px; right: -80px; bottom: -90px;}
}

/* ===== 3つの特長（#con3）その3 =====
   ・背景はロゴの色（青 #048CD4 → #3992E4 → 紫寄りの青 #8A9BFF）を不規則に重ねたグラデーション
   ・背景の六角形は薄く、PCは左右両方に（どのスライドでも片側は画像にかぶらず見える）
   ・タブは「01〜03」だけの六角形ボタン */
#con3.point_section{
	background-color: #1F8BDD;
	background-image:
		radial-gradient(60% 70% at 92% 8%, rgba(138, 155, 255, 0.85) 0%, transparent 62%),
		radial-gradient(45% 55% at 70% 95%, rgba(95, 149, 240, 0.9) 0%, transparent 65%),
		radial-gradient(55% 65% at 4% 88%, rgba(4, 140, 212, 1) 0%, transparent 70%),
		radial-gradient(40% 45% at 30% 10%, rgba(57, 146, 228, 0.9) 0%, transparent 70%),
		radial-gradient(35% 40% at 52% 52%, rgba(120, 140, 250, 0.35) 0%, transparent 70%),
		linear-gradient(120deg, #048CD4 0%, #2F8FE2 45%, #6F93F2 100%);
}
#con3.point_section:before,
#con3.point_section:after{
	content: "";
	position: absolute;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -70 330 330'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2' opacity='.14'%3E%3Cpath d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath transform='translate(108 0)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath transform='translate(54 94)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3Cpath transform='translate(162 94)' d='M0-60 52-30 52 30 0 60-52 30-52-30Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
#con3.point_section:before{right: -140px; bottom: -170px; width: 620px; height: 620px;}
#con3.point_section:after{left: -160px; top: -120px; width: 540px; height: 540px; transform: rotate(180deg);}
@media screen and (max-width: 991px){
	#con3.point_section:after{display: none;}
}
@media screen and (max-width: 767px){
	#con3.point_section:before{width: 320px; height: 320px; right: -80px; bottom: -90px;}
}

/* 六角形のタブ（01〜03） */
#con3 .point_tabs{gap: 14px; width: auto; padding: 0; background: none; border: 0; border-radius: 0; margin-bottom: 56px;}
#con3 .point_tabs li{flex: 0 0 auto;}
#con3 .point_tabs .point_dot{
	position: relative;
	width: 64px;
	height: 72px;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--white);
	filter: drop-shadow(0 6px 12px rgba(0, 40, 120, 0));
	transition: color .3s, filter .3s, transform .3s;
}
/* 六角形は2枚重ね：外側（:before）が枠線、内側（:after）が塗り */
#con3 .point_tabs .point_dot:before,
#con3 .point_tabs .point_dot:after{
	content: "";
	position: absolute;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	transition: background-color .3s;
}
#con3 .point_tabs .point_dot:before{inset: 0; background: rgba(255, 255, 255, 0.6);}
#con3 .point_tabs .point_dot:after{inset: 1.5px; background: #2A8DE0;}
#con3 .point_tabs .pt_no{position: relative; z-index: 1; font-size: 18px; font-weight: 800; letter-spacing: .04em; opacity: 1;}
#con3 .point_tabs .point_dot:hover{background: none; transform: translateY(-2px);}
#con3 .point_tabs .point_dot:hover:after{background: #4A98EA;}
#con3 .point_tabs .point_dot.is-active{color: var(--color1); background: none; box-shadow: none; filter: drop-shadow(0 8px 16px rgba(0, 40, 120, 0.35));}
#con3 .point_tabs .point_dot.is-active:before,
#con3 .point_tabs .point_dot.is-active:after{background: var(--white);}
@media screen and (max-width: 767px){
	#con3 .point_tabs{width: auto; gap: 10px; padding: 0; border-radius: 0; margin-bottom: 28px;}
	#con3 .point_tabs .point_dot{width: 54px; height: 61px; padding: 0; border-radius: 0;}
	#con3 .point_tabs .pt_no{font-size: 16px;}
}

/* 機能紹介：タブで切り替えたときは、画像が画面の端から出てくる（PC） */
@keyframes media_edge_r{0%{opacity: 0; transform: translateX(45vw);} 25%{opacity: 1;} 100%{opacity: 1; transform: none;}}
@keyframes media_edge_l{0%{opacity: 0; transform: translateX(-45vw);} 25%{opacity: 1;} 100%{opacity: 1; transform: none;}}
@media screen and (min-width: 992px){
	html.has-anim #con4 .feature_block.is-switched .feature_panel.is-active .panel_media{animation: media_edge_r .9s cubic-bezier(.22, .61, .36, 1) both;}
	html.has-anim #con4 .feature_block.is-rev.is-switched .feature_panel.is-active .panel_media{animation-name: media_edge_l;}
}

/* ===== 3つの特長（#con3）その4：六角形のタブを廃止し、枚数を示す線＋スクロールで切り替え ===== */
#con3 .point_progress{display: flex; justify-content: center; gap: 10px; margin: 0 auto 48px;}
#con3 .point_progress .point_dot{
	position: relative;
	width: 64px;
	height: 3px;
	padding: 0;
	background: rgba(255, 255, 255, 0.3);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}
/* 押しやすいよう当たり判定を上下に広げる */
#con3 .point_progress .point_dot:before{content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px;}
#con3 .point_progress .point_dot:after{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--white);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
#con3 .point_progress .point_dot.is-active:after{transform: scaleX(1);}
#con3 .point_progress .point_dot:focus-visible{outline: 3px solid var(--white); outline-offset: 6px;}
/* PC：スクロールに合わせて線が伸びる（--pr は design.js。0〜1） */
#con3.is-scrolly .point_progress .point_dot:after{transition: none;}
#con3.is-scrolly .point_progress .point_dot:nth-child(1):after{transform: scaleX(clamp(0, calc(var(--pr, 0) * 3), 1));}
#con3.is-scrolly .point_progress .point_dot:nth-child(2):after{transform: scaleX(clamp(0, calc(var(--pr, 0) * 3 - 1), 1));}
#con3.is-scrolly .point_progress .point_dot:nth-child(3):after{transform: scaleX(clamp(0, calc(var(--pr, 0) * 3 - 2), 1));}
/* PC：ブロックを画面に固定（高さ3画面分。1画面ぶんの余白で残りの2枚を順に見せる） */
#con3.point_section.is-scrolly{height: 300vh; padding: 0 !important;}
#con3.is-scrolly > .container-lg{
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 64px !important;
	padding-bottom: 24px !important;
}
#con3.is-scrolly .point_slider{margin-top: 24px;}
#con3.is-scrolly .point_progress{margin-bottom: 32px;}
/* 背景の六角形もブロックと一緒に固定（固定中に流れていかないように） */
#con3.is-scrolly.point_section:before,
#con3.is-scrolly.point_section:after{position: fixed;}
#con3.point_section{clip-path: inset(0);}
@media screen and (max-width: 767px){
	#con3 .point_progress{margin-bottom: 28px;}
	#con3 .point_progress .point_dot{width: 48px;}
}

/* 機能紹介：タブ切り替え時の画像は、左右から少しだけ（60px）ふわっと出す */
@keyframes media_edge_r{from{opacity: 0; transform: translateX(60px);} to{opacity: 1; transform: none;}}
@keyframes media_edge_l{from{opacity: 0; transform: translateX(-60px);} to{opacity: 1; transform: none;}}
@media screen and (min-width: 992px){
	html.has-anim #con4 .feature_block.is-switched .feature_panel.is-active .panel_media{animation-duration: .7s;}
}

/* ===== TOP FV：大きい画面は操作動画、手前の小さい画面はスライドショー ===== */
#main_img .fv_movie video{display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; background: var(--white);}
#main_img .fv_slides{aspect-ratio: 16 / 9;}
#main_img .fv_slides img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top;
	opacity: 0;
	transition: opacity .9s ease;
}
#main_img .fv_slides img.is-active{opacity: 1;}
@media (prefers-reduced-motion: reduce){
	#main_img .fv_slides img{transition: none;}
}

/* ===== TOP FV：操作画面（動画）を大きく。右は画面の端まで伸ばして見切れさせる ===== */
#main_img .fv_movie{border-right: 0; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;}
@media screen and (min-width: 992px){
	#main_img .fv_movie{width: calc(100% + max(40px, (100vw - 1180px) / 2) + 40px); margin-left: -40px; position: relative; z-index: 1;}
}
@media screen and (max-width: 991px){
	#main_img .fv_movie{width: calc(100% + 30px);}
}
@media screen and (max-width: 575px){
	#main_img .fv_movie{width: calc(100% + 20px);}
}

/* ===== 3つの特長（#con3）その5：02も画像を右に。枚数を示す線は「つながった1本の線」 =====
   PC（固定表示のとき）：線は縦にして画面の左側に置き、スクロールに合わせて上から白く伸びる。
   それ以外：見出しの下に横向きの1本の線 */
#con3 .point_progress{gap: 0; width: 192px;}
#con3 .point_progress .point_dot{flex: 1 1 0; width: auto; border-radius: 0;}
#con3 .point_progress .point_dot:first-child{border-radius: 999px 0 0 999px;}
#con3 .point_progress .point_dot:last-child{border-radius: 0 999px 999px 0;}
#con3 .point_progress .point_dot.is-done:after{transform: scaleX(1);}
@media screen and (max-width: 767px){
	#con3 .point_progress{width: 150px;}
}
#con3.is-scrolly .point_progress{
	position: absolute;
	left: max(20px, calc((100vw - 1180px) / 2 - 64px));
	top: 50%;
	flex-direction: column;
	width: 3px;
	height: 260px;
	margin: 0;
	transform: translateY(-20%);
	z-index: 2;
}
#con3.is-scrolly .point_progress .point_dot{width: 3px; height: auto;}
#con3.is-scrolly .point_progress .point_dot:first-child{border-radius: 999px 999px 0 0;}
#con3.is-scrolly .point_progress .point_dot:last-child{border-radius: 0 0 999px 999px;}
#con3.is-scrolly .point_progress .point_dot:before{left: -14px; right: -14px; top: 0; bottom: 0;}
#con3.is-scrolly .point_progress .point_dot:after{transform-origin: center top;}
#con3.is-scrolly .point_progress .point_dot:nth-child(1):after{transform: scaleY(clamp(0, calc(var(--pr, 0) * 3), 1));}
#con3.is-scrolly .point_progress .point_dot:nth-child(2):after{transform: scaleY(clamp(0, calc(var(--pr, 0) * 3 - 1), 1));}
#con3.is-scrolly .point_progress .point_dot:nth-child(3):after{transform: scaleY(clamp(0, calc(var(--pr, 0) * 3 - 2), 1));}
#con3.is-scrolly .point_slider{margin-top: 40px;}
/* FV：動画は左へははみ出さない（キャッチ文にかぶらないように） */
@media screen and (min-width: 992px){
	#main_img .fv_movie{width: calc(100% + max(40px, (100vw - 1180px) / 2)); margin-left: 0;}
}
/* 縦の線：文章の左外側（画面の左端から最低16px） */
#con3.is-scrolly .point_progress{left: max(calc((100% - 100vw) / 2 + 16px), -56px);}
#con3.is-scrolly .point_slider{position: relative;}
#con3.is-scrolly .point_progress{transform: translateY(-50%);}

/* ===== TOP 2026-10-23 その6 ===== */
/* 広告運用を、もっと確実に〜／専門的な知識がなくても：見出しの行間 */
#con1 .con_title,
#con2 .con_title{line-height: 1.4;}

/* 広告運用を、もっと確実に〜：画像を Cyteki の画面スクショに（白枠＋影。右は画面の端まで伸ばす） */
#con1 .con_shot{
	align-self: center;
	margin: 0 calc(-1 * max(40px, (100vw - 1180px) / 2)) 0 48px;
	overflow: hidden;
	background: var(--white);
	border: 5px solid var(--white);
	border-right: 0;
	border-radius: 16px 0 0 16px;
	box-shadow: 0 20px 50px var(--color3_50);
}
#con1 .con_shot img{aspect-ratio: 16 / 9; object-fit: cover; object-position: left top;}
@media screen and (max-width: 991px){
	#con1 .con_shot{width: 85%; margin: 0 auto 24px; border-right: 5px solid var(--white); border-radius: 16px;}
}
@media screen and (max-width: 575px){
	#con1 .con_shot{width: 100%; margin-top: 0;}
}

/* 専門的な知識がなくても：画像を大きく（PCは画像の列を広げ、左は画面の端まで） */
@media screen and (min-width: 992px){
	#con2 .con_box:first-of-type .con_item1{
		flex: 0 0 auto;
		width: calc(56% + max(40px, (100vw - 1180px) / 2));
		margin-left: calc(-1 * max(40px, (100vw - 1180px) / 2));
	}
	#con2 .con_box:first-of-type .con_item2{width: 44%;}
}
@media screen and (min-width: 768px) and (max-width: 991px){
	#con2 .con_box:first-of-type .con_item1{width: 85%;}
}

/* ===== 3つの特長：タブレット・SPもスクロールで切り替え（高さ600px以上のとき）。線はスクショの下に横向き ===== */
#con3 .point_slider{display: flex; flex-direction: column;}
#con3 .point_slider > .point_viewport{order: 1;}
#con3 .point_slider > .point_progress{order: 2;}
@media screen and (min-width: 992px){
	#con3 .point_slider > .point_progress{order: 0;}
}
@media screen and (max-width: 991px){
	#con3 .point_progress{margin: 24px auto 0;}
	#con3.is-scrolly > .container-lg{height: 100vh; height: 100svh; padding-top: 72px !important; padding-bottom: 16px !important;}
	#con3.is-scrolly .con_title{margin-bottom: 0 !important;}
	#con3.is-scrolly .sub_title{margin-bottom: 8px !important;}
	#con3.is-scrolly .point_slider{margin-top: 16px;}
	#con3.is-scrolly .point_card{gap: 14px;}
	#con3.is-scrolly .point_txt{padding: 0;}
	#con3.is-scrolly .point_txt .point_no{font-size: 2.8rem; margin-bottom: 4px;}
	#con3.is-scrolly .point_txt .box_title2{font-size: 1.4rem; margin-bottom: 8px;}
	#con3.is-scrolly .point_txt .box_txt1{font-size: 14px; line-height: 1.8;}
	#con3.is-scrolly .point_progress{margin-top: 18px; margin-bottom: 0;}
	/* 縦の線の指定（PC用）を打ち消して横向きに */
	#con3.is-scrolly .point_progress{position: static; flex-direction: row; width: 192px; height: 3px; transform: none;}
	#con3.is-scrolly .point_progress .point_dot{width: auto; height: 3px;}
	#con3.is-scrolly .point_progress .point_dot:first-child{border-radius: 999px 0 0 999px;}
	#con3.is-scrolly .point_progress .point_dot:last-child{border-radius: 0 999px 999px 0;}
	#con3.is-scrolly .point_progress .point_dot:before{left: 0; right: 0; top: -14px; bottom: -14px;}
	#con3.is-scrolly .point_progress .point_dot:after{transform-origin: left center;}
	#con3.is-scrolly .point_progress .point_dot:nth-child(1):after{transform: scaleX(clamp(0, calc(var(--pr, 0) * 3), 1));}
	#con3.is-scrolly .point_progress .point_dot:nth-child(2):after{transform: scaleX(clamp(0, calc(var(--pr, 0) * 3 - 1), 1));}
	#con3.is-scrolly .point_progress .point_dot:nth-child(3):after{transform: scaleX(clamp(0, calc(var(--pr, 0) * 3 - 2), 1));}
}
@media screen and (min-width: 576px) and (max-width: 991px){
	#con3.is-scrolly .point_shot{width: 80%; margin: 0 auto;}
}
@media screen and (max-width: 767px){
	#con3.is-scrolly .point_progress{width: 150px;}
}
@media screen and (max-width: 991px){
	#con3.is-scrolly .point_progress{margin-left: auto; margin-right: auto;}
}

/* ===== TOP その7：#con1 は画像を左、#con2 は画像を右に入れ替え（PC）。タブレットは画像65% ===== */
@media screen and (min-width: 992px){
	/* #con1：画像（左・画面の左端まで）｜文章 */
	#con1 .con_shot{order: -1; margin: 0 48px 0 calc(-1 * max(40px, (100vw - 1180px) / 2)); border-right: 5px solid var(--white); border-left: 0; border-radius: 0 16px 16px 0;}
	#con1 .con_item{padding-left: 0 !important;}
	/* #con2：文章｜画像（右・画面の右端まで） */
	#con2 .con_box:first-of-type .con_item1{order: 2; margin-left: 0; margin-right: calc((100% - 100vw) / 2); /* 右は画面の端まで（コンテナ幅に関係なく、余白ぶんだけはみ出す） */ padding-right: 0 !important; padding-left: 48px;}
	#con2 .con_box:first-of-type .con_item2{order: 1; padding-left: 0 !important; padding-right: 0;}
}
/* タブレット（768〜991px）：画像は65% */
@media screen and (min-width: 768px) and (max-width: 991px){
	#con1 .con_shot{width: 65%;}
	#con2 .con_box:first-of-type .con_item1{width: 65%;}
}
/* 3つの特長（タブレット以下）：スクショと線の間に余白 */
@media screen and (max-width: 991px){
	#con3 .point_progress,
	#con3.is-scrolly .point_progress{margin-top: 32px;}
	#con3 .point_shot{margin-bottom: 4px;}
}

/* ===== TOP その8 ===== */
/* 3つの特長（タブレット 576〜991px）：スクショの上下に余白、テキストの幅をスクショ（80%）にそろえる */
@media screen and (min-width: 576px) and (max-width: 991px){
	#con3 .point_txt,
	#con3.is-scrolly .point_txt{width: 80%; margin: 0 auto;}
	#con3 .point_shot,
	#con3.is-scrolly .point_shot{margin: 12px auto 16px;}
}
/* 3つの特長（SP）：タイトルの下に余白、スクショの下（線との間）は半分に */
@media screen and (max-width: 575px){
	#con3.is-scrolly .point_slider{margin-top: 28px;}
	#con3 .point_progress,
	#con3.is-scrolly .point_progress{margin-top: 14px;}
	#con3 .point_shot{margin-bottom: 0;}
}
/* 広告運用を、もっと確実に〜（SP）：FV下の余白を減らす */
@media screen and (max-width: 575px){
	#main_img .container-lg{padding-bottom: 64px;}
}
/* 専門的な知識がなくても（PC）：画像と文章を上下中央、画像は少し小さく、上に余白 */
@media screen and (min-width: 992px){
	#con2 .con_box:first-of-type{align-items: center !important; margin-top: 50px !important;}
	#con2 .con_box:first-of-type .con_item1{width: calc(48% + (100vw - 100%) / 2); margin-top: 0;}
	#con2 .con_box:first-of-type .con_item2{width: 52%; padding-bottom: 0 !important;}
}

/* 広告運用を、もっと確実に〜（PC）：文章と画像を上下中央にそろえる */
@media screen and (min-width: 992px){
	#con1 .con_box{align-items: center;}
	#con1 .con_shot{align-self: center;}
}

/* 画面端まで伸ばした画像が、縦スクロールバーの分（100vw が表示幅より広くなる）だけはみ出して横スクロールが出るのを防ぐ */
#con2{overflow-x: clip;}
#main_img{overflow-x: clip;}

/* ===== 3つの特長：スクロール切り替えをやめてスライド形式に（2026-10-23）=====
   線（3本つながった1本）はどの幅でもスクショの下・中央。自動送りの間は表示中の線が6秒かけて伸びる */
#con3 .point_slider > .point_progress{order: 2;}
#con3 .point_progress{margin: 32px auto 0; width: 192px;}
#con3 .point_progress .point_dot.is-active:after{transform: scaleX(1); transition: none;}
#con3.is-auto .point_progress .point_dot.is-active:after{animation: point_fill 6s linear both;}
#con3 .point_progress .point_dot.is-done:after{transform: scaleX(1);}
@keyframes point_fill{from{transform: scaleX(0);} to{transform: scaleX(1);}}
@media screen and (max-width: 991px){
	#con3 .point_progress{margin-top: 32px;}
}
@media screen and (max-width: 575px){
	#con3 .point_progress{margin-top: 16px; width: 150px;}
}
@media screen and (min-width: 576px) and (max-width: 991px){
	#con3 .point_shot{width: 80%;}
}

/* ===== TOP 全体確認での修正（2026-10-23）===== */
/* 文章が単語の途中や「す。」だけで折り返さないよう、文節で折り返す（対応ブラウザのみ。非対応でも表示は今まで通り） */
.con_txt,
#con4 .panel_txt p,
#con4 .benefit_item p,
#con3 .point_txt .box_txt1{word-break: auto-phrase; text-wrap: pretty;}
/* タブレットのFV：操作画面を画面の右端まで（コンテナの右余白40px分）伸ばす */
@media screen and (min-width: 576px) and (max-width: 991px){
	#main_img .fv_movie{width: calc(100% + 40px);}
}
/* タブレット・SPの機能紹介：画像の左端（ロゴ・メニュー）が切れないように */
@media screen and (max-width: 991px){
	#con4 .video_box video{object-position: left top;}
}
/* SPフッター：会社情報のまとまりを左端（20px）にそろえる */
@media screen and (max-width: 767px){
	footer .f_info{margin-left: 0 !important; margin-right: 0 !important;}
}
/* 長い本文は文節で折り返すと行の長さがガタつくので、普通の折り返し＋最後の行に1〜2文字だけ残らない指定のみにする。
   文節で折り返すのは短いカードの文章だけ */
.con_txt,
#con4 .panel_txt p,
#con3 .point_txt .box_txt1{word-break: normal;}
#con4 .benefit_item p{word-break: auto-phrase;}
/* タブレット・SPのFV：操作画面を画面の右端まで（幅の計算ではなく、右の余白を打ち消して伸ばす） */
@media screen and (max-width: 991px){
	#main_img .fv_movie{width: auto !important; margin-right: calc(50% - 50vw);}
}

/* ===== 3つの特長：白い線が表示中の位置へ移動する形＋左右に矢印（2026-10-23）=====
   線（3等分の1本）の上に、1/3幅の白いバーを重ね、--cur（0〜2、design.js）の位置へスライドさせる */
#con3 .point_slider > .point_ctrl{order: 2;}
#con3 .point_ctrl{display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 32px;}
#con3 .point_ctrl .point_progress{position: relative; margin: 0; width: 192px; height: 3px; background: rgba(255, 255, 255, 0.3); border-radius: 999px;}
#con3 .point_ctrl .point_progress .point_dot{background: transparent;}
#con3 .point_ctrl .point_progress .point_dot:after{content: none;}
#con3 .point_ctrl .point_progress:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% / 3);
	height: 100%;
	background: var(--white);
	border-radius: 999px;
	transform: translateX(calc(var(--cur, 0) * 100%));
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
	pointer-events: none;
}
#con3 .point_arrow{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	font-size: 16px;
	color: var(--white);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	cursor: pointer;
	transition: color .2s, background-color .2s;
}
#con3 .point_arrow:hover{color: var(--color1); background: var(--white);}
#con3 .point_arrow:focus-visible{outline: 3px solid var(--white); outline-offset: 3px;}
@media screen and (max-width: 575px){
	#con3 .point_ctrl{margin-top: 16px; gap: 16px;}
	#con3 .point_ctrl .point_progress{width: 150px;}
	#con3 .point_arrow{width: 40px; height: 40px;}
}
@media (prefers-reduced-motion: reduce){
	#con3 .point_ctrl .point_progress:after,
	#con3 .point_arrow{transition: none;}
}
#con3 .point_ctrl .point_prev{order: 0; margin: 0;}
#con3 .point_ctrl .point_progress{order: 1;}
#con3 .point_ctrl .point_next{order: 2; margin: 0;}
#con3 .point_ctrl .point_arrow:hover{transform: none;}
/* 矢印は線の右側に2つ並べる */
#con3 .point_ctrl .point_prev{order: 2; margin-left: 8px;}
#con3 .point_ctrl .point_next{order: 3; margin-left: -8px;}

/* ===== 全体レビュー（Chrome・画面幅を変えて確認）での修正 2026-10-23 ===== */
/* 見出し・カードの見出し・箇条書きは、文節で折り返す（「自動設／計」「可／視化」「体／制へ」のような切れ方を防ぐ）。
   長い本文（.con_txt など）は行の長さがガタつくので対象外 */
h2, h3, h4, h5, h6,
.box_title2,
.check_box li,
.cate_list li a,
.tab_content li,
.cate li,
#con4 .benefit_item h5{word-break: auto-phrase;}
/* 機能紹介（TOP・PC）：動画は上下が切れないよう左上基準に */
#con4 .video_box video{object-position: left top;}
/* 機能紹介ページ：英字ラベル（AI Support など）の灰色を濃く（薄い背景で読めるように） */
.feature .sub_title.txt_gray{color: #737C87 !important;}
/* 課題から探す・業界別（タブレット 768〜991px）：課題ボタンは2列に（3列だと最後の1文字だけ落ちる） */
@media screen and (min-width: 768px) and (max-width: 991px){
	.solution .cate_list li:nth-of-type(n){width: var(--twoColWidth); margin-right: var(--marginRight);}
	.solution .cate_list li:nth-of-type(2n){margin-right: var(--marginRightClear);}
}

/* ===== 広告運用を、もっと確実に〜（#con1）：AI広告分析の画面＋飛び出す分析パーツ =====
   画面は左寄せ（幅90%）。パーツは画面の右側・中央下に重ねる。
   出現：画面がふわっと出たあと、CTR/CVR → グラフ → カード（最後）の順に画面から飛び出す（.is-in は design.js） */
#con1 .con1_visual{position: relative; align-self: center; padding: 6% 0 4%; container-type: inline-size;}
#con1 .c1_main{
	width: 90%;
	overflow: hidden;
	background: var(--white);
	border: 5px solid var(--white);
	border-radius: 16px;
	box-shadow: 0 20px 50px var(--color3_50);
}
#con1 .c1_main img{aspect-ratio: 900 / 506; object-fit: cover;}
#con1 .c1_pop{
	position: absolute;
	z-index: 2;
	height: auto;
	background: var(--white);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 60, 140, 0.22), 0 2px 6px rgba(0, 60, 140, 0.08);
}
#con1 .c1_pop_rate{width: 40%; top: 2%; right: 8%;}
#con1 .c1_pop_chart{width: 42%; bottom: 0; right: 5%;}
/* カードはグラフの左端に少しかぶせる */
#con1 .c1_pop_cards{width: 37%; top: 50%; left: 22%; z-index: 3;}

/* 分析パーツの中身（HTML）。文字サイズは画像のときと同じように、画面（.con1_visual）の幅に合わせて伸び縮みさせる（cqw） */
#con1 .c1_pop{font-size: 1.5cqw; line-height: 1.3; color: #333; font-variant-numeric: tabular-nums;}
#con1 .c1_pop small{font-size: .55em; font-weight: 700;}
#con1 .c1_pop .is-meta{--c: #2F6FDE;}
#con1 .c1_pop .is-yt{--c: #E53935;}
#con1 .c1_pop .is-google{--c: #F2A93B;}
/* CTR・CVR */
#con1 .c1_pop_rate{display: grid; grid-template-columns: 1fr 1fr; gap: .8em; padding: 1.4em 1em 1.3em; text-align: center;}
#con1 .c1_rate_name{font-size: 1.15em; color: #444;}
#con1 .c1_rate_name span{display: block; margin-top: .15em; font-size: .72em; color: #9AA3AE;}
#con1 .c1_rate_val{margin: .45em 0 .55em; font-size: 3em; font-weight: 700; line-height: 1;}
#con1 .c1_rate_val small{margin-left: .1em;}
#con1 .c1_rate_val.is-ctr{color: #5E9BEF;}
#con1 .c1_rate_val.is-cvr{color: #5E9BEF;}
#con1 .c1_diff{display: inline-flex; gap: .6em; padding: .45em 1em; border-radius: 99px; font-size: .9em; font-weight: 700; white-space: nowrap;}
#con1 .c1_diff.is-up{color: #3D85E5; background: #E6F1FD;}
#con1 .c1_diff.is-down{color: #E53935; background: #FDECEC;}
/* 媒体ごとの表示回数（グラフ＋合計） */
#con1 .c1_pop_chart{display: grid; grid-template-columns: 1fr 36%; gap: .9em; align-items: center; padding: 1.1em;}
#con1 .c1_legend{display: flex; gap: .7em; margin-bottom: .3em; font-size: .7em; color: #666; white-space: nowrap;}
#con1 .c1_pop i{display: inline-block; width: .7em; height: .7em; margin-right: .35em; border-radius: 50%; background: var(--c); vertical-align: -.02em;}
#con1 .c1_chart svg{display: block; width: 100%; height: auto; overflow: visible;}
#con1 .c1_grid line{stroke: #E6E9EE; stroke-width: 1;}
#con1 .c1_axis text{font-size: 15px; fill: #888;}
#con1 .c1_line{fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;}
#con1 .c1_totals{display: flex; flex-direction: column; gap: .5em;}
#con1 .c1_total{padding: .55em .75em; border-radius: .6em; background: #EEF1F5; font-size: .8em; color: #444; white-space: nowrap;}
#con1 .c1_total b{display: block; margin-top: .1em; font-size: 1.45em; font-weight: 500; color: #222;}
#con1 .c1_total.is-sum{background: var(--color1); color: var(--white);}
#con1 .c1_total.is-sum b{color: var(--white);}
/* IMP・クリック・CPC・消化金額 */
#con1 .c1_pop_cards{display: grid; grid-template-columns: 1fr 1fr; gap: .7em; padding: .7em; background: #F3F5F8;}
#con1 .c1_card{min-height: 6.4em; padding: .85em .9em; border-radius: .6em; background: var(--white); box-shadow: 0 1px 3px rgba(0, 40, 90, .07);}
#con1 .c1_card_name{font-size: .95em;}
#con1 .c1_card_val{margin: .3em 0 .2em; font-size: 1.5em; font-weight: 700; line-height: 1.1; color: var(--color1); white-space: nowrap;}
#con1 .c1_card_val small:first-child{margin-right: .15em;}
#con1 .c1_card_avg{font-size: .75em; color: #A3A9B1; white-space: nowrap;}
@media screen and (min-width: 992px){
	/* 画像は左の画面端まで。文章との間は64px */
	#con1 .con1_visual{order: -1; flex: 1 1 0; min-width: 0; margin: 0 64px 0 calc(-1 * max(40px, (100vw - 1180px) / 2));}
	#con1 .c1_main{border-left: 0; border-radius: 0 16px 16px 0;}
}
@media screen and (max-width: 991px){
	#con1 .con1_visual{width: 65%; margin: 40px auto 48px;}
}
@media screen and (max-width: 767px){
	#con1 .con1_visual{width: 80%;}
}
@media screen and (max-width: 575px){
	#con1 .con1_visual{width: 100%; margin: 24px auto 32px;}
	#con1 .c1_pop{border-radius: 8px; font-size: 1.65cqw;}
	#con1 .c1_pop_rate{width: 44%; right: 6%;}
	#con1 .c1_pop_chart{width: 46%; right: 4%;}
	#con1 .c1_pop_cards{width: 40%; left: 16%;} /* グラフ（左端50%）への重なりをPCと同じくらい（約6%）に */
}
html.has-anim #con1 .c1_main{opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s cubic-bezier(.22, .61, .36, 1);}
html.has-anim #con1 .c1_pop{opacity: 0; transform: translate(-14%, 18%) scale(.7); transition: opacity .5s ease, transform .8s cubic-bezier(.34, 1.45, .64, 1);}
html.has-anim #con1 .con1_visual.is-in .c1_main,
html.has-anim #con1 .con1_visual.is-in .c1_pop{opacity: 1; transform: none;}
html.has-anim #con1 .con1_visual.is-in .c1_pop_rate{transition-delay: .5s;}
html.has-anim #con1 .con1_visual.is-in .c1_pop_chart{transition-delay: .7s;}
html.has-anim #con1 .con1_visual.is-in .c1_pop_cards{transition-delay: .9s;}
/* グラフの線は左から引かれる（数字が増えていく動きは design.js） */
html.has-anim #con1 .c1_line{stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease-out 1s;}
html.has-anim #con1 .con1_visual.is-in .c1_line{stroke-dashoffset: 0;}

/* ===== 専門的な知識がなくても（#con2）：手前に作れる広告の例が横に流れる ===== */
#con2 .con_box:first-of-type .con_item1{position: relative; display: block !important; padding-bottom: 120px;}
#con2 .con_img1{height: auto;}
#con2 .ad_marquee{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	overflow: hidden;
	padding: 20px 0 24px;
	/* 左だけぼかす（右は画面の端から出てくるように見せる） */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%);
	mask-image: linear-gradient(to right, transparent, #000 8%);
}
#con2 .ad_track{display: flex; align-items: flex-end; gap: 20px; padding-right: 20px; flex-shrink: 0; animation: ad_flow 40s linear infinite;}
@keyframes ad_flow{from{transform: translateX(0);} to{transform: translateX(-100%);}}
#con2 .ad_item{flex: 0 0 auto; height: 240px;}
#con2 .ad_item img{display: block; height: 100%; width: auto;}
@media screen and (max-width: 991px){
	#con2 .con_box:first-of-type .con_item1{padding-bottom: 96px;}
	#con2 .ad_item{height: 200px;}
}
@media screen and (max-width: 575px){
	#con2 .con_box:first-of-type .con_item1{padding-bottom: 72px;}
	#con2 .ad_track{gap: 12px; padding-right: 12px;}
	#con2 .ad_item{height: 160px;}
	#con2 .ad_marquee{padding: 12px 0 16px;}
}
@media (prefers-reduced-motion: reduce){
	#con2 .ad_track{animation: none;}
	#con2 .ad_marquee{overflow-x: auto;}
}

/* ===== 2026-10-23 調整 ===== */
/* 専門的な知識：流れる広告は、スマホ画面サイズ（9:16）の画像だけを同じ大きさ・同じ枠で */
#con2 .ad_item{height: auto; width: 162px;}
#con2 .ad_item img{width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; border: 4px solid var(--white); border-radius: 14px; box-shadow: 0 6px 8px rgba(0, 60, 140, 0.1); filter: none;}
@media screen and (max-width: 991px){
	#con2 .ad_item{width: 140px;}
}
@media screen and (max-width: 575px){
	#con2 .ad_item{width: 110px;}
	#con2 .ad_item img{border-width: 3px; border-radius: 10px;}
}


/* 専門的な知識（タブレット以下）：流れる広告は後ろの画像より下にずらし、画面の左右いっぱいに */
@media screen and (max-width: 991px){
	#con2 .con_box:first-of-type .con_item1{padding-bottom: 170px;}
	#con2 .ad_marquee{
		left: 50%;
		right: auto;
		width: 100vw;
		margin-left: -50vw;
		bottom: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}
}
@media screen and (max-width: 575px){
	#con2 .con_box:first-of-type .con_item1{padding-bottom: 140px;}
}

/* 動画の下地は白に（スマホなど小さい表示で、動画と枠の間にできる1px未満のすき間が黒い線に見えないように） */
#con4 .video_box video{background-color: var(--white);}

/* 機能紹介タブ：薄い青の帯だと「制作」の背景（薄い青）に溶けてボタンに見えないので、
   帯は白＋枠線＋影でどの背景でも浮かせ、選択中のタブは青で塗る。選んでいないタブはホバーで薄い青 */
#con4 .feature_tabs{
	background-color: var(--white);
	border: 1px solid #CFDFEE;
	box-shadow: 0 6px 18px rgba(0, 141, 212, 0.14);
}
#con4 .feature_tab{transition: color .2s, background-color .2s;}
#con4 .feature_tab:hover{color: var(--color1); background-color: #EAF3FB;}
#con4 .feature_tab.is-active,
#con4 .feature_tab.is-active:hover{
	color: var(--white);
	background: linear-gradient(to right, var(--color1), var(--color3));
	box-shadow: 0 3px 10px var(--color3_50);
}

/* ===== TOP FV（SP・767px以下）：見出し → 操作画面 → 説明文・バッジ → 横幅いっぱいのボタン の順に =====
   操作画面は右端まで伸ばさず、左右に余白をとった角丸カード（青のグラデーション枠）に。PC・タブレットは変更なし */
@media screen and (max-width: 767px){
	#main_img .container-lg{align-items: stretch !important;}
	#main_img .catch,
	#main_img .catch_lead{text-align: left !important;}
	#main_img .catch h2{order: 1; margin-bottom: 0 !important; line-height: 1.4;}
	#main_img .fv_visual{order: 2; width: 100%; max-width: none; margin-top: 28px !important; padding-bottom: 0;}
	#main_img .catch_lead{order: 3; margin-top: 44px; font-size: 15px; line-height: 1.9;}
	#main_img .fv_badge{order: 4; width: 140px; margin: 16px 0 0 !important;}
	#main_img .fv_cta{order: 5; margin-top: 24px !important;}
	#main_img .fv_cta .btn{display: block !important; width: 100%; padding: 1rem 1.5rem !important;}

	#main_img .fv_movie{
		width: auto !important;
		margin-right: 0;
		padding: 3px;
		border: 0;
		border-radius: 18px !important;
		background: linear-gradient(135deg, var(--color1), var(--color3));
		box-shadow: 0 18px 40px var(--color3_50);
	}
	/* 角丸は枠（18px）から線の太さ（3px）を引いた値に */
	#main_img .fv_movie video{border-radius: 15px;}
	/* サイテキくんは画面の右下に少しはみ出して乗せる */
	#main_img .catch_chara{--chara-w: 100px; right: -10px; bottom: -52px;}
	#main_img .chara_bubble{bottom: 70%; font-size: 11px;}
	#main_img .catch_lead{margin-top: 56px;}
}

/* 申込みページ：サイテキくんの吹き出しを2つ（かんたん入力／クレジットカード不要）にし、同じ位置で4秒ごとに交互に表示 */
.signup .form_bubble{animation: form_bubble_swap 8s ease-in-out infinite;}
.signup .form_bubble2{opacity: 0; animation-delay: -4s;}
@keyframes form_bubble_swap{
	0%, 44%{opacity: 1; transform: translateY(0);}
	50%, 94%{opacity: 0; transform: translateY(4px);}
	100%{opacity: 1; transform: translateY(0);}
}
/* 動きを減らす設定では切り替えず、1つ目だけ表示 */
@media (prefers-reduced-motion: reduce){
	.signup .form_bubble{animation: none;}
}

/* ===== 専門的な知識がなくても（#con2）：テンプレートの対応業種（イメージしやすい業態を一単語のタグで） ===== */
#con2 .industry_box{margin-top: 28px; padding-top: 24px; border-top: 1px solid #DCE7F2;}
#con2 .industry_title{font-size: 15px;}
#con2 .industry_tags{gap: 8px;}
#con2 .industry_tags li{
	padding: 5px 12px;
	border: 1px solid #CFE2F5;
	border-radius: 6px;
	background: #EEF6FD;
	font-size: 13px;
	line-height: 1.5;
	color: #1F5E8C;
}
#con2 .industry_tags li.is-etc{padding-left: 4px; padding-right: 4px; border-color: transparent; background: none; color: #8A99A8;}
@media screen and (max-width: 575px){
	#con2 .industry_tags{gap: 6px;}
	#con2 .industry_tags li{padding: 4px 10px; font-size: 12px;}
}

/* ===== 3つの特長（#con3）：01・02 は操作画面の動画（point1.mp4・point2.mp4）。画像と同じ16:9で表示 ===== */
#con3 .point_shot video{display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background-color: var(--white);}


/* ===== 3つの特長（#con3）03：スクショ（shot1.png）＋画面から飛び出す分析パーツ（#con1 と同じ作り）=====
   パーツは実際の画面の部品（ホームの「広告消化金額」、AI分析結果の媒体別の成果）をHTMLで再現。
   文字の大きさは画面の幅に合わせて伸び縮み（cqw）。スライド03が表示されたら順に飛び出し、数字が増える（design.js） */
#con3 .point_shot_pop{container-type: inline-size;}
#con3 .p3_pop{
	--meta: #2F6FDE; --yt: #E53935; --google: #F2A93B;
	position: absolute; z-index: 2;
	padding: 1.6cqw;
	border-radius: 1.4cqw;
	background: var(--white);
	box-shadow: 0 18px 40px rgba(0, 60, 140, 0.25), 0 2px 6px rgba(0, 60, 140, 0.08);
	font-size: 1.35cqw; line-height: 1.3; color: #333;
	font-variant-numeric: tabular-nums;
}
#con3 .p3_pop i{display: inline-block; width: .75em; height: .75em; margin-right: .35em; border-radius: 50%; vertical-align: -.02em;}
#con3 .p3_pop i.is-meta{background: var(--meta);}
#con3 .p3_pop i.is-yt{background: var(--yt);}
#con3 .p3_pop i.is-google{background: var(--google);}
/* 広告消化金額（ドーナツグラフ＋合計） */
#con3 .p3_pop_cost{left: 3%; bottom: 4%; width: 40%;}
#con3 .p3_head{margin: 0 0 .5em; font-size: 1.2em; font-weight: 700;}
#con3 .p3_legend{display: flex; gap: .9em; margin-bottom: .6em; font-size: .85em; color: #666; white-space: nowrap;}
#con3 .p3_cost{display: grid; grid-template-columns: 1fr 44%; gap: 1em; align-items: center;}
#con3 .p3_donut{display: block; width: 100%; height: auto; transform: rotate(-90deg);}
#con3 .p3_donut circle{fill: none; stroke-width: 18; stroke-dashoffset: var(--off);}
#con3 .p3_donut .is-meta{stroke: var(--meta);}
#con3 .p3_donut .is-yt{stroke: var(--yt);}
#con3 .p3_donut .is-google{stroke: var(--google);}
#con3 .p3_totals{display: flex; flex-direction: column; gap: .45em;}
#con3 .p3_total{padding: .5em .7em; border-radius: .5em; background: #EEF1F5; font-size: .82em; color: #444; white-space: nowrap;}
#con3 .p3_total b{display: block; margin-top: .1em; font-size: 1.35em; font-weight: 500; color: #222;}
#con3 .p3_total.is-sum{background: var(--color1); color: var(--white);}
#con3 .p3_total.is-sum b{color: var(--white);}
/* 媒体別の成果（AI分析結果） */
#con3 .p3_pop_media{right: 4%; top: 25%; width: 50%; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; background: #F5F7FA;}
#con3 .p3_media{padding: 1em; border-radius: .8em; background: var(--white);}
#con3 .p3_mname{display: flex; align-items: center; gap: .35em; margin: 0 0 .7em; font-size: 1.2em; font-weight: 700;}
#con3 .p3_mname b{font-size: 1.05em; line-height: 1;}
#con3 .p3_g{color: #4285F4;}
#con3 .p3_m{color: #222;}
#con3 .p3_media dl{display: grid; grid-template-columns: 1fr 1fr; gap: .7em .6em; margin: 0;}
#con3 .p3_media dt{font-size: .72em; font-weight: 400; color: #8A939D; white-space: nowrap;}
#con3 .p3_media dd{margin: .15em 0 0; font-size: 1.2em; font-weight: 700; color: #222; white-space: nowrap;}
#con3 .p3_media dd small{margin-left: .1em; font-size: .6em;}
@media screen and (max-width: 575px){
	#con3 .p3_pop{font-size: 1.5cqw;}
	#con3 .p3_pop_cost{left: 2%; width: 46%;}
	#con3 .p3_pop_media{right: 2%; top: 4%; width: 54%;}
	/* SPは2つのパーツが横に少し重なるので、上下にずらして重ならないように（幅は変えない） */
	#con3 .p3_pop_cost{bottom: 2%;}
}
/* 表示：スライド03が表示されたら、パーツが画面から順にぽんっと飛び出し、ドーナツが描かれる */
#con3 .p3_pop{opacity: 0; transform: translate(-14%, 18%) scale(.7); transition: opacity .5s ease, transform .8s cubic-bezier(.34, 1.45, .64, 1);}
#con3 .point_slide.is-active .p3_pop{opacity: 1; transform: none;}
#con3 .point_slide.is-active .p3_pop_media{transition-delay: .6s;}
#con3 .point_slide.is-active .p3_pop_cost{transition-delay: .9s;}
#con3 .p3_donut circle{stroke-dasharray: 0 100; transition: stroke-dasharray 1s ease-out 1.2s;}
#con3 .point_slide.is-active .p3_donut circle{stroke-dasharray: var(--len) 100;}
@media (prefers-reduced-motion: reduce){
	#con3 .p3_pop{opacity: 1; transform: none; transition: none;}
	#con3 .p3_donut circle{stroke-dasharray: var(--len) 100; transition: none;}
}

/* 機能紹介タブ（991px以下）：横スクロールの枠（overflow-x: auto）で、帯の影の上下が切れていたので、
   枠の上下に影の分（上12px・下26px）の余白をとり、その分だけ外側の余白を減らして位置は変えない */
@media screen and (max-width: 991px){
	#con4 .feature_tabs_wrap{margin: 28px -30px -2px; padding: 12px 30px 26px;}
	#con4 .cat_head + .feature_tabs_wrap{margin-top: -12px;}
}
@media screen and (max-width: 767px){
	#con4 .feature_tabs_wrap{margin: 20px -20px -6px; padding: 12px 20px 26px;}
	#con4 .cat_head + .feature_tabs_wrap{margin-top: -12px;}
}

/* ===== TOP FV：操作動画の見せ場をつなぐリール（2026-10-28）=====
   上のバー＝工程（戦略設計〜分析）。表示中の工程は青のグラデーションで、終わった工程は青文字に。バーの下の線は表示中の動画の進み具合（--p、design.js）。
   動画は2枚を重ね、切り替えるときは新しい方を少しズームしながら表示し、光の帯を横切らせる */
#main_img .fv_reel{position: relative;}
#main_img .reel_bar{
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	height: 46px;
	padding: 0 14px;
	background: var(--white);
	border-bottom: 1px solid #DCE6EF;
}
#main_img .reel_bar .shot_bar{display: flex; gap: 6px; flex: none;}
#main_img .reel_bar .shot_bar i{display: block; width: 9px; height: 9px; background: #C9D6E3; border-radius: 50%;}
#main_img .reel_steps{display: flex; align-items: center; gap: 4px; min-width: 0;}
#main_img .fv_step{
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: #9AA9B8;
	border-radius: 999px;
	transition: color .3s, background-color .3s, box-shadow .3s;
}
#main_img .fv_step span{font-size: 11px; letter-spacing: .04em; opacity: .8;}
#main_img .fv_step em{font-style: normal;}
#main_img .fv_step.is-done{color: var(--color1);}
/* 押せる工程（押すとその動画へ飛ぶ。design.js が .is-clickable を付ける） */
#main_img .fv_reel.is-clickable .fv_step{cursor: pointer;}
#main_img .fv_reel.is-clickable .fv_step:not(.is-active):hover{color: var(--color1); background: var(--color3_30);}
#main_img .fv_reel.is-clickable .fv_step:focus-visible{outline: 2px solid var(--color3); outline-offset: 2px;}
#main_img .fv_step.is-active{
	color: var(--white);
	background: linear-gradient(to right, var(--color1), var(--color3));
	box-shadow: 0 3px 10px var(--color3_50);
}
/* 工程の間の矢印 */
#main_img .fv_step{position: relative;}
#main_img .fv_step + .fv_step{margin-left: 10px;}
#main_img .fv_step + .fv_step:before{
	content: "";
	position: absolute;
	left: -10px;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-top: 2px solid #C9D6E3;
	border-right: 2px solid #C9D6E3;
	transform: rotate(45deg);
}
#main_img .fv_step.is-active + .fv_step:before,
#main_img .fv_step.is-done + .fv_step:before,
#main_img .fv_step.is-active:before{border-color: var(--color3);}
/* 進み具合の線 */
#main_img .reel_progress{position: absolute; left: 0; right: 0; top: 45px; height: 3px; z-index: 3;}
#main_img .reel_progress i{
	display: block;
	height: 100%;
	background: linear-gradient(to right, var(--color1), var(--color3));
	transform-origin: left center;
	transform: scaleX(var(--p, 0));
}
#main_img .reel_stage{position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--white);}
#main_img .fv_reel .reel_video{
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .6s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
#main_img .fv_reel .reel_video.is-active{opacity: 1; transform: none; z-index: 1;}
/* 表示中の工程のラベル（左上。左下はサイテキくんが重なるので避ける） */
#main_img .reel_cap{
	position: absolute;
	left: 14px;
	top: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px 8px 11px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--color1);
	background: rgba(255, 255, 255, .92);
	border-radius: 999px;
	box-shadow: 0 6px 18px var(--color3_50);
	backdrop-filter: blur(4px);
}
#main_img .reel_cap i{
	background: linear-gradient(135deg, var(--color1), var(--color3));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
#main_img .reel_cap.is-in{animation: reel_cap_in .6s cubic-bezier(.2, .7, .2, 1.2);}
@keyframes reel_cap_in{
	from{opacity: 0; transform: translateX(-16px) scale(.9);}
	to{opacity: 1; transform: none;}
}
/* 切り替えの光の帯 */
#main_img .reel_flash{
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%);
	transform: translateX(-100%);
}
#main_img .reel_stage.is-switch .reel_flash{animation: reel_flash .8s ease-out;}
@keyframes reel_flash{
	from{transform: translateX(-100%);}
	to{transform: translateX(100%);}
}
/* サイテキくんの吹き出し：工程が変わるたびにポンと出し直す */
#main_img .chara_bubble.is-pop{animation: chara_bubble 4s ease-in-out infinite, bubble_pop .5s cubic-bezier(.2, .7, .2, 1.4);}
@keyframes bubble_pop{
	from{opacity: 0; scale: .7;}
	to{opacity: 1; scale: 1;}
}
@media (prefers-reduced-motion: reduce){
	#main_img .fv_reel .reel_video,
	#main_img .fv_step{transition: none;}
	#main_img .reel_cap.is-in,
	#main_img .reel_stage.is-switch .reel_flash,
	#main_img .chara_bubble.is-pop{animation: none;}
}
/* タブレット：少し詰める */
@media screen and (max-width: 991px){
	#main_img .reel_bar{gap: 10px;}
	#main_img .fv_step{padding: 5px 9px; font-size: 12px;}
}
/* SP：枠は角丸カード（上のバーと動画で角丸を分ける）。工程は番号だけにし、表示中の工程だけ名前を出す */
@media screen and (max-width: 767px){
	#main_img .fv_reel .reel_bar{height: 40px; padding: 0 10px; border-radius: 15px 15px 0 0;}
	#main_img .fv_reel .reel_bar .shot_bar{display: none;}
	#main_img .fv_reel .reel_stage{border-radius: 0 0 15px 15px;}
	#main_img .fv_reel .reel_video{border-radius: 0;}
	#main_img .reel_progress{top: 42px; left: 3px; right: 3px;}
	#main_img .reel_steps{gap: 2px; width: 100%; justify-content: space-between;}
	#main_img .fv_step{gap: 0; padding: 5px 7px; font-size: 11px;}
	#main_img .fv_step span{font-size: 11px; opacity: 1;}
	#main_img .fv_step + .fv_step{margin-left: 0;}
	#main_img .fv_step + .fv_step:before{display: none;}
	/* 名前は表示中の工程だけ（幅を広げて出す） */
	#main_img .fv_step em{max-width: 0; overflow: hidden; transition: max-width .4s ease;}
	#main_img .fv_step.is-active{gap: 4px;}
	#main_img .fv_step.is-active em{max-width: 5em;}
	#main_img .reel_cap{left: 8px; top: 8px; padding: 6px 10px 6px 8px; font-size: 11px; gap: 4px;}
}

/* ===== TOP FV：実績・特長の月桂樹バッジ（2026-10-28）=====
   大きさは並べる幅で決まり、文字は cqw（バッジの幅に対する割合）で一緒に拡大縮小する。
   PC・タブレット：特許出願中の下に左寄せ。SP：ボタンの下に横幅いっぱいで3つ */
#main_img .fv_laurels{gap: 14px; margin-top: 26px; max-width: 500px;}
#main_img .laurel{
	position: relative;
	flex: 1 1 0;
	max-width: 158px;
	aspect-ratio: 1;
	container-type: inline-size;
}
#main_img .laurel_bg{position: absolute; inset: 0; width: 100%; height: 100%; color: #E3D4A6;}
#main_img .laurel_txt{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 4%;
	text-align: center;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: .02em;
	white-space: nowrap;
	background: linear-gradient(170deg, #C5A253 10%, #9A7A30 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
#main_img .laurel_txt .s{font-size: 7.6cqw;}
#main_img .laurel_txt .l{font-size: 14cqw; line-height: 1.2; letter-spacing: 0;}
#main_img .laurel_txt .l.is-long{font-size: 10.5cqw; margin-top: .15em;}
#main_img .laurel_txt .l small{font-size: .62em; font-weight: 900;}
#main_img .laurel_txt .l.font_en{font-size: 14.5cqw; letter-spacing: -.01em;}
/* 読み込み時に左から順にふわっと出す */
#main_img .laurel{animation: laurel_in .7s cubic-bezier(.2, .7, .2, 1.3) both;}
#main_img .laurel:nth-child(2){animation-delay: .12s;}
#main_img .laurel:nth-child(3){animation-delay: .24s;}
@keyframes laurel_in{
	from{opacity: 0; transform: translateY(14px) scale(.85);}
	to{opacity: 1; transform: none;}
}
@media (prefers-reduced-motion: reduce){
	#main_img .laurel{animation: none;}
}
/* SP：ボタンの下に横幅いっぱいで */
@media screen and (max-width: 767px){
	#main_img .fv_laurels{order: 6; gap: 8px; max-width: none; margin-top: 28px; justify-content: space-between;}
	#main_img .laurel{max-width: 150px;}
}
/* 992〜1199px：右のサイテキくんに重ならないよう小さめに */
@media screen and (min-width: 992px) and (max-width: 1199px){
	#main_img .fv_laurels{gap: 10px; max-width: 410px;}
}

/* ===== TOP FV（SP・767px以下）：上を詰めて、ボタンを操作画面のすぐ下へ（2026-10-28）=====
   見出しは「広告運用をもっとスマートに／サイテキ化。」の2行、小見出しは1行にして、どちらも横幅いっぱいに（右の空きをなくす）。
   文字の大きさは画面幅から計算（小見出し約25.5文字・見出し1行目13文字が、左右の余白を除いた幅にちょうど入る）。
   並びは 見出し → 操作画面 → ボタン → 月桂樹 → 説明文 → 特許出願中 */
@media screen and (max-width: 767px){
	#main_img .catch h2{--fv-w: calc(100vw - 80px);}
	#main_img .catch h2 > span:first-child{display: block; font-size: min(calc(var(--fv-w) / 25.5), 1.15rem) !important; line-height: 1.6; letter-spacing: 0; margin-bottom: .9rem;}
	#main_img .catch h2 > span:first-child br{display: none;}
	#main_img .catch h2 > br:first-of-type,
	#main_img .catch h2 > br:nth-of-type(2){display: none;}
	#main_img .catch h2 > br:nth-of-type(3){display: inline !important;}
	#main_img .catch h2{font-size: min(calc(var(--fv-w) / 13.3), 2.6rem); line-height: 1.35; letter-spacing: 0;}
	/* 2行目「サイテキ化。」は大きく */
	#main_img .catch h2 .txt_color1{font-size: 1.5em; line-height: 1.25;}

	#main_img .fv_cta{order: 3; margin-top: 60px !important;}
	#main_img .fv_laurels{order: 4; margin-top: 22px;}
	#main_img .catch_lead{order: 5; margin-top: 22px; font-size: 14px; line-height: 1.8;}
	#main_img .fv_badge{order: 6; margin-top: 12px !important;}
}
@media screen and (max-width: 575px){
	#main_img .catch h2{--fv-w: calc(100vw - 40px);}
	#main_img .container-lg{padding-top: 92px;}
}
@media screen and (max-width: 767px){
	/* 見出しが横幅いっぱいになり右上の六角形に重なるので、六角形は薄く */
	#main_img:before{opacity: .5;}
}
@media screen and (min-width: 576px) and (max-width: 767px){
	/* 月桂樹は間隔を開けすぎず中央に */
	#main_img .fv_laurels{justify-content: center; gap: 28px;}
}

/* ===== TOP 機能紹介をFV直下へ（2026-10-28）=====
   並びは 見出し → マーケティング／制作／運用・改善 → 全体像（01〜04＋図）。全体像にもブロックと同じ形の見出しを付ける */
#con4 .feature_overview{margin-top: 88px;}
#con4 .feature_overview .feature_intro{margin-top: 0;}
@media screen and (max-width: 991px){
	#con4 .feature_overview{margin-top: 64px;}
}
@media screen and (max-width: 767px){
	#con4 .feature_overview{margin-top: 56px;}
}
/* FVの下端（#F8F9FB）と機能紹介の背景（上端が青）の境目に段差が出ないよう、上端をFVの色から透明へつなぐ */
#con4{background-image: linear-gradient(to bottom, #F8F9FB 0, rgba(248, 249, 251, 0) 360px), url('../img/bg.jpg');}
@media screen and (max-width: 575px){
	#con4{background-image: linear-gradient(to bottom, #F8F9FB 0, rgba(248, 249, 251, 0) 240px), url('../img/bg2.jpg');}
}

/* 3つの特長（#con3・ページ下部）：下の「まずは無料でお試しください」の枠がこのブロックに食い込んで重なるので、
   スライド（矢印・線）とその枠（サイテキくん含む）の間が120px前後あくよう、下の余白を広くとる */
#con3 .container-lg{padding-bottom: 200px;}
@media screen and (max-width: 991px){
	#con3 .container-lg{padding-bottom: 160px;}
}
@media screen and (max-width: 575px){
	#con3 .container-lg{padding-bottom: 140px;}
}

/* 機能紹介「Cytekiの全体像」：01〜04 の下に特許出願中のバッジ（FVと同じ画像・同じ大きさ：PC・タブレット170px、SP140px）。PCは左寄せ、タブレット以下は中央 */
#con4 .ov_badge{width: 170px; margin-top: 28px;}
@media screen and (max-width: 991px){
	#con4 .ov_badge{margin: 24px auto 0;}
}
@media screen and (max-width: 767px){
	#con4 .ov_badge{width: 140px; margin-top: 20px;}
}

/* TOP FV のリール（992〜1199px）：画面右端まで伸ばしている枠のため、工程（01〜06）が画面に収まりきらず「06 分析」が切れていた。
   左上の丸3つを隠し、工程は番号だけ・表示中の工程だけ名前を出す（SPと同じ見せ方）ようにして画面内に収める */
@media screen and (min-width: 992px) and (max-width: 1199px){
	#main_img .fv_reel .reel_bar .shot_bar{display: none;}
	#main_img .fv_step{padding: 5px 9px; font-size: 12px;}
	#main_img .fv_step em{max-width: 0; overflow: hidden; transition: max-width .4s ease;}
	#main_img .fv_step:not(.is-active){gap: 0;}
	#main_img .fv_step.is-active em{max-width: 6em;}
}

@media screen and (max-width: 991px){
	#main_img .fv_badge{order: 0; margin: 0 0 16px !important;}
	#main_img .fv_cta{order: 7; margin-top: 24px !important;}
}

/* ===== TOP FV（PC・992px以上）：特許出願中は操作画面の右上へ。キャッチ文〜ボタンは操作画面の上端〜下端にそろえる（2026-11-02）=====
   左右の高さをそろえ（stretch）、左は 見出し → 説明文 → 月桂樹 → ボタン を上下いっぱいに均等配置。
   文章の方が高い画面幅では、操作画面（動画）の方を縦に伸ばして合わせる（動画は左上基準で切り抜くので画面の左側は切れない） */
@media screen and (min-width: 992px){
	#main_img .container-lg{align-items: stretch !important; padding-top: 200px; padding-bottom: 130px;}
	#main_img .catch_wrap{display: flex;}
	#main_img .catch{display: flex; flex-direction: column; justify-content: space-between; width: 100%;}
	#main_img .catch h2{margin-bottom: 0 !important;}
	/* 小見出しは見出しの大きな行の高さに乗らないよう独立した行に（上端が操作画面の上端にそろう） */
	#main_img .catch h2 > span:first-child{display: block; line-height: 1.5; margin-bottom: .6rem;}
	#main_img .catch h2 > br:first-of-type{display: none;}
	#main_img .catch_lead{margin-top: 18px;}
	#main_img .fv_laurels{margin-top: 22px;}
	#main_img .fv_cta{margin-top: 26px !important;}

	#main_img .fv_visual{display: flex; flex-direction: column; padding-bottom: 0;}
	#main_img .fv_movie{flex: 1 1 auto; display: flex; flex-direction: column;}
	#main_img .fv_movie .reel_bar{flex: none;}
	#main_img .fv_movie .reel_stage{flex: 1 1 auto;}
	#main_img .fv_badge_r{position: absolute; right: 0; bottom: calc(100% + 20px); width: 170px;}
}
@media screen and (min-width: 1400px){
	#main_img .container-lg{padding-bottom: 150px;}
}
/* 992〜1199px：操作画面が低いので、文章側も詰める */
@media screen and (min-width: 992px) and (max-width: 1199px){
	#main_img .container-lg{padding-top: 180px; padding-bottom: 100px;}
	#main_img .catch h2{font-size: 2.1rem;}
	#main_img .catch h2 .fs-5{font-size: 1.15rem !important;}
	#main_img .catch_lead{font-size: 1rem;}
	#main_img .fv_laurels{max-width: 330px; gap: 8px;}
	#main_img .fv_cta .btn{font-size: 1.2rem !important; padding: .95rem 2.8rem !important;}
	#main_img .fv_badge_r{width: 150px;}
}

/* ===== TOP「Cytekiの全体像」をFV直下へ（2026-11-02）=====
   並びは 全体像 → 機能紹介の見出し → マーケティング／制作／運用・改善。上の余白はなくし、下（機能紹介の見出しまで）をあける */
#con4 .feature_overview{margin-top: 0; margin-bottom: 110px;}
@media screen and (max-width: 991px){
	#con4 .feature_overview{margin-top: 0; margin-bottom: 88px;}
}
@media screen and (max-width: 767px){
	#con4 .feature_overview{margin-top: 0; margin-bottom: 72px;}
}


/* ===== 制作：完成イメージのモーダル（2026-11-02・仮素材）=====
   LP作成・動画作成の説明文の下に「CHECK」ボタン。押すとスマホのモックアップが開き、LP（動くFV＋スクロール）や動画広告を見られる。動作は design.js */
#con4 .mock_btn{
	display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 8px 18px 8px 8px;
	color: var(--dark); text-align: left; background: var(--white); border: 1px solid #CFE3F2; border-radius: 999px;
	box-shadow: 0 6px 18px rgba(0, 141, 212, .12); transition: transform .2s, box-shadow .2s, border-color .2s; cursor: pointer;
}
#con4 .mock_btn:hover{transform: translateY(-2px); border-color: var(--color3); box-shadow: 0 10px 24px var(--color3_50);}
#con4 .mock_btn:focus-visible{outline: 3px solid var(--color3_50); outline-offset: 2px;}
#con4 .mock_btn_icon{flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 19px; color: var(--white); border-radius: 50%; background: linear-gradient(135deg, var(--color1), var(--color3));}
#con4 .mock_btn_txt{display: flex; flex-direction: column; font-size: 14px; font-weight: 700; line-height: 1.35;}
#con4 .mock_btn_txt .font_en{font-size: 11px; letter-spacing: .14em; color: var(--color1);}
#con4 .mock_btn_arrow{font-size: 13px; color: var(--color1);}

.mock_modal{position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px;}
.mock_modal[hidden]{display: none;}
.mock_overlay{position: absolute; inset: 0; background: rgba(24, 28, 36, .62); backdrop-filter: blur(3px); animation: mock_fade .25s ease;}
.mock_dialog{position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: mock_pop .3s ease;}
.mock_close{position: absolute; top: -6px; right: -56px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 18px; color: var(--white); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); border-radius: 50%; cursor: pointer; transition: background .2s;}
.mock_close:hover{background: rgba(255,255,255,.28);}

/* スマホ枠：画面の高さに合わせて縮む */
.mock_phone{height: min(680px, calc(100vh - 120px)); height: min(680px, calc(100dvh - 120px)); aspect-ratio: 9 / 19; padding: 10px; background: #1F2329; border-radius: 42px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 0 0 2px #3A3F47;}
.mock_screen{position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 32px; background: #FFF6F8;}
.mock_view{position: absolute; inset: 0;}
/* LPはファーストビューだけを画面いっぱいに */
.mock_video_lp{object-position: center top;} /* LPのFV：見出しが切れないよう上をそろえる */
.mock_video{display: block; width: 100%; height: 100%; object-fit: cover;}

/* 動くFV（スマホのLPのファーストビュー・4:5）：中身は幅に合わせて cqw で伸縮。8秒で1周 */
.fv_screen{position: relative; aspect-ratio: 4 / 5; overflow: hidden; container-type: inline-size; font-family: "Noto Serif JP", "Yu Mincho", serif; color: #5A3A44;}
.fvs_bg{position: absolute; inset: 0; background: linear-gradient(170deg, #FCE4EA 0%, #FFF5F7 60%, #FCE9EE 100%);}
.fvs_photo{
	position: absolute; left: 0; top: -4%; width: 100%; height: 66%;
	background: url('../img/works_fv_bg.jpg') center / cover no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent);
	animation: fvs_zoom 8s ease-in-out infinite alternate;
}
.fvs_glow i{position: absolute; width: 3cqw; height: 3cqw; border-radius: 50%; background: radial-gradient(circle, #FFF 0, rgba(255,255,255,0) 70%); opacity: 0; animation: fvs_glow 4s ease-in-out infinite;}
.fvs_glow i:nth-child(1){left: 18%; top: 16%;} .fvs_glow i:nth-child(2){left: 72%; top: 30%; animation-delay: .8s;}
.fvs_glow i:nth-child(3){left: 40%; top: 8%; animation-delay: 1.6s;} .fvs_glow i:nth-child(4){left: 86%; top: 80%; animation-delay: 2.4s;}
.fvs_glow i:nth-child(5){left: 10%; top: 70%; animation-delay: 3.2s;}
.fvs_copy{position: absolute; left: 7%; right: 7%; bottom: 7%; text-align: center;}
.fvs_copy p{margin: 0; opacity: 0; animation: fvs_in 8s ease infinite;}
.fvs_copy .fvs_name{display: inline-block; padding: 1cqw 3.4cqw; font-size: 3.6cqw; border: 1px solid #D9A3B3; border-radius: 999px; background: rgba(255,255,255,.7);}
.fvs_copy .fvs_catch{margin-top: 3cqw; font-size: 8.6cqw; line-height: 1.35; letter-spacing: .04em; color: #B04C6C; animation-delay: .4s;}
.fvs_catch span{display: block;}
.fvs_copy .fvs_sub{margin-top: 2.4cqw; font-size: 3.7cqw; animation-delay: .9s;}
.fvs_copy .fvs_cta{display: inline-flex; align-items: baseline; gap: 2.4cqw; margin-top: 4cqw; padding: 2.2cqw 5.6cqw; color: var(--white); border-radius: 999px; background: linear-gradient(90deg, #C2456E, #E56A93); font-family: "Noto Sans JP", sans-serif; font-weight: 700; animation: fvs_cta 8s ease infinite; animation-delay: 1.4s;}
.fvs_cta .cta_off{font-size: 3.6cqw;}
.fvs_cta .cta_price{font-size: 6.6cqw; line-height: 1;}
.fvs_cta .cta_price small{font-size: 3.4cqw;}
@keyframes fvs_in{0%{opacity: 0; transform: translateY(2.4cqw);} 8%, 86%{opacity: 1; transform: none;} 96%, 100%{opacity: 0; transform: none;}}
@keyframes fvs_cta{0%{opacity: 0; transform: translateY(2.4cqw);} 8%, 40%, 60%, 86%{opacity: 1; transform: none;} 50%{opacity: 1; transform: scale(1.05);} 96%, 100%{opacity: 0; transform: none;}}
@keyframes fvs_zoom{0%{transform: scale(1);} 100%{transform: scale(1.08);}}
@keyframes fvs_glow{0%, 100%{opacity: 0; transform: scale(.4);} 50%{opacity: .9; transform: scale(1);}}
@keyframes mock_fade{from{opacity: 0;}}
@keyframes mock_pop{from{opacity: 0; transform: translateY(16px) scale(.97);}}
@media (prefers-reduced-motion: reduce){
	.fvs_photo, .fvs_glow i, .fvs_copy p, .mock_overlay, .mock_dialog{animation: none !important;}
	.fvs_copy p{opacity: 1;}
}
@media screen and (max-width: 991px){
	#con4 .mock_btn{margin-top: 20px;}
}
@media screen and (max-width: 575px){
	.mock_close{top: 0; right: 0; width: 40px; height: 40px;}
	.mock_dialog{gap: 10px; padding-top: 46px;}
	.mock_phone{height: min(640px, calc(100vh - 160px)); height: min(640px, calc(100dvh - 160px)); padding: 8px; border-radius: 36px;}
	.mock_screen{border-radius: 28px;}
}