@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : base.css
Description :
===================================================================== */

/* =====================================================================
*    共通・大枠
* =================================================================== */
html {
    font-size: calc(10 / 750 * 100vw);
}

@media screen and (min-width: 768px) {
    html {
        font-size: calc(10 / 1300 * 100vw);
    }
}

@media screen and (min-width: 1300px) {
    html {
        font-size: 10px;
    }
}

.gDef-top-banner {
    background-color: #f8d000;
}

.gDef-contents {
    color: #333;
    font-family: "Noto Sans JP", "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
    line-height: 1.5;
    letter-spacing: 0.05em;
    background-color: #fff;
}

.set1,
.set1 * {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.set1 img {
    width: 100%;
    height: auto;
    display: block;
}

.set1 a {
    display: block;
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    .set1 a {
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }

    .set1 a:hover {
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
}

@media screen and (max-width: 767px) {
    .pc {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    .sp {
        display: none !important;
    }
}

body {
    overflow-x: hidden;
}

.main {
    display: block;
}

.inner {
    width: calc(630 / 750 * 100%);
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .inner {
        width: 100%;
        max-width: 1300px;
        padding: 0 calc(150 / 1300 * 100%);
    }
}

@media screen and (min-width: 1300px) {
    .inner {
        padding: 0 150px;
    }
}


/* =====================================================================
*    animation
* =================================================================== */
@-webkit-keyframes pulse-shrink {
	to {
		-webkit-transform: scale(.9);
		transform: scale(.9);
	}
}

@keyframes pulse-shrink {
	to {
		-webkit-transform: scale(.9);
		transform: scale(.9);
	}
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@-webkit-keyframes guruguru_anime1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@keyframes guruguru_anime1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}


/* =====================================================================
*    header
* =================================================================== */
.header {
    z-index: 100;
}

.header.fixed {
}

.header_box {
    z-index: 100;
}

.fixed .header_box {
    position: fixed;
    top: 0;
    width: 100%;
}

.header_ttl {
    width: calc(198 / 750 * 100%);
    margin: calc(32 / 750 * 100%) 0 0 calc(19 / 750 * 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.menu_btn {
    width: calc(100 / 750 * 100%);
    padding-top: calc(100 / 750 * 100%);
    background-color: #fed429;
    border: calc(5 / 750 * 100vw) solid #3d3a3a;
    border-radius: 50%;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-box-shadow: 0px 0px calc(27 / 750 * 100vw) 0px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 0px calc(27 / 750 * 100vw) 0px rgba(0, 0, 0, 0.21);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;
    margin: calc(30 / 750 * 100%) calc(18 / 750 * 100%) 0 0;
}

.menu_btn::before,
.menu_btn::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/nav/btn_nav_menu.png) no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.menu_btn::after {
    background: url(../images/nav/btn_nav_close.png) no-repeat center center;
    background-size: 100% 100%;
    opacity: 0;
}

.menu_btn.active::before {
    opacity: 0;
}

.menu_btn.active::after {
    opacity: 1;
}

.menu_txt {
    width: calc(58 / 120 * 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto calc(18 / 120 * 100%);
}

.nav {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    right: -100%;
    overflow-y: scroll;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.nav.active {
    right: 0;
}

.nav_menu {
    width: calc(490 / 750 * 100%);
    min-height: 100vh;
    margin: 0 0 0 auto;
    padding: calc(220 / 750 * 100%) calc(70 / 750 * 100%) calc(50 / 750 * 100%);
    background-color: #252525;
}

.nav_menu li {
    margin: 0 0 calc(50 / 350 * 100%);
}

.nav_menu li:last-child {
    margin-bottom: 0;
}

.nav_menu li.cs::after {
    content: "";
    display: block;
    width: 100%;;
    height: 100%;
    background: url(../images/nav/btn_nav_cs.png) no-repeat right center #252525;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.nav_menu li a {
    padding: calc(20 / 350 * 100%) 0;
}

.nav_menu li a img {
    width: auto;
    height: calc(35 / 750 * 100vw);
    margin: 0 0 0 auto;
}

@media screen and (min-width: 768px) {
    .header.fixed {
        padding-top: calc(80 / 1300 * 100%);
    }

    .header_ttl {
        width: calc(120 / 1300 * 100%);
        right: 0;
        margin: calc(6 / 1300 * 100%) auto 0;
    }

    .menu_btn {
        display: none;
    }

    .nav {
        display: block;
        position: relative;
        height: auto;
        right: 0;
        overflow-y: visible;
    }

    .nav_menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        min-height: auto;
        margin: 0;
        padding: 0;
    }

    .nav_menu li {
        margin: 0;
    }
    
    .nav_menu li.nav1 {
        margin-left: calc(40 / 1300 * 100vw);
    }
    
    .nav_menu li.nav4 {
        margin-right: calc(120 / 1300 * 100vw);
    }
    
    .nav_menu li.cs::after {
        background: url(../images/nav/btn_nav_cs.png) no-repeat center center #252525;
        background-size: calc(60 / 1300 * 100vw) auto;
    }
    
    .nav_menu li a {
        padding: calc(30 / 1300 * 100vw) calc(25 / 1300 * 100vw);
        overflow: hidden;
    }
    
    .nav_menu li a img {
        height: calc(20 / 1300 * 100vw);
        margin: 0;
    }
    
    .nav_menu li:not(.nolink) a::after {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(25 / 1300 * 100vw);
        background: url(../images/nav/btn_nav_hover.png) no-repeat center top;
        background-size: auto 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        margin-top: -2.5em;
        font-size: 2rem;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    
    .nav_menu li a:hover::after {
        margin-top: 0;
    }
}

@media screen and (min-width: 1300px) {
    .header.fixed {
        padding-top: 80px;
    }
    
    .header_ttl {
        width: 120px;
        margin: 6px auto 0;
    }
    
    .nav_menu li.nav1 {
        margin-left: 40px;
    }
    
    .nav_menu li.nav4 {
        margin-right: 120px;
    }
    
    .nav_menu li.cs::after {
        background-size: 60px auto;
    }
    
    .nav_menu li a {
        padding: 30px 25px;
    }
    
    .nav_menu li a img {
        height: 20px;
        margin: 0;
    }
    
    .nav_menu li:not(.nolink) a::after {
        padding-top: 25px;
    }
}


/* =====================================================================
*    subpage_header
* =================================================================== */
#subpage #wrapper {
    background: url(../images/common/bg_pink.png) repeat center top;
    background-size: calc(252 / 750 * 100%) auto;
}

.submv::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(490 / 750 * 100%);
    background: url(../images/common/bg_submv_sp.png) no-repeat left top;
    background-size: 100% 100%;
}

.subpage_ttl {
    width: calc(501 / 750 * 100%);
    margin: calc(153 / 750 * 100%) 0 0 calc(152 / 750 * 100%);
    padding-top: calc(188 / 750 * 100%);
    background: url(../images/common/bg_submv_ttl.png) no-repeat center top;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.subpage_ttl img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(70 / 501 * 100%) 0 0;
}

.wave_y::before,
.wave_y::after,
.wave_r::before,
.wave_r::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(7 / 630 * 100%);
    background: url(../images/common/line_wave_y.png) repeat-x left top;
    background-size: auto 100%;
}

.wave_r::before,
.wave_r::after {
    background: url(../images/common/line_wave_r.png) repeat-x left top;
    background-size: auto 100%;
}

.wave_y::after,
.wave_r::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.wave_y span,
.wave_r span {
    display: block;
    margin: -1px 0;
    padding: 0.5em;
    background-color: #fed429;
    color: #cd1937;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.wave_r span {
    background-color: #d71518;
    color: #fff;
}

@media screen and (min-width: 768px) {
    #subpage #wrapper {
        background-size: calc(189 / 1300 * 100%) auto;
    }
    
    .submv::before {
        padding-top: calc(324 / 1300 * 100%);
        background: url(../images/common/bg_submv_pc1.png) repeat-x center top;
        background-size: auto 100%;
    }
    
    .submv::after {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(324 / 1300 * 100%);
        background: url(../images/common/bg_submv_pc2.png) repeat-x center top;
        background-size: auto 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .subpage_ttl {
        width: calc(501 / 1300 * 100%);
        margin: calc(70 / 1300 * 100%) 0 0 calc(-227 / 1300 * 100%);
        padding-top: calc(188 / 1300 * 100%);
        left: 50%;
        z-index: 2;
    }
    
    .wave_y span,
    .wave_r span {
        padding: 0.35em;
        font-size: 2.6rem;
    }
}

@media screen and (min-width: 1300px) {
    #subpage #wrapper {
        background-size: 189px auto;
    }
    
    .submv::before,
    .submv::after {
        padding-top: 324px;
    }
    
    .subpage_ttl {
        width: 501px;
        margin: 70px 0 0 -227px;
        padding-top: 188px;
    }
}


/* ================================================================== */
/*    slick
/* ================================================================== */
.slick-list {
    border-radius: calc(16 / 750 * 100vw);
}

.slick-arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(117 / 750 * 100vw);
    height: 100%;
    background: url(../images/common/btn_slick_prev.png) no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    z-index: 2;
}

.slick-arrow.prev {
    left: calc(-83 / 750 * 100vw);
}

.slick-arrow.next {
    background: url(../images/common/btn_slick_next.png) no-repeat center center;
    background-size: 100% auto;
    right: calc(-83 / 750 * 100vw);
}

.slick-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: calc(-30 / 750 * 100vw);
}

.slick-dots li {
	display: block;
	width: calc(14 / 750 * 100vw);
	height: calc(14 / 750 * 100vw);
    margin: 0 calc(5 / 750 * 100vw);
    border-radius: 50%;
    background: #bc1a35;
    border: 2px solid #fed429;
	text-indent: -9999px;
}

.slick-dots li button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0;
}

.slick-dots li.slick-active {
	background: #fed429;
}

@media screen and (min-width: 768px) {
    .slick-list {
        border-radius: calc(16 / 1300 * 100vw);
    }
    
    .slick-arrow {
        width: calc(117 / 1300 * 100vw);
        cursor: pointer;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    
    .slick-arrow.prev {
        left: calc(-114 / 1300 * 100vw);
        left: -8.77vw;
    }
    
    .slick-arrow.prev:hover {
        left: -9.9vw;
    }
    
    .slick-arrow.next {
        right: calc(-114 / 1300 * 100vw);
        right: -8.77vw;
    }
    
    .slick-arrow.next:hover {
        right: -9.9vw;
    }
    
    .slick-dots {
        margin-bottom: calc(-40 / 514 * 100%);
    }
    
    .slick-dots li {
        width: calc(14 / 1300 * 100vw);
        height: calc(14 / 1300 * 100vw);
        margin: 0 calc(5 / 1300 * 100vw);
        border-width: 3px;
        cursor: pointer;
    }
}

@media screen and (min-width: 1300px) {
    .slick-list {
        border-radius: 16px;
    }
    
    .slick-arrow {
        width: 117px;
    }
    
    .slick-arrow.prev {
        left: -114px;
    }
    
    .slick-arrow.prev:hover {
        left: -129px;
    }
    
    .slick-arrow.next {
        right: -114px;
    }
    
    .slick-arrow.next:hover {
        right: -129px;
    }
    
    .slick-dots li {
        width: 14px;
        height: 14px;
        margin: 0 5px;
    }
}


/* =====================================================================
*    footer
* =================================================================== */
.footer_sns {
    padding: calc(55 / 750 * 100%) 0 calc(140 / 750 * 100%);
    background: url(../images/common/bg_blue2.png) repeat center top;
    background-size: calc(189 / 750 * 100%) auto;
}

.footer_sns .inner::before {
    content: "";
    display: block;
    width: calc(137 / 630 * 100%);
    padding-top: calc(151 / 630 * 100%);
    background: url(../images/common/bg_share.png) no-repeat left top;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: calc(44 / 630 * 100%) calc(-30 / 630 * 100%) 0 0;
}

.footer_sns .sec_ttl {
    width: calc(301 / 630 * 100%);
    margin: 0 auto calc(45 / 630 * 100%);
}

.footer_sns .sns_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.footer_sns .sns_btn li {
    width: calc(162 / 630 * 100%);
}

.footer_box {
    padding: calc(180 / 750 * 100%) 0 calc(90 / 750 * 100%);
    background-color: #f8d000;
}

.pagetop {
    z-index: 2;
}

.pagetop a {
    width: calc(144 / 630 * 100%);
    margin: calc(-290 / 630 * 100%) auto 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.banner li {
    width: calc(300 / 630 * 100%);
    margin: 0 calc(30 / 630 * 100%) calc(40 / 630 * 100%) 0;
}

.banner li:nth-child(even),
.banner li:last-child {
    margin-right: 0;
}

.footer small {
    display: block;
    color: #fff;
    font-size: 2.6rem;
    line-height: 1.5;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .footer {
        z-index: 100;
    }
    
    .footer_sns {
        padding: calc(40/ 1300 * 100%) 0;
        background-size: calc(189 / 1300 * 100%) auto;
    }
    
    .footer_sns .inner::before {
        width: calc(137 / 1300 * 100%);
        padding-top: calc(151 / 1300 * 100%);
        margin: calc(24 / 1300 * 100%) calc(287 / 1300 * 100%) 0 0;
    }
    
    .footer_sns .sec_ttl {
        width: calc(194 / 1000 * 100%);
        margin: 0 auto calc(15 / 1000 * 100%);
    }
    
    .footer_sns .sns_btn li {
        width: calc(96 / 1000 * 100%);
        margin: 0 calc(45 / 1000 * 100%) 0 0;
    }
    
    .footer_sns .sns_btn li:last-child {
        margin-right: 0;
    }
    
    .footer_sns .sns_btn li a:hover {
        -webkit-animation: pulse-shrink .3s linear infinite alternate;
        animation: pulse-shrink .3s linear infinite alternate;
    }
    
    .footer_box {
        padding: calc(60 / 1300 * 100%) 0 calc(50 / 1300 * 100%);
    }
    
    .pagetop a {
        width: calc(123 / 1000 * 100%);
        margin: calc(-173 / 1000 * 100%) calc(-100 / 1000 * 100%) 0 0;
        left: auto;
        -webkit-transform-origin: bottom center;
        transform-origin: bottom center;
    }

    .pagetop a:hover {
        -webkit-animation: swing 1s ease 0s forwards;
        animation: swing 1s ease 0s forwards;
    }

    .banner {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0 0 calc(20 / 1000 * 100%);
    }

    .banner li,
    .banner li:nth-child(even) {
        width: calc(200 / 1001 * 100%);
        margin: 0 calc(50 / 1001 * 100%) calc(30 / 1001 * 100%) 0;
    }

    .banner li:nth-child(4n),
    .banner li:last-child {
        margin-right: 0;
    }

    .banner li a:hover {
        opacity: 0.7;
    }

    .footer small {
        font-size: 1.6rem;
    }
}

@media screen and (min-width: 1300px) {
    .footer_sns {
        padding: 40px 0;
        background-size: 189px auto;
    }
    
    .footer_box {
        padding: 60px 0 50px;
    }
    
    .pagetop a {
        margin: calc(-173 / 1000 * 100%) calc(-170 / 1000 * 100%) 0 0;
    }
}


/* =====================================================================
*    bridecove_popup
* =================================================================== */
#wrapper .bc_wrapper {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100000;
    display: none;
    cursor: pointer;
}

.bc_wrapper .return_box {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.bc_wrapper .bc_movie_wrap {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}

.bc_wrapper .bc_movie_wrap .bc_movie {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}

.bc_wrapper .bc_movie_wrap .bc_movie video {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.vjs-icon-placeholder {
    display: block;
    margin: -1em 0 0;
    position: static;
}

.bc_wrapper .btn_close {
    width: calc(400 / 750 * 100%);
    margin: 5% auto 0;
    padding: calc(23 / 750 * 100%) 0;
    background-color: #fff;
    border-radius: 2em;
    color: #cd1937;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.1;
}

@media screen and (min-width:768px) {
    .bc_wrapper .bc_movie_wrap {
        width: 50%;
    }
    
    .bc_wrapper .btn_close {
        width: calc(300 / 750 * 100%);
        margin-top: calc(30 / 750 * 100%);
        padding: 0.6em 0;
        font-size: 2.5rem;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }

    .bc_wrapper .btn_close:hover {
        opacity: 0.7;
    }
}


/* =====================================================================
*    img_popup
* =================================================================== */
.imgpp_wrapper {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(37, 106, 83, 0.9);
    z-index: 100000;
    display: none;
}

.imgpp_wrapper .return_box {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.imgpp_wrapper .imgBox {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}

.imgpp_wrapper .btn_close {
    width: 40%;
    margin: 5% auto 0;
    padding: 0.8em 0;
    background-color: #fff;
    color: #cc2200;
    font-size: 3rem;
    font-family: Anton, sans-serif;
    line-height: 1;
    text-align: center;
    border: calc(12 / 750 * 100vw) solid #000;
    cursor: pointer;
}

@media screen and (min-width:768px) {
    .imgpp_wrapper .imgBox {
        width: 50%;
    }
    
    .imgpp_wrapper .btn_close {
        width: calc(500 / 1300 * 100%);
        margin-top: calc(40 / 1300 * 100%);
        padding: 0.6em 0;
        font-size: 2.5rem;
        border: calc(6 / 1300 * 100vw) solid #000;
    }

    .imgpp_wrapper .btn_close:hover {
        background: #000;
    }
}


/* ================================================================== */
/*    loading
/* ================================================================== */
.loader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #fed429;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100001;
}

.loader span {
    display: block;
    width: calc(200 / 750 * 100%);
    padding-top: calc(200 / 750 * 100%);
    background: url(../images/common/img_loading1.png) no-repeat center center;
    background-size: auto 100%;
}

.loader span::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/img_loading2.png) no-repeat center center;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: guruguru_anime1 10s linear forwards infinite;
    animation: guruguru_anime1 10s linear forwards infinite;
}

.loader::after {
    content: "Loading ･･･";
    display: block;
    margin: 2em 0 0;
    color: #ff9d12;
    font-size: 2.4rem;
    letter-spacing: 0.05em;
    text-align: center;
}

@media screen and (min-width:768px) {
    .loader span {
        width: calc(124 / 1300 * 100%);
        padding-top: calc(124 / 1300 * 100%);
    }
    
    .loader::after {
        margin: 3em 0 0;
        font-size: 1.2rem;
    }
}

@media screen and (min-width:1300px) {
    .loader span {
        width: 124px;
        padding-top: 124px;
    }
}