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

.wrapper { width: 100%; max-width: 1920px; margin: auto; background-color: #FEFEFE; }

h1 { font-size: 0; margin-top: 70px; }
h1 img { width: 100%; }

.models { display: flex; flex-wrap: wrap; font-size: 0; }
.models a { width: 100%; background-color: #FEFEFE; }
.models a img { width: 100%; position: relative; }
@media (min-width: 576px) { .models a { width: 33.333333%; } }
.models p { font-size: 0.8rem; text-align: center; width: 100%; margin-top: 0.5rem; color: #666; letter-spacing: 0.25rem; }

/**************************************
						コ ン テ ン ツ
**************************************/
.overview { border-bottom: dashed 1px #EEE; }
.overview p { font-size: 1.0rem; font-weight: 500; line-height: 1.8rem; word-break: break-all; }

img.img-fluid {width: 100%;height: auto;display: block;}
.fw-bold {font-weight: bold;}

.variation h2 { font-family: 'Manrope', 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; font-size: 1.2rem; line-height: 1.4rem; font-weight: 800; position: relative; padding-left: 1.5rem; color: #000; letter-spacing: -1px; }
.variation h2 span { font-size: 1.6rem; line-height: 1.8rem; }
@media (min-width: 576px) { .variation h2 { font-size: 2.0rem; line-height: 2.2rem; }
  .variation h2 span { font-size: 2.0rem; line-height: 2.2rem; } }
.variation h2::before { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 0.65rem; height: 86%; display: block; background-color: #E72D18; content: ""; }
.variation .price { color: #FF0000; font-weight: 700; font-size: 1.2rem; }
.variation .price span { font-size: 1.8rem; }
.variation .btn { width: 100%; height: 2.5rem; border-radius: 1.25rem; font-size: 1.0rem; line-height: 2.5rem; text-align: center; color: #FEFEFE; background-color: #00CB69; position: relative; transition: .4s; letter-spacing: 2px; }
.variation .btn:hover { background-color: #00B15C; }
.variation .btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; text-indent: -9999px; }
.variation .color { display: flex; flex-wrap: wrap; }
.variation .color > div { display: flex; flex-wrap: wrap; width: 100%; align-items: baseline; }
.variation .color > div p { font-family: 'Manrope', 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; font-size: 1.4rem; font-weight: 800; letter-spacing: -1px; }
.variation .color > div p:nth-child(2) { margin-left: 1.0rem; font-weight: 500; font-size: 1.2rem; }
.variation .color ul { width: 100%; max-width: 400px; display: flex; flex-wrap: wrap; }
.variation .color ul li { width: calc(12.5% - 0.5rem); margin-right: 0.5rem; border-radius: 50%; overflow: hidden; }
.variation .color ul li:last-child { margin-right: 0; }
.variation .color ul li img { width: 100%; }
.variation .color ul li:hover { cursor: pointer; }
.variation .color ul .switchingBtn.active { border: solid 2px #999; }
.variation .switchingItem { display: none; }
.variation .switchingItem a { width: 100%; }
.variation .switchingItem a img { width: 100%; }
.variation .switchingItem .tbn { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 900px; margin: auto; }
.variation .switchingItem .tbn li { width: 33.33333%; padding: 1.0rem; }
.variation .switchingItem .tbn li img { width: 100%; border: solid 1px #333; }
@media (min-width: 768px) { .variation .switchingItem .tbn li { width: 20%; } }
.variation .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; } }
.variation .specification { border-bottom: solid 1px #000; }
.variation .specification h4 { width: 100%; position: relative; height: 2.0rem; font-family: 'Manrope', 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; padding: 0; letter-spacing: -1px; }
.variation .specification h4::before { content: ""; width: 100%; height: 1px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: #000; }
.variation .specification h4 div { padding: 0 1.0rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000; font-size: 1.8rem; line-height: 2.0rem; background-color: #FEFEFE; width: 65%; text-align: center; }
@media (min-width: 576px) { .variation .specification h4 div { width: auto; } }
.variation .specification h4:hover { cursor: pointer; }
.variation .specification .detaile { display: none; font-family: 'Manrope', 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; letter-spacing: -1px; }
.variation .specification .detaile .category { display: flex; flex-wrap: wrap; }
.variation .specification .detaile .category h5 { width: 100%; font-size: 1.4rem; font-weight: 800; line-height: 1.4rem; border-bottom: dashed 1px #000; margin-top: 3.0rem; padding-bottom: 0.25rem; }
.variation .specification .detaile .category .block { display: flex; flex-wrap: wrap; width: 100%; border-bottom: dashed 1px #000; }
.variation .specification .detaile .category .block p { font-size: 1.0rem; font-weight: 700; padding: 1.0rem 0; width: 50%; display: flex; align-items: center; }
.variation .specification .detaile .category .block p:last-child { color: #E72D18; padding-right: 1.0rem; }
@media (min-width: 768px) { .variation .specification .detaile .category .block { width: 50%; } }