@charset "utf-8";

/*-------------------------------------
	Parts
-------------------------------------*/

.dashed { margin: 20px 0 0; padding: 20px 0 0; border-top: 1px dashed #CADCEA; }

/* commingSoon */
.commingSoon { position: relative; opacity: .6; }
.commingSoon:before {
	content: "準備中";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #FFF !important;
	text-align: center;
	background: rgba(1, 77, 125, 0.8);
	opacity: 0;
	z-index: 1;
	cursor: default;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
.commingSoon:hover:before { opacity: 1; }
header nav .commingSoon:before { padding: 15px 0 0; }

/* form */
.form:not(.activity) .inner { max-width: 960px; }
.form section > p { margin: 30px 40px; text-align: left; }
.form section > p ~ p { margin-top: -20px; }

.form form { padding: 30px 40px; border-top: 1px dashed #CADCEA; }
.form dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin: 0 0 10px; }
.form dt { position: relative; margin: 0 0 20px; padding: 0 20px 0 0; width: 25%; line-height: 1.4; }
.form dt.required { padding-right: 75px; }
.form dt.required:after { content: "必須"; position: absolute; top: 50%; right: 30px; margin: -10px 0 0; padding: 0 7px; color: #FFF; font-size: 11px; font-weight: normal; line-height: 20px; text-shadow: 0 0 5px #1e98e4; background: #007BC7; }
.form dd { margin: 0 0 20px; width: 75%; }

.form figure { display: inline-block; position: relative; margin: 0 20px 0 0; width: 160px; height: 160px; vertical-align: middle; }
.form figure .delete { display: block; position: absolute; top: 0; right: 0; width: 30px; height: 30px; background: #333; cursor: pointer; opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.form figure .delete:before,
.form figure .delete:after { content: ""; display: block; position: absolute; top: 50%; left: 6px; width: 18px; height: 3px; background: #FFF; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.form figure .delete:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.form figure:hover .delete { opacity: 0.6; }
.form figure:hover .delete:hover { opacity: 0.9; }

.form label { vertical-align: baseline; }
.form input[type=radio] + span,
.form input[type=checkbox] + span { min-width: 66px; line-height: 40px; }

.form .label-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 0 20px -15px; width: calc(75% + 15px); }
.form .label-list > label,
.form .label-list .label-group { margin: 0 0 0 15px; width: auto; min-width: calc(50% - 15px); }
.form .label-list input[type=radio] + span,
.form .label-list input[type=checkbox] + span { padding: 11px 0 10px 30px; min-height: 40px; font-size: 16px; line-height: 1.2; }
.form .label-list .label-group input[type=text],
.form .label-list .label-group input[type=number] { margin: 4px 10px; }
.form .label-list .label-group .M { width: 300px; }

.form .leveled { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }

.form.profile dt { width: 180px; }
.form.profile dd { width: calc(100% - 180px); }

.form.contact dt { width: 270px; }
.form.contact dd { width: calc(100% - 270px); }

.form.conf form { padding: 0 0 30px; border: none; }
.form.conf dl { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin: 0 0 30px; border-bottom: 1px dashed #CADCEA; }
.form.conf dt,
.form.conf dd { margin: 0; padding: 15px 40px 15px 20px; width: 70%; border-top: 1px dashed #CADCEA; }
.form.conf dt { padding: 15px 75px 15px 40px; width: 30%; }
.form.conf figure { border-radius: 50%; overflow: hidden; }
.form.conf form p { margin-left: 40px; margin-right: 40px; }
.form.conf .lev-line { margin: 10px 0 0; }

.form.activity.conf .inner { max-width: 960px; }

.form.activity.conf dt { padding: 15px 20px 15px 40px; width: 320px; }
.form.activity.conf dd { padding: 15px 40px 15px 20px; width: calc(100% - 320px); }

.form.comp .inner { max-width: 600px; }
.form.comp section { padding: 40px; }
.form.comp p { margin: 0 0 30px; text-align: center; }
.form.comp .dashed { margin: 0; padding: 30px 0 0; }

/* .lev-radio */
.lev-radio { padding: 30px 0 0; width: 240px; font-size: 0; }
.lev-radio label { margin: 0 0 0 30px !important; padding: 16px 0 0; width: 24px; height: 40px; font-size: 16px; }
.lev-radio label:first-of-type { margin: 0 !important; }
.lev-radio label:before,
.lev-radio label:after { content: ""; display: block; position: absolute; top: 50%; right: 50%; margin: 7px -1px 0 0; width: 54px; height: 2px; border-top: 2px solid #A9C5DA; z-index: 1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.lev-radio label:after { margin: 4px -4px 0 0; width: 8px; height: 8px; background: #FFF; border: 2px solid #A9C5DA; border-radius: 5px; z-index: 2; }
.lev-radio label:first-of-type:before { display: none; }

.lev-radio label .lev-face,
.lev-radio label .lev-comment { bottom: 0; left: 0; margin: 0; opacity: 0; z-index: 10; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.lev-radio label:first-of-type  .lev-face { background-image: url("/member/images/icon-face-lev01.svg"); }
.lev-radio label:nth-of-type(2) .lev-face { background-image: url("/member/images/icon-face-lev02.svg"); }
.lev-radio label:nth-of-type(3) .lev-face { background-image: url("/member/images/icon-face-lev03.svg"); }
.lev-radio label:nth-of-type(4) .lev-face { background-image: url("/member/images/icon-face-lev04.svg"); }
.lev-radio label:nth-of-type(5) .lev-face { background-image: url("/member/images/icon-face-lev05.svg"); }

.lev-radio label .lev-comment {
	position: absolute;
	bottom: 40px;
	left: 50%;
	margin: 0 0 5px;
	padding: 5px;
	color: #007BC7;
	font-size: 16px;
	text-align: center;
	background-color: #FFF;
	border: 1px solid #A9C5DA;
	box-shadow: 0 3px 10px rgba(0, 123, 199, 0.1);
	white-space: nowrap;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.lev-radio label .lev-comment:before,
.lev-radio label .lev-comment:after { content: ''; position: absolute; bottom: -17px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 9px solid #A9C5DA; }
.lev-radio label .lev-comment:after { bottom: -16px; margin: 0 0 0 -8px; border-top-color: #FFF; }

.lev-radio input[type=radio]:checked + label ~ label:before { border-top: 2px dotted #A9C5DA; }
.lev-radio input[type=radio]:checked + label ~ label:after { border-width: 1px; }
.lev-radio input[type=radio]:checked + label .lev-comment,
.lev-radio input[type=radio]:checked + label .lev-face { margin: 0; opacity: 1; }

.lev-radio:hover .lev-comment,
.lev-radio:hover input[type=radio]:checked + label .lev-comment { margin: 0 0 5px; opacity: 0; }
.lev-radio:hover label:hover .lev-comment { margin: 0; opacity: .6; }
.lev-radio label:hover .lev-face,
.lev-radio:hover input[type=radio]:checked + label:hover .lev-comment { margin: 0; opacity: 1; }

.lev-radio label:hover .lev-face { transform: scale(0.8, 0.8); }
.lev-radio input[type=radio]:checked + label:hover .lev-face { transform: scale(1, 1); }
.lev-radio label:hover .lev-comment { z-index: 10; }

.lev-radio.long { padding: 50px 0 0; }
.lev-radio.long label:first-of-type .lev-comment { -webkit-transform: translateX(-50%) translateX(25px); transform: translateX(-50%) translateX(25px); }
.lev-radio.long label:nth-of-type(2) .lev-comment { -webkit-transform: translateX(-50%) translateX(15px); transform: translateX(-50%) translateX(15px); }
.lev-radio.long label:first-of-type .lev-comment:before,
.lev-radio.long label:first-of-type .lev-comment:after { -webkit-transform: translateX(-25px); transform: translateX(-25px); }
.lev-radio.long label:nth-of-type(2) .lev-comment:before,
.lev-radio.long label:nth-of-type(2) .lev-comment:after { -webkit-transform: translateX(-15px); transform: translateX(-15px); }

/* tooltip */
.tooltip { display: inline-block; position: relative; top: -3px; margin: 0 0 0 8px; }
.tooltip .icon { display: inline-block; width: 20px; height: 20px; font-size: 0; background: #007BC7 url("/images/icon_info.png") center center no-repeat; background-size: 13px 13px; border-radius: 10px; vertical-align: middle; cursor: pointer; }
.tooltip .tooltipText {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin: 0 0 10px 10px;
	padding: 15px;
	width: auto;
	color: #007BC7;
	line-height: 1.6;
	text-align: center;
	background-color: #FFF;
	border: 1px solid #007BC7;
	border-radius: 6px;
	visibility: hidden;
	opacity: 0;
	z-index: 300;
	white-space: nowrap;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}
.tooltip .tooltipText:before,
.tooltip .tooltipText:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 9px solid #007BC7; }
.tooltip .tooltipText:after { margin: -2px 0 0 -8px; border-top-color: #FFF; }
.tooltip:hover .tooltipText { box-shadow: 0 0 10px 3px rgba(0, 123, 199, 0.1); visibility: visible; opacity: 1; }

/* .large */
.large { text-align: center; }
.large button,
.large .btn { padding: 0 30px; min-width: 200px; height: 60px; font-size: 21px; letter-spacing: 1px; line-height: 56px; border-radius: 7px; }
.large button:not(:first-child),
.large .btn:not(:first-child) { margin-left: 30px; }

.large + .left { margin: -25px 0 0; }
.large + .left a { color: #666 !important; }

/* acd */
.acd { display: inline-block; position: relative; padding: 11px 34px 11px 18px; border: 1px solid #CADCEA; border-radius: 5px; }
.acd:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 17px;
	margin: -7px 0 0;
	width: 10px;
	height: 16px;
	background: url("/images/arrowR.png") top left no-repeat;
	background-size: contain;
	opacity: .8;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}
.acd.open:after { -webkit-transform: rotate(90deg) scale(-1,1); transform: rotate(90deg) scale(-1,1); }
.acd:hover { text-decoration: none; background: #F2F7FF; border-color: #007BC7; cursor: pointer; }
.acd:hover:after { opacity: 1; }
.acd-content { display: none; }

/* news */
#News .inner { max-width: 960px; }

.news li { border-top: 1px solid #CADCEA; }
.news li:first-child { border-top: none; }
.news a,
.news .nolink { display: block; padding: 20px; color: #111 !important; font-size: 18px; }
.news a { padding: 20px 40px 20px 20px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news a:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	margin: -10px 0 0;
	width: 12px;
	height: 20px;
	background: url("/images/arrowR.png") top left no-repeat;
	background-size: contain;
	opacity: 0;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}
.news span { display: inline-block; padding-right: 20px; min-width: 115px; color: #999 !important; }
.news a:hover { text-decoration: none; background: #F2F7FF; }
.news a:hover:after { right: 15px; opacity: 1; }

.news.list a { padding: 20px 50px 20px 125px; font-size: 16px; line-height: 1.4; white-space: normal; }
.news.list a span { position: absolute; top: 20px; left: 20px; }
.news.list a strong { display: block; margin: 0 0 5px; color: #007BC7; }

.news-detail section { padding: 0 0 20px; }
.news-detail .date { margin: 20px 0 15px; color: #999; }
.news-detail p { margin: 15px 0; padding: 0 40px; text-align: left; }
.news-detail .dashed { padding-top: 20px; text-align: center; }

/* modal */
.modal { display: none; position: relative; z-index: 900; }

.modalBG { position: fixed; top: 0; left: 0; margin: 0; height: 100%; width: 100%; background: #FFF; opacity: .9; z-index: 999; }

.modal-block {
	position: fixed;
	top: 10%;
	left: 50%;
	margin: -40px 0 0 -400px;
	padding: 20px 0 0;
	width: 800px;
	height: auto;
	max-height: 80%;
	background: #fff;
	border: 1px solid #CADCEA;
	border-radius: 5px;
	box-shadow: 0 10px 30px rgba(213, 228, 239, 0.6);
	overflow-y: auto;
	z-index: 1000;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.modal-block h2 { padding: 0 20px; font-size: 16px; font-weight: bold; line-height: 1; text-align: left; }
.modal-block table { border: none; }
.modal-block th,
.modal-block td { padding: 20px; font-size: 18px; border: none; border-top: 1px solid #CADCEA; }
.modal-block td > label { min-width: 100px; }
.modal-block th { width: 210px; font-size: 16px; background: #F2F7FF; border-right: 1px solid #CADCEA; }
.modal-block th span,
.modal.form dt span,
.modal.form .note { display: block; color: #666; font-size: 14px; font-weight: normal; }
.modal.form .note { margin: 10px 0 0; }

.modal.form form { padding: 0 0 20px; border: none; }
.modal.form dt,
.modal.form dd { margin: 0; padding: 10px 20px; width: 100%; }
.modal.form dt { padding: 15px 20px; background: #F8FAFC; border-top: 1px solid #CADCEA; border-bottom: 1px dashed #CADCEA; }
.modal.form label span { font-size: 16px; }
.modal.form textarea { margin: 4px 0 0; }
.modal.form p { line-height: 1.4; }
.modal.form .center { margin: 15px 0 0; }
.modal.form table { margin:0 0 20px; border-bottom: 1px solid #CADCEA; }
.modal.form th { background: none; }
.modal.form .large button,
.modal.form .large .btn { padding: 0 20px; min-width: 140px; height: 50px; font-size: 18px; letter-spacing: 1px; line-height: 48px; border-radius: 6px; }
.modal.form .large button.gray,
.modal.form .large .btn.gray { min-width: 0; }

.modal.average .modal-block { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.modal.average h2 { width: 100%; line-height: 1.2; }
.modal.average h2 span { display: inline-block; font-size: 15px; font-weight: normal; }
.modal.average .w60,
.modal.average .w40 { padding: 0 20px 20px; width: 60%; border-top: 1px solid #CADCEA; }
.modal.average .w40 { padding: 0 10px 20px; width: 40%; border-left: 1px solid #CADCEA; }

.modal .close { position: fixed; top: 10%; left: 50%; margin: -70px 0 0 380px; padding: 0; width: 20px; height: 20px; cursor: pointer; opacity: .8; z-index: 1000; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.modal .close:hover { opacity: 1; cursor: pointer; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }

.modal-block.mini { margin-left: -250px; width: 500px; }
.modal-block.mini h2 { padding: 0 20px 20px; border-bottom: 1px solid #CADCEA; }
.modal-block.mini + .close { margin-left: 230px; }

.modal.show .modal-block { margin-top: 0 !important; }
.modal.show .close { margin-top: -30px !important;}


/*-------------------------------------
	history
-------------------------------------*/

/* history-line */
.history { position: relative; }

.history-name {
	position: relative;
	padding: 11px 20px;
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	text-align: left;
	background: #F2F7FF;
	border-top: 1px solid #CADCEA;
	border-bottom: 1px solid #CADCEA;
}
.history-name + strong { display: block; padding: 15px 20px 0; font-size: 15px; text-align: left; }
.history-btns { position: absolute; top: 50%; right: 20px; margin: -16px 0 0; }
.history-btns .btn { margin: 0 0 0 10px; }
.history-outline { padding: 8px 20px 15px; text-align: left; border-bottom: 1px solid #CADCEA; }

.history-track { margin: -50px 0 0; padding: 50px 0 0; overflow: auto; }

.history-line { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding: 0 90px; height: 210px; min-width: 100%; }
.history-line:before,
.history-line:after,
.history-line li:before { content: ''; display: block; position: absolute; bottom: 55px; left: 0; width: 90px; height: 2px; border-top: 2px dotted #A9C5DA; }
.history-line:after { left: auto; right: 10px; bottom: 46px; width: auto; height: auto; border: 10px solid transparent; border-left: 12px solid #A9C5DA; border-right-width: 0; }
.history-line li { min-width: 140px; border-left: 1px solid #CADCEA; }
.history-line li:before { width: 100%; border-top: 2px solid #A9C5DA; }
.history-line li:last-child { min-width: 0; }
.history-line li:last-child:before { width: 70px; }
.history-line li:first-child:last-child:before { width: calc(100% + 70px); }

/* history-group */
.history-group:before,
.history-group:after,
.history-group .balloon,
.history-group .balloon dt,
.history-icon,
.history-group .detail:after,
.history-group:hover .lev-face,
.nohover .history-group .action  { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }

.history-group { margin: 20px 0 15px; display: block; position: relative; width: 100px; height: 175px; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.history-group:before,
.history-group:after { content: ''; position: absolute; bottom: 64px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-top: 12px solid #A9C5DA; border-bottom-width: 0; z-index: 10; }
.history-group:after { bottom: 67px; border-top-color: #FFF; }

.history-group .balloon { position: absolute; bottom: 75px; left: 0; margin: 0; width: 100px; height: 100px; background: #FFF; border: 2px solid #A9C5DA; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 10px rgba(114, 148, 175 ,0.2); }
.history-group .balloon dt { padding: 10px 0; text-align: center; }
.history-group .balloon dt strong { display: inline-block; vertical-align: middle; }
.history-group .balloon dd { opacity: 0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.history-group .lev-line { margin: 0 auto; height: 8px; }
.history-group .lev-line:after { display: none; }
.history-group .lev-comment { margin: 10px 0; font-size: 15px; line-height: 1.2; text-align: center; }

.history-group .detail {
	display: block;
	position: absolute;
	bottom: -36px;
	left: 0;
	padding: 10px;
	width: 100%;
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1;
	text-align: center;
	text-shadow: 0 0 3px #A9C5DA;
	background: #A9C5DA;
	cursor: pointer;
	opacity: .8;
}
.history-group .detail:after { content: ''; display: inline-block; margin: -2px 0 0 3px; width: 15px; height: 15px; background: url("/member/images/icon-plus.svg") center center no-repeat; background-size: contain; vertical-align: middle; }
.history-group .detail:hover { text-decoration: none; opacity: 1; }
.history-group .detail:hover:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.history-group .timing { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; text-shadow: 0 1px 5px #FFF, 0 1px 4px #FFF, 0 1px 3px #FFF, 0 1px 2px #FFF, 0 1px 1px #FFF; background: rgba(255,255,255,0.8); }

.history-group:hover:before { bottom: 64px; }
.history-group:hover:after { opacity: 0; }
.history-group:hover .balloon { margin-left: -30px; width: 160px; height: 160px; border-width: 3px; box-shadow: 0 8px 20px rgba(114, 148, 175 ,0.3); }
.history-group:hover .balloon span { margin: 0 10px 0 0; width: 36px; }
.history-group:hover .balloon dd { opacity: 1; }
.history-group:hover .timing { font-weight: bold; }
.history-group:hover .detail { bottom: -1px; }

.lev01 .history-group:before { border-top-color: #B699D7; }
.lev02 .history-group:before { border-top-color: #FB978A; }
.lev03 .history-group:before { border-top-color: #F8BC5C; }
.lev04 .history-group:before { border-top-color: #61E4C6; }
.lev05 .history-group:before { border-top-color: #57B6F2; }

.lev01 .history-group .balloon { border-color: #B699D7; box-shadow: 0 4px 10px rgba(182, 153, 215, 0.1); }
.lev02 .history-group .balloon { border-color: #FB978A; box-shadow: 0 4px 10px rgba(251, 151, 138, 0.1); }
.lev03 .history-group .balloon { border-color: #F8BC5C; box-shadow: 0 4px 10px rgba(248, 188,  92, 0.1); }
.lev04 .history-group .balloon { border-color: #61E4C6; box-shadow: 0 4px 10px rgba( 97, 228, 198, 0.1); }
.lev05 .history-group .balloon { border-color: #57B6F2; box-shadow: 0 4px 10px rgba( 87, 182, 242, 0.1); }

.observe .history-group:not(:hover) .balloon dt,
.drug    .history-group:not(:hover) .balloon dt,
.surgery .history-group:not(:hover) .balloon dt { padding-top: 15px; }
.therapy .history-group:not(:hover) .balloon dt,
.cure    .history-group:not(:hover) .balloon dt { padding-top: 5px; }

.lev01 .history-group .detail { text-shadow: 0 0 3px #9D64DF; background: #B699D7; }
.lev02 .history-group .detail { text-shadow: 0 0 3px #FB4830; background: #FB978A; }
.lev03 .history-group .detail { text-shadow: 0 0 3px #F89F0F; background: #F8BC5C; }
.lev04 .history-group .detail { text-shadow: 0 0 3px #15D7AA; background: #61E4C6; }
.lev05 .history-group .detail { text-shadow: 0 0 3px #029DFD; background: #57B6F2; }

.lev03 .history-group .balloon .lev-comment { line-height: 2.4; }

/* history-icon */
.history-icon { display: inline-block; margin: 5px 0; width: 80px; height: 36px; background: center center no-repeat; background-size: auto 36px; vertical-align: middle; }

.lev01.observe .history-icon { background-image: url("/member/images/icon-observe-lev01.svg"); }
.lev02.observe .history-icon { background-image: url("/member/images/icon-observe-lev02.svg"); }
.lev03.observe .history-icon { background-image: url("/member/images/icon-observe-lev03.svg"); }
.lev04.observe .history-icon { background-image: url("/member/images/icon-observe-lev04.svg"); }
.lev05.observe .history-icon { background-image: url("/member/images/icon-observe-lev05.svg"); }

.lev01.therapy .history-icon { background-image: url("/member/images/icon-therapy-lev01.svg"); }
.lev02.therapy .history-icon { background-image: url("/member/images/icon-therapy-lev02.svg"); }
.lev03.therapy .history-icon { background-image: url("/member/images/icon-therapy-lev03.svg"); }
.lev04.therapy .history-icon { background-image: url("/member/images/icon-therapy-lev04.svg"); }
.lev05.therapy .history-icon { background-image: url("/member/images/icon-therapy-lev05.svg"); }

.lev01.drug    .history-icon { background-image: url("/member/images/icon-drug-lev01.svg"); }
.lev02.drug    .history-icon { background-image: url("/member/images/icon-drug-lev02.svg"); }
.lev03.drug    .history-icon { background-image: url("/member/images/icon-drug-lev03.svg"); }
.lev04.drug    .history-icon { background-image: url("/member/images/icon-drug-lev04.svg"); }
.lev05.drug    .history-icon { background-image: url("/member/images/icon-drug-lev05.svg"); }

.lev01.surgery .history-icon { background-image: url("/member/images/icon-surgery-lev01.svg"); }
.lev02.surgery .history-icon { background-image: url("/member/images/icon-surgery-lev02.svg"); }
.lev03.surgery .history-icon { background-image: url("/member/images/icon-surgery-lev03.svg"); }
.lev04.surgery .history-icon { background-image: url("/member/images/icon-surgery-lev04.svg"); }
.lev05.surgery .history-icon { background-image: url("/member/images/icon-surgery-lev05.svg"); }

.lev01.cure    .history-icon { background-image: url("/member/images/icon-cure-lev01.svg"); }
.lev02.cure    .history-icon { background-image: url("/member/images/icon-cure-lev02.svg"); }
.lev03.cure    .history-icon { background-image: url("/member/images/icon-cure-lev03.svg"); }
.lev04.cure    .history-icon { background-image: url("/member/images/icon-cure-lev04.svg"); }
.lev05.cure    .history-icon { background-image: url("/member/images/icon-cure-lev05.svg"); }

.observe .history-group:hover .history-icon { width: 26px; }
.therapy .history-group:hover .history-icon { width: 34px; }
.drug    .history-group:hover .history-icon { width: 28px; }
.surgery .history-group:hover .history-icon { width: 50px; }
.cure    .history-group:hover .history-icon { width: 36px; }

/* lev-face */
.lev-face { position: absolute; left: 50%; bottom: 30px; margin: 0 0 0 -12px; width: 24px; height: 24px; background: center center no-repeat; background-size: contain; }

.lev01 .lev-face { background-image: url("/member/images/icon-face-lev01.svg"); }
.lev02 .lev-face { background-image: url("/member/images/icon-face-lev02.svg"); }
.lev03 .lev-face { background-image: url("/member/images/icon-face-lev03.svg"); }
.lev04 .lev-face { background-image: url("/member/images/icon-face-lev04.svg"); }
.lev05 .lev-face { background-image: url("/member/images/icon-face-lev05.svg"); }

/* lev-line */
.lev-line { position: relative; margin: 0; width: 144px; height: 24px; background: url("/member/images/line-lev00.svg") center center no-repeat; background-size: 128px 8px; }
.lev-line:after { content: ''; position: absolute; top: 0; right: 0; width: 24px; height: 24px; background: center center no-repeat; }

.lev01 .lev-line { background-image: url("/member/images/line-lev01.svg"); }
.lev02 .lev-line { background-image: url("/member/images/line-lev02.svg"); }
.lev03 .lev-line { background-image: url("/member/images/line-lev03.svg"); }
.lev04 .lev-line { background-image: url("/member/images/line-lev04.svg"); }
.lev05 .lev-line { background-image: url("/member/images/line-lev05.svg"); }

.lev01 .lev-line:after { right: 120px; background-image: url("/member/images/icon-face-lev01.svg"); }
.lev02 .lev-line:after { right:  90px; background-image: url("/member/images/icon-face-lev02.svg"); }
.lev03 .lev-line:after { right:  60px; background-image: url("/member/images/icon-face-lev03.svg"); }
.lev04 .lev-line:after { right:  30px; background-image: url("/member/images/icon-face-lev04.svg"); }
.lev05 .lev-line:after { right:   0px; background-image: url("/member/images/icon-face-lev05.svg"); }

/* history-modal */
.history-modal .modal-block { padding: 0; border: 2px solid #CADCEA;}
.history-modal h2 { margin: 0; padding: 20px; background: #F2F7FF; }

.history-modal th { width: 210px; background: none; }
.history-modal td strong { vertical-align: middle; }

.history-modal .history-icon { margin: 0 15px 0 0; }

.history-modal .observe .history-icon { width: 26px; }
.history-modal .therapy .history-icon { width: 34px; }
.history-modal .drug    .history-icon { width: 28px; }
.history-modal .surgery .history-icon { width: 50px; }
.history-modal .cure    .history-icon { width: 36px; }

.history-modal .lev-line { margin: 10px 0 0; }

.history-modal .modal-block.lev01 { border-color: #B699D7; box-shadow: 0 10px 30px rgba(182, 153, 215, 0.1); }
.history-modal .modal-block.lev02 { border-color: #FB978A; box-shadow: 0 10px 30px rgba(251, 151, 138, 0.1); }
.history-modal .modal-block.lev03 { border-color: #F8BC5C; box-shadow: 0 10px 30px rgba(248, 188,  92, 0.1); }
.history-modal .modal-block.lev04 { border-color: #61E4C6; box-shadow: 0 10px 30px rgba( 97, 228, 198, 0.1); }
.history-modal .modal-block.lev05 { border-color: #57B6F2; box-shadow: 0 10px 30px rgba( 87, 182, 242, 0.1); }

.history-modal .lev01 h2 { background: #F7F2FC; }
.history-modal .lev02 h2 { background: #FEF2F0; }
.history-modal .lev03 h2 { background: #FEF7EC; }
.history-modal .lev04 h2 { background: #EAFDF8; }
.history-modal .lev05 h2 { background: #EBF6FD; }

.history-modal .lev01 th,
.history-modal .lev01 td { border-color: #B699D7; }
.history-modal .lev02 th,
.history-modal .lev02 td { border-color: #FB978A; }
.history-modal .lev03 th,
.history-modal .lev03 td { border-color: #F8BC5C; }
.history-modal .lev04 th,
.history-modal .lev04 td { border-color: #61E4C6; }
.history-modal .lev05 th,
.history-modal .lev05 td { border-color: #57B6F2; }

/* nohover */
.nohover { border-bottom: 1px solid #CADCEA; }
.nohover .history-track { padding: 0; margin: 0; }
.nohover .history-line { height: 160px; }
.nohover .history-line:before,
.nohover .history-line li:before { bottom: 45px; }
.nohover .history-line:after { bottom: 36px; }

.nohover .history-group { height: 125px; }
.nohover .history-group:before { bottom: 39px; }
.nohover .history-group:after { bottom: 42px; }
.nohover .history-group .balloon { bottom: 50px; margin-left: -5px; width: 110px; height: auto; }
.nohover .history-group .balloon dt { padding: 20px 0; font-weight: bold; }
.nohover .history-group .balloon dt span {
	display: inline-block;
	margin: 0 0 0 5px;
	width: 18px;
	height: 18px;
	font-size: 13px;
	font-weight: normal;
	line-height: 18px;
	text-align: center;
	border-radius: 20px;
	box-shadow: 0 0 0 1px #333;
	vertical-align: bottom;
}
.nohover .history-group .timing { font-weight: normal !important; }

.nohover .history-group:hover .balloon { margin-left: -30px; width: 160px; }
.nohover .history-group:hover .balloon dt { padding: 10px 0 45px; }


/*-------------------------------------
	#Box
-------------------------------------*/

#Box { padding: 0 0 1px; height: 100%; min-height: 100vh; background: #F8FAFC; }
#Box main { margin: 0 0 90px; padding: 120px 0 0; }
#Box h1 { margin: 0 0 15px; }
#Box h1 img { width: 75%; max-width: 320px; }
#Box .inner { max-width: 480px; }
#Box .error { margin: 0 !important; padding: 30px 0 0; }
#Box .message.success { padding: 30px 0 0; color: #00cc82; }

#Box form { padding: 30px; }
#Box form p:not(.center) { margin: 0 0 20px; }
#Box form span { display: block; margin: 0 0 5px; text-align: left; }
#Box form button { min-width: 120px; }
#Box .dashed { margin: 0 !important; padding: 30px 0; font-size: 14px; line-height: 1; text-align: center !important; }
#Box .dashed a ~ a { display: inline-block; margin: 15px auto 0; }
#Box .note { padding: 0 0 15px; text-align: left; border-bottom: 1px dashed #CADCEA; }

#Box.mail .inner { max-width: 640px; }
#Box.mail .left { margin: 20px 30px; }


/*-------------------------------------
	MypageTop
-------------------------------------*/

/* record */
#Record .inner,
#Info .inner,
.record.activity,
.record dl,
.record .column { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.record.profile { margin-right: 20px; width: 31%; width: calc(33.333% - 20px); }
.record.activity { margin-left: 20px; width: 65%; width: calc(66.666% - 20px); overflow: hidden; }
.record.activity h3 { width: 100%; }
.record.activity h3 + .right { margin-bottom: 0; width: 100%; max-height: 56px; }

#Record .healthcare { margin: 0; width: 100%; }
#Record .healthcare h3 { border: none; }

.record figure { padding: 20px; text-align: center; }
.record dl { margin: 0; }
.record dt,
.record dd { padding: 20px 0 20px 20px; width: 40%; width: 120px; color: #333; border-top: 1px dashed #CADCEA; }
.record dd { padding-right: 20px; width: 60%; width: calc(100% - 120px); color: #666; }

.record .column { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; width: 100%; height: 100%; }
.record .column:before { content: ''; position: absolute; top: 0; left: 50%; margin: 0 0 0 -1px; width: 1px; height: 100%; background: #CADCEA; }
.record .column dl { width: 50%; }
.record .column > dl:last-child dt:first-of-type,
.record .column > dl:last-child dd:first-of-type { border: none; }
.record .column dt,
.record .column dd { width: 100%; }
.record .column dd { margin: -10px 0 0; padding: 0 20px 20px 20px; line-height: 1.4; border: none; }

.record .column dt.data { width: 40%; border: none; }
.record .column dd.data { margin: 0; padding: 20px; width: 60%; }
.record .column dd.data dl { width: 100%; border: none; }
.record .column dd.data dt,
.record .column dd.data dd { margin: 0; padding: 10px 0; width: 50%; width: 90px; border: none; }
.record .column dd.data dd { width: calc(100% - 90px); }

.record .column dt.half { width: 70%; width: 220px; }
.record .column dd.half { margin: 0; padding: 20px 20px 20px 10px; width: 30%; width: calc(100% - 220px); border-top: 1px dashed #CADCEA; }

.record .leveled { position: relative; padding-right: 170px; }
.record .leveled:before,
.record .leveled:after { content: ''; position: absolute; top: 18px; right: 20px; width: 144px; height: 24px; background: url("/member/images/line-lev00.svg") center center no-repeat; }
.record .leveled:after { width: 24px; background-image: none; }
.record .leveled + dt { padding: 0 20px 20px; border: none; }

.record .leveled.lev01:before { background-image: url("/member/images/line-lev01.svg"); }
.record .leveled.lev02:before { background-image: url("/member/images/line-lev02.svg"); }
.record .leveled.lev03:before { background-image: url("/member/images/line-lev03.svg"); }
.record .leveled.lev04:before { background-image: url("/member/images/line-lev04.svg"); }
.record .leveled.lev05:before { background-image: url("/member/images/line-lev05.svg"); }

.record .leveled.lev01:after { right: 140px; background-image: url("/member/images/icon-face-lev01.svg"); }
.record .leveled.lev02:after { right: 110px; background-image: url("/member/images/icon-face-lev02.svg"); }
.record .leveled.lev03:after { right:  80px; background-image: url("/member/images/icon-face-lev03.svg"); }
.record .leveled.lev04:after { right:  50px; background-image: url("/member/images/icon-face-lev04.svg"); }
.record .leveled.lev05:after { right:  20px; background-image: url("/member/images/icon-face-lev05.svg"); }

/* Info */
#Info section { width: 100%; }
#Info section:last-child { margin-bottom: 0; }
#Info .half { margin: 0 20px 40px 0; width: 50%; width: calc(50% - 20px); }
#Info .half + .half { margin: 0 0 40px 20px; }
#Info section .center { padding: 20px 0; }

#Info .graph { padding: 20px 15px 15px; }
#Info .graph canvas { width: 100%; height: auto; }

.allcase table th,
.allcase table td { padding: 10px 20px; width: auto; font-size: 16px; font-weight: normal; }
.allcase table td { white-space: nowrap; }

/* nodata */
.nodata { padding: 60px 20px; width: auto; text-align: center; }
.nodata figure { margin: 0 0 30px; padding: 0; }

.column .nodata { position: relative; width: 100%; height: 100%; background: #FFF; }
.healthcare .nodata { border-top: 1px solid #CADCEA; }


/*-------------------------------------
	Desease
-------------------------------------*/

#Desease .nodata { padding: 40px; }
#Desease .note { font-size: 15px; }
#Desease .nodata + .note { margin: -20px 0 0; padding: 0 30px 20px; text-align: left; }
#Desease .left { padding: 20px; }

#Desease .history-name { padding: 11px 170px 11px 20px; }
#Desease .history .history-track ~ .dashed { margin: 0; padding: 20px; border-top-style: solid; }
#Desease .history ~ .note { padding: 0 20px 20px; text-align: left; }


/*-------------------------------------
	Search
-------------------------------------*/

#Search.form form { padding: 30px 20px; border: none; }
#Search.form dl { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 0 0 0 20px; }
#Search.form dt { padding-right: 10px; width: 140px; font-weight: normal; }
#Search.form dd { padding-right: 20px; width: calc(33.33% - 140px); }
#Search.form dd.medium { width: calc(66.66% - 140px); }
#Search.form dd.long { width: calc(100% - 140px); }
#Search.form dd.medium .select_box { min-width: 0; }
#Search.form dt.required:after { right: 15px; }
#Search.form dt.required + dd.long { padding-right: 160px; }
#Search.form dt span { display: inline-block; color: #999; font-size: 14px; font-weight: normal; }
#Search.form dd .select_box { min-width: 100%; }
#Search.form .acd { position: absolute; top: 95px; right: 40px; }
#Search.form .acd-content { padding-top: 20px; border-top: 1px dashed #CADCEA; }
#Search.form .large { margin: 10px 0 0 ; }

#Average,
#Average .acd-scroll { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#Average h3,
#Average .history,
#Average .all,
#Average .acd,
#Average .acd-content,
#Average .acd-scroll { width: 100%; }

#Average h3 span { display: inline-block; font-size: 18px; font-weight: normal; }
#Average .acd { padding: 20px; border: none; border-radius: 0; }
#Average .acd.open { border-bottom: 1px solid #CADCEA; }
#Average .graph { padding: 0 20px 10px; }
#Average .half { display: inline-block; width: 50%; border-right: 1px solid #CADCEA; border-bottom: 1px solid #CADCEA; }
#Average .half ~ .half { border-right: none; }
#Average .fourth { padding: 0 20px 20px; width: 25%; border-right: 1px solid #CADCEA; }
#Average .fourth:last-child { border: none; }

#Graphs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#Graphs dt { padding: 10px 20px; width: 250px; }
#Graphs dd { padding: 0 20px 0 0; width: calc(100% - 250px); }

#List { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#List li { width: 20%; }
#List li a { display: block; padding: 30px 20px; height: 100%; color: #333; font-size: 14px; line-height: 1.6; text-align: center; }
#List li figure img { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
#List li figure { margin: 0 auto 5px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
#List li a .btn { margin: 10px auto 0; }

#List li a:hover { text-decoration: none; background: #F8FAFC; }
#List li a:hover figure img { -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); }
#List li a:hover .btn { color: #FFF !important; background: #007BC7; }

.paging,
.paging .pager { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid #CADCEA; }
.paging ~ .paging { border: none; border-top: 1px solid #CADCEA; }
.paging .number { padding: 20px; width: 100%; text-align: left; }
.paging .number strong { margin: 0 3px; color: #007BC7; font-size: 18px; }
.paging .number span { margin: 0 3px; color: #007BC7; }

.paging .pager { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 100%; border-bottom: none; list-style: none; padding: 0; }
.paging .pager li { border-left: 1px solid #CADCEA; }
.paging .pager a { display: block; min-width: 68px; height: 100%; line-height: 68px; text-align: center; text-decoration: none !important; opacity: .8; }
.paging .pager a:hover { background: #F8FAFC; opacity: 1; }
.paging .pager a.disabled,
.paging .pager a.current { color: #999; background: #FFF !important; cursor: default; opacity: 1; }
.paging .pager a.current { color: #007BC7; font-weight: bold; background: #F2F7FF !important; }
.paging .pager img { height: 20px; vertical-align: middle; opacity: .8; }
.paging .pager li:first-child img { transform: scale(-1,1); }
.paging .pager a:not(.disabled):hover img { opacity: 1; }
.paging .pager a.disabled img { opacity: .2; }


/*-------------------------------------
	Search
-------------------------------------*/

#NoPage .inner { max-width: 600px; }
#NoPage section { padding: 40px; }