@charset "shift-jis";

body{
	color: #343434;
	background: #fafafa;
}

.container{
	width: 960px;
	padding: 0 16px;
	margin-right:auto;
	margin-left:auto;
}

.row{
	margin-right: -16px;
	margin-left: -16px;
}

/*12col px指定*/
.col_1{ width:80px; }
.col_2{ width:160px; }
.col_3{ width:240px; }
.col_4{ width:320px; }
.col_5{ width:400px; }
.col_6{ width:480px; }
.col_7{ width:560px; }
.col_8{ width:640px; }
.col_9{ width:720px; }
.col_10{ width:800px; }
.col_11{ width:880px; }
.col_12{ width:960px; }

.col_1,.col_2,.col_3,.col_4,.col_5,.col_6,.col_7,.col_8,.col_9,.col_10,.col_11,.col_12{
	padding: 16px;
}

h2.h2_ttl{
	margin: 24px auto;
	padding: 16px 8px;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	color: #4169e1;
	border-top: 1px solid #4169e1;
	border-bottom: 1px solid #4169e1;
}

h3.h3_ttl{
	width: 100%;
	height: 40px;
	line-height: 40px;
	margin: 16px auto;
	padding: 0 0 4px 12px;
	font-size: 1.5rem;
	font-weight: bold;
	color: #525252;
	border-bottom: 1px solid #e5e5e5;
	position: relative;
}

h3.h3_ttl:before{
	position: absolute;
	top: 10px;
	left: 0;
	display: block;
	content: "";
	width: 6px;
	height: 20px;
	margin-right: 8px;
	background: #d0d0d0;
	border-radius: 16px;
}

a.text_link{
	color: #6c6c6c;
}

/*------------------------------------
ボタン
------------------------------------*/
.btn{
	padding: .8em .5em;
	color: #fff;
	background: #1e72ca;
	box-shadow: 0 3px 0 #054f89;
}

.btn:hover{
	opacity: .85;
	box-shadow: none;
}

/*次へ*/
.btn_next{
	background: #fda600;
	box-shadow: 0 3px 0 #af7b19;
}

/*------------------------------------
ページング
------------------------------------*/
.current_page{
	margin-bottom: 8px;
	text-align: right;
	font-size: 1.3rem;
	color: #999;
}

ul.list_paging{
	width: 50%;
	margin: 24px auto;
	letter-spacing: -.4em;
	text-align: center;
}

ul.list_paging li{
	letter-spacing: normal;
	display: inline-block;
	width: 18%;
	height: 32px;
	line-height: 32px;
	margin: 0 2px;
}

ul.list_paging li.now_page{
	color: #fff;
	background: #069999;
}

ul.list_paging li a{
	display: block;
	color: #a5a5a5;
	background: #efefef;
	text-align: center;
}

/*------------------------------------
ヘッダー
------------------------------------*/
header{
	width: 100%;
	background: #4169e1;
}

.header_inner{
	height: 56px;
}

h1.logo{
	width: 240px;
	font-size: 1.4rem;
	font-weight: bold;
}

h1.logo a{
	display: block;
	color: #fff;
}

.top_page_header_links{
	width: 240px;
}

.top_page_header_links a{
	display: inline-block;
	width: 48%;
	padding-left: 20px;
	color: #fff;
	font-size: 1.4rem;
	position: relative;
}

.top_page_header_links a:after{
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 6px);
	left: 0;
	width: 8px;
	height: 8px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.btn_in_header{
	padding: .8em;
	font-size: 1.4rem;
	text-align: center;
	font-weight: bold;
	border-radius: 4px;
}

.btn_in_header:hover{
	box-shadow: none;
}

/*法人契約済みのお客様はコチラ*/
.for_corporations{
	color: #343434;
	background: #f5ba5c;
	box-shadow: 0 3px 0 #c6841c;
}

/*一般のお客様はコチラ*/
.for_user{
	color: #fff;
	background: #45bc02;
	box-shadow: 0 3px 0 #2e8000;
}

/*------------------------------------
フッター
------------------------------------*/
footer{
	width: 100%;
	height: 100px;
	background: #4169e1;
}

/*------------------------------------
ナビゲーション
------------------------------------*/
nav ul li{
	width: 20%;
	background: #4169e1;
}

nav ul li a{
	display: block;
	width: 100%;
	padding: .8em 0;
	text-align: center;
	color: #fff;
	position: relative;
}

/*仕切り線*/
nav ul li a:after{
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 8px);
	right: 2px;
	width: 2px;
	height: 16px;
	border-right: 1px solid #fff;
}

nav ul li:last-child a:after{
	display: none;
}

nav .btn_in_nav{
	display: block;
	padding: .8em .5em;
	color: #fff;
	text-align: center;
	background: #1e72ca;
	border-radius: 4px;
	box-shadow: 0 3px 0 #054f89;
}

.btn_in_nav:hover{
	opacity: .85;
	box-shadow: none;
}
/*------------------------------------
メイン
------------------------------------*/
.main_inner{
	padding: 32px 0;
	min-height: calc(100vh - 156px);/*ヘッダーフッタの高さ分引く*/
}

/*------------------------------------
トップページ
------------------------------------*/
/*リード文*/
.lead_text_box .btn{
	margin: 0 auto 8px;
}

.large_lead_text{
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
	color: #4169e1;
	margin-bottom: 16px;
}

.lead_text{
	padding: 8px;
}

/*トップページのリスト共通*/
ul.top_page_list li h3{
	text-align: center;
	font-weight: bold;
	font-size: 1.6rem;
	margin: 8px auto;
}

ul.top_page_list li p{
	font-size: 1.4rem;
}

ul.top_page_list li .img_box {
	width: 180px;
	margin: 0 auto;
}

ul.top_page_list li p span{
	font-size: 1.2rem;
	color:#888;
}

/*よくある質問*/
ul.faq_list li{
	margin-bottom: 8px;
}

ul.faq_list li.que{
	font-weight: bold;
	color: #0b5fc1;
}

ul.faq_list li.ans{
	margin-bottom: 16px;
	padding: 8px 8px 8px 4px;
	font-size: 1.4rem;
	border-bottom: 1px solid #e5e5e5;
}

ul.faq_list li:last-child.ans{
	border-bottom: none;
}

/*運営会社*/
.company_info_box h3{
	font-weight: bold;
	font-size: 1.6rem;
	margin: 8px auto;
}


/*------------------------------------
フォーム関連
------------------------------------*/
.form_box {
	padding: 32px 48px;
}

.form_box .form_row {
	margin-bottom: 32px;
}

.btn_radio{
	width: 32%;
}

/*ラジオ代替ボタン / チェックボックス代替ボタン*/
.form_box .btn_radio,
.form_box .btn_checkbox{
	padding: .8em 0;
	font-size: 1.5rem;
	text-align: center;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 3px;
}

/*ラジオ代替ボタン / チェックボックス代替ボタン 選択時*/
input[type="radio"]:checked + .btn_radio,
input[type="checkbox"]:checked + .btn_checkbox{
	font-weight: bold;
	color: #fff;
	background: #66cc6f;
}

.form_box form textarea{
	height: 320px;
}

/*------------------------------------
料金プラン/支払い方法選択
------------------------------------*/
.plan_box .btn_radio,
.payment_box .btn_radio{
	width: 100%;
	margin-bottom: 24px;
}

/*------------------------------------
ストレスチェック
------------------------------------*/
/*設問*/
.stress_check_box .form_item{
	font-size: 1.6rem;
	font-weight: bold;
}

.stress_check_box .form_item:before{
	display: none;
}

/*------------------------------------
問診
------------------------------------*/
/*問診項目*/
.interview_box .form_item{
	font-size: 1.6rem;
	font-weight: bold;
}

/*ボタン3つ並び*/
.interview_box .flex_box{
	justify-content: flex-start;
}

/*ボタンサイズ*/
.interview_box .btn_radio,
.interview_box .btn_checkbox{
	width: 31.333%;
	margin:0 1% 16px;
}

/*ボタン4つ並び*/
.interview_box .btn_4_box .btn_radio{
	width: 23%;
}

/*ボタン2つ並び*/
.interview_box .btn_2_box .btn_radio,
.interview_box .btn_2_box .btn_checkbox{
	width: 48%;
}

/*居住地域用セレクト*/
.interview_box select{
	display: block;
	width: 40%;
}

/*------------------------------------
ストレスチェック結果
------------------------------------*/
/*グラフ*/
.myChart_wrap{
	position: relative;
}

#myChart{
	width: 48%;
	max-width: 480px;
	margin: 0 auto;
	padding-bottom: 24px;
}

/*グラフの項目名*/
ul.myChart_labels{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 312px;
	margin: 0 auto;
	padding: 5px;
	background: #fafafa;
	border:1px solid #e5e5e5;
	border-radius: 4px;
}

ul.myChart_labels li{
	flex-basis: 150px;
	font-size: 1.3rem;
	text-align: left;
	padding: 4px;
}

#myChart1_1{
	margin: 0 auto;
	width: 500px;
	max-width: 500px;
}

#myChart1_2{
	margin: 0 auto;
	width: 500px;
	max-width: 500px;
}

#myChart1_3{
	margin: 0 auto;
	width: 500px;
	max-width: 500px;
}

/*------------------------------------
回答一覧
------------------------------------*/
ul.mail_list li{
	margin-bottom: 24px;
}

ul.mail_list li p.mail_item{
	font-size: 1.4rem;
	padding-left: 8px;
	margin-bottom: 8px;
}

/*受信内容表示部分*/
.mail_text.recive{
	background: #fffeec;
}

/*メール本文*/
.mail_text {
	padding: 8px;
	height: 320px;
	border: 1px solid #e5e5e5;
	background: #fafafa;
	border-radius: 4px;
	overflow-y: scroll;
}

/*ボタン3つ並び*/
.select_counselor_box .flex_box{
	justify-content: flex-start;
}

/*ボタンサイズ*/
.select_counselor_box .btn_radio{
	width: 31.333%;
	margin:0 1% 16px;
}

/*------------------------------------
カウンセラー詳細
------------------------------------*/
.counselor_prof_box{
	padding: 32px 48px;
	margin-bottom: 24px;
}

.prof_img_box img{
	width: 240px;
	height: 240px;
	overflow: hidden;
	object-fit: cover;
}

.prof_detail_box{
	width: 480px;
}

/*------------------------------------
マイページ
------------------------------------*/
.mypage_box{
	padding: 32px 48px;
}

.btn_to_new{
	margin-bottom: 32px;
}

.consultation_table{
	table-layout: fixed;/*th tdの幅固定用*/
	width: 100%;
	border:1px solid #e5e5e5;
}

.consultation_table th{
	background: #bacfe8;
}

.consultation_table th,
.consultation_table td{
	padding: .5em;
	text-align: center;
	border:1px solid #e5e5e5;
}

/*案件名部分*/
.consultation_table th.title{
	width: 400px;
}

/*案件名部分*/
.consultation_table td.title p{
	width: inherit;
	text-align: left;
	color: #343434;
	text-decoration: underline;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/*状態*/
.status{
	display: inline-block;
	width: 100%;
	height: 32px;
	line-height: 32px;
	color:#fff;
	background: #8e8e8e;
	border-radius: 4px;
}

.status.active{
	background: #ff8000;
}

.status.selecting{
	background: #1e90ff;
}


.complete_btn {
    width: 200px;
    margin-right: 10px;
}