/* ******************************************************************
* File name : base.css
* Summary : css base
* ******************************************************************
*/
/* -----------------------------------------------------------------
base
----------------------------------------------------------------- */
body{
position:relative;
width:100%;
height:100%;
line-height:145%;
color:#222;
}
#wrapper{
position:relative;
width:100%;
height:100%;
text-align:center;
}
/* --- responsive --- */
@media screen and (max-width:1143px){
body::before{
left:20px;
width:calc(100% - 40px);
height:53.1vw;
}
}
@media screen and (max-width:767px){
body::before{
top:auto;
bottom:0px;
}
body.bg_copy::before{
top:auto;
bottom:calc(50% - 80px);
}
}
@media print {
body{
margin:0;
width:1100px;
}
}
/* -----------------------------------------------------------------
header
----------------------------------------------------------------- */
header{
position:fixed;
top:0px;
left:0px;
width:100%;
height:120px;
margin:0px;
z-index:100;
transition-duration:0.5s;
}
#head_contents{
position:relative;
width:calc(100% - 8.0vw);
max-width:100%;
height:100%;
margin:0 auto;
text-align:center;
z-index:1;
}
header h1{
display:-webkit-flex;
display:flex;
justify-content:center;
align-items:center;
position:absolute;
top:0px;
left:0px;
width:auto;
height:100%;
text-align:left;
color:#FFF;
z-index:2;
}
header h1::before{
content: '';
display: inline-block;
width: 40px;
height: 40px;
background-color: #fff;
mask-image: url('data:image/svg+xml;utf8,');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
position: absolute;
left: 0;
/* top: 0; */
}
header h1 a{
/* display:inline-block; */
display: flex;
justify-content: flex-start;
align-items: center;
position:relative;
font-weight:700;
font-size:1.3rem;
text-decoration:none;
color:#FFF;
margin-left: 50px;
}
header h1 a:hover{
text-decoration:none;
}
header h1 a span{
font-size: 0.8rem;
margin-right: 3px;
font-weight: 800;
}
/* nav */
header nav{
position:absolute;
top:35px;
right:0px;
height:50px;
}
header nav > ul{
display:-webkit-flex;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:flex-end;
flex-wrap:wrap;
width:auto;
max-width:100%;
height:100%;
list-style:none;
}
header nav > ul > li{
display:inline-block;
margin:0 0 0 10px;
}
header nav > ul > li > a{
display:-webkit-flex;
display:flex;
justify-content:center;
align-items:center;
position:relative;
width:100%;
height:100%;
margin:0 auto;
padding:0 13px;
font-weight:500;
font-size:1.0rem;
text-decoration:none;
text-align:center;
color:#FFF;
z-index:10;
transition-duration:0.5s;
}
header nav > ul > li.active a,
header nav > ul > li > a:hover{
text-decoration:none;
/* color:#FFF; */
color: #00ABEB;
}
header nav > ul > li > a::after{
content:" ";
position:absolute;
left:50%;
bottom:0px;
width:0%;
height:3px;
/* background:#FFF; */
background: #00ABEB;
transition-duration:0.5s;
transform:translate(-50%, 0);
}
header nav > ul > li.active > a::after,
header nav > ul > li > a:hover::after{
width:100%;
}
/* other li */
header nav ul li#nav_top{
display:none;
}
/* --- responsive --- */
@media screen and (max-width:1100px){
}
/* -----------------------------------------------------------------
h_slide
----------------------------------------------------------------- */
header.h_slide{
position:fixed !important;
top:0px;
left:0px;
width:100%;
height:90px;
-moz-box-shadow:0px 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 0px 3px 3px rgba(0,0,0,0.2);
box-shadow:0px 0px 3px 3px rgba(0,0,0,0.2);
background:#FFF;
}
header.h_slide h1::before{
background-color: #000;
}
header.h_slide h1 a{
color:#000 !important;
}
header.h_slide nav{
position:absolute;
top:0px;
right:0px;
height:100%;
}
header.h_slide nav > ul > li > a{
color:#000;
}
header.h_slide nav > ul > li.active > a,
header.h_slide nav > ul > li > a:hover{
color:#00ABEB;
}
header.h_slide nav > ul > li > a::after{
background:#00ABEB;
}
/* --- responsive --- */
@media screen and (max-width:1100px){
}
/* -----------------------------------------------------------------
nav icon
----------------------------------------------------------------- */
#nav_icon{
display:none;
position:fixed;
top:12px;
right:20px;
width:36px;
height:36px;
background:none;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
cursor:pointer;
z-index:1000;
}
#nav_icon::before,
#nav_icon::after{
content:" ";
position:absolute;
left:4px;
width:29px;
height:1px;
background:#FFF;
transition-duration:0.5s;
}
#nav_icon::before{
top:7px;
}
#nav_icon::after{
top:25px;
}
#nav_icon span{
position:absolute;
top:16px;
left:4px;
width:29px;
height:1px;
background:#FFF;
transition-duration:0.5s;
}
/* sp open menu */
.open_menu #nav_icon::before,
.open_menu #nav_icon::after{
left:4px;
}
.open_menu #nav_icon::before{
top:16px;
transform:rotate(-135deg) !important;
}
.open_menu #nav_icon::after{
top:16px;
transform:rotate(135deg) !important;
}
.open_menu #nav_icon span{
left:50%;
width:0px;
}
/* -----------------------------------------------------------------
SP MENU
----------------------------------------------------------------- */
/* --- responsive --- */
@media only screen and (max-width:960px){
header{
position:fixed;
height:60px !important;
z-index:999;
}
header::before{
content:" ";
position:fixed;
top:-60px;
left:0px;
width:100%;
height:60px;
background:#FFF;
opacity:0;
}
header.open_menu::before,
header.h_slide::before{
opacity:1;
top:0px;
transition-duration:0.5s;
}
header.close_menu::before{
transition-duration:0.5s;
}
header #head_contents{
height:60px;
}
header h1{
display:-webkit-flex;
display:flex;
justify-content:flex-start;
align-items:center;
position:absolute;
top:0px;
left:0px;
width:calc(100% - 60px);
height:100%;
/* padding:2px 0 0 10px; */
text-align:center;
z-index:1000;
}
header.open_menu h1::before{
background-color: #000;
}
header.open_menu h1 a{
color:#000 !important;
}
header #main_nav{
position:fixed;
top:60px;
bottom:auto;
left:auto;
right:-100%;
width:100%;
height:100%;
padding-top:10px;
background:#00ABEB;
transition-duration:0.5s;
overflow-y:scroll;
z-index:999;
opacity:0.95;
}
header.open_menu #main_nav{
right:0px;
}
header #main_nav::before{
content:"MENU";
display:-webkit-flex;
display:flex;
justify-content:flex-start;
align-items:center;
position:fixed;
left:-30px;
top:100px;/* 30 + 50 */
width:300px;
height:30px;
padding-bottom:2px;
text-indent:-50px;
color:rgba(255,255,255,1);
transform:rotate(90deg) !important;
transform-origin:0 100%;
transition-duration:0.5s;
line-height:1;
z-index:1000;
letter-spacing: 0.1rem;
}
header.open_menu #main_nav::before{
left:0px;
}
header nav{
display:block;
position:relative;
height:auto;
padding:0px;
}
header nav > ul{
display:block;
width:290px;
height:auto !important;
margin:0 auto;
padding:20px 20px 20px;
}
header nav > ul > li{
position:relative !important;
top:0px !important;
left:auto !important;
right:auto !important;
width:250px !important;
max-width:100% !important;
height:60px !important;
min-height:40px !important;
margin:0 0 5px !important;
text-align:center;
color:#000;
transition-duration:0.5s;
background:none !important;
/* border:1px solid rgba(0,0,0,0.3); */
overflow:hidden;
}
header nav > ul > li::before,
header nav > ul > li::after{
display:none;
}
header nav ul li a{
display:-webkit-flex !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
position:relative !important;
width:100% !important;
height:100% !important;
padding:0px !important;
font-weight:400 !important;
text-decoration:none;
text-align:left;
font-size:1.3rem !important;
color:#FFF !important;
/* border:3px solid #FFF !important; */
z-index:10;
}
header nav > ul > li.active a,
header nav > ul > li > a:hover{
background:none !important;
}
header nav > ul > li > a:hover{
background:#FFF !important;
color:#00ABEB !important;
}
header.h_slide #nav_icon::before,
header.h_slide #nav_icon::after{
background:#000;
}
header.h_slide #nav_icon span{
background:#000;
}
#nav_icon{
display:block;
}
#sns_icon{
display:none;
}
#bdid_top header.open_menu #nav_icon::before,
#bdid_top header.open_menu #nav_icon::after,
#bdid_top header.open_menu #nav_icon span{
background:#000;
}
}
/* -----------------------------------------------------------------
main
----------------------------------------------------------------- */
main{
display:block;
position:relative;
margin-top:0px;
padding:0px;
width:100%;
z-index:1;
}
#main_contents{
position:relative;
width:100%;
max-width:100%;
margin:0 auto;
}
section{
position:relative;
width:100%;
max-width:100%;
margin:0 auto;
padding-bottom:150px;
}
/* --- responsive --- */
@media screen and (max-width:767px){
#main_contents{
}
}
/* -----------------------------------------------------------------
footer
----------------------------------------------------------------- */
footer{
position:relative;
width:100%;
margin:0px;
background:url(../../image/base/bg_ft.jpg) no-repeat center top/cover;
background-attachment:fixed;
text-align:left;
z-index:500;
}
@supports (background-image: url('../../image/base/bg_ft.webp')) {
footer {
background-image: url('../../image/base/bg_ft.webp');
}
}
footer *{
color:#FFF;
}
footer #ft_recruit{
position:relative;
width:1260px;
max-width:100%;
margin:0 auto;
padding:100px 20px 80px;
}
footer #ft_recruit strong{
display:block;
margin:0 0 10px;
font-size:2.5rem;
line-height:1.5;
}
footer #ft_recruit #ft_recruit_btn{
position:absolute;
top:calc(50%);
right:20px;
}
footer #ft_recruit #ft_recruit_btn a{
display:-webkit-flex;
display:flex;
justify-content:center;
align-items:center;
position:relative;
width:330px;
min-height:55px;
padding:0 50px;
font-weight:bold;
-moz-border-radius:2rem;
-webkit-border-radius:2rem;
border-radius:2rem;
background:#FFF;
color:#000;
transition-duration:0.5s;
}
footer #ft_recruit #ft_recruit_btn a:hover{
text-decoration:none;
opacity:0.7;
}
footer #ft_recruit #ft_recruit_btn a::before,
footer #ft_recruit #ft_recruit_btn a::after{
content:" ";
position:absolute;
transition-duration:0.5s;
}
footer #ft_recruit #ft_recruit_btn a::before{
top:calc(50%);
right:20px;
width:16px;
height:1px;
background:#000;
}
footer #ft_recruit #ft_recruit_btn a::after{
top:calc(50% - 5px);
right:20px;
width:10px;
height:10px;
border-top:1px solid #000;
border-right:1px solid #000;
transform:rotate(45deg);
}
/* --- responsive --- */
@media screen and (max-width:1000px){
footer #ft_recruit strong{
font-size:1.55rem;
}
footer #ft_recruit #ft_recruit_btn{
position:relative;
top:0px;
right:0px;
margin:30px 0 0;
}
footer #ft_recruit #ft_recruit_btn a{
width:100%;
}
}
footer #ft_contents{
position:relative;
padding:80px;
background:#000;
}
footer address{
position:relative;
margin:0 0 60px;
}
footer address h3{
position:relative;
margin:0 0 20px;
font-weight:bold;
font-size:1.7rem;
}
footer address p{
position:relative;
font-weight:normal;
font-size:0.87rem;
}
footer #ft_menu{
position:absolute;
top:80px;
right:80px;
}
footer #ft_menu ul{
display:-webkit-flex;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
flex-wrap:wrap;
}
footer #ft_menu ul li{
position:relative;
margin:0 0 0 20px;
}
footer #ft_menu ul li a{
display:inline-block;
padding:0 0 5px;
}
footer #ft_menu ul li a:hover{
text-decoration:none;
}
footer #ft_menu ul li a:after{
content:" ";
position:absolute;
left:50%;
bottom:0px;
width:0%;
height:3px;
background:#00ABEB;
transition-duration:0.5s;
transform:translate(-50%, 0);
}
footer #ft_menu ul li a:hover:after{
width:100%;
}
footer p#copy{
position:relative;
margin:0px;
padding:10px 0;
font-weight:400;
font-size:0.77rem;
text-align:center;
}
/* --- responsive --- */
@media screen and (max-width:767px){
footer #ft_contents{
padding:80px 20px;
}
footer #ft_menu{
display:none;
}
footer address h3{
font-size:1.6rem;
}
footer address p{
font-size:0.77rem;
}
footer p#copy{
padding:0px 0;
}
}
@media screen and (max-width:360px){
#contact span.f080{
display:block;
}
}
/* -----------------------------------------------------------------
pagetop
----------------------------------------------------------------- */
#pagetop{
position:relative;
width:100%;
height:40px;
}
#pagetop a{
display:block;
width:100%;
height:40px;
font-size:0.87rem;
text-align:center;
background:#00ABEB;
transition-duration:0.5s;
color:#FFF;
}
#pagetop a span{
display:inline-block;
position:relative;
padding:10px 0 0px 26px;
text-align:center;
color:#FFF;
}
#pagetop a span::before,
#pagetop a span::after{
content:" ";
position:absolute;
transition-duration:0.5s;
}
#pagetop a span::after{
top:calc(50% + 3px);
left:5px;
width:8px;
height:8px;
border-top:1px solid #FFF;
border-right:1px solid #FFF;
transform:rotate(-45deg);
}
#pagetop a:hover{
background:#006C95;
}
@media print{
#pagetop{
display:none;
}
}
/* -----------------------------------------------------------------
boo_top
----------------------------------------------------------------- */
#boo_top{
position:fixed;
/* right:30px; */
right: 5.8vw;
bottom:30px;
/* bottom: 5.8vw; */
width:100px;
height:100px;
/* background:url(../../image/base/back_to_top.png) no-repeat 0 0/contain; */
opacity:1;
z-index:500;
text-align: center;
}
#boo_top a{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
font-size: 1.5rem;
background: #fff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 2px solid #00ABEB;
transition-duration: 0.5s;
z-index:100;
}
#boo_top a span{
color: #00ABEB;
font-size: 16px;
}
#boo_top a:hover{
background:#00ABEB;
text-decoration:none;
}
#boo_top a:hover span{
color:#FFF;
}
#boo_top a::before,
#boo_top a::after{
content:" ";
position:absolute;
}
#boo_top a::before,
#boo_top a::after{
top:50%;
left:50%;
width:0%;
height:0%;
border:7px solid #00ABEB;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
transform:translate(-50%, -50%);
z-index:999;
opacity:0;
}
#boo_top a::after{
border:3px solid #00ABEB;
}
#boo_top a:hover::before{
animation:bootop_b 0.5s linear 0s both;
}
#boo_top a:hover::after{
animation:bootop_b 0.5s linear 0.1s both;
}
@keyframes bootop_b{
0% {opacity:0;width:0px;height:0px;}
50% {opacity:0.7;width:75px;height:75px;}
100% {opacity:0;width:150px;height:150px;}
}
@media print{
#boo_top{
display:none;
}
}
/* -----------------------------------------------------------------
btn
----------------------------------------------------------------- */
.btn{
position:relative;
width:100%;
text-align:center;
}
.btn a{
display:-webkit-flex;
display:flex;
justify-content:center;
align-items:center;
position:relative;
width:330px;
min-height:55px;
padding:0 50px;
font-weight:bold;
border:2px solid #FFF;
-moz-border-radius:2rem;
-webkit-border-radius:2rem;
border-radius:2rem;
background:#00ABEB;
color:#FFF;
transition-duration:0.5s;
}
.btn a:hover{
border:2px solid #00ABEB;
text-decoration:none;
background:#FFF;
color:#00ABEB;
}
.btn a::before,
.btn a::after{
content:" ";
position:absolute;
transition-duration:0.5s;
}
.btn a::before{
top:calc(50%);
right:20px;
width:16px;
height:1px;
background:#FFF;
}
.btn a::after{
top:calc(50% - 5px);
right:20px;
width:10px;
height:10px;
border-top:1px solid #FFF;
border-right:1px solid #FFF;
transform:rotate(45deg);
}
.btn a:hover::before{
background:#00ABEB;
}
.btn a:hover::after{
border-top:1px solid #00ABEB;
border-right:1px solid #00ABEB;
}
/* --- responsive --- */
@media screen and (max-width:767px){
.btn a{
width:100%;
padding: 0 20px;
}
}
/*------- アニメーション -------*/
.anim-box {
opacity: 0;
}
/* フェードイン */
.anim-box.fadein.is-animated {
animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* スライドイン */
.anim-box.slidein.is-animated {
animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slideIn {
0% {
transform: translateX(180px);
opacity: 0;
}
100% {
transform: translateX(0);
}
40%,100% {
opacity: 1;
}
}
/* ズームイン */
.anim-box.zoomin.is-animated {
animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes zoomIn {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* ぽよよん */
.anim-box.poyoyon.is-animated {
animation: poyoyon 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
@keyframes poyoyon {
0% {
transform: translateX(140px);
opacity: 0;
}
50% {
transform: translateX(0);
}
65% {
transform: translateX(30px);
}
100% {
transform: translateX(0);
}
20%,100% {
opacity: 1;
}
}
/* ポップアップ */
.anim-box.popup.is-animated {
animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}
@keyframes popup {
0% {
transform: translateY(40px) scale(0.8);
opacity: 0;
}
100% {
transform: translateY(0) scale(1.0);
}
80%, 100% {
opacity: 1;
}
}
/* ななめから出てくる */
.anim-box.slide-skew.is-animated {
animation: slide-skew 0.4s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@keyframes slide-skew {
0% {
transform: translate(180px,30px);
opacity: 0;
}
100% {
transform: translate(0,0);
}
20%,100% {
opacity: 1;
}
}
/* きらん */
.anim-box.kiran {
opacity: 1;
overflow: hidden;
position: relative;
cursor: pointer;
}
.anim-box.kiran::before {
background-color: #fff;
content: "";
display: block;
position: absolute;
top: -100px;
left: 0;
width: 30px;
height: 100%;
opacity: 0;
transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.anim-box.kiran:hover::before {
animation: kiran 0.5s linear 1;
}
@keyframes kiran {
0% {
transform: scale(2) rotate(45deg);
opacity: 0;
}
20% {
transform: scale(20) rotate(45deg);
opacity: 0.6;
}
40% {
transform: scale(30) rotate(45deg);
opacity: 0.4;
}
80% {
transform: scale(45) rotate(45deg);
opacity: 0.2;
}
100% {
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
/* 背景色が流れてくる */
.bg .bg-wrap {
position: relative;
display: inline-block;
margin-top: 5px;
}
.bg.is-animated .bg-wrap::before {
animation: bg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: left center;
}
.bg .bg-wrap .inn {
color: #fff;
display: inline-block;
font-size: 36px;
font-weight: bold;
padding: 5px 15px;
position: relative;
z-index: 1;
}
@keyframes bg {
0% {
opacity: 0;
transform: scaleX(0) translateX(-5%);
}
30% {
transform: scaleX(1) translateX(0);
}
100% {
transform: scaleX(1) translateX(0);
}
30%, 100% {
opacity: 1;
}
}
/* 文字が滑らかに表示される */
.smooth {
clip-path: inset(0 100% 0 0);
display: inline-block;
transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
transition-property: clip-path;
}
.smooth.is-animated {
clip-path: inset(0);
}
/* 文字がぬるりと現れる */
.matrix .bg-wrap,
.matrix .bg-wrap .inn {
display: block;
}
.matrix .bg-wrap {
overflow: hidden;
opacity: 0;
}
.matrix .bg-wrap + .bg-wrap {
margin-top: 10px;
}
.matrix .bg-wrap .inn.large {
font-size: 36px;
font-weight: bold;
}
.matrix .bg-wrap .inn.small {
font-size: 15px;
}
.matrix .bg-wrap .inn {
opacity: 0;
transform: matrix(1, 0, 0, 1, 0, 100);
transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.matrix.is-animated .bg-wrap {
opacity: 1;
}
.matrix.is-animated .bg-wrap .inn {
opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0);
}
/* 背景色が消えてから表示されるテキスト */
.mask-bg {
color: transparent;
display: inline-block;
font-size: 36px;
font-weight: bold;
overflow: hidden;
position: relative;
transition: color 0ms 450ms;
}
.mask-bg::after {
background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
bottom: 0;
content: '';
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translate(0, 100%);
}
.mask-bg.is-animated {
color: #362ae0;
}
.mask-bg.is-animated::after {
animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
@keyframes mask-bg {
0% {
transform: translate(0, 101%)
}
40%, 60% {
transform: translate(0, 0%)
}
100% {
transform: translate(0, -100%)
}
}