@charset "utf-8";
/*レスポンシブ化*/
/*共通*/
@media screen and (max-width: 768px), print {
    body {
        width: 100%;
    }

    :root {
        --header-height: 60px;
    }

    :target {
        scroll-margin-top: var(--header-height);
    }
}

/*電話*/
.tel_link {
    pointer-events: none;
}

@media screen and (max-width: 768px), print {
    .tel_link {
        pointer-events: initial;
    }
}

/*汎用css*/
@media screen and (max-width: 768px), print {
    /*横幅*/
    .primary_width {
        width: 100%;
        box-sizing: border-box;
        padding: 0 15px;
        margin-bottom: 30px;
    }

    .primary_inner {
        padding: 0;
    }

    /*タイトル*/
    .order_title {
        margin: 0 0 20px;
    }

    .order_title h2 {
        padding: 7px 5px 7px 20px;
        font-size: 20px;
        background: linear-gradient(135deg, transparent 9px, #ede0d9 9px);
    }

    .order_title h2::before {
        width: 13px;
        height: 13px;
        background: linear-gradient(135deg, transparent 9px, #d7b2a0 9px);
    }

    /*ボタンデザイン*/
    .primary_btn {
        width: 100%;
    }

    .primary_btn_title {
        font-size: min(5vw, 17px) !important;
        padding: 16px 20px;
    }

    .primary_btn_arrow {
        font-size: 20px !important;
    }

    /* font-size */
    .primary_font_size p,
    .primary_font_size li,
    .primary_font_size span,
    .primary_font_size a,
    .primary_font_size th,
    .primary_font_size td,
    .primary_font_size dt,
    .primary_font_size dd {
        font-size: 16px;
        line-height: 1.8;
    }

    /*border*/
    .border_light_brown {
        padding: 15px;
    }
}

/*ヘッダー*/
.sp_head_inner {
    display: none;
}

@media screen and (max-width: 768px), print {
    .pc_account_list {
        display: none;
    }

    .sp_account_list {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .sp_account_item {
        font-size: 14px;
        text-align: center;
        width: 48%;
        background: #65bfd6;
    }

    .sp-nav .sp_account_item a {
        margin: 0;
        padding: 5px;
    }

    .sp_account_item_cart_icon {
        font-size: 28px;
    }

    .sp_account_item_icon {
        margin-right: 5px;
    }

    .pc_head_inner {
        display: none;
    }

    .sp_head_inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        width: 100%;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 50;
    }
    /* ハンバーガーアイコン */
    .hamburger {
        position: relative;
        right: 0;
        top: 0;
        width: 60px;
        height: 60px;
        cursor: pointer;
        z-index: 300;
        background: #fff;
    }

    .hamburger__line {
        position: absolute;
        width: 30px;
        height: 3px;
        right: 10px;
        background: #383838;
        transition: all 0.5s;
    }

    .hamburger__line--1 {
        top: 15px;
    }

    .hamburger__line--2 {
        top: 25px;
    }

    .hamburger__line--3 {
        top: 35px;
    }

    .hamburger__txt {
        position: absolute;
        width: 50px;
        right: 0;
        color: #fff;
        transition: all 0.5s;
        text-align: center;
        top: 18px;
    }

    /*ハンバーガーがクリックされたら*/
    .open .hamburger__line--1 {
        transform: rotate(-45deg);
        top: 25px;
    }

    .open .hamburger__line--2 {
        opacity: 0;
    }

    .open .hamburger__line--3 {
        transform: rotate(45deg);
        top: 25px;
    }

    /* ナビ */
    .sp-nav {
        margin: 60px 0 0;
        padding: 0;
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        height: calc(100vh - 60px);
        transition: all 0.5s;
        z-index: 200;
        overflow-y: auto;
        background: #fff;
    }

    /*ハンバーガーがクリックされたら出現*/
    .open .sp-nav {
        right: 0;
    }

    /* black-bg(ハンバーガーメニュー解除用bg)*/
    .black-bg {
        position: fixed;
        left: 0;
        top: 60px;
        width: 100vw;
        height: 100vh;
        z-index: 5;
        background-color: #000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s;
        cursor: pointer;
        z-index: 100;
    }

    /*ハンバーガーメニューが開いたら表示*/
    .open .black-bg {
        opacity: 0.3;
        visibility: visible;
    }

    /*メニューのデザイン*/
    .sp-nav ul {
        color: #383838;
        padding: 10px 15px 20px;
        margin: 0;
        background: #65bfd6;
    }

    .sp-nav li {
        list-style: none;
        padding: 10px 0;
        border-bottom: 1px solid #fff;
        font-weight: bold;
    }

    .sp-nav a {
        text-decoration: none;
        color: #fff;
        display: block;
        margin: -10px -15px;
        padding: 10px 15px;
    }

    .sp-nav a p {
        color: #fff;
    }

    .sp_head_inner .logo {
        width: 75%;
        height: auto;
        padding-left: 10px;
    }

    .sp_info_inner {
        padding: 10px 15px 5px;
        text-align: center;
        background: #fff;
    }

    .sp_info_inner .tel_link {
        padding: 0;
        margin: 0 auto;
    }

    .sp_info_inner .recept_time {
        margin: 10px 0 0;
    }

    ._sp_foot {
        padding: 20px 15px 30px;
        background: #fff;
    }

    ._sp_foot .pay_inner img {
        position: initial;
    }

    ._sp_foot p,
    ._sp_foot .second_left h1,
    ._sp_foot .second_right h1,
    ._sp_foot .second_right h2,
    ._sp_foot .second_right p {
        font-size: 14px;
    }
}

/*トップ*/
@media screen and (max-width: 768px), print {
    .hero .hero_img {
        width: 100%;
        height: auto;
    }

    .lead_inner {
        padding: 35px 15px 20px;
    }

    .lead_inner h1 {
        font-size: min(7vw, 32px);
    }

    .lead_inner h1 span {
        left: -25px;
        top: -25px;
    }

    .lead_inner h1 span img {
        width: 75%;
        height: auto;
    }

    .lead_inner h2 {
        font-size: min(4.8vw, 24px);
        padding: 20px 0;
    }

    .lead_inner p {
        font-size: min(3.65vw, 18px);
    }
}

/*サンプル*/
@media screen and (max-width: 768px), print {
    .sample {
        padding: 0 15px;
    }

    .slide_wrap {
        margin-bottom: 30px;
    }

    .slide_items .item {
        width: 300px;
        height: 225px;
    }

    .line_up_btn {
        width: 100%;
        max-width: 400px;
        margin: 20px auto 0;
    }

    .line_up_btn .btn {
        max-width: none;
        font-size: min(5vw, 17px);
        padding: 16px 20px;
    }

    .line_up_btn .btn_white {
        min-width: 60px;
    }
}

/*おすすめ*/
@media screen and (max-width: 768px), print {
    .appeal_inner ul {
        margin-top: 30px;
        margin-bottom: 40px;
        padding-top: 30px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 30px;
    }

    .appeal_inner li:nth-child(2) {
        margin-top: 30px;
    }

    .media_thumb {
        width: 100%;
    }

    .media_thumb,
    .media_thumb._reverse {
        flex-direction: column;
        align-items: initial;
    }

    .media_thumb .canvas,
    .media_thumb .canvas._reverse {
        margin: 0 auto 20px;
    }

    .media_body {
        margin: 0;
    }

    .media_body .media_catch {
        font-size: min(7vw, 32px);
        margin-left: 25px;
        margin-bottom: 15px;
    }

    .media_body .media_txt {
        font-size: 16px;
    }

    .media_catch span {
        top: -20px;
        left: -25px;
    }

    .media_catch span img {
        width: 75%;
        height: auto;
    }
}

/*商品一覧*/
.line_up_inner .title br {
    display: none;
}

.bunner_inner h2 br {
    display: none;
}

@media screen and (max-width: 768px), print {
    .line_up_inner {
        padding: 0 15px;
    }

    .line_up_inner .title {
        font-size: min(7vw, 32px);
        text-align: center;
    }

    .line_up_inner .title br {
        display: initial;
    }

    .line_up_inner .title span {
        top: -25px;
    }

    .line_up_inner .title span img {
        width: 75%;
        height: auto;
    }

    .line_up_inner .sub_title {
        font-size: 14px;
    }

    .line_up_inner .info_txt {
        font-size: 16px;
    }

    .btn_wrapper {
        flex-direction: column;
        margin: 10px 0 30px;
    }

    .rect_btn,
    .square_btn {
        margin-top: 20px;
    }

    .rect_btn .btn,
    .square_btn .btn {
        font-size: min(5vw, 17px);
        padding: 16px 20px;
    }

    .square_inner_products {
        margin-bottom: 60px;
    }

    .rect_inner,
    .square_inner {
        padding: 0 15px;
    }

    .rect_inner {
        margin-bottom: 30px;
    }

    .rect_inner .title_inner,
    .square_inner .title_inner {
        width: 100%;
        margin: 30px auto 20px;
    }

    .rect_inner .title_inner img,
    .square_inner .title_inner img {
        width: 100%;
    }

    .rect_list {
        gap: 15px;
        grid-template-columns: repeat(2, 1fr);
    }

    .rect_items {
        width: 100%;
    }

    .top_inner {
        flex-direction: column;
    }

    .top_inner .square {
        margin: 10px;
    }

    .price_inner h3 {
        font-size: min(3.75vw, 20px);
    }

    .price_inner h4 {
        font-size: min(4vw, 22px);
    }

    .price_inner h5 {
        font-size: 25px;
        margin: 7px 0;
    }

    .bottom_inner .bottom_txt {
        text-align: left;
        padding-left: 6vw;
        font-size: min(4vw, 20px);
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .bottom_inner .bottom_txt span {
        right: 10px;
    }

    .bunner_inner {
        width: 100%;
        padding: 0 15px;
        margin: 30px 0 0 0;
    }

    .bunner_inner img {
        max-width: 100%;
        height: auto;
    }

    .bunner_inner h2 br {
        display: initial;
    }

    .bunner_inner h2,
    .bunner_inner h3 {
        font-size: 18px;
    }

    .bunner_inner h3 {
        flex-direction: column;
    }

    .bunner_inner h3 span {
        margin-right: 10px;
        position: initial;
        margin-right: 0;
    }
}

/*こだわり*/
@media screen and (max-width: 768px), print {
    .obsession_inner ul {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 30px;
        padding: 30px 15px;
    }

    .obsession_inner li {
        width: 100%;
    }

    .ob_img {
        width: 100%;
        height: auto;
    }

    .obsession_inner .txt_inner {
        padding: 0 0 20px;
    }

    .obsession_inner .txt_inner span img {
        width: 75%;
        height: auto;
    }

    .obsession_inner h2 {
        font-size: min(4.5vw, 20px);
        padding-left: 28px;
    }

    .obsession_inner h3 {
        font-size: min(6.5vw, 34px);
    }

    .obsession_inner p {
        font-size: 16px;
    }
}

/*お問い合わせ*/
@media screen and (max-width: 768px), print {
    .contact_inner {
        padding: 30px 15px;
    }

    .contact_inner .contact_box {
        padding: 30px 15px 20px;
    }

    .contact_box .txt_inner .title {
        font-size: min(7vw, 32px);
    }

    .contact_box .txt_inner .title span {
        top: -25px;
    }

    .contact_box .txt_inner .title span img {
        width: 75%;
        height: auto;
    }

    .contact_box .txt_inner p {
        font-size: 16px;
        margin: 20px auto;
    }

    .contact_items {
        margin: 0 auto;
        flex-direction: column;
        padding: 0;
    }

    .contact_items .info_inner2 {
        flex-direction: column;
        align-items: center;
    }

    .contact_items .info_inner2 .recept_time {
        margin-left: 0;
        margin-top: 20px;
    }

    .mail_btn {
        width: 100%;
        max-width: 400px;
        margin: 20px auto 0;
    }

    .mail_btn .btn {
        max-width: none;
        font-size: min(5vw, 22px);
        padding: 16px 20px;
    }

    .mail_btn .btn_white {
        min-width: 60px;
    }
}

/*フッター*/
.sp_foot_bottom {
    display: none;
}

@media screen and (max-width: 768px), print {
    .foot_top {
        flex-direction: column;
        padding: 30px 15px;
        align-items: center;
    }

    .foot_top ul li {
        margin: 0 0 0 10px;
    }

    .foot_top ul {
        position: relative;
        bottom: -8px;
    }

    .foot_second {
        margin: 20px auto;
        padding: 0 15px;
    }

    .second_inner {
        flex-direction: column;
    }

    .pay_inner {
        padding-left: 0;
    }

    .pay_inner p {
        margin: 10px 0;
    }

    .pay_inner img {
        width: 100%;
        height: auto;
        left: -4px;
    }

    .second_inner .second_left {
        margin-bottom: 10px;
    }

    .second_inner .second_right {
        margin-left: 0;
    }

    .second_inner .second_right h2 {
        margin: 10px 0;
    }

    .foot_menu_inner {
        padding: 30px 15px;
        flex-direction: column;
    }

    .foot_menu {
        display: none;
    }

    .sp_foot_bottom {
        display: block;
        font-size: 12px;
        color: #fff;
        font-weight: 400;
        text-align: center;
        margin: 20px 0 0;
    }

    .foot_bottom {
        display: none;
    }
}

/*下層ページ　トップ　共通*/
@media screen and (max-width: 768px), print {
    .under_top_bg {
        padding: 30px 0;
    }

    .under_top_bg h1 {
        font-size: 24px;
        margin-bottom: 0;
    }

    .link_inner {
        margin-bottom: 20px;
    }
}

/*ご注文ガイド*/
/*ご注文　トップ*/
@media screen and (max-width: 768px), print {
    .order_top_inner {
        margin-bottom: 20px;
    }

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

    .order_how_to_inner {
        margin-bottom: 30px;
        padding: 0 15px;
    }

    .how_to_items {
        width: 100%;
        padding: 20px 20px 0;
    }

    .how_to_items ul li figure img {
        width: 100%;
        height: auto;
    }

    .how_to_items ul li .txt_inner {
        bottom: 25px;
    }

    .how_to_items ul li h3 {
        width: 100%;
        font-size: min(3.5vw, 14px);
        margin-bottom: 10px;
    }

    .how_to_items ul li p {
        font-size: 14px;
        margin: 0;
    }
}

/*お支払い方法*/
@media screen and (max-width: 768px), print {
    .order_payment_inner {
        padding: 0 15px;
        overflow-x: hidden;
    }

    .order_payment_inner .txt_inner {
        margin-left: 0;
    }

    .order_payment_inner .txt_inner br {
        display: none;
    }

    .order_payment_inner .txt_inner span {
        font-size: 18px;
    }

    .pay_wrapper {
        width: 100%;
    }

    .pay_wrapper img {
        width: 50%;
        height: auto;
    }

    .payment_item {
        width: 100%;
        margin-bottom: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-left: 0;
    }

    .payment_item img {
        margin-bottom: 10px;
    }

    .payment_item .item02 {
        margin-left: -5px;
    }
}

/*配送方法*/
.delivery_table01 th br {
    display: none;
}

.delivery_table01 th .br_must {
    display: initial;
}

@media screen and (max-width: 768px), print {
    .order_delivery_inner {
        width: 100%;
        padding: 0 15px;
        border-bottom: none;
    }

    .order_delivery_inner .txt_inner {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .delivery_wrapper {
        width: 100%;
    }

    .delivery_wrapper img {
        width: 50%;
        height: auto;
    }

    .delivery_table01 {
        margin-bottom: 10px;
    }

    .delivery_table01 th br {
        display: initial;
    }

    .delivery_table01 td,
    .delivery_table02 td {
        padding: 10px;
    }

    .delivery_table01 th,
    .delivery_table02 .sagawa_th,
    .delivery_table02 .yamato_th,
    .delivery_table02 .big_size_th {
        width: 33%;
        max-width: 130px;
        padding: 10px;
    }

    .delivery_table02 {
        padding-bottom: 20px;
        margin-bottom: 0;
        border-bottom: 1px solid #d7b2a0;
    }
}

/*特商法*/
@media screen and (max-width: 768px), print {
    .commercial_inner {
        margin-top: -30px;
        padding: 60px 15px 0;
    }

    .commercial_table {
        width: 100%;
        margin: 15px 0 30px;
    }

    .commercial_table th,
    .commercial_table td {
        font-size: 14px;
        padding: 10px 0;
    }

    .commercial_table th {
        padding-left: 0;
        width: 33%;
    }

    .commercial_table td {
        padding-right: 0;
        padding-left: 10px;
    }
}

/*商品一覧*/
@media screen and (max-width: 768px), print {
    .under_btn {
        padding: 0 15px;
        margin-top: 0;
    }

    .under_btn .rect_btn {
        margin-top: 0;
    }
}

/*個人情報保護方針*/
@media screen and (max-width: 768px), print {
    .privacy_txt_inner {
        width: 100%;
        padding: 0 15px;
        margin-bottom: 30px;
    }

    .privacy_txt_inner .txt {
        margin-top: 30px;
        padding: 30px 0 0;
    }
}

/*お問い合わせページ*/
@media screen and (max-width: 768px), print {
    .contac_heading {
        width: 90%;
        padding: 15px;
    }

    .contact_wrap {
        width: 90%;
        margin-top: 40px;
    }

    .base_table th,
    .base_table td {
        display: block;
        width: 100%;
    }

    .base_table th {
        padding-left: 0;
        padding-bottom: 5px;
    }

    .base_table td {
        padding: 0;
    }

    .base_table .contact_contents {
        padding-top: 15px;
    }

    .base_table .must {
        float: none;
        top: 0;
        margin-left: 5px;
    }
}

/*データ入稿フォーム*/
@media screen and (max-width: 768px) {
    .data_form_table_under {
        padding-bottom: 30px;
    }

    .fukiko {
        top: -3.6rem !important;
        left: 0 !important;
    }
}

/* 会員ログイン */
@media screen and (max-width: 768px), print {
    .common_wrap {
        margin-top: 60px;
    }

    .form_title_members {
        font-size: 16px;
    }

    .btn_passview {
        top: 4px;
    }

    .btn_passview button {
        font-size: 14px;
    }

    input.input_design01 {
        width: 100% !important;
        height: 33px !important;
    }
}

/* マイページ */
@media screen and (max-width: 768px), print {
    .my_account_wrap {
        padding: 0 15px;
    }

    /* お客様の注文履歴 */
    .my_account_order_table_wrap {
        border: 1px solid #dfdfdf;
    }

    .my_account_order_table tr {
        display: block;
    }

    .my_account_order_table tr:first-child {
        display: none;
    }

    .my_account_order_table tr:nth-child(n + 3) {
        border-top: 1px solid #dfdfdf;
        margin-top: 10px;
    }

    .my_account_order_table td {
        text-align: right;
        display: block;
        width: 100% !important;
        position: relative;
        border: none;
        border-bottom: 1px solid #dfdfdf;
        padding: 0 5px 0 0;
    }

    .my_account_order_table td::before {
        color: #fff;
        text-align: left;
        position: absolute;
        display: block;
        content: attr(data-label);
        min-width: 170px;
        background: #65bfd6;
        padding-left: 5px;
    }

    /* 注文履歴詳細 */
    .order_details_list dt {
        background: #eeeeee;
    }

    .order_details_list dt,
    .order_details_list dd {
        width: 100%;
    }

    .my_account_order_table_details_wrap {
        overflow-x: auto;
    }

    .my_account_order_table_details {
        width: 100%;
        min-width: 600px;
    }

    /* データ・入稿について */
    .template_data_wrap {
        width: 100%;
        flex-wrap: wrap;
    }

    .template_data_list_s {
        margin-top: 60px;
    }

    .template_data_item {
        box-sizing: border-box;
        padding: 18px 15px;
    }

    .template_data_item_heading {
        font-size: 20px !important;
    }

    .template_data_item_f {
        border-right: none;
    }

    .template_data_item_contents_title {
        text-align: center;
        margin-bottom: 5px;
    }

    .template_data_item_contents_title_large {
        display: inline-block;
        margin-right: 15px;
    }

    .template_data_item_contents {
        flex-direction: column;
        align-items: inherit;
    }

    .template_data_item_contents_btn {
        width: 80%;
        margin: 0 auto;
        padding: 10px 10px 10px 20px;
    }
}