@charset "utf-8";

/*【size】div.boat-detail +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div.boat-detail
{
  background-color:#ffffff;
  padding:40px;
}
div.boat-detail div.detail-header
{
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
}
div.boat-detail div.detail-header div.photo
{
  width:542px;
  height:407px;
  margin-right:18px;
  margin-bottom:20px;
}
div.boat-detail div.detail-header div.photo ul.thumb-item li div
{
  width:540px;
  height:405px;
}
div.boat-detail div.detail-header div.right
{
  width:560px;
  padding-left:20px;
  margin-bottom:20px;
}
div.boat-detail div.detail-header div.thumb
{
  width:100%;
  margin-bottom:20px;
}
div.boat-detail div.detail-header div.thumb ul li div
{
  width:100px;
  height:100px;
}
div.boat-detail div.detail-shop
{
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
}
div.boat-detail div.detail-shop div.photo-frame
{
  width:560px;
  height:420px;
/*  padding-right:20px;*/
  margin-bottom:20px;
}
div.boat-detail div.detail-shop div.right
{
  width:560px;
  padding-left:20px;
  margin-bottom:20px;
}
@media only screen and (max-width:768px)
{
  div.boat-detail
  {
    padding:10px;
  }
  div.boat-detail div.detail-header
  {
  }
  div.boat-detail div.detail-header div.photo
  {
    width:100%;
    height:auto;
    margin-right:0;
  }
  div.boat-detail div.detail-header div.photo ul.thumb-item li div
  {
/*    display:inline;*/
    width:100%;
/*    height:auto;*/
  }
  div.boat-detail div.detail-header div.photo ul.thumb-item li div img
  {
/*    width:100%;*/
    height:auto;
    margin:0;
max-width: 100%;
  }
  div.boat-detail div.detail-header div.right
  {
    width:100%;
    padding-left:0;
  }
  div.boat-detail div.detail-header div.right ul
  {
    width:100%;
  }
  div.boat-detail
  {
  }
 
  /* div.thumb - width & arrow */
  div.boat-detail div.detail-header div.thumb .slide-arrow{ position:absolute; width:20px; height:auto; z-index:1; cursor:pointer; }
  div.boat-detail div.detail-header div.thumb .prev-arrow{ top:calc(50% - 26px); left:-22px; }
  div.boat-detail div.detail-header div.thumb .next-arrow{ top:calc(50% - 26px); right:-22px; }
  div.boat-detail div.detail-header div.thumb { width:calc(100% - 44px); margin-left:22px; }

  /* 位置の入れ替え */
  div.boat-detail div.detail-header div.photo{ -ms-flex-order:1; -webkit-order:1; order:1; }
  div.boat-detail div.detail-header div.right{ -ms-flex-order:3; -webkit-order:3; order:3; }
  div.boat-detail div.detail-header div.thumb{ -ms-flex-order:2; -webkit-order:2; order:2; }

  /* detail-shop */
  div.boat-detail div.detail-shop div.photo-frame
  {
    width:100%;
    height:auto;
    padding-right:0;
  }
  div.boat-detail div.detail-shop div.photo-frame img
  {
    width:100%;
    height:auto;
    margin:0 auto;
  }
  div.boat-detail div.detail-shop div.right
  {
    width:100%;
    padding-left:0;
  }
  div.boat-detail div.detail-shop div.right ul
  {
    width:100%;
  }
}

/*【other】各種設定 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* div.boat-title +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div.boat-detail div.boat-title
{
  position:relative; /* for ::after */
  margin-bottom:23px; /* image height + margin */
  text-align:center;
  color:#333333;
}
div.boat-detail div.boat-title h2
{
  text-align:center;
  font-size:30px;
  font-weight:bold;
}
div.boat-detail div.boat-title h3
{
  text-align:center;
}
div.boat-detail div.boat-title::after
{
  position:absolute;
  content: "";
  left: 50%;
  bottom: -3px; /* = image height */
  width: 100px;
  height: 3px;
  margin-left: -50px; /* image width / 2 */
  background: url(../images/sbt_bar.png) top left / 100px 3px no-repeat;
}

/* div.boat-header ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* photo thumb-item +++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div.boat-detail div.detail-header div.photo ul.thumb-item
{
  border:solid 1px #cccccc;
}

/* right ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div.boat-detail div.detail-header div.right dl.boat-price
{
  justify-content: space-between;
  align-items: center;
  height:120px;
  background-color:#ebf2f8;
  border-left:solid 10px #062661;
  color:#062661;
  font-weight:bold;
}
/* 青 */
div.boat-detail div.detail-header div.right dl.boat-price.blue
{
  background-color:#e0f0ff;
  border-left:solid 10px #4894e0;
/*  color:#4894e0;*/
}
div.boat-detail div.detail-header div.right dl.boat-price dt
{
  width:110px;
  padding-left:20px;
  color:#062661;
  border:none;
}
div.boat-detail div.detail-header div.right dl.boat-price dd
{
  border:none;
}
div.boat-detail div.detail-header div.right dl.boat-price dd span
{
  font-size:30px;
}
div.boat-detail div.detail-header div.right ul li
{
  width:100%;
  height:85px;
  margin-top:10px;
  text-align:center;

  /* arrow */
  background-position:right 10px center;
  background-size:12px 20px;
  background-repeat:no-repeat;
}
div.boat-detail div.detail-header div.right ul.col4
{
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
  justify-content: space-between;
  margin-top:10px;
}
div.boat-detail div.detail-header div.right ul.col4 li
{
  margin-top:0px;
  width:120px;
  height:75px;
  background:#f2f2f2;
  display:table;
}
div.boat-detail div.detail-header div.right ul.col4 li div
{
  display:table-cell;
  margin:0;
  text-align:center;
  vertical-align:middle;
}
div.boat-detail div.detail-header div.right ul.col4 li div img
{
  max-width:120px;
  height:auto;
}
@media only screen and (max-width:520px)
{
  div.boat-detail div.detail-header div.right ul.col4 li
  {
    width:90px;
    height:56px;
  }
  div.boat-detail div.detail-header div.right ul.col4 li div img
  {
    max-width:90px;
    height:56px;
  }
}
@media only screen and (max-width:400px)
{
  div.boat-detail div.detail-header div.right ul.col4 li
  {
    width:70px;
    height:44px;
  }
  div.boat-detail div.detail-header div.right ul.col4 li div img
  {
    max-width:70px;
    height:44px;
  }
}
div.boat-detail div.detail-header div.right ul.col2
{
  display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;
  justify-content: space-between;
}
div.boat-detail div.detail-header div.right ul.col2 li
{
  width:49%;
}
div.boat-detail div.detail-header div.right ul li a
{
  display:block;
  width:100%;
  height:85px; /* li height */
  text-decoration:none;
  font-size:18px;
  font-weight:bold;
  line-height:1.4;
  text-align:left;

  /* icon & text location */
  background-size:24px 24px;
  background-repeat:no-repeat;
}
/* icon & text location - padding-left=position+35px */
div.boat-detail div.detail-header div.right ul      li a { background-position:150px center; padding:31px 0 0 185px; }
div.boat-detail div.detail-header div.right ul.col2 li a { background-position: 30px center; padding:31px 0 0  65px; }

div.boat-detail div.detail-header div.right ul      li a:hover { opacity:0.8; }
div.boat-detail div.detail-header div.right ul      li.icon-mitumori   { background-color:#ffede4; background-image:url(../images/arrow_r_red.png);    border:solid 1px #d93349; }
div.boat-detail div.detail-header div.right ul      li.icon-favorite   { background-color:#fff8dc; background-image:url(../images/arrow_r_yellow.png); border:solid 1px #cca400; }
div.boat-detail div.detail-header div.right ul      li.icon-print      { background-color:#ffffff; background-image:url(../images/arrow_r_black.png);  border:solid 1px #000000; }
div.boat-detail div.detail-header div.right ul      li.icon-shop       { background-color:#f1ffff; background-image:url(../images/arrow_r_blue.png);   border:solid 1px #1797da; }
div.boat-detail div.detail-header div.right ul      li.icon-mitumori a { color:#d93349; background-image:url(../images/icon_estimate.png);  }
div.boat-detail div.detail-header div.right ul      li.icon-favorite a { color:#cca400; background-image:url(../images/icon_favorite.png);  }
div.boat-detail div.detail-header div.right ul      li.icon-print    a { color:#000000; background-image:url(../images/icon_print.png);     }
div.boat-detail div.detail-header div.right ul      li.icon-shop     a { color:#1797da; background-image:url(../images/icon_shop_blue.png); }
@media only screen and (max-width:768px)
{
  /* icon & text location - padding-left=position+35px */
  div.boat-detail div.detail-header div.right ul      li a { background-position: 30px center; padding:31px 0 0  65px; }
  div.boat-detail div.detail-header div.right ul.col2      { display:inline; }
  div.boat-detail div.detail-header div.right ul.col2 li   { width:100%; }
}

/* div.thumb ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div.boat-detail div.detail-header div.thumb ul li
{
  cursor:pointer;
}

/* div.detail-list ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div.boat-detail div.detail-list dl
{
  margin-bottom:20px;
}

/* div.detail-option ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div.boat-detail div.detail-option ul.option
{
  max-width:1200px;
  width:100%;
}
div.boat-detail div.detail-option ul.option
{
  display:-webkit-box; display:-webkit-flex; display:flex;                        /* flex */
  -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;                     /* fex:wrap */
  -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; /* flex:both end */
  margin-bottom:20px;
}
div.boat-detail div.detail-option ul.option li
{
  width:150px;
  width:calc(100% / 7 - 5px); width:-webkit-calc(100% / 7 - 5px);
  margin:0 0 5px 0;
}
div.boat-detail div.detail-option ul.option li
{
  border:solid 1px #062661;
  border-left:solid 4px #062661;
  color:#062661;
  text-align:center;
}
/* for flex space between 最後の行を左寄せ：最大col-1col分<li class='flex-sb-dummy'></li>  */
div.boat-detail div.detail-option ul.option li.flex-sb-dummy
{
  height:0;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
div.boat-detail div.detail-option div.remark
{
  border:solid 4px #e5e5e5;
  padding:15px;
  margin-bottom:20px;
}
@media only screen and (max-width:768px) { div.boat-detail div.detail-option ul.option li { width:calc(100% / 4 - 5px); width:-webkit-calc(100% / 4 - 5px); margin-right:0; } } /* col4 */
@media only screen and (max-width:640px) { div.boat-detail div.detail-option ul.option li { width:calc(100% / 3 - 5px); width:-webkit-calc(100% / 3 - 5px); margin-right:0; } } /* col3 */
@media only screen and (max-width:480px) { div.boat-detail div.detail-option ul.option li { width:calc(100% / 2 - 5px); width:-webkit-calc(100% / 2 - 5px); margin-right:0; } } /* col2 */