@charset "utf-8";
/* CSS Document */

html { scroll-behavior: smooth;}

#article-body { border:none}

.ttlarea { padding: 40px 0}

h1 { font-size: 40px; color: #005BAC; font-weight: bold; padding: 0 0 40px;}

.tag { padding: 0 !important}

.tag li { display: inline-block; padding: 0 !important; margin: 0 10px 0 0 !important;}

.tag a{ font-weight: bold; color: #005BAC !important; display: inline-block; padding: 8px 10px; border-radius: 10px; border: 1px solid #98C5ED; font-size: 16px; }

h2 { font-weight: bold; color: #005BAC !important; font-size: 18px; border-bottom: 1px solid #98C5ED; margin-bottom: 40px;}

h2 span { font-size: 40px;  font-style: italic; margin-right: 10px;}



.col3 { margin-bottom: 60px !important;}

.col3 .column { border:none}

.col3 dl { font-size: 14px; }

.col3 dt { color: #005BAC; border-bottom: 1px solid #98C5ED; padding-bottom: 10px; margin-bottom: 10px;}

.col3 dt span { font-size: 18px; display: block; font-weight: bold; text-indent: -0.8em;  padding-left: 1.2em;}

.col3 dt i { color: #999; font-size: 18px; vertical-align: middle; margin-right: 5px;}

.col3 dd { color:#111 !important}

.modal-open figure { position: relative; margin: 0;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}

.modal-open figure:before { display: block; content: ''; position: absolute; background: url("/ja/company/video_library/img/play_button.png"); background-size: contain; width: 40px; height: 38px; top: calc( 50% - 19px); left:calc( 50% - 20px); }

.modaal-container .ttl { font-weight: bold; font-size: 20px; color: #005BAC; margin-top: 10px;}

.coming { padding: 40px 0 80px; text-align: center; font-weight: bold; color: #999; font-size: 22px;}

a:hover { text-decoration:none !important}

#article-body .vjs-menu ul li,#article-body .vjs-menu ul { padding-left:  0 !important; margin-bottom: 0 !important;}
.video-js .vjs-volume-level::before { line-height: 1;}
.video-js .vjs-time-control,.video-js .vjs-time-control div{line-height: 3em !important;}
.vjs-slider-bar{line-height: 1;}


/*レスポンシブ対応*/
@media screen and (max-width: 768px) {
    
#article-body { padding: 0 3%}
.ttlarea { padding: 30px 0}
h1 { font-size: 28px;  padding: 0 0 30px;}
.tag { margin-bottom: 0;}
.tag li {  margin: 0 5px 10px 0 !important;}
.tag a{ padding:4px 5px; border-radius: 5px; font-size: 12px; }
h2 { font-size: 12px;margin-bottom: 30px;}
h2 span { font-size: 24px; margin-right: 5px;}
.col3 dl { font-size: 14px;}
.col3 dt br { display: none;}
.col3 dt span{ font-size: 16px;}
.col3 dt i { font-size: 14px;}
.col3 { margin-bottom: 30px !important;}
.coming { padding: 20px 0 40px; font-size: 18px;}
.modaal-container .ttl{ font-size: 14px;}
.modaal-content-container { padding: 10px !important;}
}