@charset "UTF-8";
@media screen and (max-width: 767px) {
/*--------------------------------
汎用クラス
-------------------------------- */
.c_radius_10 {
border-radius: 10px;
}
.c_radius_20 {
border-radius: 20px;
}
.c_comment {
margin: 0.2rem 0 0.6rem;
font-size: 0.26rem;
font-weight: 700;
line-height: 1;
text-align: center;
}
.main_btns{
margin-top: 0.6rem;
}
.c_btn {
display: block;
border-radius: 70px;
outline: none;
}
button {
font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", Meiryo, "MS P Gothic", "ＭＳ Ｐゴシック", Osaka, Arial, Helvetica, sans-serif;
}
/*==============================================================================
main
============================================================================= */
.main_bg {
padding: 0.3rem 0 0.85rem;
border-bottom: 5px solid #000;
background-color: #f8f8f8;
}
/*.main_box {
margin-bottom: .6rem;
}
*/
.main_left_img img {
margin-bottom: 0.3rem;
border-radius: 10px;
}
.main_right_ttl {
margin-bottom: 0.3rem;
font-size: 0.44rem;
font-weight: 700;
letter-spacing: 0;
}
.main_right_category {
margin-bottom: 0.25rem;
padding: 0 0 0 0.6rem;
line-height: 1;
position: relative;
}
.main .category_icon {
width: 0.44rem;
height: 0.44rem;
line-height: 0;
position: absolute;
left: 0;
top: 0;
}
.main .category_txt {
padding: 0.08rem 0.5rem;
border-radius: 15px;
background-color: #ffffff;
font-size: 0.28rem;
font-weight: 500;
line-height: 1;
margin: 0 0.1rem 0.1rem 0;
float: left;
}
.main_right_txt {
font-size: 0.28rem;
font-weight: 500;
}
.main_date {
margin-top: 0.35rem;
padding: 0.2rem 0;
background-color: #a4a4a4;
color: #ffffff;
font-size: 0.28rem;
font-weight: 700;
line-height: 1;
text-align: center;
}
.no_date{
display: none!important;
}

/*==============================================================================
high
============================================================================= */
.high {
/*-- 開いた状態 --*/
}
.high_bg {
margin-bottom: 0.4rem;
padding: 0.9rem 0 0.6rem;
background-image: url(../../../images/detail/common/high_bg.jpg);
background-repeat: repeat;
background-size: 1.5%;
}
.high_box {
padding: 0 0.4rem 0.6rem;
background-color: #ffffff;
}
.high_ribbon {
-webkit-transform: translateY(-0.32rem);
-ms-transform: translateY(-0.32rem);
position: relative;
width: 2.8rem;
height: 0.61rem;
margin: 0 auto;
transform: translateY(-0.32rem);
line-height: 0;
}
.high_ttl {
width: 5.85rem;
height: 0.83rem;
margin: 0 auto 0.3rem;
background-image: url(../../../images/detail/common/high_obj.svg);
background-position: bottom center;
background-repeat: no-repeat;
background-size: contain;
font-size: 0.4rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
text-align: center;
}
.high_item {
position: relative;
margin-bottom: 0.1rem;
padding-left: 0.45rem;
font-size: 0.34rem;
font-weight: 700;
}
.high_item:before {
position: absolute;
top: 0.1rem;
left: 0;
width: 0.29rem;
height: 0.29rem;
background-image: url(../../../images/detail/common/high_icon.svg);
background-position: bottom center;
background-repeat: no-repeat;
background-size: contain;
content: "";
}
/* .high_wrap {
margin-bottom: 1rem;
} */
.high_middle {
width: 6.2rem;
margin: 0 auto 0.8rem;
color: #333333;
}
.high_middle_ttl {
margin: .6rem 0 .4rem;
padding-top: 0.43rem;
font-size: 0.34rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.76;
}
.high_middle_ttl.top {

position: relative;
z-index: 2;
}
.high_middle_ttl.top:after {
z-index: -1;
position: absolute;
top: 0;
left: -0.09rem;
width: 1.04rem;
height: 0.81rem;
background-image: url(../../../images/detail/common/high_ruby.svg);
background-position: bottom center;
background-repeat: no-repeat;
background-size: contain;
content: "";
}
.high_middle_txt {
margin-bottom: 0.5rem;
font-size: 0.26rem;
font-weight: 500;
line-height: 1.5;
}
.high_middle_txt:last-child {
margin-bottom: 0;
}
.high_middle_txt a{
color: #eb0000;
font-weight: bold;
}
.high_inner {
width: 7rem;
margin: 0 auto;
}
.high tr:last-child td {
margin-bottom: 0.4rem;
}
.high th {
display: block;
margin-bottom: 0.25rem;
}
.high th span {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
width: 2.34rem;
height: 0.5rem;
border: 1px solid #eb0000;
background-color: #ffdede;
font-size: 0.28rem;
font-weight: 700;
line-height: 1;
}
.high td {
display: block;
margin-bottom: 0.55rem;
font-size: 0.26rem;
font-weight: 500;
line-height: 1.53;
}

.high_btn {
display: block;
position: relative;
width: 6rem;
height: 0.9rem;
margin: 0 auto;
border-radius: 45px;
outline: none;
background: #e5e5e5;
font-size: 0.34rem;
font-weight: 700;
letter-spacing: 0.1em;
text-align: center;
cursor: pointer;
}
.high_btn:after {
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
display: block;
position: absolute;
top: 50%;
right: 0.5rem;
width: 0.52rem;
height: 0.52rem;
transform: translateY(-50%);
background-image: url(../../../images/detail/job/high_arrow.png);
background-position: bottom center;
background-repeat: no-repeat;
background-size: contain;
content: "";
}
.high .high_close {
display: block;
}
.high .high_open {
display: none;
}
.high .js-accordion-closed:after {
-webkit-transform: translateY(-50%) rotateX(180deg);
transform: translateY(-50%) rotateX(180deg);
}
.high .js-accordion-closed .high_close {
display: none;
}
.high .js-accordion-closed .high_open {
display: block;
}
/*==============================================================================
about
============================================================================= */
.about_bg {
padding: 0.9rem 0 0.8rem;
background-image: url(../../../images/detail/job/about_bg.jpg);
background-repeat: repeat;
background-size: 1.5%;
}
.about_top {
margin-bottom: 0.6rem;
line-height: 0;
}
.about_box {
padding: 0.6rem 0.33rem 0.7rem;
background-color: #ffffff;
}
.about_item {
margin-bottom: 0.8rem;
}
.about_item:last-child {
margin-bottom: 0;
}
.about_num {
width: 6.5rem;
margin-bottom: 0.4rem;
line-height: 0;
}
.about_img .img_01 {
width: 3.3rem;
margin: 0 auto 0.5rem;
}
.about_img .img_02 {
width: 3.1rem;
margin: 0 auto 0.5rem;
}
.about_img .img_03 {
width: 4rem;
margin: 0 auto 0.5rem;
}
.about_img .img_04 {
width: 3rem;
margin: 0 auto 0.5rem;
}
.about_ttl {
margin-bottom: 0.4rem;
font-size: 0.48rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.37;
}
.about_txt {
padding-right: 0.2rem;
font-size: 0.28rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.6;
}
/*==============================================================================
flow
============================================================================= */
.flow_bg {
padding: 1rem 0;
background-color: #f3f3f3;
}
.flow_top {
margin-bottom: 0.6rem;
}
.flow_item {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.25rem;
}
.flow_item:last-child {
margin-bottom: 0.6rem;
}
.flow_num {
width: 0.6rem;
line-height: 0;
text-align: center;
}
.flow_num.num_01 img {
width: 0.47rem;
margin: 0 auto;
}
.flow_box {
position: relative;
width: 6rem;
padding: 0.35rem 0.5rem;
background-color: #ffffff;
}
.flow_box:after {
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
display: block;
position: absolute;
top: 50%;
left: -0.15rem;
width: 0.53rem;
height: 0.53rem;
transform: translateY(-50%);
background-image: url(../../../images/detail/job/flow_obj.svg);
background-position: bottom center;
background-repeat: no-repeat;
background-size: contain;
content: "";
}
.flow_ttl {
margin-bottom: 0.25rem;
font-size: 0.4rem;
font-weight: 700;
letter-spacing: 0;
}
.flow_ttl:after {
display: block;
width: 100%;
height: 4px;
margin-top: 0.2rem;
background-image: url(../../../images/detail/job/flow_dot-sp.svg);
background-position: bottom left;
background-repeat: no-repeat;
background-size: contain;
content: "";
}
.flow_ttl span {
display: block;
margin-top: 0.05rem;
font-size: 0.24rem;
font-weight: 700;
}
.flow_txt {
font-size: 0.26rem;
font-weight: 500;
line-height: 1.4;
}
.flow_red {
color: #eb0000;
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0;
}
/*==============================================================================
other
============================================================================= */
.other_bg {
padding: 1rem 0;
}
.other_top {
margin-bottom: 0.3rem;
}
.other_item {
margin-bottom: 0.3rem;
padding: 0.4rem 0 0.2rem;
background-color: #f3f3f3;
}
.other_item:last-child {
margin-bottom: 0;
}
.other_inner {
width: 6.1rem;
margin: 0 auto;
}
.other_inner.-pb {
position: relative;
padding-bottom: 1.2rem;
}
.other_box {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
margin-bottom: 0.2rem;
}
.other_left {
width: 2.8rem;
}
.other_right {
width: 3.1rem;
}
.other_right_ttl {
margin-bottom: 0.1rem;
font-size: 0.32rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.5;
}
.other_right_txt {
font-size: 0.26rem;
font-weight: 500;
}
.other_right_category {
margin-bottom: 0.2rem;
line-height: 0;
}
.other_right_category .live_icon {
width: 1.6rem;
height: 0.38rem;
display: block;
}
.tag_list{
min-height: 0.38rem;
margin: 0 0 0.4rem;
padding: 0 0 0 0.48rem;
position: relative;
}
.tag_list .category_icon {
width: 0.38rem;
height: 0.38rem;
position: absolute;
left: 0;
top: 0;
}
.tag_list .category_icon img{
display: block;
}
.tag_list .category_txt {
padding: 0.07rem 0.5rem;
border-radius: 19px;
background-color: #ffffff;
font-size: 0.26rem;
font-weight: 500;
line-height: 1;
margin: 0 0.1rem 0.1rem 0;
display: inline-block;
float: left;
}
.other_date {
margin-bottom: 0.3rem;
padding: 0.17rem 0;
background-color: #a4a4a4;
color: #ffffff;
font-size: 0.26rem;
font-weight: 700;
line-height: 1;
text-align: center;
}
.other_txt {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
margin-bottom: 0.25rem;
overflow: hidden;
font-size: 0.26rem;
font-weight: 500;
line-height: 1.6;
}
.other th {
width: 1.5rem;
padding-right: 0.1rem;
font-size: 0.26rem;
font-weight: 700;
line-height: 1.6;
}
.other td {
width: 4.6rem;
font-size: 0.26rem;
font-weight: 500;
line-height: 1.6;
}
.other_button {
position: absolute;
bottom: 0.3rem;
width: 100%;
border-radius: 30px;
outline: none;
line-height: 0;
}
.other_button a {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.17rem 0;
border-radius: 30px;
background-color: #000000;
color: #ffffff;
font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "メイリオ", Meiryo, "MS P Gothic", "ＭＳ Ｐゴシック", Osaka, Arial, Helvetica, sans-serif;
font-size: 0.28rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1;
text-align: center;
}
.other_button a:after {
-webkit-transition: -webkit-transform 0.2s;
display: inline-block;
width: 0.25rem;
height: 0.25rem;
margin-left: 0.3rem;
background-image: url(../../../images/detail/common/other_arrow.svg);
background-position: bottom center;
background-repeat: no-repeat;
background-size: contain;
content: "";
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}

/* おすすめウェビナーが0件の場合のリンク add:20201010 */
.about_theme_link {
text-align: center; }
.about_theme_link .button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 5rem;
height: .6rem;
margin: 0 auto;
padding: 0 0.15rem;
border-radius: .6rem;
background-color: #fff;
border: .08rem solid #000;
font-size: .3rem;
font-weight: bold; }
.study .about_theme_link .button {
color: #008558;
border-color: #008558; }
.job .about_theme_link .button {
color: #0030ff;
border-color: #0030ff; }
.about_theme_link .button .arrow {
margin-left: .2rem;
height: .19rem;
width: 0.12rem;
vertical-align: middle;
line-height: 0; }

.main_ondemand{
width: 100%;
}
.main_ondemand .movie_iframe{
margin: 0 0 0.25rem;
}
.main_ondemand .movie_iframe .movieInner{
position: relative;
width: 100%;
padding-top: 56.25%;
}
.main_ondemand .movie_iframe .movieInner iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

.live_btn{
width: 100%;
text-align: center;
margin: 0 0 0.4rem;
}
.live_btn a{
background: url("../../../images/detail/common/btn_bg_01.gif");
background-size: 0.12rem;
color: #fff;
font-size: 0.44rem;
font-weight: bold;
letter-spacing: 2px;
border: 0.14rem solid #d50000;
border-radius: 100px;
padding: 0.18rem;
display: block;
position: relative;
}
.live_btn a::before{
content: "";
width: 0.58rem;
height: 0.58rem;
background: url(../../../images/detail/common/btn_ico_01.png) no-repeat;
background-size: 100% auto;
position: absolute;
right: 0.5rem;
top: 50%;
margin-top: -0.29rem;
}
.live_btn + .txt{
font-size: 0.26rem;
font-weight: bold;
text-align: center;
margin: 0 0 0.18rem;
}
.btn_box{
width: 100%;
margin: 0 auto;
}
.btn_box > li{
width: 49%;
margin: 0 2% 0 0;
float: left;
}
.btn_box > li:last-child{
margin: 0;
}
.btn_box.type02 > li{
width: 100%!important;
float: none!important;
}
.btn_box > li a{
color: #fff;
font-size: 0.28rem;
font-weight: bold;
text-align: center;
border-radius: 100px;
padding: 0.1rem;
display: block;
}
.btn_box > li.mail a{
background: #00379c;
border: 0.1rem solid #002b7b;
}
.btn_box > li.twitter a{
background: #1da1f2;
border: 0.1rem solid #0E84CC;
}
}