@charset "UTF-8";
/* Scss Document */
/*============================================================================
	a day in SUMIDA
=============================================================================*/
@font-face { font-family: 'futura'; src: url("../fonts/Futura-Med.eot"); src: url("../fonts/Futura-Med.eot") format("embedded-opentype"), url("../fonts/Futura-Med.ttf") format("truetype"), url("../fonts/Futura-Med.woff") format("woff"), url("../fonts/Futura-Med.svg") format("svg"); font-weight: normal; font-style: normal; font-display: block; }
html { font-family: 'futura','Noto Sans JP','Avenir Next','Leelawadee UI','TsukuBRdGothic-Regular','Meiryo UI',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3', sans-serif; font-weight: normal; font-size: 62.5%; }

body { margin: 0; color: #000000; font-size: 1.6rem; line-height: 1.7; position: relative; overflow-x: hidden; background: #F4F2EF; display: none; }
body:after { width: 100%; height: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.4); content: ''; left: 0; top: 0; z-index: -1; opacity: 0; -webkit-transition: all 0.6s; transition: all 0.6s; }
body.overlay:after { z-index: 10; opacity: 1; }
@media (max-width: 900px) { body { padding-top: 74px; } }
@media (max-width: 480px) { body { padding-top: 60px; } }

a, a:link, a:visited { color: #000000; text-decoration: none; transition: 0.5s; }

img { max-width: 100%; width: auto; height: auto; vertical-align: bottom; transition: 0.5s; }

.wrap { margin: auto; width: 95%; height: auto; box-sizing: border-box; }

.container { margin: auto; width: 90%; max-width: 1200px; height: auto; box-sizing: border-box; }

.innerBox { margin: auto; width: 90%; max-width: 900px; height: auto; box-sizing: border-box; }

.mincho { font-family: 'Zen Old Mincho', serif; }

main { position: relative; overflow-x: hidden; display: block; }
main .mainbg { margin: auto; position: absolute; z-index: -1; }
main .mainbg svg { width: 100%; height: auto; }

@font-face { font-family: 'icomoon'; src: url("../fonts/icomoon.eot?naimhd"); src: url("../fonts/icomoon.eot?naimhd#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?naimhd") format("truetype"), url("../fonts/icomoon.woff?naimhd") format("woff"), url("../fonts/icomoon.svg?naimhd#icomoon") format("svg"); font-weight: normal; font-style: normal; font-display: block; }
[class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-ar_down:before { content: "\e902"; }

.icon-ar_left:before { content: "\e903"; }

.icon-ar_right:before { content: "\e900"; }

.icon-ar_top:before { content: "\e901"; }

.icon-plus:before { content: "\e904"; }

.icon-search02:before { content: "\e905"; }

.icon-x:before { content: "\e906"; }

.icon-line .path1:before { content: "\e907"; color: #00c300; }

.icon-line .path2:before { content: "\e908"; margin-left: -1em; color: white; }

.icon-facebook:before { content: "\ea91"; }

.icon-instagram:before { content: "\ea92"; }

.icon-twitter:before { content: "\ea96"; }

.icon-print:before { content: "\e954"; }

.icon-search01:before { content: "\e986"; }

/*============================================================================
	header
=============================================================================*/
header { width: 100%; min-height: 40px; background: #FFFFFF; }
@media (max-width: 900px) { header { position: fixed; top: 0; left: 0; z-index: 100; } }

#hTopWrap { margin: 0; width: 100%; min-height: 40px; position: relative; }
@media (max-width: 900px) { #hTopWrap { padding: 10px 0; background: #FFFFFF; } }
#hTopWrap h1 { padding-left: 2.78vw; width: 28.61vw; height: 5vw; align-self: center; }
@media (max-width: 1200px) { #hTopWrap h1 { width: 380px; } }
@media (max-width: 900px) { #hTopWrap h1 { width: 300px; height: 54px; } }
@media (max-width: 480px) { #hTopWrap h1 { width: 205px; height: 36px; } }
#hTopWrap #hTopRbox { margin: 0 0 0 auto; width: calc(100% - 32vw); }
@media (max-width: 1200px) { #hTopWrap #hTopRbox { width: calc(100% - 400px); } }
@media (max-width: 900px) { #hTopWrap #hTopRbox { display: none; } }
#hTopWrap #hTopRbox #hTopIconMenuWrap { margin: 0 0 0 auto; width: 400px; }
#hTopWrap #hTopRbox #hTopIconMenuWrap li { color: #BC9D62; }
#hTopWrap #hTopRbox #hTopIconMenuWrap li a { padding: 20px 0; color: #BC9D62; font-size: 2.7rem; line-height: 1; display: block; }
#hTopWrap #hTopRbox #hTopIconMenuWrap li a i { vertical-align: text-bottom; }
#hTopWrap #hTopRbox #hTopIconMenuWrap li + li { margin-left: 30px; }
#hTopWrap #hTopRbox #hTopIconMenuWrap li.cartBtn { width: 230px; }
#hTopWrap #hTopRbox #hTopIconMenuWrap li.cartBtn a { padding: 0; color: #FFFFFF; font-size: 1.6rem; font-weight: 600; width: 100%; height: 50px; line-height: 50px; text-align: center; background: #BC9D62; display: block; position: relative; }
#hTopWrap #hTopRbox #hTopIconMenuWrap li.cartBtn a i { margin: auto 10px auto 0; width: 23px; height: 19px; background: url("../img/icon/cart.svg") no-repeat 0 0/contain; filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(348deg) brightness(112%) contrast(101%); display: inline-block; }
#hTopWrap #hTopRbox #hTopSubMenuWrap { margin: 0 2.08vw 25px auto; max-width: 840px; width: 90%; }
#hTopWrap #hTopRbox #hTopSubMenuWrap li a { padding-bottom: 4px; color: #5D5D5D; position: relative; }
@media (max-width: 1200px) { #hTopWrap #hTopRbox #hTopSubMenuWrap li a { font-size: 1.4rem; } }
#hTopWrap #hTopRbox #hTopSubMenuWrap li a::after { content: ''; width: 0; height: 2px; background-color: #D02300; transition: .3s; position: absolute; bottom: 0; left: 0; }
#hTopWrap #hTopRbox #hTopSubMenuWrap li a:hover::after { width: 100%; }
#hTopWrap #hTopRbox #hTopSubMenuWrap li + li { margin-left: 1em; padding-left: 0.5em; border-left: 1px solid #5D5D5D; }
#hTopWrap #langSelect { color: #FFFFFF; width: 125px; height: 53px; position: absolute; top: 0; right: 0; z-index: 20; }
#hTopWrap #langSelect span.placeholder { padding: 15px 10px; color: #FFFFFF; line-height: 1; width: 100%; background: #D02300; box-sizing: border-box; display: block; position: relative; z-index: 20; }
#hTopWrap #langSelect span.placeholder::before { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e902"; color: #FFFFFF; font-size: 2.0rem; width: 20px; height: 20px; transition: 0.4s; display: block; position: absolute; top: 10px; right: 0.5em; }
#hTopWrap #langSelect ul { width: 100%; background: #D02300; transition: 0.6s; transform-origin: top; transform: translateY(-20px); visibility: hidden; opacity: 0; }
#hTopWrap #langSelect ul li { width: 100%; }
#hTopWrap #langSelect ul li a { padding: 15px 10px; color: #FFFFFF; line-height: 1; box-sizing: border-box; display: block; }
#hTopWrap #langSelect.is-open span.placeholder::before { transform: scale(1, -1); }
#hTopWrap #langSelect.is-open ul { transform: translateY(0); visibility: visible; opacity: 1; }
@media (max-width: 900px) { #hTopWrap #langSelect { width: 140px; position: fixed; top: 70px; right: 20px; display: none; z-index: 5; } }
#hTopWrap #smpTopMenuWrap { padding: 10px 80px 0 0; }
@media (min-width: 901px) { #hTopWrap #smpTopMenuWrap { display: none; } }
@media (max-width: 480px) { #hTopWrap #smpTopMenuWrap { padding: 10px 60px 0 0; } }
#hTopWrap #smpTopMenuWrap li { height: 42px; }
#hTopWrap #smpTopMenuWrap li + li { margin-left: 20px; }
#hTopWrap #smpTopMenuWrap li .icon-search02 { font-size: 4.2rem; color: #BC9D62; }
@media (max-width: 480px) { #hTopWrap #smpTopMenuWrap li .icon-search02 { font-size: 2.8rem; } }
@media (max-width: 480px) { #hTopWrap #smpTopMenuWrap li { height: 28px; }
  #hTopWrap #smpTopMenuWrap li + li { margin-left: 10px; }
  #hTopWrap #smpTopMenuWrap li.langBtn { width: 28px; } }

/* welltool */
#gnaviWrap { width: 100%; background: #142E66; position: relative; z-index: 11; }
@media (max-width: 900px) { #gnaviWrap { padding: 40px 0 200px; width: 100%; height: calc(100vh - 200px); background: #FAAB2D; overflow: scroll; position: fixed; top: -9999px; left: 0; -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); }
  #gnaviWrap.open { top: 74px; } }
@media (max-width: 480px) { #gnaviWrap.open { top: 60px; } }
#gnaviWrap > ul:not(#spGnaviTop) { margin: 0 auto; padding: 0 2%; width: 100%; box-sizing: border-box; }
@media (max-width: 900px) { #gnaviWrap > ul:not(#spGnaviTop) { display: block; } }
#gnaviWrap > ul:not(#spGnaviTop) > li { width: calc( 100% / 8); }
@media (max-width: 900px) { #gnaviWrap > ul:not(#spGnaviTop) > li { width: 100%; }
  #gnaviWrap > ul:not(#spGnaviTop) > li.parentMenu { position: relative; }
  #gnaviWrap > ul:not(#spGnaviTop) > li.parentMenu::after { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e900"; margin: auto; color: #FFFFFF; font-size: 2.2rem; width: 22px; height: 22px; position: absolute; top: 20px; left: auto; right: 20px; bottom: auto; -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); }
  #gnaviWrap > ul:not(#spGnaviTop) > li.parentMenu.open { background: #FFFFFF; }
  #gnaviWrap > ul:not(#spGnaviTop) > li.parentMenu.open::after { color: #142E66; transform: rotate(90deg); }
  #gnaviWrap > ul:not(#spGnaviTop) > li.parentMenu.open a { color: #142E66; opacity: 1; }
  #gnaviWrap > ul:not(#spGnaviTop) > li.parentMenu.open a span img { filter: invert(12%) sepia(42%) saturate(3454%) hue-rotate(208deg) brightness(96%) contrast(92%); } }
#gnaviWrap > ul:not(#spGnaviTop) > li.spOnly { display: none; }
@media (max-width: 900px) { #gnaviWrap > ul:not(#spGnaviTop) > li.spOnly { display: block; } }
#gnaviWrap > ul:not(#spGnaviTop) > li > a { color: #FFFFFF; width: 100%; height: 66px; line-height: 1; text-align: center; box-sizing: border-box; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; }
@media (max-width: 1200px) { #gnaviWrap > ul:not(#spGnaviTop) > li > a { padding: 0 0 10px; font-size: 1.4rem; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; } }
@media (max-width: 900px) { #gnaviWrap > ul:not(#spGnaviTop) > li > a { padding: 15px 20px; font-size: 1.8rem; height: auto; text-align: left; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; } }
#gnaviWrap > ul:not(#spGnaviTop) > li > a span { line-height: 1; display: block; -ms-flex-item-align: center; align-self: center; }
#gnaviWrap > ul:not(#spGnaviTop) > li > a span.menuIcon { margin-right: 0.5em; width: 28px; text-align: center; }
#gnaviWrap > ul:not(#spGnaviTop) > li > a span.menuIcon img { vertical-align: middle; filter: invert(100%) sepia(100%) saturate(3%) hue-rotate(74deg) brightness(103%) contrast(100%); }
@media (max-width: 1200px) { #gnaviWrap > ul:not(#spGnaviTop) > li > a span + span { margin-top: 10px; } }
@media (max-width: 900px) { #gnaviWrap > ul:not(#spGnaviTop) > li > a span + span { margin-top: 0; } }
@media (min-width: 901px) { #gnaviWrap > ul:not(#spGnaviTop) > li:hover { background: rgba(255, 255, 255, 0.7); opacity: 1; }
  #gnaviWrap > ul:not(#spGnaviTop) > li:hover a { color: #142E66; opacity: 1; }
  #gnaviWrap > ul:not(#spGnaviTop) > li:hover a span.menuIcon img { filter: invert(12%) sepia(42%) saturate(3454%) hue-rotate(208deg) brightness(96%) contrast(92%); } }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap { padding: 35px; width: 100%; background: #FAAB2D; box-sizing: border-box; position: absolute; top: 100%; left: 0; display: none; }
@media (max-width: 900px) { #gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap { padding: 0 0 20px; position: static; } }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div { padding: 30px 0 15px; width: 100%; height: auto; background: #FFFFFF; }
@media (max-width: 900px) { #gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div { padding: 10px 0 0; } }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dt { padding-bottom: 15px; color: #142E66; font-size: 2.8rem; font-weight: 700; line-height: 1; border-bottom: 1px solid #5D5D5D; }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dt span { margin-right: 0.8em; height: 35px; }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dt span img { width: auto; height: 100%; filter: invert(12%) sepia(42%) saturate(3454%) hue-rotate(208deg) brightness(96%) contrast(92%); }
@media (max-width: 900px) { #gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dt { display: none; } }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd { padding: 20px 0 0; width: 100%; position: relative; }
@media (max-width: 900px) { #gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd { padding: 0; } }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul { width: 100%; }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul > li { margin-bottom: 15px; padding-left: 30px; width: 25%; box-sizing: border-box; position: relative; }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul > li::before { content: ''; margin: auto; width: 17px; height: 33px; background: url("../img/common/hyotan.svg") no-repeat 0 0; background-size: contain; display: block; position: absolute; top: -4px; left: 0; right: auto; bottom: auto; }
@media (max-width: 1200px) { #gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul > li { margin: 0 2% 20px 0; padding-left: 28px; font-size: 1.4rem; width: 32%; }
  #gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul > li:nth-of-type(3n) { margin-right: 0; }
  #gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul > li::before { width: 15px; height: 28px; } }
@media (max-width: 900px) { #gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul > li { margin: 0 0 20px 0; width: 100%; } }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul > li a { display: inline-block; position: relative; z-index: 1; }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul > li a::after { content: ''; width: 100%; height: 100%; background: rgba(188, 157, 98, 0.3); display: block; transform: scale(1, 0); transform-origin: bottom; transition: 0.4s; position: absolute; top: 0; left: 0; z-index: -1; }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul > li a:hover::after { transform: scale(1, 1); }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul > li ul { margin: 10px auto; padding: 0; }
#gnaviWrap > ul:not(#spGnaviTop) > li .submenuWrap div dl dd > ul > li ul li { margin-left: 1em; list-style: disc; }
#gnaviWrap #spGnaviTop { margin: 0 auto 20px; width: 90%; display: none; }
@media (max-width: 900px) { #gnaviWrap #spGnaviTop { display: -webkit-flex; display: -moz-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } }
#gnaviWrap #spGnaviTop li { width: 48%; height: 60px; }
#gnaviWrap #spGnaviTop li a { color: #FFFFFF; font-size: 1.6rem; width: 100%; height: 40px; line-height: 42px; text-align: center; border: 1px solid #FFFFFF; box-sizing: border-box; display: block; position: relative; }
#gnaviWrap #spGnaviTop li a i { margin: auto; font-size: 2.2rem; width: 22px; height: 22px; position: absolute; top: 0; left: auto; right: 20px; bottom: 0; }
#gnaviWrap .spGnaviContact { margin: 40px auto 0; width: 90%; display: none; }
@media (max-width: 900px) { #gnaviWrap .spGnaviContact { display: block; } }
#gnaviWrap .spGnaviContact a { color: #FFFFFF; font-size: 1.6rem; width: 100%; height: 60px; line-height: 60px; text-align: center; border: 1px solid #FFFFFF; box-sizing: border-box; display: block; position: relative; }
#gnaviWrap .spGnaviContact a i { margin: auto; font-size: 2.2rem; width: 22px; height: 22px; position: absolute; top: 0; left: auto; right: 20px; bottom: 0; }
#gnaviWrap .spECbtn { margin: 40px auto 0; width: 90%; display: none; }
@media (max-width: 900px) { #gnaviWrap .spECbtn { display: block; } }
#gnaviWrap .spECbtn a { color: #FFFFFF; font-size: 1.6rem; width: 100%; height: 60px; line-height: 60px; text-align: center; border: 1px solid #FFFFFF; box-sizing: border-box; display: block; position: relative; }
#gnaviWrap .spECbtn a i.icon_cart { margin: auto; width: 23px; height: 19px; background: url("../img/icon/cart.svg") no-repeat 0 0/contain; filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(348deg) brightness(112%) contrast(101%); position: absolute; top: 0; left: auto; right: 20px; bottom: 0; }

/*============================================================================
	drawer menuBtn
=============================================================================*/
header .menuBtn { margin: auto; padding: 5px; color: #FFFFFF; font-size: 1.2rem; width: 40px; height: 40px; text-align: center; box-sizing: border-box; background: #D02300; outline: 0; border: 0; position: fixed; top: 20px; left: auto; right: 20px; bottom: auto; z-index: 1200; -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); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
header .menuBtn:hover { cursor: pointer; }
@media (min-width: 901px) { header .menuBtn { display: none; } }
@media (max-width: 900px) { header .menuBtn { display: block; } }
@media (max-width: 480px) { header .menuBtn { width: 30px; height: 30px; top: 15px; right: 10px; } }
header .menuBtn .drawer-hamburger-icon { margin: auto; width: 100%; height: 2px; background-color: #FFFFFF; -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); position: relative; display: block; }
header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:before, header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:after { content: ''; width: 100%; height: 2px; background-color: #FFFFFF; -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); position: absolute; left: 0; }
header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:before { top: -8px; }
header .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:after { top: 8px; }
header .menuBtn.close-btn .drawer-hamburger-icon { background: transparent; }
header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:before, header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:after { top: 0; }
header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
header .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

/*============================================================================
	footer
=============================================================================*/
footer { margin-top: 200px; padding: 40px 0 20px; color: #ffffff; background: #142E66; position: relative; z-index: 10; }
@media (max-width: 480px) { footer { margin-top: 100px; } }
footer #footerTopArea { margin: 0 auto; width: 95%; }
footer #footerTopArea address { margin-left: 5vw; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 70%; }
footer #footerTopArea address h1 { width: 30%; }
footer #footerTopArea address div { width: 60%; }
footer #footerTopArea address h1 + div { margin-left: 40px; }
@media (max-width: 1200px) { footer #footerTopArea address { margin-left: 2vw; } }
@media (max-width: 900px) { footer #footerTopArea address { margin-left: 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  footer #footerTopArea address h1 { width: 100%; }
  footer #footerTopArea address div { font-size: 1.4rem; width: 100%; }
  footer #footerTopArea address h1 + div { margin: 20px 0 0 0; } }
@media (max-width: 480px) { footer #footerTopArea address { max-width: 100%; width: 100%; }
  footer #footerTopArea address h1 { margin-top: -30px; width: 100%; position: relative; }
  footer #footerTopArea address h1 img { display: none; }
  footer #footerTopArea address h1 p { font-size: 2.0rem; }
  footer #footerTopArea address h1 p span { font-size: 1.4rem; display: block; } }
footer #footerTopArea #footerSNS { max-width: 30%; }
footer #footerTopArea #footerSNS li a { color: #FFFFFF; font-size: 2.7rem; line-height: 1; }
footer #footerTopArea #footerSNS li a i { vertical-align: text-bottom; }
footer #footerTopArea #footerSNS li + li { margin-left: 30px; }
@media (max-width: 480px) { footer #footerTopArea #footerSNS { margin: 0 0 0 auto; -webkit-order: -1; -moz-order: -1; -ms-order: -1; order: -1; max-width: none; width: 150px; } }
footer #footerBottomArea { margin: 40px auto 0; font-size: 1.4rem; line-height: 1.2; width: 95%; }
footer #footerBottomArea .copyright { -webkit-order: -1; -moz-order: -1; -ms-order: -1; order: -1; }
footer #footerBottomArea .flink li { padding: 2px 10px; border-right: 1px solid #FFFFFF; }
footer #footerBottomArea .flink li:last-of-type { border: none; }
footer #footerBottomArea .flink li a { color: #FFFFFF; }
@media (max-width: 1200px) { footer #footerBottomArea .copyright { margin-top: 20px; width: 100%; -webkit-order: 2; -moz-order: 2; -ms-order: 2; order: 2; } }
@media (max-width: 480px) { footer #footerBottomArea { margin: 20px auto 0; font-size: 1.2rem; }
  footer #footerBottomArea .copyright { font-size: 1.2rem; }
  footer #footerBottomArea .flink { margin-left: -10px; margin-bottom: 20px; position: relative; }
  footer #footerBottomArea .flink li { margin-bottom: 10px; } }
footer .spflogo { width: 70px; height: 135px; display: none; position: absolute; top: 90px; right: 20px; }
@media (max-width: 480px) { footer .spflogo { display: block; } }

/*-------------------------
	back_to_top
-------------------------*/
#back_to_top { margin: 0 auto; width: 70px; height: 70px; position: fixed; right: 30px; bottom: 30px; z-index: 999; transition: 0.3s ease; transform: translateY(100px); }
@media (max-width: 480px) { #back_to_top { width: 40px; height: 40px; right: 10px; bottom: 10px; } }
#back_to_top.sc { transform: translateY(0); }
#back_to_top a.js-back_to_top { margin: 0; padding-top: 8px; width: 100%; height: 100%; text-align: center; border-radius: 50%; background: #142E66; display: block; box-sizing: border-box; }
@media (max-width: 480px) { #back_to_top a.js-back_to_top { padding-top: 4px; } }
#back_to_top a.js-back_to_top:hover { opacity: 0.5; }
#back_to_top a.js-back_to_top i { color: #FFFFFF; font-size: 5.0rem; }
@media (max-width: 480px) { #back_to_top a.js-back_to_top i { font-size: 3.0rem; } }

/*============================================================================
	searchBox
=============================================================================*/
.searchBox dl dt { padding: 25px 0; color: #142E66; font-size: 2.0rem; font-weight: 700; width: 100%; height: 75px; line-height: 1.0; text-align: center; background: #FFFFFF; box-sizing: border-box; position: relative; }
.searchBox dl dt i { margin-right: 10px; font-size: 2.4rem; width: 24px; height: 24px; vertical-align: bottom; }
.searchBox dl dt i:before { vertical-align: top; }
.searchBox dl dt .icon-plus { margin: auto; color: #142E66; font-size: 2.4rem; width: 24px; height: 24px; -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); position: absolute; top: 0; left: auto; right: 20px; bottom: 0; }
@media (max-width: 480px) { .searchBox dl dt .icon-plus { right: 10px; } }
.searchBox dl dt.open .icon-plus { transform: rotate(135deg); }
@media (max-width: 480px) { .searchBox dl dt { padding: 12px 0; font-size: 1.8rem; height: 50px; } }
.searchBox dl dd { padding: 60px 0; background: #F4F2EF; }
@media (max-width: 480px) { .searchBox dl dd { padding: 20px 0; } }
.searchBox dl dd form { margin: auto; max-width: 900px; width: 90%; }
.searchBox dl dd form ::placeholder { color: #D3D3D3; }
.searchBox dl dd form .keywordBox { margin: 0 auto 50px; width: 100%; }
.searchBox dl dd form .keywordBox input { padding: 18px; width: 100%; border: none; background: #FFFFFF; box-sizing: border-box; }
@media (max-width: 480px) { .searchBox dl dd form .keywordBox { margin: 0 auto 30px; }
  .searchBox dl dd form .keywordBox input { padding: 8px; font-size: 1.4rem; } }
.searchBox dl dd form .taxBox h4 { margin: 0 auto 25px; padding-bottom: 5px; font-size: 2.0rem; font-weight: 700; text-align: left; position: relative; }
.searchBox dl dd form .taxBox h4::before { content: ''; margin: auto; width: 100%; height: 1px; background: #B1B1B1; display: block; position: absolute; top: 100%; left: 0; }
.searchBox dl dd form .taxBox h4::after { content: ''; margin: -1px auto auto; width: 200px; height: 3px; background: #BC9D62; display: block; position: absolute; top: 100%; left: 0; }
@media (max-width: 480px) { .searchBox dl dd form .taxBox h4 { font-size: 1.6rem; }
  .searchBox dl dd form .taxBox h4::after { width: 30%; } }
.searchBox dl dd form .taxBox ul li { margin: 0 20px 20px 0; height: 40px; }
@media (max-width: 480px) { .searchBox dl dd form .taxBox ul li { margin: 0 10px 10px 0; height: auto; } }
.searchBox dl dd form .taxBox input[type=checkbox] { display: none; }
.searchBox dl dd form .taxBox label { padding: 0 20px; min-width: 120px; height: 40px; line-height: 40px; text-align: center; border-radius: 20px; background: #FFFFFF; box-sizing: border-box; display: block; -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); }
@media (max-width: 480px) { .searchBox dl dd form .taxBox label { padding: 5px 10px; font-size: 1.2rem; width: auto; height: auto; line-height: 1.0; } }
.searchBox dl dd form .taxBox + .taxBox { margin-top: 50px; }
@media (max-width: 480px) { .searchBox dl dd form .taxBox + .taxBox { margin-top: 30px; } }
.searchBox dl dd form .genreSearch label { color: #BC9D62; border: 2px solid #BC9D62; }
.searchBox dl dd form .genreSearch label.checked { color: #ffffff; background: #BC9D62; }
.searchBox dl dd form .areaSearch .areaBlock ul { width: 57%; float: left; }
.searchBox dl dd form .areaSearch .areaBlock .searchmapBox { width: 40%; float: right; }
@media (max-width: 480px) { .searchBox dl dd form .areaSearch .areaBlock ul { width: 100%; float: none; }
  .searchBox dl dd form .areaSearch .areaBlock .searchmapBox { margin: 0 auto; width: 80%; float: none; } }
.searchBox dl dd form .areaSearch label.kinshicho, .searchBox dl dd form .areaSearch label.area01 { color: #EF9E26; border: 2px solid #EF9E26; }
.searchBox dl dd form .areaSearch label.kinshicho.checked, .searchBox dl dd form .areaSearch label.area01.checked { color: #ffffff; background: #EF9E26; }
.searchBox dl dd form .areaSearch label.ryogoku, .searchBox dl dd form .areaSearch label.area02 { color: #042B8E; border: 2px solid #042B8E; }
.searchBox dl dd form .areaSearch label.ryogoku.checked, .searchBox dl dd form .areaSearch label.area02.checked { color: #ffffff; background: #042B8E; }
.searchBox dl dd form .areaSearch label.skytree, .searchBox dl dd form .areaSearch label.area03 { color: #5AC6D5; border: 2px solid #5AC6D5; }
.searchBox dl dd form .areaSearch label.skytree.checked, .searchBox dl dd form .areaSearch label.area03.checked { color: #ffffff; background: #5AC6D5; }
.searchBox dl dd form .areaSearch label.mukojima, .searchBox dl dd form .areaSearch label.area04 { color: #40BC45; border: 2px solid #40BC45; }
.searchBox dl dd form .areaSearch label.mukojima.checked, .searchBox dl dd form .areaSearch label.area04.checked { color: #ffffff; background: #40BC45; }
.searchBox dl dd form .areaSearch label.kyojima, .searchBox dl dd form .areaSearch label.area05 { color: #F06690; border: 2px solid #F06690; }
.searchBox dl dd form .areaSearch label.kyojima.checked, .searchBox dl dd form .areaSearch label.area05.checked { color: #ffffff; background: #F06690; }
.searchBox dl dd form .areaSearch label.other, .searchBox dl dd form .areaSearch label.area06 { color: #C4C0BB; border: 2px solid #C4C0BB; }
.searchBox dl dd form .areaSearch label.other.checked, .searchBox dl dd form .areaSearch label.area06.checked { color: #ffffff; background: #C4C0BB; }
.searchBox dl dd form .periodSearch .fl { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.searchBox dl dd form .periodSearch .fl .inputCal { padding: 0; width: 200px; border-radius: 0; position: relative; }
.searchBox dl dd form .periodSearch .fl .inputCal::before { content: ''; margin: auto; width: 25px; height: 26px; background: url("../img/icon/calendar.svg") no-repeat 0 0; background-size: contain; opacity: 0.3; display: block; position: absolute; top: 0; right: 10px; bottom: 0; }
.searchBox dl dd form .periodSearch .fl .inputCal input { padding: 5px 30px 3px 3px; font-size: 1.8rem; width: 100%; box-sizing: border-box; }
.searchBox dl dd form .periodSearch .fl p:not(:nth-of-type(2)) { width: 40%; }
.searchBox dl dd form .periodSearch .fl p:nth-of-type(2) { font-size: 2.0rem; width: 10%; text-align: center; }
.searchBox dl dd form .periodSearch .fl p + p { margin-left: 5%; }
@media (max-width: 480px) { .searchBox dl dd form .periodSearch .fl { width: 100%; }
  .searchBox dl dd form .periodSearch .fl .inputCal { width: 100%; }
  .searchBox dl dd form .periodSearch .fl .inputCal::before { width: 18px; height: 18px; top: 0; right: 5px; bottom: 0; }
  .searchBox dl dd form .periodSearch .fl .inputCal input { padding: 5px 20px 3px 3px; font-size: 1.6rem; }
  .searchBox dl dd form .periodSearch .fl p:not(:nth-of-type(2)) { width: 43%; }
  .searchBox dl dd form .periodSearch .fl p:nth-of-type(2) { font-size: 1.6rem; width: 6%; text-align: center; }
  .searchBox dl dd form .periodSearch .fl p + p { margin-left: 4%; } }
.searchBox dl dd form .submitArea { margin: 40px auto 0; }
.searchBox dl dd form .submitArea .resetBtn { font-size: 2.0rem; max-width: 210px; width: 23.4%; height: 55px; line-height: 55px; text-align: center; background: #CDCDCD; box-sizing: border-box; }
@media (max-width: 480px) { .searchBox dl dd form .submitArea .resetBtn { font-size: 1.4rem; width: 30%; height: 30px; line-height: 30px; } }
.searchBox dl dd form .submitArea .submitBtn { margin-left: 25px; color: #FFFFFF; font-size: 2.0rem; max-width: 350px; width: 39%; height: 55px; line-height: 55px; text-align: center; background: #000000; box-sizing: border-box; }
@media (max-width: 480px) { .searchBox dl dd form .submitArea .submitBtn { font-size: 1.4rem; width: 60%; height: 30px; line-height: 30px; } }
.searchBox.searchToggle dl dd { display: none; }

.modaal-content-container { padding: 0; }
.modaal-content-container .searchBox { border: 10px solid #142E66; max-width: 1200px; }

/*-----------------------------------------------------
	S&F PRO
------------------------------------------------------*/
.searchandfilter > ul { /* ジャンルから探す */ /* エリアから探す */ /* スポットカテゴリで探す */ /* 検索ボタン */ }
.searchandfilter > ul > li { margin: 0 auto 40px; width: 100%; /* radio & checkbox */ }
@media (max-width: 480px) { .searchandfilter > ul > li { margin: 0 auto; } }
.searchandfilter > ul > li h4 { margin: 0 auto 25px; padding-bottom: 5px; font-size: 2.0rem; font-weight: 700; text-align: left; position: relative; }
.searchandfilter > ul > li h4::before { content: ''; margin: auto; width: 100%; height: 1px; background: #B1B1B1; display: block; position: absolute; top: 100%; left: 0; }
.searchandfilter > ul > li h4::after { content: ''; margin: -1px auto auto; width: 200px; height: 3px; background: #BC9D62; display: block; position: absolute; top: 100%; left: 0; }
@media (max-width: 480px) { .searchandfilter > ul > li h4 { margin: 0 auto 10px; font-size: 1.6rem; }
  .searchandfilter > ul > li h4::after { width: 30%; } }
.searchandfilter > ul > li .sf-label-radio, .searchandfilter > ul > li .sf-label-checkbox { padding: 0 20px; min-width: 120px; height: 40px; line-height: 40px; text-align: center; border-radius: 20px; background: #FFFFFF; box-sizing: border-box; display: block; -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); }
@media (max-width: 480px) { .searchandfilter > ul > li .sf-label-radio, .searchandfilter > ul > li .sf-label-checkbox { padding: 5px 10px; font-size: 1.2rem; min-width: 90px; width: auto; height: auto; line-height: 1.0; } }
.searchandfilter > ul > li .sf-label-radio input[type=radio], .searchandfilter > ul > li .sf-label-checkbox input[type=radio] { display: none; }
.searchandfilter > ul > li .sf-label-radio input[type=checkbox], .searchandfilter > ul > li .sf-label-checkbox input[type=checkbox] { display: none; }
.searchandfilter > ul .sf-field-search { width: 100%; }
.searchandfilter > ul .sf-field-search label { width: 100%; display: block; }
.searchandfilter > ul .sf-field-search input { padding: 18px; width: 100%; border: none; background: #FFFFFF; box-sizing: border-box; }
@media (max-width: 480px) { .searchandfilter > ul .sf-field-search { margin: 0 auto; }
  .searchandfilter > ul .sf-field-search input { padding: 8px; font-size: 1.4rem; } }
.searchandfilter > ul .sf-field-post_type > ul { display: -webkit-flex; display: -moz-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.searchandfilter > ul .sf-field-post_type > ul > li { margin: 10px; width: auto; }
.searchandfilter > ul .sf-field-post_type > ul > li .sf-label-radio { color: #BC9D62; border: 2px solid #BC9D62; }
.searchandfilter > ul .sf-field-post_type > ul > li .sf-label-radio.checked { color: #ffffff; background: #BC9D62; }
@media (max-width: 480px) { .searchandfilter > ul .sf-field-post_type > ul > li { margin: 5px; } }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul { display: -webkit-flex; display: -moz-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li { margin: 10px; width: auto; }
@media (max-width: 480px) { .searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li { margin: 5px; } }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:first-of-type label { color: #EF9E26; border: 2px solid #EF9E26; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:first-of-type label.checked { color: #ffffff; background: #EF9E26; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:nth-of-type(2) label { color: #042B8E; border: 2px solid #042B8E; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:nth-of-type(2) label.checked { color: #ffffff; background: #042B8E; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:nth-of-type(3) label { color: #5AC6D5; border: 2px solid #5AC6D5; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:nth-of-type(3) label.checked { color: #ffffff; background: #5AC6D5; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:nth-of-type(4) label { color: #40BC45; border: 2px solid #40BC45; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:nth-of-type(4) label.checked { color: #ffffff; background: #40BC45; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:nth-of-type(5) label { color: #F06690; border: 2px solid #F06690; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:nth-of-type(5) label.checked { color: #ffffff; background: #F06690; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:nth-of-type(6) label { color: #C4C0BB; border: 2px solid #C4C0BB; }
.searchandfilter > ul .sf-field-taxonomy-ctg_area > ul > li:nth-of-type(6) label.checked { color: #ffffff; background: #C4C0BB; }
.searchandfilter > ul .sf-field-taxonomy-ctg_spot > ul { display: -webkit-flex; display: -moz-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.searchandfilter > ul .sf-field-taxonomy-ctg_spot > ul > li { margin: 10px; width: auto; }
.searchandfilter > ul .sf-field-taxonomy-ctg_spot > ul > li .sf-label-checkbox { color: #BC9D62; border: 2px solid #BC9D62; }
.searchandfilter > ul .sf-field-taxonomy-ctg_spot > ul > li .sf-label-checkbox.checked { color: #ffffff; background: #BC9D62; }
.searchandfilter > ul .sf-field-submit { margin: 40px auto 0; }
@media (max-width: 480px) { .searchandfilter > ul .sf-field-submit { margin: 0 auto; } }
.searchandfilter > ul .sf-field-submit input[type=submit] { margin: auto; color: #FFFFFF; font-size: 2.0rem; max-width: 350px; width: 80%; height: 55px; line-height: 55px; text-align: center; background: #000000; box-sizing: border-box; display: block; }
@media (max-width: 480px) { .searchandfilter > ul .sf-field-submit input[type=submit] { margin: 0 auto; font-size: 1.4rem; width: 70%; height: 30px; line-height: 32px; } }

/*============================================================================
	common
=============================================================================*/
/*-----------------------------------------------------
	breadcrumbs
------------------------------------------------------*/
#breadcrumbs { margin: 20px auto 40px; width: 90%; }
#breadcrumbs ol li { font-size: 1.4rem; }
@media (max-width: 480px) { #breadcrumbs ol li { font-size: 1.2rem; } }
#breadcrumbs ol li:not(:first-of-type)::before { content: '\00ff1e'; margin-right: 10px; font-size: 1.2rem; }
#breadcrumbs ol li + li { margin-left: 10px; }
#breadcrumbs ol li a { color: #5D5D5D; font-size: 1.4rem; }
@media (max-width: 480px) { #breadcrumbs ol li a { font-size: 1.2rem; } }

/*----------------------------
	main title
----------------------------*/
.mainTtl { margin: 0 auto 50px; font-size: 3.4rem; font-weight: 700; line-height: 1.0; text-align: center; }
@media (max-width: 480px) { .mainTtl { margin: 0 auto 30px; font-size: 2.8rem; } }
.mainTtl .ttl_icon { margin: 0 auto 20px; width: 92px; height: auto; display: block; position: relative; }
.mainTtl .ttl_icon img { max-width: 34px; width: auto; height: 34px; filter: invert(18%) sepia(74%) saturate(3532%) hue-rotate(3deg) brightness(97%) contrast(104%); }
.mainTtl .ttl_icon::before, .mainTtl .ttl_icon::after { content: ''; width: 14px; height: 23px; background: url("../img/common/fukidashi.svg") no-repeat 0 0; background-size: contain; display: block; position: absolute; top: auto; bottom: 0; }
.mainTtl .ttl_icon::before { left: 0; right: auto; }
.mainTtl .ttl_icon::after { transform: scale(-1, 1); left: auto; right: 0; }
.mainTtl .ttl_en { margin: 10px auto 0; color: #BC9D62; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.3em; text-indent: 0.3em; display: block; }
@media (max-width: 480px) { .mainTtl .ttl_en { font-size: 1.6rem; letter-spacing: 0.2em; text-indent: 0.2em; } }

/*----------------------------
	cheaderWrap
----------------------------*/
#cheaderWrap { margin: 0 auto 40px; width: 100%; background: url("../img/common/bg_cheader.svg") repeat center center; position: relative; z-index: 1; }
#cheaderWrap::before { content: ''; padding-top: 80px; width: 100%; display: block; position: absolute; top: 0; left: 0; }
#cheaderWrap::after { content: ''; padding-top: 80px; width: 100%; display: block; z-index: 0; }
#cheaderWrap h1 { margin: auto; color: #FFFFFF; font-size: 2.2rem; font-weight: 700; line-height: 1.2; display: -webkit-flex; display: -moz-flex; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; }
@media (max-width: 480px) { #cheaderWrap::before { padding-top: 50px; }
  #cheaderWrap::after { padding-top: 50px; }
  #cheaderWrap h1 { font-size: 1.8rem; } }
body#about #cheaderWrap { background-color: #F0A6BA; }
body#about #cheaderWrap::before { background: -moz-linear-gradient(left, transparent 24%, #F0A6BA 76%); background: -webkit-linear-gradient(left, transparent 24%, #F0A6BA 76%); background: linear-gradient(to right, transparent 24%, #F0A6BA 76%); }
body#schooltrip #cheaderWrap { background-color: #80C5CE; }
body#schooltrip #cheaderWrap::before { background: -moz-linear-gradient(left, transparent 24%, #80C5CE 76%); background: -webkit-linear-gradient(left, transparent 24%, #80C5CE 76%); background: linear-gradient(to right, transparent 24%, #80C5CE 76%); }
body#businesses #cheaderWrap { background-color: #C4C0BB; }
body#businesses #cheaderWrap::before { background: -moz-linear-gradient(left, transparent 24%, #C4C0BB 76%); background: -webkit-linear-gradient(left, transparent 24%, #C4C0BB 76%); background: linear-gradient(to right, transparent 24%, #C4C0BB 76%); }
body#commissions #cheaderWrap { background-color: #EBA93F; }
body#commissions #cheaderWrap::before { background: -moz-linear-gradient(left, transparent 24%, #EBA93F 76%); background: -webkit-linear-gradient(left, transparent 24%, #EBA93F 76%); background: linear-gradient(to right, transparent 24%, #EBA93F 76%); }
body#machiaruki #cheaderWrap { background-color: #BC9D62; }
body#machiaruki #cheaderWrap::before { background: -moz-linear-gradient(left, transparent 24%, #BC9D62 76%); background: -webkit-linear-gradient(left, transparent 24%, #BC9D62 76%); background: linear-gradient(to right, transparent 24%, #BC9D62 76%); }
body#membership #cheaderWrap { background-color: #C4C0BB; }
body#membership #cheaderWrap::before { background: -moz-linear-gradient(left, transparent 24%, #C4C0BB 76%); background: -webkit-linear-gradient(left, transparent 24%, #C4C0BB 76%); background: linear-gradient(to right, transparent 24%, #C4C0BB 76%); }
body#event #cheaderWrap, body#news #cheaderWrap { background-color: #E35A75; }
body#event #cheaderWrap::before, body#news #cheaderWrap::before { background: -moz-linear-gradient(left, transparent 24%, #E35A75 76%); background: -webkit-linear-gradient(left, transparent 24%, #E35A75 76%); background: linear-gradient(to right, transparent 24%, #E35A75 76%); }

/*----------------------------
	map
----------------------------*/
.ggmap { padding-bottom: 30%; width: 100%; height: 0; position: relative; overflow: hidden; }
@media (max-width: 900px) { .ggmap { padding-bottom: 50%; } }
.ggmap iframe, .ggmap object, .ggmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*============================================================================
	pageSNSarea
=============================================================================*/
@-webkit-keyframes vertical { 0% { transform: translate(0px, -10px); }
  100% { transform: translate(0px, 10px); } }
@-moz-keyframes vertical { 0% { transform: translate(0px, -10px); }
  100% { transform: translate(0px, 10px); } }
@keyframes vertical { 0% { transform: translate(0px, -10px); }
  100% { transform: translate(0px, 10px); } }
#pageSNSarea { margin-top: 100px; position: relative; z-index: 2; /* bg */ }
#pageSNSarea .tabWrap { margin: auto; max-width: 800px; width: 85%; }
#pageSNSarea .tabWrap .tabs { margin: 0 auto 50px; max-width: 780px; width: 90%; }
@media (max-width: 480px) { #pageSNSarea .tabWrap .tabs { margin: 0 auto 30px; width: 100%; } }
#pageSNSarea .tabWrap .tabs li { margin: 0 2% 0 0; width: 32%; }
#pageSNSarea .tabWrap .tabs li:nth-of-type(3) { margin-right: 0; }
#pageSNSarea .tabWrap .tabs li a.tab { color: #000000; font-size: 2.0rem; width: 100%; height: 55px; line-height: 1; background: rgba(188, 157, 98, 0.3); display: -webkit-flex; display: -moz-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
#pageSNSarea .tabWrap .tabs li a.tab.active { background: #bc9d62; }
#pageSNSarea .tabWrap .tabs li a.tab i { margin-right: 10px; font-size: 2.2rem; }
@media (max-width: 480px) { #pageSNSarea .tabWrap .tabs li a.tab { font-size: 1.4rem; }
  #pageSNSarea .tabWrap .tabs li a.tab i { margin-right: 5px; font-size: 1.6rem; } }
#pageSNSarea .tabWrap .tab-content { padding: 2.85vw; width: 100%; height: 630px; text-align: center; background: #FFFFFF; box-sizing: border-box; overflow-y: scroll; }
@media (max-width: 480px) { #pageSNSarea .tabWrap .tab-content { height: 400px; } }
#pageSNSarea #pageSNSbg01 { max-width: 286px; transform: translateY(35%); top: 0; right: 0; }
@media (max-width: 480px) { #pageSNSarea #pageSNSbg01 { transform: translateY(10%); width: 30%; } }
#pageSNSarea #pageSNSbg02 { max-width: 386px; transform: translateY(50%); top: auto; left: 0; bottom: 0; }
@media (max-width: 480px) { #pageSNSarea #pageSNSbg02 { width: 50%; } }

/*============================================================================
	banner area
=============================================================================*/
.banArea { margin: auto; width: 100%; position: relative; z-index: 21; }
.banArea h2 { margin: 0 auto 50px; font-size: 3.4rem; font-weight: 700; width: 100%; line-height: 1.0; text-align: center; position: relative; }
@media (max-width: 480px) { .banArea h2 { margin: 0 auto 30px; font-size: 2.8rem; } }
.banArea h2 .ttl_en { margin: 10px auto 0; color: #5D5D5D; font-size: 1.8rem; font-weight: 500; letter-spacing: 0.3em; text-indent: 0.3em; display: block; }
@media (max-width: 480px) { .banArea h2 .ttl_en { font-size: 1.6rem; letter-spacing: 0.2em; text-indent: 0.2em; } }
.banArea h2::before, .banArea h2::after { content: ''; margin: auto; width: 38.54vw; height: 1px; background: #000000; display: block; position: absolute; top: 1.7rem; bottom: auto; }
@media (max-width: 480px) { .banArea h2::before, .banArea h2::after { width: 22vw; top: 1.4rem; } }
.banArea h2::before { left: 0; right: auto; }
.banArea h2::after { left: auto; right: 0; }
.banArea ul { margin: auto; max-width: 1000px; width: 90%; box-sizing: border-box; }
.banArea ul li { margin: 0 auto 20px; width: 22%; text-align: center; }
@media (max-width: 480px) { .banArea ul li { width: 45%; } }

#pageSNSarea + .banArea, .banArea + .banArea { margin-top: 100px !important; }

/*============================================================================
	調整用
=============================================================================*/
.fl { display: -webkit-flex; display: -moz-flex; display: flex; }

.fl-tab { display: -webkit-flex; display: -moz-flex; display: flex; }
@media (max-width: 900px) { .fl-tab { -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; } }

.fl-smp { display: -webkit-flex; display: -moz-flex; display: flex; }
@media (max-width: 480px) { .fl-smp { -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; } }

.fl-jst { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.fl-cen { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.fl-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

.fl-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }

.fl-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.fl-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }

.mt0 { margin-top: 0 !important; }

.mt5 { margin-top: 5px !important; }

.mt10 { margin-top: 10px !important; }

.mt15 { margin-top: 15px !important; }

.mt20 { margin-top: 20px !important; }

.mt30 { margin-top: 30px !important; }

.mt35 { margin-top: 35px !important; }

.mt40 { margin-top: 40px !important; }

.mt45 { margin-top: 45px !important; }

.mt50 { margin-top: 50px !important; }

.mt100 { margin-top: 100px !important; }

.mr0 { margin-right: 0 !important; }

.mr5 { margin-right: 5px !important; }

.mr10 { margin-right: 10px !important; }

.mr15 { margin-right: 15px !important; }

.mr20 { margin-right: 20px !important; }

.mr25 { margin-right: 25px !important; }

.mb0 { margin-bottom: 0 !important; }

.mb5 { margin-bottom: 5px !important; }

.mb10 { margin-bottom: 10px !important; }

.mb12 { margin-bottom: 12px !important; }

.mb15 { margin-bottom: 15px !important; }

.mb20 { margin-bottom: 20px !important; }

.mb25 { margin-bottom: 25px !important; }

.mb30 { margin-bottom: 30px !important; }

.mb35 { margin-bottom: 35px !important; }

.mb40 { margin-bottom: 40px !important; }

.mb50 { margin-bottom: 50px !important; }

.mb60 { margin-bottom: 60px !important; }

.mb80 { margin-bottom: 80px !important; }

.ml0 { margin-left: 0 !important; }

.ml5 { margin-left: 5px !important; }

.ml10 { margin-left: 10px !important; }

.ml15 { margin-left: 15px !important; }

.ml20 { margin-left: 20px !important; }

.ml25 { margin-left: 25px !important; }

.ml30 { margin-left: 30px !important; }

.ls5 { letter-spacing: 5px !important; }

.ls10 { letter-spacing: 10px !important; }

.ls15 { letter-spacing: 15px !important; }

.ls40 { letter-spacing: 40px !important; }

.ls60 { letter-spacing: 60px !important; }

br { display: inline; }
@media (min-width: 1201px) { br.showPC { display: none !important; } }
@media (min-width: 901px) { br.showTab { display: none !important; } }
@media (min-width: 481px) { br.showSP { display: none !important; } }
@media (max-width: 1200px) { br.hdnPC { display: none !important; }
  br.showPC { display: inherit; } }
@media (max-width: 900px) { br.hdnTab { display: none !important; }
  br.showTab { display: inherit; } }
@media (max-width: 480px) { br.hdnSP { display: none !important; }
  br.showSP { display: inherit; } }

span { display: inline-block; }
@media (min-width: 1201px) { span.showPC { display: none !important; } }
@media (min-width: 901px) { span.showTab { display: none !important; } }
@media (min-width: 481px) { span.showSP { display: none !important; } }
@media (max-width: 1200px) { span.hdnPC { display: none !important; }
  span.showPC { display: inherit; } }
@media (max-width: 900px) { span.hdnTab { display: none !important; }
  span.showTab { display: inherit; } }
@media (max-width: 480px) { span.hdnSP { display: none !important; }
  span.showSP { display: inherit; } }

p, div, figure, ul { display: block; }
@media (min-width: 1201px) { p.showPC, div.showPC, figure.showPC, ul.showPC { display: none !important; } }
@media (min-width: 901px) { p.showTab, div.showTab, figure.showTab, ul.showTab { display: none !important; } }
@media (min-width: 481px) { p.showSP, div.showSP, figure.showSP, ul.showSP { display: none !important; } }
@media (max-width: 1200px) { p.hdnPC, div.hdnPC, figure.hdnPC, ul.hdnPC { display: none !important; }
  p.showPC, div.showPC, figure.showPC, ul.showPC { display: inherit; } }
@media (max-width: 900px) { p.hdnTab, div.hdnTab, figure.hdnTab, ul.hdnTab { display: none !important; }
  p.showTab, div.showTab, figure.showTab, ul.showTab { display: inherit; } }
@media (max-width: 480px) { p.hdnSP, div.hdnSP, figure.hdnSP, ul.hdnSP { display: none !important; }
  p.showSP, div.showSP, figure.showSP, ul.showSP { display: inherit; } }

.ta_cnt { text-align: center; }

.ta_right { text-align: right; }

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

/*============================================================================
	action
=============================================================================*/
.fadein, .fadein02, .fadein03 { opacity: 0; transition: all 1.4s; }
.fadein.show, .fadein02.show, .fadein03.show { opacity: 1; }

/* scroll */
.fade { opacity: 0; transition: all 2s; }
.fade.active { opacity: 1; }

.upfade { transform: translate(0, 50px); opacity: 0; transition: all 1.0s; }
.upfade.scrollin { transform: translate(0, 0); opacity: 1; }

.downfade { transform: translate(0, -50px); opacity: 0; transition: all 1.0s; }
.downfade.scrollin { transform: translate(0, 0); opacity: 1; }

.sclinWrap { overflow: hidden !important; }

.sclin_right { transform: translate(50px, 0); opacity: 0; transition: all 1.0s; }
.sclin_right.scrollin { transform: translate(0, 0); opacity: 1; }

.sclin_left { transform: translate(-50px, 0); opacity: 0; transition: all 1.0s; }
.sclin_left.scrollin { transform: translate(0, 0); opacity: 1; }

.listfade li { transform: translate(0, 50px); opacity: 0.1; transition: all 1.0s; }
.listfade li.scrollin { transform: translate(0, 0); opacity: 1; }