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

html {
font-size: 62.5%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
font-size: 1.6rem;
color: #303030;
font-family: "Hiragino Sans", "Yu Gothic medium", YuGothic, Meiryo, "sans-serif";
background: #FFF;
margin: 0;
}
img{
width:100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
video, iframe {
width: 100%;
vertical-align: bottom;
}
a, a:hover {
text-decoration: none;
color: #111;
}
i {
font-size: 0.8em;
padding-right: 5px;
}
p {
word-break: break-all;
}
.box {
width: 90%;
max-width: 1280px;
margin: 0 auto;
}
.box_m {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
.head2 {
text-align: center;
}
.head2 span {
display: block;
color: #CB000B;
font-family: Helvetica, YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
font-weight: bold;
}
a.btn {
display: block;
margin: 0 auto;
position: relative;
}
a.red {
background: #CB000B;
color: #fff;
}
a.blue {
background: #00267F;
color: #fff;
}
a.btn:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
content: '\f054';
font-family: "Font Awesome 5 Pro";
}
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fadeBlur{
animation-name:fadeBlurAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeBlurAnime{
0% {
opacity: 0;
filter: blur(5px);
}
60% {
filter: blur(0);
}
100% {
opacity: 1;
}
}
.fadeUpTrigger, .fadeBlurTrigger{
opacity: 0;
}

#header{
position: fixed;
width:100%;
z-index: 1000;
background: #fff;
box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.1);
}
#header.UpMove{
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-100px);
}
}
#header.DownMove{
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#header > div {
position: relative;
}

.el_humburger {
position: absolute;
top: 0;
right: 0;
height: 100%;
box-sizing: border-box;
z-index: 20;
cursor: pointer;
pointer-events: auto;
text-align: center;
background: #00267F;
}
.el_humburger_wrapper {
display: inline-block;
}
.js_humburgerOpen .el_humburger_text.el_humburger_text__menu {
display: none;
}
.el_humburger_text.el_humburger_text__close {
display: none;
}
.js_humburgerOpen .el_humburger_text.el_humburger_text__close {
display: block;
}
.el_humburger span.el_humburger_bar {
display: block;
width: 100%;
background: #fff;
transition: all .2s ease-in-out;
}
.el_humburger span.el_humburger_bar:last-child {
margin-bottom: 0;
}
.js_humburgerOpen .el_humburger span.el_humburger_bar {
background: #fff;
}
.js_humburgerOpen .el_humburger span.el_humburger_bar.middle {
opacity: 0;
}
.navi {
position: fixed;
top: 0;
right: 0;
height: 100vh;
background: #00267F;
z-index: 19;
transition: all 300ms ease-out;
transform:translateZ(0) translateX(100%);
display: grid;
place-items: center;
overflow: auto;
color: #fff;
}
.navi > div {
width: 90%;
}
.js_humburgerOpen .navi {
transform:translateZ(0) translateX(0);
}
.navi ul, #footer ul {
list-style-type: none;
}
.navi a, #footer, #footer a {
color: #fff;
}
.sns, #topNav, .reformNav ul {
display: flex;
}
.sns li {
padding-right: 20px;
}
a.home, ul#topNav li, #subNav ul li a {
font-weight: bold;
}
a.home {
display: block;
}
#topNav {
justify-content: space-between;
}
ul#topNav li ul li {
font-weight: normal;
}
ul#topNav li ul li a:before, .reformNav ul li a:before, #btmNav > li a:before {
content: "- ";
}
#topNav ul li span, #btmNav ul li span {
display: block;
font-size: 0.8em;
}
.reformNav h3 {
position: relative;
}
.reformNav h3:before {
display: block;
content: "";
width: 100%;
height: 1px;
background: #fff;
position: absolute;
top: 50%;
}
.reformNav h3 span {
position: relative;
z-index: 1;
background: #00267F;
display: table;
padding-right: 10px;
}
.reformNav ul {
flex-wrap: wrap;
}
.reformNav ul li {
padding-right: 20px;
}
.reformNav ul li a span {
font-size: 0.8em;
}
#subNav {
display: flex;
}
#subNav div a, #btmContact a {
display: block;
border-radius: 8px;
color: #00267F;
box-sizing: border-box;
}
#subNav div a:first-child, #btmContact a:first-child {
background: #3a9d25;
color: #fff;
}
#subNav div a:first-child span, #btmContact a:first-child span {
display: table;
position: relative;
margin: 0 auto;
}
#subNav div a:first-child span:before, #btmContact a:first-child span:before {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
content: '\f3c0';
font-family: "Font Awesome 5 Brands";
}
#subNav div a:nth-child(2), #btmContact a:nth-child(2) {
text-align: center;
background: #fff;
color: #CB000B;
font-weight: bold;
position: relative;
}
#subNav div a:nth-child(2):before, #btmContact a:nth-child(2):before {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
content: '\f3cf';
font-family: "Font Awesome 5 Pro";
color: #00267F;
}
#subNav div a:nth-child(2) span, #btmContact a:nth-child(2) span {
display: block;
font-size: 12px;
color: #00267F;
font-weight: normal;
}

#area > div {
width: 90%;
max-width: 800px;
margin: 0 auto;
}
#area h3 span {
display: block;
background: #ac8d4a;
color: #fff;
text-align: center;
}
#area h4 {
color: #ac8d4a;
}
#topLink #area p {
font-weight: normal;
text-align: left;
}

#youtube ul {
list-style-type: none;
padding-left: 0;
}
#youtube ul li a {
display: block;
overflow: hidden;
}

#footer {
background: #00267F;
}
#footer small {
display: block;
text-align: center;
font-size: 12px;
}
#btmNav li.reformNav span {
display: inline-block;
}

#floating {
position: fixed;
z-index: 5;
bottom: 0;
left: 0;
width: 100%;
background: #00267F;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
#floating.show {
opacity: 1;
visibility: visible;
}
#floating ul {
max-width: 960px;
margin: 0 auto;
list-style-type: none;
display: flex;
justify-content: space-between;
}
#floating ul li {
border-radius: 8px;
}
#floating ul li:first-child {
background: #3a9d25;
}
#floating ul li:first-child a {
color: #fff;
height: 100%;
display: grid;
place-items: center;
}
#floating ul li:first-child a i {
font-size: 1.2em;
}
#floating ul li:nth-child(2){
background: #fff;
}
#floating ul li:nth-child(2) a {
text-align: center;
color: #CB000B;
font-weight: bold;
}
#floating ul li:nth-child(2) a span {
display: block;
font-size: 12px;
color: #00267F;
font-weight: normal;
}
#floating ul li:last-child {
background: #CB000B;
}
#floating ul li:last-child a {
color: #fff;
display: block;
}
#floating ul li:last-child a span:first-child {
font-family: Helvetica, YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
}

ol.bread {
width: 96%;
max-width: 1280px;
margin: 0 auto;
display: flex;
list-style-type: none;
}
ol.bread li {
position: relative;
}
ol.bread li:before {
position: absolute;
top: 55%;
right: 0;
transform: translateY(-50%);
content: '\f054';
font-family: "Font Awesome 5 Pro";
font-size: 0.8em;
}
ol.bread li:last-child:before {
content: none;
padding-right: 0;
margin-right: 0;
}

@media (max-width: 560px){
a.btn {
width: 100%;
padding: 12px 20px;
font-size: 1.6rem;
}

#logo {
padding: 10px 0 10px 5%;
}
#logo h1 {
width: 40%;
line-height: 100%;
}
#logo h2 {
width: 60%;
line-height: 100%;
}
.el_humburger {
width: 80px;
}
.el_humburger_wrapper {
width: 40px;
}
.el_humburger span.el_humburger_bar {
height: 1px;
margin: 0 auto 10px;
}
.js_humburgerOpen .el_humburger span.el_humburger_bar.top {
transform: translateY(10px) rotate(-45deg);
}
.js_humburgerOpen .el_humburger span.el_humburger_bar.bottom {
transform: translateY(-11px) rotate(45deg);
}
.el_humburger span.el_humburger_bar:first-child {
margin-top: 24px;
}

.navi {
height: 100dvh;
}

.sns, #btmNav, #topNav, .reformNav, #btmSub, #btmContact {
padding-bottom: 20px;
}
.sns li a {
font-size: 2.4rem;
}
.sns li a img {
width: 16px;
transform: translateY(-6px);
}
a.home {
display: block;
margin-bottom: 20px;
}
a.home, .reformNav h3 {
font-size: 2rem;
}
a.home {
margin-bottom: 16px;
}
#topNav > li {
width: 48%;
}
ul#topNav li, ul#btmNav li {
font-size: 3.8vw;
}
#topNav ul li, .reformNav ul li, ul#btmNav ul li {
margin-top: 6px;
}
ul#topNav li ul li a, #subNav ul li a, ul#btmNav ul li a, #btmSub li a {
font-size: 3.5vw;
}
.reformNav ul li a {
font-size: 3.2vw;
}
#subNav ul {
padding-right: 20px;
}
#subNav ul li {
padding-bottom: 8px;
}
#subNav div {
width: 80%;
}
#subNav div a {
width: 100%;
padding: 10px 0;
font-size: 1.8rem;
}
#subNav div a:first-child {
margin-bottom: 20px;
}
#subNav div a:first-child span {
padding-left: 40px;
}
#subNav div a:nth-child(2) {
padding-left: 20px;
}
#subNav div a:nth-child(2):before {
font-size: 4rem;
}

#hero {
padding-top: 75px;
}

.head2 {
padding-bottom: 40px;
font-size: 5vw;
}
.head2 span {
font-size: 5rem;
}

#main > section {
padding-bottom: 80px;
}

#area h3 {
margin-bottom: 10px;
}
#area h3 span {
font-size: 2.4rem;
padding: 10px;
}
#area div div {
display: table;
margin: 0 auto;
}
#area h4 {
display: table;
font-size: 2rem;
}
#topLink #area p {
display: table;
font-size: 1.6rem;
}

#youtube ul {
padding-bottom: 40px;
}
#youtube ul li {
margin-bottom: 40px;
}
#youtube ul li:last-child {
margin-bottom: 0;
}

#footer {
padding: 10px 0;
}
#footer > div {
display: none;
}

#floating {
padding: 8px 0;
}
#floating ul {
width: 96%;
}
#floating ul li:first-child {
width: 33%;
}
#floating ul li:nth-child(2) {
width: 42%;
}
#floating ul li:last-child {
width: 22%;
}
#floating ul li:first-child a {
font-size: 1.6rem;
}
#floating ul li:nth-child(2) a {
display: block;
text-align: center;
padding: 0 8px;
font-size: 4vw;
}
#floating ul li:last-child a {
font-size: 1.4rem;
padding: 0 8px;
display: grid;
place-items: center;
height: 100%;
text-align: center;
}
#floating ul li:last-child a span {
display: none;
}

ol.bread {
padding: 20px 0 40px;
flex-wrap: wrap;
}
ol.bread li:nth-child(3) {
width: 100%;
}
ol.bread li:nth-child(-n+2) {
padding-right: 20px;
margin-right: 16px;
}
}

@media (max-width: 320px){
ul#topNav li, ul#btmNav li {
font-size: 1.6rem;
}
ul#topNav li ul li a, #subNav ul li a, ul#btmNav ul li a, #btmSub li a {
font-size: 1.4rem;
}
.reformNav ul li a {
font-size: 1.2rem;
}
#subNav div a:first-child span {
padding-left: 20px;
}
#subNav div a:nth-child(2) {
padding-left: 0;
}
#subNav div a:nth-child(2):before {
display: none;
}

#floating ul li:first-child a {
font-size: 1.4rem;
}
#floating ul li:nth-child(2) a {
padding: 0 4px;
font-size: 1.4rem;
}
}

@media (min-width: 561px){
a[href^="tel:"] {
pointer-events: none;
}

.el_humburger span.el_humburger_bar {
height: 2px;
margin: 0 auto 15px;
}
.js_humburgerOpen .el_humburger span.el_humburger_bar.top {
transform: translateY(18px) rotate(-45deg);
}
.js_humburgerOpen .el_humburger span.el_humburger_bar.bottom {
transform: translateY(-15px) rotate(45deg);
}

.sns li a {
font-size: 2.8rem;
}
.sns li a img {
width: 20px;
transform: translateY(-6px);
}
a.home, .reformNav h3 {
font-size: 2.4rem;
}
a.home {
margin-bottom: 20px;
}
#topNav, .reformNav, #btmSub, #btmContact {
padding-bottom: 30px;
}
#topNav > li:first-child {
width: 40%;
}
#topNav > li:last-child {
width: 56%;
}
ul#topNav li, ul#btmNav li {
font-size: 2rem;
}
#topNav ul li, .reformNav ul li, ul#btmNav ul li {
margin-top: 10px;
}
ul#topNav li ul li a, .reformNav ul li a, #subNav ul li a, ul#btmNav ul li a, #btmSub li a {
font-size: 1.8rem;
}
#subNav ul {
padding-right: 30px;
}
#subNav ul li {
padding-bottom: 10px;
}
#subNav div a, #btmContact a {
width: 240px;
padding: 20px 0;
}
#subNav div a:first-child {
margin-bottom: 20px;
}
#subNav div a:first-child span, #btmContact a:first-child span {
padding-left: 30px;
font-size: 2.2rem;
}
#subNav div a:nth-child(2), #btmContact a:nth-child(2) {
padding-left: 20px;
font-size: 1.8rem;
}
#subNav div a:nth-child(2):before, #btmContact a:nth-child(2):before {
font-size: 4rem;
}

.head2 {
padding-bottom: 60px;
}
.head2 span {
font-size: 6rem;
}

#main > section {
padding-bottom: 120px;
}

#area > div {
display: flex;
justify-content: center;
align-items: center;
}
#area h3 {
width: 240px;
margin-right: 30px;
}
#area h3 span {
font-size: 3rem;
padding: 16px 20px;
}
#area div div {
width: calc(100% - 270px);
}
#area h4 {
font-size: 3rem;
padding-bottom: 8px;
}
#topLink #area p {
font-size: 2rem;
}

#youtube ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding-bottom: 50px;
}
#youtube ul li {
width: 32%;
padding-bottom: 20px;
}

#footer li a.home {
margin-right: 30px;
}
#btmNav {
display: flex;
justify-content: space-between;
}
#btmSub, #btmContact {
display: flex;
justify-content: center;
}
#btmSub {
max-width: 640px;
margin: 0 auto;
flex-wrap: wrap;
}
#btmSub li {
margin-right:20px;
padding-right: 20px;
border-right: 1px solid #fff;
margin-bottom: 10px;
}
#btmSub li:nth-child(4), #btmSub li:last-child {
margin-right: 0;
padding-right: 0;
border-right: none;
}
#btmContact a:first-child {
margin-right: 20px;
display: flex;
align-items: center;
}

#floating {
padding: 20px 0;
}
#floating ul {
width: 90%;
}
#floating ul li a {
display: block;
color: #00267F;
padding: 10px 0;
}
#floating ul li:first-child a {
font-size: 1.8rem;
}
#floating ul li:nth-child(2) a {
color: #00267F;
position: relative;
font-size: 1.8rem;
}
#floating ul li:nth-child(2) a:before {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
content: '\f3cf';
font-family: "Font Awesome 5 Pro";
color: #00267F;
font-size: 3rem;
}
#floating ul li:last-child a {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#floating ul li:last-child a:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
content: '\f054';
font-family: "Font Awesome 5 Pro";
right: 20px;
}
#floating ul li:last-child a span:first-child {
font-size: 3.2rem;
padding-right: 20px;
}
#floating ul li:last-child a br {
display: none;
}

ol.bread {
padding: 30px 0 80px;
}
ol.bread li {
padding-right: 28px;
margin-right: 20px;
}
}

@media (min-width: 561px) and (max-width: 960px){
a.btn {
width: 280px;
padding: 8px 16px;
font-size: 1.8rem;
}

#logo {
padding: 10px 0 10px 16px;
}
#logo h1 {
width: 200px;
}
#logo h2 {
width: 400px;
}
.el_humburger {
width: 110px;
}
.el_humburger_wrapper {
width: 55px;
}
.el_humburger span.el_humburger_bar:first-child {
margin-top: 28px;
}

.sns, #btmNav {
padding-bottom: 30px;
}

#hero {
padding-top: 95px;
}

#footer {
padding: 60px 0 20px;
}
#btmNav > li {
width: 22%;
font-size: 1.6rem !important;
}
#btmNav > li.reformNav {
width: 52%;
}
#btmNav a {
font-size: 1.4rem !important;
}
#btmSub li a {
font-size: 1.6rem;
}

#floating ul {
flex-wrap: wrap;
}
#floating ul li:nth-child(-n+2){
width: 48%;
}
#floating ul li:last-child {
margin-top: 20px;
width: 100%;
}
}

@media (max-width: 960px){
.navi {
width: 100%;
}

a.btn:before {
right: 10px;
}
}

@media (min-width: 961px){
a.btn {
width: 320px;
padding: 10px 20px;
font-size: 2rem;
transition: .6s;
}
a.btn:before {
right: 20px;
transition: .3s;
}
a.btn:hover {
box-shadow: 0 0 10px #000;
}
a.btn:hover:before {
right: 15px;
}

#logo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
}

.navi {
width: 900px;
}
.sns, #btmNav {
padding-bottom: 40px;
}
#topNav ul {
display: flex;
flex-wrap: wrap;
}
#topNav ul li {
width: 50%;
}

#youtube ul li a, #youtube ul li a img {
transition: .6s;
}
#youtube ul li a:hover {
box-shadow: 0 0 10px #000;
}
#youtube ul li a:hover img {
transform: scale(1.1);
}

#footer {
padding: 80px 0 20px;
}
#btmNav > li {
width: 20%;
}
#btmNav > li.reformNav {
width: 56%;
}

#floating ul li:nth-child(-n+2){
width: 26%;
}
#floating ul li:last-child {
width: 44%;
}
}

@media (min-width: 961px) and (max-width: 1280px){
#logo {
width: 700px;
padding-left: 20px;
}
#logo h1 {
width: 200px;
}
#logo h2 {
width: 460px;
}
.el_humburger {
width: 100px;
}
.el_humburger_wrapper {
width: 50px;
}
.el_humburger span.el_humburger_bar:first-child {
margin-top: 20px;
}

#hero {
padding-top: 86px;
}
}

@media (max-width: 1280px){
#header > div {
width: 100%;
}
}

@media (min-width: 1281px){
#header > div {
width: 1280px;
margin: 0 auto;
}
#logo {
width: 1020px;
}
#logo h1 {
width: 280px;
}
#logo h2 {
width: 700px;
}
.el_humburger {
width: 120px;
}
.el_humburger_wrapper {
width: 60px;
}
.el_humburger span.el_humburger_bar:first-child {
margin-top: 28px;
}

#hero {
padding-top: 100px;
}
}