@charset "UTF-8";

body {
    font-family: "ZenOldMincho", serif !important;

    line-height: 1.6 !important;
    text-align: center !important;
    background-image: url("https://how-to-inc.com/uo/wp-content/uploads/17e7396c2a5dc28ee44af15345e84229.jpg") !important;
    background-size: cover !important; /* 画像を全体に広げる */
    background-repeat: no-repeat!important; /* 繰り返しを防ぐ */
    background-position: center center!important; /* 画像を中央に配置 */
    margin: 0 !important;
    padding: 0 !important;
    background-attachment: initial !important;
}

img {
    /*width: 100%!important;*/
    height: auto !important;
}

.slick-slider img:nth-child(1) {
    margin-top: 26px;
}

/* ドットのコンテナ */
.slick-dots {
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ドットの各ボタン */
.slick-dots li button {
    width: 10px !important;
    height: 10px !important;
    background-color: #858281; /* 通常時の色 */
!important border: none !important;
    border-radius: 50% !important;
    margin: 0 5px !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

/* アクティブ状態のドット */
.slick-dots li.slick-active button {
    background-color: #133558; /* アクティブ時の色 */
}

/* ボタンのテキストを非表示（アクセシビリティ対応） */
.slick-dots li button:before {
    content: '';
}


.unique-section-title {
    font-size: 48px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0;
    padding: 20px 0 100px;
    color: white;
    background-color: #133558;
    font-family: "MS Mincho", serif;
    text-align: center !important;
}

.unique-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    margin-top: -100px;
    align-items: center;
}

.unique-icons img {
    width: 120px !important;
    height: 120px !important;
    cursor: pointer; /* 画像にカーソルを当てた時にクリック可能を示す */
}

.tap-message-section {
    margin-top: 50px;
}

.tap-message {
    font-size: 24px;
    font-weight: normal;
    margin-top: 20px;
    color: #133558;
    padding: 0 20px;
    width: 95%;
    margin: 50px auto 80px;
    display: block;
    font-weight: bold;
}

.image-text-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    flex-wrap: wrap;
}

.image-container {
    box-sizing: border-box;
    overflow: hidden;
    width: 50%; /* PCで画像とテキストを並べるため、幅を50%に設定 */
    margin: 0 auto;
    position: relative;
}

.ratings {
    width: 45%; /* 残りのスペースを利用して評価部分の幅を設定 */
    box-sizing: border-box;
    padding: 20px;
    text-align: left;
    margin-top: 0; /* 上のマージンを削除 */
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider img {
    height: auto;
    width: 100%;
    flex-shrink: 0;
    display: block;
    margin: 0 auto;
}

/* スライダー全体を囲むコンテナ */
.slider-wrapper {
    position: relative;
    overflow: visible; /* 必須 */
}

/* スライダーを囲むコンテナ */
.slider-container {
    position: relative;
    overflow: visible; /* 必須 */
}

/* スライダーそのもの */
.slider {
    display: flex;
    overflow: visible; /* 画像やアイコンが隠れないように */
    position: relative;
}

/* スライダーの画像 */
.slider img {
    width: 100%;
    height: auto;
}


/* アイコンのスタイル */
.icon-wrapper {
    position: absolute;
    z-index: 999;
}

/* スライダーアイコンのスタイル */

.slider-icon {
    z-index: 999; /* 他の要素よりも上に表示 */
    width: 100px;
    height: auto;
    cursor: pointer;
}

.icon-wrapper .slider-icon {
    position: absolute;
    top: -40px;
    right: -100px;

}

/* スライダーのスタイル */
#brand-details-2,
#brand-details-4 {
    position: relative;

}


/* アイコンのスタイル */
.icon-wrapper-1 {
    position: relative;
    z-index: 999; /* アイコンが画像より上に表示されるように */
    width: 70%;
    margin: 0 auto;
}

/* スライダーアイコンのスタイル */
.icon-wrapper-1 .slider-icon {
    position: absolute;
    top: -40px;
    left: 0;
}

/* アイコンのスタイル */
.icon-wrapper-2 {
    position: relative;
    z-index: 999; /* アイコンが画像より上に表示されるように */
    width: 70%;
    margin: 0 auto;
}

/* スライダーアイコンのスタイル */
.icon-wrapper-2 .slider-icon {
    position: absolute;
    top: -40px;
    right: 0;
}


.dots {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #858281;
    border-radius: 50%;
    margin: 0 5px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.active {
    background-color: #133558;
}


.ratings p {
    /*margin: 15px 0;*/
    font-size: 20px;
    color: #133558;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
}

.button-container {
    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 20px;
}

.button-container img {
    width: 80%;
}

/*.button-container a {*/
/*    padding: 10px 20px;*/
/*    border: 2px solid transparent;*/
/*    text-decoration: none;*/
/*    font-size: 16px;*/
/*    border-radius: 25px;*/
/*    width: 200px;*/
/*    text-align: center;*/
/*    display: inline-flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    transition: all 0.3s ease;*/
/*}*/

/*.button-container a:first-child {*/
/*    border-color: #133558;*/
/*    color: #133558;*/
/*}*/

/*.button-container a:last-child {*/
/*    border-color: #cba35c;*/
/*    color: #cba35c;*/
/*}*/

/*.button-container a:hover {*/
/*    background-color: #133558;*/
/*    color: white;*/
/*}*/

/*.button-container a::after {*/
/*    content: '＞';*/
/*    font-size: 20px;*/
/*    font-weight: bold;*/
/*    color: inherit;*/
/*}*/

footer {
    padding: 20px 20px 10px;
}

.diamond-text {
    font-size: 20px;
    color: #133558;
    margin-top: 10px;
    font-weight: bold;
}

/* ポップアップのスタイル */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* ポップアップ内の画像 */
.popup-content {

    align-items: center;
    position: relative;
    width: 80vw;
    /*height: 80vh;*/
    flex-direction: row;
    gap: 20px; /* Add space between the large image and small images */
}

/* 左側の大きな画像 */
.popup-slide.active {
    width: 30%; /* 左側画像の幅 */
    height: auto;
    transform: scale(1.5);
    z-index: 1;
    opacity: 1;
}

/* 右側の小さな画像 */
.popup-slide:not(.active) {
    display: flex;
    opacity: 0.7;
    width: 10%; /* 小さい画像の幅 */
    margin: 5px;
}

/* 右側の画像を2列で表示 */
#popup-images-container {
    background: rgba(0, 0, 0, 0.8);
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
}

/* 小さな画像 */
#popup-images-container img {
    width: 40%; /* 2列分の画像幅 */
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* ポップアップ内の画像 */
.popup-content img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    border-radius: 5px;
}

/* 閉じるボタン */
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #133558;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.popup-close:hover {
    background: #cba35c;
}

/* ポップアップ内で大きい画像のスタイル */
.popup-large-image {
    display: block !important;
    text-align: center;
    margin: 0 auto;

}

#main-popup-image {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* 小さい画像のスタイル */
.popup-small-image {
    max-width: 200px !important;

    width: 20% !important; /* 2列分の幅 */
    cursor: pointer;
    margin-top: 10px;
    margin-left: 10px;

}

.popup-small-image.active {
    opacity: 1;
    transform: scale(1.1);
}

/* スマホビューでの並び順の修正 */

/* 2段目 */
#brand-details-2 .image-text-container,
#brand-details-4 .image-text-container {
    display: flex;
    flex-direction: row;
    gap: 30px;
    order: 2; /* 逆順に変更 */
}

#brand-details-2 .image-container,
#brand-details-4 .image-container {
    order: 2; /* 画像の位置を逆に */
}

#brand-details-2 .ratings,
#brand-details-4 .ratings {
    order: 1; /* テキストの位置を逆に */
}

#wrapper {
    overflow: hidden !important;
}

.content_area {
    max-width: 700px !important;
    padding: 0 40px !important;
    margin: 0 auto !important;
}

.slick-list {
    overflow: visible !important;
}

.slick-item p {
    font-size: 18px;
    line-height: 150px;
    text-align: center;
    margin: 10px;
    padding: 2%;
    background: white;
    position: relative;
}


.slick-item-img {
    margin: 0 10px; /* 左右に10pxの余白を追加 */
}

.area_content {
    width: 70%;
    margin: 0 auto 100px;
    text-align: left;
    color: #133558;
}

.head_area {
    font-size: 5rem;
    margin-bottom: 0;
}

.area_content h3 {
    margin-top: 0;
    font-size: 2rem;
}

.area_content p {
    text-align: center;
    font-size: 1.5rem;
}

.area-container {
    display: flex; /* Flexboxを適用 */
    flex-wrap: wrap; /* 行を折り返す */
    gap: 10px; /* 要素間の隙間 */
    justify-content: center; /* 水平方向に中央揃え */
    padding: 10px; /* コンテナ内の余白 */
}

.area-container a {
    flex: 0 0 calc(32.333% - 10px); /* 3列分割を設定 */
    max-width: calc(32.333% - 10px); /* 最大幅を設定 */
    text-align: center; /* 中央揃え */
    box-sizing: border-box; /* ボーダーを含めて計算 */
}

.area-container img {
    width: 100%; /* 親要素の幅いっぱいに表示 */
    height: auto; /* アスペクト比を維持 */
    object-fit: cover; /* 画像をきれいに収める */
    display: block; /* 余計なスペースを防ぐ */
}

.slick-dots {
    display: block !important;
}

@media screen and (max-width: 834px) {
    .slick-dots {
        display: block !important;
    }
}

@media screen and (max-width: 768px) {
    .unique-section-title {
        font-size: 1.8rem;
        padding-bottom: 40px !important;
    }

    .unique-icons {
        margin-top: -70px;
        gap: 5px;
        padding-bottom: 0;
    }

    .unique-icons img {
        width: 55px !important;
        height: 55px !important;

    }

    .tap-message {
        margin: 0 auto;
        font-size: 1rem;
    }

    .tap-message-section {
        margin: 0;
    }
    .slider-icon{
        display: none;
    }

    .diamond-text{
        font-size: 10px;
    }
    .ratings p{
        font-size: 9px;
    }
    .head_area{
        font-size: 2rem;
    }
    .area_content h3{
        font-size: 1rem;
    }
    .area_content p{
        font-size: 10px;
    }
    .image-text-container{
        width: 100%;
    }
    .area_content{
        width: 90%;
    }
    .button-container img{
        width: 100%;
    }



}


/*@media screen and (max-width: 560px) {*/
/*    .content_area {*/
/*        padding: 0 30px;*/
/*    }*/

/*    .slick-item p {*/
/*        font-size: 15px;*/
/*        line-height: 100px;*/
/*        margin: 5px;*/
/*        padding: 1.5%;*/
/*    }*/
/*}*/

/*@media screen and (max-width: 768px) {*/
/*    .unique-icons {*/
/*        margin-top: -80px;*/
/*        gap: 10px;*/
/*    }*/

/*    .unique-icons img {*/
/*        width: 70px !important;*/
/*        height: 70px !important;*/
/*    }*/

/*    .unique-section-title {*/
/*        padding-bottom: 60px;*/
/*    }*/

/*    .button-container {*/
/*        display: block;*/
/*        text-align: center;*/
/*    }*/

/*    .button-container a {*/
/*        width: 100%;*/
/*        margin-bottom: 10px;*/
/*    }*/

/*    .image-container {*/
/*        max-width: 100%;*/
/*        width: 80%;*/
/*    }*/

/*    .ratings {*/
/*        width: 80%;*/
/*        margin: 0 auto;*/
/*    }*/

/*    .tap-message {*/
/*        font-size: 20px;*/
/*        margin: 0;*/
/*    }*/

/*    .tap-message-section {*/
/*        overflow: hidden;*/
/*    }*/


/*    #brand-details-2 .image-text-container {*/
/*        flex-direction: column; !* 縦方向に変更 *!*/
/*        order: initial; !* デフォルトの順番に戻す *!*/
/*    }*/

/*    #brand-details-2 .image-container {*/
/*        order: initial; !* 画像の位置を元に戻す *!*/
/*    }*/

/*    #brand-details-2 .ratings {*/
/*        order: initial; !* テキストの位置を元に戻す *!*/
/*    }*/

/*    .image-text-container {*/
/*        width: 95%;*/
/*        display: block;*/
/*        padding: 20px 0;*/
/*        position: relative;*/
/*    }*/

/*    .icon-wrapper {*/
/*        top: 0;*/
/*    }*/
/*    .icon_1{*/
/*        margin-top: 50px;*/
/*    }*/

/*    .icon-wrapper-1 .slider-icon{*/
/*        left: -40px;*/
/*    }*/

/*    .icon-wrapper-2 {*/
/*        width: 95%;*/

/*    }*/
/*    .button-container img{*/
/*        width: 100%;*/
/*        margin-bottom: 10px;*/
/*    }*/

/*    .area_content {*/
/*        width: 95%;*/
/*    }*/

/*    .area-container a {*/
/*        flex: 0 0 calc(100%); !* 3列分割を設定 *!*/
/*        max-width: calc(100%); !* 最大幅を設定 *!*/
/*        text-align: center; !* 中央揃え *!*/
/*        box-sizing: border-box; !* ボーダーを含めて計算 *!*/
/*    }*/
/*}*/