/* ==========================================================================
   Remodal's necessary styles
   ========================================================================== */

/* Hide scroll bar */

html.remodal-is-locked {
  overflow: hidden;

  touch-action: none;
}

/* Anti FOUC */

.remodal,
[data-remodal-id] {
  display: none;
}

/* Necessary styles of the overlay */

.remodal-overlay {
  position: fixed;
  z-index: 9999;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;

  display: none;
}

/* Necessary styles of the wrapper */

.remodal-wrapper {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;
  overflow: auto;

  text-align: center;

  -webkit-overflow-scrolling: touch;
}

.remodal-wrapper:after {
  display: inline-block;

  height: 100%;
  margin-left: -0.05em;

  content: "";
}

/* Fix iPad, iPhone glitches */

.remodal-overlay,
.remodal-wrapper {
  backface-visibility: hidden;
}

/* Necessary styles of the modal dialog */

.remodal {
  position: relative;

  outline: none;

  text-size-adjust: 100%;
}

.remodal-is-initialized {
  /* Disable Anti-FOUC */
  display: inline-block;
}



.remodal h2{
	font-size: 2.8em;
	font-weight: 200;
	line-height: 1.8em;
	margin: 20px auto;
	text-align: left;
}
.remodal h2 span{
	font-size: 0.6em;
}

.remodal .Flexbox .photo{
	width: 50%;
	position: relative;
	text-align: center;
	margin: 0 auto;
}
.remodal .Flexbox .txt{
	width: 50%;
	text-align: left;
	padding: 0 20px;
}
.remodal .Flexbox .txt p{
	font-size: 1.6em;
	line-height: 2em;
	margin: 20px auto;
	width: 96%;
}
.remodal .waku{
	border: 1px solid #dfdfdf;
	padding: 20px;
	background: #fefefe;
	margin: 20px auto;
	
}
.remodal ul.attention{
	margin: 20px 30px 20px 50px;
	text-align: left;
	
}
.remodal ul.attention li{
	font-size: 1.3em;
	line-height: 1.5em;
	margin-bottom: 8px;
	list-style: disc;
	color: #666;
	
}
.btn_shop{
	background: #931f1f;
	display:inline-block;
	width: 320px;
	margin: 40px 20px 20px;
}
.btn_contact{
	background: #383838;
	display:inline-block;
	width: 320px;
	margin: 40px 20px 20px;
}
.btn_shop a,
.btn_contact a{
	color: #fff;
	font-size: 1.4em;
	letter-spacing: 0.05em;
	text-decoration: none;
}
.btn_shop a,
.btn_contact a{
position: relative;
display: block;
padding: 15px 20px 15px 40px;
vertical-align: middle;
text-decoration: none;
}

.btn_shop a::before,
.btn_contact a::before,
.btn_shop a::after,
.btn_contact a::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "" ;
vertical-align: middle;
}

.btn_shop a::before,
.btn_contact a::before{
left: 25px;
width: 12px;
height: 12px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.btn_shop:hover{
	background: #e16e6e;
}
.btn_contact:hover{
	background: #666666;
}

.remodal table{
	font-size: 1.4em;
	line-height: 1.6em;
	border-top:1px solid #d2d2d2;
	margin: 10px auto;
	width: 96%;
}
.remodal table th,
.remodal table td{
	padding: 8px 10px;
	border-bottom:1px solid #d2d2d2;
	font-weight: normal;
}

@media screen and (max-width: 1024px) {

.remodal h2{
	font-size: 2.6em;
	margin: 0px auto 10px;
}	
.remodal .Flexbox .txt p{
	font-size: 1.5em;
	line-height: 1.8em;
	margin: 0px 20px 20px;
}
.remodal .Flexbox .txt p br.pc{
	display: none;
	}
	
}
@media screen and (max-width: 830px) {
.btn_shop{
	margin: 10px;
}
.btn_contact{
	margin: 10px;
}
}

@media screen and (max-width: 768px) {

.remodal .Flexbox .photo{
	width: 100%;
}
.remodal .Flexbox .txt{
	width: 100%;
	text-align: left;
	padding: 10px 0px;
}
	
.remodal ul.attention{
	margin: 10px 10px 10px 20px;
	text-align: left;
	
}
.remodal table{
	font-size: 1.3em;
	line-height: 1.5em;
}
}

@media screen and (max-width: 480px) {
	
.remodal h2{
	font-size: 2.3em;
	margin: 0px auto 10px;
}
	
}