@charset "UTF-8";
/* CSS Document */
/* ------------------------------
halloween
------------------------------ */
body#halloween #halloween_area{
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    font-weight: 500;
}
body#halloween #op_area,
body#halloween #section_ranking,
body#halloween #section_petitgift{
    background-color: #1D1A37;
}
body#halloween #op_area .op_heading{
    font-size: 1.8rem;
    color: #fff;
    font-weight: 700;
    line-height: 120%;
    text-align: center;
    padding-bottom: 10px;
}
body#halloween #halloween_area .link_btn,
body#halloween #halloween_area .more_btn_outer{
    margin: 0 auto;
    margin-top: 15px;
    text-align: center;
}
body#halloween #halloween_area .more_btn_outer p,
body#halloween #halloween_area .link_btn a{
    cursor: pointer;
    display: inline-block;
    color: #00134b;
    border: 1px solid #fff;
    padding: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.6rem;
    width: 100%;
    max-width: 550px;
    text-align: center;
    border-radius: 10px;
    background-size: auto auto;
    background-color: rgba(255, 200, 0, 1);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255, 215, 96, 1) 5px, rgba(255, 215, 96, 1) 10px );
}
body#halloween #halloween_area .more_btn_outer p:active,
body#halloween #halloween_area .link_btn a:active{
    color: #fff;
    background-color: #ff6400;
    border: 1px solid #ffc800;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255, 200, 0, 1) 5px, rgba(255, 200, 0, 1) 10px );
}
body#halloween #halloween_area .link_btn a h2{
    font-size: 1.6rem;
}
/*op_area*/
body#halloween #op_area{
    margin-top: 10px;
    background-color: #1D1A37;
}
body#halloween #op_area #title{
    max-width: 800px;
    margin: 0 auto;
}
/*ハロウィンランキング*/
body#halloween #section_ranking p.explanation::before,
body#halloween #section_ranking p.explanation::after{
    width: 13%;
    left: 0;
    top: 10%;
    background: no-repeat url(/images/halloween/2025/bg_mummy.svg);
}
body#halloween #section_ranking p.explanation::after{
    left: auto;
    right:0;
    top: 7%;
    transform: scale(-1, 1);
}
body#halloween .rank_products .ranking_slide {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
body#halloween .rank_products .ranking_slide_wrapper {
    height: calc(130px * 2);
    width: 100%;
    max-width: 900px;
    position: relative;
    padding-bottom: 10px;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
}
body#halloween .rank_products .ranking_slide_wrapper ul.ranking_slide_inner {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 0;
    z-index: 0;
    counter-reset: number 0;
}
body#halloween .rank_products .ranking_slide_wrapper li:first-of-type {
    margin-left: 0;
}
body#halloween .rank_products .ranking_slide_wrapper li.rank_list {
    cursor: pointer;
    width: 190px;
    padding: 10px;
    margin-left: 20px;
    margin-right: 0;
    text-align: center;
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    color: #00134b;
}
body#halloween .rank_products .ranking_slide_wrapper li.rank_list a{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
body#halloween .rank_products .ranking_slide_wrapper li.rank_list:active img{
    opacity: 0.4;
}
body#halloween .rank_products .ranking_slide_wrapper li.rank_list:active p{
    color: #ffc800;
}
body#halloween .rank_products .link_btn,
body#halloween .section_petitgift_inner .link_btn{
    padding:0 20px;
}
body#halloween #section_ranking .rank_ribbon {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 10px;
    margin: 0;
    padding: 5px 0;
    z-index: 2;
    width: 40px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    background: #00134b;
}
body#halloween #section_ranking .rank_ribbon::after {
    border-left: 20px solid #00134b;
    border-right: 20px solid #00134b;
    border-bottom: 7px solid transparent;
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
}
body#halloween #section_ranking #rank_first{
    background-color: #ffc800;
}
body#halloween #section_ranking  #rank_first::after {
    border-left: 20px solid #ffc800;
    border-right: 20px solid #ffc800;
    border-bottom: 7px solid transparent;
}
body#halloween #section_ranking .ranking_slide_wrapper li .rank_img {
    width: 60%;
    margin: 0 auto;
    margin-bottom: 5px;
}
body#halloween .main_heading{
    font-size: 2.5rem;
    line-height: 120%;
    text-align: center;
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 1;
    padding-top: 32px;
}
body#halloween #halloween_area .main_heading::before{
    display: block;
    content: '';
    position: absolute;
    background: no-repeat url(/images/halloween/2025/bg_ghost.svg);
    background-size: contain;
    height: 40px;
    width: 20%;
    left: 40%;
    top: 0;
}
body#halloween p.explanation{
    color: #fff;
    text-align: center;
    line-height: 150%;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0 1em;
    max-width: 800px;
}
body#halloween #section_ranking,
body#halloween #section_original,
body#halloween #section_examples,
body#halloween #section_design,
body#halloween #section_guide,
body#halloween #section_petitgift,
body#halloween #section_flow{
    position: relative;
    width:100%;
    height:100%;
    margin-top: -5px;
    margin-bottom: -1px;
    padding-top: 50px;
    padding-bottom: 50px;
}
body#halloween #section_ranking p::before,
body#halloween #section_ranking p::after,
body#halloween #section_original p::before,
body#halloween #section_original p::after,
body#halloween #section_examples p::after,
body#halloween #section_design p::before,
body#halloween #section_design p::after,
body#halloween #section_guide p::before,
body#halloween #section_guide p::after,
body#halloween #section_petitgift p::before,
body#halloween #section_petitgift p::after{
    display: block;
    background-size: contain;
    content: '';
    position: absolute;
    height: 100px;
}

/* section_original */
body#halloween #section_original{
    background-color:#00134b;
}
body#halloween #section_original p.explanation::before,
body#halloween #section_original p.explanation::after{
    width: 25%;
    left: 3px;
    top: 0%;
    background: no-repeat url(/images/halloween/2025/bg_bat.svg);
}

body#halloween #section_original p.explanation::after{
    left:auto;
    right: 9px;
    top: 18px;
    transform: scale(-1, 1);
}
body#halloween #section_original ul{
    padding: 0 1em;
    margin: 0 auto;
    padding-bottom: 1em;
    max-width: 900px;
}
body#halloween #section_original li{
    background-color: #fff;
    color: #00134b;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 2em;
}
body#halloween #section_original li div.product_img{
    text-align: center;
}
body#halloween #section_original li img{
    width:90%;
}
body#halloween #section_original ul li div.product_explanation p{
    margin-top: 1em;
}
body#halloween #section_original ul li div.product_explanation p.yen{
    text-align: center;
    line-height: 130%;
    font-weight: 700;
    font-size: 2rem;
}
body#halloween #section_original ul li div.product_explanation p.sentence{
    text-align: justify;
    line-height: 150%;
}

/* section_petitgift */
body#halloween #section_petitgift{
    position: relative;
    padding: 0 10px;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
body#halloween #section_petitgift .section_petitgift_inner {
    max-width: 980px;
    margin: 0 auto;
}
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2{
    font-size: 2rem;
    text-align: center;
    color:#fff;
    line-height: 120%;
    position: relative;
}
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sweets::before,
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sweets::after{
    content: "";
    display: inline-block;
    position: absolute;
    background: url(/images/halloween/2025/candy02.png) no-repeat;
    top: 0;
    width: 59px;
    height: 100px;
    background-size: 65%;
}
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sweets::before{
    left: 20px;
}
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sweets::after{
    transform: scale(-1, 1);
    right: 20px;
}
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sundrygoods::before,
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sundrygoods::after{
    content: "";
    display: inline-block;
    position: absolute;
    background: url(/images/halloween/2025/hat01.png) no-repeat;
    top: 5px;
    width: 75px;
    height: 60px;
    background-size: 85%;
}
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sundrygoods::before{
    left: 20px;
}
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sundrygoods::after{
    transform: scale(-1, 1);
    right: 20px;
}
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_drink::before,
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_drink::after{
    content: "";
    display: inline-block;
    position: absolute;
    background: url(/images/halloween/2025/drink01.png) no-repeat;
    top: -5px;
    width: 31px;
    height: 75px;
    background-size: 80%;
}
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_drink::before{
    left: 45px;
}
body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_drink::after{
    transform: scale(-1, 1);
    right: 45px;
}
body#halloween #section_petitgift .section_petitgift_inner .petitgift_slide {
    position: relative;
    width: 100%;
}
body#halloween #section_petitgift .section_petitgift_inner .petitgift_slide_wrapper{
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    height: 340px;
}
body#halloween #section_petitgift ul{
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(1, auto);
    grid-auto-columns: 174px;
    margin-top: 20px;
}
body#halloween #section_petitgift li{
    padding: 5px;
    margin: 5px;
}
body#halloween #section_petitgift li img{
    margin: 0 auto;
    margin-bottom: 5px;
}
body#halloween #section_petitgift li a{
    color: #fff;
    font-size: 15px;
    line-height: 110%;
    text-decoration: none;
}
body#halloween #section_petitgift li a:active p,
body#halloween #section_petitgift li a:active img{
    opacity: 0.7;
}
body#halloween #section_petitgift li p.price{
    margin-top: 8px;
}
body#halloween #section_petitgift li p.text{
    font-size: 13px;
    margin-top: 8px;
}
body#halloween #section_petitgift .sweets,
body#halloween #section_petitgift .sundrygoods,
body#halloween #section_petitgift .drink{
    margin-top: 7em;
}
body#halloween #section_petitgift .sweets h2,
body#halloween #section_petitgift .sundrygoods h2,
body#halloween #section_petitgift .drink h2{
    line-height: 170%;
}
body#halloween #section_petitgift p.explanation::before,
body#halloween #section_petitgift p.explanation::after{
    width: 18%;
    left: 11%;
    top: 1.5%;
    background: no-repeat url(/images/halloween/2025/bg_pumpkin.svg);
}
body#halloween #section_petitgift p.explanation::after {
    left: auto;
    right: 5%;
    top: 0;
    transform: scale(-1, 1);
}

/* ------------------------------
相手別 ハロウィンプチギフト
------------------------------ */
body#halloween #section_recipient {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: -5px;
    margin-bottom: -1px;
    padding: 4rem 10px;
    background-color: #45235A;
}

body#halloween #section_recipient .section_recipient_inner {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

/* 説明文 */
body#halloween #section_recipient p.explanation {
    position: relative;
    color: #fff;
    text-align: center;
    line-height: 150%;
    margin: 40px auto;
    padding: 0 1em;
    max-width: 800px;
}

/* 大人向け・子供向けブロック */
body#halloween #section_recipient .recipient_adult,
body#halloween #section_recipient .recipient_child {
    position: relative;
}

body#halloween #section_recipient .recipient_child {
    margin-top: 7em;
}

/* H3見出し */
body#halloween #section_recipient .recipient_heading h3 {
    position: relative;
    color: #fff;
    font-size: 2rem;
    line-height: 140%;
    font-weight: 700;
    text-align: center;
    padding: 10px 70px;
}

/* 商品スライド */
body#halloween #section_recipient .petitgift_slide {
    position: relative;
    width: 100%;
}

body#halloween #section_recipient .petitgift_slide_wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 340px;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
}

body#halloween #section_recipient .petitgift_slide_outer {
    position: relative;
}

/* 商品一覧 */
body#halloween #section_recipient ul.halloween_petitgift {
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(1, auto);
    grid-auto-columns: 174px;
    margin-top: 20px;
}

body#halloween #section_recipient li.halloween_petitgift_item {
    padding: 5px;
    margin: 5px;
}

body#halloween #section_recipient li.halloween_petitgift_item img {
    display: block;
    margin: 0 auto 5px;
}

body#halloween #section_recipient li.halloween_petitgift_item a {
    color: #fff;
    font-size: 15px;
    line-height: 110%;
    text-decoration: none;
}

body#halloween #section_recipient li.halloween_petitgift_item p.price {
    margin-top: 8px;
}

body#halloween #section_recipient li.halloween_petitgift_item p.text {
    font-size: 13px;
    line-height: 140%;
    margin-top: 8px;
}

body#halloween #section_recipient li.halloween_petitgift_item a:active p,
body#halloween #section_recipient li.halloween_petitgift_item a:active img {
    opacity: 0.7;
}

body#halloween #section_recipient .main_heading {
    margin-bottom: 40px;
}

/* section_examples */
body#halloween #section_examples{
    background-color: #2f1137;
    padding-top: 4em;
    padding-bottom: 0.5em;
}
body#halloween #section_examples h3{
    color:#2f1137;
}
body#halloween #section_examples p.explanation::after{
    width: 20%;
    height: 2%;
    right: 0;
    top: 0%;
    background: no-repeat url(/images/halloween/2025/bg_godofdeath.svg);
}
body#halloween #section_examples .example{
    margin: 0 2em;
    margin-bottom: 6em;
}
body#halloween #section_examples p{
    color: #fff;
    line-height: 150%;
}
body#halloween #section_examples .case{
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    padding-left: 60px;
}
body#halloween #section_examples .case::before{
    content: "";
    display: inline-block;
    position: absolute;
    background: url(/images/halloween/2025/sono1.svg) no-repeat;
    background-size: contain;
    width: 55px;
    height: 50px;
    top: 0;
    left: 0;
}
body#halloween #section_examples #sono2 .case::before{
    background: url(/images/halloween/2025/sono2.svg) no-repeat;
}
body#halloween #section_examples #sono3 .case::before{
    background: url(/images/halloween/2025/sono3.svg) no-repeat;
}
body#halloween #section_examples #sono4 .case::before{
    background: url(/images/halloween/2025/sono4.svg) no-repeat;
}
body#halloween #section_examples #voice_list .case::before{
    background: url(/images/halloween/2025/voice_list.svg) no-repeat;
}
body#halloween #halloween_area .introduce_img{
    margin-bottom: 20px;
}
body#halloween #halloween_area .introduce_img img{
    border-radius: 10px;
}
body#halloween #section_examples .example_img_item {
    margin: 5px;
}
body#halloween #section_examples .example_img_item a {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 230px;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    color: #2f1137;
    text-decoration: none;
}
body#halloween #section_examples .example_img_item a img {
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-top: auto;
    margin-bottom: auto;
}
.example_item_title {
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 12px;
    margin-top: 0;
    height: 1.4em;
    line-height: 1.4em;
}
body#halloween #section_examples .example_img_item a:active{
    color: #ffc800;
}
body#halloween #section_examples .example_im_slide{
    position: relative;
    width: 100%;
}
body#halloween #section_examples .example_im_slide .example_im_slide_wrapper {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    height: 290px;
}
body#halloween #section_examples ul{
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(1, auto);
    grid-auto-columns: 260px;
    margin-top: 15px;
}
body#halloween #section_examples li {
    padding: 5px;
    margin: 5px;
}
body#halloween #section_examples li a {
    color: #2f1137;
    background-color: #fff;
    font-size: 15px;
    line-height: 110%;
    text-decoration: none;
}

/* voice_list */
body#halloween #voice_list .voice_pickup {
    margin-bottom: 50px;
}
body#halloween #voice_list .voice_txt {
    background-color: #f6f6f6;
    color: #00134b;
    font-size: 15px;
    line-height: 150%;
    text-align: left;
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 5px;
}
body#halloween #voice_list .voice_txt::before {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    border: 15px solid transparent;
    border-top: 15px solid #f6f6f6;
}
body#halloween #voice_list .voice_txt p {
    color: #00134b;
    font-weight: bold;
    margin-bottom: 5px;
}
body#halloween #voice_list .voice_txt span.date {
    text-align: right;
    font-weight: bold;
    font-size: 12px;
    display: block;
}
body#halloween #voice_list .voice_info .give {
    position: relative;
    margin-right: 10px;
    width: 50%;
}
body#halloween #voice_list .voice_info .get {
    margin-left: 10px;
    width: 50%;
}
body#halloween #voice_list .voice_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 70%;
    margin: 0 auto;
    }
body#halloween #voice_list .voice_info .give::after {
    display: block;
    background-size: contain;
    content: "";
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #eb589c;
    position: absolute;
    top: 50%;
    right: -15px;
}

/* section_design */
body#halloween #section_design{
    background-color: #4f0047;
    padding-top: 4em;
    padding-bottom: 3em;
}
body#halloween #section_design p.explanation::before,
body#halloween #section_design p.explanation::after{
    width: 10%;
    left: 0;
    top: 6%;
    background: no-repeat url(/images/halloween/2025/bg_blackcat01.svg);
}
body#halloween #section_design p.explanation::after{
    width: 11%;
    right:0;
    top: 0%;
}
body#halloween #section_design #sample_area{
    background-color: #fff;
    border-radius: 10px;
    padding: 1.5em;
    margin:0 1em;
}
body#halloween #section_design #sample_area div.material_name{
    border: 1px solid #4f0047;
    padding: 5px;
    color: #4f0047;
    text-align: center;
    font-weight: 700;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 1.8rem;
}
body#halloween #section_design #sample_area .img_area{
    margin-bottom: 3em;
}
body#halloween #section_design .frame_area,
body#halloween #section_design .stamp_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
body#halloween #section_design .frame_area img{
    height: 110px;
    width: auto;
    margin: 5px;
}
body#halloween #section_design .frame_area img:nth-of-type(3),
body#halloween #section_design .frame_area img:nth-of-type(4){
    height: 160px;
}
body#halloween #section_design #w_100 img{
    width: 30%;
    height: auto;
    margin: 5px;
}
body#halloween #section_design #w_150 img{
    width: 46%;
    height: auto;
    margin: 5px;
}

/* section_guide */
body#halloween #section_guide {
    background-color: #360D3F;
    padding-top: 4em;
    padding-bottom: 0.5em;
}
body#halloween #section_guide .txt_wrapper {
    text-align: left;
    margin: 50px 2em;
}
body#halloween #section_guide .txt_wrapper .txt_inner {
    margin-top: 10px;
}
body#halloween #section_guide .txt_wrapper .img_area {
    position: relative;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 10px;
}
body#halloween #section_guide .txt_wrapper .txt_area {
    text-align: justify;
    color: #ffffff;
}
body#halloween #section_guide .txt_wrapper p {
    font-size: 15px;
    line-height: 130%;
}
body#halloween #section_guide .txt_wrapper .img_area img {
    width: calc(100% - 20px);
    border: 1px solid #ccc;
    padding: 10px;
}

/* section_flow */
body#halloween #section_flow{
    background-color: #303957;
    padding-top: 4em;
    padding-bottom: 3em;
    margin-bottom: 5rem;
}
body#halloween #about_delivery{
    color: #FFF;
}
body#halloween #section_flow #about_delivery{
    margin: 50px auto 50px;
    max-width: 850px;
    padding: 0 10px;
}
/*about_delivery*/
body#halloween #about_delivery .about_header{
    font-size: 25px;
    font-weight: 700;
    text-align: left;
    color: #FFF;
}
body#halloween #about_delivery .about_item_wrapper{
    margin-top: 15px;
}
body#halloween #about_delivery .about_item_wrapper .about_item{
    border: 1px solid #FFF;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}
body#halloween #about_delivery .about_item .about_q{
    font-size: 1.8rem;
    font-weight: 700;
    position: relative;
    line-height: 120%;
}
body#halloween #about_delivery .about_item .about_q::after {
    content: '\25BC';
    font-size: 12px;
    line-height: 12px;
    position: absolute;
    right: 10px;
    top: calc( 50% - 0.6rem );
}
body#halloween #about_delivery .about_item .about_q.open::after{
    content: '\025b2';
}
body#halloween #about_delivery .about_item .about_a{
    font-size: 13px;
    margin-top: 10px;
}
body#halloween #about_delivery .about_item .about_a a{
    color: #ffc800;
    text-decoration: underline;
}
body#halloween #about_delivery .about_item .about_a p.bold{
    color: #ffc800;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 3px;
}
/*process*/
body#halloween #process{
    margin-bottom: 100px;
}
body#halloween .process_inner{
    border: solid 2px #FFF;
    background-color: rgba(255,255,255,0.4);
    margin: 10px;
    padding: 20px 10px;
    border-radius: 5px;
    max-width: 800px;
}
body#halloween #process p{
    text-align: center;
}
body#halloween #process .step_one{
    margin-bottom: 10px;
}
body#halloween #process p.heading{
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}
body#halloween #process span.large{
    font-size: 20px;
}
body#halloween #process .emphasis{
    font-size: 11px;
    color: #434343;
    position: relative;
    letter-spacing: 1px;
    margin: 0 auto;
    margin-top: 10px;
    line-height: 116%;
    text-align: center;
    margin-bottom: 5px;
}
body#halloween #process .emphasis p{
    display: inline-block;
}
body#halloween #process .emphasis::before,
body#halloween #process .emphasis::after{
    position: relative;
    display: inline-block;
    content: "";
    background: #FFF;
    width: 1px;
    height: 20px;
    margin: 0 10px;
    margin-top: -.20px;
    vertical-align: middle;
}
body#halloween #process .emphasis::before{
    transform: rotate(-35deg);
}
body#halloween #process .emphasis::after{
    transform: rotate(35deg);
}
body#halloween #process .step_one .step_img_area{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
body#halloween #process .step_img_area .step_product_img{
    width: 25%;
    text-align: center;
    margin-top: 10px;
}
body#halloween #process .step_img_area .step_img_area img{
    width: 100%;
    height: auto;
}
body#halloween #process .step_img_area a:active img{
    opacity: 0.7;
}
body#halloween #process .step_inner{
    position: relative;
}
body#halloween #process .step_inner:last-of-type{
    margin-right: 0;
}
body#halloween #process .step_outer .step_img_area{
    width: 200px;
    margin: 0 auto;
}
body#halloween #process .step_outer img{
    width: 100%;
    height: auto;
}
body#halloween #process .step_outer p.heading{
    line-height: 150%;
    margin: 10px 0;
}
body#halloween #process .step_outer .step_inner::before {
    content: '\25BC';
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    display: block;
}
body#halloween #section_flow .step_wrapper,
body#halloween #section_flow .step_wrapper .emphasis{
    color: #FFF;
}
body#halloween .step_product_img a img{
    width: 100%;
    height: auto;
}

/* ------------ PC ------------ */
@media screen and (min-width: 950px) {

    /* 共通 */
    body#halloween #halloween_area .feature_headline_area h2{
        max-width: 980px;
        margin: 0 auto;
    }
    body#halloween #halloween_area .main_heading::before{
        height: 70px;
        width: 170px;
        left: calc( 50% - 85px );
    }
    body#halloween .main_heading {
        padding-top: 75px;
    }
    body#halloween #section_ranking p::before, body#halloween #section_ranking p::after,
    body#halloween #section_original p::before, body#halloween #section_original p::after,
    body#halloween #section_examples p::after, body#halloween #section_design p::before,
    body#halloween #section_design p::after, body#halloween #section_guide p::before,
    body#halloween #section_guide p::after,
    body#halloween #section_petitgift p::before,
    body#halloween #section_petitgift p::after {
        height: 160px;
    }
    body#halloween #section_examples p.explanation::after {
        width: 200px;
        height: 200px;
    }
    body#halloween p.explanation {
        font-size: 1.8rem;
    }

    /* section_ranking_PC */
    body#halloween .rank_products .ranking_slide_wrapper li.rank_list:hover img{
        opacity: 0.4;
    }
    body#halloween .rank_products .ranking_slide_wrapper li.rank_list:hover p{
        color: #ffc800;
    }
    body#halloween #halloween_area .rank_products .ranking_slide_wrapper {
        height: 550px;
        overflow-x: hidden;
    }
    body#halloween #halloween_area .ranking_slide_wrapper ul.ranking_slide_inner {
        flex-wrap: wrap;
        justify-content: center;
    }
    body#halloween #halloween_area .rank_products .ranking_slide_wrapper li.rank_list {
        width: 250px;
        margin-bottom: 20px;
    }
    body#halloween #section_ranking .rank_ribbon{
        width: 70px;
    }
    body#halloween #section_ranking .rank_ribbon::after {
        border-left: 35px solid #00134b;
        border-right: 35px solid #00134b;
    }
    body#halloween #section_ranking #rank_first::after {
        border-left: 35px solid #ffc800;
        border-right: 35px solid #ffc800;
        border-bottom: 7px solid transparent;
    }

    /* section_original_PC */
    body#halloween #section_original ul li{
        display: flex;
        flex-wrap: nowrap;
    }
    body#halloween #section_original ul li .product_img{
        width: 40%;
    }
    body#halloween #section_original ul li .product_explanation{
        width: calc( 60% - 20px);
        margin-left: 20px;
    }
    body#halloween #section_original ul li div.product_explanation p.sentence {
        line-height: 170%;
        font-size: 1.6rem;
    }

    /* section_petitgift_PC */
    body#halloween #section_petitgift li a:hover p,
    body#halloween #section_petitgift li a:hover img{
        opacity: 0.7;
    }
    body#halloween #section_petitgift .section_petitgift_inner .petitgift_slide_wrapper{
        height: 340px;
        position: relative;
        overflow: hidden;
        width: 880px;
        margin: 0 auto;
    } 
    body#halloween #section_petitgift .section_petitgift_inner .petitgift_slide_wrapper .petitgift_slide_outer{
        margin-left: 0;
        position: absolute;
        left: 0;
        top: 0;
    } 
    body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sweets::before,
    body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sundrygoods::before,
    body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_drink::before{
        left: 315px;
    }
    body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sweets::after,
    body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_drink::after,
    body#halloween #section_petitgift .section_petitgift_inner .halloween_petitgift_heading h2.heading_sundrygoods::after{
        right: 315px;
    }
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .slide_btn{
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: calc( 50% - 20px );
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 5px;
        z-index: 10;
        cursor: pointer;
    }
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .prev_btn {
        left: 0;
    }
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .next_btn {
        right: 0;
    }
    body#halloween #halloween_area .dcrt_slide_btn_set .slide_btn span.arrow_btn{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-top: 3px solid #ec6c00;
        border-right: 3px solid #ec6c00;
        -webkit-transform: rotate(220deg);
        transform: rotate(220deg);
        margin-left: 3px;
        border-radius: 3px;
    }
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .prev_btn, 
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .next_btn, 
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .swiper_prev_btn, 
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .swiper_next_btn {
        border: 3px solid #ec6c00;
    }
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .slide_btn.next_btn span.arrow_btn{
        margin-right: 5px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-left: 0;
    }
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .prev_btn span.arrow_btn, 
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .next_btn span.arrow_btn,
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .swiper_prev_btn span.arrow_btn, 
    body#halloween #halloween_area .section_petitgift_inner .slide_btn_set .swiper_next_btn span.arrow_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 13px;
        height: 13px;
        border-top: 3px solid #ec6c00;
        border-right: 3px solid #ec6c00;
        -webkit-transform: rotate(220deg);
        transform: rotate(220deg);
        margin-left: 3px;
    }

    /* section_recipient_PC */
    body#halloween #section_recipient {
        padding-top: 4em;
        padding-bottom: 4em;
    }

    body#halloween #section_recipient p.explanation {
        font-size: 1.8rem;
    }

    body#halloween #section_recipient p.explanation::before,
                body#halloween #section_recipient .recipient_heading h3 {
        font-size: 2.4rem;
        padding-right: 100px;
        padding-left: 100px;
    }

    body#halloween #section_recipient .recipient_heading .heading_adult::before,
        body#halloween #section_recipient .recipient_heading .heading_adult::after,
        body#halloween #section_recipient .petitgift_slide_wrapper {
        width: 880px;
        height: 340px;
        overflow: hidden;
    }

    body#halloween #section_recipient .petitgift_slide_outer {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 0;
    }

    body#halloween #section_recipient li.halloween_petitgift_item a:hover p,
    body#halloween #section_recipient li.halloween_petitgift_item a:hover img {
        opacity: 0.7;
    }

    /* section_examples_PC */
    body#halloween #section_examples .example_img_item a:hover{
        color: #ffc800;
    }
        /*section_examples_PC*/
    body#halloween #section_examples .example{
        margin-bottom: 6em;
        max-width: 900px;
        margin: 0 auto;
        margin-top: 100px;
    }
    body#halloween #section_examples .case{
        font-size: 2.5rem;
        margin-bottom: 40px;
    }
    body#halloween #section_examples .case::before{
        top: -7px;
    }
    body#halloween #section_examples .introduce_area {
        display: flex;
        flex-wrap: nowrap;
    }
    body#halloween #section_examples .introduce_area .introduce_img{
        width: 66%;
    }
    body#halloween #section_examples .introduce_area p{
        width: calc(34% - 20px);
        margin-left: 20px;
        font-size: 1.6rem;
    }
    body#halloween #section_examples .example_im_slide{
    position: relative;
    width: 100%;
    }
    body#halloween #section_examples .example_im_slide .example_im_slide_wrapper {
        height: 270px;
        position: relative;
        overflow: hidden;
        width: 880px;
        margin: 0 auto;
    }
    body#halloween #section_examples .example_im_slide .example_img_slide_outer{
    position: relative;
    width: 100%;
    }
    body#halloween #section_examples .example_im_slide .example_img_slide_outer ul{
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(1, auto);
    grid-auto-columns: 240px;
    margin-top: 20px;
    transition: transform 0.5s ease;
    will-change: transform;
    }
    body#halloween #section_examples .example_im_slide .example_img_slide_outer li{
    padding: 5px;
    margin: 5px;
    }
    body#halloween #section_examples .example_img_slide_outer .example_img{
        display: flex;
        flex-wrap: nowrap;
    }
    body#halloween #voice_list .voice_pickup {
        display: flex;
        flex-wrap: nowrap;
        margin-bottom: 50px;
    }
    body#halloween #voice_list .voice_txt {
        font-size: 15px;
        line-height: 150%;
        text-align: left;
        position: relative;
        display: inline-block;
        margin-right: 20px;
        padding: 20px;
        border-radius: 5px;
        width: 70%;
    }
    body#halloween #voice_list .voice_txt::before {
        top: 50%;
        left: 100%;
        bottom: auto;
        transform: translateY(-50%);
        border: 15px solid transparent;
        border-left: 15px solid #f6f6f6;
}
    body#halloween #voice_list .voice_info {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 30%;
    }
    body#halloween #voice_list .voice_info .give {
        position: relative;
        margin-right: 10px;
        width: 50%;
    }
    body#halloween #voice_list .voice_info .get {
        margin-left: 10px;
        width: 50%;
    }
    /*PC btn*/
    body#halloween #halloween_area #section_examples .slide_btn_set .slide_btn{
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: calc( 50% - 20px );
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 5px;
        z-index: 10;
        cursor: pointer;
    }
    body#halloween #halloween_area #section_examples .slide_btn_set .prev_btn {
        left: 0;
        background-color: rgba(128, 0, 128, 0.6); /* 紫＋60%不透明度 */
    }
    body#halloween #halloween_area #section_examples .slide_btn_set .next_btn {
        right: 0;
        background-color: rgba(128, 0, 128, 0.6); /* 紫＋60%不透明度 */
    }
    body#halloween #halloween_area #section_examples .slide_btn_set .slide_btn span.arrow_btn{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-top: 3px solid #ddacee; 
        border-right: 3px solid #ddacee; 
        -webkit-transform: rotate(220deg);
        transform: rotate(220deg);
        margin-left: 3px;
        border-radius: 3px;
    }
    body#halloween #halloween_area #section_examples .slide_btn_set .prev_btn, 
    body#halloween #halloween_area #section_examples .slide_btn_set .next_btn, 
    body#halloween #halloween_area #section_examples .slide_btn_set .swiper_prev_btn, 
    body#halloween #halloween_area #section_examples .slide_btn_set .swiper_next_btn {
        border: 3px rgba(128, 0, 128, 0.6); /* 紫＋60%不透明度 */
    }
    body#halloween #halloween_area #section_examples .slide_btn_set .slide_btn.next_btn span.arrow_btn{
        margin-right: 5px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        margin-left: 0;
    }
    body#halloween #halloween_area #section_examples .slide_btn_set .prev_btn span.arrow_btn, 
    body#halloween #halloween_area #section_examples .slide_btn_set .next_btn span.arrow_btn,
    body#halloween #halloween_area #section_examples .slide_btn_set .swiper_prev_btn span.arrow_btn, 
    body#halloween #halloween_area #section_examples .slide_btn_set .swiper_next_btn span.arrow_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 13px;
        height: 13px;
        border-top: 3px solid #ddacee; 
        border-right: 3px solid #ddacee; 
        -webkit-transform: rotate(220deg);
        transform: rotate(220deg);
        margin-left: 3px;
    }

    /* section_design_PC */
    /*section_design_PC*/
    body#halloween #section_design #sample_area {
        margin: 100px;
    }
    body#halloween #halloween_area #sample_area{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        max-width: 1390px;
        margin: auto;
    }
    body#halloween #halloween_area #sample_area .sample_area_inner{
        width: 48%;
    }
    body#halloween #section_design .frame_area img {
        height: 160px;
    }
    body#halloween #section_design .frame_area img:nth-of-type(3),
    body#halloween #section_design .frame_area img:nth-of-type(4){
        height: 230px;
    }
    body#halloween #section_design #w_100 img{
        width: 18%;
    }
    body#halloween #section_design #w_150 img{
        width: 22%;
    }

    /* section_guide_PC */
    /*section_guide_PC*/
    body#halloween #section_guide .bg_inner {
        max-width: 900px;
        margin: 0 auto;
    }
    body#halloween #section_guide .txt_wrapper .txt_inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin-top: 10px;
    }
    body#halloween #section_guide .txt_wrapper .img_area {
        width: 35%;
        margin-right: 3%;
        position: relative;
        margin-bottom: 0;
    }
    body#halloween #section_guide .txt_wrapper .txt_area {
        width: 67%;
    }

    /* section_flow_PC */
    body#halloween #process .step_img_area a:hover img{
        opacity: 0.7;
    }
    body#halloween .process_inner{
        margin: 0 auto;
        margin-top: 40px;
    }
    body#halloween #process .step_outer {
        display: flex;
        flex-wrap: nowrap;
    }
    body#halloween #process .step_inner {
        width: 30%;
        margin-right: 5%;
        position: relative;
    }
    body#halloween #process .step_inner::before {
        content: '\25BC';
        font-size: 15px;
        line-height: 15px;
        position: absolute;
        top: calc(55% - 15px);
        left: 104%;
        transform: rotate(-90deg);
    }
    body#halloween #process .step_inner:last-of-type::before {
        content: "";
        border: 20px solid transparent;
    }
}