@charset "utf-8";

/* ===================================================================
css information

File Name  : videoDetail.css
Author     : 
Style Info : 
=================================================================== */

/*********************************************************************

.layout-videoDetail //////////////////////////////////////////////////

*********************************************************************/

.layout-videoDetail .cmn-statusbox-1 { position:relative; }

/*********************************************************************

.videoDetail-video-arrows

*********************************************************************/

.videoDetail-video-arrows { margin:10px 0 0 0; }
.videoDetail-video-arrows .video-arrow { display:block; width:120px; height:40px; line-height:36px; border:#e0e0e0 2px solid; text-align:center; font-size:1rem; color:#424242; position:relative;
-webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease;
}
.videoDetail-video-arrows .video-arrow:before { content:''; width:10px; height:16px; position:absolute; top:50%; margin:-8px 0 0 0; background:no-repeat center center; background-size:100% 100%; }

/* arrow */
.videoDetail-video-arrows .video-arrow.prev { padding:0 0 0 20px; float:left; }
.videoDetail-video-arrows .video-arrow.prev:before { background-image:URL(/img/arrow_ope_01_prev.svg); left:15px; }
.videoDetail-video-arrows .video-arrow.next { padding:0 20px 0 0; float:right; }
.videoDetail-video-arrows .video-arrow.next:before { background-image:URL(/img/arrow_ope_01_next.svg); right:15px; }

/* hover */
.videoDetail-video-arrows .video-arrow:hover { opacity:0.75; }

/* clearfix element */
.videoDetail-video-arrows:after { visibility:hidden; display:block; font-size:0; content:"." ; clear:both; height:0; }
* html .videoDetail-video-arrows { zoom:1; /*\*//*/ height:auto; overflow:hidden; /**/ }
*:first-child+html .videoDetail-video-arrows { zoom:1; }

@media screen and (max-width:768px){
.videoDetail-video-arrows { margin:10px 0 0 0; padding:0 10px; }
.videoDetail-video-arrows .video-arrow { width:80px; height:38px; line-height:34px; font-size:0.923rem; }
.videoDetail-video-arrows .video-arrow:before { width:8px; height:12px; margin:-6px 0 0 0; }

/* arrow */
.videoDetail-video-arrows .video-arrow.prev { padding:0 0 0 13px; }
.videoDetail-video-arrows .video-arrow.prev:before { left:6px; }
.videoDetail-video-arrows .video-arrow.next { padding:0 13px 0 0; }
.videoDetail-video-arrows .video-arrow.next:before { right:6px; }

/* hover */
.videoDetail-video-arrows .video-arrow:hover { opacity:1; }
}

/*-----------------------------------
.web-view
-----------------------------------*/
.web-view .videoDetail-video-arrows { margin:10px 0 0 0; padding:0 10px; }
.web-view .videoDetail-video-arrows .video-arrow { width:80px; height:38px; line-height:34px; font-size:0.923rem; }
.web-view .videoDetail-video-arrows .video-arrow:before { width:8px; height:12px; margin:-6px 0 0 0; }

/* arrow */
.web-view .videoDetail-video-arrows .video-arrow.prev { padding:0 0 0 13px; }
.web-view .videoDetail-video-arrows .video-arrow.prev:before { left:6px; }
.web-view .videoDetail-video-arrows .video-arrow.next { padding:0 13px 0 0; }
.web-view .videoDetail-video-arrows .video-arrow.next:before { right:6px; }

/* hover */
.web-view .videoDetail-video-arrows .video-arrow:hover { opacity:1; }


/*********************************************************************

.videoDetail-description

*********************************************************************/

.videoDetail-description { margin:30px 0 0 0; }
.videoDetail-description .description-head { background:#FF6E82; color:#fff; font-size:1.143rem; line-height:1.3; position:relative; padding:10px; }
.videoDetail-description .description-head:after { display:inline-block; content:'表示する'; height:30px; line-height:30px; position:absolute; top:50%; right:10px; margin:-15px 0 0 0; text-align:right; font-size:1rem; background:URL(/img/arrow_acd_02_down.svg) no-repeat right center; background-size:18px; padding:0 30px 0 0; }
.videoDetail-description .description-body { border:#FF6E82 1px solid; border-top:0; padding:10px; }
.videoDetail-description .description-body,
.videoDetail-description .description-body p { font-size:1.143rem; line-height:1.3; }

/* active */
.videoDetail-description .description-head.active:after { content:'閉じる'; background-image:URL(/img/arrow_acd_02_up.svg); }

@media screen and (max-width:768px){
.videoDetail-description { margin:15px 0 0 0; }
.videoDetail-description .description-head { font-size:1.154rem; padding:8px 5px; }
.videoDetail-description .description-head:after { height:24px; line-height:24px; right:8px; margin:-12px 0 0 0; font-size:0.769rem; background-size:14px; padding:0 19px 0 0; }
.videoDetail-description .description-body {  padding:10px 5px; }
.videoDetail-description .description-body,
.videoDetail-description .description-body p { font-size:1rem; }	
}

/*-----------------------------------
.web-view
-----------------------------------*/
.web-view .videoDetail-description { margin:15px 0 0 0; }
.web-view .videoDetail-description .description-head { font-size:1.154rem; padding:8px 5px; }
.web-view .videoDetail-description .description-head:after { height:24px; line-height:24px; right:8px; margin:-12px 0 0 0; font-size:0.769rem; background-size:14px; padding:0 19px 0 0; }
.web-view .videoDetail-description .description-body {  padding:10px 5px; }
.web-view .videoDetail-description .description-body,
.web-view .videoDetail-description .description-body p { font-size:1rem; }	

/*********************************************************************

.videoDetail-errata

*********************************************************************/

.videoDetail-errata { margin:30px 0 0 0; }
.videoDetail-errata .errata-head { background:#a9a9a9; color:#fff; font-size:1.143rem; line-height:1.3; position:relative; padding:10px; }
.videoDetail-errata .errata-head:after { display:inline-block; content:'表示する'; height:30px; line-height:30px; position:absolute; top:50%; right:10px; margin:-15px 0 0 0; text-align:right; font-size:1rem; background:URL(/img/arrow_acd_02_down.svg) no-repeat right center; background-size:18px; padding:0 30px 0 0; }
.videoDetail-errata .errata-body { border:#a9a9a9 1px solid; border-top:0; padding:10px; }
.videoDetail-errata .errata-body,
.videoDetail-errata .errata-body p { font-size:1.143rem; line-height:1.3; }

/* active */
.videoDetail-errata .errata-head.active:after { content:'閉じる'; background-image:URL(/img/arrow_acd_02_up.svg); }

@media screen and (max-width:768px){
.videoDetail-errata { margin:15px 0 0 0; }
.videoDetail-errata .errata-head { font-size:1.154rem; padding:8px 5px; }
.videoDetail-errata .errata-head:after { height:24px; line-height:24px; right:8px; margin:-12px 0 0 0; font-size:0.769rem; background-size:14px; padding:0 19px 0 0; }
.videoDetail-errata .errata-body {  padding:10px 5px; }
.videoDetail-errata .errata-body,
.videoDetail-errata .errata-body p { font-size:1rem; }	
}

/*-----------------------------------
.web-view
-----------------------------------*/
.web-view .videoDetail-errata { margin:15px 0 0 0; }
.web-view .videoDetail-errata .errata-head { font-size:1.154rem; padding:8px 5px; }
.web-view .videoDetail-errata .errata-head:after { height:24px; line-height:24px; right:8px; margin:-12px 0 0 0; font-size:0.769rem; background-size:14px; padding:0 19px 0 0; }
.web-view .videoDetail-errata .errata-body {  padding:10px 5px; }
.web-view .videoDetail-errata .errata-body,
.web-view .videoDetail-errata .errata-body p { font-size:1rem; }	

/*********************************************************************

.videoDetail-workbook

*********************************************************************/

.videoDetail-workbook { margin:15px 0 0 0; position: relative;/*modified by gotou*/ }
.videoDetail-workbook .workbook-head { background:#DBEB0C; color:#232B76; font-size:1.143rem; line-height:1.3; position:relative; padding:10px; }
.videoDetail-workbook .workbook-body { border:#DBEB0C 3px solid; border-top:0; padding:10px 10px 20px 10px; }
.videoDetail-workbook .workbook-head-input { background:#f6bc4d; color:#232B76; font-size:1.143rem; line-height:1.3; position:relative; padding:10px; }
.videoDetail-workbook .workbook-body-input { border:#f6bc4d 3px solid; border-top:0; padding:10px 10px 20px 10px; }
.videoDetail-workbook .status-box { font-size:0; }
.videoDetail-workbook .status-box > * { display:inline-block; vertical-align:middle; }
.videoDetail-workbook .status-box .col-item > .text-1 { display:inline-block; vertical-align:middle; font-size:1rem; line-height:1.3; margin:0 0 0 30px; }
.videoDetail-workbook .status-box .col-item > .text-1 span { font-size:1.429rem; font-weight:bold; }
.videoDetail-workbook .status-box .col-item .cmn-statusbar-2 { margin:10px 0 0 0; }
.videoDetail-workbook .status-box .col-item.col-1 { padding:0 30px 0 0; }
.videoDetail-workbook .status-box .col-item.col-2 { padding:10px 0; max-width:280px; }
.videoDetail-workbook .button-box { margin-top:0; }
.videoDetail-workbook .button-box .cmn-button-1 { width:280px; margin:10px 10px 0 10px; }

/* margin-adjust */
.videoDetail-workbook .status-box .col-item > .text-1:first-child { margin-left:0 !important; }

@media screen and (max-width:768px){
.videoDetail-workbook .workbook-head { font-size:1.154rem; padding:8px 5px; }
.videoDetail-workbook .workbook-body { padding:5px 10px 10px 10px; }
.videoDetail-workbook .workbook-head-input { font-size:1.154rem; padding:8px 5px; }
.videoDetail-workbook .workbook-body-input { padding:5px 10px 10px 10px; }
.videoDetail-workbook .status-box > * { display:block; }
.videoDetail-workbook .status-box .col-item > .text-1 { font-size:0.923rem; margin:0 0 0 10px; }
.videoDetail-workbook .status-box .col-item > .text-1 span { font-size:1.538rem; }
.videoDetail-workbook .status-box .col-item.col-1 { padding:0 0 8px 0; text-align:center; border-bottom:#ccc 1px solid; }
.videoDetail-workbook .status-box .col-item.col-2 { max-width:none; }
.videoDetail-workbook .button-box .cmn-button-1 { width:134px; height:30px; line-height:30px; font-size:0.846rem; margin:0 0 0 6px; padding-left:18px; }
.videoDetail-workbook .button-box .cmn-button-1:before { width:8px; height:10px; margin-top:-5px; left:15px; }

/* margin-adjust */
.videoDetail-workbook .button-box .cmn-button-1:first-child { margin-left:0 !important; }
}
/* gotou add */
.videoDetail-workbook .ajax-loader {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.2;
    background-image: url('/img/ajax-loader.gif');
    background-position: center;
    background-repeat: no-repeat;
    display: none;
}

/*-----------------------------------
.web-view
-----------------------------------*/
.web-view .videoDetail-workbook .workbook-head { font-size:1.154rem; padding:8px 5px; }
.web-view .videoDetail-workbook .workbook-body { padding:5px 10px 10px 10px; }
.web-view .videoDetail-workbook .workbook-head-input { font-size:1.154rem; padding:8px 5px; }
.web-view .videoDetail-workbook .workbook-body-input { padding:5px 10px 10px 10px; }
.web-view .videoDetail-workbook .status-box > * { display:block; }
.web-view .videoDetail-workbook .status-box .col-item > .text-1 { font-size:0.923rem; margin:0 0 0 10px; }
.web-view .videoDetail-workbook .status-box .col-item > .text-1 span { font-size:1.538rem; }
.web-view .videoDetail-workbook .status-box .col-item.col-1 { padding:0 0 8px 0; text-align:center; border-bottom:#ccc 1px solid; }
.web-view .videoDetail-workbook .status-box .col-item.col-2 { max-width:none; }
.web-view .videoDetail-workbook .button-box .cmn-button-1 { width:134px; height:30px; line-height:30px; font-size:0.846rem; margin:0 0 0 6px; padding-left:18px; }
.web-view .videoDetail-workbook .button-box .cmn-button-1:before { width:8px; height:10px; margin-top:-5px; left:15px; }

/* margin-adjust */
.web-view .videoDetail-workbook .button-box .cmn-button-1:first-child { margin-left:0 !important; }