@charset "utf-8";
/* Common */
a{
    text-decoration: none;
}
.font_12{
    font-size: 1.2rem;
}
.font_15{
    font-size: 1.5rem;
    margin: 0 0 5% 0;
}
.font_18{
    font-size: 1.8rem;
}
.font_20{
    font-size: 2.0rem;
}
.font_35{
    font-size: 3.5rem;
}
.font_40{
    font-size: 4.0rem;
}
.ma_r{
    margin: 0 5% 0 0;
}
.ma_l{
    margin: 0 0 0 5%;
}
.ma_t{
    margin: 20% 0 0 0!important;
}
.ma_c{
    margin: 0 0 1% 7%!important;
}
.pa_t{
    padding: 200px 0 0 43px;
}
hr{
    border-bottom: 1px solid #000000;
    margin: 8% 0;
    width: 15%;
}
.center{
    text-align: center;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.blc_{
    display: block;
    line-height: 1.5;
    font-family: 'Lato', 'Noto Sans JP', sans-serif;
}
.blc{
    display: block;
    margin: 10px 0 8px;
    line-height: 1.5;
    font-family: 'Lato', 'Noto Sans JP', sans-serif;
}
.bold{
    font-weight: bold;
}
.short{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bo_t{
    border-top:10px solid #04345a;
}
.bo_n{
    border: 10px solid #04345a;
}
.bo_w{
    border: 10px solid #ffffff;
}
.bc{
    background: #edf0f4;
}
/* Unique */
#mainArea{
    margin: 0 auto;
    font-size: 100%;
    line-height: 2;
}
.mainLead{
    text-align: center;
    font-size: 1.5rem;
    line-height: 2.5;
    margin: 5% 0 0 0 ;
}
.sentence_{
    text-align: center;
    margin: 0 auto;
    width: 4%;
}
.specialArea_ {
    width: 850px;
    margin: 5% auto;
}
.mainTtlArea_,.contentArea_,.allitemArea_ {
    width: 1100px;
    margin: 5% auto;
}
h2.sectionTtl_{
    font-family: 'Lato', 'Noto Sans JP', sans-serif;
    letter-spacing: 1px;
    font-size: 4.0rem;
    line-height: 1.2;
    border-bottom: 3px solid #000000;
    display: inline-block;
    padding: 0 0 8px 0;
    margin: 0 0 1% 0;
}
/*#Ttl_1::after{
  content: url(/campaign/2019/ships-blueblue_0121/pc/images/01.png);
  margin: 0 0 0 5px;
}
#Ttl_2::after{
  content: url(/campaign/2019/ships-blueblue_0121/pc/images/02.png);
  margin: 0 0 0 5px;
}*/
h3{
    font-family: 'Lato', 'Noto Sans JP', sans-serif;
    letter-spacing: 1px;
    font-size: 2.0rem;
    padding: 0 0 8px 0;
    margin: 6% 0 1% 0;
}
.sp_{
    margin: 10% 0;
}
.item_{
    display: inline-block;
    width: 45%;
    vertical-align: middle;
    margin: 0 4%;
}
.cap_{
    display: inline-block;
    width: 40%;
    vertical-align: middle;
    margin: 0 3%;
}
.brandName_{
  font-family: 'Lato', 'Noto Sans JP', sans-serif;
  letter-spacing: 1px;
  font-size: 3.5rem;
  line-height: 1.2;
}
.brandName_ span{
    font-size: 1.8rem;
    vertical-align: top;
}
.mainStyling_{
    margin: 10% 0 0 0;
}
.mainStyling_ img{
    margin: 0 auto;
    width: 100vw;
}
.stylingArea_{
    padding: 0 0 5% 0;
}
.styling_{
    margin: 8% 0 0 0;
}
.w_59{
    display: inline-block;
    width: 59%;
}
.w_36{
    display: inline-block;
    width: 36%;
    vertical-align: top;
    margin: 10% 0 5% 0;
}
.sub{
    display: inline-block;
    width: 40%;
    text-align: center;
    margin: -10% 5% 0 0;
}
.itemSpec{
    margin: 10% 0 0 0;
}
.detailArea_{
    text-align: left;
    margin: 15% 0;
}
.linkArea_{
    margin: 5% 0;
}
.linkArea_ div.item_ {
    width: 79%;
    display: inline-block;
    text-align: left;
    font-size: 1.2rem;
    margin: 0;
}
.linkArea_ div.item_ span{
    font-size: 10px;
    vertical-align: top;
}
.linkArea_ div.detailBtn_ {
    margin: 0 auto;
    text-align: center;
    width: 20%;
    display: inline-block;
    font-size: 1.2rem;
}
.detailBtn_ a{
    border: 1px solid #333333;
    color: #333333;
    text-align: center;
    padding: 3% 0;
    font-size: 1.2rem;
    margin: 0;
    transition: all .3s;
    display: inline-block;
    text-decoration: none;
    width: 100%;
    margin: 13% 0;
}
.detailBtn_ a:hover {
  color: #fff !important;
  background-color: #333333;
}
ul.itemBtn_  li{
    float: left;
    width: 45%;
    margin: 8% 5% 0 0;
}
.btn_ a {
    border: 1px solid #333333;
    color: #000000;
    text-align: center;
    padding: 5%;
    margin: 0;
    transition: all .3s;
    display: inline-block;
    text-decoration: none;
    width: 100%;
    margin: 0;
    background: #ffffff;
}
.btn_ a:hover {
    color: #ffffff !important;
    background-color: #000000;
}
.allitemArea_ div{
    width: 18.5%;
    display: inline-block;
    margin: 0 0.8% 5% 0.8%;
    vertical-align: top;
}
.allitemArea_ div p{
    line-height: 1.8;
}
/*.allitemArea_ div p.left span.reg::after{
    content: "\0ae";
    margin: 0 0 0 1px;
    font-size: 10px;
    vertical-align: top;
}*/
.loop_ {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    /*width: 100vw;*/
    left: 50%;
    margin-left: -50vw;
    overflow: hidden;
}
.loop_ ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
}
.loop_ li {
    display: inline-block;
    width: calc(100vw / 4);
    margin: 0;
    list-style: none;
    text-align: center;
}
.loop_ li a {
    display: block;
}
.loop_ li img {
    display: block;
    width: 100%;
    height: auto;
}
.loop_ li a:hover {
    opacity: .7;
}
.loop_ ul:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}
.loop_ ul + ul {
    -webkit-animation: loop2 50s  linear infinite;
    animation: loop2 50s linear infinite;
}

.loop_:hover ul {
    /*animation-play-state: paused;*/
}

  @-webkit-keyframes loop {
    0% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @keyframes loop {
    0% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @-webkit-keyframes loop2 {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

  @keyframes loop2 {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }