@charset "utf-8";
/*==================================================================================================
|
|基本設定
|
■メインカラー：#fcc
■ベースカラー：#fff
■コンテンツ横幅：1000px
■見出し（h2,h3,h4）に連番で番号を付けたい場合、該当要素の外枠にclass（.counter_increment）を付ける
■hover時のopacity設定：0.6とする
==================================================================================================*/
/* ブラウザのデフォルトスタイルをリセットする */
@import url('html5reset-1.6.1.css');
/* 共通class */
@import url('https://secure.apap.jp/vc/base/usr/docs/css/common.css');
/* Google Fonts読み込み */
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url('/vc/base/usr/docs/fonts/notosans/css/font.css');
/* Icon Fonts読み込み */
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://use.fontawesome.com/releases/v5.2.0/css/all.css');
/* CSS変数設定 */
:root {
	--base_color: #fcc;
	--base_width: 1000px;
}
* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
html {
	font-size: 62.5%; /* sets the base font to 10px for eaiser math */
}
body {
	background: #fff;
	color: #333;
	font-size: 16px;
	font-size: 1.6rem;
	/*font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;*/
	font-family: "Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	letter-spacing: 0.03em;
	line-height: 1.8;
	min-width: 1000px; /* スマホ画面表示の場合にコンテンツが2重縮尺（Viewportの影響）となり期待する表示にならない事の回避のため、最少表示サイズを設定 */
	-webkit-text-size-adjust: 100%;
	padding-top: 40px; /* #header_kuneruの高さ+影分調整 */
}
/* html5用 */
article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
	display: block;
}
br {
	letter-spacing: normal;
}
a {
	color: #03c;
	outline: none;
	text-decoration: none;
}
a:hover {
	color: orangered;
	text-decoration: underline;
}

label {
	cursor: pointer;
}
a:hover img {
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0.6;
}
p {
	margin-bottom: 1em;
}
/*==================================================================================================
|
|サイトの構造
|
#gray_panel（megamenu表示時の背景グレーアウト用）
#header_kuneru
#wrap_header_top
	┗header
#wrap_other_systems
	┗section
		┗article
		┗article
#ham_menu_contents
#main
#footer
	┗.footer_contents
		┗<nav>
		┗<small>
.page_top
==================================================================================================*/
#gray_panel {
	background: #000;
	display: none;
	opacity: 0.6;
	position: fixed;
		top: 0;
		left: 0;
	width: 100%;
	height: 99999px;
	z-index: 9999; /* .fixedは10000　ハンバーガーメニュー表示時の重なり調整 */
}
/*########################################################################################
｜
｜くうねるあるく共通ヘッダー（固定）
｜
########################################################################################*/
#header_kuneru {
	background: #efefef;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	/*color: #fff;*/
	display: block;
	padding: 0 20px;
	position: fixed;
		top: 0;
	width: 100%;
	height: 40px;
	z-index: 10000;
}
#header_kuneru section {
	display: flex;
		align-items: center;
		justify-content: flex-start;
	margin: auto;
	width: 1000px;
	height: 40px;
}
#header_kuneru section h1 {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 500;
	margin-right: 2em;
	white-space: nowrap;
}
#header_kuneru section h1 span {
	font-size: 12px;
	font-size: 1.2rem;
}
#header_kuneru section h1 a ,
#header_kuneru section h1 a:hover {
	color: #333;
	text-decoration: none;
}
#header_kuneru section h1 a:hover {
	opacity: .6;
}
/*-----------------------------------------------------------------------------
｜
｜■┓くうねるあるく共通ヘッダー（固定）用
｜┗┛オブジェクト並び順
｜
-----------------------------------------------------------------------------*/
#header_kuneru section h1 { /* タイトル見出し */
	order: 2;
}
#header_kuneru section > .ham_menu { /* ハンバーガーアイコン */
	order: 1;
}
#header_kuneru section nav { /* プライマリメニュー */
	order: 3;
}
/*-----------------------------------------------------------------------------
｜
｜■┓くうねるあるく共通ヘッダー（固定）用
｜┗┛ハンバーガーメニューボタン
｜
-----------------------------------------------------------------------------*/
#header_kuneru section > .ham_menu {
	margin-right: 16px;
}
#header_kuneru section > .ham_menu > a {
	display: flex;
		align-items: flex-start;
		justify-content: center;
	position: relative;
	width: 38px;
	height: 38px; /* マウスオーバ時の反応領域確保 */
}
#header_kuneru section > .ham_menu a:hover {
	opacity: .6;
	text-decoration: none;
}
#ham_menu_btn {
	cursor: pointer; /* iOSにクリック領域を認識させる */
	display: block;
	position: relative;
}
#ham_menu_btn .menu_text { /* MENU */
	color: #777;
	font-size: 10px;
	font-size: 1.0rem;
	transform: scale(0.9); /* Chromeでfont-size: 9pxを表現するためベースサイズは10pxに設定 */
}
#ham_menu_icon {
	background: #777;
	display: block;
	position: absolute;
		/*top: 16px;*/
		top: 22px;
		/*left: 6px;*/
		left: 7px;
	width: 22px;
	height: 2px;
	transition: .2s;
}
#ham_menu_icon:before ,
#ham_menu_icon:after {
	display: block;
	content: "";
	position: absolute;
		top: 0;
		left: 0;
	width: 22px;
	height: 2px;
	background: #777;
	transition: .3s;
}
#ham_menu_icon:before {
	margin-top: -6px;
}
#ham_menu_icon:after {
	margin-top: 6px;
}
#ham_menu_btn {
	text-decoration: none;
}
#ham_menu_btn .close {
	background: transparent;
}
#ham_menu_btn .close:before, #ham_menu_btn .close:after {
	margin-top: 0;
}
#ham_menu_btn .close:before {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
#ham_menu_btn .close:after {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
/*-----------------------------------------------------------------------------
｜
｜■┓くうねるあるく共通ヘッダー（固定）用
｜┗┛プライマリメニュー
｜
-----------------------------------------------------------------------------*/
#header_kuneru nav.primary {
	display: flex;
		align-items: center;
		justify-content: flex-end;
	width: 100%;
	z-index: 100000; /* プルダウンメニュー表示用 */
}
#header_kuneru nav.primary > ul {
	display: flex;
	height: 40px;
}
#header_kuneru nav.primary ul li {
}
#header_kuneru nav.primary ul li a {
	color: #333;
	display: flex;
		align-items: center;
		justify-content: center;
	font-size: 13px;
	font-size: 1.3rem;
	height: 27px;
	padding: 0 12px;
	height: 40px;
	white-space: nowrap;
}
#header_kuneru nav.primary > ul > li > a:hover {
	background: #ccc;
	text-decoration: none;
}
#header_kuneru nav.primary ul li a:before {
	font-size: 18px;
	font-size: 1.8rem;
	padding-right: 4px;
}
#header_kuneru nav.primary ul li a.home:before {
	content: '\f015'; /* home */
}
#header_kuneru nav.primary ul li a.about:before {
	content: '\f02d '; /* book */
	font-size: 15px;
	font-size: 1.5rem;
}
#header_kuneru nav.primary ul.nest1 {
	border: 1px solid #ccc;
	display: none;
	flex-flow: column nowrap;
	margin-left: 2px;
}
#header_kuneru nav.primary ul.nest1 li {
	background-image :none;
	background-color :#f4f4f4;
	border-bottom: 1px solid #ccc;
	z-index: 100;
}
#header_kuneru nav.primary ul.nest1 li:last-child {
	border-bottom: 0;
}
#header_kuneru nav.primary ul.nest1 li a {
	color: #000;
	display: flex;
		align-items: center;
		justify-content: flex-start;
	margin-left: 8px;
	padding-left: 8px;
	position: relative;
	height: 27px;
	/*z-index: 100;*/
}
#header_kuneru nav.primary ul.nest1 li a:before {
	content: "\f0da"; /* fa-caret-right */
	color: darkgray;
	font-family: FontAwesome;
	font-size: 10px;
	font-size: 1.0rem;
	position: absolute;
		top: 6px;
		left: 0;
}
#header_kuneru nav.primary ul.nest1 li a:hover {
	opacity: .6;
	text-decoration: none;
}
/*-----------------------------------------------------------------------------
｜
｜■┓ハンバーガーメニュー内コンテンツ
｜┗┛#ham_menu_contents
｜
-----------------------------------------------------------------------------*/
#ham_menu_contents {
	/*background: #efefef;*/
	background: #fff;
	display: none;
	margin: 0 auto;
	width: 1000px;
	height: auto;
	position: relative;
	z-index: 10000;
}
#ham_menu_contents .contents {
	display: flex;
		align-items: flex-start;
		flex-flow: wrap;
		justify-content: flex-start;
}
#ham_menu_contents nav.ham_menu,
#ham_menu_contents nav.ham_menu+div {
	width: 50%;
	padding: 40px;
}
#ham_menu_contents nav.ham_menu+div {
	display: flex;
		align-items: center;
		flex-flow: wrap;
		justify-content: center;
}
#ham_menu_contents nav.ham_menu+div img { /* くうねるあるくロゴ */
	margin: 40px 0;
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
}
#ham_menu_contents nav.ham_menu+div p {
	color: #777;
	text-align: center;
}
#ham_menu_contents nav.ham_menu ul {
	display: flex;
		flex-wrap: wrap;
}
#ham_menu_contents nav.ham_menu ul li {
	width: 100%;
}
#ham_menu_contents nav.ham_menu ul li a {
	border-bottom: 1px solid #efefef;
	color: #333;
	display: block;
	padding: 16px;
	position: relative;
}
#ham_menu_contents nav.ham_menu ul li:last-child a {
	border-bottom: 1px solid #fff;
}
#ham_menu_contents nav.ham_menu ul li a:hover,
#ham_menu_contents nav.ham_menu ul li a:hover::after {
	background: #efefef;
}
#ham_menu_contents nav.ham_menu ul li a::after {
	color: #777;
	font-family: FontAwesome;
	font-size: 14px;
	position: absolute;
		top: calc(50% - 10px);
		right: 16px;
}
#ham_menu_contents nav.ham_menu ul li a.parent {
	padding-right: 40px;
}
#ham_menu_contents nav.ham_menu ul li a.parent::after {
	content: "\f0fe";
}
#ham_menu_contents nav.ham_menu ul li a.parent_open::after {
	content: "\f146";
	
}
#ham_menu_contents nav.ham_menu ul li a:hover {
	opacity: .6;
	text-decoration: none;
}
#ham_menu_contents nav.ham_menu ul.panel_nest {
	background: #fff;
}
#ham_menu_contents nav.ham_menu ul.panel_nest li:last-child a {
	margin-bottom: 0;
}
#ham_menu_contents nav.ham_menu ul.panel_nest li a:hover {
	background: #fff;
}
#ham_menu_contents nav.ham_menu ul.panel_nest li a::after {
	display: none;
}
#ham_menu_contents nav.ham_menu ul.panel_nest li a span {
	display: block;
	padding-left: 24px;
}
#ham_menu_contents nav.ham_menu ul.panel_nest li a::before {
	color: #999;
	content: "\f105";
	font-family: FontAwesome;
	font-size: 10px;
	position: absolute;
		top: calc(50% - 8px);
		left: 24px;
}
/*########################################################################################
|
|トップ用ヘッダー
|#wrap_header_top内
|
########################################################################################*/
#wrap_header_top { /* くうねるあるくピンク背景 */
	background: #fcc;
	width: 100%;
	height: 100%;
}
#wrap_header_top #header_bg { /* ヘッダー矢モチーフ背景 */
	background: url(../images/header_bg.png) 50% 0 no-repeat;
	/*background: url(../images/header_bg_confirm.png) 50% 0 no-repeat;*/
	background: url(../images/header_bg.png) 50% 0 no-repeat;
	width: 100%;
	height: 1000px; /* 背景の矢印モチーフ表示用 */
}
#wrap_header_top header {
	margin: 0 auto;
	position: relative;
	width: 1000px;
}
#wrap_header_top header h1 {
	display: inline-block;
	margin: 0 auto;
	position: relative;
	width: 100%;
}
#wrap_header_top header h1 img.site_logo {
	display: block;
	margin: 68px auto 0;
	position: relative; /* z-indexを有効にするため初期値staticを解除する */
	width: 600px;
	height: 168px;
	z-index: 2;
}
#wrap_header_top header h1 img.title_second {
	display: block;
	position: absolute;
		top: 0;
		left: calc(50% - 94px);
	width: 189px;
	height: 92px;
	z-index: 1;
}
#wrap_header_top header h1 img.mhlw_sticker {
	display: block;
	position: absolute;
		top: 40px;
		left: 0;
	width: 174px;
}
#wrap_header_top header h1 span {
	display: none;
}
#wrap_header_top > .mhlw_sticker_pad {
	display: none;
}
#wrap_header_top header .lead { /* リード文（人生100年時代...） */
	color: #777;
	font-size: 17px;
	font-size: 1.7rem;
	font-weight: 300;
	line-height: 1.5;
	margin-top: 16px;
	text-align: center;
	/*
	text-shadow: 
		0 0 25px #edf8ff, 
		0 0 20px #edf8ff, 
		0 0 0.40px #edf8ff;
	*/
}
#wrap_header_top header .about_esw { /* 矢印ボタン：くうねるあるくとは？ */
	width: 100%;
}
#wrap_header_top header .about_esw img {
	position: absolute;
		top: 108px;
		right: -74px;
	width: 201px;
	height: 180px;
}
#wrap_header_top header .about_esw a:hover img {
	opacity: 1.0;
}
#wrap_header_top header .about_esw .pc {
	display: block;
}
#wrap_header_top header .about_esw .pad {
	display: none;
}
#wrap_header_top header .about_esw a:hover .pc {
	opacity: 1.0;
}
#wrap_header_top header .tsb_smart { /* 毎日つうしんぼスマホ用 */
	display: none;
}
#wrap_header_top header nav { /* くう・ねる・あるく・毎日つうしんぼ  */
	position: relative;
	margin-top: 58px;
}
#wrap_header_top header nav div.tsb { /* 毎日つうしんぼ */
	position: absolute;
		top: -10px;
		right: -91px;
	z-index: 2;
	width: 200px;
	height: 345px;
}
#wrap_header_top header nav div.tsb > a > img.pc {
	display: block;
}
#wrap_header_top header nav div.tsb > a > img.pad {
	display: none;
}
#wrap_header_top header nav div.tsb > a:hover img.pc {
	opacity: 1.0;
}
#wrap_header_top header nav div.esw { /* くう・ねる・あるく */
	position: relative;
	margin: 0 auto;
	width: 1000px;
	height: 600px;
	z-index: 1;
}
#wrap_header_top header nav div.esw .cmt {
	display: none;
}
#wrap_header_top header nav div.esw ul li:hover img {
	opacity: 1.0;
}
#wrap_header_top header nav div.esw ul li img:nth-of-type(1) { /* くうねるあるく丸ボタン */
	width: 334px;
	height: 334px;
}
#wrap_header_top header nav div.esw ul li img:nth-of-type(2) { /* くうねるあるく丸ボタンコメント */
	width: 124px;
	height: 124px;
}
#wrap_header_top header nav div.esw ul li:nth-of-type(1) img:nth-of-type(1) { /* くう */
	position: absolute;
		top: -25px;
		left: 336px;
}
#wrap_header_top header nav div.esw ul li:nth-of-type(1) img:nth-of-type(2) { /* くうコメント */
	position: absolute;
		top: 83px;
		left: 292px;
}
#wrap_header_top header nav div.esw ul li:nth-of-type(2) img:nth-of-type(1) { /* ねる */
	position: absolute;
		top: 248px;
		left: 178px;
}
#wrap_header_top header nav div.esw ul li:nth-of-type(2) img:nth-of-type(2) { /* ねるコメント */
	position: absolute;
		top: 356px;
		left: 134px;
}
#wrap_header_top header nav div.esw ul li:nth-of-type(3) img:nth-of-type(1) { /* あるく */
	position: absolute;
		top: 248px;
		left: 491px;
}
#wrap_header_top header nav div.esw ul li:nth-of-type(3) img:nth-of-type(2) { /* あるくコメント */
	position: absolute;
		top: 356px;
		left: 740px;
}
/*########################################################################################
|
|コンテンツ１
|#wrap_other_systems内
|
########################################################################################*/
#wrap_other_systems {
	background: #fff;
	padding-bottom: 80px;
	width: 100%;
}
#wrap_other_systems section {
	display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		justify-content: center;
	margin: 0 auto;
	width: 1000px;
}
#wrap_other_systems section h2 {
	color: #777;
	font-size: 26px;
	font-size: 2.6rem;
	font-weight: 300;
	margin: 80px 0 64px 0;
	padding: 0 24px;
	text-align: center;
	width: 100%;
}
#wrap_other_systems section article {
	padding: 0 64px;
	width: 50%;
}
#wrap_other_systems section article.partition {
	border-right: 1px solid #ccc;
}
#wrap_other_systems section article h3 {
	color: #007db8;
	font-size: 32px;
	font-size: 3.2rem;
	font-weight: 900;
	text-align: center;
}
#wrap_other_systems section article div {
	line-height: 1;
	padding: 20px 0;
	text-align: center;
}
#wrap_other_systems section article p {
	color: #777;
	font-size: 16px;
	font-size: 1.6rem;
	margin: auto;
	width: 350px;
}
#wrap_other_systems section article .btn_sys img {
	width: 350px;
	height: auto;
}
#wrap_other_systems section article .btn_go {
	margin-top: 1em;
	padding: 0;
	text-align: right;
}






















/*########################################################################################
|
|セカンダリ用ヘッダー
|#wrap_header内
|
########################################################################################*/
#wrap_header {
	background: #fff;
	width: 100%;
	height: 100%;
}
#wrap_header #header_bg {
	background: url(../images/header_bg_sec.png) 50% 0 no-repeat;
	width: 100%;
	height: 250px;
}
#wrap_header header {
	margin: 0 auto;
	position: relative;
	width: 1000px;
}
#wrap_header header h1 {
	/*
	display: inline-block;
	margin: 0 auto;
	*/
	display: flex;
		align-items: center;
		justify-content: center;
	
	/*position: relative;*/
	width: 100%;
	height: 250px;
}
#wrap_header header h1 img.site_logo {
	/*
	max-width: 420px;
	width: 420px;
	*/
	position: relative; /* z-indexを有効にするため初期値staticを解除する */
	max-width: 480px;
	width: 480px;
	z-index: 2;
}
#wrap_header header h1 img.mhlw_sticker {
	display: block;
	position: absolute;
		top: 12px;
		left: 140px;
	width: 140px;
	height: auto;
}
#wrap_header header h1 img.title_second {
	display: block;
	position: absolute;
		top: 0;
		left: calc(50% - 75px); /* widthの半分（75px）をマイナスしてセンタリング */
	width: 150px;
	height: auto;
	z-index: 1;
}
#wrap_header header h1 span {
	display: none;
}
#wrap_header > .mhlw_sticker_pad {
	display: none;
}

/*########################################################################################
|
|セカンダリページ
|main
|
########################################################################################*/
main {
	width: 100%;
	z-index: 1;
}
main article {
	margin: 0 auto;
	padding-bottom: 80px;
	width: 840px;
}

main article > h1 + h2 {
	margin-top: 0;
}
main article > h1 + h3 {
	margin-top: 0;
}
main article > h2 + h3 {
	margin-top: 0;
}
main article > h2 + h4 {
	margin-top: 0;
}

main article > h1 {
	background: #fff;
	box-shadow: 0px 0px 0px 4px #fff;
	border-top: dashed 1px #f99;
	border-bottom: dashed 1px #f99;
	color: #f99;
	font-size: 40px;
	font-size: 4.0rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 -40px 40px;
	padding: 40px;
	text-align: center;
}
main article > h1 span {
	font-size: 20px;
	font-size: 2.0rem;
}
main article > h2 {
	background-color: #f99;
	border-radius: 40px;
	color: #fff;
	font-size: 20px;
	font-size: 2.0rem;
	margin: 80px -40px .5em;
	padding: 16px 40px;
}
main article > h2 span {
	font-size: 14px;
	font-size: 1.4rem;
}
main article > h3 {
	border-bottom: solid 3px #ffefef;
	font-size: 20px;
	font-size: 2.0rem;
	margin: 80px 0 .5em;
	padding: 10px 0;
	position: relative;
}
main article > h3 span {
	padding-left: 12px;
}
main article > h3::before {
	background-image: url(../images/h3_mark@2x.png);
	background-size: contain;
	content: '';
	display: inline-block;
	margin-left: 8px;
	width: 19px;/*画像の幅*/
	height: 29px;/*画像の高さ*/
	vertical-align: middle;
}
main article > h3:after {
	border-bottom: solid 3px #f99;
	bottom: -3px;
	content: " ";
	display: block;
	position: absolute;
	width: 20%;
}
main article > h4 {
	color: #f66;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	margin: 1.5em 0 .5em;
	padding-left: 16px;
	position: relative;
}
main article > h4::before {
	content: "\f054";
	font-family: FontAwesome;
	font-size: 12px;
	font-weight: normal;
	position: absolute;
		top: 8px;
		left: 0;
}
/* 見出し（h2,h3）に連番で番号を付けたい場合、該当要素の外枠に.counter_incrementを付ける */
.counter_increment h2,
.counter_increment h3 {
	counter-increment: number;
}
.counter_increment h2::before,
.counter_increment h3::before {
	content: counter(number)".";
	padding-right: .5em;
}



/*########################################################################################
|
|ログインページスタイル
|#login_wrap
|
########################################################################################*/
/*-----------------------------------------------------------------------------
|
■┓ログインボックス
┗┛
-----------------------------------------------------------------------------*/
#login_wrap {
	display: flex;
		flex-wrap: wrap;
	margin: 40px auto;
	width: 1000px;
}
#login_wrap a {
	text-decoration: none !important;
}
#login_wrap .login_form {
	margin-bottom: 3px;
}
#login_wrap .login_form input {
	font-family: FontAwesome !important;
	font-size: 18px;
	font-size: 1.8rem;
	padding: 8px;
	width: 100%;
}
#login_wrap .login_btn {
	margin: 16px 16px 8px;
}
#login_wrap .login_btn a.btn_submit {
	background: #f99;
	font-size: 18px;
	font-size: 1.8rem;
	padding: 18px 12px;
	margin-bottom: 8px;
}
/* right_container */
#login_wrap .right_container {
	padding: 0;
	width: 30%;
}
#login_wrap .right_container #login_box {
	background: #ffe5e5;
	border: dashed 1px #fff;
	/*
	box-shadow: 0px 0px 0px 4px #ffe5e5, 0px 0px 24px rgba(160, 160, 160, 0.6);
	*/
	box-shadow: 0px 0px 0px 8px #ffe5e5;
	padding: 24px;
}
#login_wrap .right_container #login_box h2 {
	font-size: 28px;
	font-size: 2.8rem;
	font-weight: 600;
	margin: 0 auto;
	text-align: center;
}

/* left_container */
#login_wrap .left_container {
	display: flex;
		flex-direction: column;
	padding: 24px 80px 24px 24px;
	width: 70%;
}
#login_wrap .left_container article {
	text-align: center;
}
#login_wrap .left_container article:first-child {
	padding-top: 0;
}

#login_wrap .left_container article > h3,
#login_wrap .left_container article > h3 i {
	font-size: 28px;
	font-size: 2.8rem;
	font-weight: 600;
}
#login_wrap .left_container article > h3 {
	border-bottom: 1px solid #ccc;
	color: #f99;
	margin-top: 80px;
	margin-bottom: 16px;
	padding: 0 .5em .5em;
	text-align: center;
}
/*
#login_wrap .left_container article > h3:nth-of-type(1) {
	margin-top: 0;
}
*/
#login_wrap .left_container article > h3 i {
	margin-right: 8px;
}

/* bottom_container */
#login_wrap .bottom_container {
	margin-top: 80px;
	width: 100%;
}
/* system_requirements */
#login_wrap .system_requirements {
	background: #efefef;
	box-shadow: 0px 0px 0px 8px #efefef; /* ログインボックスと幅をそろえるため */
	padding: 32px;
	width: 100%;
}
#login_wrap .system_requirements h2 {
	font-weight: 600;
	margin-bottom: .5em;
}
#login_wrap .system_requirements h2 i {
	margin-right: 8px;
}
#login_wrap .system_requirements ul li {
	font-size: 12px;
	font-size: 1.2rem;
}

#login_wrap table.wtd {
	background: #fff;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 24px auto;
	width: 90%;
}
#login_wrap table.wtd th ,
#login_wrap table.wtd td {
	border-top: 1px dashed #ccc;
	border-bottom: 1px dashed #ccc;
	font-size: 18px;
	font-size: 1.8rem;
	padding: 16px ;
	vertical-align: middle;
}

#login_wrap table.wtd tbody tr:nth-child(1) {
	background: #efffef;
}
#login_wrap table.wtd tbody tr:nth-child(2) {
	background: #efefff;
}
#login_wrap table.wtd tbody tr:nth-child(3) {
	background: #fff7ef;
}
#login_wrap table.wtd tbody tr:nth-child(1) th img {
	width: calc(142px / 2);
	height: auto;
}
#login_wrap table.wtd tbody tr:nth-child(2) th img {
	width: calc(170px / 2);
	height: auto;
}
#login_wrap table.wtd tbody tr:nth-child(3) th img {
	margin-top: 16px; /* たて位置調整 */
	width: calc(247px / 2);
	height: auto;
}
#login_wrap table.wtd tbody tr:nth-child(1) td {
	color: #090;
}
#login_wrap table.wtd tbody tr:nth-child(2) td {
	color: #1414c1;
}
#login_wrap table.wtd tbody tr:nth-child(3) td {
	color: #f60;
}


#login_wrap .left_container article > h4 {
	font-size: 20px;
	font-size: 2.0rem;
	margin-bottom: .5em;
}
#login_wrap .icon_chance {
	background: #f99;
	color: #fff;
	display: block;
	max-width: 100%;
	margin: 0 0 1em 0;
	min-width: 120px;
	padding: 8px 16px;
	position: relative;
}

#login_wrap .icon_chance:before{
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% - 16px);
	border: 16px solid transparent;
	border-top: 16px solid #f99;
}

#login_wrap .left_container article .chance_box {
	background: #ffe5e5;
	padding: 32px;
	width: 100%;
}





/*########################################################################################
|
|フッター
|#footer
|
########################################################################################*/
#footer { /* footerFixed.js を使用するため#footerという名前にする */
	background: #f99;
	border-top: solid 1px #fff;
	padding: 0 20px;
	outline: solid 1px #f99;
	width: 100%;
	height: auto;
}
.footer_contents {
	display: flex;
		flex-wrap: wrap;
	margin: 0 auto;
	padding-top: 8px;
}
.other_menu {
	display: flex;
	color: #fff;
	font-size: 12px;
	font-size: 1.2rem;
	width: 100%;
}
.other_menu ul {
	display: flex;
		flex-wrap: wrap;
	margin: 0 auto;
}
.other_menu ul li {
	margin-right: 2em;
}
.other_menu ul li:last-child {
	margin-right: 0;
}
.other_menu ul li a {
	color: #fff;
	display:block;
	font-weight:normal;
	padding-left: 8px;
	position: relative;
}
.other_menu ul li a:hover {
	opacity: .6;
	text-decoration: none;
}
.other_menu ul li a::before {
	content: "\f0da"; /* fa-caret-right */
	color: #fff;
	font-family: FontAwesome;
	font-size: 11px;
	font-size: 1.1rem;
	position: absolute;
		top: 1px;
		left: 0;
}
small {
	color: #fff;
	font-size: 11px;
	font-size: 1.1rem;
	margin-top: 2em;
	text-align: center;
	width: 100%;
	height: auto;
}


/*########################################################################################
|
|サイト共通スタイルまとめ
|
########################################################################################*/
/*-----------------------------------------------------------------------------
|
■┓テーブルスタイル
┗┛
-----------------------------------------------------------------------------*/
/* normal */
table.normal {
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 1em;
	/*width: 100%;*/
}
table.normal th ,
table.normal td {
	padding: 16px ;
	border: 1px solid #ccc;
}
table.normal th {
	background: #efefef;
	white-space: nowrap;
}
table.normal thead th {
	background: #999;
	border: 1px solid #fff;
	border-top: 1px solid #999;
	color: #fff;
}
table.normal thead th:nth-child(1) {
	border-left: 1px solid #999;
}
table.normal thead th:nth-last-child(1) {
	border-right: 1px solid #999;
}
table.normal tbody th {
	background: #efefef;
	text-align: left;
	vertical-align: middle;
}
table.normal .delete_cell {
	border: none !important;
	background-color: #fff;
}
/*--------------
|
■┓テーブル、オーバーフローで横スクロールバー表示設定
┗┛
----------------------------------------------------------*/
.tbl_scroll {
	overflow-x: auto;
	width: 100%;
}
.tbl_scroll {
	margin-bottom: 1.5em
}
.tbl_scroll::-webkit-scrollbar {
	height: 4px;
}
.tbl_scroll::-webkit-scrollbar-track {
	background: #eee;
	border-radius: 4px;
}
.tbl_scroll::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: 5px;
}
/*-----------------------------------------------------------------------------
|
■┓ページのトップへ
┗┛
-----------------------------------------------------------------------------*/
.page_top {
	position: fixed;
	bottom: 16px;
	right: 16px;
}
.page_top a {
	background: #fff;
	border-radius: 50%;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	color: #000;
	display: inline-block;
	font-size: 12px; /* 固定 */
	line-height: 50px; /* 固定 */
	position: relative;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	width: 50px;
	height: 50px;
}
.page_top a:hover {
	background: #ccc;
	text-decoration: none;
	opacity: .9;
}



/*-----------------------------------------------------------------------------
|
■┓input  textarea  select　設定
┗┛
-----------------------------------------------------------------------------*/
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],/* inputで指定すると、radio、checkboxも変更されてしまうためtypeで指定 */
textarea,
select {
	-webkit-appearance: none;/* iPad用のデザイン初期化　selectの▼非表示 */
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color : rgba(0,0,0,0);
	border: 1px solid #999;
	border-radius: 0;
	box-shadow: inset 1px 3px 9px -8px rgba(0,0,0,0.5);
	font-family: inherit;
	font-size: inherit;
	margin-top: .3em;
	margin-bottom: .3em;
	outline: none;
	padding: 4px 8px;
}
input[type=text] ,
input[type=id] , 
input[type=password] ,
select {
	height: 40px;
	padding: 0 8px;
}
/* input */
input:-webkit-autofill { /* オートフィルでの背景色を上書き フォーカスが外れた時のため */
	-webkit-box-shadow: 0 0 0 1000px white inset;
}
/* input type="number" */
input[type="number"]::-webkit-inner-spin-button { /* スピンボタン非表示 */
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] { /* スピンボタン非表示 */
	-moz-appearance: textfield;
}
/* input type="radio" */
input[type="radio"] {
	display: none;
}
input[type="radio"] + label {
	display: inline-block;
	margin-right: 0.8em;
	padding: 3px 3px 3px 22px;
	position: relative;
}
input[type="radio"] + label::before,
input[type="radio"] + label::after {
	content: "";
	position: absolute;
	transition: all .2s;
}
input[type="radio"] + label::before {
	background: #f4f4f4;
	border: 1px solid #ccc;
	border-radius: 14px;
	top: 10px;
	left: 0;
	width: 14px;
	height: 14px;
}
input[type="radio"] + label::after {
	border-radius: 50%;
	top: 13px;
	left: 3px;
	width: 10px;
	height: 10px;
	opacity: 0;
}
input[type="radio"] + label:hover::before {
	background: #fff;
}
input[type="radio"]:checked + label::before,
label.radio_checked::before {
	background: #fff;
	border: 1px solid #f99;
	opacity: 1;
}
input[type="radio"]:checked + label::after,
label.radio_checked::after {
	background: #f99;
	opacity: 1;
}

/* input type="checkbox" */
input[type="checkbox"] {
	display: none;
}
input[type="checkbox"] + label,
label.checkbox_in_label {
	display: inline-block;
	margin-right: 0.8em;
	padding: 3px 3px 3px 22px;
	position: relative;
}
input[type="checkbox"] + label::before,
label.checkbox_in_label::before,
input[type="checkbox"] + label::after,
label.checkbox_in_label::after {
	content: "";
	position: absolute;
	transition: all .2s;
}
input[type="checkbox"] + label::before,
label.checkbox_in_label::before {
	background: #f4f4f4;
	border: 1px solid #ccc;
	border-radius: 3px;
	top: 11px;
	left: 0;
	width: 14px;
	height: 14px;
}
input[type="checkbox"] + label::after,
label.checkbox_in_label::after {
	border-left: 2px solid #f99;
	border-bottom: 2px solid #f99;
	top: 15px;
	left: 3px;
	width: 8px;
	height: 4px;
	opacity: 0;
	transform: rotate(-45deg) scale(.5);
}
input[type="checkbox"] + label:hover::before,
label.checkbox_in_label:hover::before {
	background: #fff;
}
input[type="checkbox"]:checked + label::before,
label.checkbox_checked::before {
	background: #fff;
	border: 1px solid #f99;
	opacity: 1;
}
input[type="checkbox"]:checked + label::after,
label.checkbox_checked::after {
	transform: rotate(-45deg) scale(1);
	opacity: 1;
}
input[type="search"]::-webkit-search-cancel-button {/* input内×ボタンのデザイン削除 */
	-webkit-appearance: none;
}

input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
	color: #f66;
}
input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label {
	color: #ccc;
}
/* select */
select::-ms-expand {
	display: none;
}
select {
	background-color: #fff;
	background-image: url(/vc/base/usr/docs/images/select_arrow.svg);
	background-position: right 5px top 50%;
	background-repeat: no-repeat;
	background-size: 10px 7px;
	cursor: pointer;
	max-width: 100%;
	padding-right: 20px;
}
select:disabled {
	background-image: url(/vc/base/usr/docs/images/select_arrow_disabled.svg);
	border-color: #ccc;
	color: #999;
	cursor: default !important;
}

/*-----------------------------------------------------------------------------
|
■┓ページ遷移ボタン
┗┛
-----------------------------------------------------------------------------*/
.submit_area {
	display: flex;
	flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		align-items: center;
	margin: 48px 0;
	text-align: center;
	width: 100%;
}
.submit_area a {
	cursor: pointer;
}
.submit_area.single {
	display: block;
}

a.btn_submit {
	color: #fff !important;
	display: flex;
		align-items: center;
		justify-content: center;
	font-weight: bold;
	transition: all .2s;
}
a.btn_submit span {
	display: block;
	line-height: 1.0;
}
a.btn_submit:hover {
	opacity: .6;
}

a.link_arrow {
	font-size: 12px;
	font-size: 1.2rem;
	position: relative;
}
a.link_arrow::before {
	content: "\f061"; /* fa-chevron-right */
	color: #333;
	display: inline-block;
	font-family: FontAwesome;
	padding-right: 4px;
}
a.link_arrow span {
	border-bottom: 1px solid #000;
	color: #333;
}
a.link_arrow:hover span {
	border-bottom: none;
}

a.btn_next,
a.btn_back {
	border-radius: 4px;
	color: #fff;
	display: inline-flex;
		justify-content: center;
		align-items: center;
	line-height: 1;
	padding: 16px;
	transition: .3s;
}
a.btn_next {
	background-color: #f99;
	color: #fff !important;
	height: 60px;
	min-width: 256px;
}
a.btn_back {
	background-color: #ddd;
	color: #000 !important;
	font-size: 14px;
	font-size: 1.4rem;
	height: 40px;
	min-width: 128px;
}
a.btn_next span,
a.btn_back span {
	position: relative;
}
a.btn_next span{
	padding-left: 24px;
}
a.btn_back span {
	padding-left: 16px;
}
a.btn_next span::before,
a.btn_back span::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
}
a.btn_next span::before {
	content: "\f061";
	font-size: 14px;
	font-size: 1.4rem;
	top: 2px;
	left: 0;
}
a.btn_back span::before {
	content: "\f053";
	font-size: 12px;
	font-size: 1.2rem;
	top: 3px;
	left: 0;
}
a:hover.btn_next,
a:hover.btn_back {
	opacity: .6;
	text-decoration: none;
}


/*-----------------------------------------------------------------------------
|
■┓ポップアップ内の閉じるボタン
┗┛
-----------------------------------------------------------------------------*/
.popup_btn_close {
	margin-top: 24px;
	text-align: center;
}


/*-----------------------------------------------------------------------------
|
■┓その他
┗┛
-----------------------------------------------------------------------------*/
.pink_dot {
	color: #f99;
}
.attention_area {
	background: #ffefef;
	border-radius: 4px;
	font-size: 14px;
	font-size: 1.4rem;
	margin-top: 1em;
	padding: 16px;
}
.attention_area .ttl_attention {
	color: #f00;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.0;
	margin-bottom: .5em;
	padding-left: 20px;
	position: relative;
}

.attention_area .ttl_attention::before {
	content: "\f06a";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
		top: 1px;
		left: 0;
}

/*-----------------------------------------------------------------------------
|
|■┓「第2回くうねるあるく」未エントリーポップアップ用
|┗┛
-----------------------------------------------------------------------------*/
.skip_ttl {
	color: #f99;
	font-size: 30px;
	font-size: 3.0rem;
	font-weight: bold;
	margin: 8px 0 24px;
	padding: 16px 0 20px;
	text-align: center;
}
.skip_contents {
	border-top: 1px dashed #f99;
	border-bottom: 1px dashed #f99;
	margin: 0 auto 80px;
	padding: 80px 0;
	width: 100%;
}
.skip_contents > .submit_area {
	margin: auto;
	width: 500px;
}