/*CSSがヘッダーフッターなどに競合しないように注意する*/
#container{
  background:#f9f6ec;
}

.producer .producer_info{
  padding-top:0;
}

.producer{
  background-color:#fff;
}

#main.producer{
  margin:auto;
  margin-top: 110px;
}

.producer_info section{
  padding:20px 0;
  font-size:16px;
  line-height:150%;
  font-weight:300 !important;
}

.producer .producer_info p{
      font-size:16px;
      line-height:150%;
}

.producer .producer_info p.note{
  font-size: 12px;
  line-height:150%;
  margin:0.3em 0 0 0 !important;
}

.producer .prd_top{
  margin:0;
}

.producer_info h1{
  font-size: 2em;
}

.producer_info h2{
    font-size:2em !important;
    line-height:100%;
    font-weight:bold !important;
    text-align:center;
    border-bottom:1px solid #c19a35;
    margin-bottom:20px;
    padding-bottom:10px;
}

.producer_info h3{
  display: table-cell !important;
  height:1em !important;
  font-size:1.5em !important;
  font-weight:bold !important;
  border-bottom:none !important;
  line-height:100%;
}

.producer_info h3+p{margin-top:10px !important;}

.producer_info h4{font-style:normal !important;
   text-align:center;
   background-color:#e8e1cd;
   padding:0.5em 0;}

.ico_paid{
    display:inline-block;
    width:4em;
    text-align:center;
    border-radius: 9999px;
    color:#FFF;
    background-color:#9b3865;
    margin-left:10px;
    font-family:Meiryo,sans-serif;
    font-weight:300;
    font-size:0.7em;
    vertical-align: middle;
}

.ico_free{
    display:inline-block;
    width:4em;
    text-align:center;
    border-radius: 9999px;
    color:#FFF;
    background-color:#3c4a80;
    margin-left:10px;
    font-family:Meiryo,sans-serif;
    font-weight:300;
    font-size:0.7em;
    vertical-align: middle;}

ul.giftbox li:not(:last-child){margin-right:20px;}

ul.giftbox,
ul.wrapping,
ul.self{
    display:flex;
    justify-content:space-between !important;
    margin:0 !important;}

ul.giftbox li{
    list-style-type: none;
    width:350px;}

ul.giftbox li img{}

ul.giftbox li .cap{
  background: #e8e1cd;
  border-radius: 9999px;
  padding:0.2em;
  margin-top:10px;
  margin-bottom: 10px;
  font-size:0.9em !important;
  width:6em;
  text-align:center;
}

ul.giftbox .size_text{
    color:#3c4a80;
	font-size:13px;
	padding-top: 15px;
}

ul.giftbox li div span,
ul.wrapping li div span,
ul.self li div span{
    display:block !important;
    font-size:14px;
    line-height:130%;
    margin-top:0.5em;
}

ul.wrapping li{
    list-style-type: none;
    }

ul.wrapping li.paper{
    width:350px;
}
ul.wrapping li.noshi{
    width:745px;
}
ul.wrapping li div{
    margin-top:0.5em;
}

ul.wrapping li div p{
    font-size:1.2em !important;
    margin:0 0 10px 0;
}

ul.self li{
    list-style-type: none;
    widht:540px;}
ul.self li div{
    margin-top:10px;
}

.reference{display:flex;
            padding:20px 20px;}
.reference div{}
.reference div .ref_ttl{
    font-weight:bold;
    font-size:1.2em;
    border-bottom:1px dashed #CCC;
}

.reference figure{margin:0 0 0 20px !important;}
.reference figure img{width:500px !important;
                  margin:0 !important;}

.serif{font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
.brsp{display: none;}

/* ===============以下スマホ版=================== */

@media screen and (max-width:780px) {
  .producer .prd_top{
  margin:0px !important;
  }
  #main{margin-top:130px !important;}
  #main.producer{
    margin:auto;
    margin-top: 0px;
      padding:0;
  }
  .prod_in .prod{
    display: block;
    width:100%;
    float:none;
  }
.producer_info{padding:0 !important;}
.producer_info section{padding:0 !important;}
.producer_info section p{font-size:14px !important;
            line-height:160% !important;}
    
.producer_info h2{font-size:6vw !important;line-height:130%;}
.producer_info h3{font-size:20px !important;}     
.producer .producer_info p.note{
        font-size:12px!important;
    }
    
ul.giftbox,
ul.wrapping,
ul.self{
    display:flex;
    flex-flow: column;
    margin:0 !important;}  
    
ul.giftbox li,
ul.wrapping li,
ul.self li{width:100%;
        margin-bottom:2em;}  
    
ul.wrapping li.paper{width:100% !important;}  
ul.wrapping li.noshi {width:100%;}
ul.wrapping li.noshi img{width:100%;
                        height:auto !important;}   
    ul.wrapping div{font-size:3.5vw;
                    line-height:150%;} 

    
ul.giftbox li .cap{
  padding:0.1em;
  margin-top:10px;
  margin-bottom: 10px;
  font-size:0.8em !important;
  width:6em;
}    
    
.reference{
    display:flex;
    flex-flow: column;}   
    
.reference p.ref_ttl{font-size:20px !important;}
.reference figure{margin-left:0 !important;} 
.reference figure img{width:100% !important;}
    
 
.brsp{display: block;} 
}


/* PC SPでの表示非表示切り替え*/
@media screen and (max-width: 850px){
    .sp_show{
        display:block!important;
    }
    .tbpc_show{
        display:none!important;
    }
    #main.producer{
      margin:auto;
      margin-top: 142px;
    }
}
/* PC SPでの表示非表示切り替え*/
@media screen and (min-width: 851px){
    .sp_show{
        display:none;
    }
    .tbpc_show{
        display:block;
    }
}