@charset "utf-8";
/* reset
   ========================================================================== */
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
*:focus {
outline: none;
}
*::after,
*::before {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
overflow-y: scroll;
position: relative;
-webkit-font-smoothing: antialiased;
text-align: center;
}
li {
list-style: none;
}
img {
vertical-align: bottom;
max-width: 100%;
}
table {
font-size: inherit;
font: 100%;
}
a,
a:active,
a:visited,
a[href^="tel:"] {
color: inherit;
text-decoration: inherit;
font-style: inherit;
font-weight: inherit;
}
/* normarize reset
   ========================================================================== */
h1,
button,
input,
optgroup,
select,
textarea {
margin: 0 auto;
}
/* container
   ========================================================================== */
#container {width: 100%;overflow: hidden;opacity: 1;transition: opacity 2.0s ease;/* background: #fff; */}
.loading #container {
opacity: 0;
}
/********************
loading effects
********************/
.loadingAnim {
position: fixed;
z-index: 9999;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
pointer-events: none;
}
.loaded .loadingAnim {
}
.loadingAnim::before {
line-height: 1;
position: fixed;
z-index: 9998;
right: 0;
display: block;
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
content: ' ';
/*
-webkit-transition-delay: 3s;
transition-delay: 3s;
*/
background: linear-gradient(-32deg, #90dace 14%, #78c7bb 41%);
}
/*.loadingAnim::after {
line-height: 1;
position: fixed;
z-index: 9998;
right: 0;
display: block;
width: 100%;
height: 100%;
margin-right: auto;
margin-left: auto;
content: ' ';
transition-delay: 3s;
background: #fff;
}*/
.loadingAnim_line {
line-height: 1;
position: fixed;
z-index: 9999;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: inline-block;
overflow: hidden;
width: 100%;
height: 100%;
margin: auto;
-webkit-transition: transform 0s;
-webkit-transition: -webkit-transform 0s;
transition: all 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
text-align: center;
}
.loadingAnim_line::before {
font-family: 'Poppins', sans-serif;
font-size: 1.25em;
font-weight: bold;
font-style: normal;
line-height: 1;
display: block;
width: 100%;
height: 100%;
content: '';
background-image: url(../img/op-logo-wh.svg);
/*background-size: 400px 217px;画像サイズはpc.sp各top.cssで指定*/
background-repeat: no-repeat;
background-position: center;
letter-spacing: .5em;
color: #fff;
will-change: opacity;
text-align: center;
position: absolute;
top: 0px;
opacity: 0;
}
.loaded .loadingAnim {
-webkit-animation: bg-fade 0.6s cubic-bezier(0.6, 0.03, 1, 0.74) 2.3s 1 alternate both;
animation: bg-fade 0.6s cubic-bezier(0.6, 0.03, 1, 0.74) 2.3s 1 alternate both;
}
.loaded .loadingAnim::before {
}
.loaded .loadingAnim_line {
}
.loaded .loadingAnim_line::before {
-webkit-animation: loadingAnim_text 2.3s ease 0s 1 alternate both;
animation: loadingAnim_text 2.3s ease 0s 1 alternate both;
opacity: 0;
}


/********************
animation setting
********************/

@-webkit-keyframes loadingAnim_text {
 0% {
 height: 100%;
 opacity:0;
 -webkit-transform: scale(0.9);
transform: scale(0.9) rotate(.1deg);
}
 20% {
 height: 100%;
 opacity:1;
 -webkit-transform: scale(1);
transform: scale(1) rotate(.1deg);
}
 80% {
 height: 100%;
 opacity:1;
 -webkit-transform: scale(1);
transform: scale(1) rotate(.1deg);
}
 100% {
 height: 100%;
 opacity:0;
 -webkit-transform: scale(1.1);
transform: scale(1.1) rotate(.1deg);
}
}
@keyframes loadingAnim_text {
 0% {
 height: 100%;
 opacity:0;
 -webkit-transform: scale(0.9);
transform: scale(0.9) rotate(.1deg);
}
 20% {
 height: 100%;
 opacity:1;
 -webkit-transform: scale(1);
transform: scale(1) rotate(.1deg);
}
 80% {
 height: 100%;
 opacity:1;
 -webkit-transform: scale(1);
 transform: scale(1) rotate(.1deg);
}
 100% {
 height: 100%;
 opacity:0;
 -webkit-transform: scale(1.1);
transform: scale(1.1) rotate(.1deg);
}
}
 @-webkit-keyframes bg-fade {
 0% {
 width:100%;
 height:100%;
 opacity:1;
}
 80% {
}
 100% {
 width:100%;
 opacity:0;
}
}
@keyframes bg-fade {
 0% {
 width:100%;
 height:100%;
 opacity:1;
}
 80% {
}
 100% {
 width:100%;
 opacity:0;
}
}
/* font
   ========================================================================== */
html {
font-size: 62.5%;
}
body {
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
line-height: 1.6;
font-size: 1.0rem;
color: #333;
letter-spacing: 0em;
}

/* header
   ========================================================================== */
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 400;
}
/* footer
   ========================================================================== */
footer {
position: relative;
z-index: 200;
}
/* pagetop
   ========================================================================== */
#pagetop {position: absolute;width: 100%;z-index: 300;right: 0;bottom: 279px;}
/* youtube
   ========================================================================== */
.youtube div {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube div iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
/* slick init
   ========================================================================== */
.slick-list {
height: 100%;
}
.slick-track {
height: 100%;
}
.slick-prev,
.slick-next {
font-size: 0;
line-height: 0;
position: absolute;
display: block;
padding: 0;
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
z-index: 1;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.slick-prev::before,
.slick-next::before {
line-height: 1;
display: block;
width: 100%;
height: 100%;
content: "";
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
[dir='rtl'] .slick-prev {
right: -25px;
left: auto;
}
[dir='rtl'] .slick-prev::before {
content: '→';
}
[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}
[dir='rtl'] .slick-next::before {
content: '←';
}
.slick-dots {
position: absolute;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li {
position: relative;
display: inline-block;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 100%;
height: 100%;
padding: 0;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
border-radius: 50%;
}
.slick-dots li button::before {content: "";font-family: 'slick';font-size: 6px;line-height: 20px;position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;opacity: .25;color: black;bkit-font-smoothing: antialiased; */-moz-osx-font-smoothing: grayscale;}
.slick-dots li.slick-active button::before {opacity: 0.75;/* color: #000; *//* background: #000; *//* opacity: 0.75; */}
.slick-dots li.slick-active button {opacity: 1;background: #ff6699;}
/* slick default layout
   ========================================================================== */
.slick-loading .slick-list {
background: #fff url('../slick/ajax-loader.gif') center center no-repeat;
}
.slick-prev,
.slick-next {
top: 50%;
width: 50px;
height: 50px;
background: #4d4d4d;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
opacity: 0.7;
transition: opacity 0.2s ease;
}
.slick-prev:hover::before,
.slick-prev:focus::before,
.slick-next:hover::before,
.slick-next:focus::before {
opacity: 1;
}
.slick-prev.slick-disabled::before,
.slick-next.slick-disabled::before {
opacity: .25;
}
.slick-prev::before {
background: url(../img/pickup-prev.svg) no-repeat center / contain;
}
.slick-next::before {
background: url(../img/pickup-next.svg) no-repeat center / contain;
}
.slick-dots li {
width: 8px;
height: 8px;
margin: 0 6px;
}
.slick-dots li button {background: #ffffff;}
.slick-dots li button:hover,
.slick-dots li button:focus {/* opacity: 0.5; */background: #fabad0;}
.slick-dots li button:hover::before,
.slick-dots li button:focus::before {
opacity: 1;
}
/*--------------------------*/
/*アニメーションセッティング*/
/*--------------------------*/
.sa.fadeIn {
opacity: 0
}
.sa.fadeInUp {
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.sa.fadeInUpOver {
-webkit-transform: translateY(40px);
transform: translateY(40px);
opacity: 0
}
.sa.fadeInDown {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
opacity: 0
}
.sa.fadeInDownOver {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
opacity: 0
}
.sa.fadeInLeft {
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
opacity: 0
}
.sa.fadeInLeftOver {
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
opacity: 0
}
.sa.fadeInRight {
-webkit-transform: translateX(20px);
transform: translateX(20px);
opacity: 0
}
.sa.fadeInRightOver {
-webkit-transform: translateX(30px);
transform: translateX(30px);
opacity: 0
}
.sa.fadeInRightSkew {
-webkit-transform: translateX(30px) skewX(-10deg);
transform: translateX(30px) skewX(-10deg);
opacity: 0
}
.sa.fadeInLeftSkew {
-webkit-transform: translateX(-30px) skewX(10deg);
transform: translateX(-30px) skewX(10deg);
opacity: 0
}
.sa.scaleUpIn {
-webkit-transform: scale(.93);
transform: scale(.93);
opacity: 0
}
.sa.scaleUpInOver {
-webkit-transform: scale(.85);
transform: scale(.85);
opacity: 0
}
.sa.scaleDownIn {
-webkit-transform: scale(1.07);
transform: scale(1.07);
opacity: 0
}
.sa.scaleDownInOver {
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 0
}
.sa.scaleDownInOverOver {
-webkit-transform: scale(1.3);
transform: scale(1.3);
opacity: 0
}
.sa.maskDown {
overflow: hidden
}
.sa.maskDown::after,
.sa.maskDown::before {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 100%
}
.sa.maskDown::before {
background: #f8f8f8;
z-index: 10;
top: -100%
}
.sa.maskDown::after {
z-index: 11;
top: 0;
background: #fff
}
.sa.fadeIn.visible,
.sa.fadeInUp.visible,
.sa.fadeInUpOver.visible,
.sa.fadeInDown.visible,
.sa.fadeInDownOver.visible,
.sa.fadeInLeft.visible,
.sa.fadeInLeftOver.visible,
.sa.fadeInRight.visible,
.sa.fadeInRightOver.visible,
.sa.fadeInRightSkew.visible,
.sa.fadeInLeftSkew.visible,
.sa.scaleUpIn.visible,
.sa.scaleUpInOver.visible,
.sa.scaleDownIn.visible,
.sa.scaleDownInOver.visible,
.sa.scaleDownInOverOver.visible,
.sa.maskDown.visible {
-webkit-transform: none;
transform: none;
opacity: 1;
-webkit-transition: opacity .8s ease-in, -webkit-transform 1.5s;
transition: opacity .8s ease-in, -webkit-transform 1.5s;
transition: transform 1.5s, opacity .8s ease-in;
transition: transform 1.5s, opacity .8s ease-in, -webkit-transform 1.5s
}
.sa.fadeInLeftSkew.visible,
.sa.fadeInRightSkew.visible {
-webkit-transition: opacity .6s, -webkit-transform 1s cubic-bezier(.08, .92, .35, 1);
transition: opacity .6s, -webkit-transform 1s cubic-bezier(.08, .92, .35, 1);
transition: transform 1s cubic-bezier(.08, .92, .35, 1), opacity .6s;
transition: transform 1s cubic-bezier(.08, .92, .35, 1), opacity .6s, -webkit-transform 1s cubic-bezier(.08, .92, .35, 1)
}
.sa.fadeInDown.visible,
.sa.fadeInUp.visible {
-webkit-transition: opacity .5s, -webkit-transform 1.8s cubic-bezier(.08, .92, .35, 1);
transition: opacity .5s, -webkit-transform 1.8s cubic-bezier(.08, .92, .35, 1);
transition: transform 1.8s cubic-bezier(.08, .92, .35, 1), opacity .5s;
transition: transform 1.8s cubic-bezier(.08, .92, .35, 1), opacity .5s, -webkit-transform 1.8s cubic-bezier(.08, .92, .35, 1)
}
.sa.scaleDownIn.visible,
.sa.scaleDownInOver.visible,
.sa.scaleDownInOverOver.visible,
.sa.scaleUpIn.visible,
.sa.scaleUpInOver.visible {
-webkit-transition: opacity .3s, -webkit-transform 1s cubic-bezier(.08, .92, .35, 1);
transition: opacity .3s, -webkit-transform 1s cubic-bezier(.08, .92, .35, 1);
transition: transform 1s cubic-bezier(.08, .92, .35, 1), opacity .3s;
transition: transform 1s cubic-bezier(.08, .92, .35, 1), opacity .3s, -webkit-transform 1s cubic-bezier(.08, .92, .35, 1)
}
.sa.maskDown.visible::after,
.sa.maskDown.visible::before {
-webkit-transform: translateY(200.1%);
transform: translateY(200.1%);
-webkit-transition: .9s cubic-bezier(.08, .92, .35, 1);
transition: .9s cubic-bezier(.08, .92, .35, 1)
}
.sa.beat-anim.visible {
-webkit-animation: pounding .8s ease infinite alternate;
animation: pounding .8s ease infinite alternate;
}
 @-webkit-keyframes pounding {
0% {
-webkit-transform: scale(1.1);
 transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
 transform: scale(1);
}
}
 @keyframes pounding {
0% {
-webkit-transform: scale(1.1);
 transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
 transform: scale(1);
}
}

/*------------------------*/





@media screen and (min-width: 750px) {
/* pc
   ========================================================================== */
.sp {
display: none;
}
.loadingAnim_line::before {
background-size: 300px 163px;
}
/* header
   ========================================================================== */
#gnav-hamburger {
display: none !important;
}
header #gnav .gnav-inner {
display: block !important;
height: auto !important;
overflow: visible !important;
}
header #gnav .gnav-inner .gnav-nav {
display: flex;
}
header #gnav .gnav-sp-close {
display: none;
}
/* slick
   ========================================================================== */
.slick-prev,
.slick-next {
top: 50%;
width: 50px;
height: 50px;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
background: #4d4d4d;
}
.slick-prev {
left: 25px;
}
.slick-next {
right: 25px;
}
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
bottom: -48px;
}
.slick-dots li {width: 14px;height: 14px;margin: 0 8px;}
}

@media screen and (max-width: 750px) {
/* header
   ========================================================================== */
header {height: 68px;background: #fff;}
 .gnavOpen header{
  min-height:100%;
 }

header .hd-logo {
z-index: 31;
}
header #gnav {
}
header #gnav .gnav-hamburger {position: absolute;top: 0px;right: 0px;z-index: 31;cursor: pointer;width: 50px;height: 68px;box-sizing: content-box;pointer-events: auto;display: flex;}
header.sticky #gnav .gnav-hamburger {
opacity: 1;
}
header #gnav.open .gnav-hamburger {
}
header #gnav .gnav-hamburger span {background: #4372C4;height: 2px;width: 23px;display: block;position: absolute;transition: transform 0.2s ease;right: 0;left: 0;}
header #gnav .gnav-hamburger span:nth-of-type(1) {top: 39%;}
header #gnav .gnav-hamburger span:nth-of-type(2) {top: 50%;}
header #gnav .gnav-hamburger span:nth-of-type(3) {top: 61%;}
header #gnav.open .gnav-hamburger span:nth-of-type(1) {-webkit-transform: translateY(8px) rotate(45deg);transform: translateY(7px) rotate(45deg);top: 37%;}
header #gnav.open .gnav-hamburger span:nth-of-type(2) {
opacity: 0;
}
header #gnav.open .gnav-hamburger span:nth-of-type(3) {-webkit-transform: translateY(-8px) rotate(-45deg);transform: translateY(-9px) rotate(-45deg);top: 61%;}
header #gnav .gnav-inner {position: absolute;top: 0;bottom: 0;right: 0;z-index: 30;/* transition: 0.6s cubic-bezier(0.000, 0.720, 0.290, 1); *//*z-index: -1;*/width: 100%;/* height: 100%; *//* min-height: 100%; */pointer-events: none;
/* slideSlide
transform: translateX(100%);
*/
/* slideDown */margin: auto;opacity: 0;transition: ease 0.2s;}
header #gnav.open .gnav-inner {opacity: 1;/* slideSlide

transform: translateX(0);
*/
/* slideDown */pointer-events: auto;}
/* slick
   ========================================================================== */
.slick-prev,
 .slick-next {
top: 0;
width: 20px;
height: 100%;
color: transparent;
background: transparent;
}
.slick-dotted.slick-slider {
}
.slick-dots {
bottom: -24px;
}
.slick-dots li {
width: 8px;
height: 8px;
margin: 0 6px;
}
#pagetop {bottom: 224px;}
}