@charset "UTF-8";
/*==========================================
変数 inc.scss
===========================================*/
/*==========================================
変数 fonts.scss
===========================================*/
/*===================================
userSS 追加
=====================================*/
/*==========================================
 共通
===========================================*/
.wbr_txt {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.sec-ttlR {
  text-align: center;
  font-family: "Yu Mincho", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  letter-spacing: 0.1em;
  font-size: clamp(1.8rem, 2vw, 2rem);
}
.sec-ttlR.ttlMB {
  margin-bottom: clamp(30px, 6vw, 60px);
}

.sec-subttlR {
  font-family: "Yu Mincho", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  font-size: clamp(1.6rem, 3vw, 3.6rem);
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .sec-subttlR {
    letter-spacing: normal;
    line-height: 1.75;
  }
}

.basic-txtR {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .basic-txtR {
    line-height: 1.75;
  }
}
@media screen and (min-width: 961px) {
  .basic-txtR.taC_pc {
    text-align: center;
  }
}
.basic-txtR p:not(:last-child) {
  margin-bottom: 1.5em;
}

.secC_MB {
  margin-bottom: clamp(80px, 15vw, 150px);
}

/*==========================================
 COMPANY HEAD (LEAD)
===========================================*/
.company-head {
  min-height: calc(100vh - clamp(70px, 14vw, 140px));
  padding: clamp(30px, 6vw, 60px) 0 40px;
}
.company-head .lead-ctsBlock {
  margin-top: clamp(60px, 8vw, 80px);
}
.company-head .lead-ctsBlock .lead-ttl {
  text-align: center;
  font-family: "Yu Mincho", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  letter-spacing: 0.1em;
  font-size: clamp(2.4rem, 4vw, 4.8rem);
}
.company-head .lead-ctsBlock .lead-subttl {
  text-align: center;
  font-size: clamp(1.8rem, 2.1vw, 2.1rem);
  margin: clamp(40px, 8vw, 80px) auto clamp(20px, 4vw, 40px);
}

/*==========================================
 代表メッセージ
===========================================*/
@keyframes shake-up {
  0%, 100% {
    transform: translateY(0) rotate(-45deg);
  }
  50% {
    transform: translateY(15px) rotate(-45deg);
  }
}
.sec-message .wrapW {
  position: relative;
  padding-top: clamp(40px, 8vw, 80px);
}
.sec-message .messageDeco li {
  position: absolute;
  background: #FF4E00;
  aspect-ratio: 1/1;
  transform: rotate(-45deg);
}
.sec-message .deco01 li:nth-of-type(n + 3) {
  background: #1D2B54;
}
.sec-message .deco01 li:nth-of-type(1) {
  animation: shake-up 3s infinite ease-in-out;
  width: clamp(60px, 15vw, 236px);
  left: 0;
  top: 0;
}
.sec-message .deco01 li:nth-of-type(2) {
  animation: shake-up 5s infinite ease-in-out;
  width: clamp(20px, 5vw, 69px);
  left: min(18vw, 290px);
  top: min(16vw, 170px);
}
.sec-message .deco01 li:nth-of-type(3) {
  animation: shake-up 3s infinite ease-in-out;
  width: clamp(60px, 15vw, 236px);
  right: 0;
  top: min(22vw, 380px);
}
.sec-message .deco01 li:nth-of-type(4) {
  animation: shake-up 5s infinite ease-in-out;
  width: clamp(20px, 5vw, 69px);
  top: min(37vw, 590px);
  right: min(15vw, 260px);
}
.sec-message .deco02 {
  position: absolute;
  width: clamp(70px, 20vw, 225px);
  aspect-ratio: 225/257;
  left: 0;
  top: 15%;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .sec-message .deco02 {
    top: calc(0px - clamp(40px, 26vw, 260px));
  }
}
.sec-message .deco02 li:nth-of-type(n + 3) {
  background: #1D2B54;
}
.sec-message .deco02 li:nth-of-type(1) {
  animation: shake-up 3s infinite ease-in-out;
  width: clamp(30px, 7vw, 93px);
  left: 0;
  top: 0;
}
.sec-message .deco02 li:nth-of-type(2) {
  animation: shake-up 5s infinite ease-in-out;
  width: clamp(15px, 4vw, 50px);
  right: 21%;
  top: 58%;
}
.sec-message .deco02 li:nth-of-type(3) {
  animation: shake-up 3.5s infinite ease-in-out;
  width: clamp(20px, 5vw, 69px);
  top: 15%;
  right: 0;
}
.sec-message .deco02 li:nth-of-type(4) {
  animation: shake-up 4s infinite ease-in-out;
  width: clamp(10px, 3.5vw, 40px);
  bottom: 0;
  left: 5%;
}
.sec-message .deco03 {
  position: absolute;
  width: clamp(40px, 20vw, 216px);
  aspect-ratio: 216/247;
  top: 15%;
  right: 0;
  z-index: -1;
}
@media screen and (max-width: 960px) {
  .sec-message .deco03 {
    top: auto;
    bottom: 0;
  }
}
.sec-message .deco03 li:nth-of-type(n + 3) {
  background: #1D2B54;
}
.sec-message .deco03 li:nth-of-type(1) {
  animation: shake-up 3s infinite ease-in-out;
  width: clamp(30px, 7vw, 93px);
  left: 0;
  top: 0;
}
.sec-message .deco03 li:nth-of-type(2) {
  animation: shake-up 5s infinite ease-in-out;
  width: clamp(15px, 4vw, 50px);
  right: 0;
  bottom: 20%;
}
.sec-message .deco03 li:nth-of-type(3) {
  animation: shake-up 4s infinite ease-in-out;
  width: clamp(10px, 3.5vw, 40px);
  bottom: 0;
  left: 40%;
}
.sec-message .message-inner {
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.sec-message .sec-ttlR {
  text-align: left;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  left: 0;
  top: clamp(30px, 10vw, 100px);
}
@media screen and (min-width: 961px) {
  .sec-message .sec-ttlR {
    left: calc(50% - 320px);
    top: clamp(30px, 10vw, 100px);
  }
}
.sec-message .message-img {
  max-width: 597px;
  width: 70%;
  margin: 0 0 calc(0px - clamp(20px, 8vw, 80px)) auto;
  position: relative;
  z-index: -1;
}
.sec-message .message-ttlEn {
  font-family: "Bodoni Moda", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight: 800;
  font-size: clamp(6.7rem, 12.1875vw, 23.4rem);
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (max-width: 960px) {
  .sec-message .message-ttlEn {
    font-size: clamp(6.7rem, 12.1875vw, 23.4rem);
  }
}
.sec-message .message-ttlEn span {
  transition: 0.3s ease-in-out;
  opacity: 0;
  display: inline-block;
}
.sec-message .message-ttlEn.show span {
  animation: spinText 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 1;
}
.sec-message .message-ttlEn.show span:nth-of-type(2) {
  transition-delay: 0.2s;
}
.sec-message .message-ttlEn.show span:nth-of-type(3) {
  transition-delay: 0.4s;
}
.sec-message .message-ttlEn.show span:nth-of-type(4) {
  transition-delay: 0.6s;
}
.sec-message .message-ttlEn.show span:nth-of-type(5) {
  transition-delay: 0.8s;
}
.sec-message .message-ttlEn.show span:nth-of-type(6) {
  transition-delay: 1s;
}
.sec-message .message-ttlEn.show span:nth-of-type(7) {
  transition-delay: 1.2s;
}
.sec-message .sec-subttlR {
  margin: 1em auto 1.5em;
}
@media screen and (max-width: 960px) {
  .sec-message .sec-subttlR {
    margin: 3em auto 2em;
  }
}
.sec-message .message-txtBlock {
  position: relative;
}

@keyframes spinText {
  0% {
    transform: rotateY(-90deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0);
    opacity: 1;
  }
}
/*==========================================
 経営理念
===========================================*/
.sec-philosophy {
  position: relative;
  padding: clamp(40px, 6vw, 60px) 0;
}
.sec-philosophy::before, .sec-philosophy::after {
  content: "";
  width: 27%;
  height: 80%;
  background: #E5E5E5;
  display: block;
  position: absolute;
  z-index: -1;
}
.sec-philosophy::before {
  top: 0;
  left: 0;
}
.sec-philosophy::after {
  right: 0;
  bottom: 0;
}
.sec-philosophy .philosophy-ctsBlock {
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  padding: clamp(40px, 8vw, 80px) 2% 0;
}
.sec-philosophy .philosophy-txtBox {
  margin: clamp(30px, 6vw, 60px) auto 0;
}
@media screen and (min-width: 961px) {
  .sec-philosophy .philosophy-txtBox {
    display: flex;
    justify-content: space-between;
  }
}
@media screen and (min-width: 961px) {
  .sec-philosophy .philosophy-txtBox .box-item {
    width: 48%;
  }
}
@media screen and (max-width: 960px) {
  .sec-philosophy .philosophy-txtBox .box-item:not(:last-child) {
    margin-bottom: 40px;
  }
}
.sec-philosophy .philosophy-txtBox .box-item .item-ttl {
  font-weight: bold;
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  letter-spacing: 0.1em;
  line-height: 2;
  text-align: center;
  margin-bottom: 2em;
}
@media screen and (min-width: 961px) {
  .sec-philosophy .philosophy-txtBox .box-item .item-ttl {
    font-size: clamp(1.4rem, 1.4vw, 1.8rem);
    min-height: 6em;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
}
@media screen and (max-width: 767px) {
  .sec-philosophy .philosophy-txtBox .box-item .item-ttl {
    line-height: 1.75;
  }
}

/*==========================================
 社訓
===========================================*/
.sec-motto .motto-list {
  display: flex;
  justify-content: space-between;
  margin: 0 auto clamp(40px, 6vw, 60px);
}
.sec-motto .motto-list .motto-item {
  text-align: center;
  padding: 0 5px;
  font-size: clamp(1.6rem, 2vw, 2.8rem);
  font-family: "Yu Mincho", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
}
.sec-motto .motto-list .motto-item .item-bar {
  width: 1px;
  height: clamp(25px, 5vw, 58px);
  background: #000;
  margin: 1em auto 0.5em;
}
.sec-motto .motto-list .motto-item .item-ttl {
  margin: 0 auto;
  letter-spacing: 0.1em;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

/*==========================================
 社是
===========================================*/
.sec-creed .sec-subttlR {
  margin-bottom: clamp(40px, 8vw, 80px);
}

/*==========================================
 会社概要
===========================================*/
.sec-overview {
  background: #1D2223;
  color: #fff;
  padding: clamp(60px, 15vw, 150px) 0;
}
.sec-overview .overview-list {
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.sec-overview .overview-list .overview-item {
  border-bottom: 1px solid #fff;
  padding: 1.5em 0;
}
@media screen and (min-width: 577px) {
  .sec-overview .overview-list .overview-item {
    display: flex;
    justify-content: space-between;
  }
}
.sec-overview .overview-list .overview-item dt {
  font-weight: bold;
}
@media screen and (min-width: 577px) {
  .sec-overview .overview-list .overview-item dt {
    min-width: 16em;
  }
}
@media screen and (max-width: 767px) {
  .sec-overview .overview-list .overview-item dt {
    min-width: 10em;
  }
}
.sec-overview .overview-list .overview-item dd {
  width: 100%;
}
.sec-overview .overview-list .overview-item .item-addRow {
  max-width: 630px;
  width: 100%;
  position: relative;
}
@media screen and (min-width: 577px) {
  .sec-overview .overview-list .overview-item .item-addRow {
    display: flex;
    justify-content: space-between;
  }
}
.sec-overview .overview-list .overview-item .item-addRow .add {
  width: 100%;
  display: block;
}
@media screen and (min-width: 577px) {
  .sec-overview .overview-list .overview-item .item-addRow .add {
    padding: 0 7em 0 0;
  }
}
.sec-overview .overview-list .overview-item .item-addRow .map {
  max-width: 6em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  background: #FF4E00;
  font-family: "Bodoni Moda", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight: 800;
  padding: 0.4em 0.6em;
  color: #000;
  text-align: center;
  border-radius: 5px;
  margin-top: 10px;
  position: relative;
}
.sec-overview .overview-list .overview-item .item-addRow .map::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: clamp(15px, 2.5vw, 25px);
  aspect-ratio: 25/32;
  background: url("../img/company/icon-map.svg") no-repeat center/contain;
}
@media (hover: hover) {
  .sec-overview .overview-list .overview-item .item-addRow .map:hover {
    background: #fff;
  }
}
@media screen and (min-width: 577px) {
  .sec-overview .overview-list .overview-item .item-addRow .map {
    min-width: 6em;
    position: absolute;
    padding: 0.5em 0.6em;
    margin-top: 0;
    top: -0.5em;
    right: 0;
  }
  .sec-overview .overview-list .overview-item .item-addRow .map::before {
    width: clamp(10px, 1.6vw, 16px);
  }
}
.sec-overview .overview-list .overview-item .item-addRow .map_link {
  text-decoration: underline;
  font-weight: bold;
}
@media (hover: hover) {
  .sec-overview .overview-list .overview-item .item-addRow .map_link:hover {
    text-decoration: none;
  }
}

/*==========================================
 沿革
===========================================*/
@media screen and (min-width: 961px) {
  .sec-history {
    height: calc(100vh - clamp(50px, 8vw, 85px));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .sec-history .wrapW {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .sec-history .sec-ttlR {
    flex-shrink: 0;
  }
}
.sec-history .history-blockWrap {
  display: none;
}
@media screen and (min-width: 961px) {
  .sec-history .history-blockWrap {
    display: flex;
    position: relative;
    flex: 1;
    min-height: 0;
    align-items: center;
  }
}
.sec-history .history-blockWrap::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #000;
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: -1;
}
.sec-history .history-blockPC {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  padding: 0 0 20px;
  position: relative;
}
.sec-history .history-blockPC::-webkit-scrollbar {
  width: 395px; /* スクロールバーの幅 */
  height: 34px; /* スクロールバーの高さ */
  background: transparent;
}
.sec-history .history-blockPC::-webkit-scrollbar-track {
  background: transparent; /* スクロールバーの背景色 */
  border-radius: 0; /* 角丸にする */
}
.sec-history .history-blockPC::-webkit-scrollbar-thumb {
  background: #FF4E00; /* スクロールバーの操作部分の背景色 */
  border-radius: 0; /* 角丸にする */
}
.sec-history .history-listPC {
  width: auto;
  height: 100%;
  aspect-ratio: 5500/987;
  position: relative;
}
.sec-history .history-listPC .history-item {
  position: absolute;
  transform: rotateY(-90deg);
}
.sec-history .history-listPC .history-item.show {
  transform: rotateY(0);
}
.sec-history .history-listPC .history-item img {
  width: 100%;
  height: auto;
  display: block;
}
.sec-history .history-listPC .history-item.item_1982 {
  left: 0;
  top: 0;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_1993 {
  left: 1.4545454545%;
  top: 33.3333333333%;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2004 {
  left: 3.0909090909%;
  width: 8.0545454545%;
  bottom: 0;
}
.sec-history .history-listPC .history-item.item_2010 {
  left: 8.0363636364%;
  width: 8.0545454545%;
  top: 0;
}
.sec-history .history-listPC .history-item.item_2014 {
  left: 9.4909090909%;
  top: 33.3333333333%;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2015 {
  left: 11.1272727273%;
  width: 16.1090909091%;
  bottom: 0;
}
.sec-history .history-listPC .history-item.item_2016 {
  left: 16.0727272727%;
  top: 0;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2018_01_1 {
  left: 17.5272727273%;
  bottom: 0;
  width: 25.8%;
}
.sec-history .history-listPC .history-item.item_2018_01 {
  left: 24.1090909091%;
  top: 0;
  width: 16.1090909091%;
}
.sec-history .history-listPC .history-item.item_2018_12 {
  left: 33.6363636364%;
  top: 33.3333333333%;
  width: 16.1090909091%;
}
.sec-history .history-listPC .history-item.item_2019_01 {
  left: 40.2%;
  top: 0;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2019_07 {
  left: 43.3090909091%;
  bottom: 0;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2020_01 {
  left: 48.2363636364%;
  top: 0;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2020_11 {
  left: 49.7272727273%;
  top: 33.3333333333%;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2020_12 {
  left: 51.3454545455%;
  bottom: 0;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2021_04 {
  left: 56.2727272727%;
  top: 0;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2022 {
  top: 33.3333333333%;
  left: 57.7272727273%;
  width: 16.1090909091%;
}
.sec-history .history-listPC .history-item.item_2024_04 {
  left: 59.4%;
  bottom: 0;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2025_06 {
  left: 64.3272727273%;
  top: 0;
  width: 16.1090909091%;
}
.sec-history .history-listPC .history-item.item_2025_08 {
  left: 73.8363636364%;
  top: 33.3333333333%;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2025_10 {
  left: 67.4454545455%;
  bottom: 0;
  width: 8.0545454545%;
}
.sec-history .history-listPC .history-item.item_2025_11 {
  left: 75.5%;
  bottom: 0;
  width: 16.1090909091%;
}
.sec-history .history-listSP {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
}
.sec-history .history-listSP .history-item {
  border: 1px solid #000;
  padding: clamp(30px, 4vw, 40px) 10px;
}
.sec-history .history-listSP .history-item:nth-of-type(n + 2) {
  margin-top: -1px;
}
.sec-history .history-listSP .history-item .item-ttl {
  font-family: "Bodoni Moda", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-weight: 800;
  font-size: clamp(3.6rem, 10vw, 10rem);
  text-align: center;
}
.sec-history .history-listSP .history-item .item-subttl {
  text-align: center;
  letter-spacing: 0.1em;
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);
}
.sec-history .history-listSP .history-item .item-txt {
  margin-top: 1.3em;
}
.sec-history .history-listSP .history-item .item-notes {
  margin-top: 1em;
  background: #E5E5E5;
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  padding: 1em;
}

/*==========================================
 西宮で家づくりを考える皆さまへ
===========================================*/
.sec-epilogue {
  position: relative;
  height: 100vh;
  min-height: clamp(830px, 100vw, 1190px);
  padding: clamp(80px, 10vw, 200px) 0 0;
  color: #fff;
}
@media screen and (min-width: 961px) {
  .sec-epilogue {
    clip-path: inset(0);
    height: 150vh;
    min-height: auto;
  }
}
.sec-epilogue::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/company/bg-tieveryone.jpg) no-repeat center/cover;
  z-index: -1;
}
@media screen and (min-width: 961px) {
  .sec-epilogue::before {
    position: fixed;
    height: 100vh;
    background-position: center top;
  }
}
@media screen and (min-width: 961px) {
  .sec-epilogue .wrapW {
    position: sticky;
    top: clamp(80px, 10vw, 200px);
  }
}
.sec-epilogue .sec-ttlR {
  font-size: clamp(2rem, 3vw, 3.6rem);
  letter-spacing: normal;
  margin-bottom: clamp(40px, 6vw, 60px);
}
@media screen and (min-width: 768px) {
  .sec-epilogue .sec-ttlR {
    letter-spacing: 0.1em;
  }
}

/*# sourceMappingURL=company.css.map */