@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@500&display=swap');
body {
  font-family: 'Noto Sans JP', sans-serif; }

.as header > nav, .as .fox, .as main > section {
  max-width: 960px;
  margin: 0 auto;
  width: 95%; }
  .as img {
    max-width: 100%; }
  .as section {
    text-align: center; }
  .as header .breadcrumb {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    font-size: 14px;
    width: 100%;
    padding-left: 0.5em;
    color: #333;
    box-sizing: border-box; }
  .as header .breadcrumb a {
    color: #00e;
    font-weight: 700;
    text-decoration: underline; }
  .as header .breadcrumb span {
    margin-left: 0.5em; }
  .as h1 {
    background: url("/asp/photo/auction/lp/allseason/img/sp_header.jpg") center / cover no-repeat; }
  .as .header_top {
    margin-bottom: 5px;
    margin: 0 auto;
    display: block; }
  .as nav {
    margin: 0 5px auto; }
  .as .fox {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    /* hoverなどの誤動作防止 */
    pointer-events: none; }
  .as .fox.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; }
  .as .serch_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 95%; }
  .as .serch_nav.fix {
    width: 100%; }
  .as .serch_nav > li {
    width: 49%; }
  .as .serch_nav.fix > li {
    width: 50%; }
  .as .serch_nav > li > a {
    display: block;
    background-color: #231815;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 3.7vw;
    border-radius: 5px;
    margin: 5px 0;
    padding: 6px 0;
    transform: skewX(-10deg);
    line-height: 1.5; }
  .as .serch_nav.fix > li > a {
    display: block;
    background-color: #231815;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 3.7vw;
    border-radius: 0px;
    margin: 0;
    padding: 6px 0;
    transform: skewX(0deg);
    line-height: 1.5; }
  .as .serch_nav.fix > li:nth-of-type(odd) > a {
    border-right: 1px solid #fff; }
  .as .serch_nav.fix > li:nth-of-type(1) > a, .as .serch_nav.fix > li:nth-of-type(2) > a {
    border-bottom: 1px solid #fff; }
  .as #recommend {
    background-color: #ff8100; }
  .as .serch_nav > li > a > small {
    font-weight: 400; }
  .as .text {
    font-size: 5.5vw;
    text-underline-offset: -2px;
    margin: 65px 0;
    font-weight: 900;
    text-align: center; }
  .as .black {
    text-decoration: underline #ffd200 7px;
    font-style: italic; }
  .as .orange {
    color: #ff8100;
    font-style: italic; }
  .as .serch_nav > li > a > small {
    display: block; }
  .as .left-image > img {
    width: 80vw; }
  .as .right-image > p {
    text-align: justify;
    margin: 0 10px; }
    .as .right-image > p br {
      display: none; }
  .as .important_one, .as .important_two {
    text-align: left; }
  .as .important_one {
    font-size: 3.8vw;
    padding-bottom: 15px; }
  .as .important_two {
    background: rgba(243, 149, 24, 0.5);
    font-size: 3.5vw;
    padding: 10px;
    line-height: 1.7;
    border-radius: 5px; }
  .as .right-image > a {
    display: block;
    background: #231815;
    color: #fff;
    width: 60%;
    margin: 20px auto;
    padding: 15px;
    font-size: 4.3vw;
    border-radius: 10px;
    margin-top: 20px;
    font-weight: 700; }
  .as .flex > li {
    margin-bottom: 15px; }
  .as .flex > li > .merit > dt {
    background: #ff8100;
    width: 90%;
    margin: 0 auto;
    padding: 10px 0;
    margin-bottom: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 4vw;
    font-weight: bold; }
  .as .flex > li > .merit > dd {
    width: 88%;
    margin: 15px auto;
    border: 5px solid #ff8100;
    border-radius: 15px;
    height: 45vw; }
  .as .flex > li > .merit > dd > p {
    font-size: 4.5vw;
    margin-top: 25px;
    font-weight: 700; }
  .as .flex > li > .one > dd {
    background: url("/asp/photo/auction/lp/allseason/img/merit_1.png") center 100% / 70% no-repeat; }
  .as .flex > li > .second > dd {
    background: url("/asp/photo/auction/lp/allseason/img/merit_2.png") center 100% / 70% no-repeat; }
  .as .flex > li > .third > dd {
    background: url("/asp/photo/auction/lp/allseason/img/merit_3.png") center 100% / 70% no-repeat; }
  .as .flex > li > .four > dd {
    background: url("/asp/photo/auction/lp/allseason/img/merit_4.png") center 100% / 70% no-repeat; }
  .as .flex > li > .five > dd {
    background: url("/asp/photo/auction/lp/allseason/img/merit_5.png") center 100% / 70% no-repeat; }
  .as .flex > li > .six > dd {
    background: url("/asp/photo/auction/lp/allseason/img/merit_6.png") center 95% / 70% no-repeat; }
  .as .point-box {
    display: flex;
    /* または center：縦位置の調整 */
    align-items: flex-start;
    /* 画像とテキストの間の余白 */
    gap: 10px;
    margin: 25px 15px; }
  .as .point-box img {
    width: 11.5vw;
    height: auto; }
  .as .point-box p {
    text-align: left;
    font-size: 4vw;
    line-height: 1.5;
    font-weight: 500; }
  .as #br {
    display: none; }
  .as .table-wrapper {
    display: flex;
    font-size: 14px;
    margin-left: 10px; }
  .as .spacer {
    /* 必要な空白の幅に応じて調整 */
    width: 20px;
    background-color: transparent; }
  .as .right-table {
    width: calc(100% - 150px);
    overflow-x: auto; }
  .as .right-table::-webkit-scrollbar {
    height: 25px;
    scrollbar-width: auto; }
  .as .right-table::-webkit-scrollbar-thumb {
    background: #a8a8a8;
    border-radius: 5px;
    min-height: 30px;
    min-width: 30px;
    max-height: 60px;
    max-width: 60px; }
  .as .right-table::-webkit-scrollbar-track {
    background: #f1f1f1; }
  .as table {
    border-collapse: collapse;
    font-weight: 500; }
  .as .left-table th, .as .header-table td, .as .header-table th {
    min-width: 100px;
    text-align: center;
    white-space: nowrap;
    padding: 15px 5px;
    border: 1px solid orange;
    box-sizing: border-box; }
  .as .left-table .road th, .as .header-table .road td {
    padding: 0;
    height: 60px; }
  .as .left-table .head th {
    padding: 0;
    height: 40px;
    border: none; }
  .as .left-table th {
    width: 150px;
    font-size: 14px; }
  .as th.highlight {
    background: linear-gradient(to top, transparent 10px, #ff8100 10px);
    color: #fff;
    padding: 0;
    height: 40px;
    padding-bottom: 10px;
    border: none;
    position: relative;
    font-size: 16px; }
  .as th.highlight:nth-of-type(1)::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 100%;
    background-color: #fff;
    top: 0;
    right: -10px;
    z-index: 1; }
  .as .light {
    background: #ff8100; }
  .as .kome1::after {
    content: "※1";
    color: red;
    font-size: 10px;
    position: relative;
    bottom: 4px; }
  .as .kome2::after {
    content: "※2";
    color: red;
    font-size: 10px;
    position: relative;
    bottom: 4px; }
  .as .kome3::after {
    content: "※3";
    color: red;
    font-size: 10px;
    position: relative;
    bottom: 4px; }
  .as .comparison > ol {
    margin-top: 15px; }
  .as .attention {
    text-align: left;
    text-indent: -2.5em;
    padding-left: 10vw;
    line-height: 1.5;
    font-size: 3.4vw; }
    .as .attention br {
      display: none; }
  .as .attention > span::after {
    content: ":";
    padding: 0 2px; }
  .as .wrong {
    text-align: left;
    padding-left: 20px;
    background: pink;
    margin: 15px auto;
    font-size: 4vw;
    padding: 10px; }
    .as .wrong br {
      display: none; }
  .as .snowmark {
    margin: 0 auto;
    border: 3px solid #ff8100;
    width: 100%;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; }
  .as .snowmark > .info {
    padding-top: 10px;
    margin-left: 2vw; }
  .as .features {
    display: flex;
    flex-wrap: wrap;
    width: 70%;
    margin-left: 10px; }
  .as .features > .snowsubhead > p {
    font-size: 4.5vw;
    font-weight: 900; }
  .as .snowsubhead > p > span {
    font-size: 3.5vw; }
  .as .snowmark > div > img {
    height: 18vw;
    margin-top: 4vw; }
  .as .mark > p {
    text-align: left;
    font-size: 3.4vw; }
    .as .mark > p br {
      display: none; }
  .as section > .subheading {
    font-size: 5vw;
    background: #ff8100;
    font-weight: 700;
    color: #fff;
    font-style: italic;
    margin-bottom: 15px;
    padding: 10px 0px; }
  .as section > .subheading > small {
    display: block;
    font-size: 4vw; }
  .as .momo {
    background: #c91b1d; }
  .as .radar {
    background: #333; }
  .as .davanti {
    background: black; }
  .as .minerva {
    background: #fff000; }
  .as .logo {
    display: block;
    padding: 10px 0 0 10px;
    width: 30%; }
  .as .ptn > .brandbox {
    color: #fff; }
  .as .ptn > .brandbox {
    color: #fff; }
  .as .ptn > div > .brand {
    font-size: 8vw;
    display: block;
    margin: 0 auto;
    transform: skewX(-10deg); }
  .as .pickup_brand small {
    font-size: 3.5vw;
    display: block;
    text-align: center;
    padding-bottom: 20px;
    font-weight: 400;
    color: #fff; }
  .as .minerva > .ptn > div > .brand {
    color: #000;
    font-size: 12vw; }
  .as .minerva > small {
    color: #000; }
  .as .sp {
    display: none; }
  .as .detail {
    background: #fff6e0;
    font-size: 3.8vw;
    padding-top: 1px; }
  .as .detail > div > p {
    background: linear-gradient(to right, #eac543 0%, #f5d76e 50%, #fff9e5 100%);
    margin: 10px 0;
    font-size: 3.5vw;
    text-align: left;
    padding-left: 1em;
    font-weight: 900; }
  .as .flexbox {
    display: flex;
    padding-bottom: 0px;
    margin-top: 15px;
    flex-wrap: wrap; }
  .as .equalone {
    /* 2つ並べたいので50%ずつにする */
    width: 55%;
    box-sizing: border-box; }
  .as .equaltwo {
    width: 45%; }
  .as .performance {
    width: 100%; }
  .as .flex_text {
    text-align: left;
    padding: 0 1em;
    line-height: 1.5; }
    .as .flex_text br {
      display: none; }
  .as .learn {
    display: block;
    font-size: 5.4vw;
    background: #c91b1d;
    width: 65%;
    margin: 30px auto;
    border-radius: 15px;
    color: #fff;
    padding: 15px 0; }
  .as .pick_item {
    padding: 0% 1.5%; }
  .as .pick_item > .detail::after {
    content: "";
    background: #fff6e0;
    padding-bottom: 5px;
    display: block;
    margin-bottom: 30px; }
  .as .line_up > nav {
    margin: 0; }
  .as .navbox {
    gap: 0px; }
  .as .navbox:nth-of-type(n+7), .as .navbox:nth-of-type(4) {
    display: none; }
  .as .navbox:nth-of-type(6) {
    margin: 0 3.5%; }
  .as .serchbox {
    display: flex;
    /* 折り返し可にするなら */
    flex-wrap: wrap;
    /* 任意：隙間調整 */
    gap: 0;
    padding: 0;
    margin: 0 auto;
    list-style: none; }
  .as .serchbox > li {
    box-sizing: border-box;
    margin: 0 auto;
    width: 43%; }
  .as .over {
    height: 25vw;
    overflow: hidden;
    padding-top: 18.5vw; }
  .as .imagewidth {
    width: auto;
    height: 28vw;
    overflow: hidden; }
  .as .tirefront {
    margin-top: 15px; }
  .as .img-container span {
    background: black;
    color: #fff;
    border-radius: 5px;
    width: 8em;
    display: block;
    margin: 0 auto;
    z-index: 1;
    position: relative;
    top: -5.3vw;
    font-size: 4vw;
    font-weight: 900; }
  .as .img-container {
    width: 40vw;
    display: block;
    z-index: -1;
    padding-bottom: 2px;
    height: 45vw;
    margin: 0 auto;
    position: relative; }
  .as .mm_4run_m-4_all_season_pa > .img-container {
    background: linear-gradient(to bottom, #fff 70%, #e7141a 70%); }
  .as .mn_all_season_master_pa > .img-container {
    background: linear-gradient(to bottom, #fff 70%, #fff000 70%); }
  .as .dv_alltoura_ht_pa > .img-container, .as .dv_alltoura_pa > .img-container {
    background: linear-gradient(to bottom, #fff 70%, #ff8100 70%); }
  .as .rd_dimax_all_season_pa > .img-container {
    background: linear-gradient(to bottom, #fff 70%, #333 70%); }
  .as .gy_vector_4seasons_pa > .img-container, .as .gy_vector_4seasons_hybrid_pa > .img-container, .as .gy_vector_4seasons_gen-3_pa > .img-container, .as .gy_vector_4seasons_gen-3_suv_pa > .img-container, .as .gy_vector_4seasons_cargo_pa > .img-container {
    background: linear-gradient(to bottom, #fff 70%, #023894 70%); }
  .as .serch_nav_logo {
    width: 32vw;
    margin: 0 auto;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0vw; }
  .as .mm_4run_m-4_all_season_pa .serch_nav_logo {
    width: 18vw;
    top: 6vw; }
  .as .mn_all_season_master_pa > .img-container > .serch_nav_logo {
    top: 6vw; }
  .as .dv_alltoura_ht_pa .serch_nav_logo, .as .dv_alltoura_pa .serch_nav_logo {
    width: 25vw;
    top: 5vw; }
  .as .rd_dimax_all_season_pa .serch_nav_logo {
    top: 8vw;
    width: 65%; }
  .as .mm_4run_m-4_all_season_pa .ptn_logo, .as .mn_all_season_master_pa .ptn_logo {
    width: 30vw; }
  .as .dv_alltoura_ht_pa .ptn_logo {
    width: 39vw; }
  .as .dv_alltoura_pa .ptn_logo {
    width: 36vw; }
  .as .rd_dimax_all_season_pa .ptn_logo {
    width: 35vw; }
  .as .gy_vector_4seasons_hybrid_pa .ptn_logo, .as .gy_vector_4seasons_gen-3_pa .ptn_logo, .as .gy_vector_4seasons_gen-3_suv_pa .ptn_logo, .as .gy_vector_4seasons_cargo_pa .ptn_logo {
    width: 34vw; }
  .as .introduction {
    border: 1px solid;
    width: 100%;
    margin: 25px auto;
    position: relative; }
  .as .introduction > .ptn_title > h4 > .headtitle > .decoration_drop {
    content: url("/asp/photo/auction/lp/allseason/img/drop_item.png");
    background-repeat: no-repeat;
    position: absolute;
    top: 10px;
    right: 10px;
    max-width: 130px;
    width: 100%; }
  .as .mm_4run_m-4_all_season_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
    height: 16vw; }
  .as .mn_all_season_master_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
    height: 11vw; }
  .as .dv_alltoura_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo, .as .dv_alltoura_ht_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
    height: 10vw; }
  .as .gy_vector_4seasons_pa_introduction {
    display: none; }
  .as .headtitle > .ptn_logo {
    height: 13vw; }
  .as .rd_dimax_all_season_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
    height: 9vw; }
  .as .ptn_logo {
    padding-top: 7px; }
  .as .maker_logo {
    display: block;
    padding-left: 10px;
    padding-top: 10px;
    width: 30%; }
  .as .ptn_logo {
    margin: 0 auto;
    display: block; }
  .as .japanese {
    font-size: 3.6vw;
    display: block;
    padding-bottom: 20px;
    color: #fff; }
  .as .description > dl > dt {
    padding: 15px 0;
    font-size: 4.5vw;
    font-weight: 900; }
  .as .description > dl > dd {
    text-align: left;
    padding: 0 10px;
    font-size: 3.5vw; }
  .as .certification {
    height: 50vw;
    overflow: hidden;
    margin-top: 20px; }
  .as .certification > img {
    height: 80vw; }
  .as .ptn_top > .size {
    display: flex;
    margin-top: 25px;
    margin-bottom: 30px;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap; }
  .as .smallbox {
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: center; }
  .as .textsize {
    color: #fff;
    border-radius: 10px;
    display: block; }
  .as .textsize span {
    text-decoration: none;
    color: #fff;
    padding: 0.3em 1em;
    display: block;
    background: black;
    border-radius: 10px;
    font-size: 4vw; }
  .as .inch {
    font-size: 4.5vw;
    font-weight: 900;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
  .as .number {
    display: inline-block;
    position: relative;
    font-size: 8vw;
    line-height: 1; }
  .as .number span {
    font-size: 0.4em;
    font-weight: 400;
    display: block; }
  .as .arrow {
    display: inline-block;
    margin: 0 3vw; }
  .as .ptn_top > a {
    background: #c91b1d;
    border-radius: 20px;
    color: #fff;
    padding: 10px 15px 10px;
    display: block;
    width: 50%;
    margin: 20px auto 20px;
    font-size: 5.3vw;
    font-weight: 700; }
  .as .item_box > button {
    font-size: 5.3vw;
    background: #c91b1d;
    border: none;
    color: white;
    font-weight: 700; }
  .as .mm_4run_m-4_all_season_pa_introduction > .ptn_title {
    background: #c91b1d; }
  .as .mn_all_season_master_pa_introduction > .ptn_title {
    background: #fff000; }
  .as .mn_all_season_master_pa_introduction > .ptn_title > h4 .japanese {
    color: #000; }
  .as .dv_alltoura_pa_introduction > .ptn_title, .as .dv_alltoura_ht_pa_introduction > .ptn_title {
    background: #000; }
  .as .rd_dimax_all_season_pa_introduction > .ptn_title {
    background: #333; }
  .as .gy_vector_4seasons_cargo_pa_introduction > .ptn_title, .as .gy_vector_4seasons_gen-3_pa_introduction > .ptn_title, .as .gy_vector_4seasons_gen-3_suv_pa_introduction > .ptn_title, .as .gy_vector_4seasons_hybrid_pa_introduction > .ptn_title {
    background: #08287f; }
  .as #set .wrap {
    background-color: rgba(231, 138, 20, 0.5);
    padding: 10px;
    margin-bottom: 50px;
    box-sizing: border-box; }
  .as #set .wrap nav {
    margin-bottom: 20px; }
  .as #set .wrap nav ul li a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    margin-bottom: 10px; }
  .as #set .wrap nav ul li a .fukidashi {
    width: 50%;
    background-color: #ee7500;
    border-radius: 10px;
    font-size: 4.6vw;
    text-align: center;
    padding: 1em 0;
    line-height: 1; }
  .as #set .wrap nav ul li:nth-of-type(even) a .fukidashi {
    order: 2; }
  .as #set .wrap nav ul li a img {
    width: 50%; }
  .as #set .wrap nav ul li:nth-of-type(odd) a img {
    transform: translateX(-5%); }
  .as #set .wrap nav ul li:nth-of-type(even) a img {
    order: 1;
    transform: translateX(5%); }
  .as #set .wrap > small {
    background-color: #fff;
    color: #e11a14;
    text-align: center;
    display: block;
    border-radius: 4em;
    padding: 0.5em 0;
    margin-bottom: 50px;
    font-size: 13px; }
  .as #set .wrap > small::before {
    content: '※'; }
  .as #set .wrap > small span {
    display: block;
    color: #000;
    width: 16em;
    margin: 5px auto;
    position: relative; }
  .as #set .wrap > small span::after {
    content: '';
    position: absolute;
    right: -2em;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    height: 2em;
    background: url("/asp/photo/auction/lp/allseason/img/icon_movie_as.png") center / contain no-repeat; }
  .as #set .wrap h4 {
    text-align: center;
    color: #fff;
    background-color: #ee7500;
    border-radius: 10px;
    font-weight: bold;
    font-size: 20px;
    padding: 0.5em 0;
    margin-bottom: 10px; }
  .as #set .wrap h4 small {
    display: block;
    font-size: 12px; }
  .as #set .wrap .set_box {
    background-color: #fff;
    border-bottom: 5px solid #f28f1b;
    margin-bottom: 20px;
    padding: 10px 10px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; }
  .as #set .wrap .set_box h5 {
    text-align: center;
    border: 3px solid #ee7500;
    color: #ee7500;
    width: 100%;
    line-height: 1;
    padding: 0.5em 0;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px; }
  .as #set .wrap .set_box .detail {
    width: 42%;
    font-size: 3.6vw;
    color: #231815;
    font-weight: bold;
    text-align: left;
    background: #fff; }
  .as #set .wrap .set_box .detail dl {
    margin-bottom: 20px; }
  .as #set .wrap .set_box .img_price {
    width: 58%; }
  .as #set .wrap .set_box .img_price .price {
    font-family: 'Oswald', sans-serif;
    color: #d6000f;
    font-size: 11.2vw;
    display: block;
    text-align: center;
    font-weight: 500; }
  .as #set .wrap .set_box a {
    color: #fff;
    background-color: #d6000f;
    display: block;
    text-align: center;
    border-radius: 1em;
    padding: 0.5em 0;
    width: 100%;
    font-weight: bold;
    font-size: 20px; }
  .as #set .wrap .set_box a span {
    margin-left: 0.5em; }
  .as #size {
    padding: 0 10px; }
  .as #size nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px; }
  .as #size nav ul li {
    width: 24%;
    border: 3px solid #e78a14;
    border-radius: 10px;
    font-weight: bold;
    font-size: 10vw;
    text-align: center;
    box-sizing: border-box;
    line-height: 1;
    margin-right: 1%;
    margin-bottom: 1%;
    color: #231815;
    padding: 0.3em 0; }
  .as #size nav ul li.active {
    background-color: #e78a14;
    color: #fff; }
  .as #size nav ul li span {
    display: block;
    font-size: 4vw; }
  .as #size table {
    width: 100%;
    line-height: 1;
    margin-bottom: 30px;
    display: none;
    font-size: 4.7vw; }
  .as #size table.active {
    display: table; }
  .as #size table thead {
    background-color: #e78a14;
    color: #fff;
    font-weight: bold; }
  .as #size table th, .as #size table td {
    padding: 0.5em 0; }
  .as #size table .oblateness {
    border-right: 5px solid #fff;
    width: 4em; }
  .as #size table tbody .oblateness {
    color: #231815;
    font-weight: bold; }
  .as #size table tbody tr:nth-of-type(even) {
    background-color: #dcdddd; }
  .as #size table tbody .size a {
    color: #231815;
    border: 1px solid rgba(35, 24, 21, 0.5);
    border-radius: 1em;
    padding: 0.3em 0.8em;
    margin: 0.3em;
    display: inline-block; }
  .as #pagetop {
    display: none; }
  .as .page_top {
    background-color: #f29e18;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
    font-size: 14px;
    box-shadow: 2px 2px 2px #b95d1e;
    z-index: 100; }
  .as .page_top span {
    display: block;
    text-align: center;
    font-size: 16px; }
  .as footer nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
  .as footer a {
    color: #fff;
    font-size: 14px;
    padding: 0.5em 1em;
    border-radius: 2em;
    margin: 0.5em;
    display: block; }
  .as #search_size {
    background-color: #e40613;
    color: #fff;
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 4px 8px;
    z-index: 100;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 2px 2px 2px #af0811;
    transition: 0.3s; }
  .as .search_size_btn.is-fixed #search_size {
    position: fixed;
    bottom: 70px;
    animation: fadeIn 0.3s; }
  @keyframes fadeIn {
  .as 0% {
    opacity: 0; }
  .as 100% {
    opacity: 1; } }
  .as #search_size span {
    font-size: 10px;
    display: block; }
  .as .modal_area {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000000; }
  .as .modal_area::after {
    content: '×';
    position: absolute;
    right: 10px;
    top: 10px;
    color: #fff;
    font-weight: 900;
    font-size: 18px;
    line-height: 18px;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer; }
  .as .modal_area > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1280px;
    height: 80vh;
    max-height: 720px; }
  .as #search_tab {
    padding: 3px;
    margin: 65px auto 0;
    width: 95%;
    max-width: 960px; }
  .as #search_tab nav {
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    align-items: flex-end; }
  .as #search_tab nav > div {
    flex-basis: 49%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 7px 7px 0 0;
    height: 50px;
    cursor: pointer;
    padding-bottom: 7px; }
  .as #search_tab nav > div.single {
    background-color: #f81;
    top: 7px; }
  .as #search_tab nav > div.single.select {
    flex-basis: 60%;
    height: 75px;
    position: relative; }
  .as #search_tab nav > div.single.select:before {
    position: absolute;
    content: "";
    background: url("/asp/photo/auction/lp/allseason/img/select_tab.png") no-repeat;
    background-size: contain;
    top: -6vw;
    width: 66%;
    height: 5vw;
    animation: 0.4s ease-in-out 0s infinite alternate forwards running grade_on; }
  .as #search_tab nav > div.set {
    position: relative;
    background-color: #008cce;
    color: #fff;
    top: 7px; }
  .as #search_tab nav > div.set .block {
    display: block;
    font-size: 0.9em; }
  .as #search_tab nav > div.set.select {
    flex-basis: 60%;
    height: 75px;
    position: relative; }
  .as #search_tab nav > div.set.select:before {
    content: "";
    background: url("/asp/photo/auction/lp/allseason/img/select_tab.png") no-repeat;
    background-size: contain;
    width: 66%;
    top: -6vw;
    height: 5vw;
    position: absolute;
    animation: 0.4s ease-in-out 0s infinite alternate forwards running grade_on; }
  .as #search_tab > div.single, .as #search_tab > div.set {
    display: none; }
  .as #search_tab > div.single.select, .as #search_tab > div.set.select {
    display: block; }
  .as .sustudless #search_tab > .single {
    box-sizing: border-box; }
  .as #search_tab > .single > section {
    background-color: #fff; }
  .as #search_tab > .single > section:nth-child(1) {
    border-radius: 7px 7px 0 0;
    position: relative; }
  .as #search_tab > .single .maker {
    border: 3px solid #ff8100;
    border-bottom: none; }
  .as #search_tab > .single .maker a {
    display: block;
    text-align: right; }
  .as #search_tab > .single .maker a:hover::after {
    display: none; }
  .as #search_tab > .single .maker a > span {
    background-color: #d6000f;
    display: inline-block;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    padding: 10px 20px;
    margin-right: 5px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
  .as #search_tab .single h4 {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    padding: 15px 0; }
  .as #search_tab .single h4 span {
    background-color: #ff8810;
    padding: 10px;
    display: block;
    font-size: 14px; }
  .as #search_tab > .single .size {
    border: 3px solid #ff8810;
    text-align: left; }
  .as #search_tab > .single .size > a {
    display: block;
    text-align: right; }
  .as #search_tab > .single .size > a::after {
    display: none; }
  .as #search_tab > .single .size > a:hover::after {
    display: none; }
  .as #search_tab > .single .size > a > span {
    background-color: #d6000f;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    padding: 10px 20px;
    margin-right: 5px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
  .as #search_tab > .set {
    box-sizing: border-box; }
  .as #search_tab > .set > section {
    background-color: #fff; }
  .as #search_tab > .set > section:nth-child(1) {
    border-radius: 7px 7px 0 0;
    position: relative; }
  .as #search_tab > .set .maker {
    border: 3px solid #008cce;
    border-bottom: none;
    border-top: 3px solid #008cce; }
  .as #search_tab > .set .maker > a {
    display: block;
    text-align: left; }
  .as #search_tab > .set .maker > a > span {
    position: relative;
    background-color: #114199;
    display: inline-block;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    padding: 10px 20px;
    margin-left: 5px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
  .as #search_tab .set h4 {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    padding: 15px 0; }
  .as #search_tab .set h4 > span {
    display: block;
    background-color: #008cce;
    color: #fff;
    padding: 10px;
    font-size: 14px; }
  .as #search_tab .set h4 > span .block {
    display: block; }
  .as #search_tab > .set .size {
    border: 3px solid #008cce;
    text-align: left; }
  .as #search_tab > .set .size > a {
    display: block;
    text-align: left; }
  .as #search_tab > .set .size > a > span {
    background-color: #114199;
    display: inline-block;
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    padding: 10px 20px;
    margin-left: 5px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
  .as #search_tab .size > p {
    padding: 10px;
    font-weight: bold; }
  .as #search_tab .size > p > a {
    color: #00e; }
  .as #search_tab .size > p > a::after {
    display: none; }
  .as #search_tab .size .inch_list, .as #search_tab .size .size_list {
    font-size: 16px; }
  .as #search_tab .size .inch_list > li {
    border: 1px solid #4d4d4d;
    border-radius: 7px;
    padding: 10px;
    font-weight: bold;
    margin: 5px 6px;
    display: inline-block;
    cursor: pointer; }
  .as #search_tab .size .inch_list > li.select {
    background-color: #b7282d; }
  .as #search_tab .size .inch_list > li > span {
    color: #666; }
  .as #search_tab .size .inch_list > li.select > span {
    color: #fff; }
  .as #search_tab .size .inch_list > li > span:nth-of-type(1) {
    font-size: 1.6em;
    vertical-align: middle; }
  .as #search_tab .size .size_list {
    margin: 0 8px; }
  .as #search_tab .size .size_list > table {
    width: 100%;
    display: none; }
  .as #search_tab .size .size_list > table.select {
    display: table; }
  .as #search_tab .size .size_list > table th:nth-of-type(1) {
    width: 15%; }
  .as #search_tab .size .size_list > table > thead > tr > th {
    background-color: #123078;
    color: #fff;
    text-align: center; }
  .as #search_tab .size .size_list > table > tbody > tr:nth-child(even) {
    background-color: #f3f3f3; }
  .as #search_tab .size .size_list > table > tbody > tr > th {
    color: #123078;
    text-align: center; }
  .as #search_tab .size .size_list > table > tbody ul > li {
    display: inline-block;
    border: 1px solid #123078;
    border-radius: 18px;
    padding: 5px 10px;
    margin: 7px 8px; }
  .as #search_tab .size .size_list > table > tbody ul > li > a {
    color: #123078;
    text-align: center; }
  .as #search_tab .maker > p {
    padding: 10px;
    font-weight: bold; }
  .as #search_tab .maker > p br {
    display: none; }
  .as #search_tab .maker > ul {
    background-color: #f3f3f3;
    padding: 15px 0 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
  .as #search_tab .maker > ul > li {
    display: inline-block;
    border: 2px solid #ff8810;
    margin: 5px 4px;
    box-shadow: 0px 0px 5px #ff8810;
    border-radius: 5px;
    overflow: hidden;
    line-height: 0; }
  .as #search_tab .maker > ul > li > a {
    display: block;
    background-color: #fff; }
  .as #search_tab .set .maker > ul > li {
    border: 2px solid #008cce;
    margin: 5px 4px;
    box-shadow: 0px 0px 5px #008cce; }
  .as .video {
    overflow: hidden;
    max-width: 960px;
    margin: 20px auto; }
  .as .video .text {
    margin: 0; }
  .as .video .text > img {
    width: 95%;
    margin: 0 auto 10px;
    display: block; }
  .as .video .text > p {
    text-align: center;
    font-weight: 500;
    color: #000;
    margin-bottom: 20px;
    font-size: 4vw; }
  .as .video .text > p:nth-of-type(2) {
    background-color: #ff7624;
    color: #fff;
    padding: 0.5em 0;
    width: 16em;
    margin: 0 auto 20px;
    padding-right: 1em;
    font-weight: 700;
    position: relative; }
  .as .video .text > p:nth-of-type(2)::after {
    content: '';
    background: url("/asp/photo/auction/lp/allseason/img/sp_movie_arrow.png") center/cover no-repeat;
    width: 1.4em;
    height: 1.3em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.5em; }
  .as .video > div > div {
    margin: 0 auto 50px;
    position: relative;
    padding-top: 56.25%;
    width: 95%; }
  .as .video > div > div > iframe {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4); }
  .as section.info {
    background-color: #eff6fc;
    text-align: center;
    padding-bottom: 15px;
    width: 100%;
    max-width: none; }
  .as section.info > h3 {
    font-size: 1.1em;
    background: #666;
    color: #fff;
    margin-bottom: 0; }
  .as section.info > p {
    font-size: 0.8em;
    padding: 15px 0; }
  .as section.info > address > a {
    display: block;
    color: #122f73;
    font-size: 1.8em;
    font-weight: bold;
    font-style: initial; }
  .as footer nav {
    background-color: #555;
    text-align: center;
    padding: 20px;
    margin: 0; }
  .as footer nav a {
    color: #fff;
    text-decoration: none;
    font-size: 16px; }
  .as footer nav a::after {
    display: none; }
  .as footer nav li {
    display: inline-block; }
  .as footer nav li:first-child {
    padding: 5px 10px;
    background-color: #555559;
    border-radius: 5px; }
  @media screen and (min-width: 768px) {
  .as h1 {
    background: url("/asp/photo/auction/lp/allseason/img/pc_header.jpg") center / cover no-repeat; }
    .as .header_top {
      max-width: 1366px;
      margin: 0 auto;
      display: block;
      width: 100%; }

    .as .fox {
      padding: 10px 10px;
      background-color: rgba(255, 255, 255, 0.8);
      box-sizing: border-box; }

    .as .serch_nav {
      width: 100%; }

    .as .serch_nav.fix {
      right: 0;
      width: 95%; }

    .as .serch_nav > li {
      width: 24%;
      display: block;
      margin: 0 auto; }

    .as .serch_nav.fix > li {
      width: 24%;
      display: block;
      margin: 0 auto;
      transform: skewX(-10deg); }

    .as #search_tab nav > div {
      font-size: 17px; }

    .as .serch_nav > li > a {
      font-size: 2vw;
      border-radius: 10px;
      z-index: 0;
      position: relative;
      color: white;
      text-decoration: none;
      /* 擬似要素のはみ出しを隠す */
      overflow: hidden; }

    .as .serch_nav.fix > li > a {
      font-size: 1.9vw;
      border-radius: 10px;
      z-index: 0;
      position: relative;
      color: white;
      text-decoration: none;
      /* 擬似要素のはみ出しを隠す */
      overflow: hidden; }

    .as .serch_nav > li > a::after {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ff8810;
      transform-origin: right top;
      transform: scale(0, 1);
      transition: transform 0.3s; }

    .as a:hover::after {
      transform-origin: left top;
      transform: scale(1, 1); }

    .as .serch_nav > li > a:hover::after {
      transform-origin: left top;
      transform: scale(1, 1); }

    .as .text {
      font-size: 3.4vw; }

    .as .navbox > a::after {
      content: none; }

    .as .overview > .tire-container {
      display: flex;
      margin: 0 auto;
      width: 100%;
      box-sizing: border-box;
      margin-bottom: 100px; }

    .as .left-image {
      width: 75%;
      display: block; }

    .as .left-image img {
      width: 100%;
      display: block; }

    .as .right-image {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between; }

    .as .tire-container > .right-image > p {
      text-align: justify;
      margin: 0 0 0 10px; }
      .as .tire-container > .right-image > p br {
        display: none; }

    .as .tire-container > .right-image > p > .br {
      display: initial; }

    .as .important_one {
      font-size: 2vw;
      text-align: justify; }

    .as .important_two {
      background: rgba(243, 149, 24, 0.5);
      font-size: 1.7vw;
      padding: 10px;
      line-height: 1.7;
      border-radius: 10px;
      text-align: justify; }

    .as .right-image > a {
      width: 65%;
      font-size: 1.9vw;
      margin: 2.2vw auto 0vw;
      padding: 2vw; }

    .as .advantage > .flex {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 0 auto;
      width: 100%; }

    .as .advantage > .flex > li {
      width: 32%; }

    .as .advantage > .flex > li > .merit > dt, .as .advantage > .flex > li > .merit > dd > p {
      font-size: 1.5vw; }

    .as .advantage > .flex > li > .merit > dt {
      width: 100%; }

    .as .advantage > .flex > li > .merit > dd {
      height: 18vw;
      width: 100%;
      box-sizing: border-box;
      margin: 0 auto; }

    .as .point-box {
      position: relative;
      margin-bottom: 130px; }

    .as .point-box > p {
      text-align: center;
      font-size: 1.9vw;
      line-height: 1.5;
      font-weight: 500;
      margin: 0 auto; }
      .as .point-box > p br {
        display: none; }

    .as .point-box img {
      position: absolute;
      width: 5.5vw;
      left: 12vw;
      bottom: 0; }

    .as #br {
      display: initial; }

    .as .table-wrapper {
      font-size: 2vw;
      justify-content: center;
      margin: 0 auto; }

    .as .right-table {
      width: auto;
      overflow-x: initial; }

    .as .left-table th {
      font-size: 2vw; }

    .as .left-table th, .as .header-table td, .as .header-table th {
      min-width: 12vw; }

    .as .comparison ol {
      margin-top: 0; }

    .as .comparison {
      font-size: 1.8vw; }

    .as .wrong {
      font-size: 1.6vw;
      padding: 10px auto;
      margin: 15px auto;
      box-sizing: border-box; }

    .as .attention {
      font-size: 1.45vw;
      padding-left: 4vw; }

    .as .comparison ol {
      margin-top: 0; }

    .as .wrong {
      font-size: 1.45vw;
      padding: 10px;
      width: 100%;
      padding-left: 10px; }

    .as .snowmark {
      margin: 0 auto;
      border: 3px solid #ff8100;
      width: 100%;
      padding: 10px 0 10px 0;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px; }

    .as .snowmark > .info {
      padding-top: 10px;
      margin-left: 19px; }

    .as .features {
      display: flex;
      flex-wrap: wrap;
      width: 85%;
      margin-left: 10px;
      flex-direction: column;
      justify-content: center; }

    .as .features > .snowsubhead > p {
      font-size: 2.5vw;
      font-weight: 900;
      text-align: left; }

    .as .snowsubhead > p > span {
      font-size: 15px; }

    .as .snowmark > div > img {
      height: 8.7vw;
      margin-top: 0; }

    .as .mark > p {
      text-align: left;
      font-size: 1.7vw; }
      .as .mark > p br {
        display: none; }

    .as .mark > p > .br {
      display: initial; }

    .as section > .subheading {
      font-size: 3.4vw; }

    .as section > .subheading > small {
      font-size: 2.1vw; }

    .as .itemlist {
      display: flex;
      gap: 10px; }

    .as .pick_item {
      padding: 0;
      width: 50%;
      margin: 0 auto; }

    .as .pickup_brand .ptn {
      display: flex;
      height: 110px;
      align-items: center; }

    .as .ptn > div > .brand {
      font-size: 4vw; }

    .as .minerva > .ptn > div > .brand {
      color: #000;
      transform: skewX(-10deg);
      font-size: 4vw; }

    .as .minerva > small {
      color: #000; }

    .as .sp {
      display: initial; }

    .as .brandbox {
      color: #fff;
      width: 58%;
      max-width: 260px;
      margin: 0 auto 0 3%; }

    .as .pickup_brand small {
      font-size: 1.5vw;
      display: block;
      text-align: center;
      padding-left: 0;
      padding-top: 0;
      color: #fff; }

    .as .minerva > small {
      color: #000; }

    .as .logo {
      padding: 0;
      width: 40%;
      margin: 3% 2% 0 2%; }

    .as .davanti > .logo {
      margin: 0 0 0 2%;
      width: 30%; }

    .as .ptn > div > .brand {
      width: auto;
      margin: 0;
      text-align: left;
      line-height: 1; }

    .as .momo > .brandbox > .brand {
      display: flex;
      height: 6vw;
      flex-wrap: wrap;
      align-items: center; }

    .as .davanti > .brandbox > .brand {
      width: auto;
      margin: 0; }

    .as .davanti > .brandbox > small {
      padding-top: 0px; }

    .as .detail {
      font-size: 1.45vw;
      padding-top: 10px; }

    .as .detail > div > p {
      margin: 0px 0 10px 10px;
      text-align: left;
      padding: 0.3em 0.5em;
      font-weight: 900;
      font-size: 1.8vw; }

    .as .flexbox {
      padding-bottom: 0;
      justify-content: center; }

    .as .flex_text {
      width: initial;
      height: 14.5vw;
      text-align: justify;
      line-height: 1.9; }

    .as .goods-item1 {
      order: 2; }

    .as .goods-item1 > .tire {
      height: 25vw;
      margin: 0 auto; }

    .as .performance {
      order: 1;
      width: 24vw; }

    .as .equaltwo {
      width: 40%; }

    .as .learn {
      font-size: 2.1vw;
      width: 70%;
      margin-top: 10px;
      padding: 5px 0;
      margin: 10px auto; }

    .as .serchbox {
      padding: 0;
      margin-bottom: 70px; }

    .as .serchbox > li {
      width: 20%;
      display: block; }

    .as .navbox:nth-of-type(6) {
      margin: 0; }

    .as .over img {
      transition: transform 0.3s ease; }

    .as .navbox a:hover .over img {
      transform: translateY(-13px); }

    .as .over {
      height: 25vw;
      overflow: hidden;
      padding-top: 10vw; }

    .as .imagewidth {
      width: auto;
      height: 11.8vw;
      overflow: hidden; }

    .as .tirefront {
      margin-top: 15px; }

    .as .img-container span {
      background: black;
      color: #fff;
      border-radius: 15px;
      width: 9em;
      display: block;
      margin: 0 auto;
      z-index: 1;
      position: relative;
      top: -15vw;
      font-size: 1.5vw;
      font-weight: 900;
      padding: 2px; }

    .as .img-container {
      width: 15vw;
      display: block;
      z-index: -1;
      padding-bottom: 2px;
      height: 23vw;
      margin: 0 auto;
      position: relative; }

    .as .mm_4run_m-4_all_season_pa > .img-container {
      background: linear-gradient(to bottom, #fff 70%, #e7141a 70%); }

    .as .mn_all_season_master_pa > .img-container {
      background: linear-gradient(to bottom, #fff 70%, #fff000 70%); }

    .as .dv_alltoura_ht_pa > .img-container, .as .dv_alltoura_pa > .img-container {
      background: linear-gradient(to bottom, #fff 70%, #ff8100 70%); }

    .as .gy_vector_4seasons_pa > .img-container, .as .gy_vector_4seasons_hybrid_pa > .img-container, .as .gy_vector_4seasons_gen-3_pa > .img-container, .as .gy_vector_4seasons_gen-3_suv_pa > .img-container, .as .gy_vector_4seasons_cargo_pa > .img-container {
      background: linear-gradient(to bottom, #fff 70%, #023894 70%); }

    .as .serch_nav_logo {
      width: 15vw;
      margin: 0 auto;
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      top: 0vw; }

    .as .mm_4run_m-4_all_season_pa .serch_nav_logo {
      width: 10vw;
      top: 10px; }

    .as .mn_all_season_master_pa > .img-container > .serch_nav_logo {
      top: 2vw; }

    .as .dv_alltoura_ht_pa .serch_nav_logo, .as .dv_alltoura_pa .serch_nav_logo {
      width: 15vw;
      top: 0vw; }

    .as .rd_dimax_all_season_pa .serch_nav_logo {
      top: 22px;
      width: 90%; }

    .as .mm_4run_m-4_all_season_pa .ptn_logo {
      padding-top: 3px;
      width: 13vw; }

    .as .mn_all_season_master_pa .ptn_logo {
      padding-top: 10px;
      width: 13vw; }

    .as .dv_alltoura_ht_pa .ptn_logo {
      width: 16vw;
      margin-top: 1px; }

    .as .dv_alltoura_pa .ptn_logo {
      width: 16vw; }

    .as .rd_dimax_all_season_pa .ptn_logo {
      width: 15vw; }

    .as .gy_vector_4seasons_pa .ptn_logo {
      width: 14vw; }

    .as .gy_vector_4seasons_hybrid_pa .ptn_logo, .as .gy_vector_4seasons_gen-3_pa .ptn_logo, .as .gy_vector_4seasons_gen-3_suv_pa .ptn_logo, .as .gy_vector_4seasons_cargo_pa .ptn_logo {
      width: 15vw; }

    .as .foreword {
      padding: 0 96px; }

    .as .introduction {
      border: 1px solid;
      width: 100%;
      position: relative; }

    .as .headtitle {
      display: flex; }

    .as .maker_logo {
      margin: 0;
      display: block;
      padding-left: 19.2px;
      width: 22%;
      position: absolute;
      padding-top: 0; }

    .as .headtitle > .ptn_logo {
      margin: 0;
      display: block;
      width: initial;
      margin: 0 auto;
      padding-top: 30px; }

    .as .mm_4run_m-4_all_season_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo {
      width: 16%;
      padding-top: 10px; }

    .as .mm_4run_m-4_all_season_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 7vw; }

    .as .mn_all_season_master_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 5vw;
      display: block; }

    .as .dv_alltoura_ht_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 5vw;
      padding-left: 9vw;
      display: block; }

    .as .dv_alltoura_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 4vw;
      display: block;
      padding-left: 3vw; }

    .as .mn_all_season_master_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo {
      padding-top: 2vw; }

    .as .gy_vector_4seasons_hybrid_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 6vw;
      padding-left: 7vw; }

    .as .gy_vector_4seasons_gen-3_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 7vw;
      padding-left: 4vw; }

    .as .gy_vector_4seasons_gen-3_suv_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo, .as .gy_vector_4seasons_cargo_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 7vw;
      padding-left: 9vw; }

    .as .gy_vector_4seasons_cargo_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 8vw; }

    .as .rd_dimax_all_season_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 4.5vw;
      padding-top: 35px; }

    .as .gy_vector_4seasons_gen-3_suv_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo, .as .gy_vector_4seasons_cargo_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo, .as .gy_vector_4seasons_hybrid_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo, .as .gy_vector_4seasons_gen-3_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo {
      padding-top: 3vw; }

    .as .description > dl > dt {
      font-size: 2.1vw;
      text-align: left;
      margin-left: 10px; }

    .as .description > dl > dd {
      font-size: 1.5vw; }

    .as .textsize span {
      font-size: 1.4vw;
      padding: 0.3em 0.8em; }

    .as .ptn_top {
      display: flex; }

    .as .description {
      width: 60%; }

    .as .ptn_top > .size {
      width: 48%;
      margin-bottom: 0; }

    .as .number {
      font-size: 3.2vw; }

    .as .flex {
      width: 48%;
      gap: 0;
      justify-content: initial;
      flex-wrap: initial;
      margin: 0 10px; }

    .as .arrow {
      font-size: 1.2vw;
      margin: 0 1vw; }

    .as .smallbox {
      display: flex;
      width: 100%;
      margin-left: 2.2vw; }

    .as .textsize span {
      border-radius: 15px; }

    .as .certification {
      height: 27vw;
      width: 80%;
      margin-top: 0; }

    .as .certification > img {
      height: initial; }

    .as .ptn_top > a {
      position: absolute;
      font-size: 2.1vw;
      padding: 10px 0;
      margin: 0;
      width: 30%;
      bottom: 2vw;
      left: 11vw; }

    .as .ptn_top > a::after {
      display: none; }

    .as .item_box > button {
      font-size: 2.1vw;
      background: #c91b1d;
      border: none;
      color: white;
      font-weight: 700; }

    .as .japan {
      display: inline; }

    .as .japanese {
      font-size: 1.5vw;
      padding-top: 10px; }

    .as .search_size > dl {
      display: flex; }

    .as .search_size > dl > dt {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 30%; }

    .as .search_size > dl > dd {
      width: 70%; }

    .as .search_size > dl > dd > ol {
      height: 40px;
      position: relative; }

    .as .search_size > dl > dd > ol > li {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 15px;
      transition: 0.3s; }

    .as .search_size > dl > dd > ol > li:hover {
      background-color: #f18d01;
      /*
	.search_size>dl.search_set>dt,
	.search_size_at>dl.search_set>dt,
	.search_size_at_ht>dl.search_set>dt
	.search_size_vector4seasons_hybrid>dl.search_set>dt {
		display: block;
	}

	.search_size>dl.search_set>dt>span,
	.search_size_at>dl.search_set>dt>span,
	.search_size_at_ht>dl.search_set>dt>span,
	.search_size_vector4seasons_hybrid>dl.search_set>dt>span {
		display: block;
		line-height: 1em;
	}
*/ }

    .as .search_size > dl > dd > ol > li > a {
      font-size: 1.4em;
      transition: 0.3s; }

    .as .search_size > dl > dd > ol > li:hover > a {
      color: #fff; }

    .as #set .wrap {
      padding: 30px 20px; }

    .as #set .wrap nav ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start; }

    .as #set .wrap nav ul li {
      width: 23%; }

    .as #set .wrap nav ul li a::after {
      display: none; }

    .as #set .wrap nav ul li a {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-weight: bold;
      margin-bottom: 10px;
      transition: 0.3s; }

    .as #set .wrap nav ul li a:hover {
      transform: translateY(10px); }

    .as #set .wrap nav ul li a .fukidashi {
      width: 100%;
      font-size: 2.2vw;
      margin-bottom: 10px; }

    .as #set .wrap nav ul li:nth-of-type(even) a .fukidashi {
      order: 1; }

    .as #set .wrap nav ul li a img {
      width: 100%; }

    .as #set .wrap nav ul li:nth-of-type(odd) a img {
      transform: translateX(0); }

    .as #set .wrap nav ul li:nth-of-type(even) a img {
      order: 2;
      transform: translateX(0); }

    .as #set .wrap > small {
      width: 34em;
      margin: 0 auto 50px; }

    .as #set .wrap > small br {
      display: none; }

    .as #set .wrap > small span {
      display: inline-block;
      margin: 0 1em;
      cursor: pointer; }

    .as #set .wrap h4 {
      font-size: 24px;
      width: 100%; }

    .as #set .wrap > section {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start; }

    .as #set .wrap .set_box {
      width: 49%;
      box-sizing: border-box; }

    .as #set .wrap .set_box .detail {
      font-size: 1.7vw;
      height: 26vw; }

    .as #set .wrap .set_box .img_price .price {
      font-size: 5.5vw; }

    .as #set .wrap .set_box a:hover {
      opacity: 0.7; }

    .as #size nav ul {
      margin-bottom: 50px; }

    .as #size nav ul li {
      width: 13.4%;
      font-size: 6vw;
      margin-bottom: 0;
      cursor: pointer;
      transition: 0.3s; }

    .as #size nav ul li:hover {
      background-color: #e78a14;
      color: #fff; }

    .as #size nav ul li:last-of-type {
      margin-right: 0; }

    .as #size nav ul li span {
      font-size: 2vw; }

    .as #size table {
      font-size: 2.9vw; }

    .as #size table td {
      padding: 0.3em 0; }

    .as #size table .oblateness {
      border-right: 5px solid #fff;
      width: 4em; }

    .as #size table tbody .size a {
      margin: 0.3em 0 0.3em 0.3em;
      transition: 0.3s; }

    .as #size table tbody .size a:hover {
      background-color: #e78a14;
      color: #fff;
      border: 1px solid #e78a14; }

    .as #search_size {
      bottom: -210px;
      font-size: 16px;
      padding: 8px 16px; }

    .as #search_size span {
      font-size: 14px; }

    .as .top_nav ul li a {
      font-size: 1.8em; }

    .as .search_nav {
      margin: 0 0 30px; }

    .as .search_nav ul li:nth-of-type(3) a {
      font-size: 1.1em; }

    .as #pickup .item_title h4 {
      height: 135px; }

    .as #pickup .item_title h4 .logo {
      height: 60px; }

    .as #pickup .item_title h4 .ptn {
      font-size: 20px;
      height: 72px; }

    .as #pickup .mm_4run_m4_all_season .item_title h4 .ptn img {
      height: 50px; }

    .as #pickup .item_title h4 .ptn small {
      height: 19px; }

    .as #pickup .item_title h4 .inch {
      font-size: 20px; }

    .as #pickup .item_detail {
      height: 395px; }

    .as #pickup .item_detail .item_img {
      height: 385px;
      padding-top: 10px; }

    .as #pickup .pick_item:first-of-type .item_detail .item_img img {
      transform: translateX(-40px); }

    .as #pickup .pick_item:last-of-type .item_detail .item_img img {
      transform: translateX(40px); }

    .as #pickup .item_detail .text_btn p {
      font-size: 15px;
      margin-top: 30px; }

    .as #pickup .item_detail .btn .link_review {
      font-size: 20px; }

    .as #pickup .item_detail .btn .link_page {
      font-size: 26px;
      margin-bottom: 10px; }

    .as .as_master_top {
      height: 260px; }

    .as .certification > img, .as .certification_ht > img {
      margin-top: 15px; }

    .as .certification > div, .as .certification_ht > div {
      display: flex;
      justify-content: center;
      top: 180px;
      left: calc(50% - 262px);
      width: 500px; }

    .as .modaal-content-container > img {
      width: auto; }

    .as .certification > div > ul, .as .certification_ht > div > ul {
      width: 100%; }

    .as .certification > div > ul > li > img, .as .certification_ht > div > ul > li > img {
      width: 50px; }

    .as #set .wrap .set_box .img_price .price {
      font-size: 53px; }

    .as #size nav ul li {
      font-size: 58px; }

    .as #size nav ul li span {
      font-size: 19px; }

    .as #size table {
      font-size: 28px; }

    .as #search_size {
      right: calc(50% - 470px); }

    .as .search_size_btn.is-fixed #search_size {
      right: 10px; }

    .as #search_tab nav > div.single.select:before {
      position: absolute;
      content: "";
      background-size: contain;
      top: -40px;
      width: 50%;
      height: 37px;
      animation: 0.4s ease-in-out 0s infinite alternate forwards running grade_on; }

    .as #search_tab nav > div.set.select:before {
      content: "";
      background-size: contain;
      width: 50%;
      top: -40px;
      height: 37px;
      position: absolute;
      animation: 0.4s ease-in-out 0s infinite alternate forwards running grade_on; }

    .as #search_tab .single h4 span {
      font-size: 16px; }

    .as #search_tab .set h4 > span {
      font-size: 16px; }

    .as .video {
      margin-top: 30px; }

    .as .video .text {
      width: 50%;
      float: left;
      margin: 0; }

    .as .video .text > p {
      font-size: 1.8vw; }

    .as .video .text > p:nth-of-type(2) {
      padding-right: 2em; }

    .as .video .text > p:nth-of-type(2)::after {
      background: url("/asp/photo/auction/lp/allseason/img/pc_movie_arrow.png") center/cover no-repeat;
      width: 2.4em; }

    .as .video > div > div {
      width: 48%;
      padding-top: 26.25%;
      float: right;
      margin-right: 2%; } }
  @media screen and (min-width: 960px) {
  .as .serch_nav > li {
    width: 24%; }
    .as .serch_nav > li > a {
      font-size: 19px;
      border-radius: 10px; }

    .as .serch_nav.fix > li > a {
      font-size: 19px;
      border-radius: 10px; }

    .as a {
      font-size: 19px;
      border-radius: 10px;
      z-index: 0;
      position: relative;
      color: white;
      text-decoration: none;
      /* 擬似要素のはみ出しを隠す */
      overflow: hidden; }

    .as header .breadcrumb a {
      font-size: 14px; }

    .as .mn_all_season_master_pa > .img-container > .serch_nav_logo {
      top: 20px; }

    .as .text {
      font-size: 35px; }

    .as .overview > .tire-container {
      display: flex;
      margin: 0 auto;
      width: 100%;
      box-sizing: border-box; }

    .as .left-image {
      width: 75%;
      display: block; }

    .as .left-image img {
      width: 100%;
      display: block; }

    .as .right-image {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between; }

    .as .tire-container > .right-image > p {
      text-align: justify; }
      .as .tire-container > .right-image > p br {
        display: none; }

    .as .important_one {
      font-size: 19px;
      text-align: justify; }

    .as .important_two {
      background: rgba(243, 149, 24, 0.5);
      font-size: 16px;
      padding: 10px;
      line-height: 1.7;
      border-radius: 10px;
      text-align: justify; }

    .as .right-image > a {
      width: 65%;
      font-size: 18px;
      margin: 25px auto 0vw;
      padding: 22px; }

    .as .advantage > .flex {
      /* gap: 20px; */
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }

    .as .advantage > .flex > li {
      width: 32%; }

    .as .advantage > .flex > li > .merit > dt, .as .advantage > .flex > li > .merit > dd > p {
      font-size: 14px;
      width: 100%; }

    .as .advantage > .flex > li > .merit > dd {
      height: 172px; }

    .as .point-box {
      position: relative; }

    .as .point-box > p {
      text-align: center;
      font-size: 18px;
      line-height: 1.5;
      font-weight: 500;
      margin: 0 auto; }
      .as .point-box > p br {
        display: none; }

    .as .point-box img {
      position: absolute;
      width: 52px;
      left: 130px;
      bottom: 0px; }

    .as #br {
      display: initial; }

    .as .table-wrapper {
      font-size: 16px;
      margin-left: 0; }

    .as .left-table th {
      font-size: 16px; }

    .as .attention {
      font-size: 14px;
      padding-left: 30px; }

    .as .wrong {
      font-size: 14px;
      padding: 10px;
      width: 100%;
      padding-left: 10px; }

    .as .snowmark {
      margin: 0 auto;
      border: 3px solid #ff8100;
      width: 100%;
      padding: 10px 0 10px 0;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px; }

    .as .snowmark > .info {
      padding-top: 10px;
      margin-left: 19px; }

    .as .features {
      display: flex;
      flex-wrap: wrap;
      width: 85%;
      margin-left: 10px;
      flex-direction: column;
      justify-content: center; }

    .as .features > .snowsubhead > p {
      font-size: 23px;
      font-weight: 900;
      text-align: left; }

    .as .snowsubhead > p > span {
      font-size: 15px; }

    .as .snowmark > div > img {
      height: 80px;
      margin-top: 0; }

    .as .mark > p {
      text-align: left;
      font-size: 16px; }
      .as .mark > p br {
        display: none; }

    .as .mark > p > .br {
      display: initial; }

    .as section > .subheading {
      font-size: 32px; }

    .as section > .subheading > small {
      font-size: 20px; }

    .as .itemlist {
      display: flex;
      gap: 10px; }

    .as .pick_item {
      padding: 0;
      width: 50%;
      margin: 0 auto; }

    .as .pick_item > .ptn {
      display: flex;
      height: 110px; }

    .as .brandbox small {
      font-size: 13px;
      display: block;
      text-align: initial;
      padding-left: 0;
      padding-top: 0;
      padding-bottom: 0; }

    .as .ptn > div > .brand {
      width: auto;
      margin: 0;
      font-size: 38px; }

    .as .minerva > .ptn > div > .brand {
      width: auto;
      margin: 0;
      font-size: 38px; }

    .as .momo > .brandbox > .brand {
      height: 55px;
      padding-top: 20px; }

    .as .davanti > .brandbox > .brand {
      height: 60px;
      padding-top: 16px; }

    .as .davanti > .brandbox > small {
      padding-top: 0px; }

    .as .detail {
      font-size: 14px; }

    .as .detail > div > p {
      font-size: 15px; }

    .as .flexbox {
      padding-bottom: 0; }

    .as .flex_text {
      width: initial;
      height: 130px; }

    .as .goods-item1 {
      order: 2; }

    .as .goods-item1 > .tire {
      height: 249px; }

    .as .performance {
      order: 1;
      width: 55%; }

    .as .learn {
      font-size: 20px;
      width: 70%;
      margin-top: 10px;
      padding: 5px 0;
      margin: 10px auto; }

    .as .serchbox > li {
      width: 20%;
      display: block;
      margin: 0 auto; }

    .as .over {
      height: 210px;
      overflow: hidden;
      padding-top: 96px; }

    .as .imagewidth {
      width: auto;
      height: 115px;
      overflow: hidden; }

    .as .tirefront {
      margin-top: 15px; }

    .as .img-container span {
      background: black;
      color: #fff;
      width: 9em;
      display: block;
      margin: 0 auto;
      z-index: 1;
      position: relative;
      top: -108px;
      font-size: 14px;
      font-weight: 900; }

    .as .pickup_brand small {
      font-size: 17px; }

    .as .img-container {
      width: 155px;
      display: block;
      z-index: -1;
      padding-bottom: 2px;
      height: 225px;
      margin: 0 auto;
      position: relative; }

    .as .mm_4run_m-4_all_season_pa > .img-container {
      background: linear-gradient(to bottom, #fff 70%, #e7141a 70%); }

    .as .mn_all_season_master_pa > .img-container {
      background: linear-gradient(to bottom, #fff 70%, #fff000 70%); }

    .as .dv_alltoura_ht_pa > .img-container, .as .dv_alltoura_pa > .img-container {
      background: linear-gradient(to bottom, #fff 70%, #ff8100 70%); }

    .as .gy_vector_4seasons_hybrid_pa > .img-container, .as .gy_vector_4seasons_gen-3_pa > .img-container, .as .gy_vector_4seasons_gen-3_suv_pa > .img-container, .as .gy_vector_4seasons_cargo_pa > .img-container {
      background: linear-gradient(to bottom, #fff 70%, #023894 70%); }

    .as .serch_nav_logo {
      width: 135px;
      margin: 0 auto;
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      top: 0vw; }

    .as .mm_4run_m-4_all_season_pa .serch_nav_logo {
      width: 96px;
      top: 15px; }

    .as .dv_alltoura_ht_pa .serch_nav_logo, .as .dv_alltoura_pa .serch_nav_logo {
      width: 130px;
      top: 0; }

    .as .mm_4run_m-4_all_season_pa .ptn_logo, .as .mn_all_season_master_pa .ptn_logo {
      width: 144px; }

    .as .mn_all_season_master_pa .ptn_logo {
      padding-top: 10px; }

    .as .dv_alltoura_ht_pa .ptn_logo, .as .dv_alltoura_pa .ptn_logo, .as .gy_vector_4seasons_gen-3_pa .ptn_logo, .as .gy_vector_4seasons_gen-3_suv_pa .ptn_logo, .as .gy_vector_4seasons_cargo_pa .ptn_logo {
      width: 160px; }

    .as .rd_dimax_all_season_pa .ptn_logo, .as .gy_vector_4seasons_hybrid_pa .ptn_logo {
      width: 130px; }

    .as .foreword {
      padding: 0 96px; }

    .as .introduction {
      border: 1px solid;
      width: 100%;
      position: relative; }

    .as .headtitle {
      display: flex; }

    .as .maker_logo {
      margin: 0;
      display: block;
      padding-left: 19.2px;
      width: 20%;
      position: absolute; }

    .as .headtitle > .ptn_logo {
      margin: 0;
      display: block;
      width: initial;
      height: 76px;
      margin: 0 auto;
      padding-top: 19px; }

    .as .mm_4run_m-4_all_season_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo {
      width: 16%; }

    .as .mm_4run_m-4_all_season_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 74px; }

    .as .mn_all_season_master_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 53px;
      display: block; }

    .as .dv_alltoura_ht_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 52px;
      display: block;
      padding-left: 70px; }

    .as .dv_alltoura_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 45px;
      display: block; }

    .as .mn_all_season_master_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo {
      padding-top: 10px; }

    .as .gy_vector_4seasons_hybrid_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      padding-left: 65px;
      height: 71px; }

    .as .gy_vector_4seasons_gen-3_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      padding-left: 32px;
      height: 76px; }

    .as .gy_vector_4seasons_gen-3_suv_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 71px;
      padding-left: 85px; }

    .as .gy_vector_4seasons_cargo_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      padding-left: 90px;
      height: 80px; }

    .as .rd_dimax_all_season_pa_introduction > .ptn_title > h4 > .headtitle > .ptn_logo {
      height: 46px; }

    .as .gy_vector_4seasons_gen-3_suv_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo, .as .gy_vector_4seasons_cargo_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo, .as .gy_vector_4seasons_hybrid_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo, .as .gy_vector_4seasons_gen-3_pa_introduction > .ptn_title > h4 > .headtitle > .maker_logo {
      padding-top: 20px; }

    .as .description > dl > dt {
      font-size: 20px; }

    .as .description > dl > dd {
      font-size: 14px; }

    .as .textsize span {
      font-size: 14px; }

    .as .ptn_top {
      display: flex; }

    .as .description {
      width: 60%; }

    .as .ptn_top > .size {
      width: 48%;
      margin-bottom: 0; }

    .as .number {
      font-size: 30px; }

    .as .smallbox > .flex {
      width: 48%;
      gap: 0;
      justify-content: initial;
      flex-wrap: initial;
      margin: 0 10px; }

    .as .arrow {
      font-size: 11px;
      margin: 0 9px; }

    .as .smallbox {
      display: flex;
      width: 100%;
      margin-left: 40px; }

    .as .certification {
      height: 268px; }

    .as .certification > img {
      height: initial; }

    .as .ptn_top > a {
      position: absolute;
      font-size: 20px;
      padding: 10px 0;
      margin: 0;
      width: 30%;
      bottom: 27px;
      left: 98px; }

    .as .ptn_top > a::after {
      display: none; }

    .as .item_box > button {
      font-size: 20px;
      background: #c91b1d;
      border: none;
      color: white;
      font-weight: 700; }

    .as .japan {
      display: inline; }

    .as .japanese {
      font-size: 14px;
      padding-top: 10px; }

    .as #set .wrap nav ul li a .fukidashi {
      font-size: 21px; }

    .as #set .wrap .set_box .detail {
      font-size: 17px;
      height: 266px; }

    .as .video {
      margin: 50px auto; }

    .as .video .text > p {
      font-size: 17px; } }
  @media screen and (min-width: 1024px) {
  .as .header-table {
    width: calc(960px - 171px); }
  .as .left-table th, .as .header-table td, .as .header-table th {
    min-width: 130px; }
  .as .point-box img {
    left: 130px; } }

@keyframes grade_on {
  0% {
    transform: translateY(0px); }

  100% {
    transform: translateY(-20px); } }

.modal_area {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100; }

.modal_area::after {
  content: '×';
  position: absolute;
  right: 10px;
  top: 10px;
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  line-height: 18px;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer; }

.modal_area > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1280px;
  height: 80vh;
  max-height: 720px; }