@charset "Shift_JIS";


/*==============================================
#xmas 設定 STR
================================================*/
.header-info-red {
    display: none;
}

main#wrapper {
    margin: 0;
    padding: 0;
    max-width: none;
}
#xmas * {
    box-sizing: border-box;
}

#xmas {
    color: #fff;
    text-align: center;
    background-color: #bb3343;
    background-image:
    radial-gradient(#b82b3b 25%, transparent 20%),
    radial-gradient(#b82b3b 25%, transparent 20%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    font-size: 16px;
    
}
#xmas .pc_none {
    display: none;
}
#xmas img {
    width: 100%;
    height: auto;
    display: block;
}
#xmas a {
    display: block;
}
main#wrapper {
    margin: 0;
    padding: 0;
    max-width: none;
}
/*==============================================
#xmas 設定 END
================================================*/

/*==============================================
#xmas 大枠  STR
================================================*/
#xmas section{
    width: 100%;
    margin: 0 auto;
    padding:3rem 0;
    position: relative;
}
#xmas section.top{
    padding:0;
}
#xmas .inner{
    max-width:1000px;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 90%;
}
#xmas .bg-white{
    background:#f4f8f9;
    max-width:1000px;
    margin: 0 auto;
    padding-bottom: 1.5rem;
    width: 90%;
    padding: 0 2rem 2rem;
}
#xmas .bg-green{
    background:repeating-linear-gradient(-45deg, #297571, #297571 10px, #307975 0, #307975 20px);
}
#xmas .bg-blue{
    background:repeating-linear-gradient(-45deg, #2b588a, #2b588a 10px, #325d8e 0, #325d8e 20px);
}
#xmas .bg-inner{
    border-radius: 10px;
    padding:.5rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    /* width: 94%; */
    margin: 0 auto;
}
/*==============================================
#xmas 大枠 END
================================================*/

/*==============================================
#xmas 背景装飾  STR
================================================*/
@media screen and (max-width: 1400px) {
    #xmas .bg-deco{
        display: none;
    }
}
    #xmas .bg-deco span{
        position: absolute;
        color: #fff9ee;
        opacity: .2;
    }
    /*左*/
    #xmas .bg-deco.left span:nth-of-type(1){
        top: 7rem;
        left: 7rem;
        font-size: 8rem;
        filter: blur(3px);
    }
    #xmas .bg-deco.left span:nth-of-type(2){
        top: 25rem;
        left: 14rem;
        font-size: 5rem;
        filter: blur(2px);
    }
    #xmas .bg-deco.left span:nth-of-type(3){
        top:37rem;
        left: 5rem;
        font-size: 5rem;
        filter: blur(3px);
        opacity: .1;
    }
    #xmas .bg-deco.left span:nth-of-type(4){
        top:50rem;
        left: 14rem;
        font-size: 5rem;
        filter: blur(2px);
        color: #fff9ee;
    }
    #xmas .bg-deco.left span:nth-of-type(5){
        top: 66rem;
        left: 7rem;
        font-size: 8rem;
        filter: blur(3px);
    }
    #xmas .bg-deco.left span:nth-of-type(6){
        top: 84rem;
        left: 14rem;
        font-size: 5rem;
        filter: blur(2px);
        opacity: .1;
    }
    /*右*/
    #xmas .bg-deco.right span:nth-of-type(1){
        top: 1rem;
        right: 7rem;
        font-size: 8rem;
        filter: blur(3px);
    }
    #xmas .bg-deco.right span:nth-of-type(2){
        top: 19rem;
        right: 14rem;
        font-size: 5rem;
        filter: blur(2px);
    }
    #xmas .bg-deco.right span:nth-of-type(3){
        top:31rem;
        right: 5rem;
        font-size: 5rem;
        filter: blur(3px);
    }
    #xmas .bg-deco.right span:nth-of-type(4){
        top:44rem;
        right: 14rem;
        font-size: 5rem;
        filter: blur(2px);
        color: #fff9ee;
        opacity: .1;
    }
    #xmas .bg-deco.right span:nth-of-type(5){
        top: 60rem;
        right: 7rem;
        font-size: 8rem;
        filter: blur(3px);
    }
    #xmas .bg-deco.right span:nth-of-type(6){
        top: 78rem;
        right: 14rem;
        font-size: 5rem;
        filter: blur(2px);
        opacity: .1;
    }
/*==============================================
#xmas 背景装飾  END
================================================*/

/*==============================================
#xmas リボン 見出し  STR
================================================*/
#xmas .midashi{
    display: flex;
    justify-content: center;
    position: relative;
    text-align: center;
    color: #fff;
    background: #fa4141;
    align-items: center;
    width: 97%;
    margin:.8rem auto 0 auto;
    height: 3.5rem;
    gap: 1rem;
}
#xmas .midashi::before,
#xmas .midashi::after {
    position: absolute;
    top: 0;
    display: block;
    content: '';
}
#xmas .midashi::before {
    left: -1rem;
    border-left-width: 8px !important;
    border-left-color: transparent !important;
}
#xmas .midashi::after {
    right: -1rem;
    border-right-width: 8px !important;
    border-right-color: transparent !important;
}
/*背景カラー 黄色*/
#xmas .midashi.ribbon1{
    background: #f5e2c1;
}
#xmas .midashi.ribbon1::before,
#xmas .midashi.ribbon1::after {
    border: 1.8rem solid #f5e2c1;
}
#xmas .midashi.ribbon1 h2,
#xmas .midashi.ribbon1 .small{
    color: #297571;
}
#xmas .midashi .small{
    font-size: 1.1rem;
    font-weight: lighter;
    display: contents;
}
/*背景カラー 青色*/
#xmas .midashi.ribbon2{
    background: #2b588a;
}
#xmas .midashi.ribbon2::before,
#xmas .midashi.ribbon2::after {
    border: 1.8rem solid #2b588a;
}
/*背景カラー 緑色*/
#xmas .midashi.ribbon3{
    background: #297571;
}
#xmas .midashi.ribbon3::before,
#xmas .midashi.ribbon3::after {
    border: 1.8rem solid #297571;
}
/*背景カラー 黄緑色*/
#xmas .midashi.ribbon4{
    background: #8e9000;
}
#xmas .midashi.ribbon4::before,
#xmas .midashi.ribbon4::after {
    border: 1.8rem solid #8e9000;
}
/*ベース見出しテキストカラー*/
#xmas .midashi h2{
    color: #fcf7e3;
    font-size: 1.3rem;
    position: relative;
    display: block;
    padding-bottom: .1rem;
}
/*==============================================
#xmas リボン 見出し  END
================================================*/

/*==============================================
#xmas 装飾  STR
================================================*/
/*イラスト*/
#xmas .deco {
    width: 2.5rem;
    margin-top: -.2rem;
    z-index: 2;
}
#xmas .deco.kazari-left {
    width: 8%;
    position: absolute;
    top: -19%;
    left: 23%;
}
#xmas .deco.kazari-right {
    width: 5%;
    position: absolute;
    top: 0;
    right:23%;
}
/*結晶*/
#xmas .crystal{
    display: flex;
}
#xmas .crystal span:nth-child(odd) {
    margin:-.8rem 1rem 0 0;
}
#xmas .crystal span{
    font-size: 2rem;
    color: rgb(255 255 255 / 60%);
}
/*==============================================
#xmas 装飾  END
================================================*/

/*==============================================
#xmas 見出し  STR
================================================*/
#xmas .midashi-main{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:1rem;
}
#xmas .midashi-main h4{
    color: #fff;
    font-size: 2.3rem;
}
/*キャラクター名*/
#xmas .midashi-sub{
    display: flex;
    justify-content:space-between;
    padding-top: 1.5rem;
}
#xmas section .midashi-sub.top {
    padding-top: .5rem;
}
#xmas .midashi-sub h6{
    color: #fff;
    font-size: 1.5rem;
    border-left: 6px solid #fff;
    padding-left: 1.2rem;
}
/*もっとみる*/
#xmas .midashi-sub .more{
    padding:0 1.5rem 0 1.2rem;
    border: 2px solid rgb(255 255 255 / 80%);
    border-radius: 100vw;
    font-size:.9rem;
    position: relative;
    display: flex;
    align-items: center;
}
#xmas .midashi-sub .more::after {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 4px;
    height: 4px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    margin: auto;
    bottom: 0;
    top: 0;
    right: 8%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: 0.3s all;
}
#xmas .midashi-sub .more:hover{
    color: #fff !important;
    background:rgb(218 255 107 / 28%);
}
/*見出し上テキスト*/
#xmas .midashi-osusume{
    font-size: 1.3rem;
    margin-bottom: -2rem;
}
/*==============================================
#xmas 見出し END
================================================*/

/*==============================================
#xmas ナビ  STR
================================================*/
#xmas .navi-list{
    display: flex ;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
}
#xmas .navi-list.col_4 li{
    width: calc(calc(100% - 1.5rem) / 4);
}
#xmas .navi-list.col_5 li{
    width: calc(calc(100% - 2rem) / 5);
}
#xmas .navi-list.col_6 li{
    width: calc(calc(100% - 2.5rem) / 6);
}
#xmas .navi-list li a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: 0.3s all;
    position: relative;
    height: 100%;
    background: #fcf7e3;
    border: 2px solid #e8d48e;
    border-radius: 7px;
    padding: 1rem 0;
}
#xmas .navi-list h3{
    color: #912727;
    font-size: 1rem;
    line-height: 1.3em;
}
#xmas .navi-list li a::after {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 4px;
    height: 4px;
    border-top: 2px solid #912727;
    border-right: 2px solid #912727;
    margin: auto;
    bottom: 0;
    top: 0;
    right: 5%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: 0.3s all;
}
/*hover*/
#xmas .navi-list li a:hover{
    background: #d32c3f;
    box-shadow: 0 0 5px #ffff9d;
}
#xmas .navi-list a:hover h3{
    color: #fff;
}
#xmas .navi-list li a:hover::after {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
/*==============================================
#xmas ナビ END
================================================*/

/*==============================================
#xmas 商品枠  STR
================================================*/
#xmas .item-list{
    display: flex ;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin: 0 auto;
}
#xmas .item-list li{
    width: calc(calc(100% - 6rem) / 4);
}
#xmas .item-list li a{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: 0.3s all;
    position: relative;
    height: 100%;
}
#xmas .item-list .flex_l,
#xmas .item-list .flex_r{
    width: 100%;

}
#xmas .item-list .flex_r{
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: .8rem;
}
/*商品画像*/
#xmas .item-list .thum{
    border-radius: 100vw;
    background: #fff;
    transition: 0.3s all;
}
#xmas .item-list .thum img{
    border-radius: 100vw;
    border: 3px solid #f5e2c1;
    transition: 0.3s all;
}
/*売価*/
#xmas .item-list .price{
    color:#f5e2c1;
    font-size: 1.8rem;
    font-family: "Lato";
    font-weight:bold;
    padding: .3rem;
    border-bottom: 1px dashed;
}
/*対象年齢*/
#xmas .item-list .age{
    color: #f5e2c1;
    font-size: .9rem;
    background: rgb(255 255 255 / 10%);
    border-radius: 3px;
    padding: .1rem 0;
    font-weight: lighter;
}
/*商品名*/
#xmas .item-list h5{
    color: #f5e2c1;
    font-size: .9rem;
    font-weight: lighter;
    flex-grow: 1;
    line-height: 1.3em;

}
/*商品詳細はこちら 通常*/
#xmas .item-list .btn{
    font-size: .9rem;
    padding: .4rem 0;
    background: #f7e7b0;
    width: 100%;
    border-radius: 100vw;
    border:2px solid #edc24f;
    color: #403a3b;
    position: relative;
    transition: 0.3s all;
}
#xmas .item-list .btn::after {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 4px;
    height: 4px;
    border-top: 2px solid #403a3b;
    border-right: 2px solid #403a3b;
    margin: auto;
    bottom: 0;
    top: 0;
    right: 5%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: 0.3s all;
}
/*商品詳細はこちら 背景カラー赤*/
#xmas #award .item-list .btn{
    background: #c11a36;
    color: #f5e2c1;
}
#xmas #award .item-list .btn:after {
    border-top: 2px solid #f5e2c1;
    border-right: 2px solid #f5e2c1;
}
/*もっとみる*/
#xmas .cate-more {
    border: 2px solid #fff;
    border-radius: 100vw;
    width: 60%;
    margin: 0 auto;
    padding: .7rem 0;
    position: relative;
}
#xmas .cate-more::after {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 4px;
    height: 4px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    margin: auto;
    bottom: 0;
    top: 0;
    right: 5%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: 0.3s all;
}
/*おもちゃ一覧 もっとみる*/
#xmas .list-more {
    border: 4px solid #912727;
    border-radius: 100vw;
    width: 40%;
    margin: 2rem auto 0 auto;
    padding: .7rem 0;
    position: relative;
    background: #ffe871;
    font-size: 1.5rem;
    color: #912727;
    font-weight: bold;
    box-shadow: 0 5px 0 #912727;
    position: relative;
}
#xmas .list-more::after {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 6px;
    height: 6px;
    border-top: 2px solid #912727;
    border-right: 2px solid #912727;
    margin: auto;
    bottom: 0;
    top: 0;
    right: 5%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: 0.3s all;
}
/*hover*/
#xmas .item-list li a:hover{
    transform: translateY(-3px);
}
#xmas .item-list a:hover .thum{
    border-radius: 10px;
    box-shadow: 0 0 8px #fff57d;
}
#xmas .item-list a:hover .thum img{
    border-radius:10px;
    border: 3px solid #f5e2c1;
}
#xmas .item-list a:hover .btn,
#xmas #award .item-list a:hover .btn{
    background: transparent;
    color: #f7e7b0;
    box-shadow: 0 0 8px #fff57d;
}
#xmas .item-list a:hover .btn::after {
    border-top: 2px solid #f7e7b0;
    border-right: 2px solid #f7e7b0;
}
#xmas .cate-more:hover {
    color: #fff !important;
    background: rgb(218 255 107 / 28%);
}
#xmas .list-more:hover {
    box-shadow: none;
    transform: translateY(2px);
    color: #912727 !important;
    opacity: .9;

}
/*==============================================
#xmas 商品枠 END
================================================*/

/*==============================================
#xmas 日本おもちゃ大賞アイコン  STR
================================================*/
#xmas .item-list .icon-taisho{
    position: absolute;
    width: 25%;
    top: 0;
    right: 0;
}
#xmas .item-list .icon-taisho img{
    border-radius: 5px;
}
/*==============================================
#xmas 日本おもちゃ大賞アイコン END
================================================*/

/*==============================================
#xmas バナー  STR
================================================*/
#xmas .feature-title{
    font-size: 1.1rem;
    color: #fff;
}
#xmas .feature-list{
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}
#xmas .feature-list.col_1 li{
    width: 100%;
}
#xmas .feature-list.col_2 li{
    width: calc(calc(100% - 2%) / 2);
}
#xmas .feature-list.col_3 li{
    width: calc(calc(100% - 4%) / 3);
}
#xmas .feature-list li a:hover{
    box-shadow: 0 0 10px #ffff9d;
    transform: translateY(-2px);
}
/*==============================================
#xmas バナー END
================================================*/

/*==============================================
#xmas クーポン  STR
================================================*/
#xmas .coupon-title{
    color: #b52a3f;
    font-size: 1.5rem;
    font-weight: bold;
}
#xmas .coupon-area{
    margin-bottom: 1.5rem;
    background: #b52a3f;
    padding: 1rem;
}
#xmas .coupon-area li a{
    background: #fce466 ;
    background: repeating-linear-gradient(-45deg, #ffe871, #ffe871 10px, #fce466 0, #fce466 20px);
    padding: .5rem;
    display: flex;
    border-radius: 6px;
    flex-direction: column;
    animation: yureru-updown 2s infinite;
}
@keyframes yureru-updown {
	0% {
		transform: translateY(1px);
	}
	5% {
		transform: translateY(-1px);
	}
	10% {
		transform: translateY(1px);
	}
	15% {
		transform: translateY(-1px);
	}
	20% {
		transform: translateY(1px);
	}
	25% {
		transform: translateY(-1px);
	}
	30% {
		transform: translateY(0px);
	}
}
#xmas .coupon-flex{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;   
}
#xmas .coupon-gentei{
    font-size: 1.4rem;
    color: #b52a3f;
    font-weight: bold;
}
#xmas .coupon-txt{
    font-size: 1.8rem;
    color: #b52a3f;
    font-weight: bold;
}
#xmas .coupon-txt .small{
    font-size: 1rem;
}
#xmas .coupon-txt .big{
    font-size: 3.5rem;
    font-family: Lato;
    font-weight: bold;
    line-height: .9;
}
#xmas .coupon-btn{
    background: #b52a3f;
    font-size: 1.2rem;
    padding: .4rem 0;
    border-radius: 6px;
    width: 30%;
    position: relative;
    color: #fce466;
}
#xmas .coupon-btn::after {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 4px;
    height: 4px;
    border-top: 2px solid #fce466;
    border-right: 2px solid #fce466;
    margin: auto;
    bottom: 0;
    top: 0;
    right: 5%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: 0.3s all;
}
/*hover*/
#xmas .coupon-area li a:hover{
    color: #fff !important;
    transform: translateY(1px);
}
/*==============================================
#xmas クーポン END
================================================*/

/*==============================================
#xmas 戻るボタン  STR
================================================*/
#xmas .pagetop {
    position: fixed;
    bottom: 3rem;
    right: 3rem;
	z-index: 3;
}
#xmas .pagetop a {
	display: flex;
	justify-content: center;
    align-items: center;
    text-align: center;
	vertical-align: middle;
	color: #fff;
	font-size:.7rem;
	font-weight: 700;
	background-color: #222222c7;
	border-radius: 80px;
	width:5rem;
	height:5rem;
    line-height: 1.3em;
    transition: 0.3s all;
}
#xmas .pagetop a:hover {
	color: #fff !important;
}
/*==============================================
#xmas 戻るボタン  END
================================================*/