@charset "UTF-8";

/******特典箇所両脇キャラクター非表示******/
.osechi_benefit img.explanation {
    width: 100%!important;
}
.osechi_benefit img.character {
	display: none;
}
/******特典箇所両脇キャラクター非表示******/

html, body {
	margin: 0;
	padding: 0;
}

.osechi_wrapper button {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

.osechi_wrapper .sp {
    display: none;
    visibility: hidden;
}

.osechi_wrapper img {
    max-width: 100%;
    vertical-align: bottom;
	width: 100%;
}

.osechi_tab_attention {
	margin: 24px 0 10px;
}

.osechi_tab_attention > img {
	max-width: fit-content;
}

.osechi_wrapper {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
    margin-top: auto;
    margin-bottom: -230px;
    text-align: center;
	position: relative;
	background: url(../images/bg.webp);
	background-repeat: repeat-y;
	background-size: 100%;
}

.osechi_main {
	/*background-color: #e5e5e5;
	background-image: url("https://deagostini.jp/resources/images/select/product/osechi/heroaca_2026/main_bg.webp");
	background-position: center -12px;
	background-repeat: repeat-y;
	position: relative;
	z-index: 10;*/
}

.osechi_main .main_01 {
	/*margin-bottom: 40px;*/
	position: relative;
}

.osechi_main .main_01 img {
	/*max-width: 900px;*/
}


.osechi_main .main_02 {
	padding-bottom: 50px;
}

.osechi_main .main_02 img {
	max-width: 620px;
}

.osechi_benefit {
    /*padding: 110px 0 42px;
    position: relative;
	margin-top: -140px;
    overflow: hidden;
	z-index: 20;*/
}

.bg_purple{
    max-width: 100% !important;
	width: 100%;
	background: linear-gradient(180deg, #634D8B 2%, #1D1728 66%, #060409 93%);
}

.bg_white{
	max-width: 100% !important;
	width: 100%;
	background-color: #fff;
}

.osechi_benefit > div {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
}

.osechi_benefit > div + div {
	/*margin-top: 60px;*/
}

.osechi_benefit > div + div.benefit_4 {
	
}

.osechi_benefit img.explanation {
    max-width: 800px;
	position: relative;
	z-index: 1;
}

.osechi_benefit img.character_deku {
	position: absolute;
    width: 243px;
    bottom: -59px;
    left: -238px;
}

.osechi_benefit img.character_ochaco {
	position: absolute;
	width: 170px;
    top: 100px;
    right: -177px;
}

.osechi_benefit img.character_todoroki {
	position: absolute;
	width: 230px;
    top: 84px;
    right: -221px;
}

.osechi_benefit img.character_bakugo {
	position: absolute;
	width: 303px;
    bottom: -118px;
    left: -257px;
}

.osechi_benefit img.character_kirishima {
	position: absolute;
    width: 261px;
    bottom: -60px;
    right: -199px;
}

.osechi_benefit img.character_joro {
	position: absolute;
	width: 255px;
    top: -145px;
    left: -252px;
}

.character {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(3%);
  }
}

.osechi_benefit::before {
    /*content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffff00;
    transform: skewY(-3.6deg) translateY(90px);
    z-index: -1;*/
}

.osechi_intro {
    position: relative;
	padding: 28px 0 0;
    padding-bottom: 277px;
    background-color: #000;
}

.osechi_intro_bg{
}

.osechi_intro img {
	max-width: 600px;
    width: auto;
}

.osechi_intro2{
	position: relative;
    padding-bottom: 277px;
}

.osechi_intro2 > p{
	width: 600px;
    margin: 0px auto;
    padding: 12px 20px 0;
    font-size: 24px;
    color: #000;
	font-weight: bold;
}

.osechi_intro_tab_wrapper {
    position: relative;
	top: -250px;
}

.oshinagaki,
.osechi_maker {
    position: relative;
	top: -250px;
}

.tabs {
    display: flex;
    position: relative;
	justify-content: center;
	align-items: end;
    margin-bottom: -1px;
}

.tabs img {
	width: 55%;
}

.active .tab_title {
}

div.space-50 {
    width: 50px;
}

div.space-20 {
    width: 16px;
}

div.black-boder {
    width: 100%;
    height: 0;
    background-color: rgba(241, 213, 146, 1);
    position: absolute;
    bottom: -24px;
    left: 0;
}

/* Tab2 が選択されたとき */
.black-boder.tab2-active {
    background-color: rgba(255, 247, 110, 1);
}

.tab-button {
    cursor: pointer;
    transition: filter 0.3s;
    flex: 1;
    text-align: center;
    /*border-radius: 14px 14px 0 0;*/
    border: 4px solid;
	max-width: 240px;
	font-size: 30px;
    line-height: 0;
    height: 56px;
	font-weight: bold;
	color: #fff;
    font-family: "Noto Serif JP", serif;
}

.tab-button > p{
    padding-left: 80px;
}

.tab-button.tab1 {
    position: relative;
    left: 3px;
	background: url(../images/tab1_off.webp);
    background-repeat: no-repeat;
    background-position: center;
    color: #000;
}

.tab-button.tab2 {
    background: url(../images/tab2_off.webp);
    background-repeat: no-repeat;
    background-position: center;
}

.tab-button.tab3 {
    background: url(../images/tab_pc_off.webp);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    right: 3px;
}

.tab-button:hover {
    filter: brightness(105%);
}

.tab-button.active {
    border-bottom: none;
}

.tab-button.active {
    height: 70px;
}

.tab-content {
    display: none;
    padding: 10px 0 60px;
}

.tab-content-title {
    width: 600px;
    margin: 32px auto 8px;
    /* padding: 20px; */
    font-size: 24px;
    color: #000;
    /* background-color: rgba(255, 255, 255, 0.2); */
    font-weight: bold;
}

.tab-content-title img {
    width: auto;
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

#Tab1 .tab-content-title img {
	max-width: 100%;
}

.tab-content-title img.title_ju {
	margin-bottom: 30px;
}

.osechi_icon1{
	position: absolute;
    top: -6%;
    left: 24%;
    width: calc(185 / 1500 * 100vw) !important;
}

.osechi_icon2{
	position: absolute;
    top: -13%;
    right: 24%;
    width: calc(185 / 1500 * 100vw) !important;
}

.osechi2_icon2{
	position: absolute;
    top: -11%;
    right: 24%;
    width: calc(165 / 1500 * 100vw) !important;
}

.osechi3_icon2{
	position: absolute;
    top: -11%;
    right: 24%;
    width: calc(165 / 1500 * 100vw) !important;
}

.tab-content.tab1 {
    background:url(../images/osechi_bg.webp),url(../images/osechi_bg2.webp);
	background-repeat: no-repeat no-repeat;
	background-position: center top, center bottom;
}

.tab-content.tab2 {
    background:url(../images/osechi_bg.webp),url(../images/osechi_bg2.webp);
	background-repeat: no-repeat no-repeat;
	background-position: center top, center bottom;
}

.tab-content.tab3 {
    background:url(../images/osechi_03_bg.webp);
	background-repeat: no-repeat;
	background-position: center;
}

.tab-content.active {
    display: block;
}

.opacity {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.opacity-visible {
    opacity: 1;
    transform: translateY(0);
}

.icon_aska{
    width: auto !important;
    position: absolute;
    top: 0;
    left: -11px;
    scale: 0.9;
}

.icon_shinji{
    width: auto !important;
    position: absolute;
    top: 165px;
    left: -11px;
    scale: 0.9;
}

.icon_rei{
    width: auto !important;
    position: absolute;
    top: 310px;
    left: 230px;
    scale: 0.9;
}

.icon_kaworu{
    width: auto !important;
    position: absolute;
    top: 156px;
    right: -11px;
    scale: 0.9;
}
.icon_mari{
    width: auto !important;
    position: absolute;
    top: -11px;
    right: -12px;
    scale: 0.9;
}
.oshinagaki {
    background-image: url('https://deagostini.jp/resources/images/select/product/osechi/heroaca_2026/oshinagaki_bg.webp');
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
	padding: 40px 0 60px;
	font-family: "Noto Serif JP", serif;
}

.oshina_title{
	font-size: 24px;
}

.oshinagaki img {
	max-width: 620px;
	margin: 0 auto;
}

.osechi_maker {
    background-image: url('https://deagostini.jp/resources/images/select/product/osechi/heroaca_2026/maker_bg.webp');
	background-position: center top;
	background-repeat: repeat-x;
	padding: 53px 0 30px;
}

.osechi_maker img {
	max-width: 620px;
	margin: 0 auto;
}

/* おせち紹介 */
.area_tab_content {
	display: flex;
	max-width: 850px;
    margin: 0 auto;
    justify-content: space-between;
	align-items: center;
/*	flex-direction: row-reverse;*/
}

#tab2 .area_tab_content {
	gap: 20px;
}


.area_tab_content .osechi_link {
	width: 65%;
	position: relative;
}
.osechi_detail {
	width: 42%;
}
.click_attention {
    width: 214px;
    height: 182px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 64%;
    margin: auto;
    z-index: 100;
    pointer-events: none;
}
.click_attention img {
    width: 100%;
}
.click_attention p {
	font-size: 14px;
	text-align: center;
	margin: 15px 0 0;
	font-weight: 700;
}
img.pointer {
	width: 100%;
}
.osechi_link span {
	width: 6%;
	display: block;
	height: auto;
	cursor: pointer;
}
.osechi_link .Tab1_box_01 {
	position: absolute;
    top: 12%;
    left: 45%;
}
.osechi_link .Tab1_box_02 {
	position: absolute;
    top: 30%;
    right: 36%;
}
.osechi_link .Tab1_box_03 {
	position: absolute;
    top: 39%;
    left: 38%;
}
.osechi_link .Tab1_box_04 {
	position: absolute;
	top: 45%;
    right: 39%;
}
.osechi_link .Tab1_box_05 {
	position: absolute;
    top: 53%;
    left: 46%;
}
.osechi_link .Tab1_box_06 {
	position: absolute;
    top: 62%;
    right: 36%;
}
.osechi_link .Tab1_box_07 {
	position: absolute;
    top: 69%;
    left: 46%;
}
.osechi_link .Tab1_box_08 {
	position: absolute;
    top: 83%;
    right: 37%;
}
.osechi_link .Tab1_box_09 {
	position: absolute;
    top: 55.6%;
    right: 38.5%;
}
.osechi_link .Tab1_box_10 {
	position: absolute;
    top: 75.4%;
    right: 16%;
}
.osechi_link .Tab1_box_11 {
	position: absolute;
    top: 47.9%;
    right: 23.8%;
}
.osechi_link .Tab1_box_12 {
	position: absolute;
    top: 28.8%;
    left: 28%;
}
.osechi_link .Tab1_box_13 {
	position: absolute;
    top: 30.8%;
    left: 44.2%;
}

.osechi_link .Tab1_box_14 {
	position: absolute;
    left: 19%;
    top: 14%;
}
.osechi_link .Tab1_box_15 {
	position: absolute;
    top: 30%;
    left: 25%;
}
.osechi_link .Tab1_box_16 {
	position: absolute;
	top: 43%;
    left: 8%;
}
.osechi_link .Tab1_box_17 {
	position: absolute;
	top: 52%;
    left: 19%;
}
.osechi_link .Tab1_box_18 {
	position: absolute;
    top: 66%;
    left: 19%;
}
.osechi_link .Tab1_box_19 {
	position: absolute;
    top: 79%;
    left: 27%;
}
.osechi_link .Tab1_box_20 {
	position: absolute;
    top: 43.5%;
    left: 34.8%;
}
.osechi_link .Tab1_box_21 {
	position: absolute;
    top: 12%;
    left: 45%;
}
.osechi_link .Tab1_box_22 {
	position: absolute;
    top: 55.6%;
    right: 38.5%;
}
.osechi_link .Tab1_box_23 {
	position: absolute;
    top: 75.4%;
    right: 16%;
}
.osechi_link .Tab1_box_24 {
	position: absolute;
    top: 47.9%;
    right: 23.8%;
}
.osechi_link .Tab1_box_25 {
	position: absolute;
    top: 28.8%;
    left: 28%;
}
.osechi_link .Tab1_box_26 {
	position: absolute;
    top: 30.8%;
    left: 44.2%;
}

.osechi_link .Tab1_box_27 {
	position: absolute;
    right: 24%;
    top: 13%;
}
.osechi_link .Tab1_box_28 {
	position: absolute;
    top: 31%;
    right: 8%;
}
.osechi_link .Tab1_box_29 {
	position: absolute;
	top: 45%;
    right: 31%;
}
.osechi_link .Tab1_box_30 {
	position: absolute;
	top: 57%;
    right: 15%;
}
.osechi_link .Tab1_box_31 {
	position: absolute;
    top: 78%;
    right: 31%;
}
.osechi_link .Tab1_box_32 {
	position: absolute;
    top: 73%;
    right: 12%;
}
.osechi_link .Tab1_box_33 {
	position: absolute;
    top: 43.5%;
    left: 34.8%;
}
.osechi_link .Tab1_box_34 {
	position: absolute;
    top: 12%;
    left: 45%;
}
.osechi_link .Tab1_box_35 {
	position: absolute;
    top: 55.6%;
    right: 38.5%;
}
.osechi_link .Tab1_box_36 {
	position: absolute;
    top: 75.4%;
    right: 16%;
}
.osechi_link .Tab1_box_37 {
	position: absolute;
    top: 47.9%;
    right: 23.8%;
}
.osechi_link .Tab1_box_38 {
	position: absolute;
    top: 28.8%;
    left: 28%;
}
.osechi_link .Tab1_box_39 {
	position: absolute;
    top: 30.8%;
    left: 44.2%;
}

.osechi_link .Tab1_box_40 {
	position: absolute;
    top: 30.8%;
    left: 44.2%;
}

.osechi_link .Tab2_box_01 {
	position: absolute;
    top: 40.5%;
    right: 45%;
}
.osechi_link .Tab2_box_02 {
    position: absolute;
    top: 44%;
    left: 15%;
}
.osechi_link .Tab2_box_03 {
    position: absolute;
	top: 43%;
    right: 17%;
}
.osechi_link .Tab2_box_04 {
    position: absolute;
    top: 63%;
    right: 47%;
}
.osechi_link .Tab2_box_05 {
    position: absolute;
    top: 19%;
    left: 20%;
}
.osechi_link .Tab2_box_06 {
    position: absolute;
    top: 16%;
    right: 24%;
}
.osechi_link .Tab2_box_07 {
	position: absolute;
    top: 78%;
    left: 32%;
}
.osechi_link .Tab2_box_08 {
	position: absolute;
    top: 25%;
    left: 46%;
}
.osechi_link .Tab2_box_09 {
	position: absolute;
    top: 11%;
    left: 17%;
}
.osechi_link .Tab2_box_10 {
    position: absolute;
    top: 64%;
    left: 25%;
}
.osechi_link .Tab2_box_11 {
	position: absolute;
    top: 67%;
    right: 28%;
}
.osechi_link .Tab2_box_12 {
    position: absolute;
    top: 70%;
    left: 52%;
}
.osechi_link .Tab2_box_13 {
	position: absolute;
    top: 82%;
    left: 42%;
}
.osechi_link .Tab2_box_14 {
    position: absolute;
    top: 11%;
    left: 53%;
}
.osechi_link .Tab2_box_15 {
    position: absolute;
    top: 86%;
    right: 29%;
}

.osechi_link .Tab3_box_01 {
	position: absolute;
    top: 81.5%;
    left: 20%;
}
.osechi_link .Tab3_box_02 {
    position: absolute;
	top: 82%;
    right: 33%;
}
.osechi_link .Tab3_box_03 {
    position: absolute;
	top: 72%;
    left: 47%;
}
.osechi_link .Tab3_box_04 {
    position: absolute;
    top: 22%;
    right: 42%;
}
.osechi_link .Tab3_box_05 {
    position: absolute;
    top: 47%;
    right: 10%;
}
.osechi_link .Tab3_box_06 {
    position: absolute;
    top: 7%;
    left: 20%;
}
.osechi_link .Tab3_box_07 {
	position: absolute;
    top: 18%;
    right: 6%;
}
.osechi_link .Tab3_box_08 {
	position: absolute;
    top: 7.8%;
    right: 19%;
}
.osechi_link .Tab3_box_09 {
	position: absolute;
    top: 82%;
    right: 8%;
}
.osechi_link .Tab3_box_10 {
    position: absolute;
    top: 46%;
    left: 19%;
}
#Tab2 .osechi_tab_attention,
#Tab3 .osechi_tab_attention {
	color: #ffffff;
}
.Tab3_box_10_sp {
	position: relative;
}
.swipe {
	max-width: 500px;
	position: relative;
	overflow: scroll;
	width: 100%;
	margin: 0 auto;
	display: flex;
}
.swipe p {
	width: 1000px;
	height: 300px;
}
.swipe img {
	display: block;
}
.swipe_icon {
	position: absolute;
	top: 9%;
    border: 0;
    right: 5px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
	pointer-events: none;
}
.swipe_icon img {
	width: 100%;
}

@media screen and (max-width: 1400px) {
	.osechi_benefit > div + div {
		/*margin-top: -18px;*/
	}
	.osechi_benefit img.explanation {
		width: 80%;
	}
	.osechi_benefit img.character_ochaco {
		width: 146px;
        right: -87px;
        top: 49px;
	}
	.osechi_benefit img.character_deku {
		width: 203px;
        left: -128px;
	}
	.osechi_benefit img.character_todoroki {
		width: 191px;
        right: -104px;
	}
	.osechi_benefit img.character_bakugo {
		width: 261px;
        left: -159px;
    }
	.osechi_benefit img.character_kirishima {
		width: 221px;
        right: -89px;
	}
	.osechi_benefit img.character_joro {
		width: 238px;
        left: -135px;
	}
	.osechi_benefit > div + div.benefit_4 {
		/*margin-top: -42px;*/
	}
}

@media screen and (max-width: 1200px) {
	.p_0_20 {
		padding: 0 20px;
	}
	.tab-content-title {
		/*padding: 0 20px;*/
	}
}

@media screen and (max-width: 1150px) {
	.osechi_benefit img.explanation {
		width: 75%;
	}
	.osechi_benefit img.character_ochaco {
		width: 135px;
        right: -37px;
	}
	.osechi_benefit img.character_deku {
        width: 174px;
        left: -71px;
	}
	.osechi_benefit img.character_todoroki {
		width: 169px;
        right: -34px;
	}
	.osechi_benefit img.character_bakugo {
		width: 218px;
        left: -88px;
	}
	.osechi_benefit img.character_kirishima {
		width: 212px;
        right: -40px;
	}
	.osechi_benefit img.character_joro {
		width: 213px;
        left: -78px;
	}
}

@media screen and (max-width: 1036px) {
	.p_0_18 {
		/*padding: 0 18px;*/
	}
}

/* SP */
@media screen and (max-width: 768px) {
	.osechi_main{
		/*padding-top: 24px;*/
	}
	.kv_icon1 {
    width: calc(62 / 365 * 100vw) !important;
    position: absolute;
    top: 18px;
    left: 2%;
	}
	.kv_icon2 {
    width: calc(60 / 365 * 100vw) !important;
    position: absolute;
    top: 14px;
    right: 2%;
	}
	.osechi_wrapper {
		margin-bottom: -350px;
	}
    .osechi_wrapper .pc {
        display: none;
        visibility: hidden;
    }

    .osechi_wrapper .sp {
        display: block;
        visibility: visible;
        margin: auto;
    }

    .osechi_intro_tab_wrapper {
        /*top: -320px;*/
        margin: auto;
        padding-bottom: 60px;
    }

	.osechi_benefit {
		/*padding: 44px 0;*/
		background-size: 346px auto;
		/*margin-top: 24px;*/
	}

	.osechi_benefit img.explanation{
		width: 100% !important;
	}

	.osechi_benefit > div + div.benefit_3 {
		/*margin-top: 27px;*/
	}

	.osechi_benefit > div + div.benefit_4 {
		/*margin-top: 27px;*/
	}

	.osechi_intro {
		padding: 28px 0 0;
        padding-bottom: 277px;
	}

	.osechi_intro2 > p {
    max-width: 85%;
    margin: 8px auto 64px;
    padding: 14px 14px 0;
    font-size: 18px;
	}

	.tabs{
	justify-content: space-evenly;
	}

	.osechi_intro img {
    max-width: 85%;
	}

    div.space-50,div.space-20 {
        width: 7px;
    }

    .tab-content-title img {
        width: 100%;
    }

    .tab-button {
        /*border-radius: 7px 7px 0 0;*/
        max-width: 42%;
        font-size: 16px;
		height:  calc(32 / 365 * 100vw)
    }

    .tab-button > p {
    padding-left:  calc(50 / 365 * 100vw);
    }

    .tab-button.tab1,.tab-button.tab2{
        background-size: 100%;
    }

	.tab-button.active {
		height: calc(37 / 365 * 100vw)
	}

	div.black-boder {
    height: 0;
	}

	.tab-content .swiper-button-next, .tab-content .swiper-button-prev {
		top: var(--swiper-navigation-top-offset, 50%);
	}
	
	.tab-content-title {
        padding: 0;
        margin: 0;
        max-width: 100%;
		/*margin-bottom: 40px;*/
    }
    
    #Tab1 .tab-content-title img {
    max-width: 96%;
    }

	.tabs .tab_title {
		margin-bottom: 15px;
		width: 77%;
	}

	.osechi_intro_bg{
		background-position: center top -300px;
	}

    .osechi_link .Tab1_box_01 {
	position: absolute;
    top: 9%;
    left: 32%;
}
    .osechi_link .Tab1_box_02 {
        position: absolute;
        top: 24%;
        right: 56%;
    }
    .osechi_link .Tab1_box_03 {
        position: absolute;
        top: 32%;
        left: 27%;
    }
    .osechi_link .Tab1_box_04 {
        position: absolute;
        top: 37%;
        right: 57%;
    }
    .osechi_link .Tab1_box_05 {
        position: absolute;
        top: 47%;
        left: 32%;
    }
    .osechi_link .Tab1_box_06 {
        position: absolute;
        top: 54%;
        right: 55%;
    }
    .osechi_link .Tab1_box_07 {
        position: absolute;
        top: 62%;
        left: 32%;
    }
    .osechi_link .Tab1_box_08 {
        position: absolute;
        top: 77%;
        right: 57%;
    }
    .osechi_link .Tab1_box_14 {
	position: absolute;
    left: 12%;
    top: 9%;
}
    .osechi_link .Tab1_box_15 {
        position: absolute;
        top: 25%;
        left: 15%;
    }
    .osechi_link .Tab1_box_16 {
        position: absolute;
        top: 36%;
        left: 6%;
    }
    .osechi_link .Tab1_box_17 {
        position: absolute;
        top: 45%;
        left: 12%;
    }
    .osechi_link .Tab1_box_18 {
        position: absolute;
        top: 61%;
        left: 12%;
    }
    .osechi_link .Tab1_box_19 {
        position: absolute;
        top: 75%;
        left: 17%;
}
    .osechi_link .Tab1_box_27 {
        position: absolute;
        right: 47%;
        top: 8%;
    }
    .osechi_link .Tab1_box_28 {
        position: absolute;
        top: 27%;
        right: 35%;
    }
    .osechi_link .Tab1_box_29 {
        position: absolute;
        top: 38%;
        right: 50%;
    }
    .osechi_link .Tab1_box_30 {
        position: absolute;
        top: 46%;
        right: 39%;
    }
    .osechi_link .Tab1_box_31 {
        position: absolute;
        top: 65%;
        right: 50%;
}
    .osechi_link .Tab1_box_32 {
        position: absolute;
        top: 68%;
        right: 39%;
}
	.osechi_icon1{
	width: calc(90 / 365 * 100vw) !important;
    left: 4px;
    top: 55%;
	}

	.osechi_icon2{
	width: calc(90 / 365 * 100vw) !important;
    right: 4px;
    top: 55%;
	}

	.osechi2_icon2{
	width: calc(82 / 365 * 100vw) !important;
    right: 4px;
    top: 55%;
	}

	.osechi3_icon2{
	width: calc(78 / 365 * 100vw) !important;
    right: 0;
    top: 55%;
	}
    .icon_rei {
    top: calc(212 / 365 * 100vw);
    left: calc(230 / 365 * 100vw);
    }
    .icon_kaworu {
    top: 115px;
    right: -16px;
    }

	.tab-content .swiper_attention {
		margin: 0 auto 13px;
		font-size: 12px;
		font-weight: 700;
	}

    .oshinagaki, .osechi_maker {
        top: -320px;
    }
	
	.oshinagaki img {
		width: 72%;
	}

	.oshina_title {
    font-size: 16px;
	text-align: center;
	}

	.oshinagaki {
		padding: 8px 20px 24px;
        font-size: 12px;
		text-align: left;
	}

	.osechi_main .main_01 {
		/*margin-bottom: 8px;*/
	}
	
	.osechi_maker {
		padding: 0 0 35px;
	}

	.tab-content-title img.title_ju {
		margin-bottom: 0;
	}
	
	/* おせち紹介 */
	.area_tab_content {
		display: block;
	}
	.area_tab_content .osechi_link {
		width: 90%;
/*		margin: 0 auto;*/
		margin: 0 auto 20px;
	}
	.osechi_detail {
		width: 84%;
		margin: 0 auto 20px;
	}
	.tab-content {
		background-size: 182%;
	}
	.click_attention {
		width: 36%;
        left: 0;
        height: fit-content;
        top: 0;
        bottom: -88%;
	}
	.click_attention p {
		font-size: 12px;
		margin: 9px 0 0;
	}
	.osechi_benefit > div + div {
		/*margin-top: 27px;*/
	}
    .sp_marginB16{
    margin-bottom: 16px;
    }
}

/* バスケット風ジャンプ */
@keyframes basket_jump{

    /* 待機 */
    0%,15%,100%{
        transform:translateY(0) scale(1);
    }

    /* しゃがむ */
    20%{
        transform:translateY(5px) scaleY(0.9);
    }

    /* ジャンプ */
    40%{
        transform:translateY(-25px) scale(1.05);
    }

    /* 着地 */
    50%{
        transform:translateY(0) scale(1);
    }
}

/* SP */
@media screen and (max-width:768px){

    .jump_title_box{
        gap:8px;
    }

    .jump_player{
        width:60px;
    }
}

.jump_player{
	animation: basket_jump 3s ease-in-out infinite;
}

@keyframes basketJumpLeft{

    /* 待機 */
    0%,15%,100%{
        transform:translateY(0) scaleY(1);
    }

    /* しゃがむ */
    20%{
        transform:translateY(3px) scaleY(0.92);
    }

    /* ジャンプ */
    35%{
        transform:translateY(-25px) scaleY(1.05);
    }

    /* 着地 */
    45%{
        transform:translateY(0) scaleY(1);
    }
}

@keyframes basketJumpRight{

    0%,55%,100%{
        transform:translateY(0) scaleY(1);
    }

    60%{
        transform:translateY(3px) scaleY(0.92);
    }

    75%{
        transform:translateY(-25px) scaleY(1.05);
    }

    85%{
        transform:translateY(0) scaleY(1);
    }
}
.chara_right {
    animation: basketJumpRight 3s infinite;
    transform-origin: center bottom;
}
.chara_left {
    animation: basketJumpLeft 3s infinite;
    transform-origin: center bottom;
}

.swing {
  transform-origin: top center;
  animation: swing 3s ease-in-out infinite;
}

.swing1 {
  animation-duration: 5.8s;
}

.swing2 {
  animation-duration: 3.5s;
  animation-delay: 0.7s;
}

.swing3 {
  animation-duration: 2.3s;
  animation-delay: 1.4s;
}

.swing4 {
  animation-duration: 1.3s;
  animation-delay: 1.8s;
}

@keyframes swing {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-2deg); }
  40%  { transform: rotate(1.5deg); }
  60%  { transform: rotate(-1deg); }
  80%  { transform: rotate(0.5deg); }
  100% { transform: rotate(0deg); }
}