@charset "utf-8";

/*
	福島県教育旅行
	トップページ用CSS
	/index.html

	index.css
	create	20170131
*/



/* ---------------------------------------------------------
	約560px未満の画面向けスタイル モバイルファースト
--------------------------------------------------------- */
.slide {
	overflow: hidden;
	clear: both;
}
.sliderMain {
	position: relative;
}
.sliderMainText {
	display: none;
}
.slide .sliderSub {
	display: none;
}
#main h2 {
	font-size: 18px;
	text-align: center;
	margin-bottom: 10px;
}
#main h2 span {
	display: none;
}
#main .blockBox1 {
	padding-top: 30px;
	padding-bottom: 30px;
}
#main .blockBox1 h4 {
	padding-top: 10px;
	padding-bottom: 10px;
	color: #ffffff;
	font-weight: normal;
	background-color: #7F7F7F;
	margin-bottom: 1px;
}
#main .blockBox2 {
	padding-top: 30px;
	padding-bottom: 20px;
	background-image: url(../img/blockBg.png);
	background-repeat: repeat;
}
#main .blockBox2 .btnMore a {
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #64B432;
	display: block;
	border-radius: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
#main .swipe {
	width: 100%;
	overflow: hidden;
}
#main .swipe a {
	position: relative;
	padding-bottom: 82%;
	height: 0;
	display: block;
	background-color: #eee;
	background-size: cover;
}
#main .swipe a .image {
	width: 100%;
	overflow: hidden;
}
#main .swipe a .image img {
	width: 100%;
}
#main .swipe a .select {
	position: absolute;
	display: block;
	bottom: -2px;
	left: 0px;
	width: 100%;
	background-color: #3473b4;
	padding: 5px 0;
	color: #fff;
	font-size: 15px;
}
#main .swipe li:nth-child(2) a .select {
	background-color: #3695b6;
}
#main .swipe li:nth-child(3) a .select {
	background-color: #36b7b6;
}
#main .swipe li:nth-child(4) a .select {
	background-color: #8ab929;
}
#main .swipe li:nth-child(5) a .select {
	background-color: #f39800;
}
#main .swipe li:nth-child(6) a .select {
	background-color: #e83828;
}
#main .swipe li:nth-child(7) a .select {
	font-size: 10px;
	padding: 8px 0;
	background-color: #9c4595;
}
#main .swipe li:nth-child(8) a .select {
	background-color: #b95533;
}
#main .swipe li:nth-child(9) a .select {
	background-color: #a71f24;
}
#main .multiple-item2 {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: wrap;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
}
#main .multiple-item2 li {
	width: calc((100% / 3) - 4px);
	margin: 0 2px 5px;
}
#main .movieBox {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
	padding: 10px;
	background-color: #fff;
}
#main .movieBox .iframeBox {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 10px;
}
#main .movieBox .iframeBox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#main .courseBox {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
	padding: 10px;
	background-color: #fff;
}
#main .courseBox h3 {
	font-size: 20px;
	text-align: left;
	margin-bottom: 10px;
}
#main .courseBox .textLeft {
	text-align: left;
}
#main .courseBox .photoBox {
	margin-bottom: 10px;
}
#main .courseBox .photoBox p {
	width: 100%;
}
#main .courseBox .photoBox img {
	width: 100%;
}


/* 体験プログラム - カテゴリで選択 */
#main .blockBox1left {
}
#main .categoryBox ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: wrap;
	flex-wrap: wrap;
	justify-content: flex-start;
}
#main .categoryBox ul li {
	width: 32.9%;
	height: 110px;
	display: block;
	background-color: #fff;
	margin-bottom: 1px;
	padding-right: 2px;
}
#main .categoryBox ul li:nth-child(3n) {
	padding-right: 0px;
}
#main .categoryBox ul li a {
	height: 104px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	border: 2px solid #337AC1;
	display: block;
}
#main .categoryBox ul li a .bg {
	width: 100%;
	height: 100%;
	background-color: #337AC1;
}
#main .categoryBox ul li a .select {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 60%;
	background-position: center center;
	opacity: 0.15;
}
#main .categoryBox ul li a span {
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -10px;
	font-size: 16px;
	color: #fff;
	text-align: center;
	display: block;
}
#main .categoryBox ul li.bed a {
	color: #337AC1;
	border-color: #337AC1;
}
#main .categoryBox ul li.bed a .bg {
	background-color: #337AC1;
}
#main .categoryBox ul li.bed a .select {
	background-image: url(../img-index/bed.svg);
}
#main .categoryBox li.futbol a {
	color: #339DC1;
	border-color: #339DC1;
}
#main .categoryBox li.futbol a .bg {
	background-color: #339DC1;
}
#main .categoryBox li.futbol a .select {
	background-image: url(../img-index/futbol.svg);
}
#main .categoryBox ul li.futbol a span {
	top: calc(50% - 10px);
}
#main .categoryBox li.gradu a {
	color: #33C1C1;
	border-color: #33C1C1;
}
#main .categoryBox li.gradu a .bg {
	background-color: #33C1C1;
}
#main .categoryBox li.gradu a .select {
	background-image: url(../img-index/gradu.svg);
}
#main .categoryBox ul li.gradu a span {
	top: calc(50% - 10px);
}
#main .categoryBox ul li.cutlery a {
	color: #C15733;
	border-color: #C15733;
}
#main .categoryBox ul li.cutlery a .bg {
	background-color: #C15733;
}
#main .categoryBox ul li.cutlery a .select {
	background-image: url(../img-index/cutlery.svg);
}
#main .categoryBox li.user a {
	color: #B20000;
	border-color: #B20000;
}
#main .categoryBox li.user a .bg {
	background-color: #B20000;
}
#main .categoryBox li.user a .select {
	background-image: url(../img-index/user.svg);
}
#main .categoryBox li.users a {
	color: #C133C1;
	border-color: #C133C1;
}
#main .categoryBox li.users a .bg {
	background-color: #C133C1;
}
#main .categoryBox li.users a .select {
	background-image: url(../img-index/users.svg);
}
#main .categoryBox li.hope a {
	color: #F08300;
	border-color: #F08300;
}
#main .categoryBox li.hope a .bg {
	background-color: #F08300;
}
#main .categoryBox li.hope a .select {
	background-image: url(../img-index/hope.svg);
}
#main .categoryBox ul li.hope a span {
	top: calc(50% - 10px);
}
#main .categoryBox li.tel a {
	color: #8FC31F;
	border-color: #8FC31F;
}
#main .categoryBox li.tel a .bg {
	background-color: #8FC31F;
}
#main .categoryBox li.tel a .select {
	background-image: url(../img-index/tel.svg);
}
#main .categoryBox ul li.tel a > span {
	top: calc(50% - 12px);
}
#main .categoryBox ul li.tel a .mini {
	font-size: 10px;
	top: calc(50% + 32px);
	white-space: nowrap;
}



/* 体験プログラム - エリアで検索 */
#main .blockBox1Right {
}
#main .blockBox1Right .areaBox {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
}
#main .areaBox ul {
	width: 33%;
	list-style: none;
}
#main .areaBox ul li {
	width: 100%;
	height: 110px;
	display: block;
	margin-bottom: 1px;
}
#main .areaBox ul li a {
	height: 104px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	border: 2px solid #337AC1;
	display: block;
}
#main .areaBox ul li a .bg {
	width: 100%;
	height: 100%;
	background-color: #337AC1;
}
#main .areaBox ul li a .select {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(../img-index/aizu.svg);
	background-repeat: no-repeat;
	background-size: 75%;
	background-position: center center;
	opacity: 0.3;
}
#main .areaBox ul li.minamiaizu a .select {
	background-image: url(../img-index/minamiaizu.svg);
}
#main .areaBox ul li.kenhoku a .select {
	background-image: url(../img-index/kenhoku.svg);
}
#main .areaBox ul li.kenchu a .select {
	background-image: url(../img-index/kenchu.svg);
}
#main .areaBox ul li.kennan a .select {
	background-image: url(../img-index/kennan.svg);
}
#main .areaBox ul li.sousou a .select {
	background-image: url(../img-index/sousou.svg);
}
#main .areaBox ul li.iwaki a .select {
	background-image: url(../img-index/iwaki.svg);
}
#main .areaBox ul li a span {
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -8px;
	font-size: 16px;
	color: #fff;
	text-align: center;
	display: block;
}
#main .areaBox ul li.aizu a {
	border-color: #7AC133;
}
#main .areaBox ul li.aizu a .bg {
	background-color: #7AC133;
}
#main .areaBox ul li.minamiaizu a {
	border-color: #7AC133;
}
#main .areaBox ul li.minamiaizu a .bg {
	background-color: #7AC133;
}
#main .areaBox ul li.kenhoku a {
	border-color: #EE7700;
}
#main .areaBox ul li.kenhoku a .bg {
	background-color: #EE7700;
}
#main .areaBox ul li.kenchu a {
	border-color: #EE7700;
}
#main .areaBox ul li.kenchu a .bg {
	background-color: #EE7700;
}
#main .areaBox ul li.kennan a {
	border-color: #EE7700;
}
#main .areaBox ul li.kennan a .bg {
	background-color: #EE7700;
}
#main .areaBox ul li.sousou a {
	border-color: #339DC0;
}
#main .areaBox ul li.sousou a .bg {
	background-color: #339DC0;
}
#main .areaBox ul li.iwaki a {
	border-color: #339DC0;
}
#main .areaBox ul li.iwaki a .bg {
	background-color: #339DC0;
}


#main .newsBox {
	margin-bottom: 30px;
}
#main .newsBox ul {
	margin-bottom: 20px;
	list-style: none;
}
#main .newsBox ul li a {
	text-align: left;
	text-decoration: none;
	color: #333333;
	min-height: 80px;
	padding: 10px;
	background-color: #ffffff;
	border-bottom: 1px dotted #cccccc;
	display: block;
}
#main .newsBox ul li .photo {
	width: 80px;
	height: 80px;
	display: block;
	margin-right: 15px;
	float: left;
	background-size: cover;
	background-position: center;
}
#main .newsBox ul li .text {
	font-size: 14px;
	line-height: 180%;
}
#main .newsBox ul li .date {
	font-size: 12px;
	margin-bottom: 5px;
	display: block;
}
#main .newsBox .btnMore a {
	margin-left: 10px;
	margin-right: 10px;
}
#main .facebookBox {
	margin-bottom: 20px;
}
#main .bannerBox {
	border-top: 1px solid #ccc;
	padding: 10px 0;
}
#main .bannerBox ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-direction: wrap;
	flex-wrap: wrap;
	justify-content: center;
}
#main .bannerBox ul li {
	list-style: none;
	padding: 0px 3px;
}
#main .bannerBox ul li img {
}
#main .snsBox {
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding-top: 15px;
	padding-bottom: 15px;
}



@media screen and (min-width: 360px){
	/*	約360px以上の画面向けスタイル（大きいスマホ） */

	#main .swipe li:nth-child(7) a .select {
		font-size: 11px;
	}
}

@media screen and (min-width: 768px){
	/*	約768px以上の画面向けスタイル（タブレット） */

	.sliderMainText {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -22px;
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		padding-top: 15px;
		padding-bottom: 15px;
		display: block;
		background-color: rgba(0,0,0,0.2);
	}
	.mainWidth {
		width: 100%;
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}
	#main h2 {
		font-size: 24px;
	}
	#main .swipe a .select span {
		font-size: 24px;
	}
	width: calc((100% / 3) - 10px);
	margin: 0 5px 10px;
	box-sizing: border-box;
	#main .blockBox1 {
		margin: 0 auto;
		padding-top: 80px;
		padding-bottom: 60px;
	}
	#main .blockBox2 {
		padding-top: 80px;
		padding-bottom: 60px;
	}
	.blockBox1Left {
		float: left;
		width: 50%;
		max-width: 470px;
	}
	.blockBox1Left h4 {
		margin-right: 10px;
	}
	.categoryBox {
		margin-right: 10px;
	}
	.blockBox1Right {
		float: right;
		width: 50%;
		max-width: 470px;
	}
	.blockBox1Right h4 {
		margin-left: 10px;
	}
	.areaBox {
		margin-left: 10px;
	}
	.blockBox2Left {
		float: left;
		width: 50%;
		max-width: 470px;
	}
	.blockBox2Left h2 {
		margin-right: 10px;
	}
	.newsBox {
		margin-right: 10px;
	}
	.blockBox2Right {
		float: right;
		width: 50%;
		max-width: 470px;
	}
	.blockBox2Right h2 {
		margin-left: 10px;
	}
	.facebookBox {
		margin-left: 10px;
	}
	#main .movieBox {
		margin-left: 10px;
	}
	#main .courseBox {
		margin-right: 10px;
	}
	#main .bannerBox {
		min-height: 60px;
	}
	#main .bannerBox ul {
		justify-content: center;
	}
	#main .bannerBox ul li {
	}
	#main .bannerBox ul li img {
	}
}





@media screen and (min-width: 980px){
	/*	約980px以上の画面向けスタイル（PC） */

	.sliderMain {
		min-width: 350px;
	}
	#main .blockBox1 {
		width: 980px;
		margin: 50px auto 80px;
	}
	#main .swipe a .image img {
		-webkit-transition: all 0.5s ease-in;
		-moz-transition: all 0.5s ease-in;
		-o-transition: all 0.5s ease-in;
		transition: all  0.3s ease-in;
		opacity: 1;
	}
	#main .swipe a:hover .image img {
		transform: scale(1.1);
		opacity: 1;
	}
	#main .swipe a .select {
		bottom: -6px;
		padding: 10px 0;
	}
	#main .swipe a .select span {
		font-size: 26px;
	}
	#main .swipe a:hover .select {
	}
	#main .multiple-item2 li {
		width: calc((100% / 3) - 10px);
		margin: 0 5px 10px;
	}
	.sliderMain .bx-wrapper {
		max-width: 1280px!important;
		margin: 0 auto!important;
	}
	.sliderMain .bx-wrapper .bx-viewport {
		overflow: visible!important;
	}
	.slide .sliderSub {
		display: block;
		background-color: #fff;
		padding-top: 15px;
		padding-bottom: 0px;
	}
	.sliderSub a img {
		-moz-transition: -moz-transform 0.5s linear;
		-webkit-transition: -webkit-transform 0.5s linear;
		-o-transition: -o-transform 0.5s linear;
		-ms-transition: -ms-transform 0.5s linear;
		transition: transform 0.5s linear;
	}
	.sliderSub a.active img {
		-webkit-transform: scale(1.10);
		-moz-transform: scale(1.10);
		-o-transform: scale(1.10);
		-ms-transform: scale(1.10);
		transform: scale(1.10);
		box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
	}
	#main h2 {
		font-size: 36px;
		font-weight: normal;
		margin-bottom: 20px;
	}
	#main .movieBox {
		margin-left: 0px;
	}
	#main .courseBox {
		margin-right: 0px;
	}
	#main .categoryBox ul li {
		background-color: #fff;
		width: calc(33% - 2px);
		margin-left: 2px;
	}
	#main .categoryBox ul li a .bg {
		-webkit-transition: opacity 0.3s ease-in;
		-moz-transition: opacity 0.3s ease-in;
		-o-transition: opacity 0.3s ease-in;
		transition: opacity  0.3s ease-in;
		opacity: 1;
	}
	#main .categoryBox ul li a span {
		margin-top: -10px;
		font-size: 20px;
	}
	#main .categoryBox ul li a:hover .bg {
		opacity: 0;
	}
	#main .categoryBox ul li.bed a:hover span {
		color: #337AC1;
	}
	#main .categoryBox li.futbol a:hover span {
		color: #339DC1;
	}
	#main .categoryBox li.gradu a:hover span {
		color: #33C1C1;
	}
	#main .categoryBox ul li.cutlery a:hover span {
		color: #C15733;
	}
	#main .categoryBox li.user a:hover span {
		color: #B20000;
	}
	#main .categoryBox li.users a:hover span {
		color: #C133C1;
	}
	#main .categoryBox li.hope a:hover span {
		color: #F08300;
	}
	#main .categoryBox li.tel a:hover span {
		color: #8FC31F;
	}

	#main .areaBox ul li {
		background-color: #fff;
		margin-bottom: 1px;
	}
	#main .areaBox ul li a .bg {
		background-color: #fff;
	}
	#main .areaBox ul li a .bg {
		-webkit-transition: opacity 0.3s ease-in;
		-moz-transition: opacity 0.3s ease-in;
		-o-transition: opacity 0.3s ease-in;
		transition: opacity  0.3s ease-in;
		opacity: 1;
	}
	#main .areaBox ul li a span {
		margin-top: -10px;
		font-size: 20px;
	}
	#main .areaBox ul li a:hover .bg {
		opacity: 0;
	}

	#main .areaBox ul li.aizu a:hover span {
		color: #8AE133;
	}
	#main .areaBox ul li.minamiaizu a:hover span {
		color: #7AC133;
	}
	#main .areaBox ul li.kenhoku a:hover span {
		color: #FFA953;
	}
	#main .areaBox ul li.kenchu a:hover span {
		color: #EE7700;
	}
	#main .areaBox ul li.kennan a:hover span {
		color: #D58433;
	}
	#main .areaBox ul li.sousou a:hover span {
		color: #33B5E1;
	}
	#main .areaBox ul li.iwaki a:hover span {
		color: #339DC0;
	}


	#main .courseBox .photoBox img {
		width: 430px;
	}


	#main .blockBox2 .btnMore a {
		padding: 0px;
		text-align: center;
		text-decoration: none;
		outline: none;
		position: relative;
		z-index: 2;
		background-color: #fff;
		border: 2px solid #64B432;
		color: #64B432;
		line-height: 38px;
		overflow: hidden;
	}
	#main .blockBox2 .btnMore a::before,
	#main .blockBox2 .btnMore a::after {
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
	}
	#main .blockBox2 .btnMore a,
	#main .blockBox2 .btnMore a::before,
	#main .blockBox2 .btnMore a::after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all .3s;
		transition: all .3s;
	}
	#main .blockBox2 .btnMore a:hover {
		color: #fff;
		font-weight: bold;
	}
	#main .blockBox2 .btnMore a::after {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-transform: scale(.5);
		transform: scale(.5);
	}
	#main .blockBox2 .btnMore a:hover::after {
		background: #64B432;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	#main .newsBox ul li a:hover {
		background-color: #ffe;
	}
	.textLeft p {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}