@charset "UTF-8";

/* 基本設定 */
body {
	text-align: left;
	letter-spacing: -0.01em;
	overflow-x: hidden;
	font-family: 'メイリオ', 'ヒラギノ角ゴ ProN', '游ゴシック', 'MS Pゴシック', sans-serif;
	background-image: url(images/bg.jpg);
	background-repeat: repeat;
}

/* テキストの自動拡大を無効化 */
body {
	-webkit-text-size-adjust: none;
	text-size-adjust: none; 
}

/*-- 基本設定 --*/
*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
a {
	text-decoration: none;
	color: #333333;
	vertical-align: bottom;
}
ol, ul, li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
figure, figcaption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}

/* -------------------------------------------------------------------
	■ ページ全体の基本設定 / 428px（iPhone 12/13 Pro Max）
---------------------------------------------------------------------- */
body {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows: 
		[head] 100px
		[title] auto
		[sub] auto
		[kiji] auto
		[foot] 100px;
	row-gap: 20px;
}

/*-- パーツの配置 --*/
body > * {
	grid-column: 2 / -2;
}


/* -------------------------------------------------------------------
	■ ヘッダー（ ロゴ ）
---------------------------------------------------------------------- */
header {
	grid-row: head;
	justify-self: center;
	align-self: center;
}


/* -------------------------------------------------------------------
	■ ヘッダー（ ナビ ）
---------------------------------------------------------------------- */
nav {
	grid-row: head;
	justify-self: center;
	align-self: end;
}
nav ul {
	display: grid;
	grid-auto-flow: column;
	column-gap: 20px;
}
nav a {
	color: #333333;
	font-size: 12px;
	font-weight: bold;
}
nav a:hover {
	color: #ef9504;
}


/* -------------------------------------------------------------------
	■ ヒーローイメージ
---------------------------------------------------------------------- */
figure.hero {
	grid-row: title / span 2;
	grid-column: 1 / -1;
}

figure.hero img {
	height: 547px;
	object-fit: cover;
	z-index: -1;
	position: relative; /* Edge用の設定 */
	margin-top: 0px;  /* 他の figure との調整 */
}


/* -------------------------------------------------------------------
	■ タイトル（ h1 / プロフィール ）
---------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Anton');

h1 {
	grid-row: title;
	justify-self: center;
	align-self: center;
	font-family: 'Anton', sans-serif;
	line-height: 1.2;
	font-size: 38px;
	color: #a75529;
	letter-spacing: 0.3rem;
	text-align: center;
}
h1, h1 > span {
	text-shadow:
		2px 0 0 #FFF,		/* 右 */
		2px 2px 0 #FFF,		/* 右下 */
		0 2px 0 #FFF,		/* 下 */
		-2px 2px 0 #FFF,	/* 左下 */
		-2px 0 0 #FFF,		/* 左 */
		-2px -2px 0 #FFF,	/* 左上 */
		0 -2px 0 #FFF,		/* 上 */
		2px -2px 0 #FFF;	/* 右上 */
}
h1 > span {
	display: block;
	font-size: 18px;
	letter-spacing: 0.3rem;
	text-align: left;
}


/* -------------------------------------------------------------------
	■ サブタイトル（ 悪ガキ ）
---------------------------------------------------------------------- */
p.subtitle {
	grid-row: sub;
	text-align: center;
		margin-top: 5%;      /* モバイル版 / 位置の調整 悪ガキの上部 */
		margin-bottom: -15%; /* モバイル版 / 位置の調整 悪ガキの下部 */
}

p.subtitle img {
	max-width: 250px;  /* 横幅の制御 */
	height: auto;
}


/* -------------------------------------------------------------------
	■ 本文（ article ）
---------------------------------------------------------------------- */
article {
	grid-row: kiji;
	grid-column: 2 / -2;
}
article {
	margin-top: -20px; /* row-gap: 20px; 削除 */
}

article h2 {
	margin-top: 30px;
	font-size: 20px;
	text-align: left;
}
article h3 {
	margin-top: 20px;
	font-size: 18px;
	line-height: 1;
}
article p {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.8;
	color: #333333;
	text-align: left;
}
p.top0 {
	margin-top: 0px;
}


/* -------------------------------------------------------------------
	■ 画像の装飾
----------------------------------------------------------------------- */
figure.nurutto {
	margin-top: 30px;
}
figure.nurutto img {
	width: 100%;
	height: 150px;
	object-fit: cover;
}
figcaption {
	text-align: center;
	font-size: 16px;
}

/*-- ☆彡 画像がクルクル（ kurukuru ）--*/
.kurukuru {
	transition: all 1s linear 0s;
}
.kurukuru:hover {
	transform: rotateX(360deg);
}

/*-- ☆彡 画像がヌルっと大きく ( nurutto ) --*/
.nurutto {
	overflow: hidden;
	width: 100%;
	height: auto;
}
.nurutto img {
	display: block;
	transition-duration: 0.3s;  /*変化に掛かる時間*/
}
.nurutto img:hover {
	transform: scale(1.1);      /*画像の拡大率*/
	transition-duration: 0.3s;  /*変化に掛かる時間*/
}

/* -- artwork / 一列 / ⇒回り込みは 568px から -- */
.artwork-left > figure,
.artwork-right > figure {
	max-width: 60%;
	margin-left: auto;;
	margin-right: auto;
}
.artwork-left > figure img,
.artwork-right > figure img {
	width: 100%;
	height: auto;
	object-fit: cover;
}


/* -------------------------------------------------------------------
	■ ページの先頭へ戻る ( modoru ) 
----------------------------------------------------------------------- */
p.modoru {
	grid-row: kiji;
	display: grid;
}
p.modoru {
	margin-top: 30px;
	text-align: right;
	padding-right: 15px;
}
p.modoru a {
	color: #000080;
	text-decoration: underline;
}


/* -------------------------------------------------------------------
	■ フッター ( プロフィール )
----------------------------------------------------------------------- */
footer {
	grid-row: foot;
	justify-self: center;
	align-self: center;
	font-size: 15px;
	font-family: 'Raleway', sans-serif;
	margin-bottom: 0;
}

/* フッターのバー */
body::after {
	content: "";
	background-color: #cccccc;
	grid-column: 1 / -1;
	grid-row: foot;
	z-index: -1;
}


/* *************** ▼ iPhone 12/13 *************** */
@media (max-width: 428px) {

article h3 {
	text-align: center;
}
} /* 注意 */


/* *************** ▼ iPhone 6/7/8 *************** */
@media (max-width: 375px) {

p.subtitle {
		margin-top: 5%;      /* モバイル版 / 位置の調整 悪ガキの上部 */
		margin-bottom: -15%; /* モバイル版 / 位置の調整 悪ガキの下部 */
}

p.subtitle img {
	max-width: 200px;  /* 横幅の制御 */
}


.artwork-left > figure,
.artwork-right > figure {
	max-width: 50%;
}
} /* 注意 */


/* *************** ▼ Galaxy S10/S10+ *************** */
@media (max-width: 360px) {

} /* 注意 */


/* *************** ▼ iPhone 5/5E *************** */
@media (max-width: 320px) {


h1 {
	font-size: 35px;
}
}/* 注意 */


/* *************** ▲ iPhone 5/5E *************** */
@media (min-width: 568px) {

h1 {
	font-size: 40px;
}

article h2 {
	font-size: 25px;
}

article h3 {
	margin-top: 22px;
	text-align: left;
}

article p {
	font-size: 16px;
}


/* -- ここから .artwork の回り込み -- */
.artwork-left > figure {
	float: left;
	margin-right: 30px;
	margin-left: 0;
}
.artwork-right > figure {
	float: right;
	margin-right: 0px;
	margin-left: 30px;
}

.artwork-left::after,
.artwork-right::after {
	content: "";
	display: block;
	clear: both;
}

.artwork-left > figure,
.artwork-right > figure {
	max-width: 35%; /* ココが基準 */
	margin-top: 0;
	margin-bottom: 0;
}

.artwork-left > figure img,
.artwork-right > figure img {
	width: 100%;
	height: auto;
}
} /* 注意 */


/* *************** ▲ Nexus 7 *************** */
@media (min-width: 600px) {

} /* 注意 */


/* *************** ▲ Galaxy Note 3 *************** */
@media (min-width: 640px) {

}/* 注意 */


/* *************** ▲ Pixel 2 *************** */
@media (min-width: 731px) {

p.subtitle {
		margin-top: 0%;      /* モバイル版 / 位置の調整 悪ガキの上部 */
		margin-bottom: -10%; /* モバイル版 / 位置の調整 悪ガキの下部 */
}
} /* 注意 */


/* *************** ▲ Galaxy s10/s10+ *************** */
@media (min-width: 760px) {

} /* 注意 */


/* *************** ▲ iPad Mini / プロフィール *************** */
@media (min-width: 768px) {

body {
	grid-template-columns: 0.3fr repeat(6,1fr) 0.3fr;
	column-gap: 5%;    /* PC版 のみ追加 */
	grid-template-rows: 
		[head] 100px
		[title sub] auto
		[kiji] auto
		[foot] 100px;
	row-gap: 20px;
}

/*-- パーツの配置 --*/
body > * {
	grid-column: 2 / -2;
}

/*-- PC版 / ヘッダー --*/
header {
	justify-self: start;
	/* align-self: center; */
}

/*-- PC版 / ナビ --*/
nav {
	justify-self: end;
	align-self: center;
}

/*-- PC版 / ヒーロー --*/
figure.hero {
	grid-row: title;
	margin-top: -20px; /* gap の調整 */
}
figure.hero img {
	height: 547px;
}

/*-- PC版 / タイトル --*/
h1 {
	grid-column: 2 / span 3;
	justify-self: center;
	/* align-self: center; */
	font-size: 45px;
		max-width: 460px; /* 拡大防止 */
}
h1 > span {
	font-size: 20px;
}

/*-- PC版 / サブタイトル / 悪ガキ --*/
p.subtitle {
	grid-row: sub;
	grid-column: 5 / span 3;
	align-self: center;
		margin-top: 0%; /* モバイル版の調整解除 */
		margin-bottom: 0%; /* モバイル版の調整解除 */
}

p.subtitle img {
	width: 65%; /* 横幅の制御 */
		max-width: 460px; /* 拡大防止 */
}

/*-- PC版 / 本文 */
article {
	grid-column-start: 2 / span 6;
}
article h2 {
	font-size: 25px;
}
article h3 {
	font-size: 20px;
}
article p {
	margin-top: 15px;
	font-size: 18px;
	line-height: 1.8;
}

*-- PC版 / 画像 -- */
figure.nurutto {
	width: 100%;
	height: auto;
}
figure.nurutto img {
	width: 100%;
	height: 230px;
}

.artwork-left > figure,
.artwork-right > figure {
	max-width: 30%;
}
}/* 注意 */


/* *************** ▲ Nexus 10 *************** */
@media (min-width: 800px) {

}/* 注意 */


/* *************** ▲ Galaxy Note 9 *************** */
@media (min-width: 846px) {

h1 {
	font-size: 50px;
}
h1 > span {
	font-size: 23px;
}
}/* 注意 */


/* *************** ▲ Galaxy Note 20 Uitra *************** */
@media (min-width: 883px) {

} /* 注意 */


/* *************** ▲ Galaxy Note20 Android *************** */
@media (min-width: 915px) {

} /* 注意 */


/* *************** ▲ iPhone 12/13 Pro Max *************** */
@media (min-width: 926px) {

} /* 注意 */


/* *************** △ Nexus 7 *************** */
@media (min-width: 960px) {

body {
	grid-template-columns: 0.5fr repeat(6,1fr) 0.5fr;
	grid-template-rows:
		[head] 100px
		[title sub] auto
		[kiji] auto
		[foot] 100px;
}


/*-- タイトル --*/
h1 {
	font-size: 55px;
		max-width: 460px; /* 拡大防止 */
}
h1 > span {
	font-size: 23px;
}

/*-- サブタイトル / 悪ガキ --*/
p.subtitle img {
	width: 55%;           /* 横幅の制御 */
		max-width: 460px; /* 拡大防止 */
}

/*-- 本文 */
article h2 {
	font-size: 25px;
}
article h3 {
	font-size: 20px;
}
article p {
	font-size: 20px;
}
} /* 注意 */


/* ############### ▲ iPad Pro(12.9-inch) ############### */
@media (min-width: 1024px) {

article {
	width: 768px;
	margin-left: auto;
	margin-right: auto;
}
} /* 注意 */


/* ############### △ ipad Air iPadOS ############### */
@media (min-width: 1180px) {

header {
	margin-left: 100px;
}
nav {
	margin-right: 100px;
}
} /* 注意 */


/* ############### △ iPad Pro(12.9-inch) ############### */
@media (min-width: 1366px) {

h1 {
	font-size: 65px;
}

p.subtitle img {
	width: 40%;
}
} /* 注意 */