@charset "UTF-8";
/*
Theme Name: TFW Official Site
Description: TFW オフィシャルサイト用テーマです。
Version: 1.0
*/
/*------------------------------------------------
TryFieldWorks　オフィシャルサイト
--------------------------------------------------
共通スタイルシート
common.css
------------------------------------------------*/

/*------------------------------------------------
▼フォントファミリー読み込み
------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:100);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:300);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:400);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:500);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:700);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:900);

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100;8..144,200;8..144,300;8..144,400;8..144,500;8..144,600;8..144,700;8..144,800;8..144,900;8..144,1000&display=swap');

/*------------------------------------------------
▼WrpperRule
--------------------------------------------------
■サイズ
外枠：1200px
大枠：1150px
中枠：1100px
小枠：1050px
--------------------------------------------------
▼MarginRule
--------------------------------------------------
■サイズ
外枠：TOP＝0px
以下：TOP=50px;
------------------------------------------------*/

/*------------------------------------------------
▼全要素へ適用
------------------------------------------------*/
*{
	font-family: 'Noto Sans JP';
	font-weight: 400;
	font-size: 11pt;
	color: #3e3e3e;
	letter-spacing: 2px;
	}

a {
	text-decoration: none;
	}

a:hover {
	opacity: 0.9;
	}

@keyframes loop {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(0%);
  }
}

/*------------------------------------------------
▼PC向け
------------------------------------------------*/
/*--▼Window Width:751px以上▼--*/

@media screen and ( min-width:751px ){

/*--Link*--*/
#link1,#link2,#link3,#link4,#link5,#link6,#link7,#link8,#link9,#link10,#link11,#link12,#link13,#link14,#link15,#link16,#link17,#link18,#link19,#link20 {
	display: block;
	height: 142px;
	margin-top: -142px;
	}

/*pageHome*/
#pageHome {
	width: 100%;
	padding: 0;
	margin: 0;
	}
	
#pageHeader {
	position: fixed;
	width: 100%;
	height: auto;
	margin: 0 0 -142px 0;
	background-color: #FFFFFF;
	border-bottom: 1px solid #e0e0e0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	z-index: 100;
	}

h1{
	width: 178px;
	height: auto;
	margin: 30px auto 30px 30px;
	}
	
ul{
	width: 540px;
	margin: 30px 30px 30px auto;
	list-style-type: none;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center; 
	}
	
li{
	font-size: 13pt;
	font-weight: 700;
	}
	
#pageHeader a {
	font-size: 13pt;
	font-weight: normal;
	}
	
#pageHeader a:hover {
	opacity: 0.9;
	}
	
/*--Feature--*/
.Feature {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpFtrExpInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.Feature h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #ff6600;
	}
	
.Feature h2::after {
	display: block;
	content: "Features";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #ff6600;
	margin: 0px auto 0 auto;
	}
	
.Feature h2::before {
	display: block;
	width: fit-content;
	content: "ホームページ制作";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #ff6600;
	margin: 0px auto 4px auto;
	}

.wrpFtrItem {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	/*--border-top: 1px dotted #ff6600;--*/
	/*--border-bottom: 1px dotted #ff6600;--*/
	}
	
.ftrNumber {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 365px;
	height: auto;
	margin: 0 auto 0 0;
	color: #ff6600;
	text-align: right;
	font-family: 'Roboto Flex';
	font-weight: 2;
	font-size: 50pt;
	text-indent: 10px;
	vertical-align: baseline;
	}
	
.ftrNumber::before {
	display: flex;
	flex-wrap: nowrap;
	content: '特徴';
	padding: 2px 25px 4px 27px;
	width: auto;
	height: fit-content;
	background-color: #ff6600;
	color: #ffffff;
	font-style: normal;
	font-family: 'Noto Sans JP';
	font-weight: 500;
	font-size: 11pt;
	text-indent: 0px;
	}

.ftrNumber::after {
		display: flex;
		height: auto;
		width: 203px;/*--494--*/
		content: '';
		border-top: 1px solid #cccccc;
	}
	
.ftrExpWrp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 670px;
	height: auto;
	margin: 0 0 0 0;
	}
	
.ftrExpWrp h3 {
	display: flex;
	width: 100%;
	height: auto;
	color: #ff6600;
	font-size: 20pt;
	font-weight: 600;
	line-height: 26pt;
	margin: 0 auto auto auto;
	}
	
.ftrExpWrp p {
	display: flex;
	width: 100%;
	height: auto;
	margin: 25px auto 0 auto;
	line-height: 18pt;
	}

/*--Feature_blue--*/
.Feature_blue {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpFtrExpInr_blue {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.Feature_blue h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #0d3768;
	}
	
.Feature_blue h2::after {
	display: block;
	content: "Features";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #0d3768;
	margin: 0px auto 0 auto;
	}
	
.Feature_blue h2::before {
	display: block;
	width: fit-content;
	content: "IT相談";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #0d3768;
	margin: 0px auto 4px auto;
	}

.wrpFtrItem_blue {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	/*--border-top: 1px dotted #ff6600;--*/
	/*--border-bottom: 1px dotted #ff6600;--*/
	}
	
.ftrNumber_blue {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 365px;
	height: auto;
	margin: 0 auto 0 0;
	color: #0d3768;
	text-align: right;
	font-family: 'Roboto Flex';
	font-weight: 2;
	font-size: 50pt;
	text-indent: 10px;
	vertical-align: baseline;
	}
	
.ftrNumber_blue::before {
	display: flex;
	flex-wrap: nowrap;
	content: '特徴';
	padding: 2px 25px 4px 27px;
	width: auto;
	height: fit-content;
	background-color: #0d3768;
	color: #ffffff;
	font-style: normal;
	font-family: 'Noto Sans JP';
	font-weight: 500;
	font-size: 11pt;
	text-indent: 0px;
	}

.ftrNumber_blue::after {
		display: flex;
		height: auto;
		width: 203px;/*--494--*/
		content: '';
		border-top: 1px solid #cccccc;
	}
	
.ftrExpWrp_blue {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 670px;
	height: auto;
	margin: 0 0 0 0;
	}
	
.ftrExpWrp_blue h3 {
	display: flex;
	width: 100%;
	height: auto;
	color: #0d3768;
	font-size: 20pt;
	font-weight: 600;
	line-height: 26pt;
	margin: 0 auto auto auto;
	}
	
.ftrExpWrp_blue p {
	display: flex;
	width: 100%;
	height: auto;
	margin: 25px auto 0 auto;
	line-height: 18pt;
	}

/*--Keyvisual--*/
.kv {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	padding-top: 142px;
	}

.kvSubPage {
	border-bottom: 1px solid #e0e0e0;
	}

.kvSp {
	display: flex;
	align-items: center;
	width: 1200px;
	height: auto;
	margin: 50px auto 50px auto;
	color: #0d3768;
	font-size: 18pt;
	}
	
.kvWrdWrp {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 200px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 10;
	}

.kvWrd {
	overflow: hidden;
	}
	
.kvWrp {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 230px;
	text-align: center;
	background-color: #edf8ff;
	overflow: hidden;
	}

/*--
.kvWrdWrp img:first-child{
	animation: loop 50s -25s linear infinite;
	}

.kvWrdWrp img:last-child{
	animation: loop2 50s linear infinite;
	}
--*/
	
.kvWrpInr {
	position: absolute;
	width: 1200px;
	height: 270px;
	margin: -125px auto 50px auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	overflow: visible;
	z-index: 20;
	}
	
.kvKeyword {
	width: 468px;
	height: 216px;
	margin: 0px auto 0 0;
	overflow: visible;
	}

.kvExplan {
	background-color: #FFFFFF;
	width: 690px;
	height: 255px;
	margin: 0 0 0 auto;
	overflow: visible;
	box-shadow: 0px 0px 15px 5px #cccccc;
	}
	
.kvExplan img {
	border: 20px solid #FFFFFF;
	background-color: #FFFFFF;
	}
	
/*--Notice--*/
.Notice {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #9ed9ff;
	margin: 0;
	padding: 0;
	}
	
.wrpNoticeInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.Notice h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #23323e;
	}
	
.Notice h2::after {
	display: block;
	content: "Notice";;
	font-size: 12pt;
	color: #23323e;
	font-family: 'Roboto Flex';
	font-weight: 500;
	margin: -2px auto 0 auto;
	}

.Notice table {
	border-collapse: collapse;
	width: 1050px;
	margin: 25px 0 50px 0;
	}
	
.td_Notice_date{
	width: 20%;
	height: auto;
	padding: 15px;
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: center;
	border-bottom: 1px solid #4f6c7f;
	border-top: 1px solid #4f6c7f;
	}
	
.td_Notice_title{
	width: 80%;
	height: auto;
	padding: 15px;
	border-bottom: 1px solid #8fc4e6;
	border-top: 1px solid #8fc4e6;
	}
	
/*--hpEx--*/	
.hpEx {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #fff6ed;
	margin: 0;
	padding: 0;
	}

.wrpHpExInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.hpEx h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #ff6600;
	}
	
.hpEx h2::after {
	display: block;
	content: "Production example";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #ff6600;
	margin: -2px auto 0 auto;
	}
	
.hpEx h2::before {
	display: block;
	width: fit-content;
	content: "ホームページ制作";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #ff6600;
	margin: -2px auto 4px auto;
	}

.hpExInrWrp {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	}
	
.hpExImage {
	width: fit-content;
	height: 446px;
	margin: 0 auto 0 auto;
	padding: 0;
	box-shadow: 0px 0px 15px 5px #cccccc;
	}

.hpExExp {
	width: 646px;
	height: auto;
	margin: auto;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 15px 5px #cccccc;
	}

.hpExExp h3 {
	display: block;
	width: 576px;
	height: auto;
	border-top: 4px solid #ff6600;
	border-bottom: 1px solid #cccccc;
	padding: 10px;
	margin: 25px auto 0 auto;
	}

.hpExExp_Exp {
	width: 576px;
	height: auto;
	margin: 15px auto 0 auto;
	}
	
.hpExExp ul{
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	flex-wrap: wrap;
	width: 576px;
	height: auto;
	margin: 0px auto auto 0px;
	}

.hpExExp li {
	list-style-type: square;
	list-style-position: outside;
	font-weight: 400;
	font-size: 11pt;
	text-indent: -5px;
	margin: 10px auto 0 25px;
	}

.hpExExp table {
	border-collapse: collapse;
	width: 596px;
	margin: 15px auto 25px auto;
	}

.hpExExp tr {
	border: 1px solid #ff6600;
	}
	
.hpExExp td {
	padding: 10px;
	}
	
.hpExExp_td_price {
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: right;
	}
	
/*--hpEx_blue--*/	
.hpEx_blue {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #edf8ff;
	margin: 0;
	padding: 0;
	}

.wrpHpExInr_blue {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.hpEx_blue h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #0d3768;
	}
	
.hpEx_blue h2::after {
	display: block;
	content: "IT consultation example";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #0d3768;
	margin: -2px auto 0 auto;
	}
	
.hpEx_blue h2::before {
	display: block;
	width: fit-content;
	content: "IT相談";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #0d3768;
	margin: -2px auto 4px auto;
	}

.hpExInrWrp_blue {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	}
	
.hpExImage_blue {
	width: fit-content;
	height: 328px;
	margin: 0 auto 0 auto;
	padding: 0;
	box-shadow: 0px 0px 15px 5px #cccccc;
	}

.hpExExp_blue {
	width: 646px;
	height: auto;
	margin: auto;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 15px 5px #cccccc;
	}

.hpExExp_blue h3 {
	display: block;
	width: 576px;
	height: auto;
	border-top: 4px solid #0d3768;
	border-bottom: 1px solid #cccccc;
	padding: 10px;
	margin: 25px auto 0 auto;
	}

.hpExExp_Exp_blue {
	width: 576px;
	height: auto;
	margin: 15px auto 0 auto;
	}
	
.hpExExp_blue ul{
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	flex-wrap: wrap;
	width: 576px;
	height: auto;
	margin: 0px auto auto 0px;
	}

.hpExExp_blue li {
	list-style-type: square;
	list-style-position: outside;
	font-weight: 400;
	font-size: 11pt;
	text-indent: -5px;
	margin: 10px auto 0 25px;
	}

.hpExExp_blue table {
	border-collapse: collapse;
	width: 596px;
	margin: 15px auto 25px auto;
	}

.hpExExp_blue tr {
	border: 1px solid #0d3768;
	}
	
.hpExExp_blue td {
	padding: 10px;
	}
	
.hpExExp_td_price {
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: right;
	}

/*--hpPr--*/
.hpPr {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpPrExInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.hpPr h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #ff6600;
	}
	
.hpPr h2::after {
	display: block;
	content: "Production cost";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #ff6600;
	margin: 0px auto 0 auto;
	}
	
.hpPr h2::before {
	display: block;
	width: fit-content;
	content: "ホームページ制作";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #ff6600;
	margin: 0px auto 4px auto;
	}
	
.hpPr table {
	border-collapse: collapse;
	width: 1050px;
	margin: 25px auto 0 auto;
	}
	
.hpPr tr {
	border: 1px solid #ff6600;
	}
	
.hpPr td:first-child {
	width: 70%;
	padding: 15px;
	}
	
.hpPr td:last-child {
	width: 30%;
	padding: 15px;
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: right;
	}
	
.hpPr_Exp {
	width: 1050px;
	height: auto;
	margin: 25px auto 0;
	text-align: center;
	}
	
/*--hpPr_blue--*/
.hpPr_blue {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpPrExInr_blue {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.hpPr_blue h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #0d3768;
	}
	
.hpPr_blue h2::after {
	display: block;
	content: "IT consultation cost";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #0d3768;
	margin: 0px auto 0 auto;
	}
	
.hpPr_blue h2::before {
	display: block;
	width: fit-content;
	content: "IT相談";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #0d3768;
	margin: 0px auto 4px auto;
	}
	
.hpPr_blue table {
	border-collapse: collapse;
	width: 1050px;
	margin: 25px auto 0 auto;
	}
	
.hpPr_blue tr {
	border: 1px solid #0d3768;
	}
	
.hpPr_blue td:first-child {
	width: 70%;
	padding: 15px;
	}
	
.hpPr_blue td:last-child {
	width: 30%;
	padding: 15px;
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: right;
	}
	
.hpPr_Exp_blue {
	width: 1050px;
	height: auto;
	margin: 25px auto 0;
	text-align: center;
	}

/*--ctaInquiry--*/
.ctaInquiry {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpCtaExInr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1100px;
	height: auto;
	margin: 50px auto 50px auto;
	border: 2px solid #9ed9ff;
	}
	
.ctaInquiry_photo {
	width: 500px;
	height: auto;
	margin: 25px;
	padding: 0;
	}
	
.ctaInquiry_Exp {
	width: 525px;
	height: auto;
	margin: 25px;
	margin-left: 0;
	padding: 0;
	font-size: 14pt;
	text-align: center;
	}
	
.ctaInquiry_btn {
	display: block;
	width: 475px;
	height: auto;
	margin-top: 25px;
	background-color: #0d3768;
	color: #ffffff;
	text-align: center;
	font-size: 14pt;
	padding: 25px;
	transition: all 0.5s;
	}
	
.ctaInquiry_btn::after {
	display: block;
	margin: -27px 0 0 330px;
	content: "〉";
	transition: all 0.5s;
	}
	
.ctaInquiry_btn:hover::after {
	transform: translateX(5px);
	}
	
.ctaInquiry_btn:hover {
	opacity: 0.9;
	transform:translateY(5px);
	}
	
/*--footer--*/
.footer {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	border-top: 1px solid #cccccc;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	}

.wrpFooter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1200px;
	height: auto;
	margin: 50px auto 50px auto;
	}
	
.wrpFooterInr_lft {
	width: 1033px;
	height: auto;
	margin: 0 auto 0 0;
	}
	
.wrpFooterInr_lft h2 {
	font-size: 10pt;
	font-weight: 500;
	margin: 0 0 5px 0;
	}
	
.wrpFooterInr_lft h2::after {
	position: absolute;
	content: ' ';
	width: 80px;
	border-top: 1px solid #cccccc;
	margin: 10px auto auto 0;
	}
	
.naviFooter_Ttl {
	width: fit-content;
	height: auto;
	margin: 5px 0 auto 0;
	font-size: 10pt;
	}
	
.wrpNaviFooter {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	height: auto;
	margin: 0;
	}
	
.wrpNaviFooter ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	height: auto;
	list-style-type: none;
	margin: 5px auto auto 8px;
	padding-left: 0;
	}
	
.wrpNaviFooter li {
	display: flex;
	width: fit-content;
	height: auto;
	font-size: 10pt;
	font-weight: 400;
	margin: 0;
	}
	
.wrpNaviFooter li::after {
	content: '|';
	margin: 0 8px 0 8px
	}
	
.wrpNaviFooter li:last-child::after {
	content: '';
	}
	
.wrpFooterInr_rgt {
	width: fit-content;
	height: auto;
	margin: 0 0 0 0;
	}
	
.footer_cpr {
	width: 100%;
	height: auto;
	text-align: center;
	font-family: 'Roboto flex';
	font-size: 9pt;
	margin: 0 auto 15px auto;
	padding-top: 15px;
	border-top: 1px solid #cccccc;
	}
	
/*--prdFlow--*/
.prdFlow {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #fff6ed;
	margin: 0;
	padding: 0;
	}

.prdFlowExInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.prdFlow h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #ff6600;
	}
	
.prdFlow h2::after {
	display: block;
	content: "Flow of homepage creation";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #ff6600;
	margin: 0px auto 0 auto;
	}
	
.prdFlow h2::before {
	display: block;
	width: fit-content;
	content: "ホームページ制作";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #ff6600;
	margin: 0px auto 4px auto;
	}

.prdFlow_wrpFlow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	}
	
.prdFlow_flow {
	width: 511px;
	height: auto;
	border: 1px solid #ff6600;
	background-color: #ffffff;
	margin: 20px 0 0 0;
	}
	
.prdFlow_flow:first-child,.prdFlow_flow:nth-child(2) {
	margin: 0 0 0 0;
	}
	
.prdFlow_flow_ttl {
	display: flex;
	width: calc(100%-40px);
	height: auto;
	align-items: center;
	padding: 20px;
	background-color: #ffffff;
	border-bottom: 1px solid #cccccc;
	color: #ff6600;
	font-weight: 500;
	font-size: 14pt;
	margin: 0 0 0 0;
	}
	
.prdFlow_flow_exp {
	width: calc(100%-40px);
	height: auto;
	margin: 20px;
	}
	

/*--itCstFlow--*/
.itCstFlow {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #edf8ff;
	margin: 0;
	padding: 0;
	}

.itCstFlowExInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.itCstFlow h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #0d3768;
	}
	
.itCstFlow h2::after {
	display: block;
	content: "Flow of IT consultation";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #0d3768;
	margin: 0px auto 0 auto;
	}
	
.itCstFlow h2::before {
	display: block;
	width: fit-content;
	content: "IT相談";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #0d3768;
	margin: 0px auto 4px auto;
	}

.itCstFlow_wrpFlow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	}
	
.itCstFlow_flow {
	width: 511px;
	height: auto;
	border: 1px solid #0d3768;
	background-color: #ffffff;
	margin: 20px 0 0 0;
	}
	
.itCstFlow_flow:first-child,.itCstFlow_flow:nth-child(2) {
	margin: 0 0 0 0;
	}
	
.itCstFlow_flow_ttl {
	display: flex;
	width: calc(100%-40px);
	height: auto;
	align-items: center;
	padding: 20px;
	background-color: #ffffff;
	border-bottom: 1px solid #cccccc;
	color: #0d3768;
	font-weight: 500;
	font-size: 14pt;
	margin: 0 0 0 0;
	}
	
.itCstFlow_flow_exp {
	width: calc(100%-40px);
	height: auto;
	margin: 20px;
	}
	

/*--▼About--*/
/*--Message--*/
.abtMsg {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpMsgExpInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.msgExpImage {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1050px;
	height: auto;
	margin: 25px auto 0 auto;
	}
	
.msgExp {
	width: 1050px;
	height: auto;
	margin: 25px auto 0 auto;
	text-align: center;
	line-height: 18pt;
	}
	
.abtMsg h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #037000;
	}
	
.abtMsg h2::after {
	display: block;
	content: "Message";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #037000;
	margin: 0px auto 0 auto;
	}	
	
/*--Philosophy--*/
.abtPsp {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpPspExpInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.abtPsp h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #037000;
	}
	
.abtPsp h2::after {
	display: block;
	content: "Philosophy";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #037000;
	margin: 0px auto 0 auto;
	}

/*--
.abtPsp h2::before {
	display: block;
	width: fit-content;
	content: "ホームページ制作";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #037000;
	margin: 0px auto 4px auto;
	}
--*/
	
.wrpPspItem {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 1050px;
	height: auto;
	margin: 25px auto 0 auto;
	/*--border-top: 1px dotted #ff6600;--*/
	/*--border-bottom: 1px dotted #ff6600;--*/
	}
	
.pspNumber {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 365px;
	height: auto;
	margin: 0 auto 0 0;
	color: #037000;
	text-align: right;
	font-family: 'Roboto Flex';
	font-weight: 2;
	font-size: 50pt;
	text-indent: 10px;
	vertical-align: baseline;
	}
	
.pspNumber::before {
	display: flex;
	flex-wrap: nowrap;
	content: '理念';
	padding: 2px 25px 4px 27px;
	width: auto;
	height: fit-content;
	background-color: #037000;
	color: #ffffff;
	font-style: normal;
	font-family: 'Noto Sans JP';
	font-weight: 500;
	font-size: 11pt;
	text-indent: 0px;
	}

.pspNumber::after {
		display: flex;
		height: auto;
		width: 203px;/*--494--*/
		content: '';
		border-top: 1px solid #cccccc;
	}
	
.pspExpWrp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 670px;
	height: auto;
	margin: 0 0 0 0;
	}
	
.pspExpWrp h3 {
	display: flex;
	width: 100%;
	height: auto;
	color: #037000;
	font-size: 20pt;
	font-weight: 600;
	line-height: 26pt;
	margin: 0 auto auto auto;
	}
	
.pspExpWrp p {
	display: flex;
	width: 100%;
	height: auto;
	margin: 25px auto 0 auto;
	line-height: 18pt;
	}
	
/*--Outline--*/
.abtOl {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpOlExInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 50px auto;
	}
	
.abtOl h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #037000;
	}
	
.abtOl h2::after {
	display: block;
	content: "Outline";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #037000;
	margin: 0px auto 0 auto;
	}
	
.abtOl table {
	border-collapse: collapse;
	width: 1050px;
	margin: 25px auto 0 auto;
	}
	
.abtOl tr {
	border: 1px solid #037000;
	}
	
.abtOl td:first-child {
	width: 30%;
	padding: 15px;
	text-align: center;
	}
	
.abtOl td:last-child {
	width: 70%;
	padding: 15px;
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: left;
	}

}

/*------------------------------------------------
▼モバイルデバイス向け
------------------------------------------------*/
/*--▼Window Width:750px以下▼--*/
@media screen and ( max-width:750px ){
	
/*--Link*--*/
#link1,#link2,#link3,#link4,#link5,#link6,#link7,#link8,#link9,#link10,#link11,#link12,#link13,#link14,#link15,#link16,#link17,#link18,#link19,#link20 {
	display: block;
	height: 142px;
	margin-top: -142px;
	}

/*pageHome*/
#pageHome {
	width: 100%;
	padding: 0;
	margin: 0;
	}
	
#pageHeader {
	position: fixed;
	width: 100%;
	height: auto;
	max-height: 80px;
	margin: 0 0 -142px 0;
	background-color: #FFFFFF;
	border-bottom: 1px solid #e0e0e0;
	border-top: 3px solid #0d3768;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	z-index: 100;
	}

.logo {
	width: 40%;/*--178px;--*/
	min-width: 80px;
	height: auto;
	margin: 15px auto 15px 15px;
	}
	
h1 img {
	width: 45%;
	max-width: 100%;
	min-width: 100px;
	height: auto;
	}
	
#pageHeader ul{
	display: none;
	}

	
.headerHbg {
	display: flex;
	width: 80%;
	height: auto;
	max-width: 80px;
	max-height: 80px;
	min-width: 40px;
	min-height: 40px;
	background-color: #0d3768;
	margin: 0 0 0 auto;
	align-self: stretch;
	border: none;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	}
	
.headerHbg::before {
	display: block;
	content: '';
	border-top: 2px solid #fff;
	width: 55%;
	margin: 15px auto 0 auto;
	}
	
.headerHbg::after {
	display: block;
	content: '';
	border-top: 2px solid #fff;
	width: 55%;
	margin: -40px auto 0 auto;
	}
	
/*--Feature--*/
.Feature {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpFtrExpInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.Feature h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #ff6600;
	}
	
.Feature h2::after {
	display: block;
	content: "Features";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #ff6600;
	margin: 0px auto 0 auto;
	}
	
.Feature h2::before {
	display: block;
	width: fit-content;
	content: "ホームページ制作";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #ff6600;
	margin: 0px auto 4px auto;
	}

.wrpFtrItem {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	/*--border-top: 1px dotted #ff6600;--*/
	/*--border-bottom: 1px dotted #ff6600;--*/
	}
	
.ftrNumber {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 365px;
	height: auto;
	margin: 0 auto 0 0;
	color: #ff6600;
	text-align: right;
	font-family: 'Roboto Flex';
	font-weight: 2;
	font-size: 50pt;
	text-indent: 10px;
	vertical-align: baseline;
	}
	
.ftrNumber::before {
	display: flex;
	flex-wrap: nowrap;
	content: '特徴';
	padding: 2px 25px 4px 27px;
	width: auto;
	height: fit-content;
	background-color: #ff6600;
	color: #ffffff;
	font-style: normal;
	font-family: 'Noto Sans JP';
	font-weight: 500;
	font-size: 11pt;
	text-indent: 0px;
	}

.ftrNumber::after {
		display: flex;
		height: auto;
		width: 203px;/*--494--*/
		content: '';
		border-top: 1px solid #cccccc;
	}
	
.ftrExpWrp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 670px;
	height: auto;
	margin: 0 0 0 0;
	}
	
.ftrExpWrp h3 {
	display: flex;
	width: 100%;
	height: auto;
	color: #ff6600;
	font-size: 20pt;
	font-weight: 600;
	line-height: 26pt;
	margin: 0 auto auto auto;
	}
	
.ftrExpWrp p {
	display: flex;
	width: 100%;
	height: auto;
	margin: 25px auto 0 auto;
	line-height: 18pt;
	}

/*--Feature_blue--*/
.Feature_blue {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpFtrExpInr_blue {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.Feature_blue h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #0d3768;
	}
	
.Feature_blue h2::after {
	display: block;
	content: "Features";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #0d3768;
	margin: 0px auto 0 auto;
	}
	
.Feature_blue h2::before {
	display: block;
	width: fit-content;
	content: "IT相談";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #0d3768;
	margin: 0px auto 4px auto;
	}

.wrpFtrItem_blue {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	/*--border-top: 1px dotted #ff6600;--*/
	/*--border-bottom: 1px dotted #ff6600;--*/
	}
	
.ftrNumber_blue {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 365px;
	height: auto;
	margin: 0 auto 0 0;
	color: #0d3768;
	text-align: right;
	font-family: 'Roboto Flex';
	font-weight: 2;
	font-size: 50pt;
	text-indent: 10px;
	vertical-align: baseline;
	}
	
.ftrNumber_blue::before {
	display: flex;
	flex-wrap: nowrap;
	content: '特徴';
	padding: 2px 25px 4px 27px;
	width: auto;
	height: fit-content;
	background-color: #0d3768;
	color: #ffffff;
	font-style: normal;
	font-family: 'Noto Sans JP';
	font-weight: 500;
	font-size: 11pt;
	text-indent: 0px;
	}

.ftrNumber_blue::after {
		display: flex;
		height: auto;
		width: 203px;/*--494--*/
		content: '';
		border-top: 1px solid #cccccc;
	}
	
.ftrExpWrp_blue {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 670px;
	height: auto;
	margin: 0 0 0 0;
	}
	
.ftrExpWrp_blue h3 {
	display: flex;
	width: 100%;
	height: auto;
	color: #0d3768;
	font-size: 20pt;
	font-weight: 600;
	line-height: 26pt;
	margin: 0 auto auto auto;
	}
	
.ftrExpWrp_blue p {
	display: flex;
	width: 100%;
	height: auto;
	margin: 25px auto 0 auto;
	line-height: 18pt;
	}

/*--Keyvisual--*/
.kv {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	padding-top: 80px;
	}

.kvSubPage {
	border-bottom: 1px solid #e0e0e0;
	}

.kvSp {
	display: flex;
	align-items: center;
	width: 1200px;
	height: auto;
	margin: 50px auto 50px auto;
	color: #0d3768;
	font-size: 18pt;
	}
	
.kvWrdWrp {
	display: none;
	align-items: flex-end;
	width: 100%;
	height: 150px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 0;
	}
	
.kvWrd {
	overflow: hidden;
	}
	
.kvWrp {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	text-align: center;
	background-color: #edf8ff;
	overflow: hidden;
	z-index: 20;
	background-image: url(../image/img_keyvisual_scrollword_index_2.png);
	background-repeat: repeat-x;
	background-position: bottom;
	}

/*--
.kvWrdWrp img:first-child{
	animation: loop 50s -25s linear infinite;
	}

.kvWrdWrp img:last-child{
	animation: loop2 50s linear infinite;
	}
--*/
	
.kvWrpInr {
	width: 90%;
	height: auto;
	margin: 25px auto 25px auto;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	overflow: visible;
	z-index: 20;
	}
	
.kvKeyword {
	width: auto;
	height: auto;
	margin: 0px auto 0 auto;
	overflow: visible;
	z-index: 20;
	}
	
.kvKeyword img {
	width: 90%;
	max-width: 460px;
	}

.kvExplan {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #FFFFFF;
	width: auto;
	height: auto;
	margin: 10px auto 0 auto;
	overflow: visible;
	box-shadow: 0px 0px 15px 5px #cccccc;
	}
	
.kvExplan img {
	border: 20px solid #FFFFFF;
	background-color: #FFFFFF;
	width: 90%;
	max-width: 460px;
	}
	
/*--Notice--*/
.Notice {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #9ed9ff;
	margin: 0;
	padding: 0;
	}
	
.wrpNoticeInr {
	width: 90%;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.Notice h2 {
	text-align: center;
	width: 90%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #23323e;
	}
	
.Notice h2::after {
	display: block;
	content: "Notice";;
	font-size: 12pt;
	color: #23323e;
	font-family: 'Roboto Flex';
	font-weight: 500;
	margin: -2px auto 0 auto;
	}

.Notice table {
	border-collapse: collapse;
	width: 100%;
	margin: 25px auto 50px auto;
	}

.Notice tr {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	}
	
.td_Notice_date{
	width: 100%;
	height: auto;
	padding: 15px;
	padding-bottom: 0;
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: left;
	}
	
.Notice tr:first-child {
	border-top: 1px solid #8fc4e6;
	}
	
.td_Notice_title{
	width: 100%;
	height: auto;
	padding: 15px;
	padding-top: 5px;
	border-bottom: 1px solid #8fc4e6;

	}
	
/*--hpEx--*/	
.hpEx {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #fff6ed;
	margin: 0;
	padding: 0;
	}

.wrpHpExInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.hpEx h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #ff6600;
	}
	
.hpEx h2::after {
	display: block;
	content: "Production example";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #ff6600;
	margin: -2px auto 0 auto;
	}
	
.hpEx h2::before {
	display: block;
	width: fit-content;
	content: "ホームページ制作";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #ff6600;
	margin: -2px auto 4px auto;
	}

.hpExInrWrp {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	}
	
.hpExImage {
	width: fit-content;
	height: 446px;
	margin: 0 auto 0 auto;
	padding: 0;
	box-shadow: 0px 0px 15px 5px #cccccc;
	}

.hpExExp {
	width: 646px;
	height: auto;
	margin: auto;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 15px 5px #cccccc;
	}

.hpExExp h3 {
	display: block;
	width: 576px;
	height: auto;
	border-top: 4px solid #ff6600;
	border-bottom: 1px solid #cccccc;
	padding: 10px;
	margin: 25px auto 0 auto;
	}

.hpExExp_Exp {
	width: 576px;
	height: auto;
	margin: 15px auto 0 auto;
	}
	
.hpExExp ul{
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	flex-wrap: wrap;
	width: 576px;
	height: auto;
	margin: 0px auto auto 0px;
	}

.hpExExp li {
	list-style-type: square;
	list-style-position: outside;
	font-weight: 400;
	font-size: 11pt;
	text-indent: -5px;
	margin: 10px auto 0 25px;
	}

.hpExExp table {
	border-collapse: collapse;
	width: 596px;
	margin: 15px auto 25px auto;
	}

.hpExExp tr {
	border: 1px solid #ff6600;
	}
	
.hpExExp td {
	padding: 10px;
	}
	
.hpExExp_td_price {
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: right;
	}
	
/*--hpEx_blue--*/	
.hpEx_blue {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #edf8ff;
	margin: 0;
	padding: 0;
	}

.wrpHpExInr_blue {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.hpEx_blue h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #0d3768;
	}
	
.hpEx_blue h2::after {
	display: block;
	content: "IT consultation example";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #0d3768;
	margin: -2px auto 0 auto;
	}
	
.hpEx_blue h2::before {
	display: block;
	width: fit-content;
	content: "IT相談";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #0d3768;
	margin: -2px auto 4px auto;
	}

.hpExInrWrp_blue {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	}
	
.hpExImage_blue {
	width: fit-content;
	height: 328px;
	margin: 0 auto 0 auto;
	padding: 0;
	box-shadow: 0px 0px 15px 5px #cccccc;
	}

.hpExExp_blue {
	width: 646px;
	height: auto;
	margin: auto;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 15px 5px #cccccc;
	}

.hpExExp_blue h3 {
	display: block;
	width: 576px;
	height: auto;
	border-top: 4px solid #0d3768;
	border-bottom: 1px solid #cccccc;
	padding: 10px;
	margin: 25px auto 0 auto;
	}

.hpExExp_Exp_blue {
	width: 576px;
	height: auto;
	margin: 15px auto 0 auto;
	}
	
.hpExExp_blue ul{
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	flex-wrap: wrap;
	width: 576px;
	height: auto;
	margin: 0px auto auto 0px;
	}

.hpExExp_blue li {
	list-style-type: square;
	list-style-position: outside;
	font-weight: 400;
	font-size: 11pt;
	text-indent: -5px;
	margin: 10px auto 0 25px;
	}

.hpExExp_blue table {
	border-collapse: collapse;
	width: 596px;
	margin: 15px auto 25px auto;
	}

.hpExExp_blue tr {
	border: 1px solid #0d3768;
	}
	
.hpExExp_blue td {
	padding: 10px;
	}
	
.hpExExp_td_price {
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: right;
	}

/*--hpPr--*/
.hpPr {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpPrExInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.hpPr h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #ff6600;
	}
	
.hpPr h2::after {
	display: block;
	content: "Production cost";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #ff6600;
	margin: 0px auto 0 auto;
	}
	
.hpPr h2::before {
	display: block;
	width: fit-content;
	content: "ホームページ制作";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #ff6600;
	margin: 0px auto 4px auto;
	}
	
.hpPr table {
	border-collapse: collapse;
	width: 1050px;
	margin: 25px auto 0 auto;
	}
	
.hpPr tr {
	border: 1px solid #ff6600;
	}
	
.hpPr td:first-child {
	width: 70%;
	padding: 15px;
	}
	
.hpPr td:last-child {
	width: 30%;
	padding: 15px;
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: right;
	}
	
.hpPr_Exp {
	width: 1050px;
	height: auto;
	margin: 25px auto 0;
	text-align: center;
	}
	
/*--hpPr_blue--*/
.hpPr_blue {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpPrExInr_blue {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.hpPr_blue h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #0d3768;
	}
	
.hpPr_blue h2::after {
	display: block;
	content: "IT consultation cost";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #0d3768;
	margin: 0px auto 0 auto;
	}
	
.hpPr_blue h2::before {
	display: block;
	width: fit-content;
	content: "IT相談";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #0d3768;
	margin: 0px auto 4px auto;
	}
	
.hpPr_blue table {
	border-collapse: collapse;
	width: 1050px;
	margin: 25px auto 0 auto;
	}
	
.hpPr_blue tr {
	border: 1px solid #0d3768;
	}
	
.hpPr_blue td:first-child {
	width: 70%;
	padding: 15px;
	}
	
.hpPr_blue td:last-child {
	width: 30%;
	padding: 15px;
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: right;
	}
	
.hpPr_Exp_blue {
	width: 1050px;
	height: auto;
	margin: 25px auto 0;
	text-align: center;
	}

/*--ctaInquiry--*/
.ctaInquiry {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpCtaExInr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1100px;
	height: auto;
	margin: 50px auto 50px auto;
	border: 2px solid #9ed9ff;
	}
	
.ctaInquiry_photo {
	width: 500px;
	height: auto;
	margin: 25px;
	padding: 0;
	}
	
.ctaInquiry_Exp {
	width: 525px;
	height: auto;
	margin: 25px;
	margin-left: 0;
	padding: 0;
	font-size: 14pt;
	text-align: center;
	}
	
.ctaInquiry_btn {
	display: block;
	width: 475px;
	height: auto;
	margin-top: 25px;
	background-color: #0d3768;
	color: #ffffff;
	text-align: center;
	font-size: 14pt;
	padding: 25px;
	transition: all 0.5s;
	}
	
.ctaInquiry_btn::after {
	display: block;
	margin: -27px 0 0 330px;
	content: "〉";
	transition: all 0.5s;
	}
	
.ctaInquiry_btn:hover::after {
	transform: translateX(5px);
	}
	
.ctaInquiry_btn:hover {
	opacity: 0.9;
	transform:translateY(5px);
	}
	
/*--footer--*/
.footer {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	border-top: 1px solid #cccccc;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	}

.wrpFooter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1200px;
	height: auto;
	margin: 50px auto 50px auto;
	}
	
.wrpFooterInr_lft {
	width: 1033px;
	height: auto;
	margin: 0 auto 0 0;
	}
	
.wrpFooterInr_lft h2 {
	font-size: 10pt;
	font-weight: 500;
	margin: 0 0 5px 0;
	}
	
.wrpFooterInr_lft h2::after {
	position: absolute;
	content: ' ';
	width: 80px;
	border-top: 1px solid #cccccc;
	margin: 10px auto auto 0;
	}
	
.naviFooter_Ttl {
	width: fit-content;
	height: auto;
	margin: 5px 0 auto 0;
	font-size: 10pt;
	}
	
.wrpNaviFooter {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	height: auto;
	margin: 0;
	}
	
.wrpNaviFooter ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	height: auto;
	list-style-type: none;
	margin: 5px auto auto 8px;
	padding-left: 0;
	}
	
.wrpNaviFooter li {
	display: flex;
	width: fit-content;
	height: auto;
	font-size: 10pt;
	font-weight: 400;
	margin: 0;
	}
	
.wrpNaviFooter li::after {
	content: '|';
	margin: 0 8px 0 8px
	}
	
.wrpNaviFooter li:last-child::after {
	content: '';
	}
	
.wrpFooterInr_rgt {
	width: fit-content;
	height: auto;
	margin: 0 0 0 0;
	}
	
.footer_cpr {
	width: 100%;
	height: auto;
	text-align: center;
	font-family: 'Roboto flex';
	font-size: 9pt;
	margin: 0 auto 15px auto;
	padding-top: 15px;
	border-top: 1px solid #cccccc;
	}
	
/*--prdFlow--*/
.prdFlow {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #fff6ed;
	margin: 0;
	padding: 0;
	}

.prdFlowExInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.prdFlow h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #ff6600;
	}
	
.prdFlow h2::after {
	display: block;
	content: "Flow of homepage creation";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #ff6600;
	margin: 0px auto 0 auto;
	}
	
.prdFlow h2::before {
	display: block;
	width: fit-content;
	content: "ホームページ制作";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #ff6600;
	margin: 0px auto 4px auto;
	}

.prdFlow_wrpFlow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	}
	
.prdFlow_flow {
	width: 511px;
	height: auto;
	border: 1px solid #ff6600;
	background-color: #ffffff;
	margin: 20px 0 0 0;
	}
	
.prdFlow_flow:first-child,.prdFlow_flow:nth-child(2) {
	margin: 0 0 0 0;
	}
	
.prdFlow_flow_ttl {
	display: flex;
	width: calc(100%-40px);
	height: auto;
	align-items: center;
	padding: 20px;
	background-color: #ffffff;
	border-bottom: 1px solid #cccccc;
	color: #ff6600;
	font-weight: 500;
	font-size: 14pt;
	margin: 0 0 0 0;
	}
	
.prdFlow_flow_exp {
	width: calc(100%-40px);
	height: auto;
	margin: 20px;
	}
	

/*--itCstFlow--*/
.itCstFlow {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #edf8ff;
	margin: 0;
	padding: 0;
	}

.itCstFlowExInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.itCstFlow h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #0d3768;
	}
	
.itCstFlow h2::after {
	display: block;
	content: "Flow of IT consultation";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #0d3768;
	margin: 0px auto 0 auto;
	}
	
.itCstFlow h2::before {
	display: block;
	width: fit-content;
	content: "IT相談";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #0d3768;
	margin: 0px auto 4px auto;
	}

.itCstFlow_wrpFlow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 1050px;
	height: auto;
	margin: 25px auto 50px auto;
	}
	
.itCstFlow_flow {
	width: 511px;
	height: auto;
	border: 1px solid #0d3768;
	background-color: #ffffff;
	margin: 20px 0 0 0;
	}
	
.itCstFlow_flow:first-child,.itCstFlow_flow:nth-child(2) {
	margin: 0 0 0 0;
	}
	
.itCstFlow_flow_ttl {
	display: flex;
	width: calc(100%-40px);
	height: auto;
	align-items: center;
	padding: 20px;
	background-color: #ffffff;
	border-bottom: 1px solid #cccccc;
	color: #0d3768;
	font-weight: 500;
	font-size: 14pt;
	margin: 0 0 0 0;
	}
	
.itCstFlow_flow_exp {
	width: calc(100%-40px);
	height: auto;
	margin: 20px;
	}
	

/*--▼About--*/
/*--Message--*/
.abtMsg {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpMsgExpInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.msgExpImage {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1050px;
	height: auto;
	margin: 25px auto 0 auto;
	}
	
.msgExp {
	width: 1050px;
	height: auto;
	margin: 25px auto 0 auto;
	text-align: center;
	line-height: 18pt;
	}
	
.abtMsg h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #037000;
	}
	
.abtMsg h2::after {
	display: block;
	content: "Message";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #037000;
	margin: 0px auto 0 auto;
	}	
	
/*--Philosophy--*/
.abtPsp {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpPspExpInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 0 auto;
	}
	
.abtPsp h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #037000;
	}
	
.abtPsp h2::after {
	display: block;
	content: "Philosophy";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #037000;
	margin: 0px auto 0 auto;
	}

/*--
.abtPsp h2::before {
	display: block;
	width: fit-content;
	content: "ホームページ制作";
	font-size: 12pt;
	font-weight: 600;
	color: #FFFFFF;
	padding: 4px;
	background-color: #037000;
	margin: 0px auto 4px auto;
	}
--*/
	
.wrpPspItem {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	width: 1050px;
	height: auto;
	margin: 25px auto 0 auto;
	/*--border-top: 1px dotted #ff6600;--*/
	/*--border-bottom: 1px dotted #ff6600;--*/
	}
	
.pspNumber {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 365px;
	height: auto;
	margin: 0 auto 0 0;
	color: #037000;
	text-align: right;
	font-family: 'Roboto Flex';
	font-weight: 2;
	font-size: 50pt;
	text-indent: 10px;
	vertical-align: baseline;
	}
	
.pspNumber::before {
	display: flex;
	flex-wrap: nowrap;
	content: '理念';
	padding: 2px 25px 4px 27px;
	width: auto;
	height: fit-content;
	background-color: #037000;
	color: #ffffff;
	font-style: normal;
	font-family: 'Noto Sans JP';
	font-weight: 500;
	font-size: 11pt;
	text-indent: 0px;
	}

.pspNumber::after {
		display: flex;
		height: auto;
		width: 203px;/*--494--*/
		content: '';
		border-top: 1px solid #cccccc;
	}
	
.pspExpWrp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 670px;
	height: auto;
	margin: 0 0 0 0;
	}
	
.pspExpWrp h3 {
	display: flex;
	width: 100%;
	height: auto;
	color: #037000;
	font-size: 20pt;
	font-weight: 600;
	line-height: 26pt;
	margin: 0 auto auto auto;
	}
	
.pspExpWrp p {
	display: flex;
	width: 100%;
	height: auto;
	margin: 25px auto 0 auto;
	line-height: 18pt;
	}
	
/*--Outline--*/
.abtOl {
	display: flex;
	width: 100%;
	height: auto;
	background-color: #ffffff;
	margin: 0;
	padding: 0;
	}

.wrpOlExInr {
	width: 1050px;
	height: auto;
	margin: 50px auto 50px auto;
	}
	
.abtOl h2 {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
	font-size: 18pt;
	color: #037000;
	}
	
.abtOl h2::after {
	display: block;
	content: "Outline";
	font-size: 12pt;
	font-family: 'Roboto Flex';
	font-weight: 500;
	color: #037000;
	margin: 0px auto 0 auto;
	}
	
.abtOl table {
	border-collapse: collapse;
	width: 1050px;
	margin: 25px auto 0 auto;
	}
	
.abtOl tr {
	border: 1px solid #037000;
	}
	
.abtOl td:first-child {
	width: 30%;
	padding: 15px;
	text-align: center;
	}
	
.abtOl td:last-child {
	width: 70%;
	padding: 15px;
	font-family: 'Roboto Flex';
	font-weight: 400;
	text-align: left;
	}
}