@charset "UTF-8";
/*リセット  
--------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1;
  font-size: 62.5%;
}

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

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

  *:focus {
    outline: none;
    }

    html, body {
      font-family: Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
      font-weight: 400;
      line-height: 1.6;
    }
    
    img {
      width: 100%;
      display: block; }
    
    @media screen and (min-width: 769px) {
      .pcNone {
        display: none; } }
    
    @media screen and (max-width: 768px) {
      .pcNone {
        display: block; } }
    
    @media screen and (min-width: 769px) {
      .spNone {
        display: block; } }
    
    @media screen and (max-width: 768px) {
      .spNone {
        display: none; } }
    
    @media screen and (min-width: 769px) {
      div.content {
        max-width: 1068px;
        margin: 0 auto 40px; } }
    
    @media screen and (max-width: 768px) {
          div.boxwrap {
            display: flex;
          flex-direction: column; } }
        
    @media screen and (min-width: 769px) {
          div.boxwrap {
            display: flex;
            flex-direction: row;
            margin-top: 32px;
            justify-content: space-between;
     }
    }    
    
/*-------------------
heroimage
-------------------*/
.heroimage {
  background-image: url(../images/sp_heroimage.jpg);
 background-size: cover; 
 background-position: center center; 
 background-repeat: no-repeat; 
 background-clip:border-box;
 height: 100%;
 width: 100%;
}

@media screen and (min-width: 811px) {
  .heroimage {
    background-image: url(../images/pc_heroimage.jpg);
    background-size: cover; 
    background-attachment: fixed; 
  }
}

/*-------------------
stickyArea
-------------------*/
.stickyArea {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

p {
  display: inline-stickyArea;
  font-size: 1.6rem;
  padding: 0;
  margin: 0;
}
.stickyArea--01 {
  background: #fff;
  color: #fff;
  z-index: 100;
}
.stickyArea--02 {
  background:rgba(255, 255, 255, 100);    z-index: 110;
  color: #fff;
}
.stickyArea--03 {
  background:rgba(250, 250, 250, 100);  color: #fff;
  z-index: 120;
}
.stickyArea--04 {
  background:rgba(255, 255, 255, 100);  color: #fff;
  z-index: 140;
}
.stickyArea--05 {
  background:rgba(250, 250, 250, 100);  color: #fff;
  z-index: 150;
}

.stickyArea--06 {
  background:rgba(255, 255, 255, 100);  color: #fff;
  z-index: 160;
}

.stickyArea--07 {
  background:rgba(250, 250, 250, 100);  color: #fff;
  z-index: 170;
}

.stickyArea--08 {
  background:rgba(255, 255, 255, 100);  color: #fff;
  z-index: 180;
}

.stickyArea--09 {
  background:rgba(250, 250, 250, 100);  color: #fff;
  z-index: 190;
}

.stickyArea--10 {
  background:rgba(255, 255, 255, 100);  color: #fff;
  z-index: 200;
}

.stickyArea--11 {
  background:rgba(250, 250, 250, 100);  color: #fff;
  z-index: 210;
}

.stickyArea--12 {
  background:rgba(255, 255, 255, 100);  color: #fff;
  z-index: 220;
}

.stickyArea--13 {
  background:rgba(250, 250, 250, 100);  color: #fff;
  z-index: 230;
}

.stickyArea--14 {
  background:rgba(255, 255, 255, 100);  color: #fff;
  z-index: 240;
}

.stickyArea--15 {
  background:rgba(250, 250, 250, 100);  color: #fff;
  z-index: 250;
}

.stickyArea--16 {
  background:rgba(255, 255, 255, 100);  color: #fff;
  z-index: 260;
}

.stickyArea--17 {
  background:rgba(250, 250, 250, 100);  color: #fff;
  z-index: 270;
}

.stickyArea--18 {
  background:rgba(255, 255, 255, 100);  color: #fff;
  z-index: 280;
}

.stickyArea--19 {
  background:rgba(250, 250, 250, 100);  color: #333;
  z-index: 290;
  text-align: center;
}


@media screen and (max-width: 768px) {
  div.boxwrap {
    display: flex;
  flex-direction: column; } 
}

@media screen and (min-width: 769px) {
  div.boxwrap {
    display: flex;
    flex-direction: row;
    margin-top: 32px;
    justify-content: space-between;
}
}  

/*-----------------
credit
------------------*/
.stylingBox {
	overflow:		hidden;
	margin:			40px auto;
	position:		relative;
  height: auto;
}

.stylingBox--02 {
  width: 84%;
}

.stylingBox--03 {
	width:100%;
}

.stylingBox--04 {
	width:92%;
}

.stylingBox--05 {
	width:84%;
}

.stylingBox--06 {
	width:100%;
}

.stylingBox--07 {
	width:92%;
}

.stylingBox--08 {
	width:84%;
}

.stylingBox--09 {
	width:92%;
}

.stylingBox--10 {
	width:100%;
}

.stylingBox--11 {
	width:84%;
}

.stylingBox--12 {
	width:100%;
}

.stylingBox--13 {
	width:100%;
}

.stylingBox--14 {
	width:92%;
}

.stylingBox--15 {
	width:84%;
}

.stylingBox--16 {
	width:84%;
}

.stylingBox--17 {
	width:84%;
}

.stylingBox--18 {
	width:100%;
}

.stylingBox--19 {
	width:92%;
}

.stylingBox--19 .logo--brand {
	width:60%;
  max-width: 200px;
  margin: 0 auto;
}

.stylingBox--19 .logo--lounge {
	width:40%;
  max-width: 200px;
  margin: 120px auto 0;
}

.stylingBox--19 p {
  font-size: 1.6rem;
  margin-top: 56px;
}

.stylingBox .caption {
	font-size:		130%;
	color:			#fff;
}

.stylingBox .mask {
	width:			100%;
	height:			auto;
	position:		absolute;
	bottom:			-100%;	/* 枠の上に置いて表示させない */
	left:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
  display: flex;
  align-items: center;
}
.stylingBox:hover .mask {
	bottom:			0;	/* 下に降りてくるように見せる */
}

.stylingBox .credit {
  color: #fff;
  font-size: 1.2rem;
  padding: 16px;
  width: 100%;
}

.stylingBox .credit li{
  margin-top: 16px;

}

.stylingBox .credit a {
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
}

.stylingBox .credit a:hover {
opacity: 0.6;
}


.stylingBox .credit a span{
  float: right;
  display: block;
  position: relative;
  top: -14px;
  height: 24px;
  text-align: center;
}

.stylingBox .credit span{
  float: right;
  display: block;
  position: relative;
  top: -14px;
  height: 24px;
  text-align: center;
  padding-top:10px;
}

.stylingBox .credit a span::after {
  content: "";
  width: 5px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (min-width: 769px) {

  .stylingBox--02 {
    max-width: 380px;
    width: 80%;
  }
  
  .stylingBox--03 {
    max-width: 860px;
    width:100%;
  }
  
  .stylingBox--04 {
    max-width: 400px;
    width:92%;
  }
  
  .stylingBox--05 {
    max-width: 320px;
    width:80%;
  }
  
  .stylingBox--06 {
    max-width: 400px;
    width:92%;
  }
  
  .stylingBox--07 {
    max-width: 400px;
    width:92%;
  }
  
  .stylingBox--08 {
    max-width: 320px;
    width:80%;
  }
  
  .stylingBox--09 {
    max-width: 400px;
    width:92%;
  }
  
  .stylingBox--10 {
    width:100vw;
    height: 100vh;
  }
  
  .stylingBox--11 {
    max-width: 380px;
    width:80%;
  }
  
  .stylingBox--12 {
    max-width: 750px;
    width:100%;
  }
  
  .stylingBox--13 {
    max-width: 460px;
    width:80%;
  }
  
  .stylingBox--14 {
    max-width: 380px;
    width:92%;
  }
  
  .stylingBox--15 {
    max-width: 380px;
    width:80%;
  }
  
  .stylingBox--16 {
    max-width: 380px;
    width:80%;
  }
  
  .stylingBox--17 {
    max-width: 380px;
    width:80%;
  }
  
  .stylingBox--18 {
    max-width: 400px;
    width:92%;
  }

  .stylingBox--19 {
    max-width: 400px;
    width:92%;
  }
}