@charset "utf-8";
/* CSS Document */

/* ------------------------------

メイン画像

------------------------------ */
#header{
	width: 100%;
	background: linear-gradient(-45deg,rgba(72,111,208,.8),rgba(0,200,222,.8)),url(../images/mainv_pc.png) top center no-repeat;
	background-size: cover;
}

#header .mainv{
	padding: 30px 60px;
	color: #fff;
    font-size: 40px;
    font-weight: bold;
}

#header img{
	display: block;
	width: 100%;
}

#header .btn{
	position:relative !important;
}

/*PC・タブレット*/
@media (min-width:768px){
	#header .mainv{
		/*flex*/
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		/*水平方向中央揃え*/
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		/*垂直方向中央揃え*/
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	#header .mainv > div{
		max-width: 50%;
		padding: 20px;
	}
}

/*ブラウザを狭くしたとき*/
@media screen and (max-width:1100px){
	#header .mainv{
		padding: 30px 0;
		font-size: 30px;
	}
}

/*スマホ*/
@media screen and (max-width:767px){
	#header .mainv{
		padding: 30px 20px;
		text-align: center;
	}

	#header .mainv > div:last-child{
		margin-top: 30px;
	}
}

/* ------------------------------

各サイトへのリンク

------------------------------ */
.other_service img{
	display: block;
	width: 100%;
}

@media (min-width: 768px){
	.other_service .container{
		padding: 50px 0;
	}

	.to_premium + .other_service .container,
	#pro + .other_service .container{
		padding-bottom: 0;
	}
}

@media screen and (max-width: 767px){
	.to_premium + .other_service .container,
	#pro + .other_service .container{
		padding-bottom: 0;
	}
}

/* ------------------------------

３つのポイント

------------------------------ */
#merit{text-align:center;}
#merit li{box-shadow: 0 1px 3px rgba(0,0,0,0.3);}

/*ポイント（見出し）*/
#merit li > p{
	padding:10px 0;
	border-radius:3px 3px 0 0;
	font-size:26px;
	font-weight:bold;
	color:#fff;
	background:linear-gradient(to right,#2e8cd9,#00a3d9);
}

#merit li:first-child  > p{background:linear-gradient(to right,#3974cf,#2e8cd9);}
#merit li:last-child > p{background:linear-gradient(to right,#00a3d9,#00c6db);}

/*ポイントの下の部分*/
#merit li > div{
	padding:40px 20px;
}

#merit img{
	width:160px;
	max-width:100%;
}
#merit .h3{margin:20px 0;}

#merit li div p{
	text-align: justify;
	text-justify: inter-ideograph;
}

#merit .btn{margin-top:20px;}

@media (min-width: 768px){
#merit ul.tablecell > li{
	vertical-align:top;
}
}

/* ------------------------------

手間なし

------------------------------ */
.no_hassle{
	background: #e4f0fc;
}

.no_hassle_wrap{
	background: #fff;
}

.no_hassle_wrap div{
	text-align: justify;
	text-justify: inter-ideograph;
}

.no_hassle_wrap div p + p{
	margin-top:20px;
}

.no_hassle_wrap img{
	display: block;
	max-width: 100%;
}

.no_hassle .catch{
	background-color: #00a3d9;
}

@media (min-width: 768px){
.no_hassle .h2{
	margin-bottom: 60px;
}

.no_hassle_wrap{
	padding: 40px;
	/*flex*/
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
	/*両端揃え均等*/
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	/*垂直方向中央揃え*/
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.no_hassle_wrap >*{width:48%;}
}

@media screen and (max-width: 767px){
.no_hassle_wrap{
	padding:20px;
}

.no_hassle img{
	margin-top: 30px;
}
}

/* ------------------------------

Google for Jobs

------------------------------ */
.googleForJobs{
	background:linear-gradient(-45deg,rgba(72,111,208,.8),rgba(0,200,222,.8)),url(../images/congruent_pentagon.png);
	color:#fff;
}

.googleForJobs .catch{
	background:#e2ff21;
	color:#111;
	font-weight:bold;
}

.googleForJobs .h2{
	color:#fff;
	line-height:1.6;
}

.googleForJobs .h2 .small{font-size:24px;}

.googleForJobs a{
	display:block;
	margin-top:30px;
	color:#fff;
	font-weight:bold;
	text-decoration:underline;
}

@media (min-width: 768px){
	.googleForJobs .h2{font-size: 30px;}
	.googleForJobs a:hover{text-decoration:none;}
}

@media screen and (max-width: 767px){
	.googleForJobs .h2{font-size:24px;line-height:1.4;}
	.googleForJobs .desc,
	.googleForJobs a{
		text-align: justify;
		text-justify: inter-ideograph;
	}
}

/* ------------------------------

書籍情報

------------------------------ */
.publication .catch{
	background: #e2ff21;
    color: #111;
    font-weight: bold;
}

.publication img{width:180px;}

.publication_title,
.publication_subtitle{
	text-align:justify;
	text-justify:inter-ideograph;
	font-weight:bold;
}

.publication_title{font-size:26px;}

.publication_subtitle{
	margin-top:10px;
	font-size:14px;
}

.publication .btn{margin-top:30px;}

@media (min-width:768px){
.publication_wrap{
	width:800px;
	max-width:100%;
	margin:0 auto;
	/*flex*/
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
}
.publication_wrap > *{
	-ms-flex-item-align: start;
	align-self: flex-start;
}
.publication_wrap > div{margin-left:40px;}
}

@media screen and (max-width:767px){
.publication{text-align:center;}
.publication img{
	display:block;
	margin:0 auto 30px auto;
}
.publication_title{font-size:20px;}
}

/* ------------------------------

プロにお任せ

------------------------------ */
#pro,
#pro .h2{
	color:#fff;
}

#pro .h2{text-align:left;}

#pro{
	position:relative;
	width:100%;
	background:url(../images/pro_img.png) top center no-repeat;
	background-size: cover;
}

.pro_inner{
	height:auto;
	background:rgba(0,0,0,0.5);
}

#pro .container{position:relative;}

#pro div{
	text-align: justify;
	text-justify: inter-ideograph;
}

.woman.scrollin{
	position:absolute;
	bottom:0;
	right:0;
	animation-duration:.6s;
	animation-name: slidein;
	animation-iteration-count:1;
}

/* ------------------------------

制作実績

------------------------------ */
#results .h2 + p{margin-bottom:40px;}

/*業種アイコン*/
.industry{
	margin-bottom:5px;
    color:#00a3d9;
    font-weight:bold;
    font-size:14px;
	text-align:center;
}

/*画像*/
#results a img{display:block;}

/*タイトル*/
.results_title{
	margin: 20px 0 40px 0;
	text-align:center;
}
.results_title p span{
	display:inline-block;
	text-align:left;
	font-size:14px;
	font-weight: bold;
}

/*プラン*/
.results_icon span{
    margin-top:10px;
    padding:5px;
    border:1px solid #ccc;
    border-radius:3px;
    line-height:1;
    color:#999;
	font-size:8px !important;
}

/*----------
PC
----------*/
.results_pc{letter-spacing: -.4em;}
.results_pc > div{
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	width:25%;
	padding:10px;
}

/*----------
スマホ
----------*/
.slick-slider{padding-bottom:80px;}

.slick-prev,
.slick-next{
	width:30px;
	height:30px;
	top:40%;
}

.slick-prev{
	margin-left:10px;
}

.slick-next{
	margin-right:10px;
}

.slick-prev:before,
.slick-next:before{
	display:block;
    content:'';
    position:absolute;
    top:0;
	width:20px;
    height:20px;
	-webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.slick-prev:before{
    right:0;
    border-left:1px solid #000;
    border-top:1px solid #000;
}

.slick-next:before{
    left:0;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
}

.slick-slide{
	padding:0 30px;
	text-align:center;
}

/*下の丸（ページャー）*/
.slick-dots{bottom:0;}
.slick-dots li button:before{font-size:20px;}

/* ------------------------------

機能・特長

------------------------------ */
#desc{background:linear-gradient(-45deg,rgba(72,111,208,.8),rgba(0,200,222,.8)),url(../images/congruent_pentagon.png);}

#desc .h2{color:#fff;}

#desc .h2 + p{
	margin-bottom:40px;
	color:#fff;
}

#desc .h2 + p a{color:#fff;}

#desc ul{
	margin-bottom:20px;
	min-height:140px;
}
#desc ul:last-child{margin-bottom:0;}

#desc ul li{
	position: relative;
	background-color:#fff;
	padding:20px;
	min-height: 140px;
	border-radius:3px;
}

#desc ul li img{
	width:100px;
	position: absolute;
    top: 50%;
    margin-top: -50px;
}

#desc ul li div{
	margin-left:120px;
	text-align: justify;
	text-justify: inter-ideograph;
}

#desc ul li div .h3{
	margin-bottom: 10px;
	font-size: 16px;
}

#desc ul li div p{
	font-size:14px;
}

.todemo{margin:40px 0 50px 0;}
.todemo a{margin:0;}

.hidden{visibility:hidden;}

/*プランラベル*/
.desc_label_s,
.desc_label_p{
	position: relative;
}

.desc_label_s:after,
.desc_label_p:after{
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	display: inline-block;
	width: 50px;
	height: 50px;
	background-image: url(../images/desc_label_s.png);
	background-size: contain;
	vertical-align: middle;
}

.desc_label_p:after{
	background-image: url(../images/desc_label_p.png);
}

/*プランラベルの説明*/
.desc_label_desc{
	margin: 20px;
    padding: 20px;
    border: 2px solid #fff;
    border-radius: 5px;
	font-size: 14px;
	color: #fff;
}

.desc_label_desc p:first-child{font-weight: bold;}
.desc_label_desc p + p{margin-top: 10px;}
.desc_label_desc p > *{vertical-align: middle;}
.desc_label_desc p img{width: 30px;}

@media (min-width:768px){
	#desc .h2 + p,
	.todemo{
		text-align:center;
	}
}

@media screen and (max-width:767px){
	#desc .hidden{display: none;}
	.desc_label_desc{margin: 20px 0;}
}

/* --------------------

お知らせ

-------------------- */
/*
#info{
	line-height:1.6;
	text-align:center;
}

#info p{
	display:inline-block;
	text-align:left;
	margin-bottom:30px;
}

#info .h2{
	margin:0;
}

#info .h2e{
	display:block;
	font-size: 14px;
    margin-top: 10px;
}

#info .h3{
	display:inline-block;
	text-align:left;
	
}

hr{
	width:50px;
	margin:0 auto 30px auto;
	border:2px solid #00a3d9;
}

#info img{max-width:800px;}

@media (min-width:768px){
#info .container{padding:100px 20px;}
#info .h3{margin:80px 0 30px 0;font-size:24px;}
}

@media screen and (max-width:767px){
#info .h3{margin:40px 0 30px 0;font-size:20px;}
}
*/

/* --------------------

お知らせ

-------------------- */
#info .h2e{
	display:block;
	font-size: 14px;
    margin-top: 10px;
}

#info .h3{
	font-size: 20px;
	color:#00a3d9;
}

.info_date{
	margin-bottom:10px;
	color:#999;
}

.info_text_area{
	font-size:14px;
	line-height:1.8;
	border-top:1px dotted #ccc;
	text-align: justify;
	text-justify: inter-ideograph;
}

/*講習会概要*/
.info_event dt{
	float:left;
	clear:both;
}

.info_event dd{
	margin-bottom:15px;
	padding-left:5em;
}

.info_event_title{
	font-size: 18px;
    font-weight: bold;
    margin: 20px 0;
}

.info_event .contents_title{font-weight:bold;}
.info_event ul + .contents_title{margin-top:10px;}

.info_event ul li{
	position: relative;
	padding-left: 20px;
}

.info_event ul li::after {
	display: block;
    content: '';
    position: absolute;
    top: 10px;
    left: 6px;
    width: 4px;
    height: 4px;
    background-color: #999;
    border-radius: 100%;
}

.info_event a{
	font-weight:bold;
	color: #00a3d9;
	text-decoration:underline;
}

.text_link{
	text-decoration:underline;
}

@media (min-width:768px){
#info .container{padding:100px 20px;}
#info .h3{margin-top:10px;}
.info_text_area{padding:30px 20px;}
.info_event a:hover{text-decoration:none;}
.text_link:hover{text-decoration:none;}
}

@media screen and (max-width:767px){
.info_text_area{padding:20px 0;}
}

/* --------------------

ブログ

-------------------- */
#blog{
	background-color: #E8E7E4;
	font-size:14px;
}

#blog .h2{
}

#blog .h2e{
	display:block;
	font-size: 14px;
    margin-top: 10px;
}

#blog ul{
	width:100%;
	margin-bottom:40px;
}

#blog ul li{
	background-color:#fff;
	border-radius:3px;
	text-align:left;
}

#blog ul li a{
	display:block;
	padding:20px;
}


#blog ul li a .blog_title{
	text-decoration:underline;
	font-weight:bold;
	margin-top:10px;
}

#blog ul li a:hover .blog_title{text-decoration:none;}

#blog ul li a em{
	display:inline-block;
	background:linear-gradient(transparent 0%, #ffff66 0%);
	font-weight:bold;
	margin:5px 10px 0 0;
}

/*PC・タブレット*/
@media (min-width:768px){
#blog .h2 + p{text-align:center;}
#blog ul{
	display:table;
	table-layout:fixed;
	border-collapse: separate;
	border-spacing:20px 0;
}
#blog ul li{display:table-cell;}
}

/*スマホ*/
@media screen and (max-width:767px){
#blog ul li{margin-bottom:20px;}
#blog .h2 span:last-child{display:block;margin:5px 0 0 0;}
}

/*ピックアップ記事*/
.kaiyu_blog{
    border-radius: 3px;
	background-color:#fff;
}

.kaiyu_blog div{
	padding:20px;
	text-align: justify;
	text-justify: inter-ideograph;
}

.kaiyu_blog h3 a{
	font-size:24px;
	display:block;
	margin-bottom:20px;
	text-decoration:underline;
}
.kaiyu_blog h3 a:hover{text-decoration:none;}

.kaiyu_blog img{
	max-width:100%;
	padding: 20px;
}

.kaiyu_blog .btn{margin-top: 20px;}

/*PC・タブレット*/
@media (min-width:768px){
.kaiyu_blog{margin:40px 20px 20px 20px;}
.kaiyu_blog div{width:60%;float:left;}
.kaiyu_blog img{width:40%;}
.kaiyu_blog .btn{
	padding: 15px 60px;
	font-size:14px;
}
}

/*スマホ*/
@media screen and (max-width:767px){
.kaiyu_blog{margin:20px 0;}
}

/* --------------------

他サービスの案内

-------------------- */
.other{background:#e4f0fc;}

.other_img{
	margin-bottom:20px;
	text-align:center;
}

.other_img img{
	width:100px;
}

.other_desc{
	margin-bottom:20px;
	font-size:30px;
	font-weight:bold;
	text-align:center;
}

.other_desc_sub{
	margin-bottom:30px;
	font-size:14px;
	line-height:1.8;
	text-align: justify;
	text-justify: inter-ideograph;
}

.other_btn{
	position:relative;
	display:block;
	padding:20px;
	background: #00A3D9;
    box-shadow: 0 6px #0088B5;
	border-radius:100px;
	font-weight:bold;
	color:#fff;
	text-align:center;
}

.other_btn:before{
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right:15px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.other_list > li:last-child .other_btn{
	background:#58c9c7;
	box-shadow: 0 6px #009B9B;
}

.other_list li{
	font-size:14px;
}

.other_list li.other_btn_title{
	margin-top:5px;
	font-size:18px;
}

.other_link{
	display:block;
	margin-top:30px;
	text-align:center;
	text-decoration:underline;
}

/*バナーに変更*/
.other .tablecell li{
	vertical-align: top;
}

.other .tablecell img{
	display: block;
	width: 100%;
}

.other_link{
	margin-top: 20px;
}

/*PC・タブレット*/
@media (min-width:768px){
.other_desc_sub{text-align:center;}

.other_list{
	display:table;
	width:100%;
	table-layout:fixed;
	border-collapse:collapse;
	border-collapse: separate;
	border-spacing:40px 0;
}

.other_list > li{
	display:table-cell;
	vertical-align:top;
}

.other_title,
.other_text{text-align:center;}

.other_btn{transition: .2s box-shadow,.2s top,.4s background;}

.other_btn:hover{box-shadow:0 5px #0088B5; top:1px;}
.other_btn:active{box-shadow:0 0 #0088B5; top:6px;}

.other_list > li:last-child .other_btn:hover{box-shadow:0 5px #009B9B;}
.other_list > li:last-child .other_btn:active{box-shadow:0 0 #009B9B;}

.other_link:hover{text-decoration:none;}
}

/*スマホ*/
@media screen and (max-width:767px){
.other_desc{font-size:20px;}
.other_list > li{margin-bottom:20px;}
.other_list > li:last-child{margin-bottom:0;}
.other_list > li + li{margin-top:30px;}
}

/* --------------------

問合せ

-------------------- */
.contact_text{
	text-align: center;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid #000;
}

.contact_text .tel{
	display: inline-block;
	padding-left: 26px;
	font-size: 30px;
	font-weight: bold;
	color: #00a3d9;
	background: url(../images/tel_icon.png) left 6px / 20px auto no-repeat;
}

.contact_text .reception_time{
	font-weight: bold;
}

.contact_text .message{
	margin-top: 30px;
}

/*スマホ*/
@media screen and (max-width:767px){
	.contact_text a{
		display: block;
		padding: 10px;
		border: 2px solid #00a3d9;
		border-bottom: 5px solid #00a3d9;
		border-radius: 100px;
	}
	.contact_text .message{
		text-align: justify;
		text-justify: inter-ideograph;
	}
}

/* --------------------

問合せ２

-------------------- */
.contact2 .contact_text{
	margin: 0;
	padding: 0;
	border: 0;
}


/* ------------------------------

2024.9.4追加
実績注意書き

------------------------------ */
.caution {
	font-size: 70%;
}

@media (max-width:767px){
	.caution {
		margin-top: 2em;
	}
}