/* -------------------------------------------------------------------
BODY
------------------------------------------------------------------- */
/*752PX*/
@media screen and (min-width:751px) {
body {
    padding-top:80px;
}
body.home {
    padding-top:0;
}
}/* --------------------------------------------- PC end */



/* -------------------------------------------------------------------
Loading
------------------------------------------------------------------- */
#loader-bg {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #FFF;
  z-index: 10001;
}
#loader {
  display: block;
  position: fixed;
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 2;
  background-image: url(../img/parts_loading_2.gif);
  background-size: 48px;
  background-repeat: no-repeat;
  background-position: center;
}

#wrap-all {
   visibility:hidden;
   opacity: 1;
}


/* -------------------------------------------------------------------
Header
------------------------------------------------------------------- */
header .header-wrap .site-info .search-group>button {
    outline: none;
}


.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

header{
    width: 100%;
    height: 80px;
    background: rgba(0,0,0,.4);
    position: absolute;
    top:0;
    display: block;
}
.subMenu{
    width: 100%;
    background: #bcbdc0;
    position: absolute;
    top:0;
    display: block;
}

header *{
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

header .header-wrap{
    width: 100%;
    margin:auto;
    position: relative;
}

header h1 {
    margin: auto;
    padding: 0;
    display: block;
    font-size: 0;
    position: relative;
    overflow: hidden;
    text-indent: -9999px;
}

header h1 a {
    display: block;
    width: 100%;
    height: 100%;
    margin:auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

header .header-wrap .site-info{
    background: #bdbdbd;
}

header .search-group form i.search {
    width: 26px;
    height: 26px;
    margin-right: 16px;
    vertical-align: middle; 
    background-image: url(../img/pc/common/search.svg);
    background-position: center center;
    background-size: 26px 26px;
    background-repeat: no-repeat;
    display: inline-block;
}

header nav ul.dropmenu li a {
    font-size: 14px;
    word-wrap: break-word;
    word-break: break-word;
}

header h1:hover{
    opacity: .75;
}

#header-search-btn.pure-button {
    width: 72px;
    height: 32px;
    font-family: inherit;
    font-size: 14px;
    padding: 0.4em 1em;
    color: #FFF;
    border: none;
    background-color: #5b5b5b;
    text-decoration: none;
    border-radius: 2px;
    box-sizing: border-box;
}


@media screen and (min-width:751px) {

header,
.subMenu {
    width: 100%;
    position: absolute;
    top:0px;
    opacity: 1;
    z-index: 10000;
    transition: background 1s linear;
    box-sizing: border-box;
}
header.subMenuOff,
.subMenu.subMenuOff{
    width: 100%;
    position: fixed;
    top: 0px;
    transform: translateY(-244px);
    -webkit-transform: translateY(-244px);
}
header.subMenuOn,
.subMenu.subMenuOn{
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    position: fixed;
    top:0px;
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transition: .5s;
    background: #bcbdc0;
}

.subMenu{
    display: none;
}

/*header:after{
    content:"";
    width: 50%;
    height: 80px;
    display: block;
    margin: auto;
    position: absolute;
    top: 0;
    right:0;
    background:#bdbdbd; 
    z-index: -1;
}*/
header .header-wrap {
    height: 80px;
    display: table;
    overflow: hidden;
}
header .header-wrap nav{
    background: #FFF;
    transition: background .3s linear;
}
header.subMenuOn .header-wrap nav{
    color: #FFF;
    background: #76787b;
}
header.subMenuOn .header-wrap nav a{
    color: #FFF;
}

header .header-wrap .logo{
    display: table-cell;
    vertical-align: middle; 
}
header h1{
    height: 100%;
}
header h1:after{
    content:"";
    display: inline-block;
    margin: auto;
    position: absolute;
    top: 13px;
    right:0;
    left: 0;
    z-index: 2;
}
header h1:after{
    height: 28px;
    background-image: url(../img/pc/common/h1_logo.png);
    background-position: center center!important;
    background-repeat: no-repeat;
    position: absolute;
    top: 27px;
}
header .header-wrap nav{
    height: 100%;
    display: table-cell!important;
}
header nav ul.dropmenu{
    width: 100%;
    height: 100%;
    display: table;
    box-sizing: border-box;
}
header nav ul.dropmenu li{
    display: table-cell;
    position: relative;
    vertical-align: middle;
}
header .header-wrap .site-info{
    display: table-cell;
    vertical-align: top;
    white-space: nowrap;
    position: relative;
}
header .header-wrap .site-info .phone{
    height: 100%;
    float: left;
    display: inline-block;
}
header .header-wrap .site-info .phone{
    background: #FFF;
    transition: background .3s linear;
}
header.subMenuOn .header-wrap .site-info .phone{
    background: #76787b;
}

header .phone p{
    height: 40px;
    position: relative;
    margin: 3px auto 0;
    padding: 0 0 0 24px;
}
header .phone p:after{
    content:"\f095";
    font-family: FontAwesome;
    font-size: 24px;
    position: absolute;
    top: -7px;
    left: 0;
    -moz-transform:    rotate( 45deg );  /* Firefox用 */
    -webkit-transform: rotate( 45deg );  /* Chrome,Safari,新しいOpera用 */
    -o-transform:      rotate( 45deg );  /* 古いOpera用 */
    -ms-transform:     rotate( 45deg );  /* IE9用 */
    transform:         rotate( 45deg );  /* CSS3の書き方 */
}
header .phone p:after{
    color: #777677;
    transition: color .3s linear;
}
header.subMenuOn .phone p:after{
    color: #bdbdbd;
}

header .phone p a{
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    background-position: right center;
    background-repeat: no-repeat;
    display: block;
}
header .phone p a{
    background-image: url(../img/pc/common/phone.svg);
    background-size: contain;
}
header.subMenuOn .phone p a{
    background-image: url(../img/pc/common/phone02.svg);
    background-size: contain;
}


header .header-wrap .site-info .search-group{
    width: 80px;
    height: 100%;
    background: #bdbdbd;
    display: inline-block;
}
header .header-wrap .site-info .search-group>button{
    width: 80px;
    height: 100%;
    background-color: #bdbdbd;
    background-image: url(../img/pc/common/search.svg);
    background-position: center center;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    border:none;
    border-radius: 0px;
    display: block;
    position: relative;
    transform: translate(0);
}
header .header-wrap .site-info .search-group>button i{
    display: block;
    height: 73px;
}
.search-group-inner{
    width: 320px;
    height: 100%;
    padding: 22px;
    position: absolute;
    top:0;
    right:0;
    box-sizing: border-box;
    background: #bdbdbd;
}
.pure-menu-active button#spSearchBtn {
    width: 80px;
    transition: all 0.2s;
    transform: translate(-240px);
    opacity: 0;
    z-index: 110; 
}
.pure-menu-active>.search-group-inner.pure-menu-children {
    right:0;
    display: block;
    transform: translate(0);
    opacity: 1;
    z-index: 100; 
}
.search-group-inner.pure-menu-children {
    transition: all 0.2s;
    transform: translate(312px);
    opacity: 0;
    z-index: -1;
}
.search-group-inner form {
    margin: auto;
}
.search-group form .fa{
    margin-right: 16px;
    color: #FFF;
}
.search-group form>input[type="button"]{
    height: 32px;
    margin:0;
    font-size: 14px;
    color: #FFF;
    border: none;
    background:#5b5b5b;
    border: none;
    outline:none;
}

header #spMenuOpenBtn {
    display: none;
}

header nav ul.dropmenu{
    *zoom: 1;
    display: table;
    float: left;
    box-sizing: border-box;
}

header nav ul.dropmenu:after{
  clear: both;
}

header nav ul.dropmenu li a{
    width:100%;
    height: 100%;
    font-weight: normal;
    line-height: 2;
    text-align:center; 
    text-decoration: none;
    display: -ms-flexbox!important;
    display: -webkit-flex!important;
    display: flex!important;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    letter-spacing: -0.1px;
}
header nav ul.dropmenu li a{
    color:#333;
    transition: color .3s linear;
}
header.subMenuOn .drawer-nav ul.dropmenu li a{
    color:#FFF;
}

header nav ul.dropmenu li a:after{
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #333;
    transition: width .3s;
}
header nav ul.dropmenu li a:after{
    background: #333;
    transition: background .3s linear;
}
header.subMenuOn .drawer-nav ul.dropmenu li a:after{
    background: #FFF;
}

header nav ul.dropmenu li:hover > a:after,
header nav ul.dropmenu li a:hover:after,
header nav ul.dropmenu li.current a:after{
    width:3em;
    transition: width .3s;
}
header nav ul.dropmenu li:nth-of-type(4):hover > a:after,
header nav ul.dropmenu li.current:nth-of-type(4) a:after{
    width:2em;
}
}/* --------------------------------------------- PC end */


@media screen and (min-width:1490px) {
header .header-wrap .logo{
    width:38%;
}
}
/* --------------------------------------------- PC end */


@media screen and (min-width:1440px) {
header .header-wrap{
}
header .header-wrap .logo{
    width:33.333333%;
}
header h1{
    width: 77.08333333333334%;
    min-width: 370px;
    margin: auto 0 auto 48px;
}
header nav ul.dropmenu {
    display: table;
    float: right;
    box-sizing: border-box;
}
header h1 a{
    top: 0;
    left: 0;
}
header h1:after {
    content: "";
    width: 370px;
    height: 28px;
    display: inline-block;
    margin: auto;
    position: absolute;
    top: 27px;
    right: unset;
    left: 0;
    z-index: 2;
}
header h1:after {
    background-image: url(../img/pc/common/h1_logo.png);
    background-position: 0 center!important;
    background-size: 370px;
    transition: background-image .3s linear;
}
header.subMenuOn h1:after {
    background-image: url(../img/pc/common/h1_logo02.png);
    background-position: 0 center!important;
    background-size: 370px;
}
header .header-wrap nav {
    width: auto!important;
}
header nav ul.dropmenu {
    width: 601px;
    height: 100%;
    display: table;
    box-sizing: border-box;
}
header nav ul li {
    padding: 0 20px;
}
header .header-wrap .site-info{
    width: 320px;
}
header .header-wrap .site-info .phone{
    width: 240px;
    height: 80px;
    padding: 28px 0;
    box-sizing: border-box;
}
header .phone p{
    width: 187px;
}
header .phone p a{
    width: 162px;
    height: 19px;
}
.search-group-inner{
    width: 320px;
}
.pure-menu-active button#spSearchBtn {
    width: 80px;
    transition: all 0.2s;
    transform: translate(-240px);
    opacity: 0;
    z-index: 110; 
}
.search-group-inner.pure-menu-children {
    transition: all 0.2s;
    transform: translate(312px);
    opacity: 0;
    z-index: -1;
}
.search-group form input[type=text]{
    width: 148px;
    height: 32px;
    margin-right: 8px;
}
.search-group form>input[type="button"]{
    width: 72px;
}

}/* --------------------------------------------- 1440px~ end */



@media screen and (min-width:1248px) and (max-width:1439px) {
header .header-wrap{
    max-width: 1439px;
    height: 80px;
}
header .header-wrap .logo{
    max-width: 384px;
    width: 30.80923076923077%;
}
header h1 {
    width: 320px;
}
header h1:after{
    width: 320px;
    height: 28px;
}
header h1:after{
    top:0;
    bottom:0;
    background-image: url(../img/pc/common/h1_logo_lg.png);
    background-position: center center!important;
    background-size: 320px;
}
header nav ul{
    padding:0 0 0 2.821869488536155%;
}
header nav ul li {
    padding:0 16px 0 15px;
}
header .header-wrap .site-info{
    width: 297px;
}
header .header-wrap .site-info .phone{
    width: 217px;
    height: 80px;
    padding: 28px 0;
    box-sizing: border-box;
}
header .phone p{
    width: 173px;
}
header .phone p a{
    width: 149px;
    height: 19px;
}
header .header-wrap .site-info .search-group{
    width: 80px;
    height: 100%;
    background: #bdbdbd;
    display: inline-block;
}
.search-group-inner{
    width: 297px;
}
.pure-menu-active button#spSearchBtn {
    width: 80px;
    transition: all 0.2s;
    transform: translate(-240px);
    opacity: 0;
    z-index: 110; 
}
.pure-menu-active>.search-group-inner.pure-menu-children {
    right:0;
    display: block;
    transform: translate(0);
    opacity: 1;
    z-index: 100; 
}
.search-group-inner.pure-menu-children {
    transition: all 0.2s;
    transform: translate(288px);
    opacity: 0;
    z-index: -1;
}
.search-group form input[type=text]{
    width: 148px;
    height: 32px;
    margin-right: 8px;
}
.search-group form>input[type="button"],
.search-group form>button.pure-button{
    width: 52px!important;
    padding: 5px 6px 6px;
    padding: 0.4em 0;
}
}/* --------------------------------------------- 1024px~ end */



@media screen and (min-width:1024px) and (max-width:1247px) {
header .header-wrap{
    max-width: 1439px;
    height: 80px;
}
header .header-wrap .logo{
    max-width: 192px;
    width: 18.75%;
}
header h1{
    width: 138px;
}
header h1:after{
    width: 138px;
    height: 45px;
}
header h1:after{
    top:0;
    bottom: 0;
    background-image: url(../img/pc/common/h1_logo_md.png);
    background-position: center center!important;
    background-size: 138px;
}
header nav ul{
    padding:0 3.4358047016274864%;
}
header nav ul li {
    padding:0 13px 0 12px;/*2.3508137432188065%*/
}
header .header-wrap .site-info{
    width: 279px;
}
header .header-wrap .site-info .phone{
    width: 200px;
    height: 80px;
    padding: 28px 0;
    box-sizing: border-box;
}
header .phone p{
    width: 153px;
}
header .phone p a{
    width: 129px;
    height: 16px;
}
header .header-wrap .site-info .search-group{
    width: 80px;
    height: 100%;
    background: #bdbdbd;
    display: inline-block;
}
.search-group-inner{
    width: 279px;
}
.pure-menu-active button#spSearchBtn {
    width: 80px;
    transition: all 0.2s;
    transform: translate(-240px);
    opacity: 0;
    z-index: 110; 
}
.pure-menu-active>.search-group-inner.pure-menu-children {
    right:0;
    display: block;
    transform: translate(0);
    opacity: 1;
    z-index: 100; 
}
.search-group-inner.pure-menu-children {
    transition: all 0.2s;
    transform: translate(288px);
    opacity: 0;
    z-index: -1;
}
.search-group form input[type=text]{
    width: 128px;
    height: 32px;
    margin-right: 8px;
}
.search-group form>input[type="button"],
.search-group form>button.pure-button{
    width: 52px!important;
    padding: 0.4em 6px!important;
}
}/* --------------------------------------------- 1024px~ end */



@media screen and (min-width:751px) and (max-width:1023px) {
header .header-wrap{
    max-width: 1023px;
    height: 80px;
}
header .header-wrap .logo{
    max-width: 80px;
    width: 7.8125%;
}
header h1{
    width: 80px;
}
header h1:after{
    width: 80px;
    height: 28px;
}
header h1:after {
    background-image: url(../img/pc/common/h1_logo_xs.png);
    background-position: center center!important;
    background-size: 28px;
}
header nav ul{
    padding:0 4.391891891891892% 0 2.7027027027027026%;
}
header nav ul li {
    padding:0 16px;
}
header .header-wrap .site-info{
    width: 80px;
}
header .header-wrap .site-info .phone{
    display: none;
}
header .header-wrap .site-info .search-group{
    width: 80px;
    height: 100%;
    background: #bdbdbd;
    display: inline-block;
}
.search-group-inner{
    width: 288px;
}
.pure-menu-active button#spSearchBtn {
    width: 80px;
    transition: all 0.2s;
    transform: translate(-240px);
    opacity: 0;
    z-index: 110; 
}
.pure-menu-active>.search-group-inner.pure-menu-children {
    right:0;
    display: block;
    transform: translate(0);
    opacity: 1;
    z-index: 100; 
}
.search-group-inner.pure-menu-children {
    transition: all 0.2s;
    transform: translate(288px);
    opacity: 0;
    z-index: -1;
}
.search-group form input[type=text]{
    width: 128px;
    height: 32px;
    margin-right: 8px;
}
.search-group form>input[type="button"],
.search-group form>button.pure-button{
    width: 52px!important;
    padding: 0.4em 6px!important;
}
}/* --------------------------------------------- 1024px~ end */


@media screen and (min-width:751px) and (max-width:840px) {
header nav ul li {
    padding:0 15px!important;
}
}/* --------------------------------------------- 1024px~ end */


@media screen and (max-width: 750px) {
html {
}
.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}

header {
z-index: 10000;
zoom:1;
position:fixed;
top:0px;
background: #696969;
}

header{
width: 100%;
height: 64px;
box-sizing: border-box;
display:block;
}

.subMenu,
.subMenu.subMenuOn,
.subMenu.subMenuOff{
display: none;
}

header .header-wrap{
width: 100%;
display: block;
} 

header .header-wrap nav{
background: transparent;
}

header .header-wrap .logo{
min-width: 100px;
height: 64px;
padding-left:16px;
float: left;
display: inline-block;
}
header h1, .subMenu h1 {
    width: 100px;
    height: 100%;
}
header h1 a, .subMenu h1 a {
    display: block;
    width: 100%;
    height: 100%;
    margin:auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}
header h1:after, .subMenu h1:after {
    content:"";
    display: inline-block;
    width: 100px;
    height: 33px;
    margin: auto;
    position: absolute;
    top: 16px;
    right:0;
    left: 0;
    background-image: url(../img/sp/common/h1_logo.png);
    background-position: center center!important;
    background-size: 100px;
    background-repeat: no-repeat;
}

header .header-wrap .site-info{
    width: calc(100% - 180px);
    float: left;
    background: transparent;
}
header .search-group{
    width: 64px;
    float: right;
}
header .search-group>button {
    width: 64px;
    height: 64px;
    background-color: #696969;
    background-image: url(../img/sp/common/search.svg);
    background-position: center center;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    border:none;
    outline: none;
}


header .search-group button.searchOff {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}
header .search-group.pure-menu-active button.searchOff {
    background-color: #787878;
}
.search-group-inner{
    width: 100%;
    position:fixed;
    top: 64px;
    left: 0;
    display: flex;
    display: none;
	overflow:hidden;
    box-sizing: border-box;
	*zoom: 1;
}
header .search-group.pure-menu-active .search-group-inner{
    display: block!important;
}
.search-group-inner:after{
    content:"";
    width: 100%;
    height: calc(100vh - 64px);
    position: absolute;
    top: 0;
    left: 0;
    background: #707070;
    display: block;
    z-index: 1;
}
.search-group-inner form {
    width: 100%;
    margin: auto;
    padding: calc(39vh - 67px) 16px 0;
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    z-index: 10;
}
@-moz-document url-prefix(){
.search-group-inner form {
    top: 40%;
}
}
@supports (-ms-ime-align:auto) {
.search-group-inner form {
    top: 40%;
}
}

header .search-group form i.search, .subMenu .search-group form i.search {
    width: 100%;
    height: auto;
    margin-right: 16px;
    vertical-align: middle;
    background-image:none;
    display: block;
    position: relative;
}
header .search-group form i.search:after, .subMenu .search-group form i.search:after {
    content: "キーワードを入力してください。";
    margin: auto;
    color: #FFF;
    font-style: normal;
    font-size: 16px;
    text-align: center;
    display: block;
}
.search-group-inner input[type=text] {
    width: 100%;
    margin: 24px auto;
    padding: 10px 0.6em;
    font-size: 1rem;
    box-sizing: border-box;
    display: block;
}
#header-search-btn.pure-button {
    width: 152px;
    height: 40px;
    font-family: inherit;
    font-size: 14px;
    margin: auto;
    padding: 0.4em 1em;
    color: #FFF;
    border: none;
    background-color: #5b5b5b;
    text-decoration: none;
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
}

header .phone{
    display: none;
}

header nav{
    position: fixed;
    margin: 0;
    top: 64px;
    left: 0;
    width: 100%;
    height: 100vh;
    max-height: 100%;
    display: none;
    overflow:scroll; 
    -webkit-overflow-scrolling: touch;
}
div#wrap-all {
}
.js-no-scroll{
    width: 100%;
}

/*#wrap-all.visible{
    height: 100vh;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}*/

header nav ul{
    width: 100%;
}

header nav ul li{
    display:block;
    text-align: center;
}

header nav ul li a{
    display: block;
    padding: 22px 4.25531914893617%;
}


/* dropmenu ----------------------------------*/
header nav ul.dropmenu,
.subMenu .drawer-nav ul.dropmenu {
    *zoom: 1;
    /*width: 100%;
    display: table;
    box-sizing: border-box;*/
    width: 100%;
    height: 100vh;
    min-height: 502px;
    overflow-y: scroll;
    display: block;
    box-sizing: border-box;
    background-color: rgba(111,111,111,.95);
    /*overflow-y: scroll;
    height: 93vh;
    min-height: 100vh;*/
}

header nav ul.dropmenu:before, 
.subMenu .drawer-nav ul.dropmenu:before{
  content: "";
  padding-top: 15.47%;
  display: block;
  clear: both;
}

header nav ul.dropmenu:after,
.subMenu .drawer-nav ul.dropmenu:after{
  content: "";
  padding-top: 6.67%;
  display: block;
  clear: both;
}

header nav ul.dropmenu li,
.subMenu .drawer-nav ul.dropmenu li {
    position: relative;
}

header nav ul.dropmenu li a,
.subMenu .drawer-nav ul.dropmenu li a{
    width:100%;
    font-size: 18px;
    font-weight: normal;
    line-height:1;
    color:#FFF!important;
    text-decoration: none;
    text-align:left; 
    vertical-align: middle;
    display: -ms-flexbox!important;
    display: -webkit-flex!important;
    display: flex!important;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    /*-webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;*/
    position: relative;
}


header nav ul.dropmenu li a:before{
    content: "";
    width: 10px;
    height: 20px;
    margin:auto;
    background:url(../img/common/arrow_wh.svg) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    top:0;
    right:4.25531914893617%;
    bottom:0;
    display: block;
}

header nav ul.dropmenu li.last:after,
header nav ul.dropmenu li.last:after{
    content: "";
    height: 25px;
    display: block;
}
header nav ul.dropmenu li.phone,
header nav ul.dropmenu li.phone{
    position: relative;
    /*margin:1px auto;*/
    padding: 16px 4.25531914893617%;
    display: block!important;
    /*border-top:solid 1px rgba(255,255,255,.95);
    border-bottom:solid 1px rgba(255,255,255,.95);*/
}

header nav ul.dropmenu li.phone a,
header nav ul.dropmenu li.phone a{
    width: 332px;
    height: 64px;
    margin:auto;
    padding: 0;
    font-size: 0;
    overflow: hidden;
    text-indent: -9999px;
    background-image: url(../img/sp/common/phone.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
}

header nav ul.dropmenu li.phone a:before{
    content: none;
}



/* Hamburgers ----------------------------------*/
header #spMenuOpenBtn{
    width: 64px;
    height: 64px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
}
header #spMenuOpenBtn.menuOn{
    background-color:#787878; 
}
header #spMenuOpenBtn a{
    width: 64px;
    height: 64px;
    display: block;
    background-repeat: no-repeat;
    background-position:center center;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    opacity: .5;
}
header #spMenuOpenBtn.menuOn a{
    opacity: 1;
}
header #spMenuOpenBtn .menu-trigger,
header #spMenuOpenBtn .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
}
header #spMenuOpenBtn .menu-trigger {
    position: relative;
    width: 20px;
    height: 12px;
}
header #spMenuOpenBtn .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
}
header #spMenuOpenBtn .menu-trigger span:nth-of-type(1) {
  top: 0;
}
header #spMenuOpenBtn .menu-trigger span:nth-of-type(2) {
  top: 5px;
}
header #spMenuOpenBtn .menu-trigger span:nth-of-type(3) {
  bottom: 0;
}



/*Anim*/
header #spMenuOpenBtn .menu-trigger span:nth-of-type(1) {
  -webkit-animation: menu-bar01 .25s forwards;
  animation: menu-bar01 .25s forwards;
}
header #spMenuOpenBtn .menu-trigger span:nth-of-type(2) {
  transition: all .25s .25s;
  opacity: 1;
}
header #spMenuOpenBtn .menu-trigger span:nth-of-type(3) {
  -webkit-animation: menu-bar02 .25s forwards;
  animation: menu-bar02 .25s forwards;
}

header #spMenuOpenBtn.menuOn .menu-trigger span:nth-of-type(1) {
  -webkit-animation: active-menu-bar01 .25s forwards;
  animation: active-menu-bar01 .25s forwards;
}
header #spMenuOpenBtn.menuOn .menu-trigger span:nth-of-type(2) {
  opacity: 1;
}
header #spMenuOpenBtn.menuOn .menu-trigger span:nth-of-type(3) {
  -webkit-animation: active-menu-bar03 .25s forwards;
  animation: active-menu-bar03 .25s forwards;
}

@-webkit-keyframes menu-bar01 {
  0% {
    -webkit-transform: translateY(5px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar01 {
  0% {
    transform: translateY(5px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@-webkit-keyframes menu-bar02 {
  0% {
    -webkit-transform: translateY(-5px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar02 {
  0% {
    transform: translateY(-5px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
@-webkit-keyframes active-menu-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  100% {
    -webkit-transform: translateY(5px) rotate(0);
  }
}
@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(5px) rotate(0);
  }
}
@-webkit-keyframes active-menu-bar03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  100% {
    -webkit-transform: translateY(-5px) rotate(0);
  }
}
@keyframes active-menu-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(-5px) rotate(0);
  }
}


}/* ---------------------------- sp end */



@media all and (max-width:750px) and (-ms-high-contrast:none){
  *::-ms-backdrop, .search-group-inner form {
    top: 40%;
}
}/* --------------------------------------------- IE11 end */


@media screen and (max-width:320px) {
header nav ul.dropmenu:before, 
.subMenu .drawer-nav ul.dropmenu:before{
  padding-top: 8.845577211394302%;
}
header nav ul li a {
    display: block;
    padding: 5.866666666666666% 4.25531914893617%;
}
header nav ul.dropmenu:after,
.subMenu .drawer-nav ul.dropmenu:after{
  padding-top: 3.7481259370314843%;
}
header nav ul.dropmenu li.phone, header nav ul.dropmenu li.phone {
    padding: 4.266666666666667% 0;
}
header nav ul.dropmenu li.phone a, header nav ul.dropmenu li.phone a {
    width: 88.53333333333333%;
}
header nav ul.dropmenu li a, .subMenu .drawer-nav ul.dropmenu li a {
    font-size: 16px;
}
}/* --------------------------------------------- IE11 end */

/* -------------------------------------------------------------------
pagetopCont
------------------------------------------------------------------- */

@media screen and (min-width:751px) {
    #footerArea {
        padding-top: 64px;
    }
    #pagetopCont {
        width: 82px;
        margin: 0 auto 0;
        position: fixed;
        bottom: 64px;
        right:0;
        opacity: 0;
        transition: .5s;
        transform: translateY(32px);
        -webkit-transform: translateY(32px);
        z-index: 1;
    }
    #pagetopCont.aniOn {
        opacity: 1;
        transition: .5s;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }
    #pagetopCont.static {
        position: fixed;
        bottom:121px;
        opacity: 1;
    }
    a#pagetop {
        width: 82px;
        height: 82px;
        margin-right: 16px;
        text-align: center;
        cursor: pointer;
        background-color: rgba(255,255,255,0.7);
        background-image:  url(../img/common/pagetop.png) ;
        background-repeat: no-repeat;
        background-position: center center;
        display: block;
        overflow: hidden;
        text-indent: 100%;
        white-space: nowrap;
        float: right;
        z-index: 110;
    }
    a#pagetop:hover {
        display: block;
        opacity: .8;
    }
    #pagetopCont.aniOn a#pagetop {
    background-color: rgba(255,255,255,0.7);
    }
    a#pagetop02 {
        display: none;
     } 

}

/* ---------------------------- PC end */


@media screen and (max-width: 750px) {
a#pagetop02:hover {
    opacity: .25;
}

#footerArea {
    position: relative;
    display: block;
    z-index: 21;
}

#pagetopCont {
    width: 41px;
    margin: 0 auto 0;
    position: fixed;
    bottom: 64px;
    right:0;
    z-index: 200;
    opacity: 0;
    transition: 1s;
    transform: translateY(32px);
    -webkit-transform: translateY(32px);
}
#pagetopCont.static {
    position: fixed;
    bottom: 152px;
    opacity: 1;
}
a#pagetop {
    width: 41px;
    height: 41px;
    margin-right: 16px;
    line-height: 41px;
    text-align: center;
    background: url(../img/common/pagetop02.svg) no-repeat center center #FFF;
    background-size: 41px;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    display: block;
    cursor: pointer;
    float: right;
}
#pagetopCont.aniOn {
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}
#pagetopCont.aniOn a#pagetop {
    background-color: rgba(255,255,255,0.7);
}
a#pagetop:hover {
    opacity: .75;
}
/*a#pagetop02 {
    width: 32px;
    height: 32px;
    text-align: center;
    background: url(../img/common/pagetop.png) no-repeat center center #FFF;
    background-size: 10px 10px;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    display: block;
    cursor: pointer;
    position: fixed;
    right: 0;
    bottom: 64px;
    margin: auto;
    opacity: .5;
    z-index: 2000;
    opacity: 0;
    transition: .5s;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

a#pagetop02.aniOn {
    opacity: 0.5;
}

a#pagetop02:hover {
    opacity: 0.25;
}

a#pagetop02.static {
    position: fixed;
    right: 0;
    bottom: 64px;
    opacity: 0;
    z-index: 2000;
}*/
}

/* ---------------------------- SP end */



/* -------------------------------------------------------------------
Footer
------------------------------------------------------------------- */

.footer-container{
    width: 100%;
    margin:auto;
}
.footer-container *{
    box-sizing: border-box;
}
.footer-container ul.social-media-icons {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
ul.social-media-icons li a:hover i.icon-facebook {
    color: #aaa;
}

@media screen and (min-width:751px) {
.booking-info-container {
    max-width: 1440px;
    width: 100%;
    margin:0 auto 80px;
}
.booking-info-container .container-fluid ul li .title{
    margin:0px auto 52px;
}
.booking-info-container ul{
}
.booking-info-container ul li{
    text-align: center;
    border:solid 1px #eeeeee;
}
.booking-info-container ul li.pure-u-sm-12-24{
    width: calc(50% - 35px);
    height: 270px;
    margin: 0 16px;
    padding:54px 32px 0;
}
.booking-info-container ul li.pure-u-1{
    width: calc(100% - 35px);
    height: 90px;
    margin: 32px 16px 0;
    padding: 0 16px;
}
.booking-info-container ul li a.button-lg {
    width: 100%!important;
    max-width: 432px;
    height: 68px;
    padding: 17px 0;
    line-height: 1.6;
}
.booking-info-container ul li .title{
    width: 247px;
    height: 28px;
}
.booking-info-container ul li .title h3{
    width: 247px;
    height: 28px;
    overflow: hidden;
    text-indent: 100%;
}
.booking-info-container ul li .title.contact{
    width: 164px;
    height: 28px;
}
.booking-info-container ul li .title.contact h3{
    width: 164px;
    height: 28px;
    background: url(../img/pc/top/contact.svg) no-repeat center center;
    background-size: 164px 28px;
}
.booking-info-container ul li .title.reserve{
    width: 225px;
    height: 28px;
}
.booking-info-container ul li .title.reserve h3{
    width: 225px;
    height: 28px;
    background: url(../img/pc/top/reservation.svg) no-repeat center center;
    background-size: 225px 28px;
}
.booking-info-container ul li .phone{
    width: 100%;
    max-width: 783px;
    height: 42px;
    margin:24px auto 0;
    font-size: 0;
    overflow: hidden;
    text-indent: 100%;
    background: url(../img/pc/common/contact_txt.svg?20180328) no-repeat center center;
    background-size: contain;
    display: inline-block;
}
.booking-info-container ul li div.txt{
    max-width: 432px;
    margin:28px auto 0;
    text-align: left;
    color:#666;
    text-indent: -1em;
    padding-left:1em;
}

.footer-link{
    max-width: 960px;
    width: 100%;
    margin:0 auto 80px; 
}
.footer-link ul{
    white-space: nowrap;
}
.footer-link ul li{
    width: calc(33.333333% - 32px);
    margin:0 16px;
    position: relative;
    border-bottom:solid 1px #a8a9ad;
}
.footer-link ul li a{
    width: 100%;
    height: 100%;
    padding: 0 0 16px 64px;
    font-size: 1rem;
    display: block;
}
.footer-link ul li a:before{
    content: "";
    width: 11px;
    height: 21px;
    margin:auto;
    background:url(../img/common/arrow.svg) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    top:0;
    left:10px;
    display: block;
}

.footer-menu{
    max-width: 1344px;
    width: 100%;
    margin:0 auto; 
}
.footer-menu .container-fluid{
    width: 100%;
    display: table;
}
.footer-menu .container-fluid>ul{
    padding:0 32px;
    display: table-cell;
}
.footer-menu .container-fluid>ul.footer-menu-lg {
    width: 46.726190476190474%;
}
.footer-menu .container-fluid>ul>li>a{
    width: 100%;
    margin:0 0 16px;
    padding: 0 0 16px;
    font-size: 1rem;
    border-bottom: solid 1px #cacbcd;
    display: block;
    position: relative;
}
.footer-menu .container-fluid>ul:first-child,
.footer-menu .container-fluid>ul:last-child{
    width: 17.578125%;
}
.footer-menu .container-fluid ul.footer-menu-lg li.secondLayer{
    width: 33.333333%;
    display: block;
    vertical-align: top;
    float: left;
}
.footer-menu .container-fluid ul.footer-menu-fee ul.child-link.have-child-link>li>a,
.footer-menu .container-fluid ul.footer-menu-lg li.secondLayer>a{
    padding-bottom:11px;
}
.footer-menu .container-fluid ul.footer-menu-lg li.thirdlayer>ul.child-link{
    width: 100%;
    padding-top:11px;
    display: none;
}
.footer-menu .container-fluid ul>li>ul li{
    padding:11px 0;
    line-height: 1.2;
    position: relative;
}
.footer-menu .container-fluid ul.child-link.have-child-link>li>a{
    padding-left:0;
}
/*.footer-menu .container-fluid ul.child-link.have-child-link>li>a:before{
    content: none!important;
    background: none;
}*/
.footer-menu .container-fluid ul.child-link li a.undefined{
    pointer-events: none;
    color:#787878;
}
.footer-menu .container-fluid ul.child-link li a,
.footer-menu .container-fluid ul.footer-menu-lg li.thirdlayer>a{
    padding-left:16px;
    display: block;
}
.footer-menu .container-fluid .have-child-link ul.child-link a:before{
    content: "";
    width: 5px;
    height: 9px;
    margin:0 auto;
    background:url(../img/common/arrow.svg) no-repeat 0 0;
    background-size: 5px 9px;
    position: absolute;
    top: 14px;
    left:0;
    display: block;
}
.footer-menu .container-fluid ul.footer-menu-fee ul.child-link.have-child-link>li>a:before,
.footer-menu .container-fluid ul.footer-menu-lg li.secondLayer>a:before{
    content: none!important;
    background: none;
}
.footer-menu .container-fluid ul.footer-menu-lg li.thirdlayer>a:before{
    content: "";
    width: 9px;
    height: 9px;
    margin:0 auto;
    background:url(../img/common/plus.png) no-repeat 0 0;
    position: absolute;
    top: 14px;
    left:0;
    display: block;
}
.footer-menu .container-fluid ul.footer-menu-lg li.thirdlayer>a.close:before{
    background:url(../img/common/minus.png) no-repeat 0 5px;
}
.footer-container ul.social-media-icons {
    padding: 28px 0 0;
}
.footer-container .social-media-icons li {
    margin: 0 24px;
}
.social-media-icons a {
    text-decoration: none;
    opacity: 1;
}
ul.social-media-icons li a i.icon-instagram,
ul.social-media-icons li a i.icon-facebook {
    color: #bcbdc0;
}
.icon-instagram:before {
    content: "\f16d";
    font-size: 28px;
}
.icon-facebook:before {
    content: "\f09a";
    font-size: 28px;
}
ul.social-media-icons li a i.icon-amebablog {
    width: 46px;
    height: 33px;
    margin:auto;
    background:url(../img/common/i_amebablog.png) no-repeat 0 0;
    display: block; 
}


footer {
    margin:32px auto 0;
    padding:32px 0;
    position: relative;
    background: #bcbdc0;
}

footer .logo{
    width: 105px;
    height: 21px;
    margin:auto;
    overflow: hidden;
    text-indent: 100%;
    background:url(../img/common/footer_logo.png) no-repeat 0 0;
    display: block; 
}

footer .copyright{
    width: 100%;
    margin: auto;
    padding:20px 0 0;
    font-size: 11px;
    color:#FFF;
    text-align: center;
}
}/* --------------------------------------------- PC end */



@media all and (min-width:751px) and (-ms-high-contrast:none){
  *::-ms-backdrop, .booking-info-container ul li a.button-lg {
    line-height: 1.6;
}
}/* --------------------------------------------- IE11 end */



@media screen and (max-width: 750px) {
.booking-info-container {
    width: 100%;
    margin:0 auto 64px;
}
.booking-info-container ul{
    width: 100%;
    padding: 0 4.25531914893617%;
}
.booking-info-container ul li{
    width: 100%;
    margin: 0 auto 16px;
    padding:32px 4.25531914893617%;
    text-align: center;
    white-space: normal;
    border:solid 1px #eeeeee;
}
.booking-info-container ul li.pure-u-1{
    width: 100%;
    margin: 0 auto 16px;
    padding:0;
    text-align: center;
    white-space: normal;
    border:solid 1px #eeeeee;
}
.booking-info-container ul li a.button-lg {
    width: 100%;
    margin: auto;
}
.booking-info-container ul li .title{
    margin:0 auto 32px;
}
.booking-info-container ul li .title h3{
    overflow: hidden;
    text-indent: 100%;
}
.booking-info-container ul li .title.contact{
    width: 112px;
    height: 18px;
}
.booking-info-container ul li .title.contact h3{
    width: 112px;
    height: 18px;
    background: url(../img/pc/top/contact.svg) no-repeat center center;
    background-size: contain;
}
.booking-info-container ul li .title.reserve{
    width: 140px;
    height: 18px;
}
.booking-info-container ul li .title.reserve h3{
    width: 140px;
    height: 18px;
    background: url(../img/pc/top/reservation.svg) no-repeat center center;
    background-size: contain;
}
.booking-info-container ul li .phone{
    width: 100%;
    height: 100%;
    padding: 158px 4.25531914893617% 0;
    margin: auto;
    font-size: 0;
    overflow: hidden;
    text-indent: 100%;
    background: url(../img/sp/common/contact_txt.svg?20180328) no-repeat center center;
    background-size: 209px 91px;
    display: block;
    cursor: pointer;
}
.booking-info-container ul li div.txt{
    margin:24px auto 0;
    text-align: left;
    font-size: 10px;
    color:#666;
    text-indent: -1em;
    padding-left:1em;
}

.footer-link{
    width: 100%;
    margin:0 auto 40px;
}
.footer-link ul{
    width: 100%;
    padding: 0 4.25531914893617%;
}
.footer-link ul li{
    width: 100%;
    margin:24px auto;
    position: relative;
    border-bottom:solid 1px #a8a9ad;
}
.footer-link ul li:first-child{
    margin:0 auto 24px auto;
}
.footer-link ul li:last-child{
    margin:0 auto;
}
.footer-link ul li a{
    width: 100%;
    height: 100%;
    padding: 0 0 16px 50px;
    font-size: 12px;
    display: block;
}
.footer-link ul li a:before{
    content: "";
    width: 10px;
    height: 20px;
    margin:auto;
    background:url(../img/common/arrow.svg) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    top:0;
    left:12px;
    display: block;
}

.footer-menu {
    width: 100%;
    margin: 0 auto;
    background: #f7f7f7;
}
.footer-menu .container-fluid{
    width: 100%;
    display: block;
}
.footer-menu .container-fluid>ul>li>a{
    padding: 18px 4.25531914893617%;
    font-size: 14px;
    line-height: 1;
    display: block;
    position: relative;
    background: #f0f0f0;
    border-bottom:solid #e6e6e6 1px;
}
.footer-menu .container-fluid>ul>li>a.close{
    background: #f7f7f7;
}
.footer-menu .container-fluid>ul>li>a:after{
    content: "";
    width: 20px;
    height: 21px;
    margin:auto;
    background:url(../img/common/plus.svg) no-repeat 0 center;
    background-size: 19px 19px;
    position: absolute;
    top:0;
    right:4.25531914893617%;
    bottom: 0;
    display: block;
}
.footer-menu .container-fluid>ul.footer-menu-home>li>a:after,
.footer-menu .container-fluid>ul.footer-menu-inquiries>li>a:after,
.footer-menu .container-fluid>ul.footer-menu-access>li>a:after{
    background:url(../img/common/arrow02.svg) no-repeat 5px center;
    background-size: 11px 21px;
}
.footer-menu .container-fluid>ul>li>a.close:after{
    background:url(../img/common/minus.svg) no-repeat 0 center;
    background-size: 19px 19px;
}
li.parent-link.have-child-link.firstLayer ul.child-link{
    display: none;
    background: #fcfcfc;
}
.parent-link.have-child-link>ul.child-link.have-child-link{
    display: none;
}
.thirdlayer>ul.child-link{
    display: none;
    border-bottom:solid #e6e6e6 1px;
}

.footer-menu .container-fluid ul>li>ul>li>a{
    padding: 16px 4.25531914893617%;
    font-size: 12px;
    display: block;
    position: relative;
}
.footer-menu .container-fluid ul>li>ul>li>a:before{
    content: "";
    width: 11px;
    height: 21px;
    margin:auto;
    background:url(../img/common/arrow_lg.png) no-repeat center center;
    background-size: 11px 21px;
    position: absolute;
    top:0;
    right:4.25531914893617%;
    bottom: 0;
    display: block;
}
li.secondLayer>a:before{
    content: none!important;
}
ul.child-link.have-child-link{
}
ul.child-link.have-child-link>li{
    position: relative;
}
ul.child-link.have-child-link>li.secondLayer>a {
    color: #FFF;
 -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}
ul.child-link.have-child-link>li.secondLayer>a {
    width: 32px;
    height: 100%;
    color: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    line-height: 32px;
    text-align: center;
    display: block;
}
ul.child-link.have-child-link>li.secondLayer:nth-child(odd)>a {
    background: #b2b2b2;
}
ul.child-link.have-child-link>li.secondLayer:nth-child(even)>a {
    background: #8e8e8e;
}
.footer-menu .container-fluid ul.footer-menu-lg>li>ul>li>ul{
    margin-left: 32px;
}
ul.child-link.have-child-link>li.thirdlayer>a {
    display: block;
    position: relative;
    border-bottom:solid #e6e6e6 1px;
}
ul.child-link.have-child-link>li.thirdlayer>a.close {
    color: #FFF;
    background: #b2b2b2;
}
ul.child-link.have-child-link>li.thirdlayer>a:before{
    content: "";
    width: 20px;
    height: 20px;
    margin:auto;
    background:url(../img/common/plus.svg) no-repeat 0 center;
    background-size: 19px 19px;
    position: absolute;
    top:0;
    right:4.25531914893617%;
    bottom: 0;
    display: block;
}
ul.child-link.have-child-link>li.thirdlayer>a.close:before{
    background:url(../img/common/minus_wh.svg) no-repeat 0 center;
    background-size: 19px 19px;
}
.footer-menu .container-fluid li a.undefined{
    pointer-events: none;
    color:#787878;
}
ul.child-link.have-child-link li.fourthlayer a {
    padding-left:32px;
}
ul.child-link.have-child-link>li.fourthlayer a:before{
    content: "";
    width: 5px;
    height: 9px;
    margin:auto;
    background:url(../img/common/arrow.svg) no-repeat 0 0;
    background-size: 5px 9px;
    position: absolute;
    top:0;
    right:4.25531914893617%;
    bottom: 0;
    display: block;
}



.footer-container ul.social-media-icons {
    padding: 32px 0;
    background:#efeff0; 
}
.footer-container .social-media-icons li {
    margin: 0 18px;
}
.social-media-icons a {
    text-decoration: none;
    opacity: 1;
}
ul.social-media-icons li a i.icon-instagram,
ul.social-media-icons li a i.icon-facebook {
    color: #bcbdc0;
}
.icon-instagram:before {
    content: "\f16d";
    font-size: 28px;
}
.icon-facebook:before {
    content: "\f09a";
    font-size: 28px;
}
ul.social-media-icons li a i.icon-amebablog {
    width: 46px;
    height: 33px;
    margin:auto;
    background:url(../img/common/i_amebablog.svg) no-repeat 0 0;
    background-size: 46px 33px;
    display: block; 
}



footer {
    margin:0 auto;
    padding:32px 0;
    position: relative;
    background: #bcbdc0;
}

footer .logo{
    width: 105px;
    height: 21px;
    margin:auto;
    overflow: hidden;
    text-indent: 100%;
    background:url(../img/common/footer_logo.svg) no-repeat 0 0;
    background-size: contain;
    display: block; 
}

footer .copyright{
    width: 100%;
    margin: auto;
    padding:20px 0 0;
    font-size: 11px;
    color:#FFF;
    text-align: center;
}



}/* ---------------------------- sp end */





/* -------------------------------------------------------------------
contents-wrap
------------------------------------------------------------------- */
.container-fluid .title{
    text-align: center;
}

@media screen and (min-width:751px) {
.container-fluid .title{
    margin:0 auto 48px;
}
.container-fluid .title h3{
    font-size: 28px;
}
}/* ---------------------------- pc end */

@media screen and (max-width: 750px) { 
.container-fluid .title{
    margin:0 auto 40px;
}
.container-fluid .title h3{
    font-size: 18px;
    line-height: 1.8;
}
}/* ---------------------------- sp end */




/* -------------------------------------------------------------------
contents-wrap
------------------------------------------------------------------- */
@media screen and (min-width: 751px) { 
main article>.contents-wrap{
    margin:80px auto 0;
}

}/* ---------------------------- pc end */

@media screen and (max-width:750px) {
main article>.contents-wrap{
    margin:40px auto 0;
}

}/* ---------------------------- sp end */




/* -------------------------------------------------------------------
container-fluid
------------------------------------------------------------------- */
@media screen and (min-width: 751px) { 
main article .container-fluid{
    margin:0 auto 96px;
}
}/* ---------------------------- pc end */

@media screen and (max-width:750px) {
main article .container-fluid{
    margin:0 auto 62px;
}
}/* ---------------------------- sp end */



/* -------------------------------------------------------------------
Button
------------------------------------------------------------------- */

a.pure-button {
  position: relative;
  overflow: hidden;
  -webkit-transition: .3s;
  transition: .3s;
}
a.pure-button:after {
  content: '';
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
a.pure-button:hover {
  cursor: pointer;
}
a.pure-button:hover:after {
  width: 100%;
  left: 0;
}
a.pure-button:hover {
  border: solid 1px #CCC;
  -webkit-box-shadow: inset 0px 0px 0px 4px #CCC;
          box-shadow: inset 0px 0px 0px 4px #CCC;
}
a.pure-button:hover:after {
  width: 0%;
}

@-moz-document url-prefix() {
a.pure-button {
  border: solid 1px #CCC;
  -webkit-box-shadow: inset 0px 0px 0px 4px rgba(255,255,255,0);
          box-shadow: inset 0px 0px 0px 4px rgba(255,255,255,0);
}
}

/* -------------------------------------------------------------------
A
------------------------------------------------------------------- */
@media screen and (min-width: 751px) { 
a.line {
    display: inline-block;
    text-decoration: none;
}

a.line::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #555;
    transition: width .3s;
}

a.line:hover::after {
    width: 100%;
}
}/* ---------------------------- pc end */



span.search-highlight {
    background: yellow;
}


/* -------------------------------------------------------------------
Animation
------------------------------------------------------------------- */
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes leftIn {
    0% {opacity: 0;left:-50vw;}
    100% {opacity: 1;left:0vw;}
}

@-webkit-keyframes leftIn {
    0% {opacity: 0;left:-50vw;}
    100% {opacity: 1;left:0vw;}
}

.inview{
    opacity: 0;
}

.fade-in{
    animation: fadeIn 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s 1 forwards;
    -webkit-animation: fadeIn 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s 1 forwards;
}

@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}


.fade-out{
    animation: fadeOut 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s 1 forwards;
    -webkit-animation: fadeOut 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) 0s 1 forwards;
}