@charset "UTF-8";

/*
--------------------------------
更新日: 2026-10-29
--------------------------------
*/

/* --------------------------------
共通
-------------------------------- */

*:not(#nav-toggle),
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/* --------------------------------
  #contents10
-------------------------------- */
#container.version-20260911 #main #contents10 {
}
#container.version-20260911 #main #contents10 .section-inner {
    padding: 70px 0 119px;
}
#container.version-20260911 #main #contents10 .info-inner {
}
#container.version-20260911 #main #contents10 .info-inner li {
    border-bottom: 1px solid #cbcec4;
}
#container.version-20260911 #main #contents10 .info-inner li:first-child {
    border-top: 1px solid #cbcec4;
}
#container.version-20260911 #main #contents10 .info-inner li a {
    align-items: center;
    display: flex;
    gap: 0 16px;
    padding: 34px 71px 34px 20px;
    position: relative;
}
#container.version-20260911 #main #contents10 .info-inner li a::after {
    background: #72d39e;
    content: '';
    display: block;
    height: 8px;
    mask: url(../img/icon_arrow01_version-20260911.svg) center center / contain no-repeat;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    transition: right .2s ease;
    width: 16px;
}
@media only screen and (width > 768px) {
    #container.version-20260911 #main #contents10 .info-inner li a:hover:after {
        right: 10px;
    }
}
#container.version-20260911 #main #contents10 .info-inner li a .info-day {
    color: #3d3d3d;
    font-size: 14px;
    line-height: 28px;
    width: 105px;
}
#container.version-20260911 #main #contents10 .info-inner li a .info-category {
    background: #faf7f3;
    border-radius: 15px;
    color: #3d3d3d;
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    width: 110px;
}
#container.version-20260911 #main #contents10 .info-inner li a .info-text {
    color: #3d3d3d;
    flex: 1;
    font-size: 14px;
    line-height: 21px;
    padding-left: 0;
    transition: color .2s ease;
}
@media only screen and (width > 768px) {
    #container.version-20260911 #main #contents10 .info-inner li a:hover .info-text {
        color: #ff8b68;
    }
}
@media only screen and (max-width: 768px) {
    #container.version-20260911 #main #contents10 .section-inner {
        padding: calc(32 / 360 * 100vw) 0 calc(54 / 360 * 100vw);
    }
    #container.version-20260911 #main #contents10 .info-inner li {
        border-bottom-width: calc(1 / 360 * 100vw);
    }
    #container.version-20260911 #main #contents10 .info-inner li:first-child {
        border-top-width: calc(1 / 360 * 100vw);
    }
    #container.version-20260911 #main #contents10 .info-inner li a {
        flex-wrap: wrap;
        gap: calc(13 / 360 * 100vw) 0;
        padding: calc(19 / 360 * 100vw) calc(36 / 360 * 100vw) calc(19 / 360 * 100vw) 0;
        position: relative;
    }
    #container.version-20260911 #main #contents10 .info-inner li a::after {
        height: calc(8 / 360 * 100vw);
        right: calc(10 / 360 * 100vw);
        width: calc(16 / 360 * 100vw);
    }
    #container.version-20260911 #main #contents10 .info-inner li a .info-day {
        font-size: calc(13 / 360 * 100vw);
        line-height: calc(26 / 360 * 100vw);
        white-space: nowrap;
        width: calc(115 / 360 * 100vw);
    }
    #container.version-20260911 #main #contents10 .info-inner li a .info-category {
        border-radius: calc(15 / 360 * 100vw);
        font-size: calc(13 / 360 * 100vw);
        line-height: calc(26 / 360 * 100vw);
        width: calc(100 / 360 * 100vw);
    }
    #container.version-20260911 #main #contents10 .info-inner li a .info-text {
        flex: 0 1 auto;
        font-size: calc(13 / 360 * 100vw);
        line-height: calc(21 / 360 * 100vw);
    }
}

/* --------------------------------
  #contents11
-------------------------------- */
#container.version-20260911 #main #contents11 {
    background: #faf7f3;
}
#container.version-20260911 #main #contents11 .section-inner {
    padding: 70px 145px;
}
#container.version-20260911 #main #contents11 ul {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
}
#container.version-20260911 #main #contents11 ul li {
}
#container.version-20260911 #main #contents11 ul li a {
  background: #ff8b68;
  border-radius: 30px;
  display: block;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: calc(17px * .05);
  line-height: 60px;
  position: relative;
  text-align: center;
  transition: opacity .2s ease;
  width: 330px;
}
#container.version-20260911 #main #contents11 ul li:nth-child(3) a {
  background: #fff;
  border-radius: 30px;
  color: #ff8b68;
  font-size: 16px;
  letter-spacing: calc(16px * .05);
}
#container.version-20260911 #main #contents11 ul li a::after {
  background: #fff;
  content: '';
  display: block;
  height: 24px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 24px;
}
#container.version-20260911 #main #contents11 ul li:nth-child(1) a::after {
  mask: url(../img/icon_heart_version-20260911.svg) center center / contain no-repeat;
  right: 20px;
}
#container.version-20260911 #main #contents11 ul li:nth-child(2) a::after {
  mask: url(../img/icon_flag_version-20260911.svg) center center / contain no-repeat;
  right: 25px;
}
#container.version-20260911 #main #contents11 ul li:nth-child(3) a::after {
  background: linear-gradient(90deg, #fcd406 0%, #fcd406 50%, #08ad4d 50%, #08ad4d 100%);
  mask: url(../img/icon_beginner_version-20260911.svg) center center / contain no-repeat;
  right: 19px;
}
#container.version-20260911 #main #contents11 ul li a:hover {
  opacity: .7;
}
@media only screen and (max-width: 768px) {
    #container.version-20260911 #main #contents11 .section-inner {
        padding: calc(32 / 360 * 100vw) 0;
    }
    #container.version-20260911 #main #contents11 ul {
        display: block;
    }
    #container.version-20260911 #main #contents11 ul li {
        margin-bottom: calc(25 / 360 * 100vw);
    }
    #container.version-20260911 #main #contents11 ul li:last-child {
        margin-bottom: 0;
    }
    #container.version-20260911 #main #contents11 ul li a {
        border-radius: calc(30 / 360 * 100vw);
        font-size: calc(17 / 360 * 100vw);
        letter-spacing: calc(17 * .05 / 360 * 100vw);
        line-height: calc(60 / 360 * 100vw);
        width: auto;
    }
    #container.version-20260911 #main #contents11 ul li a::after {
        height: calc(24 / 360 * 100vw);
        width: calc(24 / 360 * 100vw);
    }
    #container.version-20260911 #main #contents11 ul li:nth-child(1) a::after,
    #container.version-20260911 #main #contents11 ul li:nth-child(2) a::after,
    #container.version-20260911 #main #contents11 ul li:nth-child(3) a::after {
        right: calc(20 / 360 * 100vw);
    }
}
