@charset "UTF-8";

:root {
 --text__color: #191919;
 --accent__color: #C80D30;
 --base__color: #FFFFFF;
 --bg__color: #F0F4F8;
}

.line {
 background-image: url("../img/line_bg2.jpg");
 background-size: cover;
 background-repeat: no-repeat;
}

.line__inner {
 padding: 186px 20px;
 max-width: 1248px;
 margin: 0 auto;
 /* max-width: 1140px; */
}


.line__bg {
 display: none;
}

.line__content {
 width: 528px;
}

.line__subtitle {
 margin-bottom: 16px;
 font-size: 3.2rem;
 font-weight: bold;
 color: var(--accent__color);
 text-align: center;
}

.line__titleImage {
 margin-bottom: 24px;
 max-width: 528px;
}

.line__text {
 margin-bottom: 32px;
 font-size: 1.6rem;
 line-height: 1.5;
 text-align: center;
}

.line__button__link {
 display: block;
 width: fit-content;
 margin: 0 auto;
 padding: 16px 168px;
 font-size: 2.4rem;
 font-weight: bold;
 color: var(--base__color);
 background-color: var(--accent__color);
 border: 2px solid var(--accent__color);
 border-radius: 40px;
 -webkit-border-radius: 40px;
 -moz-border-radius: 40px;
 -ms-border-radius: 40px;
 -o-border-radius: 40px;
 margin: 0 auto;
}

.line__button__link:hover {
 color: var(--accent__color);
 background-color: var(--base__color);
}

@media screen and (max-width: 430px) {


 .line__text .sp {
  display: none;
 }
}

@media screen and (max-width: 460px) {
 .line__button__link {
  width: 100%;
  padding: 16px;
 }
}

@media screen and (max-width: 768px) {
 .line {
  background-image: unset;
  background-color: var(--bg__color);
 }

 .line__inner {
  padding: 0;
  max-width: 100%;
 }


 .line__bg {
  display: block;
  width: 100%;
  height: 367px;
  aspect-ratio: 673 / 367;
  margin-bottom: 24px;
  background-image: url("../img/line_bg2.jpg");
  background-position: bottom right;
  background-size: cover;
  background-repeat: no-repeat;
 }

 .line__content {
  width: 100%;
  padding: 0 24px;
 }

 .line__subtitle {
  font-size: 2rem;
 }

 .line__titleImage {
  margin: 0 auto 24px;
 }

 .line__button__link {
  font-size: 2rem;
  text-align: center;
 }
}