@charset "utf-8";

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body {
  color: #000;
  font-family: Roboto, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
  letter-spacing: .04em;
  word-wrap : break-word;
  overflow-wrap : break-word;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
       -o-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}
.modePC.modeSP {
  opacity: 0;
    display: none;
}
.modePC {
  font-size: 12px;
  line-height: 23px;
  padding-top: 60px;
}
.modeSP {
  font-size: 22px;
  line-height: 36px;
  padding-top: 110px;
}
.closePage {
  opacity: 0;
  -webkit-transition: opacity .4s;
          transition: opacity .4s;
}
.androidUA * {
  max-height: 999999px;
}

:hover{} /* Fixes for IE10 */

a {
  color: #000;
  text-decoration: none;
  -webkit-transition: opacity .3s;
          transition: opacity .3s;
}
.modePC a:hover {
  opacity: .6;
}

em {
  font-weight: bold;
}

img,
svg {
  vertical-align: top;
}

svg {
  color: #000;
}

.svgs {
  display: none;
}

/* CMS
==========================================*/
.modePC.cke_editable{ padding: 10px !important;}
.modePC.cke_editable strong{font-weight: bold !important;}
.modePC.cke_editable i{font-style: italic !important;}
.modePC.cke_editable em{font-style: italic !important;font-weight: normal;}

/* structure
==========================================*/
.wrapper {
  overflow: hidden;
  background-color: #fff;
}
.modePC .wrapper {
  min-width: 1200px;
  padding-bottom: 160px;
  position: relative;
}
.modeSP .wrapper {
  width: 750px;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 135px;
}

.wrapper .box,
.wrapper .wide {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.modePC .box {
  width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.modePC .wide {
  min-width: 1200px;
}

.overray {
  background-color: rgba(0,0,0,.3);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  opacity: 0;
  -webkit-transition: opacity .3s;
          transition: opacity .3s;
  display: none;
}
.menuOpen .overray {
  opacity: 1;
  display: block;
  z-index: 8;
}
.modeSP.menuOpen .overray {
  background-color: #000;
  bottom: -300px;
}

/* common
==========================================*/
.modeSP h2,
.modeSP p,
.modeSP li {
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=);
}

.modePC .hiddenPC,
.modeSP .hiddenSP {
  display: none !important;
}

/* clearfix */
.clear:after {
  content: "";
  display: block;
  clear: both;
}

/* viewMore */
.viewMore {
  display: inline-block;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

.modePC .viewMore100 { width: 100px; height: 100px; }
.modeSP .viewMore100 { width: 120px; height: 120px; }
.modePC .viewMore140 { width: 140px; height: 140px; }
.modeSP .viewMore140 { width: 120px; height: 120px; }

.viewMore span {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  line-height: 1;
  font-weight: bold;
  font-style: italic;
  letter-spacing: .08em;
  display: block;
  height: 1em;
  text-align: center;
}
.modePC .viewMore span { font-size: 10px; }
.modeSP .viewMore span { font-size: 18px; }
.modePC .viewMore100 span { padding-top: 37px; }
.modeSP .viewMore100 span { padding-top: 45px; }
.modePC .viewMore140 span { padding-top: 57px; }
.modeSP .viewMore140 span { padding-top: 45px; }

.viewMore svg {
  display: block;
  width: 17px;
  height: 10px;
  margin: 8px auto 0;
}

/* cutOutWrap */
.cutOutWrap {
  position: relative;
}

.cutOutWrap .tagbox {
  background-color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.viewMoreWrap {
  display: inline-block;
  position: relative;
  overflow: visible;
}

.viewMoreWrap .viewMore {
  position: absolute;
}
.modePC .viewMoreWrapRB .viewMore140 { bottom: -70px; right: -70px; }
.modePC .viewMoreWrapLB .viewMore140 { bottom: -70px; left: -70px; }
.modeSP .viewMoreWrapRB .viewMore140 { bottom: -60px; right: -60px; }
.modeSP .viewMoreWrapLB .viewMore140 { bottom: -60px; left: -60px; }
.modePC .viewMoreWrapRB .viewMore100 { bottom: -50px; right: -50px; }
.modePC .viewMoreWrapLB .viewMore100 { bottom: -50px; left: -50px; }
.modeSP .viewMoreWrapRB .viewMore100 { bottom: -60px; right: -60px; }
.modeSP .viewMoreWrapLB .viewMore100 { bottom: -60px; left: -60px; }

/* imgWrap */
.imgWrap {
  display: inline-block;
  overflow: hidden;
}

.modePC .imgWrap img {
  -webkit-transition: -webkit-transform .6s 0s, -webkit-filter .6s 0s;
          transition:         transform .6s 0s,         filter .6s 0s;
}
.modePC .imgWrap:hover img {
  -webkit-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: grayscale(100%);
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

/*==========================================
 common btn
==========================================*/
/* ボタン基本構造 */
.btn,.btnA {
  display: block;
  text-align: center;
  margin: 0 auto;
}
.modePC .btn,.modePC .btnA{
  font-size: 15px;
  line-height: 58px;
  width: 250px;
  height: 58px;
  margin: 0 auto;
  -webkit-transition: color .3s, background-color .3s;
          transition: color .3s, background-color .3s;
}
.modeSP .btn,.modeSP .btnA{
  font-size: 30px;
  line-height: 116px;
  width: 500px;
  height: 116px;
}
.btn svg,.btnA svg {
  vertical-align: middle;
}
.modePC .btn svg,.modePC .btnA svg{
  width: 17px;
  height: 58px;
  margin-left: 10px;
}
.modeSP .btn svg,.modeSP .btnA svg{
  width: 33px;
  height: 19px;
  margin-left: 20px;
}
.modePC .btn:hover , .modePC .btn:hover svg,
.modePC .btnA:hover , .modePC .btnA:hover svg { opacity: 1; }

/* 基本構造 btnA　背景白（PC白→黒） */
.btnA { background: #fff; color: #000; }
.modePC .btnA { border: 1px solid #000; }
.modeSP .btnA { border: 2px solid #000; }
.btnA svg { color: #000; fill: #000; }
.modePC .btnA:hover { color: #fff; background-color: #000; }
.modePC .btnA:hover svg { color: #fff; fill: #fff; }
.modePC .btnA.notchange:hover { color: #000; background-color: #fff;font-weight:normal; }
.modePC .btnA.notchange:hover svg { color: #000; fill: #000; }

/* 基本構造 btn　背景白（PC白→黒） */
.btn { background: #fff; color: #000; }
.modePC .btn { border: 1px solid #000; }
.modeSP .btn { border: 2px solid #000; }
.btn svg { color: #000; fill: #000; }
.modePC .btn:hover { color: #fff; background-color: #000; }
.modePC .btn:hover svg { color: #fff; fill: #fff; }
.modePC .btn.notchange:hover { color: #000; background-color: #fff;font-weight:normal; }
.modePC .btn.notchange:hover svg { color: #000; fill: #000; }


/* btn_white = 旧btnAと同じ（PC白→黒） */
.btn_white { background: #fff;color: #000; }
.modePC .btn_white { border: 1px solid #000; }
.modeSP .btn_white { border: 2px solid #000; }
.btn_white svg { color: #000; fill: #000; }
.modePC .btn_white:hover { color: #fff; background-color: #000; }
.modePC .btn_white:hover svg { color: #fff; fill: #fff; }
.modePC .btn_white:hover.notchange:hover { color: #000; background-color: #fff;font-weight:normal; }
.modePC .btn_white:hover.notchange:hover svg { color: #000; fill: #000; }


/*btn_black 黒背景（PC黒→白）*/
.btn_black { background: #000;color: #fff; }
.modePC .btn_black { border: 1px solid #000;font-weight: bold; }
.modeSP .btn_black { border: 2px solid #000; }
.btn_black svg { color: #fff; fill: #fff; }
.modePC .btn_black:hover { color: #000; background-color: #fff; }
.modePC .btn_black:hover svg { color: #000; fill: #000; }
.modePC .btn_black.notchange:hover { color: #fff; background-color: #000;font-weight:normal; }
.modePC .btn_black.notchange:hover svg { color: #fff; fill: #fff; }

/*btn_lightgrey ライトグレー*/
.btn_lightgrey { background: #ccc;color: #000; }
.modePC .btn_lightgrey { border: 1px solid #ccc; }
.modeSP .btn_lightgrey { border: 2px solid #ccc; }
.btn_lightgrey svg { color: #000; fill: #000; }
.modePC .btn_lightgrey:hover { color: #666; background-color: #ccc; }
.modePC .btn_lightgrey:hover svg { color: #666; fill: #666; }
.modePC .btn_lightgrey.notchange:hover { color: #666; background-color: #ccc; }
.modePC .btn_lightgrey.notchange:hover svg { color: #666; fill: #666; }

/*非活性*/
.btn.disabled,.btnA.disabled {
  pointer-events: none;
  opacity: .5;
}
/*
.btnB {
  background-color: #000;
  color: #fff;
  fill: #fff;
  font-weight: bold;
}
.modePC .btnB:hover {
  background-color: #fff;
  color: #000;
  font-weight: normal;
  opacity: 1;
}
.btnB svg {
  color: #fff;
}*/
/*
.btnC {
  background-color: #ccc;
  color: #666;
  font-weight: normal;
}
.modeSP .btnC {
  border: 2px solid #ccc;
}
.modePC .btnC:hover {
  background-color: #ccc;
  color: #666;
  font-weight: normal;
}
.modeSP .btnC:hover {
  background-color: #ccc;
  color: #666;
  font-weight: normal;
}
.modePC .btnC { border: 1px solid #ccc; }*/

a.normalunderline {
  text-decoration: underline;
}

a.underline {
  position: relative;
  text-decoration: none;
}
.modePC a.underline {
  display: inline-block;
}


a.underline::before {
  position: absolute;
  bottom: 3px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scale(1, 1);
  transform-origin: left top;
  transition: transform .3s;
}

.modePC a.underline::after {
  position: absolute;
  bottom: 3px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.modeSP a.underline::before {
  bottom: -2px;
}

.modePC a.underline:hover::after {
  transform: scale(1, 1);
}

/* mainVisual
==========================================*/
.mainVisualWrap {
  color: #fff;
  position: relative;
  z-index: -1;
}
.mainVisualStatic {
  z-index: 0;
}
.modePC .mainVisualWrap {
  min-width: 1120px;
  height: 1365px;
  padding: 0 40px;
}
.modeSP .mainVisualWrap {
  width: 690px;
  margin: 0 auto;
  height: 2970px;
}

.mainVisualWrap > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display:        flex;
  text-align: center;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  background: no-repeat center;
  -webkit-background-size: cover;
          background-size: cover;
  position: relative;
 }
.modePC .mainVisualWrap > div,
.modePC .mainVisualStatic { height: 455px; }
.modeSP .mainVisualWrap > div,
.modeSP .mainVisualStatic { height: 990px; }

.mainVisualWrap > div:nth-of-type(1) {
  text-align: center;
  background-color: rgba(0,0,0,.3);
}
.mainVisualStatic > div:before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.3);
  position: absolute;
  top: 0;
  left: 0;
}

.mainVisualWrap > div:nth-of-type(2) {
  background-color: rgba(0,0,0,.8);
}
.modePC .mainVisualWrap > div:nth-of-type(2) { margin-top: 455px; }
.modeSP .mainVisualWrap > div:nth-of-type(2) { margin-top: 990px; }

.mainVisualWrap > div:nth-of-type(3) {
  position: fixed;
  z-index: -1;
}
.modePC .mainVisualWrap > div:nth-of-type(3) {
  min-width: 1120px;
  height: 455px;
  top: 60px;
  left: 40px;
  right: 40px;
}
.modeSP .mainVisualWrap > div:nth-of-type(3) {
  width: 690px;
  height: 990px;
  top: 110px;
  left: 50%;
  margin-left: -345px;
}

.mainVisualWrap > div:nth-of-type(1) .barTitleC {
  opacity: .7;
}

.mainVisualWrap .barTitleC:after {
  background-color: #fff;
}

.modePC .mainVisualWrap .barTitleC48 p:nth-of-type(2) { font-size: 18px; }
.modeSP .mainVisualWrap .barTitleC48 p:nth-of-type(1) { font-size: 60px; line-height: 70px; }
.modeSP .mainVisualWrap .barTitleC48 p:nth-of-type(2) { font-size: 26px; }

.fixMainVisual {
  padding-bottom: 5000px;
}
.fixMainVisual footer,
.fixMainVisual .breadcrumb {
  display: none;
}
.modePC.fixMainVisual .wrapper {
  width: 100%;
  min-width: 1200px;
  position: fixed;
  top: 515px;
  left: 0;
}
.modeSP.fixMainVisual .wrapper {
  width: 750px;
  position: fixed;
  top: 1100px;
  left: 50%;
  margin-left: -375px;
}

.breadcrumb li:last-child a {
  cursor: default;
}
.breadcrumb li:last-child a:hover {
  opacity: 1;
}

/* barTitle
==========================================*/
.barTitleA {
  line-height: 1;
  letter-spacing: .02em;
}
.barTitleA:after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background-color: #000;
  margin-top: 15px;
}

.barTitleA p:nth-of-type(1) { font-weight: 300; }
.barTitleA24 p:nth-of-type(1) { font-size: 24px; line-height: 30px; }
.barTitleA36 p:nth-of-type(1) { font-size: 36px; line-height: 45px; }
.barTitleA48 p:nth-of-type(1) { font-size: 48px; line-height: 55px; }

.barTitleA p:nth-of-type(2) {
  line-height: 1;
}
.modePC .barTitleA p:nth-of-type(2) { font-size: 12px; margin: 27px 0 25px; }
.modeSP .barTitleA p:nth-of-type(2) { font-size: 18px; margin: 30px 0 25px; }
.modePC .barTitleA24 p:nth-of-type(2) { line-height: 16px; margin: 20px 0 13px; }
.modeSP .barTitleA24 p:nth-of-type(2) { line-height: 22px; margin: 28px 0 23px; }

.barTitleB {
  line-height: 1;
  letter-spacing: .02em;
  padding-left: 20px;
  position: relative;
}
.barTitleB:before {
  content: "";
  display: block;
  width: 10px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #000;
}

.barTitleC {
  line-height: 1;
  letter-spacing: .02em;
  text-align: center;
}
.barTitleC:after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background-color: #000;
  margin: 15px auto 0;
}

.barTitleC p:nth-of-type(1) {
  font-size: 48px;
  font-weight: 300;
  line-height: 55px;
}

.modePC .modal .barTitleC p:nth-of-type(1) {
  font-size: 36px;
}

.modePC .barTitleC48 p:nth-of-type(2) {
  font-size: 15px;
  line-height: 1;
  margin: 27px 0 25px;
}
.modeSP .barTitleC48 p:nth-of-type(2) {
  font-size: 22px;
  line-height: 26px;
  margin: 23px 0 21px;
}




.barTitleR {
  line-height: 1;
  letter-spacing: .02em;
  text-align: right;
  position: relative;
}
.barTitleR:after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  background-color: #000;
}
.modeSP .barTitleR{
  text-align-last: left;
}
.modePC .barTitleR:after{
  margin: 15px auto 0;
  position: absolute;
  right: 0;
  bottom: 0;
}


.barTitleR p:nth-of-type(1) { font-weight: 300; }
.barTitleR24 p:nth-of-type(1) { font-size: 24px; line-height: 30px; }
.barTitleR36 p:nth-of-type(1) { font-size: 36px; line-height: 45px; }
.barTitleR48 p:nth-of-type(1) { font-size: 48px; line-height: 55px; }

.barTitleR p:nth-of-type(2) {
  line-height: 1;
}
.modePC .barTitleR p:nth-of-type(2) { font-size: 12px; padding: 27px 0 25px; }
.modeSP .barTitleR p:nth-of-type(2) { font-size: 18px; padding: 30px 0 25px; }
.modePC .barTitleR24 p:nth-of-type(2) { line-height: 16px; padding: 20px 0 13px; }
.modeSP .barTitleR24 p:nth-of-type(2) { line-height: 22px; padding: 28px 0 23px; }








.barTitleD { line-height: 1; }
.modePC .barTitleD { font-size: 14px; }
.modeSP .barTitleD { font-size: 22px; }
.barTitleD:after {
  content: "";
  display: block;
  height: 2px;
  background-color: #000;
  margin-top: 15px;
}
.modePC .barTitleD:after { width: 15px; }
.modeSP .barTitleD:after { width: 20px; }
.modePC .barTitleDBack:after { margin-left: 38px; }
.modeSP .barTitleDBack:after { margin-left: 38px; }
.barTitleD svg {
  vertical-align: middle;
  width: 17px;
  height: 10px;
  margin-left: 21px;
}
.barTitleDBack svg {
  margin-left: 0;
  margin-right: 21px;
}

/* breadcrumb
==========================================*/
.modePC .breadcrumb {
  min-width: 1200px;
  background-color: #fff;
}
.modeSP .breadcrumb {
  display: none;
}

.modePC .breadcrumb ul {
  width: 960px;
  height: 10px;
  margin: 0 auto;
}

.modePC .breadcrumb li {
  font-size: 10px;
  float: left;
}
.modePC .breadcrumb li:nth-of-type(n+2) {
  margin-left: 15px;
}
.modePC .breadcrumb li:nth-of-type(n+2):before {
  content: ">";
  display: inline-block;
  margin-right: 15px;
}

/* iconDl
==========================================*/
.modePC .iconDl {
  line-height: 19px;
}
.modeSP .iconDl {
  line-height: 36px;
}

.iconDl dt {
  font-weight: bold;
}
.iconDl dt:after {
  content: ":";
  font-weight: normal;
  display: inline;
}
.modePC .iconDl dt { margin-top: 8px; }
.modeSP .iconDl dt { margin-top: 16px; }

.iconDl dt i { display: inline-block; }
.modePC .iconDl dt i { width: 30px; }
.modeSP .iconDl dt i { width: 64px; }

.iconDl dl svg { vertical-align: middle; }
.modePC .iconDl .ca svg { width: 15px; height: 17px; }
.modePC .iconDl .cl svg { width: 14px; height: 14px; }
.modePC .iconDl .wa svg { width: 15px; height: 15px; }
.modePC .iconDl .no svg { width: 13px; height: 17px; }
.modeSP .iconDl .ca svg { width: 30px; height: 33px; }
.modeSP .iconDl .cl svg { width: 33px; height: 33px; }
.modeSP .iconDl .wa svg { width: 30px; height: 30px; }
.modeSP .iconDl .no svg { width: 25px; height: 33px; }

.iconDl span { display: inline-block; }
.modePC .iconDl110 span { width: 60px; }
.modeSP .iconDl110 span { width: 125px; }
.modePC .iconDl140 span { width: 95px; }
.modeSP .iconDl140 span { width: 125px; }

.modePC .iconDl110 dd { margin: -19px 0 0 110px; }
.modeSP .iconDl110 dd { margin: -36px 0 0 210px; }
.modePC .iconDl140 dd { margin: -19px 0 0 140px; }
.modeSP .iconDl140 dd { margin: -36px 0 0 210px; }

/* dirNav
==========================================*/
.dirNav { margin: 0 auto; }
.modePC .dirNav { width: 960px; }
.modeSP .dirNav { width: 630px; }

.modePC .dirNav ul:after {
  content: "";
  display: block;
  clear: both;
}

.dirNav li {
  text-align: center;
  background: no-repeat center;
  -webkit-background-size: cover;
          background-size: cover;
  position: relative;
  overflow: hidden;
}
.modePC .dirNav li {
  float: left;
  width: 225px;
  height: 145px;
}
.modePC .dirNav li:nth-of-type(4n+1),
.modePC .dirNav li:nth-of-type(4n+2),
.modePC .dirNav li:nth-of-type(4n+3) { margin-right: 20px; }
.modePC .dirNav li:nth-of-type(n+5) { margin-top: 20px; }
.modeSP .dirNav li {
  width: 630px;
  height: 210px;
  margin-top: 20px;
}

.modePC .dirNav li:not(.current):before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.modePC .dirNav li:not(.current):before {
  background-color: rgba(0,0,0,.5);
  -webkit-transition: -webkit-transform .1s 0s;
          transition:         transform .1s 0s;
  -webkit-transform: translateY(145px);
          transform: translateY(145px);
}
.modePC .dirNav li:not(.current):hover:before {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.dirNav a {
  display: block;
  height: 100%;
  position: relative;
  background-color: rgba(0,0,0,.3);
}
.dirNav .current a {
  cursor: default;
  background-color: rgba(255,255,255,.5);
}
.dirNav a:hover {
  opacity: 1;
}

.dirNav li p {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.dirNav li .df {
  color: #fff;
  line-height: 1;
  -webkit-transition: opacity .3s 0s;
          transition: opacity .3s 0s;
}
.modePC .dirNav li .df { font-size: 14px; }
.modeSP .dirNav li .df { font-size: 28px; }
.dirNav .current .df {
  color: #000;
}
.modePC .dirNav li:not(.current):hover .df {
  opacity: 0;
}

.dirNav li .df span { display: block; }
.modePC .dirNav li .df span { font-size: 10px; margin-top: 10px; }
.modeSP .dirNav li .df span { font-size: 20px; margin-top: 20px; }

.dirNav li .vm {
  color: #fff;
  opacity: 0;
}
.modePC .dirNav li:not(.current) .vm {
  -webkit-transition: opacity .2s 0s;
          transition: opacity .2s 0s;
}
.modePC .dirNav li:not(.current):hover .vm {
  opacity: 1;
  -webkit-transition: opacity .3s .2s;
          transition: opacity .3s .2s;
}
.modePC .dirNav li .vm { font-size: 10px; }
.modeSP .dirNav li .vm { font-size: 20px; }

.dirNav li .vm span {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  line-height: 1;
  font-weight: bold;
  font-style: italic;
  letter-spacing: .08em;
  display: block;
  height: 1em;
  text-align: center;
}

.dirNav svg {
  color: #fff;
  display: block;
  width: 17px;
  height: 10px;
}
.modePC .dirNav svg { margin: 8px auto 0; }
.modeSP .dirNav svg { margin: 20px auto 0; }

/* stepNav
==========================================*/
.stepNav {
  margin: 0 auto;
  position: relative;
}
.modePC .stepNav {
  width: 500px;
  border-bottom: 3px solid #000;
}
.modeSP .stepNav {
  width: 475px;
  border-bottom: 5px solid #000;
}

.stepNav ol { position: relative; }
.modePC .stepNav ol { padding-top: 56px; }
.modeSP .stepNav ol { padding-top: 106px; }

.stepNav li {
  width: 0;
  height: 0;
  position: absolute;
}
.modePC .stepNav li { bottom: -2px; }
.modePC .stepNav li { bottom: -3px; }
.stepNav li:nth-of-type(1) { left: 0; }
.stepNav li:nth-of-type(2) { left: 50%; }
.stepNav li:nth-of-type(3) { right: 0; }

.stepNav li:before,
.stepNav .clear:after {
  content: "";
  display: block;
  border-radius: 50%;
  position: relative;
}
.stepNav li:before {
  background-color: #fff;
}
.modePC .stepNav li:before {
  width: 20px;
  height: 20px;
  border: 3px solid #000;
  top: -15px;
  left: -13px;
}
.modeSP .stepNav li:before {
  width: 40px;
  height: 40px;
  border: 5px solid #000;
  top: -26px;
  left: -26px;
}
.stepNav .clear:after {
  background-color: #000;
}
.modePC .stepNav .clear:after {
  width: 14px;
  height: 14px;
  top: -35px;
  left: -7px;
}
.modeSP .stepNav .clear:after {
  width: 30px;
  height: 30px;
  top: -66px;
  left: -16px;
}

.stepNav span {
  line-height: 1;
  font-weight: bold;
  text-align: center;
  display: block;
  width: 200px;
  margin-left: -100px;
  position: absolute;
  left: 0;
}
.modePC .stepNav span {
  font-size: 23px;
  top: -61px;
}
.modeSP .stepNav span {
  font-size: 46px;
  top: -113px;
}

/* datepicker
==========================================*/
.ui-datepicker {
  display: none;
  background-color: #fff;
  padding: 25px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.modePC .ui-datepicker { border: 1px solid #000; }
.modeSP .ui-datepicker { border: 2px solid #000; }

.ui-datepicker-header {
  text-align: center;
  position: relative;
}
.modePC .ui-datepicker-header { height: 95px; }
.modeSP .ui-datepicker-header { height: 115px; }
.modePC .notAddWidgetOpt .ui-datepicker-header { height: 50px; }
.modeSP .notAddWidgetOpt .ui-datepicker-header { height: 70px; }

.ui-datepicker .addon {
  height: 35px;
  position: relative;
  text-align: center;
}

.ui-datepicker .addon p {
  line-height: 35px;
  letter-spacing: .1em;
}
.modePC .ui-datepicker .addon p { font-size: 12px; }
.modeSP .ui-datepicker .addon p { font-size: 15px; }

.ui-datepicker .addon a {
  display: block;
  width: 30px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

.ui-datepicker .addon a svg,
.ui-datepicker .addon a span {
  line-height: 1;
  text-align: center;
  display: block;
}

.ui-datepicker .addon a svg {
  width: 18px;
  height: 18px;
  margin: 0 auto;
}

.ui-datepicker .addon a span {
  font-size: 8px;
  margin-top: 9px;
  white-space: nowrap;
}

.ui-datepicker-title {
  font-weight: bold;
  margin-top: 10px;
}
.notAddWidgetOpt .ui-datepicker-title {
  margin-top: 0;
}
.modePC .ui-datepicker-title {
  font-size: 14px;
  line-height: 50px;
  height: 50px;
}
.modeSP .ui-datepicker-title {
  font-size: 22px;
  line-height: 70px;
  height: 70px;
}

.ui-datepicker-header > a {
  display: block;
  width: 25px;
  cursor: pointer;
  position: absolute;
  bottom: 0;
}
.modePC .ui-datepicker-header > a { height: 50px; }
.modeSP .ui-datepicker-header > a { height: 70px; }
.ui-datepicker-header .ui-datepicker-next { right: 25px; }
.ui-datepicker-header .ui-datepicker-prev { left: 25px; }
.ui-datepicker-header .ui-state-disabled { display: none; }

.ui-datepicker-header > a svg { width: 25px; }
.modePC .ui-datepicker-header > a svg { height: 50px; }
.modeSP .ui-datepicker-header > a svg { height: 60px; }

.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
  text-align: center;
  vertical-align: top;
}
.modePC .ui-datepicker-calendar th,
.modePC .ui-datepicker-calendar td {
  font-size: 14px;
  line-height: 40px;
  border: 1px solid #fff;
  width: 40px;
  height: 40px;
}
.modeSP .ui-datepicker-calendar th,
.modeSP .ui-datepicker-calendar td {
  font-size: 22px;
  line-height: 60px;
  border: 2px solid #fff;
  width: 60px;
  height: 60px;
}

.ui-datepicker-calendar thead {
  font-weight: bold;
}

.ui-state-default {
  font-weight: bold;
  text-align: center;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.modePC .ui-state-default {
  width: 40px;
  height: 40px;
}
.modeSP .ui-state-default {
  width: 60px;
  height: 60px;
}

span.ui-state-default {
  color: #ccc;
}

a.ui-state-default {
  color: #fff;
  background-color: #ccc;
}

.modePC .ui-datepicker-today .ui-state-default {
  border: 1px solid #000;
}
.modeSP .ui-datepicker-today .ui-state-default {
  border: 2px solid #000;
}

.ui-datepicker-current-day .ui-state-default {
  color: #fff;
  background-color: #000;
}

/* header
==========================================*/
.modePC header {
  width: 100%;
  min-width: 1200px;
  height: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
header .bar {
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 11;
}
.modePC header .bar {
  width: 100%;
  min-width: 1200px;
  height: 60px;
  left: 0;
}
.modeSP header .bar {
  width: 750px;
  height: 110px;
  left: 50%;
  margin-left: -375px;
}

header .bar > a {
  position: absolute;
}
.modePC header .bar > a {
  width: 40px;
  height: 41px;
  top: 9px;
  left: 60px;
}
.modeSP header .bar > a {
  width: 62px;
  height: 64px;
  top: 24px;
  left: 30px;
}

.modePC header .bar > a svg { width: 40px; height: 41px; }
.modeSP header .bar > a svg { width: 62px; height: 64px; }

header .u1 { position: absolute; }
.modePC header .u1 { right: 63px; top: 13px; }
.modeSP header .u1 { right: 30px; top: 26px; }

header .u1 li { float: left; }
header .u1 .l8,
.menuOpen header .u1 .l7 { display: none; }
header .u1 .l7,
.menuOpen header .u1 .l8 { display: block; }

.modePC header .u1 .l1,
.modePC header .u1 .l2,
.modePC header .u1 .l3 { margin-right: 5px; }
.modePC header .u1 .l5 { margin-right: 48px; }
.modePC header .u1 .l7,
.modePC header .u1 .l8 { width: 30px; }
.modePC header .u1 .l10 { margin-right: 15px; }
.modePC header .u1 .l11 { margin-right: 35px; }
.modePC header .u1 .l12 { margin-right: 20px; margin-left: -5px; }
.modePC header .u1 .l13 { margin-right: 30px; }
.modePC header .u1 .l14 { margin-right: 30px; margin-left: -10px; }
.modePC header .u1 .l15 { margin-right: 30px; margin-left: -15px; margin-top: -2px; }

.modeSP header .u1 .l1,
.modeSP header .u1 .l2,
.modeSP header .u1 .l3 { margin-right: 20px; }
.modeSP header .u1 .l5 { margin-right: 50px; }
.modeSP header .u1 .l10 { margin-right: 20px; }
.modeSP header .u1 .l11 { margin-right: 50px; }
.modeSP header .u1 .l12 { margin-right: 30px; margin-left: -10px; }
.modeSP header .u1 .l13 { margin-right: 40px; }
.modeSP header .u1 .l14 { margin-right: 50px; margin-left: -10px; }
.modeSP header .u1 .l15 { margin-right: 40px; margin-left: -30px; margin-top: -4px; }

header .u1 a {
  text-align: center;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.modePC header .u1 a { width: 30px; height: 30px; }
.modePC header .u1 .l1 a { padding-top: 6px; }
.modePC header .u1 .l2 a { padding-top: 8px; }
.modePC header .u1 .l3 a { padding-top: 8px; }
.modePC header .u1 .l5 a { padding-top: 6px; }
.modePC header .u1 .l10 a { padding-top: 3px; }
.modePC header .u1 .l11 a { padding-top: 3px; }
.modePC header .u1 .l15 a {
  padding-top: -5px;
  width: auto;
  padding: 0 20px;
  height: 36px;
  line-height: 35px;
  background-color: #000;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}
.modePC header .u1 .l15 a span {
  display: inline;
}
.modeSP header .u1 a { width: 55px; height: 55px; }
.modeSP header .u1 .l1 a { padding-top: 11px; }
.modeSP header .u1 .l2 a { padding-top: 16px; }
.modeSP header .u1 .l3 a { padding-top: 15px; }
.modeSP header .u1 .l5 a { padding-top: 11px; }
.modeSP header .u1 .l7 a,
.modeSP header .u1 .l8 a { width: 59px; height: 60px; }
.modeSP header .u1 .l10 a { padding-top: 11px; }
.modeSP header .u1 .l11 a { padding-top: 11px; }
.modeSP header .u1 .l15 a {
  width: auto;
  height: 70px;
  background-color: #000;
  color: #fff;
  font-size: 26px;
  line-height: 70px;
  font-weight: bold;
  padding: 0 20px;
}

header .u1 svg {
  display: block;
  margin: 0 auto;
}
.modePC header .u1 .l1 svg,
.modePC header .u1 .l2 svg,
.modePC header .u1 .l3 svg,
.modePC header .u1 .l5 svg,
.modePC header .u1 .l10 svg,
.modePC header .u1 .l11 svg {
  -webkit-transition: color .3s 0s;
          transition: color .3s 0s;
  color: #dde2e4;
}
.modePC header .u1 .l1 a:hover svg,
.modePC header .u1 .l2 a:hover svg,
.modePC header .u1 .l3 a:hover svg,
.modePC header .u1 .l5 a:hover svg,
.modePC header .u1 .l10 a:hover svg,
.modePC header .u1 .l11 a:hover svg { color: #000; }
.modePC header .u1 .l1 svg { width:  8px; height: 17px; }
.modePC header .u1 .l2 svg { width: 15px; height: 13px; }
.modePC header .u1 .l3 svg { width: 21px; height: 14px; }
.modePC header .u1 .l5 svg { width: 18px; height: 18px; }
.modePC header .u1 .l7 svg { width: 30px; height: 16px; }
.modePC header .u1 .l8 svg { width: 16px; height: 16px; }
.modePC header .u1 .l10 svg { width: 25px; height: 25px; }
.modePC header .u1 .l11 svg { width: 25px; height: 25px; }
.modePC header .u1 .l12 svg { width: 25px; height: 25px; }
.modePC header .u1 .l13 svg { width: 25px; height: 25px; }
.modePC header .u1 .l14 svg { width: 25px; height: 25px; }
.modePC header .u1 .l15 svg {
  width: 17px;
  height: 17px;
  display: inline;
  fill: #fff;
  vertical-align: middle;
  margin: -3px 11px 0 0;
}
.modeSP header .u1 .l1 svg { width: 15px; height: 33px; }
.modeSP header .u1 .l2 svg { width: 30px; height: 26px; }
.modeSP header .u1 .l3 svg { width: 42px; height: 28px; }
.modeSP header .u1 .l5 svg { width: 38px; height: 37px; }
.modeSP header .u1 .l7 svg { width: 59px; height: 31px; }
.modeSP header .u1 .l8 svg { width: 33px; height: 33px; }
.modeSP header .u1 .l10 svg { width: 38px; height: 38px; }
.modeSP header .u1 .l11 svg { width: 38px; height: 38px; }
.modeSP header .u1 .l12 svg { width: 38px; height: 60px; }
.modeSP header .u1 .l13 svg { width: 38px; height: 60px; }
.modeSP header .u1 .l14 svg { width: 38px; height: 60px; }
.modeSP header .u1 .l15 svg {
  width: 30px;
  height: 30px;
  display: inline;
  fill: #fff;
  vertical-align: middle;
  margin: -5px 9px 0 0;
}

header .u1 span {
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  display: block;
  height: 1em;
  margin: 0 auto;
}

.modePC header .u1 .l7 span,
.modePC header .u1 .l8 span {
  font-size: 8px;
  margin-top: 7px;
}
.modeSP header .u1 .l7 span,
.modeSP header .u1 .l8 span {
  font-size: 16px;
  margin-top: 16px;
}


.modePC header .txt {
  width: 960px;
  margin: 0px auto 0;
  padding-left: 40px;
}
.modeSP header .txt {
  padding: 0 40px;
}

.modePC header .txt ul {
  width: 240px;
  float: left;
}
.modePC header .txt:after {
  content: "";
  display: block;
  clear: both;
}

header .txt li {
  color: #999;
}
.modePC header .txt li {
  font-size: 12px;
  line-height: 24px;
  margin-top: 16px;
}
.modeSP header .txt li {
  font-size: 30px;
  line-height: 48px;
  margin-top: 52px;
}

header .txt a {
  color: #000;
  display: block;
}
.modePC header .txt .active {
  font-weight: bold;
  cursor: default;
}

header .txt svg { fill: #999; }
header .txt a svg { fill: #000; }
.modePC header .txt svg {
  height: 24px;
  width: 24px;
  margin-right: 8px;
}
.modeSP header .txt svg {
  height: 48px;
  width: 48px;
  margin-right: 30px;
}

.modeSP header .txt ul:nth-of-type(4):after {
  content: "";
  display: block;
  clear: both;
}
.modeSP header .txt ul:nth-of-type(4) li {
  width: 25%;
  text-align: center;
  float: left;
}
.modeSP header .txt ul:nth-of-type(4) li:nth-of-type(4) { display: none; }

.modeSP header .txt ul:nth-of-type(4) svg {
  display: block;
  margin: 0 auto 10px;
}

.modePC header .txt ul:nth-of-type(4) .s1 {
  width: 9px;
  height: 8px;
  vertical-align: middle;
  margin-left: 5px;
}
.modeSP header .txt ul:nth-of-type(4) .s1 {
  vertical-align: middle;
  width: 17px;
  height: 16px;
  display: inline-block;
  margin: 0;
}

.modePC header .txt > p { display: none; }
.modeSP header .txt > p { margin-top: 72px; }

.modeSP header .txt > p a {
  font-size: 30px;
  line-height: 48px;
}

.modeSP header .txt > p svg {
  vertical-align: middle;
}
.modeSP header .txt > p .s2 {
  width: 48px;
  height: 48px;
  margin-right: 30px;
}
.modeSP header .txt > p .s3 {
  width: 17px;
  height: 10px;
  margin-left: 20px;
}

.modePC header .bnr {
  width: 965px;
  height: 325px;
  margin: 0 auto;
}

.modePC header .bnr ul {
  width: 963px;
  height: 323px;
  background: center no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  background-clip: border-box;
  border: 1px solid #fff;
  display: none;
}
.modePC header .bnr .bnr1 { background-image: url(/img/common/head_img01.jpg); }
.modePC header .bnr .bnr2 { background-image: url(/img/common/head_img02.jpg); }
.modePC header .bnr .bnr3 { background-image: url(/img/common/head_img03.jpg); }
.modePC header .bnr .bnr4 { background-image: url(/img/common/head_img04.jpg); }
.modePC header .bnr .bnr5 { background-image: url(/img/common/head_img05.jpg); }
.modePC header .bnr .bnr6 { background-image: url(/img/common/head_img06.jpg); }
.modePC header .bnr .bnr7 { background-image: url(/img/common/head_img07.jpg); }
.modePC header .bnr .bnr8 { background-image: url(/img/common/head_img08.jpg); }

.modePC header.view-bnr1 .bnr1,
.modePC header.view-bnr2 .bnr2,
.modePC header.view-bnr3 .bnr3,
.modePC header.view-bnr4 .bnr4,
.modePC header.view-bnr5 .bnr5,
.modePC header.view-bnr6 .bnr6,
.modePC header.view-bnr7 .bnr7,
.modePC header.view-bnr8 .bnr8 { display: block; }

.modePC header .bnr li {
  float: left;
  width: 240px;
  height: 80px;
  margin-left: 1px;
  margin-top: 1px;
  position: relative;
}
.modePC header .bnr li:nth-of-type(-n+4) { margin-top: 0; }
.modePC header .bnr li:nth-of-type(4n+1) { margin-left: 0;}
.modePC header .bnr li:empty { background-color: rgba(0,0,0,.24); }
.modePC header .bnr .current:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.modePC header .bnr a {
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  padding-top: 26px;
  background-color: rgba(0,0,0,.80);
  display: block;
  position: relative;
  height: 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: background-color .3s;
          transition: background-color .3s;
}
.modePC header .bnr a:hover {
  opacity: 1;
  background-color: rgba(0,0,0,.5);
}
.modePC header .bnr .current a {
  color: #000;
  background-color: rgba(255,255,255,.80);
}

.modePC header .bnr a span {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  font-size: 10px;
  display: block;
  margin-bottom: 9px;
}

/* Menu v2
==========================================*/

.modePC header .lbox,
.modePC header .rbox {
  width: 0;
  height: 100vh;
  overflow: hidden;
  transition: width .6s;
  white-space: nowrap;
  position: absolute;
  top: 0;
}
.modeSP header .lbox,
.modeSP header .rbox {
  display: none;
}
.modePC header .lbox {
  right: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.modePC header .rbox {
  left: 50%;
  z-index: 9;
}
.modePC header .headerNav {
  position: relative;
  opacity: 0;
  pointer-events: none;
  min-height: 700px;
}
.modePC.noFixHeader header .headerNav {
  margin-top: -110px;
}
.modeSP header .headerNav {
  width: 100%;
  height: 0;
  transition: height .6s;
  position: fixed;
  z-index: 12;
  background-color: #000;
  overflow: hidden;
  color: #fff;
}
.menuOpen {
  overflow: hidden !important;
}
.modePC header .headerNav {
  pointer-events: none;
}
.modePC.menuOpen header .headerNav {
  opacity: 1;
  transition: opacity .6s .6s;
  pointer-events: auto;
}
.modeSP.menuOpen header .headerNav {
  height: calc(100vh - 110px );
  transition: height .6s;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.modePC header .headerNav .vbox {
  position: relative;
  width: 100%;
}
.modePC header .headerNav .lbox2 {
  width: 50%;
  text-align: center;
  overflow: hidden;
}
.modePC header .headerNav .lbox2 > div {
  display: inline-block;
  text-align: left;
}
.modePC.menuOpen header .headerNav {
  width: 100%;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  overflow: scroll;
}
.modePC.menuOpen header .lbox,
.modePC.menuOpen header .rbox {
  width: 50%;
}
.modePC.menuClose header .lbox {
  right: auto;
  left: 0;
  width: 0;
  transition: width .6s;
}
.modePC.menuClose header .rbox {
  left: auto;
  right: 0;
  width: 0;
  transition: width .6s;
}
.modePC header .lbox {
  background-color: #151515;
}
.modePC header .rbox {
  background-color: #000;
}
.modeSP.menuOpen header .lbox {
  background-color: #000;
  width: 100vw;
}
.modeSP.menuOpen header .rbox {
  display: none;
}

.modePC header dt,
.modePC header dt a {
  font-size: 20px;
  color: #999;
  line-height: 40px;
  height: 40px;
  display: block;
  margin: 0 -25vw;
  padding: 0 25vw;
}
.modeSP header dt,
.modeSP header dt a {
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  margin: 0 auto;
  height: 145px;
  line-height: 145px;
  display: block;
}
.modeSP header dt {
  width: 670px;
  border-top: 2px solid #333;
  padding-left: 80px;
  box-sizing: border-box;
  position: relative;
  color: #999;
}
.modeSP header dl {
  width: 670px;
  border-bottom: 2px solid #333;
  margin: 0 auto;
}
.modePC header dt svg {
  display: none;
}
.modeSP header dt svg {
  fill: #fff;
  width: 47px;
  height: 145px;
  position: absolute;
  left: 0;
}
.modeSP header dt svg.i01 {
  width: 35px;
  margin-left: 6px;
}

.modePC header dd {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  top: 50%;
  transition: opacity .6s, top .6s;
  fill: #fff;
  text-align: center;
}
.modePC header dd svg {
  opacity: 0;
}
.modePC header dd .t1 p {
  opacity: 0;
}
.modeSP header dd ul li a {
  color: #ccc;
}
.modePC header dd > div {
  display: inline-block;
  text-align: left;
  min-width: 310px;
}
.modePC header dd svg {
  width: 85px;
}
.modeSP header dd svg {
  display: none;
}
.modePC header dd .t1 p {
  color: #999;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}
.modePC header dd .t1 p:nth-of-type(1) {
  font-size: 20px;
}
.modePC header dd .t1 p:nth-of-type(1):before {
  content: "\201c\20";
}
.modePC header dd .t1 p:nth-of-type(1):after {
  content: "\20\201d";
}
.modePC header dd .t1 p:nth-of-type(2) {
  margin-top: 13px;
  font-size: 9px;
}
.modePC header dd:nth-of-type(n+2) .t1 p:nth-of-type(2):before {
  content: "";
  display: inline-block;
  border-bottom: 1px solid #999;
  width: 11px;
  height: 1px;
  margin: 3px 6px 3px 20px;
}
.modeSP header dd .t1 {
  display: none;
}
.modePC header dd span { font-size: 12px; }
.modeSP header dd span { font-size: 24px; display: block; }
.modePC header dd .en { color: #fff; }
.modePC header dd .jp { color: #ccc; }
.modePC header dd .min { color: #777; font-weight: bold;}
.modePC header dt.active,
.modePC header dt.current,
.modePC header dt.current a,
/*.modePC header dt:hover,*/
.modePC header dt a:hover {
  opacity: 1;
  background-color: #363636;
}

/* stay change-accommodation*/
.modePC header dd ul li.aside{
  margin-top: 20px;
}

.modePC header dt.current,
.modePC header dt.current a,
.modePC header dt.active {
  color: #fff !important;
}
.modePC header dd ul li a:hover span {
  color: #666;
}
.modeSP header dd a {
  display: block;
  width: 100%;
}
.modePC header dd .t1 p:nth-of-type(1) {
  transition: opacity .6s;
}
.modePC header dd .t1 p:nth-of-type(2) {
  transition: opacity .6s .6s;
}
.modePC header dl:not(:hover):not(.active) dt.current + dd .t1 p:nth-of-type(1),
.modePC header dt.current:hover + dd .t1 p:nth-of-type(1),
.modePC header dt.active + dd .t1 p:nth-of-type(1),
.modePC header dt:not(.active) + dd.active .t1 p:nth-of-type(1) {
  opacity: 1;
  transform: translate(0, -30px);
  transition: transform .6s .0s, opacity .6s .0s;
}
.modePC header dl:not(:hover):not(.active) dt.current + dd .t1 p:nth-of-type(2),
.modePC header dt.current:hover + dd .t1 p:nth-of-type(2),
.modePC header dt.active + dd .t1 p:nth-of-type(2),
.modePC header dt:not(.active) + dd.active .t1 p:nth-of-type(2) {
  opacity: 1;
  transform: translate(0, -30px);
  transition: transform .6s .3s, opacity .6s .3s;
}
.modePC header dt:not(.active) + dd.active-end .t1 p:nth-of-type(1) {
  opacity: 0;
  transform: translate(0, -60px);
  transition: transform .6s, opacity .6s;
}
.modePC header dt:not(.active) + dd.active-end .t1 p:nth-of-type(2) {
  opacity: 0;
  transform: translate(0, -60px);
  transition: transform .6s .3s, opacity .6s .3s;
}
.modePC header dt.active + dd .t1 p {
  opacity: 1 !important;
  transform: translate(0,0) !important;
  transition: none !important;
}
.modePC header dt.active-end + dd .t1 p {
  opacity: 0 !important;
  transition: opacity 0 !important;
}
.modePC header dt + dd svg {
  opacity: 0;
  transition: opacity 0;
  transform: translate(0, -43px);
}
.modePC header dl:not(:hover) dt.current + dd svg,
.modePC header dt:hover + dd svg {
  opacity: 1;
  transition: opacity .6s .6s;
}
.modePC.menuOpen header dl.active dd {
  opacity: 0;
  pointer-events: none;
}
.modePC.menuOpen header dt.active + dd {
  opacity: 1;
  top: 0;
  pointer-events: auto;
}
.modePC header dd ul li {
  line-height: 33px;
  height: 0;
  transition: height .6s 0;
  overflow: hidden;
}
.modePC.menuOpen header dt.active + dd ul li.current a {
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
  pointer-events: none;
}
.modePC header dd ul li.stay_reservation {
  margin-bottom: 12px;
}

.modePC header dt.active + dd ul li {
  height: 33px;
  transition: height .6s .6s;
}
.modeSP header dd ul {
  margin: -20px 0 20px;
}
.modeSP header dd ul li {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-directions: column;
  width: 670px;
  margin: 0 auto;
  padding-left: 80px;
  box-sizing: border-box;
  height: 0;
  transition: height .3s;
  overflow: hidden;
}
.modeSP header dt.active + dd ul li {
  height: 116px;
}
.modePC header dt {
  transform: translate(0, 0);
  transition: transform .3s;
}
.modePC header dt.active {
  transform: translate(35px, 0);
}
.modeSP header dt.toggleSubMenu {
  background: url(/img/common/plus.png) no-repeat center right 10px;
}
.modeSP header dt.toggleSubMenu.active {
  background: url(/img/common/minus.png) no-repeat center right 10px;
}
.modePC header dt.active a {
  color: #fff;
}

.modePC header dd ul {
  padding: 20px 0 0 40px;
}
.modePC header dd ul li span + span {
  margin-left: 18px;
}
.modePC header .u2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;
  width: 500px;
}
.modeSP header .u2 {
  width: 670px;
  margin: 40px auto;
}
.modeSP header .u2 svg {
  display: none;
}
.modePC header .u2 a {
  color: #999;
  font-size: 12px;
  line-height: 23px;
  height: 23px;
}
.modeSP header .u2 li {
  height: 90px;
}
.modeSP header .u2 a {
  color: #fff;
  font-size: 28px;
  line-height: 90px;
  display: block;
}
.modePC header .u2 a svg {
  color: #999;
  width: 13px;
  height: 23px;
  margin-left: 7px;
}
.modePC header .copy {
  color: #fff;
  z-index: 12;
  font-size: 9px;
  position: absolute;
  right: 50px;
  bottom: 36px;
  line-height: 14px;
}
.modeSP header .copy {
  font-size: 18px;
  color: #fff;
  line-height: 25px;
  text-align: center;
  margin-top: 90px;
  padding-bottom: 180px;
}
.modePC header .copy a {
  color: #fff;
}
.modePC header .copy img {
  width: 104px;
  margin-left: 10px;
}
.modeSP header .copy img {
  width: 208px;
  margin-left: 18px;
}
.modePC header .sns {
  font-size: 9px;
  position: absolute;
  left: 50px;
  color: #ccc;
  bottom: 27px;
}
.modeSP header .sns {
  margin-top: 105px;
  font-size: 22px;
  color: #999;
  text-align: center;
}
header .sns svg {
  fill: #ccc;
  color: #ccc;
}
.modePC header .sns svg {
  margin-top: 4px;
  height: 15px;
  width: 32px;
}
.modeSP header .sns svg {
  width: 63px;
  height: 63px;
  margin: 50px 55px 0;
}
.modeSP header .btnA {
  border: 2px solid #fff;
  width: 670px;
  height: 130px;
  line-height: 130px;
  font-size: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.modeSP header .btnA svg:nth-of-type(1) {
  width: 44px;
  height: 47px;
  margin: 0 24px 0 -60px;
}
.modeSP header .btnA svg:nth-of-type(2) {
  margin: 0 45px 0 120px;
}

.modePC .link__company{
  margin-top: 28px;
}
.modePC .link__company a{}
.modePC .link__company a img{
  width: 170px;
}

.modeSP .link__company{
  display: none;
  width: 0;
  height: 0;
}
.modeSP .link__company a{}
.modeSP .link__company a img{}


/* footer
==========================================*/
footer {
  background-color: #fff;
}

footer > div {
  margin: 0 auto;
}
.modePC footer > div {
  width: 1200px;
  padding-bottom: 55px;
}
.modeSP footer > div {
  width: 750px;
  padding-bottom: 95px;
  overflow: hidden;
}

footer .b0 {
  text-align: right;
}
.modePC footer .b0 {
  height: 80px;
  margin-bottom: -27px;
}
.modePC footer .b0 {
  height: 70px;
}
.modeSP footer .b0 {
  text-align: center;
}

footer .b0 a {
  text-align: center;
  display: inline-block;
  position: relative;
  z-index: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.modePC footer .b0 a {
  height: 80px;
  width: 80px;
  background-color: #fff;
}
.modeSP footer .b0 a {
  height: 120px;
  width: 120px;
  margin-bottom: 40px;
  padding-top: 15px;
}
.modePC footer .b0 a:hover {
  opacity: 1;
}
.modePC footer .b0 a:hover svg,footer .b0 a:hover span {
  opacity: .6;
}

.modePC footer .b0 svg {
  width: 10px;
  height: 16px;
  margin: 19px auto 6px;
  display: block;
}
.modeSP footer .b0 svg {
  width: 20px;
  height: 32px;
  margin: 19px auto 6px;
  display: block;
}
.modePC footer .b0 span {
  font-size: 8px;
}
.modeSP footer .b0 span {
  font-size: 16px;
}

footer .b1 {
  margin: 0 auto;
  background-color: #ececec;
  position: relative;
}
.modePC footer .b1 {
  width: 1120px;
  height: 120px;
}
.modeSP footer .b1 {
  width: 690px;
  height: 160px;
}

footer .b1 li {
  float: left;
  position: relative;
}
.modePC footer .b1 li {
  height: 77px;
  margin-top: 20px;
}
.modeSP footer .b1 li {
  height: 98px;
  margin-top: 34px;
}
.modePC footer .b1 li:nth-of-type(1) { width: 185px; margin-left: 245px; }
.modePC footer .b1 li:nth-of-type(2) { width: 195px; }
.modePC footer .b1 li:nth-of-type(3) { width: 160px; }
.modeSP footer .b1 li:nth-of-type(1) { width: 155px; margin-left: 53px; }
.modeSP footer .b1 li:nth-of-type(2) { width: 171px; }
.modeSP footer .b1 li:nth-of-type(3) { width: 177px; }

footer .b1 li a { display: block; }
.modePC footer .b1 li a,
.modePC footer .b1 li > div { height: 77px; }
.modeSP footer .b1 li a,
.modeSP footer .b1 li > div { height: 98px; }

footer .b1 p {
  color: #999;
  line-height: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
footer .b1 a p {
  color: #000;
}

.modePC footer .b1 .p1 { height: 36px; padding-left: 20px; }
.modeSP footer .b1 .p1 { height: 41px; padding-left: 32px; }

.modePC footer .b1 .p1 svg { width: 32px; height: 32px; }
.modeSP footer .b1 .p1 svg { width: 38px; height: 38px; }

footer .b1 .p2 {
  font-weight: 700;
  height: 1em;
}
.modePC footer .b1 .p2 { font-size: 14px; }
.modeSP footer .b1 .p2 { font-size: 22px; }

footer .b1 svg { color: #999; fill: #999; }
footer .b1 a svg { color: #000; fill: #000; }

.modePC footer .b1 .p2 svg {
  margin-left: 14px;
  width: 17px;
  height: 14px;
}
.modeSP footer .b1 .p2 svg {
  display: none;
}

footer .b1 .p3 {
  height: 1em;
  margin-top: 7px;
}
.modePC footer .b1 .p3 { font-size: 10px; }
.modeSP footer .b1 .p3 { font-size: 16px; }
footer .b1 li .p3:after {
  content: "";
  display: block;
  width: 15px;
  height: 2px;
  background-color: #999;
  position: absolute;
  bottom: 0;
  left: 0;
}
footer .b1 li a .p3:after {
  background-color: #000;
}
.modePC footer .b1 li a:hover .p3:after {
  opacity: .6;
}

footer .b2 {
  margin-top: 100px;
  position: relative;
}

.modePC footer .b2 h1 {
  font-size: 34px;
  position: absolute;
  top: 0;
  left: 800px;
}
.modeSP footer .b2 h1 {
  font-size: 32px;
  margin-left: 410px;
}

footer .b2 h1 span {
  font-size: 36px;
}

.modePC footer .b2 h1 p:nth-of-type(2) { margin-top: 10px; }
.modeSP footer .b2 h1 p:nth-of-type(2) { margin-top: 12px; }

.modePC footer .b2 .imgWrap img { width: 740px; }
.modeSP footer .b2 .imgWrap img { width: 690px; margin-top: 40px; }

.modePC footer .b2 .viewMore {
  top: 160px;
  left: 300px;
}
.modeSP footer .b2 .viewMore {
  position: relative;
  float: right;
  margin: -80px 20px 0 0;
}

.modePC footer .b2 .p1 {
  width: 645px;
  height: 140px;
  position: absolute;
  top: 160px;
  left: 440px;
  background-color: #fff;
}
.modeSP footer .b2 .p1 {
  width: 510px;
  margin: 55px 0 0 100px;
}

.modePC footer .b2 .p1 p:nth-of-type(1) {
  font-size: 14px;
  margin: 36px 0 0 20px;
}
.modeSP footer .b2 .p1 p:nth-of-type(1) {
  font-size: 24px;
}

.modePC footer .b2 .p1 p:nth-of-type(2) { margin: 17px 0 0 20px; }
.modeSP footer .b2 .p1 p:nth-of-type(2) { margin-top: 25px; }
footer .b2 .p1 p:nth-of-type(2) em { display: block; }
.modePC footer .b2 .p1 p:nth-of-type(2) em { margin-top: 10px; font-size:14px; }
.modeSP footer .b2 .p1 p:nth-of-type(2) em { margin-top: 20px; font-size:26px; }

footer .b3 {
  text-align: center;
}
.modePC footer .b3 { margin-top: 150px; }
.modeSP footer .b3 { margin-top: 140px; }

.modePC footer .b3 h1 svg { width: 99px; width: 122px; }
.modeSP footer .b3 h1 svg { width: 135px; width: 165px; }

footer .b3 .p1 { margin-top: 82px; }
.modePC footer .b3 .p2 { margin-top: 5px; }
.modeSP footer .b3 .p2 { margin-top: 45px; }

.modePC footer .b3 .p2 .s2 { margin-left: 32px; }
.modeSP footer .b3 .p2 span { display: block; }
.modeSP footer .b3 .p2 .s1 { font-size: 30px; }
.modeSP footer .b3 .p2 .s2 { font-size: 24px; margin-top: 40px; }

footer .b3 .p2 svg { vertical-align: middle; }
.modePC footer .b3 .p2 svg { margin-right: 5px; }
.modePC footer .b3 .p2 .s1 svg:nth-of-type(1) { width: 14px; height: 14px; }
.modePC footer .b3 .p2 .s1 svg:nth-of-type(2) { display: none; }
.modePC footer .b3 .p2 .s2 svg:nth-of-type(1) { width: 15px; height: 14px; }
.modeSP footer .b3 .p2 svg { margin-right: .5em; }
.modeSP footer .b3 .p2 .s1 svg:nth-of-type(1) { width: 25px; height: 26px; }
.modeSP footer .b3 .p2 .s1 svg:nth-of-type(2) { width: 17px; height: 10px; margin-left: 20px; }
.modeSP footer .b3 .p2 .s2 svg:nth-of-type(1) { width: 20px; height: 20px; }

footer .b3 h2 {
  line-height: 1;
  clear: both;
}
.modePC footer .b3 h2:nth-of-type(1) { padding-top: 50px; }
.modePC footer .b3 h2:nth-of-type(2) { padding-top: 35px; }
.modeSP footer .b3 h2 { font-size: 18px; }
.modeSP footer .b3 h2:nth-of-type(1) { padding-top: 60px; }
.modeSP footer .b3 h2:nth-of-type(2) { padding-top: 55px; }
footer .b3 h2:after {
  content: "";
  display: block;
  width: 15px;
  height: 2px;
  background-color: #000;
}
.modePC footer .b3 h2:after { margin: 12px auto 0; }
.modeSP footer .b3 h2:after { margin: 15px auto 0; }

footer .b3 ul {
  margin-top: 20px;
  position: relative;
  left: 50%;
  float: left;
}
.modePC footer .b3 ul { height: 25px; }
.modeSP footer .b3 ul { height: 39px; }

footer .b3 li {
  text-align: center;
  position: relative;
  left: -50%;
  float: left;
}
.modePC footer .b3 li { width: 25px; height: 25px; }
.modePC footer .b3 .u1 li:nth-of-type(n+2) { margin-left: 10px; }
.modePC footer .b3 .u2 li:nth-of-type(n+2) { margin-left: 15px; }

.modeSP footer .b3 .u1 li { width: 56px; height: 39px; }
.modeSP footer .b3 .u1 li:nth-of-type(n+2) { margin-left: 20px; }
.modeSP footer .b3 .u2 li { width: 39px; height: 39px; }
.modeSP footer .b3 .u2 li:nth-of-type(n+2) { margin-left: 22px; }

footer .b3 li a {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.modePC footer .b3 li a { height: 25px; }
.modePC footer .b3 .u1 li:nth-of-type(1) a { padding-top: 3px; }
.modePC footer .b3 .u1 li:nth-of-type(2) a { padding-top: 6px; }
.modePC footer .b3 .u1 li:nth-of-type(3) a { padding-top: 5px; }
.modePC footer .b3 .u1 li:nth-of-type(4) a { padding-top: 4px; }
.modeSP footer .b3 li a { height: 39px; }
.modeSP footer .b3 .u1 li:nth-of-type(2) a { padding-top: 6px; }
.modeSP footer .b3 .u1 li:nth-of-type(3) a { padding-top: 5px; }

.modePC footer .b3 ul svg {
  color: #dde2e4;
  -webkit-transition: color .3s;
          transition: color .3s;
}
.modePC footer .b3 ul a:hover svg {
  color: #000;
}

.modePC footer .b3 .u1 li:nth-of-type(1) svg { width: 8px; height: 17px; }
.modePC footer .b3 .u1 li:nth-of-type(2) svg { width: 15px; height: 13px; }
.modePC footer .b3 .u1 li:nth-of-type(3) svg { width: 21px; height: 14px; }
.modePC footer .b3 .u1 li:nth-of-type(4) svg { width: 18px; height: 16px; }
.modePC footer .b3 .u2 svg { width: 25px; height: 25px; }
.modeSP footer .b3 .u1 li:nth-of-type(1) svg { width: 17px; height: 36px; }
.modeSP footer .b3 .u1 li:nth-of-type(2) svg { width: 33px; height: 28px; }
.modeSP footer .b3 .u1 li:nth-of-type(3) svg { width: 45px; height: 29px; }
.modeSP footer .b3 .u1 li:nth-of-type(4) svg { width: 38px; height: 37px; }
.modeSP footer .b3 .u2 svg { width: 39px; height: 39px; }

footer .b4 {
  color: #999;
}
.modePC footer .b4 {
  font-size: 10px;
  margin: 150px 110px 0;
}
.modeSP footer .b4 {
  font-size: 20px;
  margin: 140px 60px 0;
}

.modePC footer .b4 div {
  float: left;
  width: 392px;
}

.modePC footer .b4 dl {
  width: 176px;
  padding-right: 20px;
  margin-top: 70px;
  float: left;
}
.modePC footer .b4 > dl:nth-of-type(6) {
  clear: left;
}

footer .b4 dt {
  line-height: 1;
}
.modeSP footer .b4 dt {
  font-size: 22px;
  margin-top: 40px;
}
footer .b4 dt:after {
  content: "";
  display: block;
  background-color: #000;
}
.modePC footer .b4 dt:after {
  width: 15px;
  height: 2px;
  margin: 15px 0 20px;
}
.modeSP footer .b4 dt:after {
  width: 22px;
  height: 3px;
  margin: 20px 00;
}

footer .b4 dd,
footer .b4 li {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  letter-spacing: .14em;
}
.modePC footer .b4 dd,
.modePC footer .b4 li {
  line-height: 13px;
  margin-top: 10px;
}
.modeSP footer .b4 dd,
.modeSP footer .b4 li {
  margin-top: 20px;
}

footer .b4 li a,
footer .b4 li span { position: relative; }
.modePC footer .b4 li a,
.modePC footer .b4 li span { padding-left: 22px; }
.modeSP footer .b4 li a,
.modeSP footer .b4 li span { padding-left: 45px; }
footer .b4 li a:before,
footer .b4 li span:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
}
footer .b4 li a:before { background-color: #000; }
footer .b4 li span:before { background-color: #999; }
.modePC footer .b4 li a:before,
.modePC footer .b4 li span:before {
  width: 10px;
  height: 1px;
  top: 6px;
}
.modeSP footer .b4 li a:before,
.modeSP footer .b4 li span:before {
  width: 15px;
  height: 2px;
  top: 10px;
}

footer .b4 a {
  color: #000;
}
.modePC footer .b4 a svg {
  width: 9px;
  height: 8px;
  margin-left: 7px;
}
.modeSP footer .b4 a svg {
  width: 12px;
  height: 10px;
  margin-left: 12px;
}


.modePC footer .b5 {
  margin-top: 130px;
  height: 10px;
}
.modePC.touchUA footer .b5 {
  overflow: hidden;
}
.modeSP footer .b5 {
  margin-top: 135px;
}

footer .b5 ul {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
    -ms-flex-pack: center;
}
.modePC footer .b5 ul {
  justify-content: center;
}
.modeSP footer .b5 ul {
  width: 606px;
  margin: 0 auto;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}

footer .b5 li {
  color: #999;
  position: relative;
}
.modePC footer .b5 li {
  font-size: 10px;
  line-height: 1;
}
.modeSP footer .b5 li {
  font-size: 20px;
}
.modePC footer .b5 li:nth-of-type(n+2) { margin-left: 35px; }
.modeSP footer .b5 li:nth-of-type(3n+1) { width: 250px; }
.modeSP footer .b5 li:nth-of-type(3n+2) { width: 175px; }
.modeSP footer .b5 li:nth-of-type(3n+3) { clear: right; }
.modeSP footer .b5 li:nth-of-type(n+4) { margin-top: 13px; }

footer .b5 svg { vertical-align: middle; }
.modePC footer .b5 svg {
  width: 9px;
  height: 8px;
  margin-left: 7px;
}
.modeSP footer .b5 svg {
  width: 12px;
  height: 10px;
  margin-left: 12px;
}

footer .b6 { text-align: center; }
.modePC footer .b6 { padding-top: 100px; }
.modeSP footer .b6 { padding-top: 80px; }

.modePC footer .b6 img { width: 200px; }
.modeSP footer .b6 img { width: 311px; }

.modePC footer .b6 p {
  font-size: 10px;
  margin-top: 55px;
}
.modeSP footer .b6 p {
  font-size: 18px;
  margin-top: 50px;
}

/* 404
==========================================*/
#e404 .box01 { text-align: center; }
.modePC#e404 .box01 { padding-top: 140px; }
.modeSP#e404 .box01 { padding-top: 230px; }

.modePC#e404 .box01 svg { width: 86px; height: 132px; }
.modeSP#e404 .box01 svg { width: 109px; height: 169px; }

#e404 .box01 p {
  line-height: 1;
}
.modePC#e404 .box01 p {
  font-size: 22px;
  margin-top: 28px;
}
.modeSP#e404 .box01 p {
  font-size: 14px;
  margin-top: 56px;
}

.modePC#e404 .box02 { margin-top: 180px; }
.modeSP#e404 .box02 { margin: 250px 60px 0; }

/* orientationNtoice
==========================================*/
.orientationNtoice,
.modePC.modeSP .orientationNtoice {
  display: none;
}
@media all and (orientation: landscape) {
  .modeSP {
    overflow: hidden;
    height: 100%
  }
  .modeSP .orientationNtoice {
    background: #f9f9f9 url(/img/common/orientationNtoice.png) no-repeat;
    background-size: 60px 60px;
    background-position: 50% 63% ;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    color: #000;
    height: 100%;
    width: 100%;
  display: table;
  }
  .modeSP .orientationNtoice p{
    text-align: center;
    width: 50%;
    position: absolute;
    top: 30%;
    left: 50%;
    margin-left: -25%;
  }
}
/* debug
==========================================*/
.debugBox > div {
  height: 0;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 10;
}

.debugBox .posi {
  z-index: 100;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.debugBox .fire {
  z-index: 101;
  border-bottom: 1px solid rgba(255, 0, 0, .5);
}

.debugBox > div span {
  color: #333;
  font-size: 10px;
  line-height: 1;
  font-family: monospace;
  position: absolute;
  left: 0;
  bottom: -6px;
  display: inline-block;
  height: 12px;
  padding: 0 5px;
}

.debugBox .posi span {
  background-color: rgba(0, 0, 0, .1);
}

.debugHost {
  width: 100%;
  height: 0;
  text-align: center;
  position: fixed;
  z-index: 100;
  top: 15px;
  left: 50%;
  margin-left: -50%;
}

.debugHost span {
  color: #fff;
  text-shadow: 2px solid #000;
  font-size: 8px;
  line-height: 10px;
  font-weight: bold;
  padding: 4px 10px;
}
/* logon logoff logi logout
==========================================*/
header .u1 .l14,
header .u1 .l13,
header .u1 .l12 { display: none; }
.logoff header .u1 .l14 { display: list-item; }
.logon header .u1 .l13 { display: list-item; }
.logon header .u1 .l12 { display: list-item; }

/* modal
==========================================*/
.modePC.modalOpen {
    overflow: hidden;
}

.modeSP.modalOpen .wrapper,
.modeSP.modalOpen footer {
    display: none;
}

.modalWrap {
    background-color: rgba(0, 0, 0, .8);
    padding: 20px 0;
    width: 100%;
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 12;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.modePC .modalWrap {
    min-width: 1200px;
}
.modalOpen .modalWrap {
    display: block;
}

.modal {
    background-color: #fff;
    position: relative;
    margin: 100px auto;
}

.modePC .modal { width: 800px; }
.modeSP .modal { width: 640px; }

.modal > a {
    color: #000;
    line-height: 20px;
    text-align: center;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  text-align: center;
  margin: auto;
}
.modal > a { background-color: #000; color: #fff; }
.modePC .modal > a {
  font-size: 10px;
  width: 70px;
  height: 55px;
  margin-top: -70px;
  padding-top: 15px;
}
.modeSP .modal > a {
  font-size: 16px;
  width: 100px;
  height: 75px;
  padding-top: 25px;
  margin-top: -100px;
}

.modal > div { text-align: center; }
.modePC .modal > div { padding: 100px; }
.modeSP .modal > div { padding: 70px 50px 50px; }
.modeSP .barTitleC p:nth-of-type(1){
  font-size: 36px;
}

.modal button {
  background-color: transparent;
}
.modal .box02 {
  margin: 50px 0 100px 0;
  /*
  color: #f00;
  */
}
.modal > a > svg {
  fill: #fff;
}
.modePC .modal .b1 {
  width: auto;
  text-align: center;
  margin: 60px auto;
}
.modeSP .modal .b1 {
  width: 100%;
  text-align: center;
  margin: 60px auto;
}
.modePC .modal > a > svg { width: 24px; height: 24px; }
.modeSP .modal > a > svg { width: 33px; height: 33px; }

/* reservation
==========================================*/
.reserveOpen .reserveWrap {
    display: block;
}
body.reserveOpen {
  overflow: hidden;
}
.reserveWrap {
    background-color: rgba(0, 0, 0, .8);
    padding: 20px 0;
    width: 100%;
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 12;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modePC .reserveWrap .modal { width: 690px; height: auto; }
.modeSP .reserveWrap .modal { width: 690px; height: auto; margin-top: 200px; }

.modePC .reserveWrap .modal > div { padding: 90px 60px 40px; }
.modeSP .reserveWrap .modal > div { padding: 70px 0 0 0; }
.modePC .reserveWrap h1 { border: none; }
.modePC .reserveWrap h1 p:nth-of-type(1) { font-size: 30px; }
.modePC .reserveWrap h1 p:nth-of-type(2) { font-size: 12px; margin: 16px; }

.modeSP .reserveWrap h1 p:nth-of-type(1) { font-size: 54px; }
.modeSP .reserveWrap h1 p:nth-of-type(2) { font-size: 24px; font-weight: bold; }

.reserveWrap .ui-datepicker {
  border: none;
}
.reserveWrap input {
  display: none;
}
.reserveWrap .error {
  color: #f00;
}

.reserveWrap p.text {
  text-align: left;
}
.modePC .reserveWrap p.text {
  padding: 20px 66px;
  line-height: 1.8;
}
.modeSP .reserveWrap p.text {
  font-size: 20px;
  padding: 20px 40px;
}

.reserveWrap .error{ font-weight: bold; }
.modePC .reserveWrap .error {
  height: 30px;
  padding: 20px 0 20px;
}
.modeSP .reserveWrap .error {
  font-size: 20px;
  padding-bottom: 20px;
}
/*
.modePC .reserveWrap .b1 { margin: 0 0 20px; }
.modeSP .reserveWrap .b1 {
  margin: 0;
  height: 100px;
}
*/



/*stay タブ切り替え全体のスタイル*/
.reserve-inner .tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.modePC .reserve-inner .tab-wrap{
  width: 400px;
  padding-top: 80px;
}
.modeSP .reserve-inner .tab-wrap{
  width: 550px;
  padding-top: 80px;
  padding-bottom: 80px;
}

.reserve-inner .tab-label {
    color: #aaa;
    order: -1;
    width: 49%;
    font-weight: bold;
    margin-right: 2%;
    display: block;
}
.modePC .reserve-inner .tab-label{
  border-bottom: 2px solid #aaa;
  font-size: 16px;
  padding-bottom: 10px;
  margin-bottom: 60px;
}
.modeSP .reserve-inner .tab-label{
  border-bottom: 4px solid #aaa;
  font-size: 32px;
  padding-bottom: 20px;
  margin-bottom: 100px;
}

.reserve-inner .tab-label:hover{
  color: #666;
}

.reserve-inner .tab-label:nth-of-type(2) {
  margin-right: 0;
}

.reserve-inner .tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.modePC .reserve-inner .tab-content a{
  margin-bottom: 30px;
}
.modeSP .reserve-inner .tab-content a{
  margin-bottom: 30px;
}


/* .reserve-inner .yoyogipark-banner{} */
.modePC .reserve-inner .yoyogipark-banner{ margin: 30px 0 10px 0; }
.modeSP .reserve-inner .yoyogipark-banner{ margin: 30px 0 0 0; }

.reserve-inner .yoyogipark-banner__img{
  width: 100%;
}



.reserve-inner .tab-content a span{
  display: block;
}
.modePC .reserve-inner .tab-content p.mes{
  font-size: 8px;
  margin-top: -23px;
}
.modeSP .reserve-inner .tab-content p.mes{
  font-size: 16px;
  margin-top: -23px;
}

/* アクティブなタブ */
.reserve-inner .tab-switch:checked+.tab-label {
    color: #000;
}
.modePC .reserve-inner .tab-switch:checked+.tab-label {
  border-bottom: 2px solid #000;
}
.modeSP .reserve-inner .tab-switch:checked+.tab-label {
  border-bottom: 4px solid #000;
}

.reserve-inner .tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  opacity: 1;
  transition: .5s opacity;
}
/* ラジオボタン非表示 */
.reserve-inner .tab-switch {
    display: none;
}


/*.modePC .reserveWrap .b1 label {
  margin: 10px;
  height: 30px;
  line-height: 40px;
}
.modeSP .reserveWrap .b1 label {
  font-size: 20px;
  width: 50%;
  display: inline-block;
}
.modeSP .reserveWrap .b1 label:nth-of-type(1) { float: left; }
.modeSP .reserveWrap .b1 label:nth-of-type(2) { float: right; }
.modeSP .reserveWrap .b1 > div {
  clear: both;
  display: block;
  content: "";
}*/
/*
.modePC .reserveWrap .b1 label div {
  border-bottom: 2px solid #000;
  width: 200px;
}
.modeSP .reserveWrap .b1 label div { height: 60px; padding: 20px 0; }

.modePC .reserveWrap .b1 {
  font-size: 16px;
}
.modePC .reserveWrap .b1 span {
  display: inline-block;
}
.modePC .reserveWrap .b1 span > span {
  font-size: 12px;
  width: 120px;
}
.reserveWrap .b1 svg {
  width: 17px;
  height: 17px;
  margin-top: 10px;
}
.reserveWrap .b1 div {
  display: inline-block;
  opacity: .4;
}
.modeSP .reserveWrap .b1 div { width: 100%; line-height: 30px; }
.modeSP .reserveWrap .b1 span { font-size: 22px; }
.modeSP .reserveWrap .b1 em { font-size: 28px; }

.reserveWrap .b1 :checked + div {
  opacity: 1;
}
.modeSP .reserveWrap .b1 :checked + div {
  background-color: #ececec;
}*/

.modeSP .reserveWrap .ui-datepicker-title {
  font-size: 30px;
}
.modePC .reserveWrap .reserveDatepick {
  width: 520px;
  margin: auto;
}
.modeSP .reserveWrap .ui-datepicker {
  background-color: #ececec;
  padding: 25px 0 0;
}
.modeSP .reserveWrap .ui-datepicker-today .ui-state-default {
  border: none;
}

.reserveWrap .ui-datepicker-calendar {
  margin: 0 auto;
}

.modePC .reserveWrap .btnA {
  width: 320px;
  height: 60px;
  font-weight: normal;
}
.modePC .reserveWrap .reserve-inner.kitchen .btnA {
  width: 345px;
}
.modeSP .reserveWrap .btnA {
  margin-top: 40px;
  width: 610px;
  height: 110px;
}
.modePC .reserveWrap .reserve-inner.kitchen p i {
  text-decoration: underline;
  }

.reserveWrap a.ui-state-default {
  color: #666;
  background-color: #fff;
}
.modeSP .reserveWrap a.ui-state-default {
  background-color: transparent;
}
.modeSP .reserveWrap .ui-datepicker-current-day {
  color: #fff;
  background-color: #000;
}
.modePC .reserveWrap .ui-datepicker-calendar th,
.modePC .reserveWrap .ui-datepicker-calendar td {
  font-size: 14px;
  line-height: 40px;
  border: 1px solid #fff;
  width: 60px;
  height: 60px;
}
.modeSP .reserveWrap .ui-datepicker-calendar th span {
  font-size: 26px;
}
.modeSP .reserveWrap .ui-datepicker-calendar th,
.modeSP .reserveWrap .ui-datepicker-calendar td {
  font-size: 22px;
  line-height: 60px;
  border: 2px solid #fff;
  width: 98px;
  height: 98px;
  line-height: 98px;
}
.modePC .reserveWrap .ui-state-default {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
.modeSP .reserveWrap .ui-state-default {
  width: 98px;
  height: 98px;
  line-height: 98px;
}
.modeSP .reserveWrap .ui-datepicker-header > a { width: 100px; }
.modeSP .reserveWrap .ui-datepicker-header > a svg { width: 50px; }

.modeSP .reserveWrap .ui-datepicker-calendar th,
.modeSP .reserveWrap .ui-datepicker-calendar td {
  border: none;
}
.reserveWrap .reserveDatepick .stay a {
  color: #fff;
  background-color: #999;
}
.modeSP .reserveWrap .reserveDatepick .stay a {
  color: #fff;
  background-color: #999;
}
.reserveWrap .reserveDatepick .select a {
  color: #fff;
  background-color: #000;
}
.modeSP .reserveWrap .reserveDatepick .select a {
  color: #fff;
  background-color: #000;
}
.reserveWrap .b2 {
  background-color: #ececec;
}
.modePC .reserveWrap .modal {
  padding-bottom: 75px;
}
.modePC .reserveWrap .modal .b2 {
  width: 520px;
  height: 40px;
  margin: 40px auto 0;
  padding: 25px;
}
.modeSP .reserveWrap .b2 {
  margin-top: 30px;
  width: 690px;
  height: 40px;
  margin: 40px 0 0;
  padding: 70px 0 0;
}
.modePC .reserveWrap .b2 svg {
  width: 18px;
  height: 18px;
}
.modeSP .reserveWrap .b2 svg {
  width: 26px;
  height: 26px;
}
.reserveWrap .b0 > div {
  width: 50%;
}
.modePC .reserveWrap .b2 > div > div {
  padding-left: 90px;
  text-align: left;
  position: relative;
  font-size: 10px;
  line-height: 20px;
}
.modeSP .reserveWrap .b2 > div > div {
  padding-left: 90px;
  text-align: left;
  position: relative;
  font-size: 16px;
  line-height: 26px;
}
.modePC .reserveWrap .b2 > div em {
  font-size: 14px;
  line-height: 20px;
}
.modeSP .reserveWrap .b2 > div em {
  font-size: 22px;
  line-height: 24px;
}
.modePC .reserveWrap .b2 > div svg:nth-of-type(1) {
  position: absolute;
  left: 60px;
  width: 20px;
  height: 20px;
  margin-top: 10px;
}
.modeSP .reserveWrap .b2 > div svg:nth-of-type(1) {
  position: absolute;
  left: 40px;
  width: 36px;
  height: 36px;
  margin-top: 10px;
}
.modePC .reserveWrap .b2 > div svg:nth-of-type(2) {
  margin: 1px 0 0 7px;
}
.modeSP .reserveWrap .b2 > div svg:nth-of-type(2) {
  margin: 1px 0 0 7px;
}
.modePC .reserveWrap .b2 .rbox svg:nth-of-type(1) {
  width: 30px;
  height: 30px;
  margin: 4px 0 0 -10px;
}
.modeSP .reserveWrap .b2 .rbox svg:nth-of-type(1) {
  width: 53px;
  height: 44px;
  margin: 4px 0 0 -10px;
}
.reserveWrap .b0 .lbox { float: left; }
.reserveWrap .b0 .rbox { float: right; }
.reserveWrap .b0:after {
  clear: both;
  display: block;
  content: "";
}
.modePC .reserveWrap .modal .b3 {
  margin-top: 30px;
  text-align: center;
  padding: 0 70px;
}
.modeSP .reserveWrap .b3 {
  text-align: center;
  padding: 60px 70px 50px !important;
  background-color: #ececec;
  font-size: 20px;
}
.modePC .reserveWrap .b3 svg {
  width: 10px;
  height: 10px;
  margin-top: 7px;
}
.modeSP .reserveWrap .b3 svg {
  width: 17px;
  height: 14px;
  margin-top: 12px;
}
.reserveWrap .b3 svg {
  width: 17px;
  height: 17px;
  margin-top: 10px;
}
/* faq no link */
.reserveWrap .b2 .rbox * {
  color: #999;
  fill: #999;
}

.reserve-inner {
  display: none;
}
.reserveWrap.stay .reserve-inner.stay ,
.reserveWrap.stayGoTo .reserve-inner.stayGoTo ,
.reserveWrap.kitchen .reserve-inner.kitchen,
.reserveWrap.kushi .reserve-inner.kushi {
       display: block;
}

.reserveWrap.stay .stay_coming-soon{
  text-align: left;
}
.modePC .reserveWrap.stay .stay_coming-soon{
  width: 500px;
  margin: 50px auto 0;
}
.modeSP .reserveWrap.stay .stay_coming-soon{
  width: 540px;
  margin: 60px auto 0;
  padding-bottom: 80px;
}

.reserveWrap.stay .stay_coming-soon p{}
.modePC .reserveWrap.stay .stay_coming-soon p{
  margin-top: 40px;
}
.modeSP .reserveWrap.stay .stay_coming-soon p{
  margin-top: 60px;
}

.modePC .reserveWrap.stay .aside{ margin-top: 40px; }
.modeSP .reserveWrap.stay .aside{ margin-top: 50px;}


/*.reserveWrap.stay .aside a{ color: #333; }*/
.modePC .reserveWrap.stay .aside a{}
.modePC .reserveWrap.stay .aside a:hover{
  text-decoration: underline;
}
.modeSP .reserveWrap.stay .aside a{
  text-decoration: underline;
}


.modePC .reserveWrap .reserve-inner { padding: 0 !important; }
.modeSP .reserveWrap .reserve-inner { padding: 0 !important; }

.modePC .reserve-inner.kitchen { height: auto; }
.modeSP .reserve-inner.kushi { height: auto; padding-bottom: 100px !important; }
.modeSP .reserve-inner.kitchen { height: auto; padding-bottom: 100px !important; }

.modePC .reserve-inner.kitchen h3 { font-size: 20px; margin: 40px 0 0; }
.modeSP .reserve-inner.kitchen h3 { font-size: 32px; margin: 90px 0 0; }

.reserve-inner.kitchen div {}
.modePC .reserve-inner.kushi div ,
.modePC .reserve-inner.kitchen div { margin-top: 40px; }
.modeSP .reserve-inner.kushi div ,
.modeSP .reserve-inner.kitchen div {
  margin-top: 60px;
  text-align: left;
  padding-left: 30px;
  padding-right: 30px;
}

.modePC .reserve-inner.kitchen p,
.modePC .reserve-inner.kushi p {
  margin-top: 20px;
  font-size: 12px;
}
.modeSP .reserve-inner.kitchen p,
.modeSP .reserve-inner.kushi p {
  margin-top: 30px;
  font-size: 24px;
}

.reserveWrap .reserve-inner.kitchen p span {
  display: block;
  /*text-decoration: underline;*/
}
.modePC .reserveWrap .reserve-inner.kitchen p span {}
.modeSP .reserveWrap .reserve-inner.kitchen p span {
  margin-top: 10px;
}

.modePC .reserve-inner.kushi p em ,
.modePC .reserve-inner.kitchen p em {font-size: 15px; }
.modeSP .reserve-inner.kushi p em ,
.modeSP .reserve-inner.kitchen p em {font-size: 24px; }

.modePC .reserve-inner.kushi .btnA ,
.modePC .reserve-inner.kitchen .btnA { margin-top: 45px; }
.modeSP .reserve-inner.kushi .btnA ,
.modeSP .reserve-inner.kitchen .btnA { margin-top: 60px; font-size: 28px; }

.modePC .reserve-inner.kushi .btnA + p {
  margin-top: 50px;
}

.reserveWrap .reserve-inner h2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  margin-bottom: 0;
}
.modePC .reserveWrap .reserve-inner h2 {
  height: 130px;
}
.modeSP .reserveWrap .reserve-inner h2 {
  height: 140px;
}
.modePC .reserveWrap .reserve-inner h2 .en em {
  font-size: 30px;
  margin-top: 27px;
}
.modeSP .reserveWrap .reserve-inner h2 .en em {
  font-size: 38px;
  margin-top: 40px;
}
.reserveWrap .reserve-inner h2 .jp {
  margin-top: 0;
}
.modePC .reserveWrap .reserve-inner h2 .jp {
  font-size: 12px;
}
.modeSP .reserveWrap .reserve-inner h2 .jp {
  font-size: 20px;
}

.reserve-inner.kushi .sup{
  line-height: 1.5;
  display: block;
  color: #666;
}
.modePC .reserve-inner.kushi .sup{
  margin-top: 5px;
  font-size: 11px;
}
.modeSP .reserve-inner.kushi .sup{
  margin-top: 10px;
  font-size: 22px;
}

.reserve-inner.kitchen .sup{
  line-height: 1.5;
  display: block;
  color: #666;
}
.modePC .reserve-inner.kitchen .sup{
  margin-top: 5px;
  font-size: 11px;
}
.modeSP .reserve-inner.kitchen .sup{
  margin-top: 10px;
  font-size: 22px;
}

/* go to */
.reserve-inner .reserve-inner__frame{
  text-align: left;
}
.modePC .reserve-inner .reserve-inner__frame{
  padding: 80px 50px 0;
}
.modeSP .reserve-inner .reserve-inner__frame{
  padding: 100px 50px 0 50px;
}

.reserve-inner .reserve-inner__frame .lang-phrase{}
.modePC .reserve-inner .reserve-inner__frame .lang-phrase{}
.modeSP .reserve-inner .reserve-inner__frame .lang-phrase{}

.modePC .reserve-inner .reserve-inner__frame .lang-phrase:nth-child(2){
  margin-top: 50px;
}

.modeSP .reserve-inner .reserve-inner__frame .lang-phrase:nth-child(2){
  padding-bottom: 120px;
  margin-top: 50px;
}

.reserve-inner .reserve-inner__frame .lang-phrase h2{
  font-weight: bold;
  text-align: center;
}
.modePC .reserve-inner .reserve-inner__frame .lang-phrase h2{
  font-size: 30px;
  margin-bottom: 30px;
  height: 100px;
  line-height: 1.4;
}
.modeSP .reserve-inner .reserve-inner__frame .lang-phrase h2{
  font-size: 38px;
  margin-bottom: 50px;
  line-height: 1.4;
}

.reserve-inner .reserve-inner__frame .lang-phrase h3{
  font-weight: bold;
}
.modePC .reserve-inner .reserve-inner__frame .lang-phrase h3{
  font-size: 15px;
  margin-top: 30px;
  margin-bottom: 6px;
}
.modeSP .reserve-inner .reserve-inner__frame .lang-phrase h3{
  font-size: 26px;
  margin-top: 28px;
  margin-bottom: 14px;
}

.reserve-inner .reserve-inner__frame .lang-phrase a{}
.modePC .reserve-inner .reserve-inner__frame .lang-phrase a{
  margin-top: 20px;
  margin-bottom: 40px;
}
.modeSP .reserve-inner .reserve-inner__frame .lang-phrase a{
  margin-top: 30px;
  margin-bottom: 60px;
}

.reserve-inner .reserve-inner__frame .lang-phrase p{}
.modePC .reserve-inner .reserve-inner__frame .lang-phrase p{}
.modeSP .reserve-inner .reserve-inner__frame .lang-phrase p{}

.reserve-inner .reserve-inner__frame .lang-phrase p.info{
  color: #ccc;
}
.modePC .reserve-inner .reserve-inner__frame .lang-phrase p.info{}
.modeSP .reserve-inner .reserve-inner__frame .lang-phrase p.info{}

.reserve-inner .reserve-inner__frame .lang-phrase ul.number-list{}
.modePC .reserve-inner .reserve-inner__frame .lang-phrase ul.number-list{}
.modeSP .reserve-inner .reserve-inner__frame .lang-phrase ul.number-list{}

.reserve-inner .reserve-inner__frame .lang-phrase ul.dot-list{}
.modePC .reserve-inner .reserve-inner__frame .lang-phrase ul.dot-list{
  margin-bottom: 14px;
}
.modeSP .reserve-inner .reserve-inner__frame .lang-phrase ul.dot-list{
  margin-bottom: 20px;
}

.reserve-inner .reserve-inner__frame .lang-phrase ul li{}
.modePC .reserve-inner .reserve-inner__frame .lang-phrase ul li{}
.modeSP .reserve-inner .reserve-inner__frame .lang-phrase ul li{}



/* help
==========================================*/
.help {
  background-color: #000;
  position: absolute;
}
.help:after {
  content: "?";
  color: #fff;
  font-weight: bold;
}
.modePC .help {
  width: 22px !important;
  height: 22px;
  margin: 0 10px;
  border-radius: 11px;
}
.modePC .help:after {
  padding-left: 6px;
  font-size: 20px;
}
.modeSP .help {
  width: 37px !important;
  height: 37px;
  margin: 0 20px;
  border-radius: 19px;
}
.modeSP .help:after {
  padding-left: 12px;
  font-size: 28px;
}

/* tooltip ( hover )
==========================================*/
.modePC .tip {
  opacity: 0;
/*  opacity: 1; /*DEBUG*/
/*  -webkit-transition: opacity .3s;
          transition: opacity .3s; */
  border: 1px solid #ccc;
  background-color: #fff;
  color: #000;
  -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
  line-height: 1;
  margin-top: 5px;
  color: #000;
  padding: 5px 15px;
  position: absolute;
  color: #000;
  padding: 5px 15px;
}
.modeSP .tip { display: none; }
.modePC .hoverTip:hover + .tip {
  opacity: 1;
/*  -webkit-transition: opacity .3s;
          transition: opacity .3s; */
}
.modePC .tip:before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  margin-left: -9px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
  z-index: 0;
}
.modePC .tip:after {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  margin-left: -10px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0px 11px 11px 11px;
  border-color: transparent transparent #ccc transparent;
  z-index: -1;
}
.modePC .tip p {
  white-space: nowrap;
}
/* copy from. custom parent element width /2 offset
.modePC .examplexxx .tip {
  margin-left: 22.5px;
}
*/
/* tooltip ( view )
==========================================*/
.viewtip {
  border: 1px solid #ccc;
  background-color: #fff;
  color: #000;
  -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
  line-height: 1;
  margin-top: 5px;
  color: #000;
  padding: 5px 15px;
  position: absolute;
  color: #000;
  padding: 5px 15px;
}
.viewtip:before {
  content: "";
  position: absolute;
  top: -9px; left: 50%;
  margin-left: -9px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #fff transparent;
  z-index: 0;
}
.viewtip:after {
  content: "";
  position: absolute;
  top: -11px; left: 50%;
  margin-left: -10px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0px 11px 11px 11px;
  border-color: transparent transparent #ccc transparent;
  z-index: -1;
}
.viewtip p {
  white-space: nowrap;
}
/* tooltip ( click 2 )
==========================================*/
.tooltip-tmp {
  display: none;
  position: absolute;
  border: 2px solid #000;
  background: #fff;
  z-index: 10;
}
.tooltip-tmp.ready {
  display: block;
  opacity: 0;
  -webkit-transition: opacity .3s;
          transition: opacity .3s;
}
.tooltip-tmp.active {
  display: block;
  opacity: 1;
  -webkit-transition: opacity .3s;
          transition: opacity .3s;
}
.tooltip-tmp h3 {
  font-weight: bold;
  width: 100%;
}
.modePC .tooltip-tmp h3 { font-size: 14px; }
.modeSP .tooltip-tmp h3 { font-size: 28px; }
.modePC .tooltip-tmp { padding: 20px 15px 15px; }
.modeSP .tooltip-tmp { padding: 60px 30px 30px; }
.modePC .tooltip-tmp.big {}
.modePC .tooltip-tmp.middle {}
.modePC .tooltip-tmp.small {}
.modeSP .tooltip-tmp.big { width: 630px; }
.modeSP .tooltip-tmp.middle { width:420px; }
.modeSP .tooltip-tmp.small { width: 300px; }



.tooltip-tmp .btnA {
  margin-top: 25px;
}
.modePC .tooltip-tmp .btnA { height: 30px; width: 170px; font-size: 12px; line-height: 30px; }
.modeSP .tooltip-tmp .btnA { height: 60px; width: 320px; font-size: 24px; line-height: 60px; }

.tooltip-tmp.ready:before {
  content: "";
  position: absolute;
  bottom: -9px; left: 50%;
  margin-left: -9px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #fff transparent transparent transparent;
  z-index: 0;
}
.tooltip-tmp.ready:after {
  content: "";
  position: absolute;
  bottom: -12px; left: 50%;
  margin-left: -10px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 11px 11px 0 11px;
  border-color: #000 transparent transparent transparent;
  z-index: -1;
}
.tooltip-tmp .close {
  background-color: #000;
  position: absolute;
  padding: 2px;
  top: 0;
  right: 0;
}
.modePC .tooltip-tmp .close { width: 20px; height: 20px; }
.modeSP .tooltip-tmp .close { width: 40px; height: 40px; }

.tooltip-tmp .close svg {
  color: #fff;
  fill: #fff;
  position: absolute;
}
.modePC .tooltip-tmp .close svg { width: 16px; height: 16px; margin: 0; top: 3px; left: 5px; }
.modeSP .tooltip-tmp .close svg { width: 26px; height: 26px; margin: 0; bottom: 9px; left: 10px; }

.tooltip-content {
  display: none !important;
}
.tooltip {
  display: inline-block;
}
.debugWrap {
  position: fixed;
  right: 10px;
  bottom: 10px;
  padding: 20px;
  background-color: transparent;
  color: transparent;
}
.debugWrap:hover {
  background-color: #fff;
  color: #000;
  border: 3px dotted #000;
}
.debugWrap a {
  color: transparent;
  padding: 4px 10px;
  line-height: 40px;
  margin: 0 10px;
}
.debugWrap:hover a {
  color: #000;
  border: 1px solid #000;
}

/* menu business hour
==========================================*/
.menu-business-hours{
}
.modePC .menu-business-hours{
  margin-top: 10px;
}
.modeSP .menu-business-hours{
  width: 670px;
  margin: 0 auto 60px;
}

.menu-business-hours a{
  display: block;
  color: #999;
  background: #222;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.modePC .menu-business-hours a{
  padding: 8px 16px;
}
.modeSP .menu-business-hours a{
  font-size: 24px;
  padding: 30px 36px;
}

.menu-business-hours a .jp{}
.modePC .menu-business-hours a .jp{}
.modeSP .menu-business-hours a .jp{}

.menu-business-hours a .en{}
.modePC .menu-business-hours a .en{}
.modeSP .menu-business-hours a .en{}



/* footer business hour
==========================================*/
.foot-business-hours{
  text-align: center;
  background: #fff;
  margin: 0 auto;
}
.modePC .foot-business-hours{
  padding-top: 30px;
  width: 1120px;
}
.modeSP .foot-business-hours{
  padding-top: 30px;
  width: 690px;
}

.foot-business-hours a{
  font-weight: bold;
  text-decoration: underline;
  background: #ececec;
  display: block;
}
.modePC .foot-business-hours a{
  padding: 30px 0;
  font-size: 13px;
}
.modeSP .foot-business-hours a{
  padding: 50px 0;
  font-size: 26px;
}

.foot-business-hours .jp{}
.modePC .foot-business-hours .jp{}
.modeSP .foot-business-hours .jp{}

.foot-business-hours .en{}
.modePC .foot-business-hours .en{}
.modeSP .foot-business-hours .en{}



/* cookie-policy
==========================================*/
.cookie-policy{
  position: fixed;
  z-index: 20;
  background: #222;
}
.modePC .cookie-policy{
  bottom: 0;
  left: 0;
  width: 100%;
  min-width: 960px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}
.modeSP .cookie-policy{
  text-align: center;
  bottom: 0;
  left: 0;
  width: 100%;
}

.cookie-policy .cookie-policy__text{}
.modePC .cookie-policy .cookie-policy__text{
  padding: 15px 50px;
  font-size: 14px;
}
.modeSP .cookie-policy .cookie-policy__text{
  padding: 40px 30px 0 30px;
  font-size: 28px;
}

.cookie-policy .cookie-policy__text p{ color: #ddd; }
.modePC .cookie-policy .cookie-policy__text p{
  color: #ddd;
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: auto;
}
.cookie-policy .cookie-policy__text .jp{}
.modeSP .cookie-policy .cookie-policy__text .jp{
  margin-bottom: 10px;
}

.cookie-policy .cookie-policy__text .en{}
.cookie-policy .cookie-policy__text a{
  color: #fff;
  font-weight: bold;
}
.cookie-policy .cookie-policy__button{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  justify-content: center;
  color: #fff;
/*  background: #000;*/
}
.modePC .cookie-policy .cookie-policy__button{
  width: 280px;
  border-left: 1px solid #666;
  background-color: #222;
  color: #fff;
}
.modePC .cookie-policy .cookie-policy__button:hover{
  background-color: #666;
  color: #aaa;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}
.modeSP .cookie-policy .cookie-policy__button{
  padding-top: 30px;
  padding-bottom: 60px;
}

.cookie-policy .cookie-policy__button .cookie-check{
  text-align: center;
  font-weight: bold;
  line-height: 1.5;
  color: #aaa;
}
.modePC .cookie-policy .cookie-policy__button .cookie-check{ font-size: 16px; }
.modeSP .cookie-policy .cookie-policy__button .cookie-check{
  font-size: 32px;
  border-bottom: solid 1px #fff;
}

.cookie-policy .cookie-policy__button .cookie-check span{}
.modePC .cookie-policy .cookie-policy__button .cookie-check span{
  font-size: 12px;
  display: block;
}
.modeSP .cookie-policy .cookie-policy__button .cookie-check span{
  font-size:24px;
  padding-left: 24px;
}

.cookie-remove{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2001;
  background-color: rgba(255, 255, 0, 0.8);
  padding: 4px;
}

.have-a-cookie{
  display: none !important;
  width: 0;
  height: 0;
  pointer-events: none;
}



/* cookie ---- page unnder Information
 **** 1) 全ページを非表示
 **** 2) 表示ページを設定
==========================================*/
/*
 *  1) 全ページを非表示
 ***/
.cookie-policy--control{ pointer-events: none; }
.modePC .cookie-policy--control{ opacity: 0 }
.modeSP .cookie-policy--control{ opacity: 0 }

/*
 *  2) 表示ページを設定
 ***/
/*ROOT*/
#root .cookie-policy--control,
/*KUSHI*/
#kushi .cookie-policy--control,
#kushiConcept .cookie-policy--control,
/*LOUNGE*/
#lounge .cookie-policy--control,
#loungeDetail .cookie-policy--control,
#lounge-room101 .cookie-policy--control,
#lounge-bar .cookie-policy--control,
#lounge_archive .cookie-policy--control,
/*KITCHEN*/
#kitchen .cookie-policy--control,
#chefs-table .cookie-policy--control,
#kitchen-atmosphere .cookie-policy--control,
/*STORE*/
#store .cookie-policy--control
{
  pointer-events: auto;
  opacity: 1;
}



/*==========================================
 お知らせエリア 2023-05-02 システム改修用
==========================================*/
.alert-box{
  box-sizing: border-box;
  background: #ffe8e8;
  margin: 0 auto;
}
.modePC .alert-box{
  padding: 40px;
  width: 960px;
  margin-top: -20px;
  margin-bottom: 40px;
}
.modeSP .alert-box{
  margin-top: 40px;
  width: 684px;
  padding: 50px 40px;
}

.alert-box h2{}
.modePC .alert-box h2{
  margin-bottom: 4px;
}
.modeSP .alert-box h2{
  margin-bottom: 8px;
}

.alert-box p{}
.modePC .alert-box p{}
.modeSP .alert-box p{}

.alert-box a{ text-decoration: underline; }