@charset "utf-8"; 
a, abbr, acronym, address, applet, article, aside, audio,b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video{font-size:100%; vertical-align:baseline; white-space:normal; margin:0; padding:0; border:0; outline:0; background:transparent;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;} ol, ul{list-style:none;} blockquote, q{quotes:none;}table{border-collapse:collapse; border-spacing:0;} *{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; -webkit-text-size-adjust:100%;} img{vertical-align:top; width: 100%;height: auto;} h1, h2, h3, h4, h5, h6{font-weight:normal;}


/*---------------------------
Link
---------------------------*/
a{outline:none; text-decoration: none; color: #302210;}
a:hover{ opacity: 0.8;}
a img:hover{ opacity: 0.8;}
a:hover{-webkit-transition:all .5s ease; transition:all .5s ease;}


@media screen and (max-width: 450px) {
a:hover{ opacity:1;}
}


/*---------------------------
Body
---------------------------*/

html{scroll-behavior: smooth;}
body{font-family:m-plus-1c, sans-serif;; font-style: normal; font-weight: 400; color: #000; word-wrap:break-word; font-kerning:normal;font-size:20px;letter-spacing: 0.05em;overflow-x: hidden;background: #fff;}

@media only screen and (min-width: 451px) and ( max-width:1260px) 
{
html {
transition: transform 0.3s;
transform: scale(0.7);
transform-origin: left top;
height: calc(100% / 0.7);
width: calc(100% / 0.7);
}	
}


header{width: 100%; position: fixed; top: 0; z-index: 3;}

/* ローディング中のスタイル */
.wf-loading header {
	opacity: 0;
}

/* フォント読み込み完了後のスタイル */
.wf-active header {
	opacity: 1;
	transition: opacity 1s ease;
}

/* フォント読み込み失敗時のスタイル */
.wf-inactive header {
	opacity: 1;
}


/*---------------------------
共通
---------------------------*/
.cf:before,
.cf:after {content: " ";display: table;}
.cf:after {clear: both;}
.cf{*zoom: 1;}

.pc{display:block;}
.sp{display:none;}


h2{font-size: 50px; letter-spacing: 0.05em;font-family: din-condensed, sans-serif; position: absolute;top: 50%; transform: translate(0, -50%);ms-writing-mode: tb-rl;writing-mode: vertical-rl;text-orientation: sideways; height: auto; line-height: 1;}

@media screen and (max-width: 820px) {
h2{font-size: 5.33vw;position:relative;transform: translate(0, -50%);ms-writing-mode: tb-lr;writing-mode: horizontal-tb; text-align: center; margin-bottom: 30px;
}

@media screen and (max-width: 750px) {
.pc{display:none;}
.sp{display:block;}}
}

@media screen and (max-width: 450px) {
h2{font-size: 6.66vw;}
}



/*---------------------------
コンテンツ
---------------------------*/
.main{position: relative;width: 100%;height: 100vh;}
.hero{position: relative;height: 100vh;width: 100%;overflow-x: hidden; display: flex; align-items: center; justify-content: center;}
.hero .logo{width: 266px;}

@media screen and (max-width: 750px) {
.hero .logo{width: 35.46vw;}
}


.company{padding: 100px 30px; position: relative;}
.company .inner{width: 100%; margin: 0 auto;}
.company .logo{width: 140px; margin: 0 auto;}
.company .body-copy{font-size:28px; text-align: center; line-height: 1.8; font-weight: 500; margin-top: 100px;}
.company .copy{font-size:20px; text-align: center; margin-top: 100px; line-height: 1.8;}

@media screen and (max-width: 450px) {
.company{padding: 100px 0 0;}
.company .inner{width: 90%; margin: 0 auto;}
.company .logo{width: 26.66vw; margin: 0 auto;}
.company .body-copy{font-size:3.777vw; margin-top: 60px;}
.company .copy{font-size:3.33vw;  margin-top: 40px;}
}


.brands{padding: 220px 30px; position: relative;}
.brands .inner{width: 100%; max-width:1100px;margin: 0 auto;}
.brands ul{display: flex; justify-content: center; align-items: center;}
.brands li{height: 116px; margin: 0 30px;}
.brands li img{height: 100px; width: auto;}


@media screen and (max-width: 450px) {
.brands{padding: 120px 0 0; position: relative;}
.brands .inner{width: 90%; max-width:none;}
.brands ul{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.brands li{height: auto; margin: 0 10% 50px 0; width: 38%; text-align: center;}
.brands li:nth-child(2){margin: 0 0 50px 0;}
.brands li img{height:auto; width: 100%;}
.brands li.cc{width: 47%; margin: 0 10% 50px 10%;}
.brands li.home{width: 32%;margin: 0 8% 0 0;}
.brands li.l{width: 50%; margin:0;}
}


.recruit{padding: 100px 30px; position: relative;}
.recruit .inner{width: 100%; max-width:960px;margin: 0 auto;}
.recruit ul{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.recruit li{margin: 0 2% 50px; width: 29.333%;}
.recruit li:nth-child(n+7){margin: 0 2% 0;}
.recruit li h3{border-top: 1px solid #000;border-bottom: 1px solid #000;font-size:20px;text-align: center; line-height: 1; padding: 7px; margin-top: 10px; font-weight: 500;}
.recruit p{font-size:20px; text-align: center;}

@media screen and (max-width: 450px) {
.recruit{padding: 120px 0 100px; position: relative;}
.recruit .inner{width: 90%; max-width:none;}
.recruit li{margin: 0 5% 40px 0; width:47.5%;}
.recruit li:nth-child(n+7){margin:0 5% 40px 0;}
.recruit li:nth-child(even){margin: 0 0 40px 0;}
.recruit li h3{font-size:3.33vw;padding: 7px; margin-top: 10px;}
}


.about{padding: 200px 30px 100px; position: relative;}
.about .inner{width: 100%; margin: 0 auto;}
.about .logo_corbon{width: 230px; margin: 0 auto;}
.about .logo_coffee{width: 235px; margin: 0 auto;}
.about .logo_cc{width: 325px; margin: 0 auto;}
.about .logo_home{width: 80%; max-width: 1200px; margin: 0 auto;}
.about .logo_l{width: 80%; max-width: 1200px; margin: 0 auto;}
.about .body-copy{font-size:28px; text-align: center; line-height: 1.8; font-weight: 500; margin-top: 100px;}
.about .copy{font-size:20px; text-align: center; margin-top: 30px; line-height: 1.8;}
.about .copy.l{margin-top:100px; }

@media screen and (max-width: 450px) {
.about{padding: 150px 0 0;}
.about .inner{width: 90%;}
.about .body-copy{font-size:3.777vw;margin-top: 40px;}
.about .copy{font-size:3.33vw;  margin-top: 20px;}
.about .logo_corbon{width: 180px;}
.about .logo_coffee{width: 180px; margin: 0 auto;}
.about .logo_cc{width: 200px; margin: 0 auto;}
.about .logo_home{width: 100%; margin: 0 auto;}
.about .logo_l{width: 100%; margin: 0 auto;}
.about .copy.l{margin-top:40px; }
}


.shop{padding: 100px 30px 0; position: relative;}
.shop .inner{width: 100%; max-width:1040px;margin: 0 auto;}
.shop ul{display: flex; justify-content:flex-start; align-items:flex-start; flex-wrap: wrap;}
.shop li{margin: 0 2% 50px; width: 29.333%;}
.shop li h3{font-size:25px;ine-height: 1;margin-top: 5px; font-weight:700;}
.shop li p{font-size:18px;ine-height: 1;margin-top: 5px; letter-spacing: 0;}
.shop li .sns{margin-top: 5px; font-size: 40px;}

@media screen and (max-width: 450px) {
.shop{padding: 100px 0 0;}
.shop .inner{width: 85%; max-width:none;}
.shop li{margin: 0 0 40px 0; width:100%;}
.shop li h3{font-size:5.33vw; margin-top: 10px;}
.shop li p{font-size:3.777vw;margin-top: 5px;}
.shop li .sns{margin-top: 5px; font-size: 35px;}
}


footer{padding: 20px; background: #000; font-size:15px; text-align: center; color: #fff; margin-top: 200px;}

@media screen and (max-width: 450px) {
footer{padding: 10px; font-size:12px;margin-top: 50px;}

}



#btn {
  display: none;
}


nav {
  position: fixed; z-index: 2;
  left: 0;
  right: 0;
  margin: auto;
  background:rgb(255, 255, 255, 0.8);
}
nav a {
  margin-left: 20px;
  font-family:din-condensed, sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
}

nav a.min{
  margin-left: 0px;
}

nav a span{margin-left:5px; font-size: 28px;}

nav .box{display: flex;  justify-content:space-between;align-items: center;padding:0 40px; margin: 0 auto;height: 80px;width: 100%;}
nav .box .logo{width: 120px;}

nav a:hover { opacity: 0.8;
}
nav .logo a{
margin-left: 0;
}
nav .logo a:hover{
border-bottom: none;
}




@media screen and (max-width: 750px) {
header{height: 70px; position: fixed; z-index: 3; top: 0;background:rgb(255, 255, 255, 0.8)}
header .logo{width: 120px; display: flex; align-items: center; height: 70px;margin: 0 auto; padding-left: 0;}
nav{margin-top: 0; display: block; border: none; background:#fff; padding: 0;}
nav .box{display: block; padding:0 20px; margin: 0 auto;height: 70px;width: 100%;}
nav::before{display: none;}
  #btn {
    position: fixed;
    top: 12px;
    right: 10px;
    width: 44px;
    height: 44px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
  }
  #btn span {
    display: block;
    background-color: #302210;
    width: 36px;
    height: 2px;
    transition: all 0.5s ease;
  }
  #btn.on span {
    background-color: #302210;
  }
  #btn.on span:nth-of-type(1) {
    transform: translateY(11px) rotate(45deg);
  }
  #btn.on span:nth-of-type(2) {
    transform: scale(0);
  }
  #btn.on span:nth-of-type(3) {
    transform: translateY(-12px) rotate(-45deg);
  }
  nav {
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    transition: all 0.5s ease;
    top: -130vh;
    height: 100vh;
  }
  nav.on {
    top: 0;
    height: 100vh;
    overflow-x: scroll;
  }
  nav a {
    margin: 50px auto;
    display: block;
    text-align: center;
    font-size: 20px;
    border: none;
  }
}


.hero_fade{animation-timing-function: linear;}