@charset "utf-8";

body{
	background-color:#fff;
	font-family: noto-sans-cjk-jp,sans-serif;
	font-weight: 400; /*300 400 500 700*/
	font-style: normal;
	line-height:2.0em;
	color:#000;
}

@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
a{
	color:#000;
}
a img{
	-webkit-transition: .8s;
	-moz-transition: .8s;
	-o-transition: .8s;
	-ms-transition: .8s;
	transition: .8s;
}
a img:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
}
.bold{
	font-family: source-han-sans-japanese, sans-serif;
	font-weight: 700;
	font-style: normal;
}
.underline{
	text-decoration:underline;
}
.large{
	font-size:1.3em;
}


/*ハンバーガーメニュー*/
nav.NavMenu{
	position: fixed;	/*表示位置を固定*/
	z-index: 2;/*重ね順を変更*/
	top: 0;/*表示位置を指定*/
	right: 0;	/*表示位置を指定*/
	background: #000;/*背景を白にする*/
	color: #fff;	/*文字色を黒にする*/
	text-align: left;/*テキストを中央揃え*/
	width: 550px;	/*全幅表示*/
	height:100vh;
	transform: translateX(100%);	/*ナビを上に隠す*/
	transition: all 0.6s;	/*アニメーションの時間を指定*/
	opacity:0;
}
nav.NavMenu ul{
	width: 100%;	
	margin: 0 auto;
	padding: 70px 0 0 70px;
}

nav.NavMenu ul li{
	font-size:19.5px;
	font-weight: 500;
	list-style-type: none;
	padding: 0;
	width: 100%;
}

nav.NavMenu ul li:last-child{
	padding-bottom: 0;
	border-bottom: none;	/*最後のメニュー項目のみ下線を消す*/
}

nav.NavMenu ul li a{
	display: block;/*クリックできる領域を広げる*/
	color: #fff;
	padding: 0.5em 0;
	text-decoration:none;
}
nav.NavMenu ul li a:hover{
	color:#FCD023;
}

nav.NavMenu.active{
	transform: translateY(0%);/*ナビを表示する*/
	opacity:1;
}

nav.NavMenu ul li ul{
	width: 100%;	
	margin: 0 auto;
	padding: 0 0 10px 40px;
}
nav.NavMenu ul li u li{
	font-weight: 500;
	list-style-type: none;
	padding: 0;
	width: 100%;
}
nav.NavMenu ul li ul li a{
	display: block;/*クリックできる領域を広げる*/
	color: #fff;
	padding: 0.5em 0;
	text-decoration:none;
	font-size:16px;
}

.Toggle {
	display: block;
	position: fixed;	/* bodyに対しての絶対位置指定 */
	right: 0;
	top: 47px;
	width: 168px;
	height: 63px;
	border-radius:32px 0 0 32px;
	cursor: pointer;
	z-index: 3;
	background-color:#000;
	transition: 1.0s ;
}
 
.Toggle span {
	display: block;
	position: absolute;
	width: 30px;
	border-bottom: solid 3px #000;
	-webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
	-moz-transition: .35s ease-in-out;/*変化の速度を指定*/
	transition: .35s ease-in-out;	/*変化の速度を指定*/
	left: 40px;
	border-color:#fff;
}
 
.Toggle span:nth-child(1) {
	top: 22px;
}
 
.Toggle span:nth-child(2) {
	top: 31px;
}
 
.Toggle span:nth-child(3) {
	top: 40px;
}
 
.Toggle.active{
	background-color:#fff;
}
/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
	top: 30px;
	left: 40px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
	border-color:#000;
}
 
/* 2番目透過 */
.Toggle.active span:nth-child(2) {
	opacity:0;
	border-color:#000;
}
/* 3番目のspanを45度に */
.Toggle.active span:nth-child(3) {
	top: 30px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	border-color:#000;
}



header{
	width:100%;
	padding:24px 5% 3.5%;
}
#logo{
	float:left;
	width:500px;
}
#main_wrapper{
	position:relative;
	margin: 0 auto;
	width:100%;
	max-width:1040px;
}
#main_txt{
	clear:both;
	float:left;
	width:36%;
	display:block;
	font-size:24px;
	font-weight: 700;
	line-height:1.8em;
	font-style: normal;
	margin-top:130px;
	margin-left:12%;
}
#main{
	float:right;
	width:47%;
	margin-right:5%;
}
#hajimemasite_wrapp{
	float:left;
	clear:both;
	position:relative;
	margin: 150px auto 40px;
	padding:80px 80px 120px 80px;
	width:100%;
	background-color:#000;
	border-radius:28px;
	overflow:hidden;
}

#hajimemasite_illust{
	position:relative;
	float:left;
	width:50%;
}
.hajimemasite01{
	position:absolute;
	top:0;
	left:0;
}
.hajimemasite02{
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
#hajimemasite_txt{
	float:right;
	width:41.7%;
	color:#fff;
	font-size:16px;
	line-height:1.63em;
}
.hajimemasite_l_txt{
	font-size:36px;
	line-height:1.3em;
	font-weight: 500;
	margin-bottom:0.7em;
}
.wrap800{
	width:100%;
	max-width:640px;
	margin:0 auto;
}
/*なにかお困りごとはございますか？*/
#trouble{
	clear:both;
	width:100%;
	margin:0 auto;
	padding-top:8%;
	overflow:hidden;
}
.komidashi_inner {
	width:100% ;
	max-width: 1040px;
	margin: 0 auto;
	padding:0;
}
.komidashi {
	background-color:#000;
	padding:22px 0 26px 80px;
	width: 100vw;
	color:#fff;
	line-height:1.5em;
	font-weight: 500;
	font-size:26px;
	border-radius:55px 0 0 55px;
	margin-bottom:90px;
}
.trouble_box{
	clear:both;
	width:100%;
	margin-bottom:5px;
	overflow:hidden;
}
.trouble_box img{
	width:100%;
	margin-bottom:5%;
}
.trouble_box_sp{
	display:none;
}

.truble_illust01{
	position:relative;
	height:340px;
}
#truble_illust01_01{
	position:absolute;
	top:0;
	left:0;
}
#truble_illust01_02{
	position:absolute;
	top:0;
	left:0;
}
#truble_illust01_03{
	position:absolute;
	top:0;
	left:0;
}

.truble_illust02{
	position:relative;
	height:340px;
}
#truble_illust02_01{
	position:absolute;
	top:0;
	left:0;
}
#truble_illust02_02{
	position:absolute;
	top:0;
	left:0;
}
#truble_illust02_03{
	position:absolute;
	top:0;
	left:0;
}

.truble_illust03{
	position:relative;
	height:330px;
}
#truble_illust03_01{
	position:absolute;
	top:0;
	left:0;
}
#truble_illust03_02{
	position:absolute;
	top:0;
	left:0;
}
#truble_illust03_03{
	position:absolute;
	top:0;
	left:0;
}

#user_illust01{
	float:left;
}
#user_illust02{
	float:right;
}
#user_illust03{
	float:left;
}
.midashi_right{
	float:right;
	background-image:url(../img/fukidashi_right.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position:center;
	width:517px;
	height:295px;
	font-size:16px;
	font-weight: 500;
	line-height:2.1em;
	padding:35px 34px 0 86px;
}
.midashi_left{
	float:left;
	background-image:url(../img/fukidashi_left.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position:center;
	width:517px;
	height:295px;
	font-size:16px;
	font-weight: 500;
	line-height:2.1em;
	padding:35px 83px 0 36px;
}
.trouble_bottom_txt{
	font-size:16px;
	font-weight: 400;
	line-height:2.0em;
}
/*ICTの「C」を大切にしています。*/
#itc{
	clear:both;
	width:100%;
	margin:0 auto;
	padding-top:8%;
	overflow:hidden;
	font-size:16px;
	font-weight: 400;
	line-height:1.9em;
}
#meeting_illust{
	max-width:300px;
	width:100%;
	float:right;
	margin:20px 0 20px 30px;
}

/*UIとUX  デザインと導線がかなえる使いやすさ。*/
#uiux{
	clear:both;
	width:100%;
	margin:0 auto;
	padding-top:8%;
	overflow:hidden;
	font-size:16px;
	font-weight: 400;
	line-height:1.9em;
}
#uiux_illust{
	width:100%;
	margin-bottom:4.4%;
}
#uiux_illust_wrapp{
	position:relative;
	width:100%;
	margin-bottom:4.4%;
}
#uiux_illust01{
	position:relative;
	width:100%;
}
#uiux_illust02{
	position:absolute;
	width:45%;
	top:0;
	right:0;
}

/*キャッチボールをしながら進めていきます*/
#catchball{
	clear:both;
	width:100%;
	margin:0 auto;
	padding-top:8%;
	overflow:hidden;
}


/*わたしたちがお手伝いしていること（一例）*/
#help{
	clear:both;
	width:100%;
	margin:7% auto 2%;
	padding:5% 0 3.2%;
	overflow:hidden;
	background-color:#E8E8E8;
	font-size:16px;
	font-weight: 400;
	line-height:1.9em;
}
#help_komidashi{
	font-size:31px;
	font-weight: 500;
	line-height:1.9em;
	width:100%;
	text-align:center;
	margin-bottom:2%;
}
.heip_wrapp{
	width:100%;
	max-width:1040px;
	margin:5% auto 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
}
.heip_wrapp li{
	display:block;
	background-color:#fff;
	list-style:none;
	max-width:330px;
	width:100%;
	padding:30px 30px 40px;
	margin-bottom:30px;
}
.help_illust_box{
	width:100%;
	height:260px;
	text-align:center;
}
#help_user_illust01{
	max-width:186.28px;
	width:100%;
	margin:0 auto;
}
#help_user_illust02{
	max-width:190.36px;
	width:100%;
	margin:0 auto;
}
#help_user_illust03{
	max-width:173.23px;
	width:100%;
	margin:0 auto;
}
#help_user_illust04{
	max-width:184.32px;
	width:100%;
	margin:0 auto;
}
#help_user_illust05{
	max-width:146.91px;
	width:100%;
	margin:0 auto;
}
#help_user_illust06{
	max-width:175.8px;
	width:100%;
	margin:0 auto;
}
.help_txt{
	font-size:16px;
	font-weight: 400;
	line-height:1.9em;
}
.user_name{
	font-size:16px;
	font-weight: 500;
	line-height:1.9em;
}
a.shosai_btn{
	display:block;
	width:100%;
	border-radius:50px;
	background-color:#000;
	color:#fff;
	font-size:16px;
	font-weight: 400;
	text-align:center;
	height:64px;
	line-height:62px;
	text-decoration:none;
	margin-top:31px;
	transition: 1.0s ;
}
a.shosai_btn:hover{
	background-color:#FFD103;
	color:#000;
}

/*その他、etc, etc,*/
#other{
	clear:both;
	width:100%;
	margin:0 auto 2%;
	padding-top:8%;
	overflow:hidden;
	font-size:16px;
	font-weight: 400;
	line-height:1.9em;
}
#other_illust{
	width:46.7%;
	float:right;
	margin:0 0 5% 6%;
}
a.hojolkin_btn{
	display:block;
	width:40.5%;
	border-radius:50px;
	background-color:#000;
	color:#fff;
	font-size:16px;
	font-weight: 400;
	text-align:center;
	height:64px;
	line-height:62px;
	text-decoration:none;
	margin-top:50px;
	transition: 1.0s ;
}
a.hojolkin_btn:hover{
	background-color:#FFD103;
	color:#000;
}

/*まずはお気軽にお問合せください*/
#contact{
	clear:both;
	width:100%;
	margin:0 auto 12%;
	padding-top:8%;
	overflow:hidden;
	font-size:16px;
	font-weight: 400;
	line-height:1.9em;
}
#contact_content{
	border:3px solid #000;
	border-radius:20px;
	padding:7% 5% 10%;
}
#contact_komidashi{
	font-size:19.5px;
	font-weight: 500;
	text-align:center;
	width:100%;
	margin-bottom:5%;
}
#contact_txt{
	font-size:16px;
	font-weight: 400;
	line-height:1.8em;
	margin-bottom:5%;
}
.formTable{
	width:100%;
}
.formTable th{
	width:100%;
	text-align:left;
	font-size:16px;
	font-weight: 500;
}
.formTable td{
	width:100%;
	text-align:left;
	padding:0 0 3%;

}
.formTable th span{
	text-align:left;
	font-size:16px;
	font-weight: 400;
	color:#FF0000;
	margin-left:1.0em;
}
.formTable td input[type="text"],textarea{
	width:100%;
	border:1px solid #999;
	border-radius:7px;
	padding:0 15px;
}

.formTable input[type="checkbox"]{
	display: inline;
	width:1px;
	border-color:#fff;
	opacity:0;
}
/* チェックボックスの代わりを成すラベル */
.formTable input[type="checkbox"]+label{
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 40px;
    padding-right: 10px;
}
/* ラベルの左に表示させる正方形のボックス□ */
.formTable input[type="checkbox"]+label::before{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    margin-top: -10px;
    left: 0;
    top: 50%;
    border: 1px solid;
    border-color:  #999; /* 枠の色変更 お好きな色を */
    background-color: #FFF; /* 背景の色変更 お好きな色を */
}
/* チェックが入った時のレ点 */
.formTable input[type="checkbox"]:checked+label::after{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 10px;
    margin-top: -5px;
    top: 50%;
    left: 3px;
    transform: rotate(-45deg);
    border-bottom: 4px solid;
    border-left: 4px solid;
    border-color:  #3e82ff; /* チェックの色変更 お好きな色を */
}
input.submit_btn{
	display:block;
	width:44%;
	border-radius:50px;
	background-color:#000;
	color:#fff;
	font-size:16px;
	font-weight: 400;
	text-align:center;
	height:64px;
	line-height:62px;
	text-decoration:none;
	margin-top:50px;
	transition: 1.0s ;
}
input.submit_btn:hover{
	background-color:#FFD103;
	color:#000;
}

/*フッター*/
#footer{
	float:left;
	width:100%;
	margin:0;
	text-align:center;
	font-size:16px;
	padding:3.5% 0;
	background-color:#000;
	color:#fff;
}
#footer a{
	color:#fff;
}
#bottom_logo{
	filter: brightness(0) invert(1);
	width:300px;
}
#bottom_logo_svg{
	width:354px;
	margin:0 auto;
}
#bottom_logo_svg svg{
	width:100%;
}

#footer_txt01{
	margin-bottom:0.6em;
}
#copyright{
	width:100%;
	text-align:center;
	margin-top:6%;
}	

/*実績ページ*/
#lower_midashi{
	clear:both;
	width:95%;
	margin: 3% 0 0 5%;
	font-size:48px;
	font-weight: 500;
}
/*case1*/
#case01{
	clear:both;
	width:100%;
	margin:0 auto;
	padding-top:6.5%;
	overflow:hidden;
}
.komidashi_inner2{
	width:100% ;
	max-width: 1040px;
	margin: 0 auto;
	padding:0;
}
.komidashi2{
	background-color:#000;
	padding:22px 0 26px 55px;
	width: 100vw;
	color:#fff;
	line-height:1.5em;
	font-weight: 500;
	font-size:26px;
	border-radius:55px 0 0 55px;
	margin-bottom:55px;
}
.komidashi_case{
	float:left;
	font-weight: 700;
	font-size:50px;
	color:#fff;
	margin:19px 50px 27px 0;
}
.komidashi_case span{
	color:#FCD023;
}
.wrap1300{
	width:100%;
	max-width:1040px;
	margin:0 auto;
}

.case_txt01{
	clear:both;
	max-width:800px;
	width:100%;
	line-height:1.9em;
	font-size:16px;
	font-weight: 400;
	margin:0 auto 4%;
}
.case_illust{
	position:relative;
	clear:both;
	max-width:800px;
	width:100%;
	height:auto;
	margin:0 auto 5%;
}
.case_illust img{
	width:100%;
}
.case01_illust01,.case02_illust01,.case03_illust01{
	position:absolute;
	top:0;
	left:0;
}


.case_spec_wrapp{
	clear:both;
	float:left;
	width:100%;
	background-color:#E8E8E8;
	padding:50px 50px 50px 50px;
	border-radius:28px;
	margin-top:10px;
	margin-bottom:4%;
}
.case_spec_name{
	font-size:16px;
	font-weight: 500;
	line-height:1.5em;
	width:100%;
	border-bottom:2px solid #000;
	padding-bottom:23px;
	margin-bottom:23px;
}
.case_spec_txt{
	width:100%;
}
.case_spec_txt th{
	text-align:left;
	font-size:16px;
	font-weight: 500;
}
.case_spec_txt td{
	text-align:left;
	font-size:14px;
	font-weight: 300;
	line-height:1.8em;
	padding-right:40px;
	vertical-align:top;
}
.case_spec_txt td:last-child{
	padding-right:0;
}
.case_spec_txt td.case_spec_note{
	font-size:16px;
	font-weight: 400;
	padding-top:39px;
	text-align:center;
}
/*case2*/
#case02{
	clear:both;
	width:100%;
	margin:0 auto;
	padding-top:7%;
	overflow:hidden;
}
#case_illust_right{
	float:right;
	max-width:275.41px;
	width:100%;
}
.case_left_txt{
	float:left;
	display:block;
	background-image:url(../img/fukidashi_left2.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position:center;
	width:982px;
	height:450px;
	font-size:16px;
	font-weight: 400;
	line-height:2.1em;
	padding:76px 100px 0 34px;
}
/*case3*/
#case03{
	clear:both;
	width:100%;
	margin:0 auto;
	padding-top:7%;
	overflow:hidden;
}
.case_right_txt2{
	float:right;
	background-image:url(../img/fukidashi_right3.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position:center;
	width:983px;
	height:414px;
	font-size:16px;
	font-weight: 400;
	line-height:2.1em;
	padding:32px 44px 0 100px;
}
.case_txt02{
	clear:both;
	max-width:800px;
	width:100%;
	line-height:1.9em;
	font-size:16px;
	font-weight: 400;
	margin:0 auto;
}
/*クライアント様　業種例*/
#cliant{
	clear:both;
	width:100%;
	margin:7% auto 5%;
	padding:3.6% 0 4.8%;
	overflow:hidden;
	background-color:#E8E8E8;
	font-size:16px;
	font-weight: 400;
	line-height:1.9em;
}
#cliant_komidashi{
	font-size:36px;
	font-weight: 500;
	line-height:1.9em;
	width:100%;
	max-width:1040px;
	text-align:left;
	margin:0 auto 2%;
}
.cliant01{
	width:50%;
	float:left;
	line-height:2.2em;
}

/*頼りになるプロフェッショナル・パートナーズ*/
#partners{
	clear:both;
	width:100%;
	margin:7% auto 0;
	padding:3.6% 0 1.2%;
	overflow:hidden;
	font-size:16px;
	font-weight: 400;
	line-height:1.9em;
}
.partners_wrap{
	position:relative;
	width:100%;
	max-width:1040px;
	margin:0 auto;
	border:4px solid #000;
	border-radius:28px;
	padding:4.5% 3%;
}
#partners_komidashi{
	position:absolute;
	top:-45px;
	right:0;
	left:0;
	margin:auto;
	font-size:41px;
	font-weight: 500;
	line-height:1.9em;
	max-width:950px;
	text-align:center;
	width:100%;
	background-color:#fff;
}
#partners_box img{
	width:100%;
}
.partner_type{
	font-size:16px;
	font-weight: 500;
	text-align:center;
}
.partner_txt{
	font-size:14px;
	font-weight: 400;
	text-align:left;
	line-height:1.7em;
}
#partners_box{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
}
#partners_box li{
	display:block;
	list-style:none;
	width:25%;
	padding:25px 30px;
}
/*補助金サポート事業*/
#hojokin{
	clear:both;
	width:100%;
	margin:7% auto 9%;
	padding:3.6% 0 1.2%;
	overflow:hidden;
	font-size:16px;
	font-weight: 400;
	line-height:1.9em;
}
#saitaku_jisseki_komidashi{
	font-size:24px;
	font-weight: 500;
	line-height:1.9em;
	margin-bottom:1.1em;
}
#hojokin_illust{
	float:right;
	width:45%;
}
#saitaku_jisseki_table{
	border-collapse:collapse;
	border-top:1px solid #000;
	border-left:1px solid #000;
	font-size:12px;
	font-weight: 500;
	line-height:2.4em;
	max-width:50%;
}
#saitaku_jisseki_table td{
	border-bottom:1px solid #000;
	border-right:1px solid #000;
	padding:0 25px;
}
/*logoアニメ*/
.svg-wrap {
    position: relative;
    background-color: #fff;
    padding: 0;
}
.svg-wrap svg {
  max-width: 400px;
}
@media print, screen and (max-width: 767px) {
.svg-wrap svg {
	width:60%;
	margin-top:7px;
}
}
.svg-wrap svg .st0 {
  stroke-dasharray: 1000px;
  stroke: #555;
  stroke-width: 1px;
  animation: svgAnime 4.0s linear;
}
@keyframes svgAnime {
    0% {
      stroke-dashoffset: 1000px;
      fill: transparent;
    }
    70% {
      stroke-dashoffset: 0px;
      fill: transparent;
    }
    100% {
      stroke-dashoffset: 0px;
      stroke: transparent;
      fill: #000;
    }
}

/*_____________________________________________________________________________________*/
@media screen and (min-width: 767px) {/*ウィンドウ幅が767px以上の場合に適用*/
.pc_content{
	display:block;
}
.sp_content{
	display:none;
}

}