@charset "UTF-8";
/* CSS Document */
body {
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",'Noto Sans JP', sans-serif;
font-weight: 400;
color: #1a1a1a;
font-feature-settings: "palt";
letter-spacing: 1px;
-webkit-text-size-adjust: none;
}
a {
display: block;
}
img {
max-width: 100%;
}
img:not([width]) {
width: 100%;
}
html {
font-size: 62.5%;
}
.wrap {
width: 100%;
color: #333;
line-height: 1.5em;
margin: 0 auto;
}
.pcOnly {
display: block;
}
.spOnly {
display: none;
}
/*SP*/
@media screen and (max-width: 750px) {
  a[href^="tel:"]{pointer-events: none;}
  .wrap {
  max-width: 750px;
  }
  .pcOnly {
  display: none;
  }
  .spOnly {
  display: block;
  }
}


/*========================================
reCAPTCHAバッジを非表示
========================================*/
.grecaptcha-badge { visibility: hidden; }


/*========================================
フォント指定
========================================*/
@font-face {
	font-display:swap;
  font-family:'Noto Sans JP', sans-serif;
  font-style:normal;
	font-weight: 400;
	src: url("../woff2/NotoSansJP-Regular_s.woff2") format("woff2"),
}
@font-face {
	font-display:swap;
  font-family:'Noto Sans JP', sans-serif;
  font-style:normal;
	font-weight: 500;
	src: url("../woff2/NotoSansJP-Medium_s.woff2") format("woff2"),

}
@font-face {
	font-display:swap;
  font-family:'Cabin', sans-serif;
  font-style:normal;
	font-weight: 500;
	src: url("../woff2/Cabin-Medium_s.woff2") format("woff2"),
}
@font-face {
	font-display:swap;
  font-family:'Cabin', sans-serif;
  font-style:normal;
	font-weight: 600;
	src: url("../woff2/Cabin-Bold_s.woff2") format("woff2"),
}



/*========================================
hover
========================================*/
.hover {
background-color: #FFF;
background-size: 200% 100%;
transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s;
background-image: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, .5) 50%);
z-index: 1;
}
.hover.gray {
background-image: linear-gradient(to right, transparent 50%, rgba(180, 180, 180, .5) 50%);
}
.hover:hover {
background-position: -100% 100%;
overflow: hidden;
}
.hover img {
mix-blend-mode: multiply;
}

/*========================================
色変更
========================================*/
.background1 {
background: #E73656;
}
.background2 {
background: #EB6EA5;
}
.background3 {
background: #F18E2C;
}
.background4 {
background: #0056A7;
}
.background5 {
background: #00A9C0;
}
.background6 {
background: #6E60A8;
}
.background7 {
background: #009B63;
}
.background8 {
background: #7EC04D;
}
.background9 {
background: #30363A;
}
.color1 {
color: #E73656;
}
.color2 {
color: #EB6EA5;
}
.color3 {
color: #F18E2C;
}
.color4 {
color: #0056A7;
}
.color5 {
color: #00A9C0;
}
.color6 {
color: #6E60A8;
}
.color7 {
color: #009B63;
}
.color8 {
color: #7EC04D;
}
.color9 {
color: #30363A;
}
.firstLetter1::first-letter {
color: #E73656;
}
.firstLetter2::first-letter {
color: #EB6EA5;
}
.firstLetter3::first-letter {
color: #F18E2C;
}
.firstLetter4::first-letter {
color: #0056A7;
}
.firstLetter5::first-letter {
color: #00A9C0;
}
.firstLetter6::first-letter {
color: #6E60A8;
}
.firstLetter7::first-letter {
color: #009B63;
}
.firstLetter8::first-letter {
color: #7EC04D;
}
.firstLetter9::first-letter {
color: #30363A;
}

.border1 {
border-color: #E73656;
}
.border2 {
border-color: #EB6EA5;
}
.border3 {
border-color: #F18E2C;
}
.border4 {
border-color: #0056A7;
}
.border5 {
border-color: #00A9C0;
}
.border6 {
border-color: #6E60A8;
}
.border7 {
border-color: #009B63;
}
.border8 {
border-color: #7EC04D;
}
.border9 {
border-color: #30363A;
}
.fill1 {
fill: #E73656;
}
.fill2 {
fill: #EB6EA5;
}
.fill3 {
fill: #F18E2C;
}
.fill4 {
fill: #0056A7;
}
.fill5 {
fill: #00A9C0;
}
.fill6 {
fill: #6E60A8;
}
.fill7 {
fill: #009B63;
}
.fill8 {
fill: #7EC04D;
}
.fill9 {
fill: #30363A;
}
.colorHover {
background-color: #FFF;
background-size: 200% 100%;
transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s;
z-index: 1;
}
.colorHover1 {
background-image: linear-gradient(to right, transparent 50%, rgba(231, 54, 86, .3) 50%);
}
.colorHover2 {
background-image: linear-gradient(to right, transparent 50%, rgba(235, 110, 165, .3) 50%);
}
.colorHover3 {
background-image: linear-gradient(to right, transparent 50%, rgba(241, 142, 44, .3) 50%);
}
.colorHover4 {
background-image: linear-gradient(to right, transparent 50%, rgba(0, 86, 167, .3) 50%);
}
.colorHover5 {
background-image: linear-gradient(to right, transparent 50%, rgba(0, 169, 192, .3) 50%);
}
.colorHover6 {
background-image: linear-gradient(to right, transparent 50%, rgba(110, 96, 168, .3) 50%);
}
.colorHover7 {
background-image: linear-gradient(to right, transparent 50%, rgba(0, 155, 99, .3) 50%);
}
.colorHover8 {
background-image: linear-gradient(to right, transparent 50%, rgba(126, 192, 77, .3) 50%);
}
.colorHover9 {
background-image: linear-gradient(to right, transparent 50%, rgba(48, 54, 58, .3) 50%);
}
.colorHover:hover {
background-position: -100% 100%;
}
.colorHover img {
mix-blend-mode: multiply;
}

.colorOn {
background-color: #FFF;
background-size: 100%;
z-index: 1;
}
.colorOn1 {
background: rgba(231, 54, 86, .3);
}
.colorOn2 {
background: rgba(235, 110, 165, .3);
}
.colorOn3 {
background: rgba(241, 142, 44, .3);
}
.colorOn4 {
background: rgba(0, 86, 167, .3);
}
.colorOn5 {
background: rgba(0, 169, 192, .3);
}
.colorOn6 {
background: rgba(110, 96, 168, .3);
}
.colorOn7 {
background: rgba(0, 155, 99, .3);
}
.colorOn8 {
background: rgba(126, 192, 77, .3);
}
.colorOn9 {
background: rgba(48, 54, 58, .3);
}

/*========================================
傾き
========================================*/
.leaning {
position: relative;
z-index: 0;
}
.leaning::after {
content: '';
position: absolute;
left:0;
top: 0;
transform: skewY(-8deg);
transform-origin: top left;
z-index: -1;
width:100%;
height:100%;
}
.leaning.gray {background-color: #eaeaea;}
.leaning.gray::after {background-color: #eaeaea;}
.leaning.white {background-color: #FFFFFF;}
.leaning.white::after {background-color: #FFFFFF;}





/*========================================
Nav
========================================*/
.navList {
position: fixed;
top: 50px;
right: -12vw;
z-index:9900;
}
.navList li {
font-size: min(1.6vw,16px);
line-height: 1.4;
font-family: 'Cabin', sans-serif;
text-align: right;
margin-bottom: 0.8em;
}
.navList li:nth-child(1) {
margin-bottom: 1em;
}
.navList li a {
display: block;
color: #999DA0;
text-decoration: none;
}
.navList li a:hover {
text-decoration: underline;
}
.navList li img {
width: min(5.5vw,60px);
}
@media screen and (max-width: 750px) {
  .navList {
  position:static;
  }
  .navList li {
  font-size: 16px;
  line-height: 1.4em;
  text-align: center;
  margin-bottom: 2em;
  }
  .navList li:nth-child(1) {
  margin-bottom: 2em;
  }
  .navList li a {
  color: #FFF;
  text-decoration: none;
  }
  .navList li img {
  width: 60%;
  margin: 0 auto;
  }
  .navList li figure {
  width: 18%;
  margin: 0 auto;
  }

  .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.9);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s ease-in-out;
  z-index: 9980;
  }
  .open .modal {
  visibility: visible;
  opacity: 1;
  }
  .modal li {
  font-size: 16px;
  line-height: 1.4em;
  text-align: center;
  margin-bottom: 2em;
  }
  .modal li a {
  color: #FFF;
  text-decoration: none;
  }
  .modal img {
  width: 60%;
  margin: 0 auto;
  }
  .modal figure {
  width: 18%;
  margin: 0 auto;
  }
}

/*SP Nav*/
@media screen and (max-width: 750px) {
  .menuBtn,
  .menuBtn span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  }
  .menuBtn {
  width: 34px;
  height: 34px;
  background-color: #000;
  border: none;
  appearance: none;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9990;
  /*animation:menuBtn .4s ease-out 2s both;*/
  }
  @keyframes menuBtn {
    from {opacity: 0;}
    to {opacity: 1;}
    }
  .menuBtn span {
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  }
  .menuBtn span:nth-of-type(1) {
  left: 9px;
  top: 10px;
  }
  .menuBtn span:nth-of-type(2) {
  left: 9px;
  top:16px;
  }
  .menuBtn span:nth-of-type(3) {
  left: 9px;
  bottom: 10px;
  }
  .menuBtn.active span:nth-of-type(1) {
  transform: translateY(6px) rotate(-45deg);
  }
  .menuBtn.active span:nth-of-type(2) {
  opacity: 0;
  }
  .menuBtn.active span:nth-of-type(3) {
  transform: translateY(-6px) rotate(45deg);
  }

  .contactBtn {
  width: 34px;
  height: 34px;
  position: fixed;
  top: 34px;
  right: 0;
  z-index: 9990;
  /*animation:menuBtn .4s ease-out 2s both;*/
  }
}

/*========================================
pankuzu
========================================*/
.pankuzu a {
color: #333;
text-decoration: none;
}
.pankuzu a:hover {
text-decoration: underline;
}
.pankuzu ul {
width: 88%;
max-width:1200px;
margin: 0 auto;
padding: 1em 1em 2em 1em;
overflow: hidden;
}
.pankuzu li {
font-size: 12px;
line-height: 1.2em;
display: inline-block;
position: relative;
padding-right: calc(12px + 12px);
margin-right: 12px;
}
.pankuzu li::before {
content: "＞";
width: 1em;
height: 1em;
line-height: 1;
text-align: center;
font-size: 1em;
color: inherit;
position: absolute;
top: 50%;
right: 0px;
transform: translateY(-50%);
}
.pankuzu li:last-child::before {
content: "";
}
/*SP pankuzu*/
@media screen and (max-width: 750px) {
.pankuzu ul {
width: 88%;
margin: 0 auto;
padding: 1em;
overflow: hidden;
}
}

/*========================================
footer
========================================*/
footer {
width: 100%;
background-color: #1a1a1a;
color: #FFF;
}
footer a {
color: #FFF;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
footer .inner {
max-width: 1060px;
margin: 0 auto;
padding: 60px 5%;
}
footer .flex {
display: flex;
justify-content: space-between;
}
footer .footLogo {
width: 224px;
margin-bottom: 30px;
}
footer dl {
margin-left: 30px;
padding-left: 30px;
border-left: #666666 1px solid;
}
footer dl:first-child {
margin-left: 0;
padding-left: 0;
border: none;
}
footer dt {
font-size: 16px;
line-height: 1.4em;
margin-bottom:0.5em;
font-weight: bold;
}
footer dd {
margin-bottom: 3em;
}
footer dd li {
font-size: 12px;
line-height: 1.4em;
margin-bottom: 0.8em;
font-weight: normal;
}
footer dd figure {
width: 120px;
padding: 2em 0;
}
footer address {
width: 100%;
border-top: #666666 1px solid;
font-size: 12px;
line-height: 1.4em;
font-style: normal;
text-align: center;
padding: 2em 0;
}
/*SP footer*/
@media screen and (max-width: 750px) {
footer .inner {
max-width: 88%;
margin: 0 auto;
padding: 6% 0;
}
footer .flex {
display: block;
}
footer .footLogo {
width: 35%;
margin-bottom: 5%;
}
footer dl {
margin-left: 0;
padding-left: 0;
border-left: none;
}
footer dl:first-child {
margin-left: 0;
padding-left: 0;
border: none;
}
footer dl:last-child {
border: none;
}
footer dt {
font-size: 18px;
line-height: 1.4em;
margin-bottom:0.8em;
font-weight: bold;
}
footer dd {
border-bottom: #666666 1px solid;
margin-bottom: 2em;
padding-bottom: 1.8em;
}
footer dl:last-child dd:last-child {
border: none;
padding-bottom: 0;
}
footer dd li {
font-size: 12px;
line-height: 1.4em;
margin-bottom: 0.8em;
font-weight: normal;
}
footer dd figure {
width: 25%;
padding: 2em 0;
}
footer address {
width: 100%;
border-top: #666666 1px solid;
font-size: 12px;
line-height: 1.4em;
font-style: normal;
text-align: center;
padding: 2em 0;
}
}