@charset "utf-8";
html,body {
    width: 100%;
    height: 100%;
}


@media screen and (min-width:1010px) and ( max-width:1400px) {
    /* PC用　*/

.pc.container-fluid {
    padding: 0;
}

/* タイトル部分イメージの位置調整 */
.pageTitle .ttlImg {
    top: -37px;
    right: 0;
}

/* 全てのサイズ共通 */
.pc {
    height: 100%;
    min-height: 100%;
}
.pc .leftSide {
    height: 100%;
    background: url(../../img/m_top_img1.jpg) center center no-repeat;
    background-size: 100%;
	position: relative;
    text-align: center;
	-webkit-transition: all 1.3s ease-out;
	transition:all 1.3s ease-out;
}

.pc .leftSide .bd1 {
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #FFFFFF;
}

.pc .rightSide {
    height: 100%;
    background: url(../../img/m_top_img2.jpg) center center no-repeat;
    background-size: 100%;
    text-align: center;
	-webkit-transition: all 1.3s ease-out;
	transition:all 1.3s ease-out;
}

.pc .leftSide:hover,
.pc .rightSide:hover {
	background-size: 110%;
}

.pc .leftSide a,
.pc .rightSide a {
    width: 300px;
    height: 90px;
	display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -45px 0 0 -150px;
	-webkit-transition: all 0.3s ease-out;
	transition:all 0.3s ease-out;
}

.pc .leftSide a:hover,
.pc .rightSide a:hover {
	opacity: .50; 
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)"; 
	-khtml-opacity: .5;
	-moz-opacity: .5;
}

.pc .leftSide a:before,
.pc .rightSide a:before {
    width: 30px;
    height: 2px;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #FFF;
	opacity: .0; 
	filter: alpha(opacity=0);
	-ms-filter: "alpha(opacity=0)"; 
	-khtml-opacity: .0;
	-moz-opacity: .0;
	-webkit-transition: all 0.3s ease-out;
	transition:all 0.3s ease-out;
}

.pc .leftSide a:after,
.pc .rightSide a:after {
    width: 30px;
    height: 2px;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    background-color: #FFF;
	opacity: .0; 
	filter: alpha(opacity=0);
	-ms-filter: "alpha(opacity=0)"; 
	-khtml-opacity: .0;
	-moz-opacity: .0;
	-webkit-transition: all 0.3s ease-out;
	transition:all 0.3s ease-out;
}


.pc .leftSide a:hover:before,
.pc .rightSide a:hover:before {
	left: 30px;
	opacity: 1; 
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)"; 
	-khtml-opacity: 1;
	-moz-opacity: 1;
}

.pc .leftSide a:hover:after,
.pc .rightSide a:hover:after {
    right: 30px;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)"; 
	-khtml-opacity: 1;
	-moz-opacity: 1;
}



.pc .leftSide .borderTop,
.pc .rightSide .borderTop,
.pc .leftSide .borderBottom,
.pc .rightSide .borderBottom {
    width: 0;
    height: 2px;
    display: block;
    position: absolute;
    background-color: #FFFFFF;
	-webkit-transition: all 0.5s ease-out;
	transition:all 0.5s ease-out;
}

.pc .leftSide:hover .borderTop,
.pc .rightSide:hover .borderTop,
.pc .leftSide:hover .borderBottom,
.pc .rightSide:hover .borderBottom {
    width: 100%;
    
}

.pc .leftSide .borderTop,
.pc .rightSide .borderTop {
    top: 0;
    left: 0;
}

.pc .leftSide .borderBottom,
.pc .rightSide .borderBottom {
    bottom: 0;
    right: 0;
}

.pc .leftSide .borderRight,
.pc .rightSide .borderRight,
.pc .leftSide .borderLeft,
.pc .rightSide .borderLeft {
    width: 2px;
    height: 0;
    display: block;
    position: absolute;
    background-color: #FFFFFF;
	-webkit-transition: all 0.5s ease-out;
	transition:all 0.5s ease-out;
}

.pc .leftSide:hover .borderRight,
.pc .rightSide:hover .borderRight,
.pc .leftSide:hover .borderLeft,
.pc .rightSide:hover .borderLeft {
    height: 100%;
}

.pc .leftSide .borderRight,
.pc .rightSide .borderRight {
    top: 0;
    right: 0;
}

.pc .leftSide .borderLeft,
.pc .rightSide .borderLeft {
    bottom: 0;
    left: 0;
}

.pc .leftSide p,
.pc .rightSide p {
    display: inline-block;
}

.pc .leftSide span,
.pc .rightSide span {
	height: 90px;
    display: table-cell;
    vertical-align: middle;
}

}

@media screen and (min-width:1400px) {
    /* 右サイド広告がコンテンツに被らない　*/

.pc.container-fluid {
    padding: 0;
}

/* タイトル部分イメージの位置調整 */
.pageTitle .ttlImg {
    top: -37px;
    right: 0;
}

/* 全てのサイズ共通 */
.pc {
    height: 100%;
    min-height: 100%;
}

.pc .leftSide {
    height: 100%;
    background: url(../../img/m_top_img1.jpg) center center no-repeat;
    background-size: 100%;
	position: relative;
    text-align: center;
	-webkit-transition: all 1.3s ease-out;
	transition:all 1.3s ease-out;
}

.pc .leftSide .bd1 {
	width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background-color: #FFFFFF;
}

.pc .rightSide {
    height: 100%;
    background: url(../../img/m_top_img2.jpg) center center no-repeat;
    background-size: 100%;
    text-align: center;
	-webkit-transition: all 1.3s ease-out;
	transition:all 1.3s ease-out;
}

.pc .leftSide:hover,
.pc .rightSide:hover {
	background-size: 110%;
}

.pc .leftSide a,
.pc .rightSide a {
    width: 300px;
    height: 90px;
	display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -45px 0 0 -150px;
	-webkit-transition: all 0.3s ease-out;
	transition:all 0.3s ease-out;
}

.pc .leftSide a:hover,
.pc .rightSide a:hover {
	opacity: .50; 
	filter: alpha(opacity=50);
	-ms-filter: "alpha(opacity=50)"; 
	-khtml-opacity: .5;
	-moz-opacity: .5;
}

.pc .leftSide a:before,
.pc .rightSide a:before {
    width: 30px;
    height: 2px;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: #FFF;
	opacity: .0; 
	filter: alpha(opacity=0);
	-ms-filter: "alpha(opacity=0)"; 
	-khtml-opacity: .0;
	-moz-opacity: .0;
	-webkit-transition: all 0.3s ease-out;
	transition:all 0.3s ease-out;
}

.pc .leftSide a:after,
.pc .rightSide a:after {
    width: 30px;
    height: 2px;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    background-color: #FFF;
	opacity: .0; 
	filter: alpha(opacity=0);
	-ms-filter: "alpha(opacity=0)"; 
	-khtml-opacity: .0;
	-moz-opacity: .0;
	-webkit-transition: all 0.3s ease-out;
	transition:all 0.3s ease-out;
}


.pc .leftSide a:hover:before,
.pc .rightSide a:hover:before {
	left: 30px;
	opacity: 1; 
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)"; 
	-khtml-opacity: 1;
	-moz-opacity: 1;
}

.pc .leftSide a:hover:after,
.pc .rightSide a:hover:after {
    right: 30px;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)"; 
	-khtml-opacity: 1;
	-moz-opacity: 1;
}



.pc .leftSide .borderTop,
.pc .rightSide .borderTop,
.pc .leftSide .borderBottom,
.pc .rightSide .borderBottom {
    width: 0;
    height: 2px;
    display: block;
    position: absolute;
    background-color: #FFFFFF;
	-webkit-transition: all 0.5s ease-out;
	transition:all 0.5s ease-out;
}

.pc .leftSide:hover .borderTop,
.pc .rightSide:hover .borderTop,
.pc .leftSide:hover .borderBottom,
.pc .rightSide:hover .borderBottom {
    width: 100%;
    
}

.pc .leftSide .borderTop,
.pc .rightSide .borderTop {
    top: 0;
    left: 0;
}

.pc .leftSide .borderBottom,
.pc .rightSide .borderBottom {
    bottom: 0;
    right: 0;
}

.pc .leftSide .borderRight,
.pc .rightSide .borderRight,
.pc .leftSide .borderLeft,
.pc .rightSide .borderLeft {
    width: 2px;
    height: 0;
    display: block;
    position: absolute;
    background-color: #FFFFFF;
	-webkit-transition: all 0.5s ease-out;
	transition:all 0.5s ease-out;
}

.pc .leftSide:hover .borderRight,
.pc .rightSide:hover .borderRight,
.pc .leftSide:hover .borderLeft,
.pc .rightSide:hover .borderLeft {
    height: 100%;
}

.pc .leftSide .borderRight,
.pc .rightSide .borderRight {
    top: 0;
    right: 0;
}

.pc .leftSide .borderLeft,
.pc .rightSide .borderLeft {
    bottom: 0;
    left: 0;
}

.pc .leftSide p,
.pc .rightSide p {
    display: inline-block;
}

.pc .leftSide span,
.pc .rightSide span {
	height: 90px;
    display: table-cell;
    vertical-align: middle;
}


}