@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;
}

html {
    height: 100%;
    font-size: 62.5%;
}

body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    color: #4d4d4d;
    position: relative;
    -webkit-text-size-adjust: 100%;
}

@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;
}

ul, li{
  list-style: none;
}

p {
  margin: 0;
}

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 {
  width: 100%;
  max-width: 100%;
  display: block;
}

@media only screen and (min-width: 769px) {
    .sp {
        display: none!important;
    }
}

@media only screen and (max-width: 768px) {
    .pc {
        display: none!important;
    }
}

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

.inner{
    padding: 0 4.8%;
}

@media only screen and (min-width: 769px) {
  .inner{
      padding: 0 40px;
  }

  .btn-on{
    position: relative;
  }

  .btn-on::before,
  .btn-on::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
  }
  .btn-on,
  .btn-on::before,
  .btn-on::after {
    -webkit-transition: all .6s;
    transition: all .6s;
  }
}


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

header {
  width: 100%;
  height:70px;
  background-color: #fff; 
  position: relative;
  overflow: hidden;
}

.header-inner{
  width: 100%;
  height:70px;
  position: relative;
  padding: 0 6.67%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media only screen and (min-width: 769px) {
  header {
    width: 100%;
    height: 130px;
    margin: 0 auto;
  }
  .header-inner{
    max-width: 1090px;
    height: 130px;
    padding: 0 50px;
    margin: 0 auto;
  }
}

.logo{
  width: 15.387%;
  max-width: 50px;
  align-self: flex-start;
}

.logo a{
  display: block;
}

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

  .logo a:hover{
    opacity: 0.6;
  }
}

/*-------------------------------------------------------
SNSボタン
--------------------------------------------------------*/
.share{
  width: 55%;
  max-width: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.share div:nth-of-type(1){
  order: 2;
}

.share div:nth-of-type(2){
  order: 1;
}

.share .share-btn{
  font-size: 1.4rem;
  opacity: 1;
}

.share .share-link{
  width: 100%;
  position: absolute;
  top: 0;
  right: -100vw;
  z-index: 10;
  padding: 0 10%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  opacity: 0;
}

.share .share-link a{
  display: block;
  max-width: 18px;
}

.share .share-link.inactive{
  animation: slide-out ease-in-out .5s forwards;
}

.share .share-link.active{
  animation: slide-on ease-in-out .5s forwards;
}

.share .none{
  animation: fade-off linear .5s forwards;
}

.share .block{
  animation: fade-on linear .5s forwards;
}

@keyframes slide-on {
    0% {
        position: absolute;
        top: 0;
        right: -100vw;
        opacity: 0;
    }
    100% {
        position: absolute;
        top: 0;
        right: 0;
        opacity: 1;
    }
}

@keyframes slide-out {
    0% {
        position: absolute;
        top: 0;
        right: 0;
        opacity: 1;
    }
    100% {
        position: absolute;
        top: 0;
        right: -100vw;
        opacity: 0;
    }
}

@keyframes fade-on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-off {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


@media only screen and (min-width: 769px) {
  .share{
    width: 120px;
    display: block;
  }

  .share div:nth-of-type(1){
    order: 1;
  }

  .share div:nth-of-type(2){
    order: 2;
  }
  .share .share-inner{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .share .share-link{
    width: 74px;
    position: relative;
    top: auto;
    right: auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    opacity: 1;
  }

  .share .share-link a:hover{
    opacity: 0.6;
  }

  .share .share-link.inactive,
  .share .share-link.active,
  .share .none,
  .share .block{
    animation: none;
  }
}

/*
Facebookリンク
--------------------------------*/

.social{
  opacity: 1;
}

.social a{
  font-size: 1.4rem;
  display: block;
}

.social a i{
  font-size: 1.6rem;
}

@media only screen and (min-width: 769px) {
  .social a{
    font-size: 1.4rem;
    display: block;
    position: relative;
  }

  .social a::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #4d4d4d;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
  }

  .social a:hover::after {
    transform: scale(1, 1);
  }
}

/*========================================================
▼コンテンツエリア
========================================================*/
#main{
  padding: 6.67% 0;
  background-color: #feffed;
  background-image: url('../img/background_sp.png');
  background-position: center bottom;
  background-size: 100%;
  background-repeat: no-repeat;
}

@media only screen and (min-width: 769px) {
  #main{
    padding: 30px 0 100px;
    background-image: url('../img/background_pc.png');
    background-position: center bottom;
    background-size: 100%;
  }
}

article{
  width: 100%;
  margin: 0 auto;
  padding: 0 6.67%;
}

@media only screen and (min-width: 769px) {
  article{
    max-width: 1090px;
    margin: 0 auto;
    padding: 0 50px;
  }
}

.main-ttl{
  font-family: 'DINOffcPro-CondMedium';
  color: #ffffff;
  position: absolute;
  top: 13%;
  right: 4.1%;
  font-size: 4.5vw;
  letter-spacing: 2px;
}

@media only screen and (min-width: 769px) {
  .main-ttl{
    position: absolute;
    top: 14%;
    right: 5.1%;
    font-size: 4.5rem;
    letter-spacing: 7px;
  }

  dl.on-mouse .main-ttl{
    color: #fff;
    -webkit-transition: all .6s;
    transition: all .6s;
  }
}

.photo{
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 769px) {
  .photo{
    width:100%;
    max-width:990px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
}

.photo dl{
  width: 100%;
  position: relative;
  margin-bottom: 6.97%;
  box-shadow:0px 0px 14px -9px #000000;
}

@media only screen and (min-width: 769px) {
  .photo dl{
    width: 48.4848%;
    max-width: 480px;
    margin-bottom: 30px;
    background-color: #000;
  }

  .photo dl:nth-of-type(1){
    width: 100%;
    max-width: 990px;
  }

  .photo dl:nth-of-type(n+9){
    margin-bottom: 0;
  }

  .photo dl img{
    opacity: 1;
  }

  .photo dl.on-mouse dt img{
    opacity: 0.5;
    -webkit-transition: all .6s;
    transition: all .6s;
  }
}

.btn{
  position: absolute;
  bottom: 2.5%;
  right: 2.5%;
}

.btn a{
    font-family: 'DINOffcPro-CondMedium';
  background: url('../img/btn_bg.png') no-repeat 0 0;
  background-size: contain;
  display: inline-block;
  font-size: 4vw;
  padding: 1.1em 0.2em 1.2em;
  color: #FFFFFF;
  letter-spacing: 1.2px; 
text-shadow: 0 0 7px #000000;
}
.btn a span{
  font: inherit;
background-color: rgba(0,0,0,0.0001);
}

/*7番目の画像のみ*/
.photo dl:nth-of-type(7) .btn{
  background-color: rgba(0,0,0,0.1);
  box-shadow: 0 0 4em 2em rgba(0,0,0,0.1);
  border-radius: 6px;
}

@media only screen and (min-width: 769px) {
  .btn{
    right: 1.5%;
  }
  .btn a{
    max-width: 102px;
    font-size: 2.2rem;
  }

 dl.on-mouse .btn a{
    background: url('../img/btn_bg_w.png') no-repeat 0 0;
    background-size: contain;
    color: #fff;
    -webkit-transition: all .6s;
    transition: all .6s;
    opacity: 1;
	 text-shadow: 0 0 3px #000000;
  }

	
  /*7番目の画像のみ*/
/*
  .photo dl:nth-of-type(7).on-mouse .btn{
    background: none;
    border: none;
    box-shadow: none;
  }
*/
}

/*-------------------------------------------
クレジット
--------------------------------------------*/
.credit{
  margin-bottom: 6.97%;
}

.credit li{
  font-family: 'DINOffcPro-CondLight';
  font-size: 1.24rem;
  letter-spacing: 1px;
}

@media only screen and (min-width: 769px) {
  .credit{
    margin-bottom: 30px;
  }

  .credit li{
    font-family: 'DINOffcPro-CondMedium';
    font-size: 1.5rem;
    line-height: 1.4;
    letter-spacing: 2px; 
  }
}
/*-------------------------------------------
バナー
--------------------------------------------*/
.bnr{

}

.bnr li{
  background-color: #fff;
  margin-bottom: 4%;
}

.bnr li:last-of-type{
  margin-bottom: 0;
}

.bnr li a{
  display: block;
}

@media only screen and (min-width: 769px) {
  .bnr li{
    width: 100%;
    max-width: 650px;
    margin: 0 auto 50px;
  }

  .bnr li a:hover{
    opacity: 0.6;
  }
}


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

footer {
  text-align: center;
}

footer small {
  background: #000;
  color: #fff;
  font-size: 2.6vw;
  line-height: 1.2;
  padding: 10px 0;
  display: block;
}


@media only screen and (min-width: 769px) {
  footer small {
    font-size: 14px;
    line-height: 50px;
    padding: 0;
  }
}