@charset "utf-8";

/* ローディング */
.grid::before { content: ""; display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: #fff; z-index: 1; animation: load 1s .5s cubic-bezier(0.5, 0, 0, 1) forwards; }
header .logo { opacity: 0; animation: fade .8s 2.5s cubic-bezier(0.5, 0, 0, 1) forwards; }
.hamburger { opacity: 0; animation: fade .8s 2.5s cubic-bezier(0.5, 0, 0, 1) forwards; }

/*流れる文字*/
.animation_text { overflow:hidden; }
.flows { white-space: nowrap; animation: text_scroll 12s linear infinite; padding-left: 100%; }
@keyframes text_scroll {
   0% { transform: translateX(0)}
   100% { transform: translateX(-100%)}
}

h2 { font-size: clamp(1.063rem, 1.016rem + 0.23vw, 1.25rem); font-weight: 700; margin-bottom: 10%; color: #00479d; }
h2 span { display: block; font-size: clamp(1.75rem, 1.25rem + 2.5vw, 3.75rem); font-family: 'Anton', 'Noto Sans JP', sans-serif; margin-bottom:12px; color: #00479d; }

#Kv_area { padding: 5%; box-sizing: border-box; position: relative; margin-top: 2%; z-index: 0; }
#Kv_area .slide { width: 75%; margin-right: 0; margin-left: auto; overflow: hidden; }
#Kv_area .pointo_logo { position: absolute; width: 45%; top: 0%; z-index: 2; opacity: 0; animation: fade .8s 1.5s cubic-bezier(0.5, 0, 0, 1) forwards; }

#News { position: absolute; background: #fff; padding: 35px 40px; box-sizing: border-box; z-index: 2; width: 50%; right: 7%; bottom: 0; transform: translateY(130px); animation: up .8s 1.8s cubic-bezier(0.5, 0, 0, 1) forwards; opacity: 0; }
#News .ttl_flex { display: flex; margin-bottom: 1%; }
#News .ttl { font-size: clamp(1.125rem, 1.063rem + 0.31vw, 1.375rem); font-family: 'Anton', 'Noto Sans JP', sans-serif; line-height: 1; }
#News a.link { margin-left: 3%; font-size:clamp(0.75rem, 0.719rem + 0.16vw, 0.875rem); background: #00479d; color: #fff; padding: 3px 8px; }
#News a.link::after { content: ''; display: inline-block; background: url("../images/common/triangle.png")no-repeat; background-size: contain; width: 8px; height: 6px; vertical-align: 2px; margin-left: 4px; }
#News a.link:hover { opacity: .7; }
#News a.news_item { font-size: 1.6em; line-height: 1.5; /*display: flex;*/ display: inline-flex; align-items: center; transition: .5s; }
#News a.news_item time { font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem); margin-right: 10px; display: table; }
#News a.news_item:hover { transform: translate( 10px, 0); }

#Intro { height: 100vh; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding-left: 5%; padding-right: 5%; }
#Intro h1 { text-align: center; margin-bottom: 4%; font-size:clamp(1.75rem, 1.25rem + 2.5vw, 3.75rem); line-height: 1.5; font-weight: 700; }
#Intro p.txt { text-align: center; font-size: clamp(1.125rem, 1.031rem + 0.47vw, 1.5rem); line-height: 1.8; }
#Intro .en_copy { position: absolute; bottom: 10%; right: 5%; width: 40%; z-index: -1; }

#Company { color: #00479d; background: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden; }
#Company p.txt { font-size: clamp(1rem, 0.969rem + 0.16vw, 1.125rem); line-height: 2; margin-bottom: 20%; }
#Company a.btn , #Recruit a.btn { font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem); line-height: 1.3; border: 1px solid #00479d; box-sizing: border-box; padding: 20px; display: inline-block; position: relative; z-index: 0; transition: .4s; }
#Company a.btn { text-align: left; }
#Company a.mgn { margin-bottom: 3%; }
#Company a.btn::before, #Recruit a.btn::before { content: ""; position: absolute; left: 0; top: 0; background: #00479d; width: 100%; height: 100%; transition: transform .4s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform: scale(0, 1); transform-origin: right top; z-index: -1; }
#Company a.btn::after, #Recruit a.btn::after { content: ""; display: inline-block; width: 8px; height: 7px; -webkit-mask: url(../images/common/ic_arrow.svg) no-repeat; mask: url(../images/common/ic_arrow.svg) no-repeat; -webkit-mask-size: 8px auto; mask-size: 8px auto; background: #00479d; margin-left: 30px; vertical-align: 0.1em; transition: .5s; }
#Company a.btn:hover , #Recruit a.btn:hover { color: #fff; }
#Company a.btn:hover::before, #Recruit a.btn:hover::before { transform-origin:left top; transform:scale(1, 1); }
#Company a.btn:hover::after , #Recruit a.btn:hover::after { background: #fff; }
#Company .txt_area { width: 34%; padding: 0 5%; box-sizing: border-box; }
#Company .ph_area { display: flex; width: 66%; }

#Works { padding: 15% 5%; overflow: hidden; }
#Works .head { position: relative; }
#Works h2 , #Works h2 span { color: #fff; text-align: center; }
#Works a.link { position: absolute; display: inline-block; font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem); color: #fff; right: 0; bottom: 10%; }
#Works a.link img.triangle { width: 10px; height: 10px; vertical-align: 0px; margin-left: 30px; }
#Works a.link::after { position: absolute; bottom: -10px; left: 0; content: ''; width: 100%; height: 1px; background: #fff; transform: scale(0, 1); transform-origin: right top; transition: transform .3s; }
#Works a.link:hover::after { transform-origin: left top; transform: scale(1, 1); }
.works_slide { overflow: visible; }

#Recruit { display: flex; background: #fff; }
#Recruit h2 { text-align: center; }
#Recruit .rec_img { width: calc(100% / 3); }
#Recruit .haad { width: calc(100% / 3); display: flex; align-items: center; justify-content: center; flex-direction: column; }

@keyframes load {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%) }
}
@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes up {
    0% { transform: translateY(130px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/*ノートPC*/
@media (max-width: 1600px) and (max-height: 900px) {
}


@media only screen and (max-width: 1500px) {
/*    #News a.news_item { flex-wrap: wrap; }*/
}

@media only screen and (max-width: 960px){
    #Kv_area { margin-top: 0; padding: 3% 5%; }
    #Kv_area .slide { width: 100%; }
    #Kv_area .pointo_logo { width: 40%; top: 0; z-index: 2; }

    #News { position: relative; padding: 5% 7%; z-index: 2; width: 95%; margin: -35px auto 0 auto; right: 0; }

    #Company { align-items: stretch; }
	#Company .txt_area { width: 50%; padding: 8% 5%; box-sizing: border-box; }
    #Company .ph_area { display: flex; width: 50%; }
    #Company .ph_area img { object-fit: cover; height: 100%; }

    #Recruit { align-items: stretch; }
    #Recruit .haad { width: 40%; padding: 5% 0; }
    #Recruit .rec_img { width: 30%; }
    #Recruit .rec_img img { object-fit: cover; height: 100%; }
}

@media only screen and (max-width: 767px){
	
}

@media only screen and (max-width: 600px){
    #Intro { height: auto; padding: 15% 5%; }

	#Company { flex-wrap: wrap; }
	#Company .txt_area { width: 100%; text-align: center; }
    #Company .ph_area { width: 100%; }
    #Company p.txt { margin-bottom: 10%; }

    #Recruit { flex-wrap: wrap; }
    #Recruit .haad { width: 100%; padding: 8% 0; }
    #Recruit .rec_img { width: 50%; order: 3; }
    #Recruit .rec_img img { object-fit: cover; height: 100%; }
}

@media only screen and (max-width: 360px){
	
}