@charset "utf-8";
/*ナッツストーリーCSS*/

/*----------------------------------------
さわらび明朝
----------------------------------------*/
@font-face
{
font-family: Sawarabi Mincho;
src: url('/sweets/chocolate/almond/common/css/font/SawarabiMincho-Regular.woff')
     format("woff");
}

/*----------------------------------------
あおぞら明朝(さわらび明朝で不足する漢字を補うため)
----------------------------------------*/
@font-face
{
font-family: Aozora Mincho Medium;
src: url('/sweets/chocolate/almond/common/css/font/AozoraMinchoMedium.woff')
     format("woff");
}


/*----------------------------------------
コンテンツ
----------------------------------------*/

.story .content_inner {
  background: url(/sweets/chocolate/almond/story/images/bg.png) repeat #fff;
}

.story .tab{
  box-sizing: border-box;
  width: 878px;
  height:45px;
  margin:0 auto;
}

.story .tab ul{
  display:flex;
}

.story .tab ul li{
  width:270px;
  height: 45px;
  margin-right: 10px;
  cursor: pointer;
}

.story .tab ul li:hover{
  opacity:0.7;
}

.story .tab ul li[data-target="tab_cont_macadamia"]{
  background: url(/sweets/chocolate/almond/story/images/tab_macadamia.png) no-repeat;
}
.story .tab ul li.active[data-target="tab_cont_macadamia"]{
  background: url(/sweets/chocolate/almond/story/images/tab_macadamia_active.png) no-repeat;
}

.story .tab ul li[data-target="tab_cont_almond"]{
  background: url(/sweets/chocolate/almond/story/images/tab_almond.png) no-repeat;
}

.story .tab ul li.active[data-target="tab_cont_almond"]{
  background: url(/sweets/chocolate/almond/story/images/tab_almond_active.png) no-repeat;
}

/*遷移する時見えないように*/
.tab_cont_wrap {
  opacity: 0;
}

/*遷移したら見えるように*/
.story .tab_cont_wrap {
  opacity: 1;
}


.story .tab_cont_wrap {
  position: relative;
  border: 2px solid #cca65e;
  box-sizing: border-box;
  height: 478px;
  width: 890px;
  margin:0 auto;
  padding: 23px 28px 0 28px;
}

.story .tab_cont_wrap:after {
    border: 1px solid #cca65e;
    content: " ";
    height: calc(100% - 8px);
    left: 3px;
    position: absolute;
    top: 3px;
    width: calc(100% - 8px);
    z-index: 100;
}

.story .tab_cont_macadamia:before {
  width:115px;
  height: 94px;
  content: " ";
  position:absolute;
  top:130px;
  right:20px;
  background: url(/sweets/chocolate/almond/story/images/sizzle_magcadamia.png) 0 0 no-repeat;
  background-size: contain;
}

.story .tab_cont_almond:before {
  width:115px;
  height: 94px;
  content: " ";
  position:absolute;
  top:120px;
  right:10px;
  background: url(/sweets/chocolate/almond/story/images/sizzle_almond.png) 0 0 no-repeat;
  background-size: contain;
}

.story .tab_cont{
  display: none;
}

.story .tab_cont.active{
  display: block;
}

.story .tab_cont p{
  border: 1px solid #cca65e;
  box-sizing: border-box;
  display: block;
  position: relative;
  height: 130px;
  width: 240px;
  margin: 0 20px 0 0;
}

.story .tab_cont p:after {
    border: 1px solid #cca65e;
    content: " ";
    height: calc(100% - 8px);
    left: 3px;
    position: absolute;
    top: 3px;
    width: calc(100% - 8px);
    z-index: 100;
}


.story .tab_cont p img{
  width: 100%;
  height:100%;
}

.story .tab_cont > div{
  display: flex;
  margin-bottom: 20px;
}

.story .tab_cont dl{
  width: 580px;
}

.story .tab_cont dt{
  height:45px;
}

.story .tab_cont dl dd{
  font-family: "Sawarabi Mincho","Aozora Mincho Medium",serif !important;
  font-size: 14px;
  text-align: left;
  transform: rotate(0.001deg);
}



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

}