/*
Theme Name:  NARTS 
Theme URI: https://www.narts.jp/
Description: for NARTS.
Version: 1.0 / 2025.02.01-
Author: <a href="http://www.narts.jp/">NARTS</a>
Author URI:
*/


body {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
	color: #222;
	font-size: 15px;
	font-weight: 400;
	line-height: 2.5;
	letter-spacing: 0.03em;
	text-align: justify;
}
a {
	color: #222;
	text-decoration: none;
	transition: 0.3s ease-out;
}
a:hover {
	color:#3571b9;
}

::selection{background-color:#3571b9; color: #FFF;}
::-moz-selection{background-color:#3571b9; color: #FFF;}

body , header , footer{
	min-width: 400px;
	max-width: 1920px;
	margin: auto;
}
@media screen and (max-width:640px) {
	body {
		line-height: 2.2;
	}
}



/*============================================================================

	モーション　＊　wowオリジナル　fadeInUpMin

============================================================================*/
.fadeInUpMin {
    animation-name: fadeInUpMin;
}
@keyframes fadeInUpMin {
    from { opacity: 0; transform: translate3d(0, 10%, 0);}
    to { opacity: 1; transform: none;}
}



#loftloader-wrapper {
	min-width: 400px !important;
}
#loftloader-wrapper .loader-section.section-fade {
	min-width: 400px !important;
}




/*============================================================================

	#mainvisual　＊　下層のMV

============================================================================*/
#mainvisual {
	position: relative;
	width: 100%;
	height: 400px;
	background: #FFF;
	overflow: clip;
}
#mainvisual .inner {
	position: relative;
	width: 90%;
	max-width: 1200px;
	margin: auto;
	z-index: 8;
	text-align: center;
}
@media screen and (max-width:640px) {
	#mainvisual {
		height: 250px;
	}
}



/*------------------------------ 背景 ------------------------------*/
#mainvisual::before {
	position: absolute; content: "";
	top: -650px;
	background: url("images/top/top_img04.png") no-repeat;
	background-size: 900px 1050px;
	width: 900px; height: 1050px;
	left: 50%; margin-left: -960px;
}
#mainvisual::after {
	position: absolute; content: "";
	top: -75px;
	background: url("images/top/top_img05.png") no-repeat;
	background-size: 960px 875px;
	width: 960px; height: 875px;
	left: 50%;
}
@media screen and (max-width:640px) {
	#mainvisual::before {
		top: -790px;
		margin-left: -840px;
	}
	#mainvisual::after {
		top: -125px;
		margin-left: -230px;
	}
}



/*------------------------------ ページタイトル ------------------------------*/
#mainvisual h2 {
	padding-top: 200px;
	font-size: 43px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 3px;
}
@media screen and (max-width:640px) {
	#mainvisual h2 {
		padding-top: 135px;
		font-size: 27px;
	}
	.page-id-2172 #mainvisual h2 { /*システム開発/パッケージ販売：２行*/
		padding-top: 125px;
	}
}








/*==================================================================

	ぱんくず

==================================================================*/
.breadcrumbs {	
	width: 100%;
    margin: 0 auto 30px;
    font-size: 13px;
    background-image: linear-gradient(90deg, #FFF 50%, #daf1f9);
    box-sizing: border-box;
}	
.breadcrumbs p {	
	line-height: 2;
	padding: 8px 0;
    box-sizing: border-box;
    width: 90%;
    margin: auto;
	max-width: 1100px;
}	
.breadcrumbs a {	
	color:#3571b9;
}	

@media screen and (max-width:880px) {
}
@media screen and (max-width:640px) {
}




/*==================================================================

	main　＊　下層body

==================================================================*/
main {
	position: relative;
	width: 90%;
	max-width: 1100px;
	margin: auto;
	padding: 60px 0 120px;
    display: flex;
    justify-content: space-between;
}

main #mokuji {
	width: 23%;
}
main #wrapper {
	width: 68%;
}
main #wrapper strong {
	color: #3571b9;
}
main #wrapper a {
	color: #3571b9;
	opacity: 1;
}
main #wrapper a:hover {
	opacity: 0.7;
}


@media screen and (max-width:880px) {
	main {
		padding: 60px 0 120px;
		display: block;
	}
	main #mokuji {
		display: none;
	}
	main #wrapper {
		width: 100%;
	}
}



/*------------------------------ １カラムの場合 ------------------------------*/
main#no-flex {
    display: block;
	max-width: 980px;
}
main#no-flex .nav_contact a { /*遠隔サポートページのボタン*/
	width: 100%;
	max-width: 380px;
	font-size: 15px;
	border-radius: 40px;
	margin-top: 10px;
}




/*==================================================================

	 目次　＊　下層body

==================================================================*/
main #mokuji dt {
	font-size: 17px;
    font-weight: 600;
    border-bottom: 2px solid #3571b9;
    line-height: 1.7;
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-top: 10px;
}
main #mokuji dd {
	position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
	transition: 0.3s ease-out;
	line-height: 1.7;
}
main #mokuji dd::before{
	position: absolute;
	content: "";
	width: 15px;
	height: 1px;
	background: #9ec2de;
    top: 14px;
    left: 0;
	transition: 0.3s ease-out;
}

/*hover*/
main #mokuji dd:hover {
    padding-left: 40px;
}
main #mokuji dd:hover::before{
	width: 20px;
}


/*アーカイブページはli*/
main #mokuji li {
	position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
	transition: 0.3s ease-out;
	line-height: 1.7;
}
main #mokuji li::before{
	position: absolute;
	content: "";
	width: 15px;
	height: 1px;
	background: #9ec2de;
    top: 14px;
    left: 0;
	transition: 0.3s ease-out;
}
main #mokuji li .day {
	color: rgb(136, 136, 136);
    font-family: "Jost", serif;
	padding-top: 4px;
}
/*アーカイブページhover*/
main #mokuji li:hover {
    padding-left: 40px;
}
main #mokuji li:hover::before{
	width: 20px;
}
/*アーカイブページ、親カテゴリーはhoverで動かさない*/
main #mokuji dl:first-of-type ul li:hover {
    padding-left: 30px;
}
main #mokuji dl:first-of-type ul li:hover::before{
	width: 15px;
}
/*アーカイブページ、子カテゴリーはhoverで動かす*/
main #mokuji dl:first-of-type ul li ul {
    margin-top: 10px;
}
main #mokuji dl:first-of-type ul li ul li {
    margin-bottom: 10px;
}
main #mokuji dl:first-of-type ul li ul li:hover {
    padding-left: 40px;
}
main #mokuji dl:first-of-type ul li ul li:hover::before{
	width: 20px;
}





/*==================================================================

	 タイトル　＊　下層body

==================================================================*/
main h2 {
	position: relative;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 2px; 
	line-height: 1.6;
	margin-bottom: 30px;
	padding-left: 40px;
	margin-top: 50px;
}
main h2::before {
    position: absolute;
    content: "";
    background: url(images/icon01.png) no-repeat;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    top: 13px;
    left: 0;
}
main h2:first-child {
	margin-top: 0;
}
@media screen and (max-width:880px) {
	main h2:first-child {
		margin-top: 50px;
	}
}
@media screen and (max-width:640px) {
	main h2 {
		font-size: 20px;
		letter-spacing: 1.5px; 
		margin-bottom: 20px;
		padding-left: 30px;
		margin-top: 30px;
	}
	main h2::before {
		top: 6px;
	}
}




main h3 {
	position: relative;
    margin-bottom: 20px;
    padding: 0 0 5px;
    font-size: 22px;
    font-weight: 600;
    border-bottom: 2px solid #3571b9;
}
@media screen and (max-width:640px) {
	main h3 {
		font-size: 18px;
	}
}




main h4 {
	margin-bottom: 15px;
	font-size: 20px;
    font-weight: 600;
	color:#3571b9;
	line-height: 1.6;
}
@media screen and (max-width:640px) {
	main h4 {
		font-size: 17px;
	}
}





/*==================================================================

	table

==================================================================*/
#wrapper table { 
	width:100%;
	border-top: 1px solid #e6e6e6;
	margin: 20px 0;
}
#wrapper table th , #wrapper table td {
	padding: 20px 30px;
	border: 1px solid #e6e6e6;
}
#wrapper table th{
	font-weight:bold;
	text-align: center;
}
#wrapper table tr:first-of-type th { 
	background: #f7f7f7;
}
@media screen and (max-width:640px) {
	#wrapper table { 
		font-size: 14px;
		line-height: 1.8;
	}
	#wrapper table th , #wrapper table td {
		padding: 15px 10px;
	}
}





/*==================================================================

	list　＊　左に水色の●のシンプルなリスト

==================================================================*/
#wrapper li {
	position: relative;
	margin-bottom: 5px;
	padding-left: 42px;
}
#wrapper li::before {
	position: absolute;
    content: "";
    top: 14px;
    left: 10px;
    width: 10px;
    height: 10px;
    background-image: linear-gradient(90deg, #bff2fe, #d1cbfa);
    border-radius: 100%;
}
@media screen and (max-width:640px) {
	#wrapper li {
		padding-left: 29px;
	}
	#wrapper li::before {
		top: 13px;
		left: 5px;
		width: 8px;
		height: 8px;
	}
}







/*==================================================================

	btn

==================================================================*/

/*------------------------------ btn01 ------------------------------*/
.btn01 {
	position: relative;
	text-align: center;
}
.btn01 a {
	position: relative;
	display: block;
	width: 240px;
	margin: auto;
	padding: 15px 0 17px;
	background: #FFF;
	border: 1px solid #3571b9;
	border-radius: 50px;
	color: #3571b9;
	line-height: 1;
	overflow: hidden;
	transition: 0.3s ease-out;
}
.btn01 a em {
	position: relative;
	z-index: 2;
}
.btn01 a::after { /*arrow*/
	position: absolute;	content: "";
	background: url("images/icon02.png");
	background-size: 25px 9px;
	width: 25px; height: 9px;
	top: 39%; right: 20px;
	transition: 0.3s ease-out;
}
.btn01 a::before { /*hoverで出る色*/
	position: absolute; content: "";
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 100%;
	background: #dff0fe;
	transition: 0.3s ease-out;
}



/*----- hover -----*/
.btn01 a:hover {
	color: #FFF;
	letter-spacing: 1px;
}
.btn01 a:hover::after {
	right: 15px;
	background: url("images/icon03.png");
	background-size: 25px 9px;
}
.btn01 a:hover::before {
	top: -125px;
	left: -30px;
	width: 300px;
	height: 300px;
	background: #3571b9;
}






/*==================================================================

		#cta_contact　＊　お問い合わせ　＊　CTA

==================================================================*/
#cta_contact {
	position: relative;
	width: 100%;
	height: 500px;
	background: url("images/contact_img02.png")no-repeat right top -50px, linear-gradient(90deg, #91b7f6 0%, #bfeef8 100%);
	background-size: 305px auto, auto;
}
#cta_contact::before {
	position: absolute; content: "";
	background: url("images/contact_img01.png") no-repeat;
	background-size: 1008px 720px;
	width: 1008px; height: 720px;
	top: 0; 
	left: 50%; margin-left: -960px;
}
@media screen and (max-width:1200px) {
	#cta_contact::before {
		background-size: 800px auto;
		width: 800px;
		margin-left: -750px;
	}
}
@media screen and (max-width:950px) {
	#cta_contact::before {
		background-size: 800px auto;
		width: 800px;
		margin-left: -800px;
	}
}
@media screen and (max-width:820px) {
	#cta_contact {
		height: auto;
	}
	#cta_contact::before {
		display: none;
	}
}



#cta_contact .inner {
	width: 90%;
	max-width: 1200px;
	height: 100%;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
#cta_contact .inner .box {
	position: relative;
	width: 45%;
	text-align: center;
	z-index: 2;
}
@media screen and (max-width:1050px) {
	#cta_contact .inner .box {
		width: 50%;
	}
}
@media screen and (max-width:950px) {
	#cta_contact .inner .box {
		width: 60%;
	}
}
@media screen and (max-width:820px) {
	#cta_contact .inner {
		display: block;
	}
	#cta_contact .inner .box {
		width: 100%;
		padding-top: 30px;
		padding-bottom: 40px;
	}
}



/*------------------------------ h2上書きして変更 ------------------------------*/
#cta_contact h2 {
	position: relative;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 30px;
	letter-spacing: 3px;
}
#cta_contact h2::before {
	position: absolute; content: "";
	background: url("images/icon01.png") no-repeat;
	background-size: 20px 20px;
	width: 20px; height: 20px;
	top: 0;
	left: 50%; margin-left: -10px;
}
#cta_contact h2 em {
	position: relative;
	display: block;
	padding-top: 40px;
	padding-left: 0;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1.5px;
	font-family: "Jost", serif;
    color: #3571b9;
}
#cta_contact h2 em::before { display: none;}
@media screen and (max-width:640px) {
	#cta_contact h2 {
		font-size: 28px;
		margin-bottom: 20px;
	}
	#cta_contact h2::before {
		display: none;
	}
}



/*------------------------------ 本文 ------------------------------*/
.cta_contact_text {
	margin-bottom: 40px;
	font-weight: 500;
	line-height: 2;
}
@media screen and (max-width:640px) {
	.cta_contact_text {
		margin-bottom: 30px;
	}
}



/*------------------------------ ボタンたち ------------------------------*/
#cta_contact .btns {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}
#cta_contact .btns a {
	display: block;
	width: 240px;
	padding: 18px 0 20px;
	margin: 0 10px;
	background: #2772cd;
	color: #FFF;
	border-radius: 50px;
	font-size: 17px;
	line-height: 1;
}
#cta_contact .btns p:last-of-type a {
	background: #0e98cb;
}
@media screen and (max-width:550px) {
	#cta_contact .btns {
		display: block;
	}
	#cta_contact .btns a {
		display: block;
		width: 90%;
		padding: 20px 0 22px;
		font-size: 16px;
		margin: 0 auto 10px;
	}
}



#cta_contact .btns a img {
	position: relative;
	top: 1px;
	margin-right: 10px;
}



/*----- hover -----*/
#cta_contact .btns a:hover {
	background: #1558aa;
}
#cta_contact .btns p:last-of-type a:hover {
	background: #007ba8;
}








/*==================================================================

		$NARTSについて

==================================================================*/
.page-id-8 #wrapper table th , .page-id-8 #wrapper table td {
	padding: 10px 20px;
	border: none;
	border-bottom: 1px solid #e6e6e6;
}
.page-id-8 #wrapper table th{
	text-align: left;
}
.page-id-8 #wrapper table tr:first-of-type th { 
	background: #FFF;
}
@media screen and (max-width:640px) {
	.page-id-8 #wrapper table th , .page-id-8 #wrapper table td {
		padding: 10px 10px;
	}
}






/*==================================================================

		$ITコンサルティング

==================================================================*/
.page-id-4 #wrapper ul { /*利用方法について*/
	margin-top: 20px;
}

.page-id-4 #wrapper .btn01 a { /*申込方法*/
	width: 300px;
	padding: 20px 0 22px;
	margin: 20px 0 0;
}
.page-id-4 #wrapper .btn01 a::after {
    top: 42%;
}
.page-id-4 #wrapper .btn01 a:hover {
	color: #FFF;
}
.page-id-4 #wrapper .btn01 a:hover::before {
	top: -170px;
	left: -30px;
	width: 400px;
	height: 400px;
}
@media screen and (max-width:640px) {
	.page-id-4 #wrapper .btn01 a { /*申込方法*/
		margin: 20px auto 0;
	}
}







/*==================================================================

		$セミナー/講演

==================================================================*/
.page-id-7 #wrapper ul {
	margin: 20px 0;
}








/*==================================================================

		$システム開発/パッケージ販売

==================================================================*/
.page-id-2172 #wrapper .btn01 a { /*お見積・購入依頼（無料）*/
	width: 300px;
	padding: 20px 0 22px;
	margin: 20px 0 0;
}
.page-id-2172 #wrapper .btn01 a::after {
    top: 42%;
}
.page-id-2172 #wrapper .btn01 a:hover {
	color: #FFF;
}
.page-id-2172 #wrapper .btn01 a:hover::before {
	top: -170px;
	left: -30px;
	width: 400px;
	height: 400px;
}
.page-id-2172 #wrapper h4 { /*よくある質問*/
	margin-top: 30px;
}
@media screen and (max-width:640px) {
	.page-id-2172 #wrapper .btn01 a { /*お見積・購入依頼（無料）*/
		margin: 20px auto 0;
	}
}






/*==================================================================

		$HP制作/SEO

==================================================================*/
.page-id-5 #wrapper .btn01 a { /*お見積・購入依頼（無料）*/
	width: 300px;
	padding: 20px 0 22px;
	margin: 20px 0 0;
}
.page-id-5 #wrapper .btn01 a::after {
    top: 42%;
}
.page-id-5 #wrapper .btn01 a:hover {
	color: #FFF;
}
.page-id-5 #wrapper .btn01 a:hover::before {
	top: -170px;
	left: -30px;
	width: 400px;
	height: 400px;
}
.page-id-5 #wrapper h4 { /*よくある質問*/
	margin-top: 30px;
}
@media screen and (max-width:640px) {
	.page-id-5 #wrapper .btn01 a { /*お見積・購入依頼（無料）*/
		margin: 20px auto 0;
	}
}









/*==================================================================

		$SEO/SEM

==================================================================*/
.page-id-6 #wrapper .btn01 a { /*お見積・購入依頼（無料）*/
	width: 300px;
	padding: 20px 0 22px;
	margin: 20px 0 0;
}
.page-id-6 #wrapper .btn01 a::after {
    top: 42%;
}
.page-id-6 #wrapper .btn01 a:hover {
	color: #FFF;
}
.page-id-6 #wrapper .btn01 a:hover::before {
	top: -170px;
	left: -30px;
	width: 400px;
	height: 400px;
}
.page-id-6 #wrapper h4 { /*よくある質問*/
	margin-top: 30px;
}
@media screen and (max-width:640px) {
	.page-id-6 #wrapper .btn01 a { /*お見積・購入依頼（無料）*/
		margin: 20px auto 0;
	}
}





/*==================================================================

		$特定商取引に関する表示

==================================================================*/
.page-id-10 table { 
	width:100%;
	border-top: 1px solid #e6e6e6;
	margin: 20px 0;
}
.page-id-10 table th , .page-id-10 table td {
	padding: 20px 30px;
	border: 1px solid #e6e6e6;
}
.page-id-10 table th{
	font-weight:bold;
	text-align: center;
}
.page-id-10 table tr:first-of-type th { 
	background: #f7f7f7;
}
@media screen and (max-width:640px) {
	.page-id-10 table th , .page-id-10 table td {
		padding: 15px 10px;
	}
}







/*==================================================================

		$投稿一覧ページ(index.php)　＊　$投稿ページ(single.php)　共通

==================================================================*/

/*------------------------------デフォルトのliの設定を削除------------------------------*/
.archive #wrapper li , 
.single #wrapper li { padding: 0; margin-bottom: 20px;}
.archive #wrapper li::before , 
.single #wrapper li::before { display: none;}


/*------------------------------お知らせタイトル------------------------------*/
.archive #wrapper h3.title , 
.single #wrapper h3.title {  
    padding: 0 0 15px;   
	line-height: 1.7;
}



/*------------------------------日付とカテゴリー------------------------------*/
.archive #wrapper .topics_date-cate , 
.single #wrapper .topics_date-cate {
	display: flex;
    justify-content: flex-end;
    line-height: 1;
}

.archive #wrapper .topics-date , 
.single #wrapper .topics-date { /*日付*/
	position: relative;
	color: rgb(136, 136, 136);
    font-family: "Jost", serif;
    margin-right: 30px;
}
.archive #wrapper .topics-date::after , 
.single #wrapper .topics-date::after { /*●*/
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    top: 4px;
    right: -20px;
    border-radius: 100%;
    background: rgb(53, 113, 185);
}

.archive #wrapper .topics-cate ul li , 
.single #wrapper .topics-cate ul li { /*カテゴリー*/
	position: relative;
	display: inline-block;    
    top: -4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}
.archive #wrapper .topics-cate ul li:nth-child(n+2) , 
.single #wrapper .topics-cate ul li:nth-child(n+2) { 
    padding-left: 15px;
}
.archive #wrapper .topics-cate ul li:nth-child(n+2)::after , 
.single #wrapper .topics-cate ul li:nth-child(n+2)::after { 
    position: absolute;
	content: "、";
    left: 0px;
}
@media screen and (max-width:640px) {
	.archive #wrapper .topics-cate ul li , 
	.single #wrapper .topics-cate ul li { /*カテゴリー*/
		font-size: 14px; 
	}
}



/*------------------------------本文------------------------------*/
.archive #wrapper .text , 
.single #wrapper .text{
	position:relative;
	margin-bottom:50px;
}
.archive #wrapper .text p , 
.single #wrapper .text p{
	margin-bottom:1em;
	line-height: 2.1;
}
.archive #wrapper .text:last-child , 
.single #wrapper .text:last-child {
	margin-bottom:0;
}



/*------------------------------投稿一覧ページ　＊　ページネーション------------------------------*/
.nav-links ul.page-numbers {
	text-align:center;
}
.nav-links ul.page-numbers li  {
    display: inline-block;
    min-width: 20px;
}
.nav-links ul.page-numbers li .page-numbers  {
	background: #FFF;
    padding: 10px 10px;
	border: 1px solid #3571b9;
	box-sizing: border-box;
}
.nav-links ul.page-numbers li .dots  {
	border: none;
}
.nav-links ul.page-numbers li .current {
    background :#3571b9;
	color:#FFF;
}
@media screen and (max-width:640px) {
	.nav-links {
		margin: auto;
	}
}



/*------------------------------投稿ページ　＊　ページネーション------------------------------*/
.single_nav {
	text-align: right;
}
.single_nav p {
	display:inline-block;
}
.single_nav a {
	margin:0 10px;
	padding-bottom: 7px;
    font-size: 14px;
	border-bottom: 1px solid #3571b9;
}
@media screen and (max-width:640px) {
	.single_nav {
		text-align: center;
	}
}





/*==================================================================

		$お問い合わせページ　＊　Contact Form 7カスタマイズ

==================================================================*/
.page-id-198 #wrapper p img { /*メールアドレス画像*/
	position: relative;
	top: -12px;
}
@media screen and (max-width:640px) {
	.page-id-198 #wrapper p img { /*メールアドレス画像*/
		top: -9px;
	}
}



/*------------------------------フォーム設定------------------------------*/
.page-id-198 .contact-form {}
.page-id-198 .contact-form .cf-line { /*項目とinputエリア、横並び*/
	display: flex;
    justify-content: space-between;
	border-bottom: 1px solid #e6e6e6;    
	padding: 20px 0;
}
.page-id-198 .contact-form .cf-line .koumoku { /*項目エリア*/
	width: 30%;
}
.page-id-198 .contact-form .cf-line .koumoku span { /*項目＊必須*/
	margin-left: 10px;
}
.page-id-198 .contact-form .cf-line .input-area { /*inputエリア*/
	width: 65%;
}
.page-id-198 .contact-form .cf-line .input-area input { /*inputエリア＊input*/
	border: 1px solid #bbb;
    border-radius: 5px;
    padding: 10px 20px;
    box-sizing: border-box;
    width: 100%;
}
.page-id-198 .contact-form .cf-line:nth-of-type(4) span { /*選択ボックス*/
	display: block;
}
.page-id-198 .contact-form .cf-line:nth-of-type(4) span label input { /*選択ボックス*/
	width: auto;
	margin-right: 10px;
}
.page-id-198 .contact-form .cf-line:nth-of-type(4) span label span { /*選択ボックス*/
	display: inline-block;
}
.page-id-198 .contact-form .cf-line .input-area textarea { /*inputエリア＊textarea*/
	border: 1px solid #bbb;
    border-radius: 5px;
    padding: 10px 20px;
    box-sizing: border-box;
    width: 100%;
}
.page-id-198 .contact-form .cf-line:last-of-type { /*送信ボタンエリア*/
	border-bottom: none;
	text-align: center;
	display: block;
}
input:focus {
  outline: 2px solid #0e98cb;
}
textarea:focus {
  outline: 2px solid #0e98cb;
}
input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 16px;
  font-weight: 600;
  width: 70%;
  padding: 20px 0;
  border-radius: 50px;
  background: linear-gradient(90deg, #1d4b8a, #3072bb);
  border: none;
  color: #fff;
  cursor: pointer;
}
span.wpcf7-spinner {
  display: none;
}


@media screen and (max-width:640px) {
	.page-id-198 .contact-form .cf-line { /*項目とinputエリア、横並び*/
		display: block;
	}
	.page-id-198 .contact-form .cf-line .koumoku { /*項目エリア*/
		width: 100%;
        font-weight: 500;
        margin-bottom: 5px;
	}
	.page-id-198 .contact-form .cf-line .input-area { /*inputエリア*/
		width: 100%;
	}
	.page-id-198 .contact-form .cf-line .input-area textarea { /*inputエリア＊textarea*/
		height: 150px;
	}
}




/* /webdesignの実績table表示を見やすくする(Takuri) */
#wrapper table.result tr:nth-child(odd) td {
	border-bottom-style: dashed;
	line-height: 1.35em;
}
#wrapper table.result tr:nth-child(even) td {
	border-top: none;
}
@media screen and (max-width:640px) {
	#wrapper table.result tr:nth-child(odd) td{
		height: auto !important;
		padding-bottom: 8px;
	}
	#wrapper table.result tr:nth-child(even) {
		height: auto !important;
	}
	#wrapper table.result tr:nth-child(even) td{
		height: auto !important;
	}
}