@charset "utf-8";

/* --------------------------------------------------------
base 14px
10px:0.71em 11px:0.78em 12px:0.85em 13px:0.92em 14px:1em 
15px:1.07em 16px:1.14em 17px:1.21em 18px:1.28em 19px:1.35em
20px:1.42em 21px:1.5em  22px:1.57em 23px:1.64em 24px:1.71em
-------------------------------------------------------- */
/* --------------------------------------------------------
	モーダル
-------------------------------------------------------- */
body.modalBack .contentsWrap {
  pointer-events: none;
  transition: all .2s ease-out;
  transition-delay : .3s;
  -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
      -ms-filter: blur(5px);
          filter: blur(5px);
}
body.modalBack .modalWrap {
  opacity: 1;
  pointer-events: auto;
}

@media all and (-ms-high-contrast: none){
  body.modalBack .modal_overlay{
    background: rgba(0,0,0,0.3);
  }
}
#modalMenu{
	position: fixed;
	bottom:40px;
	z-index: 100;
	right: 0;
}
#modalMenu li{
	position: relative;
    right: -120px;
    overflow: hidden;
}
#modalMenu li:hover,
#modalMenu li.active{
	right: 0;
	transition: 0.3s ease;
}
#modalMenu a:hover{
	opacity: 1;
}
.modalWrap{
	background-image: url(/common/img/modal/bg_modal.png);
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: cover;
	max-width: 1045px;
	min-height: 600px;
	padding: 70px;
	position: relative;
	opacity: 0.988;
  	box-shadow: 0px 3px 13.65px 1.35px;
	text-align: center;
	margin: 0 auto;
}
.modalWrap.open{
	display: block;
}
.modalWrap::after{
	content: '';
	position: absolute;
	background-image: url(/common/img/modal/img_arbi.png);
	background-repeat: no-repeat;
	width: 125px;
	height: 174px;
	right: 30px;
	bottom: 25px;
}
.modalClose{
	position: absolute;
    cursor: pointer;
    width: 34px;
    height: 34px;
    right: 30px;
    top: 20px;
	display: block;
}
.modalClose > span{
	position: absolute;
	background-color: #e75555;
	width: 2px;
	height: 40px;
	transform: rotate(-45deg);
}
.modalClose > span:last-child{
	transform: rotate(45deg);
}
.modalTtl{
	color: #e75555;
	font-size: 34px;
	position: relative;
	display: inline-block;
}
.modalTtl::before,
.modalTtl::after{
	content: '';
	background-color: #e75555;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	margin-top: -6px;
}
.modalTtl::before{
	left: -25px;
}
.modalTtl::after{
	right: -25px;
}
.modalMenuList{
	position: relative;
	margin-top: 25px;
	text-align: left;
	background-image: linear-gradient(to right, #f48685, #f48685 3px, transparent 3px, transparent 8px);
    background-size: 7px 3px;
    background-position: top;
    background-repeat: repeat-x;
}
.modalMenuList::after{
	content: '';
	clear: both;
	display: block;
}
.modalMenuList li{
	width: calc(100% / 3 - 24px);
	display: inline-block;
	float: left;
}
.modalMenuList li:nth-child(-n+3){
	margin-top: 60px;
} 
.modalMenuList li:nth-child(n+4){
	margin-top: 25px;
} 
.modalMenuList li:nth-child(3n-1){
	margin-left: 30px;
	margin-right: 30px;
}
.modalMenuList li > a{
	display: flex;
    align-items: center;
	background-color: #f48685;
	border-radius: 6px;
	box-shadow: 0px 3px 2.4px 0.6px rgba(201, 46, 46, 0.75);
	color: #fff;
	font-size: 16px;
	height: 90px;
	padding: 0 25px;
}
.modalMenuList li > a:hover{
	opacity: 0.7;
	transition: 0.2s ease;
}
.modalIco{
	width: 45px;
}
.modalLinkTtl{
	line-height: 1.5em;
	display: block;
    width: 100%;
	text-align: center;
}
@media screen and (max-width: 768px) { 
	#modalMenu{
		display: none;
	}
}