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

body {
    background-color: #a9dbff;
    font-family: 'Sawarabi Gothic', sans-serif;
    box-sizing: border-box;
}
	
header {
    height: 20px;
    display: block;
    z-index: 9999;
    width: 94%;
    height: 40px;
    margin: 0 auto;
    padding: 15px 3% 10px;
    background-color: #a9dbff;
}
.logo {
width: 35%;
    max-width: 150px;
    margin-left: 5px;
}
	
	img.instagram {
    width: 20px;
    position: absolute;
    right: 30px;
    top: 30px;
}
	

	
	

	section {
		position: relative;
		width: 100%;
		max-width: 1000px;
		margin: 150px auto;
	}
	
		/*--- テキスト---*/  
	
section h3 {
    font-family: 'Rubik Mono One', sans-serif;
    position: relative;
    font-size: 2.5rem;
    text-align: center;
    margin: 1em;
    letter-spacing: 0.05em;
    line-height: 1.4;

}
	

	
	.description h4 {
    font-size: 2rem;
    display: block;
}
	
.description p {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.95;
    display: block;
    margin: 1em 0;
	text-align: justify;
}	
	
	
.coordinate_link li {
    font-size: 0.6rem;
    line-height: 1.75;
    font-weight: 600;
}
	

	
	
	.description2 h4 {
    font-size: 2rem;
    display: block;
}
	
.description2 p {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.95;
    display: block;
    margin: 1em 0;
	text-align: justify;
}	
	
	
	
@media (max-width:920px) {
.description {
		position: relative;
}	
}	
	
	
	/*--- 各セクション---*/  
	
#intro {
    max-width: 1000px;
    margin: 0px auto 100px;
}
	
	
@media (max-width:920px) {
	
	#intro {

    max-width: 100%;
    margin: 0 auto 100px;}	
	

}
	
	
	
	
		
		

	

	#intro p {
    max-width: 600px;
    margin: 1em auto;
    text-align: justify;
    line-height: 2;
    font-size: 1.2rem;
    font-weight: 600;
}
	
		
@media (max-width:920px) {
	
	#intro p {
    font-size: 0.9rem;
        width: 80%;
        margin: auto;

}
	}
	
	

	
	
	#sweat_title{
    position: absolute;
    top: 160px;
    right: 100px;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
}
	
	
#sweat_des {
    width: 240px;
    top: 1200px;
    right: 100px;
    }
	
	
#sweat_otherlink {
    right: 0;
    top:0;
}
	
	
@media (max-width:920px) {
		
	#sweat {
    padding-top: 0;
}
	
	
	}
	
	
	
#shere_ {
    padding-top: 50px;
}
	
#shere_title {
    left: 100px;
    top: 50px;
}	
#shere_des {
    width: 450px;
    bottom: 0px;
    right: 00px;
    position: relative;
    margin: 0 auto;
}	
	
	

	
	
#overall_title {
    left: 600px;
    top: 50px;
}	

#overall_des {
    width: 400px;
    top: 1320px;
    right: 50px;
}
	
	
	
	
	
	
	
@media (max-width:920px) {
		
	#overall {
    padding-top: 0;
}
	
	
	}	
	
#clear{
    padding-top: 300px;
}
		
h3#clear_title {
    top: 50px;
    left: 150px;
}	
	
#clear_des {
    width: 350px;
    bottom: 100px;
    left: 50px;
}
	

	
	
	
@media (max-width:920px) {
		
	#clear {
    padding-top: 0;
}
	
	
	}	
		
	

		
#minimum_title {
    position: absolute;
    top: 300px;
    right: 40px;
}	
	
#minimum_des {
    position: relative;
    width: 450px;
    /* top: 1380px; */
    /* right: 50px; */
    /* position: absolute; */
    margin: 20px auto;
}
		
	@media screen and (min-width: 951px) and (max-width: 999px) {

#minimum_des {
    width: 350px;
    top: 1180px;
    right: 50px;
		}
	}
	
	
	
	
	
@media screen and (min-width: 921px) and (max-width: 999px) {	

	
#sweat_des {
    top: 1460px;
    left: 100px;
}	
	
	
	
	#shere_des {
    top: 800px;
    right: 100px;
}	
	

#overall_des {
    top: 1760px;
    left: 30px;
}
		
	
#clear_des {
top: 880px;
    right: 20px;
}
	
	
	}
	
	
	


	
	
	
	
	
	
	
	
	
@media (max-width:920px) {
	
	
	
	
	
#clear_des {
    width: 80%;
    top: auto;
    right: auto;
	left: auto;
	    margin: 50px auto;
    text-align: justify;
}

	#overall_des {
    width: 80%;
    top: auto;
    right: auto;
		left: auto;
		    margin: 50px auto;
    text-align: justify;
}
		
	#shere_des {
    width: 80%;
    top: auto;
    right: auto;
		left: auto;
		    margin: 50px auto;
    text-align: justify;
}
		
	#sweat_des {
    width: 80%;
    top: auto;
    right: auto;
		left: auto;
		    margin: 50px auto;
    text-align: justify;
}
		
	
#minimum_des {
    width: 80%;
    top: auto;
    right: auto;
		left: auto;
		    margin: 50px auto;
    text-align: justify;
}
	
	
	
	
.description p {
    font-size: 0.8rem;
}	
	
.description2 p {
    font-size: 0.8rem;
}	
		
	
	}
	
	

	
	
	
	
	/*--- アイテム一覧---*/  
	
	
.otheritem {
    width: 90%;
    margin: 100px auto;
}
	
	.list img {width: 100%}
		
		
		ul.list {
    width: 100%;
    margin: 40px 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
		
		
		
		
		.list li {
	width: 25%;
	float: left;
	margin: 0 ;
			
}
		
		
.list li p {
	text-align: center;
	font-size: 9px;
	height: 6em;
	line-height: 1.8;
	margin: 5px;
}
span.itemlist_brand {
	font-weight: bold;
	font-size: 1.5em;
}
		

@media screen and (min-width: 361px) and (max-width: 480px) {
.list li {
	width: 46%;
	float: left;
	margin: 0 2%;
}
}

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

.list li {
	width: 31%;
	float: left;
	margin: 0 1%;
}
}

@media screen and (min-width: 768px) and (max-width: 959px) {

.list li {
	width: 22%;
	float: left;
	margin: 0 1%;
}
		}
		
	
	
	
/*---フッター---*/

.footer {
	width: 100%;
	font-weight: 600;
	font-size: 12px;
	text-align: center;
	margin: 100px auto 0;
	padding: 50px 0;
}	
	
	
.button-container {
    /* display: inline; */
    border: 2px solid;
    padding: 1em;
    width: 50%;
    margin: 0 auto;
    text-align: center;
}	
	
	

/*Topへボタン*/

#pageTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 30px;
}

#pageTop a {
display: block;
    z-index: 999;
}
#pageTop a:hover {
	opacity: 0.7;
}
	
	
	
	
	
/********** PC・スマホ切り替え **********/
 
	
.pc-image {
	display: block;
}

.sp-image {
	display: none;
}		
	
@media (min-width:701px) {
.sp-image {
	display: none;
}	
	}
	


	



.mini-item {
    font-size: 0.75rem;
    background-color: #FFF;
    display: inline-block;
    color: #000;
    line-height: 1.2;
    padding: 0 0.5em;
	font-weight: bold;
}
	
	
.mini-item a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}
    .image-wrap {
        position: relative;
    }	
	
    
    p#mini01 {
    position: absolute;
    top: 39%;
    left: 40%;
}
	
        p#mini02{
    position: absolute;
    top: 15%;
    left: 45%;
}
    
p#mini03 {
    position: absolute;
    top: 92%;
    left: 28%;
}
    
        p#mini04 {
    position: absolute;
    top: 72%;
    left: 60%;
}
    
        p#mini05 {
    position: absolute;
    top: 6%;
    left: 35%;
}
	
    
p#mini06 {
    position: absolute;
    top: 75%;
    left: 15%;
}
    
    
    p#mini07 {
    position: absolute;
    top: 30%;
    left: 45%;
}
  
    p#mini08 {
    position: absolute;
    top: 78%;
    left: 71%;
}
    
p#mini09 {
    position: absolute;
    top: 93%;
    left: 27%;
}
    
    p#mini10 {
    position: absolute;
    left: 48%;
    top: 74%;
}
p#mini11 {
    position: absolute;
    left: 73%;
    top: 32%;
}
p#mini12 {
    position: absolute;
    left: 0%;
    top: 71%;
}
p#mini13 {
    position: absolute;
    left: 40%;
    top: 40%;
}
 
p#mini14 {
    position: absolute;
    left: 31%;
    top: 60%;
}
p#mini15 {
    position: absolute;
    left: 41%;
    top: 71%;
}
p#mini16 {
    position: absolute;
    left: 30%;
    top: 78%;
}
p#mini17 {
    position: absolute;
    left: 47%;
    top: 25%;
}
   p#mini18 {
    position: absolute;
    left: 27%;
    top: 74%;
}
p#mini19 {
    position: absolute;
    left: 41%;
    top: 71%;
}
p#mini20 {
    position: absolute;
    left: 50%;
    top: 78%;
}
p#mini21 {
    position: absolute;
    top: 40%;
    left: 50%;
}
    
    @media (max-width:920px) {
        
  .mini-item {
      display: none;
}
	      
        
    }


		
/*アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(60px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}		






.image_wrap {
    display: flex;
}

.styling {
    width: 50%;
}

.description {
    box-sizing: border-box;
    width: 50%;
    padding: 12.5%;
}
.w70 {
    width: 70%;
    margin: 50px auto;
}

.sub_img {
    margin: 10px;
}

@media screen and (min-width: 301px) and (max-width: 767px) {
   .image_wrap {
  display:flex;
  flex-flow: column;
  justify-content:space-between;
}
.styling {
    width: 100%;
}

.description {
    box-sizing: border-box;
    width: 100%;
    padding: 12.5%;
}
}
h2 {
    max-width: 600px;
    margin: 1em auto;
    text-align: justify;
    line-height: 1;
    font-size: 1.8rem;
    font-weight: 600;
    color: #FFF;
    letter-spacing: 3px;

}

@media (max-width:920px) {
h2 {
    font-size: 1.3rem;
    width: 80%;
    margin: 1em auto 1em;
    line-height: 1.5;
}

}