@charset "UTF-8";
/* =============================================================================

BUSINESS

============================================================================= */

h2.serviceTitle, .pick-up, .step h2, .case {text-align: center;}

.swiper.swiperRight, .swiper.swiperLeft {
	width: 100%;
	overflow-x: hidden;
}
.swiper-slide {
  width: inherit;
  height: inherit;
  object-fit: cover;
  position: relative;
  cursor: pointer;
  border: 1px solid #032f5d;
  border-radius: 10px;
  box-shadow: 0 0 5px 5px rgb(0 47 93 / 7%);
}
.swiper-slide__img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.swiperRight .swiper-wrapper,.swiperLeft .swiper-wrapper{
  transition-timing-function: linear;
}

.slide-content {
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  color: white;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%);
  width: 100%;
  transition: opacity .4s;
  display: block;
}

.swiper-slide picture {
	display: block;
	width: 100%;
	margin: 0 auto;
}
.swiper-slide img {
	width: 100%;
	border-radius: 10px;
}

.serviceBox span, .stepBox span {
	font-family: "Barlow", sans-serif;
	letter-spacing: -.05em;
}

.serviceBox {
	background: #e7f1fb;
	border-radius: 15px;
}
.serviceBox h3 {
	background: #032f5d;
	color: #FFF;
	border-radius: 5px;
}
.serviceBox img {border-radius: 10px;}
.serviceBox span {color: #FFF; line-height: 0.6;}
.serviceBox span strong {font-weight: 450;}

.pick-up h3 {margin-top: 0;}
 
.stepBox {
	position: relative;
	margin-bottom: 40px;
	padding: 8px;
	background: #FFF;
	border-radius: 10px;
	box-shadow: 0 0 5px 5px rgb(0 47 93 / 7%);
}
.stepBox::after {
	position: absolute;
	 bottom: -32px;
	 left: 0;
	 right: 0;
	 margin: auto;
	content: "";
	width: 0;
	height: 0;
	border-left: 48px solid transparent;
	border-right: 48px solid transparent;
	border-top: 32px solid #dbdbdb;
}
.stepBox:last-child::after {
	border: none;
}
.stepBox span { color: #f4f4f4; line-height: 0.6;}
.stepBox div h3 {margin-bottom: 0px;}

.sample h3 {color: #000;}

.case ul {
	display: flex;
	justify-content: space-between;
	margin-top: 32px;
}
.case li {width: 49%;}
.case span {display: block; margin-top: 16px;}
.case img {border-radius: 10px; box-shadow: 0 0 5px 5px rgb(0 47 93 / 7%);}


/*________________________________________________________

PC
________________________________________________________*/

@media only screen and (min-width: 741px) {

.swiper {margin-bottom: 16px;}
.serviceBox span, .stepBox span {font-weight: 500;}

.serviceBox {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.serviceBox picture { width: 50%;}
.serviceBox div { width: 45%;}
.serviceBox h3 {
	padding: 6px 16px 8px 16px;
	font-size: 20px;
}

.pick-up {padding: 80px 0 120px 0;}

.point {padding: 32px 0 80px 0;}

.step {padding-top: 96px;}
.step h2 {margin-bottom: 48px;}
.stepBox {
	display: flex;
	justify-content: center;
	align-items: center;
}
.stepBox picture {width: 28%;}
.stepBox span {width: 28%;}
.stepBox div {width: 44%;}

section.sample {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sample picture { width: 49%;}
.sample div { width: 48%;}
.sample h3 { margin-bottom: 24px;}

.case ul {
	width: 85%;
	margin-right: auto;
	margin-left: auto;
}
.case span {font-size: 18px;}

/* レスポンシブ
---------------------------------------- */
@media screen and (min-width:1651px) {
h2.serviceTitle {margin: 72px 0 56px 0;}
.serviceBox {margin-bottom: 80px; padding: 40px 80px;}
.serviceBox h3 {margin: 16px 0 32px 0;}
.serviceBox span {font-size: 160px;}
.serviceBox span strong {font-size: 230px;}
.stepBox span {font-size: 120px;}
section.sample {width: 65%;}
}
@media screen and (min-width:1351px) and (max-width:1650px) {
h2.serviceTitle {margin: 72px 0 56px 0;}
.serviceBox {margin-bottom: 60px; padding: 40px 60px;}
.serviceBox h3 {margin: 12px 0 18px 0;}
.serviceBox span {font-size: 130px;}
.serviceBox span strong {font-size: 190px;}

.stepBox span {font-size: 100px;}
section.sample {width: 75%;}
}
@media screen and (min-width:1181px) and (max-width:1350px) {
h2.serviceTitle {margin: 64px 0 40px 0;}
.serviceBox {margin-bottom: 50px; padding: 30px 50px;}
.serviceBox h3 {margin: 12px 0 18px 0;}
.serviceBox span {font-size: 110px;}
.serviceBox span strong {font-size: 160px;}

.stepBox span {font-size: 86px;}
section.sample {width: 75%;}
}
@media screen and (min-width:981px) and (max-width:1180px) {
h2.serviceTitle {margin: 40px 0 32px 0;}
.serviceBox {margin-bottom: 40px; padding: 24px 40px;}
.serviceBox h3 {margin: 8px 0 12px 0;}
.serviceBox p {font-size: 15px;}
.serviceBox span {font-size: 100px;}
.serviceBox span strong {font-size: 140px;}

.stepBox span {font-size: 78px;}
.stepBox p {font-size: 15px; line-height: 1.6; margin-top: 6px;}
section.sample {width: 85%;}
}
@media screen and (min-width:741px) and (max-width:980px) {
h2.serviceTitle {margin: 32px 0 24px 0;}
.serviceBox {margin-bottom: 24px; padding: 24px 32px;}
.serviceBox h3 {margin: 8px 0 0 0;}
.serviceBox p {font-size: 14px; line-height: 1.5; margin-top: 8px;}
.serviceBox span {font-size: 80px;}
.serviceBox span strong {font-size: 120px;}

.stepBox span {font-size: 63px;}
.stepBox h3 {font-size: 18px; margin-bottom: 0;}
.stepBox p {font-size: 14px; line-height: 1.5; margin-top: 4px;}
section.sample {width: 85%;}
}

}


/*________________________________________________________

SP
________________________________________________________*/


@media only screen and (max-width: 740px) {

.swiper .swiper-slide {padding: 8px 0;}
.serviceBox span, .stepBox span {font-weight: 600;}

.swiper {margin-bottom: 8px;}
.swiper .swiper-wrapper .swiper-slide {padding: 0;}
.sample {text-align: center;}

h2.serviceTitle {margin: 40px 0 24px 0;}
.serviceBox {
	margin-bottom: 16px;
	padding: 24px 20px;
}
.serviceBox span {font-size: 88px;}
.serviceBox span strong {font-size: 130px;}
.serviceBox h3 {
	margin-top: 8px;
	padding: 6px 16px 8px 16px;
	font-size: 18px;
}

.point {padding: 24px 0 8px 0;}

.pick-up {margin-top: 0; padding-top: 40px;padding-bottom: 40px;}
.pick-up h2 {margin: 0px;}
.pick-up h3 {margin-top: 0px; font-size: 16px;}

section.step {margin-top: 0;}
.step h2 {margin-bottom: 24px;}
.stepBox {padding: 24px 8px; text-align: center;}
.stepBox picture {
	display: block;
	width: 80%;
	margin: 0 auto 16px auto;
}
.stepBox span {font-size: 72px;}
.stepBox h3 {margin-top: 8px;}


}