@charset "utf-8";
/* CSS Document */

/* ---------------------------------------
	OUR HISTORY

    !! 年表の順番はhistory_order.cssで設定 !!

--------------------------------------- */

#ourhistory div.contents:first-child{
    padding-bottom:1em;
}

#ourhistory p.lead{
    width:80%;
    margin:0 auto;
}

.contents#history_area{
    width:100%;
    max-width:auto;
    padding:0;
}

div#history{
    position:relative;
}

div.timeline{
    position:absolute;
    left:50%;
    top:8em;
    width:65rem;
    height:87%;
    max-width:1200px;
    transform: translateX(-60%);
}

div.timeline img{
    width:100%;
    height:100%;
}

#history ul.flexbox{
    max-width:1200px;
    -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
    gap:1em;
    margin-bottom:0;
}

#history ul li{
    width:30%;
    position:relative;
    padding:0.2em 1em 1em;
    margin-top:2.2em;
}

#history ul li.anniv{
    width:40%;
}

#history ul li.blank{
    width:10%;
    border:none;
}

#history ul li.bg_base > * + * {
    margin-top: 0.5rem;
}

.scroll_item,.pop{
    opacity:0;
}

.scroll_item.anniv,
.pop.anniv{
    opacity:0.6;
    transform:translateY(-2rem);
    transition:1s;
}
    

.scroll_item.show,
.pop.show{
    animation:fadeInDown 0.8s ease forwards; 
}

.scroll_item.anniv.show,
.pop.anniv.show{
    opacity:1;
    animation:none;
    transform:translateY(0);
}

#history ul li h3,
div.wrapper div h3,
div.wrapper div h4{
    font-size:1.6em;
    font-family:"din-2014",sans-serif;
    font-weight:700;
    letter-spacing:0.02em;
    text-align:left;
    margin:0;
    padding:0;
}

#history ul li.bg_base h3::before,
div.wrapper div h3::before{
    content:" ";
    display:inline-block;
    margin-right:0.2em;
    width:1.1em;
    height:1.1em;
    background: url("../img/common/icon_pyramid.svg") no-repeat bottom;
    background-size:contain;
}

#history ul li.point{
    padding:0;
    color:#FFF;
    margin-top:0;
}

#history ul li span.trigger{
    display:block;
    width:6ch;
    margin:0 auto;
    height:auto;
    cursor:pointer;
    transition:0.3s;
}

#history ul li span.trigger.year_animal{
    position:absolute;
    right:0.5em;
    top:0.5em;
    z-index:5;
}

#history ul li.bg_base p{
    font-size:0.7em;
    font-weight:500;
}

#history ul li span.trigger:hover{
    transform:scale(1.15);
    transform-origin:center;
}

#history ul li.anniv div.p_history.flexbox > img{
    width:50%;
}

/*pre_history*/

#pre_history{
    padding:8em 0 5em;
    width:90%;
    max-width:1200px;
    margin:0 auto;
    background: url("../img/common/bg_w-line.svg") repeat-y center top;
    background-size:18px auto;
    position:relative;
}

#pre_history div.pre_year.flexbox{
    align-items: flex-start;
    margin-bottom:1em;
}

div.pre_wrap{
    position:relative;
}

div.pre_wrap > h3{
    font-size:1.5em;
    font-family:"din-2014",sans-serif;
    font-weight:700;
    background:#fcd006;
    padding:0.1em 0;
    letter-spacing:0.1em;
    position:absolute;
    display:block;
    width:auto;
    height:1.5em;
    left:50%;
    top:0.5em;
    margin-left:-2.3ch;
    color:#FFF;
}


#pre_history div.pre_year.flexbox > div{
    width:44%;
    padding:0.8em 0;
    position:relative;
}

#pre_history div.pre_year.flexbox:last-child{
    padding-top:1.5em;
}

#pre_history div.pre_year.flexbox > div.bg_wh::after{
    content:"";
    display:block;
    width:2.4ch;
    height:2.4ch;
    background: url("../img/history/fukikuchi.svg")no-repeat;
    background-size:contain;
    position:absolute;
    top:50%;
    margin-top:-2ch;
}

#pre_history div.pre_year.flexbox > div.bg_wh.takata::after{
    right:-2ch;
    transform:rotateY(180deg);
}
#pre_history div.pre_year.flexbox > div.bg_wh.yatou::after{
    left:-2ch;
}

#pre_history div.pre_year.flexbox > div p{
    width:90%;
    margin:0 auto;
    font-size:0.7em;
}

#pre_history div.pre_year.flexbox > div p.name{
    font-size:0.75em;
    font-weight:600;
}

#pre_history div.pre_year.flexbox > div p.name::before{
    content:"";
    display:inline-block;
    width:0.8em;
    height:0.8em;
}

#pre_history div.pre_year.flexbox > div.takata p.name::before{
    background: url("../img/common/nav_dot.svg")no-repeat;
    background-size:contain;
}

#pre_history div.pre_year.flexbox > div.yatou p.name::before{
    background: url("../img/common/nav_dot_3.svg")no-repeat;
    background-size:contain;
}

#pre_history div.pre_year .bg_wh{
    opacity:0;
}

#pre_history div.pre_year .bg_wh.show{
  animation:fadeInUp 1s 0.6s ease forwards; 
}

/*modal*/

.modal_bg{
    width:100%;
    height:100%;
    background:rgba(252,208,6,0.9);
    position:fixed;
    left:0;
    top:0;
    z-index:100;
    display:none;
    overflow-y:auto;
}

.modal_bg > span.close{
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    z-index:101;
}

div.wrapper{
    display:none;
    width:50%;
    max-width:420px;
    background:#FFF;
    border:solid 22px #e4e3d1;
    border-radius:10px;
    margin:0 auto 0;
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%); 
    transform: translateY(-50%) translateX(-50%);
    z-index:102;
}

div.wrapper.wide{
    max-width:620px;
}

div.wrapper div{
    position:relative;
    width:100%;
    height:100%;
    padding:1em;
}

/*#ne{
    background:url("../img/history/ne_2020.jpg") no-repeat;
    background-position: 95% 95%;
    background-size:40%;
}

#ushi{
    background:url("../img/history/ushi_2021.jpg") no-repeat;
    background-position: 95% 95%;
    background-size:40%;
}

#tora{
    background:url("../img/history/tora_2022.jpg") no-repeat;
    background-position: center 98%;
    background-size:70%;
}
#u{
    background:url("../img/history/u_2023_01.jpg") no-repeat;
    background-position: 100% 0;
    background-size:45%;
}

#u::after{
    content:"";
    width:100%;
    height:100%;
    min-height:300px;
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    background:url("../img/history/u_2023_02.jpg") no-repeat;
    background-position: 5% 95%;
    background-size:46%;
    z-index:-1;
}

#tatsu{
    background:url("../img/history/tatsu_2024.jpg") no-repeat;
    background-position: 95% 10%;
    background-size:40%;
}

    #tatsu ul{
        width:60%;
}

#mi{
    background:url("../img/history/mi_2025.jpg") no-repeat;
    background-position: center 100%;
    background-size:60%;
}

#uma{
    background:url("../img/history/uma_2026.jpg") no-repeat;
    background-position: 90% 90%;
    background-size:auto 60%;
}
div.wrapper div p.greeting{
    margin-top:3em;
}

div.wrapper div h4{
    font-size:1em;
    letter-spacing:0.08em;
    margin-top:1.5em;
}


div.wrapper ul li{
    font-size:0.7em;
    margin-bottom:0.5em;
    list-style-type: disc;
    margin-left:1.5em;
}*/

div.wrapper p.close{
    color:#FFF;
    font-weight:900;
    font-size:2em;
    position:absolute;
    right:-30px;
    bottom:-1.75em;
    cursor:pointer;
    transition:0.2s;
    
    
}



/* =======================================
	SMPH
======================================= */
@media screen and (max-width: 640px) {
    
    
    #ourhistory div.contents:first-child{
    padding-bottom:0;
    }
    
    #history{
    overflow:hidden;
    }

    div.timeline{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    max-width:auto;
    transform: none;
    background:url("../img/common/bg_line.svg") repeat-y center;
    background-size: 5px auto;
    }
    
     div.timeline::after{
         content:" ";
         position:absolute;
         left:0;
         top:0;
         width:100%;
         height:100%;
         background:#fcd006;
         animation: sp_line_stroke 15s ease forwards;
    }
    
    div.timeline img{
        display:none;
    }
    
    #history ul li,
    #history ul li.point{
        width:70%;
        margin-top:2.5em;
    }
    
    #history ul li.anniv{
        width:80%;
    }
    
    div.point >div.box-center{
        display:relative;
        top:auto;
        left:auto;
        transform:none;
    }
    
    #history ul li.point{
    padding:1em 0 3em;
        position:relative;
}
    
    #history ul li.point h3{
        letter-spacing:0.1em;
        position:absolute;
        top:50%;
        margin-top:-0.5em;
    }
    
    #history ul li.point:nth-child(odd) h3{ 
        right:-4.5rem;
    }
    
    #history ul li.point:nth-child(even) h3{ 
        left:-4.5rem;
    }
    
    #history ul li.blank{
        display:none;
}
    
    #pre_history{
    padding-top:5em;
    width:80%;
    background-size:14px auto;
    }
    
    #pre_history div.pre_year.flexbox > div{
    width:38%;
    padding:0.2em 0;
}
    
    #pre_history div.pre_year.flexbox > div.bg_wh::after{
    width:2ch;
    height:2ch;
    top:50%;
    margin-top:-2ch;
}
    
    #pre_history div.pre_year.flexbox > div.bg_wh.takata::after{
    right:-1.7ch;
}
#pre_history div.pre_year.flexbox > div.bg_wh.yatou::after{
    left:-1.7ch;
}
    
    div.pre_wrap:last-child{
        padding-top:2em;
        margin-top:3em;
    }
    
    div.pre_wrap:nth-child(odd) > h3{
    left:23%;
    top:43%;
    margin-left:0;
}
    div.pre_wrap:nth-child(even) > h3{
    left:auto;
    right:23%;
    top:43%;
    margin-left:0;
}
     div.pre_wrap:last-child > h3{
    left:23%;
    right:auto;
    top:70%;
    bottom:1.5em;
    margin-left:0;
}
    
    div.wrapper{
    width:90%;
    max-width:auto;
    border:solid 18px #e4e3d1;
    border-radius:9px;
}
    
    div.wrapper div{
    padding:1em;
}
    
    div.wrapper div h4{
    margin-top:0.5em;
}
    
/* 干支背景 */

/*#tatsu{
    background-position:100% 10%;
    background-size:auto 70%;
}
    #tatsu ul{
        width:50%;
    }*/
    
    div.wrapper div p.greeting{
        margin-top:0;
    }
    
    
    div.wrapper ul{
    width:100%;
}

    div.wrapper ul li{
        font-size:0.7em;
    }
}

   @keyframes sp_line_stroke {
         from {
		  transform:translateY(0);
	       }
       
	    to {
		  transform:translateY(100%);
	       }
        }