@charset "UTF-8";
/****************************************
root
*****************************************/
:root{
	--key-red : #CB0014;
	--key-gold : #E8A23D;
}
/****************************************
common parts
*****************************************/
/*section*/
.sec{
	padding: 160px 0;
	position: relative;
}
@media screen and (max-width:768px){
	.sec{
		padding: 80px 0;
	}
}
.sec .inner_m,
.sec .inner_l{
	position: relative;
	z-index: 2;
}
.sec_title{
	font-size: 30px;
	text-align: center;
}
@media screen and (max-width:768px){
	.sec_title{
		font-size: 24px;
	}
}
.sec_subtitle{
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}
@media screen and (max-width:768px){
	.sec_subtitle{
		font-size: 14px;
	}
}
.sec_subtitle.gold{
	color: var(--key-gold);
}
.sec_subtitle.white{
	color: #fff;
}
.sec_read{
	font-size: 18px;
	margin-top: 20px;
	text-align: center;
}
@media screen and (max-width:768px){
	.sec_read{
		font-size: 16px;
		margin-top: 20px;
	}
}
/****************************************
header
*****************************************/
.header{
	background: linear-gradient(to bottom,  #cb0014 0%,#a50717 100%);
	display: flex;
	justify-content: space-between;
	padding: 20px;
	position: sticky;
	top: 0;
	z-index: 99;
}
@media screen and (max-width:768px){
	.header{
	}
}
@media screen and (max-width:768px){
	.header_logo{
		position: relative;
		z-index: 2;
	}
}
.header_logo img{
	display: block;
	height: 52px;
}
@media screen and (max-width:768px){
	.header_logo img{
		height: 35px;
	}
}
.header_nav{
	align-items: center;
	display: flex;
}
@media screen and (max-width:768px){
	.header_nav{
		background: linear-gradient(to bottom,  #cb0014 0%,#a50717 100%);
		justify-content: center;
		height: 100dvh;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}
}
.header_nav_list{
	align-items: center;
	display: flex;
	gap: 20px;
}

@media screen and (max-width:768px){
	.header_nav_list{
		flex-direction: column;
		gap: 40px;
	}
}
.header_nav_list a{
	font-size: 18px;
	font-weight: 700;
}
.header_nav_list .link a{
	color: #F0C258;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}
.header_nav_list .link a::before{
	background: #F0C258;
	border-radius: 50%;
	content: '';
	display: inline-block;
	height: 15px;
	margin-right: 5px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
	width: 15px;
}
.header_nav_list .btn a{
	background: linear-gradient(to bottom,  #e6ac3e 0%,#f3c75d 50%,#f3c560 100%);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
	border-radius: 10px;
	display: inline-block;
	padding: 10px 20px;
}
/*icon-humburger*/
.icon-hamburger {
	cursor: pointer;
	height: 25px;
	margin: 0 auto;
	position: absolute;
	right: 20px;
	transition: .3s;
	top: 26px;
	width: 30px;
	z-index: 99;
}
.icon-hamburger .bar {
	display: inline-block;
	width: 30px;
	height: 2px;
	background-color: #fff;
	position: absolute;
	left: 0;
	transition: .25s ease-in-out;
}
#bar01 {top: 0;}
#bar02 {top: 10px;}
#bar03 {top: 20px;}
.active.bar{
	background:#fff;
}
.active#bar01 {
	top: 10px;
	transform: rotate(45deg);
}
.active#bar02 {width: 0;}
.active#bar03 {
	top: 10px;
	transform: rotate(135deg);
}
/****************************************
footer
*****************************************/
.footer{
	background: #0e162a;
	color: #fff;
	padding: 35px 0;
}
@media screen and (max-width:768px){
	.footer{
	}
}
.footer a{
	color: #fff;
}
.footer .inner_l{
	align-items: center;
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width:768px){
	.footer .inner_l{
		flex-direction: column;
		gap: 40px;
	}
}
.footer_logo img{
	display: block;
	height: 52px;
}
.footer_right{
	font-size: 14px;
}
.footer_right_nav{
	display: flex;
	gap: 20px;
}
/****************************************
fv
*****************************************/
.fv{
	background: url(../img/fv_bg.webp) center center / cover;
	padding: 20px;
	position: relative;
	text-align: center;
}
@media screen and (max-width:768px){
	.fv{
	}
}
.fv_logo img{
	height: 400px;
}
@media screen and (max-width:768px){
	.fv_logo img{
		height: 250px;
	}
}
.fv_img_text img{
	height: 150px;
}
@media screen and (max-width:768px){
	.fv_img_text img{
		height: auto;
		width: 90%;
	}
}
.fv_label img{
	height: 60px;
}
@media screen and (max-width:768px){
	.fv_label img{
		height: 50px;
	}
}
.fv_text{
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	text-shadow: 0px 9px 32px rgba(0, 0, 0, 1);
}
@media screen and (max-width:768px){
	.fv_text{
		font-size: 12px;
	}
}
.fv_sns_links{
	background: rgba(0, 0, 0, 0.8);
	border: 2px solid var(--key-gold);
	border-radius: 99em;
	display: flex;
	gap: 40px;
	justify-content: center;
	margin: 20px auto 0;
	padding: 10px 20px;
	width: 900px;
}
@media screen and (max-width:768px){
	.fv_sns_links{
		border-radius: 40px;
		flex-wrap: wrap;
		gap: 20px 10px;
		justify-content: center;
		width: 100%;
	}
}
.fv_sns_link{
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 18px;
	gap: 5px;
}
@media screen and (max-width:768px){
	.fv_sns_link{
		font-size: 14px;
	}
}
.fv_sns_link img{
	height: 40px;
}
@media screen and (max-width:768px){
	.fv_sns_link img{
		height: 30px;
	}
}
.fv_badge{
	height: 100px;
	position: absolute;
	right: 20px;
	top: 20px;
}
.fv_neko{
	bottom: 0;
	height: 240px;
	position: absolute;
	right: 0;
}
/****************************************
solution
*****************************************/
#solution{
	padding: 60px 0;
}
#solution .sec_title.sec_title_service_items{
	color: var(--key-red);
}
.solution_service_items{
	display: flex;
	justify-content: space-between;
	margin: 40px auto 0;
	width: 640px;
}
@media screen and (max-width:768px){
	.solution_service_items{
		flex-wrap: wrap;
		gap: 40px;
		justify-content: center;
		width: 100%;
	}
}
.solution_service_item{
	background: linear-gradient(45deg,  #d3ba37 0%,#ede5a4 50%,#d0b634 100%);
	border-radius: 20px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
	padding: 20px 15px;
	position: relative;
	width: 125px;
}
.solution_service_item_tab{
	background: linear-gradient(to bottom,  #cb0014 0%,#66000a 100%);
	border-radius: 99em;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	left: 50%;
	padding: 5px 0;
	position: absolute;
	text-align: center;
	top: 0;
	transform: translate(-50%,-50%);
	width: 75px;
}
.solution_service_item_img{
	text-align: center;
}
.solution_service_item_img img{
	height: 60px;
	margin: 0 auto;
}
.solution_service_item_text{
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}
@media screen and (max-width:768px){
	.solution_service_item_text{
		font-size: 12px;
	}
}
.solution_box{
	background: url(../img/solution_box_bg.webp) center center / cover;
	border-radius: 40px;
	color: #fff;
	margin-top: 80px;
	padding: 60px;
}
@media screen and (max-width:768px){
	.solution_box{
		margin-top: 60px;
		padding: 40px 20px;
	}
}
.solution_box_problem{
	margin-top: 40px;
}
.solution_box_problem_title{
	font-size: 24px;
	text-align: center;
}
@media screen and (max-width:768px){
	.solution_box_problem_title{
		font-size: 20px;
	}
}
.solution_box_problem_items{
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-top: 30px;
}
@media screen and (max-width:768px){
	.solution_box_problem_items{
		flex-wrap: wrap;
	}
}
.solution_box_problem_item{
	background: linear-gradient(45deg,  #6d6d6d 0%,#ffffff 50%,#d9d9d9 100%);
	border-radius: 20px 20px 20px 0;
	color: #0e162a;
	font-size: 14px;
	font-weight: 700;
	padding: 20px 10px;
	width: 180px;
}
@media screen and (max-width:768px){
	.solution_box_problem_item{
		font-size: 12px;
		width: calc( (100% - 20px) / 2 );
	}
}
.solution_box_problem_item_icon{
	text-align: center;
}
.solution_box_problem_item_icon img{
	height: 60px;
}
/*arrow*/
.solution_box_arrow{
	background: #FFF100;
  height: calc(tan(60deg) * 29px / 2);
  width: 33px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);

	margin: 30px auto;
}
/*solution*/
.solution_box_solution_title{
	color: var(--key-gold);
	font-size: 36px;
	text-align: center;
}
@media screen and (max-width:768px){
	.solution_box_solution_title{
		font-size: 30px;
	}
}
.solution_box_solution_items{
	display: flex;
	gap: 20px;
	margin: 30px auto 0;
	width: 960px;
}
@media screen and (max-width:768px){
	.solution_box_solution_items{
		flex-wrap: wrap;
		width: 100%;
	}
}
.solution_box_solution_item{
	background: linear-gradient(45deg,  #d3ba37 0%,#ede5a4 50%,#d0b634 100%);
	border-radius: 20px;
	color: #0e162a;
	font-weight: 700;
	padding: 20px;
	position: relative;
	width: calc( (100% - 60px) / 4 );
}
@media screen and (max-width:768px){
	.solution_box_solution_item{
		width: calc( (100% - 20px) / 2 );
	}
}
.solution_box_solution_item::after{
	background: url(../img/solution_item_bg.png) right center / cover;
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
.solution_box_solution_item_icon{
	text-align: center;
	position: relative;
	z-index: 2;
}
.solution_box_solution_item_icon img{
	height: 40px;
}
.solution_box_solution_item p{
	position: relative;
	z-index: 2;
}
.solution_sec_bg1{
	height: 545px;
	left: 0;
	position: absolute;
	top: 0;
}
@media screen and (max-width:768px){
	.solution_sec_bg1{
		height: 277px;
	}
}
.solution_sec_bg2{
	height: 546px;
	right: 0;
	position: absolute;
	bottom: 0;
}
@media screen and (max-width:768px){
	.solution_sec_bg2{
		height: 278px;
	}
}
/****************************************
service
*****************************************/
#service{
	background: url(../img/service_bg.png) center center / cover;
	color: #fff;
	padding: 80px 0;
}
.service_items{
	display: flex;
	flex-wrap: wrap;
	gap: 60px 0;
	justify-content: space-around;
	margin-top: 60px;
}
@media screen and (max-width:768px){
	.service_items{
		flex-direction: column;
		gap: 40px;
		margin-top: 40px;
	}
}
.service_item{
	width: 380px;
}
@media screen and (max-width:768px){
	.service_item{
		width: 100%;
	}
}
.service_item_img{
	text-align: center;
}
.service_item_img img{
	height: 220px;
}
.service_item_title{
	font-size: 18px;
	text-align: center;
}
@media screen and (max-width:768px){
	.service_item_title{
		font-size: 16px;
	}
}
.service_item_text{
	margin-top: 10px;
}
/****************************************
safety
*****************************************/
.safety_items{
	display: flex;
	gap: 40px;
	margin-top: 60px;
}
@media screen and (max-width:768px){
	.safety_items{
		flex-direction: column;
		margin-top: 40px;
	}
}
.safety_item{
	background: #fff;
	border-radius: 20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
	overflow: hidden;
	width: 100%;
}
.safety_item_img{
	display: block;
}
.safety_item_body{
	padding: 50px 40px 30px;
	position: relative;
}
@media screen and (max-width:768px){
	.safety_item_body{
		padding: 20px;
	}
	.safety_item:first-child .safety_item_body{
		padding: 40px 20px 20px;
	}
}
.safety_item_tab{
	background: var(--key-red);
	border-radius: 10px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	left: 50%;
	padding: 5px 10px;
	position: absolute;
	top: 0;
	transform: translate(-50%,-50%);
}
@media screen and (max-width:768px){
	.safety_item_tab{
		font-size: 16px;
		text-align: center;
		width: 80%;
	}
}
.safety_item_title{
	color: var(--key-red);
	font-size: 24px;
}
@media screen and (max-width:768px){
	.safety_item_title{
		font-size: 20px;
	}
}
.safety_item_subtitle{
	font-size: 18px;
	font-weight: 700;
	margin-top: 10px;
}
@media screen and (max-width:768px){
	.safety_item_subtitle{
		font-size: 16px;
	}
}
.safety_item_list{
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 40px;
}
@media screen and (max-width:768px){
	.safety_item_list{
		margin-top: 20px;
	}
}
.safety_item_list li{
	padding-left: 30px;
	position: relative;
}
.safety_item_list li::before{
	background: var(--key-red);
	border-radius: 50%;
	content: '';
	display: block;
	height: 12px;
	left: 0;
	position: absolute;
	top: 5px;
	width: 12px;
}
.safety_sec_bg1{
	height: 412px;
	left: 0;
	position: absolute;
	top: 0;
}
@media screen and (max-width:768px){
	.safety_sec_bg1{
		height: 206px;
	}
}
.safety_sec_bg2{
	bottom: 0;
	height: 463px;
	position: absolute;
	right: 0;
}
@media screen and (max-width:768px){
	.safety_sec_bg2{
		height: 232px;
	}
}
/****************************************
sec_img
*****************************************/
.sec_img{
	padding: 60px 0;
}
@media screen and (max-width:768px){
	.sec_img{
		padding: 40px 0;
	}
}
/****************************************
company
*****************************************/
.company_box{
	background: linear-gradient(45deg,  #d3ba37 0%,#ede5a4 50%,#d0b634 100%);
	border-radius: 40px;
	padding: 60px;
	position: relative;
}
@media screen and (max-width:768px){
	.company_box{
		padding: 20px;
	}
}
.company_cnt{
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}
@media screen and (max-width:768px){
	.company_cnt{
		flex-direction: column;
	}
}
.company_cnt_table{
	width: 480px;
}
@media screen and (max-width:768px){
	.company_cnt_table{
		width: 100%;
	}
}
.company_cnt_table tr{
	border-bottom: 1px solid #fff;
}
.company_cnt_table tr:last-child{
	border: none;
}
.company_cnt_table th,
.company_cnt_table td{
	padding: 20px 0;
}
.company_cnt_table tr:first-child th,
.company_cnt_table tr:first-child td{
	padding-top: 0;
}
.company_cnt_table th{
	color: var(--key-red);
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	width: 30%;
}
@media screen and (max-width:768px){
	.company_cnt_table th{
		font-size: 16px;
		width: 25%;
	}
}
.company_cnt_img{
	width: 267px;
}
@media screen and (max-width:768px){
	.company_cnt_img{
		text-align: center;
		width: 100%;
	}
}
.company_cnt_img img{
	width: 100%;
}
@media screen and (max-width:768px){
	.company_cnt_img img{
		width: 60%;
	}
}
.company_box_bg_triangle{
	height: 490px;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.company_sec_bg1{
	display: block;
	height: 552px;
	left: 0;
	position: absolute;
	top: 0;
}
@media screen and (max-width:768px){
	.company_sec_bg1{
		height: 276px;
	}
}
.company_sec_bg2{
	display: block;
	bottom: 0;
	height: 552px;
	position: absolute;
	right: 0;
}
@media screen and (max-width:768px){
	.company_sec_bg2{
		height: 276px;
	}
}
/****************************************
cta
*****************************************/
.cta{
	background: url(../img/cta_bg.webp) center center / cover;
	color: #fff;
	padding: 60px 0;
}
.cta_title{
	font-size: 42px;
}
@media screen and (max-width:768px){
	.cta_title{
		font-size: 28px;
	}
}
.cta_text{
	font-size: 18px;
	font-weight: 700;
	margin-top: 40px;
}
@media screen and (max-width:768px){
	.cta_text{
		font-size: 14px;
		margin-top: 20px;
	}
}
.cta_icon_list{
	display: flex;
	gap: 15px;
	justify-content: center;
	margin-top: 40px;
}
.cta_icon_list img{
	display: block;
	height: 100px;
}
@media screen and (max-width:768px){
	.cta_icon_list img{
		height: 50px;
	}
}