@charset "UTF-8";

/*-----------------------------------------
 Common
-----------------------------------------*/
body {
	width: 100%;
  font-family: 'Lato', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "Noto Sans JP", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-feature-settings: "palt";
  color: #333;
	overflow-x: hidden;
}
img { max-width: 100%; max-height: 100%; vertical-align: top;}
a   { color: #333;}

.wrapper { width: 100%; min-width: auto; background: #fff;}
.container { width: 1200px; margin: 0 auto;}
.pane-contents .container { width: 1200px; margin: 0 auto; display: flex; justify-content: space-between;}
.page-top .pane-contents .container { width: 100%; display: block;}
.page-topic .pane-contents .container { width: 1200px; margin: 50px auto 0; display: flex; justify-content: space-between;}
.pane-main { width: 1200px; margin: 0 auto;}
.pane-left-menu + .pane-main { width: 900px; margin: 0;}
.pane-left-menu { width: 240px; margin: 0;}
.pane-right-menu { width: 100%; margin-top: 80px;}
.pane-topic-path { background-color: #fff;}
.pane-order-contents { border: none;}
.pane-landingpage-contents { border: none; background: none;}

p[class$='--message'] { margin-bottom: 15px; font-size: 16px;}

/*-----------------------------------------
 Title
-----------------------------------------*/
h1, .h1 { padding: 16px 0; margin: 0 0 20px; border: none; font-size: 32px; font-weight: 500; text-align: center;}
h2, .h2 { padding: 0; margin: 0 0 20px; border: none; font-size: 22px; font-weight: 500;}
h3, .h3 { padding: 0; margin: 0 0 20px; border: none; font-size: 18px; font-weight: bold;}
h4, .h4 { padding: 0; margin: 0 0 10px; border: none; font-size: 16px; font-weight: bold;}
h5, .h5 { font-size: 14px; font-weight: bold;}
h6, .h6 { font-size: 14px; font-weight: 500;}

h2.block-top-title { padding: 0; margin: 0 0 30px; border: 0; font-size: 34px; font-weight: 700; text-align: center; line-height: 1.0; letter-spacing: 0.1em;}
h2.block-top-title span { margin: 10px 0 0 0; font-size: 13px; font-weight: 400; text-align: center; line-height: 1.5; letter-spacing: 0.05em; display: block;}
h2.block-top-title .color { color: #BC4C4C;}

/*-----------------------------------------
 Price
-----------------------------------------*/
.price { font-weight: 700; color: #333; letter-spacing: 1px;}
.price .yen { font-size: 12px; font-weight: 400; letter-spacing: 0;}
.price::after,
.default-price::after { content: "（税込）"; font-size: 12px; font-weight: 400; letter-spacing: 0;}

[class$=price] .net,
.net-price,
.default-net { display: none;}
.net::after,
.net-price::after,
.default-net::after { content: "（税抜）"; font-size: 12px; font-weight: 400; letter-spacing: 0;}
.default-price { font-size: 12px; font-weight: 400; text-decoration: none; color: #999999;}

.block-goods-price--on-sales-comment { color: #BC4C4C;}

/*-----------------------------------------
 Input
-----------------------------------------*/
input[type="checkbox"] { width: 21px; height: 21px; margin-right: 8px;}
input[name="pwd_display"] { margin-top: -5px;}
.page-estimate input[name="pwd_display"] { margin-top: 0px;}

input,
button,
select,
textarea { font-size: 16px; font-family: inherit; line-height: inherit;}

input,
button,
textarea { -moz-appearance: none; -webkit-appearance: none; appearance: none;}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="number"],
select,
option   { max-width: 100%; min-height: 50px; padding: 4px 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; box-sizing: border-box;}
textarea { max-width: 100%; min-height: 50px; padding: 4px 10px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; box-sizing: border-box;}
select   { height: 50px; padding: 0 10px; -moz-appearance: menulist; -webkit-appearance: menulist; appearance: menulist; line-height: 1.0;}

.agreebody {}
.textarea { max-width: 100%; height: 280px; padding: 20px 40px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; font-size: 16px; box-sizing: border-box; overflow-y: scroll;}
.textarea #kiyaku h1 { padding: 0; text-align: left;}
.textarea #kiyaku ul li { border: none;}

/* radio */
input[type="radio"] { width: 24px; height: 24px; margin-right: 10px; margin-bottom: 3px; border: #CCC 2px solid; -webkit-border-radius: 24px; border-radius: 24px; outline: 0; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background: #fff; position: relative; transition: 0.3s;}
input[type="radio"]:before { transition: 0.3s;}
input[type="radio"]:checked { border: #6e6a5f 2px solid;}
input[type="radio"]:checked:before { content: ''; width: 10px; height: 10px; border: #6e6a5f 2px solid; -webkit-border-radius: 8px; border-radius: 8px; position: absolute; left: calc(50% - 5px); top: calc(50% - 5px); display: block; background: #6e6a5f;}
input[type="radio"] + label { font-size: 16px;}

/* checkbox */
input[type="checkbox"] { width: 20px; height: 20px; margin-bottom: 3px; margin-right: 5px; border: #ccc 1px solid; background: #fff; position: relative; outline: 0; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; transition: 0.3s;}
input[type="checkbox"]:before { transition: 0.3s;}
input[type="checkbox"]:checked { border: #6e6a5f 1px solid; background: #6e6a5f;}
input[type="checkbox"]:checked:before { content: ""; width: 12px; height: 8px; margin: 0; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(135deg); position: absolute; left: calc(50% - 6px); top: calc(50% - 6px); display: block;}

/*-----------------------------------------
 Button
-----------------------------------------*/
.action-buttons { margin: 40px 0;}
.action-buttons + .action-buttons { margin: 10px 0 40px 0;}
.action-buttons .action { display: inline-block;}
.btn { border-radius: 5px;}
.action .btn { min-width: 320px; width: 320px; height: 60px; padding: 0 15px; margin: 10px auto 0; border-bottom-width: 1px; border-radius: 5px; font-size: 18px; font-weight: 700; display: flex; justify-content: center; align-items: center;}
.action .btn.btn-default[class$='--back'],
.action .btn.btn-default[class$='--update-back'] { width: 300px;}
.btn-default { border: #AAA493 1px solid; color: #fff; background: #AAA493;}
.btn-primary { border: #BC4C4C 1px solid; color: #fff; background: #BC4C4C;}
.btn-secondary { border: #9d9896 1px solid; color: #fff; background: #9d9896;}
.btn-danger  { border: #111111 1px solid; color: #fff; background: #111111;}
.star-base   { width: 110px; height: 22px; background-position: 0 0; background-size: 110px 44px;}
.star-select { width: 110px; height: 22px; background-position: -110px -22px; background-size: 110px 44px;}
.fieldset .form-control { padding-left: 12px;}

/*-----------------------------------------
 PanKuzu
-----------------------------------------*/
.pane-topic-path { margin: 0;}
.block-topic-path { padding: 15px 0; font-size: 13px;}
.block-topic-path--list li { padding-right: 1.0em; font-size: 13px;}
.block-topic-path--list a { padding-left: 1.0em; font-size: 13px; text-decoration: none;}
.block-topic-path--list .block-topic-path--item__home a { padding-left: 0; font-size: 13px;}

/*-----------------------------------------
 Pager
-----------------------------------------*/
.pager { height: 28px; padding: 0; margin: 30px 0; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; position: relative;}
.pager > * { vertical-align: middle; display: inline-block;}
.pager-scope { padding: 3px; margin-right: 5px; display: inline-block;}
.pager-total { padding: 0; margin: 0;}
.pager-count { font-size: 14px;}
.pager-count span { margin: 0 5px 0 0; font-size: 18px; font-weight: normal;}
.pager-frame { display: flex;}
.pagination { display: flex;}
.pagination > * { padding: 0; margin: 0; border: none; background-color: none; list-style-type: none; float: none;}
.pagination li { width: 28px; height: 28px; margin: 0 6px; border-radius: 28px; border: #EAEAEA 1px solid; font-size: 14px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
.pagination li a { width: 28px; height: 28px; border-radius: 28px; color: #807F7F; text-decoration: none; display: flex; justify-content: center; align-items: center; transition: 0.3s;}
.pagination li a:hover { color: #AAA493; background: #F5F3ED;}
.pagination li.pager-next,
.pagination li.pager-previous { display: none !important;}
.pagination li.pager-first,
.pagination li.pager-last  { border: #AAA493 1px solid; font-size: 0; position: relative;}
.pagination li.pager-first { margin-right: 20px;}
.pagination li.pager-last  { margin-left: 20px;}
.pagination li.pager-first a,
.pagination li.pager-last a { background: #AAA493;}
.pagination li.pager-first a::before,
.pagination li.pager-first a::after,
.pagination li.pager-previous a::before,
.pagination li.pager-next a::before,
.pagination li.pager-last a::before,
.pagination li.pager-last a::after { content: ""; width: 8px; height: 8px; border-right: #fff 1px solid; border-top: #fff 1px solid; position: absolute; left: 11px; top: calc(50% - 4px); display: block; transform: rotate(-135deg);}
.pagination li.pager-first a::before { left: 11px;}
.pagination li.pager-first a::after  { left: 14px; display: none !important;}
.pagination li.pager-next a::before  { left:  7px; transform: rotate(45deg);}
.pagination li.pager-last a::before  { left:  7px; transform: rotate(45deg);}
.pagination li.pager-last a::after   { left: 11px; transform: rotate(45deg); display: none !important;}
.pagination li.pager-current { border: #DDDDDD 1px solid; background: #DDDDDD; color: #fff;}
.pagination > .disabled { color: #777;}

/*-----------------------------------------
 Sort and Style
-----------------------------------------*/
.pager.block-goods-list--pager-top { height: 40px; justify-content: space-between;}
.pager.block-goods-list--pager-top .pager-total { width: 280px; text-align: left;}
.pager.block-goods-list--pager-top .pager-top-inner { width: calc(100% - 300px); display: flex; justify-content: flex-end; align-items: center;}
dl.block-goods-list--display-style-items,
dl.block-goods-list--sort-order-items { display: none;}

.pager-top-inner dl.block-goods-list--display-style-items { max-width: calc(100% - 240px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0; font-size: 14px;}
.pager-top-inner dl.block-goods-list--display-style-items > dt { width: 60px; margin: 0 10px 0 0; text-align: left; font-weight: normal; white-space: nowrap; display: block; position: relative;}
.pager-top-inner dl.block-goods-list--display-style-items > dt::after { content: '：'; font-weight: 400; position: absolute; top: 0; right: -10px;}
.pager-top-inner dl.block-goods-list--display-style-items > dd { width: calc(100% - 80px); padding: 0; margin: 0; display: block;}
.pager-top-inner dl.block-goods-list--display-style-items ul { display: flex; flex-wrap: nowrap;}
.pager-top-inner dl.block-goods-list--display-style-items ul > li { width: 30px; height: 30px; padding: 0; margin: 0; border: none;}
.pager-top-inner dl.block-goods-list--display-style-items ul > li a,
.pager-top-inner dl.block-goods-list--display-style-items ul > li span { width: 30px; height: 30px; position: relative; display: flex; justify-content: center; align-items: center; background-position: center center; -webkit-background-size: 22px 22px; background-size: 22px 22px; background-repeat: no-repeat;}
.pager-top-inner dl.block-goods-list--display-style-items ul > li.active { padding: 0; margin: 0; border: none; color: #333;}

.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleT a    { font-size: 0; text-indent: -9999px; background-image: url("../../img/usr/common/styleT.png");}
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleT span { font-size: 0; text-indent: -9999px; background-image: url("../../img/usr/common/styleT_active.png");}
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleP a    { font-size: 0; text-indent: -9999px; background-image: url("../../img/usr/common/styleP.png");}
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleP span { font-size: 0; text-indent: -9999px; background-image: url("../../img/usr/common/styleP_active.png");}
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleD a    { font-size: 0; text-indent: -9999px; background-image: url("../../img/usr/common/styleD.png");}
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleD span { font-size: 0; text-indent: -9999px; background-image: url("../../img/usr/common/styleD_active.png");}

.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleL,
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleQ,
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleW,
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleL,
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleS,
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleR,
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleI,
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleJ,
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleN,
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleB,
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleA,
.pager-top-inner dl.block-goods-list--display-style-items ul > li.styleH { display: none;}

.pager-top-inner dl.block-goods-list--sort-order-items { width: 200px; height: 40px; border: none; display: flex; margin: 0 0 0 40px; font-size: 14px; transition: 0.3s;}
.pager-top-inner dl.block-goods-list--sort-order-items > dt { display: none !important;}
.pager-top-inner dl.block-goods-list--sort-order-items > dd { width: 200px; height: 40px; padding: 0; margin: 0; display: block; overflow: hidden; position: relative;}
.pager-top-inner dl.block-goods-list--sort-order-items > dd::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #333333; display: block; position: absolute; top: 18px; right: 16px; z-index: 5;}
.pager-top-inner dl.block-goods-list--sort-order-items:hover > dd { overflow: inherit;}
.pager-top-inner dl.block-goods-list--sort-order-items ul { padding: 0; margin: 0; border-top: #DDD 1px solid; border-radius: 3px; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 5; box-shadow: 0 6px 6px 0 rgba(0,0,0,0.1);}
.pager-top-inner dl.block-goods-list--sort-order-items ul > li { width: 200px; height: 39px; padding: 0; margin: 0; border: #DDD 1px solid; display: flex; align-items: center; order: 2; position: relative; top: 0;}
.pager-top-inner dl.block-goods-list--sort-order-items ul > li a { width: 200px; height: 38px; padding: 0 30px 0 15px; margin: 0; display: flex; align-items: center; position: relative; text-decoration: none; background: #fff;}
.pager-top-inner dl.block-goods-list--sort-order-items ul > li a:hover { background: #F5F3ED;}
.pager-top-inner dl.block-goods-list--sort-order-items ul > li.active { padding: 0 30px 0 15px; border-top: none; color: #333; order: 1; top: 0;}
.pager-top-inner dl.block-goods-list--sort-order-items ul > li.default { padding: 0 30px 0 15px; border-top: none; color: #333; order: 1; top: -1px;}

/*-----------------------------------------
 Fieldset 
-----------------------------------------*/
.fieldset { width: 100%; margin: 10px 0; border-top: #e5e5e5 1px solid;}
.fieldset .form-group { width: 100%; padding: 0; margin: 0; display: table; border-top: none; border-bottom: #e5e5e5 1px solid; border-left: #e5e5e5 1px solid; border-right: #e5e5e5 1px solid;}
.fieldset .form-label,
.fieldset .constraint,
.fieldset .form-control { display: table-cell;}
.fieldset .form-label { width: 23%; padding: 10px 10px 10px 20px; font-size: 16px; text-align: left; background: #F5F3ED;}
.fieldset .form-label label { font-weight: bold;}
.fieldset .constraint { width: 65px; padding: 10px 5px 10px 5px; background: #F5F3ED;}
.fieldset .form-control { padding: 10px 20px;}

.required:after { content: "必須"; padding: .2em .6em; font-size: 11px; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; color: #fff; background-color: #bc4c4c; display: inline-block;}

.form-group.block-member-info--tel .form-label::after { content: "※ハイフンを入れてください"; font-size: 11px; text-align: left; white-space: nowrap; vertical-align: baseline; color: #f66; display: block;}
.form-group.block-member-info--zip .form-label::after { content: "※ハイフンを入れてください"; font-size: 11px; text-align: left; white-space: nowrap; vertical-align: baseline; color: #f66; display: block;}

/*-----------------------------------------
 Message
-----------------------------------------*/
.success { padding: 10px 10px 10px 30px; margin-top: 5px; margin-bottom: 5px; border: 1px solid #c7d9e3; color: #31708f; background-image: url(../../img/sys/icon/success.png); background-size: 12px auto; background-position: 10px 50%; background-color: #e4f3fa; background-repeat: no-repeat; overflow: hidden; position: relative;}
.block-common-alert { margin: 0 0 40px 0;}

/*-----------------------------------------
 Icon
-----------------------------------------*/
.block-icon { display: flex; flex-wrap: wrap;}
.block-icon span[class^="block-icon--src"] { height: 26px; padding: 0; margin: 0 5px 5px 0; border: none; font-size: 0; display: block;}
.block-icon span[class^="block-icon--src"] img { width: auto; height: 26px;}
.block-icon span:not([class^="block-icon--src"]) { height: 26px; padding: 0 8px; margin: 0 5px 5px 0; border: #AAA493 1px solid; font-size: 12px; display: flex; justify-content: center; align-items: center; color: #AAA493;}
/*
.block-icon span.block-icon--new      { border-color: #EA7C99; color: #EA7C99;}
.block-icon span.block-icon--sale     { border-color: #BC4C4C; color: #BC4C4C;}
.block-icon span.block-icon--original { border-color: #AAA493; color: #AAA493;}
.block-icon span.block-icon--direct   { border-color: #4F954F; color: #4F954F;}
.block-icon span.block-icon--cool     { border-color: #79A0DB; color: #FFFFFF; background: #79A0DB;}
.block-icon span.block-icon--freeze   { border-color: #85C1DC; color: #FFFFFF; background: #85C1DC;}
*/
.block-icon span.block-icon--auto-new { height: 26px; padding: 0 8px; margin: 0 5px 5px 0; border: #EA7C99 1px solid; font-size: 12px; display: flex; justify-content: center; align-items: center; color: #EA7C99;}
.block-icon span.block-icon--auto-on-sales { height: 26px; padding: 0 8px; margin: 0 5px 5px 0; border: #BC4C4C 1px solid; font-size: 12px; display: flex; justify-content: center; align-items: center; color: #BC4C4C;}
.block-icon span.block-icon--auto-reservation { height: 26px; padding: 0 8px; margin: 0 5px 5px 0; border: #4F954F 1px solid; font-size: 12px; display: flex; justify-content: center; align-items: center; color: #4F954F;}
.block-icon span.block-icon--auto-point { height: 26px; padding: 0 8px; margin: 0 5px 5px 0; border: #DF5656 1px solid; background-color: #DF5656; font-size: 12px; display: flex; justify-content: center; align-items: center; color: #fff;}

/*-----------------------------------------
 TEXT/IMAGE
-----------------------------------------*/
.textimage-design-frame-wrap { margin: 0 0 60px 0;}
.textimage-design-frame { margin: 0 0 60px 0;}
.textimage-design-frame .textimage-design-item .image { margin: 0; border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.textimage-design-frame .textimage-design-item .image img { vertical-align: top;}
.textimage-design-frame .textimage-design-item .title { margin: 20px 0 0 0; font-size: 20px; font-weight: bold;}
.textimage-design-frame .textimage-design-item .text  { margin: 20px 0 0 0; font-size: 14px; font-weight: normal; line-height: 1.6;}
.textimage-design-frame .textimage-design-list { display: flex; flex-wrap: wrap;}
.textimage-design-frame.column01 .textimage-design-list { width: 80%; margin: 0 auto 40px;}
.textimage-design-frame.column02 .textimage-design-list { justify-content: space-between;}
.textimage-design-frame.column02 .textimage-design-item { width: calc(50% - 15px);}
.textimage-design-frame.column03 .textimage-design-list {}
.textimage-design-frame.column03 .textimage-design-item { width: calc((100% - 40px) / 3); margin: 0 20px 20px 0;}
.textimage-design-frame.column03 .textimage-design-item:nth-child(3n) { margin: 0 0 20px 0;}
.textimage-design-frame.column02-line .textimage-design-list { display: block;}
.textimage-design-frame.column02-line .textimage-design-item { width: 100%; margin: 0 0 40px 0;}
.textimage-design-frame.column02-line .textimage-design-item::after { content: ''; width: 100%; height: 1px; display: block; clear: both;}
.textimage-design-frame.column02-line .textimage-design-item .image  { width: calc(50% - 15px); float: left;}
.textimage-design-frame.column02-line .textimage-design-item .title  { width: calc(50% - 15px); margin: 0 0 20px 0; float: right;}
.textimage-design-frame.column02-line .textimage-design-item .text   { width: calc(50% - 15px); margin: 0 0 20px 0; float: right;}
.textimage-design-frame.column02-line .textimage-design-item.reverse .image { float: right;}
.textimage-design-frame.column02-line .textimage-design-item.reverse .title { float: left;}
.textimage-design-frame.column02-line .textimage-design-item.reverse .text  { float: left;}

/*-----------------------------------------
 MAP
-----------------------------------------*/
.map-design-frame { padding: 0 0 1px 0; margin: 0 0 60px 0;}
.map-design-frame-box { width: 100%; position: relative;}
.map-design-frame-box .map-pref-list { height: 500px; padding: 0; margin: 0 0 5% 0;}
.map-design-frame-box .map-pref-list li { width: calc(10% - 5px); height: calc(10% - 5px); border-radius: 10px; transition: 0.3s; position: absolute; left: 0; top: 0;}
.map-design-frame-box .map-pref-list li:not(.disable):hover { opacity: 0.7;}
.map-design-frame-box .map-pref-list li a,
.map-design-frame-box .map-pref-list li span { width: 100%; height: 100%; text-decoration: none; display: flex; justify-content: center; align-items: center;}
.map-design-frame-box .map-pref-list li.pref01 { background: #D1D9E8; top:  0%; left: 80%; width: calc(20% - 5px); height: calc(20% - 5px);}
.map-design-frame-box .map-pref-list li.pref02 { background: #C9E8EB; top: 20%; left: 80%; width: calc(20% - 5px);}
.map-design-frame-box .map-pref-list li.pref03 { background: #C9E8EB; top: 30%; left: 90%;}
.map-design-frame-box .map-pref-list li.pref04 { background: #C9E8EB; top: 40%; left: 90%;}
.map-design-frame-box .map-pref-list li.pref05 { background: #C9E8EB; top: 30%; left: 80%;}
.map-design-frame-box .map-pref-list li.pref06 { background: #C9E8EB; top: 40%; left: 80%;}
.map-design-frame-box .map-pref-list li.pref07 { background: #C9E8EB; top: 50%; left: 90%;}
.map-design-frame-box .map-pref-list li.pref08 { background: #BADEBA; top: 60%; left: 90%;}
.map-design-frame-box .map-pref-list li.pref09 { background: #BADEBA; top: 70%; left: 90%;}
.map-design-frame-box .map-pref-list li.pref10 { background: #BADEBA; top: 60%; left: 80%;}
.map-design-frame-box .map-pref-list li.pref11 { background: #BADEBA; top: 70%; left: 80%;}
.map-design-frame-box .map-pref-list li.pref12 { background: #BADEBA; top: 80%; left: 90%;}
.map-design-frame-box .map-pref-list li.pref13 { background: #BADEBA; top: 80%; left: 80%;}
.map-design-frame-box .map-pref-list li.pref14 { background: #BADEBA; top: 80%; left: 70%;}
.map-design-frame-box .map-pref-list li.pref15 { background: #D9E6C3; top: 50%; left: 80%;}
.map-design-frame-box .map-pref-list li.pref16 { background: #D9E6C3; top: 50%; left: 70%;}
.map-design-frame-box .map-pref-list li.pref17 { background: #D9E6C3; top: 50%; left: 60%;}
.map-design-frame-box .map-pref-list li.pref18 { background: #D9E6C3; top: 50%; left: 50%;}
.map-design-frame-box .map-pref-list li.pref19 { background: #D9E6C3; top: 70%; left: 70%;}
.map-design-frame-box .map-pref-list li.pref20 { background: #D9E6C3; top: 60%; left: 70%;}
.map-design-frame-box .map-pref-list li.pref21 { background: #D9E6C3; top: 60%; left: 60%;}
.map-design-frame-box .map-pref-list li.pref22 { background: #D9E6C3; top: 70%; left: 60%;}
.map-design-frame-box .map-pref-list li.pref23 { background: #D9E6C3; top: 80%; left: 60%;}
.map-design-frame-box .map-pref-list li.pref24 { background: #D9E6C3; top: 80%; left: 50%;}
.map-design-frame-box .map-pref-list li.pref25 { background: #F3ECAD; top: 70%; left: 50%;}
.map-design-frame-box .map-pref-list li.pref26 { background: #F3ECAD; top: 50%; left: 40%;}
.map-design-frame-box .map-pref-list li.pref27 { background: #F3ECAD; top: 70%; left: 40%;}
.map-design-frame-box .map-pref-list li.pref28 { background: #F3ECAD; top: 60%; left: 40%;}
.map-design-frame-box .map-pref-list li.pref29 { background: #F3ECAD; top: 60%; left: 50%;}
.map-design-frame-box .map-pref-list li.pref30 { background: #F3ECAD; top: 80%; left: 40%;}
.map-design-frame-box .map-pref-list li.pref31 { background: #EFCFAB; top: 50%; left: 30%;}
.map-design-frame-box .map-pref-list li.pref32 { background: #EFCFAB; top: 50%; left: 20%;}
.map-design-frame-box .map-pref-list li.pref33 { background: #EFCFAB; top: 60%; left: 30%;}
.map-design-frame-box .map-pref-list li.pref34 { background: #EFCFAB; top: 60%; left: 20%;}
.map-design-frame-box .map-pref-list li.pref35 { background: #EFCFAB; top: 50%; left: 10%;}
.map-design-frame-box .map-pref-list li.pref36 { background: #E7DCF1; top: 80%; left: 30%;}
.map-design-frame-box .map-pref-list li.pref37 { background: #E7DCF1; top: 70%; left: 30%;}
.map-design-frame-box .map-pref-list li.pref38 { background: #E7DCF1; top: 70%; left: 20%;}
.map-design-frame-box .map-pref-list li.pref39 { background: #E7DCF1; top: 80%; left: 20%;}
.map-design-frame-box .map-pref-list li.pref40 { background: #F3D4D4; top: 60%; left: 10%;}
.map-design-frame-box .map-pref-list li.pref41 { background: #F3D4D4; top: 60%; left:  0%;}
.map-design-frame-box .map-pref-list li.pref42 { background: #F3D4D4; top: 70%; left:  0%;}
.map-design-frame-box .map-pref-list li.pref43 { background: #F3D4D4; top: 80%; left:  0%;}
.map-design-frame-box .map-pref-list li.pref44 { background: #F3D4D4; top: 70%; left: 10%;}
.map-design-frame-box .map-pref-list li.pref45 { background: #F3D4D4; top: 80%; left: 10%;}
.map-design-frame-box .map-pref-list li.pref46 { background: #F3D4D4; top: 90%; left:  0%; width: calc(20% - 5px);}
.map-design-frame-box .map-pref-list li.pref47 { background: #F3D4D4; top:100%; left:  0%;}
.map-design-frame-box .map-pref-list li.disable { background: #EEEEEE; color: #CCC;}
.map-design-frame-box .map-pref-list li.disable,
.map-design-frame-box .map-pref-list li.disable a,
.map-design-frame-box .map-pref-list li.disable span { color: #CCC; pointer-events: none;}

/*-----------------------------------------
 Ggraph
-----------------------------------------*/
.graph-design-frame-wrap { margin: 0 0 60px 0;}
.graph-design-frame { border: #EAEAEA 2px solid; margin: 0 0 40px 0;}
.graph-design-frame-inner { padding: 20px 50px; text-align: center;}
.graph-design-frame-inner h2 { padding: 0; margin: 20px 0 10px 0; display: flex; justify-content: center; align-items: center;}
.graph-design-frame-inner h2 span { min-width: 235px; min-height: 44px; padding: 10px; margin: 0 auto; border-radius: 5px; font-size: 16px; font-weight: 500; display: flex; justify-content: center; align-items: center; background: #F5F3ED; position: relative;}
.graph-design-frame-inner h2 span::after { content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 14px solid #F5F3ED; display: block; position: absolute; bottom: -13px; left: calc(50% - 8px);}
.graph-design-frame .graph-line { margin: 30px 0; display: flex; justify-content: space-between; align-items: center;}
.graph-design-frame .graph-line .graph-ttl-left  { width: 15%; text-align: center;}
.graph-design-frame .graph-line .graph-ttl-right { width: 15%; text-align: center;}
.graph-design-frame .graph-line .graph-body { width: 68%; height: 2px; text-align: center; background: #DDDDDD; position: relative;}
.graph-design-frame .graph-line .graph-body::before { content: ''; width: 10px; height: 10px; border-top: #DDD 2px solid; border-right: #DDD 2px solid; transform: rotate(-135deg); display: block; position: absolute; top: calc(50% - 5px); left: 0;}
.graph-design-frame .graph-line .graph-body::after { content: ''; width: 10px; height: 10px; border-top: #DDD 2px solid; border-right: #DDD 2px solid; transform: rotate(45deg); display: block; position: absolute; top: calc(50% - 5px); right: 0;}
.graph-design-frame .graph-line .graph-body span { width: 14px; height: 14px; border-radius: 14px; background: #AAA493; position: absolute; top: calc(50% - 7px); z-index: 2;}
.graph-design-frame .graph-line .graph-body span.per0  { left: calc( 0% - 4px);}
.graph-design-frame .graph-line .graph-body span.per1  { left: calc( 1% - 6px);}
.graph-design-frame .graph-line .graph-body span.per2  { left: calc( 2% - 6px);}
.graph-design-frame .graph-line .graph-body span.per3  { left: calc( 3% - 6px);}
.graph-design-frame .graph-line .graph-body span.per4  { left: calc( 4% - 6px);}
.graph-design-frame .graph-line .graph-body span.per5  { left: calc( 5% - 6px);}
.graph-design-frame .graph-line .graph-body span.per6  { left: calc( 6% - 6px);}
.graph-design-frame .graph-line .graph-body span.per7  { left: calc( 7% - 6px);}
.graph-design-frame .graph-line .graph-body span.per8  { left: calc( 8% - 6px);}
.graph-design-frame .graph-line .graph-body span.per9  { left: calc( 9% - 6px);}
.graph-design-frame .graph-line .graph-body span.per10 { left: calc(10% - 6px);}
.graph-design-frame .graph-line .graph-body span.per11 { left: calc(11% - 6px);}
.graph-design-frame .graph-line .graph-body span.per12 { left: calc(12% - 6px);}
.graph-design-frame .graph-line .graph-body span.per13 { left: calc(13% - 6px);}
.graph-design-frame .graph-line .graph-body span.per14 { left: calc(14% - 6px);}
.graph-design-frame .graph-line .graph-body span.per15 { left: calc(15% - 6px);}
.graph-design-frame .graph-line .graph-body span.per16 { left: calc(16% - 6px);}
.graph-design-frame .graph-line .graph-body span.per17 { left: calc(17% - 6px);}
.graph-design-frame .graph-line .graph-body span.per18 { left: calc(18% - 6px);}
.graph-design-frame .graph-line .graph-body span.per19 { left: calc(19% - 6px);}
.graph-design-frame .graph-line .graph-body span.per20 { left: calc(20% - 6px);}
.graph-design-frame .graph-line .graph-body span.per21 { left: calc(21% - 6px);}
.graph-design-frame .graph-line .graph-body span.per22 { left: calc(22% - 6px);}
.graph-design-frame .graph-line .graph-body span.per23 { left: calc(23% - 6px);}
.graph-design-frame .graph-line .graph-body span.per24 { left: calc(24% - 6px);}
.graph-design-frame .graph-line .graph-body span.per25 { left: calc(25% - 6px);}
.graph-design-frame .graph-line .graph-body span.per26 { left: calc(26% - 6px);}
.graph-design-frame .graph-line .graph-body span.per27 { left: calc(27% - 6px);}
.graph-design-frame .graph-line .graph-body span.per28 { left: calc(28% - 6px);}
.graph-design-frame .graph-line .graph-body span.per29 { left: calc(29% - 6px);}
.graph-design-frame .graph-line .graph-body span.per30 { left: calc(30% - 6px);}
.graph-design-frame .graph-line .graph-body span.per31 { left: calc(31% - 6px);}
.graph-design-frame .graph-line .graph-body span.per32 { left: calc(32% - 6px);}
.graph-design-frame .graph-line .graph-body span.per33 { left: calc(33% - 6px);}
.graph-design-frame .graph-line .graph-body span.per34 { left: calc(34% - 6px);}
.graph-design-frame .graph-line .graph-body span.per35 { left: calc(35% - 6px);}
.graph-design-frame .graph-line .graph-body span.per36 { left: calc(36% - 6px);}
.graph-design-frame .graph-line .graph-body span.per37 { left: calc(37% - 6px);}
.graph-design-frame .graph-line .graph-body span.per38 { left: calc(38% - 6px);}
.graph-design-frame .graph-line .graph-body span.per39 { left: calc(39% - 6px);}
.graph-design-frame .graph-line .graph-body span.per40 { left: calc(40% - 6px);}
.graph-design-frame .graph-line .graph-body span.per41 { left: calc(41% - 6px);}
.graph-design-frame .graph-line .graph-body span.per42 { left: calc(42% - 6px);}
.graph-design-frame .graph-line .graph-body span.per43 { left: calc(43% - 6px);}
.graph-design-frame .graph-line .graph-body span.per44 { left: calc(44% - 6px);}
.graph-design-frame .graph-line .graph-body span.per45 { left: calc(45% - 6px);}
.graph-design-frame .graph-line .graph-body span.per46 { left: calc(46% - 6px);}
.graph-design-frame .graph-line .graph-body span.per47 { left: calc(47% - 6px);}
.graph-design-frame .graph-line .graph-body span.per48 { left: calc(48% - 6px);}
.graph-design-frame .graph-line .graph-body span.per49 { left: calc(49% - 6px);}
.graph-design-frame .graph-line .graph-body span.per50 { left: calc(50% - 6px);}
.graph-design-frame .graph-line .graph-body span.per51 { left: calc(51% - 6px);}
.graph-design-frame .graph-line .graph-body span.per52 { left: calc(52% - 6px);}
.graph-design-frame .graph-line .graph-body span.per53 { left: calc(53% - 6px);}
.graph-design-frame .graph-line .graph-body span.per54 { left: calc(54% - 6px);}
.graph-design-frame .graph-line .graph-body span.per55 { left: calc(55% - 6px);}
.graph-design-frame .graph-line .graph-body span.per56 { left: calc(56% - 6px);}
.graph-design-frame .graph-line .graph-body span.per57 { left: calc(57% - 6px);}
.graph-design-frame .graph-line .graph-body span.per58 { left: calc(58% - 6px);}
.graph-design-frame .graph-line .graph-body span.per59 { left: calc(59% - 6px);}
.graph-design-frame .graph-line .graph-body span.per60 { left: calc(60% - 6px);}
.graph-design-frame .graph-line .graph-body span.per61 { left: calc(61% - 6px);}
.graph-design-frame .graph-line .graph-body span.per62 { left: calc(62% - 6px);}
.graph-design-frame .graph-line .graph-body span.per63 { left: calc(63% - 6px);}
.graph-design-frame .graph-line .graph-body span.per64 { left: calc(64% - 6px);}
.graph-design-frame .graph-line .graph-body span.per65 { left: calc(65% - 6px);}
.graph-design-frame .graph-line .graph-body span.per66 { left: calc(66% - 6px);}
.graph-design-frame .graph-line .graph-body span.per67 { left: calc(67% - 6px);}
.graph-design-frame .graph-line .graph-body span.per68 { left: calc(68% - 6px);}
.graph-design-frame .graph-line .graph-body span.per69 { left: calc(69% - 6px);}
.graph-design-frame .graph-line .graph-body span.per70 { left: calc(70% - 6px);}
.graph-design-frame .graph-line .graph-body span.per71 { left: calc(71% - 6px);}
.graph-design-frame .graph-line .graph-body span.per72 { left: calc(72% - 6px);}
.graph-design-frame .graph-line .graph-body span.per73 { left: calc(73% - 6px);}
.graph-design-frame .graph-line .graph-body span.per74 { left: calc(74% - 6px);}
.graph-design-frame .graph-line .graph-body span.per75 { left: calc(75% - 6px);}
.graph-design-frame .graph-line .graph-body span.per76 { left: calc(76% - 6px);}
.graph-design-frame .graph-line .graph-body span.per77 { left: calc(77% - 6px);}
.graph-design-frame .graph-line .graph-body span.per78 { left: calc(78% - 6px);}
.graph-design-frame .graph-line .graph-body span.per79 { left: calc(79% - 6px);}
.graph-design-frame .graph-line .graph-body span.per80 { left: calc(80% - 6px);}
.graph-design-frame .graph-line .graph-body span.per81 { left: calc(81% - 6px);}
.graph-design-frame .graph-line .graph-body span.per82 { left: calc(82% - 6px);}
.graph-design-frame .graph-line .graph-body span.per83 { left: calc(83% - 6px);}
.graph-design-frame .graph-line .graph-body span.per84 { left: calc(84% - 6px);}
.graph-design-frame .graph-line .graph-body span.per85 { left: calc(85% - 6px);}
.graph-design-frame .graph-line .graph-body span.per86 { left: calc(86% - 6px);}
.graph-design-frame .graph-line .graph-body span.per87 { left: calc(87% - 6px);}
.graph-design-frame .graph-line .graph-body span.per88 { left: calc(88% - 6px);}
.graph-design-frame .graph-line .graph-body span.per89 { left: calc(89% - 6px);}
.graph-design-frame .graph-line .graph-body span.per90 { left: calc(90% - 6px);}
.graph-design-frame .graph-line .graph-body span.per91 { left: calc(91% - 6px);}
.graph-design-frame .graph-line .graph-body span.per92 { left: calc(92% - 6px);}
.graph-design-frame .graph-line .graph-body span.per93 { left: calc(93% - 6px);}
.graph-design-frame .graph-line .graph-body span.per94 { left: calc(94% - 6px);}
.graph-design-frame .graph-line .graph-body span.per95 { left: calc(95% - 6px);}
.graph-design-frame .graph-line .graph-body span.per96 { left: calc(96% - 6px);}
.graph-design-frame .graph-line .graph-body span.per97 { left: calc(97% - 6px);}
.graph-design-frame .graph-line .graph-body span.per98 { left: calc(98% - 6px);}
.graph-design-frame .graph-line .graph-body span.per99 { left: calc(99% - 6px);}
.graph-design-frame .graph-line .graph-body span.per100{ left: calc(100% - 10px);}

.graph-design-frame.type2 { border: none; margin: 0 0 40px 0;}
.graph-design-frame.type2 .graph-design-frame-inner { padding: 60px; position: relative;}
.graph-design-frame.type2 .graph-design-frame-inner::before { content: ''; width: calc(100% - 120px); height: 2px; background: #DDD; position: absolute; top: calc(50% - 1px); left: 60px;}
.graph-design-frame.type2 .graph-design-frame-inner::after  { content: ''; width: 2px; height:  calc(100% - 120px); background: #DDD; position: absolute; top: 60px; left: calc(50% - 1px);}
.graph-design-frame.type2 .graph-line { margin: 0;}
.graph-design-frame.type2 .graph-line::before { content: ''; width: 10px; height: 10px; border-top: #DDD 2px solid; border-right: #DDD 2px solid; transform: rotate(-45deg); display: block; position: absolute; top: 60px; left: calc(50% - 5px);}
.graph-design-frame.type2 .graph-line::after { content: ''; width: 10px; height: 10px; border-top: #DDD 2px solid; border-right: #DDD 2px solid; transform: rotate(135deg); display: block; position: absolute; bottom: 60px; right: calc(50% - 5px);}
.graph-design-frame.type2 .graph-line .graph-body { width: 100%; height: 500px; text-align: center; background: none; position: relative;}
.graph-design-frame.type2 .graph-line .graph-ttl-top,
.graph-design-frame.type2 .graph-line .graph-ttl-bottom,
.graph-design-frame.type2 .graph-line .graph-ttl-left,
.graph-design-frame.type2 .graph-line .graph-ttl-right { border-radius: 5px; text-align: center; position: absolute; z-index: 2; display: flex; justify-content: center; align-items: center; background: #F5F3ED;}
.graph-design-frame.type2 .graph-line .graph-ttl-top    { width: 120px; min-height: 40px; padding: 5px 10px; top: 0; left: calc(50% - 60px);}
.graph-design-frame.type2 .graph-line .graph-ttl-bottom { width: 120px; min-height: 40px; padding: 5px 10px; bottom: 0; left: calc(50% - 60px);}
.graph-design-frame.type2 .graph-line .graph-ttl-left   { width: 40px; min-height: 120px; padding: 10px 5px; top: calc(50% - 60px); left:  0; writing-mode: vertical-rl;}
.graph-design-frame.type2 .graph-line .graph-ttl-right  { width: 40px; min-height: 120px; padding: 10px 5px; top: calc(50% - 60px); right: 0; writing-mode: vertical-rl;}

.graph-design-frame.type2 .graph-line .graph-body span.v-per0  { top: calc( 0% - 4px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per1  { top: calc( 1% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per2  { top: calc( 2% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per3  { top: calc( 3% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per4  { top: calc( 4% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per5  { top: calc( 5% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per6  { top: calc( 6% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per7  { top: calc( 7% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per8  { top: calc( 8% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per9  { top: calc( 9% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per10 { top: calc(10% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per11 { top: calc(11% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per12 { top: calc(12% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per13 { top: calc(13% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per14 { top: calc(14% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per15 { top: calc(15% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per16 { top: calc(16% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per17 { top: calc(17% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per18 { top: calc(18% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per19 { top: calc(19% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per20 { top: calc(20% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per21 { top: calc(21% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per22 { top: calc(22% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per23 { top: calc(23% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per24 { top: calc(24% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per25 { top: calc(25% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per26 { top: calc(26% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per27 { top: calc(27% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per28 { top: calc(28% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per29 { top: calc(29% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per30 { top: calc(30% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per31 { top: calc(31% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per32 { top: calc(32% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per33 { top: calc(33% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per34 { top: calc(34% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per35 { top: calc(35% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per36 { top: calc(36% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per37 { top: calc(37% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per38 { top: calc(38% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per39 { top: calc(39% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per40 { top: calc(40% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per41 { top: calc(41% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per42 { top: calc(42% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per43 { top: calc(43% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per44 { top: calc(44% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per45 { top: calc(45% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per46 { top: calc(46% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per47 { top: calc(47% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per48 { top: calc(48% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per49 { top: calc(49% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per50 { top: calc(50% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per51 { top: calc(51% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per52 { top: calc(52% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per53 { top: calc(53% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per54 { top: calc(54% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per55 { top: calc(55% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per56 { top: calc(56% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per57 { top: calc(57% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per58 { top: calc(58% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per59 { top: calc(59% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per60 { top: calc(60% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per61 { top: calc(61% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per62 { top: calc(62% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per63 { top: calc(63% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per64 { top: calc(64% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per65 { top: calc(65% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per66 { top: calc(66% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per67 { top: calc(67% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per68 { top: calc(68% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per69 { top: calc(69% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per70 { top: calc(70% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per71 { top: calc(71% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per72 { top: calc(72% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per73 { top: calc(73% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per74 { top: calc(74% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per75 { top: calc(75% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per76 { top: calc(76% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per77 { top: calc(77% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per78 { top: calc(78% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per79 { top: calc(79% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per80 { top: calc(80% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per81 { top: calc(81% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per82 { top: calc(82% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per83 { top: calc(83% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per84 { top: calc(84% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per85 { top: calc(85% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per86 { top: calc(86% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per87 { top: calc(87% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per88 { top: calc(88% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per89 { top: calc(89% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per90 { top: calc(90% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per91 { top: calc(91% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per92 { top: calc(92% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per93 { top: calc(93% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per94 { top: calc(94% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per95 { top: calc(95% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per96 { top: calc(96% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per97 { top: calc(97% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per98 { top: calc(98% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per99 { top: calc(99% - 6px);}
.graph-design-frame.type2 .graph-line .graph-body span.v-per100{ top: calc(100% - 10px);}