﻿@charset "UTF-8";

:root {
  /* 各レイアウト用要素幅 */
  --responsive-usr-ranking-r--item-width: 295px;
  --responsive-usr-thumbnail-t--item-width: 245px;
	
  /* コンテナ要素幅 */
  --responsive-sys-container-width: 1440px;
  --responsive-sys-content-header-width: 23%;
  --responsive-sys-content-goods-width: 1280px;
  --responsive-sys-content-mypage-width: 1280px;
  --responsive-sys-content-login-width: 1240px;

  /* ボタン幅 */
  --responsive-sys-button-width: 450px;
  --responsive-sys-snssync-button-width: 355px;

  /* 枠色 */
  --responsive-sys-border-color-gray-primary: #c8c8c8;
  --responsive-sys-border-color-gray-tertiary: #e5e5e5;
  --responsive-sys-border-color-gray-secondary: #dcdcdc;

  /* 背景色 */
  /*--responsive-sys-content-header-background-color: #f8f8f8;*/
  --responsive-sys-content-header-background-color: #F5F5F5;
  --main-highlight-background-color: #D00F31;
}
@media screen and (min-width: 769px) {
	h1,
	.h1 {
		color: #272727;
		font-size: 2.2rem;
		font-weight: bold;
		line-height: 1.45;
		border: 0;
		margin: 0 0 20px;
		padding: 20px 14px;
		background: none;
	}
	h2, .h2 {
		font-weight: bold;
	}
	/* ----H1タイトル---- */
	.block-login h1,
	.block-member-info h1,
	.block-member-info-confirmation h1,
	.block-mypage h1,
	.block-mail-news--header,
	.block-shipping-address--header,
	.block-inquiry--header,
	.block-inquiry-history--header,
	.block-purchase-history--header,
	.block-coupon-list--header,
	.block-favorite--header,
	.block-cart h1,
	.block-order-method h1,
	.block-order-estimate h1,
	.block-order-complete h1,
	.block-no-code-cms--header1,
	.block-topic-details--header,
	.block-withdrawal--header {
		margin: 20px 0;
		padding: 0 0 0 11px;
		position: relative;
	}
	/* ----H2 相当---- */
	.legend,
	/*.block-login--member-header,*/
	/*.block-login--first-time-header,*/
	.block-order-method h2,
	.block-mail-news h2,
	.block-purchase-history-detail--shipment-header,
	.block-purchase-history-detail--append-header,
	.block-guest-favorite-synchronize-title {
		font-size: clamp(1.8rem, 1vw + 1.41rem, 2.4rem);
		font-weight: 500;
		line-height: 1.45;
		padding: 0 0 8px;
		margin: 40px 0 clamp(24px, 6.15vw, 30px);
		border-bottom: 2px solid #D00F31;
	}
	.block-order-method h2 {
		margin: 40px 0 clamp(24px, 6.15vw, 20px);
	}
	/**/
	.block-topic-page {
		margin: 10px clamp(14px, 3.5vw, 40px);
	}
	/**/
	.action .btn {
		font-size: clamp(1.6rem, 1vw + 1.21rem, 2.0rem);
		border-bottom-width: 1px;
		border-radius: 30px;
		padding: 11px 0;
	}
  /* ----ページャー---- */
  .pager {
    padding: 0;
    text-align: center;
  }
  .pager-scope {
    margin-right: 0;
  }
  .pagination > * {
    padding: 0;
    background-color: #fff;
  }
	.block-goods-list-naviframe {
		text-align: center;
	}
	/* ----モーダルダイアログ---- */
	.modal-body li a {
		color: #D00F31;
	}
	/* ----テーブル---- */
	.table th {
		font-weight: 400;
	}
}
@media screen and (min-width: 960px) {
  /* ----表示・非表示---- */

  .hidden-fb {
    display: none !important;
  }

  .hidden-sb {
    display: revert !important;
  }
	
	
  body {
    min-width: unset;
  }

  input[type="checkbox"] {
    width: 21px;
    height: 21px;
    margin-right: 8px;
  }
	
	h1,
	.h1 {
		font-size: 3.2rem;
		padding: 0;
		margin: 40px 40px;
	}
	
	/* ----H1タイトル---- */
	.block-login h1,
	.block-member-info h1,
	.block-member-info-confirmation h1,
	.block-mypage h1,
	.block-mail-news--header,
	.block-shipping-address--header,
	.block-inquiry--header,
	.block-inquiry-history--header,
	.block-purchase-history--header,
	.block-coupon-list--header,
	.block-favorite--header,
	.block-login--daccountlogin-header,
	.block-login--linelogin-header,
	.block-login--snslogin-header,
	.block-login--amazon-header,
	.block-login--first-time-header,
	.block-cart h1,
	.block-order-method h1,
	.block-order-estimate h1,
	.block-order-complete h1,
	.block-topic-details--header,
	.block-topic-page--article-header,
	.block-withdrawal--header,
	.block-logout--header,
	.block-member-registration-completed h1 {
		margin: 27px 0;
		padding: 0 0 0 21px;
		position: relative;
	}
	.block-common-lightningrecommend--header,
	h2.block-accessory-list--name,
	h2.block-accessory-list--name2,
	.block-goods-spec-detail--header,
	h2.block-goods-pickup--header {
		font-size: 3.2rem;
		margin: clamp(40px, 10.25vw, 90px) 0 clamp(20px, 5.12vw, 40px);
		padding: 0 0 0 21px;
		position: relative;
	}
	.page-cart h2.block-accessory-list--name {
		margin-left: 40px;
		margin-right: 40px;
	}
	.block-login h1::after,
	.block-member-info h1::after,
	.block-member-info-confirmation h1::after,
	.block-mypage h1::after,
	.block-mail-news--header::after,
	.block-shipping-address--header::after,
	.block-inquiry--header::after,
	.block-inquiry-history--header::after,
	.block-purchase-history--header::after,
	.block-coupon-list--header::after,
	.block-favorite--header::after,
	.block-login--daccountlogin-header::after,
	.block-login--linelogin-header::after,
	.block-login--snslogin-header::after,
	.block-login--amazon-header::after,
	.block-login--first-time-header::after,
	.block-cart h1::after,
	.block-order-method h1::after,
	.block-order-estimate h1::after,
	.block-order-complete h1::after,
	.block-common-lightningrecommend--header::after,
	h2.block-accessory-list--name::after,
	h2.block-accessory-list--name2::after,
	.block-no-code-cms--header1::after,
	.block-topic-details--header::after,
	.block-topic-page--article-header::after,
	.block-goods-spec-detail--header::after,
	h2.block-goods-pickup--header::after,
	.block-withdrawal--header::after,
	.block-logout--header::after,
	.block-member-registration-completed h1::after {
		top: 8px;
		width: 7px;
		height: 34px;
	}

	/**/
  .pagination > * {
    /*margin: 0 4px;
    border: 0;*/
  }

  .pager-total {
    /*margin-right: 30px;*/
  }

  .pager-current {
    /*color: #000;*/
  }

  .pagination li a {
    /*color: #bbb;*/
  }
	
	.price::after,
	.default-price::after,
	.price.pickup-parent-price::after,
	.net::after,
	.price.net::after,
	.net-price::after,
	.default-net::after {
		font-size: 50%;
	}
	input[type="radio"]:checked::before {
		left: 2px;
		top: 2px;
	}
	.block-order-method--container,
	.block-order-estimate--container {
		grid-template-columns: 68% 1fr;
		grid-column-gap: 50px;
		grid-row-gap: 60px;
	}
	.block-order-estimate--container {
		/*flex-direction: row-reverse;
		flex-wrap: wrap;*/
	}
	.block-order-method--contents,
	.block-order-estimate--content {
		max-width: 960px;
		/*width: 68%;*/
		grid-area: 1 / 1 / 2 / 2;
	}
	.block-order-method--container > .block-order-method--procedure-container,
	.block-order-estimate--container > .block-order-estimate--side-area {
		max-width: 420px;
		/*width: 30%;*/
		grid-area: 1 / 2 / 3 / 3;
	}
	.block-order-estimate--novelty {
		width: 100%;
		max-width: 960px;
		grid-area: 2 / 1 / 3 / 2;
	}
	/* ----縦型入力フォーム---- */
	.fieldset-vertical .form-group {
		background: none;
	}
	.fieldset-vertical .constraint {
		padding: 8px 0;
		margin: 0;
	}
}
@media screen and (min-width: 1500px) {
	h1,
	.h1 {
		margin: 40px 0;
	}
	.block-goods-list-naviframe--top-nav,
	.block-goods-list-naviframe--bottom-nav {
		margin: 15px 0;
	}
	h2.block-accessory-list--name,
	h2.block-accessory-list--name2 {
		margin-left: auto;
		margin-right: auto;
	}
	.block-order-method,
	.block-order-estimate,
	.block-topic-details,
	.block-topic-page {
		margin-left: 0;
		margin-right: 0;
	}
}