@charset "UTF-8";

body {
    overscroll-behavior-y: none;
    position: relative;
  }
img{
    width: 100%;
}
/*
イングナイト
================================================ */
.IGNITE__pv{
    width: 100%;
    background: linear-gradient(90deg,#23235f, #000000);
}
.video{
    text-align: center;
    padding-bottom: 100px;
}
video{
    width: 70%; 
    text-align: center;
}
.IGNITE__pv--text{
    width: 50%;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}
video iframe{
    width: 100%;
}


#header{
    width: 100%;
    height: 15%;
    background-color: #222323;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px;
    text-align: center;
    position: fixed;
    top:0;
    left:0;
    z-index: 9997;
    transition: background-color 0.4s ease-out;
    overflow: hidden;
}
.logo{
    position: absolute;
    display:grid;
    inset: 0;
    margin: 0 auto;
    place-items: center;
    width: 8%;
}

.IGNITE{
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: -100;
    background-image: url(../img/top-background.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.IGNITE__top{
    height: auto;
    width: 100%;
    margin-top: 7.5%;
    display: flex;
    align-items: center;
}
.IGNITE__top--text{
    width: 40%;
    padding-left: 10%;
}
.IGNITE__top--text img{
    width: 100%;
}
.IGNITE__top--img{
    width: 60%;
}
.IGNITE__top--img img{
    width: 100%;
}


.IGNITE__about{
    height: 100px;
    width: 100%;
    background: linear-gradient(90deg,#23235f, #000000);
}

.IGNITE__flavor{
    height: 100px;
    width: 100%;
}

.IGNITE__faq{
    height: 100px;
    width: 100%;
}

.IGNITE__footer{
    color: #fff;
}
.IGNITE__copy--bg{
    text-align: center;
    padding: 20px 0pc;
}
.IGNITE__copy--bg p{
    color: #fff;
}

.IGNITE__about{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
}

.IGNITE__about--img{
    width: 55%;
}
.IGNITE__about--text{
    width: 45%;
    padding: 5% 5% 5% 0px;
}

.IGNITE__flavor{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
}

.IGNITE__flavor--img{
    width: 50%;
}
.IGNITE__flavor--text{
    width: 50%;
    padding: 5% 10% 5% 10%;
}

.IGNITE__faq{
    height: auto;
    padding-top: 10%;
    background: linear-gradient(90deg,#23235f, #000000);
}
.IGNITE__faq--text{
    text-align: center;
}
.IGNITE__faq--text p{
    font-size: clamp(3rem, 2.521rem + 2.39vw, 10rem);
    color: #fff;
    font-weight:bold;
    padding-bottom: 5%;
}
.IGNITE__faq--group{
    width: 100%;
    height: auto;
    margin-bottom: 3%;
}
.IGNITE__faq--group6{
    width: 100%;
    height: auto;
}
.IGNITE__faq--li{
    width: 70%;
    margin: auto;
    display: flex;
    align-items: center;
    height: 10%;
}
.IGNITE__faq--img{
    width: 10%;
}
.IGNITE__faq--qa{
    width: 90%;
    color: #fff;
    padding-left: 3%;
}
.IGNITE__faq--qa-1{
    color: #fff;
    font-size: clamp(1.5rem, 1.329rem + 0.85vw, 4rem);
    font-weight: bold;
}
.IGNITE__faq--qa-2{
    color: #fff;
    font-size: clamp(1.5rem, 1.329rem + 0.85vw, 4rem);
}
.IGNITE__footer{
    width: 100%;
    height: auto;
    background: linear-gradient(90deg,#23235f, #000000);
}
.IGNITE__footer--img{
    width: 70%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 100px;
}
/*
イングナイト
================================================ */

/*
VARIABLES
================================================ */
:root {
    --light-grey: #CBC8BF;
    --white-grey:#EFEDE7;
    --yellow-grey:#D8D6CA;
    --font:  "YuGothic", "YuGothic", "Yu Gothic", "游ゴシック", "游ゴシック体", sans-serif;
}
/*
GENERAL STYLING
================================================ */
html{
    scroll-behavior: smooth;
    font-size: 62.5%;
}
body {
    color: #000;
    font-family: var(--font);
    letter-spacing: normal;
}
.pc-only{
    display:block;
}
.sp-only{
    display:none;
}
span.line{
    display: block;
}
span.line2{
    display: block;
}
span.line.tb{
    display: inline;
}
button{
    text-align: center;
}
/*
COMMON
================================================ */

#use, #about, #table, #faq, #maker{
padding: 60px 0 80px 0;
}

img {
    max-width: 100%;
}
.section-inner{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.col-2{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.col-2 .item{
    width: calc((100% - 400px)/2);

}

h1{
    font-size: 3rem;
    letter-spacing: 0.2em;
    color: #231815;

}
h2{
    font-size: 2.2rem;
    letter-spacing: 0.2em;
    margin-bottom: 60px;
    line-height: 1.7;
}
h2.en-maintitle{
    font-size: 2.5rem;
    font-family: 'Afacad', sans-serif;
    letter-spacing: 0;
    line-height: 1.5;
    margin-bottom: 0px;
}
h2.sub-title{
    font-size: 1.7rem;
    margin-bottom: 60px;
    font-weight: bold;
}

h3{
    font-size: 2rem;
    letter-spacing: 0.2em;
    margin-left: 90px;
    font-family: var(--font);
    
}

p {
    line-height: 1.6;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    font-family: var(--font);

}

hr{
    color: #000;
    width: 100%;
    margin: 70px 0;
}
.wid30{
    width: 300px;
}
.fadeIn{
    opacity: 0;
}


/* Loading
=============================================== */

#loading{
    position: fixed;
    display: grid;
    inset:0;
    place-items: center;
    background-color: rgba(34, 35, 35, 1);
    background-image: url(../img/bg.png);
    z-index: 10000;
}
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
#loading img{
    width: 100px;
    opacity: 1;
    animation: rotate 2s linear 0s normal infinite;


}
#loading.loaded {
    opacity: 0;
    visibility: hidden;
}
.screen{
position:fixed;
inset:0;
background-color: rgba(215,68,241);
translate: 0 100vh;
z-index: 9999;

}
/* HEADER
=============================================== */

#header.headerColorScroll {
    background-color: var(--light-grey);
    transition: background-color 0.4s ease-out;
}
#header2{
    width: 100%;
    height: 100px;
    background-color: var(--light-grey);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px;
    position: fixed;
    text-align: center;
    text-align: center;
    position: fixed;
    top:0;
    z-index: 9997;
    transition: background-color 0.4s ease-out;
}

#mask{
    position: fixed;
    z-index: 998;
    inset: 0px;
    place-items: center;
    background-color: rgba(00, 00, 00, .7);
    visibility: hidden;
    opacity:0;
    backdrop-filter: blur(10px);
}

#open{
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 9999;

}
#open span{
    display: block;
    width: 40px;
    height: 1.5px;
    background-color: #fff;
    margin:0;
    position:absolute;
    top:15px;
    left:10%;
    transition: .5s;
    /* transform-origin: 0 50%; */

}
#header2 #open span{
    background-color: #000;
}
#open span:nth-of-type(2){
    top:25px;
    width: 30px;
}
#open.close span{
    left:10%;
    background-color: #000;

    
}
#open.close span:nth-of-type(1){
    transform: rotate(45deg);

}
#open.close span:nth-of-type(2){
    width: 40px;
    top:15px;
    transform: rotate(-45deg);
}
.menu-bar.headerColorScroll #open span{
background-color: #231815;
}


nav.menu-panel{
    background-color: var(--yellow-grey);
    width: 400px;
    height: 100vh;
    padding: 80px 40px 40px;
    position: fixed;
    top:0;
    left:0;
    text-align: left;
    translate:-400px 0;
    z-index: 999;
}
.nav-menu li{
    margin-top: 30px;
    font-size: 1.6rem;
    padding:0px 0 30px;
    border-bottom:.5px solid #000;
    opacity: 0;
    
}


#header h1{
    display: none;
    transition:0.5s ease-out;
}
#header h1.headerColorScroll{
    display: block;
    transition:0.5s ease-out;

}
a.member-btn{
    width: 200px;
    cursor: pointer;
    background-color: #000;
    color: var(--light-grey);
    font-size:1.4rem;
    letter-spacing: 0.2em;
    padding:10px 30px;
    z-index: 1;
    transition: .5s;
    text-align: center;

}
#header a.member-btn{
    display: none;
}
a.member-btn:hover{
    background-color:var(--light-grey);
    color:#000;
    border: .8px solid #000;
}
#header a.member-btn.headerColorScroll{
    display: block;
}

/* MAINVISUAL
---------------------------------- */

#mainvisual{
    height: 100vh;
    width:100%;
    position: relative;
}
.slider2{
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin-inline: auto;

}
.top-img{
    z-index: 1;
}
.slick-img img {
    width: 100%;
    object-fit: cover;
    height: 100vh;
}
@keyframes zoomUp {
    0% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1); /* 拡大率 */
    }
}
.add-animation {
    animation: zoomUp 10s linear 0s normal both;
}
#mainvisual .slick-list{
    height: 100%;
}

.top-img{
    height: 100%;
    display:grid;
    place-items:center;
    align-items:center;
    position: absolute;
    inset: 0;
}

.top-img img{
    width:200px;
    margin-bottom: 50px;
}
.main-box{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    text-align: center;

    
}
#mainvisual .member-btn{
    background-color: #fff;
    color:#000;
    padding:15px 30px;
    transition: .6s;
    letter-spacing: 0.01em;
}
#mainvisual .member-btn:hover{
    background-color: #000;
    color: #fff;
}

/* POLICY 
=============================================== */
#policy{
    padding: 150px 0;
    position: relative;
    background: url(../img/bg.png)  #D7D5C8 repeat center/cover;

}
#policy img{
    width: 85vw;
    position: relative;
    left:-5px;
}

h2.black-title{
    font-size: 2rem;
    writing-mode:vertical-rl;
    color: #fff;
    background-color: #000;
    padding:25px 20px; 
}

#policy .black-title{
    position: absolute;
    top:100px;
    right:8.5vw;
}

/* PRODUCT SPECIFICS
=============================================== */
#product{
    background-color: #EEECE5;
    padding: 150px 0 400px;

}
#product .black-title{
    position:absolute;
    top:0;
    right:50%;
    z-index: 2;
}
.product-img{
    text-align:right;
    position: relative;

}
#product img{
    width: max(60vw, 600px);
    z-index: 1;
    position: inherit;
}
#product img.pc-only{
    display: inline;
}
.frame-box{
    border:1.5px solid #000;
    padding: 50px;
    text-align: left;
    
}
.product-box{
    position:absolute;
    top:84%;
    left:5vw;
    width: max(64vw, 920px);

        
}
    
    
h3.product-name{
    margin: 0 0 5px;
    font-size: 1.2vw;

}
p.product-text{
    line-height: 2.2;
    font-size: 1vw;
    margin-top: 20px;
}
#product button a{
    cursor: pointer;
    display: block;
    font-size: 1.5rem;
    padding:20px 60px;
    border:1.5px solid #000;
    margin-top:30px;
    transition: .6s;

}
#product button a:hover{
    background-color: #000;
    color: #fff;
    
}

/* COMPANY 
=============================================== */
#company{
    background-color: #fff;
    padding:150px 0 250px;
}
#company img{
    width: 40vw;
    position: inherit;
    z-index: 1;
}
.company-wrap{
    position: relative;
}
.frame-box.company-box{
    position: absolute;
    top:40%;
    right: 5vw;
    padding:8vh 5vw 90px 300px;
    width: min(70vw, 1200px);
    height: max(34vh, 300px);

}
#company-table{
font-size:1.5rem;
text-align: left;
margin-top: 20px;

}
#company-table td,
#company-table th{
padding: 6px 0;
font-weight: lighter;
letter-spacing: 0.05em;
font-size: 1vw;

}
#company-table td{
    padding-left:50px;

}

/* FOOTER
===============================================  */

#footer{
    height: 100%;
    width: 100%;
    text-align: center;
}
.footer-logo{
    width: 150px;
}
.footer-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-box{
    display: flex;
    justify-content: flex-start;
    align-items: end;
}
.footer-wrap{
    height: 400px;
    background-color: #EEECE5;
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;

}
ul.footer-nav{
    margin-left: 30px;
}
ul.footer-nav li{
    padding-right: 15px;
    font-size: 1.3rem;
    

}
ul.footer-nav li:hover{
    opacity:.6;
}
.footer-box2{
    text-align: right;
}
.footer-box2 p{
    font-size: 1.5rem;
    padding: 10px 0;

}
#footer .frame-box{
    padding: 20px 10px;
    text-align: center;
    width: 100%;
}
#footer .frame-box p{
    font-size: 1.7rem;
    margin-bottom: 5px;
    padding:0;
}

.copy-bg{
    background-color: #939087;
    height: 100px;
    padding-top: 50px;
}
.copyright{
    font-size: 1.6rem;
    color: #251714;
}

/* ここから商品ページ
PRODUCT-PAGE
=============================================== */
.fadeIn2{
    opacity: 0;
}
#top{
    width: 100%;
    background-color: #fff;
    padding-top: 170px;
    padding-bottom: 50px;
}
.pdt-container{
    width: 40%;
}

.product--inner--1{
    width: 70%;
    margin: auto;
    display: flex;
    justify-content:space-between;
    align-items: center;
}
.slider{
    width: min(34vw, 630px);
    background-color: var(--white-grey);
}

.slick-dots li button:before{
    font-size: 8px;
}
.slick-dots li{
    margin: 0 3px;
}
.slick-dots{
    bottom: 15px;
    right:0;
    left: 0;
    margin: 0 auto;
}

.pdt-top img{
    aspect-ratio: 1/1;
    object-fit: cover;
    z-index: 10;
    width: min(34vw, 630px);
}


p.pdt-name{
    font-size: 2.5rem;
}
p.pdt-large{
    font-size: 2.3rem;
    margin: 20px 0;
}
span.small{
    font-size: 1.4rem;
}
p.text{
    font-size: 1.6rem;
}

/* USE
=============================================== */
#use{
    background-color: var(--white-grey);
}
.main-title span{
    display:block;
    border-bottom: 2px solid #000;
    padding-bottom:10px;
    
}
.wrap{
    margin-left: 40px;
}
#use .item{
    position: relative;
}
.trouble-list li{
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    margin: 30px 0;
    position: relative;
    margin-left: 50px;
    text-align: left;

}
#use .section-inner:nth-last-of-type(1){
    max-width: 1200px;
}
.trouble-list li::before{
    content:'';
    display:block;
    background-image: url(../img/check.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    position: absolute;
    bottom:-5px;
    left:-40px;

}
#use img.item.space{
    margin-left: 180px;
    width: 300px;
}
.sub-img{
    position: absolute;
    bottom:5%;
    left:-65%;
}

#use .wrap:nth-last-of-type(1){
    margin-right: 150px;
    width: 480px;
}


/* ABOUT
===============================================  */

#about{
    background: url(../img/bg.png)  var(--yellow-grey) repeat center/cover;
    padding: 120px 0 80px;
    text-align: center;

}
.small-title span{
    display: inline-block;
    font-size: 4.6rem;
    transform: scale(0.8, 1);

}
#about .col-2{
    align-items:start;
}
.about-parts{
    text-align: left;
    margin-bottom: 50px;
}
.about-parts p{
    font-size: 1.5rem;
    width: 85%;;
    font-weight: lighter;
    padding-left: 90px;
    line-height: 1.5;
}

.about-parts img{
    width: 280px;
    object-fit: cover;

}
#about hr{
    margin:10px 0;
}


/* EFFECT
=============================================== */
#effect img{
    width: 100%;
    height: 95vh;
    object-fit: cover;

}

/* TABLE
===============================================  */
#table{
    background: url(../img/bg.png)  var(--white-grey) repeat center/cover;
    text-align: center;
    padding-top: 110px;
    
}
#table img{
    width: 60vw;
}
/* HOW
===============================================  */
#how .col-2{
    background-color: #fff;

}
#how img{
    height: 75vh;
    object-fit: cover;
    
}
.how-wrap{
    background-color: #fff;
    padding: 80px 0 50px;
    text-align: center;
}

span.bold{
    font-weight: bold;
    font-size: 2.8rem;
    padding: 0 10px;
}
p.how-text{
    font-size: 2rem;
    line-height: 2;
    margin:70px 0 0;
    letter-spacing: 0.2em;
}

/* FAQ
===============================================  */
#faq{
    text-align: center;
    padding-top: 100px;
    position: relative;

}
#faq::before{
    content:"";
    display:block;
    position:absolute;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height: 100%;
    background: url(../img/bg.png)  var(--white-grey) repeat center/cover;
}
.faq-box{
text-align: left;
border: 1px solid #000;
width: 100%;
margin: 0 auto;
}
p.faq-text{
font-size: 1.5rem;
line-height: 1.8;;
}

.qa-list dl {
margin: 0 auto;
position: relative;
margin: 0;
padding: 0;
cursor: pointer;
border-bottom: .6px solid #000;
font-size: 1.5rem;
color: #000;


}
.qa-list dl::before {
position: absolute;
top: 35px;
right: 35px;
display: block;
width: 7px;
height: 7px;
margin: auto;
content: '';
transform: rotate(135deg);
border-top: 1px solid #000;
border-right: 1px solid #000;
}
.qa-list .open::before {
transform: rotate(-45deg);
}
.qa-list dl dt {
position: relative;
font-weight: 100;
margin: 0;
line-height: 2;
padding: 20px 80px;

}
.qa-list dl dt::before {
font-size: 3.5rem;
line-height: 0.3;
position: absolute;
top: 30px;
left: 30px;
display: block;
content: 'Q.';
}
.qa-list dl dd::before {
font-size: 3.5rem;
line-height: 0.3;
position: absolute;
top: 20px;
left: 30px;
display: block;
content: 'A.';
}
.qa-list dl dd {
position: relative;
background-color: rgba(96, 96, 96, 0.2);
display: none;
height: auto;
margin: 0;
padding: 20px 150px 15px 80px;
text-align: left;
}
.qa-list dl dd p {
text-align: left;
}


/* MAKER
=============================================== */
#maker{
    text-align: center;
    background: url(../img/bg.png)  var(--white-grey) repeat center/cover;
    padding-bottom: 130px;
}
#maker .col-2{
    margin: 10px 0 30px;
}

img.maker-img{
    width: calc((100% - 20px) / 3);


}
#maker .section-inner{
    text-align: left;
    max-width: 900px;
}
.maker-name{
    font-size: 2rem;

}
.maker-name + p{
    margin-bottom: 30px;
}
.maker-text{
    line-height: 1.5;
}

/* ここから特商法ページ 
=============================================== */
#specified-commercial{
    padding: 100px 0;
    background-color: #fff;
    margin-top:100px;
    background: url(../img/bg.png)  var(--white-grey) repeat center/cover;

}
#specified-commercial h2,
#privacy h2,
#contact h2{
    text-align: center;
    font-size: 2.7rem;
    margin-bottom: 30px;
    font-weight: bold;

}
table#sc-table{
    width: 70vw;
    margin:0 auto;
    border-collapse : collapse;
    border-spacing : 0px 30px;
}
table#sc-table th,
table#sc-table td{
    text-align: left;
    font-size: 1.6rem;
    vertical-align: middle;
    border: solid 1px #000;
    padding: 20px;
    line-height: 1.5;
    text-align: justify;

}
table#sc-table th{
    width: 30%;
}
table#sc-table td{
    width: 60%;
}

#contact dl{
    font-size: 1.6rem;
}
#contact dt,
#contact dd{
    padding: 10px 0;
}
h3.confirm-title{
    margin: 0;
    margin-bottom: 20px;
}
#contact.pad{
    padding:150px 0 250px;
}

/* ここから個人情報保護ページ
=============================================== */
#privacy{
    padding: 100px 0;
    background-color: #fff;
    margin-top:100px;
    background: url(../img/bg.png)  var(--white-grey) repeat center/cover;

}

/* ここからお問い合わせページ
=============================================== */ 

#contact{
background: url(../img/bg.png)  var(--white-grey) repeat center/cover;
padding: 100px 0;
margin-top:100px;
text-align: center;

}

form{
width: 800px;
margin: 0 auto;}

#contact-table {
width: 100%;
margin-bottom:20px;
color: #000;
}
.contact-item,
.contact-body {
padding: 20px 10px;;
font-size: 1.6rem;

}

.contact-item {
text-align: left; /* テキスト左寄せ */
width: 20%; /* 横幅30%指定（グレーの背景色部分） */
vertical-align: middle;
}
.contact-item.top{
vertical-align:top;
padding-top: 30px;
}

.contact-body {
width: 78%; /* 横幅70%指定（白背景色部分） */
text-align: left;
}

.form-text {
width: 100%;
background-color: transparent;
padding: 15px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border-bottom: 1px solid #000;
}
.form-textarea {
background-color: transparent;
width: 100%;
padding: 10px;
height: 200px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border-bottom: 1px solid #000;

}

#contact .apply{
width:25%;
display: block;
padding:10px;
border:1px solid #000;
font-size: 2rem;
text-align: center;
margin: 0 auto;
transition: 0.8s;
cursor: pointer;

}
#contact .apply:hover{
    background-color: #000;
    color: #fff;
}
.apply2{
width:auto;
display: block;
padding:10px 20px;
border:1px solid #000;
font-size: 2rem;
text-align: center;
margin: 40px auto 20px;
transition: 0.8s;
cursor: pointer;

}
.apply2:hover{
    background-color: #000;
    color: #fff;
}

#contact p{
    font-size: 1.7rem;
    color:#000;
    text-align: center;
    margin: 10px 0;
}


/*==追加CSS== */
.products-line-up__box{
    width: 70%;
    margin: auto;
    padding-top: 200px;
    margin-bottom: 100px;
}

.products-line-up{
    width: calc(100% / 3);
    padding-left: 25px;
    padding-right: 25px;
}

.products-line-up-img img{
    width: 100%;
}
.products-line-up__text{
    font-size: 18px;
    font-weight: bold;
    padding-top: 30px;
}
.products-line-up__box{
    display: flex;
}

.btn---1{
    cursor: pointer;
    display: block;
    font-size: 1.5rem;
    padding: 20px 60px;
    border: 1.5px solid #000;
    margin-top: 30px;
    transition: .6s;
    width: 100%;
    text-align: center;
}
.btn---1:hover{
    cursor: pointer;
    display: block;
    font-size: 1.5rem;
    padding: 20px 60px;
    border: 1.5px solid #000;
    background-color: #000;
    color: #fff;
    margin-top: 30px;
}
.text-----01{
    font-size: 9px !important;
}


/* 
=============================================== 
ipad
=============================================== */
@media screen and (max-width:1024px){

    .IGNITE{
        background-image: url(../img/top-background-tb.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

    #header{
        width: 100%;
        height: 7%;
        background-color: #222323;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10px 30px;
        text-align: center;
        position: fixed;
        top:0;
        left:0;
        z-index: 9997;
        transition: background-color 0.4s ease-out;
        overflow: hidden;
    }
    

    .section-inner{
        max-width: 740px;
    }
    
    #use, #about, #table, #faq, #maker{
    padding: 80px 0 100px 0;
    }

    .col-2{
        display:block;
    }
    .col-2 .item{
        width: 80%;
        margin: 0 auto;
    
        
    }
    h2{
        font-size: 2.2rem;
        margin-bottom: 50px;
    }
    h2.en-maintitle{
        font-size: 2.5rem;
        font-family: 'Afacad', sans-serif;
        margin-top: 30px;
    }
    h2.sub-title{
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

h3{
    font-size: 2.3rem;
    margin-left: 0;
    margin-top: 10px;
    
}
span.line2{
    display: inline;
}
.pc-only.tb{
    display: none;
}
.sp-only.tb{
display: block;
}
span.line.tb{
    display: block;
}


#header li.sp-only a.member-btn{
    display: block;
    }
    .nav-menu li:nth-last-child(1){
        border-bottom: none;
    }
    

    
/* MAINVISUAL ipad
===============================================  */

.slick-img img {
    width: 100%;
    height: 100%;
}
.slick-list{
    height: 100%;
}
.slick-track{
    height: 100%;
}

/* POLICY ipad
===============================================  */
#policy .black-title{
    right:50px;
}
#policy img{
padding-right: 20px;    
}


/* PRODUCT ipad */
/* ===============================================  */
#product{
    padding-bottom: 450px;
}
.product-box{
    width: max(70vw, 690px);
}

#product img{
    width: max(60vw, 580px);

}
h3.product-name{
    font-size: 1.8rem;

}
p.product-text{
    font-size: 1.6rem;
  
}
/* COMPANY ipad 
=============================================== */
.frame-box.company-box{
    width: max(72vw, 640px);
    padding: 50px 40px 50px 260px;
    height: max(21vh, 300px);
}
#company-table td, #company-table th{
    font-size: 1.4rem;
}

/* FOOTER ipad 
=============================================== */

.footer-wrap{
    padding-top: 50px;
    height: 640px;
}
ul.footer-nav{
    margin: 0;
}
ul.footer-nav li{
    padding: 13px 0;
    font-size: 1.8rem;
    font-weight: lighter;
}
.footer-nav, .footer-wrap, .footer-box{
    display: block
}
.footer-logo{
    width: 100px;
    margin-bottom:20px;
}
.footer-box2{
    text-align: center;
    margin-top:20px;
}
#footer .frame-box{
    width: 220px;
    margin: 10px auto;
    padding:10px;
}
#footer .frame-box p{
    font-size: 1.4rem;
}
.footer-box2 p{
    padding:0;
}


/* ここから商品詳細ページ */
/* =============================================== */

#top{
    width: 100%;
    background-color: #fff;
    padding-top: 170px;
    padding-bottom: 50px;
}
.product--inner--1{
    width: 70%;
    margin: auto;
    display:block;
    justify-content:space-between;
    align-items: center;
}
.slider{
    width: min(34vw, 630px);
    background-color: var(--white-grey);
    margin: auto;
}

    .pdt-top img{
        width:min(45vw, 370px);
    }

    p.pdt-name, p.pdt-large{
        font-size: 2rem;
    }
    p.pdt-large{
        margin: 10px 0;
    }
    p.text{
        font-size: 1.7vw;
    }



    /* USE ipad
=============================================== */
#use{
}
.main-title{
    text-align: center;
}
.main-title span{
    width: fit-content;
    margin: 0 auto;

}
.wrap{
    margin-left:0;
    text-align: center;
}
#use .item{
    position: relative;
    width: 300px;
}
.trouble-list{
    margin-bottom: 60px;
}
.trouble-list li{
    font-size: 1.6rem;
    margin-left:0px;
    text-align: left;
    padding-left: 280px;

}

#use .section-inner:nth-last-of-type(1){
    max-width: 900px;
    text-align: center;
}
.trouble-list li::before{
    width: 32px;
    height: 32px;
    left: 220px;
}
#use img.item.space{
    margin: 0 auto;
}
.sub-img{
    width: 200px;
    position: absolute;
    bottom:5%;
    left:-45%;
}
#use .wrap:nth-last-of-type(1){
    text-align: left;
    margin:0 auto;
    width: 310px;
}


/* ABOUT
===============================================  */

#about{
    padding: 120px 0 20px;
}
#about .col-2{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
.small-title span{
    font-size: 5rem;

}
.about-parts{
    text-align: center;
    margin-bottom: 50px;
}
.about-parts p{
    font-size: 1.6rem;
    width: 85%;;
    padding-left: 90px;
    margin-bottom: 20px;
}

.about-parts img{
    width: 340px;
    object-fit: cover;

}
#about hr{
    margin:10px auto;
    width: 80%;
}
#effect img{
    height: 65vh;
}

#table{
    padding:120px 0;
}
#table img{
    width: 70vw;
}
/* how ipad
===============================================  */
#how .col-2{
    display:flex;
    justify-content: space-between;
}
#how img{
    height: 36vh;
    object-fit: cover;
    width: 35%;
}
#how img:nth-last-child(1){
    object-fit: contain;
    width: auto;
}
.how-wrap{
    padding: 20px 0 40px;
}

span.bold{
    font-size: 2.7rem;
}
p.how-text{
    font-size: 1.6rem;
    margin-top: 60px;
}

/* maker
=============================================== */
#maker{
    padding-bottom: 130px;
}
#maker .col-2{
    margin: 10px 0 30px;
}

img.maker-img{
    width: calc((100% - 7px) / 3);


}
#maker .section-inner{
    max-width: 740px;
}
.maker-name{
    font-size: 2.3rem;

}
.maker-name + p{
    margin-bottom: 30px;
}


/* ここから特商法ページ
=============================================== */ 
table#sc-table{
    width: 90vw;
}

/* ここからお問い合わせページ 
=============================================== */
form{
    width: 90vw;
}
#contact-table{
    width: 80%;
    margin: 0 auto;
}
.contact-item{
    width: 25%;
}

/*==追加CSS== */
.products-line-up__box{
    width: 90%;
    margin: auto;
    padding-top: 200px;
    margin-bottom: 100px;
}

.products-line-up{
    width: calc(100% / 3);
    padding-left: 15px;
    padding-right: 15px;
}

.products-line-up-img img{
    width: 100%;
}
.products-line-up__text{
    font-size: 15px;
    font-weight: bold;
    padding-top: 30px;
}
.products-line-up__box{
    display: flex;
}

.btn---1{
    cursor: pointer;
    display: block;
    font-size: 1rem;
    padding: 20px 60px;
    border: 1.5px solid #000;
    margin-top: 30px;
    transition: .6s;
    width: 100%;
    text-align: center;
}
.btn---1:hover{
    cursor: pointer;
    display: block;
    font-size: 1rem;
    padding: 20px 60px;
    border: 1.5px solid #000;
    background-color: #000;
    color: #fff;
    margin-top: 30px;
}

.pdt-container{
    width: 70%;
    margin: auto;
}

}


/* ===============================================
SP 
=============================================== */
@media screen and (max-width:680px) {
    .pc-only{
        display:none;
    }
    #product img.pc-only{
        display: none;
    }
    .sp-only{
        display:block;
    }
    span.line{
        display: inline;
    }
    /*
COMMON iphone
================================================ */

    
    .section-inner{
        max-width: 550px;
    }
    h1{
        font-size: 2.5rem;
    }
    

    h2{
        font-size: 2rem;
        margin-bottom: 30px;
        letter-spacing: 0.1em;
        padding: 0 8px;

    }
    h2.en-maintitle{
        font-size: 2rem;
    }
    h3{
        font-size: 1.6rem;
    }
    
    p {
        font-size: 1.4rem;
    }
    hr{
        width: 80%;
        margin: 40px auto;
    }
    

    /* HEADER iphone
=============================================== */

#header{
    height: 80px;
}
a.member-btn{
    margin: 30px auto;
    text-align: center;
}
.nav-menu li{
    perspective: 1000;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}
.nav-menu li:nth-last-of-type(1){
    border-bottom:none;
    
}
nav.menu-panel{
    width: 100%;
    translate:-100vw 0;
    perspective: 1000;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}


p.pdt-name{
    font-size: 2.4rem;
}
p.pdt-large{
    font-size: 2.1rem;
    margin-bottom: 20px;
}
span.small{
font-size: 1.5rem;
}
#top p.text{
    letter-spacing: 0.05em;
}


#top{
    width: 100%;
    background-color: #fff;
    padding-top: 110px;
    padding-bottom: 50px;
}

.product--inner--1{
    width: 95%;
    margin: auto;
    display:block;
    justify-content:space-between;
    align-items: center;
}
.slider{
    width: min(34vw, 630px);
    background-color: var(--white-grey);
    margin: auto;
}

.pdt-top img{
    width: 100%;
}
.slider{
    width:100%;
    top:0%;
    left:0%;
}
.pdt-container{
    position: static;
    border: none;
    width: 100%;
    height:auto;
    top:0;
    left: 0;
    padding:0;
    /* opacity: 0; */
    padding: 0 20px;
}

.pdt-top{
    width: 100%;
    margin:0;
}
p.text{
    font-size: 1.6rem;
}
#header a.member-btn.headerColorScroll.pc-only{
    display: none;
}
#header li.sp-only a.member-btn{
    display: block;
    margin: 0;
}
/* MAINVISUAL iphone 
=============================================== */
.top-img img{
    width: 140px;
}
.slick-slide img.pc-only{
    display: none;
}

/* POLICY iphone 
=============================================== */
#policy{
    padding: 125px 0 120px;
}
h2.black-title{
    font-size: 1.5rem;
    padding:14px; 
}
#policy img{
    width: 100vw;
    padding: 0;
    position: relative;
    left:-70px;
    top:30px;
}
#policy .black-title{
    right: 40px;
    top:50px;
}
/* PRODUCT iphone 
=============================================== */
#product{
    padding: 90px 0 620px;
}
#product .black-title{
    right:75%;
}
.product-box{
    width: max(70vw, 350px);
    top:68%;
    left:-10px;
    padding: 100px 50px 50px;

}
p.product-text{
    font-size: 1.4rem;
}
#product img{
    padding-left: 20px;
}

/* COMPANY iphone 
=============================================== */
#company{
    padding: 80px 0 460px;
    overflow: hidden;
}
#company img{
    width: 70vw;
}
.frame-box.company-box{
    width: max(90vw, 300px);
    padding: 90px 40px 50px 50px;
    top:120px;
    right:-10px;
    height: auto;
}
#company-table td, #company-table th{
    display: block;
    padding: 5px 0;
}
#company-table{
    border-collapse : separate;
    border-spacing : 0px 10px;
}
#company-table td{
    padding-left: 0;
    font-size: 1.4rem;

}
#company-table th{
    font-weight: bold;
    font-size: 1.4rem;

}

    /* USE iphone
=============================================== */

#use{
    padding: 80px 0;
}
#use .item{
    width: 42%
}
.trouble-list{
    margin-bottom: 40px;
}
.trouble-list li{
    font-size: 1.5rem;
    margin: 15px 0;
    text-align: left;
    padding-left: 27vw;

}
#use img.item.space{
    width: 200px;
}

#use .section-inner:nth-last-of-type(1){
    max-width: 550px;
    text-align: center;
}
.trouble-list li::before{
    width: 25px;
    height: 32px;
    left: 17vw;
    bottom:-10px;
}
.sub-img{
    width: 110px;
    position: absolute;
    bottom:5%;
    left:-45%;
}
#use .wrap:nth-last-of-type(1){
    text-align: left;
    width: 350px;
}


/* ABOUT iphone
===============================================  */

#about{
    padding: 80px 0 20px;
}
#about h2{
    margin-bottom: 20px;
}
.small-title span{
    font-size: 3rem;

}
.about-parts{
    text-align: center;
    margin-bottom: 40px;
}
.about-parts p{
    font-size: 1.5rem;
    width: 85%;
    text-align: left;
    padding-left: 0px;
    margin: 0 auto 20px;
}

.about-parts img{
    width: 80%;
}

/* EFFECT iphone
=============================================== */
#effect img{
    height: 370px;
    object-fit: cover;

}

/* TABLE iphone
===============================================  */
#table{
    padding: 80px 15px;
}
#table img{
    width: 100vw;
}
/* HOW iphone
===============================================  */
#how .col-2{
display: block;
position: relative;
background-image: url(../img/how2.png);
background-repeat: no-repeat;
background-size: cover;

}
#how img{
    height: 230px;
    width: 100%;
    object-fit: cover;
    
}
.how-wrap{
    background: rgba(255, 255, 255, 1);
    padding: 60px 20px 70px;

}

span.bold{
    font-size: 2rem;
    padding: 0 10px;
}
p.how-text{
    font-size: 1.4rem;
    margin:40px 0 0;
}
#how img:nth-last-child(1){
    object-fit: cover;
    position: absolute;
    top:0;
    right: 0;
    display: none;
}


/* FAQ iphone
===============================================  */
#faq{
    padding: 80px 0;
    background-position: fixer;
}

p.faq-text{
font-size: 1.4rem;
}

.qa-list dl {
font-size: 1.4rem;
}
.qa-list dl dt {
padding: 20px 70px;

}
.qa-list dl dt::before {
font-size: 2.8rem;
top: 30px;
left: 30px;
}
.qa-list dl dd::before {
font-size: 2.8rem;
font-weight: bold;
top: 25px;
left: 30px;
}
.qa-list dl dd {
padding: 20px 20px 15px 70px;
}


/* MAKER
=============================================== */
#maker{
    padding: 20px 15px 80px;
}
#maker .col-2{
    margin: 3px 0 30px;
}

img.maker-img{
    width: calc((100% - 7px) / 3);

}
#maker .section-inner{
    max-width: 550px;
}
.maker-name{
    font-size: 2rem;

}
.maker-name + p{
    margin-bottom: 10px;
}
.maker-text{
    line-height: 1.6;
}
/* FOOTER
=============================================== */
#footer{
    height: 80px;
}
ul.footer-nav li{
    font-size: 1.4rem;
}

.copyright{
    font-size: 1.4rem;
}

/* ここから特商法ページ
=============================================== */
#specified-commercial,
#privacy{
    padding-top:50px;
}
table#sc-table{
border-collapse: separate;
border-spacing: 0 16px;
}
#specified-commercial h2,
#privacy h2{
    font-size: 1.9rem;
}

table#sc-table th,
table#sc-table td{
    display: block;
    width: 100%;
    padding: 10px 20px;
    border: none;
    font-size: 1.5rem;

}
table#sc-table td{
    padding-top: 0px;
}

/* ここから個人情報保護ページ
=============================================== */


/* ここからお問い合わせページ 
=============================================== */
form{
    width: 90vw;
}

#contact-table{
    width: 90vw;
    border-collapse: separate;
    border-spacing: 0 15px;
}
#contact-table th,
#contact-table td{
    display: block;
    width: 100%;
}
.contact-item{
    padding: 0px 20px;
}
#contact.pad{
    padding: 100px 0;
}

/*==追加CSS== */
.products-line-up__box{
    width: 100%;
    margin: auto;
    padding-top: 150px;
    margin-bottom: 100px;
    text-align: center;
}

.products-line-up{
    width: 95%;
    text-align: center;
    padding-bottom: 50px;
    margin: auto;
}

.products-line-up-img img{
    width: 100%;
}
.products-line-up__text{
    font-size: 18px;
    font-weight: bold;
    padding-top: 30px;
}
.products-line-up__box{
    display: block;
}

.btn---1{
    cursor: pointer;
    display: block;
    font-size: 1.5rem;
    padding: 20px 60px;
    border: 1.5px solid #000;
    margin-top: 30px;
    transition: .6s;
    width: 100%;
    text-align: center;
}
.btn---1:hover{
    cursor: pointer;
    display: block;
    font-size: 1.5rem;
    padding: 20px 60px;
    border: 1.5px solid #000;
    background-color: #000;
    color: #fff;
    margin-top: 30px;
}
.pdt-container{
    width: 100%;
}
/*
イングナイト
================================================ */
#header{
    width: 100%;
    height: 10%;
    background-color: #222323;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px;
    text-align: center;
    position: fixed;
    top:0;
    left:0;
    z-index: 9997;
    transition: background-color 0.4s ease-out;
    overflow: hidden;
}
.logo{
    position: absolute;
    display:grid;
    inset: 0;
    margin: 0 auto;
    place-items: center;
    width: 20%;
}

.IGNITE{
    background-image: url(../img/top-background-sp.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.IGNITE__top{
    height: auto;
    width: 100%;
    margin-top: 7.5%;
    display: block;
    align-items: center;
}
.IGNITE__top--text{
    width: 100%;
    padding-left: 0%;
    margin-top: 150px;
    margin-bottom: 50px;
    text-align: center;
}
.IGNITE__top--text img{
    width: 90%;
}
.IGNITE__top--img{
    width: 100%;
}
.IGNITE__top--img img{
    width: 100%;
}


.IGNITE__about{
    height: 100px;
    width: 100%;
    background: linear-gradient(90deg,#23235f, #000000);
}

.IGNITE__flavor{
    height: 100px;
    width: 100%;
}

.IGNITE__faq{
    height: 100px;
    width: 100%;
}

.IGNITE__footer{
    color: #fff;
}
.IGNITE__copy--bg{
    text-align: center;
    padding: 20px 0pc;
}
.IGNITE__copy--bg p{
    color: #fff;
}

.IGNITE__about{
    width: 100%;
    height: auto;
    display: block;
    align-items: center;
}

.IGNITE__about--img{
    width: 100%;
}
.IGNITE__about--text{
    width: 100%;
    padding: 100px 0% 5% 0px;
}

.IGNITE__flavor{
    width: 100%;
    height: auto;
    display: block;
    align-items: center;
}

.IGNITE__flavor--img{
    width: 100%;
}
.IGNITE__flavor--text{
    width: 100%;
    padding: 5% 10% 5% 10%;
}

.IGNITE__faq{
    height: auto;
    padding-top: 30%;
    background: linear-gradient(90deg,#23235f, #000000);
}
.IGNITE__faq--text{
    text-align: center;
}
.IGNITE__faq--text p{
    font-size: clamp(3rem, 2.521rem + 2.39vw, 10rem);
    color: #fff;
    font-weight:bold;
    padding-bottom: 10%;
}
.IGNITE__faq--group{
    width: 100%;
    height: auto;
    margin-bottom: 5%;
}
.IGNITE__faq--group6{
    width: 100%;
    height: auto;
}
.IGNITE__faq--li{
    width: 100%;
    margin: auto;
    display: block;
    align-items: center;
    height: 10%;
    padding-bottom: 5%;
}
.IGNITE__faq--img{
    width: 15%;
    margin: auto;
    padding-bottom: 5%;
}
.IGNITE__faq--qa{
    width: 100%;
    color: #fff;
    padding-left: 3%;
}
.IGNITE__faq--qa-1{
    color: #fff;
    font-size: clamp(1.5rem, 1.329rem + 0.85vw, 4rem);
    font-weight: bold;
    padding-bottom: 10px;
}
.IGNITE__faq--qa-2{
    color: #fff;
    font-size: clamp(1.5rem, 1.329rem + 0.85vw, 4rem);
}
.IGNITE__footer{
    width: 100%;
    height: auto;
    background: linear-gradient(90deg,#23235f, #000000);
}
.IGNITE__footer--img{
    width: 90%;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}


.IGNITE__pv{
    width: 100%;
    background: linear-gradient(90deg,#23235f, #000000);
}
.video{
    text-align: center;
    padding-bottom: 0px;
}
video{
    width: 100%;
    text-align: center;
}
.IGNITE__pv--text{
    width: 90%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 20px;
}
/*
イングナイト
================================================ */
}