@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

body{
  /* 全体の余白を０にするため */
  margin: 0%; 
  padding: 0%; 
  font-family: 'Roboto Condensed', sans-serif;

}
ul{
  margin: 0;
  padding: 0;
}

.br::before{
  /*brタグを使わずに擬似要素で改行する方法 /Aは改行って意味らしい beforeならクラス名の直前 afterなら直後*/
  content: "\A" ;
	white-space: pre ; /*行の自動折り返し 改行を反映させるため*/
}

.br {
  font-size: 12px;
}

@media only screen and (max-width: 1166px){ 
  .header_item_2{
    display: none; /* メニューを非表示*/
  }

  #phone {
    /*小さいブロックを作っている*/
    position: relative;
    display: block;
    width: 30px;
    height: 25px;
    margin: 0 0 0 auto;/*左だけautoにして右側に押す感じ*/
  }

  #phone span{
    /*ブロックの中の真ん中に白い線を一つ作成*/
    position: absolute;
    top: 50%; /*上から半分の位置に指定*/
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transform: translateY(-50%); /*線の高さ2pxの上の線に合わせて半分位置を指定している設定のため、1px分上にずらすために使用*/
  }  

  /*上の線を擬似要素で作成*/
  #phone::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
}


  /*下の線を擬似要素で作成*/
  #phone::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%; /*一番下の線だけちょっと短くするため*/
    height: 2px;
    background-color: #fff;
}
}


.br_main::before{
  /*brタグを使わずに擬似要素で改行する方法 /Aは改行って意味らしい beforeならクラス名の直前 afterなら直後*/
  content: "\A" ;
	white-space: pre ; /*行の自動折り返し 改行を反映させるため*/
}

.title{
  background-image: url(../img/wallspace.webp);
  background-size: cover; /*サイズの縦横比を維持したまま表示*/
  height: 320px;
  /*フレックスで上下左右中央に配置する記述 ・alignで上下 ・justifyで左右*/
  display: flex; 
  align-items: center;
  justify-content: center;
  position: relative;

  /*フレックスで指定する前にやった別の方法 
  width: 100%; displayをtableしたら、画像が小さくなったから使って
  display: table; 文字を上下中央にするための記述 親要素に指定*/
}

/*背景色を画像に重ねる方法を記載*/
.title::after{
  content: '';
  background-color: black;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.6;
  
}

.title h1{
  z-index: 1;
  letter-spacing: 0.1em;
  font-family: serif;
  font-size: 40px;
  color: #F4F5F7;
  text-align: center;
  line-height: 30px; /*h1とspanの行間を縮めるために記載 行間のデフォルトはフォントサイズの倍くらい？*/

  /* display: table-cell; 文字を上下中央にするための記述 子要素に指定 */
  /* vertical-align:middle; 文字を上下中央にするための記述 子要素に指定 */
}

.br_main {
  font-size: 20px;
}

.br_common{
  color: black;
}

.about_pre {
  display: flex;
  justify-content: center;
  height: 300px;
  align-items: center;
}

.pre_img {
  margin-left: 20px;
  width: 300px;
  height: 200px;
}

.pre_img p {
  text-align: center;
}




.common {
  text-align: center;
  letter-spacing: 0.1em;
  padding: 50px 0 60px 0;
}

.common h1{
  font-size: 40px;
  color: #000080;
}

.about_pre_v2{
  width:45%;
  text-align: justify;
  margin-right: 20px;
}

.vision{
  background-color: #000080;
  color: #F4F5F7;
  letter-spacing: 0.1em;
  padding: 30px 0 0 0;
}
.vision_top{
  text-align: center;
  width:45%;
  margin:0 auto;
  }

.vision_topAnime {
  /* animation: fadeupAnime 1s ease 0.5s forwards;アニメーションの定義名、アニメーション１回分の時間の長さ、アニメーションの進行具合、アニメーションの開始を遅らせる、アニメーションの開始と終了時の状態を指定をまとめて設定 */
  animation-name: fadeupAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
  opacity:0;
  

}
  
  /*アニメーションの開始から終了までを指定する*/
  @keyframes fadeupAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }

}

.vision_top h1{
  font-size: 50px;
  line-height: 25px;
}


.activityanime1 {
  animation-name:info_anime1;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes info_anime1{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.actanime1 {
  opacity: 0;
}

.activityanime2 {
  animation-name:info_anime2;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes info_anime2{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.actanime2 {
  opacity: 0;
}


.activity_1 {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px;
  background-color: #000080;


}

/*リストタグの中の写真とテキストを左右交互に配置する方法 evenは偶数 oddは奇数*/
.activity_1:nth-child(even){
  flex-direction: row-reverse;
  background-color:#FFF;
}

.activity_1:nth-child(odd) .phrase{
  background-color: #ffffe0;
  color: #292b2c;
  /*文字の背景を縦横調整のため paddingは余白*/
  width: 30vw;
  height: auto;
  padding: 20px;

  /*文字の位置調整*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-right: -180px;
  position: relative; /*画像と写真を重ねるために記載*/
  z-index: 20; /*優先度を上にするため*/

}

.activity_1:nth-child(even) .phrase{
  background-color: #ffffe0;
  color: #292b2c;
  /*文字の背景を縦横調整のため paddingは余白*/
  width: 30vw;
  height: auto;
  padding: 20px;
  

  /*文字の位置調整*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-left: -180px;
  position: relative; /*画像と写真を重ねるために記載*/
  z-index: 20; /*優先度を上にするため*/
}

.phrase h2{
  font-size: 18px;
}

/*画像の写真の位置を指定するために*/
.bg_main_1{
  position: relative;
}

/*アブソリュートだけ指定すると要素が重なるためleftやらを指定している。*/
.bg_main_1::before {
  content: '';
  background-image: url(../img/painting.webp);
  width: 40px;
  height: 50px;
  background-position: center;
  background-size: cover;
  position: absolute;
  left: -50px;
  z-index: 30;

}

/*画像の写真の位置を指定するために*/
.bg_main_2{
  position: relative;
}

/*アブソリュートだけ指定すると要素が重なるためleftやらを指定している。*/
.bg_main_2::before {
  content: '';
  background-image: url(../img/paint.webp);
  width: 30px;
  height: 30px;
  background-position: center;
  background-size: cover;
  position: absolute;
  left: -60px;
  z-index: 30;

}

/*画像の写真の位置を指定するために*/
.bg_main_3{
  position: relative;
}

/*アブソリュートだけ指定すると要素が重なるためleftやらを指定している。*/
.bg_main_3::before {
  content: '';
  background-image: url(../img/pallet.webp);
  width: 30px;
  height: 30px;
  background-position: center;
  background-size: cover;
  position: absolute;
  left: -50px;
  z-index: 30;

}

/* 画像の写真の位置を指定するために
.bg_main_4{
  position: relative;
}

/*アブソリュートだけ指定すると要素が重なるためleftやらを指定している。*/
/* .bg_main_4::before {
  content: '';
  background-image: url(../img/painting.webp);
  width: 30px;
  height: 30px;
  background-position: center;
  background-size: cover;
  position: absolute;
  left: -50px;
  z-index: 30;

}  */


.photo{
  width: 60%;
}
.photo img {
  width:100%;

}

.company{
  background-color: #F6F6F6;
  padding-top: 30px;
  padding-bottom: 70px;
}

.company_list h1 {
  font-size: 40px;
  text-align: center;
  line-height: 25px;
  letter-spacing: 0.1em;
  color: #000080;
  margin: 0;
  padding-bottom: 60px;
}

.br_company{
  color: black;
  font-size: 20px;
  
}

.company_list ul {
  text-align: center;
  background-color: #FFF;
  line-height: 3.5em;
  width: 65%;
  margin: 0 auto;
  padding: 80px;
}

.company_list li{
  text-align: justify; /*均等に割り当てる 字 行すべて*/
  text-justify: inter-ideograph; /*IE edgeで見るときjustifyを適用する為のコード*/
  list-style: none;
  padding-left: 20px; /*リストの余白を左にちょっと設けて文字の開始位置をずらしている*/
  /*線のデザイン 上から線の種類 太さ 色を指定している*/
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: #ddd;
  
}


.content {
  background-color: #FFF;
  height: auto;
}

.content_item h1{
  margin-top: 40px;
  font-size: 50px;
  text-align: center;
  line-height: 15px;
  color: #000080;
  letter-spacing: 0.1em;

}

.servis {
  color: black;
  font-size: 20px;

}

.mail_form {
  background-color: #000080;
  width: 40%;
  height:auto;
  margin: 20px auto;
  line-height:115px;
  transition:0.5s;
  position: relative;
}

.mail_content {
  text-align: center;
  color: #FFF;
  font-size: 18px;
}

.mail_content::before{
  content: "CONTACT";
  position: absolute;
  font-size: 55px;
  letter-spacing: 0.3em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  color: gray;
  opacity: 0.5;

}

.mail_form:hover{
 opacity:0.5;
}

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

  .phrase h2{
    font-size: 16px;
  }

  .phrsae p {
    font-size: 10px;

  }

  /*画像の写真の位置を指定するために*/
.bg_main_1{
  position: relative;
}

/*アブソリュートだけ指定すると要素が重なるためleftやらを指定している。*/
.bg_main_1::before {
  content: '';
  background-image: url(../img/painting.webp);
  width: 40px;
  height: 50px;
  background-position: center;
  background-size: cover;
  position: absolute;
  left: -50px;
  z-index: 30;
  box-sizing: border-box;

}

/*画像の写真の位置を指定するために*/
.bg_main_2{
  position: relative;
}

/*アブソリュートだけ指定すると要素が重なるためleftやらを指定している。*/
.bg_main_2::before {
  content: '';
  background-image: url(../img/paint.webp);
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  position: absolute;
  left: -60px;
  z-index: 30;

}

/*画像の写真の位置を指定するために*/
.bg_main_3{
  position: relative;
}

/*アブソリュートだけ指定すると要素が重なるためleftやらを指定している。*/
.bg_main_3::before {
  content: '';
  background-image: url(../img/pallet.webp);
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  position: absolute;
  left: -60px;
  z-index: 30;

}

/*画像の写真の位置を指定するために*/
.bg_main_4{
  position: relative;
}

/*アブソリュートだけ指定すると要素が重なるためleftやらを指定している。*/
.bg_main_4::before {
  content: '';
  background-image: url(../img/painting.webp);
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  position: absolute;
  left: -60px;
  z-index: 30;

}





}


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

  .about h1{
    font-size: 30px;
   }

 .vision_top h1{
  font-size: 30px;
 }

 .br_main{
  font-size: 15px;
 }

 .about p{
  font-size: 1rem;
 }

 .vision_top {
  width: 80%;
 }

 .vision_top p {
  font-size: 1rem;
 }

  .phrase h2{
    font-size: 18px;
  }

  .phrsae p {
    font-size: 12px;

  }

  .bg_main_1::before  {
    display: none;
  }

  .bg_main_2::before  {
    display: none;
  }
  .bg_main_3::before  {
    display: none;
  }
  .bg_main_4::before  {
    display: none;
  }
 
  
  .activity_1{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    padding: 0;
  }

  .activity_1 h2 {
    font-size: 1.2rem;
  }

  .activity_1 p {
    font-size: 1rem;
  }


  .activity_1:nth-child(odd) .phrase{
    width: 100%;
    color: black;
    background-color:#ffffe0;
    /*文字の背景を縦横調整のため paddingは余白*/
    margin: 0 auto;
  
  }




  .photo{
    width: 80%;
  }
  
  .activity_1:nth-child(even) .phrase{
    width: 100%;
    color: black;
    background-color:#ffffe0;
    /*文字の背景を縦横調整のため paddingは余白*/
    margin: 0 auto;
  
  }
  


}

@media screen and (max-width:765px){
  .activity_1{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0;
  }


}

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


  .company ul{
    width: auto;
  }

  .company_list h1 {
    font-size: 30px;
    padding-bottom: 40px;
  }

  .company_list ul {
    text-align: center;
    background-color: #FFF;
    line-height: 3.5em;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    
  }
  
  

.company_list li {

  text-align: justify; /*均等に割り当てる 字 行すべて*/
  text-justify: inter-ideograph; /*IE edgeで見るときjustifyを適用する為のコード*/
  list-style: none;
  padding-left: 0; /*リストの余白を左にちょっと設けて文字の開始位置をずらしている*/
  font-size: 1rem;
  /*線のデザイン 上から線の種類 太さ 色を指定している*/
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: #ddd;
  line-height: 2.5em;

}




  .content_item h1 {
    font-size: 40px;
  }

  .mail_content {
    color: #FFF;
    font-size: 15px;
    position:relative; 
    line-height: 80px;
  }


  .mail_content::before {
    content: "CONTACT";
    position: absolute;
    font-size: 28px;
    letter-spacing: 0.3em;

  }

  .about_pre{
    display: block;
    height: auto;
  }

  .about_pre_v2 {
    margin: 10px auto;
  }

  .pre_img {
    margin: 0 auto;  
  }

 

}

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

  .mail_content {
    color: #FFF;
    font-size: 12px;
    position:relative; 
    line-height: 80px;
  }


  .mail_content::before {
    content: "CONTACT";
    position: absolute;
    font-size: 25px;
    letter-spacing: 0.1em;

  }

  .about_pre{
    display: block;
  }

  .about_pre_v2 {
    margin: 30px auto; 
    width: 300px;
    font-size: 1.5rem;

  
  }

  .pre_img {
    margin: 10px auto;
  }




}


/*-------------------------
  トップデザイン
-------------------------*/
.top-section__wrapper{
  height: 60vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}

.phrase{
  width: 45%;
  position:relative;
  text-align: center;
}

.phrase__first{
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 600;
}
.phrase__second{
  font-size: 5rem;
  font-weight: 800;
}


.img_wrap{
  width: 55%;
  height: 100%;
}

.background-area{
  width: 100%;
  height: 100%;
  background-image: url('../img/home6.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
}

@media screen and (max-width: 768px) {
  .top-section__wrapper{
    height: 60vh;
  }
  .phrase__second{
    font-size: 3rem;
  }
}
@media screen and (max-width: 550px) {
  .top-section__wrapper{
    height: 35vh;
  }
  
  .phrase__first{
    font-size: 0.9rem;
    margin-bottom: 5px;
  }
  .phrase__second{
    font-size: 2.3rem;
  }
}

/*-------------------------
  横から白い背景が伸びるアニメーション
-------------------------*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0;
  color: #000080;
  

}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*左から右*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000080;
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }

  50% {
    transform-origin: left;
    transform: scaleX(1);
  }

  50.001% {
    transform-origin: right;
  }

  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

.bgappearTrigger,
.bgLRextendTrigger {
  opacity: 0;
}