@charset "utf-8";

/* *****************************************************************************
   PC用のスタイル記述
***************************************************************************** */
@media screen and (min-width: 769px), print {
	
	/* -----------------------------------------------------------------------------
	 Header
	----------------------------------------------------------------------------- */
	header {
		height: auto;
	}
	header > .inner {
		display: flex;
		align-items: center;
		min-height: 60px;
		box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.20);
	}
	header > .inner > .logo {
		padding: 0 20px;
		/*vertical-align: middle;*/
		
	}
	
	header > .inner > .logo img{
		height: 40px;
		margin-right: 10px;
	}
	header > .inner > navi {
		right: 0;
		padding: 0 20px;
		text-align: right;
		vertical-align: middle;
	}
	header > .inner > navi > ul {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: wrap;
		margin: auto 0;
	}
	header > .inner > navi > ul > li {
		display: inline-block;
	}
	header > .inner > navi > ul > li a {
		width: auto;
		text-align: left;
		padding: 0 15px;
		color: var(--body-font-color);
	}
	header > .inner > navi > .translation {
		display: inline-block;
	}
	#bt-menu {
		display: none;
	}
	
	
	/* style1 */
	header.style1 {
		position: absolute;
		width: 100%;
		z-index: 999;
		display: none;
	}
	header.style1.fixed {
		position: fixed;
		top: 0;
		left: 0;
		display: block;
	}
	header.style1 > .inner > navi {
		position: static;
		display: flex;
		background-color: var(--header-bg-color);
		padding: 10px 0;
		margin-left: auto;
		opacity: 1;
	}
	
	
	/* powered by Sangyo Navi */
	.powered {
		display: none;
	}

	
	/* -----------------------------------------------------------------------------
	 Top Contents
	----------------------------------------------------------------------------- */
	#top-contents {
		background-color: var(--body-bg-color);
	}
	
	#top-contents .layer2 {
		position: absolute;
		bottom: 1vw;
		z-index: 7;padding:0 3vw ;
	}
	#top-contents .layer2 p{
		padding: 0;
	}
	

	
	/* -----------------------------------------------------------------------------
	 Breadcrumb
	----------------------------------------------------------------------------- */
	#breadcrumb .bc{
		max-width: 1024px;
		margin: auto;
	}

	
	/* -----------------------------------------------------------------------------
	 contents
	----------------------------------------------------------------------------- */
	main .contents .fixed-bg img {
		width: 100%;
		height: auto;
	}

	.w1024 {
		position: relative;
	}
	
	.w1024.bg {
		padding: 40px;
	}
	
	.layer {
		position: absolute;
		z-index: 99;
	}
	
	.contents section {
		margin: 0 0 40px;
	}
	
	
	/* -----------------------------------------------------------------------------
	 Footer
	----------------------------------------------------------------------------- */
	footer {
		font-size: .95em;
		padding: 90px 0;
		margin-bottom: 0;
	}
	footer .pagetop a:hover {
		background-color: var(--footer-arrow-hover-bg-color);
		filter:alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	footer .pagetop a:hover::before {
		color: var(--footer-arrow-hover-color);
	}
	footer .inner {
		max-width: 1024px;
		margin: 0 auto;
	}
	
	/* -----------------------------------------------------------------------------
	 財団カスタマイズ
	----------------------------------------------------------------------------- */
	/*--パンくず直下のanchorのみanc1をつける*/
	a.anchor.anc1{
   		padding-top: 0;
        margin-top: 0;
	} 
	
	/* 2分割 */
	
	
	/* 3分割 */
	/* 4分割 */
	
	/* 4分割 flex*/
	/* ful-half */
	.ful-half{
		flex-direction: row;
	}
	.ful-half.l-img{
		flex-direction: row-reverse;
	}
	.ful-half.r-img .left,
	.ful-half.l-img .right{
		height: auto;
	}
	.ful-half.r-img .right,
	.ful-half.l-img .left{
		height: auto;
	}
	.ful-half .left,
	.ful-half .right{
		width: 50%;
	}
	.ful-half .txt .inner{
		max-width: 640px;
		margin-top: 30px;
		margin-bottom: 30px;
		/*margin: auto;*/
	}
	.ful-half.r-img .right,
	.ful-half.l-img .left{display: flex;align-items: center}
	
	/* flow 横 */
	
	/* 会社概要 */
	.cpn_tbl table th,
	.cpn_tbl table td{
		display: table-cell;
		border-bottom: 1px solid var(--cpn-table-border);
		padding: 5px 20px;
	}
	
	/* お問合せ */
	
	a.mail_button {
		margin-top: 0;
	}
	
	/* 横問合せボタン */
	.cv_btn_area {
		right: 0;
		top: 15vw;
		left: auto;
    	bottom: auto;
		width: 110px;
	}
	.cv_btn_area .btn{
		flex-direction: column;
	}
	.cv_btn_area .btn a {
		flex-direction: column;
		width: 110px;
		height: 95px;
		font-size: 17px;
		border-radius: 10px 0 0 10px;
		padding: 12px 17px 10px 10px;
		margin: 0 -10px 3px auto;
	}
	.cv_btn_area .btn a:hover{
		margin-right: 0;
		opacity: 1;
	}
	.cv_btn_area .btn a i {
		margin-bottom: 7px;
		margin-right: 0;
	}

	/* レスポンシブ出し分け */
	.for-pc{
		display: block;
	}
	.for-tab{
		display: none;
	}
	

/* -----------------------------------------------------------------------------
 個別設定
----------------------------------------------------------------------------- */
	.parts-h2 {font-size: 3rem;}
/*top*/	
	header.style1 > .inner > .logo{height: auto;flex-direction: column;align-items: flex-start;font-size: 16px;}
	header > .inner > .logo img {
    	height: 40px;
		margin-right: 0;margin-bottom: 4px;}
	#top-contents .layer1 {
		top:calc(50% - .5vw - 4.5rem);
		width: auto;justify-content: center;align-items: center;
		right: 0;left: 0;margin:0 auto;}	
	
	.l1-left{width: 530px;} 
	.l1-right{width: 320px;margin-bottom: 0px;}
	
	#top-contents .layer1 h2{font-size:2.0rem;}
	.layer1 p{font-size: 1.65rem;}
	.layer1 li{font-size: 1.2em;}
	#top-contents .layer2 p{font-size: 1em;}
	
	
	
	/*#top-contents .layer3 {
		left: calc(50% + 6.5vw);
		top: calc(50% - 2.5rem - .5vw);
		transform: translateY(-50%);right: initial;	
	}*/
	

/*con1　3つの特長*/
	.con1 ul.flexbox li{
		width: 32%;min-width: 280px; }
	
/*con2 特長詳細　*/
	.con2-h2{font-size: 3.25em;}
	.con2 .half2-flex{flex-direction: row;}
	.con2 .half2-flex .left{padding: 0 0 0 20px;font-size: 18px; width: 49%;}
	.con2 .half2-flex .right{width: 49%;margin-bottom: 0;margin-left: 0;}
	
	.con2 .half2-flex.many .left{padding: 0 0 0 20px;font-size: 18px; width:100%;}
	
	.ful-half .right.txt {padding: 0 15px 0 20px;}
	.ful-half .left.txt {padding: 0 20px 0 15px;}
	
	.con2 .l-img .left img,
	.con2 .r-img .right img{width: 100%;vertical-align: bottom;}
	.con2 .l-img .left,.con2 .r-img .right{margin-bottom: 0;margin-top:0}
   .cta1 .align-center{font-size: 1.75rem;}
	
/*con3　詳細*/
/*con4　実績*/
	.half-full .flexbox{justify-content: space-between;align-items: flex-start;}
	.half-full .flexbox img{width: 500px;max-width: 55%;}
	.half-full .flexbox .works5-data{width: calc(97% - 500px);min-width:43% }
/*con5　費用*/
	
/*con6　流れ*/
/*con7　QA*/
	.con7{background-position: bottom 280px right 0;}
	
/*con8　会社概要　*/
/*con9　資料請求*/
/*footer*/


	
}

@media screen and (min-width: 961px), print {
	/*top*/	
	
	header.style1 > .inner > .logo{height: 50px;flex-direction: row;align-items: center;}
	header > .inner > .logo img {
    	height: 40px;
		margin-right: 10px;margin-bottom: 0}
	#top-contents .layer1 {
		top:calc(50% - .5vw - 3rem);
	}	
	
	.l1-left{width: 620px;} 
	.l1-right{width: 360px;margin-left: -30px}
	

	
	#top-contents .layer1 h2{font-size: 2.7rem;}
	.layer1 p{font-size: 1.85rem;}
	.layer1 li{font-size: 1.35em;}
	
	
	#top-contents .slider img{object-position: bottom center;max-height: 650px}
	
}

@media screen and (min-width: 1064px), print {
	/* -----------------------------------------------------------------------------
	 contents
	----------------------------------------------------------------------------- */
	.w1024 {
		/*max-width: 1024px;*/
		margin: 60px auto;
	}
	
	/*top*/	
	#top-contents .layer1 {}	
	.l1-left{width: 600px;} 
	.l1-right{width: 420px;margin-left: 0}
	.layer1 li {font-size: 1.35em;}

	
		
/*con1　3つの特長*/
	.contents .point-sec{margin: 60px 20px;width: auto}
	
/*con2 特長詳細　*/
	
/*con3　詳細*/
/*con4　実績*/
/*con5　費用*/
/*con6　流れ*/
/*con7　QA*/
/*con8　会社概要　*/
/*con9　資料請求*/
/*footer*/
}

@media screen and (min-width: 1224px), print {
	
	.l1-left{width: 600px;} 
	.l1-right{width: 480px;}
	.contents .point-sec{margin: 60px 40px;width: auto}
	.con2 .half2-flex .left{padding: 0 0 0 calc(48.5vw - 572px);}
	.con2 .half2-flex.many .left{padding: 0 calc(48.5vw - 572px) 0 calc(48.5vw - 572px);}
	
	
}

@media screen and (min-width: 1600px), print {

	#top-contents .layer1 h2{font-size: 3.5rem;}
	.layer1 p{font-size: 2.25rem;}
	
	.l1-left{width: 750px;} 
	.l1-right{width: 500px;}
	
}