@charset "utf-8";
.sp{display:none !important;}

a[href^="tel:"] {pointer-events: none;}

a{text-decoration:none;}

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
	list-style-type:none;
	font-size: 16px;
	color: #404D50;
	font-family:'Noto Sans JP',"源ノ角ゴシック","ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 游ゴシック体, "Yu Gothic", YuGothic, "Open Sans", "Helvetica Neue", "sans-serif", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 2;
	outline:none;
	letter-spacing:0.1em;
}

html{
  scroll-behavior: smooth;
}

img{display:block;width:100%;}

.ryo{
	font-family: "ryo-display-plusn", serif;
	font-weight: 500;
	font-style: normal;
}

header{
	overflow:hidden;
	position:relative;
	background:URL("../img/header_bk.png");
	margin:0 auto;
}

header .inner{
	width:1200px;
	margin:0 auto;
}

.head_navi{
	overflow:hidden;
	position:fixed;
	width:100%;
	z-index:99;
	background:rgba(255,255,255,0.8);
}

.head_title{
	float:left;
	width:70%;
	overflow:hidden;
	margin:5px 0;
}

.head_title .left{
	width:25%;
	float:left;
	margin:20px 0;
}

.head_title .right{
	width:72%;
	float:right;
	margin:12px 0;
}

.head_title .right img{
	width:45%;
}
.head_title .right p{
	font-size:80%;
}

header .inner{
	width:1250px;
	overflow:hidden;
	margin:0 auto;
	position:relative;
}

header .inner .img_left{
	position:absolute;
	bottom:0;
	left:0;
	z-index:2;
	width:50%;
}

.head_cta{
	width:30%;
	float:right;
}

.head_cta a{
	display:block;
	width:48%;
	text-align:center;
	background:#333;
	color:#fff;
	padding:10px 0;
	float:right;
	margin:17px 1% 13px;
}

.head_cta a:last-child{
	font-size:80%;
	padding:13px 0;
	background:#948810;
}

header .fv{
	margin:100px auto 0;
}

header .inner .img_box{
	width:55%;
	float:right;
	background:rgba(255,255,255,0.7);
	box-sizing:border-box;
	padding:25px 30px 35px;
	margin:30px auto;
}


main{position:relative;overflow:hidden;}

main:before{
	content:"";
	width:22vw;
	height:20vw;
	background:URL("../img/back_img.png") no-repeat;
	background-size:cover;
	position:absolute;
	right:0;
	z-index:1;
	top: 6vw;
}

main:after{
	content:"";
	width:20vw;
	height:24vw;
	background:URL("../img/back_img.png") no-repeat;
	background-size:cover;
	position:absolute;
	right:0;
	z-index:1;
	bottom:0;
}

article:after{
	content:"";
	width:25vw;
	height:24vw;
	background:URL("../img/back_img.png") no-repeat;
	background-size:cover;
	position:absolute;
	left:-15vw;
	z-index:-1;
	top:25%;
}

article{
	width:1200px;
	margin:0 auto 200px;
	position:relative;
	z-index:2;
	box-shadow:0 0 30px rgba(0,0,0,0.16);
	background:rgba(255,255,255,0.8);
}

section{
	background:rgba(255,255,255,0.8);
}

.vision_section{
	background:URL("../img/vision_section_bk.png") no-repeat;
	background-size:contain;
	background-position:0 60px;
	padding-top:520px;
	overflow:hidden;
	margin:0 auto 100px;
}

.vision_section .inner{
	width:60%;
	margin:0 25% 0 15%;
}

dl{
	overflow:hidden;
	margin:0 auto 50px;
}

dt{	float:left;	font-family: "ryo-display-plusn", serif;}
dd{	float:right;}

.vision_section .inner dt{
	width:15%;
}
.vision_section .inner dd{
	width:85%;
}

.impression_section{
	overflow:hidden;
}

.impression_section img{
	width:35%;
	float:left;
}

.impression_section .inner{
	width:65%;
	float:right;
	padding:0 7% 0 4%;
	box-sizing:border-box;
}

.impression_section dt{width:13%;}
.impression_section dd{width:87%;}

.excel_section{
	background:URL("../img/excel_section_bk.png") no-repeat;
	background-size:contain;
	padding-top:275px;
	margin:0 auto 100px;
}

.excel_section .inner{
	width: 73%;
	margin: 0 auto;
}

.excel_section .inner dt{width:10%;}
.excel_section .inner dd{width:90%;}

.dev_section{
	overflow:hidden;
	margin:0 auto 50px;
}
.dev_section img{
	width:28%;
	float:left;
}

.dev_section .inner{
	width:70%;
	float:right;
	box-sizing:border-box;
	padding:0 7% 0 2%;
}

.dev_section .inner dt{width:10%;}
.dev_section .inner dd{width:90%;}
.user_section .inner{
    width: 73%;
    margin: 0 auto;
}
.user_section dt{width:10%;}
.user_section dd{width:90%;}

footer{
	background:#F2F2F2;
	overflow:hidden;
}

footer img{
	width:300px;
	margin:100px auto 40px;
}

footer p{
	text-align:center;
	margin:0 auto 40px;
}

address{
	font-style:normal;
	text-align:center;
	font-size:80%;
	margin:0 auto 40px;
}

dd em{
	font-size:70%;
	font-style:normal;
}

dd span{
	display:block;
	font-size:80%;
	line-height:1.6;
	margin:20px auto 0;
	color:#7c8385;
}

.cta_section{
	background:linear-gradient(90deg, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 53%, rgba(255,255,255,1) 53%, rgba(255,255,255,1) 100%);
	overflow:hidden;
}

.cta_section .inner{
	width:1250px;
	margin:50px auto;
	overflow:hidden;
}

.cta_section .inner .carbonix_content{
	width:50%;
	float:left;
	padding-right:5%;
	overflow:hidden;
}

.cta_section .inner .carbonix_content .content_box{
	overflow:hidden;
}

.cta_section .inner .carbonix_content p{
	width:98%;
	margin:0 auto 20px;
	font-size:90%;
}
.cta_section .inner .carbonix_content .left{
	width:30%;
	float:left;
	margin:10px auto;
}

.cta_section .inner .carbonix_content .right{
	width:70%;
	float:right;
	box-sizing:border-box;
	padding:10px;
}

.cta_section .inner .carbonix_content .right img{
	width:70%;
	margin:0 0 20px;
}

.cta_section .inner .carbonix_content .right h3{
	font-size:90%;
	line-height:1.8;
	margin:10px 0 0;
}

.cta_section .inner .carbonix_content a{
	display:block;
	margin:0 auto;
	width:50%;
	text-align:center;
	color:#fff;
	font-size:90%;
	background:#948810;
	padding:10px 0;
}

.cta_box{
	width:43%;
	float:right;
	margin:30px auto;
}

.cta_box h3{
	font-size:260%;
	text-align:center;
	line-height:1;
	margin:0 auto 30px;
}

.cta_box h3 span{
	font-size:40%;
	display:block;
}

.cta_box p{
	width:90%;
	margin:0 auto 30px;
	font-size:80%;
	text-align:center;
}

.cta_box ul{
	overflow:hidden;
}

.cta_box ul li{
	float:left;
	width:46%;
	margin:10px 2%;
}

.cta_box ul li a{
	display:block;
	text-align:center;
	padding:10px 0;
	box-sizing:border-box;
	background:#333;
	border:2px solid #333;
	color:#fff;
}

.cta_box ul li:first-child a{
	background:none;
	color:#333;
}