@charset "utf-8";

/* ========================================================
	simulator.css => ライフプランジェネレーターページ用css
======================================================== */

html,
body {
	min-width: 1200px;
	height: 100%;
}
body {
	background: #f18772;
}

select[disabled] {
	opacity: 0.6;
}


.box_blank.pr20 {
	padding-right: 20px;
}



/* h1
============================================================================================================ */
body > h1 {
	position: relative;
	margin-bottom: -24px;
	padding-top: 18px;
	text-align: center;
	z-index: 3;
}


/* footer
============================================================================================================ */
body > footer {
	padding: 30px;
	text-align: center;
}
body > footer small {
	font-size: 13px;
	font-size: 1.3rem;
	color: #fff;
}



/* firstSet
============================================================================================================ */
#firstSet {
	position: relative;
	z-index: 580;
}
#firstSet > div {
}
#firstSet .note {
	margin: 18px 20px;
	font-size: 14px;
	font-size: 1.4rem;
	padding: 10px;
	border: 3px solid #f9e1d6;
	text-align: center;
}
#firstSet .note li:before {
	content: "※";
}
#firstSet .block dl {
	padding: 18px 90px;
}
#firstSet .block dl + dl {
	border-top: 1px solid #e3dfd7;
}
#firstSet .block dt {
	float: left;
}
#firstSet .block dd {
	padding-left: 9em;
}
#firstSet .block dd label {
	padding-right: 2em;
}
#firstSet .block dd div {
	display: none;
	margin-top: 5px;
}


/* question
============================================================================================================ */
#question {
	display: none;
}
.question_box {
	position: absolute;
	left: 50%;
	margin-left: -320px;
	width: 640px;
	padding: 10px;
	background-color: #74c2d8;
	border-radius: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 16px;
	font-size: 1.6rem;
	z-index: 500;
}
.question_box:after {
	content: "";
	position: absolute;
	left: 50%;
}
.question_box:after {
	content: "";
	position: absolute;
	left: 50%;
	margin-left: -8px;
	border-style: solid;
}
.question_box.b:after {
	bottom: -8px;
	border-width: 8px 8px 0 8px;
	border-color: #74c2d8 transparent transparent transparent;
}
.question_box.t:after {
	top: -8px;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent #74c2d8 transparent;
}

.question_box > div {
	background: #fbfaf3 url(../images/ico_q.png) no-repeat;
	border-radius: 4px;
}
.question_box h1 {
	display: table;
	width: 100%;
	height: 130px;
	border-bottom: 2px solid #e3dfd7;
	font-weight: normal;
	font-size: 25px;
	font-size: 2.5rem;
	line-height: 1.6;
}
.question_box h1 span {
	display: table-cell;
	padding-top: 10px;
	vertical-align: middle;
	text-align: center;
}
.question_box .cont {
	margin: 20px 60px;
}
.question_box .cont.select {
	text-align: center;
}
.question_box .cont.select select {
	text-align: center;
	padding: 5px 10px;
}
.question_box .cont dt {
	float: left;
}
.question_box .cont dd {
	position: relative;
	margin-left: 7em;
}
.question_box .cont dd.koikana .logo {
	position: absolute;
	right: -5px;
	bottom: -5px;
}
.question_box .cont .box_link.l {
	width: 260px;
	margin-top: 10px;
	padding: 8px 0;
	font-size: 15px;
	font-size: 1.5rem;
}
.question_box .btn {
	position: relative;
	border-top: 2px solid #e3dfd7;
	padding: 35px 0;
	font-size: 15px;
	font-size: 1.5rem;
}
.question_box .btn a {
	width: 260px;
	margin: 0 auto;
}
.question_box h1 + .btn {
	border-top-width: 0;
}
.question_box .btn .skip {
	position: absolute;
	right: 30px;
	top: 50%;
	width: auto;
	margin-top: -12px;
	padding-right: 12px;
	color: #f18772;
	text-decoration: none;
}
.question_box .btn .skip span {
	position: relative;
	display: inline-block;
}
.question_box .btn .skip span:after {
	content: "";
	position: absolute;
	right: -12px;
	top: 50%;
	margin-top: -5px;
	border-style: solid;
	border-width: 5px 0 5px 6px;
	border-color: transparent transparent transparent #f18772;
}
.question_box .btn .skip:hover span {
	text-decoration: underline;
}

.question_box .notes,
.addbox .note {
	position: relative;
	top: -10px;
	margin: 10px 10px 0;
	padding: 10px;
	border: 3px solid #f9e1d6;
	font-size: 14px;
	font-size: 1.4rem;
	text-align: center;
}
.addbox .note {
	top: 0;
	margin-left: 0;
	margin-right: 0;
}

/* simulator
============================================================================================================ */
.simulator {
	position: relative;
}
.simulator.start:after {
	content: "";
	position: absolute;
	top: -20px;
	bottom: -20px;
	right: 0;
	left: 0;
	border-radius: 5px;
	background-color: rgba(68,66,62,0.5);
	z-index: 200;
}

/* simulatorContainer
============================================================================================================ */
#simulatorContainer {
	margin: 0 10px;
	padding: 60px 40px;
	background-color: #fbfaf3;
	border-radius: 5px;
	font-size: 16px;
	font-size: 1.6rem;
}

/* header
------------------------------------------------------------- */
#simulatorContainer header {
	position: relative;
	width: 1100px;
	margin: 0 auto 54px;
	text-align: center;
}
#simulatorContainer header ul {
	position: absolute;
	right: 0;
	top: -20px;
	width: 300px;
	text-align: left;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.7;
}
#simulatorContainer header ul a {
	display: block;
	position: relative;
	padding-left: 1.2em;
	text-decoration: none;
}
#simulatorContainer header ul a:before {
	content: "●";
	position: absolute;
	top: 0;
	left: 0;
	color: #f18772;
}
#simulatorContainer header ul a:hover {
	text-decoration: underline;
}
#simulatorContainer header p {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 300px;
	font-size: 15px;
	font-size: 1.5rem;
}
#simulatorContainer header p a {
	padding: 7px 0 5px 40px;
	background-repeat: no-repeat;
	background-position: 10px;
	background-image: url(../images/ico_use.png);
}

/* print
------------------------------------------------------------- */
#print {
	position: relative;
	margin: 40px auto 0;
	text-align: center;
}
#print.disable:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(251,250,243,0.7);
	z-index: 10;
}
#print button,
#print a {
	display: inline-block;
	width: 340px;
	margin: 0 5px;
	padding-bottom: 10px;
	font-size: 20px;
	font-size: 2rem;
	line-height: 1.5;
}

/* head
------------------------------------------------------------- */
#simulatorContainer .head {
	position: relative;
	margin-bottom: 12px;
	background-color: #fdf2f0;
	border-radius: 5px 5px 0 0;
}
#simulatorContainer .head:after {
	content: "";
	display: block;
	height: 8px;
	background-color: #f18772;
	border-radius: 4px;
}

#simulatorContainer .head p {
	position: relative;
	top: -15px;
	width: 288px;
	margin: 0 auto 60px;
	background-color: #fff;
	border-radius: 30px;
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 30px;
	color: #f18772;
}

#simulatorContainer .head ul {
	display: table;
	table-layout: fixed;
	width: 100%;
	padding: 0 5px 0 5px;
	font-size: 15px;
	font-size: 1.5rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#simulatorContainer .head ul > li {
	display: table-cell;
}
#simulatorContainer .head li div {
	position: relative;
}
#simulatorContainer .head .txt {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	text-align: center;
}
#simulatorContainer .head .memori {
	display: block;
	width: 0;
	height: 5px;
	margin: auto;
	border-left: 1px solid #f18772;
}
#simulatorContainer .head .arrow {
	position: relative;
}
#simulatorContainer .head .arrow img {
	position: absolute;
	bottom: 25px;
	cursor: pointer;
}

#simulatorContainer[data-limit="100"] .head ul > li.p2 {
	display: none;
}


@media screen and (min-width: 1600px) {
	#simulatorContainer[data-limit="100"] .head ul > li.p2 {
		display: block;
	}
}


/* c_btn
------------------------------------------------------------- */
.c_btn {
	position: absolute;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	background-color: #72cae3;
	border: none;
	border-radius: 100%;
	-webkit-transition: all 0.15s;
	-o-transition: all 0.15s;
	transition: all 0.15s;
}
.c_btn:before,
.c_btn:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
}
.c_btn:before {
	width: 12px;
	border-top: 2px solid #fff;
	margin: -1px 0 0 -6px;
}
.c_btn:after {
	height: 12px;
	border-left: 2px solid #fff;
	margin: -6px 0 0 -1px;
}
.c_btn.del:before,
.c_btn.del:after {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
a.c_btn:hover,
button.c_btn:hover,
a:hover .c_btn {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}



/* contents
------------------------------------------------------------- */
#contents {
	position: relative;
}
#contents .inner {
	position: relative;
	overflow: hidden;
	padding: 0 0 0 199px;
	background-color: #ffffff;
	border: 5px solid #dcd8d0;
	border-radius: 4px;
}
#contents .b_head {
	position: absolute;
	top: 50px;
	left: 0;
	width: 200px;
	border-right: 1px solid #f5d9d1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 10;
}
#contents .t_head {
	position: absolute;
	top: 0;
	height: 50px;
	background-color: #f4f3f1;
	border-bottom: 2px solid #f6c0b2;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 20;
}
#contents .t_head.b_head {
	padding-top: 12px;
	z-index: 30;
}

#contents .t_table {
	display: table;
	width: 100%;
	table-layout: fixed;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
#contents .t_table > * {
	position: relative;
	display: table-cell;
	text-align: center;
	border-left: 1px solid #ebeae7;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#contents .t_age .t_table > * {
	height: 48px;
	padding-top: 12px;
}
#contents .t_age {
	background-color: #f4f3f1;
	border-bottom: 2px solid #f6c0b2;
}

#contents .body .line {
	position: relative;
	z-index: 1;
}
#contents .body .line.パートナー,
#contents .body .line.パートナーの父親,
#contents .body .line.パートナーの母親 {
	background-color: rgba(241,135,114,0.1);
}
#contents .t_table .s_age {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 36px;
	padding-top: 5px;
	background-color: rgba(220,216,208,.2);
	font-size: 15px;
	font-size: 1.5rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#contents .body .line.パートナー .s_age,
#contents .body .line.パートナーの父親 .s_age,
#contents .body .line.パートナーの母親 .s_age {
	background-color: rgba(241,135,114,0.2);
}

#contents .line .item.ablemove .text {
	cursor: pointer;
}
#contents .line .item.ablemove .text:hover {
	background-color: #e3f4f9;
}


#contents .b_head li,
#contents .body .line {
	height: 60px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#contents .body .line.has_age {
	height: 96px;
}
#contents .body .line .current_age {
	background-color: rgba(241,135,114,0.1);
}
#contents .b_head li,
#contents .body .line .t_table {
	border-top: 0 solid #f6c0b2;
}
#contents .b_head li + li,
#contents .body .line + .line .t_table {
	border-top-width: 2px;
}
#contents .body .line .t_table {
	height: 100%;
	position: relative;
	z-index: 3;
}

#contents .b_head li {
	position: relative;
}
#contents .b_head a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 15px 0 0 12px;
	background-color: #fef9f7;
	text-decoration: none;
	color: #4c3c26;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#contents .b_head a .d {
	display: inline-block;
	margin: 0 -0.1em;
}
#contents .b_head.non_btn li:after,
#contents .b_head li.non_btn:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0);
	z-index: 5;
}


#contents .b_head a .c_btn {
	right: 10px;
	top: 15px;
	background-color: #f18772;
}
#contents .b_head a[data-cat=パートナー],
#contents .b_head a[data-cat=パートナーの父親],
#contents .b_head a[data-cat=パートナーの母親] {
	background-color: #fdede9;
}

#contents .b_head a:hover {
	background-color: #fbe2dc;
}
/*
#contents *.パートナーの父親,
#contents *.パートナーの母親 {
	display: none;
}
#simulatorContainer.has_partner *.パートナーの父親,
#simulatorContainer.has_partner *.パートナーの母親 {
	display: block;
}*/


.t_age {
	position: relative;
/*	top: 100px;*/
}

#contents.lookback .b_head a .c_btn {
	display: none;
}



#contents .body {
	position: relative;
	width: 5100px;
	overflow: hidden;
}
#simulatorContainer[data-limit="60"] #contents .body {
	width: 2700px;
}
#simulatorContainer[data-limit="80"] #contents .body {
	width: 3900px;
}
#simulatorContainer[data-limit="60"] li[data-age="60"] ~ li {
	display: none;
}
#simulatorContainer[data-limit="80"] li[data-age="80"] ~ li {
	display: none;
}


#simulatorContainer[data-limit="60"] .head ul > li[data-rate="60"] ~ li {
	display: none;
}
#simulatorContainer[data-limit="80"] .head ul > li[data-rate="80"] ~ li {
	display: none;
}



/* item
------------------------------------------------------------- */
#contents .item {
	position: relative;
	display: inline-block;
	margin: 5px 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	white-space: nowrap;
	z-index: 8;
}
#contents .item .text {
	background-color: #fff;
	border: 2px solid #72cae3;
	color: #72cae3;
	padding: 8px 20px;
	line-height: 18px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	-webkit-transition: background 0.2s, color 0.2s;
	-o-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}
#contents .item.abs {
	position: absolute;
	margin: 0;
	z-index: 6;
}
#contents .item.center {
	position: absolute;
	left: 50%;
}
#contents .item.abs.move {
	z-index: 500 !important;
}
#contents .item.bg .text {
	color: #fff;
	background-color: #72cae3;
}
#contents .line .item.ablemove.bg .text:hover {
	background-color: #9ddaeb;
}
#contents .item.left .text {
	text-align: left;
}
#contents .line .item[data-line="1"] {
	z-index: 8 !important;
}
#contents .line .item[data-line="2"] {
	z-index: 9 !important;
}
#contents .line .item[data-line="3"] {
	z-index: 10 !important;
}
#contents .line .item[data-line="4"] {
	z-index: 11 !important;
}
#contents .line .item[data-line="5"] {
	z-index: 12 !important;
}
#contents .line .item[data-line="6"] {
	z-index: 13 !important;
}
#contents .line .item[data-line="7"] {
	z-index: 14 !important;
}
#contents .line .item[data-line="8"] {
	z-index: 15 !important;
}
#contents .line .item[data-line="9"] {
	z-index: 16 !important;
}
#contents .line .item[data-line="10"] {
	z-index: 17 !important;
}

#contents .item.txt_only .text {
	border: 0;
	color: #000;
	text-align: left;
}

#contents .item.point .text:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	margin-left: -6px;
	border-style: solid;
	border-width: 6px 6px 0 6px;
	border-color: #72cae3 transparent transparent transparent;
}

#contents .item.bg[data-type=school] .text {
	padding-right: 1px;
	padding-left: 1px;
}

#contents .item .memo {
	position: absolute;
	bottom: 39px;
	right: -20px;
	padding: 2px 8px;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.4;
	background-color: #f18772;
	color: #fff;
	text-align: center;
}
#contents .item .memo:after {
	content: "";
	position: absolute;
	right: 25px;
	bottom: -6px;
	border-style: solid;
	border-width: 6px 6px 0 6px;
	border-color: #f18772 transparent transparent transparent;
	-webkit-transition: border 0.15s;
	-o-transition: border 0.15s;
	transition: border 0.15s;
}
#contents .item .memo.birth {
	display: block;
	left: 50%;
	right: auto;
}
#contents .item .memo.birth:after {
	left: 50%;
	margin-left: -6px;
	right: auto;
}

.item .memo {
	display: none;
}
.item a.memo {
	text-decoration: none;
}
#contents .item a.memo:hover {
	background-color: #f5ab9d;
}
#contents .item a.memo:hover:after {
	border-color: #f5ab9d transparent transparent transparent;
}
.line .item .memo {
	display: block;
}
.line .item .notes ~ .memo {
	display: none;
}

.lookback .item .memo {
	opacity: 0;
}

.view_contents .line .item .memo {
	-moz-animation: mov_memo 1.6s ease 0s infinite normal;
	-webkit-animation: mov_memo 1.6s ease 0s infinite normal;
	-o-animation: mov_memo 1.6s ease 0s infinite normal;
	-ms-animation: mov_memo 1.6s ease 0s infinite normal;
	animation: mov_memo 1.6s ease 0s infinite normal;
}
/*
.view_contents .line .item .notes {
	-moz-animation: none;
	-webkit-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
}*/
@-moz-keyframes mov_memo {
	0% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	40% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	50% {
		-webkit-transform: translate(0, -5px);
		-ms-transform: translate(0, -5px);
		-o-transform: translate(0, -5px);
		transform: translate(0, -5px);
	}
	70% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	80% {
		-webkit-transform: translate(0, -5px);
		-ms-transform: translate(0, -5px);
		-o-transform: translate(0, -5px);
		transform: translate(0, -5px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}
@-webkit-keyframes mov_memo {
	0% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	50% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	60% {
		-webkit-transform: translate(0, -5px);
		-ms-transform: translate(0, -5px);
		-o-transform: translate(0, -5px);
		transform: translate(0, -5px);
	}
	70% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	80% {
		-webkit-transform: translate(0, -5px);
		-ms-transform: translate(0, -5px);
		-o-transform: translate(0, -5px);
		transform: translate(0, -5px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}
@-o-keyframes mov_memo {
	0% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	40% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	50% {
		-webkit-transform: translate(0, -5px);
		-ms-transform: translate(0, -5px);
		-o-transform: translate(0, -5px);
		transform: translate(0, -5px);
	}
	70% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	80% {
		-webkit-transform: translate(0, -5px);
		-ms-transform: translate(0, -5px);
		-o-transform: translate(0, -5px);
		transform: translate(0, -5px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}
@-ms-keyframes mov_memo {
	0% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	40% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	50% {
		-webkit-transform: translate(0, -5px);
		-ms-transform: translate(0, -5px);
		-o-transform: translate(0, -5px);
		transform: translate(0, -5px);
	}
	70% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	80% {
		-webkit-transform: translate(0, -5px);
		-ms-transform: translate(0, -5px);
		-o-transform: translate(0, -5px);
		transform: translate(0, -5px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}
@keyframes mov_memo {
	0% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	40% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	50% {
		-webkit-transform: translate(0, -5px);
		-ms-transform: translate(0, -5px);
		-o-transform: translate(0, -5px);
		transform: translate(0, -5px);
	}
	70% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	80% {
		-webkit-transform: translate(0, -5px);
		-ms-transform: translate(0, -5px);
		-o-transform: translate(0, -5px);
		transform: translate(0, -5px);
	}
	100% {
		-webkit-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}




#contents .item.ui-resizable .resize_handle {
	position: absolute;
	bottom: -8px;
	right: -12px;
	width: 24px;
	height: 24px;
	border: 2px solid #72cae3;
	background-color: #fff;
	border-radius: 100%;
	cursor: col-resize;
}
#contents .item.ui-resizable .resize_handle:before,
#contents .item.ui-resizable .resize_handle:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -6px;
	border-style: solid;
}
#contents .item.ui-resizable .resize_handle:before {
	margin-left: -7px;
	border-width: 6px 6px 6px 0;
	border-color: transparent #72cae3 transparent transparent;
}
#contents .item.ui-resizable .resize_handle:after {
	margin-left: 1px;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent #72cae3;
}








/* mov_hint
------------------------------------------------------------- */
.mov_hint {
	position: absolute;
	width: 100px;
	height: 10px;
	margin-top: -5px;
	background-color: #474644;
	z-index: 400;
}
.mov_hint:after {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -11px;
	border-style: solid;
}
.mov_hint.l:after {
	left: -8px;
	border-width: 11px 12px 11px 0;
	border-color: transparent #474644 transparent transparent;
}
.mov_hint.r:after {
	right: -8px;
	border-width: 11px 0 11px 12px;
	border-color: transparent transparent transparent #474644;
}
.mov_hint.l {
	margin-left: -100px;
}

.mov_hint_title {
	position: absolute;
	padding: 3px 15px;
	background-color: #474644;
	font-size: 16px;
	font-size: 1.6rem;
	color: #fff;
	z-index: 400;
}
.mov_hint_title:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	margin-left: -6px;
	border-style: solid;
	border-width: 6px 6px 0 6px;
	border-color: #474644 transparent transparent transparent;
}

.mov_hint_title.add_hint {
	top: 20px;
	left: 180px;
	padding-left: 5px;
	padding-right: 5px;
}

/* cWrap
------------------------------------------------------------- */
#cWrap {
	position: relative;
}

/* addbox
------------------------------------------------------------- */
.addol {
	position: absolute;
	left: 0;
	right: 0;
	height: 0;
	background-color: #44423e;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	z-index: 30;
}
.addol.hide {
	height: 0 !important;
}
.addol.olt {
	top: 55px;
}
.addol.olb {
	bottom: 0;
}

.addbox {
	position: absolute;
	left: 50%;
	width: 700px;
	margin-left: -350px;
	padding: 10px;
	background-color: #74c2d8;
	border-radius: 4px;
	text-align: center;
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	z-index: 40;
}
.addbox:after {
	content: "";
	position: absolute;
	left: 50%;
	margin-left: -8px;
	border-style: solid;
}
.addbox.b:after {
	bottom: -8px;
	border-width: 8px 8px 0 8px;
	border-color: #74c2d8 transparent transparent transparent;
}
.addbox.t:after {
	top: -8px;
	border-width: 0 8px 8px 8px;
	border-color: transparent transparent #74c2d8 transparent;
}

.addbox .close {
	right: 20px;
	top: 20px;
}

.addbox > div {
	border-radius: 3px;
	background-color: #fbfaf3;
}
.addbox .txt {
	padding: 25px 0;
	border-bottom: 2px solid #e3dfd7;
	font-size: 20px;
	font-size: 2rem;
	line-height: 1.3;
}
.addbox .txt .note {
	margin-top: 15px;
	font-size: 15px;
	font-size: 1.5rem;
}
.addbox .items {
	padding: 15px 10px 10px;
}
.addbox .items .item {
	position: relative;
	z-index: 5;
}

/* other */
.addbox .other {
	margin: 20px 10px 25px;
	padding-right: 3em;
	color: #72cae3;
}
.addbox .other > div {
	position: relative;
	display: inline-block;
}
.addbox .other input {
	width: 220px;
	margin-left: 10px;
	background-color: #fff;
	border: 2px solid #72cae3;
	color: #72cae3;
	padding: 5px 40px 5px 8px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: middle;
}
.addbox .other .c_btn {
	top: 50%;
	right: 6px;
	margin-top: -13px;
}

.item.move {
	cursor: move;
}

.item .c_btn {
	width: 20px;
	height: 20px;
	right: -8px;
	top: -8px;
	background-color: #000;
}

.parent_disabled .item {
	display: none !important;
}


/* memo
============================================================================================================ */
#memo {
	display: none;
}
.memo_box {
	position: absolute;
	width: 330px;
	padding: 5px;
	background-color: #f18772;
	border-radius: 5px;
	font-size: 16px;
	font-size: 1.6rem;
	z-index: 600;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.memo_box > div {
	padding: 20px 15px 15px;
	background-color: #fbfaf3;
	border-radius: 4px;
}
.memo_box > div > * + * {
	margin-top: 15px;
}
.memo_box .links li + li {
	margin-top: 10px;
}
.memo_box .close {
	position: absolute;
	right: 10px;
	top: 10px;
	background-color: #f18772;
	cursor: pointer;
}

#yakushimaruMemo,
#yakushimaruMemo2 {
	position: absolute;
	left: 249px;
	top: 9px;
	width: 42px;
	height: 42px;
	overflow: visible;
}
#yakushimaruMemo .memo,
#yakushimaruMemo2 .memo {
	position: absolute;
	bottom: 39px;
	width: 50px;
	left: 50%;
	margin-left: -25px;
	padding: 2px 0;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.4;
	background-color: #f18772;
	color: #fff;
	text-align: center;
	z-index: 6;
	-webkit-transition: background 0.15s;
	-o-transition: background 0.15s;
	transition: background 0.15s;
}
#yakushimaruMemo .memo:after,
#yakushimaruMemo2 .memo:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	margin-left: -6px;
	border-style: solid;
	border-width: 6px 6px 0 6px;
	border-color: #f18772 transparent transparent transparent;
	-webkit-transition: border 0.15s;
	-o-transition: border 0.15s;
	transition: border 0.15s;
}
#yakushimaruMemo:hover .memo,
#yakushimaruMemo2:hover .memo {
	background-color: #f5ab9d;
}
#yakushimaruMemo:hover .memo:after,
#yakushimaruMemo2:hover .memo:after {
	border-color: #f5ab9d transparent transparent transparent;
}
.view_contents #yakushimaruMemo .memo,
.view_contents #yakushimaruMemo2 .memo {
	-moz-animation: mov_memo 1.6s ease 0s infinite normal;
	-webkit-animation: mov_memo 1.6s ease 0s infinite normal;
	-o-animation: mov_memo 1.6s ease 0s infinite normal;
	-ms-animation: mov_memo 1.6s ease 0s infinite normal;
	animation: mov_memo 1.6s ease 0s infinite normal;
}


/* after_color
============================================================================================================ */
.after_color {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
/*	background-color: rgba(114, 202, 227, 0.15);*/
	background-color: #eaf7fb;
	z-index: -1;
}
.line .bar {
	position: absolute;
	height: 10px;
	background-color: #72cae3;
	z-index: 5;
}