@charset "utf-8";

/* Description : 共有設定 */

/* reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td {
	margin: 0;
	padding: 0;
}

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

ul li {
	list-style: none;
}

ol li {
	margin-left: 1.8em;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}

img {
	border: none;
	vertical-align: bottom;
	max-width: 100%;
}

html{
  scroll-behavior: smooth;
}




/* base */

body {
	margin: 0;
	padding: 0;
	text-align: center;
	background-size: 100%;
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.8;
	font-size: 0.8rem;
}

a img:hover {
  opacity: 0.7;
}

.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}



@media print, screen and (min-width: 769px){

.sp {
	display: none;
}

}

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

body {
	font-size: 0.9rem;
	margin:0;
}

.pc {
	display: none;
}

}


/*ロゴ切り替え*/
.image-container {
  position: relative;
  width: 400px;
  height: 210px;
  overflow: hidden;
  margin: 250px auto; /* 左右中央寄せ */
}

@media screen and (max-width:768px) {
.image-container {
  width: 100%;
  margin: 225px auto; /* 左右中央寄せ */
}
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 1s ease-in-out;
}

.image-a {
  z-index: 1;
  animation: hideImageA 1s forwards;
  animation-delay: 1.5s;
}

@media screen and (max-width:768px) {
.image-a {
	width: 70%;
	margin: 0 15%;
}
}

.image-b {
  z-index: 2;
  opacity: 0;
  animation: showImageB 1s forwards;
  animation-delay: 1.5s;
}

@keyframes hideImageA {
  to { opacity: 0; }
}

@keyframes showImageB {
  to { opacity: 1; }
}


/*ハンバーガーメニュー*/

/* ====== トグル & ボタン（右上固定・画像切替） ====== */
.nav-toggle{ position:absolute; opacity:0; pointer-events:none; }

.hamburger{
  position:fixed; top:16px; right:16px; z-index:1002;
  width:44px; height:44px; cursor:pointer;
  background: url("../img/menu_af.svg") center/28px 28px no-repeat;
}
#nav-toggle:checked ~ .hamburger{
  background-image: url("../img/menu_be.svg");
}

/* ====== スライドパネル ====== */
.slide-menu{
  position:fixed; top:0; right:0;
  height:100dvh; width:100vw;
  background:#000; color:#fff; z-index:1000;
  transform: translateX(100%);
  transition: transform .4s ease;

  /* 上寄せ・左寄せ */
  display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;

  /* パネル単体でパディング込み幅にする（はみ出し防止） */
  box-sizing: border-box;

  /* デフォルトの余白（タブレット以上が対象になる想定） */
  padding:80px 20px 40px;
}

/* PCは幅260px（ご提示に合わせています） */
@media (min-width: 768px){
  .slide-menu{
    width:260px;
    padding:80px 50px 40px;
  }
}

/* ====== メニュー列 ====== */
.slide-menu .menu{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  width:100%;
  max-width:none;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.slide-menu .menu li{ margin:0 0 35px }

.slide-menu .menu a{ display:block; text-decoration:none; }
.slide-menu .menu img{
  display:block;
  width:100%;
  height:auto;
}

/* ====== オーバーレイ ====== */
.backdrop{
  position:fixed; inset:0; background:#0008; opacity:0; pointer-events:none;
  transition: opacity .3s ease; z-index:999;
}

/* ====== 開閉 ====== */
#nav-toggle:checked ~ .slide-menu{ transform: translateX(0); }
#nav-toggle:checked ~ .backdrop{ opacity:1; pointer-events:auto; }

/* ====== 動き軽減 ====== */
@media (prefers-reduced-motion: reduce){
  .slide-menu, .backdrop{ transition:none; }
}

/* ── スマホ専用：左右paddingを10%に。画像はその内側で100% ── */
@media (max-width: 767.98px){
  .slide-menu{
    width:100%;                 /* iOSの100vwズレ回避 */
    padding:72px 25% 32px;      /* ← ご要望：左右10% */
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }

  .slide-menu .menu{
    width:100%;
    max-width:none;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    padding:0;
  }

  .slide-menu .menu li{ margin:0 0 15%; }
  .slide-menu .menu a{ display:block; }
  .slide-menu .menu img{
    width:100%;                 /* ← パネルの内側（paddingを除いた領域）で100% */
    height:auto;
    max-width:100%;
  }
}

.slide-menu .menu li:nth-child(4) {
  margin-bottom: 40px;
}

.slide-menu .menu li:nth-child(5) {
  margin-bottom: 20px;
}

@media (max-width: 767.98px){
.slide-menu .menu li:nth-child(4) {
  margin-bottom: 40px;
}

.slide-menu .menu li:nth-child(5) {
  margin-bottom: 20px;
}
}


.pfbutton {
	margin: 80px auto 0;
}

.pfbutton td {
	padding: 0 30px;
}

@media (max-width: 767.98px){
.pfbutton img {
	width: 250px;
}
.pfbutton td {
	display: block;
	width: 100%;
	padding: 0;
}
.pfbutton td:nth-child(1) {
	padding-bottom: 30px;
}
}



/*パーツ*/

.graybox {
	background: #bebebe;
	padding: 35px 40px 100px 40px;
}

.graywhite {
	padding: 35px 40px 100px 40px;
}

p.title{ text-align:left; }          /* align属性は使わずCSSで */
p.title img{ display:block; height:auto; }  /* ←ベースライン問題を回避 */

.copyright {
	color: #bebebe;
	text-align: center;
	margin: 120px auto 50px;
}

footer {
	background: #bebebe;
	padding: 0 0 50px;
	text-align: center;
	color: #FFF;
}

footer img {
	margin: 280px 0 180px;
}

@media (max-width: 767.98px){
footer img {
	width: 65%;
	margin: 200px 0;
}
}

h1 {
	margin: 50px auto;
}

h2 {
	text-align: center;
	width: 877px;
	margin: 0 auto 50px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 25px 0;
	font-size: 1.3rem;
	font-weight: normal;
}

.w700 {
	width: 700px;
	margin: 0 auto;
	text-align: left;
}

@media (max-width: 767.98px){
h2 {
	width: 90%;
	margin: 0 5% 10%;
	padding: 4% 0;
}
.w700 {
	width: 90%;
	margin: 0 5%;
}
}



/*WORKS*/

.workdtb {
	margin: 0 auto;
}

.workdtb td {
	padding: 20px;
}

@media (max-width: 767.98px){
.workdtb td {
	display: block;
	width: 100%;
	padding: 0 0 40px;
}
}



/*PROFILE*/

.profiletb {
	margin: 0 auto 30px;
	color: #FFF;
	text-align: left;
}

.profiletb th {
	padding-right: 35px;
	font-weight: normal;
	white-space:nowrap;
}

.profiletb td,
.profiletb th {
	padding-bottom: 30px;
	vertical-align: text-top;
}

.profiletb a {
	color: #FFF;
}


/* 共通（スマホ用: アスペクト比4:3） */
.map-wrap {
  position: relative;
  width: 100%;
  max-width: 600px;       /* PC幅と同じ最大幅に */
  margin: 0 auto;         /* 中央寄せ */
  padding-top: 75%;       /* 4:3 の比率 = 3 ÷ 4 = 0.75 */
}
.map-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* PC表示（900px以上のとき固定サイズ） */
@media (min-width: 900px) {
  .map-wrap {
    width: 600px;
    height: 290px;
    padding-top: 0; /* 比率パディングを解除 */
  }
  .map-wrap iframe {
    position: static;
    width: 100%;
    height: 100%;
  }
}


/*RECRUIT*/

.rectuirbox {
	text-align: center;
	margin: 0 auto;
	font-size: 1rem;
	padding: 100px 0 130px;
}



/*個人情報*/

.pbtitle {
	font-size: 1.3rem;
	margin-bottom: 20px;
}

.pbtable {
	border-top: 1px solid #000;
}

.pbtable th {
	background: #d2d2d2;
	text-align: left;
	font-weight: normal;
}

.pbtable th {
	padding: 7px 20px;
}

.pbtable td {
	padding: 20px 20px;
}

.pbtable th,
.pbtable td {
	border-bottom: 1px #000 solid;
}


@media (max-width: 767.98px){
    .js-scrollable{
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      /* 見やすくするための枠だけ。不要なら消してください */
      position: relative;
    }
    /* 横スクロールを発生させるため、テーブルに最低幅を与える */
    .js-scrollable > table{ min-width: 700px; border-collapse: collapse; width: auto; }
    .js-scrollable th, .js-scrollable td{ }
}

@media (min-width: 768px){
  .scroll-hint-icon,
  .scroll-hint-text{ display: none !important; }
}



/*お問い合わせ*/

.contacttb {
	width: 100%;
	border-top: 1px solid #000;
}

.contacttb th {
	font-weight: normal;
	text-align: left;
	white-space: nowrap;
}


.contacttb th,
.contacttb td {
	padding: 20px;
	vertical-align: text-top;
	border-bottom: 1px solid #000;
}

@media (max-width: 767.98px){
.contacttb td:nth-child(odd){
	border-bottom: none;
	padding-bottom: 0;
}
.contacttb th,
.contacttb td {
	display: block;
	width: 90%;
	padding: 7% 5%;
}
}

.contacttb input[type="text"],
.contacttb textarea{
	width: 100%;
	padding: 15px 0;
}

/* ボックスを拡大 */
input[type="checkbox"]{
  transform: scale(2);          /* 大きさ調整 */
  transform-origin: left center;   /* 配置ずれ対策 */
  margin-right: 1em;
}

@media (max-width: 767.98px){
input[type="checkbox"]{
  transform: scale(2);          /* 大きさ調整 */
  margin-right: 1em;
}
}

input[type="checkbox"] {
  accent-color: #f29600; /* チェック時の背景色を赤に */
}

.required {
	color: #f29600;
}

.doui {
	margin: 30px auto 60px;
	text-align: center;
}

.doui a {
	color: #f29600;
}

.doui a::after {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    background-image: url(../img/icon_nw.svg);
    background-position: center;
    background-size: contain;
	margin: 0 5px;
}

@media (max-width: 767.98px){
.doui {
	text-align: left;
}
}

.fotmbtn {
	background: #bebebe;
	padding: 10px 0 15px;
	text-align: center;
	font-size: 1.3rem;
	border: none;
	width: 370px;
	color: #FFF;
	font-family: "Zen Old Mincho", serif;
}

@media (max-width: 767.98px){
.fotmbtn {
	width: 75%;
	border-radius: 0;
}
}



/* spacer */

.marb02 {
	margin-bottom: 2% !important;
}

.marb03 {
	margin-bottom: 3% !important;
}

.marb05 {
	margin-bottom: 5% !important;
}

.marb08 {
	margin-bottom: 8% !important;
}

.marb10 {
	margin-bottom: 10% !important;
}

.mar02 {
	margin: 2% auto !important;
}

.mar03 {
	margin: 3% auto !important;
}

.mar05 {
	margin: 5% auto !important;
}


.marb10px {
	margin-bottom: 10px !important;
}

.marb20px {
	margin-bottom: 20px !important;
}

.marb30px {
	margin-bottom: 30px !important;
}

.marb40px {
	margin-bottom: 40px !important;
}

.marb50px {
	margin-bottom: 50px !important;
}

.marb60px {
	margin-bottom: 60px !important;
}

.marb70px {
	margin-bottom: 70px !important;
}

.marb80px {
	margin-bottom: 80px !important;
}

.marb90px {
	margin-bottom: 90px !important;
}

.marb100px {
	margin-bottom: 100px !important;
}

.marb150px {
	margin-bottom: 150px !important;
}

.mar10px {
	margin: 10px auto !important;
}

.mar20px {
	margin: 20px auto !important;
}

.mar30px {
	margin: 30px auto !important;
}

.mar40px {
	margin: 40px auto !important;
}

.mar50px {
	margin: 50px auto !important;
}

.mar5020px {
	margin: 50px auto 10px !important;
}

/* img */

.mw10 {
	max-width: 10% !important;
	margin-left:45%;
	margin-right:45%;
}
.mw20 {
	max-width: 20% !important;
	margin-left:40%;
	margin-right:40%;
}
.mw30 {
	max-width: 30% !important;
	margin-left:35%;
	margin-right:35%;
}
.mw40 {
	max-width: 40% !important;
	margin-left:30%;
	margin-right:30%;
}
.mw50 {
	max-width: 50% !important;
	margin-left:25%;
	margin-right:25%;
}
.mw60 {
	max-width: 60% !important;
	margin-left:20%;
	margin-right:20%;
}
.mw70 {
	max-width: 70% !important;
	margin-left:15%;
	margin-right:15%;
}
.mw80 {
	max-width: 80% !important;
	margin-left:10%;
	margin-right:10%;
}
.mw90 {
	max-width: 90% !important;
	margin-left:5%;
	margin-right:5%;
}
.mwl10 {
	max-width: 10% !important;
	margin: auto 90% auto 0;
}
.mwl20 {
	max-width: 20% !important;
	margin: auto 80% auto 0;
}
.mwl30 {
	max-width: 30% !important;
	margin: auto 70% auto 0;
}
.mwl40 {
	max-width: 40% !important;
	margin: auto 60% auto 0;
}
.mwl50 {
	max-width: 50% !important;
	margin: auto 50% auto 0;
}
.mwl60 {
	max-width: 60% !important;
	margin: auto 40% auto 0;
}
.mwl70 {
	max-width: 70% !important;
	margin: auto 30% auto 0;
}
.mwl80 {
	max-width: 80% !important;
	margin: auto 20% auto 0;
}
.mwl90 {
	max-width: 90% !important;
	margin: auto 10% auto 0;
}


@media screen and (max-width:768px) {
.marb10px {
	margin-bottom: 2% !important;
}

.marb20px {
	margin-bottom: 4% !important;
}

.marb30px {
	margin-bottom: 6% !important;
}

.marb40px {
	margin-bottom: 8% !important;
}

.marb50px {
	margin-bottom: 10% !important;
}

.marb60px {
	margin-bottom: 12% !important;
}

.marb70px {
	margin-bottom: 14% !important;
}

.marb80px {
	margin-bottom: 16% !important;
}

.marb90px {
	margin-bottom: 18% !important;
}

.marb100px {
	margin-bottom: 20% !important;
}

.marb150px {
	margin-bottom: 30% !important;
}


.mar10px {
	margin: 2% auto !important;
}

.mar20px {
	margin: 4% auto !important;
}

.mar30px {
	margin: 6% auto !important;
}

.mar40px {
	margin: 8% auto !important;
}

.mar50px {
	margin: 10% auto !important;
}

}



/* アニメーション設定 */
.effect {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.9s ease;
}

.effect.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* 除外クラス */
.no-effect {
  opacity: 1 !important;
  transform: none !important;
}