@charset "UTF-8";
/*共通*/
html{
    font-size: 100%;
}

body{
    margin-left: auto;
    margin-right: auto;
    line-height: 0;
}

main{
    max-width: 900px;/*最大の幅*/
    margin: auto;/*画像を中心にする*/
}

img{
    width:100%;
}

iframe{
    width: 100%;
    height: 100%;
}

a{
    text-decoration:none;
    color: #fff;
}

h1,h2,h3,p{
    display: none;
}

.iframe,.cta{
    position: relative;
}

.fv{
    position: relative;
}

.block{
    display: block;
    font-size: 200%;
    text-align: center;
    margin: 15% auto;
    color: #fa8119;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.footer{
    display: block;
    font-size: 40%;
    text-align: center;
    margin: 0 auto;
    padding: 3% 0;
    color: #fff;
    font-family: "noto-sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    background-color: #000;
    line-height: 1.6;
}

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


/*-----btn-----*/
.btn_1{
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 80%;
}

.btn_2{
    position: absolute;
    bottom: 2%;
    right: 10%;
    width: 80%;
}

.btn_3{
    position: absolute;
    bottom: 3.5%;
    right: 9%;
    width: 80%;
}

.btn_4{
    position: absolute;
    bottom: 5.5%;
    right: 10%;
    width: 80%;
}

.btn_5{
    position: absolute;
    bottom: 6.5%;
    right: 10%;
    width: 80%;
}

.btn_6{
    position: absolute;
    bottom: 6.5%;
    right: 10%;
    width: 80%;
}

a img:hover {
    transform: scale(0.9);
  }


/*-----iframe-----*/
.iframe-wrap{
    width: 92%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    position: absolute;
    top: 46%;
    right: 4%;
}

.iframe-wrap2{
    width: 92%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    position: absolute;
    top: 13%;
    right: 4%;
}

.iframe-wrap3{
    width: 92%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    position: absolute;
    top: 28.5%;
    right: 4%;
}

.iframe-wrap4{
    width: 92%;
    aspect-ratio: 16 / 16.2;
    margin: 0 auto;
    position: absolute;
    top: 44.5%;
    right: 4%;
}

.iframe-wrap5{
    width: 92%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    position: absolute;
    top: 69%;
    right: 4%;
}

.btn_sec{

    position: relative;
}

.btn_sp{
    position: absolute;
    margin: 0 auto;
    position: absolute;
    top: 11%;
    right: 0;
    left: 0;
}

.accordion{
    width: 90%;
    margin: 7% auto;
}

/* アコーディオンのヘッダー部分のスタイリング */
.accordion-header {
    position: relative; /* 矢印アイコンの位置調整のため */
    list-style: none; /* デフォルトの矢印を消す */
    transition: background-color 0.3s; /* 背景色の変化にアニメーションを適用 */
  }


 /* カスタム矢印のスタイル */
 .accordion-header::after {
    content: '▼';
    position: absolute;
    right: 2%;
    transition: transform 0.1s ease;
    color: #fff;
    top: 52%;
  }
  
  /* アコーディオンが開いている時の矢印のスタイル */
  .accordion[open] .accordion-header::after {
    transform: rotate(180deg); /* 矢印を180度回転 */
  }

  /* WebKitベースのブラウザでデフォルトの矢印を消す */
  .accordion .accordion-header::-webkit-details-marker {
    display: none;
  }




@media screen and (min-width:768px){/*-----pc-----*/
/*-----btn-----*/
.btn_1{
    bottom: 15%;
    right: 38%;
    width: 24%;
}

.btn_2{
    bottom: 5%;
    right: 34%;
    width: 32%;
}

.btn_3{
    bottom: 2%;
    right: 38%;
    width: 24%;
}

.btn_4{
    bottom: 5%;
    right: 34%;
    width: 32%;
}

.btn_5{
    bottom: 6.5%;
    right: 34%;
    width: 32%;
}

.btn_6{
    bottom: 5%;
    right: 34%;
    width: 32%;
}


/*-----iframe-----*/

.iframe-wrap2{
    width: 45%;
    aspect-ratio: 16 / 9;
    top: 12.5%;
    right: 27%;
}

.iframe-wrap3{
    width: 45%;
    aspect-ratio: 16 / 9;
    top: 30%;
    right: 27%;
}

.iframe-wrap4{
    width: 45%;
    aspect-ratio: 16 / 9;
    top: 48.3%;
    right: 27%;
}

.iframe-wrap5{
    width: 45%;
    aspect-ratio: 16 / 9;
    top: 66.5%;
    right: 27%;
}

.accordion {
    width: 36%;
    margin: 2% auto;
}

.sec-9{
    padding-bottom: 2.5%;
}

.block {
    font-size: 250%;
    margin: 6% auto;
}
.footer{
    padding: 1% 0;
}
}