@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap');

@font-face {font-family: 'SS-RyuminPro';
  font-display: swap;
  font-weight: normal;
  src: url('../font/A-OTF-RyuminPro-Regular-ss.woff2') format("woff2"),
       url('../font/A-OTF-RyuminPro-Regular-ss.woff') format("woff");
}
@font-face {font-family: 'SS-RyuminPro';
  font-display: swap;
  font-weight: 500;
  src: url('../font/A-OTF-RyuminPro-Medium-ss.woff2') format("woff2"),
       url('../font/A-OTF-RyuminPro-Medium-ss.woff') format("woff");
}
@font-face {font-family: "HiraginoSans-W3";
  font-display: swap;
  font-weight: 300;
  src: local(Hiragino Sans),
       local(HiraginoSans-W3);
}
:root {
  --ST: YakuHanJPs_Noto,'Noto Sans JP','Noto Sans CJK JP',YuGothic,'Yu Gothic','HiraginoSans-W3',Meiryo,sans-serif;

  --serif: 'SS-RyuminPro',serif;

}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / HTML ->                     */
/* =====>=====>=====>=====>=====>=====>===== */

html {
  font-family:
    'Noto Sans JP',
    'Noto Sans CJK JP',
    YuGothic,'Yu Gothic',
    'HiraginoSans-W3',
    Meiryo,
    sans-serif;
  line-height: 1;
   -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  scroll-behavior: smooth;
}

/*===== IE =====*/
main {
  display: block;
}
::-ms-expand {
  display: none;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / GENERAL ->                  */
/* =====>=====>=====>=====>=====>=====>===== */

html {
  box-sizing: border-box;
}
*,
::before,::after {
  box-sizing: inherit;
}
html,body,a,
h1,h2,h3,h4,h5,h6,
p,div,span,iframe,
address,small,
ol,ul,li,dl,dt,dd,
table,thead,tbody,tfoot,tr,th,td,caption,
details,figure,figcaption,audio,canvas,video,
b,em,strong,blockquote,q,
form,fieldset {
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: 400;
  font-size: 100%;
  vertical-align: baseline;
  border: 0;
}
body {
  text-align: justify;
}
p {
  line-height: 1.7;
}
ol,ul {
  list-style: none;
}
details,
img {
  display: block;
}
img {
  pointer-events: none;
}
a {
  line-height: 1;
  text-decoration: none;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
strong {
  font-weight: inherit;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / GENERAL CLASS ->            */
/* =====>=====>=====>=====>=====>=====>===== */

.call {
  pointer-events: none;
}
.fx {
  display: flex;justify-content: space-between;align-items: flex-start;
  flex-wrap: wrap;
}
.gd {
  display: grid;place-items: center;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / FORM ->                     */
/* =====>=====>=====>=====>=====>=====>===== */

button,
label {
  cursor: pointer;
}
button,
input,select,textarea {
   -moz-appearance: none;
   -webkit-appearance: none;
  appearance: none;
  outline: 0;
}
button {
  display: block;
  border: 0;
}
input,select,textarea {
  vertical-align: middle;
}
input[type="button"],
input[type="email"],
input[type="tel"],
input[type="text"],
select,textarea {
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--std-clr);
  font-size: 16px!important;
  border: 0;
  border-radius: 0;
  background: transparent;
}
input[type="submit"] {
  border: 0;
}
::placeholder {
  color: #aaa;
}

/*===== select =====*/
select {
  color: inherit;
  font-size: inherit;
  text-indent: .01px;
  text-overflow: '';
  background: none transparent;
  outline: none;
   -moz-appearance: button;
   -webkit-appearance: button;
  appearance: button;
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #828c9a;
}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / MOTION ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

@media screen and (min-width:1024px){

.alpha,
.alpha img {
  transition: opacity .3s ease-in-out;
  cursor: pointer;
}
.alpha:hover,
.alpha:hover img {
  opacity: .7;
}

}



/* =====<=====<=====<=====<=====<=====<===== */
/* !<- ORDERED / MOBILE ->                   */
/* =====>=====>=====>=====>=====>=====>===== */

#SPhead,
.hidePC {
  display: none;
}

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

.call {
  pointer-events: auto;
}

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

img {
  width: 100%;height: auto!important;
  max-width: 100%;
}
.hidePC {
  display: block;
}

}