@charset "utf-8";

/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.header{ height:102px; background:#062661; }
.header .top{ height:42px; color:#fff; font-size:12px; text-align:right; padding:10px 0; }
.header .top span.name { position:absolute;left:170px; color:#ffffff; }
.header .bg-img{ position:relative; height:60px; background:url(../images/header_bg_img.png) center top / cover no-repeat; }
.header .logo{ padding:14px 0 0 10px; }
/*
.header ul{ width:715px; position:absolute; top:0; right:0; }
.header li a{ display:block; float:left; width:160px; color:#fff; text-decoration:none; text-align:center; font-size:16px; font-weight:bold; background:url(../images/header_nav_bar.png) center top no-repeat; padding:15px 0; }
.header li:not(:first-of-type) a{ margin-left:25px; }
*/
.header ul{ width:715px; position:absolute; top:0; right:0; }
.header ul{ display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end; }
.header li a{ display:block; margin-left:25px; width:160px; color:#fff; text-decoration:none; text-align:center; font-size:16px; font-weight:bold; background:url(../images/header_nav_bar.png) center top no-repeat; padding:15px 0; }
.header .btn{ position:absolute; top:60px; right:10px; }
header p.top
{
  background-image:url(../images/logo.png);
  background-position:0 center;
  background-size:150px 33px;
  background-repeat:no-repeat;
}
header p.top a
{
  position:absolute;
  display:block;
  width:150px;
  height:33px;
  top:5px;
  left:0;
}
header div.bg-img h1.logo
{
  display:none;
}

/* sbt **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.sbt{ height:75px; color:#fff; text-align:center; font-size:30px; font-weight:bold; background:url(../images/sbt_bg.png) center top / cover no-repeat; padding:14px 10px 0; letter-spacing:4px; }


/* card list **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.card-list{ display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; }
/*.card-list li{ display:table; position:relative; width:285px; background:#fff; padding-top:10px; margin-bottom:20px; line-height:1.4; border-radius:5px; }*/
/*.card-list li{ display:block; overflow:hidden; position:relative; width:285px; background:#fff; padding-top:10px; margin-bottom:20px; line-height:1.4; border-radius:5px; border:solid 1px #dde1ec; }*/
.card-list li{ display:block; position:relative; width:285px; background:#fff; padding-top:10px; margin-bottom:20px; line-height:1.4; border-radius:5px; border:solid 1px #dde1ec; }
.card-list.boat-list li{ height:382px; }
.card-list.shop-list li{ height:302px; }
.card-list li:not(:nth-of-type(4n + 1)){ margin-left:20px; }
.card-list li a{ color:#062661; text-decoration:none; }
.card-list li p { width:calc(100% - 20px); width:-webkit-calc(100% - 20px); word-break:break-all; border-bottom:solid 1px #e5e5e5; padding:5px 10px; margin:0 10px 5px; }
.card-list li p { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.card-list li p.short{ width:calc(100% - 100px); width:-webkit-calc(100% - 100px); word-break:break-all; border-bottom:solid 1px #e5e5e5; padding:5px 10px; margin:0 10px 5px; }
/*.card-list li .mark{ float:right; margin-right:10px; }*/
.card-list li .mark{ position:absolute; top:10px; right:10px; }
.card-list li .country{ position:relative; width:70px; height:27px; margin-bottom:5px; }
.card-list li .mfr-logo{ position:relative; width:70px; height:47px; background:#eee; }
.card-list li .mark img{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
.card-list li .name{ width:100%; background:#ebf2f8; text-align:center; border-bottom:none; padding:8px 10px 6px; margin:10px 0 5px; }
/*.card-list li .pic img{ width:100%; height:auto; border-radius:0 0 5px 5px; }*/
/*.card-list li .pic{ text-align:center; line-height:186px; }*/
/*
.card-list li .pic:before{ content: "";	height:186px; display:inline-block; vertical-align:middle; }
*/
.card-list li .pic img { vertical-align:middle; }
.card-list li p.noline  { border:none; }

/* card list - 追加*/
.card-list li .pic
{
  display:table-cell; text-align:center; vertical-align:middle;
  width:285px; height:213px;
}
.card-list li .pic *
{
  width:auto; height:auto;
  max-width:285px; max-height:213px;
}
.card-list li div.card-list-wrap
{
  overflow:hidden; border-radius:5px; height:370px; /* = card-list height:382px - padding-top:10px - border:1px * 2  */
}

/*++ modal +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div.modal
{
  display:none;
  position:absolute;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
/*  background:rgba(0,0,0,0.1);*/
  text-align:center;
}
div.modal div
{
  display:inline-block; /* for center */
  margin-top:50px;
  width:500px;
  padding:40px 20px;
  background:#ffffff;
  position:relative; /* for close */
  z-index:1;

  box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
  border:solid 1px #3163bf;
  text-align:center;
}
div.modal div input.close
{
  position:absolute;
  top:5px;
  right:5px;
  font-size:15px;
  cursor:pointer;

  border:none;
  background:none;
  margin:0;
  padding:0;
  width:30px;
  height:30px;
  color:#444444;
}
div.modal div p
{
  margin:0;
  margin-bottom:14px;
}

/*sort*/
.sort{ display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content:center; margin-top:10px; }
.sort li{ width:50px; height:30px; color:#fff; background:#3163bf; text-align:center; padding-top:2px; margin:0 5px; }
.sort li a{ display:block; color:#fff; text-decoration:none; }
.sort li.prev{ background:#3163bf url(../images/arrow_r_white.png) center / 6px 11px no-repeat; transform:scale(-1, 1); }
.sort li.next{ background:#3163bf url(../images/arrow_r_white.png) center / 6px 11px no-repeat; }
.sort li.active , .sort li:hover{ background-color:#6c96e5 !important; }


/* table **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
table.list-row{ width:100%; }
table.list-row th , table.list-row td{ border-bottom:solid 1px #e5e5e5; padding:10px; vertical-align:middle; }

table.list-row th{ width:200px; color:#062661; font-weight:bold; }


/* ★★★ タブレット ★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 768px){
/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.header{ height:56px; }
.header .top , .header ul{ display:none; }
.header .bg-img{ height:auto; }
.header .bg-img div h1 span.name { display:block; position:absolute; top:17px; right:58px; margin:0; color: #ffffff; }
.header .logo{ padding:10px 0; }
.header .logo img{ width:auto; height:35px; }
.header .btn{ position:static; padding-bottom:10px; }
.header .btn a{ display:block; width:100%; background:#4a94df; text-align:center; }
  header div.bg-img h1.logo
  {
    display:block;
  }

/* sp gnav */
.sp-gnav{ border-top:none; }


/* sbt **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.sbt{ height:80px; font-size:20px; padding:24px 10px 0; letter-spacing:2px; }


/* card list **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.card-list li{ width:calc(100% / 2 - 5px); width:-webkit-calc(100% / 2 - 5px); }
.card-list li{ width:calc(100% / 2 - 5px); width:-webkit-calc(100% / 2 - 5px); height:calc(100% / 2 - 5px); height:-webkit-calc(100% / 2 - 5px); }
.card-list li:not(:nth-of-type(4n + 1)){ margin-left:0; }
.card-list li:not(:nth-of-type(odd)){ margin-left:10px; }

/*sort*/
.sort{ margin-top:0; }
.sort li{ width:calc(100% / 7 - 4px); width:-webkit-calc(100% / 7 - 4px); margin:0 2px; }

/* table **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
table.list-row th , table.list-row td{ display:block; border-bottom:none; }
table.list-row th{ width:100%; padding:5px 0 0; }
table.list-row td{ padding:0 0 8px; }

}


/* ★★★ スマホ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 414px){ /* iPhone6Plus */
/* card list **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.card-list li{ width:100%; margin-left:0 !important; }
.card-list li{ width:100%; height:auto; margin-left:0 !important; }

}