@charset "utf-8";
#mv picture img{ width: 94.5%; margin-bottom: 20px; }
.listnav{  letter-spacing: -0.5px; margin-bottom: 20px;/*max-width: 1610px;*/ }
.listnav br{ display: none; }
.quality .line{ margin-bottom: 65px; }
p,.boxinner a { color: #0f183e;}

.title_style01{ margin-bottom: 27px; line-height: 1.5em;}



#movie{ margin-left: auto; margin-right: auto;}
#choose.line2{ padding-top: 70px; }

/*modal area*/
.boxinner {
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.boxinner li a figcaption {
  border-bottom: 1px solid #1e2b5a;
  font-size: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;}
  
.boxinner li a figcaption span {
  position: relative;
  display: block;
  width: 100%;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.boxinner li a figcaption i{ font-weight: 600; padding-left: 3px; }
.boxinner li a figcaption span::before {
  z-index: 2;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  right: 9px;
  bottom: 12px;
  transition: .4s ease-out; }
.boxinner li a figcaption span::before, .boxinner li  a figcaption span::after {
  position: absolute;
  content: ""; }

.boxinner li a figcaption span::after {
  right: 0;
  border-radius: 100%;
  background-color: #1e2b5a;}

  /*
.inview.incontents {  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);}

.inview {  opacity: 0;
  -webkit-transform: translateY(50px);
  -ms-transform: translateY(50px);
  transform: translateY(50px);
  transition: opacity 0.8s ease-out 0s, transform 0.8s ease-out 0s;}*/

.line3{  margin-top: 70px;}


.boxcontent, .boxcontent2 {  display: flex;
  align-items: center;
/*  justify-content: space-between;*/}


.link_style01 {  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: block; }
.link_style01 a{padding-left:1em;padding-right:1em; line-height: 1.4em;}

@media ( prefers-reduced-motion: reduce) {
   .modal_switch,.modal_link,.modal_switch,.nexticon{
   /*  transition-duration: 1ms !important;*/
   transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    /*scroll-behavior: auto !important;*/
  }
}

/*pc---------------------------------------------------------------*/

@media screen and (min-width: 1101px) {
  .tab{ display: none; }
.listnav{ width: 94.5%; }

.boxinner li{ width: 31.6%; }
.boxinner li:not(:nth-child(3n)){ margin-right: 2.5%; }
.boxinner li a figcaption {  padding: 18px 10px 14px;  line-height: 1.8em;  }
.boxinner li a:hover figcaption { border-color: #0080cf;}
.boxinner li a figcaption span::after {  width: 23px;  height: 23px;  bottom: 4px;}
.boxcontent { margin-bottom: 52px;}
.boxcontent .txtbox { width: 54%; max-width: 690px;}
.boxcontent2 .txtbox { width: 67%; max-width: 748px; }

.boxcontent2 figure {margin: 0 auto;}
.link_style01 { margin-top: 80px; }

#modalbox1 .boxinner li:nth-child(4) figcaption,
#modalbox1 .boxinner li:nth-child(5) figcaption,
#modalbox1 .boxinner li:nth-child(6) figcaption,
#drink .boxinner li:first-child figcaption,
#drink .boxinner li:nth-child(2) figcaption,
#voice .boxinner li:nth-child(4) figcaption { height: 65px;}

#select,
#voice{ margin-top: -100px; padding-top: 100px; }
}

@media screen and (max-width: 1390px) and (min-width: 1101px) {
.listnav br{ display: none/*inline-block*/; }
.listnav{ margin-left: 2%; width: 92.5%; box-sizing: border-box; }
.listnav .link_style02 a {  font-size: 1.3vw; letter-spacing: -1.4px;}
#modalbox1 .boxinner li:first-child a figcaption span{ letter-spacing:-1.4px;}
#drink .boxinner li:first-child a figcaption span{ letter-spacing:0;}
 .quality .listnav li:not(:last-child) {  margin-right: 1.5%;  }
}


@media screen and (max-width: 1100px) {
  .listnav{ flex-wrap: wrap; justify-content: flex-start;width: 88%; margin-left: auto; margin-right: auto;}

  .listnav li:not(:last-child){ margin-bottom: 4%; }
  .listnav li a{ width: 100%; }

 .boxcontent,.boxcontent2{ flex-wrap: wrap; }
.boxinner li{ width: 48%; }
.boxinner li:nth-child(odd){ margin-right: 4%; }
.boxinner li.js-open-lightbox figcaption span::after,
.boxinner li figcaption span::after {  width: 17px;  height: 17px;  bottom: 0;}
.boxinner li.js-open-lightbox a figcaption span::before,
.boxinner li a figcaption span::before {
  width: 5px;  height: 5px;  right: 7px;  bottom: 6px;}
.boxinner li a figcaption span{ padding-right: 9%; }

.boxinner li a figcaption span{line-height: 1.5em;}

   #sloganwarp h2,#sloganwarp .txtcenter,
   #choose h3, #choose .txtcenter,#detection .title_style01{ text-align: left; } 

   .boxcontent .txtbox, .boxcontent2 .txtbox{ width: 100%; }
  
   .boxcontent figure,.boxcontent2 figure{ margin-left: auto; margin-right: auto; }
   .boxcontent2 figure{ order: 2;}

  #voice{ margin-top: -50px; padding-top: 50px; }
}

/*pc tab
 ---------------------------------------------------------------*/

@media screen and (max-width: 1100px) and (min-width: 641px)  {
    .listnav li{ width: 45%; }
    .listnav li:nth-child(odd){ margin-right: 6%; }
    
    .moviebox{ margin-bottom: 5%; }
    #movie{ margin-bottom: 9%;  }
    .boxcontent p,.boxcontent2 p{ margin-bottom: 3%; }
.boxinner li figcaption { height: 75px;}
.boxinner li.js-open-lightbox figcaption{ padding: 5% 0; }

    #detectiontxt .link_style01{ margin-top: 8%; }
    .boxcontent figure,.boxcontent2 figure{ margin-bottom: 8%;}
}



@media screen and (min-width: 641px)  {
#choose p.txtcenter{ margin-bottom: 50px;}
#movie{margin-bottom: 85px; }
  .boxinner li {  margin-bottom: 60px;}
  p.txtcenter{line-height: 2.2em; font-size: 1.7rem; letter-spacing: 0.2em;}
  #detectiontxt p,.boxcontent p { font-size: 1.7rem; line-height: 2.2em; letter-spacing: 0.1em; }
  .boxcontent2 p{ font-size: 1.7rem; line-height: 2.2em; letter-spacing:3px; }
  #detection.line2{  margin-top: 70px;}
.line3 .title_style01{ margin-bottom: 65px; }
.boxcontent figure,
.boxcontent2 figure {  max-width: 350px; width: 30%;}


  #detection .title_style01 {  margin-bottom: 48px;}   
#detectiontxt{ margin:90px 0 120px}
.txtund{ margin-bottom: 39px; }
}

/*sp
 ---------------------------------------------------------------*/

@media screen and (max-width: 640px) {
  
#choose p.txtcenter{ margin-bottom: 8%;}
.quality #movie{margin-bottom: 10%; }

.boxcontent figure { width: 100%;  }
    .listnav li{ width: 43%; }
    .listnav li:nth-child(odd){ margin-right: 10%; }
    .quality .listnav li:nth-child(3) a{ padding-top: 5vw; padding-bottom: 6.5vw;}
    .listnav .sp_only{ display: inline-block!important; }
    .listnav .link_style02 a {letter-spacing: 0.5px;
    padding-bottom: 8%;
    font-size: 3vw;
    padding-right: 16px;}

.boxinner li a figcaption span{ font-size: 3vw; padding-right: 13%; }
.boxinner li:not(:last-child) {  margin-bottom: 8%}
.boxinner li a figcaption{ height: 15vw;}
.boxinner li a figcaption span::before{ bottom: 5px; }
.title_style01 { font-size: 5.55vw; letter-spacing: 0.1em; }

.boxcontent figure{  max-width: 673px; width: 100%; margin: 0 auto;}
.boxcontent2 figure {  max-width: 671px; width: 98%; margin: 0 auto;}

#detection .title_style01 {letter-spacing: 0.1px;  margin-bottom: 8%;}
#detectiontxt{ margin:14% 0 12%; letter-spacing: 0.8px;}
#detectiontxt .link_style01{ margin-top: 10%; }
.txtund{ margin-bottom: 4%; }

p.txtcenter, .boxcontent p, .boxcontent2 p,
#detectiontxt p{ line-height: 1.8em;  font-size: 3.6vw; }
.link_style01 a span{font-size: 3.6vw; letter-spacing: -0.1px; line-height: 1.5em;}

.line3{padding-top: 14%;  margin-top:8%; }
.line3 .title_style01{ text-align: left; margin-left:5%; margin-right:5%;margin-bottom: 5%; letter-spacing: 0.05em;}
.boxcontent2 .brtxt{ display: none; }
.boxcontent p,.boxcontent2 p{ margin-bottom: 6%;letter-spacing: 0.8px; }
.boxcontent figure,.boxcontent2 figure{ margin-bottom: 10%;}
.link_style01 a{ padding: 0.8em; }
}