/* メインビジュアルの位置 */
.mainvisual_wrapper{
  position: relative;
  width: 100%;
  height: 72rem;
  text-align: right;
  overflow: hidden;
}
/* メインビジュアルの設定 */
.mainvisual{
  width: 68rem;
  height: auto;
  margin: -2rem 8.5em 0 0;
  transform: translateY(8rem) rotate(-56deg);
}
/* キャッチコピーの設定 */
.catchcopy{
  padding: 0 2rem 0.4rem 2rem;
  font-family: "Stick", sans-serif;
  font-size: 3.81rem;
  letter-spacing: 0.001em;
  z-index: 999;
}
/* キャッチコピー上部の位置 */
.catchcopy_top{
  display: inline;
  position: absolute;
  top: 29.3rem;
  left: 5.65rem;
  width: 28rem;
  height: 6.15rem;
  overflow: hidden;
}
/* キャッチコピー下部の位置 */
.catchcopy_bottom{
  display: inline;
  position: absolute;
  top: 35.3rem;
  left: 5.65rem;
  width: 47.7rem;
  height: 6.15rem;
  overflow: hidden;
}
/* キャチコピーの装飾 */
.catchcopy_skin{
  border: solid 0.1rem #212121;
  background-color: #FFFFFF;
  box-shadow: 0.6rem 0.6rem #FFB7CB;
}
/* PCアニメーション表示設定 */
@media screen and (min-width: 699.99px){
  .catchcopy_animation_top{
    padding: 0 105%;
    white-space: nowrap;
    animation: Catchcopy 12s linear infinite;
  }
  .catchcopy_animation_bottom{
    padding: 0 105%;
    white-space: nowrap;
    animation: Catchcopy 12s linear infinite;
  }
  @keyframes Catchcopy {
    0%{
      transform: translateX(0);
    }
    100%{
      transform: translateX(-100%);
    }
  }
}
/* スマホ表示設定 */
@media screen and (max-width: 699.98px){
  .catchcopy_animation{
    padding: 0;
  }
}
/* 最新のお知らせの位置 */
.updatenotice_container{
  position: absolute;
  top: 55.8rem;
  right: 0;
  display: grid;
  grid-template-columns: 12.55rem 51.2rem;
  grid-template-rows: 7rem;
}
/* 最新のお知らせ日付部分 */
.updatenotice_date{
  background-color: white;
  grid-column: 1;
  grid-row: 1;
  border-top: solid 0.1rem #212121;
  border-left: solid 0.1rem #212121;
  border-bottom: solid 0.1rem #212121;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  padding: 2.3rem 0 2.3rem 2rem;
  border-radius: 1rem 0 0 1rem ;
}
/* 最新のお知らせ項目箇所 */
.updatenotice_contents{
  background-color: white;
  grid-column: 2/3;
  grid-row: 1;
  border-top: solid 0.1rem #212121;
  border-left: solid 0.1rem #212121;
  border-bottom: solid 0.1rem #212121;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  align-items: center;
  padding: 2.3rem 0 2.3rem 2rem;
}
/* ABOUTセクション */
.about_container{
  border-top: solid 0.1rem #B1B1B1;
  border-left: solid 0.1rem #212121;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 18.1rem 8.9rem 21.3rem 8rem 29.7rem;
}
/* ABOUTセクション見出し */
.about_title_box{
  grid-column: 1;
  grid-row: 1;
}
.about_title{
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 10rem;
  margin: 1.6rem 0 0 8.1rem;
}
/* サブ見出し */
.about_subtitle_box{
  grid-column: 1/2;
  grid-row: 2/3;
}
.about_subtitle{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 2rem;
  margin: 3rem 0 0 8rem;
}
/* 会社の理念 */
.about_contents_box{
  grid-column: 2/3;
  grid-row: 1/4;
}
.about_contents{
  font-family: "Noto Sans JP",sans-serif;
  font-weight: 500;
  font-size: 2.2rem;
  margin: 13.4rem 5rem 0rem 6rem;
}
.about_contents h5{
  font-weight: 500;
  font-size: 2.2rem;
  margin-bottom: 4rem;
}
/* 装飾画像 */
.about_visual_box{
  grid-column: 1/2;
  grid-row: 3/6;
  position: relative;
}
.about_largevisual_wrapper{
  width: 39.9rem;
  height: 25.7rem;
}
.about_smallvisual_wrapper{
  width: 19.9rem;
  height: 19.595rem;
}
.about_rawstone_wrapper{
  width: 27.249rem;
  height: 20.498rem;
  object-fit: cover;
}
/* 装飾画像共通設定 */
.about_visual_block{
  display: flex;
  justify-content: space-between;
  padding: 0 4.4rem 0 2.3rem;
  margin: 4.4rem 0 0 0;
}
/* 上部の装飾画像設定 */
.about_visual_topblock{
  margin: 4.8rem 0 0 0;
  padding: 0 4.4rem 0.5rem 2.8rem;
}
/* 「会社概要へ」箇所 */
.about_link_box{
  grid-column: 2/3;
  grid-row: 4/5;
}
.about_link{
  display: flex;
  justify-content: space-between;
  font-family: "Noto Sans JP",sans-serif;
  font-weight: 500;
  font-size: 2rem;
  margin: 2.7rem 0 2.4rem 6rem; 
}
.about_link p{
  margin-right: 35rem;
}
.about_link svg{
  margin-top: -0.5rem;
  margin-left: 0.5rem;
}
/* ABOUTセクション空欄 */
.about_bottombox{
  grid-column: 2/3;
  grid-row: 5/6;
  border-bottom: solid 0.1rem #212121;
}
/* ABOUTセクション罫線 */
.about_skin{
  border-right: solid 0.1rem #212121;
  border-bottom: solid 0.1rem #212121;
}
.about_skin_right{
  border-bottom: solid 0.1rem #212121;
}
/* SERVICEセクション */
.service_wrapper{
  list-style-type: none;
  /* カウンター初期化 */
  counter-reset: service;
}
.service_container{
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse:collapse;
}
/* SERVICE見出し */
.service_title{
  font-family: "Noto Sans JP",sans-serif;
  font-size: 3rem;
  padding: 2.2rem 0 2.2rem 4.8rem;
  border-bottom: solid 0.1rem #212121;
}
/* SERVICE左部分 */
.service_subtitle_box{
  display: table-cell;
  border-right: solid 0.1rem #212121;
  border-bottom: solid 0.1rem #212121;
  padding: 5rem 0 0 0;
}
.service_subtitle_box::before{
  /* カウンター装飾 */
  counter-increment: service;
  content: counter(service,decimal-leading-zero);
  font-family: "Train One",sans-serif;
  font-size: 6rem;
  color: #024391;
  padding: 0.5rem 0 0 4.8rem;
}
.service_subtitle_box h4{
  font-family: "Noto Sans JP",sans-serif;
  font-size: 2rem;
  font-weight: 500;
  color: #024391;
  margin: 5.1rem 0 0 13.8rem;
}
.service_subtitle_box h5{
  font-family: "Noto Sans JP",sans-serif;
  font-size: 2.8rem;
  color:#212121;
  font-weight: 500;
  margin: 1rem 0 15.7rem 13.8rem;
  line-height:1.45em;
}
/* SERVICE右部分 */
.service_contents_box{
  display: table-cell;
  border-bottom: solid 0.1rem #212121;
  padding: 0;
}
.service_visual_wrapper{
  position: relative;
  top: -7rem;
  left: 0;
  margin: 0 auto;
  width: 49.2rem;
  height: 31.69rem;
  background-color: #212121;
}
/* SERVICE装飾画像設定 */
.service_visual{
  width: 100%;
  height: 100%;
  border: solid 0.1rem #212121;
  object-fit: cover;
}
/* 画像の角落とし */
/* SERVICEの装飾画像の角落とし */
.visual_corner{
  position: relative;
 }
.visual_corner::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:
      linear-gradient(45deg, #212121, 4rem, transparent 0),
      linear-gradient(-45deg, #212121, 4rem, transparent 0),
      linear-gradient(135deg, #212121, 4rem, transparent 0),
      linear-gradient(-135deg, #212121, 4rem, transparent 0);
    z-index: 1;
}
.visual_corner::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:
      linear-gradient(45deg, #F6F5F3 3.95rem, transparent 0),
      linear-gradient(-45deg, #F6F5F3 3.95rem, transparent 0),
      linear-gradient(135deg, #F6F5F3 3.95rem, transparent 0),
      linear-gradient(-135deg, #F6F5F3 3.95rem, transparent 0);
    z-index: 2;
}
/* ABOUTの右下画像の角落とし */
.visual_corner_small{
  position: relative;
 }
.visual_corner_small::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:
      linear-gradient(45deg, #212121, 2rem, transparent 0),
      linear-gradient(-45deg, #212121, 2rem, transparent 0),
      linear-gradient(135deg, #212121, 2rem, transparent 0),
      linear-gradient(-135deg, #212121, 2rem, transparent 0);
    z-index: 1;
}
.visual_corner_small::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:
      linear-gradient(45deg, #F6F5F3 1.95rem, transparent 0),
      linear-gradient(-45deg, #F6F5F3 1.95rem, transparent 0),
      linear-gradient(135deg, #F6F5F3 1.95rem, transparent 0),
      linear-gradient(-135deg, #F6F5F3 1.95rem, transparent 0);
    z-index: 2;
}
.visual_corner_middle{
  position: relative;
 }
 /* ABOUTの上の画像の角落とし */
.visual_corner_middle::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:
      linear-gradient(45deg, #212121, 3rem, transparent 0),
      linear-gradient(-45deg, #212121, 3rem, transparent 0),
      linear-gradient(135deg, #212121, 3rem, transparent 0),
      linear-gradient(-135deg, #212121, 3rem, transparent 0);
    z-index: 1;
}
.visual_corner_middle::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:
      linear-gradient(45deg, #F6F5F3 2.95rem, transparent 0),
      linear-gradient(-45deg, #F6F5F3 2.95rem, transparent 0),
      linear-gradient(135deg, #F6F5F3 2.95rem, transparent 0),
      linear-gradient(-135deg, #F6F5F3 2.95rem, transparent 0);
    z-index: 2;
}
/* 「詳しくみる」箇所 */
.service_link{
  margin-top: -3rem;
  width: 100%;
  height: 8rem;
  font-family: "Noto Sans JP",sans-serif;
  font-size: 2rem;
  font-weight: 500;
  color: #212121;
  padding: 2.6rem 5rem 2.5rem 6.1rem;
}
/* 「詳しくみる」罫線 */
.service_link_skin{
  border-top: solid 0.1rem #212121;
}
/* 「詳しくみる」矢印 */
.service_link_skin svg{
  margin-top: -0.5rem;
}
/* Newsセクション設定 */
.news_container{
  display: grid;
  width: 100%;
  grid-template-columns: 8rem 1fr;
  grid-template-rows: 8rem 56rem 8rem;
}
/* Newsセクション見出し */
.news_title{
  writing-mode: vertical-rl;
  font-size: 2.5rem;
  grid-column: 1;
  grid-row: 1/4;
  padding: 5rem 2rem 1rem 1rem;
}
.news_title_skin{
  border-right: solid 0.1rem #212121;
}
/* 横スクロールの左右矢印位置設定 */
.news_arrows{
  grid-column: 2/3;
  grid-row: 1/2;
  display: flex;
  justify-content: flex-end;
  margin-bottom: -1rem;
  padding: 5.3rem 4.8rem 0 0;
}
/* 左矢印 */
.news_arrows_left{
  transform: scale(-1,1);
  margin: 0 2.5rem 0 0;
}
/* 右矢印 */
.news_arrows_right{
  margin: 0;
}
/* 横スクロール部分 */
.news_contents_wrapper{
  grid-column: 2/3;
  grid-row: 2/3;
  overflow: hidden;
  padding-right: 5rem;
}
.swiper-wrapper{
  display: flex;
  width: fit-content;
  margin: 4.3rem 5rem 4.3rem 5rem;
}
/* 横スクロール内コンテンツ設定 */
.news_contents_box{
  width: 40rem;
  height: 45rem;
  background-color: #F7F6F2;
  border: solid 0.1rem #212121;
  position: relative;
}
/* コンテンツ画像 */
.news_contents_visual{
  width: 100%;
  height: 22.6rem;
  object-fit: cover;
  border-bottom: solid 0.1rem #212121;
}
/* コンテンツテキスト */
.news_contents_text{
  height: 22.4rem;
  font-family: "Noto Sans JP",sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
}
.news_contents_text h2{
  font-size: 1.5rem;
}
/* コンテンツ内カテゴリと日付の位置 */
.news_contents_top{
  display: flex;
  justify-content: space-between;
  padding: 2rem 2rem 0 2rem;
}
/* コンテンツ内テキスト */
/* 三行で省略される */
.news_contents_center{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  margin: 0 2rem;
}
/* コンテンツ内タグ設定 */
.news_tag_list{
  display: flex;
  list-style-type: none;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.4rem;
  left: 2rem;
}
/* コンテンツ背景色 */
.news_contents_skin{
  color: #B1B1B1;
}
/* 「一覧をみる」箇所 */
.news_list_link{
  grid-column: 2/3;
  grid-row: 3/4;
  font-family: "Noto Sans JP",sans-serif;
  font-size: 2rem;
  font-weight: 500;
  color: #212121;
}
.news_link_skin{
  padding: 2.6rem 5rem 1.8rem 6.1rem;
  border-top: solid 0.1rem #212121;
}
.news_link_skin svg{
  margin-top: -0.15rem;
  margin-right: -0.2rem;
}
/* リンク箇所共通設定 */
.link_block{
  display: flex;
  justify-content: space-between;
}
/* リンクホバー設定 */
.link_block:hover{
  background-color: #406FA8;
  color: #FFFFFF;
}
.link_block:hover .a {
  fill: #fff;
}
/* リンク内矢印設定 */
.link_block svg {
  width: 3.6rem;
  height: 3.6rem;
}
/* 以下スマホ表示設定 */
@media screen and (max-width: 699.98px){
  /* メインビジュアルの位置 */
  .mainvisual_wrapper{
    height: 65.5rem;
  }
  /* メインビジュアルの設定 */
  .mainvisual{
    width: 32rem;
    height: auto;
    margin: 15rem 0 0 0;
  }
  /* キャッチコピーの設定 */
  .catchcopy{
    padding: 0 0 0 1.1rem;
    font-size: 2.2rem;
  }
  /* キャッチコピー上部の位置 */
  .catchcopy_top{
    top: 14rem;
    left: 1.4rem;
    width: 16rem;
    height: 3.5rem;
  }
  /* キャッチコピー下部の位置 */
  .catchcopy_bottom{
    top: 17.5rem;
    left: 1.4rem;
    width: 27.3rem;
    height: 3.5rem;
  }
  /* 最新のお知らせの位置 */
  .updatenotice_container{
    top: 56.1rem;
    grid-template-columns: 9.4rem 25.1rem;
    grid-template-rows: 4.8rem;
  }
  /* 最新のお知らせ日付部分 */
  .updatenotice_date{
    font-size: 1.2rem;
    padding: 1.6rem 0 1.5rem 1.5rem;
  }
  /* 最新のお知らせ項目箇所 */
  .updatenotice_contents{
    font-size: 1.2rem;
    padding: 1.6rem 0 1.5rem 1.5rem;
  }
  /* ABOUTセクション */
  .about_container{
    border-left: unset;
    display: block;
  }
  .about_title{
    font-size: 4.8rem;
    margin: 0 0 0 1.5rem;
    padding: 1rem 0 0.6rem 0;
  }
  /* サブ見出し */
  .about_subtitle_box{
    width: 100%;
    height: 4.3rem;
  }
  .about_subtitle{
    font-size: 1.4rem;
    margin: 0;
    padding: 1rem 0 0 1.5rem;
  }
  .about_contents{
    font-size: 1.4rem;
    margin: 4rem 3rem 7.3rem 3.5rem;
  }
  .about_contents h5{
    font-size: 1.4rem;
    margin-bottom: 3.6rem;
  }
  .about_largevisual_wrapper{
    width: 27.803rem;
    height: 17.908rem;
  }
  .about_smallvisual_wrapper{
    width: 15.664rem;
    height: 15.424rem;
  }
  .about_rawstone_wrapper{
    width: 13.179rem;
    height: 9.914rem;
  }
  /* 装飾画像共通設定 */
  .about_visual_block{
    margin: 3.5rem 0;
    padding: 0.9rem 3rem 0 2rem;
  }
  /* 原石の画像の設定 */
  .about_rawstone_block{
    margin-top: 0.5rem;
    margin-left: 0.3rem;
  }
  /* 上部の装飾画像設定 */
  .about_visual_topblock{
    padding: 0 0 0 1.5rem;
  }
  /* 「会社概要へ」箇所 */
  .about_link_box{
    width: 100%;
  }
  .about_link{
    font-size: 1.4rem;
    margin: 0.8rem 0 0.8rem 3.5rem;
  }
  .about_link p{
    margin:0.5rem 19.142rem 0.5rem 0;
  }
  .about_link svg{
    margin-top: 0.5rem;
  }
  /* ABOUTセクション空欄 */
  .about_bottombox{
    border-bottom: unset;
  }
  /* ABOUTセクション罫線 */
  .about_skin{
    border-right: unset;
  }
  .service_container{
    display: block;
  }
  /* SERVICE見出し */
  .service_title{
    padding: 0.8rem 0 0.6rem 1.5rem;
  }
  /* SERVICE左部分 */
  .service_subtitle_box{
    display: block;
    border-right: unset;
    padding: 3.5rem 0 0 0;
  }
  .service_subtitle_box::before{
    font-size: 4rem;
    padding: 0 30.5rem 2.2rem 1.5rem;
  }
  .service_subtitle_box h4{
    font-size: 1.4rem;
    margin: 2.2rem 0 0.8rem 1.5rem;
  }
  .service_subtitle_box h5{
    font-size: 2rem;
    margin:0 0 3.3rem 1.5rem;
  }
  /* SERVICE右部分 */
  .service_contents_box{
    display: block;
    padding: 2.5rem 0 0 0;
    border-right: unset;
  }
  .service_visual_wrapper{
    top: 0;
    margin: 0 auto;
    width: 34.5rem;
    height: 22.222rem;
  }
  /* SERVICEの装飾画像の角落とし */
  .visual_corner::after{
    background:
      linear-gradient(45deg, #212121, 2rem, transparent 0),
      linear-gradient(-45deg, #212121, 2rem, transparent 0),
      linear-gradient(135deg, #212121, 2rem, transparent 0),
      linear-gradient(-135deg, #212121, 2rem, transparent 0);
  }
  .visual_corner::before{
    background:
      linear-gradient(45deg, #F6F5F3 1.95rem, transparent 0),
      linear-gradient(-45deg, #F6F5F3 1.95rem, transparent 0),
      linear-gradient(135deg, #F6F5F3 1.95rem, transparent 0),
      linear-gradient(-135deg, #F6F5F3 1.95rem, transparent 0);
  }
  /* ABOUTの上の画像の角落とし */
  .visual_corner_middle::after{
   background:
     linear-gradient(45deg, #212121, 2rem, transparent 0),
     linear-gradient(-45deg, #212121, 2rem, transparent 0),
     linear-gradient(135deg, #212121, 2rem, transparent 0),
     linear-gradient(-135deg, #212121, 2rem, transparent 0);
  }
  .visual_corner_middle::before{
    background:
      linear-gradient(45deg, #F6F5F3, 1.95rem, transparent 0),
      linear-gradient(-45deg, #F6F5F3, 1.95rem, transparent 0),
      linear-gradient(135deg, #F6F5F3, 1.95rem, transparent 0),
      linear-gradient(-135deg, #F6F5F3, 1.95rem, transparent 0);
  }
  /* 「詳しくみる」箇所 */
  .service_link{
    height: unset;
    font-size: 1.4rem;
    margin: 3.578rem 0 0 0;
    padding: 1.4rem 2.93rem 1.1rem 3.6rem;
  }
  /* 「詳しくみる」矢印 */
  .service_link_skin svg{
    margin-top: unset;
  }
  /* Newsセクション設定 */
  .news_container{
    display: block;
    position: relative;
  }
  /* Newsセクション見出し */
  .news_title{
    writing-mode: unset;
    padding: 0.8rem 0 0.8rem 1.5rem;
  }
  .news_title_skin{
    border-right: unset;
    border-bottom: solid 0.1rem #212121;
  }
  /* 横スクロールの左右矢印位置設定 */
  .news_arrows{
    position: absolute;
    top: 37.5rem;
    left: 5.5rem;
    margin: 8.5rem;
  }
  /* 右矢印 */
  .news_arrows_right{
    margin-right: 0.5rem;
  }
  /* 横スクロール部分 */
  .news_contents_wrapper{
    margin-bottom: 5.8rem;
    padding-right: unset;
  }
  .swiper-wrapper{
    margin: 3.7rem 1.5rem;
  }
  /* 横スクロール内コンテンツ設定 */
  .news_contents_box{
    width: 34.5rem;
    height: 38.8rem;
  }
  /* コンテンツ画像 */
  .news_contents_visual{
    height: 19.5rem;
  }
  /* コンテンツテキスト */
  .news_contents_text{
    height: 19.3rem;
    font-size: 1rem;
  }
  /* コンテンツ内カテゴリと日付の位置 */
  .news_contents_top{
    padding: 1.5rem 2rem 0.2rem 1.7rem;
  }
  /* コンテンツ内テキスト */
  .news_contents_center{
    margin: 0 1.7rem;
  }
  /* コンテンツ内タグ設定 */
  .news_tag_list{
    bottom: 1.2rem;
    left: 1.7rem;
  }
  .news_list_link{
    font-size: 1.4rem;
  }
  .news_link_skin{
    padding: 1.4rem 2.93rem 1.3rem 3.6rem;
  }
  .news_link_skin svg{
    margin-top: unset;
    margin-right: unset;
  }
  /* リンク内矢印設定 */
  .link_block svg{
    width: 2.1rem;
    height: 2.1rem;
  }
}