@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: -135px;
	-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;
}
header .btn_wrap{right: 1%;}
/* SP用の電話ボタン（丸アイコン） */
#header .contact_btn_sp a{
	width: 40px;
	height: 40px;
	font-size: 18px;
	box-shadow: 0 2px 8px var(--color3_50);
}
header .x-line:before{background-color: var(--dark);}
#header :is(.contact_btn,.dl_btn){
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
#header :is(.contact_btn,.dl_btn).is-hide{
	opacity: 0;
	visibility: hidden;
}
.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);}


#main_img{min-height: 650px;}
#main_img .container-lg{
	max-width: 1280px;
	padding: 70px 50px 100px;
}
#main_img .catch h2{font-size: 2.5rem;}
#main_img .catch figure{width: 170px;}
/* ファーストビュー：サイテキくん
   キャッチ文の右下（フォームの手前）に大きく配置。背景の光・回るリング・吹き出し・足元の影で主役感を出す。
   位置は .catch_wrap（キャッチ文の列）基準の absolute。文字や入力欄には重ならないよう幅ごとに調整 */
#main_img .catch_wrap{z-index: 1;}
#main_img .catch{position: relative; z-index: 2;}
#main_img .catch_chara{
	--chara-w: 300px;
	position: absolute;
	right: 0;
	bottom: -150px;
	width: var(--chara-w);
	z-index: 1;
	pointer-events: none;
}
/* 背景の光 */
#main_img .catch_chara:before{
	content: "";
	position: absolute;
	inset: 4% 2% 6%;
	border-radius: 50%;
	background: radial-gradient(circle, var(--white) 0%, var(--white90) 35%, var(--color3_30) 60%, transparent 71%);
}
/* ゆっくり回る点線リング */
#main_img .catch_chara:after{
	content: "";
	position: absolute;
	inset: 0 -4% 2%;
	border-radius: 50%;
	border: 2px dashed var(--color3_50);
	animation: chara_spin 40s linear infinite;
}
#main_img .chara_body{
	position: relative;
	width: 100%;
	z-index: 1;
}
#main_img .chara_body img{
	display: block;
	filter: drop-shadow(0 14px 22px var(--color3_50));
	animation: chara_float 4s ease-in-out infinite;
}
/* 足元の影（浮くと小さくなる） */
#main_img .chara_body:after{
	content: "";
	position: absolute;
	left: 30%;
	right: 30%;
	bottom: 1%;
	height: 7%;
	border-radius: 50%;
	background: radial-gradient(ellipse, #1f3c7a40 0%, transparent 70%);
	z-index: -1;
	animation: chara_shadow 4s ease-in-out infinite;
}
/* 吹き出し */
#main_img .chara_bubble{
	position: absolute;
	right: 84%;
	top: 38%;
	z-index: 2;
	padding: .7em 1.1em;
	font-size: 15px;
	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;
	right: -9px;
	top: 55%;
	border: 7px solid transparent;
	border-left: 12px solid var(--white);
	border-right: 0;
}
@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(.8); opacity: .6;}
}
@keyframes chara_bubble{
	0%, 100%{transform: translateY(0);}
	50%{transform: translateY(-5px);}
}
@keyframes chara_spin{
	to{transform: rotate(360deg);}
}
@media (prefers-reduced-motion: reduce){
	#main_img .chara_body img,
	#main_img .chara_body:after,
	#main_img .chara_bubble,
	#main_img .catch_chara:after{animation: none;}
}
/* 992〜1199px（キャッチ文が2行になり列が狭くなる） */
@media screen and (max-width: 1199px){
	#main_img .catch_chara{--chara-w: 250px; bottom: -140px;}
	#main_img .chara_bubble{font-size: 13px; right: 80%;}
}
/* 〜991px（フォームが下に回る）：バッジの右に置き、足元がフォーム上端に少しかかる形に。
   吹き出しはバッジの下（フォームとの間）に出す */
@media screen and (max-width: 991px){
	#main_img .catch_wrap{padding-bottom: 40px;}
	#main_img .catch_chara{--chara-w: 240px; right: -10px; bottom: -80px;}
	#main_img .chara_bubble{top: auto; bottom: 18%; right: 82%;}
}
/* SP */
@media screen and (max-width: 575px){
	#main_img .catch_wrap{padding-bottom: 30px;}
	#main_img .catch_chara{--chara-w: 170px; right: -14px; bottom: -70px;}
	#main_img .chara_bubble{
		right: 80%;
		font-size: 11px;
		padding: .6em .9em;
		border-radius: 14px;
	}
	#main_img .chara_bubble:after{right: -7px; border-width: 5px; border-left-width: 9px;}
}
/* 狭いSP（〜359px）はバッジと重ならないよう少し小さく */
@media screen and (max-width: 359px){
	#main_img .catch_chara{--chara-w: 150px;}
}

#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%;}
#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%;}
#con4{
	background-image: url('../img/bg.jpg');
	background-size: cover;
	background-repeat:no-repeat;
}
#con4 .container-lg:first-of-type{
	max-width: 1600px;
	padding-top: 0;
}
#con4 .video_box video{
	width: 100%;
	height: auto;
}
/* #con4 機能紹介：スクロール連動の切り替え */
/* 動画素材ごとに縦横比が異なる（1.53〜1.80）ため、16:9 の枠に統一して
   表示サイズを揃える。枠からはみ出す部分は上下左右中央でトリミング */
#con4 .feature_stage_right .video_box{
	position: relative;
	aspect-ratio: 16 / 9;
	/* 読み込み中に枠が黒く抜けるのを防ぐ下地。動画は角丸（rounded-3）なので合わせる */
	background-color: var(--lightgray50);
	border-radius: .5rem;
}
#con4 .feature_stage_right .video_box video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* PC・タブレット（768px以上）のみスクロール切り替えを有効化 */
@media screen and (min-width: 768px){
	#con4 .feature_scroll{
		/* 1枚あたりのスクロール量。数値を変えると切り替わる間隔が変わる */
		--feature-step: 70vh;
		position: relative;
		min-height: calc(100vh + (var(--feature-count, 10) - 1) * var(--feature-step));
	}
	#con4 .feature_sticky{
		position: sticky;
		top: 0;
		min-height: 100vh;
		/* 固定ヘッダーぶんを上に確保し、残りの領域の上下中央に置く
		   （中央寄せは HTML の align-items-md-center） */
		padding-top: 90px;
		padding-bottom: 30px;
	}
	/* 縦が狭い画面（ノートPC等）は余白を詰めて画面内に収める */
	@media screen and (max-height: 820px){
		#con4 .feature_sticky{
			padding-top: 80px;
			padding-bottom: 0;
		}
		#con4 .feature_stage_left{margin-top: 1.5rem!important;}
	}
	/* パネルを同じ位置に重ねる（同一グリッドセル＝一番高いパネルの高さになる） */
	#con4 .feature_stage{display: grid;}
	#con4 .feature_stage > .feature_panel{
		grid-area: 1 / 1;
		opacity: 0;
		visibility: hidden;
		transform: translateY(20px);
		transition: opacity .5s ease, transform .5s ease, visibility .5s;
		pointer-events: none;
	}
	/* 右側は一番縦の大きいパネル（画像）に合わせて高さが決まるため、
	   縦の短い動画が上に寄らないよう、パネル内で上下中央に置く */
	#con4 .feature_stage_right > .feature_panel{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	/* 動画は横長で高さが出ないため、列間の余白ぶんだけ左へ広げて大きく見せる
	   （画像はこの指定の対象外なので表示サイズは変わらない） */
	#con4 .feature_stage_right .video_box{
		width: 100%;
		margin-left: 5%;
	}
	#con4 .feature_stage > .feature_panel.is-active{
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}
}
/* SP（767px以下）は切り替えなし。
   「動画（画像）→ 文言」の順に交互に並べるため、カラムの入れ物を display:contents で
   無いものにして、パネルを直接 order で並べ替える */
@media screen and (max-width: 767px){
	#con4 .feature_sticky{padding: 3rem 0.5rem 0;}
	#con4 .feature_sticky > .con_wrap,
	#con4 .feature_stage{display: contents;}
	#con4 .con4_title{
		order: 1;
		/* .feature_stage の mt-4 は display:contents で無効になるためここで確保 */
		margin-bottom: 2rem;
	}
	/* パネルは「右（動画）→ 左（文言）」の順に交互に並べる。
	   order は 右=枚数×2、左=枚数×2+1 で機械的に決まる。
	   パネルを増やすときはこの一覧も同じ規則で追記すること。
	   一覧から漏れたパネルは下の order:99 が効いて末尾に回るだけで、
	   先頭に飛んで並びが壊れることはない（下限の安全弁） */
	#con4 .feature_stage > .feature_panel{order: 99;}
	#con4 .feature_stage_right > .feature_panel:nth-child(1){order: 2;}
	#con4 .feature_stage_left > .feature_panel:nth-child(1){order: 3;}
	#con4 .feature_stage_right > .feature_panel:nth-child(2){order: 4;}
	#con4 .feature_stage_left > .feature_panel:nth-child(2){order: 5;}
	#con4 .feature_stage_right > .feature_panel:nth-child(3){order: 6;}
	#con4 .feature_stage_left > .feature_panel:nth-child(3){order: 7;}
	#con4 .feature_stage_right > .feature_panel:nth-child(4){order: 8;}
	#con4 .feature_stage_left > .feature_panel:nth-child(4){order: 9;}
	#con4 .feature_stage_right > .feature_panel:nth-child(5){order: 10;}
	#con4 .feature_stage_left > .feature_panel:nth-child(5){order: 11;}
	#con4 .feature_stage_right > .feature_panel:nth-child(6){order: 12;}
	#con4 .feature_stage_left > .feature_panel:nth-child(6){order: 13;}
	#con4 .feature_stage_right > .feature_panel:nth-child(7){order: 14;}
	#con4 .feature_stage_left > .feature_panel:nth-child(7){order: 15;}
	#con4 .feature_stage_right > .feature_panel:nth-child(8){order: 16;}
	#con4 .feature_stage_left > .feature_panel:nth-child(8){order: 17;}
	#con4 .feature_stage_right > .feature_panel:nth-child(9){order: 18;}
	#con4 .feature_stage_left > .feature_panel:nth-child(9){order: 19;}
	#con4 .feature_stage_right > .feature_panel:nth-child(10){order: 20;}
	#con4 .feature_stage_left > .feature_panel:nth-child(10){order: 21;}
	#con4 .feature_stage_right > .feature_panel:nth-child(11){order: 22;}
	#con4 .feature_stage_left > .feature_panel:nth-child(11){order: 23;}
	#con4 .feature_stage_right > .feature_panel:nth-child(12){order: 24;}
	#con4 .feature_stage_left > .feature_panel:nth-child(12){order: 25;}
	#con4 .feature_stage_right > .feature_panel:nth-child(13){order: 26;}
	#con4 .feature_stage_left > .feature_panel:nth-child(13){order: 27;}
	#con4 .feature_stage_right > .feature_panel:nth-child(14){order: 28;}
	#con4 .feature_stage_left > .feature_panel:nth-child(14){order: 29;}
	#con4 .feature_stage_right > .feature_panel:nth-child(15){order: 30;}
	#con4 .feature_stage_left > .feature_panel:nth-child(15){order: 31;}
	#con4 .feature_stage_right > .feature_panel:nth-child(16){order: 32;}
	#con4 .feature_stage_left > .feature_panel:nth-child(16){order: 33;}
	#con4 .feature_stage_right > .feature_panel:nth-child(17){order: 34;}
	#con4 .feature_stage_left > .feature_panel:nth-child(17){order: 35;}
	#con4 .feature_stage_right > .feature_panel:nth-child(18){order: 36;}
	#con4 .feature_stage_left > .feature_panel:nth-child(18){order: 37;}
	#con4 .feature_stage_right > .feature_panel:nth-child(19){order: 38;}
	#con4 .feature_stage_left > .feature_panel:nth-child(19){order: 39;}
	#con4 .feature_stage_right > .feature_panel:nth-child(20){order: 40;}
	#con4 .feature_stage_left > .feature_panel:nth-child(20){order: 41;}
	#con4 .feature_stage > .feature_panel{margin-bottom: 2rem;}
	/* 2枚目（AIによる戦略設計）以降の文言は白背景をなくし、地の背景に直接置く。
	   カード用の内側余白も外して、行頭を見出し「機能紹介」とそろえる */
	#con4 .feature_stage_left > .feature_panel:nth-child(n+2) .con_box{
		padding: 0!important;
		background-color: transparent;
		background: none;
		border-radius: 0!important;
	}
	/* 01〜04カードは Bootstrap .row の負マージン（-10.5px）で左にずれるため、
	   2列グリッドに置き換えて左右の端をタイトル・動画に揃える */
	#con4 .feature_stage_left > .feature_panel:nth-child(1) .con_box{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		margin-right: 0;
		margin-left: 0;
	}
	#con4 .feature_stage_left > .feature_panel:nth-child(1) .con_box > div{
		width: auto!important;		/* インラインの width:45% を解除 */
		margin-bottom: 0!important;	/* 間隔は gap でとる */
	}
}
@media screen and (min-width: 576px) and (max-width: 767px){
	#con4 .feature_sticky{padding-right: 3rem;padding-left: 3rem;}
}
/* SP（575px以下）は01〜04カードの1行が約9文字になり読みづらいため1列にする */
@media screen and (max-width: 575px){
	#con4 .feature_stage_left > .feature_panel:nth-child(1) .con_box{
		grid-template-columns: 1fr;
	}
}
/* 動きを抑える設定の環境ではフェードのみ */
@media (prefers-reduced-motion: reduce){
	#con4 .feature_stage > .feature_panel{
		transform: none;
		transition: opacity .01s linear;
	}
}
#con5 .cate_box{border-color: var(--lightgray50)!important;}
#con5 .cate_box:last-of-type{border-bottom: 1px solid var(--lightgray50);}
#con6 .con_box{
	margin-top: -8%;
}
/*-----------------------------------------
				下層
-----------------------------------------*/
/* 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;}

/* お問い合わせ・資料ダウンロード */
.download .check_box li:before{
	content: "\F272";
	color: var(--color1);
}
/*-----------------------------------------
			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: -130px;
	}
}
/* xl */
@media screen and (max-width: 1199px){
	#main_img:before{
		width: 23vw;
        height: 36vw;
        top: 30%;
        left: -73px;
	}
	/*--
	TOP
	--*/
	#main_img {height: 40vw;}
	#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
	--*/
	#main_img{
		height: auto;
		min-height: auto;
	}
	#main_img .container-lg {padding: 50px;}
	#main_img > div{top: 0!important;}
	#main_img .catch h2{font-size: 2rem;}
	
	#con1 .con_item{width: 50%;}
	#con1 .con_img{
		width: 50%;
		margin-top: -7%;
	}
	/*--
	下層
	--*/
	/* 機能紹介 */
	.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);}
	
	/* お問い合わせ・資料ダウンロード */
	.download .con_box{background-color: var(--trans);}
}
/* sm */
@media screen and (max-width: 575px){
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
		padding: 30px 20px;
	}
	#header .dl_btn{display: none!important;}
	/*
	.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{
		background-size: auto 50%!important;
	}
	#main_img .container-lg{
		padding:20px;
		padding-bottom: 70px;
	}
	#main_img .catch{margin-top: 100px!important;}
	#main_img .catch .fs-5{font-size:calc(1rem - 2px)!important;}
	#main_img .catch figure{width: 130px;}
	
	#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);}
	/* お問い合わせ・資料ダウンロード */
	.download .con_box{background-color: var(--trans);}
}