@charset "UTF-8";
/*--------------------------------------------------------------
style.css
----------------------------------------------------------------
/* common
--------------------------------------------- */
@media all and (min-width: 751px) {
  .sp {
    display: none !important;
  }
}
@media all and (max-width: 750px) {
  .pc {
    display: none !important;
  }
}
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

/* -----------------------------------------------------------
font-size
------------------------------------------------------------*/
/* rem相対、px固定*/
@media (min-width: 751px) {
  :root {
    font-size: calc(0.5625rem + ((1vw - 7.68px) * 0.1736));
    min-height: 0vw;
  }
  p,div,span,li,i,td,th,em,dt,dd {
    font-size:1.6rem;
  }
}
@media (min-width: 1344px) {
  :root {
    font-size: 10px;
  }
}
@media (max-width: 1100px) {
  @media (min-width: 751px) {
    :root {
      font-size: calc(0.52rem + ((1vw - 7.68px) * 0.1736));
      min-height: 0vw;
    }

  }
}
@media screen and (max-width:750px) {
  html {
  font-size: 62.5%;
  }
  body { font-size: 1.3rem; }
  p,div,span,li,i,td,th,em,dt,dd {
    font-size:1.3rem;
  }
}

/* -----------------------------------------------------------
	common
------------------------------------------------------------*/
html,body {
height:100%;
margin:0;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font-weight: 400;
line-height:1.8;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}


/* ゴシック系 */
body, table, th, td, p, li, div, span,dt,dd,
h1,h2,h3,h4,h5,h1 span,h2 span {
font-family:'Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p,li,dt,dd,th,td,div,span,em {
color: #262626;
word-wrap: break-word;
}
p,div,span,em {
line-height: 1.8
}
li,dt,dd,th,td {
line-height: 1.4;
}
p {
  margin-top:0;
}
main p{
  margin-bottom:1.5em;
}
main a {
  text-decoration: underline;
}
li {
line-height: 1.4;
list-style: none;
}

ul,ol,figure {
padding-left:0;
margin:0;
}
table {
width: 100%;
border-collapse: collapse;
}
a {
  word-break: break-word;
  text-decoration: none;
}
header a,
footer a {
  text-decoration: none;
}
main a {
color: #262626;
}
img {
line-height: 0;
max-width: 100%;
vertical-align: bottom;
}

article:after,main:after,
clearfix:after {
content: "";
display: block;
clear: both;
}

@media screen and ( min-width: 751px ){
  a {
  -webkit-transition: background  0.3s ease, color 0.3s ease;
  -moz-transition: background  0.3s ease, color 0.3s ease;
  -o-transition: background  0.3s ease, color 0.3s ease;
  transition: background  0.3s ease, color 0.3s ease;
}
	a:hover {
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
	opacity: 0.7;
	cursor:pointer;
  transition:opacity 0.3s;
  text-decoration: none;
	}

	a:hover img {
	-ms-filter: "alpha(opacity=70)";
	filter: alpha(opacity=70);
	}
	#page-top a:hover {
  text-decoration: none;
  opacity: 0.7;
	}

}


/* -----------------------------------------------------------
common default
------------------------------------------------------------*/
.ac { margin:auto; }
.tc { text-align:center!important; }
.tl { text-align:left!important; }
.fl { float:left; }
.fr { float:right; }
.bold { font-weight:bold; }


.inline { display:inline-block; }
.block { display:block; }
.super { vertical-align: super; font-size:10px;}

dl,dt,dd,li {
  margin:0;
  padding:0;
}

/* -----------------------------------------------------------
reset
------------------------------------------------------------*/
a:focus, a:active {
outline: none;
outline-offset: 0;
text-decoration: none;
}
.btn:active, .btn.active {
box-shadow:none;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline:none;
}
.btn-link:hover {
  text-decoration:none;
}





/* header
--------------------------------------------- */
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 20;
  background: #000;
}
.header .nav-toggle {
    position: fixed;
    top:0;
    right:0;
  width: 19.2vw;
  height: 16.8vw;
  background: url(../images/nav-toggle.svg) no-repeat center top;
  background-size: cover;
  cursor: pointer;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.header .nav-toggle.active {
  background-position: center bottom;
}
.tagline {
    color: #fff;
    font-size: 10px;
}
.header * {
    color: #fff;
    text-decoration: none;
}

@media all and (min-width: 751px) {
  .header,
  .header-menu
  .nav-menu,
  .nav-btn {
    height: 80px;
    align-items: center;
    align-content: center;
    line-height: 1;
  }
  .header-top {
    padding:0 2%;
  }
  .tagline {
      white-space: nowrap;
  }
  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    line-height: 1;
    width:100%;
  }
  .tagline {
    width:12%;
    max-width: 150px;
    margin-top:3px;
    letter-spacing: 0.03em;
  }
  .tagline .logo {
    display: block;
  }
  .header-menu {
    width:calc(100% - 150px);
    display: flex;
    justify-content: flex-end;
  }
  .nav-btn,
  .nav-menu {
    display: flex;
    justify-content: flex-end;
  }
  .nav-btn {
    gap:0 9px;
    width:55%;
    max-width:563px;
    padding-left:3%;
  }
  .nav-menu {
    justify-content: flex-end;
    width:45%;
  }
  .nav-menu li {
     padding: 0 3%;
  }
}

@media (min-width: 751px) and (max-width: 1400px) {
    .nav-menu li {
        font-size:90%;
    }
}
@media (min-width: 751px) and (max-width: 1100px) {
  .tagline {
    font-size: 1vw;
  }
  .nav-menu li {
        padding: 0 2%;
        font-size: 1.3vw;
  }
}
@media all and (max-width: 750px) {
  .header .pagetop {
    display: none !important;
  }
  .header {
    height: 16.8vw;
  }
  .tagline {
    width: 150px;
    margin-top: 6px;
    letter-spacing: 0.03em;
    margin-left: 4vw;
  }
  .tagline .logo img {
      width: 26.13333vw;
  }

}



/* Navigation
--------------------------------------------- */
@media all and (max-width: 750px) {
  .nav {
    display: none;
  }
  .nav-sp {
    display: none;
    position: absolute;
    left: 0;
    top: calc(16.8vw - 1px);
    width: 100%;
    height: calc(100vh - 16.8vw + 1px);
    background-color: #000;
    color: #fff;
    text-align: center;
  }
  .nav-sp-inner {
    overflow-y: scroll;
    height: 100%;
  }
  .nav-sp-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    list-style: none;
    margin: 0;
    padding: 1.5em 0;
  }
  .nav-sp-main a {
    display: block;
    color: #fff;
    font-size: 4.8vw;
    font-weight: bold;
    text-decoration: none;
    padding: 1em 0;
  }
  .nav-sp-misc {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .nav-sp-misc > li {
    width: 33.3%;
  }
  .nav-sp-misc > li + li {
    border-left: 1px solid #fff;
  }
  .nav-sp-misc > li:nth-child(2) span {
    margin-top: .72em;
  }
  .nav-sp-misc a {
    color: #fff;
    font-size: 3.46667vw;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.44;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    padding: 1em 0;
  }
  .nav-sp-misc i {
    width: 12vw;
    height: 12vw;
    margin-bottom: .5em;
  }
  .nav-sp-phone {
    display: inline-grid;
    grid-template-areas: "icon heading" "icon number";
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: left;
    line-height: 1.4;
    padding: 1em 0;
  }
  .nav-sp-phone::before {
    content: '';
    width: 5.2vw;
    height: 10vw;
    background: url(../images/ic-phone.svg) no-repeat center center;
    background-size: contain;
    grid-area: icon;
    margin-right: 1rem;
  }
  .nav-sp-phone-heading {
    grid-area: heading;
    font-size: 3.2vw;
    font-weight: bold;
    color: #979797;
  }
  .nav-sp-phone-number {
    grid-area: number;
    font-size: 6.66667vw;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
  }
  .nav-sp-phone-number:hover {
    color: #fff;
  }
}

@media all and (min-width: 751px) {
  .nav-sp {
    display: none !important;
  }
}

@media all and (min-width: 751px) and (max-width: 1200px) {
  .nav-main a {
    font-size: 1.45161vw;
  }
}


/* footer
--------------------------------------------- */
.footer {
  text-align: center;
  background-color: #fff;
}

.footer-copyright {
  font-size: 14px;
  border-top: 1px solid #ccc;
  padding: 1em;
  display: flex;
  flex-direction: column;
}
.footer-copyright * {
      font-size: 14px;
}

@media all and (min-width: 668px) {
  .footer-company {
    font-size: 26px;
  }
  .footer-company-logo {
    margin: 4rem auto 6rem;
    width: 290px;
  }
  .footer-copyright {
    font-size: 14px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .footer-copyright > span {
    padding: 0 1em;
  }
}

.cta {
display: flex;
flex-direction: column;
align-items: center;
max-width:924px;
margin:5rem auto;
}
.cta-online {
    background-color: #fff;
    padding:3em 0;
}
.cta-button {
  margin-top: 1rem;
  width: 100%;
}
.bt-cta {
  display: flex;
    justify-content: center;
    align-items: center;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
  font-weight: bold;
  color: #000;
  background-color: #332d2b;
  height:92px;
  padding-right: 1em;
}
.bt-cta::before {
  content: '';
  width: 1.4em;
  height: 1.4em;
  margin-right: 0.5em;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.bt-cta.-store::before {
  width: 2em;
  height: 2em;
}
.bt-cta.-download {
  background-color: #000;
  color: #fff;
}
.bt-cta.-download::before {
  background-image: url(../images/ic-dwl.svg);
}
.bt-cta.-contact {
  background-color: #f1ca2d;
}
.bt-cta.-contact::before {
  background-image: url(../images/ic-mail.svg);
}
.bt-cta.-store {
  background-color: #00864c;
color: #fff;
}
.bt-cta.-store::before {
  background-image: url(../images/ic-cart.svg);
}

@media all and (min-width: 751px) {
  .cta {
            flex-direction: row;
            justify-content: center;
  }
  .cta-button {
    margin-top: 0;
    width: 600px;
  }
}

@media all and (min-width: 751px) and (max-width: 1240px) {
  .cta {
    padding: 8.06452vw 4.83871vw 8.06452vw 3.22581vw;
  }
  .cta-button {
    width: 48.3871vw;
  }
}

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

.tab-guide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  max-width:948px;
  margin:0 auto;
}
.tab-guide li {
opacity: 0.6;
background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-radius: 3.5em 0 0 0;
  width: 460px;
  height: 133px;
  font-weight: bold;
  position: relative;
  cursor: pointer;
}
.tab-guide li.show {
    opacity: 1;
}
.tab-contents {
  display: none;
  opacity: 0;
  padding-bottom:5em;
}
.tab-contents.show {
  display: block;
  opacity: 1;
  animation: fadeIn 0.3s ease-in 0s forwards;
}
.tab-contents {
  background: #fff;
  padding:6rem 0;
}
.tab-main {
    max-width: 940px;
    margin:0 auto;
}
.movie-ttl {
    text-align: center;
}

@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: block;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
}
.movie-box {
    max-width: 900px;
    margin: 0 auto;
}
.movie-area {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.movie-area iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.movie-ttl {
    margin:3rem auto 2rem;
}
.gun-type-box dt {
    color: #00864c;
    font-weight: bold;
}
.gun-type-box img {
    vertical-align: middle;
    margin-right: 1.4em;
}
.gun-type-box figure {
    margin-bottom:2em;
}
.ttl-table {
    text-align: center;
    font-weight: bold;
}
.ttl {
    color: #00864c;
    font-weight: 800;
    text-align: center;
    margin:0 auto 5rem;
}
.bg01 {
    background-color: #ebf0eb;
    padding:6rem 0 15rem;
}
.faq-list {
    margin: 0 auto;
}
.faq-list > dt::before {
    content: '';
    width: 7.33333vw;
    height: 10vw;
    background: url(../images/q.svg) no-repeat 0 0;
    background-size: contain;
    margin-bottom: .5em;
}
.faq-list > dd::before {
    content: '';
    width: 6.53333vw;
    height: 7.33333vw;
    background: url(../images/a.svg) no-repeat 0 0;
    background-size: contain;
    margin-bottom: .5em;
}

.gun-type-box dt {
    display: flex;
    align-items: center;
    align-content: center;
    line-height: 1.4;
}

@media all and (min-width: 751px) {
    .anchor {
      display: block;
      margin-top: -70px;
      padding-top: 70px;
    }
     .tab-main.mb {
      margin-bottom:7rem;
     }
    .movie-ttl {
        font-size: 38px;
    }
    .gun-type {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin:5em -3% 0;
    }
    .gun-type-box {
        width:44%;
        margin:3em 3% 4em;
    }
    .gun-type-box dt {
        font-size: 2.4rem;
        margin-left:1rem;
        margin-bottom: 1em;
        height: 2em;
        line-height: 1.2;
    }
    .ttl-table {
        font-size: 3.8rem;
        margin: 2em 0 1rem;
    }
    .ttl {
        font-size: 4.6rem;
    }
    .faq-list {
        position: relative;
        z-index: 2;
        max-width: 1000px;
    }
    .faq-list > dt {
        position: relative;
        padding-right: 40px;
    }
    .faq-list > dt::before {
        content:"";
        position: absolute;
        top:0.3em;
        left:0;
        width: 30px;
        height: 41px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-right: 42px;
    }
    .faq-list > dd::before {
        content:"";
        position: absolute;
        top:0.3em;
        left:0;
         width: 29px;
        height: 33px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-right: 43px;
    }
    .faq-list > dd {
         position: relative;
        padding-left: 40px;
        padding-right: 40px;
    }
    .faq-list > dd {
    padding: 0;
    margin: 1.5em 0 0;
    line-height: 2;
    }
    .faq-list > dt {
        font-weight: bold;
        padding-top:1rem;
        padding-bottom:1rem;
    }
    .faq-list dd {
    margin-bottom: 2.5em;
    border-bottom: 1px dotted #332d2b;
    padding-bottom: 2.5em;

    }
    .faq-list dt,
    .faq-list dd {
        padding-left:3em;
    }
    .tab-area {
    margin-top:17.5rem;
    }
    .tab2-option {
    max-width:824px;
    margin:6em auto;
    }

}
@media all and (max-width: 750px) {
    .anchor {
    display: block;
    margin-top: -60px;
    padding-top: 60px;
    }
    .faq-list {
        width:86%;
        margin:0 auto;
    }
    .faq-list > dt,
    .faq-list > dd {
        position: relative;
        padding-left:2em;
        line-height: 1.6;
    }
    .faq-list > dt::before,
    .faq-list > dd::before {
        position: absolute;
        top:0;
        left:0;
    width:1.5em;
    height: 1.5em;
    margin-right: 1rem;
    }
    .faq-list dd {
        padding-bottom:2em;
        margin-bottom:2em;
        margin-top:1em;
        border-bottom: 1px dotted #332d2b;
    }
    .tab2-option {
      margin:3em auto;
    }
}

/* contents
--------------------------------------------- */
#main {
    margin-top:80px;
    background-color: #00864c;
    overflow-x: hidden;
}

.container {
    max-width:1000px;
    margin:0 auto;
    width:90%;
}
.container.medium {
    max-width:1072px;
}
.animation-area {
    position: relative;
}
.point-top ul {
    display: flex;
    position: relative;
    z-index: 1;
}
.point-top:before {
    content:"";
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:10rem;
    background-color: #fff;
    z-index: 0;
}
.point-wrap {
    position: relative;
}
.mv-inner {
    margin:0;
}
.point-ttl {
    background:#000;
    color: #fff;
    line-height: 1;
    padding:0.35em 0.9em;
    margin:0 0 2rem 0;
}
.point-box-txt p { 
    font-weight: 500;
    margin:0 0 2em;
}
.point-icn {
    margin:0 0 0.9rem 0;
}

.point-box-full {
    display: block;
    max-width:750px;
    border:1px solid #00864c;
    line-height: 1;
    width:100%;
    order:3;
    padding:2rem 2.5em;
}
.piston {
    margin:0 auto;
}
.gunt-type-table .ttl-table {
    margin:2rem 0 1rem;
}
.gun-type-table td {
    background-color: #ededed!important;
}
.flex {
    display: flex;
}


@media all and (min-width: 751px) {
.flex-pc {
    display: flex;
}
.jsb {
    justify-content: space-between;
}
.animation-area {
    padding-top:6.5rem;
}
.point-top {
    margin-bottom:8.8rem;
}
.point-top ul {
    margin:0 -1%;
}
.point-top li {
    width:23%;
    margin:0 1%;
}
.point-area,
.point-box {
    height: calc(482/1500*100vw);
    max-height: 482px;
    margin-bottom:5rem;
}
.point4 {
    height: calc(645/1500*100vw);
    max-height: 645px;
    margin-bottom:4rem;
}
.point-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    line-height: 1;
    flex-wrap:wrap;
}
.point4 .point-box {
    height: calc(645/1500*100vw);
    max-height: 645px;
    padding-top:2rem;
}
.point-box-txt,
.point-box-img {
    width:52%;
}
.point4 {
    margin-top:6rem;
}
.point-ttl { 
    font-size: 46px;
}
.point-box-txt p {
    font-size: 2.2rem;
}
.point1 .point-box-txt {
    width:36%;
}
.point2 .point-box-txt,
.point3 .point-box-txt  {
    width:46%;
}
.point2 .point-box-img,
.point3 .point-box-img  {
    width:45%;
}
.point4 .point-box-txt {
    width:53%;
    margin-top:2rem;
}
.point4 .point-box-txt p {
    margin-bottom:1em;
}
.point4 .point-box-img  {
    width:35%;
}
.reverse .point-box-img {
    order:1;
}
.reverse .point-box-txt {
    order:2;
}
.piston-txt { 
    font-size: 2.2rem;
}
.point-box-full {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    margin:6rem auto 0;
}
.point-box-full dd {
    width:80%;
    padding-left:5%;
    font-size: 110%;
    line-height: 160%;
}
.point-box-full dt {
    color: #00864c;
    font-size:1.5em;
    width:20%;
}
.piston-ttl {
    margin-top:0;
    margin-bottom:-9rem;
    max-width:950px;
    text-align: left;;
}

.piston-txt {
    max-width:750px;
    margin:0 auto;
    color: #fff;
    font-weight: 500;
    padding-left:3.5em;
}

.piston-table {
    margin:7rem auto 5.5rem;
    max-width:770px;
    padding-left:3.5em;
}
.type01 th {
    background-color: #daf0d5;
    width:20%;
    text-align: left;
}
.type01 th,
.type01 td {
    padding:0.45em 1em;
    border:7px solid #00864c;
}
.type01 td {
    background-color: #fff;
}
.gun-type-table th, .gun-type-table td {
    border: 7px solid #fff;
}
.gun-type-table {
    margin:0 auto 5.5rem
}
}

@media all and (max-width: 750px) {
.container {
    width:86%;
}
#main {
    margin-top:16.8vw;
}
.point-top {
    flex-wrap:wrap;
    margin-bottom:1rem;
}
.point-top ul {
    justify-content: space-between;
    flex-wrap:wrap;
    padding-top:2rem;
}
.point-top li {
    width:46%;
    margin:0 1% 2rem;
}
.point-top:before {
    height: 56vw;
}
.point1 {
    padding-top:2rem;
}
.point-icn {
    width:calc(187/750*100vw);
}
.point-ttl {
    font-size: calc(44/750*100vw);
    display: inline-block;
    padding:0.4em 1.5em 0.5em 1em;
}
.point-box-txt p {
    font-size: calc(32/750*100vw);
    margin-bottom:1em;
}
.point-area {
    background-color: #fff;
    padding:2rem 0 4rem;
    margin-bottom:4rem;
}
.point-box-full {
    margin-top:2.5rem;
    padding:1.5rem;
}
.point-box-full dt {
    color: #00864c;
    font-size:1.2em;
    margin-bottom:0.5rem;
}
.point4 {
    margin-bottom:0;
    padding-bottom:3rem;
}
.piston-txt {
    font-size: calc(32/750*100vw);
    margin:0 auto;
    color: #fff;
    font-weight: 500;
}

.piston-table {
    margin:3rem auto;
}
.type01 th {
    background-color: #daf0d5;
    width:30%;
    text-align: left;
}
.type01 th,
.type01 td {
    padding:0.45em 1em;
    border:3px solid #00864c;
}
.type01 td {
    background-color: #fff;
}
.gun-type-table th, .gun-type-table td {
    border: 3px solid #fff;
}
.gun-type-table {
    margin:0 auto 2rem
}
.cta {
    width:86%;
    margin:3rem auto;
    padding:1rem 0;
}
.cta-button a {
    height: 62px;
    font-size: calc(36/750*100vw);
}
.tab-area {
    margin-top:5rem;
}
.tab-guide li {
    border-radius: 15px 0 0 0;
    width:49%;
    height: 70px;
    padding:10px 8px;
    text-align: center;
}
.tab-guide li img {
    width:90%;
}
.tab-contents {
   padding: 3rem 0;
}
.movie-ttl {
    margin-bottom:1.5rem;
    font-size: calc(40/750*100vw);
}
.gun-type-box dt {
    font-size: calc(36/750*100vw);
    margin:1rem 0;
}
.gun-type-box dt img {
    width:calc(54/750*100vw);
    margin-right: 1rem;
}
.gun-type-box figure {
    margin-bottom: 0.5rem;
}
.gun-type-box {
    margin-bottom:3rem;
}
.gun-type-table td {
    background-color: #ededed!important;
}
.ttl {
    font-size: calc(50/750*100vw);
    margin-bottom:3rem;
}
.bg01 {
    padding:3.5rem 0;
}
.footer-copyright * {
    font-size: 11px;
}
}
/* -----------------------------------------------------------
animation
-------------------------------------------------------------*/
.inviewupdown {
  opacity: 0;
  height: 8.58vw;
}
.inviewupdown.updown {
  opacity: 1;
}
.inviewfadeInUp.delay {
  transition-delay: .2s;
}
.inviewfadeInUp {
opacity:0;
transform:translate(0,15%);
transition: 0.7s ease;
}
.fadeInUp {
opacity:1;
transform:translate(0, 0);
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}


@media all and (min-width: 751px) {

.bg {
  animation: bg 2.6s cubic-bezier(0.22, -3, 0.36, 1) forwards;
  background: url(../images/r.png)no-repeat 0 center;
  background-size:cover;
  content: "";
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
}
.bg2 {
  animation: bg 2.6s cubic-bezier(0.22, -3, 0.36, 1) forwards;
  background: url(../images/l.png)no-repeat 0 center;
  background-size:cover;
  content: "";
  position: relative;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transform-origin: right center;
}

@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}
.ani-left,
.ani-right {
opacity: 0;
}
.bg,
.bg2 {
opacity: 1.0;
}
.set,
.set2 {
transition-delay: 2.7s;
}
.set {
opacity:0;
transform:translate(-100%,0);
transition: 0.8s ease-out; 
}
.set.seton {
  opacity: 1;
  transform:translate(0, 0);
}
.set2 {
  animation-delay:2s;
opacity:0;
transform:translate(100%,0);
transition: 0.8s ease-out; 
}
.set2.seton2 {
  opacity: 1;
  transform:translate(0, 0);
}
.piston-txt {
  transition-delay: 1s
}
}


@media all and (max-width: 750px) {
.set,
.set2 {
transition-delay: .5s;
}
.set {
opacity:0;
transform:translate(-100%,0);
transition: 0.8s ease-out; 
}
.set.seton {
  opacity: 1;
  transform:translate(0, 0);
}
.set2 {
  animation-delay:2s;
opacity:0;
transform:translate(100%,0);
transition: 0.8s ease-out; 
}
.set2.seton2 {
  opacity: 1;
  transform:translate(0, 0);
}

}