@charset "utf-8";
/*reset*/
/*******************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
table { border-collapse: collapse; border-spacing: 0;}
object,embed { vertical-align: top;}
hr { display: none;}
input[type='text'], input[type='password'], textarea, select { outline: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%; line-height: 1.3;}
img,abbr,acronym { border: 0; vertical-align: middle;}
img { width: auto; max-width: 100%; height: auto;}
li { list-style: none;}
a:link { color: #E51919; text-decoration: underline;}
a:visited { color: #E51919; text-decoration: underline;}
a:hover { color: #EF7070; text-decoration: none;}
a:active { color: #E51919; text-decoration: none;}
i { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; display: inline-block; vertical-align: middle;}
.wf-active i { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1;}
.center { text-align: center;}
.right { text-align: right;}
.left { text-align: left!important;}
.clear { clear: both;}
ul.errorlist li { color: #f00; font-size: 1.0rem;}


/*LAYOUT*/
/*******************************************************************/
body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; height: 100%; background: #FFF; color: #333;}
#container { position: relative; min-width: 1040px; margin: 0 auto; text-align: left; line-height: 1.8; font-size: 12px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}
#main { position: relative; width: 1040px; margin: 0 auto;}
.in::after { content: ''; display: block; clear: both;}
#pt { position: fixed; left: 50%; bottom: 0; margin-left: -30px; width: 60px; height: 30px; z-index: 9999;}


/*HEADER*/
/*******************************************************************/
#open { display: none;}
#header { position: relative; width: 100%; font-size: 12px; line-height: 1; z-index: 9999;}
#header i { font-size: 12px;}
#header a { text-decoration: none;}
#site { padding: 2px 20px 0; text-align: right; background: #000;}
#site li { display: inline-block;}
#site li a { display: block; padding: 2px 10px; background: #000; border-radius: 2px 2px 0 0; text-decoration: none; color: #FFF;}
#site li a.selected { background: #FFF; color: #000;}
#global { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; padding: 5px 16px;}
#global h1 { font-size: 123.1%; font-style: italic; font-weight: bold;}
#global h1 img { vertical-align: bottom;}
#globallist li { position: relative; float: left;}
#global li a { display: block; padding: 0 16px; border-right: 1px solid #E51919; font-size: 93%; font-weight: bold; color: #E51919;}
#global li:last-child a { border: none;}
#global li.lang-select a { color: #969494;}
#global ul ul { position: absolute; right: 0; display: none; z-index: 100; width: 100px; background: #FFF;}
#global ul ul li { width: 100px;}
#global ul ul li a { padding: 10px; border: none;}
#global ul ul li a:hover { background: #EEE;}
#loginframe { width: 500px; padding: 0 16px;background: #fafafa;}
#function { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; height: 56px; background: #EEE;}
#function i { font-size: 30px;}
#functionsearch { display: -webkit-flex; display: flex; width: 50%; height: 36px; margin: 10px;}
#functionsearch [type="text"] { width: calc(100% - 50px); height: 36px; padding: 2px 10px; border: 1px solid #CCC; border-radius: 6px 0 0 6px;}
#functionsearch [type="submit"] { width: 50px; height: 36px; margin: 0; padding: 4px; background: #363636; border: none; border-radius: 0 6px 6px 0; font-size: 14px; color: #FFF;}
#function > ul { display: -webkit-flex; display: flex;}
#function > ul > li { position: relative; display: -webkit-flex; display: flex; font-size: 14px;}
#function li a { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 10px; border-left: 1px solid #CCC; color: #363636;}
#functionlist li a i { position: relative;}
#functionlist li a span { position: absolute; top: -8px; right: -3px; display: block; min-width: 18px; min-height: 18px; text-align: center; background: #E51919; border-radius: 10px; font-size: 10px; font-family: Arial, Helvetica, "sans-serif"; line-height: 18px; color: #FFF;}
#function ul ul { position: absolute; top: 56px; right: 0; display: none; width: 150px; z-index: 9999; background: #FFF;}
#function ul ul li a { padding: 10px; border: none;}
#function ul ul li a:hover { background: #EEE;}
#nav { background: #E51919;}
#nav ul { display: -webkit-flex; display: flex; padding: 10px 0;}
#nav li a { display: block; padding: 0 16px; border-right: 1px solid #FFF; color: #FFF;}
#nav li:last-child a { border-right: none;}
#sublist { background: #DDD;}
#sublist li a { border-color: #999; color: #000;}
#bread { margin-bottom: 20px; background: #EEE; border-radius: 5px; overflow: hidden;}
#bread li { float: left; line-height: 1;}
#bread a { position: relative; float: left; padding: .7em 1em .7em 3em; background: #AAAFB5; text-decoration: none; color: #333;}
#bread a:hover { color: #E51919;}
#bread li:first-child a { padding-left: 1.5em; border-radius: 5px 0 0 5px;}
#bread a:after, #bread a:before { content: ""; position: absolute; top: 50%; right: -1.5em; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1.5em solid;}
#bread a:after { border-left-color: #AAAFB5; z-index: 3;}
#bread a:before { border-left-color: #EEE; right: -1.6em; z-index: 2;}
#bread strong { display: block; padding: .7em 1em .7em 2.5em; color: #000;}


/*FOOTER*/
/*******************************************************************/
#footer { clear: both; background: #444; border-top: #D6D6D6 solid 5px; color: #FFF;}
#footer .in { padding: 16px;}
#footer dl { float: left; width: 180px; margin-right: 40px;}
#footer dt { font-size: 131%; font-weight: bold;}
#footer dd a { display: block; padding: 2px 0 2px 14px; background: url(../images/dot.gif) 0 center no-repeat; border-bottom: #666 dotted 1px;}
#footer dd a:hover { text-decoration: none; color: #999;}
#footer a { text-decoration: none; color: #FFF;}
#footer .social { float: right; padding-bottom: 30px;}
#footer .social li { float: left; padding-left: 5px;}
#footer .social li img { border: #444 solid 1px;}
#footer .social li a:hover img { border-color: #FFF;}
#footer p { clear: right; float: right; margin-bottom: 10px;}
#footer p.mm a { display: block; padding: 10px; background: #333; border: #666 solid 1px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; behavior: url(/static/css/border-radius.htc);}
#footer p.mm a:hover { background: #555; border-color: #888;}
#complied { width: 100%;}
.complied a { color: #888!important;}
.hidden { display: none;}


/*CONTENTS*/
/*******************************************************************/
#row { display: -webkit-flex; display: flex; justify-content: -webkit-space-between; justify-content: space-between;}
#row #contents { width: calc(100% - 200px); padding-bottom: 56px; order: 1; border-left: 1px solid #EEE;}
#row.three #contents { width: calc(100% - 482px);}
#row.three #contents h2{ padding-left: 16px;}
#contents h2 { margin-bottom: 16px; padding: 16px 0 8px; border-bottom: 1px solid #CCC; font-size: 22px;}
#contents h3 { padding: 16px 0; vertical-align: middle; font-size: 20px;}
#contents h3::before { content: 'remove'; vertical-align: top; font-family: 'Material Icons'; color: #E51919;}
#page #contents { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 16px 56px;}
#left { width: 200px;}
#left h4 { padding: 8px 16px; font-size: 14px; background: #ffffff; background: -webkit-linear-gradient(left, #ffffff 0%,#eeeeee 100%); background: linear-gradient(to right, #ffffff 0%,#eeeeee 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 );}
#left ul, #left ol { margin: 8px 16px;}
#left ul ul { margin: 0 0 0 16px;}
#left li a { position: relative; display: block; text-decoration: none; color: #333;}
#left .list li a::after { content: 'chevron_right'; display: inline-block; float: right; font-family: 'Material Icons';}
#left ol { counter-reset: item;}
#left ol li { padding-top: 5px;}
#left ol li a::before { counter-increment: item; content: counter(item)'.'; display: inline-block; min-width: 18px; min-height: 18px; margin-right: 5px; text-align: center; background: #E51919; border-radius: 10px; font-size: 10px; line-height: 18px; color: #FFF;}
#left i { font-size: 18px;}
#right { width: 282px; padding: 16px; order: 2;}
#right li { padding-bottom: 16px; text-align: center;}
.box { margin-bottom: 16px; background: #FFF; border: 8px solid #EEE; box-shadow: 0 0 0 1px #CCC; border-radius: 4px;}
.box .btn a { display: block; background: #E51919; font-size: 16px; color: #FFF;}
.narrow { max-width: 880px; margin: 0 auto; padding: 24px;}
.warning { padding: 16px 16px 1px; background: #fff58b; border-radius: 4px;}
.warning h4 { padding-bottom: 8px; text-align: center; font-size: 16px; font-weight: bold; color: #E51919;}
.btn { margin: 16px; text-align: center; white-space: nowrap;}
.btn a { display: inline-block; padding: 2px 8px; border: 1px solid #E51919; border-radius: 4px; text-decoration: none; color: #E51919;}
.ptbtn a { display: block; padding: 2px 8px; border: 1px solid #26b800; border-radius: 4px;background:#26b800; text-decoration: none; color: #FFF;margin-bottom:10px;font-size:18px;text-align:center;}

.btn:not(.orange):not(.green):not(.grey):not(.black) a::after, .morebtn a::after { content: 'chevron_right'; display: inline-block; vertical-align: middle; font-family: 'Material Icons';}
.btn.orange a { background: #ff6c00; border-color: #ff6c00; color: #FFF;}
.btn.green a { background: #26b800; border-color: #26b800; color: #FFF;}
.btn.grey a { background: #DDD; border-color: #CCC; color: #666;}
.btn.black a { background: #333; border-color: #000; color: #FFF;}
.btn span { display: block; font-size: 12px;}
.morebtn { margin: 0 16px; text-align: right;}
.morebtn a { border-bottom: 2px solid #E51919; text-decoration: none;}
.form { max-width: 500px; margin: 16px auto 32px!important;}
.form dt { clear: left; float: left; width: 30%; padding: 16px 0;}
//.form dd { margin: 0!important; padding: 16px 0 16px 34%; border-bottom: 1px solid #CCC;}
.form dd { margin: 0!important; padding: 16px 0 16px 34%;}

.form input { width: 100%;}
#contents h4 { margin-bottom: 16px; padding-bottom: 4px; border-bottom: 1px solid #CCC; font-size: 16px;}
#contents h5 { padding: 16px 0; font-size: 14px;}
#page p { line-height: 1.6;}
#page p:not(:last-child) { padding-bottom: 16px;}
#page table { width: 100%; margin-bottom: 16px;}
#page tr { border-bottom: 1px dotted #CCC;}
#page th, #page td { padding: 8px 16px; vertical-align: top;}
#page th { width: 200px;}
#page td li { padding-bottom: 10px;}
#page form dl { margin: 16px 0 32px;}
#page form dd { margin: 16px 0 32px;}
#page form label { display: inline-block; margin: 0 2vw 1vh 0;}
fieldset { padding: 24px; border: 1px solid #CCC; border-radius: 6px;}
input, select, textarea { padding: 8px; background: #FFF; border: 1px solid #b1b2b5; color: #393939;}
input { width: 50%;}
textarea { width: 100%; min-height: 160px;}
input[type="file"] { padding: 0; border: none;}
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin-right: 5px; vertical-align: middle; background: none;}
input[type="submit"] { width: auto; margin: 10px; padding: 4px 32px; background: #2978fb; border: none; border-radius: 4px; font-size: 18px; color: #FFF; cursor: pointer;}
input[type="reset"] { width: auto; margin: 10px; padding: 4px 32px; background: #CCC; border: none; border-radius: 4px; font-size: 18px; color: #FFF; cursor: pointer;}
.editbtn { float: right;}
.edit { display: none; clear: both; margin: 16px 0; padding: 16px; background: #FFF; border-radius: 6px;}
#page tr.active { background: #fffde1;}
.annotation { color: #777;}
.required { color: #F00;}
.success { font-size: 1.2rem; }
.error { font-size: 1.2rem; color: #f00; }


/*TOP*/
.watch { width: 100%; border-bottom: 1px solid #EEE; overflow: hidden;}
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list { position: relative; display: block; overflow: hidden;}
.slick-list:focus { outline: none;}
.slick-list.dragging { cursor: pointer; cursor: hand;}
.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}
.slick-track:before, .slick-track:after { display: table; content: '';}
.slick-track:after { clear: both;}
.slick-loading .slick-track { visibility: hidden;}
.slick-slide { display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide { float: right;}
.slick-slide.slick-loading img { display: none;}
.slick-slide.dragging img { pointer-events: none;}
.slick-initialized .slick-slide { display: block;}
.slick-loading .slick-slide { visibility: hidden;}
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden { display: none;}
.slick-arrow:hover { opacity: .6;}
.watch .slick-arrow { position: absolute; top: 0; width: 799px; height: 100%; margin: auto; text-indent: -9999px; white-space: nowrap; overflow: hidden; background-color: rgba(0,0,0,.1); background-image: url(../images/slick.png); background-repeat: no-repeat; border: none; cursor: pointer; outline:none; z-index: 100;}
.watch .slick-prev { left: 50%; margin-left: -1198px; background-position: right -40px top 50%;}
.watch .slick-next { right: 50%; margin-right: -1198px; background-position: left -40px top 50%;}
.slick-disabled { opacity: 0; pointer-events: none;}

.grid { padding: 0 16px;}
.grid ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.grid li { -webkit-flex-basis: 20%; flex-basis: 20%; padding: 0.5%;}
.grid li a { text-decoration: none;}
.grid li a:hover { text-decoration: underline;}
.grid .title { padding: 8px; font-weight: bold;}
.grid .title a { text-decoration: none; color: #000;}
.description dl { padding: 0 8px 8px; font-size: 12px; color: #999;}
.description dt { clear: left; float: left; width: 70px;}
.description dt::after { content: 'more_horiz'; display: inline-block; float: right; font-family: 'Material Icons';}
.description dd { margin-left: 70px;}
.description dd a { color: #999;}
.ranking ul { counter-reset: item;}
.ranking li { position: relative;}
.ranking li::before { counter-increment: item; content: counter(item); font-weight: bold;}
.ranking li:nth-child(-n+3)::before { display: inline-block; min-width: 22px; min-height: 22px; text-align: center; border-radius: 10px; line-height: 22px; color: #FFF;}
.ranking li:nth-child(-n+3)::after { position: absolute; top: 0; left: 30px; content: 'flag'; font-family: 'Material Icons'; font-size: 24px;}
.ranking li:nth-child(1)::before { background: #eab600;}
.ranking li:nth-child(2)::before { background: #9a9a9a;}
.ranking li:nth-child(3)::before { background: #e0903f;}
.ranking li:nth-child(1)::after { color: #eab600;}
.ranking li:nth-child(2)::after { color: #9a9a9a;}
.ranking li:nth-child(3)::after { color: #e0903f;}
.gridlist { margin-bottom: 24px; border-top: #CCC dotted 1px;}
.gridlist li { display: table; width: 100%; padding: 16px 0; border-bottom: 1px dotted #CCC;}
.gridlist li > div { display: table-cell; vertical-align: middle;}
.gridlist li div.delete { width: 30px;}
.gridlist li div.trim { width: 20%;}
.gridlist li div.description { padding: 0 16px;}
.gridlist li div.description dl { float: left;}
.gridlist li div.price { font-weight: bold; color: #E51919;}
.gridlist li div.meta { clear: both; padding: 2px 8px; background: #F8F8F8; border-radius: 6px;}
.gridlist li div.meta span { display: inline-block; padding-right: 16px;}
.gridlist li div.meta span i { font-size: 14px;}
.gridlist li div.date { width: 200px; text-align: center;}
.gridlist li div.date div { margin-bottom: 8px; border: 1px solid #999; font-size: 14px;}
.gridlist li div.date div.private { border-color: #F00; color: #F00;}
.gridlist li div.action { width: 200px; text-align: center;}
.gridlist li div.action .btn { display: inline-block;}
.gridlist .title { padding-bottom: 8px; font-weight: bold;}

.sort, .pager { margin: 8px 0;}
#row .sort, #row .pager, #row .flow { margin: 8px 24px;}
.sort p, .sort ul, .sort li { display: inline-block;}
.sort li { display: inline-block; padding: 1px 4px;}
.sort li a { text-decoration: none;}
.sort li span { display: inline-block; border-bottom: 2px solid #000; font-weight: bold;}
.pager::after { content: ''; display: block; clear: both;}
.pager p { float: left;}
.pager ul { float: right; text-align: right;}
.pager ul li { display: inline-block;}
.pager ul li a, .pager ul li span { display: inline-block; margin: 1px; padding: 1px 4px; border: 1px solid #EEE; text-decoration: none;}
.pager ul li span { color: #000; font-weight: bold; background-color: #f4f4f4;}
.flow { margin: 8px 0 24px; text-align: center;}
.flow ol { margin-left: 30px;}
.flow li { display: inline-block;}
.flow li:not(:first-child)::before { content: ''; display: inline-block; width: 20px; height: 2px; margin: 0 8px; vertical-align: middle; background: #CCC;}
.flow li.on { color: #F00;}


/*MOVIE*/
#moviearea, #cartarea { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between;}
#movie, #cart { width: 62%;}
.sentence { max-height: 350px; margin-top: 24px; overflow: auto; overflow-X: hidden; font-size: 14px;}
#info { width: calc(38% - 24px); padding: 2%; background: #F5F5F5;}
.plan { margin: 0 16px 16px; padding-bottom: 16px; border-bottom: 1px dashed #CCC;}
.total { margin: 16px; padding-bottom: 16px; border-bottom: 1px dashed #CCC;}
.plan label { display: block !important; margin: 16px 0 0 !important; border: 1px solid #CCC;}
.plan dl, .total dl { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 !important; padding: 8px 16px; background: #FFF; font-weight: bold; line-height: 1;}
.plan dd { margin: 0 !important }
dd.price { margin-left: auto !important; text-align: right; font-size: 20px; color: #E51919;}
dd.price span { display: inline-block !important; vertical-align: bottom; font-size: 14px;}
#info .box .btn a { padding: 8px; font-size: 16px;}
.info { margin-bottom: 16px; padding: 4%; background: #FFF;}
.info dd { margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid #EEE;}
.info dt { clear: left; float: left; padding-right: 16px; color: #999;}
.rating { color: #FFA600;}
.ex li { display: inline-block; padding: 4px;}
.ex li a { text-decoration: none; font-size: 11px; color: #666;}
.ex li a::before { content: 'chevron_right'; display: inline-block; vertical-align: middle; font-family: 'Material Icons';}
#gallery ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center;}
#gallery li { -webkit-flex-basis: 10%; flex-basis: 10%; padding: 0.5%;}
#relation .slick-arrow { position: absolute; top: calc(50% - 20px); width: 40px; height: 40px; text-indent: -9999px; white-space: nowrap; overflow: hidden; background-image: url(../images/slick.png); background-repeat: no-repeat; border: none; cursor: pointer; outline:none; z-index: 100;}
#relation .slick-prev { left: -40px; background-position: 0 0;}
#relation .slick-next { right: -40px; background-position: -40px 0;}
#relation ul { margin: 0 40px;}
#relation li { padding: 0.5%;}
#relation .description { padding: 4px 0;}
#relation .description .title { width: 100%; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.description .title a { text-decoration: none; color: #000;}
.description .rating { float: left;}
.description .rating i { font-size: 14px;}
.description .price { float: right; font-size: 11px;}
#reviewarea::after { content: ''; display: block; clear: both;}
#review { float: left; width: 66%;}
#review .val { margin-bottom: 16px; padding: 16px; background: #F5F5F5; border-radius: 6px; font-size: 14px;}
.reviewlist { margin-bottom: 16px;}
.reviewlist li { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #EEE;}
.reviewlist .title { display: inline-block; padding: 0 8px; font-size: 14px; font-weight: bold;}
.reviewlist .rating i { vertical-align: baseline; font-size: 16px;}
.reference { padding-top: 8px; color: #999;}
.reference span { display: inline-block; margin: 0 4px;}
.reference a { display: inline-block; margin: 0 4px; padding: 0 4px; background: #F5F5F5; border: 1px solid #CCC; text-decoration: none; color: #666;}
.reviewmorebtn { color: #E51919; cursor: pointer;}
.reviewmore { display: none;}
#page .reviewlist p:not(:last-child) { padding-bottom: 1vh;}
#review .pager { margin: 0;}
#reviewform { float: right; width: calc(34% - 24px);}
.payment input { width: auto !important }

/*OTHER*/
#upfile { margin-bottom: 24px; padding: 32px 24px; text-align: center; background: #99d8d5; border: #CCC dashed 1px;}
#upfile label { cursor: pointer;}
#upfile div { display: inline-block; padding: 8px 24px; background: #FFF;border-bottom: 1px solid #CCC; font-size: 18px; font-weight: bold; border-radius: 50px; transition: .3s;}
#upfile div:hover { background-color: #333; color: #FFF;} 
#upfile p { font-size: 16px;}
#upload { margin-bottom: 24px;}
#upload li { display: table; width: 100%; table-layout: fixed; padding: 30px; background: #ededed; border-top: 1px solid #FFF; border-bottom: 1px solid #CCC;}
#upload .status { display: table-cell; width: 70%; vertical-align: bottom;}
#upload .progress { height: 20px; background: #CCC; border-radius: 2px;}
#upload .bar { height: 20px; border-radius: 2px; -webkit-background-size: 20px 20px; -moz-background-size: 20px 20px; background-size: 20px 20px; background-color: #94d6d3;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #66bbb7), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #66bbb7), color-stop(.75, #66bbb7), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(-45deg, #66bbb7 25%, transparent 25%, transparent 50%, #66bbb7 50%, #66bbb7 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, #66bbb7 25%, transparent 25%, transparent 50%, #66bbb7 50%, #66bbb7 75%, transparent 75%, transparent);}
#upload .bar:not(.stop) { animation: move-stripe 0.5s infinite linear; -webkit-animation: move-stripe 0.5s infinite linear;}
@keyframes move-stripe { 0% { background-position-x: 0;} 100% { background-position-x: 20px;}}
#upload .btn { display: table-cell; width: 30%; padding-left: 20px; vertical-align: bottom;}
#upload .btn a { display: block;}
.tabarea { margin-bottom: 24px; border: 1px solid #CCC;}
#page .tabarea tr:last-child { border-bottom: none;}
.tabarea ul::after { content: ''; display: block; clear: both;}
.tabarea li, .imgfile li { position: relative; float: left; padding: 4px;}
.tabarea ul:not(.imgfile) li a { text-decoration: none; color: #333;}
.tabarea ul:not(.imgfile) li a i { font-size: 14px; font-weight: bold;}
.imgfile label { margin-left: 16px;}
.imgfile i { position: absolute; top: 0; right: 0; color: #333;}
.tab { background: #DDD; border-bottom: 1px solid #CCC;}
.tab::after { content: ''; display: block; clear: both;}
.tab li { position: relative; float: left; padding: 8px 4%; background: #EEE; border-right: 1px solid #CCC; font-weight: bold; cursor: pointer;}
.tab li.selected { background: #FFF;}
.tab li.selected::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #FFF;}
.tabbox { display: none;}
.show { display: block;}
.or_red {color: #e51919; font-size: 1.2rem;}

.accordion { margin: 0 0 24px;}
#row .accordion { margin: 0 24px 24px;}
.accordion dt { padding: 8px; border-bottom: 1px solid #CCC; cursor: pointer; font-weight: bold;}
.accordion dt::before { content: 'chevron_right'; display: inline-block; padding-right: 8px; vertical-align: middle; font-family: 'Material Icons';}
.accordion dt:hover, .accordion dt.active { background: #99d8d5;}
.accordion dt.active { border-bottom-style: dashed;}
.accordion dt.active::before { content: 'expand_more';}
.accordion dd { display: none; padding: 8px; background: #fffde1; border-bottom: 1px solid #CCC;}
.accordion .allopen, .accordion .allclose, .editbtn { display: inline-block; margin: 0 2px 5px; padding: 2px 10px; background: #BCBCBC; font-size: 13px; font-weight: bold; text-decoration: none; color: #FFF!important; border-radius: 4px; cursor: pointer;}
.accordion .allopen:hover, .accordion .allclose:hover { background: #999;}

.table th { text-align: center; background: #99d8d5; border-right: 1px solid #FFF;}
.table td { text-align: right; border-right: 1px dotted #EEE;}
.table td:first-child { text-align: center; border-left: 1px dotted #EEE;}

.batch { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between;}
.batch li { width: 20%; padding: 0.5%; text-align: center;}
.batch li a { display: block; padding: 16px; border: 1px solid #CCC; border-radius: 6px; font-size: 14px; text-decoration: none; color: #333;}
.batch li i { display: block; font-size: 40px; color: #999;}

.point {
  font-size: 1.2rem;
}


/*responsive*/
@media only screen and (max-width: 1360px){
.slick img { width: 100%; max-width: initial;}
.slick-arrow { width: 40px;}
.slick-prev { left: 0; margin-left: 0;}
.slick-next { right: 0; margin-right: 0;}
.grid li { -webkit-flex-basis: 33.3%; flex-basis: 33.3%;}
}


@media only screen and (max-width: 780px){
#container { min-width: 100%;}

/*HEADER*/
#site, #globallist, #function, #nav { display: none;}
#global { display: block; padding-top: 2px; text-align: center;}
#global h1 img { width: 160px;}
#global h1 span { display: block; padding-top: 4px; font-size: 12px;}
#loginframe { width: 100%;}
#open { display: block; position: fixed; top: 10px; left: 10px; z-index: 200000;}
.sidr { display: none; position: absolute; position: fixed; top: 0; width: 210px; height: 100%; text-align: left; background: rgba(20,20,30,1.00); overflow-x: none; overflow-y: auto; z-index: 999999;}
.sidr .sidr-inner { clear: both;}
.sidr.left{ left: -210px; right: auto;}
.sidr a { text-decoration: none; color: #FFF;}
#aside li { padding: 4px; border-top: #444 solid 1px;}
#aside li a { display: block; padding: 0; font-size: 14px;}
#aside li ul { margin-left: 20px;}
#aside li li { border: none;}
#aside li li a { padding: 0; font-size: 12px;}
#aside .lang-select ul { margin-left: 0; text-align: center;}
#aside .lang-select li { display: inline-block; border: none; font-size: 10px;}
#functionsearch i { display: none;}
#functionsearch { width: calc(100% - 20px);}


/*FOOTER*/
#footer .in { padding: 10px;}
#footer dl { float: none; width: 100%; margin: 0 0 15px;}
#footer dd { display: inline-block; width: 48%;}
#footer .social { float: none; padding-bottom: 15px; text-align: center;}
#footer .social li { float: none; display: inline-block; padding: 0;}
#footer p { float: none; text-align: center;}


/*CONTENTS*/
#row { display: block;}
#contents, #left, #right { width: 100%!important;}
.narrow { padding: 0;}
.form { margin: 16px auto!important;}
.form dt { float: none; width: 100%; padding: 16px 0 0;}
.form dd { padding: 8px 0 16px;}
#page table:not(.table) th, #page table:not(.table) td { display: block; padding: 8px;}
#page table:not(.table) th { width: 100%; padding-bottom: 0;}
.swipe { overflow: auto; white-space: nowrap;}
.scroll::-webkit-scrollbar { height: 5px;}
.scroll::-webkit-scrollbar-track { background: #F1F1F1;}
.scroll::-webkit-scrollbar-thumb { background: #BCBCBC;}
#page form label { display: block;}
input { width: 100%;}
    

/*TOP*/
.grid ul { display: block;}
.grid li, #row.three .grid li:last-child { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #EEE;}
.grid .trim { width: 40%;}
.grid .description { width: 60%;}
.grid .title { padding-top: 0; line-height: 1.4;}
.ranking li::before { position: absolute; top: 0; left: 0; padding: 4px; background: #FFF; font-size: 12px;}
.ranking li:nth-child(-n+3)::before { min-width: auto; min-height: auto; border-radius: 0; line-height: 1;}
.ranking li:nth-child(-n+3)::after { display: none;}
.gridlist li > div { display: block;}
.gridlist li div.delete { width: auto; margin-bottom: 16px;}
.gridlist li div.trim { width: 100%; text-align: center;}
.gridlist li div.description { padding: 16px 0;}
.gridlist li div.description::after { content: ''; display: block; clear: both;}
.gridlist li div.date { clear: both; width: 100%;}
.gridlist li div.action { width: 100%; text-align: center;}
.gridlist li div.action .btn { display: inline-block; margin: 8px;}
.pager p { float: none;}
.pager ul { float: none; margin: 16px 0; text-align: center;}


/*MOVIE*/
#moviearea, #cartarea { display: block;}
#movie, #cart { width: 100%;}
.sentence { max-height: 300px;}
#info { width: 100%;}
#gallery li { -webkit-flex-basis: 25%; flex-basis: 25%;}
#relation ul { margin: 0;}
#review { float: none; width: 100%; padding-bottom: 24px;}
#review .val span { display: block;}
#reviewform { float: none; width: 100%;}

    
/*OTHER*/
#upload li { display: block;}
#upload .status { display: block; width: 100%;}
#upload .btn { display: inline-block; width: 100%; margin: 16px 0 0; padding-left: 0;}
.imgfile li { width: 25%;}
.batch li { width: 50%;}
}

/*ADDED*/
/*******************************************************************/
.vheader{}
.image_vender{width:100%; height:260px; max-height:260px; object-fit: cover;}
.image_circle {width: 150px; height:150px; border-radius:50%; background-image: url("../images/profile-icon.png"); border:6px solid #FFF; background-size: cover; background-position: center;  margin:30px 20px 4px 20px; float:left;}
.image_circle_s {width: 50px; height:50px;}
.vender_header_item{margin-right:30px;display: inline-block;font-size:16px;}
.vheader_left{float:left;  margin:50px 20px;}
.vheader_left h4 {border:none!important;font-size:22px!important;}
.vheader_btn{margin:50px 30px 0 0;float:right;}
.vheader_btn a{background:#66F;padding:10px 50px;margin:120px 0;text-align:center;color:#FFF;text-decoration:none;border-radius: 6px;}
.vheader_btn a.following{background:#ccc}
.vender_menu{margin-top:20px;}
.vender_menu ul{border-bottom:4px solid #EEE; padding-bottom:44px; padding-left:12px;}
.vender_menu li{font-size:18px; padding:10px 16px; float:left;}
.vselected{font-weight:bold; color:#333;}
.vender_menu a{color:#666;text-decoration:none;}

.vpickup{
    zoom: 1; /* float解除 for IE6/7  */
  border-bottom:1px solid #CCC;
}
.vpickup:after, .vpickup:before {
    content: "";
    clear: both;
    display: block;
}
.v_movie{width:490px;}

.vpickup_left{float:left; width: 450px; padding:20px;}
.vpickup_right{float:left;padding:20px; width: calc(100% - 490px);min-width:400px;font-size:16px;}
.price2{font-weight:bold;color:#e51919;}

@media only screen and (max-width: 780px){
.vpickup_left{width:100%}
.vpickup_right{width:100%;}
}

.vheader{}
.image_vender{width:100%; height:260px; max-height:260px; object-fit: cover;}
.image_circle {width: 150px; height:150px; border-radius:50%; background-image: url("../../static/images/profile-icon.png"); border:6px solid #FFF; background-size: cover; background-position: center;  margin:30px 20px 4px 20px; float:left;}
.vender_header_item{margin-right:30px;display: inline-block;font-size:16px;}
.vheader_left{float:left;  margin:50px 20px;}
.vheader_left h4 {border:none!important;font-size:22px!important;}
.vheader_btn{margin:50px 30px 0 0;float:right;}
.vheader_btn a{background:#66F;padding:10px 50px;margin:120px 0;text-align:center;color:#FFF;text-decoration:none;border-radius: 6px;}
.vender_menu{margin-top:20px;}
.vender_menu ul{border-bottom:4px solid #EEE; padding-bottom:44px; padding-left:12px;}
.vender_menu li{font-size:18px; padding:10px 16px; float:left;}
.vselected{font-weight:bold; color:#333;}
.vender_menu a{color:#666;text-decoration:none;}
.vender-description{background:#fffde4;margin:10px 20px;padding:20px;font-size:14px;}
.vender-description p{margin-bottom:14px;}


.vpickup{zoom: 1; /* float解除 for IE6/7  */ border-bottom:1px solid #CCC;}
.vpickup:after, .vpickup:before {content: "";clear: both;display: block;}
.v_movie{width:490px;}
.vpickup_left{float:left; width: 450px; padding:20px;}
.vpickup_right{float:left;padding:20px; width: calc(100% - 490px);min-width:400px;font-size:16px;}
.price2{font-weight:bold;color:#e51919;}

.fr_img_tg{position: related;}
.fr_img_tg_free{position: absolute;background:#0A0;padding:6px;color:#FFF;}
.fr_img_tg_pay{position: absolute;background:#A00;padding:6px;color:#FFF;}


@media only screen and (max-width: 780px){
.vpickup_left{width:100%}
.vpickup_right{width:100%;}
}

.result-font{font-size:18px;}

/*FOLOWINGS*/
/*******************************************************************/
.channel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1200px;
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}

.channel-thumb {
  width: 200px;
  height: 200px;
  flex: 0 0 200px;
}

.channel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px; /* 丸くする */
}

.channel-body {
  flex: 1 1 auto;
  min-width: 0; /* テキストがはみ出さないように */
}

.channel-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.channel-desc {
  font-size: 12px;
  color: #606060;
  line-height: 1.4;
  /* 2行で切る場合 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.channel-action {
  margin-left: 12px;
}

.channel-btn {
  background: #f1f1f1;
  border: 1px solid #d3d3d3;
  border-radius: 16px;
  padding: 6px 16px;
  font-size: 12px;
  cursor: pointer;
}

/* ホバーなど任意 */
.channel-btn:hover {
  background: #e5e5e5;
}

/* スマホ対策で右のボタンを下に落とす場合 */
@media (max-width: 520px) {
  .channel-body{width:100%;}
  .channel-item {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .channel-action {
    margin-left: 72px;
    margin-top: 6px;
    width:100%;
  }
}

/*FOLOWINGS*/
/* ===== フキ出しデザイン ===== */
.sale-bubble {
  position: relative;
  width: 100%;
  background: #ff4d4d; /* 好みの色 */
  color: #fff;
  padding: 0.8em 1em;
  margin: 1.6em 0;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  box-sizing: border-box;
}

/* 下向きセンター三角 */
.sale-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #ff4d4d;
}

/* アイコン */
.sale-icon {
  margin-right: .4em;
  font-size: 1.2em;
}