.d-pc {
	display: block;
}

.d-sp {
	display: none;
}
.inline-block {
	display: inline-block;
}

p a.clr-red {
	color: #ff0000;
	font-weight: 700;
}

/* For devices small than 768px */
@media screen and (max-width:767px) {
	p a.clr-red {
		font-size: 120%;
	}

}

.mt10 {
	margin-top: 10px;
}

.mt20 {
	margin-top: 20px;
}

.pr20 {
	padding-right: 20px !important;
}

.pl20 {
	padding-left: 20px !important;
}

.clear {
	clear: both;
}

hr {
	width: 100%;
	border-bottom: 1px dotted #000;
	border-top: 0;
	margin-top: 14px;
}

#main-area>main[role="main"]>.main-section {
	margin-bottom: 40px;
}

/* ======================= block-link-register ======================= */
.block-link-register {
	position: relative;
	margin-top: 44px;
	margin-bottom: 35px;
}

.block-link-register h2 {
	position: relative;
	top: -30px;
	margin-bottom: -5px;
}

.block-link-register h2 img {
	max-width: 55%;
}

.btn-register-myjcheck img {
	max-width: 56%;
}

.overview {
	right: 18%;
	text-decoration: underline;
	position: relative;
}

.overview a:after {
	content: '';
	position: absolute;
	background: url(../images/myj_ico06.png) no-repeat;
	width: 21px;
	height: 26px;
	right: -27px;
	display: inline-block;
	background-size: 50%;
	transform: translateY(-26%);
	top: 50%;
}

/* For devices small than 768px */
@media screen and (max-width:767px) {
	.overview a:after {
		background-size: 70%;
		transform: translateY(-45%);
	}

	.d-pc {
		display: none;
	}

	.d-sp {
		display: block;
	}

	.block-link-register {
		padding-left: 28px;
		padding-right: 28px;
	}

	.block-link-register p:first-child img {
		max-width: 80%;
	}

	.block-link-register p:nth-child(3) {
		text-align: left;
	}

	.overview {
		right: 0;
	}

}

/* ======================= block 『MyJチェック』とは？ ======================= */
.sec-02 {
	margin-top: 50px;
}

.cont-block-01 .col-l {
	float: left;
	width: 200px;
	margin-right: 20px;
}

.cont-block-01 .col-r {
	float: left;
	text-align: justify;
	width: 480px;
}

.cont-block-01 .col-r h3 {
	font-size: 20px;
	color: #5f4942;
	font-weight: 700;
	margin-top: 27px;
}

.cont-block-01 .col-r p {
	margin-top: 9px;
	position: relative;
	padding-left: 15px;
}

.cont-block-01 .col-r p:before {
	content: '※';
	display: inline-block;
	position: absolute;
	left: 0;
}

/* For devices small than 768px */
@media screen and (max-width:767px) {
	.cont-block-01 .col-l {
		float: none;
		width: 200px;
		margin-right: 20px;
		width: 100%;
		text-align: center;
	}

	.cont-block-01 .col-r {
		padding: 0 7%;
		display: block;
		width: auto;
	}

	.cont-block-01 .col-l img {
		max-width: 30%;
	}

	.sp_left {
		text-align: left;
	}

}

/* For devices small than 480px */
@media screen and (max-width:480px) {
	.cont-block-01 .col-r h3 {
		font-size: 14px;
	}

}

/* ======================= block 『MyJチェック』はこんなに便利！ ======================= */
.sec-03 {
	margin-top: 36px;
}

.block-colum3 {
	display: inline-block;
	width: calc(100%/3);
	float: left;
	*display: inline;
	*zoom: 1;
}

.cont-block-02 .block-colum3 .content-colum {
	border-right: 1px solid #afa4a1;
	padding: 0 9px;
	min-height: 305px;
	margin-top: 25px;
}

.cont-block-02 .block-colum3:last-child .content-colum {
	border-right: 0;
	padding-right: 0;
}

.cont-block-02 .block-colum3:first-child .content-colum {
	padding-left: 0;
	margin-right: 4px;
}

.cont-block-02 h4 {
	color: #41b7db;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	margin-top: 9px;
	line-height: 25px;
}

.content-colum .txt-cont {
	margin-top: 13px;
}

.content-colum .txt-cont p {
	line-height: 21px;
	margin-top: 4px;
}

/* For devices small than 768px */
@media screen and (max-width:767px) {
	.block-colum3 {
		display: block;
		width: 100%;
	}

	.content-colum>p {
		position: absolute;
		width: 30%;
		padding-top: 12px;
	}

	.content-colum .txt-cont {
		float: right;
		margin-top: 0;
		width: 70%;
		min-height: 114px;
	}

	.cont-block-02 .block-colum3 {
		border-bottom: 1px solid #afa4a1;
	}

	.cont-block-02 .block-colum3 .content-colum {
		min-height: auto;
		border-right: none;
		padding: 0 0 30px;
		display: block;
		position: relative;
	}

	.cont-block-02 .block-colum3:last-child {
		border-bottom: 0;
	}

}

/* For devices small than 480px */
@media screen and (max-width:480px) {
	.content-colum .txt-cont {
		width: 65%;
	}

	.cont-block-02 h4 {
		font-size: 100%;
	}

}

/* ======================= block 毎月抽選で、ステキなプレゼントが当たる！ ======================= */
.sec-04 {
	margin-top: 44px;
}

.sec-04 h2.h2-title-01 {
	margin-bottom: 53px;
}

.cont-block-03 {
	background: url('../images/myj_img05.png');
	position: relative;
	padding-bottom: 20px;
}

.cont-block-03:before {
	content: '';
	display: block;
	background: url('../images/myj_img04.png') repeat-x;
	height: 20px;
	width: 100%;
}

.cont-block-03 h3 {
	position: relative;
	top: -83px;
	margin-bottom: -69px;
}

.txt-note {
	margin-top: -10px;
}

.cont-block-03 .cont-block {
	padding: 0 20px;
}

.cont-block-03 .cont-block .block-colum2 {
	display: inline-block;
	margin-bottom: 25px;
	cursor: pointer;
}

.cont-block-03 .cont-block .block-colum2:nth-child(2n) p {
	margin-right: 0;
	margin-left: 10px;
}

.cont-block-03 .cont-block .block-colum2:nth-child(2n+1) p {
	margin-right: 10px;
	margin-left: 0;
}

.cont-block-03 .block-bott {
	background: #fff;
	border-radius: 10px;
	position: relative;
	font-size: 12px;
	line-height: 1.6rem;
	letter-spacing: 0.08885px;
	padding: 20px 20px 15px;
	margin-bottom: 12px;
}

.cont-block-03 .block-bott p:last-child {
	line-height: 17px;
}

.cont-block-03 .block-bott p span {
    vertical-align: top;
    white-space: nowrap;
    display: table-cell;
    width: 40px;
}

.cont-block-03 .block-bott p span+span {
    padding-left: 5px;
    white-space: normal;
    width: auto;
}

/* For devices small than 768px */
@media screen and (max-width:767px) {
	.cont-block-03 .cont-block .block-colum2 {
		cursor: none;
	}

	.cont-block-03 .cont-block {
		padding: 0 3%;
	}

	.sec-04 h2.h2-title-01 {
		margin-bottom: 35px;
	}

	.cont-block-03 h3 {
		top: -49px;
		margin-bottom: -45px;
	}

	.cont-block-03 .block-bott p:first-child, .cont-block-03 .block-bott p:last-child {
		width: auto;
	}

	.cont-block-03 .cont-block .block-colum2:nth-child(2n) p {
		margin-right: 0;
		margin-left: 0;
	}

	.cont-block-03 .cont-block .block-colum2:nth-child(2n+1) p {
		margin-right: 0;
		margin-left: 0;
	}

}

/* The Modal (background) */

/* The Close Button */
.close {
	color: white;
	position: absolute;
	top: 0;
	right: 0;
	font-size: 35px;
	font-weight: bold;
	line-height: 1;
}

.close:hover, .close:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
	display: none;
	background: transparent;
	text-align: center;
}

/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -25px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 50%;
	user-select: none;
	-webkit-user-select: none;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
}

/* Position the "next button" to the right */
.next {
	right: -60px;
}
.prev {
	left: -60px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
}

img.hover-shadow {
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.hover-shadow:hover {
	opacity: .8;
}

/* For devices small than 768px */
@media screen and (max-width:767px) {
	.prev, .next {
		background-color: rgba(0, 0, 0, 0.8);
	}

	.hover-shadow:hover {
		opacity: 1;
	}

}

/*=================== contact block===================== */
.sec-05 .btn-register-myjcheck {
	margin-top: -14px;
}

.sec-05 hr {
	margin: 22px 0 17px
}

.sec-05 {
	margin-top: 30px;
}

.sec-05 .block-link-register {
	margin-top: 0;
}

.phone-number-02>p>a {
	position: relative;
	text-decoration: none;
	font-size: 2.6rem;
	font-weight: bold;
	color: #6eb92b;
	cursor: default;
	margin-left: 30px;
}

.block-link-register .fake-table-01 .fake-tr .fake-td {
	padding-left: 0;
	padding-right: 0;
}

.phone-number-02>p>a>span {
	padding-left: 61px !important;
}

.phone-number-02>p>a>span:before {
	left: 0;
	right: auto;
	font-size: 4rem;
	color: #6eb92b;
}

.phone-number-02>p:first-child {
	border-bottom: 2px solid #e7f8d0;
	margin-bottom: 17px;
	padding-bottom: 24px;
}

/* For devices small than 768px */
@media screen and (max-width:767px) {
	.block-link-register h2 {
		top: -22px;
		margin-bottom: 1%;
	}

	.sec-05 .block-link-register {
		margin-top: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.sec-05 .block-link-register .note, .sec-05 .block-link-register .list-memo-01 {
		padding: 0 20px;
	}

	.sec-05 .block-link-register .overview {
		right: 40px;
	}

	.sec-05 .fake-table-01 {
		padding: 0 20px;
		width: auto !important;
	}

	.phone-number-02 {
		padding-left: 0;
		width: 100%;
		display: block !important;
		margin-top: 13px
	}

	.phone-number-02 p {
		text-align: center;
	}

	.phone-number-02 p a {
		width: 100%;
		display: block;
		margin-left: 0;
		text-align: left;
		padding-left: 44px;
	}

	.sec-05 .fake-table-01 .fake-tr {
		border-right: 0;
	}

	.phone-number-02 p:first-child a {
		border-top: 2px solid #e7f8d0;
		border-bottom: 2px solid #e7f8d0;
		margin-top: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.phone-number-02>p:first-child {
		border-bottom: none;
		margin-bottom: 20px;
		padding-bottom: 0;
	}

	.phone-number-02>p:last-child a {
		margin-top: 20px;
	}

	.phone-number-02>p>a>span:before {
		font-size: 2.5rem;
	}

	.phone-number-02>p>a>span {
		padding-left: 41px !important;
	}

}

/* For devices small than 480px */
@media screen and (max-width:480px) {
	.block-link-register h2 {
		margin-bottom: -1%;
	}

}

/* For devices small than 480px */
@media screen and (max-width:414px) {
	.block-link-register h2 {
		margin-bottom: -2%;
	}

}

/* For devices small than 390px */
@media screen and (max-width:390px) {
	.phone-number-02 p a {
		font-size: 2rem;
	}

}

h1.h1-title-01 {
	margin-bottom: 18px;
}

.text-block-01 {
	margin-bottom: 16px;
}

.text-block-02 {
	margin-bottom: 27px;
}


.note {
	text-align: center;
}

/* For devices small than 768px */
@media screen and (max-width:767px) {
	.note {
		text-align: center;
	}

}

/* 2021/02/22 */

.visible {
	visibility: visible;
}

.mt5 {
	margin-top: 5px;
}

.mt15 {
	margin-top: 15px;
}

.mt30 {
	margin-top: 30px;
}

.tar {
	text-align: right;
}

.tac {
	text-align: center;
}

@media screen and (min-width:768px) {
	#main-area > main[role="main"] > .main-section > section > .section-01 {
		margin-top: 83px;
		margin-bottom: 66px;
	}

	#main-area > main[role="main"] > .main-section > section > .section-03 {
		margin-top: 70px;
	}

	.block-col2 {
		margin-left: -22px;
		margin-right: -22px;
	}

	.block-col2 > div,
	.block-col2 > li {
		width: 50%;
		padding-left: 22px;
		padding-right: 22px;
	}

}

.block-col2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.title-block {
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	height: auto;
	background: #8FC31F;
	padding: 13px 20px;
}

.title-block .indent {
	margin-left: -16px;
	text-indent: 16px;
}

.h4-title-01.mt30 {
	margin-top: 30px;
}

.qr-code-block {
	background: #FCF9F2;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding-top: 28px;
	padding-bottom: 20px;
	margin-top: 34px;
}

.qr-code-block > div {
	width: 50%;
	padding-left: 7.945205%;
	padding-right: 7.945205%;
}

.qr-code-block .qr-code {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	margin-bottom: 21px;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
}

.qr-code-block .qr-code .qr-code-link {
	margin-right: 17px;
	text-align: center;
}

.qr-code-block .qr-code .qr-code-link p {
	font-size: 14px;
	font-weight: bold;
	line-height: 2;
}

.qr-code-block .img-block {
	text-align: center;
	margin-bottom: 12px;
}

.life-app {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-left: -22px;
	margin-right: -22px;
	margin-top: 32px;
	margin-bottom: 12px;
}

.life-app li {
	width: 25%;
	padding-left: 22px;
	padding-right: 22px;
}

.life-app .step {
	font-size: 18px;
	font-weight: bold;
	width: 33px;
	height: 33px;
	background: #DC3A86;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	line-height: 33px;
	margin: 0 auto 8px;
}

.life-app .ttl {
	line-height: 1.48;
	margin-bottom: -4px;
}

.life-app img {
	margin-top: 10px;
}

.life-app .note {
	font-size: 12px;
	line-height: 1.66666;
	margin-top: 5px;
	text-align: left;
}

.note-01 {
	margin-top: 24px;
}

.txt-01 {
	margin-top: 32px;
	margin-bottom: 4px;
}

.block-img-col2 {
	margin-top: 27px;
	margin-bottom: 20px;
}

.img-01 {
	margin-bottom: 37px;
}

/* Modal popup
---------------------------*/
.modal-trigger {
	position: relative;
	margin-bottom: 8px;
	margin-top: 23px;
	text-align: center;
}

.modal-trigger .icon {
	position: absolute;
	display: block;
	width: 30px;
	height: 28.8px;
	background: url(../../common/images/ico_spSwitch_01.png) no-repeat;
	background-size: contain;
	bottom: 5px;
	right: 5px;
}

.modal-trigger:hover {
	cursor: pointer;
}

.modal-link:hover {
	cursor: pointer;
	text-decoration: none;
}

.modal-link {
	text-decoration: underline;
}


.modal-container {
	margin:0 auto;
	position: relative;
}

button.mfp-close {
	width: 40px;
	height: 40px;
	background: transparent url(../images/icon_close.png) no-repeat;
	background-size: contain;
	display: block;
	position: absolute;
	right: -20px;
	border:0;
	font-size:0;
	opacity: 1;
}
.modal-close:hover {
	cursor: pointer;
}
.-modal .bottom_lp .scroll-fix{
	z-index: 1;
}
@media screen and (min-width: 768px){
	.modal-container {
		max-width: 375px;
		padding-top:40px;
	}
	button.mfp-close{
		top:20px;
	}
}

@media screen and (max-width: 767px) {
	.modal-trigger {
		max-width: 344px;
	  margin-left: auto;
	  margin-right: auto;
	}
	.modal-container {
		max-width: 270px;
		padding-top:70px;
	}
	button.mfp-close{
		top:45px;
	}
}

/* End Modal popup
---------------------------*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.title-block {
		padding: 15px 20px 11px;
	}
}

@media screen and (max-width: 767px) {
	.title-block {
		margin-left: -10px;
		margin-right: -10px;
		padding: 13px 10px;
	}

	.qr-code-block > div {
		padding-left: 5.866666%;
	  padding-right: 10px;
	}

	.qr-code-block > div:first-child {
		padding-left: 10px;
	  padding-right: 5.866666%;
	}

	.qr-code-block {
		margin-top: 25px;
		padding-top: 20px;
		padding-bottom: 35px;
		margin-left: -10px;
		margin-right: -10px;
	}

	.qr-code-block .qr-code .qr-code-img {
		display: none;
	}

	.qr-code-block .qr-code .qr-code-link {
		margin-right: 0;
	}

	.block-life-app {
		overflow-x: hidden;
	}

	.life-app {
		flex-wrap: wrap;
	}

	.life-app li {
		width: 50%;
		box-sizing: border-box;
		margin-bottom: 20px;
	}

	.life-app li:nth-child(3), .life-app li:nth-child(4) {
		margin-bottom: 0;
	}

	.life-app li img {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.block-col2 {
		flex-direction: column;
	}

	.block-col2 > div, .block-col2 > li {
		width: 100%;
	}

	.block-img-col2 > div:first-child {
		margin-bottom: 23px;
	}

	.block-img-col2 img {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.note-01 {
		margin-top: 10px;
	}
}

@media screen and (max-width: 375px) {
	.qr-code-block .qr-code .qr-code-link {
		width: 100%;
	}
	.qr-code-block .qr-code img {
		width: 100%;
	}

	.block-img-col2 img {
		width: 100%;
	}
}

/*Magnific POPup*/
.mfp-bg{
  background: #0b0b0b;
  height: 100%;
  left: 0;
  opacity: 0.8;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1042;
}
.mfp-wrap{
  height: 100%;
  left: 0;
  outline: none !important;
  position: fixed;
  top: 0;
  webkit-backface-visibility: hidden;
  width: 100%;
  z-index: 1043;
}
.mfp-container{
  box-sizing: border-box;
  height: 100%;
  left: 0;
  padding: 0 8px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}
.mfp-container:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.mfp-align-top .mfp-container:before{
  display: none;
}
.mfp-content{
  display: inline-block;
  margin: 0 auto;
  position: relative;
  text-align: left;
  vertical-align: middle;
  z-index: 1045;
}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content{
  cursor: auto;
  width: 100%;
}
.mfp-ajax-cur{
  cursor: progress;
}

.mfp-zoom{
  cursor: -moz-zoom-in;
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content{
  cursor: auto;
}
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter{
  moz-user-select: none;
  user-select: none;
  webkit-user-select: none;
}
.mfp-loading.mfp-figure{
  display: none;
}
.mfp-hide{
  display: none !important;
}
.mfp-preloader{
  color: #CCC;
  left: 8px;
  margin-top: -0.8em;
  position: absolute;
  right: 8px;
  text-align: center;
  top: 50%;
  width: auto;
  z-index: 1044;
}
.mfp-preloader a{
  color: #CCC;
}
.mfp-preloader a:hover{
  color: #FFF;
}
.mfp-s-ready .mfp-preloader{
  display: none;
}
.mfp-s-error .mfp-content{
  display: none;
}
button.mfp-arrow{
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  display: block;
  outline: none;
  overflow: visible;
  padding: 0;
  touch-action: manipulation;
  webkit-appearance: none;
  z-index: 1046;
}
button::-moz-focus-inner{
  border: 0;
  padding: 0;
}
.mfp-close{
  color: #FFF;
  font-family: Arial, Baskerville, monospace;
  font-size: 28px;
  font-style: normal;
  height: 44px;
  line-height: 44px;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  position: absolute;
  right: 0;
  text-align: center;
  text-decoration: none;
  top: 0;
  width: 44px;
}
.mfp-close:hover,
 .mfp-close:focus{
  opacity: 1;
}

.mfp-close-btn-in .mfp-close{
  color: #333;
}

.mfp-counter{
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
}
.mfp-arrow{
  height: 110px;
  margin: 0;
  margin-top: -55px;
  opacity: 0.65;
  padding: 0;
  position: absolute;
  top: 50%;
  webkit-tap-highlight-color: transparent;
  width: 90px;
}
.mfp-arrow:active{
  margin-top: -54px;
}
.mfp-arrow:hover,
 .mfp-arrow:focus{
  opacity: 1;
}
.mfp-arrow:before,
 .mfp-arrow:after{
  border: medium inset transparent;
  content: '';
  display: block;
  height: 0;
  left: 0;
  margin-left: 35px;
  margin-top: 35px;
  position: absolute;
  top: 0;
  width: 0;
}
.mfp-arrow:after{
  border-bottom-width: 13px;
  border-top-width: 13px;
  top: 8px;
}
.mfp-arrow:before{
  border-bottom-width: 21px;
  border-top-width: 21px;
  opacity: 0.7;
}
.mfp-arrow-left{
  left: 0;
}
.mfp-arrow-left:after{
  border-right: 17px solid #FFF;
  margin-left: 31px;
}
.mfp-arrow-left:before{
  border-right: 27px solid #3F3F3F;
  margin-left: 25px;
}
.mfp-arrow-right{
  right: 0;
}
.mfp-arrow-right:after{
  border-left: 17px solid #FFF;
  margin-left: 39px;
}
.mfp-arrow-right:before{
  border-left: 27px solid #3F3F3F;
}
.mfp-iframe-holder{
  padding-bottom: 40px;
  padding-top: 40px;
}
.mfp-iframe-holder .mfp-content{
  line-height: 0;
  max-width: 900px;
  width: 100%;
}
.mfp-iframe-holder .mfp-close{
  top: -40px;
}
.mfp-iframe-scaler{
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
  width: 100%;
}
.mfp-iframe-scaler iframe{
  background: #000;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
img.mfp-img{
  box-sizing: border-box;
  display: block;
  height: auto;
  line-height: 0;
  margin: 0 auto;
  max-width: 100%;
  padding: 40px 0 40px;
  width: auto;
}
.mfp-figure{
  line-height: 0;
}
.mfp-figure:after{
  background: #444;
  bottom: 40px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  content: '';
  display: block;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 40px;
  width: auto;
  z-index: -1;
}
.mfp-figure small{
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}
.mfp-figure figure{
  margin: 0;
}
.mfp-bottom-bar{
  cursor: auto;
  left: 0;
  margin-top: -36px;
  position: absolute;
  top: 100%;
  width: 100%;
}
.mfp-title{
  color: #F3F3F3;
  line-height: 18px;
  padding-right: 36px;
  text-align: left;
  word-wrap: break-word;
}
.mfp-image-holder .mfp-content{
  max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure{
  cursor: pointer;
}
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px){
  .mfp-img-mobile .mfp-image-holder{
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img{
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after{
    bottom: 0;
    top: 0;
  }
  .mfp-img-mobile .mfp-figure small{
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar{
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 5px;
    position: fixed;
    top: auto;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty{
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter{
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close{
    background: rgba(0, 0, 0, 0.6);
    height: 35px;
    line-height: 35px;
    padding: 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 35px;
  }
}
@media all and (max-width: 900px){
  .mfp-arrow{
    transform: scale(0.75);
    webkit-transform: scale(0.75);
  }
  .mfp-arrow-left{
    transform-origin: 0;
    webkit-transform-origin: 0;
  }
  .mfp-arrow-right{
    transform-origin: 100%;
    webkit-transform-origin: 100%;
  }
  .mfp-container{
    padding-left: 6px;
    padding-right: 6px;
  }
}

/*add animate*/
.animate__animated {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}