body{
    margin: 0;
    padding: 0;
}
.info-contents{
    max-width: 900px;
    padding: 0.2rem;
    background-color: #f9f9f9;
}
.yu-title-bar-h1{
    font-size: 1.2rem;
    text-align: center;
    width: 100%;
    border: #152844 1px solid;
    border-radius: 20px;
    margin: 1rem 0;
    color: #152844;
}
.yu-title-bar-h1 h1{
    margin: 0.8rem;
}
.info-contents-align{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
.yu-info-sec-recommend{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    column-gap: 2rem;
    align-items: flex-start;
    flex-wrap: nowrap;
}
.yu-info-main-pic-frame{
    width: 40%;
    margin-left: 1rem;
    border-radius: 10px;
}
.yu-info-other-pic-frame{
    width: 90%;
    margin-left: 1rem;
    border-radius: 10px;
}
.yu-info-main-pic{
    width: 105%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;   
}
.yu-main-content{
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.yu-title-bar{
    width: 100%;
    text-align: start;
    border: #152844 1px solid;
    border-radius: 20px;
    margin: 1rem 0;
}
.yu-title-bar-faq{
    width: 100%;
    text-align: center;
    border: #152844 1px solid;
    border-radius: 20px;
    margin: 1rem 0;
}
.yu-info-h2{
    padding: 0;
    margin: 1rem;
    font-size: 1.4rem;
    font-weight: bolder;
    color: #152844;
}
.yu-info-h2::before{
    content: '▶︎ ';
    color: #152844;
}
.yu-info-faq{
    padding: 0;
    margin: 1rem;
    font-size: 1.4rem;
    font-weight: bolder;
    color: #152844;
}
.yu-info-faq::before{
    content: '✎ ';
    color: #152844;
}

.yu-stars{
    width: 100%;
    text-align: center;
    background-color: #152844; 
    border-radius: 10px;
}
.yu-stars p{
    color: #f9f9f9;
    font-size: large;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin: 0.6rem;
}
.yu-yellow{
    color: #FFCC33;
    font-size: x-large;
    padding: 0 0.2rem;
    letter-spacing: 0.4rem;
}
.yu-paragraph{
    line-height: 2;
    padding: 0.2rem 1.2rem;
}
.yu-paragraph a{
    text-decoration: none;
    font-weight: bold;
    color: #152844;
}
.yu-table-td-left a{
    text-decoration: none;
    font-weight: bold;
    color: #152844;
}
.yu-faq-box a{
    text-decoration: none;
    font-weight: bold;
    color: #152844;
}
.yu-info-page-btn-blue{
    width: 180px;
    font-size: large;
    font-weight: bold;
    text-align: center;
    color: #f9f9f9;
    line-height: 2.4;
    border-radius: 40px;
    border-width: 3px;
    margin-top: 1rem;
    background-color: #2e4d9f;
}
.yu-info-page-btn-blue:hover{
    background-color: #152844;
    transform: scale(1.02);
    transition: 0.3s;
}
.yu-info-page-btn-blue a{
    text-decoration: none;
    color: #ffffff;
}
.yu-info-page-btn-orange{
    width: 180px;
    font-size: large;
    font-weight: bold;
    text-align: center;
    color: #f9f9f9;
    line-height: 2.4;
    border-radius: 40px;
    border-width: 3px;
    margin-top: 1rem;
    background-color: #ff6900;
}
.yu-info-page-btn-orange:hover{
    background-color: #ff5b00;
    transform: scale(1.02);
    transition: 0.3s;
}
.yu-info-page-btn-orange a{
    text-decoration: none;
    color: #ffffff;
}
.yu-button-align-row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;
}
.yu-info-sec-news{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 1rem;
}
.yu-info-content-img-frame{
    width: 100%;
    overflow: hidden;
}
.yu-info-content-img{
    width: 100%;
    object-fit:cover;   
    border-radius: 10px
}
.yu-info-sec-details{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
}
.yu-info-details-intro{
    width: 48%;
    height: 100%;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
}
.yu-info-details-partner{
    width: 48%;
    height: 100%;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
}
.yu-item-list{
    width: 100%;
    line-height: 2;
}
.yu-item-list a{
    text-decoration: none;
    font-weight: bold;
    color: #152844;
}
.yu-info-details-compare{
    width: 48%;
    height: 100%;
    margin: 1rem 0;
}
.yu-info-details-promotion{
    width: 48%;
    height: 100%;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
}
.yu-promotion-table{
    width: 100%;
}
.yu-table{
    width: 100%;
}
.yu-table-th-green{
    width: 50%;
    background-color: #CCFF99;
    line-height: 3;
    border-radius: 10px 0 0 0;
}
.yu-table-th-red{
    width: 50%;
    background-color: #FFCCCC;
    line-height: 3;
    border-radius: 0 10px 0 0;
}
.yu-table-th-green::before{
    content: "👍 ";
}
.yu-table-th-red::before{
    content: "👎 ";
}
.yu-table-th-yellow{
    width: 50%;
    background-color: #CCCCFF;
    line-height: 3;
    border-radius: 10px 10px 0 0;
}
.yu-table-th-yellow::before{
    content: "✨ ";
}
.yu-table-th-yellow::after{
    content: " ✨";
}
.yu-table-th-not-recommend{
    width: 50%;
    background-color: #CCCCFF;
    line-height: 3;
    border-radius: 10px 10px 0 0;
}
.yu-table-th-not-recommend::before{
    content: "⛔ ";
}
.yu-table-th-not-recommend::after{
    content: " ⛔";
}
.yu-table-th-gray{
    width: 50%;
    background-color: rgb(156, 156, 150);
    line-height: 3;
}
.yu-table-th-pink{
    width: 30%;
    background-color: hsl(318, 100%, 86%);
    line-height: 3;
}
.yu-table-th-pink-40{
    width: 40%;
    background-color: hsl(318, 100%, 86%);
    line-height: 3;
}
.yu-table-td-left{
    background-color: hsl(0, 0%, 93%);
    line-height: 2;
    padding: 0.4rem 1rem 0.4rem 0.4rem;
    text-align: left;
    vertical-align: text-top;
}
.yu-table-td{
    background-color: hsl(0, 0%, 93%);
    line-height: 2;
    padding: 0.4rem;
    text-align: center;
    vertical-align: text-top;
}
.yu-table-td li{
    padding-right: 0.6rem;
}
.yu-btn-align{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.yu-info-sec-other{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.yu-info-sec-faq{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.yu-faq-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    row-gap: 0.4rem;
}
.yu-faq-box h3{
    color: black;
    background-color: rgb(255, 224, 122);
}
.yu-info-sec-gallery{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.yu-gallery-frame-align{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}
.yu-gallery-frame{
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.yu-gallery-pics{
    width: 100%;
}
.yu-gallery-pic-size{
    width: 100%;
}
.yu-gallery-text{
    width: 100%;
    text-align: center;
    color: #282828;
}
.text-margin-bottom{
    margin-bottom: 3rem;
}
.yu-info-sec-pictures{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.yu-pictures-frame-align{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}
.yu-pictures-frame{
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.yu-pictures-pics{
    width: 100%;
}
.yu-pictures-pic-size{
    width: 100%;
    border-radius: 10px;
}
.yu-pictures-text{
    width: 100%;
    text-align: center;
    color: #282828;
    margin: 1rem;
}
.yu-pictures-text h3{
    color: #f9f9f9;
    background-color: #152844;
    padding: 1rem;
    margin: 0;
}
.yu-pictures-text p{
    background-color: hsl(0, 0%, 93%);
    padding: 1rem;
    margin: 0;
    height: min-content;
    text-align: justify;
}
.yu-info-grid p{
    height: max-content;
}
.yu-info-sec-warning{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.yu-warning-box{
    width: 80%;
    background-color: hsl(0, 0%, 65%);
    color: black;
    border-radius: 10px;
    padding: 1.2rem;
    line-height: 1.5;
    margin: 1rem;
}
details {
    width: 90%;
    margin-bottom: 10px;
    border-bottom: 1px solid black;
    border-radius: 4px;
    padding: 10px;
    transition: all 0.3s ease;
    background-color: white;
}
details:hover {
    background-color: #e4e4e4;
}
summary {
    cursor: pointer;
    padding: 10px;
    font-weight: bold;
    color: hsl(0, 0%, 14%);
    outline: none;
    font-size: 1.2rem;
}
summary::-webkit-details-marker {
    color: #666;
}
details[open] summary {
    margin-bottom: 10px;
}
.yu-faq-content {
    padding: 10px;
    color: hsl(0, 0%, 14%);
    line-height: 2;
}