協会日記

CSSで描く古墳

はじめに

ネタです(断言)。

今後、どこかで使うことがあるかもしれません・・・。
「ああっ、CSSで古墳を描きたい!!!」という時が来るかもしれません・・・。
そんな時、このページを思い出してください。
きっとあなたのお役に立つことでしょう。

※ここで公開されてれいるcss(Sass)は、ご自由にお使いください。改変も自由です。使用申請も連絡も不要です。

※一部のウェブブラウザでは表示が崩れるかもしれません。(未調査です)

目次

もうちょっと解説

ウェブサイト制作時、ページを装飾するために使う「CSS」。
文字の色を変えたり、余白を調整したり、簡単な図形を描いたり・・・、まぁいろいろできます。

今日の朝起きてワタクシ思いました。
「あれっ、もしかしてこれで古墳を描けるのでは・・・?」
・・・今回の投稿のきっかけです。(謎の使命感)

とりあえず、古墳と円筒埴輪をいくつか作ってみましたが、まだまだ作れそうですね。
そのうちコソッと追加しときます。

以下、サンプルとソースコードです。
ページ下部にはSass(SCSS記法)のソースもありますよ。

CSSで描く古墳:サンプル

円墳


/*=========================================
円墳
=========================================*/
.enpun {
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

楕円形墳


/*=========================================
楕円形墳
=========================================*/
.daenkeifun {
  display: block;
  box-sizing: border-box;
  width: 130px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

方墳


/*=========================================
方墳
=========================================*/
.hofun {
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: #43c062;
}

長方形墳


/*=========================================
長方形墳
=========================================*/
.chohokeifun {
  display: block;
  box-sizing: border-box;
  width: 130px;
  height: 70px;
  background-color: #43c062;
}

前方後円墳-前期


/*=========================================
前方後円墳-前期
=========================================*/
.zenpokoenfun-zenki {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-zenki::before {
  position: absolute;
  top: 40px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 35px 125px 35px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

前方後円墳-中期


/*=========================================
前方後円墳-中期
=========================================*/
.zenpokoenfun-chuki {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-chuki::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

前方後円墳-後期


/*=========================================
前方後円墳-後期
=========================================*/
.zenpokoenfun-kouki {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-kouki::before {
  position: absolute;
  top: 40px;
  left: -10px;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  content: "";
  border-width: 0 60px 125px 60px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

前方後円墳-撥形


/*=========================================
前方後円墳-撥形
=========================================*/
.zenpokoenfun-bachigata {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-bachigata::before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  box-sizing: border-box;
  width: 50px;
  height: 165px;
  content: "";
  background: radial-gradient(ellipse at top -140px right -25px, transparent, transparent 80px, #43c062 72px);
}

.zenpokoenfun-bachigata::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 50px;
  height: 165px;
  content: "";
  background: radial-gradient(ellipse at top -140px left -25px, transparent, transparent 80px, #43c062 72px);
}

前方後円墳-剣菱形


/*=========================================
前方後円墳-剣菱形
=========================================*/
.zenpokoenfun-kenbishi {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-kenbishi::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

.zenpokoenfun-kenbishi::after {
  position: absolute;
  top: calc(100% + 65px);
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 10px 50px 0 50px;
  border-style: solid;
  border-color: #43c062 transparent transparent transparent;
}

前方後円墳-柄鏡式


/*=========================================
前方後円墳-柄鏡式
=========================================*/
.zenpokoenfun-ekagami {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-ekagami::before {
  position: absolute;
  top: 90px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 40px;
  height: 75px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  background-color: #43c062;
}

前方後円墳-帆立貝式


/*=========================================
前方後円墳-帆立貝式
=========================================*/
.zenpokoenfun-hotategai {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-bottom: 25px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-hotategai::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 35px 125px 35px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

前方後円墳-造出し右


/*=========================================
前方後円墳-造出し右
=========================================*/
.zenpokoenfun-tsukuridashi-r {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-tsukuridashi-r::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

.zenpokoenfun-tsukuridashi-r::after {
  position: absolute;
  top: 89px;
  right: 0;
  left: 56px;
  display: block;
  box-sizing: border-box;
  width: 25px;
  height: 26px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  background-color: #43c062;
}

前方後円墳-造出し左


/*=========================================
前方後円墳-造出し左
=========================================*/
.zenpokoenfun-tsukuridashi-l {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-tsukuridashi-l::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

.zenpokoenfun-tsukuridashi-l::after {
  position: absolute;
  top: 89px;
  right: 56px;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 25px;
  height: 26px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  background-color: #43c062;
}

前方後円墳-造出し両方


/*=========================================
前方後円墳-造出し両方
=========================================*/
.zenpokoenfun-tsukuridashi {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-tsukuridashi::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

.zenpokoenfun-tsukuridashi::after {
  position: absolute;
  top: 89px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 84px;
  height: 26px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  background-color: #43c062;
}

前方後方墳


/*=========================================
前方後方墳
=========================================*/
.zenpokohofun {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: #43c062;
}

.zenpokohofun::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

双方中円墳1


/*=========================================
双方中円墳1
=========================================*/
.sohochuenfun-1 {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.sohochuenfun-1::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -30px;
  display: block;
  box-sizing: border-box;
  width: 160px;
  height: 50px;
  margin: auto;
  content: "";
  background-color: #43c062;
}

双方中円墳2


/*=========================================
双方中円墳2
=========================================*/
.sohochuenfun-2 {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.sohochuenfun-2::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -40px;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin: auto;
  content: "";
  border-width: 40px 0 40px 120px;
  border-style: solid;
  border-color: transparent transparent transparent #43c062;
}

.sohochuenfun-2::after {
  position: absolute;
  top: 0;
  right: -40px;
  bottom: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin: auto;
  content: "";
  border-width: 40px 120px 40px 0;
  border-style: solid;
  border-color: transparent #43c062 transparent transparent;
}

双方中方墳


/*=========================================
双方中方墳
=========================================*/
.sohochuhofun {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: #43c062;
}

.sohochuhofun::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -40px;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin: auto;
  content: "";
  border-width: 30px 0 30px 120px;
  border-style: solid;
  border-color: transparent transparent transparent #43c062;
}

.sohochuhofun::after {
  position: absolute;
  top: 0;
  right: -40px;
  bottom: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin: auto;
  content: "";
  border-width: 30px 120px 30px 0;
  border-style: solid;
  border-color: transparent #43c062 transparent transparent;
}

双円墳


/*=========================================
双円墳
=========================================*/
.soenfun {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.soenfun::before {
  position: absolute;
  top: 70px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-radius: 50%;
  background-color: #43c062;
}

六角形墳


/*=========================================
六角形墳
=========================================*/
.rokkakkeifun {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 58px;
  background-color: #43c062;
}

.rokkakkeifun::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  content: "";
  transform: rotate(60deg);
  background-color: #43c062;
}

.rokkakkeifun::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  content: "";
  transform: rotate(-60deg);
  background-color: #43c062;
}

八角形墳


/*=========================================
八角形墳
=========================================*/
.hakkakkeifun {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 42px;
  background-color: #43c062;
}

.hakkakkeifun::before {
  position: absolute;
  top: -29px;
  left: 0;
  display: block;
  box-sizing: content-box;
  width: 42px;
  height: 0;
  content: "";
  border-width: 0 29px 29px 29px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

.hakkakkeifun::after {
  position: absolute;
  bottom: -29px;
  left: 0;
  display: block;
  box-sizing: content-box;
  width: 42px;
  height: 0;
  content: "";
  border-width: 29px 29px 0 29px;
  border-style: solid;
  border-color: #43c062 transparent transparent transparent;
}

四隅突出型墳丘墓


/*=========================================
四隅突出型墳丘墓
=========================================*/
.yosumitosshutsu {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: #43c062;
}

.yosumitosshutsu::before {
  position: absolute;
  top: 35px;
  left: -35px;
  display: block;
  box-sizing: border-box;
  width: 170px;
  height: 30px;
  content: "";
  transform: rotate(45deg);
  border-radius: 42%;
  background-color: #43c062;
}

.yosumitosshutsu::after {
  position: absolute;
  top: 35px;
  left: -35px;
  display: block;
  box-sizing: border-box;
  width: 170px;
  height: 30px;
  content: "";
  transform: rotate(-45deg);
  border-radius: 42%;
  background-color: #43c062;
}

円筒埴輪


/*=========================================
円筒埴輪
=========================================*/
.entohaniwa {
  position: relative;
  box-sizing: border-box;
  width: 80px;
  height: 0;
  border-top: 140px solid #deb887;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.entohaniwa::before {
  position: absolute;
  bottom: calc(100% + 80px);
  left: -6px;
  box-sizing: border-box;
  width: 80px;
  height: 32px;
  content: "";
  border-top: 3px solid #c88937;
  border-bottom: 3px solid #c88937;
}

.entohaniwa::after {
  position: absolute;
  bottom: calc(100% + 20px);
  left: -4px;
  box-sizing: border-box;
  width: 76px;
  height: 32px;
  content: "";
  border-top: 3px solid #c88937;
  border-bottom: 3px solid #c88937;
}

円筒埴輪(透孔)


/*=========================================
円筒埴輪(透孔)
=========================================*/
.entohaniwa-sukashiana-1 {
  position: relative;
  box-sizing: border-box;
  width: 80px;
  height: 0;
  border-top: 140px solid #deb887;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.entohaniwa-sukashiana-1::before {
  position: absolute;
  bottom: calc(100% + 50px);
  left: -6px;
  box-sizing: border-box;
  width: 80px;
  height: 50px;
  content: "";
  border-top: 3px solid #c88937;
  border-bottom: 3px solid #c88937;
}

.entohaniwa-sukashiana-1::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + 65px);
  left: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-radius: 50%;
  background-color: #c88937;
}

円筒埴輪(透孔三角形)


/*=========================================
円筒埴輪(透孔三角形)
=========================================*/
.entohaniwa-sukashiana-2 {
  position: relative;
  box-sizing: border-box;
  width: 80px;
  height: 0;
  border-top: 140px solid #deb887;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.entohaniwa-sukashiana-2::before {
  position: absolute;
  bottom: calc(100% + 50px);
  left: -6px;
  box-sizing: border-box;
  width: 80px;
  height: 50px;
  content: "";
  border-top: 3px solid #c88937;
  border-bottom: 3px solid #c88937;
}

.entohaniwa-sukashiana-2::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + 70px);
  left: 0;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 20px 12px 0 12px;
  border-style: solid;
  border-color: #c88937 transparent transparent transparent;
}

朝顔形円筒埴輪


/*=========================================
朝顔形円筒埴輪
=========================================*/
.entohaniwa-asagao {
  position: relative;
  box-sizing: border-box;
  width: 80px;
  height: 0;
  border-top: 120px solid #deb887;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.entohaniwa-asagao::before {
  position: absolute;
  right: 0;
  bottom: calc(100% + (100px * 1.2));
  left: -6px;
  box-sizing: border-box;
  width: 80px;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-top: 35px solid #deb887;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #deb887;
  border-left: 20px solid transparent;
}

.entohaniwa-asagao::after {
  position: absolute;
  bottom: calc(100% + 50px);
  left: -6px;
  box-sizing: border-box;
  width: 80px;
  height: 50px;
  content: "";
  border-top: 3px solid #c88937;
  border-bottom: 3px solid #c88937;
}

Sass全部(SCSS記法)


/*=========================================
変数定義
=========================================*/
$basicSize: 100px; //基本サイズ この数値を変更することで全体のサイズが変わります
$kofun_green: #43c062; //古墳の色
$haniwa_brown: #deb887; //埴輪の色



/*=========================================
円墳
=========================================*/
.enpun {
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;
}

/*=========================================
楕円形墳
=========================================*/
.daenkeifun {
	display: block;
	box-sizing: border-box;
	width: ($basicSize * 1.3);
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;
}

/*=========================================
方墳
=========================================*/
.hofun {
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	background-color: $kofun_green;
}

/*=========================================
長方形墳
=========================================*/
.chohokeifun {
	display: block;
	box-sizing: border-box;
	width: ($basicSize * 1.3);
	height: ($basicSize * 0.7);
	background-color: $kofun_green;
}

/*=========================================
前方後円墳-前期
=========================================*/
.zenpokoenfun-zenki {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: ($basicSize * 0.4);
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-width: 0 ($basicSize * 0.35) ($basicSize * 1.25) ($basicSize * 0.35);
		border-style: solid;
		border-color: transparent transparent $kofun_green transparent;
	}
}

/*=========================================
前方後円墳-中期
=========================================*/
.zenpokoenfun-chuki {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: ($basicSize * 0.55);
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
		border-style: solid;
		border-color: transparent transparent $kofun_green transparent;
	}
}

/*=========================================
前方後円墳-後期
=========================================*/
.zenpokoenfun-kouki {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: ($basicSize * 0.4);
		left: ($basicSize * -0.1);
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		content: "";
		border-width: 0 ($basicSize * 0.6) ($basicSize * 1.25) ($basicSize * 0.6);
		border-style: solid;
		border-color: transparent transparent $kofun_green transparent;
	}
}

/*=========================================
前方後円墳-撥形
=========================================*/
.zenpokoenfun-bachigata {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		box-sizing: border-box;
		width: ($basicSize * 0.5);
		height: ($basicSize * 1.65);
		content: "";
		background: radial-gradient(ellipse at top ($basicSize * -1.4) right ($basicSize * -0.25), transparent, transparent ($basicSize * 0.8), $kofun_green ($basicSize * 0.72));
	}
	
	&::after {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: ($basicSize * 0.5);
		height: ($basicSize * 1.65);
		content: "";
		background: radial-gradient(ellipse at top ($basicSize * -1.4) left ($basicSize * -0.25), transparent, transparent ($basicSize * 0.8), $kofun_green ($basicSize * 0.72));
	}
}

/*=========================================
前方後円墳-剣菱形
=========================================*/
.zenpokoenfun-kenbishi {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: ($basicSize * 0.55);
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
		border-style: solid;
		border-color: transparent transparent $kofun_green transparent;
	}

	&::after {
		position: absolute;
		top: calc(100% + #{$basicSize * 0.65});
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-width: ($basicSize * 0.1) ($basicSize * 0.50) 0 ($basicSize * 0.50);
		border-style: solid;
		border-color: $kofun_green transparent transparent transparent;
	}
}

/*=========================================
前方後円墳-柄鏡式
=========================================*/
.zenpokoenfun-ekagami {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: ($basicSize * 0.9);
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: ($basicSize * 0.4);
		height: ($basicSize * 0.75);
		margin-right: auto;
		margin-left: auto;
		content: "";
		background-color: $kofun_green;
	}
}

/*=========================================
前方後円墳-帆立貝式
=========================================*/
.zenpokoenfun-hotategai {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	margin-bottom: ($basicSize * 0.25);
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-width: 0 ($basicSize * 0.35) ($basicSize * 1.25) ($basicSize * 0.35);
		border-style: solid;
		border-color: transparent transparent $kofun_green transparent;
	}
}

/*=========================================
前方後円墳-造出し右
=========================================*/
.zenpokoenfun-tsukuridashi-r {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: ($basicSize * 0.55);
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
		border-style: solid;
		border-color: transparent transparent $kofun_green transparent;
	}
	
	&::after {
		position: absolute;
		top: ($basicSize * 0.89);
		right: 0;
		left: ($basicSize * 0.56);
		display: block;
		box-sizing: border-box;
		width: ($basicSize * 0.25);
		height: ($basicSize * 0.26);
		margin-right: auto;
		margin-left: auto;
		content: "";
		background-color: $kofun_green;
	}
}

/*=========================================
前方後円墳-造出し左
=========================================*/
.zenpokoenfun-tsukuridashi-l {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: ($basicSize * 0.55);
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
		border-style: solid;
		border-color: transparent transparent $kofun_green transparent;
	}
	
	&::after {
		position: absolute;
		top: ($basicSize * 0.89);
		right: ($basicSize * 0.56);
		left: 0;
		display: block;
		box-sizing: border-box;
		width: ($basicSize * 0.25);
		height: ($basicSize * 0.26);
		margin-right: auto;
		margin-left: auto;
		content: "";
		background-color: $kofun_green;
	}
}

/*=========================================
前方後円墳-造出し両方
=========================================*/
.zenpokoenfun-tsukuridashi {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: ($basicSize * 0.55);
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
		border-style: solid;
		border-color: transparent transparent $kofun_green transparent;
	}
	
	&::after {
		position: absolute;
		top: ($basicSize * 0.89);
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: ($basicSize * 0.84);
		height: ($basicSize * 0.26);
		margin-right: auto;
		margin-left: auto;
		content: "";
		background-color: $kofun_green;
	}
}

/*=========================================
前方後方墳
=========================================*/
.zenpokohofun {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: ($basicSize * 0.55);
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-width: 0 ($basicSize * 0.5) ($basicSize * 1.1) ($basicSize * 0.5);
		border-style: solid;
		border-color: transparent transparent $kofun_green transparent;
	}
}

/*=========================================
双方中円墳1
=========================================*/
.sohochuenfun-1 {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: ($basicSize * -0.3);
		display: block;
		box-sizing: border-box;
		width: ($basicSize * 1.6);
		height: ($basicSize * 0.5);
		margin: auto;
		content: "";
		background-color: $kofun_green;
	}
}

/*=========================================
双方中円墳2
=========================================*/
.sohochuenfun-2 {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: ($basicSize * -0.4);
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin: auto;
		content: "";
		border-width: ($basicSize * 0.4) 0 ($basicSize * 0.4) ($basicSize * 1.20);
		border-style: solid;
		border-color: transparent transparent transparent $kofun_green;
	}
	
	&::after {
		position: absolute;
		top: 0;
		right: ($basicSize * -0.4);
		bottom: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin: auto;
		content: "";
		border-width: ($basicSize * 0.4) ($basicSize * 1.20) ($basicSize * 0.4) 0;
		border-style: solid;
		border-color: transparent $kofun_green transparent transparent;
	}
}

/*=========================================
双方中方墳
=========================================*/
.sohochuhofun {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: ($basicSize * -0.4);
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin: auto;
		content: "";
		border-width: ($basicSize * 0.3) 0 ($basicSize * 0.3) ($basicSize * 1.20);
		border-style: solid;
		border-color: transparent transparent transparent $kofun_green;
	}
	
	&::after {
		position: absolute;
		top: 0;
		right: ($basicSize * -0.4);
		bottom: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin: auto;
		content: "";
		border-width: ($basicSize * 0.3) ($basicSize * 1.20) ($basicSize * 0.3) 0;
		border-style: solid;
		border-color: transparent $kofun_green transparent transparent;
		}
}

/*=========================================
双円墳
=========================================*/
.soenfun {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	border-radius: 50%;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: $basicSize * 0.7;
		right: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: ($basicSize * 0.8);
		height: ($basicSize * 0.8);
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-radius: 50%;
		background-color: $kofun_green;
	}
}

/*=========================================
六角形墳
=========================================*/
.rokkakkeifun {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: ($basicSize * 0.58);
	background-color: $kofun_green;
	
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		content: "";
		transform: rotate(60deg);
		background-color: $kofun_green;
	}
	
	&::after {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		content: "";
		transform: rotate(-60deg);
		background-color: $kofun_green;
	}
}

/*=========================================
八角形墳
=========================================*/
.hakkakkeifun {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize * 0.42;
	background-color: $kofun_green;
	
	&::before {
		position: absolute;
		top: ($basicSize * -0.29);
		left: 0;
		display: block;
		box-sizing: content-box;
		width: $basicSize * 0.42;
		height: 0;
		content: "";
		border-width: 0 ($basicSize * 0.29) ($basicSize * 0.29) ($basicSize * 0.29);
		border-style: solid;
		border-color: transparent transparent $kofun_green transparent;
	}
	
	&::after {
		position: absolute;
		bottom: ($basicSize * -0.29);
		left: 0;
		display: block;
		box-sizing: content-box;
		width: $basicSize * 0.42;
		height: 0;
		content: "";
		border-width: ($basicSize * 0.29) ($basicSize * 0.29) 0 ($basicSize * 0.29);
		border-style: solid;
		border-color: $kofun_green transparent transparent transparent;
	}
}

/*=========================================
四隅突出型墳丘墓
=========================================*/
.yosumitosshutsu {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: $basicSize;
	height: $basicSize;
	background-color: $kofun_green;

	&::before {
		position: absolute;
		top: ($basicSize * 0.35);
		left: ($basicSize * -0.35);
		display: block;
		box-sizing: border-box;
		width: ($basicSize * 1.7);
		height: ($basicSize * 0.3);
		content: "";
		transform: rotate(45deg);
		border-radius: 42%;
		background-color: $kofun_green;
	}
	
	&::after {
		position: absolute;
		top: ($basicSize * 0.35);
		left: ($basicSize * -0.35);
		display: block;
		box-sizing: border-box;
		width: ($basicSize * 1.7);
		height: ($basicSize * 0.3);
		content: "";
		transform: rotate(-45deg);
		border-radius: 42%;
		background-color: $kofun_green;
	}
}

/*=========================================
円筒埴輪
=========================================*/
.entohaniwa {
	position: relative;
	box-sizing: border-box;
	width: ($basicSize * 0.8);
	height: 0;
	border-top: ($basicSize * 1.4) solid $haniwa_brown;
	border-right: ($basicSize * 0.06) solid transparent;
	border-left: ($basicSize * 0.06) solid transparent;

	&::before {
		position: absolute;
		bottom: calc(100% + #{$basicSize * 0.8});
		left: ($basicSize * -0.06);
		box-sizing: border-box;
		width: ($basicSize * 0.8);
		height: ($basicSize * 0.32);
		content: "";
		border-top: 3px solid darken($haniwa_brown, 20%);
		border-bottom: 3px solid darken($haniwa_brown, 20%);
	}

	&::after {
		position: absolute;
		bottom: calc(100% + #{$basicSize * 0.2});
		left: ($basicSize * -0.04);
		box-sizing: border-box;
		width: ($basicSize * 0.76);
		height: ($basicSize * 0.32);
		content: "";
		border-top: 3px solid darken($haniwa_brown, 20%);
		border-bottom: 3px solid darken($haniwa_brown, 20%);
	}
}

/*=========================================
円筒埴輪(透孔)
=========================================*/
.entohaniwa-sukashiana-1 {
	position: relative;
	box-sizing: border-box;
	width: ($basicSize * 0.8);
	height: 0;
	border-top: ($basicSize * 1.4) solid $haniwa_brown;
	border-right: ($basicSize * 0.06) solid transparent;
	border-left: ($basicSize * 0.06) solid transparent;

	&::before {
		position: absolute;
		bottom: calc(100% + #{$basicSize * 0.5});
		left: ($basicSize * -0.06);
		box-sizing: border-box;
		width: ($basicSize * 0.8);
		height: ($basicSize * 0.5);
		content: "";
		border-top: 3px solid darken($haniwa_brown, 20%);
		border-bottom: 3px solid darken($haniwa_brown, 20%);
	}

	&::after {
		position: absolute;
		right: 0;
		bottom: calc(100% + #{$basicSize * 0.65});
		left: 0;
		box-sizing: border-box;
		width: ($basicSize * 0.2);
		height: ($basicSize * 0.2);
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-radius: 50%;
		background-color: darken($haniwa_brown, 20%);
	}
}

/*=========================================
円筒埴輪(透孔三角形)
=========================================*/
.entohaniwa-sukashiana-2 {
	position: relative;
	box-sizing: border-box;
	width: ($basicSize * 0.8);
	height: 0;
	border-top: ($basicSize * 1.4) solid $haniwa_brown;
	border-right: ($basicSize * 0.06) solid transparent;
	border-left: ($basicSize * 0.06) solid transparent;

	&::before {
		position: absolute;
		bottom: calc(100% + #{$basicSize * 0.5});
		left: ($basicSize * -0.06);
		box-sizing: border-box;
		width: ($basicSize * 0.8);
		height: ($basicSize * 0.5);
		content: "";
		border-top: 3px solid darken($haniwa_brown, 20%);
		border-bottom: 3px solid darken($haniwa_brown, 20%);
	}

	&::after {
		position: absolute;
		right: 0;
		bottom: calc(100% + #{$basicSize * 0.7});
		left: 0;
		box-sizing: border-box;
		width: 0;
		height: 0;
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-width: ($basicSize * 0.2) ($basicSize * 0.12) 0 ($basicSize * 0.12);
		border-style: solid;
		border-color: darken($haniwa_brown, 20%) transparent transparent transparent;
	}
}

/*=========================================
朝顔形円筒埴輪
=========================================*/
.entohaniwa-asagao {
	position: relative;
	box-sizing: border-box;
	width: ($basicSize * 0.8);
	height: 0;
	border-top: ($basicSize * 1.2) solid $haniwa_brown;
	border-right: ($basicSize * 0.06) solid transparent;
	border-left: ($basicSize * 0.06) solid transparent;

	&::before {
		position: absolute;
		right:0;
		bottom: calc(100% + (#{$basicSize} * 1.2));
		left: ($basicSize * -0.06);
		box-sizing: border-box;
		width: ($basicSize * 0.8);
		height: 0;
		margin-right: auto;
		margin-left: auto;
		content: "";
		border-top: ($basicSize * 0.35) solid $haniwa_brown;
		border-right: ($basicSize * 0.2) solid transparent;
		border-bottom: ($basicSize * 0.14) solid $haniwa_brown;
		border-left: ($basicSize * 0.2) solid transparent;
	}
	&::after {
		position: absolute;
		bottom: calc(100% + #{$basicSize * 0.5});
		left: ($basicSize * -0.06);
		box-sizing: border-box;
		width: ($basicSize * 0.8);
		height: ($basicSize * 0.5);
		content: "";
		border-top: 3px solid darken($haniwa_brown, 20%);
		border-bottom: 3px solid darken($haniwa_brown, 20%);
	}
}

css全部(Sassをコンパイルしたもの)


/*=========================================
円墳
=========================================*/
.enpun {
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

/*=========================================
楕円形墳
=========================================*/
.daenkeifun {
  display: block;
  box-sizing: border-box;
  width: 130px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

/*=========================================
方墳
=========================================*/
.hofun {
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: #43c062;
}

/*=========================================
長方形墳
=========================================*/
.chohokeifun {
  display: block;
  box-sizing: border-box;
  width: 130px;
  height: 70px;
  background-color: #43c062;
}

/*=========================================
前方後円墳-前期
=========================================*/
.zenpokoenfun-zenki {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-zenki::before {
  position: absolute;
  top: 40px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 35px 125px 35px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

/*=========================================
前方後円墳-中期
=========================================*/
.zenpokoenfun-chuki {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-chuki::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

/*=========================================
前方後円墳-後期
=========================================*/
.zenpokoenfun-kouki {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-kouki::before {
  position: absolute;
  top: 40px;
  left: -10px;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  content: "";
  border-width: 0 60px 125px 60px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

/*=========================================
前方後円墳-撥形
=========================================*/
.zenpokoenfun-bachigata {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-bachigata::before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  box-sizing: border-box;
  width: 50px;
  height: 165px;
  content: "";
  background: radial-gradient(ellipse at top -140px right -25px, transparent, transparent 80px, #43c062 72px);
}

.zenpokoenfun-bachigata::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 50px;
  height: 165px;
  content: "";
  background: radial-gradient(ellipse at top -140px left -25px, transparent, transparent 80px, #43c062 72px);
}

/*=========================================
前方後円墳-剣菱形
=========================================*/
.zenpokoenfun-kenbishi {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-kenbishi::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

.zenpokoenfun-kenbishi::after {
  position: absolute;
  top: calc(100% + 65px);
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 10px 50px 0 50px;
  border-style: solid;
  border-color: #43c062 transparent transparent transparent;
}

/*=========================================
前方後円墳-柄鏡式
=========================================*/
.zenpokoenfun-ekagami {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-ekagami::before {
  position: absolute;
  top: 90px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 40px;
  height: 75px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  background-color: #43c062;
}

/*=========================================
前方後円墳-帆立貝式
=========================================*/
.zenpokoenfun-hotategai {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-bottom: 25px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-hotategai::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 35px 125px 35px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

/*=========================================
前方後円墳-造出し右
=========================================*/
.zenpokoenfun-tsukuridashi-r {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-tsukuridashi-r::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

.zenpokoenfun-tsukuridashi-r::after {
  position: absolute;
  top: 89px;
  right: 0;
  left: 56px;
  display: block;
  box-sizing: border-box;
  width: 25px;
  height: 26px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  background-color: #43c062;
}

/*=========================================
前方後円墳-造出し左
=========================================*/
.zenpokoenfun-tsukuridashi-l {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-tsukuridashi-l::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

.zenpokoenfun-tsukuridashi-l::after {
  position: absolute;
  top: 89px;
  right: 56px;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 25px;
  height: 26px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  background-color: #43c062;
}

/*=========================================
前方後円墳-造出し両方
=========================================*/
.zenpokoenfun-tsukuridashi {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.zenpokoenfun-tsukuridashi::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

.zenpokoenfun-tsukuridashi::after {
  position: absolute;
  top: 89px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 84px;
  height: 26px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  background-color: #43c062;
}

/*=========================================
前方後方墳
=========================================*/
.zenpokohofun {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: #43c062;
}

.zenpokohofun::before {
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 0 50px 110px 50px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

/*=========================================
双方中円墳1
=========================================*/
.sohochuenfun-1 {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.sohochuenfun-1::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -30px;
  display: block;
  box-sizing: border-box;
  width: 160px;
  height: 50px;
  margin: auto;
  content: "";
  background-color: #43c062;
}

/*=========================================
双方中円墳2
=========================================*/
.sohochuenfun-2 {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.sohochuenfun-2::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -40px;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin: auto;
  content: "";
  border-width: 40px 0 40px 120px;
  border-style: solid;
  border-color: transparent transparent transparent #43c062;
}

.sohochuenfun-2::after {
  position: absolute;
  top: 0;
  right: -40px;
  bottom: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin: auto;
  content: "";
  border-width: 40px 120px 40px 0;
  border-style: solid;
  border-color: transparent #43c062 transparent transparent;
}

/*=========================================
双方中方墳
=========================================*/
.sohochuhofun {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: #43c062;
}

.sohochuhofun::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -40px;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin: auto;
  content: "";
  border-width: 30px 0 30px 120px;
  border-style: solid;
  border-color: transparent transparent transparent #43c062;
}

.sohochuhofun::after {
  position: absolute;
  top: 0;
  right: -40px;
  bottom: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin: auto;
  content: "";
  border-width: 30px 120px 30px 0;
  border-style: solid;
  border-color: transparent #43c062 transparent transparent;
}

/*=========================================
双円墳
=========================================*/
.soenfun {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #43c062;
}

.soenfun::before {
  position: absolute;
  top: 70px;
  right: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-radius: 50%;
  background-color: #43c062;
}

/*=========================================
六角形墳
=========================================*/
.rokkakkeifun {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 58px;
  background-color: #43c062;
}

.rokkakkeifun::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  content: "";
  transform: rotate(60deg);
  background-color: #43c062;
}

.rokkakkeifun::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  content: "";
  transform: rotate(-60deg);
  background-color: #43c062;
}

/*=========================================
八角形墳
=========================================*/
.hakkakkeifun {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 42px;
  background-color: #43c062;
}

.hakkakkeifun::before {
  position: absolute;
  top: -29px;
  left: 0;
  display: block;
  box-sizing: content-box;
  width: 42px;
  height: 0;
  content: "";
  border-width: 0 29px 29px 29px;
  border-style: solid;
  border-color: transparent transparent #43c062 transparent;
}

.hakkakkeifun::after {
  position: absolute;
  bottom: -29px;
  left: 0;
  display: block;
  box-sizing: content-box;
  width: 42px;
  height: 0;
  content: "";
  border-width: 29px 29px 0 29px;
  border-style: solid;
  border-color: #43c062 transparent transparent transparent;
}

/*=========================================
四隅突出型墳丘墓
=========================================*/
.yosumitosshutsu {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background-color: #43c062;
}

.yosumitosshutsu::before {
  position: absolute;
  top: 35px;
  left: -35px;
  display: block;
  box-sizing: border-box;
  width: 170px;
  height: 30px;
  content: "";
  transform: rotate(45deg);
  border-radius: 42%;
  background-color: #43c062;
}

.yosumitosshutsu::after {
  position: absolute;
  top: 35px;
  left: -35px;
  display: block;
  box-sizing: border-box;
  width: 170px;
  height: 30px;
  content: "";
  transform: rotate(-45deg);
  border-radius: 42%;
  background-color: #43c062;
}

/*=========================================
円筒埴輪
=========================================*/
.entohaniwa {
  position: relative;
  box-sizing: border-box;
  width: 80px;
  height: 0;
  border-top: 140px solid #deb887;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.entohaniwa::before {
  position: absolute;
  bottom: calc(100% + 80px);
  left: -6px;
  box-sizing: border-box;
  width: 80px;
  height: 32px;
  content: "";
  border-top: 3px solid #c88937;
  border-bottom: 3px solid #c88937;
}

.entohaniwa::after {
  position: absolute;
  bottom: calc(100% + 20px);
  left: -4px;
  box-sizing: border-box;
  width: 76px;
  height: 32px;
  content: "";
  border-top: 3px solid #c88937;
  border-bottom: 3px solid #c88937;
}

/*=========================================
円筒埴輪(透孔)
=========================================*/
.entohaniwa-sukashiana-1 {
  position: relative;
  box-sizing: border-box;
  width: 80px;
  height: 0;
  border-top: 140px solid #deb887;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.entohaniwa-sukashiana-1::before {
  position: absolute;
  bottom: calc(100% + 50px);
  left: -6px;
  box-sizing: border-box;
  width: 80px;
  height: 50px;
  content: "";
  border-top: 3px solid #c88937;
  border-bottom: 3px solid #c88937;
}

.entohaniwa-sukashiana-1::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + 65px);
  left: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-radius: 50%;
  background-color: #c88937;
}

/*=========================================
円筒埴輪(透孔三角形)
=========================================*/
.entohaniwa-sukashiana-2 {
  position: relative;
  box-sizing: border-box;
  width: 80px;
  height: 0;
  border-top: 140px solid #deb887;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.entohaniwa-sukashiana-2::before {
  position: absolute;
  bottom: calc(100% + 50px);
  left: -6px;
  box-sizing: border-box;
  width: 80px;
  height: 50px;
  content: "";
  border-top: 3px solid #c88937;
  border-bottom: 3px solid #c88937;
}

.entohaniwa-sukashiana-2::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + 70px);
  left: 0;
  box-sizing: border-box;
  width: 0;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-width: 20px 12px 0 12px;
  border-style: solid;
  border-color: #c88937 transparent transparent transparent;
}

/*=========================================
朝顔形円筒埴輪
=========================================*/
.entohaniwa-asagao {
  position: relative;
  box-sizing: border-box;
  width: 80px;
  height: 0;
  border-top: 120px solid #deb887;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.entohaniwa-asagao::before {
  position: absolute;
  right: 0;
  bottom: calc(100% + (100px * 1.2));
  left: -6px;
  box-sizing: border-box;
  width: 80px;
  height: 0;
  margin-right: auto;
  margin-left: auto;
  content: "";
  border-top: 35px solid #deb887;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #deb887;
  border-left: 20px solid transparent;
}

.entohaniwa-asagao::after {
  position: absolute;
  bottom: calc(100% + 50px);
  left: -6px;
  box-sizing: border-box;
  width: 80px;
  height: 50px;
  content: "";
  border-top: 3px solid #c88937;
  border-bottom: 3px solid #c88937;
}

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
イエーイ!(挨拶)

2018年5月3日。
本日は『山梨県甲斐風土記の丘 こどもまつり』。
まりこふんライブ&古墳にコーフン協会が出店してますよー。
昨日から降っていた雨も朝には止んだ!最古〜!!

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
協会ブースでは、宇宙椅子 cosmic re-chairさんの甲斐銚子塚古墳クッションも特別販売。くびれ部から前方部にかけてシュッとしていてモデル体型の古墳ちゃんです。

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
古墳グッズ並びました!
まもなくこどもまつりが始まるよ〜。

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
野外ステージでは、発泡スチロールで何でも作っちゃう「ハッポゥくん」と、体で何でも表現しちゃう「ビックスモールン」のお二人!(と、それをかぶりつきで見るまりこふん)
※ハッポゥくんはこのイベントの翌日5月4日に「できたくん」に改名されたようです。

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
ハッポゥくんが発泡スチロールで「古墳」を切り抜いた!スゲー!!大コーフン!!

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
ビックスモールンが体で「前方後円墳」を表現した!ウオー!!大コーフン!!

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
ハッポゥくんとビックスモールンとまりこふん。
即興で古墳に寄せた芸を見せてくれました。とっても嬉しい!ワンダ墳!!

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
そしてそして忘れちゃいけない、まりこふんライブ!!
暑さも吹っ飛ばせー!!(めっちゃ暑かった)

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
JOMONDOKIDRUMBANDの大地さんとのコラボ演奏も!
つまり古墳と縄文がコラボした歴史的な瞬間!!

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
てなわけて、おまつりも無事終了!
最後に協会員みんなで記念撮影。
こどもまつりの他のアトラクションで遊べなかったのが残念。狩猟体験とかしたかったー。
また来年も来られるかな!?かな!?

山梨県甲府市『第30回 山梨県甲斐風土記の丘 こどもまつり』に参加しました!
【おまけ】
まりこふんお気に入りの園内移動用カート。

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!

2018年4月21日、栃木県小山市に新しい古墳資料館がオープン!その名も『国史跡 摩利支天塚・琵琶塚古墳資料館』。
わーいわーい、開館おめでとうございます〜。
なんとそんな記念すべき資料館オープニングイベントに、まりこふんと古墳にコーフン協会が参加することになりました。

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
来たで、小山市へ。
来たで、摩利支天塚・琵琶塚古墳資料館へ。

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
古墳にコーフン協会ブースも設置完了です。
まりこふんも朝から気合い入ってます。

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
このオープニングイベントのために、宇宙椅子 Cosmic Re-Chairさんが「摩利支天塚古墳クッション」を作ってくださいました。
レギュラーサイズと小サイズの二種類も!

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
摩利支天塚古墳の特徴でもある「剣菱形(けんびしがた)※」も再現。うーん、見事な職人技。※前方部の中央がへの字に折れている形のことです。

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
伊藤理事長作、琵琶塚古墳・摩利支天塚古墳の消しゴムはんこ。こちらも摩利支天塚は剣菱形に。

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
開館に先立ってテープカット。こういうの初めて見た・・・。ちょっと感激。

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
さぁ、テープカットで会館を祝った直後、朝からいきなりまりこふんライブです!
飛ばしていきますでー。古墳deコーフン♪(古墳deコーフン)
新曲「摩利支天塚古墳の歌」も初披露しましたよ。ボサノバ調。

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
まりこふんライブも終わって、一段落。
会場内も人が増えて来ました。
天気もいいし、古墳も見えるし、最高だねこりゃ。
そして、高所作業車も見える・・・。
そう、この高所作業車に乗って上から古墳を眺められるんですよ。
えー、見たい!!

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
高所作業車は15mくらいまで上昇。
おー、上から見るとまた違った顔になりますね。ふむふむ。
こちらは摩利支天塚古墳。(木が多い・・・)

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
お次は琵琶塚古墳。
THE 前方後円墳ですね。

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
もちろん資料館にも行かないとね。
改めて本日オープンおめでとうございます!(新築の匂い)

あっという間に時間は過ぎ、イベントも終了時間に・・・。
協会ブースにもたくさんの人がいらっしゃり、古墳話や栃木話に花が咲きましたよ。
あー、楽しかった!!

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
最後に、もう一度摩利支天塚古墳と琵琶塚古墳へとお散歩。
また来るよ〜。

栃木県小山市『国史跡 摩利支天塚・琵琶塚古墳資料館完成オープニングイベント』に参加しました!
高所作業車に乗ったらもらった。おいしい。