@charset "utf-8";
/*  ===========================================================
	パソコンくらぶ　彩（いろどり） 	
			Last Update 2021/07/07			
			Written by O.K
===========================================================  */

@media screen and (min-width :600px) {
html {
	font-size : 87.5%;
	padding: 0 1%;
}
header h1 {
	font-size: 0.9rem;
}
#logo_wrap {
    display: flex;
}
#logo_sp {
    display: none;
}
#logo,
#logo2 {
	display: block;
    width: 50%;
    flex: 1;
}
nav #gnavi_ul li a {
    line-height: 2.5;
	/*height: auto;*/
}
#pct {
	display: block;
	width: 50%;
}
#calendar_fr {
    flex-wrap: wrap;
    border: 8px #b30018 solid;
	border-top: none;
	/*margin-bottom: 1em;*/
	background: #b30018;
}
#blog_top{
    max-width: none;
}
#blog_top a:hover{
	opacity: 0.7;
}
ul.charge_desc li {
    width: 32%;
}
.charge_desc li.point:nth-child(4){
	margin-bottom: 0;
}
#main_contents .kouza_ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}
#main_contents .kouza_ul li {
	background-image: url(../images/bk_bnr_kouza.png);
	text-indent: 1em;
	line-height: 2.5em;
	height: 40px;
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
}
#main_contents .kouza_fl {
	width: 49%;
}
#main_contents .kouza_ul .kouza_img.ht5 {
	width: 60%;
}
#main_contents .kouza_fl p {
	padding: 0.3em;
}
#main_contents .catch_img {
	margin-bottom: 10px;
}
.catch_img a:hover,
.w_e a:hover,
.bnr_top a:hover,
.bnr_top50 a:hover {
	opacity: 0.5;
	position: relative;
}
.top_info {
	padding: 0 2% 3%;
}
.h2_desc,
.h3_desc {
	margin-bottom: 2em;
}
#side {
	max-width: 100%;
	margin-top: 10px;
	margin-left: 0;
	margin-bottom: 100px;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}
.fb-like-box,
.twitter-box {
	clear: both;
	text-align: center;
	width: 100%;
}
#side a {
	display: block;
	opacity: 1;
}
#side a:hover {
	opacity: 0.5;
}
.ekiten {
	width: 200px;
	text-align: center;
	margin: 10px auto;
}    
.wrap_bnr50_600 {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
}    
#top_info_bnr .bnr_top50_600,
#side .bnr_top50_600 {
	padding: 0;
	width: 49%;
}
.wrap_bnr50_600_only {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}    
#top_info_bnr .bnr_top50_600_only {
	margin-bottom: 2%;
	width: 49%;
}
#toppage .temp_3 {
	clear: both;
	margin-bottom: 10px;
	margin-top: 10px;
	height: 150px;
}
#toppage .temp_3 .temp_1 {
	float: left;
	margin-right: 5px;
	margin-left: 5px;
	width: 200px;
}    
.spblock{
    display:inline;
}    

.flexlr{
    display: flex;
    flex-wrap: wrap;
}

/*==================================
	---information---
==================================*/
#main_contents p.info_r_s {
	width: 35%;
	height: auto;
	float: right;
	padding: 1%;
	margin-top: 1em;
	margin-bottom: 2em;
	margin-right: 1em;
	margin-left: 1em;
	border: 1px solid #dddddd;
	box-shadow: 1px 1px 1px #999;
	transform: rotate(5deg);
}
#main_contents p.info_l_s,
#main_contents p.info_l_s2 {
	width: 35%;
	height: auto;
	float: left;
	padding: 1%;
	margin-top: 1em;
	margin-right: 1em;
	margin-bottom: 2em;
	border: 1px solid #dddddd;
	box-shadow: 1px 1px 1px #999;
	transform: rotate(-5deg);
}
#staff_info #main_contents p.info_l_s,
#staff_info #main_contents p.info_l_s2 {
	width: 25%;
	margin-bottom: 0;
	transform: rotate(0);
}	
#staff_info #main_contents .staff_in_li{
	margin-bottom: 3em;
	float: right;
	width: 72%;
}
#staff_info #main_contents .staff_in_li dt{
	clear: both;
	float: left;
}
#main_contents p.info_l_s img,
#main_contents p.info_r_s img {
	width: 100%;
	height: 100%;
    vertical-align: middle;
}
#staff_info #main_contents p.info_r_b,
#staff_info #main_contents p.info_r_b2 {
	width: 72%;
	margin-bottom: 2em;
	padding-right: 3%;
	float: right;
}
#information .img_info {
	width:40%;
}
#information .txt_info {
	padding: 0.5em;
	line-height: 1.5;
	margin-bottom: 1em;
    width: 60%;
}
/*==================================
	---good_point---
==================================*/
#good_point .img_info {
}
#good_point .txt_info {
	padding: 0.5em;
}
/*==================================
	---faq_main---
==================================*/

.staff_01 td.form_aa {
	width: 16%;
}
.staff_01 td.form_bb {
	padding-right: 10px;
}
#faq_main .accordion_list .accordion_content a {
	background-image: url(../images/bk_link.gif);
	background-repeat: no-repeat;
	color: #333;
	padding-left: 20px;
	margin-right: 5px;
	margin-left: 5px;
}
#good_point .good {
	margin-bottom: 1em;
}
#good_point .good img {
	width:25%;
	margin-bottom:1em;
}

/*==================================
	---lesson_main---
==================================*/
#lesson .course {
	margin: 1em 0;
}
#lesson .le_img01,
#lesson .le_img02,
#lesson .le_img03,
#lesson .le_img04,
#lesson .le_img05,
#lesson .le_img06 {
	margin-right: 0;
}
#lesson .le_img01,
#lesson .le_img02,
#lesson .le_img04,
#lesson .le_img05 {
	float: left;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #eee;
	padding: 1%;
	width: auto;
	height: auto;
	max-width: 32%;
	margin-right: 2%;
	margin-bottom: 2%;
}
#lesson .le_img03,
#lesson .le_img06 {
	float: left;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #eee;
	padding: 1%;
	width: auto;
	height: auto;
	max-width: 32%;
	margin-bottom: 2%;
}
#lesson h5.text_title {
	width:80%
}
/*==================================
	---word_excel---
==================================*/
.img_office_01 {
	width: auto;
	height: auto;
	max-width: 50%;
	padding-left: 1%;
}
/*==================================
	---flow---
==================================*/
#main_contents h3.flow {
	padding: 1% 0;
	border-left: none;
	text-indent: 0;
	background-color: #fff;
}
/*==================================
	---kiz_programming---
==================================*/
#kiz_programming .course {
	clear:both;
}
#kiz_programming .course h4 {
	font-size: 150%;
}
#kiz_programming .img_course {
	width:40%;
}
#kiz_programming .txt_course {
	padding: 0.5em;
	line-height: 1.5;
	margin-bottom: 1em;
    width: 60%;
}
/*==================================
	---iro_programming---
==================================*/

#irodori_programming .pro_zasetsu {
	float: left;
	width: 60%;
	padding: 0 1.5em;
}
#irodori_programming .img_iropro {
	float:right;
	width:40%;
	padding: 0 1.5em;
}    
    
.chkcheckbox label {
    margin-right: 2.5em;
}    
}

/*==================================
	---mos_goukaku---
==================================*/

#mos_goukaku article .person_img {
    width: 20%;
}

#mos_goukaku ul.goukaku_desc {
	width: calc( 100% - 20% );
}

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

@media screen and (min-width :960px) {
html {
	font-size : 87.5%;
	padding: 0;
}
body {
	line-height: 1.5;
}
header {
	padding: 0;
}
header h1 {
	font-size : 1rem;
}
nav #gnavi_ul {
    flex-wrap: nowrap;
}
nav #gnavi_ul li {
}
nav #gnavi_ul li:before {
    padding-top: 50px;
    margin: 4px 0 0;
}
nav #gnavi_ul li:nth-child(1) {
	border-left: none;
    flex: 61;
}
nav #gnavi_ul li:nth-child(2) {
    flex: 116;
}
nav #gnavi_ul li:nth-child(3) {
    flex: 146;
}
nav #gnavi_ul li:nth-child(4) {
    flex: 174;
}
nav #gnavi_ul li:nth-child(5) {
    flex: 174;
}
nav #gnavi_ul li:nth-child(6) {
    flex: 68;
}
nav #gnavi_ul li:nth-child(7) {
    flex: 261;
}
nav #gnavi_ul li a {
    line-height: 2.85;
	font-size: 1.5rem;
	height: 58px;
}
nav #gnavi_ul li:nth-child(3n):before{
    content: "";
}
nav #gnavi_ul li#navi01 a {
	margin-bottom: 0;
}
nav #gnavi_ul li#navi02 a {
	margin-bottom: 0;
}
nav #gnavi_ul li#navi03 a {
	margin-bottom: 0;
}
nav #gnavi_ul li#navi04 a {
	margin-bottom: 0;
}
nav #gnavi_ul li#navi05 a {
	margin-bottom: 0;
}
nav #gnavi_ul li#navi06 a {
	margin-bottom: 0;
}
nav #gnavi_ul li#navi07 a {
	margin-bottom: 0;
}	
nav #gnavi_ul li:after {
    content: none;
}
#blog_top{
    max-width: 100%;
    padding: 0;
}	
#contents {
	width: 100%;
    display: flex;
    gap: 4.6%;
}
#main_contents {
	padding: 0;
    flex: 1 1 900px;
}
#mt_schedule #main_contents,
#jpt_schedule #main_contents	{
	width: 73%;
}
#main_contents h1 {
	color: #333;
	font-weight: bold;
	font-size: 18px;
	font-size: 1.13rem;
	text-decoration: none;
	position: relative;
	padding-top: 10px;
	line-height: 200%;
	margin-bottom: 1em;
}
#main_contents h2 {
	position: relative;
	line-height: 2;
}
.charge_desc a:hover {
	opacity: 0.5;
}
#main_contents .catch_img,
#main_contents .w_e {
	padding: 1% 0;
}
#main_contents .kouza_ul li {
	background-image: url(../images/bk_bnr_kouza.png);
	text-indent: 1em;
	line-height: 2.5em;
	height: 40px;
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
}
#main_contents .kouza_fl.ht120 {
	height: 140px;
}
#main_contents .kouza_fl.ht340 {
	height: 340px;
}
#main_contents .kouza_fl p {
	padding: 0.3em;
}
#staff_info #main_contents p.info_r_s {
	width: 25%;
}
#staff_info #main_contents p.info_l_s {
	width: 25%;
    margin-bottom: 2em;
}
#staff_info #main_contents p.info_l_s2 {
    margin-bottom: 2em;
}
#main_contents p.info_l_s img,
#main_contents p.info_r_s img {
	width: 100%;
	height: 100%;
}
#main_contents .catch_img {
	margin-bottom: 10px;
}
#main_contents .catch_img a:hover,
#main_contents .w_e a:hover,
#main_contents .bnr_top a:hover,
#main_contents .bnr_top50 a:hover  {
	opacity: 0.5;
	position: relative;
}
.top_info {
	padding: 0 2% 1%;
}
.h2_desc,
.h3_desc {
	margin-bottom: 2em;
}
#side {
	max-width: 300px;
    min-width: 250px;
	margin-bottom: 100px;
	padding: 0;
	margin-top: 0.7em;
    flex: 1 1 300px;
    display: block;
    flex-wrap: nowrap;
}
#side a {
	display: block;
	opacity: 1;
}
#side a:hover {
	opacity: 0.5;
}
.ekiten {
	width: 200px;
	text-align: center;
	margin: 10px auto;
}      
.wrap_bnr50_600 {
    display: block;
    flex-wrap: nowrap;
    margin-bottom: 1em;
}
#top_info_bnr .bnr_top50_600,
#side .bnr_top50_600 {
	margin-bottom: 5%;
	width: 100%;
	margin-right: 0;
} 
#top_info_bnr .bnr_top50_600_only {
	margin-bottom: 1em;
	width: 49%;
}
footer {
}
footer .f_container {
    max-width: 1260px;
    /*margin: 0 auto;*/
}
footer #f_navi {
    display: flex;
    gap:2rem;
    padding: 2em 0;
    text-align: left;
}
footer .f_navi01 {
    flex-grow: 0.7;
}
footer .f_navi02 {
    flex-grow: 1;
}
footer .f_navi03 {
    flex-grow: 1;
}
footer #f_copyright {
    padding: 2em 0 2.5em;
}
footer .f_navi11 {
    display: flex;
    gap: 2rem;
}    
/*footer .f_navi11 {
    display: none;
}  */  
footer .f_navi11 li {
    gap:2em;
}
#toppage .temp_3 {
	clear: both;
	margin-bottom: 10px;
	margin-top: 10px;
	height: 150px;
}
#toppage .temp_3 .temp_1 {
	float: left;
	margin-right: 5px;
	margin-left: 5px;
	width: 200px;
}    
    
/*==================================
	---information---
==================================*/

#main_contents p.info_b {
	padding-top: 1em;
	line-height: 2;
}	
#information .txt_info {
	line-height: 2;
}
/*==================================
	---good_point---
==================================*/
#good_point .good {
	line-height: 2;
	padding-bottom: 2em;
	padding-right: 3em;
}	
#good_point .txt_info {
	line-height: 2;
}
/*==================================
	---lesson_main---
==================================*/
#lesson .h3_desc {
	line-height: 2;
	padding-bottom: 2em;
	padding-right: 12em;
}
#lesson #keiei_kouza li {
	line-height: 2;
}
#lesson p {
	line-height: 2;
}
/*==================================
	---word_excel---
==================================*/
.img_office_01 {
	width: auto;
	height: auto;
	max-width: 50%;
	padding-left: 1%;
}
/*==================================
	---charge---
==================================*/

table.charge_tbl{
    font-size: 125%;
}
/*==================================
	---staff---
==================================*/
#main_contents .staff_01 {
	font-size: 18px;
	font-size: 1.13rem;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	border-collapse: separate;
	border-spacing: 3px;
}
.staff_01 td.form_aa {
	color: #666;
	border: 1px solid #333;
	padding: 5px;
	background-color: #eee;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	padding-left: 5px;
	background-image: url(../images/bk_contact_form.png);
	background-repeat: repeat-y;
	background-position: right top;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
}
.staff_01 td.form_bb {
	text-align: left;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-right: 2px solid #999;
	border-bottom: 1px solid #999;
	border-top: 1px solid #999;
}
/*==================================
	---faq_main---
==================================*/

#faq_main .accordion_list .accordion_content a {
	background-image: url(../images/bk_link.gif);
	background-repeat: no-repeat;
	text-decoration: underline;
	color: #333;
	padding-left: 20px;
	margin-right: 5px;
	margin-left: 5px;
}
#lesson .course {
	margin: 1em 0;
}
/*==================================
	---flow---
==================================*/
#flow h3 {
	border-left: none;
	text-indent: 0;
}
#flow h3 img {
	width: 100%;
}
#flow p.flow {
	line-height:2;
	padding-right: 1em;
	padding-left: 5em;
}
#flow p img {
	width: 20%;
}
h3.flow {
	padding: 1% 0;
	border-left: none;
}
/*==================================
	---contact---
==================================*/
#contact .contact_main {
	margin-bottom: 50px;
}
#contact #main_contents .contact_main {
	max-width: 100%
}
#contact .contact_main .button {
    text-align: center;
    max-width: 560px;
    display: flex;
    flex-direction: row-reverse;
    gap: 5%;
    align-items: center;
}
#contact .contact_main .result {
	font-size: 16px;
	font-size: 1.08rem;
	text-align: left;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
}

#contact .contact_main .result_apply {
	font-size: 16px;
	font-size: 1rem;
	text-align: left;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
}
#contact .contact_main .back_button {
	margin-top: 30px;
	margin-left: 0px;
	text-align: center;
}
#contact .contact_main dl {
	font-size:100%;
}
#contact .contact_main dt .white {
	color: #333;
}
input, button {
	font-size: 1.5rem;
}
input#namae,
input#namae2,
input#furigana {
	width: 15em;
}
input[type="date"] {
	width:35%;
}
select {
	font-size: 1.5rem;
}
.kiz_apply select {
	font-size: 113%;
	width:40%;
	height:1.8em;
    padding: 0;
}
.kiz_apply select#pref {
	margin-bottom:0.5em;
}
input#mail_address,
input#mail_address2 {
}
input#tel {
	width: 12em;
}
#form_table_waku p {
	text-align: center;
	margin-bottom: 10px;
}
.form p.atte {
	text-align: center;
	margin-top: 2em;
	margin-bottom: 10px;
}
#form_table_waku .p24 {
	font-size: 24px;
	font-size: 1.5rem;
}
.form_attention {
	margin-top: 1em;
	margin-bottom: 1em;
    padding: 2em;
}
#form1 input#button,
#form1 button#button,
.form input#button,
.form button#button {
	padding: 0;
}
select#time_kiz {
	font-size: 113%;
}    
.form_table01 .form_title {
	background-color: #29cd29;
	font-size: 14px;
	font-size: 0.88rem;
	vertical-align: middle;
	color: #FFF;
	text-align: center;
	border: 1px solid #999;
}
.form_aa img.hissu {
	height: 13px;
	width: 30px;
}
.form_table02 {
	max-width: 800px;
    width: 100%;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
    margin: 1em auto 2em;
}
.confirm_table02 {
	max-width: 600px;
    width: 100%;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
    margin: 1em auto 2em;
}
.form_table02 .form_aa,
.confirm_table02 .form_aa {
	/*color: #333;
	text-align: center;
	background-color: #DDD;
	vertical-align: middle;
	padding: 5px 10px;
	border: 1px solid #999;*/
}
.form_table02 .form_bb,
.confirm_table02 .form_bb {
	/*text-align: left;
	background-color: #fff;
	padding: 5px 10px;
	border: 1px solid #999;*/
}
.form_table02 .form_cc,
.confirm_table02 .form_cc {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#form1 input#backto,
#form1 button#backto,
.form input#backto,
.form button#backto {
	width:48%;
	height: 3em;
	border: none;
	background-color: #d94e61;
	color: #fff;
	border-radius: 5px;
	margin-bottom:1em;
}
input#backto:hover,
button#backto:hover {
    opacity: 0.8;
	cursor: pointer;
}
#form1 input#send,
#form1 button#send,
.form input#send,
.form button#send {
	/*width:48%;*/
	margin-bottom: 0;
}
#form1 input#backto, 
#form1 button#backto, 
.form input#backto, 
.form button#backto, 
a#backto, .back_button a {
    margin-top: 0; 
    margin-bottom: 0; 
	max-width: 700px;
	margin: 0 auto;
}
ul.apply_attention2,
p.apply_attention2,
div.apply_attention2 {
    padding: 2em;
}
a.send_apply {
	width: 80%;
}
/*==================================
	---error---
==================================*/
#error #error_h {
	font-size:300%
}
#error #error_p {
	font-size:150%;
}

/*==================================
	---mos_test_schedule---
==================================*/
#main_contents .s1_desc {	
	font-size: 125%;
	max-width: 760px;
	margin: 0 auto 1em;
}  
table.mt_schedule,
table.kizpro_schedule{
	font-size:125%;
}
#mt_schedule td .mos1,
#kiz_programming td .trial1{
  display: inline;
}
#mt_schedule td .mos2,
#kiz_programming td .trial2{
  display: inline;
}

/*==================================
	---jr_program_test_schedule---
==================================*/
 
table.jpt_schedule{
	font-size:125%;
	max-width: 760px;
}
#jpt_schedule td .jpt1{
  display: inline;
}
#jpt_schedule td .jpt2{
  display: inline;
}
}

@media screen and (min-width :1260px) {

/*==================================
	---mos_goukaku---
==================================*/

#mos_goukaku article{
	/*display: flex;*/
}
#mos_goukaku article .flex{
	display: flex;
}
#mos_goukaku article .person_img {
    width: 15%;
}
#mos_goukaku ul.goukaku_desc {
    /*flex-wrap: nowrap;*/
}

#mos_goukaku ul.goukaku_desc {
	width: calc( 100% - 15% );
}
#mos_goukaku .g_img {
    border-left: 5px solid #ffbfc7;
	display: flex;

}
#mos_goukaku .g_img img {
	align-self: center;
	
}
}