@charset "UTF-8";
/* CSS Document */
/*----------------------------------------
put-name
---------------------------------------- */
/*共通*/
body#put_name section#main_img{
    margin: 0 auto;
    margin-bottom: 10px;
    text-align: center;
}
body#put_name section.container{
    letter-spacing: -0.01px;
    line-height: 130%;
    text-align: justify;
    margin-bottom: 30px;
    color: #333333;
}
body#put_name span.pk{
    color: #FE6498;
}
body#put_name span.fz25{
    font-size: 25px;
}
body#put_name span.fz13{
    font-size: 13px;
}
/*導入テキスト*/
body#put_name section#intro p,
body#put_name #recommend_intro{
    margin-bottom: 30px
}
/*おすすめプチギフト20選 イントロ*/
body#put_name #recommend_intro h2,
body#put_name #process h2{
    text-align: center;
    font-size: 25px;
    line-height: 110%;
    font-weight: 700;
    position: relative;
    margin-bottom: 30px;
}
body#put_name #recommend_intro h2:before,
body#put_name #recommend_intro h2:after,
body#put_name #process h2:before,
body#put_name #process h2:after{
    display: inline-block;
    position: absolute;
    content: '';
    background-image: url(/theme/sp/images/put_name/bg01.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: -4px;
    left: 40px;
    width: 25px;
    height: 50px;
}
body#put_name #recommend_intro h2:after,
body#put_name #process h2:after{
    background-image: url(/theme/sp/images/put_name/bg01.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(180deg);
    top: -10px;
    left: auto;
    right: 40px;
}
/*おすすめプチギフト20選 商品紹介*/
body#put_name #recommend_wrapper .recommend_area p{
    line-height: 140%;
}
body#put_name #recommend_wrapper .recommend_area p span.voice_info{
    font-weight: 700;
    text-align: right;
    display: block;
}
body#put_name #recommend_wrapper ul{
    margin: 0;
    counter-reset: number 0;
}
body#put_name #recommend_wrapper .recommend_area ul li{
    margin-bottom: 75px;
    position: relative;
}
body#put_name #recommend_wrapper .recommend_area ul li:before{
    counter-increment: number 1;
    content: counter(number) " ";
    font-size: 150px;
    font-weight: 700;
    color: #e9e9e9;
    position: absolute;
    top: 520px;
    right: 0;
    z-index: 0;
}
body#put_name #recommend_wrapper .top_part .recommend_img{
    border: 1px solid #CCCCCC;
}
body#put_name #recommend_wrapper .top_part .recommend_img img{
    width: 100%;
    height: auto;
}
body#put_name #recommend_wrapper .top_part .recommend_img:active img{
    opacity: 0.7;
}
body#put_name #recommend_wrapper .top_part .redomend_info{
    z-index: 2;
    margin-top: 10px;
}
body#put_name #recommend_wrapper .top_part .redomend_info h3{
    font-weight: 700;
    text-indent: 0;
    margin-bottom: 5px;
    margin-top: 0;
}
body#put_name #recommend_wrapper .top_part .redomend_info p.price{
    font-weight: 700;
}
body#put_name #recommend_wrapper .link_btn a.to_site{
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    padding: 10px;
    padding-right: 25px;
    margin: 10px 0;
    margin-bottom: 15px;
    display: block;
    font-weight: 700;
    border-radius: 30px;
    border: solid 1px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}
body#put_name #recommend_wrapper .link_btn a.to_site{
    color: #fff;
    background-color: #FE6498;
    max-width: 500px;
}
body#put_name #recommend_wrapper .link_btn a.to_site:after{
    content: '\25BC';
    font-size: 15px;
    line-height: 15px;
    position: absolute;
    top: 30%;
    right: 60px;
    transform: rotate(-90deg);
}
body#put_name #recommend_wrapper .link_btn:active a.to_site {
    color: #FE6498;
    background-color: #fff;
}
body#put_name #recommend_wrapper p.target_headig,
body#put_name #recommend_wrapper p.point_headig{
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 15px;
}
body#put_name #recommend_wrapper .top_part .target{
    z-index: 3;
    position: relative;
}
body#put_name #recommend_wrapper a{
    color: #333333;
    line-height: 230%;
    font-size: 13px;
}
/*注文までの手順*/
body#put_name #process{
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: 30px;
}
body#put_name #process h2{
    text-align: center;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 30px;
    letter-spacing: 1px;
    line-height: 240%;
}
body#put_name #process p{
    text-align: center;
}
body#put_name #process .tab_box{
    position: relative;
}
body#put_name #process .tab_box .btn_area{
    margin:0;
    position: relative;
    display: -webkit-box;
    display: flex;
    z-index: 1;
}
body#put_name #process .tab_box .tab_btn{
    width: 300px;
    padding: 15px 0;
    color: #333;
    background: #e9e9e9;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: -0.5px;
    border-radius: 5px 5px 0 0;
    box-shadow: 3px 4px 10px 0px rgba(0, 0, 0, 0.13);
    font-weight: 700;
}
body#put_name #process .tab_box .tab_btn + .tab_btn{
    margin-left: 8px;
}
body#put_name #process .tab_box .tab_btn:active{
    color: #FE6498;
}
body#put_name #process .tab_box .tab_btn.active{
    background:#FCFCFC;
    color:#434343;
    border-bottom: 3px solid #FE6498;
}
body#put_name #process .tab_box .panel_area{
    background-color: #fcfcfc;
    padding: 10px;
    padding-top: 35px;
    box-shadow: 3px 4px 10px 0px rgba(0, 0, 0, 0.13);
    position: relative;
    z-index: 2;
}
body#put_name #process .tab_box .tab_panel{
    display:none;
}
body#put_name #process .tab_box .tab_panel.active{
    display:block;
}
body#put_name #process .step_one{
    margin-bottom: 10px;
}
body#put_name #process .step_one .step_txt_area{
}
body#put_name #process p.heading{
    font-weight: 700;
    letter-spacing: 1px;
}
body#put_name #process span.large{
    font-size: 20px;
}
body#put_name #process .emphasis{
    font-size: 13px;
    color: #434343;
    position: relative;
    letter-spacing: 1px;
    margin: 0 auto;
    margin-top: 10px;
    line-height: 116%;
    text-align: center;
}
body#put_name #process .emphasis p{
    display: inline-block;
}
body#put_name #process .emphasis:before,
body#put_name #process .emphasis:after{
    position: relative;
    display: inline-block;
    content: "";
    background: #434343;
    width: 1px;
    height: 20px;
    margin: 0 10px;
    margin-top: -.20px;
    vertical-align: middle;
}
body#put_name #process .emphasis:before{
    transform: rotate(-35deg);
}
body#put_name #process .emphasis:after{
    transform: rotate(35deg);
}
body#put_name #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#put_name #process .step_img_area .product_img{
    width: 23%;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-right: 5px;
}
body#put_name #process .step_img_area .product_img img{
    width: 100%;
    height: auto;
}
body#put_name #process .step_img_area a:active img{
    opacity: 0.7;
}
body#put_name #process .step_inner{
    position: relative;
 }
body#put_name #process .step_inner:last-of-type{
    margin-right: 0;
 }
body#put_name #process .step_outer .step_img_area{
    width: 200px;
    margin: 0 auto;
  }
body#put_name #process .step_outer img{
    width: 100%;
    height: auto;
 }
body#put_name #process .step_outer p.heading{
    line-height: 150%;
    margin: 10px 0;
}
 body#put_name #process .step_outer .step_inner:before {
    content: '\25BC';
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    display: block;
}
/*まとめ*/
body#put_name section#summary .summary_area{
    border: 1px solid #C2B078;
    padding: 5%;
    padding-top: 7%;
    margin: 0 auto;
}
body#put_name section#summary p.summary_headig{
    font-size: 16px;
    font-weight: 700;
    position: relative;
    margin-bottom: 20px;
    text-align: center;
}
body#put_name section#summary p.summary_headig:before,
body#put_name section#summary p.summary_headig:after{
    display: inline-block;
    position: absolute;
    content: '';
    background-image: url(/theme/sp/images/put_name/bg01.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: -8px;
    left: 0px;
    width: 25px;
    height: 40px;
}
body#put_name section#summary p.summary_headig:after{
    background-image: url(/theme/sp/images/put_name/bg01.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(180deg);
    left: auto;
    right: 0px;
}
body#put_name section#summary p{
    line-height: 150%;
}
/*------------ 共通 PC  ------------*/
@media screen and (min-width: 950px) {
    body#put_name #recommend_wrapper .top_part,
    body#put_name #recommend_wrapper .lower_part{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    body#put_name #recommend_wrapper .top_part .recommend_img {
        width: 35%;
        border: 1px solid #CCCCCC;
    }
    body#put_name #recommend_wrapper .top_part .redomend_info {
        width: 65%;
        margin-left: 20px;
        z-index: 2;
    }
    body#put_name #recommend_wrapper .lower_part .point{
        width: 48%;
    }
    body#put_name #recommend_wrapper .lower_part .voice{
        width: 48%;
    }
    body#put_name #recommend_wrapper .recommend_area ul li:before{
        top: 200px;
    }
    body#put_name #process .tab_box .panel_area{
        padding: 30px;
    }
    body#put_name #process .step_img_area .product_img {
        width: 18%;
    }
    body#put_name #process .step_outer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    body#put_name #process .step_inner {
        width: 30%;
        margin-right: 5%;
        position: relative;
    }
    body#put_name #process .step_inner:last-of-type {
        margin-right: 0;
    }
    body#put_name #process .step_outer .step_inner::before{
        position: absolute;
        transform: rotate(-90deg);
        top: calc( 50% - -20px );
        right: -30px;
    }
    body#put_name #process .step_inner:last-of-type:before {
        content: "";
        border: 20px solid transparent;
    }
}