@charset "UTF-8";
/* CSS Property Order
1.Visual					display, opacity, position, z-index, transform
2.Box Model					width, min-width, max-width, margin, padding, overflow, border, box-sizing, box-shadow
3.Background				background, background-image, background-position, background-size, background-color
4.Color,Font,Text			color, font-weight, font-size, line-height, letter-spacing, text-decoration, text-align
5.Table						table, vertical-align
6.UI						content, cursor
7.Animation 				transition, animation
8.Other						
--------------------------*/
/*--------------------------
wrapper
container
outer
inner
box
group
area
unit
item
--------------------------*/




/*root
--------------------------*/
:root{
	/*color--------*/
	--color_pk_black:#000;
	--color_pk_white:#fff;
	--color_pk_blue_opa_10:rgb(21,163,194,0.1);
	--color_pk_blue_62:#15A3C2;
	--color_pk_blue_50:#0085a3;
	--color_pk_blue_40:#00677D;
	--color_pk_orange_62:lch(62% 83.8 56.7);
	--color_pk_orange_50:lch(50% 83.8 56.7);
	--color_pk_orange_40:lch(40% 83.8 56.7);
	--color_bg_secondary:#F9F7F4;
	--color_border_dark_primary:rgba(0,0,0,0.4);
	--color_border_dark_secondary:rgba(0,0,0,0.2);
	--color_font_dark_primary:rgba(0,0,0,0.9);
	--color_font_dark_secondary:rgba(0,0,0,0.4);
	--color_font_light_primary:rgba(255,255,255,0.98);
	--color_font_light_secondary:rgba(255,255,255,0.4);

	/*font--------*/
	--font_4xl:1.5rem;/*24*/
	--font_3xl:1.375rem;/*22*/
	--font_2xl:1.25rem;/*20*/
	--font_xl:1.125rem;/*18*/
	--font_l:1rem;/*16*/
	--font_m:0.875rem;/*14*/
	--font_s:0.75rem;/*12*/
	--font_xs:0.625rem;/*10*/
	--line-height_heading:1.3;
	--line-height_body:1.6;
	--line-height_label:1.3;

	/*radius
	--------*/
	--radius_l:12px;
	--radius_m:6px;
	--radius_s:4px;
}


/*materialicon
--------------------------*/


/*master
--------------------------*/
html						{scroll-behavior:smooth;}
body						{color:var(--color_font_dark_primary); font-size:var(--font_m); line-height:var(--line-height_body);}
body						{font-family:"Inter","Noto Sans JP", sans-serif; font-optical-sizing:auto; font-weight:400; font-style:normal;}

article						{padding:120px 48px; scroll-margin-top:96px;}
article.widthfull			{padding:120px 0;}
article.full				{padding:0;}

h2							{margin-bottom:48px; font-size:var(--font_4xl); font-weight:bold; text-align:center;}
h2 span						{display:inline-block;}
h2+p						{font-size:var(--font_l); text-align:center;}

button							{height:48px; border-radius:var(--radius_m); text-box-trim:trim-both;}
a								{color:var(--color_pk_blue_62); cursor: pointer;}
a.button						{display:flex; justify-content:center; align-items:center; gap:4px; height:48px; padding:2px 16px; box-shadow:0 5px 0 var(--color_pk_orange_40); border-radius:var(--radius_m); background:var(--color_pk_orange_62); color:var(--color_pk_white); font-size:var(--font_m); font-weight:bold; text-box-trim:trim-both; transition:all 0.1s ease-out;}
a.button.pawanare::before		{content:""; width:40px; height:44px; background:image-set(url(../img/pawanare.avif) 1x, url(../img/pawanare@2x.avif) 2x); transform:translateY(2px);}
section.box a.button.pawanare	{width:260px; height:56px; margin:48px auto 0;}

.icon_acc			{display:block; position:relative; width:24px; height:24px;}
.icon_acc::before,
.icon_acc::after	{position:absolute; top:11px; left:4px; width:16px; height:2px; background:#262626; content:""; transition:all 0.5s ease-out;}
.icon_acc::after	{transform:rotate(90deg);}


.label_xl					{font-size:var(--font_xl); line-height:var(--line-height_label);}
.label_l					{font-size:var(--font_l); line-height:var(--line-height_label);}
.label_m					{font-size:var(--font_m); line-height:var(--line-height_label);}
.label_s					{font-size:var(--font_s); line-height:var(--line-height_label);}
.label_xs					{font-size:var(--font_xs); line-height:var(--line-height_label);}


/*header
--------------------------*/
header													{position:fixed; top:0; left:0;  width:100%; background:rgb(255 255 255 / 0%); z-index:100; transition:all 0.3s ease-out;}
header.show												{background:rgb(255 255 255 / 90%);}
header .outer											{display:flex; justify-content:space-between; align-items:center; width:100%; max-width:1224px; margin:0 auto; padding:24px 48px;}
header .inner_left										{display:flex; align-items:center; gap:24px;}
header .inner_left a									{display:block;}
header .inner_left a img								{height:48px;}
header .inner_left p									{font-size:var(--font_xs); font-weight:bold;}
header .inner_right										{display:flex; align-items:center; gap:12px;}
header .inner_right button								{z-index:100; display:flex; justify-content:center; align-items:center; width:48px; box-shadow:0 5px 0 var(--color_font_dark_secondary); border:1px solid var(--color_border_dark_primary); background:var(--color_pk_white); transition:all 0.1s ease-out;}
header .inner_right button .hamburger					{position:relative; width:28px;}
header .inner_right button .hamburger::before,
header .inner_right button .hamburger::after			{content:""; position:absolute; top:0; left:0; width:100%; height:2px; display:inline-block; background:var(--color_pk_black); border-radius: 1px; transition:all 0.3s ease-out;}
header .inner_right button .hamburger::before			{top:-8px;}
header .inner_right button .hamburger::after			{top:8px;}
header .inner_right button span							{display:block; width:100%; height:2px; background:var(--color_pk_black); border-radius: 1px; opacity:1; transition:all 0.3s ease-out;}
header .inner_right button.close span					{opacity:0;}
header .inner_right button.close .hamburger::before		{top:0; transform:rotate(45deg);}
header .inner_right button.close .hamburger::after		{top:0; transform:rotate(-45deg);}
nav									{display:none; position:fixed; top:0; left:0; width:100%; height:100%; min-height:100svh; background:#fff; overflow-y:auto; z-index:90;}
nav > div							{z-index:10; display:flex; flex-direction:column; align-items:center; position:relative; margin-top:120px;}
nav > div ul						{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; margin-bottom:48px;}
nav > div ul li						{height:48px; font-size:var(--font_xl); line-height:var(--line-height_label); font-weight:bold;}
nav > div ul li a					{display:block; height:100%; padding:14px; color:var(--color_font_dark_primary); text-box-trim:trim-both;}


/*main
--------------------------*/

/*--top--*/
#top											{display:flex; flex-direction:column; justify-content:center; align-items:center; padding:148px 48px 148px; background:image-set(url(../img/top_bg.avif) 1x, url(../img/top_bg@2x.avif) 2x) center center / cover no-repeat;}
#top section									{display:flex; justify-content:center; align-items:center; gap:24px;}
#top section > img								{width:100%; max-width:576px;}
#top section .title								{display:flex; flex-direction:column; align-items:flex-start; width:430px; margin-top:-40px;}
#top section .title h2							{display:inline-block; margin-bottom:16px; padding:8px 16px; border-radius:var(--radius_m); background:var(--color_pk_blue_50); color:#fff; font-size:15px; font-weight:bold; text-box-trim: trim-both;}
#top section .title p							{display:inline-block; background:linear-gradient(transparent 50%,#ffff00 50%); font-size:20px; font-weight:bold; text-box-trim: trim-both;}
#top section .title h1							{margin-top:14px;}
#top section .title h1 img						{display:block; width:100%; max-width:430px;}
#top a.button.pawanare							{width:260px; min-width:260px; height:56px; margin-top:24px;}

/*--top_slider--*/
article.top_slider								{margin-top:-100px; padding:0 0 48px;}
article.top_slider h3							{position:relative; width:168px; margin:0 auto 6px; padding:4px; border-radius:20px;background:#3E3E3E; color:#fff; font-size:var(--font_m); font-weight:bold; text-align:center; z-index:10;}
article.top_slider h3::after					{position:absolute; top:27px; left:calc(50% - 8px); content:""; width:0; height:0; border-style:solid; border-width:15px 8px 0 8px; border-color:#3E3E3E transparent transparent transparent;}

/*--campaign--*/
#campaign										{background:url(../img/campaign_bg.svg) center center / cover no-repeat;}
#campaign h2									{margin-bottom:32px;}
#campaign .box									{display:flex; flex-direction:column; align-items:center; margin-top:24px;}
#campaign .box a.zeroen							{display:block; transition:all 0.3s ease-out;}
#campaign .box a.zeroen:hover					{opacity:0.8;}
#campaign .box a.zeroen img						{width:100%; max-width:936px;}
#campaign .box p								{width:100%; max-width:936px; margin-top:8px; text-align:right;}
#campaign .box p span							{display:inline-block;}

/*--worries--*/
#worries										{padding-bottom:24px;}
#worries .box									{display:grid; grid-template-columns: 216px 216px 216px; grid-template-rows:auto auto; justify-content:center; gap:48px;}
#worries .box img								{width:100%;}
#worries img.arrow								{display:block; width:42px; margin:48px auto 0;}

/*--feature--*/
#feature								{padding-top:0; background:url(../img/feature_bg.svg) center center / cover no-repeat;}
#feature h2								{transform:translateY(115px);}
#feature h2 img							{width:100%; max-width:550px;}
#feature .box ul						{width:100%; max-width:1080px; border-radius:var(--radius_l); border:1px solid var(--color_border_dark_primary); margin:0 auto; padding:96px 72px 72px; background:var(--color_pk_white);}
#feature .box ul li						{display:flex; gap:48px;}
#feature .box ul li:nth-of-type(n+2)	{margin-top:48px;}
#feature .box ul li > img				{width:100%; max-width:360px;}
#feature .box ul li hgroup				{position:relative; padding-top:32px;}
#feature .box ul li hgroup > span		{position:absolute; top:-12px; left:-24px; color:rgb(21 163 194 / 10%); font-size:80px; font-weight:bold; line-height:1;}
#feature .box ul li h4					{margin-bottom:16px; font-size:var(--font_xl); font-weight:bold; text-box-trim:trim-both;}
#feature .box ul li p					{text-align:justify;}

/*--choice--*/
#choice .box							{display:flex; justify-content:center; align-items:stretch; gap:24px;}
#choice .box > section					{display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; max-width:360px; padding:24px 24px 32px; border-radius:var(--radius_l); background:var(--color_bg_secondary);}
#choice .box > section > h3				{width:100%; max-width:168px; border-radius:var(--radius_s); padding:4px 16px; border:1px solid var(--color_border_dark_primary); background:var(--color_pk_white); font-size:var(--font_xl); font-weight:bold; text-align:center; text-box-trim:trim-both;}
#choice .box > section > img			{width:100%; max-width:216px;}
#choice .box > section hgroup			{text-align:center;}
#choice .box > section hgroup h4		{padding:8px 4px; border-top:1px solid var(--color_border_dark_primary); border-bottom:1px solid var(--color_border_dark_primary); font-size:var(--font_xl); font-weight:bold; text-box-trim:trim-both;}
#choice .box > section hgroup p			{margin-top:16px;}
#choice .box > section ul				{display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; gap:12px 0px;}
#choice .box > section ul li img		{width:100%; max-width:150px;}

/*--function--*/
#function								{background:var(--color_bg_secondary);}
#function hgroup img					{display:block; width:100%; max-width:408px; margin:24px auto;}
#function .box							{display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; grid-tempalate-rows:auto auto; justify-content:center; gap:12px; width:100%; max-width:1128px; margin:0 auto;}
#function .box figure					{width:100%; max-width:178px;}
#function .box figure img				{width:100%;}
#function .box figure figcaption		{margin-top:8px; font-size:var(--font_s); text-align:center; text-box-trim:trim-both;}

/*--flow--*/
#flow									{background:linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), image-set(url(../img/flow_bg.avif) 1x, url(../img/flow_bg@2x.avif) 2x) center center / cover no-repeat;}
#flow .box ul							{width:100%; max-width:1128px; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:24px; margin:48px auto 0;}
#flow .box ul li						{width:100%; padding:24px; padding-top:0; border-radius:var(--radius_l); border:1px solid var(--color_border_dark_primary); background:var(--color_pk_white)}
#flow .box ul li h3						{width:100%; max-width:124px; margin:0 auto; padding:6px; border-radius:var(--radius_m); background:var(--color_pk_black); color:var(--color_pk_white); font-size:var(--font_xl); font-weight:bold; text-align:center; text-box-trim:trim-both; transform:translateY(-16px);}
#flow .box ul li img					{display:block; width:100%; max-width:160px; margin:0 auto;}
#flow .box ul li h4						{margin:16px 0; font-size:var(--font_l); font-weight:bold; text-align:center; text-box-trim:trim-both;}
#flow .box ul li p						{font-size:var(--font_m); text-align:justify;}

/*--case--*/
#case														{background:var(--color_bg_secondary);}
#case .box													{width:100%; max-width:1128px; margin:0 auto;}
#case .box ul li											{position:relative; width:100%; border-radius:var(--radius_l); border:1px solid var(--color_border_dark_primary); background:var(--color_pk_white)}
#case .box ul li:nth-of-type(n + 2)							{margin-top:24px;}
#case .box ul li .group										{display:flex; gap:24px; position:relative; overflow:hidden; max-height:320px; padding:48px 48px 48px; transition:all 1s ease-out;}
#case .box ul li .group .thumbnail							{display:grid; grid-template-columns:1fr; align-content:start;  gap:12px; min-width:312px;}
#case .box ul li .group .thumbnail img						{display:block; width:100%; max-width:312px;}
#case .box ul li .group hgroup								{flex-grow:1;}
#case .box ul li .group hgroup h5							{display:inline-block; border-radius:var(--radius_s); margin-right:2px; padding:5px 12px; color:var(--color_pk_white); font-size:var(--font_s); font-weight:bold; text-align:center; text-box-trim:trim-both;}
#case .box ul li .group hgroup h5.sinkyu					{background:#00677D;}
#case .box ul li .group hgroup h5.sikotsu					{background:#1664AE;}
#case .box ul li .group hgroup h5.salon						{background:#E95D9A;}
#case .box ul li .group hgroup h5.beauty					{background:#D24160;}
#case .box ul li .group hgroup h5.spa						{background:#56A419;}
#case .box ul li .group hgroup h4							{border-bottom:1px solid var(--color_border_dark_secondary); padding:12px 0; font-size:var(--font_l); font-weight:bold; text-box-trim:trim-both;}
#case .box ul li .group hgroup h4::after					{content:"様"; padding-left:12px; font-weight:normal;}
#case .box ul li .group hgroup h3							{margin-top:32px; font-size:var(--font_xl); font-weight:bold; text-box-trim:trim-both;}
#case .box ul li .group hgroup dl							{margin-top:24px;}
#case .box ul li .group hgroup dl dt						{margin-bottom:12px; color:var(--color_font_dark_secondary);}
#case .box ul li .group hgroup dl dt::before				{content:""; display:inline-block; width:32px; height:1px; margin-right:8px; background:var(--color_font_dark_secondary); transform:translateY(-5px);}
#case .box ul li .group hgroup dl dt:nth-of-type(n + 2)		{margin-top:32px;}
#case .box ul li .group hgroup dl dd span					{background:linear-gradient(transparent 50%,#ffff0075 50%);}
#case .box ul li button										{display:flex; justify-content:center; align-items:center; position:relative; width:100%; height:80px; padding:24px 0; box-shadow:0px -30px 10px -10px rgba(255, 255, 255, 0.8); border-radius:0 0 var(--radius_m) var(--radius_m); border-top:1px solid var(--color_border_dark_secondary); color:var(--color_pk_blue_62); font-weight:bold;}
#case .box ul li button::before								{display:block; content:"続きを読む";}
#case .box ul li button .icon_acc							{margin-left:4px;}
#case .box ul li button .icon_acc::before,
#case .box ul li button .icon_acc::after					{left:6px; width:12px; height:2px; background:var(--color_pk_blue_62);}
#case .box ul li.open .group								{max-height:800px;}
#case .box ul li.open button::before						{content:"閉じる";}
#case .box ul li.open button .icon_acc::after				{transform:rotate(180deg);}

/*--support--*/
#support								{background:linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), image-set(url(../img/support_bg.avif) 1x, url(../img/support_bg@2x.avif) 2x) center center / cover no-repeat;}
#support .box ul						{width:100%; max-width:936px; display:grid; grid-template-columns:1fr 1fr 1fr ; gap:24px; margin:48px auto 0;}
#support .box ul li						{display:grid; justify-items:center; align-content:flex-start; gap:12px; width:100%; padding:24px; border-radius:var(--radius_l); border:1px solid var(--color_border_dark_primary); background:var(--color_pk_white)}
#support .box ul li	img					{width:100%; max-width:120px;}
#support .box ul li h3					{width:100%; max-width:168px; padding:8px; border-radius:var(--radius_s); background:#56A419; color:var(--color_pk_white); font-size:var(--font_m); font-weight:bold; text-align:center; text-box-trim:trim-both;}
#support .box ul li h4					{font-size:var(--font_l); font-weight:bold; text-box-trim:trim-both;}

/*--faq--*/
#faq											{background:var(--color_bg_secondary);}
#faq ul											{margin-top:48px;}
#faq ul li										{max-width:740px; margin:0 auto;}
#faq ul li:nth-last-child(1)					{border-bottom:1px solid #e6e6e6;}
#faq ul li dl									{border:1px solid var(--color_border_dark_primary); background:var(--color_pk_white);}
#faq ul li:nth-of-type(n + 2) dl				{border-top:none;}
#faq ul li:nth-of-type(1) dl					{border-radius:var(--radius_l) var(--radius_l) 0 0;}
#faq ul li:nth-last-child(1) dl					{border-radius:0 0 var(--radius_l) var(--radius_l);}
#faq ul li dl dt								{display:flex; justify-content:space-between; padding:24px; font-weight:bold; font-size:16px; cursor:pointer;}
#faq ul li dl dt .q								{display:flex; justify-content:center; align-items:center; transform:translateY(1px); width:24px; height:24px; padding:0 12px; margin-right:8px; border-radius:4px; background:#15a3c2; color:#fff; font-size:14px; line-height:1;}
#faq ul li dl dt .title							{flex-grow:1; text-align:justify; padding-right:24px;}
#faq ul li dl dt .icon							{position:relative; height:24px; padding:0 12px;}
#faq ul li dl dt .icon::before,
#faq ul li dl dt .icon::after					{position:absolute; top:11px; left:4px; width:16px; height:2px; background:#333; content:""; transition:all 0.5s ease-out;}
#faq ul li dl dt .icon::after					{transform:rotate(-90deg);}
#faq ul li dl dt.active .icon::after			{transform:rotate(0deg);}
#faq ul li dl dd								{display:none; padding:0 72px 24px 54px; font-size:14px; text-align:justify;}

/*footer
--------------------------*/
footer p												{padding:24px; color:var(--color_font_dark_secondary); text-align:center;}


/*hover対応
--------------------------*/
@media (hover: hover) {
a.button:hover						{box-shadow:none; background:var(--color_pk_orange_50); transform:translateY(5px);}
header .inner_right button:hover	{box-shadow:none; background:#f5f5f5; transform:translateY(5px);}
#case .box ul li button:hover		{background:var(--color_pk_blue_opa_10);}
#faq ul li dl dt:hover				{background:var(--color_pk_blue_opa_10);}
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*Responsive[Tablet]
------------------------------------------------------------------------------*/
@media screen and (max-width:980px){

article								{padding:60px 24px; scroll-margin-top:88px;}
h2									{font-size:var(--font_3xl);}

header .outer						{padding:16px 12px 16px;}
header .inner_left					{flex-direction:column; align-items:flex-start; gap:4px;}
header .inner_left a img			{height:36px;}
header .inner_left p				{margin-left:4px; font-size:6px; line-height:1.4;}
header .inner_left p span			{display:block;}
header .inner_right					{gap:8px;}
header .inner_right a.button		{padding:2px 12px;}
article.top_slider h3				{font-size:var(--font_s);}

#top								{padding:160px 24px 148px;}
#top section						{flex-direction:column;}
#top section > img					{order:2;}
#top section .title					{order:1; width:100%; margin-top:-30px; align-items:center;}
#top section .title h2				{font-size:14px;}
#top section .title p				{font-size:16px;}
#top section .title h1				{margin-top:8px;}
#top section .title h1 img			{width:calc(100% - 24px); margin:0 auto;}

#campaign .box p					{text-align:left;}

#worries .box						{grid-template-columns:1fr 1fr; gap:24px 0px; grid-template-rows:auto auto auto;}

#feature h2							{transform:translateY(90px);}
#feature .box ul					{padding: 64px 32px 32px;}
#feature .box ul li					{flex-direction:column; align-items:center; gap:8px;}
#feature .box ul li > img			{order:2;}
#feature .box ul li hgroup			{order:1;}
#feature .box ul li hgroup > span	{top:0; font-size:70px;}

#choice .box						{flex-direction:column; align-items:center;}

#function .box						{grid-template-columns:1fr 1fr 1fr; grid-tempalate-rows:auto auto auto auto; gap:12px 8px;}
#function .box figure figcaption	{margin-top:4px;}

#flow .box ul						{grid-template-columns:1fr; gap:32px;}

#case .box ul li .group				{padding:24px 24px 32px;}
#case .box ul li .group .thumbnail	{grid-template-columns:1fr 1fr; gap:4px; width:100%; min-width:auto;}
#case .box ul li .group				{flex-direction:column;}
#case .box ul li .group				{max-height:600px;}
#case .box ul li.open .group		{max-height:1230px;}

#support .box ul					{grid-template-columns:1fr;}

#faq ul li dl dd					{padding:0 24px 24px;}




}