@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&display=swap&subset=japanese");
@font-face {
	font-family: "Corporate Logo";
	font-weight: 400;
	font-style: normal;
	src: url("../font/Corporate-Logo-Medium-ver2.woff") format("truetype");
}

@font-face {
	font-family: "Corporate Logo Bold";
	font-weight: 700;
	font-style: normal;
	src: url("../font/Corporate-Logo-Bold-ver2.woff") format("truetype");
}


/* ---------------------------------------
  基本情報
-----------------------------------------*/

html,
body {
	height: 100%;
}

html {
	font-size: 62.5%;
	overflow-y: scroll;
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
address,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
img,
form,
input,
button,
textarea,
select {
	margin: 0;
	padding: 0;
	border: none;
	line-height: 100%;
	list-style-type: none;
	font-style: normal;
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: left;
	color: #222222;
}

input,
button,
textarea,
select {
	background: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

textarea {
	resize: vertical;
}

select::-ms-expand {
	display: none;
}

button:hover {
	cursor: pointer;
}

img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

a {
	color: #000;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.fade {
	transition: opacity 0.3s ease;
}

.fade:hover,
a:hover {
	opacity: 0.7;
}

@media screen and (min-width: 769px) {
	a[href^="tel:"] {
		display: inline-block;
		pointer-events: none;
	}
}


/* responsive
--------------------------------*/

@media screen and (min-width: 769px) {
	.sp {
		display: none !important;
	}
}

@media screen and (max-width: 768px) {
	.pc {
		display: none !important;
	}
}


/* base
--------------------------------*/

body {
	color: #000;
	font-size: 1.0rem;
	text-align: left;
	word-wrap: break-word;
	min-width: 1100px;
}

body.fixed {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

main {
	display: block;
	overflow: hidden;
	padding-top: 80px;
}

section {
	position: relative;
}

.wrap {
	width: 980px;
	margin: 0 auto;
	position: relative;
}

p,
dt,
dd,
li,
th,
td,
input,
button,
textarea,
select {
	font-size: 1.4rem;
	line-height: 1.714;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.left {
	float: left;
}

.right {
	float: right;
}

.tal {
	text-align: left;
}

.tar {
	text-align: right;
}

.tac {
	text-align: center;
}

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

.bold {
	font-weight: bold;
}

@media screen and (max-width: 768px) {
	body {
		min-width: inherit;
	}
	main {
		padding-top: 54px;
	}
	.wrap {
		width: 90%;
	}
	p,
	dt,
	dd,
	li,
	th,
	td,
	input,
	button,
	textarea,
	select {
		font-size: 4vw;
		line-height: 1.666;
	}
	.sp_block {
		display: block;
	}
	.sp_block>* {
		width: 100%;
	}
}


/* ------------------------------
    header
------------------------------ */

header {
	width: 100%;
	background-color: #fff;
	height: 80px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

header .wrap {
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header .logo {
	width: 180px;
}

header .logo a:hover {
	opacity: .7;
}

header nav .gnavi {
	display: flex;
	align-items: center;
}

header nav .gnavi>li+li {
	margin-left: 45px;
}

header nav .gnavi>li>a {
	display: block;
	font-weight: 400;
	font-size: 1.6rem;
	letter-spacing: 0.05em;
	line-height: 1;
	position: relative;
}

@media screen and (min-width: 769px) {
	header nav .gnavi>li>a:hover {
		opacity: 1;
		color: #3aa2e1;
	}
}

@media screen and (max-width: 768px) {
	header {
		height: 54px;
	}
	header .wrap {
		padding-bottom: 0;
	}
	header .logo {
		width: 135px;
	}
	header .menu-trigger {
		display: block;
		position: fixed;
		top: 10px;
		right: 5%;
		width: 35px;
		height: 35px;
		z-index: 999;
		background-color: #00a0e9;
		border-radius: 50%;
		text-align: center;
	}
	header .menu-trigger span {
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 20px;
		height: 2px;
		background-color: #fff;
	}
	header .menu-trigger span:nth-of-type(1) {
		top: 11px;
	}
	header .menu-trigger span:nth-of-type(2) {
		top: 17px;
	}
	header .menu-trigger span:nth-of-type(3) {
		top: 23px;
	}
	header.navOpen .menu-trigger span:nth-of-type(1) {
		top: 17px;
		transform: rotate(-45deg);
	}
	header.navOpen .menu-trigger span:nth-of-type(2) {
		opacity: 0;
	}
	header.navOpen .menu-trigger span:nth-of-type(3) {
		top: 17px;
		transform: rotate(45deg);
	}
	header nav {
		display: none;
		position: fixed;
		top: 54px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		text-align: center;
		overflow-y: scroll;
		width: 100%;
		max-height: 100%;
		background-color: #00a0e9;
		padding: 8% 5%;
		-webkit-overflow-scrolling: touch;
	}
	header nav .gnavi {
		flex-wrap: wrap;
	}
	header nav .gnavi>li {
		width: 47%;
	}
	header nav .gnavi>li+li {
		margin-left: 0;
	}
	header nav .gnavi>li:nth-child(even) {
		margin-left: 6%;
	}
	header nav .gnavi>li:nth-child(n+3) {
		margin-top: 5.33vw;
	}
	header nav .gnavi>li>a {
		color: #00a0e9;
		font-weight: 500;
		font-size: 4.8vw;
		padding: 3.6vw 5vw;
		background-color: #fff;
		border-radius: 1.33vw;
	}
	/*estimate*/
	header nav .estimate {
		margin-top: 5.33vw;
	}
	header nav .estimate a {
		background-color: #e4007f;
		font-weight: 500;
		font-size: 4.8vw;
		padding: .658em 16vw .658em 6.4vw;
	}
	header nav .estimate a::before {
		width: 5.33vw;
		height: 5.33vw;
		right: 4.8vw;
	}
}


/* ------------------------------
    footer
------------------------------ */

footer {
	background: #222;
}

footer * {
	color: #fff;
	letter-spacing: 0.025em;
}

footer .wrap {
	display: flex;
	justify-content: space-between;
	padding: 36px 0 40px;
}

footer .f_left .logo {
	width: 221px;
}
footer .f_left .logo img{
	width: 100%;
}
footer .f_left>p {
	font-weight: 500;
	font-size: 1.8rem;
	line-height: 1.2;
	margin: 1em 0;
}

footer .f_left .address {
	margin-bottom: 20px;
}

footer .f_left .address * {
	line-height: 1.3;
}

footer .f_left .address dl {
	display: flex;
	justify-content: flex-start;
	margin-top: 6px;
}

footer .f_left .address dl dt {
	width: 5.5em;
}

footer .f_left .tel a {
	display: flex;
	width: 300px;
	font-weight: 500;
	font-size: 2.8rem;
	letter-spacing: 0.05em;
	padding: 16px 19px;
	border: 1px solid #fff;
}

footer .f_left .tel a span {
	margin-left: 21px;
}

footer .f_left .tel a span::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 24px;
	background: #fff;
	align-self: center;
	margin-right: 21px;
}

footer .f_left .tel a::before {
	content: "";
	width: 29px;
	height: 21px;
	background: url(../img/common/ico_freedial_white.svg) center center/contain no-repeat;
	align-self: center;
}

footer .f_right .menuwrap {
	display: flex;
	margin-bottom: 60px;
}

footer .f_right dl {
	width: 160px;
}

footer .f_right dl+dl {
	margin-left: 40px;
}

footer .f_right dl dt {
	font-weight: 500;
	font-size: 1.8rem;
	line-height: 1;
	padding-bottom: 14px;
	border-bottom: 2px solid #fff;
	margin-bottom: 12px;
}

footer .f_right dl dd {
	font-weight: 300;
}

footer .f_right dl dd a {
	display: block;
	line-height: 2;
	position: relative;
}

footer .f_right dl dd a::before {
	content: "・";
}

footer .f_right .copyright {
	font-size: 1.2rem;
	text-align: right;
}

@media screen and (max-width: 768px) {
	footer .wrap {
		display: block;
		padding: 11vw 0;
	}
	footer .f_left .logo {
		width: 59.2vw;
	}
	footer .f_left .logo a img {
		width: 100%;
	}
	footer .f_left>p {
		font-size: 4.8vw;
		margin: 1em 0;
	}
	footer .f_left .address {
		margin-bottom: 5vw;
	}
	footer .f_left .address * {
		font-size: 3.73vw;
	}
	footer .f_left .address dl {
		margin-top: 1.8vw;
	}
	footer .f_left .tel a {
		width: 100%;
		font-size: 7.47vw;
		padding: 4.26vw 5.07vw;
	}
	footer .f_left .tel a span {
		margin-left: 5.47vw;
	}
	footer .f_left .tel a span::before {
		height: 6.4vw;
		margin-right: 10.93vw;
	}
	footer .f_left .tel a::before {
		width: 7.73vw;
		height: 5.6vw;
	}
	footer .f_right .menuwrap {
		display: block;
		margin-bottom: 13vw;
	}
	footer .f_right dl {
		width: 100%;
		margin-top: 11vw;
	}
	footer .f_right dl+dl {
		margin-left: 0;
	}
	footer .f_right dl dt {
		font-size: 4.8vw;
		padding-bottom: 3.73vw;
		border-bottom: 2px solid #fff;
		margin-bottom: 3.2vw;
	}
	footer .f_right dl dd {
		font-size: 3.73vw;
	}
	footer .f_right dl dd+dd {
		margin-top: .5em;
	}
	footer .f_right .copyright {
		font-size: 2.93vw;
	}
}


/* ------------------------------
    common
------------------------------ */


/* font
--------------------------------*/

.blue {
	color: #3aa2e1!important;
}

.green {
	color: #14a83b!important;
}

.green3 {
	color: #6ab400!important;
}

.purple {
	color: #be01da!important;
}

.pink {
	color: #e4007f!important;
}


/* bg
--------------------------------*/

.bg_blue {
	background-color: #3aa2e1;
}

.bg_green {
	background-color: #14a83b;
}

.bg_green2 {
	background-color: #43c155;
}

.bg_purple {
	background-color: #be01da;
}

.bg_pink {
	background-color: #e4007f;
}

.bg_stripe {
	background-image: url(../img/common/bg_stripe.png)
}

@media screen and (max-width: 768px) {
	.bg_stripe {
		background-size: 1.6vw auto;
	}
}


/* pagettl
--------------------------------*/

#pagettl {
	width: 100%;
	height: 250px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(../img/common/pagettl_bg_pc.jpg);
}

#pagettl .ttl {
	font-family: "Corporate Logo Bold", sans-serif;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 12px;
}

#pagettl .ttl span {
	position: relative;
	display: block;
}

#pagettl .ttl .block {
	display: block;
}

#pagettl .ttl.blue .front {
	fill: #3aa2e1;
}

#pagettl .ttl.pink .front {
	fill: #e4007f;
}

#pagettl .ttl svg {
	height: auto;
	display: inline-block;
	z-index: 10;
	overflow: visible;
	position: relative;
}

#pagettl .ttl svg .bg-2 {
	stroke-width: 16;
	stroke-linejoin: round;
}

#pagettl .ttl.blue svg .bg-2 {
	stroke: #3aa2e1;
}

#pagettl .ttl.pink svg .bg-2 {
	stroke: #e4007f;
}

#pagettl .ttl svg .bg-1 {
	stroke: #fff;
	stroke-width: 10;
	stroke-linejoin: round;
}

#pagettl .ttl text {
	font-size: 8.2rem;
}

@media screen and (max-width: 768px) {
	#pagettl {
		height: 33.33vw;
		background-image: url(../img/common/pagettl_bg_sp.jpg);
	}
	#pagettl .ttl {
		margin-bottom: .8vw;
	}
	#pagettl .ttl svg {
		/*		height: 11.87vw;*/
	}
}


/* breadcrumb
--------------------------------*/

#breadcrumb {
	margin-top: 15px;
}

#breadcrumb ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

#breadcrumb ul li {
	font-size: 1.5rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
	position: relative;
}

#breadcrumb ul li+li::before {
	content: ">";
	margin: 0 .5em;
}

#breadcrumb ul li a {
	color: #3aa2e1;
}

@media screen and (max-width: 768px) {
	#breadcrumb {
		display: none;
	}
}


/* secttl
--------------------------------*/

.secttl {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding-bottom: 35px;
	margin: 60px 0 80px;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	z-index: 1;
}

.secttl.medium,
.secttl .medium {
	font-weight: 500;
}

.secttl span {
	position: relative;
}

.secttl .block {
	display: block;
}

.secttl svg {
	display: inline-block;
	height: auto;
	z-index: 10;
	overflow: visible;
	position: relative;
}

.secttl svg .bg-2 {
	stroke: #fff;
	stroke-width: 22;
	stroke-linejoin: round;
}

.secttl svg .bg-1 {
	stroke: #222;
	stroke-width: 12;
	stroke-linejoin: round;
}

.secttl svg .front {
	fill: #fff;
}

.secttl text {
	font-size: 4.6rem;
}

.secttl .strong text {
	font-size: 7.5rem;
}

.secttl .strong .front {
	fill: #fff600;
}

.secttl .strong.strong-white .front {
	fill: #ffffff;
}

.secttl .strong::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -5px;
	height: 41px;
	left: -5px;
	z-index: -1;
	background-image: url(../img/common/secttl_strong.png);
	background-position: center center;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.secttl .strong.strong-green::after {
	background-image: url(../img/common/secttl_strong_green.png);
}

.secttl .strong.strong-white::after {
	content: none;
}
/*

.secttl::after {
	content: "";
	display: block;
	width: 145px;
	height: 5px;
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background: -webkit-gradient(linear, left top, right top, from(#fff600), color-stop(17%, #fff600), color-stop(17%, transparent), color-stop(20%, transparent), color-stop(20%, #fff600), color-stop(37%, #fff600), color-stop(37%, transparent), color-stop(40%, transparent), color-stop(40%, #fff600), color-stop(57%, #fff600), color-stop(57%, transparent), color-stop(60%, transparent), color-stop(60%, #fff600), color-stop(77%, #fff600), color-stop(77%, transparent), color-stop(80%, transparent), color-stop(80%, #fff600), to(#fff600));
	background: linear-gradient(90deg, #fff600 0%, #fff600 17%, transparent 17%, transparent 20%, #fff600 20%, #fff600 37%, transparent 37%, transparent 40%, #fff600 40%, #fff600 57%, transparent 57%, transparent 60%, #fff600 60%, #fff600 77%, transparent 77%, transparent 80%, #fff600 80%, #fff600);
}

.secttl.colored::after {
	background: -webkit-gradient(linear, left top, right top, from(#3aa2e1), color-stop(17%, #3aa2e1), color-stop(17%, transparent), color-stop(20%, transparent), color-stop(20%, #14a83b), color-stop(37%, #14a83b), color-stop(37%, transparent), color-stop(40%, transparent), color-stop(40%, #f39800), color-stop(57%, #f39800), color-stop(57%, transparent), color-stop(60%, transparent), color-stop(60%, #e60012), color-stop(77%, #e60012), color-stop(77%, transparent), color-stop(80%, transparent), color-stop(80%, #922e8e), to(#922e8e));
	background: linear-gradient(90deg, #3aa2e1 0%, #3aa2e1 17%, transparent 17%, transparent 20%, #14a83b 20%, #14a83b 37%, transparent 37%, transparent 40%, #f39800 40%, #f39800 57%, transparent 57%, transparent 60%, #e60012 60%, #e60012 77%, transparent 77%, transparent 80%, #922e8e 80%, #922e8e);
}
*/

.secttl::after {
	content: "";
	display: block;
	width: 145px;
	height: 5px;
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background: -webkit-gradient(linear, left top, right top, from(#fff600), color-stop(17.6%, #fff600), color-stop(17.6%, transparent), color-stop(20.6%, transparent), color-stop(20.6%, #fff600), color-stop(38.2%, #fff600), color-stop(38.2%, transparent), color-stop(41.2%, transparent), color-stop(41.2%, #fff600), color-stop(58.8%, #fff600), color-stop(58.8%, transparent), color-stop(61.8%, transparent), color-stop(61.8%, #fff600), color-stop(79.4%, #fff600), color-stop(79.4%, transparent), color-stop(82.4%, transparent), color-stop(82.4%, #fff600), to(#fff600));
	background: linear-gradient(90deg, #fff600 0%, #fff600 17.6%, transparent 17.6%, transparent 20.6%, #fff600 20.6%, #fff600 38.2%, transparent 38.2%, transparent 41.2%, #fff600 41.2%, #fff600 58.8%, transparent 58.8%, transparent 61.8%, #fff600 61.8%, #fff600 79.4%, transparent 79.4%, transparent 82.4%, #fff600 82.4%, #fff600);
}

.secttl.colored::after {
	background: -webkit-gradient(linear, left top, right top, from(#3aa2e1), color-stop(17.6%, #3aa2e1), color-stop(17.6%, transparent), color-stop(20.6%, transparent), color-stop(20.6%, #14a83b), color-stop(38.2%, #14a83b), color-stop(38.2%, transparent), color-stop(41.2%, transparent), color-stop(41.2%, #f39800), color-stop(58.8%, #f39800), color-stop(58.8%, transparent), color-stop(61.8%, transparent), color-stop(61.8%, #e60012), color-stop(79.4%, #e60012), color-stop(79.4%, transparent), color-stop(82.4%, transparent), color-stop(82.4%, #922e8e), to(#922e8e));
	background: linear-gradient(90deg, #3aa2e1 0%, #3aa2e1 17.6%, transparent 17.6%, transparent 20.6%, #14a83b 20.6%, #14a83b 38.2%, transparent 38.2%, transparent 41.2%, #f39800 41.2%, #f39800 58.8%, transparent 58.8%, transparent 61.8%, #e60012 61.8%, #e60012 79.4%, transparent 79.4%, transparent 82.4%, #922e8e 82.4%, #922e8e);
}

@media screen and (max-width: 768px) {
	.secttl {
		line-height: 1.3;
		padding-bottom: 5vw;
		margin: 13vw 0 11vw;
	}
	.secttl .strong::after {
		bottom: 0;
		height: 5.4666666667vw;
		left: -1vw;
	}
	.secttl::after {
		width: 24.2666666667vw;
		height: .8vw;
	}
}


/* estimateBtn
--------------------------------*/

#estimateBtn p {
	background: #e4007f;
	color: #fff;
	font-weight: 700;
	font-size: 1.6rem;
	border-top-left-radius: 10px;
	padding: 13px 0;
	text-align: center;
}

#estimateBtn .simulation a {
	border-bottom-left-radius: 10px;
	color: #fff;
	font-weight: 500;
	font-size: 2.2rem;
	line-height: 1.2;
	letter-spacing: 0.05em;
	width: 80px;
	height: 282px;
	padding: 12px 0 0;
	display: flex;
	align-items: center;
	text-shadow: 0px 0px 3px rgb(0 0 0 / 20%);
	position: relative;
	background: -webkit-gradient(linear, left top, left bottom, from(#3aa2e1), color-stop(20%, #3aa2e1), color-stop(40%, #14a83b), color-stop(60%, #f39800), color-stop(80%, #e4007f), to(#922e8e));
	background: linear-gradient(to bottom, #3aa2e1, #3aa2e1 20%, #14a83b 40%, #f39800 60%, #e4007f 80%, #922e8e);
	transition: background .3s ease;
}

#estimateBtn .simulation a::before,
#estimateBtn .simulation a::after {
	content: "";
	display: block;
	position: absolute;
	transition: .3s ease;
}

#estimateBtn .simulation a::before {
	width: 54px;
	height: 65px;
	right: 8px;
	bottom: 10px;
	background: url(../img/common/estimate_illust.svg) center center/contain no-repeat;
}

@media screen and (min-width: 769px) {
	#estimateBtn {
		opacity: 0;
		-webkit-transform: translate(100px, 0);
		transform: translate(100px, 0);
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
		position: fixed;
		width: 80px;
		right: 0;
		top: 87px;
		z-index: 20;
	}
	#estimateBtn a {
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		-webkit-box-align: center;
	}
	#estimateBtn.fixed {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	#estimateBtn .simulation a::after {
		width: 59px;
		height: 76px;
		right: 4px;
		bottom: 3px;
		background: url(../img/common/estimate_illust_on.png) center center/contain no-repeat;
		opacity: 0;
	}
	#estimateBtn .simulation a:hover {
		opacity: 1;
		background: none;
		background-color: #00a0e9;
		background: -webkit-gradient(linear, left top, left bottom, from(#00a0e9), to(#00a0e9));
		background: linear-gradient(to bottom, #00a0e9, #00a0e9);
	}
	#estimateBtn .simulation a:hover::before{
		opacity: 0;
	}
	#estimateBtn .simulation a:hover::after{
		opacity: 1;
	}
}

@media screen and (max-width: 768px) {
	#estimateBtn p {
		border-radius: 0;
		font-size: 5.07vw;
		padding: 1.115vw 0;
	}
	#estimateBtn .simulation a::before {
		width: 14.67vw;
		height: 15.07vw;
		left: 5.33vw;
		bottom: 4vw;
		transform: none;
	}
	#estimateBtn .simulation a {
		border-radius: 0;
		display: block;
		font-size: 6.133vw;
		line-height: 1.2;
		width: 100%;
		height: auto;
		padding: 0.75em 5.33vw 0.75em 24vw;
		background: -webkit-gradient(linear, left top, right top, from(#3aa2e1), color-stop(20%, #3aa2e1), color-stop(40%, #14a83b), color-stop(60%, #f39800), color-stop(80%, #e4007f), to(#922e8e));
		background: linear-gradient(to right, #3aa2e1, #3aa2e1 20%, #14a83b 40%, #f39800 60%, #e4007f 80%, #922e8e);
	}
	#estimateBtn .simulation a::after {
		width: 10.13vw;
		height: 10.13vw;
		background: url(../img/common/btn_arrow.svg) center center/contain no-repeat;
		right: 5.33vw;
		top: 50%;
		transform: translateY(-50%);
	}
}


/* btn
--------------------------------*/

.btn {
	position: relative;
	width: 700px;
}

.btn.s {
	width: 435px;
}

.btn.ss {
	width: 255px;
}

.btn::before {
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 40px;
	background-color: rgba(144, 4, 15, 1);
	mix-blend-mode: multiply;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	transform: translate(4px, 4px);
	transition: .3s ease;
}

.btn.s::before {
	content: "";
	width: 100%;
	height: 100%;
	border-radius: 40px;
	background-color: rgba(145, 145, 145, 1);
	mix-blend-mode: multiply;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	transform: translate(4px, 4px);
}

.btn.orange::before {
	background-color: rgba(176, 74, 0, 1);
}

.btn.ss::before {
	transform: translate(3px, 3px);
}

.btn a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	background-color: #e60012;
	color: #fff;
	font-weight: 700;
	font-size: 2.8rem;
	line-height: 1;
	letter-spacing: 0.05em;
	border-radius: 40px;
	padding: 0 75px 0 25px;
	transition: .3s ease;
}

.btn.s a {
	background-color: #fff;
}

.btn.ss a {
	height: 55px;
	font-size: 1.8rem;
}

.btn.orange a {
	background-color: #ef6500;
}

.btn a::before {
	content: "";
	width: 35px;
	height: 35px;
	border-radius: 100%;
	position: absolute;
	right: 45px;
	top: 50%;
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-image: url(../img/common/ico_btn_white.png);
	transition: .3s ease;
}

.btn a.purple::before {
	background-image: url(../img/common/ico_btn_purple.png);
}

.btn a.pink::before {
	background-image: url(../img/common/ico_btn_pink.png);
}

.btn a.green::before {
	background-image: url(../img/common/ico_btn_green2.png);
}

.btn.ss a::before {
	width: 22px;
	height: 22px;
	right: 25px;
}

.btn.s a:hover {
	background-color: #fff600;
}

.btn a:hover{
	opacity: 1;
}

@media screen and (min-width: 769px) {
	.ie .btn.s::before {
		background-color: rgba(0, 0, 0, .4);
	}
}

@media screen and (max-width: 768px) {
	.btn {
		width: 100%;
		max-width: 90vw;
	}
	.btn.s {
		width: 100%;
	}
	.btn.ss {
		width: 100%;
	}
	.btn::before {
		height: 100%;
		border-radius: 100vh;
		transform: translate(.53vw, .53vw);
	}
	.btn.s::before {
		border-radius: 8.67vw;
		transform: translate(.53vw, .53vw);
	}
	.btn.orange::before {
		background-color: rgba(176, 74, 0, 1);
	}
	.btn.ss::before {
		transform: translate(.4vw, .4vw);
	}
	.btn a {
		height: auto;
		min-height: 17.33vw;
		font-size: 6.13vw;
		line-height: 1.3;
		letter-spacing: 0;
		border-radius: 100vh;
		padding: .658em 20vw .658em 9.87vw;
	}
	.btn.ss a {
		min-height: inherit;
		height: 14.67vw;
		font-size: 4.8vw;
		padding: 0 16vw 0 3vw;
	}
	.btn a::before {
		width: 9.33vw;
		height: 9.33vw;
		right: 7.2vw;
	}
	.btn.ss a::before {
		width: 6vw;
		height: 6vw;
		right: 7.93vw;
	}
}


/* ------------------------------
    clearfix
------------------------------ */

.cf:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

.cf {
	display: inline-block;
}


/* Hides from IE Mac */

* html .cf {
	height: 1%;
}

.cf {
	display: block;
}


/* End Hack */