@charset "utf-8";
/* CSS Document */



/*common*/
:root {
  --color00: #FFFFFF;
  --color01: #ff5c93;
  --color02: #00b4ff;
  --color03: #faf200;
  --color04: #00bfcb;
  --color05: #2c3bb8;
  
  --color06: #ff931e;
  --color07: #f15a24;
  --color08: #009c8f;
  --color09: #00b4ff;
  --color10: #ff931e;
  --color11: #ffff00;
  --color12: #e8382f;
  
  --color99: #000000;
}


html { font-size: 62.5%; font-feature-settings: "palt"; scroll-behavior: smooth;}
a { text-decoration: none;}
body { font-family: "Noto Sans JP", sans-serif; font-weight: 700; min-height: 100vh;}

a,
a:hover { transition: ease .5s;}

img { width: 100%; height: auto;}

a img { transform: scale(1); transition: ease .5s;}
a:hover img { transform: scale(1); transition: ease .5s; opacity: 0.7;}

.dela-gothic-one { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-style: normal;}
.bebas-neue { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-style: normal;}




/*PC 1680*/
@media screen and (min-width: 1680px) {


/*----------------------------*/
body { font-size: 20px; background: var(--color00); color: var(--color99);}
.wrap { width: 100%; overflow: hidden;}

.pc { display: block;}
.sp { display: none;}
.pcBr { display: inline-block;}
.spBr { display: none;}

.spMenu { display: none;}
	
a[href^="tel:"] { pointer-events: none;}

/*----------------------------*/

.wrap { position: relative;}


header { width: 100%; margin: auto; position: absolute;}
header .inner { width: 1580px; margin: auto; display: flex; justify-content: space-between; padding: 50px 0 0;}
header h1 { width: 315px; position: relative; z-index: 1000;}
header h1 a { display: block;}
header .hamburger { width: 55px; height: 40px; position: fixed; top: 50px; right: calc( (100% - 1680px) / 2 + 55px); z-index: 9100;}
header .hamburger a { display: block; height: 100%; position: relative; cursor: pointer; transition: ease .5s;}
header .hamburger a span { width: 100%; height: 4px; border-radius: 2px; background: var(--color00); position: absolute; left: 0; transition: ease .2s;}
header .hamburger a span:nth-of-type(1) { top: 0;}
header .hamburger a span:nth-of-type(2) { top: calc( 50% - 2px);}
header .hamburger a span:nth-of-type(3) { bottom: 0;}

header .hamburger.active {}
header .hamburger.active a { display: block; height: 100%; position: relative; cursor: pointer; transition: ease .5s;}
header .hamburger.active a span { width: 100%; height: 4px; border-radius: 2px; background: var(--color00); position: absolute; left: 0; transition: ease .2s;}
header .hamburger.active a span:nth-of-type(1) { top: 18px; transform: rotate(30deg);}
header .hamburger.active a span:nth-of-type(2) { top: calc( 50% - 2px); transform: translateX(-100%); opacity: 0;}
header .hamburger.active a span:nth-of-type(3) { bottom: 18px; transform: rotate(-30deg);}


footer { background: var(--color05); padding: 75px 0 60px; /*border-top: solid 1px var(--color00);*/}
footer .inner { width: 1680px; margin: 0 auto; padding: 0;}
footer .inner .banner { margin: 0 0 50px;}
footer .inner .banner ul { display: flex; justify-content: center; flex-wrap: wrap; width: 1100px; margin: auto;}
footer .inner .banner ul li { margin-left: 30px;}
footer .inner .banner ul li:nth-child(1),
footer .inner .banner ul li:nth-child(4) { margin-left: 0;}
footer .inner .banner ul li:nth-child(4),
footer .inner .banner ul li:nth-child(5) { margin-top: 40px;}
footer .inner .banner ul li a { display: block;}
footer .inner .banner ul li a img { height: 70px;}
footer .inner .sns { margin: 50px 0;}
footer .inner .sns ul { display: flex; justify-content: center; flex-wrap: wrap;}
footer .inner .sns ul li { width: 50px; margin: 0 20px;}
footer .inner .sns ul li a { display: block;}

footer .cp { width: 1500px; margin: auto; text-align: center; font-size: 14px; color: var(--color00);}



#page-top { position: fixed; bottom: 40px; right: 40px; z-index: 999;}
#page-top a { text-decoration: none; color: var(--color00); width: 70px; display: block; transition: all .3s ease;}
#page-top a:hover { opacity: 0.5;}
#page-top a:hover img { transform: scale(1);}


.spMenu { transform: translateX(200%); opacity: 0; width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: block; transition: all .3s ease;}
.spMenu.active { transform: translateX(0); opacity: 1.0; width: 100%; height: 100%; background: var(--color01); position: fixed; top: 0; left: 0; display: block; z-index: 9000;}
.spMenu .inner { width: 1680px; height: 100%; padding: 50px; margin: auto; position: relative;}
.spMenu .inner .logo {  width: 315px;}
.spMenu .inner ul { width: 1380px; padding: 0; display: flex; flex-wrap: wrap; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.spMenu .inner ul li { width: 60%; font-size: 40px; font-weight: 600; margin-bottom: 40px; padding-left: 1.5em; position: relative;}
.spMenu .inner ul li:nth-child(2n+2) { width: 40%;}
.spMenu .inner ul li::before { content: "▼"; position: absolute; top: 0; left: 0; transform: rotate(-90deg); color: var(--color00);}
.spMenu .inner ul li a { color: var(--color00);}
.spMenu .inner ul li a:hover {}



}


/*PC 1679*/
@media print, screen and (min-width: 768px) and ( max-width: 1679px) {


/*----------------------------*/
body { font-size: 1.19vw; background: var(--color00); color: var(--color99);}
.wrap { width: 100%; overflow: hidden;}

.pc { display: block;}
.sp { display: none;}
.pcBr { display: inline-block;}
.spBr { display: none;}

.spMenu { display: none;}

a[href^="tel:"] { pointer-events: none;}

/*----------------------------*/

.wrap { position: relative;}


header { width: 100%; margin: auto; position: absolute;}
header .inner { width: 94.048vw; margin: auto; display: flex; justify-content: space-between; padding: 2.976vw 0 0;}
header h1 { width: 18.75vw; position: relative; z-index: 1000;}
header h1 a { display: block;}
header .hamburger { width: 3.274vw; height: 2.381vw; position: fixed; top: 2.976vw; right: calc( (100% - 100vw) / 2 + 3.274vw); z-index: 9100;}
header .hamburger a { display: block; height: 100%; position: relative; cursor: pointer; transition: ease .5s;}
header .hamburger a span { width: 100%; height: 0.238vw; border-radius: 0.119vw; background: var(--color00); position: absolute; left: 0; transition: ease .2s;}
header .hamburger a span:nth-of-type(1) { top: 0;}
header .hamburger a span:nth-of-type(2) { top: calc( 50% - 0.119vw);}
header .hamburger a span:nth-of-type(3) { bottom: 0;}

header .hamburger.active {}
header .hamburger.active a { display: block; height: 100%; position: relative; cursor: pointer; transition: ease .5s;}
header .hamburger.active a span { width: 100%; height: 0.238vw; border-radius: 0.119vw; background: var(--color00); position: absolute; left: 0; transition: ease .2s;}
header .hamburger.active a span:nth-of-type(1) { top: 1.071vw; transform: rotate(30deg);}
header .hamburger.active a span:nth-of-type(2) { top: calc( 50% - 0.119vw); transform: translateX(-100%); opacity: 0;}
header .hamburger.active a span:nth-of-type(3) { bottom: 1.071vw; transform: rotate(-30deg);}


footer { background: var(--color05); padding: 4.464vw 0 3.571vw; /*border-top: solid 1px var(--color00);*/}
footer .inner { width: 100vw; margin: 0 auto; padding: 0;}
footer .inner .banner { margin: 0 0 2.976vw;}
footer .inner .banner ul { display: flex; justify-content: center; flex-wrap: wrap; width: 65.476vw; margin: auto;}
footer .inner .banner ul li { margin-left: 1.786vw;}
footer .inner .banner ul li:nth-child(1),
footer .inner .banner ul li:nth-child(4) { margin-left: 0;}
footer .inner .banner ul li:nth-child(4),
footer .inner .banner ul li:nth-child(5) { margin-top: 2.381vw;}
footer .inner .banner ul li a { display: block;}
footer .inner .banner ul li a img { height: 4.167vw;}
footer .inner .sns { margin: 2.976vw 0;}
footer .inner .sns ul { display: flex; justify-content: center; flex-wrap: wrap;}
footer .inner .sns ul li { width: 2.976vw; margin: 0 1.19vw;}
footer .inner .sns ul li a { display: block;}

footer .cp { width: 89.286vw; margin: auto; text-align: center; font-size: 0.833vw; color: var(--color00);}



#page-top { position: fixed; bottom: 2.381vw; right: 2.381vw; z-index: 999;}
#page-top a { text-decoration: none; color: var(--color00); width: 4.167vw; display: block; transition: all .3s ease;}
#page-top a:hover { opacity: 0.5;}
#page-top a:hover img { transform: scale(1);}


.spMenu { transform: translateX(200%); opacity: 0; width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: block; transition: all .3s ease;}
.spMenu.active { transform: translateX(0); opacity: 1.0; width: 100%; height: 100%; background: var(--color01); position: fixed; top: 0; left: 0; display: block; z-index: 9000;}
.spMenu .inner { width: 100vw; height: 100%; padding: 2.976vw; margin: auto; position: relative;}
.spMenu .inner .logo {  width: 18.75vw;}
.spMenu .inner ul { width: 82.143vw; padding: 0; display: flex; flex-wrap: wrap; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.spMenu .inner ul li { width: 60%; font-size: 2.381vw; font-weight: 600; margin-bottom: 2.381vw; padding-left: 1.5em; position: relative;}
.spMenu .inner ul li:nth-child(2n+2) { width: 40%;}
.spMenu .inner ul li::before { content: "▼"; position: absolute; top: 0; left: 0; transform: rotate(-90deg); color: var(--color00);}
.spMenu .inner ul li a { color: var(--color00);}
.spMenu .inner ul li a:hover {}



}




/*sp*/
@media only screen and (max-width: 767px) {





/*----------------------------*/
body { font-size: 3.125vw; background: var(--color00); color: var(--color99);}
.wrap { width: 100%; overflow: hidden;}

.pc { display: none;}
.sp { display: block;}
.pcBr { display: none;}
.spBr { display: inline-block;}

.spMenu { display: none;}
	
a[href^="tel:"] { pointer-events: none;}

/*----------------------------*/

.wrap { position: relative;}


header { width: 100%; margin: auto; position: absolute;}
header .inner { width: 90.625vw; margin: auto; display: flex; justify-content: space-between; padding: 4.688vw 0 0;}
header h1 { width: 39.375vw; position: relative; z-index: 1000;}
header h1 a { display: block;}
header .hamburger { width: 6.25vw; height: 4.688vw; position: fixed; top: 4.688vw; right: calc( (100% - 90.625vw) / 2); z-index: 9100;}
header .hamburger a { display: block; height: 100%; position: relative; cursor: pointer; transition: ease .5s;}
header .hamburger a span { width: 100%; height: 0.625vw; border-radius: 0.313vw; background: var(--color00); position: absolute; left: 0; transition: ease .2s;}
header .hamburger a span:nth-of-type(1) { top: 0;}
header .hamburger a span:nth-of-type(2) { top: calc( 50% - 0.313vw);}
header .hamburger a span:nth-of-type(3) { bottom: 0;}

header .hamburger.active {}
header .hamburger.active a { display: block; height: 100%; position: relative; cursor: pointer; transition: ease .5s;}
header .hamburger.active a span { width: 100%; height: 0.625vw; border-radius: 0.313vw; background: var(--color00); position: absolute; left: 0; transition: ease .2s;}
header .hamburger.active a span:nth-of-type(1) { top: 2.031vw; transform: rotate(30deg);}
header .hamburger.active a span:nth-of-type(2) { top: calc( 50% - 0.313vw); transform: translateX(-100%); opacity: 0;}
header .hamburger.active a span:nth-of-type(3) { bottom: 2.031vw; transform: rotate(-30deg);}


footer { background: var(--color05); padding: 7.813vw 0 6.25vw; /*border-top: solid 1px var(--color00);*/}
footer .inner { width: 100%; margin: 0 auto; padding: 0;}
footer .inner .banner { margin: 0 0 7.813vw;}
footer .inner .banner ul { display: flex; justify-content: center; flex-wrap: wrap; width: 93.75vw; margin: auto;}
footer .inner .banner ul li { margin: 0 0.781vw 0; width: 29.063vw; height: auto;}
footer .inner .banner ul li:nth-child(4) { margin-top: 3.125vw;}
footer .inner .banner ul li:nth-child(5) { margin-top: 3.125vw; width: 38.438vw;}
footer .inner .banner ul li a { display: block;}
footer .inner .banner ul li a img { height: auto;}
footer .inner .sns { margin: 6.25vw 0;}
footer .inner .sns ul { display: flex; justify-content: center; flex-wrap: wrap;}
footer .inner .sns ul li { width: 6.25vw; margin: 0 3.125vw;}
footer .inner .sns ul li a { display: block;}

footer .cp { width: 100%; margin: auto; text-align: center; font-size: 2.5vw; color: var(--color00);}



#page-top { position: fixed; bottom: 4.688vw; right: 4.688vw; z-index: 999;}
#page-top a { text-decoration: none; color: var(--color00); width: 10.938vw; display: block; transition: all .3s ease;}
#page-top a:hover { opacity: 0.5;}
#page-top a:hover img { transform: scale(1);}


.spMenu { transform: translateX(200%); opacity: 0; width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: block; transition: all .3s ease;}
.spMenu.active { transform: translateX(0); opacity: 1.0; width: 100%; height: 100%; background: var(--color01); position: fixed; top: 0; left: 0; display: block; z-index: 9000;}
.spMenu .inner { width: 100%; height: 100%; padding: 4.688vw 7.813vw; margin: auto; position: relative;}
.spMenu .inner .logo { width: 39.375vw; margin-bottom: 9.375vw; margin-left: -3.125vw;}
.spMenu .inner ul { width: 90%; padding: 0; display: flex; flex-wrap: wrap; margin: auto;}
.spMenu .inner ul li { width: 100%; font-size: 3.125vw; font-weight: 600; margin-bottom: 3.125vw; padding-left: 1.5em; position: relative;}
.spMenu .inner ul li::before { content: "▼"; position: absolute; top: 0; left: 0; transform: rotate(-90deg); color: var(--color00);}
.spMenu .inner ul li a { color: var(--color00);}
.spMenu .inner ul li a:hover {}

.spMenu .inner ul li:nth-of-type(1) { order: 1;}
.spMenu .inner ul li:nth-of-type(2) { order: 7;}
.spMenu .inner ul li:nth-of-type(3) { order: 2;}
.spMenu .inner ul li:nth-of-type(4) { order: 8;}
.spMenu .inner ul li:nth-of-type(5) { order: 3;}
.spMenu .inner ul li:nth-of-type(6) { order: 9;}
.spMenu .inner ul li:nth-of-type(7) { order: 4;}
.spMenu .inner ul li:nth-of-type(8) { order: 10;}
.spMenu .inner ul li:nth-of-type(9) { order: 5;}
.spMenu .inner ul li:nth-of-type(10) { order: 11;}
.spMenu .inner ul li:nth-of-type(11) { order: 6;}


}




@media screen and (width: 640px) {


/*----------------------------*/
body { font-size: 20px; background: var(--color00); color: var(--color99);}
.wrap { width: 100%; overflow: hidden;}

.pc { display: none;}
.sp { display: block;}
.pcBr { display: none;}
.spBr { display: inline-block;}

.spMenu { display: none;}
	
a[href^="tel:"] { pointer-events: none;}

/*----------------------------*/

.wrap { position: relative;}


header { width: 100%; margin: auto; position: absolute;}
header .inner { width: 580px; margin: auto; display: flex; justify-content: space-between; padding: 30px 0 0;}
header h1 { width: 252px; position: relative; z-index: 1000;}
header h1 a { display: block;}
header .hamburger { width: 40px; height: 30px; position: fixed; top: 30px; right: calc( (100% - 580px) / 2); z-index: 9100;}
header .hamburger a { display: block; height: 100%; position: relative; cursor: pointer; transition: ease .5s;}
header .hamburger a span { width: 100%; height: 4px; border-radius: 2px; background: var(--color00); position: absolute; left: 0; transition: ease .2s;}
header .hamburger a span:nth-of-type(1) { top: 0;}
header .hamburger a span:nth-of-type(2) { top: calc( 50% - 2px);}
header .hamburger a span:nth-of-type(3) { bottom: 0;}

header .hamburger.active {}
header .hamburger.active a { display: block; height: 100%; position: relative; cursor: pointer; transition: ease .5s;}
header .hamburger.active a span { width: 100%; height: 4px; border-radius: 2px; background: var(--color00); position: absolute; left: 0; transition: ease .2s;}
header .hamburger.active a span:nth-of-type(1) { top: 13px; transform: rotate(30deg);}
header .hamburger.active a span:nth-of-type(2) { top: calc( 50% - 2px); transform: translateX(-100%); opacity: 0;}
header .hamburger.active a span:nth-of-type(3) { bottom: 13px; transform: rotate(-30deg);}


footer { background: var(--color05); padding: 50px 0 40px; /*border-top: solid 1px var(--color00);*/}
footer .inner { width: 100%; margin: 0 auto; padding: 0;}
footer .inner .banner { margin: 0 0 50px;}
footer .inner .banner ul { display: flex; justify-content: center; flex-wrap: wrap; width: 600px; margin: auto;}
footer .inner .banner ul li { margin: 0 5px 0; width: 186px; height: auto;}
footer .inner .banner ul li:nth-child(4) { margin-top: 20px;}
footer .inner .banner ul li:nth-child(5) { margin-top: 20px; width: 246px;}
footer .inner .banner ul li a { display: block;}
footer .inner .banner ul li a img { height: auto;}
footer .inner .sns { margin: 40px 0;}
footer .inner .sns ul { display: flex; justify-content: center; flex-wrap: wrap;}
footer .inner .sns ul li { width: 40px; margin: 0 20px;}
footer .inner .sns ul li a { display: block;}

footer .cp { width: 100%; margin: auto; text-align: center; font-size: 16px; color: var(--color00);}



#page-top { position: fixed; bottom: 30px; right: 30px; z-index: 999;}
#page-top a { text-decoration: none; color: var(--color00); width: 70px; display: block; transition: all .3s ease;}
#page-top a:hover { opacity: 0.5;}
#page-top a:hover img { transform: scale(1);}


.spMenu { transform: translateX(200%); opacity: 0; width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: block; transition: all .3s ease;}
.spMenu.active { transform: translateX(0); opacity: 1.0; width: 100%; height: 100%; background: var(--color01); position: fixed; top: 0; left: 0; display: block; z-index: 9000;}
.spMenu .inner { width: 100%; height: 100%; padding: 30px 50px; margin: auto; position: relative;}
.spMenu .inner .logo { width: 252px; margin-bottom: 60px; margin-left: -20px;}
.spMenu .inner ul { width: 90%; padding: 0; display: flex; flex-wrap: wrap; margin: auto;}
.spMenu .inner ul li { width: 100%; font-size: 20px; font-weight: 600; margin-bottom: 20px; padding-left: 1.5em; position: relative;}
.spMenu .inner ul li::before { content: "▼"; position: absolute; top: 0; left: 0; transform: rotate(-90deg); color: var(--color00);}
.spMenu .inner ul li a { color: var(--color00);}
.spMenu .inner ul li a:hover {}

.spMenu .inner ul li:nth-of-type(1) { order: 1;}
.spMenu .inner ul li:nth-of-type(2) { order: 7;}
.spMenu .inner ul li:nth-of-type(3) { order: 2;}
.spMenu .inner ul li:nth-of-type(4) { order: 8;}
.spMenu .inner ul li:nth-of-type(5) { order: 3;}
.spMenu .inner ul li:nth-of-type(6) { order: 9;}
.spMenu .inner ul li:nth-of-type(7) { order: 4;}
.spMenu .inner ul li:nth-of-type(8) { order: 10;}
.spMenu .inner ul li:nth-of-type(9) { order: 5;}
.spMenu .inner ul li:nth-of-type(10) { order: 11;}
.spMenu .inner ul li:nth-of-type(11) { order: 6;}



}