@charset "UTF-8"; /*   
Version:884_base20210508 ハヤシライフ
*/
/* all display
-------------------------------------------------- */
/*----pc-------*/
/*--------------------basic-------------------------*/
a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

p {
    display: block;
    margin-block: 0em; margin-inline: 0px; font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
    background:#000000;
}

section {
    width: 100%;
    margin: 0px auto;
}

h2 {
    display: block;
    font-size: 0px;
    margin-block: 0em; margin-inline: 0px; }

.header_line {
    background-color: rgb(0, 144, 214);
    width: 100%;
    height: 30px;
    font-size: 14px;
    color: rgb(255, 255, 255);
}

.header_line_inner {
    width: 1100px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
}

.header_line_box a {
    color: rgb(255, 255, 255);
    border-left: 1px solid;
    font-size: 12px;
    padding: 0px 8px;
}

.header_line_box a:hover {
    text-decoration: underline;
}

.header_line_box:nth-of-type(1) {
    border-right: 1px solid;
}

#st-menubox {
    padding: 0px;
    box-shadow: rgba(197, 197, 197, 0.39) 0px 1px 20px 0px;
    background: rgb(231, 0, 18);
}

#st-menuwide {
    width: 1100px;
    height: 75px;
    display: flex;
    flex-flow: row;
    margin: 0px auto;
    padding-bottom: 0px;
}

.smanone {
    height: 75px;
    display: flex;
    width: 822px;
    flex-wrap: wrap;
}

.smanone ul {
    display: flex;
    list-style: none;
    justify-content: center;
    margin-block: 0px; margin-inline: 0px; padding-inline-start: 40px; }

.smanone li {
    position: relative;
    width: 140px;
    margin: 0px 20px;
    text-align: center;
    transform: translate(0px, 27px);
}

.smanone ul::before {
    content: "";
    width: 152px;
    height: 70px;
    background-image: url("./images/logo.png");
    background-size: cover;
}

.smanone li::after {
    content: "";
    position: absolute;
    bottom: 35px;
    left: 15px;
    width: calc(0% - 30px);
    border-bottom: 2px solid transparent;
    transition: all 300ms ease 0s;
}

.smanone li a:hover {
    text-decoration: none;
}

.smanone li a {
    display: block;
    font-weight: 600;
    color: rgb(5, 145, 214);
}

.smanone li:hover::after {
    content: "";
    position: absolute;
    bottom: 35px;
    left: 15px;
    width: calc(100% - 30px);
    border-bottom: 2px solid rgb(15, 148, 213) !important;
}

.scroll-header-a #st-menubox {
    padding: 0px;
    box-shadow: rgba(255, 255, 255, 0.39) 0px 1px 20px 0px;
    background: rgba(255, 255, 255, 0.97);
    margin: 0px auto;
}

.scroll-header-a #st-menuwide, .scroll-header-a .smanone {
    height: 69px;
}

.scroll-header-a .smanone ul::before {
    content: "";
    width: 151px;
    height: 71px;
    background-image: url("./images/logo.png");
    background-size: cover;
}

.scroll-header-a .smanone li {
    width: 100px;
    margin: 0px 14px;
    text-align: center;
    transform: translate(0px, 18px);
}

.scroll-header-a .smanone li:hover::after {
    border-bottom: 0px solid rgba(255, 255, 255, 0) !important;
}

.scroll-header-a {
    position: fixed;
    top: -70px;
    left: 0px;
    width: 100%;
    background-color:#000000;
    z-index: 10000000;
    height: 120px;
    box-shadow: rgba(221, 221, 221, 0) 0px 0px 10px;
    display: block !important;
}

.scroll-header-a img {
    width: 217px;
    transform: translate(0px, 34px);
}

.scroll-header-a li a:hover {
    color: rgb(242, 0, 68);
    text-decoration: none;
    font-weight: bold;
}

.hover15 {
    position: absolute;
    display: block;
    padding: 0px 15px;
    height: 43px;
    border-radius: 4px;
    background-color: rgb(242, 0, 68);
    color: rgb(255, 255, 255);
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    top: 20px;
    left: 50%;
    transform: translate(320px, -13px);
}

.hover15 p {
    min-width: 150px;
    display: block;
    transform: translate(0px, 10px);
}

#point00 {
    transform: translate(0px, -150px);
}

#point01, #point02, #point03, #point04 {
    transform: translate(0px, -50px);
}

#all-wrap {
    overflow: hidden;
}

#all-wrap img {
    display: block;
    margin: 0px auto;
}

.top_screen {
    width: 100%;
    background: #000000;
    margin-top: 126px;
}

.top_screen_inner {
    position: relative;
    max-width: 800px;
    margin: 0px auto;
}
.top_screen_inner h2{
	
}
.top_screen_inner h2 span{
	
}

.top_screen img {
    position: relative;
    left: 50%;
    top: 35%;
    transform: translate(-50%, 0%);
    max-width: 1100px;
    width: 100%;
}

.pointbase img {
    max-width: 2000px;
}

.hidden_box {
    margin: 0px;
    padding: 0px;
}

.hidden_box label {
    font-weight: bold;
    font-size: 14px;
    text-align: left;
    border-top: 1px dotted rgb(255, 255, 255);
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: all 300ms ease 0s;
    padding: 14px;
    line-height: 1.5;
    color: rgb(255, 255, 255) !important;
    background: rgba(255, 255, 255, 0) !important;
}

.hidden_box label span {
    font-size: 1.2em;
    padding-left: 15px;
    color: rgb(255, 255, 255);
}

.hidden_box p {
    color: rgb(255, 255, 255);
    line-height: 1.6;
    margin: 0px 0px 26px;
    padding-left: 45px;
    font-size: 14px !important;
}

.hidden_box label::before {
    display: inline-block;
    content: "+";
    font-family: FontAwesome;
    padding-right: 15px;
    transition: all 1s ease 0s;
    color: rgb(240, 240, 241);
    font-weight: bold;
    font-size: 15px;
    left: 0px;
    top: 15px;
}

.hidden_box input:checked ~ label {
    color: rgb(255, 255, 255) !important;
}

.hidden_box input:checked ~ label::before {
    content: "×";
    transform: rotateY(360deg);
    transform-origin: -10% -10%;
    color: rgb(253, 218, 0);
    font-weight: bold;
    font-size: 15px;
}

.hidden_box a:hover, .hidden_box span:hover {
    color: rgb(253, 218, 0);
}

.hidden_box label:hover {
    background: rgba(222, 247, 255, 0.77);
    color: rgb(253, 218, 0) !important;
}

.hidden_box input {
    display: none;
}

.hidden_box .hidden_show {
    height: 0px;
    padding: 0px;
    overflow: hidden;
    opacity: 0;
    transition: all 0.8s ease 0s;
    display: flex;
}

.hidden_box .hidden_show img {
    width: 300px;
    height: 300px;
    margin: 0px !important;
}

.hidden_box .hidden_show a {
    color: rgb(255, 255, 255);
    text-decoration: underline;
}

.hidden_box input:checked ~ label ~ .hidden_show {
    padding: 10px 0px;
    height: auto;
    opacity: 1;
}

.footer_area {
    display: flex;
    justify-content: center;
    padding: 25px 0px 31px;
    background-color: #2b2b2b;
    color: rgb(255, 255, 255);
}

.footer_area a:hover {
    text-decoration: none;
}

.footer_container {
    width: 1125px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.footer_container_txt {
    font-size: 15px;
    text-align: center;
    font-weight: 100;
}

.footer_container_btn {
    display: flex;
    margin-top: 12px;
}

.footer_container_btn_color:first-of-type {
    margin: 10px 10px 10px 0px;
    width: 450px;
    height: 100px;
    background-color: rgb(242, 0, 68);
}

.footer_container_btn_color {
    font-size: 28px;
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    border-radius: 6px;
    color: rgb(255, 255, 255);
}

.footer_container_btn_color:hover {
    color: rgb(255, 255, 255) !important;
}

.footer_container_btn_color:nth-of-type(2) {
    flex-direction: column;
    width: 300px;
    height: 100px;
    margin: 10px 10px 10px 0px;
    background-color: rgb(24, 168, 0);
    line-height: 2rem;
}

.footer_container_btn_color::after {
    position: absolute;
    top: calc(50% - 18px);
    right: 10px;
    width: 7px;
    height: 7px;
    content: "▲";
    transform: rotate(90deg);
}

.hover01 {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.hover01 p::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: "";
    width: 0px;
    height: 0px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.hover01 p:hover::before {
    animation: 0.75s ease 0s 1 normal none running circle;
}

@-webkit-keyframes circle {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

@keyframes circle {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

.hover15 a {
    position: relative;
}

.hover15 p::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: "";
    width: 0px;
    height: 0px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.hover15 p:hover::before {
    animation: 0.75s ease 0s 1 normal none running circle;
}

.footer_container_btn_sub {
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 20px;
}

.footer_container_btn_sub a {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 228px;
    height: 46px;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 3px;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.2s ease 0s;
    color: rgb(255, 255, 255);
}

.footer_container_btn_sub a:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 144, 214) !important;
}

.mainelse .footer_container_btn_sub {
    width: 800px;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
}

.mainelse .footer_container_btn_sub a {
    width: 250px;
}

.pagetop {
    display: none;
    height: 82px;
    width: 100px;
    background: url("./images/admin/pagetop.png") right top / 100px 82px repeat-x rgb(0, 184, 235);
    position: fixed;
    bottom: 30px;
    right: 30px;
    border-radius: 16px;
    z-index: 50;
    opacity: 0.6;
}

.pagetop:hover {
    opacity: 1;
}

.application_contactform {
    font-size: 14px;
}

.application_contactform .post-title {
    display: none;
}

.application_contactform7 {
    text-align: center;
    margin-bottom: 14px;
}

.application_contactform7 p {
    margin: 0px;
}

.application_contactform7_btn {
    margin: 0px auto;
    display: block;
    width: 200px;
}

.application_contactform7_btn #important_button {
    color: rgb(255, 255, 255);
    background: rgb(242, 0, 68) !important;
    min-width: 200px !important;
}

.inquiry_form {
    width: 80%;
    color: rgb(56, 56, 56);
    border: 1px solid rgb(254, 218, 0);
    background: rgb(255, 255, 255);
    max-width: 950px !important;
    margin: 0px auto 24px !important;
    font-size: 14px !important;
}

.inquiry_form th {
    font-size: 16px;
    vertical-align: middle;
    font-weight: 600;
    text-align: center;
    padding: 10px 8px !important;
    border: 0px solid rgb(119, 119, 119) !important;
    color: rgb(56, 56, 56) !important;
    background: rgb(239, 239, 239) !important;
}

.inquiry_form td {
    position: relative;
    padding: 18px 0px 18px 16px;
}

.inquiry_form select {
    min-width: 500px;
    height: 35px;
}

.inquiry_form td:hover {
    background-color: rgb(255, 238, 238);
}

.inquiry_form .m-alert {
    position: absolute;
    right: 4px;
    top: 6px;
    padding: 5px;
    background: rgb(255, 128, 128);
    color: rgb(255, 255, 255);
    margin: 5px;
    font-weight: normal;
}

.inquiry_form .topcell {
    background-image: none;
    font-weight: 700;
    font-size: 20px;
    margin: 0px;
    text-align: center;
    background-color: rgb(254, 218, 0) !important;
    color: rgb(255, 255, 255) !important;
    padding: 12px 0px !important;
}

.inquiry_form_careerchoice .wpcf7-list-item {
    display: inline-block;
    width: 44%;
    line-height: 26px;
}

.inquiry_form_careerchoice2 .wpcf7-list-item {
    display: block;
    line-height: 26px;
}

.inquiry_form input[type="text"], .inquiry_form input[type="tel"], .inquiry_form input[type="email"] {
    padding: 1px 2px 0px 15px;
    height: 40px;
    border-radius: 2px;
    width: 90%;
    border: 0.1px solid rgb(94, 98, 101);
}

#important_button {
}

.wpcf7c-elm-step1 p {
    line-height: 160%;
    margin: 0px 0px 6px;
    font-size: 90%;
}

.inquiry_form form input[type="submit"], form button {
    background: rgb(37, 129, 196);
    color: rgb(255, 255, 255);
    margin: 0px auto;
    display: block;
}

.application-thanks {
    width: 800px;
    margin: 0px auto -100px;
    padding: 131px 0px;
}

.application-thanks p {
    padding: 0px 10px;
    line-height: 1.5;
    margin-bottom: 10px;
    font-size: 18px;
}

.application-thanks .application-send {
    width: 100%;
    background: rgb(0, 144, 214);
    padding: 8px 14px;
    font-size: 20px;
    margin-bottom: 14px;
    font-weight: 700;
    color: rgb(255, 255, 255);
}

.application-company {
    text-align: right;
    margin-top: 130px;
}

.application-thanks_page .post-title {
    display: none;
}

.cbox_hidden {
    text-align: center;
    text-decoration: underline;
    width: 100%;
    font-size: 18px;
    display: block;
    padding: 0px 50px 10px 30px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: all 300ms ease 0s;
    margin: 0px auto 20px;
    max-width: 800px;
    background: rgb(255, 255, 255);
    border-radius: 12px;
    color: rgb(51, 51, 51) !important;
}

.cbox_hidden input {
    display: none;
}

.cbox_hidden::before {
    content: "▶";
    margin-right: 5px;
    font-size: 14px;
    text-decoration: underline rgb(255, 255, 255);
}

.carea {
    margin: 50px auto;
    max-width: 950px;
}

.cbox {
    display: block;
    text-align: center;
    margin: 0px auto;
    font-size: 23px;
}

.cbox input {
    width: 28px;
    height: 16px;
    font-size: 180px;
}

#checkBox {
    width: 50%;
    margin: 20px 25%;
}

#important_button, #checkBox input {
    box-sizing: border-box;
    padding: 15px;
    border-style: none;
    text-align: center;
    width: 100%;
    background: rgb(39, 92, 125);
    color: rgb(255, 255, 255);
    font-size: 22px;
    border-radius: 12px;
    box-shadow: rgb(158, 158, 158) 5px 5px 0px;
    transition: all 0.5s ease 0s;
}

#checkBox input {
    color: white;
    background: rgb(254, 218, 0) !important;
}

#important_button:hover, #checkBox input:hover {
    transform: translate(6px, 6px);
    box-shadow: rgb(158, 158, 158) 0px 0px 0px;
    transition: all 0.5s ease 0s;
}

.chui p {
    margin: 0px 0px 8px;
    line-height: 1.2;
}

.pop_up {
    max-width: 53%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    opacity: 0.9;
    z-index: 50000;
    position: fixed;
}

.imgnone {
    display: none;
}

.page_thanks p {
    margin: 20px auto 0px;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}

.page_thanks .hover20 {
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 5px 0px;
    margin: 10px auto;
    width: 300px;
    height: 80px;
    background-color: rgb(242, 0, 68);
    display: block;
    vertical-align: middle;
    font-size: 20px;
    color: rgb(255, 255, 255);
    border-radius: 12px;
}

.page_thanks .hover20 p::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: "";
    width: 0px;
    height: 0px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.page_thanks .hover20 p:hover::before {
    animation: 0.75s ease 0s 1 normal none running circle;
}

.page_thanks a:hover {
    text-decoration: none;
}

.spbr {
    display: none;
}

.hshow {
    display: block !important;
}

#st-ami {
    position: relative;
}

.wpcf7-textarea {
    width: 98%;
}

.pointbase {
    position: relative;
    width: 96%;
    background-repeat: no-repeat !important;
}

.bx-wrapper .bx-pager.bx-default-pager .bx-pager-item:nth-of-type(1) a {
    background: url("./images/slider01.png");
}

.pointbase:nth-of-type(1) {
    background: url("./images/haikei1.png");
    padding: 0px;
}

.pointbase:nth-of-type(1), img, pointbase:nth-of-type(3) img {
    margin-top: -24px !important;
}

.pointbase:nth-of-type(2) {
    background: url("./images/haikei01.png") 0px 34px;
    padding: 0px;
}

.pointbase:nth-of-type(3) {
    padding: 0px;
}

.pointbase:nth-of-type(4) {
    padding: 0px;
}

.pointbase:nth-of-type(5) {
    background: url("./images/haikei02.png");
}

.pointbase:nth-of-type(5) .inner {
    width: 830px;
    margin: 0px auto;
}

.pointbase:nth-of-type(5) h3 {
    margin: 24px auto 14px;
    background: rgb(0, 144, 214);
    position: relative;
    z-index: 1;
    transition: all 300ms ease 0s;
    font-weight: bold;
    display: block;
    padding: 16px 33px;
    text-align: center;
    font-size: 20px;
    color: rgb(255, 255, 255) !important;
}

.pointbase .inner {
    width: 2000px;
    margin: 0px auto;
}

.pointbase .inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.point-container h2 {
    margin: 50px 0px;
}

.pointbase:nth-of-type(4) {
    max-width: 820px;
}



.point-container {
    max-width: 828px;
    margin: 0px auto;
}

.point-container h1 {
    font-size: 24px;
    color: rgb(231, 0, 9);
    text-align: center;
    margin: 50px auto;
    background: rgb(253, 218, 0);
    width: 90%;
}



@keyframes video {
    0% {
        opacity: 0;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.video-deta,.top_screen_inner:after{
    opacity:0;
  animation-name: video;
  animation-duration: 0s;
  animation-timing-function: linear;
  animation-iteration-count: 0;
  animation-direction: alternate;
  animation-fill-mode: none;
  animation-play-state: running;
 }

.profile-text {
    width: 90%;
    margin: 0px 5%;
    padding-left: 14px;
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 20px;
}

.profile-img {
    width: 80%;
}

.profile-link {
    margin-top: 20px;
    font-weight: bold;
}

.profile-link a {
    color: rgb(255, 255, 255);
    text-decoration: underline;
}

.formbox {
    width: 300px;
    height: 50px;
    margin: 20px auto;
    transition: all 0.8s ease 0s;
    overflow: hidden;
}

.formbox:hover {
    width: 400px;
}

.formbox a {
    padding: 12px 50px;
    background: rgb(255, 255, 255);
    vertical-align: middle;
    display: flex;
    flex-direction: row;
    border-radius: 20px;
    transition: all 0.8s ease 0s;
    color: rgb(231, 0, 9) !important;
}

.formbox a:hover {
    background: rgb(253, 218, 0);
    font-weight: bold;
    border-radius: 0px;
    padding: 12px 100px;
}

.formbox a::before {
    display: block;
    content: "✉";
    animation-name: screen1;
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
}

@keyframes screen1 {
    0% {
        transform: translate(0px, 0px);
    }

    30% {
        transform: translate(-80px, 0px) rotate(2turn);
    }

    80% {
        transform: translate(0px, 0px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

.formbox span {
    transform: translate(0px, 0px);
}

.transname {
    width: 800px;
    height: 116px;
    background-image: url("./images/884qaq.png");
    background-size: cover;
    margin: 120px auto 50px;
    filter: blur(8px);
}

.transname:hover {
    background-image: url("./images/884qaa.png");
    width: 800px;
    height: 118px;
    filter: blur(0px);
}

.newsbox {
    display: flex;
    margin: 0px auto 30px;
    justify-content: space-evenly;
    background: rgba(0, 0, 0, 0.35);
    padding: 10px 0px;
    width: 800px;
}

.newsbox2 {
    background: linear-gradient(45deg, rgb(182, 123, 3) 0%, rgb(218, 175, 8) 45%, rgb(254, 233, 160) 70%, rgb(218, 175, 8) 85%, rgb(182, 123, 3) 90%, rgb(182, 123, 3) 100%);
    border-radius: 20px;
    border: 1px solid rgb(77, 77, 77);
}

.newsbox2 h2 {
    text-shadow: rgb(255, 255, 255) 1px 1px 0px, rgb(255, 255, 255) -1px -1px 0px, rgb(255, 255, 255) -1px 1px 0px, rgb(255, 255, 255) 1px -1px 0px, rgb(255, 255, 255) 0px 1px 0px, rgb(255, 255, 255) 0px -1px 0px, rgb(255, 255, 255) -1px 0px 0px, rgb(255, 255, 255) 1px 0px 0px;
    color: rgb(221, 0, 9) !important;
}

.newsbox2 img {
    height: auto;
}

.newsbox2 .news-text {
    color: rgb(255, 0, 0);
}

.newsbox2 .news-link {
    background: rgb(255, 241, 0);
    font-weight: bold;
    border: 2px solid;
}

.schedulebase h2 {
    margin: 0px auto;
    background: rgb(253, 218, 0);
    display: block;
    color: rgb(103 103 103);
    font-size: 22px;
    text-align: center;
    width: 800px;
    border-radius: 20px 20px 0 0;
}

.schedulebox {
    display: flex;
    margin: 0px auto 30px;
    justify-content: space-evenly;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 0px;
    width: 800px;
    border-radius:0 0 20px 20px;
}

.newsbox h2 {
    display: block;
    margin: 10px 0px;
    color: rgb(253, 218, 0);
    font-size: 18px;
}

.news-img {
    width: 250px;
    height: 250px;
    margin: 0px !important;
}

.schedule-img {
    width: 250px;
    height: 100%;
    margin: 0px !important;
}

.schedulebox p {
    color: rgb(103 103 103);
    font-weight: bold;
}

.schedule-text {
    max-width: 80%;
}

.schedule-text a {
    background: rgb(253, 218, 0);
    color: rgb(103 103 103);
    padding: 6px;
    display: block;
    border-radius: 20px;
    text-align: center;
    width: 80%;
    margin: 0px 10%;
}

.news-text {
    color: rgb(255, 255, 255);
}

.news-day {
    font-size: 12px;
}

.news-day::before {
    content: "🕑";
}

.news-link {
    background: rgb(255, 255, 255);
    padding: 10px;
    display: block;
    text-align: center;
    border-radius: 20px;
    color: rgb(231, 0, 9);
    margin: 14px 0px 0px;
}

.news-link:hover {
    background: rgb(253, 218, 0);
    font-weight: bold;
}

.footer_icon {
    margin-left: 20px;
}

.footer_icon img {
    transition: all 1s ease 0s;
    height: auto;
    width: 20px !important;
}

.footer_icon img:hover {
    transform: translate(0px, 0px) rotate(2turn);
    width: 30px !important;
}

.ysbtn a {
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: block;
    background: rgb(255, 255, 255);
    border-radius: 5px;
    border-bottom: 4px solid rgb(130, 130, 130);
    color: rgb(231, 0, 9);
    margin: 0px auto 20px;
    font-size: 12px;
    transition: all 1s ease 0s;
}

.ysbtn a:hover {
    background: rgb(253, 218, 0);
    cursor: pointer;
}

.pointbasetube {
    position: relative;
    margin: 95px 0px !important;
}

.pointbasetube .point-container {
    width: 1200px;
    max-width: 1200px;
}

.pointbasetube .inner {
    position: relative;
}

.pointbasetube h2 {
    position: relative;
    color: rgb(231, 0, 9);
    background: rgb(254, 218, 0);
    font-size: 20px;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    width: 788px;
    margin: 100px auto 50px !important;
}

.videobox {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.video {
    position: relative;
    width: 45%;
    padding: 25% 0px 0px;
    display: flex;
    margin: 20px 0px 50px;
    text-align: center;
    justify-content: center;
}

.video iframe {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

.video h3 {
    display: block;
    font-size: 15px;
    margin-block: 0px; margin-inline: 0px; font-weight: bold;
    top: -38px;
    position: absolute;
    color: rgb(231, 0, 9);
    background: rgb(255, 255, 255);
    padding: 8px 16px;
}

#pickup {
    transform: translate(0px, -125px);
}

.loading {
    width: 100vw;
    height: 100vh;
    background-color:#000000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2147483647;
}

.loading img {
    width: 382px;
    z-index: 2147483647;
}

.logo-img {
    margin: 0px auto 10px !important;
    width: 750px !important;
    max-width: 90% !important;
    opacity: 0;
}

@media screen and (min-width: 414px) and (max-width: 620px) {
    .loading img {
        width: 191px;
        background-size: contain;
    }
}

@media screen and (min-width: 375px) and (max-width: 413px) {
    .loading img {
        width: 191px;
        background-size: contain;
    }
}

.pwarea {
    position: revert;
}

.pwinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.64);
    height: 50%;
    justify-content: center;
    border: 1px solid rgb(51, 51, 51);
    border-radius: 20px;
}

.pwtext {
    font-size: 30px;
    font-weight: bold;
}

.pwform {
    display: flex;
    flex-direction: column;
    width: 390px;
}

.pwbtn1 {
    margin: 14px 0px 20px;
    height: 40px;
}

.pwbtn2 {
}

.kyuinbox {
    margin: -30px auto 30px;
    border-radius: 0px 0px 160px 160px;
    overflow: hidden;
    width: 140px;
    height: 140px;
    background: rgb(255 235 59 / 7%);
    transition: all 0.5s ease 0s;
}

.kyuinbox:hover {
    border: 0;
    background: rgba(255, 235, 59, 0.29);
    box-shadow: rgba(255, 235, 59, 0.29) 0px 0px 20px 20px;
}

label.clicktogif {
    background: url("") center center no-repeat rgb(231, 0, 9);
    display: block;
    opacity: 0;
}

label.clicktogif:hover, label.clicktogif:focus-within {
    background: url("https://hayashi.life/wp-content/themes/shuujin_works/images/pato01.png") center center no-repeat;
    display: block;
    opacity: 1;
}

.clicktogif img {
    transform: translate(0px, 50px);
    display: block;
}

.clicktogif input[type="checkbox"] {
    position: absolute;
    left: -100vw;
}

.clicktogif input[type="checkbox"] + img {
    opacity: 0;
}

.clicktogif input[type="checkbox"]:checked + img {
    opacity: 1;
}

.sppato {
    display: none;
}

.patobtnbox {
    margin: 34px 0 0;
}

.pickupbefore {
    margin-bottom: -120px !important;
}

.zugarabox img {
    width: 290px;
    padding: 5px 0;
}

.zugarabox {
    margin: 20px auto;
    width: 300px;
    background: #fff;
    border-radius: 14px;
}

.iconbox{
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
	margin: 70px 0 0;
}
.icon-img{
	width: 30% !important;
}
.storelogo{
	max-width: 800px !important;
	transform: translate(0px, 14px);
}
.storebox{
}
.storeitembox{
	display: flex;
	flex-wrap: wrap;
	margin: 50px auto;
	flex-direction: row;
	max-width: 800px;
	align-content: space-around;
	justify-content: center;
}
.storeitem{width: 30%;margin: 0 2px;}
.storeitem img{
	width: 100%;
	background: #fff;
	margin: 2px !important;
}
.itemlink:hover{
	
}
.ecarea{
	width: 100%;
	height: 800px;
    margin: 30px 0;
	z-index: 0!important;

}
.ecareabox{
	display: block;
	z-index: 1!important;
}
.storebtn{
	display: block;
	margin: 0 0 50px;
	background: #fdda00;
	padding: 20px;
	text-align: center;
	color: #f00;
	border-radius: 20px;
	font-weight: bold;
}
/*----pc-------*/