@charset "utf-8";

section.wrap.first
{
  background:#fff;
}

/* BOAT選びから購入までの流れ 打消し ++++++++++++++++++++++++++++++++++++++++*/
.sbt-bar
{
  margin-top:0px;
}
section.flow div.box
{
  padding-top:0px;
  margin-top:0px;
}

/* h2.blue ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
h2.blue
{
  position: relative;
  width:100%;
  height:70px;
  margin-bottom:60px; /* image height + margin */
  color:#3163bf;
}
h2.blue::after
{
  position: absolute;
  content: "";
  left: 50%;
  bottom: -40px; /* = image height */
  width: 168px;
  height: 40px;
  margin-left: -84px; /* image width / 2 */
  background: url(../images/first_title_arrow.png) top left / 168px 40px no-repeat;
}
h2.title1 { background:url(../images/first_title_1.png) center center / 700px no-repeat #3163bf; }
h2.title2 { background:url(../images/first_title_2.png) center center / 700px no-repeat #3163bf; }
@media only screen and (max-width: 768px)
{
  h2.blue
  {
    /* 幅を画面いっぱい + 吹き出し縮小によるマージン変更 */
    width:calc(100% + 20px);
    margin-left:-10px;
    margin-bottom:30px;
  }
  h2.blue::after
  {
    /* 吹き出し縮小 */
    bottom: -20px; /* = image height */
    width: 84px;
    height: 20px;
    margin-left: -42px; /* image width / 2 */
    background: url(../images/first_title_arrow.png) top left / 84px 20px no-repeat;
  }
  h2.title1 { background:url(../images/first_title_1.png) center center / 90% no-repeat #3163bf; }
  h2.title2 { background:url(../images/first_title_2.png) center center / 90% no-repeat #3163bf; }
}

/* section.first div.mokuteki +++++++++++++++++++++++++++++++++++++++++++++++*/
section.first div.mokuteki-header
{
  display:block;
  text-align:center;
  margin-bottom:20px;
}
section.first div.mokuteki-header img
{
}
section.first div.mokuteki-header.sp
{
  display:none;
}
section.first div.mokuteki-header.sp img
{
  width:100%;
}

@media only screen and (max-width: 768px)
{
  section.first div.mokuteki-header
  {
    display:none;
  }
  section.first div.mokuteki-header.sp
  {
    display:block;
  }
}

/* ++ section.first div.register ++++++++++++++++++++++++++++++++++++++++++++*/
section.first * .fitsize
{
  width:400px;
  height:auto;
}
section.first div.register
{
  width:1120px;
  margin-left:40px; /* (1200-1120)/2 */
  display:flex;
  display:-webkit-flex;
  flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
  justify-content:space-between;
  margin-bottom:20px;
  text-align:center;
}
section.first div.register div
{
  border-radius:5px;
  width:550px;
  height:240px;
  padding-top:120px;
  background-position:left top 0 0;
  background-size:550px 80px;
  background-repeat:no-repeat;
}
section.first div.register div.sell
{
  background-image:url(../images/first_regist_sell_title_pc.png);
  background-color:#e6effe;
}
section.first div.register div.buy
{
  background-image:url(../images/first_regist_buy_title_pc.png);
  background-color:#ffe6e9;
}
section.first div.register div a.btn { position:relative; font-size:28px; width:400px; height:60px; margin-left:75px; border-radius:30px; padding:3px 50px 10px 40px; color:#6d5d1e !important; margin-bottom:10px; font-weight:bold; }
section.first div.register div a.btn.yellow { background:#ffdd58 url(../images/arrow_r_brown_large.png) right 20px center / 12px 25px no-repeat; }
section.first div.register div a.btn.yellow { box-shadow:0 2px 4px 0 #6d5d1e; }
section.first div.register div a.btn.disabled::after { position:absolute; top:0; left:0; width:100%; height:100%; border-radius:30px; color:#ffffff; background-color:rgba(0,0,0,0.8); content:"　下記に同意をお願いします。"; }
section.first div.register div a.btn          { display:none;  }
section.first div.register div a.btn.disabled { display:block; }

div.coming-soon
{
  position:relative;
}
div.coming-soon::after
{
  position:absolute;
  border-radius:5px;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7) url(../images/coming_soon.png) center center / 224px 68px no-repeat;
  content:'　';
}

@media only screen and (max-width:768px)
{
  section.first * .fitsize
  {
    width:80%;
    height:auto;
  }
  section.first div.register
  {
    width:100%;
    display:inline;
  }
  section.first div.register div
  {
    width:100%;
    margin-bottom:10px;
    background-size:100% auto;
  }
  section.first div.register div.sell
  {
    background-image:url(../images/first_regist_sell_title_sp.png);
  }
  section.first div.register div.buy
  {
    background-image:url(../images/first_regist_buy_title_sp.png);
  }
  section.first div.register div a.btn { font-size:20px; width:90%; padding-top:10px; margin-left:5%; }
  section.first div.register div a.btn.disabled::after { line-height:3; }
}