:root{
	--mainColor: #0469cd;
	--mainColor-pale: #1081f1;
	--mainColor-dark: #004589;
	--mainColor-crr: #035cb4;
	--subColor: #4297EB;
	--subColor-crr: #257FD8;
	--accentColor: #0ad091;
  --accentColor-dark: #07b47d;
	--accentColor-crr: #07b47d;
	
	--bg-gray: #f7f7f7;
	--bg-pale: #def9ff;
	--bg-pale2: #caf5ff;
	--bg-pale3: #dbfcfa;
	
	--fontColor: #14110f;
	--fontColor-off: #bcbcbb;
	--roboto: "Roboto", sans-serif;
	
	--border: #33cbef solid 4px;
	--shadow: 0 8px 12px rgba(0, 64, 107,0.2);
	--shadow2: 0 8px 12px rgba(0, 196, 187,0.2);
	--shadow3: 0 8px 12px rgba(0, 196, 187,0.08);
	--letter: 0.03em;
	
	--pcPadding: 80px;
	--spPadding: 15vw;
}
/*--------------------------------------------------
    style
=================================================*/

/* header */
nav .head_btnOther{
	background: var(--subColor);
}
nav .head_btnContact{
	background: var(--mainColor);
}
@media (min-width:481px){ /* for PC */
  h1 i {
    margin-bottom: 0.5em;
  }
	h1 a:hover,
	h1 a:focus{
		color: var(--mainColor);
		transition: all 0.3s ease;
	}
	nav .head_btnOther:hover,
	nav .head_btnOther:focus{
		background: var(--subColor-crr);
		transition: all 0.3s ease;
	}
	nav .head_btnContact:hover,
	nav .head_btnContact:focus{
		background: var(--mainColor-crr);
		transition: all 0.3s ease;
	}
}

/* mainVisual */
#mainVisual{
	display: block;
	width: 100%;
	height: 500px;
	background: var(--mainColor);
	position: relative;
}
#mainVisual .wideSec{
	display: grid;
	grid-template-columns: repeat(2,auto);
	grid-template-rows: 1fr auto auto 1fr;
	height: 100%;
}
#mainVisual .wideSec::before{
	content: "";
	display: block;
	width: 70%;
	max-width: 711px;
	height: 100%;
	background: var(--mainColor-pale);
	position: absolute;
	top: 0;
	right: -1px;
	clip-path: polygon(290px 0%, 100% 0, 100% 100%, 0% 100%);
}
#mainVisual .textWrap{
	grid-column: 1;
	grid-row: 2;
	color: #FFF;
	position: relative;
	z-index: 1;
}
#mainVisual .textWrap h2{
	font-size: 2.625rem;
	font-family: var(--roboto);
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.05em;
	margin-bottom: 16px;
}
#mainVisual .textWrap p{
	max-width: 360px;
	margin-bottom: 44px;
	letter-spacing: 0.08em;
	font-size: 1.125rem;
}
#mainVisual .contactBtn{
	grid-column: 1;
	grid-row: 3;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	max-width: 300px;
	padding: 8px;
	font-size: 1.25rem;
	font-weight: bold;
	color: #FFF;
	background: var(--accentColor);
	border-radius: 40px;
	box-shadow: var(--shadow);
	position: relative;
}
#mainVisual .contactBtn::before{
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	background: url("../images/seo/icon_mail.svg") no-repeat #FFF center center / 23px auto;
	border-radius: 50%;
}
#mainVisual .contactBtn span{
	display: block;
	width: calc(100% - 48px);
	padding-right: 20px;
	text-align: center;
}
#mainVisual .imgWrap{
	grid-column: 2;
	grid-row: 1/5;
	justify-self: end;
	align-self: center;
	position: relative;
	z-index: 1;
}
@media (min-width:481px){ /* for PC */
	#mainVisual::before{
		content: "";
		display: block;
		width: calc((100% - 1140px) / 2 + 10px);
		height: 100%;
		background: var(--mainColor-pale);
		position: absolute;
		top: 0;
		right: 0;
	}
	#mainVisual  .contactBtn{
		transition: all 0.3s ease;
	}
	#mainVisual .contactBtn:hover,
	#mainVisual .contactBtn:focus{
		background: var(--accentColor-crr);
		transition: all 0.3s ease;
	}
}
@media (max-width:480px){ /* for SP */
	#mainVisual{
		height: auto;
	}
	#mainVisual .wideSec{
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: repeat(3,auto);
		padding-top: 10vw;
		padding-bottom: 8vw;
		height: auto;
	}
	#mainVisual .wideSec::before{
		clip-path: polygon(30vw 0%, 100% 0, 100% 100%, 0% 100%);
	}
	#mainVisual .textWrap{
		grid-column: 1;
		grid-row: 1;
	}
	#mainVisual .textWrap h2{
		font-size: 2.125rem;
		text-align: center;
		margin-bottom: 2vw;
		line-height: 1.2;
	}
	#mainVisual .textWrap p{
		max-width: 29em;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0;
		font-size: 0.875rem;
	}
	#mainVisual .contactBtn{
		grid-column: 1;
		grid-row: 3;
		justify-self: center;
		max-width: 70vw;
		margin-top: 5vw;
		font-size: 1.125rem;
	}
	#mainVisual .contactBtn::before{
		width: 10vw;
		height: 10vw;
		background-size: 4vw auto;
	}
	#mainVisual .contactBtn span{
		width: calc(100% - 10vw);
		padding-right: 5vw;
	}
	#mainVisual .imgWrap{
		grid-column: 1;
		grid-row: 2;
		justify-self: center;
		align-self: start;
		padding-top: 0;
		margin-top: -4vw;
	}
	#mainVisual .imgWrap::after{
		width: 16vw;
		height: 16vw;
		top: 2vw;
		right: 0;
	}
	#mainVisual .imgWrap img{
		max-width: 84vw;
	}
}

/* Simple Analyticsとは */
#about{
	padding-top: var(--pcPadding);
	padding-bottom: var(--pcPadding);
}
#about .bigTitle{
	margin-bottom: 32px;
}
#about .topRead{
	margin-bottom: 48px;
}
#about .wideSec{
	display: grid;
  justify-content: center;
	grid-template-columns: repeat(3,calc((100% - 120px) / 4));
	grid-template-rows: repeat(auto-fill, minmax(1em, 1fr));
	gap: 35px 40px;
}
.aboutParts{
	grid-row: span 2;
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	gap: 16px;
	width: calc((100% - 120px) / 4);
	text-align: center;
}
.aboutParts .figure{
	width: 100%;
	height: 150px;
	background: var(--bg-gray);
}
.aboutParts .caption{
	font-size: 1em;
	line-height: 1.5;
}
@media (min-width:481px){ /* for PC */
}
@media (max-width:480px){ /* for SP */
	#about{
		padding: var(--spPadding) 5vw;
	}
	#about .bigTitle{
		margin-bottom: 5vw;
	}
	#about .topRead{
		margin-bottom: 8vw;
	}
	#about .wideSec{
		grid-template-columns: repeat(2,1fr);
		gap: 5vw 3vw;
	}
	.aboutParts{
		gap: 2vw;
		width: calc((100% - 3vw) / 2);
	}
	.aboutParts .figure{
		height: 30vw;
		display: grid;
		place-content: center;
	}
	.aboutParts .caption{
		font-size: 0.8125rem;
	}
}

/* こんな悩みにおすすめです */
#osusume{
	padding-top: 40px;
	padding-bottom: 40px;
	background: var(--bg-pale);
	position: relative;
}
#osusume::after{
	content: "";
	display: block;
	width: 118px;
	height: 119px;
	background: url("../images/seo/p1.png") no-repeat center bottom / 118px auto;
	position: absolute;
	left: calc(50% - 560px);
	bottom: 0;
}
#osusume .middleSec{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 2.5em;
	padding: 25px 35px;
	color: #FFF;
	background: var(--mainColor);
	border-radius: 15px;
	box-shadow: var(--shadow3);
  max-width: 920px;
}
#osusume h3{
	font-size: 1.25rem;
	font-weight: bold;
}
#osusume li{
	padding-left: 12px;
	line-height: 1.3;
	font-size: 1.125rem;
	max-width: 30em;
	background: url("../images/seo/arrow-white.svg") no-repeat left top 0.42em / 6px auto;
}
#osusume li:not(:last-child){
	margin-bottom: 12px;
}
@media (min-width:481px){ /* for PC */
  #osusume ul{
    max-width: 510px;
  }
}
@media (max-width:480px){ /* for SP */
	#osusume{
		padding: 6vw 8vw;
	}
	#osusume::after{
		width: 15vw;
		height: 16vw;
		background-size: 16vw auto;
		background-position: right bottom;
		left: 0;
	}
	#osusume .middleSec{
		display: block;
		padding: 6vw 8vw 8vw 8vw;
		border-radius: 8px;
	}
	#osusume h3{
		font-size: 1rem;
		margin-bottom: 2vw;
	}
	#osusume li{
		font-size: 0.875rem;
		background-size: 5px auto;
		background-position: left top 0.55em;
		line-height: 1.6;
	}
	#osusume li:not(:last-child){
		margin-bottom: 1.5vw;
	}
}

/* 設置例 */
#viewdemo {
  padding-top: var(--pcPadding);
	padding-bottom: 64px;
  background: #fff;
  box-shadow: var(--shadow3);
}
#viewdemo .bigTitle{
	margin-bottom: 32px;
}
#viewdemo .demoAll li h3{
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mainColor);
  margin-bottom: 0.5em;
}
#viewdemo .demoAll li .lead {
  font-size: 0.875rem;
  line-height: 1.5;
}
#viewdemo .demoAll figure {
  display: block;
  border: #DDD solid 1px;
  margin-bottom: 1em;
}
#viewdemo .demoLink {
  margin-top: 1.5em;
}
#viewdemo .demoLink a{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  width: 98%;
  line-height: 1.2;
  padding: 0.3em ;
  margin: 0 auto;
  font-size: 1rem;
  font-weight: 600;
  color: #FFF;
  background: var(--accentColor);
  border-radius: 50px;
  box-shadow: var(--shadow2);
  position: relative;
}
#viewdemo .demoLink a::after {
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  background: url(../images/calendar/arrow-white.svg) no-repeat var(--accentColor-dark) center center / 8px auto;
  border-radius: 50%;
}
#viewdemo .demoLink span {
  display: block;
  padding-left: 2em;
  width: calc(100% - 42px);
  text-align: center;
}
@media (min-width:481px){ /* for PC */
  #viewdemo .demoAll {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4em 3em;
  }
  #viewdemo .demoAll li {
    width: calc((100% - 3em) / 2);
  }
  #viewdemo .demoLink a {
    transition: all 0.3s ease;
  }  
  #viewdemo .demoLink a:hover{
    background: var(--accentColor-crr);
  }
}
@media (max-width:480px){ /* for SP */
  #viewdemo {
    padding: var(--spPadding) 5vw 5vw 5vw;
		padding-bottom: 12vw;
  }
  #viewdemo .bigTitle {
    margin-bottom: 5vw;
  }
  #viewdemo .demoAll li + li {
    margin-top: 10vw;
  }
}


/* 解析できること */
#canDo{
	padding-top: var(--pcPadding);
	padding-bottom: var(--pcPadding);
}
#canDo h2{
	margin-bottom: 40px;
}
.canParts{
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr auto auto 1fr;
	gap: 0 24px;
	width: 100%;
}
.canParts:not(:last-child){
	margin-bottom: 20px;
}
.canParts figure{
	grid-column: 1;
	grid-row: 1 / 5;
	align-self: start;
	width: 272px;
	min-height: 153px;
	background: var(--bg-gray);
}
.canParts h3{
	grid-column: 2;
	grid-row: 2;
	margin-bottom: 8px;
	font-size: 1.125rem;
	font-weight: bold;
	line-height: 1.2;
	color: var(--mainColor);
}
.canParts p{
	grid-column: 2;
	grid-row: 3;
	font-size: 0.875rem;
	line-height: 1.5;
}
.canParts .can_listLine{
	grid-column: 2;
	grid-row: 4;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 0 10px;
	margin-top: 20px;
	padding: 12px 16px;
	font-size: 0.75rem;
	line-height: 1.3;
	border: #DDD solid 1px;
	background: var(--bg-gray);
	border-radius: 5px;
}
.canParts .can_listLine h4{
	padding-left: 16px;
	margin-bottom: 6px;
	font-weight: bold;
	font-size: 0.8125rem;
	background: url("../images/seo/check.svg") no-repeat left top 0.35em / 10px auto;
}
.canParts .can_listLine ul{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: repeat(3,auto);
	gap: 4px 2.5em;
}
.canParts .can_listLine ul li{
	padding-left: 12px;
	background: url("../images/seo/arrow-gray.svg") no-repeat left top 0.35em / 6px auto;
}
.canParts:has(.can_listLine){
	grid-template-rows: 1fr auto auto auto 1fr;
}
.canParts:has(.can_listLine) figure{
	grid-column: 1;
	grid-row: 1 / 6;
	display: grid;
	place-content: center;
	height: 100%;
}
.aboutTitle {
  font-weight: 600;
  margin: 2em 0 1em 0;
  font-size: 1.25rem;
  color: var(--mainColor);
}

@media (min-width:481px){ /* for PC */
  .canParts .itemBox {
    padding: 15px 20px;
    margin: 15px 0;
  }
}
@media (max-width:480px){ /* for SP */
	#canDo{
		padding: var(--spPadding) 5vw;
	}
	#canDo h2{
		margin-bottom: 8vw;
	}
	.canParts{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3,auto);
		gap: 0;
	}
	.canParts:not(:last-child){
		margin-bottom: 8vw;
	}
	.canParts figure{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		place-content: center;
		justify-self: center;
		align-self: center;
		width: 100%;
		min-height: 40vw;
		margin-bottom: 4vw;
	}
	.canParts h3{
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 2vw;
	}
	.canParts p{
		grid-column: 1;
		grid-row: 3;
		line-height: 1.8;
	}
  .canParts .itemBox {
    padding: 3vw 4vw;
    margin: 4vw 0 0 0;
  }
	.canParts .can_listLine{
		grid-column: 1;
		grid-row: 4;
		display: block;
		margin-top: 5vw;
		padding: 4vw;
	}
	.canParts .can_listLine h4{
		margin-bottom: 2vw;
	}
	.canParts .can_listLine ul{
		display: block;
	}
	.canParts .can_listLine ul li:not(:last-child){
		margin-bottom: 1vw;
	}
	.canParts:has(.can_listLine){
		display: block;
	}
	.canParts:has(.can_listLine) figure{
		grid-column: 1;
		grid-row: 1;
		height: 40vw;
	}
}

/* 料金 */
#price{
	padding-top: var(--pcPadding);
	padding-bottom: 120px;
}
#price .bigTitle{
	margin-bottom: 30px;
}
#price .moreBtn{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	max-width: 320px;
	padding: 16px;
	margin: 0 auto;
	font-size: 1.25rem;
	font-weight: bold;
	color: #FFF;
	background: var(--accentColor);
	border-radius: 40px;
	box-shadow: var(--shadow2);
	position: relative;
}
#price .moreBtn::after{
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	background: url("../images/calendar/arrow-white.svg") no-repeat var(--accentColor-dark) center center / 10px auto;
	border-radius: 50%;
}
#price .moreBtn span{
	display: block;
	width: calc(100% - 48px);
	padding-left: 40px;
	text-align: center;
}
.priceParts{
	grid-row: span 3;
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	gap: 16px;
  margin: 2em auto;
}
.priceParts h3{
	justify-self: center;
	display: block;
	width: 100%;
	max-width: 296px;
	padding: 2px;
	font-weight: bold;
	font-size: 1.125rem;
	text-align: center;
	color: var(--mainColor);
	background: var(--bg-pale2);
}
.priceParts .price{
	display: flex;
	justify-content: center;
	align-items: center;
}
.priceParts .price i{
	display: block;
	text-align: center;
	width: 100%;
	max-width: 9em;
	margin-right: 12px;
	padding-top: 2px;
	padding-bottom: 2px;
	border: #dddddd solid 2px;
	border-radius: 3px;
	color: #666666;
	font-size: 0.75rem;
	line-height: 1.3;
}
.priceParts .price span{
	font-weight: bold;
	font-size: 3rem;
	font-family: var(--roboto);
	line-height: 1;
}
.priceParts .price span span{
	font-size: 1.6875rem;
	margin-left: 4px;
}
.priceParts .price small{
	margin-left: 4px;
	padding-top: 0.9em;
	font-weight: bold;
	font-size: 1em;
}
.priceParts .captionText{
	display: block;
	margin-top: 8px;
	padding: 14px 1.5em 20px 1.5em;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	background: var(--bg-pale);
}

@media (min-width:481px){ /* for PC */
  #price .moreBtn{
		transition: all 0.3s ease;
	}
	#price .moreBtn:hover,
	#price .moreBtn:focus{
		background-color: var(--accentColor-crr);
		transition: all 0.3s ease;
	}
  .priceParts{
    width: 80%;
  }
}
@media (max-width:480px){ /* for SP */
	#price{
		padding: var(--spPadding) 5vw;
	}
	#price .bigTitle{
		margin-bottom: 8vw;
	}
	#price .middleSec{
		display: block;
	}
	#price .middleSec::after{
		width: 14vw;
		height: 28vw;
		right: -5vw;
		bottom: -12vw;
	}
  #price .moreBtn{
		width: 100%;
		max-width: none;
		padding: 8px;
		font-size: 1.125rem;
	}
	#price .moreBtn::after{
		width: 10vw;
		height: 10vw;
		background-size: 8px auto;
	}
	#price .moreBtn span{
		width: calc(100% - 10vw);
		padding-left: 10vw;
	}
	.priceParts:not(:last-child){
		margin-bottom: 5vw;
	}
	.priceParts{
		display: block;
		width: 100%;
		padding-top: 5vw;
		border-radius: 8px;
	}
	.priceParts h3{
		max-width: 74vw;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 4vw;
		font-size: 1.0625rem;
	}
	.priceParts .price i{
		margin-right: 1em;
	}
	.priceParts .price span{
		font-size: 2.125rem;
	}
	.priceParts .price span span{
		font-size: 1.25rem;
		margin-left: 0.2em;
	}
	.priceParts .price small{
		margin-left: 0.5em;
		padding-top: 1em;
		font-size: 0.625rem;
	}
	.priceParts .captionText{
		margin-top: 5vw;
		padding: 3vw 3vw 4vw 3vw;
		font-size: 0.8125rem;
		line-height: 1.8;
	}
}

/* 比較表 */
#hikaku{
	padding-top: var(--pcPadding);
	padding-bottom: var(--pcPadding);
	background: var(--bg-pale);
}
#hikaku .plz__wait {
  margin: 2em 0;
  text-align: center;
  color: #4B767F;
  letter-spacing: 0.05em;
  text-indent: 0.05em;
}
#hikaku .bigTitle{
	margin-bottom: 48px;
}
#hikaku .middleSec{
	position: relative;
}
#hikaku .middleSec::after{
	content: "";
	display: block;
	width: 85px;
	height: 191px;
	background: url("../images/seo/p2.png") no-repeat center center / contain;
	position: absolute;
	right: -103px;
	bottom: -124px;
}
#hikaku table{
	width: 100%;
	box-shadow: var(--shadow4);
	margin-bottom: 8px;
}
#hikaku table th,
#hikaku table td{
	padding: 10px 16px;
	vertical-align: middle;
	line-height: 1.3;
}
#hikaku table thead th{
	border-bottom: #CCC solid 1px;
}
#hikaku table thead td{
	width: 320px;
	font-weight: bold;
	border-bottom: #CCC solid 1px;
	color: #FFF;
}
#hikaku table thead td small{
	display: block;
	font-size: 0.875rem;
}
#hikaku table thead td span{
	display: block;
	font-size: 1.25rem;
}
#hikaku table thead td:nth-child(3) small {
  font-size: 1rem;
}
#hikaku table thead td:nth-child(3) span {
  font-size: 1.5rem;
}
#hikaku table tbody td:nth-child(3) {
  font-size: 1.125rem;
}
#hikaku table thead td i{
	display: inline-block;
	font-size: 0.875rem;
	line-height: 1;
	color: #FFF;
	padding: 4px 6px;
	border-radius: 4px;
	margin-left: 8px;
	margin-bottom: 3px;
	background: #ee7280;
}
#hikaku table tbody td strong{
  color: var(--ColorRed);
}
#hikaku .footCaption{
	display: block;
	text-align: right;
	font-size: 0.75rem;
	margin-bottom: 32px;
}
#hikaku .footRead{
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 1.25rem;
	margin-bottom: 24px;
}
#hikaku .footBtnList{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap: 24px;
}
#hikaku .moreBtn{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	max-width: 320px;
	padding: 16px;
	font-size: 1.25rem;
	font-weight: bold;
	color: #FFF;
	background: var(--accentColor);
	border-radius: 40px;
	box-shadow: var(--shadow2);
	position: relative;
}
#hikaku .moreBtn::after{
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	background: url("../images/seo/arrow-white.svg") no-repeat var(--accentColor-dark) center center / 10px auto;
	border-radius: 50%;
}
#hikaku .moreBtn#downloadKey{
	background: #F1C409;
}
#hikaku .moreBtn#downloadKey::after{
	background-color: #E7A808;
}
#hikaku .moreBtn span{
	display: block;
	width: calc(100% - 48px);
	padding-left: 1.8em;
	text-align: center;
}
#hikaku .moreBtn#downloadKey span{
	padding-left: 0.8em;
}
#hikaku .moreBtn#downloadKey span{
	padding-left: 0.8em;
}
#hikaku .attentionBox {
  background: rgba(255,255,255,0.9);
  padding: 2em 3em;
  border-radius: 15px;
  margin-top: 2em;
}
#hikaku .attentionBox .attTitle{
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.7em;
}
#hikaku .attentionBox ul{
  font-size: .875rem;
}
#hikaku .attentionBox ul li {
  line-height: 1.3;
  position: relative;
  padding-left: 1.2em;
  color: var(--ColorRed);
}
#hikaku .attentionBox ul li::before {
  content: '※';
  position: absolute;
  left: 0;
  top: 0;
}
#hikaku .attentionBox ul li + li{
  margin-top: 0.8em;
}
@media (min-width:481px){ /* for PC */
	#hikaku table thead td:nth-child(3){
		border-top: var(--mainColor) solid 30px;
		border-left: var(--mainColor) solid 4px;
		border-right: var(--mainColor) solid 4px;
		border-bottom: var(--mainColor) solid 1px;
		background: var(--mainColor);
		padding-top: 0;
    padding-bottom: 26px
	}
	#hikaku table thead td:nth-child(2){
		background: var(--accentColor);
		border-right: var(--accentColor) solid 1px;
		border-bottom: var(--accentColor) solid 1px;
	}
	#hikaku table tbody th{
		font-weight: normal;
		border-left: #CCC solid 1px;
		border-bottom: #CCC solid 1px;
		background: #f4f4f4;
	}
	#hikaku table tbody td{
		background: #FFF;
		border-right: #CCC solid 1px;
		border-bottom: #CCC solid 1px;
		text-align: center;
	}
	#hikaku table tbody td:nth-child(3){
		border-left: var(--border);
		border-right: var(--border);
	}
	#hikaku table tbody tr:last-child td:nth-child(3){
		border-bottom: var(--border);
	}
	#hikaku table td{
		text-align: center;
	}
	#hikaku .moreBtn{
		transition: all 0.3s ease;
	}
	#hikaku .moreBtn:hover,
	#hikaku .moreBtn:focus{
		background-color: var(--accentColor-crr);
		transition: all 0.3s ease;
	}
	#hikaku .moreBtn#downloadKey{
		transition: all 0.3s ease;
	}
	#hikaku .moreBtn#downloadKey:hover,
	#hikaku .moreBtn#downloadKey:focus{
		background: #b56e10;
		transition: all 0.3s ease;
	}
	#hikaku .moreBtn#downloadKey:hover::after,
	#hikaku .moreBtn#downloadKey:focus::after{
		background-color: #8a5006;
		transition: all 0.3s ease;
	}
}
@media (max-width:480px){ /* for SP */
	#hikaku{
		padding: var(--spPadding) 5vw;
	}
	#hikaku .bigTitle{
		margin-bottom: 8vw;
	}
	#hikaku .middleSec{
		display: block;
	}
	#hikaku .middleSec::after{
		width: 14vw;
		height: 28vw;
		right: -5vw;
		bottom: -22vw;
	}
	#hikaku table,
	#hikaku table thead,
	#hikaku table tbody,
	#hikaku table tr,
	#hikaku table th,
	#hikaku table td{
		display: block;
	}
	#hikaku table tr{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
	}
	#hikaku table tbody{
		border-left: #CCC solid 1px;
		border-right: #CCC solid 1px;
		border-bottom: #CCC solid 1px;
	}
	#hikaku table thead th{
		display: none;
	}
	#hikaku table tbody th{
		width: 100%;
		font-weight: normal;
		font-size: 0.8125rem;
		background: #f4f4f4;
		text-align: center;
		padding: 2vw 0;
	}
	#hikaku table thead td,
	#hikaku table tbody td{
		width: 50%;
		text-align: center;
	}
	#hikaku table thead td{
		border-radius: 8px 8px 0 0;
	}
	#hikaku table thead td:nth-child(3){
		background: var(--mainColor);
	}
	#hikaku table thead td:nth-child(2){
		background: var(--accentColor);
	}
	#hikaku table tbody td{
		font-size: 0.9375rem;
		background: #FFF;
	}
	#hikaku .footRead{
		margin-bottom: 5vw;
	}
	#hikaku .footBtnList{
		gap: 3vw;
	}
	#hikaku .moreBtn{
		width: calc(100% - 20vw);
		max-width: none;
		padding: 8px;
		font-size: 1.125rem;
	}
	#hikaku .moreBtn::after{
		width: 10vw;
		height: 10vw;
		background-size: 8px auto;
	}
	#hikaku .moreBtn span{
		width: calc(100% - 10vw);
		padding-left: 10vw;
	}
}

/* 導入について */
#howTo{
	padding-top: var(--pcPadding);
	padding-bottom: 120px;
}
#howTo .bigTitle{
	margin-bottom: 16px;
}
#howTo .topRead{
	margin-bottom: 40px;
}
#howTo .moreBtn{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	max-width: 320px;
	padding: 16px;
	margin: 0 auto;
	font-size: 1.25rem;
	font-weight: bold;
	color: #FFF;
	background: var(--accentColor);
	border-radius: 40px;
	box-shadow: var(--shadow2);
	position: relative;
}
#howTo .moreBtn::after{
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	background: url("../images/seo/arrow-white.svg") no-repeat var(--accentColor-dark) center center / 10px auto;
	border-radius: 50%;
}
#howTo .moreBtn span{
	display: block;
	width: calc(100% - 48px);
	padding-left: 40px;
	text-align: center;
}
@media (min-width:481px){ /* for PC */
	#howTo .moreBtn{
		transition: all 0.3s ease;
	}
	#howTo .moreBtn:hover,
	#howTo .moreBtn:focus{
		background-color: var(--accentColor-crr);
		transition: all 0.3s ease;
	}
}
@media (max-width:480px){ /* for SP */
	#howTo{
		padding: var(--spPadding) 5vw var(--spPadding) 5vw;
	}
	#howTo .bigTitle{
		margin-bottom: 5vw;
	}
	#howTo .topRead{
		margin-bottom: 8vw;
	}
	#howTo .moreBtn{
		width: 100%;
		max-width: none;
		padding: 8px;
		font-size: 1.125rem;
	}
	#howTo .moreBtn::after{
		width: 10vw;
		height: 10vw;
		background-size: 8px auto;
	}
	#howTo .moreBtn span{
		width: calc(100% - 10vw);
		padding-left: 10vw;
	}
}

/* 実績 */
#result{
	padding-bottom: var(--pcPadding);
}
#result .bigTitle{
	margin-bottom: 16px;
}
#result ul{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
}
#result ul a{
	display: block;
	width: 152px;
	height: 52px;
	background: var(--bg-gray);
}
@media (min-width:481px){ /* for PC */
}
@media (max-width:480px){ /* for SP */
	#result{
		padding: 3vw 5vw var(--spPadding) 5vw;
	}
	#result .bigTitle{
		margin-bottom: 5vw;
	}
	#result ul{
		gap: 3vw;
	}
	#result ul li{
		width: calc((100% - 3vw) / 3);
	}
	#result ul a{
		width: 100%;
		height: 52px;
	}
}

/* よくあるご質問 */
#qa{
	padding-top: var(--pcPadding);
	padding-bottom: var(--pcPadding);
	background: var(--mainColor);
}
#qa .middleSec::after{
	content: "";
	display: block;
	width: 97px;
	height: 119px;
	background: url("../images/seo/p3.png") no-repeat center bottom / 97px auto;
	position: absolute;
	left: -117px;
	bottom: -80px;
}
#qa .bigTitle{
	color: #FFF;
	margin-bottom: 40px;
}
.qaParts:not(:last-child){
	margin-bottom: 13px;
}
.qaParts{
	display: block;
	width: 100%;
	background: #FFF;
	border-radius: 10px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
.qaParts summary{
	padding: 15px 50px 15px 70px;
	font-weight: bold;
	font-size: 1.125rem;
	position: relative;
	cursor: pointer;
}
.qaParts summary::marker,
.qaParts summary::-webkit-details-marker {	
	content: none;
	display: none;
}
.qaParts summary::before{
	content: "Q";
	width: 36px;
	height: 36px;
	color: var(--mainColor);
	text-align: center;
	font-size: 1.125rem;
	background: var(--bg-pale2);
	border-radius: 50%;
	position: absolute;
	top: 13px;
	left: 18px;
	box-sizing: border-box;
}
.qaParts summary::after{
	content: "";
	width: 36px;
	height: 36px;
	text-align: center;
	background: url("../images/seo/arrow.svg") no-repeat center center / 12px auto;
	position: absolute;
	top: 13px;
	right: 10px;
	transition: all 0.3s ease;
}
.qaParts:not([open]) summary::after{
	transform: rotate(180deg);
	transition: all 0.3s ease;
}
.qaParts div{
	padding: 4px 70px 25px 70px;
	font-size: 0.9375rem;
	line-height: 1.6;
	position: relative;
}
.qaParts div::before{
	content: "A";
	width: 36px;
	height: 36px;
	padding-top: 6px;
	color: var(--mainColor);
	font-weight: bold;
	text-align: center;
	font-size: 1.125rem;
	background: var(--bg-pale3);
	border-radius: 50%;
	line-height: 1;
	position: absolute;
	top: 0;
	left: 18px;
	box-sizing: border-box;
}
#qa .aboutManual{
  color: #fff;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2.5em 0 1em 0
}
#qa .moreBtn{
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	max-width: 320px;
	padding: 16px;
	font-size: 1.25rem;
	font-weight: bold;
	color: #FFF;
	background: var(--accentColor);
	border-radius: 40px;
	box-shadow: var(--shadow2);
	position: relative;
  margin: 0 auto;
}
#qa .moreBtn::after{
	content: "";
	display: block;
	width: 48px;
	height: 48px;
	background: url("../images/seo/arrow-white.svg") no-repeat var(--accentColor-dark) center center / 10px auto;
	border-radius: 50%;
}
#qa .moreBtn span {
  display: block;
  padding-left: 2em;
  width: calc(100% - 48px);
  text-align: center;
}
@media (min-width:481px){ /* for PC */
	.qaParts summary{
		transition: all 0.3s ease;
	}
	.qaParts summary:hover,
	.qaParts summary:focus{
		color: var(--mainColor);
		transition: all 0.3s ease;
	}
  #qa .moreBtn{
		transition: all 0.3s ease;
	}
	#qa .moreBtn:hover,
	#qa .moreBtn:focus{
		background-color: var(--accentColor-crr);
		transition: all 0.3s ease;
	}
}
@media (max-width:480px){ /* for SP */
	#qa{
		padding: var(--spPadding) 5vw;
	}
	#qa .middleSec::after{
		width: 17vw;
		height: 21vw;
		background-size: contain;
		left: -5vw;
		bottom: -15vw;
	}
	#qa .bigTitle{
		margin-bottom: 8vw;
	}
	.qaParts:not(:last-child){
		margin-bottom: 3vw;
	}
	.qaParts{
		border-radius: 8px;
	}
	.qaParts summary{
		padding: 4vw 12vw 4vw 15vw;
		font-size: 1.0625rem;
		line-height: 1.5;
	}
	.qaParts summary::before{
		width: 8vw;
		height: 8vw;
		padding-top: 0.5vw;
		top: 3vw;
		left: 4vw;
	}
	.qaParts summary::after{
		width: 8vw;
		height: 8vw;
		top: 3vw;
		right: 3vw;
	}
	.qaParts div{
		padding: 0 12vw 7vw 15vw;
		font-size: 0.875rem;
		line-height: 2;
	}
	.qaParts div::before{
		width: 8vw;
		height: 8vw;
		padding-top: 1.5vw;
		top: 0;
		left: 4vw;
	}
  #qa .moreBtn{
		width: calc(100% - 20vw);
		max-width: none;
		padding: 8px;
		font-size: 1.125rem;
	}
	#qa .moreBtn::after{
		width: 10vw;
		height: 10vw;
		background-size: 8px auto;
	}
	#qa .moreBtn span{
		width: calc(100% - 10vw);
		padding-left: 10vw;
	}
}
/* 更新履歴 */
.BtnHistory {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.BtnHistory a {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  padding: 0.7em 3em 0.7em 2em;
  box-shadow: var(--shadow2);
  border-radius: 30px;
  position: relative;
  min-width: 200px;
  text-align: center;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 0.9375rem
}
.BtnHistory a::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: url(../images/seo/arrow.svg) no-repeat center center / 0.8em 0.8em;
  transform: rotate(90deg);
  position: absolute;
  right: 1em;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
.historyList h2{
  font-weight: 700;
  font-size: 1.5rem;
  padding-bottom: 0.3em;
  margin-bottom: 0.2em;
  border-bottom: var(--mainColor) solid 2px;
}
.historyList .historyItem {
  border-bottom: #ddd solid 1px;
}
.historyList .historyItem .date {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  margin-bottom: 0.2em;
}
.historyList .historyItem .date time{
  font-size: .875rem;
  color:#333;
}
.historyList .historyItem .date h3 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
}
.historyList .backBtn{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.historyList .backBtn a {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  padding: 0.7em 2em 0.7em 3em;
  box-shadow: 0 5px 12px rgba(0, 0, 0,0.1);
  border-radius: 30px;
  position: relative;
  min-width: 200px;
  text-align: center;
  transition: all 0.3s ease;
}
.historyList .backBtn a::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: url(../images/seo/arrow.svg) no-repeat center center / 0.8em 0.8em;
  transform: rotate(-90deg);
  position: absolute;
  left: 1em;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
@media (min-width:481px){ /* for PC */
  .BtnHistory {
    margin-top: 40px;
  }
  .BtnHistory a:hover {
    background: var(--bg-gray);
  }
  .historyList {
    padding-top: 50px;
    padding-bottom: 150px;
    min-height: 58vh;
  }
  .historyList .historyItem {
    padding: 1.8em 1em;
  }
  .historyList .historyItem .date {
    align-items: center;
  }
  .historyList .backBtn {
    margin-top: 40px;
  }
  .historyList .backBtn a:hover {
    background: var(--bg-gray);
  }
}
@media (max-width:480px){ /* for SP */
  .BtnHistory {
    margin-top: 8vw;
  }
  .historyList {
    padding: 10vw 5vw 20vw 5vw;
  }
  .historyList .historyItem {
    padding: 1.5em 0;
  }
  .historyList .backBtn {
    margin-top: 8vw;
  }
}


/* 用語の見た目 */
.term {
  cursor: pointer;
  text-decoration: underline;
  position: relative;
  padding-right: 1.5em;
  display: inline-block;
}
.term::after{
  content: '?';
  font-size: 0.6875rem;
  width: 0.875rem;
  height: 0.875rem;
  line-height: 1.2;
  background: var(--bg-pale);
  color: var(--mainColor); 
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  position: absolute;
  right: 0.5em;
  top: 0.1em;
  font-weight: 600;
}

/* モーダル全体 */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}

.modal.is-active {
  display: block;
}

/* 背景 */
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* モーダル本体 */
.modal__content {
  position: absolute;
  background: #fff;
  width: 90%;
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 8px;
  padding: 2rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.exBox {
  font-size: .875rem;
}
.exBox .modal__body{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
}
.exBox p{
  line-height: 2;
}
.exBox h2{
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1em;
  position: relative;
  padding-left: 2em;
}
.exBox h2::before{
  content: '?';
  font-size: .9375rem;
  width: 1.5em;
  height: 1.5em;
  background: var(--mainColor);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50px;
  position: absolute;
  left: 0;
  top: 0.1em;
}
.exBox ul li{
	padding-left: 12px;
	background: url("../images/seo/arrow-gray.svg") no-repeat left top 0.5em / 6px auto;
}
.exBox p + ul {
  margin-top: 0.5em;
}
@media (min-width:481px){ /* for PC */
  .term:hover {
    text-decoration: none;
  }
  .exBox .modal__body .imgWrap{
    width: 242px;
  }
  .exBox .modal__body .textWrap{
    flex: 1;
  }
}
@media (max-width: 480px) { /* for SP */
  .modal__content {
    width: 100%;
    max-width: none;
    padding: 2em 2em 5em 2em;
    height: auto;
    max-height: 90vh;
    border-radius: 12px 12px 0 0;
    left: 0;
    top: auto;
    bottom: 0;
    transform: none;
  }
  .exBox h2{
    margin-bottom: 1.5em;
  }
  .exBox .modal__body {
    gap: 1.25em;
  }
  .exBox .modal__body .imgWrap,
  .exBox .modal__body .textWrap{
    width: 100%;
  }
  .exBox .modal__body .imgWrap{
    text-align: center;
  }
}

/* 閉じるボタン */
.modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}