@charset "utf-8";
/* CSS Document */
/*----------------------------------------
PC用レイアウト（768px以上のスクリーン）
----------------------------------------*/
/*----------------------------------------
共通設定（PC）
----------------------------------------*/
/*normal*/
@font-face {
  font-family: 'myfont';
  src: url("../font/KleeOne-Regular.ttf") format('truetype');
  src: url("../font/KleeOne-Regular.woff") format('woff');
}
/*bold*/
@font-face {
  font-family: 'myfont';
  src: url("../font/KleeOne-SemiBold.ttf") format('truetype');
  src: url("../font/KleeOne-SemiBold.woff") format('woff');
  font-weight: bold;
}
html {
  scroll-behavior: smooth;
}
/*body全体の初期スタイル設定*/
body {
  font-size: 62.5%; /*emの計算がしやすくなる為の定番設定*/
  width: 100%;
  font-family: 'myfont', serif;
  font-weight: normal;
  line-height: 1.7;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
.header, .container {
  font-size: 1.6em;
}
img {
  width: 100%;
  vertical-align: bottom;
}
/*リンク文字の設定*/
a {
  text-decoration: underline;
  color: #FFFFFF;
  transition: .3s;
}
a:hover, a:active {
  color: #606d83;
}
/*見出しタグ設定（PC）*/
h2 {
  margin: 0rem 0rem 1.5rem;
  font-size: 2.2rem;
  font-weight: bold;
}
h3 {
  margin: 0rem 0rem 0.5rem;
  font-size: 1.8rem;
  font-weight: bold;
}
h4 {
  margin: 0.5rem 0rem;
  padding: 0.3rem 0.6rem;
  font-size: 1.3rem;
  border: 1px solid #ccc;
  font-weight: bold;
}
/*----------------------------------------
全体レイアウト（PC）
----------------------------------------*/
/*全体エリア（全体背景を設定するにはここ）*/
.container, .header, .section, .footer {
  width: 100%;
  margin: 0;
  overflow: hidden;
}
/*カラム全体の幅設定*/
.header_inr, .top_image_inr, .section_inr, .contents, .footer_inr {
  max-width: 950px;
  margin: 0 auto;
}
.contents {
  padding: 0px 80px 0px;
}
/*----------------------------------------
モーダルウィンドウ設定
----------------------------------------*/
#modal_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  background-color: #00000070;
}
.modal_mask {
  position: absolute;
  width: 100%;
  height: 100vh;
  opacity: 0.2;
  background: rgba(123, 123, 123, 0.2);
}
.modal_container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  background: #fefefe;
  transform: translate(-50%, -50%);
  box-shadow: 3px 3px 5px #888;
}
button.modal_close {
  position: absolute;
  top: calc(0% - 8px);
  right: calc(0% - 8px);
  padding: 3px;
  width: 40px;
  height: 40px;
  border: 1px solid #fefefe;
  border-radius: 50%;
  background-color: #fefefe;
  font-size: 20px;
  box-shadow: 2px 2px 3px #888;
  line-height: 10px;
  color: #444;
  cursor: pointer;
}
/*----------------------------------------
フェードイン設定
----------------------------------------*/
/*フェードイン*/
.fadein {
  opacity: 0;
  transform: translateY(0px);
  transition: all 1s;
}
/*左からフェードイン*/
.fadeinleft {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 1s;
}
/*右からフェードイン*/
.fadeinright {
  opacity: 0;
  transform: translateX(40px);
  transition: all 1s;
}
/*----------------------------------------
上部固定ヘッダー設定
----------------------------------------*/
/*上部固定ヘッダー全体*/
.header {
  background-image: url("../images/bg_header.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  height: 100px;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 5000;
}
/*ヘッダー内部をカラム幅にする*/
.header_inr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.5rem;
}
/*ヘッダーのロゴの設定*/
.header_logo {
  width: 27%;
}
/*ヘッダーCTAの設定*/
.header_cta {
  width: 73%;
}
.header_mail {
  width: 27%;
  float: right;
}
.header_line {
  width: 27%;
  float: right;
  margin-right: 0.5em;
}
.header_tel {
  width: 36%;
  float: right;
  margin-right: 0.5em;
}
/*----------------------------------------
ファーストビュー設定）
----------------------------------------*/
.top_image {
  background-color: #f8f8f8;
}
/*----------------------------------------
セクションの設定
----------------------------------------*/
.bg_modan {
  background-image: url("../images/bg_modan_pc.webp");
  background-repeat: repeat;
  background-position: top center;
}
/*----------------------------------------
セクション（品目）
----------------------------------------*/
.secInr_hinmoku1 {
  padding-top: 4rem;
  padding-bottom: 0rem;
}
.en {
  font-size: 0.8rem;
  text-indent: -80px;
  border-bottom: 0.5px solid #606d83;
  padding-left: 80px;
  color: #606d83;
}
.box_hinmoku {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}
.box_hinmokuInr {
  width: 16.6%;
  margin-bottom: 1.5rem;
}
.img_hinmoku {
  width: 66%;
  margin: 0 auto;
  margin-bottom: 0.2rem;
}
.name_hinmoku {
  font-weight: bold;
  font-size: 1.2rem;
  display: block;
}
/*----------------------------------------
セクション（コンセプト）
----------------------------------------*/
.secInr_concept {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.box_concept {
  position: relative;
  padding: 1.5rem 2rem;
  border: 0.5px solid #606d83;
}
.txt_concept {
  width: 64%;
}
.img_concept {
  position: absolute;
  width: 42%;
  top: 3rem;
  right: -5rem;
}
/*----------------------------------------
セクション（地域）
----------------------------------------*/
.sec_area {
  position: relative;
}
.secInr_area {
  padding-top: 4rem;
  padding-bottom: 40rem;
  position: relative;
  z-index: 1;
}
.txt_area {
  width: 50%;
}
.img_area {
  position: absolute;
  bottom: -2rem;
  right: -0rem;
}
/*----------------------------------------
セクション（地域）
----------------------------------------*/
.sec_service {
  background-color: #FFFFFF;
  position: relative;
  z-index: -2;
}

/*----------------------------------------
セクション（CTA）
----------------------------------------*/
.sec_cta {
  background-color: #f8f8f8;
}
.secInr_cta {
  padding-top: 10rem;
  padding-bottom: 2rem;
}
.secInr_cta_last {
  padding-bottom: 3rem;
}
.box_cta {
  border: 1px solid #091d40;
  padding: 3rem 4rem 2rem;
  position: relative;
}
.cta_title {
  position: absolute;
  width: 80%;
  padding: 0 1rem;
  background-color: #F8F8F8;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
}
.btn_tel {
  display: block;
  margin-bottom: 1rem;
}
.cta_flex {
  display: flex;
  justify-content: space-between;
}
.btn_line, .btn_mail {
  width: 48.5%;
}
/*----------------------------------------
セクション（特徴）
----------------------------------------*/
.secInr_tokucho {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.tokucho_en {
  color: #606d83;
  font-style: italic;
  padding-left: 15px;
  position: relative;
  margin-bottom: -0.4rem;
}
.tokucho_en::before {
  position: absolute;
  content: "";
  width: 10px;
  border-top: 0.5px solid #606D83;
  vertical-align: middle;
  top: 50%;
  left: 0;
}
.box_tokucho h3 {
  font-style: italic;
}
.box_tokucho {
  margin-bottom: 2.5rem;
}
.box_tokucho:last-child {
  margin-bottom: 0;
}
.box_tokuchoInr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.txt_tokucho {
  width: 60%;
  padding-left: 1rem;
}
.img_tokucho {
  width: 35%;
}
.reverse {
  flex-direction: row-reverse;
}
.sub_right {
  width: 62.5%;
  margin: 0 0 0 auto;
}
/*----------------------------------------
セクション（流れ）
----------------------------------------*/
.secInr_flow {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.secInr_flow h2 {
  margin-bottom: 4rem;
}
.img_step01 {
  width: 80%;
  margin: 0 auto;
  margin-top: -5rem;
}
.triangle {
  margin: 1.5rem auto 1.5rem;
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-top: 2rem solid #606d83;
}
.box_step {
  margin-bottom: 1rem;
}
.box_step:last-child {
  margin-bottom: 0;
}
.nmb_step01, .nmb_step {
  display: inline-block;
  background-color: #606d83;
  color: #FFFFFF;
  font-size: 1.8rem;
  padding: 0rem 1rem;
  font-weight: bold;
}
.nmb_step {
  float: left;
}
.box_subStep {
  border-bottom: 0.5px solid #606d83;
  margin-bottom: 1rem;
}
.sub_step {
  float: left;
  font-size: 1.8rem;
  font-weight: bold;
  padding-left: 1.5rem;
}
.ste_flex {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
.icon_step {
  width: 15%;
}
.txt_step {
  width: 70%;
}
.is03 img {
  width: 90%;
  margin: 0 auto;
}
/*----------------------------------------
セクション（品目詳細）
----------------------------------------*/
.secInr_items {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.re_items {
  margin-bottom: 0.5rem;
}
/*アコーディオン全体*/
.accordion_area {
  list-style: none;
}
.accordion_area li {
  margin: 0 0 1rem;
}
.accordion_area .box_item {
  border: 3px solid #cfd3da;
  border-radius: 10px;
  background-color: #f8f8f8;
  color: #091d40;
}
/*アコーディオンタイトル*/
.title_item {
  position: relative;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  padding: 1rem 50px 1rem 50px;
  transition: all .5s ease;
  text-align: center;
}
/*アイコンの▼と▲*/
.title_item::after {
  position: absolute;
  content: '▼';
  color: #CFD3DA;
}
.title_item::after {
  top: 30%;
  right: 15px;
  transform: rotate(0deg);
}
/*closeというクラスがついたら形状変化*/
.title_item.close::after {
  transform: rotate(-180deg);
}
/*アイテムアイコン設定*/
.title_item::before {
  position: absolute;
  content: '';
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}
.ti01::before {
  background-image: url("../images/icon_list01.svg");
  background-size: 50px;
}
.ti02::before {
  background-image: url("../images/icon_list02.svg");
  background-size: 50px;
}
.ti03::before {
  background-image: url("../images/icon_list03.svg");
  background-size: 50px;
}
.ti04::before {
  background-image: url("../images/icon_list04.svg");
  background-size: 50px;
}
.ti05::before {
  background-image: url("../images/icon_list05.svg");
  background-size: 50px;
}
.ti06::before {
  background-image: url("../images/icon_list06.svg");
  background-size: 50px;
}
.ti07::before {
  background-image: url("../images/icon_list07.svg");
  background-size: 50px;
}
.ti08::before {
  background-image: url("../images/icon_list08.svg");
  background-size: 50px;
}
.ti09::before {
  background-image: url("../images/icon_list09.svg");
  background-size: 50px;
}
.ti10::before {
  background-image: url("../images/icon_list10.svg");
  background-size: 50px;
}
.ti11::before {
  background-image: url("../images/icon_list11.svg");
  background-size: 50px;
}
.ti12::before {
  background-image: url("../images/icon_list12.svg");
  background-size: 50px;
}
.ti13::before {
  background-image: url("../images/icon_list13.svg");
  background-size: 50px;
}
.ti14::before {
  background-image: url("../images/icon_list14.svg");
  background-size: 50px;
}
.ti15::before {
  background-image: url("../images/icon_list15.svg");
  background-size: 50px;
}
.ti16::before {
  background-image: url("../images/icon_list16.svg");
  background-size: 50px;
}
.ti17::before {
  background-image: url("../images/ion_list17.svg");
  background-size: 50px;
}
/*アコーディオンで隠れるエリア*/
.list_item {
  display: none; /*初めは非表示*/
  background: #CFD3DA;
  margin: 0 1rem 1rem 1rem;
  padding: 1.5rem;
}
.list_item div {
  margin-bottom: 1rem;
}
label.btn_item {
  display: block;
  text-align: center;
  color: #FFFFFF;
  font-size: 0.8rem;
  background-color: #091d40;
  border-radius: 50px;
  text-decoration: none;
  padding: 0.2rem 2rem 0.3rem;
  width: 200px;
  margin: 0 auto;
  transition: .3s;
}
/*ポップアップ*/
.start {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
}
#pop-up1, #pop-up2, #pop-up3, #pop-up4, #pop-up4, #pop-up5, #pop-up6, #pop-up7, #pop-up8, #pop-up9, #pop-up10, #pop-up11, #pop-up12, #pop-up13, #pop-up14, #pop-up15, #pop-up16, #pop-up17 {
  display: none; /* label でコントロールするので input は非表示に */
}
.overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}
#pop-up1:checked + .overlay, #pop-up2:checked + .overlay, #pop-up3:checked + .overlay, #pop-up4:checked + .overlay, #pop-up5:checked + .overlay, #pop-up6:checked + .overlay, #pop-up7:checked + .overlay, #pop-up8:checked + .overlay, #pop-up9:checked + .overlay, #pop-up10:checked + .overlay, #pop-up11:checked + .overlay, #pop-up12:checked + .overlay, #pop-up13:checked + .overlay, #pop-up14:checked + .overlay, #pop-up15:checked + .overlay, #pop-up16:checked + .overlay, #pop-up17:checked + .overlay {
  display: block;
  z-index: 9999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}
.relative {
  position: relative;
}
.window {
  width: 90vw;
  max-width: 950px;
  height: 90vh;
  overflow: scroll !important;
  background-color: #ffffff;
  border-radius: 6px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box_detail {
  padding: 0 2rem 1.5rem;
  font-size: 0.8rem;
}
.finish {
  display: block;
  width: 30px;
  cursor: pointer;
  margin: 0 0 0 auto;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #091d40;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 5000;
}
/*ポップアップここまで*/
.box_txt_item {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.txt_item {
  width: 55%;
}
.img_item {
  width: 35%;
}
/*----------------------------------------
セクション（事例）
----------------------------------------*/
.secInr_jirei {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.box_jirei {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.box_jireiInr {
  width: 30%;
  background-color: #F8F8F8;
  padding: 0.5rem;
}
.img_jirei {
  margin-bottom: 0.5rem;
}
.name_jirei {
  margin-bottom: 0.5rem;
  color: #091d40;
}
.label_jirei span {
  display: inline-block;
  width: 19px;
  text-align: center;
  background-color: #606d83;
  border: 1px solid #3d3f45;
  font-size: 0.8rem;
  margin: 0;
  margin-bottom: 0.3rem;
}
.price_jirei {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 0.3rem;
  border-bottom: 0.5px solid #606d83;
}
.triangle_white {
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 10em solid transparent;
  border-right: 10em solid transparent;
  border-bottom: 4em solid #F8F8F8;
}
/*----------------------------------------
セクション（対応）
----------------------------------------*/
.sec_taiou {
  background-color: #F8F8F8;
}
.secInr_taiou {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.box_taiou {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.txt_taiou {
  width: 52%;
  color: #091d40;
  font-size: 1.2rem;
  font-weight: bold;
}
.txt_taiou span {
  font-size: 1.5rem;
}
.img_gomi {
  width: 48%;
}
/*----------------------------------------
セクション（比較）
----------------------------------------*/
.secInr_hikaku {
  padding-top: 4rem;
  padding-bottom: 2rem;
}
.box_hikaku {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.box_refg {
  width: 25%;
  border-bottom: 0.5px solid #606d83;
}
.img_refg {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 1rem;
}
.name_hikaku {
  text-align: center;
}
.img_hikaku {
  width: 75%;
}
.txt_hikaku {
  width: 550px;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  background-color: #F8F8F8;
  border-radius: 50px;
  color: #091d40;
  padding: 0.2rem 0 0.3rem;
  background-image: url("../images/icon_point@2x.webp");
  background-repeat: no-repeat;
  background-size: 11.5%;
}
/*----------------------------------------
セクション（声）
----------------------------------------*/
.secInr_koe {
  padding-top: 4rem;
  padding-bottom: 3rem;
}
.nmb_voice {
  color: #606d83;
  font-size: 1.5rem;
  font-weight: bold;
}
.nmb_voice span {
  font-size: 2rem;
}
.box_voice {
  margin-bottom: 1rem;
}
.box_voice:last-child {
  margin-bottom: 0rem;
}
.intro_voice {
  background-color: #091d40;
  padding: 1.5rem 1.5rem 1rem;
  border-top: 0.5px solid #606d83;
  border-left: 0.5px solid #606d83;
  border-right: 0.5px solid #606d83;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box_pro {
  width: 25%;
}
.box_introInr {
  width: 72%;
}
.txt_voice {
  background-color: #F8F8F8;
  padding: 1.5rem 2rem;
  color: #091d40;
}
.img_voice {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 0.2rem;
}
.pro_voice {
  text-align: center;
  font-size: 0.9rem;
}
.case {
  display: inline-block;
  background-color: #606d83;
  border-radius: 10px 10px 0 0;
  font-size: 0.8rem;
  padding: 0 1rem;
}
.title_voice {
  font-size: 1.5rem;
  padding-left: 1rem;
  font-weight: bold;
  background-color: #F8F8F8;
  color: #091d40;
  margin-bottom: 1rem;
}
.sub_voice {
  font-size: 1.3rem;
  margin-bottom: 0rem;
}
.star_voice {
  font-size: 2.2rem;
  color: #f8f627;
}
.star_voice span {
  display: inline-block;
  margin-right: 0.5rem;
}
/*----------------------------------------
セクション（質問）
----------------------------------------*/
.secInr_qa {
  padding-top: 4rem;
  padding-bottom: 3rem;
}
.box_q, .box_a {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 80%;
}
.icon_q, .icon_a {
  width: 10%;
}
.icon_q {
  margin-right: 1rem;
}
.txt_q, .txt_a {
  width: 85%;
  border-radius: 10px;
  padding: 1rem;
  color: #091d40;
}
.txt_q {
  background-color: #f8f8f8;
  font-weight: bold;
}
.txt_a {
  background-color: #dee1e6;
  margin-right: 1rem;
}
.box_q {
  margin: 0 auto 0 0;
  margin-bottom: 0.5rem;
}
.box_a {
  flex-direction: row-reverse;
  margin: 0 0 0 auto;
}
.box_qa {
  margin-bottom: 2rem;
}
.box_qa:last-child {
  margin-bottom: 0;
}
/*折り畳みここから*/
.grad-wrap {
  position: relative;
}
.grad-btn1 { /*.grad-btnのCSSは表示/非表示の動作には関係ないので、自由設定可*/
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.2rem 2rem 0.3rem;
  width: 200px;
  margin: auto;
  border-radius: 50px;
  background: #091d40;
  border: 1px solid #f8f8f8;
  color: #FFFFFF;
  text-align: center;
  cursor: pointer;
  transition: .3s ease;
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(9, 29, 64, 0) 0%, rgba(9, 29, 64, 0.9) 50%, rgba(9, 29, 64, 0.9) 50%, #091d40 100%);
  background: linear-gradient(top, rgba(9, 29, 64, 0) 0%, rgba(9, 29, 64, 0.9) 50%, rgba(9, 29, 64, 0.9) 50%, #091d40 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn1 {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
} /*折り畳みここまで*/
/*QAアコーディオン全体*/
.box_acqa {
  border: 3px solid #cfd3da;
  border-radius: 10px;
  background-color: #F8F8F8;
  color: #091d40;
}
/*アコーディオン質問*/
.ac_q {
  position: relative;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  padding: 1rem 50px 1rem 70px;
  transition: all .5s ease;
}
/*アイコンの▼と▲*/
.ac_q::after {
  position: absolute;
  content: '▼';
  color: #CFD3DA;
}
.ac_q::after {
  top: 30%;
  right: 15px;
  transform: rotate(0deg);
}
/*closeというクラスがついたら形状変化*/
.ac_q.close::after {
  transform: rotate(-180deg);
}
/*アイテムアイコン設定*/
.ac_q::before {
  position: absolute;
  content: 'Q';
  font-size: 2.2rem;
  font-weight: bold;
  width: 50px;
  height: 50px;
  top: -0.2rem;
  left: 1.5rem;
}
/*アコーディオンで隠れるエリア*/
.ac_a {
  display: none; /*初めは非表示*/
  background: #dee1e5;
  margin: 0 1rem 1rem 1rem;
  padding: 1rem;
  position: relative;
}
.ac_a div {
  margin-bottom: 1rem;
}
/*----------------------------------------
セクション（メッセージ）
----------------------------------------*/
.sec_msg::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-image: url("../images/bg_msg.webp");
  background-size: cover;
}
.secInr_msg {
  padding-top: 4rem;
  padding-bottom: 3rem;
}
.img_no1 {
  width: 200px;
  margin: 0 auto;
  margin-bottom: 1rem;
}
.sub_msg {
  text-align: center;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}
.txt_msg {
  width: 80%;
  text-align: center;
  margin: 0 auto;
  padding: 2rem 2rem;
  background-color: rgba(255, 255, 255, .8);
  color: #091d40;
}
/*----------------------------------------
セクション（プライバシー）
----------------------------------------*/
.secInr_privacy {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #091d40;
}
.secInr_privacy a {
  color: #091d40;
  transition: .3s;
}
.secInr_privacy a:hover {
  color: #606d83;
}
.secInr_privacy h2 {
  text-align: center;
  color: #091d40;
}
.secInr_privacy h3 {
  color: #091d40;
  margin: 0.5rem 0em;
  padding: 0.3rem 0.6rem;
  font-size: 1.5rem;
  font-weight: bold;
  border-left: 8px solid #606d83;
  border-bottom: 1px dotted #606d83;
}
.indent01 {
  margin-left: 1.5rem;
}
.indent02 {
  margin-left: 3rem;
}
/*----------------------------------------
テーブル設定
----------------------------------------*/
table {
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  margin: 1em 0em;
}
th, td {
  padding: 0.5em;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
th {
  background-color: #f0f0f0;
  font-weight: bold;
  text-align: center;
}
td {
  background-color: #fff;
  text-align: left;
  padding-left: 1em;
}
.table_style_01 {
  text-align: left;
  vertical-align: middle;
}
/*----------------------------------------
問合せフォーム
----------------------------------------*/
.sec_form {
  color: #091d40;
}
.secInr_form {
  padding: 0 0rem 2rem;
}
.sec_form h2 {
  background-image: url("../images/bg_header.webp");
  background-repeat: no-repeat;
  height: 100px;
  background-position: center bottom;
  text-align: center;
  padding-top: 0.5rem;
  color: #FFFFFF;
}
fieldset {
  border: none;
}
form[name="toiawase_from"] {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
table.formTable {
  border-collapse: collapse;
  width: 100%;
}
table.formTable tr td {
  width: 75%;
  border: 1px solid #fff;
  padding: 10px 20px;
  text-align: left;
  background-color: #dee1e6;
}
table.formTable tr th {
  border: 1px solid #fff;
  padding: 10px 20px;
  background-color: #091d40;
  color: #fff;
  width: 40%;
}
table.formTable tr td input, table.formTable tr td select, table.formTable tr td textarea {
  padding: 5px 5px;
  margin-right: 2px;
}
input[type="text_00"] {
  width: 25%;
}
input[type="text_01"] {
  width: 50%;
  border: 1px solid #CCCCCC;
}
input[type="text_02"] {
  width: 70%;
  border: 1px solid #CCCCCC;
}
input[type="text_03"] {
  width: 95%;
  border: 1px solid #CCCCCC;
}
input[type="image"] {
  width: 70%;
  text-align: center;
  margin: 1em 0em;
}
table.formTable tr td textarea {
  width: 95%;
  border: 1px solid #CCCCCC;
}
.require {
  color: #F8F627;
}
input.soushin {
  background-color: #dee1e6;
  border-radius: 10px;
  border: 1px solid #091d40;
  width: 60%;
  text-align: center;
  margin: 0.5rem 0em;
  font-size: 1.5rem;
  padding: 0.5rem;
  color: #091d40;
}
/*----------------------------------------
フッター部分
----------------------------------------*/
.footer {
  background-color: #091d40;
  padding: 3rem 0rem 2rem;
  text-align: center;
  font-size: 0.8rem;
}
.box_info {
  display: flex;
  justify-content: space-around;
  margin-bottom: 3rem;
}
.box_company, .box_operation {
  text-align: left;
  width: 40%;
}
.box_company p, .box_operation p {
  margin-bottom: 0.3rem;
}
.box_company table, .box_operation table {
  padding: 0;
  margin: 0;
  border: none;
  background-color: inherit;
}
.box_company th, .box_operation th, .box_company td, .box_operation td {
  padding: 0;
  margin: 0;
  border: none;
  background-color: inherit;
  line-height: 1.3;
  padding-bottom: 0.3rem;
}
.box_company th, .box_operation th {
  text-align: left;
  vertical-align: baseline;
}
.box_company th {
  width: 65px;
}
.box_operation th {
  width: 128px;
}
/*----------------------------------------
ページトップへ戻る
----------------------------------------*/
.pagetop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 15px;
}
.pagetop a {
  display: block;
  background-color: #ccc;
  text-align: center;
  color: #222;
  font-size: 1.6em;
  text-decoration: none;
  padding: 15px 20px;
  opacity: 0.5;
}
.pagetop a:hover {
  display: block;
  background-color: #b2d1fb;
  text-align: center;
  color: #fff;
  font-size: 1.6em;
  text-decoration: none;
  padding: 15px 20px;
  opacity: 0.5;
}

/**
* -------------------------------------------
* Apoo(20241208) ここから一番下まで。
*
* TOP PERFORMANCE, お買取実績
* --------------------------------------------
*/
.secInr_performance {
	margin-top: 4rem;
}

.top-performance__slide {
	position: relative;
	overflow: hidden;
	--swiper-theme-color: #091d3f;
	width: min(100%, 900px);
	margin: 0 auto;
}

.top-performance .swiper-slide {
	height: auto;
}

.top-performance__item {
	--inner-space: 8px;
	transition: all .3s;
	height: 100%;
	/* box-shadow: 0 3px 6px rgba(0, 0, 0, .22); */
	background: #f8f8f8;
}

.top-performance__item:hover {
	opacity: .8;
}

.top-performance__item-inner {
	display: flex;
	flex-direction: column;
	padding: var(--inner-space) var(--inner-space) 16px;
}

a.top-performance__item-inner {
	text-decoration: none;
}

.top-performance__item-image {
	--decoration-color: rgb(106 120 142 / 78%);
	--decoration-size: 40px;
	position: relative;
	aspect-ratio: 1/1;
	width: calc(100% - 10px);
	padding: 5px;
}

.top-performance__item-image::before,
.top-performance__item-image::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.top-performance__item-image::before {
	top: 0;
	left: 0;
	border-style: solid;
	border-width: var(--decoration-size) var(--decoration-size) 0 0;
	border-color: var(--decoration-color) transparent transparent transparent;
}

.top-performance__item-image::after {
	bottom: 0;
	right: 0;
	border-style: solid;
	border-width: 0 0 var(--decoration-size) var(--decoration-size);
	border-color: transparent transparent var(--decoration-color) transparent;
}

.top-performance__item-image>img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}


.top-performance__item-content {
	margin-top: .5em;
}

.top-performance__item-content>h3 {
	margin: 0;
	color: #091d3f;
	font-size: 1rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.top-performance__more {
	text-align: center;
	margin: 3rem 0 3rem;
}

.top-performance__more a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	/* box-shadow: 0 4px 6px rgb(91 91 91 / 40%); */
	border-radius: 2em;
	border: 1px solid #fff;
	padding: .5em 1em;
	background: #091d3f;
	color: #fff;
	font-size: 1.1rem;
	letter-spacing: .1em;
	text-decoration: none;
}

.top-performance__more a:hover {
	opacity: .8;
	/* background: #fff;
	color: #091d3f; */
}

/* HTML: <div class="loader"></div> */
.loader {
	margin: 3rem 0;
	font-weight: bold;
	font-family: sans-serif;
	font-size: 30px;
	animation: l1 1s linear infinite alternate;
	text-align: center;
}

.loader::before {
	content: "Loading..."
}

@keyframes l1 {
	to {
		opacity: 0
	}
}

.loader.loaded {
	display: none;
	animation: none;
}


.top-performance :is(.swiper-button-prev, .swiper-button-next ) {
	--swiper-navigation-size: 20px;
	--inner-space: 20px;
	width: calc(var(--swiper-navigation-size) + var(--inner-space));
	height: calc((var(--swiper-navigation-size) + var(--inner-space)));
	margin-top: calc((var(--swiper-navigation-size) + var(--inner-space)) / -2);
	background: #091d3f;
	color: #fff;
	font-weight: 600;
}