@charset "UTF-8";


/* ----------------------------------
 ご利用ガイド
---------------------------------- */
footer,
#footer { margin-top: 0;}
#contentArea:has(#header_bottom) > div.wrapper_ { padding: 0;}

#guide { width: 100%; overflow-x: hidden;}
#guide .block-guide-section-top  { width: min(1200px, 100%); margin: 0 auto 40px;}
#guide .block-guide-section-wrap { width: min(1200px, 100%); padding: 80px 0; margin: 0 auto; position: relative;}
#guide .block-guide-section-wrap::before { content: ''; width: 200vw; height: 100%; display: block; background: #FFF; position: absolute; top: 0; left: -50vw; right: -50vw;}
#guide .block-guide-section { width: min(1200px, 100%); margin: 0 auto 70px; position: relative; z-index: 2;}
#guide .block-guide-section div { font-size: 16px; font-weight: 500;}
#guide .block-guide-section div.block-guide-section--box { margin: 0 30px;}
#guide .block-guide-section p { margin: 0 0 15px; font-size: 16px; font-weight: 500;}
#guide .block-guide-section p.ttl { margin: 0 0 5px; font-size: 16px; font-weight: 700;}
#guide .block-guide-section ul { margin: 0 0 15px;}
#guide .block-guide-section ul li { font-size: 16px; font-weight: 500;}
#guide .block-guide-section ul li + li { margin-top: 10px;}
#guide .block-guide-section ul.list li { list-style: disc inside; padding-left: 1em; text-indent: -1em;}
#guide .block-guide-section a { font-size: 16px; text-decoration: underline; color: var(--color-link);}

@media screen and (min-width: 1001px) {
	#guide .for-sp { display: none !important;}
}
@media screen and (max-width: 1000px) {
	#guide .for-pc { display: none !important;}
	
	#guide .block-guide-section-top { margin-bottom: 30px; padding: 0 15px;}
	#guide .block-guide-section-wrap { padding: 0 15px 10px;}
	#guide .block-guide-section { margin: 0 auto 40px;}
	#guide .block-guide-section div { font-size: 12px; font-weight: 500;}
	#guide .block-guide-section div.block-guide-section--box { margin: 0;}
	#guide .block-guide-section p { margin: 0 0 10px; font-size: 12px;}
	#guide .block-guide-section p.ttl { margin: 0 0 5px; font-size: 12px;}
	#guide .block-guide-section ul { margin: 0 0 10px;}
	#guide .block-guide-section ul li { font-size: 12px;}
	#guide .block-guide-section ul li + li { margin-top: 10px;}
	#guide .block-guide-section a { font-size: 12px;}
}

/* TITLE
---------------------------------- */
#guide h1.common_headline1_ { margin: 40px 0 20px; font-size: 28px;}
#guide h2.common_headline2_ { margin-bottom: 30px; border-radius: var(--border-radius); font-size: 22px;}
#guide h3.common_headline3_ { padding: 15px 0 10px; margin: 0 0 20px; font-size: 20px;}
#guide h4.common_headline4_ { padding: 0 0 0 13px; margin: 0 0 20px; border-left: var(--color-link) 7px solid; font-size: 18px; font-weight: 700;}

@media screen and (max-width: 1000px) {
	#guide h1.common_headline1_ { margin: 30px 0 10px; font-size: 18px;}
	#guide h2.common_headline2_ { width: calc(100% + 30px); max-width: unset; margin: 0 -15px 15px; border-radius: 0; font-size: 16px;}
	#guide h3.common_headline3_ { padding: 10px 0; margin: 0 0 15px; font-size: 15px;}
	#guide h4.common_headline4_ { padding: 0 0 0 8px; margin: 0 0 10px; border-left: var(--color-link) 4px solid; font-size: 14px;}
}

/* MESSAGE
---------------------------------- */
#guide .block-guide-intro--text {
	margin: 0 0 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: var(--line-height-middle);
	color: var(--color-base);
}
@media screen and (max-width: 1000px) {
	#guide .block-guide-intro--text {
		margin: 0 0 20px;
		font-size: 14px;
	}
}

/* NAVI
---------------------------------- */
#guide .block-guide-intro--nav {
	width: 100%;
  padding: 15px 30px;
  margin: 0;
  border-radius: var(--border-radius);
  display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 30px;
  background: var(--bg-color-base);
	position: relative;
}
#guide .block-guide-intro--nav::after {
	content: '';
  width: 100%;
	height: 3px;
  margin: 0;
	display: block;
	background: var(--bg-color-base);
	position: absolute;
	left: 0;
	bottom: 14px;
}
#guide .block-guide-intro--nav li {
	width: calc((100% - 30px * 3) / 4);
	min-height: 45px;
	padding: 0;
	margin: 0;
	border-bottom: var(--border-solid1);
}
#guide .block-guide-intro--nav li .guide-button {
	width: 100%;
	min-height: 55px;
	padding: 10px 10px 10px 35px;
	margin: 0;
	border: none;
	border-radius: var(--border-radius);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	color: var(--color-base);
	display: flex;
	align-items: center;
	background: none;
	position: relative;
	transition: var(--transition);
}
#guide .block-guide-intro--nav li .guide-button:hover { color: var(--color-link); opacity: 1.0;}
#guide .block-guide-intro--nav li .guide-button::after {
	content: '';
  width: 15px;
  height: 15px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 15px;
	background-color: var(--color-link);
	background-image: var(--image-arrow-white);
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: 8px auto;
	background-size: 8px auto;
	display: block;
	transition: var(--transition);
	transform: rotate(90deg);
	position: absolute;
	top: calc(50% - 7.5px);
	left: 10px;
}
#guide .block-guide-intro--nav li .guide-button:hover::after { background-color: var(--color-hover);}

@media screen and (max-width: 1000px) {
	#guide .block-guide-intro--nav { padding: 0; justify-content: space-between; gap: 10px; background: transparent;}
	#guide .block-guide-intro--nav::after { display: none;}
	#guide .block-guide-intro--nav li {
		width: calc(50% - 5px);
		border: none;
		border-radius: var(--border-radius);
		display: flex;
		align-items: center;
		background: #FFF;
		align-self: stretch;
		box-shadow: var(--box-shadow-blue-half);
	}
	#guide .block-guide-intro--nav li .guide-button { padding: 10px 30px 10px 10px;}
	#guide .block-guide-intro--nav li .guide-button::after { left: auto; right: 10px;}
}

/* システムご利用フロー
---------------------------------- */
#guide .table-wrap table { width: 100%; border-radius: var(--border-radius); border-collapse: collapse; overflow: hidden; background: var(--bg-color-light);}
#guide .table-wrap table th { padding: 16px 30px; border-collapse: collapse; font-size: 16px; font-weight: 700; color: #FFF; background: var(--bg-color-dark);}
#guide .table-wrap table td { padding: 20px 30px; border-collapse: collapse; font-size: 14px; font-weight: 500; color: var(--color-base); vertical-align: top;}
#guide .table-wrap table tr:nth-child(odd) td { background: var(--bg-color-base);}
#guide .table-wrap table th.purpose { width: 200px; border-right: var(--border-solid1);}
#guide .table-wrap table th.detail  { width: calc(100% - 460px); border-right: var(--border-solid1);}
#guide .table-wrap table th.page    { width: 260px;}
#guide .table-wrap table th .memo   { margin: 5px 0 0; font-size: 11px; font-weight: 500; color: #FFF; display: block;}
#guide .table-wrap table td.purpose { border-right: var(--border-solid1); font-size: 14px; font-weight: 700; color: var(--color-base);}
#guide .table-wrap table td.detail  { border-right: var(--border-solid1);}
#guide .table-wrap table .link-list li + li { margin-top: 5px;}
#guide .table-wrap table .link-list li a { font-size: 14px; font-weight: 500; text-decoration: underline; color: var(--color-link);}
#guide .table-wrap table .link-list li a:hover { text-decoration: none;}

@media screen and (max-width: 1000px) {
	#guide .table-wrap table { border-radius: 0;}
	#guide .table-wrap table th { padding: 15px; font-size: 14px; text-align: left; vertical-align: top;}
	#guide .table-wrap table td { padding: 15px; font-size: 12px;}
	#guide .table-wrap table th.purpose { width: 55%;}
	#guide .table-wrap table th.page    { width: 45%;}
	#guide .table-wrap table th .memo   { margin: 0;}
	#guide .table-wrap table td.purpose { font-size: 12px;}
	#guide .table-wrap table td.purpose .title { margin: 0 0 5px; font-size: 14px; font-weight: 700; color: var(--color-base);}
	#guide .table-wrap table td.purpose .title::before { content: '●'; margin: 0 5px 0 0; color: var(--color-link);}
	#guide .table-wrap table td.purpose .detail { font-size: 12px; font-weight: 500; color: var(--color-base);}
	#guide .table-wrap table .link-list li a { font-size: 12px;}
}

/* サポート・お問い合わせ
---------------------------------- */
#guide #sec_support .block-support { padding: 20px; border-radius: var(--border-radius); background: var(--bg-color-light);}
#guide #sec_support .block-support dl { display: flex; flex-wrap: nowrap; align-items: flex-start;}
#guide #sec_support .block-support dl + dl { margin-top: 5px;}
#guide #sec_support .block-support dl dt { width: 10em; font-size: 16px; position: relative;}
#guide #sec_support .block-support dl dt::after { content: '：'; position: absolute; top: 0; right: 1em;}
#guide #sec_support .block-support dl dd { width: calc(100% - 7em); font-size: 16px;}

@media screen and (max-width: 1000px) {
	#guide #sec_support .block-support dl dt { font-size: 14px;}
	#guide #sec_support .block-support dl dd { font-size: 14px;}
}