/* ========================================
   MONDE CHOCOLATE
   COMMON STYLE
======================================== */


/* ========================================
   01. COLOR VARIABLES
======================================== */

:root{
  --mc-background: #f5efe6;
  --mc-brown: #2d1d14;
  --mc-dark: #1b1612;
  --mc-gold: #c9a46a;
}


/* ========================================
   02. HEADER
======================================== */

.mc-header{
  position:fixed;
  top:15px;
  left:0;
  width:100%;
  z-index:9999;

  padding:12px 40px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  box-sizing:border-box;
  transition:.4s;
}

.mc-header::before{
  content:"";
  position:absolute;

  top:0;
  left:50%;

  width:100vw;
  height:100%;

  transform:translateX(-50%);

  background:rgba(20,12,8,.92);
  backdrop-filter:blur(8px);

  z-index:-1;
}

.mc-logo{
  display:flex;
  align-items:center;
  margin-left:0;
}

.mc-logo a{
  display:inline-block;
}

.mc-logo img{
  width:130px;
  height:130px;
  object-fit:contain;
  display:block;
}

.mc-nav{
  display:flex;
  gap:50px;
  transform:none;
}

.mc-nav a{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  letter-spacing:.12em;
}

.mc-nav a:hover{
  color:var(--mc-gold);
  opacity:1;
}

.mc-nav a.current{
  color:var(--mc-gold);
}

/* ========================================
   03. ANCHOR POSITION
======================================== */

#about{
  scroll-margin-top:75px;
}

#products{
  scroll-margin-top:90px;
}

#contact{
  scroll-margin-top:150px;
}


/* ========================================
   04. FOOTER
======================================== */

.mc-footer{
  width:100vw;
  margin-left:calc(50% - 50vw);

  background:#17100d;
  color:#fff;

  border-top:1px solid rgba(201,164,106,.3);
}

.mc-footer-inner{

  max-width:1400px;
  margin:auto;

  display:grid;
  grid-template-columns:2fr 0.7fr 1.5fr;

  align-items:center;

  gap:80px;

  padding:50px 40px;
}


/* =========================
   04-1　左：ブランド
========================= */

.mc-footer-brand{
  display:flex;
  align-items:center;
  gap:35px;
}

.mc-footer-logo{
  display:block;
  width:140px;
  height:auto;
}

.mc-footer-text h3{

  margin:0;

  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:none !important;

  font-size:48px;
  font-weight:400;
  line-height:1.05;
}

.mc-footer-catch{

  margin-top:15px;
  padding-top:15px;

  color:var(--mc-gold);

  font-size:18px;

  border-top:1px solid var(--mc-gold);
}


/* =========================
   04-2　中央：メニュー
========================= */

.mc-footer-menu{

  display:flex;
  flex-direction:column;

  gap:25px;

  padding-left:60px;

  border-left:1px solid rgba(201,164,106,.5);
}

.mc-footer-menu a{

  color:#fff;

  text-decoration:none;

  font-size:18px;

  letter-spacing:.15em;

  transition:.3s;
}

.mc-footer-menu a:hover{
  color:var(--mc-gold);
}


/* =========================
  04-3　 右：メッセージ
========================= */

.mc-footer-message{

  position:relative;

  top:20px;

  text-align:center;
}

.mc-footer-message p{

  margin:0;

  color:var(--mc-gold);

  font-size:22px;
  font-weight:300;
  line-height:2.2;
}

.mc-footer-message::after{

  content:"";

  display:block;

  width:80px;
  height:1px;

  margin:25px auto 0;

  background:var(--mc-gold);
}


/* =========================
   04-4　コピーライト
========================= */

.mc-copy{

  padding:30px;

  text-align:center;

  font-size:16px;

  border-top:1px solid rgba(201,164,106,.3);
}


/* ========================================
   05. ONLINE SHOP BUTTON
======================================== */

.mc-shop-btn{

  position:fixed;
  right:15px;
  bottom:0;

  z-index:999;

  width:120px;
  height:120px;

  border-radius:50%;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  background:var(--mc-gold);

  border:1px solid #e5c48a;

  color:#17100d;
  text-decoration:none;

  font-family:"Cormorant Garamond",serif;
  letter-spacing:.15em;

  box-shadow:0 8px 20px rgba(0,0,0,.25);

  transition:.3s;
}

.mc-shop-btn span:first-child{
  font-size:12px;
}

.mc-shop-btn span:last-child{
  margin-top:4px;
  font-size:16px;
}

.mc-shop-btn:hover{

  background:#17100d;

  color:var(--mc-gold);

  transform:translateY(-3px);

  box-shadow:0 12px 28px rgba(0,0,0,.35);
}


/* ========================================
   06. RESPONSIVE
======================================== */

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

/* ========================================
  HEADER
======================================== */

  .mc-header{
    top:0;
    padding:8px 15px;
  }

  .mc-logo{
    margin-left:0;
  }

  .mc-logo img{
    width:70px;
    height:70px;
  }

  .mc-nav{
    gap:12px;
    transform:none;
  }

  .mc-nav a{
    font-size:11px;
    letter-spacing:.03em;
  }

  /* ANCHOR POSITION */

  #about{
    scroll-margin-top:45px;
  }

  #products{
    scroll-margin-top:60px;
  }

  #contact{
    scroll-margin-top:80px;
  }

/* =========================
   FOOTER
========================= */

.mc-footer-inner{
  grid-template-columns:1fr;
  gap:40px;

  padding:50px 25px;

  text-align:center;
}

.mc-footer-brand{
  flex-direction:column;
  gap:20px;
}

.mc-footer-logo{
  width:70px;
}

.mc-footer-text h3{
  font-size:26px;
  line-height:1.1;
}

.mc-footer-catch{
  font-size:13px;
}

.mc-footer-menu{
  align-items:center;

  padding-top:30px;
  padding-left:0;

  border-top:1px solid rgba(201,164,106,.3);
  border-left:none;
}

.mc-footer-menu a{
  font-size:16px;
}

.mc-footer-message{
  top:0;
}

.mc-footer-message p{
  font-size:13px;
  line-height:2;
}

.mc-copy{
  padding:20px;
  font-size:13px;
}

  /* =========================
     ONLINE SHOP BUTTON
  ========================= */

  .mc-shop-btn{
    right:15px;
    bottom:0;

    width:90px;
    height:90px;
  }

  .mc-shop-btn span:first-child{
    font-size:12px;
  }

  .mc-shop-btn span:last-child{
    margin-top:4px;
    font-size:16px;
  }

}