@charset "utf-8";

/**
 * ================================================================================
 * 冬タイヤ交換前線MAPページ Style
 * ================================================================================
 */

/**
 * Base
 * -------------------------------
 */

.cwtm {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

.cwtm *,
.cwtm *::before,
.cwtm *::after {
  box-sizing: border-box;
}

.cwtm sub,
.cwtm sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.cwtm sub {
  bottom: -0.25em;
}

.cwtm sup {
  top: -0.5em;
}

.cwtm img {
  width: 100%;
  max-width: 100%;
}

@media only screen and (max-width:767px) {
  .cwtm {
    font-size: 15px;
  }
}


/**
 * Utility
 * -------------------------------
 */

@media all and (min-width: 768px) {
  .cwtm-sm:not(.cwtm-lg) { display: none; }
}
@media all and (max-width: 767px) {
  .cwtm-lg:not(.cwtm-sm) { display: none; }
}


/**
 * Common
 * -------------------------------
 */

/* -- Container -- */
.cwtm_container {
  width: 90%;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width:767px) {
  .cwtm_container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* -- Comments -- */
.cwtm_comments > li {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
}

@media only screen and (max-width:767px) {
  .cwtm_comments > li {
    font-size: 11px;
  }
}

/* -- Title -- */
.cwtm_ttl > span {
  display: inline-block;
  position: relative;
  z-index: 1;
  color: #121212;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
}

.cwtm_ttl.-small > span {
  font-size: 24px;
}

.cwtm_ttl > span::before,
.cwtm_ttl > span::after {
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: '';
}

.cwtm_ttl > span::before {
  top: -35px;
  left: -30px;
  width: 65px;
  height: 64px;
  background-image: url('../_images/cwtm_illust_snow01.svg');
}

.cwtm_ttl > span::after {
  bottom: -15px;
  right: -20px;
  width: 30px;
  height: 35px;
  background-image: url('../_images/cwtm_illust_snow02.svg');
}

.cwtm_ttl.-small > span::before {
  top: -30px;
  left: -40px;
}

.cwtm_ttl.-small > span::after {
  bottom: -15px;
  right: -30px;
}

@media only screen and (max-width:767px) {
  .cwtm_ttl > span {
    font-size: 25px;
  }

  .cwtm_ttl.-small > span {
    font-size: 21px;
  }

  .cwtm_ttl > span::before {
    top: calc(-40px * 0.65);
    left: calc(-30px * 0.7);
    width: calc(65px * 0.65);
    height: calc(64px * 0.65);
  }

  .cwtm_ttl > span::after {
    bottom: calc(-20px * 0.7);
    right: calc(-30px * 0.6);
    width: calc(30px * 0.65);
    height: calc(35px * 0.65);
  }

  .cwtm_ttl.-small > span::before {
    top: calc(-35px * 0.5);
    left: calc(-30px * 0.8);
  }

  .cwtm_ttl.-small > span::after {
    bottom: calc(-25px * 0.4);
    right: calc(-30px * 0.5);
  }
}

/* -- Icon -- */
.cwtm_icon_arrow::after {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  background-image: url('../_images/cwtm_icon_angle.svg');
  background-repeat: no-repeat;
  background-size: 100% auto;
  vertical-align: middle;
  content: '';
}

/* -- Button -- */
.cwtm_btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 40px;
  margin-top: -20px;
  margin-left: -20px;
}

.cwtm_btns > li {
  display: inline-block;
  padding-top: 25px;
  padding-left: 25px;
}

.cwtm_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 342px;
  min-height: 56px;
  border-radius: 1000px;
  text-align: center;
}

.cwtm_btn.-deeporange {
  background-color: #ed6c00;
}

.cwtm_btn.-lightorange {
  background-color: #ff9600;
}

.cwtm_btn > span {
  display: inline-block;
  position: relative;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.cwtm_btn > span::after {
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  width: 21px;
  height: 19px;
  background-image: url('../_images/cwtm_icon_arrow.svg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
  content: ''
}

@media only screen and (max-width:767px) {
  .cwtm_btns {
    padding-top: 25px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: -15px;
    margin-left: -15px;
  }

  .cwtm_btns > li {
    width: 100%;
    padding-top: 15px;
    padding-left: 15px;
  }

  .cwtm_btn {
    min-width: 100%;
    min-height: 50px;
  }

  .cwtm_btn > span {
    font-size: 17px;
  }

  .cwtm_btn > span::after {
    right: calc(-30px * 0.8);
    transform: translateY(-50%);
    width: calc(21px * 0.8);
    height: calc(19px * 0.8);
  }
}


/**
 * Key Visual
 * -------------------------------
 */

.cwtm_kv {
  width: 100%;
  padding: 15px 25px 35px 40px;
  background-color: #88b8ec;
  background-image: url('../_images/cwtm_kv_bg.png');
  background-repeat: repeat;
  background-size: 457px auto;
  text-align: center;
  line-height: 0;
}

.cwtm_kv img {
  display: inline-block;
  max-width: 1110px;
}

@media only screen and (max-width:767px) {
  .cwtm_kv {
    padding: 10px 10px 20px 10px;
    background-size: 280px auto;
  }

  .cwtm_kv img {
    max-width: 100%;
  }
}


/**
 * About
 * -------------------------------
 */

.cwtm_about {
  padding-top: 75px;
  padding-bottom: 80px;
  background-color: #e8f1ff;
}

.cwtm_about_fig01 {
  margin-top: 55px;
  text-align: center;
}

.cwtm_about_fig01 > div {
  display: inline-block;
  padding: 40px;
  border-radius: 20px;
  background-color: #fff;
  line-height: 0;
}

.cwtm_about_fig01 > div > img {
  width: 572px;
  aspect-ratio: 572 / 46;
}

.cwtm_about_fig01 > figcaption {
  margin-top: 45px;
  font-size: 18px;
  text-align: left;
}

.cwtm_about_fig01 > figcaption > span {
  display: inline;
  background: linear-gradient(transparent 70%, #ffd59a 70%);
}

.cwtm_about_fig02 {
  margin-top: 40px;
}

.cwtm_about_fig02 > figcaption {
  margin-bottom: 40px;
}

.cwtm_about_fig02 > figcaption > strong {
  display: inline-block;
  color: #ed6c00;
  font-size: 24px;
  line-height: 1.4;
}

.cwtm_about_fig02 > figcaption > .cwtm_comments {
  margin-top: 10px;
}

.cwtm_about_fig02 > div {
  text-align: center;
  line-height: 0;
}

.cwtm_about_fig02 > div > img {
  width: 408px;
  aspect-ratio: 408 / 257;
}

@media only screen and (max-width:767px) {
  .cwtm_about {
    padding-top: 40px;
    padding-bottom: 50px;
  }

  .cwtm_about_fig01 {
    margin-top: 35px;
  }

  .cwtm_about_fig01 > div {
    padding: 20px;
    border-radius: 10px;
  }

  .cwtm_about_fig01 > div > img {
    width: 100%;
  }

  .cwtm_about_fig01 > figcaption {
    margin-top: 25px;
    font-size: 15px;
  }

  .cwtm_about_fig02 {
    margin-top: 25px;
  }

  .cwtm_about_fig02 > figcaption {
    margin-bottom: 25px;
  }

  .cwtm_about_fig02 > figcaption > strong {
    font-size: 20px;
  }

  .cwtm_about_fig02 > figcaption > .cwtm_comments {
    margin-top: 8px;
  }

  .cwtm_about_fig02 > img {
    width: 90%;
  }
}


/**
 * Menu
 * -------------------------------
 */

.cwtm_menu {
  padding-top: 25px;
  padding-bottom: 50px;
}

.cwtm_menu_inner {
  padding: 65px 85px;
  border-radius: 30px;
}

.cwtm_menu_list {
  margin-top: 50px;
}

.cwtm_menu_list > li {
  padding: 30px 0;
  border-top: 1px solid #e6e6e6; 
}

.cwtm_menu_list > li:nth-last-of-type(1) {
  border-bottom: 1px solid #e6e6e6;
}

.cwtm_menu_list > li > a {
  display: inline-block;
  position: relative;
  color: #333;
  font-size: 18px;
}

.cwtm_menu_list > li > a[target="_blank"]::after {
  display: block;
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #333;
  mask-image: url('../_images/cwtm_icon_blank.svg');
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  content: '';
}

@media only screen and (max-width:767px) {
  .cwtm_menu {
    padding-top: 20px;
    padding-bottom: 25px;
  }

  .cwtm_menu_inner {
    padding: 25px 30px;
    border-radius: 15px;
  }

  .cwtm_menu_list {
    margin-top: 20px;
  }

  .cwtm_menu_list > li {
    padding: 12px 0;
  }

  .cwtm_menu_list > li > a {
    font-size: 16px;
  }

  .cwtm_menu_list > li > a[target="_blank"]::after {
    right: -10px;
    width: 12px;
    height: 12px;
  }
}


/**
 * Merit
 * -------------------------------
 */

.cwtm_merit {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #e8f1ff;
}

.cwtm_merit_list {
  margin-top: 40px;
}

.cwtm_merit_list > li {
  margin-top: 40px;
}

.cwtm_merit_list > li:nth-of-type(1) {
  margin-top: 0;
}

.cwtm_merit_list_inner {
  display: flex;
  padding: 40px;
  border-radius: 25px;
  background-color: #fff;
}

.cwtm_merit_list_body {
  flex: 1;
  padding-right: 65px;
}

.cwtm_merit_list_body > h3 {
  margin-bottom: 20px;
  color: #ed6c00;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

.cwtm_merit_list_head {
  width: 315px;
  line-height: 0;
}

.cwtm_merit_list_head img {
  aspect-ratio: 750 / 500;
}

@media only screen and (max-width:767px) {
  .cwtm_merit {
    padding-top: 35px;
    padding-bottom: 35px;
  }

  .cwtm_merit_list {
    margin-top: 25px;
  }

  .cwtm_merit_list > li {
    margin-top: 25px;
  }

  .cwtm_merit_list_inner {
    display: block;
    padding: 20px;
    border-radius: 15px;
  }

  .cwtm_merit_list_body {
    padding-right: 0;
  }

  .cwtm_merit_list_body > h3 {
    margin-bottom: 15px;
    font-size: 20px;
  }

  .cwtm_merit_list_head {
    width: 100%;
    margin-top: 25px;
  }
}


/**
 * No.1
 * -------------------------------
 */
 
.cwtm_no1 {
  padding-top: 80px;
  padding-bottom: 60px;
}

.cwtm_no1_ttl {
  text-align: center;
  line-height: 0;
}

.cwtm_no1_ttl img {
  width: 798px;
  aspect-ratio: 1598 / 94;
}

.cwtm_no1_inner {
  display: flex;
  margin-top: 40px;
}

.cwtm_no1_head {
  width: 280px;
  line-height: 0;
}

.cwtm_no1_head img {
  aspect-ratio: 601 / 419;
}

.cwtm_no1_body {
  flex: 1;
  margin-left: 40px;
}

.cwtm_no1_body > picture {
  display: block;
  line-height: 0;
}

.cwtm_no1_body > picture img {
  aspect-ratio: 1257 / 233;
}

.cwtm_no1_body > p {
  margin-top: 15px;
}

.cwtm_no1_body > p:nth-of-type(1) {
  font-size: 14px;
}

.cwtm_no1_body a {
  text-decoration: underline;
}

@media only screen and (max-width:767px) {
  .cwtm_no1 {
    padding-top: 50px;
    padding-bottom: 40px;
  }

  .cwtm_no1_ttl img {
    width: 85%;
    aspect-ratio: 562 / 123;
  }

  .cwtm_no1_inner {
    display: block;
    margin-top: 10px;
    text-align: center;
  }

  .cwtm_no1_head {
    width: 100%;
  }

  .cwtm_no1_head img {
    width: 60%;
    aspect-ratio: 401 / 280;
  }

  .cwtm_no1_body {
    margin-top: 5px;
    margin-left: 0;
  }

  .cwtm_no1_body > picture img {
    aspect-ratio: 669 / 127;
  }

  .cwtm_no1_body > p {
    margin-top: 10px;
  }

  .cwtm_no1_body > p:nth-of-type(1) {
    font-size: 13px;
  }
}


/**
 * Features
 * -------------------------------
 */
 
.cwtm_features {
  padding-bottom: 80px;
}

.cwtm_features_ttl {
  text-align: center;
}

.cwtm_features_ttl img {
  width: 460px;
  aspect-ratio: 460 / 46;
}

.cwtm_features_list {
  margin-top: 20px;
  padding: 50px 35px 40px 35px;
  border: 6px solid #121212;
  border-radius: 24px;
}

.cwtm_features_list > li {
  margin-top: 35px;
  padding-top: 35px;
  border-top: 3px solid #121212;
}

.cwtm_features_list > li:nth-of-type(1) {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.cwtm_features_list_inner {
  display: flex;
}

.cwtm_features_list_body {
  flex: 1;
  padding-right: 40px;
}

.cwtm_features_list_body > h3 {
  line-height: 0;
}

.cwtm_features_list_body > h3 img {
  width: 335px;
  aspect-ratio: 335 / 26;
}

.cwtm_features_list_body > p {
  margin-top: 20px;
}

.cwtm_features_list_body a {
  font-size: 14px;
  text-decoration: underline;
}

.cwtm_features_list_head {
  width: 330px;
  line-height: 0;
}

.cwtm_features_list_head img {
  aspect-ratio: 750 / 337;
}

@media only screen and (max-width:767px) {
  .cwtm_features {
    padding-bottom: 45px;
  }

  .cwtm_features_ttl img {
    width: 95%;
  }

  .cwtm_features_list {
    margin-top: 15px;
    padding: 25px 20px 20px 20px;
    border: 3px solid #121212;
    border-radius: 10px;
  }

  .cwtm_features_list > li {
    margin-top: 25px;
    padding-top: 25px;
    border-top-width: 2px;
  }

  .cwtm_features_list_inner {
    display: block;
  }

  .cwtm_features_list_body {
    padding-right: 0;
  }

  .cwtm_features_list_body > h3 img {
    width: 80%;
  }

  .cwtm_features_list_body > p {
    margin-top: 8px;
  }

  .cwtm_features_list_body a {
    font-size: 13px;
  }

  .cwtm_features_list_head {
    width: 100%;
    margin-top: 20px;
  }
}


/**
 * FAQ
 * -------------------------------
 */

.cwtm_faq {
  padding-top: 60px;
  padding-bottom: 80px;
  background-color: #e8f1ff;
}

.cwtm_faq .accordion_container_list {
  margin-top: 45px;
}

.cwtm_faq .accordion_container_list h3 {
  font-size: 22px;
}

.cwtm_faq .accordion_container {
  padding: 35px 40px;
  border-radius: 32px;
  background-color: #fff;
}

.cwtm_faq .scroll_control > li {
  border-bottom: 1px solid #f5f5f5;
}

.cwtm_faq .scroll_control > li button {
  border: none !important;
}

.cwtm_faq .accordion_heading_text,
.cwtm_faq .accordion_detail_text span,
.cwtm_faq .accordion_detail_text span a.text_link::after {
  font-size: 16px !important;
}

@media only screen and (max-width:767px) {
  .cwtm_faq {
    padding-top: 40px;
    padding-bottom: 50px;
  }

  .cwtm_faq .accordion_container_list {
    margin-top: 25px;
  }

  .cwtm_faq .accordion_container_list h3 {
    font-size: 20px;
  }

  .cwtm_faq .accordion_container {
    padding: 20px 20px;
    border-radius: 12px;
  }

  .cwtm_faq .accordion_heading_text,
  .cwtm_faq .accordion_detail_text span,
  .cwtm_faq .accordion_detail_text span a.text_link::after {
    font-size: 15px !important;
  }
}