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


	body {
		background-color: #f4f4f4;
		
	}
		
		
		@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../font/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../font/MaterialIcons-Regular.woff2) format('woff2'),
    url(../font/MaterialIcons-Regular.woff) format('woff'),
    url(../font/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
   /*font-size: 2rem;  Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
	vertical-align: middle;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
		
		
		
		
		
		
			.header-menu {
		z-index: 1000;
    position: fixed;
		}
		
		
				.header-menu {
left: 3rem;
    top: 2rem;
		}
		
		
.hd-list li {
    text-align: left;
    margin-bottom: 0.5em;
}

.hd-list li a {
    display: inline-block;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: .02em;
    line-height: 1.75;
    vertical-align: middle;
	background-color: #FFF;
	padding: 0 0.1em;
}
		
	@media (max-width:860px) {   
        			.header-menu {
                        display: none;
		}
        }
        
        
        
		.footer-menu {
		z-index: 1000;
    position: fixed;
		}
				.footer-menu {
right: 3rem;
    bottom: 2rem;
		}
				.ft-list li {
					text-align: right;
}

		
		.ft-list li a {
    display: inline-block;
			font-size: 1.3rem;
    letter-spacing: .02em;
    line-height: 2;
}
        
        	/*--- トップー---*/	
        #top{    
width: 380px;
    padding: 5rem 2rem 0 0;
    margin: 0 9% 0 auto; 
            opacity: 0.8;
            }  

             
            #top span {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding-right: .3rem;
    margin-top: 1.5rem;
    text-align: right;
    display: block;

        }
        
#caption {
    width: 450px;
    padding: 2rem 2rem 2em 0;
    margin: 3em 9% 0 auto;
    opacity: 0.8;
    font-size: 1.6rem;
    text-align: justify;
    border-bottom: dotted 1px;
    border-top: dotted 1px;
    font-weight: 600;
}   
        
        

        .c-header__logo {
    width: 200px;
    top: -100px!important;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
}
   .fixed {
    width: 120px;
    top: 1.5rem!important;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
        position: fixed;
       z-index: 9999;
}     
        
        
    @media (max-width:860px) {   
        
        #top{    
width: 50%;
    padding: 5rem 2rem 0 0;
    margin: 0 25% 0; 
            opacity: 0.8;
            } 
        #caption {
    width: 80%;
    padding: 2rem 2rem 2em 0;
    margin: 3em 10% 100px 10%;
    opacity: 0.8;
    font-size: 1.3rem;
    text-align: justify;
    border-bottom: dotted 1px;
    border-top: dotted 1px;
    font-weight: 600;
}   
        
                  #top span {
    text-align: center;
  

        }  
        
        
        
        
        }
		
		section {
			position: relative;
			width: 100%;
			margin: 0 auto 150px;
			max-width: 1000px;
			padding-top: 120px;
		}
    @media (max-width:960px) { 
		section {

			margin: 0 auto 100px;
            padding-top: 20px;

		}
        }
		
		 /* .midasi {
		position: absolute;
			font-family: YuMincho,'Yu Mincho';
    font-size: 3em;
    height: 1200px;
    top: 2em;
    right: -2em;
    font-weight: 600;
    letter-spacing: 0.1em;
		} */
		
		
	.midasi {
    position: absolute;
    top: 50px;
    right: -50px;
    width: 50px;
}	
        
    	.sp-midasi {
            display: none;
}	    
        
    @media (max-width:960px) { 
        	.midasi {
    position: relative;
    top: auto;
    right:  auto;
    width:  auto;
}	
       	.sp-midasi {
            display: block;
                width: 70%;
    margin: 0 auto 1em;
}
        
               	.pc-image {
            display: none;
}	 
        
        }
		
	/*--- 画像ギャラリー---*/  
		
.image-list {
    width: 100%;
    display: inline-block;
    margin-bottom: 100px;
}
				.image-list ul li img {
					width: 100%;
		}
		
		.image-list ul li {
			float: left;
			margin: 0.5% 0.5%;
		}
		
		
		.li100 {
			width: 99%;		
		}
		.li70 {
			width: 69%;		
		}
		.li60 {
			width: 59%;		
		}
		
		.li50 {
			width: 49%;		
		}

		
		.li40 {
			width: 39%;		
		}
		
				.li33 {
			width: 32%;		
		}

		.li30 {
			width: 29%;		
		}

				.li25 {
			width: 24%;		
		}
		

		
		/*--- コーディネートー---*/
	.coordinate {
    display: flex;
    justify-content: space-between;
    width: 75%;
    margin: 0 auto;
}
		
		
.coordinate_imgs {
    flex-basis: 47.473%;
    position: relative;
}		
		
		.comment {
    flex-basis: 42.105%;
    padding-top: 10%;
    position: relative;
}
		
.comment-text  {
margin-top: 2.812rem;
}		
		
.comment-text p {
    font-size: 1.3rem;
    line-height: 2;
    text-align: justify;
    font-weight: 600;
}	
.coordinate-item {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 2;
    display: inline-block;
    width: 100%;
    margin-top: 3em;
}	
.coordinate-item dl dt {
    float: left;
}		
	.coordinate-item dl dd {
		text-decoration: underline;
}		


	p.credit {
    font-size: 0.8em;
    font-weight: 600;
}	
		
	
@media (max-width:960px) {
	
	.coordinate {
display: inline-block;
    justify-content: space-between;
    width: 70%;
    margin: 0 15%;
}
		
		
.coordinate_imgs {
    flex-basis: 47.473%;
    position: relative;
}		
		
		.comment {
    flex-basis: 42.105%;
    padding-top: 1em;
    position: relative;
}
		
	.comment-text {
    margin-top: 0;
}
.comment-text p {
    font-size: 1.1rem;
    line-height: 1.75;
    text-align: justify;
    font-weight: 600;
}		

}		
		

		
		

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

		
		.animation2{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(30px);
}

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



section.footer.cf {
    text-align: center;
    padding: 2em;
}