/* CSS Document */

/*----------------------------------------------------
 basic
----------------------------------------------------*/
html,
body {
   width: 100%;
   height: 100%;
}
html {
   /*font-size: 62.5%;*/
   font-size: 10px;
   /*16÷1000×100*/
   /*font-size: 0.714285714285714vw;*/
}
#wrapper {
   font-size: 1.6rem;
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
   html {
      font-size: 0.78125vw;
   }
}

body {
   font-feature-settings: "palt";
   -webkit-font-smoothing: antialiased;
   color: #0b0b0b;
   /*font-family: 'Noto Sans JP', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;*/
   font-family: "Noto Serif JP", "游明朝", Yu Mincho, "ヒラギノ明朝 ProN W3",
      "HiraMinProN-W3", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E",
      "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
   /*font-size: 16px;
	font-size: 1.6rem;*/
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.75;
   letter-spacing: 0.1em;
   -webkit-text-size-adjust: none; /* フォントサイズ自動調整 */
   /*position: relative;*/
   width: 100%;
   /*text-align: center;*/
   word-wrap: break-word;
   overflow-wrap: break-word;

   background-color: #f3f3f4;
}

/*_:lang(x)::-ms-backdrop, body {
    font-family: "メイリオ", Meiryo, sans-serif;
} */

body {
}

/*	@media screen and (min-width: 769px) {
			body{
				min-width: 1024px;
		}
	}*/
@media screen and (max-width: 768px) {
   html {
      /*font-size: 62.5%;*/
      /*font-size: 2.6667vw;*/
      font-size: 3.125vw;
   }
   body {
      /*font-size: 13px;
			font-size: 1.3rem;*/
      /*-webkit-text-size-adjust: 100%;  フォントサイズ自動調整 */
   }
   #wrapper {
      font-size: 1.3rem;
      z-index: 1;
      -webkit-transition: 0.2s ease-in-out;
      -moz-transition: 0.2s ease-in-out;
      -o-transition: 0.2s ease-in-out;
      transition: 0.2s ease-in-out;
   }
   #wrapper.closeCon {
      border-right: 1px solid #ccc;
      -webkit-transform: translate(-280px);
      -moz-transform: translate(-280px);
      -ms-transform: translate(-280px);
      -o-transform: translate(-280px);
      transform: translate(-280px);
   }
}

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
}

a:link {
   color: #0b0b0b;
   text-decoration: none;
}
a:visited {
   color: #0b0b0b;
}
a:hover {
   text-decoration: none;
   color: #0b0b0b;
}
a:focus {
   outline: none;
}

a {
   -webkit-tap-highlight-color: rgba(200, 200, 200, 0.6);
}
a {
   outline: none;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}
/*a {
	-moz-transition: all 0.4s ease-in-out, color 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out, color 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out, color 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out, color 0.4s ease-in-out;
	transition: all 0.4s ease-in-out, color 0.4s ease-in-out;
}*/

img {
   width: auto;
   max-width: 100%;
   height: auto;
   vertical-align: top;
}

img:not([width]) {
   /*zoom: .5; /* Retinaディスプレイ対応のためimg要素は半分の大きさに */
}

p,
dl,
ol,
ul {
   margin: 0;
   list-style: none outside;
}
em {
   font-style: normal;
}
ul {
   text-align: left;
}

li {
   margin: 0;
   list-style: none outside;
}

h1,
h2,
h3,
h4,
p.txt,
ul,
dl {
   text-align: left;
}
h1,
h2,
h3,
h4 {
   font-weight: normal;
}
p.ttl {
   font-size: 100%;
   font-weight: 500;
   margin-bottom: 0.3em;
}
p.txt {
   margin-bottom: 2em;
   font-size: 100%;
}
p.img {
   margin-bottom: 2em;
}

@media screen and (max-width: 768px) {
   * {
      -webkit-appearance: none;
   }
}
a:hover {
   opacity: 0.6;
   filter: alpha(opacity=60);
   -ms-filter: "alpha( opacity=60 )";
   /*
    -webkit-transition: 0.2s ease-in-out;  
       -moz-transition: 0.2s ease-in-out;  
         -o-transition: 0.2s ease-in-out;  
            transition: 0.2s ease-in-out; 
	*/
}
@media screen and (max-width: 768px) {
   a:hover {
      opacity: 1;
      filter: alpha(opacity=100);
      -ms-filter: "alpha( opacity=100 )";
   }
}

/* ローディング
----------------------------------------- */
/*body #loader {
width: 292px;
height: 26px;
display: block;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 100;
background: url(../images/loading.svg) no-repeat;
-webkit-background-size: 292px;
-moz-background-size: 292px;
background-size: 292px;
}*/

body #fade {
   width: 100%;
   height: 100vh;
   display: block;
   background: #0b0b0b;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 10000;
}

/*body#top #fade {
position: relative;
top: auto;
left: auto;
z-index: 2;
}*/

/*wrapper ローディング用*/
body #wrapper {
   width: 100%;
   /*min-width: 100rem;*/
   margin: auto;
   /*overflow: auto;*/
   /*opacity: 0;*/
   filter: alpha(opacity=0);
   -ms-filter: "alpha( opacity=0 )";
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}

.loading {
   position: fixed;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.loading.page {
   position: fixed;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.loading span {
   display: block;
   opacity: 0;
   margin: 0;
   animation: loading 1.2s infinite ease-in-out alternate;
}
@keyframes loading {
   0% {
      opacity: 1;
   }
   100% {
      opacity: 1;
   }
}

#top .loading span {
   display: block;
   opacity: 0;
   margin: 0;
   -ms-filter: blur(1rem);
   filter: blur(1rem);
   animation: loading2 1.5s ease-in-out 1 alternate forwards;
}
@keyframes loading2 {
   0% {
      -ms-filter: blur(1rem);
      filter: blur(1rem);
      opacity: 0;
   }
   100% {
      filter: none;
      opacity: 1;
   }
}

#top #fade.is_scroll .loading span {
   display: block;
   opacity: 1;
   margin: 0;
   animation: loading3 1.5s ease-in-out 1 alternate forwards;
}
@keyframes loading3 {
   0% {
      filter: none;
   }
   100% {
      opacity: 0;
      -ms-filter: blur(1rem);
      filter: blur(1rem);
   }
}

#fade .scroll_arrow {
   position: absolute;
   bottom: 0;
   right: 3rem;
   transform: translate(0, 0);
   z-index: 2;
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   font-feature-settings: normal;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;

   opacity: 0;
   animation: loading_scroll 0.6s ease-in-out 1.8s 1 alternate forwards;
}
@keyframes loading_scroll {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

#fade.is_scroll .scroll_arrow {
   opacity: 1;
   animation: loading_scroll2 0.6s ease-in-out 1 alternate forwards;
}
@keyframes loading_scroll2 {
   0% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}
#fade .scroll_arrow a {
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   font-feature-settings: normal;
   font-size: 1.4rem;
   font-weight: 400;
   line-height: 1;
   height: 15rem;
   position: relative;
   display: block;
}
#fade .scroll_arrow a::before {
   content: "";
   display: block;
   position: absolute;
   bottom: 0;
   left: -0.4rem;
   -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
   width: 0.1rem;
   height: 15rem;
   background-color: #000000;
   margin-top: 1.5rem;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;

   animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl {
   0% {
      transform: scale(1, 0);
      transform-origin: 0 0;
   }
   50% {
      transform: scale(1, 1);
      transform-origin: 0 0;
   }
   50.1% {
      transform: scale(1, 1);
      transform-origin: 0 100%;
   }
   100% {
      transform: scale(1, 0);
      transform-origin: 0 100%;
   }
}

@media screen and (max-width: 768px) {
   body #wrapper {
      min-width: 100%;
   }
   /* #top .loading span {
  width: 8.6rem;
} */
   body #fade {
      z-index: 1000;
   }
}

/* アニメーション
----------------------------------------- */
.anim {
   opacity: 0;
   transform: translateY(2.5rem);
   /*-webkit-transition: opacity 1.2s cubic-bezier(0.5, 1, 0.89, 1) 0.2s, -webkit-transform 1.2s cubic-bezier(0.33, 1, 0.68, 1) 0.2s;
  -moz-transition: opacity 1.2s cubic-bezier(0.5, 1, 0.89, 1) 0.2s, -moz-transform 1.2s cubic-bezier(0.33, 1, 0.68, 1) 0.2s;
  transition: opacity 1.2s cubic-bezier(0.5, 1, 0.89, 1) 0.2s, transform 1.2s cubic-bezier(0.33, 1, 0.68, 1) 0.2s;*/
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}
.anim._do_anim {
   opacity: 1;
   transform: none;
}
@media print {
   .anim {
      opacity: 1;
      transform: none;
   }
}

/* 画像、テキスト振り分け
----------------------------------------- */
.pcShow {
}
.spShow {
   display: none !important;
}

@media screen and (max-width: 768px) {
   .pcShow {
      display: none !important;
   }
   .spShow {
      display: block !important;
   }
   .spShow.br {
      display: inline;
   }
}
.pcShow_tw {
}
.twShow {
   display: none;
}
@media screen and (max-width: 768px) {
   .pcShow_tw {
      display: none;
   }
   .twShow {
      display: block;
   }
}
.dsnone {
   display: none;
}

/* スペース
----------------------------------------- */
.mb0 {
   margin-bottom: 0 !important;
}
.mb1em {
   margin-bottom: 1em !important;
}
.mb2em {
   margin-bottom: 2em !important;
}
.mb3em {
   margin-bottom: 3em !important;
}
.mb4em {
   margin-bottom: 4em !important;
}
.mt1em {
   margin-top: 1em !important;
}
.mt2em {
   margin-top: 2em !important;
}
.mt3em {
   margin-top: 3em !important;
}
.mt4em {
   margin-top: 4em !important;
}
/* フォント
----------------------------------------- */
.fAbc {
   font-family: century-old-style-std, serif;
   font-weight: 400;
   /*
Light 300
・Regular 400
Medium 500
Semi-bold 600
・Bold 700
*/
}

.fMin {
   font-family: "游明朝", Yu Mincho, "Noto Serif", "ヒラギノ明朝 ProN W3",
      "HiraMinProN-W3", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E",
      "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.fGot {
   font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic,
      "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
      sans-serif;
}

/* 文字
----------------------------------------- */
.bold {
   font-weight: 500;
}
.fwNormal {
   font-weight: normal;
}
.fs12 {
   font-size: 1.2rem;
}
.fs13 {
   font-size: 1.3rem;
}
.fs14 {
   font-size: 1.4rem;
}
.fs15 {
   font-size: 1.5rem;
}
.fs16 {
   font-size: 1.6rem;
}
.fs17 {
   font-size: 1.7rem;
}
.fs18 {
   font-size: 1.8rem;
}
.fs19 {
   font-size: 1.9rem;
}
.fs21 {
   font-size: 2.1rem;
}
.fs22 {
   font-size: 2.2rem;
}
.fs24 {
   font-size: 2.4rem;
}
.fs26 {
   font-size: 2.6rem;
}
.fs28 {
   font-size: 2.8rem;
}

@media screen and (max-width: 768px) {
}

.txtC {
   text-align: center !important;
}
.txtL {
   text-align: left !important;
}
.txtR {
   text-align: right !important;
}
/*float*/
.fL {
   float: left;
}
.fR {
   float: right;
}

.fc_pink {
   color: #feafdd;
}

.fc_blu {
   color: #0b0b0b;
}

.fc_red {
   color: #ff0000;
}

/* flexCover
----------------------------------------- */
.flexCover {
   /*overflow: hidden;*/
   display: -webkit-box;
   display: -moz-box;
   display: -ms-box;
   display: -webkit-flexbox;
   display: -moz-flexbox;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   display: flex;
   -webkit-box-lines: multiple;
   -moz-box-lines: multiple;
   -webkit-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   justify-content: space-between;
}
.flexCover.colum2 > li {
   width: 48%;
}
.flexCover.colum73 > li.txt {
   width: 68%;
}
.flexCover.colum73 > li.img {
   width: 30%;
}
.flexCover.colum3 > li {
   width: 32%;
}
.flexCover.colum3::after {
   content: "";
   display: block;
   width: 30%;
}

.flexCover.colum4 > li {
   width: 23.5%;
}
.flexCover.colum4::before {
   content: "";
   display: block;
   width: 23.5%;
   order: 1;
}
.flexCover.colum4::after {
   content: "";
   display: block;
   width: 23.5%;
}

.flexCover.colum5 > li {
   width: 20%;
}

.flexCover.colum6 > li {
   width: 15%;
}

.flexCover.colum1 > li {
   width: 100%;
}
/*.flexCover li img,
.flexCover li.txt{
	width: 100%;
	height: auto;
}*/
.flexCover.flexS {
   justify-content: flex-start;
}

@media screen and (max-width: 768px) {
   .flexCover.colum2 > li {
      width: 100%;
   }
   .flexCover.colum3 > li {
      width: 100%;
   }
   .columBox.colum2 > li {
      width: 100%;
   }
   .flexCover.colum4 > li {
      width: 48%;
   }
   .flexCover.colum6 > li {
      width: 48%;
   }
   .flexCover.colum73 > li.txt {
      width: 100%;
   }
   .flexCover.colum73 > li.img {
      width: 100%;
   }
}

.column2_wrap > li.left_navi {
   width: 100%;
   max-width: 175px;
}

.column2_wrap > li.main_con {
   width: 100%;
   max-width: 680px;
}

.column2_wrap > li.left_navi h3 {
   font-size: 1.4rem;
   border-bottom: 1px solid #404040;
   padding-bottom: 1em;
   margin-bottom: 2em;
}

.column2_wrap > li.left_navi .categories li {
   font-size: 1.4rem;
   margin-bottom: 1em;
}

@media screen and (max-width: 768px) {
   .column2_wrap > li.left_navi {
      width: 100%;
      max-width: 100%;
      margin-bottom: 40px;
   }

   .column2_wrap > li.main_con {
      width: 100%;
      max-width: 100%;
   }
}

/* header .fixed
----------------------------------------- */
/*header .fixed{
	position: fixed;
	width: 100%;
}
	@media screen and (max-width: 768px) {
		header .fixed{
			position: static;
		}
	}*/

/* header
----------------------------------------- */
header {
   width: auto;
   position: relative;
}

header .side_fix_navi {
   position: fixed;
   top: 50%;
   right: 0;
   transform: translate(100%, -50%);
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
   z-index: 1001;
}
header .side_fix_navi.is_show {
   transform: translate(0, -50%);
}

header .side_fix_navi .side_fix_navi_list {
}
header .side_fix_navi .side_fix_navi_list > li:not(:last-child) {
   border-bottom: 1px solid #ffffff;
}
header .side_fix_navi .side_fix_navi_list > li a {
   width: 6rem;
   height: 12rem;
   display: flex;
   align-items: center;
   justify-content: center;
   align-content: center;
   flex-wrap: wrap;
   background-color: #008160;
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   font-feature-settings: normal;
}
header .side_fix_navi .side_fix_navi_list > li:first-child a {
   border-radius: 0.8rem 0 0 0;
}
header .side_fix_navi .side_fix_navi_list > li:last-child a {
   border-radius: 0 0 0 0.8rem;
}

header .side_fix_navi .side_fix_navi_list > li a.booking {
   background-color: #cae3f3;
   color: #0b0b0b;
}
header .side_fix_navi .side_fix_navi_list > li a.schedule {
   background-color: #ffdef0;
   color: #f094a4;
}
header .side_fix_navi .side_fix_navi_list > li a.line {
   background-color: #06c755;
   color: #ffffff;
}
header .side_fix_navi .side_fix_navi_list > li a.line img {
   width: 3rem;
   margin-bottom: 0;
}

header .side_fix_navi .side_fix_navi_list > li a span {
   font-size: 1.2rem;
   line-height: 1;
   font-weight: 600;
   /*color: #FFFFFF;*/
}

#g_navi_wrap {
   width: 100%;
   height: 15rem;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 102;
   transform: translateY(-100%);
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}
#g_navi_wrap.is_show {
   transform: translateY(0);
}

#g_navi_wrap .inner {
   width: 100%;
   height: 100%;
   padding: 0 4.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
}

#g_navi_wrap .logo {
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}
#g_navi_wrap .logo svg {
   max-width: 100%;
   height: auto;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}

#g_navi_wrap .logo .logo_svg .cls-2 {
   fill: #ffffff;
   transition: all 0.6s;
}
#g_navi_wrap.is_show .logo .logo_svg .cls-2 {
   fill: #0b0b0b;
}

#g_navi_wrap.is_show .logo {
}
#g_navi_wrap.is_show .logo svg {
}

#g_navi_wrap h1 {
}
#g_navi_wrap h1 a {
   display: block;
}
#g_navi_wrap h1 img {
   width: auto;
   height: auto;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}
#g_navi_wrap.is_show h1 img {
   /*width: 100%;
    height: auto;*/
}

#g_navi_wrap .navi_wrap {
}

#g_navi_wrap .navigation {
   flex-wrap: nowrap;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}

#g_navi_wrap .navigation > li {
   width: 1.45rem;
   line-height: 1;
}
#g_navi_wrap .navigation > li:not(:last-child) {
   margin-right: 3rem;
}
#g_navi_wrap .navigation > li a {
   font-size: 1.45rem;
   letter-spacing: 0.1em;
   color: #f5f5f5;
   width: 1.45rem;
   height: 12.8rem;
   position: relative;
   display: inline-flex;
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   font-feature-settings: normal;
}
#g_navi_wrap .navigation > li a span {
   display: flex;
   white-space: nowrap;
   position: absolute;
   top: 0;
   left: 0;
}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1080px) {
}

.drawer--right .drawer-hamburger {
   top: 4rem;
   right: 4.5rem;
   width: 4.5rem;
   padding: 0;
   margin: 0;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   flex-wrap: wrap;
   align-content: center;
   /*background-color: #FFFFFF;*/
   transform: translateY(calc(-100% + -4rem));
   z-index: 105;
   transition: all 0.6s;
}
.drawer--right.is_show .drawer-hamburger {
   transform: translateY(0);
}

.drawer--right .drawer-hamburger .drawer-toggle {
   width: 100%;
   padding: 0;
   border: none;
   background-color: transparent;
}

.drawer .drawer-hamburger-icon,
.drawer .drawer-hamburger-icon:before,
.drawer .drawer-hamburger-icon:after {
   width: 100%;
   max-width: 4rem;
   display: block;
   height: 0.1rem;
   -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
   transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.drawer .drawer-hamburger-icon {
   background-color: transparent;
   margin-top: 0.75rem;
}
.drawer .drawer-hamburger-icon:before {
   background-color: #0b0b0b;
}
.drawer .drawer-hamburger-icon:after {
   background-color: #0b0b0b;
}
.drawer.is_show .drawer-hamburger-icon {
   background-color: transparent;
}
.drawer.is_show .drawer-hamburger-icon:before {
   background-color: #0b0b0b;
}
.drawer.is_show .drawer-hamburger-icon:after {
   background-color: #0b0b0b;
}
.drawer.drawer-open .drawer-hamburger-icon {
   background-color: transparent;
}
.drawer.drawer-open .drawer-hamburger-icon:before {
   background-color: #0b0b0b;
   -webkit-transform: rotate(40deg);
   transform: rotate(40deg);
}
.drawer.drawer-open .drawer-hamburger-icon:after {
   background-color: #0b0b0b;
   -webkit-transform: rotate(-40deg);
   transform: rotate(-40deg);
}

.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
   position: absolute;
   top: -0.75rem;
   left: 0;
   content: " ";
}

.drawer-hamburger-icon:after {
   top: 0.75rem;
}

.drawer--right .drawer-hamburger:hover {
   opacity: 1;
}

.drawer--right .drawer-nav .drawer-hamburger {
   display: none;
}
.drawer--right.drawer-open .drawer-nav .drawer-hamburger {
   display: block;
}

.drawer .drawer-hamburger .txt {
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   font-size: 1.6rem;
   letter-spacing: 0.125rem;
   line-height: 1;
   margin: auto;
   margin-top: 3rem;
}
.drawer .drawer-hamburger .txt.close {
   display: none;
}
.drawer--right.drawer-open .drawer-hamburger .txt.close {
   display: block;
}
.drawer--right.drawer-open .drawer-hamburger .txt.menu {
   display: none;
}

.drawer--right .drawer-nav {
   width: 100%;
   max-width: 96rem;
   right: -100%;
   padding: 0;
   height: 100vh;
   overflow: scroll;
   background-color: #f3f3f4;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 103;
}

.drawer--right .drawer-nav .navi_wrap {
   width: 100%;
   max-width: 96rem;
   margin: auto;
   height: 100%;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   justify-content: center;
   padding: 2rem;
   position: relative;
}

.drawer-nav .navigation_layout {
   display: flex;
   flex-flow: row-reverse;
   justify-content: center;
   width: 100%;
   margin: auto;
}
.drawer-nav .navigation_layout .navi {
}
.drawer-nav .navigation_layout .navi:not(:last-child) {
   margin-left: 9rem;
}
.drawer-nav .navigation_layout .navi a {
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   line-height: 1;
}
.drawer-nav .navigation_layout .navi a span {
   font-size: 2.4rem;
   letter-spacing: 0.25rem;
   line-height: 1;
   font-weight: bold;
}
.drawer-nav .navigation_layout .navi.product a span {
   font-size: 2rem;
   letter-spacing: 0.125rem;
   line-height: 1;
   font-weight: 500;
}
.drawer-nav .navigation_layout .navi.product a span span {
   color: #c83c00;
   margin-top: 0.5rem;
}

.drawer-overlay {
   position: fixed;
   z-index: 100;
   top: 0;
   left: 0;
   display: none;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0);
}

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 768px) {
   header {
      width: 100%;
      padding-top: 0;
   }
   #g_navi_wrap {
      height: 8rem;
   }
   #g_navi_wrap .inner {
      /*width: 26rem;*/
      margin: auto;
      padding: 0 2rem;
      position: relative;
   }

   #g_navi_wrap .logo {
      width: 4rem;
   }

   #g_navi_wrap .navi_wrap {
      position: absolute;
      top: 50%;
      right: 3rem;
      transform: translate(0, -50%);
   }

   #g_navi_wrap .navigation > li {
      width: 1.1rem;
   }
   #g_navi_wrap .navigation > li:not(:last-child) {
      margin-right: 1.5rem;
   }
   #g_navi_wrap .navigation > li a {
      font-size: 1.15rem;
      width: 1.1rem;
      height: 9.7rem;
      position: relative;
      display: inline-flex;
   }
   #g_navi_wrap .navigation > li a span {
      display: flex;
      white-space: nowrap;
      position: absolute;
      top: 0;
      left: 0;
   }
}

button {
   padding: 0;
   border: none;
   outline: none;
   font: inherit;
   color: inherit;
   background: none;
}

/* .drawer カスタマイズ
----------------------------------------- */
@media screen and (max-width: 768px) {
   .drawer--right .drawer-hamburger {
      top: 2.5rem;
      right: 2rem;
      width: 3rem;

      transform: translateY(calc(-100% + -2.5rem));
   }

   .drawer .drawer-hamburger .txt {
      font-size: 1rem;
      margin-top: 1.5rem;
   }

   .drawer .drawer-hamburger-icon {
      margin-top: 0.5rem;
   }
   .drawer-hamburger-icon:before,
   .drawer-hamburger-icon:after {
      top: -0.5rem;
   }
   .drawer-hamburger-icon:after {
      top: 0.5rem;
   }

   .drawer--right .drawer-nav {
      width: 100%;
      right: -100%;
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      overflow: hidden;
   }

   .drawer-nav .navigation_layout .navi:not(:last-child) {
      margin-left: 3.5rem;
   }
   .drawer-nav .navigation_layout .navi a span {
      font-size: 1.2rem;
   }
   .drawer-nav .navigation_layout .navi.product a span {
      font-size: 1.1rem;
   }
}

/* .pure-drawer カスタマイズ
----------------------------------------- */
.pure-drawer ul {
   padding: 20px;
   margin-top: 120px;
}

.pure-drawer li {
   padding-bottom: 20px;
}

.pure-drawer li img {
   width: auto;
   max-width: 100%;
}

/* layout
----------------------------------------- */
main {
   display: block;
}

#conWrap {
   clear: both;
   padding: 0px;
   position: relative;
   overflow: hidden;
}

#conWrap section {
   position: relative;
}

#conWrap .inner {
   width: -webkit-calc(1100 / 1400 * 100%);
   width: calc(1100 / 1400 * 100%);
   max-width: none;
   margin-left: auto;
   margin-right: auto;
   padding-top: 0;
   padding-bottom: 0;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}

.con_ttl {
   width: 100%;
   font-size: 3rem;
   line-height: 1;
   font-weight: 300;
   color: #0b0b0b;
   position: relative;
   margin-bottom: 5rem;
   text-align: center;
}
.con_ttl span {
   display: block;
   font-size: 1.4rem;
   line-height: 1;
   margin-top: 2rem;
   color: #ffffff;
   text-align: center;
}

.con_layout {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
}
.con_layout > .txt_wrap {
   width: -webkit-calc(500 / 1400 * 100%);
   width: calc(500 / 1400 * 100%);
   margin-left: calc(100 / 1400 * 100%);
   margin-right: calc(100 / 1400 * 100%);
   position: relative;
   z-index: 1;
}
.con_layout > .txt_wrap::after {
   content: "";
   display: block;
   width: 90%;
   padding-top: 62%;
   background-color: rgba(138, 209, 237, 0.1);
   z-index: -1;
   position: absolute;
   top: -3rem;
   left: 4rem;
}

.con_layout > .txt_wrap h2 {
   font-size: 2.8rem;
   letter-spacing: 0.2em;
   color: #0b0b0b;
   line-height: 1.45;
   margin-bottom: 3rem;
}
.con_layout > .txt_wrap h2 span {
   display: block;
   font-size: 1.8rem;
   margin-top: 1rem;
}
.con_layout > .txt_wrap .txt {
   font-size: 1.4rem;
   line-height: 2;
}
.con_layout > .img_wrap {
   width: -webkit-calc(680 / 1400 * 100%);
   width: calc(680 / 1400 * 100%);
   z-index: 2;
}
.con_layout > .img_wrap .img {
   width: 100%;
   padding-top: 72.4637%;
   background-position: center center;
   background-size: cover;
}

.f_red {
   font-size: 3.8rem;
   font-weight: 500;
   color: #c36363;
}
.highlight {
   position: relative;
   z-index: 1;
}
.highlight::before {
   content: "";
   display: block;
   width: 100%;
   height: 1rem;
   background-color: #fff000;
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: -1;
}

@media screen and (max-width: 768px) {
   #layout {
      padding-right: 0;
   }
   #layout::after {
      display: none;
   }
   main {
      width: 100%;
   }
   #conWrap::after {
      width: 35.8rem;
      height: 82rem;
      top: 0;
      right: -26rem;
   }
   #conWrap .inner {
      width: 33rem;
   }

   .con_ttl {
      font-size: 2.2rem;
      line-height: 1.4;
      margin-bottom: 4rem;
   }
   .con_ttl span {
      font-size: 1.2rem;
      margin-top: 1rem;
   }

   .con_layout {
      flex-wrap: wrap;
      flex-flow: column-reverse;
   }
   .con_layout > .txt_wrap {
      width: 32.5rem;
      margin: auto;
      text-align: center;
   }
   .con_layout > .txt_wrap::after {
      content: "";
      display: block;
      width: 90%;
      padding-top: 70%;
      background-color: rgba(138, 209, 237, 0.1);
      z-index: -1;
      position: absolute;
      top: -1rem;
      left: 2rem;
   }

   .con_layout > .txt_wrap h2 {
      font-size: 2.2rem;
      margin-bottom: 2rem;
   }
   .con_layout > .txt_wrap h2 span {
      font-size: 1.6rem;
      margin-top: 1rem;
   }
   .con_layout > .txt_wrap .txt {
      font-size: 1.4rem;
      line-height: 2;
      text-align: left;
   }
   .con_layout > .img_wrap {
      width: 100%;
      margin-bottom: 3rem;
   }
}

#page_ttl_wrap {
   width: 100%;
   position: relative;
   padding-top: 0;
}
#page_ttl_wrap .inner {
   width: 100%;
}

#page_ttl_wrap .img_wrap {
   width: 100%;
   height: 66rem;
   background-position: center center;
   background-size: cover;
}
#page_ttl_wrap .img_wrap.small {
   height: 30rem;
}
#page_ttl_wrap h1 {
   position: absolute;
   top: 50%;
   left: calc(280 / 1920 * 100%);
   transform: translate(0, -50%);
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
   /*font-feature-settings: normal;*/
   z-index: 2;
   /*filter: drop-shadow(0 0 8px rgba(0,0,0,.60)) drop-shadow(0 0 8px rgba(0,0,0,.30));*/
}
#page_ttl_wrap h1 span {
   color: #ffffff;
   white-space: nowrap;
   font-size: 4.5rem;
   font-weight: bold;
   letter-spacing: 0.25em;
}

@media screen and (max-width: 768px) {
   #page_ttl_wrap .img_wrap {
      height: 30rem;
   }
   #page_ttl_wrap h1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   }
   #page_ttl_wrap h1 span {
      font-size: 2.2rem;
      letter-spacing: 0.2em;
   }
}

/* modal
----------------------------------------- */
#item .remodal-wrapper {
   z-index: 999999;
}
.modal_con {
   width: 100%;
   max-width: 66rem;
   padding: 4rem;
   margin: auto;
   background-color: #ffffff;
}

.modal_con_list {
   width: 100%;
}
.modal_con_list > li.img {
   width: -webkit-calc(170 / 580 * 100%);
   width: calc(170 / 580 * 100%);
   text-align: center;
}
.modal_con_list > li.img img.fukuinoaji {
   width: 7.3rem;
   height: auto;
}
.modal_con_list > li.img img.smile_care {
   width: 12rem;
   height: auto;
}
.modal_con_list > li.txt {
   width: -webkit-calc(410 / 580 * 100%);
   width: calc(410 / 580 * 100%);
}
.modal_con_list h3 {
   font-size: 1.6rem;
   font-weight: 500;
   margin-bottom: 1rem;
}
.modal_con_list .txt_wrap {
   font-size: 1.3rem;
}

@media screen and (max-width: 768px) {
   .modal_con {
      height: 70vh;
      overflow: auto;
   }
   .modal_con_list > li.img {
      width: 100%;
      text-align: center;
      margin-bottom: 2rem;
   }
   .modal_con_list > li.img img.fukuinoaji {
      width: 7.3rem;
      height: auto;
   }
   .modal_con_list > li.img img.smile_care {
      width: 12rem;
      height: auto;
   }
   .modal_con_list > li.txt {
      width: 100%;
   }
   #item .remodal-close {
      top: -50px;
   }
}

/* footer
----------------------------------------- */
footer {
   position: relative;
   z-index: 102;
   width: 100%;
   overflow: hidden;
   background-color: #0b0b0b;
   color: #ffffff;
}

footer > .inner {
   width: 100%;
   max-width: none;
   margin: auto;
   position: relative;
   padding: 6rem;
   padding-bottom: 7rem;
}

footer a {
   color: #f5f5f5;
}

footer .logo_wrap {
}
footer .logo_wrap a {
   display: inline-flex;
   align-items: center;
}
footer .logo_wrap img {
   width: 3.9rem;
   height: auto;
}
footer .logo_wrap span {
   font-size: 2.2rem;
   letter-spacing: 0.08em;
   color: #c8c8c8;
   margin-left: 1rem;
}

footer .copyright {
   margin-top: 2rem;
   font-size: 1.1rem;
   letter-spacing: 0.08em;
   color: #f5f5f5;
}

footer .att_txt {
   margin: auto;
   margin-top: 1.5rem;
   font-size: 1rem;
   letter-spacing: 0.08em;
   color: #f5f5f5;
}

#page_top {
   position: fixed;
   bottom: 3rem;
   right: 3rem;
   -webkit-transform: translate(0 0);
   transform: translate(0, 0);
   z-index: 1001;

   display: none;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}
#page_top:hover {
   bottom: 3.5rem;
}
#page_top a {
   width: 4.5rem;
   height: 4.5rem;
   background-color: #0b0b0b;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
}
#page_top a p {
   text-align: center;
}
#page_top a img {
   display: block;
   width: 1.2rem;
   height: auto;
   margin: auto;
}
#page_top a span {
   display: block;
   font-size: 1.2rem;
   letter-spacing: 0.1em;
   line-height: 1;
   margin-top: 0.6rem;
   color: #ffffff;
}

@media screen and (max-width: 768px) {
   footer {
      width: 100%;
   }

   footer > .inner {
      width: 100%;
      margin: auto;
      padding: 5.5rem 4rem;
   }

   footer .logo_wrap img {
      width: 3.5rem;
      height: auto;
   }
   footer .logo_wrap span {
      font-size: 1.6rem;
   }
   footer .copyright {
      margin-top: 2rem;
      font-size: 1rem;
   }
   footer .att_txt {
      font-size: 1rem;
      letter-spacing: 0.05em;
   }

   #page_top {
      bottom: 1.5rem;
      right: 1.5rem;
   }
   #page_top:hover {
      bottom: 2.5rem;
   }
   #page_top a {
      width: 3rem;
      height: 3rem;
   }
   #page_top a span {
      font-size: 0.8rem;
      margin-top: 0.5rem;
   }
}

/* #breadcrumbs
----------------------------------------- */
#breadcrumbs {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
   margin: auto;
   padding: 1.1rem 0;
}

body.single #breadcrumbs {
   background-color: transparent;
}

#breadcrumbs > span {
   width: -webkit-calc(1200 / 1400 * 100%);
   width: calc(1200 / 1400 * 100%);
   margin: auto;
}

#breadcrumbs span {
   font-weight: 500;
   font-size: 1.4rem;
   letter-spacing: 0.1em;
   color: #0b0b0b;
   padding: 0;
   text-align: left;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}

#breadcrumbs span.arrow {
   padding: 0 1rem;
}

#breadcrumbs span.breadcrumb_last {
   color: #a5a5a5;
}

#breadcrumbs a {
   color: #0b0b0b !important;
   -webkit-transition: all 0.6s;
   transition: all 0.6s;
}
#breadcrumbs a:hover {
   color: #a5a5a5 !important;
   opacity: 1;
}

@media screen and (max-width: 768px) {
   #breadcrumbs {
      padding-top: 0;
   }
   body.single #breadcrumbs {
      padding-top: 0;
   }
   #breadcrumbs > span {
      width: -webkit-calc(315 / 375 * 100%);
      width: calc(315 / 375 * 100%);
      margin: auto;
   }
   #breadcrumbs span {
      font-size: 1.2rem;
   }
}

.arrow._type1 {
   position: relative;
   display: inline-block;
   text-align: left;
}
.arrow._type1::before,
.arrow._type1::after {
   content: "";
   display: inline-block;
   height: 0.4375rem;
   box-sizing: border-box;
   position: absolute;
   bottom: 0.55em;
}
.arrow._type1::before {
   width: 5.5rem;
   border-bottom: 1px solid #000;
   -webkit-transition: width 0.5s;
   -moz-transition: width 0.5s;
   transition: width 0.5s;
}
.arrow._type1::after {
   width: 0.625rem;
   -webkit-transition: left 0.5s, right 0.5s;
   -moz-transition: left 0.5s, right 0.5s;
   transition: left 0.5s, right 0.5s;
}
.arrow._type1:not(._reverse) {
   padding-right: 8rem;
}
.arrow._type1:not(._reverse)::before,
.arrow._type1:not(._reverse)::after {
   transform: translate(100%, -66%);
}
.arrow._type1:not(._reverse)::before {
   right: 7.375rem;
}
.arrow._type1:not(._reverse)::after {
   right: 1.875rem;
   border-bottom: 0.4375rem solid #000;
   border-right: 0.625rem solid transparent;
}
.arrow._type1._reverse {
   padding-left: 8rem;
}
.arrow._type1._reverse::before,
.arrow._type1._reverse::after {
   transform: translate(-100%, -66%);
}
.arrow._type1._reverse::before {
   left: 7.375rem;
}
.arrow._type1._reverse::after {
   left: 1.875rem;
   border-bottom: 0.4375rem solid #000;
   border-left: 0.625rem solid transparent;
}
.arrow._type1._white::before {
   border-color: #f5f5f5;
}
.arrow._type1._white::after {
   border-bottom-color: #f5f5f5;
}
@media screen and (max-width: 767px) {
   .arrow._type1 {
      line-height: 1.75em;
   }
   .arrow._type1::before,
   .arrow._type1::after {
      height: 0.46875rem;
      bottom: 0.45em;
   }
   .arrow._type1::before {
      width: 4.5833333333rem;
   }
   .arrow._type1::after {
      width: 0.6770833333rem;
   }
   .arrow._type1:not(._sp_mini):not(._reverse) {
      padding-right: 6.4166666667rem;
   }
   .arrow._type1:not(._sp_mini):not(._reverse)::before {
      right: 5.4166666667rem;
   }
   .arrow._type1:not(._sp_mini):not(._reverse)::after {
      right: 0.8333333333rem;
   }
   .arrow._type1:not(._sp_mini)._reverse {
      padding-left: 6.4166666667rem;
   }
   .arrow._type1:not(._sp_mini)._reverse::before {
      left: 5.4166666667rem;
   }
   .arrow._type1:not(._sp_mini)._reverse::after {
      left: 0.8333333333rem;
   }
   .arrow._type1._sp_mini:not(._reverse) {
      padding-right: 4.3333333333rem;
   }
   .arrow._type1._sp_mini:not(._reverse)::before {
      right: 3.3333333333rem;
      width: 2.5rem;
   }
   .arrow._type1._sp_mini:not(._reverse)::after {
      right: 0.8333333333rem;
   }
   .arrow._type1._sp_mini._reverse {
      padding-left: 4.3333333333rem;
   }
   .arrow._type1._sp_mini._reverse::before {
      left: 3.3333333333rem;
      width: 2.5rem;
   }
   .arrow._type1._sp_mini._reverse::after {
      left: 0.8333333333rem;
   }
}

a.arrow._type1:active::before,
a.arrow._type1:hover::before {
   width: 7.375rem;
}
a.arrow._type1:active:not(._reverse)::after,
a.arrow._type1:hover:not(._reverse)::after {
   right: 0.625rem;
}
a.arrow._type1:active._reverse::after,
a.arrow._type1:hover._reverse::after {
   left: 0.625rem;
}
@media screen and (max-width: 767px) {
   a.arrow._type1:active:not(._sp_mini)::before,
   a.arrow._type1:hover:not(._sp_mini)::before {
      width: 5.4166666667rem;
   }
   a.arrow._type1:active:not(._sp_mini):not(._reverse)::after,
   a.arrow._type1:hover:not(._sp_mini):not(._reverse)::after {
      right: 0.6770833333rem;
   }
   a.arrow._type1:active:not(._sp_mini)._reverse::after,
   a.arrow._type1:hover:not(._sp_mini)._reverse::after {
      left: 0.6770833333rem;
   }
   a.arrow._type1:active._sp_mini::before,
   a.arrow._type1:hover._sp_mini::before {
      width: 3.3333333333rem;
   }
   a.arrow._type1:active._sp_mini:not(._reverse)::after,
   a.arrow._type1:hover._sp_mini:not(._reverse)::after {
      right: 0.6770833333rem;
   }
   a.arrow._type1:active._sp_mini._reverse::after,
   a.arrow._type1:hover._sp_mini._reverse::after {
      left: 0.6770833333rem;
   }
}

.btn {
   position: relative;
   display: inline-flex;
   justify-content: flex-start;
   align-items: center;
   text-align: left;
   box-sizing: border-box;
   outline: none;
}
.btn._type1 {
   border: 1px solid #000;
   font-size: 1.0625em;
   line-height: 1.5384615385em;
   letter-spacing: 0.08em;
   font-weight: bold;
   min-width: 16.4705882353em;
   min-height: 3.5294117647em;
   padding: 0.9411764706em 1.7647058824em;
   padding-right: 5em;
}
.btn._type1::before,
.btn._type1::after {
   content: "";
   display: inline-block;
   width: 5.5rem;
   height: 0.4375rem;
   box-sizing: border-box;
   position: absolute;
   top: 50%;
}
.btn._type1::before {
   width: 5.5rem;
   border-bottom: 1px solid #000;
   -webkit-transition: width 0.5s;
   -moz-transition: width 0.5s;
   transition: width 0.5s;
}
.btn._type1::after {
   width: 0.625rem;
   -webkit-transition: left 0.5s, right 0.5s;
   -moz-transition: left 0.5s, right 0.5s;
   transition: left 0.5s, right 0.5s;
}
.btn._type1:not(._reverse)::before,
.btn._type1:not(._reverse)::after {
   transform: translate(100%, -66%);
}
.btn._type1:not(._reverse)::before {
   right: 2.75rem;
}
.btn._type1:not(._reverse)::after {
   right: -2.125rem;
   border-bottom: 0.4375rem solid #000;
   border-right: 0.625rem solid transparent;
}
.btn._type1._reverse::before,
.btn._type1._reverse::after {
   transform: translate(-100%, -66%);
}
.btn._type1._reverse::before {
   left: 2.75rem;
}
.btn._type1._reverse::after {
   left: -2.125rem;
   border-bottom: 0.4375rem solid #000;
   border-left: 0.625rem solid transparent;
}
.btn._type1._white {
   border-color: #f5f5f5;
}
.btn._type1._white::before {
   border-color: #f5f5f5;
}
.btn._type1._white::after {
   border-bottom-color: #f5f5f5;
}
.btn._type1:active::before,
.btn._type1:hover::before {
   width: 7.375rem;
}
.btn._type1:active:not(._reverse)::after,
.btn._type1:hover:not(._reverse)::after {
   right: -4rem;
}
.btn._type1:active._reverse::after,
.btn._type1:hover._reverse::after {
   left: -4rem;
}
@media screen and (max-width: 767px) {
   .btn._type1 {
      text-align: left;
      justify-content: flex-start;
   }
   .btn._type1::before,
   .btn._type1::after {
      height: 0.46875rem;
   }
   .btn._type1::before {
      width: 4.5833333333rem;
   }
   .btn._type1::after {
      width: 0.6770833333rem;
   }
   .btn._type1:not(._reverse)::before {
      right: 2rem;
   }
   .btn._type1:not(._reverse)::after {
      right: -1.90625rem;
   }
   .btn._type1._reverse::before {
      left: 2rem;
   }
   .btn._type1._reverse::after {
      left: -1.90625rem;
   }
   .btn._type1:active::before,
   .btn._type1:hover::before {
      width: 5.4166666667rem;
   }
   .btn._type1:active:not(._reverse)::after,
   .btn._type1:hover:not(._reverse)::after {
      right: -2.7395833333rem;
   }
   .btn._type1:active._reverse::after,
   .btn._type1:hover._reverse::after {
      left: -2.7395833333rem;
   }
}