/*
Theme Name: iASK
Description: iASK
Version: 1.0
Author: iASK
*/



/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 共通項目 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
*{margin:0;padding:0;text-decoration:none;box-sizing: border-box}fieldset{border:0}body{line-height:1.8}body,dd,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,select,ul{margin:0;padding:0}img{border:0;vertical-align:top}a{text-decoration:none}em{font-style:normal}ul li{list-style-type:none;list-style-image:none}address{font-style:normal}strong {font-weight: bold}img {width: 100%;height: auto}.sp {display: none}
:root {
  --design-width-pc: 1400;
  --design-width-sp: 421;
  --vw-ratio: calc(100vw / var(--design-width-pc));
}
@media (max-width: 767px) {
  :root {
    --vw-ratio: calc(100vw / var(--design-width-sp));
  }
}




/* リンク */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
a {
	color: #1A2F44;
	text-decoration: none;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
a:before {
	transition: 0.3s;
	-webkit-transition: 0.3s;
}


/* 装飾 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.c-blue {
	color: #00053A;
}
.c-white {
	color: #fff;
}

.bg-white {
	background: #fff;
}
.bg-blue {
	background: #00053A;
}
/* 「×」の左右。半角スペースだと 0.5em ずつで開きすぎるので詰める（FVとフッター共通） */
.x {
	margin: 0 0.28em;
}

/* 単語の途中で改行させたくない箇所に使う（カタカナ語が割れるのを防ぐ） */
.nowrap {
	white-space: nowrap;
}

.bg-gray {
	background: #F8F8F8;
}



/* 横幅 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
body {
	background: #F8F8F8;
	font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
	font-size: clamp(14px, calc(16 * var(--vw-ratio)), 24px);
	font-weight: 400;
	color: #1A2F44;
	padding: 0;
	margin: 0;
	letter-spacing: 0.02em;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph;
	overflow-anchor: none;
}
body.fixed {
	width: 100%;
	height: 100%;
	position: fixed;
	overflow: hidden;
}



/* フォント */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.en {
	font-family: "Manrope", sans-serif;
	font-weight: 500;
	letter-spacing: 0.02em;
}




/* flex */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.flex {
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-start {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
}
.flex-end {
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	 -ms-flex-direction: row-reverse;
		 flex-direction: row-reverse;
}
.flex-center {
	display: flex;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ヘッダー */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: -webkit-calc(100% - calc(120 * var(--vw-ratio)));
	width: calc(100% - calc(120 * var(--vw-ratio)));
	background: #F8F8F8;
	border-bottom: solid 1px #DDDFE0;
	position: fixed;
	top: 0;
	left: calc(60 * var(--vw-ratio));
	z-index: 10;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
#header.is-animation {
	padding: 0 calc(30 * var(--vw-ratio));
	width: 100%;
	top: 0;
	left: 0;
}
	#header .logo a {
		display: block;
		width: calc(158 * var(--vw-ratio));
		line-height: 1;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	#header.is-animation .logo a {
		width: calc(120 * var(--vw-ratio));
	}
		#header .logo a img {
			display: block;
			line-height: 1;
		}
	
	#header ul.globalnav li {
		margin-left: calc(30 * var(--vw-ratio));
		position: relative;
	}
		#header ul.globalnav li a {
			display: block;
			height: calc(150 * var(--vw-ratio));
			line-height: calc(150 * var(--vw-ratio));;
			font-weight: 500;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#header.is-animation ul.globalnav li a {
			height: calc(70 * var(--vw-ratio));
			line-height: calc(70 * var(--vw-ratio));;
		}
		#header ul.globalnav li a:hover,
		#header ul.globalnav li.active a {
			color: #00053A;
		}
		#header ul.globalnav li a.head:before {
			content: "";
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 0.6vw 0.6vw 0.6vw;
			border-color: transparent transparent #00053A transparent;
			position: absolute;
			bottom: calc(40 * var(--vw-ratio));
			left: 50%;
			margin-left: -0.5vw;
			opacity: 0;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#header ul.globalnav li.has-child.active a.head:before {
			bottom: calc(30 * var(--vw-ratio));
			opacity: 1;
		}
		#header.is-animation ul.globalnav li a.head:before {
			bottom: calc(10 * var(--vw-ratio));
		}
		#header.is-animation ul.globalnav li.has-child.active a.head:before {
			bottom: 0;
		}

		#header ul.globalnav li.has-child ul.sub_list {
			width: calc(220 * var(--vw-ratio));
			border: solid 1px #00053A;
			position: absolute;
			left: 50%;
			top: calc(140 * var(--vw-ratio));
			padding: 0;
			overflow: hidden;
			margin-left: calc(-110 * var(--vw-ratio));
			background: #fff;
			visibility: hidden;
			opacity: 0;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#header ul.globalnav li.has-child:hover > .sub_list {
			top: calc(120 * var(--vw-ratio));
			visibility: visible;
			opacity: 1;
		}
		#header.is-animation ul.globalnav li.has-child ul.sub_list {
			top: calc(90 * var(--vw-ratio));
		}
		#header.is-animation ul.globalnav li.has-child:hover > .sub_list {
			top: calc(70 * var(--vw-ratio));
		}
			#header ul.globalnav li.has-child ul.sub_list li {
				margin-left: 0;
				border-bottom: solid 1px #00053A;
			}
			#header ul.globalnav li.has-child ul.sub_list li:nth-last-child(1) {
				border-bottom: none;
			}
				#header ul.globalnav li.has-child ul.sub_list li a {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					height: auto;
					min-height: calc(50 * var(--vw-ratio));
					line-height: 1.3em;
					letter-spacing: 0;
					background: url("img/icon_arrow_blue.svg") no-repeat right calc(12 * var(--vw-ratio)) center / calc(14 * var(--vw-ratio));
					padding: calc(8 * var(--vw-ratio)) calc(30 * var(--vw-ratio)) calc(8 * var(--vw-ratio)) calc(12 * var(--vw-ratio));
					color: #1A2F44;
				}
				#header ul.globalnav li.has-child ul.sub_list li a:hover {
					background: #E7EAF2 url("img/icon_arrow_blue.svg") no-repeat right calc(8 * var(--vw-ratio)) center / calc(14 * var(--vw-ratio));
					color: #00053A;
				}
@media screen and (max-width: 767px) {
	#header {
		width: 100%;
		height: calc(60 * var(--vw-ratio));
		padding: 0 calc(25 * var(--vw-ratio));
		left: 0;
	}
	#header.is-animation {
		padding: 0 calc(25 * var(--vw-ratio));
	}
		#header .logo a {
			width: calc(110 * var(--vw-ratio));
		}
		#header.is-animation .logo a {
			width: calc(110 * var(--vw-ratio));
		}

		#header ul.globalnav {
			display: none;
		}
}


	



	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* メニュー展開 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#menubtn {
	display: none;
	position: fixed;
	z-index: 11;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}

#menubox {
	display: none;
}
@media screen and (max-width: 767px) {
	#menubtn {
		display: block;
		width: calc(60 * var(--vw-ratio));
		height: calc(60 * var(--vw-ratio));
		top: 0;
		right: 0;
	}
		#menubtn .menu {
			display: block;
			position: relative;
			cursor: pointer;
			background: #00053A;
			width: calc(60 * var(--vw-ratio));
			height: calc(60 * var(--vw-ratio));
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
			#menubtn .menu span {
				width: calc(30 * var(--vw-ratio));
				display: inline-block;
				border-radius: calc(1 * var(--vw-ratio));
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: calc(-15 * var(--vw-ratio));
				height: calc(1 * var(--vw-ratio));
				background: #fff;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#menubtn .menu span:nth-of-type(1) {
				margin-top: calc(-3 * var(--vw-ratio));
			}
			#menubtn .menu span:nth-of-type(2) {
				margin-top: calc(3 * var(--vw-ratio));
			}

			#menubtn .menu.active .openbtn-area {
				transform: rotateY(-360deg);
			}
				#menubtn .menu.active span {
					background: #fff;
				}
				#menubtn .menu.active span:nth-of-type(1) {
					transform: translateY(6px) rotate(-155deg);
					margin-top: -6px;
				}
				#menubtn .menu.active span:nth-of-type(2) {
					transform: translateY(-6px) rotate(155deg);
					margin-top: 6px;
				}
	
	#menubox {
		display: none;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
	}
		#menubox .menunav {
			width: 100%;
			height: 100vh;
			height: 100dvh;
			overflow-y: scroll;
			padding: calc(80 * var(--vw-ratio)) calc(40 * var(--vw-ratio)) calc(60 * var(--vw-ratio)) calc(40 * var(--vw-ratio));
		}
			#menubox .menunav .list li {
				border-bottom: solid 1px #DDDFE0;
			}
				#menubox .menunav .list li a {
					display: block;
					height: calc(70 * var(--vw-ratio));
					background: url("img/icon_arrow_btn_blue.svg") no-repeat right center / calc(30 * var(--vw-ratio));
					font-weight: 500;
					line-height: calc(72 * var(--vw-ratio));
				}
	
				#menubox .menunav .list li .sub_list {
					border-top: dashed 1px #DDDFE0;
					padding-bottom: calc(10 * var(--vw-ratio));
				}
					#menubox .menunav .list li .sub_list li {
						border-bottom: dashed 1px #DDDFE0;
					}
					#menubox .menunav .list li .sub_list li:nth-last-child(1) {
						border-bottom: none;
					}
						#menubox .menunav .list li .sub_list li a {
							display: block;
							height: calc(54 * var(--vw-ratio));
							line-height: calc(56 * var(--vw-ratio));
							background: url("img/icon_arrow_btn_blue.svg") no-repeat left center / calc(22 * var(--vw-ratio));
							padding-left: calc(30 * var(--vw-ratio));
						}
}





	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ページタイトル */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* pagetitle */
#pagetitle {
	padding-top: calc(150 * var(--vw-ratio));
}
	#pagetitle .breadcrumb {
		margin-top: calc(20 * var(--vw-ratio));
		font-size: calc(12 * var(--vw-ratio));
		line-height: 1;
	}
		#pagetitle .breadcrumb a {
			text-decoration: underline;
		}
		#pagetitle .breadcrumb a:hover {
			text-decoration: none;
		}
		#pagetitle .breadcrumb .current-item {
			color: #00053A;
		}

	#pagetitle .text {
		padding: calc(70 * var(--vw-ratio)) 0 calc(100 * var(--vw-ratio)) 0;
		position: relative;
	}
		#pagetitle .text .en {
			font-size: calc(80 * var(--vw-ratio));
			font-weight: 500;
			line-height: 1.3em;
			margin-bottom: calc(5 * var(--vw-ratio));
		}
		#pagetitle .text h1 {
			font-weight: 700;
			line-height: 1.3em;
		}

		#pagetitle .text .read {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: calc(630 * var(--vw-ratio));
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
		}

/* title */
.title {
	border-top: solid 1px #DDDFE0;
	padding-top: calc(20 * var(--vw-ratio));
	margin-bottom: calc(65 * var(--vw-ratio));
	position: relative;
}
	.title .en.txt-14 {
		line-height: 1;
		margin-bottom: calc(45 * var(--vw-ratio));
		padding-left: calc(20 * var(--vw-ratio));
		position: relative;
	}
	.title .en.txt-14:before {
		content: "";
		width: calc(6 * var(--vw-ratio));
		height: calc(6 * var(--vw-ratio));
		border-radius: 50%;
		background: #00053A;
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: calc(-3 * var(--vw-ratio));
	}

	.title h2 {
		font-size: calc(36 * var(--vw-ratio));
		line-height: 1.3em;
	}

	.title .read {
		margin-top: calc(20 * var(--vw-ratio));
	}

	.title .btn {
		position: absolute;
		bottom: calc(15 * var(--vw-ratio));
		right: 0;
	}

/* line-tit */
.line-tit {
	border-top: solid 1px #DDDFE0;
	padding-top: calc(20 * var(--vw-ratio));
	margin-bottom: calc(15 * var(--vw-ratio));
	font-size: calc(26 * var(--vw-ratio));
	position: relative;
}
.line-tit:before {
	content: "";
	width: calc(30 * var(--vw-ratio));
	height: 1px;
	background: #00053A;
	position: absolute;
	top: -1px;
	left: 0;
}
@media screen and (max-width: 767px) {
	/* pagetitle */
	#pagetitle {
		padding-top: calc(60 * var(--vw-ratio));
	}
		#pagetitle .breadcrumb {
			margin-top: calc(20 * var(--vw-ratio));
			font-size: calc(10 * var(--vw-ratio));
		}

		#pagetitle .text {
			padding: calc(50 * var(--vw-ratio)) 0 calc(70 * var(--vw-ratio)) 0;
		}
			#pagetitle .text .en {
				/* 54だと「LINE Marketing」374px・「Privacy Policy」336px が
				   375px幅（使える幅330px）で折り返すため45に */
				font-size: calc(45 * var(--vw-ratio));
			}

			#pagetitle .text .read {
				display: block;
				width: 100%;
				height: auto;
				position: static;
				margin-top: calc(40 * var(--vw-ratio));
			}
	
	/* title */
	.title {
		margin-bottom: calc(35 * var(--vw-ratio));
	}
		.title .en.txt-14 {
			margin-bottom: calc(25 * var(--vw-ratio));
		}
	
		.title h2 {
			font-size: calc(28 * var(--vw-ratio));
			line-height: 1.3em;
		}

		.title .btn {
			margin-top: calc(25 * var(--vw-ratio));
			position: static;
		}

	/* line-tit */
	.line-tit {
		padding-top: calc(15 * var(--vw-ratio));
		margin-bottom: calc(10 * var(--vw-ratio));
		font-size: calc(22 * var(--vw-ratio));
	}
}




	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本レイアウト */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* main */
#main {
	display: block;
}
.inner {
	width: -webkit-calc(100% - calc(120 * var(--vw-ratio)));
	width: calc(100% - calc(120 * var(--vw-ratio)));
	margin: 0 auto;
	position: relative;
}
.inner_full {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

/* img-over */
a .img-over {
	overflow: hidden;
}
	a .img-over img {
		-moz-transition: -moz-transform 0.2s linear;
		-webkit-transition: -webkit-transform 0.2s linear;
		-o-transition: -o-transform 0.2s linear;
		-ms-transition: -ms-transform 0.2s linear;
		transition: transform 0.2s linear;
	}
	a:hover .img-over img {
		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
		-o-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05);
	}

/* wrap */
.wrap-beginning {
	padding-top: calc(120 * var(--vw-ratio));
}
.wrap-top {
	padding-top: calc(200 * var(--vw-ratio));
}
.wrap-bottom {
	padding-bottom: calc(200 * var(--vw-ratio));
}

/* txt */
.txt-20 {
	font-size: calc(20 * var(--vw-ratio));
	line-height: calc(28 * var(--vw-ratio));
}
.txt-18 {
	font-size: calc(18 * var(--vw-ratio));
	line-height: calc(40 * var(--vw-ratio));
}
.txt-16 {
	font-size: calc(16 * var(--vw-ratio));
	line-height: calc(32 * var(--vw-ratio));
}
.txt-15 {
	font-size: calc(15 * var(--vw-ratio));
	line-height: calc(28 * var(--vw-ratio));
}
.txt-14 {
	font-size: calc(14 * var(--vw-ratio));
	line-height: calc(26 * var(--vw-ratio));
}
.txt-13 {
	font-size: calc(13 * var(--vw-ratio));
	line-height: calc(24 * var(--vw-ratio));
}
.txt-12 {
	font-size: calc(12 * var(--vw-ratio));
	line-height: calc(22 * var(--vw-ratio));
}
.txt-11 {
	font-size: calc(11 * var(--vw-ratio));
	line-height: calc(21 * var(--vw-ratio));
}
.txt-10 {
	font-size: calc(10 * var(--vw-ratio));
	line-height: calc(20 * var(--vw-ratio));
}
p.center {
	text-align: center;
}
a.link-txt {
	text-decoration: underline;
}
a.link-txt:hover {
	text-decoration: none;
}

/* icon-list */
ul.icon-list li {
	line-height: 1.8em;
	padding-left: calc(15 * var(--vw-ratio));
	position: relative;
}
ul.icon-list li:before {
	content: "";
	width: calc(6 * var(--vw-ratio));
	height: calc(6 * var(--vw-ratio));
	border-radius: 50%;
	background: #A6AEC4;
	position: absolute;
	top: calc(11 * var(--vw-ratio));
	left: 0;
}

/* pagenavi */
.pagenavi {
	width: 100%;
	display: block;
	margin-top: calc(50 * var(--vw-ratio));
}
	.pagenavi .wp-pagenavi {
		clear: both;
		text-align: center;
		font-weight: 500;
	}
		.pagenavi .wp-pagenavi a,
		.pagenavi .wp-pagenavi span {
			display: inline-block;
			width: calc(38 * var(--vw-ratio));
			height: calc(38 * var(--vw-ratio));
			border-radius: 50%;
			font-family: "Manrope", sans-serif;
			font-weight: 500;
			font-size: calc(14 * var(--vw-ratio));
			font-weight: 500;
			border: solid 1px #ddd;
			background: #fff;
			color: #1A2F44;
			text-align: center;
			line-height: calc(38 * var(--vw-ratio));
			margin: 0 calc(5 * var(--vw-ratio));
			padding: 0;
			transition: 0.3s;
			-webkit-ransition: 0.3s;
		}
		.pagenavi .wp-pagenavi a:hover{
			opacity: 0.7;
		}
		.pagenavi .wp-pagenavi span.current{
			color: #fff;
			border: solid 1px #00053A;
			background: #00053A;
		}
		.pagenavi .wp-pagenavi .pages,
		.pagenavi .wp-pagenavi .first,
		.pagenavi .wp-pagenavi .last {
			display: none;
		}
@media screen and (max-width: 767px) {
	.sp {
		display: block;
	}
	.pc {
		display: none !important;
	}
	
	/* inner */
	.inner {
		width: -webkit-calc(100% - calc(50 * var(--vw-ratio)));
		width: calc(100% - calc(50 * var(--vw-ratio)));
	}

	/* wrap */
	.wrap-beginning {
		padding-top: calc(50 * var(--vw-ratio));
	}
	.wrap-top {
		padding-top: calc(70 * var(--vw-ratio));
	}
	.wrap-bottom {
		padding-bottom: calc(70 * var(--vw-ratio));
	}

	/* txt */
	p.center {
		text-align: left;
	}

	/* pagenavi */
	.pagenavi {
		margin-top: calc(30 * var(--vw-ratio));
	}
		.pagenavi .wp-pagenavi a,
		.pagenavi .wp-pagenavi span {
			width: calc(30 * var(--vw-ratio));
			height: calc(30 * var(--vw-ratio));
			font-size: calc(12 * var(--vw-ratio));
			line-height: calc(30 * var(--vw-ratio));
		}
}





	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ボタン */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* btn */
.btn {
	width: calc(230 * var(--vw-ratio));
}
	.btn a {
		display: block;
		height: calc(50 * var(--vw-ratio));
		border-radius: calc(25 * var(--vw-ratio));
		padding: 0 calc(25 * var(--vw-ratio));
		line-height: calc(50 * var(--vw-ratio));
		font-weight: 500;
	}
	.btn a:hover {
		color: #fff;
	}
	.btn.btn-white a {
		border: solid 1px #ddd;
		background: #fff url("img/icon_arrow_blue.svg") no-repeat right calc(25 * var(--vw-ratio)) center / calc(16 * var(--vw-ratio));
	}
	.btn.btn-white a:hover {
		color: #fff;
		background: #00053A url("img/icon_arrow_white.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(16 * var(--vw-ratio));
	}
	.btn.btn-blue a {
		border: solid 1px #00053A;
		color: #fff;
		background: #00053A url("img/icon_arrow_white.svg") no-repeat right calc(25 * var(--vw-ratio)) center / calc(16 * var(--vw-ratio));
	}
	.btn.btn-blue a:hover {
		background: #1A2F44 url("img/icon_arrow_white.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(16 * var(--vw-ratio));
	}

/* cta-btn-list */
.cta-btn-list a.linkbox {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: calc(260 * var(--vw-ratio));
	height: calc(80 * var(--vw-ratio));
	border-radius: calc(5 * var(--vw-ratio));
	font-weight: 700;
	padding-left: calc(20 * var(--vw-ratio));
}
.cta-btn-list.blue a.linkbox.contact {
	/* 控えめなグラデ（2026-10-19）。LINEの緑に負けないよう、主役の無料相談に少し光を足す */
	background: url("img/icon_mail_white.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(25 * var(--vw-ratio)),
		linear-gradient(120deg, #0D2469 0%, #1A3484 60%, #23409A 100%);
	margin-bottom: calc(15 * var(--vw-ratio));
	transition: filter .2s ease, box-shadow .2s ease;
}
.cta-btn-list.blue a.linkbox.contact:hover {
	background: url("img/icon_mail_white.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(25 * var(--vw-ratio)),
		linear-gradient(120deg, #0D2469 0%, #1A3484 60%, #23409A 100%);
	filter: brightness(1.12);
	box-shadow: 0 calc(6 * var(--vw-ratio)) calc(16 * var(--vw-ratio)) rgba(13, 36, 105, .25);
}
.cta-btn-list a.linkbox.line,
.cta-btn-list.blue a.linkbox.line,
.cta-btn-list.white a.linkbox.line {
	/* LINEの公式色（2026-10-19 岩河さん決定）。紺の「無料相談」と役割を分ける */
	color: #fff;
	background: #06C755 url("img/icon_line_white.svg") no-repeat right calc(17 * var(--vw-ratio)) center / calc(30 * var(--vw-ratio));
}
.cta-btn-list a.linkbox.line:hover,
.cta-btn-list.blue a.linkbox.line:hover,
.cta-btn-list.white a.linkbox.line:hover {
	color: #fff;
	opacity: 1;
	background: #05A847 url("img/icon_line_white.svg") no-repeat right calc(17 * var(--vw-ratio)) center / calc(30 * var(--vw-ratio));
}

.cta-btn-list.white a.linkbox.contact {
	background: #fff url("img/icon_mail_blue.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(25 * var(--vw-ratio));
	margin-bottom: calc(15 * var(--vw-ratio));
}
.cta-btn-list.white a.linkbox.contact:hover {
	opacity: 0.7;
}

	.cta-btn-list a.linkbox .txt span {
		display: block;
		line-height: 1.3em;
	}
	.cta-btn-list a.linkbox .txt .txt-11 {
		margin-bottom: calc(5 * var(--vw-ratio));
	}
@media screen and (max-width: 767px) {
	/* btn */
	.btn {
		width: 60%;
	}

	/* cta-btn-list */
	.cta-btn-list {
		display: block;
	}
		.cta-btn-list a.linkbox {
			width: 100%;
			letter-spacing: 0;
		}
			.cta-btn-list a.linkbox .txt .txt-11 {
				font-size: calc(12 * var(--vw-ratio));
			}
}





	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* CTA エリア */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.cta-area {
	position: relative;
	overflow: hidden;
}
.cta-area:before {
	content: "";
	width: 100%;
	height: 50%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}
.cta-area.beside:before {
	background: #fff;
}
.cta-area.vertical:before {
	background: #292929;
}
	.cta-area .box {
		padding: calc(100 * var(--vw-ratio));
		border-radius: calc(5 * var(--vw-ratio));
		overflow: hidden;
	}
	.cta-area.beside .box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		.cta-area .box .marquee {
			display: flex;
			width: 100%;
			opacity: 0.05;
			position: absolute;
			left: 0;
		}
		.cta-area.vertical .box .marquee {
			top: calc(65 * var(--vw-ratio));
		}
			.cta-area .box .marquee .marquee__item {
				flex: 0 0 auto;
				overflow: hidden;
				font-size: calc(150 * var(--vw-ratio));
				font-weight: 500;
				white-space: nowrap;
				line-height: 1;
				padding-right: calc(20 * var(--vw-ratio));
			}
			.cta-area .box .marquee .marquee__item:nth-child(odd) {
				animation: loop 100s -50s linear infinite;
			}
			.cta-area .box .marquee .marquee__item:nth-child(even) {
				animation: loop2 100s linear infinite;
			}
			@keyframes loop {
				0% {
					transform: translateX(100%);
				}
				to {
					transform: translateX(-100%);
				}
			}
			@keyframes loop2 {
				0% {
					transform: translateX(0);
				}
				to {
					transform: translateX(-200%);
				}
			}

		.cta-area.vertical .box .text {
			text-align: center;
			margin-bottom: calc(50 * var(--vw-ratio));
		}
			.cta-area .box .text h2 {
				font-size: calc(36 * var(--vw-ratio));
				font-weight: 700;
				line-height: 1.3em;
				margin-bottom: calc(20 * var(--vw-ratio));
			}

			.cta-area .box .text .txt-16 {
				font-weight: 500;
			}

		.cta-area .box .cta-btn-list {
			width: calc(540 * var(--vw-ratio));
		}
		.cta-area.vertical .box .cta-btn-list {
			margin: 0 auto;
		}
@media screen and (max-width: 767px) {
	.cta-area .box {
		padding: calc(60 * var(--vw-ratio)) calc(30 * var(--vw-ratio));
		border-radius: calc(5 * var(--vw-ratio));
		overflow: hidden;
	}
	.cta-area.beside .box {
		display: block;
	}
		.cta-area .box .marquee {
			display: flex;
			width: 100%;
			opacity: 0.05;
			position: absolute;
			left: 0;
		}
		.cta-area.vertical .box .marquee {
			top: calc(65 * var(--vw-ratio));
		}
			.cta-area .box .marquee .marquee__item {
				font-size: calc(70 * var(--vw-ratio));
			}

		.cta-area.beside .box .text,
		.cta-area.vertical .box .text {
			margin-bottom: calc(40 * var(--vw-ratio));
		}
			.cta-area .box .text h2 {
				font-size: calc(26 * var(--vw-ratio));
				text-align: center;
			}
	
			.cta-area .box .text .txt-16 {
				text-align: left;
			}

		.cta-area .box .cta-btn-list {
			width: 100%;
		}
			.cta-area .box .cta-btn-list a.linkbox.contact {
				margin-bottom: calc(26 * var(--vw-ratio));
			}
				.cta-area .box .cta-btn-list a.linkbox br {
					display: block !important;
				}
}





	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 404 NOT FOUND */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#not-found .txt-16 {
	margin-bottom: calc(50 * var(--vw-ratio));
	text-align: center;
}

#not-found .btn {
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
	#not-found .txt-16 {
		margin-bottom: calc(30 * var(--vw-ratio));
	}
}




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* フッター */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#footer {
	width: 100%;
	background: #292929;
	padding: calc(80 * var(--vw-ratio)) 0;
}
	#footer .catch {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: calc(70 * var(--vw-ratio));
	}
		#footer .catch h2 {
			font-size: calc(40 * var(--vw-ratio));
			font-weight: 700;
			line-height: 1.5em;
		}

		#footer .catch .txt-18 {
			font-weight: 500;
			line-height: 2.2em;
		}

	#footer .area {
		margin-bottom: calc(60 * var(--vw-ratio));
	}
		#footer .area .text .logo {
			width: calc(160 * var(--vw-ratio));
			margin-bottom: calc(15 * var(--vw-ratio));
		}

		#footer .area .text .txt-14 {
			font-weight: 500;
			margin-bottom: calc(25 * var(--vw-ratio));
		}

		#footer .area ul.list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			column-gap: calc(40 * var(--vw-ratio));
			row-gap: 0;
			width: calc(920 * var(--vw-ratio));
		}
			#footer .area ul.list li {
				border-top: solid 1px #484848;
			}
			#footer .area ul.list li:nth-child(7),
			#footer .area ul.list li:nth-child(8),
			#footer .area ul.list li:nth-child(9) {
				border-bottom: solid 1px #484848;
			}
				#footer .area ul.list li a {
					display: block;
					height: calc(70 * var(--vw-ratio));
					padding-left: calc(10 * var(--vw-ratio));
					line-height: calc(70 * var(--vw-ratio));
					font-weight: 500;
					background: url("img/icon_arrow_btn.svg") no-repeat right calc(10 * var(--vw-ratio)) center / calc(28 * var(--vw-ratio));
				}
				#footer .area ul.list li a:hover {
					background: url("img/icon_arrow_btn.svg") no-repeat right calc(5 * var(--vw-ratio)) center / calc(28 * var(--vw-ratio));
				}

	#footer .other {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		#footer .other .txtlink {
			line-height: 1;
		}
			#footer .other .txtlink a:hover {
				text-decoration: underline;
			}

		#footer .other .copyright {
			line-height: 1;
			text-align: right;
		}
@media screen and (max-width: 767px) {
	#footer {
		padding: calc(45 * var(--vw-ratio)) 0 calc(30 * var(--vw-ratio)) 0;
	}
		#footer .catch {
			display: none;
		}

		#footer .area {
			display: block;
			margin-bottom: calc(40 * var(--vw-ratio));
		}
			#footer .area .text .logo {
				width: calc(140 * var(--vw-ratio));
				margin: 0 auto calc(12 * var(--vw-ratio)) auto;
			}

			#footer .area .text .txt-14 {
				text-align: center;
				margin-bottom: calc(20 * var(--vw-ratio));
			}

			#footer .area .text .txt-13 {
				text-align: center;
			}

			#footer .area ul.list {
				grid-template-columns: repeat(2, 1fr);
				column-gap: 0;
				row-gap: 0;
				width: -webkit-calc(100% + calc(50 * var(--vw-ratio)));
				width: calc(100% + calc(50 * var(--vw-ratio)));
				margin-top: calc(40 * var(--vw-ratio));
				margin-left:  calc(-25 * var(--vw-ratio));
				border-bottom: solid 1px #484848;
			}
				#footer .area ul.list li {
					border-right: solid 1px #484848;
				}
				#footer .area ul.list li:nth-child(2n) {
					border-right: none;
				}
				#footer .area ul.list li:nth-child(7),
				#footer .area ul.list li:nth-child(8),
				#footer .area ul.list li:nth-child(9) {
					border-bottom: none;
				}
					#footer .area ul.list li a {
						display: block;
						height: calc(70 * var(--vw-ratio));
						padding-left: calc(20 * var(--vw-ratio));
						line-height: calc(70 * var(--vw-ratio));
						font-weight: 500;
						background: url("img/icon_arrow_btn.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(28 * var(--vw-ratio));
					}
					#footer .area ul.list li a:hover {
						background: url("img/icon_arrow_btn.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(28 * var(--vw-ratio));
					}

		#footer .other {
			display: block;
		}
			#footer .other .txtlink {
				text-align: center;
			}
	
			#footer .other .txt-ai {
				text-align: center;
				margin-top: calc(30 * var(--vw-ratio));
			}

			#footer .other .copyright {
				margin-top: calc(30 * var(--vw-ratio));
				text-align: center;
			}
}




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* アニメーション */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* blur */
.blur {
	animation-name: blurAnime;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}
@keyframes blurAnime{
	0% {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}
	50% {
		opacity: 0;
		filter: blur(10px);
		transform: scale(1.02);
	}
	100% {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}

.blurTrigger{
    opacity: 0;
}


/* ani */
.ani {
	animation-name: anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes anime{
	from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}
	to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}
.aniTrigger{
    opacity: 0;
}

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}


/* img-wrap */
.img-wrap {
	opacity: 0;
}
.img-wrap.img-animation {
	animation: img-opacity 2s cubic-bezier(.4, 0, .2, 1);
	overflow: hidden;
	position: relative;
	opacity: 1;
}

.img-wrap.img-animation:before {
  animation: img-animation 2s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #F8F8F8;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
@keyframes img-opacity {
  0% {
	opacity: 0;
  }
	
}
@keyframes img-animation {
  100% {
	transform: translateX(101%);
	opacity: 1;
  }
}

/* 本文中の内部リンク（記事・事例）
   グローバルの a は text-decoration:none なので、本文内だけ下線を出して
   リンクだと分かるようにする。色は変えず、下線の濃さで示す
---------------------------------------------------------- */
#notes-detail .content .free a,
#case-detail .content a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: #A6AEC4;
}
#notes-detail .content .free a:hover,
#case-detail .content a:hover {
	text-decoration-color: #1A2F44;
}
/* 目次プラグインとボタンは対象外 */
#notes-detail .content .free #toc_container a,
#notes-detail .content .free .btn a,
#case-detail .content .btn a,
#case-detail .content .relservice a {
	text-decoration: none;
}

/* LINEボタンの吹き出し（2026-10-19 試作）。PCのホバーとキーボード操作時だけ出す */
.cta-btn-list a.linkbox.line { position: relative; }
.cta-btn-list a.linkbox.line .line-tip {
	position: absolute; left: 50%; bottom: calc(100% + calc(14 * var(--vw-ratio)));
	transform: translate(-50%, calc(6 * var(--vw-ratio)));
	width: calc(340 * var(--vw-ratio)); padding: calc(16 * var(--vw-ratio)) calc(18 * var(--vw-ratio));
	background: #fff; color: #00053A; border: 1px solid #DDDFE0; border-radius: calc(8 * var(--vw-ratio));
	box-shadow: 0 calc(8 * var(--vw-ratio)) calc(24 * var(--vw-ratio)) rgba(0, 5, 58, .16);
	font-size: calc(13 * var(--vw-ratio)); line-height: 1.65; font-weight: 400; text-align: left;
	opacity: 0; visibility: hidden; pointer-events: none; z-index: 50;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cta-btn-list a.linkbox.line .line-tip:after {
	content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
	border: calc(8 * var(--vw-ratio)) solid transparent; border-top-color: #fff;
	filter: drop-shadow(0 1px 0 #DDDFE0);
}
.cta-btn-list a.linkbox.line:hover .line-tip,
.cta-btn-list a.linkbox.line:focus-visible .line-tip {
	opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.cta-btn-list a.linkbox.line .line-tip span { display: block; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
.cta-btn-list a.linkbox.line .line-tip .lt-h { font-weight: 700; margin-bottom: calc(10 * var(--vw-ratio)); }
.cta-btn-list a.linkbox.line .line-tip .lt-i { display: flex; gap: calc(10 * var(--vw-ratio)); margin-bottom: calc(8 * var(--vw-ratio)); }
.cta-btn-list a.linkbox.line .line-tip .lt-n {
	flex: 0 0 auto; font-weight: 700; font-size: calc(11 * var(--vw-ratio)); color: #fff; background: #06C755;
	border-radius: calc(4 * var(--vw-ratio)); padding: 0 calc(6 * var(--vw-ratio)); height: calc(20 * var(--vw-ratio)); line-height: calc(20 * var(--vw-ratio));
}
.cta-btn-list a.linkbox.line .line-tip .lt-t { font-weight: 700; }
.cta-btn-list a.linkbox.line .line-tip .lt-f {
	margin-top: calc(10 * var(--vw-ratio)); padding-top: calc(10 * var(--vw-ratio)); border-top: 1px solid #EEF0F5;
	font-size: calc(12 * var(--vw-ratio)); color: #5B6683;
}
/* トップ下部の青いボックスは overflow:hidden で上が切れるので、ボタンの左に出す */
.box.bg-blue .cta-btn-list a.linkbox.line .line-tip {
	left: auto; bottom: auto; right: calc(100% + calc(14 * var(--vw-ratio))); top: 50%;
	transform: translate(calc(-6 * var(--vw-ratio)), -50%);
}
.box.bg-blue .cta-btn-list a.linkbox.line:hover .line-tip,
.box.bg-blue .cta-btn-list a.linkbox.line:focus-visible .line-tip { transform: translate(0, -50%); }
.box.bg-blue .cta-btn-list a.linkbox.line .line-tip:after {
	left: 100%; top: 50%; transform: translateY(-50%);
	border-top-color: transparent; border-left-color: #fff;
}
/* タッチ端末はホバーが無いので出さない（タップでそのままLINEへ） */
@media (hover: none) { .cta-btn-list a.linkbox.line .line-tip { display: none; } }

/* ヘッダーの文字だけロゴ(logo_text.svg)は既定で非表示。トップのFV上だけ home.css で表示に切り替える（2026-10-19） */
#header .logo a img.logo-text { display: none; }

/* CTAの流れる英字(.marquee)は position:absolute。親に position:relative が無いと overflow:hidden で切れず、
   SPでページ幅が2,700pxまで広がってiPhoneが引きで表示していた（会社情報ページ等）。2026-10-19 */
.cta-area .box { position: relative; }

/* スクロール後の固定ヘッダーは白ベタでなく半透明＋ぼかしにしてコンテンツに馴染ませる（2026-10-19） */
#header.is-animation {
	background: rgba(248,248,248,.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* マルキーはUL自体で切る（親の overflow:hidden だけでは iOS がページ幅を広げる）。横スクロールも根元で止める */
.cta-area .box .marquee { overflow: hidden; }
/* overflow-x:hidden は position:sticky（サービス紹介の追従画像）を壊すので clip にする */
html, body { overflow-x: clip; }
