@font-face {
  font-family: 'misakidot'; /*ドットフォント*/
  src: url('src/theme/fonts/misaki_gothic.ttf') format('truetype');
  }

/* 冒頭部 参考：https://www.nowte.net/ui/ui-css-horizontal-image-text/ */
.outset {
  display: flex; /*横並び*/
  font-family: 'misakidot';
  max-width: 100%; /*こいつがポイントだった...?*/
  font-size: min(4.5vw, 25px);
  align-items: center;
  ruby-position: under;
}
.outset img{
  max-width: 150px; /* 最大幅　PCでめちゃでかくなるのいやなので */
  width: 30%;
}
.outset .title {
  display: inline-block;
  font-weight:bold;
  width: 100%;
  margin: 0% 0% 0% 5%;
  flex-wrap:wrap;
  ruby-position: under;
}
.outset .title rt { /*英語をるびでふる*/
  text-align: left;
  text-decoration: underline;
  margin: 0% 5% 0% 5%;
}

/* リンク集 参考：https://pisuke-code.com/css-examples-of-clip-path/ */
.hexagon-1 {
	width: 150px;
	height: 130px; /* width*√3/2 */
	clip-path: polygon(25% 0, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	background: #3cb371;
}

/* 自己紹介 参考：https://www.nowte.net/ui/ui-css-horizontal-image-text/ */
.self {
  font-family: 'hiragino';
  max-width: 90%;
  font-size: min(4.5vw, 25px);
  align-items: center;
  display: flex; /*横並び*/
}

.self img{
  max-width: 100px; /* 最大幅　PCでめちゃでかくなるのいやなので */
  width: 30%;
}

.self .title {
  display: inline-block;
  font-weight:bold;
  width: 100%;
  margin: 0% 0% 0% 5%;
  flex-wrap:wrap;
  ruby-position: under;
}
.self .title rt { /*英語をるびでふる*/
  text-align: center;
  text-decoration: overline;
  margin: 0% 5% 0% 5%;
}

.introduction {
  font-family: 'Mairyo';
  max-width: 100%;
  font-size: min(3vw, 20px);
  align-items: center;
  text-align: center;
}
.introduction .text {
  display: inline-block;
  width: 100%;
  margin: 0% 5% 0% 5%;
  flex-wrap:wrap;
}

.introduction .english {
  display: inline-block;
  width: 100%;
  margin: 0% 5% 0% 5%;
  flex-wrap:wrap;
}