@charset "UTF-8";/* 文字コードを指定 */
/*
	文字コードを設定しておかないと、
	外部CSSが上手く読み込めない不具合が出る事もあるため、
	先頭に必ず書いておくようにしましょう。
*/
/*
	★スマホ対応に必要な設定事項　https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/css11/slide.html#/
		①headタグ内にviewportを追加する。（HTML）
		②画像を伸縮させる。（CSS）
		③コンテンツ幅を伸縮させる。（CSS）
		④ウィンドウの幅によってcssの設定を変える（CSS）
*/
/*
	★スマホ（リキッドレイアウト）対応『px を % に変換』
		【 設定したい幅 ÷ 基準となる幅 × 100 = CSSに設定する% 】
		https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/tool01/slide.html#/2

		・レスポンシブコーディング支援ツール（1つ目に設定したい幅、2つ目に基準となる幅を入力します。）
		https://www.webdesignrankings.com/resources/rqrwd/
*/
/*
	■CSSの書き方

		セレクタ {
			プロパティ: 値;
		}

		1、プロパティと値は「{」「}」波括弧で囲う
		2、プロパティと値はコロン「:」でつなぐ
		3、プロパティの終わりにはセミコロン「;」で区切る
		※見やすくなるように改行やインデントは設定するようにしましょう。
			・セレクタ：設定の適用先
			・プロパティ：見た目を変える設定項目

		※複数同時に書く事もできます。
			セレクタ {
				プロパティ: 値;
				プロパティ2: 値;
				プロパティ3: 値;
			}
*/

/*
   classにcssの設定を適応する場合は、
   class名の前に「 . 」を付けます
	   .class名 {
		   プロパティ名: 値;
	   }
*/

/*
	サイト全体で利用するベースのフォント設定は、
	一括で設定するため、表示エリアの一番外側にある bodyタグに設定する事が殆どです。
*/
body {
	font-family: 'MotoyaLMaru', "Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ＭＳ Ｐゴシック", sans-serif;
	font-size: 16px;
	line-height: 1.8;
	background-color: #012033;
}

/*
	■Webフォントの設定
		見出しのみ別のフォントに切り替えたい場合は、
		フォントを切り替える専用のclassを用意しておくと便利です。
			変更したいタグに対しこのclassを追加します。
			<h2 class="ct-ttl01 f-en">ABOUT</h2>
*/
.f-en {
	font-family: 'Oswald', sans-serif;
}

.title {
  /*親要素はrelativeに*/
  position: relative;
	max-width: 100%;
	height: auto;
	width: 100%;
}
#absolute {
  position: absolute;
  top: 25px;
  left: 20px;
	bottom: 1;
	width: 50%;
}
#absolutep {
  position: absolute;
  right:8%;
	top: 16%;
	width: 17%;
}
#absolutep img {
	width: 100%;
}

.box {
    padding-top: 30px;
		padding-right: 30px;
		padding-left: 30px;
		padding-bottom: 30px;
		margin-top: 15px;
		margin-bottom: 15px;
    font-weight: bold;
    color: #000000;/*文字色*/
    background: #add8e2;
    border-radius: 10px;/*角の丸み*/

}
.box p {
    margin: 0;
    padding: 0;
}

/*
	★スマホ対応に必要な設定事項　②画像を伸縮させる設定
		imgタグに「max-width: 100%;」と「height: auto;」の設定を追加すると
		幅に合わせて画像が伸縮するようになります。（画像は原寸大の幅以上は広がらない）

			★スマホ対応に必要な設定事項
				①headタグ内にviewportを追加する。（HTML）
				②画像を伸縮させる。（CSS）
				③コンテンツ幅を伸縮させる。（CSS）
				④ウィンドウの幅によってcssの設定を変える（CSS）
*/
img {
	/* 画像を伸縮させる設定 */
	max-width: 100%;
	height: auto;

	/* imgタグの揃え位置の初期設定を上端にしておく */
	vertical-align: top;
		/*
			「vertical-align: top;」はレイアウト崩れ対策なので、
			合わせて設定しておくのがオススメです。
				画像を並べた時などに意図せずデコボコな揃え方になったり、
				意図せず画像の下に空間ができたりするのを防ぐ事ができます。
		*/
		/*
			■縦方向の揃え位置を指定する「vertical-align」
				行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。
				インライン要素とテーブルセルにのみ設定できます。
				※ブロックレベル要素には設定できません。
				http://www.htmq.com/style/vertical-align.shtml
		*/
}

/*
	■width（幅）100%のみのclass（色々な箇所で流用できる汎用class）
		・直上の「②画像を伸縮させる設定」によって画像は原寸大の幅以上には広がらなくなっています。
		　メインビジュアルはウィンドウ幅に合わせて、常に幅いっぱいに広がり続けて欲しいので、width: 100%;の設定を追記しています。
		・メインビジュアル専用のclassを用意せず「w100」とした理由は、その他の場所でも流用できるようにするためです。
		　このような汎用classを適宜作っておくと、後ほど同じような設定が必要な要素が出てきた時に楽ができます。

			<img src="img/main-img.png" alt="メインビジュアル" class="w100">
			今後画像を表示領域いっぱいに表示させたい場合は、「class="w100"」を追加していくだけで実現できます。
*/
.w100 {
	width: 100%;
}

.logo {
	width: 100%;
}

.ct-ttl01 {
	/* 要素の外余白を設定する */
	margin-bottom: 50px;
		/*
			marginは要素の上下左右の外側の余白を設定できます。
			・要素の下の外側：margin-bottom: 100px;
			・要素の上の外側：margin-top: 100px;
			・要素の左の外側：margin-left: 100px;
			・要素の右の外側：margin-right: 100px;

			＋α　上下左右を一括で設定できるショートハンド
				・上下左右10pxの余白：margin: 10px;
				・上下10px 左右15pxの余白：margin: 10px 15px;
				・上10px 左右15px 下20pxの余白：margin: 10px 15px 20px;
				・上10px 右15px 下20x 左25pxの余白：margin: 10px 15px 20px 25px;
		*/

	/* 文字の大きさを変える */
	font-size: 60px;
		/*
			文字の大きさの単位には主に「px（絶対値）」「％（相対値）」「em（相対値）」「rem（相対値）」などがあります。
				・絶対値：外側の影響を受けない。
				・相対値：外側の影響を受け大きさが変わる。

					■「%」「em（相対値）」「rem」の違い
					「%」は親要素のfont-sizeを基準に大きさを計算します。
					「em」は「%」と同じように親要素のfont-sizeを基準に大きさを計算します。
					「rem」は文書のルート要素、つまりhtml要素のfont-sizeを基準に大きさを計算します。
						・参考リンク
						https://qiita.com/masarufuruya/items/bb40d7e39f56e6c25f0d
		*/

	/* 文字の行間を変える */
	line-height: 1;
		/*
			テキスト1行分の高さを表します。
			行の高さから文字の大きさを引いたものが行間です。
			単位なしで数値のみの指定は「文字サイズを基準に何倍」という相対的な指定になります。
				■計算方法
					line-height: 行送りの値 / 文字サイズ

					例） 行送りの値が28.8px、文字サイズが16px
						28.8/16 → 1.8

					※atomの場合、計算式「28.8/16」を書き「⌘ + shft + y」を実行すると
					自動的に計算してくれます。

				■計算例
					font-sizeが30pxの部分にline-heightを2と指定すると、
					30pxの2倍で60pxが行の高さになり、文字の大きさ30pxを除く
					余った30pxが上下に15pxずつ余白として割り当てられます。

					・参考リンク
					https://udemy.benesse.co.jp/development/line-height.html
		*/

	/* 横の文字間隔を変える */
	letter-spacing: 0.05em;
		/*
			「数値＋単位」で設定します。

			■計算方法
				トラッキング数値 ÷ 1000（em）

				例） トラッキング数値が50%の場合
					50 / 1000 → 0.05em

				※atomの場合、計算式「50/1000」を書き「⌘ + shft + y」を実行すると
				自動的に計算してくれます。
		*/
	/* テキストの揃え方を設定 */
	text-align: center;
		/*
			設定できる値
				・left（左寄せ）
				・right（右寄せ）
				・center（中央揃え）
				・justify（均等割付）
					■表示参考
					http://www.htmq.com/style/text-align.shtml
		*/
}

.about-catch {
	margin-top: 0px;
	/* 要素の外余白を設定する */
	margin-bottom: 20px;
	/* 文字の大きさを変える */
	font-size: 28px;
	/* 文字の行間を変える */
	line-height: 1.5;
	/* テキストの揃え方を設定 */
	text-align: center;
}
.about-text {
	/* テキストの揃え方を設定 */
	text-align: center;
}
.about-area {
	/* 要素の内余白を設定する */
	padding-top:60px;
	margin-top: 0px;
	padding-bottom: 50px;
	background-color: #ffffff;


		/*
			paddingは要素の上下左右の外側の余白を設定できます。
			・要素の下の内側：padding-bottom: 100px;
			・要素の上の内側：padding-top: 100px;
			・要素の左の内側：padding-left: 100px;
			・要素の右の内側：padding-right: 100px;

			＋α　上下左右を一括で設定できるショートハンド
				・上下左右10pxの余白：padding: 10px;
				・上下10px 左右15pxの余白：padding: 10px 15px;
				・上10px 左右15px 下20pxの余白：padding: 10px 15px 20px;
				・上10px 右15px 下20x 左25pxの余白：padding: 10px 15px 20px 25px;
		*/
}

.product-area {
	padding-top: 0px;
	margin-top　: 1px;
	padding-bottom: 50px;
	background-color: #fffce7;

	/*
		■productエリアに背景色が入っている場合の追記styleの例
			margin-top: 110px;
			padding-bottom: 50px;
			background-color: #ccc;

			背景色が入るため、内側の余白で背景色の表示エリアの範囲を調整し、
			エリアの境目の余白はmargin（外余白）で空けてあげる必要があります。
	*/
}

.phpto1 {
	padding-top: 0px;
	margin-top　: 1px;
	padding-bottom: 50px;
	background-color: #fffce7;
}
/*
	2カラムレイアウト
*/
/*
	★★★要素を横に並べる「Flexbox」
		https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/css12/slide.html#/
		参考リンク
			基礎
			・フレキシブルボックスレイアウトでよこ並び　https://lopan.jp/flexible-layout/
			オプションなど
			・日本語対応！CSS Flexboxのチートシートを作ったので配布します 　https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
			CSS Flexbox | エンジニアのためのWebチートシート　https://web-cheatsheet.com/css-flexbox

			※その他にもリンク集（CSSタブの一番下）に「Flexbox（要素を並べるプロパティ）」として沢山まとめてあります。
			https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/

*/
.col2-box {
	/* 要素を横に並べる「Flexbox」の初期設定 */
	display: flex;

	/* 「display: flex;」の余白を出すオプション */
	justify-content: space-between;
		/*
			space-betweenは、最初と最後の子要素を両端に配置し、
			残りの要素は均等に間隔をあけて配置します。
				バリエーション　https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/css12/slide.html#/7
					・flex-start（初期値）： 行の開始位置から配置。左揃え。
				    ・flex-end： 行末から配置。右揃え。
				    ・center： 中央揃え。
				    ・space-between： 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置。
				    ・space-around： 両端の子要素も含め、均等に間隔をあけて配置。
		*/

	/* 「display: flex;」の縦の揃え位置を変更するオプション */
	align-items: center;
		/*
			バリエーション
				・stretch（初期値）： 上下の余白を埋めるように配置
				・flex-start： 上揃えで配置。
				・flex-end： 下揃えで配置。
				・center： 上下中央揃えで配置。
				・baseline： アイテムをベースラインに合わせて配置
		*/

	/* 要素の外余白を設定する */
	margin-bottom: 60px;
}
.img-right {
	/* 「display: flex;」の並び順を逆にするオプション */
	flex-direction: row-reverse;
		/*
			※このCSSは「display: flex;」のオプションしか書いていませんが、
			　HTML側では<div class="col2-box img-right"></div>のように、
			　class「col2-box」と一緒に設定をしています。
			　このようにclassを組み合わせると、「.col2-box」のCSSの設定と「.img-right」の2つのCSSの設定を適応する事ができます。
				・<div class="col2-box img-right"></div>のCSS設定
					display: flex;
					justify-content: space-between;
					margin-bottom: 60px;

					flex-direction: row-reverse;　← .img-rightのCSS設定が追加される！

			※flex-direction: row-reverse;は並び順を逆にする設定なので、
			　全てのcol2-boxに設定するのではなく、追加のオプションとしておく事によってCSSの管理が楽になります。
		*/
}
.img-box {
	/* 要素の幅を設定する */
	width: 54%; /* 変換式→ 540px / 1000px × 100 = 54% */
		/*
			★スマホ（リキッドレイアウト）対応『px を % に変換』
				【 設定したい幅 ÷ 基準となる幅 × 100 = CSSに設定する% 】
				https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/tool01/slide.html#/2

				・レスポンシブコーディング支援ツール（1つ目に設定したい幅、2つ目に基準となる幅を入力します。）
				https://www.webdesignrankings.com/resources/rqrwd/
		*/
}
.text-box {
	/* 要素の幅を設定する */
	width: 40%; /* 変換式→ 400px / 1000px × 100 = 40% */
		/*
			★スマホ（リキッドレイアウト）対応『px を % に変換』
				【 設定したい幅 ÷ 基準となる幅 × 100 = CSSに設定する% 】
				https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/tool01/slide.html#/2

				・レスポンシブコーディング支援ツール（1つ目に設定したい幅、2つ目に基準となる幅を入力します。）
				https://www.webdesignrankings.com/resources/rqrwd/
		*/
}



/*
	★★★コンテンツの最大幅を設定する
		https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/css10/slide.html#/
		・max-widthでコンテンツの最大幅を設定
		・margin-left: auto;、margin-right: auto; とする事でコンテンツを常に中央に配置
*/
.ct-inner {
	/* 要素の最大幅を設定する */
	max-width: 1000px;
		/*
			ブラウザの幅が設定値以下の時は、その幅に合わせて縮むようになります。
		*/

	/* 幅の決まった要素にmargin左右「auto」を指定する */
	margin-left: auto;
	margin-right: auto;
		/*
			「width」や「max-width」等で幅の決まった要素に対して、
			margin左右（margin-left、margin-right）の値を「auto」にすると、
			「要素を中央に配置」する事ができます。
		*/



	/*
		★★ウィンドウ幅が最大幅よりも小さい時に左右に余白を出すオプション
	*/
	padding-left: 40px;
	padding-right: 40px;
		/*
			コンテンツの最大幅が設定された要素に
			左右の内余白（padding-left、padding-right）を設定すると
			ウィンドウ幅が最大幅よりも小さくなった時に、
			左右に余白を設ける事ができるようになります。
		*/
}



/*
	3カラムレイアウト
*/
.col3-list {
	/* 要素を横に並べる「Flexbox」の初期設定 */
	display: flex;

	/* 「display: flex;」の要素を折り返すオプション */
	flex-wrap: wrap;
		/*
			・flex-boxの折返し設定は何も設定しないと、
			　flex-wrap: nowrap;（初期値：子要素を折り返しせず、一行に並べる）になっています。

			・親要素に要素の折り返しの設定（flex-wrap: wrap;）を設定すると、
			　子要素を折り返し、複数行にわたるレイアウト配置に変更する事ができます。
		*/
}

/*
	■子孫セレクタ (E F)
		特定の要素の中にのみ存在する要素にstyleを設定したい場合は子孫セレクタが便利です。
		親要素と子要素(孫要素)を半角スペースで区切って記述します。
			親要素 子孫要素 {
			  プロパティ: 値;
			}
			https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/css13/slide.html#/
			http://www.webword.jp/cssguide/basic/index4.html
*/
.col3-list li {
	width: 23.5%; /* 変換式→ 300px / 1000px × 100 = 30% */
		/*
			★スマホ（リキッドレイアウト）対応『px を % に変換』
				【 設定したい幅 ÷ 基準となる幅 × 100 = CSSに設定する% 】
				https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/tool01/slide.html#/2

				・レスポンシブコーディング支援ツール（1つ目に設定したい幅、2つ目に基準となる幅を入力します。）
				https://www.webdesignrankings.com/resources/rqrwd/
		*/
	margin-right: 2%; /* 変換式→ 50px / 1000px × 100 = 5% */
		/*
			★スマホ（リキッドレイアウト）対応『px を % に変換』
				【 設定したい幅 ÷ 基準となる幅 × 100 = CSSに設定する% 】
				https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/tool01/slide.html#/2

				・レスポンシブコーディング支援ツール（1つ目に設定したい幅、2つ目に基準となる幅を入力します。）
				https://www.webdesignrankings.com/resources/rqrwd/
		*/
	margin-bottom: 25px;
}

/*
	■:nth-child()疑似クラス (E:nth-child(n))
		子要素を最初から数えて、n番目にあたる要素にスタイルを適用します。
		https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/css14/slide.html#/
		http://zero.css-happylife.com/selectors/nth-child.shtml

		3nは3の倍数の時のliタグにのみcss設定を当てるという意味です。
		3、6、9、12...番目のリスト（右端になるリスト）の右の外余白を0にし、
		段落ち（カラム落ち）を防ぎます。
*/
.col3-list li:nth-child(4n) {
	/* 3の倍数の時のliタグのみ外余白を再設定 */
	margin-right: 0;
}



/*
	フッターの設定
*/
.copyright {
	/* 文字の大きさを変える */
	font-size: 14px;
	/* 文字の行間を変える */
	line-height: 1.5;
	/* テキストの揃え方を設定 */
	text-align: center;
	color: #ffffff;
}
.global-footer {
	/* 要素の上下の内余白を設定する */
	padding-top: 30px;
	padding-bottom: 30px;
	/* 要素の背景色を設定 */
	background-color: #012033;
}



/*
	ヘッダーの設定
*/
.header-inner {
	/* 要素を横に並べる「Flexbox」の初期設定 */
	display: flex;
	/* 「display: flex;」の余白を出すオプション（最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置） */
	justify-content: space-between;
	/* 「display: flex;」の縦の揃え位置を変更するオプション（上下中央揃えで配置） */
	align-items: center;
}


/*
	ヘッダー内右側にあるリンクリストの設定
*/
.global-nav-list {
	/* 要素を横に並べる「Flexbox」の初期設定 */
	display: flex;
}
.global-nav-list li {
	/* 要素の外余白を設定する */
	margin-left: 50px;
}
.global-nav-list a {
	/* 文字の大きさを変える */
	font-size: 30px;
	/* 文字の行間を変える */
	line-height: 1.5;
	/* テキストの色を設定 */
	color: #ffffff;
	/* 文字の下線・打ち消し線を指定 */
	text-decoration: none;
		/*
			主なバリエーション　http://www.htmq.com/css/text-decoration.shtml
				・none：装飾なし
				・underline：下線
				・line-through：打ち消し線
				などです。
		 */
}
.global-header {
	/* 要素の上下の内余白を設定する */
	padding-top: 15px;
	padding-bottom: 15px;
	/* 要素の背景色を設定 */
	background-color: #012033;
}

.top-global-header .header-inner{
	justify-content: flex-end;
	padding-top: 15px;
	padding-bottom: 15px;
}



/*
	▼コピペ用ファイルから引用①　ここから
		ハンバーガーメニュー・スマホ版のグローバルナビを作る
		https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/js01/slide.html#/
*/
	/* ハンバーガーメニュー */
	.menu-btn {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 9;
		width: 60px;
		height: 50px;
		cursor: pointer;
		background: none;
		border: none;
		border-radius: 0;
		-webkit-appearance: none;
	}
	.menu-btn .bar-box {
		display: block;
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 16px;
		width: 30px;
		margin: 0 auto;
		transform: translateY(-50%);
	}
	.menu-btn .bar {
		display: block;
		position: absolute;
		right: 0;
		left: 0;
		height: 2px;
		transition: all 0.4s;
	}
	.menu-btn .bar01 {
		top: 0;
	}
	.menu-btn .bar02 {
		top: 7px;
	}
	.menu-btn .bar03 {
		top: 14px;
	}
	.menu-btn.on .bar01 {
		top: 7px;
		transform: rotate(-45deg);
	}
	.menu-btn.on .bar02 {
		opacity: 0;
	}
	.menu-btn.on .bar03 {
		top: 7px;
		transform: rotate(45deg);
	}
	/* ハンバーガーメニューの色変更オプション */
	.menu-btn {
		background-color: #ccc;
	}
	.menu-btn .bar {
		background-color: #000;
	}
/*
	▲コピペ用ファイルから引用①　ここまで
*/


.modaal-container {
	background-color: #ffffff;
}

img.kaigyo{
	float:left;
	width: 50%
}

.profile{
	display: block;
    margin-left: auto;
    margin-right: auto
}
.skill{
	width: 88%;
	display: block;
    margin-left: auto;
    margin-right: auto
}
.picture{
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto
}
.gt{
	font-size: 28px
}
.gt2{
	font-size: 18px
}

.pt{
	font-size: 28px
	margin-bottom: 15px;
}
.video {
	position: relative;
	width: 100%;
	/* 16:9表示（※比率が4:3の場合は 75%に変更する） */
	padding-top: 10%;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.profilebox {
	display: flex;
	justify-content:  space-between;
	padding-left: 5%;
}
.profilebox-text {
  width: 65%;
}
.profilebox-img {
  width: 35%;
}

/*
	★★★スマホ対応に必要な設定事項　④ウィンドウの幅によってcssの設定を変える。（メディアクエリ）
	https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/css11/slide.html#/15

	・ウィンドウの幅によってcssの設定を変えるにはメディアクエリを利用します。
		・ウィンドウ幅によってCSSの設定を変更できるようになります。
		・切り替わる幅を「ブレイクポイント」と言います。
		　今回の設定はウィンドウ幅が767px以下の時（iPad未満の幅の時）のみCSSの設定が有効になります。

		・レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ
		https://www.seojuku.com/blog/responsive-mediaquery.html

*/
@media screen and (max-width: 767px) {
	/*
		▼コピペ用ファイルから引用②　ここから
			ハンバーガーメニュー・スマホ版のグローバルナビを作る
			https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/js01/slide.html#/
	*/
		/* ハンバーガーメニューをスマホ時のみ表示 */

		#absolute {
		  position: absolute;
		  top: 10%;
		  left: 10%;
			bottom: 1;
			width: 80%;
		}
		.menu-btn {
			display: block;
		}

		/* スマホ版グローバルメニュー */
		.global-nav {
			display: none;
			position: absolute;
			top: 50px;
			left: 0;
			right: 0;
			z-index: 999;
			padding: 40px 20px;
			text-align: center;
		}
		.global-nav-list {
			display: block;
			font-size: 18px;
		}
		.global-nav-list li {
			margin-left: 0;
		}
		.global-nav-list li + li {
			margin-top: 21px;
		}
		/* スマホ版グローバルメニューの色変更オプション */
		.global-nav {
			background-color: #012033;
		}
	/*
		▲コピペ用ファイルから引用②　ここまで
	*/




		/*
			■@media screen and (max-width: 767px) {} の中に書いたCSSについて
				ブラウザの幅が767px以下になると
				この中に書いた設定が有効になります。

				※767px以下はiPad基準の設定です。
				　iPadは768pxなので iPadまではPCの表示、iPad未満の端末はスマートフォン用の表示となります。

				※授業では767pxとしていますが、絶対にこれが良いという設定値はありません。
				　デバイスの幅が多様化してきているので、様々な基準値が存在します。
					・【2019最新】スマホ・タブレットの解像度一覧表（画面サイズの割合）
					　https://webdesign-abc.com/tech/resolution-list/
					・レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版]
					　https://hashimotosan.hatenablog.jp/entry/2019/05/28/164834
					・【CSS】レスポンシブデザインのブレイクポイントなんて適当でいいんじゃね？って話
					　https://kuzlog.com/2018/01/18/2377/
						どのようなデバイスでも良い感じに見えれば良いという考え方で捉えると、
						メディアクエリの値はサイト毎に適宜変えていく方が適切なのかもしれません。

				※CSSは下にあるもの程優先度が上がるので、メディアクエリ内の記述で設定を上書きしていくイメージです。
				　font-weightなど、PCとスマートフォン（SP）で同じ設定を入れる場合は、2回書く必要はないので削除しましょう。
				　上書きする必要がある記述のみ追加していくようにしましょう。
		*/

		/*
			■スマートフォン（SP）の表示でよく行われる処理
				・フォントサイズの見直し
					見出しなど少し小さくなる事が多いです。

					※SPにおける最小フォントサイズは10pxと覚えておきましょう。
					　Andoroidのメインの閲覧ブラウザ（chrome）等の最小フォントサイズの初期設定が10pxだからです。
					　それを抜きとしても、10px以下の場合は可読性も下がるのであまり適切とは言えないでしょう。

				・余白感の修正
					PCのままだと広すぎる箇所が多いので値を見直します。

				・2カラムのままだと狭すぎるような箇所は1カラムに変更
					SPのモニターは縦長なので、4列→2列、2列→1列などの調整が必要となる場合が多いです。
		*/


	/* サイト全体の本文サイズ設定をSP用に上書き調整 */
	body {
		font-size: 14px;
	}

	/* ct-innerの左右の余白をSP用に上書き調整 */
	.ct-inner {
		/*
			%に直す式 = 変換したい値 ÷ 基準の幅 × 100

			★計算のショートカットコマンドで算出が可能です。
				20/375*100【計算式を書いて ⌘ + shift + y】
		*/
		padding-left: 5.333333333333334%;
		padding-right: 5.333333333333334%;
			/*
				★スマホ（リキッドレイアウト）対応『px を % に変換』
					【 設定したい幅 ÷ 基準となる幅 × 100 = CSSに設定する% 】
					https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/tool01/slide.html#/2

					・レスポンシブコーディング支援ツール（1つ目に設定したい幅、2つ目に基準となる幅を入力します。）
					https://www.webdesignrankings.com/resources/rqrwd/
			*/
	}


	/* ct-ttl01の文字サイズと余白をSP用に上書き調整 */
	.ct-ttl01 {
		box
		margin-bottom: 25px;
		font-size: 40px;
	}

	/* aboutエリアの文字設定や余白をSP用に上書き調整 */
	.about-catch {
		margin-bottom: 15px;
		font-size: 20px;
	}
	.about-text {
		text-align: left;
	}
	.about-area {
		padding-top: 60px;
	}

	/* productエリアの余白をSP用に上書き調整 */
	.product-area {
		padding-top: 60px;
		/*
			■productエリアに背景色が入っている場合の追記styleの例
				margin-top: 60px;
				padding-bottom: 50px;

				背景色が入るため、内側の余白で背景色の表示エリアの範囲を調整し、
				エリアの境目の余白はmargin（外余白）で空けてあげる必要があります。
		*/
	}


	/*
		2カラムレイアウトの解除・余白調整
	*/
	.col2-box {
		display: block;
			/*
				display: flex;は、display: block;とする事で無効化する事ができます。
			*/
		margin-bottom: 45px;
	}
	/* width:auto;で画像とテキストエリアの幅設定をリセット  */
	.img-box {
		width: auto;
		margin-bottom: 10px;
	}
	.text-box {
		width: auto;
	}


	/*
		3カラムレイアウトを2カラムレイアウトに変更
			余白や幅の設定等を2カラム用に書き換えていきます。
			基本の設定はPCの3カラムレイアウトと同じです。
	*/
	.col3-list li {
		/* 160/335*100 (%) */
		width: 47.76119402985074%;
		/* 15/335*100 (%) */
		margin-right: 4.477611940298507%;
		margin-bottom: 4.477611940298507%;
			/*
				★スマホ（リキッドレイアウト）対応『px を % に変換』
					【 設定したい幅 ÷ 基準となる幅 × 100 = CSSに設定する% 】
					https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/tool01/slide.html#/2

					・レスポンシブコーディング支援ツール（1つ目に設定したい幅、2つ目に基準となる幅を入力します。）
					https://www.webdesignrankings.com/resources/rqrwd/

				★計算のショートカットコマンドで算出が可能です。
					15/335*100【計算式を書いて ⌘ + shift + y】
			*/
	}
	/* 3の倍数の時のliタグにのみ当たっているcss設定を上書き */
	.col3-list li:nth-child(3n) {
		margin-right: 4.477611940298507%;
	}
	/* 2の倍数の時のliタグにのみcss設定を追加（右余白を無効化） */
	.col3-list li:nth-child(2n) {
		margin-right: 0;
	}
		/*
			■:nth-child()疑似クラス (E:nth-child(n))
				子要素を最初から数えて、n番目にあたる要素にスタイルを適用します。
				https://vd.cdc.ac.jp/teacher/web_design_1v3/2019/slide/css14/slide.html#/
				http://zero.css-happylife.com/selectors/nth-child.shtml

				3nは3の倍数の時のliタグにのみcss設定を当てるという意味です。
				3、6、9、12...番目のリスト（右端になるリスト）の右の外余白を0にし、
				段落ち（カラム落ち）を防ぎます。
		*/
	.gallery-area {
		padding-top: 0x;
		padding-bottom: 45px;
	}


	/*
		フッターの設定をSP用に上書き調整
	*/
	.copyright {
		font-size: 12px;
	}
	.global-footer {
		padding-top: 15px;
		padding-bottom: 15px;
	}

	/* ヘッダーの設定をSP用に上書き調整 */
	.global-header {
		padding-top: 7px;
		padding-bottom: 7px;
	}
	.header-logo {
		/* ロゴのサイズをスマホ用に縮小 */
		width: 108px;
	}
		/*
			通常ヘッダーはウィンドウ幅によって大きさが変わらないようにするため、
			ロゴサイズは%に直さず固定値とする事が殆どです。

			ヘッダーは画面上に追従する事も多くあるため、
			大きくなりすぎるとコンテンツの表示領域が減ってしまい、
			ユーザーに不快感（サイトが見にくい）を与えてしまう可能性などがあるためです。
		*/
		#absolutep {
			display:none;
		}
		.video {
			position: relative;
			width: 100%;
			/* 16:9表示（※比率が4:3の場合は 75%に変更する） */
			padding-top: 10%;
		}
		.video iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: block;
				margin-left: auto;
				margin-right: auto
		}
		.skill{
			width: 80%;
			height: 80%;
			display: block;
		    margin-left: auto;
		    margin-right: auto
	}
	.logo {
		width: 1000px;
	}
	.profilebox {
		display: block;
		justify-content:  space-between;
	}
	.profilebox-text {
	  width: auto;
	}
	.box .profilebox-img {
	  width: 60%;
		margin-left: auto;
		margin-right: auto;
	}
	.gt{
		font-size: 15px
	}
	.gt2{
		font-size: 7px
	}
}