@charset "UTF-8";
:root {
  --color-default: #333333;
  --color-default-contrast: #fff;
  --color-hagukumiGreen: #3C9987;
  --color-hagukumiGreen-contrast: #fff;
  --color-hagukumiPaelGreen: #CFEFE1;
  --color-hagukumiPaelGreen-contrast: #333333;
  --color-hagukumiRed: #B9457D;
  --color-hagukumiRed-contrast: #fff;
  --color-hagukumiPaelPink: #F5EFEF;
  --color-hagukumiPalePink-contrast: #333333;
  --color-hagukumiPink: #FDD9E8;
  --color-hagukumiPink-contrast: #333333;
  --color-hagukumiGray: #F2F2F2;
  --color-hagukumiGray-contrast: #333333;
}
/*
 color: var(--color-secondary);
*/

#Branding,#Contents{
  font-family: 'Noto Sans JP', Meiryo, 'Osaka', sans-serif;
}
#Contents *{
	box-sizing:border-box;
}
#Branding{
	background-repeat:no-repeat;
	background-position:center top;
	background-size:cover;
	background-color:var(--color-hagukumiGreen);
	padding-bottom: 3rem;
}
#Branding img{
	max-width:1275px;
	width:100%;
	margin:auto;
}
#Branding .lead{
	color:#fff;
	font-weight:bold;
	line-height:1.6;
}
#Branding .lead h1{
	color:#fff;
	font-weight:bold;
	display:inline-block;
}
#Branding .lead strong{
	color:#fff;
}
#Branding .lead span{
	line-height:2;
}
#Branding .buttons{
	display:flex;
	justify-content:center;
	margin-top:1rem;
}
#Branding .buttons > * {
	position:relative;
	border-radius:5px;
	background:linear-gradient(150deg, rgb(255 255 255) 72%, rgb(203 234 221) 28%);
  box-shadow: #33333347 3px 3px 3px;
}
#Branding .buttons [class^="button-"] {
	background-size: 2rem;
	background-position:right 1rem center;
	background-repeat:no-repeat;
  padding: 1rem 2.5rem 1rem 1rem;
}
#Branding .buttons .button-dl{
	background-image:url(/solution/feature/hagukumi/lp/seat_management/images/icon_file2.svg);
}
#Branding .buttons .button-demo{
	background-image:url(/solution/feature/hagukumi/lp/seat_management/images/icon_monitor2.svg);
}
#Branding .buttons a{
	color:var(--color-hagukumiGreen);
	font-weight:bold;
	text-align:center;
	text-decoration:none;
}
#Branding .buttons a:hover{
	opacity:0.8;
}
#Contents h2,#Contents h3,#Contents h4,#Contents h5{
	font-weight:bold;
	color:var(--color-default);
}
#Contents h2{
	text-align:center;
	font-weight: bold;
	margin-bottom:2rem;
}
#Contents h3{
	border:inherit;
}
#Contents .container{
	border-radius:14px;
}
#Contents .wrapper{
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
	gap:2rem;
}
#Contents .ImgOnlyStyle{
	margin:1.5rem 0;
}
#Contents .ImgOnlyStyle img{
	width:100%;
}
#Contents .fullWide{
	position:relative;
	margin:inherit;
}
#Contents .fullWide *{
	z-index:2;
	position: relative;
}
#Contents .fullWide:after{
  content: "";
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
#Contents .caution{
	font-size:0.875rem;
	font-weight:inherit;
	color:inherit;
	margin-top:1rem;
  white-space:inherit;
}

/* 特長 */
#features{
	margin-top:0 !important;
}
#features h2 span{
	display:inline-block;
  top: 15px;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
	background-image:url(/solution/feature/hagukumi/lp/seat_management/images/num3.svg);
}
#features h3{
	color:var(--color-hagukumiRed);
}
#features .container{
	background-color:var(--color-hagukumiPaelPink);
}
#features ol{
	padding-left:0;
}
#features ol li{
	list-style-type:none;
	background-repeat:no-repeat;
}
#features ol li#f01{background-image:url(/solution/feature/hagukumi/lp/seat_management/images/num1.svg);}
#features ol li#f02{background-image:url(/solution/feature/hagukumi/lp/seat_management/images/num2.svg);}
#features ol li#f03{background-image:url(/solution/feature/hagukumi/lp/seat_management/images/num3.svg);}

/* 課題 */
#tasks.fullWide:after{
	background-color:var(--color-hagukumiGray);
}
#tasks .container{
	background:#fff;
}
#tasks h3{
	text-align:center;
	margin:1rem 0;
}
#tasks .container ul li{
	background-image:url(/solution/feature/hagukumi/lp/seat_management/images/icon_checkbox.svg);
	background-size:1.25rem;
	background-repeat:no-repeat;
	background-position:top 0.5rem left;
	padding-left:1.5rem;
	margin-bottom:1rem;
}
#tasks .container:before{
	content: "";
	display: inline-block;
	background-size: cover;
	position: absolute;
}
#tasks .container#t01:before{background-image:url(/solution/feature/hagukumi/lp/seat_management/images/t01.png);}
#tasks .container#t02:before{background-image:url(/solution/feature/hagukumi/lp/seat_management/images/t02.png);}
#tasks .container#t03:before{background-image:url(/solution/feature/hagukumi/lp/seat_management/images/t03.png);}
#tasks .container#t04:before{background-image:url(/solution/feature/hagukumi/lp/seat_management/images/t04.png);}

/* 解決 */
#solve.fullWide:after{
	background-color:var(--color-hagukumiGreen);
}
#solve h2{
	color:var(--color-hagukumiGreen-contrast);
}
#solve h2:before{
	content:url(/solution/feature/hagukumi/lp/seat_management/images/icon_light.svg);
	display:block;
	margin:auto;
}

#solve h3{
	padding-bottom:0.5rem;
	border-bottom:1px solid var(--color-default);
	line-height:1.3;
}
#solve h3 span{
	margin-top:0.5rem;
	display:block;
}
#solve .container{
	background:#fff;
	margin-bottom:1.5rem;
}
#solve .container:before{
	content:"●";
	color:var(--color-hagukumiGreen);
	position: absolute;
	left:1rem;
	top:1rem;
}
#solve .wrapper{
	flex-wrap:inherit;
}

/* お問い合わせ */
#Contents .contact.fullWide:after{
	background-color:var(--color-hagukumiPaelPink);
}
#Contents .contact ul{
	display:flex;
	justify-content:center;
	margin:auto;
	text-align:center;
}
#Contents .contact ul li{
	width:calc(100% / 2);
	max-width: 400px;
	position:relative;
}
#Contents .contact [class^="button"]:before{
	content: "";
	display: inline-block;
	background-size: cover;
	position: relative;
}

#Contents [class^="button"] a{
  display: block;
	font-weight:bold;
	background-color:var(--color-hagukumiRed);
	color:var(--color-hagukumiRed-contrast);
	text-decoration:none;
	border-radius:5px;
	box-shadow: #0000001f 3px 3px 3px;
}

#Contents [class^="button"].single a{
	max-width:400px;
	margin:auto;
}

#Contents [class^="button"].single a:hover{
	opacity:0.8;
}

#Contents .contact [class^="button"]:hover:before{
	position:relative;
	top:10px;
}
#Contents .contact .button1:before{
	background-image:url(/solution/feature/hagukumi/lp/seat_management/images/icon_file.svg);
	width: 65px;
	height: 70px;
	top: 18px;
}
#Contents .contact .button2:before{
	background-image:url(/solution/feature/hagukumi/lp/seat_management/images/icon_monitor.svg);
	width: 80px;
	height: 70px;
	top: 12px;
}
#Contents .contact h2{
	text-indent:-5rem;
	font-weight:inherit;
}
#Contents .contact h2 span{
	background-color:inherit;
	font-size: 2rem;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
	margin-right: 1rem;
	background-image:url(/solution/feature/hagukumi/lp/seat_management/images/fukidashi_mazuha.svg);
}

/* メリット */
#merit.fullWide:after{
	background-color:var(--color-hagukumiPaelPink);
}
#merit .container{
	background:#fff;
}
#merit h3{
	text-align:center;
	margin:1rem 0;
	color:var(--color-hagukumiRed);
}
#merit .container ul li{
	background-image:url(/solution/feature/hagukumi/lp/seat_management/images/icon_point.svg);
	background-size:1rem;
	background-repeat:no-repeat;
	background-position:top 0.1rem left;
	padding-left:1.5rem;
	padding-top: 0.2rem;
	margin-bottom:1rem;
}
#merit .container:before{
	content: "";
	display: inline-block;
	background-size: cover;
	position: absolute;
}
#merit .container#m01:before{background-image:url(/solution/feature/hagukumi/lp/seat_management/images/m01.png);}
#merit .container#m02:before{background-image:url(/solution/feature/hagukumi/lp/seat_management/images/m02.png);}
#merit .container#m03:before{background-image:url(/solution/feature/hagukumi/lp/seat_management/images/m03.png);}

/* 流れ */
#usage .container{
  position: relative;
	background-color:var(--color-hagukumiPaelGreen);
	border-radius:6px;
	display:flex;
	flex-direction:column;
}
#usage .container > *{
	padding:1rem 1.5rem;
	margin:inherit;
}
#usage .wrapper{
	margin-bottom:2rem;
	overflow:hidden;
}
#usage .container .txt{
	padding-bottom:4rem;
}
#usage .container .period{
	padding:0.5rem;
	background-color:var(--color-hagukumiGreen);
	color:var(--color-hagukumiGreen-contrast);
	border-radius: 0 0 6px 6px;
	font-size:1.25rem;
	font-weight:bold;
	text-align:center;
	position:absolute;
	width: 100%;
  bottom:0;
}
#usage .container .period span{
	font-size:1.5rem;
	margin:0 0.2rem;
}
#usage .container:nth-child(-n+3):after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 13px 0;
  border-color: var(--color-hagukumiGreen) transparent transparent;
}
#usage #customer {
  background: var(--color-hagukumiRed);
	color:var(--color-hagukumiRed-contrast);
	font-weight:bold;
	text-align:center;
  position: absolute;
  width: calc(300% + 4rem);
	padding:0.5rem;
}

/* プラン */
#plan > .container{
	background-color:var(--color-hagukumiPaelGreen);
}
#plan > .container .container{
	border-radius:6px;
	margin:auto;
	text-align:center;
}
#plan #p01{
	background-color:var(--color-hagukumiGreen);
	color:var(--color-hagukumiGreen-contrast);
	max-width:815px;
	position:relative;
	font-weight:bold;
}
#plan #p01 h3{
	color:inherit;
}
#plan #p01:after{
  content: "＋";
	font-weight:bold;
  position: absolute;
  color: var(--color-hagukumiGreen);
  bottom: -3rem;
}
#plan #p02{
	background-color:var(--color-hagukumiGray);
	max-width:500px;
	margin-top:5rem;
}

/* FAQ */
#faq.fullWide:after{
	background-color:var(--color-hagukumiGray);
}
#faq ul{
	border-radius: 14px;
  background-color: #fff;
  padding: 2rem;
	margin-bottom:1.5rem;
}
#faq ul li{
	background-repeat:no-repeat;
}
#faq li.q{
	background-image:url(/solution/feature/hagukumi/lp/seat_management/images/num_q.svg);
	font-weight:bold;
	color:var(--color-hagukumiRed);
	margin-bottom:1rem;
}
#faq li.a{
	background-image:url(/solution/feature/hagukumi/lp/seat_management/images/num_a.svg);
}
@media screen and (max-width: 1304px) {}
@media screen and (min-width: 995px) {
	/* 解決 */
	#Contents #solve .container {
		padding: 3rem 3rem 3rem 5rem;
	}
	#solve .wrapper > div{
		width:calc(100% - 400px);
	}
	#solve .wrapper > .ImgOnlyStyle{
		width:400px;
	}
	#solve .container:before{
		font-size:1.7rem;
	}
	#solve h2:before{
		width: 50px;
	}
	#solve h3 span{
		font-size:1.375rem;
	}
	/* メリット */
	#merit .container{
    display: flex;
    place-items: center;
    flex-direction: column;
		width: calc((100% - 4rem) / 3);
		margin-top:80px;
	}
	#merit .container:before{
		width: 160px;
		height: 160px;
		top: -80px;
	}
	/* 流れ */
	#Contents #usage .container{
		width: calc((100% - 6rem) / 4);
		padding:0;
	}
	#usage .wrapper{
    padding-bottom:4rem;
	}
	#usage .container:nth-child(-n+3):after {
		transform: rotate(270deg);
	  top: 45%;
		right: -30px;
	}
	#usage #customer {
	  bottom: -4rem;
	}
}
@media screen and (max-width: 994px) {
	/* 解決 */
  #Contents #solve .wrapper {
    flex-direction: column;
  }
	#solve .wrapper > div{
		margin-left:1.5rem;
	}
	#solve .wrapper{
		gap:inherit;
	}
	#solve .ImgOnlyStyle{
		max-width:600px;
		margin-left:auto;
		margin-right:auto;
	}
	#solve .container:before{
		font-size:1.2rem;
	}
	#solve h2 {
		letter-spacing: -1px;
	}
	#solve h2:before{
		width: 40px;
	}
	#solve h3 span{
		font-size:0.9375rem;
	}
	/* メリット */
  #Contents #merit .wrapper {
    flex-direction: column;
  }
	#merit .container{
    margin: 50px auto 0;
		display: grid;
    place-items: center;
		width: 100%;
    max-width: 700px;
	}
	#merit .container:before{
		width: 100px;
		height: 100px;
		top: -60px;
	}
	/* 流れ */
	#Contents #usage .container{
		padding:0;
	}
	#usage .wrapper{
		margin-bottom:2rem;
	}
	#usage .container:nth-child(1){
		width:100%;
	}
	#usage .container:nth-child(n+2){
		width:83%;
	}
	#usage .container:nth-child(-n+3):after {
	  bottom: -1.7rem;
		left:45%;
	}
	#usage #customer{
    right: -20%;
    width: 15%;
    height: calc(300% + 4rem);
		writing-mode: vertical-rl;
		display: flex;
    justify-content: center;
    align-items: center;
	}
}
@media screen and (min-width: 768px) {
	#Contents .section{
		margin:5rem 0;
	}
	#Contents .fullWide{
		padding:5rem 0;
	}
	#Branding,#Contents{
		font-size:1.125rem;
	}
	#Branding .lead h1,#Branding .lead strong{
		font-size:2.75rem;
	}
	#Branding .lead{
		font-size:1.25rem;
	}
	#Branding .lead span{
		font-size:2.125rem;
	}
	#Branding .buttons {
		gap: 20px;
	}
	#Branding .buttons > * {
		font-size:1.625rem;
		width:300px;
	}
	#Branding .buttons .button-dl{
		background-size: 2.5rem;
	}
	#Branding .buttons .button-demo{
		background-size: 3rem;
	}
	#Contents h2{
		font-size:2.25rem;
	}
	#Contents h3{
		font-size:1.75rem;
	}
	#Contents .container{
		padding:3rem;
	}
	#Contents [class^="button"] a{
		font-size:2rem;
		padding:2rem;
	}
	/* 特長 */
	#Contents #features .container {
		padding: 3rem 5rem 1rem 3rem;
	}
	#features h2 span{
		font-size: 6.25rem;
		margin-right: 1rem;
	}
	#features ol li{
		background-size:5.5rem;
		padding-left:9rem;
		margin-bottom:5rem;
	}
	/* 課題 */
	#tasks .container{
		width: calc((100% - 2rem) / 2);
		margin-top:80px;
	}
	#tasks .container:nth-child(odd):before{right:0;}
	#tasks .container:nth-child(even):before{left:0;}
	#tasks .container:before{
		width: 160px;
		height: 160px;
		top: -90px;
	}
	/* プラン */
	#plan #p01:after{
	  font-size:4rem;
	  text-indent:-2rem;
	}
	#plan #p01 h3{
		font-size:2rem;
	}
	#plan #p01 p{
		font-size:1.375rem;
	}
	#plan .lead{
		font-size:1.625rem;
		margin:2rem;
	}
	/* お問い合わせ */
	#Contents .contact ul{
		gap:2rem;
	}
	#Contents .contact h2 span{
		display:inline-block;
	  top: -2rem;
	  left: 2rem;
	}
	/* FAQ */
	#faq ul{
		font-size:1.25rem;
	}
	#faq ul li{
		padding-left:4rem;
		background-size:2.5rem;
	}
}
@media screen and (max-width: 767px) {
	#Contents .section{
		margin:2.5rem 0;
	}
	#Contents .fullWide{
		padding:2.5rem 0;
	}
	#Branding,#Contents{
		font-size:1rem;
	}
	#Branding .lead h1,#Branding .lead strong{
		font-size:1.5rem;
	}
	#Branding .lead{
		font-size:1rem;
	}
	#Branding .lead span{
		font-size:1.25rem;
	}
	#Branding .buttons {
		gap: 10px;
	}
	#Branding .buttons > *{
		font-size:1rem;
		width:47%;
	}
	#Branding .buttons [class^="button-"] {
		background-position:right 0.7rem center;
	}
	#Branding .buttons .button-dl{
		background-size: 1.5rem;
	}
	#Branding .buttons .button-demo{
		background-size: 2rem;
	}
	#Contents h2{
		font-size:1.25rem;
	}
	#Contents h3{
		font-size:1.125rem;
	}
	#Contents .container{
		padding:1.5rem;
	}
	#Contents .wrapper{
		flex-direction:column;
	}
	#Contents [class^="button"] a{
		font-size:1.25rem;
		padding:1rem 0.5rem;
	}
	/* 特長 */
	#features .container {
	  padding-left: 0.5rem !important;
	  padding-right: 1.1rem !important;
	}
	#features h2 span{
		font-size: 4.25rem;
		line-height: 0.7;
		margin-right: 0.5rem;
	}
	#features ol li{
		background-size:2.25rem;
		padding-left:3rem;
		margin-bottom:1.5rem;
	}
	/* 課題 */
	#tasks .container{
		margin-top:60px;
		display: grid;
    place-items: center;
	}
	#tasks .container:before{
		width: 100px;
		height: 100px;
		top: -60px;
	}
	/* プラン */
	#plan #p01:after{
	  font-size:3rem;
	  text-indent:-1.5rem;
	}
	#plan #p01 h3{
		font-size:1.25rem;
	}
	#plan .lead{
		font-size:1.25rem;
		margin:1rem;
	}
	/* お問い合わせ */
	#Contents .contact ul{
		gap:1rem;
	}
	/* FAQ */
	#faq ul li{
		padding-left:2.5rem;
		background-size:2rem;
	}
}
@media screen and (min-width: 580px) {
	#Branding{
		background-image:url(/solution/feature/hagukumi/lp/seat_management/images/branding_bg.png);
	}
}
@media screen and (max-width: 579px) {
	#Branding{
		background-image:url(/solution/feature/hagukumi/lp/seat_management/images/branding_bg_sp.png);
	}
}
@media screen and (max-width: 399px) {}