@charset "utf-8";

/* =========== home =========== */

/* -------------- メインイメージ と 見出し ---- */
.hero {
	background-image: url(../image/hero_bg.jpg);
	background-size: auto 380px;
	padding: 30px 0px;
	color: #ffffff;
	text-align: center;
	background-position: left top;
	background-attachment: fixed;
}

.hero p {
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 50px;
	text-shadow: 2px 1px 0px #000;
}

.hero h2 {
	font-size: 180%;
	font-weight: normal;
	/*margin-bottom: 40px; 調整 */
	text-shadow: 2px 1px 0px #000;
}

.hero h2 span:first-child {
	font-size: 90%;
	text-shadow: 2px 1px 0px #000;
}

/*#home .hero p span em {
    color: #f00;
}*/

/*オータムキャンペーン　2000行も修正*/

.hero p strong {
	color: #DB7C43;
}

/*　丸右矢アイコン　*/

.material-symbols-outlined {
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 48
}

/* -------------- リード ---- */

#pagelead h2 {
	text-align: center;
	margin: 0em 0em 1em;
	font-weight: normal;
	font-size: 20px;
}

#pagelead p {
	text-align: center;
	margin: 2em 1em;
}

/*#pagelead p a:hover img {
    opacity: 0.8;
}
.onlinebanner p a:hover img {
    opacity: 0.8;
}*/

.newtopic {
	margin-bottom: 30px;
}


.telbtn {
	width: 250px;
	text-align: center;
	margin: 50px auto;
	font-size: 12px
}

.telbtn img {
	width: 100px;
}

.telbtn a {
	color: #333;
}

.telbtn a:hover {
	opacity: 0.8;
}

/* -------------- 目指せ　転職、副業、フリーランス --- */

.purposeArea {
	width: 100%;
	box-sizing: border-box;
	margin: 50px 0px 50px;
	text-align: center;
}

.purposelead {
	font-size: 180%;
	/*32px*/
	font-weight: bold;
	margin-bottom: 20px;
}

.purpose-img {
	max-width: 230px;
}

.purpose-contentArea {
	box-sizing: border-box;
}

.purpose-content {
	text-align: center;
	margin-bottom: 35px;
}

.purpose-content h3 {
	margin-top: 10px;
}




/* -------------- ブルー　ブラック ---- */

.blue-box {
	background-color: #018DEC;
	color: #ffffff;
	padding: 60px 30px;
	text-align: center;
}

.black-box {
	background-color: #2d2d35;
	color: #ffffff;
	padding: 60px 30px;
	text-align: center;
}

.blue-box p,
.black-box p {
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 30px;
}

.bluebox-btn,
.blackbox-btn {
	border: 2px #ffffff solid;
	padding: 8px 2rem;
	border-radius: 30px;
	color: #ffffff !important;
	text-decoration: none;
	transition: 0.4s;
	display: inline-block;
	/*letter-spacingはinlineでは効かないので*/
}

.bluebox-btn:hover {
	background-color: #47A8F0;
}

.blackbox-btn:hover {
	background-color: #4E4E5C;
}

.bluebox-btn::first-letter,
.blackbox-btn::first-letter {
	letter-spacing: .5rem;
}

/* -------------- 受講事例 ---- */

.casearea {
	padding: 0px 30px;
}

.casearea h2 {
	text-align: center;
	margin-bottom: .5em;
	border-bottom: 2px dotted #999;
	font-size: 150%;
}

.col.col-triple {
	text-align: center;
	padding-top: 220px;
	padding-bottom: 40px;
}

#case01.col.col-triple {
	background: url(../image/case01.png)no-repeat center 20px;
}

#case02.col.col-triple {
	background: url(../image/case02.png)no-repeat center 20px;
}

#case03.col.col-triple {
	background: url(../image/case03.png)no-repeat center 20px;
}

.col.col-triple h3 {
	margin-bottom: .5em;
}

#case01.col.col-triple,
#case02.col.col-triple,
#case03.col.col-triple {
	background-size: 180px;
}


#home section.casearea .casemessage {
	text-align: center;
	margin-bottom: 2em;
}

#home section.casearea .casemessage span {
	background-color: #FAFFD3;
}


/* --------------- 試験実施日 ----------*/
#home .grayrow {
	background-color: #ededed;
	width: 100%;
	padding: 50px 0;
	text-align: center;
}

#home .grayrow .graycol {
	max-width: 940px;
	margin: auto;
}

/* -------------- トピックス ---- */

.white-box {
	background-color: #ffffff;
	color: #333333;
	padding: 60px 30px;
	text-align: center;
	overflow: hidden;
}

.white-box dl.home-topics dt {
	width: 100px;
	text-align: left;
	line-height: 2;
	font-weight: bold;
	clear: both;
	display: block;
	border-bottom: 2px dotted #999;
	margin-bottom: .5rem;
}

.white-box dl.home-topics dd {
	width: auto;
	line-height: 2;
	text-align: left;

	padding-top: 0rem;
	padding-bottom: 1rem;
	margin-bottom: 2rem;
}

.white-box dl.home-topics ul {
	margin-left: .5rem;
	list-style: none;
}

.white-box dl.home-topics ul li {
	margin-bottom: 1rem;
	float: left;
	margin-right: 1rem;

}

.white-box dl dd:last-child {
	border: none;
}

/*.btm-line {
    padding-bottom: .5rem;
    background: linear-gradient(transparent 86%, rgba(0, 86, 219, 1.00) 0);
}*/

.white-box h2 {
	margin-bottom: .5em;
	/*border-bottom: 1px solid #0056db;*/
	font-size: 150%;
	font-weight: bold;
}

.white-box img {
	width: auto;
	max-width: auto;
	height: 1px;
}

/*
section img {
	width:auto;
	max-width: auto;
}
*/
.col.col-lg {
	padding: 60px 30px;
	text-align: center;
	box-sizing: border-box;
}

.col.col-lg h2 {
	margin-bottom: 1em;
}

.col.col-lg .white-box {
	padding: 0;
}


.gray-box {
	background-color: #f3f3f3;
}

#home #pagelead.col.col-lg {
	padding: 40px 10px 0px;
	box-sizing: border-box;
}

#home .paylogo {
	height: 40px;
	margin-left: 1em;
}

#home .campaign20img {
	width: 100%;
	max-width: 340px;
	margin: 10px auto 40px;
	text-align: center;
}

/*.campaign20img a:hover img {
    opacity: 0.8;
}*/

.campaign {
	margin: 40px auto;
	width: 100%;
	/*max-width: 330px;*/
	text-align: center;
}

.campaign_fleximg {
	width: 300px;
	margin: 0 auto 1em;
}



#home .plantable {
	text-align: center;
	margin-left: 0;
	margin-right: auto;
}



/* -------------------- online banner */

.online-ba {
	margin-bottom: 80px;
}

.col.col-lg.onlinebanner {
	padding: 60px 10px 20px;
}

.col.col-lg.onlinebanner p {
	margin: 1em;
}

.onlinebanner picture source {
	width: 100%;
}

/* webp画像 */

/* ---------------------------- 教室概要 ------- */

#summary .row.mainimage,
#apply .row.mainimage {
	background-color: #D4CD97;
	padding: 1px 0;
}

#summary .col.gray,
#apply .col.gray {
	background-color: #ededed;
}

#summary .hero,
#apply .hero {
	background-image: url(../image/hero_bg_summary.png);
	background-position: left bottom;
	background-size: auto 150px;
}

#summary .hero h2 {
	color: #0036A6;
	text-shadow: 2px 1px 0px #fff;
}

#summary h1 span,
#apply h1 span {
	font-size: 36px;
}

#summary .content-box,
#summary .content-boxw,
#apply .content-box,
#apply .content-boxw {
	padding: 60px 30px;
	background-color: #fff;
	color: #333;
	text-align: left;
}

#summary .content-box,
#apply .content-box {
	background-color: inherit;
}


#summary .content-box h2,
#summary .content-boxw h2,
#apply .content-box h2,
#apply .content-boxw h2 {
	font-weight: normal;
	font-size: 180%;
	color: #0036A6;
	margin-bottom: 1em;
}

#summary .content-box p,
#summary .content-boxw p,
#apply .content-box p,
#apply .content-boxw p {
	line-height: 1.6;
	margin-bottom: 30px;
}

.bgEmphasis {
	background-color: #FAFFD3;
}

.bgEmphasis-o {
	background: linear-gradient(transparent 50%, #FFE2AD 30%);
}

.timetable {
	margin: 10px auto 40px;
	width: 298px;
	border: 1px solid #999;
	font-size: 87.5%;
}

.timetable tr:nth-child(1) {
	background: #cfe5ff;
}

.timetable th,
.timetable td {
	padding: 2px;
	border: 1px solid #999;
}

.timetable th {
	width: auto;
}

.timetable th.w50 {
	width: 50px;
}

.timetable th,
.timetable td {
	text-align: center;
}

.profiledata {
	margin: 10px auto 40px;
	width: 100%;
	border: 1px solid #999;
	font-size: 90%;
}

.profiledata caption {
	font-size: 200%;
	color: #0036A6;
	text-align: left;
	margin-bottom: 1em;
}

.profiledata th {
	width: 70px;
	background-color: #E3E3E3;
	padding: 6px;
	border: 1px solid #999;
}

.profiledata td {
	padding: 6px;
	border: 1px solid #999;
	background-color: #fff;
}

/* ------------------- 新料金表 */
.lessonmenu li.scroll-table {
	overflow-x: auto;
}

.plannewprice {
	border: 2px solid #0036a6;
}

.plannewprice thead th {
	background-color: #BCDCFF;
}

.newprice-data23 {
	margin: 10px 0 10px;
	border: 1px solid #999;
	font-size: 78%;
	/*15*/
	width: 600px;

}

.newprice-data23 caption {
	text-align: left;
	margin-bottom: .5em;
}

.newprice-data23 thead th {
	background-color: #E3E3E3;
	padding: 6px;
	border: 1px solid #999;
	text-align: center;
}

.newprice-data23 th {
	width: auto;
	background-color: #fff;
	padding: 6px;
	border: 1px solid #999;
}

.newprice-data23 td {
	padding: 6px;
	border: 1px solid #999;
	background-color: #fff;
	text-align: right;
}



.map iframe {
	border: 4px solid #fff;
	margin-bottom: 10px;
	width: 100%;
	height: 250px;
}

/*#summary main img,
#apply main img {
	width: auto;
	max-width: auto;
}*/
#summary p a img.iconpdf {
	width: 30px;
	height: 24px;
}

#summary aside .content-box,
#apply aside .content-box {
	padding-top: 0px;
	padding-bottom: 0px;
}

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

.slink li {
	padding: .5rem 1em;
	list-style: none;
}

/*#summary #sum3 p a:hover img {
    opacity: 0.8;
}*/

#summary .kyousitu {
	max-width: 700px;
	margin: auto;
	text-align: center;
	font-size: 0.857rem;
	border: 1px solid #ccc;
	padding: 5px;
}

#summary .kyousitu img {
	width: 100%;
	max-width: 700px;
}

.flex-img {
	width: 100% !important;
	margin: auto;
}

.school-hikaku {
	width: fit-content;
	margin: 0 auto 1.5rem;
}

.school-hikaku-tb {
	max-width: 550px;
}

.school-hikaku figcaption {
	text-align: center;
	font-weight: bold;
	margin-bottom: -0.5rem;
}

/* ------------------ コラム　独学の学習ステップ */
#summary .hero.columnbg {
	background-image: url("../image/hero_bg_studystep.jpg");
	background-size: auto 230px;
	background-position: right center;
}

.col-studytable {
	margin: 20px auto;
	width: 100%;
	border: 1px solid #999;
	font-size: 93.75%;
	/* 15px */
}

.content-box>.col-studytable {
	margin-bottom: 3rem;
}

.col-studytable+.col-studytable {
	margin-bottom: .5rem;
}

.col-studytable caption {
	margin-bottom: 10px;
}

.col-studytable th {
	font-weight: normal;
	text-align: center;
	background-color: #DEE4E8;
}

.col-studytable th,
.col-studytable td {
	padding: 10px 6px;
	border: 1px solid #999;
	display: block;
	width: 100%;
}

.col-studytable p {
	margin-bottom: 8px !important;
}

.col-studytable li {
	list-style: none;
}

.supli-note {
	font-size: 12px;
	margin: .5rem 1rem 3rem;
}

.supli-note p {
	margin-bottom: .5rem !important;
}

.checklistbox li {
	list-style-type: none;
	background-image: url(../image/arrow_check.png);
	background-repeat: no-repeat;
	padding-left: 25px;
	margin-bottom: .5em;
}

.studylead .float-left {
	display: block;
	margin: 0 auto 1rem;
	max-width: 400px;
}

.studylead figure {
	border: 1px solid #c0c0c0;
	display: flex;
	flex-flow: column;
	padding: 5px;
	margin: 0 auto 1rem;
	max-width: 400px;
}

.studylead figcaption {
	background-color: #222;
	color: #fff;
	padding: 3px;
	font-size: 14px;
	text-align: center;
}





/* -------------------------------------- 受講事例紹介 ---- */

#summary .content-box.casepadding {
	padding-top: 0px;
	overflow: hidden;
}

.case01photo {
	background: url(../image/case01square.jpg)no-repeat center top;
}

.case02photo {
	background: url(../image/case02square.jpg)no-repeat center top;
}

.case03photo {
	background: url(../image/case03square.jpg)no-repeat center top;
}

.case04photo {
	background: url(../image/case05square.jpg)no-repeat center top;
}

.case01photo,
.case02photo,
.case03photo,
.case04photo {
	width: 100%;
	height: 270px;
	background-size: 260px;
}


h3.jireiM {
	text-align: center;
	margin-left: -10px;
	margin-right: -10px;
	margin-top: 60px;
	margin-bottom: .5em;
	padding-top: 6px;
	padding-bottom: 6px;
	border: 2px solid #0d62a1;
	color: #0d62a1;
	font-weight: normal;
}

h3.jireiM:first-child {
	margin-top: 0px;
}

.jireiJ {
	clear: both;
	overflow: hidden;
	font-size: 93.7%;
	line-height: 1.6;
}

.jireiJ h4 {
	background-color: #5BB1F1;
	color: #fff;
	padding: 6px;
	margin-bottom: 10px;
	text-align: center;
	font-weight: normal;
	font-size: 112.5%;
}

dl.jireiJleft {
	width: 100%;
	overflow: hidden;
}

.jireiJ dl dt {
	width: 23%;
	margin-right: 5%;
	float: left;
	font-weight: bold;
}

.jireiJ dl dd {
	width: 70%;
	float: left;
}

.jireiJ dl dt.smalltext {
	font-size: 87.5%
}

dl.jireiJright {
	width: 100%;
	overflow: hidden;
	margin-top: 10px;
}

/*.jireiJright dt {
	width: 15% !important;
	text-align: right;
	margin-right: 5%;

}
.jireiJright dd {
	width: 77% !important;
}*/
.jireiJ p {
	text-align: center;
}

.jireiJright p img {
	width: 250px;
}

.jirei p a.look {
	margin-bottom: 10px;
}



/* ------------------------------- お申し込みについて */

#apply .content-box em {
	background-color: #FAFFD3;
}

dl.step:first-child {
	margin-top: -50px;
}

dl.step dt#step0 em {
	background-color: #0036a6;
	color: #fff;
	padding: 4px 20px 2px;
	border-radius: 16px;
	margin-bottom: 1em;
	margin-left: -10px;
}

dl.step dt {
	color: #0036a6;
	padding: 4px;
	margin-bottom: 1em;
	margin-left: -10px;
}

dl.step dd {
	margin-bottom: 2em;
}

dl.step dd ul {
	margin-top: .5em;
	margin-left: 20px;
}

dl.step dd ul li {
	margin-bottom: .5em;
}

dl.step dd ul li ul li {
	font-weight: bold;
}

#apply .content-box.applyArea {
	padding-top: 0;
}

h3.beforeApply {
	clear: both;
	background-color: #FBDDDE;
	color: #333;
	padding: 4px 16px 2px;
	border-top: 2px dotted #f08384;
	border-bottom: 2px dotted #f08384;
	margin-bottom: 3rem;
}

dl.step dt i {
	background-color: #47a8f0;
	color: #fff;
	padding: 28px 16px;
	display: inline-block;
	border-radius: 40px;
	margin-left: -20px;
}

.stepPhoto01 {
	background: url(../image/business01.jpg) left center;
}

.stepPhoto02 {
	background: url(../image/business02.jpg) left center;
}

.stepPhoto03 {
	background: url(../image/business03.jpg) left center;
}

.stepPhoto04 {
	background: url(../image/business04.jpg) left bottom;
}

.stepPhoto01,
.stepPhoto02,
.stepPhoto03,
.stepPhoto04 {
	width: 100%;
	height: 150px;
	background-size: cover;
	margin-bottom: 30px;
}

/* ---------------------------- レッスン ------- */

#lesson .row.mainimage {
	background-color: #87BA9B;
	padding: 1px 0;
}

#lesson .hero {
	width: auto;
	background-image: url(../image/hero_bg_lesson.png);
	background-position: right bottom;
	background-size: auto 215px;
}

#lesson .hero.columnbg {
	background-image: url(../image/hero_bg_column.jpg);
}

/* オータムキャンペーン　*/
#lesson .hero.autumn {
	background-image: url("../image/hero_bg_autumn2024.jpg");
	background-position: right bottom;
	background-size: cover;
	background-attachment: inherit;
}

#lesson .hero.winter {
	background-image: url("../image/hero_bg_lesson2.png");
	background-position: right top;
}

#lesson .hero.autumn h2 {
	word-break: keep-all;
}

/* オータムキャンペーン　ここまで　*/

#lesson .hero h2 {
	color: #0036A6;
	text-shadow: 2px 1px 0px #fff;
}

#lesson h1 span {
	font-size: 36px;
}

#lesson .content-box,
#lesson .content-boxw {
	padding: 30px 15px;
	background-color: #ebebeb;
	color: #333;
	text-align: left;
}

#lesson .content-box {
	background-color: #ebebeb;
}

#lesson .content-boxw {
	background-color: #fff;
}

#lesson .content-box h2,
#lesson .content-boxw h2 {
	font-weight: normal;
	font-size: 180%;
	color: #0036A6;
	margin-top: 1em;
	margin-bottom: 1em;
}

.mds2 {
	font-weight: normal;
	font-size: 1.5rem !important;
	color: #0036A6;
}

.mds3 {
	background-color: #0036a6;
	color: #fff;
	padding: .5rem 1rem;
	border-radius: 10px;
	margin-bottom: 1em;
	width: -moz-fit-content;
	width: fit-content;
	/*IE11は適用にならない*/
}


.bg-lineAll {
	background: linear-gradient(transparent 94%, rgba(108, 161, 243, 0.4) 0);
}

#lesson .content-box .lessonweb1 {
	display: block;
	width: 200px;
	margin: 10px auto;
}

.footnote {
	list-style: none;
}

#lesson .content-box p,
#lesson .content-boxw p {
	line-height: 1.6;
	font-weight: normal;
	margin-bottom: 30px;
}

#lesson .content-box ul,
#lesson .content-boxw ul {
	margin-top: 1em;
	line-height: 1.6;
}

#lesson .content-box ul.contentlist,
#lesson .content-boxw ul.contentlist {
	margin-left: -20px;
}

#lesson .content-box>ul,
#lesson .content-boxw>ul {
	margin-bottom: 30px;
}


#lesson .content-boxw ul li i,
#lesson .content-boxw p i {
	color: #FF0000;
}

#lesson .content-box h3,
#lesson .content-boxw h3 {
	margin-top: 2em;
	margin-bottom: 2em;
	font-size: 1.25rem;

}

.plantable {
	margin: 10px auto 40px;
	width: 100%;
	border: 1px solid #999;
}

.totaltime {
	margin-left: 1em;
	font-weight: bold;
	font-size: 140%;
}

.plantable caption {
	margin-bottom: 10px;
}

.plantable th {
	width: 8em;
	font-weight: normal;
	text-align: center;
	background-color: #CBE7F9
}

.plantable th,
.plantable td {
	padding: 6px;
	border: 1px solid #999;
	font-size: 93.75%;
	/* 15px */
}

.plantable .kikanmeyasu {
	margin: 10px 0 0px;
}

.plantable .kikanmeyasu ul li {
	margin-left: 2em;
}

.plantable .kikanmeyasu ul {
	margin-top: 0px !important;
	margin-bottom: 4px !important;
}

.plantable p {
	margin-bottom: 8px !important;
}

.listDisc {
	margin-left: 1.5em;
}

#lesson .plantable p.txBold {
	font-weight: bold;
}

/*#lesson main img {
	width: auto;
	max-width: auto;
}*/

#lesson .content-boxw .imgWP {
	max-width: 880px;
}

/*#lesson section .content-boxw p a:hover img {
    opacity: 0.7;
}*/

#lesson .content-box ul.contentlist li,
#lesson .content-boxw ul.contentlist li {
	margin-left: 40px;
	margin-bottom: .5em;
}

.fig__wrap {
	margin: 1em auto 3em;
}

figcaption {
	padding: .5em 1em;
	font-size: 0.9rem;
}

#lesson .content-box .webprocess {
	width: 250px;
	margin: 30px auto;
}

.lesson-iconall {
	width: 100%;
	max-width: 580px;
	margin-top: -2rem;
	vertical-align: bottom;
}

.footnote {
	font-size: 0.8rem;
	color: #D41518;
}

#home .lesson-iconall {
	max-width: 770px;
	margin-top: -1rem;
}

/* リンクボタン */
ul.app_btn li {
	list-style: none;
}

ul.app_btn li a {
	display: block;
	width: 12em;
	text-align: center;
	padding: 10px;
	border: 2px solid #0036a6;
	border-radius: 6px;
	text-decoration: none;
	color: #0036a6;
	margin: auto;
}

ul.app_btn li a:hover {
	background-color: #CFE5FF;
}

/* リンクボタン */
ul.qa_btn li {
	list-style: none;
}

ul.qa_btn li a {
	display: block;
	width: 12em;
	padding: 10px;
	border: 2px solid #0036a6;
	border-radius: 6px;
	text-decoration: none;
	color: #0036a6;
	margin: 2em auto;
	transition: 0.4s;
}

ul.qa_btn li a:hover {
	background-color: #CFE5FF;
}

a.look {
	border: solid 1px #018DEC;
	padding: 1px 5px;
	display: inline-block;
	border-radius: 4px;
	transition: 0.4s;
	text-decoration: none;
	color: #018DEC;
}

a.look:hover {
	background-color: #018DEC;
	/*#4BB7FE*/
	color: #fff;
}

a.lookp2 {
	padding: 5px 50px;
	margin-bottom: 1em;
}

a.lookBlue {
	background-color: #1AA4FD;
	color: #fff;
}

a.lookBlue:hover {
	background-color: transparent;
	color: #1AA4FD;
	font-weight: bold;
}

a.look.lookRed {
	border: 1px solid #dc56a8;
	color: #dc56a8;
}

a.look.lookRed:hover {
	background-color: #dc56a8;
	color: #fff;
}


/* summary lesson 共通 bottom menu */
ul.lessonmenu {
	width: 100%;
	margin-left: 0 !important;

}

ul.lessonmenu li {
	/*font-weight: bold;*/
	font-size: 120%;
	list-style: none;
	background-color: #fff;
	padding: 6px 0 6px 2em;
	margin-bottom: 10px;
	background: url(../image/icon_midasi.png) no-repeat left 4px;
	background-size: 30px;
}

#summary ul.lessonmenu li {
	background: url(../image/icon_midasi2.png) no-repeat left 4px;
	background-size: 30px;
}

#summary ul.lessonmenu li.qamenu,
#lesson ul.lessonmenu li.qamenu {
	background: url(../image/icon_question.png) no-repeat left 4px;
	background-size: 30px;
}

ul.lessonmenu li ul {
	margin-top: 6px;
	/*margin-bottom: 0 !important;*/
}

ul.lessonmenu li li {
	display: inline-block;
	font-size: 83.3%;
	font-weight: normal;
	border: 2px solid #0036a6;
	margin-bottom: 10px;
	padding: 0;
	background: none;
}

#summary ul.lessonmenu li li {
	background: none;
}

ul.lessonmenu li li a {
	width: auto;
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	color: #0036a6;
	transition: 0.4s;
}

ul.lessonmenu li li a:hover {
	background-color: #CFE5FF;
}

ul.lessonmenu li li a.current {
	background-color: #CFE5FF;
}

ul.lessonmenu li li.splan_hcd {
	font-size: 87.5%;
}

h2.bottommenu {
	font-size: 120% !important;
	border-bottom: 1px dotted #0036a6;
}

.book .fl {
	float: none;
	margin-bottom: 0.2rem !important;
}

.amsbook {
	display: flex;
	/*justify-content: space-around;*/
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.amsbookLeft {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: 20px;
	margin-bottom: 30px;
	margin-left: 20px;
}

.amsbook .col-triple {
	width: 100%;
	text-align: center;
	font-size: 87.5%;
}

.amsbook_img {
	width: 150px;
	border: 1px solid #ccc;
}

.amsbook .btn_amazon {
	width: 164px;
}

.amsbook_listbox {

	margin-bottom: 20px;
	text-align: center;
	font-size: 0.875em;
	/*14px*/
}

.amsbook_listbox:last-child {
	margin-right: 10px;
}

.plantable .mtop30 {
	margin-top: 30px;
}

.sikakumei {
	margin: 0 0 50px;
	line-height: 2;
}

.sikakumei dt {
	width: 6em;
	font-weight: bold;
}

.sikakumei dd {
	margin-left: 0em;
	margin-top: 0em;
}


/* Photoshopプラン */

.anivbanner.img-fruit {
	max-width: 220px;
}

.category-list {
	margin: 2rem 0 0;
	text-align: center;
}

.category-list span {
	border-bottom: 6px solid #F72E86;
}

.works-list {
	display: flex;
	flex-wrap: wrap;
	margin: 20px auto 40px;
	justify-content: center;
	padding: 1rem;
}

.works-item.col1 {
	flex-basis: 100%;
	/*flex-grow: 1;*/
}

.works-item.col2 {
	flex-basis: 100%;
	/*flex-grow: 2;*/
}

.works-item.col3 {
	flex-basis: 100%;
	/*flex-grow: 1.5;*/
}

.works-item.ml5 {
	margin-right: 5px;
}

.works-item {
	flex: 0 0 65%;
	margin-bottom: 30px;
	color: #333;
}

.works-name {
	font-size: 12px;
	font-weight: bold;
	margin-top: 8px;
}

.works-info {
	font-size: 10px;
	margin-top: 5px;
}

.works-img img {
	width: auto;
	max-width: 100%;
}

a.nolink:hover img { opacity:1;}



/* ウェブコンサル */

ul.planList.consul {
	margin: 20px 40px;
}

/*ul.planList.consul li {
	list-style-type: none;
	background-image: url(../image/arrow_check.png);
	background-repeat: no-repeat;
	padding-left: 25px;
	margin-bottom: .5em;
}*/

/* 一緒に作ろう */

.banner300 {
	text-align: center;
	margin: 30px auto 50px;
}

.banner300 img {
	max-width: 300px;
}

/* ---------------------------- よくある質問 ------- */

#qa .hero {
	background-image: url(../image/hero_bg_qa.jpg);
}

#qa h1 span {
	font-size: 36px;
}

#qa .hero h2 {
	color: #fff;
	text-shadow: 2px 1px 0px #333;
}

#qa .content-box,
#qa .content-boxw {
	padding: 60px 30px;
	background-color: #fff;
	color: #333;
	text-align: left;
}

#qa .content-box {
	background-color: inherit;
}

#qa aside .content-box {
	padding-top: 0px;
	padding-bottom: 0px;
}

#qa .content-box {
	/*width: 100%;*/
	margin: auto;
}

.qaSection {
	margin-bottom: 20px;
}

.qaSection h2 {
	font-size: 150%;
	font-weight: normal;
	border-bottom: 2px dotted #333;
	margin-bottom: 5px;
}

.qaSection p {
	margin-bottom: 1em;
}

.qaSection h3 {
	margin-bottom: 1em;
	font-weight: normal;
	font-size: 87.5%;
	background-color: #069400;
	padding: 4px;
	color: #fff;
	border-radius: 14px;
	text-align: center;
}

.btn_sikaku {
	display: inline-block;
	padding: .5em 2em;
	margin-top: 1em;
	margin-bottom: 1em;
	border: 2px solid #0036a6;
	border-radius: 10px;
}

.btn_sikaku:hover {
	background-color: #CFE5FF;
}

/* アコーディオンは details summary　で実行 */

.qaSection details summary {
	line-height: 1.6;
	list-style: none;
	border-top: 2px dotted #ACC5F7;
	padding: 6px;
	text-indent: -4em;
	margin-left: 2em;
	margin-bottom: 1em;
	cursor: pointer;
	color: transparent;
	outline: none;
}

.qaSection details summary#q1,
.qaSection details summary#q21,
.qaSection details summary#q41 {
	border-top: none;
}

.qaSection details summary i {
	font-weight: bold;
	font-size: 150%;
	color: #069400;
	padding-right: .2em;
}

.qaSection details summary span {
	color: #333;
}

.qaSection details p {
	line-height: 1.6;
	padding: 10px;
	margin-bottom: 2em;
	background-color: #eee;
}

.qaSection details strong,
.qaSection details em {
	color: #aa1013;
	font-style: normal;
}

.paylogo {
	width: 100%;
	max-width: 200px;
}


/* -------------------------------------------
	contact form
 -------------------------------------------- */

#contact .hero {
	background-image: url(../image/hero_bg_formmail.jpg);
	background-position: 670px top;
}

#contact .col.col-lg {
	padding-left: 20px;
	padding-right: 20px;
}

#contact #pagelead p {
	margin-left: 0;
	margin-right: 0;
}

.telcall {
	line-height: 1.6;
}

.telcall a {
	color: #FFF;
	background: #F60;
	display: block;
	padding: 1em 2em;
	width: fit-content;
	text-align: center;
	margin: 2em auto 0;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.telcall a:hover {
	color: #FFF;
	background: #F90;
}

.telcall a em {
	font-size: 140%;
	font-weight: bold;
}

form {
	margin: 20px;
}

select,
input[type="submit"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	/*iPnoneのリセット*/
}

select {
	/*三角マークが消えるのを復活させる*/
	-moz-appearance: menulist;
	-webkit-appearance: menulist;
	appearance: menulist;
}

label {
	border-left: 5px solid #0052fd;
	padding-left: 5px;
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.lbNone {
	border: none;
	padding: 0px;
	margin-top: 0.5em;
	margin-right: 1em;
}

.attention {
	font-size: 90%;
	background-color: #f3f3f3;
	color: #888;
	padding: 1em;
}

form p {
	margin-bottom: 1em;
}

form ul li {
	list-style: none;
}

label {
	display: block;
}

label em {
	font-size: 87.5%;
	font-style: normal;
	color: #F08384;
}

label i {
	font-size: 75%;
	background-color: #f00;
	padding: 2px 4px;
	color: #fff;
	margin: 0 .5em;
	border-radius: 10px;
}

#name,
#email,
#planname,
#comment,
#adrs,
#selectradio {
	width: 100%;
	padding: 8px 4px;
}

#name:focus,
#email:focus,
#planname:focus,
#comment:focus,
#adrs:focus,
#selectradio:focus {
	background-color: #FBEACB;
}

.submitBtn {
	text-align: center;
}

input[type="submit"] {
	width: 200px;
	margin: 20px 0;
	padding: 1em 0;
	cursor: pointer;
	font-size: 1em;
}

.formTable--backbtn {
	padding: 1em;
}

/*前画面に戻る*/

#contact table.formTable {
	border: 1px solid #999;
	line-height: 2;
	margin: auto;
}

#contact table.formTable th {
	width: 12em;
	font-weight: bold;
	border: 1px solid #999;
	padding: 8px;
}

#contact table.formTable td {
	border: 1px solid #999;
	padding: 8px;
	width: 30em;
}

#contact main img {
	width: auto;
	max-width: auto;
}

#privacy {
	width: 100%;
	height: 200px;
	overflow: auto;
	background-color: #FFFFFF;
	padding: 10px;
	margin: 0px auto;
	border: 1px solid #ccc;
}

#privacy h2 {
	font-size: 120%;
	color: #64090B;
	text-align: left;
	border-bottom: 2px solid #64090B;
	margin-bottom: 1em;
}

#privacy h3 {
	margin-top: 1em;
	margin-bottom: .5em;
	color: #64090B;
}

#privacy ul {
	margin: 1em;
}

#privacy ul li {
	list-style: disc;
	margin-left: 1em;
}

/* ------------------ キャンペーン campaign用 ----- */

#lesson dl.campaign_detail dt {
	font-size: 180%;
	margin-bottom: 0.5em;
}

#lesson dl.campaign_detail dd {
	margin-bottom: 2em;
}

#lesson .content-boxw h2.campaign-title {
	font-size: 2.4rem;
}

.campaign_annotation {
	list-style: none;
	margin-left: 2rem;
}

.campaign-title {
	margin-top: 0 !important;
}

.campaign-list {
	background: url(../image/spring-campaign-fl.png) no-repeat;
	padding-left: 55px;
	background-size: 50px;
	line-height: 50px !important;
}

.anivbanner {
	width: 100%;
	max-width: 340px;
	display: block;
	margin: 0 auto 20px;
}

.campaign_detail .campaigntable {
	margin: auto;
}

.campaign_detail .campaigntable th,
.campaign_detail .campaigntable td {
	display: block;
}

.campaign_detail .campaigntable th,
.campaign_detail .campaigntable td {
	border: 1px solid #999;
	padding: .5rem;
	font-weight: normal;
}

.campaign_detail .campaigntable th {
	background-color: #BDE0CD
}


.autumn-banner {
	width: 100%;
	max-width: 330px;
	margin: auto;
}

.autumn-can {
	color: #FF6000;
	text-align: center;
}

/* ------------------ オンライン講習 ----- */

#lesson .row.mainimage.onlineb {
	background-color: #8DCEFD;
	padding: 1px 0;
}

#lesson .hero.onlinebg {
	width: auto;
	background-image: url(../image/hero_bg_online-small.png);
	background-position: top 50px left 940px;
	background-size: auto 300px;
}

#lesson .hero.onlinebg h2 {
	text-align: left;
	margin-left: 1rem;
	margin-right: 1rem;
}

#lesson .hero.onlinebg h2 span {
	color: #0036A6;
	text-shadow: 2px 1px 0px #fff;
	padding: 0 0.5rem;
	background-color: rgba(255, 255, 255, 0.5);
}

.online h3 {
	margin-top: 3rem;
	margin-left: -1rem;
	border-bottom: 2px solid #2c9bed;
}

.hosokuComment {
	border: 2px solid #cfe5ff;
	background: #F1F1F1;
	width: 100%;
	max-width: 550px;
	padding: 2rem;
	margin: 1rem auto;
	overflow: hidden;
}

.hosokuComment .look {
	margin: 1rem auto;
	padding: 0.5rem 1rem;
	background-color: #fff;
}

.imgmonitor {
	max-width: 100%;
}

.onlinekyouyu {
	width: 100%;
	max-width: 500px;
	margin-bottom: 20px
}

.testerBosyu {
	margin-top: 20px;
	padding: 1rem 1rem 2rem;
	border: 2px dotted #AA1013;
}

.testerBosyu h3 {
	margin-top: 0;
	text-align: center;
	margin: -1rem -1rem 0;
}

.midasired {
	background: #AA1013;
	color: #fff;
	padding: 1rem;
	border: none !important;
}

.online dl dt {
	font-weight: bold;
}

.online dl dd {
	margin-bottom: 1rem;
}

.onlineplan li {
	margin-bottom: 1rem;
}


#testerform {
	margin-top: 100px;
	border-bottom: 4px solid #0052fd;
	border-top: 4px solid #0052fd;
	padding: 1rem .5rem;

}

#testerform {
	margin-left: -1rem;
	margin-right: -1rem;
}

.left-mergin {
	margin-left: -1rem;
}

.onlineaddflow {
	text-align: center;
}

.hosokuComment h3 {
	text-align: center;
	border: none;
	margin-top: 0;
	margin-bottom: 1rem;
}

/*#lesson .hosokuComment.txCenter {
    padding-left: 2rem;
    padding-right: 2rem;
}
#lesson .hosokuComment.txCenter p {
    margin-bottom: 0;
    line-height: 1.4;
}*/

.timeline-area {
	border: 2px solid #cfe5ff;
	background: #F1F1F1;
	width: 100%;
	max-width: 590px;
	padding: 0 80px 80px;
	margin: 1rem auto 5rem;
	text-align: left;
}

.timeline-item {
	list-style: none;
	margin-left: -1rem;
	border-left: 2px solid #2c9bed;
	padding-left: 1.5rem;
	position: relative;
}

#lesson .timeline-item p {
	margin-bottom: 0;
	padding-bottom: 1rem;
}

.timeline-item p::before {
	position: absolute;
	content: '';
	border: 4px solid #2c9bed;
	background-color: #fff;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	top: 10px;
	left: -10px;
	transform: translateY(-50%);
}

.timeline-area h3 {
	border: none;
}


/* -------------- コロナ対策 */


#summary .photo-room {
	max-width: 100%;
	border: 2px solid #ddd;
	box-sizing: border-box;
	display: block;
	margin-bottom: 20px;
}

.setubi {
	margin-left: 2em;

}

.kousi ul,
.jyukousei ul {
	margin-left: 2em;
	margin-bottom: 2em;
}

blockquote .bgEmphasis {
	margin: 2rem;
	padding: 1.5rem 3rem;
	background: #ededed;
	position: relative;
}

blockquote .bgEmphasis::before {
	content: ' ” ';
	font-size: 300%;
	color: #999999;
	position: absolute;
	top: .5rem;
	left: 1rem;
}

blockquote .bgEmphasis::after {
	content: ' ” ';
	font-size: 300%;
	color: #999999;
	position: absolute;
	right: 1.5rem;
}

/* -------------- 資格取得 */

.qualmain {
	width: 100%;
	/*880px*/
}

.qualContent {
	padding: 20px;
}

.qualContent h2 {
	/*border-top: 2px solid #339900;*/
	border-bottom: 4px solid #003C99;
	padding: 10px 5px;
	background: #AEC9E6;
	margin: 10px 0px;
	height: auto;
	text-align: center;
	font-weight: normal;
}

.qualContent h3 {
	display: inline-block;
	padding: 10px;
	margin: 20px 0px;
	border: 1px solid #666;
	background-color: #eee;
	border-radius: 5px;
	/*margin-top: 50px;*/
	font-size: 1rem;
	font-weight: normal;
}

.qualContent h3:nth-child(2) {
	margin-top: 1rem;
}

.qualContent ul li {
	margin-left: 2rem;
	margin-right: 2rem;
	margin-bottom: 0.5rem;
}

.qualContent em {
	font-style: normal;
	font-weight: bold;
}

.qualContent table {
	margin: 20px auto;
	font-size: 90%;
	border-collapse: collapse;
	width: auto;
}

.qualContent table th {
	text-align: center;
	font-weight: bold;
	padding: 3px;
	background-color: #EED9CA;
	border: 1px solid #999;
	width: auto !important;
}

.qualContent table td {
	padding: 3px;
	border: 1px solid #999;
}

.qualContent table.jyukenryou {
	text-align: center;
	min-width: 300px;
}

.qual-lcomment {
	margin: 3rem 1rem;
}

.qualContent details summary {
	cursor: pointer;
	outline: none;
}

.overscroll {
	overflow: auto;
	white-space: nowrap;
}

.sikenbi {
	margin: 0 auto 5px;
}

.sikenbi,
.sikenbi th,
.sikenbi td {
	border: 1px solid #666;
}

.sikenbi th,
.sikenbi td {
	padding: .2rem 1rem;
	text-align: center;
}

.sikenbi th {
	background: #A7E99C;
}

.sikenbi td {
	font-size: 0.875rem;
}

.sikenbi .mitei {
	text-align: center;
}

/* -------------- サイト紹介リンク */

.linkarea h3 {
	border-bottom: 4px solid #D41518;
}

.linkarea ul.linklist {
	list-style: none;
	margin-left: 0 !important;
}

.linkarea ul.linklist li {
	margin-bottom: 2rem;
}

.linkarea ul.linklist li img {
	max-width: 300px;
}

.linkarea ul.linklist li dt {
	font-weight: bold;
}

.linkarea ul.linklist a:hover {
	opacity: 0.7;
}

/* -------------- コラム　独学の学習step */

.studylead h3 {
	margin-top: 5rem;
	margin-bottom: 2rem;
	color: #0036A6;
	font-size: 1.5rem;
	font-weight: normal;
	/*border-bottom: 1px solid #6CA1F3;*/

}

.bg-line {
	background: linear-gradient(transparent 92%, rgba(0, 86, 219, 1.00) 0);
}

.list-dlul {
	margin-bottom: 2rem;
}

.list-dlul dd li a span {
	vertical-align: bottom;
	padding-left: .5rem
}

.list-dlul dt {
	background-color: #0036a6;
	color: #fff;
	padding: .5rem 1rem;
	border-radius: 10px;
	margin-bottom: 1em;
	width: -moz-fit-content;
	width: fit-content;
	/*IE11は適用にならない*/
}

.list-dlul dd ul {
	margin-left: 2rem;
}

.list-dlul ul p {
	margin-bottom: 1rem !important;
}

.list-btn li {
	list-style: none;
	display: inline-block;
	border: 1px solid #0036a6;
	margin-bottom: .5rem;
}

.list-btn li a {
	display: inline-block;
	padding: 1rem;
	color: #0036a6;
	transition: 0.4s;
}

.list-btn li a:hover {
	background-color: #CFE5FF;
}

.douga-2col {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}

.douga-2col li {
	width: 100%;
	aspect-ratio: 16/9;
}

.douga-2col li:first-child {
	margin-bottom: 1rem;
}

.douga-2col li iframe {
	width: 100%;
	height: 100%;
}

.nextP {
	text-align: right;
}

.onlinesite-list {
	display: flex;
	flex-wrap: wrap;
	margin-left: 0 !important;
}

.onlinesite-list li {
	list-style: none;
	margin-right: 20px;
	margin-top: 20px;
}

.onlinesite-list li a {
	display: inline-block;
	padding: 5px 10px;
}

/* -------------- 講師　トレーナープロフィール */


.prof-container {
	display: flex;
	flex-direction: column;
}

.prof-message {
	width: 100%;
}

.prof-img {
	box-sizing: border-box;
	width: 100%;
	max-width: 300px;
	margin: 1rem auto 2rem;
}


.prof-data dt {
	font-weight: bold;
}

.prof-data dd {
	margin-bottom: 1rem;
}

.prof-data dd ul {
	margin-top: .5rem;
	margin-left: 2rem;
}

.prof-message p {
	/*font-size: 0.9rem;*/
	margin-bottom: 1rem !important;
}

.badge-layaut {
	overflow: hidden;
	margin-bottom: 2rem;
}

.floatleft {
	width: 5rem;
	height: 6rem;
	float: left;
	margin-right: 1rem;
}

.acc-badge {
	max-width: 100%;
	margin-top: .5rem;
}

.clear {
	clear: both;
}

.freelance-img {
	display: block;
	max-width: 280px;
	margin: 0 auto 1rem;
}

.trainer-img {
	max-width: 300px;
	display: block;
	margin: 0 auto;
}

/* -------------- 価格変更のお知らせ */

.hosoku {
	margin-left: 2rem;
	margin-top: 2rem;
}

/* -------------------- free plan ------------- */

.timeline-area.free-tt {
	max-width: 100%;
	padding: 0 20px 80px 40px;
}

.free-ttimg {
	list-style: none;
}

.free-ttimg img {
	border: 1px solid #00A69A;
	margin-bottom: 10px;
}

/*------------------- exam　資格取得 ------------*/

.exam-list {
	margin-bottom: 100px !important;
}

.exam-list li {
	list-style: none;
	border: 2px solid #0036a6;
	border-radius: 6px;
	margin-bottom: 10px;
	text-align: center;
}

.exam-list li a {
	display: inline-block;
	padding: 1rem;
	width: 100%;

}

.exam-list li a:hover {
	background: #0036a6;
	color: #fff;
	height: 100%;

}


/* -----------------------------------------------
　　　/////////　 レスポンシブstyle　/////// 
----------------------------------------------- */


@media (min-width: 360px) {

	ul.lessonmenu li.splan_hcd {
		font-size: 75%;
	}

	#pagelead h2,
	.onlinebanner h2 {
		font-size: 20px;
	}

	.case01photo,
	.case02photo,
	.case03photo,
	.case04photo {
		height: 320px;
		background-size: 300px;
		margin-top: 20px;
	}

	#lesson .hero.onlinebg {
		background-position: top 50px left 940px;
		background-size: auto 300px;
	}

	#lesson .hero.onlinebg h2 {
		margin-left: 2rem;
		margin-right: 2rem;
	}


	#age,
	#appSel {
		padding: .5em;
		width: 200px;
	}

	.qual-phmain {
		margin-bottom: 20px;
	}

	.qualContent table.ipaS1 {
		width: 100%;
	}

	#home .overscroll {
		width: 94%;
		margin: auto;
	}



}


@media (min-width: 414px) {

	.case01photo,
	.case02photo,
	.case03photo,
	.case04photo {
		height: 320px;
		background-size: 300px;
	}

	#pagelead h2,
	.onlinebanner h2 {
		font-size: 22px;
	}

	#lesson .hero.onlinebg {
		background-position: top 40px left 960px;
		background-size: auto 300px;
	}

	/* -------------- サイト紹介リンク */

	.linkarea ul.linklist li {
		width: 300px;
		margin-left: auto;
		margin-right: auto;
	}


}

@media (min-width: 480px) {

	.hero p {
		font-size: 20px;
	}

	#pagelead h2,
	.onlinebanner h2 {
		font-size: 22px;
	}

	.col.col-triple {
		width: 400px;
		margin: 20px auto 0px;
	}

	.jireiJ dl dt.smalltext {
		font-size: 100%
	}

	/* ------------ レッスン ------- */

	#lesson .content-box,
	#lesson .content-boxw {
		padding: 30px;
	}

	#lesson .content-box ul,
	#lesson .content-boxw ul {
		margin-left: 0;
	}

	#lesson .content-box ul.contentlist li,
	#lesson .content-boxw ul.contentlist li {
		margin-left: 30px;
	}

	#lesson .content-box .plantable ul.listDisc li,
	#lesson .content-boxw .plantable ul.listDisc li {
		margin-left: 2em;
	}

	#lesson .content-box .plantable ul.listDisc>li:last-child,
	#lesson .content-boxw .plantable ul.listDisc>li:last-child {
		margin-bottom: 1em;
	}

	#lesson .content-box .webprocess {
		width: 100%;
		margin: 30px auto 50px;
	}

	/* ---------------- 教室概要 ------- */

	#summary .timetable {
		width: 80%;
		max-width: 400px;
		margin-bottom: 40px;
		background-color: #fff;
	}

	#summary .timetable th,
	#summary .timetable td {
		padding: 8px;
	}

	#summary .profiledata {
		width: 90%;
		max-width: 600px;
		margin-bottom: 40px;
	}

	#summary .profiledata caption {
		margin-left: -5%;
	}

	#summary .profiledata th,
	#summary .profiledata td {
		padding: 8px;
	}

	#summary .profiledata th {
		width: 7em;
		text-align: right;
	}

	#summary .photo-bill {
		max-width: 720px;
		display: block;
		margin: auto;
	}

	#lesson .content-box span {
		margin-right: 0;
		display: inline;
	}

	img.lessonweb1 {
		float: right;
		margin-left: 10px;
		max-width: 160px;
	}

	.flex-img {
		width: 80% !important;
	}

	/* -------------- contact form */
	#contact .hero {
		background-position: 700px top;
	}

	#name,
	#planname,
	#email,
	#adrs,
	#selectradio {
		width: 350px;
	}


	.jireiJ dl dt {
		text-align: right;
	}

	#lesson .hero.onlinebg {
		background-position: top 40px left 1000px;
		background-size: auto 300px;
	}

	#lesson .hero.onlinebg h2 {
		margin-left: 3rem;
		margin-right: 3rem;
	}

	/* -------------- online */

	#lesson .timetable {
		width: 80%;
		max-width: 400px;
		margin-bottom: 40px;
	}

	#onlinetester #selectradio {
		width: auto;
	}

	/* -------------- Webクリ */

	.sikakumei dt {
		width: 6em;
	}

	.sikakumei dd {
		margin-left: 8em;
		margin-top: -2em;
	}


	/* -------------- Photoshop */

	.works-item.col3 {
		flex-basis: 65%;

	}


}


@media (min-width: 580px) {



	.white-box dl.home-topics dt {
		width: 8rem;
		float: left;
		border-bottom: none;
	}

	.white-box dl.home-topics dd {
		float: left;
		width: calc(100% - 8rem);
	}

	#lesson .hero.onlinebg {
		background-position: top 0px left 1000px;
		background-size: auto 250px;
	}

	#lesson .hero.onlinebg h2 {
		text-align: center;
		margin-left: 2rem;
		margin-right: 2rem;
	}

	.amsbook .col-triple {
		width: 45%;
	}

	.book .fl {
		width: 180px;
		float: left;

	}

	/* -------------- オンライン講習 */

	#onlinetester #appOther {
		width: 400px;
	}

	/* -------------- 2 th キャンペーン */

	#lesson .anivbanner {
		width: 100%;
		max-width: 220px;
		margin-left: 20px;
		margin-bottom: 20px;
		float: right;
	}

	.campaign_detail .campaigntable th,
	.campaign_detail .campaigntable td {
		display: table-cell;
	}

	/* -------------- サイト紹介リンク */

	.linkarea ul.linklist {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.linkarea ul.linklist li {
		width: 220px;
		margin-left: auto;
		margin-right: auto;
		margin-right: 1rem;
	}

	/* ------------------ コラム　独学の学習ステップ */

	#summary .hero.columnbg {
		background-position: right bottom;
	}

	.col-studytable th,
	.col-studytable td {
		display: table-cell;
		width: auto;
	}

	.col-studytable th {
		width: 6rem;
	}

	.studycontent {
		width: auto;
	}

	.col-studytable .purpose {
		width: 35%;
	}

	.study-img {
		max-width: 500px;
		display: block;
		margin: 0 auto;
	}

	.douga-2col li {
		max-width: 560px;
	}

	.fb {
		display: flex;
	}

	.studylead .freelance-img {
		max-width: 200px;
		margin-right: 50px;
		margin-bottom: 30px;
		width: 300px;
		margin: 0 2rem 1rem 0;
	}

	/* イラレ、PS　サーティファイ試験 */

	.amsbookLeft {
		width: 400px;
		margin-left: auto;
		margin-right: auto;
	}

	.amsbook_listbox {
		width: 150px;
		margin-right: 30px;
	}

	/* .amsbook_img {
		width: 150px;
	} */

}


/* タブレット用 */

@media (min-width: 737px) {

	.hero {
		background-position: left top;
		background-size: auto 660px;
	}

	.hero p {
		font-size: 150%;
	}

	.hero h2 {
		font-size: 200%;
	}

	.style-nav ul {
		text-align: center;
	}

	.style-nav ul li {
		display: inline-block;
	}

	#pagelead h2,
	.onlinebanner h2 {
		font-size: 22px;
	}

	h1 {
		font-size: 30px;
		margin-bottom: 90px;
	}

	h2 {
		margin-bottom: 16px;
	}

	.col-md-half {
		width: 50%;
	}

	/*.col {
        padding: 0px 7px 14px;
        box-sizing: border-box;
    	float: left;
	}*/
	#home .col {
		float: left;
	}

	.col.col-lg {
		padding: 0px;
	}

	.col.col-lg .white-box {
		padding: 60px 30px;
	}

	#home #pagelead.col.col-lg {
		padding: 40px 10px 60px;
	}

	#home .col.col-lg.onlinebanner {
		padding: 40px 10px 20px;
	}

	#home .onlinebanner {
		margin-top: 3em;
	}

	#home .onlinebanner p {
		margin: 2em 6em 0;
	}

	#home section.casearea .casemessage {
		font-size: 22px;
	}

	#lesson .gray-box {
		background-color: #ededed;
		color: #333333;
		padding: 60px 30px;
		text-align: center;
		overflow: hidden;
	}

	#lesson .row.gray {
		background-color: #ededed;
	}

	#lesson .row.gray .white-box {
		background-color: #ededed;
	}

	#pagelead h2,
	.onlinebanner h2 {
		font-size: 180%;
	}

	.white-box h2 {
		font-size: 200%;
	}

	/*.white-box dl dt {
		width: 120px;
		float: left;
	}
	.white-box dl dd {
        margin-left: 120px;
	}*/

	#menu ul li a#mm01 {
		background: url(../image/icon_home.png) no-repeat left center;
	}

	#menu ul li a#mm02 {
		background: url(../image/icon_lesson.png) no-repeat left center;
	}

	#menu ul li a#mm03 {
		background: url(../image/icon_summary.png) no-repeat left center;
	}

	#menu ul li a#mm04 {
		background: url(../image/icon_app.png) no-repeat left center;
	}

	#menu ul li a#mm05 {
		background: url(../image/icon_contact.png) no-repeat left center;
	}

	#home #menu ul li a#mm01 {
		background: url(../image/icon_home_cr.png) no-repeat left center;
	}

	#lesson #menu ul li a#mm02 {
		background: url(../image/icon_lesson_cr.png) no-repeat left center;
	}

	#summary #menu ul li a#mm03 {
		background: url(../image/icon_summary_cr.png) no-repeat left center;
	}

	#apply #menu ul li a#mm04 {
		background: url(../image/icon_app_cr.png) no-repeat left center;
	}

	#contact #menu ul li a#mm05 {
		background: url(../image/icon_contact_cr.png) no-repeat left center;
	}

	#menu ul li a#mm01,
	#menu ul li a#mm02,
	#menu ul li a#mm03,
	#menu ul li a#mm04,
	#menu ul li a#mm05 {
		padding-left: 2em;
		background-size: 30px;
	}

	#home #menu ul li a#mm01,
	#lesson #menu ul li a#mm02,
	#summary #menu ul li a#mm03,
	#apply #menu ul li a#mm04,
	#contact #menu ul li a#mm05 {
		padding-left: 2em;
		background-size: 30px;
	}

	#menu ul li a#mm01:hover,
	#menu ul li a#mm02:hover,
	#menu ul li a#mm03:hover,
	#menu ul li a#mm04:hover,
	#menu ul li a#mm05:hover {
		background-color: #EEEEEE;
	}

	.telbtn {
		display: none;
	}

	/* ------------ 転職　副業　フリーランス ---------- */

	.purposeArea {
		overflow: auto;
		margin-bottom: 100px;
	}

	.purpose-contentArea {
		display: flex;
		column-gap: 3%;
		justify-content: space-between;
	}

	.purpose-content {
		width: 31%;
		max-width: 300px;
	}

	/* ------------ 受講事例 ---------- */

	#home .col.col-triple {
		width: 33%;
		padding: 240px 16px 0px 17px;
		float: left;
		text-align: center;
		margin: 0;
	}

	.casearea h2 {
		font-size: 200%;
		border-bottom: 2px dotted #999;
		padding-bottom: 10px;
	}

	.jireiM {
		clear: both;
	}

	.case01photo,
	.case02photo,
	.case03photo,
	.case04photo {
		width: 46%;
		height: 320px;
		float: left;
	}

	.jirei {
		width: 52%;
		float: left;
		margin-left: 10px;
		margin-top: 16px;
		margin-bottom: 16px;
	}

	.jireiJ {
		clear: both;
		margin: 30px 10px 10px;
		padding: 20px;
		/*border: 2px solid #ABD7F8;
	border-radius: 10px;*/
		overflow: hidden;
		font-size: 93.7%;
	}

	.jireiJ h4 {
		color: #fff;
		padding: 6px;
		margin-bottom: 10px;
	}

	dl.jireiJleft {
		width: 50%;
		float: left;
	}

	.jireiJ dl dt {
		width: 22%;
		text-align: right;
		margin-right: 5%;
		float: left;
	}

	.jireiJ dl dt.smalltext {
		font-size: 87.5%
	}

	.jireiJ dl dd {
		width: 70%;
		float: left;
	}

	dl.jireiJright {
		width: 50%;
		float: left;
		margin-top: 0;
	}

	.jireiJright dt {
		width: 15% !important;
		text-align: right;
		margin-right: 5%;

	}

	.jireiJright dd {
		width: 77% !important;
	}

	.jireiJ p {
		text-align: center;
	}



	/* ---------------- 教室概要 ------- */

	#summary .hero,
	#apply .hero {
		height: 160px;
		background-position: left top;
		background-attachment: scroll;
		background-size: cover;
	}

	#summary .hero h2,
	#apply .hero h2 {
		line-height: 100px;
	}

	#summary .col,
	#apply .col {
		padding: 0px 0px 0px;
	}

	#summary .col-md-half,
	#apply .col-md-half {
		width: 100%;
	}

	#summary section.fullbox,
	#apply section.fullbox {
		width: 100%;
	}

	#summary .content-box,
	#apply .content-box {
		overflow: hidden;
	}

	#summary .gray-box,
	#apply .gray-box {
		background-color: #ededed;
		color: #333333;
		padding: 60px 30px;
		text-align: center;
		overflow: hidden;
	}

	#summary .photo-bill,
	#apply .photo-bill {
		max-width: 400px;
		border: 4px solid #ddd;
		display: block;
		float: left;
		margin-right: 40px;
		margin-bottom: 20px;
	}

	.map iframe {
		width: 100%;
		height: 350px;
	}


	dl.step {
		clear: both;
	}

	dl.step dd {
		float: left;
		width: 350px;
	}

	.stepPhoto01 {
		float: right;
		width: 300px;
		height: 180px;
		margin-top: 10px;
	}

	.stepPhoto02 {
		float: right;
		width: 300px;
		height: 180px;
		margin-top: 10px;
	}

	.stepPhoto03 {
		float: right;
		width: 300px;
		height: 180px;
		margin-top: 10px;
		background-size: cover;
	}

	.stepPhoto04 {
		float: right;
		width: 300px;
		height: 180px;
		margin-top: 10px;
		background-size: cover;
	}

	.flex-Lefttxt {
		display: flex;
		justify-content: space-between;
	}

	.flex-txt {
		width: 100%;
	}

	/* ------------------ column　独学の学習ステップ */

	#summary .hero.columnbg {
		background-size: cover;
	}

	.studylead .float-left {
		float: left;
		width: 300px;
		margin: 0 3rem 1rem 0;

	}

	.studylead figure {
		float: right;
		max-width: 300px;
		margin-left: 1rem;
	}

	.studylead h3 {
		background: linear-gradient(transparent 94%, rgba(108, 161, 243, 0.4) 0);
	}

	/* ---------------- レッスン ------- */

	#lesson .hero {
		height: 160px;
		background-position: left top;
		background-attachment: scroll;
		background-size: cover;
	}

	#lesson .hero h2 {
		line-height: 100px;
	}

	#lesson .col {
		padding: 0px 0px 0px;
	}

	#lesson .content-box {
		overflow: hidden;
	}

	#lesson .content-box .lessonweb1 {
		margin: 10px 0 20px 40px;
	}

	.amsbook .col-triple {
		width: 33%;
	}

	/* Photoshopプラン */


	.works-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 50px auto;
		align-items: center;
	}

	.works-item.col1 {
		flex-basis: 100%;
	}

	.works-item.col2 {
		flex-basis: 65%;
		/*flex-grow: 2;*/
	}

	.works-item.col3 {
		flex-basis: 48%;
		/*flex-grow: 1.5;*/
	}

	.works-item.ml5 {
		margin-right: 0;
	}

	.works-item {
		flex-basis: 31.74603%;
		margin-right: 1.58730%;
		margin-bottom: 40px;
		color: #333;
	}

	.works-name {
		font-size: 12px;
		font-weight: bold;
		margin-top: 8px;
	}

	.works-info {
		font-size: 10px;
		margin-top: 5px;
	}



	/* ---------------- よくある質問 ------- */

	#qa .hero {
		height: 160px;
		background-position: left top;
		background-attachment: scroll;
	}

	#qa .hero h2 {
		line-height: 100px;
	}

	#qa .col {
		padding: 0px 0px 0px;
	}

	#qa .content-box {
		overflow: hidden;
	}


	/* -------------- contact form */

	#contact .col {
		padding: 0px 0px 0px;
	}

	#contact .hero {
		height: 160px;
		background-position: 970px top;
		background-attachment: scroll;
		background-size: auto 200px;
	}

	#contact .hero h2 {
		line-height: 100px;
	}

	#contact #pagelead {
		padding: 0px 0px 14px;
	}

	#contact .col#pagelead h2 {
		text-align: center;
	}

	textarea#comment {
		width: 600px;
	}

	.telcall {
		display: none;
	}

	/*スマホのみ表示のため非表示*/

	/*  オンライン　*/

	.testerBosyu {
		padding: 1rem 4rem 2rem;
	}

	.testerBosyu h3 {
		margin: -1rem -4rem 0;
	}

	#lesson .hero.onlinebg {
		background-position: center center;
		background-size: auto 300px;
	}


	/* -------------- コロナ対策 */

	#summary .content-box h4 {
		clear: both;
	}

	#summary .sisaku {
		overflow: hidden;
		width: auto;
		margin-bottom: 20px;
	}

	#summary .photo-room {
		max-width: 45%;
		border: 2px solid #ddd;
		display: block;
		float: right;
		margin-left: 1em;
		margin-bottom: 20px;
	}

	.setubi {
		float: left;
		margin-left: 2em;
		margin-bottom: 4em;
		width: 40%;
	}

	.kousi,
	.jyukousei {
		float: left;
		width: 50%;
		overflow: hidden;
	}

	.kousi ul,
	.jyukousei ul {
		padding-right: 1em;
		margin-left: 2em;
		margin-bottom: 2em;
	}

	/* -------------- キャンペーン */

	#lesson .anivbanner {
		max-width: 360px;
	}

	#lesson .hero.autumn {
		background-size: cover;
		background-position: center bottom;
		/*background-attachment: inherit;*/
		background-repeat: no-repeat;

	}

	.layout-flex {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		column-gap: 40px;
		align-items: flex-start;
	}

	.campaign_fleximg {
		width: 400px;
		margin-top: 50px;
	}


	/* -------------- Photoshopプラン */

	#lesson .anivbanner.img-fruit {
		max-width: 280px;
	}

	/* -------------- 講師プロフィール */

	/*.trainer-img { display: none;}
   .prof-area {
        background: url("../image/trainer-prof.png")no-repeat right top;
        background-size: 250px auto;
    }*/

	/* -------------- コラム-独学の学習ステップ */

	.douga-2col {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.douga-2col li {
		width: 48%;
	}

	.douga-2col li:first-child {
		margin-bottom: 0;
	}


	/* -------------- 価格変更のお知らせ */

	.hosoku {
		margin-left: 4rem;
		margin-top: 1rem;
	}


	/* -------------- 講師プロフィール */


	.prof-container {
		flex-direction: row;
		justify-content: space-between;
	}

	.prof-message {
		width: 60%;
	}

	.prof-img {
		width: 40%;
		margin: 0 0 1rem 1rem;
	}


	/* -------------------- free plan ------- */

	.timeline-area.free-tt {
		max-width: 100%;
		padding: 0 80px 80px;
	}


	/* -------------------- exam 資格取得 ------- */

	.exam-list {
		display: flex;
		justify-content: space-between;

	}

	.exam-list li {
		width: 30%;
	}




}




@media (min-width: 870px) {


	.white-box dl.home-topics dd ul li {
		margin-right: 2rem;
	}

	/* -------------- サイト紹介リンク */
	.linkarea ul.linklist li {
		width: 240px;
	}

	/* ------------------- 新料金表 */

	.newprice-data23 {
		width: 700px;
	}

	.newprice-data23 caption {}

	.newprice-data23 thead th:nth-child(1) {}

	.newprice-data23 thead th:nth-child(2) {
		width: 90px;
	}

	.newprice-data23 thead th:nth-child(3) {
		width: 70px;
	}

	.newprice-data23 thead th:nth-child(4) {
		width: 50px;
	}

	.newprice-data23 thead th:nth-child(5) {
		width: 90px;
	}

	.newprice-data23 thead th:nth-child(6) {
		width: 70px;
	}

	.newprice-data23 thead th:nth-child(7) {
		width: 50px;
	}

	.newprice-data23 th {}

	.newprice-data23 td {}

}

/* デスクトップ用 */

@media (min-width: 940px) {

	.hero {
		height: 460px;
		background-size: auto;
	}

	.hero h2 {
		font-size: 240%;
	}

	.hero p {
		padding-top: 30px;
		padding-bottom: 80px;
		font-size: 200%;
	}

	#home .col {
		padding: 0px;
	}

	#home .col.col-md-half {
		padding: 0px 7px 14px;
	}

	#pagelead p {
		margin: 2em 10em;
	}

	#pagelead p.campaign-head {
		margin: 2em auto;
	}

	#home .onlinebanner p {
		margin: 2em 8em 0;
	}

	/* ------------ 受講事例 ---------- */

	#home section.casearea {
		overflow: hidden;
		margin-top: 60px;
		margin-bottom: 60px;
	}

	#home .col.col-triple {
		padding: 300px 16px 0px 17px;
	}

	#case01.col.col-triple {
		background-size: 240px;
	}

	#case02.col.col-triple {
		background-size: 240px;
	}

	#case03.col.col-triple {
		background-size: 240px;
	}

	.case01photo,
	.case02photo,
	.case03photo,
	.case04photo {
		width: 320px;
		height: 320px;
		float: left;
	}

	.jirei {
		width: 540px;
		float: left;
		margin-left: 20px;
		margin-top: 16px;
	}

	.jirei {
		width: 530px;
		float: left;
		margin-left: 20px;
		margin-top: 16px;
	}

	.jireiJ dl dt.smalltext {
		font-size: 100%
	}


	.col-lg-qtr {
		width: 25%;
	}

	/* 4分割 */

	.white-box h2 {
		/*border-bottom: 2px solid #999;*/
		padding-bottom: 10px;
	}

	.white-box dl dd {
		width: 750px;
	}

	.row.gray-box h2 {
		border-bottom: 2px dotted #999;
		padding-bottom: 10px;
	}

	/* ---------------- 教室概要 ------- */

	#summary header .row,
	#apply header .row {
		width: 940px;
	}

	#summary .row,
	#apply .row {
		max-width: 100%;
	}

	#summary section,
	#apply section {
		width: 940px;
		margin: auto;
		overflow: hidden;
	}

	#summary .content-box,
	#apply .content-box {
		width: 940px;
		margin: auto;
	}

	#summary .content-box h2,
	#summary .content-boxw h2,
	#apply .content-box h2,
	#apply .content-boxw h2 {
		font-size: 200%;
		font-weight: normal;
		border-bottom: 1px dotted #0036A6;
	}

	#summary .col,
	#apply .col {
		float: none;
		padding: 0px;
	}

	#summary .photo-bill,
	#apply .photo-bill {
		/*visibility: hidden;*/
	}

	/*#summary #sum6 {
	background-image: url(../image/bill_s.jpg);
	background-repeat: no-repeat;
	background-position: 50% 122%;
	background-size: 600px auto;
	}*/



	#summary aside .content-box h3,
	#apply aside .content-box h3 {
		border-bottom: 2px dotted #7B320C;
	}

	dl.step dd {
		width: 450px;
	}

	.stepPhoto01,
	.stepPhoto02,
	.stepPhoto03,
	.stepPhoto04 {
		width: 370px;
	}


	/* ---------------- レッスン ------- */


	.plantable {
		width: 80%;
	}

	#lesson header .row {
		width: 940px;
	}

	#lesson .row {
		max-width: 100%;
	}

	#lesson .row.mainimage {
		background-color: #87BA9B;
		padding: 1px 0;
	}

	/* 横幅調整 */
	#lesson .breadcrumbs {
		width: 900px;
		margin-left: auto;
		margin-right: auto;
	}

	#lesson section {
		width: 940px;
		margin: auto;
		overflow: hidden;
	}

	#lesson section.fullbox {
		width: 100%;
		background-color: #ededed;
	}

	#lesson section.fullbox .content-box {
		width: 880px;
		margin: auto;
	}

	#lesson .col {
		float: none;
		padding: 0;
	}

	#lesson .hero h2 {
		font-size: 200%;
	}

	#lesson .content-boxw h2 {
		padding-bottom: 6px;
		border-bottom: 1px dotted #999;
	}



	.works-list {
		width: 900px;

	}



	/* -------------- contact form */

	#contact .hero {
		background-position: right bottom;
		background-size: auto 300px;
	}


	form {
		display: block;
		width: 900px;
		margin: auto;
	}

	label {
		margin-left: 50px;
	}

	ul li label {
		margin-left: -20px;
	}

	input,
	#planname,
	#selectradio,
	textarea#comment {
		margin-left: 280px;
	}

	#selectradio li input[type="radio"] {
		margin-left: 0px;
	}

	#privacy {
		width: 800px;
	}


	/* -------------- よくある質問 */
	#qa .content-box {
		width: 840px;
		margin: auto;
	}


	.qaSection {
		padding: 40px;
		margin-bottom: 20px;
		border: 1px solid #666;
		border-radius: 10px;
	}

	.qaSection h2 {
		font-size: 150%;
		font-weight: normal;
		border-bottom: 2px dotted #133D13;
		margin-bottom: 5px;
	}

	.qaSection p {
		margin-bottom: 1em;
	}

	.qaSectionQ dl {
		margin-left: 1em;
	}

	.qaSectionQ dl dt {
		line-height: 2;
		list-style: none;
	}

	.qaSectionQ dl dt dd {
		line-height: 2;
		list-style: none;
	}

	/* -------------- オンライン講習　------------- */
	form#onlinetester {
		display: block;
		width: 900px;
		margin: auto;
	}

	#onlinetester label {
		margin-left: 50px;
	}

	#onlinetester ul li label {
		margin-left: 20px;
	}

	.left-mergin {
		margin-left: 40px;
	}

	/*#appOther {margin:10px 0 0 0;width: 300px;}*/
	#onlinetester input,
	#onlinetester select,
	#onlinetester #planname,
	#onlinetester textarea#comment {
		margin-left: 50px;
	}


	.hosokuComment {
		max-width: 750px;
		margin: 2em auto;
	}

	.onlinekyouyu {
		max-width: 400px;
		float: right;
		margin-top: -30px;
	}

	/* -------------- コロナ対策 */


	#summary .sisaku {
		width: 880px;
	}

	#summary .photo-room {
		max-width: 440px;
	}

	.setubi {
		width: 380px;
	}


	/* -------------- サイト紹介リンク */
	.linkarea ul.linklist {
		justify-content: space-around;
	}

	.linkarea ul.linklist li {
		width: 200px;
		margin-right: 0;
	}

	#lesson section.linkarea {
		width: auto;
	}

	/* -------------- 講師プロフィール */

	.prof-area {
		width: 900px;
	}

	.prof-message {
		width: 60%;
	}

	.prof-img {
		width: 40%;
		margin: 0 1rem 1rem;
	}


	/* -------------- オータムキャンペーン */
	/*#lesson .hero.autumn h2 {
        line-height: inherit;
    }*/

	/* -------------------- free plan ------- */

	.free-ttimg {
		display: flex;
		justify-content: space-between;
	}

	.free-ttimg li {
		margin-right: 10px;
		margin-bottom: 30px;
	}

	.free-ttimg img {
		width: 600px;
	}

}


@media (min-width: 1200px) {

	/* ------------ 転職　副業　フリーランス ---------- */
	/*.purposeArea {
    width: calc(100% + 100px);
    margin-left: -50px;
    margin-right: -50px;

}*/


}

@media (min-width: 1440px) {

	/*.hero h2 {
		color: #333;
		text-shadow:1px 1px 1px #fff;
	}
	.hero h2 span:first-child {
		text-shadow:1px 1px 0px #fff;
	}*/
	.hero {
		background-image: url(../image/bg_pattern_b.png), url(../image/hero_bg.jpg);
		background-blend-mode: overlay;
		background-size: auto, cover;
	}

	.spring-img {
		max-width: 1440px;
		display: block;
		margin: auto;
	}



}