@charset "UTF-8";
#newcolor .topcontent_ttl { color: #999; font-weight: 600; position: relative; z-index: 10; border-bottom: 2px solid #ccc; }
#newcolor .topcontent_ttl img { height: auto; }
#newcolor .newcolor_list li { position: relative; background-color: #fff; z-index: 2; border-radius: 10px; }
#newcolor .newcolor_list li:nth-child(1) a:before { background-color: #3e549f; }
#newcolor .newcolor_list li:nth-child(1) a .newcolor_txt .newcolor_name .arrow { background-color: #3e549f; }
#newcolor .newcolor_list li:nth-child(2) { z-index: 1; }
#newcolor .newcolor_list li:nth-child(2) a:before { background-color: #d156b6; }
#newcolor .newcolor_list li:nth-child(2) a .newcolor_txt .newcolor_name .arrow { background-color: #d156b6; }
#newcolor .newcolor_list li:nth-child(3) a:before { background-color: #54535c; }
#newcolor .newcolor_list li:nth-child(3) a .newcolor_txt .newcolor_name .arrow { background-color: #54535c; }
#newcolor .newcolor_list li a { border: 2px solid #ccc; background-color: #fff; border-radius: 10px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; overflow: hidden; }
#newcolor .newcolor_list li a:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; z-index: 0; }
#newcolor .newcolor_list li a:hover { text-decoration: none; }
#newcolor .newcolor_list li a:hover:before { opacity: 1; }
#newcolor .newcolor_list li a:hover .newcolor_txt .newcolor_name { color: #fff; }
#newcolor .newcolor_list li a:hover .newcolor_txt .arrow { transform: scale(1.4); }
#newcolor .newcolor_list li a .newcolor_img { position: relative; z-index: 1; width: 90%; height: 650%; border-radius: 10px; overflow: hidden; }
#newcolor .newcolor_list li a .newcolor_txt { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; }
#newcolor .newcolor_list li a .newcolor_txt .newcolor_name { font-weight: 600; transition: color 0.3s; width: 100%; display: flex; justify-content: space-between; }
#newcolor .newcolor_list li a .newcolor_txt .newcolor_name .arrow { aspect-ratio: 1 / 1; border-radius: 100%; transition: transform 0.3s; }
#newcolor .newcolor_list li a .newcolor_txt .newcolor_name .arrow img { width: 100%; height: auto; }

.list { position: relative; z-index: 2; }
.list a:hover { text-decoration: none; }
.list a:hover .mainunit { background-color: #e74200; transition: 0.2s; }
.list a:hover .mainunit .unit_txt { color: #fff; }
.list a:hover .mainunit .arrow { transform: scale(1.3); }

.mainunit { display: flex; align-items: center; border: 2px solid #e74200; }
.mainunit .unit_txt { padding-left: 1em; padding-right: 1em; color: #e74200; width: 100%; }
.mainunit .unit_txt .name { display: flex; justify-content: space-between; align-items: center; }
.mainunit .unit_txt .name .type { font-weight: 600; }
.mainunit .unit_txt .name .arrow { background-color: #e74200; border-radius: 50%; transition: transform 0.3s; margin-bottom: -2.5rem; aspect-ratio: 1 / 1; }
.mainunit .unit_txt .unit_ttl { font-weight: bold; margin-right: 72px; }
.mainunit .unit_txt .unit_ttl span { white-space: nowrap; }

.bg_c { background-color: #eee; }

.parts { border: 1px solid #e74200; background-color: #fff; display: flex; flex-direction: column; align-items: center; }
.parts .unit_ttl { font-weight: bold; color: #e74200; margin: 0 auto; text-align: center; }
.parts .unit_ttl span { white-space: nowrap; }

.par_ttl { font-weight: 500; }

.parts_slec { width: 100%; background-color: #fff; border-left: 1px solid #e74200; border-right: 1px solid #e74200; border-bottom: 1px solid #e74200; }
.parts_slec .accessories .pointset .acc_bt { font-family: 'Noto Sans JP', sans-serif; z-index: 5; font-weight: 500; }
.parts_slec .mainunitparts .mup_set .sec_name_area .sec_name .numbox { background-color: #e74200; color: #fff; display: flex !important; justify-content: center; align-items: center; margin-right: 0.5em; font-weight: 500; }
.parts_slec .mainunitparts .mup_set .sec_name_area .sec_name .mup_bt { font-weight: 500; }

@media screen and (min-width: 768px), print { #newcolor { margin-top: 60px; }
  #newcolor .topcontent_ttl { font-size: 36px; line-height: 48px; }
  #newcolor .topcontent_ttl span { font-size: 48px; }
  #newcolor .newcolor_list { display: flex; flex-wrap: wrap; margin-top: 2rem; margin-left: -1rem; margin-right: -1rem; }
  #newcolor .newcolor_list li { width: calc(33.3% - 2rem); margin-left: 1rem; margin-right: 1rem; }
  #newcolor .newcolor_list li a { padding: 1rem 1rem 0.5rem; height: 100%; }
  #newcolor .newcolor_list li a .newcolor_txt { height: 100%; margin-top: 0.5rem; }
  #newcolor .newcolor_list li a .newcolor_txt .newcolor_name { font-size: 24px; line-height: 36px; }
  #newcolor .newcolor_list li a .newcolor_txt .newcolor_name .arrow { width: 36px; }
  .mainunit { border-radius: 14px; padding: 15px; }
  .mainunit .unit_img { width: 196px; height: auto; background-color: #fff; border-radius: 7px; }
  .mainunit .unit_txt .type { font-size: 32px; line-height: 40px; }
  .mainunit .unit_txt .unit_ttl { font-size: 24px; line-height: 36px; }
  .mainunit .unit_txt .umin { font-size: 20px; }
  .mainunit .unit_txt .urg { font-size: 32px; }
  .bg_c { margin-top: 120px; padding-top: 20px; padding-bottom: 80px; }
  .parts { margin-top: 60px; border-top-left-radius: 14px; border-top-right-radius: 14px; padding: 38px; }
  .parts .unit_ttl { font-size: 28px; line-height: 36px; }
  .par_ttl { font-size: 20px; }
  .parts_slec { padding: 0 3em; }
  .parts_slec .accessories { padding-top: 2em; padding-bottom: 3em; }
  .parts_slec .accessories .pointset { position: relative; }
  .parts_slec .accessories .pointset .acc_bt { border: 2px solid #e74200; line-height: 18px; display: flex; align-items: center; justify-content: center; position: absolute; flex-direction: column; text-align: center; }
  .parts_slec .accessories .pointset .posi01 { left: 0; }
  .parts_slec .accessories .pointset .posi02, .parts_slec .accessories .pointset .posi03, .parts_slec .accessories .pointset .posi04, .parts_slec .accessories .pointset .posi05, .parts_slec .accessories .pointset .posi06 { right: 0; }
  .parts_slec .mainunitparts { padding-top: 2em; padding-bottom: 2em; border-top: 1px solid #333; }
  .parts_slec .mainunitparts .mup_set { display: flex; justify-content: space-between; }
  .parts_slec .mainunitparts .mup_set img { width: 50%; height: 50%; }
  .parts_slec .mainunitparts .mup_set .sec_name_area { width: 46%; }
  .parts_slec .mainunitparts .mup_set .sec_name_area .sec_name { display: flex; align-items: center; }
  .parts_slec .mainunitparts .mup_set .sec_name_area .sec_name a { width: calc(100% - 45px); text-decoration: none; }
  .parts_slec .mainunitparts .mup_set .sec_name_area .sec_name .numbox { width: 30px; height: 30px; border-radius: 15px; font-size: 16px; }
  .parts_slec .mainunitparts .mup_set .sec_name_area .sec_name .mup_bt { border: 2px solid #e74200; padding: 0.5em 1em; font-size: 16px; }
  .parts_slec .mainunitparts .mup_set .sec_name_area .sec_name:nth-child(n+2) { margin-top: 1.5em; }
  .btm_spec { display: flex; justify-content: center; }
  .btm_spec .btn { margin-top: 80px; margin-left: 1rem; margin-right: 1rem; width: calc(50% - 2rem); max-width: 480px; }
  .btm_spec .btn a { width: 100%; } }
@media screen and (min-width: 768px) and (min-width: 1184px) { .acc_bt { font-size: 16px; width: 15em; height: 54px; }
  .posi01, .posi02 { top: 14.081%; }
  .posi03 { top: 36.734%; }
  .posi04 { top: 53.877%; }
  .posi05 { top: 74.285%; }
  .posi06 { top: 91.428%; } }
@media screen and (min-width: 768px) and (max-width: 1183px) { /* PC以下 */
  .umin { font-size: 20px !important; }
  .urg { font-size: 28px !important; }
  .parts_slec { padding: 0 1.5em; }
  .acc_bt { font-size: 14px; width: 14em; height: 54px; }
  .posi01, .posi02 { top: 13%; }
  .posi03 { top: 35.5%; }
  .posi04 { top: 53.5%; }
  .posi05 { top: 73%; }
  .posi06 { top: 91%; } }
@media screen and (min-width: 768px) and (max-width: 991px) { /* タブレット以下 */
  .acc_bt { width: 12em; height: 50px; }
  .posi01, .posi02 { top: 11%; }
  .posi03 { top: 33.5%; }
  .posi04 { top: 52%; }
  .posi05 { top: 72%; }
  .posi06 { top: 90.5%; } }
@media screen and (min-width: 768px) and (max-width: 1183px) { /* 1184px以下 */
  #newcolor .newcolor_list { margin-left: -0.5rem; margin-right: -0.5rem; }
  #newcolor .newcolor_list li { width: calc(33.3% - 1rem); margin-left: 0.5rem; margin-right: 0.5rem; }
  #newcolor .newcolor_list li a .newcolor_txt .newcolor_name { font-size: 20px; line-height: 36px; } }
@media screen and (min-width: 768px) and (max-width: 991px) { /* 992px以下 */
  #newcolor .newcolor_list { margin-left: auto; margin-right: auto; justify-content: center; }
  #newcolor .newcolor_list li { width: calc(40% - 1rem); margin-left: 0.5rem; margin-right: 0.5rem; }
  #newcolor .newcolor_list li:last-child { margin-top: 1rem; }
  #newcolor .newcolor_list li a .newcolor_txt .newcolor_name { font-size: 20px; line-height: 36px; } }
@media screen and (max-width: 767px) { #newcolor { margin-top: 40px; }
  #newcolor .topcontent_ttl { font-size: 24px; line-height: 36px; border-bottom: 1px solid #999; }
  #newcolor .topcontent_ttl span { font-size: 36px; }
  #newcolor .newcolor_list { margin-top: 2rem; margin-left: auto; margin-right: auto; width: 80%; display: flex; flex-direction: column; align-items: center; }
  #newcolor .newcolor_list li + li { margin-top: 1rem; }
  #newcolor .newcolor_list li a { padding: 1rem 1rem 0.5rem; height: 100%; width: 100%; max-width: 360px; }
  #newcolor .newcolor_list li a .newcolor_txt { height: 100%; margin-top: 0.5rem; }
  #newcolor .newcolor_list li a .newcolor_txt .newcolor_name { font-size: 18px; line-height: 30px; }
  #newcolor .newcolor_list li a .newcolor_txt .newcolor_name .arrow { width: 30px; }
  #newcolor .newcolor_list li a .newcolor_img { display: flex; justify-content: center; width: 75%; }
  .mainunit { flex-direction: column; border-radius: 14px; padding: 15px; }
  .mainunit .unit_img { width: 320px; height: auto; background-color: #fff; border-radius: 7px; }
  .mainunit .unit_txt { margin-top: 0.5rem; }
  .mainunit .unit_txt .name .type { font-size: 20px; }
  .mainunit .unit_txt .name .arrow { width: 36px; }
  .mainunit .unit_txt .unit_ttl { font-size: 16px; line-height: 24px; }
  .mainunit .unit_txt .umin { font-size: 12px; line-height: 16px; }
  .mainunit .unit_txt .urg { font-size: 14px; }
  .bg_c { margin-top: 60px; padding-top: 10px; padding-bottom: 40px; }
  .parts { margin-top: 30px; border-top-left-radius: 14px; border-top-right-radius: 14px; padding: 14px; }
  .parts .unit_ttl { font-size: 16px; line-height: 24px; }
  .par_ttl { font-size: 16px; }
  .parts_slec { padding: 0 1em; }
  .parts_slec .accessories { padding-top: 2em; padding-bottom: 2em; }
  .parts_slec .accessories .pointset .boxfl { display: flex; align-items: center; justify-content: center; }
  .parts_slec .accessories .pointset .boxfl a:hover { text-decoration: none; }
  .parts_slec .accessories .pointset .boxfl .acc_bt { border: 1px solid #e74200; font-size: 14px; line-height: 20px; padding: 0.5em 1em; min-width: 17em; }
  .parts_slec .accessories .pointset .boxfl .numbox { width: 20px; height: 20px; background-color: #e74200; border-radius: 10px; color: #fff; font-size: 14px; display: flex !important; justify-content: center; align-items: center; margin-right: 0.5em; }
  .parts_slec .accessories .pointset .boxfl:nth-child(n+2) { margin-top: 1em; }
  .parts_slec .mainunitparts { padding-top: 2em; padding-bottom: 2em; border-top: 1px solid #333; }
  .parts_slec .mainunitparts .mup_set { display: flex; flex-direction: column; align-items: center; }
  .parts_slec .mainunitparts .mup_set img { width: 86%; height: 86%; }
  .parts_slec .mainunitparts .mup_set .sec_name_area { margin-top: 20px; width: 100%; }
  .parts_slec .mainunitparts .mup_set .sec_name_area .sec_name { display: flex; align-items: center; }
  .parts_slec .mainunitparts .mup_set .sec_name_area .sec_name a { width: 100%; text-decoration: none; }
  .parts_slec .mainunitparts .mup_set .sec_name_area .sec_name .numbox { width: 20px; height: 20px; border-radius: 10px; font-size: 12px; }
  .parts_slec .mainunitparts .mup_set .sec_name_area .sec_name .mup_bt { border: 1px solid #e74200; padding: 0.5em 1em; font-size: 14px; }
  .parts_slec .mainunitparts .mup_set .sec_name_area .sec_name:nth-child(n+2) { margin-top: 1.25em; }
  .btm_spec { display: flex; flex-direction: column; align-items: center; margin-top: 2rem; }
  .btm_spec .btn { width: 100%; max-width: 360px; }
  .btm_spec .btn a { width: 100%; } }