@charset "shift_jis";


/*----------------------------
上書き解除
----------------------------*/

.middleArea {
		background:#fff;
}
.wrapper {
	max-width:100%;
	margin:auto;
	padding: 0;
}

.mainBox {
	width: 100%;
	float: none;
}


.mainContents:first-of-type {
	padding:0 ;
}

@media screen and (max-width:767px) {
	.mainBox {
		width:100%;
		float:none;
	}
	.mainContents {
	padding:0.5rem;
	background:#fff;
	}

}


.mainBox section.inner{
	width:960px;
	float: none;
	margin:0 auto 60px auto;
	font-size: 16px;
}


@media screen and (max-width:767px)
{
	.mainBox section.inner{
	width: 95%;
	float: none;
	}
}

.keyimg{
	margin:0;

}

.keyimg img{
	margin:0 auto;

}


h2,h3,h4{
	font-weight:bold;
}


h2
{
	position: relative;
	font-weight:bold;
	text-align: center;
	border:none;
	padding-bottom: 30px;
	margin-bottom: 60px;
	padding-left: 0;
	font-size: 2.2rem;
}


h3
{
	font-size: 1.8rem;
}



h2::after {
	border:none;
	text-align: left;
	position: absolute;
	content: "";
	width: 100px;
	height: 5px;
	background-color: #1b8491;
	bottom: 0;
	left: 52%;
	transform: translateX(-50%);
}


@media screen and (max-width:767px) {
	h2{
	font-size: 1.7rem;
	padding-bottom: 10px;
	margin-bottom: 30px;
	padding-left: 0;
	text-align: left;
	}
	
	h2::after {
		width: 70px;
		height: 4px;
		left: 1rem;
		transform: none;
	}
	h3
	{
	font-size: 1.5rem;
	}
}

h3::after{
	width: 60px;
	height: 4px;
	background-color: #3698c2;
}

@media screen and (max-width:767px) {
	h3
	{
	font-size: 1.5rem;
	}
	h3::after{
	width: 40px;
	}
}


table.detail th {
	font-weight:normal;
}

/*----------------------------
文字装飾
----------------------------*/
.point
{
	font-weight:bold;
	font-size: 1.4rem;
	color: #3698c2;
}

/*----------------------------
上書き解除
----------------------------*/

.lead
{
	background: #038282;
	background: linear-gradient(145deg,rgba(3, 130, 130, 1) 0%, rgba(22, 98, 109, 1) 54%, rgba(19, 101, 112, 1) 100%);
	color:#fff;
	padding:5rem 0;
}
@media screen and (max-width:767px) {
	.lead {
	padding:2rem;
	font-size:12px;
	}
	.lead p {
		margin:0;
	}
}
	
/*----------------------------
理由
----------------------------*/
.reason{
	background:#f2f2f2;
	border-radius:10px;
	padding:1rem;
}

.reason_ttl{
	font-weight: bold;
	font-size: 1.4rem;
	margin: 1rem;
}

.reason_ttl span {
	display: inline-block;
	background: #177a89;
	color: #fff;
	font-weight: bold;
	font-size: 1.4rem;
	padding: 0.3em 0.6em;
	line-height: 1.6;
	margin: 5px 0;
}

.reason_sub{
	padding: 1rem;
}

/*----------------------------
サンプル画像幅
----------------------------*/
img.sample_movie
{
	width: 60%;
	padding:1rem 0 0 0; 
}
@media screen and (max-width:767px) {
	img.sample_movie
	{
	width: 80%;
	margin: auto;
	display: block;
	padding:2rem 0 0 0; 
	}
}

/*-----------------------------------
チェック
-----------------------------------*/
ul.check
{
	border: solid 1px #f2f2f2;
	border-radius:10px;
	padding:2rem;
	margin-bottom: 50px;
	box-shadow: 0px 5px 8px 3px rgb(87 85 85 / 15%);
}

ul.check li,
dl.check dt
{
	position:relative;
	padding-left:2.2rem;
	font-size:1.1rem;
	line-height: 1.4;
	font-weight: bold;
	color: #3698c2;
	padding-bottom: 1rem;
}


ul.check li:last-child,
dl.check dt:last-child
{
	padding-bottom: 0;
}

@media screen and (max-width:767px) {
	ul.check li,
	dl.check dt
	{
	line-height:1.2;
	padding-bottom:10px;
	font-size: 1.1rem;
	padding-top: 2px;
	}
}

ul.check li:before,
dl.check dt:before
{
	position:absolute;
	content:"";
	top:-3px;
	left:0;
	display:-block;
	width:100%;
	height: 25px;
	background-image:url(/biz/license/gugaLiteracy/images/img_check.png);
	background-size:contain;
	background-repeat:no-repeat;
}


dl.check dd
{
	margin-bottom:20px;
	margin-left: 1.5em;
		text-indent: -2.5em;
	padding-left:2.2rem
}


dl.check dd:last-child
{
	margin-bottom:0;
}
/*----------------------------
フロー
----------------------------*/


/**/
.flow_Area{
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f2f2f2;
	padding: 5rem;
	border-radius: 10px;
}

@media screen and (max-width:767px){
.flow_Area{
	padding: 1rem;
	}
}
.flow {
	padding-left: 0;
}

.flow > li {
	list-style-type: none;
	display: flex;
}

.flow > li:not(:last-child) {
	margin: 0 0 50px;
}

.flow > li .icon07 {
	width: 90px;
	box-sizing: border-box;
	padding: 20px 10px 10px;
	font-weight: bold;
	color: #fff;
	text-align: center;
	background: #277394;
	border-radius: 5px 5px 0 0;
	position: relative;
	line-height: 125%;
	margin: 0;
}
.flow > li .icon07::after {
	content: ' ';
	width: 0;
	height: 0;
	border-left: 45px solid transparent;
	border-right: 45px solid transparent;
	border-top: 20px solid #277394;
	position: absolute;
	bottom: -20px;
	left: 0;
}

.flow > li dl {
	padding: 0 0 0 30px;
	width: calc(100% - 115px);
}

.flow > li dl dt {
	padding: 0 0 5px;
	margin: 0 0 15px;
	font-size: 1.4em;
	font-weight: bold;
	border-bottom: 4px solid #CCCCCC;
	position: relative;
}
.flow > li dl dt::after {
	content: '';
	width: 20%;
	height: 4px;
	position: absolute;
	bottom: -4px;
	left: 0;
	background-color: #277394;
}

.flow > li dl dd {
	margin: 0;
}



/*----------------------------
問い合わせボタン
----------------------------*/

.btn_box {
	text-align: center;
}

a.btn_info {
	display: inline-block;
	background: #4775b7;
	padding: 1rem;
	color: #fff;
	border-radius: 10px;
	text-decoration: none;
	box-shadow: 2px 4px 7px 1px rgb(0 0 0 / 20%);
	transition: all .3s;
}

a.btn_info:hover {
	box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%);
}



.btn_area{
	display:flex;
	gap:1rem;
	justify-content: center;
}


@media (max-width: 767px) {
	.btn_area {
		flex-direction: column;
		align-items: center; /* ?? 中央寄せ */
	}

	.btn_area li {
		width: 100%;
		max-width: 360px;
		text-align:center;
	}

	.btn_area li a {
		display: block;			/* aがボタンなら幅を合わせる */
		width: 100%;				 /* liに合わせて伸ばす */
	}
}

/*----------------------------
担当講師
----------------------------*/

@media screen and (max-width:767px){
	img.teacher
	{
	width: 55%;
	}
}

/*----------------------------
課題
----------------------------*/
.anxiety
{
	display:flex;
	gap: 1rem;	

}

@media screen and (max-width:767px){
	.anxiety
	{
	flex-direction:column;
	}
}	
	
p.anxiety_box
{
	background: #1b8491;

	padding:1rem;
	margin-top:0!important;
	text-align:center;
	color:#fff;
	border-radius:5px
}



/*----------------------------
スケジュール例
----------------------------*/
.sc_sample
{
	padding: 2rem;
	border-radius: 30px;
	border: 3px solid #277394;
}

@media screen and (max-width:767px){
	.sc_sample
	{
	padding: 1rem;
	}
}

.sc_sample dl dt
{
	font-weight:bold;	
	font-size:1.3rem;
	color:#277394;
}

.sc_sample dl dd
{
	margin-bottom:2rem;
}
	
	

/*----------------------------
4つのポイント
----------------------------*/
.pointBOX {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	width: 100%;
}

.mainContents .pointBOX dl {
	text-align: center;
	margin: 0;
	padding: 0;
	background: radial-gradient(circle, #177a89 60%, transparent 61%);
	background-size: 100% 100%;
	border-radius: 50%;
	width: 220px;
	height: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0; /* これも念のため追加してみて */
}
.mainContents .pointBOX dl dt{
	font-weight:bold;
	color:#e0d88c;
}

@media (max-width: 767px) {
	.pointBOX {
		flex-wrap: wrap;
		justify-content: center;
	}

	.mainContents .pointBOX dl {
		width: 45%;
		margin-bottom: 1rem;
	}
}


/*----------------------------
資格取得者の声
----------------------------*/
ul.voice li
{
	display: flex;
	align-items:center;
	background: linear-gradient(135deg, rgb(31 182 182) 0%, rgb(38 134 148) 54%, rgba(19, 101, 112, 1) 100%);
	border-radius:10px;
	margin-bottom:1rem;
	padding:2rem;
	gap:1rem;
	font-size:1.2rem;
	font-weight:bold;
	color:#fff;
}

ul.voice li:last-child
{
	margin-bottom:0;
}

ul.voice li img
{
	width:100px;
	height:auto;
}

	
/*----------------------------
コンバージョン
----------------------------*/
section.cv_Area
{
	width:100%;
	background: #038282;

	background: linear-gradient(135deg, rgba(3, 130, 130, 1) 0%, rgba(22, 98, 109, 1) 54%, rgba(19, 101, 112, 1) 100%);
	color:#fff;
	padding:5rem 0;
}

section.cv_Area .cv_box
{
	width:960px;
	margin:0 auto;
	text-align:center;
	display: flex;	
	gap:1rem;
}


a.btn_cv
{
	flex:1;
	background: #483C97;
	background: linear-gradient(145deg,#e996a1 20%, rgb(100 85 196)	100%);
	color:#fff;
	border:1px solid #8c719;
	border-radius:10px;
	padding: 2rem 0;
	font-weight: 800;
	font-size: 1.3rem;
	box-shadow: 2px 4px 7px 1px rgb(0 0 0 / 20%);
	transition: all .3s;
}

@media screen and (max-width:767px){
	section.cv_Area
	{
		padding: 2rem 0;
	}
	section.cv_Area .cv_box
	{
		width:100%;
		padding:0 1rem;
	}
	a.btn_cv
	{
		font-size: 13px;
		padding:1rem;
	}

}



a.btn_cv:hover
{
	background: #038282;
	background: linear-gradient(135deg, rgb(3 130 130) 0%, rgba(22, 98, 109, 1) 54%, rgba(19, 101, 112, 1) 100%);
	box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%);
	text-decoration:none;
}