@charset "UTF-8";
.btnArea a {
  width: 134px;
  height: 38px;
  display: block;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 19px;
  background: #EC692C;
  color: #fff;
  font-family: "Shippori Mincho", serif;
  font-size: 16px;
  padding: 4px 20px;
}
.btnArea a:after {
  content: "";
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
}
.btnArea a:hover {
  transition: 0.3s;
}

.ttl {
  writing-mode: vertical-rl;
  color: #292929;
  font-size: clamp(16px, 2.17vw, 26px);
  letter-spacing: 0.04em;
  display: block;
}
.ttl span {
  display: block;
  color: #c1c1c1;
  font-size: clamp(14px, 1.33vw, 16px);
  text-transform: uppercase;
}
.ttl.tate {
  display: flex;
  gap: 14px;
  align-items: center;
}

.btnTel a {
  background: #436BEE !important;
}

.btnLine a {
  background: #61D836 !important;
}

.btnWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.btnWrap a {
  width: 270px !important;
  padding: 8px 20px !important;
  text-align: center;
  grid-template-columns: 1fr;
  margin: 0 auto;
}
.btnWrap a .line {
  width: 100%;
}

@media screen and (max-width: 1000px) {
  .btnWrap {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
  }
  .btnWrap a {
    width: 240px !important;
  }
}
header {
  display: block;
  height: 104px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
header .btnWrap {
  gap: 12px;
  grid-template-columns: 1fr;
}
header .headWrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 32px;
  box-sizing: border-box;
}
header .headWrap .logo {
  max-width: 128px;
  padding: 16px 25px;
  box-sizing: content-box;
}
header .headWrap .linkArea {
  display: flex;
  gap: 3%;
  width: -moz-fit-content;
  width: fit-content;
  justify-content: end;
}
header .headWrap .linkArea a {
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  font-size: clamp(14px, 1.33vw, 16px);
  font-family: "Afacad", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
header .headWrap .hamburger {
  display: none;
  width: 30px;
  height: 30px;
  position: relative;
  transition: 0.3s;
  cursor: pointer;
}
header .headWrap .hamburger span {
  position: absolute;
  height: 1px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: 0.3s;
  background-color: #292929;
}
header .headWrap .hamburger span:nth-child(2) {
  top: -28px;
}
header .headWrap .hamburger span:nth-child(3) {
  top: 28px;
}

.global-nav .btnArea {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.global-nav .btnArea a {
  background: #EC692C;
  height: auto;
  width: auto;
  display: block;
  padding: 8px 27px;
  display: grid;
  gap: 3px;
  border-radius: 40px;
}
.global-nav .btnArea a div {
  color: #fff;
  font-weight: 400;
  font-size: clamp(14px, 1.33vw, 16px);
  text-align: center;
  letter-spacing: 0.05em;
}
.global-nav .btnArea a .line {
  width: 100%;
  height: 1px;
  background: #fff;
}
.global-nav .btnArea a .after {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.global-nav .btnArea a .after::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background: #fff;
  width: 3px;
  height: 3px;
}
.global-nav .btnArea a:after {
  display: none;
}

.onMenu header .headWrap .hamburger {
  transition: 0.3s;
}
.onMenu header .headWrap .hamburger span {
  transition: 0.3s;
  width: 22px;
}
.onMenu header .headWrap .hamburger span:nth-child(1) {
  opacity: 0;
  left: -50%;
  pointer-events: none;
}
.onMenu header .headWrap .hamburger span:nth-child(2) {
  top: 0px;
  transform: rotate(45deg);
}
.onMenu header .headWrap .hamburger span:nth-child(3) {
  top: 0px;
  transform: rotate(-45deg);
}

@media only screen and (max-width: 767px), (orientation: portrait) {
  header {
    height: 74px;
  }
  header .headWrap {
    padding: 10px 16px;
    transition: 0.3s;
  }
  header .headWrap .logo {
    max-width: 98px;
    padding: 0;
  }
  header .headWrap .linkArea {
    display: none;
  }
  header .headWrap .hamburger {
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    transition: 0.3s;
    cursor: pointer;
  }
  header .headWrap .hamburger span {
    position: absolute;
    width: 17px;
    top: 0;
    bottom: 0;
    left: 5px;
    right: 0;
    margin: auto;
    border-radius: 2px;
    transition: 0.3s;
  }
  header .headWrap .hamburger span:nth-child(2) {
    top: -14px;
    width: 22px;
    left: 0;
  }
  header .headWrap .hamburger span:nth-child(3) {
    top: 14px;
    width: 12px;
    left: 10px;
  }
  .onMenu {
    overflow: hidden;
  }
  .onMenu header .headWrap {
    transition: 0.3s;
  }
  .onMenu header .headWrap .hamburger {
    transform: rotate(45deg);
    transition: 0.3s;
  }
  .onMenu header .headWrap .hamburger span {
    width: 22px;
    transition: 0.3s;
  }
  .onMenu header .headWrap .hamburger span:nth-child(1) {
    opacity: 0;
    left: -50%;
    pointer-events: none;
  }
  .onMenu header .headWrap .hamburger span:nth-child(2) {
    top: 0px;
    left: 0%;
    right: 0%;
    margin: auto;
    transform: rotate(90deg);
  }
  .onMenu header .headWrap .hamburger span:nth-child(3) {
    top: 0px;
    left: 0%;
    right: 0%;
    margin: auto;
    transform: rotate(0deg);
  }
}
.float {
  position: fixed;
  bottom: 56px;
  right: 32px;
  z-index: 900;
  transition: 0.3s;
  opacity: 1;
  pointer-events: all;
}
.float.btnArea a {
  width: 270px;
  text-align: center;
  justify-content: center;
}
.float.btnArea a:after {
  right: 18px;
  position: absolute;
}
.float .sub {
  color: #EC692C;
  font-size: clamp(14px, 1.33vw, 16px);
  text-align: center;
  position: relative;
  width: 96%;
  margin: 0 auto 2px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 7px;
}
.float .sub span {
  flex: 1;
  display: block;
  width: 100%;
  height: 1px;
  background: #EC692C;
  display: flex;
  align-items: center;
}

.reachfooter .float {
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}

@media only screen and (max-width: 767px) {
  .btnArea.float {
    bottom: 14px;
  }
}
@media only screen and (max-width: 500px) {
  .btnArea.float {
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    bottom: 8px;
    right: initial;
  }
  .btnArea.float a {
    max-width: initial;
    width: calc(100vw - 32px);
    text-align: center;
    justify-content: center;
  }
}
.mv {
  width: 100vw;
  height: calc(100vh - 120px - 56px);
  margin: 120px auto 56px;
  position: relative;
  max-width: 1440px;
}
.mv .imgTop {
  display: block;
  aspect-ratio: 16/9;
  max-width: 530px;
  width: 36%;
  position: absolute;
  top: 0;
  right: 0;
}
.mv .imgTop img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.mv .imgBottom {
  display: grid;
  grid-template-columns: 52% 7% 41%;
  grid-template-rows: 35% 47% 18%;
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 530px;
  width: 36%;
}
.mv .imgBottom img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.mv .imgBottom img:first-of-type {
  aspect-ratio: 4/5;
  grid-column: 1/3;
  grid-row: 1/3;
  z-index: 1;
}
.mv .imgBottom img:nth-child(2) {
  aspect-ratio: 2/3;
  grid-column: 2/4;
  grid-row: 2/4;
  z-index: 0;
}
.mv .txt {
  position: absolute;
  top: -14%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.mv .txt p {
  white-space: nowrap;
  writing-mode: vertical-rl;
  color: #292929;
  font-size: 28px;
  letter-spacing: 0.2em;
  line-height: 1.8em;
}
.mv .txt img {
  max-width: 74px;
  height: auto;
}
.mv .txtSub {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  z-index: 0;
}
.mv .txtSub span {
  color: #c1c1c1;
  text-align: center;
  line-height: 2em;
}

@media only screen and (max-width: 767px) {
  .mv {
    height: calc(100vh - 74px - 32px);
    min-height: 1000px;
    margin: 74px auto 100px;
  }
  .mv .imgTop {
    width: 60%;
  }
  .mv .imgBottom {
    bottom: 100px;
    width: 52%;
  }
  .mv .txt p {
    font-size: clamp(14px, 5.64vw, 22px);
  }
}
@media only screen and (max-width: 500px) {
  .mv {
    min-height: initial;
    height: calc(100vh - 50px);
    max-height: 760px;
  }
  .mv .imgTop {
    width: 45%;
  }
  .mv .imgBottom {
    width: 44%;
  }
  .mv .txt img {
    height: 40vh;
    width: auto;
    max-height: 260px;
  }
}
.wideImg {
  width: 100vw;
  height: auto;
}
.wideImg img {
  width: 100%;
  height: auto;
}

.concept .txtContent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.concept .txtContent .txt {
  display: flex;
  flex-direction: row-reverse;
  width: -moz-fit-content;
  width: fit-content;
  gap: 16px;
}
.concept .txtContent .txt p {
  writing-mode: vertical-rl;
  color: #292929;
  font-size: 14px;
  letter-spacing: 0.2em;
  line-height: 2.4em;
}
.concept img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.concept .concept1 {
  height: 66vh;
  min-height: 620px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 25% 3% 42% 30%;
  grid-template-rows: 30% 8% 62%;
  margin-bottom: 60px;
}
.concept .concept1 img.img1 {
  grid-column: 1/3;
  grid-row: 1/3;
}
.concept .concept1 img.img2 {
  grid-column: 2/4;
  grid-row: 2/4;
  position: relative;
  z-index: 0;
}
.concept .concept1 .txtContent {
  grid-column: 4/5;
  grid-row: 1/4;
}
.concept .concept2 {
  height: 46vh;
  min-height: 420px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 32% 24% 4% 14% 26%;
  grid-template-rows: 28% 44% 28%;
  margin-bottom: 120px;
}
.concept .concept2 img.img1 {
  grid-column: 2/4;
  grid-row: 2/4;
}
.concept .concept2 img.img2 {
  grid-column: 3/5;
  grid-row: 1/3;
  position: relative;
}
.concept .concept2 .txtContent {
  grid-column: 1/2;
  grid-row: 1/4;
}
.concept .concept3 {
  height: 60vh;
  min-height: 540px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 4% 20% 6% 40% 30%;
  grid-template-rows: 10% 16% 56% 18%;
  margin-bottom: 60px;
}
.concept .concept3 img.img1 {
  grid-column: 2/3;
  grid-row: 3/4;
}
.concept .concept3 img.img2 {
  grid-column: 4/5;
  grid-row: 2/5;
  position: relative;
}
.concept .concept3 .txtContent {
  grid-column: 5/6;
  grid-row: 1/4;
  align-items: flex-start;
}

@media only screen and (max-width: 767px) {
  .concept .concept1 {
    height: 80vh;
    min-height: 720px;
    padding: 0 5%;
    grid-template-columns: 30% 6% 64%;
    grid-template-rows: 10% 3% 20% 67%;
    margin-bottom: 60px;
  }
  .concept .concept1 img.img1 {
    grid-column: 1/3;
    grid-row: 1/3;
  }
  .concept .concept1 img.img2 {
    grid-column: 2/4;
    grid-row: 2/4;
  }
  .concept .concept1 .txtContent {
    grid-column: 1/4;
    grid-row: 4/5;
  }
  .concept .concept2 {
    height: 70vh;
    min-height: 638px;
    padding: 0 5%;
    grid-template-columns: 56% 10% 34%;
    grid-template-rows: 10% 15% 10% 65%;
    margin-bottom: 0px;
  }
  .concept .concept2 img.img1 {
    grid-column: 1/3;
    grid-row: 2/4;
  }
  .concept .concept2 img.img2 {
    grid-column: 2/4;
    grid-row: 1/3;
  }
  .concept .concept2 .txtContent {
    grid-column: 1/4;
    grid-row: 4/5;
  }
  .concept .concept3 {
    height: 74vh;
    min-height: 672px;
    padding: 0 5%;
    grid-template-columns: 28% 10% 62%;
    grid-template-rows: 5% 16% 5% 74%;
    margin-bottom: 0px;
  }
  .concept .concept3 img.img1 {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .concept .concept3 img.img2 {
    grid-column: 3/4;
    grid-row: 1/4;
  }
  .concept .concept3 .txtContent {
    grid-column: 1/5;
    grid-row: 4/5;
    align-items: center;
  }
}
.rightImg {
  width: 85vw;
  height: auto;
  margin-left: auto;
}
.rightImg img {
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 767px) {
  .rightImg {
    width: 97vw;
  }
}
.about {
  display: grid;
  grid-template-columns: 1fr 1000px 1fr;
  margin: 120px 0;
  position: relative;
}
.about:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  grid-column: 1/2;
  background-color: #f5f4f1;
}
.about .wrap {
  background-color: #f5f4f1;
  display: grid;
  grid-template-columns: 125px 1fr;
  padding: 64px 64px 64px 0;
  grid-column: 2/3;
}
.about .wrap .content {
  padding-top: 40px;
  border-top: #c1c1c1 1px solid;
}
.about .wrap .content .box {
  display: grid;
  grid-template-columns: 34% 60%;
  gap: 6%;
  align-items: center;
}
.about .wrap .content .box .left .mds {
  font-size: clamp(14px, 1.67vw, 20px);
  margin-bottom: 8px;
}
.about .wrap .content .box .left p {
  font-size: 14px;
}
.about .wrap .content .box .left .list {
  margin-top: 16px;
}
.about .wrap .content .box .left .list .line {
  border-bottom: 1px solid #c1c1c1;
  padding: 8px 0;
  display: grid;
  grid-template-columns: 80px 1fr;
}
.about .wrap .content .box .left .list .line span {
  font-size: 14px;
}
.about .wrap .content .box .left .list .line .ltxt {
  width: 100%;
  text-align: right;
}
.about .wrap .content .box .img img {
  width: 100%;
}

@media only screen and (max-width: 1100px) {
  .about {
    grid-template-columns: 5% 90% 5%;
  }
}
@media only screen and (max-width: 767px), (orientation: portrait) {
  .about {
    margin: 0px 0;
    padding: 90px 0 0;
  }
  .about .wrap {
    grid-template-columns: 60px 1fr;
    padding: 32px 5% 32px 0;
  }
  .about .wrap .content {
    padding-top: 28px;
  }
  .about .wrap .content .box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 32px;
  }
  .about .wrap .content .box:last-of-type {
    padding-bottom: 0px;
  }
  .about .wrap .content .box .left {
    grid-row: 2/3;
  }
  .about .wrap .content .box .left .mds {
    font-size: clamp(14px, 4.62vw, 18px);
  }
  .about .wrap .content .box .list .line {
    grid-template-columns: 80px 1fr;
  }
  .about .wrap .content .box .list .line span {
    font-size: 14px;
  }
  .about .wrap .content .box .list .line .ltxt {
    width: 100%;
    text-align: right;
  }
}
.cta {
  width: 100vw;
  height: 580px;
  position: relative;
  -webkit-clip-path: inset(0);
          clip-path: inset(0);
}
.cta .content {
  width: 100vw;
  height: 100%;
  position: absolute;
}
.cta .content .btnArea a {
  background: #EC692C;
  height: auto;
  width: auto;
  display: block;
  padding: 8px 27px;
  display: grid;
  gap: 3px;
  border-radius: 40px;
}
.cta .content .btnArea a div {
  color: #fff;
  font-weight: 400;
  font-size: clamp(14px, 1.33vw, 16px);
  text-align: center;
  letter-spacing: 0.05em;
}
.cta .content .btnArea a .line {
  width: 100%;
  height: 1px;
  background: #fff;
}
.cta .content .btnArea a .after {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.cta .content .btnArea a .after::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background: #fff;
  width: 3px;
  height: 3px;
}
.cta .content .btnArea a:after {
  display: none;
}
.cta .content::after {
  content: "";
  width: 100vw;
  height: 100%;
  background-image: url(../../top/images/cta_bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  z-index: 0;
}
.cta .innerWrap {
  position: absolute;
  z-index: 2;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.cta .innerWrap .ttl {
  margin: 0 auto 64px;
  color: #fff;
  letter-spacing: 0.3em;
}
.cta .innerWrap .ttl span {
  color: #fff;
}

@media only screen and (min-width: 767px) and (max-width: 1000px) {
  .cta {
    height: 260px;
  }
  .cta .content .innerWrap {
    justify-content: center !important;
    width: 96%;
    gap: 50px;
  }
}
@media only screen and (max-width: 767px), (orientation: portrait) {
  .cta {
    height: 260px;
  }
  .cta .content .innerWrap {
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 96%;
  }
  .cta .content .innerWrap .ttl {
    margin: 0px;
    font-size: 22px;
  }
}
.point {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 120px;
}
.point .wrap {
  display: grid;
  grid-template-columns: 125px 1fr;
}
.point .wrap .content {
  padding-top: 40px;
  border-top: #c1c1c1 1px solid;
}
.point .wrap .content .box {
  display: grid;
  grid-template-columns: 34% 60%;
  gap: 6%;
  align-items: center;
  margin-bottom: 24px;
}
.point .wrap .content .box:last-of-type {
  margin-bottom: 0px;
}
.point .wrap .content .box .img img {
  width: 100%;
}
.point .wrap .content .box .left .mds {
  margin-bottom: 16px;
}
.point .wrap .content .box .left .mds span {
  color: #c1c1c1;
  font-family: "Afacad", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
}
.point .wrap .content .box .left .mds h3 {
  font-size: clamp(14px, 1.67vw, 20px);
}

@media only screen and (max-width: 1100px) {
  .point {
    width: 90%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 767px), (orientation: portrait) {
  .point {
    padding-top: 100px;
  }
  .point .wrap {
    grid-template-columns: 60px 1fr;
  }
  .point .wrap .content {
    padding-top: 26px;
  }
  .point .wrap .content .box {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .point .wrap .content .box .left {
    grid-row: 2/3;
    width: 90%;
    margin: auto;
  }
  .point .wrap .content .box .left .mds {
    margin-bottom: 8px;
  }
  .point .wrap .content .box .left .mds span {
    color: #c1c1c1;
    font-family: "Afacad", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
  }
  .point .wrap .content .box .left .mds h3 {
    font-size: clamp(14px, 4.62vw, 18px);
  }
  .point .wrap .content .box .left p {
    font-size: 14px;
  }
}
.design {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 120px;
}
.design .wrap {
  display: grid;
  grid-template-columns: 125px 1fr;
}
.design .wrap .content {
  padding-top: 40px;
  border-top: #c1c1c1 1px solid;
}
.design .wrap .content .box {
  width: 100%;
  display: grid;
  grid-template-columns: 336px 1fr;
  align-items: first baseline;
}
.design .wrap .content .box h3 {
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  font-size: clamp(14px, 1.67vw, 20px);
}
.design .wrap .content .box p {
  font-size: 14px;
  line-height: 1.9em;
}
.design .wrap .content .imgbox {
  width: 100%;
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3%;
}
.design .wrap .content .imgbox .container img {
  width: 100%;
}
.design .wrap .content .imgbox .container span {
  margin-top: 4px;
}
.design .wrap .content .imgbox .container:last-of-type {
  padding-top: 40px;
}

@media only screen and (max-width: 1100px) {
  .design {
    width: 90%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 767px), (orientation: portrait) {
  .design {
    margin: 0 5%;
    padding-top: 100px;
  }
  .design .visible-xs {
    font-size: 14px;
    line-height: 1.9em;
    display: block;
    margin-left: auto;
    width: 90%;
    margin-top: 32px;
  }
  .design .wrap {
    grid-template-columns: 60px 1fr;
  }
  .design .wrap .content {
    padding-top: 26px;
  }
  .design .wrap .content .box {
    grid-template-columns: 1fr;
  }
  .design .wrap .content .box h3 {
    font-size: clamp(14px, 5.13vw, 20px);
    margin-bottom: 20px;
    margin: 0 0 0 5%;
  }
  .design .wrap .content .box p {
    font-size: 14px;
    line-height: 1.9em;
    margin: 16px 0 0 5%;
  }
  .design .wrap .content .imgbox {
    margin-top: 32px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .design .wrap .content .imgbox .container {
    width: 94%;
    margin-right: auto;
  }
  .design .wrap .content .imgbox .container span {
    font-size: 12px;
  }
  .design .wrap .content .imgbox .container:last-of-type {
    padding-top: 16px;
    margin-right: 0;
    margin-left: auto;
  }
}
.present .wrap {
  margin: 120px auto 120px;
  background-color: #705442;
  max-width: 1000px;
  width: 90%;
}
.present .wrap .box {
  padding: 40px 42px 8px;
  display: grid;
  grid-template-columns: 40% 60%;
}
.present .wrap .box .mds h2 {
  display: block;
  font-size: clamp(16px, 2.17vw, 26px);
  color: #fff;
}
.present .wrap .box .mds span {
  display: block;
  color: #c1c1c1;
}
.present .wrap .box p {
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  line-height: 1.9em;
}

@media only screen and (max-width: 767px), (orientation: portrait) {
  .present .wrap {
    margin: 80px auto;
    background-color: #705442;
    max-width: 1000px;
    width: 90%;
  }
  .present .wrap .box {
    padding: 30px 20px 40px;
    grid-template-columns: 1fr;
  }
  .present .wrap .box .mds h2 {
    font-size: clamp(14px, 5.64vw, 22px);
  }
  .present .wrap .box .mds span {
    display: block;
    color: #c1c1c1;
  }
  .present .wrap .box p {
    margin-top: 32px;
  }
}
.philosophy {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 120px;
}
.philosophy .wrap {
  display: grid;
  grid-template-columns: 125px 1fr;
}
.philosophy .wrap .content {
  padding-top: 40px;
  border-top: #c1c1c1 1px solid;
}
.philosophy .wrap .content .box {
  display: grid;
  grid-template-columns: 336px 1fr;
  align-items: center;
}
.philosophy .wrap .content .box h3 {
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  font-size: clamp(14px, 1.67vw, 20px);
}
.philosophy .wrap .content .box p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.9em;
}
.philosophy .wrap .content > img {
  margin-top: 40px;
  width: 100%;
}
.philosophy .wrap .content .three span {
  font-size: 16px;
  color: #c1c1c1;
  letter-spacing: 0em;
}
.philosophy .wrap .content .three h3 {
  text-align: center;
  margin: 54px auto 24px;
  font-size: clamp(14px, 1.67vw, 20px);
  border-bottom: 1px solid #292929;
  width: -moz-fit-content;
  width: fit-content;
  letter-spacing: 0.04em;
}
.philosophy .wrap .content .three h4 {
  margin-bottom: 6px;
  font-size: clamp(14px, 1.67vw, 20px);
}
.philosophy .wrap .content .three .box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4%;
  align-items: flex-start;
}
.philosophy .wrap .content .three .box img {
  width: 100%;
}
.philosophy .wrap .content .after {
  width: 100%;
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6%;
}
.philosophy .wrap .content .after .left .mds {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #c1c1c1;
}
.philosophy .wrap .content .after .left .mds span {
  font-size: clamp(14px, 1.33vw, 16px);
  color: #c1c1c1;
  letter-spacing: 0em;
}
.philosophy .wrap .content .after .left .mds h4 {
  font-size: clamp(14px, 1.67vw, 20px);
}
.philosophy .wrap .content .after .left p {
  font-size: 14px;
  line-height: 1.8em;
}

@media only screen and (max-width: 1000px) {
  .philosophy {
    width: 90%;
  }
}
@media only screen and (max-width: 767px), (orientation: portrait) {
  .philosophy {
    padding-top: 88px;
    margin: auto;
  }
  .philosophy .wrap {
    grid-template-columns: 60px 1fr;
  }
  .philosophy .wrap .content {
    padding-top: 24px;
    border-top: #c1c1c1 1px solid;
  }
  .philosophy .wrap .content .box {
    grid-template-columns: 1fr;
    width: 96%;
    margin-left: auto;
  }
  .philosophy .wrap .content .box h3 {
    font-size: clamp(14px, 5.13vw, 20px);
    text-align: left;
    margin: 0;
  }
  .philosophy .wrap .content .box p {
    font-size: 14px;
    margin-top: 8px;
  }
  .philosophy .wrap .content .three span {
    font-size: 16px;
    color: #c1c1c1;
    letter-spacing: 0em;
  }
  .philosophy .wrap .content .three h3 {
    font-size: clamp(14px, 5.13vw, 20px);
    margin: 40px auto 24px;
  }
  .philosophy .wrap .content .three h4 {
    margin-bottom: 6px;
    font-size: clamp(14px, 4.62vw, 18px);
  }
  .philosophy .wrap .content .three .box {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .philosophy .wrap .content .three .box img {
    width: 100%;
  }
  .philosophy .wrap .content .after {
    margin-top: 48px;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 96%;
    margin-left: auto;
  }
  .philosophy .wrap .content .after .left .mds {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #c1c1c1;
  }
  .philosophy .wrap .content .after .left .mds span {
    font-size: clamp(14px, 4.1vw, 16px);
  }
  .philosophy .wrap .content .after .left .mds h4 {
    font-size: clamp(14px, 4.62vw, 18px);
  }
  .philosophy .wrap .content .after img {
    width: 100%;
  }
}
.works {
  margin: 0 auto;
  padding-top: 120px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 125px 875px 1fr;
  grid-template-rows: 70px auto auto;
}
.works .txt {
  grid-column: 2/3;
  grid-row: 1/3;
}
.works .border {
  grid-column: 3/4;
  grid-row: 1/2;
  border-top: #c1c1c1 1px solid;
}
.works .swiper1 {
  grid-row: 2/3;
  grid-column: 3/5;
  width: 100%;
  margin-bottom: 32px;
}
.works .swiper1 .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: auto;
}
.works .swiper1 .swiper-wrapper .swiper-slide p {
  width: 90%;
  display: block;
  margin: 18px auto 0;
  font-size: clamp(14px, 1.42vw, 17px);
}

.swiper-button1 {
  grid-column: 3/4;
  grid-row: 3/4;
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  width: 100px;
}
.swiper-button1 .swiper-button-next {
  position: relative;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin-top: 0;
  width: 26px;
  height: 26px;
}
.swiper-button1 .swiper-button-next:after {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background-color: #000;
  transform: rotate(45deg);
  position: absolute;
  top: 7px;
}
.swiper-button1 .swiper-button-next:before {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background-color: #000;
  transform: rotate(-45deg);
  position: absolute;
  bottom: 7px;
}
.swiper-button1 .swiper-button-prev {
  position: relative;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin-top: 0;
  width: 26px;
  height: 26px;
}
.swiper-button1 .swiper-button-prev:after {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background-color: #292929;
  transform: rotate(-45deg);
  position: absolute;
  top: 7px;
}
.swiper-button1 .swiper-button-prev:before {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background-color: #292929;
  transform: rotate(45deg);
  position: absolute;
  bottom: 7px;
}

@media only screen and (max-width: 1100px) {
  .works {
    grid-template-columns: 5% 125px 1fr 5%;
  }
}
@media only screen and (max-width: 767px) {
  .works {
    margin: 0 auto;
    width: 90%;
    padding-top: 100px;
    grid-template-columns: 60px 1fr;
    grid-template-rows: 30px auto auto;
  }
  .works .txt {
    grid-column: 1/2;
    grid-row: 1/3;
  }
  .works .border {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .works .splide {
    grid-row: 2/3;
    grid-column: 2/3;
    width: 100%;
  }
  .works .splide .swiper-wrapper .swiper-slide img {
    width: 100%;
  }
  .works .splide .swiper-wrapper .swiper-slide p {
    margin: 12px auto 0;
  }
  .swiper-button {
    grid-column: 2/3;
    grid-row: 3/4;
  }
}
.splide {
  display: none;
}
.splide .splide__slide img {
  margin-bottom: 12px;
}

.splide__pagination {
  display: none !important;
}

.splide__arrows {
  grid-column: 2/3;
  grid-row: 3/4;
  position: relative;
  justify-content: space-between;
  margin-left: auto;
  width: 100px;
  display: flex;
  margin-top: 10px;
}
.splide__arrows .splide__arrow {
  background-color: #fff;
  transform: translateY(0);
}
.splide__arrows .splide__arrow svg {
  display: none;
}
.splide__arrows .splide__arrow--next {
  position: relative;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin-top: 0;
  width: 26px;
  height: 26px;
}
.splide__arrows .splide__arrow--next:after {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background-color: #000;
  transform: rotate(45deg);
  position: absolute;
  top: 7px;
}
.splide__arrows .splide__arrow--next:before {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background-color: #000;
  transform: rotate(-45deg);
  position: absolute;
  bottom: 7px;
}
.splide__arrows .splide__arrow--prev {
  position: relative;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin-top: 0;
  width: 26px;
  height: 26px;
}
.splide__arrows .splide__arrow--prev:after {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background-color: #292929;
  transform: rotate(-45deg);
  position: absolute;
  top: 7px;
}
.splide__arrows .splide__arrow--prev:before {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background-color: #292929;
  transform: rotate(45deg);
  position: absolute;
  bottom: 7px;
}

@media only screen and (max-width: 767px) {
  .swiper1 {
    display: none;
  }
  .splide {
    display: block;
  }
  .swiper-button1 {
    display: none;
  }
}
.access {
  max-width: 1000px;
  margin: 0 auto;
  padding: 120px 0;
}
.access .wrap {
  display: grid;
  grid-template-columns: 125px 1fr;
}
.access .wrap .content {
  padding-top: 40px;
  border-top: #c1c1c1 1px solid;
}
.access .wrap .content .box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.access .wrap .content .box .container {
  width: 80%;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
}
.access .wrap .content .box .container h3 {
  font-size: clamp(14px, 1.5vw, 18px);
  margin-bottom: 38px;
}
.access .wrap .content .box .container .list .line {
  width: 100%;
  display: grid;
  grid-template-columns: 86px 1fr;
  padding: 8px 0;
  font-size: 14px;
}
.access .wrap .content .box iframe {
  width: 100%;
}

@media only screen and (max-width: 767px), (orientation: portrait) {
  .access {
    width: 90%;
    padding: 96px 0;
  }
  .access .wrap {
    grid-template-columns: 60px 1fr;
  }
  .access .wrap .content {
    padding-top: 24px;
  }
  .access .wrap .content .box {
    grid-template-columns: 1fr;
  }
  .access .wrap .content .box .container {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 8px;
  }
  .access .wrap .content .box .container .list .line {
    grid-template-columns: 60px 1fr;
  }
  .access .wrap .content .box .container h3 {
    font-size: clamp(14px, 4.62vw, 18px);
    margin-bottom: 24px;
  }
}
footer .wrap {
  max-width: 600px;
  width: 90%;
  margin: auto;
  padding: 120px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4%;
  align-items: flex-start;
  justify-content: center;
}
footer .wrap .left img {
  margin-bottom: 20px;
}
footer .wrap .left p {
  font-size: 14px;
  line-height: 1.8em;
}
footer .wrap .right .list .line {
  display: grid;
  grid-template-columns: 88px 1fr;
  padding: 8px 0;
}
footer .wrap .right .list .line span {
  font-size: 14px;
}
footer .copyright {
  border-top: 1px solid #c1c1c1;
  padding: 6px;
}
footer .copyright p {
  font-size: 12px;
  text-align: center;
}

@media only screen and (max-width: 767px), (orientation: portrait) {
  footer .wrap {
    max-width: 600px;
    width: 90%;
    margin: auto;
    padding: 90px 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 54px;
    align-items: flex-start;
    justify-content: center;
  }
  footer .wrap .left {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
  }
  footer .wrap .left img {
    margin: 0 auto 20px;
    display: block;
  }
  footer .wrap .left p {
    font-size: 14px;
    line-height: 1.8em;
    width: -moz-fit-content;
    width: fit-content;
  }
  footer .wrap .right {
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
  }
  footer .wrap .right .list .line {
    display: grid;
    grid-template-columns: 88px 1fr;
    padding: 8px 0;
  }
  footer .wrap .right .list .line span {
    font-size: 14px;
  }
  footer .copyright {
    border-top: 1px solid #c1c1c1;
    padding: 6px;
  }
  footer .copyright p {
    font-size: 12px;
    text-align: center;
  }
}
.contentArea .topTitleArea {
  padding-top: 180px;
  padding-bottom: 40px;
}
.contentArea .topTitleArea .headttl {
  display: flex;
  gap: 6px;
  align-items: baseline;
  width: 100%;
  border-bottom: 1px solid #c1c1c1;
  padding-bottom: 2px;
  margin-bottom: 10px;
}
.contentArea .topTitleArea .headttl .ttltxt {
  font-size: 18px;
}
.contentArea .topTitleArea .headttl .fontAfacad {
  font-size: 18px;
  color: #c1c1c1;
  letter-spacing: 0.08em;
}
.contentArea .topTitleArea .nav {
  display: flex;
  gap: 3px;
  align-items: baseline;
  justify-content: flex-end;
}
.contentArea .topTitleArea .nav a {
  font-size: 13px;
  color: #c1c1c1;
  display: flex;
  gap: 3px;
  align-items: center;
}
.contentArea .topTitleArea .nav a::after {
  content: "";
  display: block;
  width: 12px;
  height: 1px;
  background: #c1c1c1;
}
.contentArea .topTitleArea .nav span {
  font-size: 13px;
  color: #c1c1c1;
}

.swiper-container,
.swiper-wrapper,
.swiper-slide,
.swiper-slide img {
  transition-duration: 100ms !important;
}

.global-nav {
  position: fixed;
  opacity: 0;
  top: 0%;
  width: 100%;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  transition: all 0.6s;
  z-index: 10;
  overflow-y: auto;
  visibility: hidden;
  margin: 0 auto;
  text-align: center;
  display: flex;
  z-index: 999;
}
.global-nav .global-nav-inner {
  width: 100%;
  max-width: 500px;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 100vh;
  min-height: 100dvh;
  text-align: center;
  top: 15%;
  right: 0;
  left: 0;
  margin-left: auto;
  text-align: left;
  padding: 74px 32px 48px;
  transition: 0.3s;
  z-index: -1;
  background-color: #fff;
  background-image: url(../../top/images/menu_bg.png);
  background-position: bottom center;
  background-size: contain;
  background-repeat: no-repeat;
}
.global-nav .global-nav-inner .global-nav-box {
  max-width: 240px;
  margin: auto;
}
.global-nav .global-nav-inner .global-nav-box a {
  display: block;
  color: #292929;
  text-align: center;
  padding: 10px 0;
  font-family: "Afacad", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 10px;
}

.onMenu {
  /* 表示された時用のCSS */
  height: 100%;
  overflow: hidden;
}
.onMenu .global-nav {
  visibility: visible;
  opacity: 1;
  justify-content: center;
  background-color: initial;
}
.onMenu .global-nav-inner {
  opacity: 1;
}
.onMenu .global-nav-inner .smt-nav-link {
  opacity: 1;
}/*# sourceMappingURL=style.css.map */