@charset "UTF-8";
.mv .topbanner .slick-dots{ z-index: 1;}
.mv .topbanner{ position: relative; margin:0; width: 100%; max-width: 2650px; height: 100vh;}
.mv .topbanner .slickslider div { background-repeat: no-repeat; background-size: cover; background-position: center; height: 100vh; margin: 0;}
.mv .topbanner .slickslider div.img01 { background-image: url(https://res.cloudinary.com/dzusiwsrh/image/upload/f_auto,q_60/v1685096877/mvg_mv/mv-01_pc_e0e6d2.jpg);}

@media screen and (max-width:1280px){
  .mv .topbanner .slickslider div.img01 { background-image: url(https://res.cloudinary.com/dzusiwsrh/image/upload/c_scale,f_auto,q_60,w_1280/v1685096877/mvg_mv/mv-01_pc_e0e6d2.jpg);}
}

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

  .mv .topbanner .slickslider div.img01 { background-image: url(https://res.cloudinary.com/dzusiwsrh/image/upload/f_auto,q_60/v1685096887/mvg_mv/mv-01_sp_fgc2ex.jpg);}
}

/*  .mv .topbanner .slickslider div.img02 { background-image: url(../images/mv/mv-02_sp.jpg);}*/
/*
@media screen and (min-width:768px){
  .mv .topbanner .slickslider div.img02 { background-image: url(../images/mv/mv-02_pc.jpg);}*/
}

.mv .topbanner .slickslider .slick-dots { bottom: 4%; z-index: +1;}
.mv .topbanner .slick-dotted.slick-slider{margin:0;}

.mv .topbanner h2{opacity:0;transition: all 4s;}

.mv .topbanner .slick-current h2{opacity:1;}

.mv .topbanner h2.jp{  position: absolute; width:100%;top: 46%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);}


.mv .topbanner h2.jp{ font-size: 2.4rem; display: block; margin: 16px 0; padding: 16px; font-weight: 500; text-align: center;color:#890000; /*background: rgba(255,255,255,0.5);*/ }
.mv .topbanner h2.jp{font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; }
/*.mv .topbanner h2.jp span:nth-of-type(2),
.mv .topbanner h2.en span:nth-of-type(1){ display: inline; float: right; }*/

.mv .topbanner h2.mg{ color: #FFF; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
   text-align: center; letter-spacing: 0.1em; font-size: 2rem;}

.mv .topbanner h2.mg span{ display: block; font-family: 'Cinzel', serif; font-size: 4rem; font-weight: 500;}

@media screen and (max-width:767px){
  .mv .topbanner h2.jp{ font-size: 1.6rem;}
  .mv .topbanner h2.mg span,
  .mv .topbanner h2.en p { font-size: 2rem;}}

.mv .topbanner .slick-dots li button:before{ color: #FFF; }

.scrolldown{ position:absolute; left:50%; bottom:10px; height:100px;}
.scrolldown span{ position: absolute; left:-32px; top:24px; color: #eee; font-size: 1rem; letter-spacing: 0.05em; font-family: 'Cinzel', serif;}
.scrolldown::before{ content: ""; position: absolute; top: 0; width: 1px; height: 30px; background: #eee; animation: pathmove 1.4s ease-in-out infinite; opacity:0; }

@keyframes pathmove{
0%{ height:0; top:-100px; opacity: 0;}
30%{ height:100px; opacity: 1;}
100%{ height:0; top:0; opacity: 0;}}
.scroll{ width:100%; height: 100vh; position: relative;} 

@media screen and (min-width:768px){ 
  #scroll{ display: none;}}

#main.top{ position: relative;/*background: #F4F4F4;*/}
.front-page section{padding:0;}/*rest*/

@media screen and (max-width:480px){ 
  #main.top .about .container{ height:800px;}}
#main.top .about .intro{ width: 100%; height: 100%;}
@media screen and (max-width:480px){ 
  #main.top .about .intro{ height:80%; margin-bottom: 56px;}
}
#main.top .about .intro .inner{ width:100%; height: 640px; writing-mode: vertical-rl; justify-content: flex-start;}
@media screen and (max-width:480px){  
  #main.top .about .intro .inner{ justify-content: center;}}
#main.top .about .intro h2.main-tit{ text-align:initial; font-size: 1.4rem; font-weight: 600; display: table-cell; padding: 0; }
#main.top .about .intro h2.main-tit,
#main.top .about .intro .txt p{ padding: 0; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
#main.top .about .intro .txt{ display: table-cell; text-orientation: upright; line-height: 2.4; letter-spacing: 0.3rem;}

#main.top .about .eyecatch{ margin:0 auto 24px; background: url(../images/eyecatch/top-about-us.jpg) left 64% / 640px auto no-repeat;}

@media screen and (max-width:480px){ 
  #main.top .about .eyecatch{ margin: 0 calc(50% - 50vw) 24px; width: 100vw; background: url(../images/eyecatch/top-about-us.jpg) left 72% / 100% auto no-repeat;}}

#main.top .about .viewall.button{position:relative;z-index:2;}

@media screen and (max-width:768px){ 
  #main.top .about .intro{left:0;z-index:1;}
}
#main.top .about .intro .txt p{ line-height: 3;}

  @media screen and (min-width:1024px){
  #main.top .about .welcome{ /*max-width: 980px; margin: 0 auto;*/}
  #main.top .about .intro{ left:32%;}
}
@media screen and (max-width:320px){
  #main.top .about .intro h2.main-tit{ padding: 0;}
  #main.top .about .intro h2.main-tit{ padding-left: 16px;}
  #main.top .about .intro .txt p{ line-height: 2; font-size: 0.9rem;}}

  #main.top .modal-win ul.modal-box{ max-width:980px; margin: 0 auto;list-style: none; display: grid;grid-template-columns: 1fr 1fr 1fr;}
  
  @media screen and (max-width:479px){
  #main.top .modal-win ul.modal-box{  grid-template-columns: 1fr 1fr; }
}

  #main.top .modal-win ul.modal-box li{ text-align: center; margin:24px 8px;}
  #main.top .modal-win ul.modal-box li:active{ color:#890000; fill:#890000;}
  #main.top .modal-win ul.modal-box li a:hover{text-decoration: none;}
  #main.top .modal-win ul.modal-box li a:hover h3{color:#890000;}
  
  @media screen and (max-width:320px){
  #main.top .modal-win ul.modal-box{ grid-template-columns: 1fr;}}
  #main.top .modal-win ul.modal-box li{ height: 240px; position: relative; }
  #main.top .modal-win ul.modal-box li svg.icon{ height: 120px;}
  #main.top .modal-win ul.modal-box .modal-op h3{ font-size: 1.4rem; font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; color:#2C2C2C;}
  #main.top .modal-win ul.modal-box .modal-op:hover,
  #main.top .modal-win ul.modal-box .icon:hover{ color:#890000; transform: scale(1.2, 1.2); transition: 0.5s all; fill:#890000;}
  #main.top .modal-win ul.modal-box .modal-op h3::after{ position: absolute; display: inline-block; content:''; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M280.2 150.2C273.1 143.8 262.1 142.2 254.3 146.1S239.1 158.5 239.1 167.1l.002 56L152 224C138.8 224 128 234.8 128 248v16C128 277.3 138.8 288 152 288L240 287.1v56c0 9.531 5.656 18.16 14.38 22c8.75 3.812 18.91 2.094 25.91-4.375l96-88.75C381.2 268.3 384 261.9 384 255.2c-.3125-7.781-2.875-13.25-7.844-17.75L280.2 150.2zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z"/></svg>') no-repeat center center / contain; width: 16px; height: 16px; top:59%; margin-left: 8px;}
  #main.top .modal-win ul.modal-box .modal-op:hover h3::after{ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23890000"><path d="M0 256C0 397.4 114.6 512 256 512s256-114.6 256-256S397.4 0 256 0S0 114.6 0 256zM297 385c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l71-71L120 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l214.1 0-71-71c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L409 239c9.4 9.4 9.4 24.6 0 33.9L297 385z"/></svg>') no-repeat center center / contain; width: 16px; height: 16px;}
  
  @media screen and (min-width:480px){ 
    #main.top .modal-win::after{ content: ''; width:100%;}
    #main.top .modal-win li:nth-child(n+4){order: 1;}}
  #main.top .modal-win .hide{ display: none;}


#main.top .info .container .box{border-radius: 32px;background: #FFF;margin:24px auto;padding:40px; }
@media screen and (max-width:768px){
  #main.top .info .container .box{width:100%; border-radius:0;}
}