@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: #009999;
	border-top: 1px solid #009999;
	border-bottom: 1px solid #009999;
}

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;
}

/*中見出し*/
.ttl_mid{
	font-weight: bold;
	font-size: 1.5rem;
}

/*小見出し*/
.ttl_sm{
	font-weight: bold;
	font-size: 1.4rem;
}

a.text_link{
	color: #6c6c6c;
}

a.text_link2{
	color: #ff0000;
}

.memo{
	font-size: 1.2rem;
	color:#888;
}

.caution{
	color: #f00;
}

/*説明文配置BOX*/
.description_box{
	margin: 16px auto;
	padding: 16px;
	font-size: 1.3rem;
}

.description_box .ttl_mid{
	font-size: 1.8rem;
}

.description_box p{
	padding: 8px 0;
}

/*チェックマークアイコン*/
.icn_checkmark:before{
	content: "\f14a";
	font-size: 18px;
	color: #e23b3b;
	vertical-align: baseline;
	margin-right: 8px;
}

/*スライドトグル用*/
.toggle{
	cursor: pointer;
}

.hide{
	display: none;
}

.content_box{
	padding: 16px;
	background: #f2f2f2;
}

/*登録工程表示*/
.steps{
	margin-bottom: 16px;
	height: 64px;
}

/*トップに戻る*/
.back_to_page{
	display: inline-block;
	color: #666;
}

.back_to_page:before{
	content: "";
	display: inline-block;
	margin-right: 4px;
	width: 12px;
	height: 12px;
	background: #666;
	border-radius: 50%;
}

/*------------------------------------
ボタン
------------------------------------*/
.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;
}

/*ページトップへボタン*/
#back{
	display: none;
	position: fixed;
	right: 0;
	bottom: 25px;
	width: 56px;
	height: 56px;
	line-height: 56px;
	text-align: center;
	font-size: 1.6rem;
	color: #fff;
	background: rgba(0, 0, 0,.15);
	border-radius: 50%;
	cursor: pointer;
}

@media screen and (min-width: 960px){
	#back{
		right: calc(50% - 530px);
	}
}

.btn_2box .btn{
	width: 48%;
}

/*------------------------------------
ページング
------------------------------------*/
.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%;
	min-width: 960px;
	background: #009999;
}

.header_inner{
	min-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: 480px;
	padding: 0 32px;
}

.top_page_header_links a{
	display: inline-block;
	width: 120px;
	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{
	width: 192px;
	padding: .8em;
	font-size: 1.3rem;
	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;
}

/*ログイン後の会員名*/
.login_member_box .coporete_name{
	width: 100%;
	display: inline-block;
	margin-right: 8px;
	font-size: 24px;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
}

.login_member_box .user_name{
	display: inline-block;
	margin-right: 8px;
	font-size: 24px;
	color: #fff;
}

.logout{
/*
	color: #fff;
*/
    color: #ea6205;
    background: #ffe699;
    box-shadow: 0 3px 0 #f5ba5c;
    padding: .8em;
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
}

/*------------------------------------
フッター
------------------------------------*/
footer{
	width: 100%;
	min-width: 960px;
	min-height: 150px;
	padding: 32px 0;
	background: #fff;
	border-top: 4px solid #009999;
}

.footer_logo{
	width: 360px;
	height: 60px;
	background-image: url(../img/logo.png);
	background-size: contain;
	background-repeat: no-repeat;
}

ul.footer_links{
	width: 500px;
	letter-spacing: -.4em;
}

ul.footer_links li{
	display: inline-block;
	letter-spacing: normal;
}

ul.footer_links li a{
	display: block;
	padding: 4px 8px;
	font-size: 1.4rem;
	color: #2f2f2f;
	text-align: center;
}

ul.footer_links li a:hover{
	text-decoration: underline;
}

.footer_p{
	width: 60px;
}

/*------------------------------------
ナビゲーション
------------------------------------*/
nav{
	padding: 16px 0;
}

nav ul li{
	display: inline-block;
	min-width: 88px;
	position: relative;
}

nav ul li a{
	display: block;
	width: 100%;
	padding: 0.5em;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	color:#009999;
}

nav ul li a:hover{
	text-decoration: underline;
}

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

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

.btn_in_nav{
	width: 192px;
	padding: .8em;
	font-size: 1.3rem;
	text-align: center;
	font-weight: bold;
	color: #fff;
	background: #1e72ca;
	border-radius: 4px;
	box-shadow: 0 3px 0 #054f89;
}

.btn_in_nav:hover{
	opacity: .85;
	box-shadow: none;
}
/*------------------------------------
メイン
------------------------------------*/
main{
	display: block;
}

.main_inner{
	padding: 32px 0;
	min-height: calc(100vh - 156px);/*ヘッダーフッタの高さ分引く*/
}

/*------------------------------------
カード型のリスト
------------------------------------*/
.card_list .ttl{
	text-align: center;
	font-weight: bold;
	font-size: 1.6rem;
	margin: 8px auto;
}

.card_list p{
	font-size: 1.4rem;
}

.card_list .img_box{
	width: 180px;
	margin: 0 auto;
}

/*------------------------------------
トップページ
------------------------------------*/
#top_page a.text_link{
	color: #1e72ca;
	text-decoration: underline;
}

.main_visual_box{
	height: 560px;
	background: #dcdcdc;
	background: url(../img/main_visual.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

/*リード文*/
.lead_text_box{
	padding: 24px 0;
}

.lead_text_box .btn{
	margin: 16px auto 0;
	background: #ff537b;
	box-shadow: 0 3px 0 #ce3b5d;
}

.lead_text_box .btn:hover{
	box-shadow: none;
}

.large_lead_text{
	margin-bottom: 8px;
	font-size: 4rem;
	font-weight: bold;
	color: #1e72ca;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.mid_lead_text{
	margin-bottom: 24px;
	font-size: 1.8rem;
	color: #1e72ca;
}

.sm_lead_text{
	font-size: 1.4rem;
}

/*こんな時におすすめします*/
.example_box h3{
	margin-bottom: 8px;
	color: #ea4f46;
}

.example_time{
	width: 50%;
}

.example_person{
	width: 50%;
}

.example_time ul{
	padding-right: 24px;
}

.example_time ul li{
	margin-bottom: 8px;
	padding-left: 40px;
	font-size: 1.4rem;
	position: relative;
}

.example_time ul li:before{
	position: absolute;
	top:calc(50% - 16px);
	left:0;
	content: "";
	display: inline-block;
	width: 32px;
	height: 32px;
	background: url(../img/icn_sad_face.png);
	background-size: contain;
	background-repeat: none;
	vertical-align: middle;
}

.person_box{
	padding: 8px;
	font-size: 1.4rem;
	border-radius: 4px;
}

.person_box img{
	display: block;
	width: 96px;
	height: 96px;
}

.person_box div{
	width: 60%;
}

.person_01{
	margin-bottom: 16px;
	background: #fff4d2;
}

.person_02{
	background: #e2ffd2;
}

/*------------------------------------
特徴
------------------------------------*/
.feature_box .headline_box{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.feature_box .headline_box .point{
	width: 48px;
	height: 48px;
	padding: .5em 0;
	line-height: 1;
	text-align: center;
	color: #fff;
	background: #448ee5;
	border-radius: 4px;
}

.feature_box .headline_box h3{
	width: 230px;
	margin: 0;
	padding-left: 8px;
	text-align: left;
	color:#448ee5;
}

/*利用時のご注意*/
.caution_box{
	padding: 16px 8px;
}

.caution_box .left_box{
	width: 25%;
	padding: 1em 8px;
	text-align: center;
	color: #448ee5;
	border:2px solid #448ee5;
	border-radius: 8px;
}

.caution_box .right_box{
	width: 75%;
	padding: 8px 16px;
}

/*------------------------------------
ご利用の流れ
------------------------------------*/
ul.flow_list li{
	position: relative;
}

ul.flow_list li:after{
	position: absolute;
	top:calc(50% - 16px);
	right: -4px;
	display: block;
	margin: 8px auto;
	content: "";
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-left: 12px solid #adb5bc;
	border-bottom: 12px solid transparent;
}

ul.flow_list li:nth-of-type(3n):after,
ul.flow_list li:last-child:after{
	display: none;
}

ul.flow_list li .ttl{
	margin-bottom: 8px;
	font-size: 2.2rem;
}

ul.flow_list li .ttl .step{
	display: block;
	width: 50%;
	margin: 0 auto 16px;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	color: #fff;
	background:#3282d1;
	border-radius: 128px;
}

ul.flow_list li p{
	margin-bottom: 8px;
	padding: 4px;
	font-size: 1.3rem;
	text-align: left;
}

ul.flow_list li .in_box{
	border:3px solid #3282d1;
}

/*ご利用の流れ　個人利用*/
.before_box ul.flow_list li,
.after_box ul.flow_list li{
	width: 25%;
}

.before_box ul.flow_list li:nth-of-type(3n):after,
.after_box ul.flow_list li:nth-of-type(3n):after{
	display: block;
}

.before_box ul.flow_list li .ttl,
.after_box ul.flow_list li .ttl{
	font-size: 1.7rem;
}

/*ご利用の流れ　個人利用-相談開始後*/
.after_box ul.flow_list li .in_box{
	border: 3px solid #009999;
}

.after_box ul.flow_list li .ttl .step{
	background: #009999;
}

/*------------------------------------
ストレスチェックについて
------------------------------------*/
#about_stress_check_page .ttl_border_left{
	margin-bottom: 16px;
	padding: 2px 0 2px 16px;
	font-weight: bold;
	border-left: 8px solid #3282d1;
}

#about_stress_check_page .card_list .in_box .ttl{
	margin-top: 0;
	padding: 16px 8px;
	color: #fff;
	background: #3282d1;
}

#about_stress_check_page a.text_link {
	color: #6c6c6c;
	text-decoration: underline;
}

/*------------------------------------
料金プラン
------------------------------------*/
.price_box .ttl{
	margin-top: 0;
	padding: 8px 0;
	color: #fff;
	background: #a4a4a4;
}

.price_box .monthly{
	background: #ea4f46;
}

.price_box .two_mail{
	position: relative;
}

.price_box .two_mail span{
	display: block;
	position: absolute;
	left: 8px;
	top:calc(50% - 24px);
	width: 48px;
	height: 48px;
	padding-top: 1em;
	line-height: 1.2;
	text-align: center;
	font-size: 1.2rem;
	color: #000;
	background: #ff0;
	border-radius: 50%;
}

.price_box .five_mail{
	background: #448ee5;
}

.price_box ul.card_list li .itemize{
	min-height: 60px;
}

.price_box ul.card_list li .itemize p{
	font-size: 1.3rem;
}

/*------------------------------------
カウンセラー一覧
------------------------------------*/
ul.counselor_list{
}

.prof_box .img_box{
	width: 120px;
	height: 120px;
}

.prof_box .counselor_profile_box{
	text-align: center;
	width: 50%;
	color: #3282d1;
}

.career_box p:nth-child(1){
	margin-bottom: 8px;
}

.career_box{
	margin: 16px auto;
	color: #ff7878;
	font-size: 1.3rem;
}

.tags_box span{
	display:inline-block;
	margin: 0 8px 8px 0;
	padding: 4px;
	text-align: center;
	font-size: 1.3rem;
	color: #fff;
	background: #3282d1;
}

/*------------------------------------
よくある質問
------------------------------------*/
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{
	width:70%;
}

.company_info_box h3{
	font-weight: bold;
	font-size: 1.6rem;
}

.company_info_box_img{
	width: 100px;
	margin-top: 120px;
	margin-left: 130px;
}

/*------------------------------------
推奨環境
------------------------------------*/
.system_requirements_box{
	width: 80%;
	margin: 0 auto;
}

.system_requirements_box h3{
	margin: 24px 0;
	padding-bottom: 4px;
	font-weight: bold;
	font-size: 1.6rem;
	border-bottom: 1px solid #e5e5e5;
}

.system_requirements_box table{
	display: table;
	width: 100%;
	margin: 0 auto 32px;
	border:1px solid #e5e5e5;
}

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

.system_requirements_box table td{
	text-align: left;
}

.system_requirements_box table .headline{
	font-weight: bold;
	background: #edf2f3;
}

/*------------------------------------
カウンセラー詳細
------------------------------------*/
.counselor_detail_box{
	padding-bottom: 16px;
}

.counselor_detail_box .prof_box{
	margin-top: 16px;
	width: 25%;
	text-align: center;
}

.counselor_detail_box .prof_box .img_box{
	margin: 0 auto 24px;
}

.counselor_detail_box .intro_box{
	width: 75%;
}

.counselor_detail_box .intro_box p{
	font-size: 1.4rem;
	padding: 0 16px;
}

/*------------------------------------
法人サービス案内ページ
------------------------------------*/
.for_corporations_header{
	background: #e28a00;
}

.for_corporations_footer{
	border-top: 4px solid #e28a00;
}

/*初回・2回目以降ログインボタン*/
.login_btn_list li{
	width: 48%;
	border-radius: 8px;
	background: #fff;
	border: solid 1px #e5e5e5;
}

.login_btn_list li a:hover{
	display: block;
	opacity: .75;
}

.login_first_time p,.login_second_time p{
	width:calc(100% - 180px);
	text-align: center;
	font-weight: bold;
	font-size: 1.8rem;
	color: #000;
}

.login_first_time p span{
	font-size: 1.2rem;
	font-weight: normal;
}

.login_first_time .img_box,.login_second_time .img_box{
	width:180px;
}

/*------------------------------------
この様な法人様へ特にお勧めします
------------------------------------*/
.task_box .ttl,
.resolve_box .ttl{
	font-weight: bold;
	text-align: center;
	margin-bottom: 8px;
}

.task_box p,
.resolve_box p{
	height: 72px;
	margin-bottom: 24px;
	padding: 8px;
	background: #eeefff;
	border:1px solid #e5e5e5;
	border-radius: 8px;
}

.task_box p{
	position: relative;
}

.task_box p:after{
	position: absolute;
	top:calc(50% - 16px);
	right: -24px;
	display: block;
	margin: 8px auto;
	content: "";
	width: 0;
	height: 0;
	border-top: 12px solid transparent;
	border-left: 12px solid #adb5bc;
	border-bottom: 12px solid transparent;
}

.resolve_box p{
	background: #fff4d2;
	border:1px solid #fde59a;
}

/*------------------------------------
料金プラン（法人向け）
------------------------------------*/
.for_corporations_page .price_box .ttl{
	padding: 16px 0;
}

.fixed_plan_box .ttl{
	background: #06c179;
}

.payper_plan_box .ttl{
	background: #ffaf17;
}

.price_items_box{
	padding: 8px 0 0;
}

.price_items_box p{
	height: 48px;
	text-align: center;
}

.price_items_box p:nth-of-type(1){
	width: 47%;
	line-height: 48px;
	color: #fff;
	background: #808080;
}

.price_items_box p:nth-of-type(2){
	width: 6%;
	line-height: 48px;
	font-size: 4rem;
}

.price_items_box p:nth-of-type(3){
	width: 47%;
	padding: .25em 0;
	color: #fff;
	background: #06c179;
}

.payper_plan_box .price_items_box p:nth-of-type(3){
	background: #ffaf17;
}

/*------------------------------------
ご利用の流れ（法人向け）
------------------------------------*/
.for_corporations_page .flow_list li:last-child:after{
	display: none;
}

/*------------------------------------
フォーム関連
------------------------------------*/
.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;
}

/*------------------------------------
新規登録
------------------------------------*/
/*性別用*/
.btn_sex_radio{
	flex-basis: 32%;
}

/*男性選択時*/
.form_box input[type="radio"]#other:checked + .on{
	color: #fff;
	background-color: #e58503;
}

/*------------------------------------
料金プラン選択
------------------------------------*/
/*無料プラン*/
.free_plan_box{
	margin: 24px auto 48px;
	padding: 16px;
	color:#fff;
	background: #0070c0;
	border:1px solid #0070c0;
	font-weight: bold;
}

.free_plan_box h2{
	color: #fff;
	font-size: xx-large;
}

.free_plan_box .h3_ttl{
	color: #fff;
	font-size: x-large;
}

.free_plan_box .btn{
	width: 60%;
	margin: 0 auto;
	background: #ffa700;
	box-shadow: 0 3px 0 #dea700;
}

/*寄附ページへ*/
.free_plan_box .btn.toDonationPage{
	display: block;
	width: 35%;
	padding: 24px 0;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	color: #000;
	background: #fff;
	border-top: 4px solid #ffc000;
	border-bottom: none;
	box-shadow: 0 3px 0 #dedede;
}

.btn.toDonationPage2{
	color: #000;
	background: #fff;
}

.plan_box .free_plan_box{
	width: 45%;
	padding: 8px;
}

.plan_box .free_plan_box h3{
	width: 80%;
	margin: 0 auto;
	padding: 24px 0;
}

.free_plan_box span.circle{
	display: block;
	width: 80px;
	height: 80px;
	padding: 0.7em 0 0.5em;
	text-align: center;
	border-radius: 50%;
	color: #0070c0;
	background: #fff;
	font-weight: bold;
}

.free_plan_box span.text{
	display: block;
	width: calc(100% - 80px);
	padding-left: 16px;
	font-weight: bold;
	font-size: 24px;
}

.plan_box .free_plan_box p{
	width: 80%;
	margin: 0 auto 16px;
}

.free_plan_box .btn_box{
	padding: 16px;
	background: #fff;
}

.free_plan_box .btn_box .btn{
	width: 100%;
}

.plan_select_box{
	width: 32%;
	padding: 32px;
	border:1px solid #eee;
}

.plan_select_box h3{
	text-align: center;
	font-weight: bold;
	font-size: 2.4rem;
	margin-bottom: 24px;
	color: #009999;
}

.plan_select_box p{
	text-align: center;
}

.plan_select_box .btn_radio{
	margin: 24px 0;
	display: block;
	cursor: pointer;
}

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

/*------------------------------------
決済申し込み完了
------------------------------------*/
.settle_description_box{
	margin: 48px auto 16px;
	padding: 48px 32px;
	border: 2px solid #ffd966;
	position: relative;
}

.settle_description_box h3{
	position: absolute;
	top: -24px;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 320px;
	padding: 8px;
	text-align: center;
	font-weight: bold;
	font-size: 24px;
	background: #fff;
}

.settle_description_box h3.icn_excla:before{
	content:'\f06a';
	margin-right: 4px;
	color: #fc9d06;
}

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

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

/*回答が4つの場合*/
.stress_check_box.ans_type_four .btn_radio{
	width: 23%;
}

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

.interview_box .form_item a{
	font-size: 1.3rem;
	font-weight: normal;
}

/*ボタン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{
	margin: 0 auto;
	width: 560px;
	max-width: 560px;
}

/*グラフの項目名*/
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;
}

/*------------------------------------
回答一覧
------------------------------------*/
/*回答待ちページ*/
.flow_description_box .ttl_sm{
	color: #009999;
	font-size: 2.2rem;
	font-weight: normal;
}

.flow_description_box p{
	font-size: 1.6rem;
	line-height: 1.75;
}

.top_user_info_box {
	padding: 16px 0;
	font-weight: bold;
}

/*第1信*/
.send_first_time_comp_box{
	width: 75%;
	margin: 0 auto;
	padding: 48px 0;
}

.send_first_time_comp_box .fa-check-circle{
	color: #009999;
	font-size:80px;
}

.send_first_time_comp_box p{
	font-size: 2rem;
	font-weight: bold;
	padding-left: 24px;
}

/*やり取り画面*/
.exchange_mail_box .headline_box{
	padding: 8px;
	color: #fff;
	background: #009999;
}

.ttl_reply_form{
	padding: 8px;
	color: #fff;
	background: #92d050;
}

textarea.mail_text{
	background: #fffeec;
}

/*カウンセラーからの回答一覧*/
ul.mail_list li{
	margin-bottom: 24px;
}

ul.mail_list li .headline_box{
	padding: 8px;
	color: #fff;
	background: #009999;
	border-bottom: 1px solid #fff;
}

ul.mail_list li .from_name,
ul.mail_list li .from_name a{
	font-weight: bold;
	font-size: 1.8rem;
	margin-bottom: 8px;
	color: #009999;
}

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

/*送受信履歴*/
.mail_history_list .headline_box{
	padding: 8px;
	color: #fff;
	background: #92d050;
}

.mail_history_list .headline_box.from_counselor{
	background: #009999;
}

/*送受信者名配置BOX*/
.from_to_box{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/*矢印部分*/
.from_to_box i{
	display: block;
	width:10%;
}

/*送受信者名*/
.from,.to{
	width: 45%;
}

.from_to_box,.mail_date{
	width: 50%;
}

/*受信内容表示部分*/
.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_info_box{
	margin-bottom: 24px;
	padding: 8px;
	background: #fff;
	border:1px solid #009999;
}

.mypage_info_box a{
	color: #000;
}

/*左側*/
.left_box{
	width: 30%;
}

/*右側*/
.right_box{
	width: 68%;
}

/*相談履歴表*/
.mypage_history_box .consultation_table{
	background: #ebf1e8;
}

.mypage_history_box .consultation_table tr:nth-child(odd){
	background: #d4e2cf;
}

.mypage_history_box .consultation_table th{
	color: #fff;
	background: #009999;
}

.mypage_history_box .consultation_table td{
	padding: 1em;
}

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

/*メニュー*/
.menu_link{
	display: block;
	padding: .5em .75em;
	margin-bottom: 24px;
	font-weight: bold;
	font-size: 1.8rem;
	color: #000;
	background: #ccc;
}

.menu_link:hover{
	opacity: .75;
}

.menu_link.icn_fa:before{
	margin-right: 8px;
	font-size: 32px;
	vertical-align: middle;
}

.menu_link div{
	display: inline-block;
	vertical-align: middle;
}

.menu_link span{
	font-weight: normal;
	font-size: 1.2rem;
}

.to_counseling{
	color: #4472c4;
	background: #bdd7ee;
}

.to_history{
	color: #ed7d31;
	background: #ffe699;
}

.to_edit{
	color: #00b050;
	background: #c5e0b4;
}

.to_faq{
	color: #000;
	background: #d9d9d9;
}

.to_info{
	color: #ff4b6d;
	background: #fbd8cd;
}

.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;
}
.stress_check_box .pass_box .form_item:before{
	display: inline-block;
}
.stress_check_box .pass_box .form_item{
	color: #888;
	font-size: 1.3rem;
}

/*------------------------------------
利用規約
------------------------------------*/
.term_box h3{
	margin: 32px 0;
	text-align: center;
}

.term_box h4{
	margin-top: 16px;
	font-weight: bold;
}

.term_box ol{
	margin-left: 16px;
	list-style: decimal;
}

/* 括弧付きリスト */
.term_box ol.brackets{
	margin-left: 24px;
}

.term_box ol.brackets li{
	position: relative;
	list-style: none;
	counter-increment: cnt;
}

.term_box ol.brackets li:before{
	position: absolute;
	top: 0;
	left: 0;
	display: inlin-block;
	margin-left: -3.5em;
	width: 3em;
	text-align: right;
	content: counter(cnt) ") ";
}

/*------------------------------------
特定商取引法に基づく表記
------------------------------------*/
.manage_box{
	width: 80%;
	margin: 0 auto;
}

.manage_box h3{
	margin: 24px 0;
	padding-bottom: 4px;
	font-weight: bold;
	font-size: 1.6rem;
	border-bottom: 1px solid #e5e5e5;
}

.manage_box table{
	display: table;
	width: 100%;
	margin: 0 auto 32px;
	border:1px solid #e5e5e5;
}

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

.manage_box table td{
	text-align: left;
}

.manage_box table .headline{
	width: 30%;
	font-weight: bold;
	background: #edf2f3;
}

/*------------------------------------
ストレスチェック開始前の説明ページ
------------------------------------*/
/*ストレスチェックの説明*/
.howto_box{
	padding: 16px 0;
}

.howto_box .card_list li{
	width: 30%;
}

.howto_box .ttl{
	padding: 16px 0;
	color: #fff;
	background: #006ebc;
}

.to_supporter {
     color: #009999;
     background: #bdecec;
}


/*------------------------------------
ガイダンス
------------------------------------*/
.card_list p.step{
	text-align: center;
	font-weight: bold;
	color: #006699;
	font-size: 2.4rem;
}

/*------------------------------------
よくある質問
------------------------------------*/
.qa_title {
	font-size: x-large;
	font-weight: bold;
}

/*------------------------------------
同意
------------------------------------*/
.box_srcollbar {
	overflow:auto;
	width:100%;
	height:80px;
	padding:5px;
	border:1px solid #000;
	background-color:#FFF;
	color:#000;
	font-size:12px;
}

/*------------------------------------
決済確認画面
------------------------------------*/
.settle_confirm_item_main {
	margin-left: 27px;
	margin-bottom: 12px;
	font-size: 2.5rem;
}
.settle_confirm_item_cost {
	font-size: 1.5rem;
}
.settle_confirm_item_sub {
	margin-left: 27px;
}
.settle_confirm_item_sub2 {
	margin-left: 27px;
	margin-bottom: 12px;
}