@charset "utf-8";

/* #main_area
---------------------------------------------------------------*/
#main_area{padding-top: 40px;}
#main_area > div{position: relative;}
.main_copy{
	writing-mode: vertical-rl;
	height: calc(100% + 2px);
	background: #fff;
	position: absolute;
	left: 10%;
	z-index: 1;
	margin-top: -1px;
}
.main_copy::before{
	content: "";
	width: clamp(120px,10vw,180px);
	height: clamp(267px,21vw,400px);
	background: url("../images/main_otsu.webp") center / contain no-repeat;
	position: absolute;
	bottom: 10%;
	left: 10%;	
}
.main_copy p{
	letter-spacing: 0.15em;
	line-height: 2;
	padding: 11% clamp(90px,7vw,135px) 0;
	position: relative;
	z-index: 2;
}
.main_copy p,.main_copy span{
	font-family: "KiwiMaru-Medium", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;;
	font-size: clamp(28px,2vw,34px);
}
.main_copy span{
	color: #e4483c;
	display: inline-block;
	text-indent: -0.5em;
}
.main_slider{overflow: hidden;}
.main_slider li{
	width: 434px;
	margin-right: 25px;}
.main_slider li img{width: 100%;}

/* サービス
---------------------------------------------------------------*/
.service-li li{width: 31%;}
.service-li li span{
	display: inline-block;
	margin-bottom: 30px;
	border-radius: 10px;
	overflow: hidden;
}
.service-li img{transition: 0.3s;}
.service-li li:not(:last-child) div::after,.service-li li:last-child div::after{
	content: "";
	width: 100%;
	height: 2px;
	display: block;
	margin: 15px 0 25px;
}
.service-li li:not(:last-child) div::after{background: linear-gradient(to right,#e4483c 45px,#e6e6e6 45px);}
.service-li li:last-child div::after{background: linear-gradient(to right,#33a981 45px,#e6e6e6 45px);}
.service-li li div h3{
	font-size: 20px;
	letter-spacing: 0.15em;
	display: flex;
	justify-content: space-between;
}
.service-li li:not(:last-child) div h3::after,.service-li li:last-child div h3::after{
	content: "";
	width: 38px;
	height: 38px;
	border-radius: 50%;
}
.service-li li:not(:last-child) div h3::after{background: url("../images/arrow_w.svg") center / 6px 9px no-repeat,#e4483c;}
.service-li li:last-child div h3::after{background: url("../images/arrow_w.svg") center / 6px 9px no-repeat,#33a981;}
.service-li li p{
	line-height: 1.7;
	letter-spacing: 0.13em;
}
.service-li img,.service-li li div h3{transition: 0.3s;}
.service-li li:hover a span img{transform: scale(1.08);}
.service-li li:not(:last-child):hover div h3{color: #e4483c;}
.service-li li:last-child:hover div h3{color: #33a981;}

/* 理念
---------------------------------------------------------------*/
.philosophy-box{padding: 150px 0;}
.philosophy-box > div{background: url("../images/bg_line.webp") center / contain no-repeat;}
.philosophy-box .title{
	width: 8%;
	margin-right: 80px;
}
.philosophy-box .title p {margin-bottom: 20px;}
.philosophy-box .title h2{writing-mode: vertical-rl;}
.philosophy-box > div > picture{
	max-width: 935px;
	width: 65%;
}
.philosophy-li{
	max-width: 1000px;
	width: 70%;
	margin: 0 auto;
}
.philosophy-li li{
	width: 100%;
	background: #fff;
	padding: 20px 40px 20px 50px;
	border-radius: 10px;
	letter-spacing: 0.13em;
	line-height: 1.7;
}
.philosophy-li li:not(:last-child){margin-bottom: 10px;}
.philosophy-li li::before{
	background: #e4483c;
	left: 25px;
	top: 32px;
}

/* 1025px以下から
------------------------------------------*/
@media only screen and (max-width:1025px){

	/* #main_area
	---------------------------------------------------------------*/
	#main_area{padding-top: 30px;}
	.main_copy{left: 8%;}
	.main_copy::before{
		width: 90px;
		height: 200px;
		bottom: 4%;
		left: 8%;
	}
	.main_copy p{padding: 11% 60px 0;}
	.main_copy p,.main_copy span{font-size: 22px;}
	.main_slider li{margin-right: 15px;}
	
	/* サービス
	---------------------------------------------------------------*/
	.service-li img{
		margin-bottom: 25px;
		border-radius: 5px;
	}
	.service-li li:not(:last-child) div::after,.service-li li:last-child div::after{margin: 15px 0 25px;}
	.service-li li:not(:last-child) div::after{background: linear-gradient(to right,#e4483c 35px,#e6e6e6 35px);}
	.service-li li:last-child div::after{background: linear-gradient(to right,#33a981 35px,#e6e6e6 35px);}
	.service-li li div h3{font-size: 16px;}
	.service-li li:not(:last-child) div h3::after,.service-li li:last-child div h3::after{
		width: 26px;
		height: 26px;
	}
	.service-li li div h3::after{background-size: 5px 8px,cover!important;}
	.service-li li:hover a img{border-radius: 30px;}
	
	/* 理念
	---------------------------------------------------------------*/
	.philosophy-box{padding: 80px 0;}
	.philosophy-box .title{margin-right: 50px;}
	.philosophy-box .title p {margin-bottom: 10px;}
	.philosophy-li li{
		padding: 15px 30px 15px 40px;
		border-radius: 5px;
	}
	.philosophy-li li:not(:last-child){margin-bottom: 10px;}
	.philosophy-li li::before{
		left: 20px;
		top: 25px;
	}
}

/* 750px以下から
------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* #main_area
	---------------------------------------------------------------*/
	.main_copy p{padding: 11% 35px 0;}
	.main_copy p,.main_copy span{font-size: 22px;}
	
	/* サービス
	---------------------------------------------------------------*/
	.service-li li{width: 48%;}
	.service-li li:not(:last-child){margin-bottom: 40px;}
	
	/* 理念
	---------------------------------------------------------------*/
	.philosophy-box .title{margin-right: 30px;}
	.philosophy-box > div > picture {width: 73%;}
	.philosophy-li{width: 90%;}
}
	
/* 500px以下から
------------------------------------------*/
@media only screen and (max-width:500px){
	body {min-width: inherit!important;width: 100%;}

	/* #main_area
	---------------------------------------------------------------*/
	.main_copy{
		writing-mode: horizontal-tb;
		width: fit-content;
		height: auto;
		left: 0;
		position: relative;
		margin: 0 0 30px 5%;
	}
	.main_copy::before{
		width: 68px;
		height: 150px;
		bottom: auto;
		top: 10px;
		left: 83%;
	}
	.main_copy p{
		line-height: 1.7;
		padding: 0;
	}
	
	/* サービス
	---------------------------------------------------------------*/
	.service-li li{width: 100%;}
	.service-li li p{letter-spacing: 0.05em;}

	/* 理念
	---------------------------------------------------------------*/
	.philosophy-box .title{margin: 0 0 40px 20px;}
	.philosophy-box .title h2{writing-mode: horizontal-tb;}
	.philosophy-box > div > *{width: 92%!important;}
	.philosophy-box .title{margin-right: 0;}
	.philosophy-li li{
		padding: 10px 10px 10px 30px;
		font-size: 14px;
		letter-spacing: 0.05em;
	}
	.philosophy-li li::before{
		left: 12px;
		top: 18px;
	}
}