/* 変数 */
:root {
  --line: 8px;
  --darkyellow: #e5b139;
}

/* 描画範囲 */
.f_area {
  position: relative;
  width: min(100%, 280px);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}

/* ひまわり（中央） */
.f_circle {
  position: absolute;
  width: calc(100% / 2);
  aspect-ratio: 1 / 1;
  background-color: #994c2d;
  border: solid var(--line) var(--darkyellow);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 40;
}

/* ひまわり（中央 / 線） */
.f_circle_linearea {
  position: absolute;
  display: flex;
  gap: calc(var(--line) / 2);
  justify-content: space-evenly;
  width: 60%;
  aspect-ratio: 1 / 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.f_circle_linearea:nth-child(2) {
  rotate: 90deg;
}

.f_circle_line {
  width: var(--line);
  height: 100%;
  background-color: #562e22;
  border-radius: 50vw;
}

/* ひまわり（花びら） */
.f_petalarea {
  position: absolute;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 20;
}

.f_petalarea:nth-child(2) {
  rotate: 18deg;
  z-index: 10;
}

.f_petal {
  position: absolute;
  width: 25%;
  aspect-ratio: 1 / 1;
  background-color: #ffdf3f;
  border-radius: 0 75%;
  top: 50%;
  left: 50%;
  --angle: calc(360deg / 10 * var(--index));
  --x: calc(cos(var(--angle)) * 125%);
  --y: calc(sin(var(--angle)) * 125%);
  translate: calc(var(--x) - 50%) calc(var(--y) - 50%);
  rotate: calc(360deg / 10 * var(--index) + 135deg);
}

.f_petalarea:nth-child(2) .f_petal {
  background-color: var(--darkyellow);
}

/* ひまわり（花脈） */
.f_veinarea {
  position: relative;
  width: 100%;
  height: 100%;
  rotate: 18deg;
  z-index: 30;
}

.f_vein {
  position: absolute;
  width: var(--line);
  height: 75%;
  background-color: var(--darkyellow);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.f_vein:nth-child(2) {
  rotate: 36deg;
}

.f_vein:nth-child(3) {
  rotate: calc(36deg * 2);
}

.f_vein:nth-child(4) {
  rotate: calc(36deg * 3);
}

.f_vein:nth-child(5) {
  rotate: calc(36deg * 4);
}

/* 480px以下 */
@media screen and (max-width: 480px) {

  /* 変数 */
  :root {
  --line: 6px;
  }

}