@charset "UTF-8";

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

body{
    -webkit-text-size-adjust: 100%;
    max-height: 100%;
    min-width: 640px;}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fildset,input,textarea,p,blockquote,table,th,td,address{
	font-size:21px;}
    img{
        max-width: 640px;
        height: auto;
    }
img.smp,
br.smp{display:inline}

br.pc,
img.smp + img{display:none}

#wrapper{
width:640px;
    min-width: 640px;
padding-top:110px;
overflow:hidden}

    h2{
        padding: 92px 40px;
        width: 560px;}
    h2 strong{
        line-height: 161%;
    }
    
    h3{
        font-size:161%;
        margin-bottom: 40px;}

    .inner{
        width: 640px;}

    #cont{
        width: 640px;}
    
/****************head****************/

#head{
	width:640px!important;
    z-index:200;
    position: fixed;
    background: rgba(255,255,255,0.9);
    top: 0;
    border-bottom: 2px solid #FF9326;
    padding: 30px 0;}
    
#head h1{
    margin:0 0 0 40px;
    }
    
    #head ul#gnavi{
        box-sizing: border-box;
        position: absolute;
        flex-wrap: wrap;
        top:0;
        width: 640px;
        z-index: 100;
        background-color: rgba(255,147,38,0.9);
        height: 100vh;
        padding-top: 12vh;
        margin-top: 0;}
    
    #head ul#gnavi li{
        box-sizing: border-box;
        background: none;
        width: 320px;
        height: 22vh;
        border-top: 1px solid #fff;}
    
    #head ul#gnavi li:last-child{
        width: 100%;
        background: url(../img/common/gnavi07hover.png) top 5vh left 50% no-repeat #CF3743;
    }
    
    #head ul#gnavi li a{
        display:block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        color:#fff;
        border-bottom: none;
        font-size:100%;
        padding: 12vh 0 0;}
    
        #head ul#gnavi li:nth-child(1) a{background: url("../img/common/gnavi01hover.png") top 5vh left 50% no-repeat;}
        #head ul#gnavi li:nth-child(2) a{background: url("../img/common/gnavi02hover.png") top 5vh left 50% no-repeat;}
        #head ul#gnavi li:nth-child(3) a{background: url("../img/common/gnavi03hover.png") top 5vh left 50% no-repeat;}
        #head ul#gnavi li:nth-child(4) a{background: url("../img/common/gnavi04hover.png") top 5vh left 50% no-repeat;}
        #head ul#gnavi li:nth-child(5) a{background: url("../img/common/gnavi05hover.png") top 5vh left 50% no-repeat;}
        #head ul#gnavi li:nth-child(6) a{background: url("../img/common/gnavi06hover.png") top 5vh left 50% no-repeat;}
        #head ul#gnavi li:nth-child(7) a{
        width: 100%;
        background: url("../img/common/gnavi07smaho.png") top 5vh left 50% no-repeat #CF3743}
    
#head #menuBtn{
	float:right;
	display:block;
	background:url(../img/index/640/menuIcon.png) no-repeat;
	width:70px;
	height:70px;
	text-indent:-9999px;}
    
.menuBtn,
.menuBtn span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;}
  
.menuBtn {
  position:absolute;
  top:40px;
  right:50px;
  width: 40px;
  height: 34px;
    z-index: 200
}
.menuBtn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #FF9326;
}
a.active span{
  background-color: #fff;
}
.menuBtn span:nth-of-type(1) {
  top: 0;
}
.menuBtn span:nth-of-type(2) {
  top: 15px;
}
.menuBtn span:nth-of-type(3) {
  bottom: 0;
}
.menuBtn.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(17px) rotate(-45deg);
}
.menuBtn.active span:nth-of-type(2) {
  opacity: 0;
}
.menuBtn.active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(45deg);
  transform: translateY(-13px) rotate(45deg);
}

/****************foot****************/
    
    .contactSNS{
        display: flex;
        top: auto;
        bottom:0;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .contactSNS p{
        margin: 0;
        padding: 0;
    }
    .contactSNS p a{
        width: 50vw;
        padding: 4vw 8vw;
        box-sizing: border-box;
        writing-mode: horizontal-tb;
        text-align: center;
    }
    
    p#pagetop{
        right: 4vw;
        bottom :20vw;
        margin: 0;
    }
    
    #footer{
        padding-top: 0;
    border-top: solid 5px #FF9326;
    }
    #footCont{
        width: 640px;
        padding-top: 8vw;
    }
    
    #footSns{
        padding-bottom: 0;
        border-bottom: none;
    }
    
    #footLink{
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
        border: none;
        border-top: 1px solid #FF9326;
        padding: 0;
        margin-bottom: 80px;
    }
    #footLink li,
    #footLink li:last-child{
        width: 50%;
        text-align: left;
        border: 0;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        border-bottom: 1px #FF9326 solid;}
    
    #footLink li:nth-child(2n){
        border-left: 1px #FF9326 solid;}
    
    #footLink li a{
        display: block;
        width: 100%;
        height:  100%;
        padding: 40px 0 40px 40px;
        box-sizing: border-box;
        background-position: left 20px top 50%;}
        
    #footInfo{
        display: block;
        padding: 0 40px;
    }
    #footInfo p.btn{
        width: 100%;
    }
    #footInfo h3,
    #footInfo dl,
    #footInfo p{
        text-align: center;
        width: 560px;
        margin: 0 0 40px;
        padding: 0;
        border: 0;}
    
    #copyright{
        width: 560px;
        padding: 80px 40px;
    }
    #copyright h3 strong{
        font-size: 140%;
    }

/****************main****************/
    
    #main{
        display: block;
    }
    
    #pathLink .inner ul{
        width: 560px;
        padding: 10px 40px;
    }
    
    #pathList{
        background-color:#f0f0f0;
        padding: 10px 40px;
        margin-bottom: 40px;
    }
    #selTab ul li{
        margin-right: 0;
    }
    #selTab ul li a{
        font-size: 100%;}
    
    .contactArea h3{
        font-size: 161%;
    }
    
    
    .contactArea .contact{
        width: 96vw;
        margin: 0 auto;
        padding: 4vw;
    }
    .contactArea .contact p{
        width: 100%;
        padding: 0;
        border: none;
        margin:0 0 4vw;
    }
    .contactArea .contact p a{
        padding: 8vw;
        display: block;
    }
    .contactArea .contact p:last-child{
        margin-bottom: 0;
    }
    .contactArea .contact p.telPic a strong{
        font-size: 200%;
    }
    
/******************INDEX******************/
    
    #index #cont{padding: 0;}
    
/*=========== flex01 ===========*/
    
    .flex01{width:  100%}
    
    .flex01 ul.slides li h2 a img{
        width: 640px;
        height: 395px;
    }
    
    .flex01 ul.slides h2,
    .flex01 ul.slides li{width: 100%;}
    
    .flex-control-nav li{margin: 0 10px;}
    
    .flex-control-paging li a,
    .flex-control-paging li a.flex-active{
        width: 20px;
        height: 20px;}
    
    .flex-control-nav{bottom:-56px;}
    
    
/*=========== area00 ===========*/
    
    #index .area00 .inner{
        width: 100vw;
    }
    #index .area00 .inner .movieArea{
        width:100vw;
        margin-bottom: 8vw;
    }
    #index .area00 .inner .detail{
        width: 100vw;
        padding: 0 4vw;
        box-sizing: border-box;
        text-align: center;
        background: url("../img/index/area00_bg.jpg") left top no-repeat;
    }
    
/*=========== area01 ===========*/
    
    #index .area01 .cont{
        width: 100%;
    }
    #index .area01 ul li a img{
        width: 315px;
    }
    #index .area01 ul li{
        margin-bottom: 10px;
    }
    
    #index .area01 ul li.detailBn{
        margin: 4vw;
        width: 92vw;
    }
    #index .area01 ul li.detailBn figure img{
        width: 100%;
        height: auto;
        object-fit: cover;}
    
    
/*=========== area01 ===========*/
    
    #index .sectionH3 h3 strong{
        font-size: 200%;
    }
    
/*=========== flex02 ===========*/
    
    .flex02 {width: 100%;}
    
    .flex02 ul.list li ul{
        display: none;
    }
    ul.list li figcaption p{
        border: none;
        padding-bottom: none;
    }
/*=========== area02 ===========*/
    
    #index .area02{padding: 8vw 4vw 50vw;}
    
    #index .area02 .cont{width: 92vw;}
    
    #index .area02 ul li a img{
        width: 44vw;
        height: auto;}
    
/*=========== ABOUT ===========*/
    
    #index .about .cont{width: 100%;}
    
    #index .about .cont p strong{font-size: 161%;}
    
    #index .area03 .cont{
        flex-wrap: wrap;
        flex-direction:column-reverse;
        width: 100%;}
    
    #index .area03 .moiveCont{
        width: 560px;
        margin: 0 auto 40px;
        text-align: center;}
    
    #index .area03 .movieArea{margin-bottom: 40px;}
    
    #index .area03 .moiveCont h4{font-size: 200%;}
    
/*=========== area04 ===========*/
    
    #index .area04{
        flex-wrap: wrap;
        width: 100%;
    }
    #index .area04 .leftCont,
    #index .area04 .rightCont{
        width: 100%;
    }
    #index .area04 .leftCont .inner{
        width: 100%;
        margin: 0 40px;
        box-sizing: border-box;
    }
    
    #index .area04 .leftCont .inner h3,
    #index .area04 .leftCont .inner dl dd{
        font-size:261%;
    }
    
    #index .area04 .leftCont .inner p.btn a{
        width: 100%;
        padding: 40px 20px;
    }
    
    #index .area04 .rightCont{
        line-height: 560px;
    }
    
/*=========== area04 ===========*/
    
    #index .area05 .cont{
        width: 100%;
    }
    #index .area05 .leftCont,
    #index .area05 .rightCont{
        width: 100%;
        margin-bottom: 80px;
    }
    #index .area05 .rightCont{
        margin-bottom: 0;}
    
/*=========== area06 ===========*/
    
    #index .area06 .cont,
    #index .area06 .cont ul{
        width: 560px;
    }
    #index .area06 .cont ul li{
        width: 260px;
        margin-bottom: 40px;
    }
    
/******************NEWS******************/
    
    #news #cont{
        width: 560px;
        margin: 0 auto;
    }
    #news #cont .content,
    #news #cont .content figure,
    #news #cont .content figure img,
    #news #cont .content dl{
        width: 560px;
    }
    #news #cont .content figure,
    #news #cont .content figure img{
        height: 234px;
    }
    
    #news #cont .content:nth-child(3n){
        margin-right: 0;
    }
    #news #cont .content{
        margin-right: 0;
    }
    
/******************法人向けサービス******************/
    
    #hojin #cont{
        margin-bottom: 0;
        padding-bottom: 0;
    }
    #hojin .section{
        width: 640px;
        border-bottom: 1px dotted #ccc;
        }
    #hojin #cont .area01 p{
        padding: 223px 40px 0;
    }
    
    #hojin .area02 dl{
        padding: 434px 40px 40px;
        width: 640px;
    }
    
    #hojin .area02 dl.num01,
    #hojin .area02 dl.num02,
    #hojin .area02 dl.num03{
        background-size: 640px auto;
    }
    
    #hojin .area03 ul {
        width: 100%;
        box-sizing: border-box;
        padding: 0 40px 40px;
    }
    #hojin .area03 ul li{
        width: 100%;
    }
    
    #hojin .area04{
        padding: 0 40px;
        box-sizing: border-box;
        background: url("../img/hojin/h304Bgborder_height.jpg") left 69px top 30px repeat-y;
    }
    #hojin .area04 dl.num01,
    #hojin .area04 dl.num02,
    #hojin .area04 dl.num03,
    #hojin .area04 dl.num04{
        background-position: left top;
        width: 560px;
        padding:10px 0 40px 100px;
        text-align: left;}    
    #hojin .area04 dl dt{
        text-align: left;}    
    
/******************BLAVIA LXE******************/

    
    #blavia #cont .section{
        padding: 600px 40px 40px;
        background-position: top 0 left 50%;
        background-size: 100% auto;
        width: 640px;
        box-sizing: border-box;
    }
    
    #blavia #cont .section h3,
    #blavia #cont .section p,
    #blavia #cont .section img{
        padding: 0;
        margin: 0 auto 40px;
        width: 560px;
        height: auto;}
    
    #blavia #cont .area01{
        padding: 0;
        margin: 0;
    }
    #blavia #cont .area01 h3{
        width: 640px;
        height: 560px;
        background-image: url("../img/brand/blavia/640/h301.jpg");
        margin: 0;
        padding: 0;}
    
    #blavia #cont .area02{background-image: url("../img/brand/blavia/640/pic01.jpg")}
    #blavia #cont .area03{background-image: url("../img/brand/blavia/640/pic02.jpg")}
    #blavia #cont .area04{background-image: url("../img/brand/blavia/640/pic03.jpg")}
    
    #blavia #cont .area02 img{
        width: 273px;
        margin-bottom: 0;}
    
    
/******************SUEMOKKO******************/
    
    #suemokko #cont .section p{
        width: 560px;
        margin: 0 auto 20px;
    }
    #suemokko #cont .section p.imgArea{
        width: 640px;}
    #suemokko #cont .section p img{
        width: 640px;
        height: auto;
        margin-bottom: 20px;
    }
    #suemokko #cont .section{
        width: 640px;
    }
    
/******************GELTRON******************/
    
    #geltron .section h3{
        font-size: 140%;
        text-align: center;
    }
    #geltron .section img{
        max-width: 560px;
        height: auto;
    }
    #geltron .area01 img{
        max-width: 100%;}

    #geltron .area02,
    #geltron .area03,
    #geltron .area04,
    #geltron .area05,
    #geltron .area06{
        width: 560px;
        margin: 0 auto 40px;
        padding: 298px 0 40px;
        background-position: 50% top;
        background-size: auto 258px;
    }
    #geltron .area05{
        padding-top: 0;
    }
    #geltron .area05 dl{
        width: 560px;
        margin-bottom: 40px;
    }
    
    #geltron .area06 ul li{
        width: 560px;
        padding-bottom: 40px;
        border-bottom: 1px dotted #ccc;
        margin-bottom: 40px;
    }
    #geltron .area06 ul li:last-child{
        border: none;
        padding-bottom: 0;}
    
    #geltron .area07 {
        padding-bottom: 0;
    }
    #geltron .area07 .inner {
    padding: 30px 30px 444px 30px;
    background: url(../img/brand/geltron/h307Pic01.jpg) 50% bottom no-repeat #F5F5F5;
}
    
    #geltron .area07 h3,
    #geltron .area07 p{
        width: 560px;
    }
    #geltron .area07 p.leed{
        text-align: center;
        margin: 0 0 40px;
        font-size: 100%;
        font-weight: bold;
    }
    
/******************newsDetail******************/
    #newsDetail #cont{
        width: 560px;
        margin: 0 auto;
    }
    
    .youtube-player{
  width: 100%;
}
    #newsDetail #cont #naviG,
    #naviG .navigation .nav-links{
        width: 560px;
    }
    
    
/******************CAMPAIGN******************/
    
    #campaign .itemArea .rightArea{
    width: 640px;
    height: auto;}
    
    #campaign .itemArea .rightArea img.mainImg{
    width: 640px;
    height: auto;}
    
    #campaign .itemArea .leftArea{
        width: 560px;
        margin: 0 auto;
    }
    #campaign h4{
        font-size: 200%;
    }
    
/******************DETAIL******************/
    
    #detail #contLeft{
        width: 640px;
        margin-bottom: 80px;
    }
    #detail #contLeft #bigImg{
        width: 640px;
        height: 396px;
    }
    #detail #contLeft #bigImg img{
        width: 640px;
        height: 396px;
    }
    #detail #selImg ul{
        width: 560px;
        margin: 0 auto;
    }
    #detail #selImg ul li{
        width: 104px;
        height: 104px;
    }
    
    #detail #contRight{
        width: 560px;
        margin: 0 auto;
    }
    #detail #contRight table{
        width: 560px;
    }
    #detail #contRight table th,
    #detail #contRight table td{
        width: 100%;
        display: block;
    }
    #detail #contRight table th{
        text-align: center;
        background-color: #FFF4E9;
        font-weight: normal;
    }
    #detail #contRight table,
    #detail #contRight table tr{
        border: none;
    }
    
    #detail #contLeft .howBuy{
        width: 100vw;
        box-sizing: border-box;
    }
    #detail #contLeft .howBuy .inner{
        width: 100%;
    }
    #detail #contLeft .howBuy .inner .item{
        width: 26vw;
    }
/******************CATEGORY******************/
    
    ul.subCate{
        width: 92vw;
        margin: 0 auto 8vw;
    }
    ul.subCate li{
        margin-right: 4vw;
        margin-bottom: 4vw;
    }
    
    ul.list{
        width: 92vw;
        margin: 0 auto;
    }
    
    ul.list li{
        width: 44vw;
        margin-bottom: 4vw;
    }
    
    ul.list li img{
        width: 44vw;
    }
    ul.list li ul.status li,
    ul.list li ul.status li img{
        width: 50px;
        height: 50px;
    }
    ul.list li ul.status li{
        margin-right: 20px;
    }
    
    nav.pagination .nav-links span,
    nav.pagination .nav-links a{
        padding: 10px 20px;
    }
/******************CATEGORY******************/
    
    #commodity #cont{
        width: 92vw;
        margin: 0 auto;}
    
    #commodity #cont ul#category li a img{
        width: 44vw;
        height: auto;}
    
    
/******************BRAND******************/
    
    #brand #cont{
        width: 560px;
        margin: 0 auto;
    }
    
/******************SHOP******************/
    
    #shop #cont{
        width: 560px;
        margin: 0 auto;
    }
    
    #shop #cont .shopInfo .shopDetail{
        margin-bottom: 40px;
    }
    
    #brand #cont ul li a img{
        width: 260px;
        height: auto;
    }
/****************** FAQ ******************/
    
    #faq #cont{
        padding:0 40px;
        box-sizing: border-box;
    }
    
    #faq #cont p{
        text-align: left;}
    
    
/****************** ACCESS ******************/
    
    #access #cont{
        padding:0 40px;
        box-sizing: border-box;
    }
    
    #access #cont table{
        width: 560px;
        margin-bottom: 40px;
    }
    
    #access #cont .shopImg img{
        width: 560px;
        height: auto;
    }
    
/****************** faq ******************/
    
    #faqArea dl{
        width: 560px;
        margin: 0 auto 20px;
    }
        
    #faqArea dl:last-child{
        margin-bottom: 40px;}
    
    #faqArea dl dt{
        padding:20px 30px 20px 56px;
    }

/******************movie******************/
    #movie #cont p{
        padding: 0 40px 40px;
    }
    #movie #cont #movieList{
        padding: 0 40px;
    }
    #movie #cont #movieList ul li dl dt a img{
        width: 260px;}
    
/******************商取引法に基づく表記******************/
    
    #shotorihiki #cont table{
        width: 92vw;
        margin: 0 auto 8vw;
    }
    
/******************company******************/
    
    #company #cont{
        width: 560px;
        margin: 0 40px 40px;
    }
    #company #cont .motto p{
        font-size: 130%;}
    
    #company #cont table tr th,
    #company #cont table tr td{
        display: block;
        width: 560px;
        border: none;
        box-sizing: border-box;
    }
    #company #cont table tr th{
        box-sizing:border-box;
        padding: 20px;
        text-align: center;
    }

    #company #cont table{
        width:560px;
        box-sizing: border-box;}
    
    #company #cont #tab02 table tr{
        display: flex;
        box-sizing: border-box;}

    #company #cont #tab02 table td{
        width:50%;}

    #company #cont #tab02 table th,
    #company #cont #tab02 table td.month{
        width:25%;
        box-sizing: border-box;}

/*********** productContact ***********/
    
    #contact dl.prudoctName{
        display: block;
    }
    #contact dl.prudoctName dt, #contact dl.prudoctName dd{
        width: 560px;
        box-sizing: border-box;
        text-align: center;
    }
/******************contact******************/

    #contact #cont {
        width: 560px;
        margin: 0 auto 40px;
    }
    #contact #cont .h301 p a strong{
        font-size: 200%;
    }
    #contact #cont table {
        border: none;
        width: 500px;
    }
    #contact #cont table tr th,
    #contact #cont table tr td{
        display: block;
        width: 500px;
        border: 0;
    }
    #contact #cont table tr th{
        background-color: #E6F1EC;
        box-sizing:border-box;
        padding: 20px;
    }
    #contact #cont table tr td input,
    #contact #cont table tr td textarea{
        width: 460px;}
    
/****************** privacy ******************/
    
    #privacy #cont{
        width: 560px;
        margin: 0 40px 40px;
    }

/****************** flow ******************/
    
    #flow #cont h3,
    #flow #cont p{
        box-sizing: border-box;
        width: 92vw;
        margin: 0 auto 8vw;
    }
    #flow .flow .item{
        box-sizing: border-box;
        width: 92vw;
        margin: 0 auto 8vw;
        background:#FFEFDF;
        padding: 4vw;
    }
    #flow .flow .item figure{
        margin: -8vw auto 8vw;
        text-align: center;
        width: 24vw;
        height: 24vw;
    }
    #flow .flow .item dl dt{
        text-align: center;
    }
    #flow .flow .item:last-child{
        background:#FFEFDF;
    }
    
    
}