@charset "utf-8";

/*-----------------------
    page_top.css
------------------------*/

/*----- fv -----*/

.top_fv {
	position: relative;
}
.top_fv .deco {
	position: absolute;
	z-index: 9;
	top: 0;
	left: 0;
}
.top_fv .deco img,
.top_fv_ul .li img{
	height: 960px;
}
.top_fv_ttl {
	position: absolute;
	z-index: 9;
	bottom: 100px;
	right: 80px;
}
.top_fv_ttl .ttl {
	display: flex;
	align-items: flex-end;
	font-style: italic;
	color: var(--white);
	margin-bottom: 15px;
}
.top_fv_ttl .ttl h2 {
	font-size: 84px;
	font-weight: 900;
}
.top_fv_ttl .ttl p {
	margin: 0 5px 10px;
	font-size: 48px;
	font-weight: 900;
}
.top_fv_ttl .sub {
	display: flex;
	justify-content: center;
	padding: 10px 30px;
	background: var(--green_light);
	color: var(--white);
	font-size: 50px;
	transform:skewX(-10deg);
}
.top_fv_ttl .sub h3 {
	font-weight: 900;
}
.top_fv_ttl .sub h3:nth-of-type(1) {
	color: #daffb8;
}
.top_fv_ttl .sub h3:nth-of-type(3) {
	color: #f7ff7f;
}

.slideinRight {
	animation: slideinRight 3s;
}

@keyframes slideinRight {
	0% {
		transform: translateX(100px);
		opacity: 0;
	}
 	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
@media screen and (min-width: 1261px) and (max-width: 1540px){
    
	.top_fv .deco img,
	.top_fv_ul .li img{
		height: 840px;
	}
	.top_fv_ttl {
		bottom: 80px;
		right: 30px;
	}
	.top_fv_ttl .ttl {
		margin-bottom: 12px;
	}
	.top_fv_ttl .ttl h2 {
		font-size: 70px;
	}
	.top_fv_ttl .ttl p {
		margin: 0 4px 8px;
		font-size: 40px;
	}
	.top_fv_ttl .sub {
		font-size: 40px;
	}
	
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
	.top_fv .deco img,
	.top_fv_ul .li img{
		height: 60vw;
	}
	.top_fv_ttl {
		bottom: 4vw;
		right: 30px;
	}
	.top_fv_ttl .ttl {
		margin-bottom: 1.5vw;
	}
	.top_fv_ttl .ttl h2 {
		font-size: 5vw;
	}
	.top_fv_ttl .ttl p {
		margin: 0 .5vw 1vw;
		font-size: 3vw;
	}
	.top_fv_ttl .sub {
		padding: 1vw;
		font-size: 3vw;
	}
	
}
@media screen and (max-width: 767px){
    
	.top_fv .deco img,
	.top_fv_ul .li img{
		height: 70vw;
	}
	.top_fv_ttl {
		bottom: 15px;
		right: 1vw;
	}
	.top_fv_ttl .ttl {
		display: flex;
		margin-bottom: 10px;
	}
	.top_fv_ttl .ttl h2 {
		font-size: min(5.75vw,28px);
	}
	.top_fv_ttl .ttl p {
		margin: 0 1px 2px;
		font-size: min(4vw,18px);
	}
	.top_fv_ttl .sub {
		display: flex;
		padding: 10px;
		font-size: min(4vw,20px);
	}
	
}

/*----- about -----*/

.top_about {
	padding: 120px 0 0;
}
.top_about_text {
	margin: 80px 0;
}
.top_about_text .ttl {
	margin-bottom: 40px;
	font-size: 43px;
	font-weight: 900;
	font-style: italic;
	line-height: 1.6;
	text-align: center;
}
.top_about_ul {
	position: relative;
	margin-top: -200px;
	bottom: -200px;
}
.top_about_ul .li {
	margin: 0 10px;
}
.top_about_ul .li:nth-of-type(2n) {
	margin-top: 40px;
}
.top_about_ul .li img {
	aspect-ratio: 46/37;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
	.top_about {
		padding: 8vw 0 0;
	}
	.top_about_text {
		margin: 6vw 0;
	}
	.top_about_text .ttl {
		margin-bottom: 3vw;
		font-size: 3.3vw;
	}
	.top_about_ul {
		margin-top: -15vw;
		bottom: -15vw;
	}
	.top_about_ul .li {
		margin: 0 1vw;
	}
	.top_about_ul .li:nth-of-type(2n) {
		margin-top: 3vw;
	}
	
}
@media screen and (max-width: 767px){
   
	.top_about {
		padding: 50px 0 0;
	}
	.top_about_text {
		margin: 30px 0;
	}
	.top_about_text .ttl {
		margin-bottom: 20px;
		font-size: min(7vw,27px);
		text-align: left;
		line-height: 1.4;		
	}
	.top_about_text .ttl br {
		display: none;
	}
	.top_about_ul {
		margin-top: -100px;
		bottom: -100px;
	}
	.top_about_ul .li {
		margin: 0 5px;
	}
	.top_about_ul .li:nth-of-type(2n) {
		margin-top: 20px;
	}
	
}


/*----- strengths -----*/

.top_stg {
	padding: 350px 0 40px;
}
.top_stg_dl > div {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
.top_stg_dl > div:nth-of-type(1) {
	background: url("/system_panel/uploads/images/top_stg_01_pc.jpg") no-repeat;
}
.top_stg_dl > div:nth-of-type(2) {
	background: url("/system_panel/uploads/images/top_stg_02_pc.jpg") no-repeat;
}
.top_stg_dl > div:nth-of-type(3) {
	background: url("/system_panel/uploads/images/top_stg_03_pc.jpg") no-repeat;
}
.top_stg_dl > div:nth-of-type(1),
.top_stg_dl > div:nth-of-type(2),
.top_stg_dl > div:nth-of-type(3) {
	height: 120px;
	background-size: 100% auto;
}

.top_stg_dl .dt,
.top_stg_dl .dd {
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.top_stg_dl .dt {
	width: 33.33%;
	padding-left: 50px;
	color: var(--white);
	font-size: 27px;
	font-weight: 900;
}
.top_stg_dl .dd {
	width: 62%;
	padding-right: 30px;
	font-size: 17px;
	line-height: 2.35;
}

@media screen and (min-width: 1261px) and (max-width: 1540px){
    
	.top_stg_dl > div:nth-of-type(1),
	.top_stg_dl > div:nth-of-type(2),
	.top_stg_dl > div:nth-of-type(3) {
		height: 8vw;
	}
	.top_stg_dl .dt {
		padding-left: 3vw;
		font-size: 1.75vw;
	}
	.top_stg_dl .dd {
		padding-right: 2vw;
		font-size: 1.05vw;
		line-height: 2.2;
	}
	
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
	.top_stg {
		padding: 30vw 0 3vw;
	}
	.top_stg_dl > div {
		margin-bottom: 3vw;
	}
	.top_stg_dl > div:nth-of-type(1),
	.top_stg_dl > div:nth-of-type(2),
	.top_stg_dl > div:nth-of-type(3) {
		height: 8vw;
	}
	.top_stg_dl .dt {
		padding-left: 2vw;
		font-size: 1.75vw;
	}
	.top_stg_dl .dd {
		padding-right: 1.5vw;
		font-size: 1vw;
		line-height: 2;
	}
	
}
@media screen and (max-width: 767px){
    
	.top_stg {
		padding: 160px 0 0;
	}
	.top_stg_dl > div {
		display: block;
		height: auto;
		margin-bottom: 30px;
	}
	.top_stg_dl > div:nth-of-type(1),
	.top_stg_dl > div:nth-of-type(2),
	.top_stg_dl > div:nth-of-type(3) {
		background: none;
		height: auto;
	}	
	.top_stg_dl .dt {
		width: 100%;
		padding-left: 18vw;
		font-size: min(4.25vw,22px);
	}
	.top_stg_dl > div:nth-of-type(1) .dt {
		background: url("/system_panel/uploads/images/top_stg_01_sp.jpg") no-repeat var(--green_light);
	}
	.top_stg_dl > div:nth-of-type(2) .dt {
		background: url("/system_panel/uploads/images/top_stg_02_sp.jpg") no-repeat var(--green_light);
	}
	.top_stg_dl > div:nth-of-type(3) .dt {
		background: url("/system_panel/uploads/images/top_stg_03_sp.jpg") no-repeat var(--green_light);
	}
	.top_stg_dl > div:nth-of-type(1) .dt,
	.top_stg_dl > div:nth-of-type(2) .dt,
	.top_stg_dl > div:nth-of-type(3) .dt {
		background-size: auto 100%;
		height: 13vw;
	}
	.top_stg_dl .dd {
		width: 100%;
		border: 2px solid var(--green_light);
		border-top: none;
		padding: 15px 5vw;
		font-size: 15px;
		line-height: 2;
	}
	
}


/*----- service -----*/

.top_svc {
	padding: 100px 0 90px;
}
.top_svc_btns {
	background: var(--text);
}
.top_svc_btns .wrap_wide {
	display: flex;
	box-sizing: border-box;
}
.top_svc_btn {
	width: 33.33%;
	border-right: 1px solid var(--white);
}
.top_svc_btn:first-child {
	border-left: 1px solid var(--white);
}
.top_svc_btn a {
	position: relative;
	display: block;
	height: 492px;
}
.top_svc_btn a .ttl {
	position: absolute;
	z-index: 9;
	width: 100%;
	top: calc(50% - 26px);
	left: 0;
	color: var(--white);
	font-size: 53px;
	font-weight: 900;
	font-style: italic;
	text-align: center;
}

@media screen and (min-width: 1261px) and (max-width: 1540px){
    
	.top_svc_btns,
	.top_svc_btn a {
		height: auto;
	}
	.top_svc_btn a img {
		height: 32vw;
	}
	
}
@media screen and (min-width: 768px) and (max-width: 1260px){
    
	.top_svc {
		padding: 7.5vw 0;
	}
	.top_svc_btns,
	.top_svc_btn a {
		height: auto;
	}
	.top_svc_btn a img {
		height: 30vw;
	}
	.top_svc_btn a .ttl {
		top: calc(50% - 2vw);
		font-size: 4vw;
	}
	
}
@media screen and (max-width: 767px){
    
	.top_svc {
		padding: 30px 0 0;
	}
	.top_svc_btns .wrap_wide {
		display: block;
	}
	.top_svc_btn {
		width: min(400px,100%);
		border-right: none;
	}
	.top_svc_btn:first-child {
		border-left: none;
	}
	.top_svc_btns {
		height: auto;
	}
	.top_svc_btn a {
		height: auto;
	}
	.top_svc_btn a img {
		height: 60vw;
	}
	.top_svc_btn a .ttl {
		top: calc(50% - 15px);
		font-size: 36px;
	}
	
}


/*----- company -----*/

.top_comp {
	padding: 100px 0 150px;
}

.top_comp_dl {
	margin: 15px 0 50px;
	border-top: 1px solid #bcbcbc;
	border-left: 1px solid #bcbcbc;
}
.top_comp_dl > div {
	display: flex;
	box-sizing: border-box;
}
.top_comp_dl .dt,
.top_comp_dl .dd {
	padding: 20px 60px;
	border-bottom: 1px solid #bcbcbc;
	border-right: 1px solid #bcbcbc;
	font-size: 17px;
	line-height: 2;
}
.top_comp_dl .dt {
	width: 20%;
	background: var(--grey);
}
.top_comp_dl .dd {
	width: 80%;
}
.top_comp_dl .dd a {
	color: var(--text);
}
.top_comp_dl .dd br.sp {
	display: none;
}
.map{
    width: 100%;
    height: 20rem;
    margin: 0 auto 0rem;
}
.map iframe{
    width: 100%;
    height: inherit;
    border: none;
}
.top_comp_greet {
	background: url("/system_panel/uploads/images/bg_w_tri 2.png") no-repeat var(--grey);
	background-position: top -1px left -1px;
	background-size: auto 100%;
	display: flex;
	justify-content: space-between;
	/*padding: 45px 60px;*/
  padding: 100px 60px;
}
.top_comp_greet .pic {
	width: 33%;
}
.top_comp_greet .conts {
	order: 2;
	width: 63%;
}
.top_comp_greet .conts .ttl {
	font-size: 43px;
	font-weight: 900;
}
.top_comp_greet .conts .bar {
	width: 241px;
	margin: 0 0 15px -100px;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
	.top_comp {
		padding: 7.5vw 0 8vw;
	}

	.top_comp_dl {
		margin: 1.5vw 0 4vw;
	}
	.top_comp_dl .dt,
	.top_comp_dl .dd {
		padding: 1.75vw 4vw;
		font-size: 1.6vw;
	}
	.top_comp_dl .dt {
		width: 20%;
	}
	.top_comp_dl .dd {
		width: 80%;
	}

	.top_comp_greet {
		padding: 3vw;
	}
	.top_comp_greet .pic {
		width: 33%;
	}
	.top_comp_greet .conts {
		width: 63%;
	}
	.top_comp_greet .conts .ttl {
		font-size: 3.2vw;
	}
	.top_comp_greet .conts .bar {
		margin: 0 0 1.5vw -12vw;
	}
	
}
@media screen and (max-width: 767px){
    
	.top_comp {
		padding: 50px 0;
	}
	.top_comp_dl {
		margin: 15px 0 30px;
	}
	.top_comp_dl > div {
		display: block;
	}
	.top_comp_dl .dt,
	.top_comp_dl .dd {
		padding: 10px 4vw;
		font-size: min(4vw,16px);
	}
	.top_comp_dl .dt {
		width: 100%;
		border-bottom: none;
	}
	.top_comp_dl .dd {
		width: 100%;
	}
	.top_comp_dl .dd br.sp {
		display: inline-block;
	}

	.top_comp_greet {
		background-size: 50% auto;
		display: block;
		padding: 30px 5vw;
	}
	.top_comp_greet .pic {
		margin: 30px auto 0;
		width: min(400px,100%);
	}
	.top_comp_greet .conts {
		width: 100%;
	}
	.top_comp_greet .conts .ttl {
		font-size: 25px;
	}
	.top_comp_greet .conts .bar {
		margin: 0 0 15px -5vw;
	}
	
}


/*----- blog -----*/

.top_blog {
	padding: 120px 0 140px;
}
.top_blog_ul .li {
	margin: 0 2px;
}
.top_blog_ul .li .pic,
.top_blog_ul .li .pic img {
	display: block;
	background: #ccc;
	width: 100%;
	aspect-ratio: 120/82;
}
.top_blog_ul a:hover {
	opacity: .75;
}
.top_blog_ul a .date {
	margin: 10px 0;
	color: var(--green_light);
	font-size: 15px;
}
.top_blog_ul a .title {
	color: var(--text);
	line-height: 1.5;
}

@media screen and (min-width: 768px) and (max-width: 1260px){
    
	.top_blog {
		padding: 8vw 0 9vw;
	}
	.top_blog_ul a .date {
		margin: 1vw 0;
		font-size: 1.5vw;
	}
	
}
@media screen and (max-width: 767px){
    
	.top_blog {
		padding: 50px 0;
	}
	
}
@media screen and (min-width: 1800px){
.footer .sns {
    width: 50%;
  }
}
@media screen and (min-width: 768px){
  .spbr br{display:none;}
}