/* カスタムフォント設定 */
@font-face {
	font-family: 'gt walsheim';
	src: url('../fonts/GT Walsheim-selected/GT-Walsheim-Regular.otf') format('opentype'),
		url('../fonts/GT Walsheim-selected/GT-Walsheim-Medium.otf') format('opentype'),
			url('../fonts/GT Walsheim-selected/GT-Walsheim-Black.otf') format('opentype'),
			url('../fonts/GT Walsheim-selected/GT-Walsheim-Bold.otf') format('opentype'),
			url('../fonts/GT Walsheim-selected/GT-Walsheim-Light.otf') format('opentype'),
			url('../fonts/GT Walsheim-selected/GT-Walsheim-Thin.otf') format('opentype'),
			url('../fonts/GT Walsheim-selected/GT-Walsheim-Ultra-Bold.otf') format('opentype'),
			url('../fonts/GT Walsheim-selected/GT-Walsheim-Ultra-Light.otf') format('opentype');
}


/* 全体共通 */
body {
	color: #54585A;
	font-size: 16px;
	line-height: 1.5;
	overflow-x: hidden;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

h2, h3, h4, h5, h6, h7, p {
	font-family: gt walsheim, helvetica neue, helvetica, hiragino sans, hiragino kaku gothic pron, arial, yu gothic, meiryo, sans-serif;
}

.container {
	padding: 0 10px;
}





/* メディア設定 */

/* 画面の幅が1200px以上の場合 */
@media (min-width: 1200px) {
	.container {
		max-width: 1220px;
	}

	.header-desktop .global-nav li a {
		font-size: 17px;
		padding-left: 30px;
		padding-right: 30px;
		padding-bottom: 10px;
	}
}

/* 画面の幅が1199px以下の場合 */
@media (max-width: 1199px) {
	.container {
		max-width: none;
	}

	.footer-desktop .block-a {
		order: 2;
		width: 100%;
	}

		.footer-desktop .block-a .block-a-1 {
			max-width: 300px;
		}

		.footer-desktop .block-a .block-a-2 {
			max-width: 400px;
		}

	.footer-desktop .block-b {
		order: 1;
		width: 100%;
	}

	.header-desktop .global-nav li a {
		font-size: 17px;
		padding-left: 25px;
		padding-right: 25px;
		padding-bottom: 10px;
	}
}


/* 画面の幅が768px以上、991px以下の場合 */
@media (min-width: 768px) and (max-width: 991px) {
	.side-menu .menu-list .list-title .list-button {
		font-weight: bold;
		font-size: 14px;
	}

	.side-menu .menu-list .list-group-item .list-items li a {
		font-size: 12px;
		padding: 10px 15px !important;
	}

	.header-desktop .global-nav li a {
		font-size: 15px;
		padding-left: 13px;
		padding-right: 13px;
		padding-bottom: 10px;
	}
}


/* 画面の幅が768px以上の場合 */
@media (min-width: 768px) {
	body {
		padding-top: 190px;
	}

	.top-breadcrumbs .breadcrumb:first-of-type:before {
		margin-right: 5px;
		width: 25px;
		height: 22px;
	}

	.header-desktop .global-nav .submenu-items ul li a {
		text-align: left;
		font-size: 12px;
	}

	.header-desktop .global-nav li.guide ul li {
		margin-right: 5px;
	}

		.header-desktop .global-nav li.guide ul li.box a {
			width: 260px;
			font-size: 10px;
		}

	.header-desktop .global-nav li.products ul li {
		margin-right: 0.6em;
	}

		.header-desktop .global-nav li.products ul li a p {
			font-size: 1.3vw;
		}

	.main-contents .btn-element div.btn-element-submit-mailadd-change input {
		width: 190px;
	}

	.main-contents .btn-element div.btn-element-submit-mailadd-change:after {
		right: 15%;
	}
	.main-contents div.input-form-table {
		border-top: #cccccc 1px solid;
	}
		.main-contents div.input-form-table .input-form-tr {
			border-bottom: #cccccc 1px solid;
			padding: 0;
			margin: 0;
		}
			.main-contents div.input-form-table .input-form-tr .heading-outer {
				padding-top: 1.38em;
				padding-bottom: 1.38em;
				padding-left: 19px;
				padding-right: 19px;
				margin: 2px 0;
				background-color: #eaf9f8;
				font-size: 20px;
			}
	.main-contents .skin-contact-info .text-area {
		padding-right: 10%;
	}
}

/* 画面の幅が992px以上の場合 */
@media (min-width: 992px) {
	.header-desktop .global-nav .submenu-items ul li a {
		font-size: 15px;
	}

	.header-desktop .global-nav li.guide ul li.box a {
		width: 295px;
		font-size: 12px;
	}

	.header-desktop .global-nav li.guide ul li {
		margin-right: 20px;
	}

	.header-desktop .global-nav li.products ul li {
		margin-right: 1.8em;
	}

		.header-desktop .global-nav li.products ul li a p {
			font-size: 14px;
		}
}

/* 画面の幅が767pxpx以下の場合 */
@media (max-width: 767px) {
	body {
		padding-top: 70px;
	}

	.main .main-cintents {
		order: 1;
		width: 100%;
	}

	.main .side-menu {
		order: 2;
		width: 100%;
	}

	.top-breadcrumbs {
		font-size: 14px;
	}

		.top-breadcrumbs .breadcrumb:first-of-type:before {
			margin-right: 0;
			background-size: 20px 20px;
			width: 25px;
			height: 22px;
		}

	.side-menu {
		padding-top: 60px;
	}

		.side-menu .menu-list .list-title .list-button:before {
			position: relative;
			font-family: 'font awesome 5 free';
			font-weight: 600;
			content: "\f0d7";
			left: -5px;
		}
	.main-contents a[href^=tel] {
		color: inherit;
	}
	.main-contents div.input-form-table {
		font-size: 18px;
	}
		.main-contents div.input-form-table .input-form-tr .required-square:after {
			border-radius: 2px;
			height: 18px;
			line-height: 18px;
			width: 35px;
			font-size: 14px;
		}
		.main-contents div.input-form-table .input-form-tr .text-outer {
			padding: 5px 0 0;
			margin: 0;
		}
		.main-contents div.input-form-table .input-form-tr .heading-outer {
			padding: 0px;
		}
		.main-contents div.input-form-table .input-form-tr .text-outer .form-control {
			width: 100%;
			font-size: 17px;
		}
		.main-contents div.input-form-table .input-form-tr .text-outer .element-description {
			font-size: 16px;
		}

	.main-contents div.contact-wrapper .wrapper-title {
		font-size: 20px;
		margin-bottom: 20px;
	}
		.main-contents div.contact-wrapper .wrapper-title:after {
			width: 55px;
			height: 2px;
		}

	.main-contents .form-element div.description-mailmagazine {
		font-size:12px;
	}
	.main-contents .pa-members-wrapper div.w75-center-content {
		width: 100%;
	}
	.main-contents div.row-radio-controls {
		margin-left: 0;
	}
    .main-contents div.radio-control-credits {
		width: 46%;
		padding-bottom: 15px;
		padding-left: 0;
	}
}





/* カスタムクラス */
.btn-mobile-footer {
	border: 2px solid #b5b5b5;
	width: 90%;
	padding: 10px 0;
	color: #54585a;
	margin-bottom: 15px;
	background-color: #fff;
}
	.btn-mobile-footer:hover {
		background-color: #fff;
	}
	.btn-mobile-footer {
		background-color: #fff;
	}





/* PCヘッダー周り */
.header-desktop {
	font-size: 12px;
	padding-left: 3px;
	padding-right: 3px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1030;
	background-color: #fff;
	border-bottom: 1px solid #cbcbcb;
}
	.header-desktop a {
		text-decoration: none;
	}
		.header-desktop a:visited {
			text-decoration: none;
		}
	.header-desktop .header-top {
		border-bottom: 1px solid #cbcbcb;
	}
	.header-desktop h1 {
		font-size: 12px;
		line-height: 21px;
		margin: 0;
	}
	.header-desktop ul {
		line-height: 21px;
		margin: 0;
		padding: 0;
	}
		.header-desktop ul li {
			display: inline-block;
			padding-left: 1.2em;
		}
			.header-desktop ul li a {
				outline: 0;
				color: #54585a;
				font-weight: bold;
				text-decoration-line: none;
			}
			.header-desktop ul li.mypage {
				background-repeat: no-repeat;
				background-position: center left;
				background-image: url(https://proactiv.jp/hubfs/mypage/images/header/mypage_icon.png);
			}
			.header-desktop ul li.header-menu-shopitem a {
				color: #64ccc9;
			}
	.header-desktop .brand-logo {
		width: 200px;
		height: auto;
	}
	.header-desktop .btn-logout {
		background-color: #64ccc9;
		border-color: #64ccc9;
		width: 215px;
		height: 62px;
		padding-top: 15px;
	}
		.header-desktop .btn-logout:hover {
			background-color: #64ccc9;
			border-color: #64ccc9;
		}

	/* グローバルナビ */
	.header-desktop .global-nav {
		padding-top: 15px;
		color: #54585A;
	}
		.header-desktop .global-nav li {
			padding-left: 0px;
		}
			.header-desktop .global-nav li a {
				font-weight: normal;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				padding-bottom: 10px;
			}
				.header-desktop .global-nav li a img {
					margin-top: 8px;
				}
					.header-desktop .global-nav li a img.off-btn {
						display: none;
					}
				.header-desktop .global-nav li a:hover {
					color: #f26178;
				}
					.header-desktop .global-nav li a:hover img.on-btn {
						display: none;
					}
					.header-desktop .global-nav li a:hover img.off-btn {
						display: block;
					}
			.header-desktop .global-nav li .submenu-items {
				display: none;
				width: 100vw;
				position: absolute;
				top: 100%;
				left: 0;
				z-index: 1000;
				float: left;
				min-width: 160px;
				margin-top: 0;
				padding: 25px 0;
				background-color: #fcfcfc;
				box-shadow: none;
				border-color: #cbcbcb;
				border-left: none;
				border-right: none;
				left: calc(50% - 50vw);
				border: 1px solid rgba(0, 0, 0, .15);
				border-radius: 4px;
			}
		.header-desktop .global-nav .submenu-items ul {
			display: flex;
			padding-left: 15px;
		}
			.header-desktop .global-nav .submenu-items ul li {
				display: flex;
				align-items: center;
				margin-right: 2.0em;
			}
				.header-desktop .global-nav .submenu-items ul li a {
					display: flex;
					align-items: center;
					padding: 0 0 0 5px;
				}
		.header-desktop .global-nav li.concept ul {
			display: flex;
		}
		.header-desktop .global-nav li.products ul li{
			align-items: flex-start;
		}
			.header-desktop .global-nav li.products ul li a {
				display: flex;
				flex-direction: row;
				align-items: flex-start;
			}
			.header-desktop .global-nav li.products ul li dt {
				font-size: 15px;
				padding: 5px 0 5px 0;
				margin-bottom: .8em;
				width: 100%;
				font-weight: 400;
			}
			.header-desktop .global-nav li.products ul li dd {
				margin: 1em 0;
				line-height: 25px;
			}
			.header-desktop .global-nav li.products ul li a img {
				width: 64px;
				height: 51px;
				margin: 0 .8em 0 0;
			}
			.header-desktop .global-nav li.products ul li a p {
				margin: 0;
				white-space: nowrap;
				text-decoration: underline;
			}
		.header-desktop .global-nav li.about-acne ul li {
			padding: 10px 0;
			font-weight: bold;
		}
			.header-desktop .global-nav li.about-acne ul li a {
				font-weight: bold;
			}
		.header-desktop .global-nav li.guide ul li.link ul {
			display: block;
		}
		.header-desktop .global-nav li.guide ul li.link li {
			font-size: 15px;
			line-height: 230%;
		}
			.header-desktop .global-nav li.guide ul li.link li.l1 a {
				font-weight: bold;
			}
			.header-desktop .global-nav li.guide ul li.link li.l2 {
				padding-left: 15px;
			}
		.header-desktop .global-nav li.guide ul li.box {
			border-style: solid;
			border-width: 2px;
			border-color: #64ccc9;
			border-radius: 3px;
			background-color: #fff;
			margin-right: 1.4em;
		}
			.header-desktop .global-nav li.guide ul li.box a {
				height: 100px;
				padding: 16px;
				align-items: center;
				color: #54585a;
				background-image: none;
				flex-direction: row;
				text-align: left;
			}
				.header-desktop .global-nav li.guide ul li.box a p {
					font-weight: 400;
					padding-left: 1em;
					line-height: 180%;
					margin: 0;
				}
					.header-desktop .global-nav li.guide ul li.box a p span {
						font-weight: 700;
						color: #67c7c6;
						font-size: 1.583em;
					}
						.header-desktop .global-nav li.guide ul li.box a p span span {
							font-size: .843em;
							padding-top: 0;
						}





/* SPヘッダー周り */
.header-mobile {
}
	.header-mobile .header-top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1030;
		background-color: #fff;
		height: 65px;
		border-bottom: 1px solid #cfcfcf;
	}
		.header-mobile .header-top img {
			max-height: 64px;
		}
			.header-mobile .header-top img.brand-logo {
				width: 135px;
				height: 49px;
				margin-top: 5px;
			}
	.header-mobile .mobile-nav .modal-dialog {
		position: fixed;
		top: 0;
		left: 0;
		margin: 0;
		width: 87%;
		height: 100%;
		max-width: none;
	}
		.header-mobile .mobile-nav .modal-dialog .modal-close {
			max-height: 60px;
		}
		.header-mobile .mobile-nav .modal-dialog .modal-content {
			background-color: #fff;
			border-radius: 0;
			overflow-y: scroll;
			overflow-y: auto;
			height: 100%;
			padding-bottom: 60px;
		}
			.header-mobile .mobile-nav .modal-dialog .modal-content ul {
				list-style: none;
				padding: 0;
				margin: 0;
			}
			.header-mobile .mobile-nav .modal-dialog .modal-content > ul li {
				padding-left: 10px;
				padding-right: 10px;
			}
				.header-mobile .mobile-nav .modal-dialog .modal-content > ul li.text-title {
					border-bottom: 2px solid #afe1dc;
				}
				.header-mobile .mobile-nav .modal-dialog .modal-content > ul li.link-icon {
					background-color: #E0F7FA;
				}
				.header-mobile .mobile-nav .modal-dialog .modal-content > ul li.pa-menu {
					background-color: #64ccc9;
					border-bottom: 2px solid #fff;
				}
					.header-mobile .mobile-nav .modal-dialog .modal-content > ul li.pa-menu a {
						display: flex;
						padding: 16px 0;
					}
				.header-mobile .mobile-nav .modal-dialog .modal-content > ul li.pa-products {
					background-color: #E0F7FA;
					border-bottom: 2px solid #fff;
				}
					.header-mobile .mobile-nav .modal-dialog .modal-content > ul li.pa-products a {
						display: flex;
						padding: 10px 0;
					}
				.header-mobile .mobile-nav .modal-dialog .modal-content > ul li.text-menu {
					border-bottom: 1px solid #cbcbcb;
				}
					.header-mobile .mobile-nav .modal-dialog .modal-content > ul li.text-menu a {
						display: flex;
						padding: 15px 0;
					}
				.header-mobile .mobile-nav .modal-dialog .modal-content > ul li img {
					width: 100%;
				}
				.header-mobile .mobile-nav .modal-dialog .modal-content > ul li dl {
					margin: 0;
				}
					.header-mobile .mobile-nav .modal-dialog .modal-content > ul li dl dt {
						padding-top: 7px;
						padding-bottom: 5px;
					}
						.header-mobile .mobile-nav .modal-dialog .modal-content > ul li dl dt img {
							height: 15px;
							width: auto;
						}
					.header-mobile .mobile-nav .modal-dialog .modal-content > ul li dl dd {
						margin: 0;
					}
						.header-mobile .mobile-nav .modal-dialog .modal-content > ul li dl dd.right-line {
							border-right: 3px solid #fff;
						}
						.header-mobile .mobile-nav .modal-dialog .modal-content > ul li dl dd a {
							padding-right: 10px;
							padding-top: 11px;
							padding-bottom: 11px;
						}
			.header-mobile .mobile-nav .modal-dialog .modal-content .cam_bana {
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 15px;
				padding-bottom: 15px;
			}
				.header-mobile .mobile-nav .modal-dialog .modal-content .cam_bana a {
					display: flex;
				}
				.header-mobile .mobile-nav .modal-dialog .modal-content .cam_bana img {
					max-width: 100%;
					height: auto;
				}
			.header-mobile .mobile-nav .modal-dialog .modal-content .close-button {
				background-color: #000;
				margin-bottom: 20px;
				padding: 10px 0;
			}
				.header-mobile .mobile-nav .modal-dialog .modal-content .close-button img {
					height: 16px;
				}





/* フッター共通 */
.footer-desktop ul, .footer-mobile ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-desktop a.facebook, .footer-mobile a.facebook {
	background: #3b5998;
}
.footer-desktop a.instagram, .footer-mobile a.instagram {
	background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}
.footer-desktop a.xicon, .footer-mobile a.xicon {
	background: #000;
}
.footer-desktop a.youtube, .footer-mobile a.youtube {
	background: #fe0000;
}





/* PCフッター周り */
.footer-desktop {
	background: #f8f8f8;
}
	.footer-desktop a, .footer-desktop a:visited {
		color: #54585a;
	}
	.footer-desktop .footer-top {
		padding-top: 60px;
	}
		.footer-desktop .footer-top .bg-image-container {
			width: 100%;
		}
			.footer-desktop .footer-top .bg-image-container .btn-image {
				top: 82%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
			}
				.footer-desktop .footer-top .bg-image-container .btn-image img {
					width: 100%;
				}
	.footer-desktop .footer-notice {
		padding-top: 20px;
		padding-bottom: 60px;
		font-size: 15px;
		font-weight: bold;
	}
		.footer-desktop .footer-notice a {
			color: #64ccc9;
			text-decoration: none;
		}
			.footer-desktop .footer-notice a:hover {
				color: #f26178;
			}
	.footer-desktop ul.social-links {
		margin-top: 30px;
	}
		.footer-desktop ul.social-links li {
			margin-right: 13px;
		}
			.footer-desktop ul.social-links li a {
				width: 55px;
				height: 55px;
				border-radius: 100%;
				text-align: center;
				display: block;
				color: #fff;
				font-size: 32px;
				line-height: 55px;
			}
	.footer-desktop .block-a .block-a-1 {
		min-width: 320px;
	}
	.footer-desktop .block-a .block-a-2 {
		min-width: 350px;
	}
	.footer-desktop .contact-title {
		padding-top: 20px;
		margin-bottom: 0;
		font-size: 120%;
	}
	.footer-desktop .contact {
		font-size: 120%;
	}
	.footer-desktop .tel-details {
		font-size: 90%;
	}
	.footer-desktop .block-b {
		margin: 0;
	}
		.footer-desktop .block-b dl dt {
			font-weight: 400;
			font-size: 18px;
			height: 35px;
			margin-top: 10px;
		}
			.footer-desktop .block-b dl dt:before {
				content: "";
				display: inline-block;
				width: .83em;
				height: .83em;
				background-color: #54585a;
				margin-right: 3px;
			}
		.footer-desktop .block-b dl dd {
			font-size: 15px;
			height: 30px;
			margin: 0;
		}
		.footer-desktop .block-b a {
			text-decoration: none;
		}
	.footer-desktop .bottom-nav {
		border-top: 1px solid #bebebe;
		padding: 10px 0;
		margin-top: 40px;
	}
		.footer-desktop .bottom-nav ul li {
			padding-right: 25px;
		}
		.footer-desktop .bottom-nav .jdma-logo img {
			width: 130px;
			height: auto;
		}
		.footer-desktop .bottom-nav a {
			text-decoration: none;
			font-size: 14px;
		}
	.footer-desktop .copyright-text {
		border-top: 1px solid #bebebe;
	}
		.footer-desktop .copyright-text p {
			margin: 0;
			padding: 30px 0;
			font-size: 13px;
		}





/* SPフッター周り */
.footer-mobile {
	background: #f8f8f8;
}
	.footer-mobile a, .footer-mobile a:visited {
		color: #54585a;
	}
	.footer-mobile .footer-top {
		padding-top: 40px;
	}
		.footer-mobile .footer-top .bg-image-container {
			width: 100%;
		}
			.footer-mobile .footer-top .bg-image-container .btn-image {
				top: 85%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 90%;
			}
				.footer-mobile .footer-top .bg-image-container .btn-image img {
					width: 100%;
				}
	.footer-mobile .footer-notice {
		padding-top: 50px;
		padding-bottom: 50px;
		font-size: 15px;
		font-weight: bold;
	}
		.footer-mobile .footer-notice a {
			text-decoration: none;
			color: #64ccc9;
		}
			.footer-mobile .footer-notice a:hover {
				color: #f26178;
			}
	.footer-mobile .customer {
		padding-bottom: 20px;
	}
		.footer-mobile .customer .contact-title {
			margin: 0;
		}
		.footer-mobile .customer .contact {
			margin: 0;
			padding-bottom: 20px;
		}
		.footer-mobile .customer .tel-details {
			font-size: 11px;
		}
	.footer-mobile ul.social-links {
		width: 70%;
		margin: 0 auto;
		padding: 30px 0;
	}
		.footer-mobile ul.social-links li a {
			width: 55px;
			height: 55px;
			border-radius: 100%;
			text-align: center;
			display: block;
			color: #fff;
			font-size: 32px;
			line-height: 55px;
		}

	.footer-mobile .bottom-nav ul {
		list-style: none;
		padding: 0;
	}
		.footer-mobile .bottom-nav ul li {
			border: 1px solid #e0e0e0;
			width: 100%;
			overflow: hidden;
			background-color: #fff;
		}
			.footer-mobile .bottom-nav ul li:not(:first-child) {
				border-top: none;
			}
			.footer-mobile .bottom-nav ul li a {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10px 5px 10px 15px;
				text-decoration: none;
				width: 100%;
				font-size: 12px;
				position: relative;
			}
				.footer-mobile .bottom-nav ul li a::after {
					content: "〉";
					font-weight: bold;
					color: #54585a;
					position: absolute;
					right: 0px;
					top: 50%;
					transform: translateY(-50%);
				}
	.footer-mobile .jdma-logo {
		padding-top: 30px;
		width: 19.2%;
	}
		.footer-mobile .jdma-logo img {
			width: 100%;
		}
	.footer-mobile .copyright-text {
		padding-top: 30px;
		padding-bottom: 20px;
		font-size: 9px;
	}





/* パンくずリスト */
.top-breadcrumbs {
	border-bottom: 1px solid #cbcbcb;
}
	.top-breadcrumbs .breadcrumb:first-of-type:before {
		content: "";
		background-image: url(https://proactiv.jp/hubfs/mypage/images/main/home_icon.gif);
		background-repeat: no-repeat;
	}
	.top-breadcrumbs a {
		color: #64ccc9;
		text-decoration-line: none;
	}
	.top-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
		font-family: 'font awesome 5 free';
		font-weight: bold;
		content: ">";
		color: #54585a;
		padding: 0 5px;
	}





/* サイドメニュー */
.side-menu ul {
	padding: 0;
}
.side-menu .menu-list .list-group-item {
	margin-bottom: 30px;
}
.side-menu .menu-list .list-title {
	padding: 12px 15px;
	color: #ffffff;
	font-weight: bold;
	background-color: #64ccc9;
	font-size: 18px;
}
	.side-menu .menu-list .list-title .list-button {
		font-weight: bold;
	}
.side-menu .menu-list .list-group-item .list-items {
	list-style-type: none;
	background: #ffffff;
	font-size: 16px;
}
.side-menu .menu-list .list-group-item ul.list-items li a:hover,
.side-menu .menu-list .list-group-item ul.list-items li a:focus,
.side-menu .menu-list .list-group-item ul.list-items li a:active {
	background: #dcf3f3;
	color: #2ea7a4;
}
.side-menu .menu-list .list-group-item ul.list-items li a {
	color: #54585a;
	padding: 15px 15px 15px 20px;
	border-bottom: 1px dotted #666666;
	display: block;
	text-decoration: none;
}





/* メイン(.main-contents) */
.main-contents .h2-title {
	border-bottom: 2px solid #c9c9c9;
	padding-bottom: 8px;
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 30px;
}
.main-contents a{
	text-decoration: none;
}
.main-contents .font-color-pa {
	color: #64ccc9;
}
.main-contents .txt-indent {
	text-indent: -1em;
	padding-left: 1em;
}
.main-contents .pictures-img img {
	max-width: 100%;
	height: auto;
}
.main-contents .video-wrapper-w800h450 {
	margin: 40px auto 0;
	width: 800px;
}
	.main-contents .video-wrapper-w800h450 iframe {
		height: 450px;
	}
.main-contents .form-element {
	padding: 0 16px;
	margin-bottom: 30px;
}
	.main-contents .form-element .form-control {
		border-radius: 0;
		color: #555555;
		background-color: #ffffff;
		border-color: #cccccc;
		font-size: 14px;
		min-height:35px;
	}
		.main-contents .form-element .form-control:focus {
			border-color: #66afe9;
			outline: 0;
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
		}
	.main-contents .form-element .lbl-readonly {
		color: #717171;
		border-color: #bbbbbb;
		background: #ededed;
	}
	.main-contents .form-element .form-required-s:before { /* s=start */
		background-image: url(https://proactiv.jp/hubfs/mypage/images/main/required.png);
		background-size: 10px 7px;
		content: "";
		display: inline-block;
		height: 7px;
		width: 10px;
		position: relative;
		right: 5px;
		top: -2px;
	}
	.main-contents .form-element .form-required:after {
		background-image: url(https://proactiv.jp/hubfs/mypage/images/main/required.png);
		background-size: 10px 7px;
		content: "";
		display: inline-block;
		height: 7px;
		width: 10px;
		position: relative;
		left: 5px;
		top: -2px;
	}
	.main-contents .form-element .element-description {
		font-size: 17px;
		color: #f26178;
		display: block;
	}
.main-contents .btn {
	border: none;
	border-radius: 2px;
	padding: 8px 30px;
}
.main-contents .btn-element .btn-cancel {
	background: linear-gradient(white, #eeeeee);
}
.main-contents .btn-element .btn-element-submit {
	display: inline-block;
	position: relative;
}
	.main-contents .btn-element .btn-element-submit:after {
		content: "\f054";
		font-weight: bold;
		font-family: "Font Awesome 5 Free";
		line-height: 1;
		position: absolute;
		right: 25%;
		top: 50%;
		transform: translateY(-50%);
		color: #ffffff;
		pointer-events: none;
	}
.main-contents .btn-element .btn-submit {
	background: linear-gradient(#8ad9d6, #64ccc9);
	color: #ffffff;
	width: 113px;
	height: 42px;
	padding-left: 15px;
}
	.main-contents .btn-element .btn-submit:hover,
	.main-contents .btn-element .btn-submit:focus {
		background-color: #64ccc9;
		border-color: #64ccc9;
		color: #ffffff;
	}
.main-contents .btn-element .btn-element-submit-mailadd-change {
	display: inline-block;
	position: relative;
}
	.main-contents .btn-element .btn-element-submit-mailadd-change:after {
		content: "\f054";
		font-weight: bold;
		font-family: "Font Awesome 5 Free";
		line-height: 1;
		position: absolute;
		right: 10%;
		top: 50%;
		transform: translateY(-50%);
		color: #ffffff;
		pointer-events: none;
	}
.main-contents .btn-element .btn-submit-mailadd-change {
	background: linear-gradient(#8ad9d6, #64ccc9);
	color: #ffffff;
	width: 160px;
	height: 42px;
	padding-left: 15px;
}
	.main-contents .btn-element .btn-submit-mailadd-change:hover,
	.main-contents .btn-element .btn-submit-mailadd-change:focus {
		background-color: #64ccc9;
		border-color: #64ccc9;
		color: #ffffff;
	}
.main-contents .btn-element .btn-element-change:after {
	right: 7%;
}
.main-contents .completion-message {
	font-size: 20px;
}
.main-contents .completion-message .abtn-completion {
	background: linear-gradient(#8ad9d6, #64ccc9);
	color: #ffffff;
	width: 113px;
	height: 42px;
	padding-left: 15px;
	margin-top: 15px;
}
	.main-contents .completion-message .abtn-completion:hover,
	.main-contents .completion-message .abtn-completion:focus {
		background-color: #64ccc9;
		border-color: #64ccc9;
		color: #ffffff;
	}
	.main-contents .completion-message .abtn-completion:after {
		font-family: 'font awesome 5 free';
		font-weight: bold;
		content: "\f105";
		position: absolute;
		margin-left: 10px;
		font-size: 20px;
		line-height: normal;
	}
.main-contents .form-element .link-color-pa {
	color: #64ccc9;
}
.main-contents .form-element .link-color-pa-caution {
	color: #F26178;
}
.main-contents .form-element .input-zipcode-1 {
	width: 77px;
	height: 38px;
}
.main-contents .form-element .input-zipcode-2 {
	width: 84px;
	height: 38px;
}
.main-contents .form-element .btn-white {
	background: linear-gradient(white, #eeeeee);
}
.main-contents .form-element .radio-control input {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 5px;
}
.main-contents .form-element .radio-control label {
	font-size: 18px;
	line-height: 1;
	min-height: 20px;
	vertical-align: bottom;
}
.main-contents .form-element .ddl-controls-outer:after {
	content: "\f107";
	font-weight: bold;
	font-family: "Font Awesome 5 Free";
	position: absolute;
	right: 10%;
	top: 50%;
	transform: translateY(-50%);
	color: #337ab7;
	pointer-events: none;
}
.main-contents .form-element .ddl-controls-outer {
	position: relative;
}
	.main-contents .form-element .ddl-controls-outer .ddl-control {
		font-weight: bold;
		font-size: 16px;
		padding-right: 2em;
	}
.main-contents .form-element .link-color-pa:hover,
.main-contents .form-element .link-color-pa:focus {
	color: #23527c;
}
.main-contents .form-element .text-about-users {
	background: #ddf0ef;
	color: #64ccc9;
	font-weight: bold;
	text-align: center;
	padding: 5px;
}
.main-contents .btn-element .abtn-pa {
	background: linear-gradient(#8ad9d6, #64ccc9);
	color: #ffffff;
	padding-left: 15px;
	margin-top: 15px;
}
	.main-contents .btn-element .abtn-pa:hover,
	.main-contents .btn-element .abtn-pa:focus {
		background-color: #64ccc9;
		border-color: #64ccc9;
		color: #ffffff;
	}
	.main-contents .btn-element .abtn-pa:after {
		font-family: 'font awesome 5 free';
		font-weight: bold;
		content: "\f105";
		position: absolute;
		margin-left: 10px;
		font-size: 20px;
		line-height: normal;
	}
.main-contents .input-form-table .input-form-tr .required-square:after {
	background-size: contain;
	content: "必須";
	display: inline-block;
	text-align: center;
	position: relative;
	color: #fff;
	background-color: #d4000f;
	left: 0;
	top: -2px;
	margin-left: 5px;
	border-radius: 3px;
	height: 23px;
	width: 48px;
	font-size: 16px;
	line-height: 23px;
	background-image: none;
}
.main-contents .input-form-table .input-form-tr .text-outer {
	padding: 17px 0 17px 30px;
	margin: 0;
}
	.main-contents .input-form-table .input-form-tr .text-outer .form-control {
		border-radius: 3px;
		font-size: 20px;
		height: 50px;
		width: 95%;
	}
.main-contents .contact-wrapper ul {
	list-style: none;
}
.main-contents .contact-wrapper .required-square:after {
	background-size: contain;
	content: "必須";
	display: inline-block;
	text-align: center;
	position: relative;
	color: #fff;
	background-color: #d4000f;
	left: 0;
	top: -2px;
	margin-left: 5px;
	border-radius: 3px;
	height: 23px;
	width: 48px;
	font-size: 16px;
	line-height: 23px;
	background-image: none;
	font-weight:normal;
}
.main-contents .contact-wrapper .required-square-st:before {
	background-size: contain;
	content: "必須";
	display: inline-block;
	text-align: center;
	position: relative;
	color: #fff;
	background-color: #d4000f;
	left: 0;
	top: -2px;
	margin-left: 5px;
	border-radius: 3px;
	height: 23px;
	width: 48px;
	font-size: 16px;
	line-height: 23px;
	background-image: none;
	font-weight:normal;
}
.main-contents .contact-wrapper .wrapper-title {
	position: relative;
	text-align: center;
	line-height: 100%;
	color: #54585a;
	font-weight: 500;
	margin: 80px 0 50px;
	font-size: 40px;
	padding-bottom: 25px;
	border-bottom:none;
}
.main-contents .contact-wrapper .wrapper-title:after {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	content: '';
	background: #63ccc9;
	width: 110px;
	height: 1px;
}
.main-contents .contact-wrapper .contact-datail__title {
	position: relative !important;
	font-weight: bold !important;
	margin: 0px 0 50px;
	background-color: #64ccc9 !important;
	color: #fff !important;
	padding: 3% !important;
}
.main-contents .contact-wrapper .form-wrapper {
	font-size: 19px;
	margin-left: 0;
	width: 100%;
}
.main-contents .contact-wrapper p.caution {
	font-size:15px;
}
.main-contents .contact-wrapper span.caution {
	display:block;
	color:#f26178;
}
.main-contents .fs-clamp-16w992-23w1200 {
	font-size: clamp(1rem, -1.0865rem + 3.3654vw, 1.4375rem); /* fs16px(w992)～fs23px(w1200) */
}
.main-contents .fs-clamp-23w768-35w1200 {
	font-size: clamp(1.4375rem, 0.1042rem + 2.7778vw, 2.1875rem); /* fs23px(w768)～fs35px(w1200) */
}
.main-contents .fs-clamp-15w400-35w1200 {
	font-size: clamp(0.9375rem, 0.3125rem + 2.5vw, 2.1875rem); /* fs15px(w400)～fs35px(w1200) */
}
.main-contents .fs-clamp-14w400-23w1200 {
	font-size: clamp(0.875rem, 0.5938rem + 1.125vw, 1.4375rem); /* fs14px(w400)～fs23px(w1200) */
}
.main-contents .pa-members-wrapper .w75-center-content {
	margin: 30px auto 0;
	width: 75%
}
	.main-contents .pa-members-wrapper .w75-center-content .pa-benefits-ttl {
		color: #55c878;
		font-weight: bold;
		margin-bottom: 15px;
		text-align: center;
	}
	.main-contents .pa-members-wrapper .w75-center-content .line-idconnect-linkcontent {
		width: 65%;
		padding: 35px 0;
		margin: 0 auto;
	}
.main-contents .pa-members-wrapper .right-long:before {
	font-family: 'font awesome 5 free';
	font-weight: bold;
	content: "\f30b";
}
.main-contents .row-radio-controls {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin-left: 10%;
}
.main-contents .alert-danger {
	color: #a94442;
}
.main-contents .alert-danger-box {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
}
.main-contents .radio-control-credits {
	display: inline-block;
	position: relative;
	margin-right: 15px;
	padding-bottom: 10px;
}
.main-contents .radio-control-credits .lblCredits {
	font-size: 14px;
	cursor: pointer;
}
.main-contents .radio-control-credits .lblCredits:before {
	content: '';
	width: 70px;
	height: 35px;
	background-repeat: no-repeat;
	background-image: url('');
	background-size: contain;
	display: block;
	position: absolute;
	left: 20px;
	top: 15px;
	transform: translate(0, -50%);
}
	.main-contents .radio-control-credits .lblVisa {
		padding-left: 65px;
	}
		.main-contents .radio-control-credits .lblVisa:before {
			background-image: url(https://proactiv.jp/hubfs/mypage/images/order/visa.png);
		}
	.main-contents .radio-control-credits .lblMaster {
		padding-left: 43px;
	}
		.main-contents .radio-control-credits .lblMaster:before {
			background-image: url(https://proactiv.jp/hubfs/mypage/images/order/mastercard.png);
		}
	.main-contents .radio-control-credits .lblJcb {
		padding-left: 45px;
	}
		.main-contents .radio-control-credits .lblJcb:before {
			background-image: url(https://proactiv.jp/hubfs/mypage/images/order/jcb.png);
		}
	.main-contents .radio-control-credits .lblAmex {
		padding-left: 35px;
	}
		.main-contents .radio-control-credits .lblAmex:before {
			background-image: url(https://proactiv.jp/hubfs/mypage/images/order/amex.png);
		}
.main-contents .btn-element .btn-xmark-style:before {
	font-family: 'font awesome 5 free';
	font-weight: bold;
	content: "\f00d";
	line-height: 1;
	position: absolute;
	left: 13%;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
.main-contents .btn-element .btn-xmark-style .btn-cancel {
	padding-left: 40px;
}
.main-contents .skin-contact-info {
	display: flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}
	.main-contents .skin-contact-info .img-area {
		width: 150px;
	}