@charset "UTF-8";

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

/* 基本設定 */

* {
	margin: 0;
}

img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
a {
	text-decoration: none;
}
ul, li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}


/* -------------------------------------------------------------------
	■ display: grid;（ ケンチャマ日記 ）
---------------------------------------------------------------------- */
body {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows: 
		[head] 100px
		[hero] auto
		30px
		[greetings] auto
		50px
		[poyoyon] auto
		[section] auto
		30px
		[foot] 100px;
	font-family: sans-serif;
}

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


header {
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: head;
	justify-self: center;
	align-self: center;
}
.hero {
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: hero;
}
.greetings {
	grid-column-start: 2;
	grid-row-start: greetings;
}
.poyoyon {
	grid-column-start: 2;
	grid-row-start: poyoyon;
}
section {
	grid-column-start: 2;
	grid-row-start: section;
}
footer {
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: foot;
}


/* -------------------------------------------------------------------
	■ ヘッド（ ロゴ ）
---------------------------------------------------------------------- */
header img {
	width: 100%;
	height: 60px;
	object-fit: cover;
}


/* -------------------------------------------------------------------
	■ ヒーロー（ hero ）
---------------------------------------------------------------------- */
figure.hero img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}


/* -------------------------------------------------------------------
	■ ご挨拶（ greetings ）
---------------------------------------------------------------------- */
.greetings::after {
	content: "";
	display: block;
	clear: both;
}
.greetings figure {
	margin-top: 15px;
	float: left;
	max-width: 30%;
	margin-right: 15px;
}
.greetings p {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: #333333;
}


/* -------------------------------------------------------------------
	■ タイトル（ title ）
---------------------------------------------------------------------- */
h1 {
	margin-top: 30px;
	padding: 7px 0 5px 0;
	font-size: 28px;
	text-align: center;
	color: #ae3159;
	border-top: dotted 3px #ae3159;
	border-bottom: dotted 3px #ae3159;
}


/* -------------------------------------------------------------------
	■ ぽよよん（ poyoyon ）
---------------------------------------------------------------------- */
.poyoyon ul {
	margin-top: 0px;
}
.poyoyon ul {
	grid-row: poyoyon;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	grid-template-areas:
	"b b"
	"a c";
}
.box-a {
	grid-area: a;
}
.box-b {
	grid-area: b;
}
.box-c {
	grid-area: c;
}

.poyoyon li.box-a,
.poyoyon li.box-c {
	border: solid 1px #1c4fa1;
	border-radius: 5px;
}
.poyoyon li.box-b {
	max-width: 100%;
	margin-top: 5%;
}
.poyoyon li.box-a:hover,
.poyoyon li.box-c:hover {
	background-color: #eafff8;
}

.poyoyon a {
	display: block;
	font-size: 16px;
	font-weight: normal;
	text-align: center;
	line-height: 1;
	margin-bottom: 7px;
	color: #000099;
}
.poyoyon li.box-a img,
.poyoyon li.box-c img {
	max-width: 80%;
	margin: 5% 10% 5% 10%;
}

/* -- アニメ(鯉) / .carp --*/
.carp {
	background: url(images/koi.jpg);
	background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
    height: 200px;
}

.is-animated {
	animation: poyoyon 3s ease-in-out forwards;
	animation-iteration-count: 3; /* 動作繰り返し回数 */
}

@keyframes poyoyon {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}


/* -------------------------------------------------------------------
	■ 記事（ section ）
---------------------------------------------------------------------- */
section h2 {
	margin-top: 50px;
	font-size: 30px;
	border-bottom: solid 3px #FF0000;
	color: #333333;
	line-height: 1;
	padding-bottom: 5px; /* h2 と border-top の間 */
}
section h3 {
	margin-top: 20px;
	font-size: 25px;
	color: #0000FF;
}
section p {
	margin-top: 15px;
	font-size: 15px;
	line-height: 1.6;
	color: #333333;
}

/* 日付の設定 */
p.write {
	text-align: right;
}
time {
	font-size: 15px;
}

/* -------------------------------------------------------------------
	■ フッター ( ケンチャマ日記 )
----------------------------------------------------------------------- */
footer {
	font-size: 13px;
	justify-self: center;
	align-self: center;
	text-align: center;
}

.fbar {
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: foot;
	background-color: #dddddd;
	z-index: -1;
}


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

/* -- ご挨拶 -- */
.greetings {
	margin-top: -10px;
}

/* -- アニメ / 停止 -- */
.is-animated {
	animation: none;
	transform: none;
	transition: unset;
}
} /* 注意 */


/* *************** ▼ Galaxy S20+ Android *************** */
@media (max-width: 384px) {

/* -- 記事 -- */
section h2 {
	margin-top: 30px;
	font-size: 25px;
}
section h3 {
	font-size: 20px;
}
} /* 注意 */


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

/* -- 記事 -- */
section h2 {
	font-size: 22px;
}
section h3 {
	font-size: 18px;
}
} /* 注意 */


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

/* -- ヒーロー -- */
figure.hero img {
	width: 100%;
	height: 230px;
}

/*-- ご挨拶 --*/
.greetings p {
	font-size: 16px;
}

/* -- ぽよよん（ ここから横並び ）-- */
.poyoyon ul {
	margin-top: 30px;
}
.poyoyon ul {
	grid-row: poyoyon;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	grid-template-areas:
	"a b c";
}
.poyoyon li.box-b {
	max-width: 100%;
	margin-top: 0%;
}

/* -- アニメ(鯉) / .carp --*/
.carp {
    width: 100%;
    height: 180px;
}

.poyoyon a {
	font-size: 18px;
}

/* -- 記事 --*/
section p {
	font-size: 16px;
}
} /* 注意 */


/* *************** △ iPhone 6/7/8 Plus *************** */
@media (min-width: 736px) {

/*-- ご挨拶・画像 --*/
.greetings figure {
	margin-top: 15px;
	float: left;
	max-width: 26.5%;
	margin-right: 15px;
}

/* -- ぽよよん -- */
.poyoyon li.box-b {
	max-width: 100%;
	margin-top: 20%;
}
} /* 注意 */


/* *************** △ iPad Mini iPadOS *************** */
@media (min-width: 768px) {

/* -- grid / PC版ページの設定 -- */
body {
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows:
		[head] 100px
		[hero] auto
		50px
		[greetings] auto
		50px
		[poyoyon] auto
		50px
		[section] auto
		80px
		[foot] 100px;
}

/* -- ヒーロー -- */
figure.hero img {
	width: 100%;
	height: auto;
}

/*-- ご挨拶 --*/
.greetings figure {
	max-width: 25%;
}

/*-- ぽよよん（ poyoyon ）--*/
.poyoyon li.box-a img,
.poyoyon li.box-c img {
	max-width: 80%;
	margin: 5% 10% 5% 10%;
}

/* -- (鯉) --*/
.carp {
    width: 100%;
    height: 190px;
}

/* -- 記事 --*/
section h2 {
	font-size: 27px;
}
section h3 {
	font-size: 18px;
}
} /* 注意 */


/* *************** △ iPad Air *************** */
@media (min-width: 820px) {

/*-- ご挨拶 --*/
.greetings figure {
	max-width: 21%;
}

/* -- (鯉) --*/
.carp {
    width: 100%;
    height: 200px;
}
} /* 注意 */


/* *************** △  Galaxy neto20 Android *************** */
@media (min-width: 915px) {

/*-- ご挨拶 --*/
.greetings figure {
	max-width: 18.5%;
}

/* -- ぽよよん（ poyoyon ）--*/
.poyoyon li.box-a img,
.poyoyon li.box-c img {
	max-width: 80%;
	margin: 5% 10%;
}
.poyoyon a {
	font-size: 22px;
}

/* -- (鯉) --*/
.carp {
    width: 100%;
    height: 230px;
}

/*-- 記事 --*/
section h2 {
	margin-top: 30px;
	font-size: 30px;
}
} /* 注意 */


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

body {
	display: grid;
	grid-template-columns: 50px 1fr 50px;
}

/* -- ご挨拶 -- */
.greetings p {
	font-size: 18px;
}
.greetings figure {
	max-width: 21%;
}

h1 {
	padding: 7px 0 5px 0;
	font-size: 30px;
}

/* -- ぽよよん --*/
.poyoyon ul {
	padding-left: 50px;
	padding-right: 50px;
}
.poyoyon li.box-a img,
.poyoyon li.box-c img {
	max-width: 80%;
	margin: 5% 10%;
}
.poyoyon a {
	font-size: 22px;
}

/* -- (鯉) --*/
.carp {
    width: 100%;
    height: 200px;
}

/* -- 記事 --*/
section h3,
section p {
	padding-left: 50px;
	padding-right: 50px;
}

section h3 {
	font-size: 22px;
}
section p {
	font-size: 18px;
}
} /* 注意 */


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

body {
	display: grid;
	grid-template-columns: 80px 1fr 80px;
}
} /* 注意 */


/* ############### ▲ iPad Air ############### */
@media (min-width: 1180px) {

/* -- ヒーロー（ hero ）-- */
figure.hero img {
	width: 100%;
	height: 547px;
}

.greetings,
.poyoyon,
section {
	width: 964px;
	margin-left: auto;
	margin-right: auto;
}

/* -- ご挨拶 -- */
.greetings figure {
	max-width: 19%;
}

/* -- (鯉) --*/
.carp {
    width: 100%;
    height: 230px;
}

/* -- 記事 --*/
section h3,
section p {
	padding-left: 80px;
	padding-right: 80px;
}
} /* 注意 */