@charset "UTF-8";
/* CSS Document */

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
	max-width: 760px;
	margin: 30px auto 0;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

img.catalog-banner {
	display: block;
	max-width: 200px;
	margin: 40px auto 20px;
}

/*PC*/
@media print, screen and (min-width: 769px) {

/*[pc]hed
-------------------------------------*/	
.hed_slider {
	position: relative;
    width: 100%;
}


#photograph {
	position:relative;
	width: 80%;
	padding-left: 20%;
	height:800px;
	margin:-100px 0 0;
}
	
#photograph img {
		width: 100%;
}
	
.main_catch {
	position:absolute;
	bottom: 10%;
	left:30%;
	margin-left: -460px;
	padding-left: 100px;
	z-index:200;
	border-left: 10px solid #0073d4;
}
	
/*	.pagescroll {
z-index: 500;
padding: 40px 10px;
position: absolute; 
bottom: 0%;
right: 10%;
width: 40px;
display: inline-block;
background: #4c4d4d;
cursor: pointer;
	display: block;
}	
	
	
.pagescroll a {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
		-webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
		color: #fff;
		font-size: 1.2em;
    font-weight: bold;
			-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all 0.3s ease-out;
		display: block;
    text-align: center;
    margin-top: 10px;
		
	}*/

.arrows {
    width: 30px;
    height: 62px;
    margin: 10px auto;
    bottom: 20px;
}

.arrows path {
    stroke: #fff;
    fill: transparent;
    stroke-width: 1px;  
    animation: arrow 2s infinite;
    -webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
    animation-delay:-1s;
    -webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
    animation-delay:-0.5s;
    -webkit-animation-delay:-0.5s; 
}
	/*

	.pagescroll a span::after {
		 position: absolute;
bottom: -60%;
  left: 50%;
  content: '';
  width: 15px;
  height: 15px;
  margin: -12px 0 0 -8px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
			-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all 0.3s ease-out;
	}
	
	
	.pagescroll:hover a span::after {
		bottom: -80%;
			-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all 0.3s ease-out;
	}	
	
	*/
	
	.viewer {
		margin: 0 auto;
		overflow: hidden;
		position:relative;
		z-index: 0;
		}
	
	.viewer ul li {
		left: 0;
		position: absolute;
		box-sizing: border-box;
		top: 0;
	}
	
	
	.viewer ul li.bg1 {
		background: url(../images/slider/slider01.jpg) center center;
		background-size: cover;
		height: 700px;
		text-indent: -9999px;
	}
	
		.viewer ul li.bg2 {
		background: url(../images/slider/slider02.jpg) center center;
		background-size: cover;
			text-indent: -9999px;
	}
	
		.viewer ul li.bg3 {
		background: url(../images/slider/slider03.png) center center;
		background-size: cover;
			text-indent: -9999px;
	}
	
		.viewer ul li.bg4 {
		background: url(../images/slider/slider04.png) center center;
		background-size: cover;
			text-indent: -9999px;
	}
	
		.viewer ul li.bg5 {
		background: url(../images/slider/slider05.png) center center;
		background-size: cover;
			text-indent: -9999px;
	}
	

	
	.hedbox {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		min-height: 500px;
		margin: 90px 0 30px;
		padding-left: 353px;
	}
	
	.hedimg {
		opacity: 1;
		top: 0;
		z-index: 100;
		background: none;
		overflow: hidden;
	
	}
	
	.hedimg img {
		width: 100%;
		height: auto;
	}
	
	/****************************
[pc]各ページのヘッドタイトル
*****************************/
.hedTitle02 {
width: 100%;
display: table-cell;
text-align: center;
z-index: 100;
vertical-align: middle;
}

.hedTitle02 h3 {
border-left: 10px solid #0073d4;
color: #007dd0;
padding-left: 50px;
font-size: 4.5em;
position: absolute;
bottom: 15%;
left: 3%;
text-align: left;
z-index: 3;
font-family: Arial,Helvetica,Verdana,sans-serif;
line-height: 1.5em;
}

.hedTitle02 h3 span {
font-size: 0.5em;
font-weight: bold;
letter-spacing: 0.05em;
color:  #0073d4;
line-height: 1.5em;
display: inline-block;
font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Osaka,"MS Pゴシック","MS PGothic",sans-serif;
}	
	
	.hedTitle02 h3 img {
		width: 100%;
	}	
	
	
	
	
	
	.w50L {
		width: 49%;
padding: 1% 0 0% 1%;
	}
	
	.w50R {
		width: 49%;
		padding: 1% 1% 0% 0%;
		
	}
	
	.w50L img {
		padding: 0px;
		width: 100%;
		padding-bottom: 0px;
		vertical-align: bottom;
	}
	
	.w50R img {
		padding: 0px;
		vertical-align: bottom;
		padding-bottom: 0px;
		width: 100%;
	}
	
	.fac2 {
		background: url(../images/index/bg_img03.jpg);
		min-height: 500px;
		background-size: 100%;
		margin: 3% 1%;
	}
	
	.fac3 {
		background: #eeeeee;
		padding-top: 50px;
		margin: 3% 5%;
		padding-bottom: 50px;
	}
	
	
	.fac5 {
		margin-bottom: 30px;
		min-height: 400px;
		margin: 1%;
	}
	
	
	.com_txt {
		text-align: center;
		color: #fff;
		font-size: 1.3em;
		margin: 30px auto;
	}
	
		.bg_tit {
		background-image: url(./../images/index/bg_img01.jpg);
			background-size: 100%;
		background-repeat: no-repeat;
		min-height: 250px;
		
	}	
	
		.bg_tit2 {
		background-image: url(./../images/index/bg_img02.jpg);
			background-size: 100%;
		background-repeat: no-repeat;
		min-height: 250px;
		
	}	
		
	.ind_tit {
		color: #fff;
		font-size: 3em;
		padding-left: 60px;
		padding-top: 20px;
		line-height: 1.5em;
	}
	
	.ind_tit span {
		font-size: 0.5em;
		
	}
	
	
	
	.ind_txt {
		font-size: 1.3em;
		font-weight: 500;
		padding: 40px;
		color:  #0073d4;
	}
	
	
	.ind_txt2 {
		font-size: 1.3em;
		padding: 40px;
		color:  #fff;
	}
	
	
	.btn2 {
		margin-top: 20px;
	}
	.btn3 {
		margin-top: 20px;
	}
	
	
	.mini {
		width: 600px;
		margin:100px auto;
	}
	.fac4 {
    background: url(./../images/index/bg_img04.jpg) center center no-repeat;
	background-size: auto auto;
    background-size: cover;
    padding: 3%;
   margin:3% 1%;
}
	
		.fac4-2 {
    background: url(./../images/index/bg_img05.jpg) center center no-repeat;
	background-size: auto auto;
    background-size: cover;
    padding: 3% 3%;
	min-height: 310px;
margin:3% 1%;	
}
	
	
	
	.idx_list {
    width: 100%;
    margin: 0px auto;
    padding: 0;
    list-style-type: none;
}
	
	.idx_list li {
    width: 22%;
    float: left;
    margin-right: 4%;
    margin-bottom: 30px;
	background: rgba(0,0,0,0.7);
}
	
	.idx_list li:nth-child(4n+4) {
		margin-right: 0px;
	}
	
	
	.idx_list li a {
    display: block;
}
	
	.idx_list li a:hover {
		opacity: 1;
	}
	
	.idx_list li:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
	opacity: 1;
}
	
	.idx_list li img {
    width: 100%;
    height: auto;
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
	
	.litit {
		color: #fff;
		text-align: center;
		line-height: 1.3em;
	}
	
	.litxt {
		color: #fff;
		font-size: 0.9em;
		text-align: center;
		padding: 10px 20px;
	}
	
	
	
	.list_c ul {
		width: 100%;
		margin: 30px auto;
	}
	
	.list_c ul li {
		width: 150px;
		float: left;
		margin-bottom: 30px;
	}
	
	.list_c ul li img {
		margin: 0 auto;
	}
	
	
/****************************
[pc]header(slider)
*****************************/

#header {
	height:auto !important;
}
	
#header h2 {
	font-size: 1px;
 text-indent: -9999px;
 z-index: 1;
}

	.w30_l {
		width: 33.3%;
		float: left;
		
	}
	
	
	.bg_blue {
		background: #0073d4;
		min-height: 400px;
	}
	
	.bg_green {
		background: #4ba902;
		min-height: 400px;
	}
	
	.bg_navy {
		background: #35519e;
	}

	.news_list {
		width: 80%;
		margin: 30px auto;
	}
	
	.news_list dt {
		color: #fff;
		float: left;
		vertical-align: middle;
		margin-right: 15px;
	}

	.news_list dd {
		font-size: 0.9em;
		color: #fff;
	}
	
	.news_list a,
	.news_list dd a {
		color:#FFFFFF;
	}

	
	.facebook {
		width: 80%;
		height:300px;
		margin: 30px auto;
	}
	
	
.pagescroll {
    position: absolute; 
bottom: 0%;
right: 10%;
	z-index: 110;
	background:#007DD0!important;
	width: 25px;
	height: 25px;
	padding: 10px;
}
.pagescroll img {
	width:25px;
margin: 0 auto;
	padding: 0px;
	}
.pagescroll a {
	display: block;
	width: 25px;
	margin: 0 auto;
	line-height: 25px;
	}

	

    .ind_txt i {
        font-size: 1.8em;
        margin-right: 5px;
    }

    
    
    .ind_txt {
        line-height: 3em;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
}






/*sp*/
@media only screen and (max-width: 768px) {

	.viewer {
		margin: 0 auto;
		overflow: hidden;
		min-height: 500px;
		position:relative;
		z-index: 0;
		width: 80%;
		padding-left: 20%;
		}
	
	.viewer ul li {
		left: 0;
		position: absolute;
		box-sizing: border-box;
		top: 0;
	}
	
	
	.viewer ul li.bg1 {
		background: url(../images/slider/slider01.jpg) center center;
		background-size: cover;
	}
	
		.viewer ul li.bg2 {
		background: url(../images/slider/slider02.jpg) center center;
		background-size: cover;
	}
	
		.viewer ul li.bg3 {
		background: url(../images/slider/slider03.png) center center;
		background-size: cover;
	}
	
		.viewer ul li.bg4 {
		background: url(../images/slider/slider04.png) center center;
		background-size: cover;
	}
	
		.viewer ul li.bg5 {
		background: url(../images/slider/slider05.png) center center;
		background-size: cover;
	}
	
	
	
	
	
	
	.viewer ul li img {
		overflow: hidden;
		width: auto;
		min-height: 500px;
		box-sizing: border-box;
	}
	
	.hedbox {
		position: relative;
		box-sizing: border-box;
		min-height: 200px;
		margin: 50px 0 105px;
	}
	
	.hedimg {
		opacity: 1;
		top: 0;
		z-index: 0;
		width: 100%;
		background: none;
		overflow: hidden;
	
	}
	

		
	.hed_slider {
		width: 80%;
		padding-left: 20%;
		margin-bottom: 30px;
		position: relative;
	}
	#photograph {
	width: 100%;
	height:500px;
	margin:-100px 0 0;
}
	
	.main_catch {
	position:absolute;
	width: 90%;
	bottom: 20%;
	left:0%;
	margin-left: 0;
	padding-left: 20px;
	z-index:200;
	border-left: 5px solid #0073d4;
}
	
	.main_catch img {
		width: 90%!important;
	}
	
	
/*.pagescroll {
z-index: 500;
text-align: center;
bottom: 0%;
right: 6%;
position: absolute;
display: block;
background: #4c4d4d;
width: 30px;	
cursor: pointer;
padding: 30px 5px 20px 5px;
}	
	
	
	.pagescroll a {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
		color: #fff;
		  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
		text-align: center;
		padding: 10px 0;
		display: block;
		
		
	}*/
	
/*	
	.pagescroll a span {
		position: absolute;
  top: 0;
  left: 0%;
right: 0%;
  width: 36px;
  height: 36px;
  margin-left: 0px;
  border: 1px solid #0073d4;
  border-radius: 100%;
  box-sizing: border-box;
	}	*/
	
	/*
	.pagescroll a span::after {
		 position: absolute;
  bottom: -20%;
	right: 35%;
  content: '';
  width: 10px;
  height: 10px;
  margin: -10px 0 0 -6px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
			-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all 0.3s ease-out;
	}
	
	
	.pagescroll:hover a span::after {
		bottom: -40%;
			-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all 0.3s ease-out;
	}	*/
	
	
	.hedimg img {
		display: block!important;
		z-index: 0;
	}
	
	.w50L img {
		width: 100%;
	}
	
	.w50R img {
		width: 100%;
	}
	
	
	

	
	.fac2 {
		background: url(../images/index/bg_img03.jpg);
		min-height: 450px;
		margin: 2% 1%;
	}
	
	.fac1 {
		
	

	}
	
	
	
		.bg_tit {
		background-image: url(./../images/index/bg_img01.jpg);
			background-size: 100%;
		background-repeat: no-repeat;
		min-height: 150px;
		
	}	
	
		.bg_tit2 {
		background-image: url(./../images/index/bg_img02.jpg);
			background-size: 100%;
		background-repeat: no-repeat;
		min-height:150px;
		
	}	
		
	.ind_tit {
		color: #fff;
		font-size: 1.3em;
		text-align: center;
		padding-top: 20px;
		line-height: 1.5em;
	}
	
	.ind_tit span {
		font-size: 0.5em;
		
	}
	
	.ind_txt {
		padding: 10px;
		color:  #0073d4;
	}
	
	
	.ind_txt2 {
		padding: 10px;
		color:  #fff;
	}
	
	
	.btn2 {
		margin-top: 50px;
	}
	.btn3 {
		margin-top: 50px;
	}
	
	
	.mini {
		width: 80%;
		margin: 30px auto;
	}
	
	.fac2 {
		padding-bottom: 30px;
	}
	
	
		.idx_list {
    width: 100%;
    margin: 0px auto;
    padding: 0;
    list-style-type: none;
}
	
	.idx_list li {
    width: 48%;
    float: left;
    margin-right: 4%;
    margin-bottom: 30px;
	background: rgba(0,0,0,0.7);
}
	
	.idx_list li:nth-child(2n+2) {
		margin-right: 0px;
	}
	
	
	.idx_list li a {
    display: block;
}
	
	.idx_list li a:hover {
		opacity: 1;
	}
	
	.idx_list li:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
	opacity: 1;
}
	
	.idx_list li img {
    width: 100%;
    height: auto;
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
	
	.litit {
		color: #fff;
		text-align: center;
		font-size: 0.9em;
	}
	
	.litxt {
		color: #fff;
		font-size: 0.7em;
		padding: 10px 20px;
		text-align: center;
	}
	
	

	/****************************
[pc]各ページのヘッドタイトル
*****************************/
.hedTitle02 {
width: 100%;
display: table-cell;
text-align: center;
z-index: 100;
vertical-align: middle;
}

.hedTitle02 h3 {
position: absolute;
bottom: -100px;
border-left: 3px solid #0073d4;
color: #007dd0;
padding-left: 20px;
font-size: 2.3em;
text-align: left;
z-index: 3;
font-family: Arial,Helvetica,Verdana,sans-serif;
line-height: 1.5em;
}
	
	.hedTitle02 h3 img {
		width: 90%;
	}	
	

.hedTitle02 h3 span {
font-size: 0.7em;
font-weight: bold;
letter-spacing: 0.05em;
color:  #0073d4;
line-height: 1.5em;
display: inline-block;
font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Osaka,"MS Pゴシック","MS PGothic",sans-serif;
}	
		
	
	
			.fac4-2 {
    background: url(./../images/index/bg_img4.jpg) center center no-repeat;
	background-size: auto auto;
    background-size: cover;
    padding: 3%;
			margin: 1%;
    margin: 0 auto;
}
	
	
	
	
	
	
	
	
	
/****************************
[sp]header(slider)
*****************************/
	
#header {
	height:auto !important;
	width: 100%;
}

#header h2 {
	font-size: 1px;
 text-indent: -9999px;
 z-index: 1;
}

	
.fac3 {
		background: #e5e5e5;
		padding-top: 50px;
	margin: 1%;
		padding-bottom: 50px;
	}
	.fac4 {
    background: url(./../images/index/bg_img4.jpg) center center no-repeat;
	background-size: auto auto;
    background-size: cover;
    padding: 3%;
    margin: 0 auto;
		margin: 2% 1%;
}
	
		.fac4-2 {
    background: url(./../images/index/bg_img05.jpg) center center no-repeat;
	background-size: auto auto;
    background-size: cover;
    padding: 3%;
    margin: 0 auto;
			margin: 2% 1%;
}
	.fac1 {
		margin-bottom: 30px;
	}
	
		.com_txt {
		text-align: center;
		color: #fff;
		margin: 30px auto;
	}
	
	.w30_l {
		width: 100%;
		margin: 0 auto;
		
	}
	
	.w50L,.w50R {
		width: 98%;
		margin:0%  1%;
		padding: 0px!important;
	}
	
	.bg_blue {
		background: #0073d4;
		margin:2% 1%;
		width: 98%;
	}
	
	.bg_green {
		background: #4ba902;
		width: 98%;
		margin:2% 1%;
	}
	
	.bg_navy {
		background: #35519e;
	}

	.news_list {
		width: 80%;
		margin: 30px auto;
		padding-bottom: 30px;
	}
	
	.news_list dt {
		color: #fff;
		float: left;
		vertical-align: middle;
		margin-right: 15px;
	}

	.news_list dd {
		font-size: 0.9em;
		color: #fff;
	}
	
	.news_list a ,
	.news_list dd a {
		color:#FFFFFF;
	}

	
	.facebook {
		width: 100%;
		height:300px;
		margin: 30px auto;
	}
	
	
		.list_c ul {
		width: 100%;
		margin: 30px auto;
	}
	
	.list_c ul li {
		width: 20%;
		float: left;
		margin-bottom: 30px;
	}
	
	.list_c ul li img {
		margin: 0 auto;
	}
	
	
	.pagescroll {
    position: absolute; 
bottom: 0%;
right: 5%;
	z-index: 110;
	background:#007DD0!important;
	width: 25px;
	height: 25px;
	padding: 10px;
}
.pagescroll img {
	width:25px;
margin: 0 auto;
	padding: 0px;
	}
.pagescroll a {
	display: block;
	width: 25px;
	margin: 0 auto;
	line-height: 25px;
	}

	    .ind_txt i {
        font-size: 1.8em;
        margin-right: 5px;
    }

    
    .ind_txt {
        line-height: 3em;
    }
    
	

	
	
}