/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
.factory-item
{
    font-family: "Google Sans Flex", sans-serif;
}
.fullmap img
{
    width:100%;
}
.factory-item .fbox-wrap
{
    width:17vw;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 2;
}
.fbox
{
    opacity:0;
    position:absolute;
    bottom:calc(5rem + 1rem/2);
}
.factory-item
{
    position:absolute;
    width: calc(99vw*580/1728);
    cursor: pointer;
}

.factory-item .normal img,
.factory-item .hover img
{
    width:100%;
}
.factory-item .normal,
.factory-item .hover
{
    position:absolute;
    bottom:0;
    z-index:1;
    width: 100%;
}
.factory-item .hover
{
    opacity:0;
}
.kizuna-1
{
    bottom:16.66%;
    left:0;
    width: calc(100vw*536/1728);
    opacity:01;
}
.kizuna-2
{
    bottom:53.125%;
    left:34.75%;
     width:calc(100vw*462/1728);
    opacity:01;
}
.kizuna-3
{
    bottom:50.77%;
    right:0%;
     width:calc(100vw*450/1728);
    opacity:01;
}
.kizuna-5
{
    bottom:62.1%;
    left:21.6%;
     width:calc(100vw*339/1728);
     opacity:01;
}

.fbox-wrap .dots
{
    width:1.1vw;
    height:1.1vw;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    position: absolute;
    z-index: -2;
    opacity: 1;
}
.fbox-wrap .dots:before
{
    content:'';
    position:absolute;
    left:0rem;
    top:50%;
    transform:translateY(-50%);
    width:100%;
    height:100%;
    border-radius:50%;
    border:.1vw solid #1D6EBF;
     animation: showhide .8s infinite;
    left:0%;
    bottom:0;
}
.fbox-wrap .dots svg
{
    width:.6vw;
     animation: pulse .8s infinite;
    
}
@keyframes pulse {
    0% {
        transform: scale(0.95);
       
    }

    70% {
        transform: scale(1.25);
      
    }

    100% {
        transform: scale(0.95);
        
    }
}
@keyframes showhide {
    0% {
       opacity:1;
       
    }

    70% {
         opacity:0;
      
    }

    100% {
        opacity:1;
        
    }
}
.kizuna-1 .fbox-wrap
{
    bottom: calc(100vw*0.185*(1260/2400));
    left: 20.65vw;
}
.kizuna-2 .fbox-wrap
{
    bottom: calc(100vw*0.105*(1260/2400));
     left: 53.5%;
}
.kizuna-3 .fbox-wrap
{
    bottom: calc(100vw*0.1215*(1260/2400));
    left: 12.15vw;
}
.kizuna-5 .fbox-wrap
{
    bottom: calc(100vw*0.065*(1260/2400));
    left: 9.5vw;
}
.fbox
{
    background:#fff;
    box-shadow: 0px 4px 14px 0px #00000040;
    padding:.75rem;
    transition:all .5s;
    border-radius:1rem;
    z-index: 7;
}
.factory-item:hover .fbox
{
    opacity:1;
    z-index: 2222;
}
.factory-item:hover .normal
{
    opacity:0;
}
.factory-item:hover .hover
{
    opacity:1;
}
.fbox h3
{
    color:#023A6C;
    font-size:1.1vw;
    font-weight:700;
    margin:.5rem 0;
}
.fbox ul
{
    display:flex;
    list-style:none;
    padding:0;
    gap:1rem;
    margin:0;
    color:#0F51A4;
    margin:.5rem 0;
    font-size:.8vw;
}
.hidenormal .normal
{
    opacity:0;
}
.fbox ul li:not(:first-child):before
{
    content:'';
    position:absolute;
    left:0rem;
    top:60%;
    transform:translateY(-50%) translateX(-50%);
    width:.25rem;
    height:.25rem;
   background:#D9D9D9;
    border-radius:50%;
    left:-.5rem;
}
.fbox ul li
{
    position:relative;

}
.fbox a
{
    color:#1D6EBF;
    border:.25rem solid #1D6EBF;
    padding:.55rem 1.5rem;
    box-sizing:border-box;
    border-radius:1rem;
    transition:all .5s;
    left:50%;
    position:absolute;
    transform:translateX(-50%) translateY(50%);
    bottom:0;
    font-size:.8vw;
    font-weight:500;
    text-decoration:none;
    background:#fff;
    z-index: 3;
    white-space: nowrap;
}
.fbox a:hover
{
    background:#1D6EBF;
    color:#fff;
}
.fbox a:after
{
    content:'';
    position:absolute;
    left:50%;
    top:100%;
    transform:translateX(-50%);
    width:.175rem;
    height:calc(5rem - 50%);
    background:#1D6EBF;
    z-index: 0;
}
.fbox-img
{
    display:grid;
    border-radius:.75rem;
    overflow:hidden;
}
.fbox-img img
{
    aspect-ratio: 322/184;
    object-fit: cover;
    width: 100%;
    height:auto;
    
}
@media only screen and (max-width: 599px) 
{
	.kizuna-1
    {
        bottom: 15.65%;
        left: 0;
        width: calc(100vw * 541 / 1728);
        opacity: 01;
    }
    .kizuna-2
    {
        bottom: 51.5%;
        left: 34.7%;
        width: calc(100vw*464/1728);
        opacity: 01;
    }
    .kizuna-3
    {
        bottom: 49.21%;
        right: 0%;
        width: calc(100vw*455/1728);
        opacity: 01;
    }
    .kizuna-5
    {
        bottom: 60.215%;
        left: 21.6%;
        width: calc(100vw*344/1728);
        opacity: 01;
    }
    .factory-item .fbox-wrap
    {
        width:35vw;
    }
    .fbox
    {
        padding:.325rem;
        bottom: calc(3rem + .5rem / 2);
        border-radius: .725rem;
    }
    .fbox a:after
    {
        height: calc(3rem - 50%);
        width: .1375rem;
    }
    .fbox h3
    {
        font-size:11px;
    }
    .fbox ul
    {
        font-size:7px;
    }
    .fbox a
    {
        font-size:7px;
        border-width: .175rem;
        padding: .375rem 1.25rem;
        border-radius: .725rem;
    }
    .fbox ul li:not(:first-child):before
    {
        width:.15rem;
        height:.15rem;
        left: -.475rem;
    }
    .fbox-img
    {
        border-radius:.725rem;
    }
    .fbox-wrap .dots
    {
        width:1.75vw;
        height:1.75vw;
    }
    .fbox-wrap .dots svg
    {
        width:1vw;
    }
    .kizuna-1 .fbox-wrap
    {
        bottom: calc(100vw*0.2215*(1260/2400));
        left: 20.65vw;
    }
    .kizuna-2 .fbox-wrap
    {
        bottom: calc(100vw*0.125*(1260/2400));
         left: 52.5%;
    }
    .kizuna-3 .fbox-wrap
    {
        bottom: calc(100vw*0.1295*(1260/2400));
        left: 12.175vw;
    }
    .kizuna-5 .fbox-wrap
    {
        bottom: calc(100vw*0.0725*(1260/2400));
        left: 9.75vw;
    }
    .kizuna-1:not(.hidenormal) ~ .kizuna-5.hidenormal .dots
    {
        opacity:0;
    }
    .kizuna-3 .fbox-wrap .fbox
    {
        transform:translateX(-.75rem);
    }
     .kizuna-3 .fbox-wrap .fbox a:after
    {
        transform:translateX(calc(-50% + .75rem));
    }
    
}