@charset "utf-8";
/* 都道府県セレクトのプレースホルダー風カラー */
#prefecture { color: #999; }
#prefecture.filled { color: #000!important; }

/*===============================================
●画面の横幅が769px以上
===============================================*/
@media screen and (min-width: 769px) {
#pc------------------------------------------- {
}
#helo {
	padding-top: 15.37vw;   /* 210px */
}



#contact h2 {
	font-size: 1.757vw;     /* 24px */
	color: #0D57A7;
	padding-top: 5.857vw;   /* 80px */
	margin-bottom: 3.661vw; /* 50px */
}
#contact .box {
	background-color: #F1F1F1;
	width: 58.85vw;         /* 804px */
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 2.197vw; /* 30px */
	padding-top: 2.929vw;    /* 40px */
}
#contact .box .flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 4.392vw;  /* 60px */
	padding-right: 4.392vw; /* 60px */
}
#contact .box .flex .tel img {
	width: 2.049vw;         /* 28px */
	position: relative;
	top: 0.146vw;           /* 2px */
	margin-right: 0.293vw;  /* 4px */
}
#contact .box .flex .tel a {
	font-family: "Josefin Sans", sans-serif;
	color: #000;
	text-decoration: none;
	font-size: 3.807vw;     /* 52px */
	display: inline-block;
	height: 3.661vw;        /* 50px */
	line-height: 3.661vw;   /* 50px */
}
#contact .box .flex .tel+p {
	text-align: left;
	line-height: 2em;
	position: relative;
	top: -0.512vw;          /* -7px */
	font-size: 1.098vw;     /* 15px */
}
#contact table {
	width: 74.93vw;         /* 1024px */
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	margin-top: 1.465vw;    /* 20px */
}
#contact th {
	width: 24.89vw;         /* 340px */
	vertical-align: top;
	position: relative;
	border-bottom: 0.073vw solid #BFBFBF; /* 1px */
	padding-top: 2.197vw;   /* 30px */
	padding-bottom: 2.197vw; /* 30px */
}
#contact th .hissu {
	width: 3.514vw;         /* 48px */
	height: 1.757vw;        /* 24px */
	display: block;
	background-color: #E20005;
	color: #fff;
	text-align: center;
	position: absolute;
	right: 0;
	top: 2.1vw;
	font-size: 1.025vw;     /* 14px */
	margin: auto;
}
#contact td {
	padding-left: 2.562vw;  /* 35px */
	border-bottom: 0.073vw solid #BFBFBF; /* 1px */
	padding-top: 1.098vw;   /* 15px */
	padding-bottom: 1.098vw; /* 15px */
}
#contact tr:last-child th,
#contact tr:last-child td {
	border-bottom: none;
}
#contact td .flex {
	display: flex;
}
#contact td .flex li+li {
	margin-left: 1.830vw;   /* 25px */
}
#contact td input[type="text"] {
	background-color: #F1F1F1;
	height: 3.661vw;        /* 50px */
	width: 35.14vw;         /* 480px */
	padding-left: 1.465vw;  /* 20px */
}
#contact td .address li+li {
	border-top: 0.073vw solid #BFBFBF; /* 1px */
	margin-top: 1.098vw;   /* 15px */
	padding-top: 1.098vw;  /* 15px */
}
#contact td input.short {
	width: 19.04vw;         /* 260px */
}
#contact td select {
	background-color: #F1F1F1;
	height: 3.661vw;        /* 50px */
	width: 20.49vw;         /* 280px */
	padding-left: 1.465vw;  /* 20px */
}
/* 初期（未選択＝valueが空）をグレー表示 */
#prefecture:invalid { color: #999999; }

/* 何か選択されたら黒に */
#prefecture:valid { color: #000; }

/* iOS等でフォントのにじみを軽減したいときの小技（任意） */
#prefecture { -webkit-text-size-adjust: 100%; }

input::placeholder {
  color: #999;
  opacity: 1;
}
textarea::placeholder {
  color: #999;
  opacity: 1;
}
#contact td textarea {
	background-color: #F1F1F1;
	height: 14.64vw;        /* 200px */
	padding-top: 0.732vw;   /* 10px */
	width: 33.68vw;         /* 460px */
	padding-left: 1.465vw;  /* 20px */
	padding-right: 1.465vw; /* 20px */
}
#contact .policy {
	width: 62.96vw;         /* 860px */
	height: 18.52vw;        /* 253px */
	padding-bottom: 1.465vw; /* 20px */
	margin-left: auto;
	margin-right: auto;
	border: 0.073vw solid #BFBFBF; /* 1px */
	margin-top: 2.929vw;   /* 40px */
	text-align: left;
	overflow-y: scroll;
	margin-bottom: 2.929vw; /* 40px */
}
#contact .policy h3 {
	margin-top: 2.929vw;   /* 40px */
	text-align: center;
	font-size: 1.465vw;    /* 20px */
	margin-bottom: 2.929vw; /* 40px */
}
#contact .policy p {
	width: 58.56vw;         /* 800px */
	margin-left: auto;
	margin-right: auto;
	font-size: 1.025vw;     /* 14px */
	line-height: 2em;
}
#contact .policy p+h4 {
	margin-top: 1.5vw;   /* 15px */
	font-size: 1.244vw;
	width: 58.56vw;
	margin-left: auto;
	margin-right: auto;
	line-height: 2em;
}
#contact .policy+p+p input {
	width: 1.61vw;          /* 22px */
	height: 1.61vw;         /* 22px */
	border: 0.073vw solid #BFBFBF; /* 1px */
	position: relative;
	top: 0.366vw;           /* 5px */
	margin-right: 0.366vw;  /* 5px */
}

/* ラッパー */
#contact .submit-wrap{
  position: relative;
  display: block;
  width: 20.64vw;           /* 282px */
  margin: 1.464vw auto 0;   /* 上20px・中央寄せ */
  isolation: isolate;       /* 他レイヤーの干渉を防止（保険） */
}

/* ボタン本体 */
#contact .submit-wrap input[type="submit"]{
  display: block;
  width: 100%;
  height: 4.246vw;                 /* 58px */
  line-height: 4.246vw;
  text-align: center;
  border: 0.073vw solid #0D57A7;   /* 1px */
  border-radius: 100px;
  background: #fff;
  color: #0D57A7;
  position: relative;
  z-index: 1;                      /* ← 疑似要素より一段下 */
  overflow: hidden;
  text-decoration: none;
  padding-right: 3.5vw;            /* 右に矢印のスペース */
  cursor: pointer;
  transition: background-color .45s cubic-bezier(.22,1,.36,1),
              border-color .45s cubic-bezier(.22,1,.36,1),
              color .45s cubic-bezier(.22,1,.36,1);
	padding-left: 3vw;
}
#contact .submit-wrap input[type="submit"]:hover{
	background-color: #0D57A7;
	color: #fff;
}

/* ホバー時の色変化（任意） */
#contact .submit-wrap:hover input[type="submit"]{
  color:#fff;
}

/* フォーカス可視（キーボード操作時のアクセシビリティ） */
#contact .submit-wrap input[type="submit"]:focus-visible{
  outline: 0.146vw solid #0D57A7;  /* 2px */
  outline-offset: 0.219vw;         /* 3px */
}

/* 無効化状態 */
#contact .submit-wrap input[type="submit"]:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ▼ 矢印（疑似要素2枚：青→白） */
#contact .submit-wrap::before,
#contact .submit-wrap::after{
  content:"";
  position:absolute;
  top:50%;
  right:1.464vw;                   /* 20px */
  width:1.098vw;                   /* 15px */
  height:1.098vw;
  transform:translateY(-50%);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  z-index:2;                       /* ← input より前面 */
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              opacity .45s cubic-bezier(.22,1,.36,1);
}

/* 初期：青矢印（表示） */
#contact .submit-wrap::before{
  background-image:url("../images/pc/arrow_blue.png");
  opacity:1;
}

/* 初期：白矢印（左にずらして非表示） */
#contact .submit-wrap::after{
  background-image:url("../images/pc/arrow_white.png");
  transform:translateY(-50%) translateX(-1.318vw); /* -18px */
  opacity:0;
}

/* ホバー：青が右へ抜けて消える／白が位置に入って現れる */
#contact .submit-wrap:hover::before{
  transform:translateY(-50%) translateX(1.318vw); /* +18px */
  opacity:0;
}
#contact .submit-wrap:hover::after{
  transform:translateY(-50%) translateX(0);
  opacity:1;
}

/* 低モーション環境配慮 */
@media (prefers-reduced-motion: reduce){
  #contact .submit-wrap::before,
  #contact .submit-wrap::after,
  #contact .submit-wrap input[type="submit"]{
    transition:none;
  }
}
}




/*===============================================
●画面の横幅が768pxまで
===============================================*/
@media screen and (max-width:768px){
	
/*===============================================
●sp-tablet
===============================================*/
#sptablet------------------------------------------- {
}
#helo {
	padding-top: 30vw;
}
#contact h2 {
	font-size: 6vw;
	color: #0D57A7;
	padding-top: 10vw;
	margin-bottom: 5vw;
}
#contact .box {
	background-color: #F1F1F1;
	margin-left: 5vw;
	margin-right: 5vw;
	padding-bottom: 5vw;
	padding-top: 5vw;
}
#contact .box .flex {
	padding-left: 5vw;
	padding-right: 5vw;
}
#contact .box .flex .tel img {
	width: 5vw;
	position: relative;
	top: 3.5vw;
	margin-right: 1px;
}
#contact .box .flex .tel a {
	font-family: "Josefin Sans", sans-serif;
	color: #000;
	text-decoration: none;
	font-size: 10vw;
	display: inline-block;
	height: 15vw;
	line-height: 15vw;
}
#contact .box .flex .tel+p {
	text-align: left;
	line-height: 2em;
	position: relative;
	font-size: 3.5vw;
	text-align: center;
	margin-top: -3vw;
}
#contact table {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	margin-top: 20px;
}
#contact th {
	width: 100%;
	display: block;
	vertical-align: top;
	position: relative;
	padding-top: 5vw;
	color: #0D57A7;
}
#contact th .hissu {
	width: 10vw;
	height: 5vw;
	line-height: 5vw;
	display: block;
	background-color: #E20005;
	color: #fff;
	text-align: center;
	position: absolute;
	right: 0px;
	top: 5vw;
	font-size: 3vw;
	margin: auto;
}
#contact td {
	display: block;
	width: 100%;
	border-bottom: 1px solid #BFBFBF;
	padding-top: 3vw;
	padding-bottom: 5vw;
}
#contact tr:last-child th,
#contact tr:last-child td
{
	border-bottom: none;
}
#contact td .flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	line-height: 2em;
}
#contact td .flex li {
	width: 48%;
}
#contact td input[type="text"] {
	background-color: #F1F1F1;
	height: 10vw;
	padding-left: 3%;
	width: 97%;
}
#contact td .address li+li {
	margin-top: 2vw;
	padding-top: 1vw;
}
#contact td input.short {

}
#contact td select {
	background-color: #F1F1F1;
	height: 10vw;
	padding-left: 2%;
	width: 100%;
}
  /* 初期（未選択＝valueが空）をグレー表示 */
  #prefecture:invalid { color: #999999; }

  /* 何か選択されたら黒に */
  #prefecture:valid { color: #000; }

  /* iOS等でフォントのにじみを軽減したいときの小技（任意） */
  #prefecture { -webkit-text-size-adjust: 100%; }
input::placeholder {
  color: #999; /* 好きな色 */
  opacity: 1;  /* ブラウザによっては必要 */
}
textarea::placeholder {
  color: #999; /* 好きな色 */
  opacity: 1;  /* ブラウザによっては必要 */
}
#contact td textarea {
	background-color: #F1F1F1;
	height: 40vw;
	padding-top: 10px;
	padding-left: 3%;
	padding-right: 3%;
	width: 94%;
}
#contact .policy {
	height: 50vw;
	padding-bottom: 20px;
	margin-left: 5vw;
	margin-right: 5vw;
	padding: 5vw;
	border: 1px solid #BFBFBF;
	margin-top: 5vw;
	text-align: left;
	overflow-y: scroll;
	margin-bottom: 5vw;
}
#contact .policy h3 {
	margin-top: 1vw;
	text-align: center;
	font-size: 5vw;
	margin-bottom: 5vw;
}
#contact .policy p {
	margin-left: auto;
	margin-right: auto;
	line-height: 2em;
	font-size: 3.5vw;
}
#contact .policy p+h4 {
	margin-top: 5vw;
}
#contact .policy+p+p input {
	width: 5vw;
	height: 5vw;
	border: 1px solid #BFBFBF;
	position: relative;
	top: 1vw;
	margin-right: 1vw;
}
/* ラッパー */
#contact .submit-wrap{
  position: relative;
  display: block;
  width: 80.64vw;           /* 282px */
  margin: 1.464vw auto 0;   /* 上20px・中央寄せ */
  isolation: isolate;       /* 他レイヤーの干渉を防止（保険） */
  margin-top: 5vw;
}

/* ボタン本体 */
#contact .submit-wrap input[type="submit"]{
  display: block;
  width: 100%;
  height: 15vw;                 /* 58px */
  line-height: 15vw;
  text-align: center;
  border: 0.073vw solid #0D57A7;   /* 1px */
  border-radius: 100px;
  background: #fff;
  color: #0D57A7;
  position: relative;
  z-index: 1;                      /* ← 疑似要素より一段下 */
  overflow: hidden;
  text-decoration: none;
  padding-right: 3.5vw;            /* 右に矢印のスペース */
  cursor: pointer;
  transition: background-color .45s cubic-bezier(.22,1,.36,1),
              border-color .45s cubic-bezier(.22,1,.36,1),
              color .45s cubic-bezier(.22,1,.36,1);
	padding-left: 3vw;
}
#contact .submit-wrap input[type="submit"]:hover{
	background-color: #0D57A7;
	color: #fff;
}

/* ホバー時の色変化（任意） */
#contact .submit-wrap:hover input[type="submit"]{
  color:#fff;
}

/* フォーカス可視（キーボード操作時のアクセシビリティ） */
#contact .submit-wrap input[type="submit"]:focus-visible{
  outline: 0.146vw solid #0D57A7;  /* 2px */
  outline-offset: 0.219vw;         /* 3px */
}

/* 無効化状態 */
#contact .submit-wrap input[type="submit"]:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ▼ 矢印（疑似要素2枚：青→白） */
#contact .submit-wrap::before,
#contact .submit-wrap::after{
  content:"";
  position:absolute;
  top:50%;
  right:1.464vw;                   /* 20px */
  width:10.098vw;                   /* 15px */
  height:2.5vw;
  transform:translateY(-50%);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  z-index:2;                       /* ← input より前面 */
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              opacity .45s cubic-bezier(.22,1,.36,1);
}

/* 初期：青矢印（表示） */
#contact .submit-wrap::before{
  background-image:url("../images/pc/arrow_blue.png");
  opacity:1;
}

/* 初期：白矢印（左にずらして非表示） */
#contact .submit-wrap::after{
  background-image:url("../images/pc/arrow_white.png");
  transform:translateY(-50%) translateX(-1.318vw); /* -18px */
  opacity:0;
}

/* ホバー：青が右へ抜けて消える／白が位置に入って現れる */
#contact .submit-wrap:hover::before{
  transform:translateY(-50%) translateX(1.318vw); /* +18px */
  opacity:0;
}
#contact .submit-wrap:hover::after{
  transform:translateY(-50%) translateX(0);
  opacity:1;
}

/* 低モーション環境配慮 */
@media (prefers-reduced-motion: reduce){
  #contact .submit-wrap::before,
  #contact .submit-wrap::after,
  #contact .submit-wrap input[type="submit"]{
    transition:none;
  }
}
}



/*===============================================
●画面の横幅が400pxまで
===============================================*/
@media screen and (max-width:400px){
/*===============================================
●sp400
===============================================*/
#sp400------------------------------------------- {
}
}



/*===============================================
●画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){
/*===============================================
●sp320
===============================================*/
#sp320------------------------------------------- {
}
}



/*===============================================
●画面の横幅が481pxから768pxまで
===============================================*/
@media screen and (min-width:481px) and (max-width:768px) {
/*===============================================
●tablet
===============================================*/
#tab------------------------------------------- {
}
}