@charset "utf-8";
/* ================================================================== */
/* ==============================TOP page============================== */
/* ================================================================== */
.section--topIntroduction {
  display: flex;
  padding: 0 50px 200px 50px;
  flex-direction: column;
  align-items: center;
  gap: 200px;
}


.topIntroduction__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}


.topIntroduction__topics {
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 2.2rem;
  line-height: 30px;
}

.topIntroduction__topics span {
color: var(--primary-Blue);
}

.topIntroduction__topics--sub {
color: var(--primary-Black);
text-align: center;
font-family: Roboto;
font-size: 1.8rem;
font-weight: 300;
line-height: 30px;
}

.topIntroduction__txt {
  margin-top: 50px;
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 1.6rem;
}

.topIntroduction-info__contents {
  width: 20px;
  flex-shrink: 0;
}

.topIntroduction-info__txt {
  text-align: justify;
  font-family: "M PLUS 1p";
  font-size: 1.2rem;
  line-height: 12px;
}

/* ============================== TOP page topabout============================== */
.section--topWork {
  display: flex;
  padding: 100px 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
}

.topWork__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  align-self: stretch;
}

.imgabou__img {
  border-radius: 10px;
  background: lightgray 0px -4.362px / 100% 117.193% no-repeat;
  box-shadow: 4px 4px 4px 0 rgba(37, 37, 37, 0.70);
}

/* ====一部ワークページも混さる==== */
.topWork__topics,
.Work__topics {
  font-family: "M PLUS 1p";
  font-size: 2.2rem;
  line-height: 30px;
}
.topWork__topics--sub {
  line-height: 1.3;
}

.Work__topics span {
  font-size: 1.2rem;
}

.topWork__topics--sub  span{
  font-size: 1.2rem;
}

.workDateilGaiyou__text span {
  font-size: 2.2rem;
  margin-top: -50px;
}

.topWork__txt,
.Work__txt {
  font-family: "M PLUS 1p";
  font-size: 1.6rem;
}

.topWork__txt--sub,
.Work__txt--sub {
  color: var(--primary-Blue);
  font-family: "M PLUS 1p";
  font-size: 1.2rem;
  font-weight: 500;
}

.topWork__contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}

.topWork__item {
  display: flex;
  width: 100%;
  height: auto;
  padding: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.topWork__img {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  aspect-ratio: 248/149;
}

.Work__img {
    display: flex;
  width: 253px;
  height: 152px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  aspect-ratio: 248/149;
}

.topWork__boxtag {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

.topWork__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

.topWork__txtbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* ============================== TOP page topabout============================== */
.section--topAbout {
  display: flex;
  padding: 100px 50px 400px 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
}

.topAbout__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}

.topAbout__contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}

.topAbout__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.topAbout__txtbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.topAbout__txt {
  font-family: "M PLUS 1p";
  font-size: 2.2rem;
}

.topAbout__txt--main {
  font-family: Roboto;
  font-size: 2.4rem;
}

.topAbout__txt--sub {
  font-family: "M PLUS 1p";
  font-size: 1.4rem;
}

/* ============================== TOP page contactAnancs============================== */


.contactAnancs__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 150px;
}



.contactAnancs__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  align-self: stretch;
}


.contactAnancs__txt {
  color: var(--primary-White);
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 1.4rem;
}

.contactAnancs__txt--sub {
  color: var(--primary-White);
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 1.4rem;
}

/* ================================================================== */
/* ==============================Work page============================== */
/* ================================================================== */
.section--Work {
  display: flex;
  padding: 0 50px 400px 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
  align-self: stretch;
}

.Work__contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.Work__item--tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}




/* ========item======= */
.Work__item {
  display: flex;
  width: 293px;
  height: 384px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}


.Work__item {
  display: flex;
  width: 293px;
  height: 384px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.Work__img {
  display: flex;
  width: 253px;
  height: 152px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  aspect-ratio: 248/149;
}

.Work__boxtag {
  display: flex;
  width: 253px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

.Work__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

.Work__txtbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}


/* ================================================================== */
/* ==============================About page============================== */
/* ================================================================== */
/* =========================== About detile =========================== */
.section--about {
  display: flex;
  padding: 0 50px 100px 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
}

.about__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  align-self: stretch;
}

.aboutWho__contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
}

.aboutWho__samuneGallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.aboutWho__samuneGalleryImg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.aboutWho__samuneGallery img,
.aboutWho__samuneGallery video {
  border-radius: 5px;
  cursor: pointer;
  background: lightgray 0px -10.928px / 100% 159.809% no-repeat;
  box-shadow: 4px 4px 4px 0 rgba(37, 37, 37, 0.70);
}

.imgMushi-maru,
.workDateilOverview__img,
.Work__img,
.topWork__img,
.aboutWork__sliderImg {
  border-radius: 5px;
  background: lightgray 0px -10.928px / 100% 159.809% no-repeat;
  box-shadow: 4px 4px 4px 0 rgba(37, 37, 37, 0.70);
}

.imgMushi {
  width: 30%;
}

video {
  width: 100%;
}

#subImga {
  transition: all 0.4s;
}


#subImga:hover {
  transform: scale(1.05);
}

.imgarihi {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(1.20);
  }
  to {
    opacity: 10;
    transform: scale(1);
  }
}

.imgMushi:hover {
  opacity: 1;
}

.imgMushi.active {
  opacity: 0.5;
  border: 3px solid var(--primary-Blue);
}

/* ローディング画面 */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading.show {
    display: flex;
}

.loader {
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--primary-White);
    border-top: 3px solid var(--primary-Blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.aboutSP__contents,
.aboutFea__contents {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    align-self: stretch;
}

.workDateilDP__box {
      display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    align-self: stretch;
}

.aboutWho__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}


.aboutWho__txtbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.aboutWho__txtboxitem--sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* .aboutWho__txtboxitem {
} */



.aboutWho__text {
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 2.2rem;
}

.aboutWho__text--main {
  text-align: center;
  font-family: Roboto;
  font-size: 2.4rem;
}

.aboutWho__txt {
  font-family: "M PLUS 1p";
  font-size: 1.4rem;
}

.aboutWho__snscontents {
  display: flex;
  margin-top: 40px;
  align-items: flex-end;
  gap: 30px;
}

.aboutStory__contents {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.aboutStory__boxPc {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.aboutStory__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  align-self: stretch;
}

.aboutWho__snsItem {
  display: flex;
  width: 30px;
  height: 30px;
  padding-top: 2px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  box-shadow: 3px 3px 0 0 var(--primary-Black);
}

.aboutWho__snsItem:hover {
  box-shadow: none;
}

.aboutStory__txt--sub {
  font-family: "M PLUS 1p";
  font-size: 1.4rem;
}

time {
  font-family: Roboto;
  font-weight: 400;
  font-size: 2rem;
}

.aboutPerspective__contents,
.aboutPerspective__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-content: space-between;
  gap: 40px;
  align-self: stretch;
}

.aboutPerspective__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}

.aboutPerspective__txt {
  font-family: "M PLUS 1p";
  font-size: 2rem;
}

.aboutPerspective__txt--sub {
  font-family: "M PLUS 1p";
  font-size: 1.4rem;
}

.aboutSkill__contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-content: space-between;
  gap: 40px;
  align-self: stretch;
}

.aboutSkill__des {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.aboutSkill__dev {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

.aboutSkill__dev--tagmain {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.aboutSkill__dev--tagsub {
  display: flex;
  align-items: center;
  gap: 44.33px;
}

.aboutSkill__contents img{
  width: 40px;
  height: 42px;
  aspect-ratio: 20/21;
  border-radius: 9px;
  border: 1px solid var(--primary-Black);
  background: url(<path-to-image>) lightgray 9.588px 5.661px / 51.825% 74.23% no-repeat, #3D3D3D;
  box-shadow: 4px 4px 4px 0 rgba(37, 37, 37, 0.70);
}
/* ============================== About Work  ============================== */
.section--aboutWork {
  display: flex;
  padding: 100px 50px 400px 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
  align-self: stretch;
  width: 100%;
}

.aboutWork__container {
  display: flex;
  margin-top: 50px;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  align-self: stretch;
}

.aboutWork__box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.aboutWork__slider {
  width: 99vw;
  margin: calc(50% - 50vw);
  /* margin-right: calc(50% - 50vw); */
}


.aboutWork__sliderImg {
  margin: 0 35px;
  width: 75vw;
}

.aboutWork__txtbox {
  display: flex;
  margin-top: 50px;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  align-self: stretch;
}

.aboutWork__txt,
.aboutWork__txt--sub {
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 1.4rem;
}
/* ================================================================== */
/* ==============================con page============================== */
/* ================================================================== */
.section--contact {
  display: flex;
  padding: 100px 50px 150px 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
}

.contact__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  align-self: stretch;
}

.contact__inputbox {
  display: flex;
  padding-top: 16px;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  align-self: stretch;
}

.contact__parts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact__category {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
}

.contact__category--title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  padding-left: 10px;
  border-left: 5px solid var(--primary-Blue);
}

.contact__title {
  font-family: "M PLUS 1p";
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 100%;
}

.contact__subtitle {
  font-family: Roboto;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 100%;
}

.contact__category--Required {
color: #D53033;
font-family: "M PLUS 1p";
font-size: 1rem;
font-weight: 300;
line-height: 100%;
}

.group {
  display: flex;
  width: 100%;
  height: 50px;
  padding: 5px 11px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  font-size: 1.6rem;
  border-radius: 2px;
  border-bottom: 1px solid var(--primary-Black);
}

.group:hover:active {
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
}

.group--mesg {
  height: 300px;
}

.contact__priv {
  display: flex;
  cursor: pointer;
  margin: 0 auto;
  align-items: center;
  gap: 50px;
}

.contact__priv:hover {
  background-color: #f0f0f0;
}

.group--prv {
  display: flex;
  width: 25px;
  height: 25px;
  justify-content: space-between;
  align-items: center;
  aspect-ratio: 26/25;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid var(--primary-White);
  background: var(--primary-Black);
  box-shadow: 3px 3px 0 0 var(--primary-Black);
  /* appearance: auto;
  -webkit-appearance: auto; */
  opacity: 1;
}

.group--prv[type="checkbox"]:checked {
  position: relative;
}

.group--prv[type="checkbox"]:checked::after {
  display: inline-block;
  content: '';
  width: 15px;
  height: 10px;
  border-left: 3px solid var(--primary-Blue);
  border-bottom: 3px solid var(--primary-Blue);
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}


.checkbox {
  text-align: center;
  font-family: "M PLUS 1p";
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 100%;
}

/* ================================================================== */
/* ==============================conprv page============================== */
/* ================================================================== */
.section--contactPrivPriv {
  display: flex;
  padding: 100px 50px 150px 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
  align-self: stretch;
}

.contactPriv__contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  align-self: stretch;
}

.contactPriv__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}

.contactPriv__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self:stretch;
}

.contactPriv__txt {
  font-family: "M PLUS 1p";
  font-size: 2rem;
}

.contactPriv__txt--sub {
  font-family: "M PLUS 1p";
  font-size: 1.4rem;
}

.contactPriv__txt--con {
  letter-spacing: -1px;
}

.contactPriv__txt--subdeitel {
  margin-top: 30px;
}


/* ================================================================== */
/* ==========================workdetail page========================== */
/* ================================================================== */
.section--workDateil {
  display: flex;
  padding: 0 50px 400px 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
}


.workDateil__contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}

.workDateil__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  align-self: stretch;
}






.workDateilGaiyou__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.workDateilGaiyou__urlbox {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.workDateilGaiyou__contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  align-self: stretch;
}

.workDateilGaiyou__text {
  font-family: "M PLUS 1p";
  font-size: 2.2rem;
}

.workDateilGaiyou__txtbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.workDateilGaiyou__txt {
  font-family: "M PLUS 1p";
  font-size: 1.6rem;
}

.workDateilGaiyou__txtbox small {
  color: var(--primary-Blue);
  font-family: "M PLUS 1p";
  font-size: 12px;
}

.workDateilOverview__contents,
.workDateilCS__contents {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.workDateilIA__contents,
.workDateilProposal__contents,
.workDateilPC__contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}

.workDateilOverview__item,
.workDateilIA__item,
.workDateilCS__item,
.workDateilReviews__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;;
  gap: 30px;
  align-self: stretch;
}

.workDateilOverview__box,
.workDateilIA__box,
.workDateilCS__box,
.workDateilReviews__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  align-self: stretch;
}

.workDateilOverview__topics,
.workDateilIA__topics,
.workDateilCS__topics,
.workDateilReviews__topics {
  font-family: "M PLUS 1p";
  font-size: 2rem;
}


.workDateilOverview__txt,
.workDateilIA__txt,
.workDateilProposal__txt,
.workDateilCS__txt,
.workDateilPC__txt,
.workDateilReviews__txt {
  font-family: "M PLUS 1p";
  font-size: 1.4rem;
}

.workDateilOverview__demo {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.workDateilBtn__contents {
  display: flex;
  width: 100%;
  height: 25px;
  justify-content: space-between;
  align-items: center;
}

.workDateilBtn__btntxt {
  font-family: Roboto;
  font-size: 1.4rem;
}

.workDateilBtn__btnboxright {
  display: flex;
  height: 20px;
  padding: 10px 15px;
  justify-content: center;
  align-items: center;
  gap: 30px;
  border-radius: 50px 150px 150px 50px;
  border: 1px solid var(--primary-White);
  background: var(--primary-Black);
  box-shadow: 3px 3px 0 0 var(--primary-Black);
}

.workDateilBtn__btnboxleft {
  display: flex;
  height: 20px;
  padding: 10px 15px;
  justify-content: center;
  align-items: center;
  gap: 30px;
  border-radius: 150px 50px 50px 150px;
  border: 1px solid var(--primary-White);
  background: var(--primary-Black);
  box-shadow: 3px 3px 0 0 var(--primary-Black);
}
.workDateilBtn__txt {
  color: var(--primary-White);
  font-family: "M PLUS 1p";
  font-size: 1.2rem;
}

.color1 {
  background-color: #FFF9EE;
  border: #121212 0.5px solid;
}

.color2 {
  background-color: #121212;
  color: #fff;
}

.color3 {
  color: #121212;
  background: -webkit-linear-gradient(0deg, #40E0D0, #FF8C00, #FF0080);
}

.color4 {
  color: #121212;
  background-color: #FFFCE8;
  border: #121212 0.5px solid;
}

.color6 {
  color: #141414;
  background-color: #30764E;
}

.color5 {
  color: #fff;
  background-color: #141414;
}

.color5 {
  color: #fff;
  background-color: #141414;
}



.color8 {
  color: #121212;
  background-color: #FFFFFF;
  border: #121212 0.5px solid;
}

.color9 {
  color: #fff;
  background-color: #252525;
}

.color10 {
  color: #fff;
  background-color: #30D5C8;
}

.color11 {
  color: #fff;
  background-color: #439BD7;
}

.color12 {
  color: #fff;
  background-color: #000000;
}

.docswell-iframe-wrapper {
  width: 70vw;
  height: auto;
  /* border-radius: 30px; */
  border: 2px solid #252525;
  box-shadow: 4px 4px 4px 0 rgba(37, 37, 37, 0.70);
}


.btnminiImg {
  display: flex;
  width: 12px;
  height: 12px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 3px;
  background: var(--primary-Blue);
}


.workDateilComp__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    align-self: stretch;
}

.workDateilComp_box {
  margin: 0 auto;
}

.workDateilComp__topics {
    font-family: "M PLUS 1p";
    font-size: 2rem;
}

.workDateilComp__img {
  width: 100%;
  height: auto;
  margin-top: 30px;
  border-radius: 5px;
  background: lightgray 0px -10.928px / 100% 159.809% no-repeat;
  box-shadow: 4px 4px 4px 0 rgba(37, 37, 37, 0.70);
}

/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
@media screen and (min-width: 769px) {
  .section--topIntroduction {
    padding: 250px 200px 150px 200px;
    gap: 150px;
  }

  .section--topAbout {
    padding: 250px 200px 150px 200px;
  }

  .section--topWork {
    padding: 250px 200px 500px 200px;
  }

  .section--Work,
  .section--about,
  .section--workDateil {
    padding: 0 200px 500px 200px;
    gap: 150px;
  }

  .section--contact,
  .section--contactPrivPriv {
    padding: 250px 200px;
    gap: 150px;
  }


  /* ===================================================================== */
  /* ==============================top work=============================== */
  /* ===================================================================== */
  .topWork__container {
    gap: 150px;
  }

  .topIntroduction__topics {
    font-size: 3.8rem;
    line-height: 51px;
  }

  .topIntroduction__topics--sub {
    font-size: 3.0rem;
    line-height: 51px;
  }
  .topIntroduction__item {
    gap: 10px;
  }

  .topIntroduction-info__txt {
  font-size: 1.8rem;
  line-height: 25px;
  letter-spacing: 7px;
  writing-mode:vertical-rl;
  }

  .topWork__item {
    width: 100%;
    height: auto;
    padding: 20px 20px;
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }

  .topWork__boxtag {
    width: 45%;
    height: 276px;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    aspect-ratio: 5/3;
  }

  .topWork__img {
    width: 45%;
    height: auto;
  }

  .topWork__txtbox {
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
  }

  .topWork__topics, .Work__topics {
    font-size: 3.2rem;
  }

  .Work__topics--sugu {
    font-size: 2.8rem;
    line-height: 1.2;
  }

  .topWork__txt, .Work__txt {
    font-size: 1.8rem;
  }

  .topWork__txt--sub, .Work__txt--sub {
    font-size: 1.4rem;
  }

  .topWork__box {
    gap: 30px;
  }

  .topAbout__contents {
    justify-content: space-between;
    align-items: self-end;
    width: 40%;
  }

  .topWork__contents {
    gap: 100px;
  }

  .topAbout__container {
        flex-direction: row;
    width: 100%;
    justify-content: space-between;
  }

  .topAbout__box {
    gap: 30px;
  }

  .imgabou__img {
    width: 40%;
    height: auto;
  }

  .topAbout__txt--main {
    font-size: 2.8rem;
  }

  .topAbout__txtbox p {
    font-size: 2.5rem;
  }


  /* ===================================================================== */
  /* =============================== work ================================ */
  /* ===================================================================== */
  .Work__container {
    width: 100%;
  }

  .Work__contents {

    display: block;
    align-content: space-between;
  }

  .Work__item--tab {
    justify-content: space-between;
    flex-direction: row;
  }

    .Work__item--tab:last-child {
    margin-top: 100px;
  }

  .Work__item {
    width: 500px;
    height: auto;
    padding: 20px;
    gap: 50px;
  }

  .Work__txtbox {
    justify-content: flex-end;
    flex-direction: row;
    gap: 20px;
    align-items: self-end;
  }

  .Work__boxtag {
    width: 100%;
    gap: 50px;
    align-items: end;
  }

  .Work__box {
    gap: 30px;
  }

    .Work__img {
    width: 100%;
    gap: 50px;
    height: auto;
  }

  /* ===================================================================== */
  /* ============================= work datil============================== */
  /* ===================================================================== */
  .workDateil__contents {
    width: 100%;
    flex-direction: row;
    justify-content:space-between;
    align-items: flex-start;
  }

  .workDateilGaiyou__text {
    font-size: 4rem;
  }

  .workDateilGaiyou__text--sub {
    font-size: 2.8rem;
  }

  .workDateilGaiyou__txt {
    font-size: 3rem;
  }

  .workDateilGaiyou__txtbox small {
    font-size: 1.6rem;
  }

  .workDateilGaiyou__item,
  .workDateilOverview__item,
  .workDateilIA__item,
  .workDateilCS__item,
  .workDateilReviews__item {
    gap: 40px;
  }

  .workDateilReviews__contents {
    width: 100%;
  }

  .workDateilOverview__box,
  .workDateilIA__box,
  .workDateilCS__box,
  .workDateilReviews__box {
    gap: 10px;
  }

  .workDateilGaiyou__contents {
    justify-content: space-between;
    align-items: flex-start;
  }

  .workDateilGaiyou__urlbox {
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-between;
  }

  .workDateilGaiyou__urltxt {
    color: var(--primary-Black);
    font-family: "M PLUS 1p";
    font-size: 2rem;
  }

  .workDateil__container,
  .about__container {
    gap: 70px;
  }

  .workDateilOverview__contents,
  .workDateilDP__box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .workDateilOverview__img {
    width: 100%;
    height: autoZ;
  }

  .workDateilOverview__demo {
    width: 44.8%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

  .workDateilIA__item,
  .workDateilOverview__item {
    width: 44.8%;
    justify-content: flex-start;
  }

  .imgMushi-maru,
  .workDateilGaiyou__contents {
    width: 44.8%;
  }

  .workDateilCS__contents {
    width: 44.8%;
    gap: 50px;
  }

  .workDateilCS__contents--sub {
    width: 100%;
  }

  .workDateilCS__name {
    margin: 0 auto;
  }

  .workDateilOverview__topics,
  .workDateilIA__topics,
  .workDateilCS__topics,
  .workDateilReviews__topics {
    font-size: 2.2rem;
  }

  .workDateilOverview__txt,
  .workDateilIA__txt,
  .workDateilProposal__txt,
  .workDateilCS__txt,
  .workDateilPC__txt,
  .workDateilReviews__txt {
    font-size: 1.6rem;
  }

  .workDateilIA__contents {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }



  .workDateilProposal__contents,
  .workDateilPC__contents {
    gap: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
  }

  .workDateilProposal__contents img,
  .workDateilPC__contents img {
    width: 60%;
  }

  .workDateilBtn__contents {
    display: flex;
    padding: 50px 0;
    justify-content: center;
    align-items: center;
    gap: 50px;
    align-self: stretch;
  }

  .workDateilBtn__txt,
  .workDateilBtn__txt {
    font-size: 1.8rem;
  }

  .workDateilBtn__btnboxright,
  .workDateilBtn__btnboxleft {
    height: 30px;
    padding: 10px 50px;
  }

  .btnminiImg {
    width: 20px;
    height: 20px;
  }

  .workDateilBtn__btntxt {
    font-size: 3.5rem;
  }

    .btnminiImg img {
    width: 12px;
    height: auto;
  }


.workDateilComp__item {
  width: 100%;
  flex-direction: row;
}

.workDateilComp_box {
  width: 40%;
}

.workDateilComp__topics {
    font-family: "M PLUS 1p";
    font-size: 2rem;
}

.workDateilComp__img {
  margin-top: 40px;
}

  /* ===================================================================== */
  /* ============================== contact =============================== */
  /* ===================================================================== */
  .contact__container {
    gap: 100px;
  }

  .contact__parts {
    gap: 10px;
    justify-content: space-between;
    flex-direction: row;
  }

  .checkbox {
    font-size: 2rem;
  }

  .group--prv {
    width: 30px;
    height: 30px;
  }

  .contact__category {
    width: 30%;
    align-items: anchor-center;
  }

  .contact__inputbox {
    gap: 60px;
  }

  .group {
    width: 100%;
  }


  .contactPriv__item {
    gap: 20px;
  }

  .contactPriv__txt {
    font-size: 3rem;
  }
  .contactPriv__txt--sub {
    font-size: 2rem;
  }

  .contactPriv__container {
    gap: 100px;
  }
  /* ===================================================================== */
  /* ============================== about =============================== */
  /* ===================================================================== */
  .aboutWho__contents {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
  }

  .aboutWho__samuneGallery {
    width: 45%;
    order: 2;
    justify-content: space-between;
    align-self: stretch;
  }

  .aboutWho__item {
    width: 45%;
    gap: 60px;
    order: 1;
  }

  .imgarihi {
    width: 100%;
    order: 2;
  }

  .aboutWho__snscontents {
    margin-top: 30px;
  }


  .aboutStory__contents,
  .aboutFea__contents,
  .aboutSP__contents {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .aboutStory__boxPc {
    width: 40%;
    justify-content: flex-start;
  }

  .aboutPerspective__contents,
  .aboutSkill__contents {
    width: 40%;
    gap: 50px;
    justify-content: flex-start;
  }

  .aboutPerspective__name {
    margin: 0 auto;
  }

  .aboutSkill__name {
    margin: 0 auto;
  }
  .aboutSkill__contents img {
    width: 80px;
    height: 84px;
  }

  .aboutSkill__dev--tagsub {
    gap: 27.33px;
  }

.aboutWork__sliderImg {
    width: 33vw;
}


.aboutWork__txtbox {
  margin-top: 100px;
}


.aboutWork__container {
  margin-top: 130px;
}

.aboutWork__txt, .aboutWork__txt--sub {
  font-size: 2rem;
}

}