@charset "UTF-8";
/* CSS Document */
/***********************************************
								共 通 項 目
***********************************************/
body { overflow-x: hidden; background-color: #FEFEFE; }

@media (min-width: 769px) { a[href^="tel:"] { pointer-events: none; } }
a { color: #000; }
a:visited { color: #000; }
a:hover { color: #E60044; }
a img { transition: 0.6s; }

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

.oshirase p { text-align: center; border: solid 2px #E60012; color: #E60012; font-weight: 500; font-size: 2em; position: relative; transition: .4s; line-height: 2; }
.oshirase p a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; }
.oshirase p:hover { background-color: #FEFEFE; }

/*************************************
						ヒ ー ロ ー エ リ ア
*************************************/
.hero-area { width: 100%; height: auto; position: relative; z-index: 0; margin: auto; }
.hero-area::before { content: ""; display: block; padding-top: 100%; /* 比率を指定 */ }
.hero-area .hero-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; color: #FEFEFE; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.hero-area .hero-content .logo { width: auto; height: 80%; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.65)); }
.hero-area .hero-content .title { font-size: 1.4rem; font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.234375rem) * 2.1854)), 2.8rem); text-align: center; text-shadow: 0 0 10px rgba(0, 0, 0, 0.65); }
.hero-area .hero-content .title span { font-size: 1.8em; color: #D1B88E; font-family: Georgia, "Times New Roman", Times, "serif"; text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.75); line-height: 1.2; }
.hero-area .hero-content button { background: none; outline: none; border: none; padding: 0; font-size: initial; }
.hero-area .hero-content button .button { font-size: 0.8em; font-weight: 700; color: #FEFEFE; letter-spacing: 2px; border: solid 2px #FEFEFE; position: relative; transition: .4s; }
.hero-area .hero-content button .button:hover { background-color: #FEFEFE; color: #355E76; }
.hero-area .hero-content button .button a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }
@media (min-width: 576px) { .hero-area::before { padding-top: 38.19%; /* 比率を指定 */ } }

.slide { position: absolute; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }

.slide-image { background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; animation: hero-slider 40s linear infinite; }

.slide-image:nth-child(1) { background-image: url("../img/slider/01.jpg"); animation-delay: -2s; }

.slide-image:nth-child(2) { background-image: url("../img/slider/02.jpg"); animation-delay: 6s; }

.slide-image:nth-child(3) { background-image: url("../img/slider/03.jpg"); animation-delay: 12s; }

.slide-image:nth-child(4) { background-image: url("../img/slider/04.jpg"); animation-delay: 18s; }

.slide-image:nth-child(5) { background-image: url("../img/slider/05.jpg"); animation-delay: 24s; }

@keyframes hero-slider { 0% { opacity: 0; transform: scale(1); }
  4.16% { opacity: 1; }
  33.33% { opacity: 1; }
  41.66% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; } }
/***********************************************
								コ ン テ ン ツ
***********************************************/
.box h2 { font-size: 4.0rem; font-weight: 400; letter-spacing: -1px; color: #FDFDE7; }

.intro { font-size: initial; }
.intro h3 { font-size: 1em; font-weight: 700; text-align: center; letter-spacing: 3px; margin-bottom: 1rem; }
.intro p { font-size: initial; color: #A9A9B1; }

.products { background-color: #A9A9B1; }

#guitars .item-card { position: relative; filter: drop-shadow(7px 7px 5px rgba(0, 0, 0, 0.1)); color: #FEFEFE; }
#guitars .item-card .caption { position: relative; }
#guitars .item-card .caption .text { font-size: initial; }
#guitars .item-card .caption .text span { font-weight: 700; font-size: 1.8rem; font-size: clamp(1.8rem, 2.4vw, 2rem); transition: .2s; }
#guitars .item-card .caption .more { width: 100%; text-align: right; font-size: initial; text-decoration: underline; color: #d1b98b; }
#guitars .item-card:hover .caption .text span { color: #d1b98b; }
#guitars .item-card a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; }

@media (min-width: 769px) { #guitars .row div[class^="col-"] { padding: 0.5rem; margin-bottom: 0.5rem; } }
.purchase { color: #444; text-align: center; }
.purchase li { font-size: 3.0rem; display: inline-block; margin: 0; padding: 0.25rem; text-align: center; position: relative; transition: 0.4s; }
.purchase li:first-child { font-size: 1.4rem; font-weight: 500; pointer-events: none; }
.purchase li:hover { color: #FF0004; }
.purchase li a { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-indent: -9999px; }

.backorder { color: #CCC; pointer-events: none; }

.about { width: 100%; max-width: 860px; }
.about p { font-size: initial; line-height: 1.6; }
.about p.caption { font-size: 1.0rem; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.2; color: #666; }