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

.pagenation{
display: table;
margin: 200px auto 0;
}
.pagenation a{
margin: 0 5px;
}
.pagenation .old{
color: #ddd;
}

.hero-title h1{
color: #fff;
}
.hero-title h1 span{
display: block;
font-size: 1.8em;
}

p.text-descrip{
line-height: 200%;
color: #666;
text-align: justify;
}
span.text-region{
border-top: 1px dashed #333;
padding-top: 10px;
display: block;
margin-top: 10px;
}
span.text-region a{
font-size: 1.2em;
text-decoration: underline;
color:#AC0E11;
}

h2{
color: #158fa6;
}


/* お知らせ */
#news{
background:#fff;
box-shadow: 0px 3px 8px 0px #ccc;
}
#news ul{
margin: 0 auto;
}
#news li{
border-bottom: 1px solid #eee;
}
#news li:last-child{
border-bottom: none;
}
#news ul li:after {
content: "."; 
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#news li img{
float: left;
object-fit: cover;
box-shadow: 0 0 0 1px #eee;
}
#news li div{
float: right;
position: relative;
}
#news li div time,#article header p{
color: #999;
}
#news li div h3{
text-overflow: ellipsis;
overflow : hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
}
#news li div a{
position: absolute;
bottom: 0;
right: 0;
}
#news li div a i{
margin-left: 4px;
}
#article header h3{
font-size: 1.4em;
font-weight: bold;
border-bottom: 2px solid #454f5b;
}
#article .article-detail{
margin-top: 30px;
font-size: 1.2em;
}
#article .article-detail p{
margin-bottom: 20px;
}

#region p.click{
font-size: 1.2em;
margin-bottom: 10px;
}
#region p.click::before{
content: "▼";
}
#regionNav{
margin-bottom: 40px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#regionNav li a{
background: #666;
color: #fff;
display: block;
text-align: center;
padding: 5px 0;
}
#region article{
padding-top:100px;
margin-top:-100px;
margin-bottom: 40px;
}
#region article h3{
font-size: 1.2em;
letter-spacing: 0.2em;
color: #158fa6;
padding: 5px 0;
border-top: solid 1px #158fa6;
border-bottom: solid 1px #158fa6;
}
#region article h3::before{
content: "●";
}
#region article ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 15px;
}

/* 企業支援 */
#select h3{
margin-bottom: 10px;
background: url(../images/select.png) no-repeat left center;
background-size: 18px;
padding-left: 24px;
padding-top: 6px;
}
#select ol li{
color: #fff;
background: #158fa6;
}
#check ul li div{
position: relative;
z-index: 0;
}
#check ul li:nth-child(1) div{
background: url(../images/check1.jpg) no-repeat center center;
background-size: cover;
}
#check ul li:nth-child(2) div{
background: url(../images/check2.jpg) no-repeat center center;
background-size: cover;
}
#check ul li:nth-child(3) div{
background: url(../images/check3.jpg) no-repeat center center;
background-size: cover;
}
#check ul li:nth-child(4) div{
background: url(../images/check4.jpg) no-repeat center center;
background-size: cover;
}
#check ul li div h3{
text-align: center;
position: absolute;
top: 50%;
z-index: 0;
width: 100%;
transform: translate(0, -50%);
background: rgba(0,0,0,0.70);
color: #fff;
padding: 8px 0;
}
#check ul li div h3 span{
display: block;
color: #158fa6;
}
#shop ul li img{
object-fit: cover;
}
#shop ul li div{
background: #fff;
}
#shop ul li h3{
font-size: 1.2em;
padding-bottom: 6px;
border-bottom: 1px solid #454f5b;
}
#shop ul li table{
margin-top: 20px;
}
#shop ul li table th,#shop ul li table td{
padding-bottom: 15px;
}
#shop ul li table th{
width: 70px;
}
#shop table td span{
color:#BC3032;
}

/* 海外の取り組み */
#overseas article ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

/* 法人概要 */
#overview article:first-child{
margin-bottom: 100px;
}
#overview table tr th,#overview table tr td{
padding: 20px 0;
}
#overview table tr th{
color: #158fa6;
border-top: 1px solid #158fa6;
}
#overview table tr td{
border-top: 1px solid #999999;
}
#overview table tr:last-of-type th{
border-bottom: 1px solid #158fa6;
}
#overview table tr:last-of-type td{
border-bottom: 1px solid #999999;
}
#overview iframe{
width: 100%;
border: 1px solid #158fa6;
}



/*横幅480px以下*/
@media screen and (max-width:480px){
span.text-region a{
display: block;
}
  
.hero-title{
padding: 5%;
}
#news li{
margin-bottom: 20px;
padding-bottom: 20px;
}
#news li:last-child{
margin-bottom: 0;
padding-bottom: 0;
}
#news li img{
height: 60px;
}
#news li div{
height: 80px;
}
#news li div h3{
-webkit-line-clamp: 2;
}

#region ul li p img{
width: 100%;
height: auto;
}

#check ul li h3{
font-size: 1.3em;
}
#check ul li h3 span{
font-size: 0.8em;
}
#check ul li div{
width: 100%;
height: 150px;
}
#check ul li p{
margin-top: 5px;
}

#shop ul li img{
height: 180px;
}
	
#overview table tr th{
width: 80px;
}
#overview table td span{
display: block;
}
}

/*横幅481px以上*/
@media screen and (min-width:481px){
span.text-region a{
margin-left: 10px;
}
  
#news li{
margin-bottom: 40px;
padding-bottom: 40px;
}
#news li:last-child{
margin-bottom: 0;
padding-bottom: 0;
}
#news li div h3{
-webkit-line-clamp: 3;
}
	
#overview table tr th{
width: 100px;
}
#overview iframe{
height: 350px;
}
}

/*横幅481px〜768px*/
@media (min-width:481px) and (max-width:768px){
.hero-title{
padding: 2.5% 5%;
}
#news li img{
height: 120px;
}
#news li div{
height: 120px;
}
#news li div h3{
margin-top: 10px;
}
	
#check ul li:after {
content: "."; 
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#check ul li div{
float: left;
width: 45%;
height: 150px;
}
#check ul li p{
float: right;
width: 50%;
}
	
#shop ul li img{
height: 300px;
}
}

/*横幅768px以下*/
@media screen and (max-width:768px){
.hero-title{
position: absolute;
bottom: -100px;
left: 5%;
width: 80%;
background: #158fa6;
box-shadow: 0px 3px 8px 0px #ccc;
}
.hero-img{
height: 150px;
position: relative;
}
.hero-img h1{
text-align: center;
}
#newsImg{
background: url(../images/heroimg-news.jpg) no-repeat center center;
background-size: cover;
}
#regionImg{
background: url(../images/heroimg-region.jpg) no-repeat center center;
background-size: cover;
}
#corporateImg{
background: url(../images/heroimg-corporate.jpg) no-repeat center center;
background-size: cover;
}
#overseasImg{
background: url(../images/heroimg-overseas.jpg) no-repeat center center;
background-size: cover;
}
#overviewImg{
background: url(../images/heroimg-overview.jpg) no-repeat center center;
background-size: cover;
}
	
p.text-descrip{
width: 90%;
margin: 110px auto 0;
}
	
.contents{
width: 90%;
margin: 60px auto;
}
h2{
padding-left: 44px;
background: url(../images/border.gif) no-repeat left center;
background-size: 40px;
margin-bottom: 20px;
}


#news{
padding: 10% 0;
}
#news ul{
width: 80%;
}
#news li img{
width: 30%;
}
#news li div{
width: 65%;
}
#article article{
margin: 120px auto 0;
}
	
#regionNav li{
flex-basis: 23.5%;
}
#regionNav li:not(:nth-child(4n)){
margin-right: 2%;
}
#regionNav li:nth-child(n + 5){
margin-top: 2%;
}
#region article li,#overseas article li{
flex-basis: 49%;
}
#region article li:nth-child(2n),#overseas article li:nth-child(2n){
margin-left: 2%;
}
#region article li:nth-child(n + 3),#overseas article li:nth-child(n + 3){
margin-top: 2%;
}
	
#shop,#select{
margin-bottom: 60px;
}
#select h3{
font-size: 1em;
}
#select ol li{
width: 96%;
padding: 10px 2%;
margin-bottom: 10px;
}
#check ul li{
margin-bottom: 20px;
}
#check ul li:last-child{
margin-bottom: 0;
}
	
#shop ul li{
background: #fff;
margin-bottom: 30px;
}
#shop ul li img{
display: block;
width: 90%;
margin: 0 auto;
padding-top: 5%;
}
#shop ul li div{
width: 90%;
padding: 5%;
}
}

/*横幅769px以上*/
@media screen and (min-width:769px){
.hero-img{
padding-left: 65%;
width: 35%;
margin-top: 70px;
}
.hero-title{
width: 80%;
padding: 140px 10%;
background: #158fa6;
}
#newsImg{
background: url(../images/heroimg-news.jpg) no-repeat center left;
background-size: 65% auto;
}
#regionImg{
background: url(../images/heroimg-region.jpg) no-repeat center left;
background-size: 65% auto;
}
#corporateImg{
background: url(../images/heroimg-corporate.jpg) no-repeat center left;
background-size: 65% auto;
}
#overseasImg{
background: url(../images/heroimg-overseas.jpg) no-repeat center left;
background-size: 65% auto;
}
#overviewImg{
background: url(../images/heroimg-overview.jpg) no-repeat center left;
background-size: 65% auto;
}

p.text-descrip{
padding: 50px;
position:relative;
background:#fff;
overflow:hidden;
}
p.text-descrip:before {
content:"";
position:absolute;
top:0;
right:0;
border-width:0 16px 16px 0;
border-style:solid;
border-color:#f2f2f2 #f2f2f2 #ddd #ddd;
background:#ddd;
display:block; width:0; 
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
	
h2{
padding-left: 84px;
background: url(../images/border.gif) no-repeat left center;
background-size: 80px;
margin-bottom: 30px;
}

#news li div h3{
margin-top: 20px;
font-size: 1.2em;
}
#article article{
width: 700px;
margin: 0 auto;
}
#article header h3{
margin-top: 6px;
}
	
#regionNav li{
flex-basis: 9.1%;
}
#regionNav li:not(:nth-child(10n)){
margin-right: 1%;
}
#regionNav li:nth-child(n + 11){
margin-top: 1%;
}
#region article li,#overseas article li{
flex-basis: 32%;
}
#region article li:not(:nth-child(3n)),#overseas article li:not(:nth-child(3n)){
margin-right: 2%;
}
#region article li:nth-child(n + 4),#overseas article li:nth-child(n + 4){
margin-top: 2%;
}
	
#shop,#select{
margin-bottom: 100px;
}
#select h3{
font-size: 1.4em;
}
#select ol li{
width: 46%;
padding: 10px 1%;
}
#select ol li:nth-child(-n + 2){
margin-bottom: 10px;
}
#select ol li:nth-child(odd){
float: left;
}
#select ol li:nth-child(even){
float: right;
}
#check ul li{
float: left;
}
#check ul li:last-child{
margin-right: 0;
}
#check ul li p{
margin-top: 10px;
}
#shop ul li{
margin-bottom: 60px;
}
#shop ul li:nth-child(odd) img{
float: left;
}
#shop ul li:nth-child(odd) div{
float: right;
}
#shop ul li:nth-child(even) img{
float: right;
}
#shop ul li:nth-child(even) div{
float: left;
}
#shop ul li:after {
content: "."; 
display: block;
clear: both;
height: 0;
visibility: hidden;
}
}

/*横幅769px〜1024px*/
@media (min-width:769px) and (max-width:1024px){
p.text-descrip{
width: 600px;
margin: 50px auto 0;
}
.contents{
width: 700px;
margin: 50px auto 100px;
}

#news{
width: 700px;
padding: 50px 0;
}
#news ul{
width: 600px;
}
#news li img{
width: 180px;
height: 140px;
}
#news li div{
width: 400px;
height: 140px;
}
	
#check ul li{
width: 160px;
margin-right: 20px;
}
#check ul li div{
width: 160px;
height: 160px;
}
#shop ul li img{
width: 400px;
height: 350px;
}
#shop ul li div{
width: 250px;
height: 300px;
padding: 25px;
}
}

/*横幅1024pxpx以下*/
@media screen and (max-width:1024px){
.hero-img{
margin-top: 60px;
}
	
#overview table{
width: 100%;
}
#overview table:nth-child(1) tr:last-of-type th,#overview table:nth-child(1) tr:last-of-type td{
border-bottom: none;
} 
}

/*横幅1025px以上*/
@media screen and (min-width:1025px){
p.text-descrip{
width: 900px;
margin: 100px auto 0;
}
.contents{
width: 1000px;
margin: 100px auto;
}

#news{
width: 1000px;
padding: 80px 0;
}
#news ul{
width: 768px;
}
#news li img{
width: 250px;
height: 170px;
}
#news li div{
width: 450px;
height: 170px;
}
	
#check ul li{
width: 220px;
margin-right: 40px;
}
#check ul li div{
width: 220px;
height: 220px;
}
#shop ul li img{
width: 600px;
height: 400px;
}
#shop ul li div{
width: 300px;
height: 300px;
padding: 50px;
}
	
#overview table{
width: 480px;
}
#overview table:nth-child(1){
float: left;
}
#overview table:nth-child(2){
float: right;
}
}