@charset "utf-8"; /*--------------------------------------
# Header
--------------------------------------*/
#header {
clear: both;
line-height: 1.2;
}

#header .header-wrapper {
padding: 0 60px 0 20px;
}

#header .site-title {
display: flex;
flex-direction: column;
justify-content: space-evenly;
min-height: 75px;
}

#header .site-title h1 {
margin-top: -0.1em;
font-size: 1rem;
font-weight: normal;
letter-spacing: -0.05em;
}

#header .site-title a {
display: block;
width: 196px;
height: 0;
padding-top: 39px;
background: url(../img/site-title_left.svg) no-repeat;
background-size: contain;
text-decoration: none;
overflow: hidden;
}

#header .supplement-nav {
display: none;
}

#header .global-nav-icon {
position: fixed;
right: 0;
top: 7px;
z-index: 999;
}

#header .global-nav-icon a {
align-items: center;
color: #000;
display: flex;
flex-direction: column;
font-size: 34px;
height: 60px;
justify-content: center;
position: relative;
text-decoration: none;
transition: .2s;
width: 60px;
}

body.scroll #header .global-nav-icon a {
opacity: .6;
}

#header .global-nav-icon a .i {
border-bottom: 2px solid;
display: block;
margin: 5px 0;
transition: .2s;
width: 28px;
}

body.open #header .global-nav-icon a {
color: #fff;
opacity: 1;
transform: rotate(135deg);
}

body.open #header .global-nav-icon a .i {
margin: 0;
}

body.open #header .global-nav-icon a .i.t {
transform: rotate(90deg);
}

body.open #header .global-nav-icon a .i.m {
border: none;
opacity: 0;
}

body.open #header .global-nav-icon a .i.b {
transform: translateY(-1px);
}

@media all and (max-width: 949px) {
#header .global-nav {
position: fixed;
top: 0;
left: 0;
z-index: 998;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 40%);
overflow: auto;
transition: 0.15s background, 0s 0s left;
}

body:not(.open) #header .global-nav {
left: -100%;
background: none;
transition: 0.15s background, 0s 0.15s left;
}

#header .global-nav .global-nav-wrapper {
min-height: 100%;
margin-right: 20%;
background: #FFF;
box-shadow: 1px 0 4px rgb(0, 0, 0, 0.25);
transition: 0.3s transform;
}

body:not(.open) #header .global-nav .global-nav-wrapper {
transform: translateX(-100%);
}

#header .global-nav .nav-item {
border-bottom: 1px solid #CCC;
}

#header .global-nav .nav-item-name {
position: relative;
display: block;
padding: 15px 20px;
text-decoration: none;
cursor: pointer;
}

#header .global-nav .nav-item-name:after {
content: '';
position: absolute;
top: 50%;
right: 10px;
width: 7px;
height: 7px;
border-top: 1px solid;
border-right: 1px solid;
opacity: 0.6;
transform: translate(-50%, -50%) rotate(45deg);
transition: 0.2s;
}

#header .global-nav .nav-item-name.has-child:after {
transform: translate(-50%, -50%) rotate(-45deg);
}

#header .global-nav .nav-item:not(.open) .nav-item-name.has-child:after {
transform: translate(-50%, -50%) rotate(135deg);
}

#header .global-nav .sns-link {
display: flex;
justify-content: center;
padding: 20px;
line-height: 1.2;
}

#header .global-nav .sns-link li {
margin: 0 10px;
}

#header .global-nav .sns-link a {
display: block;
text-decoration: none;
transition: 0.2s;
}

#header .global-nav .sns-link i {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
padding-left: 0.05em;
color: #FFF;
border-radius: 6px;
text-decoration: none;
}

#header .global-nav .sns-link i.x {
background: #000 url(../img/icon/x.png) no-repeat;
background-size: 100%;
}

#header .global-nav .sns-link i.instagram {
background: url(../img/icon/instagram.png) no-repeat;
background-size: 100%;
}

#header .global-nav .inquiry-btn {
padding: 0 20px;
}

#header .global-nav .inquiry-btn a {
font-weight: bold;
text-decoration: none;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding: 12px 0;
color: #FFF;
font-size: 1.6rem;
font-family: 'Noto Sans JP', sans-serif;
background: #1897f2;
border-radius: 4px;
}

#header .global-nav .inquiry-btn i.envelope {display: block;width: 1em;height: 1em;margin: 0.1em 0.4em 0 0;font-size: 130%;background: url(../img/icon/envelope-regular.svg) no-repeat center;background-size: 100%;}

#header .global-nav .child-nav {
clear: both;
padding: 12px 20px;
font-size: 85%;
background: #f1f4f7;
overflow: hidden;
transition: 0.2s;
}

#header .global-nav .nav-item:not(.open) .child-nav {
height: 0;
padding-top: 0;
padding-bottom: 0;
line-height: 0;
opacity: 0;
}

#header .global-nav .child-nav a {
position: relative;
display: block;
padding: 0.5em 0 0.5em 1.2em;
}

#header .global-nav .child-nav a:before {
content: '';
position: absolute;
top: 1.05em;
left: 0.3em;
width: 5px;
height: 5px;
border: 1px solid;
border-radius: 100%;
transform: translateY(-50%);
opacity: 0.6;
}
}

@media all and (min-width: 950px) {
#header {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
background: #FFF;
}

body.scroll #header {
box-shadow: 0 0 6px rgb(0 0 0 / 40%);
}

#header .header-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px min(6%, 80px);
}

#header .site-title {
flex-direction: column-reverse;
justify-content: space-between;
align-items: center;
text-align: center;
}

#header .site-title h1 {
margin: 0 0 -0.4em;
font-size: 1.1rem;
line-height: 1.45;
letter-spacing: 0.05em;
}

#header .site-title a {
width: 236px;
margin-bottom: 5px;
padding-top: 56px;
background: url(../img/site-title_r_center.svg) no-repeat;
background-size: contain;
}

#header .header-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
}

#header .supplement-nav {
display: block;
margin-bottom: 12px;
}

#header .supplement-nav ul {
display: flex;
justify-content: flex-end;
align-items: center;
}

#header .supplement-nav ul li {
margin: 0 7px;
}

#header .supplement-nav ul li.inquiry {
margin: 0 0 0 12px;
}

#header .supplement-nav ul a {
display: block;
text-decoration: none;
transition: 0.2s;
}

#header .supplement-nav ul i {
display: block;
width: 28px;
height: 0;
padding: 28px 0 0 0.05em;
color: #FFF;
border-radius: 6px;
text-decoration: none;
overflow: hidden;
}

#header .supplement-nav ul i.x {
background: #000 url(../img/icon/x.png) no-repeat;
background-size: 100%;
}

#header .supplement-nav ul i.instagram {
background: url(../img/icon/instagram.png) no-repeat;
background-size: 100%;
}

#header .supplement-nav .inquiry a {
font-weight: bold;
text-decoration: none;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding: 12px 20px;
color: #FFF;
font-size: 1.5rem;
font-family: 'Noto Sans JP', sans-serif;
background: #0077cc;
border-radius: 4px;
}

#header .supplement-nav .inquiry i.envelope {display: block;width: 1em;height: 1em;margin: 0.1em 0.4em 0 0;font-size: 130%;background: url(../img/icon/envelope-regular.svg) no-repeat center;background-size: 100%;}

#header .supplement-nav a:hover {
opacity: 0.6;
}

#header .global-nav-icon {
display: none;
}

body:not(.open) #header .global-nav-icon a i.close,#header .global-nav {
margin: -0.25em -0.25em -0.25em 0;
}

#header .global-nav ul.nav-wrapper {
display: flex;
}

#header .global-nav .nav-item {
position: relative;
margin-left: 1em;
}

#header .global-nav .nav-item-name {
display: block;
padding: 0.5em;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.5rem;
text-decoration: none;
transition: 0.2s;
}

#header .global-nav .nav-item-name:hover {
opacity: 0.6;
}

#header .global-nav .nav-item:hover .nav-item-name {
color: #0b8eeb;
}

#header .global-nav .child-nav {
position: absolute;
top: 100%;
left: 50%;
min-width: 100%;
font-size: 84%;
background: #FFF;
white-space: nowrap;
transform: translateX(-50%);
box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
overflow: hidden;
transition: 0.2s opacity;
}

#header .global-nav .column .child-nav {
left: auto;
right: 0;
max-height: 60vh;
transform: none;
overflow: auto;
}

#header .global-nav .column .child-nav::-webkit-scrollbar {
width: 5px;
}

#header .global-nav .column .child-nav::-webkit-scrollbar-thumb {
background: #999;
border: 1px solid #FFF;
border-radius: 5px;
}

#header .global-nav .nav-item:not(:hover) .child-nav {
height: 0;
padding-top: 0;
padding-bottom: 0;
line-height: 0;
opacity: 0;
}

#header .global-nav .child-nav li:not(:last-child) {
border-bottom: 1px dotted #CCC;
}

#header .global-nav .child-nav a {
position: relative;
display: block;
padding: 13px 20px 11px 35px;
text-decoration: none;
transition: 0.2s;
}

#header .global-nav .child-nav a::before {
content: '';
position: absolute;
top: 50%;
left: 20px;
width: 0;
height: 0;
margin-top: -3px;
border: 3px solid transparent;
border-left: 5px solid #0b8eeb;
}

#header .global-nav .child-nav a:hover {
background: #e9f6ff;
}
}

/*--------------------------------------
# Footer
--------------------------------------*/
#footer {
position: relative;
clear: both;
padding-bottom: 50px;
font-size: 90%;
background: #f1f4f7;
border-top: 1px solid #CCC;
}

#footer .information {
clear: both;
padding: 40px 20px;
text-align: center;
}

#footer .site-title a {
display: block;
width: 218px;
height: 0;
margin: 0 auto;
padding-top: 42px;
background: url(../img/site-title_center.svg) no-repeat;
background-size: contain;
text-decoration: none;
overflow: hidden;
/* filter: grayscale(1) brightness(100); */
}

#footer .information address {
margin-bottom: 1.5em;
font-style: normal;
}

#footer .information address p {
margin-bottom: 1em;
}

#footer .information .sns-link ul {
display: flex;
justify-content: center;
line-height: 1.2;
}

#footer .information .sns-link {
margin: 25px 0;
}

#footer .information .sns-link li {
margin: 0 10px;
}

#footer .information .sns-link a {
display: block;
text-decoration: none;
transition: 0.2s;
}

#footer .information .sns-link i {
display: block;
width: 30px;
height: 0;
padding: 30px 0 0 0.05em;
color: #FFF;
border-radius: 6px;
text-decoration: none;
overflow: hidden;
}

#footer .information .sns-link i.x {
background: #000 url(../img/icon/x.png) no-repeat;
background-size: 100%;
}

#footer .information .sns-link i.instagram {
background: url(../img/icon/instagram.png) no-repeat;
background-size: 100%;
}

#footer .inquiry-nav {
display: flex;
justify-content: center;
line-height: 1.2;
}

#footer .inquiry-nav ul a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
}

#footer .inquiry-nav ul .tel {
margin-bottom: 12px;
}

#footer .inquiry-nav ul .tel .num {
display: flex;
align-items: baseline;
margin-bottom: -0.1em;
font-size: 3.4rem;
font-weight: 500;
font-family: 'Questrial', sans-serif;
letter-spacing: -0.025em;
}

#footer .inquiry-nav ul .tel img {
display: block;
width: 1.1em;
margin-right: 0.4rem;
}

#footer .inquiry-nav ul .tel .small {
display: block;
font-size: 1.1rem;
}

#footer .inquiry-nav ul .mail a {
flex-direction: row;
padding: 12px 0;
color: #FFF;
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.6rem;
background: #0077cc;
border-radius: 4px;
}

#footer .inquiry-nav ul .mail a i {display: block;width: 1em;height: 1em;margin: 0.1em 0.4em 0 0;font-size: 130%;background: url(../img/icon/envelope-regular.svg) no-repeat center;background-size: 100%;}

#footer .copylight {
clear: both;
padding: 40px 20px;
text-align: center;
}

#footer .copylight p {
margin-bottom: 0;
color: #666;
}

#footer .copylight small {
font-size: 1.1rem;
}

#footer .footer-sitemap {
clear: both;
margin: 0 20px;
padding-top: 2em;
font-size: min(3.5vw, 1.3rem);
border-top: 1px solid #ccc;
line-height: 1.2;
}

#footer .footer-sitemap ul {
display: flex;
justify-content: center;
margin-bottom: 1em;
}

#footer .footer-sitemap .nav-item-name {
display: block;
text-decoration: none;
}

#footer .footer-sitemap li:not(:last-child) .nav-item-name:after {
content: '／';
margin: 0 0.8em;
color: #999;
}

@media all and (min-width: 950px) {
#footer {
padding: 60px 0 20px;
}

#footer .footer-wrapper {
/* display: flex; */
/* flex-wrap: wrap; */
padding: 0 min(6%, 80px);
}

#footer .information {
padding: 0;
}

#footer .site-title a {
width: 246px;
padding-top: 48px;
background: url(../img/site-title_center.svg) no-repeat;
background-size: contain;
}

#footer .information address {
margin-bottom: 2.5em;
}

#footer .information .sns-link {
margin: 35px 0;
}

#footer .information .sns-link a {
transition: 0.2s;
}

#footer .information .sns-link a:hover {
opacity: 0.6;
transition: 0.2s;
}

#footer .inquiry-nav {
margin-bottom: 35px;
}

#footer .inquiry-nav ul {
display: flex;
justify-content: center;
align-items: center;
}

#footer .inquiry-nav ul .tel,#footer .inquiry-nav ul .mail {
margin: 0 20px;
}

#footer .inquiry-nav ul .mail a {
padding: 12px 30px;
font-size: 1.7rem;
transition: 0.2s;
}

#footer .inquiry-nav ul .mail a:hover {
opacity: 0.6;
}

#footer .footer-sitemap {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0;
padding: 35px 0;
}

#footer .footer-sitemap ul {
display: contents;
}

#footer .footer-sitemap .nav-item-name:after {
content: '／';
margin: 0 0.8em;
color: #999;
}

#footer .footer-sitemap ul:last-child li:last-child .nav-item-name:after {
display: none;
}

#footer .footer-sitemap .nav-item-name {
transition: 0.2s;
}

#footer .footer-sitemap .nav-item-name:hover {
opacity: 0.6;
}

#footer .copylight {
padding: 0;
}
}

/*--------------------------------------
# pagetop
--------------------------------------*/
#pagetop {
position: fixed;
right: 10px;
bottom: 60px;
z-index: 997;
opacity: 1;
transition: 0.2s opacity, 0s 0s right;
}

body:not(.scroll) #pagetop {
right: 100%;
opacity: 0;
transition: 0.2s opacity, 0s 0.2s right;
}

#pagetop a {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
font-size: 26px;
text-decoration: none;
background: rgb(204 204 204 / 80%);
text-align: center;
}

#pagetop a i {
  display: block;
  width: 1em;
  height: 0;
	padding-top: 1em;
  background: url(../img/icon/angle-up-solid.svg) no-repeat center;
  background-size: 90%;
	overflow: hidden;
}

@media all and (min-width: 950px) {
#pagetop {
right: 15px;
bottom: 15px;
}

#pagetop a {
transition: 0.2s;
}

#pagetop a:hover {
opacity: 0.6;
}
}

/*--------------------------------------
# fixed-nav
--------------------------------------*/
#fixed-nav {
position: fixed;
left: 0;
bottom: 0;
z-index: 997;
width: 100%;
background: #0077cc;
line-height: 1.2;
transition: 0.2s;
}

body:not(.scroll) #fixed-nav {
transform: translateY(100%);
}

#fixed-nav ul {
display: flex;
}

#fixed-nav li {
flex: 1;
}

#fixed-nav li:not(:first-child) {
border-left: 1px solid rgb(255 255 255 / 40%);
}

#fixed-nav a {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
color: #FFF;
font-weight: bold;
text-decoration: none;
}

#fixed-nav .tel a {
font-size: 2.4rem;
font-weight: 100;
font-family: 'Questrial', sans-serif;
letter-spacing: -0.025em;
}

#fixed-nav .tel img {
display: block;
width: 2.6rem;
margin: 0 0.3rem 1.0rem 0;
filter: grayscale(1) brightness(100);
}

#fixed-nav .tel .small {
display: block;
margin-top: -0.2em;
font-size: 1.0rem;
}

#fixed-nav .mail a {
font-family: 'Noto Sans JP', sans-serif;
font-size: 1.5rem;
letter-spacing: -0.05em;
}

#fixed-nav .mail i {display: block;width: 1em;height: 1em;margin: 0.1em 0.3em 0 0;font-size: 130%;background: url(../img/icon/envelope-regular.svg) no-repeat center;background-size: 100%;}

@media all and (min-width: 950px) {
#fixed-nav {
display: none;
}
}