@charset "UTF-8";


.entry-content,
article,
.top_main,
.top_content,
p, ul, ol, dl,
dl.top_news,
dl.top_shinryou,
table.table_timetable,
table {
font-size: 15px;
}


@media only screen and (min-width: 1280px) {
.entry-content,
article,
.top_main,
.top_content,
.top_content p, 
.top_content ul,
.top_content ol, 
.top_content dl,
table.table_timetable,
table {
font-size: 1.15vw;
}
}
@media only screen and (min-width: 1280px) {
.btn,
.btn02,
.breadcrumb {
  font-size: 0.8vw;
}
}
@media only screen and (min-width: 1280px) {
article h1,
.sidebar h1,
#title h1,
.topmain h1,
.entry-content h1,
h1 {
  font-size: 5vw;
  line-height: 1.2;
}
}
@media only screen and (min-width: 1280px) {
article h2,
.sidebar h2,
.title h2,
.topmain h2,
.entry-content h2,
h2 {
  font-size: 1.8vw !important;
}
}


article h3,
.sidebar h3,
.title h3,
.entry-content h3,
h3.entry_title,
h3 {
  font-size: 22px;
  line-height: 1.4;
  text-box-trim: trim-both;
}

.navi-in > ul li a,
article h4,
.sidebar h4,
.title h4,
.entry-content h4,
h4.entry_title,
h4 {
  font-size: 20px;
  line-height: 1.5;
  text-box-trim: trim-both;
}

dl.faq dt,
article h5,
.sidebar h5,
.title h5,
.topmain h5,
.entry-content h5,
h5 {
  font-size: 18px;
  line-height: 1.6;
  text-box-trim: trim-both;
}


.top_content h2 {
  font-family: 'Zen Old Mincho', serif;
  font-weight: 400;
}

.mincho {
  font-family: 'Zen Old Mincho', serif;
}

/*-------------------------------------------
Mainvisual
-------------------------------------------*/
.mainvisual {
  height: 900px;
  margin-top: 80px;
  margin-bottom: 0;
  position: relative;
}
.mainvisual .fade-img img {
  width: 100%;
  height: 900px;
  object-fit: cover;
}
.mainvisual .fade-img li {
  width: 70%;
  position: absolute;
  right: 0;
  opacity: 0;
  animation: fade 30s infinite;
}
.mainvisual .fade-img li:nth-child(1) {
  animation-delay: 0s;
}
.mainvisual .fade-img li:nth-child(2) {
  animation-delay: 5s;
}
.mainvisual .fade-img li:nth-child(3) {
  animation-delay: 10s;
}
.mainvisual .fade-img li:nth-child(4) {
  animation-delay: 15s;
}
.mainvisual .fade-img li:nth-child(5) {
  animation-delay: 20s;
}
.mainvisual .fade-img li:nth-child(6) {
  animation-delay: 25s;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.mainvisual .catchphrase {
  font-family: 'Zen Old Mincho', serif;
  font-weight: 400;
  text-shadow: 3px 3px 3px #FFF, -3px -3px 3px #FFF, 0px 0px 5px rgba(255,255,255,1.0), 0px 0px 10px #FFF, 0px 0px 15px rgba(255,255,255,0.9);
  position: absolute;
  top: 160px;
  left: 6%;
}
.mainvisual .catchphrase p {
  font-size: 74px;
}
.mainvisual .catchphrase p.fs36 {
  font-size: 54px;
  line-height: 1.5;
}

.underline {
border-bottom: solid 2px #F00;
}





/* セクションタイトル */
.section-title {
  color: rgba(51, 51, 51, 0.9);
  font-size: clamp(60px, 20vw, 80px);
  font-weight: 700;
  letter-spacing: 0em;
  line-height: 1.0;
  text-box-trim: trim-both;
}
@media screen and (max-width: 1280px){
.section-title {
  font-size: 10vw;
}
}
/* ボタン */
.btn {
  max-width: 180px;
  background-color: #fff;
  color: #000;
  display: block;
  border: solid 1px #1f1f1f;
  padding: 16px 0;
  text-align: center;
  position: relative;
  z-index: 10;
}
.btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #1f1f1f;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
}
.btn:hover {
  color: #fff;
  opacity: 1;
}
.btn:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}



/* ボタン */
.btn02 {
display: inline;
  max-width: 180px;
  background-color: #fff;
  color: #000;
  display: block;
  border: solid 1px #1f1f1f;
  padding: 4px 16px;
  text-align: center;
  position: relative;
  z-index: 10;
}
.btn02::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #1f1f1f;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
}
.btn02:hover {
  color: #fff;
  opacity: 1;
}
.btn02:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}


/* Inview */
.fadein {
  opacity: 0;
  transform: translateY(80px);
  transition: all 1s;
}
.fadein.inview {
  opacity: 1;
  transform: translateY(0);
}



/*-------------------------------------------
About
-------------------------------------------*/


.parent {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 60px 0;
}
    
.div1 {
    grid-column: span 6 / span 6;
    grid-row: span 3 / span 3;
	position: relative;
	background: #F5F5F5;
	overflow: hidden;
}    

    
.div1 img {
position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
display: block;
width: 100%;
height: 100%;
object-fit: cover;

}

.div2 {
    grid-column: span 6 / span 6;
    grid-column-start: 7;
    grid-row-start: 2;
	padding: 40px;
	border: 1px solid #CCC;
}

.div3 {
    grid-column: span 6 / span 6;
    grid-column-start: 7;
    grid-row-start: 1;
}

.div4 {
    grid-column: span 6 / span 6;
    grid-column-start: 7;
    grid-row-start: 3;
}
.parent .div2 p {
font-weight: 700;
}


.about {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  padding: 0 5%;
}

@media screen and (max-width: 1280px){
.about {
  padding: 0 5%;
}
}
@media screen and (max-width: 1080px){
.about {
  padding: 0 16px;
}
}
.about .section-title {
  margin: 0 0 0 0;
  position: relative;
  z-index: 10;
  white-space: nowrap;
}
.about .flex {
  display: flex;
  align-items: center;
}
.about .flex .img {
  width: calc(50% - 20px);
}
.about .flex .img img {
  width: 100%;
  height: 740px;
  object-fit: cover;
}
.about .flex .text {
  width: calc(50% + 20px);
  background-color: #fff;
  padding: 3% 3% 3% 3%;
  margin-left: 0%;
	border: 1px solid #CCC;
}
.about .text .title {
  font-family: 'Zen Old Mincho', serif;
  font-size: 24px;
  margin-bottom: 0;
}
.about .text .description {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 0;
}
.flex_about_bt {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.flex_about_bt p {
display: inline-block;
margin: 0;
padding: 0;
}


/* =========================================
   ▶ 画像＆文字のレスポンシブ最適化（iPad mini縦=768pxまではPC表示）
   ========================================= */

/* 画像の基本：横幅に合わせて縮み、縦横比維持 */
img,
.about .flex .img img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* タイポグラフィ：画面幅に応じて滑らかに拡大縮小 */
html {
  /* ベース文字サイズを微調整（最小15px〜最大17px程度） */
  font-size: clamp(15px, 0.9vw + 13px, 17px);
}

/* セクション内の見出し＆本文をclampで可変に */
.about .text .title {
  font-size: clamp(20px, 1.2vw + 16px, 28px);
  line-height: 1.3;
}
.about .text .description,
.parent .div2 p {
  font-size: clamp(14px, 0.6vw + 12px, 18px);
  line-height: 1.8;
}

/* 余白も可変に：窮屈/スカスカ回避 */
.about .text {
  padding: clamp(16px, 2vw, 32px);
}
.parent .div2 {
  padding: clamp(16px, 2.8vw, 40px);
}

/* .div1（写真ブロック）の天地サイズ：可変で“固定感”を維持 */
.div1 {
  /* 既存: position:relative; overflow:hidden; は維持 */
  min-height: clamp(320px, 55vh, 720px); /* 端末に応じて高さを自動調整 */
}

/* .div1内の画像は常に全面カバー */
.div1 img {
  /* 既存の absolute + transform は活かしつつ */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* iPad mini 縦（820px）まではPCレイアウトを維持しない → スマホ化は821px以下 */

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

  /* .about の左右2カラムをスマホだけ縦積みに */
  .about .flex {
    flex-direction: column;
    align-items: stretch;
  }
  .about .flex .img,
  .about .flex .text {
    width: 100%;
    margin: 0;
  }

  /* グリッド（.parent）もスマホだけ縦積みへ */
  .parent {
    display: block; /* 単純化して縦並び */
  }
  .div1,
  .div2,
  .div3,
  .div4 {
    /* ブロック化 */
    width: 100%;
  }
  .div2,
  .div3,
  .div4 {
    margin-top: 16px;
  }

  /* スマホは画像の縦を少し浅めにして可読性を確保 */
  .div1 {
    min-height: clamp(240px, 42vh, 520px);
  }
}







/*-------------------------------------------
Strengths
-------------------------------------------*/
.strengths {
display: block;
margin: 0 auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  padding: 5% 5%;
background-color: #0D79C1;
color: #FFF;
}
@media only screen and (max-width: 768px) {
.strengths {
  margin-left: 0;
  margin-right: 0;
  padding-left: 16px;
  padding-right: 16px;
}
}

.strengths .section-title {
color: #FFF !important;
line-height: 1.3;
}



.grid_strengths {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3%;
}
 
p.lh18 {
line-height: 1.8;
}
.grid_strengths_box {
    grid-column: span 6 / span 6;
}

ul.list_top_strengths {
margin: 0;
padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
ul.list_top_strengths li {
margin: 0;
    grid-column: span 4 / span 4;
	background-color: #0169b0;
	color: #FFF;
	text-align: center;
	border-radius: 16px;
	padding: 8px;
}
ul.list_top_strengths li .imagecenter {
max-width: 50%;
margin-bottom: 8px;
}

.box_top_strengths {
display: block;
	background-color: #0169b0;
	color: #FFF;
	border-radius: 16px;
	padding: 16px;
}
.flex_top_margin {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.flex_top_margin_icon {
display: block;
width: 20%;

}
.flex_top_margin_icon .imagecenter {
max-width: 80%;

}
.flex_top_margin_txt {
display: block;
width: 80%;
}
/*-------------------------------------------
Company
-------------------------------------------*/
.company {
display: block;
margin: 0 auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  padding: 5% 5%;
}
.company .section-title {
  margin: 0 0 0 0;
  position: relative;
  z-index: 10;
  white-space: nowrap;
}
.company .flex {
  display: flex;
  align-items: center;
}
.company .flex .img {
  width: 80%;
}
.company .flex .img img {
  width: 100%;
  height: 85%;
  object-fit: cover;
}
.company .flex .text {
  width: 50%;
  background-color: #fff;
  padding: 5% 8%;
  margin-left: -30%;
}
.company .text .title {
  font-family: 'Zen Old Mincho', serif;
  margin-bottom: 0;
}
.company .text .description {
  line-height: 1.8;
  margin-bottom: 0;
}


/*-------------------------------------------
Products
-------------------------------------------*/
.products {
  margin-bottom: 120px;
  position: relative;
}
.products::after {
  content: "";
  width: 70%;
  height: 300px;
  background-color: #fafafa;
  display: block;
  position: absolute;
  top: 6vw;
  right: 0;
  z-index: -10;
}
.products .text {
  width: 70%;
  padding: 0 5%;
  margin-left: auto;
}
.products .text .section-title {
  margin-bottom: 30px;
  margin-left: 0;
}
.products .text .description {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 60px;
}
.products .products-list-area {
  display: flex;
  margin-bottom: 40px;
  overflow-x: hidden;
}
.products .products-list-area .products-list {
  display: flex;
  animation: slide-left 60s infinite linear both;
}
.products .products-list-area .products-list li {
  width: calc(100vw / 3);
}
.products .products-list-area .products-list li img {
  width: 100%;
}
@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.products .btn {
  margin: 0 auto;
}

/*-------------------------------------------
Works
-------------------------------------------*/
.works {
display: block;
margin: 0 auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  padding-left: 5%;
}
@media only screen and (max-width: 640px) {
.works {
  padding-left: 16px;
  padding-right: 16px;
}
}



.grid_top_service {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
}
.grid_top_service01 {
    grid-column: span 4 / span 4;
	margin-right: 5%;
}
.grid_top_service02 {
    grid-column: span 3 / span 3;
    grid-column-start: 5;
}
.grid_top_service03 {
    grid-column: span 3 / span 3;
    grid-column-start: 8;
}
.grid_top_service04 {
    grid-column: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 2;
}
.grid_top_service05 {
    grid-column: span 3 / span 3;
    grid-column-start: 5;
    grid-row-start: 2;
}
.grid_top_service06 {
    grid-column: span 3 / span 3;
    grid-column-start: 8;
    grid-row-start: 2;
}

.grid_top_service02,
.grid_top_service03,
.grid_top_service04,
.grid_top_service05,
.grid_top_service06 {
position: relative;
overflow: hidden;
}

.grid_top_service02 img,
.grid_top_service03 img,
.grid_top_service04 img,
.grid_top_service05 img,
.grid_top_service06 img {
position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}



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

.grid_top_service {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: none;
    gap: 4px;
}
.grid_top_service01 {
    grid-column: span 10 / span 10;
	margin-right: 0;
}
.grid_top_service02 {
    grid-column: span 5 / span 5;
    grid-row-start: 2;
}
.grid_top_service03 {
    grid-column: span 5 / span 5;
    grid-column-start: 6;
    grid-row-start: 2;
}
.grid_top_service04 {
    grid-column: span 5 / span 5;
    grid-row-start: 3;
}
.grid_top_service05 {
    grid-column: span 5 / span 5;
    grid-column-start: 6;
    grid-row-start: 3;
}
.grid_top_service06 {
    grid-column: span 5 / span 5;
    grid-row-start: 4;
}
}

.works .text {
  padding: 0 6% 0 4%;
}
.works .text .section-title {
  margin-bottom: 40px;
}
.works .text .description {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 20px;
}
.works .text .btn {
  margin-top: 30px;
}
.works .works-list {
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin-top: 170px;
}
.works .works-list li {
  max-width: 500px;
}


/*-------------------------------------------
施工事例
-------------------------------------------*/
.example {
text-align: center;
}
.box_example {
display: block;
margin: 0 auto;
padding: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
ul.elamplelist {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0px;
	margin: 0;
	padding: 0;
}

ul.elamplelist li {
    grid-column: span 2 / span 2;
	margin: 0;
	padding: 0;
	display: block;
	height: 0;
	padding-bottom: 100%;
	position: relative;
	overflow: hidden;
}

ul.elamplelist li img {
position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

@media screen and (max-width: 640px) {
ul.elamplelist li {
    grid-column: span 3 / span 3;
}
}

/*-------------------------------------------
Instagram
-------------------------------------------*/
.instagram {
text-align: center;
}
.box_instagram {
display: block;
margin: 0 auto;
padding: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
#sb_instagram,
#sbi_images,
.sbi {
padding: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
margin-bottom: 0 !important;
gap:0;

}


/*-------------------------------------------
iPad Air
-------------------------------------------*/
@media screen and (max-width: 821px) {
  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
  .mainvisual {
    height: 400px;
  }
  .mainvisual .fade-img img {
    height: 400px;
  }
  .mainvisual .fade-img li {
    width: 100%;
  }
  .mainvisual .catchphrase {
    color: #fff;
  text-shadow: 1px 1px 3px #000, -1px -1px 3px #000, 0px 0px 5px rgba(0,0,0,0.85);
    top: inherit;
	bottom: 16px;
    left: 6%;
  }
  .mainvisual .catchphrase p {
    font-size: 28px !important;
}
.mainvisual .catchphrase p.fs36 {
  font-size: 20px !important;
}
}

/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 640px) {
  .section-title {
    font-size: 10vw;
  }


/*-------------------------------------------
Strengths
-------------------------------------------*/
.strengths {
display: block;
margin: 0 auto;
padding: 24px 16px;
background-color: #0D79C1;
color: #FFF;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.strengths .section-title {
color: #FFF !important;
}

.grid_strengths {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
    
.grid_strengths_box {
    grid-column: span 12 / span 12;
}

  /*-------------------------------------------
  Company
  -------------------------------------------*/
  .company {
    margin-bottom: 0;
  }
  .company .section-title {
    margin: 0 0 0;
    text-align: left;
  }
  .company .flex {
    flex-direction: column;
  }
  .company .flex .img {
    width: 100%;
  }
  .company .flex .img img {
    height: 300px;
  }
  .company .flex .text {
    width: 100%;
    margin-left: 0;
    padding: 16px 16px 0;
  }
 

  /*-------------------------------------------
  Products
  -------------------------------------------*/
  .products {
    margin-bottom: 60px;
  }
  .products::after {
    width: 100%;
    height: 250px;
    top: 10vw;
  }
  .products .text {
    width: 100%;
    padding: 0 20px;
  }
  .products .text .section-title {
    text-align: center;
  }
  .products .text .description {
    margin-bottom: 20px;
  }
  .products .products-list-area {
    margin-bottom: 20px;
  }
  
  /*-------------------------------------------
  Works
  -------------------------------------------*/
  .works {
    flex-direction: column;
    margin-bottom: 60px;
  }
  .works::after {
    width: 100%;
    height: 90%;
    min-height: auto;
    top: 10vw;
  }
  .works .text {
    padding: 0 20px;
    margin-bottom: 40px;
  }
  .works .text .section-title {
    margin-bottom: 30px;
    text-align: center;
  }
  .works .works-list {
    margin-top: 0;
  }
}




.toggle {
	display: none;
}
.Label {		/*タイトル*/
	padding: 0;
	display: block;
	text-align: right;
	padding-right: 1em;
}
.Label::after{		/*タイトル横の矢印*/
	content:"+";
	width: 1em;
	height: 1em;
	position: absolute;
	top:0;
	right: 0;
    color: #08C;
	font-weight: bold;
}
.Label,
.content_toggle {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content_toggle {		/*本文*/
	height: 0;
	margin-bottom:0;
	padding:0 0;
	overflow: hidden;
}
.toggle:checked + .Label + .content_toggle {	/*開閉時*/
	height: auto;
	padding:0 ;
	transition: all .3s;
}






/*** お知らせ***/



.tab-4 {
    display: flex;
    flex-wrap: wrap;
justify-content: center;
}

.tab-4 > label {
display: flex;
/*flex: 1 1; 等間隔*/
    order: -1;
    position: relative;
    width: 10em;
    padding: .7em 1em;
    background-color: #F5F5F5;
    color: #000;
	justify-content: center;
font-weight: 600;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}

@media screen and (max-width: 640px) {
.tab-4 > label {
    width: calc(100% / 4);
    padding: .7em 0.1em;
}
}

.tab-4 > label:hover,
.tab-4 label:has(:checked) {
    background-color: #08C;
    color: #fff;
}

.tab-4 label:has(:checked)::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    background-color: #08C;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tab-4 input {
    display: none;
}

.tab-4 > div {
    display: none;
    width: 100%;
    padding: 1.5em 0;
	padding-bottom: 0;
}

.tab-4 label:has(:checked) + div {
    display: block;
}



ul.top_news {
	margin: 0;
	padding: 0;
	border-top: 1px dotted #CCC;
}
ul.top_news li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 8px 8px;
	border-bottom: 1px dotted #CCC;
}
ul.top_news li p {
	clear: both;
	margin: 0;
	padding: 0;
}
ul.top_news li p span {
}
ul.top_news li p a {
	margin: 0;
	padding: 0;
	display: block;
	color: #000;
	text-decoration: none;
}


ul.top_news li p a:hover {
	text-decoration: underline;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

@media screen and (max-width: 640px){
ul.top_news {
	margin-bottom: 0;
}
}

table.table_top_news {
	table-layout: fixed;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
}
table.table_top_news tr, table.table_top_news th, table.table_top_news td {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}
table.table_top_news th, table.table_top_news td {
	border-collapse: collapse;
	border: none;
	background: none;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
table.table_top_news th {
	color: #555;
	width: 20%;
}

@media screen and (max-width: 640px){
table.table_top_news th {
	display: block;
	margin-bottom: 8px;
}
table.table_top_news td {
	display: block;
	margin-bottom: 0;
}
table.table_top_news th {
	width: auto;
}
table.table_top_news td {
	line-height: 130%;
}
}

.tag_news {
	display: inline-block;
	margin: 0 8px;
	font-size: 80%;
	width: 7.5em;
	text-align: center;
	line-height: 100%;
}
.tag_news a {
	display: block;
	padding: 4px 0;
	background-color: #CCC;
	color: #FFF;
	text-decoration: none;
}
#tag_news a {
	background-color: #3B5FF7;
}
#tag_press a {
	background-color: #4FBA70;
}
#tag_media a {
	background-color: #F00;
}

.tag_news a:hover {
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}



/*** 会社概要 ***/


.top_cpmpany_box {
	position: relative;
	display: inline-block;
	list-style: none;
	vertical-align: top;
	margin: 0;
	width: 100%;
	height: 0;
	padding: 0;
	padding-bottom: 100%;
	background-color: #CCC;
	overflow: hidden;
}
.top_cpmpany_box img {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	width: 100%;
}
.top_cpmpany_box h5 {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	text-align: center;
	margin: 0;
	color: #000;
	font-weight: bold;
}
.top_cpmpany_box a h5 {
	display: block;
	width: 75%;
	padding: 32% 0;
	background-color: rgba(255,255,255,0.7);
	color: #000;
}

.top_cpmpany_box a:hover h5 {
	width: 100%;
	padding: 50% 0;
	background-color: rgba(255,255,255,0.9);
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	transition: all 0.7s;
}


/*-------------------------------------------
about02
-------------------------------------------*/
.about02 {
display: block;
margin: 0 auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 5%;
}
@media screen and (max-width: 1080px) {
.about02 {
display: block;
margin: 0 auto;
  margin-left: 0;
  margin-right: 0;
  padding: 0 8px;
}
}

.about02 .flex {
  display: flex;
  align-items: center;
}
.about02 .flex .img {
  width: 50%;
}
.about02 .flex .img img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}
@media screen and (max-width: 1366px) {
.about02 .flex .img img {
width: 100%;
  height: 50%;
}
}
@media screen and (max-width: 1080px) {
.about02 .flex .img img {
width: 100%;
  height: 100%;
}
}
.about02 .flex .text {
  width: 50%;
  background-color: #fff;
  padding: 3% 3% 3% 3%;
  margin-left: 0;
  border: 1px solid #CCC;
}

.about02 .text .description {
  line-height: 1.8;
  margin-bottom: 40px;
}
/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 640px) {
  /*-------------------------------------------
  about02
  -------------------------------------------*/
.about02 {
  padding: 0 0;
}
  .about02 .flex {
    flex-direction: column;
  }
  .about02 .flex .img {
    width: 100%;
  }
  .about02 .flex .img img {
    height: 300px;
  }
  .about02 .flex .text {
    width: 100%;
    padding: 20px 20px;
  }
  .about02 .flex .text .title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .about02 .flex .text .description {
    margin-bottom: 20px;
  }
}


.midashi_back {
display: block;
margin: 0 auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@media only screen and (max-width: 768px) {
.midashi_back {
  padding-left: 16px;
  padding-right: 16px;
}
}



.top_midashi_service {
max-width: 92%;
}

.top_midashi {
max-width: 50%;
}
.top_midashi.companytitle {
max-width: 130%;
margin: 0 auto;
}
@media screen and (max-width: 640px) {
.top_midashi_service {
max-width: 60%;
}
.top_midashi,
.top_midashi.companytitle {
max-width: 100%;
}
}






.grid_top_servicetitle {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.grid_top_servicetitle_l {
    grid-column: span 4 / span 4;
}

.grid_top_servicetitle_r {
    grid-column: span 8 / span 8;
    grid-column-start: 5;
}

@media screen and (max-width: 640px) {
.grid_top_servicetitle {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
.grid_top_servicetitle_l {
    grid-column: span 12 / span 12;
}

.grid_top_servicetitle_r {
    grid-column: span 12 / span 12;
    grid-column-start: 1;
}

}



.grid_top_service_02 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
	margin-left: 5%;
}
.grid_top_service_box {
    grid-column: span 3 / span 3;
}
.grid_top_service_box.box01 {
    grid-column-start: 2;
}
.grid_top_service_box.box02 {
    grid-column-start: 5;
}
.grid_top_service_box.box03 {
    grid-column-start: 8;
}
.grid_top_service_box.box04 {
    grid-column-start: 2;
    grid-row-start: 2;
}
.grid_top_service_box.box05 {
    grid-column-start: 5;
    grid-row-start: 2;
}
.grid_top_service_box.box06 {
    grid-column-start: 8;
    grid-row-start: 2;
}

.grid_top_service_box .inner {
position: relative;
overflow: hidden;
display: block;
height: 0;
padding-bottom: 50%;
}
.grid_top_service_box .inner img {
position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.grid_top_service_02_title {
	position: absolute;
	z-index: 2;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	margin: 0;
	color: #000;
	font-weight: 400;
	white-space: nowrap;
	font-size: 36px;
}

@media screen and (max-width: 1080px) {
.grid_top_service_02_title {
	font-size: clamp(20px, 3.333vw, 36px);
}
}
@media screen and (max-width: 640px) {
.grid_top_service_02_title {
	font-size: 18px;
}
}
a .grid_top_service_02_title  {
	width: 0;
	padding: 0 0;
	background-color: rgba(255,255,255,0.7);
	color: #000;
}

a:hover .grid_top_service_02_title  {
	display: block;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	padding: 50% 0;
	background-color: rgba(255,255,255,0.9);
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	transition: all 0.7s;
}

.btn_inline {
display: inline-block;
}

.btn_inline a {
display: block;
  border: solid 1px #1f1f1f;
  padding: 4px 16px;
  text-align: center;
  position: relative;
  z-index: 10;
  font-size: 80%;
  line-height: 1.0;
  border-radius: 8px;
}

.btn_inline a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #1f1f1f;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
}
.btn_inline a:hover {
  color: #fff;
  opacity: 1;
}
.btn_inline a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}