/* -------------------------------------------------------------------------- */
/*                                   Colors                                   */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                              Default Functions                             */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                               Default Mixins                               */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                                Custom Layout                               */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*                                   Header                                   */
/* -------------------------------------------------------------------------- */
@media screen and (width <= 1750px) {
  .header__header {
    margin-inline: 1.5rem 0;
  }
  .header__rbox {
    margin-inline: 0 1.5rem;
  }
  .header__sv-catch {
    padding-inline: 5rem;
  }
}
@media screen and (width <= 768px) {
  .header__wrapper {
    padding-inline: 2rem;
  }
  .header__header {
    margin-inline: 0;
  }
  .header__logo {
    width: 51%;
  }
  .header__mv, .header__sv {
    margin-top: 85px;
  }
  .header__mv-bg {
    height: 300px;
  }
  .header__mv-catch img {
    width: 310px;
    margin-inline: auto;
  }
  .header__sv {
    overflow: hidden;
  }
  .header__sv-catch {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header__sv-header::before {
    width: 57px;
    height: 46px;
    border-radius: 0;
    transform: translate(-70px, -55px);
  }
  .header__sv-header::after {
    width: 51px;
    height: 42px;
    border-radius: 0;
    transform: translate(80px, 39px);
  }
  .header__sv-header h2 {
    margin-inline: auto;
    padding-inline: 2rem;
    font-size: clamp(24px, 2.5vw, 22px);
  }
  .header__sv-header h2::before {
    transform: translateX(-30px);
  }
  .header__sv-header h2::after {
    transform: translateX(30px);
  }
  .header__sv-img {
    height: 200px;
  }
}
/* -------------------------------------------------------------------------- */
/*                                     Top                                    */
/* -------------------------------------------------------------------------- */
@media screen and (width <= 768px) {
  .sec01,
  .sec02,
  .sec05 {
    overflow: hidden;
  }
  .sec01__wrapper-xl {
    flex-flow: column-reverse nowrap;
    gap: 2rem;
    padding-right: 0;
  }
  .sec01__content {
    padding-inline: 1.5rem;
    margin-inline: auto;
  }
  .sec01__content .cmn-header::before {
    background-position: bottom left;
  }
  .sec01__content .cmn-header::after {
    width: 235px;
    height: 91px;
    border-radius: 0;
    transform: translate(70px, -30px);
    opacity: 0.7;
  }
  .sec01__content .cmn-button {
    margin-inline: auto;
  }
  .sec02 .cmn-header::after {
    width: 355px;
    height: 55px;
    border-radius: 0;
    transform: translate(0, -40px);
    background-image: url("/img/top/sp-sec02_deco1.webp");
  }
  .sec02__qbox, .sec02__abox {
    padding: 2rem 1.5rem;
  }
  .sec02__qbox:has(+ .sec02__qbox, + .sec02__abox), .sec02__abox:has(+ .sec02__qbox, + .sec02__abox) {
    margin-bottom: 3rem;
  }
  .sec02__qbox-header {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    background: repeat-x bottom center/350px 4px url("/img/common/sp-cmn-deco1.webp");
  }
  .sec02__qbox-header h4 {
    font-size: clamp(17px, 2.5vw, 19px);
    padding-left: 4rem;
  }
  .sec02__qbox-header h4::before {
    width: 28px;
    height: 28px;
    border-radius: 0;
  }
  .sec02__qbox-box {
    flex-flow: column nowrap;
    gap: 1.5rem;
  }
  .sec02__qbox-box--item2 .cmn-button, .sec02__qbox-box--item3 .cmn-button {
    width: 100%;
  }
  .sec02__abox-header {
    border-radius: 2.5rem;
    margin-bottom: 1rem;
  }
  .sec02__abox-header h4 {
    font-size: clamp(16px, 2.5vw, 18px);
  }
  .sec02__abox-box {
    width: min(100%, 450px);
    margin-inline: auto;
    justify-content: center;
    align-items: stretch;
    flex-flow: column nowrap;
    gap: 1rem;
  }
  .sec02__abox-box p {
    width: inherit;
    text-align: left;
  }
  .sec03__wrapper-xl::before, .sec03__wrapper-xl::after {
    opacity: 0.5;
  }
  .sec03__list {
    gap: 2rem;
  }
  .sec03__item {
    border-radius: 2rem 2rem 0 0;
  }
  .sec03__item-img {
    width: auto;
    height: 120px;
    border-radius: 0;
  }
  .sec03__item-header {
    padding: 1.5rem;
  }
  .sec03__item-header h3 {
    font-size: 2.2rem;
  }
  .top-news__wrapper-m {
    flex-flow: column nowrap;
    gap: 0;
  }
  .top-news__list {
    margin-bottom: 3rem;
  }
  .top-news__item-link {
    padding: 1.5rem 2rem;
  }
  .top-news__item-link--detail {
    gap: 1rem;
  }
  .top-news__item-img {
    width: 48px;
    height: 48px;
    border-radius: 0;
  }
  .top-news__button {
    width: 100%;
  }
  .sec04 .cmn-header::after {
    width: 138px;
    height: 91px;
    border-radius: 0;
    opacity: 0.7;
  }
  .sec04__wrapper-xl {
    flex-flow: column nowrap;
    gap: 1rem;
    padding: 0;
  }
  .sec04__box {
    width: min(100%, 450px);
    margin-inline: auto;
  }
  .sec04__box .cmn-textbox p:last-of-type {
    padding-top: 0;
  }
  .sec04__box .cmn-textbox p:last-of-type span {
    font-size: 1.5rem;
    margin-right: 2rem;
  }
  .sec04__box .cmn-textbox p:last-of-type em {
    font-size: 1.8rem;
  }
  .sec05 {
    padding-inline: 1.2rem;
  }
  .sec05 .cmn-header::after {
    width: 361px;
    height: 59px;
    border-radius: 0;
  }
  .sec05__item, .sec05__item:nth-child(even) {
    width: min(100%, 450px);
    margin-inline: auto;
    flex-flow: column nowrap;
    gap: 2rem;
  }
  .sec05__item .sec05__item-box {
    margin-inline: 0;
  }
  .sec05__item-header {
    margin-bottom: 2rem;
  }
  .sec05__item-header h4 span {
    font-size: 1.8rem;
    padding: 0.4rem 2rem;
  }
  .sec05__item-header h4 span:not(:last-child) {
    margin-bottom: 0.5rem;
  }
  .sec06__wrapper-l {
    align-items: center;
    flex-flow: column nowrap;
  }
  .sec06__box {
    width: min(100%, 450px);
    margin-inline: auto;
  }
  .sec06__header {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
  .sec06__header h3 {
    font-size: 2.2rem;
  }
  .sec07__list {
    padding: 1.5rem;
  }
  .sec07__item-box {
    flex-flow: column nowrap;
    gap: 1rem;
  }
  .sec07__item-header, .sec07__item-price {
    width: 100%;
    padding-inline: 1.5rem;
  }
  .sec07__item-header h4 {
    line-height: 4rem;
  }
  .sec07__item-price {
    padding-bottom: 1rem;
    text-align: left;
  }
  .sec08__list {
    gap: 1rem;
  }
  .sec08__item {
    padding: 1.3rem 1.5rem;
  }
  .sec08__item span {
    font-size: 1.4rem;
  }
  .sec09__item {
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    gap: 0;
    padding: 3rem 1.5rem;
  }
  .sec09__item:not(:last-child) {
    margin-bottom: 1.5rem;
  }
  .sec09__item-img {
    width: 150px;
    height: 150px;
    border-radius: 0;
  }
  .sec09__item-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    margin-bottom: 1.5rem;
  }
  .sec09__item-header h4 {
    text-align: center;
    font-size: 2rem;
  }
  .sec09__item-header h4::before {
    display: block;
    text-align: inherit;
    margin-right: 0;
    font-size: 2.4rem;
  }
  .sec10__wrapper-xl::before, .sec10__wrapper-xl::after {
    opacity: 0.5;
  }
  .sec10__item-header, .sec10__item-textbox {
    padding: 1.5rem 1.5rem 2rem;
  }
  .sec10__item-header h4, .sec10__item-textbox p {
    padding-left: 4.5rem;
  }
  .sec10__item-textbox p {
    font-size: 1.4rem;
    line-height: 2.5rem;
  }
  .sec11__item {
    padding: 1.5rem;
  }
  .sec11__item:not(:last-child) {
    margin-bottom: 2rem;
  }
  .sec11__item-tbox, .sec11__item-bbox {
    width: min(100%, 450px);
    margin-inline: auto;
  }
  .sec11__item-tbox {
    flex-flow: column nowrap;
    gap: 1rem;
  }
  .sec11__item-bbox {
    gap: 2.5rem;
  }
  .sec11__item-img {
    margin-inline: auto;
    width: auto;
    height: auto;
    border-radius: 0;
  }
  .sec11__item-img2 {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .sec11__item-header {
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
  }
  .sec11__item-header h4 {
    font-size: 2rem;
  }
  .sec11__item-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }
  .sec11__item-textbox {
    padding: 1.5rem;
  }
  .sec11__item-textbox p {
    padding-left: 0;
  }
}
/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
@media screen and (width <= 768px) {
  .footer {
    overflow: hidden;
  }
  .footer__wrapper-m {
    padding-block: 4rem 2rem;
  }
  .footer__tbox {
    align-items: center;
    flex-flow: column nowrap;
    gap: 2rem;
  }
  .footer__mbox {
    align-items: center;
    flex-flow: column-reverse nowrap;
    gap: 2rem;
    margin-bottom: 3rem;
  }
  .footer__mbox-box p {
    text-align: center;
    font-size: 1.2rem;
    line-height: 2.3rem;
  }
  .footer__logo img {
    width: min(100%, 330px);
    margin-inline: auto;
  }
  .footer__info-item {
    font-size: 1.2rem;
  }
  .footer__list {
    justify-content: center;
    gap: 2rem;
  }
  .footer__copyright {
    padding-block: 0.4rem;
    font-size: 1rem;
  }
}