@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; margin: 3.0rem auto; }

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

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

.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: wrap; margin-left: -7.5px; margin-right: -7.5px; }
.anchor div { display: flex; flex-direction: column; position: relative; transition: .4s; width: 50%; 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 div { width: 25%; } }

.commitment { width: 100%; max-width: 380px; margin: auto; }
.commitment li { width: 100%; display: inline-block; font-size: 1.8rem; font-weight: 500; line-height: 2.4rem; }
.commitment li:first-child { font-weight: 900; text-align: center; margin-bottom: 0.75rem; letter-spacing: 2px; }

.intro { font-size: 1.2rem; font-weight: 500; line-height: 1.6em; }
.features img { width: 100%; height: auto; }
.features h3 {font-size: 1.6rem; color: #999; font-weight: bold;}
.spec-title { background-color: #eee; border: 1px solid #ddd;}
.spec-title p { text-align: center; font-weight: bold;}
.tab-spec .specification { display: flex; flex-wrap: wrap; }
.tab-spec .specification p { font-size: 1.0rem; border-bottom: dashed 1px #999; width: 50%; padding: 0.5rem 0; display: flex; align-items: center; }
.tab-spec .specification p:nth-child(even) { font-weight: 700; }

.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 p, .model .tab-btn .spec-btn p { font-size: 1.0rem; font-weight: 700; }
.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; }
.color img:hover { cursor: pointer; }
.st img:hover { cursor: pointer; }
.tl img:hover { cursor: pointer; }
.jm img:hover { cursor: pointer; }
.jb img:hover { cursor: pointer; }
.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; }

.color { width: 100%; display: flex; flex-wrap: wrap; }
.color li:first-child { font-size: 1.5rem; font-weight: 700; letter-spacing: -1px; margin-right: 0.75rem; display: flex; align-items: center; width: 100%; margin-bottom: 0.5rem; }
.color li:first-child span { font-weight: 400; }
.color li:nth-child(n+2) { width: 40px; margin-right: 0.5rem; border-radius: 50%; overflow: hidden; margin-bottom: 0.5rem; }
.color li:last-child { margin-right: 0; }
.color li img { width: 100%; }
.color li:hover { cursor: pointer; }
.color .switchingBtn.active { border: solid 2px #999; }

.switchingItem { display: none; }
.switchingItem img { width: 100%; }
.switchingItem.active { display: block; -webkit-animation-name: fadeIn; animation-name: fadeIn; animation-duration: 1.0s; }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
.tbn { width: 100%; margin: 0 auto; display: flex; justify-content: center; }
.tbn li { width: 16.66666666666667%; padding: 0 0.25rem; }
@media (min-width: 576px) { .tbn li { padding: 0 1.0rem; } }
.tbn li img { width: 100%; border: solid 1px #DDD; }
@media (min-width: 768px) { .tbn { width: 90%; max-width: 1000px; } }

.caption { font-size: 1.0rem; font-weight: 500; line-height: 1.6rem; }

.price { color: #FF0000; font-size: 3.3rem; font-weight: 700; }
.price span:not(.jb-price, .pb-price) { font-size: 0.375em; display: inline-block; }

.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; }
.cart a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
.cart:hover { background-color: #209854; }

/**************************************
							店 舗 情 報
**************************************/
.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; }