﻿#home-view .key-area {
    display: none;
}
#header-change{
	display:inline;
}

/* ===================================
  top-banner
=================================== */
.top-banner{
  overflow:hidden;
  display:flex;
    justify-content: space-between;
    padding-top: 50px;
    display: none;
}

.top-banner a:hover{
  opacity:.8;
}
.top-banner01{
    width: calc(100% - 320px);
    display:flex;
    justify-content: space-between;
    height: 263px;
}
.top-banner01 img{
  height:263px;
}

.top-banner02{
    width: 300px;
    height: 263px;
}
.top-banner02 img{
  width:300px;
  height:122px;	
}
.top-banner02 div + div{
  margin-top:12px;
}

/* ===================================
  header-dotcom
=================================== */
header#global-header .header-dotcom .search-box-wrapper .search-area{
  background-color:#FFF;
}
header#global-header .header-top{
  position:relative;
  padding: 10px !important;
}
.header-dotcom .dotcom-menu{
    position: absolute;
    top: 10px;
    right: 330px;
    background-color:#FFF;
    border-radius: 12px;
    width:360px;
    display: none;
}


.header-dotcom .dotcom-menu a:hover img{
  opacity:.6;
}

.header-dotcom .dotcom-menu ul{
  display:flex;
    justify-content: space-around;
    padding:1.1% 1.5%;
}
.header-dotcom .dotcom-menu ul li{
  border-left:1px dotted #CCC;
  width:25%;
}
.header-dotcom .dotcom-menu ul li:last-child{
  border-right:1px dotted #CCC;
}

.header-dotcom .dotcom-menu ul li img{
padding: 0 5%;
display: table-cell
}
header#global-header .header-top .cart-btn{
  padding: 5px 7px !important;
    background-color: #fff !important;
    border-radius: 50px !important;
}

/* ===================================
  photo-box_h
=================================== */
.photo-box_h{
  text-align:center;
  display:flex;
  /*justify-content: stretch;*/
  margin-bottom: -1%;
  }
.photo-box_h div{
  width:25%;
}
.photo-box_h div a img{
  width:100%;
}

.photo-box_h div a{
  margin:0 auto;
  display:flex;
  width:100%;
}

.photo-box_h div a img:hover{
  opacity: .8;
}


/* ===================================
  header-dotcom
=================================== */
@media screen and (max-width: 768px){
  .header-top .dotcom-menu{
    left: 280px;
  }
header#global-header .header-top .logo {
    width: 30% !important;
}  
.top-banner {
padding: 50px 10px 10px;
}  
.top-banner01 {
    width: 70%;
    height: auto;
}

.top-banner01 div img {
  width:95%;
  height:auto;
}


.top-banner02{
    width: 30%;
    height: auto;
}

.top-banner02 img{
  width:100%;
  height:auto;
}
.top-banner02 div + div{
  margin-top:3%;
}

}


@media screen and (min-width: 660px) {
  .header-pan, .footer-pan {
      overflow-x: unset;
  }
 /* ===================================
  header-dotcom
=================================== */   
.pc-none,h2.subheading{
  display:none;
}  
}
@media screen and (max-width: 660px) {
  main#content.full {
    margin-top: 112px!important;
  }
  main#search-result-view header.content-header div.inner div.modal div.modal-overlay div.modal-wrap {
    margin-top: 100px;
  }
  main#search-result-view nav.category-nav ul.menu li.item.all a,
  main#search-result-view nav.category-nav ul.menu li.item.item a,
  main#search-result-view nav.category-nav ul.menu li.item.article a,
  main#search-result-view nav.category-nav ul.menu li.item.story-tv a,
  main#search-result-view nav.category-nav ul.menu li.item.special a {
  font-size: 1.7em;
  }
  main#search-result-view nav.category-nav ul.menu li.item.all a div .material-icons,
  main#search-result-view nav.category-nav ul.menu li.item.item a div .material-icons,
  main#search-result-view nav.category-nav ul.menu li.item.article a div .material-icons,
  main#search-result-view nav.category-nav ul.menu li.item.story-tv a div .material-icons,
  main#search-result-view nav.category-nav ul.menu li.item.special a div .material-icons {
    font-size: unset;
  }
  
  
 /* ===================================
  header-dotcom
=================================== */ 
.header-top .dotcom-menu{
  display:none;
}
.top-banner{
  padding:10px;
}
.top-banner,.top-banner01,.top-banner02{
  display:block;
  width:100%;
}

.top-banner01 div img{
  width:100%;
}


h2.subheading{
margin: 35% auto 1%;
    padding: 10px;
    background-color: #ff5252;
    position: relative;
    text-align: left;
    width:95%;
    color:#FFF;
    font-size: 1.3rem;
}
.top-banner02 div + div{
  margin-top:0;
}

.top-banner p{
  margin:0 3% 3%;
  line-height: 1.3;
  letter-spacing: 0.5px;
}
.top-banner p span{
  display:block;
  font-weight:bold;
}


.sm-none{
  display:none;
}

/* ===================================
  photo-box_h
=================================== */
.photo-box_h{
  display:block;
  margin-bottom: 0;  
  }
.photo-box_h div,.photo-box_h div img{
  width:100% !important;
}  


}



/* ===================================
  header-kurashi
=================================== */
.header-kurashi{
  background-color:#bce9f7;
}

.content-kurashi header#global-header{
      border-top: 5px solid #bce9f7;
}

header#global-header .header-kurashi .search-box-wrapper .search-area{
  background-color:#FFF;
}
.header-kurashi .dotcom-menu{
    position: absolute;
    top: 10px;
    right: 330px;
    background-color:#FFF;
    border-radius: 12px;
    width:360px;
}

/*.header-kurashi .dotcom-menu a img{
  opacity:.6;
}*/
.header-kurashi .dotcom-menu a:hover img{
  opacity:.6;
}

.header-kurashi .dotcom-menu ul{
  display:flex;
    justify-content: space-around;
    padding:1.1% 1.5%;
}

.header-kurashi .dotcom-menu ul li{
  width:25%;
}

.header-kurashi .dotcom-menu ul li + li{
  border-left:1px dotted #CCC;
}
.header-kurashi .dotcom-menu ul li img{
padding: 0 5%;
display: table-cell;
}

.content-kurashi header#global-header .header-top .logo{
  width:275px;
}

@media screen and (max-width: 660px) {
 
.content-kurashi header#global-header .header-top{
    padding: 10px;
}  
.content-kurashi header#global-header .header-top .logo{
  width:65% !important;
}
.header-kurashi .dotcom-menu{
  display:none;
}  
}

/* ===================================
  header-kurashi
=================================== */


/* ===================================
  header-inte
=================================== */
.header-inte{
  background-color:#ece5d9;
}

.content-inte header#global-header{
      border-top: 5px solid #ece5d9;
}

header#global-header .header-inte .search-box-wrapper .search-area{
  background-color:#FFF;
}
.header-inte .dotcom-menu{
    position: absolute;
    top: 10px;
    right: 330px;
    background-color:#FFF;
    border-radius: 12px;
    width:360px;
}

/*.header-inte .dotcom-menu a img{
  opacity:.6;
}*/
.header-inte .dotcom-menu a:hover img{
  opacity:.6;
}

.header-inte .dotcom-menu ul{
  display:flex;
    justify-content: space-around;
    padding:1.1% 1.5%;
}

.header-inte .dotcom-menu ul li{
  width:25%;
}
.header-inte .dotcom-menu ul li + li{
  border-left:1px dotted #CCC;
}
.header-inte .dotcom-menu ul li img{
padding: 0 5%;
display: table-cell
}

.content-inte header#global-header .header-top .logo{
  width:275px;
}


@media screen and (max-width: 660px) {
.content-inte header#global-header .header-top{
    padding: 10px;
}  
.content-inte header#global-header .header-top .logo{
  width:65% !important;
}  
.header-inte .dotcom-menu{
  display:none;
}
}

/* ===================================
  header-inte
=================================== */

/* ===================================
  header-garden
=================================== */
.header-garden{
  background-color:#e8e8e8;
}

.content-garden header#global-header{
      border-top: 5px solid #e8e8e8;
}

header#global-header .header-garden .search-box-wrapper .search-area{
  background-color:#FFF;
}
.header-garden .dotcom-menu{
    position: absolute;
    top: 10px;
    right: 330px;
    background-color:#FFF;
    border-radius: 12px;
    width:360px;
}

/*.header-garden .dotcom-menu a img{
  opacity:.6;
}*/
.header-garden .dotcom-menu a:hover img{
  opacity:.6;
}

.header-garden .dotcom-menu ul{
  display:flex;
    justify-content: space-around;
    padding:1.1% 1.5%;
}
.header-garden .dotcom-menu ul li{
  width:25%;
}

.header-garden .dotcom-menu ul li + li{
  border-left:1px dotted #CCC;
}
.header-garden .dotcom-menu ul li img{
padding: 0 5%;
display: table-cell
}

.content-garden header#global-header .header-top .logo{
  width:275px;
}
@media screen and (max-width: 660px) {
 
.content-garden header#global-header .header-top{
    padding: 10px;
}  
.content-garden header#global-header .header-top .logo{
  width:65% !important;
}
.header-garden .dotcom-menu{
  display:none;
}  
}

/* ===================================
  header-garden
=================================== */




/* ===================================
  header-pet
=================================== */
.header-pet{
  background-color:#ffe29e;
}

.content-pet header#global-header{
      border-top: 5px solid #ffe29e;
}

header#global-header .header-pet .search-box-wrapper .search-area{
  background-color:#FFF;
}
.header-pet .dotcom-menu{
    position: absolute;
    top: 10px;
    right: 330px;
    background-color:#FFF;
    border-radius: 12px;
    width:360px;
}

/*.header-pet .dotcom-menu a img{
  opacity:.6;
}*/
.header-pet .dotcom-menu a:hover img{
  opacity:.6;
}

.header-pet .dotcom-menu ul{
  display:flex;
    justify-content: space-around;
    padding:1.1% 1.5%;
}
.header-pet .dotcom-menu ul li{
  width:25%;
}

.header-pet .dotcom-menu ul li + li{
  border-left:1px dotted #CCC;
}
.header-pet .dotcom-menu ul li img{
padding: 0 5%;
display: table-cell
}

.content-pet header#global-header .header-top .logo{
  width:275px;
}

@media screen and (max-width: 660px) {  
.content-pet header#global-header .header-top{
    padding: 10px;
}  
.content-pet header#global-header .header-top .logo{
  width:65% !important;
}  
.header-pet .dotcom-menu{
  display:none;
}  
}

/* ===================================
  header-pet
=================================== */


header#global-header .header-top p.logo img{
	display:none;
}
div[class*="content-"] header#global-header .header-top p.logo img{
	display:inline;
}




