/* CSS Document */


/* -----------------------------------------------------------------------------
	common
 -------------------------------------------------------------------------------*/
/* font */
.fc-blue { color:#014099; }
.fc-red { color:#e60013; }

.line-2s { line-height: 1.2; }
.line-s { line-height: 1.4; }
.line-m { line-height: 1.8; }
.line-l { line-height: 2.0; }

.txt-nowrap { display: inline-block; }

/* -----------------------------------------------------------------------------
	melit
 -------------------------------------------------------------------------------*/
.melit img {
  width: 100%;
  height: auto;
}

/* -----------------------------------------------------------------------------
	osusume
 -------------------------------------------------------------------------------*/
.osusume {
  margin-top: 48px;
  padding: 48px 20px;
  background-color: #f2fcff;
}
.osusume-inner {
  width: 100%;
  max-width: 1330px;
  margin: 0 auto;
}
.osusume .osusume-title {
  display: block;
  margin-bottom: 30px;
  color: #004a9e;
  font-size: 36px;
  text-align: center;
}

/* car-list */
.car-class-list {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  justify-items: center;
  justify-content: center;
  gap: 36px;
}
@media (max-width:1760px) {
  .car-class-list {
    max-width: 540px;
    margin: 0 auto;
    grid-template-columns: repeat(2,1fr);
    gap: 24px;
  }
}
.car-class {
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  transition: 0.2s;
  background-color: #fff;
  border: 3px solid #004a9e;
  border-top: none;
  border-radius: 12px;
}
@media (max-width:1760px) {
  .car-class {
    max-width: 288px;
  }
}
.car-class-title {
  position: relative;
  width: 100%;
  height: 50px;
  background: #fff;
  background: radial-gradient(circle, rgba(119, 150, 237, 1) 0%, rgba(194, 224, 248, 1) 100%);
  border-top: 3px solid #004a9e;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  box-sizing: border-box;
}
.car-class-title strong {
  display: block;
  position: absolute;
  left: 10px;
  bottom: 12px;
  color: #fff;
  line-height: 1;
  font-size: 30px;
  text-shadow:3px 3px 3px #004a9e, -3px -3px 3px #004a9e,
              -3px 3px 3px #004a9e, 3px -3px 3px #004a9e,
              0px 3px 3px #004a9e,  0 -3px 3px #004a9e,
              -3px 0 3px #004a9e, 3px 0 3px #004a9e;
}
.car-class-title strong span {
  font-size: 48px;
}
.car-class-title p {
  position: absolute;
  right: 10px;
  bottom: 12px;
  margin: 0;
  font-weight: bold;
}
@media (max-width:1300px) {
  .car-class-title p {
    font-size: 87.5%;
  }
}

.car-class-content-wrap {
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
}
.car-class-content-wrap p {
  margin: 0;
}

.car-class-content {
  width: 100%;
  text-align: center;
}
.car-class-content .car-class-img {
  width: 100%;
  height: auto;
}
.car-class-content .car-class-name {
  font-weight: bold;
}
@media (max-width:640px) {
  .car-class-content .car-class-name {
    font-size: 92.5%;
  }
}
.car-class-content .car-class-price {
  text-align: left;
  line-height: 1;
}
.car-class-content .car-class-price .month {
  color: #e6000a;
  font-size: 14px;
  font-weight: bold;
}
.car-class-content .car-class-price .ff-c80 {
  font-size: 60px;
  color: #fef101;
  font-weight: bold;
  text-shadow:3px 3px 3px #e6000a, -3px -3px 3px #e6000a,
              -3px 3px 3px #e6000a, 3px -3px 3px #e6000a,
              0px 3px 3px #e6000a,  0 -3px 3px #e6000a,
              -3px 0 3px #e6000a, 3px 0 3px #e6000a;
}
.car-class-content .car-class-price .ff-c80 span {
  font-size: 32px;
}
@media (max-width:1760px) {
  .car-class-content .car-class-price .ff-c80 {
    font-size: 47px;
  }
  .car-class-content .car-class-price .ff-c80 span {
    font-size: 26px;
  }
}
.car-class-content .car-class-info {
  margin: 1.5em 0 0;
  text-align: left;
}

/* 同じ行で高さを揃えるための骨組み */
.car-class-list { align-items: stretch; } /* 念のため明示 */
.car-class { display: flex; flex-direction: column; }
.car-class-content-wrap { flex: 1; display: flex; flex-direction: column; }
.car-class-content { flex: 1; display: flex; flex-direction: column; }
.car-class-price { margin-top: auto; } /* 価格を一番下へ */

/* -----------------------------------------------------------------------------
	subscription
 -------------------------------------------------------------------------------*/
.subscription .komikomi {
  display: block;
  width: 100%;
  max-width: 1032px;
  height: auto;
  margin: 40px auto 20px;
}


/* -----------------------------------------------------------------------------
	tax
 -------------------------------------------------------------------------------*/
.tax {
  margin-top: 48px;
  padding: 48px 20px;
  background-color: #f2fcff;
}

.tax-title img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 661px;
  margin: 0 auto 48px;
}

.tax-item-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  gap: 24px;
}

/* スマホ（幅640px以下）のときは1カラム */
@media (max-width: 640px) {
  .tax-item-wrap {
    grid-template-columns: 1fr; /* 縦に1列 */
  }
}

.tax-item {
  width: 100%;
  padding: 20px;
  border: 2px solid #004a9e;
  box-sizing: border-box;
  border-radius: 12px;
  background-color: #fff;
}

.tax-item strong {
  color: #004a9e;
  font-size: 24px;
}

.tax-item .fc-red {
  color: #e6000a;
  font-weight: bold;
}
.tax-item .fs-l {
  font-size: 24px;
}


/* -----------------------------------------------------------------------------
	gaichu
 -------------------------------------------------------------------------------*/
.gaichu {
}
.gaichu-catch {
  text-align: center;
  line-height: 1.4;
}
.gaichu-catch p {
  font-size: 48px;
  font-weight: bold;
}
.gaichu-catch p .border {
  border-bottom: 3px solid #004a9e;
}
.gaichu-catch img {
  display: block;
  width: 100%;
  max-width: 1041px;
  height: auto;
  margin: 40px auto;
}
.gaichu-description {
  max-width: 1100px;
  margin: 0 auto;
}
.gaichu-description .fc-blue {
  color: #004a9e;
}


/* -----------------------------------------------------------------------------
	line
 -------------------------------------------------------------------------------*/
.line {
  margin-top: 60px;
  padding: 48px 20px;
  box-sizing: border-box;
  background-color: #f2fff2;
}
.line-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.line .catch {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #002828;
  font-size: 36px;
  margin-bottom: 1em;
}
.line .catch .line-icon {
  display: inline-block;
  margin-right: 6px;
}
.line .line-content {
  display: flex;
  gap: 36px;
  margin-bottom: 36px;
}
.line .line-content .line-img {
  width: 100%;
  max-width: 476px;
  height: auto;
}
.line .line-content .line-description p {
  margin-top: 0;
  font-size: 112.5%;
}
.line-btn {
  display: inline-block;
	width:100%;
	height:auto;
	max-width:185px;
	max-height:105px;
  margin-top: 1em;
}
@media (max-width:1200px) {
  .line .catch {
    font-size: 30px;
  }
  .line .line-content {
    flex-wrap: wrap;
  }
  .line .line-content .line-img {
    margin: 0 auto;
  }
}


/* -----------------------------------------------------------------------------
	tire-keep
 -------------------------------------------------------------------------------*/
.tire-keep {
  margin-bottom: 60px;
  padding: 48px 20px;
  background-color: #eee;
}
.tire-keep-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.tire-keep .tire-keep-title {
  display: block;
  margin-bottom: 30px;
  color: #555;
  font-size: 36px;
  text-align: center;
}
.tire-keep .tire-keep-content {
  display: flex;
  gap: 36px;
  margin-bottom: 36px;
}
.tire-keep .tire-keep-content .tire-keep-img {
  width: 100%;
  max-width: 476px;
  height: auto;
}
.tire-keep .tire-keep-content .tire-keep-description p {
  margin-top: 0;
  font-size: 112.5%;
}
.tire-keep .tire-keep-content .tire-keep-description p .fs-l {
  font-size: 117.5%;
}
@media (max-width:1200px) {
  .tire-keep .tire-keep-title {
    font-size: 30px;
  }
  .tire-keep .tire-keep-content {
    flex-wrap: wrap;
  }
  .tire-keep .tire-keep-content .tire-keep-img {
    margin: 0 auto;
  }
}


/* -----------------------------------------------------------------------------
	choice
 -------------------------------------------------------------------------------*/
.choice {
  width: 100%;
}
.choice .choice-catch {
  margin-top: 50px;
  text-align: center;
}
.choice .choice-catch img {
  width: 100%;
  max-width: 819px;
  height: auto;
}
.choice .choice-maker img {
  width: 100%;
  height: auto;
}
@media (max-width:1400px) {
  .choice .choice-maker {
    margin-bottom: 24px;
  }
}
.choice .choice-custumise {
  display: flex;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 30px;
  box-sizing: border-box;
  background-color: #f2fcff;
  border: 1px solid #004a9e;
}
.choice .choice-custumise strong {
  display: block;
  width: 266px;
  margin-right: 30px;
  color: #004a9e;
  font-size: 36px;
  line-height: 1.1;
}
.choice .choice-custumise p {
  width: calc(100% - 300px);
  margin: 0;
  font-size: 18px;
}
@media (max-width:1000px) {
  .choice .choice-custumise {
    flex-wrap: wrap;
    justify-content: center;
  }
  .choice .choice-custumise strong {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  .choice .choice-custumise p {
    width: 100%;
  }
}


/* -----------------------------------------------------------------------------
	lease-end
 -------------------------------------------------------------------------------*/
.lease-end {
  margin-top: 60px;
}
.lease-end .mark-p {
  margin-bottom: 30px;
}


/* -----------------------------------------------------------------------------
	insurance
 -------------------------------------------------------------------------------*/
.insurance {
  margin-top: 60px;
}


/* -----------------------------------------------------------------------------
	faq
 -------------------------------------------------------------------------------*/
.accordion-header {
  padding: 0.5em 2.5em 0.5em 1em;
  margin-bottom: 0.5em;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
  color:#014099;
  font-size: 150%;
  font-weight: bold;
}

.accordion-header::before,
.accordion-header::after{
  position:absolute;
  content:'';
  top:1px;
  right:20px;
  bottom:0;
  width:16px;
  height:2px;
  margin:auto;
  background: #014099;
}
.accordion-header::after{
  transform:rotate(-90deg);
  transition:transform 0.3s;
}
.accordion-header.active::after{transform:rotate(0deg);}

.accordion-content {
  display: none;
  background-color: #cfe2fe;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  font-size: 150%;
}

.accordion-header span,
.accordion-content span{
  position: relative;
}

.accordion-header span::before{
  content:"Q：";
  display: inline-block;
}


.accordion-content span::before{
  content:"A：";
  display: inline-block;
  color: #151E2F;
}

/* hover */
.accordion-header:hover {
  background-color: #f2fcff;
}
@media (max-width:640px) {
  .accordion-header {
    font-size: 112.5%;
  }
  .accordion-content {
    font-size: 112.5%;
  }
}