@charset "utf-8";

/*@media only screen and (max-width: 1450px) {*/

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

        main {
            margin-top: 0;
        }
        h2 {
            font-size: 1.6rem;
            line-height: 1.2;
            margin-bottom: 2.5vh;
        }
        h2 span {
            margin: 0 0 1.5vh;
        }
        .gotop {
            width: 30px;
            height: 30px;
            position: fixed;
            bottom: 5px;
            right: 5px;
            border-radius: 50%;
            z-index: 9999;
        }
        .gotop a {
            width: 30px;
            height: 30px;
        }
        .gotop a::before {
            font-size: 17px;
            width: 15px;
            height: 21px;
        }
        .copyright {
            text-align: left;
            width: 95%;
        }
        header  {
            margin-bottom: 0vh;
        }
        header .inner {
            width: 50%;
            right: inherit;
            left: 3vw;
        }
        header .inner span.fab {
            color: #00627d;
        }
        header .head_text {
            width: 70%;
            height: 50vh;
            z-index: 1;
            margin: auto;
        }
        header .head_text img {

        }
        header .tente {
            height: 12vh;
        }
        header span.fab {
            margin-right: 3.5vw;
        }
        #menu dl {
            margin: 9vh 7vw 5vh;
        }
        #menu div.title01 {
            margin: 9vh 7vw 2vh;
        }
        #menu dd {
            margin: 0 2vw 0 40px;
        }
        #menu .sns {
            margin: 0 6vw 2vh;
        }
        #sp-icon {
            right: 3vw;
            top: 1.5vh;
            position: fixed;
        }
        #sp-icon.sp-open {
            position: fixed;
        }
        #sp-icon span, #sp-icon span:before, #sp-icon span:after {
            box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.35);
            -moz-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.35);
            -webkit-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.35);
            -o-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.35);
            -ms-box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.35);
        }
        .gotop {
            z-index: 9;
        }

        .big-font {
            font-size: 1.3em !important;
        }
        .middle-font {
            font-size: 102% !important;
        }


        .tabete-logo{
            width: 25vw;
        }

        .product-items .slick-track{
            gap: 0;
        }
        .product-slide .item-list{
            width: calc(100vw / 3);
        }
        .product-slide-box {
            padding-top: 30px;
        }

        .slick-slider img{
            width: auto;
            height: 130px;
            object-fit: contain;
            object-position: top;
            margin: 0 auto;
        }

        header .zen-logo{
            width: 38vw;
            top: 38vw;
            right: 6vw;
        }
        header svg {
            position: relative;
            z-index: 1;
            padding-top: 1vw;
        }
        header [class^="main-items_sp0"]{
            z-index: 5;
        }
        header .main-items_sp01{
            top: 50vw;
            left: 5%;
            position: absolute;
            width: 46vw;
        }
        header .main-items_sp02{
            bottom: 5vw;
            right: 0;
            position: absolute;
            float: right;
            margin-right: 5%;
            width: 43vw;
        }
        header .back-image {
            width: 60vw;
            bottom: -10vw;
            left: 50%;
            transform: translateX(-50%);
        }
        .header-text{
            background-color: #FFF;
            margin-top: -10px;
            width: 100%;
            height: auto;
            min-height: 100vw;
        }

        .header-text_contents{
            top: 22vw;
            width: fit-content;
            left: 5%;
            gap: 0.5rem;
            position: relative;
        }

        .header-text_contents p{
            font-size: 100%;
            padding: 8px;
        }
        .header-sp{
            position: relative;
            z-index: 5;
        }
        .desc_content {
            margin: 40px auto;
        }

        .desc_contents_box{
            width: 90%;
        }
        .desc_content .desc_txt-box p {
            line-height: 2.5rem;
        }
        .desc_contents_box .title_box{
            display: block;
            position: relative;
            margin: 40px auto;
        }
        #ProductDesc .desc_contents_box .title_box figure.sp{
            width: 60vw;
            position: relative;
            top: 10vw;
            float: right;
        }
        .desc_contents_box .title_box .desc_contents-title{
            font-size: 1.3em;
            margin-bottom: 1em !important;
            line-height: 2.5em;
        }
        .desc_contents_box .title_box h3.desc_contents-title span.bg-white{
            margin-right: 0.5rem;
            padding: 0.08em 0.3em 0.1em;
        }
        .desc_contents_box .desc_content{
            display: block;
            overflow: hidden;
        }
        #ProductDesc .desc_contents_box .desc_content figure.sp{
            width: 90vw;
        }
        #ProductDesc .desc_features{
            width: 100%;
            height: auto;
        }
        #ProductDesc .desc_features figure.sp{
            position: relative;
            margin: 0;
            width: 100vw;
        }
        #ProductDesc .desc_features figure.sp img{
            border-radius: 0;
        }
        #ProductDesc .desc_features .desc_features_txt-right{
            top: 40%;
            right: 5%;
        }
        #ProductDesc .desc_features .desc_features_txt-left{
            top: -6%;
            left: 5%;
        }
        #ProductDesc .desc_features p.n1{
            margin-top: -2vw;
        }
        #ProductDesc .desc_features p.n4{
            margin-top: 8vw;
        }
        #ProductDesc .desc_point-box{
            width: 90%;
        }
        #ProductDesc .desc_point-contents{
            display: block;
            padding-top: 6vw;
        }
        #ProductDesc .desc_point-contents [class^="point0"]{
            padding: 10% 6%;
        }
        #ProductDesc .desc_point-contents .point-img-area{
            padding-bottom: 3vw;
        }
        #ProductDesc .desc_point_contents-box .point-icon{
            top: 5vw;
            font-weight: 800;
        }
        .desc_point_contents-box .point-img {
            width: 100%;
            border-radius: 50%;
        }
        .desc_point_contents-box .point-img img {
            width: 90%;
            max-width: unset;
            margin-top: 0;
            margin-left: auto;
        }
        #ProductDesc .desc_point-contents .bg-white-alpha-dark{
            padding: 0 4vw;
        }
        #convenient-situaition {
            padding-bottom: 0;
        }

        #convenient-situaition .situation-box{
            width: 100vw;
            padding: 0;
            margin: 0;
            background-size: 90% 100%;
        }
        #convenient-situaition  .situation-box .title-area{
            width: 100%;
            position: relative;
            z-index: 2;
            top: 10vw;
        }
        div.title_box img.title-img{
            left: 50%;
            transform: translateX(-50%);
            position: relative;
        }
        .title_box img.title-img.left-img{
            rotate: 45deg;
            top: 2em;
            transform-origin: center;
            left: 40%;
        }
        #convenient-situaition .situation_contents-box{
            flex-wrap: wrap;
            flex-direction: column-reverse;
            margin-top: 20vw;
        }

        #convenient-situaition .situation_contents-box.area02{
            margin-bottom:25vw;
            margin-top: 15vw;
        }
        #convenient-situaition .situation_contents-box .image-area{
            margin: auto;
            text-align: center;
        }
        #convenient-situaition .situation_contents-box .situation_text-box{
            background-size: cover;
            padding: 3em 1em;
            width: 100%;
        }
        #convenient-situaition .situation_contents-box .image-area .image-box{
            top: -6vw;
            z-index: 1;
            width: 85%;
            margin: auto;
        }
        #convenient-situaition .situation_contents-box.area03 .image-area .image-box{
            top: -15vw;
        }
        #convenient-situaition .situation_contents-box .image-area .image-box img{
            width: 85%;
            margin: auto;
        }
        #convenient-situaition .situation_contents-box.area03 .image-area .image-box img{
            width: 80%;
        }
        #convenient-situaition .situation_contents-box .image-area .image-box .people-illust{
            top: 1em;
        }
        #convenient-situaition .situation_contents-box.area03 .image-area .image-box .people-illust{
            top: 5em;
        }
        #convenient-situaition .situation_contents-box .image-area .image-box .people-illust img{
            width: 105%;
        }

        #convenient-situaition .situation_contents-box.area01 .situation_text-box{
            background-image: url(../images/balloon_01_sp.png);
        }
        #convenient-situaition .situation_contents-box.area02 .situation_text-box{
            background-image: url(../images/balloon_02_sp.png);
        }
        #convenient-situaition .situation_contents-box.area03 .situation_text-box{
            background-image: url(../images/balloon_03_sp.png);
            padding-top: 2em;
            padding-bottom: 4em;
        }

        #convenient-situaition .situation-box .maincontents-area::before,
        #convenient-situaition .situation-box .maincontents-area,
        #convenient-situaition .situation-box .maincontents-area::after{
            background-size: 80% 100%;
            width: 100%;
            min-height: 30vw;
        }
        #convenient-situaition .situation-box .maincontents-area{
            position: relative;
            top: -35vw;
            z-index: 1;
        }
        #convenient-situaition .situation_text-box .situation_text{
            padding: 2em 1em;
        }

        #CustomerVoice .voice-contents-box{
            display: block;
            margin: 0px auto 50px;
        }
        #CustomerVoice .voice-contents-title{
            border-top-right-radius: 15px;
            border-bottom-left-radius: 0;
        }
        #CustomerVoice .voice-contents-box{
            width: 90vw;
        }
        .more{
            width: 50vw;
        }
        #Recommend .main-contents{
            width: 100vw;
            background: url(../images/back_dot_sp.png) no-repeat ;
            background-size: cover;
            border-radius: 0;
            margin-top: 0;
            padding-bottom: 12vw;
        }
        #Recommend figure.recommend-topimg.sp {
            width: 100vw;
            position: relative;
        }
        #Recommend figure.recommend-topimg.sp img{
            width: 100%;
        }
        #Recommend .desc_features{
            right: 5%;
            top: -22vw;
        }
        #Recommend .bubble-images{
            height: calc(100vh + 20vw);
        }
        #Recommend .bubble-images .me-time{
            width: 50vw;
            top: 16vw;
            left: 17vw;
        }
        #Recommend .bubble-images .present-to-friend{
            width: 46vw;
            top: 61vw;
            right: 5vw;
        }
        #Recommend .bubble-images .lunchbox{
            width: 54vw;
            top: 70vw;
            left: 4vw;
        }
        #Recommend .bubble-images .busy-time{
            width: 58vw;
            top: 168vw;
            left: 50%;
            transform: translateX(-50%);
        }
        #Recommend .bubble-images .present-to-parent{
            width: 53vw;
            top: 115vw;
            right: 5vw;
        }
        #Recommend .bubble-images .relax{
            width: 26vw;
            top: 130vw;
            left: 10vw;
        }


        .main-items{
            width: 26vw;
            top:10vh;
            left: 5vw;
        }
        .product-desc-title{
            width: auto;
        }

        .product-desc-title h2{
            font-size: 20px;
        }
        
        .product-desc-title h2 span{
            padding: 1rem;
            /*display: block;
            margin: 0;
            margin-bottom: 0.5em;
            width: 100%;
            white-space: nowrap;*/
        }

        #lineup .lineup-titlearea{
            height: fit-content;
            margin-right: auto;
        }
        #lineup .lineup-titlearea .title-logo-area{
            position: relative;
            margin: 2em 0;
            top: 0;
        }
        #lineup .lineup-titlearea h2{
            margin-top: 0;
        }
        #lineup .lineup-titlearea figure.zen-logo{
            width: 40vw;
        }
        #lineup .lineup-titlearea figure.sp img{
            width: 100%;
        }
        #lineup .lineup-titlearea figure.sp{
            position: relative;
            width: 100vw;
        }

        #lineup .products-box [class^="item0"]{
            width: 100%;
            min-width: unset;
        }
        #lineup .products-box{
            flex-direction: column;
            flex-wrap: nowrap;
            row-gap: 10vw;
            width: 85%;
        }
        .products-box .button-area {
            column-gap: 1em;
        }
        .products-box .button-area div {
            width: 48%;
        }
        .products-box .product-desc {
            min-height: unset;
        }

        footer .footer_inner{
            padding: 0 1em;
        }
        footer .footer_inner .footer_logo{
            margin-bottom: 2em;
        }
        footer .footer_inner ul.footer_link{
            clear: both;
        }
        footer .footer_inner ul.footer_link li{
            float: none;
        }



    }