@charset "utf-8";
/* ===================================================================
  style info : ヘッダーやフッターなどサイト内共通
=================================================================== */

/*----------------------------------------------------
	共通
----------------------------------------------------*/
body {
  font-family: "M PLUS 1p", sans-serif;
  background-color: #ffffff;
  color: #151515;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.075em;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

/*----------------------------------------------------
  リンク
----------------------------------------------------*/
a:link,
a:visited,
a:hover,
a:active {
  color: #151515;
  text-decoration: none;
  transition: all .5s ease;
}

/* -----------------------------------------------------------
  .grad_bg
----------------------------------------------------------- */
.grad_bg {
  background: linear-gradient(190deg, #e6e33a 0%, #ddd928 7%, #74d680 50%, #05bbff 100%);
}

/* -----------------------------------------------------------
  .elt_br_sp
----------------------------------------------------------- */
.elt_br_sp {
  display: none;
}

/* -----------------------------------------------------------
  .decoration
----------------------------------------------------------- */
.decoration {
  position: absolute;
  z-index: 0;
}

/* -----------------------------------------------------------
  .note
----------------------------------------------------------- */
.note {
  display: flex;
}

.note:before {
  content: "※";
  margin-right: 0.1em;
}

/* -----------------------------------------------------------
  .list
----------------------------------------------------------- */
.list {
  line-height: 1.4;
}

.list > li {
  display: flex;
  margin-top: 0.25em;
}

.list > li:first-of-type {
  margin-top: 0;
}

.list > li:before {
  content: "・";
  margin-right: 0.15em;
  margin-left: -0.05em;
}

/* -----------------------------------------------------------
  .button_box
----------------------------------------------------------- */
.button_box {
  display: flex;
  justify-content: center;
}

/* -----------------------------------------------------------
  .btn
----------------------------------------------------------- */
.btn {
  color: #00a0e9 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.0rem;
  font-weight: 700;
  height: 65px;
  width: 500px;
  padding: 0.5em;
  position: relative;
  z-index: 0;
}

.btn:before {
  background: linear-gradient(90deg, #e6e33a 0%, #ddd928 7%, #74d680 50%, #05bbff 100%);
  border-radius: 100px;
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}

.btn:after {
  background-color: #ffffff;
  border-radius: 100px;
  content: "";
  height: calc(100% - calc(3px * 2));
  width: calc(100% - calc(3px * 2));
  position: absolute;
  left: 3px;
  top: 3px;
  z-index: -1;
}

.btn:hover {
  color: #ffffff !important;
}

.btn:hover:after {
  background: linear-gradient(90deg, #e6e33a 0%, #ddd928 7%, #74d680 50%, #05bbff 100%);
}

/* -----------------------------------------------------------
  .btn_arrow
----------------------------------------------------------- */
.btn_arrow {
  background: linear-gradient(90deg, #05bbff 0%, #74d680 50%, #ddd928 93%, #e6e33a 100%);
  border-radius: 100px 0 0 100px;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.0rem;
  font-weight: 700;
  height: 60px;
  width: 350px;
  margin-left: -40px;
  padding: 0.5em 0.5em 0.5em 40px;
  position: relative;
  z-index: 0;
}

.btn_arrow:hover {
  background: linear-gradient(90deg, #e6e33a 0%, #ddd928 7%, #74d680 50%, #05bbff 100%);
}

.btn_arrow:after {
  border-bottom: 30px solid transparent;
  border-left: 40px solid #e6e33a;
  border-top: 30px solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
}

.btn_arrow:hover:after {
  border-left: 40px solid #05bbff;
}

/* -----------------------------------------------------------
  .inner
----------------------------------------------------------- */
.inner {
  max-width: 1080px;
  min-width: 810px;
  width: calc(100% - 10vw);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* -----------------------------------------------------------
  .heading
----------------------------------------------------------- */
.heading .lead {
  font-size: 2.8rem;
  font-weight: 500;
  margin-left: calc(110px + 20px);
}

/* -----------------------------------------------------------
  .headline_box
----------------------------------------------------------- */
#lower .headline_box {
  padding: 7.5vw 0;
  position: relative;
}

#lower .headline_box .headline {
  font-size: 4.0rem;
  font-weight: 700;
  text-align: center;
}

/* -----------------------------------------------------------
  .hd
----------------------------------------------------------- */
.hd_01 {
  display: flex;
  align-items: center;
  font-size: 4.0rem;
  font-weight: 700;
}

.hd_01 .num {
  background-image: url("../img/common/parts_00.svg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  width: 110px;
}

.hd_01 .ttl {
  margin-left: 20px;
}

/* -----------------------------------------------------------
  .main
----------------------------------------------------------- */
#lower .m_main .main {
  height: 150px;
}

/* -----------------------------------------------------------
  .container
----------------------------------------------------------- */
#lower .container {
  overflow: clip;
  padding: 0 5vw;
  position: relative;
}

/* -----------------------------------------------------------
  .wrap
----------------------------------------------------------- */
.wrap {
  margin-top: 5vw;
}

/* -----------------------------------------------------------
  .contents
----------------------------------------------------------- */
.contents {
  margin-top: 3vw;
}

/* -----------------------------------------------------------
  .article_box
----------------------------------------------------------- */
.m_main .container .article_box {
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 10vw;
}

.m_main .container .article_box .txt_box {
  flex: 1 1;
  margin-left: 5vw;
}

.m_main .container .article_box .txt_box .news_head .news_date {
  font-size: 1.9rem;
  font-weight: 500;
}

.m_main .container .article_box .txt_box .news_head .news_subtitle {
  display: block;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 0.5em;
}

.m_main .container .article_box .txt_box .news_head .news_title {
  font-size: 2.9rem;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 0.5em;
}

.m_main .container .article_box .txt_box .news_body {
  margin-top: 1em;
}

.m_main .container .article_box .txt_box .news_body > p {
  line-height: 1.8;
}

.m_main .container .article_box .txt_box .news_body > p:not(:first-of-type) {
  margin-top: 1em;
}

.m_main .container .article_box .txt_box .news_body > .list {
  margin-top: 1em;
}

.m_main .container .article_box .txt_box .news_button {
  display: flex;
  justify-content: center;
  margin-top: 2vw;
}

.m_main .container .article_box .pic_box {
  flex: 0 1 35%;
}

.m_main .container .article_box .pic_box picture a:hover {
  opacity: 0.5;
}

/* .m_main .container .article_box .pic_box img {
  aspect-ratio: 5/4;
  object-fit: cover;
} */

.m_main .container .button_box {
  margin-top: 10vw;
}

/* -----------------------------------------------------------
  .m_footer
----------------------------------------------------------- */
.m_footer {
  overflow: clip;
  padding-bottom: 9vw;
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 10vw;
  position: relative;
}

.m_footer .diagonal_01 {
  bottom: -15vw;
  left: -15vw;
  height: 623.0565px;
  width: 711.8104px;
}

.m_footer .wave_01 {
  bottom: 10vw;
  right: 15vw;
  height: 67.3224px;
  width: 86.0997px;
}

.m_footer .footer_box {
  display: flex;
  justify-content: center;
}

.m_footer .footer_box .footer_logo {
  position: relative;
  z-index: 1;
  width: 320px;
}