@charset "utf-8";
:root {
  --color_nv: #042843;
	--color_blue: #0067B4;
	--color_pink: #D10577;
	--color_yellow: #F9E441;
  --bg_color: #F3F4F8;
  --bg_color2: #E3E9EF;
  --bg_color_light_blue: #E8F3FE;
}

/*---------------------

共通

----------------------*/
.txt_blue{
	color: var(--color_blue) !important
}
.txt_nv{
	color:  var(--color_nv) !important;
}
.txt_pink{
	color:  var(--color_pink) !important;
}
.box_gray{
	background: var(--bg_color) 
}

.box_light_blue{
	background: var(--bg_color_light_blue)
}
.box_border{
	border: 1px solid var(--color_blue);
	border-radius: 20px;
	padding: 20px;
}
.picS{
margin-left:auto;
margin-right:auto;
max-width:720px;
}
.fBox{
display:flex;
justify-content:space-around;
}
/*---------------------

helpHeader

----------------------*/
.helpHeader {
  padding: 20px;
  background-color: var(--bg_color2)
}
.helpHeader ul {}
.helpHeader li {
  display: inline-block;
  padding: 10px 30px 0 0;
}
.helpHeader li a {
  color: var(--color_nv)
}
.helpHeader li a:hover {
}
@media screen and (max-width:970px) {
  .helpHeader li {
    display: block;
  }
  .helpHeader li a {
    text-decoration: underline;
    color: var(--color_nv)
  }
  .helpHeader li a:hover {
    text-decoration: none;
  }
}
/*---------------------

helpWrap構造

----------------------*/
.helpWrap {
  display: flex;
  justify-content: flex-start;
}
.helpSide {
  width: 320px;
  background: #fff;
  border-right: 1px solid var(--bg_color2);
	position: sticky;
  top: 4px;         /* 80pxスクロール後にここで固定 */
  align-self: flex-start;  /* flex子の高さ伸び防止（重要） */
  height: max-content;     /* コンテンツ分だけの高さに */
  z-index: 1;        /* ヘッダー等の下に潜る場合は上げる */
}
.helpMain {
  width: calc(100% - 320px);
  text-align: center;
}
@media screen and (max-width:970px) {
  .helpWrap {
    display: flex
  }
  .helpMain {
    width: 100%;
  }
}
.howtouse .trouble{
display:none;
}
.howtouse .has_child > a::before,
.howtouse .has_child > a::after{
display:none;
}
/*---------------------

helpSide

----------------------*/
.helpSide h3 {
  padding: 20px 16px;
  line-height: 1.75;
  border-bottom: 1px solid var(--bg_color2);
}
.helpSide li a {
  display: block;
  padding: 10px 10px 10px 16px;
  background-color: var(--bg_color);
  color: #042843;
  text-decoration: none;
	font-weight: 600;
}
.helpSide li a:hover {
  text-decoration: underline;
}
.helpSide .helpSideList > li {
  border-bottom: 1px solid var(--bg_color2);
}
.helpSide .trouble > li a {
  position: relative;
	font-weight: 400;
}
.helpSide .trouble > li a::before {
  content: '- ';
  display: inline-block;
  padding-right: 10px
}
.helpSide .trouble > li a{
background-color:#f7f8fb;
}
.helpSide .trouble {
border-top: var(--bg_color2);
}
/* 共通アイコン描画 */
.has_child > a {
  --icon-size: 15px;
  --stroke: 2px;
  --color: #042843;
  position: relative;
  display: block;
  padding-right: calc(var(--icon-size) + 10px);
}
/* 横線（常に表示） */
.has_child > a::before, .has_child > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  background: var(--color);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
/* 横線（－） */
.has_child > a::before {
  width: var(--icon-size);
  height: var(--stroke);
  transform: translateY(-50%);
}
/* 縦線（＋用） */
.has_child > a::after {
  right: calc(10px + (var(--icon-size) - var(--stroke)) / 2);
  width: var(--stroke);
  height: var(--icon-size);
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}
/* open のときだけ縦棒を表示して「＋」に */
.has_child.open > a::after {
  transform: translateY(-50%) scaleY(0); /* デフォルトは非表示（＝マイナス記号） */
  opacity: 0;
}
.has_child .troubleList {
  display: none; /* 初期状態は閉じる */
}
/*---------------------

helpMain

----------------------*/
/*---------------------

helpRead

----------------------*/
.helpRead h1 {
  display: inline-block;
  ;
  background-color: var(--bg_color2);
  color: var(--color_nv);
  border-radius: 30px;
  line-height: 20px;
  padding: 10px 40px
}
#main .helpRead h2 {
  background-color: transparent;
  color: var(--color_nv);
  text-shadow: none;
}
.helpMain .helpMainBox {
  max-width: 1520px;
  margin-left: auto;
  margin-right: auto;
}
.helpMain .helpMainBox li {
  background: #fff;
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 30px 60px;
  border-radius: 20px;
  border: 1px solid #e5e5e5;
	margin-bottom: 40px
}

@media screen and (max-width:970px) {
	.helpMain .helpMainBox li {padding: 20px 20px 40px;}
}
.helpNum {
	color: var(--color_blue);
}
.helpNum span {
	display: block;
	font-size: 40px;
	font-family: "Oswald", sans-serif;
	padding-bottom: 16px;
}
.title_bg_blue{
	background: var(--bg_color_light_blue);
	color: var(--color_blue);
	padding: 10px;
}
.title_bg_gray{
	background: var(--bg_color);
	color: var(--color_blue);
	padding: 10px;
}
.numList {
  counter-reset: item; /* 1からリセット */
	text-align: left;
}

.numList dt {
  counter-increment: item;
  position: relative;
  padding-left: 2.5em;   /* 番号分インデント */
  font-weight: bold;
	color: var(--color_nv);
	margin-bottom: 10px
}

/* 番号を擬似要素で追加 */
.numList dt::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 2em;
  text-align: right;
}

.numList dd{
	padding-left: 2em;
	margin-bottom: 20px
}
.miniList.left dt,
.miniList.left dd{
	text-align: left
}
.miniList dt{
	font-weight: bold;
	color: var(--color_nv);
	margin-bottom: 10px
}
.miniList dd{
	margin-bottom: 20px
}

.col2Box{
	display: flex;
	justify-content: flex-start;
	text-align: left;
}
.col2BoxH{
	width: 180px;
	border-right: var(--color_nv) 1px solid;
	padding-right: 20px;
	margin-right: 30px;
		
}.col2BoxMain{
	width: calc(100% - 200px)
}
@media screen and (max-width:970px) {
	
.col2Box{
	display: block;
}
.col2BoxH{
	width: 100%;
	padding-right:0;
	margin-right:0;
	border-right: none;
	border-bottom: var(--color_nv) 1px solid;
	padding-bottom: 10px;
	margin-bottom: 20px;
		
}.col2BoxMain{
	width: 100%;
}
}

.btnSBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.btnSBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.btnSBox.btnSBoxCenter{
	justify-content: center;
}
.btnS {
	width: 30%;
	text-align: center;
}

.btnSBox.btnSBoxCenter .btnS{
	padding-left: 10px;
	padding-right: 10px;
}
.btnS a{
	display: block;
	text-align: center;
	border-radius: 10px;
	border: 1px solid var(--bg_color2);
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);
	padding: 20px;
	color: var(--color_nv);
	font-weight: 600;
	text-decoration: none;
	background-color: #fff;
	
}
.btnS a:hover{
	background-color: var(--bg_color_light_blue)
}
.btnS a .btnSIcon{
	display: block;
	padding: 10px
}
.btn{
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}
.btn a{
	display: flex;
	align-items: center;
	border-radius: 72px;
	min-height: 72px;
	width: 100%;
	background-color: var(--color_nv);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.btn a span{
	display: block;
	width: 100%;
	height: auto;
}
.btn a:hover{
	opacity: 0.8;
}

.btn.btn_yellow a{
	background-color: var(--color_yellow);
	color: var(--color_nv);
}

/*---------------------

top汎用ページ

----------------------*/
.indexPage{
	background: #fff;
}
.indexPage .indexWrap{
	background: var(--bg_color);
	padding: 60px 0;
}
.conL{
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

@media screen and (max-width:1200px) {
	
.conL{
	padding-left: 10px;
	padding-right: 10px;
}
}
.topMain h1{
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}