@charset "utf-8";

.wrapper {
/*  grid-template-rows: 1.4fr 3.4fr 1.2fr 3.5fr;*/
/*grid-template-rows: 14% 51% 23% 12% ;*/
	grid-template-rows: 15vh 42vh 17vh 27vh ;
}

/* ヘッダー
------------------------------------------------------------*/

.up-container {
  width: 1180px;
  margin: 0px auto 0px;
  display: table;
}
.g-cap {
display: table-caption; 
	caption-side: top;
}
.g-cap img{
	width:100%;
  max-width: 94px;
  height: auto;
}
.atitle img{
  max-width: 141px;
  height: auto;
}
.contents-left {
  width: 15%;
  display: table-cell;
  padding: 0px;
	vertical-align: top;
}
.contents-center {
  width: 10%;
  display: table-cell;
  padding: 0 15px 0 0px;	
	vertical-align: top;
}
.contents-right {
  width: 75%;
  display: table-cell;
  padding: 0;
  vertical-align: top;
}
.contents-right p {
 padding: 0px 30px 0 0;
	font-size: 90%;
}
.contents-center img {
  max-width: 130px;
  height: auto;
}

/* media
------------------------------------------------------------*/
.middle-container {
  width: 1180px;
  margin: 0px auto 0px;
  display: table;
}
.contents-media1{
  width: 15%;
  display: table-cell;
  padding: 0 0 0 10px;	
	vertical-align: top;
}
.contents-media2{
  max-width: 85%;
  display: table-cell;
  padding: 0 0 0 10px;	
	vertical-align: top;
}
.sliderArea {
  width:100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
	justify-content: space-between;
}
.sliderArea div{
  padding: 0 10px;	
}
.sliderArea p{
font-size:70%;
	line-height: 120%;
	padding-top:0px;
}
.sliderArea div img {
  width: auto;
  height: 80px;
}


/*.media-flex{
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  margin: 0 auto;
  justify-content: flex-start;
  align-items: center;	
}
*/
/* access
------------------------------------------------------------*/
.bottom-container {
  display: table;
	width: 1180px;
  margin: 0 auto;
}

.contents-access1 {
  width: 15%;
  display: table-cell;
  padding: 5px 0 0 10px;
vertical-align: top;
}
.contents-access2 {
  width:85%;
  display: table-cell;
  padding: 10px 0 0 10px;
	vertical-align: top;
}
.contents-access2 p{
font-size: 90%;
}

@media (max-width: 1350px) {
.wrapper {
	grid-template-rows: 15vh 45vh 15vh 25vh ;
/*grid-template-rows: 14% 53% 23% 10% ;*/
}


.up-container {
  display: table;
	width: 100%;
  margin: 0 auto;
}
.contents-left {
  width: 15%;
  display: table-cell;
  padding: 0px 0 0 10px;
	vertical-align: top;
	text-align: left;
}
.contents-center {
  width: 10%;
  display: table-cell;
  padding: 0px 15px 0 10px;
	vertical-align: top;
}

.contents-right {
  width: 75%;
  display: table-cell;
  padding: 0;	
  vertical-align: top;
}
.contents-center img {
  max-width: 120px;
  height: auto;
}
.contents-right p {
 padding: 0px 30px 0 0;
	font-size: 85%;
}	
  /* middle-container
------------------------------------------------------------*/
.middle-container {
  width: 100%;
  margin: 0px auto 0px;
  display: table;
}	
.contents-media1{
  width: 15%!important;
  display: table-cell;
  padding: 0px 0 0 10px;
	vertical-align: top;
	text-align: left;
}
.contents-media2{
  width: 85%;
  display: table-cell;
  padding: 0;	
	vertical-align: top;
}
.sliderArea {
  margin: 0 ;
  padding: 0 0px 0 2px;
	width:100%;
	max-width:720px;
	overflow-x: auto;
	}
/*===========
scrollbar
===========*/
.sliderArea::-webkit-scrollbar {
  height:8px;
	position: absolute;
 width:100%;
	left:0px;
	bottom:0px;
	z-index: 1001;
}

.sliderArea::-webkit-scrollbar-track {
  background: #ccc;
	
}
.sliderArea::-webkit-scrollbar-thumb {
  background: #333;
  border: none;
}
.sliderArea::-webkit-scrollbar-thumb:hover {
  background: #000;
}

.sliderArea div img {
  width: auto;
  height: 70px;
}
/* bottom-container
------------------------------------------------------------*/
.bottom-container {
  display: table;
	width: 100%;
  margin: 0 auto;
}
.contents-access1 {
  width: 15%;
  display: table-cell;
  padding: 0px 0 0 10px;
		vertical-align: top;
	text-align: left;
}
.contents-access2 {
  width:85%;	
  display: table-cell;
  padding: 10px 0 0 10px;
	vertical-align: top;
	text-align: left;
}
.contents-access2 p{
font-size: 85%;
}
}

@media screen and (max-width: 960px), screen and (max-height: 620px) { 
.wrapper {
grid-template-rows: none;
	min-width:2370px;
}
.up-container {
  display: table;
	width: 40%;
  margin: 0 auto;
}
.contents-left {
  width: 25%;
  display: table-cell;
  padding: 0px 10px 0 20px;
	vertical-align: top;
	text-align: right;
}
.contents-center {
  width: 30%;
  display: table-cell;
  padding: 0px 0px 0 0px;
	vertical-align: top;
	text-align: center;
}
.contents-center p img {
	width: 100%;
	 max-width:163px;
	 height:auto;	
	}
.contents-right {
  width: 45%;
  display: table-cell;
  padding: 0 40px 0 0;	
  vertical-align: top;
}
.contents-right p {
	width:100vw;
	max-width:300px;	
 padding: 0px 0 0 10px;
}
  /* middle-container
------------------------------------------------------------*/
.middle-container {
  width: 32%;
  margin: 0px auto 0px;
  display: table;
}	
.contents-media1{
  width: 25%!important;
  display: table-cell;
  padding: 0px 0 0 0px;
	vertical-align: top;
	text-align: left;
}
.contents-media2{
  width: 75%;
  display: table-cell;
  padding: 0 0 0 10px;	
	vertical-align: top;
}
.sliderArea div img {
  width: auto;
  height: 100px;
}
.sliderArea {
	width:100%;
  max-width:400px;
  margin: 0 ;
  padding: 0 40px 0 20px;
	overflow-x: auto;
}	
/* bottom-container
------------------------------------------------------------*/
.bottom-container {
  display: table;
	width: 28%;
  margin: 0 auto;
}
.contents-access1 {
  width: 25%;
  display: table-cell;
  padding: 0px 0 0 0px;
		vertical-align: top;
	text-align: right;
}
.contents-access2 {
  width:75%;
  display: table-cell;
  padding: 0px 0 0 0px;
	font-size:85%;
	vertical-align: top;
}
.bottom-container p{
font-size:90%;
}
}
@media screen and (max-height: 620px) { 
.contents-center {
  width: 24%;
  display: table-cell;
  padding: 0px 0px;
	vertical-align: top;
	text-align: center;
}
.contents-center p img {
	width: 100%;
	 max-width:110px;
	 height:auto;	
	}	
.contents-right {
  width: 51%;
  display: table-cell;
  padding: 0 0px 0 10px;	
  vertical-align: top;
}	
.contents-right p {
	width:100vw;
	max-width:500px;	
 padding: 0px 0 0 0px;
}
}
/*@media (max-width: 650px) {
.wrapper {
  width: 1080px;
  display: grid;
grid-template-rows: 14% 56% 20% 10% ;
  height: 85vh;
	padding-right:30px;
	padding-top:2%;
	padding-left: 80px;
}




}*/