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

#topcontrol { z-index: 9999; }

.btn { background-color: #00BACB; display: flex; align-items: center; justify-content: center; text-align: center; color: #FFFFFF; font-weight: 700; font-size: 1.2rem; line-height: 1; padding: 1.5rem 5.0rem 1.25rem 5.0rem; position: relative; transition: .4s; letter-spacing: 1px; }
.btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; display: block; text-indent: -9999px; }
.btn:hover { background-color: #485575; }
.btn.sold { pointer-events: none; }

h1 { font-size: 0; }

h2 { font-family: "EB Garamond", "Noto Serif JP", "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; color: #D1D2D4; font-size: 4.5rem; text-align: center; line-height: 1; }
@media (min-width: 768px) { h2 { font-size: 8.0rem; } }

.swiper-slide img { width: 100%; height: auto; }

/**************************************
						 ヘ ッ ダ ー
**************************************/
.header { background-color: #000000; padding: 0; }
.header img { max-width: 200px; }

.hero-area { width: 100%; height: 50vh; max-height: 630px; background: url("../img/hero-bg.jpg") center/cover no-repeat; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.hero-area p { text-align: center; font-size: 2.4rem; max-width: 1000px; color: #FFFFFF; font-weight: 700; }
.hero-area p span { font-size: 1.6rem; font-weight: 400; }
@media (min-width: 768px) { .hero-area { background-attachment: fixed; }
  .hero-area p { font-size: 3.6rem; }
  .hero-area p span { font-size: 2.4rem; } }

/**************************************
						コ ン テ ン ツ
**************************************/
.content-block { padding-top: 5.0rem; padding-bottom: 5.0rem; }

.about { font-family: "EB Garamond", "Noto Serif JP", "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; }

.workshop-images .swiper-container .swiper-wrapper { transition-timing-function: linear !important; }

.item-block { display: flex; justify-content: space-between; align-items: center; position: relative; transition: .4s; margin-bottom: 4.0rem; }
.item-block img { width: 45%; height: auto; border-bottom: solid 2px transparent; transition: .4s; object-fit: cover; aspect-ratio: 1 / 1; }
.item-block .item-info { width: 55%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.item-block .item-info h3 { font-family: "EB Garamond", "Noto Serif JP", "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; font-size: 3.0rem; line-height: 1; text-align: center; }
.item-block .item-info .moreinfo { color: #00BACB; font-weight: 700; font-size: 1.4rem; }
.item-block .item-info .moreinfo span { position: relative; }
.item-block .item-info .moreinfo span::after { position: absolute; bottom: -8px; left: 0; width: 100%; height: 1px; background-color: #00BACB; content: ""; display: block; }
.item-block a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; display: block; text-indent: -9999px; }
.item-block:hover { box-shadow: 0px 4.0rem 4.0rem -4.0rem #d9d9d9; }
.item-block:hover img { border-bottom: solid 2px #00BACB; }
@media (min-width: 768px) { .item-block { flex-direction: column; }
  .item-block img, .item-block .item-info { width: 100%; }
  .item-block .item-info h3 { font-size: 3.4rem; } }

.model { background-color: #000000; border-top: solid 1px #4D4D4D; }
.model img { width: 100%; height: auto; }
.model .model-img { width: 75vw; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .model .model-img { width: 100%; } }
.model .model-info { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.model .model-info h2 { font-size: 4.0rem; color: #FFFFFF; }
.model .model-info .caption { font-size: 1.4rem; color: #D1D2D4; }
@media (min-width: 992px) { .model .model-info h2 { font-size: 5.0rem; }
  .model .model-info .caption { font-size: 1.6rem; } }
.model .model-gallery { display: flex; flex-wrap: wrap; margin: 0; padding: 0; margin-right: -1.0rem; }
.model .model-gallery li { width: calc((100% / 4) - 1.0rem); margin-right: 1.0rem; margin-bottom: 1.0rem; }
.model .model-gallery li img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 1 / 1; }
@media (min-width: 768px) { .model .model-gallery li { width: calc((100% / 6) - 1.0rem); }
  .model .model-gallery.has-movie li { width: calc((100% / 4) - 1.0rem); } }
.model .movie { aspect-ratio: 16 / 9; }
.model .movie iframe { width: 100%; height: 100%; }
@media (min-width: 768px) { .model .movie { padding-bottom: min(2.2vw, calc(1200px * 0.022)); } }

.spec { background-color: #F5F6F8; }
.spec h3 { font-size: 2.4rem; font-weight: 700; border-bottom: dashed 1px #D1D2D4; }
.spec .specsheet { display: flex; flex-wrap: wrap; width: 100%; }
.spec .specsheet li:nth-child(even) { width: 50%; }
.spec .specsheet li:nth-child(odd) { width: 50%; color: #00BACB; }
.spec .specsheet li { font-size: 1.6rem; display: flex; align-items: center; border-bottom: dashed 1px #D1D2D4; font-weight: 700; }

/**************************************
						フ ッ タ ー
**************************************/
.shop { background: #000000; color: #FFFFFF; }
.shop img { width: 100%; height: auto; }
.shop a, .shop a:visited { color: #FFFFFF; transition: .4s; }
.shop a:hover { color: #00BACB; }
.shop .shopinfo { display: flex; flex-direction: column; align-items: center; }
.shop .shopinfo img { max-width: 55vw; }
.shop .shopinfo h4 { font-size: 1.6rem; font-weight: 700; text-align: center; }
.shop .shopinfo p { font-size: 1.6rem; border-bottom: dashed 1px #4D4D4D; width: 100%; color: #FFFFFF; }
.shop .shopinfo p span { font-size: 2.0rem; font-weight: 700; color: #FFFFFF; }
@media (min-width: 768px) { .shop .shopinfo img { max-width: 200px; }
  .shop .shopinfo h4 { font-size: 1.4rem; }
  .shop .shopinfo p { font-size: 1.4rem; }
  .shop .shopinfo p span { font-size: 1.8rem; } }
@media (min-width: 992px) { .shop .shopinfo img { max-width: 250px; }
  .shop .shopinfo h4 { font-size: 1.8rem; }
  .shop .shopinfo p { font-size: 1.8rem; }
  .shop .shopinfo p span { font-size: 2.2rem; } }
.shop .mapimg img { max-width: 800px; }
.shop .copyright { font-size: 1.4rem; text-align: center; color: #D1D2D4; }