@charset "utf-8";
/* CSS Document */

/***********
base
************/
html,
body {height: 100%;min-height: 100%;font-size: 13px;color: #191919;font-weight: normal;font-family: '游ゴシック Medium', 'Yu Gothic Medium','游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;line-height: 1.5;letter-spacing: 0.02em;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
body.is-menu-open {overflow: hidden;}
h1,h2,h3,h4,h5,h6,strong,th{font-family: '游ゴシック体', YuGothic,'游ゴシック', 'Yu Gothic', sans-serif;}

@media screen and (max-width:1280px) {body{font-size: 12px;}
}
@media screen and (max-width:834px) {body{font-size:calc(9px + 0.7vmin);-webkit-tap-highlight-color:transparent;}
}
@media screen and (max-width:520px) {body{font-size:calc(9px + 1vmin);-webkit-tap-highlight-color:transparent;}
}


@media all and (-ms-high-contrast:none) {/* meiryo only IE */
body {font-family: Meiryo,sans-serif;}
}

a {color: #333 ;text-decoration: none;transition:all 0.2s ease;}

a:visited{}
a:hover,
a:active {text-decoration: none;}
img {width: auto;max-width: 100%;height: auto;}
::selection {background: rgba(0, 144, 202, 0.5); /* Safari */}
::-moz-selection {background: rgba(0, 144, 202, 0.5); /* Firefox */}

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

/***********************
layout
************************/

/***********
wp
************/
.right,.alignright {float: right !important; }
.left,.alignleft{float: left !important; }
.aligncenter{ display: block; margin-left:auto; margin-right:auto; }


/***********
common
************/
.l-relative {position: relative !important; }
.l-textAlign-center {text-align: center !important; }
.l-textAlign-right{text-align: right !important; }
.l-textAlign-left {text-align: left !important; }


/***********
layout
************/
.l-wrapper{}
.l-contents{overflow: hidden;}
.l-contents-offset{margin-top: 130px;}
@media screen and (max-width:834px) {
.l-contents-offset{margin-top: 70px;}
}


/***********
base
************/
.l-base {width: auto;max-width: 1060px;margin-left: auto;margin-right: auto;padding-left: 30px;padding-right: 30px;}
.l-base-wide {width: auto;max-width: 1180px;margin-left: auto;margin-right: auto;padding-left: 30px;padding-right: 30px;}
.l-base-xwide {width: auto;max-width: 1660px;margin-left: auto;margin-right: auto;padding-left: 30px;padding-right: 30px;}

@media screen and (max-width:834px) {
.l-base ,
.l-base-wide ,
.l-base-xwide ,
.l-base-small {box-sizing: border-box;padding-left: 0;padding-right: 0;}
.l-base:not(.l-base-noOffset),
.l-base-wide:not(.l-base-noOffset),
.l-base-xwide:not(.l-base-noOffset),
.l-base-small:not(.l-base-noOffset){padding-left: 5%;padding-right: 5%;}
.l-base-wide .l-base,
.l-base-wide .l-base-small,
.l-base .l-base-small {padding-left: 0;padding-right: 0;}
}

/***********
zoom
************/
.l-zoomHover{overflow: hidden;z-index: 2;position: relative;}
.l-zoomHover img{transform:scale(1) ;transition:all 0.5s cubic-bezier(0.5, 1, 0.89, 1);}
a:hover .l-zoomHover img:hover{transform:scale(1.03) ;}


/***********
l-zoomOut
************/
.l-zoomOut{transform:scale(1.08) ;transition:all 2s cubic-bezier(0.5, 1, 0.89, 1);}
.is-show.l-zoomOut{transform:scale(1) ;}


/***********
l-hoverUnderline
************/
.l-hoverUnderline {padding-bottom: 0.2em;background: linear-gradient(#000, #000) 0 100% / 0 1px no-repeat;transition: background 0.3s;text-decoration: none;}
.l-hoverUnderline:hover {background-size: 100% 1px;}


/***********
l-mask
************/
.l-mask {display: inline-block;clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%);transition: all 1s cubic-bezier(0.5, 1, 0.89, 1);vertical-align: middle;}
.is-show .l-mask,
.is-show.l-mask {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);}
.l-mask.is-full {width: 100%;}


/***********
text
************/
.l-textMain{font-size: 116%;line-height: 2;}
.l-textTips{font-size: 100%;line-height: 1.7;}
.l-list-dot {}
.l-list-dot li {font-size: 116%;line-height: 2;margin-left: 1em;}
.l-list-dot li::before {content: "・";margin-left: -1em;}
.l-list-asterisk {}
.l-list-asterisk li {font-size: 116%;line-height: 2;margin-left: 1em;}
.l-list-asterisk li::before {content: "※";margin-left: -1em;}

@media screen and (max-width:834px) {
.l-textMain,
.l-list-dot li ,
.l-list-asterisk li{font-size: 100%;line-height: 1.8;}
.l-textTips{font-size: 85%;line-height: 1.6;}
}



/***********
btn
************/
.l-btn {display: inline-block;width: auto;padding: 12px 40px 12px 40px;font-size: 124%;color: #000;text-decoration: none !important;border: 1px solid #000;transition: all 0.2s ease;position: relative;}
.l-btn::after {font-family: 'Font Awesome 6 Free';-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;display: var(--fa-display, inline-block);font-weight: 900;font-style: normal;font-variant: normal;line-height: 1;text-rendering: auto;content: "\f054";position: absolute;right: 10px;top: 50%;margin-top: -0.5em;line-height: normal;}
.l-btn:hover {background-color: #000;color: #fff;}
.l-btn-small {font-size: 108%;padding: 8px 30px 8px 30px;}
.l-btn-large {font-size: 154%;padding: 17px 40px 17px 40px;}
.l-btn-block {padding-left: 0;padding-right: 0;display: block;text-align: center;}

@media screen and (max-width:834px) {
.l-btn {width: 100%;font-size: 108%;box-sizing: border-box;padding: 12px 0px 12px 0px;text-align: center;}
}


/***********
header
************/
.l-header {position: fixed;left: 0;top: 0;width: 100%;padding-top: 20px;z-index: 999;}
.l-header-inner {position: relative;}
.l-header-logo {position: absolute;left: 0;top: 0;margin-left: 10px;width: 100%;}
.l-header-logo span {font-size: 12px;font-weight: 400;position: absolute;display: block;left: 185px;top: 14px;}
.l-header-logo img {width: 180px;}
.l-header-block {position: absolute;right: 0;top: 0;display: flex;align-items: center;padding-right: 120px;}
.l-header-link {}
.l-header-link a {display: inline-block;padding: 0.5em 55px 0.5em 1em;font-size: 116%;font-weight: 400;font-family: 'Poppins', sans-serif;color: #000;text-decoration: none;position: relative;}
.l-header-link a::before,
.l-header-link a::after{content: "";display: block;width: 12px;height: 1px;background-color: #000;position: absolute;right: 10px;top: 50%;}
.l-header-link a::after{transform: rotate(90deg);}

@media screen and (max-width:834px) {
.l-header {padding-top: 15px;left: -5px}
.l-header-logo img {width: 150px;}
.l-header-logo span {font-size: 12px;font-weight: 400;position: absolute;display: block;left: 155px;top: 10px;}
.l-header-block {padding-top: 8px;padding-right: 65px;}
.l-header-link {display: none;}
.l-header-link a {display: inline-block;padding: 0.2em 16px 0.2em 0;font-size: 11px;}
.l-header-link a::before,
.l-header-link a::after{width: 7px;right: 0;}
}



/***********
footer
************/
footer a {text-decoration: none;}
.row {--bs-gutter-x:1.5rem;--bs-gutter-y: 0;display: flex;flex-wrap: wrap;}
[class*='col'] {position: relative;}
.row>* {flex-shrink: 0;width: 100%;max-width: 100%;}
.col-md-6 {flex: 0 0 auto;width: 50%;}
.row>* {flex-shrink: 0;width: 100%;max-width: 100%;}
.mx-auto {margin-right: auto!important;margin-left: auto!important;}
.text-white {color: #fff!important;}
.flex-md-row {flex-direction: row!important;}
footer .info img {width: 100px;margin: 0 0 20px;}

@media only screen and (max-width: 767px) {
.pc {display: none !important}
.sp {display: block !important}
.links ul {font-size: 16px;list-style-type: none;display: flex;flex-direction: column;text-align: center;}
.links ul li {padding: 5px 0;}
.links ul li a {padding: 5px 0;position: relative;display: inline-block;color: #404040;}
.links ul li a::before {width: 0%;height: 1px;background-color: #404040;position: absolute;left: 0;bottom: 0;content: '';transition: all .5s;}
.links ul li a:hover::before {width: 100%;}
.more-btn01 {display: block;width: fit-content;position: relative;padding-right: 50px;padding-bottom: 15px;overflow: hidden;}
.more-btn01::before {content: '';height: 1px;width: 100%;background-color: #404040;position: absolute;left: 0;bottom: 8px;transition: all .9s;}
.more-btn01::after {content: '';height: 5px;width: 29px;background-image: url(img/more-btn-arrow.svg);position: absolute;right: 0;top: 8px;background-repeat: no-repeat;}
.more-btn01:hover::before {animation: btnanim 1s 1;}
@keyframes btnanim {from {left: -100%;}
to {left: 0%;}}
.flex-column-reverse {flex-direction: column-reverse!important;}
footer {padding: 100px 0 20px;background-color: #4B4B4B;margin-top: -10px;text-align: center;}
footer .mt50 {margin-top: 32px;}
footer .wrap {max-width: 1180px;padding: 0 10px;margin: auto;position: relative;}
footer h2 {font-weight: normal;font-size: 16px;letter-spacing: 0.1em;line-height: 36px;color: #fff;}
footer p {line-height: 24.5px;}
footer .copyright {font-weight: normal;font-size: 12px;letter-spacing: 0.1em;line-height: 22px;color: #fff;}
footer .more-btn01::before {background-color: white;}
footer .more-btn01::after {background-image: url(../img/more-btn-arrow.svg);}
footer .links ul {display: none;}
footer .info {margin-top: 50px;}
footer .info img {width: 50px;margin: 0 0 20px;}
footer .jp {font-size: 12px;}
}

@media only screen and (min-width: 768px) {
.pc {display: block !important}
.sp {display: none !important}
.links ul {font-size: 18px;list-style-type: none;display: flex;flex-direction: column;}
.links ul li {padding: 0 0 20px;}
.links ul li a {padding: 10px 0;position: relative;display: inline-block;color: #404040;}
.links ul li a::before {width: 0%;height: 1px;background-color: #404040;position: absolute;left: 0;bottom: 0;content: '';transition: all .5s;}
.links ul li a:hover::before {width: 100%;}
.more-btn01 {display: block;width: fit-content;position: relative;padding-right: 50px;padding-bottom: 15px;overflow: hidden;}
.more-btn01::before {content: '';height: 1px;width: 100%;background-color: #404040;position: absolute;left: 0;bottom: 8px;}
.more-btn01:hover::before {animation: btnanim 1s 1;}
@keyframes btnanim {from {left: -100%;}
to {left: 0%;}
}
.more-btn01::after {content: '';height: 5px;width: 29px;background-image: url(../img/more-btn-arrow.svg);position: absolute;right: 0;top: 8px;background-repeat: no-repeat;}
.col-md-6 {flex: 0 0 auto;width: 50%;}
.mx-md-0 {margin-right: 0!important;margin-left: 0!important;}
footer {padding: 100px 0;background-color: #4B4B4B;margin-top: -10px;}
footer .mt50 {margin-top: 32px;}
footer .wrap {max-width: 1180px;margin-left: auto;margin-right: auto;padding-left: 30px;padding-right: 30px;position: relative;}
footer h2 {font-weight: normal;font-size: 22px;letter-spacing: 0.1em;line-height: 36px;text-align: left;color: #fff;}
footer p {line-height: 24.5px;}
footer .copyright {font-weight: normal;font-size: 12px;letter-spacing: 0.1em;line-height: 22px;text-align: left;color: #fff;}
footer .more-btn01::before {background-color: white;}
footer .more-btn01::after {background-image: url(../img/more-btn-arrow.svg);}
footer .links ul {color: white;font-size: 14px;}
footer .links ul li a {font-family: 'Poppins', sans-serif;padding: 5px 0 0;color: white;font-size: 16px;}
footer .links ul li a::before {background-color: white;}
footer .links ul li a span {font-size: 12px;padding: 0 0 5px;vertical-align: middle;font-family: '游ゴシック Medium', 'Yu Gothic Medium','游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;display: block;}
footer .row.flex-column-reverse.flex-md-row>div {width: 50% !important;}
footer .jp {font-size: 12px;}
}


/***********
menu
************/


/***********
heading
************/
.l-heading{padding-bottom: 40px;}
.l-heading-subTitle{font-family: 'Volkhov', serif;font-weight: 400;font-size: 231%;}
.l-heading-title{font-family: 'Yu Mincho','游明朝',YuMincho,'Hiragino Mincho ProN',serif;font-size: 124%;font-weight: normal;padding-top: 0.8em;}
.l-heading-title-tips {font-size: 77%;padding-left: 2em;}
.l-heading-lead{}
@media screen and (max-width:520px) {
.l-heading{padding-bottom: 20px;}
.l-heading-subTitle{font-size: 170%;}
.l-heading-title{font-size: 100%;}
}


/***********
mainVisual
************/
.mainVisual {position: relative;height: 100vh;min-height: 600px;padding-top: 85px;overflow: hidden;}
.mainVisual::before {content: "";display: block;width: 100%;height: 50%;position: absolute;left: 0;bottom: 0;background: url(../img/pt1.png);}
.mainVisual-visual {width: 70%;height: 100%;overflow: hidden;position: relative;}
.mainVisual-visual * {height: 100%;}
.mainVisual-visual li {position: relative;}
.mainVisual-slider{transition-delay: 0.2s;}
.mainVisual-img{width: 100%;height: 100%;background-position: center center;background-size: cover;position: absolute;left: 0;top: 0;}
.mainVisual-img > img {display: none;}
.slick-animation .mainVisual-img{animation: amin-fadeZoom 8s ease forwards;}
.mainVisual-img-tips{position: absolute;right: 0;bottom: 0;height: auto !important;z-index: 99;font-family: 'Poppins', sans-serif;font-size: 77%;font-weight: 400;padding: 20px;transition: all 1s ease 0.5s;}
@keyframes amin-fadeZoom {0% {transform: scale(1.1);}
100% {transform: scale(1);}
}

.mainVisual-scroll {position: absolute;right: 80px;bottom: 0;transform: rotate(90deg);transform-origin: right bottom;}
.mainVisual-scroll a {display: block;width: 200px;position: relative;overflow: hidden;color: #000;text-decoration: none;font-family: 'Poppins', sans-serif;font-weight: 400;font-size: 12px;}
.mainVisual-scroll a::before,
.mainVisual-scroll a::after {content: "";display: block;width: 150px;height: 1px;position: absolute;right: 0;top: 50%;transform-origin: left;background-color: rgba(0, 0, 0, 0.5);}
.mainVisual-scroll a::before{background-color: rgba(0, 0, 0, 0.1);}
.mainVisual-scroll a::after {transform: scaleX(0);animation: anim-mainVisualScroll 2.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;}

@keyframes anim-mainVisualScroll {
0% {transform: scaleX(0)
}
35% {transform: scaleX(1);transform-origin: left
}
40% {transform-origin: right
}
50% {transform: scaleX(1)
}
85% {transform: scaleX(0);transform-origin: right
}
100% {transform-origin: left
}
}


/***********
slick
************/
.slick-slide li {vertical-align: bottom;}
@media screen and (max-width:834px) {
.mainVisual {height: 70vh;min-height: 400px;padding-top: 80px;}
.mainVisual::before {}
.mainVisual-visual {width: 80%;margin-left: 15px;}
.mainVisual-img-tips{padding: 8px;font-size: 60%;}
.mainVisual-scroll {right:40px;}
.mainVisual-scroll a {width: 150px;font-size: 10px;}
.mainVisual-scroll a::before,
.mainVisual-scroll a::after {width: 110px;height: 1px;}

}


/***********
about
************/
.about{background: url(../img/bg.jpg);padding-top: 200px;padding-bottom: 100px;background-position: bottom;background-size: inherit;}
.about-container {display: flex;align-items: center;position: relative;padding-top: 0;}
.about-container-img {width: 52%;}
.about-container-inner {flex: 1;text-align: center;padding: 30px ;}
.about-container-box {display: inline-block;text-align: left;}
.about-heading {padding-top: 50px;}
.about-heading-title {font-family: 'Yu Mincho','游明朝',YuMincho,'Hiragino Mincho ProN',serif;font-weight: normal;font-size: 231%;letter-spacing: 0.1em;}
.about-heading-subTitle {font-family: 'EB Garamond', serif;font-size: 170%;font-weight: normal;padding-top: 1em;letter-spacing: 0.05em;}
.about-text {font-family: 'Yu Mincho','游明朝',YuMincho,'Hiragino Mincho ProN',serif;line-height: 2.2;font-size: 116%;padding-top: 4em;}
.about-container-img12 {position: absolute;left: 110%;top: 280px;width: 400px;margin-left: 20px;}
.about-section01 {padding-top: 150px;display: flex;flex-direction: row-reverse;justify-content: space-between;}
.about-visual01 {width: 49%;}
.about-visual02 {width: 37%;padding-top: 150px;}
.about-img01 {margin-right: -5%;}
.about-img02 {margin-top: 150px;margin-left: 20%;margin-right: -45%;}
.about-img13 {margin-left: -40%;}
@media screen and (max-width:1280px) {.about-img13 {margin-left: -20%;}
}
@media screen and (max-width:834px) {.about{padding-top: 120px;padding-bottom: 100px;}
.about-container {display: block;padding-top: 10px;}
.about-container-img {width: auto;width: 80%;}
.about-container-inner {padding: 60px 0 30px;}
.about-container-box {display: block;padding: 0 0 0 5%;}
.about-heading {padding-top: 0;}
.about-heading-title {font-size: 160%;}
.about-heading-subTitle {font-size: 147%;padding-top: 0.5em;}
.about-text {line-height: 2;font-size: 100%;padding-top: 2em;}
.about-container-img12 {position: absolute;left: 68%;top: 100px;width: 32vw;margin-left: 20px;}
.about-section01 {padding-top: 30px;display: flex;flex-direction: row-reverse;justify-content: space-between;}
.about-visual01 {width: 74%;}
.about-visual02 {width: 37%;margin-right: -10%;padding-top: 40vmin;}
.about-img01 {margin-right: -5%;}
.about-img02 {margin-top: 100px;margin-left: 20%;margin-right: -45%;}
.about-img13 {margin-top: 4em;margin-left: -20%;}
}


/***********
product
************/
.product{padding-top: 50px;}
.product-heading{padding-bottom: 50px;}
.product-list {display: flex;flex-wrap: wrap;margin-left: -1%;}
.product-list li {width: 49%;margin-left: 1%;margin-bottom: 1%;padding: 0 2%;z-index: 0;}
.product-list a {display: block;border-radius: 20px;overflow: hidden;position: relative;color: #fff;text-decoration: none;}
.product-list-img{position: relative;}
.product-list-img::after {content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(0, 0, 0, 0.1);pointer-events: none;transition: 0.8s;}
body.is-pc a:hover .product-list-img::after {background: rgba(0, 0, 0, 0.4);}
.product-list-block {position: absolute;left: 0;top: 0;z-index: 9;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;text-align: center;pointer-events: none;}
.product-list-box {}
.product-list-subTitle {font-family: 'Poppins', sans-serif;font-weight: 400;font-size: 200%;letter-spacing: 0.08em;}
.product-list-title {padding-top: 1em;font-size: 116%;letter-spacing: 0.08em;}
.product-list-more {width: 80px;height: 80px;margin-left: -40px;margin-top: 20%;border: 1px solid rgba(255, 255, 255, 0.5);border-radius: 50%;position: absolute;left: 50%;top: 50%;display: flex;flex-direction: column;justify-content: center;font-family: 'Poppins', sans-serif;font-weight: 400;font-size: 12px;letter-spacing: 0.1em;}
.product-list-more svg {transform: rotate(-90deg);position: absolute;left: 0;top: 0;z-index: 9;width: 100%;height: 100%;opacity: 0;transition: 1s;pointer-events: none;fill: transparent;stroke: #fff;stroke-width: 1.5;stroke-dasharray: 0 360;}
body.is-pc a:hover .product-list-more svg {opacity: 1;stroke-dasharray: 360 360;}
@media screen and (max-width:834px) {
.product{padding-top: 20px;padding-bottom: 100px;}
.product-heading{padding-bottom: 30px;}
.product-list {margin: 0;}
.product-list li {width: 100%;margin-bottom: 5%;}
.product-list a {}
.product-list-subTitle {font-size: 108%;letter-spacing: 0;}
.product-list-title {font-size: 77%;}
.product-list-more {width: 50px;height: 50px;margin-left: -20px;margin-top: 25%;font-size: 77%;letter-spacing: 0;}
.product-list-more svg {display: none;}
}


/***********
news
************/
.news {padding: 100px 0;}
.news_list {margin: 0 2.5%;}
.news_list_item {padding: 25px 0;border-bottom: 1px solid #E6E6E6;}
.news_list_item:first-child {border-top: 1px solid #E6E6E6;}
.news_list_item_a {position: relative;display: flex;padding-right: 30px;}
.news_list_date {font-size: 14px;display: flex;margin-right: 15px;align-items: center;}
.news_item {background: #4B4B4B;border-radius: 14px;text-align: center;margin-left: 20px;color: #fff;padding: 0 20px;font-size: 14px;}
.news_item_text {font-size: 14px;line-height: 2;}
.arrow {width: 25px;height: 1px;background: #4B4B4B;position: absolute;top: 50%;right: 0;}
.arrow::after {content: "";display: block;width: 6px;height: 1px;background: #4B4B4B;transform: rotate(45deg);position: absolute;right: 0px;bottom: 2px;}

@media screen and (max-width: 767px) {
.news {padding: 0 0 100px;}
.news_list_item_a {font-size: 14px;display: block;}
.news_item_text {font-size: 12px;padding-top: 10px;}u

}
@media screen and (max-width: 480px) {
.arrow {display: none;}
.news_list_item_a {padding-right: 0;}
}


/***********
menu
************/
.flex-center {display: flex;align-items: center;justify-content: center;}
.outer-menu {position: fixed;top: 20px;right: 70px;z-index: 9999;}
.outer-menu .checkbox-toggle {position: absolute;top: 0;left: 0;z-index: 2;cursor: pointer;width: 60px;height: 60px;opacity: 0;}
.outer-menu .checkbox-toggle:checked + .hamburger > div {transform: rotate(135deg);}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {top: 0;transform: rotate(90deg);}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {opacity: 0;}
.outer-menu .checkbox-toggle:checked ~ .menu {pointer-events: auto;visibility: visible;}
.outer-menu .checkbox-toggle:checked ~ .menu > div {transform: scale(1);transition-duration: 0.75s;}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {opacity: 1;transition: opacity 0.4s ease 0.4s;}
.outer-menu .checkbox-toggle:hover + .hamburger {box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {transform: rotate(225deg);}
.outer-menu .hamburger {position: absolute;top: 0;left: 0;z-index: 1;width: 50px;height: 50px;padding: 0.5em 1em;border-radius: 50px;border: 1px solid #191919;cursor: pointer;transition: box-shadow 0.4s ease;-webkit-backface-visibility: hidden;backface-visibility: hidden;display: flex;align-items: center;justify-content: center;}
.outer-menu .hamburger > div {position: relative;flex: none;width: 100%;height: 1px;background: #191919;transition: all 0.4s ease;display: flex;align-items: center;justify-content: center;}
.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {content: "";position: absolute;z-index: 1;top: -7px;left: 0;width: 100%;height: 1px;background: inherit;transition: all 0.4s ease;}
.outer-menu .hamburger > div:after {top: 7px;}
.outer-menu .menu {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;visibility: hidden;overflow: hidden;-webkit-backface-visibility: hidden;backface-visibility: hidden;outline: 1px solid transparent;display: flex;align-items: center;justify-content: center;}
.outer-menu .menu > div {width: 250vw;height: 250vw;color: #191919;background: #ffffffe9;border-radius: 50%;transition: all 0.4s ease;flex: none;transform: scale(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.outer-menu .menu > div > div {text-align: center;max-width: 90vw;max-height: 100vh;opacity: 0;transition: opacity 0.4s ease;overflow-y: auto;flex: none;display: flex;align-items: center;justify-content: center;}
.outer-menu .menu > div > div > ul {list-style: none;padding: 0 1em;margin: 0;display: block;max-height: 100vh;}
.outer-menu .menu > div > div > ul > li {padding: 0;margin: 0 0 100px;font-size: 24px;}
.outer-menu .menu > div > div > ul > li > a {font-family: 'Poppins', sans-serif;position: relative;display: inline;cursor: pointer;transition: color 0.4s ease;color: #191919;text-decoration: none;font-weight: 600;display: block;}
.outer-menu .menu > div > div > ul > li > a > span {font-size: 12px;font-family: '游ゴシック Medium', 'Yu Gothic Medium','游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', sans-serif;display: block;padding:5px 0 0;font-weight: normal;}

@media only screen and (max-width: 767px) {
.outer-menu {top: 20px;right: 60px;}
.outer-menu .menu > div > div > ul > li {margin: 50px 0;}
.outer-menu .hamburger {width: 40px;height: 40px;}
.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {top: -5px;}
.outer-menu .hamburger > div:after {top: 5px;}
}


/***********
video
************/
#video {background-image: linear-gradient(180deg, rgba(141, 141, 141, 1), rgba(206, 206, 206, 1));margin: 90px 0 0;}
#video .s-creator {margin: 0 auto;max-width: 1160px;padding: 80px 20px;color: #fff;position: relative;}
.video__anc {width: 1px;height: 1px;top: 0;left: 0;position: absolute;}
.u-inner--wide {padding: 0;max-width: 1180px;margin: 0 auto;}
.video__head {font-family: 'Volkhov', serif;font-weight: 400;font-size: 231%;letter-spacing: .12em;line-height: 1.3333;border-bottom:1px solid #fff;padding: 0 0.4rem 0.2rem;display: inline-block;}
#video .s-creator__body {margin-top: -3.1rem;width: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
#video .s-creator__main {width: 44%;padding-top: 50px;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-start;}
#video .s-creator__label {top: 0;right: 0;letter-spacing: .3em;padding: 7px 0 3px;position: absolute;-webkit-writing-mode: vertical-lr;-ms-writing-mode: tb-lr;writing-mode: vertical-lr;border: 1px solid #fff;font-weight: 500;}
#video .s-creator__copy {font-family: 'Volkhov', serif;font-weight: normal;font-size: 181%;line-height: 1.625;margin: 20px 0 0;}
#video .s-creator__des {font-size: 116%;line-height: 2;margin: 20px 0 0;}
#video .s-creator__slider {width: 51%;}
.br_none {display: none;}
.movie{position: relative;}
.movie video{width: 100%;}
.movie .play-btn{}
.movie .play-btn.playActive{display:none;}
button {color: inherit;font: inherit;line-height: inherit;text-align: inherit;letter-spacing: inherit;cursor: pointer;margin: 0;padding: 0;border: none;}
.movie-nav {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 23.4666666667%;padding-top: 23.4666666667%;}
.movie-nav-btn {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: none;}
.movie-nav-btn::before {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-style: solid;border-width: 0.6em 0 0.6em 0.9em;border-color: transparent transparent transparent #fff;}
.movie-nav-btn::after {content: "";position: absolute;top: 13%;bottom: 13%;left: 13%;right: 13%;border: 1px solid #fff;border-radius: 50%;}
.movie-nav-btn-circle {display: block;-webkit-animation: rotateLoop 10s linear infinite;animation: rotateLoop 10s linear infinite;}
@media (hover: hover) and (pointer: fine) {
.movie-nav {transition: all 0.3s ease;}
.movie-nav:hover {width: 25%;padding-top: 25%;}
}
.movie-nav-btn-circle img {animation: rotation 10s linear infinite;}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 767px) {
#video {background-image: linear-gradient(120deg, rgba(141, 141, 141, 1), rgba(206, 206, 206, 1));margin: 0 0 80px;}
#video .s-creator {padding: 80px 0;}
.video__anc {top: -6rem;}
.u-inner--wide {padding: 0 5.8666666667%;}
.video__head {font-size: 1.6rem;line-height: 1.3125;padding: 0 0.2rem 0.2rem;}
#video .s-creator__body {margin-top: -2.1rem;-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}
#video .s-creator__main {width: 100%;padding-top: 0;margin-top: -2.1rem;}
#video .s-creator__label {font-size: 100%;color: #fff;}
#video .s-creator__copy {margin: 0;font-size: 161%;}
#video .s-creator__des {color: #fff;}
#video .s-creator__slider {width: 113.2%;margin-left: -6.6%;}
.br_none {display: block;}
}


/***********
モーダル
************/
.modal-open{display: inline-block;}
.modal-open a{display: inline-block;}
.modal{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;}
.modal:not(:target) {opacity: 0;visibility: hidden;transition: opacity 0.5s, visibility 0.5s;}
.modal:target{opacity: 1;visibility: visible;transition: opacity 0.5s, visibility 0.5s;}
.modal .overlay{display: block;width: 100%;height: 100%;position: absolute;background-color: #000;opacity: 0.7;top: 0;left: 0;}
.modal-wrapper {width: 100%;max-width: 1180px;min-width: 450px;height: 100%;max-height: 550px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.modal-contents{overflow: auto;width: 100%;height: 100%;box-sizing: border-box;position: relative;}
.modal-content{margin: 25px;}
.modal-close {position: fixed;top: 30px;right: 60px;text-decoration: none;font-size: 40px;}
@media screen and (max-width:834px) {
.modal-wrapper {max-height: 420px;}
.modal-close {right: 50px;font-size: 30px;}
}