@charset "utf-8";
/* -- すべてに適用される -- */
*{
	box-sizing: border-box;
	scroll-behavior: smooth;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
.anniversarysale-wrapper {
	background: linear-gradient(to right,#e4f8fb 13%,#fff 50%,#e4f8fb 87%);
}
.anniversarysale-wrapper h4 {
	color: #1c2c4c;
}
.discount {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1c2c4c;
	margin-bottom: 30px;
	font-family: futura-pt, sans-serif;
	font-style: normal;
	font-weight: 500;
}
.discount::before,
.discount::after {
	content: '';
	display: block;
	width: 34%;
	height: 3px;
	background: #1c2c4c;
}
.discount::before {
	margin-right: 2em;
	margin-left: 1em
}
.discount::after {
	margin-left: 2em;
	margin-right: 1em;
}
.max-text {
	color: #1c2c4c;
	font-size: 25px;
	margin: 0 auto;
	padding-top: 100px;
	font-family: futura-pt, sans-serif;
	font-style: normal;
	font-weight: 500;
}
p.max-text {
	margin-bottom: -10px;
}
 /* 紺色のボタン */
.anniversarysale-navy-botton {
	background: #1c2c4c;
	color: #fff;
	padding: 18px 75px;
	transition: transform 0.3s ease;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	margin: 100px;
}
.anniversarysale-navy-botton:link {
	text-decoration: none;
}
.anniversarysale-navy-botton:hover {
	transform: scale(1.1);
}
 /* 白色のボタン */
.anniversarysale-white-botton {
	background: #fff;
	color: #1c2c4c;
	padding: 10px 50px;
	display: inline-block;
	text-decoration: none;
	border: 1px solid #1c2c4c;
}
.anniversarysale-white-botton:link {
	text-decoration: none;
}
/* -- headerに適用される -- */
.anniversarysale-header {
	text-align: center;
}
.anniversarysale-header img {
	max-width: 100%;
	height: auto;
}
.anniversarysale-wrapper-block {
	margin: 0 auto;
	max-width: 1200px;
}
/* -- mainに適用される -- */
	/* itemに適用される */
.anniversarysale-item {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 40px;
	margin-bottom: 40px;
	font-size: 20px;
}
.anniversarysale-item img {
	max-width: 100%;
	height: auto;
}
.anniversarysale-item p {
	color: #1c2c4c;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
}
.anniversarysale-item-cut {
	background: #a4abb7;
	transition: transform 0.3s ease;
	display: inline-block;
	position: relative;
	margin-left: 400px;
	margin-right: 400px;
	width: 250px;
	height: 250px;
	margin: 50px auto;
}
.anniversarysale-item-cut p {
	position: absolute;
	top: 55%;
	left: 50%;
	margin: 0 auto;
	transform: translateX(-50%);
}
.anniversarysale-item-cut:hover {
	transform: scale(1.1);
}
.anniversarysale-item a {
	text-decoration: none;
}
.anniversarysale-item-software {
	background: #79dbec;
	transition: transform 0.3s ease;
	display: inline-block;
	text-decoration: none;
	position: relative;
	margin-left: 400px;
	margin-right: 400px;
	width: 250px;
	height: 250px;
	margin: 50px auto;
}
.anniversarysale-item-software p {
	position: absolute;
	top: 65%;
	left: 50%;
	margin: 0 auto;
	transform: translateX(-50%);
}
.anniversarysale-item-software:hover {
	transform: scale(1.1);
}
.anniversarysale-item-supply {
	background: #cdd6d7;
	transition: transform 0.3s ease;
	display: inline-block;
	text-decoration: none;
	position: relative;
	margin-left: 400px;
	margin-right: 400px;
	width: 250px;
	height: 250px;
	margin: 50px auto;
}
.anniversarysale-item-supply p {
	position: absolute;
	top: 68%;
	left: 50%;
	margin: 0 auto;
	transform: translateX(-50%);
}
.anniversarysale-item-supply:hover {
	transform: scale(1.1);
}
.arrow {
	position: relative;
	display: block;
	padding: 0;
	width: 100px;
	height: 100px;
	margin: 0 auto;
	bottom: 30px;
}
.arrow::before {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	border-top: solid 5px #1c2c4c;
	border-right: solid 5px #1c2c4c;
	top: 50%;
	left: 50%;
}
.arrow-bottom::before {
	transform: translate(-50%,-50%) rotate(135deg);
}

/* cutに適用される */
 /* pc表示 sp非表示 */
.cut-sp {
	display: none;
}
.cut-pc {
	display: block;
}
.anniversarysale-cut {
	background-color: #a4abb7;	
}
.anniversarysale-cut-block {
	text-align: center;
}
.anniversarysale-cut-block img {
	max-width: 100%;
	height: auto;
}
.anniversarysale-cut-block-product {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0;
	width: 100%;
	height: 100%;
}
.anniversarysale-cut-block-product a {
	margin-bottom: 20px;
}
.cut-product {
	background-color: #fff;
	text-align: center;
	margin-left: 30px;
	margin-right: 30px;
}
.cut-product img {
	width: 330px;
	height: auto;
	margin-top: 2em;
}
.cut-product p {
	font-size: 18px;
	margin-top: 0;
	color: #1c2c4c;
}
.big-text {
	font-size: 23px;
}
.red-text {
	color: #be0916;
	font-size: 23px;
}
.cut-block-title img {
	width: 350px;
	margin: 0;
}
.cut-block-title {
	position: relative;
}
.cut-block-title img {
	position: absolute;
	width: 350px;
	margin-top: 80px;
	transform: translateX(-50%);
}
.cut-discount {
	font-size: 40px;
	margin-right: 5px;
}
.cut-off {
	font-size: 30px;
	margin-top: 5px;
}
	/* softwareに適用される */
.anniversarysale-software {
	background-color: #79dbec;
}
.anniversarysale-software-block {
	text-align: center;
	margin-top: 60px;
}
.anniversarysale-software-block img {
	max-width: 100%;
	height: auto;
}
.software-product {
	background-color: #fff;
	margin-left: 400px;
	margin-right: 400px;
	width: 350px;
	height: 420px;
	margin: 0 auto;
}
.software-product img {
	width: 240px;
	height: auto;
	margin-top: 2em;
}
.software-product p {
	font-size: 18px;
	width: auto;
	margin-top: 0;
	color: #1c2c4c;
}
.software-block-title img {
	width: 350px;
}
.software-block-title {
	position: relative;
}
.software-block-title img {
	position: absolute;
	width: 350px;
	margin-top: 90px;
	transform: translateX(-50%);
}
.software-discount {
	font-size: 40px;
	margin-right: 5px;
}
.software-off {
	font-size: 30px;
	margin-top: 5px;
}
.software-block-title .discount {
	padding-top: 160px;
}
.anniversarysale-software-block a.anniversarysale-navy-botton {
	padding: 18px 75px;
}
/* supplyに適用される */
	/* pc表示 sp非表示 */
.supply-sp {
	display: none;
}
.supply-pc {
	display: block;
}
.anniversarysale-supply {
	background-color: #cdd6d7;
}
.anniversarysale-supply-block {
	text-align: center;
	margin-top: 60px;
}
.anniversarysale-supply-block img {
	max-width: 100%;
	height: auto;
}
.anniversarysale-supply-block-product {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0; 
	width: 100%;
	height: 100%;
}
.anniversarysale-supply-block-product a {
	margin-bottom: 20px;
}
.supply-product {
	background-color: #fff;
	text-align: center;
	position: relative;
	margin: 20px 30px 100px;
}
.supply-product img {
	width: 330px;
	height: auto;
	margin-top: 2em;
}
.supply-product p {
	margin-top: 0;
	width: 200px;
	color: #1c24c;
	margin: 0 auto 10px;
	font-size: 18px;
}
.big-red-text {
	font-size: 40px;
	color: #be0916;
}
.supply-block-title {
	position: relative;
}
.supply-block-title img {
	position: absolute;
	width: 350px;
	margin-top: 80px;
	transform: translateX(-50%);
}
.supply-discount {
	font-size: 40px;
	margin-right: 10px;
}
.supply-off {
	font-size: 30px;
	margin-top: 10px;
}
/* -- footerに適用される -- */
.footer-big-bg img {
	max-width: 100%;
	height: auto;
	margin-top: 100px;
	margin-bottom: -5px;
}
.anniversarysale-footer {
	text-align: center; 
	position: relative;
}
.anniversarysale-footer img {
	position: absolute;
	max-width: 100%;
	height: auto;
	width: 800px;
	transform: translateX(-50%);
	margin-top: 50px;
}
.anniversarysale-footer a {
	position: absolute;
	margin: 0;
	transform: translateX(-50%);
	margin-top: 210px;
}
.anniversarysale-footer img,a.anniversarysale-navy-botton-footer {
	max-width: 100%;
	height: auto;
}
.anniversarysale-navy-botton-footer {
	background: #1c2c4c;
	color: #fff;
	padding: 18px 75px;
	transition: transform 0.3s ease;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
}
 .anniversarysale-navy-botton-footer:hover {
	transform: translateX(-50%) scale(1.1);
}
.anniversarysale-navy-botton-footer:link {
	text-decoration: none;			
}

/* スマートフォン向けCSS */
@media (min-width: 887px) and (max-width: 1242px) {
	.footer-big-bg img {
		margin-top: 200px;
	}
}
@media (min-width: 887px) and (max-width: 950px) {
	.cut-product p {
		font-size: clamp(14px,2vw,16px);
	}		
}
@media (max-width: 886px) {
	/* 全体に適応　*/
	.portrait-wrapper {
		margin: 0;
		font-size: 13px;
	}
	a.anniversarysale-navy-botton {
		margin-top: 50px;
		padding: 18px 75px;
	}
	.discount {
		margin-bottom: 20px;
	}
	.discount::before {
		margin-right: 2em;
		margin-left: 10px;
		width: 30%;
	}
	.discount::after {
		margin-left: 2em;
		margin-right: 10px;
		width: 30%;
	}
	p.max-text {
		padding-top: 60px;
		font-size: 20px;
	}
	/* headerに適用 */
	/* itemに適用 */
	.anniversarysale-item {
		text-align: center;
		gap: 1em;
		margin: 50px 20px 50px 20px;
		max-width: 100%;
		height: auto;
	}
	.anniversarysale-item-cut {
		width: 180px;
		height: 180px;
	}
	.anniversarysale-item-cut p {
		top: 65%;
		font-size: 16px;
		width: 9em;
	}
	.anniversarysale-item-software {
		width: 180px;
		height: 180px;
	}
	.anniversarysale-item-software p {
		top: 65%;
		font-size: 16px;
		width: 9em;
	}
	.anniversarysale-item-supply {
		width: 180px;
		height: 180px;
	}
	.anniversarysale-item-supply p {
		top: 65%;
		font-size: 16px;
	}
	.arrow {
		margin-top: 40px;
		width: 50px;
		height: 0;
	}
	.arrow::before {
		border-top: solid 3px #1c2c4c;
		border-right: solid 3px #1c2c4c;
		width: 30px;
		height: 30px;
	}
	/* cutに適用 */
	 /* pc非表示 sp表示 */
	.cut-sp {
		display: block;
	}
	.cut-pc {
		display: none;
	}
	.cut-product {
		width: 280px;
		height: 350px;
		margin: 0 auto;
	}
	.cut-discount {
		font-size: 30px;
	}
	.cut-off {
		font-size: 20px;
	}
	.cut-block-title img {
		margin-top: 50px;
		width: 280px;
	}
	/* softwareに適用 */
	.anniversarysale-software-block {
		text-align: center;
	}
	.software-product {
		width: 280px;
		height: 450px;
	}
	.anniversarysale-software-block a.anniversarysale-navy-botton {
		margin-top: 80px;
	}
	.software-discount {
		font-size: 30px;
	}
	.software-off {
		font-size: 20px;
	}
	.software-block-title img {
		width: 280px;
	}
	.software-block-title.discount {
		padding-top: 150px;
	}
	/* supplyに適用 */
	/* pc非表示 sp表示 */
	.supply-sp {
		display: block;
	}
	.supply-pc {
		display: none;
	}
	.anniversarysale-supply-block {
		height: 680px;
		margin-top: 20px;
		margin-bottom: 100px;
	}
	.anniversarysale-supply-block-product {
		height: 370px;
		width: 280px;
		overflow: hidden;
		margin: 0 auto 5px auto;
	}
	.supply-product {
		width: 280px;
		height: 380px;
		margin: 0 auto;
	}
	.supply-product img {
		margin-top: 1em; 
	}
	.supply-discount {
		font-size: 30px;
	}
	.supply-off {
		font-size: 20px;
	}
	.supply-block-title img {
		margin-top: 50px;
		width: 280px;
	}
	/* footerに適用 */
	.anniversarysale-footer img {
		margin-top: -60px;
	}
	a.anniversarysale-navy-botton-footer {
		margin-top: 100px;
		padding: 18px 75px;
	}
	/* カルーセル */
	.carousel-sp {
		max-width: 100%;
		width: 600px;
		height: 450px;
		margin: 0 auto;
	}
	.anniversarysale-cut-block-product {
		height: 350px;
		width: 280px;
		overflow: hidden;
		margin: 0 auto 5px auto;
	}
	.anniversarysale-supply-block-product {
		height: 370px;
		width: 280px;
		overflow: hidden;
		margin: 0 auto 5px auto;
	}
	.ul_cut {
		height: 100%;
		display: flex;
		transition-duration: 0.4s;
		will-change: transform;
	}
	.ul_cut.no-transition {
		transition: none;
	}
	.ul_supply {
		height: 100%;
		display: flex;
		transition-duration: 0.4s;
		will-change: transform;
	}
	.ul_supply.no-transition {
		transition: none;
	}
	.button-box {
		text-align: center;
	}
	button {
		margin-top: 5px;
		margin-bottom: -40px;
		border: none;
		padding: 5px 5px;
		font-size: 30px;
		cursor: pointer;
		background-color: #1c2c4c; 
		color: #e4f8fb;
	}
	button:hover {
		border: none;
		background-color: #1c2c4c;
		color: #e4f8fb;
	}
	.nav-sp {
		left: 0;
		right: 0;
		text-align: center;
	}
	.nav-sp button {
		width: 20px;
		height: 20px;
		background-color: #EFEFEF;
		border-radius: 50%; 
	}
	.nav-sp button + button {
		margin-left: 8px;
	}
	.nav-sp button.current {
		background-color: #1c2c4c;
	}
	.button-box .prev-sp {
		margin-right: 60%;
	}
}
@media (max-width: 655px) {
	/* 全体に適応　*/
	a.anniversarysale-navy-botton {
		margin-top: 25px;
		margin-left: 0;
		margin-right: 0;
		padding: 18px 75px;
	}
	.discount::before {
		margin-right: 2em;
		margin-left: 10px;
		width: 20%;
	}
	.discount::after {
		margin-left: 2em;
		margin-right: 10px;
		width: 20%;
	}
	/* headerに適用 */
	/* itemに適用 */
	.anniversarysale-item {	
		display: flex;
		justify-content: center;
		max-width: 100%;
		margin: 70px auto;
	}
	.anniversarysale-item-cut {
		width: 150px;
		height: 150px;
		margin: 0;
		max-width: 100%;
	}
	.anniversarysale-item-cut img {
		max-width: 100%;
		height: auto;
		
	}
	.anniversarysale-item-cut p {
		margin-top: 4px;
	}
	.anniversarysale-item-software {
		width: 150px;
		height: 150px;
		margin: 0;
		max-width: 100%;
	}
	.anniversarysale-item-software p {
		margin-top: 4px;
	}
	.anniversarysale-item-supply {
		width: 150px;
		height: 150px;
		margin: 0;
		max-width: 100%;
	}
	.anniversarysale-item-supply p {
		margin-top: 4px;
	}
	.arrow::before{
		width: 30px;
		height: 30px;
	}
	/* cutに適用 */
	/* softwareに適用 */
	/* supplyに適用 */
	/* footerに適用 */
	a.anniversarysale-navy-botton-footer {
		padding: 18px 20px;
		margin-top: 50px;
		margin-bottom: 30px;
	}
}
@media (max-width: 500px) {
	/* itemに適用 */
	.arrow {
		top: 30px;
	}
	.anniversarysale-item {
		max-width: 100%;
		margin: 50px auto;
	}
	.anniversarysale-item img {
		display: none;
	}
	.anniversarysale-item-cut {
		width: 100px;
		height: 100px;
		margin: 0;
	}
	.anniversarysale-item-cut p {
		width: 100%;
		max-width: 100%;
		top: 10px; 
	}
	.anniversarysale-item-software {
		width: 100px;
		height: 100px;
		margin: 0;
	}
	.anniversarysale-item-software p {
		width: 100%;
		max-width: 100%;
		display: flex;
		top: 25px; 
	}
	.anniversarysale-item-supply {
		width: 100px;
		height: 100px;
		margin: 0;
	}
	.anniversarysale-item-supply p {
		width: 100%;
		max-width: 100%;
		top: 25px; 
	}
	/* footerに適用 */
	a.anniversarysale-navy-botton-footer {
		padding: 10px 12px;
	}
}