/*
 * custom.css
 */
.content,.foot-guide{
	max-width: 680px;
}
.mandala-title{
	text-align: center;
	display: block;
	font-size: 20px;
	padding: 1em 0;
	font-weight: bold;
}

.mandala-type {
    text-align: center;
}
.mandala-type span {
    margin: auto 10px;
}
.mandala-type span.active {
    font-weight:bold;
    text-decoration:underline;
}

.content h2{
	font-size: 20px;
	font-size: bold;
}
.mandala_square{
  /* flexboxで等間隔に並べる*/
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  padding-inline-start: 0;
}

.mandala_square2{
  /* 枠線をつけて1列に3つ並べる */
  border: solid 1px #ded7c6;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 2%;
  width: 32%;
  /* 正方形にするのに必要な部分 */
  height: auto;
  position: relative;
}
 
.mandala_square2:before {
  content: "";
  display: block;
  padding-top: 100%; /* ここを100％にすることで正方形になる */
}
 
.mandala_square2 .btn_mandala{
  /* 正方形にするのに必要な部分 */
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /* 中央寄せ */
  text-align: center;
  padding: 2px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
 
/* 高さの中央揃えに必要な部分 */
.mandala_square2 .btn_mandala:before{
  content: "";
  height: 100%;
  vertical-align: middle;
  width: 0px;
  display: inline-block;
}
 
.mandala_square2 .btn_mandala > *{
  vertical-align: middle;
  display: inline-block;
}
 
.mandala_square2 .btn_mandala{
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
.btn_mandala{
	color: #fff;
}


.icon {
    list-style: none;
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	padding-inline-start: 0;
	text-align: center;
	align-items: center;
    /* display: flex; */
	display: none;
    justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
}
.icon li {
    display: inline;
	width: 50%;
	height: auto;
}
.icon img{
	padding: 5%;
	max-width: 38px;
	width: 100%;
	height: auto;
}

.mini-crown1 {
	display: none;
	position: absolute;
	top: 5px;
	left: 5px;
}
.mini-crown2 {
	display: none;
	position: absolute;
	top: 5px;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, 0%)
}
.mini-crown3 {
	display: none;
	position: absolute;
	top: 5px;
	right: 5px;
}
.mini-crown4 {
	display: none;
	position: absolute;
	top: 50%;
	left: 5px;
	margin-bottom: -50%;
	transform: translate(0%, -50%)
}
.mini-crown5 {
	display: none;
	position: absolute;
	top: 50%;
	right: 5px;
	margin-bottom: -50%;
	transform: translate(0%, -50%)
}
.mini-crown6 {
	display: none;
	position: absolute;
	bottom: 5px;
	left: 5px;
}
.mini-crown7 {
	display: none;
	position: absolute;
	bottom: 5px;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, 0%)
}
.mini-crown8 {
	display: none;
	position: absolute;
	bottom: 5px;
	right: 5px;
}




.pur{
	background: #920783;
	box-shadow: 4px 4px #D39CCD;
	position: relative;
}
.ora{
	background: #F39800;
	box-shadow: 4px 4px #FAD699;
	position: relative;
}
.yel{
	background: #FFCE00;
	box-shadow: 4px 4px #FFEB99;
	position: relative;
}
.yel-gree{
	background: #8FC31F;
	box-shadow: 4px 4px #D2E7A5;
	position: relative;
}
.red{
	background: #E60012;
	box-shadow: 4px 4px #F599A0;
	position: relative;
}
.blu{
	background: #1D2088;
	box-shadow: 4px 4px #9395C6;
	position: relative;
}
.skyblu{
	background: #0068B7;
	box-shadow: 4px 4px #99C3E2;
	position: relative;
}
.tar{
	background: #009E96;
	box-shadow: 4px 4px #B0D0CE;
	position: relative;
}
.gree{
	background: #009944;
	box-shadow: 4px 4px #99D6B4;
	position: relative;
}

/*戻るボタン*/
.foot-guide{
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.foot-guide a{
	color: #2c2c2c;
}
.foot-guide a:hover{
	color: #666;
}
.rtn{
	font-size: 40px;
}
/* ヘッダー、フッター、ユーザーヘッダー背景 */
.navbar, .main-footer, .user-header {
  background: -moz-linear-gradient(left, #8B5D9F, #C29FC6 12%, #E7C6DF 25%, #F5DCED 37%, #E7C6DF 50%, #C29FC6 62%, #8B5D9F 75%, #512A72 87%, #2D1A4F);
  background: -webkit-linear-gradient(left, #8B5D9F, #C29FC6 12%, #E7C6DF 25%, #F5DCED 37%, #E7C6DF 50%, #C29FC6 62%, #8B5D9F 75%, #512A72 87%, #2D1A4F);
  background: linear-gradient(left, #8B5D9F, #C29FC6 12%, #E7C6DF 25%, #F5DCED 37%, #E7C6DF 50%, #C29FC6 62%, #8B5D9F 75%, #512A72 87%, #2D1A4F);
}

/* ホバー時の背景 */
.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
  background: -moz-linear-gradient(left, #8B5D9F, #C29FC6 12%, #E7C6DF 25%, #F5DCED 37%, #E7C6DF 50%, #C29FC6 62%, #8B5D9F 75%, #512A72 87%, #2D1A4F);
  background: -webkit-linear-gradient(left, #8B5D9F, #C29FC6 12%, #E7C6DF 25%, #F5DCED 37%, #E7C6DF 50%, #C29FC6 62%, #8B5D9F 75%, #512A72 87%, #2D1A4F);
  background: linear-gradient(left, #8B5D9F, #C29FC6 12%, #E7C6DF 25%, #F5DCED 37%, #E7C6DF 50%, #C29FC6 62%, #8B5D9F 75%, #512A72 87%, #2D1A4F);
}


.display-deco{
	color: #666;
}
.skin-blue-light .main-header .navbar .dropdown-menu li .display-photo{
	font-size: 0.5em;
	display: block;
	color: #3c8dbc;
}
/*タスクアイコン表示*/
.cale{
	border: 1px solid #fff;
	border-radius: 2px;
	line-height: 0.8;
	padding: 2px 5px;
	margin-bottom: 2%;
	color: #fff;
}
.cale-day{
	font-size: 1.3em;
}
.cale-month{
	font-weight: bold;
}
.cale2{
	background: #fff;
	border: 1px solid #fff;
	border-radius: 2px;
	line-height: 0.8;
	padding: 2px 5px;
	margin-bottom: 2%;
	color: #ffd837;
}
.cale3{
	border: 1px solid #fff;
	border-radius: 2px;
	line-height: 0.8;
	padding: 2px 5px;
	margin-bottom: 2%;
}
.cale3 .cale-day{
	font-size: 1.2em;
}
.check{
	font-size: 2em;
}
.pur-task{
	background: #a93b9e;
}
.ora-task{
	background: #f5ad37;
}
.yel-task{
	background: #ffd837;
}
.yel-gree-task{
	background: #a7d04e;
}
.blu-task{
	background: #4d50a1;
}
.skyblu-task{
	background: #3789c6;
}
.tar-task{
	background: #37b3ac;
}
.gree-task{
	background: #37ae6b;
}
/*マンダラ入力*/
.mandala-edit1{
	text-align: center;
}
.output1{
	font-size: 16px;
    font-weight: bold;
    padding-top: 0;
	margin-bottom: 1em;
}
.output1::after{
	content: " %";
}
.output2{
	font-size: 16px;
	font-weight: bold;
	padding-top: 0;
	margin-bottom: 1em;
}
.output2::after{
	content: " pt";
}

.hidden_box {
	display: inline;
}
/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}
.mandala_edit_info{
	list-style: none;
	background: #fff;
	border: 1px solid #666;
	color: #2c2c2c;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-left: 20%; 
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slide {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slide:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slide {
  background-color: #f39800;
}

input:focus + .slide {
  box-shadow: 0 0 1px #f39800;
}

input:checked + .slide:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slide.round {
  border-radius: 34px;
}

.slide.round:before {
  border-radius: 50%;
}

.btn-default{
	background-color: #fff;
    color: #2c2c2c;
    border-color: #000;
	box-shadow:  2px 2px #444;
	margin-bottom: 1em;
}
.btn-default:hover{
	box-shadow: none;
}
.mandala-edit-foot{
	display: flex;
  	flex-wrap: wrap;
  	justify-content: space-between;
	list-style: none;
    padding-inline-start: 0;
	padding-top: 1em;
	padding: 1em;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
	margin-block-end: 0;
}
#self-evaluation{
	margin-top: 0.8em;
}
/*マンダラ作成*/
.content2{
	min-height: auto;
}
/*ボタンシャドウなし*/
.btn-default2{
	box-shadow: none;
}

.form-group .has-error .form-control{
	border-color: #dd4b39;
    box-shadow: none;
}
.form-group .has-error .help-block{
	color: #dd4b39;
}
.help-block{
    color: #dd4b39;
}

/*ポートフォリオ*/
.port-icon{
	font-size: 20px;
}
.clr{
	color: #333;
}
.clr:hover{
	color: #666;
}
.port-con{
	display: flex;
  	flex-wrap: wrap;
  	justify-content: space-between;
	padding-bottom: 10px;
}
.port-text{
	color: #333;
}
.port-text:hover{
	border-bottom: 1px solid #333;
	color: #333;
}
.draft{
	padding-left: 1em;
	color: #dd4b39;
}
.mar-btm{
	padding-bottom: 5px;
	border-bottom: 1px solid #666;
}
.mar-btm2{
	padding-bottom: 5px;
	border-bottom: 1px dashed #666;
	margin-bottom: 10px;
}
.text-blue{
	color: #1D2088;
}
.port-photo{
	width: 50%;
	height: auto;
	padding: 5px;
	display:  inline-block;     /* インラインブロック要素にする */
    vertical-align:  top;       /* 要素を上揃えにする */
    box-sizing: border-box;     /* 崩れ防止 */
}
.port-bold{
	font-size: 1.2em;
	font-weight: bold;
}
.port-photo2{
	width: 100%;
	height: auto;
	margin: 1%;
}
/*タスク一覧*/
/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 680px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1em 0 0 0;
    padding : 11px 12px;
    color :#FFFFFF;
    font-weight: bold;
    cursor :pointer;
    transition: all 0.5s;
}
.label1{
	background: #F39800;
}
.label2{
	background: #E60012;
}
.label3{
	background: #FFCE00;
}
.label4{
	background: #8FC31F;
}
.label5{
	background: #009944;
}
.label6{
	background: #009E96;
}
.label7{
	background: #0068B7;
}
.label8{
	background: #1D2088;
}
.label9{
	background: #920783;
}
.accbox .label-routine{
	background: #fffce8;
	margin-top: 0;
	color: #f5ad37;
}
/*ラベルホバー時*/
.accbox .label1:hover {
    background: #f5ad37;
}
.accbox .label2:hover {
    background: #EB3744;
}
.accbox .label3:hover {
    background: #ffd837;
}
.accbox .label4:hover {
    background: #a7d04e;
}
.accbox .label5:hover {
    background: #37ae6b;
}
.accbox .label6:hover {
    background: #37b3ac;
}
.accbox .label7:hover {
    background: #3789c6;
}
.accbox .label8:hover {
    background: #4d50a1;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    background: #eaeaea;
    opacity: 1;
	border-bottom: 1px solid #333;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
}
.cssacc2:checked + .accshow {
    background: #fff;
	border-left: none;
	border-right: none;
}
.uncheck{
	opacity: 0.5;
}
.task-list-data{
	line-height: 1em;
	text-align: center;
}
.task-list-text{
	color: #333;
}
.task-list-text:hover{
	color: #666;
	border-bottom: 1px solid #666;
}
.table{
	background: #fff;
}

/*
 * タスク一覧：今日やる事
 */
/*タスク一覧:タブメニュー*/
.select-task-view{
	padding-inline-start: 0;
}
li.js_tab_menu{
    display: inline;
    background-color: #ccc;
	padding: 0.5em 1em;
	border-radius: 5px;
}
li.js_tab_active{
    background-color: #F39800;
	padding: 0.5em 1em;
	border-radius: 5px;
	color: #fff;
}
.calender-task table{
	border: 1px solid #ddd;
}
/*タスク一覧:今日やる事:一回のみ*/
div#to_do_list_today a.js_unfrequency{
    color: #FFFFFF;
    background: #EB3744;
    margin: 0px 3px;
    padding: 0px 3px;
}
/*タスク一覧:今日やる事:ルーティン*/
div#to_do_list_today a.js_frequency{
    color: #FFFFFF;
    background: #920783;
    margin: 0px 3px;
    padding: 0px 3px;
}


/*
 * タスク一覧：カレンダー
 */
/*タスク一覧:カレンダー:一回のみ*/
div#calendar a.js_unfrequency{
    color: #FFFFFF;
    background: #EB3744;
    border: 1px solid #EB3744;
}
/*タスク一覧:カレンダー:ルーティン*/
div#calendar a.js_frequency{
    color: #FFFFFF;
    background: #920783;
    border: 1px solid #920783;
}

/*
 * タスク一覧：重要度緊急度の表示
 */

/* タスク一覧: 緊急かつ重要
 * タスク一覧、カレンダー付き表示、カレンダー週表示、カレンダー今日のタスク
 */
span.js_importance_and_urgency::before,
a.js_importance_and_urgency span.fc-title::before,
tr.js_importance_and_urgency td.fc-list-item-title::before,
div#to_do_list_today a.js_importance_and_urgency span::before
{
	content: '☆ ！ ';
}
/* タスク一覧: 緊急 */
span.js_urgency::before,
a.js_urgency span.fc-title::before,
tr.js_urgency td.fc-list-item-title::before,
div#to_do_list_today a.js_urgency span::before
{
	content: '！ ';
}
/* タスク一覧: 緊急かつ重要 */
span.js_importance::before,
a.js_importance span.fc-title::before,
tr.js_importance td.fc-list-item-title::before,
div#to_do_list_today a.js_importance span::before
{
	content: '☆ ';
}

/*タスク入力画面*/
.task-edit-list{
	list-style: none;
	padding-left: 0;
}
.task-edit-list li{
	margin-bottom: 15px;
}

/*マンダラ一覧*/
.box-body .table th{
	color: #fff;
	background: #E60012;
}
.box{
	border-top: none;
}
.table-bordered{
	border: 1px solid #333;
}
.table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td{
	border-bottom: 1px solid #666;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after{
	color: #333;
}
.box-body .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
	background-color: #F39800;
    border-color: #F39800;
	color: #fff;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
	vertical-align: inherit;
}
.mandala-list-check{
	font-size: 2em;
}
.mandala_list_hover:hover{
	background: #F599A0;
}
.mandala-list-text{
	color: #333;
}
.mandala-list-text:hover{
	color: #333;
}
/*ログイン画面*/
/*.hold-transition{
-webkit-border-image: -webkit-linear-gradient(left, #F5A29E, #F5DC9E, #F5ED9E, #D4F59E, #9EF5A2, #9EF5DC, #9ED4F5, #A29EF5, #DC9EF5) 1/50px 0 50px 0;
-o-border-image: -o-linear-gradient(left, #F5A29E, #F5DC9E, #F5ED9E, #D4F59E, #9EF5A2, #9EF5DC, #9ED4F5, #A29EF5, #DC9EF5) 1/50px 0 50px 0;
border-image: linear-gradient(to right, #F5A29E, #F5DC9E, #F5ED9E, #D4F59E, #9EF5A2, #9EF5DC, #9ED4F5, #A29EF5, #DC9EF5) 1/50px 0 50px 0;
  border-style: solid;
}*/
.login-box-body{
	padding: 20px 0;
}
.main-header .navbar2, .main-footer2{
	margin-left: 0;
}
.navbar2 .navbar-nav a{
	color: #fff;
}
.login-box{
	min-height: 100vh;
}
.msg-box{
	text-align: center;
	margin-top: 100px;
	min-height: 80vh;
}
.content-wrapper {
	background: white;
}
.skin-blue-light .wrapper{
	background: #fff;
}
/* dataTablesの定義 */
.dt-body-right {
	text-align: right;
}
.dt-body-center {
	text-align: center;
}

.friend-title{
	text-align: center;
	display: block;
	font-size: 20px;
	padding: 1em 0;
	font-weight: bold;
}

.friend-contents{
	border-bottom: 1px solid #333;
	margin-bottom: 20px;
}
.friend-request{
	margin: 20px 0 40px 0;
}
.friend-request ul{
	list-style: none;
}
.friend-name{
	margin-bottom: 30px;
}
.friend-name2 a{
	color: #2c2c2c;
}
.friend-name2{
	margin-bottom: 30px;
	padding-left: 12px;
}
.friend-all{
	display: flex;
	flex-flow: row;
	margin: 0;
	padding: 6px;
	list-style-type: none;
	height: 40px;
	align-items: center;
}
.friend-all {
	margin-left: auto;
}
#friend_icon_list{
	margin-left: 55px;
}
.friend-icon{
	display: flex;
	flex-flow: row;
	margin: 0;
	list-style-type: none;
	height: 40px;
	align-items: center;
	padding-inline-start: 0;
}
.friend-icon li{
	margin: 5px;
}
.friend-icon li:last-child{
	margin-right: 0;
}

.friend-img {
	border-radius: 50%;
}
.mentor{
margin-left: 30px;
}
.friend-results{
	padding-top: 30px;
}
/*フレンドシェア*/
.friend-share .table th{
	color: #fff;
	background: #009944;
}
.friend-share2 .table th{
	color: #fff;
	background: #009E96;
}
.friend-shared .table th{
	color: #fff;
	background: #0068B7;
}
/*タスク編集完了後のポートフォリオへの反映*/
.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  padding: 50px;
  background-color: #fff;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
	height: auto;
}
.close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 15px;
  height: 15px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
	margin-right: 10px;
}
.close-btn i {
  font-size: 20px;
  color: #333;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}
.btn-eye {
	display: flex;
	align-items: center;
}
.toggle .btn-eye {
	position: absolute;
	right: 10px;
	top: 5px;
	padding: 5px 8px;
	border-radius: 5px;
	background: #e5e5e5;
}
.btn-eye-input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.btn-eye-label {
	font-size: 18px;
	cursor: pointer;
}
.toggle .btn-eye-label {
	width: 30px;
	text-align: center;
}

.img-circle {
	width:50%;
}

.mandala_rep{
	list-style: none;
	padding-left: 0;
}
.accbox .task-r-title{
	color: #333;
	display: flex;
}
.accshow p{
	padding: 0 11px;
}
.task-r-data{
	margin-left: auto;	
}
.mandala-report-title{
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}
.label-cl1{
	color: #F39800;
}
.label-cl2{
	color: #E60012;
}
.label-cl3{
	color: #FFCE00;
}
.label-cl4{
	color: #8FC31F;
}
.label-cl5{
	color: #009944;
}
.label-cl6{
	color: #009E96;
}
.label-cl7{
	color: #0068B7;
}
.label-cl8{
	color: #1D2088;
}
.label-cl9{
	color: #920783;
}
/*写真・動画の重ねアイコン*/
.photo-img {
	position: relative;
	width: 49%;            /* 幅指定 */
    display:  inline-block;     /* インラインブロック要素にする */
    vertical-align:  top;       /* 要素を上揃えにする */
    box-sizing: border-box;     /* 崩れ防止 */
}
.photo-img img{
	width: 100%;
}
.photo-icon {
	list-style: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding-inline-start: 0;
	text-align: center;
	align-items: center;
	/* display: flex; */
	display: none;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
}
.photo-icon li {
	display: inline;
	width: 45%;
	height: auto;
}
.photo-icon img{
	padding: 5%;
	max-width: 38px;
	width: 100%;
	height: auto;
}

/*
 * ローディング時の読み込み中マーク
 */
.loading_img {
	margin-left : 0px;
	width: 80px;
	height: 80px;
	background: url('../img/loading.gif');
	background-size: cover;
}

#loader{
	width: 80px;
	height: 80px;
	display: none;
	position: fixed;
	_position: absolute;     /* IE6対策 */
	top: 50%;
	left: 50%;
	margin-top: -40px;       /* heightの半分のマイナス値 */
	margin-left: -40px;      /* widthの半分のマイナス値 */
	z-index: 10;             /* #fadeより多い値を入れて下さい */
}
#fade{
	width: 100%;
	height: 100%;
	display: none;
	background-color: #fff;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 5;              /* #loaderより少ない値を入れて下さい */
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

.test-mode {
	display:none;
}
/*ポートフォリオ画像動画並び*/
.port-imgmovie{
	list-style: none;
    padding-left: 0;
}
.port-movie{
	width: 50%;
	height: auto;
}
/* share */
.have_mandala_shares {
	opacity:1;
}
.have_no_mandala_shares {
	opacity:0.3;
}
.have_portfolio_shares{
	opacity:1;
}
.have_no_portfolio_shares {
	opacity:0.3;
}
.have_lookback_shares{
	opacity:1;
}
.have_no_lookback_shares {
	opacity:0.3;
}
.have_no_journal_shares {
	opacity:0.3;
}
.have_mentor{
	opacity:1;
}
.have_no_mentor {
	opacity:0.3;
}
.img-disable {
	opacity:0.3;
}
.man-report-fig{
	 display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style: none;
	padding-inline-start: 0;
}
.man-report-fig-con{
	 display: inline-block;
	text-align: center;
}
.mandala-report-border-cl1{
	border: solid 2px #F39800;
	padding: 10px;
}
.mandala-report-border-cl2{
	border: solid 2px #E60012;
	padding: 10px;
}
.mandala-report-border-cl3{
	border: solid 2px #FFCE00;
	padding: 10px;
}
.mandala-report-border-cl4{
	border: solid 2px #8FC31F;
	padding: 10px;
}
.mandala-report-border-cl5{
	border: solid 2px #009944;
	padding: 10px;
}
.mandala-report-border-cl6{
	border: solid 2px #009E96;
	padding: 10px;
}
.mandala-report-border-cl7{
	border: solid 2px #0068B7;
	padding: 10px;
}
.mandala-report-border-cl8{
	border: solid 2px #1D2088;
	padding: 10px;
}
.mandala-report-border-cl9{
	border: solid 2px #920783;
	padding: 10px;
}
.chat-list{
	padding-left: 25px;
	padding-right: 25px;
}
.chat-list-all{
	margin-bottom: 20px;
}
.chat-name{
	padding-left: 22px;
}
.notice{
	background: #1D2088;
	margin-bottom: 30px;
	color: #fff;
	display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align:center;
  line-height: 30px;
}
.card {
	position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0,0,0,.125);
    border-radius: .25rem;
	padding: 0 5px;
	min-height: 100vh;
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0,0,0,.125);
    padding: .75rem 1.25rem;
    position: relative;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
	margin-bottom: 0;
	margin-top: 2rem;
}
.card-title {
    list-style: none;
	display: flex;
	padding-inline-start: 0;
}
.card-header>.card-tools {
    float: right;
    margin-right: -.625rem;
}
.card-header .card-tools [data-toggle=tooltip] {
    position: relative;
}
.badge-light {
    color: #1f2d3d;
    background-color: #f8f9fa;
}
.badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-tool {
    background: 0 0;
    color: #adb5bd;
    font-size: .875rem;
    margin: -.75rem 0;
    padding: .25rem .5rem;
}
.btn-chat {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.direct-chat-messages {
    transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out,-webkit-transform .5s ease-in-out;
	transform: translate(0,0);
    overflow: auto;
    padding: 10px;
	height: 60vh;
}
.direct-chat-contacts {
    -webkit-transform: translate(101%,0);
    transform: translate(101%,0);
    background: #343a40;
    bottom: 0;
    color: #fff;
    height: 250px;
    overflow: auto;
    position: absolute;
    top: 0;
    width: 100%;
	transition: -webkit-transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out,-webkit-transform .5s ease-in-out;
}
.contacts-list {
    padding-left: 0;
    list-style: none;
}
.contacts-list li {
    border-bottom: 1px solid rgba(0,0,0,.2);
    margin: 0;
    padding: 10px;
}
.contacts-list-img {
    border-radius: 50%;
    float: left;
    width: 40px;
}
.contacts-list li::after {
    display: block;
    clear: both;
    content: "";
}
.contacts-list-info {
    color: #fff;
    margin-left: 45px;
}
.contacts-list-name {
    font-weight: 600;
	box-sizing: border-box;
}
.contacts-list-info {
    color: #fff;
}
.contacts-list-date {
    color: #ced4da;
    font-weight: 400;
}
.float-right {
    float: right!important;
}
.contacts-list-msg {
    color: #b1bbc4;
}
.contacts-list li::after {
    display: block;
    clear: both;
    content: "";
}
.card-body::after, .card-footer::after, .card-header::after {
    display: block;
    clear: both;
    content: "";
}
.input-group-append {
    margin-left: -1px;
	display: flex;
}
.card-footer::after, .card-header::after {
    display: block;
    clear: both;
    content: "";
}
.direct-chat .card-body {
    overflow-x: hidden;
    padding: 0;
    position: relative;
	flex: 1 1 auto;
	display: flex;
    flex-direction: column;
}
#new-message {
	height:80px;
}
.card-footer {
    padding: .75rem 1.25rem;
    background-color: rgba(0,0,0,.03);
    border-top: 0 solid rgba(0,0,0,.125);
    bottom: 0;
    width: 100%;
    height: 150px;
    margin: 0;
	z-index: 30;
	max-width: 680px;
	margin-top: auto;
}
@media (max-width: 414px){
.card-footer {
    position: fixed;
	height: 95px;
}
}
@media (max-width: 767px){
.card-footer {
    margin-left: 0;
}
}
.chat-name2{
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
}
.text-form-area{
	position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}
.text-form-area .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.text-form-area .form-control {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}
.btn-tar {
	background-color: #1D2088;
    border-color: #367fa9;
	color: #fff;
}
.btn-tar:hover{
	 background-color: #1D2088;
	 border-color: #367fa9;
	 color: #fff;
}
.btn-tar:focus{
	background-color: #1D2088;
	border-color: #367fa9;
	color: #fff;
}
.direct-chat-tar .right .direct-chat-text {
    background: #1D2088;
    border-color: #367fa9;
    color: #fff;
}
.chat-date{
	text-align: center;
}
.chat-date span{
	background: #E6EAF1;
	border-radius: .25rem;
	padding: 0.5em;
	color: #333;
	display: inline-block;
}
.right .direct-chat-text:after, .right .direct-chat-text:before {
    right: auto;
    left: 100%;
    border-right-color: transparent;
    border-left-color: #1D2088;
}
/*マンダラ・タスク完了時*/
.pur-done{
	background: #920783;
	background-image: url("../img/achieve-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.ora-done{
	background: #F39800;background-image: url("../img/achieve-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.yel-done{
	background: #FFCE00;
	background-image: url("../img/achieve-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.yel-gree-done{
	background: #8FC31F;
	background-image: url("../img/achieve-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.red-done{
	background: #E60012;
	background-image: url("../img/achieve-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.blu-done{
	background: #1D2088;
	background-image: url("../img/achieve-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.skyblu-done{
	background: #0068B7;
	background-image: url("../img/achieve-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.tar-done{
	background: #009E96;
	background-image: url("../img/achieve-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.gree-done{
	background: #009944;
	background-image: url("../img/achieve-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.pur-task-done{
	background: #a93b9e;
	background-image: url("../img/complete-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.ora-task-done{
	background: #f5ad37;
	background-image: url("../img/complete-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.yel-task-done{
	background: #ffd837;
	background-image: url("../img/complete-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.yel-gree-task-done{
	background: #a7d04e;
	background-image: url("../img/complete-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.blu-task-done{
	background: #4d50a1;
	background-image: url("../img/complete-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.skyblu-task-done{
	background: #3789c6;
	background-image: url("../img/complete-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.tar-task-done{
	background: #37b3ac;
	background-image: url("../img/complete-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.gree-task-done{
	background: #37ae6b;
	background-image: url("../img/complete-4.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
/*マンダラ・タスク完了時(en)*/
.pur-done-en{
	background: #920783;
	background-image: url("../img/achieve-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.ora-done-en{
	background: #F39800;background-image: url("../img/achieve-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.yel-done-en{
	background: #FFCE00;
	background-image: url("../img/achieve-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.yel-gree-done-en{
	background: #8FC31F;
	background-image: url("../img/achieve-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.red-done-en{
	background: #E60012;
	background-image: url("../img/achieve-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.blu-done-en{
	background: #1D2088;
	background-image: url("../img/achieve-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.skyblu-done-en{
	background: #0068B7;
	background-image: url("../img/achieve-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.tar-done-en{
	background: #009E96;
	background-image: url("../img/achieve-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.gree-done-en{
	background: #009944;
	background-image: url("../img/achieve-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
	position: relative;
	box-shadow: none;
}
.pur-task-done-en{
	background: #a93b9e;
	background-image: url("../img/complete-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.ora-task-done-en{
	background: #f5ad37;
	background-image: url("../img/complete-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.yel-task-done-en{
	background: #ffd837;
	background-image: url("../img/complete-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.yel-gree-task-done-en{
	background: #a7d04e;
	background-image: url("../img/complete-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.blu-task-done-en{
	background: #4d50a1;
	background-image: url("../img/complete-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.skyblu-task-done-en{
	background: #3789c6;
	background-image: url("../img/complete-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.tar-task-done-en{
	background: #37b3ac;
	background-image: url("../img/complete-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}
.gree-task-done-en{
	background: #37ae6b;
	background-image: url("../img/complete-5.png");
	background-size: contain;
	background-repeat: no-repeat;
	border: 2px solid #ffcc3c;
}

/* NOCC */
#nocc input, #nocc label {vertical-align:middle}
.qrcode-text {padding-right:1.7em; margin-right:0}
.qrcode-text-btn {
	display:inline-block;
	background: url("../img/qr-sample.png") no-repeat;
	background-size:cover;
	height:150px;
	width:150px;
	//margin-left:-1.7em;
	cursor:pointer
}
.qrcode-text-btn > input[type=file] {position:absolute; overflow:hidden; width:1px; height:1px; opacity:0}
/*岡山理科大学*/
.OUSsysteem-logo{
	margin: 0 auto;
    display: block;
	margin-top: 2em;
	width: 100%;
    height: auto;
	max-width: 560px;
}
.input-go {
	font-size: 16px;
	width:300px;
	height:80px;
}
/*マンダラダウンロードボタン*/
.mandala-download{
	text-align:right;
	max-width: 680px;
    margin: 0 auto;
}
@media screen and (max-width:767px){
	.mandala-download{
		text-align: center;
	}
}
.mandala-download a{
	background: #e60012;
	padding: 0.5em 1em;
	color: #fff;
	border-radius: 3px;
	margin-right: 15px;
	box-shadow: 2px 2px #F599A0;
}
@media screen and (max-width:767px){
	.mandala-download a{
		margin-right: 0;
	}
}
/*メンターの資格*/
#licenses table tbody tr:first-child{
	background: #009944;
	color: #fff;
}
#lectures table tbody tr:first-child{
	background: #8FC31F;
	color: #fff;
}
#licenses table tbody tr td button{
	background: #009944;
    color: #fff;
    border: 1px solid #666;
    border-radius: 3px;
    box-shadow: rgba(0 0 0 0 0.5);
    box-shadow: 0.5px 0.5px 2px 0.5px rgba(0,0,0,0.5);
}
#lectures table tbody tr td button{
	background: #8FC31F;
    color: #fff;
    border: 1px solid #666;
    border-radius: 3px;
    box-shadow: rgba(0 0 0 0 0.5);
    box-shadow: 0.5px 0.5px 2px 0.5px rgba(0,0,0,0.5);
}

.fc-sat {
	background-color: #eaf4ff;
}
.fc-sun {
	background-color: #ffeaea;
}

.fc .fc-dayGridMonth-button, .fc .fc-listWeek-button{
	background-color: grey;
	background-image: none;
}

@media screen and (min-width: 821px){
	.br-sp {display: none; }
}
.ate_square{
	/* flexboxで等間隔に並べる*/
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	list-style: none;
	padding-inline-start: 0;
}
.ate_square2{
	/* 枠線をつけて1列に3つ並べる */
	border: solid 0px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-bottom: 2%;
	width: 32%;
	/* 正方形にするのに必要な部分 */
	height: auto;
	position: relative;
}
.ate_square2:before {
	content: "";
	display: block;
	padding-top: 100%; /* ここを100％にすることで正方形になる */
}
.ate_square_icon{
	/* 正方形にするのに必要な部分 */
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	/* 中央寄せ */
	text-align: center;
	padding: 2px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.ate_square_icon p {
	position: absolute;
	color: black;
	background: white;
	padding: 1px 1px;
	font-size: 19px;
	line-height: 1.1;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	/*文字の装飾は省略*/
}
.ate_square_icon img {
	width: 100%;
}

/* ジャーナル */
.journal-label{
	font-size:16px;
}
#form-journal hr{
	clear: both;
}
.icon-description {
	width:16px;height:16px;
	vertical-align: middle;
	margin-left:5px;
	margin-bottom: 3px;
}
#form-journal button {
	margin-left:5px;
}
.jornal_tag {
	width: 16px;
	height: 16px;
}
.js_select_awareness {
	position: relative;
	top: 2px;
}
.journal-explain {
	font-size:12px;
	color:gray;
}
.form-training_menu_template {
	background: #fffddc;
	padding: 1em;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
}
.form-training_menu_template:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}
.form-study_menu_template {
	background: #ccffdd;
	padding: 1em;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
}
.form-study_menu_template:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}
#competition_menu_list {
	background: #ffe8be;
	padding: 1em;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
}
#competition_menu_list:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}
.competition_play_good {
	background: #e3ffe0;
	padding: 1em;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
}
.competition_play_good:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}
.competition_play_bad {
	background: #ffe0e0;
	padding: 1em;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
}
.competition_play_bad:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}
#exam_menu_list {
	background: #d6fbff;
	padding: 1em;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
}
#exam_menu_list:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}
.exam_mistakes {
	background: #ffe0e0;
	padding: 1em;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
}
.exam_mistakes:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}

.common-description {
	padding: 0.5em 1em;
	margin: 2em 0;
	font-weight: bold;
	color: #6091d3;/*文字色*/
	background: #FFF;
	border: solid 3px #6091d3;/*線*/
	border-radius: 10px;/*角の丸み*/
}
.common-description p {
	margin: 0;
	padding: 0;
	font-size:12px;
}

/* WRCD */
.wrcd-list {
	background: #fff8ee;
	border: solid 1px #d9d9d9;/*線*/
	padding: 1em;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
	border-radius: 10px;/*角の丸み*/
	padding-bottom: 0;
}
.wrcd-list:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}
.wrcd-list .wrcd_will {
	color: rgb(255, 141, 113);
	font-weight: bold;
}
.wrcd-list .wrcd_process{
	font-size:14px;
	padding: 1em;
	border: solid 1px #d9d9d9;/*線*/
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	max-width: 150px;
	margin: 0 auto;
	margin-bottom: 2em;
	border-radius: 10px;/*角の丸み*/
}
.wrcd-list .done {
	background: #e8ffe0;
}
.wrcd-list .next {
	background: #ffb9b9;
}
.wrcd-list .inactive {
	background: #cccccc;
}
.wrcd-list .arrow-right {
	font-size: 20px;
	font-weight: bold;
}
.wrcd_search_btn {
	font-size:14px;
	padding: 0.5em;
	border: solid 1px #d9d9d9;/*線*/
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	margin: 0 auto;
	margin-bottom: 1em;
	border-radius: 10px;/*角の丸み*/
	background: #fd8033;
	color: white;
}
.research_list {
	background: #ffeed4;
	padding: 1em;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
}
.research_list:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}
.form-search-result {
	background: white;
	border: solid 1px #79b3ff;/*線*/
	padding: 1em;
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
}
.search_title {
	font-weight: bold;
}
.search_content {
	color: gray;
}
.subcomment {
	font-size:11px;
	color:gray;
}
.wrcd_waku {
	background: white;
	border: solid 1px #79b3ff;/*線*/
	padding: 1em;
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
}
.decision_list {
	background: #ffeed4;
	padding: 1em;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 2em;
}
.decision_list:hover{
	box-shadow: 0 5px 10px rgba(0, 0, 0, .5);
}
.wrcd_chart-waku {
	background: #fff8ee;
	border: solid 1px #d9d9d9;/*線*/
	padding: 1em;
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 1em;
	border-radius: 10px;/*角の丸み*/
	padding-bottom: 0;
}
.decision_radio {
	display: none;
}
.decision_radio_label {
	background-color: #ccc;
	padding: 10px 20px;
	font-weight: normal;
}
.decision_radio:checked + label {
	background-color: #ff9853;
}
.comparison-reason-title {
	color: #ff9853;
	font-size: 11px;
}
.comparison-reason {
	color: #505050;
	font-size: 11px;
}
.form-reason {
	background: #fff8ee;
	border: solid 1px #d9d9d9;/*線*/
	padding: 2px;
	max-width: 1080px;
	margin: 0 auto;
	margin-bottom: 1em;
	padding-bottom: 0;
}
.decision_text {
	background-color: #ff9853;
	padding: 10px 20px;
}


/* メニュー用ボタン */
a.btn-menu {
	display: inline-block;
	margin: 10px 0 0 20px;
	font-size: 14px;
	color: #000;
	border: 2px solid #000;
	border-radius: 0;
	background: #fff;
	padding: 10px 15px 10px 15px;
	border-radius: 10px;/*角の丸み*/
}
a.btn-menu:hover {
	color: #fff;
	background: #5588cc;
}

/* メニュー用ボタン２ */
.wid-nallow {
	margin: 0 80px 0 80px;
}
@media screen and (max-width:767px){
	.wid-nallow{
		margin: 0 20px 0 20px;
	}
}
a.btn-menu2 {
	width: 100%;
	height: 50px;
	font-size: 18px;
	margin: 10px 0 10px 0;
	padding: 15px 0 15px 50px;
	display: inline-block;
	color: #000;
	border: 2px solid #000;
	border-radius: 0;
	background: #fff;
	border-radius: 10px;/*角の丸み*/
}
@media screen and (max-width:767px){
	a.btn-menu2{
		padding: 15px 0 15px 25px;
	}
}
a.btn-menu2:hover {
	color: #fff;
	background: #5588cc;
}

.select-emotion {
	width:80px;
}

.last-updated {
	color: gray;
}

/* WANT-MAPグラフをレスポンシブルにするため */
.svg-contents {
	max-width: 550px;
	margin: auto;
}
.svg-wrapper {
	position: relative;
	width: 100%;
	padding-top: 100%; /* SVG高さ / SVG幅 * 100 */
}
.svg-wrapper svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* WANT-MAPグラフの色を指定（グラデーション#def_gradettionはsvgタグ内で定義） */
#treemap1 circle {
	fill: url(#def_gradation);
	fill-opacity: .25;
	stroke: #ff6600;
	stroke-width: 1px;
}
#treemap1 .leaf circle {
	fill: url(#def_gradation);
	stroke: #ffffff;
	fill-opacity: 1;
}
#treemap2 circle {
	fill: url(#def_gradation2);
	fill-opacity: .25;
	stroke: #0077bb;
	stroke-width: 1px;
}
#treemap2 .leaf circle {
	fill: url(#def_gradation2);
	stroke: #ffffff;
	fill-opacity: 1;
}
#treemap3 circle {
	fill: url(#def_gradation3);
	fill-opacity: .25;
	stroke: #11dd00;
	stroke-width: 1px;
}
#treemap3 .leaf circle {
	fill: url(#def_gradation3);
	stroke: #ffffff;
	fill-opacity: 1;
}
#treemap4 circle {
	fill: url(#def_gradation4);
	fill-opacity: .25;
	stroke: #aa33ff;
	stroke-width: 1px;
}
#treemap4 .leaf circle {
	fill: url(#def_gradation4);
	stroke: #ffffff;
	fill-opacity: 1;
}
text {
	font: 10px sans-serif;
	text-anchor: middle;
}
/* WANT-MAP */
.want_hint {
	font-size:12px;
	color: gray;
}
.btn-want_hint {
	font-size:12px;
	padding: 0.5em;
	border: solid 1px #d9d9d9;/*線*/
	margin: 0 auto;
	margin-bottom: 1em;
	border-radius: 10px;/*角の丸み*/
	background: #fd8033;
	color: white;
}
.btn-want-kind1 {
	width: 100%;
	height: 70px;
	font-size:18px;
	padding: 0.5em;
	border: solid 1px #d9d9d9;/*線*/
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 1em;
	border-radius: 10px;/*角の丸み*/
	background: #ff6600;
	color: white;
}
.btn-want-kind2 {
	width: 100%;
	height: 70px;
	font-size:18px;
	padding: 0.5em;
	border: solid 1px #d9d9d9;/*線*/
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 1em;
	border-radius: 10px;/*角の丸み*/
	background: #0077bb;
	color: white;
}
.btn-want-kind3 {
	width: 100%;
	height: 70px;
	font-size:18px;
	padding: 0.5em;
	border: solid 1px #d9d9d9;/*線*/
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	margin-top: 5px;
	margin-bottom: 1em;
	border-radius: 10px;/*角の丸み*/
	background: #11dd00;
	color: white;
}
.btn-want-kind4 {
	width: 100%;
	height: 70px;
	font-size:18px;
	padding: 0.5em;
	border: solid 1px #d9d9d9;/*線*/
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 1em;
	border-radius: 10px;/*角の丸み*/
	background: #aa33ff;
	color: white;
}
.output-size-circle{
	font-size: 16px;
	font-weight: bold;
	padding-top: 0;
	margin-bottom: 1em;
}