@charset "UTF-8";
@font-face {
	font-family: 'MyFont';
	src: url("../font/yugothic.ttf");
}

@font-face {
	font-family: 'MyFontB';
	src: url("../font/yugothib.ttf");
}

@media screen and (max-width: 800px){    
	body{
		margin: 0;
        letter-spacing: 0;
        font-family: "MyFont";
	}
    
    body *,
    body *:after,
    body *:before{
        -webkit-appearance: none;
-webkit-text-size-adjust: 100%;
        font-family: "MyFont";
    }
    
    .pc{
        display:none !important;
    }
    
    
    p{
        font-size: 15px;
        line-height: 1.75em;
    }

/*---------------------
common
----------------------*/
    .sp{
        display: block !important;
    }
    
  .mainImageWrap .mainText {
        display: none;
    }
    
    .mainImageWrap .mainText02 {
        display: none;
    }
    
    .mainImageWrap {
        padding-left: 0;
        padding-right: 0;
    }
    
    .mainImage {
        min-height: inherit;
        background-attachment: inherit;
        height: 400px;
    }
    
    .mainImage p.spText01 {
        width: 30%;
    }
    
    .mainImage .spText02{
        width: 80%;
        left: 10%;
        bottom:-40px;
        top:inherit;
    }
    
    .head {
        padding: 20px 5%;
    }
    
    .pure-toggle-label[data-toggle-label='right'] {
        top: 8px;
        right: 5px;
    }
    
    .sec {
        padding: 40px 0;
    }
    
    .topSec01 {
        padding-top: 80px;
    }
    
    .col2pt01 {
        display: block;
        width: 90%;
        margin: 0 auto;
    }
    
    .col2pt01 div:nth-child(1) {
        margin-left: 0;
        max-width: 100%;
        width: 100%;
        margin-bottom: 30px;
    }
    
    #sec01 .secTitle,
    #sec01 .secText01{
        display: none;
    }
    
    .secText02 {
        padding-left: 0;
    }
    
    .col2pt01 div:nth-child(2) {
        padding-left: 0;
        width: 100%;
    }
    
    .movie video {
        height: 230px;
        width: 100%;
    }
    
    .secTitle03 span {
        width: 100%;
        font-size: 20px;
    }
    
    .secTitle03 {
        margin-top: 70px;
    }

    .secTitle03 span img {
        top: -80px;
        width: 80px;
    }
    
    .topsec02cont {
        padding-bottom: 200px;
    }
    
    .secTitle03 span img.Eyelash {
        width: 100px;
        top: -50px;
    }
    
    .topSec03cont {
        width: 100%;
    }
    
    .recAbs03 {
        padding: 0 30px;
        bottom:20px;
    }
    
    .recAbs02 {
        top: 40px;
    }
    
    .recTitle {
        font-size: 16px;
        padding: 50px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    
    .recText {
        font-size: 14px;
    }
    
    .topSec04 {
        height: 230px;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .compTitle img{
        width:200px;
    }
    
    .compText01 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .compText02 {
        font-size: 14px;
        padding-bottom: 20px;
    }
    
    .footLogo{
        padding-left: 5%;
    }
    
    /* about */
.about .mainImage{
    background:none;
    background-size: cover;
    position: relative;
    height: calc(100vh - 70px);
    min-height: auto;
}

.about .mainImage p{
    width: 300px;
    position: absolute;
    right: calc(50% - 150px);
    top:50px;
}

.col2pt02{
    display: block;
    width: 90%;
    margin: 0 5%;
}

.col2pt02.pt02{
    justify-content:flex-end;
}

.col2pt02.pt01{
    flex-flow: row;
   justify-content: flex-start;
}

.col2pt02 div:nth-child(2){
    padding-left: 0;
    width: 100%;
}

.col2pt02.pt01 div:nth-child(2){
    padding-left: 0;
    padding-right:0;
}

.col2pt02 div:nth-child(1){
    margin-left: 0;
    max-width: 100%;
    width: 100%;
}

.col2pt02.pt01 div:nth-child(1){
    margin-left: 0;
    margin-right:0;
}

.aboutTitle{
    padding-top: 100px;
    padding-bottom: 80px;
    font-size: 16px;
    padding-left: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0;
}

.aboutTitle#about01{
    background-image: url("../img/about/aboutBack01@2x.png");
}

.aboutTitle#about02{
    background-image: url("../img/about/aboutBack02@2x.png");
}

.aboutTitle#about03{
    background-image: url("../img/about/aboutBack03@2x.png");
    padding-top: 80px;
    padding-bottom: 80px;
}
    
    .about .secText02 br{
        display: none;
    }

.page{
    position: relative;
    text-align: center;
    padding-top: 50px;
    margin-top: 50px;
}

.page:after{
    content:" ";
    display: block;
    position:absolute;
    width: 200px;
    height: 1px;
    background: #000000;
    top: -20px;
    left: 10px;
    transform: rotate(
    150deg
    );
}

.shoplistul{
    display: block;
    max-width: 90%;
    margin: 30px auto;
}

.shoplistul li{
    padding:0;
    margin-bottom: 20px;
}
    
.shoplistul li img{
    width:100%;
}

.spacer{
    display: none;
}
    
/* nagitsuji(otherpage) */
.nagitsuji .mainImage,
.yamashina .mainImage,
.cc .mainImage{
background-position: -100px 0; 
}
    
    
   
    .content{
        width:90%;
    }    
    
.udPage #sec01{
    padding-top: 80px;
}
    
    .njSec01 div:nth-child(2){
        margin-top: 40px;
    }
    
    .udPageIcon{
        width: 100px;
        top:-50px;
    }

.njTitle{
    font-weight: normal;
    font-size: 18px;
    line-height: 1.75em;
    margin-bottom: 30px;
}

.njText01{
    font-size: 14px;
    letter-spacing: 0;
    text-align: justify;
}

.rlt{
    position: relative;
}

.udPagecont{
    padding-top: 100px;
    margin-top: 0;
}

.menu th{
    font-size: 14px;
    padding:30px 10px;
}

.menu td{
    font-size: 14px;
    padding:30px 10px;
}

.shortBtn a{
    width:90%;
}

.njText{
    font-size: 18px;
}

.njSec03,
.njSec04{
    margin-top: -50px;
}

.njSec05{
    margin-top: -50px;
}

.njSec03 .col2pt01{
    margin-top: 80px;
}

.recTitle02{
    font-size: 20px;
    padding: 0;
    padding-top: 50px;
    padding-bottom: 20px;
    display: block;
}

.recText02{
    font-size: 14px;
}

    
/* company */
.company .mainImage{
    background:none;
    background-size: cover;
    position: relative;
    height: calc(100vh - 70px);
    min-height: auto;
}

.company .mainImage p{
    width: 300px;
    position: absolute;
    right: calc(50% - 150px);
    top:50px;
}    
    
.companySec01 table th{
    font-size: 16px;
    text-align: left;
    padding:30px 10px;
    width: 150px;
}

.companySec01 table td{
    font-size: 16px;
    padding:30px 10px;
}    
  
}

@media screen and (max-width:350px){
    .recAbs02 {
        top: 20px;
    }
    
    .recTitle {
        font-size: 12px;
    }
    
    .recText {
        font-size: 12px;
    }    
    
    .aboutTitle{
        padding-bottom: 40px;
    }
    
    .aboutTitle#about03{
        padding-bottom: 40px;
    }
    
    .aboutTitle{
        font-size: 14px;
    }
}

@media screen and (max-width:1030px) and (min-width: 700px){
.mainImage {
    height: 600px;
    background-attachment: inherit;
}
    
.udPage .mainImage p{
    width: 300px;
    position: absolute;
    right: 0;
    top:0;
    height: 100%;
}    
        
    
.topSec04 {
    height: 500px;
}    
    
.recAbs02 {
    top: 160px;
}
    
}