@charset "utf-8";

/* =======================================================
	top.css  : 	max-width:1200px

	top
	1:symposium : 座談会
	2:guide : 一人暮らしガイド
	3:year : 密着1year
	4:kenjinkai : 県人会
	5:turn : 県外生就職あるある
======================================================= */


/* 共通
------------------------------------- */
main#c-top .c-top {
	overflow: hidden;
	background-repeat: no-repeat;
	/*padding-top: 46px;*/
  /*margin-bottom: -46px;*/
	position: relative;
}

main#c-top .c-top .c-inner-12 { position: relative;}
main#c-top .top-inner {
	margin-top: -46px;
	background-size: 100%;
}

/* タイトル */
main#c-top h3 {
	width: 420px;
	padding: 40px 0;
	color: #fff;
	font-size: 3.2rem;
	text-align: center;
	box-sizing: border-box;
	letter-spacing: 0.1em;
	line-height: 1.4;
}
main#c-top .c-top .c-inner-12 a { display: block;}
main#c-top .c-top .c-inner-12 h3 { position: absolute;}
main#c-top h3 span {
	display: block;
	font-size: 1.8rem;
	letter-spacing: 0.05em;
}

/* 詳しくはこちら */
main#c-top .c-top h3 .to-arti {
	display: block;
	width: 50%;
	margin: 20px auto 0 auto;
	padding: 3px 0;
	color: #fff;
	text-align: center;
	font-size: 1.8rem;
	border: 2px solid #fff;
	border-radius: 50px;
	position: relative;
}
main#c-top .c-top h3 .to-arti:after {
	content: '';
  display: inline-block;
	position: absolute;
	top: 27%;
	right: 5%;
  border-left: 10px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* 吹き出し */
.c-bubble {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 600px;
  margin: auto;
	z-index: 999;
}
.bubble {
	position: relative;
  display: inline-block;
	width: 600px;
  font-size: 16px;
  background: #FFF !important;
	border-radius: 50px;
  box-sizing: border-box;
	opacity: 1 !important;
}
.bubble:before {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 50%;
  margin-left: -15px;
  border: 8px solid transparent;
  border-top: 16px solid #FFF;
  z-index: 2;
}
.bubble:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 10px solid transparent;
  border-top: 10px solid #555;
  z-index: 1;
}
.bubble p {
  margin: 5px 100px;
  padding: 0;
	font-size: 2rem;
	font-weight: 600;
}
.bubble p {
  margin: 5px 100px;
  padding: 0;
	font-size: 2rem;
	font-weight: 600;
}


/* 0:main-img
------------------------------------- */
main section.main-img img { width: 100%;}
main section.main-img p { margin: 3% 0;}
main section.main-img .img {margin-bottom: 60px;}
main section.main-img .img img { width: auto;max-width: 100%;height: auto;}


/* 1:symposium : 座談会
------------------------------------- */
main .symposium .out-symposium { background: #fcf1ea;}
main .symposium .c-symposium {
	height: 910px;
	background: #fcf1ea url(../../img/top/symposium.png?2306) left 40% no-repeat;
	background-size: 100%;
	padding-top: 60px;
	padding-bottom: 60px;
}
main .symposium .c-symposium h3 {
	top: 32%;
	right: 0;
	background: #db4034;
	/*position: static !important;*/
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 60px;
}
/*main .symposium .youtubewrap {
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
}
main .symposium .u-youtube-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
main .symposium .u-youtube-wrap iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}*/
main .symposium .bubble {
  color: #db4034;
  border: solid 3px #db4034;
}
main .symposium .bubble:after { border-top: 18px solid #db4034;}

#symposium .youtubewrap {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
#symposium .u-youtube-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
#symposium .u-youtube-wrap iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}


/* 2:guide : 一人暮らしガイド
------------------------------------- */
main .guide .out-guide {
	background: #fbeef4;
}
main .guide .c-guide {
	height: 720px;
	padding-top: 10%;
	background: #fbeef4 url(../../img/top/guide.png?23062) left 85px no-repeat;
}
main .guide .c-guide h3 {
	top: 26%;
	left: 32%;
	background: #eb7083;
}
main .guide .bubble {
  color: #ef8b9b;
  border: solid 3px #ef8b9b;
}
main .guide .bubble:after { border-top: 18px solid #ef8b9b;}


/* 3:year : 密着1year
------------------------------------- */
main .year .out-year { background: #e5f6f5;}
main .year .c-year {
	height: 900px;
	padding-top: 6%;
	background: #e5f6f5 url(../../img/top/year.png?2107) left 185px no-repeat;
}
main .year .c-year h3 {
	top: 11%;
	left: 14%;
	background: #00a99d;
}
main .year .bubble {
  color: #00a99d;
  border: solid 3px #00a99d;
}
main .year .bubble:after { border-top: 18px solid #00a99d;}


/* 4:kenjinkai : 県人会
------------------------------------- */
main .kenjinkai .out-kenjinkai { background: #f9fbe5;}
main .kenjinkai .c-kenjinkai {
	height: 980px;
	padding-top: 6%;
	background: #f9fbe5 url(../../img/top/kenjinkai.png) left 166px no-repeat;
}
main .kenjinkai .c-kenjinkai h3 {
	top: 10%;
	right: 8.5%;
	background: #c2d500;
}
main .kenjinkai .bubble {
  color: #c2d500;
  border: solid 3px #c2d500;
}
main .kenjinkai .bubble:after { border-top: 18px solid #c2d500;}


/* 	5:turn : 県外生就職あるある
------------------------------------- */
main .kengaisei { margin-bottom: -25px !important;}
main .kengaisei .out-kengaisei { background: #f5f9ec;}
main .kengaisei .c-kengaisei {
	height: 750px;
	padding-top: 6%;
	background: #f5f9ec url(../../img/top/kengaisei.png) left 150px no-repeat;
}
main .kengaisei .c-kengaisei h3 {
	top: 13.5%;
	left: 8%;
	background: #9ec848;
}
main .kengaisei .bubble {
  color: #9ec848;
  border: solid 3px #9ec848;
}
main .kengaisei .bubble:after { border-top: 18px solid #9ec848;}


/* ---------------------------------------------------------
 タブレット用
--------------------------------------------------------- */
@media screen and (max-width: 1024px) {
	main .symposium .c-symposium { height: 800px;}
	main .symposium .c-symposium h3 { top: 28%;}

	main .guide .c-guide { height: 630px;}

	main .year .c-year { height: 800px;}
	main .year h3 { margin-top: 2%;}

	main .kenjinkai .c-kenjinkai { height: 860px;}
	main .kenjinkai h3 { margin-top: 2%;}

	main .kengaisei .c-kengaisei { height: 635px;}
	main .kengaisei h3 { margin-top: 2%;}
}


/* ---------------------------------------------------------
 タブレット用 #iPad
--------------------------------------------------------- */
@media screen and (max-width: 768px) {
	main#c-top h3 {
		width: 320px;
		padding: 24px 6px;
		font-size: 2.4rem;
	}
	main#c-top h3 span,main#c-top .c-top a { font-size: 1.4rem;}
	main#c-top h3 span {
		display: block;
		margin-top: 4px;
	}
	main#c-top .c-top h3 .to-arti:after {
		top: 32%;
		right: 6%;
		border-left: 7px solid white;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
	}

	main#c-top .c-top a { margin-top: 10px;}
	main#c-top .c-top a:after { top: 20%;}

	main .symposium .c-symposium {
		height: 620px;
		background-position: left 50%;
		background-size: 100%;
	}
	main .symposium .c-symposium h3 { top: 31%;}

	main .guide .c-guide { height: 510px;}
	main .guide .c-guide h3 { left: 28px;}

	main .year .c-year { height: 655px;}
	main .year .c-year h3 {
		top: 15%;
		left: 7.5%;
	}

	main .kengaisei { margin-bottom: 0 !important;}
	main .kenjinkai .c-kenjinkai {
		height: 680px;
		background-position: left 146px;
	}
	main .kenjinkai h3 { right: 3.5%;}

	main .kengaisei .c-kengaisei {
		height: 518px;
		background-position: left 124px;
	}
	main .kengaisei .c-kengaisei h3 {
		top: 12%;
		left: 5%;
	}
}


/* ---------------------------------------------------------
 スマホ用
--------------------------------------------------------- */
@media screen and (max-width: 767px) {

/* 共通
------------------------------------- */
	/* 吹き出し */
	.c-bubble { width: 90%;}
	.bubble { width: 100%;}
	.bubble p {
	  margin: 10px 0;
		font-size: 1.6rem;
	}

	/* 背景画像 */
	main#c-top .c-top .c-inner-12 {
		width: 100%;
		margin: 0;
		background-size: 100%;
	}
	main#c-top .c-top .mt-46 { margin: 0;}

	/* タイトル */
	main#c-top h3 {
		width: 74%;
		font-size: 2rem;
		padding: 15px 0;
		letter-spacing: 2px;
	}
	main#c-top h3 span {
		font-size: 1.2rem;
		font-weight: 400;
		line-height: 1.6;
	}

	/* ボタン：詳しくはこちら */
	main#c-top .c-top h3 .to-arti { font-size: 1.4rem;}
	main#c-top .c-top h3 .to-arti:after {
		top: 27%;
		right: 6%;
		border-left: 8px solid white;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
	}

/* 0:main-img
------------------------------------- */
	main section.main-img p {
		margin: 40px 0;
	}

/* 1:symposium : 座談会
------------------------------------- */
	main .symposium .c-symposium {
		height: 650px;
		background: url(../../img/top/symposium-sp.png?2306) left 52% no-repeat;
	}
	main .symposium .c-symposium h3 { top: 59%;}

	@media screen and (max-width: 375px) {
		main .symposium .c-symposium {
			height: 600px;
		}
		main .symposium .c-symposium h3 { top: 57%;}
	}

/* 2:guide : 一人暮らしガイド
------------------------------------- */
	main .guide .c-guide {
		height: 610px;
		background: url(../../img/top/guide-sp.png?23062) left 54% no-repeat;
	}
	main .guide .c-guide h3 {
		top: 52%;
		left: 0;
	}
	@media screen and (max-width: 375px) {
		main .guide .c-guide {
			height: 565px;
		}
		main .guide .c-guide h3 { top: 49%;}
	}

/* 3:year : 密着1year
------------------------------------- */
	main .year .c-year {
		height: 675px;
		background: url(../../img/top/year-sp.png) left 52% no-repeat;
	}
	main .year .c-year h3 {
		top: 55%;
		left: 26%;
	}
	@media screen and (max-width: 375px) {
		main .year .c-year {
			height: 620px;
		}
		main .year .c-year h3 { top: 53%;}
	}

/* 4:kenjinkai : 県人会
------------------------------------- */
	main .kenjinkai .c-kenjinkai {
		height: 660px;
		background: url(../../img/top/kenjinkai-sp.png) left 52% no-repeat;
	}
	main .kenjinkai .c-kenjinkai h3 {
		top: 55%;
		left: 0;
	}
	@media screen and (max-width: 375px) {
		main .kenjinkai .c-kenjinkai {
			height: 615px;
		}
		main .kenjinkai .c-kenjinkai h3 { top: 52%;}
	}

/* 5:turn : 県外生就職あるある
------------------------------------- */
	main .kengaisei .c-kengaisei {
		height: 550px;
		background: url(../../img/top/kengaisei-sp.png) left 48% no-repeat;
	}
	main .kengaisei .c-kengaisei h3 {
		top: 66%;
		left: 26%;
	}
	@media screen and (max-width: 375px) {
		main .kengaisei .c-kengaisei {
			height: 510px;
		}
		main .kengaisei .c-kengaisei h3 { top: 64%;}
	}
}



/* ---------------------------------------------------------
  スマホ用(320px以下)
--------------------------------------------------------- */
@media screen and (max-width: 320px) {

	main section.main-img p {
		margin: 20px 0 10px 0;
		font-size: 1.2rem;
	}

	/* 吹き出し */
	.c-bubble { top: 2% !important;}
	.bubble p {
		font-size: 1.4rem;
		line-height: 1.4;
	}

	/* ボタン：詳しくはこちら */
	main#c-top .c-top a { font-size: 1.3rem;}

	/* タイトル */
	main#c-top h3 {	font-size: 1.8rem;}
	main#c-top h3 span {
		font-size: 1.1rem;
		letter-spacing: 0;
	}

	/* 座談会 */
	main .symposium .c-symposium {
		height: 510px;
		background-position: left 56%;
	}

	/* 一人暮らしガイド */
	main .guide .c-guide {
		height: 490px;
		background-position: left 51%;
	}
	main .guide .c-guide h3 { top: 45%;}

	/* 密着1year */
	main .year .c-year {
		height: 535px;
		background-position: left 57%;
	}

	/* 県人会 */
	main .kenjinkai .c-kenjinkai { height: 525px;}
	main .kenjinkai .c-kenjinkai h3 { top: 50%;}

	/* 県外生就職あるある */
	main .kengaisei .c-kengaisei  {
		height: 450px;
		background-position: left 43%;
	}
}