@charset "UTF-8";

/* ========================================================================== 
 * Responsive 
 * ========================================================================== */ 

/*PCのみ表示(740px以下非表示)*/
@media screen and (max-width: 740px) {
	.visible-pc {
		display: none !important;
	}
}
/*SPのみ表示(741px以上非表示)*/
@media screen and (min-width: 741px) {
	.visible-sp {
		display: none !important;
	}
}

/*PCのみ表示(740px以下非表示)*/
@media screen and (max-width: 900px) {
	.visibleFV-pc {
		display: none !important;
	}
}

/*SPのみ表示(901px以上非表示)*/
@media screen and (min-width: 901px) {
	.visibleFV-sp {
		display: none !important;
	}
}

/*PCのみ非表示(740px以上非表示)*/
@media screen and (min-width: 740px) {
	.hidden-pc {
		display: none !important;
	}
}
/*SPのみ非表示(741px以下非表示)*/
@media screen and (max-width: 741px) {
	.hidden-sp {
		display: none !important;
	}
}

/* ==========================================================================
 * Root
 * ========================================================================== */
*,
::before,
::after {
	background-repeat: no-repeat;
	box-sizing: border-box;
}
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}
body {
	margin: 0;
	font-family: "Noto Sans JP", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, Osaka, sans-serif;
	font-size: 1.6em;
	font-size: 1.6rem;
	line-height: 1.5;
	background-color: #fff;
	overflow-x: hidden;
}

/* ==========================================================================
 * HTML5 display definitions
 * ========================================================================== */
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
	display: block;
}
audio,canvas,progress,video {
	display: inline-block;
	vertical-align: baseline;
}
audio:not([controls]) {
	display: none;
	height: 0;
}

/* ==========================================================================
 * Anchor
 * ========================================================================== */
a:link,a:visited {
	background-color: transparent;
	color: #085599;
	text-decoration: none;
}
a:active,a:hover {
	outline: 0;
	text-decoration: none;
}

/* ==========================================================================
 * Embedded
 * ========================================================================== */
img {
	max-width: 100%;
	height: auto;
	border: 0;
	vertical-align: bottom;
}
svg:not(:root) { overflow: hidden; }

/* ==========================================================================
 * Grouping
 * ========================================================================== */
figure { margin: 0; }
hr { box-sizing: content-box; height: 0; border: none; border-top: 1px solid #bbb; }
dd { margin-left: 0; }

/* ==========================================================================
 * Float
 * ========================================================================== */
.clear { clear: both; }
.clearfix:before,.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/* ==========================================================================
 * List
 * ========================================================================== */
ul,ol { padding: 0; }
ul { margin: 0; list-style: none; }
ul.list-disc { margin-left: 1.55em; list-style: disc; }
ul.list-annotation { margin-left: 1.3em; }
ul.list-annotation li::before { margin-left: -1.3em; content: "※\0020"; }
ol { list-style-type: none; }
ol.list-annotation { margin-left: 2em; padding: 0; counter-reset: number; list-style: none; }
ol.list-annotation li::before { margin-left: -2em; counter-increment: number; content: "※"counter(number)"\0020"; }
ul.list-disc li + li,ul.list-annotation li + li,ol li + li { margin-top: 8px; }

/* ==========================================================================
 * Text
 * ========================================================================== */
b,strong { font-weight: bold; }
mark { background: #ff0; color: #000; }
small,.txt-small { font-size: 80%; }
sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
address { font-style: normal; }
h1,.h1 { font-size: 3.2rem; line-height: 1.2; margin: 0; }
h2,.h2 { font-size: 2.4rem; line-height: 1.2; margin: 0; }
h3,.h3 { font-size: 1.8rem; line-height: 1.2; margin: 0; }
h4,.h4 { font-size: 1.6rem; line-height: 1.2; margin: 0; }
p { margin: 0; }
p + p { margin-top: .5em; margin-bottom: 0; }
.txt-left { text-align: left; }
.txt-center { text-align: center; }
.txt-right { text-align: right; }
.txt-unbold { font-weight: normal; }
.txt-bold { font-weight: bold; }
.txt-emphasis { color: #e74c3c; }
.txt-notes { color: #7f8c8d; }

/* ==========================================================================
 * Table
 * ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td,th { padding: 0; }

/* ==========================================================================
 * Form
 * ========================================================================== */
button,input,optgroup,select,textarea { color: inherit; font: inherit; margin: 0; border: 1px solid #999; }
input[type="text"],input[type="email"],input[type="tel"],textarea { width: 100%; padding: 5px; }
button { overflow: visible; }
button,select { text-transform: none; }
button,html input[type="button"],input[type="reset"],input[type="submit"] { -webkit-appearance: button; appearance: button; cursor: pointer; }
button[disabled],html input[disabled] { cursor: default; }
button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="checkbox"],input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; appearance: textfield; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
textarea { overflow: auto; }

/* ==========================================================================
 * Spacing
 * ========================================================================== */
.margin-none{margin:0px!important}.padding-none{padding:0px!important}
.margin-T0{margin-top:0px!important}.margin-T5{margin-top:5px!important}.margin-T10{margin-top:10px!important}.margin-T15{margin-top:15px!important}.margin-T20{margin-top:20px!important}.margin-T25{margin-top:25px!important}.margin-T30{margin-top:30px!important}.margin-T35{margin-top:35px!important}.margin-T40{margin-top:40px!important}.margin-T45{margin-top:45px!important}.margin-T50{margin-top:50px!important}.margin-T60{margin-top:60px!important}.margin-T70{margin-top:70px!important}.margin-T80{margin-top:80px!important}.margin-T90{margin-top:90px!important}.margin-T100{margin-top:100px!important}
.margin-R0{margin-right:0px!important}.margin-R5{margin-right:5px!important}.margin-R10{margin-right:10px!important}.margin-R15{margin-right:15px!important}.margin-R20{margin-right:20px!important}
.margin-B0{margin-bottom:0px!important}.margin-B5{margin-bottom:5px!important}.margin-B10{margin-bottom:10px!important}.margin-B15{margin-bottom:15px!important}.margin-B20{margin-bottom:20px!important}
.margin-L0{margin-left:0px!important}.margin-L5{margin-left:5px!important}.margin-L10{margin-left:10px!important}.margin-L15{margin-left:15px!important}.margin-L20{margin-left:20px!important}
.padding-T0{padding-top:0px!important}.padding-T5{padding-top:5px!important}.padding-T10{padding-top:10px!important}.padding-T15{padding-top:15px!important}.padding-T20{padding-top:20px!important}.padding-T25{padding-top:25px!important}.padding-T30{padding-top:30px!important}.padding-T35{padding-top:35px!important}.padding-T40{padding-top:40px!important}.padding-T45{padding-top:45px!important}.padding-T50{padding-top:50px!important}.padding-T60{padding-top:60px!important}.padding-T70{padding-top:70px!important}.padding-T80{padding-top:80px!important}.padding-T90{padding-top:90px!important}.padding-T100{padding-top:100px!important}
.padding-R0{padding-right:0px!important}.padding-R5{padding-right:5px!important}.padding-R10{padding-right:10px!important}.padding-R15{padding-right:15px!important}.padding-R20{padding-right:20px!important}
.padding-B0{padding-bottom:0px!important}.padding-B5{padding-bottom:5px!important}.padding-B10{padding-bottom:10px!important}.padding-B15{padding-bottom:15px!important}.padding-B20{padding-bottom:20px!important}
.padding-L0{padding-left:0px!important}.padding-L5{padding-left:5px!important}.padding-L10{padding-left:10px!important}.padding-L15{padding-left:15px!important}.padding-L20{padding-left:20px!important}

/* ==========================================================================
 * Common
 * ========================================================================== */
#page-container {
	margin: 0 auto;
	overflow-x: hidden;
}
.inner-width {
	width: 920px;
	margin-right: auto;
	margin-left: auto;
}
a.backtotop {
	position: fixed;
	bottom: 30px;
	right: 5%;
	width: 40px;
	height: 40px;
	padding: 38px 0 0;
	background-color: #ccc;
	color: #fff;
	text-align: center;
	font-size: 14px;
	cursor: pointer;
	opacity: .5;
	border-radius: 50%;
}
a.backtotop::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 17.3px 10px;
	border-color: transparent transparent #ffffff transparent;
}

/* ==========================================================================
 * Header
 * ========================================================================== */
.fv__inner {
	max-width: 1366px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.nav {
	background-color: #fff;
	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
	width: 100%;
	position: fixed;
	z-index: 9000;
}
.hd__flex {
	max-width: 1366px;
	min-height: 50px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 10px;
	align-items: center;
}
.hd__right--flex {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.hd__gnav--center {
	display: flex;
	align-items: center;
	width: 500px;
}
.hd__gnav--center li {
	flex: 1;
	text-align: center;
}
.hd__gnav--link:last-child { margin-right: 0; }
.hd__gnav--link.active a {
	display: block;
	width: 100%;
	cursor: pointer;
	font-size: 18px;
	font-weight: bold;
	color: #282a32;
	text-decoration: none;
	border-bottom: none;
	position: relative;
}
@media screen and (max-width: 940px) {
	.hd__gnav--link.active a { font-size: 14px; }
	.hd__gnav--link.active a:hover { color: #085599; }
	.hd__gnav--link.active a:hover::after {
		content: "";
		position: absolute;
		bottom: -24px;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #085599;
	}
	.gnavi__hamburger-menu { align-items: center; }
}
@media screen and (max-width: 751px) {
	.hd__flex { width: 100%; }
	.hd__gnav--logo { width: 40%; }
	.gnavi__link { color: #085599; font-weight: 700; background-color: #fff; text-decoration: none; }
	.menu__btn {
		align-items: center;
		display: flex;
		height: 50px;
		justify-content: center;
		position: fixed;
		top: 0px;
		right: 10px;
		z-index: 9999;
		width: 30px;
	}
	.menu__btn span,.menu__btn span:before,.menu__btn span:after {
		content: '';
		background: #085599;
		border-radius: 3px;
		display: block;
		height: 3px;
		position: absolute;
		width: 25px;
	}
	.menu__btn span:before { bottom: 8px; }
	.menu__btn span:after { top: 8px; }
	#menu__btn--check:checked ~ .menu__btn span { background-color: rgba(255,255,255,0); }
	#menu__btn--check:checked ~ .menu__btn span::before { bottom: 0; transform: rotate(45deg); }
	#menu__btn--check:checked ~ .menu__btn span::after { top: 0; transform: rotate(-45deg); }
	#menu__btn--check { display: none; }
	.gnavi__hamburger-menu {
		background: #fff;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;
		z-index: 100;
		transition: all 0.5s;
		width: 100%;
	}
	#menu__btn--check:checked ~ .gnavi__hamburger-menu { left: 0; }
	.gnavi__hamburger-menu ul { padding: 70px 10px 0; }
	.gnavi__hamburger-menu ul li { border-bottom: solid 1px #085599; list-style: none; padding: 0 0 0 3%; width: 100%; }
	.gnavi__hamburger-menu ul li a { box-sizing: border-box; color: #000; display: block; font-size: 15px; padding: 18px 0 15px 0; position: relative; text-decoration: none; width: 100%; }
	.gnavi__hamburger-menu ul li a::before { border-top: solid 2px #000; border-right: solid 2px #000; content: ""; height: 7px; transform: rotate(45deg); position: absolute; right: 11px; top: 26px; width: 7px; }
	.gnavi__hamburger-menu ul li:last-child { border-bottom: none; margin: 20px 0 0; padding: 0; text-align: center; }
	.gnavi__hamburger-menu ul li:last-child a::before { border-top: none; border-right: none; display: none; }
	.navi__link { background: none; }
	.navi__link a { color: #000 !important; }
	.navi__link a::before { border-top: solid 2px #000 !important; border-right: solid 2px #000 !important; }
}

/* ==========================================================================
 * FV
 * ========================================================================== */
.fv {
	background: url("../images/pc/fv_bg.jpg") no-repeat center center,#eaf6ff;
	height: 746px;
	background-position-y: 77px;
}
.fv__conteiner {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 88px;
	min-height: 726px;
	position: absolute;
	right: 5%;
}
.fv__copy {
	margin-right: 1%;
	min-width: auto;
}
.fv__copy picture {
	width: 120%;
	display: inline-block;
}
.fv__contact {
	width: 380px;
	align-items: center;
	margin-right: 20px;
	margin-left: 20px;
}
.fv__contact > div {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.fv__contact > div > div {
	max-height: 626px;
	overflow-x: hidden;
}
.fv__contact p {
	height: 50px;
	padding: 15px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 1.6rem;
	background-color: #085599;
	border-radius: 5px 5px 0 0;
	position: sticky;
	top: 0;
	z-index: 1;
}
.fv__contact p.fv__contact--link {
	height: auto;
	padding: 10px 5px 5px;
	text-align: right;
	color: #fff;
	font-weight: bold;
	font-size: 1.2rem;
	background-color: #e9f6ff;
	border-radius: 0;
	position: static;
}
.fv__contact iframe {
	padding: 0 10px;
	margin-bottom: 10px;
}
@media screen and (max-width: 1300px) {
	.fv__copy { margin-left: 20%; }
}
@media screen and (max-width: 1100px) {
	.fv__copy { margin-left: 17%; }
}
@media screen and (max-width: 980px) {
	.fv__contact { width: 400px; }
}
/* 1350px〜901px：画面幅が縮むにつれ背景画像を左へ連続シフト
   ・1350px時 → 50%（中央）のまま
   ・1000px時 → calc(50% - 98px) 相当（約100px左）
   ・ 901px時 → calc(50% - 126px) 相当（約126px左）
*/
@media screen and (max-width: 1350px) and (min-width: 901px) {
	.fv {
		background-position-x: calc(50% + (100vw - 1350px) * 0.28);
	}
}
@media screen and (max-width: 900px) {
	.fv { background: none #eaf6ff; height: auto; padding-bottom: 45px; }
	.fv__inner { min-width: unset; width: 100%; }
	.fv__conteiner { display: block; height: auto; padding-top: 80px; }
	.fv__contact p.fv__contact--link { font-size: 1.4rem; }
	.fv__copy.visibleFV-sp { width: 100%; }
	.fv__copy { margin: 0; width: 100%; }
	/* グローバルの width:120% を上書きしてSPで画面外にはみ出さないようにする */
	.fv__copy picture { width: 100%; display: block; }
	.fv__copy.visibleFV-sp img { min-width: 100%; }
	.fv__contact { margin: 40px 20px 0; width: calc(100% - 40px); }
	.fv__conteiner {
		position: static;
		right: 0;
	}
}

/* ==========================================================================
 * award
 * ========================================================================== */
.award { padding: 30px 0 0 0; }
.award__flex { display: flex; justify-content: center; gap: 30px; }
@media screen and (max-width: 740px) {
	.inner-width { width: 94%; }
	.award { display: none; }
	.award__flex { width: 100%; gap: 2%; position: absolute; top: 36%; padding-bottom: 20px; }
	.cta.fv__cta { display: none; }
}

/* ==========================================================================
 * cta
 * ========================================================================== */
.cta { align-items: center; padding: 15px 0 30px 0; }
.cta__subttl { font-size: 2.4rem; font-weight: bold; letter-spacing: 0.1em; text-align: center; margin-bottom: 10px; }
.cta__subttl--bluetxt { font-size: 3.0rem; color: #085599; }
.cta__btn--wrap {
	margin: auto;
	position: relative;
	width: 660px;
	color: #fff;
	background-color: #ff7a13;
	font-size: 3.0rem;
	font-weight: bold;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	align-items: center;
}
.cta__btn--wrap a { display: flex; text-decoration: none; transition: 0.3s; padding: 25px 60px 25px 30px; }
.cta__btn--wrap a:hover { cursor: pointer; transform: scale(1.1); }
.cta__btn--flex { width: 100%; display: flex; justify-content: center; align-items: center; text-align: center; }
.cta__btn--square { margin-right: 20px; padding: 5px 10px; color: #ff7a12; vertical-align: middle; background-color: #fff; border-radius: 5px; display: inline-block; position: relative; font-size: 1.4rem; }
.cta__btn--square strong { font-size: 1.8rem; }
.cta__btn--txt { color: #fff; margin-top: 0; }
.cta__btn--wrap::before { content: ""; margin: auto; position: absolute; top: 0; bottom: -3%; right: 8%; width: 15px; height: 15px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg); }
@media screen and (max-width: 740px) {
	.inner-width { width: 95% }
	.cta { padding: 2% 0; }
	.cta__btn--wrap { position: relative; width: 94%; }
	.cta__btn--wrap a { display: flex; text-decoration: none; transition: 0.3s; padding: 2% 10% 2% 3%; }
	.cta__btn--flex { display: flex; margin-right: 0; flex-direction: column; align-items: center; padding-right: 30px; }
	.cta__btn--square { margin-right: 0; display: block; font-size: 1.4rem; position: relative; padding: 0 3%; font-weight: normal; }
	.cta__btn--square strong { font-weight: bold; }
	.cta__btn--square br { display: none; }
	.cta__btn--orange span br { display: none; }
	.cta__btn--txt { font-size: 24px; }
	a.cta__btn--orange::before { right: 8%; }
}

/* ==========================================================================
 * Occupation
 * ========================================================================== */
.occupation { background: url(../images/pc/triangle_bg.jpg) center center; padding: 90px 0; }
.mainttl__flex { display: flex; justify-content: flex-start; gap: 40px; align-items: center; }
.line { display: inline-block; width: 40px; height: 2px; background-color: #085599; }
.mainttl__set { font-size: 3.6rem; font-weight: bold; line-height: 1.3; }
.ttl__blue { color: #085599; }
@media screen and (max-width: 740px) {
	.inner-width { width: 94%; }
	.occupation { background: #eaf6ff; padding: 30px 0 40px 0; }
	.mainttl__flex { display: block; justify-content: flex-start; }
	.mainttl__logo { width: 45%; height: auto; margin-bottom: -5px; }
	.line { display: none; }
	.mainttl__set { font-size: 3.0rem; font-weight: bold; line-height: 1.3; }
}

/* ==========================================================================
 * Occupation jobttl
 * ========================================================================== */
.occupation__jobFlex { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; }
.occupation__jobFlex--box { display: flex; flex-direction: column; align-items: center; }
.occupation__jobFlex--box.down { margin-top: 100px; }
.occupation__jobtxt { text-align: center; margin: 0 auto; }
.explainttl__small { font-size: 1.8rem; line-height: 2.0; color: #262626; font-weight: bold; }
.explaintxt__small { font-size: 1.8rem; line-height: 1.6; color: #262626; }
.occupation__jobFlex--box.gap { gap: 5px; margin-bottom: 15px; }
.occupation__jobFlex--box.gap p { margin: 0; line-height: 1.0; }
.occupation__jobFlex--picture { padding-top: 15px; }
@media screen and (max-width: 740px) {
	.inner-width { width: 94%; }
	.occupation__jobFlex { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
	.explainttl__small { font-size: 1.6rem; line-height: 1.8; color: #262626; font-weight: bold; }
	.occupation__jobFlex--box { padding-top: 10px; width: 48%; }
	.occupation__jobFlex--box.down { margin-top: 0; }
	.occupation__jobFlex--box.gap { gap: 5px; margin-bottom: 15px; width: 100%; }
	.occupation__jobFlex--picture { padding-top: 0; }
	.occupation__jobtxt--sp { display: block; padding-top: 3px; }
	.explainttl__small { font-size: 1.8rem; line-height: 2.0; color: #262626; font-weight: bold; }
	.explaintxt__small { font-size: 1.6rem; line-height: 1.4; color: #262626; }
	.explainttl__small.occupation__jobtxt { font-size: 1.6rem; }
}

/* ==========================================================================
 * Occupation usetime
 * ========================================================================== */
.normal__subttl { padding: 70px 0 60px 0; font-size: 3.0rem; font-weight: bold; text-align: center; line-height: 1.3; }
.normal__subttl span { font-size: 1.8rem; }
.occupation__useFlex { display: flex; justify-content: space-between; }
.occupation__usetimeList { width: 220px; padding: 20px 15px; background-color: #fff; text-align: justify; }
.occupation__usetimeList--icon { text-align: center; padding-bottom: 15px; }
@media screen and (max-width: 740px) {
	.inner-width { width: 94%; }
	.normal__subttl { padding: 30px 0 25px 0; font-size: 2.4rem; font-weight: bold; text-align: center; line-height: 1.3; }
	.occupation__useFlex { display: block; }
	.occupation__useFlex li + li { margin-top: 20px; }
	.occupation__usetimeList { width: 100%; padding: 20px 15px; background-color: #fff; text-align: justify; }
	.occupation__usetimeList--icon { width: 25%; height: auto; display: block; margin: 0 auto; }
}

/* ==========================================================================
 * problem
 * ========================================================================== */
.problem { padding: 40px 0 0 0; }
.problemttl__down { transform: translateY(25px) }
.problem__lost--conteiner { padding: 70px 0; }
.problem__lost--box { background-color: #eee; min-height: 480px; margin-top: 50px; }
.problem__flexset { display: flex; flex-direction: column; align-items: center; transform: translateY(-70px); gap: 20px; }
.problem__solutiontxt { padding-top: 30px; }
.problem__lost--diagram { margin: 0; }
.problem__lost--diagram picture { display: block; margin: 0; }
.triangle { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid #085599; }
.problem__flexset.solution__txt >* { padding: 0; }
.problem__solution--conteiner { padding: 10px 0; }
.problem__solution--box { background-color: #eaf6ff; min-height: 650px; margin-top: 20px; }
@media screen and (max-width: 740px) {
	.problem__solution--conteiner { margin: 20px 0 0; }
	.problemttl__down { transform: translateY(0px) }
	.problem__lost--conteiner { padding: 70px 0 10px 0; }
	.problem__lost--box { background-color: #eee; margin-top: 10px; width: 100vw; margin-left: calc(-50vw + 50%); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); padding-bottom: 30px; }
	.problem__flexset { gap: 10px; margin: 20px 0 0; transform: none; }
	.problem__solutiontxt { padding-top: 0; }
	.problem__solution--box { background-color: #eaf6ff; margin-top: 45px; width: 100vw; margin-left: calc(-50vw + 50%); padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); padding-bottom: 30px; }
	.problem__lost--subttl { margin-top: -60px; }
	.problem__solution--subttl { margin-top: -60px; }
}

/* ==========================================================================
 * reason
 * ========================================================================== */
.reason { background: url(../images/pc/triangle_bg.jpg) center center; padding: 60px 0 130px 0; }
.reason__down { transform: translateY(7px); }

.normal__reason { padding: 80px 0; position: relative; }
.normal__reason::before { background: url(../images/pc/reason_bg_01.png) no-repeat; content: ""; display: block; position: absolute; top: 70px; left: 420px; height: 308px; width: 1020px; }
.subttl__background--box { line-height: 50px; }
.subttl__background--box span { color: #fff; font-size: 3.6rem; font-weight: bold; background-color: #085599; width: fit-content; height: fit-content; padding: 0 7px; display: block; }
.subttl__background--box span + span { margin-top: 5px; }
.subttl__background--box br + * { margin-top: 20px; display: inline-block; }
.reason__ttl { max-width: 450px; }
.reason__staff--registration { padding: 100px 0 20px 0; }
.reason__text--experience { font-size: 2.4rem; font-weight: bold; text-align: center; padding: 30px 0 10px 0; }
@media screen and (max-width: 740px) {
	.reason { background: none; background-color: #eaf6ff; padding: 35px 0; }
	.inner-width { width: 94%; }
	.reason__down { transform: translateY(0px); }
	.reason__staff { display: block; }
	.reason__staff--registration { padding: 20px 0 20px 0; }
	.reason__ttl { width: 100%; }
	.normal__reason { padding: 40px 0 40px 0; }
	.normal__reason::before { background: none; }
	.normal__reason--img { display: block; width: 100%; }
	.normal__reason--pic { width: 25%; }
	.subttl__background--box { line-height: 3.0rem; margin-bottom: 15px; }
	.subttl__background--box span { font-size: 2.0rem; padding: 0 3%; display: block; }
}

/* ==========================================================================
 * reason_solution
 * ========================================================================== */
.solution__occType--flex { display: flex; justify-content: space-between; padding-top: 40px; flex-wrap: wrap; width: 100%; }
.solution__occType--flex > div { display: flex; flex-direction: column; width: 50%; justify-content: flex-end; }
.solution__occType--flex > div.width100 { margin: 0 40px 0 0; width: calc(50% - 40px); }
.solution__occType--flex .cta__wrap { margin-top: auto; }
.solution__occType--list { display: flex; flex-wrap: wrap; }
.solution__occType--list p { font-size: 3.6rem; font-weight: bold; margin-bottom: 20px; padding: 0; padding-left: 15px; border-left: 7px solid #085599; }
.listbody__n2 { padding-bottom: 15px; }
.solution__occType--listBody { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.solution__occType--listBody li { font-size: 1.8rem; width: 47%; }
.solution__occType--listBody li::before { content: "│"; }
.reason__img--ctaflex { margin: auto 0 0; }
.reason__2ndcta { margin: 25px auto 0; border: 2px solid #085599; padding: 12px 30px; position: relative; }
.reason__2ndcta::before { content: ""; margin: auto; position: absolute; top: 0; bottom: -3%; right: 10%; width: 10px; height: 10px; border-top: 2px solid #085599; border-right: 2px solid #085599; transform: rotate(45deg); }
.reason__2ndcta p { color: #085599; font-size: 1.6rem; font-weight: bold; padding-right: 15px; }
.reason__2ndcta.cta2nd_justyfy { width: fit-content; }
.normal__reason.secound__img::before { background: url(../images/pc/reason_bg_02.png) no-repeat; content: ""; display: block; position: absolute; top: 70px; left: 420px; height: 308px; width: 1020px; }
.reason__nothing { padding-top: 50px; position: relative; }
.reason__nothing::before { content: ""; position: absolute; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 30px solid #085599; top: 110%; left: 50%; transform: translateX(-50%); }
.reason__nothing--flex { display: flex; justify-content: center; gap: 20px; }
.reason__nothing--text { text-align: center; padding-top: 70px; }
@media screen and (max-width: 740px) {
	.solution__occType--flex { display: flex; flex-direction: column; gap: 40px; }
	.width100 { width: 100%; }
	.solution__occType--flex > div.width100 { margin: 0; width: 100%; }
	.solution__occType--flex > div { width: 100%; }
	.solution__occType--flex.listbody__n1--anothor { gap: 0; }
	.solution__occType--list p { font-size: 2.0rem; border-left: 5px solid #085599; }
	.solution__occType--listBody { gap: 8px 20px; display: flex; flex-wrap: wrap; }
	.solution__occType--listBody li { font-size: 1.6rem; width: auto; }
	.reason__img--cta img { width: 100%; }
	.solution__occType--small { font-size: 1.3rem; }
	.listbody__n1 { padding-bottom: 15px; gap: 8px 20px; }
	.reason__nothing--flex { flex-wrap: wrap; justify-content: center; gap: 20px; }
	.reason__nothing--flex div { flex: 0 0 calc(48% - 5px); }
	.normal__reason.secound__img::before { background: none; }
	.reason__nothing { padding-top: 0; }
	.reason__nothing::before { border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid #085599; top: 110%; left: 50%; transform: translateX(-50%); }
	.reason__nothing--position { margin-top: 45px; }
	.reason__img--cta { padding: 0; }
}

/* ==========================================================================
 * reason_place
 * ========================================================================== */
.reason__place { margin-top: 80px; }
.reason__place--flex { display: flex; justify-content: space-between; align-items: center; }
@media screen and (max-width: 1220px) {
	.reason__place--flex { display: block; flex-direction: column; }
}
@media screen and (max-width: 740px) {
	.reason__place--flex { display: block; flex-direction: column; }
	.reason__place--flex div + div { padding-top: 20px; }
}

/* ==========================================================================
 * map
 * ========================================================================== */
.map { padding: 30px 0 50px; background-color: #eefaff; }
.map__area { padding-top: 100px; }
.map__area dt { font-size: 2.0rem; font-weight: bold; color: #386097; }
.map__area dd { margin-top: 18px; }
.map__area li { font-size: 1.6rem; margin-right: 1em; line-height: 2; }
@media screen and (min-width: 741px) {
	.map__area { background: url(../images/pc/map.png) no-repeat top right; padding-top: 0; min-height: 812px; min-width: 926px; position: relative; }
	.map__area--ttl { font-size: 2.0rem; font-weight: bold; color: #386097; border: 2px solid #386097; border-radius: 5px; position: absolute; left: 0; top: 100px; padding: 27px 36px; }
	.map__area dl { margin: 16px 0; }
	.map__area .tohoku { position: absolute; top: 233px; right: 0; width: 195px; }
	.map__area .kitakanto { position: absolute; top: 413px; right: 0; width: 250px; }
	.map__area .tokyo { position: absolute; top: 519px; right: 0; width: 250px; }
	.map__area .minamikanto { position: absolute; top: 652px; right: 0; width: 250px; }
	.map__area .hokushinetsu { position: absolute; top: 163px; left: 318px; width: 195px; }
	.map__area .toukai { position: absolute; top: 675px; left: 364px; width: 210px; }
	.map__area .kansai { position: absolute; top: 276px; left: 294px; width: 145px; }
	.map__area .chugokushikoku { position: absolute; top: 326px; left: 44px; width: 195px; }
	.map__area .kyushuokinawa { position: absolute; top: 753px; left: 72px; width: 210px; }
	.map__area ul { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; }
	.map__area li:hover { font-weight: bold; color: #386097; }
	.tooltip { position: relative; cursor: pointer; }
	.tooltip-text { color: #fff; border-radius: 5px; background: #386097; display: none; position: absolute; padding: 10px; width: 200px; line-height: 1.5; font-weight: normal; }
	.tooltip-ttl { display: block; }
	.tooltip-text:before { border: 15px solid transparent; border-top: 15px solid #386097; content: ""; margin: 0 0 0 -15px; position: absolute; top: -24px; right: 69%; transform: rotateZ(180deg); }
	.tooltip:hover .tooltip-text,.tooltip .tooltip-text:hover { display: inline-block; animation: fadein 0.5s linear 0s 1 both; top: 35px; left: -30px; z-index: 999; }
}
@media screen and (max-width: 740px) {
	.map__area { padding-top: 30px; }
	.map__area--ttl { text-align: center; font-weight: bold; color: #386097; font-size: 2.0rem; margin-bottom: 20px; position: relative; }
	.map__area--ttl::after { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 15px 9px 0 9px; border-color: #386097 transparent transparent transparent; }
	.map__area dl { margin: 10px 0; }
	.map__area dt { background: #386097; border-radius: 5px; font-weight: normal; color: #fff; padding: 10px 20px; position: relative; }
	.map__area dt.icon-plus::before { content: ""; position: absolute; top: 50%; right: 10px; width: 15px; height: 15px; background: url(../images/sp/common_icon_plus_wh.png) no-repeat center center /cover; transform: translateY(-50%); }
	.map__area dt.icon-minus::before { content: ""; position: absolute; top: 50%; right: 10px; width: 15px; height: 2px; background: url(../images/sp/common_icon_minus_wh.png) no-repeat center center /cover; transform: translateY(-50%); }
	.map__area dd { margin-top: 5px; display: none; }
	.map__area li { background: #fff; border-radius: 5px; width: 100%; padding: 10px 20px; color: #386097; }
	.map__area li + li { margin-top: 5px; }
	.tooltip-text { font-weight: normal; display: block; border-top: 1px solid #386097; color: #386097; padding-top: 10px; margin-top: 5px; line-height: 1.5; }
	.tooltip-ttl { display: none; }
}

/* ==========================================================================
 * cta only
 * ========================================================================== */
.cta__only { margin: 20px 0; }
@media screen and (max-width: 740px) {
	.cta__only { margin: 20px 0 35px 0; }
}

/* ==========================================================================
 * casestudy
 * ========================================================================== */
.casestudy { background: url(../images/pc/triangle_bg.jpg) center center; padding: 60px 0; }
.casestudy__award { padding-top: 40px; }
.casestudy__award > * { text-align: center; }
.casestudy__award p + p { margin-top: 15px; }
.casestudy__voice { margin-top: 55px; }
.casestudy__voice p { text-align: center; }
.casestudy__voice--flex { display: flex; justify-content: space-between; padding-top: 30px; }
.casestudy__voice--box { background-color: #fff; padding: 17px 17px 25px 17px; width: 290px; }
.casestudy__voice--box > p { text-align: left; }
.casestudy__voice--box > p + p { margin-top: 15px; }
.voice__person { font-size: 1.4rem; font-weight: bold; }
.ttl__24txt { font-size: 2.4rem; font-weight: bold; }
.voice__blueback { background-color: #085599; width: 100%; padding: 10px; align-items: center; display: flex; justify-content: center; }
.voice__blueback span { color: #fff; }
@media screen and (max-width: 740px) {
	.casestudy { background: none; background-color: #eaf6ff; padding: 50px 0 1px; }
	.casestudy__award > * { text-align: left; }
	.casestudy__voice { margin-top: 15px; }
	.casestudy__voice--flex { display: flex; flex-direction: column; align-items: center; padding-top: 0; gap: 20px; }
	.casestudy__voice--box { width: 100%; }
	.voice__pic img { width: 100%; }
}

/* ==========================================================================
 * flow
 * ========================================================================== */
.flow { background: url(../images/pc/triangle_bg.jpg) center center; padding: 50px 0 80px 0; }
.flow__list { margin-top: 45px; }
.flow__list li + li { margin-top: 40px; }
.flow__box { background-color: #fff; padding: 20px 60px; position: relative; margin: 0; }
.flow__box--flex { display: flex; justify-content: flex-start; align-items: center; gap: 40px; height: 150px; }
.flow__box--steplogo { width: 80px; height: auto; flex-shrink: 0; align-items: center; }
.flow__box--steptext > p + p { margin-top: 20px; }
.flow__box::before { content: ""; position: absolute; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #085599; bottom: -31px; left: 50%; transform: translateX(-50%); }
.flow__box:last-of-type::before { display: none; }
.flow__attention--box { background-color: #085599; width: 380px; border-radius: 5px; }
.flow__attention { color: #fff; padding: 15px 30px; font-weight: bold; font-size: 1.8rem; }
.flow__attention span { text-align: center; display: block; }
@media screen and (max-width: 740px) {
	.flow { background: none; background-color: #eaf6ff; padding: 50px 0; }
	.flow__box { width: 100%; height: auto; text-align: center; padding: 12% 3%; }
	.flow__box--flex { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; height: auto; }
	.flow__box--steplogo { width: 25%; }
	.flow__box--steptext > p + p { margin-top: 10px; }
	.explaintxt__small.flow_explain { text-align: start; padding: 0 5px; }
	.flow__attention--box { width: 100%; margin-top: 10px; }
	.flow__attention { padding: 3% 0; }
	.ttl__24txt.flow__attentiontxt { font-size: 2.0rem; }
}

/* ==========================================================================
 * qa
 * ========================================================================== */
.qa { background-color: #eaf6ff; padding: 110px 0; }
.qa__list--conteiner { padding-top: 40px; }
.qa__list--conteiner > * { margin-top: 20px; }
.qa__list { background-color: #fff; padding: 25px 50px; }
.qa__list > dt + dd { margin-top: 25px; }
.question__flex { display: flex; justify-content: flex-start; align-items: flex-start; gap: 25px; }
.flow__box--Qlogo { margin-top: 4px; flex-shrink: 0; }
.flow__box--Alogo { flex-shrink: 0; }
@media screen and (max-width: 740px) {
	.qa { padding: 50px 0 60px 0; }
	.qa__list { padding: 10% 7%; }
	.qa__list--conteiner { padding-top: 10px; }
	.question__flex { gap: 15px; }
	.flow__box--Qlogo { width: 7%; }
	.flow__box--Alogo { width: 7%; }
}

/* ==========================================================================
 * company
 * ========================================================================== */
.company { padding: 100px 0 110px 0; }
.company__body { margin-top: 70px; display: flex; justify-content: space-between; position: relative; }
.company__body--detail::before { background: url(../images/pc/company_bg_01.png) no-repeat; content: ""; display: block; position: absolute; top: 10px; left: 420px; height: 308px; width: 1020px; }
.company__body--detail { width: 560px; font-size: 1.6rem; }
.company__body figure { width: 340px; }
.company__body--detail dl { margin: 0; }
.company__body--detail dl + dl { margin-top: 20px; }
.company__body--detail dt { width: 140px; padding: 2px 0; color: #fff; text-align: center; background-color: #085599; border-radius: 100px; }
.company__body--detail dd { margin-top: 10px; }
.company__logoFlex { position: relative; }
.company__logoFlex--img { display: flex; flex-direction: row-reverse; gap: 20px; position: absolute; top: 37%; right: -65%; align-items: center; }
@media screen and (max-width: 740px) {
	.company { padding: 50px 0 0 0; }
	.company__body--detail::before { background: none; }
	.mainttl__flex.qa__conteiner--ttl { padding-bottom: 25px; }
	.company__body { display: block; margin-top: 30px; }
	.company__body--detail { width: 100%; }
	.company__body figure { display: none; }
	.company iframe { margin-top: 30px; }
	.company__logoFlex--img { position: initial; gap: 25px; justify-content: center; align-items: center; padding-top: 20px; }
	.company__logoFlex--img p { width: 20%; }
}

/* ==========================================================================
 * footer
 * ========================================================================== */
.footer { background-color: #eaf6ff; padding: 40px 0; text-align: center; color: #085599; font-size: 1.4rem; }
@media screen and (max-width: 740px) {
	.footer { background-color: #eaf6ff; padding: 15px 0; }
}

/* ==========================================================================
 * 埋め込みフォーム調整
 * ========================================================================== */
.hbspt-form { padding: 0 10px; }
.hbspt-form .hs-input { font-size: 1.3rem; min-width: initial; max-width: 100%; outline: none; line-height: 1.25em; padding: 7px; border: 2px solid #a49e92; transition: all 0.3s; border-radius: 5px; width: 100% !important; }
.hbspt-form .form-columns-1 span,.hbspt-form .form-columns-2 span { font-size: 1.4rem; color: #151514; font-weight: bold; margin: 8px 0px 4px 0px; display: inline-block; }
.hbspt-form .form-columns-1 span:first-child::before,.hbspt-form .form-columns-2 span:first-child::before { content: "必須"; color: #fff; display: inline-block; background: #ff7a12; border-radius: 3px; font-size: 1.1rem; margin: 0 3px 0 0; padding: 1px 2px 1px 2px; }
.hbspt-form .form-columns-1 .hs_request_details_description span:first-child::before { content: "任意"; color: #fff; display: inline-block; background: rgb(164,157,147); border-radius: 3px; font-size: 1.1rem; margin: 0 3px 0 0; padding: 1px 2px 1px 2px; }
.hbspt-form .form-columns-1 span.hs-form-required,.hbspt-form .form-columns-2 span.hs-form-required { display: none; }
.hbspt-form .no-list.hs-error-msgs.inputs-list { line-height: 13px; color: red; font-size: 10px; }
.hbspt-form ..field { margin-bottom: 8px; }
.hbspt-form .hs_personal_information .hs-input { width: auto !important; font-weight: nomal; }
.hbspt-form .form-columns-1 .hs_personal_information span { padding-left: 6px; font-size: 1.3rem; }
.hbspt-form .form-columns-0 .hs-richtext p { height: 20px; padding: 0px; text-align: left; color: #151514; font-weight: normal; font-size: 1.3rem; background-color: #fff; border-radius: 0; position: sticky; top: 0; z-index: 1; }
.hbspt-form .actions { margin-top: 1em; padding: 0 0 6px; text-align: center; }
.hbspt-form .actions .hs-button { background: rgb(0,162,255); background: linear-gradient(-180deg,rgba(0,162,255,1) 0%,rgba(0,142,222,1) 57%,rgba(0,142,222,1) 100%); color: #fff; font-size: 18px; width: 60%; font-weight: bold; padding: 5px 0; border-radius: 5px; }
.hbspt-form .actions .hs-button:hover { opacity: 0.7; }
.hbspt-form .hs_recaptcha { display: none; }
.grecaptcha-badge { visibility: hidden; }
.reCAPTCHA_txt { font-size: 1.2rem; display: block; padding: 10px; }
@media screen and (max-width: 900px) {
	.hbspt-form .form-columns-1,.hbspt-form .form-columns-2 { max-width: 100%; }
}
@media screen and (min-width: 901px) {
	.hbspt-form .form-columns-0 .hs-richtext a:hover,.reCAPTCHA_txt a:hover { text-decoration: underline; }
}

/* ==========================================================================
 * フォームフラッシュアニメーション
 * CTAボタンクリック時にフォーム全体を水色オーバーレイで光らせる
 * ========================================================================== */

/* フォーム上に重ねるオーバーレイ要素（JSで生成・除去） */
@keyframes overlayFlash {
	0%   { opacity: 0; }
	20%  { opacity: 1; }
	50%  { opacity: 0.45; }
	70%  { opacity: 0.85; }
	100% { opacity: 0; }
}

#fv-contact-flash-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(8, 136, 200, 0.22);
	pointer-events: none;
	z-index: 10000;
	animation: overlayFlash 1.4s ease-in-out forwards;
}

/* フォーム外縁のグロー */
@keyframes formGlow {
	0%   { box-shadow: -2px 0 5px rgba(0,0,0,0.15); }
	20%  { box-shadow: -12px 0 50px rgba(8,136,200,0.95), 0 0 60px rgba(8,136,200,0.7); }
	50%  { box-shadow: -6px 0 25px rgba(8,136,200,0.5); }
	70%  { box-shadow: -12px 0 50px rgba(8,136,200,0.95), 0 0 60px rgba(8,136,200,0.7); }
	100% { box-shadow: -2px 0 5px rgba(0,0,0,0.15); }
}

.fv__contact.form-flash {
	animation: formGlow 1.4s ease-in-out forwards;
}

/* ==========================================================================
 * PC固定フォーム（右サイドバー）
 * 901px以上：フォームを右端に固定、コンテンツ全体を縮小して収める
 * 900px以下：元のSPレイアウトに戻す（固定解除、フォーム非表示でも可）
 * ========================================================================== */

/* SP（900px以下）：固定を解除してnavとcontainerを元に戻す */
@media screen and (max-width: 900px) {
	.nav { width: 100% !important; }
	#page-container { margin-right: 0 !important; }
}

/* PC（901px以上）：固定フォーム適用 ベース幅420px */
@media screen and (min-width: 901px) {

	/* ヘッダーをフォーム幅分縮めてナビが隠れないようにする */
	.nav {
		width: calc(100% - 420px) !important;
	}

	/* メインコンテンツにフォーム幅分の右マージンを確保 */
	#page-container {
		margin-right: 420px !important;
	}

	/* inner-widthをパーセント指定にしてコンテナ幅に合わせて縮小 */
	.inner-width {
		width: 90% !important;
		max-width: 920px !important;
	}

	/* FVコンテナ：右端をページコンテンツ領域の右端に固定し、右寄せ */
	.fv__conteiner {
		justify-content: flex-end !important;
		right: 0 !important;
	}

	/* FVコピー：右端固定のまま左方向へ拡大
	   width の値を変えてサイズ調整してください */
	.fv__copy {
		margin-left: 0 !important;
		margin-right: 30px !important;
		width: 55vw;
		max-width: 700px;
	}
	.fv__copy picture {
		width: 100%;
		display: block;
	}
	/* ★ 最重要：これがないと画像が自然サイズ(579px)から拡大されない
	   max-width:100% は上限を定めるだけで「コンテナを満たす」意味はない */
	.fv__copy img {
		width: 100%;
	}

	/* フォームを右端に常時固定 */
	.fv__contact {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		width: 420px !important;
		max-width: 420px !important;
		height: 100vh !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		z-index: 9999 !important;
		background-color: #e9f6ff !important;
		display: flex !important;
		flex-direction: column !important;
		margin: 0 !important;
		padding: 0 !important;
		box-shadow: -2px 0 5px rgba(0,0,0,0.15) !important;
		border-left: 4px solid transparent; /* フラッシュアニメーション用 */
	}

	/* フォームリンク部分 */
	.fv__contact p.fv__contact--link {
		flex-shrink: 0 !important;
		padding: 12px 10px 8px !important;
		font-size: 1.3rem !important;
		text-align: right !important;
		background-color: #e9f6ff !important;
		border-radius: 0 !important;
		position: static !important;
		height: auto !important;
	}

	/* フォーム本体ラッパー */
	.fv__contact > div {
		flex: 1 !important;
		display: flex !important;
		flex-direction: column !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		overflow: hidden !important;
		background-color: #fff !important;
	}

	/* フォームタイトル「お問い合わせフォーム」 */
	.fv__contact > div > p {
		flex-shrink: 0 !important;
		height: 50px !important;
		padding: 15px !important;
		text-align: center !important;
		color: #fff !important;
		font-weight: bold !important;
		font-size: 1.6rem !important;
		background-color: #085599 !important;
		border-radius: 0 !important;
		position: sticky !important;
		top: 0 !important;
		z-index: 1 !important;
	}

	/* フォームスクロールエリア */
	.fv__contact > div > div {
		flex: 1 !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		max-height: none !important;
	}

	/* reCAPTCHA注記 */
	.fv__contact .reCAPTCHA_txt {
		font-size: 1.1rem !important;
		padding: 5px 10px 10px !important;
	}

	/* CTAボタン幅をコンテナ幅に合わせる */
	.cta__btn--wrap {
		width: 90% !important;
		max-width: 660px !important;
	}

	/* ページトップボタンがフォームに隠れないよう移動 */
	a.backtotop {
		right: calc(420px + 20px) !important;
	}

	/* スクロールバー */
	.fv__contact > div > div::-webkit-scrollbar { width: 6px; }
	.fv__contact > div > div::-webkit-scrollbar-track { background: #f1f1f1; }
	.fv__contact > div > div::-webkit-scrollbar-thumb { background: #aaa; border-radius: 3px; }
	.fv__contact > div > div::-webkit-scrollbar-thumb:hover { background: #085599; }
}

/* 1400px以下：フォーム380px */
@media screen and (min-width: 901px) and (max-width: 1400px) {
	.nav { width: calc(100% - 380px) !important; }
	#page-container { margin-right: 380px !important; }
	.fv__contact { width: 380px !important; max-width: 380px !important; }
	a.backtotop { right: calc(380px + 20px) !important; }
}

/* 1200px以下：フォーム340px */
@media screen and (min-width: 901px) and (max-width: 1200px) {
	.nav { width: calc(100% - 340px) !important; }
	#page-container { margin-right: 340px !important; }
	.fv__contact { width: 340px !important; max-width: 340px !important; }
	a.backtotop { right: calc(340px + 20px) !important; }
}

/* 1000px以下：フォーム300px */
@media screen and (min-width: 901px) and (max-width: 1000px) {
	.nav { width: calc(100% - 300px) !important; }
	#page-container { margin-right: 300px !important; }
	.fv__contact { width: 300px !important; max-width: 300px !important; }
	.fv__contact > div > p { font-size: 1.4rem !important; }
	a.backtotop { right: calc(300px + 20px) !important; }
}

/* フォーム固定により幅が圧縮される範囲でレイアウト調整 */
@media screen and (min-width: 901px) and (max-width: 1210px) {
	/* タイトルを折り返さない */
	.solution__occType--list > p {
		white-space: nowrap;
	}
	/* リストと画像を縦並びに変更（画像が下に来る） */
	.solution__occType--flex {
		flex-direction: column;
	}
	.solution__occType--flex > div,
	.solution__occType--flex > div.width100 {
		width: 100%;
		margin: 0;
	}
	/* reason__img--ctaflex も横幅いっぱいに */
	.reason__img--ctaflex {
		width: 100%;
	}
}

/* 1300px以下：::beforeの背景画像を非表示にし、
   SP版と同じくHTML上の.normal__reason--img（visible-sp）を
   コンテンツ直下の画像として表示する */
@media screen and (min-width: 901px) and (max-width: 1300px) {
	.normal__reason::before,
	.normal__reason.secound__img::before {
		background: none;
	}
	.normal__reason--img.visible-sp {
		display: block !important;
		width: 100%;
	}
}

/* ==========================================================================
 * map__area スケール調整（PC・フォーム固定時）
 * transform: scale で比率を保ちながら縮小。
 * map__area は min-height:812px の固定レイアウトのため、
 * transform 後に余白が残る分を margin-bottom のマイナス値で補正する。
 * margin-bottom の計算式: 812px × (scale - 1)
 * ========================================================================== */

/* 1201px〜1320px：フォーム380px、スケール0.90 */
@media screen and (min-width: 1201px) and (max-width: 1320px) {
	.map__area {
		transform: scale(0.90);
		transform-origin: top left;
		margin-bottom: -82px; /* 812 × (0.90 - 1) */
	}
}

/* 1001px〜1200px：フォーム340px、スケール0.75 */
@media screen and (min-width: 1001px) and (max-width: 1200px) {
	.map__area {
		transform: scale(0.75);
		transform-origin: top left;
		margin-bottom: -203px; /* 812 × (0.75 - 1) */
	}
}

/* 901px〜1000px：フォーム300px、スケール0.65 */
@media screen and (min-width: 901px) and (max-width: 1000px) {
	.map__area {
		transform: scale(0.65);
		transform-origin: top left;
		margin-bottom: -284px; /* 812 × (0.65 - 1) */
	}
}