body {
    margin: 0;
    overflow: hidden;
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 700;
    font-style: normal;
    color: white;
    letter-spacing: 0.3rem;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

h1{
    font-size: clamp(10px, 5dvw, 35px);
    text-align: center;
    -webkit-text-stroke: 8px #77108e;
    paint-order: stroke;
    touch-action: manipulation;
}



h2{
    margin: 0;
    margin-top: 1%;
    margin-left: 4.3dvw;
    font-size: clamp(10px, 2.5dvw, 23px);
    letter-spacing: 0.3rem;
    touch-action: manipulation;
}

h3{
    font-size: clamp(8px, 1.2dvw, 20px);
    margin-top: .8dvh;
    margin-left: 6dvw;
    margin-bottom: 0;
    letter-spacing: 0.15rem;
    line-height: 1.1rem;
    color:#c3c3c3;
    word-break: auto-phrase;
    touch-action: manipulation;
}

h4 {
    font-size: clamp(6px, 1.5dvw, 15px);
    color: #525252;
    margin-top: 1%;
    margin-bottom: 0;
    margin-left: 7dvw;
    letter-spacing: 0.1rem;
    line-height: clamp(0.5rem, 2dvw, 1.1rem);
    word-break: auto-phrase;
    touch-action: manipulation;
}


#title {
    position: relative;
    height: 10%;
    justify-content: center;
    color: #ffffff;
    background-image: repeating-linear-gradient(120deg, #b931d7, #b931d7 40px, #b303db 10px, #b303db 80px);
    background-color:rgba(255,255,255,0.1);
    background-blend-mode:lighten;
    z-index: 5;
    touch-action: manipulation;
}

.main-area {
    position: relative;
    display: flex;
    top: -4%;
    flex-direction: row;
    width: 120dvw;
    height: 105dvh;
    transform: rotate(4deg);
    touch-action: manipulation;
}

.setting-area {
    flex: 11;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-right: 20%;
    justify-items: left;
    background-color: #f9f0d2;
    box-shadow: 0px 0px 7px 6px rgba(0, 0, 0, 0.35);
}

#format, #type, #type-disp, #options, #difficult {
    height: 10dvh;
    width: 56dvw;
    margin-bottom: 1.5%;
    border: 2px solid #000000;
    background-color: #efefef;
    overflow: hidden;
}

#difficult {
    height: 11dvh;
    border: 2px solid #000000;
    background-color: #efefef;
}

#control {
    position: relative;
    display: flex;
    left: -2%;
    top: -4%;
    width: 110dvw;
    height: 35dvh;
    justify-content: center;
    background-color: #7c6d64;

    transform: rotate(4deg);
}

.quest {
    position: relative;
    display: flex;
    left: -3vw;
    flex-direction: column;
    justify-content: center;
    color: #efefef;
    background-image: repeating-linear-gradient(90deg, #454f65, #454f65 10px, #4e5667 10px, #4e5667 20px);
    background-size: 50%;
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    transform: skewX(-30deg);
    margin-right: 0;
    touch-action: manipulation;
}


.skew30 {
    transform: skewX(30deg);
    touch-action: manipulation;
}

.rotate-4 {
    transform: rotate(-4deg);
    margin-top: 10%;
    margin-left: 6%;
}

.rotate-4-error {
    transform: rotate(-4deg);
    margin-top: 0;
    margin-left: 6%;
    margin-right: -3dvw;
    text-align: right;
    color: rgb(199, 5, 83);
    font-size: clamp(10px, 2.5dvw, 23px);
    touch-action: manipulation;
}

.quest h4 {
    color: #dfdfdf;
    touch-action: manipulation;
}

.radio-tile-group {
    display: flex;
    justify-content: left;
    width:100%;
    height:100%;
    margin-left: 1dvw;
}

.radio-tile-group .input-container {
    position: relative;
    margin-top: 3.5%;
    margin-right: 5%;
    width: 45%;
    height: 80%;
}

.radio-tile-group .input-container .radio-button {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    cursor: pointer;
    touch-action: manipulation;
}

.radio-tile-group .input-container .radio-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 10dvw;
    height: 20%;
    border-radius: 5px;
    padding: .9rem;
    transition: all .1s ease-in-out;
    background-color: #acacac;
}


.radio-tile-group .input-container .radio-tile-label {
    width: 100%;
    margin-left: 8%;
    text-align: center;
    font-size: clamp(8px, 3dvw, 22px);
    letter-spacing: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #313131;
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile {
    margin-top: -3px;
    background-image: repeating-linear-gradient(120deg, #ffc72b, #ffc72b 10px, #ffb829 10px, #ffb829 20px);
    border: 2px solid #292929;
    border-bottom: 4px solid #292929;
    color: #000000;
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg {
    background-color: #ffffff;
}

.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label {
    color: #000000;
}

.or {
    font-size: clamp(10px, 3dvw, 25px);
    margin-left: 2dvw;
    margin-right: 1.8dvw;
    margin-top: 10%;
}

.counter {
    height: 75%;
    margin-top: 1%;
}

.field {
    display: flex;
    height: 100%;
    padding-right: 2dvw;
}

.field-counter {
    display: flex;
    margin-left: 3%;
    margin-right: 3%;
    touch-action: manipulation;
}

.border-cnt {
    display: flex;
    border: 2px solid #000000;
    border-radius: .5em;
    background-color: #ffffff;
}

.inputtext {
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 700;
    color:rgb(0, 0, 0) ;
    font-size: clamp(10px, 2.3dvw, 35px);
    width: 10%;
    text-align: left;
    padding-left: 25%;
    border: 0;
    background-color: transparent;
    touch-action: manipulation;
}

.unit {
    display: flex;
    font-size: clamp(8px, 1.5dvw, 20px);
    padding-right: 10%;
    padding-top: 1dvw;
    align-items: center;
    width: 20%;
    justify-content: center;
    text-align: center;
    touch-action: manipulation;
}

.button {
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 700;
    color:rgb(0, 0, 0) ;
    font-size: clamp(10px, 3.5dvw, 55px);
    cursor: pointer;
    touch-action: manipulation;
    padding: 0 3%;
    border: 0;
    background-color: transparent;
    outline: 0;
    touch-action: manipulation;
}

.message-cnt {
    margin-right: 1.5dvw;
    margin-left: 0;
}

.error-display {
    opacity: 0;
    letter-spacing: 0;
    font-size: clamp(8px, 2.1dvw, 23px);
    touch-action: manipulation;
}

.button-upbottom {
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 700;
    color: rgb(0, 0, 0);
    font-size: 43px;
    cursor: pointer;
    touch-action: manipulation;
    padding: 0 5%;
    margin-right: 10%;
    letter-spacing: 1rem;
    background-image: repeating-linear-gradient(120deg, #fff371, #fff371 40px, #ffed29 10px, #ffed29 80px);
    border: 4px solid rgb(0, 0, 0);
    box-shadow: 8px 8px 0px 0px rgb(88, 88, 88);
    outline: 0;
    height: 40%;
    margin-top: 2rem;
    transform: rotate(-4deg);

}

#title-screen {
    position: relative;
    width: 100dvw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    z-index: 10;
    background-color: #fbebff;
}

#game-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('game_background.png');
    background-size: cover;
    background-position: center;
    transition: transform 1s ease-in-out;
    z-index: 1;
}

#press-start {
    position: relative;
    width: 100%;
    height: 4dvw;
    margin-top: 80dvh;
    z-index: 3;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgb(255, 103, 151) 20% 80%, rgba(255, 255, 255, 0) 90%);
    opacity: 0.9;
}

#start-text {
    position: absolute;
    padding-top: 1dvh;
    font-size: clamp(10px, 2.3dvw, 40px);;
    text-align: center;
    letter-spacing:  .8rem;
    color: #ffffff;
    -webkit-text-stroke: 6px #b6216b;
    paint-order: stroke;
    margin-top: 80dvh;
    cursor: pointer;
    opacity: 1;
    z-index: 4;
}

.credit {
    position: relative;
    bottom: 0;
    width: 100%;
    flex: 1;
    transform: scale(1, -1);
    padding-top: 5px;
    padding-left: 20px;
    text-align: left;
    line-height: 1.3rem;
    color:#525252;
    z-index: 3;
    opacity: 0.9;
}

.down-messeage {
    color: #000000;
    font-size: clamp(10px, 1.7dvw, 30px);
}

.credit h3 {
    transform: scale(1, -1);
}

.slide-up {
    transform: translateY(-100%);
}

.container {
    display: flex;
    flex-direction: row;
    height: 17%;
}

#game-settings {
    display: flex;
    flex-direction: column;
    width: 100dvw;
    height: 110dvh;
    background-color: #fbebff;
    color: rgb(0, 0, 0);
    overflow: hidden;
}

.bubble-r {
    position: relative;
    width: 70%;
    display: inline-block;
    top: 15%;
    padding: 1dvw;
    padding-left: 1.5dvw;
    margin-left: 4dvw;
    border: 2px solid #000000;
    border-radius: 10px;
    background-color: #ffffff;
    text-align: left;
    font-size: clamp(8px, 1.5dvw, 16px);
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 700;
    line-height: 1.5rem;
    color: #000000;
    transform: rotate(-4deg);
}

.bubble-r::before {
    content: "";
    position: absolute;
    top: 60%;
    right: 0;
    border-style: solid;
    border-width: 15.5px 0 15.5px 33px;
    border-color: transparent transparent transparent #000000;
    translate: 100% -50%;
}

.bubble-r::after {
    content: "";
    position: absolute;
    top: 60%;
    right: 0;
    border-style: solid;
    border-width: 13.3px 0 13.3px 28.3px;
    border-color: transparent transparent transparent #ffffff;
    translate: 100% -50%;
}

/* カルーセルUIのスタイル */
.carousel {
    display: flex;
    align-items: center;
    justify-content: right;
    width: 100%;
    height: 100%;
    margin-right: 1.5dvw;
    touch-action: manipulation;
}

.carousel-nav {
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.carousel-btn {
    font-size: clamp(20px, 6dvw, 40px);
    background-color: transparent;
    border: none;
    color: black;
    cursor: pointer;
    touch-action: manipulation;
    transform: scaleX(1.3);
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
}

.carousel-item-container {
    width: 76%;
    height: 80%;
    position: relative;
    border: 2px solid #000000;
    border-radius: .5em;
    background-color: #ffffff;
    overflow: hidden;
}

.carousel-bg-container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 80%;
    background-repeat: no-repeat;
    background-position: left 0% bottom 0%;
    transition: opacity 0.3s ease-in-out;
}

.fade-out {
    opacity: 0;
}

.carousel-item {
    position:absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    width: 100%;
    height: 100%;
    padding: 0;
    touch-action: manipulation;
    box-sizing: border-box;
    color: black;
    transition: transform 0.5s ease;
}

/* スライドアニメーション */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-right {
    animation: slideInRight 0.5s forwards;
}

.ribbon {
    display: flex;
    top: 0;
    right: 0;
    height: 20%;
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 10% 100%, 0% 50%, 10% 0);
    padding: 1%;
    padding-left: 20%;
    padding-right: 5%;
    margin-bottom: 1%;
    align-items: center;
    transition: background-color .3s ease;
}

/* 難易度名 */
#difficulty-name {
    font-size: clamp(10px, 3dvw, 13px);
    margin: 0;
    letter-spacing: 0.2rem;
    color: white;
}

/* コース名 */
#course-name {
    font-family: "BIZ UDPGothic", sans-serif;
    font-size: clamp(16px, 3.8dvw, 18px);
    padding-right: .8dvw;
    padding-bottom: 1%;
    letter-spacing: 0.3rem;
}

/* 説明文 */
#difficulty-desc {
    font-size: clamp(8px, 2dvw, 12px);
    margin: 0;
    margin-bottom: 1%;
    padding-right: 1.2dvw;
    letter-spacing: 0.1rem;
}


/* 難易度ごとのリボンの色 */
.ribbon-vegetable {
    background-image: repeating-linear-gradient(30deg, #387628, #387628 10px, #418a2f 10px, #418a2f 20px);
}

.ribbon-snack {
    background-image: repeating-linear-gradient(30deg, #2a5678, #2a5678 10px, #2f638a 10px, #2f638a 20px);
}

.ribbon-drink {
    background-image: repeating-linear-gradient(30deg, #827900, #827900 10px, #8f8600 10px, #8f8600 20px);
}

.ribbon-meat {
    background-image: repeating-linear-gradient(30deg, #76003f, #76003f 10px, #8f004c 10px, #8f004c 20px);
}

.memo-grid-picto {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列に分ける */
    min-width: 30dvw;
    gap: 10px;
    padding: 10px;
    justify-items: start;
}

.memo-grid-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 5px;

    font-size: 1.2rem;
}

/* 横1列レイアウト (1x4) */
.memo-grid-picto-landscape {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 横に4等分 */
    gap: 0px;
    width: 100%;
    align-items: center;
}

/* テキスト形式の場合の調整 */
.memo-item {
    font-size: clamp(8px, 1.2dvw, 14px); /* 横並びなので少し小さめに */
    white-space: nowrap;
    text-align: center;
}

/* 画像形式の場合の調整 */
.memo-grid-picto-landscape .memo-item {
    display: flex;
    justify-content: left;
    align-items: left;
}

/* アイコンが重ならないようサイズ調整 */
.memo-grid-picto-landscape .memo-vege-icon {
    width: 45%; /* 4つ並ぶので1つあたりを小さく */
    height: auto;
}

/* 画像形式のアイコンサイズ */
.memo-vege-icon {
    width: 30px;  /* プレビュー枠に合わせて調整してください */
    height: auto;
    margin-right: 2px;
    vertical-align: middle;
}

.memo-item {
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: 700;
    font-size: clamp(9px, 1.3dvw, 18px);
    letter-spacing: -0.08rem;

    min-height: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* 個数が多い時に折り返す */
}

.kaimono-memo {
    text-align: center;
    margin: 5px 0;
    width: 100%;
}