@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-family: 'Roboto','Koburina Gothic W3 JIS2004', "Helvetica Neue", 'Helvetica', 'Arial', 'sans-serif';
  font-weight: normal;
  font-weight: 300;
}

body {
  line-height: 1.8;
}

@font-face {
  font-family: 'DINOffcPro-CondLight';
  src: url('../font/DINOffcPro-CondLight.ttf');
}

@font-face {
  font-family: 'DINOffcPro-CondMedium';
  src: url('../font/DINOffcPro-CondMedium.ttf');
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

p {
  font-size: 14px;
  margin: 0;
  /*  line-height: 1.8;*/ }

a img {
  transition: 0.3s ease-in-out; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  color: #4b4b4b;
}

img {
  max-width: 100%;
}

article img{
  display: block;
  width:100%;
}

@media only screen and (min-width: 769px) {
  .sp {
    display: none;
  }
  .pc{
    width:990px;
    margin: 0 auto;
    position: relative;
  }
}
@media only screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp{
    position: relative;
    padding-top: 20px;
  }
}

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*========================================================
▼背景
========================================================*/

#bgImg {
    width: 100%;
    margin: 0 auto;
    position: fixed;
}

#bgImg>div {
    transition: 0.8s;
}

.scrollin {
    opacity: 1;
}

.bgImg01{
  background: url(../img/bgimg.jpg);
  background-position: bottom left;
  width: 100%;
  height: 100vh;
  margin:0 auto;
  background-size: cover;
  z-index:1;
}

/*========================================================
▼ヘッダー
========================================================*/

header {
  width: 100%;
  height:70px;
  display: flex;
  background-color: #fff; 
  position: relative;
  z-index: 999;
}

.header_inner{
  width: 100%;
  position: relative;
}

@media only screen and (min-width: 769px) {
  header {
    width: 100%;
    height: 130px;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    z-index: 999;
  }
  .header_inner{
    width: 990px;
    margin: 0 auto;
    position: relative;
  }
}


/*-------------------------------------------------------
SOREL corp logo
--------------------------------------------------------*/

@media only screen and (min-width: 769px) {
  header .logo {
    width: 110px;
    position: absolute;
  }
}

@media only screen and (max-width: 768px) {
header .logo {
  width: 50px;
  position: absolute;
  left: 20px;
  }
}

/*-------------------------------------------------------
SNSボタン
--------------------------------------------------------*/

@media only screen and (min-width: 769px) {
.socialbtn-head{
    position: absolute;
    top: 30px;
    right: 0;
    font-size: 14px; 
    color: #4b4b4b;
}

.socialbtn-head p{
    margin-bottom: 10px;
}

.socialbtn-head,.share_buttons a{
  margin: 0 3px;
}

.socialbtn-head,.share_buttons a:first-child{
  margin-left: 10px;
}

.socialbtn-head .share_buttons a img {
  vertical-align: bottom;
  margin-bottom: 5px; 
}

.arrow-b{
    z-index: 2;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transform: translate(0 ,-50%);
    width: 20.17px; 
}

.arrow-b span{
    position: absolute;
    border-left: 1px solid #4b4b4b;
    border-bottom: 1px solid #4b4b4b;
    box-sizing:border-box;
    transform:rotate(225deg);
    top:2px;
    left:16.5px; 
    width: 8px;
    height: 8px;
    margin-left: -12px;
  }

.sp-socialbtn {
    display: none; 
}

#slide-sharebtn {
    display: none;
  }
}

@media only screen and (max-width: 768px) {

.socialbtn-head {
    display: none; }

.sp-socialbtn{
    position: absolute;
    top: 15px;
    right: 6%; 
    color: #4b4b4b;
}

.sp-socialbtn p{
  display: inline-block;
}

.sp-socialbtn p:first-child{
  margin-right:30px ;
}

#slide-sharebtn{
  z-index: 100;
  cursor: pointer;
  position: fixed;
  top:20px;
  right: -180px;
  /*width: 180px;*/
  height: auto;
  padding-top: 20px 0;
  background: #fff;
}

#slide-sharebtn a{
  margin-right: 12px;
  width: 18px;
  color: #4b4b4b;
  }
}


/*========================================================
▼コンテンツエリア
========================================================*/

@media only screen and (min-width: 769px) {
.items{
  width:990px;
  margin: 0 auto;
  margin-bottom: 50px;
  overflow: hidden;
  }
}

@media only screen and (max-width: 768px) {
.items{
  width:90%;
  margin: 0 auto;
  margin-bottom: 30px;
  }
}

.wrap {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}


@media only screen and (max-width: 768px) {
  .wrap {
    background-size: cover;
  }
}

@media only screen and (min-width: 769px) {
  article {
    min-width: 990px;
    overflow: hidden;
  }
}

@media only screen and (max-width: 768px) {
  article {
    overflow: hidden;
  }
}

article section .wrap,.pc {
  padding-top: 30px;
}

@media only screen and (min-width: 769px) {
  article section .wrap {
    width:480px;
    float: left;
  }

  .mgl30{
    margin-left: 30px;
  }

  .stpfl{
    clear: both;
  }

  .mgb50{
    margin-bottom: 140px;
  }
}

@media only screen and (max-width: 768px) {
  .mgb50{
    margin-bottom: 100px;
  }
}

 .wrap dt,.pc dt,.sp dt{
    position: relative;
    background-color: #000;
  }

.wrap dd,.pc dd,.sp dd{
  color:#fff;
}

.on_hover img{
  opacity: 0.5;
}

/*-------------------------------------------------------
Main title -SOREL 2018 spring-
--------------------------------------------------------*/

.mainTitle{
  font-family: 'DINOffcPro-CondLight';
  src: url('../font/DINOffcPro-CondLight.ttf');
}

a.viewMore{
  font-family: 'DINOffcPro-CondMedium';
  src: url('../font/DINOffcPro-CondMedium.ttf')
}

@media only screen and (min-width: 769px) {
.mainTitle{
    position: absolute;
    top:275px;
    left:5vw;
    color:#fff ;
    font-size: 2rem;
    letter-spacing: 6px;
}

.bg{
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding:13px 0;
  background-image:url(../img/slash.png) ;
  background-size:cover; 
}

a.viewMore{
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.2rem;
  text-shadow:0 0 2px #444;
  }
}

@media only screen and (max-width: 768px) {
  .bg{
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding:6px 0;
  background-image:url(../img/slash.png) ;
  background-size:cover; 
}

a.viewMore{
  color: #fff;
  font-size: 8px;
  letter-spacing: 2px;
  }
}

/*-------------------------------------------
バナー
--------------------------------------------*/

.wrapper,.bnr,footer small{
  position: relative;
  width: 100%;
  margin: 0 auto;
  z-index: 999;
}

@media only screen and (min-width: 769px) {
.bnr{
  width: 650px;
  height: 330px;
  margin: 0 auto;
  margin-bottom: 50px;
}

.bnr img:hover{
    opacity: 0.75;
  }
}

@media only screen and (max-width: 768px) {
  .bnr{
    padding-bottom: 30px;
  }
}



/*========================================================
▼フッター
========================================================*/

footer {
  text-align: center;
}


footer small {
  background: #000;
  color: #fff;
  font-size: 14px;
  line-height: 50px;
  display: block;
}

@media only screen and (max-width: 768px) {
  footer small {
    font-size: 2.6vw;
    line-height: 1.2;
    padding: 10px 0;
  }
}