.f-red {
  color: #FF1142; }

.f-blue {
  color: #117DD8; }

.f-vermilion {
  color: #FF5611; }

.f-yellow {
  color: #FDFD6D; }

.blocks {
  width: 89.3333333333vw;
  margin-left: auto;
  margin-right: auto; }
.blocks .headline {
  line-height: 1.6; }
.blocks .boxs {
  margin-top: 10.6666666667vw; }
.blocks .text {
  font-size: 14px;
  line-height: 2; }
.blocks .image img {
  border-radius: 15px; }
.blocks .image figcaption {
  font-size: 14px;
  margin-top: 2.6666666667vw;
  text-align: center; }

.blockarea {
  margin-top: 21.3333333333vw; }
.blockarea.first {
  margin-top: 16vw; }
.blockarea.right .image {
  margin-top: 10.6666666667vw; }
.blockarea.left .text {
  margin-top: 10.6666666667vw; }

#blocks {
  margin-top: 21.3333333333vw;
  margin-bottom: 21.3333333333vw; }
#blocks .torikumi {
  margin-top: 10.6666666667vw; }
#blocks .box + .box {
  margin-top: 16vw; }
#blocks .wrap {
  margin-left: 10.6666666667vw; }
#blocks .image {
  margin-top: 10.6666666667vw; }
@media (min-width: 768px) {

  #mv .image {
    width: calc( 50% + 600px );
    margin-left: auto; }

  #mv .image img {
    height: 500px;
    border-radius: 15px 0 0 15px; }

  .blocks {
    width: 1200px; }

  .blocks .boxs {
    margin-top: 50px;
    display: -ms-flexbox;
    display: flex;
    gap: 0 50px; }

  .blocks .text {
    font-size: 15px;
    line-height: 2;
    width: 775px; }

  .blocks .image {
    width: 375px; }

  .blocks .image figcaption {
    margin-top: 10px; }

  .blockarea {
    margin-top: 80px; }

  .blockarea.first {
    margin-top: 80px; }

  .blockarea.right .image {
    margin-top: 0;
    width: 375px; }

  .blockarea.right .text {
    width: 775px; }

  .blockarea.left .text {
    margin-top: 0; }

  .blockarea.no .text {
    width: auto; }

  #blocks {
    margin-top: 80px;
    margin-bottom: 120px; }

  #blocks .torikumi {
    margin-top: 50px; }

  #blocks .box + .box {
    margin-top: 80px; }

  #blocks .e-headline {
    margin-bottom: 30px; }

  #blocks .wrap {
    margin-left: 70px;
    display: -ms-flexbox;
    display: flex;
    width: 1130px; }

  #blocks .wrap:has(.image) {
    gap: 0 45px; }

  #blocks .wrap:has(.image) .text {
    width: 745px; }

  #blocks .text {
    width: auto; }

  #blocks .image {
    margin-top: 0;
    width: 340px; } }