@charset "UTF-8";
/* ===================================
	File Name   : common.css
	Description : Base Layout CSS
	Editor      : Bface Saeki
	Last Editor : Bface Saeki
	
	Update Description :
	[2025/06/06] カラー変更
	[2024/04/15] 新規作成

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

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

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

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



/*===== ■1. Color Definition =====*/
:root {
  --baseC: #e9ebe8;
  --mainC: #666;
  --subC: #1a1a1a;
  --accentC: #a50133;
  --accentC-dark: #730123;
  --accentC-red: #c00;
  --baseC-rgb: 233,235,232;
  --mainC-rgb: 102,102,102;
  --subC-rgb: 26,26,26;
  --accentC-rgb: 165,1,51;
  --accentC-dark-rgb: 115,1,35;
  --accentC-red-rgb: 204,0,0;
}



/*===== ■2. Global Redefinition =====*/
dt,li,strong,em,span { line-height: 1.2;}

img {
  width: 100%;
  max-width: 102.4rem;
  height: auto;
  vertical-align: bottom;
}

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



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

body {
  color: var(--subC);
	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;
  line-height: 1.5;
  font-feature-settings: "palt";
  letter-spacing: .05em;
}

@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);}}



/*===== ■4. Base Box Setting =====*/
body {
  display: grid;
  grid-template: auto 1fr auto / 30rem 1fr;
  width: 100%;
  min-height: 100svh;
  background: var(--baseC);
}

header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  border-top: .5rem solid var(--subC);
}

nav {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  padding: 3rem 0 3rem 2rem;
}

main {
  display: block;
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  padding: 2.5rem 3rem;
  background-color: #fff;
}

main > article,
main .wrapper { padding: 0 0 3rem;}

footer {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
  padding: 2rem;
  background: var(--subC);
  color: #fff;
  text-align: center;
}


@media (max-width: 768px) {
  body,
  header { display: block;}
  header,
  nav,
  main,
  footer { padding: 1rem;}
  
  main > article,
  main .wrapper { padding: 0 0 2rem;}
}



/*===== ■5. Form Setting =====*/
/* placeholder */
:placeholder-shown { color: rgba(var(--subC-rgb), .5);}
::-webkit-input-placeholder { color: rgba(var(--subC-rgb), .5);}
::-moz-placeholder { color: rgba(var(--subC-rgb), .5);}
:-ms-input-placeholder { color: rgba(var(--subC-rgb), .5);}
:focus:placeholder-shown { color: transparent;}
:focus::-webkit-input-placeholder { color: transparent;}
:focus::-moz-placeholder { color: transparent;}
:focus:-ms-input-placeholder { color: transparent;}

form {
  padding: 2rem;
}

form + form {
  border-top: 1px solid var(--subC);
}

label {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
  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: 5rem;
  margin: 0;
  padding: .5rem 1rem;
  border: 1px solid #ebebeb;
  background: #fff;
  font-size: 1.6rem;
	font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
  
  &::focus,
  &::focus,
  &::focus,
  &::focus,
  &::focus,
  &::focus { background: #fff;}
}

input[type="submit"] {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--accentC);
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
	font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
  cursor: pointer;
  outline : none;
  transition: background .25s;
  
  .glass {
    width: 5rem;
    height: 5rem;
    padding: .5rem;
    text-indent: -9999px;
    background: #333 url("../img/ico-glass.svg") no-repeat center / 65% 65%;
  }
}

@media(hover: hover) {
  input[type="submit"]:hover {
    background: var(--mainC);
    transition: background .25s;
  }
}

input[type="checkbox"],
input[type="radio"] {
  outline: none;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
   +span {
     display: grid;
     grid-template-columns: auto 1fr;
     padding-top: .3rem;
     &::before,
     &::after {
       display: inline-block;
       box-sizing: border-box;
       content: '';
     }
     &::before { margin: -.3rem 1rem 0 0;}
     &::after {
       position: absolute;
       top: 1.3rem;
       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 #fff;
    background: #ccc;
  }
  
  &::after {
    width: 1rem;
    height: 1.6rem;
    margin: 0 .75rem;
  }
}

input[type="checkbox"]:checked + span::before { background: var(--baseC);}
input[type="checkbox"]:checked + span::after {
	border: .3rem solid var(--mainC);
	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 #fff;
    border-radius: 50%;
    background: #ccc;
  }
  &::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"]{
  min-height: 5rem;
  margin: 0 auto;
  padding: .5rem;
  border: .1rem solid #333;
  background: #fff;
  font-size: 1.8rem;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
}
@media(hover: hover) {
  input[type="button"][name="reset"]:hover {
    color: #333;
    border-color: #999;
    background: #fff;
    transition: .25s all;
  }
}

.search_wrap,
.select_wrap {
  display: block;
  position: relative;
  height: 5rem;
  
  input[type="text"],
  select {
    padding: .5rem 5rem .5rem 1rem;
    font-size: 1.8rem;
  }
}

.search_wrap:has([type="submit"]) {
  height: auto;
  input[type="text"] {
    width: calc(100% - 10rem);
    padding: .5rem;
  }
  
  input[type="submit"] { width: 10rem;}
}

.select_wrap {
  border-radius: .3rem;
  background: #333;
  
  button {
    position: absolute;
    right: 0;
    width: 5rem;
    height: 5rem;
    background: #333;
    
    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 35%;
      height: 35%;
      margin-top: -10%;
      border-bottom: .2rem solid #ccc;
      border-left: .2rem 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: 1rem;
  height: 100px;
  box-shadow: .1rem .1rem .2rem rgba(0,0,0,.2) inset, 0 .1rem 0 #fff;
  border: none;
  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;}


@media (max-width: 768px) {
  form { padding: 1rem;}
  
  input[type="button"][name="reset"]{
    width: 60%;
    border-color: #666;
    background: #ccc;
    color: #666;
    font-size: 1.6rem;
  }
  
  .search_wrap input[type="text"],
  .select_wrap select { font-size: 1.6rem;}
  
  .search_wrap:has([type="submit"]) {
    input[type="text"] { width: 100%;}

    input[type="submit"] {
      position: static;
      width: 100%;
      min-height: 4rem;
      margin-top: 1rem;
    }
  }
}



/*===== ■6. Common Items Setting =====*/
/* Basic Link */
a {
	color: currentColor;
	outline: hidden;
	text-decoration: none;
  transition: all .25s;
}

a img { transition: all .25s;}

@media(hover: hover) {
  a:hover {
    color: var(--accentC);
    text-decoration: underline;
  }
  a:hover img {
    opacity: .6;
    transition: all .25s;
  }
}


/* Header Items */
header > :first-child {
  width: 25rem;
  margin: 1.5rem 3rem 0 0;
}

header #h_inquiry {
  flex: 1;
  display: flex;
  flex-direction: column;
  
  > :first-child {
    margin-bottom: 1rem;
    font-weight: bold;
    font-size: 2.6rem;
    
    span {
      margin-left: 1rem;
      font-size: 1.8rem;
      vertical-align: text-bottom;
    }
  }
  
  > div { display: flex;}
  
  dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 2rem;
  }
  
  dt {
    margin-right: .5rem;
    padding: .5rem 1rem;
    background: var(--subC);
    color: #fff;
    font-weight: bold;
    font-size: 1.4rem;
  }
}

header #h_option {
  display: flex;
  align-items: center;
  margin: 1rem 1rem 1rem auto;
	.boxlink a {
		border: none;
		background: var(--subC);
    color: #fff;
		&::before { background: #fff;}
		&::after { border-color: #fff;}
		@media(hover: hover) {
			&:hover {
				background: var(--accentC);
			}
		}
	}
}


@media (max-width: 768px){
  header > :first-child {
    width: 50%;
    margin: 0 auto;
  }

  header #h_inquiry {
    display: block;

    > :first-child {
      margin-bottom: 1rem;
      font-size: 2.4rem;
      text-align: center;

      span {
        display: block;
        margin: 0 auto;
        font-size: 1.6rem;
      }
    }

    > div { display: block;}

    dl { margin: 0 0 .5rem;}
  }

  header #h_option {
    margin: 1rem 0 0;
    
    > * { flex: 1;}
  }
}


/* Global Navigation */
body > nav > ul {
  margin-bottom: 2rem;
  
  > li {
    margin-bottom: 1rem;
    background: var(--mainC);
    
    + li:not(:has(div)) { margin-bottom: 0;}
  }
}

body > nav li {
  &:has(div) { background: var(--accentC);}
  a {
    display: block;
    position: relative;
    padding: 2rem;
    background: var(--mainC);
    line-height: 1;
    color: #fff !important;
    text-decoration: none !important;

    &::before,
    &::after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      content: "";
    }
    &::before {
      right: 1rem;
      width: .8rem;
      height: 1px;
      background: currentColor;
    }
    &::after {
      right: 1rem;
      width: .6rem;
      height: .6rem;
      border-top: 1px solid currentColor;
      border-right: 1px solid currentColor;
      transform: translateY(-50%) rotate(45deg);
    }
  }
  
  @media(hover: hover) {
    a:hover {
      opacity: .5;
    }
  }
  
  div > a {
    background: var(--accentC);
    
    &::before { display: none;}
    &::after {
      width: 1rem;
      height: calc(1rem / 2 * tan(60deg));
      clip-path: polygon(50% 0, 100% 100%, 0 100%);
      border: none;
      background: #fff;
      transform: translateY(-50%) rotate(180deg);
      transition: all .25s;
    }
    
    + ul {
      display: none;
      margin-left: 1rem;
      
      li:not(:last-child) { margin-bottom: 1px;}
      
      a { background: var(--accentC-dark);}
    }
  }
  
  div > a.open {
    &::after { transform: translateY(-50%) rotate(0deg);}
  }
}

body > nav > div a {
  display: block;
  margin: 1rem 2rem 0 0;
}


@media (max-width: 768px){
  body > nav > div a {
    display: block;
    width: 80%;
    margin: 1rem auto;
  }
}


/* Footer Items */
footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1.5rem;
}

footer li { margin: 0 1rem;}

footer p {
  font-size: 1.4rem;
}


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