@charset "utf-8";


.frontpage {
}

/*************************************************************************************
**************************************************************************************

wrapper

**************************************************************************************
**************************************************************************************/
.wrapper {
	position: relative;
	height:100%;
	max-width:1000px;
	width:100%;
	margin:0 auto;
}

.vertical {
}

@media only screen and (min-width: 769px){
	.home .vertical {
		text-align:center;
		width:100%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.panel:not(.home):not(.panel6)  .vertical {
		text-align:center;
		width:100%;
		position: absolute;
		top: 100%;
		transform: translateY(-100%);
	}

}

@media only screen and (max-width: 768px){
	.home .vertical {
		text-align:center;
		width:100%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.vertical {
	}
}

/*************************************************************************************
**************************************************************************************

fullpage

**************************************************************************************
**************************************************************************************/
.panel {
}

/*各セクション*/
.home {
}

.panel1 {
}

.panel2 {
}

.panel3 {
}

.panel4 {
}

.panel5 {
}

.panel6 {
}

.flexContainer {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

/*pagination*/
.pagination {
	position:fixed;
	top: 50%;
	transform: translateY(-50%);

	font-size:1.4em;
	z-index: 10;
}

@media only screen and (min-width: 1001px){
	.pagination {
		right:20px;
	}
}

@media only screen and (max-width: 1000px){
	.pagination {
		right:5px;
	}
}

@media only screen and (max-width: 768px){
	.pagination {
		display:none;
	}
}

.pagination a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:white;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}

.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:7px;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:'';
	position: absolute;
	margin:auto;
	top:0;
	right:4px;
	bottom:0;
}

.adjuster {
	width: 100%;
	height:100%;
}

.leftPart {
	width:50%;
}

.rightPart {
	width:50%;
}

@media only screen and (max-width: 768px){
	.leftPart {
		width:100%;
	}

	.rightPart {
		width:100%;
	}
}


.over {
}

.under {
}

/*************************************************************************************
**************************************************************************************

mainVisual

**************************************************************************************
**************************************************************************************/
#mainVisual {
	width:100%;
	/*background-image:url(../img/mainvisual.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;*/
	height:100vh;
	position:relative;
}

#bg-video{
	position: fixed;
	center: 0;
	center: 0;

	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background: url(../img/poster.jpg) no-repeat;
	background-size: cover;
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	#mainVisual {
		width:100%;
		height:100vh;
		position:relative;
	}

	#bg-video{
		position: fixed;
		right: -500px;
		center: 0;

		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		z-index: -100;
		background: url(../img/poster.jpg) no-repeat;
		background-size: cover;
	}
}

/*静止画に置き換える場合*/
@media only screen and (max-width: 768px){
	#mainVisual {
		background-image:url(../img/mainvisual.jpg);
		background-position:center center;
		background-repeat:no-repeat;
		background-size:cover;
	}

	#bg-video {
		display:none;
	}
}

/*全デバイス動画対応にするときは、デバイスごとに位置を調節*/
/*
@media only screen and (min-width: 1001px) {
#mainVisual {
}

#bg-video{
center: 0;
center: 0;
}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
#mainVisual {
}

#bg-video{
center: 0;
right: 0;
}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
#mainVisual {
}

#bg-video{
center: 0;
right: 0;
}
}

@media only screen and (max-width: 640px){
#mainVisual {
}

#bg-video{
left: -300px;
center: 0;
}
}
*/

#mainVisual .wrapper{
	z-index: 2; /*videoの下にならないように重ね順を指定*/
}

#mainVisual ul {
	width:100%;
	margin:0 auto 40px;
	text-align:center;
	display: table;
	border-collapse: separate;  /* セルの間隔を空ける */
	border-spacing: 0 0;  /* 左右 上下で記述 */
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	#mainVisual ul {
		padding:0 8%;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	#mainVisual ul {
		padding:0 10%;
	}

	@media screen and (orientation:landscape){
		#mainVisual ul {
			padding:0 20%;
			margin:0 auto 20px;
		}
	}
}
/*min-width: 641px〜max-width: 768pxここまで*/

@media only screen and (max-width: 640px){
	#mainVisual ul {
		padding:0 10%;
	}
}

#mainVisual ul li {
	display: table-cell;
	vertical-align: middle;
	text-align:center;
}

#mainVisual ul li#nav05 {
	letter-spacing: 0.02em;
}

@media only screen and (min-width: 1001px){
	#mainVisual ul li {
		font-size:2.2rem;
		line-height:1.0;
		letter-spacing:0.1em;
	}
}


@media only screen and (min-width: 769px)and (max-width: 1000px){
	#mainVisual ul li {
		font-size:1.7rem;
		line-height:1.0;
		letter-spacing:0.1em;
	}
}

@media only screen and (min-width: 641px)and (max-width: 768px){
	#mainVisual ul li {
		font-size:1.7rem;
		line-height:1.0;
		letter-spacing:0.1em;
	}

	@media screen and (orientation:landscape){
		#mainVisual ul li {
			font-size:1.4rem;
			line-height:1.0;
			letter-spacing:0.1em;
		}
	}
}
/*min-width: 641px〜max-width: 768pxここまで*/

@media only screen and (min-width: 501px)and (max-width: 640px){
	#mainVisual ul li {
		font-size:1.4rem;
		line-height:1.0;
		letter-spacing:0.1em;
	}
}

@media only screen and (max-width: 500px){
	#mainVisual ul li {
		font-size:1.2rem;
		line-height:1.0;
		letter-spacing:0.1em;
	}
}

#mainVisual ul li span {
	border-right:#FFF solid 1px;
	display:block;
}

#mainVisual ul li:last-child span {
	border-right:none;
}

#mainVisual ul li a {
	display:block;
	color:#FFF;
	background-position:top center;
	background-repeat:no-repeat;
}

@media only screen and (min-width: 1001px){
	#mainVisual ul li a {
		padding-top:175px;
		background-size:150px 150px;
	}
}

@media only screen and (max-width: 1000px){
	#mainVisual ul li a {
		padding-top:100%;
		background-size:90% auto;
	}
}

#mainVisual ul li a:hover {
}

#mainVisual ul li#nav01 a {
	background-image:url(../img/home_nav01.png);
}

#mainVisual ul li#nav01 a:hover {
	background-image:url(../img/home_nav01_hover.png);
}

#mainVisual ul li#nav02 a {
	background-image:url(../img/home_nav02.png);
}

#mainVisual ul li#nav02 a:hover {
	background-image:url(../img/home_nav02_hover.png);
}

#mainVisual ul li#nav03 a {
	background-image:url(../img/home_nav03.png);
}

#mainVisual ul li#nav03 a:hover {
	background-image:url(../img/home_nav03_hover.png);
}

#mainVisual ul li#nav04 a {
	background-image:url(../img/home_nav04.png);
}

#mainVisual ul li#nav04 a:hover {
	background-image:url(../img/home_nav04_hover.png);
}

#mainVisual ul li#nav05 a {
	background-image:url(../img/home_nav05.png);
}

#mainVisual ul li#nav05 a:hover {
	background-image:url(../img/home_nav05_hover.png);
}

/* toppage-キャッチコピー */

#mainVisual p {
	color:#FFF;
}

@media only screen and (min-width: 1001px){
	#mainVisual p {
		font-size:4rem;
		letter-spacing:0.2em;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	#mainVisual p {
		padding:0 8%;
		font-size:3rem;
		letter-spacing:0.15em;
		text-align:center;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	#mainVisual p {
		padding:0 8%;
		font-size:2rem;
		letter-spacing:0.1em;
		text-align:center;
	}

	@media screen and (orientation:landscape){
		#mainVisual p {
			padding:0 20%;
			font-size:2rem;
			letter-spacing:0.1em;
			text-align:center;
		}
	}
}
/*min-width: 641px〜max-width: 768pxここまで*/

@media only screen and (max-width: 640px){
	#mainVisual p {
		padding:0 10%;
		font-size:1.5rem;
		letter-spacing:0.1em;
		text-align:center;
	}
}

/* toppage-キャッチコピー文 */

#mainVisual span {
	color:#FFF;
}
@media only screen and (min-width: 1001px){
	#mainVisual .catch  {
	padding: 0% 20% 0% 19%;
	}
}

@media only screen and (min-width: 1001px){
	#mainVisual .catch span {
		font-size:1.5rem;
		letter-spacing:0.1em;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	#mainVisual .catch span {
		font-size:1.1rem;
		letter-spacing:0.1em;
		text-align:center;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	#mainVisual .catch  {
	padding: 0% 25% 0% 25%;
	}
}
@media only screen and (min-width: 641px) and (max-width: 768px){
	#mainVisual　.catch span {
		font-size:0.5rem;
		letter-spacing:0.1em;
		text-align:center;
	}
	}
	@media only screen and (min-width: 641px) and (max-width: 768px){
		#mainVisual .catch  {
		padding: 0% 29% 0% 29%;
		}
	}


/*min-width: 641px〜max-width: 768pxここまで*/

@media only screen and (max-width: 640px){
	#mainVisual .catch span {

		font-size:0.5rem;
		letter-spacing:0.1em;
		text-align:center;
	}
}
@media only screen and (max-width: 640px){
	#mainVisual .catch  {
	padding: 0% 10% 0% 10%;
	}
}
/* toppage-キャッチコピー文 */

#mainVisual #scroll {
	animation: 0.7s ease-in-out 0s alternate none infinite running bound;
	-webkit-animation: 0.7s ease-in-out 0s alternate none infinite running bound;

	animation-name: bound ;/*IE10はショートハンドに反応せず*/
	animation-duration: 0.7s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-direction: alternate;
	animation-fill-mode: none;
	animation-iteration-count : infinite;
	animation-play-state: running;

	text-align: center;
	position: absolute;
	overflow: hidden;
	z-index: 10;
	color:#FFF;
}


@media only screen and (min-width: 1001px){
	#mainVisual #scroll {
		width: 45px;
		height: 48px;
		bottom: 40px;
		left: 50%;
		transform: translate(-50%, -40px);
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	#mainVisual #scroll {
		width: 36px;
		height: 42px;
		bottom: 40px;
		left: 50%;
		transform: translate(-50%, -40px);
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	#mainVisual #scroll {
		width: 30px;
		height: 35px;
		bottom: 40px;
		left: 50%;
		transform: translate(-50%, -40px);
	}

	@media screen and (orientation:landscape){
		#mainVisual #scroll {
			bottom: 5px;
			left: 50%;
			transform: translate(-50%, -5px);
		}
	}
}
/*min-width: 641px〜max-width: 768pxここまで*/

@media only screen and (max-width: 640px){
	#mainVisual #scroll {
		width: 28px;
		height: 32px;
		bottom: 20px;
		left: 50%;
		transform: translate(-50%, -20px);
	}
}

#mainVisual #scroll a {
	color:#FFF;
	display: block;
	height: auto;
}

#mainVisual #scroll a::before {
	content:"\f107";
	font-family: "FontAwesome";
	line-height: 1;
	text-transform: none;
	display:block;
	font-weight:normal;
}

@media only screen and (min-width: 1001px) {
	#mainVisual #scroll a::before {
		font-size:7.0rem;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	#mainVisual #scroll a::before {
		font-size:6.0rem;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	#mainVisual #scroll a::before {
		font-size:5.0rem;
	}
}

@media only screen and (max-width: 641px){
	#mainVisual #scroll a::before {
		font-size:4.5rem;
	}
}

#mainVisual #scroll a:hover::before {
	color:#ED6260;
}

@keyframes bound {
	0% {
		bottom: 40px;
	}
	100% {
		bottom: 20px;
	}
}


/***********************************************
************************************************

panel1

************************************************
************************************************/
.panel1 {
	background-color:#FFF;
}

.panel1 .vertical {
}

.panel1 .adjuster {
}

@media only screen and (min-width: 769px){
	.panel1 .adjuster {
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #ededed 50%, #ededed 100%, #ededed 100%),-moz-linear-gradient(left, #D6D084 0%, #D6D084 50%, #FFF 50%, #FFF 100%, #FFF 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#ededed 50%,#ededed 100%,#ededed 100%),-webkit-linear-gradient(left, #D6D084 0%,#D6D084 50%,#FFF 50%,#FFF 100%,#FFF 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, #ffffff 0%,#ffffff 50%,#ededed 50%,#ededed 100%,#ededed 100%),linear-gradient(to right, #D6D084 0%,#D6D084 50%,#FFF 50%,#FFF 100%,#FFF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=1 ), progid:DXImageTransform.Microsoft.gradient( startColorstr='#D6D084', endColorstr='#FFF',GradientType=1 ); /* IE6-9 */

		background-size: 100% 50%;
		background-position: center top, center bottom;
		background-repeat: no-repeat;
	}
}

@media only screen and (max-width: 768px){
	.panel1 .adjuster {
		position:relative;
	}
}

.panel1 .flexContainer {
}

@media only screen and (max-width: 768px){
	.panel1 .flexContainer {
		flex-direction: column;
	}
}

.panel1 h2 {
}

@media only screen and (min-width: 1001px) {
	.panel1 h2 {
		margin-bottom:20px;
	}

	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize h2,
	.panel1 .rightPart .under.mysize h2 {
		margin-bottom:5px;
		line-height:1.5;
	}
}

@media only screen and (min-width: 641px) and (max-width: 1000px){
	.panel1 h2 {
		margin-bottom:10px;
	}
	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize h2,
	.panel1 .rightPart .under.mysize h2 {
		margin-bottom:0px;
		line-height:1.5;
	}
}

@media only screen and (max-width: 640px){
	.panel1 h2 {
		margin-bottom:20px;
	}
}

.panel1 h2 span {
	vertical-align:baseline;
	display:inline-block;
}

.panel1 h2 span.en {
}

@media only screen and (min-width: 1001px) {
	.panel1 h2 span.en {
		font-size:1.6rem;
	}
	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize h2 span.en,
	.panel1 .rightPart .under.mysize h2 span.en {
		font-size:1.3rem;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel1 h2 span.en {
		font-size:1.5rem;
	}
	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize h2 span.en,
	.panel1 .rightPart .under.mysize h2 span.en {
		font-size:1.3rem;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	.panel1 h2 span.en {
		font-size:1.4rem;
	}
}

@media only screen and (min-width: 381px) and (max-width: 640px){
	.panel1 h2 span.en {
		font-size:1.3rem;
	}
}

@media only screen and (max-width: 380px){
	.panel1 h2 span.en {
		font-size:1.2rem;
	}
}

.panel1 h2 span.jp {
}

@media only screen and (min-width: 1001px) {
	.panel1 h2 span.jp {
		font-size:2.2rem;
		padding-right:15px;
	}
	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize h2 span.jp,
	.panel1 .rightPart .under.mysize h2 span.jp {
		font-size:1.7rem;
		padding-right:5px;
	}
}

@media only screen and (min-width: 641px) and (max-width: 1000px){
	.panel1 h2 span.jp {
		font-size:2.0rem;
		padding-right:10px;
	}
	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize h2 span.jp,
	.panel1 .rightPart .under.mysize h2 span.jp {
		font-size:1.7rem;
		padding-right:5px;
	}
}

@media only screen and (max-width: 640px){
	.panel1 h2 span.jp {
		font-size:1.8rem;
		padding-right:10px;
	}
}

@media only screen and (min-width: 381px) and (max-width: 640px){
	.panel1 h2 span.jp {
		font-size:1.6rem;
		padding-right:10px;
	}
}

@media only screen and (max-width: 380px){
	.panel1 h2 span.jp {
		font-size:1.4rem;
		padding-right:10px;
	}
}

/***********************

leftPart

***********************/
.panel1 .leftPart {
	text-align:left;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction: column;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content: center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items: center;

}

@media only screen and (min-width: 769px){
	/* 高さが取得できないと背景色がずれる*/
	.panel1 .leftPart {
		/*min-height:100vh;*/
	}
}

@media only screen and (max-width: 768px){
	.panel1 .leftPart {
	}
}

/*---------------------
over
-----------------------*/
.panel1 .leftPart .over {
	width:100%;
	position:relative;
	background-image:url(../img/frontpage_panel01_leftpart_img_02.png);
	background-repeat:no-repeat;
}

@media only screen and (min-width: 1001px){
	.panel1 .leftPart .over {
		background-size:contain;
		background-position:center bottom;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel1 .leftPart .over {
		background-size:contain;
		background-position:center bottom;
	}
}

@media only screen and (min-width:401px) and (max-width: 768px){
	.panel1 .leftPart .over {
		height:auto;
		/*min-height:350px;*/
		height:350px;/*flexとmin-height併用でIE10が崩れる*/
		background-size:50% auto;
		background-position:center top 30px;
	}
}

@media only screen and (max-width: 400px){
	.panel1 .leftPart .over {
		height:auto;
		/*min-height:250px;*/
		height:250px;/*flexとmin-height併用でIE10が崩れる*/
		background-size:50% auto;
		background-position:center top 30px;
	}
}

/*---------------------
under
-----------------------*/
.panel1 .leftPart .under {
	width:100%;
}

@media only screen and (min-width: 769px){
	.panel1 .leftPart .under {
		position:relative;
	}
}

@media only screen and (max-width: 768px){
	.panel1 .leftPart .under {
		height:auto;
		background-color:#D6D084;
	}
}

.panel1 .leftPart .under .box {
	width:90%;
}

@media only screen and (min-width: 1001px){
	.panel1 .leftPart .under .box {
		width:90%;
		height: auto;
		position:absolute;
		top: 50%;
		left: 0%;
		transform: translate(0%, -50%);
	}

	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize .box {
		width:98%;
		height: 250px;
		position:absolute;
		top: 50%;
		left: 0%;
		transform: translate(0%, -50%);
	}
}

@media only screen and (min-width: 769px)and (max-width: 1000px){
	.panel1 .leftPart .under .box {
		width:90%;
		position:absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize .box {
		width:98%;
		position:absolute;
		top: 50%;
		left: 0%;
		transform: translate(0%, -50%);
	}
}

@media only screen and (max-width: 768px){
	.panel1 .leftPart .under .box {
		width:100%;
		padding:30px 3%;
	}

	.panel1 .leftPart .under.mysize .box {
	}
}

.panel1 .leftPart .under .box ul {
	padding-left:10px;
}

@media only screen and (min-width: 1001px){
	.panel1 .leftPart .under .box ul {
		margin-bottom:5px;
	}

	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize .box ul {
		margin-bottom:3px;
	}
}

@media only screen and (min-width: 641px)and (max-width: 1000px){
	.panel1 .leftPart .under .box ul {
		margin-bottom:5px;
	}
	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize .box ul {
		margin-bottom:3px;
	}
}

@media only screen and (max-width: 640px){
	.panel1 .leftPart .under ul {
		margin-bottom:5px;
	}
}

.panel1 .leftPart .under .box li {
	color:#336699;
}

@media only screen and (min-width: 1001px){
	.panel1 .leftPart .under .box li {
		font-size:1.6rem;
	}

	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize .box li {
		font-size:1.4rem;
	}
}

@media only screen and (min-width: 641px)and (max-width: 1000px){
	.panel1 .leftPart .under .box li {
	}

	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize .box li {
		font-size:1.3rem;
	}
}

.panel1 .leftPart .under .box li::before {
	position: relative;
	top: -4px;
	left: -10px;

	display: inline-block;
	width: 3px;
	height: 3px;
	content: '';

	border-radius: 100%;
	background-color: #336699;
}

.panel1 .leftPart .under .box p {
	padding:15px;
	background-color:#EFECCE;
	border-radius:8px;
	-webkit-border-radius:8px;
}

@media only screen and (min-width: 1001px) {
	.panel1 .leftPart .under .box p {
		padding:10px;
	}
	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize .box p {
		font-size:1.2rem;
		padding:10px;
		line-height:1.6;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel1 .leftPart .under .box p {
		font-size:1.3rem;
		padding:5px;
	}
	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize .box p {
		font-size:1.2rem;
		padding:10px;
		line-height:1.6;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	.panel1 .leftPart .under .box p {
		font-size:1.2rem;
		padding:10px;
	}
}

@media only screen and (max-width: 640px){
	.panel1 .leftPart .under .box p {
	}
}

.panel1 .leftPart .under .box .next {
	text-align:right;
}

.panel1 .leftPart .under .box .next a {
	display:inline-block;
	text-align:center;
	border:#999 solid 1px;
}

@media only screen and (min-width: 1001px){
	.panel1 .leftPart .under .box .next a {
		margin-top:10px;
		width:40%;
		line-height:40px;
	}

	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize .box .next a {
		margin-top:5px;
		width:40%;
		line-height:30px;
		font-size:1.2rem;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel1 .leftPart .under .box .next a {
		margin-top:5px;
		width:40%;
		line-height:35px;
		font-size:1.3rem;
	}
	/*windowheight700px以下*/
	.panel1 .leftPart .under.mysize .box .next a {
		margin-top:10px;
		width:40%;
		line-height:30px;
		font-size:1.2rem;
	}
}

@media only screen and (max-width: 768px){
	.panel1 .leftPart .under .box .next a {
		margin-top:10px;
		width:40%;
		height:40px;
		line-height:40px;
	}
}

.panel1 .leftPart .under .box .next a:hover {
	border:#CCC solid 1px;
	background-color:#CCC;
	color:#333;
}

.panel1 .leftPart .under .box .next a span::after {
	content:"\f0da";
	font-family: "FontAwesome";
	line-height: 1;
	margin-left: 5px;
	text-transform: none;
}


/***********************

rightPart

***********************/
.panel1 .rightPart {
	text-align:left;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction: column;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content: center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items: center;

}

@media only screen and (min-width: 769px){
	/* 高さが取得できないと背景色がずれる*/
	.panel1 .rightPart {
		/*min-height:100vh;*/
	}
}

@media only screen and (max-width: 768px){
	.panel1 .rightPart {
	}
}

/*---------------------
over
-----------------------*/
.panel1 .rightPart .over {
	width:100%;
	position:relative;

	background-image:url(../img/frontpage_panel01_rightpart_img_002.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:60% auto;
}



@media only screen and (min-width: 1001px){
	.panel1 .rightPart .over {
		background-size:45% auto;
		background-position:center center;
	}
	/*windowheight700px以下*/
	.panel1 .rightPart .over.mysize {
		background-size:25% auto;
		background-position:center center;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel1 .rightPart .over {
		background-size:45% auto;
		background-position:center center;
	}
	/*windowheight700px以下*/
	.panel1 .rightPart .over.mysize {
		background-size:25% auto;
		background-position:center center;
	}
}

@media only screen and (min-width:401px) and (max-width: 768px){
	.panel1 .rightPart .over {
		background-color:#ededed;
		background-position:center center;
		background-size:30% auto;
		min-height:300px;
	}
}

@media only screen and (max-width: 400px){
	.panel1 .rightPart .over {
		background-color:#ededed;
		background-position:center center;
		background-size:40% auto;
		min-height:250px;
	}
}


.panel1 .rightPart .over p {
	width:100%;
	position:absolute;
	bottom: 0%;
	left: 0%;
	transform: translate(0%, 0%);

	background-color: unset;
	text-align:center;
}

@media only screen and (min-width: 1001px){
	.panel1 .rightPart .over p {
		font-size:2.3rem;
		height:80px;
		line-height:80px;
	}

	/*windowheight700px以下*/
	.panel1 .rightPart .over p {
		font-size:1.4rem;
		height:60px;
		line-height:60px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel1 .rightPart .over p {
		font-size:1.4rem;
		height:70px;
		line-height:70px;
	}

	/*windowheight700px以下*/
	.panel1 .rightPart .over .mysize p {
		font-size:1.4rem;
		height:60px;
		line-height:60px;
	}
}

@media only screen and (max-width: 768px){
	.panel1 .rightPart .over p {
		z-index:1000;
		font-size:1.3rem;
		height:60px;
		line-height:60px;
	}
}

.panel1 .rightPart .over p a {
	color:#20b2aa;
	padding-top:100%;
}

.panel1 .rightPart .over p a:hover {
	color:#ff7272;
}

/*---------------------
under
-----------------------*/
.panel1 .rightPart .under {
	width:100%;
	position:relative;
}

@media only screen and (min-width: 769px){
	.panel1 .rightPart .under {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width:401px) and (max-width: 768px){
	.panel1 .rightPart .under {
		min-height:300px;
	}
}

@media only screen and (max-width: 400px){
	.panel1 .rightPart .under {
		min-height:250px;
	}
}

.panel1 .rightPart .under h2 {
}

@media only screen and (min-width: 769px){
	.panel1 .rightPart .under h2 {
		margin-bottom: 10px;
	}
}

@media only screen and (max-width: 768px){
	.panel1 .rightPart .under h2 {
		margin-bottom: 15px;
	}
}
.panel1 .rightPart .under .box {
}

@media only screen and (min-width: 1001px) {
	.panel1 .rightPart .under .box {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
	}

	/*windowheight700px以下*/
	.panel1 .rightPart .under.mysize .box {
		position:absolute;
		top: 50%;
		left: 0%;
		transform: translate(0%, -50%);
		width:98%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel1 .rightPart .under .box {
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
	}
	/*windowheight700px以下*/
	.panel1 .rightPart .under.mysize .box {
		position:absolute;
		top: 50%;
		left: 0%;
		transform: translate(0%, -50%);
		width:98%;
	}
}

@media only screen and (max-width: 768px){
	.panel1 .rightPart .under .box {
		width:100%;
		padding:30px 3% 0;
	}
}

.newsFrame {
	position: relative;
	width: 100%;
}

@media only screen and (min-width: 769px){
	.newsFrame {
		width:100%;
		/*height: 350px;*//*heightはjsで取得*/
		overflow:auto;
		-webkit-overflow-scrolling:touch;
		display: inline-block;/*２重スクロールへの対処*/
		/*margin: 10px;*//*なんでマージンを取る必要があるのかよく分からないのでオフる*/
	}

	.newsFrame iframe {
		width:100%;
		height:100%;
		border:none;
		display:block;
		background-color:#FBFBFB;
	}
}

@media only screen and (max-width: 768px){
	.newsFrame {
		height: 300px;
		width: 100%;
		padding: 10px;
	}

	/*ios用*/
	.newsFrame{overflow-y:scroll;}
	.newsFrame::-webkit-scrollbar{height:10px;}/*バーの太さ*/
	.newsFrame::-webkit-scrollbar-track{background:#dddddd;}/*バーの背景色*/
	.newsFrame::-webkit-scrollbar-thumb{background:#2cc2e4;}/*バーの色*/
	.newsFrame::-webkit-scrollbar{width:10px;}/*バーの太さ*/

	.newsFrame iframe {
		width:100%;
		height:100%;
		border:none;
		background-color:#FBFBFB;
	}
}

.panel1 .rightPart .under .box .next {
	text-align:right;
}

.panel1 .rightPart .under .box .next a {
	display:inline-block;
	text-align:center;
	border:#999 solid 1px;
}

@media only screen and (min-width: 1001px){
	.panel1 .rightPart .under .box .next a {
		margin-top:30px;
		width:40%;
		line-height:40px;
	}
	/*windowheight700px以下*/
	.panel1 .rightPart .under.mysize .box .next a {
		margin-top:10px;
		width:40%;
		line-height:30px;
		font-size:1.2rem;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel1 .rightPart .under .box .next a {
		margin-top:20px;
		width:40%;
		line-height:35px;
		font-size:1.3rem;
	}
	/*windowheight700px以下*/
	.panel1 .rightPart .under.mysize .box .next a {
		margin-top:10px;
		width:40%;
		line-height:30px;
		font-size:1.2rem;
	}
}

@media only screen and (max-width: 768px){
	.panel1 .rightPart .under .box .next a {
		margin-top:30px;
		width:40%;
		height:40px;
		line-height:40px;
	}
}

.panel1 .rightPart .under .next a:hover {
	border:#CCC solid 1px;
	background-color:#CCC;
	color:#333;
}

.panel1 .rightPart .under .next a span::after {
	content:"\f0da";
	font-family: "FontAwesome";
	line-height: 1;
	margin-left: 5px;
	text-transform: none;
}


/***********************************************
************************************************

panel2

************************************************
************************************************/
.panel2 {
	background-color:#FFF;
}

.panel2 .vertical {
}

.panel2 .adjuster {
}

@media only screen and (min-width: 769px){
	.panel2 .adjuster {
		background: #ffffff;
		background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #EDE6DB 50%, #EDE6DB 100%, #EDE6DB 100%),-moz-linear-gradient(left, #EDE6DB 0%, #EDE6DB 50%, #FFF 50%, #FFF 100%, #FFF 100%);
		background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#EDE6DB 50%,#EDE6DB 100%,#EDE6DB 100%),-webkit-linear-gradient(left, #EDE6DB 0%,#EDE6DB 50%,#FFF 50%,#FFF 100%,#FFF 100%);
		background: linear-gradient(to right, #ffffff 0%,#ffffff 50%,#EDE6DB 50%,#EDE6DB 100%,#EDE6DB 100%),linear-gradient(to right, #EDE6DB 0%,#EDE6DB 50%,#FFF 50%,#FFF 100%,#FFF 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#EDE6DB',GradientType=1 ), progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDE6DB', endColorstr='#FFF',GradientType=1 );

		background-size: 100% 50%;
		background-position: center top, center bottom;
		background-repeat: no-repeat;
	}
}

@media only screen and (max-width: 768px){
	.panel2 .adjuster {
		position:relative;
	}
}

.panel2 .flexContainer {
}

@media only screen and (max-width: 768px){
	.panel2 .flexContainer {
		flex-direction: column;
	}
}

.panel2 h2 {
}

@media only screen and (min-width: 1001px) {
	.panel2 h2 {
		margin-bottom:20px;
	}

	/*windowheight700px以下*/
	.panel2 .rightPart .over.mysize h2 {
		margin-bottom:0px;
		line-height:1.5;
	}
}

@media only screen and (min-width: 641px) and (max-width: 1000px){
	.panel2 h2 {
		margin-bottom:10px;
	}
	/*windowheight700px以下*/
	.panel2 .rightPart .over.mysize h2 {
		margin-bottom:0px;
		line-height:1.5;
	}
}

@media only screen and (max-width: 640px){
	.panel2 h2 {
		margin-bottom:20px;
	}
}

.panel2 h2 span {
	vertical-align:baseline;
	display:inline-block;
}

.panel2 h2 span.en {
}

@media only screen and (min-width: 1001px) {
	.panel2 h2 span.en {
		font-size:1.6rem;
	}
	/*windowheight700px以下*/
	.panel2 .rightPart .over.mysize h2 span.en {
		font-size:1.3rem;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel2 h2 span.en {
		font-size:1.5rem;
	}
	/*windowheight700px以下*/
	.panel2 .rightPart .over.mysize h2 span.en {
		font-size:1.3rem;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	.panel2 h2 span.en {
		font-size:1.4rem;
	}
}

@media only screen and (min-width: 381px) and (max-width: 640px){
	.panel2 h2 span.en {
		font-size:1.3rem;
	}
}

@media only screen and (max-width: 380px){
	.panel2 h2 span.en {
		font-size:1.2rem;
	}
}

.panel2 h2 span.jp {
}

@media only screen and (min-width: 1001px) {
	.panel2 h2 span.jp {
		font-size:2.2rem;
		padding-right:15px;
	}
	/*windowheight700px以下*/
	.panel2 .rightPart .over.mysize h2 span.jp {
		font-size:1.7rem;
		padding-right:5px;
	}
}

@media only screen and (min-width: 641px) and (max-width: 1000px){
	.panel2 h2 span.jp {
		font-size:2.0rem;
		padding-right:10px;
	}
	/*windowheight700px以下*/
	.panel2 .rightPart .over.mysize h2 span.jp {
		font-size:1.7rem;
		padding-right:5px;
	}
}

@media only screen and (max-width: 640px){
	.panel2 h2 span.jp {
		font-size:1.8rem;
		padding-right:10px;
	}
}

@media only screen and (min-width: 381px) and (max-width: 640px){
	.panel2 h2 span.jp {
		font-size:1.6rem;
		padding-right:10px;
	}
}

@media only screen and (max-width: 380px){
	.panel2 h2 span.jp {
		font-size:1.4rem;
		padding-right:10px;
	}
}

/***********************

leftPart

***********************/
.panel2 .leftPart {
	text-align:left;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction: column;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content: center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items: center;
}

@media only screen and (min-width: 769px){
	/* 高さが取得できないと背景色がずれる*/
	.panel2 .leftPart {
		/*min-height:100vh;*/
	}
}

@media only screen and (max-width: 768px){
	.panel2 .leftPart {
	}
}

/*---------------------
over
-----------------------*/
.panel2 .leftPart .over {
	width:100%;
	position:relative;
}

@media only screen and (min-width: 769px){
	.panel2 .leftPart .over {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width:401px) and (max-width: 768px){
	.panel2 .leftPart .over {
		min-height:300px;
	}
}

@media only screen and (max-width: 400px){
	.panel2 .leftPart .over {
		min-height:250px;
	}
}

.panel2 .leftPart .over .box {
}

@media only screen and (min-width: 1001px){
	.panel2 .leftPart .over .box {
		width:90%;
		position:absolute;
		top: 50%;
		left: 0%;
		transform: translate(0%, -50%);
	}
	/*windowheight700px以下*/
	.panel2 .leftPart .over.mysize .box {
		width:98%;
		position:absolute;
		top: 50%;
		left: 0%;
		transform: translate(0%, -50%);
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel2 .leftPart .over .box {
		width:88%;
		position:absolute;
		top: 50%;
		left: 3%;
		transform: translate(3%, -50%);
	}
	/*windowheight700px以下*/
	.panel2 .leftPart .over.mysize .box {
		width:98%;
		position:absolute;
		top: 50%;
		left: 0%;
		transform: translate(0%, -50%);
	}
}

@media only screen and (max-width: 768px){
	.panel2 .leftPart .over .box {
		width:100%;
		padding:30px 3%;
	}
}

/********************************************************

動画の埋め込み

********************************************************/
.panel2 .leftPart .over .yt { /* 動画をレスポンシブ表示、無駄な余白出さないようにパディング設定 */
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

@media only screen and (min-width: 769px){
	.panel2 .leftPart .over.mysize .yt { /* 動画をレスポンシブ表示、無駄な余白出さないようにパディング設定 */
		max-height:160px;
		overflow:hidden;
		height:auto;
		padding-top: 38%;/*比率無視、とりあえず枠内におさめたい*/
	}
}

.panel2 .leftPart .over .yt iframe { /* 親要素内100%で動画を表示 */
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

.panel2 .leftPart .over .yt_video { /* 親要素内100%でサムネイル画像を表示 */
	position: absolute;
	width:100%;
	height:auto;
	top:0;
}

.panel2 .leftPart .over .yt_video img { /* 親要素内100%でサムネイル画像を表示 */
	width:100%;
	height:auto;
}

.panel2 .leftPart .over .yt_video::before { /* FontAwesomeで再生ボタンを画像上に。*/
	position: absolute;
	font-family: "FontAwesome";
	content: "\f16a";/*あるいはf04b*/
	font-weight:900;
	color: #fc0d1c;
	font-size: 70px;
	top: 50%;
	left: 50%;
	transform : translate(-50%,-50%);
	opacity: .90;
	transition:.5s;
	z-index:5000;
}

.panel2 .leftPart .over.mysize .yt_video::before { /* FontAwesomeで再生ボタンを画像上に。*/
	font-size: 50px;
	top: 38%;
	left: 50%;
	transform : translate(-38%,-50%);
}


.panel2 .leftPart .over .yt_video:hover::before {
	cursor: pointer;
}

.panel2 .leftPart .over .yt_video img:hover{ /* ホバー時にカーソルを変化させる */
	cursor: pointer;
	width:100%;
	height:auto;
	box-sizing: border-box;
}

.panel2 .leftPart .over .yt_video:hover::before { /* ホバー時アイコンの色変える */
	color:#32cd32;
	transition:.5s;
}

.panel2 .leftPart .over .yt + p {
}

@media only screen and (min-width: 1001px){
	.panel2 .leftPart .over .yt + p {
		margin:10px 0;
		font-size:1.4rem;
	}

	/*windowheight700px以下*/
	.panel2 .leftPart .over.mysize .box .yt + p {
		font-size:1.2rem;
		line-height:1.5;
	}

	/*はみ出して困る文字を省略*/
	.text-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 1.5;
	}

	.text-ellipsis.multiline {
		white-space: normal;
		max-height: 3em;
		position: relative;
	}

	.text-ellipsis.multiline::after {
		content: "…";
		position: absolute;
		display: block;
		bottom: 0;
		right: 0;
	}

	.text-ellipsis.line-2 {/*2行*/
		max-height: 3em;
	}

	.text-ellipsis.line-3 {/*3行*/
		max-height: 4.5em;
	}

}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel2 .leftPart .over .yt + p {
		margin:10px 0;
		font-size:1.3rem;
	}
	/*windowheight700px以下*/
	.panel2 .leftPart .over.mysize .box .yt + p {
		font-size:1.2rem;
		line-height:1.5;
	}
}

@media only screen and (max-width: 768px){
	.panel2 .leftPart .over .yt + p {
		margin-top:15px;
		font-size:1.2rem;
	}
}


.panel2 .leftPart .over .next {
	text-align:right;
}

.panel2 .leftPart .over .next a {
	display:inline-block;
	text-align:center;
	border:#999 solid 1px;
}

@media only screen and (min-width: 1001px){
	.panel2 .leftPart .over .next {
		background-image:url(../img/btn_bg_ocw_top.png);
		background-position:left center;
		background-repeat:no-repeat;
		background-size:auto 35px;
	}

	.panel2 .leftPart .over .next a {
		width:50%;
		line-height:35px;
		font-size:1.3rem;
	}

	/*windowheight700px以下*/
	.panel2 .leftPart .over.mysize .next {
		background-size:auto 30px;
	}

	.panel2 .leftPart .over.mysize .box .next a {
		width:60%;
		line-height:30px;
		font-size:1.2rem;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel2 .leftPart .over .next {
		background-image:url(../img/btn_bg_ocw_top.png);
		background-position:left center;
		background-repeat:no-repeat;
		background-size:auto 35px;
	}

	.panel2 .leftPart .over .next a {
		width:50%;
		line-height:35px;
		font-size:1.3rem;
	}
	/*windowheight700px以下*/
	.panel2 .leftPart .over.mysize .next {
		background-size:auto 30px;
	}

	.panel2 .leftPart .over.mysize .box .next a {
		width:50%;
		line-height:30px;
		font-size:1.2rem;
	}
}

@media only screen and (min-width: 401px) and (max-width: 768px){
	.panel2 .leftPart .over .next {
		margin-top:30px;
		background-image:url(../img/btn_bg_ocw_top.png);
		background-position:left center;
		background-repeat:no-repeat;
		background-size:auto 40px;
	}

	.panel2 .leftPart .over .next a {
		width:40%;
		height:40px;
		line-height:40px;
	}
}

@media only screen and (max-width: 400px){
	.panel2 .leftPart .over .next {
		background-image:url(../img/btn_bg_ocw_top.png);
		background-position:center top;
		background-repeat:no-repeat;
		background-size:100% auto;
		margin-top:30px;
		padding-top:25%;/*背景画像の縦/幅＝19%で余白ぴったりなので、余裕を持たせる*/
	}

	.panel2 .leftPart .over .next a {
		width:100%;
		height:40px;
		line-height:40px;
	}
}

.panel2 .leftPart .over .next a:hover {
	border:#CCC solid 1px;
	background-color:#CCC;
	color:#333;
}

.panel2 .leftPart .over .next a span::after {
	content:"\f0da";
	font-family: "FontAwesome";
	line-height: 1;
	margin-left: 5px;
	text-transform: none;
}

/*---------------------
under
-----------------------*/
.panel2 .leftPart .under {
	width:100%;

	background-image:url(../img/frontpage_panel02_leftpart_img.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:60% auto;
}

@media only screen and (min-width: 1001px){
	.panel2 .leftPart .under {
		background-size:auto 50%;
		background-position:center center;
		/*heightは、JSで取ってくる*/
	}

	/*windowheight700px以下*/
	.panel2 .leftPart .under.mysize {
		background-size:auto 50%;
		background-position:center center;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel2 .leftPart .under {
		background-size:auto 50%;
		background-position:center center;
		/*高さはJSで取ってくる*/
	}

	/*windowheight700px以下*/
	.panel2 .leftPart .under.mysize {
		background-size:auto 50%;
		background-position:center center;
	}
}

@media only screen and (min-width:401px) and (max-width: 768px){
	.panel2 .leftPart .under {
		background-color:#EDE6DB;
		background-position:center center;
		background-size:auto 200px;
		min-height:300px;
	}
}

@media only screen and (max-width: 400px){
	.panel2 .leftPart .under {
		background-color:#EDE6DB;
		background-position:center center;
		background-size:auto 150px;
		min-height:250px;
	}
}

/***********************

rightPart

***********************/
.panel2 .rightPart {
	text-align:left;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction: column;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content: center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items: center;
}

@media only screen and (min-width: 769px){
	/* 高さが取得できないと背景色がずれる*/
	.panel2 .rightPart {
		/*min-height:100vh;*/
	}
}

@media only screen and (max-width: 768px){
	.panel2 .rightPart {
	}
}

/*---------------------
over
-----------------------*/
.panel2 .rightPart .over {
	width:100%;
}

@media only screen and (min-width: 769px){
	.panel2 .rightPart .over {
		position:relative;
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width:401px) and (max-width: 768px){
	.panel2 .rightPart .over {
		min-height:300px;
	}
}

@media only screen and (max-width: 400px){
	.panel2 .rightPart .over {
		min-height:250px;
	}
}

.panel2 .rightPart .over .box {
}

@media only screen and (min-width: 1001px) {
	.panel2 .rightPart .over .box {
		width:90%;
		position:absolute;
		top: 50%;
		right: 0%;
		transform: translate(0%, -50%);
	}

	/*windowheight700px以下*/
	.panel2 .rightPart .over.mysize .box {
		width:90%;
		position:absolute;
		top: 50%;
		right: 0%;
		transform: translate(0%, -50%);
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel2 .rightPart .over .box {
		width:90%;
		position:absolute;
		top: 50%;
		right: 0%;
		transform: translate(0%, -50%);
	}

	/*windowheight700px以下*/
	.panel2 .rightPart .over.mysize .box {
		width:98%;
		position:absolute;
		top: 50%;
		right: 0%;
		transform: translate(0%, -50%);
	}
}

@media only screen and (max-width: 768px){
	.panel2 .rightPart .over .box {
		width:100%;
		padding:30px 3%;
	}
}

.panel2 .rightPart .over ul {
}

.panel2 .rightPart .over li {
}

@media only screen and (min-width: 1001px){
	.panel2 .rightPart .over li {
		font-size:2.2rem;
		padding-bottom:15px;
	}

	/*windowheight700px以下*/
	.panel2 .rightPart .over.mysize li {
		font-size:1.5rem;
		padding-bottom:3px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel2 .rightPart .over li {
		font-size:1.8rem;
		padding-bottom:10px;
	}
	/*windowheight700px以下*/
	.panel2 .rightPart .over.mysize li {
		font-size:1.5rem;
		padding-bottom:3px;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	.panel2 .rightPart .over li {
		font-size:1.5rem;
		padding-bottom:5px;
	}
}

@media only screen and (min-width: 381px) and (max-width: 640px){
	.panel2 .rightPart .over li {
		font-size:1.3rem;
		padding-bottom:5px;
	}
}

@media only screen and (max-width: 380px){
	.panel2 .rightPart .over li {
		font-size:1.2rem;
		padding-bottom:5px;
	}
}

.panel2 .rightPart .over li a {
	color:#0092B2;
}

.panel2 .rightPart .over li a:hover {
	color:#FF7272;
}

/*---------------------
under
-----------------------*/
.panel2 .rightPart .under {
	width:100%;
	position:relative;

	background-image:url(../img/frontpage_panel02_rightpart_img.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:auto 80%;
}

@media only screen and (min-width: 1001px){
	.panel2 .rightPart .under {
		/*heightは、JSで取ってくる*/
	}

	/*windowheight700px以下*/
	.panel2 .rightPart .under.mysize {
		/*heightは、JSで取ってくる*/
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel2 .rightPart .under {
		/*heightは、JSで取ってくる*/
	}

	/*windowheight700px以下*/
	.panel2 .rightPart .under.mysize {
		/*heightは、JSで取ってくる*/
	}
}

@media only screen and (min-width:401px) and (max-width: 768px){
	.panel2 .rightPart .under {
		background-color:#EDE6DB;
		min-height:300px;
	}
}

@media only screen and (max-width: 400px){
	.panel2 .rightPart .under {
		background-color:#EDE6DB;
		min-height:250px;
	}
}


/***********************************************
************************************************

panel3

************************************************
************************************************/
.panel3 {
	background-color:#FFF;
}

.panel3 .vertical {
}

.panel3 .adjuster {
}

@media only screen and (min-width: 769px){
	.panel3 .adjuster {
		background: #ffffff; /* Old browsers */
		background: -moz-linear-gradient(left, #0092B2 0%, #0092B2 50%, #EDEDED 50%, #EDEDED 100%, #EDEDED 100%),-moz-linear-gradient(left, #EDEDED 0%, #EDEDED 50%, #F2B2B7 50%, #F2B2B7 100%, #F2B2B7 100%);
		background: -webkit-linear-gradient(left, #0092B2 0%,#0092B2 50%,#EDEDED 50%,#EDEDED 100%,#EDEDED 100%),-webkit-linear-gradient(left, #EDEDED 0%,#EDEDED 50%,#F2B2B7 50%,#F2B2B7 100%,#F2B2B7 100%);
		background: linear-gradient(to right, #0092B2 0%,#0092B2 50%,#EDEDED 50%,#EDEDED 100%,#EDEDED 100%),linear-gradient(to right, #EDEDED 0%,#EDEDED 50%,#F2B2B7 50%,#F2B2B7 100%,#F2B2B7 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0092B2', endColorstr='#EDEDED',GradientType=1 ), progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDEDED', endColorstr='#F2B2B7',GradientType=1 );

		background-size: 100% 50%;
		background-position: center top, center bottom;
		background-repeat: no-repeat;
	}
}

@media only screen and (max-width: 768px){
	.panel3 .adjuster {
		position:relative;
	}
}

.panel3 .flexContainer {
}

@media only screen and (max-width: 768px){
	.panel3 .flexContainer {
		flex-direction: column;
	}
}

/***********************

leftPart

***********************/
.panel3 .leftPart {
	text-align:left;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction: column;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content: center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items: center;
}

@media only screen and (min-width: 769px){
	/* 高さが取得できないと背景色がずれる*/
	.panel3 .leftPart {
		/*min-height:100vh;*/
	}
}

@media only screen and (max-width: 768px){
	.panel3 .leftPart {
	}
}

/*---------------------
over
-----------------------*/
.panel3 .leftPart .over {
	width:100%;
	position:relative;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content: center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items: center;
}

@media only screen and (min-width: 769px){
	.panel3 .leftPart .over {
	}
}
@media only screen and (min-width:401px) and (max-width: 768px){
	.panel3 .leftPart .over {
		background-color:#0092b2;
		min-height:300px;
	}
}

@media only screen and (max-width: 400px){
	.panel3 .leftPart .over {
		background-color:#0092b2;
		min-height:250px;
	}
}

.panel3 .leftPart .over h2 {
	width:100%;
	color:#FFF;
	text-align:center;
	background-image:url(../img/frontpage_panel03_leftpart_over_img.png);
	background-repeat:no-repeat;
}

@media only screen and (min-width: 1001px){
	.panel3 .leftPart .over h2 {
		font-size:2.5rem;
		letter-spacing:0.1em;
		background-position:top center;
		background-size:160px 160px;
		padding-top:165px;
	}

	/*windowheight700px以下*/
	.panel3 .leftPart .over.mysize h2 {
		font-size:2.0rem;
		letter-spacing:0.1em;
		background-position:top center;
		background-size:100px 100px;
		padding-top:110px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel3 .leftPart .over h2 {
		font-size:2.5rem;
		letter-spacing:0.1em;
		background-position:top center;
		background-size:160px 160px;
		padding-top:165px;
	}

	/*windowheight700px以下*/
	.panel3 .leftPart .over.mysize h2 {
		font-size:2.0rem;
		letter-spacing:0.1em;
		background-position:top center;
		background-size:100px 100px;
		padding-top:110px;
	}
}

@media only screen and (max-width: 768px){
	.panel3 .leftPart .over h2 {
		font-size:1.7rem;
		letter-spacing:0.1em;
		background-position:center center;
		background-size:125px 125px;
		padding-top:160px;
	}
}

/*---------------------
under
-----------------------*/
.panel3 .leftPart .under {
	width:100%;
	position:relative;

	background-image:url(../img/frontpage_panel03_leftpart_under_img.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
}

@media only screen and (min-width: 769px){
	.panel3 .leftPart .under {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width:401px) and (max-width: 768px){
	.panel3 .leftPart .under {
		min-height:300px;
	}
}

@media only screen and (max-width: 400px){
	.panel3 .leftPart .under {
		min-height:250px;
	}
}

.panel3 .leftPart .under p {
	width:100%;
	position:absolute;
	bottom: 0%;
	left: 0%;
	transform: translate(0%, 0%);

	background-color:#EDEDED;
	text-align:center;
}

@media only screen and (min-width: 1001px){
	.panel3 .leftPart .under p {
		font-size:2.5rem;
		height:80px;
		line-height:80px;
	}

	/*windowheight700px以下*/
	.panel3 .leftPart .under.mysize p {
		font-size:1.8rem;
		height:60px;
		line-height:60px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel3 .leftPart .under p {
		font-size:1.8rem;
		height:70px;
		line-height:70px;
	}

	/*windowheight700px以下*/
	.panel3 .leftPart .under.mysize p {
		font-size:1.8rem;
		height:60px;
		line-height:60px;
	}
}

@media only screen and (max-width: 768px){
	.panel3 .leftPart .under p {
		z-index:1000;
		font-size:1.7rem;
		height:60px;
		line-height:60px;
	}
}

.panel3 .leftPart .under p a {
	color:#0092B2;
}

.panel3 .leftPart .under p a:hover {
	color:#ff7272;
}

/***********************

rightPart

***********************/
.panel3 .rightPart {
	text-align:left;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction: column;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content: center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items: center;
}

@media only screen and (min-width: 769px){
	/* 高さが取得できないと背景色がずれる*/
	.panel3 .rightPart {
		/*min-height:100vh;*/
	}
}

@media only screen and (max-width: 768px){
	.panel3 .rightPart {
	}
}

/*---------------------
over
-----------------------*/
.panel3 .rightPart .over {
	width:100%;
	position:relative;
}

@media only screen and (min-width: 769px){
	.panel3 .rightPart .over {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width:401px) and (max-width: 768px){
	.panel3 .rightPart .over {
		background-color:#0092b2;
		min-height:300px;
	}
}

@media only screen and (max-width: 400px){
	.panel3 .rightPart .over {
		background-color:#0092b2;
		min-height:250px;
	}
}

.panel3 .rightPart .over p {
	width:100%;
	position:absolute;
	top: 50%;
	right: 0%;
	transform: translate(0%, -50%);

	margin:0 0;
}

@media only screen and (min-width: 1001px){
	.panel3 .rightPart .over p {
		width:100%;
		position:absolute;
		top: 50%;
		right: 0%;
		transform: translate(0%, -50%);

		color:#0092B2;
		text-align:center;
		font-size:2.5rem;
	}

	/*windowheight700px以下*/
	.panel3 .rightPart .over.mysize p {
		width:100%;
		position:absolute;
		top: 50%;
		right: 0%;
		transform: translate(0%, -50%);

		color:#0092B2;
		text-align:center;
		font-size:1.8rem;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel3 .rightPart .over p {
		width:88%;
		position:absolute;
		top: 50%;
		right: 3%;
		transform: translate(-3%, -50%);

		color:#0092B2;
		text-align:left;
		font-size:1.8rem;
	}

	/*windowheight700px以下*/
	.panel3 .rightPart .over.mysize p {
		width:95%;
		position:absolute;
		top: 50%;
		right: 0%;
		transform: translate(0%, -50%);

		color:#0092B2;
		text-align:left;
		font-size:1.8rem;
	}
}

@media only screen and (max-width: 768px){
	.panel3 .rightPart .over p {
		width:100%;
		position:absolute;
		top: 50%;
		right: 0%;
		transform: translate(0%, -50%);

		color:#FFF;
		text-align:center;
		font-size:1.7rem;
	}
}

/*---------------------
under
-----------------------*/
.panel3 .rightPart .under {
	width:100%;

	position:relative;
	background-image:url(../img/frontpage_panel03_rightpart_under_img002.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
}

@media only screen and (min-width: 769px){
	.panel3 .rightPart .under {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width:401px) and (max-width: 768px){
	.panel3 .rightPart .under {
		min-height:300px;
	}
}

@media only screen and (max-width: 400px){
	.panel3 .rightPart .under {
		min-height:250px;
	}
}

.panel3 .rightPart .under p {
	width:100%;
	position:absolute;
	bottom: 0%;
	left: 0%;
	transform: translate(0%, 0%);

	background-color:#F2B2B7;
	text-align:center;
}

@media only screen and (min-width: 1001px){
	.panel3 .rightPart .under p {
		font-size:2.5rem;
		height:80px;
		line-height:80px;
	}

	/*windowheight700px以下*/
	.panel3 .rightPart .under.mysize p {
		font-size:1.8rem;
		height:60px;
		line-height:60px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel3 .rightPart .under p {
		font-size:1.8rem;
		height:70px;
		line-height:70px;
	}

	/*windowheight700px以下*/
	.panel3 .rightPart .under.mysize p {
		font-size:1.8rem;
		height:60px;
		line-height:60px;
	}
}

@media only screen and (max-width: 768px){
	.panel3 .rightPart .under p {
		z-index:1000;
		font-size:1.7rem;
		height:60px;
		line-height:60px;
	}
}

.panel3 .rightPart .under p a {
	color:#FFF;
}

.panel3 .rightPart .under p a:hover {
	color:#ff7272;
}

/***********************************************
************************************************

panel4

************************************************
************************************************/
.panel4 {
	background-color:#FFF;
}

.panel4 .vertical {
}

.panel4 .adjuster {
}

@media only screen and (min-width: 769px){
	.panel4 .adjuster {
		background: #ffffff;
		background: -moz-linear-gradient(left, #FFF 0%, #FFF 50%, #26A69A 50%, #26A69A 100%, #26A69A 100%),-moz-linear-gradient(left, #26A69A 0%, #26A69A 50%, #FFF 50%, #FFF 100%, #FFF 100%);
		background: -webkit-linear-gradient(left, #FFF 0%,#FFF 50%,#26A69A 50%,#26A69A 100%,#26A69A 100%),-webkit-linear-gradient(left, #26A69A 0%,#26A69A 50%,#FFF 50%,#FFF 100%,#FFF 100%);
		background: linear-gradient(to right, #FFF 0%,#FFF 50%,#26A69A 50%,#26A69A 100%,#26A69A 100%),linear-gradient(to right, #26A69A 0%,#26A69A 50%,#FFF 50%,#FFF 100%,#FFF 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#26A69A',GradientType=1 ), progid:DXImageTransform.Microsoft.gradient( startColorstr='#26A69A', endColorstr='#FFF',GradientType=1 );

		background-size: 100% 50%;
		background-position: center top, center bottom;
		background-repeat: no-repeat;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .adjuster {
		position:relative;
	}
}

.panel4 .flexContainer {
}

@media only screen and (max-width: 768px){
	.panel4 .flexContainer {
		flex-direction: column;
	}
}

.panel4 h2 {
	text-align:center;
}

@media only screen and (min-width: 1001px){
	.panel4 h2 {
		font-size:2.1rem;
		letter-spacing:0.1em;
		height:90px;
		line-height:90px;
	}

	/*windowheight700px以下*/
	.panel4 .leftPart .over.mysize h2,
	.panel4 .leftPart .under.mysize h2,
	.panel4 .rightPart .over.mysize h2,
	.panel4 .rightPart .under.mysize h2 {
		font-size:1.8rem;
		letter-spacing:0.1em;
		height:60px;
		line-height:60px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 h2 {
		font-size:1.6rem;
		letter-spacing:0.1em;
		height:60px;
		line-height:60px;
	}

	/*windowheight700px以下*/
	.panel4 .leftPart .over.mysize h2,
	.panel4 .leftPart .under.mysize h2,
	.panel4 .rightPart .over.mysize h2,
	.panel4 .rightPart .under.mysize h2 {
		font-size:1.6rem;
		letter-spacing:0.1em;
		height:60px;
		line-height:60px;
	}
}

@media only screen and (max-width: 768px){
	.panel4 h2 {
		text-align:left;
		font-size:1.5rem;
		letter-spacing:0.1em;
		height:60px;
		line-height:60px;
		padding-left:20px;
	}
}

/***********************

leftPart

***********************/
.panel4 .leftPart {
	text-align:right;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction: column;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content: center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items: center;
}

@media only screen and (min-width: 769px){
	/* 高さが取得できないと背景色がずれる*/
	.panel4 .leftPart {
		/*min-height:100vh;*/
	}
}

@media only screen and (max-width: 768px){
	.panel4 .leftPart {
	}
}

/*---------------------
over
-----------------------*/
.panel4 .leftPart .over {
	width:100%;
	position:relative;
}

@media only screen and (min-width: 769px){
	.panel4 .leftPart .over {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width: 401px) and (max-width: 768px){
	.panel4 .leftPart .over {
		/*min-height:300px;*/
		height:300px;/*min-heighが使えないIE用*/
	}
}

@media only screen and (max-width: 400px){
	.panel4 .leftPart .over {
		/*min-height:250px;*/
		height:250px;/*min-heighが使えないIE用*/
	}
}

.panel4 .leftPart .over .box {
	width:100%;
	height:100%;
	position:relative;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	background-image:url(../img/frontpage_panel04_leftpart_over_photo.png);
	background-repeat:no-repeat;
}

@media only screen and (min-width: 1001px){
	.panel4 .leftPart .over .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:reverse;
		-webkit-flex-direction:row-reverse;
		-ms-flex-direction:row-reverse;
		flex-direction:row-reverse;

		-webkit-box-align:end;
		-webkit-align-items:flex-end;
		-ms-flex-align:end;
		align-items:flex-end;

		-webkit-align-content:flex-end;
		-ms-flex-line-pack:end;
		align-content:flex-end;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;

		background-position:top 40px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel4 .leftPart .over.mysize .box {
		background-position:top 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .leftPart .over .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:reverse;
		-webkit-flex-direction:row-reverse;
		-ms-flex-direction:row-reverse;
		flex-direction:row-reverse;

		-webkit-box-align:end;
		-webkit-align-items:flex-end;
		-ms-flex-align:end;
		align-items:flex-end;

		-webkit-align-content:flex-end;
		-ms-flex-line-pack:end;
		align-content:flex-end;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;

		background-position:top 30px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel4 .leftPart .over.mysize .box {
		background-position:top 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .leftPart .over .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-align:end;
		-webkit-align-items:flex-end;
		-ms-flex-align:end;
		align-items:flex-end;

		-webkit-align-content:flex-end;
		-ms-flex-line-pack:end;
		align-content:flex-end;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	.panel4 .leftPart .over .box {
		background-position: center calc((100% - 60px) / 2);
		background-size:30% auto;
	}
}

@media only screen and (max-width: 640px){
	.panel4 .leftPart .over .box {
		background-position: center calc((100% - 60px) / 2);
		background-size:38% auto;
	}
}

.panel4 .leftPart .over .box h2 {
	color:#FFF;
	background-color:#26A69A;
}

@media only screen and (min-width: 1001px) {
	.panel4 .leftPart .over .box h2 {
		width:50%;
	}

	.panel4 .leftPart .over .box h2 a {
		color:#FFF;
		display:block;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .leftPart .over .box h2 {
		width:50%;
	}

	.panel4 .leftPart .over .box h2 a {
		color:#FFF;
		display:block;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .leftPart .over .box h2 {
		width:100%;

		background-image:url(../img/frontpage_panel04_leftpart_over_spbg.png);
		background-position:right 10px center;
		background-repeat:no-repeat;
		background-size:auto 70%;
	}

	.panel4 .leftPart .over .box h2 a {
		color:#FFF;
		display:block;
	}
}

.panel4 .leftPart .over .box ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:horizontal;
	-webkit-box-direction:reverse;
	-webkit-flex-direction:row-reverse;
	-ms-flex-direction:row-reverse;
	flex-direction:row-reverse;

	-webkit-box-pack:justify;
	-webkit-justify-content:space-between;
	-ms-flex-pack:justify;
	justify-content:space-between;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
}

@media only screen and (min-width: 1001px){
	.panel4 .leftPart .over .box ul {
		width:50%;
		height:90px;
		padding-right:5%;
	}

	/*windowheight700px以下*/
	.panel4 .leftPart .over.mysize .box ul {
		width:50%;
		height:60px;
		padding-right:5%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .leftPart .over .box ul {
		width:50%;
		height:75px;
		padding-right:5%;
	}

	/*windowheight700px以下*/
	.panel4 .leftPart .over.mysize .box ul {
		width:50%;
		height:60px;
		padding-right:5%;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .leftPart .over .box ul {
		display:none;
	}
}

.panel4 .leftPart .over .box li {
	width:30%;
}

/*windowheight700px以下*/
.panel4 .leftPart .over.mysize .box li {
	width:25%;
}

.panel4 .leftPart .over .box li img {
	width:100%;
	display:block;/*変な隙間が下に出来る*/
	line-height:0;
}

/*---------------------
under
-----------------------*/
.panel4 .leftPart .under {
	width:100%;
	position:relative;
}

@media only screen and (min-width: 769px){
	.panel4 .leftPart .under {
		/*heightは、JSで取ってくる*/
	}
}

@media only screen and (min-width: 401px) and (max-width: 768px){
	.panel4 .leftPart .under {
		/*min-height:300px;*/
		height:300px;/*min-heighが使えないIE用*/
	}
}

@media only screen and (max-width: 400px){
	.panel4 .leftPart .under {
		/*min-height:250px;*/
		height:250px;/*min-heighが使えないIE用*/
	}
}

.panel4 .leftPart .under .box {
	width:100%;
	height:100%;
	position:relative;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	background-image:url(../img/frontpage_panel04_leftpart_under_photo.png);
	background-repeat:no-repeat;
	background-position:bottom 50px center;
	background-size:50% auto;
}

@media only screen and (min-width: 1001px){
	.panel4 .leftPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:reverse;
		-webkit-flex-direction:row-reverse;
		-ms-flex-direction:row-reverse;
		flex-direction:row-reverse;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;

		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start;

		-webkit-align-content:center;
		-ms-flex-line-pack:center;
		align-content:center;

		background-position:bottom 40px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel4 .leftPart .under.mysize .box {
		background-position:bottom 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .leftPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:reverse;
		-webkit-flex-direction:row-reverse;
		-ms-flex-direction:row-reverse;
		flex-direction:row-reverse;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;

		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start;

		-webkit-align-content:center;
		-ms-flex-line-pack:center;
		align-content:center;

		background-position:bottom 30px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel4 .leftPart .under.mysize .box {
		background-position:bottom 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .leftPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:reverse;
		-webkit-flex-direction:row-reverse;
		-ms-flex-direction:row-reverse;
		flex-direction:row-reverse;

		-webkit-box-align:end;
		-webkit-align-items:flex-end;
		-ms-flex-align:end;
		align-items:flex-end;

		-webkit-align-content:flex-end;
		-ms-flex-line-pack:end;
		align-content:flex-end;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	.panel4 .leftPart .under .box {
		background-position: center calc((100% - 60px) / 2);
		background-size:30% auto;
	}
}

@media only screen and (max-width: 640px){
	.panel4 .leftPart .under .box {
		background-position: center calc((100% - 60px) / 2);
		background-size:38% auto;
	}
}

.panel4 .leftPart .under .box h2 {
}

@media only screen and (min-width: 1001px){
	.panel4 .leftPart .under .box h2 {
		width:50%;
		color:#26A69A;
		background-color:#FFF;
	}

	.panel4 .leftPart .under .box h2 a {
		color:#26A69A;
		display:block;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .leftPart .under .box h2 {
		width:50%;
		color:#26A69A;
		background-color:#FFF;
	}

	.panel4 .leftPart .under .box h2 a {
		color:#26A69A;
		display:block;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .leftPart .under .box h2 {
		width:100%;
		color:#FFF;
		background-color:#26A69A;

		background-image:url(../img/frontpage_panel04_leftpart_under_spbg.png);
		background-position:right 10px center;
		background-repeat:no-repeat;
		background-size:auto 70%;
	}

	.panel4 .leftPart .under .box h2 a {
		color:#FFF;
		display:block;
	}
}

.panel4 .leftPart .under .box ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:horizontal;
	-webkit-box-direction:reverse;
	-webkit-flex-direction:row-reverse;
	-ms-flex-direction:row-reverse;
	flex-direction:row-reverse;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
}

@media only screen and (min-width: 1001px){
	.panel4 .leftPart .under .box ul {
		width:50%;
		height:90px;
		padding-right:5%;
	}

	/*windowheight700px以下*/
	.panel4 .leftPart .under.mysize .box ul {
		width:50%;
		height:60px;
		padding-right:5%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .leftPart .under .box ul {
		width:50%;
		height:75px;
		padding-right:5%;
	}

	/*windowheight700px以下*/
	.panel4 .leftPart .under.mysize .box ul {
		width:50%;
		height:60px;
		padding-right:5%;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .leftPart .under .box ul {
		display:none;
	}
}

.panel4 .leftPart .under .box li {
	width:30%;
}

/*windowheight700px以下*/
.panel4 .leftPart .under.mysize .box li {
	width:25%;
}

.panel4 .leftPart .under .box li img {
	width:100%;
	display:block;/*変な隙間が下に出来る*/
	line-height:0;
}

/***********************

rightPart

***********************/
.panel4 .rightPart {
	text-align:left;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction: column;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content: center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items: center;
}

@media only screen and (min-width: 769px){
	/* 高さが取得できないと背景色がずれる*/
	.panel4 .rightPart {
		/*min-height:100vh;*/
	}
}

@media only screen and (max-width: 768px){
	.panel4 .rightPart {
	}
}

/*---------------------
over
-----------------------*/
.panel4 .rightPart .over {
	width:100%;
	position:relative;
}

@media only screen and (min-width: 769px){
	.panel4 .rightPart .over {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width: 401px) and (max-width: 768px){
	.panel4 .rightPart .over {
		/*min-height:300px;*/
		height:300px;/*min-heighが使えないIE対策*/
	}
}

@media only screen and (max-width: 400px){
	.panel4 .rightPart .over {
		/*min-height:250px;*/
		height:250px;/*min-heighが使えないIE対策*/
	}
}

.panel4 .rightPart .over .box {
	width:100%;
	height:100%;
	position:relative;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	background-image:url(../img/frontpage_panel04_rightpart_over_photo.png);
	background-repeat:no-repeat;
	background-position:top 50px center;
	background-size:50% auto;
}

@media only screen and (min-width: 1001px){
	.panel4 .rightPart .over .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;

		-webkit-box-align:end;
		-webkit-align-items:flex-end;
		-ms-flex-align:end;
		align-items:flex-end;

		background-position:top 40px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel4 .rightPart .over.mysize .box {
		background-position:top 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .rightPart .over .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;

		-webkit-box-align:end;
		-webkit-align-items:flex-end;
		-ms-flex-align:end;
		align-items:flex-end;

		background-position:top 30px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel4 .rightPart .over.mysize .box {
		background-position:top 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .rightPart .over .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:reverse;
		-webkit-flex-direction:row-reverse;
		-ms-flex-direction:row-reverse;
		flex-direction:row-reverse;

		-webkit-box-align:end;
		-webkit-align-items:flex-end;
		-ms-flex-align:end;
		align-items:flex-end;

		-webkit-align-content:flex-end;
		-ms-flex-line-pack:end;
		align-content:flex-end;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	.panel4 .rightPart .over .box {
		background-position: center calc((100% - 60px) / 2);
		background-size:30% auto;
	}
}

@media only screen and (max-width: 640px){
	.panel4 .rightPart .over .box {
		background-position: center calc((100% - 60px) / 2);
		background-size:38% auto;
	}
}

.panel4 .rightPart .over .box h2 {
	color:#26A69A;
	background-color:#FFF;
}

@media only screen and (min-width: 1001px) {
	.panel4 .rightPart .over .box h2 {
		width:50%;
		color:#26A69A;
		background-color:#FFF;
	}

	.panel4 .rightPart .over .box h2 a {
		color:#26A69A;
		display:block;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .rightPart .over .box h2 {
		width:50%;
		color:#26A69A;
		background-color:#FFF;
	}

	.panel4 .rightPart .over .box h2 a {
		color:#26A69A;
		display:block;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .rightPart .over .box h2 {
		width:100%;
		color:#FFF;
		background-color:#26A69A;

		background-image:url(../img/frontpage_panel04_rightpart_over_spbg.png);
		background-position:right 10px center;
		background-repeat:no-repeat;
		background-size:auto 70%;
	}

	.panel4 .rightPart .over .box h2 a {
		color:#FFF;
		display:block;
	}
}

.panel4 .rightPart .over .box ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-webkit-flex-direction:row;
	-ms-flex-direction:row;
	flex-direction:row;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
}

@media only screen and (min-width: 1001px){
	.panel4 .rightPart .over .box ul {
		width:50%;
		height:90px;
		padding-left:5%;
	}

	/*windowheight700px以下*/
	.panel4 .rightPart .over.mysize .box ul {
		width:50%;
		height:60px;
		padding-left:5%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .rightPart .over .box ul {
		width:50%;
		height:75px;
		padding-left:5%;
	}

	/*windowheight700px以下*/
	.panel4 .rightPart .over.mysize .box ul {
		width:50%;
		height:60px;
		padding-left:5%;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .rightPart .over .box ul {
		display:none;
	}
}

.panel4 .rightPart .over .box li {
	width:30%;
}

/*windowheight700px以下*/
.panel4 .rightPart .over.mysize .box li {
	width:25%;
}

.panel4 .rightPart .over .box li img {
	width:100%;
	display:block;/*変な隙間が下に出来る*/
	line-height:0;
}

/*---------------------
under
-----------------------*/
.panel4 .rightPart .under {
	width:100%;
	position:relative;
}

@media only screen and (min-width: 769px){
	.panel4 .rightPart .under {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width: 401px) and (max-width: 768px){
	.panel4 .rightPart .under {
		/*min-height:300px;*/
		height:300px;/*min-heighが使えないIE用*/
	}
}

@media only screen and (max-width: 400px){
	.panel4 .rightPart .under {
		/*min-height:250px;*/
		height:250px;/*min-heighが使えないIE用*/
	}
}

.panel4 .rightPart .under .box {
	width:100%;
	height:100%;
	position:relative;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	background-image:url(../img/frontpage_panel04_rightpart_under_photo.png);
	background-repeat:no-repeat;
}

@media only screen and (min-width: 1001px){
	.panel4 .rightPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;

		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start;

		-webkit-align-content:center;
		-ms-flex-line-pack:center;
		align-content:center;

		background-position:bottom 40px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel4 .rightPart .under.mysize .box {
		background-position:bottom 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .rightPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;

		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start;

		-webkit-align-content:center;
		-ms-flex-line-pack:center;
		align-content:center;

		background-position:bottom 30px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel4 .rightPart .under.mysize .box {
		background-position:bottom 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .rightPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:reverse;
		-webkit-flex-direction:row-reverse;
		-ms-flex-direction:row-reverse;
		flex-direction:row-reverse;

		-webkit-box-align:end;
		-webkit-align-items:flex-end;
		-ms-flex-align:end;
		align-items:flex-end;

		-webkit-align-content:flex-end;
		-ms-flex-line-pack:end;
		align-content:flex-end;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	.panel4 .rightPart .under .box {
		background-position: center calc((100% - 60px) / 2);
		background-size:30% auto;
	}
}

@media only screen and (max-width: 640px){
	.panel4 .rightPart .under .box {
		background-position: center calc((100% - 60px) / 2);
		background-size:38% auto;
	}
}

.panel4 .rightPart .under .box h2 {
	color:#FFF;
	background-color:#26A69A;
}

@media only screen and (min-width: 1001px){
	.panel4 .rightPart .under .box h2 {
		width:50%;
	}

	.panel4 .rightPart .under .box h2 a {
		color:#FFF;
		display:block;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .rightPart .under .box h2 {
		width:50%;
	}

	.panel4 .rightPart .under .box h2 a {
		color:#FFF;
		display:block;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .rightPart .under .box h2 {
		width:100%;

		background-image:url(../img/frontpage_panel04_rightpart_under_spbg.png);
		background-position:right 10px center;
		background-repeat:no-repeat;
		background-size:auto 70%;
	}

	.panel4 .rightPart .under .box h2 a {
		color:#FFF;
		display:block;
	}
}

.panel4 .rightPart .under .box ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-webkit-flex-direction:row;
	-ms-flex-direction:row;
	flex-direction:row;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
}

@media only screen and (min-width: 1001px){
	.panel4 .rightPart .under .box ul {
		width:50%;
		height:90px;
		padding-left:5%;
	}

	/*windowheight700px以下*/
	.panel4 .rightPart .under.mysize .box ul {
		width:50%;
		height:60px;
		padding-left:5%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel4 .rightPart .under .box ul {
		width:50%;
		height:75px;
		padding-left:5%;
	}

	/*windowheight700px以下*/
	.panel4 .rightPart .under.mysize .box ul {
		width:50%;
		height:60px;
		padding-left:5%;
	}
}

@media only screen and (max-width: 768px){
	.panel4 .rightPart .under .box ul {
		display:none;
	}
}

.panel4 .rightPart .under .box li {
	width:30%;
}

/*windowheight700px以下*/
.panel4 .rightPart .under.mysize .box li {
	width:25%;
}

.panel4 .rightPart .under .box li img {
	width:100%;
	display:block;/*変な隙間が下に出来る*/
	line-height:0;
}

/***********************************************
************************************************

panel5

************************************************
************************************************/
.panel5 {
	background-color:#FFF;
}

.panel5 .vertical {
}

.panel5 .adjuster {
}

@media only screen and (min-width: 769px){
	.panel5 .adjuster {
		background: #ffffff;
		background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #EDE6DB 50%, #EDE6DB 100%, #EDE6DB 100%),-moz-linear-gradient(left, #EDE6DB 0%, #EDE6DB 50%, #FFF 50%, #FFF 100%, #FFF 100%);
		background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#EDE6DB 50%,#EDE6DB 100%,#EDE6DB 100%),-webkit-linear-gradient(left, #EDE6DB 0%,#EDE6DB 50%,#FFF 50%,#FFF 100%,#FFF 100%);
		background: linear-gradient(to right, #ffffff 0%,#ffffff 50%,#EDE6DB 50%,#EDE6DB 100%,#EDE6DB 100%),linear-gradient(to right, #EDE6DB 0%,#EDE6DB 50%,#FFF 50%,#FFF 100%,#FFF 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#EDE6DB',GradientType=1 ), progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDE6DB', endColorstr='#FFF',GradientType=1 );

		background-size: 100% 50%;
		background-position: center top, center bottom;
		background-repeat: no-repeat;
	}
}

@media only screen and (max-width: 768px){
	.panel5 .adjuster {
		position:relative;
	}
}

.panel5 .flexContainer {
}

@media only screen and (max-width: 768px){
	.panel5 .flexContainer {
		flex-direction: column;
	}
}

.panel5 h3 {
}

.panel5 h3 span {
}

@media only screen and (min-width: 1001px){
	.panel5 h3 {
		text-align:center;

		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;

		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;

		-webkit-box-pack:center;
		-webkit-justify-content:center;
		-ms-flex-pack:center;
		justify-content:center;

		-webkit-box-align:center;
		-webkit-align-items:center;
		-ms-flex-align:center;
		align-items:center;

		font-size:2.0rem;
		line-height:1.5;
		padding:0 10px;

		height:90px;
	}

	/*windowheight700px以下*/
	.panel5 .leftPart .under.mysize h3,
	.panel5 .rightPart .over.mysize h3,
	.panel5 .rightPart .under.mysize h3 {
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;

		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;

		-webkit-box-align:center;
		-webkit-align-items:center;
		-ms-flex-align:center;
		align-items:center;


		font-size:1.8rem;
		line-height:1.5;
		letter-spacing:0.1em;
		padding:0 15px;

		height:65px;
	}

	.panel5 h3 span {
		display:inline-block;
		text-align:left;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel5 h3 {
		text-align:center;

		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;

		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;

		-webkit-box-pack:center;
		-webkit-justify-content:center;
		-ms-flex-pack:center;
		justify-content:center;

		-webkit-box-align:center;
		-webkit-align-items:center;
		-ms-flex-align:center;
		align-items:center;

		font-size:1.6rem;
		line-height:1.5;
		letter-spacing:0.05em;
		padding:0 20px;

		height:60px;
	}

	/*windowheight700px以下*/
	.panel5 .leftPart .under.mysize h3,
	.panel5 .rightPart .over.mysize h3,
	.panel5 .rightPart .under.mysize h3 {
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;

		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;

		-webkit-box-align:center;
		-webkit-align-items:center;
		-ms-flex-align:center;
		align-items:center;

		font-size:1.5rem;
		letter-spacing:0.1em;
		padding:0 15px;

		height:65px;
	}

	.panel5 h3 span {
		display:inline-block;
		text-align:left;
	}
}

@media only screen and (max-width: 768px){
	.panel5 h3 {
		text-align:left;
		font-size:1.5rem;
		letter-spacing:0.1em;
		height:60px;
		line-height:60px;
		padding-left:20px;
	}

	.panel5 h3 span {
		display:inline-block;
		text-align:left;
	}
}


/***********************

leftPart

***********************/
.panel5 .leftPart {
	text-align:left;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction: column;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content: center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items: center;
}

@media only screen and (min-width: 769px){
	/* 高さが取得できないと背景色がずれる*/
	.panel5 .leftPart {
		/*min-height:100vh;*/
	}
}

@media only screen and (max-width: 768px){
	.panel5 .leftPart {
		min-height:0;
	}
}

/*---------------------
over
-----------------------*/
.panel5 .leftPart .over {
	width:100%;
	position:relative;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content: center;

	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items: center;
}

@media only screen and (min-width: 769px){
	.panel5 .leftPart .over {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width:401px) and (max-width: 768px){
	.panel5 .leftPart .over {
		min-height:260px;
	}
}

@media only screen and (max-width: 400px){
	.panel5 .leftPart .over {
		min-height:210px;
	}
}

.panel5 .leftPart .over h2 {
	width:100%;
	color:#0092B2;
	text-align:center;
	background-image:url(../img/frontpage_panel05_leftpart_over_img.png);
	background-repeat:no-repeat;
}

@media only screen and (min-width: 1001px){
	.panel5 .leftPart .over h2 {
		font-size:2.5rem;
		letter-spacing:0.1em;
		background-position:top center;
		background-size:160px 160px;
		padding-top:165px;
	}

	/*windowheight700px以下*/
	.panel5 .leftPart .over.mysize h2 {
		font-size:2.0rem;
		letter-spacing:0.1em;
		background-position:top center;
		background-size:100px 100px;
		padding-top:110px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel5 .leftPart .over h2 {
		font-size:2.5rem;
		letter-spacing:0.1em;
		background-position:top center;
		background-size:160px 160px;
		padding-top:165px;
	}

	/*windowheight700px以下*/
	.panel5 .leftPart .over.mysize h2 {
		font-size:2.0rem;
		letter-spacing:0.1em;
		background-position:top center;
		background-size:100px 100px;
		padding-top:110px;
	}
}

@media only screen and (max-width: 768px){
	.panel5 .leftPart .over h2 {
		font-size:1.7rem;
		letter-spacing:0.1em;
		background-position:center center;
		background-size:125px 125px;
		padding-top:160px;
	}
}

/*他のマスにあるh3の背景の代わりに疑似要素を置く*/
.panel5 .leftPart .over::after {
	content:"";
	background-color:#0092b2;
	position:absolute;
	right:0;
	bottom:0;
}

@media only screen and (min-width: 1001px){
	.panel5 .leftPart .over::after {
		width:50%;
		height:90px;
	}

	.panel5 .leftPart .over.mysize {
		width:50%;
		height:65px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel5 .leftPart .over::after {
		width:50%;
		height:60px;
	}

	.panel5 .leftPart .over.mysize {
		width:50%;
		height:65px;
	}
}

@media only screen and (max-width: 768px){
	.panel5 .leftPart .over::after {
		display:none;
	}
}

/*---------------------
under
-----------------------*/
.panel5 .leftPart .under {
	width:100%;
	position:relative;
}

@media only screen and (min-width: 769px){
	.panel5 .leftPart .under {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width: 401px) and (max-width: 768px){
	.panel5 .leftPart .under {
		/*min-height:300px;*/
		height:300px;/*min-heighが使えないIE用*/
	}
}

@media only screen and (max-width: 400px){
	.panel5 .leftPart .under {
		/*min-height:250px;*/
		height:250px;/*min-heighが使えないIE用*/
	}
}

.panel5 .leftPart .under .box {
	width:100%;
	height:100%;
	position:relative;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	background-image:url(../img/frontpage_panel05_leftpart_under_img.png);
	background-repeat:no-repeat;
	background-position:bottom 50px center;
	background-size:50% auto;
}

@media only screen and (min-width: 1001px){
	.panel5 .leftPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;

		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start;

		-webkit-align-content:center;
		-ms-flex-line-pack:center;
		align-content:center;

		background-position:bottom 40px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel5 .leftPart .under.mysize .box {
		background-position:bottom 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel5 .leftPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;

		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start;

		-webkit-align-content:center;
		-ms-flex-line-pack:center;
		align-content:center;

		background-position:bottom 30px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel5 .leftPart .under.mysize .box {
		background-position:bottom 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (max-width: 768px){
	.panel5 .leftPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start;

	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	.panel5 .leftPart .under .box {
		background-position: center calc((100% + 60px) / 2);
		background-size:30% auto;
	}
}

@media only screen and (max-width: 640px){
	.panel5 .leftPart .under .box {
		background-position: center calc((100% + 60px) / 2);
		background-size:38% auto;
	}
}

.panel5 .leftPart .under .box h3 {
}

@media only screen and (min-width: 1001px){
	.panel5 .leftPart .under .box h3 {
		width:50%;
		color:#0092B2;
		background-color:#FFF;
	}

	.panel5 .leftPart .under .box h3 a {
		color:#0092B2;
		display:block;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel5 .leftPart .under .box h3 {
		width:50%;
		color:#0092b2;
		background-color:#FFF;
	}

	.panel5 .leftPart .under .box h3 a {
		color:#0092b2;
		display:block;
	}
}

@media only screen and (max-width: 768px){
	.panel5 .leftPart .under .box h3 {
		width:100%;
		color:#FFF;
		background-color:#0092b2;
	}

	.panel5 .leftPart .under .box h3 a {
		color:#FFF;
		display:block;
	}
}

/*---------------------
over
-----------------------*/
.panel5 .rightPart .over {
	width:100%;
	position:relative;
}

@media only screen and (min-width: 769px){
	.panel5 .rightPart .over {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width: 401px) and (max-width: 768px){
	.panel5 .rightPart .over {
		/*min-height:300px;*/
		height:300px;/*min-heighが使えないIE用*/
	}
}

@media only screen and (max-width: 400px){
	.panel5 .rightPart .over {
		/*min-height:250px;*/
		height:250px;/*min-heighが使えないIE用*/
	}
}

.panel5 .rightPart .over .box {
	width:100%;
	height:100%;
	position:relative;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	background-image:url(../img/frontpage_panel05_rightpart_over_img.png);
	background-repeat:no-repeat;
	background-position:top 50px center;
	background-size:50% auto;
}

@media only screen and (min-width: 1001px){
	.panel5 .rightPart .over .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-pack:start;
		-webkit-justify-content:flex-start;
		-ms-flex-pack:start;
		justify-content:flex-start;

		-webkit-box-align:end;
		-webkit-align-items:flex-end;
		-ms-flex-align:end;
		align-items:flex-end;

		background-position:top 40px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel5 .rightPart .over.mysize .box {
		background-position:top 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel5 .rightPart .over .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-pack:start;
		-webkit-justify-content:flex-start;
		-ms-flex-pack:start;
		justify-content:flex-start;

		-webkit-box-align:end;
		-webkit-align-items:flex-end;
		-ms-flex-align:end;
		align-items:flex-end;

		background-position:top 30px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel5 .rightPart .over.mysize .box {
		background-position:top 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (max-width: 768px){
	.panel5 .rightPart .over .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:reverse;
		-webkit-flex-direction:row-reverse;
		-ms-flex-direction:row-reverse;
		flex-direction:row-reverse;

		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start;

		-webkit-align-content:flex-end;
		-ms-flex-line-pack:end;
		align-content:flex-end;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	.panel5 .rightPart .over .box {
		background-position: center calc((100% + 60px) / 2);
		background-size:30% auto;
	}
}

@media only screen and (max-width: 640px){
	.panel5 .rightPart .over .box {
		background-position: center calc((100% + 60px) / 2);
		background-size:38% auto;
	}
}

.panel5 .rightPart .over .box h3 {
	color:#26A69A;
	background-color:#FFF;
}

@media only screen and (min-width: 1001px) {
	.panel5 .rightPart .over .box h3 {
		width:50%;
		color:#26A69A;
		background-color:#FFF;
	}

	.panel5 .rightPart .over .box h3 a {
		color:#0092b2;
		display:block;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel5 .rightPart .over .box h3 {
		width:50%;
		color:#0092b2;
		background-color:#FFF;
	}

	.panel5 .rightPart .over .box h3 a {
		color:#0092b2;
		display:block;
	}
}

@media only screen and (max-width: 768px){
	.panel5 .rightPart .over .box h3 {
		width:100%;
		color:#FFF;
		background-color:#0092b2;
	}

	.panel5 .rightPart .over .box h3 a {
		color:#FFF;
		display:block;
	}
}

/*---------------------
under
-----------------------*/
.panel5 .rightPart .under {
	width:100%;
	position:relative;
}

@media only screen and (min-width: 769px){
	.panel5 .rightPart .under {
		/*高さはJSで取ってくる*/
	}
}

@media only screen and (min-width: 401px) and (max-width: 768px){
	.panel5 .rightPart .under {
		/*min-height:300px;*/
		height:300px;/*min-heighが使えないIE用*/
	}
}

@media only screen and (max-width: 400px){
	.panel5 .rightPart .under {
		/*min-height:250px;*/
		height:250px;/*min-heighが使えないIE用*/
	}
}

.panel5 .rightPart .under .box {
	width:100%;
	height:100%;
	position:relative;

	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	background-image:url(../img/frontpage_panel05_rightpart_under_img.png);
	background-repeat:no-repeat;
}

@media only screen and (min-width: 1001px){
	.panel5 .rightPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-pack:start;
		-webkit-justify-content:flex-start;
		-ms-flex-pack:start;
		justify-content:flex-start;

		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start;

		-webkit-align-content:center;
		-ms-flex-line-pack:center;
		align-content:center;

		background-position:bottom 40px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel5 .rightPart .under.mysize .box {
		background-position:bottom 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel5 .rightPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:normal;
		-webkit-flex-direction:row;
		-ms-flex-direction:row;
		flex-direction:row;

		-webkit-box-pack:start;
		-webkit-justify-content:flex-start;
		-ms-flex-pack:start;
		justify-content:flex-start;

		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start;

		-webkit-align-content:center;
		-ms-flex-line-pack:center;
		align-content:center;

		background-position:bottom 30px center;
		background-size:auto 60%;
	}

	/*windowheight700px以下*/
	.panel5 .rightPart .under.mysize .box {
		background-position:bottom 15px center;
		background-size:auto 60%;
	}
}

@media only screen and (max-width: 768px){
	.panel5 .rightPart .under .box {
		-webkit-box-orient:horizontal;
		-webkit-box-direction:reverse;
		-webkit-flex-direction:row-reverse;
		-ms-flex-direction:row-reverse;
		flex-direction:row-reverse;

		-webkit-box-align:end;
		-webkit-align-items:flex-end;
		-ms-flex-align:end;
		align-items:flex-end;

		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start;

		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px){
	.panel5 .rightPart .under .box {
		background-position: center calc((100% + 60px) / 2);
		background-size:30% auto;
	}
}

@media only screen and (max-width: 640px){
	.panel5 .rightPart .under .box {
		background-position: center calc((100% + 60px) / 2);
		background-size:38% auto;
	}
}

.panel5 .rightPart .under .box h3 {
	color:#FFF;
	background-color:#0092b2;
}

@media only screen and (min-width: 1001px){
	.panel5 .rightPart .under .box h3 {
		width:50%;
	}

	.panel5 .rightPart .under .box h3 a {
		color:#FFF;
		display:block;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px){
	.panel5 .rightPart .under .box h3 {
		width:50%;
	}

	.panel5 .rightPart .under .box h3 a {
		color:#FFF;
		display:block;
	}
}

@media only screen and (max-width: 768px){
	.panel5 .rightPart .under .box h3 {
		width:100%;
	}

	.panel5 .rightPart .under .box h3 a {
		color:#FFF;
		display:block;
	}
}


/***********************************************
************************************************

panel6

************************************************
************************************************/
.panel6 {
	background-color:#FFF;
}

.panel6 .vertical {
}

.panel6 .adjuster {
}

@media only screen and (min-width: 769px){
	.panel6 .adjuster {
		background: #ededed;
		background: -moz-linear-gradient(top,  #ededed 0%, #ededed 40%, #b1d9b0 40%, #b1d9b0 100%);
		background: -webkit-linear-gradient(top,  #ededed 0%,#ededed 40%,#b1d9b0 40%,#b1d9b0 100%);
		background: linear-gradient(to bottom,  #ededed 0%,#ededed 40%,#b1d9b0 40%,#b1d9b0 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#b1d9b0',GradientType=0 );

		background-size: 100% 100%;
		background-position: center top, center bottom;
		background-repeat: no-repeat;
	}
}

@media only screen and (max-width: 768px){
	.panel6 .adjuster {
		position:relative;
	}
}

.panel6 .flexContainer {
}

@media only screen and (max-width: 768px){
	.panel6 .flexContainer {
		flex-direction: column;
	}
}