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


/* SERVICES */

#services{
    transition:0.5s;
}

#services h3{
    font-size:1.5em;
    line-height:1.5em;
    letter-spacing:0.1em;
    text-indent:-0.25em;
    font-weight:700;
}

#services p{
    width:35em;
    margin-left:auto;
    margin-right:auto;
    text-align: justify;
    font-weight:500;
    opacity:0;
}

#services.is_current p{
    animation:fadeIn 1s 0.5s ease forwards;
}


#services #img_services{
    position:relative;
    opacity:0;
    transition:1s ease;
}

#services.is_current #img_services{
    animation:fadeInUp 1s 0.3s ease-in-out forwards;
}

#img_services > p{
    width:auto;
    font-size:0.75em;
    font-weight:700;
    line-height:1.2em;
    text-align:center;
    position:absolute;
    opacity:0;
}

#services.is_current #img_services > p{
    animation:fadeIn 1s 2.2s ease forwards;
}

#img_services > p#s01{
    left:0;
    top:27%;
}

#img_services > p#s02{
    right:0;
    top:23%;
}

#img_services > p#s03{
    right:76%;
    top:74%;
}

#img_services > p#s04{
    left:75%;
    top:65%;
}

#img_services > p#s05{
    right:58%;
    bottom:1em;
}

#img_services > p#s06{
    left:57%;
    bottom:0;
}



/* OUR WORKS */

#works div.contents{
    width:100%;
    max-width:none;
}

#works div.scroll__wrapper{
    width:100%;
    margin:2em auto;
    padding-bottom:1.5em;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

/*横スクロールバー部分スタイル*/

.scroll__wrapper::-webkit-scrollbar {
    height: 5px;
    background: #fee883;
    display:none;
}
.scroll__wrapper::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 2.5px;
    background-color: white;
}
.scroll__wrapper::-webkit-scrollbar-button {
    display: none
}
.scroll__wrapper::-webkit-scrollbar-track-piece:start, 
.scroll__wrapper::-webkit-scrollbar-track-piece:end {
    background-color: transparent;
}

/*横並びリスト部分*/

#works dl.case{
    width:max-content;
    max-width:none;
    overflow-x: visible;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: nowrap;
  	flex-wrap:nowrap;
	justify-content: flex-start;
    animation: marquee-right 30s linear infinite;
    /*animation-fill-mode: forwards;*/
    animation-play-state: paused;
}

#works dl.case.move{
    animation-play-state: running;
}

@keyframes marquee-right {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}

#works dl.case div.work_title{
    width:max-content;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: nowrap;
  	flex-wrap:nowrap;
	justify-content:space-between;
    gap:3vw;
    margin-right:3vw;
}

#works dl.case div.folder{
    width:30vw;
    height:calc(30vw * 0.7612);
    min-width:300px;
    min-height:228px;
    margin-left:1em;
    position:relative;
}

#works dl.case div.folder::before{
    content:"";
    display:block;
    width:100%;
    height:100%;
    background:url("../img/top/works_folder_bg.png")no-repeat;
    background-size:100% auto;
}

#works dl.case div.folder::after{
    content:"";
    display:block;
    width:95%;
    height:50.8%;
    background:url("../img/top/works_folder_cover.png")no-repeat bottom;
    background-size:100% auto;
    position:absolute;
    left:5%;
    bottom:0;
    transition:0s;
}

#works dl.case div.folder dt{
    position:absolute;
    left:5%;
    top:8%;
    letter-spacing:0.1em;
    font-family:"din-2014",sans-serif;
    font-weight:700;
    line-height:0;
    font-size:0.65em;
}

#works dl.case div.folder dt >span{
    font-size:2em;
    margin-left:0.2em;
}

#works dl.case div.folder dt::before{
    content:"▼";
    display:inline-block;
    font-size:9px;
    margin-right:0.3em;
    margin-bottom:0.2em;
    transform:scaleX(1.2);
}


#works dl.case div.folder dd{
    position:absolute;
    transition:0s;
}

#works dl.case div.folder dd.c_img{
    width:89%;
    left:0;
    top:27%;
}

#works dl.case div.folder dd.c_img>img{
    width:86%;
    margin:0 auto;
    transition:0.3s;
}

#works dl.case div.folder dd.c_title{
    font-size:0.85em;
    font-weight:500;
    line-height:1.2em;
    z-index:5;
    width:70%;
    top:56%;
    left:21%;
}

#works dl.case div.folder dd.c_title >span.from{
    display:block;
    margin-top:0.6em;
    font-size:0.8em;
}


#works dl.case div.folder dd.more{
    font-size:0.65em;
    font-weight:400;
    display:block;
    right:16%;
    bottom:1em;
    z-index:5;
    color:#000;
    text-decoration:none; 
}

/*hover:フォルダが開く設定*/

#works dl.case a:hover div::after{
    transform: skew(-20deg, 0) scale(1.1, 0.5); 
    transform-origin:left bottom;
}

#works dl.case a:hover div dd.c_img>img{
    transform:translateY(-0.5em);
    transform-origin:center;
}

#works dl.case a:hover div dd.c_title{
    top:80%;
    left:25%;
    font-size:0.7em;
}

#works dl.case a:hover div dd.c_title span.from{
    display:none;
}

#works dl.case a:hover dd.more{
    right:5%;
    bottom:1em;
}

/*リンクボタンの設定*/

#works a.btn{
    font-size:0.9em;
    width:30ch;
    letter-spacing:0.2em;
    font-family:"din-2014",sans-serif;
    font-weight:700;
    padding:0.8em 0;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

#works a.btn img{
    height:1.4em;
    width:auto;
    display:inline-block;
    vertical-align: middle;
    margin-right:0.5em;
    margin-bottom:0.2em;
}

#works a.btn:hover{
    color:#fcd006;
    letter-spacing:0.3em;
}

#works a.btn.bg_base:hover img{
    animation:rotate 1s ease-in-out forwards;
}


#works a.btn.bg_bla:hover img{
    animation:bounce 1s ease-in-out forwards;
}

/*Historyページへのリンク部分*/

#works div.history_area{
    margin-bottom:5em;
    position:relative;
    background-image : linear-gradient(to right, #FFF, #FFF 12px, transparent 12px, transparent 24px);
    background-size: 24px 4px;
    background-position: center;
    background-repeat: repeat-x;
}

#works div.history_area::before,
#works div.history_area::after{
    color:#FFF;
    display:inline-block;
    font-family:"din-2014",sans-serif;
    font-weight:800;
    font-size:1.5em;
    letter-spacing:0.1em;
    position:absolute;
    top:calc(50% - 0.75em);
    height:1.5em;
    padding:0 0.5em;
    background:#fcd006;
}

#works div.history_area::before{
    content:"2010";
    left:5%;
}

#works div.history_area::after{
    content:"2026";
    right:5%;
}

/* ABOUT US */

#about dl > div{
    padding-bottom:1.5em;
    border-bottom:solid 1px #bebeaa;
}

#about dl dt,
#about dl dd{
    display:inline-block;
    vertical-align: top;
    letter-spacing:0.05em;
}

#about dl dt{
    width:30%;
    max-width:30ch;
    text-align:center;
}

#about dl dd{
    /*width:68%;*/
}

#about dl span.en{
    display:block;
    font-size:0.8em;
    margin-top:0.5em;
}

#about dl div#clients dd{
    display:block;
}

#about dl div#clients dd span.en{
    display:inline-block;
    margin-left:1.5em;
    margin-bottom:0.5em;
}

#about dl div#clients dd span.notes{
    display:block;
    margin-left:-0.5em;
    margin-bottom:1.5em;
}

#about dl div#clients >div.clients_wrap{
    width:auto;
    width:68%;
    display:inline-block;
    vertical-align: top;
}

#about dl dd > a.btn{
    width:20ch;
}

#about dl div#partnership dd{
    width:68%;
}

#about dl div#partnership dd a{
    width:30%;
    display:block;
    margin-bottom:1em;
    transition:0.5s ease;
}

#about dl div#partnership dd a:hover{
    opacity:0.5;
}

#about dl div#partnership dd span.en{
    display:inline-block;
    margin-left:1.5em;
    margin-bottom:0.5em;
}

/* MAP */

#map-canvas {
  width: 100%;
  height: calc(100vw * 0.3);
  /*↓ダミー用の設定：本番時削除
  background: url("../img/top/map_dammy.png") no-repeat;
  background-size:cover; */
}

/* Google map用設定　*/
    #map-canvas .gm-style-iw * {
        display: block;
        width: 100%;
    }
    #map-canvas .gm-style-iw h4, #map-canvas .gm-style-iw p {
        margin: 0;
        padding: 0;
    }
    #map-canvas .gm-style-iw a {
        color: #4272db;
    }
    #map-canvas.package-ban img {
      width: 800px;
      max-width: 90%;
      margin: 0 auto;
    }

/* FOOTER */

footer div.stack{
    margin-top:2em;
}

footer div.stack > div.logo{
    width:8em;
    height:calc(8em * 0.13);
    margin-left:auto;
    margin-right:auto;
    background: url("../img/common/logo_wh.png")no-repeat center;
    background-size:contain;
}

p#footer_add{
    font-size:0.7em;
}

footer div.stack a.btn{
    width:20ch;
    margin-left:auto;
    margin-right:auto;
    border:solid 3px #FFF;
    font-family:"din-2014",sans-serif;
    font-weight:700;
}

footer div.stack a.btn:hover{
    background:#FFF;
    color:#bebeaa;
}

footer a.footer_link{
    width:auto;
    font-size:0.7em;
    margin:0.8em auto  1.5em;
    display:inline-block;
    text-align: center;
    color:#FFF;
    text-decoration:none;
    transition:0.5s;
}

footer a.footer_link:hover{
    color:#c8c8b4;
}

/* =======================================
	SMPH
======================================= */

@media screen and (max-width: 640px) {
    
/* services */
    
#services p{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    text-align: justify;
    font-weight:500;
}
    
    #img_services{
        width:90%;
        margin:1.5em auto 0;
    }
    
#img_services > p{
    font-size:0.6em;
    width:max-content;
    text-align:center;
}

#img_services > p#s01{
    left:-1.5%;
    top:20%;
}

#img_services > p#s02{
    right:-2%;
    top:18%;
}

#img_services > p#s03{
    right:70%;
    top:63%;
}

#img_services > p#s04{
    left:72%;
    top:61.5%;
}

#img_services > p#s05{
    right:56%;
    top:95%;
}

#img_services > p#s06{
    left:54.5%;
    top:93%;
}
    
/* OUR WORKS */
    #works a.btn{
    font-size:0.9em;
    width:23ch;
    }
 
#works div.history_area::before,
#works div.history_area::after{
    font-size:1.3em;
    letter-spacing: 0;
    top:calc(50% - 0.7em);
    height:1.3em;
    padding:0 0.2em;
}
    
#works div.history_area::before{
    content:"2010";
    left:0;
}

#works div.history_area::after{
    content:"2026";
    right:0;
}
    
    #works div.history_area{
    margin-bottom:5em;
    position:relative;
    background-image : linear-gradient(to right, #FFF, #FFF 5px, transparent 5px, transparent 15px);
    background-size: 15px 3px;
    }
    
/* ABOUT US */
    
    #about div.contents{
        width:70%;
    }
    
    #about dl{
        font-size:110%;
    }

    #about dl dt{
        width:100%;
        text-align:left;
        margin-bottom:1em;
    }
    #about dl dd{
    width:100%;
    }
    
    #about dl dt > span.en{
        display:inline-block;
        margin-left:1em;
    }
    
    #about dl div#clients dd span.en,
    #about dl div#partnership dd span.en{
    display:block;
    margin-left:0;
    margin-top:0;
}
    
    #about dl div#clients dd span.notes{
    display:block;
    margin-left:0;
    margin-bottom:1.5em;
}
    
    #about dl div#clients >div.clients_wrap{
        width:100%;
    }
    
    #about dl div#partnership dd{
        width:100%;
    }
    
    #about dl div#partnership dd a{
    width:70%;
    display:block;
    margin-bottom:1em;
}
    
/* MAP */

    #map-canvas {
      height: calc(100vw * 0.6);
      /*↓ダミー用の設定：本番時削除
      background: url("../img/top/map_dammy.png") no-repeat center;
      background-size: auto 100%;*/
    }
    
/* FOOTER */
    p#footer_add{
    width:60vw;
    margin-left:auto;
    margin-right:auto;
    }    
}