@charset "utf-8";

html{
  font-size: 16px;
  scroll-behavior: smooth;
}
body{
  color: #333;
  line-height: 1.6;
  font-family: 'Times New Roman', "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.jp{
  font-size: 16px;
}
a {
  color: #333;
  text-decoration: none;
}
a:hover{
  color: #333;
}

li {
  list-style: none;
}

.inner{
  max-width: 1000px;
  margin: 0 auto;
  /* border: 1px solid #000; */
}
section{
  padding: 80px 0;
}
img{
  max-width: 100%;
  height: auto;
}
/* ==========================================================
fadeIn
========================================================== */
/* .history .timeline .fadeIn {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}

.history .timeline .fadeIn.active{
  opacity : 1;
  transform : translate(0, 0);
}
.history .timeline .fadeIn li {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}

.history .timeline .fadeIn li.active{
  opacity : 1;
  transform : translate(0, 0);
} */

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/

#splash {
  /*fixedで全面に固定*/
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
background:#333;
text-align:center;
color:#fff;
}
/* Loadingバー中央配置　*/
#splash_text {
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
width: 100%;
transform: translate(-50%, -50%);
color: #fff;
}
/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
  height: 2px

}

/* ==========================================================
top
========================================================== */
wrapper {
  max-width: 100%;
}

/* 固定 */
header {
  position: fixed;
  z-index: 998;
  border-bottom: solid #ccc;
  position: fixed;
  width: 100%;
  background-color: #fff;
}

header .flex_nav .logosinfo .logo01 img{
 width: 50%;
 height: 0 auto;
}


header .flex_nav{
  display: flex;
  width: 100%;
  padding: auto;

}
header .inner .logosinfo{
  justify-content: space-between;
  align-items: center;
}

header .logosinfo .logo01{
  display: inline-block;
}
header .logo01 img:hover{
 opacity: 0.5;
}


/* ==========================================================
nav
========================================================== */

nav li:hover{
border-bottom: 4px solid #fc5836;
z-index: 999;
}
nav ul li span{
  display: block;
 font-size: 14px;
 color: #FC5863;
 font-weight: bold;
}

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
nav{
  /* color:#aaa; */
  text-align: center;
}
/*ナビゲーションを横並びに*/
nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
  display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
  position: relative;
  display: inline-block;
}

/*ナビゲーションのリンク設定*/
nav ul li a{
  display: block;
  text-decoration: none;
  color: #333;
  padding:20px 35px;
  transition:all .3s;
  font-size: 16px;
}

nav ul li li a{
  padding:10px 35px;

}

nav ul li a:hover{
  color:(#aaa 80%); 

}

/*==矢印の設定*/


/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul{
    /*絶対配置で位置を指定*/
  position: absolute;
  left:3;
  top:70px;
  z-index: 100;
    /*形状を指定*/
  background:#fff;
  max-width:160px;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
    /*アニメーション設定*/
  transition: all .3s;

}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
  visibility: visible;
  opacity: 1;
  z-index: 995;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
  color: #333;
  border-bottom:solid 1px rgba(255,255,255,0.6);
}

nav li.has-child ul li:last-child > a{
 border-bottom:none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
  color: #aaa;
}



main {
  padding: 40px 0;
}

main .first-view {
  margin-top: 70px;
  margin-bottom: 100px;
}


/*==================================================
スライダーのためのcss
===================================*/
.title01 .sliderfv {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:0 auto;
  /* margin-bottom: 100px; */
}
.title01 .sliderfv img {
  width:65vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
  height:auto;
  margin-top: 200px;
}

.title01 .sliderfv .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}

.title01 .sliderfv .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}
/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;/*矢印の色*/
  border-right: 2px solid #666;/*矢印の色*/
  height: 15px;
  max-width: 15px;
}
.slick-prev {/*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/

.slick-dots {
  text-align:center;
  margin:20px 0 0 0;
}
.slick-dots li {
  display:inline-block;
  margin:0 5px;
}
.slick-dots button {
  color: transparent;
  outline: none;
  width:8px;/*ドットボタンのサイズ*/
  height:8px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background:#ccc;/*ドットボタンの色*/
}
.slick-dots .slick-active button{
  background:#333;/*ドットボタンの現在地表示の色*/
}


/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
left:50%;
bottom:10px;
  /*全体の高さ*/
height:50px;
z-index: 2;
}
/*Scrollテキストの描写*/
.scrolldown1 span{
  /*描画位置*/
position: absolute;
left:-30%;
top: -50%;
  /*テキストの形状*/
color: #fff;
font-size: 2.0rem;
letter-spacing: 0.05em;
}
/* 線の描写 */
.scrolldown1::after{
content: "";
  /*描画位置*/
position: absolute;
top: 0;
  /*線の形状*/
width: 3px;
height: 30px;
background: #eee;
  /*線の動き1.4秒かけて動く。永遠にループ*/
animation: pathmove 1.4s ease-in-out infinite;
opacity:0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
0%{
  height:0;
  top:0;
  opacity: 0;
}
30%{
  height:30px;
  opacity: 1;
}
100%{
  height:0;
  top:30px;
  opacity: 0;
}
}


/* ==========================================================
button
========================================================== */
/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
  /* -webkit-box-sizing: inherit;
  box-sizing: inherit; */
}
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
}
.btn,
a.btn,
button.btn {
  box-shadow: 2px 1px 1px #797979;
  font-size: 1.0rem;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 50px;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
a.btn-flat {
  overflow: hidden;
  padding: 1.5rem 6rem;
  color: #fff;
  border-radius: 0;
  background: #fc5836;
}
a.btn-flat span {
  position: relative;
}
a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 30px;
  width: 150%;
  height: 500%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-70%) rotate(135deg);
  transform: translateX(-98%) translateY(-70%) rotate(135deg);
  background: #efefef;
}
a.btn-flat:hover:before {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(135deg);
  transform: translateX(-9%) translateY(-25%) rotate(135deg);
}

main .title01 .apologizingsentence h2{
  font-size: 24px;
  margin-bottom: 20px; 
 }

main .title01 .apologizingsentence p{
 font-size: 16px; 
 line-height: 2.2em;
}

main .title01 .apologizingsentence .end{
  text-align: right;
 }

.topicsection .subtitle02 h2{
  font-size: 32px;
}

/* ここからが新着情報のCSS */ 
main .news_list {
  margin: 0 5%;
}
main .news_list_item {
  padding: 25px 0;
  border-bottom: 1px solid #E6E6E6;
}
main .news_list_item:first-child {
  border-top: 1px solid #E6E6E6;
}
main .news_list_item a {
 position: relative;
 display: flex;
 padding-right: 30px;
}
main .news_list_item p {
  font-size: 16px;
 }
main .news_list_date {
  font-size: 15px;
  display: flex;
  margin-right: 15px;
  align-items: center;
}


main .news_item {
  background: #FC5836;
  border-radius: 14px;
  width: 6em;
  /* 親要素の文字サイズを基準 */
  text-align: center;
  margin-left: 20px;
}

main .arrow {
  width: 25px;
  height: 1px;
  background: #707070;
  position: absolute;
  top: 50%;
  right: 0;
}
main .arrow::after {
  content: "";
  display: block;
  width: 6px;
  height: 1px;
  background: #707070;
  transform: rotate(45deg);
  position: absolute;
  right: 0px;
  bottom: 2px;
}


main .about{
  text-align: center;
}
main .about .jpsassho{
  margin-bottom: 30px;
}
main .about p{
  font-size :16px;
}
.message .me-word{
  font-size: 16px;
}
/*==================================================
スライダーのためのcss
===================================*/
.gallery .slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
   margin:0 auto;
}
.gallery .slider img {
   width:100%;/*スライダー内の画像を横幅100%に*/
   height:auto;
}
.gallery .slider dt, .gallery .slider dt{
  font-size: 20px;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.gallery .slider .slick-slide {
   margin:0 10px;
}
/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
   position: absolute;/*絶対配置にする*/
   top: 42%;
   cursor: pointer;/*マウスカーソルを指マークに*/
   outline: none;/*クリックをしたら出てくる枠線を消す*/
   border-top: 2px solid #666;/*矢印の色*/
   border-right: 2px solid #666;/*矢印の色*/
   height: 15px;
   width: 15px;
}
.slick-prev {/*戻る矢印の位置と形状*/
   left: -1.5%;
   transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
   right: -1.5%;
   transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/

.slick-dots {
   text-align:center;
 margin:20px 0 0 0;
}

.slick-dots li {
   display:inline-block;
 margin:0 5px;
}

.slick-dots button {
   color: transparent;
   outline: none;
   max-width:8px;/*ドットボタンのサイズ*/
   height:8px;/*ドットボタンのサイズ*/
   display:block;
   border-radius:50%;
   background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
   background:#333;/*ドットボタンの現在地表示の色*/
}
/*　画像の拡大　*/

.zoomIn img{
  transform: scale(1);
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img{/*hoverした時の変化*/
  transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
}

/*　画像のマスク　*/

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}


main .historyflex{
  display: flex;
  gap: 200px; 
}


main .vision{
  display: flex;
  gap: 200px;
}
main .message{
 text-align: right;
 /* background-image: url(../images/message01.jpg); */

}
main .vision{
 text-align: right;
}
main .vision .vi-word{
  font-size: 16px;
}
main .cp{
  display: flex;
  gap: 200px;
}

main .recruit_index{
  width: 100%;
  height: auto;
  /* margin-bottom: 30px; */
  text-align: center;
  position: relative;
}

main .recruit_index .parallax01:before{
  /* width: 100%;
  height: auto; 
  position: absolute; 
  top: 0; topを設定する。
  left: 0; leftを設定する。
  clip: rect(auto, auto, auto, auto);
  content:""; */
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  background-image: url(./img/example.jpg);
  position: fixed;
}

  main .recruit h2{
    font-size: 28px;
  }
main .recruit_index h2 .fadein{
  color: #efefef;
}
main .recruit_index .re-word{
  font-size: 16px;
}
main .parallax01 .parallax_content{
  width: 100%;
  min-height: 300px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

main .parallax01 .parallax_box .front_content{
  /* padding: 60px; */
  background-color: #efefef;
}
main .parallax01 .parallax_box  .parallax_content.img_bg_01{
  background-image: url(../images/recruit01.jpg);
  padding: 50px;
}
main .parallax01 .parallax_box  .parallax_content.img_bg_01 p, main .parallax01 .parallax_box  .parallax_content.img_bg_01 h2{
  color: #efefef;
}
main .parallax01 .parallax_box  .parallax_content.img_bg_01 h2{
font-size: 32px;
}
main .accesstitletop {
  padding: 100px 0 20px 0;
  text-align: center;
  }
/* * Google Mapを囲う要素 */ 
main .map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 25%; /* 比率を4:3に固定 */
}
/* Google Mapのiframe */
main .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

main .navlist{
 display: flex;
 gap: 95px;
 font-size: 18px;
 text-align: center;
 padding-bottom: 0;
 border-top:1px solid #aaa;
 
}
main .navlist a:hover {
  color: #767474;
}

.gallerylist li a, .companylist li a{
  display: block;
   text-align: center;
}

footer{
  border-top:1px solid #aaa;
}

footer img{
  max-width: 200px;
  height: 130px;
  padding:0;
}
footer .logo02:hover {
  opacity: 0.5;
}

.footer .address{
  font-size: 1.5rem;
  text-indent: 1rem;
}
.footer .telandfax{
  font-size: 1.5rem;
  line-height: 1.5rem;
  text-indent: 1rem;
}
.footer .email{
  font-size: 1.7rem;
  text-indent: 1rem;
  margin-bottom: 10px;
}

/***追従するトップへ戻るボタン***/
#page-top {
  position: fixed;
  right: 20px;
  bottom: 30px;
  height: 70px;
  text-decoration: none;
  font-weight: bold;
  transform: rotate(90deg);
  font-size: 90%;
  line-height: 1.5rem;
  color: #333;
  padding: 0 0 0 35px;
  border-top: solid 2px;
}
#page-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 18px;
  border-top: solid 2px;
  transform: rotate(35deg);
  transform-origin: left top;
}
/***トップへ戻るボタンここまで***/
footer .copyright{
  font-size: 14px;
  padding-bottom: 30px;
  text-indent: 1rem;
}

/*========= レイアウトのためのCSS ===============*/

section:first-child{
  padding:5px 5px 0px;
}



/* ==========================================================
recruit02
========================================================== */
main .first-viewrt{
  background-image: url(../images/first_view_picts/recruit.jpg);
  height:500px;
  background-size: cover;
  background-position: center;
}
main .first-viewrt::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 500px;
  top: 37px;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

main .first-viewrt .recruitjp{
  margin-top: 250px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color:#efefef;
}
main .first-viewrt .recruiteng{
  margin-top: 270px;
  font-size: 32px;
  letter-spacing: 0.5em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .recruit02 h3{
  font-size: 24px;
}


main .recruit02 .sentence01{
  text-align: center;
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 80px;
  line-height: 2;
}
main .recruit02 .sentence02{
  line-height: 30px;
  margin-bottom: 60px;
}
main .recruit02{
  font-size: 18px;

}
* * youtubeを囲う要素 */ 
main .videorecruit{
  /* position: relative; */
  width: 100%;
  height: 100%;
  padding-top: 25%; /* 比率を4:3に固定 */
}
/* youtubeのiframe */
main .videorecruit iframe {
  /* position: absolute; */
  width: 100%;
  height: 500px;;
}

main .recruit h2{
  margin-bottom: 60px;
}
main .recruit h3{
  font-size: 24px;
}
.recruit .cp_h1title dl {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin-bottom: 100px;
  font-size: 16px;
  border-top: 1px solid #ccc;
  }
  .recruit  .cp_h1title dt {
  flex-basis: 15%;
  padding: 10px;
  background-color: #f1f1f1;
  border-bottom: 1px solid #ccc;
  }
  .recruit .cp_h1title dd {
  flex-basis: 85%;
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  }

  main .recruit .cp_h1title dl .recruitbutton{
    margin: 20px 0 0 auto;
  }


main .zoomInRotate h2{
  font-size: 28px;
}











/* ==========================================================
company profile
========================================================== */
main .first-viewcp{
  background-image: url(../images/first_view_picts/company.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-viewcp::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 500px;
  top: 37px;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

main .first-viewcp .cpjp{
  margin-top: 250px;
  /* text-align: left; */
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color:#efefef;
}
main .first-viewcp .cpeng{
  margin-top: 270px;
  font-size: 32px;
  letter-spacing: 0.5em;
  position: absolute;
    width: 100%;
    text-align: center;
    /* 重なり順を指定*/
    z-index: 5;
  color:#efefef;
}


main .top-view p{
  font-size: 16px;
  text-align: left;
}
main .top-view h3{
  font-size: 24px;
}
main .about .companyprofile{
  border: 1px solid #000;
  margin-bottom: 100px;
  width:100%;
  border-bottom:1px solid #aaa;
  border-collapse: collapse;
}
main .about .companyprofile tr th{
  border: 1px solid #000;
  background: #efefef;
  font-size: 18px;
  font-weight: lighter;
  border-bottom: 1px solid #aaa;
}
main .about .companyprofile td{
 text-align:left;
 border: 1px solid #000;
 font-size: 16px;
 padding: 20px;
}

/* table tr td{
  border-bottom: 1px solid #aaa;
} */


/* ==========================================================
contact
========================================================== */
main .first-viewc{
  max-width: 1000px;
  height: 300px;
}

main .first-viewc .contactjp{
  margin-top:200px;
  text-align: left;
  font-size: 16px;
}
main .first-view .contacteng{
  text-align: left;
  font-size: 50px;
  letter-spacing: 0.2em;
}


/* ==========================================================
history
========================================================== */

main .first-viewh{
  background-image: url(../images/first_view_picts/history.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
  /* background-size: 100% auto;
  position: relative;
  background-position: 50% 50%;
  margin-top: 100px;
  max-width: 100%;
  height: 500px; */
}
main .first-viewh::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 500px;
  top: 37px;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

main .first-viewh .historyjp{
  margin-top: 250px;
  /* text-align: left; */
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color:#efefef;
}
main .first-viewh .historyeng{
  color: #fff;
  font-size: 32px;
  position: absolute;
  margin-top: 270px;
  letter-spacing: 0.5em;
  position: absolute;
    width: 100%;
    text-align: center;
    /* 重なり順を指定*/
    z-index: 5;
  color:#efefef;
}


.history{
  margin-bottom: 150px;
}


/*========= バー表示のためのCSS ===============*/

/*タイムライン全体の設定*/
.history .timeline{
  max-width: 400px;
  width:100%;
  margin:50px auto;
  padding:0 30px;
  font-size:16px;
}

.history .timeline li{
    /*線の起点とするためrelativeを設定*/
    position: relative;
  list-style: none;
  padding:0 0 20px 0;
}

.history .timeline dl{
  margin:0 0 20px 3em;
}

.history .timeline dt{
  font-size: 14px;
}

.history .timeline dd strong{
  display: block;
  padding:10px 0;
  font-size: 14px;
  font-weight: lighter;
}

/*絶対配置で線を設定*/
.history .border-line {
    /*線の位置*/
  position: absolute;
  left:0.2em;
  top:0;
  width:2px;/*線の太さ*/
  height:0;/*はじめは高さを0に*/
  background: #ccc;
}

/*タイムラインの見出し横の丸の位置と形状*/
.history .timeline li::after{
  content:'';
  position: absolute;
  top:0;
  left:0;
  width:10px;
  height: 10px;
  background:#666;
  border-radius: 50%;
}





/* ==========================================================
INDEX05
========================================================== */
main .first-view05{
  background-image: url(../images/first_view_picts/general.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-view05::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view05 .ccwjp{
  margin-top: 230px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view05 .ccweng{
  margin-top: 250px;
  font-size: 32px;
  letter-spacing: 0.2em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .about05{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 150px;
}
main .about05 .zoomInRotate{
 margin-bottom: 60px;
}
main .about05 img{
  width:23.95%;
}
/*　画像拡大＋回転　*/
main .about05 .zoomInRotate img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
main .about05 .zoomInRotate a:hover img{/*hoverした時の変化*/
	transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/

}
/*　画像のマスク　*/
main .about05 .zoomInRotate .mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

/* ==========================================================
INDEX06
========================================================== */
main .first-view06{
  background-image: url(../images/first_view_picts/interier.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-view06::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 500px;
  top: 37px;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view06 .interierjp{
  margin-top:250px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view06 .interiereng{
  margin-top: 270px;
  font-size: 32px;
  letter-spacing: 0.4em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}
main .about06{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 150px;
}
main .about06 .zoomInRotate{
  margin-bottom: 60px;
 }
main .about06 img{
  width:23.95%;
}

/*　画像拡大＋回転　*/
main .about06 .zoomInRotate img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
main .about06 .zoomInRotate a:hover img{/*hoverした時の変化*/
	transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/

}
/*　画像のマスク　*/
main .about06 .zoomInRotate .mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
/* ==========================================================
INDEX07
========================================================== */
main .first-view07{
  background-image: url(../images/first_view_picts/exterier.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-view07::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view07 .exterierjp{
  margin-top:250px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view07 .exteriereng{
  margin-top: 270px;
  font-size: 42px;
  letter-spacing: 0.2em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  font-size: 50px;
  letter-spacing: 0.2em;
  color:#efefef;
}

main .about07{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
}
main .about07 .zoomInRotate{
  margin-bottom: 60px;
 }
main .about07 img{
  width:23.95%;
}
/*　画像拡大＋回転　*/
main .about07 .zoomInRotate img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
main .about07 .zoomInRotate a:hover img{/*hoverした時の変化*/
	transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/

}
/*　画像のマスク　*/
main .about07 .zoomInRotate .mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
/* ==========================================================
INDEX08
========================================================== */
main .first-view08{
  background-image: url(../images/first_view_picts/renovation.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-view08::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view08 .renovationjp{
  margin-top:250px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view08 .renovationeng{
  margin-top: 270px;
  font-size: 32px;
  letter-spacing: 0.5em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}


main .about08{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 150px;
}
main .about08 .zoomInRotate{
 margin-bottom: 60px;
}
main .about08 img{
  width:23.95%;
}
/*　画像拡大＋回転　*/
main .about08 .zoomInRotate img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
main .about08 .zoomInRotate a:hover img{/*hoverした時の変化*/
	transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/

}
/*　画像のマスク　*/
main .about08 .zoomInRotate .mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

/* ==========================================================
INDEX09
========================================================== */
main .first-view09{
  background-image: url(../images/first_view_picts/development.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-view09::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view09 .dptjp{
  margin-top:250px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view09 .dpteng{
  margin-top: 270px;
  font-size: 32px;
  letter-spacing: 0.5em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .about09{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 150px;
}
main .about09 .zoomInRotate{
  margin-bottom: 60px;
 }
main .about09 img{
  width:23.95%;
}
/*　画像拡大＋回転　*/
main .about09 .zoomInRotate img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
main .about09 .zoomInRotate a:hover img{/*hoverした時の変化*/
	transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/

}
/*　画像のマスク　*/
main .about09 .zoomInRotate .mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

/* ==========================================================
message
========================================================== */
main .first-viewmessage{
  background-image: url(../images/first_view_picts/shake_hand.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-viewmessage::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 500px;
  top: 37px;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

main .first-viewmessage .messagejp{
  margin-top: 250px;
  /* text-align: left; */
  font-size: 16px;
  position: absolute;
    width: 100%;
    text-align: center;
    color:#efefef;
}
main .first-viewmessage .messageeng{
  margin-top: 270px;
  font-size: 32px;
  letter-spacing: 0.5em;
  position: absolute;
    width: 100%;
    text-align: center;
    /* 重なり順を指定*/
    z-index: 5;
    color:#efefef;
}
main .message02{
  margin-bottom: 80px;
}
main .message02 img{
  margin-bottom: 40px;
}
main .message02 p{
  font-size:16px;
 padding-bottom: 15px;
}

main .message02 .last{
  margin-bottom: 30px;
}

/* ==========================================================
topics02
========================================================== */
main .first-viewtopics{
  background-image: url(../images/first_view_picts/topics.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-viewtopics::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 500px;
  top: 37px;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

main .first-viewtopics .topicsjp{
  margin-top: 230px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-viewtopics .topicseng{
  margin-top: 250px;
  font-size: 32px;
  letter-spacing: 0.5em;
  position: absolute;
    width: 100%;
    text-align: center;
    /* 重なり順を指定*/
    z-index: 5;
  color:#efefef;
}
main .topicsection02{
  margin-bottom: 100px;
}


/* ==========================================================
vision
========================================================== */
main .first-viewvision{
  background-image: url(../images/first_view_picts/vision_img.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-viewvision::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}

main .first-viewvision .vjp{
  margin-top: 250px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color:#efefef;
}
main .first-viewvision .veng{
  margin-top: 270px;
  font-size: 32px;
  letter-spacing: 0.5em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .top-view_vision{
  width: 50%;
  padding-top: 10%;
}
main .top-view_vision .img-box_vision{
  width: 100%;
  padding-top: 50%;
  position: relative;
}
main .top-view_vision .img-box_vision img{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}


main .about_vision{
    margin-bottom: 100px;
}

main .top-view_vision .about_vision h3{
  margin: 40px 0 20px 0;
  font-size: 22px;
}
main .top-view_vision .word01{
 margin: 20px 0 40px 0;  
 font-size: 16px;
}
main .top-view_vision .word01 p{
  line-height: 2.2em;
  margin: 0; 
  padding: 0;
  font-size: 16px;
}
main .top-view_vision .word02{
  line-height: 2.2em;
  margin-bottom: 50px;
  font-size: 16px;
}

main .top-view_vision .word03 h3{
  margin-bottom: 60px;
  text-align: center;
  font-size: 24px;
}
main .top-view_vision .word03 .compliance01{
  text-align : center;
  
}

main .top-view_vision .word03 .compliance000{
  margin-top: 40px; 
  display:inline-block;
  padding: 3px;
  background-color: #D84A81;
  font-size: 18px;
  color: #fff;
}
main .top-view_vision .word03 .compliance001{
  margin-top: 20px; 
  display:inline-block;
  padding: 3px;
  background-color: #8FE841;
  font-size: 18px;
  color: #fff;
}
main .top-view_vision .word03 .compliance002{
  margin-top: 20px; 
  display:inline-block;
  padding: 3px;
  background-color: #42E5AB;
  font-size: 18px;
  color: #fff;
}
main .top-view_vision .word03 .compliance003{
  margin-top: 20px; 
  display:inline-block;
  padding: 3px;
  background-color: #45C4E2;
  font-size: 18px;
  color: #fff;
}
main .top-view_vision .word03 .compliance004{
  margin-top: 20px; 
  display:inline-block;
  padding: 3px;
  background-color: #4690E0;
  font-size: 18px;
  color: #fff;
}
main .top-view_vision .word03 .compliance005{
  margin-top: 20px; 
  display:inline-block;
  padding: 3px;
  background-color: #484FDD;
  font-size: 18px;
  color: #fff;
}
main .top-view_vision .word03 .compliance006{
  margin-top: 20px; 
  display:inline-block;
  padding: 3px;
  background-color: #9049DB;
  font-size: 18px;
  color: #fff;
}
main .top-view_vision .word03 ul li{
  font-size:16px;
}
/* ==========================================================
 maintenance
========================================================== */
main .first-viewmaintenance{
  max-width: 1000px;
  height: 500px;
  margin-bottom :0;
}
main .first-viewmaintenance .images{
 display: flex;
}
main  .images .imagea{
 width: 40%;
 height: auto;
}
main  .images .imageb{
  width: 50%;
  height: auto;
}
main .first-viewmaintenance .mejp{
  margin-top:200px;
  text-align: center;
  font-size: 24px;
}
main .first-viewmaintenance .meeng{
  text-align: center;
  font-size: 50px;
  letter-spacing: 0.2em;
}


/* ==========================================================
abenohannancho
========================================================== */
main .first-view_abenohannancho{
  background-image: url(../images/first_view_picts/abenohannancho.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-view_abenohannancho::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view_abenohannancho .abenohannanchojp{
  margin-top: 230px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view_abenohannancho .abenohannanchoeng{
  margin-top: 250px;
  font-size: 32px;
  letter-spacing: 0.2em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .aboutabenohannancho{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 150px;
}
main .aboutabenohannancho .zoomInRotate{
  margin-bottom: 60px;
 }

main .aboutabenohannancho .zoomInRotate{
  margin-bottom: 40px;
 }
 main .aboutabenohannancho img{
   width:23.95%;
 }
 /*　画像拡大＋回転　*/
 main .aboutabenohannancho .zoomInRotate img{
   transform: scale(1);
   transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
 }
 main .aboutabenohannancho .zoomInRotate a:hover img{/*hoverした時の変化*/
   transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/
 
 }
 /*　画像のマスク　*/
 main .a.aboutabenohannancho .zoomInRotate .mask{
     display: block;
     line-height: 0;/*行の高さを0にする*/
     overflow: hidden;/*拡大してはみ出る要素を隠す*/
 }


 
 /* ==========================================================
shinsaibashi_hotel
========================================================== */
main .first-view_shinsaibashi_hotel{
  background-image: url(../images/first_view_picts/S_hotel.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}

main .first-view_shinsaibashi_hotel::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view_shinsaibashi_hotel .s_hoteljp{
  margin-top: 230px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view_shinsaibashi_hotel .s_hoteleng{
  margin-top: 250px;
  font-size: 32px;
  letter-spacing: 0.2em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .about_s_hotel{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 150px;
}
main .about_s_hotel .zoomInRotate{
  margin-bottom: 60px;
 }

main .about_s_hotel .zoomInRotate{
  /* margin-bottom: 40px; */
 }
 main .about_s_hotel img{
   width:23.95%;
 }
 /*　画像拡大＋回転　*/
 main .about_s_hotel .zoomInRotate img{
   transform: scale(1);
   transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
 }
 main .about_s_hotel .zoomInRotate a:hover img{/*hoverした時の変化*/
   transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/
 
 }
 /*　画像のマスク　*/
 main .about_s_hotel .zoomInRotate .mask{
     display: block;
     line-height: 0;/*行の高さを0にする*/
     overflow: hidden;/*拡大してはみ出る要素を隠す*/
 }


  /* ==========================================================
roof_apt
========================================================== */
main .first-view_roof_apt{
  background-image: url(../images/first_view_picts/roof_apt.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}

main .first-view_roof_apt::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view_roof_apt .roof_aptjp{
  margin-top: 230px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view_roof_apt .roof_apteng{
  margin-top: 250px;
  font-size: 32px;
  letter-spacing: 0.2em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .about_roof_apt{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 150px;
}
main .about_roof_apt .zoomInRotate{
  margin-bottom: 60px;
 }

main .about_roof_apt .zoomInRotate{
  /* margin-bottom: 40px; */
 }
 main .about_roof_apt img{
   width:23.95%;
 }
 /*　画像拡大＋回転　*/
 main .about_roof_apt .zoomInRotate img{
   transform: scale(1);
   transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
 }
 main .about_roof_apt .zoomInRotate a:hover img{/*hoverした時の変化*/
   transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/
 
 }
 /*　画像のマスク　*/
 main .about_roof_apt .zoomInRotate .mask{
     display: block;
     line-height: 0;/*行の高さを0にする*/
     overflow: hidden;/*拡大してはみ出る要素を隠す*/
 }


 
 
  /* ==========================================================
hyogo_apt
========================================================== */
main .first-view_hyogo_apt{
  background-image: url(../images/first_view_picts/hyogo_apt_1stview.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}

main .first-view_hyogo_apt::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view_hyogo_apt .hyogo_aptjp{
  margin-top: 230px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view_hyogo_apt .hyogo_apteng{
  margin-top: 250px;
  font-size: 32px;
  letter-spacing: 0.2em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .about_hyogo_apt{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 100px;
}
main .about_hyogo_apt .zoomInRotate{
  margin-bottom: 60px;
 }

 main .about_hyogo_apt img{
   width:23.95%;
 }
 /*　画像拡大＋回転　*/
 main .about_hyogo_apt .zoomInRotate img{
   transform: scale(1);
   transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
 }
 main .about_hyogo_apt .zoomInRotate a:hover img{/*hoverした時の変化*/
   transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/
 
 }
 /*　画像のマスク　*/
 main .about_hyogo_apt .zoomInRotate .mask{
     display: block;
     line-height: 0;/*行の高さを0にする*/
     overflow: hidden;/*拡大してはみ出る要素を隠す*/
 }


/* ==========================================================
otsu
========================================================== */
main .first-view_otsu{
  background-image: url(../images/first_view_picts/otsu.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-view_otsu::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view_otsu .otsujp{
  margin-top: 230px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view_otsu .otsueng{
  margin-top: 250px;
  font-size: 32px;
  letter-spacing: 0.2em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .about_otsu{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 100px;
}
main .about_otsu .zoomInRotate{
  margin-bottom: 60px;
 }
main .about_otsu .zoomInRotate{
  /* margin-bottom: 40px; */
 }
 main .about_otsu img{
   width:23.95%;
 }
 /*　画像拡大＋回転　*/
 main .about_otsu .zoomInRotate img{
   transform: scale(1);
   transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
 }
 main .about_otsu .zoomInRotate a:hover img{/*hoverした時の変化*/
   transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/
 
 }
 /*　画像のマスク　*/
 main .about_otsu .zoomInRotate .mask{
     display: block;
     line-height: 0;/*行の高さを0にする*/
     overflow: hidden;/*拡大してはみ出る要素を隠す*/
 }




 /* ==========================================================
f_rooftop
========================================================== */
main .first-view_f_rooftop{
  background-image: url(../images/first_view_picts/factory_rooftop.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-view_f_rooftop::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view_f_rooftop .f_rooftopjp{
  margin-top: 230px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view_f_rooftop .f_rooftopeng{
  margin-top: 250px;
  font-size: 32px;
  letter-spacing: 0.2em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .about_f_rooftop{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 100px;
}
main .about_f_rooftop .zoomInRotate{
  margin-bottom: 60px;
 }
main .about_f_rooftop .zoomInRotate{
  /* margin-bottom: 40px; */
 }
 main .about_f_rooftop img{
   width:23.95%;
 }
 /*　画像拡大＋回転　*/
 main .about_f_rooftop .zoomInRotate img{
   transform: scale(1);
   transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
 }
 main .about_f_rooftop .zoomInRotate a:hover img{/*hoverした時の変化*/
   transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/
 
 }
 /*　画像のマスク　*/
 main .about_f_rooftop .zoomInRotate .mask{
     display: block;
     line-height: 0;/*行の高さを0にする*/
     overflow: hidden;/*拡大してはみ出る要素を隠す*/
 }


 /* ==========================================================
pressance-apt
========================================================== */
main .first-view_pressanceapt{
  background-image: url(../images/first_view_picts/pressance_apt.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-view_::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view_pressanceapt .pressanceaptjp{
  margin-top: 230px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view_pressanceapt .pressanceapteng{
  margin-top: 250px;
  font-size: 32px;
  letter-spacing: 0.2em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .about_pressanceapt{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 100px;
}
main .about_pressanceapt .zoomInRotate{
  margin-bottom: 60px;
 }
main .about_pressanceapt .zoomInRotate{
  /* margin-bottom: 40px; */
 }
 main .about_pressanceapt img{
   width:23.95%;
 }
 /*　画像拡大＋回転　*/
 main .about_pressanceapt .zoomInRotate img{
   transform: scale(1);
   transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
 }
 main .about_pressanceapt .zoomInRotate a:hover img{/*hoverした時の変化*/
   transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/
 
 }
 /*　画像のマスク　*/
 main .about_pressanceapt .zoomInRotate .mask{
     display: block;
     line-height: 0;/*行の高さを0にする*/
     overflow: hidden;/*拡大してはみ出る要素を隠す*/
 }






  /* ==========================================================
newoffice
========================================================== */
main .first-view_newoffice{
  background-image: url(../images/first_view_picts/newoffice.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}
main .first-view_newoffice::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view_newoffice .newofficejp{
  margin-top: 230px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view_newoffice .newofficeeng{
  margin-top: 250px;
  font-size: 32px;
  letter-spacing: 0.2em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .about_newoffice{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 150px;
}
main .about_newoffice .zoomInRotate{
  margin-bottom: 60px;
}
main .about_newoffice .zoomInRotate{
  /* margin-bottom: 40px; */
 }
 main .about_newoffice img{
   width:23.95%;
 }
 /*　画像拡大＋回転　*/
 main .about_newoffice .zoomInRotate img{
   transform: scale(1);
   transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
 }
 main .about_newoffice .zoomInRotate a:hover img{/*hoverした時の変化*/
   transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/
 
 }
 /*　画像のマスク　*/
 main .about_newoffice .zoomInRotate .mask{
     display: block;
     line-height: 0;/*行の高さを0にする*/
     overflow: hidden;/*拡大してはみ出る要素を隠す*/
 }

/* ==========================================================
k_sandacho
========================================================== */
main .first-view_k_sandacho{
  background-image: url(../images/first_view_picts/development.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}

main .first-view_k_sandacho::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view_k_sandacho .k_sandachojp{
  margin-top:250px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view_k_sandacho .k_sandachoeng{
  margin-top: 270px;
  font-size: 32px;
  letter-spacing: 0.5em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}
main .aboutabenohannancho .zoomInRotate{
  margin-bottom: 60px;
 }

main .about_k_sandacho{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 150px;
}
main .about_k_sandacho img{
  width:23.95%;
}
/*　画像拡大＋回転　*/
main .about_k_sandacho .zoomInRotate img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
main .about_k_sandacho .zoomInRotate a:hover img{/*hoverした時の変化*/
	transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/

}
/*　画像のマスク　*/
main .about_k_sandacho .zoomInRotate .mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

/* ==========================================================
kohyo_superstore
========================================================== */
main .first-view_kohyo_superstore{
  background-image: url(../images/kohyo_m_store/kohyo.01.jpg);
  height: 500px;
  background-size: cover;
  background-position: center;
  margin-bottom: 100px;
}


main .first-view_kohyo_superstore::before{
  /* 透過した黒を上から重ねるイメージ */
  background-color: rgba(0,0,0,0.4);
  /* 自由に位置指定 */
  position: absolute;
  height: 540px;
  top: 37px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
main .first-view_kohyo_superstore .kohyo_superstorejp{
  margin-top: 230px;
  font-size: 16px;
  position: absolute;
  width: 100%;
  text-align: center;
  color: #efefef;
}
main .first-view_kohyo_superstore .kohyo_superstoreeng{
  margin-top: 250px;
  font-size: 32px;
  letter-spacing: 0.2em;
  position: absolute;
  width: 100%;
  text-align: center;
  /* 重なり順を指定*/
  z-index: 5;
  color:#efefef;
}

main .aboutkohyo_superstore{
  display: flex;
	flex-wrap: wrap;
  gap: 60px 1.4%;
  margin-bottom: 150px;
}
main .aboutkohyo_superstore .zoomInRotate{
  margin-bottom: 60px;
 }

main .aboutkohyo_superstore .zoomInRotate{
  /* margin-bottom: 40px; */
 }
 main .aboutkohyo_superstore img{
   width:23.95%;
 }
 /*　画像拡大＋回転　*/
 main .aboutkohyo_superstore .zoomInRotate img{
   transform: scale(1);
   transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
 }
 main .aboutkohyo_superstore .zoomInRotate a:hover img{/*hoverした時の変化*/
   transform:rotate(5deg) scale(1.1);/*拡大、回転の値を変更したい場合はこの数値を変更*/
 
 }
 /*　画像のマスク　*/
 main .aboutkohyo_superstore .zoomInRotate .mask{
     display: block;
     line-height: 0;/*行の高さを0にする*/
     overflow: hidden;/*拡大してはみ出る要素を隠す*/
 }







/*==768px以下の形状*/

 @media screen and (max-width: 768px){
  .sp-menu .logo01{
    margin-bottom: 20px;
  }
  .sp-menu .logo01 img{
    max-width: 100px;
    height: 0 auto;
  }
  .sp-menu nav ul{
    display: flex;
    flex-wrap: wrap;
    width: 30rem;
    justify-content: flex-end;
    margin-bottom:60px;
  }
  .sp-menu nav ul li{
    width :50%;
    padding:0;
    margin:0;
  }

  .sp-menu .sp_tel{
    font-size: 14px;
    text-align: left;
  }
  .sp-menu .sp_address{
    font-size: 14px;
  }

  main .title01 .apologizingsentence h2{
  font-size: 20px;
  }

  .topicsection .jp, .message .jp, .gallery .jp,  .historyflex .jp, .vision .jp, .cp .jp, .recruit_index .jp, .accesstitletop .jp,{
    font-size:14px;
  }

  .topicsection h2, .message h2, .gallery h2,  .historyflex h2, .vision h2, .cp h2, .recruit_index h2, .accesstitletop h2, main .parallax01 .parallax_box  .parallax_content.img_bg_01 h2 {
    font-size:28px;
  }

  main .historyflex .pc-only, main .vision .pc-only, main .cp .pc-only,main .navlist{
    display:none;
  }
  main .topicsection, main .message, main .gallery, main .historyflex, main .vision, main .cp, main .cp_h1title dl{
    margin-bottom: 60px;
  }
  .gallery .slider dt{
    font-size: 18px;
  }

  main{
    margin: 0 10px;
  }
/* ////////hamburger///////// */
header .pc-menu {
  display: none;
}

.ham-menu {
  display: inline-block;
  cursor: pointer;
  position: fixed;
  right: 10px;
  top: 20px;
  z-index: 10;
  width: 40px;
  height: 24px;
}
.ham-line {
  position: absolute;
  transition: 0.3s;
  width: 100%;
  height: 2px;
  background-color: #333;
}
.line-top {
  top: 0;
}
.line-middle {
  top: calc(50% - 1px);
}
.line-bottom {
  bottom: 0;
}
.ham-menu-active > .line-top {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}
.ham-menu-active > .line-middle {
  width: 0;
  height: 0;
}
.ham-menu-active > .line-bottom {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}
header .sp-menu ul li{
text-align: center;
}

header .sp-menu {
display: flex;
overflow: hidden;
font-family: 'Times New Roman', "Noto Sans JP", serif;
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: start;
align-items: center;
background: #fff;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s linear;
}
header .sp-menu ul li a{
  font-size: 16px;
} 
header .sp-menu ul li span{
  font-size: 14px;
  color: #FC5863;
  font-weight: bold;
  } 

header .sp-menu.is-active {
  pointer-events: auto;
  opacity: 1;
}
header .sp-menu small{
  position:absolute;
  bottom: 0;
  font-size: 12px;
  margin-left: -120px;
  padding: 0;
}
/* ////////hamburgerend/////////// */

  p{
    font-size: 16px;
  }
  
 
  main .title01 .sliderfv{
    margin-bottom: 60px;
  }
  main .title01 .apologizingsentence .end{
    margin-bottom: 60px;
  }


  main .vision{
    display : block;
  }

  .news_list_item a{
    font-size: 14px;
  }
  main .recruit h2{
    font-size: 28px;
  }



      /* flex-flow: column; */
    


 
 /* ///////anotherlink//////// */

  main .first-view05 .ccweng, main .first-view06 .interiereng, main .first-view07 .exteriereng, main .first-view08 .renovationeng, main .first-viewrt .recruiteng, main .first-viewtopics .topicseng, main .first-view_roof_apt .roof_apteng, main .first-viewh .historyeng, main .first-viewcp .cpeng, main .first-viewmessage .messageeng, main .first-viewtopics .topicseng, main .first-viewmaintenance .meeng, main .first-view09 .dpteng, main .first-viewvision .veng, main .first-view_hyogo_apt .hyogo_apteng, main .first-view_f_rooftop .f_rooftopeng, main .first-view_otsu .otsueng{
    font-size: 24px;
  }


  main .first-view05 .ccwjp, main .first-view06 .interierjp, main .first-view07 .exterierjp, main .first-view08 .renovationjp, main .first-viewrt .recruitjp, main .first-viewtopics .topicsjp, main .first-view_roof_apt .roof_aptjp, main .first-viewh .historyjp, main .first-viewcp .cpjp, main .first-viewmessage .messagejp, main .first-viewtopics .topicsjp, main .first-view09 .dptjp, main .first-viewvision .vjp, main .first-view_hyogo_apt .hyogo_aptjp, main .first-view_f_rooftop .f_rooftopjp, main .first-view_otsu .otsujp{
    font-size: 14px;
  }

  main .about05 h2, main .aboutabenohannancho h2, main .about_k_sandacho h2, main .about_hyogo_apt h2, main .aboutkohyo_superstore h2, main .first-view_roof_apt h2, main .about_newoffice h2, main .about_s_hotel h2, main .about_roof_apt h2, main .about_f_rooftop h2, main .about_otsu h2{
    font-size: 24px;
  }

  main .first-view_kohyo_superstore .kohyo_superstoreeng, main .first-view_abenohannancho .abenohannanchoeng, main .first-view_shinsaibashi_hotel .s_hoteleng, main .first-view_newoffice .newofficeeng {
    font-size: 28px;
  }



  /* //////////////topics///////////////// */
  inner{
    padding: 10px;
  }
  main .news_list02{
    margin: 0 30px;
  }

/* /////////index06///////////// */
main .about06 h2{
  font-size: 24px;
}

/* /////////index08///////////// */
main .about08 h2{
  font-size: 24px;
}

/* /////////index09///////////// */
main .about09 h2{
  font-size: 24px;
}

/* /////////vision02///////////// */
main .top-view_vision{
  width: 100%;
  padding-top: 10%;
}
/* ////////k_sandacho///////////// */
main .first-view_k_sandacho .k_sandachoeng{
  font-size: 22px;
}
footer img{
  width: 180px;
  height: 80px;
}
header .sp-menu .sp_copyright{
  text-align: center;
}


}








@media screen and (min-width: 769px){
  .sp-menu{
    display: none;
  }

  nav{
    margin: 30px;
  }
  nav ul{
    flex-wrap: wrap;
  }
  header .pc-menu nav li{
    width: calc( 50% - 2px );
    font-size: 34px;
    line-height: 1; 
  }
  header .sp-menu nav li span{
    display: block;
    font-size: 14px;
    margin-top: 15px;
  }

  header .sp-menu .sp_tel{
    font-size: 24px;
    text-align: center;
  }
  header .sp-menu .sp_address{
    font-size: 14px;
    text-align: center;
    margin-bottom: 100px;
  }
  main .scrolldown1{
    display: none;
  }
  
  .news_list_item a {
    padding-right: 0;
  } */

  main .message .fadeinjp{
    font-size: 18px;
  }
  main .message h2{
    font-size: 32px;
  }
 main .message .me-word{
  font-size: 16px;
 }
 main .gallery h2{
  font-size: 32px;
 }
 main .gallery .slider dt{
  font-size: 16px;
 }

  main .historyflex h2{
    font-size: 32px;
  }
  main .historyflex .sp-only{
    display: none;
  }

  main .top-view .word03{
    padding: 30px;
  }
  main .vision h2{
    font-size: 32px;
  }
  main .vision .vi-word{
    font-size: 16px;
  } 

  main .cp h2{
    font-size: 32px;
  }
  main .cp .sp-only{
    display: none;
  }
  

  main .recruit .parallax_box .re-word{
    font-size: 14px;
  }
  main .accesstitletop h2{
  font-size: 32px;
  }


  footer .address{
    font-size: 14px;
  }
  footer .telandfax{
    font-size: 14px;
  }
  footer img{
    width: 150px;
    height: 90px;
    margin-bottom: 40px;
  }
}







  


@media screen and (min-width: 769px) {
.sp-menu{
  display: none;
}
}

  
  @media screen and (max-width: 1024px) {
    .news_list_item a {
        display: block;
    }
    

      /* //////////////topics///////////////// */
  main .news_list02{
    margin: 0 30px;
  }
}