@charset "utf-8";


/* ------------------------------------------------------------ kv */
#kv{ position: relative; margin: 0 0 35px; }
.kv__img{ width: 100%; }
.kv__img img{ width: 100%; height: auto; }

.kv__meta{ position: absolute; bottom: 12%; left: 3%; }
.kv__title{ font-size: 46px; font-family: 'Noto-Sans-JP-Bold'; color: #fff; }
.kv__title span{ display: block; padding: 20px 0 0; color: var(--main-color); font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; font-size: 16px; }


/* ------------------------------------------------------------ sv */
#sv{ padding: 120px 0 100px; }
.sv-wrap{ display: flex; align-items: center; gap: 2%; }
.sv__media{ position: relative; left: -50px; width: 53%; }
.sv__media:before{ position: absolute; right: -15px; top: 15px; content: ""; width: 100%; height: 100%; background: #EDE9DD; border-radius: 20px; }
.sv__media img{ position: relative; width: 100%; height: auto; border-radius: 20px; }

.sv__text{ width: min(515px, 40%); margin: 2%; }
.sv__desc{ line-height: 2; }


/* ------------------------------------------------------------ business */
#business{ padding: 175px 0 0; }
#business .line-title{ margin: 0 0 45px; }
.business__header{ padding: 0 0 97px; text-align: center; }
.business__title{ padding: 0 0 30px; color: var(--main-color); font-size: 26px; font-family: 'Noto-Sans-JP-Medium'; }
.business__sub{ font-size: 18px; line-height: 1.8; }

.project{ display:flex; flex-direction:column; gap:65px; }
.project__item{ position:relative; display:flex; align-items:center; gap:5%; }
.project__media{ position:relative; width:47%; }
.project__media:before{ z-index:-1; position:absolute; content:""; right:-10px; bottom:-10px; width:100%; height:100%; background:#EDE9DD; border-radius:20px; }
.project__media img{ width:100%; height:auto; border-radius:20px; }

.project__body{ width: 48%; }
.project__ttl{ margin:0 0 19px; font-size:34px; line-height:1.8; white-space:nowrap; }
.project__txt{ padding:0 0 65px; font-size:18px; line-height:1.8; }


/* ------------------------------------------------------------ solution */
#solution{ margin: 0 0 150px; padding: 90px 0 110px; background: #F7F3EF; }
#solution .btn{ margin-top: 40px; }

.goods_list{ display: flex; align-items: flex-start; flex-wrap: wrap; gap: 70px 80px; }
.goods_list li{ width: calc(100% / 2 - 40px); }
.goods_list_text{ padding: 20px 0 0; }
.goods_list_ttl{ padding: 0 0 15px; font-size: 28px; text-align: center; line-height: 150%; }
.goods_list_desc{ line-height: 2; }

.featherlight .featherlight-content{ padding-top: 5%!important; }
.featherlight .featherlight-content img { max-width: 90vw; max-height: 90vh; width: auto; height: auto; }
.featherlight .featherlight-close-icon{ top: 2%!important; right: 1%!important; font-size: 2rem; color: var(--main-color)!important; }

/* ------------------------------------------------------------ case */
#case{ padding: 0 0 107px; }
.solution-wrap{ position: relative; display: flex; align-items: flex-start; gap: 60px; padding: 50px; background: #fff; border-radius: 20px; box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.15); }
.solution__media{ width: 460px; }
.solution__media img{ width: 100%; height: auto; border-radius: 20px; }

.solution__body{ width: calc(100% - 520px); }
.solution__ttl{ margin: 0 0 15px; font-size: 30px; line-height: 1.5; font-family: 'Noto-Sans-JP-Bold'; }
.solution__txt{ padding: 0 0 60px; line-height: 2.2; }


/* ------------------------------------------------------------ stepup */
#stepup{ padding: 150px 0 130px; }
.sub-ttl{ text-align: center; font-size: 36px; font-family: 'Noto-Sans-JP-Bold'; }
.sub-ttl small{ display: block; margin-bottom: 15px; font-size: 26px; }
.sub-ttl_en{ display: block; padding: 15px 0 0; font-size: 16px; font-family: "neue-haas-grotesk-display",sans-serif; font-weight: 600; font-style: normal; color: var(--main-color); }

.stepup-list{ display: flex; justify-content: space-between; align-items: flex-end; gap: 15px; margin: 0; padding: 0; list-style: none; }
.stepup-item{ width: calc((100% - 30px) / 3); }
.stepup-image{ text-align: center; margin-bottom: 20px; }
.stepup-image img{ max-width: 100%; height: auto; display: inline-block; }

.stepup-card{ overflow: hidden; border-radius: 14px; background: #18a85e; font-family: 'Noto-Sans-JP-Bold'; }
.stepup-card_head{ display: flex; align-items: center; justify-content: center; height: 60px; background: #F5D021; font-size: 22px; }
.stepup-card_body{ padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }

.stepup-plan{ padding: 35px 0; text-align: center; font-size: 26px; color: #fff; }
.stepup-content{ padding: 20px; background: #fff; border-radius: 10px; line-height: 1; text-align: center; }

.stepup-price{ font-size: 18px; font-family: 'Noto-Sans-JP-Bold'; }
.stepup-price strong{ font-size: 36px; font-family: 'Noto-Sans-JP-Bold'; letter-spacing: 0.01em; }
.stepup-note{ margin: 10px 0 0; font-size: 16px; }

.stepup-flow{ display: flex; margin-top: 27px; border: 1px solid var(--main-color); background: #fff; }
.stepup-flow_item{ position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 80px; font-size: 26px; font-family: 'Noto-Sans-JP-Bold'; }
.stepup-flow_item:not(:last-child)::before{ content: ""; position: absolute; top: -2px; right: -2px; width: 0; height: 0; border-top: 42px solid transparent; border-bottom: 42px solid transparent; border-left: 36px solid #18a85e; z-index: 2; }
.stepup-flow_item:not(:last-child)::after{ content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 40px solid transparent; border-bottom: 40px solid transparent; border-left: 34px solid #fff; z-index: 3; }

.stepup-item:nth-child(1) .stepup-image img{ width: 194px; }
.stepup-item:nth-child(2) .stepup-image img{ width: 241px; }
.stepup-item:nth-child(3) .stepup-image img{ width: 221px; }

.stepup-item:nth-child(1) .stepup-plan{ }
.stepup-item:nth-child(2) .stepup-plan{ padding: 58px 0 75px; }
.stepup-item:nth-child(3) .stepup-plan{ padding: 87px 0 100px; }


/* ------------------------------------------------------------ plan_compare */
#plan_compare{ padding: 75px 0; background: #F7F3EF; }
.plan_compare{ padding: 37px 0 0; display: flex; align-items: flex-end; gap: 17px; }
.plan_compare_labels{ display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 120px; background: #0AA360; border-radius: 13px; padding: 10px; }
.plan_compare_label{ border-radius: 10px; background: #009152; color: #fff; font-size: 16px; font-family: 'Noto-Sans-JP-Bold'; line-height: 1.2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; flex-direction: column; }
.plan_compare_label.sp{ display: none; }
.plan_compare_label small{ display: block; font-size: 10px; margin-top: 4px; font-family: 'Noto-Sans-JP-Medium'; }
.plan_compare_cards{ flex: 1; display: flex; gap: 18px; }

.plan_card{ width: calc((100% - 36px) / 3); border-radius: 15px; overflow: hidden; }
.plan_card_inner{ height: 100%; padding: 5px; border-radius: 18px; border: 5px solid #fff; background: #fff; }
.plan_card.research .plan_card_inner{ border: 5px solid #F5D021; }
.plan_card.business .plan_card_inner{ border: 5px solid #0AA360; }

.plan_card_head{ height: 255px; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 10px 20px; text-align: center; }
.plan_card_image{ padding: 0 0 5px; }
.plan_card_name{ font-size: 20px; font-family: 'Noto-Sans-JP-Bold'; line-height: 1.4; }
.plan_card_lead{ margin: 10px 0 0; font-size: 14px; }
.plan_card_body{ display: flex; flex-direction: column; gap: 5px; }

.plan_row{ background: #F8F8F8; border-radius: 10px; }
.plan_card.research .plan_row{ background: #FCF0B9; }
.plan_card.business .plan_row{ background: #C0E8D6; }

.tablerow-1{ height: 70px; }
.tablerow-2{ height: 90px; }
.tablerow-3{ height: 105px; }
.tablerow-4{ height: 115px; }
.tablerow-5{ height: 60px; }
.tablerow-6{ height: 70px; }

.plan_cell{ height: 100%; padding: 15px; }
.plan_cell li{ position: relative; font-size: 12px; line-height: 1.5; padding-left: 1rem; text-indent: -1rem; }

.plan_price,
.plan_contract,
.plan_option{ display: flex; align-items: center; justify-content: center; text-align: center; }

.plan_price{ font-size: 28px; font-family: 'Noto-Sans-JP-Bold'; }
.plan_price small{ position: relative; bottom: -3px; font-size: 20px; }
.plan_contract{ font-size: 17px; line-height: 1.3; }
.plan_option{ font-size: 17px; }

.plan_info,
.plan_product{ font-size: 14px; }
.plan_service{ font-size: 11px; line-height: 1.5; }

.plan_notes{ margin: 15px 0 18px 130px; }
.plan_notes p{ font-size: 12px; line-height: 1.5; }

.plan_disclaimer{ background: #fff; border-radius: 20px; padding: 25px 45px; margin-bottom: 70px; display: flex; align-items: stretch; }
.plan_disclaimer_title{ display: flex; align-items: center; justify-content: center; position: relative; width: 290px; padding-right: 36px; font-size: 18px; font-family: 'Noto-Sans-JP-Bold'; }
.plan_disclaimer_title:after{ position: absolute; content: ""; right: 0; top: 0; width: 1px; height: 100%; background: #000; }

.plan_disclaimer_body{ flex: 1; padding-left: 36px; }
.plan_disclaimer_body ul{ margin: 0; padding: 0; list-style: none; }
.plan_disclaimer_body li{ padding-bottom: 5px; font-size: 15px; line-height: 1.5; }
.plan_disclaimer_body li:last-of-type{ padding-bottom: 0; }





/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {

/* ------------------------------------------------------------ kv */
	#kv{ margin-bottom: 20px; }
	.kv__img{ overflow: hidden; }
	.kv__img img{ height: 250px; object-fit: cover; }
	
	.kv__meta{ bottom: 10%; left: 0; padding: 0 5%; }
	.kv__title{ font-size: 26px; line-height: 1.3; }
	.kv__title span{ padding-top: 8px; font-size: 12px; }
	

/* ------------------------------------------------------------ sv */
	#sv{ padding: 50px 0; }
	.sv-wrap{ flex-direction: column; gap: 30px; width: 90%; margin: 0 auto; }
	.sv__media{ left: 0; width: 100%; }
	.sv__media:before{ right: -10px; top: 10px; border-radius: 16px; }
	.sv__media img{ border-radius: 16px; }
	
	.sv__text{ width: 100%; margin: 0; }
	.sv__desc{ font-size: 14px; line-height: 1.9; }


/* ------------------------------------------------------------ business */
	#business{ padding: 50px 0 0; }
	#business .line-title{ margin: 0 0 30px; }
	.business__header{ padding:0 0 48px; text-align:center; }
	.business__title{ padding:0 0 14px; font-size:19px; line-height:1.5; }
	.business__sub{ font-size:14px; line-height:1.8; }
	
	.project{ gap:70px; }
	.project__item{ flex-direction:column; align-items:stretch; gap:16px; }
	.project__media{ width:100%; }
	.project__media:before{ right:-8px; bottom:-8px; border-radius:16px; }
	.project__media img{ border-radius:16px; }
	
	.project__body{ width:100%; }
	.project__ttl{ margin:0 0 10px; font-size:21px; line-height:1.5; white-space:normal; text-align:center; }
	.project__txt{ padding:0 0 40px; font-size:14px; line-height:1.8; }
	

/* ------------------------------------------------------------ solution */
	#solution{ margin: 0 0 60px; padding: 50px 0; }
	#solution .btn{ margin-top: 30px; }
	
	.goods_list { flex-direction: column; gap: 60px; }
	.goods_list li { width: 100%; }
	.goods_list .figure img { width: 100%; height: auto; }
	
	.goods_list_text { padding: 20px 0 0; }
	.goods_list_ttl { padding: 0 0 5px; font-size: 20px; text-align: center; }
	.goods_list_desc{ font-size: 14px; }


/* ------------------------------------------------------------ case */
	#case{ padding: 0 0 50px; }
	.solution-wrap{ flex-direction: column; gap: 20px; padding: 25px 5% 50px; border-radius: 15px; }
	.solution__media{ width: 100%; }
	.solution__media img{ border-radius: 16px; }
	
	.solution__body{ width: 100%; }
	.solution__ttl{ margin-bottom: 10px; font-size: 20px; line-height: 1.5; }
	.solution__txt{ padding-bottom: 40px; font-size: 14px; line-height: 1.9; }


/* ------------------------------------------------------------ stepup */
	#stepup{ padding: 50px 0; }
	#stepup .sub-ttl{ padding: 0; }
	
	.sub-ttl{ padding: 0 0 30px; font-size: 24px; line-height: 1.5; }
	.sub-ttl small{ margin-bottom: 5px; font-size: 18px; }
	.sub-ttl_en{ padding: 10px 0 0; font-size: 16px; }
	
	.stepup-card{ border-radius: 10px; }
	.stepup-card_head{ height: 26px; font-size: 11px; }
	.stepup-plan{ padding: 5px 0 15px; font-size: 12px; }
	
	.stepup-list{ gap: 0; }
	.stepup-item{ width: calc((100% - 7px) / 3); }
	.stepup-image{ margin-bottom: 10px; }
	
	.stepup-card_body{ padding: 10px 5px; }
	
	.stepup-content{ padding: 5px 2px; }
	.stepup-price{ font-size: 0.5rem; line-height: 1.8; }
	.stepup-price strong{ font-size: 18px; }
	.stepup-note{ margin: 4px 0 0; line-height: 1.5; font-size: 10px; }
	.stepup-note small{ display: block; font-size: 0.7em; }
	
	.stepup-flow{ margin-top: 15px; }
	.stepup-flow_item{ min-height: 45px; font-size: 11px; }
	.stepup-flow_item:not(:last-child)::before{ top: -1px; border-top: 23px solid transparent; border-bottom: 23px solid transparent; border-left: 18px solid #18a85e; }
	.stepup-flow_item:not(:last-child)::after{ border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-left: 17px solid #fff; }
	
	.stepup-item:nth-child(2) .stepup-plan{ padding: 15px 0 27px; }
	.stepup-item:nth-child(3) .stepup-plan{ padding: 26px 0 43px; }
	
	.stepup-item:nth-child(1) .stepup-image img,
	.stepup-item:nth-child(2) .stepup-image img,
	.stepup-item:nth-child(3) .stepup-image img{ width: 75%; }


/* ------------------------------------------------------------ plan_compare */
	#plan_compare{ padding: 50px 0; }
	.plan_compare{ padding: 0; display: block; }
	.plan_compare_labels.PC{ display: none; }
	.plan_compare_cards{ display: block; }
	
	.plan_card{ width: 100%; }
	.plan_card + .plan_card{ margin-top: 25px; }
	.plan_card_inner{ padding: 5px 5px 15px; border-radius: 14px; border-width: 4px; }

	.plan_card_head{ height: auto; padding: 20px 12px 18px; }
	.plan_card_image{ padding: 0 0 10px; }
	.plan_card_name{ font-size: 24px; line-height: 1.4; }
	.plan_card_lead{ margin: 3px 0 0; font-size: 13px; line-height: 1.5; }
	.plan_card_body{ gap: 8px; }
	
	.plan_row{ height: auto !important; overflow: hidden; }
	
	.plan_card.research .plan_compare_label{ background: #F5D021; color: #000; }
	.plan_card.business .plan_compare_label{ background: #0AA360; }
	.plan_compare_label.sp{ display: flex; flex-direction: row; border-radius: 0; padding: 5px; min-height: 40px; font-size: 15px; }
	.plan_compare_label small{ display: inline; font-size: 10px; margin-top: 3px; }
	
	.plan_cell{ height: auto; padding: 12px; }
	.plan_cell li{ font-size: 12px; line-height: 1.6; }

	.plan_price,
	.plan_contract,
	.plan_option,
	.plan_cell{ min-height: 70px; }

	.plan_price{ font-size: 25px; }
	.plan_contract{ font-size: 18px; line-height: 1.4; }
	.plan_option{ font-size: 18px; }

	.plan_info,
	.plan_product,
	.plan_service{ font-size: 13px; line-height: 1.7; }

	.plan_notes{ margin: 18px 0 22px; }
	.plan_notes p{ font-size: 11px; line-height: 1.8; }

	.plan_disclaimer{ padding: 20px 16px; margin-bottom: 40px; border-radius: 14px; display: block; }
	.plan_disclaimer_title{ width: 100%; padding: 0 0 15px; font-size: 18px; line-height: 1.5; text-align: center; }
	.plan_disclaimer_title:after{ right: auto; left: 0; top: auto; bottom: 0; width: 100%; height: 1px; }
	
	.plan_disclaimer_body{ padding: 15px 0 0; }
	.plan_disclaimer_body li{ padding-bottom: 6px; font-size: 13px; line-height: 1.7; }
	.plan_disclaimer_body li:last-of-type{ padding-bottom: 0; }
	
	.plan_card_image img{ max-width: 100%; height: auto; }
	.plan_card.starter .plan_card_image img{ width: 120px; }
	.plan_card.research .plan_card_image img{ width: 140px; }
	.plan_card.business .plan_card_image img{ width: 118px; }



}