/*
 *  Remodal - v1.1.1
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */

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

/* Hide scroll bar */

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

  -ms-touch-action: none;
  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;
  background: rgba(0,0,0,.85);
  display: none;
}

/* Necessary styles of the wrapper */

.remodal_wrap {
	box-sizing: border-box;
    width: 100%;
    margin-bottom: 10px;
    padding: 35px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    color: #2b2e38;
    background: #fff;
}

.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 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Necessary styles of the modal dialog */

.remodal {
  position: relative;

  outline: none;

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

.remodal-wrapper {
    padding: 10px 10px 0;
}

/* 特設サイト用オリジナル */
.remodal, .remodal-wrapper:after {
    vertical-align: middle;
}
.remodal_wrap {
	background: #fff;
    padding: 4rem;
    top: 52%;
    transform: translate(-50% , -50%);
    position: fixed;
    left: 50%;
    width: calc(100% - 20px);
    height: calc(100% - 10rem);
    margin: 0;
    overflow-y: scroll;
}
.remodal_wrap.limit:before {
	width: 71px;
	height: 60px;
	right: 40px;
}
.remodal_wrap .item-img {
	position: relative;    
    background-color: #F8F8F6;
	width: 300px;
	height: 18.6rem; 
	padding-bottom: 0;
	margin: 0 auto;
}
.remodal_wrap .item-img img {
	width: auto;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: block;
}
.remodal_wrap .item-img .code {
	font-size: 14px;
	font-size: 1.4rem;
	    font-size: 14px;
    font-size: 1.4rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #000;
}
.remodal_wrap .item-ttl { 
	font-weight: bold;
	margin: 2rem auto;
	text-align: left;
	display: inline-block;
}
.remodal_wrap .kosuu {
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-image: url("../img/common/line-dot_b.png") 4 repeat;
	-moz-border-image: url("../img/common/line-dot_b.png") 4 repeat;
	-webkit-border-image: url("../img/common/line-dot_b.png") 4 repeat;
	-o-border-image: url("../img/common/line-dot_b.png") 4 repeat;
	-ms-border-image: url("../img/common/line-dot_b.png") 4 repeat;
	padding: 2rem 0;
	margin-bottom: 2rem;
}
.remodal_wrap .kosuu li:first-of-type {
	font-weight: bold;
	padding: 0 45px 0 30px;
}
.remodal_wrap .kosuu li:nth-of-type(2) { width: 100px; padding-right: 30px; }
.remodal_wrap .kosuu li { vertical-align: middle; }
.remodal_wrap .kosuu li:last-of-type { width: 300px; }
.remodal_wrap .kosuu .btn_wrap a {
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 18px;
	font-size: 1.8rem;
}
.remodal_wrap .kosuu .btn_wrap span {
	width: 28px;
    height: 26px;
    margin-right: 10px;	
}
.remodal_wrap .note {
	display: inline-block;
    margin: 0 auto;
    text-align: left;
    font-weight: bold;
	color: #a1a11f;
}
.remodal-close {
    position: absolute;
    right: 0;
    top: -40px;
    text-decoration: none;
    text-align: right;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: “alpha( opacity=100 )”;
    color: #FFF;
    font-style: normal;
    font-family: initial;
	overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation;
    height: 36px;
    line-height: 3.6rem;
    font-size: 36px;
    font-size: 3.6rem;	    
}
.remodal-close:hover, .remodal-close:focus {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}

/* カートへ追加後 */
.remodal_wrap .thanks {
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-image: url("../img/common/line-dot_b.png") 4 repeat;
	-moz-border-image: url("../img/common/line-dot_b.png") 4 repeat;
	-webkit-border-image: url("../img/common/line-dot_b.png") 4 repeat;
	-o-border-image: url("../img/common/line-dot_b.png") 4 repeat;
	-ms-border-image: url("../img/common/line-dot_b.png") 4 repeat;
	padding: 2rem 0;
	margin: 0;
}
.remodal_wrap .thanks .btn_wrap { 
	margin-top: 2rem;
}
.remodal_wrap .thanks .btn a {
	display: flex;
    align-items: center;
    justify-content: center;
}
.remodal_wrap .thanks .btn a .img_wrap {
	width: 28px;
    height: 26px;
    margin-right: 15px;
}

@media screen and (min-width: 1000px) {
	.remodal { width: 940px; }	
}

@media screen and (max-width: 999px) {
	.remodal_wrap { padding: 4rem 2rem; }
}

@media screen and (min-width: 481px) {
	.remodal_wrap {
		transform: none !important;
		position: static !important;
		width: auto;
		height: auto;
		overflow-y: scroll !important;
		max-height: calc(100vh - 20rem);
	}
}

@media screen and (max-width: 480px) {
	.remodal_wrap { padding: 3rem 2rem; }
	.remodal_wrap .kosuu li:first-of-type { 
		padding: 0 10px;
		margin-bottom: 2rem;
	}
	.remodal_wrap .kosuu li:nth-of-type(2) { width: 50%; margin-bottom: 2.5rem; }
	.remodal {
		width: 100%;
		height: 100%;
	}
	.remodal-close { top: 10px; }
	.remodal_wrap.limit:before { right: 20px; }
	.remodal_wrap .item-img {
		width: 100%;
		height: 21rem;
	}
}

.remodal_wrap > div { padding-bottom: 4rem; }

/*=========================================
		cssハック
=========================================*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.remodal_wrap .kosuu, .remodal_wrap .thanks {
		border-top: 2px dotted #2C6674;
		border-bottom: 2px dotted #2C6674;
	}
}