@charset "utf-8";

/*
アンドモアHOME／共通
*/
/*~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~*/

:root {
	--step: calc(min(100%, 1000px) / 3);
}

body {
	margin:0;
	min-height:100vh;
	display:flex;
	flex-direction:column;
}

#ad-ex-sp {
	background-image: linear-gradient(
		90deg,

		/* AD */
		rgb(var(--adcolor) / var(--adalpha)) 0,
		rgb(var(--adcolor) / var(--adalpha)) calc(100% / 3),

		/* EX */
		rgb(var(--excolor) / var(--exalpha)) calc(100% / 3),
		rgb(var(--excolor) / var(--exalpha)) calc(100% / 3 * 2),

		/* SP */
		rgb(var(--spcolor) / var(--spalpha)) calc(100% / 3 * 2),
		rgb(var(--spcolor) / var(--spalpha)) 100%
	);
	/*background-size: max(100%, 1000px) 100%;*/
	background-repeat: no-repeat;
}
#pr-my-lp {
	background: linear-gradient(
		90deg,
		/* PR */
		rgb(var(--prcolor) / var(--pralpha)) 0,
		rgb(var(--prcolor) / var(--pralpha)) var(--step),

		/* MY */
		rgb(var(--mycolor) / var(--myalpha)) var(--step),
		rgb(var(--mycolor) / var(--myalpha)) calc(var(--step) * 2),

		/* LP */
		rgb(var(--lpcolor) / var(--lpalpha)) calc(var(--step) * 2),
		rgb(var(--lpcolor) / var(--lpalpha)) calc(var(--step) * 3)
	);
	/*background-size: max(100%, 1000px) 100%;*/
	background-repeat: no-repeat;
}

main {
	flex:1;
	display:flex;
	flex-direction: column;
	justify-content:center;

	.logo svg {
		width: 100%;
		#base-1 path {
			/*fill: #fff;*/
		}
		#base-2 path {
			fill: #fff;
		}
		#and path {
			fill: rgba(255, 255, 255, 0.9);
		}
	}
	.head {
		#theme path {
			fill: #fff;
		}
		#andmore path {
			fill: rgba(255, 255, 255, 1);
		}
	}
	.demo {
		text-align: right;
		transform: translateY(-15px);

		a {
			width: auto;
			position: relative;
			display: inline-block;
			padding: 5px 10px;
			background: #000;
			font-size: 1.2rem;
			line-height: 1;
			text-align: center;
			color: #fff;

			&::before {
				content: "";
				position: absolute;
				bottom: calc(100% - 1px);
				left: 50%;
				transform: translateX(-50%);

				width: 0;
				height: 0;

				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
				border-bottom: 8px solid #000;

				transition: border-bottom-width 0.2s ease;
			}

			&:hover::before {
				border-bottom-width: 20px;
			}
		}
	}

	#followpage {
		div {
			display: flex;
			align-items: stretch;
			gap: 15px;
			dd {
				display: flex;
				width: calc((100% - 15px) / 2);
				padding: 5px;
				border-radius: 5px;
				background: rgba(255,255,255,0.7);
				font-size: 1.2rem;
				line-height: 130%;
				a {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					padding: 5px;
					background: rgb(var(--theme-color));
					border-radius: 5px;
					transition: background-color .5s ease;
					position: relative;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				a::after {
					content: "";
					position: absolute;
					right: 0;
					bottom: 0;
					width: 0;
					height: 0;
					border-left: 15px solid transparent;
					border-bottom: 20px solid #000;
				}

				a:hover {
					background-color: #000;
					color: rgb(var(--theme-color));
				}
			}
		}
	}
}

footer {
	width: 100%;
	background-color: #fff;
}

/*~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~/////////~*/

/*SP*/
@media screen and (max-width: 768px) {
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/

main {

	padding: 0 25px;

	.logo {
		padding-top: 0;
		padding-bottom: 0;
	}

	.head {
		padding-top: 5px;
	}

}

/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}

/*PC*/
@media screen and (min-width: 769px) {
/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/

:root {
	--main-width: max(70%, 1000px);
	--side-width: calc((100% - var(--main-width)) / 2);
	--main-step: calc(var(--main-width) / 3);
}
#ad-ex-sp {
	background-size: max(100%, 1000px) 100%;
}
#pr-my-lp {
	background-size: max(100%, 1000px) 100%;
}


main {
	.logo.wrap {
		padding: 0;
	}
	.logo.wrap,
	.head.wrap,
	.demo.wrap {
		width: calc(var(--step) * 1);
		min-width: 550px;
	}
	.demo {
		text-align: left;
		a {
			width: 135px;
			font-size: 1.4rem;
		}
	}
	#memlogin .wrap {
		width: calc(var(--step) * 1);
		min-width: 700px;
	}
	#login .login-body {
		margin-top: 0;
		.fmload {
			margin: 0 auto;
		}
	}
	#followpage {
		div {
			dd {
				width: calc((100% - 45px) / 4);
				font-size: 1.4rem;
			}
		}
	}
}

/*~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~*********~**********/
}