@charset "UTF-8";
/* CSS Document */

/*=======================================================================
	COMMON BASE
========================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');
/*Light 300,Medium 500*/

html,body{
    height: 100%; 
	margin: 0;
	padding: 0; 
}

body {
font-family: 'Noto Sans JP', sans-serif;
-webkit-text-size-adjust: 100%;
line-height: 1;
width: 100%;
min-width: 1000px;
background-color: #fff;
height: 100%;
margin: 0;
background-image: url(../images/bg.png);
color: #666;
}


/*=======================================================================
	header
========================================================================*/
/*スクロール固定*/
#fixed_header {
width: 100%;
height: 50px;
position: fixed;
top: 0px;
z-index: 9999;
min-width: 1000px;
}

header {
width: 100%;
height: 50px;
background-color: #417ccd;
float: left;
-webkit-box-shadow: 0px 10px 20px 25px #FAF9F5;
box-shadow: 0px 10px 20px 25px #FAF9F5;
}

header .header_inner {
width: 1000px;
height: 50px;
min-width: 1000px;
margin-left: auto;
margin-right: auto;
position: relative;
}

header .header_inner .header_logo {
position: absolute;
width: 215px;
top: 6px;
left: 0px;
}

header .header_inner .header_logo img {
width: 100%;
height: auto;
}

header .header_user {
width: 32px;
height: 32px;
background-color: #7099cb;
text-align: center;
color: #18385E;
border-radius: 16px;
font-size: 16px;
line-height: 100%;
position: absolute;
top: 8px;
right: 10px;
padding: 7px 0px 0px 0px;
}

/*---------------------------------------------------------------
	吹き出し
----------------------------------------------------------------*/
.header_user:hover .balloon {
display: inline;
}

.balloon {
position: absolute;
right: -8px;
top: 34px;
display: none;
padding: 10px 15px;
background-color: #729ace;
margin-top: 12px;
z-index: 10000;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
line-height: 140%;
color: #fff;
text-align: left;
white-space: nowrap;
}

.balloon:after{
border-bottom: 15px solid #729ace;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
top: -12px;
right: 15px;
content: "";
}

/*---------------------------------------------------------------
	USER
----------------------------------------------------------------*/

header .login_user {
text-align: right;
color: #417CCD;
font-size: 14px;
position: absolute;
right: 10px;
top: 60px;
}

/*=======================================================================
	footer
========================================================================*/

/*スクロール固定*/
#fixed_footer {
width: 100%;
position: fixed;
bottom: 0px;
z-index: 9998;
min-width: 1000px;
}

footer {
width: 100%;
background-color: #417ccd;
text-align: center;
padding: 10px;
float: left;
}

footer .footer_inner {
width: 1000px;
min-width: 1000px;
margin-left: auto;
margin-right: auto;
position: relative;
}

footer small {
color: #fff;
font-size: 10px;
}

/*=======================================================================
	contents
========================================================================*/

.contents {
width: 1000px;
height: auto;
min-width: 1000px;
padding-top: 120px;
margin-left: auto;
margin-right: auto;
}

/*---------------------------------------------------------------
	title
----------------------------------------------------------------*/
.title {
float: left;
display: inline-block;
padding-left: 10px;
width: 100%;
}

.resume_title {
float: left;
display: inline-block;
border-bottom: 1px solid #B1C9E8;
padding: 0px 0px 0px 6px;
width: 100%;
height: 30px;
background-image: url(../images/mark.svg);
background-repeat: no-repeat;
background-position: left center;
background-size: 6px 30px;
}


.resume_title input[type=text] {
width: 100%;
height: 28px;
padding: 10px 10px 10px 10px;
border: none;
font-size: 14px;
line-height: 26px;
color: #666;
position: relative;
font-weight: 300;
background-color: rgba(0,0,0,0.00);
border-radius: 0px;
outline: none;
background-image: url(../images/resume_title_edit.svg);
background-repeat: no-repeat;
background-position: right 5px center;
background-size: 18px 18px;
}

.resume_title input[type=text]:focus {
background-color: #fff;
color: #999;
}

.resume_title input[type=text]::placeholder {
color: #bbb;
}

/*---------------------------------------------------------------
	main
----------------------------------------------------------------*/
.main {
width: 100%;
float: left;
padding: 30px 10px 50px 10px;
}

/*=======================================================================
	login
========================================================================*/
.login_box {
width: 340px;
min-height: 340px;
padding: 70px 0px 20px 0px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/main_logo.svg);
background-position: center top 0px;
background-size: 250px 250px;
background-repeat: no-repeat;
}

/*=======================================================================
	input（カプセル型）
========================================================================*/

.cp_ipt {
position: relative;
width: 340px;
margin-bottom: 10px;
}

.cp_ipt input::placeholder {
color: #fff;
}

.cp_ipt .cp_ipt_icon {
position: absolute;
width: 34px;
height: 34px;
top: 6px;
left: 6px;
background-color: #7099CB;
transition: 0.3s;
color: #18385E;
text-align: center;
border-radius: 30px;
padding-top: 9px;
font-size: 14px;
}

/*---------------------------------------------------------------
	input text（カプセル型）
----------------------------------------------------------------*/
.cp_ipt input[type=text] {
background-color: #417ccd;
width: 100%;
height: 46px;
padding: 10px 10px 10px 50px;
transition: 0.3s;
border: 2px solid #417ccd;
border-radius: 30px;
outline: none;
color: #fff;
position: relative;
font-weight: 300;
font-size: 14px;
}

.cp_ipt input[type=text]:focus {
border: 2px solid #999;
background-color: #fff;
color: #666;
}

.cp_ipt input[type=text]:focus + .cp_ipt_icon {
background-color: #417ccd;
color: #fff;
}

/*---------------------------------------------------------------
	input mail（カプセル型）
----------------------------------------------------------------*/
.cp_ipt input[type=mail] {
background-color: #417ccd;
width: 100%;
height: 46px;
padding: 10px 10px 10px 50px;
transition: 0.3s;
border: 2px solid #417ccd;
border-radius: 30px;
outline: none;
color: #fff;
position: relative;
font-weight: 300;
font-size: 14px;
}

.cp_ipt input[type=mail]:focus {
border: 2px solid #999;
background-color: #fff;
color: #666;
}

.cp_ipt input[type=mail]:focus + .cp_ipt_icon {
background-color: #417ccd;
color: #fff;
}

/*---------------------------------------------------------------
	input password（カプセル型）
----------------------------------------------------------------*/
.cp_ipt input[type=password] {
background-color: #417ccd;
width: 100%;
height: 46px;
padding: 10px 10px 10px 50px;
transition: 0.3s;
border: 2px solid #417ccd;
border-radius: 30px;
outline: none;
color: #fff;
position: relative;
font-weight: 300;
font-size: 14px;
}

.cp_ipt input[type=password]:focus {
border: 2px solid #999;
background-color: #fff;
color: #666;
}

.cp_ipt input[type=password]:focus + .cp_ipt_icon {
background-color: #417ccd;
color: #fff;
}

/*---------------------------------------------------------------
	サインイン（カプセル型）
----------------------------------------------------------------*/
.cp_ipt .sign_in {
background-color: #417ccd;
width: 100%;
height: 46px;
padding: 10px 10px 10px 50px;
transition: 0.3s;
border: 1px solid #417ccd;
border-radius: 30px;
outline: none;
color: #fff;
position: relative;
font-weight: 500;
font-size: 14px;
text-align: left;
}

.cp_ipt .sign_in:hover {
background-color: #b8ceeb;
border: 2px solid #417ccd;
color: #18385e;
cursor: pointer;
}

.cp_ipt .sign_in[disabled] {
background-color: #8f99b0;
border: 1px solid #8f99b0;
font-weight: 500;
cursor: not-allowed;
color: #fff;
}


.cp_ipt .sign_in .cp_ipt_icon {
position: absolute;
width: 34px;
height: 34px;
top: 5px;
left: 5px;
background-color: #7099cb;
transition: 0.3s;
color: #fff;
text-align: center;
border-radius: 30px;
padding-top: 9px;
font-size: 14px;
font-weight: 500;
}

.cp_ipt .sign_in:hover .cp_ipt_icon {
position: absolute;
width: 34px;
height: 34px;
top: 4px;
left: 4px;
background-color: #7099cb;
transition: 0.3s;
color: #fff;
text-align: center;
border-radius: 30px;
padding-top: 9px;
font-size: 14px;
font-weight: 500;
}

.cp_ipt .sign_in[disabled] .cp_ipt_icon {
position: absolute;
width: 34px;
height: 34px;
top: 5px;
left: 5px;
background-color: #ACB4C8;
border: 1px solid #ACB4C8;
color: #fff;
text-align: center;
border-radius: 30px;
padding-top: 9px;
font-size: 14px;
font-weight: 500;
cursor: not-allowed;
}

/*---------------------------------------------------------------
	checkbox（サインイン）
----------------------------------------------------------------*/
.check_wrap {
position: relative;
width: 340px;
margin-top: 10px;
margin-bottom: 20px;
float: left;
}

.check_wrap input[type="checkbox"][disabled] + label {
color: #b5cae4;
cursor: no-drop;
}

.check_wrap input[type="checkbox"][disabled] + .checkbox_parts::before {
background-color: #8f99b0;
cursor: no-drop;
}

.check_wrap .checker {
display: none;
}

.check_wrap .checkbox_parts {
padding-left: 21px;
position: relative;
margin-left: 5px;
color: #ccc;
font-size: 13px;
cursor: pointer;
transition: 0.3s;
float: left;
}

.check_wrap .checkbox_parts:hover {
color: #7099cb;
cursor: pointer;
}

.check_wrap .checkbox_parts::before {
content: "";
display: block;
position: absolute;
top: 1;
left: 0;
width: 15px;
height: 15px;
background-color: #417ccd;
border-radius: 2px;
cursor: pointer;
}

.check_wrap .checker:checked + .checkbox_parts {
color: #666;
}

.check_wrap .checker:checked + .checkbox_parts::after {
content: "";
display: block;
position: absolute;
top: 1px;
left: 5px;
width: 4px;
height: 9px;
transform: rotate(40deg);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
}

/*---------------------------------------------------------------
	隠れるチェックボックス
----------------------------------------------------------------*/

.hide_item {
width: 100%;
float: left;
clear: left;
display: block;
}

.hide_item input[type=checkbox] {
display: none;
}

.hide_item .hide__link {
position: relative;
cursor: pointer;
margin-top: 20px;
}

.hide_item .hide__check {
display: inline-block;
margin-right: 5px;
border-bottom: 1px solid #f89496;
text-decoration: none;
transition: all .2s ease 0s;
font-size: 14px;
}

.hide_item .hide__body {
margin: 0px 0px 10px 0px;
float: left;
width: 100%;
}

.hide_check_wrap input[type="checkbox"][disabled] + .checkbox_parts::before {
background-color: #8f99b0;
cursor: no-drop;
}

.hide_check_wrap .checker {
display: none;
}

.hide_check_wrap .checkbox_parts {
padding-left: 21px;
position: relative;
margin-left: 5px;
color: #ccc;
font-size: 13px;
cursor: pointer;
transition: 0.3s;
float: left;
}

.hide_check_wrap .checkbox_parts:hover {
color: #7099cb;
cursor: pointer;
}

.hide_check_wrap .checkbox_parts::before {
content: "";
display: block;
position: absolute;
top: 1;
left: 0;
width: 15px;
height: 15px;
background-color: #417ccd;
border-radius: 2px;
cursor: pointer;
}

.hide_check_wrap .checker:checked + .checkbox_parts {
color: #666;
}

.hide_check_wrap .checker:checked + .checkbox_parts::after {
content: "";
display: block;
position: absolute;
top: 1px;
left: 5px;
width: 4px;
height: 9px;
transform: rotate(40deg);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
}

/*---------------------------------------------------------------
	ボタン（カプセル型）
----------------------------------------------------------------*/
.cpbtn_box {
position: relative;
width: 340px;
margin-bottom: 10px;
float: left;
}

.cpbtn {
background-color: #417ccd;
width: 100%;
height: 46px;
padding: 14px 10px 10px 50px;
transition: 0.3s;
border: 2px solid #417ccd;
border-radius: 30px;
outline: none;
color: #fff;
position: relative;
font-weight: 500;
font-size: 14px;
float: left;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.cpbtn .cp_ipt_icon {
position: absolute;
width: 34px;
height: 34px;
top: 4px;
left: 4px;
background-color: #7099cb;
transition: 0.3s;
color: #fff;
text-align: center;
border-radius: 30px;
padding-top: 9px;
font-size: 14px;
}

.cpbtn:hover {
background-color: #b8ceeb;
border: 2px solid #417ccd;
color: #18385e;
}

.cpbtn:hover .cp_ipt_icon {
background-color: #417ccd;
}

/*---------------------------------------------------------------
	ソーシャルボタン（カプセル型）
----------------------------------------------------------------*/
.sns_wrap {
position: relative;
width: 340px;
margin-top: 15px;
float: left;
}

.sns_box {
position: relative;
width: 340px;
margin-bottom: 10px;
float: left;
}

.btn_fb {
background-color: #3b5998;
width: 100%;
height: 36px;
padding: 8px 10px 10px 50px;
transition: 0.3s;
border: 2px solid #3b5998;
border-radius: 30px;
outline: none;
color: #fff;
position: relative;
font-weight: 500;
font-size: 14px;
float: left;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.btn_fb .sns_icon {
position: absolute;
width: 24px;
height: 24px;
top: 4px;
left: 4px;
}

.btn_fb .sns_icon img {
width: 100%;
height: auto;
}

.btn_fb:hover {
background-color: #6082C8;
border: 2px solid #3b5998;
color: #fff;
}

.btn_tw {
background-color: #1da1f2;
width: 100%;
height: 36px;
padding: 8px 10px 10px 50px;
transition: 0.3s;
border: 2px solid #1da1f2;
border-radius: 30px;
outline: none;
color: #fff;
position: relative;
font-weight: 500;
font-size: 14px;
float: left;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.btn_tw .sns_icon {
position: absolute;
width: 24px;
height: 24px;
top: 4px;
left: 4px;
}

.btn_tw .sns_icon img {
width: 100%;
height: auto;
}

.btn_tw:hover {
background-color: #57BFFF;
border: 2px solid #1da1f2;
color: #fff;
}

.btn_gh {
background-color: #000;
width: 100%;
height: 36px;
padding: 8px 10px 10px 50px;
transition: 0.3s;
border: 2px solid #000;
border-radius: 30px;
outline: none;
color: #fff;
position: relative;
font-weight: 500;
font-size: 14px;
float: left;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.btn_gh .sns_icon {
position: absolute;
width: 24px;
height: 24px;
top: 4px;
left: 4px;
}

.btn_gh .sns_icon img {
width: 100%;
height: auto;
}

.btn_gh:hover {
background-color: #666;
border: 2px solid #000;
color: #fff;
}

/*=======================================================================
	column
========================================================================*/

.column_box {
width: 100%;
float: left;
}

.column_box .col_01 {
width: 230px;
float: left;
padding-right: 20px;
}

.column_box .col_02 {
width: 520px;
height: auto;
content: '';
float: left;
}

.column_box .col_01_02 {
width: 750px;
float: left;
padding-right: 20px;
margin-top: 20px;
}

.column_box .col_comment {
width: 230px;
padding-left: 20px;
float: left;
color: #417CCD;
font-size: 14px;
line-height: 140%;
}

/*---------------------------------------------------------------
	column button list
----------------------------------------------------------------*/
ul.column_btn_box {
width: 100%;
float: left;
}

ul.column_btn_box li {
width: 100%;
float: left;
clear: left;
margin-bottom: 10px;
}

/*---------------------------------------------------------------
	dot line
----------------------------------------------------------------*/
.dot_line {
width: 100%;
background-image: url(../images/dotted.svg);
background-repeat: repeat-x;
background-size: 20px 20px;
background-position: 3px 1px;
float: left;
margin-top: 13px;
}

.dot_line::before {
content: url("../images/dot.png");
}

/*---------------------------------------------------------------
	コメントBOX
----------------------------------------------------------------*/
.col_comment .comment {
width: 100%;
padding-top: 15px;
float: left;
font-size: 12px;
line-height: 160%;
font-weight: 500;
}

/*=======================================================================
	pagination
========================================================================*/

.pagination_box {
width: 100%;
float: left;
margin-top: 10px;
}

.pagination_box ul {
width: 100%;
float: left;
}

.pagination_box ul li {
float: left;
margin-right: 5px;
}

.pagination_box ul li:last-child {
margin-right: none;
}

/*---------------------------------------------------------------
	数字　ボタン
----------------------------------------------------------------*/
.pagination_box .pn_btn {
background-color: #7099cb;
width: 30px;
height: 30px;
padding: 4px;
transition: 0.3s;
border: 3px solid #417ccd;
border-radius: 20px;
outline: none;
color: #fff;
position: relative;
font-weight: 500;
font-size: 14px;
float: left;
text-decoration: none;
text-align: center;
}

.pagination_box .pn_btn:hover {
background-color: #b8ceeb;
}

/*---------------------------------------------------------------
	戻る　ボタン
----------------------------------------------------------------*/
.pagination_box .pn_prev_btn {
background-color: #417ccd;
height: 30px;
padding: 5px 10px 5px 30px;
transition: 0.3s;
border: 3px solid #417ccd;
border-radius: 20px;
outline: none;
color: #fff;
position: relative;
font-weight: 500;
font-size: 14px;
float: left;
text-decoration: none;
text-align: center;
}

.pagination_box .pn_prev_btn .pn_icon {
position: absolute;
width: 22px;
height: 22px;
top: 1px;
left: 1px;
background-color: #7099cb;
transition: 0.3s;
color: #fff;
text-align: center;
border-radius: 30px;
padding-top: 3px;
font-size: 14px;
}

.pagination_box .pn_prev_btn:hover {
background-color: #b8ceeb;
border: 3px solid #417ccd;
color: #18385e;
}

.pagination_box .pn_prev_btn:hover .cn_icon {
background-color: #417ccd;
}

/*---------------------------------------------------------------
	次へ　ボタン
----------------------------------------------------------------*/

.pagination_box .pn_next_btn {
background-color: #417ccd;
height: 30px;
padding: 5px 30px 5px 10px;
transition: 0.3s;
border: 3px solid #417ccd;
border-radius: 20px;
outline: none;
color: #fff;
position: relative;
font-weight: 500;
font-size: 14px;
float: left;
text-decoration: none;
text-align: center;
}

.pagination_box .pn_next_btn .pn_icon {
position: absolute;
width: 22px;
height: 22px;
top: 1px;
right: 1px;
background-color: #7099cb;
transition: 0.3s;
color: #fff;
text-align: center;
border-radius: 30px;
padding-top: 3px;
font-size: 14px;
}

.pagination_box .pn_next_btn:hover {
background-color: #b8ceeb;
border: 3px solid #417ccd;
color: #18385e;
}

.pagination_box .pn_next_btn:hover .cn_icon {
background-color: #417ccd;
}

/*---------------------------------------------------------------
	ボタン 無効
----------------------------------------------------------------*/
.pagination_box .disabled {
opacity: 0.3;
pointer-events :none;
}

/*---------------------------------------------------------------
	ボタン 選択中
----------------------------------------------------------------*/
.pagination_box .this {
background-color: #b8ceeb !important;
color: #417ccd;
pointer-events :none;
}

/*=======================================================================
	エントリーボックス　TAB メニュー
========================================================================*/
.entry_box {
width: 1000px;
float: left;
}

.entry_box .input_tab {
display: none;
}

.entry_box .tab_area {
width: 230px;
float: left;
margin-right: 20px;
}

.entry_box .tab_area li {
width: 230px;
float: left;
clear: left;
margin-bottom: 8px;
}

.entry_box .tab_area label {
width: 210px;
padding: 10px 10px;
color: #417ccd;
background: #fff;
text-align: left;
font-size: 15px;
cursor: pointer;
transition: 0.3s;
float: left;
-webkit-box-shadow: 2px 2px 3px 0px rgba(63,117,186,0.30);
box-shadow: 2px 2px 3px 0px rgba(63,117,186,0.30);
position: relative;
border-radius: 5px 5px 5px 5px;
background-image: url(../images/arrow_right.svg);
background-position: right 10px center;
background-size: 13px 13px;
background-repeat: no-repeat;
}

.entry_box .tab_area label p {
border-left: 4px solid #417ccd;
padding-left: 5px;
}

.entry_box .tab_area label:hover {
background: #b8ceeb;
background-image: url(../images/arrow_right.svg);
background-position: right 10px center;
background-size: 13px 13px;
background-repeat: no-repeat;
}

/*--変更・削除ボタン------------------------*/
.entry_box .tab_area .btn_box {
width: 230px;
float: left;
margin-top: 20px;
}

.entry_box .tab_area .btn_box .btn_edit {
background-color: #417ccd;
width: 100%;
height: 36px;
padding: 8px 10px 10px 40px;
transition: 0.3s;
border: 2px solid #417ccd;
border-radius: 30px;
outline: none;
color: #fff;
position: relative;
font-weight: 500;
font-size: 14px;
float: left;
text-decoration: none;
}

.entry_box .tab_area .btn_box .btn_edit:hover {
background-color: #B8CFEC;
border: 2px solid #417ccd;
color: #18385e;
}

.entry_box .tab_area .btn_box .btn_edit .icon {
position: absolute;
width: 26px;
height: 26px;
top: 3px;
left: 3px;
background-color: #94BAE8;
border-radius: 13px;
text-align: center;
font-size: 12px;
line-height: 16px;
padding-top: 4px;
}

.entry_box .tab_area .btn_box .btn_edit:hover .icon {
background-color: #417ccd;
color: #fff;
}



.entry_box .tab_area .btn_box .btn_delete {
background-color: #F973A4;
width: 100%;
height: 36px;
padding: 8px 10px 10px 40px;
transition: 0.3s;
border: 2px solid #F973A4;
border-radius: 30px;
outline: none;
color: #fff;
position: relative;
font-weight: 500;
font-size: 14px;
float: left;
text-decoration: none;
}

.entry_box .tab_area .btn_box .btn_delete:hover {
background-color: #FBB5D5;
border: 2px solid #F973A4;
color: #C50048;
}

.entry_box .tab_area .btn_box .btn_delete .icon {
position: absolute;
width: 26px;
height: 26px;
top: 3px;
left: 3px;
background-color: #FBB5D5;
border-radius: 13px;
text-align: center;
font-size: 12px;
line-height: 16px;
padding-top: 4px;
}

.entry_box .tab_area .btn_box .btn_delete:hover .icon {
background-color: #F973A4;
color: #fff;
}

/*--パネルエリア------------------------*/

.entry_box .panel_area {
float: left;
width: 750px;
display: block;
}

.entry_box .tab_panel {
width: 750px;
display: none;
float: left;
}

.entry_box .tab_panel .panel {
width: 520px;
float: left;
}

.entry_box .tab_panel .entry_comment {
width: 210px;
float: left;
margin-left: 20px;
color: #417CCD;
font-size: 12px;
line-height: 160%;
font-weight: 500;
}

.entry_box #tab_00:checked ~ .tab_area .tab00_label,
.entry_box #tab_01:checked ~ .tab_area .tab01_label,
.entry_box #tab_02:checked ~ .tab_area .tab02_label,
.entry_box #tab_03:checked ~ .tab_area .tab03_label,
.entry_box #tab_04:checked ~ .tab_area .tab04_label,
.entry_box #tab_05:checked ~ .tab_area .tab05_label,
.entry_box #tab_06:checked ~ .tab_area .tab06_label,
.entry_box #tab_07:checked ~ .tab_area .tab07_label,
.entry_box #tab_08:checked ~ .tab_area .tab08_label,
.entry_box #tab_09:checked ~ .tab_area .tab09_label,
.entry_box #tab_10:checked ~ .tab_area .tab10_label,
.entry_box #tab_11:checked ~ .tab_area .tab11_label,
.entry_box #tab_12:checked ~ .tab_area .tab12_label{
background-color: #417ccd;
color: #fff;
-webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.15) inset;
box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.15) inset;
width: 220px;
border-radius: 5px 20px 20px 5px;
background-image: url(../images/arrow_right.svg);
background-position: right 10px center;
background-size: 13px 13px;
background-repeat: no-repeat;
}

.entry_box #tab_00:checked ~ .tab_area .tab00_label p,
.entry_box #tab_01:checked ~ .tab_area .tab01_label p,
.entry_box #tab_02:checked ~ .tab_area .tab02_label p,
.entry_box #tab_03:checked ~ .tab_area .tab03_label p,
.entry_box #tab_04:checked ~ .tab_area .tab04_label p,
.entry_box #tab_05:checked ~ .tab_area .tab05_label p,
.entry_box #tab_06:checked ~ .tab_area .tab06_label p,
.entry_box #tab_07:checked ~ .tab_area .tab07_label p,
.entry_box #tab_08:checked ~ .tab_area .tab08_label p,
.entry_box #tab_09:checked ~ .tab_area .tab09_label p,
.entry_box #tab_10:checked ~ .tab_area .tab10_label p,
.entry_box #tab_11:checked ~ .tab_area .tab11_label p,
.entry_box #tab_12:checked ~ .tab_area .tab12_label p{
border-left: 4px solid #fff;
padding-left: 5px;
}

.entry_box #tab_00:checked ~ .panel_area #panel_00,
.entry_box #tab_01:checked ~ .panel_area #panel_01,
.entry_box #tab_02:checked ~ .panel_area #panel_02,
.entry_box #tab_03:checked ~ .panel_area #panel_03,
.entry_box #tab_04:checked ~ .panel_area #panel_04,
.entry_box #tab_05:checked ~ .panel_area #panel_05,
.entry_box #tab_06:checked ~ .panel_area #panel_06,
.entry_box #tab_07:checked ~ .panel_area #panel_07,
.entry_box #tab_08:checked ~ .panel_area #panel_08,
.entry_box #tab_09:checked ~ .panel_area #panel_09,
.entry_box #tab_10:checked ~ .panel_area #panel_10,
.entry_box #tab_11:checked ~ .panel_area #panel_11,
.entry_box #tab_12:checked ~ .panel_area #panel_12{
display:block;
transition: 0.3s;
}

/*---------------------------------------------------------------
	パネル内フレーム
----------------------------------------------------------------*/
.entry_box .tab_panel .panel .frame {
width: 100%;
float: left;
padding: 20px 15px 15px 15px;
border: 1px solid #417CCC;
border-radius: 10px;
position: relative;
margin-bottom: 20px;
}

.entry_box .tab_panel .panel .frame a.delete {
width: 24px;
height: 24px;
position: absolute;
border-radius: 20px;
padding: 5px 0px 0px 0px;
border: 1px solid #417CCC;
color: #417CCC;
right: -10px;
top: -10px;
text-align: center;
font-size: 11px;
background-color: #fff;
background-image: url(../images/bg.png);
-webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.25);
box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.25);
transition: 0.3s;
}

.entry_box .tab_panel .panel .frame a.delete:hover {
background-color: #B8CFEC;
color: #18385e;
background-image: none;
}


.entry_box .tab_panel .panel .ques_title {
padding: 0 10px 10px 5px;
color: #3F76BA;
font-size: 18px;
font-weight: 500;
}

/*---------------------------------------------------------------
	入力欄
----------------------------------------------------------------*/
.entry_box .ques_box {
width: 100%;
float: left;
position: relative;
}


/*---------------------------------------------------------------
	入力欄　左右分BOX
----------------------------------------------------------------*/

.entry_box .left_box {
width: 50%;
float: left;
padding-right: 10px;
}

.entry_box .left_box_and {
width: 50%;
float: left;
padding-right: 10px;
position: relative;
}

.entry_box .left_box_and::after {
content: "〜";
position: absolute;
top: 35px;
right: -4px;
font-size: 12px;
}

.entry_box .right_box {
width: 50%;
float: right;
padding-left: 10px;
}



/*---------------------------------------------------------------
	入力　placeholderアニメ
----------------------------------------------------------------*/
.entry_box .ques {
margin: 22px 10px 10px 0px;
position: relative;
display: inline-block;
width: 100%;
}
  
.entry_box .ph_name {
padding: 10px 10px 10px 5px;
pointer-events: none;
position: absolute;
left: 0;
top: 0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
color: #ccc;
font-size: 14px;
transform-origin: top left;
}

.entry_box .ph_name2 {
padding: 10px 10px 10px 5px;
pointer-events: none;
position: absolute;
left: 0;
top: 0;
transition: 0.2s;
transition-timing-function: ease;
font-size: 10px;
color: #417CCC;
}

.entry_box .ph_name3 {
padding: 10px 10px 2px 5px;
font-size: 10px;
color: #417CCC;
float: left;
}

.entry_box .aniput {
padding: 12px 10px 5px 5px;
border-bottom: 1px solid #bbb;
border-top: none;
border-left: none;
border-right: none;
background: none;
font-size: 14px;
width: 100%;
}

.entry_box .aniput:focus {
outline: none;
border-bottom: 1px solid #417CCC;
}

.entry_box .aniput:focus + .ph_name, .aniput:not(:placeholder-shown) + .ph_name {
opacity: 1;
transform: scale(0.7) translateY(-25px) translateX(0px);
color: #417CCC;
position: absolute;
}

/* For IE Browsers*/
.entry_box .aniput:focus + .ph_name, .aniput:not(:-ms-input-placeholder) + .ph_name {
opacity: 1;
transform: scale(0.7) translateY(-25px) translateX(0px);
color: #417CCC;
position: absolute;
} 

/*---------------------------------------------------------------
	テキストエリア　placeholderアニメ
----------------------------------------------------------------*/
.entry_box textarea {
resize: none;
color: #666;
width: 100%;
}

.entry_box textarea::placeholder {
color: #ccc;
font-size: 14px;
}

.entry_box textarea.normal {
padding: 5px 10px 5px 7px;
border: 1px solid #bbb;
background-color: rgba(255,255,255,0.00);
border-radius: 5px;
margin-top: 20px;
}

.entry_box textarea.skill {
padding: 5px 10px 5px 7px;
border: 1px solid #bbb;
background-color: rgba(255,255,255,0.00);
border-radius: 5px;
margin-top: 5px;
font-size: 12px;
line-height: 140%;
float: left;
}

.entry_box p.skill {
padding: 5px 10px 5px 7px;
margin-top: 5px;
font-size: 12px;
float: left;
width: 100;
height: auto;
line-height: 140%;
}

.entry_box .ques_te {
margin: 25px 0px 0px 0px;
position: relative;
display: inline-block;
width: 100%;
}

.entry_box .ph_te_name {
padding: 10px 10px 10px 7px;
pointer-events: none;
position: absolute;
left: 0;
top: 0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
color: #ccc;
font-size: 14px;
transform-origin: top left;
}

.entry_box textarea.aniput {
padding: 5px 10px 5px 7px;
border: 1px solid #bbb;
background-color: none;
border-radius: 5px;
}

.entry_box textarea.aniput:focus {
outline: none;
border: 1px solid #417CCC;
}

.entry_box textarea.aniput:focus + .ph_te_name, textarea.aniput:not(:placeholder-shown) + .ph_te_name {
opacity: 1;
transform: scale(0.7) translateY(-35px) translateX(0px);
color: #417CCC;
}

/* For IE Browsers*/
.entry_box textarea.aniput:focus + .ph_te_name, textarea.aniput:not(:-ms-input-placeholder) + .ph_te_name {
opacity: 1;
transform: scale(0.7) translateY(-35px) translateX(0px);
color: #417CCC;
} 

/*---------------------------------------------------------------
	セレクト
----------------------------------------------------------------*/

.select_wrap {
width: 100%;
height: 25px;
position: relative;
display: inline-block;
float: left;
margin-top: 10px;
margin-right: 5px;
line-height: 25px;
vertical-align: middle;
border-bottom: 1px solid #bbb;
border-top: none;
border-left: none;
border-right: none;
transform-origin: top left;
color: #666;
}

.select_wrap select::-ms-expand {
display: none;
}

.select_wrap select {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
display: block;
margin: 0;
padding: 0px 25px 0px 5px;
background-color: transparent;
border: 0;
outline: none;
background-image: url(../images/select_down.svg);
background-repeat: no-repeat;
background-size: 10px 6px;
background-position : right 8px center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
font-size: 14px;
vertical-align: middle;
color: #ccc;
}

.select_ymd {
float: left;
width: 100%;
}

.select_ymd .select_wrap2 {
height: 25px;
width: 31%;
position: relative;
display: inline-block;
float: left;
margin-top: 10px;
margin-right: 5px;
line-height: 25px;
vertical-align: middle;
border-bottom: 1px solid #bbb;
border-top: none;
border-left: none;
border-right: none;
transform-origin: top left;
color: #666;
}

.select_ymd .select_wrap2 select::-ms-expand {
display: none;
}

.select_ymd .select_wrap2 select {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
display: block;
margin: 0;
padding: 0px 25px 0px 5px;
background-color: transparent;
border: 0;
outline: none;
background-image: url(../images/select_down.svg);
background-repeat: no-repeat;
background-size: 10px 6px;
background-position : right 8px center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
font-size: 14px;
vertical-align: middle;
color: #ccc;
float: left;
}

.select_ym {
float: left;
width: 100%;
}

.select_ym .select_wrap2 {
height: 25px;
width: 47.5%;
position: relative;
display: inline-block;
float: left;
margin-top: 10px;
margin-right: 5px;
line-height: 25px;
vertical-align: middle;
border-bottom: 1px solid #bbb;
border-top: none;
border-left: none;
border-right: none;
transform-origin: top left;
color: #666;
}

.select_ym .select_wrap2 select::-ms-expand {
display: none;
}

.select_ym .select_wrap2 select {
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
display: block;
margin: 0;
padding: 0px 25px 0px 5px;
background-color: transparent;
border: 0;
outline: none;
background-image: url(../images/select_down.svg);
background-repeat: no-repeat;
background-size: 10px 6px;
background-position : right 8px center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
font-size: 14px;
vertical-align: middle;
color: #ccc;
float: left;
}

.selectplace {
display: none;
}

/*-- ie11対策 ------------------------------------*/
@media all and (-ms-high-contrast:none){
*::-ms-backdrop,
.select_wrap select{padding: 3px 25px 0px 5px;} /* IE11 */
}

/*-- Microsoft Edge対策 ------------------------------------*/
@supports (-ms-ime-align:auto) {
.select_wrap select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
display: block;
margin: 0;
padding: 0px 25px 0px 5px;
background-color: transparent;
border: 0;
outline: none;
background-image: url(../images/select_down.svg);
background-repeat: no-repeat;
background-size: 10px 6px;
background-position : right 8px center;
line-height: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
}
}

/*---------------------------------------------------------------
	アップロード
----------------------------------------------------------------*/
.drag_box {
width: 100%;
float: left;
text-align: center;
}

.drag_area {
padding: 160px 0 40px 0;
width: 100%;
margin: 0 auto 20px;
text-align: center;
border: 1px dashed #3F76BA;
background-color: #F0EEE7;
background-image: url(../images/upload.svg);
background-position: center top 30px;
background-repeat: no-repeat;
background-size: 110px 110px;
border-radius: 3px;
display: block;
}

.drag_area.drag {
background-color: #FFFFFF;
display: block;
}

.drag_area .drag_text {
margin-bottom: 20px;
color: #3F76BA;
font-weight: 700;
}

.drag_area input[type="file"] {
margin:0 auto;
}


.upload_btn {
width: 180px;
margin-left: auto;
margin-right: auto;
}

.upload_btn button[type="submit"] {
display: inline;
font-weight: 600 !important;
padding: 11px 10px 10px 40px;
cursor: pointer;
}

.add_btn_box {
width: 100%;
margin-bottom: 20px;
float: left;
}

.add_btn {
width: 180px;
margin-left: auto;
margin-right: auto;
}

.add_btn button[type="submit"] {
display: inline;
font-weight: 600 !important;
padding: 11px 10px 10px 40px;
cursor: pointer;
}

.save_btn_box {
width: 100%;
margin-top: 0px;
float: left;
}

.save_btn {
width: 180px;
margin-left: auto;
margin-right: auto;
}

.save_btn button[type="submit"] {
display: inline;
font-weight: 600 !important;
padding: 11px 10px 10px 40px;
cursor: pointer;
}

.ques_box .myphoto {
display: inline-block;
width: 140px;
height: 140px;
border: 2px dashed #ccc;
overflow: hidden;
border-radius: 10px;
position: relative;
text-align: center;
}

.ques_box .myphoto img {
width: 135px;
height: 135px;
object-fit: cover;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#myImage {
margin-top: 10px;
}

/*---------------------------------------------------------------
	カレンダー
----------------------------------------------------------------*/
.calendar {
position: relative;
width: 100%;
float: left;
background-image: url(../images/date_pick_calendar.svg) !important;
background-repeat: no-repeat !important;
background-position: right bottom 5px !important;
background-size: 18px 18px !important;
font-size: 15px !important;
color: #333 !important;
padding-right: 20px !important;
}



/*---------------------------------------------------------------
	サマリー
----------------------------------------------------------------*/
.summary {
width: 100%;
float: left;
position: relative;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #eee;
margin-bottom: 10px;
}

.summary .category {
font-size: 14px;
margin-bottom: 10px;
float: left;
}

.summary .indication_btn {
font-size: 12px;
margin-bottom: 10px;
float: right;
text-align: center;
background-color: #417CCE;
color: #fff;
font-weight: 500;
border-radius: 20px;
padding: 0px 10px;
text-decoration: none;
margin-top: 2px;
height: 20px;
border: none;
}

.summary .indication_btn:hover {
background-color: #B8CFEC;
color: #18385e;
cursor: pointer;
}

.summary ul {
width: 100%;
float: left;
position: relative;
}

.summary ul li {
float: left;
clear: left;
margin-bottom: 10px;

}

.summary ul li:last-child {
margin-bottom: 0px;
}

.summary ul li .bar {
height: 26px;
float: left;
background-color: #b8ceeb;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
color: #333;
padding: 4px 4px 4px 7px;
font-size: 12px;
position: relative;
white-space: nowrap;
}

.summary ul li .bar a {
color: #333;
}

.summary ul li .bar a:hover {
color: #417CCE;
}

.summary ul li .memo {
float: right;
padding-left: 5px;
}

.summary ul li .bar i {
float: left;
white-space: nowrap;
display: inline;
padding-top: 4px;
margin-right: 4px
}

.summary ul li .bar .barbox {
float: left;
display: inline;
}

.summary ul li .bar .name {
margin-left: 5px;
margin-right: 5px;
}

.summary ul li .bar input[type=text] {
padding-left: 2px;
padding-right: 2px;
outline: none;
border: 1px solid #B8CFEC;
background-color: #B8CFEC;
display: inline;
width: 100%;
height: 18px;
}


.summary ul li .bar input[type=text]:focus {
border: 1px solid #999;
background-color: #fff;
color: #666;
}

.summary ul li .years {
font-size: 12px;
line-height: 26px;
margin-left: 5px;
}

.summary ul li .years input[type=text] {
padding-left: 1px;
padding-right: 1px;
outline: none;
width: 20px;
border: 1px solid #fff;
}

.summary ul li .years input[type=text]:focus {
border: 1px solid #999;
background-color: #fff;
color: #666;
}

.summary .disabled {
pointer-events: none;
}

.summary .disabled .bar {
height: 26px;
float: left;
background-color: #ddd;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
color: #999;
padding: 4px 4px 4px 7px;
font-size: 12px;
position: relative;
white-space: nowrap;
}

.summary .disabled .memo {
float: right;
padding-left: 5px;
color: #999999;
}

.summary .disabled .years {
font-size: 12px;
line-height: 26px;
margin-left: 5px;
color: #bbb;
}

.summary .disabled .years input[type=text] {
padding-left: 1px;
padding-right: 1px;
outline: none;
width: 20px;
border: 1px solid #fff;
color: #999;
}



.summary .disabled .bar input[type=text] {
padding-left: 2px;
padding-right: 2px;
outline: none;
border: 1px solid #ddd;
background-color: #ddd;
display: inline;
width: 100%;
height: 18px;
color: #999;
}




.summary .add_summary_box {
width: 100%;
float: left;
text-align: center;
}

.summary .add_summary_box a.add_summary {
width: 24px;
height: 24px;
border-radius: 20px;
padding: 5px 0px 0px 0px;
border: 1px solid #417CCC;
color: #417CCC;
text-align: center;
font-size: 11px;
background-color: #fff;
-webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.25);
box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.25);
display: inline-block;
transition: 0.3s;
}

.summary .add_summary_box a.add_summary:hover {
background-color: #B8CFEC;
color: #18385e;
}

/*---------------------------------------------------------------
	TAG
----------------------------------------------------------------*/
.entry_box .tag_box {
width: 100%;
margin-top: 20px;
border-bottom: 1px solid #bbb;
padding: 5px 5px 5px 5px;
float: left;
}

.entry_box .tag_box .tag_box_title {
width: 100%;
float: left;
color: #417CCC;
font-size: 10px;
}

.entry_box .tag_box ul {
width: 100%;
float: left;
padding-top: 8px;
}

.entry_box .tag_box ul li {
float: left;
font-size: 11px;
line-height: 14px;
padding: 6px 6px 6px 8px;
background-color: #91939D;
border-radius: 4px;
margin-right: 4px;
margin-bottom: 4px;
color: #fff;
}

.entry_box .tag_box ul li:last-child {
margin-right: 0px;
}

.entry_box .tag_box ul li a {
margin-left: 5px;
font-size: 14px;
color: #fff;
line-height: 14px;
}

/*---------------------------------------------------------------
	SNS
----------------------------------------------------------------*/
.entry_box .sns_box {
width: 100%;
margin-top: 20px;
float: left;
}

.entry_box .sns_box .icon {
width: 15%;
float: left;
padding: 10px 10px 0px 10px;
}

.entry_box .sns_box .icon img {
width: 100%;
height: auto;
}

.entry_box .sns_box .text {
width: 85%;
float: left;
}

.entry_box .ques_box .wide {
width: 90%;
float: left;
}

.entry_box .ques_box .row_left {
width: 45%;
float: left;
}

.entry_box .ques_box .row_right {
width: 45%;
float: left;
padding-left: 10px;
}

.entry_box .ques_box .close {
width: 10%;
float: left;
text-align: center;
padding: 35px 0px 0px 10px;
}

.entry_box .ques_box .close a {
color: #666;
font-size: 20px;
}

/*---------------------------------------------------------------
	サマリー　モーダル
----------------------------------------------------------------*/

.modal01{
  
}


#modal01{
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

#modal_content01{
  width: 500px;
  height: auto;
  background-color: #fff !important;
  margin-left: -250px;
  padding:10px;
  position:relative;
  top: 20%;
  left: 50%;
}

#modal02{
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

#modal_content02{
  width: 500px;
  height: auto;
  background-color: #fff !important;
  margin-left: -250px;
  padding:10px;
  position:relative;
  top: 20%;
  left: 50%;
}


#modal03{
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

#modal_content03{
  width: 500px;
  height: auto;
  background-color: #fff !important;
  margin-left: -250px;
  padding:10px;
  position:relative;
  top: 20%;
  left: 50%;
}

#modal04{
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

#modal_content04{
  width: 500px;
  height: auto;
  background-color: #fff !important;
  margin-left: -250px;
  padding:10px;
  position:relative;
  top: 20%;
  left: 50%;
}

/*---------------------------------------------------------------
	checkbox（モーダル用）
----------------------------------------------------------------*/
.mcb {
float: left;  
}

.modal_check_input {
  display: none;
}

.modal_checkbox {
  padding-left: 10px;
  position:relative;
  margin-right: 5px;
  margin-top: 2px;
  float: left;
}

.modal_checkbox::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
border: 1px solid #999;
border-radius: 2px;
background-color: #417CCE;
}
.modal_check_input:checked + .modal_checkbox {
  color: #666;
}
.modal_check_input:checked + .modal_checkbox::after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 5px;
  width: 4px;
  height: 8px;
  transform: rotate(40deg);
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}