@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* footer menu */
#navi-footer-in ul li {
	font-family: serif;
	padding: 0 0.4em;
	border: none; /* デフォルトの縦線を消すやつ */
	}
#navi-footer-in a {
	font-size:18px;
	padding: 0.2em 0em;
	border-bottom: 1px solid #696969;
	}
#navi-footer-in a:hover {
	background: none; /* デフォルトの背景色を消すやつ */
	}

@media screen and (max-width: 834px){ /*834px以下*/
	#navi-footer-in ul li {
		line-height: 2em;
		width: 100%;
		margin: 0.4em 0;/* フッター横線を横いっぱいに引く */
		}
	}


/************************************
フッターモバイルデザイン
************************************/

.footer {
  margin-top: 40px; /*フッターとコンテンツの間に余白追加*/
  background: #444d53; /*フッター背景色*/
}
.footer-bottom {
  margin-top: 14px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-logo { /*ロゴの位置調整*/
  float: none;
  bottom: auto;
  position: static;
  margin-bottom: 10px;
}
.footer-bottom-logo .logo-image {
  padding: 0;
  max-width: 100px; /*ロゴ画像を少し大きく*/
  margin: 0 auto;
}
.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
  float: none;
  text-align: center;
}
.navi-footer-in > .menu-footer { /*メニューの位置調整*/
  justify-content: center;
  margin-bottom: 1em;
}
.navi-footer-in a {
		font-size:18px;
  color: #aab3b9; /*メニューの文字色*/
}
.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
  color: #aab3b9; /*文字色を通常時と同じに*/
  background: none; /*背景色をなしに*/
  text-decoration: underline; /*アンダーラインを追加*/
}
.footer-bottom.fnm-text-width .menu-footer li {
  line-height: 1; /*メニューの区切りボーダーの高さを1文字分にする*/
}
.copyright {
  color: #aab3b9; /*クレジットの文字色*/
}
@media screen and (max-width: 834px) {
  .navi-footer-in > .menu-footer li.menu-item {
    border: none; /*モバイルでメニューのボーダーを消す*/
  }
}
@media screen and (max-width: 460px) {
  .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
    width: 100%;
    display: block;
    flex: auto;
    padding: 0.3em 0;
  }
}

/************************************
レスポンシブデザイン用のメディアクエリ
************************************/



/*1023px以下*/ /*アピールエリア スマホ*/

@media screen and (max-width: 1023px){
	.header div.header-in {
		display:none!important;
	}
	.appeal {
		background-image: url(http://stage.asiart-tech.com/wp-content/uploads/2022/06/newアピール画像モバイル.jpg);
　　　　　　　　background: right;/* これを追加 */
    }
 }	
	
/*834px以下*/ /*アピールエリア スマホ*/

@media screen and (max-width: 834px){
	.appeal {
		background-image: url(http://stage.asiart-tech.com/wp-content/uploads/2022/06/newアピール画像モバイル.jpg);
　　　　　　　　background: right;/* これを追加 */
    }
}
	
/*480px以下*/ /*アピールエリア スマホ*/

@media screen and (max-width: 480px){
	.appeal {
		background-image: url(http://stage.asiart-tech.com/wp-content/uploads/2022/06/newアピール画像モバイル.jpg);
　　　　background: right;/* これを追加 */
    }
	
	/*アピールエリアの高さ設定　スマホ*/
@media (max-width: 767px){
#appeal {
height: 155vw; 
}
	
	
	/*文字サイズ*/
	.fz-48px{
		font-size:32px;
	}
    .fz-32px{
		font-size:20px;
	}  
	.fz-28px{
		font-size:18px;
	}   
	.fz-20px{
		font-size:14px;
	}  
    .fz-18px{
	font-size:12px;
	}  
	.fz-16px{
		font-size:10px;
	}  
	.fz-14px{
	font-size:9px;
	}
	/* TOPページ ITサービス挿絵表示順 */
	.wp-container-8{
		order:2;
	}
	.wp-container-9{
		order:1;
	}
	/* TOPロゴの横位置調節 */
	.logo-menu-button img {
		margin-left: calc(45% - 100px)!important;
	}
	
	/* 会社情報部分の横位置調整 */
	.company .wp-block-column.is-vertically-aligned-center,.company .wp-block-column.is-vertically-aligned-top {
		text-align: center!important;
	}
	/* 会社情報部分の縦位置調整 */
	.company .company2{
		display:block;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){

/*必要ならばここにコードを書く*/

}

/*480px以下*/
@media screen and (max-width: 480px){

/*必要ならばここにコードを書く*/

}
	
	
/*1023px以下*/ 

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}