@charset "utf-8";

html,body,h1,h2,h3,p,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  }
ul{
  list-style: none;
}

a{
  text-decoration: none;
  color:inherit;
}
img{
  border: none;
  vertical-align:bottom;
  max-width:100% ;
  height:auto;
}
/* css共通 */
.container{
  max-width:960px;
  margin: 0 auto;
  display:flex;
  padding: 0 10px;
  color: #333;
}


/* header */
header{
  background: #0621ee;
  padding: 20px 0;
 
}

header .container{
  color: #fff;
  justify-content: space-between;
  align-items: center;
}

h1{
  font-size: 22px;
  background: url(../img/logo.png) no-repeat left center;
  padding-left:53px;
  line-height: 50px;
}

header p{
  line-height: 1.5;
}
 /* Navigation ..................*/
/* PC用 Nav */
.pcnav{
  padding: 20px 0;
 }
 
.pcnav li{
  margin-right: 20px;
}
.pcnav a{
  padding: 5px;
}
.pcnav a:hover{
  color: #365699;
  border-bottom:5px solid #365699;
}

/* .current a,current a:hover{
  border-bottom:5px solid #f60;
} */

/* aにクラス */
.current,.pcnav .current:hover{
  border-bottom: 5px solid #f60;
  }

/* SP用 Nav */
.btn,.spnav{
  display: none;
}
/* トップへ戻るボタン */
.top{
  width: 50px;
  height: 50px;
  text-align: center;
  border:2px solid #0621ee;
  color: #0621ee;
  background-color:  rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  position: fixed;
  right: 5px;
  bottom:5px;

}
.top i{
  display: block;
  font-size: 35px;
  line-height: 50px;
}
/* KeyVis */
.KeyVis{
  /* vertical-align:middle; */
  padding: 100px 0;/*上下の余白*/
  font-size: 36px;
  color: #fff;
  font-weight: bold;
  line-height: 1.4;
  text-shadow:2px 2px 2px #0c2353;
  background: url(../img/mall_bg.jpg) no-repeat top center/cover;
  text-align: center;
}
.bg2{
   background: url(../img/02.png) no-repeat top center/cover;
}
.bg3{
  background: url(../img/03.png) no-repeat top center/cover;
}


/* ３カラム */
.wrap{
  justify-content: space-between;
  padding: 30px 10px;
}

.wrap>section{
  width:32%;
}

.wrap>section a{
  display: block;
}

.wrap>section a:hover{
  background: #fea;
}

.wrap>section h2{
  font-size: 18px;
  border-left: 5px solid #f60;
  padding-left: 5px;
  margin-bottom: 10px;
}
/*モール画像*/
.wrap>section img{
  width: 100%;/* 画像の縦横比の問題 */
  height: 200px;
  object-fit: cover;
  object-position: center;
  margin-bottom: 10px;
}
section p{
  line-height: 1.5;
}

/*フッター*/
footer{
  background:#0621ee ;
  color: #fff;
  text-align: center;
  padding: 30px 0;
}

/*メディアクエリ*/
@media screen and (max-width:767px){
  h1{
    font-size: 18px;
  }

  /* Navigation */
  .pcnav{
    display:none;
  }

   /* Sp menu */
.spnav{  
  position: absolute;
  width: 100%; 
  top: 162px;   
  /* display: block; */
}

.spnav li{
  line-height: 70px;
  font-size: 24px;
  text-align: center;
  color:#fff ;
  border-bottom: 1px solid #fff;
}
 
.spnav a{
  display: block;
  background: rgba(30,100,200,0.8);
}

 /* Sp btn */
.btn {
height: 70px;  
border: 1px solid #365699;
border-radius: 5px;
text-align: center;
font-size: 50px;
color:#365699;
background-image: linear-gradient(to bottom, #fff, #a0bbf5 );
display: block;
}

.btn i{
display:block;
line-height: 70px;
text-shadow: 1px 1px 2px #fff,-1px -1px 2px #000;
}

/*.btn i:last-child{
display: none;
}
.up i:first-child{
display: none;
}
.up i:last-child{
display: block;
}*/



/* KeyVis */
.KeyVis{
  padding: 50px 0;
  font-size: 26px;
  margin-bottom: 30px;
}
/* 3カラム→1カラム */
.wrap{
  display: block;
  margin: 10px 0;
}  
/*  左右10px取る*/

.wrap>section{
  width:auto;
  display: block;
}

.wrap>section img{
 
  height: 400px;
 }
 section p{
  margin-bottom: 10px;
 }


}

  @media screen and (max-width:549px){
 header{
   padding: 10px 0;
   text-align: center;
 }
  
 header>.container{
  display: block;
  }

  
h1{
  display: inline-block;
  /* 背景画像を文頭へ配置inline(幅高さの指定は出来ない) */
}

header p{
  display: none;
  }

  /*Sp nav位置調整*/
.spnav{
  top:142px;
  z-index: 999;
  }
 /*モール画像*/
.wrap>section img{ 
  height:250px;
  } 
   }