@charset "utf-8";
/***************************************************
information
  filename : app_sys_width.css;
***************************************************/
:root {

  --main-font: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;

  --app-alert-cr: #FF5C58; /* 警告カラー */
  --app-alert-bg:#FFF0F3; /* 警告背景カラー */

  --app-main-brd: #ddd; /* メインボーダー色 */
  --app-gray-brd: #e7e7e7;
  --app-gray-txt: #898989;
  --app-gray-bg: #f7f7f7;

  --app-btn-check:#58BFFD;/* 確認ボタン背景カラー */
  --app-btn-save:#FF5C58;/* 完了ボタン背景カラー */
  --app-btn-back:#58BFFD;/* 戻るボタン背景カラー */

  --app-main-hov: rgba(88, 191, 255, 0.25); /* メインカラー 不透明度25%*/
  --app-main-hov-c: rgba(88, 191, 255, 0.2); /* メインカラー差色 不透明度20%*/

  /* トンマナ設定 */
  --app-brd-weight:2px;
  --txt-size-s:14px;
}
@media screen and (max-width:767px){
  :root{
    --txt-size-s:13px;
  }
}

/***************************************************
デフォルトコンテイナー幅
***************************************************/
.container, .containerS, .containerW, .flex_sideBar{ margin:auto;}
.container, .inputBox,.stepBox { max-width:850px;}
.containerS{ max-width:650px;}
.containerW, .flex_sideBar{ max-width:1280px;}

@media screen and  (min-width:961px) and (max-width: 1360px) {
  .containerW, .flex_sideBar{
    width: 100%;
    padding: 0px 40px;
  }
}
@media screen and (max-width:960px){
  .container, .containerW, .flex_sideBar,.stepBox{
    width: 90%;
    padding:0px;
  }
}
@media screen and (max-width:767px) {
  .flex_sideBar{
    width:100%;
  }
  .containerS{
    width: 90%;
    padding: 0px;
  }
}
@media screen and (max-width:540px){
  .stepBox{
    width:95%;
  }
}
/***************************************************
パディング指定
***************************************************/
.articleBox h2, .articleBox h3{
	margin:48px 12px 24px;
}
article h4{
	margin:24px 12px 16px;
}
.articleBox p,.inner{
	margin:16px 48px;
}
.contents .articleBox p{
  margin:32px 48px;

}
.listBox li{
  margin:10px 48px;
}

.innerS{
	max-width:650px;
	margin:auto;
}

@media screen and (max-width:767px){
	.articleBox{
		padding:12px 0px 28px;
	}
	.articleBox h2, .articleBox h3{
		margin:48px 10px 24px;
	}
	.articleBox h4{
		margin:24px 10px 16px;
	}
	.articleBox p,.inner,.innerS{
		margin:16px 40px;
	}
  .contents article p{
    margin:24px 40px;
  }  
  .listBox li{
    margin:10px 40px;
  }  

}
@media screen and (max-width:540px){
	article{
		padding:1px 0px 20px;
	}
	article h2, article h3{
		margin:40px 24px 20px;
	}
	article h4{
		margin:20px 24px 16px;
	}
	article p,.inner,.innerS{
		margin:16px 24px 16px;
	}
  .contents article p{
    margin:24px;
  }  
  .listBox li{
    margin:8px 24px;
  }  

}
/***************************************************
サイド　メニュー
***************************************************/
.flex_sideBar{ display:flex;}
.item_main{ width:80%;}
.item_sub { width:250px;}
@media screen and (max-width:767px){
  .flex_sideBar{ display:block;}
  .item_main{ width:100%;}
}

/***************************************************
フォントサイズ
***************************************************/
h2,h3{
	font-size:20px;
}
@media screen and (max-width:540px){
	h2,h3{
		font-size:18px;
	}
}