@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Roboto|Sawarabi+Gothic&display=swap');

/*loading*/
#loader-bg {
    background: rgba(255,255,255,1);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 900;
}
#loader-bg .bouncingLoader {
    background: rgba(255,255,255,1);
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 910;
}
.bouncingLoader > div, .bouncingLoader:before, .bouncingLoader:after {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: rgb(229,0,18);
    margin-bottom: -5px;
    border-radius: 50%;
    animation: bouncing-loader 0.6s infinite alternate;
}
.bouncingLoader > div, .bouncingLoader:before, .bouncingLoader:after {
    content: "";
}
.bouncingLoader > div {
    margin: 0 5px;
}
.bouncingLoader > div {
    animation-delay: 0.2s;
}
.bouncingLoader:after {
    animation-delay: 0.4s;
}
@keyframes bouncing-loader {
    to {
        opacity: 0.1;
        transform: translate3d(0, -16px, 0);
    }
}

/*font-styles*/
.bold {font-weight: bold !important;}
.large {font-size: 110% !important;}
.middle {font-size: 80% !important;}
.small {font-size: 60% !important;}
.center {text-align: center !important;}
.right {text-align: right !important;}

.ikb {
    font-family: 'Roboto', sans-serif;
	color: rgb(255,255,255);
	padding: 0 1vw;
	background-color: rgb(229,0,18);
}

/*font-color*/
.tx_KEY {color: rgb(7,12,71);}
.tx_gd {color: rgb(191,156,70);}
.tx_gr {color: rgb(188,185,179);}
.tx_wt {color: rgb(255,255,255);}
.tx_bk {color: rgb(0,0,0);}
.tx_rd {color: rgb(229,0,18);}

/*background-color*/
.fr_rd {border: 2px solid rgb(229,0,18)}
.fr_bl { border: 1px solid rgb(7,12,71);}
.bg_wt {background-color: rgb(255,255,255)}
.bg_rd {background-color: rgb(229,0,18)}
.bg_gr {background-color: rgb(188,185,179)}
.bg_gd {background-color: rgb(191,156,70)}
.bg_stn {
background: repeating-linear-gradient(45deg, #fdf3f0 0px, #fdf3f0 .5vw, transparent .5vw, transparent .6vw);
}
.bg_blr {backdrop-filter: blur(2vw) !important;}
.bg_dtw {
background-image: radial-gradient(rgba(220,5,12,.8) 25%, transparent 0%),
radial-gradient(rgba(220,5,12,.8) 25%, transparent 0%);
background-size: .5vh .5vh;
background-position: 0 0, .25vh .25vh;
}

/*round-corner*/
.bg_1r { border-radius : 1vw;}
.bg_hr { border-radius : .5vw;}

/*wording-rule*/
header h1 {
    font-size: 2.6vh;
    line-height: 1.4em;
    font-weight: bold;
}
.announce-text {
    font-size: 2.2vh;
    line-height: 1.8em;
    text-align: justify;
    text-justify: inter-ideograph;

    width: 100%;
    margin: 0 auto;
    padding: 2vh 10vw;
}
.main-catch {
    font-size: 5.5vh;
    line-height: 1.6em;
    font-weight: bold;

    width: 100%;
    max-width: 720px;
    margin: 0 auto 0;
}
.catch {
    font-size: 4.6vh;
    line-height: 1.6em;
    font-weight: bold;
    width: 100%;
    max-width: 720px;
    margin: 2vh auto;
}
.sub-catch {
    font-size: 3vh;
    line-height: 1.4em;
    font-weight: bold;
    width: 100%;
    max-width: 720px;
    margin: 2vh auto;
}
.lead {
    font-size: 2.6vh;
    line-height: 2em;
    text-align: justify;
    text-justify: inter-ideograph;
    font-weight: bold;
    width: 100%;
    max-width: 720px;
    margin: 2vh auto;
}
.heading {
    font-size: 2.4vh;
    line-height: 1.6em;
    font-weight: bold;

    width: 90%;
    margin: 2vh auto;
}
.bodytext {
    font-size: 2.2vh;
    line-height: 1.8em;
    text-align: justify;
    text-justify: inter-ideograph;

    width: 90%;
    max-width: 720px;
    margin: 2vh auto;
}
.box-bodytext {
    font-size: 2.2vh;
    line-height: 1.8em;
    text-align: justify;
    text-justify: inter-ideograph;

    width: 100%;
    max-width: 720px;
    margin: 2vh auto;
    padding: 2vh;
}
.footer_credit {
    max-width: 540px;
    margin: 2vh auto 0;
    font-size: 1.6vh;
    line-height: 1.8em;
    text-align: justify;
    text-justify: inter-ideograph;
}

/*wording-decolation*/
.side-line10 {
    padding: 0 0 0 2vw !important;
    border-left: 10px solid rgb(255,255,255);
}
.side-line5 {
    padding: 0 0 0 2vw !important;
    border-left: 5px solid rgb(255,255,255);
}
.bottom-line5 {
    padding: 0 0 1vh 0 !important;
    border-bottom: 5px solid rgb(229,0,18);
}
.framebox-01 {
	padding: 2vw;
	position: relative;
}
.framebox-01::before, .framebox-01::after {
	content: '';
	width: 5vw;
	height: 5vw;
	position: absolute;
}
.framebox-01::before {
	border-left: solid .5vw rgb(255,255,255);
	border-top: solid .5vw rgb(255,255,255);
	top: 2vw;
	left: 2vw;
}
.framebox-01::after {
	border-right: solid .5vw rgb(255,255,255);
	border-bottom: solid .5vw rgb(255,255,255);
	bottom: 2vw;
	right: 2vw;
}
.ribbon-01 {
    position: relative;
    height: 60px;
    padding: 0 2rem;
    color: rgb(255,255,255);
    background: rgb(229,0,18);
}
.ribbon-01:before, .ribbon-01:after {
    position: absolute;
    top: 0;
    display: block;
    height: 48px;
    content: '';
    border: 30px solid rgb(229,0,18);
}
.ribbon-01:before {
    left: -40px;
    border-left-width: 15px;
    border-left-color: transparent;
}
.ribbon-01:after {
    right: -40px;
    border-right-width: 15px;
    border-right-color: transparent;
}
.framebox-02 {
    position: relative;
    margin: 6vh auto 2vh !important;
    padding: 2vh;
    border: 2px solid rgb(191,156,70);
  }
.framebox-02:before {
    font-size: 1.8vh;
    position: absolute;
    top: -3vh;
    left: -2px;
    height: 3vh;
    padding: 0 1em;
    content: 'お願い';
    color: rgb(255,255,255);
    background: rgb(191,156,70);
}
.framebox-03 {
    position: relative;
    margin: 6vh auto 2vh !important;
    padding: 1vh 0;
    border-top: 2px solid rgb(229,0,18);
  }
.framebox-03:before {
    font-size: 1.6vh;
    position: absolute;
    top: -3.2vh;
    left: -2px;
    height: 3.2vh;
    padding: 0 1em;
    font-weight: bold;
    content: 'お問い合わせ';
    color: rgb(255,255,255);
    background: rgb(229,0,18);
}

/*image-layout*/
.cover-image {
    object-fit: scale-down;
    overflow: hidden;
}
.cover-image img {
    max-width: 100%;
}

.block-image {
    width: 90%;
    max-width: 640px;
    margin: 0 auto 4vh;
    text-align: center;
    overflow: hidden;
}
.circle-image {
    margin: 0 auto 2vh;
    position: relative;
    width: 90%;
    max-width: 300px;
    overflow: hidden;
    background: rgba(120,120,120,.5);
    border-radius: 50%;
}
.square-image {
    margin: 0 auto 2vh;
    position: relative;
    width: 100%;
    overflow: hidden;
    background: rgba(120,120,120,.5);
}
.square-image::before, .circle-image::before {
    content: "";
    display: block;
    padding-top: 100%;
}
.square-image img, .circle-image img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
}
.block-image:last-child {margin: 0 auto;}
.block-image img {height: auto; max-width: 100%;}

@media screen and (max-width:599px) {
.main-catch, .catch, .lead, .box-bodytext, .footer_credit {width:90%;}
}