@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
body {
	min-width: 320px;
}

article {
	font-weight: 400;
	/*	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	position: relative; */
}

/* フォント */
.font-palt {
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	position: relative;
}

.tsukuardgothic {
	font-family: fot-tsukuardgothic-std, sans-serif;
}

/* フレックスコンテナ */
.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-item {
	width: 100%;
}

/* カラー */
.bg-yellow {
	background-color: #FFF5CC;
}

.color-red {
	color: #DC3C36;
}

.box-green {
	background-color: #fff;
	border: solid 3px #A9CF52;
}

/* アロータイトル・左 */
.has-arrow-left {
	padding: 0 0 0 1em;
	background-image: url(/products/common/images/chevron-right-solid.svg);
	background-repeat: no-repeat;
	background-position: left 0 top .4em;
	background-size: auto .8em;
}

/* アローボタン */
.btn-arrow a {
	display: inline-block;
	padding: 1em 2.5em;
	line-height: 1.4;
	font-weight: bold;
	background-color: #FDD118;
	border-radius: 10rem;
	text-align: center;
	text-decoration: none;
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.btn-arrow.small a {
	padding: .5em 1em;
}

.btn-arrow a::after {
	content: '';
	width: 100%;
	height: 100%;
	background-image: url(/products/common/images/chevron-right-solid-w.svg);
	background-repeat: no-repeat;
	background-position: right .8em center;
	background-size: .8em auto;
	position: absolute;
	top: 0;
	left: 0;
}

.btn-arrow a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: #F6AB00;
	transition: all .2s linear;
}

.btn-arrow a.hovering {
	color: #fff;
}

a.hovering::before {
	left: 0;
}

/* ナビメニュー */
.navi-container {
	background-color: #FFEEAA;
}

ul.list-page-menu a {
	display: block;
	background-repeat: no-repeat;
	background-image: url(/phone/sagitaisaku/common/images/chevron-right-solid.svg);
	background-position: left center;
	background-size: auto .8em;
	text-decoration: none;
}

ul.list-page-menu a.hovering,
ul.list-page-menu a.active {
	color: #EA5404;
	background-image: url(../images/icon-phone.svg);
	background-size: auto 1em;
}

ul.list-page-menu a.active {
	pointer-events: none;
}

/* アニメーション */
.lineup-header {
	transition: all .7s;
}

.product-wrap {
	transition: all 1s .4s;
}

.flex-container .product:first-of-type {
	transition: all 1s .7s;
}

.flex-container .product:nth-of-type(2) {
	transition: all 1s 1s;
}

.flex-container .product:nth-of-type(3) {
	transition: all 1s 1.3s;
}

.lineup-normal:not(.passed) .lineup-header {
	opacity: 0;
}

.lineup-normal:not(.passed) .product-wrap {
	opacity: 0;
}

.lineup-normal:not(.passed) .product {
	opacity: 0;
}

/* ====================================
	1023px以下専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {
	main[data-footer-type] {
		padding-bottom: 0;
	}

	article .pc {
		display: none;
	}

	.pc-large {
		display: none;
	}

	.pc-small {
		display: none;
	}

	article .base-width-sp,
	article .base-width {
		padding-left: 5%;
		padding-right: 5%;
	}

	article .outer-base-width {
		padding-left: 0;
		padding-right: 0;
	}

	.font-viewport-sp {
		font-size: 2.667vw;
	}

	.sp-tc {
		text-align: center;
	}

	.sp-maxw240 {
		max-width: 240px;
	}

	.sp-maxw320 {
		max-width: 320px;
	}

	.sp-maxw480 {
		max-width: 480px;
	}

	.sp-maxw540 {
		max-width: 540px;
	}

	.sp-maxw768 {
		max-width: 768px;
	}

	.sp-ma {
		margin-left: auto;
		margin-right: auto;
	}

	.mts {
		margin-top: 2rem;
	}

	.mtm {
		margin-top: 5rem;
	}

	/* ナビメニュー */
	.navi-container {
		width: 100%;
		height: 100%;
		background: rgba(255, 238, 170, .9);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 11;
		transition: opacity .6s, visibility 0s ease .6s;
		opacity: 0;
		visibility: hidden;
	}

	body.gnavi-open .navi-container {
		transition-delay: 0s;
		opacity: 1;
		visibility: visible;
	}

	#pageMenu {
		width: 90%;
		margin: 20px auto 0;
		padding: 2% 5%;
		background: #fff;
		border-radius: 10px;
		box-shadow: 5px 5px 0px rgba(0, 0, 0, .1);
	}

	ul.list-page-menu li {
		width: 100%;
		text-align: center;
	}

	ul.list-page-menu a {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1em 1.5em 1em 1em;
		font-size: 1.6rem;
		position: relative;
	}

	ul.list-page-menu li:first-child a {
		font-size: 2rem;
	}

	ul.list-page-menu li:not(:first-child) a::before {
		content: '';
		width: 100%;
		height: 3px;
		border-top: dotted 3px #FDD118;
		position: absolute;
		top: 0;
		left: 0;
	}

	/* メニューボタン */
	.gnavi-open {
		left: 0;
		position: fixed !important;
		width: 100%;
	}

	.scroll-fix-wrap {
		position: relative;
	}

	.scroll-fix-sp {
		height: 48px;
	}

	.scroll-fix-page-menu {
		width: 100%;
		height: inherit;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
	}

	.page-menu-btn-container {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 6px 6px 0;
	}

	.scroll-fix-wrap.passed .scroll-fix-page-menu {
		position: fixed;
	}

	.page-menu-title {
		margin-left: 10px;
		font-size: 1.8rem;
	}

	.page-menu-title a {
		text-decoration: none;
	}

	.page-menu-btn {
		width: 35px;
		height: 35px;
		background-color: #FDD118;
		border-radius: 30px;
		box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.16);
		position: relative;
		cursor: pointer;
	}

	.hamburger {
		display: block;
		width: 16px;
		height: 17px;
		position: absolute;
		top: 9px;
		left: 9px;
		transition: all .4s;
		box-sizing: border-box;
	}

	.hamburger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #fff;
		margin: 0 auto;
	}

	.hamburger span:nth-of-type(1) {
		top: 0;
	}

	.hamburger span:nth-of-type(2) {
		top: 7px;
	}

	.hamburger span:nth-of-type(3) {
		bottom: 0;
	}

	.hamburger span:nth-of-type(1) {
		-webkit-animation: menu-ber01 .75s forwards;
		animation: menu-ber01 .75s forwards;
	}

	.hamburger span:nth-of-type(2) {
		transition: all .25s .25s;
		opacity: 1;
	}

	.hamburger span:nth-of-type(3) {
		-webkit-animation: menu-ber02 .75s forwards;
		animation: menu-ber02 .75s forwards;
	}

	.gnavi-open .hamburger span:nth-of-type(1) {
		-webkit-animation: active-menu-ber01 .75s forwards;
		animation: active-menu-ber01 .75s forwards;
	}

	.gnavi-open .hamburger span:nth-of-type(2) {
		opacity: 0;
	}

	.gnavi-open .hamburger span:nth-of-type(3) {
		-webkit-animation: active-menu-ber03 .75s forwards;
		animation: active-menu-ber03 .75s forwards;
	}


	@-webkit-keyframes menu-ber01 {
		0% {
			-webkit-transform: translateY(8px) rotate(45deg);
		}

		50% {
			-webkit-transform: translateY(8px) rotate(0);
		}

		100% {
			-webkit-transform: translateY(0) rotate(0);
		}
	}

	@keyframes menu-ber01 {
		0% {
			transform: translateY(8px) rotate(45deg);
		}

		50% {
			transform: translateY(8px) rotate(0);
		}

		100% {
			transform: translateY(0) rotate(0);
		}
	}

	@-webkit-keyframes menu-ber02 {
		0% {
			-webkit-transform: translateY(-8px) rotate(-45deg);
		}

		50% {
			-webkit-transform: translateY(-8px) rotate(0);
		}

		100% {
			-webkit-transform: translateY(0) rotate(0);
		}
	}

	@keyframes menu-ber02 {
		0% {
			transform: translateY(-8px) rotate(-45deg);
		}

		50% {
			transform: translateY(-8px) rotate(0);
		}

		100% {
			transform: translateY(0) rotate(0);
		}
	}

	@-webkit-keyframes active-menu-ber01 {
		0% {
			-webkit-transform: translateY(0) rotate(0);
		}

		50% {
			-webkit-transform: translateY(7px) rotate(0);
		}

		100% {
			-webkit-transform: translateY(7px) rotate(45deg);

		}
	}

	@keyframes active-menu-ber01 {
		0% {
			transform: translateY(0) rotate(0);
		}

		50% {
			transform: translateY(7px) rotate(0);
		}

		100% {
			transform: translateY(7px) rotate(45deg);
		}
	}

	@-webkit-keyframes active-menu-ber03 {
		0% {
			-webkit-transform: translateY(0) rotate(0);
		}

		50% {
			-webkit-transform: translateY(-7px) rotate(0);
		}

		100% {
			-webkit-transform: translateY(-7px) rotate(-45deg);
		}
	}

	@keyframes active-menu-ber03 {
		0% {
			transform: translateY(0) rotate(0);
		}

		50% {
			transform: translateY(-7px) rotate(0);
		}

		100% {
			transform: translateY(-7px) rotate(-45deg);
		}
	}

	/* 製品ラインアップ */
	#lineup.lineup-normal {
		padding: 60px 0 100px;
		text-align: center;
		overflow: hidden;
	}

	.lineup-title {
		margin-bottom: 40px;
		font-size: 1.8rem;
		line-height: 1.6;
	}

	#lineup.lineup-normal .product-wrap {
		position: relative;
	}

	#lineup.lineup-normal .product-wrap::before {
		content: '';
		width: 100vw;
		height: 70%;
		background: url(../images/bg-dot-yellow.png) repeat center center;
		position: absolute;
		top: 15%;
		left: 0;
	}

	#lineup.lineup-normal .flex-container {
		position: relative;
	}

	#lineup.lineup-normal .product {
		width: 100%;
		padding: 0 5% 40px;
		background-color: #fff;
		border: solid 3px #FDD118;
		border-radius: 10px;
		position: relative;
	}

	#lineup.lineup-normal .product .img {
		padding: 0 20%;
	}

	#lineup.lineup-normal .product .ttl {
		margin: 0 0 1em;
		font-size: 1.6rem;
	}

	#lineup.lineup-normal .product .btn-arrow {
		font-size: 1.5rem;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 50%);
	}

	#lineup.lineup-normal .product .btn-arrow a {
		width: 200px;
		padding: .8em 2.5em;
	}

	/* おすすめコンテンツ */
	.recommend-title {
		margin-bottom: 40px;
	}

	#recommend .flex-container {
		justify-content: space-between;
		font-size: 1.5rem;
	}

	#recommend .flex-container .ttl {
		margin-top: .5em;
		font-size: 1.4rem;
	}

	#recommend .flex-container .text {
		margin-top: .5em;
		font-size: 1.4rem;
	}

	#recommend .flex-container .category {
		margin-top: .5em;
		font-size: 1.2rem;
		line-height: 1.4;
	}

	#recommend .flex-container>.flex-item {
		width: 48%;
	}

	#recommend .flex-container>.flex-item:not(:nth-of-type(-n+2)) {
		margin-top: 3rem;
	}

	/* 特殊詐欺被害ゼロを目指します */
	.higai-zero {
		padding: 40px 0 20px;
		font-size: 1.5rem;
		text-align: center;
	}

	.higai-container {
		padding-bottom: 180px;
		position: relative;
	}

	.higai-container::before {
		content: '';
		width: 130px;
		height: 130px;
		background: url(../images/icon-stop.svg) no-repeat center center;
		background-size: contain;
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translate(-140px, 0);
	}

	.higai-container::after {
		content: '';
		width: 160px;
		height: 130px;
		background: url(../images/footer-img.png) no-repeat center center;
		background-size: contain;
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translate(0, 0);
	}

	.higai-text {
		font-weight: bold;
	}

	.higai-text em {
		font-size: 1.3em;
	}
}


/* ====================================
	768px以上1023px以下専用スタイル
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.sp-small {
		display: none;
	}

	.main-wrap {
		max-width: 540px;
		margin: 0 auto;
	}

	/* 製品ラインアップ */
	#lineup.lineup-normal .flex-container {
		justify-content: space-between;
	}

	#lineup.lineup-normal .product {
		width: 32%;
	}

	#lineup.lineup-normal .product .img {
		padding: 0 0;
	}
}

/* ====================================
	767px以下専用スタイル
===================================== */
@media only screen and (max-width: 767px) {

	body {
		font-size: 1.4rem;
	}

	.sp-large {
		display: none;
	}

	/* 製品ラインアップ */
	#lineup.lineup-normal .product:not(:first-child) {
		margin-top: 40px;
	}

}

/* ====================================
	1024px以上印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) {
	main[data-footer-type] {
		padding-bottom: 0;
	}

	article .sp {
		display: none;
	}

	.sp-small {
		display: none;
	}

	.sp-large {
		display: none;
	}

	.pc-tc {
		text-align: center;
	}

	.pc-maxw500 {
		max-width: 500px;
	}

	.pc-maxw750 {
		max-width: 750px;
	}

	.pc-maxw800 {
		max-width: 800px;
	}

	.pc-maxw850 {
		max-width: 850px;
	}

	.pc-maxw900 {
		max-width: 900px;
	}

	.pc-maxw960 {
		max-width: 960px;
	}

	.pc-maxw1024 {
		max-width: 1024px;
	}

	.pc-ma {
		margin-left: auto;
		margin-right: auto;
	}

	.mts {
		margin-top: 4rem;
	}

	.mtm {
		margin-top: 10rem;
	}

	/* フレックスコンテナ：ハーフ */
	.flex-container.half {
		justify-content: space-between;
	}

	.flex-container.half>.flex-item {
		width: 47%;
	}

	/* ナビメニュー */
	.page-menu-btn-container {
		display: none;
	}

	.scroll-fix-wrap {
		position: relative;
	}

	.scroll-fix-pc {
		height: 63px;
	}

	.scroll-fix-container {
		width: 100%;
		height: inherit;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
	}

	.scroll-fix-wrap.passed .scroll-fix-container {
		position: fixed;
	}

	ul.list-page-menu {
		display: flex;
		font-size: 1.8rem;
	}

	ul.list-page-menu li {
		margin-right: 1em;
	}

	ul.list-page-menu a {
		display: block;
		padding: 1em 1.5em 1em 1em;
	}

	/* 製品ラインアップ */
	#lineup.lineup-normal {
		padding: 100px 0 180px;
		text-align: center;
		overflow: hidden;
	}

	.lineup-title {
		margin-bottom: 80px;
		font-size: 3rem;
		line-height: 1.6;
	}

	#lineup.lineup-normal .product-wrap {
		position: relative;
	}

	#lineup.lineup-normal .product-wrap::before {
		content: '';
		width: 100vw;
		height: 70%;
		background: url(../images/bg-dot-yellow.png) repeat center top;
		position: absolute;
		top: 15%;
		left: 0;
	}

	#lineup.lineup-normal .flex-container {
		justify-content: center;
		position: relative;
	}

	#lineup.lineup-normal .product {
		width: 32%;
		padding: 0 2% 60px;
		background-color: #fff;
		border: solid 5px #FDD118;
		border-radius: 30px;
		position: relative;
	}

	#lineup.lineup-normal .product:not(:first-child) {
		margin-left: 2%;
	}

	#lineup.lineup-normal .product .img {
		padding: 0 15%;
	}

	#lineup.lineup-normal .product .ttl {
		margin: 0 0 20px;
		font-size: 2rem;
	}

	#lineup.lineup-normal .product .btn-arrow {
		font-size: 1.8rem;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 50%);
	}

	#lineup.lineup-normal .product .btn-arrow a {
		width: 200px;
		padding: .8em 2.5em;
	}

	/* おすすめコンテンツ */
	.recommend-title {
		margin-bottom: 60px;
	}

	#recommend .flex-container {
		justify-content: center;
		font-size: 1.5rem;
	}

	#recommend .flex-container .ttl {
		margin-top: .5em;
		font-size: 1.6rem;
	}

	#recommend .flex-container .text {
		margin-top: .5em;
		font-size: 1.4rem;
	}

	#recommend .flex-container .category {
		margin-top: .5em;
		font-size: 1.2rem;
		line-height: 1.4;
	}

	#recommend .flex-container>.flex-item {
		width: 23%;
	}

	#recommend .flex-container>.flex-item:not(:first-of-type) {
		margin-left: 3%;
	}

	/* 特殊詐欺被害ゼロを目指します */
	.higai-zero {
		padding: 90px 0;
		font-size: 2.8rem;
		text-align: center;
	}

	.higai-container {
		position: relative;
	}

	.higai-container::before {
		content: '';
		width: 130px;
		height: 130px;
		background: url(../images/icon-stop.svg) no-repeat center center;
		background-size: contain;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-440px, -50%);
	}

	.higai-container::after {
		content: '';
		width: 160px;
		height: 150px;
		background: url(../images/footer-img.png) no-repeat center center;
		background-size: contain;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(310px, -50%);
	}

	.higai-text {
		font-weight: bold;
	}

	.higai-text em {
		font-size: 1.3em;
	}
}

/* ====================================
	1024px以上1199px以下専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) and (max-width: 1199px) {
	.pc-large {
		display: none;
	}

}

/* ====================================
	1200px以上専用スタイル
===================================== */
@media screen and (min-width: 1200px) {
	.pc-small {
		display: none;
	}

}