<div class="dappo">
  
  <div class="independent" id="id1">
    <div class="charbox">
      <div id="outputChar1" class="char" contenteditable="true"></div>
    </div>
  </div>
  <div class="independent" id="id2">
    <div class="charbox">
      <div id="outputChar2" class="char" contenteditable="true"></div>
    </div>
  </div>
  <div class="independent" id="id3">
    <div class="charbox">
      <div id="outputChar3" class="char" contenteditable="true"></div>
    </div>
  </div>
    
  <button id="go">
    <svg id="Go" viewBox="0 0 24 24">
	    <path class="d" d="m24,2h-8v8l2.56-2.56c.9,1.3,1.44,2.87,1.44,4.56,0,4.42-3.58,8-8,8s-8-3.58-8-8S7.58,4,12,4V0C5.37,0,0,5.37,0,12s5.37,12,12,12,12-5.37,12-12c0-2.8-.97-5.38-2.58-7.42l2.58-2.58Z"/>
    </svg>
</button>
</div>

.dappo {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  display: flex;
  justify-content: space-around;
}
#go {
  position: absolute;
  left: auto;
  right: auto;
  bottom: 0;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: none;
  border-radius: 20px;
  font-size: 24px;
  background-color: #ff9900;
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, .6);
}
#go:active {
  transform: translate( 2px, 2px );
  box-shadow: none;
}
#Go .d {
  width: 24px;
  height: 24px;
  fill: white;
}
.independent {
  position: relative;
  width: calc( 100% / 3 );
  aspect-ratio: 4 / 9;
  padding: 0;
  color: black;
  background-color: white;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}
#id1 {
  background-image: url("https://nag-design.com/embed/dappo/char1bg@2x.webp");
}
#id2 {
  background-image: url("https://nag-design.com/embed/dappo/char2bg@2x.webp");
}
#id3 {
  background-image: url("https://nag-design.com/embed/dappo/char3bg@2x.webp");
}
.charbox {
  position: absolute;
  top: 6%;
  left: 0;
  right: 0;
  bottom: auto;
  margin: auto;
  display: block;
  width: 38%;
  height: auto;
  aspect-ratio: 4 / 3;
  padding: 0;
  text-align: center;
  color: black;
  background-color: transparent;
}
.char {
  display: block;
  width: 100%;
  height: 100%;
  resize: both;
}
#outputChar1 {
  transform: translate(-2%, -12%) rotate(5deg);
}
#outputChar2 {
  transform: rotate(-5deg);
}
#outputChar3 {
  transform: translate(3%, -7%) rotate(0);
}

document.getElementById('go').addEventListener('click', function() {
  // 五十音の配列
  const gojuon = ['あ', 'い', 'う', 'え', 'お', 'か', 'き', 'く', 'け', 'こ', 'さ', 'し', 'す', 'せ', 'そ', 'た', 'ち', 'つ', 'て', 'と', 'な', 'に', 'ぬ', 'ね', 'の', 'は', 'ひ', 'ふ', 'へ', 'ほ', 'ま', 'み', 'む', 'め', 'も', 'や', 'ゆ', 'よ', 'ら', 'り', 'る', 'れ', 'ろ', 'わ', 'を', 'ん'];

  let output1 = '';
  let output2 = '';
  let output3 = '';
  let attempts = 0;

  // 試行回数：1回
  while (attempts < 1) {
    let randomChar1, randomChar2, randomChar3;

    // ランダムなインデックスを生成
    const randomIndex1 = Math.floor(Math.random() * gojuon.length);
    const randomIndex2 = Math.floor(Math.random() * gojuon.length);
    const randomIndex3 = Math.floor(Math.random() * gojuon.length);

    // ランダムな五十音文字を取得
    randomChar1 = gojuon[randomIndex1];
    randomChar2 = gojuon[randomIndex2];
    randomChar3 = gojuon[randomIndex3];

    // 実行
    output1 += `${randomChar1}`;
    output2 += `${randomChar2}`;
    output3 += `${randomChar3}`;
    attempts++;
  }

  // すべての行程を出力
  document.getElementById('outputChar1').innerHTML = output1;
  document.getElementById('outputChar2').innerHTML = output2;
  document.getElementById('outputChar3').innerHTML = output3;
});

// 文字サイズ調整
function fitText() {
  const elements = document.querySelectorAll('.char');

  elements.forEach(function(element) {
    const fontSize = parseInt(window.getComputedStyle(element).fontSize);
    const width = element.offsetWidth;
    const height = element.offsetHeight;

    // 幅と高さのうち、小さい方に合わせる
    const size = ( Math.min(width, height) ) * 0.8;

    // 文字サイズを設定
    element.style.fontSize = size + 'px';
  });
}

// ページ読み込み時にも文字サイズを調整
window.addEventListener('DOMContentLoaded', fitText);