@charset "UTF-8";
/* CSS Document */

		html,
		body {
			padding: 0;
			margin: 0;
		}
		img {
			max-width: 100%;
			border: none;
		}
		ul,li {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		h1,h2,h3,h4,h5,p,a {
			margin: 0;
			padding: 0;
			line-height: 2;
			text-decoration: none;
			color: #000;
		}
		#lp_wrap {
			position: relative;
			font-family: "Hanken Grotesk", "Noto Sans JP", sans-serif;
			letter-spacing: 1px;
			line-height: 2;
			font-size: 12px;
			
		}
		.pcv {
			display: none;
		}
		@media only screen and (min-width: 769px)  {
			.pcv {
				display: block;
			}
			.spv {
				display: none
			}
		}
		
		
		#visual {
			position: relative;
			width: 100%;
			height: 700px;
			min-height: 100vh;
			overflow: hidden;
		}
		#visual .bg {
			background: url("https://www.dot-st.com/static/docs/c/pages/250821_er_outer/assets/img/all_top_sp.jpg") no-repeat center;
			background-size: cover;
			width: 100%;
			height: 100%;
			position: absolute;
			top:0;
			left: 0;
		}
		#visual .bg::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			/*/カミスン用0.5→本番は0.3/*/	
			background: rgba(0,0,0,0.5)
		}
		#visual h1 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 50%;
			line-height: 0;
		}
		#visual .logo {
			position: absolute;
			bottom: 24%;
			left: 50%;
			transform: translate(-50%,0%);
			width: 60%;
			line-height: 0;
		}
		@media only screen and (min-width: 769px)  {
			/*#visual {
				position: fixed;
				width: 50%;
				height: 700px;
				min-height: 100vh;
				overflow: hidden;
			}*/
			#visual .bg {
				background: url("https://www.dot-st.com/static/docs/c/pages/250821_er_outer/assets/img/all_top_pc.jpg") no-repeat top;
				background-size: cover;
				position: fixed;
				top:0;
				left: 0;
			}
			#visual h1 {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 25%;
				line-height: 0;
			}
			#visual .logo {
				position: absolute;
				bottom: 10%;
				left: 50%;
				transform: translate(-50%,0%);
				width:25%;
				line-height: 0;
			}
			#contents_wrap {
				position: relative;
				width: 50%;
				margin: 0 auto;
				background: #FFF;
				padding: 2% 0;
				border-radius: 50px 50px 0 0;
				box-sizing: border-box;
			}
			
		}
		#info h3 {
			text-align: center;
			font-size: 24px;
			letter-spacing: 2px;
			font-weight: 600;
			margin-bottom: 2%;
		}
		#info .copy {
			margin: 15% auto;
			width: 84%;
			max-width: 500px;
		}
		#info .copy h2 {
			text-align: center;
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 10%;
		}	
		#info .copy p {
			font-size: 12px;
		}
		#info .coupon {
			background: #e1d9cc;
			padding: 10% 0 15%;
			margin: 10% auto;
		}
		#info .coupon h4 {
			text-align: center;
			font-size: 16px;
		}
		#info .coupon .img {
			width: 80%;
			max-width: 400px;
			margin: 5% auto;
		}
		#info .coupon p {
			width: 80%;
			font-size: 12px;
			margin: 0 auto;
			text-align: center;
		}
		#info .howto {
			position: relative;
		}
		#info .howto li {
			position: relative;
			width: 90%;
			margin: 15% auto;
		}
		
		#info .howto li::before {
			content: "";
			position: absolute;
			bottom: 0;
			left: 3.8%;
			width: 96.2%;
			height: 1px;
			background: #000;
		}
		#info .howto .no {
			writing-mode: vertical-rl;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			z-index: 10
		}
		#info .howto .no span {
			background: #FFF;
			display: inline-block;
			z-index: 10;
			position: relative;
			padding-bottom: 5%;
		}
		#info .howto .no::before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: 1px;
			height: 100%;
			background: #000;
			transform: translate(-50%,0);
		}
		#info .howto h4 {
			font-size: 22px;
			font-weight: 600;
		}
		#info .howto p {
			font-size: 12px;
			font-weight: 600;
			margin: 2% 0

		}
		#info .howto p.small {
			font-size: 10px;
			font-weight: 400;
			margin: 2% 0

		}
		#info .howto .img {
			box-sizing: border-box;
			padding: 10% 0;
			width: 85%;
		}
		
		#info .howto .inner {
			width: 85%;
			margin-left: 15%;
		}
		@media only screen and (min-width: 769px)  {
			#info .howto li {
				width: 70%;
				margin: 15% auto;
			}
			#info .howto li::before {
				left: 3%;
				width: 97%;
			}
		}
		
		#brand h3 {
			text-align: center;
			font-size: 24px;
			letter-spacing: 2px;
			font-weight: 600;
			margin-bottom: 2%;
		}
		#brand .list {
			margin: 25% auto;
			
		}
		#brand .list ul {
			margin: 10% auto;
			
		}
		#brand .list ul li {
			position: relative;
		}
		#brand .list ul li a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 10
		}
		#brand .list ul li .img {
			line-height: 0;
		}
		#brand .list ul li .brand {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 80%;
			transform: translate(-50%,-50%);
			filter: invert(1)
		}
		#brand .list ul li .btn {
			position: absolute;
			top: 60%;
			left: 50%;
			width: 50%;
			transform: translate(-50%,0%);
			text-align: center;
			border: 1px solid #FFF;
			color: #FFF;
			background: rgba(0,0,0,0.5)
		}
		@media only screen and (min-width: 769px)  {
			#brand .list ul li .brand {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 50%;
				transform: translate(-50%,-50%);
				filter: invert(1)
			}
			#brand .list ul li .btn {
				position: absolute;
				top: 60%;
				left: 50%;
				width: 25%;
				transform: translate(-50%,0%);
				text-align: center;
				border: 1px solid #FFF;
				color: #FFF;
				background: rgba(0,0,0,0.5)
			}
			
		}
		

		
		#footer {
			margin: 25% auto;
			position: relative;
		}
		#footer h3 {
			text-align: center;
			font-size: 24px;
			letter-spacing: 2px;
			font-weight: 600;
			margin-bottom: 2%;
		}

		#footer .coupon {
			background: #e1d9cc;
			padding: 10% 0 15%;
			margin: 10% auto;
		}
		#footer .coupon h4 {
			text-align: center;
			font-size: 16px;
		}
		#footer .coupon .img {
			width: 80%;
			max-width: 400px;
			margin: 5% auto;
		}
		#footer .coupon p {
			width: 80%;
			font-size: 12px;
			margin: 0 auto;
			text-align: center;
		}
		#footer .txt {
			width: 90%;
			margin: 25% auto;
		}
		#footer .txt p {
			margin: 10px auto;
			font-size: 10px;
		}
		#footer .txt p span {
			font-weight: 600;
			display: block;
		}

		#footer .er {
			width: 50%;
			margin: 10% auto 5%;
		}
		#footer .copyright {
			font-size: 10px;
			text-align: center;
		}
		@media only screen and (min-width: 769px)  {
			#footer .txt {
				width: 70%;
				margin: 25% auto;
			}
			
		}
	#visual .bg {
		animation: 2.5s keyimg 0s forwards;
	}
		
			

	@keyframes keyimg {
		0% {
			opacity: 0;
			transform:scale(1.1)
		}
		100% {
			opacity: 1;
			transform: scale(1)
		}
	}