@charset "UTF-8";
/****************common********************************************/
#contents.topping {
  background: #fffff7;
  padding-bottom: calc(100vw / (1200 /100));
  line-height: 1.6;
  font-size: calc(100vw / (1200 / 16));
}
/****************layout********************************************/
/*****key****/
#contents.topping .key {
  width: 100%;
  margin-bottom: 0 !important;
  position: relative;
  background: #000;
}

/*********common********/
#contents.topping .main_area {
  background: #08090a;
}
#contents.topping p.atn_img {
  width: calc(100vw / (1200 / 1000));
  margin: 0 auto;
  text-align: right;
  font-size: calc(100vw / (1200 /12));
  color: #fff;
}
/*********01********/
#contents.topping .co_01 {
  background: url("../img/topping_c01_bg.jpg");
  background-size: 100% auto;
  height: calc(100vw / (1200 /497));
  text-align: center;
  position: relative;
  color: #fff;
}
#contents.topping .co_01 .inner {
  width: calc(100vw / (1200 /620));
  text-align: center;
}
#contents.topping .co_01 h2 {
  width: calc(100vw / (1200 /411));
  margin: 0 auto;
  padding: calc(100vw / (1200 /80)) 0 calc(100vw / (1200 /50));
}
#contents.topping .co_01 p {
  line-height: 1.75;
    font-size: calc(100vw / (1200 /22));
}
/****** co_02 ************/
#contents.topping .co_02 {
  background: #000105 ;
  padding: calc(100vw / (1200 / 60)) 0;
  text-align: center;
  color: #fff;
}
#contents.topping .co_02 h2 {
  width: calc(100vw / (1200 / 380));
  margin: 0 auto calc(100vw / (1200 /60));
}
#contents.topping .co_02 h3 {
  margin: 0 auto calc(100vw / (1200 /10));
  letter-spacing: 0.08em;
    font-size: calc(100vw / (1200 /24));
    color: #673419;

}
#contents.topping .co_02 .inner {
  width: calc(100vw / (1200 /1100));
  margin: 0 auto calc(100vw / (1200 /20));
  padding: calc(100vw / (1200 /50));
   background: #fcfbf8 url("../img/topping_c02_bg.jpg");
  background-size: 50%;
 justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  font-size: calc(100vw / (1200 /16));
}

#contents.topping .co_02 .inner .box {
  width: calc(100vw / (1200 / 470));
  margin-bottom: calc(100vw / (1200 /50));
}
#contents.topping .co_02 .inner .box .img {
  margin: 1em 0;
}
#contents.topping .co_02 .inner p {
  text-align: left;
  line-height: calc(100vw / (1200 / 30));
  font-size: calc(100vw / (1200 /16));
  color: #673419;
}
/****** co_03 ************/
#contents.topping .co_03 {
  background: #f7f5f2 ;
  padding: calc(100vw / (1200 / 60)) 0;
  text-align: center;
}
#contents.topping .co_03 h2 {
  width: calc(100vw / (1200 / 380));
  margin: 0 auto calc(100vw / (1200 /60));
}
#contents.topping .co_03 h3 {
  margin: 0 auto calc(100vw / (1200 /10));
  letter-spacing: 0.08em;
    font-size: calc(100vw / (1200 /24));
    color: #673419;

}
#contents.topping .co_03 .inner {
  width: calc(100vw / (1200 /1100));
  margin: 0 auto;
  padding:0 0 calc(100vw / (1200 /50));
  background-size: 50%;
 justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
}

#contents.topping .co_03 .inner .box {
  width: calc(100vw / (1200 / 350));
  background: #fff;
  margin-bottom: calc(100vw / (1200 /10));
  border: 1px solid #673419;
}
#contents.topping .co_03 .inner .box .ttl{
  background:#673419;
  margin-bottom: calc(100vw / (1200 /20));
  padding:  calc(100vw / (1200 /10));
  color: #fff;
}
#contents.topping .co_03 .inner .box .ttl h3{
  margin: 0 auto;
    font-size: calc(100vw / (1200 /18));
    color: #fff;
}
#contents.topping .co_03 .inner .box .ttl p{
    font-size: calc(100vw / (1200 /15));
}
#contents.topping .co_03 .inner .box .img{
  padding: calc(100vw / (1200 /20));
}
#contents.topping .co_03  p.fs.algnR{
  padding-right:calc(100vw / (1200 /100)) ;
  font-size: calc(100vw / (1200 /12));
}
#contents.topping .co_03 .inner .box .ttl p span{
  color:#ebd350;
    }
/*********menu_info********/
#contents.topping .menu_info {
  background: #fffff7;
}
#contents.topping .menu_info .inner {
  width: calc(100vw / (1200 / 760));
  margin: calc(100vw / (1200 / 50)) auto;
}


#contents.topping .menu_info .inner ul.cmnt {
  width: calc(100vw / (1200 /450));
  margin: calc(100vw / (1200 /80)) auto 0;
  color: #040001;
}
#contents.topping .menu_info .inner ul.cmnt li {
  position: relative;
  margin-left: calc(100vw / (1200 /30));
  margin-bottom: calc(100vw / (1200 /10));
  font-size: calc(100vw / (1200 /14));
}
#contents.topping .menu_info .inner ul.cmnt li::before {
  content: "※";
  position: absolute;
  left: calc(100vw / (1200 / -20));
}
#contents.topping .btnarea .btn {
  margin: calc(100vw / (1200 / 100)) auto 0;
}