@charset "utf-8";

:root{

	--bp_pc_max: 3840px;
	--bp_pc_bas: 1920px;
	--bp_pc_min: 1281px;
	--bp_tb_max: 1280px;
	--bp_tb_min: 521px;
	--bp_sp_max: 520px;
	--bp_sp_min: 340px;

}

html{
	opacity: 1;
}

/*--------------------------------------*/

body{
	background-color: var(--c_bg_header);
}
@media screen and (min-width: 521px){
	body{

	}
}
@media screen and (max-width: 520px){
	body{

	}
}

@keyframes csn-rotate{
	to{
		transform: rotate(360deg);
	}
}

/*--------------------------------------*/

#wrapper{
	background-color: var(--c_bg_body);
}
@media screen and (min-width: 521px){
	#wrapper{

	}
}
@media screen and (max-width: 520px){
	#wrapper{

	}
}

/*--------------------------------------*/

#main{
	
}
@media screen and (min-width: 521px){
	#main{

	}
}
@media screen and (max-width: 520px){
	#main{

	}
}

/*--------------------------------------*/

/**********************************************************************/
/* セクションタイトル
/**********************************************************************/

section .title.common{
	margin-bottom: 2em;
}
section .title.common .en{
	font-style: italic;
}
section .title.common .ja{
	padding: .25em 0;
	display: inline-block;
}
section .title.common strong{
	font-weight: inherit;
	color: var(--c_primary);
}
section .title.common.quote .ja{
	padding-inline: 1em;
	position: relative;
}
section .title.common.quote .ja::before{
	content: "";
	display: block;
	width: .5em;
	height: .5em;
	position: absolute;
	left: 0;
	top: 0;
	background-image: url("../img/icon/quote.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}
@media screen and (max-width: 768px){
	section .title.common .ja{
		font-size: clamp(25px, 4vw, 38px);
	}
	section .title.common .ja br{
		display: none;
	}
	section .title.common.quote .ja{
		padding-inline: .25em;
	}
	section .title.common.quote .ja::before{
		width: .4em;
		height: .4em;	
	}
}
@media screen and (max-width: 520px){
	section .title.common{
		margin-bottom: 1em;
	}
	section .title.common .ja{
		
	}
}

/**********************************************************************/
/* 共通タイトル直下の説明文
/**********************************************************************/

section .title.common + .overview{
	max-width: 36em;
	margin-inline: auto;
}

/**********************************************************************/
/* 共通ボタン
/**********************************************************************/

.button.common a{
	display: inline-block;
	padding: 1em 1em;
	min-width: 16.5em;
	border: 1px solid #707070;
	border-radius: .25em;
	font-weight: 700;
}
@media screen and (max-width: 520px){
	.button.common a{
		padding: .75em 1em;
		min-width: 13em;
	}
}

/**********************************************************************/
/* CTAセクション
/**********************************************************************/

section.cta{
	background-color: var(--c_bg_cta);
}
section.cta .wrapper{
	gap: 5%;
}
section.cta .info{

}
section.cta .info .line.pre .label{
  border: 1px solid var(--c_white);
  display: inline-block;
  padding-inline: .4em;
  padding-block: .1em .25em;
}
section.cta .info .line.pre{
	max-width: 11em;
}
section.cta .info .line.main{
  margin-top: .1em;
	white-space: nowrap;
}
section.cta .info .description{
  max-width: 39em;
  margin-top: 1em;
}
section.cta .action{

}
section.cta .action .contact{
	min-width: 30em;
}
@media screen and (max-width: 900px){
	section.cta .action .contact{
		min-width: 0;
	}
}
@media screen and (max-width: 768px){
	section.cta .wrapper{
		flex-direction: column;
		gap: 3em;
		max-width: 390px;
		margin: auto;
		align-items: stretch;
		padding: 2vw 4vw;
	}
  section.cta .info .line.pre{
		max-width: none;
    font-size: clamp(15px, 4vw, 26px);
  }
  section.cta .info .line .suf{
    font-size: clamp(15px, 5vw, 36px);
  }
  section.cta .info .line.main{
    font-size: clamp(30px, 9vw, 40px);
    white-space: nowrap;
    margin-top: .5em;
  }
	section.cta .action{
		width: auto;
	}
}
@media screen and (max-width: 520px){
  section.cta .info .line.pre{
    font-size: clamp(15px, 4vw, 31px);
  }
  section.cta .info .line .suf{
    font-size: clamp(15px, 5vw, 36px);
  }
  section.cta .info .line.main{
    font-size: clamp(30px, 10vw, 60px);
    white-space: nowrap;
    margin-top: .5em;
  }
  section.cta .action [data-button] a{
		min-width: 0;
  }
  section.cta .action .demo,
  section.cta .action .download{
		font-size: clamp(12px, 3.5vw, 16px);
  }
}

/**********************************************************************/
/* CTA右側体裁
/**********************************************************************/

/*--------------------------------------------------------------------*/
/*action 共通*/

.action.common{

}
.action.common .box{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
  "contact contact"
  "download demo";
  gap: 1.5em .5em;
}
.action.common .box .contact{
  grid-area: contact;
}
.action.common .box .contact a{
  padding-block: 1.75em;
}
.action.common .box .contact a [data-icon]{
  transform: scale(1.25);
  margin-left: .75em;
}
.action.common .box .contact a .promote{
  bottom: auto;
  top: -1em;
  font-size: 120%;
  transform: translate(-50%, -30%);
}
.action.common .box .contact a .promote::after{
  bottom: 0;
  top: auto;
  transform: translate(-50%, 90%) scale(1, -1);
}
.action.common .box .download{
  grid-area: download;
}
.action.common .box .download a{
  padding-block: 1em;
}
.action.common .box .demo{
  grid-area: demo;
}
.action.common .box .demo a{
  padding-block: 1em;
}
@media screen and (max-width: 768px){
	.action.common .box{
		gap: .5em;
	}
	.action.common .box .contact a .promote{
		font-size: 100%;
	}
}

/**********************************************************************/
/* CTAボタン系
/**********************************************************************/

[data-button] a{
	color: var(--c_white);
	display: block;
	padding: .77em 1em;
	line-height: 1;
	white-space: nowrap;
	background-color: var(--c_bg_demo);
	border-radius: .4em;
	position: relative;
	min-width: 11em;
	box-sizing: border-box;
	text-align: center;
	transition: filter .3s;
}
[data-button] a:hover{
	opacity: 1;
	filter: brightness(1.2);
}
[data-button] a .icon{
	display: inline-flex;
	align-items: center;
}
[data-button="download"] a{
	background-color: var(--c_bg_download);
}
[data-button="demo"] a{
	background-color: var(--c_bg_demo);
}
[data-button="contact"] a{
	background: var(--c_grad_primary);
}
@media screen and (max-width: 520px){
	
}

/*--------------------------------------------------------------------*/

[data-button] a .promote{
  position: absolute;
  left: 50%;
  bottom: -.5em;
  transform: translate(-50%, 100%);
  font-size: 82%;
  background-color: var(--c_yellow);
  color: var(--c_black);
  padding: .5em 2em;
  border-radius: 5em;
  font-weight: bolder;
}
[data-button] a .promote::after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-width: 0 .5em .75em .5em;
  border-style: solid;
  border-color: transparent transparent var(--c_yellow) transparent;
  top: 0;
  left: 50%;
  transform: translate(-50%, -90%);
}

/**********************************************************************/
/* スクロールヒント
/**********************************************************************/

.scrollhint{
	display: none;
  padding: .5em 1em;
  background-color: #e7e7e7;
  color: #595959;
}
@media screen and (max-width: 768px){
	.scrollhint{
		display: block;
	}
}


/**********************************************************************/
/* お知らせ
/**********************************************************************/

section.news .bodying .list{
  gap: 2.5em;
}
section.news .bodying .list .item a{
	display: block;
}
section.news .bodying .list .item .text{
  padding: .5em 0;
}
@media screen and (max-width: 768px){
  section.news .wrapper{
    flex-direction: column;
    gap: 1em;
    padding-inline: 2vw;
  }
  section.news .heading{
    text-align: center;
  }
  section.news .bodying .list{
    gap: 0;
  }
  section.news .bodying .list .item{
    padding-bottom: 1em;
    border-bottom: 1px solid var(--c_border);
    margin-bottom: 1em;
  }
  section.news .bodying .list .item .title{
    font-size: 110%;
  }
  section.news .bodying .list .item .text{
    font-size: 14px;
  }
  section.news .navigation{
    margin-top: 1em;
  }
}

/**********************************************************************/
/* 共通
/**********************************************************************/

#contents{
	
}
@media screen and (min-width: 521px){
	#contents{

	}
}
@media screen and (max-width: 520px){
	#contents{

	}
}

/*--------------------------------------*/

#sidebar{
	
}
@media screen and (min-width: 521px){
	#sidebar{

	}
}
@media screen and (max-width: 520px){
	#sidebar{

	}
}

/*--------------------------------------*/

footer{
	
}
@media screen and (min-width: 521px){
	footer{

	}
}
@media screen and (max-width: 520px){
	footer{

	}
}