@charset "UTF-8";
/* 共通 */

:root{
  --water:#00A1E9;
}
body {
  font-family: "M PLUS 1p", sans-serif;
}

a {
  text-decoration: none;
  color: #000000;
}
a:hover {
  opacity: 0.8;
}

li {
  list-style: none;
}

img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.center {
  text-align: center;
}

.only_pc {
  display: block;
}

.only_sp {
  display: none;
}

@media screen and (max-width: 480px) {
  .only_pc {
    display: none;
  }
  .only_sp {
    display: block;
  }
}
/* header */
/* header {
  width: 1600px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  padding: 30px;
} */

.h_top {
  text-align: right;
  width: 20.71197411%;
}
.h_top img {
  width: 100%;
}

.h_foot {
  width: 80.7792207792%;
  display: flex;
}
.h_foot .logo_link {
  display: inline-block;
  margin-top: 10px;
}
.h_foot img {
  width: 100%;
}

.h_foot_l {
  width: 13.0225080386%;
}

.h_foot_r {
  width: 86.0705073087%;
}
.h_foot_r nav ul {
  display: flex;
  text-align: center;
  align-items: center;
  width: 84.1365461847%;
  margin-left: auto;
  margin-right: auto;
}
.h_foot_r nav ul li {
  width: 25%;
  border-left: 1px solid #C8C8C8;
  padding: 0 20px;
}
.h_foot_r nav ul li:nth-child(1) {
  width: 24.2352941176%;
  border-left: none;
}
.h_foot_r nav ul li:nth-child(2) {
  width: 29.2941176471%;
}
.h_foot_r nav ul li:nth-child(3) {
  width: 24.5882352941%;
}
.h_foot_r nav ul li:nth-child(4) {
  width: 21.8823529412%;
}
.h_foot_r nav ul li img {
  margin: 0 auto;
}

/* main_visual */
#main_visual {
  position: relative;
  text-align: center;
}

.slide_bg {
  width: 100%;
}

/* comic */
#area_twitter_share {
  width: 100%;
  margin: -75px auto 0 auto;
  position: relative;
}

#comic {
  width: 100%;
  margin-top: -4px;
}

.comic_flex {
  width: 68%;
  max-width: 1091px;
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding-top: 30px;
}

.case {
  width: 29%;
  position: relative;
}

/* what */
#what {
  text-align: center;
  margin-top: 100px;
  position: relative;
}

.what_text {
  position: absolute;
  right: 0;
  left: 0;
  top: 110px;
}
.what_text h2 {
  font-size: 2.8rem;
  padding-bottom: 10px;
}

.how_text h2 {
  font-size: 2.8rem;
  padding-bottom: 10px;
}

.what_text h2 span {
  font-size: 1.2rem;
}

/* connect */
.connect_mg {
  margin-top: 40px;
}

.connect_t p {
  padding-top: 20px;
}

.connect_f {
  max-width: 1300px;
  margin: auto;
  padding: 50px 0 60px 0;
}
.connect_f small {
  display: inline-block;
  margin-top: 32px;
}

#connect_2 .connect_t img {
  margin-top: -20px;
}

.connect_f_flex {
  display: flex;
  justify-content: center;
}

.connect_f_flex_large {
  flex: 0.8;
}

.connect_mg_2 {
  padding-right: 3%;
}

.connect_mg_3 {
  padding-left: 3%;
}

.connect_imgs_sp {
  display: flex;
  justify-content: space-around;
  flex: 1;
}
.connect_imgs_sp a {
  width: 47%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #ECECEC;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.15);
}
.connect_imgs_sp a .img_wrapper {
  flex: 3;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.connect_imgs_sp a .img_wrapper_03 {
  background-image: url(../images/connect03.jpg);
}
.connect_imgs_sp a .img_wrapper_04 {
  background-image: url(../images/connect04.jpg);
}
.connect_imgs_sp a .img_wrapper_05 {
  background-image: url(../images/connect05.jpg);
}
.connect_imgs_sp a .img_wrapper_06 {
  background-image: url(../images/connect06.jpg);
}
.connect_imgs_sp a .img_wrapper_10 {
  background-image: url(../images/connect10.jpg);
}
.connect_imgs_sp a .img_wrapper_11 {
  background-image: url(../images/connect11.jpg);
}
.connect_imgs_sp a .img_wrapper_12 {
  background-image: url(../images/connect12.jpg);
}
.connect_imgs_sp a .img_wrapper_13 {
  background-image: url(../images/connect13.jpg);
}
.connect_imgs_sp a .img_wrapper_14 {
  background-image: url(../images/connect14.jpg);
}
.connect_imgs_sp a .img_wrapper_15 {
  background-image: url(../images/connect15.jpg);
}
.connect_imgs_sp a .img_wrapper_16 {
  background-image: url(../images/connect16.jpg);
}

.connect_bg_white {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  flex: 2;
  font-size: clamp(12px, 1.4vw, 16px);
}

.connect_bg_blue {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #00A1E9;
  flex: 1;
  font-size: clamp(14px, 1.6vw, 20px);
}

.arrow_right {
  position: relative;
}
.arrow_right::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 50%;
  right: -35%;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}

/* introduction */
#introduction {
  padding-top: 140px;
}
#introduction h2 {
  margin-bottom: 20px;
}
#introduction .mb40 {
  margin-bottom: 40px;
}

.introduction_flex {
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
}
.introduction_flex a {
  width: 23%;
  display: flex;
  align-items: center;
  padding: 13px 4% 13px 3%;
  border: 2px solid #ECECEC;
  border-radius: 50vw;
}
.introduction_flex a:not(:first-child, :nth-child(5)) {
  margin-left: 16px;
}
.introduction_flex a:nth-child(n+5) {
  margin-top: 20px;
}
.introduction_flex .img_wrapper {
  flex: 0.5;
}
.introduction_flex .img_wrapper img {
  vertical-align: top;
}
.introduction_flex p {
  font-size: clamp(12px, 1.6vw, 18px);
  flex: 1;
}
.introduction_flex .arrow_right::before {
  right: -12%;
  border-color: #00A1E9;
  transform: translateY(-50%) rotate(-45deg);
}

/* topics */
#topics {
  padding-top: 100px;
}

.topics_flex {
  display: flex;
  border: 2px solid #00A1E9;
  border-radius: 80px;
  padding: 50px 30px;
  max-width: 1300px;
  margin: 0 auto;
}

.topics_flex_l {
  text-align: left;
  width: 55%;
}
.topics_flex_l h2 {
  padding-bottom: 30px;
  padding-left: 20px;
}
.topics_flex_l p {
  width: 93%;
  padding-left: 20px;
}

/* how_1 */
#how_1 {
  padding: 100px 0;
}

.how_text {
  position: absolute;
  right: 0;
  left: 0;
  top: 240px;
}

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

.how_imgs {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.how_main_img {
  width: 27%;
}

.line {
  width: 10%;
}

.how_mg {
  margin-left: -25px;
}

.how_text_1 {
  max-width: 1200px;
  margin: 50px auto 0;
}

.in_short {
  text-align: left;
  margin-left: 30px;
}

.l_text {
  font-size: 1.8rem;
  color: #00A1E9;
  font-weight: 700;
  margin-bottom: 10px;
}

/* which */
#which {
  position: relative;
}

.which_text {
  position: absolute;
  right: 0;
  left: 0;
  top: 300px;
}
.which_text h2 {
  margin-bottom: 10px;
  font-size: 2.8rem;
}

.which_text_1 {
  margin-bottom: 20px;
}

.which_text_2 {
  color: #00A1E9;
  font-size: 1.5rem;
  text-align: left;
  max-width: 900px;
  margin: 0 auto;
}

/* q_a */
#q_a {
  background-image: url(../images/q_a_bg.png);
  background-repeat: repeat;
  padding-bottom: 50px;
}

.q_a_headding {
  text-align: center;
  padding-bottom: 30px;
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 100px;
}

.q_a_contents {
  max-width: 1100px;
  margin: 0 auto;
}

.q_a_r_headding {
  margin-left: 10px;
  font-size: 1.35rem;
  font-weight: 700;
}

.q_a_r_text,
.q_a_r_pdf_wrapper {
  margin-left: 40px;
  margin-top: 10px;
}

.q_a_l_headding {
  background: linear-gradient(transparent 70%, #ffff00 0%);
  font-size: 1.45rem;
}

.q_a_l img {
  margin-right: 10px;
}

.q_a_headding p {
  color: #ffffff;
  font-size: 1.3rem;
  text-align: center;
}

.q_a_r {
  width: 60%;
}
.q_a_r p {
  display: flex;
  align-items: flex-start;
}

.q_a_l,
.q_a_r {
  padding: 40px 0;
}

.q_a_flex {
  display: flex;
  flex-wrap: wrap;
}

.q_a_l {
  width: 40%;
  display: flex;
  align-items: start;
  padding: 40px 2% 40px 0;
}

.border_none {
  border-bottom: none;
}

.q_a_feature {
  margin-top: 50px;
  font-size: 1.3rem;
  text-align: center;
}

.pdf {
  text-decoration: underline;
}
.pdf:hover {
  opacity: 0.6;
}

#bnr_twitter {
  padding-top: 50px;
  text-align: center;
}
#bnr_twitter a {
  display: inline-block;
  width: 80%;
  max-width: 860px;
}

footer p {
  text-align: center;
  margin: 65px 0 20px;
}

.logos {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding-bottom: 10px;
}

.logos_2 {
  justify-content: center;
  padding-bottom: 65px;
}

.logos div {
  padding: 0 1%;
}

.sharp {
  width: 17.9%;
}

.toshiba {
  width: 25.6%;
}

.panasonic {
  width: 18.6%;
}

.hitachi {
  width: 17.9%;
}

.mitsubishi {
  width: 18.5%;
}

.tiger,
.daikin {
  width: 20.2%;
}

.fujitsu {
  width: 22.7%;
}

.logo_img_2 {
  margin: 0 2%;
}

.footer_link_area {
  background: #F0F0F0;
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
}
.footer_link_area .link_wrap {
  display: flex;
  justify-content: center;
  max-width: calc(100% - 60px);
  margin-left: auto;
  margin-right: auto;
}
.footer_link_area .link_wrap a {
  position: relative;
  display: block;
  padding-left: 20px;
  font-size: 1.1rem;
  font-weight: bold;
}
.footer_link_area .link_wrap a + a {
  margin-left: 40px;
}
.footer_link_area .link_wrap a::after {
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 8px;
  left: 0;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(225deg);
}
.footer_link_area .copyright {
  border-top: 1px solid #000;
  margin-top: 20px;
  padding-top: 20px;
  width: 1300px;
  max-width: calc(100% - 60px);
  margin-left: auto;
  margin-right: auto;
  font-size: 10px;
}

@media screen and (max-width: 1024px) {
  #area_twitter_share {
    margin: -52px auto 0 auto;
  }
}
@media screen and (min-width: 1400px) and (max-width: 2000px) {
  #area_twitter_share {
    margin-top: -100px;
  }
}
@media screen and (min-width: 2000px) and (max-width: 2500px) {
  #area_twitter_share {
    margin-top: -124px;
  }
}
@media screen and (max-width: 1050px) {
  #what {
    margin: 60px 0 20px;
  }
  .q_a_none {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  p {
    text-align: left;
  }
  .sp_order_1 {
    order: 1;
  }
  .sp_order_2 {
    order: 2;
  }
  .sp_order_3 {
    order: 3;
  }
  header {
    display: block;
    padding: 10px 20px 0;
  }
  .h_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    padding-bottom: 6vw;
  }
  .sp_logo {
    position: relative;
    display: flex;
  }
  .sp_logo a:first-child {
    width: 14.4533333333vw;
  }
  .logo_link {
    position: relative;
    left: auto;
    top: auto;
    width: 32vw;
    max-width: none;
    margin-left: 2.6666666667vw;
  }
  .iot_title {
    width: 28.2666666667vw;
    margin-left: auto;
  }
  .h_foot {
    flex-direction: column;
    width: 100%;
  }
  .h_foot_r {
    width: calc(100% - 36px);
    margin: 0 auto;
  }
  .sp_none {
    display: none !important;
  }
  .h_foot_r nav ul {
    justify-content: center;
    width: 100%;
  }
  .h_foot_r nav ul li {
    padding: 0;
  }
  .h_foot_r nav ul li img {
    max-width: 100%;
  }
  .h_foot_r nav ul li:nth-child(1) {
    width: 26.3333333333%;
  }
  .h_foot_r nav ul li:nth-child(2) {
    width: 30%;
  }
  .h_foot_r nav ul li:nth-child(3) {
    width: 25%;
  }
  .h_foot_r nav ul li:nth-child(4) {
    width: 18.6666666667%;
  }
  #area_twitter_share {
    margin: -82px auto 0 auto;
    padding-top: 42px;
  }
  #what {
    padding-bottom: 80px;
  }
  .what_text h2,
  .how_text h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }
  .what_text {
    top: 130px;
  }
  .what_text h2 span {
    font-size: 0.6rem;
  }
  .what_text p {
    padding: 0 20px;
    font-size: 16px;
  }
  #connect_1 {
    margin-top: -50px;
    padding-bottom: 60px;
    background-repeat: repeat;
    background-image: url(../images/connect_bg_sp.png);
  }
  #connect_3,
  #which {
    background-repeat: repeat;
    background-image: url(../images/connect_bg_sp.png);
  }
  .mg_sp_1,
  .mg_sp_2 {
    margin-top: -20px;
  }
  .connect_t p {
    padding: 20px 20px 0 20px;
    font-size: 16px;
  }
  .connect_f_flex {
    width: 100%;
    max-width: 379px;
    margin: auto;
    flex-direction: column;
    padding: 0 20px;
  }
  .connect_f_flex_large img {
    padding: 0;
  }
  .connect_imgs_sp {
    justify-content: space-between;
  }
  .connect_imgs_sp a {
    max-width: 165px;
    height: 190px;
    margin-top: 20px;
  }
  .h-214 a {
    height: 214px;
  }
  .connect_bg_white p {
    text-align: center;
    font-size: 15px;
  }
  .connect_bg_blue {
    font-size: 14px;
  }
  .connect_f {
    padding-bottom: 0;
  }
  #connect_2 {
    padding-bottom: 100px;
  }
  #connect_2 .connect_f {
    width: 100%;
  }
  #connect_3 {
    padding-bottom: 60px;
  }
  #introduction {
    padding: 60px 20px 0 20px;
  }
  #introduction h2 {
    font-size: 20px;
  }
  .mb30-sp {
    margin-bottom: 30px;
    text-align: center;
  }
  .introduction_flex {
    max-width: 379px;
    justify-content: space-between;
  }
  .introduction_flex a {
    width: 48%;
    padding: 20px 30px 20px 18px;
  }
  .introduction_flex a:nth-child(n+2) {
    margin: 0px;
  }
  .introduction_flex a:nth-child(n+3) {
    margin-top: 14px;
  }
  .introduction_flex p {
    font-size: 16px;
    text-align: center;
  }
  #topics {
    padding: 80px 0;
  }
  .topics_flex_l h2,
  .topics_flex_l p {
    padding-left: 0;
  }
  .topics_flex {
    flex-direction: column;
    margin: 0 2%;
  }
  .topics_flex_l {
    width: 100%;
    margin-bottom: 20px;
  }
  .topics_flex_l p {
    width: 100%;
  }
  #how_1 {
    padding: 80px 20px;
    background-image: url(../images/how_bg_sp.png);
    background-repeat: repeat;
    position: relative;
  }
  .how_mg {
    margin-left: 0;
  }
  .how_text {
    padding: 0 20px;
    top: 210px;
  }
  .how_imgs {
    flex-direction: column;
  }
  .how_main_img {
    width: 55%;
  }
  .how_imgs img {
    margin-bottom: 20px;
  }
  .line {
    display: none;
  }
  .s_text {
    font-size: 0.85rem;
  }
  #which {
    padding: 70px 0;
  }
  .which_text {
    padding: 0 20px;
    top: 200px;
  }
  .which_text h2 {
    font-size: 2rem;
  }
  .which_text_1 {
    margin-bottom: 20px;
  }
  .which_text_2 {
    font-size: 1.2rem;
  }
  .q_a_r,
  .q_a_l {
    width: 90%;
    margin: 0 auto;
    padding: 40px 0 0;
    align-items: center;
  }
  .q_a_flex {
    padding-bottom: 30px;
  }
  .q_a_feature {
    width: -moz-fit-content;
    width: fit-content;
    margin: 50px auto 0;
    text-align: left;
    line-height: 1.75em;
  }
  #bnr_twitter {
    max-width: 480px;
    margin: auto;
    padding: 60px 20px 60px 20px;
  }
  #bnr_twitter a {
    width: 100%;
  }
  .logos {
    flex-direction: column;
    margin-top: 50px;
    margin-bottom: 0;
  }
  .logos_2 {
    flex-direction: column;
    margin-top: 0;
  }
  .logo_img,
  .logo_img_2 {
    margin-bottom: 30px;
  }
  .sharp {
    width: 146px;
  }
  .toshiba {
    width: 214px;
  }
  .panasonic {
    width: 172px;
  }
  .hitachi {
    width: 166px;
  }
  .mitsubishi {
    width: 162px;
  }
  .tiger {
    width: 135px;
  }
  .daikin {
    width: 168px;
    margin-bottom: 14px;
  }
  .fujitsu {
    width: 209px;
  }
  .footer_link_area {
    background: #F0F0F0;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
  }
  .footer_link_area .link_wrap {
    max-width: calc(100% - 30px);
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: left;
    padding-left: 30px;
  }
  .footer_link_area .link_wrap a + a {
    margin-left: 0;
    margin-top: 18px;
  }
}
@media screen and (min-width: 769px) {
  .pc_none {
    display: none !important;
  }
  #which {
    margin-bottom: -70px;
  }
  #connect_1,
  #connect_3 {
    background-size: cover;
    background-image: url(../images/connect_bg.png);
    background-position: center top;
  }
  .t_bg_2 {
    background-image: url(../images/which_t_bg.png);
    background-size: cover;
    background-position: center top;
    padding-top: 160px;
    position: relative;
  }
  .u_bg_2 {
    background-image: url(../images/which_u_bg.png);
    background-size: cover;
    background-position: center bottom;
    padding-bottom: 200px;
  }
  .t_bg {
    background-image: url(../images/how_t_bg.png);
    background-size: cover;
    background-position: center top;
    padding-top: 120px;
    position: relative;
  }
  .u_bg {
    background-image: url(../images/how_u_bg.png);
    background-size: cover;
    background-position: center bottom;
    padding-bottom: 120px;
  }
}
@media screen and (min-width: 481px) {
  #main_visual_sp,
  .q_a_pc_none {
    display: none;
  }
}
@media screen and (max-width: 480px) {
  header {
    width: 100%;
    position: fixed;
    background: #ffffff;
    z-index: 5;
  }
  .h_top img {
    vertical-align: top;
  }
  .h_foot_r {
    margin-top: 10px;
  }
  .h_foot_r nav ul li {
    width: -moz-fit-content;
    width: fit-content;
    height: 17.4vw;
    max-height: 65.3px;
    margin-bottom: 10px;
  }
  .h_foot_r nav ul li img {
    width: auto;
    min-width: 0;
    height: 100%;
  }
  .h_foot_r nav ul li:nth-child(1) {
    border-left: none;
  }
  .h_foot_r nav ul li:nth-child(4) {
    border-right: none;
  }
  #main_visual {
    display: none;
  }
  #main_visual_sp {
    padding-top: 134px;
  }
  #comic {
    margin-top: -4px;
  }
  .comic_flex {
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 8% 4% 0 5.5%;
  }
  .case {
    width: 100%;
    margin-bottom: 25px;
  }
  #what {
    margin: 35px 0 20px;
  }
  .case img {
    width: 100%;
  }
  .case p {
    font-size: 0.85rem;
  }
  #connect_1 h2,
  #connect_2 h2,
  #connect_3 h2,
  #topics h2,
  #which h2,
  .l_text,
  .q_a_r_headding {
    font-size: 1.2rem;
  }
  #connect_2 {
    padding-bottom: 70px;
  }
  .topics_flex_l p {
    font-size: 16px;
  }
  .connect_imgs_sp img {
    width: 40%;
  }
  .s_text {
    font-size: 0.6rem;
  }
  .how_main_img {
    width: 75%;
  }
  .which_text {
    top: 180px;
  }
  .which_text_1,
  .which_text_2,
  .how_text p {
    font-size: 16px;
  }
  .topics_flex_r_img {
    width: 90%;
  }
  #which {
    padding: 45px 0 129px;
  }
  .q_a_r p {
    font-size: 16px;
  }
  .q_a_headding {
    padding-top: 60px;
    font-size: 1.2rem;
  }
  .q_a_l_headding,
  .q_a_feature {
    font-size: 1.2rem;
  }
}

/*20250711 */

.l-header{
  position:fixed;
  top:0;
  width:100%;
  height:150px;
  padding:0 25px;
  background-color: white;
  z-index:200;
}

.l-header__container{
  width:100%;
  height:150px;
  display:grid;
  grid-template-columns:256px 1fr 1000px 1fr 102px;
  align-items:center;
}

.l-header__logo01{
  grid-column-start: 1;
  grid-column-end:2;
}

.l-header__nav{
  grid-column-start: 3;
  grid-column-end:4;
}

.l-header-menu{
  display:flex;
  justify-content:space-between;
  column-gap:25px;
}

.l-header-menu__link{
  display:block;
}

.l-header__logo02link{
  display:block;
  width:100%;
}

.l-header__logo02link02{
  display:block;
  width:100%;  
}

.l-header-menu__link:hover{
  opacity:1;
}

.l-header-menu__eng{
  display:block;
  text-align:center;
  font-size:16px;
  font-weight: 900;
  color:var(--water);
}

.l-header-menu__text{
  display:block;
  text-align:center;
  margin-top: 5px;
  font-size:15px;
  font-weight: 700;
  line-height: 1.4;
  transition:all 0.3s;
}

.l-header-menu__link:hover .l-header-menu__text{
  color:var(--water);
}

.l-header-menu__arrow{
  display:block;
  text-align:center;
  margin-top: 8px;
}

.l-header__logo02{
  display:block;
  grid-column-start: 5;
  grid-column-end:6;
}

.l-header__logo03{
  display:none;
}

@media screen and (max-width: 1500px) {
  .l-header__container{
    grid-template-columns:256px 1fr auto 1fr 102px;
  }

  .l-header-menu{
    justify-content:start;
  }
}

@media screen and (max-width: 1300px) {
  .l-header{
    height:11.375vw;
    padding:0 15px;
  }

  .l-header__container{
    height:11.375vw;
    grid-template-columns:19vw 1fr auto 1fr 9.375vw;
  }

  .l-header-menu{
    column-gap:1.5625vw;
  }

  .l-header-menu__eng{
    font-size:1.2vw;
  }

  .l-header-menu__text{
    margin-top: 0.3125vw;
    font-size:1.1375vw;

  }

  .l-header-menu__arrow{
    margin-top: 0.5vw;
  }

}

@media screen and (max-width: 768px) {
  .l-header{
    height:auto;
    padding:0 5.3vw;
  }

  .l-header__container{
    height:auto;
    grid-template-columns:28vw 1fr 14vw 32vw;
    grid-template-rows:5vw auto 6vw auto;
    align-items:center;
    padding-bottom: 2vw;
  }

  .l-header__logo01{
    grid-column-start: 1;
    grid-column-end:2;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .l-header__nav{
    grid-column-start: 1;
    grid-column-end:5;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  .l-header-menu{
    column-gap:0;
  }

  .l-header-menu__item{
    padding:0 1.5vw;
    border-left:1px solid #C8C8C8;
    box-sizing:border-box;
  }

  .l-header-menu__item:first-child{
    border-left:none;
  }
  
  .l-header-menu__eng{
    display:none;
  }

  .l-header-menu__text{
    margin-top: 0;
    font-size:2.5vw;
  }

  .l-header-menu__link:hover .l-header-menu__text{
    color:var(--water);
  }

  .l-header-menu__arrow{
    margin-top: 1vw;
  }

  .l-header__logo02{
    grid-column-start: 3;
    grid-column-end:4;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .l-header__logo02link02{
    display:none;
  }

  .l-header__logo03{
    display:block;
    grid-column-start: 4;
    grid-column-end:5;
    grid-row-start: 2;
    grid-row-end: 3;
    padding-left: 2vw;
  }

}

#main_visual{
  margin-top: 150px;
}

.case__container{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  column-gap:33px;
  width:100%;
  max-width:1070px;
  margin:auto;
  margin-top: 80px;
}

.case-box{
  display:block;
}

.case-box:hover{
  opacity:1;
}

.case-box__pc{
  position:relative;
  width:100%;
  padding-right: 20px;
  padding-bottom: 25px;
}

.case-box__img{
  overflow:hidden;
  border:2px solid #4E4E4E;
  box-sizing:border-box;
}

.case-box__img img{
  width:100%;
  display:block;
  transition:transform 0.3s;
}

.case-box:hover .case-box__img img{
  transform:scale(1.1);
}

.case-box-area{
  position:absolute;
  right:0;
  bottom:0;
  display:grid;
  grid-template-columns:1fr 50px;
  width:95%;
  height:95px;
  box-sizing:border-box;
  border:3px solid var(--water);
  border-radius:18px;
  overflow:clip;
  background-color: var(--water);
  font-family: "Noto Sans JP", sans-serif;
  transition:color 0.3s;
}

.case-box:hover .case-box-area{
  color:white;
}

.case-box-area__left{
  position:relative;
  padding:5px 5px 5px 10px;
  background-color: white;
}

.case-box-area__left:after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:0%;
  height:100%;
  background-color: var(--water);
  transition:all 0.3s;
}

.case-box:hover .case-box-area__left:after{
  width:100%;
}

.case-box-area__text01{
  position:relative;
  font-size:14px;
  font-weight: 700;
  color:var(--water);
  transition:color 0.3s;
  z-index:2;
}

.case-box:hover .case-box-area__text01{
  color:white;
}

.case-box-area__text02{
  position:relative;
  margin-top: 3px;
  font-size:19px;
  font-weight: 700;
  line-height: 1.42;
  z-index:2;
}

.case-box-area__right{
  display:flex;
  align-items:center;
  justify-content:center;
  background-color: var(--water);
}

.case-box-area__arrow{
  width:12px;
  height:24px;
}

.case-spbox{
  display:none;
  width:100%;
  max-height:105px;
  border-radius:20px;
  border:2px solid var(--water);
  overflow:hidden;
  font-family:"Noto Sans JP", sans-serif;
  background-color: var(--water);
}

.case-spbox__img{
  width:41%;
  overflow:hidden;
}

.case-spbox__img img{
  height:100%;
  display:block;
  transition:transform 0.3s;
}

.case-spbox:hover .case-spbox__img img{
  transform:scale(1.2);
}

.case-spbox-area{
  display:grid;
  grid-template-columns:1fr 40px;
  width:59%;
}

.case-spbox-area__left{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 5px;
  background-color: white;
}

.case-spbox-area__left:after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:0%;
  height:100%;
  background-color: var(--water);
  transition:all 0.3s;
  z-index:1;
}

.case-spbox:hover .case-spbox-area__left:after{
  width:100%;
}

.case-spbox-area__text01{
  position:relative;
  font-size:14px;
  font-weight: 700;
  color:var(--water);
  z-index:2;
  transition:color 0.3s;
}

.case-spbox:hover .case-spbox-area__text01{
  color:white;
}

.case-spbox-area__text02{
  position:relative;
  margin-top: 5px;
  font-size:14px;
  font-weight: 700;
  z-index:2;
  transition:color 0.3s;
}

.case-spbox:hover .case-spbox-area__text02{
  color:white;
}

.case-spbox-area__right{
  display:flex;
  align-items:center;
  justify-content:center;
  background-color: var(--water);
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  #main_visual{
    margin-top: 12vw;
  }

  .case__container{
    column-gap:2vw;
    margin-top: 5vw;
  }

  .case-box__pc{
    padding-right: 1.25vw;
    padding-bottom: 1.5625vw;
  }

  .case-box-area{
    grid-template-columns:1fr 3.125vw;
    height:8vw;
    border-radius:1.125vw;
  }

  .case-box-area__left{
    padding:0.3vw 0.3vw 0.3vw 0.6vw;
  }

  .case-box-area__text01{
    font-size:1vw;
  }

  .case-box-area__text02{
    font-size:1.5vw;
  }

  .case-box-area__arrow{
    width:0.75vw;
    height:2.5vw;
  }
}

@media screen and (max-width: 768px) {
  #main_visual{
    margin-top: 40vw;
  }

  .case__container{
    grid-template-columns: 1fr;
    row-gap:20px;
    margin-top: 50px;
  }

  .case-box{
    width:100%;
    max-width:333px;
    margin:auto;
  }
}

@media screen and (max-width: 480px) {
  #main_visual_sp{
    padding-top: 40vw;
  }

  .case-spbox{
    display:flex;
  }
}

#introduction{
  padding-top: 60px;
}

.intro__container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:40px;
  row-gap:30px;
  width:100%;
  max-width:1070px;
  margin:auto;
  margin-top: 40px;
}

.intro-box{
  display:block;
  width:220px;
  border:3px solid var(--water);
  border-radius:20px;
  overflow:clip;
  background-color: var(--water);
}

.intro-box:hover{
  opacity:1;
}

.intro-box__img{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:170px;
  padding-top: 20px;
  background-color: white;
  transition:all 0.3s;
}

.intro-box__img:after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:100%;
  height:0%;
  background-color: var(--water);
  transition:all 0.3s;
  z-index:1;
}

.intro-box:hover .intro-box__img:after{
  height:100%;
}

.intro-box__img img{
  position:relative;
  width:100%;
  z-index:2;
}

.intro-box__text{
  position:relative;
  padding:15px 0px;
  text-align:center;
  font-size:20px;
  font-weight: 500;
  color:white;
  background-color: var(--water);
}

.intro-box__text:after{
  content:"";
  display:block;
  position:absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/case-arrow.svg);
  width:6px;
  height:11px;
  top:0;
  bottom:0;
  right:10px;
  margin:auto;
}

.intro-icon01{
  max-width:70px;
}

.intro-icon02{
  max-width:110px;
}

.intro-icon03{
  max-width:80px;
}

.intro-icon04{
  max-width:130px;
}

.intro-icon05{
  max-width:80px;
}

.intro-icon06{
  max-width:120px;
}

.intro-icon07{
  max-width:125px;
}

@media screen and (max-width: 768px) {
  #introduction{
    padding-top: 0px;
  }

  .intro__container{
    column-gap:10px;
    justify-content:normal;
  }

  .intro-box{
    width:calc((100% - 10px) / 2);
  }

  .intro-box__img{
    height:150px;
  }

  .intro-box__text{
    font-size:15px;
  }

  .intro-icon{
    width:80%;
    margin:auto;
  }

}


@media screen and (max-width: 768px) {
  #connect_1{
    margin-top: 60px;
  }
}

.connect_t01{
  padding-top: 110px;
}

.connect-box{
  transition:all 0.3s;
}

.connect-box:hover{
  opacity:1;
  box-shadow:none;
  transform:translate(5px,5px);
}

.connect-imgwrap{
  flex:3;
  overflow:clip;
}

.connect-box:hover .img_wrapper{
  transform:scale(1.1);
}

.connect-imgwrap .img_wrapper{
  height:100%;
  transition:all 0.3s;
}

.connect_bg_white{
  position:relative;
  transition:all 0.3s;
}

.connect_bg_white p{
  position:relative;
  z-index:2;
}

.connect_bg_white:after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:100%;
  height:0%;
  background-color: var(--water);
  transition:all 0.3s;
  z-index:1;
}

.connect-box:hover .connect_bg_white{
  color:white;
}

.connect-box:hover .connect_bg_white:after{
  height:100%;
}

.voice{
  margin-top: 100px;
}

.voice__container{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:25px;
  width:100%;
  max-width:1160px;
  margin:auto;
  margin-top: 30px;
}

.voice__btn a{
    margin:auto;
    margin-top: 55px;
}

@media screen and (max-width: 768px) {
  .voice{
    margin-top: 80px;
    padding-bottom: 30px;
  }

  .voice__container{
    grid-template-columns:min(100%,375px);
    row-gap:50px;
    justify-content:center;
    padding:0 5%;
    margin-top: 60px;
  }
}

.c-heading01{
  position:relative;
  width:fit-content;
  margin:auto;
  text-align:center;
  height:335px;
}

.c-heading01:after{
  content:"";
  display:block;
  position:absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../images/heading01-icon02.svg);
  width:100%;
  max-width:298px;
  height:335px;
  top:0;
  right:0;
  left:0;
  margin:auto;
  z-index:-1;
}

.c-heading01__en{
  font-family:"Noto Sans JP", sans-serif;
  font-size:34px;
  font-weight: 700;
  color:var(--water);
}

.c-heading01__title{
  margin-top: 25px;
  font-family:"Noto Sans JP", sans-serif;
  font-size:45px;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .c-heading01__title{
    font-size:1.2rem;
  }
}

.c-box01{
  font-family:"Noto Sans JP", sans-serif;
}

.c-box01__q{
  margin-bottom: 20px;
  text-align:center;
  font-size:20px;
  font-weight: 700;
}

.c-box01__wrap{
  display:flex;
  flex-direction:column;
  /* height: calc(100% - 49px); */
  padding:10px 20px 30px 20px;
  border-radius:20px;
  border:1px solid #7AD6F6;
  box-shadow: 5px 5px #7AD6F6;
}

.c-box01__a{
  margin-bottom: 15px;
  font-size:16px;
  line-height: 1.75;
}

.c-box01__area{
  display:flex;
  justify-content:space-between;
  margin-top: auto;
  padding-top: 15px;
  border-top:1px solid #7AD6F6;
}

.c-box01__name{
  font-size:26px;
  font-weight: 700;
  color:var(--water);
}

.c-box01__old{
  font-size:20px;
  font-weight: 500;
}

.c-box01__right{
  width:95px;
}

.c-pcbox01{
  font-family:"Noto Sans JP", sans-serif;
}

.c-pcbox01__q{
  margin-bottom: 20px;
  text-align:center;
  font-size:20px;
  font-weight: 700;
}

.c-pcbox01__wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  column-gap:20px;
  padding:10px 20px;
  border-radius:20px;
  border:1px solid #7AD6F6;
  box-shadow: 5px 5px #7AD6F6;
}

.c-pcbox01__a{
  width:100%;
  flex-shrink:1;
  font-size:16px;
  line-height: 1.75;
}

.c-pcbox01__area{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  column-gap:10px;
  width:fit-content;
  flex-shrink:0;
  padding-top: 15px;
}

.c-pcbox01__name{
  font-size:26px;
  font-weight: 700;
  color:var(--water);
}

.c-pcbox01__old{
  font-size:20px;
  font-weight: 500;
}

.c-pcbox01__right{
  width:95px;
}

@media screen and (max-width: 991px) {
  .c-pcbox01__area{
    flex-direction:column-reverse;
    row-gap:5px;
  }

  .c-pcbox01__name{
    text-align:center;
  }
}

@media screen and (max-width: 768px) {
  .c-pcbox01{
    display:none;
  }
}

.c-btn01{
  display:flex;
  align-items:center;
  justify-content:center;
  width:260px;
  height:60px;
  border-radius:20px;
  font-family:"Noto Sans JP", sans-serif;
  font-size:20px;
  font-weight: 700;
  color:white;
  background-color: var(--water);
}