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

 body,html { margin: 0; height: 100%;}
body { min-width: 100%;}
#hasa #app {
    font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif !important; color: #000;
}
#hasa .kokuyo-st-container { height: 100%;}
        #hasa #main { height: calc( 100% - 70px - 56px ); width: 100%; position: relative; /*overflow: hidden;*/ }


        
        #hasa #main figure { width: 100%; height: 100%; overflow: hidden; text-align: center; margin: 0; position: absolute; top:0; left: 0;}
        #hasa #main figure img { width: auto; height: 100%; position: absolute; top:0; left: 50%; transform: translateX(-50%);}
        .image1 { transition: all 1.5s ease 0s;}
        .intro .image1 { opacity: 0;}
        #hasa #copy { width: 100%; text-align: center; position: absolute; top:50%; left: 0; transform: translate(0,-50%); color: #FFF; font-size: 300%;
        transition: opacity .4s ease 1s,transform 1.5s ease 1s;}
#hasa #copy span { vertical-align: middle;}
 #hasa #copy span:nth-child(2){ transition: all .4s ease 1.1s; margin-left: 1vw; }
#hasa #copy span:nth-child(3){ transition: all .4s ease 1.2s; margin-left: 1vw; }
#hasa #copy span:nth-child(4){ transition: all .4s ease 1.3s; margin-left: 1vw; }
#hasa #copy span:nth-child(5){ transition: all .4s ease 1.4s; margin-left: 1vw; }
#hasa #copy span:nth-child(6){ transition: all .4s ease 1.5s; margin-left: 1vw; }
#hasa #copy span:nth-child(7){ transition: all .4s ease 1.6s; margin-left: 1vw; }
#hasa #copy span:nth-child(8){ transition: all .4s ease 1.7s; margin-left: 1vw; }
#hasa #copy span:nth-child(9){ transition: all .4s ease 1.8s; margin-left: 1vw; }
#hasa #copy span:nth-child(10){ transition: all .4s ease 1.9s; margin-left: 1vw; }
#hasa #copy span:nth-child(11){ transition: all .4s ease 2.0s; margin-left: 1vw; }
#hasa #copy span:nth-child(12){ transition: all .4s ease 2.1s; margin-left: 1vw; }
#hasa #copy span:nth-child(13){ transition: all .4s ease 2.2s; margin-left: 1vw; }
#hasa #copy span:nth-child(14){ transition: all .4s ease 2.3s; margin-left: 1vw; }
#hasa #copy span:nth-child(15){ transition: all .4s ease 2.4s; margin-left: 1vw; }

        .intro #hasa #copy span:nth-child(2),.intro #hasa #copy span:nth-child(3),.intro #hasa #copy span:nth-child(4),.intro #hasa #copy span:nth-child(5),.intro #hasa #copy span:nth-child(6),.intro #hasa #copy span:nth-child(7),.intro #hasa #copy span:nth-child(8),.intro #hasa #copy span:nth-child(9),.intro #hasa #copy span:nth-child(10),.intro #hasa #copy span:nth-child(11),.intro #hasa #copy span:nth-child(12),.intro #hasa #copy span:nth-child(13),.intro #hasa #copy span:nth-child(14),.intro #hasa #copy span:nth-child(15){ opacity: 0;}

        .intro #hasa #copy { opacity: 0;transform: translate(-3%,-50%); }
#hasa #copy span:nth-child(1) img { width: auto; height: 3.340277777777778vw;}
#hasa #copy span:nth-child(2) img { width: auto; height: 3.215277777777778vw;}
#hasa #copy span:nth-child(3) img { width: auto; height: 3.333333333333333vw;}
#hasa #copy span:nth-child(4) img { width: auto; height: 3.291666666666667vw;}
#hasa #copy span:nth-child(5) img { width: auto; height: 3.3125vw;}
#hasa #copy span:nth-child(6) img { width: auto; height: 3.111111111111111vw;}
#hasa #copy span:nth-child(7) img { width: auto; height: 3.423611111111111vw;}
#hasa #copy span:nth-child(8) img { width: auto; height: 2.923611111111111vw;}
#hasa #copy span:nth-child(9) img { width: auto; height: 3.375vw;}
#hasa #copy span:nth-child(10) img { width: auto; height: 3.368055555555556vw;}
#hasa #copy span:nth-child(11) img { width: auto; height: 3.196527777777778vw;}
#hasa #copy span:nth-child(12) img { width: auto; height: 3.159722222222222vw;}
#hasa #copy span:nth-child(13) img { width: auto; height: 2.243055555555556vw;}
#hasa #copy span:nth-child(14) img { width: auto; height: 3.125vw;}
#hasa #copy span:nth-child(15) img { width: auto; height: 3.138888888888889vw;}
        
        #hasa #slidewrap { width: 100%; height: 100%; position: absolute; top:0; left: 0; overflow: hidden;
        transition: opacity 1s ease 5s;}
        .view #hasa #slidewrap { /*transition: none;*/ }
        .intro #hasa #slidewrap { opacity: 0;}
        #hasa #slide {  width: 100%; height: 100%; position: absolute; top:0; left: 50%; transform: translateX(-50%); }
        #hasa #slide .slide { width: 100%; height: 100%; text-align: center; position: relative;
        transition: all 1s ease 0s;position: absolute; top:0; left: 50%; transform: translateX(-50%); opacity: 0;}
        #hasa #slide .slide img { height: 100%; width: auto;/*transition: all 1s ease 0s;*/position: absolute; top:0; left: 50%; transform: translateX(-50%);}
        #hasa #slide .slide span { display: inline-block;}


@media screen and (min-aspect-ratio: 1519/753) {
    #hasa #main figure img { width: 100%; height: 100%; object-fit: cover;}
	  #hasa #slide .slide img { height: 100%; width: 100%; object-fit: cover;}
}
        
        #hasa .slide1 #slide .slide:nth-child(1){ opacity: 1;}
        #hasa .slide2 #slide .slide:nth-child(2){ opacity: 1;}
        #hasa .slide3 #slide .slide:nth-child(3){ opacity: 1;}
        #hasa .slide4 #slide .slide:nth-child(4){ opacity: 1;}
        #hasa .slide5 #slide .slide:nth-child(5){ opacity: 1;}
        
        #hasa #navs { height: 70px; width: 100%; position:-webkit-sticky; position: sticky;top:0; background-color: #000; z-index: 2;transition: all .5s ease 1s;}
        .intro #navs { opacity: 0; transform: translateY(100%);}
#hasa #navs ul { position: absolute; top:0; right:0;
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#hasa #navs ul li a { color: #FFF; text-decoration: none; font-size: 19px; height: 100%; display: block; line-height: 70px; padding: 0 35px; position: relative;font-family: 'Roboto', sans-serif; letter-spacing: .1em;}
#hasa #navs ul li a span { display: inline-block; position: relative;}
#hasa #navs ul li a span:after { content: ""; display: block; width: 100%; height: 1px; border-top:1px solid #FFF; position: absolute; left: 0; bottom:17px; transform-origin: 0 0; transform: scaleX(0);transition: transform .3s ease 0s;}
#hasa #navs ul li a:hover span:after {transform: scaleX(1); }
        
        #hasa #logo { position:absolute; bottom: 30px; left:30px;transition: all .5s ease 0s; line-height: 0; width: 19.09722222222222vw;}
#hasa #logo img { width: 100%; height: auto;}
        .intro #logo { transform: translateX(-5%); opacity: 0;}
        #hasa #slide .slide #logo img { position: static; transform: translate3d(0,0,0);}
        .logos #logo { opacity: 0;} 
        
        #hasa #navs .logo { opacity: 0;transition: all .5s ease 0s; position: relative; height: 100%; cursor: pointer;}
        .logos #hasa #navs .logo { opacity: 1;} 
        #hasa #navs .logo img {width: auto; height: 25px; position: absolute; top:50%; left: 25px; transform: translateY(-50%);}

.subLogo {top:1.180555555555556vw; right:1.180555555555556vw;position: absolute; width: 10.41666666666667vw;}
#hasa #main figure .subLogo img,#hasa #slide .slide .subLogo img { width: 100%; height: auto;}
        
@media screen and (min-width: 769px) {
    #hasa #main figure { height: calc( 100% + 70px );}
        .fix #hasa #main figure { position: fixed;height: calc( 100% - 56px );transition: none;}
        .view #hasa #main figure { /*height: calc( 100% - 70px - 56px );*/ opacity: 0; transition: opacity .5s ease 1s; }
    .view #hasa #copy { opacity: 0;}
.fix #hasa #copy { position: fixed; top: calc( (100% - 70px - 56px ) / 2 ) ;}
 .fix #hasa #slidewrap {  position: fixed;height: calc( 100% - 70px - 56px );/*transition: none;*/}
    img.lineup3 { transform: translateY(30px);}
    
    #hasa #slide .slide:nth-child(5){ height: calc( 100% + 70px );}
    
}
#hasa p.wide { width: 938px; margin: 1em auto 0 auto;font-size: 12px; text-align: left;}


#hasa .content { background-color: #FFF; position: relative;}

#hasa section.box {
    padding: 130px 0 130px 0; text-align: center;
}
#hasa section.box h2 { font-size: 30px; line-height: 1; margin-bottom: 70px;}
#hasa section.box#concept h2 { font-size: 40px; line-height: 1.55; margin-bottom: 2em; font-weight: normal; letter-spacing: .1em;}
#hasa section.box#concept p { font-size: 22px; line-height: 2.25; margin-bottom: 1.5em; letter-spacing: .15em;}
#hasa .grey { background-color: #eeeeee; }

#hasa section.box h2.title { display: inline-block;font-family: 'Roboto', sans-serif; letter-spacing: .1em;}
#hasa section.box h2.title span:after { content: ""; display: inline-block; background-color: #000; height: 3px; width: 100%; margin-top: 14px; }

#hasa .clm2 {
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    justify-content: center;
    align-items: flex-end;
}
#hasa .clm2 li { margin: 0 30px; position: relative;}
#hasa .clm2 li:nth-child(2){transform: translateY(2%);}
#hasa .en { width: 48px; height: 48px; background-image: url("../img/en.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; position: absolute;
animation: en 4s linear 0s both infinite;
}
#hasa .en.en1 { top:33.02325581395349%; left: 11.96013289036545%;}
#hasa .en.en2 { bottom: 14.41860465116279%; left: 34.21926910299003%;}
#hasa .en.en3 { top:20.31802120141343%; left: 16.25%;}
#hasa .en.en4 { top:44.52296819787986%; left: 16.25%;}
#hasa .en.en5 { top:70.67137809187279%; left: 16.25%;}
#hasa .en.en6 { top:60%; left: 41.52823920265781%;}

#hasa .en:hover { animation: none;}

@keyframes en { to {  transform:rotate(360deg);}}

#hasa .clm3 {
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    justify-content: center;
}
#hasa .clm3 li { width: 246px; margin: 0 50px;}
#hasa .clm3 li h3+p { font-size: 14px; line-height: 2;}
#hasa .clm3 li h3 { line-height: 1; margin-bottom: 2em;}
#hasa .clm3 li p { margin-bottom: 1.5em;}
#hasa .clm3 li p.price { font-weight: bold; font-size: 21px; line-height: 1.4;}
#hasa .clm3 li p span { font-weight: normal; font-size: 12px;}
#hasa .clm3 li p img { margin-top: 1em;}
#hasa .clm3 li figure { border-top: 1px solid #000; padding-top: 20px; margin-top: 30px; box-sizing: border-box; height: 380px;border-bottom: 1px solid #000; margin-bottom: 10px;}
#hasa .clm3 li p:last-of-type { margin-bottom: 0;}
#hasa .clm3 li figure~p { text-align: left; margin-bottom: 1em; line-height: 1.5;}

#hasa .clm3 li .chart img { width: 100%; height: auto; margin: 0;}
#hasa .clm3 li .chart { padding-top: 60px;}
.charts + p { margin: 50px auto; font-size: 10px;
width: 938px; text-align: left; line-height: 1.4;}

#overlay { width: 100%; height: 100%; position: fixed; top:0; left: 0; background-color: #FFF;; cursor: pointer; z-index: -1; opacity: 0;transition: all .5s ease 0s;}
.modalOpen #overlay,.modalsOpen #overlay { opacity: 1; z-index: 1;}
.modalOpen #hasa #navs .logo,.modalsOpen #hasa #navs .logo { opacity: 1;}

#modal { width: 80%; background-color: #000; position: fixed; top:50%; left: 50%; transform: translate(-50%,-40%); padding: 40px 0; color: #FFF; opacity: 0; z-index: -1;transition: all .5s ease 0s;
font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif !important;}
.modalOpen #modal { opacity: 1; transform: translate(-50%,-50%); z-index: 99; }

#slides .slides { margin: 0 7.786885245901639vw;}
.slick-next { right:0; background-image: url("../img/next.svg"); background-repeat: no-repeat; background-position: center; background-size: 1.721311475409836vw auto;}
.slick-prev {
    left: 0px; background-image: url("../img/prev.svg"); background-repeat: no-repeat; background-position: center; background-size: 1.721311475409836vw auto;
}
.slick-prev, .slick-next { z-index: 9;
    
    width: 7.786885245901639vw;
    height: 7.786885245901639vw;
    padding: 0;
}
.slick-next:before,.slick-prev:before { content: "";}
.slick-prev:hover,
.slick-prev:focus
{
   background-image: url("../img/prev.svg"); background-repeat: no-repeat; background-position: center; background-size: 1.721311475409836vw auto;
}

.slick-next:hover,
.slick-next:focus
{
    background-image: url("../img/next.svg"); background-repeat: no-repeat; background-position: center; background-size: 1.721311475409836vw auto;
}
#close { width: 6.557377049180328vw; height: 6.557377049180328vw; cursor: pointer; position: absolute; top:0; right:0; background-image: url("../img/close.svg"); background-repeat: no-repeat; background-position: center; background-size: 3.278688524590164vw;}

.modalOpen body,.modalsOpen body { position: fixed; width: 100%; left: 0;}
#hasa .slidesInner {
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    justify-content: space-between;
}
#hasa .slidesInner figure { width: 53%;}
#hasa .slidesInner figure img { width: 100%; height: auto;}
#hasa .slidesInner .left { width: 42%;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;align-items: center;
}
#hasa .slidesInner .left h4 { font-size: 2.204918032786885vw; margin-bottom: .7em; line-height: 1.7;}
#hasa .slidesInner .left p { font-size: 1.111475409836066vw; line-height: 1.9;text-align: justify;}

#hasa p.cs { font-size: 28px;font-family: 'Roboto', sans-serif;}

.fadePoint { opacity: 0; transform: translateY(60px); transition: all .7s ease .3s; }
.fadePoint.fade { opacity: 1;  transform: translateY(0%);}
.sp { display: none;}
.pc { display: block;}

#concept h2 img { width: 800px; height: auto; margin: 0 auto;}
#concept p img { width: 1000px; height: auto; margin: 0 auto;}
p.lcopy img { height: 80px; width: auto; margin: 0 auto;}
#hasa .clm3 li p.lcopy { margin-bottom: 2em;}
#hasa p.wide.charts {
    margin-top: 40px; line-height: 1.5; margin-bottom: 50px;
}
#hasa p.wide.ab { height: 14px; line-height: 1; width: auto; }

@media screen and (min-width: 769px) {
#hasa p.wide.ab.abs { width: 938px;}
}

@media screen and (max-width: 768px) {
    .sp { display: block;}
    .pc { display: none;}
    #concept h2 img { width: 85%;}
#concept p img { width: 85%; }
    
    #hasa #navs ul { display: none;}
    #hasa #navs .logo {
    opacity: 1;
    height: 100%; margin: 0 auto;
}
    #hasa #navs { z-index: 999; position: fixed; top:46px; left: 0; height:80px; display: none;}
    #main {}
    #hasa section.box#concept h2 {
    font-size: 28px;
    line-height: 1.55;
    margin-bottom: 2em;
}
    #hasa section.box#concept p {
    font-size: 16px;
    line-height: 2.25;
    margin-bottom: 1.5em;
}
    #hasa section.box {
    padding: 110px 0 110px 0;
}
    #hasa .clm2 li {
    margin: 0 10px;
}
    #hasa .clm2 li:nth-child(1) img { height: 480px; width: auto;}
    #hasa .clm2 li:nth-child(2) img { height: 414px; width: auto;}
    
    #hasa .clm3 {
    flex-direction: column;
}
    #hasa .clm3 li {
    width: auto;
    margin: 0 50px 100px 50px;
}
    #hasa .clm3 li h3+p {
    font-size: 16px;
}
    #hasa .clm3 li p.price { font-size: 28px;}
    #hasa .clm3 li p span { font-size: 14px;}
    #hasa .clm3 li:last-of-type { margin-bottom: 0;}
    
    #modal { width: 100%; height: calc( 100% - 64px); top:64px; left: 0; transform: translate(0,0); background-color: rgba(0,0,0,.8); padding-top: 19.35483870967742vw; /*overflow: auto;*/ box-sizing: border-box; /*padding-bottom: 40px;*/ padding-bottom: 0;}
    .modalOpen #modal { transform: translate(0,0);  z-index: 9999;}
    
    .modalInner { height: 100%; overflow: auto; padding-bottom: 20px; box-sizing: border-box;}
    
    #hasa .slidesInner { flex-direction: column; opacity: 0; transform: translateY(1em);transition: all .5s ease .2s;}
    .modalOpen #hasa .slidesInner { opacity: 1; transform: translateY(0);}
    
    #hasa .slidesInner figure,#hasa .slidesInner .left {
    width: auto;
}
    #hasa .slidesInner figure { margin-bottom: 1em;}
    
    #hasa .slidesInner .left h4 {
    font-size: 5.376344086021505vw;
    margin-bottom: .5em;
}
    #hasa .slidesInner .left p {
    font-size: 3.010752688172043vw;
}
    
    .slick-prev, .slick-next {
    width: 14.62365591397849vw;
    height: 14.62365591397849vw; top: 40vw;
}
    #hasa #slides .slides {
    margin: 0 14.62365591397849vw;
}
    .slick-next { background-size: 4.516129032258065vw auto;}
.slick-prev {
    background-size: 4.516129032258065vw auto;
}
.slick-prev:hover,
.slick-prev:focus
{
   background-size: 4.516129032258065vw auto;
}

.slick-next:hover,
.slick-next:focus
{
   background-size: 4.516129032258065vw auto;
}
#hasa #close { width: 18.9247311827957vw; height: 18.9247311827957vw; background-size: 6.021505376344086vw;}
    #hasa #navs2 { background-color: #000; height: 64px; position: sticky; top:0; z-index: 999; width: 100%; margin-top: 46px; text-align: center;}
    #hasa #navs2 .logo { display: inline-block; height: 100%; position: relative; cursor: pointer;}
    #hasa #navs2 .logo img { height: 20px; width: auto; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);}
    .modalOpen #hasa #navs2,.menuOpen #hasa #navs2,.modalsOpen #hasa #navs2 { position: fixed; top:0; left: 0; margin-top: 0;}
    #hasa #logo { display: none;}
    #hasa #slide .slide:nth-child(4) img {/*transform: translateX(-60%);*/}
    
    #hasa #menu { width: 64px; height: 64px; cursor: pointer;  position: absolute; top:0; right: 0; overflow: hidden; }
    #hasa #menu p { width: 100%; height: 100%; background-image: url("../img/plus.svg"); background-repeat: no-repeat; background-position: center;background-size: 32px;transition: all .5s ease 0s;}
    .menuOpen #hasa #menu p { transform: rotate(45deg);}
    
    #hasa #menuWrap { background-color: #000; height: calc( 100% - 64px ); position: fixed; top:64px; left: 0; width: 100%; z-index: -1; opacity: 0;transition: all .5s ease 0s;
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
        justify-content: center;
        align-items: center; text-align: center;
    }
    .menuOpen #hasa #menuWrap { z-index: 9; opacity: 1; }
    #hasa #menuWrap ul { opacity: 0; transform: translateY(1em);transition: all .5s ease .2s;}
    .menuOpen #hasa #menuWrap ul { opacity: 1; transform: translateY(0);}
    .menuOpen body { position: fixed; width: 100%; left: 0;}
    #hasa #menuWrap ul li a { color: #FFF; text-decoration: none;font-family: 'Roboto', sans-serif; letter-spacing: .1em;}
    #hasa #menuWrap ul li { font-size: 30px; margin-bottom: 1.5em;}
    #hasa #menuWrap ul li:last-of-type { margin-bottom: 0;}
    #hasa #copy img { height: 5vw;
    }
    
    #hasa #copy span { display: inline-block; height: 3.368055555555556vw; 
   display: inline-flex;
    align-items: center;
    }
    #hasa #copy span img { }
    
    #hasa #copy span:nth-child(2){ margin-left: 2vw; }
#hasa #copy span:nth-child(3){ margin-left: 2vw; }
#hasa #copy span:nth-child(4){ margin-left: 2vw; }
#hasa #copy span:nth-child(5){  margin-left: 2vw; }
#hasa #copy span:nth-child(6){ margin-left: 2vw; }
#hasa #copy span:nth-child(7){ margin-left: 2vw; }
#hasa #copy span:nth-child(8){ margin-left: 2vw; }
#hasa #copy span:nth-child(9){margin-left: 2vw; }
#hasa #copy span:nth-child(10){ margin-left: 2vw; }
#hasa #copy span:nth-child(11){ margin-left: 2vw; }
#hasa #copy span:nth-child(12){ margin-left: 2vw; }
#hasa #copy span:nth-child(13){ margin-left: 2vw; }
#hasa #copy span:nth-child(14){ margin-left: 2vw; }
#hasa #copy span:nth-child(15){ margin-left: 2vw; }
    
    #hasa #copy span:nth-child(1) img { width: auto; height: calc( 3.340277777777778vw * 1.2 );}
#hasa #copy span:nth-child(2) img { width: auto; height: calc( 3.215277777777778vw * 1.2 );}
#hasa #copy span:nth-child(3) img { width: auto; height: calc( 3.333333333333333vw * 1.2 );}
#hasa #copy span:nth-child(4) img { width: auto; height: calc( 3.291666666666667vw * 1.2 );}
#hasa #copy span:nth-child(5) img { width: auto; height: calc( 3.3125vw * 1.2 );}
#hasa #copy span:nth-child(6) img { width: auto; height: calc( 3.111111111111111vw * 1.2 );}
#hasa #copy span:nth-child(7) img { width: auto; height: calc( 3.423611111111111vw * 1.2 );}
#hasa #copy span:nth-child(8) img { width: auto; height: calc( 2.923611111111111vw * 1.2 );}
#hasa #copy span:nth-child(9) img { width: auto; height: calc( 3.375vw * 1.2 );}
#hasa #copy span:nth-child(10) img { width: auto; height: calc( 3.368055555555556vw * 1.2 );}
#hasa #copy span:nth-child(11) img { width: auto; height: calc( 3.196527777777778vw * 1.2 );}
#hasa #copy span:nth-child(12) img { width: auto; height: calc( 3.159722222222222vw * 1.2 );}
#hasa #copy span:nth-child(13) img { width: auto; height: calc( 2.243055555555556vw * 1.2 );}
#hasa #copy span:nth-child(14) img { width: auto; height: calc( 3.125vw * 1.2 );}
#hasa #copy span:nth-child(15) img { width: auto; height: calc( 3.138888888888889vw * 1.2 );}
    
    .view #hasa #main figure { opacity: 0;}
    #hasa .clm3 li figure { height: auto; padding-bottom: 20px; padding-top: 20px;}
    #overlay { display: none;}
    .modalOpen #main,.menuOpen #main { margin-top: 126px;}
    #hasa .en { animation: none;}
    #hasa p.wide,#hasa li.wide { width: auto; margin: 3em 50px 0 50px;font-size: 14px;line-height: 1.5;}
    
    .subLogo {top:2.68595041322314vw; right:2.68595041322314vw; width: 26.8595041322314vw;}
}

@media (orientation: landscape) and (max-width: 768px) {
    #hasa #menuWrap {
        align-items:flex-start; overflow:auto;
    }
    #hasa #menuWrap ul { margin-top: 1em;}
}

.jp { font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif !important; font-size: 92%;}
.mb-nav { z-index: 9999;}

#HASAS p.read { font-size: 18px; line-height: 1.8;}

#slides2Wrap { width: 100%; overflow: hidden; /*padding-left: 40px;*/ padding-top: 76px; background-color: #FFF;/*position: sticky; left: 0;*/ width: 100%; top:80px;box-sizing: border-box; padding-left: 189px; background-image: url("../img/scroll.svg"); background-repeat: no-repeat; background-position: left 73px top 190px; background-size: 43px auto;}
#slides2 { width: calc( 2730px + ( (50vw - 189px) -  175px )); position: relative;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    padding-bottom: 130px;
}

#HASASS {position: sticky; left: 0; width: 100%; top:-30%; display: block; background-color: #FFF;}
@media (orientation: portrait) {
    #HASASS {position: sticky; left: 0; width: 100%; top:80px;}
    #slides2Wrap { position: static;}
}

#slides2 .slide { width: 350px; margin-right: 40px; text-align: left; cursor: pointer;}
#slides2 .slide img { width: 100%; height: auto; box-shadow: 1px 1px 6px rgba(0,0,0,.7);}
#slides2 .slide figure { margin-bottom: 30px; position: relative;}
#slides2 .slide h3 { font-size: 16px; font-weight: bold; border-bottom: 3px solid #000; line-height: 2;}
#slides2 .slide figure:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top:0; background-color: rgba(0,0,0,.3); transform: scaleX(0);transition: all .5s ease 0s; transform-origin: 0 50%;}
#slides2 .slide:hover figure:after {transform: scaleX(1);}

@media screen and (min-width: 769px) {
.slideInner {  padding-left: 40px; /*padding-left: calc( (50vw - 189px) -  175px );*/ overflow: hidden; width: 100%; box-sizing: border-box; }
    #slides2 .slide:last-child { margin-right: 0;}
}

/*.fixy #slides2 { margin-bottom: 2730px;}*/
/*.fixy #HASAS {margin-bottom: calc( 390px * 4 );}*/

#body { display: none;}
.fixy #body { display: block; }
.fixy #app { /*height: 1000vh;*/ background-color: #FFF; position: relative;}
.fixy .heights { height: 2000px;}
#hasa section.box#HASAS { padding-bottom: 0; background-color: #FFF;}

.modals { width: 80%; position: fixed; top:50%; left: 50%; transform: translate(-50%,-40%); opacity: 0; z-index: -1; background-color: #000;font-family: 游ゴシック, YuGothic, ヒラギノ角ゴ, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif !important;transition: all .5s ease 0s;}
.modals ul { color: #FFF;
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.modals.open { transform: translate(-50%,-50%); opacity: 1; z-index: 100;}
.modals ul li:nth-child(1){width: 41.04477611940299%; line-height: 0;}
.modals ul li:nth-child(1) img { width: 100%; height: auto;}
.modals ul li:nth-child(2) { width: 58.95522388059701%;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width: 769px) {
    .modals { background-color: #fff;}
    .modals ul li:nth-child(2) {background-color: #000; }
}
.modals ul li:nth-child(2) h4 { font-size: 1.9vw; font-weight: bold; line-height: 2; border-bottom: 3px solid #fff; margin-bottom: 1em;}
.modals ul li:nth-child(2) p { font-size: 1.111111111111111vw; line-height: 1.8; text-align: justify;}
.modals ul li .inner { width: 82%;}
.closes { width: 6.111111111111111vw; height: 6.111111111111111vw;cursor: pointer; background-image: url("../img/close.svg"); background-size: 1.944444444444444vw auto; background-position: center; background-repeat: no-repeat; position: absolute; top:0; right: 0;}

/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	overflow: hidden;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
   	border: 1px solid #000;/* ボーダーの色と太さ */
    /*padding: 10px 30px;*/
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s; background-color: #000;
    
    width: 190px; height: 33px; line-height: 33px; font-size: 12px; font-weight: bold; 
}

/*ボタン内spanの形状*/
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#fff;
}

@media screen and (min-width: 769px) {
.btn:hover span{
	color:#000;
}
}

/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#fff;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}
@media screen and (min-width: 769px) {
/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}
}

#ktsCont { margin-top: 50px;}
#HASAS p.read img.pc { width: 1000px; height: auto;}
#HASAS p.read img.sp { width: 90%; height: auto;}
#HASAS p.read img { margin: 0 auto;}

@media screen and (max-width: 768px) {
    #slides2Wrap {
    padding: 70px 40px 0px 40px;
    position:static;
    width: auto;
    box-sizing: border-box; box-sizing: border-box; background-image:none;
}
    #HASASS {position:static;}
    
    #slides2 {
    width: auto;
    position: static; flex-direction: column;
    padding-bottom: 110px;
}
    #slides2 .slide {
    width: auto;
    margin-right: 0px; margin-bottom: 60px;
}
    #slides2 .slide:last-child{ margin-bottom: 0;}
    
    .fixy .heights { height: 0!important;} 
    
    #HASAS p.read {
    font-size: 15px;
    line-height: 1.8;
        margin: 0 10px;
}
    #hasa .clm3.charts li {
    width: auto;
    margin: 0 50px 50px 50px;
}
  #hasa p.wide.ab {margin: 0; height: auto; }  
    #hasa p.wide.charts {
   margin-left:30px; margin-right: 30px;
}
    .modals { width: 100%; height: calc( 100% - 64px); top:64px; left: 0; transform: translate(0,0); background-color: rgba(0,0,0,.8); padding-top: 19.35483870967742vw; /*overflow: auto;*/ box-sizing: border-box; /*padding-bottom: 40px;*/ padding-bottom: 0;}
    .modals.open { transform: translate(0,0);  z-index: 9999;}
    .modals ul {flex-direction: column;}
    .modals ul li:nth-child(1) {
    width: 71.72131147540984vw; margin: 0 auto 10.24590163934426vw auto;
}
    .modals ul li:nth-child(2) {
    width: 71.72131147540984vw; margin: 0 auto 10.24590163934426vw auto;
    display: block;
}
    .modals ul li .inner { width: auto;}
    .modals ul li:nth-child(2) h4 { line-height: 1.75; padding-bottom: 3.651006711409396vw;
    font-size: 5.942622950819672vw;
    margin-bottom: 1em;
}
   .modals ul li:nth-child(2) p {
    font-size: 3.278688524590164vw;
} 
    .modalsInner { height: 100%; overflow: auto;}
    
    #hasa .closes {
    width: 18.9247311827957vw;
    height: 18.9247311827957vw;
    background-size: 6.021505376344086vw;
}
    #ktsCont { padding: 0 15px;}
    #hasa .clm3 li .chart { padding-top: 15px;}
    #slides2 .slide figure { margin-bottom: 15px;}
    #slides2 .slide h3 { line-height: 1.5;}
    #hasa p.wide.charts+p { font-size: 10px;text-align: justify;}
    
    #hasa .en.en6 {top: 59%;
    left: 39%;}
    #hasa .en.en3,#hasa .en.en4,#hasa .en.en5 {left: 13%;}
}