@charset "utf-8";
#mainBox section {margin-bottom:30px;}
.mainimg {position: relative; margin-bottom:20px;}
.mainimg img {width:100%; display: block;box-sizing: boder-box; border: 1px solid #e3e3e3;}

.mainimg .btn_link {
	display: block;
	position: absolute;
	right: 20px;
	bottom: 20px;
	padding: 6px 22px 4px 10px;
	font-weight: bold;
	font-size: 15px;
	color: #000;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#e6e5e5');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#e6e5e5')";
	background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
	background-image: -ms-linear-gradient(top, #ffffff, #f2f2f2);
	background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#f2f2f2));
	background-image: -webkit-linear-gradient (top, #ffffff, #f2f2f2);
	background: linear-gradient (top, #ffffff, #f2f2f2);

	border: 1px solid #bbb;
	border-radius: 4px;
	text-decoration :none;
	text-align: center;
}

.mainimg .btn_link:after {
	content: "";
	display: block;
	position: absolute;
	right: 9px;
	top: 50%;
	margin: -5px 0 0;
	width: 6px;
	height: 6px;
	border-top: 3px solid #fcb300;
	border-right: 3px solid #fcb300;
	transform: rotate(45deg);
}

/* pickupSection */
.pickupSection .ttl_l {
	margin: 37px auto 30px;
	padding: 0 0 3px;
	font-size: 20px;
	text-align: center;
	background: url(../images/index/ttl_line01.png) no-repeat center bottom;}

.pickupSection .ttl_l .em {
	color: #ea4454;
}

.pickupSection .box {
	border: 1px solid #ddd;
}

.pickupSection .box .title {
	background: #fcb300;
	color: #fff;
}

.pickupSection .box .title a {
	display: block;
	position: relative;
	padding: 5px 10px;
	font-size: 115%;
	color: #fff;
	text-decoration: none;
}

.pickupSection .box .title a:after {
	content: "";
	display: block;
	position: absolute;
	right: 12px;
	top: 50%;
	margin: -5px 0 0;
	width: 6px;
	height: 6px;
	border-top: 2px solid #ffff00;
	border-right: 2px solid #ffff00;
	transform: rotate(45deg);
	opacity: .6;
}

#mainBox .pickupSection .box h2 img {
	display: inline-block;
	margin: 0 7px 0 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	vertical-align: middle;
}

.pickupSection .box .title a span {
	display: inline-block;
	vertical-align: middle;
	line-height: 1.3;
}

.pickupSection .box .title a span br {
	display: none;
}

.pickupSection .box .txt {
	padding: 10px;
	font-size: 94%;
}

/* overviewSection */
.overviewSection {
	margin: 6% auto;
}

.internshipFrame {
	width: 48%;
}

.topicsFrame {
	width: 47%;
	width: calc(52% - 25px);
}

/* internshipFrame */
.internshipFrame {
	border: 1px solid #f28374;
	background: #fff;
}

.internshipFrame .ttlWrap {
	position: relative;
	padding: 10px 20px;
	font-size: 150%;
	background: #f28374;
	color: #fff;
	letter-spacing: 0.08em;
}

.internshipFrame .title {
	height: 60px;
	line-height: 80px;
	font-weight: bold;
}

.internshipFrame .title .em {
	color: #fede58;
	font-weight: bold;
}

.internshipFrame .ttlWrap .sub {
	display: block;
	position: absolute;
	top: 10px;
	left: 0;
	width: 150px;
	height: 18px;
	line-height: 19px;
	color: #000;
	background: #fede58;
	text-align: center;
	font-size: 12px;
}

.internshipFrame .ttlWrap .sub:before {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 0;
	height: 0;
	border: 9px solid transparent;
	border-right: 5px solid #f28374;
}

.internshipFrame .ttlWrap img {
	position: absolute;
	right: 10px;
	top: 50%;
	margin: -30px 0 0;
	width: 60px;
	height: 60px;
}

.internshipFrame ul {
	padding: 10px 20px;
}

.internshipFrame li {
	margin: 0 0 7px;
	padding: 0 0 7px;
	border-bottom: 1px dotted #aaa;
}

.internshipFrame li:last-child {
	margin: 0;
	padding: 0;
	border: 0;
}

.internshipFrame li a {
	display: block;
	position: relative;
	padding: 11px 16px 9px 0;
	color: #000;
	font-size: 110%;
	text-decoration: none;
}

.internshipFrame li a:before {
	content: "";
	display: block;
	position: absolute;
	right: 5px;
	top: 50%;
	margin: -4px 0 0;
	width: 8px;
	height: 8px;
	border-top: 3px solid #aaa;
	border-right: 3px solid #aaa;
	transform: rotate(45deg);
	opacity: .5;
}

.internshipFrame li .lead {
	font-size: 13px;
	display: block;
	color: #64a1a7;
}

/* topicsFrame */
.topicsFrame .title {
	margin: 0 0 10px;
	padding: 5px 0 0;
	font-weight: bold;
	font-size: 120%;
	border-top: 1px solid #f9d836;
}

.topicsFrame .title:before {
	content: "";
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	top: -3px;
	margin: 0 5px 0 0;
	width: 15px;
	height: 15px;
	border: 4px solid #f9d836;
	border-radius: 50%;
	vertical-align: middle;
}

.topicsFrame .title:after {
	content: "";
	display: block;
	margin: 2px 0 0;
	height: 3px;
	background: #f9d836 url(../images/bg01.gif) repeat 0 0;
}


.topicsFrame .dreamBox .title {
	border-top-color: #9dccde;
}

.topicsFrame .specialBox .title {
	border-top-color: #a8da8c;
}

.topicsFrame .dreamBox .title:before {
	border-color: #9dccde;
}

.topicsFrame .specialBox .title:before {
	border-color: #a8da8c;
}

.topicsFrame .dreamBox .title:after {
	background-color: #9dccde;
}

.topicsFrame .specialBox .title:after {
	background-color: #a8da8c;
}

.topicsFrame .topics {
	position: relative;
	margin: 0 0 20px;
}

.topicsFrame .topics:last-child {
	margin: 0;
}

.topicsFrame .topics.new:before {
	content: "NEW";
	display: block;
	position: absolute;
	overflow: hidden;
	top: 3px;
	right: 10px;
	margin: 0 0 0 5px;
	width: 30px;
	height: 30px;
	line-height: 31px;
	font-size: 11px;
	border-radius: 50%;
	background: #ffae00;
	color: #fff;
	/* vertical-align: middle; */
	text-align: center;
	transform: rotate(25deg);
}

.topicsFrame li.new:after {
	content: "NEW";
	display: inline-block;
	position: relative;
	overflow: hidden;
	top: -2px;
	margin: 0 0 0 5px;
	padding: 0 3px;
	height: 16px;
	line-height: 17px;
	font-size: 11px;
	background: #ef705e;
	color: #fff;
	vertical-align: middle;
}

.topicsFrame a {
	position: relative;
	padding: 0 0 0 18px;
	color: #000;
	text-decoration: none;
	font-size: 96%;
}

.topicsFrame a:before {
	content: "";
	display: block;
	position: absolute;
	left: 5px;
	top: 5px;
	width: 0;
	height: 0;
	border: 3px solid transparent;
	border-left: 4px solid #f28374;
}

/* aboutSection */
.aboutSection {
	margin: 6% auto 0;
	padding: 5% 0 0;
	border-top: 1px solid #cfe3da;
}

.aboutSection > p:first-child {
	font-size:110%;
	line-height: 2.1;
}

.aboutSection .internshipGuideFrame {
	margin: 5% auto;
	padding: 10px;
	background: #f9f9f9;
}

.aboutSection .internshipGuideFrame .box {
	padding: 5px;
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: inset 0 0 0 5px #fff;
}

.aboutSection .internshipGuideFrame .box .title {
	color: #fff;
	font-size: 115%;
	font-weight: bold;
}

.aboutSection .internshipGuideFrame .box .title a {
	display: block;
	position: relative;
	padding: 9px 15px 7px;
	color: #fff;
	text-decoration: none;
}

.aboutSection .internshipGuideFrame .box .title a:before {
	content: "";
	display: block;
	position: absolute;
	right: 15px;
	top: 50%;
	margin: -3px 0 0;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	opacity: .5;
}

.aboutSection .internshipGuideFrame .box p {
	padding: 15px;
	font-size: 96%;
}

.aboutSection .internshipGuideFrame .guide01 .title {
	background: #f9a333;
}

.aboutSection .internshipGuideFrame .guide01 {
	background: #fff8cc;
}

.aboutSection .internshipGuideFrame .guide02 .title {
	background: #f38888;
}

.aboutSection .internshipGuideFrame .guide02 {
	background: #fef0ef;
}

/* linkFrame*/
.linkFrame {
	margin: 5% auto 0;
	padding: 20px;
	border: 1px solid #ccc;
}

.linkFrame > .dl {
	margin: 0 0 15px;
}

.linkFrame > .dl:last-child {
	margin: 0;
}

.linkFrame > .dl > .dt {
	position: relative;
	padding: 0 0 0 18px;
	width: 22%;
	min-width: 140px;
}

.linkFrame > .dl >.dt:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ea4454;
}

.linkFrame > .dl >.dt:after {
	content: "";
	display: block;
	position: absolute;
	left: 5px;
	top: 7px;
	width: 0;
	height: 0;
	border: 3px solid transparent;
	border-left-color: #fff;
}

.linkFrame .dd {
	flex: 1 1 auto;
}

.linkFrame .li,
.linkFrame li {
	position: relative;
	padding-left: 15px;
}

.linkFrame .li:before,
.linkFrame li:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 6px;
	width: 4px;
	height: 4px;
	border-top: 2px solid #ea4454;
	border-right: 2px solid #ea4454;
	transform: rotate(45deg);
	opacity: .7;
}

.linkFrame .li + .li {
	display: inline-block;
	margin-left: 30px;
}

.linkFrame li {
	margin: 0 0 4px;
}

.linkFrame li:last-child {
	margin: 0;
}

@media screen and (max-width: 959px) {
	#mainBox {width:auto;margin:0 12px;}
	.mainimg {margin-bottom:15px;}
}


@media screen and (max-width: 768px) {
	/* pickupFrame */
	.pickupSection .box .title a span br {
		display: inline;
	}

	/* internshipFrame */
	.internshipFrame .ttlWrap {
		padding: 10px 5%;
		font-size: 130%;
	}

	.internshipFrame li {
		margin: 0 0 4px;
		padding: 0 0 4px;
	}

	.internshipFrame li:last-child {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.internshipFrame li a {
		position: relative;
		padding: 5px 16px 3px 0;
		font-size: 100%;
	}
}

@media screen and (max-width: 640px) {
	.mainimg .btn_link {
		position: relative;
		padding: 8px 10px;
		bottom: auto;
		right: auto;
		margin: 15px auto;
	}

	/* pickupFrame */
	.pickupSection .ttl_l {
		margin: 25px auto 25px;
		font-size: 18px;
		max-width: 240px;
		background-size: contain;
	}

	.pickupSection .box {
		margin: 0 0 15px;
	}

	.pickupSection .box .title a span br {
		display: none;
	}

	/* overviewSection */
	.internshipFrame,
	.topicsFrame {
		width: auto;
	}

	.internshipFrame {
		margin: 0 0 30px;
	}

	/* aboutSection */
	.aboutSection .internshipGuideFrame .box + .box {
		margin-top: 10px;
	}
}

@media screen and (max-width: 480px) {
}

/* =========================================================
 * カスタム追加: ヘッダー右上「お問い合わせ」ボタンの文字調整（SP）
 * 既存CSS(common.css)のレイアウトは維持しつつ、
 * ボタン枠を少しだけ大きくし、フォントと行間を微調整。
 * ========================================================= */
@media screen and (max-width: 768px) {
	/* ボタン枠を少しだけ高く＆横に広げる */
	.header .contactlist_btn {
		height: 48px;
		width: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 2行テキストの上下余白をほぼ均等にする */
	.header .contactlist_btn span {
		display: inline-block;
		font-size: 92%;
		line-height: 1.4;
		height: auto;
		padding: 0 4px;
	}
}