@charset "UTF-8";

/* Reset */

@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700&display=swap');

html,

body,

div,

span,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

abbr,

address,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

samp,

small,

strong,

sub,

sup,

var,

b,

i,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section,

summary,

time,

mark,

audio,

video {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;

}



* {

    -webkit-box-sizing: border-box;

    -o-box-sizing: border-box;

    -ms-box-sizing: border-box;

    box-sizing: border-box;

    min-width: 0;

    min-height: 0;

}



*:before,

*:after {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}



html {

    font-size: 62.5%;

    scroll-behavior: smooth;

}



article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

    display: block;

}



nav ul {

    list-style: none;

}



blockquote,

q {

    quotes: none;

}



blockquote:before,

blockquote:after,

q:before,

q:after {

    content: '';

    content: none;

}



a {

    margin: 0;

    padding: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;

    text-decoration: none;

    cursor: pointer;

}



body {

    font-size: 1.5rem;

    line-height: 1.9;

    color: #000000;

	font-family: 'Zen Old Mincho', sans-serif;

    word-break: break-word;

    text-align: justify;

}



/*remove highlight color touch on mobile*/

input,

textarea,

button,

select,

div,

a,

span {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



a,

input,

div,

select,

textarea,

img,

button {

    outline: none;

}



a:focus,

a:visited,

input:focus,

select:focus,

textarea:focus,

button:focus {

    outline: none !important;

    box-shadow: none;

}



ol,

ul {

    list-style: none;

    margin: 0;

    padding: 0;

}



li {

    list-style: none;

}





img {

    vertical-align: bottom;

    max-width: 100%;

    height: auto;

}





/* ----------- InView Animation ----------- */

.fade-in {

    opacity: 0;

    transition: opacity 1.5s;

}



.fade-in.is-view {

    opacity: 1;

}



.fade-up {

    opacity: 0;

    transform: translateY(40px);

    transition: opacity 1.2s, transform 0.8s;

}



.fade-up.is-view {

    opacity: 1;

    transform: translateY(0);

}



.fade-right {

    opacity: 0;

    transform: translateX(-40px);

    transition: opacity 1.2s, transform 0.8s;

}



.fade-right.is-view {

    opacity: 1;

    transform: translateX(0);

}



@media (min-width: 768px) {

    .delay01 {

        transition-delay: 0.1s;

    }



    .delay02 {

        transition-delay: 0.2s;

    }



    .delay03 {

        transition-delay: 0.3s;

    }



    .delay04 {

        transition-delay: 0.4s;

    }



    .delay05 {

        transition-delay: 0.5s;

    }



    .delay06 {

        transition-delay: 0.6s;

    }



    .delay07 {

        transition-delay: 0.7s;

    }



    .delay08 {

        transition-delay: 0.8s;

    }



    .delay09 {

        transition-delay: 0.9s;

    }



    .delay10 {

        transition-delay: 1s;

    }



    .delay11 {

        transition-delay: 1.1s;

    }



    .delay12 {

        transition-delay: 1.2s;

    }



    .delay20 {

        transition-delay: 2s;

    }

}



/* ----------- End InView Animation ----------- */



.dFlex {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

}



.container {

    max-width: 1400px;

    width: calc(100% - 40px);

    margin: 0 auto;

}



.pc {

    display: block !important;

}



.sp {

    display: none !important;

}







#mv {

	position: relative;

	margin: 0 auto 6%;

}



#mv .imgFull {

	width: 100%;

}



#mv h1 {

	position: absolute;

	top: 20px;

	left: 20px;

	width: 23%;

	max-width: 402px;

}



#mv .mvTxt {

	position: absolute; 

	top: 16%;

	left: 0;

	right: 0;

	margin: 0 auto;

	width: 9%;

}



#mv .mvTxt span {

	opacity: 0;

    transform: translateY(40px);

    transition: 1.2s ease-in-out 0.8s;

}



#mv .mvTxt span.is-view {

	opacity: 1;

    transform: translateY(0);

}



#mv .mvTxt2 {

	position: absolute;

	bottom: 20%;

	left: 8%;

	font-size: 5rem;

	color: #083388;

	letter-spacing: 0.1em;

	text-shadow: 2px 2px 20px #fff, -2px -2px 20px #fff, 3px 3px 20px #fff, -3px -3px 20px #fff, 4px 4px 20px #fff, -4px -4px 20px #fff;

}



#mv .mvTxt2 span {

	opacity: 0;

    transform: translateY(40px);

    transition: 1.2s ease-in-out 0.8s;

}



#mv .mvTxt2 span.is-view {

	opacity: 1;

    transform: translateY(0);

}



#boxTop {



}



#boxTop .inner {

	display: flex;

	justify-content: flex-end;

	align-items: center;

}



#boxTop .inner .photo {

	width: calc(50% - 180px);

	order: 2;

	border-radius: 70px 0 0 70px;

	overflow: hidden;

}



#boxTop .inner .txt {

	width: 640px;

	margin-right: 40px;

	order: 1;

	position: relative;

	font-size: 2.2rem;

}



#boxTop .inner .txt h3 {

	position: absolute;

	left: -12rem;

	top: 0;

	-webkit-writing-mode: vertical-rl;

	-ms-writing-mode: tb-rl;

	writing-mode: vertical-rl;

	font-size: 6rem;

	color: #083388;

	border-left: 1px double #083388;

	padding-left: 2rem;

}



#boxTop .inner .txt h3 span {

	font-size: 5rem;

}



#boxTop .inner .txt h3::before {

	position: absolute;

	left: -8px;

	top: 0;

	content: '';

	width: 3px;

	height: 100%;

	background: #083388;

}





#boxTop .inner .txt p:not(:last-of-type) {

	margin-bottom: 6rem;

}





.links {

	max-width: 1000px;

	width: calc(100% - 40px);	

	margin: 6rem auto;	

}



.links a {

	width: 32%;

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	margin-bottom: 2%;

	border: 1px solid #083388;

	border-radius: 10px;

	padding: 1rem;

	min-height: 77px;

}



.links a:hover {

	background: #ccc;

	opacity: 1;

}



.links a div {

	display: flex;

	flex-wrap: wrap;

	justify-content: space-between;

	align-items: center;

	width: 100%;

}





.links a span:nth-child(1) {

	width: 38px;

	height: 24px;

	 mask: url(https://shirayuki.itembox.design/item/lp_gift/ic1.svg) no-repeat center center/100% 100%;

	-webkit-mask: url(https://shirayuki.itembox.design/item/lp_gift/ic1.svg) no-repeat center center/100% 100%;

	background: #083388;

}



.links a div span:nth-child(2) {

	width: calc(100% - 40px);	

	letter-spacing: 0;

	display: initial;

	line-height: 1.3;

	color: #083388;

	font-size: 1.8rem;

}





.links a:nth-child(2) span:nth-child(1) {

	width: 30px;

	height: 30px;

	 mask: url(https://shirayuki.itembox.design/item/lp_gift/ic2.svg) no-repeat center center/100% 100%;

	-webkit-mask: url(https://shirayuki.itembox.design/item/lp_gift/ic2.svg) no-repeat center center/100% 100%;

}



.links a:nth-child(3) span:nth-child(1) {

	width: 30px;

	height: 30px;

	 mask: url(https://shirayuki.itembox.design/item/lp_gift/ic9.svg) no-repeat center center/100% 100%;

	-webkit-mask: url(https://shirayuki.itembox.design/item/lp_gift/ic9.svg) no-repeat center center/100% 100%;

}





.links a:nth-child(4) span:nth-child(1) {

	width: 25px;

	height: 40px;

	 mask: url(https://shirayuki.itembox.design/item/lp_gift/ic4.svg) no-repeat center center/100% 100%;

	-webkit-mask: url(https://shirayuki.itembox.design/item/lp_gift/ic4.svg) no-repeat center center/100% 100%;

}



.links a:nth-child(5) span:nth-child(1) {

	width: 30px;

	height: 32px;

	 mask: url(https://shirayuki.itembox.design/item/lp_gift/ic5.svg) no-repeat center center/100% 100%;

	-webkit-mask: url(https://shirayuki.itembox.design/item/lp_gift/ic5.svg) no-repeat center center/100% 100%;

}



.links a:nth-child(6) span:nth-child(1) {

	width: 30px;

	height: 30px;

	 mask: url(https://shirayuki.itembox.design/item/lp_gift/ic6.svg) no-repeat center center/100% 100%;

	-webkit-mask: url(https://shirayuki.itembox.design/item/lp_gift/ic6.svg) no-repeat center center/100% 100%;

}



.links a:nth-child(7) span:nth-child(1) {

	width: 30px;

	height: 32px;

	 mask: url(https://shirayuki.itembox.design/item/lp_gift/ic7.svg) no-repeat center center/100% 100%;

	-webkit-mask: url(https://shirayuki.itembox.design/item/lp_gift/ic7.svg) no-repeat center center/100% 100%;

}



.links a:nth-child(8) span:nth-child(1) {

	width: 30px;

	height: 34px;

	 mask: url(https://shirayuki.itembox.design/item/lp_gift/ic8.svg) no-repeat center center/100% 100%;

	-webkit-mask: url(https://shirayuki.itembox.design/item/lp_gift/ic8.svg) no-repeat center center/100% 100%;

}



.links a:nth-child(9) span:nth-child(1) {

	width: 30px;

	height: 34px;

	 mask: url(https://shirayuki.itembox.design/item/lp_gift/ic3c.svg) no-repeat center center/100% 100%;

	-webkit-mask: url(https://shirayuki.itembox.design/item/lp_gift/ic3c.svg) no-repeat center center/100% 100%;

}



.box {

	margin-bottom: 10rem;

}



.box .inner {

	display: flex;

}



.box .inner .photo {

	width: 62.5%;

}



.box .inner .photo figure {

    overflow: hidden;

    border-radius: 0 70px 70px 0;

}



.box .inner .photo figure img {

	margin: 0 0 0 auto;

}



.box .inner .txt {

	width: 640px;

	background: url(https://shirayuki.itembox.design/item/lp_gift/bg_line.png) no-repeat top center / 100% auto;

}



.box .inner .txt h2 {

	font-size: 5rem;

	width: 100%;

	display: flex;

	flex-wrap: wrap;

	justify-content: space-around;

	align-items: center;	

	color: #083388;

	-webkit-writing-mode: vertical-rl;

	-ms-writing-mode: tb-rl;

	writing-mode: vertical-rl;

	line-height: 1.4;

	letter-spacing: 0.1em;

	font-weight: 400;

	margin: 7rem 0 6rem;

}



.box .inner .txt h2 > span > span {

	padding-top: 4rem;

	display: block;

}



.box .inner .txt h2 > span > span:nth-child(1) {

	padding-top: 0

}



.box .inner .txt p {

	font-size: 1.8rem;

	text-align: center;

	letter-spacing: 0.05em;

}



.photoR .inner {

	justify-content: flex-end;

}



.photoR .inner .photo {

	order: 2;

}



.photoR .inner .photo figure {

	border-radius: 70px 0 0 70px;

}



.photoR .inner .photo figure img {

	margin: 0 auto 0 0;

}



.photoR .inner .txt {

	order: 1;

}





.sliderWrap {

	background: url(https://shirayuki.itembox.design/item/lp_gift/bg.jpg) no-repeat bottom center / cover;

	padding: 9% 0 5%;

	margin: -3% auto 0;

}



.slider {

	max-width: 1260px; 

	width: calc(100% - 100px); 

	margin: 0 auto;

}



.slider .item {

	margin: 0 1rem;

}

.slider .item .txt {

	margin-top: 2rem;

}

.slider .item .txt p:nth-child(1) {

	color: #083388;

	font-size: 2rem;

	line-height: 1.5;

}

.slider .item .txt p:nth-child(2) {

	font-size: 1.8rem;

}



.slick-track {

	margin-left: 0;

}

.slick-prev,

.slick-next {

	width: 70px;

	height: 70px;

	top: 30%;

	-webkit-transform: translate(0, 0);

	-ms-transform: translate(0, 0);

	transform: translate(0, 0);	

}

.slick-prev::before, 

.slick-next::before {

	content: '';

}

.slick-prev,

.slick-prev:focus,

.slick-prev:hover {

	background: url(https://shirayuki.itembox.design/item/lp_gift/btn_prev.png) no-repeat center center / 100% 100%;

	left: -100px;

	z-index: 9;

}

.slick-next,

.slick-next:focus,

.slick-next:hover {

	background: url(https://shirayuki.itembox.design/item/lp_gift/btn_next.png) no-repeat center center / 100% 100%;

	right: -100px;

	z-index: 9;

}

.slick-next:hover,

.slick-prev:hover {

	opacity: 0.8;

}





footer {

    padding: 6rem 0;

    font-size: 1.4rem;

    letter-spacing: 0.1em;

}

footer .container {

	display: flex;

	flex-wrap: wrap;

	justify-content: space-between;

	max-width: 1000px; 

	width: calc(100% - 40px);

	margin: 0 auto;

}



footer .fNav {

	width: 50%;

}

footer .fNav {

	display: flex;

	flex-wrap: wrap;

	justify-content: space-between;

}

footer .fNav a {

	color: #083388;

}

footer .fNav a:hover {

	color: red;

}





/* MEDIA */

@media (max-width: 1800px) {

	#mv .mvTxt2 {

		font-size: 2.5vw;

	}



	#boxTop .inner .txt {

		font-size: min(2.2rem, 2vw);

	}



	.box .inner .txt h2 {

		font-size: min(5rem, 2.3vw);

		margin-bottom: 4rem;

	}



	.box .inner .txt p {

		font-size: min(2.2rem, 1.2vw);

	}

}



@media (max-width: 1500px) {



    .slick-prev,

	.slick-next {

		width: 50px;

		height: 50px;

	}



	.slick-prev,

	.slick-prev:focus,

	.slick-prev:hover {

		left: -45px;

	}

	.slick-next,

	.slick-next:focus,

	.slick-next:hover {

		right: -45px;

	}



	.slider .item .txt p .pc {

		display: none !important;

	}

	.slider .item .txt p .sp {

		display: none !important;

	}

	.slider .item .txt p br {

		display: none;

	}







	#boxTop .inner .txt {

		padding-left: 12rem;

		font-size: 1.3vw;

	}



	#boxTop .inner .txt h3 {

		left: 2rem;

		font-size: 2.3vw;

	}



	#boxTop .inner .txt h3 span {

		font-size: 2vw;

	}





}



@media (max-width: 1800px) and (min-width: 1000px){

	.slider .item .txt p:nth-child(1) {

		font-size: 1.3vw;

	}



	.slider .item .txt p:nth-child(2) {

		font-size: 1.1vw;

	}

}





@media (max-width: 1000px) {

    .pc {

        display: none !important;

    }



    .sp {

        display: block !important;

    }



    #mv {

    	margin-bottom: 21%;

    }

    #mv h1 {

    	width: 40%;

    	top: 3vw;

    	left: 3vw;

    }

    

    #mv .mvTxt {

    	width: 21%;

    	top: 24%;

    }



	#mv .mvTxt2 {

		-webkit-writing-mode: vertical-rl;

		-ms-writing-mode: tb-rl;

		writing-mode: vertical-rl;

		font-size: 5vw;

		bottom: auto;

		top: 30%;

		left: 6%;

		line-height: 1.4;

	}





	#boxTop .inner {

		display: block;

		padding: 0 20px;

	}



	#boxTop .inner .txt {

		margin: 0 auto;

		width: 100%;

		padding-left: 23vw;

		margin-bottom: 4rem;

	}



	#boxTop .inner .txt h3 {

		left: 1rem;

		font-size: 10vw;

		padding-left: 1.5rem;

	}



	#boxTop .inner .txt h3 span {

		font-size: 8vw;

	}



	#boxTop .inner .txt p {

		left: 2rem;

		font-size: 4vw;

	}



	#boxTop .inner .txt p:not(:last-of-type) {

		margin-bottom: 4rem;

	}



	#boxTop .inner .photo {

		width: 80%;

		margin: 0 -2rem 0 auto;

		border-radius: 20px 0 0 20px;

	}





	.links a {

		width: 49%;

		margin-bottom: 2%;

		padding: 0 rem;

		min-height: 62px;

	}



	.links a div span:nth-child(2) {

		font-size: 3vw;

	}





	.box {

		margin-bottom: 6rem;

	}



	.box .inner {

		display: block;

	}



	.box .inner .photo {

		width: 90%;

		margin: 0 auto 0 0;

	}

	

	.box .inner .photo figure {

		height: unset;

		border-radius: 0 20px 20px 0;

	}



	.box .inner .photo figure img {

		width: 100%;

	}



	.box .inner .txt {

		padding: 8% 0;

		width: 100%;

		background: url(https://shirayuki.itembox.design/item/lp_gift/bg_line_sp.png) no-repeat left 3% center / auto 100%;

	}



    .box .inner .txt h2 {

		-webkit-writing-mode: unset;

		-ms-writing-mode: unset;

		writing-mode: unset;

		line-height: 1.4;

		font-size: 6vw;

		display: block;

		text-align: center;

		margin: 0 auto 3rem;

    }



    .box .inner .txt h2 span {

    	padding: 0 !important;

    }



    .box .inner .txt p {

    	font-size: 3.5vw;

    }



    .photoR .inner .photo {

    	margin: 0 0 0 auto;		

    }



    .photoR .inner .txt {

    	background-position: right 3% center;

    }



    .photoR .inner .photo figure {

    	border-radius: 20px 0 0 20px !important;

    }





    .box:last-of-type {

    	margin-bottom: 0;

    }

















    .sliderWrap {

    	margin: 0 auto;

    }



    .slider {

    	width: calc(100% - 40px);

    }





    .slider .item .txt p:nth-child(1) {

		font-size: 3.5vw;

	}

	.slider .item .txt p:nth-child(2) {

		font-size: 3.3vw;

	}



    .slick-prev,

	.slick-next {

		width: 50px;

		height: 50px;

		top: 20%;

	}



	.slick-prev,

	.slick-prev:focus,

	.slick-prev:hover {

		left: -15px;

	}

	.slick-next,

	.slick-next:focus,

	.slick-next:hover {

		right: -15px;

	}





	





    footer {

    	padding: 10% 0 0;        

    }



    footer .fNav {

    	width: 100%;

    }



    footer .fNav a {

    	width: 49%;

    	text-align: center;

    	border-bottom: 1px solid #083388;

    	text-align: left;

    	padding: 1rem 0;

    	margin-bottom: 1rem;

    	font-size: 4vw;

    }



    footer .copy {

    	padding: 10% 0 20%;

    	text-align: center;

    	width: 100%;

    }

    

}



#pagetopN {

	width: 91px;

	position: fixed;

	bottom: 2rem;

	right: 2rem;

	transition: transform .5s;

	z-index: 99;

	cursor: pointer;

}



#pagetopN a {

	display: block;

}



#pagetopN a:hover {

	opacity: 0.9;

}



@media (max-width: 1000px) {

	#pagetopN {

		width: 70px;

		bottom: 0.5rem;

		right: 0.5rem;

	}

}