@charset "UTF-8";

/* ------------------初期設定------------------ */

html {
    overflow-y: scroll;
}

body{
    margin: 0 auto;
    line-height: 1.5;
	font-family: 'Noto Sans JP', sans-serif;
	font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
	width: 100%;
    height: auto;
    overflow-x: hidden;
    position: relative;
	width: 100%;
    height: auto;
	margin: 0 auto;
    z-index: 1;
}

.main.fixed {
    position: fixed;
}

.mainimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/back.webp) repeat center / contain;
    z-index: -2;
}
.mainimg.fixed {
    position: fixed;
}

.inner {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.visual {
    display: block;
}

.visual2500 {
    display: none;
    width: 100%;
}

main p {
    font-size: min(2.18vw, 24px);
}

.pc{ display: block;}

.sp{ display: none;}


ul {
    padding: 0;
    list-style-type: none;
}


/* ------------------ ヘッダー (サウンドon&off) ------------------ */

#header {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #FFDD00;
    z-index: 99;
    transform: translateY(0);
    transition: 1s .5s ease;

}
#header.open {
    transform: translateY(-101%);
}

.sound {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 修正 */
.sound_inner {
    position: absolute;
    top: 45%;
    left: 50%; 
    transform: translate(-50% , -50%);
    z-index: 2;
    width: 35%;
    min-width: 400px;
    max-width: 540px;
    height: auto;
    aspect-ratio: 1 / 1.1;
}

.sound_bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #FFDD00;
}
#header::after {
    position: absolute;
    content: '';
    bottom: 4%;
    left: 0;
    width: 100%;
    /* height: 70px; */
    height: clamp(20px, 6vw, 50px);
    height: min(5vh , 50px);
    background:  url(../img/open-sound/nawa.webp) repeat bottom / contain;
}

.sound_wrap {
    width: 75%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
.sound_wrap img {
    width: 100%;
    height: auto;
}

/* 修正 */
.sound_img {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto 25px auto;
}
.sound_img img {
    width: 100%;
    height: auto;
}

/* サウンド力士 */
.sound_rikishi { 
    width: 100%;
    height: 100%;
}
.sound_rikishi .rikishi_face {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 64.5%;
    will-change: transform;
    /* animation: sound_rikishi 3.5s ease-in-out infinite; */
}

.sound_rikishi .rikishi_face img{
    display: block;
    width: 100%;
    transform-origin: center center;
    animation: sound_rikishi 3.5s ease-in-out infinite;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@keyframes sound_rikishi {
    0% {
        transform: rotate(-5deg);
    }
    25% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(-5deg);
    }    
}

.sound_rikishi .rikishi_body {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
}

/* 音符 */
.sound_img img.note {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%) rotate(0);
    height: 15%;
    width: auto;
}
/* 音符1 */
.sound_img img.note.note01 {
    top: 30%;
    left: 6%;
    animation: note01 3.5s ease-in-out infinite;
}
@keyframes note01 {
    0% {
        transform: translate(-50% , -50%) rotate(0);
    }
    25% {
        transform: translate(-50% , -50%) rotate(-20deg);
    }
    50% {
        transform: translate(-50% , -50%) rotate(0deg);
    }
    75% {
        transform: translate(-50% , -50%) rotate(-20deg);
    }
    100% {
        transform: translate(-50% , -50%) rotate(0);
    }
    
}

.sound_img img.note.note02 {
    top: 16%;
    right: 15%;
    left: auto;
    transform: translate(50%, -50%);
    animation: note01 3.5s ease-in-out infinite;
}

.sound_img img.note.note03 {
    top: 42%;
    right: -12%;
    left: auto;
    transform: translate(50%, -50%);
    animation: note01 3.5s ease-in-out infinite;
}

/* ボタン */
.sound_button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: auto;
    display: flex;
    gap: 2em;
}

.sound_off,
.sound_on {
    position: relative;
    width: 50%;
    height: auto;
}
.sound_off img,
.sound_on img {
    width: 100%;
}
.sound_off:hover:before,
.sound_on:hover:before,
.sound_off.active:before,
.sound_on.active:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../img/open-sound/sound_button_off02.webp) no-repeat center / contain;
}
.sound_on:hover:before,
.sound_on.active:before {
    background: url(../img/open-sound/sound_button_on02.webp) no-repeat center / contain;
}



/* ------------------メイン------------------ */

#fv {
    position: relative;
    width: 100%;
    height: auto;
}
/* 修正 */
#fv::after {
    position: absolute;
    content: '';
    bottom: -40%;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, rgba(201, 189, 166, 0) 50%, rgba(201, 189, 166, 1) 100%);
}

.mv {
    position: relative;
}

.visual {
    width: 100%;
    height: 100%;
}

/* 修正 */
.fv_inner {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    z-index: 1;
    aspect-ratio: 16 / 9;
}
.fv_wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.visualdodai {
    position: absolute;
    display: block;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-5%);
}

.title {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.smoke01 {
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translate(-50%, 0) scale(1);
    width: 30vw;
    height: auto;
    aspect-ratio: 1 / 1;
}


.smoke01_inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.smoke01 img {
    position: absolute;
    bottom: 0;
    width: 50%;
    height: auto;
    opacity: 0;

}

.smoke01_1 {
    opacity: 0;
}
.active .smoke01_1 {
    left: 0;
    animation: smoke 2s 1s  ease-in-out forwards;
}
.active .smoke01_2 {
    right: 0;
    animation: smoke2 2s 1s  ease-in-out forwards;

}
@keyframes smoke {
    50% {opacity: 0;
        transform: translate(0, 0) scale(1 , 1) rotate(0);
    }


    85% {opacity: 1;
        transform: translate(0, 0) scale(1.2 , 1) rotate(0);
    }
    
    100% {opacity: 0;
        transform: translate(-20%, -30%) scale(1.5 , 1) rotate(20deg);
    }
}
@keyframes smoke2 {
    50% {opacity: 0;
        transform: translate(0, 0) scale(1 , 1) rotate(0);
    }
    85% {opacity: 1;
        transform: translate(0, 0) scale(1.2 , 1) rotate(0);
    }
    
    100% {opacity: 0;
        transform: translate(20%, -30%) scale(1.5 , 1) rotate(-20deg);
    }
}




.sikona {
    position: absolute; 
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 9%;
    height: auto; 
    transform-origin: bottom;
    opacity: 0;
}

.active .sikona {
    animation: title 2s .2s ease forwards;
}
@keyframes title {
    0%{top: -20%;
        opacity: 0;
        transform:  translate(-50%, -100%) scale(1, 1);
    }

    50%{top: -20%;
        opacity: 0;
        transform:  translate(-50%, -100%) scale(1, 1);
    }
    60%{top: 42%;
        opacity: 1;
        transform:  translate(-50%, -50%) scale(1, 0.8);
    }

    90%{top: 30%;
        opacity: 1;
        transform:  translate(-50%, -50%) scale(1, 1);
    }

    100%{top: 42%;
        opacity: 1;
        transform:  translate(-50%, -50%) scale(1, 1);

    }
}

.left, .riglt {
    width: 40%;
}


.left {
    position: absolute;
    transform: translate(-50%,-50%);
    top: 45%;
    left: -50%;                                                                         
    height: auto;
    transition: 2.8s 1.2s all ease-in-out;
    z-index: 17;
}
.left img {
    width: 100%;
}
.active .left {
    left: 27%;
    width: 39%;                                                                         
}

.riglt {
    position: absolute;
    transform: translate(50%,-50%);
    top: 45%;
    right: -50%;
    height: auto;
    transition: 2.8s 1.2s all ease-in-out;
    z-index: 17;
}
.riglt img {
    width: 100%;
}
.active .riglt {
    right: 26%;
}

/* ------------------メニュー------------------ */

.yohaku00 {
    padding-top: min(25vw, 480px);
}

.reverse .menu {
    width: 65.2%;
}

.menu {
    display: flex;
    margin: 0 auto;
    gap: 20px;
    width: 75%;
}

.menu li {
    width: 100%;
}

.menu li a {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 76 / 231;
}

.menu07 {
    background: url(../img/menu01_a.webp) no-repeat center / contain;
}
.menu07:hover {
    background: url(../img/menu01_b.webp) no-repeat center / contain;
}

.menu06 {
    background: url(../img/menu02_a.webp) no-repeat center / contain;
}
.menu06:hover {
    background: url(../img/menu02_b.webp) no-repeat center / contain;
}

.menu05 {
    background: url(../img/menu03_a.webp) no-repeat center / contain;
}
.menu05:hover {
    background: url(../img/menu03_b.webp) no-repeat center / contain;
}

.menu04 {
    background: url(../img/menu04_a.webp) no-repeat center / contain;
}
.menu04:hover {
    background: url(../img/menu04_b.webp) no-repeat center / contain;
}
    
.menu03 {
    background: url(../img/menu05_a.webp) no-repeat center / contain;
}
.menu03:hover {
    background: url(../img/menu05_b.webp) no-repeat center / contain;
}

.menu02 {
    background: url(../img/menu06_a.webp) no-repeat center / contain;
}
.menu02:hover {
    background: url(../img/menu06_b.webp) no-repeat center / contain;
}

.menu01 {
    background: url(../img/menu07_a.webp) no-repeat center / contain;
}
.menu01:hover {
    background: url(../img/menu07_b.webp) no-repeat center / contain;
}

/* ------------------ロゴタイトル------------------ */

.lt {
    position: relative;
    margin-top: min(25vw, 480px);
}

.smoke_right,
.smoke_left {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: -1;
}
.smoke_right {
    right: 0;
}
.smoke_left {
    left: 0;
}

.smoke_inner {
    position: relative;
    width: 100%;
    height: 100%;
}
              
.smoke_right img,
.smoke_left img {
    position: absolute;
    width: 100%;
    transform: translate(0 , 0);
}
/* 煙 右 */
.smoke_right img:nth-child(1) {
    top: 0;
    right: 0;
    animation: smoke_li_r 10s ease infinite;
}
.smoke_right img:nth-child(2) {
    top: 37%;
    right: 0;
    animation: smoke_li_r 20s ease infinite;
}
.smoke_right img:nth-child(3) {
    top: 63%;
    right: 0;
    animation: smoke_li_r 15s ease infinite;
}
/* 煙 左 */
.smoke_left img:nth-child(1) {
    top: 4%;
    width: 70%;
    left: 30%;
    animation: smoke_li_l 20s ease infinite;
}
/* 修正 */
.smoke_left img:nth-child(2) {
    top: 20%;
    left: -43%;
    width: 120%;
    animation: smoke_li_l 10s ease infinite;
}
.smoke_left img:nth-child(3) {
    top: 50%;
    left: -25%;
    animation: smoke_li_r 15s ease infinite;
}
@keyframes smoke_li_r {
    0% {
        transform: translate(0 , 0);
    }
    50% {
        transform: translate(10% , 0);
    }
    100% {
        transform: translate(0 , 0);
    }  
}
@keyframes smoke_li_l {
    0% {
        transform: translate(0 , 0);
    }
    50% {
        transform: translate(-10% , 0);
    }
    100% {
        transform: translate(0 , 0);
    }  
}


.wrrap02 {
    display: flex;
    justify-content: center;
}
.logo {
    width: 75%;
    height: auto;
    text-align: center;
}
.logo img {
    width: 100%;
    height: auto;
}

.logo img:nth-child(2) {
    width: 75%;
    margin: 0 auto;
    margin-top: 30px;
}

/* ------------------間01------------------ */

.back01 {
    margin-top: min(10vw, 130px);
    margin-bottom: min(11vw, 200px);
    background: url(../img/back_sub.webp) no-repeat center bottom / cover;
    width: 100%;
    height: 52vw;
    max-height: 600px;
}

.explan {
    position: relative;
    margin: 0 auto;
    top: 0;
    height: 100%;
}
.movie {
    margin: 0 auto;
    width: 70%;
    height: auto;
    aspect-ratio: 16 / 9;
}
iframe {
    width: 100%;
    height: 100%;
}

.kari {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    box-shadow: 5px 5px 5px 1px #000;
    width: 50%;
    height: auto;
    opacity: 0;
}
.active .kari {
    animation: kari 2.5s 5s ease forwards;
    opacity: 0;
}
@keyframes kari {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.rikisi {
    position: absolute;
    bottom: 0;
    left: 26%;
    transform: translateX(-50%);
    width: 59.5vw;
    max-width: 650px;
    height: auto;
}
.active.rikisi {
    animation: rikisi 3s 5s ease forwards;
}
@keyframes rikisi {
    0% { 
        opacity: 1;
        transform: translateX(-50%);
    }
    100% { 
        opacity: 0; 
        transform: translateX(100%);
    }
}

.mozi {
    position: absolute;
    top: 5%;
    right: 0;
}

.test {
    writing-mode: vertical-rl;
    color: #fff;
    line-height: 2;
    text-shadow: 1px 1px 2px #000;
    font-family: "kozuka-mincho-pro", serif;
    font-weight: 700;
    font-size: min(2.18vw, 24px);
    width: 12em;
    transform: translateX(100%);
    transition: linear 5s;
    overflow: hidden;
}
.active.test {
    transform: translateX(0);
}

.test img{
    width: 100%;
    height: auto;
    transform: translateX(-100%);
    transition: linear 5s;
}

.active.test img{
    transform: translateX(0);
}

.test span {
    display: inline-block;
    margin-top: -1.6em;
    width: 1em;
    height: 1em;
}

/* ------------------日付------------------ */

.back02 {
    padding-top: clamp(100px , 11vw, 200px);
    padding-bottom: clamp(100px, 11vw, 200px);
}

.wrrap {
    position: relative;
    display: flex;
    justify-content: center;
    height: 57vw;
    max-height: 545px;
}

.yohaku {
    padding-top: clamp(100px , 11vw, 200px);
    padding-bottom: clamp(100px, 11vw, 200px);
}

.date {
    position: relative;
    width: 58%;
    max-width: 575px;
    height: auto;
}
.date img {
    width: 100%;
}

/* 修正 */
.date_s {
    position: absolute;
    width: 550px;
    height: auto;
    margin: 0 auto;
    top: 70%;
    aspect-ratio: 779 / 136;
    perspective: 1000px;
}

.date_s .card-wrap{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: ease 0.5s 2s;
    display: block;
}

.card-front,
.card-back{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-front{
    background: url(../img/day_start.webp) no-repeat center / contain;
}

.card-back{
    background: url(../img/day_start_b2.webp) no-repeat center / contain;
    transform: rotateX(180deg);
}

.date_s .card-wrap:hover .card-front{
    background: url(../img/day_start_b.webp) no-repeat center / contain;
}

.date_s .card-wrap:hover .card-back{
    background: url(../img/day_start2.webp) no-repeat center / contain;
}


@keyframes btn_rotate {
    20% {
        transform: rotateX(0);
    }
    80%{
        transform: rotateX(180deg);
    }
    100%{
        transform: rotateX(180deg);
    }
}
@keyframes btn_rotate2 {
    20% {
        transform: rotateX(180deg);
    }
    80% {
        transform: rotateX(0);
    }
    100% {
        transform: rotateX(0);
    }
}
/* 修正ここまで */

.date_s a:hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/day_start_b.webp) no-repeat center / contain;
}

.date_s a:hover::before,
.date_s a:hover::after{
    opacity: 0;
}



/* ------------------概要------------------ */

.yellow {
    position: relative;
    width: 100%;
    height: 31vw;
    max-height: 341px;
    margin: min(7vw, 70px) 0;
}
.yellow::before {
    position: absolute;
    content: '';
    background: #FCDE35;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
}

#section01 .inner {
    position: relative;
    height: 100%;
}

.naming {
    width: 80%;
    margin: 0 auto;
}

.title_sub05 {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 100%;
    height: auto;
}

.cont01 {
    position: absolute;                                                         
    top: -8%;
    left: 0;
    width: 11vw;
    max-width: 121px;
    height: auto;
}
.cont01 img {
    width: 100%;
    height: auto;
}

.overview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-65%, -50%);
    width: 20%;
    height: 100%;
}

.card01,
.card02,
.card03,
.card04,
.card05 {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%,-50%);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);                       
}
.card01,
.card02,
.card04 {
    aspect-ratio: 7 / 9;
    width: 90%;
    height: auto;
}

.card03,
.card05 {
    aspect-ratio: 14 / 21.6;
    width: 100%;
    height: auto;
}

.active .card05 {
    top: 10%;
    left: -110%;
    transform: rotate(-15deg);
    transition: 1s all ease-in-out;

}
.active .card04 {
    top: 40%;
    left: 30%;
    transform: rotate(-15deg);
    transition: 1s all ease-in-out;

}
.active .card03 {
    top: -20%;
    left: -10%;
    transform: rotate(10deg);
    transition: 1s all ease-in-out;

}
.active .card02 {
    top: 6%;
    left: 120%;
    transform: rotate(10deg);
    transition: 1s all ease-in-out;

}
.active .card01 {
    top: 35%;
    left: 200%;
    transform: rotate(30deg);
    transition: 1s all ease-in-out;

}

.sentence01 p {
    line-height: 1.8;
    text-align: justify;
}

/* ------------------取組------------------ */

.explan01 {
    position: relative;
    text-align: center;
    margin-bottom: min(5vw, 60px);
}

.explan01_img {
    width: 70%;
    height: auto;
}

.cont02 {
    position: absolute;
    top: -8%;
    right: 0;
    transform: translate(0,0);
    width: 11vw;
    max-width: 121px;
}
.cont02 img {
    width: 100%;
    height: auto;
}

.about {
    position: relative;
    height: auto;
    width: 100%;
    margin: 14px auto 0;
}

.about::before{
    content: '←scroll';
    position: absolute;
    bottom: 102%;
    right: 15vw;
    font-size: 14px;
}

.clear {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 77vw;
    max-height: 320px;
    pointer-events: none;
}
.clear img {
    height: 100%;
}

.word_yoko {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    height: 77vw;
    max-height: 320px;
    box-sizing: initial; 
    min-width: auto;
}

.word_yoko:last-child {
    padding-left: 10%;
}

.word_yoko p {
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin: 30px 0;
    line-height: 1.5;
}
.word {
    overflow-x: scroll;
    box-sizing: initial; 
    min-width: auto;
    text-align: right;
}

.word li{
    width: 1520px;
    height: 380px;
    display: block;
    padding: 10px 0 80px 0;
    box-sizing: border-box;
}

.word li img{
    width: auto;
    height: 100%;
    object-fit: contain;
    display: block;
    padding:0 15vw 0;
}



/* スクロールバーの幅と高さを設定する */
.word::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #fff;
  }
  /* スクロールバーの形を設定する */
  .word::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
  }
  /* スクロールバーの色を設定する */
  .word::-webkit-scrollbar-thumb {
    --bg-opacity: 1;
    background-color: #67468F;
  }
  
.word_yoko img {
    height: 65%;
    padding-left: 4%;
    box-sizing: initial; 
    min-width: auto;
}

.arrow {
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5%;
    width: 3%;
    max-width: 50px;
}

.torituke {
    margin-top: min(5vw, 60px);
    max-width: 880px;
}

.hosoku {
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin: 0 auto;
}


.hosoku-mozi {
    position: relative;
    display: flex;
    justify-content: right;
    width: 90%;
    margin-left: 10%;
}

.hosoku p {
    position: relative;
    padding: 25px 25px 25px 0;
    width: 85%;
    line-height: 1.8;
    margin-left: 10%;
}

.hosoku-waku{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.hosoku-img {
    position: absolute;
    bottom: -1%;
    left: 0;
    width: 30%;
    height: auto;
    transform: translateX(-55%);
}

/* -------------------------------力士 回転------------------------------- */


#scroll { 
    position: fixed;
    z-index: 100;
    bottom: 10px;
    right: 10px;
    font-size: 20px;
}

#section03 {
    position: relative;
    width: 100%;
    /* height: 250vh; */
    height: auto;
    padding: 0;
}
#section03.fixed {
    height: auto;
}

#rotate,
#rotate_2 {
    width: 100%;
    height: auto;
    display: none;
}

#rotate.active,
#rotate_2.active {
    display: block;
}

#rotate_inner {
    width: 100%;
    height: auto;
    max-height: 1080px;
    aspect-ratio: 16 / 9;
    /* margin-bottom: 1000px; */
    margin-bottom: 150px;
}
/* 修正 */
#rotate_inner.fixed {
    position: fixed;
    top: 0;
    left: 0;
}

#rotate_2.rotate_inner.fixed {
    position: relative;
}

.rotate_wrap {
    position: relative;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    max-width: 1248px;
    height: 100%;
}

/* 背景山 */
.mountain_bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    transform: translateY(25%);
    width: 100vw;
    height: auto;
    max-height: 300px;
} 
.mountain_bg img {
    width: 100%;
    height: auto;
}


/* 山 */
.mountain {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 140%;
    height: auto;
}

.mountain img {
    width: 100%;
    height: auto;

}


/* 波 */
.wave {
    position: absolute;
    z-index: 4;
    top: 72%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 100vw;
    height: auto;
}
.wave img {
    width: 100%;
    height: auto;
}


/* 力士 */
.rotate_rikishi {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;

}
.rotate_rikishi_wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.rotate_rikishi img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 100%;
    height: auto;
    transition: 1s all ease;
    filter: brightness(0);
}

.rotate_rikishi img.rikishi_text {
    z-index: -1;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;

}


/* 力士初期位置 */
/* 力士01 */
.rotate_rikishi#r1 {
    z-index: 7;
    transform: translate(0, 14%) scale(.6);

}
.rotate_rikishi#r1 img.overlap {
    filter: brightness(1);
    z-index: 2;
}
.rotate_rikishi img.shadow {
    transform: translate(-50%, -50%);
    z-index: 1;
    transform-origin: bottom center;
    top: 50%;
    left: 50%;
    transition: 1s 1s all ease;
    opacity: 0;

}
.rotate_rikishi#r1 img.shadow {
    opacity: 1;
}


/* 力士02 */
.rotate_rikishi#r2 {
    transform: translate(35%, -6%) scale(.3);

}
.rotate_rikishi#r2 img {
    filter: brightness(.3);
}


.rotate_rikishi#r1 img.rikishi_text.rikishi_text02 {
    transform: translate(-50%, -50%) scale(.8);
    top: 15%;
    left: 47%;
    opacity: 1;
}

/* 力士03 */
.rotate_rikishi#r3 {
    transform: translate(7%, -6%) scale(.15);
    transition: .1s 1s z-index ease;


}
.rotate_rikishi#r3 img {
    filter: brightness(0);
}

.rotate_rikishi#r1 img.rikishi_text.rikishi_text03 {
    transform: translate(-50%, -50%) scale(.8);
    top: 9%;
    left: 47%;
    opacity: 1;
}

/* 力士04 */
.rotate_rikishi#r4 {
    transform: translate(-6%, -6%) scale(.15);
    transition: .1s 1s z-index ease;


}
.rotate_rikishi#r4 img {
    filter: brightness(0);
}

.rotate_rikishi#r1 img.rikishi_text.rikishi_text04 {
    transform: translate(-50%, -50%) scale(.8);
    top: 9%;
    left: 47%;
    opacity: 1;
}


/* 力士05 */
.rotate_rikishi#r5 {
    transform: translate(-35%, -6%) scale(.3);
    transition: .01s .85s z-index ease;


}
.rotate_rikishi#r5 img {
    filter: brightness(.3);
}

.rotate_rikishi#r1 img.rikishi_text.rikishi_text05 {
    transform: translate(-50%, -50%) scale(.8);
    top: 9%;
    left: 47%;
    opacity: 1;
}


#rotate_sp {
    display: none;
}


/* 目次 */

.mokuji {
    position: absolute;
    bottom: 0;
    left: 15%;
    transform: translate(-50%); 
    z-index: 8;
    width: 11vw;
    max-width: 121px;
    height: auto;
}
.mokuji img {
    width: 100%;
    height: auto;
}


/* ------------------力士集合------------------ */
/* ------------------集合------------------ */

/* 修正 */
#set {
    width: 100%;
    height: auto;
}
.active #set {
    opacity: 1;
}
#set.active2 {
    position: relative;
}

#set .inner02 {
    /* width: 90%; */
    width: 80%;
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 1 / 1 ;
}
.set_wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.set_wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
}

/* --------------煙-------------- */

.set_wrap img.kem_a {
    position: absolute;
    bottom: 2%;
    right: -10%;
    width: 50%;
    height: auto;
    z-index: 60;
    opacity: 0;                                                                                                                                                          
}
.active .kem_a,
.active .kem_b,
.active .kem_c,
.active .kem_d {
    animation: 1.5s 1s kemuri_r linear forwards;
    opacity: 0;
}
@keyframes kemuri_r {
    0% { right: 0; opacity: 0;}
    25% { right: -5%; opacity: 1;} 
    50% { right: -10%; opacity: .5;}
    100% { right: -20%; opacity: 0;} 
}
.active .kem_e,
.active .kem_f,
.active .kem_g,
.active .kem_h {
    animation: 1.5s 1s kemuri_l linear forwards;
    opacity: 0;
}
@keyframes kemuri_l {
    0% { left: 0; opacity: 0;}
    25% { right: -5%; opacity: 1;} 
    50% { left: -10%; opacity: .5;}
    100% { left: -20%; opacity: 0;} 
}

.set_wrap img.kem_b {
    position: absolute;
    bottom: 15%;
    right: -10%;
    width: 50%;
    height: auto;
    z-index: 20;
    opacity: 0;
}
.set_wrap img.kem_c {
    position: absolute;
    top: 35%;
    right: -5%;
    width: 12%;
    height: auto;
    z-index: 20;
    opacity: 0;
}
.set_wrap img.kem_d {
    position: absolute;
    top: 20%;
    right: 5%;
    width: 30%;
    height: auto;
    z-index: 10;
    opacity: 0;
}
.set_wrap img.kem_e {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 30%;
    height: auto;
    z-index: 20;
    opacity: 0;
}
.set_wrap img.kem_f {
    position: absolute;
    bottom: 25%;
    left: -5%;
    width: 20%;
    height: auto;
    z-index: 20;
    opacity: 0;
}
.set_wrap img.kem_g {
    position: absolute;
    bottom: 10%;
    left: -10%;
    width: 40%;
    height: auto;
    z-index: 20;
    opacity: 0;
}
.set_wrap img.kem_h {
    position: absolute;
    bottom: 5%;
    left: -10%;
    width: 20%;
    height: auto;
    z-index: 60;
    opacity: 0;
}

/* --------------影-------------- */

.kage_don {
    opacity: 0;
}

.active .kage_don {
    animation: .1s 1s shadow linear forwards;
    opacity: 0;
}
@keyframes shadow {
    0% { opacity: 0;}
    100% { opacity: 1;} 
}

.set_wrap img.kage_c {
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 45%;
    height: auto;
}
.set_wrap img.kage_a {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-45%);
    width: 35%;
    height: auto;
}
.set_wrap img.kage_b {
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: 48%;
    height: auto;
}

/* --------------どん-------------- */

.set_wrap.active img.don00 {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0;
}
.set_wrap.active  img.don00 {
    animation: don .2s 2s ease forwards;
}
@keyframes don {
    0% {
      opacity: 0;
      transform: scale(3) translateY(0);
    }
    100% {
        opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

/* --------------力士-------------- */

.rikisi_don {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1);
    /* background-color: #eee; */
}
.active .rikisi_don{
    animation: syugo 1s linear forwards;
}
@keyframes syugo {
    0% { transform: scale(3); opacity: 0;}
    25% { transform: scale(1); opacity: .5;} 
    50% { transform: scale(2); opacity: 1;}
    85% { transform: scale(1.5); opacity: 1;} 
    100% {transform: scale(1); opacity: 1;} 
}

.set_wrap img.set-rikisi01 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    width: 36%;
    height: auto;
    z-index: 50;
    opacity: 1;
}
.set_wrap img.set-rikisi02 {
    position: absolute;
    bottom: 13%;
    right: 5%;
    width: 47%;
    height: auto;
    z-index: 40;
    opacity: 1;

}
.set_wrap img.set-rikisi03 {
    position: absolute;
    bottom: 9%;
    left: 0;
    width: 45%;
    height: auto;
    z-index: 30;
    opacity: 1;

}
.set_wrap img.set-rikisi04 {
    position: absolute;
    top: 15%;
    right: 15%;
    width: 42%;
    height: auto;
    z-index: 20;
    opacity: 1;

}
.set_wrap img.set-rikisi05 {
    position: absolute;
    top: 0;
    left: 13%;
    width: 42%;
    height: auto;
    z-index: 20;
    opacity: 1;
}


.rikishi_don_shadow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.rikishi_don_shadow img.set-rikisi01{
    width: 54%;
    left: 49%;
}
.rikishi_don_shadow img.set-rikisi02{
    width: 61%;
    left: 41%;
}
.rikishi_don_shadow img.set-rikisi03{
    width: 61%;
    left: -7%;
}
.rikishi_don_shadow img.set-rikisi04{
    width: 65%;
    right: 1%;
    top: -7%;
}
.rikishi_don_shadow img.set-rikisi05{
    width: 56%;
    left: 11%;
    top: -1%;
}

/* -----------煙----------- */

.set_wrap img.kem_a {
    position: absolute;
    bottom: 2%;
    right: -10%;
    width: 50%;
    height: auto;
    z-index: 60;
    opacity: 0;                                                                                                                                                          
}
.active .kem_a,
.active .kem_b,
.active .kem_c,
.active .kem_d {
    animation: 1.5s 1s kemuri_r linear forwards;
    opacity: 0;
}
@keyframes kemuri_r {
    0% { right: 0; opacity: 0;}
    25% { right: -5%; opacity: 1;} 
    50% { right: -10%; opacity: .5;}
    100% { right: -20%; opacity: 0;} 
}
.active .kem_e,
.active .kem_f,
.active .kem_g,
.active .kem_h {
    animation: 1.5s 1s kemuri_l linear forwards;
    opacity: 0;
}
@keyframes kemuri_l {
    0% { left: 0; opacity: 0;}
    25% { right: -5%; opacity: 1;} 
    50% { left: -10%; opacity: .5;}
    100% { left: -20%; opacity: 0;} 
}

.set_wrap img.kem_b {
    position: absolute;
    bottom: 15%;
    right: -10%;
    width: 50%;
    height: auto;
    z-index: 20;
    opacity: 0;
}
.set_wrap img.kem_c {
    position: absolute;
    top: 35%;
    right: -5%;
    width: 12%;
    height: auto;
    z-index: 20;
    opacity: 0;
}
.set_wrap img.kem_d {
    position: absolute;
    top: 20%;
    right: 5%;
    width: 30%;
    height: auto;
    z-index: 10;
    opacity: 0;
}
.set_wrap img.kem_e {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 30%;
    height: auto;
    z-index: 20;
    opacity: 0;
}
.set_wrap img.kem_f {
    position: absolute;
    bottom: 25%;
    left: -5%;
    width: 20%;
    height: auto;
    z-index: 20;
    opacity: 0;
}
.set_wrap img.kem_g {
    position: absolute;
    bottom: 10%;
    left: -10%;
    width: 40%;
    height: auto;
    z-index: 20;
    opacity: 0;
}
.set_wrap img.kem_h {
    position: absolute;
    bottom: 5%;
    left: -10%;
    width: 20%;
    height: auto;
    z-index: 60;
    opacity: 0;
}


/* ------------------力士カード------------------ */

.sentence02 {
    display: flex;
    padding-top: min(11vw, 200px);
    margin: 0 auto;
    width: 85%;
    max-width: 1100px;
    height: auto;
}

.sentence02 img {
    width: 90%;
    margin: 0 auto;
}

.member {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: min(11vw, 200px);
    gap: 25px 0;
    justify-content: space-between;
    height: auto;
    width: 85%;
    margin: min(5vw, 60px) auto 0;
}

.member img {
    width: calc(100% / 5 - 20px);
    height: auto;
}
 */
/* -------------------------------一人相撲------------------------------- */

.simulator {
    position: relative;
    width: 100%;
    padding: 180px 0;
  }
  
  @media screen and (max-width: 768px) {
    .simulator {
      padding: 90px 0;
    }
  }
  
  .simulator .inner {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
  }
  
  .simulator .inner .rikishi-wrap {
    position: relative;
    width: 70%;
    background: url(../img/dohyou.webp) no-repeat bottom/contain;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  
  @media screen and (max-width: 768px) {
    .simulator .inner .rikishi-wrap {
      width: 100%;
    }
  }
  .cont04 {
    position: absolute;
    top: 0;
    right: -18%;
    transform: translate(0,0);
    width: 11vw;
    max-width: 121px;
}
.cont04 img {
    width: 100%;
    height: auto;
}
  
  .simulator .inner .rikishi-wrap .rikishi {
    width: 33%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  
  .simulator .inner .rikishi-wrap .dammy-area {
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 1.8;
    display: block;
  }
  
  .simulator .inner .cardmount-wrap {
    position: relative;
    width: 15%;
    display: block;
    margin: 0 auto 30px;
  }
  
  .simulator .inner .cardmount-wrap .cardmount {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .simulator .inner .cardmount-wrap .sendcard {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
    transform-origin: center;
    transform: rotate(0deg) translate(0, 0);
    opacity: 0;
    transition: linear 0.6s;
  }
  
  .simulator .inner .cardmount-wrap .sendcard.active {
    opacity: 0;
  }
  
  .simulator .inner .cardmount-wrap .sendcard.active:nth-of-type(2) {
    animation: send1 0.4s linear 0.1s 1 forwards;
    transform: rotate(30deg);
  }
  
  .simulator .inner .cardmount-wrap .sendcard.active:nth-of-type(3) {
    animation: send2 0.4s linear 0.1s 1 forwards;
    transform: rotate(20deg);
  }
  
  .simulator .inner .cardmount-wrap .sendcard.active:nth-of-type(4) {
    animation: send3 0.4s linear 0.1s 1 forwards;
    transform: rotate(10deg);
  }
  
  .simulator .inner .cardmount-wrap .sendcard.active:nth-of-type(5) {
    animation: send4 0.4s linear 0.1s 1 forwards;
    transform: rotate(-10deg);
  }
  
  .simulator .inner .cardmount-wrap .sendcard.active:nth-of-type(6) {
    animation: send5 0.4s linear 0.1s 1 forwards;
    transform: rotate(-20deg);
  }
  
  .simulator .inner .cardmount-wrap .sendcard.active:nth-of-type(7) {
    animation: send6 0.4s linear 0.1s 1 forwards;
    transform: rotate(-30deg);
  }
  
  @keyframes send1 {
    10% {
      opacity: 0;
    }
    60% {
      opacity: 1;
      transform: rotate(30deg) translate(-170%, 410%);
    }
    100% {
      opacity: 0;
      transform: rotate(30deg) translate(-170%, 410%);
    }
  }
  
  @keyframes send2 {
    10% {
      opacity: 0;
    }
    60% {
      opacity: 1;
      transform: rotate(20deg) translate(-103%, 305%);
    }
    100% {
      opacity: 0;
      transform: rotate(20deg) translate(-103%, 305%);
    }
  }
  
  @keyframes send3 {
    10% {
      opacity: 0;
    }
    60% {
      opacity: 1;
      transform: rotate(10deg) translate(-22%, 260%);
    }
    100% {
      opacity: 0;
      transform: rotate(10deg) translate(-22%, 260%);
    }
  }
  
  @keyframes send4 {
    10% {
      opacity: 0;
    }
    60% {
      opacity: 1;
      transform: rotate(-10deg) translate(22%, 260%);
    }
    100% {
      opacity: 0;
      transform: rotate(-10deg) translate(22%, 260%);
    }
  }
  
  @keyframes send5 {
    10% {
      opacity: 0;
    }
    60% {
      opacity: 1;
      transform: rotate(-20deg) translate(103%, 305%);
    }
    100% {
      opacity: 0;
      transform: rotate(-20deg) translate(103%, 305%);
    }
  }
  
  @keyframes send6 {
    10% {
      opacity: 0;
    }
    60% {
      opacity: 1;
      transform: rotate(-30deg) translate(170%, 410%);
    }
    100% {
      opacity: 0;
      transform: rotate(-30deg) translate(170%, 410%);
    }
  }

  #hand{
    touch-action: none!important;
  }
  
  .simulator .inner .textcard-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
  }
  
  @media screen and (max-width: 768px) {
    .simulator .inner .textcard-wrap {
      margin-bottom: 30px;
    }
  }
  
  .simulator .inner .textcard-wrap li {
    position: relative;
    width: 16%;
    cursor: pointer;
  }

/* .simulator .inner .textcard-wrap li .over-ray {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: none;
    z-index: 10;
}

.safari .simulator .inner .textcard-wrap li .over-ray{
    display: block;
} */
  
  .simulator .inner .textcard-wrap li .textcard {
    width: 100%;
    height: auto;
    box-sizing: content-box;
    border: solid 4px transparent;
    box-sizing: border-box;
    transform: translateY(0);
    opacity: 1;
    transition: ease-in-out 0.2s;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: manipulation;
  }
  
  .simulator .inner .textcard-wrap li .textcard.active {
    border: solid 4px #000;
  }
  
  @media screen and (max-width: 768px) {
    .simulator .inner .textcard-wrap li .textcard.active {
      border: solid 2px #000;
    }
  }
  
  .simulator .inner .textcard-wrap li .textcard.remove {
    transform: translateY(50%);
    opacity: 0;
  }
  
  @media screen and (max-width: 768px) {
    .simulator .inner .textcard-wrap li .textcard {
      border: solid 2px transparent;
    }
  }
  
  .simulator .inner .textcard-wrap li:hover {
    cursor: url("../img/cursor@2x.png") 16 16, pointer;
  }
  
  @media screen and (max-width: 768px) {
    .simulator .inner .textcard-wrap li {
      width: calc(100% / 6);
    }
  }
  
  .simulator .inner .textcard-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -30px;
    width: 40px;
    height: 51px;
    background: url(../img/cursor@2x.png) no-repeat center/contain;
    transition: linear 1s;
  }
  
  @media screen and (max-width: 768px) {
    .simulator .inner .textcard-wrap::after {
      width: 20px;
      height: 26px;
      bottom: -15px;
    }
  }
  
  .simulator .inner .textcard-wrap.gesture::after {
    animation: gesture1 1.5s linear 0.1s 1 forwards;
  }

  .simulator .inner .textcard-wrap.gesture::before{
    content: 'ドラッグでカード並び替えができます。';
    position: absolute;
    bottom: 103%;
    left: 0;
    font-size: 14px;
  }

   @media screen and (max-width: 768px) {
    .simulator .inner .textcard-wrap.gesture::before {
      font-size: 12px;
    }
  }
  
  @keyframes gesture1 {
    0% {
      opacity: 1;
    }
    33% {
      opacity: 1;
      transform: translateX(600%);
    }
    38% {
      opacity: 0;
      transform: translateX(600%);
    }
    40% {
      opacity: 0;
      transform: translateX(0);
    }
    45% {
      opacity: 1;
      transform: translateX(0);
    }
    78% {
      opacity: 1;
      transform: translateX(600%);
    }
    83% {
      opacity: 0;
      transform: translateX(600%);
    }
    100% {
      opacity: 0;
      transform: translateX(600%);
    }
  }

.simulator .inner .check-wrap{
    display: none;
}

@media screen and (max-width: 768px){
    .simulator .inner .check-wrap{
        display: flex;
        justify-content: space-between;
    }

    .simulator .inner .check-wrap .checkbtn{
        font-size: min(3.75vw,16px);
        font-weight: 600;
        width: 15%;
        color: #fff;
        background: #126b31;
        text-align: center;
        margin: 0 0.833%;
        cursor: pointer;
        border-radius: 0.3em;
        margin-bottom: 20px;
    }

    .simulator .inner .check-wrap .checkbtn:hover{
        cursor: url("../img/cursor@2x.png") 16 16, pointer;
    }
}
  
  .simulator .inner .name {
    width: 39%;
    display: block;
    margin: 0 auto;
    border: 0;
  }
  
  .simulator .inner .name img {
    width: 100%;
    height: auto;
  }
  
  .simulator .inner .name:hover {
    cursor: url("../img/cursor@2x.png") 16 16, pointer;
  }
  
  .simulator .modal-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
  }
  
  .simulator .modal-window.active {
    opacity: 1;
    pointer-events: all;
  }
  
  .simulator .modal-window .modal-back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
  }
  
  .simulator .modal-window .modal-inner {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    transform: translateY(5%);
  }
  
  .simulator .modal-window .modal-inner .modal-imgbox {
    position: relative;
    width: 100%;
  }
  
  .simulator .modal-window .modal-inner .modal-imgbox #result-rikishi {
    width: 100%;
    height: auto;
  }
  
  .simulator .modal-window .modal-inner .modal-imgbox .textcard-out-wrap {
    position: absolute;
    left: 10%;
    bottom: 2%;
    width: 80%;
    display: flex;
    justify-content: center;
  }
  
  .simulator .modal-window .modal-inner .modal-imgbox .textcard-out-wrap li {
    display: none;
    width: 15%;
  }
  
  .simulator .modal-window .modal-inner .modal-imgbox .textcard-out-wrap li img {
    width: 100%;
    height: auto;
  }
  
  .simulator .modal-window .modal-inner .modal-imgbox #close {
    position: absolute;
    right: 12%;
    bottom: 0;
    width: 6%;
    transform: translate(50%, 50%);
  }
  
  .simulator .modal-window .modal-inner .modal-imgbox #close img {
    width: 100%;
    height: auto;
  }
  
  .simulator .modal-window .modal-inner .modal-imgbox #close:hover {
    cursor: url("../img/cursor@2x.png") 16 16, pointer;
  }
  
  .simulator .modal-window .modal-inner .modalbtn-wrap {
    width: 70%;
    display: flex;
    justify-content: space-between;
    margin: 40px auto 0;
  }
  .simulator .modal-window .modal-inner .modalbtn-wrap button {
    border: 0;
    background: none;
  }
  
  .simulator .modal-window .modal-inner .modalbtn-wrap button, .simulator .modal-window .modal-inner .modalbtn-wrap a {
    width: 45%;
  }
  
  .simulator .modal-window .modal-inner .modalbtn-wrap button img, .simulator .modal-window .modal-inner .modalbtn-wrap a img {
    width: 100%;
    height: auto;
  }
  
  .simulator .modal-window .modal-inner .modalbtn-wrap button:hover, .simulator .modal-window .modal-inner .modalbtn-wrap a:hover {
    cursor: url("../img/cursor@2x.png") 16 16, pointer;
  }
  

/* ------------------横綱セット------------------ */

.bv {
    position: relative;
    padding-bottom: min(12vw, 220px);
    width: 100%;
    height: auto;
}
.bv-left {
    position: absolute;
    width: 60vw;
    max-width: 1250px;
    top: -10%;
    left: -25%;
    z-index: -1;
}
.bv-right {
    position: absolute;
    width: 60vw;
    max-width: 1210px;
    bottom: 5%;
    right: -30%;
    z-index: -1;
}

.set {
    position: relative;
    display: flex;
    justify-content: end;
    height: 54vw;
    max-height: 550px;
    width: 85%;
    margin: 0 auto;
}

.setmozi {
    position: absolute;
    top: 15%;
    left: 0;
    width: 55%;
}

.hasi {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 80%;
    height: auto;
}

.atm {
    display: flex;
    justify-content: end;
    align-items: flex-start;
    width: 25%;
}
.atm01 {
    width: 7vw;
    max-width: 72px;
    height: auto;
}

.atm02 {
    width: 9vw;
    max-width: 96px;
    height: auto;
    margin-left: 10%;
}

.hata {
    display: flex;
    justify-content: space-between;
    width: 85%;
    margin: min(8vw, 120px) auto 0;
}

.hata01 {
    display: flex;
    justify-content: space-between;
    width: 67%;
}

.hata02 {
    width: 45%;
    height: auto;
    align-content: end;
}
.hata02 span {
    padding-left: 4em;
}

.hata02 img {
    width: 100%;
}

.hata02 img.hata_width {
    width: 99%;
}

.hata02 p {
    margin-top: 15px;
    line-height: 1.8;
    text-align: center;
}

.hata03 {
    display: flex;
    justify-content: end;
    width: 33%;
}

.hatamozi {
    width: auto;
    height: 57vw;
    max-height: 622px;
}

.hata03 span {
    margin-left: 8%;
    width: 9vw;
    max-width: 96px;
    height: auto;
}

.size {
    text-align: left;
    line-height: 1.8;
}
.blank {
    padding-left: 3em;
}

/* -------------------------------写真------------------------------- */

.butai {
    position: relative;
    margin-top: min(20vw, 370px);
    margin-bottom: min(11vw, 200px);
    width: 100%;
    height: auto;
}
.marukage {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 74 / 31;
    height: 100%;
    width: auto;
    pointer-events: none;
    z-index: 1;
    opacity: .5;
}
.marukage img {
    height: 100%;
    width: 100%;
}

.splide__list {
    position: relative;
    top: 0;
    left: 0; 
    width: 100%;
    height: auto;
}

.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit:  cover;
}

.slider2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    z-index: 10;
}

.slider-inner {
    position: relative;
    width: 100%;
    height: 100%;
}
#slider-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(100% / 3);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
}
#slider-2 .splide__track {
    width: 100%;
    height: 100%;
}
#slider-2 .splide__list {
    height: 100%;
    background-color: #eee;
}
#slider-2 .splide__slide {
    height: 100%;
}
#slider-2 .splide__slide img {
    height: 100%;
    aspect-ratio: 0;
}

.sirowaku {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 32%;
    height: auto;
    pointer-events: none;
    z-index: 15;
}
.sirowaku img {
    width: 100%;
    height: auto;
}

/* -------------------------------仕様------------------------------- */

.siyou {
    position: relative;
    text-align: end;
    height: 40vw;
    max-height: 440px;
}

.box {
    position: relative;
    width: 100%;
    height: 100%;
}

.nakami {
    position: absolute;
    top: 2%;
    right: 2%;
    width: 60%;
    z-index: 5;
}
.nakami.active {
    animation: .5s 1s open02 linear forwards;                                                 
}
 
@keyframes open02 {
    0% { top: 2%; right: 2%;} 
    100% { top: -10%; right: 24%;} 
}
.shadow02 {
    position: absolute;
    top: -8.5%;
    right: 27%;
    width: 58%;
    z-index: 1;
    opacity: 0;
}
.shadow02.active {
    animation: 1s 1.6s nakami_s linear forwards;                                                 
}
@keyframes nakami_s {
    0% { opacity: 0;} 
    100% { opacity: 0.3;} 
}

.box_inner,
.box_slide {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    z-index: 10;
}
.box_slide.active {
    animation: .5s 1s open01 linear forwards;                                                 
}
@keyframes open01 {
    0% { top: 0; right: 0;} 
    100% { top: 0; right: 3%;} 
}
.shadow {
    position: absolute;
    top: 17%;
    right: -25%;
    width: 89%;
    z-index: 1;
    mix-blend-mode: multiply;
}


.cont05 {
    position: absolute;
    bottom: 8%;
    left: 0;
    width: 11vw;
    max-width: 121px;
    height: auto;
}
.cont05 img {
    width: 100%;
    height: auto;
}

/* 修正 */
.syousai {
    /* display: flex; */
    margin-top: 4vw;
    justify-content: space-between;
}

.detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    width: 100%;
    line-height: 1.8;
    letter-spacing: .2em;
    font-size: min(2.18vw, 24px);
}
.price {
    display: flex;
    align-items: baseline;
}
/* 修正箇所ここまで */

.tax {
    font-size: min(1.55vw, 16px);
}

.kanzi {
    display: inline-block;
}

/* 修正 */
.bntk {
    margin: 0 auto 4vw;
    width: 90%;
    height: auto;
    object-fit: contain;
}

.detail dt {
    text-align: center;
    align-content: center;
    width: 13%;
    border-bottom: solid 1px #000;
    border-right: solid 1px #000;
    padding: 2%;
    font-weight: normal;
}
.detail dt:last-of-type {
    border-bottom: none;
}

/* 修正 */
.detail dd {
    width: 87%;
    border-bottom: solid 1px #000;
    padding: 2%;
}

.detail dd:last-child {
    border-bottom: none;
}

.detail dd.herf01 {
    width: 31%;
    border-right: solid 1px #000;
}
.detail dd.herf02 {
    width: 56%;
}

/* -------------------------------絵師------------------------------- */

.smoke03 {
    position: relative;
    width: 100%;
}

.kumo01 {
    position: absolute;
    top: 15%;
    left: -10%;
    z-index: -1;
    width: 40%;
    opacity: 0.9;
    animation: 20s kumo-left01 linear infinite;
}
@keyframes kumo-left01 {
    0% { transform: translateX(0); opacity: 0.9;} 
    25% { transform: translateX(20%); opacity: .6;} 
    50% { transform: translateX(5%); opacity: 0.9;} 
    75%{ transform: translateX(25%); opacity: .6;}
    100% { transform: translateX(0); opacity: 0.9;}
}  

.kumo02 {
    position: absolute;
    top: 50%;
    left: -20%;
    z-index: -1;
    width: 50%;
    animation: 19s kumo-left02 linear infinite;
}
@keyframes kumo-left02 {
    0% { transform: translateX(0); opacity: 0.9;} 
    20% { transform: translateX(20%); opacity: .6;} 
    45% { transform: translateX(5%); opacity: 0.9;} 
    70%{ transform: translateX(25%); opacity: .6;}
    100% { transform: translateX(0); opacity: 0.9;}
}  

.kumo03 {
    position: absolute;
    left: -15%;
    bottom: -5%;
    z-index: -1;
    width: 30%;
    animation: 18s kumo-left01 linear infinite;
}

.kumo04 {
    position: absolute;
    top: 0;
    right: -5%;
    z-index: -1;
    width: 50%;
    animation: 21s kumo-right01 linear infinite;
}

.kumo05 {
    position: absolute;
    top: 40%;
    right: -15%;
    z-index: -1;
    width: 30%;
    animation: 19s kumo-right01 linear infinite;
}

.kumo06 {
    position: absolute;
    bottom: 10%;
    right: -5%;
    z-index: -1;
    width: 30%;
    animation: 20s kumo-right01 linear infinite;
}

@keyframes kumo-right01 {
    0% { transform: translateX(0); opacity: 0.9;} 
    25% { transform: translateX(-10%); opacity: .6;} 
    50% { transform: translateX(5%); opacity: 0.9;} 
    75%{ transform: translateX(-15%); opacity: .6;}
    100% { transform: translateX(0); opacity: 0.9;}
}  

@keyframes kumo-right02 {
    0% { transform: translate(10%,0); opacity: 1;}
    25% { transform: translate(30%,10%); opacity: .7;} 
    50% { transform: translate(10%,0); opacity: 1;}
    75%{ transform: translate(30%,-10%); opacity: .7;} 
    100% { transform: translate(10%,0); opacity: 1;} 
  }  

.kage05 {
    position: absolute;
    bottom: -2%;
    left: 52%;
    transform: translateX(-50%)  scale(1);
    display: block;
    text-align: center;
    z-index: -1;
    width: 20%;
    max-width: 220px;
    height: auto;
}
.active .kage05 {
    animation: 11s darumakage linear infinite;
    animation-iteration-count: 1;
    opacity: 1;
}
@keyframes  darumakage{
    0% { transform: translateX(-50%) scale(1.3,1)  rotate(0deg);
        transform-origin: left ; opacity: .2;} 

    15% { transform: translateX(-50%) scale(.8,1.5)  rotate(5deg);
        transform-origin: left; opacity: 1;} 

    30% { transform: translateX(-50%) scale(1.3,1)  rotate(0deg);
        transform-origin: left; opacity: .2;}

    45% { transform: translateX(-50%) scale(.8,1.5)  rotate(5deg);
        transform-origin: left; opacity: 1;}

    60% { transform: translateX(-50%) scale(1.3,1)  rotate(0deg);
        transform-origin: left; opacity: .2;}

    75% { transform: translateX(-50%) scale(.8,1.5)  rotate(5deg);
        transform-origin: left; opacity: 1;} 

    90% { transform: translateX(-50%) scale(1.3,1)  rotate(0deg);
        transform-origin: left; opacity: .2;} 

    95% { transform: translateX(-50%) scale(1);
        transform-origin: left; opacity: 1;}

    100% { transform: translateX(-50%) scale(1);
        transform-origin: left; opacity: 1;} 
  }  

.daruma {
    position: relative;
    text-align: center;
    width: 100%;
    height: 65vw;
    max-height: 350px;
}
.darumaimg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22vw;
    max-width: 242px;
    z-index: 10;
}
.active .darumaimg {
    transform-origin: bottom center;
    animation: daruma 11s ease infinite;
    animation-iteration-count: 1;
}
@keyframes daruma {
    0% { transform: translateX(-50%) rotate(-20deg);
        transform-origin: 50px bottom;
        }
    15% { transform: translateX(-50%) rotate(20deg);
        transform-origin: 100px bottom;
    }
    30% { transform: translateX(-50%) rotate(-20deg);
        transform-origin: 50px bottom;
    }
    45% { transform: translateX(-50%) rotate(20deg);
        transform-origin: 100px bottom;
    }
    60% { transform: translateX(-50%) rotate(-20deg);
        transform-origin: 50px bottom;
    }
    75% { transform: translateX(-50%) rotate(20deg);
        transform-origin: 100px bottom;
    }
    90% { transform: translateX(-50%) rotate(-20deg);
        transform-origin: 50px bottom;
    }
    100% {transform: translateX(-50%) rotate(0deg);}
}

.daruma_name {
    position: absolute;
    bottom: 0;
    right: 26%;
    width: 5%;
    z-index: 1;
}
.daruma_name img {
    width: 100%;
}

.cont06 {
    position: absolute;
    top: 0;
    right: 10%;
    transform: translate(0,0);
    width: 11vw;
    max-width: 121px;
}

.cont06 img {
    width: 100%;
    height: auto;
}

.rahu {
    display: block;
    margin: min(5vw, 60px) auto 0;
    margin-top: min(5vw, 60px);
    width: 80%;
}

.rahu_mozi {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
}

.sub {
    margin-top: min(3vw, 30px);
    max-width: 180px;
    width: 18vw;
}

.kodawari {
    margin-top: min(2vw, 20px);
    line-height: 1.8;
    text-align: justify;
}

/* -------------------------------なのった------------------------------- */

.yellow02 {
    margin-top: min(15vw, 250px);
    background: #FCDE35;
    width: 100%;
    height: 12vw;
    max-height: 242px;
    mix-blend-mode: multiply;
}

.hakke {
    position: relative;
    height: 100%;
}

.nanori {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(1,1);
    text-align: center;
    width: 45%;
    height: auto;
}

.nanori img {
    width: 100%;
}
.active .nanori {
    animation: nanori 2.5s 1s ease forwards infinite;
}
@keyframes nanori {
    0%,5%{ transform:translate(-50%,-50%) scale(1, 1);}
    40% { transform:translate(-50%,-50%) scale(.3, 2);}
    42% { transform:translate(-50%,-50%) scale(.4, 1.8);}
    44% { transform:translate(-50%,-50%) scale(.3, 2);}
    46% { transform:translate(-50%,-50%) scale(.4, 1.8);}
    48% { transform:translate(-50%,-50%) scale(.3, 2);}
    50% { transform:translate(-50%,-50%) scale(.4, 1.8);}
    52% { transform:translate(-50%,-50%) scale(.4, 1.8);}
    60% { transform:translate(-50%,-50%) scale(.3, 2);}
    70%,100% { transform:translate(-50%,-50%) scale(1,1);} 
}

.left_n {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-120%,-50%);
    width: 40%;
    height: auto;
    transition: 1s all ease-in-out;
}
.left_n img {
    width: 100%;
}
.active .left_n {
    animation: rikisi-l 2.5s 1s ease forwards infinite;
    left: 30%;
}
@keyframes rikisi-l {
    0% { left: 30%;} 
    5% { left: 42%;} 
    40% { left: 55%;transform: translate(-120%,-50%);} 
    42% { left: 52%;transform: translate(-120%,-50%) scale(1.05);}
    44% { left: 56%;transform: translate(-120%,-50%) scale(0.95);}
    46% { left: 53%;transform: translate(-120%,-50%) scale(1.05);}
    48% { left: 57%;transform: translate(-120%,-50%) scale(0.95);}
    50% { left: 52%;transform: translate(-120%,-50%) scale(1.05);}
    52% { left: 56%;transform: translate(-120%,-50%) scale(0.95);}
    54% { left: 53%;transform: translate(-120%,-50%) scale(1.05);}
    56% { left: 57%;transform: translate(-120%,-50%) scale(0.95);}
    58% { left: 53%;transform: translate(-120%,-50%) scale(1.05);}
    60% { left: 55%;transform: translate(-120%,-50%);} 
    70%,100% { left: 30%;} 
}

.riglt_n {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(120%,-50%);
    width: 40%;
    height: auto;
    transition: 1s all ease-in-out;
}
.riglt_n img {
    width: 100%;
}
.active .riglt_n {
    animation: rikisi-r 2.5s 1s ease forwards infinite;
    right: 30%;
}
@keyframes rikisi-r {
    0% { right: 30%;} 
    5% { right: 42%;} 
    40% { right: 55%;transform: translate(120%,-50%);} 
    42% { right: 52%;transform: translate(120%,-50%) scale(1.05)} 
    44% { right: 52%;transform: translate(120%,-50%) scale(0.95)} 
    46% { right: 52%;transform: translate(120%,-50%) scale(1.05)} 
    48% { right: 52%;transform: translate(120%,-50%) scale(0.95)} 
    50% { right: 52%;transform: translate(120%,-50%) scale(1.05)} 
    52% { right: 52%;transform: translate(120%,-50%) scale(0.95)} 
    54% { right: 52%;transform: translate(120%,-50%) scale(1.05)} 
    56% { right: 52%;transform: translate(120%,-50%) scale(0.95)} 
    58% { right: 52%;transform: translate(120%,-50%) scale(1.05)} 
    60% { right: 55%;transform: translate(120%,-50%);} 
    70%,100% { right: 30%;} 
}

/* -------------------------------メニュー02------------------------------- */

.yohaku02 {
    padding-top: min(24vw, 450px);
}

.menu08 {
    background: url(../img/menu08_a.webp) no-repeat center / contain;
}
.menu08:hover {
    background: url(../img/menu08_b.webp) no-repeat center / contain;
}

/* -------------------------------フッター------------------------------- */

#footer {
    padding-top: min(24vw, 450px);
    text-align: center;
}

.waka {
    width: 5%;
    max-width: 55px;
}

.himo{
    margin-top: 50px;
    width: 100%;
}

#display {
    position: fixed;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 20px;
}

 /* ------------------メディアクエリ1920px------------------  */

@media screen and (min-width: 1920px){

    /* -------------メイン-------------  */

        .fv_inner {
            top: 4%;
            left: 50%;
            transform: translate(-50%, 0);
            width: 90%;
            height: auto;
            aspect-ratio: 16 / 9;
        }

        .yohaku00 {
            padding-top: min(21vw, 520px);
        }

        .lt {
            margin-top: min(21vw, 520px);
        }

        
/* -------------横綱セット-------------  */

.bv-left {
    left: -15%;
}

.bv-right {
    right: -15%;
}

/* -------------写真-------------  */

.marukage {
    aspect-ratio: 2.2 / 1;
}

#slider-2 {
    width: calc(100% / 3.2);
}

.sirowaku {
    width: 30%;
}


 }

/* ------------------for tablet------------------ */


/* ------------------メディアクエリ768px------------------  */

@media screen and (max-width: 768px){

    .sound{
        position: absolute;
        top: 40%;
        transform: translateY(-50%);
    }

    .sound_inner{
        width: 70%;
    }

    main p {
        font-size: min(4.06vw, 15px);
    }

    .pc { display: none;}
    .pc600,
    .pc400 {
        display: block;
    }

    #rotate.pc.active, 
    #rotate_2.pc.active {
        display: none;
    }

    .sp {
        display: block;
    }

    /* 修正 */
    .sound_inner {
        min-width: auto;
        width: 80%;
    }



    /* ------------------SP NAV ------------------  */
    .nav-sp{
        position: fixed;
        top: 0;
        right: 0;
        z-index: 20;
        width: 40px;
        height: 40px;
        background: #111;
        cursor: pointer;
    }

    .nav-sp span{
        position: relative;
        width: 70%;
        height: 4px;
        background: #fff;
        display: block;
        margin: 18px auto 0;
        border-radius: 2px;
    }

    .nav-sp span::before,
    .nav-sp span::after{
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        display: block;
        border-radius: 2px;
    }

    .nav-sp span::before{
        top: -10px;
    }

    .nav-sp span::after{
        bottom: -10px;
    }

    .active span{
        background: transparent;
    }

    .active span::before{
        top: 0;
        transform-origin: center;
        transform: rotate(45deg);
    }

    .active span::after{
        bottom: 0;
        transform-origin: center;
        transform: rotate(-45deg);
    }

    .nav-sp-wrap{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 11;
        visibility: hidden;
    }

    .nav-sp-wrap .nav-back{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: 0;
        transition:ease 0.5s 0.5s;
    }

    .nav-sp-wrap ul{
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        justify-content: space-between;
        width: 81%;
    }

    .nav-sp-wrap ul li{
        width: 11%;
        opacity: 0;
        transform: translateY(20%);
        transition:ease 0.3s;
    }

    .nav-sp-wrap ul li:nth-of-type(1){transition-delay: 0.1s;}
    .nav-sp-wrap ul li:nth-of-type(2){transition-delay: 0.2s;}
    .nav-sp-wrap ul li:nth-of-type(3){transition-delay: 0.3s;}
    .nav-sp-wrap ul li:nth-of-type(4){transition-delay: 0.4s;}
    .nav-sp-wrap ul li:nth-of-type(5){transition-delay: 0.5s;}
    .nav-sp-wrap ul li:nth-of-type(6){transition-delay: 0.6s;}
    .nav-sp-wrap ul li:nth-of-type(7){transition-delay: 0.7s;}

    .nav-sp-wrap ul li a{
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 76 / 231;
    }

    .nav-sp-wrap.active{
        visibility: visible;
    }

    .active.nav-sp-wrap .nav-back{
        opacity: 0.7;
        transition:ease 0.5s;
    }

    .active.nav-sp-wrap ul li{
        opacity: 1;
        transform: translateY(0);
    }



    /* ------------------メイン------------------  */

    #fv {
        position: relative;
        height: calc(100vh + 80vw);
    }

    #fv::before {
        position: absolute;
        content: '';
        bottom: auto;
        width: 100%;
        height: 100vh;
        mix-blend-mode: multiply;
        background: linear-gradient(0deg, transparent 20%, rgba(169, 205, 202, 1) 50%, rgba(82, 127, 176, 1) 100%);
    }

    #fv::after{
        content: '';
        position: absolute;
        bottom: -5vh;
        height: 20vh;
        width: 100%;
        background: linear-gradient(0deg, transparent 10%, rgba(201, 189, 166, 1) 60%);
        z-index: -1;
    }

    .fv_inner {
        top: auto;
        bottom: 0;
        transform: translate(-50% , 0);
        aspect-ratio: 1 / 1;
        width: 100%;
     }

    .mainimg {
        background: url(../img/sp/back-sp.webp) repeat center / contain;
    }

    .visual {
        display: none;
    }
    .visual_sp {
        position: absolute;
        bottom: 5vh;
        display: block;
        width: 100%;
        height: auto;
    }

    .visual_mikosi {
        position: absolute;
        top: auto;
        bottom: 80vw;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: auto;
        z-index: 10;
    }

    .active .left {
        left: 11%;
    }

    .active .riglt {
        right: 11%;
    }

    .mein_kemuri {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vw;
    }
    .mein_sp01 {
        position: absolute;
        top: 0;
        left: -30%;
        width: 100%;
        height: auto;
        animation: 40s mein_kemuri01 linear infinite;
        opacity: 0.9;
    }

    @keyframes mein_kemuri01 {
        0% { transform: translateX(0); opacity: 0.9;}
        20% { transform: translateX(15%); opacity: 0.6;} 
        45% { transform: translateX(5%); opacity: 0.9;}
        65%{ transform: translateX(20%); opacity: 0.6;} 
        100% { transform: translateX(0); opacity: 0.9;}
    }
    
    .mein_sp02 {
        position: absolute;
        top: 0;
        left: 70%;
        width: 100%;
        height: auto;
        animation: 30s mein_kemuri02 linear infinite; 
        opacity: 0.6;
    }

    @keyframes mein_kemuri02 {
        0% { transform: translateX(0); opacity: 0.6;} 
        30% { transform: translateX(-20%); opacity: 0.9;} 
        55% { transform: translateX(-10%); opacity: 0.6;}
        80%{ transform: translateX(-20%); opacity: 0.9;} 
        100% { transform: translateX(0); opacity: 0.6;}
    }

    .mein_sp03 {
        position: absolute;
        top: 5%;
        right: -30%;
        width: 60%;
    }
    .active .mein_sp03 {
        animation: 10s mein_kemuri03 linear infinite;                                 
        transform: translate(-20%,0);
    }
    @keyframes mein_kemuri03 {
        0% { transform: translate(-20%,0); opacity: 1;} 
        25% { transform: translate(0,10%); opacity: .2;} 
        50% { transform: translate(-20%,0); opacity: 1;}
        75% { transform: translate(0,10%); opacity: .2;} 
        100% { transform: translate(-20%,0) ; opacity: 1;} /*元に戻る*/
    }

    .mein_sp04 {
        position: absolute;
        top: 20%;
        left: 15%;
        width: 30%;
    }
    .active .mein_sp04 {
        animation: 10s mein_kemuri04 linear infinite;                                                          
        transform: translate(20%,0);
        opacity: 1;
    }
    @keyframes mein_kemuri04 {
        0% { transform: translate(20%,0); opacity: 1;} 
        25% { transform: translate(40%,10%); opacity: .5;} 
        50% { transform: translate(20%,0); opacity: 1;} 
        75%{ transform: translate(40%,10%); opacity: .5;} 
        100% { transform: translate(20%,0) ; opacity: 1;}
      }
    

    .mein_sp05 {
        position: absolute;
        top: 40%;
        left: -30%;
        width: 60%;
    }
    .active .mein_sp05 {
        animation: 10s mein_kemuri05 linear infinite;                                                          
        transform: translate(20%,0);
        opacity: 1;
    }
    @keyframes mein_kemuri05 {
        0% { transform: translate(20%,0); opacity: 1;} 
        25% { transform: translate(0,10%); opacity: .2;} 
        50% { transform: translate(20%,0); opacity: 1;} 
        75%{ transform: translate(0,10%); opacity: .2;} 
        100% { transform: translate(20%,0); opacity: 1;}
    }

    .mein_sp06 {
        position: absolute;
        bottom: 20%;
        left: -30%;
        width: 60%;
    }
    .active .mein_sp06 {
        animation: 10s mein_kemuri06 linear infinite;                                                          
        transform: translate(20%,0);
    }
    @keyframes mein_kemuri06 {
        0% { transform: translate(20%,0);} 
        25% { transform: translate(40%,10%);} 
        50% { transform: translate(20%,0);} 
        75%{ transform: translate(40%,10%);} 
        100% { transform: translate(20%,0);}
    }

    .left {
        position: absolute;
        transform: translateX(-50%);
        top: auto;
        bottom: 20vw;
        left: -50%;
        width: 65%;                                                               
    }

    .active .left{
        width: 65%;
    }
    
    .riglt {
        position: absolute;
        transform: translateX(50%);
        top: auto;
        bottom: 26vw;
        right: -50%;
        width: 65%;
    }
    
    .title {
        z-index: 15;
    }
    .smoke01 {
        bottom: 22%;
    }

    .sikona {
        position: absolute;
        top: 0;
        left: 50%;
        width: 15%;
        height: auto; 
        opacity: 0;
    }

    .active .sikona{
        animation: title-sp 2s .2s ease forwards;
    }
    @keyframes title-sp {
        0%{top: 0;
            transform:  translate(-50%, -100%) scale(1, 1);
            opacity: 0;
        }
        
        50%{top: 0;
            transform:  translate(-50%, -50%) scale(1, 1);
            opacity: 0;

        }
    
        60%{top: 50%;
            transform:  translate(-50%, -50%) scale(1, 0.8);
            opacity: 1;
        }
    
        95%{top: 40%;
            transform:  translate(-50%, -50%) scale(1, 1);
        }
    
        100%{top: 45%;
            transform:  translate(-50%, -50%) scale(1, 1);
            opacity: 1;
        } 
    }


     /* ------------------メニュー------------------  */

    .reverse {
        display: flex;
        flex-direction: column-reverse;
    }

     .yohaku {
        padding: 14vw 0 0;
        padding-bottom: 14vw;
    }

    .reverse .menu {
        width: 90%;
    }

    .menu {
        width: 90%;
        gap: 10px;
    }
    .menu07:hover {
        background: url(../img/menu01_a.webp) no-repeat center / contain;
    }
    .menu06:hover {
        background: url(../img/menu02_a.webp) no-repeat center / contain;
    }
    .menu05:hover {
        background: url(../img/menu03_a.webp) no-repeat center / contain;
    }
    .menu04:hover {
        background: url(../img/menu04_a.webp) no-repeat center / contain;
    }
    .menu03:hover {
        background: url(../img/menu05_a.webp) no-repeat center / contain;
    }
    .menu02:hover {
        background: url(../img/menu06_a.webp) no-repeat center / contain;
    }
    .menu01:hover {
        background: url(../img/menu07_a.webp) no-repeat center / contain;
    }

    #target {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 12.7vw;
        max-height: 97.5px;
        z-index: 100;
        transform: translateY(-101%);
        transition: .5s ease;
    }
    #target.active {
        transform: translateY(0);
    }
    .menu_sp {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    .menu_sp li {
        width: auto;
        height: 100%;
        aspect-ratio: 274 / 244;
    }

    .menu_sp li a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .menu07_sp {
        background: url(../img/sp/menusp_07.webp) no-repeat center / contain;
    }
    
    .menu06_sp {
        background: url(../img/sp/menusp_06.webp) no-repeat center / contain;
    }
    
    .menu05_sp {
        background: url(../img/sp/menusp_05.webp) no-repeat center / contain;
    }
    
    .menu04_sp {
        background: url(../img/sp/menusp_04.webp) no-repeat center / contain;
    }
        
    .menu03_sp {
        background: url(../img/sp/menusp_03.webp) no-repeat center / contain;
    }
    
    .menu02_sp {
        background: url(../img/sp/menusp_02.webp) no-repeat center / contain;
    }
    
    .menu01_sp {
        background: url(../img/sp/menusp_01.webp) no-repeat center / contain;
    }

    /* -----------------ロゴ------------------  */

    .lt{
        margin: 25vw auto;
    }

    .wrrap02 {
        display: block;
    } 

     .logo_sp {
        width: 90%;
        padding-bottom: 10%;
        display: block;
        margin: 0 auto;
    }

    .logo_title.sp {
        position: relative;
        width: 100%;
        height: 60vw;
        text-align: center;
    }

    .logo_butai {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    .loro_art {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
    }

    .smoke_left{
        left: -20%;
    }

     .smoke_right{
        right: -20%;
    }

    .yohaku00{
        padding-top: 0;
        padding-bottom: 25vw;
    }
    
     /* ------------------間------------------  */

    .back01 {
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 9 / 13.5;
        max-height: none;
        background: url(../img/sp/back_sub_sp.webp) no-repeat center bottom / cover;
    }

    .rikisi {
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        display: none;
    }

    .pc600 {
        display: none;
    }
    .pc400 {
        display: none;
    }

    .test {
        width: 100%;
        height: 66vw;
    }

    .test img{
        width: 100%;
    }

    .active.rikisi {
        animation: none;
    }

    .mozi {
        top: 4%;
        right: 3%;
        width: 94%;
    }

     /* ------------------日付------------------  */

     .back02 {
        margin: 29vw 0 15vw;
        padding: 0;
    }

    .date {
        width: 70%;
    }

    .date_s{
        width: 100%;
    }

    /* ------------------概要------------------  */

    .yellow {
        height: 45vw;
        margin-bottom: min(12vw, 145px);
        margin-top: 10vw;
    }

    .title_sub05 {
        width: 60%;
        margin-right: 10%;
    }

    .sentence01 .cont01 {
        position: absolute;
        top: 3%;
        left: 10%;
        width: 14vw;
        height: auto;
    }
    .naming {
        width: 100%;
    }

    .overview {
        width: 27%;
    }

    .card06,
    .card07 {
        position: absolute;
        top: 50%;
        left: 60%;
        transform: translate(-50%,-50%);
        transition: 2s;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
        aspect-ratio: 7 / 9;
        width: 90%;
        height: auto;
    }

    .active .card05 {
        top: 30%;
        left: -110%;
        transform: rotate(-15deg);
        transition: 1s all ease-in-out;  
    }
    .active .card07 {
        top: 40%;
        left: 30%;
        transform: rotate(-15deg);
        transition: 1s all ease-in-out;
    }
    .active .card03 {
        top: -20%;
        left: -30%;
        transform: rotate(10deg);
        transition: 1s all ease-in-out;   
    }
    .active .card02 {
        top: -10%;
        left: 100%;
        transform: rotate(10deg);
        transition: 1s all ease-in-out;
    }
    .active .card06 {
        top: 40%;
        left: 140%;
        transform: rotate(30deg);
        transition: 1s all ease-in-out;
    }

    .sentence01 p {
        padding: 0 9%;
    }

    /* ------------------取扱------------------  */
    
    .explan01 {
        margin-top: 28vw;
        margin-bottom: 0;
    }    

    .explan01_img {
        width: 85%;
    }
    .movie {
        width: 100%;
    }

    .clear img{
        display: none;
    }

    .word li{
        width: 1308px;
        height: 260px;
        display: block;
        padding: 0 0 20px 0;
        box-sizing: border-box;
    }

    .word li img{
        padding:0 5vw 0;
    }

    .word_yoko{
        align-items: flex-start;
    }

    .word_yoko:last-child{
        margin-left: 12vw;
    }

    .word_yoko img{
        height: auto;
        width: 7.5vw;
    }

    .cont02 {
        top: -60%;
        right: 4.5%;
        transform: translate(0,0);
        width: 16vw;
    }

    .about {
        margin-top: 10vw;
        padding-right: 0;
    }

    .about::before{
        content: '←scroll';
        position: absolute;
        bottom: 102%;
        right: 5%;
        font-size: 12px;
    }

    .torituke {
        margin-top: 30vw;
    }

     .hosoku {
        border-radius: 15px;
        max-width: 413px;
        width: 77%;
        margin: 0 auto;
     }

     .hosoku p {
        padding: 15px;
        text-align: justify;
        line-height: 1.7;
        padding-top: 6.5em;
        width: 100%;
        margin-left: 0;
     }

     .hosoku-img {
        width: 50%;
        left: 50%;
        bottom: calc(100% - 4.5em);
        transform: translateX(-50%);
     }
     .hosoku-mozi {
        justify-content: center;
        margin-left: 0;
        width: 100%;
     }

     /* ------------------力士------------------  */

     .back03 {
        padding-top: 14vw;
        margin-top: 0;
    }

    .sentence02 {
        padding-top: 29vw;
    }


    .rotate_inner {
        width: 180%;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
    }

    #section03 {
        height: auto;
        overflow-x: hidden;
    }

    .mountain {
        width: 180vw;
        top: 45%;
    }
    .wave {
        top: 67%;
        width: 200vw;
    }

    .rotate_rikishi#r1 {
        transform: translate(0, 18%) scale(.7);
    }
    .rotate_rikishi#r2 {
        transform: translate(27%, -6%) scale(.3);
    }
    .rotate_rikishi#r5 {
        transform: translate(-27%, -6%) scale(.3);
    }

    /* sp回転 */

    #rotate_sp {
        display: block;
        width: 100%;
        height: 115vw;
    }

    .splide__track.rotate_inner {
        position: relative;
        width: 100%;
        width: 90%;
        height: 100%;
        overflow: initial;
        max-height: initial;
        aspect-ratio: initial;
        box-sizing: content-box;

    }

    .splide__list {
        position: relative;
        z-index: 2;
        height: 100%;
    }

    .splide__slide .splide_img {
        position: relative;
        width: 100%;
        height: 100%;
    }


    .splide__slide.is-active .splide_img {
        filter: brightness(1);
    }

    .splide__slide img {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50% , -50%);
        width: 100%;
        height: auto;
    }

    .splide__slide img.overlap {
        z-index: 2;
    }
    .splide__slide img.shadow {
        z-index: 1;
        

    }

    #rotate_sp .mountain_bg,
    #rotate_sp .mountain,
    #rotate_sp .wave {
        z-index: 1;
    }


    .splide__arrow {
        display: none;
        border-radius: 0;
        cursor: pointer;
        opacity: 1;
        width: min(10vw , 50px);
        height: auto;
        z-index: 1;
        aspect-ratio: 1 / 1;
        background: url(../img/rotate/paple.webp) no-repeat center / contain;
        pointer-events: all;
        transition: .5s ease;
    }
    .active .splide__arrow {
        opacity: 0;
        pointer-events: none;
    }

    .splide__arrow.splide__arrow--next {
        transform: translateY(-50%) scale(-1);

    }
    

    .splide__arrow svg {
        display: none;
    }

    .splide__arrow--prev {
        left: 5vw;
        top: 55%;
    }

    .splide__arrow--next {
        right: 5vw;
        top: 55%;
    }

    .mountain_bg {
        top: 42%;
        left: 50%;
        transform: translate(-50% , -50%);
        width: 140vw;
    }


    /* 目次 */

    .mokuji {
        position: absolute;
        bottom: 0;
        left: 15%;
        transform: translate(-50%);
        z-index: 8;
        width: 16vw;
        height: auto;

    }
    .mokuji img {
        width: 100%;
        height: auto;
    }

    /* ------------------力士カード------------------  */

    #set {
        margin-top: 25vw;
    }

    .sentence02 {
        width: 80%;
    }

    .member {
        margin: min(4vw, 30px) auto 0;
        width: 100%;
        gap: 10px 0;
    }

    .member img{
        width: calc(100% / 5 - 8px);
    } 

    /* ------------------一人相撲------------------  */

    .simulator {
        padding-bottom: 25vw;
    }

    .cont04 {
        width: 16vw;
        max-width: 121px;
        right: 0;
    }

    /* -----------------横綱セット　スタンド------------------  */

    .bv {
        padding-bottom: 14vw;
        overflow: initial;
    }

    .bv-left {
        width: 125%;
        top: -12%;
        left: initial;
        right: -40%;
    }
    .bv-right {
        width: 120%;
        bottom: -92vw;
        right: -35%;
    }

    .set {
        display: block;
        max-height: none;
        height: auto;
        width: 100%;
    }
    .hasi {
        position: relative;
        width: 100%;
        bottom: 40%;
        left: 50%;
        transform: translateX(-50%);
    }
    .stand {
        position: relative;
        left: 50%;
        bottom: 22%;
        transform: translateX(-50%);
        margin-bottom: min(5vw, 60px);
    }

    .setmozi {
        position: relative;
        width: 85%;
        margin-top: 7.5vw;
        margin-left: 5vw;
    }

    .atm {
        position: relative;
        display: flex;
        justify-content: center;
        width: 100%;
        align-items: center;
        gap: 5%;
    }
    .atm01sp {
        width: 40%;
        height: auto;
    }
    .atm02sp {
        width: 50%;
    }
    
     /* ------------------横綱セット　巾着------------------  */

    .hata {
        display: block;
        width: 100%;
        margin: 10vw auto 0;
    }
    .set span,
    .hata span {
        text-align: center;
        font-size: min(4.06vw, 16px);
        width: 100%;
    }

    .hata01 {
        width: 100%;
        margin-bottom: 3vw;
    }
    .hata02 {
        text-align: center;
        width: 100%;
    }
    .hata02 span {
        padding-left: 0;
    }
    .hata02 p {
        margin-top: 5px;
        text-align: center;
    }
    .hata02 img {
        width: 90%;
    }
    .hata02 img.hata_width {
    width: 89%;
    }
    .bag {
        margin-bottom: min(5vw, 60px);
    }

    .hata03 {
        width: 100%;
    }
    .hatamozi_sp {
        width: 95%;
        margin-left: 5%;
        margin-bottom: 5vw;

    }

    /* ------------------写真------------------  */

    .photo {
        display: flex;
        flex-wrap: wrap;
        margin-top: 14vw;
        width: 100%;
        justify-content: space-between;
    }

    .photo a {
        width: 32%;
        margin-bottom: 2%;
    }

    .photo a img {
        width: 100%;
        height: 100%;
        object-fit:  cover;

    }

    /* ------------------仕様------------------  */

    .siyou {
        height: 50vw;
        margin-top: -3vw;
    }

    .siyou .box{
        transform: scale(0.8);
    }
    .box_title {
        display: block;
        margin: 0 auto;
        width: 90%;
        height: auto;
    }

    .nakami {
        position: absolute;
        top: 16%;
        right: 2%;
        width: 72%;
    }
    .nakami.active {
        animation: .5s 1.5s open02 linear forwards;
    }
    @keyframes open02 {
        0% { top: 16%; right: 2%;} 
        100% { top: 6%; right: 26%;} 
    }
    .shadow02 {
        position: absolute;
        top: 14%;
        right: 33%;
        width: 65%;
        z-index: 1;
        opacity: 0;
    }
    .shadow02.active {
        animation: .25s 1.95s nakami_s linear forwards;
    }
    @keyframes nakami_s {
        0% { opacity: 0;} 
        100% { opacity: 0.3;} 
    }

    .box_inner,
    .box_slide {
        position: absolute;
        top: 15%;
        right: 0;
        width: 72%;
    }
    .active.box_slide {
        animation: .5s 1.5s open01 linear forwards;
    }
    @keyframes open01 {
        0% { top: 15%; right: 0;} 
        100% { top: 13%; right: 3%;} 
    }
    .shadow {
        top: 29%;
        right: -30%;
        width: 110%;
    }
    @keyframes inner_s {
        0% { opacity: 0;} 
        100% { opacity: 1;} 
    }

    .cont05 {
        bottom: 60%;
        left: 0%;
        width: 16vw;
        max-width: 121px;
    }

    .syousai {
        display: block;
        text-align: center;
        margin: 4vw auto 0;
    }

    .detail {
        justify-content: center;
        width: 100%;
        font-size: min(4.06vw, 18px);
        }

    .detail dt {
        padding: .8em;
        line-height: 1.3;
        width: 5.5em;
    }
    
    .tax {
        font-size: min(3.12vw, 15px);
    }

    .detail dd {
        text-align: left;
        padding: .8em;
        line-height: 1.3;
        margin-inline-start: 0;
        width: calc(100% - 6em);
    }

    .detail dd.herf01 {
        width: calc((100% - 6em) * (2.8/7));
        display: inline-block;
        align-content: center;
    }
    .detail dd.herf02 {
        width: calc((100% - 6em) * (4.2/7));
        display: inline-block;
    }

    .price {
        justify-content: left;
    }

    .pc_inline {
        display: none;
    }

    .inline {
        display: inline-block;
    }

    /* ------------------絵師------------------  */

    .smoke03 {
        padding-top: 10vw;
    }

    .kumo01{ width: 60%;}
    .kumo03{ width: 40%;}
    .kumo05{ width: 50%;}

    .cont06 {
        top: 0;
        width: 16vw;
    }

    .kage05 {
        bottom: -1%;
        width: 30%;
        left: 53%;
    }

    .active .darumaimg {
        width: 30vw;
        transform-origin: bottom center;
        animation: daruma-sp 11s ease;
    }

    @keyframes daruma-sp {
    0% { transform: translateX(-50%) rotate(-20deg);
        }
    15% { transform: translateX(-50%) rotate(20deg);
    }
    30% { transform: translateX(-50%) rotate(-20deg);
    }
    45% { transform: translateX(-50%) rotate(20deg);
    }
    60% { transform: translateX(-50%) rotate(-20deg);
    }
    75% { transform: translateX(-50%) rotate(20deg);
    }
    90% { transform: translateX(-50%) rotate(-20deg);
    }
    100% {transform: translateX(-50%) rotate(0deg);}
    }

    .daruma_name {
        right: 25%;
        width: 6%;
        z-index: 10;
    }

    .daruma {
        height: 57vw;
        max-height: 420px;
    }

    .rahu {
        margin-top: min(8vw, 50px);
    }

    .sub {
        display: block;
        margin: min(4vw, 30px) auto;
        width: 30vw;
    }

    /* ------------------なのった------------------  */

    #footer {
        padding-top: 29vw;
    }

    .himo {
        width: 150%;
        margin-top: 20px;
    }

    .simulator .inner .rikishi-wrap .rikishi{
        width: 40%;
    }
 }

  /* ------------------メディアクエリ600px------------------  */




  /* @media screen and (max-width: 400px) {

    .pc400 {
        display: block;
    }
  } */