@charset "UTF-8";

/* =======================================================
   company-head
======================================================== */
.company-head {
  display: flex;
  align-items: center;
  margin-bottom: clamp(60px, 7.353vw, 100px)
}
.company-head .catch {
  width: 40%;
  padding-right: 10%;
}
/*************************/
@media screen and (max-width: 991px)
{
  .company-head {
    flex-direction: column;
  }
  .company-head .catch {
    padding-right: 0;
    margin-bottom: 40px;
    width: 300px
  }
}
/*************************/

/* =======================================================
   company-card
======================================================== */
.company-card {
  width: 60%;
  display: flex;
  max-width: 900px;
  border: 1px solid var(--Black);
}
.company-card__left {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.company-card__left img {
  -o-object-fit: contain;
  object-fit: contain;
  max-width: 200px;
}
.company-card__right {
  background: var(--Black);
  width: 70%;
  -webkit-clip-path: polygon(16% 0, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(16% 0, 100% 0%, 100% 100%, 0% 100%);
  padding: 40px clamp(20px,3.125vw,40px) 40px clamp(100px, 10.882vw, 148px);
  color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-left: 100px;
  position: relative;
  right: -1px;
}
.company-card__right .head-text {
  font-size: 1.6rem;
}
/*************************/
@media screen and (max-width: 991px)
{
  .company-card {
    width: calc(100% - 30px);
  }
}
/*************************/
@media screen and (max-width: 649px) {
  .company-card {
    flex-direction: column;
  }
  .company-card__left,
  .company-card__right {
    width: 100%;
  }
  .company-card__right {
    -webkit-clip-path: none;
    clip-path: none;
    padding: clamp(20px, 6.163vw, 40px);
  }
}
/*************************/


/* =======================================================
   c-pledge
======================================================== */
.c-pledge {
  text-align: center;
}
.c-pledge__inr {
  text-align: left;
  display: inline-block;
}

/* =======================================================
   attempt
======================================================== */
.attempt {
  border-top: 1px solid var(--Black);
  padding-top: clamp(30px,4.412vw,100px); /*1360*/
}
.attempt-item {
  display: flex;
  flex-direction: column;
}
.attempt-item + .attempt-item {
  margin-top: clamp(40px,13.021vw,100px); /*768*/
  padding-top: 40px;
  border-top: 1px solid var(--Gray3)
}
.attempt-hdr {
  display: flex;
  margin-bottom: clamp(20px,6.51vw,50px); /*768*/
}
/*************************/
@media screen and (max-width: 767px)
{
  .attempt-hdr {
    flex-direction: column;
  }
}
/*************************/


/*======== attempt-hdr__hd ==========================*/
.attempt-hdr__hd {
  display: flex;
}
/*************************/
@media screen and (min-width: 768px)
{
  .attempt-hdr__hd {
    width: 100px;
    position: relative;
    writing-mode: vertical-rl;
    font-size: 3rem;
    letter-spacing: 5px;
    align-items: center;
    justify-content: center;
  }
  .attempt-hdr__hd::before,
  .attempt-hdr__hd::after {
    rotate: 90deg;
  }
  .attempt-hdr__hd::before {
    content: "";
    display: block;
    width: 30px;
    height: 20px;
    background: url(../images/brackets.svg) no-repeat;
    position: absolute;
    top: 0;
    right: 0;
  }
  .attempt-hdr__hd::after {
    content: "";
    display: block;
    width: 30px;
    height: 20px;
    background: url(../images/brackets.svg) no-repeat;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: rotate(180deg);
  }
}
/*************************/


/*======== attempt-hdr__title ==========================*/

.attempt-hdr__title h1 {
  font-family: var(--Barlow);
  font-size: clamp(44px,7.813vw,60px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  margin-bottom: clamp(10px,2.604vw,20px); /*768*/
}
.attempt-hdr__title h2 {
  font-size: clamp(18px,2.604vw,20px);
}
/*************************/
@media screen and (min-width: 768px)
{
.attempt-hdr__title {
  width: calc(100% - 100px);
  padding-left: clamp(25px,7.353vw,100px); /*1360*/
}
}
/*************************/

/*======== attempt-btm ==========================*/
.attempt-btm {
  display: flex;
}
.attempt-btm__img {
  width: 30%;
}
.attempt-btm__text {
  width: 70%;
  padding-left: clamp(50px,5.882vw,80px); /*1360*/
  line-height: 1.8;
}
/*************************/
@media screen and (max-width: 767px)
{
  .attempt-btm {
    flex-direction: column;
  }
  .attempt-btm__img,
  .attempt-btm__text {
    width: 100%;
  }
  .attempt-btm__text {
    padding-left: 0;
    margin-top: 20px;
  }
}
/*************************/


/* =======================================================
   features
======================================================== */
.features {
  position: relative;
}
/*************************/
@media screen and (max-width: 991px)
{
  .features {
    display: flex;
    flex-direction: column-reverse
  }
}
/*************************/

/*======== features-left ==========================*/
.features-left__item + .features-left__item {
  margin-top: 120px;
}
.features-left h3 {
  font-size: clamp(18px,2.22vw,22px); /*991*/
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1;
}
.features-left h3 span {
  display: inline-block;
}
.features-left h3 .en {
  font-family: var(--Barlow);
  font-size: clamp(24px,3.027vw,30px); /*991*/
  display: inline-block;
  position: relative;
  top: 3px;
  margin-right: 10px;
}
/*************************/
@media screen and (min-width: 992px)
{
  .features-left {
    width: calc(100% - 100px)
  }
    .features-left__item:not(:first-child) {
    width: 70%;
  }
}
/*************************/
@media screen and (max-width: 991px)
{
  .features-left__item + .features-left__item {
    margin-top: clamp(40px,6.054vw,60px); /*991*/
  }
  .features-left h3 {
    line-height: 1.4
  }
}
/*************************/


/*======== features-right ==========================*/

.features-right span {
  position: relative;
  font-size: 3rem;
  letter-spacing: 5px;
  margin-bottom: 40px;
}
  .features-right span::before,
  .features-right span::after {
    rotate: 90deg
  }

/*************************/
@media screen and (min-width: 992px)
{
  .features-right {
    width: 30%;
    position: absolute;
    top: clamp(30px,4.412vw,100px); /*1360*/;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
    .features-right span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    position: relative;
    padding: 30px;
    font-size: 3rem;
    letter-spacing: 5px;
    margin-bottom: 40px;
  }
    .features-right span::before {
    content: "";
    display: block;
    width: 30px;
    height: 20px;
    background: url(../images/brackets.svg) no-repeat;
    position: absolute;
    top: 0;
    right: 0;
  }
  .features-right span::after {
    content: "";
    display: block;
    width: 30px;
    height: 20px;
    background: url(../images/brackets.svg) no-repeat;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: rotate(180deg);
  }
}
/*************************/
@media screen and (max-width: 991px)
{
  .features-right span {
    display: block;
    text-align: center;
  }
  .features-right__img {
    height: 40vh;
    margin-bottom: 40px;
  }
  .features-right__img img {
    height: 100%;
    object-fit: cover;
  }
}
/*************************/


/* =======================================================
   overview
======================================================== */
.overview {
  width: 100%;
  margin: 0 auto 40px;;
  border-collapse: collapse;
}
.overview th, .overview td {
  border-bottom: 1px solid var(--Gray2);
  padding: 20px 0;
}
.overview th {
  text-align: left;
  width: 30%;
}
.overview th span {
  display: inline-block;
}
.overview td {
  width: 70%;
  padding-left: 30px;
}
.overview li + li {
  margin-top: 10px;
}
.overview li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--Black);
  border-radius: 3px;
  position: relative;
  top: -2px;
  margin-right: 10px;
}

.office-block .name {
  background: var(--Gray2);
  padding: 5px 20px;
  font-size: 1.4rem;
  display: inline-block;
}

.office-block .gmap {
  display: inline-block;
  font-size: 1.4rem;
}

.office-block .gmap i {
  display: inline-block;
  margin-right: 3px;
}

.office-block p {
  margin-top: 10px;
}

.office-block p span {
  display: inline-block;
}

.office-block p span.tel {
  margin-right: 30px;
}

.office-block + .office-block {
  margin-top: 40px;
}

/*************************/
@media screen and (max-width: 499px) {
  .overview th, .overview td {
    display: block;
    width: 100%;
    border: none;
  }
  .overview th {
    background: var(--Blue1);
    padding: 10px;
  }
  .overview td {
    padding: 15px 10px 30px;
  }
}
/*************************/

/*======== image-map ==========================*/
.image-map {
  display: flex;
  justify-content: space-between;
}
.image-map__img {
  width: 45%;
}
.image-map__map {
  width: 53%;
}
.image-map__map iframe {
  width: 100%;
  height: 100%;
}
/*************************/
@media screen and (max-width: 699px)
{
  .image-map {
    flex-direction: column;
  }
  .image-map__img,
  .image-map__map {
    width: 100%;
    height: 30vh;
  }
  .image-map__img {
    margin-bottom: 20px;
  }
}
/*************************/