@charset "UTF-8";

:root {
	--font-sans-serif: 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", 'メイリオ',  Meiryo, sans-serif;

	--color-beige01: #ffeecd;
	--color-beige02: #fff5e1;
	--color-orange01: #f5ba84;
	--color-yellow01: #fdd10a;
	--color-red01: #E94738;
	--color-black01: #000;
	--color-black02: #393939;
}

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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

html {
	font-size: 62.5%;
	overflow: inherit!important;
}
body {
	font-family: var(--font-sans-serif);
	width: 100%;
	height: auto;
	background: transparent;
	position: relative;
	font-size: 1.6rem;
	font-weight: 400;
	overflow: auto;
}

h2 {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.44;
}

h3 {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.6;
}

p {
	margin: 0;
	font-size: 1.6rem;
	line-height: 2;
	font-weight: 400;
}

ul, ol, li {
	list-style: none;
}

a {
	outline: none;
}
button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	-webkit-appearance: none;
		 -moz-appearance: none;
					appearance: none;
}
a,button {
	text-decoration: none;
	-webkit-transition: opacity .4s ease , color .4s ease , background-color .4s ease;
	transition: opacity .4s ease , color .4s ease , background-color .4s ease;
	color: #333;
}
a:hover, button:hover {
	opacity: 0.56;
}

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

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}



/***************
   common   
****************/
.anpanman_wrapper {
	position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
	text-align: center;
	color: var(--color-black02);
}

.sp_only {
	display: none;
}



@media screen and (min-width:768px) {
	body {
		min-width: 1300px;
	}
	.sp_only {
		display: none!important;
	}
}

@media screen and (max-width:768px) {
	html {
		font-size: 10px;
		font-size: 2.56vw; /* basic // font 10px : width 390px */
	}

	.sp_only {
        display: inline-block;
    }
    
    .pc_only {
        display: none!important;
    }


	p {
		font-size: 1.5rem;
		line-height: 2;
	}

	img {
		width: 100%;
	}


	#body_inner {
		width: 100%;
		min-width: 0px;
	}


	.contents_wrapper {
		width: 100%;
		padding: 0 5.4vw;
		margin-right: auto;
		margin-left: auto;
	}

	.heading {
		margin: 0 auto 4.6rem;
	}

	.attention_text {
		font-size: 1rem;
	}
}



/* ------------------------------

	.anpanman_header

------------------------------ */
.anpanman_header {
	width: 100%;
	padding: 1.25rem 0 1.3rem;
	background: var(--color-beige01);
}

.anpanman_header .inner {
	width: 92%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
}

.anpanman_header .logo_block:nth-of-type(1) {

}

.anpanman_header .logo_block:nth-of-type(2) {
	width: 234px;
}

.anpanman_header .logo_block .copyright {
	font-size: 1.5rem;
	line-height: 1.1;
	margin: 0;
	color: var(--color-black01);
}



@media screen and (max-width: 768px) {
	.anpanman_header {
		padding: 0.86rem 0 0.95rem;
	}

	.anpanman_header .logo_block:nth-of-type(1) {
		width: 11.7rem;
		margin-top: 0.1rem;
	}
	
	.anpanman_header .logo_block:nth-of-type(2) {
		width: 12.5rem;
	}
	
	.anpanman_header .logo_block .copyright {
		margin-top: -0.22em;
		font-size: 1.6rem;
		transform-origin: left bottom;
		transform: scale(0.5);
		white-space: nowrap;
	}
	
}




/* ------------------------------

	.sns_footer

------------------------------ */
.sns_footer {
	position: relative;
	width: 100%;
	background: var(--color-beige02);
	padding: 13rem 0 15rem;
}

.sns_footer .sns_link_list {
	justify-content: center;
	column-gap: 4.4rem;
}
.sns_footer .sns_link_list .listitem {
	width: 8.6rem;
	height: 8.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
}






@media screen and (max-width: 768px) {
	.sns_footer {
		padding: 6.9rem 0 8.9rem;
	}
	.sns_footer .sns_link_list {
		column-gap: 2.2rem;
	}
	.sns_footer .sns_link_list .listitem {
		width: 5.4rem;
		height: 5.4rem;
	}
}




/* ------------------------------

	parts

------------------------------ */

.contents_wrapper {
	max-width: 1200px;
	width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.flex_base {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.center {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}

.bold {
	font-weight: 700;
}

.attention_text {
	font-size: 1.3rem;
	line-height: 1.4;
}

.color-red {
	color: var(--color-red01);
}

.emphasis_text {
	--color: #FBF5A4;
	position: relative;
	display: inline;
	font-size: 1.02em;
	background: linear-gradient( transparent 0%, transparent 51.8%, var(--color) 51.8%,var(--color) 80%,transparent 80%,transparent 100%);
}

/*****   heading   *****/
.heading {
	font-size: 4.6rem;
	margin-bottom: 3.1rem;
}
.heading_en {
	position: relative;
	display: block;
	color: var(--color-orange01);
	margin: 0 auto 1em;
	font-size: 2rem;
	letter-spacing: 0.17em;
}

.heading_en::before {
	--size: 4.8rem;
	content: "";
	position: relative;
	display: block;
	background-image: url(/brand/anpan/dekitaseries/img/design/heading_star_design.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: var(--size);
	height: calc(var(--size) * (78/48));
	font-size: var(--size);
	margin: 0 auto 0.11em;
}

@media screen and (max-width: 768px) {
	.heading {
		font-size: 2.4rem;
	}
	.heading_en {
		font-size: 1.4rem;
	}

	.heading_en::before {
		--size: 2rem;
	}
}

/**/
.visual_img,
.visual_img img {
	width: 100%;
}




/* ------------------------------

	animation

------------------------------ */
/***** fade_anime *****/
.js-fade_anime,
.js-fade_anime_list .js-fade_anime_list__item {
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.14s ease-in-out, transform 1.14s ease-in-out;
}

.js-fade_anime.fade_in,
.js-fade_anime_list.fade_in .js-fade_anime_list__item {
	opacity: 1;
	pointer-events: all;
}


.js-fade_anime_list {
	--fade-delay: 0.56s;
}
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_item="01"] {
	transition-delay: 0.1s;
}
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_item="02"] {
	transition-delay: calc(var(--fade-delay) * 1 + 0.2s);
}
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_item="03"] {
	transition-delay: calc(var(--fade-delay) * 2 + 0.2s);
}
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_item="04"] {
	transition-delay: calc(var(--fade-delay) * 3 + 0.2s);
}
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_item="05"] {
	transition-delay: calc(var(--fade-delay) * 4 + 0.2s);
}
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_item="06"] {
	transition-delay: calc(var(--fade-delay) * 5 + 0.2s);
}
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_item="07"] {
	transition-delay: calc(var(--fade-delay) * 6 + 0.1s);
}
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_item="08"] {
	transition-delay: calc(var(--fade-delay) * 7 + 0.1s);
}
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_item="09"] {
	transition-delay: calc(var(--fade-delay) * 8 + 0.1s);
}
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_item="010"] {
	transition-delay: calc(var(--fade-delay) * 9 + 0.1s);
}


.js-fade_anime[data-fade_type="up"],
.js-fade_anime_list .js-fade_anime_list__item[data-fade_type="up"] {
	transform: translate3d(0 , 22px , 0);
}

.js-fade_anime[data-fade_type="down"],
.js-fade_anime_list .js-fade_anime_list__item[data-fade_type="down"] {
	transform: translate3d(0 , -22px , 0);
}

.js-fade_anime[data-fade_type="rtl"],
.js-fade_anime_list .js-fade_anime_list__item[data-fade_type="rtl"] {
	transform: translate3d(27px , 0 , 0);
}
.js-fade_anime[data-fade_type="ltr"],
.js-fade_anime_list .js-fade_anime_list__item[data-fade_type="ltr"] {
	transform: translate3d(-27px , 0 , 0);
}
.js-fade_anime[data-fade_type="zoom_in"],
.js-fade_anime_list .js-fade_anime_list__item[data-fade_type="zoom_in"] {
	transform: scale(0.93);
}
.js-fade_anime.fade_in[data-fade_type="up"],
.js-fade_anime.fade_in[data-fade_type="down"],
.js-fade_anime.fade_in[data-fade_type="rtl"],
.js-fade_anime.fade_in[data-fade_type="ltr"],
.js-fade_anime.fade_in[data-fade_type="zoom_in"],
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_type="up"],
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_type="down"],
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_type="rtl"],
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_type="ltr"],
.js-fade_anime_list.fade_in .js-fade_anime_list__item[data-fade_type="zoom_in"] {
	transform: translate3d(0 , 0 , 0);
}



/********************
    modal
*********************/
.modal {

}

.modal__wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.16);
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.47s ease-in-out;
}
.modal__wrapper.active {
	opacity: 1;
	pointer-events: all;
}

.modal__contents {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	overflow: auto;
}

.buylink_modal__contents::-webkit-scrollbar {
	width: 1rem;
}
.buylink_modal__contents::-webkit-scrollbar-track{
   background-color: #fff;
}
.buylink_modal__contents::-webkit-scrollbar-thumb{
   background-color: #d5d5d5;
   border-radius: 4rem;
}


.buylink_modal__contents {
	background: #fff;
    width: 97rem;
    height: auto;
	padding: 8.9rem 2rem 7rem;
	border-right: 0.944rem solid #fff;
	max-width: 96%;
    max-height: 96vh;
    border-radius: 0.93rem;
	box-shadow : 0px 0px 0.62rem rgba(0, 0, 0, 0.2);
	opacity: 0;
	pointer-events: none;
}
.buylink_modal__contents.current {
	opacity: 1;
	pointer-events: all;
}

.buylink_modal__inner {
	width: 100%;
	max-width: 66.2rem;
	margin-left: auto;
	margin-right: auto;
}

.buylink_modal__heading {
	text-align: center;
	font-size: 4.4rem;
	font-weight: 700;
	color: var(--color-black01);
	margin-bottom: 1em;
}

.modal .modal_cancel_btn img {
	position: absolute;
	top: 2.8rem;
	right: 2.5rem;
	color: var(--color-black01);
	width: 5.2rem;
	cursor: pointer;
}


@media screen and (max-width: 768px) {
	.buylink_modal__heading {
		font-size: 2.9rem;
	}
	.buylink_modal__contents {
		padding: 6.2rem 2.2rem 4rem;
		max-height: 92vh;
	}

	.modal .modal_cancel_btn img {
		width: 2.8rem;
		top: 2;
		right: 1.8rem;
	}
}



/*****   buylink   *****/
.anpanman_wrapper .buylink__ttl {
	display: none;
}

.anpanman_wrapper .buylink {
	width: 100%;
	margin: 0;
}

.anpanman_wrapper .buylink__list {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
	border: none;
	border-radius: 0;
	background-color: transparent;
}

.anpanman_wrapper .buylink__list-item {
	width: calc((100% - 2.8rem)/2);
	height: 9.2rem;
	margin-bottom: 2.8rem;
}

.anpanman_wrapper .buylink__link {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	background: var(--color-red01);
	border: none !important;
	box-shadow: 0.28rem 0.28rem 0.28rem 0px rgba(0, 0, 0, 0.5);
	border-radius: 1rem;
	background-size: cover;
	color: #fff;
	line-height: 1.25;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
	text-decoration: none !important;
	white-space: nowrap;
}
.anpanman_wrapper .buylink__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: calc(100% - 1rem);
	height: calc(100% - 1rem);
	background: linear-gradient(to bottom, #fff 0, var(--color-red01) 20%);
	border-radius: 1rem;
	pointer-events: none;
}

.anpanman_wrapper .buylink__link-txt {
	position: relative;
}

.anpanman_wrapper .buylink__link-txt:after {
	display: none;
}


@media screen and (max-width: 768px) {
	.anpanman_wrapper .buylink__list-item {
		width: calc((100% - 1.3rem)/2);
		height: 5.6rem;
		margin-bottom: 1.3rem;
	}

	.anpanman_wrapper .buylink__link {
		font-size: 1.4rem;
		border-radius: 0.56rem;
	}
	.anpanman_wrapper .buylink__link::before {
		border-radius: 0.56rem;
	}
}