@charset "UTF-8";

/*   全体の設定  */
html {
    scroll-behavior: smooth;
}
body,
html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
body {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    font-size: 100%;
    line-height: 1.7;
    color: #333;   
    background-color: white;
}
img {
    width: 100%;
    height: auto;
}
.menu li a:hover {
    background-color: #eee;
}


/* -----スマホ表示用----- */
@media (max-width: 430px) {

   /* ---ヘッダー--- */
   /* 全体 */
    .header-page {
        width: 100%;
        height: 70px;
        padding: 0 20px;
        border-bottom: 1px solid #ccc;
        background-color: white;
        position: fixed; /* ヘッダーを固定 */
        top: 0;          /* 画面上部に固定 */
        left: 0;         /* 画面左に固定 */
        z-index: 1000;   /* ヘッダーを最前面に表示 */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* ヘッダーの左側 */
    .header-left{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .rogo-wrap {
        width: 150px;
        height: auto;
    }
    /* ヘッダーの右側 */
    .header-right{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
    }
    /* ログインアイコン */
    .login-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    .login-icon img {
        width: 30px;
        height: auto;
    }
    .login-icon p {
        font-size: 10px;
    }
    /* カートアイコン */
    .cart-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    .cart-icon img {
        width: 30px;
        height: auto;
    }
    .cart-icon p {
        font-size: 10px;
    }
    /* ハンバーガーアイコンのスタイル */
    .hamburger {
        width: 45px;
        height: 35px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }
    .bar {
        width: 100%;
        height: 2px;
        background-color: #333;
    }
    /* ナビゲーションのスタイル */
    #menu {
        display: none;
        width: 200px;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 53px;
        right: 3px;
        background-color: white;
        list-style: none;
    }
    #menu li {
        border-left: 1px solid #ccc;   /* 左の境界線 */
        border-right: 1px solid #ccc;  /* 右の境界線 */
        border-bottom: 1px solid #ccc; /* 下の境界線 */
    }
    #menu li:first-child {
        border-top: 1px solid #ccc; /* 最初のリストアイテムにだけ上の境界線を追加 */
    }
    #menu li a {
        display: block;
        padding: 10px;
        color: #333;
        text-decoration: none;
    }

    /* ---トップページ--- */
    /* ページ全体 */
    .top-page {
        margin-top: 70px;
        padding: 20px;
    }
    /* トップ画像のスライダー */
    .slider-container {
        width: 100%; /* コンテナの幅 */
        overflow: hidden; /* はみ出した画像を隠す */
        position: relative;
    }
    .slider {
        display: flex;
        width: 300%; /* 画像の数 × 100% */
        transition: transform 0.5s ease-in-out;
    }
    
    .slider img {
        width: 100%; /* 画面幅いっぱい */
        height: auto;
    }
    /* スライダーのボタン */
    .slider-button {
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
    .slider-button p {
        font-size: 20px;
        font-weight: bold;
    }
    .slider-button .center {
        width: 10px;  /* 丸の直径 */
        height: 10px; /* 丸の直径 */
        background-color: #333; /* 丸の色 */
    }
    /* お知らせの部分 */
    .notice {
        margin-top: 32px;
    }
    .notice h1 {
        font-size: 20px;
    }
    .notice .line {
        width: 100%;
        height: 1px;
        margin: 6px 0;
        background-color: #ccc;
    }
    .notice p {
        padding: 3px 0;
    }
    .notice h2 {
        font-size: 14px;
        font-weight: bold;
    }
    .notice span {
        font-size: 14px;
    }
    /* 商品画像表示部分 */
    .merchandise {
        margin-top: 32px;
    }
    .merchandise h1{
        font-size: 20px;
    }
    .merchandise .container{
        margin-top: 16px;
        display: grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows: auto auto;
        gap:5px;
    }
    .merchandise .item{
        border: 1px solid #ccc;
    }
    .item img {
        width: 100%;
        border-bottom: 1px solid #ccc;
    }
    .item p {
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 14px;
        line-height: 1.5;
    }
    .merchandise h2{
        display: block;
        width: fit-content;/* テキスト幅に合わせる */
        margin-top: 16px;
        font-size: 16px;
        text-align: right;
        margin-left: auto;
        border-bottom: 1px solid #333;
    }
    /* 受付時間・電話番号 */
    .reception-tel {
        margin-top: 20px;
        text-align: center;
    }

    /* -----プライバシーポリシーのページ----- */
    /* 全体 */
    .privacy-page {
        margin-top: 50px;
        padding: 20px;
    }
    .privacy-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* プライバシーポリシーの内容 */
    .privacy-text {
        margin-top: 16px;
    }
    .privacy-text h2 {
        font-size: 16px;
    }
    .privacy-text p {
        font-size: 16px;
    }

    /* -----よくあるご質問のページ----- */
    /* 全体 */
    .qa-page {
        margin-top: 50px;
        padding: 20px;
    }
    .qa-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* 項目 */
    .qa-item {
        margin-top: 16px;
        display: grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows: auto auto;
        gap:10px;
    }
    .qa-item p{
        border: 1px solid #ccc;
        text-align: center;
    }
    /* よくあるご質問の内容 */
    .qa-answer {
        margin-top: 32px;
        scroll-margin-top: 80px;
    }
    .qa-answer h2 {
        font-size: 16px;
        text-align: center;
    }
    .qa-box {
        margin-top: 16px;
        padding: 10px;
        border: 1px solid #ccc;
    }
    .qa-box p {
        margin-top: 8px;
        color: #fb5501;
    }

    /* -----ご利用ガイドのページ----- */
    /* 全体 */
    .guide-page {
        margin-top: 50px;
        padding: 20px;
    }
    .guide-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* 項目 */
    .guide-item {
        margin-top: 16px;
        display: grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows: auto auto;
        gap:10px;
    }
    .guide-item p{
        border: 1px solid #ccc;
        text-align: center;
    }
    /* ガイド項目ごとの説明 */
    .guide-explanation {
        margin-top: 32px;
        scroll-margin-top: 80px;
    }
    .guide-explanation h2 {
        font-size: 16px;
        text-align: center;
    }
    .guide-box {
        margin-top: 16px;
        padding: 10px;
    }
    .guide-box p {
        margin-top: 8px;
    }

    /* -----お問い合わせのページ----- */
    /* 全体 */
    .contact-page {
        margin-top: 50px;
        padding: 20px;
    }
    .contact-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* お問い合わせページの説明 */
    .contact-text {
        margin-top: 16px;
    }
    .contact-text p {
        font-size: 16px;
    }
    .contact-text small {
        display: inline-block;
        margin-top: 8px;
        color: #ff0000;
    }
    /* お問い合わせフォーム */
    #contact-form {
        margin-top: 32px;
    }
    #contact-form p {
        text-align: left;
    }
    #contact-form small {
        margin-left: 5px;
        color: #ff0000;
        font-size: 16px;
    }
    /* フォームの項目別親要素 */
    .form-subject {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
    }
    .form-text {
        margin-top: 16px;
    }
    .form-name {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
    }
    .form-name .item-wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        gap:10px;
    }
    .form-furigana {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
    }
    .form-furigana .item-wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        gap:10px;
    }
    .form-email {
        margin-top: 16px;
    }
    .form-confirmation {
        margin-top: 16px;
    }
    .send-button {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* タイプ別のスタイル */
    select {
        appearance: auto;
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    textarea {
        width: 100%; 
        height: 150px; 
        padding: 10px 15px; 
        font-size: 16px; 
        border: 1px solid #ccc;
        background-color: #fcf8f0;
    }
    #contact-form input[type="text"] ,
    #contact-form input[type="email"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    #contact-form input[type="submit"] {
        width: 280px;
        height: 48px;
        margin-top: 32px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        color: white;
        background-color: #000;  
    }

    /* ---ログインページのボディ部分--- */
    /* ページ全体 */
    .login-page {
        margin-top: 50px;
        padding: 20px;
    }
    .login-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    .login-page h2 {
        margin-top: 20px;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
    }
    .login-page p {
        margin-top: 15px;
        font-size: 14px;
        text-align: left;
    }
    /* ログイン用フォーム */
    .login-form {
        margin-top: 32px;
    }
    .login-form input[type="text"] ,
    .login-form input[type="password"] {
        width: 100%;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    .login-form input[type="submit"] {
        width: 100%;
        margin-top: 32px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        color: white;
        background-color: #000;  
    }

    /* ---会員新規登録規約ページのボディ部分--- */
    /* ページ全体 */
    .new_terms-page {
        margin-top: 50px;
        padding: 20px;
    }
    .new_terms-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    .new_terms-page h2 {
        margin-top: 20px;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
    }
    /* 会員規約についての説明 */
    .new_terms-page .explanation {
        padding: 15px 25px;
        background-color: #ececec;
    }
    .explanation p {
        margin-top: 15px;
        font-size: 14px;
        text-align: left;
    }
    /* 規約内容 */
    .new_terms-page .terms {
        height: 250px;
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        overflow: auto; /* 内容がはみ出たらスクロール */
    }
    .terms h1 {
        margin-bottom: 10px;
        padding: 0;
        font-size: 15px;
        text-align: left;
    }
    /* 同意有無のボタン */
    .new_terms-page .button {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:15px;
    }
    .button span {
        width: 280px;
        height: 48px;
        border: 1px solid #130f3a;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* ---会員情報登録ページのボディ部分--- */
    /* ページ全体 */
    .member_registration-page {
        margin-top: 50px;
        padding: 20px;
    }
    .member_registration-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* 会員情報登録についての説明 */
    .member_registration-page h2 {
        margin-top: 20px;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
    }
    .member_registration-page p {
        margin-top: 15px;
        font-size: 14px;
        text-align: center;
    }
    /* 会員情報登録用フォーム */
    #registration-form {
        margin-top: 32px;
    }
    #registration-form p {
        text-align: left;
    }
    #registration-form input[type="text"] ,
    #registration-form input[type="tel"] ,
    #registration-form input[type="email"] ,
    #registration-form input[type="password"] {
        width: 100%;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    #registration-form input[type="submit"] {
        width: 100%;
        margin-top: 32px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        color: white;
        background-color: #000;  
    }

    /* ----- フッダー ----- */
    /* 全体 */
    .footer-page {
        width: 100%;
        height: auto;
        padding: 20px;
        background: white;
    }
    .footer-page a:hover {
        text-decoration: underline;
        text-underline-offset: 4px; /* アンダーラインを3px下にずらす */
    }
    .footer-page small {
        font-size: 13px;  
    }
    /* リスト部分の表示 */
    .footer-list {
        display: flex;
        justify-content: space-around;
    }
    .footer-list .line {
        width: 100%;
        height: 1px;
        margin: 16px 0;
        background-color: #ccc;
    }
    .footer-list ul {
        font-size: 14px;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .footer-list li {
        margin-bottom: 16px; /* アイテム間の余白を調整 */
    }
    /* ソーシャルメディアアイコンの表示部分 */
    .footer-media {
        font-size: 13px;
        text-align: center;
    }
    .footer-media .line {
        width: 100%;
        height: 1px;
        margin: 16px 0;
        background-color: #ccc;
    }
    .footer-media ul {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        list-style: none; /* リストの「・」を消す */
    }
    .footer-media li:first-child {
        margin-left: 0;
    }
    .footer-media li {
        margin-left: 16px;
    }
    .social-icon img {
        width: 36px;
        height: 36px;
    }
    .footer-copyright {
        margin-top: 16px;
        color: #666;
        text-align: center;
    }
}

/*  タブレット表示用  */
@media (min-width: 768px) and (max-width: 1024px) {

   /* ---ヘッダー--- */
   /* 全体 */
   .header-page {
        width: 100%;
        height: 70px;
        padding: 0 40px;
        border-bottom: 1px solid #ccc;
        background-color: white;
        position: fixed; /* ヘッダーを固定 */
        top: 0;          /* 画面上部に固定 */
        left: 0;         /* 画面左に固定 */
        z-index: 1000;   /* ヘッダーを最前面に表示 */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* ヘッダーの左側 */
    .header-left{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .rogo-wrap {
        width: 150px;
        height: auto;
    }
    /* ヘッダーの右側 */
    .header-right{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* ログインアイコン */
    .login-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    .login-icon img {
        width: 30px;
        height: auto;
    }
    .login-icon p {
        font-size: 10px;
    }
    /* カートアイコン */
    .cart-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    .cart-icon img {
        width: 30px;
        height: auto;
    }
    .cart-icon p {
        font-size: 10px;
    }
    /* ハンバーガーアイコンのスタイル */
    .hamburger {
        width: 45px;
        height: 35px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }
    .bar {
        width: 100%;
        height: 2px;
        background-color: #333;
    }
    /* ナビゲーションのスタイル */
    #menu {
        display: none;
        width: 200px;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 53px;
        right: 3px;
        background-color: white;
        list-style: none;
    }
    #menu li {
        border-left: 1px solid #ccc;   /* 左の境界線 */
        border-right: 1px solid #ccc;  /* 右の境界線 */
        border-bottom: 1px solid #ccc; /* 下の境界線 */
    }
    #menu li:first-child {
        border-top: 1px solid #ccc; /* 最初のリストアイテムにだけ上の境界線を追加 */
    }
    #menu li a {
        display: block;
        padding: 10px;
        color: #333;
        text-decoration: none;
    }

    /* ---トップページ--- */
    /* 全体 */
    .top-page {
        margin-top: 70px;
        padding: 20px 40px;
    }
    /* トップ画像のスライダーショー */
    .slider-container {
        width: 100%; /* コンテナの幅 */
        overflow: hidden; /* はみ出した画像を隠す */
        position: relative;
    }
    .slider {
        display: flex;
        width: 300%; /* 画像の数 × 100% */
        transition: transform 0.5s ease-in-out;
    }
    .slider img {
        width: 100%; /* 画面幅いっぱい */
        height: auto;
    }
    /* スライダーショーのボタン */
    .slider-button {
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
    }
    .slider-button p {
        font-size: 20px;
        font-weight: bold;
    }
    .slider-button .center {
        width: 10px;  /* 丸の直径 */
        height: 10px; /* 丸の直径 */
        background-color: #333; /* 丸の色 */
    }
    /* お知らせの部分 */
    .notice {
        margin-top: 32px;
    }
    .notice h1 {
        font-size: 20px;
    }
    .notice .line {
        width: 100%;
        height: 1px;
        margin: 6px 0;
        background-color: #ccc;
    }
    .notice p {
        padding: 3px 0;
    }
    .notice h2 {
        font-size: 14px;
        font-weight: bold;
    }
    .notice span {
        font-size: 14px;
    }
    /* 商品画像表示 */
    .merchandise {
        margin-top: 32px;
    }
    .merchandise h1{
        font-size: 20px;
    }
    .merchandise .container{
        margin-top: 16px;
        display: grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows: auto auto;
        gap:15px;
    }
    .merchandise .item{
        border: 1px solid #ccc;
    }
    .item img {
        width: 100%;
        border-bottom: 1px solid #ccc;
    }
    .item p {
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 14px;
        line-height: 1.5;
    }
    .merchandise h2{
        display: block;
        width: fit-content;/* テキスト幅に合わせる */
        margin-top: 16px;
        font-size: 16px;
        text-align: right;
        margin-left: auto;
        border-bottom: 1px solid #333;
    }
    /* 受付時間・電話番号 */
    .reception-tel {
        margin-top: 20px;
        text-align: center;
    }

    /* -----プライバシーポリシーのページ----- */
    /* 全体 */
    .privacy-page {
        width: 70%;
        margin: 50px auto 0;
        padding: 20px;
    }
    .privacy-page {
        margin-top: 50px;
        padding: 20px;
    }
    .privacy-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* プライバシーポリシーの内容 */
    .privacy-text {
        margin-top: 16px;
    }
    .privacy-text h2 {
        font-size: 16px;
    }
    .privacy-text p {
        font-size: 16px;
    }

    /* -----よくあるご質問のページ----- */
    /* 全体 */
    .qa-page {
        width: 70%;
        margin: 50px auto 0;
        padding: 20px;
    }
    .qa-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* 項目 */
    .qa-item {
        margin-top: 16px;
        display: grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows: auto auto;
        gap:10px;
    }
    .qa-item p{
        border: 1px solid #ccc;
        text-align: center;
    }
    /* よくあるご質問の内容 */
    .qa-answer {
        margin-top: 32px;
        scroll-margin-top: 80px;
    }
    .qa-answer h2 {
        font-size: 16px;
        text-align: center;
    }
    .qa-box {
        margin-top: 16px;
        padding: 10px;
        border: 1px solid #ccc;
    }
    .qa-box p {
        margin-top: 8px;
        color: #fb5501;
    }

    /* -----ご利用ガイドのページ----- */
    /* 全体 */
    .guide-page {
        width: 70%;
        margin: 50px auto 0;
        padding: 20px;
    }
    .guide-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* 項目 */
    .guide-item {
        margin-top: 16px;
        display: grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows: auto auto;
        gap:10px;
    }
    .guide-item p{
        border: 1px solid #ccc;
        text-align: center;
    }
    /* ガイド項目ごとの説明 */
    .guide-explanation {
        margin-top: 32px;
        scroll-margin-top: 80px;
    }
    .guide-explanation h2 {
        font-size: 16px;
        text-align: center;
    }
    .guide-box {
        margin-top: 16px;
        padding: 10px;
    }
    .guide-box h3{
        width: fit-content;
        border-bottom: 1px solid #333;
        line-height: 1.0;
    }
    .guide-box p {
        margin-top: 10px;
    }

    /* -----お問い合わせのページ----- */
    /* 全体 */
    .contact-page {
        width: 70%;
        margin: 50px auto 0;
        padding: 20px;
    }
    .contact-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* お問い合わせページの説明 */
    .contact-text {
        margin-top: 16px;
    }
    .contact-text p {
        font-size: 16px;
    }
    .contact-text small {
        display: inline-block;
        margin-top: 8px;
        color: #ff0000;
    }
    /* お問い合わせフォーム */
    #contact-form {
        margin-top: 32px;
    }
    #contact-form p {
        text-align: left;
    }
    #contact-form small {
        margin-left: 5px;
        color: #ff0000;
        font-size: 16px;
    }
    /* フォームの項目別親要素 */
    .form-subject {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
    }
    .form-text {
        margin-top: 16px;
    }
    .form-name {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
    }
    .form-name .item-wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        gap:10px;
    }
    .form-furigana {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
    }
    .form-furigana .item-wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        gap:10px;
    }
    .form-email {
        margin-top: 16px;
    }
    .form-confirmation {
        margin-top: 16px;
    }
    .send-button {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* タイプ別のスタイル */
    select {
        appearance: auto;
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    textarea {
        width: 100%; 
        height: 150px; 
        padding: 10px 15px; 
        font-size: 16px; 
        border: 1px solid #ccc;
        background-color: #fcf8f0;
    }
    #contact-form input[type="text"] ,
    #contact-form input[type="email"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    #contact-form input[type="submit"] {
        width: 280px;
        height: 48px;
        margin-top: 32px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        color: white;
        background-color: #000;  
    }

    /* ---ログインページのボディ部分--- */
    /* ページ全体 */
    .login-page {
        margin-top: 50px;
        padding: 20px 50px;
    }
    .login-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    .login-page h2 {
        margin-top: 20px;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
    }
    .login-page p {
        margin-top: 15px;
        font-size: 14px;
        text-align: left;
    }
    /* ログイン用フォーム */
    .login-form {
        width: 450px;
        margin: 32px auto 0;
    }
    .login-form input[type="text"] ,
    .login-form input[type="password"] {
        width: 100%;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    .login-form input[type="submit"] {
        width: 100%;
        margin-top: 32px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        color: white;
        background-color: #000;  
    }

    /* ---会員新規登録規約ページのボディ部分--- */
    /* ページ全体 */
    .new_terms-page {
        margin-top: 50px;
        padding: 20px 50px;
    }
    .new_terms-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    .new_terms-page h2 {
        margin-top: 20px;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
    }
    /* 会員規約についての説明 */
    .new_terms-page .explanation {
        width: 450px;
        margin: 0 auto;
        padding: 15px 25px;
        background-color: #ececec;
    }
    .explanation p {
        margin-top: 15px;
        font-size: 14px;
        text-align: left;
    }
    /* 規約内容 */
    .new_terms-page .terms {
        width: 450px;
        margin: 0 auto;
        height: 400px;
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        overflow: auto; /* 内容がはみ出たらスクロール */
    }
    .terms h1 {
        margin-bottom: 10px;
        padding: 0;
        font-size: 15px;
        text-align: left;
    }
    /* 同意有無のボタン */
    .new_terms-page .button {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:15px;
    }
    .button span {
        width: 280px;
        height: 48px;
        border: 1px solid #130f3a;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* ---会員情報登録ページのボディ部分--- */
    /* ページ全体 */
    .member_registration-page {
        margin-top: 50px;
        padding: 20px 50px;
    }
    .member_registration-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* 会員情報登録についての説明 */
    .member_registration-page h2 {
        margin-top: 20px;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
    }
    .member_registration-page p {
        margin-top: 15px;
        font-size: 14px;
    }
    /* 会員情報登録用フォーム */
    #registration-form {
        width: 450px;
        margin: 32px auto 0;
    }
    #registration-form p {
        text-align: left;
    }
    #registration-form input[type="text"] ,
    #registration-form input[type="tel"] ,
    #registration-form input[type="email"] ,
    #registration-form input[type="password"] {
        width: 100%;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    #registration-form input[type="submit"] {
        width: 100%;
        margin-top: 32px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        color: white;
        background-color: #000;  
    }
    /* 電話番号の部分 */
    .tel p{
        margin-top: 20px;
        text-align: center;
    }

    /* ----- フッダー部分 ----- */
    /* 全体 */
    .footer-page {
        width: 100%;
        height: auto;
        padding: 20px 40px;
        background: white;
    }
    .footer-page a:hover {
        text-decoration: underline;
        text-underline-offset: 4px; /* アンダーラインを3px下にずらす */
    }
    .footer-page small {
        font-size: 13px;  
    }
    /* リスト部分の表示 */
    .footer-list {
        display: flex;
        justify-content: space-around;
    }
    .footer-list .line {
        width: 100%;
        height: 1px;
        margin: 16px 0;
        background-color: #ccc;
    }
    .footer-list ul {
        font-size: 14px;
        list-style: none; /* リストの「・」を消す */
        padding: 0;
        margin: 0;
    }
    .footer-list li {
        margin-bottom: 16px; /* アイテム間の余白を調整 */
    }
    /* ソーシャルメディアアイコンの表示部分 */
    .footer-media {
        font-size: 13px;
        text-align: center;
    }
    .footer-media .line {
        width: 100%;
        height: 1px;
        margin: 16px 0;
        background-color: #ccc;
    }
    .footer-media ul {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        list-style: none; /* リストの「・」を消す */
    }
    .footer-media li:first-child {
        margin-left: 0;
    }
    .footer-media li {
        margin-left: 16px;
    }
    .social-icon img {
        width: 36px;
        height: 36px;
    }
    /* 著作権表示部分 */
    .footer-copyright {
        margin-top: 16px;
        color: #666;
    }
}

/*  ノートパソコン向け  */
@media (min-width: 1025px) and (max-width: 1920px) {

    /* 幅の上限を1440pxに設定 */
    body {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        background-color: #f5f5f5;
    }
    /* pc表示調整用 */
    .pc-adjustment {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: white;
    }
    /* pc表示調整用（contach用） */
    .pc-adjustment-contach {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background-color: white;
    }

    /* ---ヘッダー--- */
    /* 全体 */
    .header-page {
        width: 100%;
        max-width: 1440px;
        height: 70px;
        padding: 0 50px;
        border-bottom: 1px solid #ccc;
        background-color: white;
        position: fixed; /* ヘッダーを固定 */
        top: 0;          /* 画面上部に固定 */
        left: 50%;         
        transform: translateX(-50%); /* 中央配置 */
        z-index: 1000;   /* ヘッダーを最前面に表示 */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* ヘッダーの左側 */
    .header-left{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .rogo-wrap {
        width: 150px;
        height: auto;
    }
    /* ヘッダーの右側 */
    .header-right{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* ログインアイコン */
    .login-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    .login-icon img {
        width: 30px;
        height: auto;
    }
    .login-icon p {
        font-size: 10px;
    }
    /* カートアイコン */
    .cart-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
    .cart-icon img {
        width: 30px;
        height: auto;
    }
    .cart-icon p {
        font-size: 10px;
    }
    /* ハンバーガーアイコンのスタイル */
    .hamburger {
        width: 45px;
        height: 35px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }
    .bar {
        width: 100%;
        height: 2px;
        background-color: #333;
    }
    /* ナビゲーションのスタイル */
    #menu {
        display: none;
        width: 200px;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 53px;
        right: 3px;
        background-color: white;
        list-style: none;
    }
    #menu li {
        border-left: 1px solid #ccc;   /* 左の境界線 */
        border-right: 1px solid #ccc;  /* 右の境界線 */
        border-bottom: 1px solid #ccc; /* 下の境界線 */
    }
    #menu li:first-child {
        border-top: 1px solid #ccc; /* 最初のリストアイテムにだけ上の境界線を追加 */
    }
    #menu li a {
        display: block;
        padding: 10px;
        color: #333;
        text-decoration: none;
    }

    /* ---トップページ--- */
    /* 全体 */
    .top-page {
        margin-top: 70px;
        padding: 20px 40px;
    }
    /* トップ画像のスライダーショー */
    .slider-container {
        width: 100%; /* コンテナの幅 */
        overflow: hidden; /* はみ出した画像を隠す */
        position: relative;
    }
    .slider {
        display: flex;
        width: 300%; /* 画像の数 × 100% */
        transition: transform 0.5s ease-in-out;
    }
    .slider img {
        width: 100%; /* 画面幅いっぱい */
        height: auto;
    }
    /* スライダーショーのボタン */
    .slider-button {
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50px;
    }
    .slider-button p {
        font-size: 20px;
        font-weight: bold;
    }
    .slider-button .center {
        width: 10px;  /* 丸の直径 */
        height: 10px; /* 丸の直径 */
        background-color: #333; /* 丸の色 */
    }
    /* お知らせの部分 */
    .notice {
        margin-top: 32px;
    }
    .notice h1 {
        font-size: 20px;
    }
    .notice .line {
        width: 100%;
        height: 1px;
        margin: 6px 0;
        background-color: #ccc;
    }
    .notice p {
        padding: 3px 0;
    }
    .notice h2 {
        font-size: 14px;
        font-weight: bold;
    }
    .notice span {
        font-size: 14px;
    }
    /* 商品画像表示 */
    .merchandise {
        margin-top: 32px;
    }
    .merchandise h1{
        font-size: 20px;
    }
    .merchandise .container{
        margin-top: 16px;
        display: grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows: auto auto;
        gap:15px;
    }
    .merchandise .item{
        border: 1px solid #ccc;
    }
    .item img {
        width: 100%;
        border-bottom: 1px solid #ccc;
    }
    .item p {
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 14px;
        line-height: 1.5;
    }
    .merchandise h2{
        display: block;
        width: fit-content;/* テキスト幅に合わせる */
        margin-top: 16px;
        font-size: 16px;
        text-align: right;
        margin-left: auto;
        border-bottom: 1px solid #333;
    }
    /* 電話番号の部分 */
    .reception-tel {
        margin-top: 20px;
        text-align: center;
    }

    /* -----プライバシーポリシーのページ----- */
    /* 全体 */
    .privacy-page {
        width: 70%;
        margin: 50px auto 0;
        padding: 20px;
    }
    .privacy-page {
        margin-top: 50px;
        padding: 20px;
    }
    .privacy-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* プライバシーポリシーの内容 */
    .privacy-text {
        margin-top: 16px;
    }
    .privacy-text h2 {
        font-size: 16px;
    }
    .privacy-text p {
        font-size: 16px;
    }

    /* -----よくあるご質問のページ----- */
    /* 全体 */
    .qa-page {
        width: 60%;
        margin: 50px auto 0;
        padding: 20px;
    }
    .qa-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* 項目 */
    .qa-item {
        margin-top: 16px;
        display: grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows: auto auto;
        gap:10px;
    }
    .qa-item p{
        border: 1px solid #ccc;
        text-align: center;
    }
    /* よくあるご質問の内容 */
    .qa-answer {
        margin-top: 32px;
        scroll-margin-top: 80px;
    }
    .qa-answer h2 {
        font-size: 16px;
        text-align: center;
    }
    .qa-box {
        margin-top: 16px;
        padding: 10px;
        border: 1px solid #ccc;
    }
    .qa-box p {
        margin-top: 8px;
        color: #fb5501;
    }

    /* -----ご利用ガイドのページ----- */
    /* 全体 */
    .guide-page {
        width: 60%;
        margin: 50px auto 0;
        padding: 20px;
    }
    .guide-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* 項目 */
    .guide-item {
        margin-top: 16px;
        display: grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows: auto auto;
        gap:10px;
    }
    .guide-item p{
        border: 1px solid #ccc;
        text-align: center;
    }
    /* ガイド項目ごとの説明 */
    .guide-explanation {
        margin-top: 32px;
        scroll-margin-top: 80px;
    }
    .guide-explanation h2 {
        font-size: 16px;
        text-align: center;
    }
    .guide-box {
        margin-top: 16px;
        padding: 10px;
    }
    .guide-box h3{
        width: fit-content;
        border-bottom: 1px solid #333;
        line-height: 1.0;
    }
    .guide-box p {
        margin-top: 10px;
    }

    /* -----お問い合わせのページ----- */
    /* 全体 */
    .contact-page {
        width: 70%;
        margin: 50px auto 0;
        padding: 20px;
    }
    .contact-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* お問い合わせページの説明 */
    .contact-text {
        margin-top: 16px;
    }
    .contact-text p {
        font-size: 16px;
    }
    .contact-text small {
        display: inline-block;
        margin-top: 8px;
        color: #ff0000;
    }
    /* お問い合わせフォーム */
    #contact-form {
        margin-top: 32px;
    }
    #contact-form p {
        width: 250px;
        text-align: left;
    }
    #contact-form small {
        margin-left: 5px;
        color: #ff0000;
        font-size: 16px;
    }
    /* フォームの項目別親要素 */
    .form-subject {
        display: flex;
        justify-content: left;
        align-items: center;
        gap:20px;
    }
    .form-text {
        margin-top: 16px;
        display: flex;
        justify-content: left;
        align-items: left;
        gap:20px;
    }
    .form-name {
        margin-top: 16px;
        display: flex;
        justify-content: left;
        align-items: center;
        gap:20px;
    }
    .form-name .item-wrap{
        white: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap:10px;
    }
    .form-furigana {
        margin-top: 16px;
        display: flex;
        justify-content: left;
        align-items: center;
        gap:20px;
    }
    .form-furigana .item-wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        gap:10px;
    }
    .form-email {
        margin-top: 16px;
        display: flex;
        justify-content: left;
        align-items: center;
        gap:20px;
    }
    .form-confirmation {
        margin-top: 16px;
        display: flex;
        justify-content: left;
        align-items: center;
        gap:20px;
    }
    .send-button {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /* タイプ別のスタイル */
    select {
        width: 30%;
        appearance: auto;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    textarea {
        width: 60%; 
        height: 150px; 
        padding: 10px 15px; 
        font-size: 16px; 
        border: 1px solid #ccc;
        background-color: #fcf8f0;
    }
    #contact-form input[type="text"],
    #contact-form input[type="email"] {
        width: 60%;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    #contact-form input[type="submit"] {
        width: 280px;;
        height: 48px;
        margin-top: 32px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        color: white;
        background-color: #000;  
    }

    /* ---ログインページのボディ部分--- */
    /* ページ全体 */
    .login-page {
        margin-top: 50px;
        padding: 20px 50px;
    }
    .login-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    .login-page h2 {
        margin-top: 20px;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
    }
    .login-page p {
        margin-top: 15px;
        font-size: 14px;
        text-align: left;
    }
    /* ログイン用フォーム */
    .login-form {
        width: 450px;
        margin: 32px auto 0;
    }
    .login-form input[type="text"] ,
    .login-form input[type="password"] {
        width: 100%;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    .login-form input[type="submit"] {
        width: 100%;
        margin-top: 32px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        color: white;
        background-color: #000;  
    }

    /* ---会員新規登録規約ページのボディ部分--- */
    /* ページ全体 */
    .new_terms-page {
        margin-top: 50px;
        padding: 20px 50px;
    }
    .new_terms-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    .new_terms-page h2 {
        margin-top: 20px;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
    }
    /* 会員規約についての説明 */
    .new_terms-page .explanation {
        width: 650px;
        margin: 0 auto;
        padding: 15px 25px;
        background-color: #ececec;
    }
    .explanation p {
        margin-top: 15px;
        font-size: 14px;
        text-align: left;
    }
    /* 規約内容 */
    .new_terms-page .terms {
        width: 650px;
        margin: 0 auto;
        height: 400px;
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        overflow: auto; /* 内容がはみ出たらスクロール */
    }
    .terms h1 {
        margin-bottom: 10px;
        padding: 0;
        font-size: 15px;
        text-align: left;
    }
    /* 同意有無のボタン */
    .new_terms-page .button {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:15px;
    }
    .button span {
        width: 280px;
        height: 48px;
        border: 1px solid #130f3a;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* ---会員情報登録ページのボディ部分--- */
    /* ページ全体 */
    .member_registration-page {
        margin-top: 50px;
        padding: 20px 50px;
    }
    .member_registration-page h1 {
        padding-top: 45px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    /* 会員情報登録についての説明 */
    .member_registration-page h2 {
        margin-top: 20px;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
    }
    .member_registration-page p {
        margin-top: 15px;
        font-size: 14px;
    }
    /* 会員情報登録用フォーム */
    #registration-form {
        width: 450px;
        margin: 32px auto 0;
    }
    #registration-form p {
        text-align: left;
    }
    #registration-form input[type="text"] ,
    #registration-form input[type="tel"] ,
    #registration-form input[type="date"] ,
    #registration-form input[type="email"] ,
    #registration-form input[type="password"] {
        width: 100%;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fcf8f0;
        font-size: 16px;
        outline: none;
    }
    #registration-form input[type="submit"] {
        width: 100%;
        margin-top: 32px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 18px;
        text-align: center;
        color: white;
        background-color: #000;  
    }

    /* ----- フッダー ----- */
    /* 全体 */
    .footer-page {
        width: 100%;
        height: auto;
        padding: 20px 40px;
        background: white;
    }
    .footer-page a:hover {
        text-decoration: underline;
        text-underline-offset: 4px; /* アンダーラインを3px下にずらす */
    }
    .footer-page small {
        font-size: 13px;  
    }
    /* リスト部分の表示 */
    .footer-list {
        display: flex;
        justify-content: space-around;
    }
    .footer-list .line {
        width: 100%;
        height: 1px;
        margin: 16px 0;
        background-color: #ccc;
    }
    .footer-list ul {
        font-size: 14px;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .footer-list li {
        margin-bottom: 16px; /* アイテム間の余白を調整 */
    }
    /* ソーシャルメディアアイコンの表示部分 */
    .footer-media {
        font-size: 13px;
        text-align: center;
    }
    .footer-media .line {
        width: 100%;
        height: 1px;
        margin: 16px 0;
        background-color: #ccc;
    }
    .footer-media ul {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        list-style: none;
    }
    .footer-media li:first-child {
        margin-left: 0;
    }
    .footer-media li {
        margin-left: 16px;
    }
    .social-icon img {
        width: 36px;
        height: 36px;
    }
     /* 著作権表示部分 */
    .footer-copyright {
        margin-top: 16px;
        color: #666;
        text-align: center;
    }
}