@charset "utf-8";
/* CSS Document */
/*sp表示*/
.pc-only{
	display: block;
}
.sp-only{
	display: none;
}

@media screen and (max-width: 767px){
	.pc-only{
	display: none!important;
}
	.sp-only{
	display: block!important;
}
	img{
		max-width: 100%;
	}
	body{
		background: none;
    position: relative;
	}
	#wrapper #pageImg{
		height: auto;
		width: 100%;
	}
	body#online .inner{
		width: 90%;
	}
	#pageImg h1{
		width: 100%;
		padding-top:20px;
	}
	body#online #pageImg h1{
		font-size: 26px;
	}
	body#online #pageImg .inner p{
		font-size: 18px;
	}
	body#online #wrapper #pageImg{
		height: auto;
	}
	body#online #pageImg .inner ul{
		width: 100%;
	    flex-wrap: wrap;
	}
	body#online #pageImg .inner ul li{
		width: 100%;
		margin-top: 8px;
	}
	body#online #pageImg .inner ul li a{
	    padding: 10px 21px;
		font-size: 14px;
	}
	body#online #pageImg .text-link{
		width: 100%;
		padding: 0;
    display: flex;
	}
	body#online #pageImg .text-link a{
	    padding: 10px 21px;
		font-size: 14px;
	}
	#breadcrumbs ol{
		width: 90%;
		margin: 0 auto;
	}
	.article{
		width: 90%;
	}
	.article .article{
		width: 100%;
	}
	.bxslider_company_wrap{
		width: 100%;
	}
	#content .bxslider_company_wrap p.map_ttl span:before, #content .bxslider_company_wrap p.map_ttl span:after{
		width: 30%;
	}
	#online div#index-trainingbtn{
		 width: 70%;
    	margin: 0 auto;
	}
	.bx-clone{
		width: 50%;
	}
	#online .trainingPage_teacher #teacherList{
		width: 100%;
		justify-content: space-between;
	}
	#online .trainingPage_teacher #teacherList .teachItem{
		width: 40%;
    margin: 0 0 15px 0;
    display: flex;
    flex-flow: column;
    padding: 15px;
	}
	#online .trainingPage_teacher #teacherList .teachItem .text{
		width: auto;
		order: 2;
		margin-top: 10px;
	}
	.article h2{
		font-size: 24px;
	}
	#online h3{
		font-size: 18px;
	}
	.webinar_problem_img img{
		width: 50%;
	}
	.webinar_problem_img .problem_text_1{
		font-size: 5px;
	     top: 0px;
		 width: 34%;
    height: 50px;
	}
	.webinar_problem_img .problem_text_2{
    	left: 3.5%;
		top:40px;
		font-size: 5px;
		width: 32%;
		height: 70px;
	}
	.webinar_problem_img .problem_text_3{
		font-size: 5px;
    right: 5%;
    top: 62px;
    width: 30%;
    height: 45px;
	}
	.webinar_problem_img .problem_text_4{
		font-size: 18px;
    bottom: -32px;
	}
	.online_s03.content__box .flex{
		flex-wrap: wrap;
	}
	.online_s03.content__box .flex div{
		width: 100%;
	}
	.online_s03.content__box .flex div img{
		width: 100%;
	}
	.online_s03.content__box .flex div h4{
		margin-top: 20px;
	}
	#online .online_ty.arrow:before{
    border-width: 80px 150px 0 150px;
	}
	#online .online_s01_cnt{
		flex-wrap: wrap;
	}
	#online .online_s01_cnt ul{
		width: 100%;
	}
	#online .online_s01_cnt div{
		width: 100%;
	}
	.cnt__mr .btn-link li + li{
		margin: 10px auto 0 auto;
	}
	#online .online_ty{
		font-size: 18px;
	}
	.online_s_add01.content__box .flex p{
		width: 100%;
	}
	.online_s_add01.content__box .flex div{
		width: 100%;
	}
	.report_archive_list .img{
		width: 100%;
		margin: 0 auto;
	}
	.report_archive_list .detail li:nth-of-type(1){
    margin: 0 0 10px 0;
	}
	.report_archive_list_cnt_img{
		width: 30%;
	}
	#online .online_s_add02 ul{
		margin-top: 0;
	}
	#online .online_s_add02 ul li{
		width: 47%;
    margin-top: 40px;
	}
	#online #update .box{
		width: 100%;
    margin: 0 auto 30px;
	}
	#online #update .img{

		width: 100%;
		overflow: hidden;
		height: auto;
	}
	.block_aboutKEES h4{
		font-size: 18px;
	}
	.block_aboutKEES .img__box{
		padding:15px;
	}
	.block_aboutKEES img{
    padding-left: 0;
    margin: 0 auto 10px;
    width: 100%;
	}
	.block_aboutKEES a{
		padding: 15px 0;
    width: 100%;
    text-align: center;
	}
	#footerContact .inner ul{
		margin-top: 20px;
	}
	#footerContact .inner div.cf div.fright{
		width: 100%;
	}
	#footerContact .inner div.cf div.fright li{
		width: 100%;
		margin-right: 0;
		margin-bottom: 10px;
	}
	#footer .inner{
		flex-wrap: wrap;
	}
	#footer #flink01, #footer #flink02, #footer #flink03, #footer #flink04{
		width: 100%;
		border-right:none;
		min-height: auto;
		margin: 0;
	}
	#footer .inner > ul#flink02 > li li{
		width: 100%;
	}
	#footer .inner > ul > li li{
		float: none;
		width: 100%;
	}
	#foot-action .inner{
		width: 90%;
	}
	#foot-action .inner .actionbtn li.tel{
    margin-bottom: 20px;
    margin-top: 10px;
	}
	#foot-action .inner .actionbtn li.faction_doagnosis, #foot-action .inner .actionbtn li.faction_contact, #foot-action .inner .actionbtn li.faction_download, #foot-action .inner .actionbtn li.faction_demo{
		width: 40%;
	}
	#foot-action .inner .anounce{
    right: -20px;
	}
	#footer #copyright{
		padding: 10px;
	}
	
	.tbl-scroll {
	margin: 40px 0;
    width: 100%;
    overflow-x: auto;
}
	.tbl-scroll::before {
		content: '※横にスクロールすることが出来ます。';
	}
	.plan_schedule dl{
		display: block;
	}
	#online .plan_schedule{
		width: 100%;
	}
	#online .plan_schedule dl dt:first-child{
		width: 100%;
		display: block;
	}
	.plan_schedule dl dd{
		width: 100%;
		display: block;
		padding: 15px;
	}
	.plan_schedule dl dt:before, .plan_schedule dl dt:after{
		content: none;
	}
	#online .online_s06 .tb{
		width: 1000px;
	}
	ul.bxslider_training li{
		text-align: center;
		display: flex;
		justify-content: center;
	}
	p.trainingPage_teacher_copy.textMincho strong{
		font-size: 28px;
	}
	.mvArea{
		width: 100%;
	}
	#trainingDetailPage #pageImg.sales{
		height: auto;
		background-image: url(../images/training/sale5_190205.png?d=1706301732);
    background-position: left center;
    background-size: cover;
	}
	#trainingDetailPage #pageImg.sales .btnList{
		width: 100%!important;
    margin: 20px auto!important;
    display: block;
	}
	.mvArea .btnList ul{
		display: flex;
	}
	.mvArea .btnList li{
    width: 26%;
    font-size: 12px;
    margin: 0 auto;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding: 10px;
    height: auto;
    background-position: center;
	}
	.mvArea .btnList li strong{
		font-size: 18px;
	}
	.mvArea .btnList li strong span{
		font-size: 12px;
	}

	#trainingDetailPage .article__img, #resultsPage .article__img, #aboutPage .article__img, .mediaPage .article__img{
		width: 90%;
	}
	#trainingDetailPage .top-report_flex{
		justify-content: flex-start;
		    width: 100%;
    margin: 0 auto;
	}
	#trainingDetailPage .top-report_flex li{
		width: 45%;
		margin:0 5px 10px;
	}
	#trainingDetailPage .top-report_flex img{
		width: 100%;
		padding: 0;
	}
	.training_sales_txtBox h2 strong{
		font-size: 28px;
	}
	
	.section > .inner{
		width: 90%;
	}
	#index-results div.full{
		width: 100%;
	}
	#index-results div.full ul.list02{
		display: flex;
		flex-wrap: wrap;
	}
	#index-results div.full ul.list02 li{
		    width: 40%;
    margin: 10px 9px 0 9px;
	}
	#trainingDetailPage .results{
		width: 100%;
	}
	#trainingDetailPage .results .photo{
		text-align: center;
	}
	body{
		overflow: hidden;
	}
	body.is-fixsed{
	position: fixed;
    width: 100%;
    height: 100%;
	}
	body#trainingDetailPage .report_block{
		width: 100%;
	}
	body#trainingDetailPage .report_block ul li{
		width: 100%;	
		margin: 0 auto 20px;
	}
	body#trainingDetailPage .report_block ul li a{
		width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
	}
	.article #voice .voiceItem{
		width: auto;
    margin: 0 auto 25px;
	}
	.article #voice .voiceItem + .voiceItem{
    margin: 0 auto 25px;
	}
	.photoItem .photo{
		width: 100%;
		margin: 10px auto 20px;
		display: flex;
		justify-content: center;
	}
	.reasonBox dl{
		width: auto;
	}
	#trainingDetailPage .realreport ul.report_box li{
		width: 100%;
		margin: 0 auto 40px;
	}
	#trainingDetailPage .realreport ul.report_box li h4, .report_block .report_box p{
		width: auto;
	}
	#methodPage #method-movie .item, #trainingDetailPage #method-movie .item{
		width: 100%;
		margin: 0 auto;
	}
	.trainingPage-relate-column li{
		width: 100%;
	}
	.trainingPage-relate-column li:nth-of-type(2n){
		margin-left: 0;
	}
	#footerContact .inner{
		width: 90%;
	}
	
	#trainingDetailPage img.onlineicon{
		    right: 0;
		left: auto;
	}
	#footer .inner{
		width: 90%;
	}
	.mvArea h1{
		font-size: 26px!important;
	}
    p.mv_copy{
        font-size:16px!important;
    }
	body#online #pageImg{
		background-position: left center;
	}
	#method-movie .item iframe{
	width:100%;
    height: 198px;
	}
	#index-results h3{
		width: 90%;
		margin: 20px auto 0;
	}
	.center{
		width: 90%;
		margin-right: auto;
		margin-left: auto;
	}
	#trainingDetailPage #method-movie .item{
		margin-bottom: 20px;
	}
	#trainingDetailPage .mvArea .inner{
		width: 90%;
		margin: 0 auto;
	}
	li.menu__single ul.menu__second-level{
		display: none;
	}
	#trainingDetailPage .report_box {
		justify-content: space-between;
display: flex;
flex-wrap: wrap;
	}	
	#trainingDetailPage .realreport ul.report_box li {
width: 48%;
margin: 0;
}
	

    
    /*221104*/
    #trainingDetailPage .main-wrap.flex .cnt-article{
        width: 100%;
    }
    
    #trainingDetailPage .main-wrap.flex .sidenav{
        width: 100%;
    }
    #trainingDetailPage .main-wrap.flex section{
        padding: 0 1rem;

    }
    #trainingDetailPage .main-wrap.flex .bxslider_company_wrap .top-report_flex li{
            width: 50%;
    margin: 0;
    }
    #trainingDetailPage .main-wrap.flex #training_program_id .cnt__mr .btn-link li{
        width: 100%;
    }
    #trainingDetailPage .main-wrap.flex #online .plan_schedule dl{
        display: block;
    }
    #trainingDetailPage .main-wrap.flex #online .plan_schedule dl dt{
        width: 100%;
    }
    #trainingDetailPage .main-wrap.flex #online .plan_schedule dl dd{
        width: 100%;
    }
    #trainingDetailPage .main-wrap .article__img {
    padding: 0 1rem;
    box-sizing: border-box;
}

    #trainingDetailPage .main-wrap.flex .results_flex .results{
        width: 100%;
    }
    #trainingDetailPage .main-wrap.flex .report_block ul.report_box li{
        width: 100%;
    }
    #trainingDetailPage .main-wrap.flex .report_block ul.report_box li a{
        text-align:center;
    }
    #trainingDetailPage .main-wrap.flex #voice .voiceItem{
        flex-flow: column;
        padding:20px;
        border-left: none;
        border-top: 1px solid #cc0000;
    }
    #trainingDetailPage .main-wrap.flex #voice .voiceItem h4{
        width: 100%;
        margin-bottom: 1rem;
    }
    #trainingDetailPage .main-wrap.flex #voice .voiceItem ul.voicelist{
        border-left: none;
        padding-left: 1rem;
        border-top: 1px dotted #cccccc;
        padding-top: 1rem;
        width: 100%;
    }
    #trainingDetailPage .main-wrap.flex .reasonBox dl{
        margin-top: 0;
    }
    #trainingDetailPage .main-wrap.flex .realreport ul.report_box li{ 
    width:calc((100% - 1rem) / 2);
    }
    #trainingDetailPage .main-wrap.flex #method-movie .item{
        width: 100%;
    }
    
    #pageMV .trainingDetail_mv_inner .trainingDetail_mv_inner_txt ul{
        width: 100%;
    }
    #trainingDetailPage .main-wrap.flex #index-results div.full ul.list02 li{
        width: calc((100% - 1rem) / 2);
    }
    
    
    /* ヘッダー */
    
    	#header{
		width: 100%;
		height: 60px;
		position: fixed;
		top:0;
		left: 0;
		right: 0;
    background: #fff;
		z-index: 99999;
		box-shadow:0px 10px 10px -8px rgb(0 0 0 / 5%);
	}
	#header #logo{
		width: 60px;
	}
	#header #logo a{
		width: 100%;
	}
	#header #logo a img{
		width: 100%;
	}
    #header .headTxt{
		font-size: 12px;
    line-height: 1.2;
    padding: 10px 0 0 70px;
	}
	#header span.anatxt_red{
		font-size: 12px;
	}
    #header .inner{
    justify-content: flex-start;
    }
    #header .inner .hd_ut{
        padding: 0;
    }
    #header .spNAv {
        width: 100%;
        position: fixed;
    }
    #header .headguide{
		display: none;
	}
	#header #globalNav{
		display: none;
		top:60px;
	}	
    #header #globalNav li#gnav02 a{
		border: none;
	}
    
	#header #globalNav.is-checked{
		display: block;
		padding: 30px 0;
    background: #f4f4f4;
		position: initial;
    height: 100vh;
    margin-top: 59px;
	}
    #header #globalNav .inner{
        padding: 0;
    }
    #header #globalNav .inner ul{
        display: block;
    }
    #header #globalNav li#gnav01, #header #globalNav li#gnav02, #header #globalNav li#gnav03, #header #globalNav li#gnav04, #header #globalNav li#gnav05, #header #globalNav li#gnav06, #header #globalNav li#gnav07, #header #globalNav li#gnav08, #header #globalNav li#gnav09{
        width: 90%;
    background: #fff;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    }
    #header #globalNav li a {
    color: #333;
    display: flex;
    padding: 18px 30px;
    align-items: center;
    border: none;
    text-align: left;
    justify-content: flex-start;
}
    #header .headguide.is-checked{
    background: #f4f4f4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	position: fixed;
    bottom: 80px;
    padding: 15px 0;
    text-align: center;
    width: 100%;
	}
    #header #globalNav li a:before {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    margin-right: 5px;
    vertical-align: middle;
    border-color: #c00;
    content: '';
    margin-right: 10px;
}
    
/* ハンバーガー */
.l-header__hamburger {
  height: 100%;
  width: 60px;
  z-index: 100;
}
.c-hamburger {
  border: none;
  z-index: 101;
  right: 0;
  position: absolute;
    padding: 15px;
	background: #fff;
}
.c-hamburger span {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: #000;
  position: relative;
  transition: ease 0.3s;
  display: block;
}
.c-hamburger span:nth-child(1) {
  top: 0;
}
.c-hamburger span:nth-child(2) {
  margin: 8px 0;
}
.c-hamburger span:nth-child(3) {
  top: 0;
}
/* クリック時のハンバーガーメニューのスタイリング */
.c-hamburger.is-checked span {
  background-color: #1c273e;
}
.c-hamburger.is-checked span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}
.c-hamburger.is-checked span:nth-child(2) {
  opacity: 0;
}
.c-hamburger.is-checked span:nth-child(3) {
  top: -12px;
  transform: rotate(-45deg);
}

#header #foot-action.is-checked{
        display:block!important;
    }
    
    #trainingDetailPage #pageMV .trainingDetail_mv_inner img.onlineicon{
        right: 0;
    }
    
    #pageMV{
        height: auto;
        padding: 90px 0 20px;
    }
    
#pageMV .trainingDetail_mv_inner .trainingDetail_mv_inner_txt{
 position: initial;
    transform: translate(0);
}
    #pageMV .trainingDetail_mv_inner .trainingDetail_mv_inner_txt ul li{
        width: 100%;
    }
    #pageMV .trainingDetail_mv_inner .trainingDetail_mv_inner_txt .text-link{
        width: 100%;
    }
    #trainingDetailPage .main-wrap.flex .trainingPage_teacher #teacherList .teachItem{
        width: 100%;
    }
    #trainingDetailPage .main-wrap.flex .report_archive_list .img{
        width: 100%;
    }
    #trainingDetailPage .main-wrap.flex .report_archive_list .txt{
        width:100%;
    margin-top: 1rem;
    }
    #trainingDetailPage .main-wrap.flex .online_s_add02 ul li{
        width: calc((100% - 1rem ) / 2);
    }
    #trainingDetailPage .main-wrap.flex #online #update .box{
        width: calc((100% - 1rem ) / 2);
    }
    #trainingDetailPage .main-wrap.flex .block_aboutKEES h4{
        font-size:18px ;
    padding: 0 15px;
    }
    #trainingDetailPage .main-wrap.flex #online #update .img a{
        height: 120px;
    }
    #trainingDetailPage .main-wrap.flex #online #update .img a img{
    object-fit: cover;
    }
    
li.menu__single .hide_box{
    display: none;
}
    .slide_company_wrap_inner{
    height: 110px;
}
    .slide-items-company li{
        max-width: 100%;
    }
    
    #trainingDetailPage .main-wrap.flex ul.btn-link li {
    width: 100%;
}
    .actionbtn-flex{
        max-width: calc(100% - 65px);
        gap:30px;
    }
    
    .actionbtn-flex ul{
        width: 100%;
    }
    .actionbtn-flex ul li a {
    font-size: 9px;
    gap: 5px;
    padding: 8px 5px;
}

.actionbtn-flex ul li a img{
    max-height:10px;
}

.actionbtn-flex ul li a .balloon {
    font-size: 9px;
    padding: 4px;
    top: -18px;
}

.actionbtn-flex ul li a .outline {
    font-size: 8px;
    padding: 3px;
}
    #footerContact .inner h3.footerContact-title{
        max-width: 90%;
        font-size: 20px;
    }
    .Contact-flex-tel{
        width: 100%;
    }
    .Contact-flex ul{
        width: 100%;
    gap: 10px;
    }
    #footerContact .inner .Contact-flex li{
        width: 100%;
    }
    .Contact-flex ul li.download,
    .Contact-flex ul li.contact{
        margin-top: 18px;
    }
}