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

body{ overflow-x: hidden }

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1024px }
tbody, td, tfoot, th, thead, tr{ border-style: none }
.mincho{ font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif }
.san{ font-family: 'Noto Sans JP', sans-serif }
.serif{ font-family: 'Noto Serif JP', serif }
.oswald{ 
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 0.2rem;
    line-height: 1.0;
}
.ls-1{ 
    letter-spacing: 0.2rem;
}

.text-blue{ color: #0E3181 !important }

.bg-gray{ background: #333333 !important }
.bg-blue{ background: #0E3181 !important }
.bg-dark{ background: #000000 !important }

.font-10{ font-size: 10px !important }
.font-11{ font-size: 11px !important }
.font-12{ font-size: 12px !important }
.font-13{ font-size: 13px !important }
.font-14{ font-size: 14px !important }
.font-15{ font-size: 15px !important }
.font-16{ font-size: 16px !important }
.font-17{ font-size: 17px !important }
.font-18{ font-size: 18px !important }
.font-19{ font-size: 19px !important }
.font-21{ font-size: 21px !important }
.font-23{ font-size: 23px !important }
.font-24{ font-size: 24px !important }
.font-28{ font-size: 28px !important }
.font-30{ font-size: 30px !important }
.font-32{ font-size: 32px !important }
.font-34{ font-size: 34px !important }
.font-36{ font-size: 36px !important }
.font-38{ font-size: 38px !important }
.font-68{ font-size: 68px !important }
.font-40{ font-size: 40px !important }
.font-42{ font-size: 42px !important }
.font-48{ font-size: 48px !important }
.font-52{ font-size: 52px !important }
.font-55{ font-size: 55px !important }
.font-60{ font-size: 60px !important }
.font-82{ font-size: 82px !important }
.font-90{ font-size: 90px !important }
.font-175{ font-size: 175px !important }
.font-24{ font-size: 24px !important }

a{
    color: #000000 !important;
    text-decoration: none;
    transition: all 0.5s ease;
}
a:hover{ 
	opacity: 0.75;
	color: #383B80 !important;
}
.overlay:before{
    content: "";
    background: rgba(24, 24, 109, .5);
    width: 100%;
    height: 100%;
    position: absolute;
}
.z-index-n1{ z-index: -1 }
.z-index-1{ z-index: 1 }
.text-justify{ text-align: justify }
.batsu{
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M 0 0 t 25 25 m -25 0 t 25 -25'/%3e%3c/svg%3e") !important
}
.navbar-toggler:focus{ box-shadow: none }
.border-left-dash2{ border-left: 2px dashed }
.border-right-dash2{ border-right: 2px dashed }
.border-dash{ border: 1px dashed }
.border-left-dash{ border-left: 1px dashed }
.border-right-dash{ border-right: 1px dashed }
.border-top-dash{ border-top: 1px dashed }
.border-bottom-dash{ border-bottom: 1px dashed }
.text-shadow{ text-shadow: #808080 0px 0px 1rem }
.w-30{ width: 30% !important }

/*button*/
input{ border: 1px solid #959595 }
label > input[type="radio"] { display: none }
label > input[type="radio"] + span{
    display: flex;
    align-items: center;
}
label > input[type="radio"]:checked + span { color: #E7B999 }
label > input[type="radio"] + span::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    border-style: solid;
    border-width: 0.1rem;
}
label > input[type="radio"]:checked + *::before {
    background: radial-gradient(#E7B999 0%, #E7B999 40%, transparent 50%, transparent);
    border-color: #E7B999;
}

/*scroll*/
@keyframes scrollAnime { 
    0% { height: 0; bottom:3rem; }
    40% { height: 3rem; bottom: 0; }
    60% { height: 3rem }
    100% { height: 0 }
}
#scroll:before {
    content: "";
    width: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #FFFFFF;
    -webkit-animation: scrollAnime 2.0s cubic-bezier(0.5, 0, 0, 1) infinite;
    animation: scrollAnime 2.0s cubic-bezier(0.5, 0, 0, 1) infinite;
}


/*ローテインク*/
#loadingscreen {
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
}
.spinner {
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
    0% { -webkit-transform: scale(0) }
    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}
@keyframes sk-scaleout {
    0% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    } 
    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0;
    }
}

/*背景線*/
.line {
    position: absolute;
    width: 1px;
    height: 150%;
    top: -50%;
    left: 50%;
    overflow: hidden;
    /*background: rgba(192, 192, 192, 0.1);*/
}
.line:nth-child(1) { margin-left: -25% }
.line:nth-child(1)::after {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.line:nth-child(3) { margin-left: 25% }
.line:nth-child(3)::after {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.line::after {
    content: "";
    position: absolute;
    height: 15vh;
    width: 100%;
    background: linear-gradient(to bottom, rgba(197, 197, 197, 0) 0%, #c5c5c5 75%, #c5c5c5 100%);
    -webkit-animation: drop 7s 0s infinite;
    animation: drop 7s 0s infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
    animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
@-webkit-keyframes drop {
  0% { top: -50% }
  100% { top: 110% }
}
@keyframes drop {
  0% { top: -50% }
  100% { top: 110% }
}

@media(max-width: 834px){
.ls-1{ 
    letter-spacing: 0.1rem;
}
}

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

@media(max-width: 768px){
  .font-md-150{ font-size: 150px !important }
  #about:before{ width:95% }
}

@media screen and (max-width:667px) { 
    html{ font-size: 14px }
    .font-sm-10{ font-size: 10px !important }
    .font-sm-11{ font-size: 11px !important }
    .font-sm-12{ font-size: 12px !important }
    .font-sm-13{ font-size: 13px !important }
    .font-sm-14{ font-size: 14px !important }
    .font-sm-15{ font-size: 15px !important }
    .font-sm-16{ font-size: 16px !important }
    .font-sm-18{ font-size: 18px !important }
    .font-sm-20{ font-size: 20px !important }
    .font-sm-21{ font-size: 21px !important }
    .font-sm-23{ font-size: 23px !important }
    .font-sm-24{ font-size: 24px !important }
    .font-sm-28{ font-size: 28px !important }
    .font-sm-30{ font-size: 30px !important }
    .font-sm-32{ font-size: 32px !important }
    .font-sm-36{ font-size: 36px !important }
    .font-sm-38{ font-size: 38px !important }
    .font-sm-40{ font-size: 40px !important }
    .font-sm-42{ font-size: 42px !important }
    .font-sm-45{ font-size: 45px !important }
    .font-sm-55{ font-size: 55px !important }
    .font-sm-80{ font-size: 80px !important }
    .font-sm-90{ font-size: 90px !important }
    .font-sm-110{ font-size: 110px !important }
    .font-24{ font-size: 19px !important }
}

.kbpFlex {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
}
.kbpFlex p:first-child {
    width: 83%;
}
.logo40th {
    width: 40%;
}
h2 img {
    cursor: pointer;
}
.roWrap {
    background-color: rgba(0,77,160,1);
    border-radius: 15px;
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 600px;
    padding: 20px 0;
    display: none;
    z-index: 99;
}
.roWrap:after{
  content: "";
  position: absolute;
  right: 0;
  top: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: rgba(0,77,160,1) transparent transparent transparent;
  border-width: 20px 15px 0 15px;
  transform: rotate(180deg);
}
.roWrap p {
    color: #fff;
    display: inline-block;
    font-size: 25px;
    margin: 0;
    letter-spacing: 0.1em;
}
.roWrap p small {
    display: block;
}
@media(max-width: 834px){
.kbpFlex p:first-child {
    width: 80%;
}
.roWrap {
    bottom: -40px;
}
}
@media(max-width: 768px){
.roWrap {
    bottom: -120px;
}
}
@media(max-width: 480px){
.kbpFlex p:first-child {
    width: 100%;
    order: 2;
}
.kbpFlex p:last-child {
    width: 100%;
    order: 1;
    text-align: center;
}
.logo40th {
    width: 60%;
}
.roWrap {
    bottom: -110px;
    width: 90%;
    margin-left: 11px;
}
.roWrap p {
    font-size: 5vw;
}
}