/* ********************************************
// --- リセット ---
// ※ブラウザのデフォルトCSSをリセット
// ***************************************** */
  
*{
  margin: 0;
  padding: 0;
}
html{
font-size: 16px;
height: auto;
}
body {
font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
header, footer, nav, menu, article, aside, section, details, figcaption, figure{
display: block;
}
ul, ol {
list-style: none;
}
table {
border-collapse: collapse;
}
img {
vertical-align: bottom;
}
a img {
border: none;
}
strong {
font-weight: normal;
}
i{
font-style: normal;
}

.br::before {
content: "\A" ;
white-space: pre ;
}

.footer-sp{
  display: none;
}

/* ****************************************************************************************************************** */
/*フェードイン
/* ****************************************************************************************************************** */
.box {
margin: 0 0 50px;   /* 下方向に適度な余白 */
opacity: 0;         /* 初期値は透明にしておく */
transition: 1s;    /* 動くスピードを0.5秒に指定 */
position: relative; /* 相対位置の設定 */
top: 50px;          /* 事前に下に50pxずらしておく */
}

.active {
opacity: 1;         /* 透明度を元に戻す */
top: 0;             /* ずらしていた位置を戻すことで上に上がっているようにみえる */
}


/* ****************************************************************************************************************** */
/*トップページ
/* ****************************************************************************************************************** */
/* ****************************************************************************************************************** */
/*ビデオ
/* ****************************************************************************************************************** */
#topvideo{
width: 100%;
}

.homeimage{
  display: none;
  }

@media screen and (max-width: 1400px) {
#topvideo{
  width: 1360px;
}
}

@media screen and (max-width: 1200px) {
#topvideo{
  width: 1500px;
}
}

@media screen and (max-width: 450px){
  #topvideo{
  display: none;
  }

  .homeimage{
    display: inline;
    width: 100%;
    height: auto;
  }
}


/* ****************************************************************************************************************** */
/*ビデオ文字
/* ****************************************************************************************************************** */

.toppage-1{
position: absolute ;
top: 700px;
left: 300px;
font-size: 70px;
font-family:"serif" ;
letter-spacing: 10px;
}

@media screen and (max-width: 1800px) {
.toppage-1{
top: 400px;
left: 100px;
font-size: 60px;
letter-spacing: 10px;
}
}

@media screen and (max-width: 1100px) {
.toppage-1{
font-size: 50px;
}
}

@media screen and (max-width: 420px) {
.toppage-1{
width: 80%;
top: 300px;
left: 30px;
font-size: 24px;
letter-spacing: 10px;
}
}

@media screen and (max-width: 320px) {
.toppage-1{
width: 80%;
top: 260px;
left: 30px;
font-size: 22px;
letter-spacing: 10px;
}
}

/* ****************************************************************************************************************** */
/*concept
/* ****************************************************************************************************************** */
.toppage-2{
margin:0;
width: 100%;
height: 400px;
font-family: "serif";
display: flex;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-text-orientation: upright;
text-orientation: upright;
align-items: center;
margin-top:300px; 
margin-bottom:200px; 
}

.toppage-2 span{
margin-top: -100px; 
font-size:35px; 
letter-spacing: 4px;
}


.toppage-2 p{
font-size:20px; 
letter-spacing: 4px;
}

.toppage-2-2{
text-align: center ;
font-family: "serif";
}

.toppage-2-2 h1{
font-size: 18px;
margin-top:150px; 
margin-bottom:40px; 
}

.toppage-2-2 p{
font-size: 16px;
margin:20px;
}

.toppage-2-pc span{
    /* font-size: 0px; */
    letter-spacing: 1px;
}

.toppage-2-sp{
display: none;
}


@media screen and (max-width: 1800px) {
.toppage-2{
margin-top:100px; 
margin-bottom:200px; 
}
}

@media screen and (max-width: 1300px) {
.toppage-2{
margin-top:-30px; 
margin-bottom:0px; 
}
    
    .toppage-2 span{
margin-top: -100px; 
font-size:25px; 
letter-spacing: 4px;
}


.toppage-2 p{
font-size:16px; 
letter-spacing: 4px;
}
}

@media screen and (max-width: 1131px) {
  .toppage-2{
  margin-top:300px; 
  margin-bottom:200px; 
  }
  }

@media screen and (max-width: 873px) {
    .toppage-2{
display: none;
}
    
    .toppage-2-sp{
    display: inline ;
    text-align: center ;
    font-family: "serif";
    }
    
    .toppage-2-sp h1{
    font-size: 20px;
    margin-bottom: 50px;
    margin-top: 80px;
    }
    
    .toppage-2-sp1{
    margin-top: 50px;
    }
    
    .gradient-purple-blue{
    margin-top: 100px;
    }
}

/* ****************************************************************************************************************** */
/*design
/* ****************************************************************************************************************** */
.design{
display: flex ;
margin: 100px 100px;
}

.design h1{
width: 100%;
font-size:1.5vw; 
text-align: center;
margin-top: 2vw;
}

.design h2{
width: 100%;
font-size:3vw; 
text-align: center;
  text-shadow    : 
   2px  2px 1px #D29CFA,
  -2px  2px 1px #D29CFA,
   2px -2px 1px #D29CFA,
  -2px -2px 1px #D29CFA,
   2px  0px 1px #D29CFA,
   0px  2px 1px #D29CFA,
  -2px  0px 1px #D29CFA,
   0px -2px 1px #D29CFA; 
color: #fff;
margin-bottom:50px; 
}

.design p{
font-size: 1.4vw;
text-align: center ;
margin-bottom:20px; 
}

@media screen and (max-width: 1800px) {
    .design h1{
font-size:30px; 
margin-top: 0;
}

.design h2{
font-size:50px; 
margin-bottom:50px; 
}

.design p{
font-size: 20px;
margin-bottom:20px; 
}


}

.design01{
 padding-top:100px; 
width: 40%;
background-image: repeating-radial-gradient(#f5c0fa, rgb(255, 255, 255) 61.34%, rgb(255, 255, 255) 100%, #ffffff)     
}

.design02{
 width: 40%;
    padding-top:100px; 
    background-image: repeating-radial-gradient(#c0c4fa, rgb(255, 255, 255) 61.34%, rgb(255, 255, 255) 100%, #ffffff)     
}

.design02 h2{
   text-shadow    : 
   2px  2px 1px #94C6F8,
  -2px  2px 1px #94C6F8,
   2px -2px 1px #94C6F8,
  -2px -2px 1px #94C6F8,
   2px  0px 1px #94C6F8,
   0px  2px 1px #94C6F8,
  -2px  0px 1px #94C6F8,
   0px -2px 1px #94C6F8; 
}

.design03{
 width: 40%;
    padding-top:100px; 
        background-image: repeating-radial-gradient(#fac0c4, rgb(255, 255, 255) 61.34%, rgb(255, 255, 255) 100%, #ffffff)     
}

.design03 h2{
   text-shadow    : 
   2px  2px 1px #F58484,
  -2px  2px 1px #F58484,
   2px -2px 1px #F58484,
  -2px -2px 1px #F58484,
   2px  0px 1px #F58484,
   0px  2px 1px #F58484,
  -2px  0px 1px #F58484,
   0px -2px 1px #F58484; 
}

#topvideo2{
width: 60%;
}

@media screen and (max-width: 860px) {

}

@media screen and (max-width: 860px) {
 .design01{
    width: 100%;
    padding-top:100px; 
 }
      .design02{
     width: 100%;
    padding-top:100px; 
 }
      .design03{
              width: 100%;
    padding-top:100px; 
 }
     #topvideo2{
display: none;
}
 .design{
 justify-content: center ;
 }
    
 .design{
display: flex ;
margin: 0;
}
 
    
.design01{
color: #fff;
padding-top:30px; 
background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .4)),  url(../img/design01.jpg); 
background-size: cover;
background-position: center ;
border-radius: 3em;
margin: 20px;
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
    
    .design01 h1{
    color: #D29CFA;
    }
    
        .design01 p{
     font-family: "serif";
      font-weight: bold ;
    }
    
    .design02{
 color: #fff;
padding-top:30px; 
background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .4)),  url(../img/design02.jpg); 
background-size: cover;
background-position: center ;
border-radius: 3em;
margin: 20px;
        box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
    
        .design02 h1{
    color: #94C6F8;
    }
    
            .design02 p{
     font-family: "serif";
      font-weight: bold ;
    }
    
        .design03{
 color: #fff;
padding-top:30px; 
background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .4)), url(../img/design03.jpg); 
background-size: cover;
background-position: center ;
border-radius: 3em;
margin: 20px;
box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
    
            .design03 h1{
    color: #F58484;
    }
    
                .design03 p{
     font-family: "serif";
      font-weight: bold ;
    }
    
    .design01 h2{
    font-size: 40px;
    }
        .design02 h2{
    font-size: 40px;
    }
        .design03 h2{
    font-size: 40px;
    }

}


/* ****************************************************************************************************************** */
/*実績一覧
/* ****************************************************************************************************************** */

/* 019 */
.button019 a {
border-radius: 3px;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 200px auto;
max-width: 780px;
height: 100px;
padding: 10px 25px;
color: #313131;
transition: 0.3s ease-in-out;
font-weight: 500;
font-size: 20px;
text-decoration: none;
letter-spacing: 3px;
font-family: "serif";
border: 1px solid #ccc;
border-radius: 5em;
}

.button019 a:after {
content: "";
position: absolute;
top: 50%;
bottom: 0;
right: 2rem;
font-size: 90%;
display: flex;
justify-content: center;
align-items: center;
transition: right 0.3s;
width: 10px;
height: 10px;
border-top: solid 2px currentColor;
border-right: solid 2px currentColor;
transform: translateY(-50%) rotate(45deg);
}

.button019 a:hover {
background: #000000;
color: #ffffff;
letter-spacing: 5px;
transition: 0.3s;
}

.button019 a:hover:after {
right: 1.4rem;
}

@media screen and (max-width: 500px) {
 .button019 a {
max-width: 280px;
height: 80px;
padding: 10px 25px;
color: #313131;
transition: 0.3s ease-in-out;
font-weight: 500;
font-size: 20px;
text-decoration: none;
letter-spacing: 3px;
font-family: "serif";
border: 1px solid #ccc;
}
}

/* ****************************************************************************************************************** */
/*リンク
/* ****************************************************************************************************************** */
.toppage-4{
margin-top: 100px;
font-family: "serif";
}

.toppage-4 a{
text-decoration:none; 
color: white;
}

.topbox{
width: 79%;
height: 300px;
text-align: center ;
padding-top: 120px;
color: white ;
padding-left: 22%;
margin-top: 100px;
}

.topbox:hover{
opacity: 0.6;
transition: 0.3s;
}

.topbox h2{
font-size:40px; 
}

.topbox p{
font-size:20px; 
margin-top:15px; 
}

.topbox1{
background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .3)),  url("../img/bottom01.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.topbox2{
/* オーバーレイの色と画像の指定 */
background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .3)),  url("../img/bottom02.jpg"); 
/* 画像の位置やサイズの調整 */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.topbox3{
/* オーバーレイの色と画像の指定 */
background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .3)),  url("../img/bottom03.jpg"); 
/* 画像の位置やサイズの調整 */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.topbox4{
    background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .3)),  url("../img/bottom04.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 200px;
}


/* ****************************************************************************************************************** */
/*
/* ****************************************************************************************************************** */
/* ****************************************************************************************************************** */
/*
/* ****************************************************************************************************************** */
/* ****************************************************************************************************************** */
/*
/* ****************************************************************************************************************** */
/* ****************************************************************************************************************** */
/*以下会社案内
/* ****************************************************************************************************************** */



/* ****************************************************************************************************************** */
/*メインギャラリー（１）
/* ****************************************************************************************************************** */
/* ****************************************************************************************************************** */
/*メインギャラリー（１）
/* ****************************************************************************************************************** */
.topimage{
position: absolute;
top:0;
left: 0;
z-index: 1;
}

.topimage img{
position: relative;
width: 100vw;
height: 57vw;
z-index: 1;
}

.topimage::before {
/* contentプロパティは必須 */
content: "";
/* divを起点に位置を調整する */
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 57vw;
/* オーバーレイを作成 */
background: linear-gradient(rgba(0, 0, 0, .5),  rgba(0, 0, 0, .5));
z-index: 2;
}

.topimage2{
display: none;
}


@media screen and (max-width: 1300px) {
.topimage{
display: none;
}

.topimage2{
display: inline;
position: absolute;
top:0;
left: 0;
z-index: 1;
}

.topimage2 img{
  position: relative;
  width: 100vw;
  height: 100vw;
  z-index: 1;
}

.topimage2::before {
/* contentプロパティは必須 */
content: "";
/* divを起点に位置を調整する */
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vw;
/* オーバーレイを作成 */
background: linear-gradient(rgba(0, 0, 0, .5),  rgba(0, 0, 0, .5));
z-index: 2;
}

}
/* ****************************************************************************************************************** */
/*メインギャラリーの中の文字
/* ****************************************************************************************************************** */
.top-font{
z-index: 5;
position:absolute;
text-align: center;
top:22vw;
left: 4vw;
z-index: 5;
font-size: 2vw;
color: white;
font-family:"serif";
}

.topfade-1{
animation-name: fade;
animation-duration: 7s;
}

.topfade-2{
animation-name: fade2;
animation-duration: 7s;
}

.topfade-3{
animation-name: fade3;
animation-duration: 7s;
}

.topfade-4{
animation-name: fade4;
animation-duration: 7s;
}

@keyframes fade{
0%{
  opacity: 0;
}
25%{
  opacity: 1;
}
100%{
  opacity: 1;
}
}

@keyframes fade2{
0%{
  opacity: 0;
}
25%{
  opacity: 0;
}
50%{
  opacity: 1;
}
100%{
  opacity: 1;
}
}

@keyframes fade3{
0%{
  opacity: 0;
}
50%{
  opacity: 0;
}
75%{
  opacity: 1;
}
100%{
  opacity: 1;
}
}

@keyframes fade4{
0%{
  opacity: 0;
}
75%{
  opacity: 0;
}
100%{
  opacity: 1;
}
}

@media screen and (max-width: 1300px) {
.top-font{
        top: 42vw;
        left: 4vw;
        font-size: 2.2vw;
    }
}
/* ****************************************************************************************************************** */
/*見出しの枠（２）
/* ****************************************************************************************************************** */
.container1{
width: 100vw;
height: 95vw;
}

@media screen and (max-width: 1450px) {
.container1{
width: 100vw;
height: 105vw;
}
}

/* ****************************************************************************************************************** */
/*見出し(2)
/* ****************************************************************************************************************** */
.top-font2{
text-align: center;
padding-top:67vw;;
font-family: "serif";
}

.top-font2 p{
font-size: 1.8vw;
padding-bottom: 2vw;
}

.top-font2 h1{
font-size: 3vw;
}

.top-font2-h1{
margin-bottom: 130px;
}

@media screen and (max-width: 1810px){
.top-font2{
padding-top:65vw;;
}
}

@media screen and (max-width: 1450px) {
.container1{
height: 100vw;
}

}


@media screen and (max-width: 1300px) {
  .top-font2{
padding-top:103vw;
}
.container1{
        height: 140vw;
    }

}

@media screen and (max-width: 1200px) {

      .top-font2{
        padding-top: 110vw;
    }

    .top-font2-h1{
margin-bottom:7vw; 
}

}

@media screen and (max-width: 800px) {
    .top-font2-h1{
margin-bottom:6vw; 
}

}

@media screen and (max-width: 710px) {
          .top-font2{
        padding-top: 110vw;
    }

}

@media screen and (max-width: 600px) {
          .top-font2{
        padding-top: 110vw;
    }
}

@media screen and (max-width: 420px) {
.top-font2{
        padding-top: 110vw;
    }

.top-font2 p{
font-size: 2vw;
padding-bottom: 1vw;
}
}

@media screen and (max-width: 380px) {
.top-font2{
        padding-top: 110vw;
    }
}

@media screen and (max-width: 330px) {
.top-font2{
        padding-top: 112vw;
    }
}

/* ****************************************************************************************************************** */
/*事業内容・提携先一覧
/* ****************************************************************************************************************** */
.container2{
position: relative;
width: 100vw;
height: 10vw;
}

.container2-mr{
margin-top:10vw; 
}

.container2 img{
width: 100vw;
height:13.2vw;
}

.h1-design02{
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
display: inline-block;
color:#fff;
letter-spacing: 1vw;
font-size: 3vw;
font-family:"serif";
}

@media screen and (max-width: 1600px) {
.container2 img{
width: 100vw;
height:14vw;
}

.h1-design02{
top: 70%;
}
}

@media screen and (max-width: 1450px) {
.h1-design02{
top: 67%;
}
}

@media screen and (max-width: 1300px) {
.h1-design02{
        top: 70%;
    }
}

@media screen and (max-width: 1250px) {
.container2 img{
width: 100vw;
height:15vw;
}

}

@media screen and (max-width: 1024px) {   

.container2 img{
width: 100vw;
height:16.5vw;
}
.box-br{
margin-top:39vw; 
}

}

@media screen and (max-width: 768px) {
.company__item .company__item__active:after, .company__item--blank .company__item__active:after {
background-color: #ffffff;
}

.company__item--blank{
background-color: #fff;
}

.company__item--blank .company__item__blanklabel p {
font-size: 6px;
line-height: 17px;
letter-spacing: .2em;
color: #333333 !important;
}
  .h1-design02{
        top: 80%;
    }
}

@media screen and (max-width: 600px) {
.container2 img{
width: 100vw;
height:16vw;
}

.h1-design02{
        top: 80%;
    }
}

@media screen and (max-width: 440px) {
  .h1-design02{
        top: 80%;
    }
}
/* ****************************************************************************************************************** */
/*制作フロー
/* ****************************************************************************************************************** */
.flow {
position: relative;
width: 100vw;
height: 56vw;
text-align: center;
padding-top: 3vw;
background-color: #fefefe;
margin: 0;
font-family: "serif";
border-bottom: 1px solid #eee;
}

.flow img{
width: 55vw;
height: 50vw;
}

.flow1 img,.flow2 img,.flow3 img,.flow4 img{
width: 2vw;
height: 2vw;
margin-left:1vw; 
}

.flow1{
position: absolute;
top: 6.3vw;
left:39vw;
}
.flow2{
position: absolute;
top: 23vw;
left:58vw;
}
.flow3{
position: absolute;
top: 38.8vw;
left:40vw;
}
.flow4{
position: absolute;
top: 22vw;
left:25vw;
}
.flow-center{
position: absolute;
top: 25vw;
left:42.7vw;
}

.flow-center img{
width: 5vw;
height: 5vw;
}

.flow h2{
font: bold;
font-size: 1.7vw;
padding-bottom:0.5vw; 
}

.flow h1{
font: bold;
font-size: 2vw;
padding-bottom:1vw; 
}

.flow p{
font: bold;
font-size: 1vw;
}

.flow-center h2{
font-size: 1.3vw;
letter-spacing: 0.1vw;
}

.flow-center p{
font-size: 2vw;
letter-spacing: 0.4vw;
margin-top:0.7vw; 
}
.flow-sp{
display: none;
}

.flow-sp2{
display: none;
}

@media screen and (max-width: 1450px) {
.flow h2{
font: bold;
font-size: 1.7vw;
}

.flow h1{
font: bold;
font-size: 2vw;
padding-top:0; 
}

.flow-center h2{
font-size: 1.3vw;
letter-spacing: 0.1vw;
}
}

@media screen and (max-width: 1200px) {
.flow{
display: none;
}
.flow-sp{
display: inline;
}
.flow-sp img{
        width: 100%;
        height: 50vw;
    }
}

@media screen and (max-width: 750px) {
        .flow-sp{
display: none;
}

.flow-sp2{
display: inline;
}
 .flow-sp2 img{
  width: 100%;
  margin-top:0px; 
}   
}

@media screen and (max-width: 420px) {
  .flow-sp2 img{
  width: 100%;
  margin-top:-24px; 
}      
}  
@media screen and (max-width: 375px) {
  .flow-sp2 img{
  width: 100%;
  margin-top:-27px; 
}   
}
@media screen and (max-width: 375px) {
  .flow-sp2 img{
  width: 100%;
  margin-top:-30px; 
}       
}

/****************************************************************************************************************** */
/*問い合わせ
/* ****************************************************************************************************************** */

.top-contact{
    display: flex;
    margin: 0;
    height: 25vw;
    border: 1px solid #000;
    display: none;
}

.left-contact{
    position: relative;
    width: 50%;
    text-align: center;
    font-size: 1.4vw;
    font-family: "serif";
    /* background-color: #160909; */
    /* color: #fff; */
}

.contact-pp{ 
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
}

.right-contact{
    position: relative;
    width: 50%;
    height: 25vw;
    /* background-color: #160909; */
}

.right-contact img{
    width: 100px;
    height: 100%;
}

.contact-h1{
width: 100%;
height:10vw;
line-height: 10vw;
display: inline-block;
color: #000;
background-color: #fff;
text-align: center ;
}

.right-contact a{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  text-decoration: none;
  font-family: "serif";
  color: #000;
  height: 25vw;
}

.right-contact h1{
  width: 30%;
  /* height: 90px; */
  line-height: 90px;
  /* background-color: #fff; */
  font-size: 20px;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  opacity: 0.7;
  color: #fff;
}


.right-contact:hover{
  /* margin-right: 35px; */
  transition: 0.1s;
  opacity: 0.6;
}

@media screen and (max-width: 1700px) {
   .right-contact h1{
font-size: 15px;
}
             .right-contact h1{
              top: 60%;

}
}
   
    @media screen and (max-width: 1300px) {
        .right-contact h1{
font-size: 12px;
padding: 4px;
}
}

    @media screen and (max-width: 1100px) {
                  .right-contact h1{
font-size: 10px;
}
}
    @media screen and (max-width: 880px) {
        .right-contact h1{
              top: 60%;
height: 50px;
line-height: 50px;
}
.right-contact h1{
font-size: 1vw;
}
}

    @media screen and (max-width: 700px) {
                  .right-contact h1{
              top: 75%;
height: 50px;
line-height: 50px;
}
}

@media screen and (max-width: 800px) {
    .top-contact{
height: 200px;
}
      .left-contact{
height: 200px;
text-align: center;
/* padding-top: 8vw; */
font-size: 2vw;
font-family: "serif";
}
      .right-contact img{
width: 100%;
height: 200px;
object-fit: cover ;
}
}

@media screen and (max-width: 630px) {
.top-contact{
height: 200px;
}
.left-contact{
width: 100%;
height: 200px;
text-align: center;
font-size: 13px;
font-family: "serif";
color: white ;
background: linear-gradient(rgba(0, 0, 0, .5),  rgba(0, 0, 0, .5)), url(../img/contact2.jpg) ;
background-size:cover;
}
.right-contact{
display: none;
}
}

 /* ****************************************************************************************************************** */
/*フッター
/* ****************************************************************************************************************** */
.footer{
    width: 100%;
    font-family: "serif";
    display: flex;
    justify-content: center;
    height: 650px;
    border: 1px solid  #362d2d;
    background-color: #000000;
    color: #fff;
}

.footer h1{
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 20px;
    padding-top: 100px;
    color: #fff;
}

.footer li{
    font-size: 16px;
    padding: 10px;
}

.footer a{
text-decoration: none;
color: #fff;
}

.footer a:hover{
opacity: 0.7;
}

.footer-ce{
  margin: 0 200px;
}

.footer6{
  margin-top:100px; 
}
 
.copyright{
 text-align: center ;
}

.copyright p{
    margin: 0;
    font-family: "serif";
    font-size: 15px;
    background-color: #404040;
    color: #fff;
}

.footer h1:hover{
  opacity: 0.7;
}

.footer li:hover{
  opacity: 0.7;
}

@media screen and (max-width: 1500px) {
.footer{
      height: 400px;
      border: 1px solid  #2b2727;
      /* background-color: #300000; */
      /* color: #fff; */
  }

.footer h1{
font-size:16px;
margin-bottom:20px; 
padding-top: 40px;
text-align: left ;
}

.footer li{
font-size:13px;
padding: 7px;
}

.footer-ce{
  margin: 0 150px;
}

.footer6{
  margin-top:100px; 
}
}

  @media screen and (max-width: 995px) {
  .footer{
height: 400px;
border: 1px solid  #ccc;
}

.footer h1{
font-size:12px;
margin-bottom:20px; 
padding-top: 40px;
text-align: left ;
}

.footer li{
font-size:10px;
padding: 6px;
}

.footer-ce{
  margin: 0 100px;
}

.footer6{
  margin-top:70px; 
}
      }


  @media screen and (max-width: 630px) {
        .copyright p{
font-size: 10px;
}
}







/* ****************************************************************************************************************** */
/*アニメーション（英語部分）
/* ****************************************************************************************************************** */
/* ****************************************************************************************************************** */
/*
/* ****************************************************************************************************************** */


@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700,800,900&subset=latin-ext');

.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* width: 80%; */
max-width: 100%;
/* height: 200px; */
background: url('https://images.unsplash.com/photo-1511227499331-25c621db940e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2e7e55bd948e728345b7ed558d550053&auto=format&fit=crop&w=1400&q=80');
background-size: cover;
background-position: 50% 50%;
}

.gradient-purple-blue {
background-image: repeating-radial-gradient(#7ae0f8, #ffffff 66.81%, rgb(255, 255, 255));
}

.under-container {
width:100px;
max-width:100%;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
padding-top:80px; 
}

.line {
display:flex;
position:relative;
z-index:3;
}

.square {
font-size:30px;
font-weight:900;
-webkit-animation-duration: 1s;
animation-duration: 1s;
cursor:default;
transition:all 0.3s;
color:#fff;
}

.square:hover {
color:#08FDD8;
}

@-webkit-keyframes rubberBand {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
30% {
-webkit-transform: scale3d(1.25, .75, 1);
transform: scale3d(1.25, .75, 1)
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1)
}
50% {
-webkit-transform: scale3d(1.15, .85, 1);
transform: scale3d(1.15, .85, 1)
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1)
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
@keyframes rubberBand {
0% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
30% {
-webkit-transform: scale3d(1.25, .75, 1);
-ms-transform: scale3d(1.25, .75, 1);
transform: scale3d(1.25, .75, 1)
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
-ms-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1)
}
50% {
-webkit-transform: scale3d(1.15, .85, 1);
-ms-transform: scale3d(1.15, .85, 1);
transform: scale3d(1.15, .85, 1)
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
-ms-transform: scale3d(.95, 1.05, 1);
transform: scale3d(.95, 1.05, 1)
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
-ms-transform: scale3d(1.05, .95, 1);
transform: scale3d(1.05, .95, 1)
}
100% {
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand
}

@keyframes scroll {
0%{opacity:0; margin:10px auto auto auto;}
10%{opacity:1;}
50%{margin:10px auto auto auto;}
90%{opacity:1;}
100%{opacity:0; margin:18px auto auto auto;}
}

.mousetext{
color:#fff;
font-weight: 500;
}

/* bubble inspired by Mattia Astorino https://codepen.io/equinusocio/pen/jezBdZ*/

.bubble {
position:relative;
}

.bubble::before
{
content: '';
position:absolute;
z-index:2;
top: 35%;
left: 45%;
transform: translate(-50%, -50%);
display: block;
width: 300px;
height: 300px;
background: linear-gradient(
270deg,
#43e97b,
#38f9d7,
#e0c3fc,
#8ec5fc,
#4facfe,
#00f2fe,
#a8edea,
#fed6e3
);
background-size: 1600% 1600%;
box-shadow: inset 0px -20px 100px 0px rgba(255, 255, 255, 0.48);
animation: 
transform 20s linear infinite alternate,
movement 40s linear infinite alternate,
shade 60s linear infinite alternate;
}

.bubble::after
{
content: '';
position:absolute;
z-index:2;
top: 35%;
right: 15%;
transform: translate(-50%, -50%);
display: block;
width: 300px;
height: 300px;
background: linear-gradient(
270deg,
#00f2fe,
#8ec5fc,
#38f9d7,
#4facfe,
#a8edea,
#43e97b,
#e0c3fc,
#fed6e3
);
background-size: 1600% 1600%;
box-shadow: inset 0px -20px 100px 0px rgba(255, 255, 255, 0.48);
animation: 
transform2 20s linear infinite alternate-reverse,
movement 40s linear infinite alternate-reverse,
shade 60s linear infinite alternate-reverse;
}

@keyframes transform
{
0%,
100% { border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; } 
20% { border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%; } 
40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%; } 
60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; } 
80% { border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%; } 
}

@keyframes transform2 {
0%{border-radius: 42% 58% 60% 40% / 32% 54% 46% 68%}
20%{border-radius: 59% 41% 36% 64% / 32% 64% 36% 68%}
40%{border-radius: 48% 52% 52% 48% / 54% 53% 47% 46%}
60%{border-radius: 42% 58% 51% 49% / 63% 64% 36% 37%}
80%{border-radius: 32% 68% 33% 67% / 63% 35% 65% 37%}
100%{border-radius: 34% 66% 52% 48% / 34% 53% 47% 66%}
}

@keyframes movement
{
from { -webkit-transform: rotate(-1turn) translateY(-50px); transform: rotate(-1turn) translateY(-50px); }
to { -webkit-transform: none; transform: none; }
}

@keyframes shade
{
0%, 100% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
}


.profil-picture {
display:flex;
justify-content:center;
align-items:center;
width:150px;
height:150px;
border-radius:100%;
background:linear-gradient(30deg, #232323, #B9BCC3);
opacity:0;
}

.profilpicture-animation {
animation:showprofil 0.5s forwards;
}

.profil-picture img{
width:95%;
height:95%;
border-radius:100%;
}

@keyframes showprofil {
0%{
transform:translateY(-100%);
opacity:0;
}
100%{
transform:translateY(0%);
opacity:1;
}
}

.square2{
font-size: 10px;
margin:1px;
}

@media screen and (max-width: 860px) {
.square{
font-size: 16px;
margin:1px;
}
 
.square2{
font-size: 8px;
margin:1px;
}
 
}

@media screen and (max-width: 420px) {
.square{
font-size: 11px;
margin:0;
}
 
.square2{
font-size: 6.5px;
margin:0;
}
 
}

@media screen and (max-width: 630px){
  .button019 a{
      margin: 60px auto;
      border-radius: 3em;
    }
    
    .topbox h2{
    font-size: 15px;
    padding-top:60px; 
    }
    
        .topbox p{
    display: none;
    }
    
  .toppage-4{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   margin: 0;
    }
  .topbox {
      width: 130px;
      height: 130px;
         margin: 15px;
      padding:0;
      border-radius: 100%;
  }
.topbox4 {
  margin-bottom: 0;
  }
}

@media screen and (max-width: 500px) {
      
  .bubble::before
  {
  top: 33%;
  left: 25%;
  width: 150px;
  height: 150px;
  }
  
  .bubble::after
  {
  top: 33%;
  right: 25%;
  width: 150px;
  height: 150px;
  }
  .gradient-purple-blue {
  background-image: repeating-radial-gradient(#7ae0f8, #ffffff 73.95%, rgb(255, 255, 255));
  height: 500px;
  }
  .under-container{
        padding: 0;
        }
  }
  
  

@media screen and (max-width: 758px) {
  .footer{
    display: none;
}
.footer-sp{
  margin-top:100px; 
  width: 100%;
  height: 450px;
  display: inline-block;
  background-color: #000;
  color: #fff;
  font-family: "serif";
  font-weight: bold;
}
   
.footer-sp a{
    color: #fff;
    }
.footer-sp li{
    text-align: center ;
    list-style:none;
    font-size: 17px;  
    margin: 20px 0;
    }
    
.footer-sp2 h1{
    font-size: 19px;
    font-weight: bold;
    margin: 50px 0px 30px 0px;
    }
    
.footer-sp2 li{
    font-size: 15px;
    font-weight: bold;
    margin-bottom:50px; 
    }
}

.l-header__logo{
  text-align: center;

}



.l-header__logo p{

    font-size:20px;
}

.diologo{
font-family: "serif";
display: flex ;
}

.diologo-img img{
    width: 80px;
    margin-right: 20px;
}

.diologo-font h1{
    font-size: 28px;
    letter-spacing: 5px;
    margin-top: 2px;
}

.diologo-font h2{
    height: 20px;
    font-size: 24px;
    letter-spacing: 1px;
    font-family: gioviale, sans-serif;
}

.diologo-font h3{
        height: 20px;
        font-size: 24px;
    letter-spacing: 1px;
    font-family: gioviale, sans-serif;
}


@media screen and (max-width: 763px) {
    .l-header__logo{
  margin-top: 0px;
}
    
    .diologo-img img{
    width: 50px;
    margin-right: 20px;
}

.diologo-font h1{
    font-size: 18px;
    letter-spacing: 5px;
    margin-top: 0px;
}

.diologo-font h2{
    margin-top: 2px;
    height: 12px;
    font-size: 14px;
    letter-spacing: 1px;
    font-family: gioviale, sans-serif;
}

.diologo-font h3{
        height: 12px;
        font-size: 14px;
    letter-spacing: 1px;
    font-family: gioviale, sans-serif;
}
}

@media screen and (max-width: 860px){
  .design h2 {
  width: 100%;
  text-align: center;
  text-shadow:none;
  color: #fff;
  margin-bottom: 50px;
  }
      
      .design h2 {
   font-family: "serif";
  width: 100%;
  font-size: 40px;
  text-align: center;
  text-shadow:none;
  color: #fff;
  margin-bottom: 50px;
  }
      
  .square {
    color: #f965bc;
    }
        
        .design01 h2{
        color: #D29CFA;
        }
        
            .design02 h2{
        color: #94C6F8;
        }
        
            .design03 h2{
        color: #F58484;
        }
    
    }

@media screen and (max-width: 1024px){
.business{
    margin-top: 11vw;
    }
}

.footer-sp-mg{
  margin: 0;
  }