@charset "utf-8";

/* top
----------------------------------------- */

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
SP はじめ ~899px
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

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

	.h2 {
		margin-bottom: 4.0vh;
		font-size: 4.0rem;
	}

	.h3 {
		margin-bottom: 2.0vh;
		font-size: 2.0rem;
	}

	#main {
		width: 100vw;
	}

	/* mainVisual はじめ*/

	.mainVisual_img--sp {
		width: 100%;
		height: auto;
		margin: 0 auto 5.0vh;
	}

	/* mainVisual おわり*/

	/* skills はじめ*/

	.contents_wrapper {
		width: 80.0vw;
		margin: 0 auto;
	}

	.skills {
		margin: 0 auto 5.0vh;
	}

	.skill_wrapper{
		margin-bottom: 6.0vh;
	}

	.skill_ttl {
		text-align: center;
	}

	.skill_ttl--jp {
		display: block;
		margin-bottom: 1.0vh;	
		font-size: 2.0rem;
	}

	.skill_ttl--en {
		display: block;
		margin-bottom: 2.0vh;
		font-size: 1.2rem;
		line-height:1.0;
		color:#666;
	}

	.skill_description {
		font-size: 1.4rem;
		line-height: 1.7;
	}

	.skill_icon {
		display: block;
		width: 20%;
		height: auto;
		margin: 0 auto 2.0vh;
	}

	/* skills おわり*/

	/* works はじめ*/

	.works_inner {
		margin: 0 auto 80px;
	}

	.worksList {
		text-align:center;
	}

	.worksList li {
		display: block;
		width: max-content;
		height: max-content;
		border: 1px solid #e0e0e0;
		box-sizing: border-box;
		margin:0 auto 40px;
	}

	.works_sumbnail--photo {
		position: relative;
		display: block;
		width: 100%;
	}

	.works_sumbnail--photo img {
		width: 80.0vw;
		height: auto;
	}

	.works_sumbnail--text {
		position: absolute;
		z-index: 100;
		bottom: 0;
		left: 0;
		width: 100%;
		height: max-content;
		background:rgba(255,255,255,0.70);
	}

	.works_sumbnail--name {
		display: block;
		margin: 1.5vh auto;
		font-size: 2.0rem;
		line-height: 1.4;
	}

	.works_sumbnail--position {
		display: block;
		width: max-content;
		margin: 0 auto 1.5vh;
		font-size: 1.4rem;
		line-height: 1.4;
	}

	/* works おわり*/

	/* SNSはじめ */

	.snsList_inner {
		margin: 0 0 4.0vh;
		text-align: center;
	}

	.sns_account {
		display: inline-block;
		font-size: 1.6em;
		line-height: 1.4;
	}

	.sns_name {
		display: inline-block;
		font-size: 2.2rem;
		margin-left: 2vw;
		line-height: 1.4;
	}

	.sns_link {
		display: block;
		text-align: center;
	}

	.sns_link img {
	/* .sns_nameの font-size: 2.2rem と line-height: 1.4を掛けた値 */
		height: 3.08rem;
	}

	.sns_detail {
		display: inline-block;
		margin-left:2vw;
	}
}
/* SNSおわり */

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
SP おわり ~899px
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/


/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
PC はじめ 900px~
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

@media only screen and (min-width: 900px) {

	#main {
		width: 100vw;
	}

	.h2 {
		margin-bottom: 4.0vh;
		font-size: 5.0rem;
	}
	
	.h3 {
		margin-bottom: 2.0vh;
		font-size: 2.2rem;
	}

/* mainVisual はじめ*/

	#mainVisual {
		margin-bottom: 6.7vh;
		background-color: #ecebeb;
		text-align: center;
	}

	.mainVisual_img--pc {
		max-width: 100%;
		height: auto;
	}

	/* mainVisual おわり*/

	.contents_wrapper {
		width: 80.0vw;
		margin: 0 auto;
	}

	/* skills はじめ*/

	#skills {
		margin: 0 auto 5.0vh;
		padding: 0;
	}

	.skill_wrapper {
		width:32%;
		margin-bottom: 6.0vh;
	}

	.skills_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap:2%;
	}

	.skill_ttl {
	text-align: center;
	}

	.skill_ttl--jp {
		display: block;
		font-size: 2.2rem;
		margin-bottom: 1.0vh;	
	}

	.skill_ttl--en {
		display: block;
		margin-bottom: 2.0vh;
		color:#888;
		font-size: 1.6rem;
		line-height:1.0;
	}

	.skill_icon {
		display: block;
		width: 30%;
		height: auto;
		margin: 0 auto 2.0vh;
	}

	.skill_description {
		width: 80%;
		margin: 0 auto;
		font-size: 1.6rem;
		line-height: 1.7;
	}

	/* skills おわり*/


	/* works はじめ */
	.works {
		margin: 0 auto;
	}

	.worksList {
		display:flex ;
		align-items: flex-start;
		gap: 2%;
	}

	.works_inner {
		margin: 0 auto 6.0vh;
	}

	.works li {
		width: 32%;
		border: 1px solid #e0e0e0;
		box-sizing: border-box;
	}

	.works li:nth-child(3n) {
		margin-right: 0;
	}

	.works_sumbnail--photo {
		position: relative;
		display: block;
		width: 100%;
	}

	.works_sumbnail--photo:hover {
		opacity: 0.7;
		color: #333;
		text-decoration: none;
	}

	.works_sumbnail--photo img {
		width: 100%;
		height: auto;
	}

	.works_sumbnail--text {
		position: absolute;
		z-index: 100;
		bottom: 0;
		left: 0;
		width: 100%;
		height: max-content;
		background-color:rgba(255,255,255,0.70);
	}

	.works_sumbnail--name {
		display: block;
		margin: 1.5vh 1vw;
		font-size: 2.0rem;
		line-height: 1.4;
	}

	.works_sumbnail--position {
		display: block;
		margin: 0 1vw 1.5vh 1vw;
		font-size: 1.4rem;
		line-height: 1.4;
	}

	/* works おわり */


	/* SNSはじめ */
	.sns {
		max-width: 960px;
		margin:0 auto 60px;
	}

	.snsList_inner {
		text-align: center;
	}

	.sns_icon {
		width: 36px;
		height: auto;
	}

	.sns_name {
		display: inline-block;
		font-size: 2.5rem;
		margin-left: 1vw;
		line-height: 36px;
	}

	.sns_account {
		display: inline-;
		font-size: 1.6em;
		margin-right: 1.4vw;
		line-height: 36px;
	}

	.sns_link {
		text-align: center;
	}

	.sns_detail {
		display: inline-block;
		margin-left:1vw;
	}
/* SNSおわり */
}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
PC おわり 900px~
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/