/* reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin:0; padding:0; border:none; outline:0; font-weight:normal; vertical-align:baseline; background:transparent;
}
html { font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body { margin:0;}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary { display:block;}
a { background-color:transparent; -webkit-text-decoration-skip:objects;}
a:active,a:hover { outline-width:0;}
h1,h2,h3,h4{-webkit-margin-before:0; -webkit-margin-after:0; -webkit-margin-start:0; -webkit-margin-end:0; font-size:100%;}
ul,li{list-style:none;}
b,strong { font-weight:inherit; font-weight:bold;}
img { border-style:none;}
button,input,select,textarea { font:inherit; margin:0;}
button,input { overflow:visible;}
button,select { text-transform:none;}
button,html [type="button"],[type="reset"],[type="submit"] { -webkit-appearance:button;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style:none; padding:0;}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { outline:1px dotted ButtonText;}
fieldset { border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em;}
textarea { overflow:auto;}
[type="checkbox"],[type="radio"] { box-sizing:border-box; padding:0;}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { height:auto;}
[type="search"] { -webkit-appearance:textfield; outline-offset:-2px;}
[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration { -webkit-appearance:none;}
::-webkit-input-placeholder { color:inherit; opacity:0.54;}
::-webkit-file-upload-button { -webkit-appearance:button; font:inherit;}
html,body,div,nav,article,section,dt,dd {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
div,article,section{overflow:hidden;}
html {position:relative; min-height:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-size:62.5%;}
table{border-collapse:collapse;}

/* common */

html {
  position:relative;
  min-height:100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%;
}

body {
  height:100%;
  width:100%;
  color:#333;
  font-size:1.4rem;
  letter-spacing:1.5px;
  font-family:"futura-pt", "ryo-text-plusn", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E", 'Noto Sans Japanese', sans-serif, serif;/*"tbnpmincho-std",*/ 
  line-height: 170%;
}
a{
  color: #333;
  text-decoration:none;
}

nav{
  background-color: #fff;
  display: block;
  width: 100%;
  height: auto;
  position: fixed;
  top:0;
  right: 0;
  z-index: 200;
  box-shadow: -5px 0 10px 0 rgba(0,0,0,.2);
  -webkit-transition:all .3s ease-out;
  transition:all .3s ease-out;
  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
nav .logo{
  margin:0;
  padding:15px 0 0 15px;
  float: left;
}
nav .logo img{
  width: 400px;
  height: 65px;
  background: url(../img/common/logo2.png) left center no-repeat;
  background-size: contain;
}
nav ul{
  text-align: center;
  margin:0 auto;
  float: right;
}
nav ul li{
  display: inline-block;
  vertical-align: middle;
  width: auto;
  /* min-width:150px; */
  height: auto;
  margin: 10px 30px 0 auto;
  text-align: center;
}
nav ul li a,
nav ul li p{
  font-size: 1.5rem;
  letter-spacing: 1px;
  display: table-cell;
  vertical-align: middle;
  height: auto;
  min-height: 50px;
  text-decoration: none;
  cursor: pointer;
}

nav ul li ul{
  display: none;
}
.li-main li a,
.li-main li p,
.li-item li a{
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 22px;
  background-size: 40px;
  height: 65px;
}
.li-item li a{
  font-size: 1.4rem;
  color: #aaa;
  text-align: center;
  background-size: 80px;
  letter-spacing: 0;
  padding: 70px 0 0 0;
  min-width: 80px;
  background-position: center top;
}
.li-item li a span{
  color: #333;
  display: block;
  font-size: 1.4rem;
  line-height: 100%;
}
.li-main li:nth-child(1) a{
  background-image: url(../img/common/icon-concept.png);
}
.li-main li:nth-child(2) p{
  background-image: url(../img/common/icon-item.png);
}
.li-main li:nth-child(3) a{
  background-image: url(../img/common/icon-boutique.png);
}
.li-main li:nth-child(4) a{
  background-image: url(../img/common/icon-news.png);
}
.li-main li:nth-child(5) a{
  background-image: url(../img/common/icon-shopping.png);
}
.li-item li:nth-child(1) a{
  background-image: url(../img/common/icon-macarons.png);
}
.li-item li:nth-child(2) a{
  background-image: url(../img/common/icon-individuels.png);
}
.li-item li:nth-child(3) a{
  background-image: url(../img/common/icon-entremets.png);
}
.li-item li:nth-child(4) a{
  background-image: url(../img/common/icon-cakes.png);
}
.li-item li:nth-child(5) a{
  background-image: url(../img/common/icon-chocolats.png);
}
.li-item li:nth-child(6) a{
  background-image: url(../img/common/icon-gateauxsec.png);
}
.li-item li:nth-child(7) a{
  background-image: url(../img/common/icon-viennoiseries.png);
}
/*.li-item li:nth-child(8) a{
  background-image: url(../img/common/icon-saisonnieres.png);
}*/
.li-item li:nth-child(8) a{
  background-image: url(../img/common/icon-bridal.jpg);
}

.li-main .li-bou li a{
  font-size: 1.7rem;
  line-height: 150%;
  background: none;
  padding: 0 0 30px;
  text-align: center;
}

.btn-return{
  background: url(../img/common/btn-return.png) center center no-repeat;
  background-size: 40px;
  display: inline-block;
  vertical-align: middle;
  height: 60px;
  width: 60px;
  margin: 0 auto;
  cursor: pointer;
}
nav .li-social{
  float: right;
  margin: 20px 10px auto -20px;
}
nav .li-social a{
  padding:10px;
  display: inline-block;
}
nav .li-social a img{
  -webkit-filter:invert(100%);
  -moz-filter:invert(100%);
  -ms-filter:invert(100%);
  filter: invert(100%);
}

.btn-nav{
  background: url(../img/common/btn-open.png) center center no-repeat;
  display: none;
  height: 90px;
  width: 90px;
  cursor: pointer;
  position: fixed;
  top:0;
  right:0;
  z-index: 1000;
}

.btn-nav.close{
  background: url(../img/common/btn-close.png) center center no-repeat;
}

.scroll {
  position:absolute;
  bottom: 100px;
  z-index: 5;
  display: block;
  text-decoration: none;
}
.scroll p {
  color: #fff;
  position: absolute;
  top: 0;
  left: 50vw;
  width: 60px;
  height: 30px;
  margin-left: -30px;
  text-align: center;
  border-radius: 100%;
  box-sizing: border-box;
  -webkit-animation: flow 3s infinite;
  animation: flow 3s infinite;
}
.scroll p::after {
  position: absolute;
  top: calc(50% + 20px);
  left: 50%;
  content: '';
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
@-webkit-keyframes flow {
  0% {top: 50%; color: rgba(255,255,255,1);}
  50% {top: calc(50% - 20px); color: rgba(255,255,255,.2);}
  100% {top: 50%; color: rgba(255,255,255,1);}
}
@keyframes flow {
  0% {top: 50%; color: rgba(255,255,255,1);}
  50% {top: calc(50% - 20px); color: rgba(255,255,255,.2);}
  100% {top: 50%; color: rgba(255,255,255,1);}
}
/* ------------------------- banner ------------------------- */
.bl-bnr{
  display: block;
  clear: both;
  background:url(../img/item/bnr-back.jpg) left top repeat-x;
  text-align: center;
  margin: -70px auto;
}
.bnr-shop{
  display: block;
  background:url(../img/item/bnr-macarons.jpg) 90% top no-repeat;
  height: 550px;
  padding:150px 35% 0 0;
  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
.chocolats .bnr-shop{
  background:url(../img/item/bnr-chocolats.jpg) 90% top no-repeat;
}
.cakes .bnr-shop{
  background:url(../img/item/bnr-cakes.jpg) 90% top no-repeat;
}
.gateauxsec .bnr-shop{
  background:url(../img/item/bnr-gateauxsec.jpg) 90% top no-repeat;
}
.bnr-shop h3{
  color:#f88;
  font-size:3.5rem;
  margin-bottom: 30px;
}

.btn-shop{
  color: #fff;
  background: #f88 url(../img/common/mark-arrow.png) 25px center no-repeat;
  width: 270px;
  font-size: 1.8rem;
  padding: 15px 10px 15px 20px!important;
  border: 2px solid #fff;
  border-radius: 30px;
  margin: 30px auto 0;
}
.bnr-shop:hover .btn-shop{
  background-color: #f36;
}
.bnr-shop b{
  color: #f36;
  font-weight:normal;
}



/* ------------------------- lineup ------------------------- */
.item-lineup{
  height: auto;
  text-align: center;
  padding: 50px 0;
}

.item-lineup li{
  display: inline-block;
  width: 10.5vw;
  height: 11.5vw;
  text-align: center;
  vertical-align: top;
  letter-spacing: .5px;
}

.item-lineup li a{
  color: #999;
  display: block;
  font-size:2rem;
  text-decoration: none;
  -webkit-transition:all .3s ease-out;
  transition:all .3s ease-out;
}
.item-lineup li a span{
  display:block;
  color: #333;
  font-size:1.35rem;
}
.item-lineup li a img{
  display: block;
  margin: 0 auto;
  width: 10vw;
}

/* ------------------------- access ------------------------- */

.common-access{
  background: #ddd url(../img/common/bg-boutique.png) 80% top no-repeat;
  background-size: 500px;
  height: auto;
  text-align: center;
  padding: 10px 0;
}
.common-access h2{
  display:block;
  width:220px;
  margin:10px 10vw;
}

.common-access a{
  display: inline-block;
  width: 16vw;
  height: 16vw;
  margin: 0 0 0 .4vw;
  position:relative;
}
.common-access a img{
  position:absolute;
  width: 150px;
  top:50%;
  left:50%;
  margin: -75px auto auto -75px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.common-access a:hover img{
  -webkit-filter:invert(100%);
  -moz-filter:invert(100%);
  -ms-filter:invert(100%);
  filter: invert(100%);
  opacity:.8;
}
.common-access .ph-marunouchi{
  margin-left:0;
}

.ph-marunouchi{
  background: url(../img/access/ph-marunouchi.jpg) center center no-repeat;
  background-size: cover;
}
.ph-roppongi{
  background: url(../img/access/ph-roppongi.jpg) center center no-repeat;
  background-size: cover;
}
.ph-shinjuku{
  background: url(../img/access/ph-shinjuku.jpg) center center no-repeat;
  background-size: cover;
}
.ph-shibuya{
  background: url(../img/access/ph-shibuya.jpg) center center no-repeat;
  background-size: cover;
}
.ph-nagoya{
  background: url(../img/access/ph-nagoya.jpg) center center no-repeat;
  background-size: cover;
}
.ph-fukuoka{
  background: url(../img/access/ph-fukuoka.jpg) center center no-repeat;
  background-size: cover;
}
.ph-boutique{
  background: url(../img/access/ph-boutique.jpg) center center no-repeat;
  background-size: cover;
}

.notfound{
  text-align: center;
}
.notfound h1{
  font-size: 4rem;
  background: url(../img/item/il-macarons.png) center center no-repeat;
  background-size: contain;
  padding: 250px 20px;
  margin: 0 auto;
}
.notfound h1 span{
  display: block;
  font-size: 2rem;
  margin: 30px auto;
}
.notfound p{
  line-height: 200%;
}
.notfound a{
  display: block;
  background: #eee;
  width: 200px;
  height: 50px;
  line-height: 50px;
  margin: 50px auto;
}
.notfound a:hover{
  background: #000;
  color: #fff;
}


.affiliates {
  height: 100px;
  line-height: 100px;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
}
.affiliates-left {
  background-color: #2f2f2f;
}
.affiliates-left p {
  color: #fff;
  padding: 0px 90px 0 50px;
  position: relative;
}
.affiliates-left p::after {
  content: '';
  display: block;
  clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 100% 100%);
  position: absolute;
  height: 102%;
  width: 50px;
  top: -1px;
  right: 0px;
  background-color: #fff;
}
.affiliates-right {
  max-width: 150px;
  margin-left: 45px;
}
.affiliates-right a {
  display: block;
}
.affiliates-right img {
  vertical-align: middle;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .affiliates {
    flex-flow: row wrap;
    height: auto;
  }
  .affiliates-left {
    flex: 100%;
  }
  .affiliates-left p::after {
    display: none;
  }
  .affiliates-left p {
    font-size: 1.6rem;
    text-align: center;
  }
  .affiliates-right {
    margin: 20px auto;
  }

}

footer{
  background: #000;
  height: auto;
  padding: 30px 0 0 30px;
}

footer .logo{
  display:inline-block;
  vertical-align:top;
  float: left;
  padding: 0 30px 30px 0;
  
}
footer .li-link{
  display:inline-block;
  vertical-align:top;
  padding: 0 30px 30px 0;
}

footer .li-link li{
  float: left;
  margin-right: 30px;
}
footer .li-link li a{
  display: block;
  color: #fff;
  padding:2px 10px;
  opacity: .8;
}
footer .li-link li a::before{
  content:"";
  border: 5px solid transparent;
  border-left: 5px solid #fff;
  height:0;
  width:0;
  padding:0;
  display: inline-block;
}

footer .li-link li a:hover{
  opacity: 1;
}
footer .li-social{
  color: #fff;
  display: inline-block;
  float: right;
  margin: -15px 10px auto auto;
}
footer .li-social a{
  display: inline-block;
  vertical-align: middle;
}
footer .li-social a img{
  padding:15px;
}

.btn-pagetop{
  display: none;
  background:url(../img/common/btn-pagetop.png) right top no-repeat;
  width: 164px;
  height: 138px;
  position:fixed;
  bottom: -3px;
  right: -10px;
  cursor: pointer;
  z-index: 100;
}
.btn-pagetop:hover{
  bottom:0;
  -webkit-filter:invert(100%);
  -moz-filter:invert(100%);
  -ms-filter:invert(100%);
  filter: invert(100%);
}

.btn-before,
.btn-next,
.btn-close,
.btn-reset{
  opacity: .7;
}
.btn-before:hover,
.btn-next:hover,
.btn-close:hover,
.btn-reset:hover{
  opacity: 1;
}

.copy{
  color: #777;
  font-size: 1.2rem;
  text-align: center;
  clear: both;
  display: block;
  margin-top: 10px;
}
.cover{
  position: fixed;
  display: block;
  background: -moz-linear-gradient(top, rgba(173, 165, 153, 0.7), rgba(173, 165, 153, 0.7) 50%, rgba(159, 150, 135, 0.7) 50%, rgba(159, 150, 135, 0.7));
  background: -webkit-linear-gradient(top, rgba(173, 165, 153, 0.7), rgba(173, 165, 153, 0.7) 50%, rgba(159, 150, 135, 0.7) 50%, rgba(159, 150, 135, 0.7));
  background: linear-gradient(top, rgba(173, 165, 153, 0.7), rgba(173, 165, 153, 0.7) 50%, rgba(159, 150, 135, 0.7) 50%, rgba(159, 150, 135, 0.7));
  -moz-background-size: 11px 11px;
  -webkit-background-size: 11px 11px;
  background-size: 11px 11px;
  width: 100vw;
  height: 100vh;
  top:0;
  left: 0;
  z-index: 150;
}

/* ------------------------- windows size pattern ------------------------- */
@media screen and (min-width: 1500px){
  nav ul li{
    margin-right:50px;
  }
  nav .li-social{
    margin-left: -40px;
  }
}
@media screen and (max-width: 1300px){
  footer .li-social{
    float: left;
  }
}
@media screen and (max-width: 999px){
  nav .logo img{
    width: 150px;
    height: 75px;
    background: url(../img/common/logo1.png) left center no-repeat;
    background-size: contain;
  }
  .bl-bnr {
    background-size: auto 400px!important;
    margin-top: 30px;
}
  .bnr-shop {
    background-position: calc(50% + 270px) top!important;
    background-size: auto 400px!important;
    padding-top: 80px;
}
  
  .item-lineup li{
    width: 180px;
    height: 180px;
  }
  .item-lineup li a{
    color:#fff;
  }
  .item-lineup li a img {
      width: 140px;
      margin-bottom: -8px;
  }
  
  .common-access {
      background-position:center top;
  }
  .common-access h2{
    margin:10px auto;
  }
  .common-access a{
    width: 32vw;
    height: 32vw;
  }
  .common-access .ph-shibuya{
    margin-left:0;
  }
  footer .logo {
    float: none;
  }
  footer .li-link {
    display: block;
    margin: 0 0 5px 0;
    padding-bottom: 10px;
  }
  footer .li-link li{
    float: none;
    padding: 10px 20px;
    border-top: 2px dotted #555;
  } 
}


@media screen and (max-width: 768px){
  .btn-nav{
    display: block;
  }
  nav{
    display: none;
    padding-top: 50px;
    width: 280px;
    height: 100%;
    -webkit-transition:none;
    transition:none;
  }
  nav ul{padding-left:10px; float: none;}
  nav ul li{
    display: block;
    height: auto;
    margin: 0 auto;
    text-align: center;
  }
  nav ul li a,
  nav ul li p{
    margin: 0 auto;
    text-align: center;
    font-size: 2.4rem;
  }
  nav .logo img{
    width: 200px;
    height: 120px;
    background: url(../img/common/logo1.png) center top no-repeat;
    background-size: contain;
  }
  .li-main li a, .li-main li p, .li-item li a {
      background-position: left center;
      padding: 0 0 0 65px;
      background-size: 55px;
      height: 80px;
  }
  .li-main .li-item li a{
    text-align: left;
    background-size: 65px;
    letter-spacing: 0;
    padding: 5px 0 5px 70px;
    min-width: auto;
    background-position: left center;
  }
  .li-item li a span {
    font-size: 1.6rem;
  }
  .li-main .li-bou li a{
    font-size:2rem;
  }
  .li-main .li-bou li a br{
    display: none;
  }
  nav .li-social{
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
  }
  #main{
    margin-top:0;
  }
  .bl-bnr{
    background-size: auto 300px!important;
    }
  .bnr-shop{
    background-position: calc(50% + 170px) top!important;
    background-size: auto 300px!important;
    padding: 100px 0 0 30px;
    text-align: left;
  }
  .bnr-shop h3{
    margin-bottom: 40px;
  }
  .bnr-shop .btn-shop{
    text-shadow: none;
    margin: 40px auto 0;
  }
  .item-lineup li{
    width: 32vw;
    height: 30vw;
  }
  .item-lineup li a img {
      width: 22vw;
  }
  .common-access a{
    width: 48vw!important;
    height: 48vw!important;
    margin: 0 0 0 1vw!important;
  }
  .common-access a img{
    width: 160px;
    margin: -80px auto auto -80px;
  }
  .common-access .ph-marunouchi,
  .common-access .ph-shinjuku,
  .common-access .ph-nagoya{
    margin-left:0!important;
  }
}