@charset "UTF-8";
/*------------------------------------------------------------サービス*/
.service{
	margin-bottom: 150px;
}
.service__item{
	padding: 50px 0;	
    position: relative;
    overflow: hidden;
}
/* グラデーション（最初は上に隠す） */
.service__item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,#003875, #0068B6);
    transform: translateY(-102%);
    transition: transform 0.5s ease;
    z-index: 1;
}
/* ホバーで落ちてくる */
.service__item:hover::before {
    transform: translateY(0);
}
.service__item:nth-of-type(2n+1){/*奇数*/
	background-color: var(--gray);
	width: 100%;
}
.service__item:nth-of-type(2n){/*偶数*/
	background-color: #fff;
	width: 100%;
}
/* 偶数だけ反転 */
.service__item:nth-of-type(2n) .service__img {
    grid-column: 2 / 3;
	grid-row: 1 / 2 ;
}
.service__item:nth-of-type(2n) .service__text {
    grid-column: 1 / 2;
	grid-row: 1 / 2 ;
}
.service__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.service__img,
.service__text {
    position: relative;
    z-index: 2;
}
.service__text {
	padding: 0 20px;
}
.service__img img{
    width: 100%;
    height: auto;
    display: block;
}
.service__title{
	font-size: min(6rem , 6vw);
	font-weight: 700;
	text-align: center;
	color: var(--main-color);
	margin-bottom: 0.1em;
}
.service__guide{
	font-size: min(2rem , 2vw);
	text-align: center;
	color: var(--main-color);
}
.service__text p{
	font-size: min(2rem , 2vw);
	text-align: center;
	margin: 1em 0;
}
.service__title,
.service__guide,
.service__text p {
    transition: color 0.6s;
}
.service__item:hover .service__title,
.service__item:hover .service__guide,
.service__item:hover p {
    color: #fff;
}
.service__btn{
	display: block;
	max-width: 230px;
	width: 100%;
	background-color: var(--main-color); 
	border-radius: 25px;	
	border: 2px solid var(--main-color); 
	padding: 1em 2em;
	position: relative;
	color: #fff;
	transition: all 0.5s;
	font-size: min(2rem , 2vw);
	line-height: 1;
	margin: 0 auto;
	transition: color 0.3s, background-color 0.3s;
}
.service__btn::after{
  content: "";
  width: 1em;
  height: 1em;
  margin-left: 1em;
  display: inline-block;
  background-image: url("../../common/img/cursor-white.svg");
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  /* transition: background 0.3s; */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

}
/* 親hoverで反転 */
.service__item:hover .service__btn {
    background-color: #fff;
    color: var(--main-color);
}
/* ボタン単体hover */
.service__item:hover .service__btn:hover {
    color: var(--orange);
	text-decoration: none;
}
/* 親hover*/
.service__item:hover .service__btn::after {
    background-image: url("../../common/img/cursor-main.svg");
}
/* ボタンhover */
.service__item:hover .service__btn:hover::after {
    background-image: url("../../common/img/cursor-orange.svg");
}
@media screen and (max-width: 767px){
	.service{
		margin-bottom: 100px;
	}
	.service__item{
		padding: 30px 0;	
	}
    .service__inner {
        grid-template-columns: 1fr;
		gap: 1em;
    }
	/* 偶数戻す */
	.service__item:nth-of-type(2n) .service__img {
		grid-column: 1 / 2;
		grid-row: 1 / 2 ;
	}
	.service__item:nth-of-type(2n) .service__text {
		grid-column: 1 / 2;
		grid-row: 2 / 3 ;
	}
	.service__title{
		font-size: 3rem;
		text-align: left;
		margin-bottom: 10px;
	}
	.service__guide,
	.service__text p{
		font-size: 1.5rem;
		text-align: left;
	}
	.service__text p{
		margin: 1.5em 0;
	}
	.service__text br{
		display: none;
	}
	.service__btn{
		max-width: 200px;
		border-radius: 20px;	
		padding: 0.8em 2em;
		font-size: 1.5rem;
		margin: 0;
	}
}