body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ""; }
abbr, acronym { border: 0; }
ul { list-style: none; }
a {  text-decoration: none; }
a:focus {  outline: none; }
a:link {  color: #0066aa; text-decoration: none;}
a:visited { color: #0066aa;  text-decoration: none; }
a:hover { color: #0066aa; text-decoration:underline;}
a:active { color: #0066aa; text-decoration: none; }
/*
input,button,textarea,select {
  font-size: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
*/
img {vertical-align: middle;}

body { font-family: "Noto Serif JP", serif,Roboto,"Droid Sans","Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; text-align: center; color:  #323232; /*font-weight: bold;*/ word-break: break-all; }

@media screen and (min-width: 768px) {
    #header { height: 110px; width: 100%; background: rgba(255,255,255,.8); position: fixed; top: 0; left:0; z-index: 999;  }
    #headerInner { display:flex; justify-content: space-between;}
    #headerInner h1{ width: 178px;}
    #headerInner h1 img{ width: 158px; margin-left: 20px; margin-top: 30px;}
    #header ul li { display: inline-block; height: 110px; line-height: 110px; padding-left: 36px; font-size: 20px; }
    #header ul li a { color:#111; transition: .5s; font-feature-settings: "palt"; }
    #header ul li a:hover { text-decoration: underline; opacity: .7; }
    #header ul li:last-child { margin-left: 36px; padding-left: 0; background: rgb(187,180,121);  background: linear-gradient(120deg, rgba(177,136,166,1) 0%, rgba(143,110,134,1) 100%); }
    #header ul li:last-child a { color:#fff; text-shadow: #111; padding-left: 36px; padding-right: 36px; display: block; height: 100%;}
    #header ul li:last-child a:last-child { text-decoration: none; } 

    #mv { margin-top: 110px; position: relative; overflow: hidden; }
    #mv::after { content: ''; width:100%; height: 100%; background: rgba(255,255,255,1); display: block ; position: absolute; top: 0; left: 0; transition: 1s; transition-delay: 3s; }
    #mv #mvimg img { width: 100%; filter: blur(20px); transition: 1s; transition-delay: 3s; opacity: .3; }
    #mv.open #mvimg img { filter: blur(0px); opacity: 1; }
    
    #mvTxt { width: 25%; position: absolute; left: calc(50% - 12%); top: 35%; z-index: 1; transition: 1s; transition-delay: 3s; }
    #mvTxt img { width: 100%; margin-bottom: 14%; filter: blur(10px); opacity: 0; transition: 1.6s; }
    
    #mv.open::after { content: ''; width:45%; background: rgba(255,255,255,.95); }
    #mv.open #mvTxt { left: 10%; }
    #mv.open #mvTxt img { filter: blur(0); opacity: 1; }
    #mahoImg { display: none; }

    #about { text-align: center; padding: 100px 20px 200px; background-color: #f8f8f8; background-image: url(../img/bg-logo.webp); background-size: 287px; background-position: right 0 bottom -50px; background-repeat: no-repeat; overflow: hidden; }
    #aboutInner { max-width: 1280px; margin: 0 auto; position: relative; height: 730px }
    #aboutContent { background-color: rgba(230,230,226,.7); /*background-image: url(../img/illust-about.webp); background-position: right 20px bottom; background-size: 357px 213px; background-repeat: no-repeat;*/ position: absolute; bottom:0; right:100px; opacity:0; transition: 1s; width: 1590px; display:flex; flex-direction:row-reverse;  height:600px;}
    #aboutContent.on { right: 0; opacity: 1; }
    #aboutRightContent{ width: 750px; padding: 80px 80px 0 0; }
    #aboutLeftContent{ width: 740px; position: relative;}
    /*#aboutLeftContent::before{ content:''; position: absolute; top:20%; left:0%; background: #f8f8f8; width: 760px; height: 760px; border-radius: 50%; }*/
    #aboutLeftContent img{ width: 100%; position:absolute; bottom: -60px; left: 0;}
    #introduction { writing-mode: vertical-rl; text-orientation: upright; text-align: left; margin: 0 0 auto auto;}
    #aboutInner h2 { text-align: right;  }
    #aboutInner h2 img { position:relative; right: -50px; opacity: 0; width: 100%; max-width: 742px; transition: 1s; }
    #aboutInner h2.on img { right: 0; opacity: 1;}
    #introduction p { font-size: 30px;  margin-left: 30px; line-height: 1.6; position: relative; opacity: 0; }
    #introduction.c p { font-size: 26px;  margin-left: 24px; }
    
    #introduction p:nth-child(1) { transition-delay: 0; transition-duration: 1s; }
    #introduction p:nth-child(2) { transition-delay: .2s; transition-duration: 1s; }
    #introduction p:nth-child(3) { transition-delay: .4s; transition-duration: 1s; }
    #introduction p:nth-child(4) { transition-delay: .6s; transition-duration: 1s; }
    #introduction p:nth-child(5) { transition-delay: .8s; transition-duration: 1s; }

    #introduction p.on { opacity: 1; }
    #introduction p span { top: -18px; position: relative; }

    #messageMahoWrap { background: #f8f1e4; background: linear-gradient(180deg, rgba(248,241,228,1) 50%, rgba(255,255,255,1) 100%); padding: 60px 0 200px; }
    #messageMahoWrap h2 { background: url(../img/h2-mahomessage-header.png) no-repeat left center; background-size: 40px auto; text-align: left; padding-left: 50px; font-size: 40px; max-width: 1200px; margin: 0 auto 40px; color:#413321; }
    #messageMahoWrap h2.c { background: none; text-align: center; padding-left: 0px; font-size: 32px; }
    #messageMaho { max-width: 1200px; padding: 0 0 20px 0; margin: 0 auto; position: relative; display: flex; justify-content: space-between; background:  #fffcf6; align-items: center; box-shadow: 10px 10px rgba(104, 80, 35, 0.1); }
    #messageMaho > div:first-child { width: 31%; }
    #messageMaho > div:first-child img { width: 100%; }
    #messageMaho > div:last-child { width: 67%; text-align: left; padding: 40px 40px 0 0; }
    #messageMaho > div:last-child p { font-size: 18px; margin-bottom: 18px; }
    #messageMaho > div:last-child p.sign { font-size: 16px; text-align: right;}

    #mahoProf { background: #fff; padding: 20px; margin-top: 20px; border: solid 1px rgba(121, 97, 19, 0.1); }
    #messageMaho > div:last-child #mahoProf p { font-size: 14px; margin-bottom: 0; }

    #lineup { background: #f8f7f9; position: relative; background-color: #e8e8e6; }
    #lineupInner { max-width: 1200px; padding: 0 0 20px 0; margin: 0 auto; position: relative; }

    #lineup h2 { text-align: center;  top: -100px; position:relative;  }
    #lineup h2 img{ width: 600px; top: 90px; ; position:relative; opacity:0; transition: 1s;}
    #lineup h2.on img{ top: 0; opacity:1;}
    
    .lineupLead { font-size: 20px; margin-bottom: 80px; position: relative; top:-20px; opacity:0; transition: 1s; padding: 0 20px;}
    .lineupLead.on { opacity: 1;}
    #lineuplist { max-width: 1000px; padding: 20px; margin: 0 auto; }
    #lineuplist ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
    #lineuplist ul li { width: 31%; margin-bottom: 4%;  }
    #lineuplist ul li a { display:block; transition: .6s; opacity: 1; }
    #lineuplist ul li a:hover { opacity: .6; }
    #lineuplist ul li img { width: 100%; position: relative; transition: 1s; opacity: 0; top: 50px;  }
    #lineuplist ul li.on img { opacity: 1; top: 0; }

    #detail { background: #4f4f4f; padding: 80px 0; transition:.4s; box-shadow: inset 0 0 30px rgba(0,0,0,.2); overflow: hidden; }
    #detail.cl0{ background: #8e1a1a;  }
    #detail.cl1{ background: #e6581e;  }
    #detail.cl2{ background: #e4e3f2;  }
    #detail.cl3{ background: #f5abd7;  }
    #detail.cl4{ background: #ffb200;  }
    #detail.cl5{ background: #86aff9;  }
    #detail.cl6{ background: #a08dfe;  }
    #detail.cl7{ background: #d4eccc;  }
    #detail.cl8{ background: linear-gradient(70deg, rgba(164,255,179,1) 0%, rgba(145,225,255,1) 50%, rgba(255,160,243,1) 100%);}
    #detailSlider { max-width: 980px; margin: 0 auto; }
    #detailSlider > div { background: #fff; }
    #detailSlider {position: relative; right:-200px; opacity: 0; transition:1s; }
    #detailSlider.on { right:0; opacity: 1; }
    .productSlFlx { display: flex; justify-content: space-between; padding: 5% 10%;}
    .productSlFlx p { text-align: left; color: #7a6a56; }
    .productSlFlx > div { width: 48%;}
    .productSlFlx > div img { width: 100%;}
    .productSlFlx ul { display:flex; margin: 14px auto 0px; justify-content: center;}
    .productSlFlx ul li { width: 40px; margin-right: 10px; }
    .productSlFlx ul li a { border: 1px solid #fff; display: block; }
    .productSlFlx ul li a.on { border: 1px solid #333; }
    .productSlFlx ul li:last-child { margin: 0; }
    
    .slick-dots { bottom: -50px; }
    .slick-dots li { opacity:.5; margin-top: 40px; width: 10px; height: 10px; background: #fff; border-radius: 50%; }
    .slick-dots li.slick-active { background: #000;}
    .slick-next { right: 20px; width: 41px; height: 41px; background-image: url(../img/btn-next.webp); background-size: 100%; transition: .1s;text-indent: -40px; }
    .slick-prev { left: 20px; z-index: 10; width: 41px; height: 41px; background-image: url(../img/btn-prev.webp); background-size: 100%; transition: .1s;text-indent: -40px; }
    .slick-prev:hover, .slick-prev:focus {
        background-image: url(../img/btn-prev.webp); 
        background-size: 100%;
        opacity: .7;
    }
    .slick-next:hover, .slick-next:focus {
        background-image: url(../img/btn-next.webp); 
        background-size: 100%;
        opacity: .7;
    }

    #messageCardWrap { position: relative; left:-200px; opacity: 0; transition:1s;}
    #messageCardWrap.on { left:0; opacity: 1; }
    #messageCard { background-color: rgba(255,255,255,.7); max-width: 920px; margin: 80px auto 0; padding: 10px; display: flex; }
    #messageCard > div#messageCardLeft { width: 40%; }
    #messageCard > div#messageCardLeft img { width: 100%; }
    #messageCard > div#messageCardRight { width: 60%; padding: 3% 5%; text-align: left; }
    #messageCard > div#messageCardRight img { width: 100%; margin-bottom: 20px; }
    #messageCard > div#messageCardRight p { font-size: 20px; } 

    #system { background-color: #f8f8f8; /*background-image: url(../img/bg-system.webp); background-position: left top; background-repeat: no-repeat; background-size: 353px;*/ padding: 80px 20px 0;}
    #systemInner { max-width: 1100px; margin: 0 auto; }
    #system h2 { font-size: 36px; margin-bottom: 60px; text-align: left;}
    #system h2 img { width: 480px; position: relative; left:100px; opacity: 0; transition:1s;}
    #system h2.on img { left:0; opacity: 1;}
    #system p.lead { max-width: 980px; font-size: 20px; margin: 0 auto 40px; text-align: left; opacity: 0; transition:1s;  }
    #system p.lead.on { opacity:1; }
    #systemBoxWrap #systemBox {  position: relative; top:100px; opacity: 0; transition:1s;}
    #systemBoxWrap.on #systemBox { top:0; opacity: 1; }
    #systemBox { display: flex; justify-content: space-around; margin: 0 auto; background: rgba(97,97,60,.5); padding: 40px 50px; border-radius: 20px; }
    #systemBoxWrap img { width: 100%;}
    
    
    #systemBoxLeft { width: 37%;}
    #systemBoxRight { width: 63%; background: #616156; border-radius: 10px; padding: 10px; }
    #systemBoxRight img { width: 100%; margin-bottom: 10px; }
    .spSystemTxt { display: none;}
    .systemInfoTxt { color: #fff; text-align: left; }
    #systemBoxLeft ul { margin-top: 20px; }
    #systemBoxLeft ul li { margin-bottom:  20px; margin-right: 20px; transition: .3s; }
    #systemBoxLeft ul li.on {margin-right: 0px;}
    #systemBoxLeft ul li a { border-radius: 10px; display: block; background: #fff url(../img/btn-next.webp); background-size: 20px; background-position: right 20px top 50% ; background-repeat: no-repeat; padding: 10px 40px 10px 10px; text-align: left; color: #111; text-decoration: none; padding: 20px; transition: .3s; font-size: 18px; }
    #systemBoxLeft ul li.on a { border-radius: 10px 0 0 10px; margin-left: 20px; display: block; background-color: #616156; background-image: none; text-align: left; color: #fff; text-decoration: none; padding: 20px 20px 20px 40px; position: relative; }
    #systemBoxLeft ul li.on a::before { content: ''; position: absolute; display: block; height: 90%; width: 4px; background: #fff; top: 5%; left: 5%;  }

    #flow { background-color: #f8f8f8; padding: 0 0 0 20px; overflow: hidden;}
    #flowInner { max-width: 1280px; position: relative; margin: 0 auto; left:100px; opacity: 0; transition:1s; }
    #flowInner.on { left:0; opacity: 1; }
    #flowContent { display:flex; padding: 50px 0 50px 50px; }
    #flowContent::before { content: ''; position: absolute; top: 0; left: -10px; background-color: rgba(215,215,203,.5); width:130%; max-width: 1590px; height: 100%; background-image: url(../img/img-kotonoha02.webp); background-position: right 10% bottom -118px; background-repeat: no-repeat; background-size: 45%; }
    #flowContent h2 { width: 243px; margin-bottom: 50px; }
    #flowContent h2 img { width: 100%; }
    #flowLeftContent { max-width: 780px; }
    #flowLeftContent ul { display: flex; justify-content: space-between; position: relative; }
    #flowLeftContent ul::before { content:''; display: block; height: 10px; width: 0; background: #c7cabb; position: absolute; left: 16%; top: 60px; transition: 1.4s; }
    #flowLeftContent ul.on::before { width: 65%; }    
    #flowLeftContent ul li { width: 17%; opacity: 0; position: relative; top: 100px;  }
    #flowLeftContent ul li.on { opacity: 1; top:0;  }
    #flowLeftContent ul li:nth-child(1) { transition-delay: 0; transition-duration: 1s; }
    #flowLeftContent ul li:nth-child(2) { transition-delay: .2s; transition-duration: 1s; }
    #flowLeftContent ul li:nth-child(3) { transition-delay: .4s; transition-duration: 1s; }
    #flowLeftContent ul li:nth-child(4) { transition-delay: .6s; transition-duration: 1s; }
    #flowLeftContent ul li:nth-child(5) { transition-delay: .8s; transition-duration: 1s; margin-right: 20px; }
    #flowLeftContent img { width:100%; }

    #movie { background-color: #f8f8f8; padding: 80px 20px; text-align: center; }
    #movieInner::before { content:''; position: absolute; top: -6px; left: -6px;width: 0; height: 0; border-style: solid; border-color: #292929 transparent transparent transparent; border-width: 48px 48px 0px 0px;  }
    #movieInner::after { content:''; position: absolute; bottom: -6px; right: -6px; width: 0; height: 0; border-style: solid; border-color: transparent transparent #292929 transparent; border-width: 0px 0px 48px 48px;  }
    #movieInner { background-color: #efefee; border: 2px solid #292929; padding: 50px 20px 30px; max-width: 1280px; margin: 0 auto; position: relative; bottom:-100px; opacity: 0; transition:1s; }
    #movieInner.on { bottom:0; opacity: 1; }
    #movie h2 { margin-bottom: 50px; }
    #movie h2 img { width: 300px; }
    #movie ul { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
    #movie.c ul { max-width: 1200px; }
    #movie ul li { width: 46%; margin-bottom: 20px; }
    #movie.c ul li { width: 31%; margin-bottom: 20px; }
    #movie ul li img { width: 100%; box-shadow: 5px 5px 0 0 rgba(0,0,0,.2);  }
    #movie ul li p { margin-top: 20px; font-size: 24px; }

    #map {padding: 80px 20px; background: #fff;}
    #mapInner { max-width: 1280px; margin: 0 auto;}
    #map h2 { margin: 0 auto 60px; font-size: 36px;}
    #map p { margin: 0 auto 40px; text-align: center;}
    #map iframe { height: 640px; border: 2px solid #333;}

    #map select { margin-bottom: 40px; font-size: 20px; background: #f3ffd2; background:  linear-gradient(180deg, rgba(250,252,238,1) 0%, rgba(228,225,208,1) 100%); padding: 10px; }
    #mapLst { max-width: 1280px; margin: 0 auto;}
    #mapLst > div p { font-size: 16px; text-align: left; }

    #contact { padding: 80px 20px; background: #dbdbdb; }
    #contact h2 { width: 450px; margin: 0 auto 50px; }
    #contact h2 img { width: 100%; }
    #contactInner { max-width: 980px; margin: 0 auto; }
    #contactInner > p { text-align: left; margin-bottom: 50px;  }
    .textScroll { overflow: auto; height: 240px; font-size: 12px; border: solid 1px #CCC;
        border-radius: 3px; box-shadow: 0px 0px 5px #CCC inset;
        padding: 3px 8px; margin: 2px;
        vertical-align: middle; }
    #mfp_OperationCheck { display:none}
    .textScroll p { margin-bottom: 10px;}


    #footer { background: #101010; text-align: center; padding: 50px 0 5px; }
    #footerInner { margin: 0 auto; text-align: left; max-width: 1280px; color:#fff;}
    #footerInner p img {width:120px; margin-right: 20px;}
    #footer address { text-align:right; font-size: 11px; margin-top: 30px; }

    
    #iconmouse { position: fixed; bottom: -20%; right:20px; width: 72px; z-index: 100; opacity: 0; transition: .6s; }
    #iconmouse.opa1 { bottom: 2%; }
    #iconskip { position: fixed; bottom: 0%; right:calc( 50% - 5vw); width: 10vw; z-index: 100; opacity: 0; transition: .6s; }

    #inqBtn {  background: linear-gradient(120deg, rgba(177,136,166,1) 0%, rgba(143,110,134,1) 100%); height: 60px; line-height: 60px; text-align: center; width: 420px; display: block; margin: 0 auto;  padding: 0; color: #fff; text-decoration: none; text-shadow: none;}
}

#anime { height: 100vh; width: 100%; overflow: hidden; z-index: 100; margin-bottom: 200px; }
#vol1 { width: 100%; max-width: 1440px; margin: 0 auto; height: 100%; position: relative;  }
#vol1 img.cut { opacity: 0; width: 100%; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); transition: 1s; }

#vol1 img.cut.opa1 { opacity: 1; }
#vol1 img.cut.opa05 { opacity: .4; }

#vol1 img#cut1_tx1 { opacity: 0; width: 24%; position: absolute; top:50%; left:50%; transition: 1s;  transform: translate(-180%,-350%); }
#vol1 img#cut1_tx1.cut1_tx1 { opacity: 1; top:50%; left:50%; transform: translate(-189%,-350%); }

#vol1 img#cut2_1 { transform: translate(-175%,-140%); }
#vol1 img#cut2_2 { transform: translate(-130%,0%); }
#vol1 img#cut2_3 { transform: translate(54%,-81%); }
#vol1 img#cut2_1.on { transform: translate(-165%,-140%); }
#vol1 img#cut2_2.on { transform: translate(-140%,0%); }
#vol1 img#cut2_3.on { transform: translate(64%,-81%); }

.cutImg {top: 50%; left: 50%; position: absolute; opacity: 0; width: 26%; transition: 1s; box-shadow: rgba(0,0,0,.1) .5vw .5vw 2vw 0; }
.cutImg.on { opacity: 1; }

#vol1 img#cut3_tx1,
#vol1 img#cut3_tx2 { opacity: 0; width: 74%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); transition: 1s;}
#vol1 img#cut3_tx1.cut3_tx1,
#vol1 img#cut3_tx2.cut3_tx2 { opacity: 1; }

#vol1 img#cut4 { transform: translate(-50%,-50%) scale(.6); transition: 3s; }
#vol1 img#cut4.opa1 { transform: translate(-50%,-50%) scale(1); transition: 2s; }

#vol1 img#cut5_tx1 { opacity: 0; width: 50%; position: absolute; bottom:50%; left:50%; transform: translate(-50%,630%); transition: 1s; }
#vol1 img#cut5_tx1.cut5_tx1 { opacity: 1; }

@media screen and (min-width: 0px) and (max-width: 767.98px) {
    #vol1 img.cut { width: 150%; }
    .cutImg { width: 29%; }
    #vol1 img#cut1_tx1 { width: 40%; transform: translate(-100%,-750%); }
    #vol1 img#cut1_tx1.cut1_tx1 { transform: translate(-116%,-750%); }
    #vol1 img#cut3_tx1,
    #vol1 img#cut3_tx2 { width: 90%; }
    #vol1 img#cut5_tx1 { width: 70%; transform: translate(-50%,700%); transition: 1s; }
    #vol1 img.cut#cut4 { width: 100%; }
    #vol1 img.cut#cut6 { width: 100%; }
}

#vol2 { width: 100%; max-width: 1440px; margin: 0 auto; height: 100%; position: relative;  }
#vol2 img.cut { opacity: 0; width: 100%; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); transition: 1s; }

#vol2 img.cut.opa1 { opacity: 1; }
#vol2 img.cut.opa05 { opacity: .4; }

#vol2 img#s2cut1_tx1 { opacity: 0; width: 29%; position: absolute; top:50%; left:50%; transition: 1s;  transform: translate(-180%,-350%); }
#vol2 img#s2cut1_tx1.cut1_tx1 { opacity: 1; top:50%; left:50%; transform: translate(-167%,-350%); }

#vol2 img#s2cut2_1 { transform: translate(-130%,-140%); }
#vol2 img#s2cut2_2 { transform: translate(-50%,0%); }
#vol2 img#s2cut2_3 { transform: translate(105%,-155%); }
#vol2 img#s2cut2_1.on { transform: translate(-120%,-140%); }
#vol2 img#s2cut2_2.on { transform: translate(-60%,0%); }
#vol2 img#s2cut2_3.on { transform: translate(115%,-155%); }

.cutImg {top: 50%; left: 50%; position: absolute; opacity: 0; width: 26%; transition: 1s; box-shadow: rgba(0,0,0,.1) .5vw .5vw 2vw 0; }
.cutImg.on { opacity: 1; }

#vol2 img#s2cut3_tx1 { opacity: 0; width: 50%; position: absolute; top:50%; left:50%; transform: translate(-88%,-50%); transition: 1s;}
#vol2 img#s2cut3_tx1.cut3_tx1{ opacity: 1; }

#vol2 img#s2cut4 { transform: translate(-50%,-50%) scale(.6); transition: 3s; }
#vol2 img#s2cut4.opa1 { transform: translate(-50%,-50%) scale(1); transition: 2s; }

#vol2 img#s2cut5_tx1 { opacity: 0; width: 70%; position: absolute; bottom:50%; left:50%; transform: translate(-50%,465%); transition: 1s; }
#vol2 img#s2cut5_tx1.cut5_tx1 { opacity: 1; }

@media screen and (min-width: 0px) and (max-width: 767.98px) {
    #vol2 img.cut { width: 150%; }
    .cutImg { width: 37%; }
    #vol2 img#s2cut1_tx1 { width: 60%; transform: translate(-60%,-550%); }
    #vol2 img#s2cut1_tx1.cut1_tx1 { transform: translate(-76%,-550%); }
        #vol2 img#s2cut2_1 { transform: translate(-130%,-160%); }
        #vol2 img#s2cut2_2 { transform: translate(-50%,-30%); }
        #vol2 img#s2cut2_3 { transform: translate(-15%,90%); }
        #vol2 img#s2cut2_1.on { transform: translate(-120%,-160%); }
        #vol2 img#s2cut2_2.on { transform: translate(-60%,-30%); }
        #vol2 img#s2cut2_3.on { transform: translate(-7%,90%); }
    #vol2 img#s2cut3_tx1 { width: 60%; transform: translate(-75%,-50%);  }
    #vol2 img#s2cut5_tx1 { width: 90%; transform: translate(-50%,700%); transition: 1s; }
    #vol2 img.cut#s2cut4 { width: 100%; }
    #vol2 img.cut#s2cut6 { width: 100%; }
}

@media screen and (min-width: 1200px) { }
@media screen and (min-width: 768px) and (max-width: 1200px) { }
@media screen and (min-width: 980px) and (max-width: 1200px) { 
    #header ul li { padding-left: 24px; font-size: 16px; }
    #header ul li:last-child { margin-left: 24px;}
    #header ul li:last-child a { padding-left: 24px; padding-right: 24px; }
 }
@media screen and (min-width: 768px) and (max-width: 979.98px) { 
    #header ul li { padding-left: 20px; font-size: 14px; }
    #header ul li:last-child { margin-left: 20px;}
    #header ul li:last-child a { padding-left: 20px; padding-right: 20px; }}
@media screen and (min-width: 0px) and (max-width: 767.98px) {
    #header { height: 52px; width: 100%; background: rgba(255,255,255,.8); position: fixed; top: 0; left:0; z-index: 999;  }
    #headerInner { display:flex; justify-content: space-between;}
    #headerInner h1{ width: 100px;}
    #headerInner h1 img{ width: 94px; margin-left: 12px; margin-top: 13px;}
    #headerInner a.humberger { width: 30px; height: 22px; border-top: 2px solid #111; border-bottom: 2px solid #111; position: relative; margin-top: 16px; margin-right: 16px; display: block; }
    #headerInner a.humberger::before { content: ""; position: absolute; width: 100%; top:8px; left: 0; height: 2px; background: #111; transition: .3s;}
    #headerInner a.humberger::after { content: ""; position: absolute; width: 100%; top:8px; left: 0; height: 2px; background: #111;  transition: .3s; opacity: 0;}
    
    #headerInner a.humberger.on { border-top: 0px solid #fff; border-bottom: 0px solid #fff; }
    #headerInner a.humberger.on::before { content: ""; position: absolute; transform: rotate(-45deg); width: 100%; top:8px; left: 0; height: 2px; background: #111;}
    #headerInner a.humberger.on::after { content: ""; position: absolute; transform: rotate(45deg); width: 100%; top:8px; left: 0; height: 2px; background: #111; opacity: 1;}

    #header ul { background: rgba(255,255,255,.9); width: 100%; height: 0; overflow: hidden; transition: .3s; position: fixed; top: 0; left: 0; }
    #header ul.on { height: 100vh; height: 100dvh; }
    #header ul li:first-child { margin-top: 14vw; }
    #header ul li { text-align: center; font-size: 4vw; width:80%; margin: 0 auto; border-bottom: 2px solid #ccc; }
    #header ul li a { padding: 4%; display: block; color: #333; text-decoration: none; }

    #mv { margin-top: 52px; overflow: hidden; position: relative; }
    #mv::after { content: ''; width:100%; height: 100%; background: rgba(255,255,255,1); display: block ; position: absolute; left: 0; bottom: 0; transition: 1s; transition-delay: 3s; }
    #mv #mvimg img { width: 100%; filter: blur(20px); transition: 1s; transition-delay: 3s; opacity: .3; }
    #mv.open #mvimg img { filter: blur(0px); opacity: 1; }
    
    #mvTxt { width: 45%; position: absolute; left: 27%; bottom: 35%; z-index: 1; transition: 1s; transition-delay: 3s; }
    #mvTxt img { width: 100%; margin-bottom: 10%; filter: blur(10px); opacity: 0; transition: 1.6s; }
    
    #mv.open::after { content: ''; height: 30%; background: rgba(255,255,255,.95); }
    #mv.open #mvTxt { left: 8%; bottom: 2%; width:35%; }
    #mv.open #mvTxt img { filter: blur(0); opacity: 1; }
    #mv #mahoImg { position: absolute; bottom: -4%; right:2%; width: 50%; z-index: 1; opacity: 0; transition: 1s; transition-delay: 3s; }
    #mv.open #mahoImg {  opacity: 1;  }
     
    #about { text-align: center; padding: 10vw 0; background-color: #f8f8f8; background-image: url(../img/bg-logo.webp); background-size: 17%; background-position: right 0 top 2vw; background-repeat: no-repeat; overflow: hidden; }
    #aboutInner { margin: 0 auto; position: relative; height: 84vw }
    #aboutInner.c { height: 92vw }
    #aboutContent { background-color: rgba(230,230,226,.7); /*background-image: url(../img/illust-about.webp); background-position: right 10px top 30vw; background-size: 40%; background-repeat: no-repeat;*/ position: absolute; top:10vw; left: -10vw; opacity:0; transition: 1s; width: 95%; display:flex; flex-direction:column; padding-bottom: 45vw;  }
    #aboutContent.on { left: 0; opacity: 1; }
    #aboutRightContent{ padding: 4vw 5vw 0 5vw; }
    #aboutLeftContent{ position: relative; }
    /*#aboutLeftContent::before{ content:''; position: absolute; top:15%; left:5%; background: #f8f8f8; width: 85vw; height: 85vw; border-radius: 50%;}*/
    #aboutLeftContent img{ width: 62%; position: absolute; right: -13%; top:-73vw; transition: .6s; opacity: 0;}
    .c #aboutLeftContent img{ width: 57%; right: -13%; top:-93vw;}
    #aboutLeftContent img.on{ opacity: 1;}
    #introduction { text-align: left; margin: 0 0 auto auto;}
    #aboutInner h2 { width: 90%; margin: 0 auto; text-align: right;  }
    #aboutInner h2 img { position:relative; right: -50px; opacity: 0; width: 100%; transition: 1s; }
    #aboutInner h2.on img { right: 0; opacity: 1;}
    #introduction p { font-size: 3.4vw; line-height: 1.6; margin-bottom: 5%; position: relative; opacity: 0; }
    #introduction p:nth-child(1),#introduction p:nth-child(2),#introduction p:nth-child(3),#introduction p:nth-child(4),#introduction p:nth-child(5) { transition-delay: 0; transition-duration: 1s; margin-left: -5vw; }
    
    #introduction p.on { opacity: 1; margin-left: 0; }
    #introduction p span { top: auto; left: -1.8vw; position: relative; }
   
    #messageMahoWrap { background: #f8f1e4; background: linear-gradient(180deg, rgba(248,241,228,1) 50%, rgba(255,255,255,1) 100%); padding: 5% 0 35%; }
    #messageMahoWrap h2 { background: url(../img/h2-mahomessage-header.png) no-repeat left center; background-size: 4vw auto; text-align: left; padding-left: 5vw; font-size: 5vw; max-width: 1200px; margin: 0 auto 5% 5%; color:#413321; }
    #messageMahoWrap h2.c { background: none; text-align: center; font-size: 4.5vw; margin: 0 auto 5%; color:#413321; }
    #messageMaho { max-width: 1200px; width: 90%; padding: 0; margin: 0 auto; position: relative; background:  #fffcf6; align-items: center; box-shadow: 10px 10px rgba(104, 80, 35, 0.1); }
    #messageMaho > div:first-child img { width: 80%; margin-top: 5%; }
    #messageMaho > div:last-child { text-align: left; padding: 5%; }
    #messageMaho > div:last-child p { font-size: 3.4vw; margin-bottom: 4%; }
    #messageMaho > div:last-child p.sign { font-size: 2.8vw; text-align: right;}

    #mahoProf { background: #fff; padding: 5%; margin-top: 5%; border: solid 1px rgba(121, 97, 19, 0.1); }
    #messageMaho > div:last-child #mahoProf p { font-size: 3.2vw; margin-bottom: 0; }

    #lineup { background: #f8f7f9; position: relative; background-color: #e8e8e6; }
    #lineupInner { padding: 0; margin: 0 auto; position: relative; }

    #lineup h2 { text-align: center;  top: -15vw; position:relative;  }
    #lineup h2 img{ width: 90%; top: 15vw; position:relative; opacity:0; transition: 1s;}
    #lineup h2.on img{ top: 0; opacity:1;}
    
    .lineupLead { font-size: 3.4vw; margin-bottom: 5%; padding: 0 5%; text-align: left; position: relative; top:-3%;  opacity:0; transition: 1s; opacity: 0;}
    .lineupLead.on { opacity: 1;}
    #lineuplist { padding: 5%; margin: 0 auto; }
    #lineuplist ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
    #lineuplist ul li { width: 48%; margin-bottom: 4%;  }
    #lineuplist ul li a { display:block; transition: .6s; opacity: 1; }
    #lineuplist ul li a:hover { opacity: .6; }
    #lineuplist ul li img { width: 100%; position: relative; transition: 1s; opacity: 0; top: 50px;  }
    #lineuplist ul li.on img { opacity: 1; top: 0; }

    #detail { background: #4f4f4f; padding: 10vw 0; transition:.4s; box-shadow: inset 0 0 2vw rgba(0,0,0,.2); overflow: hidden; }
    #detail.cl0{ background: #8e1a1a;  }
    #detail.cl1{ background: #e6581e;  }
    #detail.cl2{ background: #e4e3f2;  }
    #detail.cl3{ background: #f5abd7;  }
    #detail.cl4{ background: #ffb200;  }
    #detail.cl5{ background: #86aff9;  }
    #detail.cl6{ background: #a08dfe;  }
    #detail.cl7{ background: #d4eccc;  }
    #detail.cl8{ background: linear-gradient(70deg, rgba(164,255,179,1) 0%, rgba(145,225,255,1) 50%, rgba(255,160,243,1) 100%);}
    #detailSlider { max-width: 980px; margin: 0 auto; }
    #detailSlider > div { background: #fff; margin: 0 5vw; }
    #detailSlider {position: relative; right:-200px; opacity: 0; transition:1s; }
    #detailSlider.on { right:0; opacity: 1; }
    .productSlFlx { padding: 10% 5% 5%;}
    .productSlFlx > div { width: 70%; margin: 0 auto 5%;}
    .productSlFlx > div:first-child { width: 84%; margin: 0 auto 10%;}
    .productSlFlx > div img { width: 100%;}
    .productSlFlx ul { display:flex; margin: 4% auto 0; justify-content: center;}
    .productSlFlx ul li { width: 35px; margin-right: 3%; }
    .productSlFlx ul li:last-child { margin: 0; }
    .productSlFlx p { font-size: 3vw; text-align: left; color: #7a6a56;}
    .productSlFlx ul li a { border: 1px solid #fff; display: block; }
    .productSlFlx ul li a.on { border: 1px solid #333; }
    
    .slick-dots { bottom: -50px; }
    .slick-dots li { opacity:.5; margin-top: 40px; width: 10px; height: 10px; background: #fff; border-radius: 50%; }
    .slick-dots li.slick-active { background: #000;}
    .slick-next { right: 5vw; width: 41px; height: 41px; background-image: url(../img/btn-next.webp); background-size: 100%; transition: .1s; text-indent: -40px;}
    .slick-prev { left: 5vw; z-index: 10; width: 41px; height: 41px; background-image: url(../img/btn-prev.webp); background-size: 100%; transition: .1s; text-indent: -200px;}
    .slick-prev:hover, .slick-prev:focus {
        background-image: url(../img/btn-prev.webp); 
        background-size: 100%;
        opacity: .7;
    }
    .slick-next:hover, .slick-next:focus {
        background-image: url(../img/btn-next.webp); 
        background-size: 100%;
        opacity: .7;
    }
    .slick-next:before,.slick-prev:before { display: none;}


    #messageCardWrap { position: relative; left:-200px; opacity: 0; transition:1s;}
    #messageCardWrap.on { left:0; opacity: 1; }
    #messageCard { background-color: rgba(255,255,255,.7); width: 90%; margin: 80px auto 0; padding: 5%;  }
    #messageCard > div#messageCardLeft { width: 70%; margin: 0 auto 8%; }
    #messageCard > div#messageCardLeft img { width: 100%; }
    #messageCard > div#messageCardRight { width: 90%; margin: 0 auto; text-align: left; }
    #messageCard > div#messageCardRight img { width: 100%; margin-bottom: 5%; }
    #messageCard > div#messageCardRight p { font-size: 3.4vw; } 

    #system { background-color: #f8f8f8; /*background-image: url(../img/bg-system.webp); background-position: left top; background-repeat: no-repeat; background-size: 353px;*/ padding: 10% 0% 0%;}
    #systemInner { margin: 0 auto; }
    #system h2 { margin: 0 auto 5%; text-align: left; width: 90%;}
    #system h2 img { width: 70%; position: relative; left:100px; opacity: 0; transition:1s;}
    #system h2.on img { left:0; opacity: 1;}
    #system p.lead { font-size: 3.4vw; margin-bottom: 5%; padding: 0 5%; text-align: left; opacity: 0; transition: .6s; }
    #system p.lead.on { opacity:1; }
    #systemBoxWrap #systemBox {  position: relative; top:100px; opacity: 0; transition:1s;}
    #systemBoxWrap.on #systemBox { top:0; opacity: 1; }
    #systemBox { margin: 0 auto; background: rgba(97,97,60,.5); padding: 5% 5% 10%; border-radius: 0; }
    
    #systemBoxWrap img { width: 90%;}
    
    #systemBoxLeft { display: none; }
    #systemBoxRight { width: 100%; /*background: #616156;*/ text-align: left; border-radius: 0 0 10px 10px; padding: 4px; }
    #systemBoxRight img { width: 100%; margin-bottom: 2%; }
    #systemBoxRight p { font-size: 3.4vw;  }
    #systemBoxRight .spSystemTxt { font-size: 4vw; font-weight: bold; margin-bottom: 3vw; }    
    .systemInfoTxt { color: #000; text-align: left; }

    #systemBoxLeft ul li { margin-bottom:  20px; margin-right: 30px; transition: .3s; }
    #systemBoxLeft ul li.on {margin-right: 0px;}
    #systemBoxLeft ul li a { border-radius: 10px; display: block; background: #fff; padding: 10px; text-align: left; color: #111; text-decoration: none; padding: 20px; transition: .3s; }
    #systemBoxLeft ul li.on a { border-radius: 10px 0 0 10px; margin-left: 20px; display: block; background: #616156; padding: 10px; text-align: left; color: #fff; text-decoration: none; padding: 20px; }

    #system .slick-dots { bottom: -8vw; }
    #system .slick-dotted.slick-slider { margin-bottom: 2vw;}

    #flow { background-color: #f8f8f8; padding: 0 0 0 5%; overflow: hidden;}
    #flowInner { position: relative; margin: 0 auto; left:100px; opacity: 0; transition:1s; }
    #flowInner.on { left:0; opacity: 1; }
    #flowContent { display:flex; padding: 8% 0 58% 5%; }
    #flowContent::before { content: ''; position: absolute; top: 0; left: 0; background-color: rgba(215,215,203,.5); width: 100%; height: 100%; background-image: url(../img/img-kotonoha02.webp); background-position: left 50% bottom -12vw; background-repeat: no-repeat; background-size: 88%; }
    #flowContent h2 { margin-bottom: 8%; text-align: center; }
    #flowContent h2 img { width: 40%; }
    #flowLeftContent ul { display: flex; justify-content: space-between; position: relative; }
    #flowLeftContent ul::before { content:''; display: block; height: 2vw; width: 0; background: #c7cabb; position: absolute; left: 16%; top: 6vw; transition: 1.4s; }
    #flowLeftContent ul.on::before { width: 65%; }    
    #flowLeftContent ul li { width: 17%; opacity: 0; position: relative; top: 100px;  }
    #flowLeftContent ul li.on { opacity: 1; top:0;  }
    #flowLeftContent ul li:nth-child(1) { transition-delay: 0; transition-duration: 1s; }
    #flowLeftContent ul li:nth-child(2) { transition-delay: .2s; transition-duration: 1s; }
    #flowLeftContent ul li:nth-child(3) { transition-delay: .4s; transition-duration: 1s; }
    #flowLeftContent ul li:nth-child(4) { transition-delay: .6s; transition-duration: 1s; }
    #flowLeftContent ul li:nth-child(5) { transition-delay: .8s; transition-duration: 1s; margin-right: 5%; }
    #flowLeftContent img { width:100%; }


    #movie { background-color: #f8f8f8; padding:10% 5%; text-align: center; }
    #movieInner::before { content:''; position: absolute; top: -6px; left: -6px;width: 0; height: 0; border-style: solid; border-color: #292929 transparent transparent transparent; border-width: 24px 24px 0px 0px;  }
    #movieInner::after { content:''; position: absolute; bottom: -6px; right: -6px; width: 0; height: 0; border-style: solid; border-color: transparent transparent #292929 transparent; border-width: 0px 0px 24px 24px;  }
    #movieInner { background-color: #efefee; border: 2px solid #292929; padding: 10% 5% 5%; max-width: 1280px; margin: 0 auto; position: relative; bottom:-100px; opacity: 0; transition:1s; }
    #movieInner.on { bottom:0; opacity: 1; }
    #movie h2 { margin-bottom: 5%; text-align: center; }
    #movie h2 img { width: 60%; }
    #movie ul { margin: 0 auto; }
    #movie ul li { width: 80%; margin: 0 auto 5%; }
    #movie ul li img { width: 100%; }
    #movie ul li p { margin-top: 3vw; font-size: 3.4vw; }

    #map {padding: 10% 5%; background: #fff;}
    #map h2 { margin: 0 auto 5%; font-size: 4.2vw;}
    #map p { margin: 0 auto 5%; font-size: 3.4vw;}
    #map iframe { height: 100vw; border: 2px solid #333;}

    #map select { margin-bottom: 5%; font-size: 4vw; background: #f8ffd2; background:  linear-gradient(180deg,rgba(250,252,238,1) 0%, rgba(228,225,208,1) 100%); padding: 1vw; border-radius: 8px; }
    #mapLst { max-width: 1280px; margin: 0 auto;}
    #mapLst > div p { font-size: 3.4vw; text-align: left; }

    #contact { padding: 10% 5%; background: #dbdbdb; }
    #contact h2 { margin: 0 auto 5%; }
    #contact h2 img { width: 80%; }
    #contactInner { max-width: 980px; margin: 0 auto; }
    #contactInner > p { text-align: left; margin-bottom: 50px;  }
    .textScroll { overflow: auto; height: 240px; font-size: 12px; border: solid 1px #CCC;
        border-radius: 3px; box-shadow: 0px 0px 5px #CCC inset;
        padding: 3px 8px; margin: 2px;
        vertical-align: middle; }
    #mfp_OperationCheck { display:none}
    .textScroll p { margin-bottom: 10px;}


    #footer { background: #101010; text-align: center; padding: 50px 0 5px; }
    #footerInner { margin: 0 auto; text-align: left; max-width: 1280px; color:#fff;}
    #footerInner p img {width:120px; margin-right: 20px;}
    #footer address { text-align:right; font-size: 11px; margin-top: 30px; }

    #iconmouse { position: fixed; bottom: 2%; right: 0; width: 10vw; z-index: 100; opacity: 0; transition: .6s; }
    #iconskip { position: fixed; bottom: 0%; right:calc( 50% - 8vw); width: 16vw; z-index: 100; opacity: 0; transition: .6s; }
    #iconskip img { width: 100%; }
    
    #inqBtn {  background: linear-gradient(120deg, rgba(177,136,166,1) 0%, rgba(143,110,134,1) 100%); height: 16vw; line-height: 16vw; text-align: center; width: 80%; display: block; margin: 0 auto; padding: 0; color: #fff; text-decoration: none; text-shadow: none;}
}

.view-pc { display: block!important; }
.view-sp { display: none!important; }

@media screen and (min-width: 0px) and (max-width: 767px) {
	.view-pc { display: none!important; }
	.view-sp { display: block!important; }
}


#iconmouse.opa1,
#iconskip.opa1 { opacity: 1; }
/* Slick */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}