@charset "utf-8";
.flex{display: flex;}
.title_box{ text-align: center;}
.title_box h3{font-size: 20px; font-family: 'Noto-Sans-JP-Medium'; line-height: 160%;}
.title_box h3 span{font-size: 105px; font-family: "alternate-gothic-no-3-d", sans-serif; font-weight: 400; font-style: normal;}
.title_box p{text-align: center; font-size: 16px; line-height: 225%; }
main{padding: 100px 0 0;}

.link_btn{width: 360px; height: auto;}
.link_btn a{display: block; background: #000; position: relative; color: #fff; text-align: center; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; line-height: 145%; padding: 21px 0;}
.link_btn a:before{content: ""; display: block; position: absolute; right: 21px; top: 50%; transform: translateY(-50%); width: 8px; height: 15px; background: url(../images/common/aro_icn.svg) no-repeat center center; background-size: 100%;}
/* ----------------------------- #fv ------------------------------- */
#fv{background: url(../images/service/fv_bg.jpg?var=123456) no-repeat center center; background-size: cover; padding: 426px 50px 32px; position: relative; width: 100%;}
#fv h2{font-family: 'Noto-Sans-JP-Medium'; color: #fff; letter-spacing: 0.03em; font-size: 22px; line-height: 153%;}
#fv h2 span{letter-spacing: 0; font-size: 94px; font-family: "alternate-gothic-no-3-d", sans-serif; font-weight: 400; font-style: normal; color: #fff; line-height: 116%; display: inline-block;}
#fv p{font-family: neue-haas-grotesk-display, sans-serif; font-weight: 500; font-style: normal; color: #fff; font-size: 12px;transform: rotateZ(-90deg) translateY(-50%); top: 50%; right: -50px; position: absolute;}

/* ----------------------------- #service ------------------------------- */
#service{padding: 100px 0 0;}
#service .title_box p{padding: 30px 0 0; }
#service ul{padding: 69px 0 0;}
#service ul li{position: relative; padding: 50px 0;}
#service ul li:before{content: ""; display: block; width: calc(100% - 300px); height: 410px; position: absolute; top: 0px; right: 0px; background: url(../images/service/service_bg_1.jpg?var=123456) no-repeat center center; background-size: 100%;}
#service ul li.left_box:before{right: auto; left: 0px;}
#service ul li:not(:last-child){margin: 0 0 60px;}
#service ul li .box{position: relative; z-index: 1; width: 1100px; margin: 0 auto; justify-content: space-between; align-items: center;}
#service ul li.left_box .box{flex-flow: row-reverse;}
#service ul li .box .text_box{width: 500px; height: auto;}
#service ul li .box .text_box .flex{align-items: center;}
#service ul li .box .text_box .flex p{margin: 0 30px 0 0; font-family: "alternate-gothic-no-3-d", sans-serif; font-weight: 400; font-style: normal; font-size: 70px;}
#service ul li .box .text_box .flex h4{font-size: 27px; font-family: 'Noto-Sans-JP-Bold';}
#service ul li .box .text_box p.text{line-height: 225%; font-size: 16px; padding: 14px 0 0;}

/* ----------------------------- #products ------------------------------- */
#products{padding: 120px 0 0;}
#products .products_bg{background: url(../images/service/products_bg_1.jpg?var=123456) no-repeat center center; background-size: cover; padding: 80px 0;}
#products .products_bg .top_box{border-bottom: 1px solid #000; padding: 0 50px 60px; justify-content: space-between; align-items: center;}
#products .products_bg .title_box{text-align: left; width: 471px; height: auto;}
#products .products_bg .title_box h3 span{font-size: 100px;}
#products .products_bg .title_box p{text-align: left; padding: 49px 0 0;}
#products .products_bg .img_box{flex-wrap: wrap; width: 574px; height: auto; justify-content: space-between; gap: 20px;}
#products .products_bg .img_box img{box-shadow: 0 3px 6px rgba(0,0,0,0.2); border-radius: 1000px;}
#products .products_bg .bottom_box{padding: 60px 0 0; flex-wrap: wrap; gap: 20px 17px;}

/* ----------------------------- #purchase_options ------------------------------- */
#purchase_options{padding: 150px 0 0;}
#purchase_options .title_box h3 span{font-size: 100px;}
#purchase_options .title_box p{text-align: center; padding: 29px 0 0;}
#purchase_options .list_box{justify-content: space-between; padding: 64px 0 0; width: 1100px; margin: 0 auto;}
#purchase_options .list_box .box{background: #F5F5F5; padding: 25px 30px 116px; position: relative; width: 360px;}
#purchase_options .list_box .box h4{text-align: center; font-size: 22px; font-family: 'Noto-Sans-JP-Bold'; line-height: 160%;}
#purchase_options .list_box .box .img{padding: 14px 0 0;}
#purchase_options .list_box .box p.text{padding: 16px 0 0; line-height: 225%;}
#purchase_options .list_box .box span{position: absolute; bottom: 15px; right: 14px; font-size: 12px; ;}
#purchase_options .list_box .box a.line{display: block; width: 263px; height: auto; background: #00C755; border-radius: 1000px; color: #fff; font-size: 16px; line-height: 150%; padding: 12px 0 14px 76px; position: relative; position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);} 
#purchase_options .list_box .box a.line:before{content: ""; display: block; width: 50px; height: 50px; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); background: url(../images/common/line_icn.svg) no-repeat center center; background-size: 100%;}

/* ----------------------------- #feature ------------------------------- */
#feature{padding: 126px 0 120px;}
#feature ul{width: 1100px; margin: 0 auto; padding: 57px 0 0;}
#feature ul li{width: 900px; background: #F7F7F7; padding: 25px 47px 26px 55px; align-items: center; justify-content: space-between; margin: 0 auto 31px 0;}
#feature ul li:nth-child(2n){margin: 0 auto 31px;}
#feature ul li:last-child{margin: 0 0 0 auto;}
#feature ul li .text_box{width: 627px; height: auto;}
#feature ul li .text_box h4{padding: 0 0 13px; border-bottom: 1px solid #000; font-size: 22px; font-family: 'Noto-Sans-JP-Bold'; }
#feature ul li .text_box p{padding: 20px 0 0; line-height: 188%; font-size: 16px;}

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

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

@media only screen and (max-width: 768px) {
	.flex{display: block;}
	.title_box h3{font-size: 16px; line-height: 160%;}
	.title_box h3 span{font-size: 60px; }
	.title_box p { font-size: 13px; line-height: 200%;}
	main{padding: 58px 0 0;}
	
	.link_btn{width: 82.35%; height: auto;}
	.link_btn a{font-size: 16px; line-height: 150%; padding: 9px 0;}
	.link_btn a:before{right: 21px; width: 8px; height: 15px;}
	/* ----------------------------- #fv ------------------------------- */
	#fv{background: url(../images/service/fv_bg_sp.jpg?var=123456) no-repeat center center; background-size: cover; padding: 32.7% 5% 5%;}
	#fv h2{font-size: 16px; line-height: 100%;}
	#fv h2 span{font-size: 47px; line-height: 122%; padding: 0px;}
	#fv p{display: none;}
		
	/* ----------------------------- #service ------------------------------- */
	#service{padding: 50px 0 0;}
	#service .title_box p{padding: 30px 0 0; width: 90%; margin: 0 auto; }
	#service ul{padding: 30px 0 0;}
	#service ul li{ padding: 0;}
	#service ul li:before{width: 90%; height: auto; padding: 60% 0 0; background: url(../images/service/service_bg_1_sp.jpg?var=123456) no-repeat center center; background-size: cover; top: 10%;}
	#service ul li.left_box:before{right: auto; left: 0px;}
	#service ul li:not(:last-child){margin: 0 0 30px;}
	#service ul li .box{ width: 100%;}
	#service ul li.left_box .box{flex-flow: row-reverse;}
	#service ul li .box .text_box{width: 100%; height: auto; padding: 15px 0 0;}
	#service ul li .box .text_box .flex{display: flex;}
	#service ul li .box .text_box .flex p{margin: 0 15px 0 0; font-size: 50px;}
	#service ul li .box .text_box .flex h4{font-size: 18px;}
	#service ul li .box .text_box p.text{line-height: 200%; font-size: 14px; padding: 7px 0 0;}
	
	/* ----------------------------- #products ------------------------------- */
	#products{padding: 60px 0 0;}
	#products .products_bg{padding: 40px 0;}
	#products .products_bg .top_box{ padding: 0 0px 30px; }
	#products .products_bg .title_box{text-align: left; width: 100%; height: auto;}
	#products .products_bg .title_box h3 span{font-size: 60px;}
	#products .products_bg .title_box p{padding: 25px 0 0;}
	#products .products_bg .img_box{ width: 100%; display: flex; gap: 10px; padding: 30px 0 0;}
	#products .products_bg .img_box img{box-shadow: 0 3px 6px rgba(0,0,0,0.2); width: calc(100% / 3 - 7px);}
	#products .products_bg .bottom_box{padding: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 8px;}
	#products .products_bg .bottom_box img{width: calc(50% - 5px); height: auto;}
	
	/* ----------------------------- #purchase_options ------------------------------- */
	#purchase_options{padding: 75px 0 0;}
	#purchase_options .title_box h3 span{font-size: 60px;}
	#purchase_options .title_box p{text-align: center; padding: 29px 0 0;}
	#purchase_options .list_box{justify-content: space-between; padding: 30px 0 0; width: 100%; margin: 0 auto;}
	#purchase_options .list_box .box{padding: 20px 5% 20px; width: 100%;}
	#purchase_options .list_box .box:not(:last-child){margin: 0 0 10px;}
	#purchase_options .list_box .box h4{ font-size: 18px;}
	#purchase_options .list_box .box .img{padding: 14px 0 0;}
	#purchase_options .list_box .box p.text{padding: 8px 0 0; line-height: 200%; font-size: 14px;}
	#purchase_options .list_box .box span{bottom: 0; right: 0; font-size: 11px; position: relative; text-align: right; width: 100%; display: block; padding: 20px 0 0;}
	#purchase_options .list_box .box a.line{ width: 260px; font-size: 14px; line-height: 150%; padding: 15px 20px 15px 40px; bottom: auto; text-align: center; position: relative; left: auto;
  transform: none; margin: 20px auto 0;} 
	#purchase_options .list_box .box a.line:before{ width: 36px; height: 36px; left: 15px; }
	
	/* ----------------------------- #feature ------------------------------- */
	#feature{padding: 69px 0;}
	#feature ul{width: 100%; padding: 27px 0 0;}
	#feature ul li{width: 100%; padding: 25px 5% 26px; margin: 0 auto 15px;}
	#feature ul li:nth-child(2n){margin: 0 auto 15px;}
	#feature ul li:last-child{margin: 0 auto;}
	#feature ul li img{width: 36%; height: auto; margin: 0 auto;}
	#feature ul li .text_box{width: 100%; height: auto; padding: 25px 0 0;}
	#feature ul li .text_box h4{padding: 0 0 13px; font-size: 18px; text-align: center;}
	#feature ul li .text_box p{padding: 14px 0 0; line-height: 160%; font-size: 14px;}
	

}