@charset "UTF-8";

/*************************************************
	全体レスポンシブ
**************************************************/
/*PC*/
@media screen and (min-width: 639px) {
  .is-mob {
    display: none !important;
  }
}
/*スマホ*/
@media screen and (max-width: 639px) {
  .is-pc {
    display: none !important;
  }
}

/*************************************************
	全体デフォルトスタイル
**************************************************/

body {
  margin: 0;
  position: relative;
  top: 0;
  left: 0;
  padding-bottom: 137px;
  color: #303030;
  transition: .3s ease;
  font-family: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}
body.is-open,
html.is-open {
  overflow: hidden;
}

.header,.column  {
      width: 100%;
      text-align: center;
      margin: 10px auto;
  }
/*ヘッダー*/
.header .star{
  display: flex;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 20px;
    top: 34px;
    font-size: 2rem;
}
.header .star a{
  color:#000;
}
.header .star img{
  width: 32px;
}
.header {
  z-index: 2;
  position: relative;
  border-top: solid 5px #000000;
}

.header_logo {
  position: ;
  height:  70px;
  margin: 10px auto;
  padding: .25em;
}
.header_logo.thehouseart{
  height: 40px;
}
.header_logo.publication{
    height: 45px;
}
.header_logo.thehousefood,
.header_logo.advertising{
    height:  50px;
}
.header_logo.thehousephoto,
.header_logo.club{
  height: 60px;
}
.header_logo.thehousephotograph{
  height: 80px;
}
.header_logo.wedding,
.header_logo.live{
  height: 100px;
}
.header_logo.mediacoverage{
  height: 50px;
  margin-top: 15px;
}

.header_logo.shop{
    height: 45px;
}


.header_nav-item {
  display: flex;
  margin-right: 1.5em;
  margin: 0 2em;
}
.header_nav-item a {
  align-self: center;
  color: #000;
}
.header_nav-item:hover > a,
.header_nav-item.is-active > a {
  position: relative;
  color: #777;
}
.header-menu{
  text-align: right;
  margin-left: auto;
  margin-right: 30px;
  box-sizing: border-box;
  z-index: 3;
  position: absolute;
  right: 0;
  bottom: 15px;
}

.header-menu a{
  color:#000;
}
.header-menu img{
  width: 100px;
}

/*SNSボタン*/
.header_sns {
  display: flex;
  z-index: 2;
  position: absolute;
  top: 0;
  right:1em;
  bottom: 0;
  margin: 20px auto;
  font-size: 3rem;
  height: 40px;
}
.header_sns-item {
  
  align-self: center;
  margin-left: 7px;
}
.header_sns-item img{
  width: 100%;
}
.header_sns-item  a{
  color:#000;
}
.fb-like{
  width: 40px;
  margin-top: 23px;
}

.title{
  border-top: solid 1px #000000;
  margin-top: 10px;
  padding-top: 10px;
  width: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
}

.title img{
  width: 550px;
  margin: 0 auto;
}
div.shopurl{
  width: 100%;
  text-align: left;
  font-size: 1.5em;
  line-height: 1.4em;
}

.margin-top-30{
  margin-top: 20px;
}
/*スマホ*/
@media screen and (max-width: 639px) {
  body {
    min-width: 320px;
    width: 100%;
  }
  .header,.header_nav,.column  {
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
  .header {
    left: 0;
    height: 70px;
    transition: .3s ease;
    border-bottom: solid 2px #000000;
  }
  .header.is-open {
    left: -80%;
  }
  .header_logo {
    height: 50px !important;
  }
  .header_logo.shop{
      height: 40px !important;
  }
  .header_nav {
    justify-content: space-around;
    position: static;
    width: 100%;
    margin-top: 50px;
    font-size: 1.4rem;
  }
  .header_nav-item a {
    height: 1.6rem;
  }
  .header_menu-trigger,
  .header_menu-trigger span {
  	display: inline-block;
  	transition: all .3s ease;
  	box-sizing: border-box;
  }
  .header_menu-trigger {
  	position: absolute;
    top: 0;
    right: 2em;
    bottom: 0;
    width: 34px;
    height: 25px;
    margin: auto;
  }
  .header_menu-trigger span {
  	position: absolute;
  	left: 0;
  	width: 100%;
  	height: 4px;
    border-radius: 4px;
  	background-color: #000;
  }
  .header_menu-trigger span:nth-of-type(1) {
  	top: 0;
  }
  .header_menu-trigger span:nth-of-type(2) {
  	top: 11px;
  }
  .header_menu-trigger span:nth-of-type(3) {
  	bottom: 0;
  }
  .header_menu-trigger.is-open span:nth-of-type(1) {
	  width: 45%;
  	-webkit-transform: translate3d(1px, 4px, 0) rotate(45deg);
  	transform: translate3d(1px, 4px, 0) rotate(45deg);
  }
  .header_menu-trigger.is-open span:nth-of-type(2) {
  	-webkit-transform: translate3d(-1px, 0, 0) rotate(-45deg);
  	transform: translate3d(-1px, 0, 0) rotate(-45deg);
  }
  .header_menu-trigger.is-open span:nth-of-type(3) {
  	width: 45%;
  	-webkit-transform: translate3d(16px, -3px, 0) rotate(45deg);
  	transform: translate3d(16px, -3px, 0) rotate(45deg);
  }

  /*モバイルメニュー*/
  .header_mob-nav {
    display: none;
    flex-direction: column;
    justify-content: center;
    z-index: 999;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: calc(100% - 70px);
    background: rgba(256,256,256,.8);
  }
  .header_mob-nav.is-open {
    display: flex;
  }
  .header_mob-nav a {
    color: #000;
  }
  .header_mob-nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 3em;
    font-size: 2rem;
    text-align: left;
    padding:1em
  }
  .header_mob-nav-item.is-active a {
    color: #000000;
  }

  /*SNS*/
  .instagram_mob {
    margin-right: .4em;
    width: 20px;
  }
  .title{
    margin-top: 5px;
  }

  .title img {
    width: 350px;
    margin: 5px auto 10px auto;
  }
}

/*************************************************
	カラム
**************************************************/

.column {
  width: 95%;
  margin: 40px auto;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.column_content {
  width: 900px;
  margin: 0 auto;
}

section.right-pannel{
  width: 380px;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

 div.right-box{
  width: 320px;
  margin-left: 25px;
  margin-bottom: 25px;
  cursor: pointer;
}
div.right-box div.title-box{
  font-size: 18px;
}
section.top-main{
  width: 100%;
  padding: 0 1em;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}


 div.right-box div.right-logo{
  border-top: 3px solid #000;
  padding: 7px 0;
  width: 100%;
  height: 50px;
  text-align: left;
}
div.right-box div.right-logo img{
  width: auto;
  height: 30px;
  padding-left: 2px;
}

div.right-box div.right-logo img.thehouseart{
  height: 25px;
}

div.right-box div.right-logo img.publication{
  height: 22px;
}

div.right-box div.right-logo img.advertising{
  height: 25px;
}

div.right-box div.right-logo.type1 img{
    height: 40px;
}
 div.right-box div.right-logo.type2 img{
    height: 20px;
}
div.right-box div.right-logo img.mediacoverage{
  height: 20px;
}


.photo-box{
  width: 33.333%;
  box-sizing: border-box;
  margin-bottom: 1px;
  background-color: #333;
}
@media screen and (max-width: 639px) {
  .column {
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0;
    flex-direction: column;
  }
  .photo-box{
    width: 50%;
    box-sizing: border-box;
    margin-bottom: 1px;
  }

  .column_content {
    width: 95%;
    margin: 0 auto;
  }

  div.right-box{

    width: 320px;
      margin: 20px auto 20px auto;
  }

  section.right-pannel{
    width: 100%;
    margin-top: 100px;
  }

  section.right-pannel div.right-box div.right-logo{
    width: 100%;
  }
  section.right-pannel div.list-sml-item{
    width: 100%;
    height: 100%;
  }
  section.right-pannel div.list-sml-item img{
    width: 100%;
    height: auto;
  }


}

/*************************************************
	コンテンツエリア
**************************************************/
.content {
  display: flex;
  -webkit-box-flex: 0;
  max-width: 100%;
  flex-wrap: wrap;
  width:calc(100% - 300px);
  flex-direction: row;
  align-items: flex-start;
}
.content-bottom{
  display: flex;
  -webkit-box-flex: 0;
  max-width: 100%;
  flex-wrap: wrap;
  width:100%;
}
div.overlay{
  position: fixed;
  top:0;
  left:0;
  z-index: 200;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

section.detail{
  display: flex;
  -webkit-box-flex: 0;
  max-width: 100%;
  flex-wrap: wrap;
  width:990px;
  margin: 0 auto 0 auto;
}
.loading{
  width: 100vw;
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
section.detail div.item-detail{
  width: 100%;

}
.main {
  margin-top: 120px;
  width: 1100px;
  margin: 65px auto 0 auto;
  padding: 14px 0 0;
  overflow: hidden;

}

.close{
  position: absolute;
  cursor: pointer;
  top:20px;
  right: 20px;
  width: 50px;
  height: 50px;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border:  1px solid #000;
}



@media screen and (max-width: 639px) {
  .content {

    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
    flex-direction:column;
    width: 100%;
    position: relative;
  }
  .content_title {
    font-size: 2.2rem;
  }
}

#root{
  width: 100%
}


@media screen and (max-width: 639px) {
  img.header_logo.mysweethoney{
    margin-top: 10px;
    width: 220px;
  }
}

.header_nav {
  border-bottom: solid 2px #000000;
  position: relative;
  margin: 20px auto;
  padding-bottom: 30px;
}
.header_nav ul{
  display: flex;
  padding-top: 20px;
  list-style-type: none;
  justify-content: center;
  align-items: center;

}

img.hlogo{

  min-width: 100px;
}
.header_nav li{
  margin: 0 10px;
  cursor: pointer;
}

section.detail_image{
  display: flex;
  -webkit-box-flex: 0;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 20px auto 0 auto;
}

section.detail_image{
    
    max-width: 100vw;
}
section.detail_image img{
  object-fit: contain;
  width: 100%;
  height: calc(100vh - 40px) ;
}

div.last-decade{
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.last-decade div{
  font-size: 25px;
  vertical-align: baseline;
  font-family:  'Hiragino Mincho ProN'
}
div.last-decade div.title-d{
  margin-bottom: 20px;
}


div.last-decade div.big{
  font-size: 1.4em;
}
div.last-decade div.hour{
  margin-left: 10px;
}

div.end-to-time{
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

div.load-hidden{
  display: none;
}

div.load-show{
  display: block;
}

div.list-loading{
  margin: 40px;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.mr-20{
  margin-right: 20px;
}


div.infnit{
  position: fixed;
  top:180px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 100px);
  background-color: #fff;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: fadein;
  animation-duration: 4.2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
div.infnit div.img{
  width: 90vw;
  max-width: 500px;
  
}
div.infnit div.img img{
  width: 100%;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  6.25% /* 200 / 3200 */ {
    opacity: 1;
  }
  85.75% /* 3000 / 3200 */ {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}