@charset "shift_jis";
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  ---------------------------------------------- +base & parts   */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#landing ol,#landing li { list-style: none!important; margin-left: 0!important;}
/* --- リンク画像の透過--- */
#landing a:hover {
opacity: .65;
-webkit-opacity: .65;
-moz-opacity: .65;
}
#landing a {
-webkit-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
transition: opacity .2s ease-out;
}

/********************
   common
*********************/
#hawk_vision {
	--font-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", 'メイリオ', Meiryo, sans-serif;

	--color-black01: #000;
	--color-black02: #1a1a1a;
	--color-gray01: #303030;
	--color-deep_blue01: #012449;
	--linear_gradient01: linear-gradient(113.15deg, rgba(51, 68, 118, 1) 0.25%, rgba(0, 37, 73, 1) 100%);
	--linear_gradient02: linear-gradient(30deg, rgba(202, 38, 34, 1) 0%, rgba(160, 66, 99, 0.7) 30.2%, rgba(99, 78, 150, 1) 80.2%);

	--wrapper01: 1000px;
	--wrapper02: 980px;

	position: relative;
	font-size: 16px;
	font-weight: 500;
	font-family: var(--font-base);
	color: var(--color-black01);
	letter-spacing: 0.16em;
}

#hawk_vision *,
#hawk_vision *::before,
#hawk_vision *::after {
	box-sizing: border-box;
}

#hawk_vision h1 {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.44;
}

#hawk_vision h2 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 50px;
	letter-spacing: 0.02em;
}

#hawk_vision h3 {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.55;
	margin-bottom: 29px;
	letter-spacing: 0.04em;
}

#hawk_vision p {
	font-size: 16px;
	font-weight: 500;
	line-height: 2.1;
	letter-spacing: 0.16em;
}

#hawk_vision img {
	max-width: 100%;
	height: auto;
}

#hawk_vision figure {
	margin: 0;
}
/********************
   main
*********************/
#hawk_vision main {
	overflow: hidden;
}

#hawk_vision .main_section {
	position: relative;
	padding: 118px 0 130px;
	z-index: 10;
}

/********************
   parts
*********************/
#hawk_vision .contents_wrapper {
	position: relative;
	width: 900px;
	max-width: var(--wrapper01);
	margin-right: auto;
	margin-left: auto;
	z-index: 1;
}

#hawk_vision .attention_text {
	font-size: 13px;
	text-align: left;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.15em;
}

#hawk_vision .underline01 {
	--underline_color: rgba(158, 128, 62, 0.32);
	position: relative;
	display: inline;
	font-size: 1.02em;
	background: linear-gradient(transparent 0%, transparent 38%, var(--underline_color) 76%, var(--underline_color) 92%, transparent 92%);
}


#hawk_vision .heading_deco01 {
	position: relative;
}

#hawk_vision .heading_deco01::before {
	content: "";
	position: relative;
	display: block;
	margin: 0 auto 69px;
	width: 100px;
	height: auto;
	aspect-ratio: 100/80;
	background-image: url(../img/design/heading_deco.png);
	background-repeat: no-repeat;
	background-size: contain;
}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  ---------------------------------------------- +landing  */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/********************
   fv
*********************/
#hawk_vision .fv {
	position: relative;
	width: 100%;
	height: auto;
	background: var(--color-black02);
	color: #fff;
	margin: 0 auto;
	z-index: 100;
}

#hawk_vision .fv__bg {
	position: relative;
}

#hawk_vision .fv__bg img {
	width: 100%;
	height: auto;
	max-height: 100vh;
	object-fit: cover;
	object-position: 20%;
}


#hawk_vision .fv__wrapper {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1300px;
	height: 100%;
	text-align: left;
}

#hawk_vision .fv__inner {
	position: relative;
	line-height: 1;
	width: fit-content;
	margin-left: auto;
	margin-right: 40px;
	margin-top: 9.2%;
	font-weight: 700;
}

#hawk_vision .fv__lead {
	position: relative;
}

#hawk_vision .fv__tit {
	position: relative;
	transform: translateX(-4.4%);
}


#hawk_vision .fv__logo {
	position: absolute;
	top: 20px;
	left: 15px;
	width: 100%;
	z-index: 100;
}

/********************
    worry
*********************/
#hawk_vision .worry {
	position: relative;
	padding-top: 155px;
	padding-bottom: 132px;
}

#hawk_vision .worry__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#hawk_vision .worry__bg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 92vw;
	min-width: 1250px;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 32.94%, rgba(128, 128, 128, 0) 100%);
	z-index: 2;
}

#hawk_vision .worry__bg img {
	position: absolute;
	top: 0;
	right: -200px;
	width: 73vw;
	min-width: 920px;
	height: 100%;
	object-fit: cover;
	object-position: 50% 86%;
	z-index: 1;
}

#hawk_vision .worry__heading {
	margin-bottom: 28px;
}

#hawk_vision .worry__list {
	width: 620px;
}

#hawk_vision .worry__list_item {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	column-gap: 17px;
	padding: 17px 25px 19px 39px;
	margin-top: 18px;
	background: rgba(0, 37, 73, 0.66);
	line-height: 1;
}

#hawk_vision .worry__list_item::before {
	content: "";
	position: relative;
	display: block;
	width: 25px;
	height: auto;
	aspect-ratio: 26/29;
	margin-top: -3.2px;
	background-image: url(../img/design/check_mark01.png);
	background-repeat: no-repeat;
	background-size: contain;
}

/********************
    recommend
*********************/
#hawk_vision .recommend {
	padding: 0;
	z-index: 10;
}

#hawk_vision .recommend__heading {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 44px 25px 45px;
	background: #002549;
}
#hawk_vision .recommend__heading::after {
	content: "";
	position: absolute;
	top: calc(100% - 1px);
	left: 50%;
	transform: translateX(-50%);
	width: 76px;
	height: auto;
	aspect-ratio: 76/50;
	background: #002549;
	clip-path: polygon( 0 0 , 100% 0% , 50% 100% );
	z-index: 10;
}

#hawk_vision .recommend__wrapper {
	position: relative;
}

#hawk_vision .recommend__inner {
	position: relative;
	width: fit-content;
	margin-left: auto;
	margin-right: 0;
	text-align: center;
	padding: 180px 0 210px;
}
#hawk_vision .recommend__name {
	position: relative;
	transform: scale(1.06) translateY(-10%);
	transform-origin: top center;
}

#hawk_vision .recommend__bg_img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#hawk_vision .recommend__logo {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 11px 40px 28px;
	background: transparent;
}

/********************
    points
*********************/
#hawk_vision .points {
	padding: 182px 0 0;
	z-index: 1;
}
#hawk_vision .points > .deco_group .deco_group__box:nth-of-type(1):before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(-40%);
	display: block;
	width: 39%;
	min-width: 417px;
	height: 220px;
	background: var(--linear_gradient02);
	opacity: 0.1;
}
#hawk_vision .points > .deco_group .deco_group__box:nth-of-type(2)::before {
	content: "";
	position: absolute;
	top: 69px;
	right: 0;
	display: block;
	width: 82%;
	min-width: 870px;
	height: 156px;
	background: var(--linear_gradient02);
	opacity: 0.4;
}

#hawk_vision .points__heading {
	text-align: center;
	margin-bottom: 82px;
}

#hawk_vision .points__heading::before {
	margin-bottom: 34px;
}

#hawk_vision .points__wrapper {
	position: relative;
}
#hawk_vision .points__wrapper .deco_group__box::before {
	content: "";
	position: absolute;
	top: 0;
	transform: translateY(-32%);
	left: 0;
	display: block;
	width: 20%;
	min-width: 250px;
	height: 200px;
	background: var(--linear_gradient02);
	opacity: 0.4;
}

#hawk_vision .point {
	position: relative;
	background: rgba(222, 170, 205, 0.62);
	padding-top: 47px;
	padding-bottom: 96px;
	overflow: hidden;
	z-index: 10;
}

#hawk_vision .point__num {
	position: relative;
	left: -20px;
	display: block;
	width: fit-content;
	margin: 0 0 70px;
	z-index: 10;
}

#hawk_vision .point__num::before {
	content: "";
	position: absolute;
	top: 5.5px;
	right: 8.0px;
	width: 160px;
	height: auto;
	aspect-ratio: 159/162;
	background-image: url(../img/design/point__num_bg.png);
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}

#hawk_vision .point__tit {
	width: fit-content;
	margin: 0 0 28px;
}

#hawk_vision .point__text {
	margin: 0 0 28px;
	font-size: 16px;
	font-weight: 500;
	line-height: 2.1;
	letter-spacing: 0.16em;
}

#hawk_vision .point__attention_text,
#hawk_vision .point__img_attention_text {
	margin-top: 18px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.76;
}

#hawk_vision .point__img_attention_text {
	margin-top: 13px;
}

/* row */
#hawk_vision .point__block[data-type="row"] {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	column-gap: 55px;
}

#hawk_vision .point__block[data-type="row"] .point__text_block {
	flex: 1;
}

#hawk_vision .point__block[data-type="row"] .point__text,
#hawk_vision .point__block[data-type="row"] .point__attention_text {
	width: 325px;
}

#hawk_vision .point__block[data-type="row"] .point__img_block {
	width: fit-content;
	margin-top: 29px;
	max-width: 620px;
}

/* column */
#hawk_vision .point__block[data-type="column"] .point__text_block {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 22px;
	margin-bottom: 102px;
}

#hawk_vision .point__block[data-type="column"] .point__text_block > *:last-child {
	margin-bottom: 0;
}

#hawk_vision .point__block[data-type="column"] .point__num {
	margin-bottom: 0;
	grid-column: 1/2;
	grid-row: 1/5;
}

#hawk_vision .point__block[data-type="column"] .point__text {
	width: 730px;
}

#hawk_vision .point__block[data-type="column"] .point__tit {
	margin-top: 26px;
	margin-bottom: 28px;
}

/*****   1   *****/
#hawk_vision .point[data-num="01"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 102%;
	height: 125%;
	background-image: url(../img/design/point__bg01.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: -1;
	opacity: 0.62;
}
#hawk_vision .point[data-num="01"] {
	color: var(--color-black02);
}

#hawk_vision .point[data-num="01"] .point__img_block>div:nth-of-type(n+2) {
	margin-top: 39px;
}

/*****   2   *****/
#hawk_vision .point[data-num="02"] {
	background: var(--linear_gradient01);
	color: #fff;
}

#hawk_vision .point[data-num="02"] .point__block {
	column-gap: 32px;
}

#hawk_vision .point[data-num="02"] .point__img_block {
	width: 620px;
}

#hawk_vision .point[data-num="02"] .point__img_block>figure {
	position: relative;
	width: 380px;
	margin-left: 0;
	margin-right: auto;
}

#hawk_vision .point[data-num="02"] .point__img_block>figure img {
	width: 100%;
}

#hawk_vision .point[data-num="02"] .point__img_block>figure:nth-of-type(n+2) {
	margin-top: 34.7px;
}

#hawk_vision .point[data-num="02"] .point__img_block figcaption {
	position: absolute;
	top: 0;
	left: 100%;
	padding: 18px 28px 15px;
	font-size: 23.4px;
	white-space: nowrap;
}

#hawk_vision .point[data-num="02"] .point__img_block figcaption::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 296px;
	height: 2.0px;
	background: var(--linear_gradient02);
	z-index: -1;
}

#hawk_vision .point[data-num="02"] .point__img_block>figure:nth-of-type(1) {
	width: 440px;
}

#hawk_vision .point[data-num="02"] .point__img_block>figure:nth-of-type(2) {
	margin-left: auto;
	margin-right: 0;
}

#hawk_vision .point[data-num="02"] .point__img_block>figure:nth-of-type(2) figcaption {
	left: auto;
	right: 100%;
	text-align: right;
}

#hawk_vision .point[data-num="02"] .point__img_block>figure:nth-of-type(2) figcaption::before {
	left: auto;
	right: 0;
	width: 238px;
	transform: rotate(180deg);
}

#hawk_vision .point[data-num="02"] .point__img_block>figure:nth-of-type(3) {
	margin-left: 45px;
}

#hawk_vision .point[data-num="02"] .point__img_block>figure:nth-of-type(3) figcaption::before {
	width: 311px;
}

/*****   3   *****/
#hawk_vision .point[data-num="03"] {
	color: var(--color-black02);
}

#hawk_vision .point[data-num="03"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 102%;
	height: 134%;
	background-image: url(../img/design/point__bg02.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: -1;
	opacity: 0.55;
}

#hawk_vision .point[data-num="03"] .point__img_block {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	column-gap: 20px;
}

#hawk_vision .point[data-num="03"] .point__img_block>div p {
	position: relative;
	margin: 0 auto 18px;
	text-align: center;
	font-size: 22.8px;
	font-weight: 500;
	line-height: 1.1;
}

#hawk_vision .point[data-num="03"] .point__img_block>div p::before {
	content: "/";
	display: inline-block;
	line-height: 1;
	transform: rotateY(180deg) translateX(80%);
}

#hawk_vision .point[data-num="03"] .point__img_block>div p::after {
	content: "/";
	display: inline-block;
	line-height: 1;
	transform: translateX(80%);
}

/*****   4   *****/
#hawk_vision .point[data-num="04"] {
	background: var(--linear_gradient01);
	color: #fff;
}

#hawk_vision .point[data-num="04"] .point__block {
	column-gap: 10px;
}

#hawk_vision .point[data-num="04"] .point__img_block {
	width: 582px;
	margin-top: 62px;
}
#hawk_vision .point[data-num="04"] .point__img_block > div {
	position: relative;
	width: fit-content;
}
#hawk_vision .point[data-num="04"] .point__img_block > div:first-of-type {
	margin-left: auto;
	margin-right: 0;
	margin-bottom: 47px;
}
#hawk_vision .point[data-num="04"] .point__img_block > div:first-of-type::after {
	content: "";
	position: absolute;
	bottom: -40px;
	left: -47px;
	width: 73px;
	height: auto;
	aspect-ratio: 73/111;
	background-image: url(../img/design/point04__arrow.png);
	background-repeat: no-repeat;
	background-size: contain;
}

/*****   5   *****/
#hawk_vision .point[data-num="05"] {
	color: var(--color-black02);
}

#hawk_vision .point[data-num="05"]::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 102%;
	height: 134%;
	background-image: url(../img/design/point__bg03.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: -1;
	opacity: 0.55;
}

/********************
    color_sec
*********************/
#hawk_vision .color_sec {
	position: relative;
	padding-top: 82px;
	padding-bottom: 310px;
	text-align: center;
}

#hawk_vision .color_sec .deco_group__box::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 76%;
	min-width: 960px;
	height: 147px;
	background: var(--linear_gradient02);
	opacity: 0.4;
}

#hawk_vision .color_sec .deco_group__box::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 70%;
	display: block;
	width: 25%;
	min-width: 320px;
	max-width: 340px;
	height: 228px;
	background: var(--linear_gradient02);
	opacity: 0.1;
}

#hawk_vision .color_sec__heading {
	margin: 0 auto 34px;
	line-height: 1.1;
}

#hawk_vision .color_sec__text {
	margin: 0 auto 50px;
	color: var(--color-deep_blue01);
	font-size: 26px;
	line-height: 1.32;
}

#hawk_vision .color_sec__img_block {
	margin: 76px auto 18px;
}