/*
Theme Name: PINETREESTUDIO
Description: PINETREESTUDIOのオリジナルテーマ
Version: 1.0
Author: PINETREESTUDIO
*/

html {
  font-size: 15px;
  color: #535454;
  background: #fff;
}

body {
  color: #535454;
  font-family: 'Noto Sans JP','Helvetica Neue',Arial, Helvetica, sans-serif;
}

a {
  color: #535454;
  text-decoration: none;
  display: block;
}

a:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
}

h1 {
  line-height: 1;
}

li {
  list-style: none;
}

.pc_br {
  display: none;
}

.fadein {
  opacity: 0;
  transform: translateY(50px); /* 下から上へ */
  transition: all 0.8s ease;
}

.fadein.show {
  opacity: 1;
  transform: translateY(0);
}



/* header */
.header {
  width: 100%;
  padding: 20px 10px;
  justify-content: center; 
  align-items: center; 
  display: flex;
  position: fixed;
  z-index: 10;
  background-color: rgba(244,249,240,0.65);
  border-bottom: 2px solid #698458;
}

.header_bg {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap:  clamp(24px, 4vw, 60px);
  padding : 0 20px;
}

/* nav */
.nav {
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  right: -100%;
  transition: 0.5s;
  background: linear-gradient(180deg, #EFF7E9, #DEEAD5);
  padding: 150px  50px 0;
  z-index: 100;
  text-align: center;
}

.nav.open {
  right: 0;
}

.nav_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}


.nav_listlink {
  letter-spacing: 1.2px;
}

.nav_listlink a:hover{
  transition: 0.2s ease-in-out;
  color: #698457;
}


/* hamburger */

.hamburger {
    position: absolute;
    top: 50%;
    right:10%;
    cursor: pointer;
    width: 30px;
    height: 24px;
    z-index: 200;
    transform: translate(-50%,-50%);
}

.hamburger span {
    /*3本の線を作る*/
    transition: all .3s;
    position: absolute;
    height: 2px;
    background-color: #698457;
    width:100%;
    z-index: 10;
}
.hamburger span:nth-of-type(1) {
    /*上の線の位置*/
    top: 4px;
}
.hamburger span:nth-of-type(2) {
    /*真ん中の線の位置*/
    top: 12px;
}
.hamburger span:nth-of-type(3) {
    /*下の線の位置*/
    top: 20px;
}

/* hamburger open */

.hamburger.open span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    top: 10px;
    transform: translateY(6px) rotate(-45deg);
}
.hamburger.open span:nth-of-type(2) {
    /*真ん中の線を消す*/
    opacity: 0;
}
.hamburger.open span:nth-of-type(3) {
    /*下の線を左斜めにする*/
    top: 22px;
    transform: translateY(-6px) rotate(45deg);
}


.logo {
  width: 200px; 
  height: 40px;
}

.mv {
  width: 100%;
  aspect-ratio: 1/1.49;
  margin: 0 auto;
  text-align: center;
  background-image: url(assets/images/sp_bg.png);
  background-position: top center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mv_text {
  color: #fff;
  line-height: 1;
}

.mv_jp {
  font-family: 'Noto Sans JP';
  font-size: clamp(30px, 5vw, 55px);
}

.mv_text_box {
  font-family: 'Noto serif jp';
  font-size: clamp(27px, 4.5vw, 50px);
  padding: 10px;
  border: 2px solid #fff;
  display: inline-block;
}

.mv_text_one {
  font-size: clamp(24px, 4vw, 50px);;
}

.mv_text_business {
  display: inline-block;
  margin-top: 10px;
}

.mv_eng {
  font-family: 'Noto serif jp';
  font-size: clamp(11px, 2vw, 20px);;
  margin-top: 20px;
}

.mv_kerning01 {
  letter-spacing: 0.1em;
}

.mv_kerning02 {
  letter-spacing: -0.13em;
}


.mvimg{
  width: 100%;
  height: auto;
}

/* CTA */
.cta {
  width: 100%;
  padding: 30px 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 50px;
  display: flex;
}

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

.cta_contact_txt,
.cta_store_txt {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1.6px;
}

.arrow_ylw,
.arrow_grn {
  width: 250px;
  height: auto;
  position: absolute;
  top: 15px;
}

.cta_contact_btn,
.cta_store_btn {
  width: 300px;
  height: 60px;
  border-radius: 60px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  margin-top: 25px;
  background-size: 200% 100%;
  overflow: hidden;
  filter: drop-shadow(3px 3px 5px rgba(125, 154, 104, 0.3));
  transition: background-position 0.6s ease;
}

.cta_contact_btn:hover,
.cta_store_btn:hover {
  background-position: 100% 0;
}

.cta_contact_btn {
  background-image: linear-gradient(90deg, #F7D35C 0%, #FFF86A 50%, #FBE563 100%);
}

.cta_store_btn {
  background-image: linear-gradient(90deg, #698457 0%, #7FC67E 50%,#74A56A 100%);
}

.cta_contact_btntxt,
.cta_store_btntxt {
  font-size: 18px;
  font-family: 'Noto Sans JP';
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.9px;
}

.cta_contact_btntxt {
  color: #535454;
}
.cta_store_btntxt {
  color: #fff;
}


/* pinetreestudio */
.bubbles {
  position: absolute;
  width:100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  filter: drop-shadow(0px 0px 5px #fff);
}

.bubble {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: rgba(247, 211, 92, 0.7);
  pointer-events: none;
  transform: translateX(0);
}

.pts_bg {
  padding: 200px 30px;
  position: relative;
}

.pts {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 50px);
  position: relative;
}

.pts_ptimg {
  width: clamp(50px, 10vw, 100px);
  height: auto;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  /*
  transform: translateX(calc(-50% - clamp(130px,37vw,300px)));
  */
}

.pts_ptimg02 {
  width: clamp(50px,25vw,180px);
  height: auto;
  position: absolute;
  bottom: 13%;
  right: 10%;
  /*
  transform: translateX(calc(-50% + clamp(120px,34vw,300px)));
  */
}

.pts_ttl {
  color: #698457;
  font-size: 26px;
  font-family: Tenor Sans;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.pts_txtbox {
  text-align: start;
  max-width: 500px;
}


.pts_txt01,
.pts_txt02 {
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.8px;
}

.pts_txt02 {
  margin-top: clamp(20px,5vw,30px);
}

/* content box */

.service,
.process,
.sample,
.about,
.contact {
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  gap: 60px;
  padding: 100px 30px;
}

.service {
  background: linear-gradient(180deg, #EFF7E9, #DEEAD5);
  border-radius: 0 80px 80px 0;
}

.sample {
  background: linear-gradient(to right, #DEEAD5, #FFFEDC);
  border-radius: 80px 0 0 80px;
}

.contact {
  background: #EBF4E4;
  border-radius: 80px 80px 0 0;
}

/* allcontent h2 title */

.service_engttl,
.process_engttl,
.sample_engttl,
.about_engttl,
.contact_engttl {
  align-self: stretch;
  text-align: center;
  color: #698457;
  font-size: 24px;
  font-family: Tenor Sans;
  font-weight: 400;
  position: relative;
}

.service_jpttl,
.process_jpttl,
.sample_jpttl,
.about_jpttl,
.contact_jpttl {
  align-self: stretch;
  text-align: center;
  color: #698457;
  font-size: 15px;
  font-family: Noto Sans JP;
  font-weight: 400;
  margin: 10px auto 0;
}

/* ttl image */
.service_engttl::before,
.process_engttl::before,
.sample_engttl::before,
.about_engttl::before,
.contact_engttl::before {
  content:'';
  background-position: center;
  background-size: cover;
  width: 50px;
  height: 50px;
  position: absolute;
}

.process_engttl::before,
.about_engttl::before {
  background-image: url(assets/images/ptimg02.png);
  top: 0;
  right: -50%;
}

.about_engttl::before {
  right: -70%;
}

.service_engttl::before,
.sample_engttl::before,
.contact_engttl::before {
  background-image: url(assets/images/ptimg.png);
  top: 0;
  left: -60%;
}

.sample_engttl::before {
  left: -30%;
}

/* service content */ 

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

.service_itembox01,
.service_itembox02 {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  display: flex;
}

.service_bnrbox,
.service_imgbox,
.service_mmbox,
.service_lpbox,
.service_plnbox {
  width: 300px;
  padding: 20px;
  background: white;
  box-shadow: 3px 3px 5px rgba(125, 145, 104, 0.3);
  border-radius: 26px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.service_bnrimg,
.service_imgimg,
.service_mmimg,
.service_lpimg {
  width: 150px;
  height: 150px;
}

.service_bnrtxtbox,
.service_imgtxtbox,
.service_mmtxtbox,
.service_lptxtbox,
.service_plntxtbox {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  display: flex;
}

.service_bnrttlbg,
.service_imgttlbg,
.service_mmttlbg,
.service_lpttlbg,
.service_plnttlbg {
  align-self: stretch;
  background: #698457;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  padding: 8px;
}

.service_bnrttl,
.service_imgttl,
.service_mmttl,
.service_lpttl,
.service_plnttl {
  color: #f9fdfb;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 100%;
}

.service_bnrtxt,
.service_imgtxt,
.service_mmtxt,
.service_lptxt,
.service_plntxt {
  align-self: stretch;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  word-wrap: break-word;
}

/* process */
.process_cnt {
  width: 100%;
  min-width: 300px;
  max-width: 500px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.process_step1,
.process_step2,
.process_step3,
.process_step4 {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.process_step1ttlbox,
.process_step2ttlbox,
.process_step3ttlbox,
.process_step4ttlbox {
  width: 100%;
  /* height: 55px; */
  background: #698457;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
  padding: 15px 0;
}

.process_step1ttlbox::before,
.process_step2ttlbox::before,
.process_step3ttlbox::before {
  content: '';
  position: absolute;
  top:100%;
  left: 50%;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top: 15px solid #698457;
}

.process_step1ttl,
.process_step2ttl,
.process_step3ttl,
.process_step4ttl {
  color: #fff;
  /* font-size: clamp(16px,4.5vw,22px); */
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
}

.process_number {
  font-family: Barlow;
  /* font-size: clamp(20px,6vw,32px); */
  font-size: 24px;
  font-weight: 600;
  color: #F2E161;
  line-height: 1;
  margin-right: 10px;
}

.process_txtbox {
  width:100%;
  padding: 25px 30px;
  text-align: left;
}


.process_step1txt,
.process_step2txt,
.process_step3txt,
.process_step4txt {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.5px;
  word-wrap: break-word;
}

/* process option */

.process_op {
  width: 100%;
  min-width: 300px;
  max-width: 500px;
  padding: 20px 30px;
  border-radius: 17px;
  border: 1px #698457 solid;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  display: flex;
  box-shadow: 0 0 3px rgba(125,154,104,1);
}
.process_op_engttl {
  color: #698457;
  font-size: 24px;
  font-family: Tenor Sans;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-align: center;
}

.process_op_jpttl {
  color: #698457;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-align: center;
  position: relative;
}

.process_op_jpttl::before {
  content: "";
  width: 70px;
  height: 0;
  border: 1px #698457 solid;
  position: absolute;
  left: 50%;
  bottom: -100%;
  transform: translateX(-50%);
}

.process_op_txt {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.process_op_txt02 {
  font-size: 12px;
  line-height: 1.8;
}

/* sample */

.sample_cntbox {
  width: 100%;
  max-width: 500px;
}

.sample_cnt {
  overflow-x: scroll;
  max-width: 500px;
  width: 100%;
  /*
  margin-top: 60px;
  */
  position: relative;
  padding-bottom: 25px;
}

.sample_cnt::-webkit-scrollbar{
  height: 15px;
 /* display: none; */

}
.sample_cnt::-webkit-scrollbar-track{
  background: #c7d6bc;
  border-radius: 10px;
}
.sample_cnt::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #92ac81 0%, #698457 100%);
  border-radius: 10px;
}

.sample_cnt::-webkit-scrollbar-thumb:hover::-webkit-scrollbar-thumb:hover {
  color: #684f4f; 
}

.sample_bartxt {
  width: 100%;
  max-width: 500px;
  color: #698457;
  font-size: 18px;
  font-family: Tenor Sans;
  font-weight: 400;
  margin-top: 10px;
  text-align: left;
}


.sample_list {
  width: max-content;
  display: grid;
  grid-template-rows: repeat(3,150px);
  grid-template-columns: 200px;
  grid-auto-flow: column;
  overflow-y: hidden;
  overflow-x: auto;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}

.sample_a {
  position: relative;
  filter: drop-shadow(1px 1px 2px rgba(68,86,56,0.5));
}

.sample_a:hover {
  opacity: initial;
}

.sample_img {
  width: 200px;
  height: auto;
}

.sample_hov {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:#7d936e;
  color: #fff;
  border-radius: 2px;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.4s ease;
  padding: 15px;
}

.sample_hov:hover {
  opacity: 0.8;
}


/* lightbox */

.lightboxOverlay {
  background-color:  #575757;
}

/* sample txt */

.sample_txtbox {
  width: 100%;
  margin-top: 30px;
  padding-left: 20px;
}

.sample_txt {
  color: #698457;
  font-size: 18px;
  font-family: 'Tenor Sans';
  font-weight: 400;
  position: relative;
  width: fit-content;
  text-align: start;
}

.sample_txt::before {
  content:"";
  width: 100px;
  height: 0px;
  border: 1px #698457 solid;
  position: absolute;
  top: 50%;
  left: 150%;
  transform: translate(-50%,-50%);
}

/* about */

.about_imgcnt {
  flex-shrink:0;
}

.about_img {
  width: 150px;
  height: auto;
  display: block;
}

.about_cnt {
  width: 100%;
  min-width: 300px;
  max-width: 500px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  display: flex;
}

.about_name {
  color: #EBBB1A;
  align-self: stretch;
  text-align: center;
  font-family: barlow;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-top: 10px;
}

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

.about_txt {
  align-self: stretch;
  font-weight: 400;
  line-height: 1.8;
  font-size: 15px;
  word-wrap: break-word;
  letter-spacing: 0.03em;
}

.about_txtmarker {
  background: linear-gradient(transparent 50%  ,  #FFEEA3 30%);
}

.about_skill {
  width: 100%;
  min-width: 300px;
  max-width: 500px;
  margin: 0 auto;
  align-self: stretch;
  padding: 30px;
  border-radius: 20px;
  border: 1px #698457 solid;
}

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

.about_skillttl {
  color: #698457;
  font-weight: 400;
  font-size: 14px;
}

.about_skilltxt {
  align-self: stretch;
  font-weight: 400;
  line-height: 1.8;
  text-align: left;
  font-size: 14px
}

.about_line {
  border: none;
  width: 100%;
  height: 1px;
  background: #698457;
}

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

/* contact */

.contact_form {
  width: 100%;
  max-width: 400px;
}


.contact_form label {
  font-size: 14px;
  color: #698457;
}

.contact_form input,
.contact_form textarea {
  width: 100%;
  border: 1px solid #698457;
  border-radius: 4px;
  padding: 10px;
  font-size: 15px;
  background: #fff;
  margin-top: 5px;
}

.contact_form input::placeholder,
.contact_form textarea::placeholder {
  color: #fff;
}

.contact_form input[type="submit"] {
  width: 300px;
  height: 60px;
  border-radius: 60px;
  justify-content: center;
  align-items: center;
  display: block;
  background-image: linear-gradient(90deg, #F7D35C 0%, #FFF86A 50%, #FBE563 100%);
  color:  #535454;
  font-size: 18px;
  font-family: 'Noto Sans JP';
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.9px;
  border: none;
  margin: 30px auto 0;
  letter-spacing: 0.5em;
  background-size: 200% 100%;
  overflow: hidden;
  filter: drop-shadow(3px 3px 5px rgba(125, 154, 104, 0.3));
  transition: background-position 0.6s ease;
}

.contact_form input[type="submit"]:hover {
  background-position: 100% 0;
}

.wpcf7-spinner {
  display: block;
  margin: 12px auto 0;
}

.contact_form input:focus,
.contact_form textarea:focus {
  outline: none;
  border-color: #f7d35c; /* ボタンと同じ色とか */
}




/* footer */

.footer {
  padding: 20px 0;
  background-color: #698457;
}

.footer_copy {
  color: #fff;
  align-self: stretch;
  text-align: center;
  font-size: 10px;
}

@media (min-width:800px) {

  .pc_br {
    display: initial;
  }


  .header_bg {
    justify-content: center;
  }

  .hamburger {
    display: none;
  }
  .logo {
    width: 100%;
    min-width: 200px;
    max-width: 300px;
    height: auto;
  }

  .nav {
    position: initial;
    background: initial;
    width: fit-content;
    padding: 0;
  }

  .nav_list {
    display: flex;
    flex-direction: row;
    justify-content: initial;
    align-items: center;
    gap: clamp(10px,2vw,30px);
  }

  .nav_listlink {
    padding: 0;
    position: relative;
    font-size: clamp(10px,1.5vw,15px);
    white-space: nowrap;
  }

  .nav_listlink::before {
    content:'';
    background-image: url("assets/images/ptimg_nav.png");
    background-size: cover;
    background-position: center;
    width: 80px;
    height: 10px;
    position: absolute;
    bottom: -85%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    opacity:0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

.nav_listlink:hover::before {
  opacity: 1;
}

.mv {
  background-image: url(assets/images/pc_bg.png);
  aspect-ratio: 1.87/1;
}

.mv_text  {
  text-align: left;
  transform: translateX(clamp(-200px, calc(-12.5vw - 20px), -120px));
}

.mv_text_business {
  margin-top: 20px;
}

.mv_eng {
  margin-top: 30px;
}

.cta {
  flex-direction: row;
  justify-content: center;
  gap:clamp(40px,12vw,200px);
  padding: 50px 10px 80px;
}

.pts {
  padding: 100px 0;
  max-width: 1200px;
  margin:  0 auto;
}

.pts_bg {
  padding: 100px 80px 200px;
}

.pts_ttl {
  font-size: 45px;
}

.pts_ptimg {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(calc(-50% - clamp(230px,33vw,350px)),calc(-50% - 100px));
}

.pts_ptimg02 {
  position: absolute;
  bottom: 20%;
  right: initial;
  left: 50%;
  transform: translatex(calc(-50% + clamp(200px, 30vw,400px)));
}

.pts_txtbox {
  text-align: center;
  max-width: 650px;
  padding: 0 20px;
}

.pts_txt01, .pts_txt02 {
  font-size: clamp(14px, 2vw, 17px);
}

/* service */

.service, .process, .sample, .about, .contact {
  padding: 150px 20px;
  gap: 80px;
}

.service{
  border-radius: 0 200px 200px 0;
}

.service_engttl,.process_engttl,
.sample_engttl,.about_engttl,
.contact_engttl {
  font-size: 36px;
}

.service_cnt {
  max-width: 800px;
  margin: 0 auto;
}

.service_engttl::before, .process_engttl::before, 
.sample_engttl::before, .about_engttl::before, 
.contact_engttl::before {
  width: 80px;
  height: 80px;
}

.service_itembox01, .service_itembox02 {
  flex-direction: row;
  align-items: stretch;
}

.service_bnrbox, .service_imgbox, .service_mmbox, .service_lpbox, .service_plnbox {
  width: 100%;
  max-width: 380px;
  padding: 20px 40px 40px;
}

.service_bnrttl, .service_imgttl, .service_mmttl, .service_lpttl, .service_plnttl {
  font-size: 20px;
  line-height: 1;
}

.service_bnrtxt,.service_imgtxt, .service_mmtxt, .service_lptxt{
  width: 280px;
  margin: 0 auto;
}

.service_plnbox {
  width: 100%;
  max-width: initial;
}

.service_plnttlbg {
  width: 380px;
  margin: 0 auto;
}
.service_plntxt {
  text-align: center;
  width: 500px;
  margin: 0 auto;
}

/* process */

.process_step1::before, .process_step2::before,
.process_step3::before {
  width: 10px;
  height: 60px;
}

.process_cnt {
  max-width: 600px;
}

.process_txtbox {
  padding: 35px 30px;
  text-align: center;
}

.process_number {
  font-size: 28px;
}

.process_step1ttl, .process_step2ttl, .process_step3ttl, .process_step4ttl {
  font-size: 20px;
}

.process_step1txt, .process_step2txt, .process_step3txt, .process_step4txt {
  line-height: 1.8;
}

.process_op {
  max-width: 600px;
  flex-direction: row;
}

.process_op_jpttl {
  white-space: nowrap;
}

.process_op_jpttl::before {
  transform: rotate(90deg);
  top: 0;
  left: 85%;
  border: 1px #a7ba9b solid;
}

/* sample */

.sample {
  border-radius: 200px 0 0 200px;
}

.sample_list {
  grid-template-rows: repeat(3,150px);
  grid-template-columns: 200px;
}

.sample_cntbox {
  max-width: 650px;
}

.sample_cnt {
  max-width: 650px;
}

.sample_img {
  width: 200px;
}

.sample_bartxt  {
  max-width: 650px;
}

/* about */


.about_cnt {
  max-width: 630px;
  flex-direction: row;
  gap: initial;
}

.about_img {
  width: 170px;
}

.about_txtbox {
  max-width: 400px;
}

.about_skill {
  max-width: 630px;
}

.about_skilltxtbox {
  flex-direction: row;
  justify-content: center;
  gap: initial;
}

.about_skillttl {
  white-space: nowrap;
  position: relative;
}

/*
.about_skillttl::before {
  content:'';
  width: 30px;
  height: 0;
  border: 1px #a7ba9b solid;
  position: absolute;
  top: 50%;
  left: 105%;
  transform: rotate(90deg);
}

*/

.about_skilltxt {
  text-align: center;
}

.about_line {
  width: 50px;
  transform: rotate(90deg);
}

.contact {
  border-radius: 200px 200px 0 0 ;
}

.contact_form {
  width: 500px;
  max-width: 700px;
}


}