@charset "UTF-8";
/* variable */
/* Start Reset Css */
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: 0 0;
  box-sizing: border-box;
}

:after,
:before {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  /*font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "MS Mincho", "MS 明朝", "Meiryo", serif;*/
  font-family:
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  /*font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  font-size: 14px;
  color: #333333;
  width: 100%;
  overflow-x: hidden;
  --white: #fff;
  --lightgrey: #b4b4b4;
  --black: #000000;
  --blue: #52c9f5;
  /*12337D*/
  --yellow: #fef9ea;
  /*f3cc02*/
  --orange: #e8a246;
  --green: #68b03c;
  /*4d9e5c*/
  --red: #ff6c61;
  /*d40000*/
}

address,
caption,
code,
figcaption,
pre,
th {
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
}

blockquote,
q {
  quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}

fieldset,
iframe,
img {
  border: 0;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

caption,
th {
  text-align: left;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

button {
  background: 0 0;
  border: 0;
  box-sizing: content-box;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
  overflow: visible;
  vertical-align: inherit;
}

button:disabled {
  cursor: default;
}

audio:not([controls]) {
  display: none;
}

:focus[data-focus-method="mouse"]:not(input):not(textarea):not(select),
:focus[data-focus-method="touch"]:not(input):not(textarea):not(select) {
  outline: 0;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

a,
a:link,
a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #ccc;
  opacity: 1;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #ccc;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: #ccc;
  opacity: 1;
}

input::-webkit-input-placeholder {
  color: #ccc;
  opacity: 1;
}

::-webkit-scrollbar {
  width: 10px;
  height: 15px;
  background-color: #f3f3f3;
  border-left: 1px solid #dddddd;
}

::-webkit-scrollbar:hover {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 15px;
  background-color: #666;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #333;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
  display: none;
}
/* new_banner */
.new_banner {
  width: 100%;
  min-height: 700px;
  height: auto;
  background-color: #00b0f0;
  background-image: url(../img/karafull/top_pic2.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover; /* 画面全体を覆う */
  position: relative;
  overflow: hidden;
  padding-bottom: 60px;
}

/* ロゴ：位置調整 */
.top_logo {
  width: 180px; /* 少し小さく */
  max-width: 20%;
  padding: 30px 0 0 40px !important;
}

/* キャッチコピー（大）：サイズを少し抑える */
.top_txt1 {
  font-size: 60px; /* 70px -> 60px */
  padding: 40px 40px 0;
  line-height: 1.3;
}

/* 数字部分の強調 */
.top_txt_l {
  font-size: 90px; /* 110px -> 90px */
}

/* サブキャッチコピー */
.top_txt2 {
  font-size: 28px; /* 32px -> 28px */
  padding: 20px 40px 0;
}
.benefit_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 40px;
  width: 100%;
  padding-right: 40px;
  box-sizing: border-box;
  flex-wrap: wrap; /* 画面が狭いときは折り返す */
}

/* 左：白いチェックボックス */
.benefit_wrapper > li:first-child {
  flex: 0 0 500px; /* 550px -> 500px に少し縮小 */
  max-width: 55%; /* 最大幅を制限 */
  background: rgba(255, 255, 255, 0.95);
  border-radius: 0 50px 50px 0;
  padding: 25px 40px 25px 20px;
  margin-right: 20px;
  margin-top: 0;
  box-sizing: border-box;
}

.benefit_wrapper > li:last-child {
  flex: 1; /* 残りのスペースを使う */
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
  margin: 0;
  min-width: 300px; /* 潰れ防止 */
}

.inner_benefit > li:first-child {
  width: 10%;
}
.benefit_txt {
  font-size: 24px; /* 28px -> 24px */
  line-height: 1.4;
}
.benefit_wrapper > li:last-child {
  flex: 1 1 auto; /* 残りの幅を使う */
  display: flex;
  justify-content: flex-end; /* 右寄せ */
  padding-bottom: 20px; /* 位置調整 */
}
.check_wrraper {
  width: 30px;
  margin-right: 15px;
  flex-shrink: 0; /* アイコンが潰れないようにする */
}

/* メダル画像の並び */
.top_medal {
  justify-content: flex-end;
  gap: 15px;
}
.top_medal > li {
  width: 30%;
  max-width: 140px; /* サイズ制限 */
}
.top_medal > li img {
  width: 100%;
  height: auto;
  filter: drop-shadow(
    0px 5px 10px rgba(0, 0, 0, 0.2)
  ); /* 影をつけて浮き立たせる */
}
.btn_area {
  text-align: center;
}
/* ボタン */
.cta_btn {
  font-size: 28px; /* 32px -> 28px */
  width: 360px; /* 400px -> 360px */
  max-width: 90%;
  padding: 15px 20px;
}
.cta_btn:hover {
  color: brown;
  background: linear-gradient(84deg, #eddf97, #c5a661, #eddf97);
}
.cta_btn:active {
  box-shadow: none;
  transform: translateY(4px);
}
.spbr,
.spbr2,
.spbr3,
.br580 {
  display: none;
}
@media screen and (max-width: 1450px) {
  .benefit_wrapper > li:first-child {
    margin-right: 0;
  }
  .benefit_txt {
    font-size: 40px;
  }
  .benefit_wrapper > li:first-child {
    margin-top: 35px;
  }
  .benefit_wrapper > li:last-child {
    margin: 20px;
  }
  @media screen and (max-width: 1200px) {
    .top_txt1 {
      font-size: 50px;
    }
    .benefit_txt {
      font-size: 22px;
    }
  }
}

@media screen and (max-width: 1200px) {
  .top_txt1 {
    font-size: 48px;
  }
  .top_txt_l {
    font-size: 70px;
  }
  .benefit_txt {
    font-size: 20px;
  }

  .benefit_wrapper > li:first-child {
    flex: 0 0 450px;
  }
}

@media screen and (max-width: 1000px) {
  .new_banner {
    /* SP用画像があれば切り替え、なければPC用を調整 */
    background-size: cover;
    background-position: center bottom;
  }
  .top_txt1 {
    font-size: 54px;
  }
  .top_txt_l {
    font-size: 94px;
  }
  .top_txt2 {
    font-size: 41px;
  }
  .benefit_wrapper {
    display: block; /* SPでは縦積みに */
  }

  .benefit_wrapper > li:first-child {
    width: 90%;
    margin: 20px auto;
    border-radius: 20px;
  }

  .benefit_wrapper > li:last-child {
    width: 90%;
    margin: 20px auto;
    justify-content: center;
  }

  .top_medal {
    justify-content: center;
  }
  .top_logo {
    width: 23%;
    padding: 20px !important;
  }
}
@media screen and (max-width: 900px) {
  /* 縦積みに変更 */
  .new_banner {
    height: auto;
    background-size: cover;
    background-position: center top;
    padding-bottom: 40px;
  }

  .top_logo {
    padding: 20px 0 0 20px !important;
    width: 140px;
  }

  .top_txt1 {
    font-size: 32px;
    padding: 20px 20px 0;
  }
  .top_txt_l {
    font-size: 50px;
  }

  .top_txt2 {
    font-size: 18px;
    padding: 10px 20px 0;
  }

  .benefit_wrapper {
    display: block;
    padding-right: 0;
    margin-top: 30px;
  }

  .benefit_wrapper > li:first-child {
    max-width: 90%;
    width: 90%;
    margin: 0 auto 30px;
    border-radius: 0 30px 30px 0;
    padding: 20px;
  }

  .benefit_wrapper > li:last-child {
    display: block;
    width: 100%;
    padding-bottom: 0;
    justify-content: center;
  }

  .top_medal {
    justify-content: center;
    padding: 0 20px;
    gap: 10px;
  }

  .top_medal > li {
    width: 30%;
    max-width: 100px;
  }

  .cta_btn {
    font-size: 22px;
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .benefit_wrapper > li:first-child {
    width: 80%;
  }
  .top_txt_l {
    font-size: 85px;
  }
  .spbr,
  .spbr2 {
    display: block;
  }
  .pcbr {
    display: none;
  }
  .top_txt2 {
    font-size: 36px;
  }
}
@media screen and (max-width: 580px) {
  .br580 {
    display: block;
  }
  .top_txt1 {
    line-height: 6rem;
  }
  .top_txt2 {
    font-size: 31px;
  }
  .benefit_wrapper > li:first-child {
    width: 95%;
  }
  .benefit_txt {
    font-size: 36px;
  }
  .benefit_wrapper > li:last-child {
    width: 95%;
  }
  .cta_btn {
    width: 90%;
  }
  .top_logo {
    width: 30%;
    padding: 20px 10px 10px 20px !important;
  }
}
@media screen and (max-width: 396px) {
  .top_txt1 {
    font-size: 38px;
    line-height: 4rem;
    padding: 8px 15px 0;
  }
  .top_txt_l {
    font-size: 62px;
  }
  .top_txt2 {
    font-size: 20px;
    padding: 8px 15px 0;
  }
  .benefit_txt {
    font-size: 22px;
  }
  .benefit_wrapper > li:first-child {
    margin: 12px auto;
    border-radius: 20px;
    padding: 6px 20px 6px 40px;
  }
  .benefit_wrapper {
    margin-top: 15px;
  }
  .inner_benefit {
    padding: 10px 0;
  }
  .check_wrraper {
    width: 29px;
    padding-top: 3px;
    padding-right: 3px;
  }
  .benefit_wrapper > li:last-child {
    margin: 17px auto;
  }
  .cta_btn {
    font-size: 30px;
    height: 65px;
    margin: 0 auto 30px;
  }
}

/* new_bannerはここまで */
/* /Start Reset Css */

/* hasbg css */
/* if u want to change function for JQcode , plase open function.js file , search function's name , that name is css's name */
/* css for function hasbg */
.hasbg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.hasbg:after {
  display: block;
  content: "";
  padding-top: 100%;
}

.hasbg > img {
  display: none;
}

/* /hasbg */
/* sp mobile-btn and nav css */
.spscreen {
  display: none;
}
.mobilebtn {
  display: none;
}
@media screen and (max-width: 768px) {
  .mobilebtn {
    position: fixed;
    z-index: 110;
    top: 20px;
    right: 20px;
    display: block;
  }

  .mobilebtn div {
    width: 30px;
    height: 20px;
    background: none;
    cursor: pointer;
    display: block;
    position: relative;
    right: 0;
    top: 0;
    transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
  }

  .mobilebtn div span {
    width: 30px;
    height: 2px;
    top: 9px;
    background: var(--orange);
    display: block;
    position: absolute;
    z-index: 5;
    left: 50%;
    margin: 0 0 0 -15px;
    transform-origin: center;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -o-transform-origin: center;
    -ms-transform-origin: center;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
  }

  .mobilebtn div span:nth-child(1) {
    -moz-transform: translateY(-9px);
    -webkit-transform: translateY(-9px);
    -o-transform: translateY(-9px);
    -ms-transform: translateY(-9px);
    transform: translateY(-9px);
  }

  .mobilebtn div span:nth-child(3) {
    -moz-transform: translateY(9px);
    -webkit-transform: translateY(9px);
    -o-transform: translateY(9px);
    -ms-transform: translateY(9px);
    transform: translateY(9px);
  }

  .mobilebtn .active {
    transform: rotate(180deg); /*translateX(-200px) */
  }

  .mobilebtn .active span:nth-child(1) {
    transform: rotate3d(0, 0, 1, -45deg) !important;
    transform-origin: center center !important; /*0.71429px*/
    width: 30px !important;
  }

  .mobilebtn .active span:nth-child(2) {
    transform: rotate3d(0, 1, 0, -90deg) !important;
    width: 0 !important;
  }

  .mobilebtn .active span:nth-child(3) {
    transform: rotate3d(0, 0, 1, 45deg) !important;
    transform-origin: center center !important; /*0.71429px */
    width: 30px !important;
  }

  .sp-wrapper-move {
    transform: translateX(0px) !important;
  }

  .spscreen {
    width: 200px;
    height: 100vh;
    position: fixed;
    z-index: 100;
    background: #333;
    right: 0;
    top: 0;
    transform: translateX(200px);
    transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
    display: block;
  }

  .spscreen .sp-heading {
    width: 100%;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
    font-size: 24px;
    text-transform: uppercase;
    color: #fff;
  }

  .spscreen nav ul {
    padding: 0 15px;
  }

  .spscreen nav ul li:first-child {
    border-top: 1px solid #5d5d5d;
  }

  .spscreen nav ul li {
    border-bottom: 1px solid #5d5d5d;
  }

  .spscreen nav ul li a {
    color: #fff;
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 15px 0;
    text-transform: uppercase;
    transition: 0.3s;
  }

  .spscreen nav ul li a:hover {
    background: #f2f2f2;
    color: #000;
  }

  .spscreen nav ul li ul {
    display: none;
  }
  .spscreen nav ul li a.current {
    position: relative;
  }
  .spscreen nav ul li a.current:after {
    content: "";
    border-top: 5px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transform-origin: center;
  }
  .spscreen nav ul li a.current.active:after {
    transform: rotate(180deg);
  }
  .spscreen nav ul li a:hover {
    background: #f2f2f2;
    color: #000;
  }
  .spscreen nav ul li ul {
    display: none;
    padding: 0;
  }
  .spscreen nav ul li ul li a {
    font-size: 12px;
  }
}
/* /sp mobile-btn and nav css */
/* wrapper css */
/*.wrapper {
  transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
  transform: translateX(0);
  position: relative;
  z-index: 70; }*/

/*.wrapper-move {
  transform: translateX(-200px);
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -ms-filter: grayscale(1);
  filter: grayscale(1); }*/

/* /wrapper css */
/*scrolltop*/
.scrolltop {
  position: fixed;
  right: 2%;
  bottom: 5%;
  z-index: 70;
  transition: 0.5s;
  background: var(--blue);
  color: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 15px 10px 10px 10px;
  border-radius: 50%;
}
.scrolltop:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: solid #fff;
  border-width: 2px 2px 0 0;
  transform: rotate(-45deg);
}
@media screen and (max-width: 1080px) {
  .scrolltop {
    width: 40px;
    height: 40px;
    padding: 5px 0 0 0;
  }
}

/* header css */
.headerfixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%; /*background:#fff;*/
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);
  -webkit-animation: headeranimation 0.5s linear 0s 1;
  animation: headeranimation 0.5s linear 0s 1;
}
@keyframes headeranimation {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes headeranimation {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  top: 0;
  left: 0;
  z-index: 100;
  background: #00b0f0;
  color: var(--white);
  padding: 20px 40px;
}
header .headmain {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
header .headmain h1 {
  width: 100%;
  text-align: center;
  font-size: 48px;
  line-height: 100%;
}
@media screen and (max-width: 1520px) {
  header .headmain h1 {
    font-size: 38px;
  }
}
@media screen and (max-width: 1080px) {
  header {
    padding: 15px 20px;
  }
  header .headmain h1 {
    font-size: 30px;
  }
}
@media screen and (max-width: 768px) {
  header {
    padding: 10px 20px;
  }
  header .headmain h1 {
    font-size: 24px;
  }
}
@media screen and (max-width: 568px) {
  header {
    padding: 10px 0;
  }
  header .headmain h1 {
    font-size: 18px;
  }
}
/*
.sitelogo{width:300px;padding:20px 20px 20px 40px;}

.headmain{ display:flex;}


.mainnavigation{display:flex;}
.mainnavigation ul{display:flex;align-items:center;}
.mainnavigation ul li{position:relative;padding:20px 40px;}
.mainnavigation ul li a{width:100%;font-size:18px;color:#000;display:flex;text-decoration:none;position:relative;z-index:1;transition:.4s ease-in-out;}
.mainnavigation ul li a:hover{color:var(--blue);}
.mainnavigation ul li > a:after{content: "";position: absolute;left:0%;bottom: -5px;width: 100%;transform: scale(0) ;height: 2px;background: var(--blue);opacity: 0;visibility: hidden;transition: .4s ease-in-out;}
.mainnavigation ul li > a:hover:after{opacity: 1;visibility: visible;transform:scale(1);}
.mainnavigation ul li ul{display:none;position:absolute;left:50%;transform:translateX(-50%);background:var(--grey);}
.mainnavigation ul li:hover ul{display:block;}
.mainnavigation ul li ul li a{text-align:center;padding:5px 10px;}
.mainnavigation ul li ul li a:after{display:none;}

.speciallinks{}
.speciallinks ul{display:flex;align-items:center;}
.speciallinks ul li{width:50%;}
.speciallinks ul li a{width:100%;padding:20px;font-size:18px;color:#fff;background:var(--blue);display:flex;justify-content:center;align-items:center;text-decoration:none;position:relative;overflow:hidden;}
.speciallinks ul li a span{position:relative;z-index:1;}
.speciallinks ul li a:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;transform:translateY(-101%);background:#00a0ea;transition:.3s;}
.speciallinks ul li a:hover:after{transform:translateY(0);}
@media screen and (max-width: 768px) {
  .headmain{margin-right:70px;}
  .mainnavigation{display:none;}

}*/
/* /header css */
/*banner*/
.banner {
  position: relative;
}
.banner .bannermain {
}
.banner .bannermain li {
  overflow: hidden;
}
.banner .bannermain figure {
  width: 100%;
  height: 90vh;
  position: relative; /*-webkit-animation: picmove1 50s linear infinite 0s;
      -moz-animation: picmove1 50s linear infinite 0s;
      -ms-animation: picmove1 50s linear infinite 0s;
      -o-animation: picmove1 50s linear infinite 0s;
      animation: picmove1 50s linear infinite 0s;*/
}
.banner .bannermain figure:after {
  content: "";
  padding-top: 0;
}
.banner .bannertext {
  position: absolute;
  left: 0%;
  top: 0%;
  z-index: 20;
  width: 100%;
  height: 100%;
  padding: 80px 60px;
  display: flex;
  align-items: center;
}
.banner .bannertext .bannertextmain {
  width: 100%;
  padding-left: 15%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.banner .bannertext .bannertextmain .bannertextleft {
}
.banner .bannertext .bannertextmain .bannertextright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.banner .bannertext h2 {
  background: rgba(233, 232, 232, 0.7);
  padding: 10px 20px;
  font-size: 42px;
  color: #5f5f5f;
  width: auto;
  margin-bottom: 36px;
}
.banner .bannertext h3 {
  background: rgba(34, 178, 231, 0.7);
  padding: 10px 20px;
  font-size: 30px;
  color: var(--white);
  width: auto;
  margin-bottom: 36px;
}
.banner .bannertext .banlogo {
}
.banner .bannertext ul {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}
.banner .bannertext ul li {
  width: calc(33.333333% - 30px);
}
.banner .bannertext ul li figure {
  width: 100%;
}
.banner .bannertext .banrequest {
  width: 100%;
  max-width: 200px;
  margin-bottom: 80px;
}
.banner .bannertext .banrequest a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: 0.3s;
}
.banner .bannertext .banrequest a:hover {
  box-shadow: 0 0 20px var(--red);
}
.banner .bannertext .webbtngroup {
}
.banner .bannertext .webbtngroup .webbtn {
}
@media screen and (max-width: 1520px) {
  .banner .bannermain figure {
    height: 80vh;
  }
  .banner .bannertext {
    padding: 60px 40px;
  }
  .banner .bannertext .bannertextmain {
    padding-left: 0%;
  }
  .banner .bannertext .bannertextmain .bannertextleft {
    width: 550px;
  }
  .banner .bannertext h2 {
    font-size: 32px;
  }
  .banner .bannertext h3 {
    font-size: 24px;
  }
  .banner .bannertext .banrequest {
    margin-bottom: 50px;
  }
  .banner .bannertext ul li {
    width: calc(33.333333% - 20px);
  }
}
@media screen and (max-width: 1080px) {
  .banner .bannermain figure {
    height: 70vh;
  }
  .banner .bannertext {
    padding: 50px 20px;
  }
  .banner .bannertext .bannertextmain {
  }
  .banner .bannertext .bannertextmain .bannertextleft {
    width: 420px;
  }
  .banner .bannertext h2 {
    font-size: 26px;
    margin-bottom: 20px;
  }
  .banner .bannertext h3 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .banner .bannertext .banlogo {
    max-width: 200px;
  }
  .banner .bannertext ul {
    margin-top: 20px;
  }
  .banner .bannertext .banrequest {
    margin-bottom: 30px;
    max-width: 150px;
  }
}
@media screen and (max-width: 780px) {
  .banner .bannermain figure {
    background-position: center right 32%;
  }
  .banner .bannertext {
    padding: 30px 20px;
  }
  .banner .bannertext .bannertextmain {
    flex-wrap: wrap;
    align-items: center;
  }
  .banner .bannertext .bannertextmain .bannertextleft {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
  .banner .bannertext .bannertextmain .bannertextright {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    align-items: center;
  }
  .banner .bannertext h2 {
    font-size: 22px;
  }
  .banner .bannertext h3 {
    font-size: 16px;
  }
  .banner .bannertext .banlogo {
    max-width: 150px;
  }
  .banner .bannertext ul {
    max-width: 420px;
  }
  .banner .bannertext ul li {
    width: calc(33.333333% - 10px);
  }
  .banner .bannertext .banrequest {
    position: fixed;
    right: 3%;
    bottom: 30%;
    z-index: 100;
    max-width: 120px;
  }
  .banner .bannertext .webbtngroup {
    margin-top: 20px;
  }
}
@media screen and (max-width: 580px) {
  .banner .bannertext .banrequest {
    max-width: 80px;
  }
  .banner .bannertext h2 {
    font-size: 18px;
    padding: 10px;
  }
  .banner .bannertext h3 {
    font-size: 14px;
    padding: 10px;
  }
  .banner .bannertext ul {
    max-width: 300px;
    margin-top: 10px;
  }
}

/*.banner .bannertext h1{font-size:46px;margin-bottom:30px;}
.banner .bannertext p{font-size:24px;}*/

@keyframes picmove1 {
  0% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  50% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
}
@media screen and (max-width: 1420px) {
  /*.banner .bannertext{ padding:60px 40px;}*/
  /*  .banner .bannertext h1{font-size:38px;}
  .banner .bannertext p{font-size:20px;}*/
}
@media screen and (max-width: 1080px) {
  /*.banner .bannertext{max-width:650px;padding:20px;}*/
  /*.banner .bannertext h1{font-size:30px;margin-bottom:15px;}*/
  /*.banner .bannertext p{font-size:16px;}*/
}
@media screen and (max-width: 768px) {
  .banner {
    overflow: hidden;
  }
  /*  .banner .bannermain figure,.banner .bannermain figure:after{height:350px;}
  .banner .bannertext{width:80%;max-width:100%;}
  .banner .bannertext h1{font-size:24px;margin-bottom:10px;}
  .banner .bannertext p{font-size:14px;}*/
}
@media screen and (max-width: 528px) {
  /*  .banner .bannermain figure,.banner .bannermain figure:after{height:300px;}
  .banner .bannertext{padding:10px;}
  .banner .bannertext h1{font-size:20px;margin-bottom:5px;}
  .banner .bannertext p{font-size:12px;}*/
}

/*/banner*/

/*slide*/
.slide {
}
.slidetitle {
  padding: 20px 40px;
  width: 100%;
  background: #f8f4f3;
}
.slidetitle h2 {
  font-size: 30px;
  color: var(--blue);
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

.slidelist {
}
.slidelist .slidemain {
}
.slidelist .slidemain li {
}
.slidelist .slidemain li figure:after {
  padding-top: 70%;
}

@media screen and (max-width: 1720px) {
  .slidetitle h2 {
    font-size: 26px;
  }
}
@media screen and (max-width: 1520px) {
  .slidetitle h2 {
    font-size: 22px;
  }
}
@media screen and (max-width: 1080px) {
  .slidetitle {
    padding: 15px 20px;
  }
  .slidetitle h2 {
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  .slidetitle h2 {
    font-size: 16px;
  }
}
/*/slide*/

/*hometrouble*/
.hometrouble {
}
.hometrouble .bordertitle {
  font-size: 48px;
  text-align: center;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hometrouble .bordertitle:after {
  content: "";
  display: inline-block;
  width: 100%;
  max-width: 770px;
  border-bottom: 5px solid var(--blue);
}
.hometrouble .troublecon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}
.hometrouble .troublecon .troubleconpic {
  width: 390px;
  position: relative;
}
.hometrouble .troublecon .troubleconpic:after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: calc(100% - 30px);
  background: var(--blue);
  height: calc(100% - 80px);
}
.hometrouble .troublecon .troubleconpic figure {
  width: 100%;
  border: 5px solid #fff;
  position: relative;
  z-index: 1;
}
.hometrouble .troublecon .troubleconpic figure:after {
  padding-top: 80%;
}
.hometrouble .troublecon .troublecontext {
  width: calc(100% - 450px);
}
.hometrouble .troublecon .troublecontext ol {
}
.hometrouble .troublecon .troublecontext ol li {
  display: flex;
  align-items: center;
  list-style-type: none;
  font-size: 24px;
  font-weight: bolder;
}
.hometrouble .troublecon .troublecontext ol li:not(:last-child) {
  margin-bottom: 30px;
}
.hometrouble .troublecon .troublecontext ol li:before {
  content: "";
  display: block;
  background: url(img/check.png) no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  flex-shrink: 0;
}
.hometrouble .webbtngroup {
  margin-top: 30px;
}
@media screen and (max-width: 1520px) {
  .hometrouble .bordertitle {
    font-size: 42px;
  }
  .hometrouble .bordertitle:after {
    max-width: 650px;
  }
  .hometrouble .troublecon .troubleconpic {
    width: 350px;
  }
  .hometrouble .troublecon .troublecontext {
    width: calc(100% - 380px);
  }
  .hometrouble .troublecon .troublecontext ol li {
    font-size: 20px;
  }
  .hometrouble .troublecon .troublecontext ol li:not(:last-child) {
    margin-bottom: 20px;
  }
  .hometrouble .troublecon .troublecontext ol li:before {
    width: 24px;
    height: 24px;
  }
}
@media screen and (max-width: 1080px) {
  .hometrouble .bordertitle {
    font-size: 36px;
  }
  .hometrouble .bordertitle:after {
    max-width: 580px;
  }
  .hometrouble .troublecon {
    margin: 0 auto 30px;
  }
  .hometrouble .troublecon .troubleconpic {
    width: 300px;
  }
  .hometrouble .troublecon .troublecontext {
    width: calc(100% - 320px);
  }
  .hometrouble .troublecon .troublecontext ol li {
    font-size: 16px;
  }
  .hometrouble .troublecon .troublecontext ol li:not(:last-child) {
    margin-bottom: 10px;
  }
  .hometrouble .troublecon .troublecontext ol li:before {
    width: 20px;
    height: 20px;
  }
}
@media screen and (max-width: 768px) {
  .hometrouble .bordertitle {
    font-size: 30px;
  }
  .hometrouble .bordertitle:after {
    max-width: 200px;
  }
  .hometrouble .troublecon .troubleconpic {
    width: 240px;
  }
  .hometrouble .troublecon .troublecontext {
    width: calc(100% - 260px);
  }
}
@media screen and (max-width: 568px) {
  .hometrouble .bordertitle {
    font-size: 24px;
  }
  .hometrouble .troublecon .troubleconpic {
    width: 100%;
    max-width: 240px;
    margin: 0 auto 20px;
  }
  .hometrouble .troublecon .troublecontext {
    width: 100%;
  }
}

.homethreepoints {
}
.homethreepoints .webtitle {
  margin-bottom: 30px;
}
.homethreepoints .threepointstitle {
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: center;
  margin: 0 auto 50px;
}
.homethreepoints .threepointslist {
  margin-bottom: 60px;
}
.homethreepoints .threepointslist ul {
  margin-left: -30px;
  margin-top: -30px;
}
.homethreepoints .threepointslist ul li {
  margin-top: 30px;
  padding-left: 30px;
}

.homethreepoints .borderline.textcenter {
  display: flex;
  justify-content: center;
}
.homethreepoints .borderline.textcenter:after {
  max-width: 420px;
  left: 50%;
  transform: translateX(-50%);
}
.homethreepoints .wide {
  width: 100%;
  margin: 50px auto 30px;
}

.threepoint {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/*.threepoint{}*/
.threepoint:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding-top: 70%;
}
.threepoint > div {
  width: 100%;
  height: 100%;
  padding: 15px;
  color: #fff;
  position: relative;
  z-index: 10;
}
.threepoint > div > div {
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 20px 10px;
  position: relative;
}
.threepoint > div > div:after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  background: url(img/whitelace.png) no-repeat;
  background-size: contain;
}
.threepoint > div > div h5 {
  font-size: 20px;
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 10px;
}
.threepoint > div > div p {
  font-size: 18px;
}
@media screen and (max-width: 1520px) {
  .homethreepoints .threepointstitle {
    max-width: 600px;
  }
  .homethreepoints .threepointslist ul {
    margin-left: -20px;
    margin-top: -20px;
  }
  .homethreepoints .threepointslist ul li {
    margin-top: 20px;
    padding-left: 20px;
  }

  .homethreepoints .borderline.textcenter:after {
    max-width: 360px;
  }

  .threepoint:after {
    padding-top: 80%;
  }
  .threepoint > div {
    padding: 15px;
  }
  /*.threepoint > div > div h5{font-size:18px;}*/
  .threepoint > div > div p {
    font-size: 16px;
  }
}
@media screen and (max-width: 1080px) {
  .homethreepoints .webtitle {
    margin-bottom: 20px;
  }
  .homethreepoints .threepointstitle {
    max-width: 500px;
    margin: 0 auto 30px;
  }
  .homethreepoints .threepointslist {
    margin-bottom: 50px;
  }

  .homethreepoints .borderline.textcenter:after {
    max-width: 300px;
  }

  .homethreepoints .wide {
    margin: 30px auto;
  }

  .threepoint > div > div {
    border-radius: 5px;
  }
  .threepoint > div > div:after {
    width: 15px;
    height: 15px;
  }
  .threepoint > div > div h5 {
    font-size: 16px;
  }
  .threepoint > div > div p {
    font-size: 14px;
  }
}
@media screen and (max-width: 880px) {
  .homethreepoints .threepointslist ul li {
    width: 50%;
  }
  .homethreepoints .borderline.textcenter:after {
    max-width: 180px;
  }
  .threepoint:after {
    padding-top: 70%;
  }
}
@media screen and (max-width: 630px) {
  .homethreepoints .threepointstitle {
    max-width: 380px;
  }
  .homethreepoints .threepointslist ul li {
    width: 100%;
  }
  .threepoint {
    max-width: 350px;
    margin: 0 auto;
  }
}

.homethreepoints .borderline {
  font-size: 36px;
  margin-bottom: 20px;
}
@media screen and (max-width: 1520px) {
  .homethreepoints .borderline {
    font-size: 30px;
  }
}
@media screen and (max-width: 1080px) {
  .homethreepoints .borderline {
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  .homethreepoints .borderline {
    font-size: 20px;
  }
}

/*
.homethreepoints .estate{background:#fff;border:5px solid var(--blue);padding:50px 20px 20px;border-radius:50px;margin-top:80px;}
.homethreepoints .estate h3{font-size:36px;margin:-80px auto 30px;width:100%;max-width:500px;background:#fff;text-align:center;}
.homethreepoints .estate dl{display:flex;flex-wrap:wrap;font-size:23px;}
.homethreepoints .estate dl dt{width:300px;}
.homethreepoints .estate dl dd{width:calc(100% - 300px);}
@media screen and (max-width: 1520px) {
  .homethreepoints .estate{padding:30px 20px 20px;}
  .homethreepoints .estate h3{font-size:30px;max-width:420px;margin:-50px auto 20px;}
  .homethreepoints .estate dl{font-size:18px;}
  .homethreepoints .estate dl dt{width:240px;}
  .homethreepoints .estate dl dd{width:calc(100% - 240px);}
}
@media screen and (max-width: 1080px) {
  .homethreepoints .estate{padding:20px;margin-top:40px;}
  .homethreepoints .estate h3{font-size:24px;max-width:360px;margin:-30px auto 10px;}
  .homethreepoints .estate dl{font-size:16px;}
  .homethreepoints .estate dl dt{width:220px;}
  .homethreepoints .estate dl dd{width:calc(100% - 220px);}
}
@media screen and (max-width: 768px) {
  .homethreepoints .estate{border-width:3px;border-radius:30px;}
  .homethreepoints .estate h3{font-size:20px;margin:0 auto 20px;}
  .homethreepoints .estate dl dt{width:100%;margin-top:10px;}
  .homethreepoints .estate dl dd{width:100%;}
}
*/

.homethreepoints .problem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 60px auto;
}
/*.homethreepoints .problem li{width:calc(50% - 15px);}*/
.homethreepoints .problem li:first-child {
  width: 580px;
}
.homethreepoints .problem li:last-child {
  width: calc(100% - 600px);
}
.homethreepoints .problem li h3 {
  font-size: 30px;
  margin-bottom: 15px;
}
.homethreepoints .problem li p {
  width: 100%;
  margin-bottom: 10px;
  font-size: 23px;
  line-height: 2;
  font-weight: bolder;
}
.homethreepoints .problem li figure,
.homethreepoints .problem li figure img {
  width: 100%;
}
@media screen and (max-width: 1520px) {
  .homethreepoints .problem li:first-child {
    width: 500px;
  }
  .homethreepoints .problem li:last-child {
    width: calc(100% - 530px);
  }
  .homethreepoints .problem li h3 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .homethreepoints .problem li p {
    font-size: 18px;
  }
  .homethreepoints .problem li figure {
    /*margin-top:15px;*/
  }
}
@media screen and (max-width: 1080px) {
  .homethreepoints .problem {
    margin: 30px auto;
  }
  .homethreepoints .problem li:first-child {
    width: 360px;
  }
  .homethreepoints .problem li:last-child {
    width: calc(100% - 380px);
  }
  .homethreepoints .problem li {
    width: calc(50% - 10px);
  }
  .homethreepoints .problem li h3 {
    font-size: 20px;
  }
  .homethreepoints .problem li p {
    font-size: 16px;
  }
  /*.homethreepoints .problem li figure{margin-top:0px;}*/
}
@media screen and (max-width: 768px) {
  .homethreepoints .problem li {
    width: 100%;
  }
  .homethreepoints .problem li:first-child {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 20px;
  }
  .homethreepoints .problem li:last-child {
    width: 100%;
  }
}

/*.homethreepoints .solution{display:flex;justify-content:space-between;flex-wrap:wrap;margin:30px auto 60px;}
.homethreepoints .solution li{width:calc(50% - 15px);}
.homethreepoints .solution li figure,.homethreepoints .solution li figure img{width:100%;}
@media screen and (max-width: 1080px) {
  .homethreepoints .solution{margin:20px auto 30px;}
  .homethreepoints .solution li{width:calc(50% - 10px);}
}
@media screen and (max-width: 768px) {
  .homethreepoints .solution li{width:100%;max-width:500px;margin:0 auto 20px;}
}*/

.homethreepoints .shadow {
  width: 100%;
  padding: 50px;
  border-radius: 80px;
  background: #edf9fe;
  margin-top: 60px;
}
.homethreepoints .shadow h3 {
  font-size: 30px;
  transform: translateX(-0.5em);
}
.homethreepoints .shadow h3 strong {
  font-size: 150%;
  color: var(--blue);
}
.homethreepoints .shadow h3 strong span {
  color: var(--red);
}
.homethreepoints .shadow p {
  font-size: 24px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1520px) {
  .homethreepoints .shadow {
    padding: 30px;
    border-radius: 50px;
  }
  .homethreepoints .shadow h3 {
    font-size: 24px;
  }
  .homethreepoints .shadow p {
    font-size: 18px;
  }
}
@media screen and (max-width: 1080px) {
  .homethreepoints .shadow {
    padding: 20px;
    border-radius: 30px;
    margin-top: 30px;
  }
  .homethreepoints .shadow h3 {
    font-size: 20px;
  }
  .homethreepoints .shadow h3 strong {
    font-size: 120%;
  }
  .homethreepoints .shadow p {
    font-size: 16px;
  }
}

.homeguests {
}
.homeguests .webtitle {
  margin-bottom: 50px;
}
.homeguests .paragraph {
  margin-bottom: 30px;
}
.guestslist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 60px;
}
.guestslist .guestslistleft {
  width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.guestslist .guestslistleft h3 {
  font-size: 36px;
  margin-bottom: 30px;
}
.guestslist .guestslistleft figure img {
  width: 100%;
}
.guestslist .guestslistright {
  width: calc(100% - 600px);
}
.guestslist .guestslistright p {
  font-size: 20px;
  font-weight: bolder;
  line-height: 2;
}

@media screen and (max-width: 1520px) {
  .guestslist .guestslistleft {
    width: 420px;
  }
  .guestslist .guestslistleft h3 {
    font-size: 30px;
    margin-bottom: 20px;
  }
  .guestslist .guestslistright {
    width: calc(100% - 460px);
  }
  .guestslist .guestslistright p {
    font-size: 16px;
  }
}
@media screen and (max-width: 1080px) {
  .guestslist .guestslistleft {
    width: 340px;
  }
  .guestslist .guestslistleft h3 {
    font-size: 24px;
  }
  .guestslist .guestslistright {
    width: calc(100% - 360px);
  }
}
@media screen and (max-width: 768px) {
  .guestslist .guestslistleft {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 20px;
  }
  .guestslist .guestslistleft h3 {
    font-size: 18px;
  }
  .guestslist .guestslistright {
    width: 100%;
  }
}

/*.homerecom h3{margin-bottom:20px;font-size:36px;}
.homerecom .wide{margin-bottom:30px;}
.homerecomlist{margin-top:50px;margin-bottom:30px;}
.homerecomlist ul{margin-top:-30px;margin-left:-30px;}
.homerecomlist ul li{margin-top:30px;padding-left:30px;}
.homerecomlist ul li .homerecomitem{width:100%;height:100%;padding:10px;border-bottom:3px solid var(--blue);background:#fff;}
.homerecomlist ul li .homerecomitem dt{font-size:18px;margin-bottom:20px;height:3em;font-weight:bolder;}
.homerecomlist ul li .homerecomitem dd{display:flex;justify-content:center;align-items:center;}
@media screen and (max-width: 1080px) {
  .homerecom h3{ font-size:30px;}
  .homerecom .wide{margin-bottom:20px;}
  .homerecomlist{margin-top:30px;margin-bottom:20px;}
  .homerecomlist ul{margin-top:-20px;margin-left:-20px;}
  .homerecomlist ul li{margin-top:20px;padding-left:20px;}
  .homerecomlist ul li .homerecomitem dt{font-size:16px;}
}
@media screen and (max-width: 768px) {
  .homerecom h3{ font-size:24px;}
  .homerecom .homerecomlist ul li{width:50%;}
}
@media screen and (max-width: 468px) {
  .homerecom .homerecomlist ul li{width:100%;}
  .homerecom .homerecomlist ul li .homerecomitem{max-width:300px;margin:0 auto;}

}*/

.tablemain {
  width: 100%;
}
.tablemain table {
  width: 100%;
}
/*.tablemain table tr{width:100%;}*/
.tablemain table tr th {
  border: 2px solid #000;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  font-weight: bolder;
  font-size: 24px;
  width: 240px;
}
.tablemain table tr td {
  border: 2px solid #000;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}
.tablemain table tr td.bgdarkblue,
.tablemain table tr td.bgdarkorange,
.tablemain table tr td.bgdarkyellow {
  font-weight: bolder;
  font-size: 24px;
}
.tablemain table tr td strong {
  font-size: 30px;
  display: block;
}
.tablemain table tr td i {
  display: block;
  margin: 0 auto 20px;
}
/*.tablecon ol li{list-style-type:none;text-indent:-1em;padding-left:1em;font-size:18px;margin-top:5px;}*/
@media screen and (max-width: 1520px) {
  .tablemain table tr th {
    font-size: 20px;
  }
  .tablemain table tr td {
    font-size: 16px;
  }
  .tablemain table tr td strong {
    font-size: 24px;
  }
  .tablemain table tr td.bgdarkblue,
  .tablemain table tr td.bgdarkorange,
  .tablemain table tr td.bgdarkyellow {
    font-size: 20px;
  }
  /*.tablecon ol li{font-size:16px;}*/
}
@media screen and (max-width: 1080px) {
  .tablemain table tr th {
    font-size: 18px;
    border-width: 1px;
    padding: 10px;
    width: 180px;
  }
  .tablemain table tr td {
    font-size: 14px;
    border-width: 1px;
    padding: 10px;
  }
  .tablemain table tr td strong {
    font-size: 20px;
  }
  .tablemain table tr td.bgdarkblue,
  .tablemain table tr td.bgdarkorange,
  .tablemain table tr td.bgdarkyellow {
    font-size: 18px;
  }
  /*.tablecon ol li{font-size:14px;}*/
}
@media screen and (max-width: 768px) {
  .tablemain {
    width: 100%;
    overflow-x: auto;
  }
  .tablemain table tr th {
    width: 120px;
    font-size: 16px;
    padding: 5px;
  }
  .tablemain table tr td {
    padding: 5px;
  }
  .tablemain table tr td strong {
    font-size: 18px;
  }
  .tablemain table tr td.bgdarkblue,
  .tablemain table tr td.bgdarkorange,
  .tablemain table tr td.bgdarkyellow {
    font-size: 16px;
  }
  .tablemain table tr td i {
    display: block;
    margin: 0 auto;
  }
}
@media screen and (max-width: 568px) {
  .tablemain table {
    width: 700px;
  }
}

.bggrey {
  background: #dfdfdf;
}
.bgskyblue {
  background: #edf9fe;
}
.bgdarkblue {
  background: #cbeffc;
}
.bgorange {
  background: #fff0ef;
}
.bgdarkorange {
  background: #ffd3cf;
}
.bgyellow {
  background: var(--yellow);
}
.bgdarkyellow {
  background: #fbedc0;
}

.homesuch {
  position: relative;
}
.homesuch .homesuchleft {
  width: 360px;
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
}
.homesuch .homesuchright {
  width: 360px;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
}
.homesuch .wrapper_920 {
  position: relative;
  z-index: 10;
}
.homesuch .webtitle {
  margin-bottom: 50px;
}
.homesuch ul {
}
.homesuch ul li {
  margin-bottom: 10px;
  padding: 10px 20px;
  background: rgba(180, 229, 248, 0.7);
  font-size: 24px;
  font-weight: bolder;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.homesuch ul li span {
  color: var(--blue);
  margin-right: 10px;
  font-size: 38px;
}
.homesuch .wide {
  font-size: 24px;
  margin-top: 30px;
  font-weight: bolder;
}
.homesuch .webbtngroup {
  margin-top: 50px;
}
@media screen and (max-width: 1520px) {
  .homesuch .homesuchleft,
  .homesuch .homesuchright {
    width: 240px;
  }
  .homesuch ul li {
    font-size: 20px;
  }
  .homesuch ul li span {
    font-size: 32px;
  }
  .homesuch .wide {
    font-size: 20px;
  }
}
@media screen and (max-width: 1080px) {
  .homesuch .homesuchleft,
  .homesuch .homesuchright {
    display: none;
  }
  .homesuch ul li {
    font-size: 16px;
  }
  .homesuch ul li span {
    font-size: 24px;
  }
  .homesuch .wide {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .homesuch ul li {
    align-items: baseline;
  }
  .homesuch ul li span {
    font-size: 20px;
  }
}

.homeplan {
}
.homeplan .webtitle {
  margin-bottom: 50px;
}
.homeplan .wide {
  margin-bottom: 30px;
}
.homeplan .planlist {
  margin-top: 150px;
}
.homeplan .planlist ul {
  margin-top: -50px;
  margin-left: -50px;
}
.homeplan .planlist ul li {
  margin-top: 50px;
  padding-left: 50px;
}
.homeplan .planlist ul li .planitem {
  width: 100%;
  position: relative;
}
.homeplan .planlist ul li .planitem img {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
}
.homeplan .planlist ul li .planitem dl {
  width: 100%;
  font-size: 24px;
}
.homeplan .planlist ul li .planitem dl dt {
  padding: 20px;
  text-align: center;
}
.homeplan .planlist ul li .planitem dl dd {
  padding: 20px;
  text-align: center;
}
.homeplan .planlist ul li .planitem dl dd:last-child {
  height: 8em;
}
.homeplan .planlist ul li .planitem dl dd strong {
  font-size: 150%;
}
@media screen and (max-width: 1520px) {
  .homeplan .planlist ul {
    margin-top: -30px;
    margin-left: -30px;
  }
  .homeplan .planlist ul li {
    margin-top: 30px;
    padding-left: 30px;
  }
  .homeplan .planlist ul li .planitem dl {
    font-size: 20px;
  }
  .homeplan .planlist ul li .planitem dl dt {
    padding: 20px 10px;
  }
  .homeplan .planlist ul li .planitem dl dd {
    padding: 20px 10px;
  }
}
@media screen and (max-width: 1080px) {
  .homeplan .webtitle {
    margin-bottom: 30px;
  }
  .homeplan .wide {
    margin-bottom: 20px;
  }
  .homeplan .planlist {
    margin-top: 100px;
  }
  .homeplan .planlist ul li .planitem img {
    width: 70px;
    top: -80px;
  }
  .homeplan .planlist ul li .planitem dl {
    font-size: 16px;
  }
  .homeplan .planlist ul li .planitem dl dt {
    padding: 15px 10px;
  }
  .homeplan .planlist ul li .planitem dl dd {
    padding: 15px 10px;
  }
}
@media screen and (max-width: 768px) {
  .homeplan .planlist ul li {
    width: 50%;
  }
  .homeplan .planlist ul li .planitem dl dd:last-child {
    height: 9em;
  }
}
@media screen and (max-width: 568px) {
  .homeplan .planlist {
    margin-top: 50px;
  }
  .homeplan .planlist ul li {
    width: 100%;
  }
  .homeplan .planlist ul li .planitem {
    max-width: 380px;
    margin: 0 auto;
  }
  .homeplan .planlist ul li .planitem img {
    position: relative;
    top: 0;
  }
  .homeplan .planlist ul li .planitem dl dd:last-child {
    height: auto;
  }
}

.blueplan dl {
  border: solid var(--blue);
  border-width: 0 3px;
}
.blueplan dl dt {
  background: var(--blue);
  color: var(--white);
  font-weight: bolder;
}
.blueplan dl dd {
  background: #fff;
  border-bottom: 3px solid var(--blue);
}
.blueplan dl dd strong span {
  color: var(--blue);
}

.redplan dl {
  border: solid var(--red);
  border-width: 0 3px;
}
.redplan dl dt {
  background: var(--red);
  color: var(--white);
  font-weight: bolder;
}
.redplan dl dd {
  background: #fff;
  border-bottom: 3px solid var(--red);
}
.redplan dl dd strong span {
  color: var(--red);
}

.yellowplan dl {
  border: solid #ffc000;
  border-width: 0 3px;
}
.yellowplan dl dt {
  background: #ffc000;
  color: var(--white);
  font-weight: bolder;
}
.yellowplan dl dd {
  background: #fff;
  border-bottom: 3px solid #ffc000;
}
.yellowplan dl dd strong span {
  color: #ffc000;
}

.homecase .homecaselist {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 50px auto;
}
.homecase .homecaselist li {
  width: calc(50% - 35px);
}
.homecase .homecaselist li h3 {
  font-size: 28px;
  color: var(--blue);
}
.homecase .homecaselist li h3 strong {
  font-size: 150%;
  margin-left: 10px;
  letter-spacing: 2px;
}
.homecase .homecaselist li > div {
  /*box-shadow:0 0 10px var(--blue);*/
  position: relative;
}
.homecase .homecaselist li > div:after {
  content: "";
  position: absolute;
  left: -5px;
  top: 10px;
  width: calc(100% + 10px);
  height: 100%;
  background: rgba(82, 201, 245, 0.7);
  border-radius: 10px;
}
.homecase .homecaselist li > div div {
  padding: 20px;
  background: #fff;
  position: relative;
  z-index: 1;
}
.homecase .homecaselist li div figure {
  margin-bottom: 20px;
}
.homecase .homecaselist li div figure:after {
  padding-top: 70%;
}
.homecase .homecaselist li div ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.homecase .homecaselist li div ul li {
  width: calc(50% - 20px);
  border: 3px solid var(--blue);
  border-radius: 10px;
  margin-top: 50px;
  padding: 0 20px 20px 20px;
}
.homecase .homecaselist li div ul li:last-child {
  width: 100%;
  margin-bottom: 0;
}
.homecase .homecaselist li div ul li h5 {
  font-size: 24px;
  max-width: 120px;
  text-align: center;
  margin: -20px auto 15px;
  position: relative;
  background: #fff;
}
.homecase .homecaselist li div ul li h5:after {
  content: "";
}
.homecase .homecaselist li div ul li p {
  font-size: 18px;
}
@media screen and (max-width: 1520px) {
  .homecase .homecaselist li {
    width: calc(50% - 20px);
  }
  .homecase .homecaselist li h3 {
    font-size: 24px;
  }
  .homecase .homecaselist li > div div {
    padding: 10px;
  }
  .homecase .homecaselist li div ul li h5 {
    font-size: 20px;
  }
  .homecase .homecaselist li div ul li p {
    font-size: 16px;
  }
}
@media screen and (max-width: 1080px) {
  .homecase .homecaselist {
    margin: 30px auto;
  }
  .homecase .homecaselist li {
    width: calc(50% - 10px);
  }
  .homecase .homecaselist li h3 {
    font-size: 20px;
  }
  .homecase .homecaselist li div ul li {
    width: calc(50% - 10px);
    margin-top: 30px;
  }
  .homecase .homecaselist li div ul li h5 {
    font-size: 20px;
    max-width: 100px;
  }
  .homecase .homecaselist li div ul li p {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .homecase .homecaselist li {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 30px;
  }
}
@media screen and (max-width: 568px) {
  .homecase .homecaselist li div ul li {
    width: 100%;
    margin-top: 10px;
  }
}

.homevoice {
}
.homevoice .voicelist {
  margin-top: 50px;
}
.homevoice .voicelist ul {
  width: 100%;
  margin: 0 auto;
}
.homevoice .voicelist ul li {
  padding: 0 80px;
}
.homevoice .voicelist ul li dl {
  border-radius: 30px;
  border: 5px solid var(--blue);
  background: var(--blue);
  overflow: hidden;
}
.homevoice .voicelist ul li dl dt {
  padding: 15px 30px;
  background: var(--blue);
  width: 100%;
  font-size: 26px;
  color: var(--white);
  font-weight: bolder;
}
.homevoice .voicelist ul li dl dd {
  padding: 15px 30px;
  background: var(--white);
  width: 100%;
  font-size: 20px;
}
.homevoice .voicelist .swiper-button-next {
}
.homevoice .voicelist .swiper-button-next:before {
  content: "";
  border-top: 2px dotted var(--blue);
  position: absolute;
  top: 50%;
  right: 12px;
  width: 30px;
  transform: translateY(-50%);
}
.homevoice .voicelist .swiper-button-next:after {
  color: var(--blue);
  font-size: 38px;
}
.homevoice .voicelist .swiper-button-prev {
}
.homevoice .voicelist .swiper-button-prev:before {
  content: "";
  border-top: 2px dotted var(--blue);
  position: absolute;
  top: 50%;
  left: 12px;
  width: 30px;
  transform: translateY(-50%);
}
.homevoice .voicelist .swiper-button-prev:after {
  color: var(--blue);
  font-size: 38px;
}
@media screen and (max-width: 1520px) {
  .homevoice .voicelist ul li {
    padding: 0 50px;
  }
  .homevoice .voicelist ul li dl dt {
    font-size: 22px;
  }
  .homevoice .voicelist ul li dl dd {
    font-size: 16px;
  }
  .homevoice .voicelist .swiper-button-next:before {
    width: 20px;
  }
  .homevoice .voicelist .swiper-button-next:after {
    font-size: 28px;
  }
  .homevoice .voicelist .swiper-button-prev:before {
    width: 20px;
  }
  .homevoice .voicelist .swiper-button-prev:after {
    font-size: 28px;
  }
}
@media screen and (max-width: 1080px) {
  .homevoice .voicelist {
    margin-top: 20px;
  }
  .homevoice .voicelist ul li {
    padding: 0 36px;
  }
  .homevoice .voicelist ul li dl {
    border-radius: 20px;
    border-width: 3px;
  }
  .homevoice .voicelist ul li dl dt {
    padding: 10px 20px;
    font-size: 18px;
  }
  .homevoice .voicelist ul li dl dd {
    padding: 10px 20px;
    font-size: 14px;
  }
  .homevoice .voicelist .swiper-button-next {
    right: -5px;
  }
  .homevoice .voicelist .swiper-button-prev {
    left: -5px;
  }
}

.homething {
}
.homething .webtitle strong {
  color: var(--black);
  font-size: 160%;
}

.homething .thinglist {
  margin-top: 60px;
}
.homething .thinglist ul {
  margin-top: -30px;
  margin-left: -30px;
}
.homething .thinglist ul li {
  margin-top: 30px;
  padding-left: 30px;
}
.homething .thinglist ul li figure {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 3px solid var(--blue);
  padding: 20px;
  background: var(--white);
}
.homething .thinglist ul li figure img {
  width: 100%;
  max-width: 150px;
}
.homething .thinglist ul li figure figcaption {
  font-size: 20px;
  color: #41200a;
  font-weight: bolder;
  margin-top: 10px;
}
.homething .homethingwide {
  font-size: 20px;
  display: flex;
  justify-content: center;
  margin: 30px auto 50px;
  font-weight: bolder;
}
@media screen and (max-width: 1520px) {
  .homething .thinglist {
    margin-top: 50px;
  }
  .homething .thinglist ul li figure figcaption {
    font-size: 16px;
  }
  .homething .homethingwide {
    font-size: 16px;
  }
}
@media screen and (max-width: 1080px) {
  .homething .thinglist {
    margin-top: 30px;
  }
  .homething .thinglist ul {
    margin-top: -20px;
    margin-left: -20px;
  }
  .homething .thinglist ul li {
    margin-top: 20px;
    padding-left: 20px;
  }
  .homething .thinglist ul li figure {
    padding: 10px;
  }
  .homething .thinglist ul li figure figcaption {
    font-size: 14px;
  }
  .homething .homethingwide {
    font-size: 14px;
    margin: 20px auto 30px;
  }
}
@media screen and (max-width: 768px) {
  .homething .thinglist ul {
    margin-top: -10px;
    margin-left: -10px;
  }
  .homething .thinglist ul li {
    margin-top: 10px;
    padding-left: 10px;
    width: 33.333333%;
  }
  .homething .thinglist ul li figure img {
    max-width: 100px;
  }
}
@media screen and (max-width: 568px) {
  .homething .thinglist ul li {
    width: 50%;
  }
  .homething .thinglist ul li figure {
    border-width: 2px;
  }
  .homething .thinglist ul li figure img {
    max-width: 80px;
  }
}

.hometrading {
}

.tradinglist {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 50px;
}
.tradinglist li {
  width: calc(50% - 38px);
  margin-bottom: 20px;
  padding: 20px 110px;
  font-size: 24px;
  font-weight: bolder;
  border-radius: 50px;
  background: #a8e4fa;
}
@media screen and (max-width: 1520px) {
  .tradinglist li {
    width: calc(50% - 20px);
    margin-bottom: 15px;
    padding: 15px 50px;
    font-size: 20px;
  }
}
@media screen and (max-width: 1080px) {
  .tradinglist {
    margin-top: 30px;
  }
  .tradinglist li {
    width: calc(50% - 10px);
    margin-bottom: 10px;
    padding: 10px 30px;
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .tradinglist li {
    width: 100%;
    margin-bottom: 5px;
    padding: 7px 20px;
  }
}

.homeshootingcon {
}

.homeshootingcon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 50px;
}
.homeshootingcon .homeshootingconleft {
  width: calc(100% - 600px);
  font-size: 24px;
  line-height: 3;
}
.homeshootingcon .homeshootingconright {
  width: 520px;
}
.homeshootingcon .homeshootingconright img {
  width: 100%;
}
@media screen and (max-width: 1520px) {
  .homeshootingcon .homeshootingconleft {
    font-size: 20px;
  }
}
@media screen and (max-width: 1080px) {
  .homeshootingcon .homeshootingconleft {
    width: calc(100% - 380px);
    font-size: 16px;
  }
  .homeshootingcon .homeshootingconright {
    width: 360px;
  }
}
@media screen and (max-width: 768px) {
  .homeshootingcon .homeshootingconleft {
    width: 100%;
    line-height: 1.8;
  }
  .homeshootingcon .homeshootingconright {
    width: 100%;
    max-width: 500px;
    margin: 20px auto 0;
  }
}

.homeqa {
}
.qa {
  margin-top: 60px;
}
.qa li {
  margin-bottom: 30px;
}
.qa li dl {
  width: 100%;
  border: 5px solid var(--blue);
}
.qa li dl dt {
  padding: 15px 30px;
  background: var(--blue);
  font-size: 30px;
  color: var(--white);
  font-weight: bolder;
  display: flex;
  align-items: baseline;
}
.qa li dl dt:before {
  content: attr(data-title);
  padding: 10px;
  margin-right: 30px;
  background: var(--white);
  text-align: center;
  color: var(--blue);
  border-radius: 5px;
  line-height: 100%;
  font-size: 28px;
}
.qa li dl dd {
  padding: 15px 30px;
  display: flex;
  align-items: flex-start;
  font-size: 24px;
  background: var(--white);
}
.qa li dl dd:before {
  content: attr(data-title);
  padding: 10px;
  margin-right: 30px;
  background: var(--red);
  text-align: center;
  color: var(--white);
  border-radius: 5px;
  line-height: 100%;
  font-size: 28px;
  font-weight: bolder;
}
.homeqa .homeqabanner {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.homeqa .homeqabanner img {
  width: 100%;
}
@media screen and (max-width: 1520px) {
  .qa li dl dt {
    font-size: 24px;
  }
  .qa li dl dt:before {
    font-size: 24px;
  }
  .qa li dl dd {
    font-size: 20px;
  }
  .qa li dl dd:before {
    font-size: 24px;
  }
}
@media screen and (max-width: 1080px) {
  .qa {
    margin-top: 30px;
  }
  .qa li {
    margin-bottom: 20px;
  }
  .qa li dl {
    border-width: 3px;
  }
  .qa li dl dt {
    font-size: 20px;
    padding: 10px 20px;
  }
  .qa li dl dt:before {
    font-size: 20px;
    padding: 5px;
    margin-right: 10px;
  }
  .qa li dl dd {
    font-size: 16px;
    padding: 10px 20px;
  }
  .qa li dl dd:before {
    font-size: 20px;
    padding: 5px;
    margin-right: 10px;
  }
  .homeqa .homeqabanner {
    margin-top: 20px;
  }
}
@media screen and (max-width: 768px) {
  .qa li dl dt {
    font-size: 18px;
    padding: 10px;
  }
  .qa li dl dt:before {
    font-size: 18px;
  }
  .qa li dl dd {
    font-size: 14px;
    padding: 10px;
  }
  .qa li dl dd:before {
    font-size: 18px;
  }
}

.homecontact {
}
.colorred {
  color: var(--red);
}
.form {
  margin-top: 60px;
  padding: 50px;
  border-radius: 60px;
  background: rgba(235, 237, 240, 0.6);
}
.form dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.form dl dt {
  font-weight: bolder;
  width: 280px;
}
.form dl dd {
  width: calc(100% - 280px);
}
.form dl dd span.colorred {
  display: none;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  border: 1px solid var(--white);
  border-radius: 1px;
  padding: 15px 20px;
  background: var(--white);
}
.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="tel"]:focus,
.form textarea:focus {
  border: 1px solid var(--black);
}

.form textarea {
  font-size: 24px;
}

.form .apply {
}
.form .apply label {
  display: flex;
  align-items: center;
  font-size: 20px;
  margin-top: 20px;
}
.form .apply label input {
  width: 20px;
  height: 20px;
  margin-right: 20px;
}
.form .apply label span {
}

.form .webbtngroup {
  margin-top: 30px;
}
.form .webbtngroup .webbtn {
  background: var(--blue);
  color: var(--white);
  border-radius: 0;
  max-width: 300px;
  padding: 20px;
  font-size: 24px;
  cursor: pointer;
  transition: 0.3s;
}
.form .webbtngroup .webbtn:hover {
  background: var(--black);
}
@media screen and (max-width: 1520px) {
  .form {
    padding: 30px;
    border-radius: 50px;
  }
  .form dl {
    font-size: 20px;
  }
  .form dl dt {
    width: 200px;
  }
  .form dl dd {
    width: calc(100% - 200px);
  }
  .form textarea {
    font-size: 20px;
  }
  .form .apply label {
    font-size: 16px;
  }
  .form .webbtngroup .webbtn {
    font-size: 16px;
    padding: 15px 20px;
  }
}
@media screen and (max-width: 1080px) {
  .form {
    margin-top: 30px;
    padding: 20px;
    border-radius: 20px;
  }
  .form dl {
    font-size: 16px;
    margin-bottom: 15px;
  }
  .form dl dt {
    width: 180px;
  }
  .form dl dd {
    width: calc(100% - 180px);
  }
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="tel"],
  .form textarea {
    padding: 10px;
  }
  .form textarea {
    font-size: 16px;
  }
  .form .apply label {
    font-size: 14px;
  }
  .form .apply label input {
    width: 14px;
    height: 14px;
    margin-right: 10px;
  }
  .form .webbtngroup .webbtn {
    max-width: 200px;
  }
}
@media screen and (max-width: 768px) {
  .form dl dt {
    width: 100%;
  }
  .form dl dd {
    width: 100%;
    margin-top: 5px;
  }
}

/*public*/
.main {
  display: block;
  background: url(img/bgmask.png) repeat;
}
.part {
  width: 100%;
  padding: 60px 40px;
}
.wrapper_1380 {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.wrapper_1200 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.wrapper_920 {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}
@media screen and (max-width: 1080px) {
  .part {
    padding: 40px 20px;
  }
}
/*layout*/
.layout {
  display: flex;
  flex-wrap: wrap;
}
.betweenside {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.reversal {
  flex-direction: row-reverse;
}
.layout .lycol2 {
  width: 50%;
}
.layout .lycol3 {
  width: 33.333333%;
}
.layout .lycol4 {
  width: 25%;
}
.layout .lycol5 {
  width: 20%;
}
.layout .lycol6 {
  width: 16.666667%;
}

.colorblue {
  color: var(--blue);
}
.bgblue {
  background-color: #edf9fe;
  background-image: url(img/bgmask.png);
  background-repeat: repeat;
}

.iconround {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 7px solid var(--green);
}
.icontriangle {
  display: block;
  width: 0;
  height: 0;
  border-width: 0 15px 24px 15px;
  border-style: solid;
  border-color: transparent transparent var(--blue) transparent;
}
.iconfork {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.iconfork:before {
  content: "";
  display: block;
  width: 28px;
  height: 5px;
  background: var(--red);
  transform: rotate(45deg);
}
.iconfork:after {
  content: "";
  display: block;
  width: 28px;
  height: 5px;
  background: var(--red);
  transform: rotate(-45deg);
  position: absolute;
  top: 1px;
}
@media screen and (max-width: 768px) {
  .iconround {
    width: 24px;
    height: 24px;
    border-width: 5px;
  }
  .icontriangle {
    border-width: 0 10px 20px 10px;
  }
  .iconfork {
    width: 24px;
    height: 24px;
  }
  .iconfork:before,
  .iconfork:after {
    position: absolute;
    top: 5px;
    height: 3px;
    width: 20px;
  }
}

.webtitle {
  display: flex;
  justify-content: center;
}
.webtitle.hassidetitile:before {
  content: "";
  display: block;
  width: 50px;
  height: 60px;
  background: url(img/webtitlelaceleft.png) no-repeat;
  background-size: contain;
}
.webtitle.hassidetitile:after {
  content: "";
  display: block;
  width: 50px;
  height: 60px;
  background: url(img/webtitlelaceright.png) no-repeat;
  background-size: contain;
}
.webtitle h2 {
  font-size: 36px;
  text-align: center;
}
.webtitle h2 span {
  font-size: 200%;
  color: var(--blue);
}
.webtitle h2 em {
  color: var(--blue);
  font-size: 130%;
  font-style: normal;
}
@media screen and (max-width: 1520px) {
  .webtitle:before,
  .webtitle:after {
    width: 36px;
    height: 45px;
  }
  .webtitle h2 {
    font-size: 30px;
  }
}
@media screen and (max-width: 1080px) {
  .webtitle:before,
  .webtitle:after {
    width: 30px;
    height: 36px;
  }
  .webtitle h2 {
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  .webtitle:before,
  .webtitle:after {
    width: 24px;
    height: 30px;
  }
  .webtitle h2 {
    font-size: 20px;
  }
}
@media screen and (max-width: 568px) {
  .webtitle:before,
  .webtitle:after {
    display: none;
  }
  .webtitle h2 span {
    font-size: 150%;
  }
}

.borderline {
  display: inline-block;
  position: relative;
}
.borderline:after {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 5px;
  z-index: 0;
  border-bottom: 5px solid var(--blue);
}
.paragraph {
  /*margin-top:30px;*/
  font-size: 20px;
  font-weight: bolder;
}
@media screen and (max-width: 1520px) {
  .paragraph {
    font-size: 18px;
  }
}
@media screen and (max-width: 1080px) {
  .paragraph {
    font-size: 16px;
  }
}

.wide {
  text-align: center;
}
.wide h3 {
  font-size: 36px;
}
.wide figure {
  display: flex;
  justify-content: center;
}
.wide figure img {
  width: 100%;
}
.wide p {
  font-size: 20px;
}
@media screen and (max-width: 1520px) {
  .wide h3 {
    font-size: 30px;
  }
  .wide p {
    font-size: 18px;
  }
}
@media screen and (max-width: 1080px) {
  .wide h3 {
    font-size: 26px;
  }
  .wide p {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  .wide h3 {
    font-size: 20px;
  }
}
@media screen and (max-width: 568px) {
}

.webbtngroup {
  display: flex;
  justify-content: center;
}
.webbtngroup .webbtn {
  max-width: 600px;
}

a.webbtn {
  text-decoration: none;
}
.webbtn {
  width: 100%;
  color: #000;
  font-size: 32px;
  padding: 10px 60px;
  border-radius: 50px;
  font-weight: bolder;
  text-align: center;
  transition: 0.3s;
}
.webbtn.webbtngradient {
  background: linear-gradient(
    to bottom,
    #fad016 0%,
    #ede583 23%,
    #ebe390 52%,
    #edcb61 78%,
    #f3a60e 100%
  );
}
.webbtn.webbtngradient:hover {
  background: linear-gradient(
    to right,
    #fad016 0%,
    #ede583 23%,
    #ebe390 52%,
    #edcb61 78%,
    #f3a60e 100%
  );
  color: var(--blue);
}
@media screen and (max-width: 1520px) {
  .webbtngroup .webbtn {
    max-width: 500px;
  }
  .webbtn {
    font-size: 28px;
  }
}
@media screen and (max-width: 1080px) {
  .webbtngroup .webbtn {
    max-width: 320px;
  }
  .webbtngroup .webbtn {
    padding: 10px 30px;
  }
  .webbtn {
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  .webbtn {
    font-size: 18px;
  }
}

.tablist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 50px;
}
.tablist li {
  width: calc(50% - 15px);
  list-style: none;
}
.tablist li a {
  width: 100%;
  padding: 20px;
  border-radius: 5px;
  background: #deebf7;
  color: var(--blue);
  text-decoration: none;
  text-align: center;
  font-size: 24px;
  display: block;
  font-weight: bolder;
}
.tablist li.active a {
  background: var(--blue);
  color: #fff;
}
@media screen and (max-width: 1520px) {
  .tablist li a {
    font-size: 20px;
  }
}
@media screen and (max-width: 1080px) {
  .tablist {
    margin-bottom: 30px;
  }
  .tablist li {
    width: calc(50% - 10px);
  }
  .tablist li a {
    padding: 10px;
    font-size: 16px;
  }
}
@media screen and (max-width: 520px) {
  .tablist li {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* --------------------------------------------------
   New Contact Section Styles
-------------------------------------------------- */
.new-contact-section {
  position: relative;
  padding: 6rem 0; /* py-24 */
  overflow: hidden;
  background-color: #0f172a; /* bg-slate-900 */
  font-family:
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo,
    sans-serif;
}

@media (min-width: 768px) {
  .new-contact-section {
    padding: 8rem 0; /* md:py-32 */
  }
}

/* 背景画像エリア */
.contact-bg-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.contact-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px) grayscale(100%);
  opacity: 0.4;
}

/* コンテンツコンテナ */
.contact-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem; /* px-8 */
}

@media (min-width: 768px) {
  .contact-container {
    padding: 0 4rem; /* md:px-16 */
  }
}

/* グリッドレイアウト */
.contact-grid {
  display: grid;
  gap: 1.5rem; /* gap-6 */
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-grid {
    gap: 2.5rem; /* lg:gap-10 */
  }
}

/* カードスタイル */
.contact-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  padding: 2.5rem; /* p-10 */
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
  text-decoration: none;
  transition: all 0.5s ease;
  height: 100%;
  position: relative;
  cursor: pointer;
}

@media (min-width: 768px) {
  .contact-card {
    padding: 3.5rem; /* md:p-14 */
  }
}

/* カードホバー時の動き */
.contact-card:hover {
  transform: translateY(-4px); /* hover:-translate-y-1 */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* テキストスタイル */
.contact-sub {
  font-size: 1.25rem; /* text-xl */
  font-weight: 900; /* font-black */
  color: #1e293b; /* text-slate-800 */
  margin-bottom: 1.5rem; /* mb-6 */
  letter-spacing: 0.025em; /* tracking-wide */
  line-height: 1.4;
}

@media (min-width: 768px) {
  .contact-sub {
    font-size: 1.5rem; /* md:text-2xl */
  }
}

.contact-main {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 900;
  color: #0f172a; /* text-slate-900 */
  margin-bottom: 2rem; /* mb-8 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: sans-serif; /* condensed-fontの代用 */
  line-height: 1;
}

@media (min-width: 768px) {
  .contact-main {
    font-size: 3.75rem; /* md:text-6xl */
  }
}

.contact-desc {
  color: #334155; /* text-slate-700 */
  font-weight: 700;
  font-size: 1.125rem; /* text-lg */
  line-height: 1.8;
  margin-bottom: 2.5rem; /* mb-10 */
}

@media (min-width: 768px) {
  .contact-desc {
    font-size: 1.5rem; /* md:text-2xl */
  }
}

.pc-br {
  display: none;
}
@media (min-width: 1024px) {
  .pc-br {
    display: block;
  }
}

/* 矢印エリア */
.contact-arrow-wrap {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.contact-arrow {
  position: relative;
  width: 3rem; /* w-12 */
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: all 0.5s ease;
}

/* ホバー時に矢印が伸びる */
.contact-card:hover .contact-arrow {
  width: 5rem; /* group-hover:w-20 */
}

/* 矢印の線 */
.arrow-line {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #94a3b8; /* bg-slate-400 */
  transition: background-color 0.5s ease;
}

/* 矢印の頭 */
.arrow-head {
  position: absolute;
  right: 0;
  width: 10px;
  height: 10px;
  border-top: 3px solid #94a3b8; /* border-slate-400 */
  border-right: 3px solid #94a3b8;
  transform: rotate(45deg);
  transition: border-color 0.5s ease;
}

/* ゴールド色 (lpGoldの代用として #c5a661 を使用) */
.contact-card:hover .arrow-line {
  background-color: #c5a661;
}
.contact-card:hover .arrow-head {
  border-color: #c5a661;
}

/* footer css */
.footer {
  background: var(--blue);
  padding: 20px 40px 10px;
}
.footlogo {
  display: block;
  width: 100%;
  max-width: 120px;
  margin: 0 auto 20px;
}
.footlogo a {
  width: 100%;
}
.footlogo a:hover {
}
.footlogo a img {
  width: 100%;
}
.copyright {
  width: 100%;
}
.copyright p {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /*padding:10px 40px;*/
  font-size: 14px;
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 1080px) {
  .footer {
    padding: 20px 20px 5px;
  }
  .footlogo {
    max-width: 100px;
  }
  .copyright p {
    padding: 10px 20px;
    font-size: 12px;
  }
}
@media screen and (max-width: 768px) {
  .footlogo {
    max-width: 80px;
  }
  .copyright p {
    padding: 5px 10px;
  }
}
/* /footer css */
/* -----------------------------------------------------------------
   FV（ファーストビュー）修正用CSS
   ※背景画像を右側に寄せ、青い斜め背景をCSSで再現します
----------------------------------------------------------------- */

.new_banner {
  width: 100%;
  min-height: 650px; /* 高さを確保 */
  background-color: #00b0f0;

  /* 背景の設定（2層構造）
     1層目（上）: 青色の斜めグラデーション（左から55%くらいまで青、残りは透明）
     2層目（下）: 写真（右寄せ）
  */
  background-image:
    linear-gradient(105deg, #00b0f0 55%, transparent 55.1%),
    url(../img/karafull/top_pic2.png);

  background-position:
    center center,
    right center;
  background-size:
    100% 100%,
    auto 100%; /* グラデは全体、写真は高さ基準 */
  background-repeat: no-repeat;

  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 60px 40px;
}

/* コンテンツラッパー（文字が写真に被らないように幅を制限） */
.banner_content {
  width: 55%; /* 画面の左半分強を使う */
  max-width: 700px;
  position: relative;
  z-index: 10;
}

/* メインキャッチコピー */
.top_txt1 {
  color: white;
  font-size: 56px; /* 読みやすいサイズに */
  font-weight: bold;
  text-shadow: none; /* 背景が青になるので影は薄くてもOK */
  line-height: 1.3;
  margin-bottom: 20px;
}

/* 数字強調 */
.top_txt_l {
  font-size: 90px;
  color: #fff;
  font-family: Arial, sans-serif; /* 数字を見やすく */
}

/* サブテキスト */
.top_txt2 {
  color: white;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* 箇条書きリスト */
.benefit_wrapper_simple {
  background: rgba(255, 255, 255, 0.95);
  padding: 25px 40px 25px 30px;
  border-radius: 0 50px 50px 0; /* 右側だけ丸く（デザイン寄せ） */
  display: inline-block;
  min-width: 480px;
}

.benefit_wrapper_simple li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: bold;
  color: #2fbcf0; /* テキスト色を青に */
}

.benefit_wrapper_simple li:last-child {
  margin-bottom: 0;
}

.check_icon {
  width: 30px;
  margin-right: 15px;
  flex-shrink: 0;
}

/* レスポンシブ用クラス */
.spbr,
.spbr2,
.spbr3,
.br580 {
  display: none;
}
.pcbr {
  display: block;
}

/* -----------------------------------------------------------------
   レスポンシブ対応（スマホ・タブレット）
----------------------------------------------------------------- */
@media screen and (max-width: 1080px) {
  /* タブレットサイズ：斜め背景の角度を緩くするか、縦積みに近づける */
  .new_banner {
    background-image:
      linear-gradient(180deg, #00b0f0 60%, transparent 60.1%),
      url(../img/karafull/top_pic2.png);
    background-position:
      center top,
      center bottom;
    background-size:
      100% 100%,
      100% auto;
    align-items: flex-start;
    padding-top: 40px;
  }

  .banner_content {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  .benefit_wrapper_simple {
    border-radius: 20px;
    width: 90%;
    min-width: auto;
    margin: 0 auto;
    text-align: left;
  }
}

@media screen and (max-width: 768px) {
  /* スマホサイズ */
  .new_banner {
    /* 青背景と画像を上下に分割 */
    background-image: url(../img/karafull/top_pic2.png);
    background-position: center bottom;
    background-size: 100% auto; /* 横幅いっぱいに画像を表示 */
    background-color: #00b0f0;
    min-height: auto;
    display: block;
    padding: 40px 20px 300px 20px; /* 下に画像のスペースを空ける */
  }

  .top_txt1 {
    font-size: 32px;
    text-align: left;
  }
  .top_txt_l {
    font-size: 50px;
  }

  .top_txt2 {
    font-size: 16px;
    text-align: left;
  }

  .benefit_wrapper_simple {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  .benefit_wrapper_simple li {
    font-size: 16px;
  }

  .spbr,
  .spbr2 {
    display: inline;
  }
  .pcbr {
    display: none;
  }
}