@charset "UTF-8";
/* CSS Document */
/*----------------------------------------
sweets
----------------------------------------*/
/*----------------- 共通 ----------------- */
body#sweets #sweets_area{
    max-width: 810px;
    margin: 0 auto;
}
body#sweets div.contens_title_img{
    max-width: 100%;
}
body#sweets div#main #sweets_area .intro{
    text-align: justify;
    line-height: 140%;
    padding: 2em 0 4em 0;
}
body#sweets div#main #sweets_area .sweets_contents{
    margin-bottom: 80px;
}
body#sweets div#main #sweets_area .main_heading{
    font-size: 2.2rem;
    line-height: 120%;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
}
body#sweets div#main #sweets_area .main_heading::before{
    content: '';
    vertical-align: middle;
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fe6498;
    border-radius: 50%;
    margin-right: 5px;
    margin-bottom: 3px;
}
body#sweets div#main #sweets_area .sub_heading{
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
}
body#sweets div#main #sweets_area .btn {
    text-align: center;
}
body#sweets div#main #sweets_area .btn a{
    border: 1px solid #FE6498;
    background-color: #FE6498;
    padding: 10px;
    width: 100%;
    max-width: 400px;
    display: inline-block;
    color: #fff;
    font-weight: 700;
    border-radius: 30px;
    font-size: 1.5rem;
    letter-spacing: 1px;
    margin-bottom: 1em;
    text-decoration: none;
}
body#sweets div#main #sweets_area .btn a:active{
    border: 1px solid #FE6498;
    background-color: #fff;
    color: #FE6498;
}
/*------------ 共通 PC --------- */
@media screen and (min-width: 950px) {
    body#sweets div#main #sweets_area .btn a:hover{
        border: 1px solid #FE6498;
        background-color: #fff;
        color: #FE6498;
    }
}
/*----------------- original ----------------- */
body#sweets div#main #sweets_area p.text{
    text-align: justify;
    line-height: 140%;
    margin-bottom: 25px;
}
body#sweets div#main #sweets_area ul li.sweets_original_item{
    margin-bottom: 40px;
}
body#sweets div#main #sweets_area ul li .slide_container{
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    overflow-x: scroll;
}
body#sweets div#main #sweets_area ul li .slide_wrapper{
    width: 810px;
    height: 250px;
    display: flex;
    flex-wrap: nowrap;
}
body#sweets div#main #sweets_area ul li .slide_item{
    margin-right: 20px;
    display: block;
}
body#sweets div#main #sweets_area .product{
    margin-top: 1em;
}
body#sweets div#main #sweets_area ul li .product_info p.price{
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 1em;
}
body#sweets div#main #sweets_area ul li .product .product_info{
    padding-bottom: 1em;
}
body#sweets div#main #sweets_area ul li .product p.explanation{
    text-align: justify;
}
body#sweets div#main #sweets_area ul li .product .product_link{
    text-align: center;
    margin: 3em 0;
}
body#sweets div#main #sweets_area ul li .product_link p.more{
    font-size:  1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #5F5F5F;
    margin-bottom: 10px;
}
body#sweets div#main #sweets_area ul li .slide_item .slide_item_inner{
    border: 1px solid #CCCCCC;
    margin: 0 auto;
    width: 250px;
    height: 250px;
    position: relative;
    overflow: hidden;
}
body#sweets div#main #sweets_area ul li .slide_item img{
    width: auto;
    height: 250px;
    max-width: 500px;
}
/*ob images*/
body#sweets div#main #sweets_area li .slide_item:nth-of-type(2) img{
    width: 430px;
    height: auto;
    position: absolute;
    top: -25px;
    left: -16px;
}
body#sweets div#main #sweets_area li .slide_item:nth-of-type(3) img{
    width: 380px;
    height: auto;
    position: absolute;
    top: 0px;
    left: -50px;
}
/*ac images*/
body#sweets div#main #sweets_area li#ac_area .slide_item:nth-of-type(2) img {
    left: -57px;
    top: 0;
    width: 375px;
}
body#sweets div#main #sweets_area li#ac_area .slide_item:nth-of-type(3) img {
    width: 375px;
    top: 0px;
    left: -90px;
}
/*mb images*/
body#sweets div#main #sweets_area li#mb_area .slide_item:nth-of-type(2) img{
    left: -154px;
}
/*sd images*/
body#sweets div#main #sweets_area li#sd_area .slide_item:nth-of-type(2) img{
    width: 400px;
    top: -8px;
    left: -70px;
}
/*dc images*/
body#sweets div#main #sweets_area li#dc_area .slide_item:nth-of-type(2) img{
    top: -5px;
    left: -75px;
}
body#sweets div#main #sweets_area li#dc_area .slide_item:nth-of-type(3) img{
    left: -80px;
}
/*ce*/
body#sweets div#main #sweets_area li#ce_area .slide_item:nth-of-type(2) img{
    left: -156px;
}
/*cj images*/
body#sweets div#main #sweets_area li#cj_area .slide_item:nth-of-type(3) img{
    left: -80px;
}
/*lk images*/
body#sweets div#main #sweets_area li#lk_area .slide_item:nth-of-type(3) img{
    left: -20px;
}
body#sweets div#main #sweets_area ul li .voice{
    background-color: #F7F7F7;
    padding: 3em 1em;
    max-width: 100%;
}
body#sweets div#main #sweets_area ul li .voice .flex_pc{
    text-align: center;
}
body#sweets div#main #sweets_area ul li .voice .flex_pc p{
    text-align: justify;
    margin-bottom: 15px;
}
body#sweets div#main #sweets_area ul li .voice img{
    width: 60%;
}
body#sweets div#main #sweets_area ul li .voice .voice_img2 img{
    width: 85%;
}
body#sweets div#main #sweets_area ul li .voice .voice_img_dc img{
    width: 40%;
}
body#sweets div#main #sweets_area ul li .voice .flex_pc h4{
    font-weight: 700;
    margin: 1em 0;
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: #5F5F5F;
}
body#sweets div#main #sweets_area ul li .voice .flex_pc .voice_txt{
    margin: 0 1em;
}
body#sweets div#main #sweets_area ul li .voice .flex_pc .voice_txt .btn a:active{
    border: 1px solid #FE6498;
    background-color: #fff;
    color: #FE6498;
}
/*------------ original PC --------- */
@media screen and (min-width: 950px) {
    body#sweets div#main #sweets_area ul li .slide_container{
        overflow-x:auto;
    }
    body#sweets div#main #sweets_area .product{
        display: flex;
        flex-wrap: nowrap;
        margin-top: 30px;
         margin-bottom: 30px;
    }
    body#sweets div#main #sweets_area ul li .product_info{
        width: 60%;
    }
    body#sweets div#main #sweets_area ul li .product p.explanation{
        margin-right: 20px;
    }
    body#sweets div#main #sweets_area ul li .product .product_link{
        width: calc( 40% - 10px );
        margin: 0;
        margin-left: 10px;
    }
    body#sweets div#main #sweets_area ul li .voice{
        margin-bottom: 100px;
    }
    body#sweets div#main #sweets_area ul li .voice .flex_pc{
        display: flex;
        flex-wrap: nowrap;
        margin-top: 30px;
         margin-bottom: 30px;
    }
    body#sweets div#main #sweets_area ul li .voice .flex_pc .voice_img{
        width: 40%;
    }
    body#sweets div#main #sweets_area ul li .voice .flex_pc .voice_txt{
        width: 60%;
    }
}
/*-------------------reason-------------------*/
body#sweets #reason ul.reason_list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
body#sweets #reason ul li.reason_item{
    width: 50%;
    display: flex;
    align-items: stretch;
}
body#sweets #reason ul li.reason_item .reason_item_inner{
    background-color: #F7F7F7;
    margin: 5px;
    padding: 10px;
}
body#sweets #reason ul li.reason_item .reason_img{
    margin-bottom: 8px;
}
body#sweets #reason ul li.reason_item .reason_txt{
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 120%;
}
/*------------ reason PC --------- */
@media screen and (min-width: 950px) {
    body#sweets #reason ul.reason_list{
        flex-wrap: nowrap;
    }
    body#sweets #reason ul li.reason_item{
        width: 25%;
    }
}
/*----------------- scene ----------------- */
body#sweets #scene .scene_container{
    position: relative;
}
body#sweets #scene .scene_container ul.scene_list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
body#sweets #scene .scene_container ul li.scene_item{
    width: calc(33% - 6.7px);
    display: flex;
    flex-flow: column;
    align-items: stretch;
    border: 1px solid #E9B1AB;
    padding: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}
body#sweets #scene .scene_container ul li.scene_item:nth-of-type(3n){
    margin-right: 0;
}
body#sweets #scene .scene_container ul li .scene_txt{
    margin: 0 auto;
}
body#sweets #scene .scene_container ul li .scene_txt p{
    display: inline-block;
    font-weight: 700;
}
/*------------ reason PC --------- */
@media screen and (min-width: 950px) {
    body#sweets #scene .scene_container ul.scene_list{
        flex-wrap: nowrap;
    }
    body#sweets #scene .scene_container ul li.scene_item{
        width: calc(16.6% - 8.4px);
    }
    body#sweets #scene .scene_container ul li.scene_item:nth-of-type(3n){
        margin-right: 10px;
    }
    body#sweets #scene .scene_container ul li.scene_item:last-of-type{
        margin-right: 0;
    }
}
/*-------------------step-------------------*/
body#sweets #step .step_container{
    position: relative;
    margin-bottom: 20px;
}
body#sweets #step .step_wrapper{
    width: 100%;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
}
body#sweets #step .step_outer{
    border: 1px solid #CCCCCC;
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(1, auto);
    grid-auto-columns: 250px;
    margin-right: 20px;
    padding: 20px;
}
body#sweets #step p{
    text-align: center;
}
body#sweets #step .step_inner{
    position: relative;
    padding-left: 40px;
    padding-right: 10px;
}
body#sweets #step .step_inner:first-of-type{
    padding-left: 0;
}
body#sweets #step .step_inner:last-of-type{
    margin-right: 0;
}
body#sweets #step .step_outer .step_inner::before {
    content: '\025b6';
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    display: block;
    position: absolute;
    left: 5px;
    top: calc( 50% - 20px );
}
body#sweets #step .step_outer .step_inner:first-of-type::before {
    display: none;
}
body#sweets #step p.step_heading{
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}
body#sweets #step .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#sweets #step .emphasis p{
    display: inline-block;
}
body#sweets #step .emphasis::before,
body#sweets #step .emphasis::after{
    position: relative;
    display: inline-block;
    content: "";
    background: #434343;
    width: 1px;
    height: 20px;
    margin: 0 6px;
    margin-top: -.20px;
    vertical-align: middle;
}
body#sweets #step .emphasis::before{
    transform: rotate(-35deg);
}
body#sweets #step .emphasis::after{
    transform: rotate(35deg);
}
body#sweets #step .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#sweets #step .step_img_area .step_product_img{
    width: 25%;
    text-align: center;
    margin-top: 10px;
}
body#sweets #step .step_img_area img{
    width: 100%;
    height: auto;
}
body#sweets #step .step_img_area a:active img{
    opacity: 0.7;
}
body#sweets #step .step_outer .step_img_area{
    width: 200px;
    margin: 0 auto;
}
body#sweets #step .step_outer img{
    width: 100%;
    height: auto;
}
body#sweets #step .step_outer p.heading{
    line-height: 150%;
    margin: 10px 0;
}
/*------------ step PC --------- */
@media screen and (min-width: 950px) {
    body#sweets .step_wrapper {
        overflow: hidden;
    }
    body#sweets #step .step_outer{
        grid-auto-columns: 189px;
        margin-right: 0;
    }
    body#sweets #step .step_inner{
        padding-left: 30px;
        margin-left: 20px;
    }
    body#sweets #step .step_outer .step_inner::before {
        font-size: 16px;
        left: 8px;
    }
    body#sweets #step .step_outer .step_one{
        width: 220px;
        margin-left:0;
    }
    body#sweets #step .emphasis p{
        font-size: 1.4rem;
        letter-spacing: -0.1px;
    }
    body#sweets #step .step_outer .step_img_area {
        width: 140px;
        margin-top: 40px;
    }
    body#sweets #step .step_outer .step_one .step_img_area{
        width: 180px;
    }
}
/*-------------------faq-------------------*/
body#sweets #faq .faq_container {
    position: relative;
}
body#sweets #faq .faq_container .ttl .ttl_txt {
    color: #fff;
}
body#sweets #faq .faq_item_wrapper .faq_item {
    cursor: pointer;
    border: 1px solid #CCCCCC;
    padding: 10px;
    margin-bottom: 10px;
}
body#sweets #faq .faq_item_wrapper .faq_item .faq_q {
    position: relative;
    font-size: 1.7rem;
    font-weight: 700;
    padding-right: 23px;
    padding-left: 20px;
    text-indent: -10px;
}
body#sweets #faq .faq_item_wrapper .faq_item .faq_q::before {
    display: inline-block;
    content: "Q";
    font-size: 17px;
    font-weight: 700;
    margin-right: 5px;
}
body#sweets #faq .faq_item_wrapper .faq_item .faq_q::after {
    content: "";
    position: absolute;
    top: calc(50% - 5px);
    right: 0;
    background: #313131;
    height: calc(tan(60deg) * 10px / 2);
    width: 10px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin-left: 5px;
}
body#sweets #faq .faq_item_wrapper .faq_item .faq_q.open {
    color: #FE6498;
}
body#sweets #faq .faq_item_wrapper .faq_item .faq_q.open::after {
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: #FE6498;
}
body#sweets #faq .faq_item_wrapper .faq_item .faq_a {
    position: relative;
    font-size: 1.6rem;
    margin-top: 15px;
}
body#sweets #faq .faq_item_wrapper .faq_item .faq_a::before {
    position: absolute;
    content: "A";
    font-size: 17px;
    font-weight: 700;
    color: #FE6498;
    top: 0;
    left: 0;
}
body#sweets #faq .faq_item_wrapper .faq_item .faq_a .faq_a_contents {
    padding-left: 18px;
}
body#sweets #faq .faq_item_wrapper .faq_item .faq_a .faq_a_contents:not(:first-of-type) {
    margin-top: 20px;
}
body#sweets #faq .faq_item_wrapper .faq_item .faq_a .faq_a_heading {
    font-weight: 700;
    margin-bottom: 5px;
}
/*----------------- others ----------------- */
body#sweets div#main #sweets_area .sweets_kinds{
    margin-bottom: 5em;
    margin-top: 20px;
}
body#sweets div#main #sweets_area .sweets_kinds ul.sweets_list li.sweets_list_item{
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 20px;
}
body#sweets div#main #sweets_area .sweets_kinds ul.sweets_list li:last-of-type{
    border-bottom: none;
}
body#sweets div#main #sweets_area ul.sweets_list li a img{
    max-width: 100%;
    border: 1px solid #CCCCCC;
}
body#sweets div#main #sweets_area ul.sweets_list li .s_info p{
    margin-top: 0.5em;
}
body#sweets div#main #sweets_area ul.sweets_list li .s_info p.price{
    font-size: 1.8rem;
    font-weight: 700;
}
body#sweets div#main #sweets_area ul.sweets_list li .s_info p.name a{
    font-size: 1.8rem;
    font-weight: 700;
}
/*------------ others PC --------- */
@media screen and (min-width: 950px) {
    body#sweets div#main #sweets_area ul.sweets_list{
        display: flex;
        flex-wrap: nowrap;
    }
    body#sweets div#main #sweets_area .sweets_kinds ul.sweets_list li.sweets_list_item{
        margin-right: 30px;
        border-bottom: none;
    }
}