@charset "UTF-8";
/**************************************
							共 通 項 目
**************************************/
body { background-color: #FEFEFE; color: #333; }

.wrapper { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0; }

hr { border: none; border-bottom: solid 1px #CCC; }

.swiper-container { padding-bottom: 40px !important; }
@media (min-width: 768px) { .swiper-container { padding-bottom: 0 !important; overflow: visible; }
  .swiper-container .swiper-wrapper { flex-wrap: wrap; width: calc(100% + 15px); margin-left: -7.5px; margin-right: -7.5px; }
  .swiper-container .swiper-wrapper .swiper-slide { width: calc((100% / 3) - 15px); padding-left: 7.5px; padding-right: 7.5px; }
  .swiper-container .swiper-pagination { display: none; } }

/**************************************
						ヘ ッ ダ ー
**************************************/
.header { width: 100%; padding: 1.5rem 0; text-align: center; }
.header img { width: 50%; max-width: 300px; height: auto; }

/**************************************
						コ ン テ ン ツ
**************************************/
h1 { font-size: 0; margin: 0; padding: 0; width: 100%; }
h1 img { width: 100%; height: auto; }

.intro { line-height: 1.6; }
.intro h2 { font-size: 1.6rem; font-weight: 700; }
.intro p { font-size: 1.2rem; font-weight: 500; }
.intro p span { display: inline-block; letter-spacing: -0.5px; }

.anchor { display: flex; flex-wrap: nowrap; margin-left: -7.5px; margin-right: -7.5px; overflow-x: auto; }
.anchor div { display: flex; flex-direction: column; position: relative; transition: .4s; width: 50%; height: auto; padding-left: 7.5px; padding-right: 7.5px; }
.anchor div img { width: 100%; height: auto; }
.anchor div p { font-size: 1.0rem; font-weight: 500; line-height: 1.8rem; border-radius: 5px; text-align: center; color: #FEFEFE; background-color: #FF0000; }
.anchor div a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.anchor div:hover { opacity: .8; }
@media (min-width: 768px) { .anchor { flex-wrap: wrap; }
  .anchor div { width: 25%; } }

.model img { width: 100%; height: auto; }
.model img:hover { cursor: zoom-in; }
.model .modelTitle { padding-left: 1.5rem; position: relative; color: #000; }
.model .modelTitle > p { font-size: 1.2rem; font-weight: 700; line-height: 1; margin-bottom: 0.5rem; }
.model .modelTitle h2 { font-size: 3.0rem; font-weight: 900; position: relative; line-height: 0.8; }
.model .modelTitle h2 span { display: inline-block; font-size: 2.0rem; }
.model .modelTitle::before { position: absolute; top: 0; left: 0; width: 0.75rem; height: 100%; border-radius: 0.375rem; background-color: #FF0000; display: block; content: ""; }
.model .price { color: #FF0000; font-size: 3.0rem; font-weight: 700; text-align: right; }
.model .price span { font-size: 0.375em; display: inline-block; }
.model .cart { width: 100%; padding: 0; font-size: 1.2rem; font-weight: 500; line-height: 2.6rem; border-radius: 2.6rem; background-color: #28BD68; color: #FEFEFE; text-align: center; position: relative; transition: .4s; }
.model .cart a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.model .cart:hover { background-color: #209854; }
.model .tab-btn { display: flex; flex-wrap: wrap; }
.model .tab-btn .detaile-btn, .model .tab-btn .spec-btn { width: 50%; display: flex; align-items: center; justify-content: center; border: solid 1px #CCC; padding: 0.75rem; color: #6F6F6F; }
.model .tab-btn .detaile-btn.active, .model .tab-btn .spec-btn.active { background-color: #F9F9F9; color: #2E2E2E; }
.model .tab-btn .detaile-btn:hover, .model .tab-btn .spec-btn:hover { cursor: pointer; }
.model .tab-btn .color-btn { cursor: pointer; }
.model .tab-btn .color-btn img { border-radius: 50%; max-width: 20px; cursor: pointer; }
@media (min-width: 768px) { .model .tab-btn .color-btn img { max-width: 40px; } }
.model .tab-btn .color-btn.active img { border: solid 3px #AAA; }
.model .tab-btn p { font-size: 1.0rem; font-weight: 700; }
.model .switching-item li { display: none; }
.model .switching-item li.active { display: block; }
.model .switching-item li.tab-detaile .card { display: flex; flex-direction: column; }
.model .switching-item li.tab-detaile .card h3 { font-size: 1.0rem; font-weight: 700; line-height: 1.2rem; min-height: 2.4rem; display: flex; align-items: center; }
.model .switching-item li.tab-detaile .card p { font-size: 1.0rem; }
.model .switching-item li.tab-spec .specification { display: flex; flex-wrap: wrap; }
.model .switching-item li.tab-spec .specification p { font-size: 1.0rem; border-bottom: dashed 1px #999; width: 50%; padding: 0.5rem 0; display: flex; align-items: center; }
.model .switching-item li.tab-spec .specification p:nth-child(even) { font-weight: 700; }

/**************************************
							店 舗 情 報
**************************************/
.footer { background-color: #1A1A1A; color: #FEFEFE; }
.footer h4 { font-size: 1.4rem; letter-spacing: 2px; margin-bottom: 0.25rem; }
.footer .shop { border-bottom: dashed 1px #FEFEFE; display: flex; flex-wrap: wrap; padding: 0.5rem 0; }
.footer .shop p { font-size: 1.0rem; width: 100%; }
.footer .shop a, .footer .shop a:visited { color: #FEFEFE; }
.footer .shop a:hover { text-decoration: underline; }
@media (min-width: 576px) { .footer .shop p.shopname { width: 30%; }
  .footer .shop p.shopinfo { width: 70%; } }

.copy { background-color: #1A1A1A; color: #666; text-align: center; font-size: 0.8rem; }