@charset "utf-8";


@media screen and (max-width: 1023px) {

/* スマホ版のみ表示する。PC版では削除 */
.sponly { display:block; }

/* PC版のみ表示する。スマホ版では削除 */
.pconly { display:none; }

body.is-noscroll {
overflow: hidden;
}

/* ヘッダー全体（デフォルト：透明） */
.nwk1 {
height: 60px;
background-color: transparent;
box-shadow: none;
transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* 100px以上スクロール時のヘッダー背景（白の透過70%） */
.nwk1.is-scrolled {
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.nwk1_bg {
display: none;
}

.nwk1_inner {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
height: 100%;
justify-content: space-between;
}

.nwk1_logo img.pc_logo {
display: none;
}

.nwk1_logo img.sp_logo {
display: block;
height: 28px;
width: auto;
}

/* メニュー展開時は通常位置のロゴを非表示 */
.nwk1.is-active .nwk1_logo img.sp_logo {
opacity: 0;
visibility: hidden;
}

/* ハンバーガーボタン定義（閉じた状態：グラデーション） */
.sp_menu_btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: linear-gradient(135deg, #2fa3e6 0%, #1d71c6 100%);
border-radius: 50%;
border: none;
cursor: pointer;
position: relative;
z-index: 1002;
padding: 0;
outline: none;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.sp_menu_btn .btn_icon_close {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 20px;
height: 14px;
}

.sp_menu_btn .btn_icon_close span {
display: block;
width: 100%;
height: 2px;
background-color: #ffffff;
border-radius: 2px;
}

.sp_menu_btn .btn_icon_open {
display: none;
width: 18px;
height: 18px;
position: relative;
}

.sp_menu_btn .btn_icon_open::before,
.sp_menu_btn .btn_icon_open::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #ffffff;
}

.sp_menu_btn .btn_icon_open::before {
transform: rotate(45deg);
}

.sp_menu_btn .btn_icon_open::after {
transform: rotate(-45deg);
}

/* メニュー開いた状態のボタン */
.nwk1.is-active .sp_menu_btn {
background: none;
box-shadow: none;
}

.nwk1.is-active .sp_menu_btn .btn_icon_close {
display: none;
}

.nwk1.is-active .sp_menu_btn .btn_icon_open {
display: block;
}

/* 右側エリア（メニュー展開時） */
.nwk1_right {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #ffffff;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 0;
padding: 0 0 60px 0;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1001;
overflow-y: auto;
}

.nwk1.is-active .nwk1_right {
opacity: 1;
visibility: visible;
}

/* メニューが開いた時のヘッダー上部（Dark部分：logosp2.webpを表示） */
.sp_header_top {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
background-color: #383838;
position: relative;
width: 100%;
flex-shrink: 0;
}

.sp_header_top img {
height: 24px;
width: auto;
}

.nwk1_nav {
width: 100%;
padding: 20px 30px 0 30px;
box-sizing: border-box;
}

.nwk1_nav ul {
flex-direction: column;
gap: 0;
width: 100%;
}

.nwk1_nav li {
width: 100%;
border-bottom: 1px solid #333333;
}

/* 「よくある質問（最後尾要素）」の下線を消去 */
.nwk1_nav li:last-child {
border-bottom: none;
}

.nwk1_nav a {
display: block;
color: #333333;
font-size: 20px;
font-weight: 700;
padding: 22px 0 12px 0;
text-align: left;
}

/* 「よくある質問」の100px下に配置し、btn_orange_largeとスタイル統一 */
.nwk1_cta {
margin-top: 70px;
padding: 0 20px;
text-align: center;
}

.cta_wrapper90 { position: relative; margin: 0 auto; width: 90%; }

.nwk1_cta .btn_orange {
display: block;
width: 100%;
max-width: 380px;
margin: 0 auto;
padding: 14px 0 18px 0;
border-radius: 50px;
font-family: "Noto Sans JP", sans-serif;
font-size: 18px;
font-weight: 700;
color: #fff;
text-align: center;
letter-spacing: -1px;
box-sizing: border-box;
background: linear-gradient(to bottom, #ffc000 0%, #ff8300 50%, #ff5e00 100%);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nwk1_cta .btn_orange:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}






/* ==========================================
nwk2: メインビジュアル
========================================== */
.nwk2 {
position: relative;
width: 100%;
margin: 0 auto;
padding: 70px 0 15px 0;

background-image: url("../images/wk1bg_sp.webp");
background-size: 140%;
background-repeat: no-repeat;
background-position: center top;
overflow: hidden;
}

.nwk2s90 { position: relative; margin: 0 auto; width: 90%; }


.nwk2img {
position: absolute;
top: 15px;
right: -10%;
width: 600px;
overflow: hidden;
}

.nwk2img img { 
width: 100%;
}

.nwk2 h1 {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 60px;
  line-height: 1.2;
  margin: 20px 0 0 0;
  background: linear-gradient(135deg, #4282c4 0%, #1a3c6e 50%, #0d1e38 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.nwk2 h2 {
position: relative;
width: 100%;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.7;
margin: 20px 0 0 0;
}



/* スマートフォン（767px以下） */
@media screen and (max-width: 767px) {

.nwk2img {
position: absolute;
top: 15px;
right: -10%;
width: 500px;
}

.nwk2img img { 
width: 100%;
}

.nwk2 h1 {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.2;
  margin: 20px 0 0 0;
  background: linear-gradient(135deg, #4282c4 0%, #1a3c6e 50%, #0d1e38 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.nwk2 h2 {
position: relative;
width: 100%;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.7;
margin: 20px 0 0 0;
}

}

/* 小型スマートフォン（480px以下） */
@media screen and (max-width: 480px) {

.nwk2img {
position: absolute;
top: 70px;
right: -15%;
width: 85%;
}

.nwk2img img { 
width: 100%;
}

.nwk2 h1 {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.2;
  margin: 20px 0 0 0;
  background: linear-gradient(135deg, #4282c4 0%, #1a3c6e 50%, #0d1e38 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

.nwk2 h2 {
position: relative;
width: 100%;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.7;
margin: 20px 0 0 0;
}

}



.nwk2awrd {
position: relative;
margin: 30px 0 0 0;
width: 100%;
}

.nwk2awrd img {
width: 100%;
}

.btn_orange_large {
position: relative;
display: block;
width: 100%;
max-width: 680px;
margin: 38px auto 0 auto;
border-radius: 50px;
box-sizing: border-box;
overflow: hidden;
background: linear-gradient(to bottom, #ffc000 0%, #ff8300 50%, #ff5e00 100%);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn_orange_large a {
display: block;
width: 100%;
padding: 16px 0 20px 0;
text-align: center;
text-decoration: none;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 18px;
color: #fff;
letter-spacing: -1px;
}

.btn_orange_large:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

/* ==========================================
無限ループカルーセル & ポップアップモーダル
========================================== */
.infinite_carousel {
 padding: 30px 0 40px 0;
}




.nwk3sitasp { position: relative; margin: 0; width: 100%; height: 17px; }
.nwk3sitasp img { width: 100%; }



/* ==========================================
nwk4: お悩みセクション
========================================== */
.nwk4 {
position: relative;
margin: 0;
padding: 55px 0 50px 0;
width: 100%;
background-color: #f5f5f5;
}

.nwkmdsh3 h3 {
text-align: center;
color: #2F87B0;
font-size: 20px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
}

.nwkmdsline {
position: relative;
margin: 1em auto 1.5em auto;
width: 16%;
height: 4px;
background-color: #2F87B0;
}

.nwkmdstxt { margin: 0 auto; width: 80%; }

.nwkmdstxt p {
text-align: center;
color: #2F87B0;
font-size: 16px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
line-height: 1.6;
}

/* 親容器：幅90%に変更し、縦並びに */
  .nwk4_inner {
    width: 80%;
    margin: 2em auto 0 auto;
    padding: 0;
    flex-direction: column;
    gap: 16px; /* カード同士の間隔 */
  }

  /* カード要素：幅100%（親要素の90%に対して全幅）にし、横並び（flex）へ */
  .nwk4inbx {
    width: 100%;
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    justify-content: flex-start;
    padding: 0.8em 0.8em;
    box-sizing: border-box;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  /* 画像（アイコン）部分：固定幅に設定 */
  .nwk4inbximg {
    width: 70px; /* アイコンの大きさに合わせて調整してください */
    max-width: none;
    margin: 0;
    flex-shrink: 0; /* 画像が潰れるのを防ぐ */
  }

  /* テキスト部分：左揃えにし、余白調整 */
  .nwk4inbxtxt {
    margin: 0 0 0 1em; /* 左側にアイコンとの余白を作る */
    flex: 1;
  }

  .nwk4inbxtxt p {
    text-align: left; /* 左揃え */
    font-size: 16px;  /* スマホ用にフォントサイズを調整 */
    line-height: 1.4;
  }
  
  /* スマホでの改行（<br>）を無効化して綺麗に見せたい場合（任意） */
  .nwk4inbxtxt p br {
    display: none;
  }
		
		
/* ==========================================
nwk5: アプレの3つの強み
========================================== */
.nwk5 {
position: relative;
margin: 0;
padding: 0;
width: 100%;
background-image: url("../images/wk5bg_sp.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 0;
overflow: hidden;
}

.nwk5ue {
position: relative;
margin: 0 auto;
width: 100%;
height: 17px;
z-index: 10;
}

.nwk5ue img {
width: 100%;
height: 100%;
display: block;
}

.nwk5lef {
position: absolute;
top: -50px;
left: 0px;
width: 700px;
height: auto;
z-index: 1;
}

.nwk5lef img {
width: 100%;
display: block;
}

.nwk5rig {
position: absolute;
top: -200px;
right: 0px;
width: 470px;
height: auto;
z-index: 1;
}

.nwk5rig img {
width: 100%;
display: block;
}

.nwk5_inner {
position: relative;
margin: 0 auto;
padding: 45px 0;
width: 90%;
min-height: 10px;
z-index: 2;
}

.nwk5tit {
position: relative;
margin: 0 auto;
width: 70%;
max-width: 320px;
}

.nwk5tit img {
width: 100%;
}

.nwk5k_container {
position: relative;
margin: 2.5em auto 1em auto;
display: block;
width: 90%;
padding: 0;
box-sizing: border-box;
}

.nwk5k_card { margin: 2em auto 0 auto;
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}

.nwk5cd_header {
display: flex;
align-items: center;
margin-bottom: 16px;
}

.nwk5num_box {
width: 40px;
margin-right: 18px;
flex-shrink: 0;
}

.nwk5num_img {
width: 100%;
height: auto;
display: block;
}

.nwk5cd_title {
margin: 0;
font-size: 20px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
line-height: 1.3;
color: #fff;
}

.nwk5cd_text {
margin: 0 0 16px 0;
font-size: 16px;
line-height: 1.6;
color: #fff;
text-align: justify;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
}

.nwk5cd_photo {
width: 100%;
max-width: 300px;
margin: 0 auto;
border-radius: 12px;
overflow: hidden;
}

.nwk5cd_photo img {
width: 100%;
height: auto;
}

/* ==========================================
nwk6: トータルサポート
========================================== */
.nwk6 {
position: relative;
margin: 0;
padding: 1.5em 0 0 0;
width: 100%;
}

.nwk6_container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 20px;
width: 90%;
margin: 1em auto 0 auto;
padding: 0;
box-sizing: border-box;
}

.nwk6_item {
width: 46%;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}

.nwk6_icon_box {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0px;
}

.nwk6_icon_img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
object-fit: contain;
}

.nwk6_label {
width: 100%;
height: 30px;
background-color: #333333;
color: #ffffff;
font-size: 14px;
font-weight: bold;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
letter-spacing: 0.03em;
white-space: nowrap;
box-sizing: border-box;
padding: 16px 10px 17px 10px;
}

/* ==========================================
nwk7: お客様の声
========================================== */
.nwk7 {
position: relative;
margin: 5em 0 0 0;
padding: 2em 0 0 0;
width: 100%;
min-height: 10px;
background-image: url("../images/wk7bg_sp.webp");
background-repeat: repeat-y;
background-position: center top;
background-size: 734px auto;
}

.nwk7_container {
width: 90%;
margin: 0 auto;
padding: 0;
}

.nwk7_con1 { position: relative; margin: 0em auto 0 auto; width: 90%; height: auto; padding-left: 0px; }
.nwk7_con2 { position: relative; margin: 3em auto 0 auto; width: 90%; height: auto; padding-right: 0px; }
.nwk7_con3 { position: relative; margin: 3em auto 0 auto; width: 90%; height: auto; padding-left: 0px; }
.nwk7_con4 { position: relative; margin: 3em auto 0 auto; width: 90%; height: auto; min-height: 0px; padding-right: 0px; }

.nwk7_conbx {
width: 100%;
margin: 0 auto;
padding: 0;
background-color: transparent;
font-family: "Noto Sans JP", sans-serif;
color: #333333;
box-sizing: border-box;
}

.nwk7_title {
margin: 0 0 14px 0;
font-size: 20px;
font-weight: 700;
line-height: 1.35;
}

.nwk7_text {
margin: 0 0 14px 0;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
text-align: justify;
}

.nwk7_author {
text-align: right;
margin-bottom: 14px;
}

.nwk7_company {
font-size: 16px;
font-weight: 700;
line-height: 1.4;
}

.nwk7_name {
font-size: 16px;
font-weight: 700;
line-height: 1.4;
margin-top: 4px;
}

.nwk7_divider {
border: none;
border-top: 1.5px solid #666666;
margin: 0 0 15px 0;
}

.nwk7_list {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
row-gap: 10px;
}

.nwk7_item {
display: flex;
align-items: center;
width: 100%;
font-size: 14px;
font-weight: 700;
color: #2b7ab9;
box-sizing: border-box;
line-height: 1.3;
}

.nwk7_item_full {
width: 100%;
}

.nwk7_check_icon {
width: 18px;
height: auto;
margin-right: 12px;
flex-shrink: 0;
}

.nwk7_con1img { position: relative; top: auto; left: auto; width: 90%; max-width: 637px; margin: 2em auto 0 auto; }
.nwk7_con1img img { width: 100%; }
.nwk7_con2img { position: relative; top: auto; right: auto; width: 90%; max-width: 545px; margin: 2em auto 1em auto; }
.nwk7_con2img img { width: 100%; }
.nwk7_con3img { position: relative; top: auto; left: auto; width: 80%; max-width: 414px; margin: 2em auto 1em auto; }
.nwk7_con3img img { width: 100%; }
.nwk7_con4img { position: relative; top: auto; right: auto; width: 90%; max-width: 630px; margin: 2em auto 1em auto; }
.nwk7_con4img img { width: 100%; }


.nwk7sitaspgrd {
  width: 100%;
  height: 75px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}



/* ==========================================
nwk8: 周年事業の進め方
========================================== */
.nwk8 {
position: relative;
margin: 0;
padding: 0;
width: 100%;
background-image: url("../images/wk8bg.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 0;
overflow: hidden;
}

.nwk8ue {
position: relative;
margin: 0 auto;
width: 100%;
height: 18px;
z-index: 10;
}

.nwk8ue img {
width: 100%;
height: 100%;
display: block;
}

.nwk8_inner {
position: relative;
margin: 0 auto;
padding: 50px 0 50px 0;
width: 80%;
min-height: 10px;
z-index: 2;
}

.nwkmdsfh3 { position: relative; margin-top: 45px; }
.nwkmdsfh3 h3 { text-align: center; color: #fff; font-size: 20px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; }
.nwkmdsfline { position: relative; margin: 1em auto 1.5em auto; width: 16%; height: 4px; background-color: #fff; }

.nwkmdsftxt { position: relative; margin: 0 auto; width: 90%; }

.nwkmdsftxt p { text-align: center; color: #fff; font-size: 16px; font-family: "Noto Sans JP", sans-serif; font-weight: 400; line-height: 1.6; }

.nwk8_conbx {
display: block;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
width: 100%;
margin: 0 auto;
padding: 0;
background-color: transparent;
font-family: "Noto Sans JP", sans-serif;
box-sizing: border-box;
}

.nwk8_item {
width: 100%;
display: block;
flex-direction: column;
box-sizing: border-box;
}

.nwk8_photo_box {
width: 100%;
height: auto;
border-radius: 28px;
overflow: hidden;
margin-bottom: 15px;
}

.nwk8_photo {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}

.nwk8_title {
margin: 0 0 16px 0;
font-size: 24px;
font-weight: 900;
color: #ffffb3;
text-align: center;
line-height: 1.3;
letter-spacing: 0.05em;
}

.nwk8_list {
margin: 0;
padding: 0;
list-style: none;
}

.nwk8_list li {
position: relative;
padding-left: 18px;
font-size: 16px;
font-weight: 400;
color: #ffffff;
line-height: 1.45;
margin-bottom: 4px;
letter-spacing: -0.02em;
}

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

.nwk8_list li::before {
content: "・";
position: absolute;
left: 0;
top: 0;
color: #ffffff;
font-weight: bold;
}

.nwk8_arrow_box {
width: 30px;
margin: 1.5em auto;
height: auto;
display: block;
justify-content: center;
align-items: center;
flex-shrink: 0;
}

.nwk8_arrow {
width: 100%;
height: auto;
display: block;
padding-top: 0px;
}

/* ==========================================
nwk9: よくある質問
========================================== */
.nwk9 {
position: relative;
margin: 0;
padding: 3em 0 4em 0;
width: 100%;
}

.nwk9_conbx {
display: block;
flex-wrap: wrap;
justify-content: space-between;
width: 80%;
margin: 2.5em auto 0 auto;
padding: 0;
background-color: transparent;
row-gap: 50px;
font-family: "Noto Sans JP", sans-serif;
box-sizing: border-box;
}

.nwk9_card { margin: 1.5em auto 0 auto;
width: 100%;
max-width: 800px;
min-height: 10px;
position: relative;
cursor: pointer;
user-select: none;
display: grid;
}

.nwk9_card_off {
grid-area: 1 / 1;
width: 100%;
height: 100%;
border-radius: 24px;
background-image: url("../images/wk9cardbg.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1.2em;
box-sizing: border-box;
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nwk9_card::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
background-color: #ffaf92;
border-radius: 0 0 16px 0;
clip-path: polygon(0 0, 0 100%, 100% 0);
box-shadow: -2px 2px 5px rgba(0,0,0,0.15);
transition: opacity 0.3s ease;
z-index: 2;
pointer-events: none;
}

.nwk9_q_symbol {
font-size: 36px;
font-weight: 900;
color: rgba(255, 255, 255, 0.7);
line-height: 1;
margin-bottom: 20px;
}

.nwk9_q_text {
margin: 0;
font-size: 18px;
font-weight: 900;
color: #ffffff;
text-align: center;
line-height: 1.6;
letter-spacing: 0.02em;
margin-bottom: 1.5em;
}

.nwk9_card_on {
grid-area: 1 / 1;
width: 100%;
height: 100%;
border-radius: 24px;
background-color: #ffaf92;
padding: 1.2em;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nwk9_a_title {
font-size: 15px;
font-weight: 900;
color: #ffffff;
text-align: center;
line-height: 1.35;
width: 100%;
padding-bottom: 14px;
border-bottom: 2px solid #ffffff;
margin-bottom: 14px;
letter-spacing: 0.01em;
}

.nwk9_a_text {
margin: 0;
font-size: 16px;
font-weight: 900;
color: #ffffff;
text-align: justify;
line-height: 1.45;
letter-spacing: 0.01em;
}

.nwk9_card.is-active .nwk9_card_off {
opacity: 0;
visibility: hidden;
}

.nwk9_card.is-active .nwk9_card_on {
opacity: 1;
visibility: visible;
}

.nwk9_card.is-active::after {
opacity: 0;
}

/* ==========================================
apb9 & apb10 & apb11 & apb12: 取引実績・フォーム・電話・フッター
========================================== */
.nwkmdsh3bk h3 {
text-align: center;
color: #333;
font-size: 20px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
}

.nwkmdslinebk {
position: relative;
margin: 1em auto 1.5em auto;
width: 16%;
height: 4px;
background-color: #333;
}

.apb9 { 
position: relative; 
margin: 0 auto; 
padding: 0 0 3.5em 0; 
width: 100%; 
background-color: #fcf6ea;
}

.apb9_container { 
position: relative;
display: block;
margin: 0 auto;
padding: 3em 0;
width: 90%;
box-sizing: border-box;
}

/* 2. 白いカコミ（幅1000px） */
.apb9wk {
position: relative;
    background-color: #ffffff;
    width: 100%;
    margin: 3em auto 0 auto;
    box-sizing: border-box;
    border-radius: 16px;

    /* テキストと下端の間にゆとりを持たせるため、padding-bottom を 2.5em などに広げます */
    padding: 1.2em 1.2em 190px 1.2em; 

    /* ★ここが重要: 画像のはみ出しを許可するため overflow: hidden; を削除（またはvisibleに変更） */
    overflow: visible; 
    
    /* ※もしテキスト内の pconly 画像で float を使っていて解除が必要な場合は、
       overflow: hidden; の代わりに以下を指定してください */
    display: flow-root;
}

/* 3. テキストエリアのスタイル */
.apb9txt {
font-size: 15px; /* やや大きめで読みやすいフォントサイズ */
line-height: 1.7;   /* 画像のゆったりした行間を再現 */
text-align: justify; /* 左右の端を綺麗に揃える */
margin: 0;
word-break: break-all;
padding-bottom: 1em;
}

.keishoryaku { position: absolute; bottom:-1em; right: 0; }

.apbcim2 { 
/* 親要素（.apb9wk）を基準にした絶対配置に変更 */
    position: absolute;
    
    /* 下端から下にずらす距離（マイナス値ではみ出させる） */
    bottom: -75px; 
    
    /* 左右中央に配置するための指定 */
    left: 50%;
    transform: translateX(-50%);
    
    /* 画像の表示サイズ（スクリーンショットのバランスに合わせて調整してください） */
    width: 80%;
				max-width: 260px;
    z-index: 9;
}


/* 4. 右上の画像バッジ（右上配置・丸型回り込み） */
.apb9bdg { position: relative; right: auto;
float: none;        /* 右側に寄せてテキストを回り込ませる */
width: 70%;        /* 画像の表示サイズ */
height: auto;
margin-left: 0;   /* テキストとの横の余白 */
margin-bottom: 15px; /* 下に来るテキストとの縦の余白 */


/* 画像の円形に沿ってテキストを回り込ませる設定 */
shape-outside: none; 

object-fit: contain;
user-select: none;
}

.apb10 { 
position: relative; 
margin: 0 auto; 
padding: 0; 
width: 100%; 
		background-color: #fff;
}

.apb10_container { position: relative;
display: block;
margin: 0 auto;
padding: 3em 0 3em 0;
width: 90%;
}

.apb10wk { margin: 0 auto 0 auto; width: 90%; display: block; }









/* フォームのコンテナ */
.fm_container { 
    padding-top: 2em; 
    margin: 0 auto;
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
}

/* 各入力行のラップ */
.fm_row {
    display: flex;
    margin-bottom: 24px;
    align-items: stretch;
}

/* 左側：濃紺のラベルエリア（通常の項目はデフォルトの横並び） */
.fm_label {
    background-color: #353535;
    color: #ffffff;
    width: 220px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    padding: 12px 15px;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.4;
}

/* ★お問い合わせ内容専用：要素を縦並び（改行）にするクラス */
.fm_label_vertical {
    flex-direction: column;
}

/* 必須マーク（＊：通常項目用は横に並び続けるように設定） */
.fm_required { 
    display: inline-block;
    color: #ffffff;
    margin-left: 4px;
    font-weight: normal;
}

/* 注記（複数選択可など）のスタイル */
.fm_note {
    font-size: 0.75em;
    font-weight: normal;
    display: block;
    margin-top: 6px; /* 上のテキストとの隙間を確保 */
}

/* 右側：入力エリア */
.fm_field {
    flex-grow: 1;
    margin-left: 24px;
    display: flex;
    gap: 20px;
    align-items: center;
}

/* 各種テキスト入力フィールド */
.fm_input_text {
    width: 100%;
    height: auto;
    background-color: #f5f5f5;
    border: none;
    box-sizing: border-box;
    padding: 0.6em 1em;
    font-size: 1rem;
    color: #333333;
}

.fm_input_text::placeholder {
    color: #b0b0b0;
    font-size: 0.9em;
}

/* お問い合わせ内容の詳細（テキストエリア） */
.fm_textarea {
    width: 100%;
    min-height: 400px;
    background-color: #f5f5f5;
    border: none;
    box-sizing: border-box;
    padding: 12px;
    font-size: 0.9em;
    color: #333333;
    resize: vertical;
    font-family: inherit;
}

/* チェックボックス群のリスト */
.fm_check_list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fm_check_item {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    font-weight: bold;
    color: #353535;
				line-height: 1.3;
}

.fm_check_item input[type="checkbox"] {
    display: none;
}

/* カスタムの円形チェックマーク */
.fm_custom_indicator {
    width: 22px;
    height: 22px;
    border: 2px solid #353535;
    border-radius: 50%;
    margin-right: 10px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    background-color: #ffffff;
    flex-shrink: 0;
}

/* チェックが入ったときの真ん中の丸（オレンジ色） */
.fm_check_item input[type="checkbox"]:checked + .fm_custom_indicator::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    background-color: #2f78b0;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 送信ボタンエリア（display: flexを明示的に指定） */
.fm_submit_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    width: 100%;
}

.fm_btn_submit {
    background-color: #353535;
    color: #ffffff;
    border: none;
    width: 240px;
    height: 60px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s ease;
    letter-spacing: 0.1em;
				border-radius: 6px;
}

.fm_btn_submit:hover {
    opacity: 0.9;
}

.fm_input_text:focus, .fm_textarea:focus {
    outline: 2px solid #353535;
}

/* 未選択時のエラーメッセージ用スタイル */
.fm_error_msg {
    color: #ff3333;
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: 0.4em;
				line-height: 1.5;
    display: none; /* 初期状態は非表示 */
}

/* 送信完了メッセージのスタイル（大きな太い赤文字） */
.fm_success_msg {
    color: #ff3333;
    font-size: 1.1em; /* 大きな文字サイズ */
    font-weight: 900;
    text-align: center;
    margin-top: 25px; /* ボタンとの隙間 */
    letter-spacing: 0.05em;
    display: none;    /* 初期状態は非表示（JSで制御） */
}

/* ==========================================================================
   レスポンス調整（メディアクエリ内をクレンジング・補正）
   ========================================================================== */
@media (max-width: 768px) {
    .fm_row {
        flex-direction: column;
        margin-bottom: 1em;
    }

    .fm_label {
        width: 100%;
        min-height: auto;
        padding: 0.3em 0.5em;
        text-align: left;
        justify-content: flex-start;
        align-items: flex-start; /* スマホ時は左寄せ */
								border-radius: 6px;
    }

    .fm_field {
        margin-left: 0;
        margin-top: 0.4em;
        flex-direction: column;
        align-items: flex-start; /* スマホ時の配置破綻を防止 */
        gap: 10px;
    }

    .fm_textarea {
        min-height: 20px;
    }

    .fm_submit_area {
        margin-top: 30px;
    }
    
    .fm_success_msg {
        font-size: 1.4em; /* スマホ表示に合わせてメッセージのフォントサイズをやや縮小 */
        margin-top: 0.6em;
    }
}










.apb11 { 
position: relative; 
margin: 0 auto; 
padding: 0; 
width: 100%; 
background-color: #f5f5f5;
}

.apb11_container { position: relative;
display: block;
margin: 0 auto;
padding: 2.5em 0 2.5em 0;
width: 90%;
}

.apb11 h2 { scroll-margin-top: 80px; 
color: #353535;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: 1.3;
}

/* 指定のラップ要素（コンポーネントの親枠として機能） */
.apb11wk {
width: 100%;
padding: 10px 20px 0px 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}

/* 1. 全体を包むコンテナ（要素の横並びを制御） */
.tel_wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 12px; /* アイコン、電話番号、受付時間の間の余白 */
box-sizing: border-box;
width: 100%;
max-width: 90%;
}

/* 2. 左側の電話ピクトグラム（画像） */
.tel_icon {
width: 28px; /* 画像の表示サイズ */
height: auto;
object-fit: contain;
flex-shrink: 0;
user-select: none;
}

/* 3. 中央の電話番号テキスト */
.tel_number {
color: #353535; /* 特徴的な濃紺のブランドカラー */
font-size: 33px; /* 力強い太字サイズ */
font-weight: 900; /* 最も太いウエイト */
line-height: 1;
margin: 0;
white-space: nowrap; /* 途中で意図しない改行を防ぐ */
}

/* 4. 右側の受付時間エリア */
.tel_info { display: block; margin: 0.8em auto 0 auto; text-align: center;
color: #353535;
font-size: 14px; /* 電話番号に対してバランスの良い大きめのサイズ */
font-weight: 700;
line-height: 1.1;
flex-shrink: 0;
}

/* 「※」注記の行に少し上の隙間を作る */
.tel_info_note {
display: block;
font-size: 1em;
margin-top: 4px;
}

.apb12 { 
position: relative; 
margin: 0 auto; 
padding: 0; 
width: 100%; 
background-image: url("../images/footerbg.webp");
background-repeat: no-repeat;
background-size: 100% 100%;
}

.apb12_container { position: relative;
display: block;
margin: 0 auto;
padding: 2em 0 2em 0;
width: 90%;
}

.apb12 h6 {
color: #fff;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 700;
margin-bottom: 0.8em;
}

.apb12 p { 
color: #fff;
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 1.4;
}

.apb12 p a:link    { color: #fff;	text-decoration:none; transition: all 0.3s ease; }
.apb12 p a:visited { color: #fff;	text-decoration:none; }
.apb12 p a:hover   { color: #fff; text-decoration:none; }
.apb12 p a:active  { color: #fff;	text-decoration:none; }



/* thanks.html */

.thankwk {
position: relative;
width: 100%;
margin: 0 auto;
padding: 70px 0 15px 0;

}

.thankwk90 { position: relative; margin: 0 auto; width: 80%; }


.hcmt { position: relative; margin: 0 auto; padding: 6em 0; }

.hcmt h2 {
color: #353535;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: 900;
line-height: 1.3;
}

.hcmt h3 { 
margin: 2em 0 0 0;
color: #353535;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 1.5;
width: 100%;
}

.hcmt p { 
margin: 2em 0 0 0;
color: #353535;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 1.3;
width: 100%;
}




}