@charset "UTF-8";
body{
	margin:0;
	
	}

/* 画面の最大幅を指定。共通で使用*/
/* 横幅と左右の余白 */
.w-container{
	width: min(92%, 1166px);
	margin:auto;
	padding:auto;
	}

/*.wrap {
     overflow: hidden;
 }*/

	
h1, h2, h3, h4, h5, h6, p, figure, ul {
	margin: 0;
	padding: 0;
	list-style: none;
	
	}

a {
  text-decoration: none;
  color:#303030;
  }
  
a:hover{
	opacity:0.7; /* メニューにマウスをのせた際に少し透過 */
	
	}
  
h1,h2,h3{
	font-family: 'Karla', sans-serif;
	font-size:32px;
	}

span{
	font-size:16px;
	color:#c8c8c8;
	
	}


/*ヘッダー*/
.header-container{
	display: flex;
	justify-content:space-between;
	align-items: center;
	padding-top:48px;
	padding-bottom:48px;
	
	}

/* ナビゲーション */
nav ul{
	display:flex;
	
	}

nav li:not(:last-child){
	margin-right:24px;
	margin-bottom:24px;
	
	}

/* プロフィール */
.prf{
	padding-top:48px;
	text-align:center;
	
	}

.prf img{
	padding:48px 0;
	
	}
	
.prftext{
	font-size:12px;
	letter-spacing: 0.05em;
	line-height: 2.5;

	}

.insta img{
	
	}

/*フッター*/
.footer nav{
    display:flex;
    justify-content: center;
	
	}

.footer-site{
	margin-top:80px;
	text-align:center;
	
	}

.footer-menu nav li:not(:last-child){
	margin-right:24px;
	
	}

/* ヒーロー */
.hero{
	height:300px;
	background-image: url("../img/hero.jpg");
	background-position:center;
	background-size:cover;
	color: #fff;
	background-repeat:no-repeat;
	
	}

@media(min-width:768px){
.hero{
	height:600px;
	background-image: url("../img/hero.jpg");
	background-position:center;
	background-size:contain;
	color: #fff;
	background-repeat:no-repeat;
	

	}
	}

/*the workのCSS*/
.the-work{
	text-align:center;
	padding-bottom:48px;
	
	}

.posts{
	padding: var(--v-space) 0;
	background-color: #fff;

	}

.posts-container {
	display:grid;
	gap:56px;
	line-height;0;
	
	}
	
@media(min-width:768px){
	.posts-container{
		grid-template-columns:repeat(3, 1fr);
		
		}
	
	}

/*記事一覧の記事*/
.post a{
	display:block;
	
	}

.post h3{
	margin:0.1em 0 0.5em;
	font-size:clamp(12px,2vw,20px);
	min-height:0vw;
	
	}

.post p{
	max-width:38em;
	font-size:clamp(10px,1.6vw,14px);
	min-height:0vw;
	
	}

@media(min-width:768px){
.post p{
	max-width:31em;
	font-size:clamp(10px,1.6vw,14px);
	min-height:0vw;
	
	}
		}


.post img{
	aspect-ratio:1/1;
	object-fit:cover;
	width:100%
	
	}

.posts .post img{
	border-radius: 25% 10%;

	}


@supports not(aspect-ratio:1 /1){
	.post img{
		height:180px;
		
		}
	}

/*メッセージ*/
.message h1{
	font-size:32px;
	text-align:center;
	
	}

.message-text{
	font-size:12px;
	letter-spacing: 0.05em;
	line-height: 2.5;
	text-align:center;
	
	}