@charset "utf-8";

@keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes slidein {
    0% {
        opacity: 0;
        transform: translateY(15px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeout {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes clipmask {
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0)
    }

    100% {
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0)
    }
}

@keyframes washing {
    0% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    80% {
        opacity: 1
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 0
    }

    0% {
        transform-origin: left center;
        transform: scale(.8) translateX(0)
    }

    35% {
        transform-origin: left center;
        transform: scale(1) translateX(0)
    }

    100% {
        transform-origin: left center;
        transform: scale(1) translateX(0)
    }
}

* {
    font-style: normal;
    list-style: none;
    margin: 0;
    padding: 0
}

figure,
nav {
    display: block
}

ul {
    padding: 0
}

html {
    font-size: 10px
}

body {
    background: #fff;
    color: #000;
    font-family: proxima-nova, source-han-sans-japanese, sans-serif;
    font-weight: 200;
    font-size: 10px;
    text-align: center;
    -webkit-text-size-adjust: 100%
}

.anchor {
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0
}

img {
    vertical-align: top
}

a {
    color: #000
}

a:hover {
    text-decoration: none
}

@media screen and (min-width:769px) {
    a[href^="tel:"] {
        pointer-events: none;
        text-decoration: none !important
    }
}

@media screen and (max-width:768px) {
    .c-pc {
        display: none
    }
}

@media screen and (min-width:769px) {
    .c-sp {
        display: none
    }
}

.headerCategory__wrapper {
	box-sizing: border-box;
}

.headerCategory__heading {
	text-align: left;
}

.headerCategory__navContents {
	text-align: left;
}

.headerCategory__navContents .sitemenu__wrapper {
	color: #fff;
	padding: 20px 30px 0;
}

@media screen and (max-width: 768px) {
    #siteHeader {
        text-align: left;
        font-size: 15px
    }

    #siteHeader p.siteHeader__infoLogo {
        margin: 5px 0 5px 5px;
    }

    #siteHeader .siteHeader__infoLogo img {
        height: 25px;
    }

    .headerCategory__wrapper {
        width: auto;
    }

    .headerCategory__heading {
        font-size: 16px;
    }

    .headerCategory__navBlockHead {
    	font-size: 15px;
    }
}

@media screen and (min-width: 769px) {
    #siteHeader,
    #siteContent ol.topicPath,
    #siteContent .headerCategory {
        width: auto;
    }

    #siteHeader {
        position: relative;
        height: 70px;
    }

    .siteHeader__info {
        float: none;
        position: absolute;
        left: 30px;
        z-index: 1;
    }

    .siteHeader__infoLogo {
        padding-left: 0;
        margin: 10px 0 0 0;
    }

    #siteHeader .siteHeader__infoLogo img {
        width: 125px;
    }

    .siteHeader__navi {
        float: none;
        position: absolute;
        width: 100%;
        top: 20px;
    }

    .siteNavi__naviMenu {
        margin-right: 30px;
    }

    #siteGlobalNav {
    	background-color: #fff;
        margin: 0 30px 0 auto;
        position: relative;
        z-index: 2;
    }

    #siteGlobalNav::before {
		background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    	content: "";
    	height: 100%;
    	left: -20px;
        position: absolute;
        width: 20px;
    }

    .siteGlobalNavChild__wrapper {
        width: auto;
    }

    .siteGlobalNavChild__block #productSubNav,
    .siteGlobalNavChild__blockService,
    .siteGlobalNavChild__blockSearch {
        width: 900px;
        margin: 0 auto;
    }

    #siteContent ol.topicPath,
    #siteContent.fullColumn ol.topicPath {
        margin-left: 30px;
    }

    .headerCategory__wrapper {
        padding-left: 30px;
    }

    #siteContent .headerCategory,
    #siteContent.fullColumn .headerCategory {
    	width: 100%;
    }

    #siteContent .headerCategory.fixed .headerCategory__wrapper,
    #siteContent.fullColumn .headerCategory.fixed .headerCategory__wrapper {
    	width: 100%;
    }

    #siteContent .headerCategory.fixed .headerCategory__content,
    #siteContent.fullColumn .headerCategory.fixed .headerCategory__content {
    	width: 100%;
    }

    .headerCategory__navContents {
    	width: 100vw;
    }

    .headerCategory__navBlockHead {
    	font-size: 14px;
    }
}

.topicPath li {
    position: relative;
    z-index: 1001
}

@media screen and (min-width:769px) {
    .topicPath {
    	position: relative;
    	z-index: 1;
    }
}

#siteGlobalNav:hover+.siteGlobalNavChild {
    z-index: 110
}

.siteGlobalNavChild {
    text-align: left
}

.siteGlobalNavChild:hover {
    z-index: 110
}

@media screen and (max-width:768px) {
    #mGlobalNavWrapper {
        z-index: 1000
    }
}

#siteContent {
	padding-bottom: 0;
}

#siteContent__article {
	text-align: left;
}

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

	#siteContent {
		width: 100%;
	}

}

@media screen and (max-width:768px) {
    .l-all {
        width: 100%;
        min-width: 320px
    }
}

.l-title {
    -ms-flex-align: center;
    align-items: center;
    background: #f5f6f6;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 30px;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: all 250ms ease
}

@media screen and (max-width:768px) {
    .l-title {
        height: 40px;
        padding: 0 20px
    }
}

.l-title h1,
.l-title p {
    font-size: 2.4rem;
    font-weight: 400;
    transition: all 250ms ease
}

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

    .l-title h1,
    .l-title p {
        font-size: 1.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

.l-title[data-menu=open] {
    background: #282322;
    color: #fff
}

.l-title[data-menu=open] .sitemenu__btn::before {
    top: 24px;
    transform: rotate(45deg)
}

@media screen and (max-width:768px) {
    .l-title[data-menu=open] .sitemenu__btn::before {
        top: 20px
    }
}

.l-title[data-menu=open] .sitemenu__btn::after {
    bottom: 24px;
    transform: rotate(-45deg)
}

@media screen and (max-width:768px) {
    .l-title[data-menu=open] .sitemenu__btn::after {
        bottom: 19px
    }
}

.l-title[data-menu=open] .sitemenu__body {
    background: #282322;
    height: calc(100vh - 50px);
    overflow: auto
}

@media screen and (max-width:768px) {
    .l-title[data-menu=open] .sitemenu__body {
        height: calc(100vh - 40px);
        height: calc(100dvh - 40px)
    }
}

.sitemenu__btn {
    cursor: pointer;
    height: 50px;
    margin-right: -4px;
    position: relative;
    width: 50px
}

@media screen and (max-width:768px) {
    .sitemenu__btn {
        height: 40px;
        margin-right: -6px;
        width: 40px
    }
}

.sitemenu__btn::after,
.sitemenu__btn::before {
    background: currentColor;
    content: "";
    height: 2px;
    margin: 0 auto;
    position: absolute;
    width: 42px;
    inset: auto 0;
    transition: all 250ms ease
}

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

    .sitemenu__btn::after,
    .sitemenu__btn::before {
        height: 1px;
        width: 30px
    }
}

.sitemenu__btn::before {
    top: 16px
}

@media screen and (max-width:768px) {
    .sitemenu__btn::before {
        top: 15px
    }
}

.sitemenu__btn::after {
    bottom: 16px
}

@media screen and (max-width:768px) {
    .sitemenu__btn::after {
        bottom: 15px
    }
}

.sitemenu__body {
    background: #f5f6f6;
    box-sizing: border-box;
    height: 0;
    left: 0;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 30px;
    position: absolute;
    right: 0;
    top: 50px;
    transition: background 250ms ease, height .5s cubic-bezier(.785, .135, .15, .86)
}

@media screen and (max-width:768px) {
    .sitemenu__body {
        padding: 0 20px;
        top: 40px
    }
}

.sitemenu__wrapper {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px 0 20px;
    text-align: left
}

@media screen and (max-width:768px) {
    .sitemenu__wrapper {
        padding: 20px 0 20px
    }
}

.sitemenu__wrapper a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none
}

.sitemenu__wrapper a:hover {
    text-decoration: underline
}

.sitemenu__top {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 20px;
    text-align: left
}

@media screen and (min-width:769px) {
    .sitemenu__column {
        display: -ms-flexbox;
        display: flex;
        gap: 20px;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

.sitemenu__column dt {
    border-left: 1px solid #b0b0b0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.1em;
    padding: 2px 0 20px 25px
}

@media screen and (max-width:1000px) {
    .sitemenu__column dt {
        padding: 2px 0 20px 15px
    }
}

.sitemenu__column dd {
    border-left: 1px solid #b0b0b0;
    font-size: 1.3rem;
    line-height: 2.076em;
    margin: 0 0 30px;
    padding: 0 0 5px 25px
}

@media screen and (max-width:1000px) {
    .sitemenu__column dd {
        padding: 0 0 5px 15px
    }
}

.sitemenu__column dd ul {
    padding: 0 0 0 30px
}

@media screen and (max-width:1000px) {
    .sitemenu__column dd ul {
        padding: 0 0 0 15px
    }
}

.sitemenu__column dd ul+p {
    margin-top: 30px
}

@media screen and (max-width:768px) {
    .sitemenu__column dd ul+p {
        margin-top: 15px
    }
}

.sitemenu__column dd p {
    color: #b0b0b0;
    font-size: inherit;
    margin: 0 0 10px
}

@media screen and (max-width:768px) {
    .sitemenu__column dd p {
        margin: 0 0 5px
    }
}

.sitemenu__footer {
    background: #282322;
    color: #fff;
    padding: 30px;
    text-align: left
}

@media screen and (max-width:768px) {
    .sitemenu__footer {
        padding: 20px;
        display: none
    }
}

.sitemenu__footer>p {
    font-size: 2.1rem;
    font-weight: 200;
    line-height: 1.5em;
    margin: -5px 0 5px
}

.footer {
    font-size: 1.2rem;
    line-height: 2em;
    padding: 30px 30px 15px
}

@media screen and (max-width:768px) {
    .footer {
        font-size: 1.1rem;
        padding: 20px
    }
}

.footer a {
    color: #000;
    font-weight: inherit;
    text-decoration: none
}

.footer a:hover {
    text-decoration: underline
}

.footer__menu {
    display: -ms-flexbox;
    display: flex;
    font-weight: 200;
    gap: 10px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto 35px;
    max-width: 1000px;
    padding: 0;
    text-align: left
}

.footer__menu dl {
    margin: 0;
    padding: 0;
}

.footer__menu dt {
    margin: 0;
    padding: 0;
}

.footer__menu dd {
    margin: 0;
    padding: 0;
}

@media screen and (max-width:768px) {
    .footer__menu {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0;
        display: none
    }
}

@media screen and (max-width:768px) {
    .footer__menu dl {
        margin: 0 0 20px;
        width: calc(50% - 5px)
    }
}

.footer__menu dt {
    margin: 2px 0 12px
}

@media screen and (max-width:768px) {
    .footer__menu dt {
        font-size: 1.4rem;
        font-weight: 400;
        margin: 0
    }
}

.footer__menu dt::after {
    background: #b0b0b0;
    content: "";
    display: block;
    height: 2px;
    margin: 20px 0 0;
    width: 30px
}

@media screen and (max-width:768px) {
    .footer__menu dt::after {
        height: 1px;
        margin: 8px 0 8px;
        width: 20px
    }
}

@media screen and (max-width:768px) {
    .footer__menu dd {
        -ms-flex-positive: 10;
        flex-grow: 10;
        font-size: 1.2rem
    }
}

.footer__menu ul {
    margin: 0;
    padding: 0
}

.footer__menu ul li {
    margin: 0;
    padding: 0
}

.footer__submenu {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: .3em 2em;
    margin: 0 0 5px;
    padding: 0
}

.footer__submenu li {
    margin: 0;
    padding: 0
}

.footer__copyright {
    display: block;
    font-size: 1.2rem;
    font-weight: 200;
    line-height: 2em;
    text-align: left
}