@charset "utf-8";

/* dl +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* dl flexbox +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div.detail dl { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }
div.detail dl dt, div.detail dl dd { box-sizing: border-box; }

/* dl default = detail ++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div.detail dl
{
  font-weight:bold;
  background-color:#ffffff;
}
div.detail dl dt
{
  padding:10px 0px 2px 10px;
  width:150px;
  color:#3163bf;
  border-bottom: solid 1px #e5e5e5;
}
div.detail dl dd
{
  padding:10px 10px 2px 0px;
  border-bottom: solid 1px #e5e5e5;
  /* % - dt:width - margin */
  width:calc(100% - 150px - 10px);
  width:-webkit-calc(100% - 150px - 10px);
}
div.detail dl.col2 dd
{
  /* % - dt:width - margin */
  width:calc(50% - 150px - 10px);
  width:-webkit-calc(50% - 150px - 10px);
}
div.detail dl.col3 dt
{
  width:100px;
}
div.detail dl.col3 dd
{
  /* % - dt:width - margin */
  width:calc(33% - 100px - 10px);
  width:-webkit-calc(33% - 100px - 10px);
}
@media only screen and (max-width:768px)
{
  div.detail dl.col2 dd
  {
    /* % - dt:width - margin */
    width:calc(100% - 150px - 10px);
    width:-webkit-calc(100% - 150px - 10px);
  }
  div.detail dl.col3 dd
  {
    /* % - dt:width - margin */
    width:calc(50% - 100px - 10px);
    width:-webkit-calc(50% - 100px - 10px);
  }
}
@media only screen and (max-width:500px)
{
  div.detail dl.col3 dt
  {
    /* % - dt:width - margin */
    width:150px;
  }
  div.detail dl.col3 dd
  {
    /* % - dt:width - margin */
    width:calc(100% - 150px - 10px);
    width:-webkit-calc(100% - 150px - 10px);
  }
}

/* ul.detail ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* flexbox ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
ul.link { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }
ul.link li { box-sizing: border-box; }

/* desgin +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
ul.link
{
  font-weight:bold;
  background-color:#ffffff;
}
ul.link li
{
  padding:5px 10px 5px 0px;
  border-bottom: solid 1px #e5e5e5;
}
ul.link.arrow li a
{
  color:#000000;
  text-decoration:none;
}

/* desgin - option ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
ul.link.arrow li a
{
  padding-left:25px;
  background-position:10px center;
  background-size:6px 10px;
  background-repeat:no-repeat;
  background-image:url(../images/arrow_r_blue.png);
}

/* size +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
ul.link li
{
  width:100%;
}
ul.link.col2 { margin-right:-20px; }
ul.link.col3 { margin-right:-30px; }
ul.link.col4 { margin-right:-20px; }
ul.link.col5 { margin-right:-20px; }
ul.link li
{
  margin-right:20px;
}
ul.link.col2 li { width:calc(50% - 20px); width:-webkit-calc(50% - 20px); }
ul.link.col3 li { width:calc(33% - 20px); width:-webkit-calc(33% - 20px); }
ul.link.col4 li { width:calc(25% - 20px); width:-webkit-calc(25% - 20px); }
ul.link.col5 li { width:calc(20% - 20px); width:-webkit-calc(20% - 20px); }
@media only screen and (max-width:768px)
{
  ul.link.col3 { margin-right:-20px; }
  ul.link.col2 li { width:100%; }
  ul.link.col3 li,
  ul.link.col4 li,
  ul.link.col5 li { width:calc(50% - 20px); width:-webkit-calc(50% - 20px); }
}
@media only screen and (max-width:600px)
{
  ul.link.col2 li,
  ul.link.col3 li,
  ul.link.col4 li,
  ul.link.col5 li { width:100%; }
}

/* ul.title +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div div ul.title
{
  width:100%;
  margin-bottom:20px;
}
/* 青 */
div div ul.title.blue li
{
  background-color:#e0f0ff;
/*  color:#4894e0;*/
}
div div ul.title li
{
  width:100%;
  height:60px;

  background-color:#ebf2f8; /* 水色 */
  color:#062661;            /* 青 */
}
div div ul.title li span
{
  display:block;
  width:100%;
  height:60px; /* =li height */

  /* text */
  font-size:20px;
  font-weight:bold;
  line-height:1.4;
  text-align:left;

  /* icon  */
  background-size:24px 24px;
  background-repeat:no-repeat;

  /* ticon & text location - padding=文字位置 */
  background-position:470px center;
  padding:18px 0 0 500px;
}
div div ul.title li span.center      { text-align:center; padding-left:0; }
div div ul.title li span.ship_detail { background-image:url(../images/icon_ship_detail.png); } /* boat-d.php */
div div ul.title li span.ship_item   { background-image:url(../images/icon_ship_item.png);   } /* boat-d.php */
div div ul.title li span.ship_marine { background-image:url(../images/icon_ship_marine.png); } /* boat-d.php */
div div ul.title li span.cmt         { background-image:url(../images/icon_cmt.png);         } /* shop-d.php */
div div ul.title li span.mfr_japan   { background-image:url(../images/icon_mfr_japan.png);   } /* maker-l.php */
div div ul.title li span.mfr_foreign { background-image:url(../images/icon_mfr_foreign.png); } /* maker-l.php */
@media only screen and (max-width:768px)
{
  /* icon & text location - padding-left=position+35px */
  div div ul.title li span { background-position:30px center !important; padding:18px 0 0  65px !important; }
  div div ul.title li span.center { text-align:left; padding:18px 0 0 18px !important; }
}