@charset "UTF-8";

/**
 * index.css
 *
 * #
 *
*/

/* ==========================================================================
   #common
   ========================================================================== */

.ttl {
  margin-bottom: 40px;
  font-size: 38px;
  line-height: 1.2;
  text-align: center;
}
.ttl .sub {
  font-size: 24px;
}

.num {
  margin-bottom: 15px;
  font-size: 0;
}
.num .gra {
  font-size: 16px;
  line-height: 1;
}
.num-ttl {
  margin-bottom: 20px;
  font-size: 36px;
  line-height: 1.5;
}
.num-txt {
  font-size: 16px;
  line-height: 1.8;
}

@media screen and (max-width:500px) {
  .num-ttl {
    font-size: 24px;
  }
}

/* ==========================================================================
   #mainimg
   ========================================================================== */
.l-mainimg {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 0 80px;
}

.mainimg-main {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.mainimg-main-txt {
  flex: 1 1 0;
}
.mainimg-main-txt .sub {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.mainimg-main-txt .catch {
  margin-bottom: 20px;
  font-size: 40px;
  line-height: 1.3;
}
.mainimg-main-txt .txt {
  font-size: 16px;
  line-height: 1.6;
}

.mainimg-main-img {
  width: 503px;
}

.mainimg-award {
  display: flex;
  justify-content: space-around;
}
.mainimg-award-item {
  width: 240px;
}

@media screen and (max-width:500px) {
  
  .l-mainimg {
    padding: 40px 15px;
  }
  
  .mainimg-main {
    flex-direction: column;
  }
  
  .mainimg-main-txt .sub {
    font-size: 14px;
  }
  
  .mainimg-main-txt .catch {
    font-size: 30px;
  }
  
  .mainimg-main-txt .txt {
    font-size: 14px;
  }
  
  .mainimg-main-img {
    width: 100%;
  }
  
  .mainimg-award {
    gap: 10px;
    flex-wrap: wrap;
  }
  .mainimg-award-item {
    width: calc((100% - 10px) / 2);
  }
  
}

/* ==========================================================================
   #cta
   ========================================================================== */
.l-cta {
  padding: 40px 0;
  text-align: center;
  background-color: #10151D;
}

.cta-txt {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.cta-btn {
  display: block;
  width: max-content;
  margin: 0 auto;
  padding: 30px 80px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(to right, #189DEF, #C2207E);
  border-radius: 100px;
}

@media screen and (max-width:500px) {
  
  .cta-txt {
    font-size: 13px;
  }
  
  .cta-btn {
    padding: 20px 40px;
    font-size: 16px;
  }
  
}

/* ==========================================================================
   #issue
   ========================================================================== */
.l-issue {
  position: relative;
  padding: 80px 0 68px;
}
.l-issue:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 32px;
  height: 32px;
  background: url("../images/issue/arrow.png") no-repeat;
  background-size: contain;
  transform: translateX(-50%);
}

.issue-ttl {
  margin-bottom: 30px;
  font-size: 32px;
  line-height: 1.5;
  text-align: center;
}

.issue-list {
  display: flex;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto 30px;
}

.issue-list-item {
  flex: 1 1 0;
  text-align: center;
  border-radius: 8px;
  background-color: #10151D;
}

.issue-list-item .head-wrap {
  position: relative;
  padding: 30px 0;
  background-color: #fff;
  border-radius: 8px 8px 0 0;
}
.issue-list-item .head-wrap:before {
  content: "";
  position: absolute;
  bottom: -10px;
  border-top: 10px solid #fff;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  transform: translateX(-50%);
}
.issue-list-item .head-wrap .sub {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1;
}
.issue-list-item .head-wrap .head {
  color: #1B232D;
  font-size: 16px;
  line-height: 1.6;
}
.issue-list-item .contents {
  padding: 30px 0;
}
.issue-list-item .contents .head {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
.issue-list-item .contents .sub {
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.4;
}

.issue-comment {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

@media screen and (max-width:500px) {
  
  .l-issue {padding: 40px 15px;}
  
  .issue-ttl {
    font-size: 24px;
  }
  
  .issue-list {
    flex-direction: column;
  }
  
  .issue-comment {
    font-size: 24px;
  }
  
}

/* ==========================================================================
   #evidence
   ========================================================================== */
.l-evidence {
  padding: 40px 0 80px;
}

.evidence-list {
  display: flex;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto 20px;
}
.evidence-list-item {
  flex: 1 1 0;
  position: relative;
  padding: 84px 0 40px;
  text-align: center;
  background-color: #232E3B;
  border: 1px solid #404C5B;
  border-radius: 20px;
}
.evidence-list-item:before {
  content: "";
  position: absolute;
  top: 40px;
  width: 37px;
  height: 37px;
  background: url("../images/ico_check.png") no-repeat;
  background-size: contain;
  transform: translateX(-50%);
}
.evidence-list-item .head {
  font-size: 24px;
  line-height: 1.6;
}
.evidence-list-item .main {
  margin-bottom: 10px;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}
.evidence-list-item .txt {
  font-size: 16px;
  line-height: 1.6;
}

.evidence-note {
  max-width: 1000px;
  margin: 0 auto 20px;
  font-size: 13px;
  line-height: 1.6;
  text-align: right;
  opacity: 0.4;
}

.evidence-catch {
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.evidence-catch .sub {
  font-size: 24px;
}

.evidence-comment {
  width: max-content;
  margin: 0 auto;
  padding: 10px 20px;
  color: #1B232D;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  background-color: #fff;
  border-radius: 100px;
}

@media screen and (max-width:500px) {
  
  .l-evidence {
    padding: 20px 15px 40px;
  }
  
  .evidence-list {
    flex-direction: column;
  }
  
  .evidence-catch {
    font-size: 32px;
  }
  
  .evidence-catch .sub {
    font-size: 18px;
  }
  .evidence-comment {
    width: 100%;
    font-size: 14px;
  }
}


/* ==========================================================================
   #function
   ========================================================================== */
.l-function {
  padding: 80px 0;
  background-color: #232E3B;
}

.function-list {
  max-width: 1000px;
  margin: 0 auto;
}
.function-list-item {
  display: flex;
  gap: 32px;
}
.function-list-item.left {
  flex-direction: row-reverse;
}
.function-list-item.right {
  flex-direction: row;
}
.function-list-item + .function-list-item  {
  margin-top: 40px;
}

.function-list-item .img {
  width: 428px;
}

.function-list-item .info {
  flex: 1 1 0;
}

@media screen and (max-width:500px) {
  
  .l-function {
    padding: 40px 15px;
  }
  
  .function-list-item.left,
  .function-list-item.right {
    flex-direction: column;
  }
  
  .function-list-item .img {
    width: 100%;
  }
}

/* ==========================================================================
   #flow
   ========================================================================== */
.l-flow {
  padding: 80px 0;
}

.flow-list {
  max-width: 1000px;
  margin: 0 auto;
}

.flow-list-item {
  display: flex;
  align-items: center;
  gap: 40px;
}
.flow-list-item + .flow-list-item {
  margin-top: 30px;
}
.flow-list-item .img {
  width: 220px;
}

.flow-list-item .info {
  flex: 1 1 0;
}

@media screen and (max-width:500px) {
  
  .l-flow {
    padding: 40px 15px;
  }
  
  .flow-list-item {
    flex-direction: column;
  }
  
}


/* ==========================================================================
   #security
   ========================================================================== */
.l-security {
  padding: 80px 0;
  background-color: #10151D;
}

.security-lsit {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.security-lsit-item {
  flex: 0 1 0;
}
.security-lsit-item .ttl {
  margin-bottom: 10px;
  text-align: center;
}
.security-lsit-item .ttl img {

  max-width: 220px;
}
.security-lsit-item .txt {
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
  white-space: nowrap;
}

@media screen and (max-width:500px) {
  
  .security-lsit {
    flex-direction: column;
  }
}

/* ==========================================================================
   #price
   ========================================================================== */
.l-price {
  padding: 80px 0;
}

.prcie-txt {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  text-align: center;
}

.prcie-txt .price {
  font-size: 56px;
}

.prcie-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}
.prcie-list li {
  position: relative;
  padding: 4px 0 4px 29px;
  font-size: 16px;
  line-height: 1;
}
.prcie-list li:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: url("../images/ico_check.png") no-repeat;
  background-size: contain;
}

.price-comment {
  width: max-content;
  margin: 0 auto;
  padding: 10px 20px;
  color: #1B232D;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  background-color: #fff;
  border-radius: 100px;
}

@media screen and (max-width:500px) {
  
  .l-price {
    padding: 40px 15px;
  }
  
  .prcie-txt {
    font-size: 22px;
  }
  .prcie-txt .price {
    font-size: 32px;
  }
  
  .prcie-list {
    flex-direction: column;
    gap: 10px;
    width: max-content;
    margin: 0 auto 20px;
  }
  
  .price-comment {
    width: 100%;
    font-size: 14px;
  }
  
}