@charset "UTF-8";
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---- global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
* { padding: 0; margin: 0; }

body#thickbox { width: 820px; height: 620px; max-height: 620px; text-align: left; background: #fff; position: relative; }

body#thickbox h3 { padding: 0 15px; width: 790px; height: 35px; line-height: 35px; color: #fff; background: #00a59f; }

body#thickbox #modal_wrap { width: 820; height: 620px; position: relative; overflow: hidden; }

body#thickbox #modal_wrap #moviearea { top: 65px; left: 30px; width: 480px; height: 350px; position: absolute; }

body#thickbox #modal_wrap #moviearea * { top: 0; left: 0; position: absolute; }

/* 黄色の吹き出し */
body#thickbox #modal_wrap #detail { width: 480px; height: 127px; left: 30px; top: 430px; position: absolute; background: #e9e9e9; border-radius: 8px; }

body#thickbox #modal_wrap #detail dl { width: 455px; margin: 16px 10px 10px 10px; font-weight: bold; font-size: 12px; }

body#thickbox #modal_wrap #detail dl dt { border-bottom: 1px solid #292929; padding-bottom: 7px; margin-bottom: 7px; line-height: 13px; }

body#thickbox #modal_wrap #detail dl dd { line-height: 140%; margin-bottom: 5px; }

body#thickbox #modal_wrap #detail dl dd span { font-size: 14px; }

body#thickbox #modal_wrap #relatedarea { top: 65px; right: 30px; width: 250px; position: absolute; }

body#thickbox #modal_wrap #relatedarea dl { margin-bottom: 10px; width: 250px; background: transparent url(../../images/modal/related_bg.jpg) no-repeat bottom left; }

body#thickbox #modal_wrap #relatedarea dl dt { width: 250px; }

body#thickbox #modal_wrap #relatedarea dl dd { width: 230px; height: 146px; overflow: hidden; position: relative; }

body#thickbox #modal_wrap #relatedarea dl dd span { top: 0; left: 10px; width: 230px; position: absolute; display: block; }

body#thickbox #modal_wrap #relatedarea dl dd ul { width: 230px; }

body#thickbox #modal_wrap #relatedarea dl dd ul li { width: 230px; height: 73px; float: left; display: block; overflow: hidden; }

body#thickbox #modal_wrap #relatedarea dl dd ul li a.related_thumb { width: 91px; height: 63px; float: left; display: inline; }

body#thickbox #modal_wrap #relatedarea dl dd ul li a.related_text { padding-left: 15px; font-size: 80%; line-height: 140%; width: 115px; float: left; display: inline-block; overflow: hidden; background: transparent url(../../images/modal/related_arrow.jpg) no-repeat top left; }

/* =======================================
	ClearFixElements
======================================= */
body#thickbox #modal_wrap #relatedarea dl dd ul:after, body#thickbox #modal_wrap #relatedarea dl dd ul li:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }

body#thickbox #modal_wrap #relatedarea dl dd ul, body#thickbox #modal_wrap #relatedarea dl dd ul li { display: inline-block; overflow: hidden; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---- thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay { position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; }

.TB_overlayMacFFBGHack { background: url(../../images/modal/macFFBgHack.png) repeat; }

.TB_overlayBG { background-color: #000; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }

* html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); }

#TB_window { top: 50%; left: 50%; width: 820px; background: #ffffff; text-align: left; display: none; position: fixed; z-index: 102; }

* html #TB_window, * html #TB_window_list { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); }

#TB_window a:link { color: #292929; }

#TB_window a:visited { color: #292929; }

#TB_window a:hover { color: #292929; }

#TB_window a:active { color: #292929; }

#TB_window a:focus { color: #292929; }

#TB_window img#TB_Image, #TB_window_list img#TB_Image { display: block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666; border-left: 1px solid #666; }

#TB_title { top: 0; left: 0; width: 820px; position: absolute; }

#TB_ajaxWindowTitle { float: left; padding: 7px 0 5px 10px; margin-bottom: 1px; }

#TB_caption { height: 25px; padding: 7px 30px 10px 25px; float: left; }

#TB_closeWindow { margin: 5px 10px 5px 0; width: 95px; height: 35px; text-indent: -9999px; float: right; }

#TB_closeAjaxWindow { top: -10px; right: -10px; width: 51px; height: 51px; position: absolute; z-index: 99; }

#TB_closeWindowButton { width: 51px; height: 51px; text-indent: -9999px; background: transparent url(../../images/modal/close.png) no-repeat left top; display: block; }

#TB_ajaxContent { clear: both; padding: 2px 15px 15px 15px; text-align: left; line-height: 1.4em; }

#TB_ajaxContent.TB_modal { padding: 15px; }

#TB_ajaxContent p { padding: 5px 0px 5px 0px; }

#TB_load { position: fixed; display: none; height: 13px; width: 208px; z-index: 103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ }

* html #TB_load { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); }

#TB_HideSelect { z-index: 99; position: fixed; top: 0; left: 0; background-color: #fff; border: none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; height: 100%; width: 100%; }

* html #TB_HideSelect { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); }

#TB_iframeContent { clear: both; border: none; /*	margin-bottom:-1px;
	margin-top:1px;
	_margin-bottom:1px;*/ }

#thickbox #footer { padding: 0 15px; width: 790px; height: 35px; line-height: 35px; color: #fff; background: #00a59f; position: absolute; bottom: 0; left: 0; text-align: right; }

/*SP*/
@media (max-width: 640px) { #TB_window { width: 90% !important; margin: 0 auto !important; top: 10%; left: 5%; position: fixed; }
  body#thickbox { width: 100%; box-sizing: border-box; padding: 15px; height: inherit; text-align: left; background: #fff; position: relative; }
  body#thickbox #modal_wrap { width: 100%; height: auto; }
  body#thickbox #modal_wrap #moviearea { width: 100%; height: 220px; position: static; }
  body#thickbox #modal_wrap #moviearea object { height: 230px; width: 100% !important; }
  body#thickbox #modal_wrap #relatedarea { width: 100%; position: static; }
  body#thickbox #modal_wrap #relatedarea dl { width: 100%; background: #F9F8F6; }
  body#thickbox #modal_wrap #relatedarea dl dt, body#thickbox #modal_wrap #relatedarea dl dd { width: 100%; }
  #thickbox #footer { padding: 0 15px; width: 100%; color: #fff; background: #00a59f; text-align: center; }
  body#thickbox #modal_wrap #detail { background: transparent url(../../images/modal/bg_detail.gif) no-repeat bottom left; background: #e9e9e9; border-radius: 8px; margin-bottom: 10px; padding: 8px; width: 100%; height: inherit; position: static; } }