@charset "utf-8";
/* CSS Document */
html {scroll-behavior: smooth;}
.contents{ overflow-x: hidden!important; padding-top: 90px!important;}
@media (max-width: 600px) {
    .contents{padding-top: 80px!important;}
}


a.anchor_h {
    padding-top: 90px !important;
    margin-top: -94px !important;
    display: block;
}
@media (max-width: 650px) {
    a.anchor_h {
		padding-top: 100px !important;
		margin-top: -104px !important;
		display: block;
	}
}

footer.box-footer div.wrapper {width: 90%!important;}
.footer-partner-item .text {width: 100%!important;}


section{padding: 70px 0;}
section h2{font-weight: bold; font-size: 25px; line-height: 1.3em; margin-bottom: 30px;}
section h3{font-weight: bold; font-size: 20px;}
section h4{font-weight: bold; font-size: 14px;}

@media (max-width: 600px) {
    section h2{font-weight: bold; font-size: 20px; line-height: 1.3em; margin-bottom: 30px;}
    section h3{font-weight: bold; font-size: 16px;}
    section h4{font-weight: bold; font-size: 12px;}
    
}


/* 背景色 */
.gray-light {
	padding: 50px 0;
	background: #F4F5F7;
} 
.gray-heavy {
	padding: 50px 0;
	background: #dde8f1;
}

.bg_gray{background: #f5f4f4;}

.flex_bk_color{width: calc(100% - 40px); background: #0967b2; color: #FFF; padding: 20px; border-radius: 16px;}

.flex_bk_color h3{margin: 20px auto 30px;}


/* eye_catching 背景　自動車業界 */
.eye_catching_automotive{background-image: linear-gradient(320deg, rgba(33, 117, 241, 1) 0%, rgba(0, 30, 128, 1)); color: #FFF; padding: 70px 0 50px;}
@media (max-width: 600px) {
    .eye_catching_automotive{padding: 30px 0 0px;}
}

/* eye_catching */
.eye_catching{text-align: center; padding: 0px 0px 20px;}
.eye_catching div{text-align: center; padding: 0px 0px; display: flex; flex-wrap: wrap; margin: auto;}
.eye_catching div h1{width: 100%; font-size: 1.8em; font-weight: bold; line-height: 140%; margin-bottom: 30px;}
.eye_catching div h1 b{display: block; margin: 20px auto 20px; font-size: 1.6em; }

.eye_catching div div.txt{width: calc(50% - 0px); margin-right: 0px;}
.eye_catching div div.txt p{width: calc(100% - 0px); text-align: left; line-height: 120%;}

.eye_catching div img{width: calc(30% - 0px); height: auto; object-fit: cover; object-position: center; margin: auto;}
.eye_catching div img{border-radius: 6px; /*box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 2px 0px;*/}

.eye_catching div div.txt p.btn{margin: 20px auto auto; text-align: center;}
.eye_catching div div.txt p.btn a{background: #ff9900; padding: 16px 30px; font-size: 16px; font-weight: normal;}
.eye_catching div div.txt p.btn a:hover{background: #ff6600;}

@media (max-width: 600px) {
    .eye_catching{text-align: center; padding: 20px 0px 20px;}
    .eye_catching div img{width: calc(60% - 0px); height: auto; margin: 10px auto 10px;}
    .eye_catching div div.txt{width: calc(100% - 0px); margin-left: 0px;}
    .eye_catching div div.txt p{width: calc(100% - 0px); text-align: center; line-height: 120%;}
    
    .eye_catching div div.txt p.btn{margin: 10px auto 20px; text-align: center;}
}


/* コンタクト */
.product_contact{
	padding: 75px 0 60px 0;
	background: #0747A6;
    text-align: center;
}
.product_contact h2{
	margin-bottom: 30px;
	text-align: center;
	color: #fff;
	font-size: 25px;
	font-weight: bold;
}
.product_contact p{text-align: center; color: #FFF;}

.product_contact ul{
	display: flex; display: -webkit-flex; /* Safari */
	justify-content: center; -webkit-justify-content: center; /* Safari */
}
.product_contact ul li:not(:last-child){margin-right: 20px;}
.product_contact ul li a{
	display: block;
	padding: 13px 70px;
	background: #FF991F;
	border-radius: 5px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}
.product_contact ul li a:hover{background: #ff6600;}

@media (max-width: 600px) {
	.product_contact{ padding: 50px 0 20px 0; }
	.product_contact h2{
		margin-bottom: 21px;
		color: #fff;
		font-size: 21px;
		line-height: 1.3em;
	}
    .product_contact ul{ justify-content: center; -webkit-justify-content: center; flex-wrap: wrap; -webkit-flex-wrap: wrap;}
	.product_contact ul li{ width: calc(60% - 0%);}
	.product_contact ul li:not(:last-child){ margin-right: 0px; margin-bottom: 8px;}
	.product_contact ul li a{
		display: block;
		padding: 10px 0px;
		font-size: 15px;
		text-align: center;
		font-weight: bold;
		
	}
}

.product_contact li{width: calc(30% - 40px); /*background: #FFF; border-radius: 6px;  */ padding: 40px 20px 10px; text-align: center;}
.product_contact li h3{font-weight: bold; font-size: 1.3em; margin-bottom: 10px;}
.product_contact li p{margin-bottom: 20px; text-align: center;}
.product_contact li a{margin-bottom: 10px; border-radius: 30px!important; padding: 13px 20px!important; font-size: 1.2em!important;}

@media (max-width: 600px) {
	.product_contact li{margin-bottom: 20px!important;}
}




/* 概要  overview */
section.overview{padding: 70px 20px; text-align: center; background: linear-gradient(to bottom, #FFF 0%, #FFF 90%, #EBEBEB);}
section.overview h2{color: #222; /*font-size: 25px;*/ text-align: center; line-height: 1.3em; font-family: 'Noto Sans JP', sans-serif; font-weight: 500;}
section.overview h2 b{font-size: 38px; color: #f94a6b; margin-left: 6px; font-weight: bold;}
section.overview p{text-align: center;}
section.overview img{width: 80%; height: auto; margin-bottom: 30px;}


@media (max-width: 600px) {
    section.overview{padding: 50px 20px;}
    section.overview h2 b{font-size: 30px; color: #f94a6b; margin-left: 6px;}
}


/* 自動車業界のお取引先 logo_area */
section.logo_area{padding: 70px 0; text-align: center;}
section.logo_area ul{width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
section.logo_area ul li{width: fit-content/*calc(100% / 4)*/; text-align: center;}
section.logo_area ul li img.logo_Mazda{width: auto; height: 40px; margin: auto 30px auto 0; object-fit: contain;}
section.logo_area ul li img.logo_NISSAN{width: auto; height: 50px; margin: auto 30px; object-fit: contain;}
section.logo_area ul li img.logo_DENSO{width: auto; height: 30px; margin: auto 30px; object-fit: contain;}
section.logo_area ul li img.logo_TokaiRika{width: auto; height: 40px; margin: auto 0px auto 30px; object-fit: contain;}
@media (max-width: 1100px) {
    section.logo_area ul li{width: calc(100% / 3); text-align: center; margin-bottom: 50px;}
    section.logo_area ul li:last-child{width: calc(100% / 1); text-align: center; margin-bottom: 50px;}
}
@media (max-width: 600px) {
    section.logo_area{padding: 50px 0 20px;}
    section.logo_area ul li{width: calc(100% / 2); text-align: center; margin-bottom: 50px;}
    
    section.logo_area ul li img.logo_Mazda{width: auto; height: 40px; margin: auto 30px; object-fit: contain;}
    section.logo_area ul li img.logo_NISSAN{width: auto; height: 50px; margin: auto 30px; object-fit: contain;}
    section.logo_area ul li img.logo_DENSO{width: auto; height: 30px; margin: auto 30px; object-fit: contain;}
    section.logo_area ul li img.logo_TokaiRika{width: auto; height: 40px; margin: auto 30px; object-fit: contain;}
    
}

@media (max-width: 431px) {
    section.logo_area ul li{width: calc(100% / 1); text-align: center; margin-bottom: 50px;}
    section.logo_area ul li img.logo_Mazda{width: auto; height: 40px; margin: 20px auto auto auto; object-fit: contain;}
    section.logo_area ul li img.logo_TokaiRika{width: 90%; height: auto; margin: 20px auto auto auto; object-fit: contain;}

}


/* リックソフトが選ばれる理由 reasons_why */
.bk_light_blue{background: #c2e3ff;}
section.reasons_why{padding: 70px 0; text-align: center;}
section.reasons_why h2 + p{font-size: 1.4em; margin-bottom: 40px;}
@media (max-width: 600px) {
    section.reasons_why h2 + p{font-size: 1.2em; margin-bottom: 30px;}
}

section.reasons_why .flex50{background: #FFF; border-radius: 6px; width: calc(100% - 40px); padding: 20px; text-align: center; margin: auto 20px;}
section.reasons_why .flex50 h3{margin-bottom: 20px;}
section.reasons_why .flex50 img{width: 60%; height: auto; margin: auto auto 20px;}
section.reasons_why .flex50 p{width: 100%; text-align: left; height: 8em; margin-bottom: 1.5em;}
@media (max-width: 600px) {
    section.reasons_why{padding: 50px 20px; text-align: center;}
    section.reasons_why .flex{width: 80%; margin: auto;}
    section.reasons_why .flex50{margin: auto auto 30px;}
    section.reasons_why .flex50 p{width: 100%; text-align: left; height: auto; margin-bottom: .5em;}
}


/* お客様事例 case_studies */
section.case_studies{padding: 70px 0; text-align: center;}

section.case_studies dl{display: flex; width: calc(100% - 82px); padding: 40px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 5px 1px;}
section.case_studies dl dt{width: 30%;}
section.case_studies dl dt img.case_studies_logo{width: 100%; height: auto; margin: auto auto 40px;}
section.case_studies dl dt img.case_studies_img{width: 100%; height: auto; margin: auto auto auto;}
section.case_studies dl dt a:hover{opacity: 0.5;}

section.case_studies dl dd{width: calc(70% - 40px); padding-left: 40px; text-align: left;}
section.case_studies dl dd h3{margin-bottom: 20px;}
section.case_studies dl dd h3 + p{font-size: 1.16em; margin-bottom: 10px; font-weight: bold;}
section.case_studies dl dd p.btn{margin-top: 20px;}

@media (max-width: 600px) {
    section.case_studies{padding: 50px 20px; text-align: center;}
    section.case_studies dl{width: 60%; margin: auto; display: flex; flex-wrap: wrap; border: 1px solid rgba(0, 0, 0, 0.3);}
    section.case_studies dl dt{width: calc(100% - 40px); margin: auto 20px 30px;}
    section.case_studies dl dd{width: 100%; padding-left: 0px; }
    
}



/* リックソフトが提供するソリューション case_studies */
section.solution{padding: 70px 0; text-align: center;}

section.solution dl{width: 100%; margin: 50px auto}
section.solution dl dt{text-align: left; font-weight: bold; font-size: 1.4em; margin-bottom: 20px; padding-bottom: 6px; border-bottom: 2px dotted #aaa;}
section.solution dl dd{text-align: left; }


section.solution ul.relation_link{width: 100%; display: flex; justify-content: center; margin: 50px auto;}
section.solution ul.relation_link li{width: calc(40% - 40px); margin: auto 20px 20px;}
section.solution ul.relation_link li a{display: block; overflow: hidden; border-radius: 6px; background: #FFF; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px 0px;}
section.solution ul.relation_link li a img{display: block; overflow: hidden; width: 100%; height: 160px; object-fit: cover; }
section.solution ul.relation_link li a p{width: calc(100% - 40px); padding: 20px; text-align: left; height: 5em; margin-bottom: 1.5em;}
section.solution ul.relation_link li a:hover{opacity: 0.5;}

section.solution .youtube{margin: 50px auto; text-align: center;  width: 70%; aspect-ratio: 16 / 9;  /* 16:9のアスペクト比を維持 */}
section.solution .youtube iframe{border: 0;  width: 100%;  height: 100%;}

@media (max-width: 600px) {
    section.solution{padding: 50px 20px 0; text-align: center;}
    section.solution ul.relation_link{width: 100%; display: flex; justify-content: center; margin: 50px auto; flex-wrap: wrap;}
    section.solution ul.relation_link li{width: calc(80% - 40px); margin: auto auto 20px;}
    section.solution ul.relation_link li a p{height: auto;margin-bottom: 0;}
    
    section.solution .youtube{margin: 50px auto; text-align: center;  width: 100%;}

}

/* アニメーション(jsとセットです) */
/* 参考URL　https://gokansoichiro.com/blog/scroll-animation/ */
.sa {
opacity: 0;
transition: all 1.5s ease;
}
.sa.show {
opacity: 1;
transform: none;
}
.sa--lr {
transform: translate(-100px, 0);
}
.sa--rl {
transform: translate(100px, 0);
}
.sa--up {
transform: translate(0, 100px);
}
.sa--down {
transform: translate(0, -100px);
}
.sa--scaleUp {
transform: scale(.5);
}
.sa--scaleDown {
transform: scale(1.5);
}
.sa--rotateL {
transform: rotate(180deg);
}
.sa--rotateR {
transform: rotate(-180deg);
}