@charset "UTF-8";       /* スタイルシートのエンコーディングを Unicode UTF-8 にします*/

@media screen and (max-width:820px){

    .home .content section.sefty-line:first-of-type, .content section.pageformat:nth-of-type(even){
    display: block;
    }

    .top-sidenav ul{
        display: none;
    }

    section{
    min-width: auto;
    }
    #top-head .logo,
    .home #top-head h1.logo{
        width: 50%;
    }

    .home picture img{
        width: 100%;
    }

    .contact7{
        width: 80%;
    }

    .text-block{
    width: 85%;
    margin: 1em auto;
    }

    .home .content section.sefty-line:first-of-type > div:last-of-type{
    width: auto;
    }

    .text-block ruby.en, .text-block dd.en, .pagesample ruby.en, .mockup div > ruby.en{
        font-size: 7.5vw;
    }

    .mockup div > ruby.en{
        text-align: center;
    }

    h2.bold{
        font-size: inherit;
    }

    .overview, .black-link a, .hp-contents, .lowprice dt, .lowprice dt .en{
        font-size: inherit;
    }

    .read-text{
        font-size: 2.5vw;
    }

    .home .sefty-line.mockup, .home .sefty-line.pagesample, .flow.sefty-line{
        width: auto;
    }

    .lowprice{
        padding: 0%;
    }

    body {
        min-width: auto;
    }

    .pagesample ul{
        width: 80%;
        margin: auto;
        justify-content: space-evenly;
    }

    .mockup ul.flex-box{
        justify-content: space-around;
        width: 45%;
    }

    .mockup-text{
        width: 45%;
    }


    .content section.pageformat:nth-of-type(odd) > div:first-of-type{
        width: auto;
    }

    .lowprice.left-padding{
        width: 85%;
    }

    .pageformat .black-link{
        font-size: inherit;
        /*margin: 1em auto 1em;*/
    }

    .flow li{
        padding: 0 1em;
        box-sizing: border-box;
    }

    .homepage-products .content > section:last-of-type{
        width: 95%;
    }

    .productshandled .pageformat:nth-of-type(2n) .text-block,
    .productshandled .pageformat:nth-of-type(3) .text-block{
        width: 85%;
        padding: 0;
    }

    .content section.pageformat:nth-of-type(even) > div:last-of-type{
        width: auto;
    }

    .productshandled .content section:nth-of-type(2),
    .productshandled .content section:nth-of-type(4)
{
    display: flex;
    flex-wrap: wrap-reverse;
}

.productshandled .pageformat:nth-of-type(4) .text-block > .flex-box{
    margin: auto;
    position: unset;
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
}

.productshandled .pageformat:nth-of-type(4) .text-block > .flex-box img{
    width: calc(50% - 1px);
}

.top-mainimg{
    margin-top: -200px;
    height: 1000px;
    overflow: hidden;
}

.productshandled .flex-box{
    flex-wrap: wrap;
}

}


@media screen and (max-width:640px){

.pc{
    display: none;
}

.sp{
    display: block;
}

#menu-item-955,
#menu-item-956{
    display: block;
}

.hide{
  transform: translateY(-100%);
}

body{
    min-width: 100%;
}

img{
    max-width: 100%;
    height: auto;
}
/*
.handled-item img,
.img-box img,
#sign > div >img,
.lowprice > img{
    display: block;
    width: 90%;
    margin: auto;
}

.home .img-box img{
    width: 100%;
}*/

#header{
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-top: 0.5em;
}

#header_design{
    width: 100%;
}
/*
header#top-head{
    border-bottom: 1px dashed #000;
}

.home header#top-head{
    border-bottom: none;
}
*/
#header_design{
    width: 95%;
    height: auto;
    margin: 0;
}

.flex-box{
    display: block;
}

.home .sefty-line.pagesample,
.home .sefty-line.mockup,
.flow.sefty-line,
.sefty-line{
    width: auto;
}

.text-block{
    width: 100%;
    padding: 0;
    margin: auto;
}

.read-text{
    font-size: 3.25vw;
}

.home .text-block{
    width: 90%;
}

.hp-contents,
.black-link a
{
    font-size: 3.5vw;
}

.black-link a{
    padding: 0.5em 0;
}

.black-link{
    width: 90%;
}

.overview{
    margin: 1.5em auto 0;
    width: 90%;
    font-size: 18px
}

.img-box{
    margin: auto;
    top: 20px;
}

.mockup-text{
    width: auto;
}

.mockup ul.flex-box{
    width: auto;
}

.mockup ul.flex-box li{
    width: 85%;
    margin: auto;
    margin-bottom: 5%;
}

.mockup ul.flex-box li img{
    display: table;
    margin: auto;
    margin-bottom: 1.5em
}

.top-mainimg{
    margin: auto;
    height: auto;
}

#top-head{
    margin:auto;
    flex-wrap: wrap;
}

.home main.content{
    margin-top: calc(-48px - 1em);
}

.home #top-head h1.logo,
#top-head p.logo
{
    width: 70%;
    display: flex;
}

.home #top-head h1.logo a,
#top-head p.logo a
{
    display: flex;
}

#header_design{
    width: 20%;
}

.menutext{
    font-size: 4.2vw;
}

#top-head{
    padding-top: 1em;
}

.nav-toggle{
    width: 40px;
}

.nav-toggle span:nth-child(2){
    top: 15px;
}

.home .lowprice{
    margin-top:-91vw;

    /*margin-top:-117vw;*/
}

.home .text-block ruby.en{
    line-height: 1.25em;
    color: #fff;
    font-size: 10vw;
    display: none;
}

.text-block h2.bold{
    font-size: 7vw;
}

.text-block h2.bold{
    font-size: 3.75vw;
    text-align: left;
    /*padding: 0.5em 0;*/
}

.home section:first-of-type .text-block h2.bold{
    font-size: 4vw;
    padding-top: 0.25em;
}

.home .text-block h2.bold{
    text-align: center;
}

.lowprice dl.flex-box{
    display: flex;
    justify-content: space-evenly;
    padding: 0 5%;
}

.home .lowprice dl.flex-box{
    padding: 0;
}

.home .lowprice dl.flex-box{
    margin-bottom: 0.5em;
}

.lowprice dt{
    font-size: 3.7vw;
}

.lowprice dt span.en{
    font-size: 3.5vw;
}

.lowprice dl{
    margin-top: 1em;
}

.lowprice dd.em{
    letter-spacing: 0.025em
}

.text-block dd.en{
    font-size: 11vw;
    letter-spacing: -0.025em
}

.home .lowprice dt{
    margin-right: 0.25em;
    padding: 0.25em 8vw;
}

.lowprice dt{
    padding: 0.25em 8vw;
    margin-right: 0em;


}

.lowprice dd{
    top: -10px;
}

.home .text-block h2.bold{
    margin-bottom: 66vw;
}
/*
.mockup-text ruby{
    display: block;
    text-align: center;
}*/



.text-block ruby.en,
.pagesample ruby.en,
.mockup div > ruby.en{
    /*font-size: 9vw;*/
    font-size: 8vw;
    line-height: 1.5em;
    text-align: left;
}

.pagesample ruby.en{
    text-align: center;
}

.mockup div > ruby{
    display: block;
    text-align: center;
}

.mockup-text h2{
    text-align: center;
    font-size: 3.75vw;
}

.pagesample h2{
    font-size: 3.75vw;
}

.pagesample li{
    width: 50%;
}

.pagesample ul.flex-box{
    display: flex;
    width: 95%;
    margin: auto;
    margin-top: 1em;
}

.pagesample li p{
    font-size: 2.5vw;
}

.mockup{
    margin-top: 3em;
}

.mockup ul.flex-box li h3{
    font-size: 3.5vw;
}

#top-head{
    padding-bottom: 1em;
}

.homepage-products .content > section:last-of-type,
.lowprice.left-padding
{
    width: auto;
}

.pageformat{
    height: auto;
}

.read-text{
    padding: 1em 10%;
}

.home .read-text{
    padding: 1em 5%;
}

.pageformat ruby{
    margin-top: 1.25rem;
    padding-left: 5%;
}

.pageformat h1{
    padding-left: 5%;
    margin-bottom: 1em;
    font-size: 4.2vw;
}

.pageformat .black-link{
    width: 80%;
    margin: auto;
    font-size:3vw;
}

.productshandled .pageformat .black-link{
    width: auto;
    font-size: 3.5vw;
    padding: 0.25em 0.5em;
    margin: auto 0;
}

.flow{
    margin-top: 1.5em;
    padding: 0 5%;
}

.flow ol{
    margin-top: 1em;
    display: flex;
}

.flow li{
    width: 100%;
    padding: 2em 0.5em 0.5em;
    box-sizing: border-box;
    border: none;
}

.flow li img{
    margin: auto;
    /*height: 52%;*/
    width: 37%;
}
.flow li > div{
    height: auto;
}
/*
_::-webkit-full-page-media, _:future, :root .flow li:nth-of-type(1){
    height: 345px !important;
}
_::-webkit-full-page-media, _:future, :root .flow li:nth-of-type(2){
    height: 345px !important;
}
*/

.flow li:nth-of-type(5) img{
    margin: auto;
}

.flow li:nth-of-type(3) img,
.flow li:nth-of-type(4) img,
.flow li:nth-of-type(6) img
{
/*    width: 85%;*/
}

.flow li h3{
    font-size: 4vw;
}

.flow li div{
    left: 0;
}

.flow li p{
    font-size: 3vw;
    width: 95%;
    font-feature-settings: "palt";
}

.homepage-products .flow li{
    height: auto !important;
    border-bottom: 1px solid;
}

.flow li div{
    position: unset;
}

.flow > p{
    font-size: 3.5vw;
    margin-top: -1em;
}


.homepage-products .content > section:last-of-type{
    width: 90%;
}

.mail > p{
    margin-top: 1em;
    font-size: 3.5vw;
}



/*product*/
.productshandled .pageformat:nth-of-type(3) .text-block,
.productshandled .pageformat:nth-of-type(2n) .text-block,
.content section.pageformat:nth-of-type(even) > div:last-of-type,
.content section.pageformat:nth-of-type(odd) > div:first-of-type
{
    width: auto;
}

.productshandled .pageformat:nth-of-type(4) .text-block > .flex-box{
    margin: auto;
    position: unset;
    display: flex;
    justify-content: space-between;
    width: 90%;
}

.productshandled .pageformat:nth-of-type(4) .text-block > .flex-box img{
    width: 49.5%;
}

.handled-item h2.bold{
    padding-left: 5%;
}

.lowprice .handled-item dl{
    margin: auto;
    padding: 0 5%;
}

.text-block .handled-item dd.en{
    font-size: 10vw;
    top: -2px;
}

.handled-item p{
    margin-top: 0;
}

.handled-item{
    margin-top: 0;
}

.productshandled .content section:nth-of-type(2),
.productshandled .content section:nth-of-type(4)
{
    display: flex;
    flex-wrap: wrap-reverse;
}

.productshandled .content section:nth-of-type(2) .lowprice,
.productshandled .content section:nth-of-type(4) .lowprice
{
    margin-top: 1.25rem;
}

.productshandled .content section{
    margin-bottom: 3em;
}

.handled-item .hp-contents{
    margin-bottom: 0;
    font-size: 3vw;
    font-feature-settings: "palt";
    margin: 0.5em 0 0.5em;
}

.productshandled .pageformat:nth-of-type(3) .text-block
{
    padding-top: 0;
    margin-top: 0;
}

.business-logo{
    margin: 2em 3em 1em;
}

.contact7{
    padding-top: 0;
    width: 90%;
    margin: auto;
}

.contact-confirm .content{
    width: auto;
    margin-top:3em;
}

.thanks .contact7{
    padding-top: 4em;
    box-sizing: border-box;
}

.footrerightbox{
    margin-left: 0.5em;
}

.breadcrumbs{
    width: 90%;
    margin: 0.5em auto -0.5em;
    font-size: 3vw;
}

.breadcrumbs > span{
    margin: 0 0.5em;
}

.breadcrumbs > span:first-of-type{
    margin-left: 0;
}
/*
span.post.post-page.current-item {
    color: #979797ee;
}
*/
/*一旦*/
#wpadminbar{
    display:none;
}
}