@charset "utf-8";
/* CSS Document */

htlm{
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}

body {
    display: flex;
    flex-direction: column;
    font-family: "游明朝", "游明朝体", "Hiragino Mincho ProN","Hiragino Mincho Pro",sans-serif;
    height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
} 

body,header,nav,main,footer{
    width:100%;
    background-color:#cefffb;
}

a {
    text-decoration: none;
    font-weight: bold ;
}
    a:hover{ 
        transition: all 0.7s;
        opacity:0.65;
	}

.logo,nav{
    opacity:0.7;
}

/* header */

header{
margin: 45px auto -70px;
opacity:0.85;
}

.logo{
    width:6.5em;
    margin: auto ;
}

    .logo-min{
        width:30px;
        opacity:0.5;
        margin:100px auto 50px;/*一番下*/
    }


/* nav */

nav{
    position: fixed;
    left:0;
    right:0;
    /*top:0;*/
    bottom:0;
}

    nav ul{        
        width: 90%;
        max-width: 1200px;
        margin:30px auto 100px;
    }

ul{
    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    margin: 0;
    padding: 0;
}

    li{
		flex: auto;
        list-style:none;
		text-align: center;
    }

        li a {display: block;}

        li img {
            height:1.45em;
            width:auto;
        }
        
        .l{    
            height:1.15em;
            width:auto;
        }

        .l1{    
            height:1.1em;
            width:auto;
        }


.fa-instagram{font-size:large;}


/* main */ 

main{flex: 1;}

img{width:100%;}

    .tate_img{padding:0 9em;}

/* 共通 */

.box{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 95%;
    max-width: 1000px;
    height: auto;
    margin: 50px auto 200px;
    padding: 0 ;
}

/* アクササリーページのbox */
    .box-a{
        margin:9em auto 0;
    }

/* 魂ファッションページのbox */
    .box-t{
        padding:50px 0 40px;
    }


/*　共通　.box1 .box0 1列のみコンテンツ　*/

.box1{
    justify-content: center;
    align-items: center;
    height: 100%;
    width:100%;
}

.box0{
        width:70%;
        height: auto;
        margin: 5rem auto 0;
    }

/*　共通　.box2 横2列 コンテンツ */  

.box2{
    width:48%;
    height:auto;
    margin: 10px auto;
    padding:0;
    }

/*　共通　.box3 横3列  コンテンツ　*/  

    .box3{
        width: 30%;
        height:auto;
        margin:25px auto;
        padding: 0;
    }
        .box3 img{margin-top:25px;}


/*文字*/

h1,h2,h3,h4{
    margin:auto;
    opacity:0.6;
    /*border-bottom:solid #fff 1px; */
    letter-spacing: 0.15rem;
    line-height:3rem;
    /*text-indent: ;文字の一段落目を開けたい時に使う*/
    font-weight: bolder;  
    text-align:center;
}

h1{
    margin: -20px auto 50px;
}
    h1 img{width:5.7em;}

    h2{font-size:1.1em;}

    h3{font-size:1em;}

    h4{font-size:0.9em;}


p{
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    line-height:1.8rem;
    margin-top: 20px;
    color: #6b6b6b;
    /*text-align:justify;
    text-justify: auto;*/
    text-align:justify;
    word-break:break-all; 
    text-justify:inter-ideograph;
    text-justify:inter-character;
    word-wrap:break-word;
    overflow-wrap:break-word;
}

.text-c p{text-align: center;}
.text-eng p{
    font-size: 0.8em;
    opacity:0.8;
}


/* footer */

footer {
    height:auto;
    position: fixed;
    left: 0;
    right:0;
    bottom:0;
    opacity: 0.95;
}

footer p{
    text-align: center;
    font-size: 0.7rem;
    margin: 10px auto ;
    }



/*　ラインナップ　*/

.lineup{width:40%;}

    .no1, .no2{margin-bottom: 0;} /* no2 シングルオリジン1 */

    .no3{margin-top:3.2rem;}  /* no3 その他 */

    .no4{margin-top:-0.1rem;} /* no4 シングルオリジン2 */

.lineup p{
    display: block;
    width:100%;
    float:left;
}

    .brand{
        margin-top: 20px;
        margin-bottom: 0;
        font-size: 1rem;
        font-weight: bold;
        }

        span{
            display: block;
            float:right;
        }

            .comment{
                margin-top:5px;
                margin-bottom: 30px;
            }

/* responsive */

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

header{
    margin: 4em auto -2em;
} 

.logo{
    width:5.5em;
    margin-top:-1.5em;
}
 
.tate_img{padding:0 3em ;}

/* responsive nav */

li img {
    height:1.1em;
    width:auto;
}

.l{    
    height:0.95em;
    width:auto;
}

.l1{    
    height:0.85em;
    width:auto;
}

 /* responsive main */ 
 

 
.box{
    flex-direction:column;
    margin: 10px auto 150px;
    width:90%;
    } 
    
    .box2,.box3{
        width: 85%;
        margin:60px auto 0;
    }

    /* アクササリーページのbox */
    .box-a{
        margin:3em auto 0;
    }

h1 img{width:4.5em;}
    
p{letter-spacing: 0.01rem;}
    

/* responsive トップページ */
    
.box1 .box0{width:85%;}
      
}

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

.tate_img{padding:0;}

.logo{
    width:4em;
    margin-top:-1.5em;
    }

    .logo-min{
        width:28px;
    }

li img {
    height:0.9em;
    width:auto;
}

.l{    
    height:0.7em;
    width:auto;
}

.l1{    
    height:0.6em;
    width:auto;
}
}