@charset "utf-8";




/*google fontsの読み込み*/
@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap');


/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body,html {width: 100%;}
body {
	margin: 0px;
	padding: 0px;
	color: #000000;	/*全体の文字色*/
	font-family:"futura-pt","yu-gothic-pr6n","Tsukushi A Round Gothic", " Yo Gothico", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-style: normal;
	font-weight: 300;
	font-size: 16px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #fff;	/*背景色*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,input,textarea {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #000000;		/*リンクテキストの色*/
	transition: 0.4s;	/*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
	text-decoration-color:#fff6e0;
	text-underline-offset: 3px;
	text-decoration-thickness: 3px;
}


a:hover {
	color: #9b9b9b;			/*マウスオン時の文字色*/
	text-decoration:none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	background-color:#e4e4e4;
}

a h3 {
	text-decoration:none;
}

a h3:hover{
	color: #fff;			/*マウスオン時の文字色*/
	text-decoration:none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
	background-color:#e4e4e4;
}


/*header（大きな端末用：左ブロック）
---------------------------------------------------------------------------*/
/*headerブロック*/
header.pc {
	position: fixed;	/*スクロールしても固定表示させる指定*/
	left: 0px;
	top:0px;
	z-index: 100;
	width: 100px;		/*幅*/
	height: 100%;		/*高さ*/
	background: #fff;	/*背景色（古いブラウザ用）*/

}

/*マウスオン時のheaderブロック*/
header.pc{
	width: 20%;	
	/*overflow: auto;	ウィンドウの高さよりコンテンツが増えた場合に切れないように自動でスクロールバーを出す設定*/
}

header.p{
	color: #000;
}
/*ロゴ画像ブロック*/
header.pc .logo {
	position: relative; 
	max-width:300px;
	
}




/*メインメニュー
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
.menubar li {
	font-size: 20px;	/*文字サイズ*/
	position: relative;
}
.menubar li a {
	display:  block;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	width: auto;	/*幅*/
	padding-left: 60px;	/*左に空ける余白*/
	padding-top: 30px;
}

.menubar span{
	text-align: start;
    font-size: 12px;
}
/*マウスオン時*/
header:hover .menubar li a:hover {
	background-color: rgba(165,156,143,0.2);	/*108,156,222はリンクカラーをRGB値で表した数字で、0.2は色が20%出た状態。*/
}

/*現在表示中メニュー（current）*/
.menubar li.current a {
	background-color: #fff;	/*背景色*/
}

/*メニュー用アイコン設定（menu1〜memu4までの共通設定）*/
.menuimg a {
	width: 60px;	/*幅*/
	height: 60px;	/*高さ*/
	display: inline-block;

}

/*スマホ用メニューを表示させない*/
.menubar-s {display: none;}
/*３本バーアイコンを表示させない*/
.menubar_hdr {display: none;}

/*facebookやtwitterなどのアイコンブロック
---------------------------------------------------------------------------*/
/*アイコンを囲むブロック全体の設定*/
header .icon {
	text-align: center;	/*内容をセンタリング*/
	padding: 10px 0;	/*上下、左右への余白*/
}
/*アイコン１個あたりの設定*/
header .icon li {
	display: inline;	/*横並びにさせる指定*/
}
/*アイコン画像の設定*/
header .icon img {
	width: 20%;		/*画像の幅*/
}

/*mainブロック
---------------------------------------------------------------------------*/
/*アニメーション設定------------------------*/
@keyframes main {
/*0コマ目*/
0% {
	opacity: 0;
	top: 20px;
}
/*100コマ目*/
100% {
	opacity: 1;
	top: 0px;
}
}
/*mainブロック*/
.main {
	
	padding: 0% 5% 0 25%;		/*上、右、下、左へのブロック内の余白*/
	height: 98%;				/*高さ*/
	animation-duration: 0.5S;	/*アニメーションの実行時間。秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持する*/
	animation-name: main;		/*上のアニメーション設定で使っているkeyframesの名前。contents。*/
	animation-delay: 0.8s;		/*アニメーションを遅れて開始させる指定。0.5sは0.5秒の事。*/
	max-width: 1200px;
    margin: 0 auto;
}

 h1 {
	font-size: 40px;
    padding: 19px 0 0px 0px;
}



/*h2タグ*/
.main h2 {
	clear: both;
	margin-bottom: 0rem;	/*見出しの下に空けるスペース*/
	margin-top: 3.5rem;
	font-size: 35px;		/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くとる設定*/
	color: #000;			/*文字色*/
	
}
/*h2タグの１文字目への指定*/
.main h2::first-letter {
	border-left: 10px solid #f5e5a1;	/*左の線の幅、線種、色*/
	padding-left: 20px;				/*線と文字の間の余白*/
}
/*h2タグにclass="title"をつけたタイプ。大見出し。*/
.main h2.title {
	font-family: "futura-pt","yu-gothic-pr6n","Tsukushi A Round Gothic";	/*冒頭のgoogle fontsの指定*/
	font-size: 60px;			/*文字サイズ*/
	margin-bottom: 40px;		/*見出しの下に空けるスペース*/
	border-bottom: 1px solid #000;	/*下線の幅、線種、色*/
	
}
.main h2.title::first-letter {
	border-left: none;
	padding-left: 0;
}
/*h2タグにclass="title"をつけたタイプ内にあるspanタグ*/
.main h2.title span {
	display: block;
	font-size: 15px;	/*文字サイズ*/
	float: right;		/*右に回り込み*/
	margin-top: 60px;	/*上に空ける余白。上下のバランスをここでとります。*/
}
/*h3タグ*/
.main h3 {
	clear: both;
	margin-bottom: 20px;	/*見出しの下に空けるスペース*/
	font-size: 17px;		/*文字サイズ*/
	text-align: start;
    
}


/*段落(p)タグ*/
.main p {
	padding: 0 0px 5px;	/*上、左右、下への余白*/
	font-size: 15px;
}
/*他。微調整。*/
.main p + p {
	margin-top: -5px;
	font-size: 15px;
}
.main h2 + p,
.main h3 + p {
	margin-top: 30px;
}
.main section + section {
	clear: both;
}

/*listブロック（works.htmlで使用）
---------------------------------------------------------------------------*/
/*各ボックスの指定*/
.list {
	position: relative;
	float: left;	/*左に回り込み*/
	width: 30%;		/*幅*/
	margin-left: 2.5%;	/*左に空けるスペース*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background: #000;	/*背景色*/
	color: #fff;	/*文字色*/
}
.list a {
	display: block;
	text-decoration: none;
	color: #fff;	/*文字色*/
}

/*figure画像*/
.list a figure {
	opacity: 0.6;	/*リンクを指定した際は60%だけ色を出す。*/
}
/*マウスオン時のfigure画像*/
.list a:hover figure {
	opacity: 1;		/*リンクを指定した際のマウスオン時に色を100%出す。*/
}
/*h4タグ*/
.list h4 {
	position: absolute;
	bottom: 0px;	/*下からの配置場所指定。*/
	left: 0px;		/*左からの配置場所指定。*/
	width: 100%;
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.5);	/*背景色。0,0,0は黒の事で0.5は色が50%出た状態。*/
	text-align: center;	/*内容をセンタリング*/
	padding: 10px 0;	/*上下、左右への余白*/
}

/*footerブロック
---------------------------------------------------------------------------*/
footer {
	color: #fff;
	font-size: 0.5rem;
	clear: both;
	padding: 20px 0;
	margin: 20px 0;
	font-weight: lighter;
	background-color: #f5e5a1;
	text-align: end;
}
.home footer {padding-bottom: 10px;}
footer a {text-decoration: none;}

/*「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*見出しを含まないお知らせブロック*/
.about dl {
	height: 100px;		
	
}

/*日付設定*/
.about dt {
	float: left;	/*左に回り込み*/
	width: 9em;		/*幅*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる設定*/
}
/*記事設定*/
.about dd {
	padding-left: 9em;	/*左に空ける余白*/
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border: 1px solid #a59c8f;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
	background: #a59c8f;		/*背景色*/
	color: #fff;	/*文字色*/
}
/*テーブルの見出し（※tamidashi）*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
	background: #a59c8f;	/*背景色*/
	color: #fff;	/*文字色*/
}
/*ta1設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 20px;
}
.ta1, .ta1 td, .ta1 th {
	word-break: break-all;
	border: 1px solid #a59c8f;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 140px;		/*幅*/
	text-align: center;	/*センタリング*/
}


/*checkブロック。赤い注意書きブロックです。
---------------------------------------------------------------------------*/
p.check {
	background: #ff0000;
	color:#fff;
	padding: 10px 25px !important;
	margin-bottom: 20px;
}
p.check a {color: #fff;}




/*box
---------------------------------------------------------------------------*/
.box {
	background: #d0cac1;;				/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.5);	/*背景色。255,255,255は白の事で0.5は色が50%出た状態の事。*/
	padding: 5%;					/*ボックス内の余白*/
	margin-bottom: 30px;			/*ボックスの下に空けるスペース*/
	border: 1px solid #d0cac1;		/*線の幅、線種、色（古いブラウザ用）*/
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #000;padding: 5px 10px;border-radius: 4px;border: 1px solid #666;color: #fff;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.clear {clear: both;}
.color1, .color1 a {color: #a59c8f !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
.fl {float: left;}
.fr {float: right;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}
.pagetop {display: block;margin-top: -2%;padding-top: 2%;}
.sp {display:none;}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:768px){


/*header（小さな端末用：上部ブロック）
--------------------------------------------------------------------------
/*ロゴ画像ブロック*/
header.sh .logo {
	width: 8px;	/*ロゴ画像の幅*/
}


/*navブロックのみの追加指定*/
.menubar-s nav {
	border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
	overflow: auto;
}
/*メニュー１個あたりの設定*/
.menubar-s nav li a {
	display: block;
	text-decoration: none;width: 100%;
	border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
	font-size: 16px;	/*文字サイズ*/
	height: 100px;		/*高さ*/
	height: 60px;		/*高さ*/
	color: #fff;	/*文字色*/
}
/*最後のnavメニューの下線を消す*/
.menubar-s nav li:last-child a {
	border-bottom: none;
}
/*テキスト*/
.menubar-s nav li a span {
	display: block;
	padding-top: 15px;	/*上に空ける余白。上下のバランスをとります。*/
	padding-left: 80px;	/*左に空ける余白*/
}

/*PC用メニューを非表示にする*/
.menubar {display: none;}


/*facebookやtwitterなどのアイコンブロック
---------------------------------------------------------------------------*/
/*アイコンを囲むブロック全体の設定*/
header .icon {
	clear: left;
	border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
}
/*アイコン画像の設定*/
header .icon img {
	width: 50px;
}

/*mainブロック
---------------------------------------------------------------------------*/
/*mainブロック*/
.main {
	padding-left: 3%;
	padding-right: 3%;
}

.main p + p {
	margin-top: -5px;
	font-size: 10px;
}
/*h2タグ*/
.main h2 {
	font-size: 20px;		/*文字サイズ*/
	letter-spacing: normal;	/*文字間隔を標準に戻す*/
}
/*h2タグにclass="title"をつけたタイプ。大見出し。*/
.main h2.title {
	font-size: 30px;		/*文字サイズ*/
	margin-bottom: 20px;	/*見出しの下に空けるスペース*/
}
/*h2タグにclass="title"をつけたタイプ内にあるspanタグ*/
.main h2.title span {
	margin-top: 20px;	/*上に空ける余白。上下のバランスをここでとります。*/
}

/*footerブロック
---------------------------------------------------------------------------*/
footer {padding-bottom: 100px;}
footer .pr {display: block;}



/*その他
---------------------------------------------------------------------------*/

.pc {display:none;}
.sp {display:block;}
}



#top-word-1{
  font-size:1rem;
  text-align: center;
  
}
#top-word-2{
  font-size:1.8rem;
  text-align: center;
  margin:0 5% 5% 5%;
  font-weight: bold;
  font-family: "fot-tsukuardgothic-std", sans-serif;
font-weight: 700;
font-style: normal;
border-bottom: 2px solid #f0e4a8;
z-index: 100;
position: relative;

}

.yohak-pc{
	padding-top: 15%;
}


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

.yohak{
	padding-top: 15%;
}


.yohak-pc{
	padding-top: 15%;
}

}





/*アンダーラインの色*/
.line{
	text-decoration: underline 5px#f5e5a1; 
}

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

	#top-word-1{
	    font-size: 20px;
    text-align: center;
   
	  }

	  #top-word-2 {
		font-size: 16px;
		text-align: center;
		margin: 20% 5% 5% 5%;
		font-weight: bold;
		font-family: "fot-tsukuardgothic-std", sans-serif;
		font-weight: 700;
		font-style: normal;
		border-bottom: 1px solid  #f0e4a8;
		z-index: 100;
		position: relative;
		padding: 2%;
	}
}

/*画面を横向きにした場合の高さが500px以下の場合の設定。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:768px){

/*メインメニュー。小さな端末用メニューを２列に。
---------------------------------------------------------------------------*/
/*メニュー１個あたりの設定*/
.menubar-s nav li a {
	float: left;		/*左に回り込み*/
	width: 50%;			/*幅*/
}

}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:768px){

/*mainブロック
---------------------------------------------------------------------------*/
/*h1タグ*/
 h1 {
	font-size: 35px;
    padding: 19px 0 0px 0px;
}


/*h2タグ*/
.main h2 {
	font-size: 1.9rem;		/*文字サイズ*/
	clear: both;
	margin-bottom: 0rem;	/*見出しの下に空けるスペース*/
	margin-top: 0rem;
	font-size: 20px;		/*文字サイズ*/
	letter-spacing: 0.1em;	/*文字間隔を少し広くとる設定*/
		
}

/*h2タグにclass="title"をつけたタイプ。大見出し。*/
.main h2.title {
	font-size: 20px;		/*文字サイズ*/
}
/*h2タグにclass="title"をつけたタイプ内にあるspanタグ*/
.main h2.title span {
	font-size: 11px;
	margin-top: 10px;	/*上に空ける余白。上下のバランスをここでとります。*/
}
/*h3タグ*/
.main h3 {
	font-size: 17px;
    text-align: start;
	padding-left: 5%;
    
}
	
/*段落(p)タグ*/
.main p {
	padding: 0 ;	/*上、左右、下への余白*/
	font-size: 13px;
}
/*他。微調整。*/
.main section + section {
	padding-top: 0px;
}

/*listブロック（works.htmlで使用）
---------------------------------------------------------------------------*/
/*リンクを指定した際に右上に出る「→」*/
.list a::after {
	right: 2px;			/*右からの配置場所指定*/
	top: 2px;			/*上からの配置場所指定*/
	line-height: 20px;	/*行間。下のwidthと揃えて下さい。*/
	width: 20px;		/*幅。上のline-heightと揃えて下さい。*/
}
/*h4タグ*/
.list h4 {
	padding: 0;
}

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1設定*/
.ta1, .ta1 td, .ta1 th {
	padding: 5px;	/*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 100px;
}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 10px 20px 30px;
}
ol {
	padding: 0 10px 20px 30px;
}

/*その他
---------------------------------------------------------------------------*/
.ws,.wl {width: 94%;}

}

/*アイコン
---------------------------------------------------------------------------*/
.aka-icon{
    flex-direction:row;
    width: 20%;
    margin: 5% 0%;
}

@media screen and (max-width: 768px){
	.aka-icon{
		flex-direction:row;
		width: 40%;
		margin: 5% 0%;
	}
}

/*works box
---------------------------------------------------------------------------*/
.square_content {
    max-width: 400px;
  }
   
  .square_content div {
    width: 10vw;
    height: 10vw;
    background: #f5e5a1;
  }

  .square_contents {
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
  }
   
  .square_contents div {
    position: relative;
    width: 31%;
    background: #f5e5a1;
    margin: 1%;
  }
  
   
  .square_contents div::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
   
 .square_contents p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  





   /*works box
---------------------------------------------------------------------------*/
  @media screen and (max-width: 768px){
      .square_contents{
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
		  border-radius: 10px;
      }


  }
.topimg{
	width: 1600px;

}

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


 /*about 中身
---------------------------------------------------------------------------*/





.container{
	display: flex;
	flex: wrap;
	align-items: center;
}

#ja-name
{

	font-size:14px;
}

#en-name{
  
	font-size: 18px;
}

#name
{
	font-size: 30px;
}

.more-about{
	background-color:#ebebeb75;
	padding: 1%;
}





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


	.container{
		display: flex;
		flex: wrap;
		align-items: center;
		
	}

	#name{
	font-size: 20px;
}

}
.name{
	padding: 0% 5%;
}



@media screen and (max-width: 768px){
	.skill{
		flex-wrap: wrap;
		flex-direction:column;
	}
	.skill-img{
		width: contpx;
		padding: 30%;
		height: auto;
	}
}



.skill dt{
	 font-size: 20px;
}


/* skill アイコン */

.skill-icon {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	
	
}

.skill-icon  p{
	padding: 0%;
	font-size: 15px;
}
@media screen and (max-width: 768px) {

.skill-icon {
	display: flex;
    flex-direction: column;
	justify-content: space-around;
	
	
}
.skill-icon  p{
	padding: 1%;
	font-size: 11px;
}

.skill-icon img {
    width: 50px;
    padding: 5% 0 0;
    height: auto;
}


}

.skill-icon img{
	
		width: 45px;
		padding: 20%;
		height: auto;
	
	
}


.skill-box{
 margin: 2%;
 display: flex;
 flex-direction: column;
 align-items: center;
 margin: 2% 8% 2% 2%;
}

.skill-content{
	display: flex;
	flex-direction: row;
	margin-bottom: 7%;
	align-items: center;
	padding: 15px;
	border-bottom: 0.4px solid #000;

}

.icon-p{
	padding: 0%;
    color: #a5a5a5;
}


@media screen and (max-width: 768px) {
.skill-content{
	width: 94%;
    display: flex;
    flex-direction: row;
    margin-bottom: 10%;
    padding: 3% 0 3% 1%;
}

.skill-box{
 margin: 2%;
 display: flex;
 flex-direction: column;
 align-items: center;
 margin: 2% ;
}

.skill-content p{
	font-size: 10px;

}

}

/* 枠線をずらしたボタン
---------------------------------------------------------------------------*/
.btn01{
	margin: 5%;
	font-size: 13px;
	font-weight: bold;
	display: flex;
    justify-content: flex-end;
	text-decoration: none;
	
}

.btn01 a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 15px;
	width: 100px;
	background-color:#f2f1e987;
	border: 1px solid rgba(0, 0, 0, 0);
	border-radius: 50px;
	text-decoration: none;
	
  }
  
  .btn01 a::before {
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	border: 1px solid #333;
	border-radius: 50px;
	text-decoration: none;
  }
  
  @media screen and (max-width: 768px) {
	.btn01 a {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		padding: 8px;
    width: 80px;
		background-color:#f2f1e987;
		border: 1px solid rgba(0, 0, 0, 0);
		border-radius: 50px;
		text-decoration: none;
		
	  }
	  
	  .btn01 a::before {
		content: "";
		position: absolute;
		top: -2px;
    left: -2px;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		border: 1px solid #333;
		border-radius: 50px;
		text-decoration: none;
	}

  }


.top-about{
	padding-bottom: 5%;
	
}

/* ボックス
---------------------------------------------------------------------------*/

.msr_box01 {
	
	width: 230px;
	margin: 1%;
  }
  .msr_box01 a{
	background-color: #FFFFFF;
	border: 1px solid #B9B9B9;
	box-sizing: border-box;
	color:#000000;
	display:block;
	padding: 8px;
	transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-webkit-transition: 0.2s ease-in-out;
	border-radius: 10px;
	
  }
  .msr_box01 img{
	margin:0 0 5px;
  }
  .msr_box01 .ttl {
	font-size: 16px;
	line-height: 1.6;
  }
  .msr_box01 p {
	font-size: 13px;
	
  }
  .msr_box01 a:hover{
	opacity: 0.8;
  }

.works-box{
	display: flex;
	flex-direction: row;
	flex: wrap;
	
}



@media screen and (max-width: 768px){
	
		.works-box{
			display: flex;
			flex-direction:column;
			
		}

	}


.border-line{
	border-bottom:1px dashed #B9B9B9 ;
}




/* ハンバーガーメニュー
---------------------------------------------------------------------------*/


@media screen and (max-width:768px){
/*============
nav
=============*/

nav {
	display: block;
	position: fixed;
	top: 0;
	left: -300px;
	bottom: 0;
	width: 300px;
	background: #ffffff;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: all .5s;
	z-index: 3;
	opacity: 0;
  }


  .open nav {
right: 0px;
	opacity: 1;
  }
  nav .inner {
	padding: 25px;
  }
  nav .inner ul {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  nav .inner ul li {
	position: relative;
	margin: 0;
	border-bottom: 1px solid #333;
  }
  nav .inner ul li a {
	display: block;
	color: #333;
	font-size: 20px;
	padding: 0.7em;
	text-decoration: none;
	transition-duration: 0.2s;
  }
  nav .inner ul li a:hover {
	background: #e4e4e4;

  }

  nav .inner span{
	display: block;
    text-align: start;
    font-size: 12px;
	
  }


  
  }
  @media screen and (max-width: 768px) {
	nav {
	left: 0px;
	  width: 220px;
	}
  }
  /*============
  .toggle_btn
  =============*/
  .toggle_btn {
	display: block;
	position: fixed;
	top: 13px;
	left: 20px;
	width: 20px;
	height: 30px;
	transition: all .5s;
	cursor: pointer;
	z-index: 2000;
  }
  .open .toggle_btn {
	left: 330px;
  }
  .toggle_btn span {
	display: block;
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background-color: rgb(255, 255, 255);
	border-radius: 4px;
	transition: all .5s;
  }
  .toggle_btn span:nth-child(1) {
	top: 4px;
  }
  .toggle_btn span:nth-child(2) {
	top: 14px;
  }
  .toggle_btn span:nth-child(3) {
	bottom: 4px;
  }
  .open .toggle_btn span {
	background-color: #fff;
  }
  .open .toggle_btn {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
  .open .toggle_btn span:nth-child(1), .open .toggle_btn span:nth-child(3) {
	width: 16px;
  }
  .open .toggle_btn span:nth-child(1) {
	-webkit-transform: translate(-1px,4px) rotate(-45deg);
	transform: translate(-1px,4px) rotate(-45deg);
  }
  .open .toggle_btn span:nth-child(3) {
	-webkit-transform: translate(-1px,-4px) rotate(45deg);
	transform: translate(-1px,-4px) rotate(45deg);
  }
  @media screen and (max-width: 768px) {
	.open .toggle_btn {
	  left: 20px;
	}
  }
  /*============
  #mask
  =============*/
  #mask {
	display: none;
	transition: all .5s;
	visibility: hidden;
  }
  .open #mask {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .8;
	z-index: 2;
	cursor: pointer;
	visibility: visible;
  }
  /*============
  main
  =============*/
  main {
	width: 100%;
	padding: 50px 0;
	transition: all .5s;
  }
  .open main {
	margin-left: 300px;
  }
  main h1 {
	
	font-weight: 300;
	text-align: center;
  }


  

/*四角ずらし*/

h4 {
    position: relative;
    margin: 2%;
    margin-bottom: 3rem;
    margin-top: 3rem;
    padding: 0.3rem;
    color: black;
    border-bottom: 3px solid #f5e5a1;
    width: 350px;
    font-size: 1.2rem;
    text-align: center;

}









  




.about-works{
 border-left: solid 10px #e9e4d4;
 margin: 3% 0;
 
}


.about-student{
	border-left: solid 10px #e9e4d4;
	
}

.about-works div{
	background:#e9e4d4;
	margin-left:3%;
	margin-top: 3%;
	width:100px ;
	text-align: center;
}

.about-works p{
	
	margin-left:3%;
	margin-top: 3%;
	
}

.about-works img{
	width: 100%;
    max-width: 300px;
    padding-left: 50%;
    padding-top: 5%;
	
}

@media screen and (max-width: 768px) {
.about-works img{
	width: 100%;
    max-width: 300px;
    padding-left: 15%;
    padding-top: 5%;
	
}
}


.about-student div{
	background:#e9e4d4;
	margin-left:3%;
	margin-top: 3%;
	width:100px ;
	text-align: center;
}

.about-student p{
	
	margin-left:3%;
	margin-top: 3%;
	
}

.about-student img{
	width: 50%;
	max-width: 200px;
	padding-left: 50%;
	
}

.personality h4{
	background-color: #fff;
}

.personality img{
	width: 50%;
	max-width: 100px;
	
	
}


.illust-box{
	display: flex;
	justify-content: flex-end;
	padding: 2%;
	background-color: #fff !important; 
}


/* contact 画像*/
.contact-box{
	 display: flex;
	 justify-content: space-between;
	 max-width: 380px;
	 margin:5%  0;
	 
}

.contact-box img{
	max-width: 100px;
	margin: 3%;
}

.contact-top {
	width: 50%;
}

@media screen and (max-width: 768px) {
	.contact-top {
		width: 100%;
	}

	.contact-box img{
		max-width: 60px;
		margin: 3%;
	}
	
	.contact-box {
		display: flex;
		justify-content: space-around;
		max-width: 380px;
		margin: 5% 0;}

}


/* 上三角 */

.arrow{
	width: 30px;
	height: 30px;
	border: 5px solid;
	border-color: #000000 #000000 transparent transparent;
	transform: rotate(-45deg);
  }






/* --------------------------------------------------------
	card
-------------------------------------------------------- */

.cardContainer {
	display: flex;
    flex-flow: nowrap;
    justify-content: space-around;
    background-color: #f2f1e95c;
    border-radius: 5px;
    padding: 4% 2%;
    margin: 3% 0;
	
}


.cardContainer p{
	font-size:  13px;
	margin-top:0rem;
	text-align: left;
	border-left: none;
	background-color: #fff;
	border-bottom: 0.4px solid #000;
	padding-left: 10px;
}

.cardBox {
	width: calc(50%);
	margin: 0 5px;
}


@media screen and (max-width: 475px) {
	.cardBox {
		width: 100%;
		margin-bottom: 50px;
		height: 250px;
	}
	.cardBox:last-child {
		margin-bottom: 20px;
	}



.cardContainer {
	display: flex;
    flex-flow: nowrap;
    justify-content: space-around;
    background-color: #f2f1e95c;
    border-radius: 5px;
    padding: 4% 2%;
    margin: 3% 0;
	flex-direction: column;
	
}
}


@media screen and (max-width: 768px) {
	.cardContainer p{
		font-size:  12px;
		margin-top:0rem;
		text-align: left;
		border-left: none;
		background-color: #fff;
		border-bottom: 0.4px solid #000;
		padding-right: 10px;
		text-align: end;
	}
}

.cardBox img {
	display: block;
	margin: 0 auto 30px;
	border: 1px solid #b8b8b8;
}

.cardTtl {
	text-align: center;
	
}




.cardBox img {
    margin: 0 auto 30px;
}


.cardNumber {
	
	

	position: absolute;
    top: -13px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    display: inline-block;
    width: 120px;
    height: 5px;
    line-height: 1;
	padding-top: 2px;
	padding-bottom: 10px;
    border: 2px solid #fff;
    /* border-radius: 5%; */
    background-color:#fff;
    z-index: 0;
}


@media screen and (max-width: 768px) {
	.cardText {
		margin-bottom: 10px;
	}

	.cardNumber {
	
	display: none;

		position: absolute;
		top: 0px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		display: inline-block;
		width: 120px;
		height: 5px;
		line-height: 1;
		padding-top: 2px;
		padding-bottom: 10px;
		border: 2px solid #fff;
		/* border-radius: 5%; */
		background-color:#fff;
		z-index: 0;
	}

}
.cardText a {
	position: absolute;
	bottom: 30px;
	left: 25px;
}


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

#page-top{
	text-align: center;
	display: flex;
	flex-direction:column;
	align-items: center;
	font-size: 15px;
}

#page-top img{
	
	width: 2rem;
}











/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	
}

@media screen and (max-width: 768px) {
.slider {
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 35vh;
}
}


/*　背景画像設定　*/


.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	/*position: relative;*/
	z-index: 3;
    text-align:center;
	margin:-3rem 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    
    outline: none;
    width:20px;/*ドットボタンのサイズ*/
    height:20px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
	
    background:#f5e5a1;/*ドットボタンの現在地表示の色*/
}



.img-point{
	width: 70%;
	display:block;
    align-items: center;
}

.img-point img{
	margin: 0 auto;
}



@media screen and (max-width: 768px) {
	.img-point{
		width: 100%;
		align-items: center;
	}
	.img-point img {
		margin: 3%;
		width: 94%;
	}

}

.about-point img{
	width: 80%;
    margin: 3% 0;
}


@media screen and (max-width: 768px) {
	.about-point img{
		width: 100%;
	}
}


.about-h4{

		position: relative;
		margin: 0%;
		margin-bottom: 2rem;  margin-top: 1rem;
		padding: 0.3rem;
		color: black;
		border: 3px solid #f5e5a1;
		width: 150px;
		font-size: 1.5rem;
		text-align: center;
		background-color: #f5e5a1;

}




/*worksの中のやつ*/



dt.works-list {
    display: block;
    float: left;
    width: 25%;
    color: #afafaf;
    font-weight: 500;
}

dd.works-text {
    width: 75%;
    margin-bottom: 30px;
    vertical-align: baseline;
}

dl.worksPage-summary-twitter {
    display: flex;
    flex-wrap: wrap;
    margin: 100px 0 60px;
}


.point-about{
	width: 60%;
	margin: 5% 0;
}

@media screen and (max-width: 768px) {
	.point-about{
		width: 100%;
		margin: 5% 0;
	}
}


.worksPage-image{
	margin: 3% 0;
}


.worksPage-title-sub{
	background-color: #f5e5a1;
	width: 150px;
	text-align: center;
	margin-bottom: 3%;
	
}

@media screen and (max-width: 768px){
.worksPage-title-sub p{
    padding: 0px ;

}
}

/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{
	columns: 2;/*段組みの数*/
	padding:0 15px;/*ギャラリー左右に余白をつける*/
	margin:0;
	}
	
	.gallery li {
	margin-bottom: 15px;/*各画像下に余白をつける*/
	list-style:none;
	}
	
	/*ギャラリー内のイメージは横幅100%にする*/
	.gallery img{
		width:100%;
		height:auto;
		vertical-align: bottom;/*画像の下にできる余白を削除*/}
	
	/*　横幅900px以下の段組み設定　*/
	@media only screen and (max-width: 900px) {
		.gallery{
		columns:3;
		}	
	}
	
	@media only screen and (max-width: 768px) {
		.gallery{
		columns: 2;
		}	
	}
	

	.item {
		-webkit-mask-image: url('../images/mask.png');
		mask-image: url('../images/mask.png');
	  }

	.mask-par{
		position:  relative;        /* 要素の配置方法をと子要素の起点を指定 */
		top: -50px;
		
		
	}

	.mask{
	position:  absolute;        /* 要素の配置方法を指定 */
              /* 余白指定 */
    left: 0px;
	top: 100px;
	z-index: 100;
	
	}

	.scroll{
		
		position: absolute;
		width: 8%;
		right: 75px;
		top: 230px;
		z-index: 300;

	}



	@media screen and (max-width: 768px) {
		.mask{
			position:  absolute;        /* 要素の配置方法を指定 */
			top: 47%;
			z-index: 100;
		

			z-index: 100;
			}
	
		
			.mask-par{
				position:  relative;        /* 要素の配置方法をと子要素の起点を指定 */
				top: -50px;
				width: 100%;
				
			}

		.scroll{
		
			
			position: absolute;
			width: 12%;
			right: 22px;
			top: 440px;
			z-index: 300;
			
				}	

	}

	@media screen and (min-width:320px) and ( max-width:425px)  {
		.mask{
			position: absolute;
			left: 0px;
			top: 42%;
			z-index: 100;
		}
	}

		@media screen and (min-width:425px) and ( max-width:600px)  {
			.mask{
				position: absolute;
				left: 0px;
				top: 42%;
				z-index: 100;
			}
		}

		@media screen and (min-width:490px) and ( max-width:768px)  {
			.about{
				margin-top: 20%;
			}
		}

		@media screen and (min-width: 768px) and (max-width: 1024px){
		.about {
			margin-top: 35%;
		}
	}

			
			@media screen and (min-width:600px) and ( max-width:768px)  {
				.mask{
					position:  absolute;        /* 要素の配置方法を指定 */
					left: 0px;
			top: 42%;
					z-index: 100;
					}

					

				}			@media screen and (min-width:768px) and ( max-width:800px)  {
						.mask{
							position:  absolute;        /* 要素の配置方法を指定 */
							left: 0px;
					top:48%;
							z-index: 100;
							}
								
						}


		.scroll{
		
			position: absolute;
			width: 10%;
			right: 52px;
			top: 358px;
			z-index: 300;
					}	
		


	.design-par{
		position:  relative; 
	}

	.design-icon{
		position: absolute;
		left: 7%;
		top: -21%;
		z-index: 100;
		width: 35px;
	}

	.camera-par-1{
		position:  relative; 
	}

	.camera-icon-1{
		position: absolute;
		left: 2%;
		top: -21%;
		z-index: 100;
		width: 35px;
	}

	.camera-par-2{
		position:  relative; 
	}

	.camera-icon-2{
		position: absolute;
		left: 2%;
		top: -21%;
		z-index: 100;
		width: 35px;
	}

	.camera-par-3{
		position:  relative; 
	}

	.camera-icon-3{
		position: absolute;
		left: 7%;
		top: -21%;
		z-index: 100;
		width: 35px;
	}




	.fadeUp{
		animation-name:fadeUpAnime;
		animation-duration:0.5s;
		animation-fill-mode:forwards;
		opacity:0;
		}
		
		@keyframes fadeUpAnime{
		  from {
			opacity: 0;
		  transform: translateY(100px);
		  }
		
		  to {
			opacity: 1;
		  transform: translateY(0);
		  }
		}




		.header-yeloow{
			width: 100%;
			background-color: #e6c84899;;
			position: fixed;
			height: 50px;
			z-index: 1000;
		}