@charset "UTF-8";
/*
	BASE
*******************************/

/*
font-family: 'Noto Sans JP', sans-serif;
font-family: "Montserrat", sans-serif;
*/
* {
	font-family: "Lato", "M PLUS 1p", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo,'Hiragino Kaku Gothic Pro',Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
	margin: 0;
	padding: 0;
	box-sizing:border-box;
	font-feature-settings: "palt";
	line-height:1;
}

html {
	font-size:62.5%;
	line-height:1;
	body {
		font-size:1.6rem;
		img {
			-webkit-backface-visibility: hidden;
			vertical-align:bottom;
			line-height:0;
			max-width: 100%;
			height: auto;
		}
		p,th,td,dt,dd,li,h1,h2,h3,h4,h5,h6,label {
			color:#000000;
		}
		a {
			color:#000000;
			text-decoration:none;
			outline:none;
			border:none;
			img {
				outline:none;
				border:none;
				-webkit-backface-visibility: hidden;
			}
		}
		area {
			border:none;
			outline:none;
		}
		.clear { clear:both;}
	} 
}

:root {
	--color_def: #000000;
	--color_main: #e31837;
	--color_sub: #FF7600;
	--color_sub2: #EFEFEF;
	--color_sub3: #DDE9FF;
	--color_sub4: #00A9E4;
	--color_sub5: #CF152D;
	--color_sub6: #ff9900;
	--vw10: 2.56vw;
	--vw11: 2.82vw;
	--vw12: 3.08vw;
	--vw13: 3.33vw;
	--vw14: 3.59vw;
	--vw15: 3.85vw;
	--vw16: 4.1vw;
	--vw17: 4.36vw;
	--vw18: 4.62vw;
	--vw19: 4.87vw;
	--vw20: 5.13vw;
	--vw21: 5.38vw;
	--vw22: 5.64vw;
	--vw23: 5.9vw;
	--vw24: 6.15vw;
	--vw25: 6.41vw;
	--vw26: 6.67vw;
	--vw27: 6.92vw;
	--vw28: 7.18vw;
	--vw29: 7.44vw;
	--vw30: 7.69vw;
	--vw31: 7.95vw;
	--vw32: 8.21vw;
	--vw33: 8.46vw;
	--vw34: 8.72vw;
	--vw35: 8.97vw;
	--vw36: 9.23vw;
	--vw37: 9.49vw;
	--vw38: 9.74vw;
	--vw39: 10vw;
	--vw40: 10.26vw;
	--vw41: 10.51vw;
	--vw42: 10.77vw;
	--vw43: 11.03vw;
	--vw44: 11.28vw;
	--vw45: 11.54vw;
	--vw46: 11.79vw;
	--vw47: 12.05vw;
	--vw48: 12.31vw;
	--vw49: 12.56vw;
	--vw50: 12.82vw;
	--vw51: 13.08vw;
	--vw52: 13.33vw;
	--vw53: 13.59vw;
	--vw54: 13.85vw;
	--vw55: 14.1vw;
	--vw56: 14.36vw;
	--vw57: 14.62vw;
	--vw58: 14.87vw;
	--vw59: 15.13vw;
	--vw60: 15.38vw;
	--vw61: 15.64vw;
	--vw62: 15.9vw;
	--vw63: 16.15vw;
	--vw64: 16.41vw;
	--vw65: 16.67vw;
	--vw66: 16.92vw;
	--vw67: 17.18vw;
	--vw68: 17.44vw;
	--vw69: 17.69vw;
	--vw70: 17.95vw;
	--vw80: 20.51vw;
	--vw90: 23.08vw;
	--vw100: 25.64vw;
	--vw110: 28.21vw;
	--vw120: 30.77vw;
}

/*//////////////////////////////////////////////////////////////////////////*/

/*
	BASE LAYOUT
******************/

#main {
	overflow:clip;
}

.wrap {
	.contents {
		max-width:1200px;
		width: calc(100% - 60px);
		margin:0 auto;
		p {
			font-size: 1.6rem;
			line-height: 2;
		}
		.btnwrap {
			&.btncenter {
				text-align:center;
			}
		}
	}
}

.btn {
	display:inline-grid;
	position:relative;
	grid-column-gap:1em;
	align-items:center;
	justify-content:center;
	font-size:1.8rem;
	font-weight:500;
	background-color:var(--color_main);
	color:#FFFFFF;
	height:3em;
	padding:0 2.5em 0 2em;
	border-radius:1.5em;
	&::before {
		content:'';
		display:block;
		width:calc(100% + 6px);
		height:calc(100% + 6px);
		border:2px solid var(--color_main);
		border-radius:2em;
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		z-index:0;
		pointer-events:none;
	}
	&::after {
		content:'';
		width:.8em;
		height:.8em;
		position:absolute;
		top:50%;
		right:1em;
		transform:translateY(-50%);
		background:url(../assets/img/common/icon-arrow-right-w.svg) no-repeat center center/contain;
	}
	&.orange {
		background-color:var(--color_sub);
		&::before {
			border-color:var(--color_sub);
		}
	}
	&.yellow {
		background-color:var(--color_sub6);
		&::before {
			border-color:var(--color_sub6);
		}
	}
	&.red {
		background-color:var(--color_sub5);
		&::before {
			border-color:var(--color_sub5);
		}
	}
	&.white {
		background-color:#FFFFFF;
		color:var(--color_main);
		&::before {
			border-color:#FFFFFF;
		}
		&::after {
			background:url(../assets/img/common/icon-arrow-right.svg) no-repeat center center/contain;
		}
	}
	&[target="_blank"] {
		&::after {
			background:url(../assets/img/common/icon-ex-w.svg) no-repeat center center/contain;
		}	
	}
}

.pum-content {
	.download {
		dt {
			text-align:center;
		}
		dd {
			margin-top:10px;
			position:relative;
			.wpcf7-submit {
				border:none;
				display:block;
				background-color:#ff9900;
				color:#FFFFFF;
				font-weight:600;
				border-radius:6px;
				width:80%;
				margin:0 auto;
			}
			.wpcf7-spinner {
				position:absolute;
				margin:0;
				left:50%;
				bottom:-20px;
				width:15px;
				height:15px;
				transform:translateX(-50%);
				&::before {
					top:0;
					left:0;
				}
			}
		}
		input {
			max-width:100%;
			padding:.5em;
			border:2px solid #cccccc;
		}
		select {
			max-width:100%;
			padding:.5em;
			border:2px solid #cccccc;
		}
	}
	.btnwrap {
		p {
			text-align:center;
			a {
				display:block;
				background-color:#ff9900;
				color:#FFFFFF;
				font-weight:600;
				border-radius:6px;
				width:80%;
				margin:10px auto 0;
				padding:.5em 0;
			}
		}
	}
	#mailpoet_form_1 {
		h2 {
			&.mailpoet-heading {
				color:var(--color_main)!important;
				font-size:1.8rem!important;
			}
		}
		.mailpoet_form {
			padding:0;
		}
		&:has(.mailpoet_form_successfully_send) {
			display:none;
		}
	}
	.btnwrap {
		display:none;
	}
	&:has(.mailpoet_form_successfully_send) {
		.btnwrap {
			display:block;
		}
	}
}

#popmake-8612,#popmake-8614 {
	.pum-close {
		width:36px;
		height:36px;
		display:grid;
		align-items:center;
		justify-content:center;
		line-height:1;
		font-size:24px;
	}
}

@media ( hover:hover) {

	a {
		transition: .3s;
		&:hover {
			text-decoration: none;
			opacity: .75;
		}
	}
	
}



@media screen and (max-width:1024px){

	.wrap {
		.contents {
			width: calc(100% - 50px);
		}
	}
	
	.btn {
		font-size:1.6rem;
	}
	
}

@media screen and (max-width:768px){

	.wrap {
		.contents {
			width: calc(100% - 40px);
			p {
				font-size: 1.4rem;
				line-height: 1.66;
			}
		}
	}
	
	.btn {
		font-size:1.4rem;
		height:2.6em;
		&::before {
			width:calc(100% + 4px);
			height:calc(100% + 4px);
		}
	}

	#wpfront-scroll-top-container {
		bottom:60px!important;
	}

}


@media screen and (max-width:768px) {
    .pcOnly {
    	display:none !important;
    }
    .tbOnly {
    	display:none !important;
    }
}
@media screen and (min-width:1024px) {
    .tbOnly {
    	display:none !important;
    }
    .sptbOnly {
    	display:none !important;
    }
}
@media screen and (min-width:769px) {
    .spOnly {
    	display:none !important;
    }
}

.grecaptcha-badge { visibility: hidden; }




/**animation**/
.animation {
	opacity: 0;
	transition-duration: 2s;
	transition-timing-function:cubic-bezier(0.190, 1.000, 0.220, 1.000);
	&.fade-left {
		transform: translateX(-50px);
	}
	&.fade-right {
		transform: translateX(50px);
	}
	&.fade-up {
		transform: translateY(50px);
	}
	/* .fade-in {

	} */
	&.delay-1 {
		transition-delay: .2s;
	}
	&.delay-2 {
		transition-delay: .4s;
	}
	&.delay-0 {
		transition-delay: .6s;
	}
	&.delay-3 {
		transition-delay: .8s;
	}
	&:hover {
		&.delay-1 {
			transition-delay: 0s;
		}
		&.delay-2 {
			transition-delay: 0s;
		}
		&.delay-0 {
			transition-delay: 0s;
		}
		&.delay-3 {
			transition-delay: 0s;
		}
	}
}
.animation {
	&.show {
		opacity: 1;
		&.fade-left {
			transform: translate(0,0);
		}
		&.fade-right {
			transform: translate(0,0);
		}
		&.fade-up {
			transform: translate(0,0);
		}
		/* .fade-in {

		} */
		& > .fade-left {
			opacity: 1;
			transform: translate(0,0);
		}
		& > .fade-right {
			opacity: 1;
			transform: translate(0,0);
		}
		& > .fade-up {
			opacity: 1;
			transform: translate(0,0);
		}
	}
}


@media screen and (max-width:768px) {
	
	.animation {
		opacity: 0;
		transition-duration: 2s;
		transition-timing-function:cubic-bezier(0.190, 1.000, 0.220, 1.000);
		&.fade-left {
			transform: translateX(-50px);
		}
		&.fade-right {
			transform: translateX(50px);
		}
		&.fade-up {
			transform: translateY(50px);
		}
		/* .fade-in {

		} */
		&.delay-1 {
			transition-delay: 0s;
		}
		&.delay-2 {
			transition-delay: 0s;
		}
		&.delay-0 {
			transition-delay: 0s;
		}
		&.delay-3 {
			transition-delay: 0s;
		}
	}
	
}