@charset "UTF-8";
/* TBS reset */
.alt { position: absolute; top: -5000px; left: -9999px; }
.clearfix:after { content: ""; clear: both; display: block; }
.hide-txt { text-indent: 110%; white-space: nowrap; overflow: hidden; }
.fp-causion { display: none; }
.cover { width: 100%; height: 100%; background: url(/um/img/cover.png) repeat; display: block; position: absolute; top: 0; left: 0; }
@media screen and (min-width: 768px) { .alt-pc { position: absolute; top: -5000px; left: -9999px; }
  .clearfix-pc:after { content: ""; clear: both; display: block; }
  .hide-txt-pc { text-indent: 110%; white-space: nowrap; overflow: hidden; } }
@media screen and (max-width: 767px) { .alt-smp { position: absolute; top: -5000px; left: -9999px; }
  .clearfix-smp:after { content: ""; clear: both; display: block; }
  .hide-txt-smp { text-indent: 110%; white-space: nowrap; overflow: hidden; } }
/* RESETS NL4.0.0base */
html, body, main, div, p, span, applet, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, ruby { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
ol, ul { list-style: none; }
a img, form, fieldset { border: none; }
input, button, select { vertical-align: middle; }
textarea { vertical-align: top; overflow: auto; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress { display: inline-block; }
progress { vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template, .nt { display: none; }
a { background-color: transparent; }
a:active, a:hover { outline-width: 0; }
a:link, a:hover { text-decoration: none; }
abbr { cursor: help; border-bottom: 1px dotted #bbb; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; } /*Chrome, Edge, and Safari*/
dfn { font-style: italic; }
h1, h2, h3, h4, h5 { font-weight: lighter; }
mark { background: yellow; color: black; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border-style: none; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
button, input, select, textarea { font: inherit; }
optgroup { font-weight: bold; }
button, input, select { overflow: visible; } /*Edge, IE*/
button, input, select, textarea { margin: 0; } /*Firefox and Safari*/
button, select { text-transform: none; } /*Edge, Firefox, and IE*/
button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; }
[disabled] { cursor: default; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /*Android 4, iOS*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /*Firefox*/
button:-moz-focusring, input:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } /*Edge and IE ...etc*/
textarea { overflow: auto; } /*IE*/
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } /*IE10-*/
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /*Chrome*/
[type="search"] { -webkit-appearance: textfield; } /*Chrome and Safari*/
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /*Chrome and Safari on OS X*/
pre { overflow: auto; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }
q:after, blockquote:after { clear: both; }

/* ORG */
@media print { .noprint { display: none; } }
.bnsp { width: 300px; height: 250px; }
.nt { display: none; }
.bt { font-weight: bold;}
.ut { font-weight: lighter;}
.s_rsmp, .s_wsmp, .s_tablet, .s_pc, .s_rsmpi, .s_wsmpi, .s_tableti, .s_pci { display: none; }
.s_smp { display: -webkit-block; display: block; }
.s_smpi { display: -webkit-inline; display: inline; }
@media (min-width: 480px) { 
.s_smp, .s_smpi { display: none; } 
.s_rsmp { display: -webkit-block; display: block; } 
.s_rsmpi { display: -webkit-inline; display: inline; } 
}
@media (min-width: 640px) { 
.s_rsmp, .s_rsmpi { display: none; } 
.s_wsmp { display: -webkit-block; display: block; } 
.s_wsmpi { display: -webkit-inline; display: inline; } 
}
@media (min-width: 768px) { 
.s_wsmp, .s_wsmpi { display: none; } 
.s_tablet { display: -webkit-block; display: block; } 
.s_tableti { display: -webkit-inline; display: inline; } 
}
@media (min-width: 980px) { 
.s_tablet, .s_tableti { display: none; } 
.s_pc { display: -webkit-block; display: block; } 
.s_pci { display: -webkit-inline; display: inline; } 
}
br { letter-spacing: 0; }
.ct { text-align: center;}
.lt { text-align: left;}
.rt { text-align: right;}
div#con-body { width: 100%; text-align: center; margin: auto; line-height: normal; -webkit-text-size-adjust: none; vertical-align: baseline; margin: 0; padding: 0; z-index: 0; font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;}
#container { width: 100%; min-height: 100%; z-index: 1; font-size: 80%;}
#wrap { box-sizing: border-box; width: 100%; text-align: left; margin: 0 auto; line-height: 140%; max-width: 980px; position: relative;}
#wrap:before, #wrap:after { content: ""; display: table;}
#wrap:after { clear: both;}
/*size*/
.f300 { font-size: 300%;}
.f240 { font-size: 240%;}
.f220 { font-size: 220%;}
.f200 { font-size: 200%;}
.f180 { font-size: 180%;}
.f160 { font-size: 160%;}
.f140 { font-size: 140%;}
.f130 { font-size: 130%;}
.f125 { font-size: 125%;}
.f120, .big { font-size: 120%;}
.f110 { font-size: 110%;}
.f105 { font-size: 105%;}
.f100 { font-size: 100%;}
.f90, .small { font-size: 90%;}
.f85 { line-height: normal; font-size: 85% !important;}
.f75 { line-height: normal; font-size: 75% !important;}
.f65 { line-height: normal; font-size: 65% !important;}
/*_height*/
.lh100 { line-height: 100%;}
.lh110 { line-height: 110%;}
.lh120 { line-height: 120%;}
.lh130 { line-height: 130%;}
.lh140 { line-height: 140%;}
.lh150 { line-height: 150%;}
.lh160 { line-height: 160%;}
.lh170 { line-height: 170%;}
.lh180 { line-height: 180%;}
.lh200 { line-height: 200%;}
.lh230 { line-height: 230%;}
/*space*/
.pd5 { padding: 5px;}
.pdt10 { padding-top: 10px;}
.pdb10 { padding-bottom: 10px;}
.pdtb10 { padding: 10px 0;}
.pdtb20 { padding: 20px 0;}
.ls0 { letter-spacing: 0;}
.ls1 { letter-spacing: .1em;}
.ls2 { letter-spacing: .2em;}
/*etc*/
@media print { .noprint { display: none;} }
.sdt { text-shadow: 1px 2px 2px rgba(100, 100, 100, .2); -moz-text-shadow: 1px 2px 2px rgba(100, 100, 100, .2); -webkit-text-shadow: 1px 2px 2px rgba(100, 100, 100, .2);}
ruby { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;}
/*loader*/
.spinner { width: 50px; height: 50px; margin: 0 auto; animation: loading 2s linear infinite; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; display: none;}
.b1, .b2 { position: absolute; top: 0; width: 25px; height: 25px; border-radius: 100%; background-color: rgba(245, 88, 19, .5); animation: bounce 2s ease-in-out infinite;}
.b2 { top: auto; bottom: 0; animation-delay: -1.0s;}
@-moz-keyframes loading { 100% {-moz-transform: rotate(360deg);}}
@-webkit-keyframes loading { 100% {-webkit-transform: rotate(360deg);}}
@keyframes loading { 100% {transform: rotate(360deg);}}
@-moz-keyframes bounce { 0%, 100% {-moz-transform: scale(0.0);} 50% {-moz-transform: scale(1.0);}}
@-webkit-keyframes bounce { 0%, 100% {-webkit-transform: scale(0.0);} 50% {-webkit-transform: scale(1.0);}}
@keyframes bounce { 0%, 100% {transform: scale(0.0);} 50% {transform: scale(1.0);}}
/*bn*/
.bnsp { width: 300px; height: 250px; margin: 10px auto 0 auto;}
/*snsbtn*/
.twtfb { width: 100%; max-width: 300px; height: 26px; overflow: hidden; margin: 15px auto 10px auto; position: relative; z-index: 1000; background: url(../img/share.png) no-repeat top left;}
.twtbtn { width: 26.666666666666667%; height: 26px; position: absolute; top: 0; right: 36.666666666666667%;}
.fbbtn { width: 36.666666666666667%; height: 26px; overflow: hidden; position: absolute; top: 0; right: 0;}
.ifss { height: 21px; overflow: hidden; border: 0; background-color: transparent;}
/*color*/
.glay { color: rgba(150, 150, 150, 1);}
.wt { color: rgba(255, 255, 255, 1);}
.yel, .yellow { color: rgba(255, 231, 90, 1);}
.red { color: rgba(230, 10, 10, 1);}
.orange { color: rgba(254, 121, 80, 1);}
.black { color: rgba(0, 0, 0, 1);}
.blue { color: rgba(83, 143, 218, 1);}
.purple { color: rgba(100, 60, 187, 1);}
.green { color: rgba(9, 132, 0, 1);}
.pink { color: rgba(243, 72, 153, 1);}
.brown { color: rgba(144, 68, 0, 1);}
.gold { color: rgba(204, 153, 51, 1);}
.bluegreen { color: rgba(11, 157, 155, 1);}
a:link { color: rgba(24, 57, 137, 1);}
a:visited { color: rgba(24, 57, 137, 1);}
a:active { color: rgba(56, 89, 174, 1);}
a:hover { color: rgba(63, 120, 176, 1);}
a:hover .black, a:hover .red, a:hover .orange, a:hover .yellow, a:hover .blue, a:hover .purple, a:hover .green, a:hover .pink, a:hover .brown, a:hover .gold, a:hover .bluegreen, a:hover .glay { color: rgba(63, 120, 176, 1);}

/*COMMON*/
body { background-color: rgba(255, 255, 255, 1);}
div#con-body { text-align: center; z-index: 0; font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; width: 100%; margin: 0 auto; font-size: 65%; line-height: 100%; position: relative; background: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1); -webkit-text-size-adjust: none; vertical-align: baseline; margin: 0; padding: 0; text-align: center; z-index: 0;}
#container { box-sizing: border-box; width: 100%; z-index: 1; position: relative; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain;}
#wrap { box-sizing: border-box; width: 100%; max-width: 1000px; margin: 0 auto; padding: 4px 0 0 0; text-align: left; line-height: 140%; font-size: 160%; position: relative; }
.soon { -webkit-opacity: .3; -moz-opacity: .3; opacity: .3;}
.udl { border-bottom: 2px dotted rgba(0, 0, 0, .5);}

/*_spot*/
#spotsp { width: 92%; max-width: 480px; margin: 0 auto 20px auto; border: 1px solid rgba(255, 255, 255, 1); background: rgba(0, 0, 0, 1); box-shadow: 0 2px 5px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);}
#movie { width: 100%; height: 0; padding-top: 56.25%; position: relative; z-index: 500000;}
#movie iframe { box-sizing: border-box; width: 100%; height: 100%; border: 0; position: absolute; top: 0; left: 0;}
#spotsp .nojs { width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%); color: rgba(255, 255, 255, 1);}
#movie .main_photo { width: 100%; height: 0; padding-top: 56.25%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; display: none;}

/*button*/
.btn { position: relative; display: block; width: 200px; margin: 20px auto; padding: 15px 10px; background-color: rgba(0, 116, 246, 1); color: rgba(255, 255, 255, 1); font-weight: bold; text-align: center; text-decoration: none; text-transform: none; transform-style: flat; transition: all 250ms ease-out; box-shadow: 0 1px 5px rgba(0, 0, 0, .3); -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .3); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .3); background: linear-gradient(to right, rgba(0, 116, 246, 1) 0%, rgba(0, 101, 231, 1) 0.5%, rgba(0, 101, 231, 1) 20%, rgba(0, 116, 246, 1) 30%); background: -moz-linear-gradient(to right, rgba(0, 116, 246, 1) 0%, rgba(0, 101, 231, 1) 0.5%, rgba(0, 101, 231, 1) 20%, rgba(0, 116, 246, 1) 30%); background: -webkit-linear-gradient(to right, rgba(0, 116, 246, 1) 0%, rgba(0, 101, 231, 1) 0.5%, rgba(0, 101, 231, 1) 20%, rgba(0, 116, 246, 1) 30%); background: -o-linear-gradient(to right, rgba(0, 116, 246, 1) 0%, rgba(0, 101, 231, 1) 0.5%, rgba(0, 101, 231, 1) 20%, rgba(0, 116, 246, 1) 30%);}
.btn a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0;}
.btn:hover .btn_txt { color: rgba(255, 231, 90, 1);}
.btn:before, .btn:after { content: ""; position: absolute; z-index: -2; transition: all 250ms ease-out; bottom: 12px; width: 50%; height: 55%; max-width: 200px; max-height: 100px; box-shadow: 1px 8px 12px rgba(0, 0, 0, .6);}
.btn:before, .btn:after { right: 10px;}
.btn:hover:before, .btn:hover:after { box-shadow: 1px 8px 12px rgba(0, 0, 0, .8);}
.btn:hover:before { transform: skew(-8deg) rotate(-3deg);}
.btn:hover:after { transform: skew(8deg) rotate(3deg);}
.btn:hover { border-radius: 0 0 40% 40% / 0 0 30% 30%;}
.btn:before { display: none;}
.btn:hover { border-radius: 0 0 40% 0 / 0 0 30% 0;}

/*SNS*/
/*_Twitter*/
#twitter_sp { background-color: rgba(0, 66, 117, 1); background-image: linear-gradient(45deg, rgba(10, 76, 127, 1) 25%, transparent 25%, transparent 75%, rgba(10, 76, 127, 1) 75%, rgba(10, 76, 127, 1)), linear-gradient(-45deg, rgba(10, 76, 127, 1) 25%, transparent 25%, transparent 75%, rgba(10, 76, 127, 1) 75%, rgba(10, 76, 127, 1)); background-size: 20px 20px; background-position: 0 0, 10px 10px;}
/*_Instagram*/
#instagram_sp { background-color: rgba(60, 50, 107, 1); background-image: linear-gradient(45deg, rgba(70, 60, 117, 1) 25%, transparent 25%, transparent 75%, rgba(70, 60, 117, 1) 75%, rgba(70, 60, 117, 1)), linear-gradient(-45deg, rgba(70, 60, 117, 1) 25%, transparent 25%, transparent 75%, rgba(70, 60, 117, 1) 75%, rgba(70, 60, 117, 1)); background-size: 20px 20px; background-position: 0 0, 10px 10px;}
/*_LINE*/
#line_sp { background-color: rgba(12, 148, 12, 1); background-image: linear-gradient(45deg, rgba(22, 158, 22, 1) 25%, transparent 25%, transparent 75%, rgba(22, 158, 22, 1) 75%, rgba(22, 158, 22, 1)), linear-gradient(-45deg, rgba(22, 158, 22, 1) 25%, transparent 25%, transparent 75%, rgba(22, 158, 22, 1) 75%, rgba(22, 158, 22, 1)); background-size: 20px 20px; background-position: 0 0, 10px 10px;}
/*header*/
#header { width: 100%; max-width: 1000px; margin: 0 auto; background: url(../img/head.png) top center no-repeat; -webkit-background-size: contain; background-size: contain;}
/*footer*/
#footer { width: 100%; background: url(../img/btm.png) bottom center repeat-x; min-height: 300px;}
#copyright { width: 96%; margin: 0 auto; font-size: 130%; line-height: 140%; text-align: center; padding: 20px 0;}
#pgtpsp { width: 80px; height: 110px; margin: 0 auto; position: relative; z-index: 50000000;}
#pgtp { display: none;}
#pgtp a { width: 80px; height: 90px; position: absolute; top: 12px; left: 0; display: block; background: url(../img/pgtp.png) no-repeat; -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8;}
#pgtp a:hover { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; top: 2px; transform: rotate(7deg); -moz-transform: rotate(7deg); -webkit-transform: rotate(7deg);}
/*menu_basic*/
#basic_nav { position: relative; z-index: 1000; height: 45px; margin: 5px auto 10px auto; max-width: 440px;}
#basic_nav li { width: 30%; position: absolute; top: 3px; -webkit-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg);}
#basic_nav li .mn { box-sizing: border-box; width: 100%; height: 40px; background: linear-gradient(to right, #ffffcc 0%, #f1f1c1 0.5%, #f1f1c1 20%, #ffffcc 30%); z-index: 100;}
#basic_nav li .mn::after{ content:""; display:block; position: absolute; z-index: -1; bottom: 5px; right: 4px; height: 15px; width: 90%; background: rgba(0, 0, 0, .1); box-shadow: 0 5px 5px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, .2); -webkit-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg);}
#basic_nav li .mn .mnimg { width: 70%; max-width: 120px; height: 0; padding-top: 20%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%);}
#basic_nav #mn_intro { left: 2.5%;}
#basic_nav #mn_cast { left: 34.5%; -webkit-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg);}
#basic_nav #mn_staff { left: 66.5%;}
#basic_nav #mn_intro .mn, #basic_nav #mn_staff .mn { background: linear-gradient(to right, rgba(254, 121, 80, 1) 0%, rgba(244, 111, 70, 1) 0.5%, rgba(244, 111, 70, 1) 20%, rgba(254, 121, 80, 1) 30%); background: -moz-linear-gradient(to right, rgba(254, 121, 80, 1) 0%, rgba(244, 111, 70, 1) 0.5%, rgba(244, 111, 70, 1) 20%, rgba(254, 121, 80, 1) 30%); background: -webkit-linear-gradient(to right, rgba(254, 121, 80, 1) 0%, rgba(244, 111, 70, 1) 0.5%, rgba(244, 111, 70, 1) 20%, rgba(254, 121, 80, 1) 30%); -o-linear-gradient(to right, rgba(254, 121, 80, 1) 0%, rgba(244, 111, 70, 1) 0.5%, rgba(244, 111, 70, 1) 20%, rgba(254, 121, 80, 1) 30%);}
#basic_nav #mn_cast .mn { background: linear-gradient(to right, rgba(243, 72, 153, 1) 0%, rgba(233, 62, 143, 1) 0.5%, rgba(233, 62, 143, 1) 20%, rgba(243, 72, 153, 1) 30%); background: -moz-linear-gradient(to right, rgba(243, 72, 153, 1) 0%, rgba(233, 62, 143, 1) 0.5%, rgba(233, 62, 143, 1) 20%, rgba(243, 72, 153, 1) 30%); background: -webkit-linear-gradient(to right, rgba(243, 72, 153, 1) 0%, rgba(233, 62, 143, 1) 0.5%, rgba(233, 62, 143, 1) 20%, rgba(243, 72, 153, 1) 30%); background: -o-linear-gradient(to right, rgba(243, 72, 153, 1) 0%, rgba(233, 62, 143, 1) 0.5%, rgba(233, 62, 143, 1) 20%, rgba(243, 72, 153, 1) 30%);}
#basic_nav #mn_intro .mn .mnimg { background-image: url(../img/mn/mn_intro.png);}
#basic_nav #mn_staff .mn .mnimg { background-image: url(../img/mn/mn_staff.png);}
#basic_nav #mn_cast .mn .mnimg { background-image: url(../img/mn/mn_cast.png);}
#basic_nav li .mn a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 1000;}
#basic_nav li .mn a:hover { background: rgba(255, 255, 255, .2);}

#basic_nav li .mn:before, #basic_nav li .mn:after { content: ""; position: absolute; z-index: -2; transition: all 250ms ease-out; bottom: 12px; width: 50%; height: 55%; max-width: 200px; max-height: 100px; box-shadow: 1px 8px 12px rgba(0, 0, 0, .4); -webkit-box-shadow: 1px 8px 12px rgba(0, 0, 0, .4); -moz-box-shadow: 1px 8px 12px rgba(0, 0, 0, .4);}
#basic_nav li .mn:before, #basic_nav li .mn:after { right: 10px;}
#basic_nav li .mn:hover:before, #basic_nav li .mn:hover:after { box-shadow: 1px 8px 12px rgba(0, 0, 0, .5); -webkit-box-shadow: 1px 8px 12px rgba(0, 0, 0, .5); -moz-box-shadow: 1px 8px 12px rgba(0, 0, 0, .5);}
#basic_nav li .mn:hover:before { transform: skew(-8deg) rotate(-3deg);}
#basic_nav li .mn:hover:after { transform: skew(8deg) rotate(3deg);}
#basic_nav li .mn:hover { border-radius: 0 0 30% 30% / 0 0 10% 10%;}
#basic_nav li .mn:before { display: none;}
#basic_nav li .mn:hover { border-radius: 0 0 30% 0 / 0 0 20% 0;}

/*menu_basic2*/
#basic2_nav { position: relative; z-index: 1000; height: 120px; margin: 10px auto; max-width: 440px;}
#basic2_nav li { width: 47%; position: absolute; -webkit-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg);}
#basic2_nav li .mn { box-sizing: border-box; width: 100%; height: 50px; background: linear-gradient(to right, #ffffcc 0%, #f1f1c1 0.5%, #f1f1c1 20%, #ffffcc 30%); z-index: 100;}
#basic2_nav li .mn::after{ content:""; display:block; position: absolute; z-index: -1; bottom: 5px; right: 4px; height: 15px; width: 90%; background: rgba(0, 0, 0, .1); box-shadow: 0 5px 5px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, .2); -webkit-transform: rotate(4deg); -ms-transform: rotate(4deg); transform: rotate(4deg);}
#basic2_nav li .mn .mnimg { width: 95%; max-width: 180px; height: 0; padding-top: 26.388888888888889%; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%);}
#basic2_nav #mn_chart { top: 5px; left: 2.5%; -webkit-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg);}
#basic2_nav #mn_alz { top: 5px; left: 52%;}
#basic2_nav #mn_message { top: 65px; left: 2.5%; -webkit-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg);}
#basic2_nav #mn_extra { top: 65px; left: 52%; -webkit-opacity: 0.4; -moz-opacity: 0.4; opacity: 0.4;}
#basic2_nav #mn_chart .mn { background: linear-gradient(to right, rgba(243, 72, 153, 1) 0%, rgba(233, 62, 143, 1) 0.5%, rgba(233, 62, 143, 1) 20%, rgba(243, 72, 153, 1) 30%); background: -moz-linear-gradient(to right, rgba(243, 72, 153, 1) 0%, rgba(233, 62, 143, 1) 0.5%, rgba(233, 62, 143, 1) 20%, rgba(243, 72, 153, 1) 30%); background: -webkit-linear-gradient(to right, rgba(243, 72, 153, 1) 0%, rgba(233, 62, 143, 1) 0.5%, rgba(233, 62, 143, 1) 20%, rgba(243, 72, 153, 1) 30%); background: -o-linear-gradient(to right, rgba(243, 72, 153, 1) 0%, rgba(233, 62, 143, 1) 0.5%, rgba(233, 62, 143, 1) 20%, rgba(243, 72, 153, 1) 30%);}
#basic2_nav #mn_message .mn { background: linear-gradient(to right, rgba(254, 121, 80, 1) 0%, rgba(244, 111, 70, 1) 0.5%, rgba(244, 111, 70, 1) 20%, rgba(254, 121, 80, 1) 30%); background: -moz-linear-gradient(to right, rgba(254, 121, 80, 1) 0%, rgba(244, 111, 70, 1) 0.5%, rgba(244, 111, 70, 1) 20%, rgba(254, 121, 80, 1) 30%); background: -webkit-linear-gradient(to right, rgba(254, 121, 80, 1) 0%, rgba(244, 111, 70, 1) 0.5%, rgba(244, 111, 70, 1) 20%, rgba(254, 121, 80, 1) 30%); -o-linear-gradient(to right, rgba(254, 121, 80, 1) 0%, rgba(244, 111, 70, 1) 0.5%, rgba(244, 111, 70, 1) 20%, rgba(254, 121, 80, 1) 30%);}
#basic2_nav #mn_alz .mn { background: linear-gradient(to right, rgba(103, 163, 238, 1) 0%, rgba(93, 153, 228, 1) 0.5%, rgba(93, 153, 228, 1) 20%, rgba(103, 163, 238, 1) 30%); background: -moz-linear-gradient(to right, rgba(103, 163, 238, 1) 0%, rgba(93, 153, 228, 1) 0.5%, rgba(93, 153, 228, 1) 20%, rgba(103, 163, 238, 1) 30%); background: -webkit-linear-gradient(to right, rgba(103, 163, 238, 1) 0%, rgba(93, 153, 228, 1) 0.5%, rgba(93, 153, 228, 1) 20%, rgba(103, 163, 238, 1) 30%); -o-linear-gradient(to right, rgba(103, 163, 238, 1) 0%, rgba(93, 153, 228, 1) 0.5%, rgba(93, 153, 228, 1) 20%, rgba(103, 163, 238, 1) 30%);}
#basic2_nav #mn_extra .mn { background: linear-gradient(to right, rgba(255, 201, 60, 1) 0%, rgba(245, 191, 50, 1) 0.5%, rgba(245, 191, 50, 1) 20%, rgba(255, 201, 60, 1) 30%); background: -moz-linear-gradient(to right, rgba(255, 201, 60, 1) 0%, rgba(245, 191, 50, 1) 0.5%, rgba(245, 191, 50, 1) 20%, rgba(255, 201, 60, 1) 30%); background: -webkit-linear-gradient(to right, rgba(255, 201, 60, 1) 0%, rgba(245, 191, 50, 1) 0.5%, rgba(245, 191, 50, 1) 20%, rgba(255, 201, 60, 1) 30%); -o-linear-gradient(to right, rgba(255, 201, 60, 1) 0%, rgba(245, 191, 50, 1) 0.5%, rgba(245, 191, 50, 1) 20%, rgba(255, 201, 60, 1) 30%);}
#basic2_nav #mn_chart .mn .mnimg { background-image: url(../img/mn/mn_chart.png);}
#basic2_nav #mn_alz .mn .mnimg { background-image: url(../img/mn/mn_alz.png?0);}
#basic2_nav #mn_message .mn .mnimg { background-image: url(../img/mn/mn_message.png);}
#basic2_nav #mn_extra .mn .mnimg { background-image: url(../img/mn/mn_extra.png);}
#basic2_nav li .mn a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 1000;}
#basic2_nav li .mn a:hover { background: rgba(255, 255, 255, .2);}

#basic2_nav li .mn:before, #basic2_nav li .mn:after { content: ""; position: absolute; z-index: -2; transition: all 250ms ease-out; bottom: 12px; width: 50%; height: 55%; max-width: 200px; max-height: 100px; box-shadow: 1px 8px 12px rgba(0, 0, 0, .6);}
#basic2_nav li .mn:before, #basic2_nav li .mn:after { right: 10px;}
#basic2_nav li .mn:hover:before, #basic2_nav li .mn:hover:after { box-shadow: 1px 8px 12px rgba(0, 0, 0, .8);}
#basic2_nav li .mn:hover:before { transform: skew(-8deg) rotate(-3deg);}
#basic2_nav li .mn:hover:after { transform: skew(8deg) rotate(3deg);}
#basic2_nav li .mn:hover { border-radius: 0 0 30% 30% / 0 0 10% 10%;}
#basic2_nav li .mn:before { display: none;}
#basic2_nav li .mn:hover { border-radius: 0 0 30% 0 / 0 0 20% 0;}

/*#basic2_nav #mn_alz .mn:before, #basic2_nav #mn_alz .mn:after, #basic3_nav #mn_alz .mn:before, #basic3_nav #mn_alz .mn:after { content: ""; position: absolute; z-index: -2; transition: all 250ms ease-out; bottom: 12px; width: 50%; height: 55%; max-width: 200px; max-height: 100px; box-shadow: 1px 8px 12px rgba(0, 0, 0, 0); right: 10px;}
#basic2_nav #mn_alz .mn:hover:before, #basic2_nav #mn_alz .mn:hover:after, #basic3_nav #mn_alz .mn:hover:before, #basic3_nav #mn_alz .mn:hover:after { box-shadow: 1px 8px 12px rgba(0, 0, 0, 0);}
#basic2_nav #mn_alz .mn:hover:before, #basic3_nav #mn_alz .mn:hover:before { transform: skew(0deg) rotate(0deg);}
#basic2_nav #mn_alz .mn:hover:after, #basic3_nav #mn_alz .mn:hover:after { transform: skew(0deg) rotate(0deg);}
#basic2_nav #mn_alz .mn:hover, #basic3_nav #mn_alz .mn:hover { border-radius: 0 0 0 0 / 0 0 0 0;}
#basic2_nav #mn_alz .mn:before, #basic3_nav #mn_alz .mn:before { display: none;}*/
#basic2_nav #mn_extra .mn:before, #basic2_nav #mn_extra .mn:after, #basic3_nav #mn_extra .mn:before, #basic3_nav #mn_extra .mn:after { content: ""; position: absolute; z-index: -2; transition: all 250ms ease-out; bottom: 12px; width: 50%; height: 55%; max-width: 200px; max-height: 100px; box-shadow: 1px 8px 12px rgba(0, 0, 0, 0); right: 10px;}
#basic2_nav #mn_extra .mn:hover:before, #basic2_nav #mn_extra .mn:hover:after, #basic3_nav #mn_extra .mn:hover:before, #basic3_nav #mn_extra .mn:hover:after { box-shadow: 1px 8px 12px rgba(0, 0, 0, 0);}
#basic2_nav #mn_extra .mn:hover:before, #basic3_nav #mn_extra .mn:hover:before { transform: skew(0deg) rotate(0deg);}
#basic2_nav #mn_extra .mn:hover:after, #basic3_nav #mn_extra .mn:hover:after { transform: skew(0deg) rotate(0deg);}
#basic2_nav #mn_extra .mn:hover, #basic3_nav #mn_extra .mn:hover { border-radius: 0 0 0 0 / 0 0 0 0;}
#basic2_nav #mn_extra .mn:before, #basic3_nav #mn_extra .mn:before { display: none;}


/*for_W480-*/
@media screen and (min-width: 480px) {
/*menu_basic*/
#basic_nav { margin: 10px auto 15px auto;}
}

/*for_W640-*/
@media screen and (min-width: 640px) {
/*menu_basic*/
#basic_nav { height: 55px; max-width: 500px;}
#basic_nav li .mn { height: 50px;}
/*menu_basic2*/
#basic2_nav { height: 65px; margin: 20px auto 10px auto; max-width: 600px;}
#basic2_nav li { width: 24%; position: absolute; -webkit-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg);}
#basic2_nav #mn_chart { top: 5px; left: 2%;}
#basic2_nav #mn_alz { top: 5px; left: 27%;}
#basic2_nav #mn_message { top: 5px; left: 52%;}
#basic2_nav #mn_extra { top: 5px; left: 77%;}
}

/*for_W1000-*/
@media screen and (min-width: 1000px) {
#pgtpsp { margin: 0; position: fixed; bottom: 50px; right: 20px;}
}