@charset "utf-8";
/*
Theme Name: KAKEHASHI STYLE ORIGINAL THEME - KKSHサイト -
Description: テーマの説明
Author: KAKEHASHI STYLE
Version: ver000
*/

/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Josefin+Sans:wght@100..700&family=M+PLUS+1:wght@100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

/*
font-family: 'Josefin Sans', sans-serif; 100 to 700
font-family: "M PLUS 1", sans-serif; 100(T) 200(EL) 300(L) 400(R) 500(M) 600(SB) 700(B) 900(BK)
font-family: "Caveat", cursive;400 500 600 700
color: #3A5E29;メインカラー濃緑
color: #B7C800;サブカラー　黄緑
color: #031D44;濃紺
color: #f2f2f2;グレー
color: #F08700;オレンジ
color: #FFD447;黄
color: #414141;黒

h1 36px 2.25rem
h2 32px 2rem
h3 22px 1.375rem
p  16px

*/
body {
  font-family: "M PLUS 1", sans-serif !important;
  line-height: clamp(1.8rem, 1.709rem + 0.39vw, 2rem) !important;
  letter-spacing: 0.09rem;
  min-height: 75rem;
}

html {
  font-size: 16px;
  color: #414141 !important;
  font-weight: 300;
}

p {
  color: #414141;
  line-height: 1.75;
  font-size: 1rem;
  text-align: justify;
  text-justify: inter-ideograph;
  letter-spacing: 0.02rem;
  margin-bottom: 0.5rem;
}

/* heading設定 */
h2 {
  position: relative;
  color: #031D44;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 5rem;
}

h3 {
  margin-bottom: 2rem;
  color: #031D44;
  line-height: 1.5;
  font-size: 1.4rem;
}

h4 {
  margin-bottom: 2rem;
  color: #031D44;
  font-size: 1.4rem;
  line-height: 1.3;
}

h5 {
  margin-bottom: 2rem;
  color: #031D44;
  line-height: 1.3;
}

h6 {
  margin-bottom: 2rem;
  color: #031D44;
  line-height: 1.3;
}


/*非表示設定*/
@media(min-width:993px) {
  .sp {
    display: none !important;
  }
}

@media screen and (max-width: 992px) {

  .pc {
    display: none !important;
  }
}

img {
  max-width: 100%;
  height: auto;
  width: 100%;
}

/*縮小幅*/
.w-900 {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/*------------------------------------
 マージン
------------------------------------*/

.mb6 {
  margin-bottom: 6rem;
}

.mb10 {
  margin-bottom: 10rem;
}

.mb15 {
  margin-bottom: 15rem;
}

.px1_05 {
  padding: 0 1.5rem;
}

.px_10 {
  padding-left: 10rem;
  padding-right: 10rem;
}

.mx_10 {
  margin-left: 10rem;
  margin-right: 10rem;
}

.pb6 {
  padding-bottom: 6rem;
}

.pt_505 {
  padding-top: 5.5rem;
}

.pt_6 {
  padding-top: 6rem;
}

.p-6 {
  padding: 6rem;
}

.pb {
  padding-bottom: clamp(5rem, -6.923rem + 19.23vw, 7.5rem);
}

.mb {
  margin-bottom: clamp(5rem, -6.923rem + 19.23vw, 7.5rem);
}

/*------------------------------------
 リンク
------------------------------------*/
/*リンク指定*/
a {
  color: #008171;
  text-decoration: none;
}

a:hover {
  color: #006837;
  text-decoration: underline;
}

/*------------------------------------
 blockquote
------------------------------------*/
blockquote {
  position: relative;
  padding: 30px 30px 25px 52px;
  color: #fff666;
  background: #f7f7f7;
  width: 90%;
  margin: 40px auto;
}

blockquote:before {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 5px;
  vertical-align: middle;
  content: "\F6B0";
  font-family: bootstrap-icons;
  color: #ffffff;
  font-size: 1.3rem;
  line-height: 1.75;
  z-index: 2;
}

blockquote:after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  border-width: 0 0 50px 50px;
  border-style: solid;
  border-color: transparent #B7C800;
}

blockquote p {
  position: relative;
  padding: 0;
  margin: 20px 0 10px;
  font-size: 0.9rem;
  font-style: italic;

}


/*------------------------------------
 ナビ
------------------------------------*/
/*ナビゲーション*/
.navbar {
  padding: 0 0.8rem;
}

nav h1 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  line-height: 1;
  font-size: 1rem;
}

nav h1 img {
  max-width: 17.5rem;

}

.navbar-brand {
  display: inline-block;
}

nav {
  text-align: start;
  margin: 1rem;
}

nav p {
  font-size: clamp(0.625rem, 0.421rem + 0.33vw, 0.75rem);
  line-height: 1.2rem;
  margin: 0;
  padding: 0 0.8rem 0 0;

}

.nav a {
  display: inline-block;
  color: #414141;
  font-size: clamp(0.9rem, 0.737rem + 0.26vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.02rem;
}

.nav :hover {
  color: #414141;
  text-decoration: none;
}

.navbar-nav li {
  padding-left: 1rem;
}


/*リンクホバーライン*/
.navline {
  padding-bottom: 5px;
  position: relative;
}

.navline::before {
  background: #3A5E29;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

.navline:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.nav_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 1rem;
  padding: 0.2rem 1rem;
  border-radius: 5px;
  background-color: #3A5E29;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.08rem;
}

.nav_btn:hover {
  text-decoration: none;
  background-color: #B7C800;
  color: #3A5E29;
}

/*ドロップダウン*/
.dropdown-menu {
  border: none;
  background-color: rgba(176, 201, 23, 0.6);
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu li a {
  font-size: 0.9rem;
  font-weight: 500;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown-item:hover {
  background-color: #fff;
  color: #3A5E29;
  text-decoration: none;
}

/*ナビゲーションアイコン*/
.icn-grn i {
  color: #3A5E29;
  margin-right: 8px;
  font-size: 1.1rem;
}

.icn-grn a {
  color: #3A5E29;
}

.icn-grn a:hover i {
  color: #B7C800;
}

@media screen and (max-width: 992px) {
  nav {
    text-align: center;
  }



  .nav_btn {
    margin: 2rem 1rem;
  }
}

/*------------------------------------
 トップページ
------------------------------------*/
/*上はみ出しタイトル*/
.up_title {
  position: relative;
  padding-bottom: 4rem;
}

.title {
  top: -180px;
  position: absolute;
}

.title span {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 500;
  color: #031D44;
  /*文字色*/
  font-size: 6rem;


}

.title h2 {
  text-align: left;
  color: #031D44;
  /*文字色*/
  font-size: 2.5rem;
}


/*上はみ出しなしタイトル*/
.title02 {
  position: relative;
}

.title02 span {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 500;
  color: #031D44;
  /*文字色*/
  font-size: 6rem;
}

.title02 h2 {
  text-align: left;
  color: #031D44;
  /*文字色*/
  font-size: 2.5rem;
}

/*上はみ出しなしタイトル中央揃え*/
.title02center {
  position: relative;
  padding-bottom: 0;
  text-align: center;
}

.title02center span {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 500;
  color: #031D44;
  /*文字色*/
  font-size: 6rem;
}

.title02center h2 {
  color: #031D44;
  /*文字色*/
  font-size: 2.5rem;
}

#top h3 {
  color: #011F4B;
  font-size: clamp(1.25rem, 0.966rem + 1.21vw, 1.875rem);
}

/*こんなお悩み*/
.theme_title {
  background-color: #30C6D7;
  aspect-ratio: 1 / 1;
  /* 正円維持 */
  width: clamp(80%, 30vw, 400px);
  /* 最小200px、最大400pxで可変 */
  border-radius: 50%;
  padding: 30px;
  text-align: center;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* タイトル部分（そのままでOK） */
.theme_title h2 {
  margin: 0 0 60px 0;
  color: #fff;
  font-size: clamp(1.875rem, 0.764rem + 2.31vw, 2.5rem);
  font-weight: 400;
  position: relative;
}

.theme_title h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  width: 50px;
  height: 8px;
  border-radius: 10px;
  background-color: #fff;
}

.theme_title .en {
  margin: 0;
  color: #FFF600;
  font-size: clamp(1.25rem, 0.966rem + 1.21vw, 1.875rem);
  font-weight: 500;
  letter-spacing: 1px;
}


.themebox {
  height: 100%;
  border-radius: 10px;
  background-color: #fff;
  border: #119E36 1px solid;
  padding: clamp(1.25rem, 0.824rem + 1.82vw, 2.188rem);
  margin: 0 auto;

}

.themebox img {
  max-width: 180px;
  margin-bottom: 0.625rem;
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.themebox h3 {
  margin-bottom: 1.25rem;
  text-align: center;

}

.themebox h4 {
  margin-bottom: 0.625rem;
  color: #119E36;
  font-size: clamp(1.125rem, 1.068rem + 0.24vw, 1.25rem);
  line-height: 1.4;
  text-align: left;
  text-align: justify;
  text-justify: inter-ideograph;
}

.themebox p {
  margin-bottom: 0;
  padding-bottom: 0;
  text-align: left;

}

.themetxt h3 {
  margin: clamp(5rem, 4.432rem + 2.42vw, 6.25rem) 0 clamp(1.25rem, 0.682rem + 2.42vw, 2.5rem);
  text-align: center;
}

.themetxt p {
  padding: 0 clamp(1rem, -6.5rem + 32vw, 17.5rem);
}

.themetxt img {
  margin-top: 40px;
  border-radius: 10px;
}

/*私たちのらしさ3つ*/
.box_vertical {
  background-color: #fff;
  margin: 5rem 0;
  padding: 2rem 5rem 3rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.box_vertical .number {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 6.25rem;
  color: #119E36;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: start;
  border-right: #119E36 1px solid;
  padding: 3rem 0;
}

main#top .box_vertical h3 {
  color: #119E36;
}


.box_vertical h3,
.box_vertical p {
  padding: 0 2rem;
  text-align: start;
}


@media screen and (max-width: 992px) {
  .box_vertical {
    padding: 1rem;
  }

  .box_vertical .number {
    border-right: none;
    align-items: center;

  }

  .box_vertical h3 {
    text-align: center;
    padding-top: 5rem;
  }

  .box_vertical h3,
  .box_vertical p {
    padding: 0;
    text-align: start;

  }

}


/*3つのXX*/
.box_horizontal {
  background-color: #fff;
  padding: 2rem 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

#top .box_horizontal h4 {
  font-size: 1.5rem;
  letter-spacing: -0.01rem;
  color: #3A5E29;
  text-align: center;
  min-height: calc(1.5em * 2.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

#top .box_horizontal h5 {
  font-size: clamp(1.125rem, 1.068rem + 0.24vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01rem;
  color: #011F4B;
  min-height: calc(1.2em * 2);
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}

#top .box_horizontal.box_q p {
  text-align: start;
}

#top .box_horizontal p {
  margin-bottom: 1.5rem;
  flex-grow: 1;
  min-height: 4em;
}

#top .box_horizontal ul {
  padding: 0.5rem;
  list-style: disc;
  list-style-position: inside;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

/* ボタンを下端に配置 */
#top .box_horizontal .btn_bk {
  margin-top: auto;
  width: 100%;
  flex-shrink: 0;
}

/*数字見出し*/
.box_number {
  display: block;
  position: relative;
  font-size: 1.2rem;
  text-align: center;
  padding: 2rem 0;
  color: #3A5E29;
  flex-shrink: 0;

}

.box_number::before {
  content: attr(data-number);
  display: block;
  margin-bottom: 10px;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 6.25rem;
}




/* レスポンシブ対応 */
@media (max-width: 992px) {
  #top .box_horizontal h4 {
    min-height: auto;
  }

  #top .box_horizontal h5 {
    min-height: auto;
  }

  #top .box_horizontal p {
    min-height: auto;
  }
}

/*製作実績*/
.t_works {
  padding-bottom: clamp(5rem, 3.864rem + 4.85vw, 7.5rem);

}

.t_works h4 {
  color: #119E36;
  font-size: clamp(1.25rem, 0.966rem + 1.21vw, 1.875rem);
  line-height: 1.4;
  margin-bottom: clamp(1.25rem, 0.682rem + 2.42vw, 2.5rem);
}

.t_works h5 {
  color: #011F4B;
  font-size: clamp(1.125rem, 1.068rem + 0.24vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
}


.scroll_works h6 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #011F4B;
  font-size: clamp(1.25rem, 1.136rem + 0.48vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 3rem;
}

.scroll_works h6::before,
.scroll_works h6::after {
  content: '';
  width: 90px;
  height: 3px;
  background-color: #011F4B;
}

.scroll_works h6::before {
  margin-right: 20px;
}

.scroll_works h6::after {
  margin-left: 20px;
}



@media screen and (max-width: 992px) {
  .title {
    top: -140px;
  }

  .title span {
    font-size: 4rem;
    line-height: 4rem;

  }

  .title h2 {
    font-size: 2rem;
    line-height: 1.6;
  }


  .title02 span {
    font-size: 4rem;
    line-height: 1;
  }

  .title02 h2 {
    font-size: 2rem;
  }

  .title02center span {
    font-size: 4rem;
    line-height: 6rem;
  }

  .title02center h2 {
    font-size: 2rem;
  }

  .scroll_works h3::before, .scroll_works h3::after {
    content: none;
  }
}

/*無料ダウンロード*/
/* 斜めカット背景セクション */
.download {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  margin-top: 5rem;
  background: url("../images/bg_gl.png") left top no-repeat;
}

.download::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  /* 右寄せ */
  width: 60vw;
  height: 100%;
  background-image: url("../images/kh_book.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: -1;
}

.dl_txt {
  max-width: 22vw;
  margin-bottom: clamp(1.875rem, 1.023rem + 3.64vw, 3.75rem);
  width: 100%;
  box-sizing: border-box;
}

/* モバイル時 */
@media (max-width: 768px) {
  .download {
    overflow: visible;
  }

  .dl_txt {
    max-width: 100%;
  }

  .download::after {
    position: relative;
    display: block;
    width: 100%;
    height: 200px;
    clip-path: none;
    margin-top: 2rem;
    z-index: 0;
  }
}


#top .dl_txt h3 {
  color: #119E36;
  font-size: clamp(1.25rem, 0.966rem + 1.21vw, 1.875rem);
  line-height: 1.4;
  margin-bottom: clamp(1.25rem, 0.682rem + 2.42vw, 2.5rem);
}

#top .dl_txt span {
  display: inline-block;
  margin-top: 2rem;
  padding: 0 2rem;
  background-color: #52BD00;
  color: #fff;
  font-weight: 500;
  border-radius: 100vh;

}

#top .dl_txt ul {
  padding: 0.5rem;
  list-style: disc;
  list-style-position: inside;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

.pickup_blog {
  margin-top: 5rem;
}

.pickup_btn {
  display: inline-block;
  transition: transform 0.3s ease;
  text-decoration: none;

}

a.pickup_btn:hover {
  transform: translateY(5px);

}

.pickup_btn img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

a.pickup_btn:hover img {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/*3つのXX*/
main#page .box_q {
  background-color: #fff;
  margin: 5rem 0;
  padding: 2rem 5rem 3rem;
}

main#page .number {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 9rem;
  color: #3A5E29;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
  padding-top: 3rem;
}

main#page .box_q h3 {
  padding-top: 2rem;
  color: #3A5E29;
}


main#page .box_q h3,
main#page .box_q p {
  text-align: start;
}

@media screen and (max-width: 992px) {
  main#page .box_q {
    padding: 2rem;
  }

  main#page .box_q h3 {
    text-align: center;
    padding-top: 5rem;
  }
}

.nonstop {
  background-color: #3A5E29;
  color: #fff;
  padding: 3rem 1rem 1rem;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 5rem;
}

.nonstop h3 {
  color: #fff;
}

@media screen and (max-width: 992px) {
  .nonstop {
    margin-bottom: 2rem;
  }
}


.designM {
  background: url("../images/bg_yel.png")center top no-repeat;
}

/*.designM {
  background: url("../images/bg_yel.png")center top no-repeat;
}

.designM .bigt {
  font-family: "Caveat", cursive;
  color: #fff;
  font-size: 7rem;
  line-height: 10rem;
  font-weight: 700;
  transform: rotate(-10deg);
  margin: 5rem 0;
}

.designM h2 {
  text-align: start;
}


@media screen and (max-width: 992px) {
  section.mission {
    margin-top: 8rem;
  }

  .missiontextarea {
    padding: 0 1rem;
    margin-bottom: 15rem;
  }

  .designM h2 {
    margin-bottom: 2rem;
  }

  .designM .bigt {
    font-size: 5rem;
    line-height: 5rem;
    margin: 5rem 0;
  }
}
*/

/*------------------------------------
 TOP スクロール
------------------------------------*/
/*スクロール右へ*/
.marquee-left {
  display: flex;
  overflow: hidden;

}

.marquee-left ul {
  animation: marquee-left 90s linear infinite;
  display: flex;
  margin: 0;
  padding: 0;
  width: max-content;
}

.marquee-left ul li {
  list-style: none;
  padding: 0.5rem 0;
  width: calc(100vw / 5);
}

.marquee-left img {
  display: block;
  width: 100%;
  height: auto;

}

@keyframes marquee-left {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0%);
  }
}



/*スクロール左へ*/
.marquee-right {
  overflow: hidden;
}

.marquee-right ul {
  animation: marquee-right 60s linear infinite;
  display: flex;
  margin: 0;
  padding: 0;
  width: max-content;
}

.marquee-right ul li {
  list-style: none;
  padding: 2rem;
  width: calc(100vw / 6);
}

.marquee-right img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes marquee-right {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-50%);
  }
}


@media screen and (max-width: 992px) {
  .marquee-left ul li {
    width: calc(100vw / 2);
  }

  .marquee-right ul li {
    list-style: none;
    padding: 1rem 0.5rem;
    width: calc(100vw / 4);
  }
}



/*------------------------------------
 文字
------------------------------------*/
/* title左指定 */
.l_title h2,
.l_title h3 {
  text-align: left;
}

/*下LINE付きh3とかに*/
.line {
  display: block;
  text-align: center;
  position: relative;
  color: #414141;
  font-size: 1.3rem;
  letter-spacing: 0.2rem;
  margin-bottom: 80px;
}

.line:before {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background-color: #3A5E29;
}

/* subtitle設定 */
.sub-t {
  font-family: 'Josefin Sans', sans-serif;
  margin-bottom: 5px;
  color: #031D44;
  /*文字色*/
  font-size: 2.1875rem;
}

/*見出し下アイコン*/
.hd {
  display: flex;
  justify-content: center;
  margin-bottom: 7rem;
}

/*3ドット*/
.dot {
  display: flex;
  margin: 10px 0 40px 0;
  justify-content: center;
  color: #13589C;
  font-size: 2rem;
}

/*文字色*/
.tex_blu {
  color: #13589C !important;
}

/*数字見出し*/
.h_number {
  position: relative;
  font-size: 1.2rem;
  text-align: center;
}

.h_number::before {
  content: attr(data-number);
  display: block;
  margin-bottom: 50px;
  color: #3A5E29;
  font-size: 3rem;
}

.h_number::after {
  content: '';
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 30px;
  background-color: #3A5E29;
}

h6.h_number {
  color: #3A5E29;
}

/*------------------------------------
 box
------------------------------------*/
.textarea {
  padding: 0 clamp(1rem, -51.462rem + 84.62vw, 12rem);
  margin-bottom: 6rem;
}


.box {
  background-color: #fff;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 3rem 2rem 0.5rem 2rem;
  transition: box-shadow 0.2s ease-in-out;
  margin-bottom: 20px;
}

.box p {
  text-align: start;
}

/*box白左右margin10rem*/
.box_mx10 {
  background-color: #fff;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 5rem 2rem 0.5rem 2rem;
  transition: box-shadow 0.2s ease-in-out;
  margin: 0 10rem 5rem;
}

@media screen and (max-width: 992px) {
  .box_mx10 {
    margin: 0 0 20px;
  }
}

/*角丸枠*/
.gr-box {
  font-size: 1rem;
  background-color: #fff;
  border-radius: 10px;
  /*角丸*/
  border: #006837 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  margin: 0.5rem;
  height: 6rem;
  font-weight: bold;
  color: #006837;

}

/*------------------------------------
 リスト
------------------------------------*/
/* リストスタイルなし */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* リストスタイルノーマル */
ul.normal {
  list-style-type: disc;
}



/*------------------------------------
 背景色
------------------------------------*/
/*背景 青みグレー*/
.gray {
  background: #f2f2f2;
}

/*背景 黄色*/
.yel {
  background-color: #FFD447;
}

/*背景 黄緑色*/
.ygrn {
  background-color: #B7C800;
}

/*コーポレートカラー*/
.cpc {
  background: #3A5E29;
  color: #fff;
}

.cpc h2,
.cpc h3 {
  color: #fff;
}

/*青*/
.blue {
  background: #031D44;
  color: #fff;
}

.white {
  background: #fff;
}

/*------------------------------------
 セクション
------------------------------------*/
section {
  padding: clamp(5rem, 0.556rem + 9.26vw, 7.5rem) 0 clamp(5rem, 0.556rem + 9.26vw, 7.5rem);
}

/*下層セクションパディング
#page section {
  padding: clamp(3.75rem, -14.135rem + 28.85vw, 7.5rem) 0;
}*/


/*背景画像triangle*/
.tri-scl {
  background: url("../images/bg_wl.png")left top #f2f2f2 no-repeat;
}

.tri-scr {
  background: url("../images/bg_wr.png")right top #f2f2f2 no-repeat;
}

.tri-scgl {
  background: url("../images/bg_gl.png")left top no-repeat;
}

.tri-scgr {
  background: url("../images/bg_gr.png")right top no-repeat;
}

/*下▼セクション*/
.triangle {
  background-color: #E4EDF1;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0%);
}

/*------------------------------------
 HEROセクション
------------------------------------*/
/* ヒーロー画像 */
.hero-image {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top -12rem right;
  height: auto;
  position: relative;
  background-image: url("../images/hero.png");
  padding-bottom: clamp(0rem, -13.333rem + 27.78vw, 7.5rem);
}

.hero-text {
  position: relative;
  width: 900px;
  top: 7.5rem;
  padding: 2rem 2rem 7.5rem 2rem;
}

.hero-text h2 {
  position: static;
  text-align: left;
  font-weight: 500;
  font-size: clamp(1.25rem, 0.682rem + 2.42vw, 2.5rem);
  line-height: 1.5;
  color: #031D44;
  margin-bottom: 3rem;
}

.hero-text p {
  font-size: clamp(1rem, 0.886rem + 0.48vw, 1.25rem);
  font-weight: 400;
}

.herobox {
  padding: 3rem 2rem clamp(5rem, -18.846rem + 38.46vw, 10rem) 2rem;
}

.innerbox {
  background-color: #fff;
  height: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem 2rem 0.5rem 2rem;

}


.herobox h3 {
  text-align: center;
  background-color: #011f4b;
  color: #fff;
  padding: 0.5rem;
  margin-bottom: 4rem;
}

.herobox h4 {
  text-align: center;
}

.herobox img {
  margin: 1rem auto 2rem auto;
  display: block;
}

.r_up-tri {
  background-image: linear-gradient(-135deg, #FFC627 25px, transparent 0);
}


.herobox p span {
  background-color: #FFC627;
  font-weight: 600;
  padding: 0.5rem;

}


@media screen and (max-width: 992px) {
  .hero-image {
    background-position: top -5rem right;
  }

  .hero-text {
    width: 100%;
    top: 50px;
    padding: 2rem;
  }

  .hero-text h2 {
    font-size: 1.6rem;
    line-height: 2.6rem;
    margin-bottom: 3rem;

  }

  .hero-text br {
    display: none;

  }


  .hero-text span {
    font-size: 1.3rem;
    line-height: 2rem;
    padding-bottom: 1rem;
  }


}

/* page mv 画像 BK20250219
.page-hero-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 400px;
  margin-bottom: 100px;
  position: relative;

}

.page-hero-text {
  padding-top: 8rem;
}

.page-hero-text h2 {
  position: static;
  text-align: left;
  color: #031D44;
  font-size: 2.5rem;
  letter-spacing: 0.3rem;
  padding: 1rem 0;
  margin-bottom: 0;
}


.page-hero-text span {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 500;
  color: #031D44;
  font-size: 6rem;
}
*/

/* page mv 画像 */
.page-hero-image {
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  padding-bottom: 80px;
  position: relative;

}

.page-hero-text {
  padding-top: 8rem;
}

.page-hero-text h2 {
  position: static;
  text-align: left;
  color: #031D44;
  font-size: 2.5rem;
  letter-spacing: 0.3rem;
  margin-bottom: 0;
}


.page-hero-text span {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 500;
  color: #031D44;
  font-size: 6rem;
}

@media screen and (max-width: 1200px) {
  .page-hero-text h2 {
    font-size: 2.25rem;
    line-height: 4rem;
    letter-spacing: 0.3rem;
  }
}

@media screen and (max-width: 992px) {
  .page-hero-image {
    height: auto;
    padding-bottom: 40px;
  }

  .page-hero-text {
    padding-top: 3rem;
  }

  .page-hero-text h2 {
    text-align: center;
    width: 100%;
    bottom: -20px;
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    line-height: 3rem;
  }

  .page-hero-text span {
    display: block;
    text-align: center;
    font-size: 3rem;
  }

}

/*コンセプトエリア*/
.concept h2 {
  text-align: left;
}

/*------------------------------------
 画像
------------------------------------*/
/*セクション画像左はみ出し*/
.sc-imgleft {
  margin-left: calc(50% - 50vw);
}

/*セクション画像右はみ出し*/
.sc-imgright {
  margin-right: calc(50% - 50vw);
}

/*セクション画像全面はみ出し*/
.sc_imgfull {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

/*------------------------------------
 ボタン
------------------------------------*/
a.btn_text {
  display: block;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  color: #1a1a1a;
  transition: 0.5s;
}

a.btn_text:hover {
  color: #006837;
  text-decoration: none !important;
}


/*矢印付きボタン*/
/* 黒丸ボタン中央配置 */
.btn_bk {
  position: relative;
  text-decoration: none;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  background: #141414;
  color: #fff;
  border: 1px solid #141414;
  padding: 0.625rem 6rem 0.625rem 6rem;
  margin-top: 3rem;
  border-radius: 50px;
  text-align: center;
  outline: none;
  transition: ease .2s;
}

.btn_bk:hover {
  background: #fff;
  text-decoration: none;
  color: #141414;
}

/* 黒丸左配置 */
.btn_bkL {
  position: relative;
  text-decoration: none;
  display: inline-block;
  background: #141414;
  color: #fff;
  border: 1px solid #141414;
  padding: 10px 50px 10px 40px;
  margin-top: 3rem;
  border-radius: 50px;
  text-align: center;
  outline: none;
  transition: ease .2s;
}

.btn_bkL:hover {
  background: #fff;
  text-decoration: none;
  color: #141414;
}



/* 矢印が右に移動 */
.btnarrow1::after {
  content: '';
  position: absolute;
  top: 45%;
  right: 25px;
  /*矢印の形状*/
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow1:hover::after {
  right: 18px;
  border-top: 2px solid #141414;
  border-right: 2px solid #141414;
}

@media screen and (max-width: 992px) {

  .btn_bk,
  .btn_bkL {
    width: 100%;


  }
}

/*ボタン矢印テキストリンク*/
a.btn_tx {
  position: relative;
  color: #414141;
  font-weight: 500;
}

a.btn_tx:hover {
  color: #006837;
  text-decoration: none;
}

a.btn_tx.btnarrow_tx::after {
  content: '';
  position: absolute;
  top: 45%;
  right: -10px;
  /*矢印の形状*/
  width: 8px;
  height: 8px;
  border-top: 2px solid #414141;
  border-right: 2px solid #414141;
  transform: rotate(45deg);
  transition: all .3s;
}

/*hoverした際の移動*/
a.btn_tx.btnarrow_tx:hover::after {
  right: -20px;
  border-top: 2px solid #006837;
  border-right: 2px solid #006837;
}

/* ボタン共通スタイル */
.dlbtn,
a.dlbtn,
button.dlbtn {
  position: relative;
  display: inline-block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 100vh;
}

/* ボタンラップ要素（追加） */
.btn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
  margin: 2rem;
}

/* 無料ダウンロードボタン */
a.btn-dl {
  font-size: clamp(1rem, 0.83rem + 0.73vw, 1.375rem);
  font-weight: 500;
  position: relative;
  padding: 1.25rem;
  color: #fff;
  background: linear-gradient(90deg, rgba(48, 198, 215, 1) 0%, rgba(82, 189, 0, 1) 100%);
  border: 2px solid #51C26F;
  margin: 0;
}

/* 無料ダウンロードボタン上のラベル */
a.btn-dl span {
  font-size: 1rem;
  font-weight: 500;
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: max-content;
  max-width: 90vw;
  padding: 0 1em;
  color: #119E36;
  border: 2px solid #119E36;
  border-radius: 100vh;
  background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

/* ラベルの矢印 */
a.btn-dl span:before,
a.btn-dl span:after {
  position: absolute;
  left: 50%;
  content: "";
  transform: translateX(-50%);
}

a.btn-dl span:before {
  bottom: -10px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #119E36 transparent transparent transparent;
}

a.btn-dl span:after {
  bottom: -7px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* 無料ダウンロードボタン hover */
a.btn-dl:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  color: #fff;
  background: linear-gradient(90deg, rgba(17, 158, 54, 1) 0%, rgba(185, 209, 46, 1) 100%);
}

/* お問い合わせボタン */
a.btn-cnt {
  font-size: clamp(1rem, 0.83rem + 0.73vw, 1.375rem);
  font-weight: 500;
  position: relative;
  padding: 1.25rem 6rem;
  color: #51C26F;
  background: #fff;
  border: 2px solid #51C26F;
  margin: 0;
}

/* お問い合わせ hover */
a.btn-cnt:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  color: #fff;
  background: #51C26F;
}

/* 会社案内PDFボタン*/
a.btn-corp {
  font-size: clamp(1rem, 0.83rem + 0.73vw, 1.375rem);
  font-weight: 500;
  position: relative;
  padding: 1.25rem 6rem;
  color: #30C6D7;
  background: #fff;
  border: 2px solid #30C6D7;
  margin: 0;
}

a.btn-corp:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  color: #fff;
  background: #30C6D7;
}

/* モバイル対応 */
@media (max-width: 992px) {
  .btn-wrap {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 4rem 2rem;
  }

  a.btn-dl,
  a.btn-cnt,
  a.btn-corp {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 2rem;
  }

  a.btn-dl span {
    font-size: 0.9rem;
    width: 90%;
    padding: 0;
  }
}


/*------------------------------------
 カード
------------------------------------*/
.card {
  height: 100%;
  padding-bottom: 0.5rem;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card h3 {
  padding-top: 1.5rem;
  text-align: left;
  line-height: 2.6rem;
  font-size: 1.2rem !important;
}

.card a {
  color: #333;
  text-decoration: none;
}

.card:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.card-img {
  position: relative;
  overflow: hidden;
}

.card-img img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: all 0.3s ease;
}

.card-img:hover img {
  transform: scale(1.1);
}

.card-content {
  padding: 1.5rem;
}

.card-title {}

.card-meta span {
  padding: 0 20px;
  color: #999999;
}

.card-divider {
  margin: 0px 10px;
}

.card-excerpt {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 2rem;
  color: #333;
}

.card-day {
  color: #fff666;
  font-size: 0.6rem;

}

.card-body {
  display: inline-block;
  padding: 20px;
  height: auto;
  vertical-align: bottom;
}

.c_badge a {
  color: #fff !important;

}

span.cat_badge {
  padding: .5rem 1rem;
  font-size: 0.9rem;
  margin: 0 10px 0 0;
  background-color: #031D44;
  border-radius: 50px;
}

.cat_badge a {
  color: #fff;
}

.cat_badge a:hover {
  color: #fff;
  text-decoration: none;
}

.card .arrow-btn {
  width: 100%;
}


/*------------------------------------
 tableセル
------------------------------------*/
.table-col {
  line-height: 1.6rem;
}

.table-col>div {
  margin-bottom: 3px;
  background-color: #fff;
}

@media screen and (max-width: 992px) {
  .table-col {
    width: 100%;

  }
}

/*プロフ*/
.table01 {
  border-collapse: collapse;
  width: 100%;

}

.table01 th,
.table01 td {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6rem;
  letter-spacing: 0.1rem;
  padding: 10px;
  border: solid 1px #ccc;
  box-sizing: border-box;
  width: 50%;
}

.table01 th {
  background: #f2f2f2;
  color: #414141;

}

@media screen and (max-width: 992px) {
  .table01 {
    width: 100%;
  }

  table.table01 th,
  table.table01 td {
    display: block;
    width: 100%;
    border-bottom: none;
  }

  .table01 tr:last-child {
    border-bottom: solid 1px #ccc;
  }
}





/*プラン*/
.table02 {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  text-align: center;
  letter-spacing: 0rem;

}

.table02 th, .table02 td {
  border: 2px solid #fff;
  padding: 1em;
  background-color: #f2f2f2;
}

.table02 thead th {
  background-color: #3A5E29;
  font-weight: 500;
  color: #fff;
  border: 2px solid #fff;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.table02 thead th:last-of-type {
  border-right: 2px solid #fff;
}

.table02 tbody th {
  background-color: #B7C800;
  color: #414141;
  font-weight: 500;
  text-align: left;
}

@media screen and (max-width: 992px) {
  .table02 thead th {
    font-size: 0.8rem;
  }

  .table02 tbody th {
    font-size: 0.8rem;
  }

}

/*概要*/
.table03 {
  border-collapse: collapse;
  width: 100%;

}

.table03 th, .table03 td {
  padding: 1em;
  background-color: #fff;
}

.table03 th {
  color: #031D44;
  font-weight: bold;
  text-align: left;
  width: 20%;
  min-width: 4em;
  position: relative;
}

.table03 th::after {
  content: '';
  background-color: #c1c7c6;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
}

@media screen and (max-width: 992px) {
  .table03 {
    width: 100%;
  }

  table.table03 th,
  table.table03 td {
    display: block;
    width: 100%;
    border-bottom: none;
  }

  .table03 tr:last-child {
    border-bottom: solid 1px #ccc;
  }
}


/*------------------------------------
 フロー
------------------------------------*/
.flow_design03 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 5rem;
  margin-left: 20px;
}

.flow_design03 ul {
  padding: 0;
}

.flow_design03 li {
  list-style-type: none;
}

.flow_design03 dd {
  margin-left: 0;
}

.flow03 {
  position: relative;
}

.flow03::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -129px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
  border-radius: 20px;
}

.flow03>li {
  position: relative;
}

.flow03>li:not(:last-child) {
  margin-bottom: 60px;
}

.flow03>li .icon03 {
  font-size: 1.3rem;
  width: 2.3em;
  height: 2.3em;
  line-height: 2.3;
  text-align: center;
  font-weight: bold;
  border-radius: 100vh;
  color: #fff;
  background: #031D44;
  display: inline-block;
  padding-left: 0.2em;
  margin-right: 0.3em;
}

.flow03>li dl {
  padding-left: 70px;
  position: relative;
}

.flow03>li dl::before,
.flow03>li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}

.flow03>li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #031D44;
  border-radius: 50%;
  left: -4px;
}

.flow03>li dl::after {
  width: 50px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}

.flow03>li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #031D44;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
}

/*------------------------------------
 ステップ
------------------------------------*/
/*吹き出しステップ*/
.step {
  position: relative;
  padding-left: 180px;
}

.step span {
  position: absolute;
  top: -15px;
  left: 0;
  padding: 1rem 1.5rem;
  color: #fff;
  font-size: 1.1rem;
  border-radius: 10px;
  background: #B7C800;
}

.step span:after {
  position: absolute;
  top: calc(50% - 7px);
  right: -11px;
  width: 0;
  height: 0;
  content: '';
  border-width: 7px 0 7px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #B7C800;
}


/*------------------------------------
 フッター
------------------------------------*/
/*お問い合わせ*/
.scbg-img {
  background: url("../images/bg_wl.png")top left no-repeat,
    url("../images/ft_cnt.jpg") center no-repeat fixed;
  width: 100%;

}

.scbg-img p {
  text-align: center;
  color: #031D44;
  font-size: 1.1rem;
}

/*無料相談からテキスト*/
.w-480 {
  max-width: 480px;
  width: 100%;
  margin: 0 auto clamp(2.5rem, 1.364rem + 4.85vw, 5rem);
}

.w-480 p {
  text-align: start;
}

.w-480 .txt_nayami {
  font-size: 1.25rem;
  padding-bottom: 2rem;
}

.s-text {
  color: #031D44;
  font-size: clamp(1.125rem, 0.926rem + 0.85vw, 1.563rem);
  text-align: center;
  font-weight: 500;
}

.mb_ft-btn {
  margin-bottom: clamp(2.5rem, 1.364rem + 4.85vw, 5rem);
}

.s-text2 {
  color: #031D44;
  font-size: clamp(1.125rem, 0.926rem + 0.85vw, 1.563rem);
  text-align: center;
  font-weight: 500;
  margin: 0 auto clamp(1.563rem, 0.852rem + 3.03vw, 3.125rem);
}

.saitama {
  padding: 2rem 2rem 1rem 2rem;
}

.saitama p {
  font-size: 1rem;
  text-align: start;
}

.saitama strong {
  display: block;
  border-left: #119E36 6px solid;
  padding-left: 10px;
  margin: 2rem 0 0.5rem 0;

}

.saitama h4 {
  color: #119E36;
  margin-bottom: 1rem;
}


/*ナビゲーションアイコン白*/
.cnt {
  text-align: center;

}

.cnt i {
  color: #031D44;
  font-size: 5rem;
  margin: 20px;

}

.cnt a i {
  color: #031D44;
}

.cnt img {
  width: 120px;
}

/*footerナビ*/
footer {
  padding: 60px 0 0;
  background-color: #f0f2ef;
  line-height: 1.2rem;
  letter-spacing: 0rem;
}

footer ul {
  line-height: 3rem;
}

footer a:hover {
  color: #006837;
  text-decoration: none;
  font-weight: 600;
}


footer a {
  color: #414141;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0rem;
}

.submenu-t {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0rem;
}

.submenu {
  line-height: 2rem;
}

.submenu a {
  font-size: 0.85rem;
  font-weight: 500;
  color: #414141;
  text-decoration: none;
  letter-spacing: 0rem;
}

.footer-bottom {
  background-color: #141414;
  padding: 20px 0;
  margin: 3rem 0 0;
}

.footer-bottom p {
  margin-bottom: 0;
  letter-spacing: normal;
  font-size: 0.8rem;
  color: #aaaaaa;
}

.footer-bottom p a {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}

.footer-bottom p a:hover {
  color: #aaaaaa;
}

span.ft_siteinfo {
  display: block;
  padding: 1rem 0 0.5rem;
  font-size: clamp(0.625rem, 0.421rem + 0.33vw, 0.75rem);
  line-height: 1.2rem;

}

/*ナビゲーションアイコン白*/
.icn-w i {
  margin-right: 8px;
  font-size: 1.1rem;
}

.icn-w img {
  color: #fff;
  margin-right: 8px;
  font-size: 1.1rem;
}

.icn-w {
  color: #fff;
}

.icn-w a {
  color: #fff;
}



/*メッセージセクション*/
.section-m {
  margin: 5rem 0;
  padding: 0.5rem;
  background-color: #FFC627;
  -webkit-transform: skew(0deg, -2deg);
}

.section-m .m-box {
  padding: 5rem;
  background-color: #fff;
  -webkit-transform: skew(0deg, 2deg);
  text-align: center;
}

.section-m h2 {
  display: inline-block;
  color: #585858;
}

.section-m h2 span {
  padding-bottom: 2.5rem;
  background: url("../images/hd_line_l.svg") no-repeat bottom;
  background-size: 95%;
}




.rc-img {
  background: url("../images/recruit_bg.jpg") no-repeat;
  background-size: cover;
  background-position: center bottom;
}

.rc-img h2 {
  color: #fff;
}

.rc-img .tex-box {
  background: #ffffffbb;
  border-radius: 2px;
  margin: 0 16rem 5rem;
  padding: 3rem 3rem 1rem;
  text-align: center;
}

@media screen and (max-width: 992px) {

  .rc-img .tex-box {
    margin: 0 1rem 5rem;
    text-align: left;
  }
}

/*------------------------------------
 当社について
------------------------------------*/
/*背景画像*/
section.about-img1 {
  background: url("../images/bg_about1.jpg") no-repeat;
  background-position: left top;
  padding-bottom: 0;

}

section.about-img2 {
  background: url("../images/bg_about2.jpg") no-repeat;
  background-position: right bottom;

}

@media screen and (max-width: 992px) {
  section.about-img1 {
    background-color: rgba(255, 255, 255, 0.7);
    background-blend-mode: lighten;
    padding-bottom: 0;
  }

  section.about-img2 {
    background-color: rgba(255, 255, 255, 0.4);
    background-blend-mode: lighten;
  }
}


/*経歴*/
dl.timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

dl.timeline dt {
  text-align: right;
  width: 8em;
  padding: 0 2em 0.5em 0.5em;
  position: relative;
}

dl.timeline dt::after {
  content: '●';
  position: absolute;
  right: -0.6em;
  top: 0;
  font-size: 22px;
  color: #3A5E29;
}

dl.timeline dd {
  margin: 0;
  width: calc(100% - 8em);
  padding: 0.5em 3em 0;
  border-left: 2px solid #ccc;
}

dl.timeline dd p {
  line-height: 1.5rem;
}




/*------------------------------------
 サービス
------------------------------------*/
/*背景画像*/
section.sv1 {
  background: url("../images/hero.png") no-repeat;
  background-size: cover;
  background-position: center;
  transform: scale(-1, 1);
  padding-bottom: 100px;


}

.sv1 h2,
.sv1 p {
  transform: scale(-1, 1);
  /* 相殺 */
}



/*施策*/
.shisaku {
  margin-top: 80px;

}

.shisaku h4 {
  display: inline;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;

}

.shisaku span {
  display: inline-block;
  background-color: #3A5E29;
  color: #fff;
  border-radius: 5px;
  padding: 0 0.5rem 0 1rem;
  margin-right: 0.5rem;
}

.shisaku p {
  margin-top: 1rem;
  line-height: 2.2rem;
}

/*design経営ステップ*/
.d_step {
  width: 60%;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid #B7C800;
}

.d_step .d_stepwrap {
  background-color: #fff;
  border-left: 1px solid #B7C800;
  border-right: 1px solid #B7C800;
  padding: 0 1rem 2rem;

}


.d_step .d_stepwrap .triangle {
  content: "";
  display: block;
  background: #B7C800;
  height: calc(20px / 2 * tan(60deg));
  width: 30px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin: 0 auto;
}

.d_step .d_stepwrap .d_steptitle span {
  display: block;
}

.d_step .d_stepwrap .title-stp {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1rem;

}

.d_step .d_stepwrap .txt {
  width: 90%;
  display: block;
  margin: 1rem auto 1rem auto;
  font-size: 1rem;
  font-weight: 500;
}

/*.d_step:first-of-type .triangle:first-of-type {
  display: none;
}*/

.d_step:last-of-type .d_stepwrap:last-of-type {
  border-bottom: 1px solid #B7C800;
}

@media screen and (max-width: 992px) {
  .d_step {
    width: 90%;
  }
}


/*制作の流れステップ*/
.step_flow {
  margin-bottom: 10rem;
}

/* 各ステップの色決め */

.step_flow li.step1 {
  color: #FFF;
  background: #3A5E29;
}

.step_flow li.step2 {
  color: #FFF;
  background: #3c6d38;
}

.step_flow li.step3 {
  color: #FFF;
  background: #8cc800;
}

.step_flow li.step4 {
  color: #FFF;
  background: #B7C800;
}


/*サービスフッター*/
.page_ft {
  /*border-top: dotted 1px #141414;*/

}

.page_ft a {
  font-size: 0.85rem;
}

.page_ft :hover {
  text-decoration: underline;
  color: #3A5E29 !important;
}

/*footer ボタン矢印*/
a.btnarrow2 {
  position: relative;
}

a.btnarrow2:hover {
  text-decoration: none;
}

.btnarrow2::after {
  content: '';
  position: absolute;
  top: 45%;
  right: 8px;
  /*矢印の形状*/
  width: 8px;
  height: 8px;
  border-top: 2px solid #414141;
  border-right: 2px solid #414141;
  transform: rotate(45deg);
  transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow2:hover::after {
  right: -3px;
  border-top: 2px solid #006837;
  border-right: 2px solid #006837;
}

/*------------------------------------
 WORKS
------------------------------------*/
#works section.nonma {
  padding: 0 0 100px 0;

}

#works {
  padding: 0 0 100px 0;
  position: relative;
}

#works h3 {
  color: #006837;
  padding: 1.6rem 0;
  line-height: 2.6rem;
}

#works h4 {
  margin-bottom: 1rem;
  /*padding: 1.6rem 0 1rem;
  line-height: 2.6rem;*/
}


#works img {
  padding: .25rem;
  border-radius: 5px;
  border: 1px solid #bdbdbd;
  background-color: #fff;
  margin: auto;
  display: block;

}

.card .arrow-btn {
  width: 100%;
}

.t03 {
  color: #1a1a1a;
  font-size: 1.3rem;
  margin-bottom: 80px;
  font-weight: 500;
}


#works .info {
  padding-top: 2rem;
  margin-bottom: 2rem;

}

#works .col-gr {
  background-color: #f5f5f5;
  padding: 1rem;
  margin-bottom: 0.3rem;

}

#works .col-wh {

  padding: 1rem;
  margin-bottom: 0.3rem;

}

.container.workft-lnk h3 {
  text-align: center;
  margin: 0 0 2rem;

}



ul.tag {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 5rem;
}

@media screen and (max-width: 992px) {
  ul.tag {
    justify-content: left;
  }
}

.tag li {
  display: inline-block;
  list-style: none;
  padding: .3rem 1.5rem;
  font-size: 1rem;
  background-color: #98ae00;
  border-radius: 50px;
  margin-right: 1.5rem;
  margin-bottom: 2rem;
}

.tag li a {
  color: #fff;
}

.tag li a:hover {
  color: #fff;
  text-decoration: none;
}


.tag li:last-child a {
  margin-right: none;
}


.wk_card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  background-clip: border-box;
  border: 0;
  border-radius: 0.25rem;
  color: #1a1a1a;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.5s, transform 0.5s;

}

.wk_card-image img {
  margin-bottom: 0;
  width: 100%;
  height: 18.75rem;
  object-fit: cover;
  object-position: center top;

}

.wk_card-box {
  padding: 1rem;

}

h4.wk_card-title {
  margin-bottom: 0;

}

.wk_card-title {
  color: #006837;
  font-size: 1rem;
  text-align: left;
  line-height: 2rem;
  padding: 1rem 0 0;

}


.wk_card:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
  transform: translate(0, -10px);
  text-decoration: none;
}


/*実績カテゴリー色分け用badge*/
ul.badge_cat {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

ul.badge_cat a {
  color: #fff;
}

ul.badge_cat a:hover {
  color: #fff;
  text-decoration: none;
}

ul.badge_cat li {
  display: inline-block;
  padding: 0 0.5rem;
  font-size: 0.8rem;
  color: #fff;
  border-radius: 5px;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

ul.badge_cat li:last-child {
  margin-right: none;
}

/*Webサイト*/
li.cat1 {
  background-color: #0FA3B1;
}

/*ロゴ*/
li.cat2 {
  background-color: #05c04d;
}

/*パンフレット*/
li.cat3 {
  background-color: #e04040;
}

/*チラシ*/
li.cat4 {
  background-color: #3385ff;
}

/*看板*/
li.cat5 {
  background-color: #011f4b;
}

/*パッケージ*/
li.cat6 {
  background-color: #8800c7;
}

/*キャラクター*/
li.cat7 {
  background-color: #ff5100;
}

/*その他*/
li.cat8 {
  background-color: #6d6d6d;
}



/*実績フォトギャラリー*/
.work-gallery {
  color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /*width:100%;*/
  height: 30vh;
}

/*実績カード型フォトギャラリー*/
.glycard .menu-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.glycard .menu-content::before, .glycard .menu-content::after {
  content: "";
  display: table;
}

.glycard .menu-content::after {
  clear: both;
}

.glycard .menu-content li {
  display: inline-block;
}

.glycard .menu-content a {
  color: #fff;
}

.glycard .menu-content span {
  position: absolute;
  top: 0;
  transform: translate(-50%, 0);
}

.glycard .glywrapper {
  background-color: #fff;
  min-height: 300px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
}

.glycard .glywrapper:hover .data {
  transform: translateY(0);
}

.glycard .data {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(calc(70px + 1em));
  transition: transform 0.3s;
}

.glycard .data .glycontent {
  color: #fff;
  background: rgba(0, 0, 0, 0.200);
  position: relative;
  z-index: 1;
}

.glycard .glytitle {
  font-size: 1rem;
  padding-top: 1rem;
  border-bottom: #fff solid 1px;

}

.glycard .glytext {
  font-size: 0.9rem;
  padding: 0 0.5rem 0.5rem 0.5rem;
  margin: 0;
}

.glycard input[type=checkbox] {
  display: none;
}

.glycard input[type=checkbox]:checked+.menu-content {
  transform: translateY(-60px);
}


/*実績画像ギャラリー02 クリック拡大*/
.grid-photo {
  position: relative;
  width: 100%;
  height: 350px;
  float: left;
  margin-bottom: 30px;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}

.grid-photo .desc {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #00000060;
  padding: 140px 1rem 1rem 1rem;
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}

.grid-photo .desc h4 {
  color: #fff !important;
  text-decoration: none;
  /*margin-bottom: 5px;*/
}

.grid-photo .desc span {
  color: #fff;
  font-weight: normal;
  font-size: 1rem;
}

.grid-photo:hover .desc, .grid-photo:focus .desc {
  opacity: 1;
}

/*blogカード 実績storyカード*/
.b_card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  background-clip: border-box;
  border: 0;
  border-radius: 0.25rem;
  color: #1a1a1a;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.5s, transform 0.5s;
}

.b_card-image {
  width: 100%;
  height: 18.75rem;
  object-fit: cover;
  object-position: center top;
}

.b_card-box {
  padding: 1rem 2rem;
}

.b_card-title {
  margin: 1rem 0;
  color: #006837;
  font-size: 1rem;

}

.b_card-description {
  font-size: 0.9rem;
  font-weight: normal;
  margin-bottom: 0;
  line-height: 1.5rem;
}

.b_card-day {
  text-align: end;
  font-size: 0.7rem;
  font-weight: normal;
}

p.b_card-day {
  padding-bottom: 0;
  margin-bottom: 0;
}

.b_card:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
  transform: translate(0, -10px);
  text-decoration: none;
}

/*------------------------------------
 BLOG
------------------------------------*/
#blog {
  padding: 0 0 100px 0;
}

#blog h3 {
  color: #006837;
  padding: 0;
  line-height: 2.6rem;
}

#blog h4 {
  margin-top: 2rem;
  margin-bottom: 1.2rem;
  color: #031D44;
  font-size: 1.4rem;
  line-height: 2rem;
}

/* blog 新着 title */
#blog h6 {
  margin-bottom: 0.3rem;
  color: #333;
  /*文字色*/
}

.column-post {
  padding: 0 2.5rem 1rem 0;

}

.date {
  border-top: dotted 1px #141414;
  text-align: right;
  margin-bottom: 2rem;
}

.time {
  font-size: 0.8rem;
}

.column-post img {
  padding: 0.5rem 0 1rem;

}



@media screen and (max-width: 992px) {
  .column-post {
    padding: 2.5rem 1rem;

  }
}


/*------------------------------------
 サイドバー
------------------------------------*/

.sidebar a {
  text-decoration: none;
  color: #13080B;
}

.sidebar a:hover {
  text-decoration: none;
  color: #13589C;
}

.sidebar-post {
  padding: 0 2.5rem 1rem 2.5rem;
}

.sidebar-post h4 {
  font-size: 1rem;
  padding: 0;
}


.box_sideb {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1.6rem;
  transition: box-shadow 0.2s ease-in-out;
  margin-bottom: 40px;
}

/*新着記事*/
.new_card-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
  object-position: center top;
  padding-bottom: 1.8rem;
}

.new_card-title {
  font-size: 1rem;
  margin-bottom: 0;

}

.new_card-day {
  font-size: 0.7rem;
  font-weight: normal;
}

.new_card-title:hover {
  text-decoration: none !important;
}

/*------------------------------------
 ページネーション
------------------------------------*/
.pagenation {
  display: flex;
  margin: 40px 0;

}

.page-numbers {
  padding: 10px 15px;

}


/*次の記事*/
.next-page a {
  color: #13080B;
}

.next-page a:hover {
  color: #b8d200;
  text-decoration: none;
}

/*------------------------------------
 インスタフィード
------------------------------------*/
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 0.5rem;
  margin: 20px 0 80px 0;
}

.gallery li {
  position: relative;
  width: calc((100% - 10px)/ 7);
  height: 200px;
}

@media screen and (max-width: 992px) {
  .gallery li {
    width: calc(100% / 3);
  }
}

.gallery li::before {
  content: "";
  display: block;
  padding-top: 100%;
}

.gallery a {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*------------------------------------
 DLフォーム
------------------------------------*/
.guide h2 {
  text-align: start;
}

.guide h3 {
  text-align: start;
  color: #119E36;
  font-size: clamp(1.25rem, 0.966rem + 1.21vw, 1.875rem);
  line-height: 1.4;
  margin-bottom: clamp(1.25rem, 0.682rem + 2.42vw, 2.5rem);
}

.guide span {
  display: inline-block;
  padding: 0 2rem;
  background-color: #52BD00;
  color: #fff;
  font-weight: 500;
  border-radius: 100vh;

}

.guide .box_01 {
  display: inline-block;
  border-radius: 10px;
  background-color: #FFFDED;
  border: #119E36 1px solid;
  padding: 1.6rem 1rem 1rem 1rem;
  margin-top: 1.5rem;
  margin-bottom: clamp(5rem, -6.923rem + 19.23vw, 7.5rem);

}

.guide ul {
  padding: 1rem;
  list-style: disc;
  list-style-position: inside;
  flex-shrink: 0;
}

.guide li {
  margin-left: 1.4rem;
  text-indent: -1.4rem;
}

.guide .box_01 p {
  margin-left: 1.4rem;
}


.guide .box_02 {
  border-radius: 10px;
  background-color: #fff;
  border: #119E36 1px solid;
  padding: 1.6rem 1rem 1rem 1rem;
  margin-top: 1.5rem;
  margin-bottom: clamp(5rem, -6.923rem + 19.23vw, 7.5rem);

}

.voice-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 1.5rem;
  border: 1px solid #119E36;
  border-radius: 15px;
  background-color: #fff;
  height: 100%;
}

@media (min-width: 768px) {
  .voice-box {
    flex-direction: row;
    text-align: left;
  }
}

.voice-icon {
  width: 80px;
  height: auto;
  margin-bottom: 1rem;
  margin-right: 0;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .voice-icon {
    margin-bottom: 0;
    margin-right: 1rem;
  }
}

.w-600 {
  max-width: 600px;
  width: 100%;
  margin: 0 auto clamp(2.5rem, 1.364rem + 4.85vw, 5rem);
}

.question {
  margin-top: 3rem;
}

.question h3 {
  margin-bottom: 1rem;
}

.question .options {
  margin-left: 1rem;

}

.question .options label {
  display: block;
  margin-bottom: 5px;
  font-size: 1rem;
}

.question textarea {
  width: 100%;
  height: 100px;
  padding: 5px;
  border: 1px solid #ccc;
  resize: vertical;
}

.formtext {
  max-width: 600px;
  width: 100%;
  margin: 0 auto clamp(2.5rem, 1.364rem + 4.85vw, 5rem);
}

.formtext h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.formtext p {
  margin-bottom: 2rem;

}