@charset "UTF-8";
/**************************************
							共 通 項 目
**************************************/
html { background: #DDD; }

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

h2 { font-size: 1.4rem; line-height: 2.2rem; font-weight: 700; text-align: center; }

p.text, .attention ul li { font-size: 1.0rem; font-weight: 500; line-height: 1.6rem; }

p.sup { font-size: 0.8rem; padding-left: 0.8rem; text-indent: -0.8rem; line-height: 1.4rem; }

.image { width: 100%; max-width: 1000px; }

h3 { font-size: 1.2rem; font-weight: 700; }
h3 span { color: #2D80FF; display: inline-block; margin-right: 0.5rem; }

.btn, .btn.reverse { width: 100%; margin: 0; padding: 0 0.5rem; font-size: 1.2rem; line-height: 3.0rem; border-radius: 1.5rem; font-weight: 500; text-align: center; position: relative; background-color: #F7931E; color: #FEFEFE; transition: .4s; }
.btn a, .btn.reverse a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; }
.btn:hover { background-color: #E08224; }

.btn.reverse { background-color: transparent; border: solid 2px #F7931E; font-weight: 700; }
.btn.reverse:hover { background-color: #F7931E; }

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

/**************************************
						コ ン テ ン ツ
**************************************/
.header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.header .drcnLogo { width: 8.0rem; }
.header .drcnLogo img { width: 100%; height: auto; }
@media (min-width: 576px) { .header .drcnLogo { width: 13.0rem; } }

.heroArea { background: url("../img/title-bg.jpg") left/cover no-repeat; font-size: 0; color: #FEFEFE; }
.heroArea img { width: 100%; }
.heroArea h1 { font-size: 0; }

.imageArea { background-color: #EEE; font-size: 0; }
@media (min-width: 576px) { .imageArea h2 { text-align: left; } }

.attention { width: 100%; position: relative; border: solid 1px #FF0000; }
.attention h3 { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); color: #FF0000; padding: 0.5rem 1.0rem; background-color: #FEFEFE; }
.attention ul { list-style-type: circle; }

.zoom { background-color: #EEE; font-size: 0; }
.zoom .box { background-color: #FEFEFE; border: solid 2px #BBB; border-radius: 10px; height: 100%; word-break: break-all; }
.zoom h4 { font-size: 1.2rem; font-weight: 700; }
.zoom .btn.reverse { color: #F7931E; }
.zoom .btn.reverse:hover { color: #FEFEFE; }

.contact { background: url("../img/contact-bg.jpg") left/cover no-repeat; color: #FEFEFE; }
.contact .btn { font-size: 1.6rem; font-weight: 700; line-height: 5.0rem; border-radius: 2.5rem; }
.contact a, .contact a:visited { color: #FFF000; }
.contact p.text, .contact .attention ul li, .attention ul .contact li { font-weight: 400; word-break: break-all; }

/**************************************
							店 舗 情 報
**************************************/
#shop { background: #1A1A1A; color: #FEFEFE; }

#shop .row { align-items: center; }

.shopinfo { text-align: center; }
.shopinfo .shopinfo-txt1 { font-family: 'Open Sans', sans-serif; font-size: 3.0rem; font-weight: 800; letter-spacing: -0.1rem; line-height: 1.0; }
.shopinfo .shopinfo-txt2 { font-size: 1.6rem; font-weight: 700; line-height: 2.4rem; }
.shopinfo p.shopelement { padding-top: 0.5rem; margin: 1.0rem auto 0 auto; border-top: 0.1rem solid #FEFEFE; font-size: 1.0rem; text-align: left; width: 80%; }
.shopinfo p.shopelement span { display: block; margin-bottom: 0.3rem; font-family: 'Open Sans', sans-serif; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.1rem; }
@media (min-width: 992px) { .shopinfo { text-align: left; }
  .shopinfo p.shopelement { width: 100%; } }

.shopinfo a, .shopelement a { color: #FEFEFE; transition: color .3s ease-out; }

.shopinfo a:hover, .shopelement a:hover { color: #FFF000; }

.mapimg { text-align: center; }

.mapimg img { width: 100%; }

.copyright { color: #CCC; width: 100%; font-size: 1.0rem; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; }