/*==================================================
Feature UI Kit v4
Part1
Variables / Reset / Common
==================================================*/

/*==================================
Variables
==================================*/

:root{

	--feature-width:1200px;

	--section-space:120px;

	--section-space-sp:72px;

	--color-primary:#0E6B42;

	--color-primary-light:#EEF9F3;

	--color-text:#1F2937;

	--color-sub:#667085;

	--color-border:#E5E7EB;

	--color-bg:#F8FAFC;

	--color-white:#FFFFFF;

	--radius:24px;

	--radius-large:32px;

	--shadow-sm:0 8px 24px rgba(15,23,42,.05);

	--shadow:0 20px 60px rgba(15,23,42,.08);

	--shadow-lg:0 30px 80px rgba(15,23,42,.12);

	--transition:.35s ease;

}


/*==================================
Reset
==================================*/

.feature-section,
.feature-section *{

	box-sizing:border-box;

}

.feature-section img{

	display:block;

	width:100%;

	height:auto;

}

.feature-section h1,
.feature-section h2,
.feature-section h3{

	margin:0;

	line-height:1.3;

	font-weight:700;

	color:var(--color-text);

}

.feature-section p{

	margin:0;

	line-height:1.9;

	color:var(--color-sub);

}

.feature-section ul{

	margin:0;

	padding:0;

	list-style:none;

}


/*==================================
Section
==================================*/

.feature-section{

	position:relative;

	padding:var(--section-space) 0;

	background:#fff;

	overflow:hidden;

}

.feature-section:nth-child(even){

	background:#F8FAFC;

}


/*==================================
Container
==================================*/

.feature-container{

	max-width:var(--feature-width);

	margin:0 auto;

	padding:0 24px;

}

.alignwide.feature-container{

	max-width:1200px;

}


/*==================================
Feature Heading
==================================*/

.feature-heading-section{

	padding:110px 0 90px;

	background:#fff;

}

.feature-heading-section .feature-container{

	max-width:960px;

	margin:0 auto;

	padding:0 24px;

	text-align:center;

}


/*----------------------------------
Label
----------------------------------*/

.feature-heading-section .feature-label{

	display:block;

	margin:0 0 16px;

	padding:0;

	background:none;

	border-radius:0;

	color:#0E6B42;

	font-size:16px;

	font-weight:700;

	line-height:1.4;

	letter-spacing:.04em;

	text-transform:none;

}


/*----------------------------------
Title
----------------------------------*/

.feature-heading-section .feature-title{

	margin:0 0 28px;

	font-size:clamp(40px,4vw,56px);

	font-weight:700;

	line-height:1.3;

	letter-spacing:-.03em;

	color:#111827;

}


/*----------------------------------
Description
----------------------------------*/

.feature-heading-section .feature-description{

	max-width:860px;

	margin:0 auto;

	font-size:18px;

	font-weight:400;

	line-height:2;

	color:#4B5563;

}


/*----------------------------------
WordPress Margin Reset
----------------------------------*/

.feature-heading-section .wp-block-heading{

	margin-bottom:28px;

}

.feature-heading-section .wp-block-paragraph{

	margin-top:0;

}

.feature-heading-section .feature-description.wp-block-paragraph{

	margin-bottom:0;

}


/*==================================
Responsive
==================================*/

@media (max-width:960px){

	.feature-heading-section{

		padding:72px 0 56px;

	}

	.feature-heading-section .feature-container{

		padding:0 20px;

	}

	.feature-heading-section .feature-label{

		font-size:14px;

		margin-bottom:12px;

	}

	.feature-heading-section .feature-title{

		font-size:32px;

		margin-bottom:20px;

	}

	.feature-heading-section .feature-description{

		font-size:16px;

		line-height:1.9;

	}

}


/*==================================
WordPress Columns
==================================*/

.wp-block-columns{

	margin-bottom:0;

}

.wp-block-column{

	min-width:0;

}


/*==================================
Card Common
==================================*/

.feature-card{

	height:100%;

	padding:48px;

	background:#fff;

	border:1px solid var(--color-border);

	border-radius:24px;

	box-shadow:var(--shadow-sm);

	transition:all .35s ease;

	display:flex;

	flex-direction:column;

}

.feature-card:hover{

	transform:translateY(-6px);

	box-shadow:var(--shadow);

}

.feature-card-icon{

	width:72px;

	margin-bottom:28px;

}

.feature-card h3{

	font-size:28px;

	margin-bottom:18px;

}

.feature-card p{

	line-height:1.9;

}

.feature-card-image{

	margin-top:auto;

	padding-top:40px;

}


/*==================================
Check List
==================================*/

.feature-check{

	display:grid;

	gap:14px;

	margin-top:28px;

}

.feature-check li{

	position:relative;

	padding-left:34px;

	line-height:1.8;

}

.feature-check li::before{

	content:"✓";

	position:absolute;

	left:0;

	top:2px;

	width:22px;

	height:22px;

	border-radius:50%;

	background:var(--color-primary-light);

	color:var(--color-primary);

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:12px;

	font-weight:700;

}
/*==================================================
Feature UI Kit v4
Part2
Hero / 2Column / Card
==================================================*/


/*==================================
Hero
==================================*/

.feature-hero{

	padding:100px 0;

	background:linear-gradient(180deg,#ffffff 0%,#F8FBF9 100%);

}

.wp-block-columns.feature-hero-grid{

	align-items:center;

	gap:80px;

}

.feature-hero-content{

	max-width:560px;

}

.feature-hero .feature-title{

	margin-bottom:24px;

	font-size:clamp(42px,5vw,64px);

	line-height:1.15;

}

.feature-hero .feature-description{

	max-width:none;

	margin:0;

	font-size:18px;

	line-height:2;

}

.feature-hero-buttons{

	display:flex;

	gap:20px;

	margin-top:48px;

}

.feature-hero-buttons .wp-block-button{

	margin:0;

}

.button-primary .wp-block-button__link{

	background:#222;

	color:#fff;

	padding:18px 40px;

	border-radius:12px;

	font-weight:700;

	box-shadow:var(--shadow);

}

.button-secondary .wp-block-button__link{

	background:var(--color-primary);

	color:#fff;

	padding:18px 40px;

	border-radius:12px;

	font-weight:700;

	box-shadow:var(--shadow);

}

.feature-hero-image img{

	max-width:640px;

	margin:auto;

	filter:drop-shadow(0 35px 70px rgba(0,0,0,.18));

}


/*==================================
2Column
==================================*/

.wp-block-columns.feature-2column{

	align-items:center;

	gap:96px;

}

.feature-2column .wp-block-column{

	display:flex;

	align-items:center;

}

.feature-2column img{

	border-radius:24px;

	box-shadow:var(--shadow-lg);

}

.feature-2column .feature-title{

	margin-bottom:24px;

}

.feature-2column .feature-description{

	margin-bottom:32px;

}

/*==================================
Feature Card2
==================================*/

.feature-card2{

	padding:100px 0;

	background:#fff;

}

.feature-card2 .feature-container{

	max-width:1200px;

	margin:0 auto;

	padding:0 24px;

}

.feature-card2-grid{

	gap:40px;

}

.feature-card2-grid>.wp-block-column{

	display:flex;

}


/*-----------------------------
Card
-----------------------------*/

.feature-card{

	width:100%;

	padding:48px;

	background:#fff;

	border:1px solid #E8ECEF;

	border-radius:24px;

	box-shadow:
		0 10px 30px rgba(0,0,0,.04);

	display:flex;

	flex-direction:column;

	transition:.35s;

}

.feature-card:hover{

	transform:translateY(-8px);

	box-shadow:
		0 20px 60px rgba(0,0,0,.08);

}


/*-----------------------------
Icon
-----------------------------*/

.feature-card-icon{

	width:72px;

	margin:0 auto 24px;

}

.feature-card-icon img{

	width:72px;

}


/*-----------------------------
Title
-----------------------------*/

.feature-card h3{

	text-align:center;

	font-size:34px;

	font-weight:700;

	color:#0E6B42;

	margin-bottom:22px;

}


/*-----------------------------
Description
-----------------------------*/

.feature-card>p{

	text-align:center;

	font-size:18px;

	line-height:2;

	color:#444;

	margin-bottom:36px;

}


/*-----------------------------
Image
-----------------------------*/

.feature-card-image{

	margin-top:auto;

	margin-bottom:32px;

}

.feature-card-image img{

	width:100%;

	border-radius:14px;

}


/*-----------------------------
Bottom
-----------------------------*/

.feature-card-bottom{

	padding:22px;

	background:#F7F9F8;

	border-radius:16px;

	text-align:center;

}

.feature-card-recommend{

	margin-bottom:10px;

	font-size:17px;

	font-weight:700;

	color:#0E6B42;

}

.feature-card-note{

	font-size:15px;

	line-height:1.8;

	color:#666;

}


/*-----------------------------
Responsive
-----------------------------*/

@media(max-width:960px){

.feature-card2{

	padding:72px 0;

}

.feature-card2-grid{

	gap:24px;

}

.feature-card{

	padding:32px 24px;

}

.feature-card h3{

	font-size:28px;

}

.feature-card>p{

	font-size:16px;

}

.feature-card-bottom{

	padding:18px;

}

}


/*==================================
Card3
==================================*/

.wp-block-columns.feature-card3-grid{

	gap:32px;

}

.feature-card3-grid>.wp-block-column{

	display:flex;

}

.feature-card3 .feature-card{

	width:100%;

	text-align:center;

	padding:40px;

}

.feature-card-number{

	width:56px;

	height:56px;

	margin:0 auto 24px;

	border-radius:50%;

	background:var(--color-primary-light);

	color:var(--color-primary);

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:18px;

	font-weight:700;

}

.feature-card3 .feature-card-icon{

	margin:0 auto 24px;

}

.feature-card3 h3{

	font-size:24px;

	margin-bottom:18px;

}

.feature-card3 p{

	font-size:16px;

	line-height:1.9;

}


/*==================================
Hover
==================================*/

.feature-card img{

	transition:.35s;

}

.feature-card:hover img{

	transform:translateY(-4px);

}
/*==================================================
Feature UI Kit v4
Part3
Phone / PC / CTA
==================================================*/


/*==================================
Feature Phone
==================================*/

.feature-phone{

	padding:110px 0;

	background:#fff;

}

.feature-phone .feature-container{

	max-width:1200px;

	margin:auto;

	padding:0 24px;

}

.feature-phone-grid{

	align-items:center;

	gap:90px;

}

.feature-phone-grid>.wp-block-column{

	display:flex;

}


/*------------------
Left
------------------*/

.feature-phone .feature-card{

	width:100%;

	background:none;

	border:none;

	box-shadow:none;

	padding:0;

}

.feature-card-icon{

	width:180px;

	margin-bottom:18px;

}

.feature-phone h2{

	font-size:54px;

	font-weight:700;

	line-height:1.3;

	margin-bottom:24px;

	color:#222;

}

.feature-phone p{

	font-size:18px;

	line-height:2;

	color:#555;

}


/*------------------
Point
------------------*/

.feature-point{

	margin-top:56px;

	gap:24px;

	align-items:flex-start;

}

.feature-point-icon{

	width:72px;

	flex:none;

}

.feature-point h3{

	font-size:34px;

	color:#0E6B42;

	margin-bottom:12px;

}

.feature-point p{

	margin:0;

	font-size:16px;

	line-height:1.9;

}


/*------------------
Phone
------------------*/

.feature-device{

	text-align:center;

}

.phone-animation img{

	max-width:460px;

	margin:auto;

	filter:drop-shadow(0 35px 70px rgba(0,0,0,.18));

}


/*------------------
Hover
------------------*/

.phone-animation{

	transition:.8s;

}

.phone-animation.is-visible{

	transform:none;

	opacity:1;

}


/*------------------
Responsive
------------------*/

@media(max-width:960px){

.feature-phone{

	padding:72px 0;

}

.feature-phone-grid{

	gap:48px;

}

.feature-phone h2{

	font-size:34px;

}

.feature-phone p{

	font-size:16px;

}

.feature-point{

	margin-top:36px;

}

.feature-point h3{

	font-size:24px;

}

.phone-animation img{

	max-width:280px;

}

}

/*==================================================
Feature PC
Part1
==================================================*/

.feature-pc{

	padding:110px 0;

	background:#fff;

}

.feature-pc .feature-container{

	max-width:1280px;

	margin:0 auto;

	padding:70px;

	border-radius:32px;

	background:linear-gradient(135deg,#0C633A 0%,#0E6B42 100%);

	position:relative;

	overflow:hidden;

}


/*==================================
背景アクセント
==================================*/

.feature-pc .feature-container::before{

	content:"";

	position:absolute;

	right:-120px;

	top:0;

	width:260px;

	height:100%;

	background:rgba(255,255,255,.05);

	transform:skewX(-16deg);

}

.feature-pc .feature-container::after{

	content:"";

	position:absolute;

	right:90px;

	top:0;

	width:170px;

	height:100%;

	background:rgba(255,255,255,.05);

	transform:skewX(-16deg);

}


/*==================================
Grid
==================================*/

.feature-pc-grid{

	align-items:center;

	gap:70px;

}

.feature-pc-grid>.wp-block-column{

	position:relative;

	z-index:2;

}


/*==================================
Left
==================================*/

.feature-pc-content{

	max-width:560px;

}

.feature-pc .feature-label{

	display:block;

	margin-bottom:18px;

	font-size:16px;

	font-weight:700;

	color:#CDE9D9;

}

.feature-pc .feature-title{

	margin-bottom:28px;

	font-size:56px;

	font-weight:700;

	line-height:1.25;

	color:#fff;

	letter-spacing:-.03em;

}

.feature-pc .feature-description{

	margin:0;

	font-size:17px;

	line-height:2;

	color:rgba(255,255,255,.88);

}


/*==================================
Point
==================================*/

.feature-pc-points{

	margin-top:56px;

	gap:24px;

}

.feature-pc-points>.wp-block-column{

	display:flex;

	flex-direction:column;

}

.feature-pc-points figure{

	margin:0 0 18px;

}

.feature-pc-points img{

	width:48px;

	height:auto;

	display:block;

}

.feature-pc-points h4{

	margin:0 0 10px;

	font-size:18px;

	font-weight:700;

	color:#fff;

	line-height:1.4;

}

.feature-pc-points p{

	margin:0;

	font-size:15px;

	line-height:1.8;

	color:rgba(255,255,255,.82);

}

/*==================================================
Feature PC
Part2
PC Image / Animation / Responsive
==================================================*/


/*==================================
Right
==================================*/

.feature-device{

	position:relative;

	display:flex;

	justify-content:center;

	align-items:center;

	height:100%;

}


/*==================================
PC Image
==================================*/

.feature-pc-image{

	margin:0;

	text-align:center;

}

.feature-pc-image img{

	width:100%;

	max-width:760px;

	height:auto;

	display:block;

	margin:0 auto;

	filter:drop-shadow(0 30px 60px rgba(0,0,0,.28));

	transform:translateX(40px);

	transition:.45s ease;

}

.feature-pc:hover .feature-pc-image img{

	transform:translateX(30px) translateY(-6px);

}


/*==================================
Animation
==================================*/

.pc-animation{

	opacity:0;

	transform:translateX(60px);

	transition:.8s cubic-bezier(.22,1,.36,1);

}

.pc-animation.is-visible{

	opacity:1;

	transform:none;

}


/*==================================
Responsive
==================================*/

@media (max-width:1024px){

	.feature-pc .feature-container{

		padding:56px 40px;

	}

	.feature-pc-grid{

		gap:48px;

	}

	.feature-pc .feature-title{

		font-size:44px;

	}

	.feature-pc-image img{

		max-width:620px;

		transform:none;

	}

}


@media (max-width:768px){

	.feature-pc{

		padding:72px 0;

	}

	.feature-pc .feature-container{

		padding:40px 24px;

		border-radius:24px;

	}

	.feature-pc-grid{

		flex-direction:column;

		gap:48px;

	}

	.feature-pc-content{

		max-width:100%;

	}

	.feature-pc .feature-label{

		font-size:14px;

	}

	.feature-pc .feature-title{

		font-size:34px;

		margin-bottom:20px;

	}

	.feature-pc .feature-description{

		font-size:16px;

		line-height:1.9;

	}

	.feature-pc-points{

		margin-top:40px;

		gap:24px;

	}

	.feature-pc-points>.wp-block-column{

		margin-bottom:12px;

	}

	.feature-pc-points h4{

		font-size:17px;

	}

	.feature-pc-points p{

		font-size:14px;

	}

	.feature-device{

		margin-top:16px;

	}

	.feature-pc-image img{

		max-width:100%;

		transform:none;

		filter:drop-shadow(0 20px 40px rgba(0,0,0,.25));

	}

}


/*==================================
Large Display
==================================*/

@media (min-width:1440px){

	.feature-pc .feature-container{

		max-width:1360px;

	}

	.feature-pc-image img{

		max-width:860px;

	}

}
/*==================================
CTA
==================================*/

.feature-cta{

	padding:120px 0;

}

.feature-cta-box{

	padding:80px;

	border-radius:32px;

	background:linear-gradient(135deg,#0E6B42,#178150);

	box-shadow:var(--shadow-lg);

	text-align:center;

}

.feature-cta-box .feature-label{

	background:rgba(255,255,255,.12);

	color:#fff;

}

.feature-cta-box .feature-title{

	color:#fff;

	margin-bottom:24px;

}

.feature-cta-box .feature-description{

	color:rgba(255,255,255,.9);

	max-width:720px;

	margin:0 auto;

}

.feature-cta-buttons{

	display:flex;

	justify-content:center;

	gap:24px;

	margin-top:48px;

}

.feature-cta-buttons .wp-block-button{

	margin:0;

}

.feature-cta-buttons .wp-block-button__link{

	min-width:220px;

	padding:18px 40px;

	border-radius:12px;

	font-weight:700;

	box-shadow:var(--shadow);

	transition:.3s;

}

.feature-cta-buttons .wp-block-button__link:hover{

	transform:translateY(-4px);

}

.feature-cta .button-primary .wp-block-button__link{

	background:#222;

	color:#fff;

}

.feature-cta .button-secondary .wp-block-button__link{

	background:#fff;

	color:var(--color-primary);

}

/*==================================================
Feature UI Kit v4
Part4
FAQ / Animation / Responsive
==================================================*/


/*==================================
FAQ
==================================*/

.feature-faq{

	padding:120px 0;

}

.feature-faq-item{

	margin-bottom:20px;

	border:1px solid var(--color-border);

	border-radius:20px;

	background:#fff;

	box-shadow:var(--shadow-sm);

	overflow:hidden;

	transition:.35s;

}

.feature-faq-item:hover{

	box-shadow:var(--shadow);

}

.feature-faq-item summary{

	position:relative;

	cursor:pointer;

	list-style:none;

	padding:24px 72px 24px 28px;

	font-size:18px;

	font-weight:700;

	color:var(--color-text);

}

.feature-faq-item summary::-webkit-details-marker{

	display:none;

}

.feature-faq-item summary::after{

	content:"+";

	position:absolute;

	right:24px;

	top:50%;

	transform:translateY(-50%);

	width:36px;

	height:36px;

	border-radius:50%;

	background:var(--color-primary-light);

	color:var(--color-primary);

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:22px;

	font-weight:700;

	transition:.3s;

}

.feature-faq-item[open] summary::after{

	content:"−";

}

.feature-faq-item p{

	padding:0 28px 28px;

	line-height:1.9;

	color:var(--color-sub);

}


/*==================================
Animation
==================================*/

.fade-up,
.fade-right,
.fade-left,
.phone-animation,
.pc-animation{

	opacity:0;

	transition:.8s cubic-bezier(.22,1,.36,1);

}

.fade-up{

	transform:translateY(40px);

}

.fade-left{

	transform:translateX(-60px);

}

.fade-right{

	transform:translateX(60px);

}

.phone-animation{

	transform:translateY(60px) scale(.95);

}

.pc-animation{

	transform:translateX(60px);

}

.fade-up.is-visible,
.fade-left.is-visible,
.fade-right.is-visible,
.phone-animation.is-visible,
.pc-animation.is-visible{

	opacity:1;

	transform:none;

}


/*==================================
Delay
==================================*/

.delay-1{

	transition-delay:.15s;

}

.delay-2{

	transition-delay:.3s;

}

.delay-3{

	transition-delay:.45s;

}


/*==================================
Responsive
==================================*/

@media(max-width:991px){

.feature-section{

	padding:72px 0;

}

.feature-container{

	padding:0 20px;

}

.feature-heading{

	margin-bottom:56px;

}

.feature-title{

	font-size:34px;

}

.feature-description{

	font-size:16px;

}

/* Hero */

.wp-block-columns.feature-hero-grid{

	gap:48px;

}

.feature-hero-buttons{

	flex-direction:column;

}

.feature-hero-buttons .wp-block-button{

	width:100%;

}

.feature-hero-buttons .wp-block-button__link{

	width:100%;

	text-align:center;

}

/* 2Column */

.wp-block-columns.feature-2column{

	gap:56px;

}

/* Card */

.feature-card{

	padding:32px;

}

.wp-block-columns.feature-card2-grid,

.wp-block-columns.feature-card3-grid{

	gap:24px;

}

/* Phone */

.wp-block-columns.feature-phone-grid{

	gap:48px;

}

.phone-animation img{

	max-width:260px;

}

/* PC */

.wp-block-columns.feature-pc-grid{

	gap:48px;

}

.pc-animation img{

	max-width:100%;

}

/* CTA */

.feature-cta-box{

	padding:48px 24px;

}

.feature-cta-buttons{

	flex-direction:column;

}

.feature-cta-buttons .wp-block-button{

	width:100%;

}

.feature-cta-buttons .wp-block-button__link{

	width:100%;

}

/* FAQ */

.feature-faq-item summary{

	padding:20px 56px 20px 20px;

	font-size:16px;

}

.feature-faq-item summary::after{

	right:16px;

	width:30px;

	height:30px;

	font-size:18px;

}

.feature-faq-item p{

	padding:0 20px 20px;

}

}


/*==================================
Tablet
==================================*/

@media(min-width:992px) and (max-width:1200px){

.feature-container{

	padding:0 32px;

}

.wp-block-columns.feature-hero-grid,

.wp-block-columns.feature-2column,

.wp-block-columns.feature-phone-grid,

.wp-block-columns.feature-pc-grid{

	gap:64px;

}

}


/*==================================
Large Desktop
==================================*/

@media(min-width:1440px){

.feature-container{

	max-width:1280px;

}

.feature-hero-image img{

	max-width:720px;

}

.pc-animation img{

	max-width:820px;

}

}


/*==================================
Utility
==================================*/

.text-center{

	text-align:center;

}

.mt-0{

	margin-top:0;

}

.mb-0{

	margin-bottom:0;

}

.mb-24{

	margin-bottom:24px;

}

.mb-40{

	margin-bottom:40px;

}

.mb-60{

	margin-bottom:60px;

}