@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Noto+Sans+JP:wght@400;700&display=swap');
/* ===================================
	File Name   : common.css
	Description : Base Layout CSS
	Editor      : Bface Saeki
	Last Editor : Bface Saeki
	
	Update Description :
	[2024/07/23] 背景色削除 / 検索定義追加
	[2022/08/01] メインカラー変更
	[2021/11/10] h_option ボタン複数化
	[2021/06/18] 複製調整

====================================== */

/*========== Style Contents ==========

	1. Global Redefinition
	2. Font Redefinition
	3. Base Box Setting
	4. Form Setting
	5. Common Items Setting
		- Basic Link
	 	- Header Items
		- Global Navigation
	 	- Footer Items
		- Breadcrumbs
		- Page Top Button
	6. Suggest Box
	7. Search Request (filtering)

====================================== */



/*===== ■1. Global Redefinition =====*/
body {
  margin: 0px auto;
	color: #333333;
	line-height: 1.5;
}

dt,li,strong,em,span { line-height: 1.2;}

img {
  width: 100%;
  max-width: 640px;
  height: auto;
}

sup {
  font-size: 1.0rem;
  vertical-align: text-top;
}


/*===== ■2. Font Redefinition =====*/
html { font-size: 62.5%;}

body {
	font-size: 1.6em;
	font-family: 'Montserrat', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
	font-weight: 500;
}

@media (max-width: 768px) {
	html { font-size: calc(100vw / 76.8 * 2.048);}
  body { font-size: 1.4em;}
}
@media (max-width: 640px) { html { font-size: calc(100vw / 64 * 1.7067);}}
@media (max-width: 480px) { html { font-size: calc(100vw / 48 * 1.28);}}
@media (max-width: 375px) { html { font-size: calc(100vw / 37.5 *1);}}
@media (max-width: 360px) { html { font-size: calc(100vw / 36);}}
@media (max-width: 320px) { html { font-size: calc(100vw / 32);}}



/*===== ■3. Base Box Setting =====*/
header {
  display: flex;
  background: #fff;
}

main {
  display: flex;
}

main > article {
  flex: 1;
  padding: 0 50px 50px;
}
main > article:has(+ #request) {
  order: 2;
  padding: 0 0 50px;
}

footer { background: #333;}

section,
.wrapper { margin: 0 50px 50px;}
section:last-of-type,
.wrapper:last-of-type { margin: 0 50px 20px;}

.limit {
  max-width: 1280px;
  margin: 0 auto 50px !important;
  padding: 0 20px;
}


@media (max-width: 768px) {
  header { flex-wrap: wrap;}
  main { display: block;}
  main > article { padding: 0 2.67vw 10.67vw;}
  main > article:has(+ #request) { padding: 0 0 10.67vw;}
  

  section,
  .wrapper { margin: 0 2.67vw 10.67vw;}
  section:last-of-type,
  .wrapper:last-of-type { margin: 0 2.67vw;}
  
  .limit {
    margin: 0 auto 10.67vw;
    padding: 0 2.67vw;
  }
}



/*===== ■4. Form Setting =====*/
/* placeholder */
:placeholder-shown { color: #999;}
::-webkit-input-placeholder { color: #999;}
::-moz-placeholder { color: #999;}
:-ms-input-placeholder { color: #999;}
:focus:placeholder-shown { color: transparent;}
:focus::-webkit-input-placeholder { color: transparent;}
:focus::-moz-placeholder { color: transparent;}
:focus:-ms-input-placeholder { color: transparent;}

form { text-align: center;}

label {
  position: relative;
  display: inline-block;
  word-break: break-all;
}

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="password"]{
  width: 100%;
  height: 45px;
  margin: 0;
  padding: 5px 10px ;
  box-shadow: 1px 1px 2px rgba(0,0,0,.2) inset, 0 1px 0 #fff;
  border: none;
  border-radius: 3px;
  background: #ccc;
  font-size: 1.6rem;
	font-family: 'Montserrat', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="password"]:focus { background: #fff;}

.box_gray input[type="text"] { background: #f1f1f1;}
input[type="text"]:focus { background: #fff;}

input[type="submit"] {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px;
  background: #000;
  color: #fff;
  cursor: pointer;
  outline : none;
}

input[type="checkbox"],
input[type="radio"] {
  outline: none;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

input[type="checkbox"] + span,
input[type="radio"] + span {
   display: grid;
   grid-template-columns: auto 1fr;
   padding-top: .3rem;
}

input[type="checkbox"] + span::before,
input[type="checkbox"] + span::after,
input[type="radio"] + span::before,
input[type="radio"] + span::after {
  display: inline-block;
  box-sizing: border-box;
  content: '';
}
input[type="checkbox"] + span::before,
input[type="radio"] + span::before { margin: -.3rem 1rem 0 0;}
input[type="checkbox"] + span::after,
input[type="radio"] + span::after {
  position: absolute;
  top: 0;
  left: 0;
}

input[type="checkbox"] + span::before {
  width: 2.5rem;
  height: 2.5rem;
  box-shadow: .1rem .1rem .2rem rgba(0,0,0,.2) inset, 0 1px 0 rgba(255,255,255,.65);
  background: #ccc;
}
input[type="checkbox"] + span::after {
  width: 1rem;
  height: 1.6rem;
  margin: 0 .75rem;
}

input[type="checkbox"]:checked + span::before { background: #ccc;}
input[type="checkbox"]:checked + span::after {
  top: 1.3rem;
	border: .3rem solid #333;
	border-width: 0 .3rem .3rem 0;
	transform: translateY(-65%) rotate(45deg);
}

input[type="radio"] + span::before {
  width: 2rem;
  height: 2rem;
  box-shadow: 0 .1rem .2rem rgba(0,0,0,.2) inset, 0 .1rem 0 rgba(255,255,255,.65);
  border-radius: 50%;
  background: #ccc;
}
input[type="radio"] + span::after {
  width: 1.2rem;
  height: 1.2rem;
  margin: .4rem 0 0 .4rem;
  border-radius: 50%;
}
input[type="radio"]:checked + span::after { background: #333;}

input[type="button"][name="reset"]{
  background: #fff;
  min-height: 60px;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid #333;
  font-size: 1.8rem;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
}
input[type="button"][name="reset"]:hover {
  color: #333;
  border-color: #999;
  background: #fff;
  transition: .5s all;
}

.search_wrap {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 9%);
  gap: 2rem;
}

.search_wrap input[type="text"] {
  padding: 5px 10px;
  border-radius: 0;
  font-size: 1.8rem;
}

.search_wrap input[type="submit"] {
  position: static;
  font-weight: bold;
  font-size: 1.6rem;
  border: 1px solid #000;
  transition: all .25s;
}
.search_wrap input[type="submit"]:hover {
  border-color: #000;
  background-color: #fff;
  color:  #000;
  transition: all .25s;
}

.select_wrap {
  display: block;
  position: relative;
  height: 45px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.2) inset, 0 1px 0 #fff;
  border-radius: 3px;
  background: #ccc;
}
.select_wrap select {
  padding: 5px 45px 5px 10px;
  font-size: 1.8rem;
}
.select_wrap button {
  position: absolute;
  right: 0;
  width: 45px;
  height: 45px;
  border-radius: 0 3px 3px 0;
  background: #333;
}
.select_wrap button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35%;
  height: 35%;
  margin-top: -10%;
  border-bottom: 2px solid #ccc;
  border-left: 2px solid #ccc;
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  content: "";
}

select {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color:#999;
  font-size: 1.6rem;
}
select::-ms-expand { display: none;}

textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px;
  height: 100px;
  box-shadow: 1px 1px 2px rgba(0,0,0,.2) inset, 0 1px 0 #fff;
  border: none;
  border-radius: 3px;
  background: #ccc;
	font-family: 'Montserrat', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}
textarea:focus { background: #fff;}

/* Form Error */
.form_error {
  margin: 3rem 2rem;
  padding: 2rem;
  text-align: center;
  border: 1px solid #c00;
  background: rgba(192,0,0,0.1);
  color: #c00;
}

.form_error_input {
  border: 1px solid #c00 !important;
  background: rgba(192,0,0,0.1) !important;
}

p.supplement-text {
  color: #c00;
  margin: 1rem 0;
}


@media only screen and (max-width: 768px){
	input[type="text"],
	input[type="tel"],
	input[type="number"],
	input[type="email"],
	input[type="date"],
	input[type="password"]{
    height: 12vw;
    padding: 1.34vw 2.67vw;
    font-size: 1.6rem;
	}
  
  input[type="submit"] {
    padding: 1.34vw;
  }

	input[type="checkbox"] + span,
	input[type="radio"] + span {
    display: inline-block;
	}

	input[type="checkbox"] + span::before {
    width: 5.34vw;
    height: 5.34vw;
	}
	input[type="checkbox"] + span::after {
    z-index: 1;
    width: 2.14vw;
    height: 4vw;
    margin: 0 1.6vw;
	}

	input[type="checkbox"]:checked + span::before { border-width: .27vw;}
	input[type="checkbox"]:checked + span::after { border-width: 0 .8vw .8vw 0;}

	input[type="radio"] + span::before {
    z-index: 0;
    width: 5.34vw;
    height: 5.34vw;
  }
	input[type="radio"] + span::after {
    width: 3.2vw;
    height: 3.2vw;
    margin: 1.07vw 0 0 1.07vw;
	}
	input[type="radio"]:checked + span::before { border-width: .54vw;}
  
  input[type="button"][name="reset"]{
    width: 60%;
    min-height: 12vw;
    margin-bottom: 2.67vw;
    padding: 2.67vw 4vw;
    border-color: #666;
    background: #ccc;
    color: #666;
    font-size: 1.6rem;
    transition: none;
  }
  input[type="button"][name="reset"]:hover {
    border-color: #666;
    background: #ccc;
    color: #666;
    transition: none;
  }
  
	.search_wrap { grid-template-columns: 1fr auto;}
  .search_wrap input[type="text"] { padding: 1.34vw 2.67vw;}
  .search_wrap input[type="submit"] {
    padding: 1.34vw 2.67vw;
    aspect-ratio: auto;
  }
  .search_wrap input[type="submit"]:hover {
    background-color: #000;
    color:  #fff;
  }
  
  .select_wrap { height: 14.68vw;}
  
  .select_wrap select {
    padding: 1.34vw 14.67vw 1.34vw 2.67vw;
    font-size: 1.6rem;
  }

  .select_wrap button {
    width: 7.34vw;
    height: 14.68vw;
  }
  .select_wrap button::after {
    width: 30%;
    height: 15%;
    border-bottom: .54vw solid #ccc;
    border-left: .54vw solid #ccc;
  }
  
  select { font-size: 1.6rem;}

	textarea {
    height: 24vw;
    font-size: 1.4rem;
  }
}


/*===== ■5. Common Items Setting =====*/
/* Basic Link */
a:not(.txt) {
	color: #fff;
	outline: hidden;
	text-decoration: none;
  transition: all .25s;
}

a:not(.txt):hover {
	color: #999;
  transition: all .25s;
}

a.txt {
  color: #333;
	outline: hidden;
	text-decoration: none;
}

a.txt:hover {
	color: #d71518;
	text-decoration: underline;
}

a img { transition: all .25s;}
a:hover img {
  opacity: .6;
  transition: all .25s;
}


@media (max-width: 768px) {
  a:not(.txt) { transition: none;}
  a:not(.txt):hover {
    color: #fff;
    transition: none;
  }
  
  a.txt { text-decoration: underline;}
  a.txt:hover {
    color: #333;
    text-decoration: underline;
  }
  
  a img { transition: none;}
  a:hover img {
    opacity: 1;
    transition: none;
  }
}


/* Header Items */
header > :first-child { display: flex;}
header > :first-child a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 20px;
  background: #d71518;
  color: #fff;
  font-weight: bold;
  text-align: center;
}
header > :first-child b { font-size: 1.4rem;}

header #h_logo {
  display: flex;
  align-items: center;
  margin: 10px;
}

header #h_logo a {
  width: 200px;
  min-height: 0%;
  margin-right: 10px;
}

header #h_logo a img { display: block;}

header #h_logo > div {
  display: flex;
  flex-direction: column;
}

header #h_logo > div a { width: 200px;}
header #h_logo > div a:last-child { width: 100px; margin-top: 10px;}

header #h_inquiry {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px;
}

header #h_inquiry dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-right: 10px;
  font-weight: bold;
}

header #h_inquiry dt {
  margin-right: .5rem;
  padding: .5rem 1rem;
  border: 1px solid #fff;
  background: #d71518;
  color: #fff;
  font-size: 1.4rem;
}

header #h_option {
  display: flex;
  align-items: center;
  margin: 10px 10px 10px auto;
}

header #h_option > :not(:last-child) { margin-right: 10px;}

header #h_option a[target="_blank"]::before { display: none;}
header #h_option a[target="_blank"]::after {
  right: inherit;
  border: none;
  background: url("../img/ico-blank_b.svg") no-repeat left top / cover;
  transform: translateY(-50%);
}
header #h_option a:hover[target="_blank"]::after {
  background: url("../img/ico-blank.svg") no-repeat left top / cover;
}

@media (min-width: 769px) and (max-width: 960px){
  header #h_logo {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px){
  header > :first-child a { padding: 2.67vw 4vw;}
  header > :first-child b { font-size: 1.4rem;}

  header #h_logo {
    flex: 1;
    flex-direction: column;
    margin: 2.67vw;
  }

  header #h_logo a {
    width: 100%;
    margin-right: 0;
  }

  header #h_logo > div {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    min-height: 0%;
  }
  
  header #h_logo > div a { width: 65%;}
  header #h_logo > div a:last-child {
    width: 30%;
    margin-top: 0;
  }

  header #h_inquiry {
    flex: none;
    display: block;
    margin: 2.67vw;
  }

  header #h_inquiry dl { margin-right: 2.67vw;}
  header #h_inquiry dl:not(:last-child) { margin-bottom: 2px;}

  header #h_inquiry dt { border: 0;}

  header #h_option {
    display: block;
    width: 100%;
    margin: 0 2.67vw 2.67vw;
  }
  header #h_option > * { flex: 1;}
  
  header #h_option > :not(:last-child) { margin: 0 0 2.67vw 0;}
  
  /*
  header #nav_button {
    display: flex;
    align-items: center;
    position: fixed;
    top: 2.67vw;
    right: 2.67vw;
    z-index: 100;
    width: 10.67vw;
    height: 10.67vw;
    padding: 2.67vw;
    background: rgba(146, 93, 15, .8);
  }
  
  header #nav_button span {
    display: block;
    position: relative;
    width: 100%;
    height: 2px;
    background: #fff;
  }
  header #nav_button span::before,
  header #nav_button span::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    content: "";
  }
  header #nav_button span::before  { top: 6px;}
  header #nav_button span::after  { top: -6px;}
  
  .active header #nav_button span { animation: navBAR .4s ease-in-out forwards;}
  .active #nav_button span::before { animation: navBAR01 .4s ease-in-out forwards;}
  .active #nav_button span::after { animation: navBAR02 .4s ease-in-out forwards}
  */
}
/*
@keyframes navBAR {
	0% {
    background: rgba(255,255,255,1);
	}
	100% {
    background: rgba(255,255,255,0);
  }
}
@keyframes navBAR01 {
	0% {
    top: 6px;
	}
	60% {
    top: 0;
    transform: rotate(0);
  }
	80% {
    top: 0;
    transform: rotate(0);
  }
	100% {
    top: 0;
    transform: rotate(45deg);
  }
}
@keyframes navBAR02 {
	0% {
    top: -6px;
	}
	60% {
    top: 0;
    transform: rotate(0);
  }
	80% {
    top: 0;
    transform: rotate(0);
  }
	100% {
    top: 0;
    transform: rotate(-45deg);
  }
}
*/


/* Global Navigation */
nav { background: #333;}

nav > ul {
  display: flex;
  padding: 20px;
}

nav > ul > li:not(:first-child) {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px dotted #999;
}

nav > ul > li#sp_request { display: none;}


@media (max-width: 768px){
  nav { background: #000;}
  
  nav > ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }
  
  nav > ul > li {
    flex: 50%;
    padding: 0;
    text-align: center;
  }
  nav > ul > li:not(:first-child) {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  nav > ul > li:nth-child(even) { border-left: 1px dotted #999;}
  nav > ul > li:nth-child(-n+2) { border-bottom: 1px dotted #999;}
  nav > ul > li a {
    display: block;
    padding: 5.34vw 2.67vw;
  }
  
  nav > ul > li#sp_request { display: block;}
}


/* Footer Items */
footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}
footer ul + ul { padding: 0 20px 20px;}

footer li { margin: 0 10px;}

footer p {
  padding: 10px 0;
  background: #666;
  color: #fff;
  font-size: 1.4rem;
  text-align: center;
}


@media (max-width: 768px){
  footer ul {
    display: block;
    padding: 1.34vw 1.34vw 0;
    font-size: 1.2rem;
  }
  footer ul + ul { padding: 0 1.34vw 1.34vw;}

  footer li { margin: 0 1.34vw;}

  footer li a {
    display: inline-block;
    padding: 2.67vw;
  }

  footer p {
    padding: 2.67vw;
    font-size: 1.1rem;
  }
}


/* Breadcrumbs
#breadcrumbs ol {
  display: flex;
  align-items: center;
  margin: 10px;
  font-size: 1.2rem;
}

#breadcrumbs li {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

#breadcrumbs li:after {
	width: 6px;
	height: 6px;
	margin-left: 10px;
	border-top: 1px solid #8B968D;
	border-right: 1px solid #8B968D;
	transform: rotate(45deg);
	content:'';
}
#breadcrumbs li:last-child:after { display: none;}


@media (max-width: 768px){
  #breadcrumbs {
    overflow-x: auto;
    white-space: nowrap;
  }
  #breadcrumbs * { font-size: 1.2rem;}
  
  #breadcrumbs ol { margin: 2.67vw 0;}

  #breadcrumbs li { margin-right: 2.67vw;}

  #breadcrumbs li:after {
    width: 1.34vw;
    height: 1.34vw;
    margin-left: 2.68vw;
    border-width: .67vw;
  }
  #breadcrumbs li:last-child { padding-right: 2.67vw;}
}
 */

/* Page Top Button

@media (max-width: 768px){
}
 */



/*===== ■6. Suggest Box =====*/
#suggest {
    position: absolute;
    z-index: 2;
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 1.4rem;
    width: 50%;
    min-width: 300px;
    padding: 15px;
    text-align: left;
}
#suggest div {
    display: block;
    overflow: hidden;
    white-space: nowrap;
}
#suggest div:not(:first-of-type) { margin-bottom: 5px;}

#suggest div.select{ /* キー上下で選択した場合のスタイル */
    color: #fff;
    background-color: #3366FF;
}
#suggest div.over{ /* マウスオーバ時のスタイル */
    background-color: #99CCFF;
}


@media (max-width: 768px){
  #suggest {
      width: 50vw;
      min-width: auto;
      padding: 4vw;
  }
  #suggest div:not(:first-of-type) { margin-bottom: 1.34vw;}
}



/*===== ■7. Search Request (filtering) =====*/
#request {
  order: 1;
  width: clamp(300px, 25%, 600px);
  background: #ebebeb;
}

#request a:not(.txt):hover { color: #ccc;}
#request > ul {
//  position: sticky;
//  top: 20px;
  padding: 0 20px;
}

#request > ul > li { padding-bottom: 20px;}

#request li > em {
  display: block;
  margin: 15px 0;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}

#request li dl {
  border: 1px solid #555;
  color: #fff;
}

#request li dt {
  position: relative;
  padding: 10px 20px;
  background: #333;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
#request li dt:hover { background: #555;}

#request li dt::after {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  content: "";
}

#request li dd {
  display: grid;
  grid-template-rows: 0fr;
  background: #888;
  transition: grid-template-rows .5s ease;
}

#request li dl.dropdown dt { background: #555;}
#request li dl.dropdown dt::after { transform: translateY(-50%) rotate(-135deg);}

#request li dl.dropdown dd { grid-template-rows: 1fr;}

#request li dd > div { overflow: hidden;}

#request li dd div > p,
#request li dd div ul { margin: 10px;}
#request li dd div ul ul { margin: 10px 0;}

#request li dd ul.list_label li  { background: #333;} 


@media (max-width: 768px){
  body main { position: relative;}
  body.req_active #request { grid-template-rows: 1fr;}
  body.req_active #sp_request { background: #666;}

  #request { 
    display: grid;
    grid-template-rows: 0fr;
    position: absolute;
    top: 0;
    width: 100%;
    background: rgba(0,0,0,.6);
    transition: grid-template-rows .5s ease;
  }
  
  #request > ul {
    overflow: hidden;
    position: static;
    padding: 0 4vw;
  }
  
  #request > ul > li { padding-bottom: 4vw;}
  
  #request li > em {
    margin: 4vw 0;
    color: #fff;
  }
  
  #request li dt {
    padding: 4vw 5.34vw;
    font-weight: bold;
  }
  
  #request li dt::after {
    right: 2.67vw;
    width: 1.6vw;
    height: 1.6vw;
  }
  
  #request li dd div > p,
  #request li dd div ul { margin: 4vw;}
  #request li dd div ul ul { margin: 4vw 0;}
  
    
  #request li dd ul.list_label li { padding: 2.67vw 4vw;}
  #request li dd div > ul > li { margin-bottom: 2.67vw;}
  #request li dd div > ul > li > ul > li { margin: 0 2.67vw 2.67vw 0;}
}