@charset "utf-8";

/*===========　レスポンシブ用基礎CSS　===========*/

/*ボックスモデルをborder-boxに変更*/
* {
	box-sizing: border-box;
}

/*フルードイメージ*/
img {
	max-width: 100%;
	height: auto;
}

/*回転時の文字調整封印*/
html{
  -webkit-text-size-adjust: 100%;
}

/*===========　スマホ用　通常時　===========*/
body {
	font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/*===========768以下スマホ===========================================================*/
@media(max-width:768px){
	body{
		width:90%;
		margin:0 auto;
}
}
/*-----------ヘッダー----------------------------------------------------------*/
header{
	width:100%;
	height:100vh;
}

.headerTop{
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.menu-btn{
	display:none;
}
	
.nav ul{
	display:flex;
	justify-content:right;
}
.nav ul li a{
	display:block;
	width:100%;
	padding:2rem;
	font-size:17px;
	font-weight:bold;
	font-family:serif;
}


.title{
	text-align:center;
	margin-top:10rem;
	}

.title h1{
	font-family:serif;
	margin:  0;                 /* デフォルトCSS打ち消し */
    position:  relative;        /* 位置調整 */
    font-weight:  normal;       /* 文字の太さ調整 */
    font-size: 40px;            /* 文字サイズ指定 */
    text-align:  center;        /* 文字位置指定 */
    margin:  20px 0;            /* 周りの余白指定 */
    display: inline-block;      /* インラインブロックにする */
}

.title h1:before {
    content: '';                /* 空の要素を作る */
    height: 57px;               /* 高さ指定 */
    width: 60px;                /* 幅指定 */
    border: solid 1px #ccc;     /* 枠線指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    left:  0;                   /* 位置調整 */
    top: 0;                     /* 位置調整 */
    margin:  auto;              /* 位置調整 */
    z-index: -1;                /* 重なり調整 */
}
.title h1:after {
    content: '';                /* 空の要素を作る */
    height: 120px;               /* 高さ指定 */
    width: 120px;                /* 幅指定 */
    border: solid 1px #ccc;     /* 枠線指定 */
    display:  block;            /* ブロック要素にする */
    position:  absolute;        /* 位置調整 */
    right:  0;                  /* 位置調整 */
    bottom:  0;                 /* 位置調整 */
    margin:  auto;              /* 位置調整 */
    z-index: -1;                /* 重なり調整 */
}
.title p{
	letter-spacing:7px;
}
.titleText{
	font-size:14px;
	font-family:serif;
	text-align:center;
	line-height:1.8rem;
	margin-top:30px;
}
/*===========768以下スマホ===========================================================*/
@media(max-width:768px){

	header{
		height:70vh;
	}
	
	.nav ul{
		display:block;
		color:#ffffff;
	}
	
	/*----------------------------
	* メニュー開閉ボタン
	*----------------------------*/
	.menu-btn{
	  position: fixed;
	  top: 20px;
	  right: 20px;
	  z-index: 2;
	  width: 40px;
	  height: 40px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background: #333;
	  color: #fff;
	}

	/*----------------------------
	* メニュー本体
	*----------------------------*/
	.nav{
	  position: fixed;
	  top: 0;
	  right: 0;
	  z-index: 1;
	  width: 100vw;
	  height: 100vh;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  background: #555;
	}
	.menuItem{
	  width: 100%;
	  height: auto;
	  padding: .5em 1em;
	  text-align: center;
	  color: #fff;
	  box-sizing: border-box;
	}

	/*----------------------------
		*アニメーション部分
	/*----------------------------*/

	/* アニメーション前のメニューの状態 */
	.nav{
	  transform: translateX(100vw);
	  transition: all .3s linear;
	}
	/* アニメーション後のメニューの状態 */
	.nav.is-active{
	  transform: translateX(0);
	}
	
	.title h1{
		font-family:serif;
		margin:  0;                 /* デフォルトCSS打ち消し */
	    position:  relative;        /* 位置調整 */
	    font-weight:  normal;       /* 文字の太さ調整 */
	    font-size: 30px;            /* 文字サイズ指定 */
	    text-align:  center;        /* 文字位置指定 */
	    margin:  20px 0;            /* 周りの余白指定 */
	    display: inline-block;      /* インラインブロックにする */
	}
	
	.title h1:before {
	    content: '';                /* 空の要素を作る */
	    height: 57px;               /* 高さ指定 */
	    width: 60px;                /* 幅指定 */
	    border: solid 1px #ccc;     /* 枠線指定 */
	    display:  block;            /* ブロック要素にする */
	    position:  absolute;        /* 位置調整 */
	    left:  0;                   /* 位置調整 */
	    top: 0;                     /* 位置調整 */
	    margin:  auto;              /* 位置調整 */
	    z-index: -1;                /* 重なり調整 */
	}
	
	.title h1:after {
	    content: '';                /* 空の要素を作る */
	    height: 90px;               /* 高さ指定 */
	    width: 90px;                /* 幅指定 */
	    border: solid 1px #ccc;     /* 枠線指定 */
	    display:  block;            /* ブロック要素にする */
	    position:  absolute;        /* 位置調整 */
	    right:  0;                  /* 位置調整 */
	    bottom:  0;                 /* 位置調整 */
	    margin:  auto;              /* 位置調整 */
	    z-index: -1;                /* 重なり調整 */
	}
	
	.title p{
		letter-spacing:7px;
	}
	
	.titleText{
		font-size:11px;
		font-family:serif;
		text-align:left;
		line-height:1rem;
	}
	
}
/*-----------メイン----------------------------------------------------------*/
main{
	width:1000px;
	margin:0 auto;
}


h2 span{
	text-align:center;
	font-size: 35px;
    margin-bottom: 24px;
    font-family: serif;
  position: relative;
  padding: 0.25em 1em;
  border: solid 2px black;
  border-radius: 3px 0 3px 0;
}

h2 span:before, h2 span:after {
  content: '';
  position: absolute;
  width:10px;
  height: 10px;
  border: solid 2px black;
  border-radius: 50%;
}

h2 span:after {
  top:-12px;
  left:-12px;
}
h2 span:before {
  bottom:-12px;
  right:-12px;
}

section{
	margin-bottom:50px;
}
/*===========768以下スマホ===========================================================*/
@media(max-width:768px){
	main{
	width:100%;
	margin:0 auto;
	}

	 h2 span{
		font-size: 23px;
	}

	section{
		margin-bottom:50px;
	}
}
/*-----------works----------------------------------------------------------*/
#works{
	text-align:center;
}

.worksContainer{
	display:flex;
	flex-wrap:wrap;
	background:#f0f8ff;
	margin-top:20px;
	padding:20px 0;
}
.worksBox{
	width:33%;
	margin-top:60px;
	text-align:center;
}

.worksImg img{
	height:150px;
	margin-bottom:16px;
}

.worksText{
	font-size:16px;
	font-family:serif;
}
h3 span{
	font-size:10px;
}
h3{
	font-family:serif;
}

.worksText{
	padding:0 30px;
	font-size:14px;
	text-align:left;
	margin-top:20px;
	line-height: 1.5rem;
}

/*--------------popup---------------*/
#popup1,#popup2,#popup3,#popup4,#popup5,#popup6,#popup7,#popup8,#popup9,#popup10,#popup11 {
  display: none; /* label でコントロールするので input は非表示に */
}

.popup-open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
	background: #ff0;
    padding: 5px 10px;
    line-height: 3rem;
    border-radius: 8px;
    font-size: 11px;
}

.popup-overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}

#popup1:checked ~ .popup-overlay,
#popup2:checked ~ .popup-overlay,
#popup3:checked ~ .popup-overlay,
#popup4:checked ~ .popup-overlay,
#popup5:checked ~ .popup-overlay,
#popup6:checked ~ .popup-overlay,
#popup7:checked ~ .popup-overlay,
#popup8:checked ~ .popup-overlay,
#popup9:checked ~ .popup-overlay,
#popup10:checked ~ .popup-overlay,
#popup11:checked ~ .popup-overlay {
  display: block;
  z-index: 99999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.popup-window {
  width: 90vw;
  max-width: 560px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 6px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-text {
  margin: 0;
}

.popup-text:not(:last-of-type) {
  margin-bottom: 1em;
}

.popup-close {
  cursor: pointer;
  position: absolute;
  top: -26px;
  right: 0;
}

dl{
	text-align:left;
	line-height: 2rem;
}
dt span{
	background:#00f;
	color:#fff;
}


/*===========768以下スマホ===========================================================*/
@media(max-width:768px){

	.worksContainer{
		display:block;
		background:#f0f8ff;
		margin:0 auto;
	}
	.worksBox{
	width:100%;
	height:260px;
	margin-top:30px;
	text-align:center;
	}

	.worksImg img{
		height:150px;
		margin-bottom:16px;
	}

	.worksText{
		font-size:12px;
		font-family:serif;
	}
	.worksText span{
		font-size:9px;
	}
}
/*-----------skill----------------------------------------------------------*/
#skill{
	text-align:center;
}
#skill h3{
	margin-top:10px;
}

.skillContainer{
	display:flex;
	flex-wrap:wrap;
	margin-bottom:8rem;
	margin-top: 60px;
}
.skillBox{
	width:33%;
	margin-top:30px;
}
	

.wIcon{
	display:flex;
	justify-content: center;
}
.Icon8{
	margin-top:34px;
}
/*===========768以下===========================================================*/
@media(max-width:768px){
	.skillBox{
		width:45%;
		margin-top:30px;
	}
	.skillContainer{
		margin: 0px auto 5rem;
	}
}
/*-----------about----------------------------------------------------------*/
#about{
	text-align: center;
}

.aboutBox{
	text-align: left;
    width: 60%;
    margin: 0 auto;
    line-height: 30px;
    padding:50px;
}

.aboutSection{
	margin-top:60px;
	background:#f0f8ff;
}

.myImage{
	float: left;
    width: 30%;
    margin: 10px;
}
.aboutText{
	font-family:serif;
}
/*===========768以下===========================================================*/
@media(max-width:768px){
	.aboutBox{
		width:100%;
	}
	.myImage{
		width:50%;
		margin:0 auto;
	}
	.myName{
		text-align:center;
		font-weight:bold;
		
	}
}
/*-----------contact----------------------------------------------------------*/
#contact{
	text-align: center;
    line-height: 50px;
    font-size: 18px;
}

#contact h2{
	margin-bottom:60px;
}

#contact p{
	font-family:serif;
}
#sns{
	font-size:40px;
}
/*===========768以下スマホ===========================================================*/
@media(max-width:768px){
	#contact{
		font-size:15px;
	}
}
/*-----------フッター----------------------------------------------------------*/
footer{
	
}


/*//////////下層ページ/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#underMain{
	margin:50px auto;
	text-align:center;
}

#underMain h1{
	font-size:30px;
	font-family:serif;
	margin-bottom:50px;
	background:#e2e2e2;
	padding:10px 0;
}

#underMain dl{
	text-align:left;
	margin:50px 0;
}
#underMain dt{
	margin:10px 0;
	font-size:20px;
}
#underMain dd{
	margin:10px 0;
	line-height:1.5em;
}
.back{
	font-size:18px;
	font-family:serif;
}

#underMain img{
	border:solid 0.7px #e2e2e2;
}

.mosyaBox{
	display:flex;
	justify-content: space-around;
}
/*===========768以下スマホ===========================================================*/
@media(max-width:768px){

	#neutralMain h1{
		font-size:16px;
	}
	#neutralMain{
		margin:100px auto;
	}
	#neutralMain dt{
		font-size:14px;
	}
	#neutralMain dd{
		font-size:12px;
	}
}
.mosyaBox{
	display:block;
}
.mosyaImg{
	margin:30px 0;
}