@charset "utf-8";



#chsmile .container-top{background:#692b23;}



#chsmile .area-header-top{position:absolute;left:0;top:2px;width:474px;height:474px;background:#fff6e5;z-index:100;}
#chsmile .area-header-top .logo{padding:30px 0 20px 0;}
#chsmile .area-header-top .logo img{width:298px;height:auto;margin:0 auto;}
#chsmile .area-header-top .tx-lead{padding:0 0 16px 0;}
#chsmile .area-header-top .tx-lead img{width:369px;height:auto;margin:0 auto;}
#chsmile .area-header-top .tx-01{margin:0 3.125%;padding:0 0 12px 0;font-size:18px;line-height:1.1;text-align:center;}
#chsmile .area-header-top .tx-01 dl{margin:0 5%;padding:10px 0 0;border-top:1px solid #692b23;}
#chsmile .area-header-top .tx-01 dt{padding:0 0 10px;color:#e50011;font-size:18px;}
#chsmile .area-header-top .tx-01 dd{font-size:16px;font-weight:bold;line-height:1.3;}
#chsmile .area-header-top .tx-01 dd small{padding:0 0 0 1em;font-size:10px;font-weight:normal;}
#chsmile .area-header-top .tx-01 dd > span{display: block;margin:15px 0 0;padding:4px 0;background:#fff;font-size:14px;text-align:center;}
#chsmile .area-header-top .tx-01 dd > span strong{ color:#e50011;}

#chsmile .area-header-top .tx-smile{overflow:hidden;margin:0 3.125% 4px;}
#chsmile .area-header-top .tx-smile dt{float:left;margin:0 0 0 5%;padding:0 0 0 0;font-size:16px;line-height:2.1;}
#chsmile .area-header-top .tx-smile dd{float:right;margin:0 5% 0 0;padding:0 0 0 0;color:#e50011;font-size:30px;line-height:1.1;text-align:right;}
#chsmile .area-header-top .tx-smile dd .date{margin:2px 0 0 0;display: block;font-size:10px;color:#692b23;font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;font-weight:normal;}
#chsmile .area-header-top .tx-note-01{padding:0 0 6px 0;font-size:16px;line-height:1.1;text-align:center;}
#chsmile .area-header-top .box-product{margin:0 3.125%;}
#chsmile .area-header-top .box-product dt{margin:0 5% 15px 5%;border-bottom:1px solid #692b23;font-size:14px;line-height:1.1;text-align:center;}
#chsmile .area-header-top .box-product dt span{position:relative;left:0;top:7px;display:inline-block;padding:0 6px;background:#fff6e5;}
#chsmile .area-header-top .box-product dd{float:left;width:25%;text-align:center;}
#chsmile .area-header-top .box-product dd img{width:80%;margin:0 auto;}
#chsmile .area-header-top .box-product dd span{display:block;font-size:9px;line-height:1.1;white-space:nowrap;}
#chsmile .area-header-top .box-product .box-product1 { margin-left: 55px;}


#chsmile .area-nav-header{position:absolute;left:238px;top:478px;z-index:100;}
#chsmile .area-nav-header ul{width:714px;}
#chsmile .area-nav-header ul li{float:left;margin:0 2px 0 0;text-align:center;font-size:20px;line-height:1.3;}
#chsmile .area-nav-header ul li a{display:block;width:216px;height:216px;padding:10px;background:url(../images/common/bg_slash_02.png) left top repeat;color:#692b23;text-decoration:none;}
#chsmile .area-nav-header ul li a .ico{display:block;width:212px;height:212px;padding:2px;background-color:#ffecb2;background-position:center 34px;background-repeat:no-repeat;}
#chsmile .area-nav-header ul li a:hover .ico{background-color:#fff6e5;}
#chsmile .area-nav-header ul li a.about .ico{background-image:url(../images/common/ico_about_01.png);}
#chsmile .area-nav-header ul li a.archives .ico{background-image:url(../images/common/ico_archives_01.png);}
#chsmile .area-nav-header ul li a.fairtrade .ico{background-image:url(../images/common/ico_fairtrade_01.png);}
#chsmile .area-nav-header ul li a .ico .arrow{display:block;width:212px;height:212px;background:url(../images/common/bg_arrow_next_02.png) right bottom no-repeat;}
#chsmile .area-nav-header ul li a .ico .arrow .tx{display:block;}
#chsmile .area-nav-header ul li a.about .ico .arrow .tx{padding:143px 0 0 0;}
#chsmile .area-nav-header ul li a.archives .ico .arrow .tx{padding:143px 0 0 0;}
#chsmile .area-nav-header ul li a.fairtrade .ico .arrow .tx{padding:133px 0 0 0;}



#chsmile .area-info{position:absolute;left:0;top:478px;width:236px;height:236px;background:#692b23;z-index:100;}
#chsmile .area-info>.inner{padding:20px 20px 20px 20px;}
#chsmile .area-info .capt{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid #ffffff;color:#ffffff;font-size:14px;line-height:1.2;}
#chsmile .area-info dl{margin:0 0 10px 0;}
#chsmile .area-info dl dt{color:#ffffff;font-size:14px;line-height:1.5;}
#chsmile .area-info dl dd{color:#ffffff;font-size:14px;line-height:1.5;margin-bottom:10px;}
#chsmile .area-info dl dd a{color:#ffffff;}



#chsmile .area-smile{left:-478px;top:0;width:1906px;height:954px;background:#692b23;z-index:1;}
#chsmile .area-smile:before{display:block;position:absolute;left:0;bottom:-10px;width:100%;height:10px;background:url(../images/common/bg_slash_01.png) 0 0 repeat;content:'';}
#chsmile .area-smile ul li.pic-01{position:absolute;left:954px;top:2px;}
#chsmile .area-smile ul li.pic-02{position:absolute;left:2px;top:2px;}
#chsmile .area-smile ul li.pic-03{position:absolute;left:1430px;top:478px;}
#chsmile .area-smile ul li.pic-04{position:absolute;left:478px;top:716px;}
#chsmile .area-smile ul li.pic-05{position:absolute;left:954px;top:716px;}
#chsmile .area-smile ul li.pic-06{position:absolute;left:1430px;top:2px;}
#chsmile .area-smile ul li.pic-07{position:absolute;left:240px;top:478px;}
#chsmile .area-smile ul li.pic-08{position:absolute;left:1668px;top:2px;}
#chsmile .area-smile ul li.pic-09{position:absolute;left:1668px;top:240px;}
#chsmile .area-smile ul li.pic-10{position:absolute;left:2px;top:478px;}
#chsmile .area-smile ul li.pic-11{position:absolute;left:2px;top:716px;}




#chsmile .area-header-top .tx-smile dt,
#chsmile .area-header-top .tx-smile dd,
#chsmile .area-header-top .tx-01 dt,
#chsmile .area-header-top .tx-note-01,
#chsmile .area-header-top .box-product dt,
#chsmile .area-nav-header ul li
{font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;font-weight:bold;}



#chsmile .snsBtn {
  display: table;
  margin: 0 auto 30px;
  padding: 0 10px
}
#chsmile .snsBtn li {
  float: left;
  margin-right: 5px;
  line-height: 1;
}




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



    #chsmile .area-header-top{position:relative;left:0;top:0;width:auto;height:auto;padding:0.625%;background:none;}
    #chsmile .area-header-top>.inner{background:#fff6e5;}
    #chsmile .area-header-top .logo{padding:4.6875% 0 3.90625% 0;}
    #chsmile .area-header-top .logo img{width:65%;}
    #chsmile .area-header-top .tx-lead{padding:0 0 2.5% 0;}
    #chsmile .area-header-top .tx-lead img{width:78.93%;}
		#chsmile .area-header-top .tx-01 {padding:0 0 5px 0}
		#chsmile .area-header-top .tx-01 dt{font-size:13px; padding-bottom:6px;}
    #chsmile .area-header-top .tx-01 dd{font-size:11px; text-align:center;}
    #chsmile .area-header-top .tx-01 dd small{font-size:8px; display:block; margin-top:0.3em;}
    #chsmile .area-header-top .tx-01 dd > span{font-size:12px; margin-top:12px; line-height:1.4;}
    #chsmile .area-header-top .tx-01 dd > span span.only-sp{ display: none;}
    #chsmile .area-header-top .tx-smile dt{margin:0 2%;font-size:11px;}
    #chsmile .area-header-top .tx-smile dd{margin:0 2%;font-size:20px;}
    #chsmile .area-header-top .tx-smile dd .date{font-size:8px;}
    #chsmile .area-header-top .tx-note-01{font-size:12px;}
    #chsmile .area-header-top .box-product{padding:0 0 3.125% 0;}
    #chsmile .area-header-top .box-product dt{margin:0 2% 15px 2%;font-size:10px;}
    #chsmile .area-header-top .tx-01 dl 
{
  margin:0 2%;
  }
    #chsmile .area-header-top .box-product dt span{top:6px;}
    #chsmile .area-header-top .box-product dd span{padding:0 2px;font-size:7px;}
		#chsmile .area-header-top .box-product .box-product1 { margin-left: 12%;}


    #chsmile .area-nav-header{position:relative;left:0;top:0;width:auto;height:auto;}
    #chsmile .area-nav-header ul{width:auto;}
    #chsmile .area-nav-header ul li{width:32.5%;margin:0 0 0.625% 0.625%;font-size:10px;line-height:1.2;}
    #chsmile .area-nav-header ul li a{display:block;width:auto;height:auto;padding:5px;background-size:4px 4px;}
    #chsmile .area-nav-header ul li a .ico{width:auto;height:auto;padding:1px;background-size:60% 60%;background-position:center 15%;}
    #chsmile .area-nav-header ul li a .ico .arrow{position:relative;width:auto;height:auto;padding:100% 0 0 0;background-size:8px 8px;}
    #chsmile .area-nav-header ul li a .ico .arrow .tx{position:absolute;left:0;top:0;width:100%;}
    #chsmile .area-nav-header ul li a.about .ico .arrow .tx{padding:70% 0 0 0;}
    #chsmile .area-nav-header ul li a.archives .ico .arrow .tx{padding:70% 0 0 0;}
    #chsmile .area-nav-header ul li a.fairtrade .ico .arrow .tx{padding:65% 0 0 0;}



    #chsmile .area-info{position:relative;left:0;top:0;width:auto;height:auto;}
    #chsmile .area-info>.inner{padding:3.125% 4.6875% 3.125% 4.6875%;}
    #chsmile .area-info .capt{margin:0 0 5px 0;padding:0 0 5px 0;border-bottom:1px solid #ffffff;color:#ffffff;font-size:10px;line-height:1.2;}
    #chsmile .area-info dl{display:none;margin:0 0 0 0;}
    #chsmile .area-info dl:first-of-type{display:block;}
    #chsmile .area-info dl dt{float:left;margin:0 10px 0 0;font-size:10px;line-height:1.5;clear:both;}
    #chsmile .area-info dl dd{float:left;font-size:10px;line-height:1.5;}



    #chsmile .area-smile{position:relative;left:0;top:0;width:auto;height:auto;}
    #chsmile .area-smile:before{bottom:-5px;height:5px;background-size:4px 4px;}
    #chsmile .area-smile .normal{display:none;}
    #chsmile .area-smile ul li{width:98.75%;padding:0.625%;left:0 !important;top:0 !important;}

    #chsmile .area-smile ul li.pic-01 {
        position:relative;
        opacity: 1;
        animation: area-smile-pic-01 10s steps(10, end) infinite;
        -webkit-animation: area-smile-pic-01 10s steps(10, end) infinite;
    }
    #chsmile .area-smile ul li.pic-02 {
        opacity: 0;
        animation: area-smile-pic-02 10s steps(10, end) infinite;
        -webkit-animation: area-smile-pic-02 10s steps(10, end) infinite;
    }
    #chsmile .area-smile ul li.pic-03 {
        opacity: 0;
        animation: area-smile-pic-03 10s steps(10, end) infinite;
        -webkit-animation: area-smile-pic-03 10s steps(10, end) infinite;
    }
    @keyframes area-smile-pic-01 {
        0%  { opacity: 1; }
        30% { opacity: 1; }
        33% { opacity: 0; }
        63% { opacity: 0; }
        66% { opacity: 0; }
        97% { opacity: 0; }
        100%{ opacity: 1; }
    }
    @-webkit-keyframes area-smile-pic-01 {
        0%  { opacity: 1; }
        30% { opacity: 1; }
        33% { opacity: 0; }
        63% { opacity: 0; }
        66% { opacity: 0; }
        97% { opacity: 0; }
        100%{ opacity: 1; }
    }
    @keyframes area-smile-pic-02 {
        0%  { opacity: 0; }
        30% { opacity: 0; }
        33% { opacity: 1; }
        63% { opacity: 1; }
        66% { opacity: 0; }
        97% { opacity: 0; }
        100%{ opacity: 0; }
    }
    @-webkit-keyframes area-smile-pic-02 {
        0%  { opacity: 0; }
        30% { opacity: 0; }
        33% { opacity: 1; }
        63% { opacity: 1; }
        66% { opacity: 0; }
        97% { opacity: 0; }
        100%{ opacity: 0; }
    }
    @keyframes area-smile-pic-03 {
        0%  { opacity: 0; }
        30% { opacity: 0; }
        33% { opacity: 0; }
        63% { opacity: 0; }
        66% { opacity: 1; }
        97% { opacity: 1; }
        100%{ opacity: 0; }
    }
    @-webkit-keyframes area-smile-pic-03 {
        0%  { opacity: 0; }
        30% { opacity: 0; }
        33% { opacity: 0; }
        63% { opacity: 0; }
        66% { opacity: 1; }
        97% { opacity: 1; }
        100%{ opacity: 0; }
    }



}



@media screen and (min-width: 375px) and (max-width: 640px) {


		#chsmile .area-header-top .tx-01 dt {font-size:15px;}
    #chsmile .area-header-top .tx-01 dd {font-size:13px;}
    #chsmile .area-header-top .tx-01 dd small{font-size:9px;}
    #chsmile .area-header-top .tx-01 dd > span{font-size:13px; margin-top:12px;}
    #chsmile .area-header-top .tx-smile dt{font-size:13px;}
    #chsmile .area-header-top .tx-smile dd{font-size:24px;}
    #chsmile .area-header-top .tx-smile dd .date{font-size:9px;}
    #chsmile .area-header-top .tx-note-01{font-size:13px;}
    #chsmile .area-header-top .box-product dt{font-size:12px;}
    #chsmile .area-header-top .box-product dd span{font-size:7px;}



    #chsmile .area-nav-header ul li{font-size:12px;}



    #chsmile .area-info .capt{font-size:11px;}
    #chsmile .area-info dl dt{font-size:11px;}
    #chsmile .area-info dl dd{font-size:11px;}



}



@media screen and (min-width: 414px) and (max-width: 640px) {


		#chsmile .area-header-top .tx-01 dt {font-size:16px;}
    #chsmile .area-header-top .tx-01 dd {font-size:14px;}
    #chsmile .area-header-top .tx-01 dd small{font-size:9px;}
    #chsmile .area-header-top .tx-01 dd > span{font-size:14px; margin-top:12px;}
    #chsmile .area-header-top .tx-smile dt{font-size:14px;}
    #chsmile .area-header-top .tx-smile dd{font-size:28px;}
    #chsmile .area-header-top .tx-smile dd .date{font-size:9px;}
    #chsmile .area-header-top .tx-note-01{font-size:16px;}
    #chsmile .area-header-top .box-product dt{font-size:12px;}
    #chsmile .area-header-top .box-product dd span{font-size:7px;}



}