@charset "UTF-8";
main { max-width: 1000px; margin: 50px auto; padding: 0 20px;}
section { margin: 0 0 100px;}

h1 { margin: 0 0 50px; text-align: center;}

h2 { 
    margin: 0 0 50px;
    font-size: 30px; line-height: 1.3; text-align: center;}
    
#faq ul { border-bottom: solid 1px #9fa1a0;}

/* 開閉ボタン */
#faq input { display: none;}

#faq label {
    display: block; position: relative; 
    padding: 15px 0 15px 30px; 
    border-top: solid 1px #9fa1a0;
    font-size: 16px; font-weight: 900; line-height: 1.6em;}

#faq label::before {
    content: '＋';
    display: block; position: absolute; top: 15px; left: 5px;}

@media screen and (max-width:699px){
    #faq label { font-size: 14px;}
}

/* 表示・非表示エリア */
.area01,.area02,.area03,.area04,.area05,
.area06,.area07,.area08,.area09,.area10,
.area11,.area12 {
  overflow-y: hidden;
  max-height: 0; margin: 0; padding:0; 
  border:none; 
  opacity: 0; font-size: 14px; line-height: 1.6em;
  -webkit-transition: max-height 0.5s;
  -moz-transition: max-height 0.5s;
  -ms-transition: max-height 0.5s;
  -o-transition: max-height 0.5s;
  transition: max-height 0.5s;}

/* アコーディオンをクリックした場合 */
#faq01:checked ~ .area01,
#faq02:checked ~ .area02,
#faq03:checked ~ .area03,
#faq04:checked ~ .area04,
#faq05:checked ~ .area05,
#faq06:checked ~ .area06,
#faq07:checked ~ .area07,
#faq08:checked ~ .area08,
#faq09:checked ~ .area09,
#faq10:checked ~ .area10,
#faq11:checked ~ .area11,
#faq12:checked ~ .area12 { margin: 0 0 30px; opacity: 1;}

#faq01:checked ~ .area01 { max-height: 130px;}
#faq02:checked ~ .area02 { max-height: 130px;}
#faq03:checked ~ .area03 { max-height: 420px;}
#faq04:checked ~ .area04 { max-height: 100px;}
#faq05:checked ~ .area05 { max-height: 110px;}
#faq06:checked ~ .area06 { max-height: 100px;}
#faq07:checked ~ .area07 { max-height: 150px;}
#faq08:checked ~ .area08 { max-height: 130px;}
#faq09:checked ~ .area09 { max-height: 280px;}
#faq10:checked ~ .area10 { max-height: 170px;}
#faq11:checked ~ .area11 { max-height: 300px;}
#faq12:checked ~ .area12 { max-height: 1000px;}

#faq01:checked ~ label[for="faq01"]::before,
#faq02:checked ~ label[for="faq02"]::before,
#faq03:checked ~ label[for="faq03"]::before,
#faq04:checked ~ label[for="faq04"]::before,
#faq05:checked ~ label[for="faq05"]::before,
#faq06:checked ~ label[for="faq06"]::before,
#faq07:checked ~ label[for="faq07"]::before,
#faq08:checked ~ label[for="faq08"]::before,
#faq09:checked ~ label[for="faq09"]::before,
#faq10:checked ~ label[for="faq10"]::before,
#faq11:checked ~ label[for="faq11"]::before,
#faq12:checked ~ label[for="faq12"]::before { content: '－';}

#faq table { 
    border-spacing: 0; border-collapse: collapse;
    font-size: 14px; line-height: 1.3em;}
    
#faq tr > * { padding: 5px; border: solid 1px #888;}
#faq th { background: #eee;}

#faq .indent { padding-left: 1em; text-indent: -1em;}

/* スクロールバーの装飾 */
#faq .scroll::-webkit-scrollbar { width: 8px; height: 8px;}
#faq .scroll::-webkit-scrollbar-track {background-color: rgba(216, 216, 216, 0.6);}
#faq .scroll::-webkit-scrollbar-thumb {background-color: rgba(102,102,102,0.80);}
/**========================================**/
/* MANTAの推進力・スピード・稼働時間は？ */
#faq .area03 table { width: 455px;}

@media screen and (max-width:499px){
    #faq .area03 .scroll { overflow-x: scroll; padding-bottom: 15px;}
}

/**========================================**/
/* Manta 水中スクーターに関する主な不具合と対処法 */
#faq .area12  table { width: 1000px;}

@media screen and (max-width:999px){
    #faq .area12 .scroll { overflow: scroll; max-height: 60vh; padding: 0 15px 15px 0;}
    #faq .area12 th { position: sticky;}
    #faq .area12 th::before{
        content: "";
        position: absolute; top: -1px; left: -1px;
        width: 100%; height: 100%;
        border: solid 1px #888;}
}



/* LastUp2025.11.04_kimata */