@charset "euc-jp";

/*======================
ページ表示　fadein
=======================*/
body {
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

/*======================
base
=======================*/
html{
height: 100%;/*-- フッターを最下部に固定するための指定 --*/
font-size: 62.5%; /*-- ベースのフォントサイズを10pxに指定 各要素のフォントサイズ指定は rem で --*/
}

body{
font-family: "メイリオ", Meiryo , "ＭＳ Ｐゴシック", "ヒラギノ角ゴ", sans-serif;
font-size: 1.4em;
background: #FFF;
color: #233043;
-webkit-text-size-adjust: 100%;/*-- iOSのSafariで意図せずフォントサイズが大きくなるのを防ぐ --*/
min-height: 100vh; /*-- フッターを最下部に固定するための指定 --*/
display: flex; /*-- フッターを最下部に固定するための指定 --*/
flex-direction: column; /*-- フッターを最下部に固定するための指定 --*/
}

.contents {
flex: 1; /*-- フッターを最下部に固定するための指定 --*/
}

/*======================
common
=======================*/
/*-- outer --*/
.outer {
width: 100%;
}

/*-- inner --*/
.inner {
width: 90%;
margin-left: auto;
margin-right: auto;
}

/*-- contents --*/
.contents {
width: 100%;
margin-left: auto;
margin-right: auto;
}

/* ローディング画面背景 */
/*.loader-bg {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: #99CD00;
display: flex;
justify-content: center;
align-items: center;
}
*/

/* ローディングアニメーション */
/*.loader {
color: #FFF;
font-size: 2.4em;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 72px auto;
position: relative;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@-webkit-keyframes round {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
  }
  @keyframes round {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}
*/

/*======================
pagetop
=======================*/
.gotop {
position: fixed;
bottom: 1em; right: 1em;
}

.gotop a {
text-decoration: none;
text-align: center;
background: #233043;
opacity: 0.9;
border-radius: 50%;
width: 4.8em;
height: 4.8em;
display: block;
position: relative;
}

.gotop a::after {
content: "";
display: block;
opacity: 0.9;
width: 1.4em;
height: 1.4em;
border-top: solid .2em #FFF;
border-left: solid .2em #FFF;
position: absolute;
top: 40%; left: 50%;
transform: translate(-50%,0) rotate(45deg);
}

.gotop a:hover {
opacity: 0.6;
}


/*======================
header
=======================*/
.header {
text-align: center;
padding: 1em 0 1.2em;
background: #F8F5F2;
border-bottom: 3px solid #232946;
}

.header > .inner {
display: flex;
flex-direction: column;
}

.hfc_link {
width: 100%;
text-align: left;
margin: 0 0 1.5em;
font-size: 1.1rem;
text-align: center;
}

.hfc_link a,
.hfc_link a:link,
.hfc_link a:visited {
display: inline-block;
border: solid 1px #99CD02;
padding: .5em 1em;
color: #99CD02;
text-decoration: none;
border-radius: 10em;
transition: all .8s ease;
}

.hfc_link a:hover,
.hfc_link a:active {
background: #99CD02;
color: #FFF;
text-decoration: none;
}

.logo_box {
order: 2;
}

.sub_box {
order: 1;
}

.hd_hostname {
font-size: 1.1rem;
font-weight: bold;
margin: 1.6em 0 0;
}

.logo_hfc img {
width: 280px;
height: auto;
}

/*--
balloon
--*/
.balloon {
font-size: 1.1rem;
position: relative;
display: inline-block;
padding: .8em 1.8em;
line-height: 1.4em;
text-align: center;
border-radius: 4em;
border: 2px solid #232323;
}

.balloon:before {
position: absolute;
left: 50%; bottom: -.7em;
transform: rotate(-45deg);
height: 1em;
width: 1em;
border-bottom: 2px solid #232323;
background: #F8F5F2;
content: "";
}

.balloon span {
display: block;
color: #f45d48;
font-size: 1.2rem;
font-weight: bold;
}


/*======================
footer
=======================*/
.footer {
width: 100%;
padding: 3em 0;
background: #FEEFE8;
text-align: center;
}

.footer_about {
background: #FFF;
padding: 3em;
border-radius: 8px;
}

.footer_logo img {
width: 18em;
height: auto;
display: inline;
vertical-align: -.3em;
margin: 0 .3em 0 0;
}

.footer_about .txt {
font-size: 1.2rem;
text-align: left;
line-height: 1.6em;
margin: 2em 0 0;
}

.footer_about .btn {
height: 40px;
line-height: 40px;
display: inline-block;
padding: 0 1.2em;
text-decoration: none;
background: #a2d000;
color: #FFF;
border-bottom: solid 4px #708f02;
border-radius: .5em;
margin-top: 2em;
}

.footer_about .btn:active {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none;
}

.footer_attention {
text-align: left;
font-size: 1.1rem;
line-height: 1.6em;
margin: .8em 0 0;
text-indent: -1em;
padding-left: 1em;
}

.footer_attention:before {
content: "※";
}

.copy {
font-size: 1.1rem;
margin: 6em 0 0;
}


/*======================
contents
=======================*/
.feature {
background: #F8F5F2;
padding: 2em 0;
}

/*--
セクションタイトル 
--*/
.section_ttl {
font-size: 1.8rem;
padding-left: 1.4em;
font-weight: bold;
position: relative;
}

.section_ttl.elearning::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background: url(../img/icon_elearning.svg) no-repeat;
position: absolute;
top: 50%; left: 0;
transform: translate(0, -50%);
}

/*--
セクションリード 
--*/
.section_lead {
margin: .8em 0 0;
}

.section_lead span {
display: inline-block;
}

/*--
カテゴリーで絞り込みを行ったときに要素を非表示にするクラス 
--*/
.is_hide {
display: none;
}

/*--
カテゴリーリスト 
--*/
#category_list {
font-size: 1.2rem;
background: #F1EBE6;
padding: 1.5em;
/*margin: 1em 0 0;*/
}

#category_list dl {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5em;
}

#category_list dl dt {
display: block;
font-weight: bold;
}

#category_list dl dt::after {
content: ":";
margin: 0 0 0 .5em;
}

#category_list .category_tag {
display: block;
background: #FFFFFE;
padding: .5em .8em;
border-radius: 2em;
cursor: pointer;
}

#category_list .category_tag.is_active {
color: #FFF;
background: #078080;
}


/*--
並べ替えボタン 
--*/
#sort_box {
display: flex;
margin: 1em 0 0;
justify-content: end;
align-items: center;
}

#sort_box span {
font-size: 1.1rem;
}


#sort_box input {
display: none;
}

#sort_box label{
font-size: 1.2rem;
display: inline-block;
cursor: pointer;
padding: .4em 0 .3em 0;
width: 6em;
background: #FFF;
text-align: center;
transition: .2s;
}

#sort_box label:first-of-type {
border-radius: .3rem 0 0 .3rem;
}

#sort_box label:last-of-type {
border-radius: 0 .3rem .3rem 0;
}

#sort_box input[type="radio"]:checked + label {
background-color: #078080;
color: #FFF;
}

/*--
チャンネルリスト 
--*/
#channel_list {
display: flex;
flex-wrap: wrap;
gap: 0 1em;
margin: 1em 0 0;
}

#channel_list .item {
background: #FFFFFE;
width: calc(50% - .5em);
margin: 0 0 1em;
border-radius: 1em;
box-shadow: 0 0 .2em 0 rgba(234, 228, 217, 1);
position: relative;
}

#channel_list .item a {
text-decoration: none;
color: #233043;
display: flex;
flex-direction: column;
height: 100%;
}

#channel_list .item a:link,
#channel_list .item a:visited {
text-decoration: none;
color: #233043;
}

#channel_list .item a:hover,
#channel_list .item a:active {
text-decoration: none;
color: #233043;
opacity: .6;
}

#channel_list .item .thumb {
width: 100%;
aspect-ratio: 16 / 9;
position:relative;
overflow: hidden;
border-radius: 1em 1em 0 0;
}

#channel_list .item .thumb img {
width: 102%;
object-fit: cover;
transition: transform .3s;
position: absolute;
left: -1%;
/*top: 50%; left:50%;
transform: translate(-50%, -50%);*/
}

#channel_list .item a:hover .thumb img {
transform: /*translate(-50%, -50%)*/ scale(1.1);
}

#channel_list .item .title_box {
position: relative;
padding: 1em 1.2em .5em;
flex: 1;
}

#channel_list .item .title_box .title {
/*visibility: hidden; /* 長いテキストが一瞬表示されるのを防ぐ */
line-height: 1.4em;
font-weight: bold;
}

#channel_list .item .title_box .title span {
font-size: 1.1rem;
line-height: 1.4em;
font-weight: normal;
display: block;
position: relative;
margin: .8em 0 0;
padding: 2em .2em 0;
}

#channel_list .item .title_box .title span::before {
content: "シリーズ";
font-size: 10px;
display: block;
color: #FFF;
background: #058080;
padding: .4em .6em .3em;
position: absolute;
line-height: 1;
font-weight: bold;
top: -.2em;
left: -.2em;
z-index: 1;
border-radius: .5em 0 0 0;
}

#channel_list .item .title_box .title span::after {
content: "";
background-image: linear-gradient(to right, #000, #058080 .1em, transparent .1em, transparent .1em);
background-size: .5em .08em;
background-repeat: repeat-x;
position: absolute;
top: .5em; bottom: 0; left: 0; right: 0;
}

#channel_list .item .category_tag {
display: flex;
padding: 1em;
flex-wrap: wrap;
align-items: end;
gap: .2em .3em;
margin: auto 0 0;
}

#channel_list .item .category_tag span {
display: inline-block;
color: #058080;
font-size: 1.1rem;
border-top: solid .1em #058080;
border-right: solid .1em #058080;
border-bottom: solid .1em #058080;
border-left: solid .4em #058080;
padding: .3em .4em .15em;
}

#channel_list .item .new_icon {
font-size: 1.2rem;
color: #FFF;
display: inline-block;
background: #F45D48;
position: absolute;
padding: .8em .4em;
top: .5rem; right: -.4rem;
z-index: 2;
}

#channel_list .item .new_icon:before {
position: absolute;
content: '';
bottom: -.4rem;
right: 0;
border: none;
border-bottom: solid .4rem transparent;
border-right: solid .4rem rgb(137, 41, 28);/*折り返し部分*/
transform: rotate(-90deg);
}


/*--
こちらもおすすめ 
--*/
.recommend_box {
padding: 4em 0;
}

.recommend_box .ttl_box {
text-align: center;
position: relative;
}

.recommend_box .ttl_box::after {
content: "";
position: absolute;
top: 50%;
left: 0;
display: inline-block;
width: 100%;
height: .2em;
background-color: #232946;
z-index: -1;
}

.recommend_box .section_ttl {
display: inline-block;
font-size: 1.8rem;
padding-left: 1.4em;
font-weight: bold;
position: relative;
background: #FFFFFE;
padding: 0 1.4em 0 3.4em;
}

.recommend_box .section_ttl.recommend::before {
content: "";
display: inline-block;
width: 1.4em;
height: 1.4em;
background: url(../img/icon_recommend.svg) no-repeat;
position: absolute;
top: 50%; left: 1.6em;
transform: translate(0, -50%);
}

.recommend_box .section_lead {
text-align: center;
}


/*--
おすすめリスト 
--*/
#recommend_list {
display: flex;
flex-wrap: wrap;
gap: 0 1em;
margin: 3em 0 0;
}

#recommend_list .item {
background: #F8F5F2;
width: calc(50% - .5em);
margin: 0 0 3em;
border-radius: 1em;
}

#recommend_list .item a {
text-decoration: none;
color: #233043;
transition: .3s;
}

#recommend_list .item a:link,
#recommend_list .item a:visited {
text-decoration: none;
color: #233043;
}

#recommend_list .item a:hover,
#recommend_list .item a:active {
text-decoration: none;
color: #233043;
opacity: .6;
}

#recommend_list .item .thumb {
width: 100%;
aspect-ratio: 16 / 9;
position:relative;
overflow: hidden;
border-radius: 1em 1em 0 0;
}

#recommend_list .item .thumb img {
width: 102%;
object-fit: cover;
transition: .3s;
position: absolute;
left: -1%;
/*top: 50%; left:50%;
transform: translate(-50%, -50%);*/
}

#recommend_list .item a:hover .thumb img {
transform: /*translate(-50%, -50%)*/ scale(1.1);
}

#recommend_list .item .title_box {
position: relative;
padding: 3.2em 1.2em 1.4em;
}

#recommend_list .item .main_category {
font-size: 1.2rem;
color: #FFF;
display: inline-block;
background: #232946;
position: absolute;
padding: .3em 1em;
top: 1em; left: -.4em;
}

#recommend_list .item .main_category:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid .4em transparent;
border-right: solid .4em rgb(9, 11, 20);/*折り返し部分*/
}

#recommend_list .item .title_box .title {
line-height: 1.4em;
font-weight: bold;
}

/*-------
ボタン
--------*/
.btn_box {
width: 100%;
text-align: center;
margin: 0;
}

.btn_box a,
.btn_box a:link,
.btn_box a:visited,
.btn_box a:hover,
.btn_box a:active {
text-decoration: none;
color: #020826;
}

#view_btn {
font-size: 1.8rem;
font-weight: bold;
display: inline-block;
border: solid 3px #020826;
padding: .8em 3.4em .8em 2.4em;
border-radius: 2em;
cursor: pointer;
position: relative;
margin: 1em 0 0;
}

#view_btn::before,
#view_btn::after {
content: "";
display: block;
width: 1em;
height: .15em;
background: #020826;
position: absolute;
right: 1em;
top: 50%;
}

#view_btn::before {
transform: translate(0,-50%);
}

#view_btn::after {
transform: translate(0,-50%) rotate(90deg);
transition: .5s all;
}

#view_btn.open::after {
transform: translate(0,-50%) rotate(0);
transition: .5s all;
}

#back_top {
font-size: 1.2rem;
font-weight: bold;
display: inline-block;
border: solid 3px #020826;
padding: .8em 3.4em .8em 2.4em;
border-radius: 2em;
cursor: pointer;
position: relative;
margin: 4em 0;
}

#back_top::after {
content: "";
display: block;
width: .4em;
height: .4em;
border-top: .2em solid #020826;
border-left: .2em solid #020826;
position: absolute;
right: 1.4em;
top: 50%;
transform: translate(0,-50%) rotate(135deg);
transition: .5s ease all;
}

#back_top:hover {
opacity: .6;
}

#back_top:hover::after {
right: 1em;
}

/*======================
動画詳細ページ
=======================*/
#video_box {
width: 100%;
height: auto;
background: #F1EBE7;
aspect-ratio: 16 / 9;
margin: 1em 0 0;
}

.vol1,
.vol2,
.vol3 {
display: none;
}

/*-------
YouTube埋め込み用
--------*/
.ytb{
position: relative;
width: 100%;
padding-top: 56.25%;
text-align: center;
margin: 0;
}

.ytb iframe {
position: absolute;
display: block;
max-width: 100% !important;
max-height: 100% !important;
top: 0;
margin-bottom: 0;
width: 100%;
height: 100%;
}

/*-------
動画タイトル
--------*/
.video_title_box {
/*border-left: solid .4em #058080;*/
/*background: rgba(255,255,255,.6);
border-radius: .5em;*/
}

.video_title {
font-size: 1.4rem;
line-height: 1.4em;
padding: .4em .1em;
/*padding: .5em .8em;*/
}

.video_subtitle {
font-size: 1.3rem;
line-height: 1.4em;
padding: 1.8em .2em 0;
/*padding: .6em 1em 0 1em;*/
position: relative;
margin: .5em 0 0;
}

.video_subtitle::before {
content: "シリーズ";
font-size: 10px;
display: block;
color: #FFF;
background: #058080;
padding: .4em .8em .3em;
position: absolute;
line-height: 1;
font-weight: bold;
top: -.2em;
left: -.2em;
z-index: 1;
border-radius: .5em 0 0 0;
}

.video_subtitle::after {
content: "";
background-image: linear-gradient(to right, #000, #058080 .1em, transparent .1em, transparent .1em);
background-size: .5em .08em;
background-repeat: repeat-x;
position: absolute;
top: .5em; bottom: 0; left: 0; right: 0;
}

.video_caption {
font-size: 1.2rem;
line-height: 1.4em;
padding: 1em;
margin: .5em 0 0;
background: rgba(255,255,255,.4);
}

/*-------
講師プロフィール
--------*/
.caption_box {
background: #FFFFFE;
position: relative;
border-radius: .8em;
padding: 2em;
margin: 1em 0 0;
}

.caption_profile_box {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: start;
gap: 1em;
/*margin: 2em 0 0;*/
/*padding-top: 2em;*/
}

/*.caption_profile_box::before {
content: "";
background-image: linear-gradient(to right, #000, #232323 .2em, transparent .2em, transparent 1em);
background-size: 1em .08em;
background-repeat: repeat-x;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}*/

.instructor_img {
width: 5em;
height: 5em;
}

.instructor_img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

.instructor_name {
display: flex;
width: calc(100% - 6em);
}

.instructor_name.no_photo {
width: 100%;
}

.instructor_name dt {
font-size: 1.2rem;
font-weight: bold;
white-space: nowrap;
color: #FFF;
padding: 0 .8em;
display: inline-block;
position: relative;
line-height: 3em;
text-align: center;
background: #233043;
}

.instructor_name dt::before {
content: '';
position: absolute;
left: 0;
top: 100%;
height: 0;
width: 0;
border-left: 1.81em solid #233043;
border-right: 1.81em solid #233043;
border-bottom: .5em solid transparent;
}

/*.instructor_name dt {
display: inline-block;
white-space: nowrap;
color: #FFF;
font-size: 1.2rem;
background: #233043;
padding: .2em .4em;
margin: 0 .8em 0 0;
border-radius: .5em;
}*/

.instructor_name dd {
font-size: 1.6rem;
line-height: 1.4em;
margin: .5em 0 0 .8em;
}

.instructor_name dd span {
font-size: 1.2rem;
line-height: 1.4em;
margin: .5em 0 0;
display: block;
}


/* interviewee */
.interviewee_name {
display: flex;
flex-direction: column;
width: calc(100% - 6em);
align-items: start;
}

.interviewee_name dt {
font-size: 1.2rem;
font-weight: bold;
white-space: nowrap;
color: #FFF;
background: #233043;
height: 24px;
line-height: 24px;
padding: 0 1.4em 0 .6em;
position: relative;
/*
padding: 0 .8em;
display: inline-block;
line-height: 2em;
text-align: center;
*/
}


.interviewee_name dt::before {
position: absolute;
content: '';
width: 0px;
height: 0px;
z-index: 1;
top: 0;
right: 0;
border-width: 12px 8px 12px 0px;
border-color: transparent #fff transparent transparent;
border-style: solid;
}

.interviewee_name dd {
font-size: 1.6rem;
line-height: 1.4em;
margin: .5em 0 0 .2em;
}


.interviewee_name dd span {
font-size: 1.1rem;
font-weight: normal;
}

.biography {
width: 100%;
font-size: 12px;
padding: 1em 0 0;
line-height: 1.4em;
position: relative;
}

.biography::before {
content: "";
background-image: linear-gradient(to right, #000, #232323 .2em, transparent .2em, transparent 1em);
background-size: 1em .08em;
background-repeat: repeat-x;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}

/*-------
同じタイトルの動画
--------*/
.series_box {
/*margin: 1em 0 0;*/
/*padding: 1em;*/
/*background: #F1EBE7;*/
/*border-top: solid .2em #232946;*/
/*border-bottom: solid .2em #232946;*/
position: relative;
}

.series_list {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 1em 0 0;
gap: .2em;
}

.series_list dl {
width: 8em;
text-align: center;
cursor: pointer;
position:relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}

/*.:hover {
opacity: .6;
}*/

.series_list .video_thumb {
background-color: #CCC;
width: 100%;
}

.series_list .video_thumb img {
width: 102%;
object-fit: cover;
position: absolute;
top: 50%; left:50%;
transform: translate(-50%, -50%);
z-index: 1;
}

.series_list dl .video_thumb::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: absolute;
top: 0; left: 0;
z-index: 2;
transition: all .5s ease;
}

.series_list dl:hover .video_thumb::before {
background: rgba(0,0,0,.3);
}

.series_list dl .video_thumb_title {
color: #FFF;
font-size: 1.2rem;
border: solid .1em #FFF;
padding: .3em .5em .15em .5em;
border-radius: 100vh;
font-weight: bold;
position: absolute;
top: 50%; left:50%;
transform: translate(-50%, -50%);
z-index: 3;
opacity: 1;
transition: all .5s ease;
}

.series_list dl:hover .video_thumb_title {
opacity: .6;
}

/*-- 現在メインに表示されている動画の時 current --*/
.series_list dl.current {
cursor: initial;
opacity: 1;
}

.series_list dl.current .video_thumb_title {
opacity: 0;
}

.series_list dl.current:hover {
opacity: 1;
}

.series_list dl.current .video_thumb::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
position: absolute;
top: 0; left: 0;
z-index: 2;
}


/*-------
おさらいチェック
--------*/
.review_box {
position: relative;
margin: 4em 0 0;
}

.review_ttl_box {
position: absolute;
top: -4.2em; left: 1em;
z-index: 1;
}

.review_ttl {
margin: 3em .3em 0;
font-size: 1.4rem;
display: inline-block;
position: relative;
padding: .3em 2em .8em 1.2em;
border: 2px solid #DACFAE;
background-color: #DACFAE;
font-weight: bold;
}

.review_ttl:before {
content: "";
position: absolute;
top: -.4em;
left: -.4em;
width: 100%;
height: 100%;
border: .18em solid #232946;
}

.review_ttl:after {
content: "";
position: absolute;
display: block;
top: -.4em;
right: 0;
width: .8em;
height: 1.2em;
border-left: .3em solid #232946;
border-top: .3em solid #232946;
transform: rotate(-135deg);
}

.review_ttl span {
font-size: 120%;
display: inline-block;
margin-top: .1em;
margin-left: .2em;
}

/*-------
問題
--------*/
.question {
background: #FFFFFE;
position: relative;
padding: 2.5em 1.5em 1.5em;
border-radius: .5em .5em 0 0;
margin: 2em 0 0;
line-height: 1.4em;
}

.question span {
background: linear-gradient(transparent 50%, #FAED7D 0%);
display: inline;
padding: 0 .1em 0;
}

/*-------
選択肢
--------*/
.question_box ol {
list-style: none;
counter-reset: list-counter;
}

.question_box ol li {
margin: 1em 0 0;
padding: .2em 1.4em 1em 4em;
position: relative;
line-height: 1.4em;
border-bottom: solid .15em #F1EBE6;
}

.question_box ol li:before {
content: counter(list-counter);
counter-increment: list-counter;
background: #000;
border-radius: 50%;
height: 1.6em;
width: 1.6em;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0; left: 1.5em;
color: #FFF;
font-weight: bold;
}

/*-------
解説
--------*/
.explanation_box {
background: #f1ebe6;
margin: 0;
padding: 1.2em;
text-align: center;
border-radius: 0 0 .5em .5em;
}

.explanation {
display: none;
background: #FFFFFE;
padding: 2em;
border-radius: .5em;
margin: 0 0 2em;
text-align: left;
}

.choice {
display: flex;
align-items: center;
padding: 0 0 1em;
margin: 0 0 1.5em;
gap: 0 1em;
border-bottom: solid .15em #F1EBE6;
}

.choice .num {
background: #000;
border-radius: 50%;
height: 1.6em;
width: 1.6em;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
font-weight: bold;
flex-shrink: 0;
}

.choice .choice_txt {
font-size: 1.4rem;
line-height: 1.4em;
}

.explanation_txt {
line-height: 1.6em;
}

.explanation_txt span {
background: linear-gradient(transparent 50%, #FAED7D 0%);
display: inline;
padding: 0 .1em 0;
}

.supplement_txt {
font-size: 1.3rem;
margin: 1em 0 0;
padding: 1em 0 0;
line-height: 1.6em;
border-top: dashed 1px #CCC;
}

.supplement_txt ul {
list-style:  none;
margin: 0;
}

.supplement_txt ul li {
text-indent: -.5em;
padding-left: 1em;
margin: .5em 0 0;
}

.supplement_txt ul li:before {
content: "・";
display: inline-block;
}

.explanation_btn {
text-align: center;
font-size: 1.4rem;
min-width: 12em;
display: inline-block;
background: #232946;
padding: .6em 2em;
border-radius: 2em;
color: #FFF;
font-weight: bold;
cursor: pointer;
}

/*-------
HFC記事へのリンク
--------*/
.view_more_box {
text-align: center;
margin: 2em 0 0;
}

.view_more_box p {
line-height: 1.4em;
}

.view_more_box p span {
display: inline-block;
}

.view_more_btn {
font-size: 1.4rem;
text-align: center;
margin: 1em 0 0;
}

.view_more_btn a,
.view_more_btn a:link,
.view_more_btn a:visited {
text-decoration: none;
text-align: center;
min-width: 12em;
display: inline-block;
background: #A1D000;
padding: .6em 2em;
border-radius: 2em;
color: #FFF;
font-weight: bold;
}

.view_more_btn a:hover,
.view_more_btn a:active {
text-decoration: none;
color: #FFF;
opacity: .6;
}



@media screen and (min-width: 960px) {
/*-- min-width: 960px //--*/

/*======================
common: 900px
=======================*/
/*-- inner --*/
.inner {
width: 900px;
}

/*-- contents --*/
.contents {
}


/*======================
header: 900px
=======================*/
.header {
text-align: left;
padding: 1em 0 2em;
}

.header > .inner {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}

.hfc_link {
width: 100%;
text-align: left;
}

.logo_box {
order: 1;
}

.sub_box {
order: 2;
}

.hd_hostname {
margin: 0;
}

.logo_hfc img {
width: 22em;
}

/*--
balloon
--*/
.balloon {
font-size: 1.3rem;
top: -2em;
}

.balloon span {
font-size: 1.6rem;
display: inline;
}


/*======================
footer: 960px
=======================*/
.footer_about .txt {
font-size: 1.3rem;
}

.footer_attention {
font-size: 1.2rem;
}


/*======================
contents: 960px
=======================*/
.feature {
padding: 3em 0 6em;
}

/*--
セクションタイトル 
--*/
.section_ttl {
font-size: 2.6rem;
}

.section_ttl.elearning::before {
margin: 0 .2em 0 0;
}


/*--
カテゴリーリスト 
--*/
#category_list {
padding: 1.5em;
/*margin: 3em 0 0;*/
}

#category_list dl {
gap: .8em 1em;
}

#category_list dl dt::after {
content: ":";
margin: 0 0 0 .5em;
}

#category_list .main_category {
padding: .8em 1.2em;
border-radius: 2em;
}

/*--
チャンネルリスト 
--*/
#channel_list {
gap: 0 2em;
}

#channel_list .item {
width: calc(25% - 1.5em);
margin: 0 0 2em;
}

/*--
こちらもおすすめ 
--*/
.recommend_box {
padding: 6em 0;
}

.recommend_box .section_ttl {
font-size: 2.2rem;
padding-left: 1.4em;
padding: 0 1.4em 0 3.4em;
}


/*--
おすすめリスト 
--*/
#recommend_list {
gap: 0 2em;
}

#recommend_list .item {
width: calc(25% - 1.5em);
}

/*--
ボタン 
--*/
#back_top {
font-size: 1.4rem;
}

/*======================
動画詳細ページ
=======================*/
/*-------
動画タイトル
--------*/
.video_title_box {
}

.video_title {
font-size: 2.4rem;
}

.video_subtitle {
font-size: 2.0rem;
padding: 1.5em .2em 0
}

.video_subtitle::before {
font-size: 12px;
}

.video_subtitle::after {
top: .4em;
}

.video_caption {
font-size: 1.4rem;
}

/*-------
講師プロフィール
--------*/
.caption_box {
}
/*.instructor_name {
font-size: 1.6rem;
}*/

/*.instructor_name dt {
font-size: 1.4rem;
padding: .1em .8em;
}*/

/*.instructor_name dd span {
display: inline-block;
font-size: 1.6rem;
}

.instructor_name dd span:before {
content: "｜";
}*/

.instructor_img {
width: 6em;
height: 6em;
margin: -.8em 0 0;
}

.instructor_name {
display: flex;
width: calc(100% - 7em);
}

.instructor_name.no_photo {
width: 100%;
}

.instructor_name dt {
font-size: 1.3rem;
}

.instructor_name dd {
font-size: 2.0rem;
}

.instructor_name dd span {
font-size: 1.6rem;
margin: .2em 0 0;
}

.interviewee_name {
display: flex;
width: calc(100% - 7em);
}

.interviewee_name dt {
font-size: 1.3rem;
}

.interviewee_name dd {
font-size: 2.0rem;
}

.interviewee_name dd span {
font-size: 1.6rem;
margin: .2em 0 0;
}

.biography {
font-size: 1.4rem;
}

/*-------
同じタイトルの動画
--------*/
/*.series_box {
margin: 4em 0 0;
}

.series_box .series_ttl {
font-size: 1.6rem;
}

.series_list {
gap: 3em;
}

.series_list dl {
width: calc(33.3% - 2em);
}

.video_thumb_title {
font-size: 1.3rem;
margin: .8em 0 0;
}*/

.series_list {
gap: .2em;
}

.series_list dl {
width: 9em;
}

.series_list dl .video_thumb_title {
font-size: 1.3rem;
}

/*-------
おさらいチェック
--------*/
.review_ttl_box {
top: -5.5em;
}

.review_ttl {
margin: 3em .3em 0;
font-size: 1.8rem;
padding: .4em 2em .8em 1.1em;
}

.review_ttl:before {
top: -.4em;
left: -.4em;
}

.review_ttl:after {
top: -.1em;
right: 0;
width: .8em;
height: 1.2em;
}

/*-------
問題
--------*/
.question {
padding: 3em 1.5em 1.5em;
margin: 1.5em 0 0;
font-size: 1.6rem;
}

/*-------
選択肢
--------*/
.question_box ol li {
font-size: 1.6rem;
}

/*-------
解説
--------*/
.choice .num {
font-size: 1.6rem;
}

.choice .choice_txt {
font-size: 1.8rem;
}

.explanation_txt {
font-size: 1.6rem;
}

.explanation_box {
padding: 2em;
}

.explanation {
padding: 2em;
margin: 0 0 2em;
}

.explanation_btn {
font-size: 1.8rem;
}

/*-------
HFC記事へのリンク
--------*/
.view_more_btn {
font-size: 1.6rem;
}



/*--// min-width: 960px --*/
}