@charset "utf-8";

html {
    -webkit-text-size-adjust: 100%;
}

/*------------------------------*/
/*メイン関係ここから		*/
/*------------------------------*/

html,
body {
    line-height: 1.6;
    text-align: center;
    font-size: 13px;
    font-weight: normal;
    color: #333;
    font-feature-settings: "palt";
    min-width: 320px;
    /*    overflow: hidden;*/
}


.bold {
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
    box-sizing: inherit;
}


a {
    text-decoration: none;
    color: #666666;
}

.fPc {display:none !important;}
.fPci {display:none !important;}
.fPcib {display:none !important;}

.fSp {display:block !important;}
.fSpi {display:inline !important;}
.fSpib {display:inline-block !important;}


.fSp02 {display:none!important;}

.w100 {
    width: 100% !important;
}
.w100 {width:100% !important;}

img {max-width:100%;height:auto;}
img.w40 {max-width:40%;height:auto;}

strong {font-weight:bold;}

/*ここから*/
#wrap {
    display: none;
    min-width:100vw;
}

/*共通*/
section {
    padding: 1.6rem 0;
    
}
.mainBox {
    width:92%;
    margin: auto;
}

.ochiba {
    text-indent: -1em !important;
    margin-left: 1em !important;
}

#pageHeader {
    margin-top: 60px;
}
section h2:not(#productTitle) {
    font-size: 1.4rem;

}
#home section h2 {
    padding-top: 1.5rem;
    font-size: 1.4rem;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

/*共通*/
#pageHeader {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    height: 240px;
}
p.lead {
    font-size: 1.2rem;
}


/*メッセージリスト*/

ul.msgList.flexCont.flexStart {
    /* -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; */
}

ul.msgList > li:not(:nth-of-type(3n)){
    margin-right: 5%;
}

ul.msgList > li{
    width:30%;
}
ul.msgList > li h3{
font-size: 1rem;
}
ul.msgList > li p{
    height: 5rem;
}
/*-----
ナビ meanmenu
-----*/

header {
    display: none;
}
#headerLogoSp {
    
    position: fixed;

    top: 10px;
    left: 10px;
    z-index:9999 ;
/*    margin-right: 1rem;*/
}
#headerLogoSp img{
    height: 42px;
    width: auto;
}
#headerRight {
    display: none !important;
}


/*---------------------------*/
/*footer*/
/*---------------------------*/
footer {
    margin-top: 4rem;
}
#footerLeft {
    width: 100%;
    text-align: center;
}
#footerMenu {
    display: none;
}
#footerTop::before {
    width: 100%;
    height: 100px;
    top:-100px;
    /* background-image: url(./images/footerTopBackSp.png); */
    background-size: 100%;
    background-position: center bottom;
}
#footerLeft p{
    text-align: center;
}

#toTopBtn {
    bottom: 20px;
    right: 5%;
}

/*---------------------------*/
/*top*/
/*---------------------------*/
/*mainV---------------------------*/
section#mainV {
    padding-top: 60px;
    height: auto;
}

/*スライド*/
.bxslider2 {
	overflow: hidden;
	/* height:100vh; */
    max-width:100vw ;
}
.bxslider2 .bxslider {
	max-width: 100vw;
	width: 100vw;
	margin: 0 auto;
    /* height: 100vh; */
}
.bxslider2 ul {
    /* height: 100vh; */
}
.bxslider2 ul li {
	/* height: 100vh; */
}
.bxslider2 .bx-viewport {
	overflow: visible !important;
}

.bx-wrapper,.bx-wrapper .bx-viewport {  
    background-color:transparent;
 }

 .bx-wrapper .bx-prev {
	left: 9px;
	background: url(./images/arrowL.png) no-repeat ;
    background-size: 9px 21.5px;
}

.bx-wrapper .bx-next {
	right: -14px;
	background: url(./images/arrowR.png) no-repeat ;
    background-size: 9px 21.5px;
}
.bxslider2 #slideCap{
    width: 100%;
    height: 90px;
    font-size: 1rem;
}

#home #productsList li{
    box-sizing: border-box;
    height: auto;
    padding: 2rem 0;
}

#home #productsList li h3{
    font-size: 1.6rem;
}
#home #productsList li#product01 h3{
    margin-left: 48vw;
}
#home #productsList .productCont > figure{
    max-width: 450px;
    width: 45vw;
    /* margin-left: auto; */
}
#home #productsList .productCont > div{
    width: 45vw;
    padding: 1.2rem;
}
#home #productsList .productCont > div h4{
    font-size: 1.4rem;
}
#home #productsList .productCont > div p.h4Sub {
    font-size: 1rem;
}
#aboutMenuList li {
    height: auto;
}
#aboutMenuList li a > div{
    padding: 1rem
}
#aboutMenuList li a > div h3{
    font-size: 1.2rem;
}
#aboutMenuList li a > div p{
    margin-bottom: 1rem;
}
/*EneYell（エネエール）---------------------------*/
h2#productTitle {
    font-size: 1.5rem;
}
#productLead h3{
    font-size: 1.2rem;
}
#productDetail h3{
    font-size: 1rem;
    white-space: nowrap;
}
.tableScroll {
    margin-bottom: 2.4rem;
}
table.conpari tr.head th {
    font-size: 1rem;
}
table.conpari tr:not(.head) th{
    font-size: 1rem;
}
/*水の子健康倶楽部---------------------------*/
#pageHeader.product02 h1{
    width: 86%;
    text-align: left;
    margin-left: 0;
}
#aboutTop figure.aboutTopImg {
    max-width: 40vw;
    /* overflow: auto; */
}
#aboutTop p{
    font-size: 1.2rem;
}

/*会社概要---------------------------*/
#companyHist td figure {
    max-width: 30%;
}
#companyDetail .companyDetail > div h2{
    margin-bottom: 1rem;
}
#companyDetail .companyDetail > div {
    padding: 1rem;
    padding-top: 1.4rem;
    padding-bottom: 0;
}
#companyDetail .companyDetail tr.celTop th,#companyDetail .companyDetail tr.celTop td{
    font-size: 1rem;
}
#companyDetail .companyDetail th{
    width: 30%;
}
#company.pageLead .mainBox {
    box-sizing: border-box;
    padding: 1rem 20px;
}
#companyHist .mainBox{
    padding: 0;
}
/*ご利用方法faq---------------------------*/

#howto h4{
    min-height: 2.2rem;
    margin-bottom: 1rem;
}
#howto .subscList01 > li h4{
    font-size: 1.4rem;
    white-space: nowrap;
    min-height: auto;
    margin-bottom: auto;
}
#howto .subscList01 > li h5{
    font-size: 1rem;
    white-space: initial;
}


#howto .subscList01 > li h4 + span{
    font-size: 0.9em;
}
#howto dl dt{
    white-space: nowrap;
}
@media screen and (max-width: 480px) {
    #howto #attBox.sterliz figure{
        width: 100%;
    }
}

#faq .qBox p,#faq .aBox p{
    padding-left: 2.4rem;
}
/*---------------------------*/
/*問い合わせ*/
/*---------------------------*/
#contact .receptTitle span{
    width: 60px;
    height: 60px;
    font-size: 1.2rem;
}
#contactDetail .contactList li p.number img{
    height: 40px;
    width: auto;

    /* font-size: 2rem; */
}

table.contact td label{
    white-space: initial;
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 10px !important;
}
table.contact th {
font-size: 1rem;
}
/*縦時*/
 @media (orientation: portrait){ 

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

    .fSp02 {display:block !important;}
    .flexCont {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; 
    }
    .mainBox {
        width:84%;
    }
    #footerTop .btnList li{
        width: 90%;
        margin: auto;
        height: 68px;
    }
    #footerTop .btnList li:not(:last-child){
        margin-bottom: 1rem;
    }
    #footerLogo {
        max-width: 50vw;
        height: auto;
    }
    #footerTop::before {
        width: 100%;
        background-image: url(./images/footerTopBackSp.png);
        background-size: 100%;
        background-position: center bottom;
    }
/*メッセージリスト*/
    ul.msgList.flexCont.flexStart {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    ul.msgList > li{
        width:100%;
    }
    ul.msgList > li figure{
        width: 100%;
    }
    /*---------------------------*/
    /*top*/
    /*---------------------------*/
    /*mainV---------------------------*/
    section#mainV {
        height: 100vw;
    }

    /*スライド*/
    .bxslider2 {
        overflow: hidden;
        height:100vw;
        max-width:100vw ;
    }
    .bxslider2 .bxslider {
        max-width: 100vw;
        width: 100vw;
        margin: 0 auto;
        height: 100vw;
    }
    .bxslider2 ul {
        height: 100vw;
    }
    .bxslider2 ul li {
        height: 100vw;
    }

    section#mainV .slide01 {
        background-image: url(./images/slide01Sp.png);
            background-size: cover;
    }
    section#mainV .slide02 {
        background-image: url(./images/slide02Sp.png);
        background-size: cover;
    }
    section#mainV .slide03 {
        background-image: url(./images/slide03Sp.png);
        background-size: cover;
    }
    #home #productsList li#product01{
        background-image: url(images/product01TopBackSp.jpg);
        background-position: center center;
    }
    #home #productsList li#product01 .productCont > figure{
        margin-left: auto;
    }

    #home #productsList li#product02{
        background-image: url(images/product02TopBackSp.jpg);
    }
    #home #productsList li#product02 .productCont {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    #home #productsList li h3{
        text-align: center;
    }
    #home #productsList li#product01 h3{
        margin-left: 0;
    }
    #home #productsList .productCont > div{
        width: 100%;
        margin: auto;
    }
    #aboutMenuList {
        -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
    }
    #aboutMenuList li {
        width: 100%;
        height: auto;
        margin-bottom: 2rem;
    }
    #aboutMenuList li a > div{
        padding: 2rem;
    }

    /*EneYell（エネエール）---------------------------*/
    #pageHeader.product01 {
        background-image: url(images/product01BackSp.jpg);
    }
    #pageHeader.product01 h1{
        width: 86%;
        text-align: right;
        margin-left: 0;
    }
    .product01List li{
        max-width: 92vw;
        width: 100%;
        margin-bottom: 1.2rem;
    }
    #productLead > div {
        max-width: 100vw;
        width: 100%;
    }
    #productLead > figure {
        max-width: 100vw;
        width: 100%;
        margin-bottom: 1rem;
    }
    #productLead h3{
        white-space:initial;
    }
    .tableScroll {
        /* width: 960px; */
        overflow-x:scroll;
    }
    .productSub.flexCont.flexJust.beigeBox {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    #product01 .productSub figure{
        max-width: 100vw;
        width:100%;
        margin-bottom:1.6rem;
        margin-left:0;
    }

    .productSub figure img{
        width:100%;
        height:auto;
    }
    .productSub table th {
        width: 30%;
    }
    
    /*水素---------------------------*/
    #pageHeader.product02 {
        background-image: url(images/product02BackSp.jpg);
    }

    #product02 #productDetail .productCont div{
        width: 100%;
        /* text-align: justify; */
    }
    #product02 #productDetail .productCont figure {
        max-width: 100vw;
        width:100%;
        padding-bottom: 3rem;
    }
    #product02 #productDetail h3 {
        white-space: initial;
    }
    #product02 .productSub figure{
        max-width: 100vw;
        width:100%;
        margin-bottom:1.6rem;
        margin-left:0;
    }

    /*水の子健康倶楽部---------------------------*/
    #pageHeader.about {
        background-image: url(images/aboutBackSp.jpg);
    }

    #aboutTop figure.aboutTopImg {
        max-width: 90%;
        margin: 1rem 0;
    }
    section#about.pageLead {
        margin-bottom: 2rem;
    }

    #aboutDetail .aboutList li{
        
        margin-bottom: 2rem;
    }
    #aboutDetail .aboutList li div{
        width: 100%;

    }
    #aboutDetail .aboutList li figure{
        width:100%;
        margin-bottom: .6rem;
    }

    #aboutDetail ul.subscList > li{
        width: 100%;
        margin-bottom: 1rem;
    }

    #aboutDetail .subscReason {

        padding: 1rem 1.5rem;
    }

    /*会社概要---------------------------*/
    #pageHeader.company {
        background-image: url(images/companyBackSp.jpg);
    }
    #company.pageLead .mainBox {
        padding: 1.6rem;
        background-size: 178px 136px;
    }
    #company.pageLead .ceoTop figure {
        width: 100%;
    }
    #company.pageLead .ceoTop p{
        width: 100%;
    }

    #companyHist .mainBox table td {
        /* width: 15%; */
        padding-left: 1.4rem;
    }
    #companyDetail .companyDetail >* {
        width: 100%;
    }
    #companyDetail .companyDetail > div {
        width: 100%;
        padding: 2.4rem 1.2rem;
    }

    #companyDetail {
        margin-bottom: 8rem;
    }
    /*ご利用方法faq---------------------------*/
    #pageHeader.faq {
        background-image: url(images/faqBackSp.jpg);
    }
    #howto .subscList01 > li,#howto .subscList02 > li{
        width: 100%;
        margin-bottom: 1.6rem;
    }

    /*メッセージ---------------------------*/
    #pageHeader.message {
        background-image: url(images/messageBackSp.jpg);
    }

    ul.msgList > li h3{
        font-size: 1.2rem;
        }
    ul.msgList > li:not(:nth-of-type(3n)){
        margin-right: 0;
    }
    ul.msgList > li{
        margin-bottom: 2rem;
    }
    /* .bxslider2 {
        overflow: hidden;
        height:60vw;
    } */
    #messageDetail #messageDetailTop {
        padding: 0;
    }
    #messageDetail .items dt{
        width: 25%;
    }
    #impress.mainBox {
        padding:15px 20px;
    }
    /*---------------------------*/
    /*問い合わせ*/
    /*---------------------------*/
    #pageHeader.contact {
        background-image: url(images/contactBackSp.jpg);
    }
    #pageHeader.order {
        background-image: url(images/orderBackSp.jpg);
    }
    #pageHeader.thanks {
        background-image: url(images/thanksBackSp.jpg);
    }
    .recept.flexCont {
        /* -ms-flex-wrap: nowrap;
  	    flex-wrap: nowrap; */
    } 
    #contactTop table th{
        padding-right: 1rem;
        font-weight: bold;
    }
    #contactTop table,#contactTop table tbody,#contactTop table tr,#contactTop table td{
        display: block;
        width: 100%;
    }
    #contactDetail .contactList li{
        width: 100%;
        margin-bottom: 3rem;
    }
    #contactDetail h3{
        font-size: 1.2rem;
        font-weight: bold;
    }
    #contactDetail .contactBox {
        padding: 1.6rem;
        box-sizing: border-box;
    }
    #contactDetail .contactList {
        margin-bottom: 0;
    }
    table.contact th,table.contact td {
        padding: 0;
    }
    table.contact,table.contact tbody,table.contact tr{
        display: block;
        width: 100%;
    }

    table.contact th,
    table.contact td {
        display: block;
        border: none;
        width: 100%;
    }
    table.contact th {
        padding:10px 0;
        height: auto;
    }
    table.contact td {
        margin-bottom: 1rem;
        height: auto;
    }
    table.contact td input[type="text"],table.contact td textarea {
        border:1px solid #ddd;

    }
}