@charset "UTF-8";
/* Scss Document */
.inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 0;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
}
h2 span {
  display: block;
}
h2 .en {
  font-family: "Times New Roman", serif;
  color: #000;
  font-size: 50px;
  letter-spacing: 0.1em;
  line-height: 1;
  font-weight: 400;
}
h2 .ja {
  color: #BCBCBC;
  letter-spacing: 0.05em;
  line-height: 1.25;
  margin-top: 0.5em;
}

.link_bottom {
  text-align: right;
  margin-top: 30px;
}
.link_bottom a {
  position: relative;
  display: inline-block;
  padding-left: 2.125em;
  transition: all 0.4s;
}
.link_bottom a::before {
  position: absolute;
  content: "";
  background: url(../../Contents/ImagesPkg/top_new/arrow_circle_right.svg) no-repeat center/contain;
  width: 1.5em;
  height: 1.5em;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
}
.link_bottom a:hover {
  opacity: 0.7;
}
.link_bottom a:hover::before {
  transform: translateY(-50%) translateX(5px);
  opacity: 0.7;
}

.fv .inner {
  max-width: 100%;
  width: 100%;
  max-height: 560px;
  height: 560px;
  padding: 0;
  display: flex;
}
.fv .inner .fv_slider {
  width: 50%;
  height: 100%;
}
.fv .inner .fv_slider .slick-slide img {
  width: 100%;
  height: 560px;
  -o-object-fit: cover;
     object-fit: cover;
}
.fv .inner .fv_slider.slick-dotted.slick-slider {
  margin-bottom: 0;
}
.fv .inner .fv_slider.slick-dotted.slick-slider .slick-dots {
  bottom: 35%;
  left: 100%;
}
.fv .inner .fv_slider.slick-dotted.slick-slider .slick-dots li button::before {
  color: #fff;
}
.fv .inner .fixed {
  width: 50%;
  background: linear-gradient(240deg, #004C71 0%, #002638 100%);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 25px;
}
.fv .inner .fixed figure {
  margin-top: -45px;
  width: 278px;
}
.fv .inner .fixed p {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #F0F4F9;
  letter-spacing: 0.2em;
}

.products .contents h3 {
  position: relative;
  padding-left: 1.5em;
  font-weight: 700;
  margin-bottom: 1em;
  color: #004C71;
}
.products .contents h3::before {
  position: absolute;
  content: "―";
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-weight: 400;
}
.products .contents .series_list {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.products .contents .series_list li {
  border-radius: 5px;
  overflow: hidden;
  background: #F0F4F9;
  border: solid 1px #F0F4F9;
  min-height: 100px;
  transition: all 0.4s;
}
.products .contents .series_list li a {
  display: block;
  height: 100%;
}
.products .contents .series_list li a .flex {
  display: flex;
  align-items: center;
  height: 100%;
}
.products .contents .series_list li a .flex picture {
  width: 36%;
  height: 100%;
}
.products .contents .series_list li a .flex picture img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.products .contents .series_list li a .flex .text {
  text-align: center;
  width: 64%;
  color: #004C71;
  letter-spacing: 0.05em;
}
.products .contents .series_list li a .flex .text h4 {
  font-weight: 700;
}
.products .contents .series_list li a .flex .text p {
  font-weight: 400;
  font-size: 12px;
}
.products .contents .series_list li:hover {
  border: solid 1px #004C71;
  background: #004C71;
}
.products .contents .series_list li:hover a .flex .text {
  color: #fff;
}
.products .contents .category_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.products .contents .category_list li a {
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #F0F4F9;
  color: #004C71;
  font-weight: 700;
  min-height: 70px;
  transition: all 0.4s;
  letter-spacing: 0.05em;
}
.products .contents .category_list li a:hover {
  background: #004C71;
  color: #fff;
}
.products .contents + .contents {
  margin-top: 50px;
}

.about_us {
  text-align: center;
  background: linear-gradient(180deg, rgba(188, 188, 188, 0) 0%, #BCBCBC 100%), url(../../Contents/ImagesPkg/top_new/back_about_us.png) no-repeat top 52% center/116%;
  background-blend-mode: multiply, normal;
}
.about_us h2 span {
  color: #fff;
}
.about_us .contents p {
  color: #fff;
  font-weight: 400;
  font-size: 14px;
  line-height: 2.3;
  letter-spacing: 0.05em;
  text-align: center;
}
.about_us .contents .to_detail {
  margin: 50px auto 0;
}
.about_us .contents .to_detail a {
  position: relative;
  width: 350px;
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  letter-spacing: 0.1em;
  padding: 1.7em 0;
  transition: all 0.4s;
}
.about_us .contents .to_detail a::before {
  position: absolute;
  content: "";
  background: url(../../Contents/ImagesPkg/top_new/arrow_right.svg) no-repeat center/contain;
  width: 3.6px;
  height: 7.2px;
  top: 50%;
  right: 1.875em;
  transform: translateY(-50%);
}
.about_us .contents .to_detail a:hover {
  opacity: 0.7;
}

.ranking_item {
  background: #F0F4F9;
}
.ranking_item .contents .ranking_list {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ranking_item .contents .ranking_list li {
  counter-increment: ranking;
  position: relative;
}
.ranking_item .contents .ranking_list li a {
  display: block;
}
.ranking_item .contents .ranking_list li a .image {
  background: #fff;
}
.ranking_item .contents .ranking_list li a .image img {
  transition: all 0.4s;
  max-height: 320px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
}
.ranking_item .contents .ranking_list li a .image + div {
  margin-top: 20px;
}
.ranking_item .contents .ranking_list li a .text {
  text-align: center;
}
.ranking_item .contents .ranking_list li a .text h3 {
  letter-spacing: 0.05em;
  color: #000;
}
.ranking_item .contents .ranking_list li a .text .price {
  font-weight: 400;
}
.ranking_item .contents .ranking_list li a .text .price .number {
  font-family: "Inter", sans-serif;
}
.ranking_item .contents .ranking_list li a:hover .image img {
  opacity: 0.8;
}
.ranking_item .contents .ranking_list li::before {
  position: absolute;
  content: counter(ranking);
  background: #AD002D;
  width: 60px;
  height: 60px;
  border-radius: 0 0 20px 0;
  font-size: 24px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Times New Roman", serif;
  font-weight: 400;
  z-index: 1;
}

.for_first_time h2 {
  margin-bottom: 0;
  text-align: left;
}
.for_first_time h2 span {
  color: #fff;
}
.for_first_time .contents .link_wrap a {
  height: 400px;
  background: linear-gradient(180deg, #BCBCBC 0%, #BCBCBC 100%), url(../../Contents/ImagesPkg/top_new/back_for_first_time.png) no-repeat top 78% left 1.5%/129%;
  background-blend-mode: multiply, normal;
  display: flex;
  align-items: flex-end;
  padding: 50px;
  transition: all 0.8s;
}
.for_first_time .contents .link_wrap a:hover {
  opacity: 0.8;
}
.for_first_time .contents .link_wrap + p {
  margin-top: 20px;
}
.for_first_time .contents p {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.news .inner {
  padding: 0 0 80px;
}
.news .topic_list .item .date {
  font-weight: 600;
  font-family: "Inter", sans-serif;
  font-size: 16px;
}
.news .topic_list .item .date + .title {
  margin-top: 10px;
}
.news .topic_list .item .title {
  color: #000;
  font-size: 14px;
}
.news .topic_list .item + li {
  margin-top: 20px;
  padding-top: 20px;
  border-top: solid 1px #E3E3E3;
}
.news .topic_list .item:nth-child(n+4) {
  display: none;
}

.other_contents {
  background: #004C71;
}
.other_contents .contents .top .main_list {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.other_contents .contents .top .main_list li a {
  height: 250px;
  padding: 30px;
  display: flex;
  align-items: flex-end;
  transition: all 0.8s;
}
.other_contents .contents .top .main_list li a h2 {
  text-align: left;
  margin-bottom: 0;
}
.other_contents .contents .top .main_list li a h2 span {
  color: #fff;
}
.other_contents .contents .top .main_list li a:hover {
  opacity: 0.8;
}
.other_contents .contents .top .main_list li.how_to a {
  background: linear-gradient(180deg, #BCBCBC 0%, #BCBCBC 100%), url(../../Contents/ImagesPkg/top_new/back_how_to.png) no-repeat top 1% left 3%/cover;
  background-blend-mode: multiply, normal;
}
.other_contents .contents .top .main_list li.user_voice a {
  background: linear-gradient(180deg, #BCBCBC 0%, #BCBCBC 100%), url(../../Contents/ImagesPkg/top_new/back_user_voice.png) no-repeat top 27% left 29%/129%;
  background-blend-mode: multiply, normal;
}
.other_contents .contents .top + div {
  margin-top: 40px;
}
.other_contents .contents .bottom .second_list {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.other_contents .contents .bottom .second_list li a {
  text-align: center;
  display: block;
  background: #fff;
  color: #004C71;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 5px;
  padding: 1.75em 0;
  transition: all 0.4s;
}
.other_contents .contents .bottom .second_list li a:hover {
  opacity: 0.7;
}

.faq .inner {
  max-width: 860px;
}
.faq .contents .faq_list li .accordion {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}
.faq .contents .faq_list li .accordion p {
  font-size: 14px;
}
.faq .contents .faq_list li .accordion p.tag span {
  display: inline-block;
  text-align: center;
  padding: 0.1em 0 0.25em;
  border: solid 1px #004C71;
  color: #004C71;
  width: 100px;
  border-radius: 5px;
}
.faq .contents .faq_list li .accordion::after {
  position: absolute;
  content: "";
  background: url(../../Contents/ImagesPkg/top_new/arrow_circle_right.svg) no-repeat center/contain;
  width: 1.7em;
  height: 1.7em;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(90deg);
}
.faq .contents .faq_list li .accordion.open::after {
  transform: translateY(-50%) rotate(-90deg);
}
.faq .contents .faq_list li .accordion + div {
  margin-top: 10px;
}
.faq .contents .faq_list li .accodion_content {
  display: none;
  padding-left: 120px;
  font-weight: 400;
}
.faq .contents .faq_list li .accodion_content p {
  font-size: 14px;
}
.faq .contents .faq_list li + li {
  margin-top: 20px;
  padding-top: 20px;
  border-top: solid 1px #E3E3E3;
}/*# sourceMappingURL=top_new.css.map */