@charset "utf-8";

/* 共通　見出し部分 */

/* 水色線のタイトル */
.heading_line_lb {
  color: #36DFF2;
  font-size: 36px;
  font-weight: 700;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.95);
  position: relative;
  letter-spacing: 0;
  line-height: 1.56;
  display: inline-block;
  padding: 0 8px;
}
@media screen and (max-width: 767px) {
  .heading_line_lb {
    font-size: 6.933333333333333vw;
    padding: 0;
  }
}

.heading_line_lb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 4px;
  background: linear-gradient(to right, #36DFF2, #009DEF);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.95);
}
@media screen and (max-width: 767px) {
  .heading_line_lb::after {
    bottom: -4.266666666666667vw;
    height: 1.0666666666666667vw;
    line-height: 1.92;
  }
}

/* 白い線のタイトル */
.heading_line_wh {
  color: #FFFFFF;
  font-size: 36px;
  font-weight: 700;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.95);
  position: relative;
  letter-spacing: 0;
  line-height: 1.56;
  display: inline-block;
  padding: 0 8px;
}
@media screen and (max-width: 767px) {
  .heading_line_wh {
    font-size: 6.933333333333333vw;
    padding: 0;
    line-height: 1.92;
  }
}

.heading_line_wh::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 4px;
  background: #FFFFFF;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.95);
}
@media screen and (max-width: 767px) {
  .heading_line_wh::after {
    bottom: -4.266666666666667vw;
    height: 1.0666666666666667vw;
  }
}

/* KV */
#main_visual {
  height: 90vh;
  display: inline-block;
  background-image: url("../../images/incorporate/mv_bg.png");
}
@media screen and (max-width: 767px) {
  #main_visual {
    height: auto;
    background-image: url("../../images/incorporate/mv_bg_sp.png");
    padding: calc(10vw / 375 * 100) 0 calc(90vw / 375 * 100);
  }
}

#main_visual .main-head {
  font-family: "Zen Kaku Gothic New", sans-serif;
  display: inline-block;
  font-size: 32px;
  font-weight: 700;
  border: 1px solid #fff;
  padding: 0 32px;
  margin-bottom: 32px;
}
@media screen and (max-width: 767px) {
#main_visual .main-head {
  font-size: 6.4vw;
  padding: 0 5.066666666666666vw;
  margin-bottom: 6.666666666666667vw;
}
}

#main_visual .main-nav {
  max-width: 1200px;
  text-align: left;
  margin-left: 14px;
}
@media screen and (max-width: 767px) {
#main_visual .main-nav {
  margin-left: 14px;
}
}

#main_visual .main-nav p {
  display: inline-block;
  font-size: 20px;
  border-bottom: 1px solid #fff;
  margin-bottom: min(calc(67vw / 1200 * 100),67px);
  padding: 0 30px;
}
@media screen and (max-width: 767px) {
#main_visual .main-nav p {
  font-size: 4.266666666666667vw;
  margin-bottom: 10.666666666666668vw;
  padding: 0 5.333333333333334vw;
}
}

#main_visual .main-wrapper {
  max-width: 1200px;
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #main_visual .main-wrapper {
    min-height: auto;
    justify-content: center;
  }
}

#main_visual .ly-container{
padding: 0 6px;
}
@media screen and (max-width: 767px) {
  #main_visual .ly-container {
    padding: 0 calc(11vw / 375 * 100);
    margin: 0;
  }
}

#main_visual .main-ttl {
  font-size: 58px;
}
@media screen and (max-width: 767px) {
  #main_visual .main-ttl {
    font-size: 10.133333333333333vw;
  }
}

/* intro */
#intro {
  text-align: center;
  padding: 120px 0 66px;
}
@media screen and (max-width: 767px) {
  #intro {
    padding: 17.066666666666666vw 0;
  }
}

#intro .intro_txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-top: 56px;
}
@media screen and (max-width: 767px) {
  #intro .intro_txt {
    gap: 4.266666666666667vw;
    padding-top: 8.533333333333333vw;
  }
}

#intro .intro_txt p {
  color: #333333;
  background-color: #fff;
  font-size: 28px;
  font-weight: 700;
  max-width: 748px;
  width: 100%;
  margin: 0;
}
@media screen and (max-width: 767px) {
  #intro .intro_txt p {
    font-size: 6.4vw;
    line-height: 1.5;
    text-align: left;
    padding: 4.266666666666667vw;
    margin: 0;
  }
}

/* supply */
#supply {
  text-align: center;
  padding: 64px 0;
}
@media screen and (max-width: 767px) {
#supply {
  text-align: center;
  padding: 11.733333333333333vw 0 17.066666666666666vw;
}
}

#supply .supply_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#supply .supply_txt {
  font-size: 24px;
  margin: 64px 0 48px;
}
@media screen and (max-width: 767px) {
  #supply .supply_txt {
    text-align: left;
    font-size: 4.8vw;
    margin: 8.533333333333333vw 0 6.4vw;
  }
}

#supply .supply_logo {
  max-width: 796px;
  margin-bottom: 56px;
}
@media screen and (max-width: 767px) {
#supply .supply_logo {
  margin-bottom: 8.533333333333333vw;
}
}


#supply .supply_img {
  max-width: 613px;
}


/* optimal */
/* タブ・アコーディオン共通設定 */
.tab-contents .content-item {
  display: none; /* 初期非表示 */
}

/* タブ(PC)設定 */
@media (min-width: 768px) {
  .tab-buttons {
    display: flex;
  }

  .tab-buttons button{
    flex: 1;
    border: min(calc(2vw / 1320 * 100),2px) solid #fff;
    font-size: clamp(16px, min(calc(20vw / 1320 * 100),20px), 20px);
    text-align: center;
  }

    .tab-buttons button:hover {
      opacity: 0.7;
    }

  .tab-buttons button.active {
    background-color: #fff;
    color: #004499;
  }

    .tab-buttons button.active:hover {
      opacity: 1;
    }

  .accordion-header {
    display: none;
  }
  .tab-contents .content-item.active {
    display: block;
  }
}

/* アコーディオン(SP)設定 */
@media (max-width: 767px) {
  .tab-buttons {
    display: none;
  }

  .tab-contents .content-item {
    display: block;
    margin-bottom: calc(2vw / 375 * 100);
  }

  .accordion-header {
    display: block;
    cursor: pointer;
    background: #fff;
    padding: calc(11vw / 375 * 100) 0;
    text-align: center;
    color: #004499;
    font-size: calc(18vw / 375 * 100);
    font-weight: 700;
  }

  .accordion-body {
    display: none;
  }

  .accordion-body.active {
    display: block;
  }

  .accordion-header {
    position: relative;
    cursor: pointer;
  }

  .accordion-header::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: calc(24vw / 375 * 100);
    background-color: #004499;
    width: calc(14vw / 375 * 100);
    height: calc(12vw / 375 * 100);
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    transition: transform 0.3s;
  }

  .accordion-header.active::after {
    transform: translateY(-50%) rotate(180deg);
  }
}

#optimal {
  text-align: center;
  padding: 64px 0 56px;
}
@media (max-width: 767px) {
  #optimal {
    padding: 17.066666666666666vw 0;
  }
}

#optimal p {
  margin: 0;
}

#optimal img {
  margin: 0;
}

#optimal .ly-container {
  max-width: min(calc(1200vw / 1320 * 100),1200px);
  padding: 0;
}

@media (max-width: 767px) {
  #optimal .ly-container {
    max-width: calc(343vw / 375 * 100);
  }
}

#optimal .responsive-tabs-accordion {
  margin-top: 64px;
}

@media (max-width: 767px) {
  #optimal .responsive-tabs-accordion {
    margin-top: calc(32vw / 375 * 100);
  }
}

#optimal .accordion-body {
  padding: min(calc(40vw / 1320 * 100),40px) 0;
  border: min(calc(2vw / 1320 * 100),2px) solid #fff;
}

@media (max-width: 767px) {
  #optimal .accordion-body {
    padding: 0 calc(16vw / 375 * 100) calc(20vw / 375 * 100);
    border-width: calc(2vw / 375 * 100);
  }
}

#optimal .overview {
  margin: 0;
  text-align: center;
  font-size: clamp(16px, min(calc(24vw / 1320 * 100),24px), 24px);
  line-height: calc(29 / 24);
}

@media (max-width: 767px) {
  #optimal .overview {
    margin-top: calc(24vw / 375 * 100);
    font-size: calc(18vw / 375 * 100);
    line-height: calc(29/ 18);
  }

  #optimal .overview p:nth-child(2) {
    margin-top: calc(16vw / 375 * 100);
    text-align: left;
  }
}

#optimal .issue {
  display: flex;
  justify-content: center;
  gap: min(calc(120vw / 1320 * 100),120px);
  margin-top: min(calc(40vw / 1320 * 100),40px);
}

@media (max-width: 767px) {
  #optimal .issue {
    flex-direction: column;
    gap: calc(66vw / 375 * 100);
    margin-top: calc(24vw / 375 * 100);

  }
}

#optimal .issue dl {
  width: min(calc(474vw / 1320 * 100),474px);
  border: min(calc(2vw / 1320 * 100),2px) solid #fff;
  text-align: center;
  font-size: clamp(13px, min(calc(20vw / 1320 * 100),20px), 20px);
}

@media (max-width: 767px) {
  #optimal .issue dl {
    width: 100%;
    border-width: calc(2vw / 375 * 100);
  }
}

#optimal .issue dl:first-child {
  position: relative;
}

#optimal .issue dl:first-child::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: max(calc(-112vw / 1320 * 100),-112px);
  content: '';
  display: inline-block;
  width: min(calc(104vw / 1320 * 100),104px);
  height: min(calc(18vw / 1320 * 100),18px);
  background-image: url(../../images/incorporate/arrow.png);
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  #optimal .issue dl:first-child::after {
    top: unset;
    bottom: calc(-40vw / 375 * 100);
    right: 0;
    left: 0;
    margin: 0 auto;
    width: calc(52vw / 375 * 100);
    height: calc(9vw / 375 * 100);
    transform: rotate(90deg);
  }
}

#optimal .issue dt {
  background-color: #fff;
  width: min(calc(457vw / 1320 * 100),457px);
  margin: min(calc(6vw / 1320 * 100),6px) auto 0;
  color: #004499;
}

@media (max-width: 767px) {
  #optimal .issue dt {
    width: calc(293vw / 375 * 100);
    margin-top: calc(8vw / 375 * 100);
    font-size: calc(18vw / 375 * 100);
  }
}

#optimal .issue dd {
  display: flex;
  justify-content: center;
  align-items: center;
  height: min(calc(125vw / 1320 * 100),125px);
  line-height: calc(36 / 20);
}

@media (max-width: 767px) {
  #optimal .issue dd {
    display: block;
    width: calc(272vw / 375 * 100);
    margin: 0 auto;
    padding: calc(16vw / 375 * 100) 0;
    height: auto;
    text-align: left;
    font-size: calc(16vw / 375 * 100);
    line-height: calc(20 / 16);
    letter-spacing: 0;
  }
}

#optimal .products {
  margin-top: min(calc(48vw / 1320 * 100),48px);
}

@media (max-width: 767px) {
  #optimal .products {
    margin-top: calc(32vw / 375 * 100);
  }
}

#optimal .products_ttl {
  position: relative;
  margin: 0;
  text-align: center;
  color: #004499;
  font-size: min(calc(24vw / 1320 * 100),24px);
  font-weight: 700;
}

@media (max-width: 767px) {
  #optimal .products_ttl {
    font-size: calc(20vw / 375 * 100);
  }
}

#optimal .products_ttl::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  content: '';
  display: inline-block;
  background-color: #fff;
  width: min(calc(176vw / 1320 * 100),176px);
  height: min(calc(41vw / 1320 * 100),41px);
  transform: skewX(-25deg);
  z-index: -1;
}

@media (max-width: 767px) {
  #optimal .products_ttl::before {
    width: calc(153vw / 375 * 100);
    height: calc(33vw / 375 * 100);
  }
}

#optimal .products_box {
  display: flex;
  justify-content: center;
  gap: min(calc(40vw / 1320 * 100),40px);
  margin-top: min(calc(32vw / 1320 * 100),32px);
}

@media (max-width: 767px) {
  #optimal .products_box {
    flex-direction: column;
    gap: calc(24vw / 375 * 100);
    margin-top: calc(24vw / 375 * 100);
  }
}

#optimal .products_item {
  width: min(calc(350vw / 1320 * 100),350px);
}

@media (max-width: 767px) {
  #optimal .products_item {
    width: 100%;
  }
}

#optimal .prime-link {
  display: flex;
  align-items: center;
  height: min(calc(220vw / 1320 * 100),220px);
  /* border: min(calc(1vw / 1320 * 100),2px) solid #fff; */
}

@media (max-width: 767px) {
  #optimal .prime-link {
    height: calc(297vw / 375 * 100);
    /* border-width: calc(1vw / 375 * 100); */
  }
}

#optimal .prime-link .inner {
  width: min(calc(326vw / 1320 * 100),326px);
  margin: 0 auto;
}

@media (max-width: 767px) {
  #optimal .prime-link .inner {
    width: calc(296vw / 375 * 100);
  }
}

#optimal .prime-link_ttl {
  text-align: center;
  line-height: normal;
}

#optimal .prime-link_ttl p {
  margin: 0;
}

#optimal .prime-link_ttl p:nth-of-type(1) {
  font-size: min(calc(10vw / 1320 * 100),10px);
}

@media (max-width: 767px) {
  #optimal .prime-link_ttl p:nth-of-type(1) {
    font-size: calc(10vw / 375 * 100);
  }
}

#optimal .prime-link_ttl p:nth-of-type(2) {
  font-size: min(calc(32vw / 1320 * 100),32px);
}

@media (max-width: 767px) {
  #optimal .prime-link_ttl p:nth-of-type(2) {
    font-size: calc(34vw / 375 * 100);
  }
}

#optimal .prime-link_ttl p:nth-of-type(3) {
  font-size: min(calc(11vw / 1320 * 100),11px);
  line-height: calc(17 / 11);
}

@media (max-width: 767px) {
  #optimal .prime-link_ttl p:nth-of-type(3) {
    font-size: calc(12vw / 375 * 100);
    line-height: calc(21/ 12);
  }
}

#optimal .prime-link_box {
  display: flex;
  justify-content: center;
  gap: min(calc(10vw / 1320 * 100),10px);
  margin-top: min(calc(9vw / 1320 * 100),9px);
}

@media (max-width: 767px) {
  #optimal .prime-link_box {
    gap: calc(4vw / 375 * 100);
    margin-top: calc(16vw / 375 * 100);
  }
}

#optimal .prime-link_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  width: min(calc(102vw / 1320 * 100),102px);
  height: min(calc(80vw / 1320 * 100),80px);
}

@media (max-width: 767px) {
  #optimal .prime-link_item {
    width: calc(96vw / 375 * 100);
    height: calc(98vw / 375 * 100);
  }
}

#optimal .prime-link_item:nth-child(1) img {
  width: min(calc(38vw / 1320 * 100),38px);
  margin-bottom: min(calc(4vw / 1320 * 100),4px);
}

@media (max-width: 767px) {
  #optimal .prime-link_item:nth-child(1) img {
    width: calc(38vw / 375 * 100);
    margin-bottom: calc(7vw / 375 * 100);
  }
}

#optimal .prime-link_item:nth-child(2) img {
  width: min(calc(44vw / 1320 * 100),44px);
  margin-bottom: min(calc(7vw / 1320 * 100),7px);
}

@media (max-width: 767px) {
  #optimal .prime-link_item:nth-child(2) img {
    width: calc(44vw / 375 * 100);
    margin-bottom: calc(10vw / 375 * 100);
  }
}

#optimal .prime-link_item:nth-child(3) img {
  width: min(calc(42vw / 1320 * 100),42px);
  margin-bottom: min(calc(7vw / 1320 * 100),7px);
}

@media (max-width: 767px) {
  #optimal .prime-link_item:nth-child(3) img {
    width: calc(42vw / 375 * 100);
    margin-bottom: calc(11vw / 375 * 100);
  }
}

#optimal .prime-link_item p {
  color: #004499;
  margin: 0;
  font-size: min(calc(11vw / 1320 * 100),11px);
  line-height: calc(14 / 11);
}

@media (max-width: 767px) {
  #optimal .prime-link_item p {
    font-size: calc(11vw / 375 * 100);
  }
}

#optimal .prime-link_txt {
  margin: min(calc(8vw / 1320 * 100),8px) 0 0;
  text-align: center;
  font-size: min(calc(10vw / 1320 * 100),10px);
  letter-spacing: 0;
}

@media (max-width: 767px) {
  #optimal .prime-link_txt {
    margin-top: calc(16vw / 375 * 100);
    font-size: calc(10vw / 375 * 100);
    line-height: calc(18 / 10);
  }
}

#optimal .survey {
  display: flex;
  align-items: center;
  height: min(calc(220vw / 1320 * 100),220px);
  /* border: min(calc(1vw / 1320 * 100),2px) solid #fff; */
}

@media (max-width: 767px) {
  #optimal .survey {
    height: calc(297vw / 375 * 100);
    /* border-width: calc(1vw / 375 * 100); */
  }
}

#optimal .survey .inner {
  position: relative;
  width: min(calc(329vw / 1320 * 100),329px);
  margin: 0 auto;
}

@media (max-width: 767px) {
  #optimal .survey .inner {
    width: calc(296vw / 375 * 100);
  }
}

#optimal .survey .logo {
  position: absolute;
  top: 0;
  right: 0;
  width: min(calc(29vw / 1320 * 100),29px);
}

@media (max-width: 767px) {
  #optimal .survey .logo {
    width: calc(29vw / 375 * 100);
    margin-top: calc(-15vw / 375 * 100);
  }
}

#optimal .survey_ttl {
  text-align: center;
}

#optimal .survey_ttl p:nth-child(1) {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(calc(137vw / 1320 * 100),137px);
  height: min(calc(23vw / 1320 * 100),23px);
  margin: 0 auto;
  border-radius: min(calc(12vw / 1320 * 100),12px);
  background-color: #fff;
  color: #004499;
  font-size: min(calc(10vw / 1320 * 100),10px);
}

@media (max-width: 767px) {
  #optimal .survey_ttl p:nth-child(1) {
    width: calc(137vw / 375 * 100);
    height: calc(23vw / 375 * 100);
    border-radius: calc(23vw / 375 * 100);
    font-size: calc(10vw / 375 * 100);
  }
}

#optimal .survey_ttl p:nth-child(1)::after {
  position: absolute;
  bottom: max(calc(-7vw / 1320 * 100),-7px);
  left: 50%;
  transform: translateX(-50%);
  content: '';
  display: block;
  background-color: #fff;
  width: min(calc(11vw / 1320 * 100),11px);
  height: min(calc(10vw / 1320 * 100),10px);
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

@media (max-width: 767px) {
  #optimal .survey_ttl p:nth-child(1)::after {
    bottom: calc(-7vw / 375 * 100);
    width: calc(11vw / 375 * 100);
    height: calc(10vw / 375 * 100);
  }
}

#optimal .survey_ttl p:nth-child(2) {
  font-size: min(calc(28vw / 1320 * 100),28px);
  font-weight: 700;
}

@media (max-width: 767px) {
  #optimal .survey_ttl p:nth-child(2) {
    font-size: calc(26vw / 375 * 100);
  }
}

#optimal .survey_ttl p:nth-child(3) {
  font-size: min(calc(11vw / 1320 * 100),11px);
}

@media (max-width: 767px) {
  #optimal .survey_ttl p:nth-child(3) {
    font-size: calc(12vw / 375 * 100);
  }
}

#optimal .survey_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: min(calc(5vw / 1320 * 100),5px);
}

@media (max-width: 767px) {
  #optimal .survey_box {
    gap: calc(6vw / 375 * 100);
    justify-content: center;
    margin-top: calc(16vw / 375 * 100);
  }
}

#optimal .survey_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  width: min(calc(162vw / 1320 * 100),162px);
  height: min(calc(50vw / 1320 * 100),50px);
  color: #004499;
  font-size: min(calc(14vw / 1320 * 100),14px);
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 767px) {
  #optimal .survey_item {
    width: calc(135vw / 375 * 100);
    height: calc(69vw / 375 * 100);
    font-size: calc(14vw / 375 * 100);
  }
}

#optimal .survey_item span {
  margin-bottom: min(calc(3vw / 1320 * 100),3px);
  font-size: min(calc(10vw / 1320 * 100),10px);
  font-weight: 500;
}

@media (max-width: 767px) {
  #optimal .survey_item span {
    margin-bottom: calc(3vw / 375 * 100);
    text-align: center;
    font-size: calc(10vw / 375 * 100);
  }
}

#optimal .products_img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: min(calc(220vw / 1320 * 100),220px);
  background-color: #fff;
}

@media (max-width: 767px) {
  #optimal .products_img {
    height: calc(297vw / 375 * 100);
  }
}

#optimal .products_img .muscat {
  width: min(calc(203vw / 1320 * 100),203px);
}

@media (max-width: 767px) {
  #optimal .products_img .muscat {
    width: calc(203vw / 375 * 100);
  }
}

#optimal .products_img .nura4k {
  width: min(calc(196vw / 1320 * 100),196px);
}

@media (max-width: 767px) {
  #optimal .products_img .nura4k {
    width: calc(196vw / 375 * 100);
  }
}

#optimal .products_img .m2u300_350 {
  width: min(calc(150vw / 1320 * 100),150px);
}

@media (max-width: 767px) {
  #optimal .products_img .m2u300_350 {
    width: calc(150vw / 375 * 100);
  }
}

#optimal .products_img .mg54ax {
  width: min(calc(167vw / 1320 * 100),150px);
}

@media (max-width: 767px) {
  #optimal .products_img .mg54ax {
    width: calc(167vw / 375 * 100);
  }
}

#optimal .products_img .md200_md100 {
  width: min(calc(282vw / 1320 * 100),282px);
}

@media (max-width: 767px) {
  #optimal .products_img .md200_md100 {
    width: calc(282vw / 375 * 100);
  }
}

#optimal .products_img .m2u300{
  width: min(calc(150vw / 1320 * 100),150px);
}

@media (max-width: 767px) {
  #optimal .products_img .m2u300 {
    width: calc(150vw / 375 * 100);
  }
}

#optimal .products_name {
  margin: min(calc(16vw / 1320 * 100),16px) 0 0;
  text-align: center;
  font-size: min(calc(24vw / 1320 * 100),24px);
  font-weight: 700;
}

@media (max-width: 767px) {
  #optimal .products_name {
    margin-top: calc(16vw / 375 * 100);
    font-size: calc(20vw / 375 * 100);
  }
}

#optimal .products_txt {
  width: min(calc(318vw / 1320 * 100), 318px);
  margin: 0 auto;
  font-size: min(calc(20vw / 1320 * 100), 20px);
  letter-spacing: 0;
  text-align: left;
}

@media (max-width: 767px) {
  #optimal .products_txt {
    width: unset;
    margin-top: calc(8vw / 375 * 100);
    font-size: calc(18vw / 375 * 100);
    margin-bottom: calc(20vw / 375 * 100);
  }
}

#content3 .products_item:first-child {
  width:  min(calc(360vw / 1320 * 100),360px);
}

@media (max-width: 767px) {
  #content3 .products_item:first-child {
    width: 100%;
  }
}

#content3 .products_item:first-child .products_txt {
  width: unset;
}

/* superiority */
#superiority {
  text-align: center;
  padding: 64px 0;
}
@media screen and (max-width: 767px) {
  #superiority {
    padding: 17.066666666666666vw 0;
  }
}

#superiority .superiority_box {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: 48px;
}
@media screen and (max-width: 767px) {
  #superiority .superiority_box {
    gap: 8.533333333333333vw;
    padding-top: 8.533333333333333vw;
  }
}

#superiority .txt {
  display: flex;
  flex-direction: column;
  gap: min(calc(18vw / 1200 * 100), 18px);
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(-45deg, #004499, #002554);
  flex: 1 1 412px;
  max-width: 412px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  #superiority .txt {
    gap: 4.266666666666667vw;
    flex: none;
    max-width: 100%;
    font-size: 5.333333333333334vw;
    padding: 8.533333333333333vw 1vw;
  }
}

#superiority .txt span {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
}
@media screen and (max-width: 767px) {
  #superiority .txt span {
    font-size: 4.8vw;
  }
}

#superiority .txt p {
  margin: 0;
}

#superiority .box {
  display: flex;
  justify-content: center;
  align-items: stretch;
}
@media screen and (max-width: 767px) {
  #superiority .box {
    flex-direction: column;
    align-items: stretch;
  }
}

#superiority .img {
  max-width: 612px;
  height: auto;
}
@media screen and (max-width: 767px) {
  #superiority .img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
}

/* effect */
#effect {
  text-align: center;
  padding: 64px 0;
}
@media screen and (max-width: 767px) {
  #effect {
    padding: 17.066666666666666vw 0;
  }
}


#effect .circles {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 82px;
}
@media screen and (max-width: 767px) {
  #effect .circles {
    flex-direction: column;
    align-items: center;
    gap: 8.533333333333333vw;
    padding-top: 12vw;
  }
}

#effect .circle {
  position: relative;
  width: 280px;
  height: 280px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid #fff;
  flex: 0 0 auto;
  display: grid;
  place-items: start center;
  padding-top: 65px;
}
@media screen and (max-width: 767px) {
  #effect .circle {
    width: 61.33333333333333vw;
    height: 61.33333333333333vw;
    place-items: center;
    padding-top: 0px;
  }
}

#effect .circle__content {
  text-align: center;
  width: 80%;
}

#effect .circle__title {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}
@media screen and (max-width: 767px) {
  #effect .circle__title {
    font-size: 5.333333333333334vw;
  }
}

#effect .circle__line {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  margin: 16px 0;
}
@media screen and (max-width: 767px) {
  #effect .circle__line {
    margin: 4.266666666666667vw 0;
  }
}

#effect .circle__text {
  margin: 0;
  line-height: 1.6;
  font-size: 20px;
}
@media screen and (max-width: 767px) {
  #effect .circle__text {
    font-size: 4.8vw;
  }
}

#effect .badge {
  position: absolute;
  top: -12px;
  left: -25px;
  width: 85px;
  height: 85px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  color: #003a8f;
  display: grid;
  place-items: center;
  font-size: 48px;
  font-weight: bold;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  #effect .badge {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 16vw;
    height: 16vw;
    font-size: 9.6vw;
  }
}

/* support */
#support {
  text-align: center;
  padding: 64px;
}
@media screen and (max-width: 767px) {
  #support {
    padding: 11.733333333333333vw 0 17.066666666666666vw;
  }
}

#support .support_box {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  font-size: 20px;
  font-weight: 700;
  padding-top: 48px;
}
@media screen and (max-width: 767px) {
  #support .support_box {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    gap: 6.4vw;
    padding-top: 8.533333333333333vw;
  }
}

#support .box {
  display: flex;
  flex-direction: column;
  width: 364px;
  padding-bottom: 24px;
}
@media screen and (max-width: 767px) {
  #support .box {
    width: 100%;
    padding-bottom: 0;
  }
}

#support .box-title {
  background-image: linear-gradient(300deg, #009def, #004499);
  color: #fff;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #support .support_box {
    font-size: 4.8vw;
  }
}

#support .box-content {
  color: #333333;
  background-color: #FFFFFF;
  padding: 24px 3%;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  #support .box-content {
      font-size: 4.266666666666667vw;
      padding: 6.4vw 3%;
    }
  }

/* contact-btn 共通 */
.contact-btn--01--talk::before {
  top: 16px;
  left: 42px;
  width: 26px;
  height: 35px;
  background-image: url(../../images/icn_note_wh.png);
  background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
	.contact-btn--01--talk::before {
    top: calc(12vw / 375 * 100);
    left: calc(45vw / 375 * 100);
    width: calc(26vw / 375 * 100);
    height: calc(35vw / 375 * 100);
	}
}

.contact-btn_wrap {
  position: relative;
}

@media screen and (max-width: 767px) {
  .contact-btn--02 {
    width: calc(325vw / 375 * 100);
  }
}

/* contact_01 */
.contact_01 .contact-btn--01::before {
  top: min(calc(16vw / 1200 * 100), 16px);
  left: min(calc(42vw / 1200 * 100), 42px);
  width: min(calc(26vw / 1200 * 100), 26px);
  height: min(calc(35vw / 1200 * 100), 35px);
  background-image: url(../../images/icn_note_wh.png);
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .contact_01 .contact-btn--01::before {
    top: calc(12vw / 375 * 100);
    left: calc(45vw / 375 * 100);
    width: calc(26vw / 375 * 100);
    height: calc(35vw / 375 * 100);
  }
}

/* contact_02 */
.contact_02 {
  background: center/cover url("../../images/contact_bg-long.png") no-repeat;
  padding: 120px 0;
  color: #333333;
}

@media screen and (max-width: 767px) {
	.contact_02 {
		background: center/cover url("../../images/contact_bg-long_sp.png") no-repeat;
		padding: calc(80vw / 375 * 100) 0 calc(120vw / 375 * 100);
	}
}

.contact_02 .contact-head {
  font-family: "Zen Kaku Gothic New", sans-serif;
  text-align: center;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.92;
  padding-bottom: 80px;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.95);
}
@media screen and (max-width: 767px) {
  .contact_02 .contact-head {
    font-size: 6.933333333333333vw;
    padding-bottom: 10.666666666666668vw;
  }
}

.contact_02 .contact-box {
  max-width: 1046px;
}

@media screen and (max-width: 767px) {
  .contact_02 .contact-btn_wrap {
    gap: calc(24vw / 375 * 100);
  }
}

.contact_02 .contact-tel {
  margin-top: 32px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .contact_02 .contact-tel {
    margin-top: calc(24vw / 375 * 100);
    font-size: calc(16vw / 375 * 100);
  }
}

.contact_02 .contact-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 700px;
  margin: 24px auto 0;
  font-size: 24px;
  font-weight: 700;
}

.contact_02 .contact-number p {
  font-size: 18px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .contact_02 .contact-number p {
    font-size: 3.733333333333334vw;
    text-align: center;
  }
}

.contact_02 .contact-number a {
  color: #36C11F !important;
}
@media screen and (max-width: 767px) {
  .contact_02 .contact-number a {
    font-size: 5.333333333333334vw;
  }
}

@media screen and (max-width: 767px) {
  .contact_02 .contact-number {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: calc(24vw / 375 * 100);
    margin-top: calc(24vw / 375 * 100);
    font-size: calc(24vw / 375 * 100);
  }
}


