@charset "utf-8";


/* ----------------共通の設定------------------- */

/* 全ページのベーススタイル設定 */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
    color: black;
    line-height: 2;
    font-size: 3.5vw;
    font-family: "Bitter",sans-serif;
}

/* リセットCSS */
p,h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
    color: black;
} 

/* 画像下部の余白削除 */
img {
    vertical-align: bottom;
}

/* リスト項目の余白削除 */
ul {
    margin: 0;
    padding: 0;
}

/* 訪問前／後のリンクの文字の色を指定する */
/* リンク文字の下線の表示／非表示を指定する */
a {
    color: #3583aa;
    text-decoration: none;
}

a:visited {
    color: #788d98;    
}

a:hover {
    text-decoration: underline;
}

a.anchor{
    display: block;
    padding-top: 40px;
    margin-top: -40px;
}
/* ----------------共通の設定------------------- */


/* ----------------ヘッダー部の設定------------------- */

/* ヘッダーのサイズと余白 */
.site_header {
    display: flex;
    width: 100%;
    background: linear-gradient(to right,#F0F9FF 0%,#9ACEF4 100%);
    justify-content: center;
    margin-top: 0;
    padding-top: 0;
    position: fixed;
    z-index: 10000; /* ヘッダーを前面に表示 */
    background-color: #fff; /* 背景色がないと下のコンテンツが透けて見える */
}

.header_inner {
    max-width: 960px;
    width: 100%;
    display: flex;
    align-items:end;
    height: auto;
    padding: 0;
    margin-right:0 auto ;
    justify-content: center;
}

/* ロゴの位置と余白 */
.logo {
    padding: 0;
    gap: 0;
    margin-top:0;
}

.logo a {
    margin: 0;
    padding: 0;
    display:flex;
}

.logo img {
    width: 150px;
}

/* メニュー文字の位置と余白 */
.global-nav {
    gap: 0px;
    list-style: none;
    float: right;
    margin-left: 10%;
    margin-bottom: 5px;
}

/* メニュー文字の間隔と文字サイズ */
.global-nav li  {
    text-decoration: none;
    color: #000;
    float: left;
    margin:0 1.5vw 0 1.5vw;
    font-size: 16px;
    list-style: none;
    font-family: "Bitter",sans-serif;
    padding: 0;
}

/* メニュー文字のリンク色 */
.global-nav li a {
    color:black;
}

/* メニュー文字の下線設定 */
.global-nav li a:hover {
    border-bottom: 2px solid black;
    padding-bottom: 2px;
    text-decoration: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li a{
    text-decoration: none;
    color: black;
}

.nav-menu li span.recruit-bubble {
    position: absolute;
    top: 15px;
    margin-left: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: white;
    background: blue;
    border-radius: 30px;
    height: 50px;
    width: 50px;
}

/* 吹き出しのしっぽ */
.nav-menu li span.recruit-bubble::before {
    content: "";
    position: absolute;
    margin-top:39px;
    margin-right:40px;
    border: 10px solid transparent;
    border-top-color: blue;
    transform:rotate(-14deg);
    clip-path: polygon(50% 0, 100% 100%, 30% 100%);
    width:50px;
}

.nav-toggle {
    display: none; /* PCでは非表示 */
    position: relative;
    width: 60px;
    height: 60px;
    background: none;
    border: none;
    cursor: pointer;
}

.neko-link {
    display: block;
    text-decoration: none;
}


/* ネコの位置と余白 */
.neko {
    padding: 0;
    gap: 0;
    margin-top: 0;
}

.neko img {
    margin: 0;
    padding: 0;
    display:flex;
}

.neko .nekodesu {
    width: 60px;
}

.neko .neko-bubble-pc {
    position: absolute;
    top: 10px;
    margin-left: 60px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: black;
    background:white;
    border-radius: 30px;
    height: 50px;
    width: 80px;
    line-height:1.4;
}

/* 吹き出しのしっぽ */
.neko .neko-bubble-pc::before {
    content: "";
    position: absolute;
    margin-top:35px;
    margin-right:70px;
    border: 10px solid transparent;
    border-top-color: white;
    transform:rotate(-14deg);
    clip-path: polygon(50% 0, 80% 100%, 20% 60%);
    width:40px;
}

.neko .neko-bubble-sp {
    display:none;
}


/* ----------------ヘッダー部の設定------------------- */


/* ----------------フッター部の設定------------------- */
footer {
    width: 100%;
    background-color: #76B7E6;
}

/* フッターの文字を中央揃えにして余白設定 */
.responsive-footer {
    width: 100%;
    text-align: center;
    color: white;
    padding: 20px 0;
    font-size: 13px;
    font-family: sans-serif;
}

/* メニュー文字の位置と余白 */
.footer-nav {
    display:inline-flex;
    gap: 0px;
    list-style: none;
}

/* メニュー文字の間隔と文字サイズ */
.footer-nav li  {
    text-decoration: none;
    color: #e5e5e5;
    float: left;
    margin-left: 20px;
    font-size: 16px;
    list-style: none;
    font-family: "Bitter",sans-serif;
    padding: 0;
}

/* メニュー文字のリンク色 */
.footer-nav li a {
    color: #eeeeee;
}

/* メニュー文字の下線設定 */
.footer-nav li a:hover {
    border-bottom: 2px solid #eeeeee;
    padding-bottom: 2px;
    text-decoration: none;
}

.privacy-policy {
    display: flex;
    margin-bottom: 1em;
}

.privacy-policy a {
    font-size:15px;
    color: #eeeeee;
}

/* メニュー文字の下線設定 */
.privacy-policy a:hover {
    border-bottom:2px solid #eeeeee;
    padding-bottom: 1px;
    text-decoration: none;
    filter: brightness(150%);
}

.telno {
    margin: 0.5em 0 1em 0;
}

.telno p {
    font-size:15px;
    font-weight:500;
}

.telno p a {
    font-size:15px;
    color:black;
    font-weight:800;
}

.social-icons a img {
  width: 40px; /* サイズ調整 */
  height: 40px;
  margin: 0 20px 10px;
  transition: opacity 0.3s;
}

.social-icons a img:hover {
  opacity: 0.7; /* ホバー時に薄く */
}

.social-icons p {
    font-size:16px;
}


/* ----------------フッター部の設定------------------- */
/* ----------------ボディ部の設定------------------- */
/* id属性wrapの左右回り込み解除 */
#wrap {
    width: 100%;
    clear: both;
    background-color: #ffffff;
    margin-top: 0px;
}

/* コンテンツエリアを中央に揃える */
.content {
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

/* 見出し下の余白を設定 */
p {
    font-size: 10px;
    margin-top:auto;
}

.breadcrumb {
    width: 100%;
    margin: 0 auto;
    font-size: 14px;
    padding: 100px 0 5px 0;
    background: linear-gradient(to right,#F0F9FF 0%,#9ACEF4 100%);
}

.breadcrumb-section {
    max-width: 1200px;
    width: 100%;
    margin:0 auto;
}

.breadcrumb-section a {
    color: #337ab7;
    text-decoration: none;
    padding-left:1em;
}

.breadcrumb-section span {
    color: #333;
}

/* ----------------ボディ部の設定------------------- */


/* ----------------indexの設定------------------- */

#index {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position:center top;
    background-attachment: fixed;
    background-size: cover;
}

#index .content {
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    background-image:url(/images/sima_2.webp);
    background-repeat: no-repeat;
    background-position:left 50% bottom 20%;
    background-attachment: fixed;
    background-size: 30%;
}

#index .main-center {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top:80px;
}

#index section {
    padding: 40px 0;
    text-align: center;
}

#index form {
    margin: 50px auto;
    padding: 30px 10px;
}

#index .form {
    display: inline-flex;
}

#index .form-group {
    display: flex;
    align-items: center;
    gap: 10px; /* 入力欄とボタンの間にスペース */
    width: 100%;
}

#index .form-group .item {
    flex: 1;
    min-width: 0; /* Safari対応のため */
    width: 100%;
}

#index .form-all {
    margin-bottom: 50px;
}

/* ボタンの装飾（ボタンの背景色・文字・サイズ・枠線） */
#index .btn a {
    background-color:#FFFFE6;
    color:black;
    font-size: 16px;
    width: 170px;
    display: block; /*インライン要素をブロックレベル要素に変更 */
    text-align: center;
    line-height: 80px;
    margin: 0px 0px 0px 0px;
    border-radius: 5px;
    border: none;
    box-shadow: 1px 1px 4px gray;
}

/* ボタンにマウスを置いた時のデザイン */
#index .btn a:hover {
    text-decoration: none;
    background-color:#FFFFE6;
    color:#247900;
    filter: brightness(100%);
    box-shadow: 2px 5px 10px #bababa;
}

#index .form-group .btn2 {
    white-space: nowrap;
    height: 40px; /* 入力欄と高さを揃えるなら調整 */
    padding: 0 16px;
}

#index .btn2 {
    margin: 1px;
    border-radius: 5px;
    background-color:#FFFFE6;
    color:black;
    font-size: 16px;
    display: block; /*インライン要素をブロックレベル要素に変更 */
    text-align: center;
    border: 1px solid gray;
    width: 100px;
}

/* ボタンにマウスを置いた時のデザイン */
#index .btn2:hover {
    text-decoration: none;
    color:#247900;
    filter: brightness(100%);
    cursor:pointer;
    box-shadow:-1px -1px #333 inset;
}

#index .form dl dt {
    width: 100%;
    padding: 10px 0;
    clear:both;
}

#index .waku {
    border: solid 1px gray;
    display:flex;
    margin: 0 20px 0 0;
    border-radius: 5px;
    background-color: #ffffff;
}

#index span.required {
    text-align: left;
    display: block;
    font-size: 16px;
    font-weight:400
}

#index h1.required {
    text-align: left;
    display: block;
    font-size: 16px;
    font-weight:400
}

#index dl {
    width: 100%;
    margin: 0 auto;
}

#index dd {
    width: 100%;
    margin: 0 auto;
}

#index input {
    max-width: 100%;
    width: 100%;
    padding: 0.75rem;
    font-size: 16px;
    box-sizing: border-box;
}

/* 入力欄の調整 */
#index .item {
    border: none;
    border-radius: 5px;
    padding: 0.5em;
    background-color: transparent;
    width: 15em;
    height: 20px;
    font-size: 16px;
    line-height: 1.2em;
}

/* 吹き出し（上に絶対位置で浮かせる） */
#index .bubble {
    position: absolute;
    top: -35px;
    left: 0;
    background-color: #76B7E6;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 14px;
    color: white;
    white-space: nowrap;
    z-index: 1;
}

/* 吹き出しのしっぽ */
#index .bubble::before {
    content: "";
    position: absolute;
    bottom: -19px;
    left: 20px;
    border: 10px solid transparent;
    border-top-color: #76B7E6;
}

/* フォーム枠の中で吹き出しを配置する用のラッパー */
#index .hasou dt {
    position: relative;
    padding-top: 40px; /* 吹き出しが上にくるため余白を確保 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

#index .item:focus {
    outline:none;
}

#index .item::placeholder {
    font-size: 12px;
}

#index .attention p {
    margin-left: 0;
    font-size: 10px;
    text-align: left;
}

#index .news {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    max-width: 768px;
    width: 100%;
    height: 100%;
    margin: 100px auto;
    margin-bottom: 100px;
    background: none;
}

#index .news-name {
    font-size: 18px;
    max-width: 150px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-right: 50px;
}

#index .news-name:before {
    content: "";
    padding-right: 5px;
    border-left: 10px solid #33a88bfd;
}

#index .news-list {
    width: 100%;
    margin: 0 auto;
    list-style: none outside;
}

#index .news-list .item {
    width: 100%;
    margin: 0 auto;
    padding: 10px 0 10px 0;
}

#index .news-list .item a {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    text-decoration: none;
    color:#000;
    border-bottom: 1px solid #000;
    cursor: default;
}

#index .news-list .item .date {
    max-width: 100px;
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
    color: #000;
    padding: 0 20px 0 10px;
    cursor: default;
}

#index .news-list .item .title {
    text-align: left;
    margin: 0 auto;
    width: 100%;
    font-size: 16px;
}

#index .index-img {
    width: 150px;
}

#index .gmark-color {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    margin: 0 auto;
    max-width: 768px;
    width: 100%;
}

#index .gmark {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    padding-left: 50px;
}

#index .gmark-name {
    font-size: 18px;
    max-width: 150px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

#index .gmark-name:before {
    content: "";
    padding-right: 5px;
    border-left: 10px solid #33a88bfd;
}

#index .gmark-title {
    text-align: left;
    margin:0 auto;
    padding: 10px 0 10px 0;
    font-size: 16px;
}

#index .gmark p {
    text-align: left;
    font-size: 12px;
    margin: 0 auto;
    padding: 0 10px 2px 10px;
}



/* ----------------indexの設定------------------- */

/* ----------------companyの設定------------------- */

#company .main-center {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
}

#company section {
    padding: 0 1.5em 3em 1.5em;
}

#company .company-title {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0.5em 0 1.5em 0;
    text-align: center;
}

#company .company-title span {
    font-size:clamp(40px,5vw,60px);
    color:#ffffff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
    -1px 1px 0 #000,  1px -1px 0 #000,
    1px 0 0 #000, -1px  0 0 #000,
    0 1px 0 #000,  0 -1px 0 #000;
}

#company .company-shoukai {
    margin-top: 30px;
    margin-bottom: 30px;
    display: inline-block;
    text-align: center;
    padding:0 1em 0 1em;
}

#company .company-shoukai h1 {
    font-size:clamp(20px,2vw,30px);
    font-weight: clamp(200,500,800);
    color:white;
}

#company .company-zero {
    width: 100%;
    height: 60vh;
    margin: 0 auto;
    background-image: url(/images/本社社屋1.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 50px;
}

#company h2 {
    font-family: "Bitter",sans-serif;
    font-size: 30px;
}

#company h3 {
    font-family: "Bitter",sans-serif;
    padding-left: 5px;
}

#company .career {
    font-family: 'Robot', sans-serif;
    padding: 40px 0;
}

#company .icon:before {
    content: "";
    padding-right: 10px;
    border-left: 7px solid #33a88bfd;
}

#company .Profile-txt {
    width: 100%;
    float: left;
}

#company .Profile-txt span {
    font-weight: bold;
}

#company .clearfix:after {
    content:"";
    display:block;
    clear:both;
}

#company .atena {
    display: flex; 
    align-items: center;
}

#company .tizu {
    flex: 3.9; 
    padding-right: 10px;
}

#company .career th {
    width: 240px;
    background-color: #f0f0f0;
    padding: 40px 0;
    border: 1px solid #cccccc;
}

#company .career td {
    width: 960px;
    padding: 12px 30px;
    border: 1px solid #cccccc;
}

#company table {
    border-spacing: 0;
    border-collapse: collapse;
    font-size: clamp(16px,3vw,20px);
}

#company .map {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
}

#company .map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* ----------------companyの設定------------------- */


/* ----------------privacyの設定------------------- */

#privacy .content {
    padding-top: 50px;
    background:#dde7ec;
}

#privacy .main-center {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 80px;
}

#privacy article {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

#privacy .policy-back {
    background: #ffffff;
    padding: 0 15px 2em 15px;
}

#privacy .privacypolicy {
    text-align: left;
    max-width: 960px;
    width: 100%;
}

#privacy .Profile-txt {
    padding: 0 15px 2em 15px;
}

#privacy h1 {
    font-size:clamp(25px,3vw,40px);
}

#privacy section {
    font-size: 20px;
}

#privacy .text-right {
    text-align: right;
}

#privacy p {
    font-size: 15px;
    margin-bottom: 0;
}

#privacy ol {
    font-size: 15px;
}

#privacy .modori {
    text-align: left;
    margin: 0 auto;
}

#privacy .modori a {
    font-size:clamp(18px,1vw,20px);
    color: #0056b3;
    text-decoration: none;
    border-bottom: 2px solid #0056b3;;
}

#privacy .modori a:hover {
    border-bottom: 2px solid #007BFF;
    color: #007BFF;
    cursor: pointer;
}

/* ----------------privacyの設定------------------- */


/* ----------------serviceの設定------------------- */
#service {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position:center top;
    background-attachment: fixed;
    background-size: cover;
}

#service .content {
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

#service .main-center {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

#service section {
    padding: 0 15px 3em 15px;
}

#service h2 {
    font-size: 20px;
}

#service .icon:before {
    content: "";
    padding-right: 10px;
    border-left: 7px solid #33a88bfd;
}

#service .service-title-back {
    width: 100%;
    margin: 0 auto;
    background-image:url(/images/tewatashi2.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#service .service-title {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5em 0 1.5em 0;
    text-align: center;
}

#service .service-title span {
    font-size:clamp(40px,5vw,60px);
    color:#ffffff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
    -1px 1px 0 #000,  1px -1px 0 #000,
    1px 0 0 #000, -1px  0 0 #000,
    0 1px 0 #000,  0 -1px 0 #000;
}

#service .service-shoukai-back {
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

#service .service-shoukai {
    margin-top: 30px;
    margin-bottom: 30px;
    display:inline-block;
    text-align: center;
    padding:0 1.5em 0 1.5em;
}

#service .tel-table {
    margin-bottom: 50px;
    font-family: 'Robot', sans-serif;
}

#service .serviceform th {
    width: 30%;
    max-width: 100%;
    background-color: #f0f0f0;
    padding: 20px 5px 20px 5px;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    text-align: center;
}

#service .serviceform td {
    width: 70%;
    max-width: 100%;
    padding: 12px 30px;
    border: 1px solid #cccccc;
    box-sizing: border-box;
}

#service .service-section {
    font-family: 'Robot', sans-serif;
    padding: 5px 0;
}

#service table {
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 20px;
}

#service .serviceform .icon {
    text-align: left;
}

#service .serviceform p {
    text-align: left;
    font-size: 16px;
}

#service .form dl dt {
    width: 100%;
    padding: 10px 0;
    clear:both;
}

#service form {
    margin:50px 0 50px 0 ;
}

#service .form {
    display:block;
}

#service .waku {
    border: solid 1px gray;
    display:flex;
    margin: 0 20px 0 0;
    border-radius: 5px;
    background-color: #ffffff;
}

#service dl {
    width: 100%;
    margin: 0 auto;
}

#service dd {
    width: 100%;
    margin: 0 auto;
}

#service input {
    width: 100%;
    padding: 0.75rem;
    font-size: 16px;
    box-sizing: border-box;
    padding: 10px;
    margin: 5px 0 5px 0;
}

/* 入力欄の調整 */
#service .item {
    border: none;
    border-radius: 5px;
    padding: 0.5em;
    background-color: transparent;
    width: 15em;
    height: 20px;
    font-size: 16px;
    line-height: 1.2em;
}

#service .item:focus {
    outline: none;
}

#service .item::placeholder {
    font-size: 16px;
}

#service .service-shoukai h1 {
    font-size:clamp(16px,3vw,25px);
    font-weight: clamp(200,500,800);
}

#service .attention p {
    font-size: 12px;
    margin-left: 0;
    text-align: left;
}

#service .form-group {
    display: flex;
    align-items: center;
    gap: 10px; /* 入力欄とボタンの間にスペース */
    width: 100%;
}

#service .form-group .item {
    flex: 1;
    min-width: 0; /* Safari対応のため */
    width: 100%;
}

#service .tuiseki {
    max-width: 500px;
    text-align: left;
}

#service .uketori .shousai {
    text-align: center;
    margin: 1em auto;
    background-color:#ebef0d;
    margin-bottom:0.5em;
    border-radius:10px;
    border:1px solid gray;
    box-shadow: 2px 2px 4px #bababa;
    width:60vw;
}

#service  .uketori .shousai p {
    color:blue;
    font-size:clamp(20px,10vw,25px);
    font-weight:500;
    text-decoration: none;
    text-align:center;
}

#service .uketori .shousai:hover {
    color:blue;
    filter: brightness(105%);
    background-color:#ebef0d;
    cursor:pointer;
    border:1px solid blue;
    border-radius:10px;
    box-shadow: 4px 4px 10px #bababa;
}

#service .uketori .shousai .service-img-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding:10px 30px 30px 30px;
    margin:0 auto;
    width;100%;
}

#service .uketori .shousai .service-img-group .service-img {
    height: auto;
    max-width:130px;
    width:100%;
    object-fit: contain;
    cursor:pointer;
    touch-action:none;
}

#service .uketori .caution {
    border: 1px solid black;
    text-align:left;
    padding: 10px 10px 10px 10px;
    margin:10px 0 20px 0;
}

#service .uketori .caution p {
    color: red;
}

#service .uketori .caution .caution-p {
    font-weight:800;
    color: red;
}

#service #overlay {
    position: fixed;
    top: 0; left: 0;
    right:0; bottom:0;
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* モーダル内容を横並びに */
#service .modal-content {
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    max-width: 90vw;
}

#service .img-group {
    display:block;
}

#service .img-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#service .zoom-controls {
    display: block; /*インライン要素をブロックレベル要素に変更 */
    text-align: center;
    justify-content: center;
    gap:10px;
}

#service .zoom-controls button {
    font-size: 30px;
    margin: 0 auto;
}

#service .image-container {
    overflow:hidden;
    position: relative;
    width:60vw;
    text-align:center;
    justify-content:center;
    background: #ccc;
}

/* モーダル内の画像 */
#service .image-container img {
    max-width: 90vw;
    max-height: 70vh;
    border: 4px solid white;
    border-radius: 8px;
    transform-origin: center;
    transition: none;
    touch-action: none;
    cursor: grab;
}

#service .caption-images {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-top: 5px;
}
  
#service .caption-images img {
    width: 60px;
    height: 80px;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    margin: 5px 1px 0 1px;
}

#service .caption-images img:hover {
    transform: scale(1.05);
}
  
#service .caption-images img.selected {
    border: 3px solid #007bff;
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

#service #modalImage {
    cursor: grabbing;
}

#service .caption {
    color: white;
    margin-top: 10px;
    font-size: 1rem;
    text-align: center;
}

/* ナビゲーションボタン */
#service .nav-btn {
    font-size: 30px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    user-select: none;
    z-index:10000;
}

/* ナビゲーションボタン */
#service .zoom-btn {
    font-size: 30px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    user-select: none;
}

/*閉じるボタン*/
#service .close-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: black;
    background-color:#ffffff;
    cursor: pointer;
    z-index: 10000;
    border-radius:100px;
    height: 60px;
    width: 60px;
    justify-content:center;
    display:flex;
}

#service .thumbnail-nav {
    display: flex;
    justify-content: center;
    gap:10px;
    margin-top: 10px;
}

#service .thumbnail-nav img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    cursor:pointer;
    border-radius: 5px;
    border: 2px solid transparent;
    transition: border 0.3s ease;
}

#service .thumbnail-nav img:hover {
    border-color: #ffffff;
}

#service td .text-danger {
    display:flex;
    flex-direction:column;
}

#service .required-mark {
    background-color: red;
    color: white;
    width: 50px;
    height:30px;
    border-radius: 3px;
    margin: 0 auto 0 10px;
    text-align: center;
    justify-content:center;
    display: inline-flex;
}

#service .address-required-mark {
    background-color: red;
    color: white;
    width: 50px;
    height:30px;
    border-radius: 3px;
    margin: 0 auto 0 10px;
    text-align: center;
    justify-content:center;
    display: inline-flex;
}

#service .serviceform table {
    font-size: 16px;
}

#service .tel-service {
    text-align:left;
}

#service .tel-service label {
    font-size:clamp(18px,3vw,25px);
}

#service .tel-service label a {
    color:black;
    font-weight:800;
    border-bottom: 2px solid black;
}

#service .tel-service label a:hover {
    text-decoration:none;
    filter: brightness(150%);
    color:#007BFF;
    font-weight:800;
    border-bottom: 2px solid #007BFF;
}

#service .name-row {
    font-size: 16px;
}

#service .name-row {
    display: flex;
    justify-content:center;
    align-items:center;
}

#service .name-row-sei {
    display: flex;
}

#service .name-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    margin-right: 20px;
}

#service .name-row input {
    margin-right: 40px;
}

#service .txt-caution {
    color:red;
}

#service .txt-caution span:empty {
    display:none;
}

#service .name-row-sei label {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    margin-right: 5px;
}

#service .name-row-sei input {
    margin-right: 40px;
}

#service .tel-row {
    text-align: left;
}

#service .tel-row input {
    max-width: 350px;
}

#service .post-row-label {
    text-align: left;
}

#service .post-row {
    display: flex;
    align-items: center;
    text-align: left;
/*    margin-bottom: 10px;*/
}

#service .post-row input {
    width: 100px;
    margin-right: 10px;
}

#service .postno2 {
    margin-left: 10px;
}

#service .prefecture-row-label {
    text-align: left;
}

#service .prefecture-row {
    display: flex;
    align-items: center;
    text-align: left;
/*    margin-bottom: 10px;*/
}

#service .prefecture-row input {
    width: 200px;
    background-color:#d9d9d9 ;
    border: 1px solid #989898;
    text-decoration: none;
}


#service .prefecture-row input:focus  {
    outline:none;
}

#service .municipality-row-label {
    text-align: left;
}

#service .municipality-row {
    display: block;
    align-items: center;
    text-align: left;
/*    margin-bottom: 10px;*/
}

#service .municipality-row input  {
    background-color:#d9d9d9 ;
    border: 1px solid #989898;
}

#service .municipality-row input:focus  {
    outline:none;
}

#service .address-row-label {
    text-align: left; 
}

#service .chkbox-row {
    display: flex;
    align-items: center;
    text-align: left;
/*    margin-bottom: 10px;*/
}

#service .chkbox-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    margin-right: 50px;
    margin-left: 5px;
}

#service .chkbox-row .chkbox {
    width: 15px;
    margin: 0;
}

#service .chk-zitaku,
#service .chk-honsha {
    display: flex;
}

#service .item-row-label {
    text-align: left;
}

#service .suryo-row-label {
    text-align: left;
    margin-top:10px
}
    
#service .suryo-row {
    width: 100px;
}

#service .bikou-row-label {
    text-align: left;
    margin-top:10px;
}
    
#service .bikou-row {
/*    margin-bottom: 10px;*/
    text-align: left;
}

#service .bikou-row textarea {
    max-width: 300px;
    width: 100%;
    height: 10vh;
}

#service .pay-row {
    display: flex;
    align-items: center;
    text-align: left;
}

#service .pay-row label {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    margin-right: 50px;
    margin-left: 5px;
}

#service .pay-row .chkbox {
    width: 15px;
    margin: 0;
    pointer-events: none;    
}

#service .pay-row p {
    font-size: 12px;
}

#service .kakunin {
    text-align: center;
}

#service .kakunin-group {
    border: 1px solid #cccccc;
    margin: 50px 0 10px 0;
    padding: 10px 10px 20px 10px;
}

#service .kakunin-p {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    padding-top: 30px;
}

#service .kakunin-p p {
    text-align: center;
}

#service .privacy-chk a {
    color:blue;
    font-size: clamp(16px,1vw,20px);
    border-bottom: 2px solid blue;
    padding-bottom: 2px;
    text-decoration: none;
}

#service .kakunin-chk {
    max-width: 300px;
    font-size: clamp(16px,1vw,20px);
    margin: 20px auto;
    background: #bae1fd;
    border: 2px solid #0056b3;
    border-radius: 1px;
    padding-left: 10px;
    padding-right: 10px;
}

#service .kakunin-chk label {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: wrap;
    font-size: clamp(16px,1vw,20px);
}

#service .kakunin-chk input {
    justify-content: center;
	width:25px;
	height:25px;
}

#service .kakunin .btn-kakunin {
    max-width: 300px;
    width: 100%;
    height: 100px;
    font-size: 20px;
    cursor:pointer;
    background: #FFFFE6;
    color: #000;
    border-radius: 5px;
    border-width: 1px;
    margin-top: 50px;
}

#service .modal-body {
    max-height: 50vh; /* 必要に応じて調整 */
    overflow-y: auto;
}

#service .privacy-body {
    margin:1em 1em 0.5em 1em;
    border:1px solid #cccccc;
}

#service .privacy-body .policy-back {
    background: #ffffff;
    padding: 0.5em 30px 0 10px;
}

#service .privacy-body .privacypolicy {
    text-align: left;
    width: 100%;
}

#service .privacy-body .Profile-txt {
    padding: 0 15px 0.5em 15px;
}

#service .privacy-body h2 {
    font-size: clamp(20px,3vw,35px);
}

#service .privacy-body section {
    font-size: 20px;
}

#service .privacy-body .text-right {
    text-align: right;
}

#service .privacy-body p {
    font-size: 15px;
    margin-bottom: 0;
}

#service .privacy-body ol {
    font-size: 15px;
}

#service .servicepolicy {
    text-align: left;
    width: 100%;
    margin:0 auto;
}

#service .cancel-body {
    margin:1em 1em 1em 1em;
    border:1px solid #cccccc;
}

#service .cancel-body .cancel-back {
    background: #ffffff;
    padding: 0.5em 30px 0 10px;
}

#service .cancel-txt {
    padding: 0 15px 0.5em 15px;
}

#service .cancel-txt h2 {
    font-size: clamp(20px,3vw,35px);
}

#service .cancel-txt section {
    font-size: 20px;
}

#service .cancel-txt p {
    font-size: 15px;
    margin-bottom: 0;
}

#service .cancel-txt ol {
    font-size: 15px;
}

#service .cancel-txt ol p {
    padding-left:1.5em;
}

#service .cancel-txt ul {
    font-size: 15px;
    list-style:none;
}

#service .cancel-txt ul p {
    padding-left:1.5em;
}

#service .btn-doui {
    margin: 0 auto;
    padding-left: 5%;
}

#service .btn-doui-chk {
    width: 5%;
    display: block;

}

#service .kakunin .btn-kakunin {
    display:inline-flex;
    justify-content: center;
    align-items: center;
}

#service .kakunin .btn-kakunin:hover {
    text-decoration: none;
    background-color:#FFFFE6;
    color:#247900;
    filter: brightness(100%);
    box-shadow: 2px 5px 10px #bababa;
}

#service .nyuryoku-form-p {
    background: #409adb;
    padding: 10px;
}

#service .nyuryoku-form-p p {
    font-size: 25px;
    color: #ffffff;
}

#service .okuru {
    font-family: 'Robot', sans-serif;
    padding: 5px 0;
    margin-top: 150px;
    margin-bottom: 150px; /* メンテナンス終わったらはずす */
    text-align: center;
}

#service .okuru-p {
    max-width: 500px;
    display:inline-block;
}

#service .okuru p {
    text-align: center;
}

#service .okuru-p .maintenance {
    font-size: 20px;
    font-weight: 600;
    margin:30px 0 50px 0;
}

#service .okuru-p .okuru-tel{
    font-size: 20px;
    font-weight: 600;
    margin:50px 0 50px 0;
}

#service .maintenance-img {
    width: 200px
}

#service .form-group .btn2 {
    white-space: nowrap;
    height: 40px; /* 入力欄と高さを揃えるなら調整 */
    padding: 0 16px;
}

#service .btn2 {
    margin: 1px;
    border-radius: 5px;
    background-color:#FFFFE6;
    color:black;
    font-size: 16px;
    display: block; /*インライン要素をブロックレベル要素に変更 */
    text-align: center;
    border: 1px solid gray;
    width: 100px;
}

/* ボタンにマウスを置いた時のデザイン */
#service .btn2:hover {
    text-decoration: none;
    color:#247900;
    filter: brightness(100%);
    cursor:pointer;
    box-shadow:-1px -1px #333 inset;
}

/* 無効時のhover */
#service button[type="submit"]:disabled {
    background: #ccc;
    cursor: not-allowed;
}

#service button[type="submit"]:disabled:hover {
    background-color: #ccc;
    color:#000000;
    box-shadow:none;
}

/* ----------------serviceの設定------------------- */



/* ----------------recruitmentの設定------------------- */

#recruitment .recruitment-title-back {
    width: 100%;
    margin: 0 auto;
    background-image: url(/images/トラック写真1.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    justify-content: center;
    padding-top: 60px;
    height:50vh;
}

#recruitment .recruitment-title {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0.5em 0 1.5em 0;
    text-align: center;
    justify-content:center;
}

#recruitment .recruitment-title span {
    font-size:clamp(40px,5vw,60px);
    color:#ffffff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
    -1px 1px 0 #000,  1px -1px 0 #000,
    1px 0 0 #000, -1px  0 0 #000,
    0 1px 0 #000,  0 -1px 0 #000;
}

#recruitment .recruitment-title h1 {
    font-size:clamp(20px,2vw,40px);
    color:#ffffff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
    -1px 1px 0 #000,  1px -1px 0 #000,
    1px 0 0 #000, -1px  0 0 #000,
    0 1px 0 #000,  0 -1px 0 #000;
}

#recruitment .main-center {
    justify-content: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
}

#recruitment section {
    padding: 0 1em 3em 1em;
}

#recruitment .job-recruitment {
    font-family: 'Robot', sans-serif;
    padding: 40px 0;
}

#recruitment .job-group {
    margin:1.5em 0.5em 2em 0.5em;
}

#recruitment .job-midasi {
    font-size: clamp(25px,3vw,40px);
    margin: 0 auto;
    margin-bottom:3em;
}

#recruitment .job-title {
    font-size: clamp(22px,3vw,35px);
    margin: 1em auto;
    text-align:left;
}

#recruitment .job-gaiyou:before {
    content: "";
    padding-right:5px;
    border-left: 7px solid #33a88bfd;
}

#recruitment .job-gaiyou {
    font-size: clamp(18px,2vw,30px);
    margin: 0.5em auto;
    padding: 0 0 0 0.5em;
}

#recruitment .job-sent {
    margin:0 auto 0.5em auto;
    padding: 0 0.5em 0 0.5em;
}

#recruitment .job-sent p {
    font-size: 16px;
    line-height: 1.3;
}

#recruitment .job-group th {
    width: 30%;
    background-color: #f0f0f0;
    padding: 0;
    border: 1px solid #cccccc;
}

#recruitment .job-group td {
    width: 70%;
    padding:1em 1em 1em 1em;
    border: 1px solid #cccccc;
}

#recruitment table {
    width:100%;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 16px;
    margin:0 1em 0 1em;
}


/* ----------------recruitmentの設定------------------- */


/* ----------------exampleの設定------------------- */

#example {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
}

#example .content {
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

#example .example-title {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0.5em 0 1.5em 0;
    text-align: center;
}

#example .example-title span {
    font-size:clamp(40px,5vw,60px);
    color:#ffffff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,
    -1px 1px 0 #000,  1px -1px 0 #000,
    1px 0 0 #000, -1px  0 0 #000,
    0 1px 0 #000,  0 -1px 0 #000;
}

#example .example-shoukai {
    margin-top: 30px;
    margin-bottom: 30px;
    display:inline-block;
    text-align: center;
}

#example .example-shoukai h1 {
    font-size:clamp(20px,2vw,31px);
    font-weight: clamp(200,500,800);
    color:white;
}

#example .main-center {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

#example section {
    padding: 1em 1em 3em 1em;
    text-align:center;
}

#example .example-zero {
    display:inline-block;
    width: 100%;
    height:60vh;
    margin: 0 auto;
    background-image: url(/images/本社風景2.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 50px;
}

#example h2 {
    font-size:clamp(20px,7vw,30px);
}

#example .example-sent {
    display: flex;
    width:100%;
    margin:0 auto;
}

#example .souko  {
    max-width: 300px;
    width:40vw;
    height: auto;
}

#example .example-hitode {
    text-align:left;
    margin:0 1em 1em 1em;
}

#example .hitode-txt {
    text-align:left;
    width:100%;
    margin-top:20px;
}

#example .hitode-txt img {
    float:right;
    padding:0 0 1em 1em;
}

#example .example-hitode .hitode-txt p {
    font-size: clamp(16px,1vw,18px)
}

#example .example-hitode .example-picture1 {
    display: block;
    justify-content: center;
    align-items:center;
    flex-wrap: wrap;
    gap: 8px;
    padding:10px 30px 30px 30px;
}

#example .example-hitode .example-picture1 .madia-imag {
    height: auto;
    max-width: 150px;
    width: 100%;
    object-fit: contain;
}

/* ----------------exampleの設定------------------- */




/* ----------------UketoriSuccessの設定------------------- */


#UketoriSuccess {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
}

#UketoriSuccess .main-center {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top:90px;
}

#UketoriSuccess section {
    padding: 0 3em 3em 3em;
}

#UketoriSuccess h2 {
    font-size: 24px;
    margin-bottom: 0.5em;
}

#UketoriSuccess .chk-uketori-title .caution-h3 {
    background-color:red;
    margin-bottom:0.5em;
}

#UketoriSuccess .chk-uketori-title .caution-h3 h3 {
    color: white;
    font-size: clamp(30px,3vw,44px);
}

#UketoriSuccess .chk-uketori-title {
    margin: 20px 0;
}

#UketoriSuccess .chk-uketori-title p {
    font-size:18px;
    margin: 0.5em;
}

#UketoriSuccess .chk-uketori-title .caution-txt {
    border: 6px solid #0056b3;
    margin:25px 0 20px 0;
}

#UketoriSuccess .chk-uketori-title .caution-txt p {
    font-size:16px;
}

#UketoriSuccess .chk-table {
    width:100%;
    margin:0 auto;
    border-collapse: collapse;
    font-size:clamp(18px,1vw,20px);
}

#UketoriSuccess .kakunin-form {
    width:100%;
    margin:0 auto;
}

#UketoriSuccess .chk-uketori th,
#UketoriSuccess .chk-uketori td {
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 4px;
}

#UketoriSuccess .chk-uketori th {
    width: 30%;
    background-color: #f0f0f0;
    text-align: center;
}

#UketoriSuccess .chk-uketori td {
    width: 70%;
    text-align: left;
    word-break: break-word;
}

#UketoriSuccess .modori {
    text-align: left;
    margin:0 auto;
}

#UketoriSuccess .modori a {
    font-size:clamp(18px,1vw,20px);
    color: #0056b3;
    text-decoration: none;
    border-bottom: 2px solid #0056b3;;
}

#UketoriSuccess .modori a:hover {
    border-bottom: 2px solid #007BFF;
    color: #007BFF;
    cursor: pointer;
}

#UketoriSuccess .sousin {
    margin-top: 1em;
    display: flex;
    justify-content: center;
}

#UketoriSuccess .btn-kakutei {
    border-radius: 5px;
    background-color: #FFFFE6;
    color: black;
    font-size:clamp(20px,1vw,24px);
    text-align: center;
    border: 1px solid gray;
    width: 200px;
    padding: 10px;
    transition: all 0.2s ease;
}

#UketoriSuccess .btn-kakutei:hover {
    color: #247900;
    box-shadow: -1px -1px #333 inset;
    cursor: pointer;
}


/* ----------------UketoriSuccessの設定------------------- */



/* ----------------Completeの設定------------------- */

#Complete {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
}

#Complete .main-center {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 150px;
}

#Complete section {
    padding-bottom:2em;
}

#Complete .complete-txt {
    text-align:center;
}

#Complete .complete-txt .complete-title {
    color:white;
    background: #76B7E6;
    margin-bottom:2em;
    border-radius:20px;
}

#Complete .complete-txt .complete-title h3 {
    color:white;
    font-size:20px;
}

#Complete .complete-txt h2 {
    font-size:34px;
    color:#76B7E6;
    margin-bottom:2em;
}

#Complete .complete-p {
    padding:0.5em 1em 0.5em 1em;
}

#Complete .complete-txt .complete-p p {
    font-size: 16px;
    text-align:center;
}

#Complete .complete-p .modori {
    text-align: left;
    margin: 2em auto;
}

#Complete .complete-p .modori a {
    font-size:clamp(18px,1vw,20px);
    color: #0056b3;
    text-decoration: none;
    border-bottom: 2px solid #0056b3;;
}



/* ----------------Completeの設定------------------- */


/* ----------------Errorの設定------------------- */

#Error {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
}

#Error .content {
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

#Error .main-center {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 120px;
}

#Error section {
    padding: 100px 1em 10em 1em;
    text-align:center;
}

#Error .main-center h1 {
    font-size:20px;
}

#Error .main-center p {
    font-size:16px;
}

/* ----------------Errorの設定------------------- */





/* -------------------レスポンシブデザイン------------------- */
@media screen and (max-width:768px) {
/* 画面サイズが600px以下の場合に適用 */
 /* ----------------ヘッダー部の設定------------------- */

.site_header {
    background:linear-gradient(to right,#F0F9FF 0%,#9ACEF4 100%);
    padding-top: 10px;
    padding-bottom: 0;
}

.header_inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

footer {
    width: 100%;
}

.responsive-footer {
    width: 100%;
    bottom: 0;
    z-index: 1000;
}

footer small {
    font-size: 11px;
}

.logo {
    float: none;
    margin: 90px auto 0;
    text-align: center;
}

.logo img {
    max-width: 150px;
    position: absolute;
    top: 10px;
    left: 20px;
    height: auto;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle {
    display: block;
    position: relative;
    width: 60px;
    height: 60px;
    background: none;
    border: none;
    cursor: pointer;
}


/* ネコの位置と余白 */
.neko {
    float: none;
    margin: 0 auto;
    text-align: center;
}

.neko img {
    max-width: 60px;
    position: absolute;
    top: 30px;
    left: 170px;
    height: auto;
    background: none;
    border: none;
    cursor: pointer;
}


/* ☰ 表示 */
.nav-toggle::before {
    content: "☰";
    font-size: 40px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 60px;
}

/* × 表示に切り替え */
.nav-toggle.open::before {
    content: "×";
    font-size: 80px; /* ここが有効に */
    line-height: 60px; /* 高さ調整 */
}

.nav-menu {
    background: #F0F9FF;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 100px;
    right: -100%; /* 最初は画面の外に配置 */
    width: 80%; /* 必要に応じて調整（例：300pxなど） */
    height: 100%;
    z-index: 999;
    padding: 50px 20px;
    transition: right 0.3s ease; /* アニメーション効果 */
}

/*    background:#F0F9FF;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 115px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    padding: 50px 0;
}*/

.nav-menu.active {
    display: flex;
    right:0;
}

.nav-menu li {
    padding: 10px 0;
    text-align: center;
}

.global-nav {
    display: flex;
    margin-top: 10px;
}

.global-nav.open {
    display: block;
}

.global-nav li a {
    font-size: 20px;
    color: #333;
    text-decoration: none;
}

.nav-menu li span.recruit-bubble {
    display: inline-flex;
    vertical-align: middle;
    top: 270px;
    margin-left: 50px;
}

.neko-link {
    display:block;
    text-decoration: none;
}

.neko .neko-bubble-sp {
    position: absolute;
    top: 15px;
    left:180px;
    margin-left: 50px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: black;
    background:white;
    border-radius: 30px;
    height: 50px;
    width: 80px;
    line-height:1.4;
}

/* 吹き出しのしっぽ */
.neko .neko-bubble-sp::before {
    content: "";
    position: absolute;
    margin-top:35px;
    margin-right:70px;
    border: 10px solid transparent;
    border-top-color: white;
    transform:rotate(-14deg);
    clip-path: polygon(50% 0, 80% 100%, 20% 60%);
    width:20px;
}

.neko .neko-bubble-pc {
    display:none;
}


/* ----------------ヘッダー部の設定------------------- */


/* ----------------indexの設定------------------- */

#index .content {
    width: 100%;
    background-size: 80%;
}

#index .main-center {
    float: none;
    width: 100%;
    margin: auto;
}

#index section {
    padding:1em 0 0 0;
}

#index form {
    max-width: 100%;
    margin: 10px 0 0 0;
    padding: 10px 10px;
}

#index .form-all {
    padding:0 0.5em 0 0.5em;
}

#index .form {
    flex-direction: column;
}

#index .btn2 {
    width: 100%;
}

#index .item {
    width: 100%;
}

#index .waku {
    flex-direction: column;
    margin: 0;
    padding:5px 0 0 0;
    width: 100%;
}

#index .form-group .btn2 {
    height: 45px; /* 入力欄と高さを揃えるなら調整 */
    padding: 0 16px;
    width:100%;
    margin:0 auto;
}

#index span.required {
    font-size: 20px;
    text-align: left;
}

#index h1.required {
    font-size: 20px;
    text-align: left;
}


#index .attention {
    margin-top: 5px;
    margin-bottom: 20px;
}

#index .attention p {
    font-size: 11px;
    margin: 0;
    text-align:left;
}

#index dl,
#index dt,
#index dd {
    margin: 0;
    padding: 0;
}

#index .form-group {
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
}

#index .form-group .btn2,
#index .form-group .item {
    width: 100%;
    font-size: 16px;
}

#index .hasou {
    text-align: center;
    margin-top:1em;
}

#index .btn a {
    color:black;
    font-size: 16px;
    display: block; /*インライン要素をブロックレベル要素に変更 */
    text-align: center;
    width: 100%;
    line-height: 100px;
    margin: 0;
    border-radius: 8px;
    border: none;
    box-shadow: 1px 1px 4px #333;
}

#index .news {
    width: 90%;
    display: block;
}

#index .news-name {
    margin-left: 0;
    text-align: left;
}

#index .news-list .item {
    height: auto;
}

#index .news-list .item a {
    padding-right: 1px;
}

#index .news-list .item .date {
    width: 100%;
    margin: 0 auto;
}

#index .gmark-color {
    width: 90%;
    display: block;
    margin: 0 auto;
    padding-bottom: 50px;
    background:none;   
    text-align: center;
}

#index .gmark-name {
    margin: 0 auto;
    margin-left: 0;
    text-align: left;
}

#index .gmark {
    padding: 0;
}

#index .gmark-title {
    text-align: left;
}

#index .gmark p {
    text-align: left;
    font-size: 11px;
    margin: 0 auto;
    padding: 0 10px 20px 10px;
}


/* ----------------indexの設定------------------- */


/* ----------------companyの設定------------------- */
#company .atena {
    display:block ;
    align-items: center;
}

#company .map {
    padding-bottom:40%;
}

#company .company-zero {
    width: 100%;
    height: 60vh;
    padding-top: 70px;
}


/* ----------------companyの設定------------------- */


/* ----------------privacyの設定------------------- */

#privacy h3 {
    font-size: 4vw;
}

/* ----------------privacyの設定------------------- */



/* ----------------serviceの設定------------------- */

#service .image-container {
    overflow:hidden;
    position: relative;
    width:80vw;
    text-align:center;
    justify-content:center;
    background: #ccc;
    touch-action:none;
}

/* モーダル内の画像 */
#service .caption-images {
    flex-wrap:nowrap;
}

#service .zoom-btn {
    display:none;
}

/* モーダル内の画像 */
#service .image-container img {
    max-width: 80vw;
    max-height: 80vh;
    border: 4px solid white;
    border-radius: 8px;
    transform-origin: center;
    transition: transform 0.2s ease;
    touch-action: none;
    cursor: grab;
}

#service #modalImage {
  transition: transform 0.1s ease-out;
  transform-origin: center center; /* 必須ではないが安定させる */
}

#service .serviceform th,
#service .serviceform td {
    width: 100%;
    display: block;
}

#service .serviceform th {
    padding: 16px;
    text-align: left;
}

#service .serviceform td {
    text-align: left;
}

#service .service-table {
    max-width: 100%;
    table-layout: fixed;
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}

#service .service-table tr {
    display: block;
    width:100%;
}

#service .service-table th,
#service .service-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px;
    border-bottom: 1px solid #cccccc;
}

#service .tel-table td {
    padding-left:0.5em;
}

#service .nyuryoku-form-p p {
    font-size:clamp(18px,2vw,20px);
}

  /* 複数行入力（姓＋名など）の調整 */
#service .name-row,
#service .name-row-sei,
#service .chkbox-row {
    display: block;
    width: 100%;
}

#service .name-row label,
#service .name-row input,
#service .name-row-sei label,
#service .name-row-sei input {
    display: block;
    width: 100%;
}

#service .chk-zitaku,
#service .chk-honsha {
    display: flex;
    width: 100%;
}

#service .uketori .shousai {
    width:80vw;
}

#service .uketori .shousai .service-img-group .service-img {
    max-width:90px;
    width:100%;
}

#service .modal-body {
    max-height: 50vh; /* 必要に応じて調整 */
    overflow-y: auto;
}

#service .privacy-body {
    margin:3em 0.5em 1em 0.5em;
    border:1px solid #cccccc;
}

#service .privacy-body .policy-back {
    background: #ffffff;
    padding: 0.5em 0.5em 0 1em;
}

#service .privacy-body .privacypolicy {
    text-align: left;
    width: 100%;
    padding:0;
}

#service .privacy-body .Profile-txt {
    padding: 0 0.5em 0.5em 0.5em;
}

#service .privacy-body h2 {
    font-size: clamp(20px,3vw,35px);
}

#service .privacy-body section {
    font-size: 20px;
}

#service .privacy-body .text-right {
    text-align: right;
}

#service .privacy-body p {
    font-size: 15px;
    margin-bottom: 0;
}

#service .privacy-body ol {
    font-size: 15px;
}

#service .servicepolicy {
    text-align: left;
    width: 100%;
    margin:1em auto;
    padding:0;
}

#service .cancel-body {
    margin:3em 0.5em 2.5em 0.5em;
    border:1px solid #cccccc;
}

#service .cancel-body .cancel-back {
    background: #ffffff;
    padding: 0.5em 0.5em 0 1em;
}

#service .cancel-txt {
    padding: 0.5em 15px 0.5em 15px;
}

#service .cancel-txt h2 {
    font-size: clamp(20px,5vw,35px);
}

#service .cancel-txt section {
    font-size: 20px;
}

#service .cancel-txt p {
    font-size: 15px;
    margin-bottom: 0;
}

#service .cancel-back ol {
    font-size: 15px;
    padding-left:2em;
}

#service .cancel-txt ol p {
    padding-bottom:0.5em;
}

#service .cancel-txt ul {
    font-size: 15px;
    list-style:none;
    font-weight:700;
    padding-top:1em;
}

#service .cancel-txt ul li {
    padding-top:0.5em;
}

#service .cancel-txt ul p {
    font-weight:400;
}

/* ----------------serviceの設定------------------- */



/* ----------------recruitmentの設定------------------- */

#recruitment table {
    margin:0 auto;
}

#recruitment .job-group {
    margin:1.5em 0.5em 110px 0.5em;
}

/* ----------------recruitmenteの設定------------------- */



/* ----------------exampleの設定------------------- */



#example .example-zero {
    height:50vh;
    padding-top:100px;
}

#example .example-title {
    padding: 0;
}

#example .example-shoukai {
    margin-top: 0px;
    margin-bottom: 0px;
}


/* ----------------exampleの設定------------------- */




/* ----------------UketoriSuccessの設定------------------- */

#UketoriSuccess .chk-table th,
#UketoriSuccess .chk-table td {
    display: block;
    margin:0 auto;
    width:100%;
}

#UketoriSuccess .chk-table {
    width:100%;
}

#UketoriSuccess .chk-uketori th {
    text-align: left;
}

#UketoriSuccess .chk-uketori td {
    padding-left: 0.5em;
        padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-top: none;
}

#UketoriSuccess .modori {
    margin-top:0.5em;
}

#UketoriSuccess .sousin {
    flex-direction: column;
    align-items: center;
}

#UketoriSuccess .btn-kakutei {
    width: 100%;
    max-width: 300px;
    margin: 1em auto;
}

#UketoriSuccess h2 {
    font-size: clamp(20px,1vw,24px);
}

#UketoriSuccess .chk-uketori-title .caution-h3 h3 {
    font-size: clamp(30px,1vw,44px);
}


#UketoriSuccess .chk-uketori-title p {
    font-size: clamp(16px,1vw,18px);
}


/* ----------------UketoriSuccessの設定------------------- */


/* ----------------UketoriSuccessの設定------------------- */

#Complete .complete-txt .complete-title h3 {
    font-size:16px;
}

#Complete .complete-txt h2 {
    font-size:24px;
    color:#76B7E6;
    margin-bottom:2em;
}

#Complete .complete-txt .complete-p p {
    text-align:left;
}

/* ----------------UketoriSuccessの設定------------------- */



/* ----------------Errorの設定------------------- */

#Error section {
    padding: 80px 0.5em 20em 0.5em;
    text-align: left;
}

/* ----------------Errorの設定------------------- */


}



/* -------------------レスポンシブデザイン------------------- */
@media screen and (max-width:350px) {
    /* 画面サイズが600px以下の場合に適用 */
    /* ----------------ヘッダー部の設定------------------- */



/* ネコの位置と余白 */
.neko {
    float: none;
    margin: 0 auto;
    text-align: center;
}

.neko img {
    max-width: 50px;
    position: absolute;
    top: 30px;
    left: 160px;
    height: auto;
    background: none;
    border: none;
    cursor: pointer;
}

.neko-link {
    display:block;
    text-decoration: none;
}

.neko .neko-bubble-sp {
    position: absolute;
    top: 15px;
    left:160px;
    margin-left: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: black;
    background:white;
    border-radius: 30px;
    height: 50px;
    width: 50px;
    line-height:1.4;
}

/* 吹き出しのしっぽ */
.neko .neko-bubble-sp::before {
    content: "";
    position: absolute;
    margin-top:35px;
    margin-right:40px;
    border: 10px solid transparent;
    border-top-color: white;
    transform:rotate(-14deg);
    clip-path: polygon(50% 0, 80% 100%, 20% 60%);
    width:20px;
}

.neko .neko-bubble-pc {
    display:none;
}



}