.myModal{
    display: block;
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index:101;
}

.myModal#modal-01-01{
/*    display: block;*/
}

@media screen and (min-width: 1520px) {
.myModal {
}
}
.myModalBg{
    height: 100vh;
    position: absolute;
    width: 100%;
    background-color: rgba(213,214,215,0.8);
}
.myModal02 .myModalBg{
}
.myModal01 .myModalBg{
}
.myModal03 .myModalBg{
}
.myModalContent{
    background: transparent;
/*    background: rgba(0,0,0,0.3);*/
    background-color: #fff;
    transform: translate(-50%,-50%);
    width: 74.66%;
    max-width:280px;
    padding:20px 0;
    position: absolute;
    left: 50%;
    top: 50%;
}
.myModalText {
    width: 85.71%;
    max-width:240px;
    margin:0 auto;
}
.myModalImg {
    width: 85.71%;
    width: 100%;
    max-width:240px;
    margin:0 auto;
    position:relative;
}
.myModalImg::after{
	content: '';
	display: inline-block;
	background-image: url(../img/mask_wave_01.png);
	background-position:50% 100%;
	background-size: contain;
	background-size: cover;
	background-repeat:no-repeat;
	vertical-align: middle;
	position:absolute;
	width: 102%;
	height:12px;
	bottom:calc(100% - 8px);
	left:50%;
	transform: translate(-50%, 0);
}

@media (hover: hover) and (pointer: fine) {
}
.myModalNote {
	font-size:10px;
	font-weight:400;
	color:#000;
	letter-spacing:0.01em;
	line-height:1.8;
	padding:2em 0.4em;
}
.myModalImg img,
.myModalButton img{
    width: 100%;
    height:auto;
    vertical-align:bottom;
}
.myModalPict img{
    border-radius:10px;
}
.myModalText h2 {
	font-size:1.6rem;
	font-weight:600;
	line-height:1.3;
	color:#000;
	margin:0em;
	padding:1em 0 1em;
    letter-spacing: .04em;
}
.myModalText p {
	font-size:1.4rem;
	font-weight:300;
	line-height:1.75;
	color:#000;
	padding:0;
    letter-spacing: .04em;
}
.myModalLink {
	position:relative;
	padding:1.5em 0 0.5em;
	color:#000;
}
.myModalLink li {
	margin-bottom:0.6em;
	padding-top:0.05em;
	position:relative;
}

.myModalLink li{
	padding:0.1em 20px;
	text-align:right;
}
.myModalLink li a{
	position:relative;
	font-size:1.2rem;
	font-weight:400;
	line-height:1.3;
}
.myModalLink li a::after{
	content: '';
	display: inline-block;
	background-image: url(../img/icon_arrow.svg);
	background-position:0 50%;
	background-size: contain;
	background-repeat:no-repeat;
	vertical-align: middle;
	position:absolute;
	width: 12px;
	height: 6px;
	top:50%;
	left:0;
	transform: translate(-16px, -1.5px);
    transition: transform 0.5s;
}
@media (hover: hover) and (pointer: fine) {
.myModalLink li a{
    transition: color 0.5s;
}
.myModalLink li a:hover{
    color: #999;
}
.myModalLink li a:hover::after{
	transform: translate(-14px, -1.5px)
}
}






.myModalClose {
	position:absolute;
	display:block;
	top:32px;
	right:32px;
	width:32px;
	height:32px;
	border-radius:50%;
	overflow:hidden;
	transition: .5s ;
	transform: rotateZ( 0deg ) ;
    cursor: pointer;
}
.myModalClose img{
	width:100%;
	height:auto;
}
@media (hover: hover) and (pointer: fine) {
.myModalClose:hover{
	transform: rotateZ( 360deg ) ;
}
}
body.myBodyFixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}
body.myBodyFixed #chatplusview {
	display:none;
}
@media only screen and (min-width:768px) {
.brsp{display:none;}
.brpc{display:inline;}
}
@media only screen and (max-width:767px) {
.brsp{display:inline;}
.brpc{display:none;}
}
@media only screen and (max-width:767px) {
.myModal{
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}
.myModalClose {
	top:16px;
	right:16px;
}
}