@charset "UTF-8";
/*------------------------------------
 service
------------------------------------*/
.service {
  width:100%;
  height:auto;
  padding:100px 0 150px 0;
  position:relative;
}
.service-body {
  width:90%;
  max-width:1280px;
  height:auto;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.service-ttl {
  width:100%;
  display:flex;
  flex-direction:column-reverse;
  justify-content:center;
  align-items:center;
  line-height:1.2;
  margin-bottom:50px;
  position:relative;
  z-index:1;
}
.service-ttl > p {
  font-size:6rem;
  font-family:"Playfair Display", serif;
  font-optical-sizing:auto;
  font-weight:400;
  font-style:normal;
}
.service-ttl > h2 {
  font-size:1.6rem;
}
.service-top {
  display:flex;
  flex-direction:column;
  align-items:center;
}
.service-lead {
  font-size:1.8rem;
  text-align:center;
  margin-bottom:40px;
  position:relative;
  z-index:1;
}
.service-lead__top {
  position:relative;
}
.service-lead-co {
  font-size:1rem;
  position:absolute;
  top:-15px;
  left:52.5%;
  transform:translate(-50%,-0);
  color:#545454;
  white-space:nowrap;
}
.service-tab {
  width:90%;
  height:auto;
  margin:0 auto;
}
.service-tab > ul {
  width:100%;
  display:flex;
  justify-content:space-between;
}
.service-tab > ul > li {
  width:32%;
  display:flex;
  flex-direction:column;
}
.service-tab > ul > li > a {
  display:flex;
  flex-direction:column;
  flex:1;
}
.service-tab__img {
  width:100%;
  height:auto;
  position:relative;
}
.service-tab__img::before {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:56.25%;
}
.service-tab__img > img {
  width:100%;
  height:100%;
  border-radius:30px 30px 0 0;
  position:absolute;
  top:0;
  left:0;
  object-fit:cover;
}
.service-tab__inner {
  width:100%;
  height:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:20px 20px 30px 20px;
  box-sizing:border-box;
  background:#f2f2f2;
}
.service-tab__sub {
  font-size:1.8rem;
}
.service-tab__sub > span {
  font-family:"Playfair Display", serif;
  font-optical-sizing:auto;
  font-weight:400;
  font-style:normal;
  margin-right:3px;
}
.service-tab__lead {
  font-size:2.4rem;
  font-weight:bold;
  text-align:center;
  margin-bottom:5px;
}
.service-tab__link {
  width:100%;
  height:auto;
}
.service-tab__link > span {
  display:flex;
  justify-content:center;
  align-items:center;
}
.service-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50vh;
  background: #fff;
  margin-right: 8px;
  position: relative;
  animation: dot-scale 2.5s linear infinite;
}
@keyframes dot-scale {
  0% {
    transform: scale(1);
    background: #fff;
  }
  33% {
    transform: scale(1.2);
    background: rgba(255, 0, 0, 1);
  }
  66% {
    transform: scale(1.2);
    background: rgba(255, 0, 0, .5);
  }
  100% {
    transform: scale(1);
    background: #fff;
  }
}
/*------------------------------------
 work
------------------------------------*/
.work,
.work2,
.work3 {
  width:100%;
  height:auto;
  position:relative;
}
.work2 {
  margin-bottom:100px;
  position:relative;
  z-index:1;
}
.work-body {
  width:90%;
  max-width:1280px;
  height:auto;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.work-col {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.work-img {
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:#eee;
  position:relative;
}
.work .work-img {
  clip-path: polygon(81.2264% 100%,0 100%, 0 0, 100% 0,81.2264% 100%);
}
.work3 .work-img {
  clip-path: polygon(81.2264% 0,0 0, 0 100%, 100% 100%,81.2264% 0);
}
.work-img2 {
  width:100vw;
  margin-right:calc(50% - 50vw);
  background:#eee;
  position:relative;
  clip-path: polygon(18.8679% 0,100% 0,100% 100%,0 100%,18.8679% 0);
}
.work-img::after,
.work-img2::after {
  display:block;
  content:'';
  width:100%;
  height:0;
  padding-top:71.2264%;
}
.work-img__inner,
.work-img__inner2 {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}
.work-img__inner > img,
.work-img__inner2 > img {
  height:100%;
  object-fit:cover;
}
.work-inner {
  width:80%;
  padding:120px 0 80px 5%;
  box-sizing:border-box;
  position:relative;
}
.work2 .work-inner {
  padding:120px 5% 80px 0;
}

.work-ttl {
  width:100%;
  line-height:1.6;
  margin-bottom:30px;
}
.work-ttl > h2 {
  font-size:3.4rem;
  color:#ff0000;
}
.work-ttl > p {
  display:flex;
  align-items:center;
  font-family: "Playfair Display", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.4rem;
  padding-left: 5px;
}
.work-ttl > p::after {
  display:block;
  content:'';
  flex:1;
  border-top:1px solid #ccc;
  margin-left:5px;
}
.work-ttl > p > img {
  width:14px;
  margin-right:3px;
}
.work-txt {
  width:100%;
  margin-bottom:20px;
}
.work-txt__sub {
  width:100%;
  padding:20px;
  box-sizing:border-box;
  background:#fafafa;
  margin-bottom:10px;
  font-size:1.4rem;
}
.link-btn {
  width:60%;
  margin-left:auto;
}
.work2 .work-inner .link-btn {
  margin-left:initial;
}

.work3 {
  width:100%;
  margin-bottom:150px;
  position:relative;
}
.work3::after {
  display: block;
  content: '';
  width:200%;
  height:200%;
  position: absolute;
  bottom:-50%;
  left: 0;
  background: url(../img/common/bg-red.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom left;
  z-index:-1;
}
.work-body3 {
  width:90%;
  max-width:1200px;
  margin:0 auto;
}
.work-col3 {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.work-img3 {
  width:45%;
  height:auto;
}
.work-inner3 {
  width:50%;
}
.work-list {
  width:100%;
}
.work-list > ul {
  width:100%;
  display:flex;
  flex-wrap:wrap;
  list-style:none;
}
.work-list > ul > li {
  padding:5px 20px;
  background:#eee;
  border-radius:4px;
  font-weight:bold;
}
.work-list > ul > li:not(:last-child) {
  margin-right:8px;
}
/*------------------------------------
 .cont
------------------------------------*/
.cont {
  width:100%;
  height:auto;
  padding:150px 0;
  position:relative;
}
.cont::after {
  display:block;
  content:'';
  width:100%;
  height:150px;
  position:absolute;
  bottom:0;
  left:0;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1));
}
.cont-body {
  width:90%;
  max-width:1280px;
  height:auto;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.cont-ttl {
  width:30%;
  margin:0 auto 60px auto;
}
.cont-ttl > h2 {
  width:100%;
}
.cont-lead {
  width:100%;
  margin:0 auto 50px auto;
}
.cont-lead > p {
  text-align:center;
  font-size:1.8rem;
}
.cont-top {
  width:100%;
  display:flex;
  justify-content:space-between;
  margin-bottom:80px;
}
.cont-item {
  width:49%;
  display:flex;
  flex-direction:column;
  box-shadow: rgba(149, 157, 165, 0.15) 0px 8px 24px;
  border-radius:50px 50px 0 0;
}
.cont-item__ttl {
  width:100%;
  height:80px;
  color:#fff;
  position:relative;
}
.cont-item__ttl::before {
  display:block;
  content:'';
  width:100%;
  height:50%;
  position:absolute;
  bottom:0;
  left:0;
  background:#fff;
}
.cont-item__ttl > h3 {
  width:100%;
  height:100%;
  font-size:3rem;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50vh;
  position:relative;
  z-index:1;
}
#cont-item1 > .cont-item__ttl > h3 {
  background:#A38E77;
}
#cont-item2 > .cont-item__ttl > h3 {
  background:#545454;
}
.cont-top__inner {
  width:100%;
  height:auto;
  display:flex;
  flex-direction:column;
  flex:1;
  padding:0 30px;
  box-sizing:border-box;
  background:#fff;
}
.cont-top__lead {
  width:100%;
  padding:40px 0;
  font-size:2rem;
  text-align:center;
}
.cont-top__inner > dl {
  width:100%;
  display:flex;
  flex-wrap:wrap;
  border:1px solid #eee;
  margin-bottom:30px;
}
.cont-top__inner > dl > dt {
  width:120px;
  padding:15px 0;
  text-align:center;
  color:#fff;
  font-weight:bold;
}
.cont-top__inner > dl > dt:nth-of-type(1) {
  background:#48D1AB;
}
.cont-top__inner > dl > dt:nth-of-type(2) {
  background:#8b8b8b;
}
.cont-top__inner > dl > dd {
  width:calc(100% - 120px);
  padding:15px 10px;
  box-sizing:border-box;
  background:#fff;
}
.cont-top__inner > dl > dd:nth-of-type(2) {
  border-top:1px solid #eee;
}
.cont-tbl__Wrap {
  width:100%;
  height:auto;
}
.cont-tbl {
  width:90%;
  height:auto;
  margin:0 auto;
}
.cont-tbl > table {
  width:100%;
  height:auto;
  margin:0 auto;
  border-collapse:collapse;
  border:1px solid #ccc;
  font-size:1.8rem;
}
.cont-tbl > table tr > th,
.cont-tbl > table tr > td {
  padding:30px 20px;
  box-sizing:border-box;
  text-align:center;
}
.cont-tbl > table tr:not(:last-child) {
  border-bottom:1px solid #ccc;
}
.cont-tbl > table tr > th {
  border-bottom:1px solid #ccc;
}
.cont-tbl > table tr > th:nth-of-type(1) {
  width:20%;
  background:#f2f2f2;
}
.cont-tbl > table tr > th:nth-of-type(2) {
  background:#A38E77;
  color:#fff;
}
.cont-tbl > table tr > th:nth-of-type(3) {
  background:#545454;
  color:#fff;
}
.cont-tbl > table tr > th:nth-of-type(n+2) {
  width:40%;
}
.cont-tbl > table tr > th {
  font-size:2.6rem;
  font-weight:bold;
}
.cont-tbl > table tr > td:nth-of-type(1) {
  font-weight:bold;
  background:#f2f2f2;
}
.cont-tbl > table tr > td:not(:last-child) {
  border-right:1px solid #ccc;
}
/*------------------------------------
 .flow
------------------------------------*/
.flow {
  width:100%;
  height:auto;
  padding:150px 0;
  background: #f3f0ee;
  position:relative;
}
.flow::before {
  display:block;
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:url('../img/common/bg-noise.png');
  background-repeat:repeat;
  opacity:.5;
}
.flow-body {
  width:90%;
  max-width:1200px;
  height:auto;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.flow-ttl {
  width:22.5%;
  margin:0 auto 30px auto;
}
.flowt-ttl > h2 {
  width:100%;
}
.flow-top {
  width:auto;
  text-align:center;
  padding:20px;
  margin-bottom:40px;
  font-size:1.8rem;
  background:#F9F8F7;
}
.flow-attention {
  font-size:1.4rem;
}
.flow-col {
  width:100%;
  display:flex;
}
.flow-item {
  width:calc(100%/4);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.flow-img {
  width:40%;
  margin:0 auto 30px auto;
}
.flow-line {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.flow-line::before,
.flow-line::after {
  display:block;
  content:'';
  flex:1;
  border-top:5px solid #FFDADA;
}
.flow-line > img {
  width:20px;
}
.flow-txt {
  width:80%;
  margin:30px auto 20px auto;
  padding:20px;
  flex:1;
  background:#F4ECEC;
  border-radius:6px;
  text-align:center;
  box-sizing:border-box;
  position:relative;
}
.flow-txt::before {
  content:"";
  position:absolute;
  top:-28px;
  left:50%;
  margin-left:-15px;
  border:15px solid transparent;
  border-bottom:15px solid #F4ECEC;
}
.flow-txt-en {
  font-size:2.4rem;
  line-height:1;
  color:#BAA3A3;
  margin-bottom:14px;
}
.flow-txt-en span {
  font-family:"Playfair Display", serif;
  font-weight:400;
  font-style:normal;
}
.flow-txt > p {
  display:flex;
  justify-content:center;
  align-items:center;
  flex:1;
  min-height:46px;
  font-weight:bold;
  line-height:1.4;
}
@media screen and (max-width:1280px) {
  .link-btn {
    width:70%;
  }
}
@media screen and (max-width:1024px) {
  .work-col {
    flex-direction:column;
  }
  .work2 {
    margin-bottom:0;
  }
  .work2 .work-col {
    flex-direction:column-reverse;
  }
  .work-col3 {
    flex-direction:column;
  }
  .work-img {
    width:100vw;
  }
  .work-img::after,
  .work-img2::after {
    padding-top:56.25%;
  }
  .work-inner,
  .work2 .work-inner {
    padding:80px 0 100px 0;
  }
  .work-img3 {
    width:65%;
    margin-bottom:80px;
  }
  .work-inner3 {
    width:80%;
  }
  /*---cont---*/
  .cont-ttl {
    width:40%;
  }
  .cont-top {
    flex-direction:column;
  }
  .cont-item {
    width:100%;
  }
  .cont-item:nth-of-type(2) {
    margin-top:60px;
  }
}
@media screen and (max-width:896px) {
  .service-tab {
    width:100%;
  }
  /*---cont---*/
  .cont-ttl {
    width:50%;
    margin-bottom:30px;
  }
  /*---flow---*/
  .flow-ttl {
    width:35%;
    margin-bottom: 30px;
  }
}
@media screen and (max-width:787px) {
  .service-lead > p br:nth-of-type(2) {
    display:none;
  }
  .service-tab > ul {
    flex-wrap:wrap;
  }
  .service-tab > ul > li {
    width:48%;
  }
  .service-tab > ul > li:nth-of-type(3) {
    margin:30px auto 0 auto;
  }
  .work-img::after, .work-img2::after {
    padding-top: 75.25%;
  }
  .cont-lead {
    width:90%;
  }
  .cont-lead > p {
    text-align:left;
  }
  .cont-lead > p br {
    display:none;
  }
  /*---flow---*/
  .flow-col {
    flex-direction:column;
  }
  .flow-item {
    width:100%;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    justify-content:space-between;
    position:relative;
  }
  .flow-line {
    width:30px;
    display:flex;
    flex-direction:column;
    order:1;
  }
  .flow-line > img {
    width:15px;
  }
  .flow-line::before {
    display:none;
  }
  .flow-line::after {
    display:block;
    content: '';
    flex: 1;
    border-top:none;
    border-left:5px solid #FFDADA;
  }
  .flow-txt {
    width:calc(87.5% - 30px);
    flex:initial;
    padding:0;
    margin:0;
    padding-bottom:20px;
    margin-top:-5px;
    background:none;
    text-align:left;
    border-radius:0;
    order:2;
  }
  .flow-txt::before {
    display:none;
  }
  .flow-txt-en {
    display:flex;
  }
  .flow-txt-en::after {
    display:block;
    content:'';
    flex:1;
    border-top:1px solid #ccc;
    margin-top:12px;
  }
  .flow-txt-en > p {
    display: inline-block;
    width:auto;
    padding:0 24px;
    background:#F4ECEC;
    line-height:1.6;
    border-radius:6px;
    position:relative;
  }
  .flow-txt-en::before {
    content:"";
    position:absolute;
    top:5px;
    left:-13px;
    border:7px solid transparent;
    border-right:12px solid #F4ECEC;
  }

  .flow-txt > p {
    min-height:initial;
    justify-content:flex-start;
    padding-left:10px;
    box-sizing:border-box;
  }
  .flow-txt > p br {
    display:none;
  }
  .flow-img {
    width:12.5%;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    order:3;
  }
  .flow-img > img {
    width:80%;
  }
}
@media screen and (max-width:680px) {
  .service-body {
    width:80%;
  }
  .service-lead {
    width:90%;
    margin:0 auto 30px auto;
    text-align:left;
  }
  .service-tab > ul > li {
    width:100%;
  }
  .service-tab > ul > li:nth-of-type(n+2) {
    margin:40px auto 0 auto;
  }
}
@media screen and (max-width:480px) {
  .service {
    padding:100px 0;
  }
  .service-body {
    width:85%;
  }
  .service-ttl {
    margin-bottom:30px;
  }
  .service-ttl > p {
    font-size:5rem;
  }
  .service-ttl > h2 {
    font-size:1.4rem;
  }
  .service-lead {
    width:100%;
    font-size:1.4rem;
  }
  .service-tab > ul > li:nth-of-type(n+2) {
    margin-top:30px;
  }
  .work3 {
    margin-bottom:100px;
  }
  .work-body,
  .work-body3 {
    width:85%;
  }
  .work-inner, .work2 .work-inner {
    width:100%;
    padding:30px 0 50px 0;
  }
  .work-ttl {
    margin-bottom:20px;
  }
  .work-ttl > h2 {
    font-size:2.6rem;
  }
  .link-btn {
    width:90%;
    margin:0 auto!important;
  }
  .work .work-img,
  .work-img2 {
    clip-path:none;
    margin:0 calc(50% - 50vw);
  }
  .work-img3 {
    width:95%;
    margin-bottom:30px;
  }
  .work-inner3 {
    width:100%;
  }
  .work-list > ul > li {
    width:50%;
  }
  .work-list > ul > li:not(:last-child) {
    margin-right:0;
    margin-bottom:5px;
  }
  /*--cont---*/
  .cont {
    padding:100px 0 0 0;
  }
  .cont-lead {
    width:90%;
    margin-bottom:30px;
  }
  .cont-lead > p {
    font-size:1.4rem;
  }
  .cont-top__lead > p br {
    display:none;
  }
  .cont-ttl {
    width: 70%;
  }
  .cont-item__ttl {
    height:60px;
  }
  .cont-item__ttl > h3 {
    font-size:2.4rem;
  }
  .cont-top__inner {
    padding:0 14px;
  }
  .cont-top__lead {
    font-size:1.6rem;
    padding-bottom:10px;
  }
  .cont-top__inner > dl > dt {
    width:100%;
    padding:8px;
  }
  .cont-top__inner > dl > dd {
    width:100%;
    padding:8px;
  }
  .cont-item:nth-of-type(2) {
    margin-top:24px;
  }
  /*---flow----*/
  .flow {
    padding:60px 0 80px 0;
  }
  .flow-ttl {
    width:55%;
  }
  .flow-txt {
    width:calc(100% - 30px);
    padding-bottom:45px;
  }
  .flow-txt-en {
    font-size:2rem;
  }
  .flow-img {
    width:20%;
    position:absolute;
    top:55%;
    right:0;
    transform:translate(0,-50%);
  }
  .flow-txt > p {
    font-size:1.8rem;
  }
  .flow-txt > p br {
    display:block;
  }
  .cont-tbl__Wrap {
    display: none;
  }
}