@charset "utf-8";

/*
 *
 * Usage: Base layout
 *
 * Name: style.css
 *
 */



/*---------------------------------------------------------------------
setting
---------------------------------------------------------------------*/
body {height:100%; width:100%; min-width:1000px;}
body a {color:#000;}

::-moz-selection {background:#b5b5b5; color:#333;}
::selection {background:#b5b5b5; color:#333;}

.yumin {font-family:"游明朝",YuMincho,"Yu Mincho","Hiragino Mincho ProN","ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif; letter-spacing:0;}


/*---------------------------------------------------------------------
CSS3 animation & parts layout
---------------------------------------------------------------------*/
/* link */
a img       {opacity:1; filter:alpha(opacity=100); transition:all 0.2s ease-in;}
a:hover img {opacity:0.7; filter:alpha(opacity=70); transition:all 0.2s ease-in;}
a           {transition:all 0.2s ease-in;}
a:hover     {transition:all 0.2s ease-in;}
.opa_bg a,
.opa_bg input       {opacity:1; transition:all 0.2s ease-in;}
.opa_bg a:hover,
.opa_bg input:hover {opacity:0.7; transition:all 0.2s ease-in;}
.trans_bg a         {display:block; overflow:hidden; height:0; opacity:1; filter:alpha(opacity=100); transition: all 0.2s ease-in;}
.trans_bg a:hover   {opacity:0; filter:alpha(opacity=0); transition: all 0.2s ease-in;}

.a_bound {transition:all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}
.obj {position:absolute;}

.target {
  transition:all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform:translate(0,20px);
  opacity:0;
}
.target.action {
  transform:translate(0,0);
  opacity:1;
}



.center_btn {text-align:center;}
  .center_btn a,
  .center_btn input {
    transition:all 0.2s ease-in;
    background-color:#fff;
    display:inline-block; border:1px solid #000; text-decoration:none;
    min-width:300px; height:58px; line-height:58px; font-size:16px; cursor:pointer;
  }
  .center_btn a:hover,
  .center_btn input:hover {background-color:#2e3132; color:#fff;}

/* slider */
.slider {position:relative; width:100%; height:700px; overflow:hidden;}
.slider .slider_all {width:1000px; height:660px; margin:0 auto; position:relative;}
.slider .slide_wrap {width:3000px; height:660px; position:absolute; left:50%; margin-left:-1500px;}
.slider .bx_pager {position:absolute; bottom:0; left:0; text-align:center; width:100%; letter-spacing:-.4em;}
  .slider .bx_pager a {display:inline-block; letter-spacing:normal; margin:0 3px;}

.slider .bx-caption {
  font-family:"游明朝",YuMincho,"Yu Mincho","Hiragino Mincho ProN","ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif; letter-spacing:0;
  padding-top:15px; font-size:14px;
}
.sp .slider .bx-caption {padding-left:10px;}

.slider .pager {position:absolute; bottom:0; left:50%; margin-left:-500px; width:1000px; text-align:right;}
  .slider .pager .bx-pager-item {display:inline-block; margin-left:10px;}
  .slider .pager .bx-pager-item a {background:url(../images/common/ic_pager.png) no-repeat 0 0; overflow:hidden; height:0; display:block; width:10px; padding-top:10px;}
  .slider .pager .bx-pager-item a.active {background:url(../images/common/ic_pager_on.png) no-repeat 0 0;}

.slider .btn {
  transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position:absolute; top:50%; margin-top:-61px;
}
  .slider .btn a {display:block; overflow:hidden; height:0; padding-top:122px; width:37px;}
  .slider .btn_prev {left:80px;}
  .slider .btn_next {right:80px;}
  .slider .btn_prev a {background:url(../images/common/btn_prev.png) no-repeat 0 0;}
  .slider .btn_next a {background:url(../images/common/btn_next.png) no-repeat 0 0;}
  .slider .btn_prev:hover {
    left:70px;
  }
  .slider .btn_next:hover {
    right:70px;
  }



/*---------------------------------------------------------------------
Header layout
---------------------------------------------------------------------*/
#globalH {background-color:#fff; position:relative;}
  #globalH #other {position:fixed; top:28px; right:36px; font-size:16px; font-style:italic; z-index:9999; line-height: 1;} /*追加-20190204*/
    #globalH #other a {text-decoration:none;}
    #globalH #other a:hover {color:#999;}
    #globalH #other span {color:#c4c4c4;}

  #globalH #sns {
    transition:all 0.2s ease-in;
    transform:rotate(-90deg);
    position:fixed; top:50%; left:-30px; z-index:9999;
    font-size:16px; font-style:italic; color:#fff;
  }
    #globalH #sns a {text-decoration:none; color:#fff;}
    #globalH #sns a:hover {color:#999;}

    #globalH #sns.wh,
    #globalH #sns.wh a {color:#fff;}
    #globalH #sns.bk,
    #globalH #sns.bk a {color:#000;}


  #globalH nav {text-align:center; padding:60px 0;}
    #globalH nav h1 {margin-bottom:40px;}
    #globalH nav .gnav li {display:inline-block; margin:0 12px; font-size:16px; font-style:italic; color:#c4c4c4; position:relative;}
    #globalH nav .gnav a  {text-decoration:none;}
    #globalH nav .gnav a:hover {color:#999;}

    #globalH nav .gnav .acc a  {position:relative; z-index:2;}
    #globalH nav .gnav .acc ul {
      transition:all 0.2s ease-in;
      background-color:#fff; opacity:0; z-index:1;
      position:absolute; top:0; left:0; text-align:left; padding:30px 20px 20px 20px; margin-left:-20px;
    }
    #globalH nav .gnav .acc ul li {
      transition:all 0.4s ease-in-out;
      margin:0 0 10px 0; opacity:0; line-height:100%;
    }
    #globalH nav .gnav .acc ul li:last-child {margin-bottom:0;}
    #globalH nav .gnav .acc:hover ul,
    #globalH nav .gnav .acc:hover ul li {opacity:1;}
    #globalH nav .gnav .acc:hover ul li:nth-child(1) {transition-delay:0.1s;}
    #globalH nav .gnav .acc:hover ul li:nth-child(2) {transition-delay:0.2s;}
    #globalH nav .gnav .acc:hover ul li:nth-child(3) {transition-delay:0.3s;}


  nav.minheader {
    transition:all 0.4s ease-in-out;
    background-color:#fff; position:fixed; top:-140px; left:0; z-index:999;
    width:100%; height:70px; text-align:center;
  }
  nav.minheader.active {top:0;}

    nav.minheader h1 {
      background:url(../images/common/logo_sonihouse_min.png) no-repeat 0 0;
      background-size:133px auto;
      width:133px; height:27px; text-indent:-9999px;
      position:absolute; top:20px; left:37px;
    }
    nav.minheader h1 a {display:block; overflow:hidden; width:133px; height:27px;}

    nav.minheader .gnav {padding-top:27px;}
      nav.minheader .gnav li {display:inline-block; margin:0 12px; font-size:16px; font-style:italic; color:#c4c4c4; position:relative; line-height: 1;} /*追加-20190204*/
/*追加-20190204*/
nav.minheader .gnav li a, #globalH #other a {
	display: inline-block;
	border-bottom: 1px solid rgba(0,0,0,0);
	transition:all .5s ease-in;
}
nav.minheader .gnav li a:hover, nav.minheader .gnav li a:hover,
#globalH #other a:hover, #globalH #other span.current a:hover {
	border-bottom: 1px solid rgba(0,0,0,.25);
}
nav.minheader .gnav li.current a, #globalH #other span.current a {
	border-bottom: 1px solid rgba(0,0,0,.75);
}
#globalH #other span.current {
	margin: 0;
}
nav.minheader .gnav li.current > ul li a {
	border-bottom: 1px solid rgba(0,0,0,0);
}
nav.minheader .gnav li.current > ul li.current a {
	border-bottom: 1px solid rgba(0,0,0,0);
}
nav.minheader .gnav li.current > ul li a:hover,
nav.minheader .gnav li.current > ul li.current a:hover {
	border-bottom: 1px solid rgba(0,0,0,0);
}
/*追加-20190204-END*/
      nav.minheader .gnav a  {text-decoration:none;}
      nav.minheader .gnav a:hover {color:#999;}

      nav.minheader .gnav .acc a  {position:relative; z-index:2;}
      nav.minheader .gnav .acc ul {
        transition:all 0.2s ease-in;
        background-color:#fff; opacity:0; z-index:1;
        position:absolute; top:0; left:0; text-align:left; padding:30px 20px 20px 20px; margin-left:-20px;
      }
      nav.minheader .gnav .acc ul li {
        transition:all 0.4s ease-in-out;
        margin:0 0 10px 0; opacity:0; line-height:100%;
      }
      nav.minheader .gnav .acc ul li:last-child {margin-bottom:0;}
      nav.minheader .gnav .acc:hover ul,
      nav.minheader .gnav .acc:hover ul li {opacity:1;}
      nav.minheader .gnav .acc:hover ul li:nth-child(1) {transition-delay:0.1s;}
      nav.minheader .gnav .acc:hover ul li:nth-child(2) {transition-delay:0.2s;}
      nav.minheader .gnav .acc:hover ul li:nth-child(3) {transition-delay:0.3s;}

  #btnMenu,
  #spSns, #spStore {display:none !important;} /* ohs-#spStore 追加 */


/*---------------------------------------------------------------------
Footer layout
---------------------------------------------------------------------*/
#globalF {background-color:#2e3132; text-align:center; color:#fff; padding:60px 0 40px 0; font-size:14px; position:relative;}

#btnPagetop {position:fixed; bottom:47px; right:36px;}
  #btnPagetop a {
    transition:all 0.2s ease-in-out;
    display:block; overflow:hidden; width:27px; height:0; padding-top:30px;
  }
  #btnPagetop a:hover {background-position:0 0 !important;}

  #btnPagetop.wh a {background:url(../images/common/btn_pagetop.png) no-repeat 0 5px; border-bottom:1px solid #fff;}
  #btnPagetop.bk a {background:url(../images/common/btn_pagetop_bk.png) no-repeat 0 5px; border-bottom:1px solid #000;}


/*---------------------------------------------------------------------
Container layout
---------------------------------------------------------------------*/
#container {padding-top:140px; min-width:1000px;}

#container .page_title {text-align:center; margin-bottom:95px;}
  #container .page_title span {display:block;}
  #container .page_title .en {
    background:url(../images/common/line_solid-x2.gif) no-repeat 50% 100%;
    padding-bottom:25px; margin-bottom:15px; font-size:28px; font-style:italic;
  }
  #container .page_title .jp {font-size:16px;}

#container section .inner {width:1000px; margin:0 auto;}




/*---------------------------------------------------------------------
Tablet layout
---------------------------------------------------------------------*/
.tb {min-width:100%;}


/*---------------------------------------------------------------------
SP layout
---------------------------------------------------------------------*/
.sp,
.sp #container {min-width:100%;}
.sp #container .inner {width:100%;}
.sp #btnPagetop {right:20px;}

.sp .center_btn a,
.sp .center_btn input { /* 202010-修正 */
/*	  min-width:100%;*/
	min-width: calc(100% - 40px);
}


/* header */
.sp #globalH #sns,
.sp #globalH #other {display:none;}

.sp #btnMenu,
.sp #spSns, .sp #spStore {display:block !important;} /* ohs-#spStore 追加 */

.sp #btnMenu {position:absolute; top:15px; right:15px; z-index:9999;}
.sp .menu-trigger,
.sp .menu-trigger span {
	transition: all .4s;
  display: inline-block; box-sizing: border-box;
}
.sp .menu-trigger {position: relative; width:18px; height:18px;}
.sp .menu-trigger span {
	position: absolute; left: 0; width: 100%; height:2px; background-color: #000;
}
.sp .menu-trigger span:nth-of-type(1) {top: 0;}
.sp .menu-trigger span:nth-of-type(2) {top:8px;}
.sp .menu-trigger span:nth-of-type(3) {bottom: 0;}

.sp .menu-trigger.active span {background-color:#fff;}
.sp .menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(8px) rotate(-45deg);
	transform: translateY(8px) rotate(-45deg);
}
.sp .menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.sp .menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-8px) rotate(45deg);
	transform: translateY(-8px) rotate(45deg);
}

.sp nav.minheader {
  top:0;
}
.sp nav.minheader .gnav li.current a,
.sp #globalH #other span.current a,
.sp nav.minheader .gnav li a:hover,
.sp nav.minheader .gnav li a:hover,
.sp #globalH #other a:hover,
.sp #globalH #other span.current a:hover {border-bottom: none;}

  .sp nav.minheader h1 {left:50%; margin-left:-67px;}
  .sp nav.minheader h1 a {display:block; overflow:hidden; width:133px; height:27px;}

  .sp nav.minheader .gnav {
    transition:all 0.2s ease-in-out;
    background-color:#222; position:fixed; top:0; left:0; z-index:999;
    width:100%; height:100%; text-align:center; color:#fff;
    opacity:0; visibility:hidden; padding-top:90px;
  }
  .sp nav.minheader .gnav.active {opacity:1; visibility:visible;}

    .sp nav.minheader .gnav li {display:block; margin:0 0 16px 0; font-size:16px;}
    .sp nav.minheader .gnav a  {color:#fff; font-size:16px;}
    .sp nav.minheader .gnav a:hover {color:#fff;}

    .sp nav.minheader .gnav .acc ul {
      text-align:center; position:relative; padding-top:10px; opacity:1;
      background-color:transparent; padding-right:0;
		padding-bottom: 0; /* ohs 追加 */
    }
    .sp nav.minheader .gnav .acc ul li {opacity:1;}
	/* ohs 追加 */
	.sp nav.minheader .gnav .acc ul li.small a {
		font-size: .75em;
	}
	.sp nav.minheader .gnav li#spStore {
		padding-bottom: .25em;
	}


/* slide */
.sp .slider {height:auto;}
.sp .slider .slide_wrap {position:relative; height:auto; width:100%; left:0; margin-left:0;}
.sp .slider .slide img {width:100%;}
.sp .slider .btn {margin-top:-30px;}
.sp .slider .btn_prev {left:20px;}
.sp .slider .btn_next {right:20px;}
.sp .slider .btn a {
  background-size:auto 61px;
  padding-top:61px; width:18px;
}
.sp .slider .pager {
  transform:translate(-50%, 0);
  width:100%; text-align:center; margin-left:0; bottom:-30px;
}