/* === === === === === === === === === === === === === === === === === === Bootstrap.css：01 === === === */
/* === === === Header Cover Style === === === */
.HEADER .HEIGHT-3.BG-COVER p,
.HEADER .HEIGHT-3.BG-COVER h1 {
    color: white;
}

/* === === === New Style === === === */
.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER p,
.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER h1 {
    color: black;
}

/* === === === New Add === === === */
.quiz solid span.content {
    font-size: 15px;

    padding-top: 6px;
    padding-left: 0;
}

.quiz .FEMALE > after span {
    display: block;
}

.quiz .FEMALE > after span::before {
    content: "\f0da\00a0";
    font-weight: 900;
    font-family: "Font Awesome 6 Free";

    animation-name: fadeInLeft;
    animation-duration: 1.85s;
    animation-iteration-count: infinite;
}
.quiz .FEMALE > after span::after {
    content: "MASSEUSE INFO";
}

@media screen and (max-width: 767px) {
    h1, h2, h3, h4, h5 {
        font-size: 27px;
    }
}

@media screen and (max-width: 500px) {        
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER h1 {
        padding-right: 0;
    }
    .HEADER .HEIGHT-3.BG-COVER p,
    .HEADER .HEIGHT-3.BG-COVER h1 {
        color: black;
    }
}

@media screen and (max-width: 450px) {        
    .HEADER .HEIGHT-3 h1 {
        width: calc(100vw - 24px);

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        font-size: 24px;
    }
}






/* === === === Background.css === === === */
.HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
    background-image:
        url(background/style/above.jpg);
}

.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER {
    background-image:
        url(background/style/down.jpg);
}

.HEADER.INVERT-LOOK .HEIGHT-3 .EXTRA > div {
    background-image:
        url(background/style/vinyl/07.png);
}
.BEFORE-IMG content {
    content:
        url(background/style/author.jpg);
}

.ANIMATE-DOWN .bootstrap .background.style1:hover,
.ANIMATE-DOWN .bootstrap .background.style2:hover {
    background-image:
        url(background/style/border.jpg);
}

@media screen and (max-width: 500px) {
    .HEADER.INVERT-LOOK .HEADER-BG-PADDING > div {
        background-image: url(background/style/cover.jpg);
    }

    .HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
        background-image: url(background/style/index.jpg);
    }

    .CONVERT-ON-MOBILE.HEADER-BG-PADDING content {
        content: url(background/style/border.jpg);
    }



    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER {
        background-image: none;
    }

    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
        background-color: white;
    }
}



/* === === === BOOTSTRAP-2.css === === === */
.ANIMATE-DOWN .bootstrap .background.style1 {
    background-image: url(https://soothe.tw/imgs/hotel.webp);
}
.ANIMATE-DOWN .bootstrap .background.style2 {
    background-image: url(https://soothe.tw/imgs/home.webp);
}

.ANIMATE-DOWN .background > div {
    background-color: rgba(0, 0, 0, .35);
}
.ANIMATE-DOWN .background > div a {
    color: white;
}



/* === === === 客製化 修改 代碼 === === === */
.HEADER,
.BG-WHITE,
.HEADER .CONVERT-ON-MOBILE,
.HEADER img.CONVERT-ON-MOBILE {
    background-color: white;
}

.BG-WHITE,
.ANIMATE-LEFT-MIN .HREF-ICON > a,
.ANIMATE-LEFT-MIN .HREF-LINK > a,
.ANIMATE-LEFT-MIN p.small {
    color: black;
}

.ANIMATE-LEFT-MIN {
    box-shadow: 1px 3px 12px rgba(0, 0, 0, .5); rgba(255, 255, 255, .5);
}

.ANIMATE-LEFT-MIN inline icon {
    color: black;
    background-color: white;
}

.ANIMATE-LEFT-MIN .BG-WHITE {
    /*
    background-color: rgba(109, 94, 110, .95);
    */
}
.HEIGHT-3.BG-COVER .EXTRA {
    background-color: #6d5d6e;
}

.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
    border: 3px solid #6d5d6e;
}
.HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
    border-left: 3px solid #6d5d6e;
    border-right: 3px solid #6d5d6e;
    border-bottom: 3px solid #6d5d6e;
}

.HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
    background-attachment: inherit;
}
.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER {
    background-attachment: inherit; fixed;
}

/* === === === Animation Style === === === https://is.gd/fg86ai === === === */
.ANIMATION-MOVE {
    animation: move 6s linear infinite;
    /*
    border-bottom: 5px solid black;
    */
}

.HEADER.INVERT-LOOK .HEIGHT-3 .EXTRA > div.ANIMATION-MOVE:hover {
    animation-name: move2;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

@keyframes move {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes move2 {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* === End === === === === === === === === === Animation Style === === === */
@media screen and (max-width: 767px) {
    .HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
        background-image: url(background/style/middle.jpg);
    }

    .BEFORE-IMG content {
        border: 3px solid #6d5d6e;
        content: url(background/style/mobile.jpg);
    }
}

@media screen and (max-width: 500px) {
    .HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
        background-image: url(background/style/index.jpg);
    }
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER {
        background-color: white;
    }

    .CONVERT-ON-MOBILE.HEADER-BG-PADDING div > div {
        top: inherit;
        bottom: 0;

        left: 12px;

        position: absolute;

        color: white;
        text-shadow: 1px 3px 6px rgba(0, 0, 0, .5);
        text-align: left;
    }

    .CONVERT-ON-MOBILE.HEADER-BG-PADDING content {
        border: 3px solid #6d5d6e;
    }

    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
        border: 0;
    }
    .HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }



    /* === === === New Add === === === */
    .CONVERT-ON-MOBILE.HEADER-BG-PADDING .MOBILE-FONT p,
    .CONVERT-ON-MOBILE.HEADER-BG-PADDING .MOBILE-FONT h2 {
        font-weight: 500;
    }

    .CONVERT-ON-MOBILE.HEADER-BG-PADDING .MOBILE-FONT p,
    .CONVERT-ON-MOBILE.HEADER-BG-PADDING .MOBILE-FONT h2 > span {
        font-size: 15px;
    }

    .CONVERT-ON-MOBILE.HEADER-BG-PADDING .MOBILE-FONT h2 {
        font-size: 21px;
    }
    .CONVERT-ON-MOBILE.HEADER-BG-PADDING .MOBILE-FONT h2 > span {
        display: block;
        padding-top: 3px;
    }
}

@media screen and (max-width: 450px) {
    .HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
        background-attachment: fixed;
    }



    /* === === === === === === === === ===
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
        background-color: black;
    }

    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER p,
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER h1 {
        color: white;
    }

    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER p {
        border-bottom: 3px solid rgba(255, 255, 255, .85);
    }

    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER a {
        color: black;
        background-color: white;
        border: 3px solid rgba(255, 255, 255, .15);
    }
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER a:hover {
        max-width: 80%;

        color: white;
        background-color: transparent;
        border: 3px solid white;
    }
    === === === === === === === === === */



    .HEADER.INVERT-LOOK .HEADER-BG-PADDING > div {
        background-image: url(background/style/style.jpg);
    }

    .CONVERT-ON-MOBILE.HEADER-BG-PADDING div > div,
    .CONVERT-ON-MOBILE.HEADER-BG-PADDING a#Script::before {
        color: black;
        text-shadow: 1px 3px 6px rgba(255, 255, 255, .5);
    }

    .ANIMATE-LEFT-MIN {
        box-shadow: none;
    }
    .ANIMATE-LEFT-MIN .BG-WHITE {
        /*
        background-color: rgba(0, 0, 0, .95);
        */
    }
}



.HEIGHT-3.BG-COVER {
    border-left: 3px solid #bc8f8f;
    border-right: 3px solid #bc8f8f;
    border-bottom: 3px solid #bc8f8f;
}

.HEIGHT-3.BG-COVER .EXTRA {
    color: white;
    background-color: transparent;

    border-top: 3px solid #bc8f8f;
}
.HEIGHT-3.BG-COVER .EXTRA.BORDER-STYLE {
    background-image: url(background/style/background.jpg);

    border-top: 3px solid #bc8f8f;
    border-bottom: 3px solid #bc8f8f;
    border-left: 3px solid #bc8f8f;
}

.HEADER.INVERT-LOOK
.HEIGHT-3.BG-COVER .EXTRA-IMG {
    border: 0;
    border-top: 3px solid #bc8f8f;

    padding-left: 12px;
    padding-right: 0;
}

.HEADER.INVERT-LOOK
.HEIGHT-3.BG-COVER a.SOUND-CLOUD {
    width: auto;
    height: auto;

    display: inline-block;

    padding: 12px 0;

    color: white;
    background-color: transparent;

    border: 0;
    border-radius: 0;

    font-size: 15px;
    font-weight: 600;

    text-shadow: 3px 6px 9px rgba(0, 0, 0, .75);

    /*
    overflow: hidden;
    word-break: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;

    line-break: anywhere;
    */
}

.HEIGHT-7.ADD-STYLE > div {
    color: black;
    text-shadow: none;

    text-align: left;
}
.HEIGHT-7.ADD-STYLE > div p {
    border-bottom: 3px solid rgba(0, 0, 0, .75);
}



.SPOTIFY {
    padding-top: 20px;
    /* WEB MIDDLE：12px + SOURCE PADDING-BOTTOM：8px */
}

.SPOTIFY iframe {
    height: 92px;
    /* SOURCE：80px + PADDING-TOP：12px */

    width: 100%;
    max-width: 360px;

    border-radius: 12px;
}



.SPOTIFY abort,
.SPOTIFY middle {
    height: 78px;
    display: table-cell;
    vertical-align: middle;
}

.SPOTIFY content {
    display: block;

    width: 63px;
    height: 63px;
    border-radius: 50%;

    border: 3px solid #6d5d6e;
    content: url(background/style/mobile.jpg);
}
.SPOTIFY middle {
    padding-left: 12px;

    font-size: 36px;
    font-weight: 600;
}

.SPOTIFY span.h2 {
    font-size: 36px;

    margin-top: -20px;
    margin-bottom: 0;

    padding-bottom: 10px;
}

.SPOTIFY span {
    display: block;
    margin-top: -10px;

    font-size: 18px;
    font-weight: 600;

    color: white;
    text-shadow: 3px 6px 12px rgba(0, 0, 0, .75);
}



.ENDING-STYLE {
    display: none;
}
.ENDING-STYLE-NONE {
    display: block;
}

iframe.sound {
    display: block;

    /*
    border: 1px solid white;
    border-radius: 10px;
    */

    width: 100%;
    max-width: 500px;

    height: 166px;
}

@media screen and (max-width: 991px) {
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
        width: calc(100vw - 42px - 200px - 6px);
    }

    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA {
        width: 200px;

        padding-left: 12px;
        padding-right: 12px;
    }
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA > div {
        width: 176px;
        height: 176px;

        border-top-left-radius: 176px;
        border-top-right-radius: 176px;
        border-bottom-left-radius: 176px;
        border-bottom-right-radius: 176px;
    }
}

@media screen and (max-width: 767px) {
    .HEIGHT-7.ADD-STYLE > div {
        color: white;
        text-shadow: 3px 6px 12px rgba(0, 0, 0, .75);
    }
    .HEIGHT-7.ADD-STYLE > div p {
        border-bottom: 3px solid rgba(255, 255, 255, .75);
    }

    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
        width: calc(100vw - 42px);
    }



    .SPOTIFY,
    .ENDING-STYLE-NONE {
        display: none;
    }
    .ENDING-STYLE {
        display: block;
        text-shadow: none;
    }
    .ENDING-STYLE.SHOW-SHADOW {
        text-shadow: 3px 6px 12px rgba(0, 0, 0, .75);
    }

    .BEFORE-IMG content {
        border: 3px solid #bc8f8f;
    }
}

@media screen and (max-width: 500px) {
    .HEIGHT-3.BG-COVER {
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .HEIGHT-3.BG-COVER .EXTRA.BORDER-STYLE {
        border-top: 0;
        border-bottom: 0;
        border-left: 0;
    }

    .HEIGHT-3.BG-COVER .EXTRA,
    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
        border-top: 0;
    }

    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER .EXTRA-IMG {
        padding-left: 0;
    }

    .CONVERT-ON-MOBILE.HEADER-BG-PADDING content {
        border: 3px solid #bc8f8f;
    }
}






.ANIMATE-LEFT-MIN.TRANSFORM-DOWN {
    width: 100%;
    display: block;

    animation-name: fadeInDown;
    animation-duration: 1.5s;
    -webkit-animation-name: fadeInDown;
    -webkit-animation-duration: 1.5s;
}

.NAVIGATION ul.TRANSFORM {
    left: 0;
    right: 0;

    width: 100%;
}
.NAVIGATION ul.TRANSFORM li.ICON {
    width: calc(100vw - 200px - 24px);
}

.SCROLL-X.TRANSFORM-DOWN::-webkit-scrollbar {
    width: 0; !important
}
.SCROLL-X.TRANSFORM-DOWN::-webkit-scrollbar-thumb,
.SCROLL-X.TRANSFORM-DOWN::-webkit-scrollbar-track {
    border-radius: 0;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X {
    height: calc(100vh - 119px - 12px);
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X ul.TRANSFORM {
    display: block;
    padding: 21px 0;
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X ul.TRANSFORM li {
    display: inline-block;
    padding: 6px;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X ul.TRANSFORM li a {
    font-size: 27px;
    font-weight: 600;
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X ul.TRANSFORM li a::before {
    content: "．";
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X ul.TRANSFORM li a:hover {
    color: white;
    text-shadow: 3px 6px 12px rgba(0, 0, 0, .75);
}



.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .COLOR-FAC800,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH {
    width: calc(100vw - 42px);
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH.BACKGROUND-F2F2F2 {
    background-color: #f2f2f2;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE {
    height: calc(100vh - 119px - 40px - 12px - 3px);

    padding-left: 12px;
    padding-right: 12px;

    background-color: #ccc;
    background-image: url(https://is.gd/InksaI);
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE h1,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE h1.HEADLINE block,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE p {
    text-shadow: 3px 6px 12px rgba(255, 255, 255, .75);
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE h1 {
    font-size: 63px;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE h1.HEADLINE block {
    display: block;
    font-size: 85%;
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE h1.HEADLINE block::before {
    content: "—\00a0";
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE h1.HEADLINE block::after {
    content: "\00a0—";
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE p {
    font-size: 21px;
    font-weight: 600;
}



.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .BIG-ICONS-SIZE.material-symbols-outlined,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .MEDIUM-SIZE.material-symbols-outlined {
    font-weight: 200;
    text-transform: uppercase;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .BIG-ICONS-SIZE.material-symbols-outlined,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .BIG-ICONS-SIZE.fa-solid,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .BIG-ICONS-SIZE.fa-regular {
    font-size: 115px;
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .MEDIUM-SIZE.material-symbols-outlined,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .MEDIUM-SIZE.fa-solid,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .MEDIUM-SIZE.fa-regular {
    font-size: 45px;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .CIRCLE-SIZE.material-symbols-outlined,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .CIRCLE-SIZE.SHADOW-NONE,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .CIRCLE-SIZE.fa-solid,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .CIRCLE-SIZE.fa-regular {
    display: table-cell;
    vertical-align: middle;

    border-radius: 95px;

    color: #5b5b5b;
    background-color: transparent;

    font-size: 54px;
    text-align: center;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .CIRCLE-SIZE.material-symbols-outlined,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .CIRCLE-SIZE.SHADOW-NONE {
    width: 81px;
    height: 81px;
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .CIRCLE-SIZE.material-symbols-outlined {
    box-shadow: 3px 6px 12px rgba(0, 0, 0, .5);
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .CIRCLE-SIZE.SHADOW-NONE {
    box-shadow: 3px 6px 12px transparent;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .CIRCLE-SIZE.fa-solid,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .CIRCLE-SIZE.fa-regular {
    width: 95px;
    height: 95px;

    border: 5px solid #5b5b5b;
}



.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div {
    max-width: 1199px;
    padding: 54px 6px;
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div > div {
    padding: 18px 6px;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div .ADD-PADDING-TOP {
    padding-top: 36px;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div.FOOTER-PADDING-BOTTOM {
    padding-bottom: 0;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div.FOOTER-PADDING-BOTTOM > img {
    max-width: 150px;
    border-radius: 50%;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div.FOOTER-PADDING-BOTTOM > h5 {
    margin: 0;
    padding: 27px 0;
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div.FOOTER-PADDING-BOTTOM > p {
    margin-bottom: 0;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div.FOOTER-PADDING-BOTTOM > div p,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div.FOOTER-PADDING-BOTTOM > div p a {
    color: #666;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div.FOOTER-PADDING-BOTTOM > div p a {
    padding: 3px 6px;
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div.FOOTER-PADDING-BOTTOM > div p a:hover {
    color: white;
    background-color: #666;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH > div h4.ADD-PADDING-BOTTOM {
    padding-bottom: 36px;
}



.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .COLOR-FAC800 > div {
    width: 100%;
    padding: 9px 18px;

    background-color: #fac800;

    text-align: center;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .COLOR-FAC800 > div a {
    color: black;
    font-size: 15px;
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .COLOR-FAC800 > div a.WEIGHT-NORMAL strong {
    font-weight: 400;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X transform {
    background-image: url(https://is.gd/InksaI);

    margin: 0;
    display: block;
    padding: 39px 0 39px 0;

    font-size: 17.5vw;

    font-weight: 700;
    text-shadow: none;
    text-transform: uppercase;

    animation-name: rubberBand;
    animation-duration: 3s;
    animation-iteration-count: #infinite;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X img {
    display: block;
    max-width: 1199px;
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X img.ICON-SIZE {
    max-width: 125px;
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH.BACKGROUND-F2F2F2 a,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X a.BUTTON {
    display: inline-block;

    width: auto;
    min-width: 175px;

    border-radius: 125px;

    padding: 12px 24px;

    font-size: 21px;
    font-weight: 600;
    text-align: center;       
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH.BACKGROUND-F2F2F2 a {
    color: white;
    border: 2px solid #333;
    background-color: #333;     
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X a.BUTTON {
    color: rgb(0, 0, 0);
    border: 2px solid rgb(250, 198, 0);
    background-color: rgb(250, 198, 0);      
}

.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH.BACKGROUND-F2F2F2 a:hover,
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X a.BUTTON:hover {
    min-width: 225px;
    padding: 12px 36px;  
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH.BACKGROUND-F2F2F2 a:hover {
    color: rgb(0, 0, 0);
    border: 2px solid rgb(250, 198, 0);
    background-color: rgb(250, 198, 0);   
}
.ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X a.BUTTON:hover {
    color: white; #fac800;
    border: 2px solid #333;
    background-color: #333;    
}

@media screen and (max-width: 1199px) {
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE h1 {
        font-size: 45px;
    }
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE p {
        font-size: 18px;
    }
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X ul.TRANSFORM li a {
        font-size: 21px;
    }
}

@media screen and (max-width: 767px) {
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE h1 {
        font-size: 39px;
    }
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE p {
        font-size: 18px;
    }
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X ul.TRANSFORM li a {
        font-size: 21px;
    }
}

@media screen and (max-width: 500px) {
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE h1,
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE p,
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X ul.TRANSFORM li a {
        color: white;
        text-shadow: 3px 6px 12px rgba(0, 0, 0, .75);
    }

    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE h1 {
        font-size: 30px;
    }
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE p {
        padding: 0 12px;
        font-size: 15px;
    }

    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X ul.TRANSFORM {
        padding: 0 0;
    }
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X ul.TRANSFORM li {
        display: block;
    }
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X ul.TRANSFORM li a {
        font-size: 18px;
    }
}

@media screen and (max-width: 450px) {
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE,
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .COLOR-FAC800,
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .TRANSFORM-MAX-WIDTH {
        width: calc(100vw - 24px);
    }

    /*
    .ANIMATE-LEFT-MIN.TRANSFORM-DOWN .SCROLL-X .BG-COVER.MIDDLE {
        border-bottom-left-radius: 225px;
        border-bottom-right-radius: 225px;
    }
    */
}






/* === === === === === === === === === === === === === === === === === === Bootstrap.css：02 === === === */
/* === === === === === === === === === Touch Style === === === */
.ANIMATE-DOWN {
    animation-name: fadeInDown;
    animation-duration: 1.5s;
    -webkit-animation-name: fadeInDown;
    -webkit-animation-duration: 1.5s;
}
.ANIMATE-DOWN .BG-WHITE {
    background-color: white;
}

.ANIMATE-DOWN .BG-WHITE h4 {
    margin: 0;

    font-size: 39px;
    font-weight: 600;
}



.ANIMATE-DOWN .NAVIGATION ul li.LOGO,
.ANIMATE-DOWN .NAVIGATION ul li.LOGO a {
    width: 200px;
}

.ANIMATE-DOWN .NAVIGATION ul li.ICON {
    width: calc(100vw - 200px - 24px);
}

.ANIMATE-DOWN .NAVIGATION ul li.LOGO a {
    display: inline-block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ANIMATE-DOWN .NAVIGATION ul li.LOGO a::after {
    content: "...";
}



.ANIMATE-DOWN .HEIGHT-RWD {
    height: 95px;
}

.ANIMATE-DOWN .HEIGHT-FIXED,
.ANIMATE-DOWN .HEIGHT-FIXED-SCROLL {
    clear: both;

    width: 100vw;

    height: calc(100vh - 95px);
    display: table-cell;
    vertical-align: middle;
}

/* === === ===
.ANIMATE-DOWN .HEIGHT-FIXED-SCROLL {
    padding-bottom: 12px;
}
=== === === */

.ANIMATE-DOWN .HEIGHT-FIXED > div,
.ANIMATE-DOWN .HEIGHT-FIXED-SCROLL > div {
    padding: 12px;
}

.ANIMATE-DOWN .HREF-ICON a,
.ANIMATE-DOWN .HREF-ICON span,
.ANIMATE-DOWN .HREF-LINK a,
.ANIMATE-DOWN .HREF-LINK span {
    display: block;
}

.ANIMATE-DOWN .HREF-ICON > a,
.ANIMATE-DOWN .HREF-LINK > a {
    width: calc(360px - 24px);
    padding: 12px 0 6px 0;

    text-align: left;
}

.ANIMATE-DOWN .HREF-ICON > a {
    width: calc(360px - 24px);
    font-size: 21px;
}
.ANIMATE-DOWN .HREF-LINK > a {
    width: calc(360px - 24px - 3px);
    font-size: 18px;
}

.ANIMATE-DOWN .HREF-ICON span,
.ANIMATE-DOWN .HREF-LINK span {
    font-size: 15px;
}

.ANIMATE-DOWN .HREF-ICON span {
    padding-top: 18px;
}
.ANIMATE-DOWN .HREF-LINK span {
    padding-top: 6px;
}

.ANIMATE-DOWN inline {
    display: inline-block;
}

.ANIMATE-DOWN inline icon,
.ANIMATE-DOWN inline middle {
    height: 42px;
    display: table-cell;
    vertical-align: middle;
}

.ANIMATE-DOWN inline middle {
    padding-left: 9px;
}
.ANIMATE-DOWN inline icon {
    width: 42px;
    border-radius: 50%;

    text-align: center;
}



/* === === === Two Block Style === === === */
.ANIMATE-DOWN .bootstrap .background {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.ANIMATE-DOWN .bootstrap .background.style1 {
    background-image: url(../background/above.jpg);
}
.ANIMATE-DOWN .bootstrap .background.style2 {
    background-image: url(../background/down.jpg);
}

.ANIMATE-DOWN .bootstrap .background > div {
    height: calc(100vh - 95px - 24px);
}

.ANIMATE-DOWN .bootstrap .background > div a {
    left: 0;
    right: 0;
    bottom: 24px;

    position: absolute;

    padding-left: 12px;
    padding-right: 12px;

    text-align: center;
}

.ANIMATE-DOWN .bootstrap .background > div a p.size {
    font-size: 21px;
}
.ANIMATE-DOWN .bootstrap .background > div a p {
    margin-top: 0;

    font-size: 18px;
}

.ANIMATE-DOWN .bootstrap .background > div a span {
    display: none;
}



.ANIMATE-DOWN .bootstrap .background.style1:hover,
.ANIMATE-DOWN .bootstrap .background.style2:hover {
    background-image: url(../background/border.jpg);
}

.ANIMATE-DOWN .bootstrap .background:hover > div {
    background-color: rgba(0, 0, 0, .175);

    animation-name: flash;
    animation-duration: 1s;
}

.ANIMATE-DOWN .bootstrap .background:hover > div a {
    text-shadow: 3px 6px 12px rgba(0, 0, 0, .75);
    font-weight: 600;
}
.ANIMATE-DOWN .bootstrap .background:hover > div a p {
    display: none;
}
.ANIMATE-DOWN .bootstrap .background:hover > div a span {
    display: block;
    padding-bottom: 12px;
}

@media screen and (max-width: 500px) {
    .ANIMATE-DOWN .bootstrap .background > div a {
        bottom: 0;
    }
}
/* === End === === === Two Block Style === === === */



.ANIMATE-DOWN .bootstrap img {

}

.ANIMATE-DOWN .bootstrap p {

}

@media screen and (max-width: 767px) {
    .ANIMATE-DOWN .bootstrap .background > div {
        height: calc(calc(100vh - 95px) / 2 - 12px);
    }
}






/* === === === === === === === === === === === === === === === === === === Background.css === === === */
/* === === === Style 01 === === === */
.HEADER .HEIGHT-7.BG-FIXED {
    background-image: url(../style/);
}

.HEADER .HEIGHT-3.BG-COVER {
    background-image: url(../style/);
}
.HEIGHT-3 .EXTRA > div {
    background-image: url(../style/);
}

/* === === === Style 02 === === === */
.HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER {
    background-image: url(../style/above.jpg);
}
.HEADER.INVERT-LOOK .HEIGHT-3 .EXTRA > div {
    background-image: url(../style/author.jpg);
}

.HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
    background-image: url(../style/down.jpg);
}

@media screen and (max-width: 767px) {
    .BEFORE-IMG content {
        content: url(../style/author.jpg);
    }
}

@media screen and (max-width: 500px) {
    /* === Header Background Style 01 === */
    .HEADER .HEADER-BG-MARGIN {
        background-image: url(../style/cover.jpg);
    }

    /* === Header Background Style 02 === */
    .HEADER .HEADER-BG-PADDING > div {
        background-image: url(../style/cover.jpg);
    }

    .HEADER.INVERT-LOOK .HEIGHT-3.BG-COVER {
        background-image: none;
    }
    .HEADER .HEIGHT-7,
    .HEADER .HEIGHT-7.BG-FIXED,
    .HEADER.INVERT-LOOK .HEIGHT-7.BG-FIXED {
        background-image: url(../style/index.jpg);
    }
}