@charset "UTF-8";

/* =========================================================
   1. ベースCSS (2609_test_base.css)
   ========================================================= */

@font-face {
  font-family: "Hiragino Sans", sans-serif;
  src: local(HiraginoSans-W7);
  font-weight: 800;
}
@font-face {
  font-family: "Hiragino Sans", sans-serif;
  src: local(HiraginoSans-W9);
  font-weight: 900;
}

:root {
  --brand-color: #ffec00;
  --bg-color: #f8f8f8;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/*ここまでリセット*/

html {
	font-size: 62.5%;
    scroll-behavior: smooth;
}

.sp-only {
  display: none; /* PCではスマホ用改行を消す */
}
.pc-only {
  display: inline; /* PCではPC用改行を表示する */
}

/* ボディー
---------------------------------------------------- */
body {
  font-size: 14px;font-size: 1.4rem;
	color: #000;
  line-height: 26px;
  font-family: 'Noto Sans Japanese', sans-serif;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-weight: 600;
  letter-spacing: 0.03em;
}

h4, h5{
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

#wrapper  {
  overflow: hidden;
  padding: 0;
  margin: 0;
  width: 100%;
}

.container {
    max-width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

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

.flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.between {
  justify-content: space-between;
}

.grid{
  display: -ms-grid;
  display: grid;
  grid-gap: 70px;
  -ms-grid-columns: (minmax(368px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(368px, 1fr));
}

.grid02{
  display: -ms-grid;
  display: grid;
  grid-gap: 70px;
  -ms-grid-columns: (minmax(368px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(368px, 1fr));
  padding: 0 0 200px;
}


/* リンク
---------------------------------------------------- */
a.hover_img {
	display:block; /*ブロック化重要！*/
}
a.hover_img img{
	transition: 0.4s;
	color: #FFF;
	border: none;
}
a:hover.hover_img img{
	-moz-opacity: 0.7;
	opacity: 0.7;}

a:link { color: #000;text-decoration: none; }
a:visited { color: #000; }
a:active { color: #ffff00;}



/*hover div*/
a.hover_div {
	background-color:#fff; /*背景に白を設定*/
	display:block; /*ブロック化重要！*/
}
a.hover_div div{
	border: none;
}
a:hover.hover_div div{
	-moz-opacity: 0.6;
	opacity: 0.6;
}
.cursor_defalt{cursor: default;}

::selection {background: #000; color: #fff;}
::-moz-selection {background: #000; color: #fff;}
/*chromeフォーム*/
input::selection,
textarea::selection {
  color: #000;
}

/*imgホバー*/

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;

}
figure:hover figure img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.col_wia figure {
  position: relative;
  overflow: hidden;
}
.col_wia figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(255,255,0,.7);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
.col_wia figure:hover figcaption {
  opacity: 1;
}

figcaption h2 {
  font-size:14px;font-size: 1.4rem!important;
  color: #fff!important;
  font-weight: bold;
  background: #000;
  display: inline-block;
  padding:  5px 10px;
  margin: 10px;
  -webkit-border-radius: 3px;
          border-radius: 3px;
}

figcaption h3 {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size:14px;font-size: 1.4rem!important;
  color: #000!important;
  line-height: 20px!important;
  padding: 10px;
  font-weight: bold;
  position: absolute;
   top: 50%;
  left: 50%;
  margin-right: -50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%);
}



/* メニュー
---------------------------------------------------- */

.main-nav {
  display: flex;
  margin: 55px 0 40px;
  font-size: 15px;font-size: 1.5rem;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 99;
}
.main-nav li:first-child {
  margin-right: auto;
}

.main-nav li.hover_line {
    /* max-width: 130px; */
    position: relative;
}
.main-nav li.hover_line .icon_arrow {
    margin-left: 5px;
    padding-left: 10px;
    background: url(../img/icon_arrow.svg) no-repeat;
    vertical-align: -6px;
}
#logo{
  margin-top: -5px!important;
  width: 120%;
  max-width: 160px;
}

.main-nav .sub_menu {
    visibility: hidden;
    width: 100%;
    position: absolute;
    top: 40px;
    left: 0px;
    perspective: 400px;
}
.main-nav li ul.sub_menu li a {
    margin-bottom: 2px;
    padding: 6px 0;
    line-height: 1.5;
    font-size:12.8px;
    font-size:1.28rem;
    text-align: center;
    color: #fff;
    background: #3d3d3d;
}

/*ホバー*/
nav .hover_line a {
  display: block;
  padding: 5px 10px 10px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 10px;
}
nav .hover_line a,
nav .hover_line a:after,
nav .hover_line a:before {
  transition: all .1s;
}
nav .hover_line a:hover {
  color: #555;
}

nav .hover_line a {
  position: relative;
}

nav .hover_line a:after {
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #ffff00;
  height: 12px;
}
nav .hover_line a:hover:after {
  width: 80%;
}

/*サブメニュー親要素にホバーした時のアニメーション*/
.main-nav .hover_line:hover .sub_menu {
    visibility: visible;
}
.main-nav .hover_line .sub_menu li {
    transform: rotateY(90deg);
    transform-origin: 50% 0;
    transition: .4s;
}
.main-nav .hover_line:hover .sub_menu li {
    transform: rotateY(0);
}
.main-nav .hover_line .sub_menu li:nth-child(2) {
    transition-delay: .1s;
}

/*サブメニュー子要素にホバーした時*/
.main-nav li ul.sub_menu li a:hover {
    color: #ffff00;
    transition: all .2s;
}
.main-nav li ul.sub_menu li a:after {
  height: 0px;
}



/* ボタン
---------------------------------------------------- */
/* 無料相談するボタン */
.btn_free {
  max-width: 300px;
  position: fixed;
  z-index: 10000;
  bottom: 5%;
  right: 3%;
  transition: 250ms;
}
@media all and (max-width: 1366px) {
  .btn_free {
    bottom: 20px;
    right: 10px;
  }
}
.btn_free a {
  padding: 20px 70px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: #4d4d4d;
  border-radius: 6px;
  display: block;
  transition: all 0.2s ease-in;
  &:hover {
    color: #000;
    background: #ffec00;
    transition: all 0.2s ease-in;
  }
}
.btn_free a span {
  margin-left: 15px;
  font-size: 23px;
  font-size: 2.3rem;
  vertical-align: -4px;
}
/*footerまでスクロールしたら消す*/
.is-hidden {
  visibility: hidden;
  opacity: 0;
}

/* リンクボタン */
.btn_link {
  margin: 0 auto;
  padding: 15px 30px;
  max-width: 11em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 600;
  text-align: center;
  color: #000;
  border: 1px solid #000;
  background: #fff;
  display: block;
  transition: all 0.3s ease-in;
  transition: background 0.3s;
  position: relative;
  cursor: pointer;
  &::after {
    content: '';
    width: 48px;
    height: 8px;
    background: url(../img/common/footer_contact-icon-arrow.svg) no-repeat;
    position: absolute;
    top: 1em;
    right: -48px;
  }
  &:hover {
    color: #000;
    background: var(--brand-color);
  }
  &:hover::after {
    transform: translateX(10px);
    transition: all 0.3s ease-in;
  }
}

/* 黒背景ボタンの文字色をホワイトに変更 */
.lp-btn--solid {
  color: #ffffff !important;
}

/* 白背景ボタンの文字色をブラックに明示 */
.lp-btn--outline,
.lp-btn--bordered,
.lp-btn--yellow,
.lp-btn--white {
  color: #000000 !important;
}



/* トップ
---------------------------------------------------- */
#main-visual{
  margin: 160px 0 120px;
}

#top_message_area{
  height: 0;
  padding-top: 54%;
  background: url('../img/top.gif') 285px 0px  no-repeat;
  background-size: contain;
}

#top_message_area h1{
  font-family: "Hiragino Sans";
  font-weight: 800;
  font-size: 45px;
  font-size: 4.5rem;
  font-feature-settings: "palt";
  color: #000;
  letter-spacing: 1px;
  text-align: left;
  line-height: 70px;
  position: relative;
  margin-top: -64%;
}

#top_message_area p{
  font-size: 18px;font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 32px;
  margin: 2% 0 10px;
}


/*コンテンツ*/
.top h2 {
  margin-bottom: 30px;
  font-size: 30px;font-size: 3.0rem;
  font-weight: 800;
  line-height: 1em;
  text-align: center;
}

.top h2 span {
  margin-top: 5px;
  font-size: 15px;font-size: 1.5rem;
  letter-spacing: 0;
  display: block;
}

.top_inner01{
  padding: 100px 0;
}

.service_grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}

.service_grid .col-1{
  font-size: 25px;font-size: 2.5rem;
  font-weight: 700;
  flex: 1;
  padding: 30px 0;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  /* border-right: 1px solid #000; */
}

.service_grid.underline a{
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
.service_grid a{
  border-right: 1px solid #000;
}

.service_grid a:last-child{
  border-right: none;
}

.inbox{
  font-family: 'Poppins', sans-serif;
  margin: 0 auto;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  text-align: center;
}

.service_grid .col-1 p{
  margin-left: 10px;

}

.baton_anime{
  display: block;
  margin: 0 auto -80px;
  position: relative;
  max-width: 100%;
}

.baton_anime02{
  display: block;
  margin: -80px auto;
  position: relative;
  max-width: 100%;
}

/* 私たちの強み strength */
.top_strength {
  margin-bottom: 125px;
}
.top_strength h2 {
  margin-bottom: 90px;
}
.top_strength ul {
  margin: 0 auto;
  max-width: 1065px;
}
.top_strength ul li {
  margin-bottom: 70px;
  height: 263px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.top_strength ul li:nth-of-type(even) {
  margin-left: 10%;
}
.top_strength ul li .image_box {
  width: min(26vw, 260px);
  position: relative;
  z-index: 1;
}
.top_strength ul li:nth-of-type(1) .image_box::after,
.top_strength ul li:nth-of-type(2) .image_box::after {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  top: 50%;
  background: #000;
  border-radius: 3px;
  z-index: -1;
}
.top_strength ul li:nth-of-type(1) .image_box::after {
  left: 70%;
  transform: rotate(-20deg);
}
.top_strength ul li:nth-of-type(2) .image_box::after {
  right: 60%;
  transform: rotate(20deg);
}
.top_strength ul li .text_box {
  padding-right: 8%;
  width: 62%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.top_strength ul li:nth-of-type(2) .text_box {
  padding-right: 0;
  width: 67%;
}
.top_strength ul li .text_box p {
  margin: 8px 0 30px;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.03em;
}
.top_strength ul li .text_box strong {
  padding-bottom: 2px;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 32px;
  background: linear-gradient(
    to bottom, /* 方向 */
    transparent 0 50%,  /* 上半分の領域 */
    #fff200 50% 100% /* 下半分の領域 */
    );
}

/* 私たちにできること service */
.top_service {
  padding-top: 85px;
  background: var(--bg-color);
}
.top_service h2 {
  margin-bottom: 65px;
}
.top_service ul {
  margin: 0 auto 90px;
  max-width: 1060px;
  display: grid;
  width: fit-content;
  column-gap: 2em;
  grid-template-columns: repeat(2, auto);
}
.top_service ul li {
  margin-bottom: 30px;
  padding: 10px 25px 25px;
  position: relative;
  color: #000;
  background: #fff;
}
.top_service ul li::after {
  content: "";
  width: 58.5px;
  height: 40px;
  background: url(../img/top_service-btn-icon-bk.svg) no-repeat;
  display: inline-block;
  position: absolute;
  top: 15px;
  right: 30px;
  transition: transform .3s ease-in-out;
}
.top_service ul a:hover li {
  color: #fff;
  background: #666666;
}
.top_service ul a:hover li::after {
  background: url(../img/top_service-btn-icon-wh.svg) no-repeat;
  transition: transform .3s ease-in-out;
  transform: translateX(15px);
}
.top_service ul a:active li::after {
  transform: scale(0.8);
}
.top_service ul li h3 {
  margin-bottom: 15px;
  font-size: 20px;
  font-size: 2.0rem;
  letter-spacing: 0.05em;
}
.top_service ul li h3 span {
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0;
  display: block;
}
.top_service ul li p {
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 500; 
}


/*works*/
.top_inner02{
  padding: 100px 0 ;
  background: #EAEAEA;
}

/*slide*/
.slide_box{
  box-shadow:10px 10px 16px -2px #aba6a6;
  margin-bottom: 20px;
  margin-right: 30px;
  color: #FFF;
  background-color: #000;
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 2fr;
}

.slide_left_area{
  padding: 10px 15px 50px;
  line-height: 16px;
}

.category{
  margin-bottom: 30% ;
}
/*スライド画像の横幅可変*/
.slider img {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

/*カテゴリ別*/

.cat_total{
  background: url('../img/total_produce_bg.png') bottom 10px center no-repeat;
 }
.cat_web{
  background: url('../img/web_bg.png') bottom 10px center no-repeat;
 }
.cat_graphic{
  background: url('../img/graphic_bg.png') bottom 10px center no-repeat;
 }
 .cat_movie{
  background: url('../img/movie_bg.png') bottom 10px center no-repeat;
 }
 .cat_others{
  background: url('../img/others_bg.png') bottom 10px center no-repeat;
 }
/*topics*/

.topics_inner{
  max-width: 900px;
  margin: 0 auto;
}

.topics_inner table{
  width: 100%;
  margin: 0 auto;
  color: #333;
  text-align: left;
}

.topics_inner table tr{
  border-bottom: 1px solid #E2E2E2;
}

.topics_inner table th{
  width: 20%;
  font-weight: 700;
  padding: 20px 10px 5px;
}

.topics_inner table td{
  width: 80%;
  font-weight: 500;
}

/*other*/
.top_inner03{
  background: url(../img/bg_other.jpg) 0 0 no-repeat;
  padding: 100px 0;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  background-attachment: fixed;
}

.other_grid{
  display: grid;
  grid-gap: 70px;
  grid-template-columns: 1fr 1fr;
}

.other_grid > .col {
  overflow: auto;
  min-width: 0;
}

.top_inner03 h3{
  font-size: 23px;font-size: 2.3rem;
  font-weight: 500;
  border-bottom: 1px solid;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.top_inner03 h3 span{
  display:inline-block;
  vertical-align: middle;
  margin-right: 14px;
}

.top_inner03 .hover_img{
  margin: 10px 0;
}

/* footer_contact */
#footer_contact {
  padding: 50px 20px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 900;
  background: #fff000;
}
#footer_contact .container {
  max-width: 1077px;
}
#footer_contact h2 {
  margin-bottom: 20px;
  font-size: 25px;
  font-size: 2.5rem;
}
#footer_contact p {
  margin-bottom: 20px;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 25px;
}
#footer_contact .tel {
  margin-bottom: 5px;
  max-width: 320px;
  display: block;
}
#footer_contact .time {
  margin-bottom: 0;
  max-width: 155px;
}
#footer_contact .btn_contact {
  margin: auto 0 0 0;
}
#footer_contact .btn_contact a {
  margin-right: 48px;
  padding: 15px 80px;
  max-width: 300px;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: 600;
  text-align: center;
  color: #000;
  border: 1px solid #000;
  background: #fff;
  display: block;
  transition: all 0.3s ease-in;
  transition: background 0.3s;
  position: relative;
  &::after {
    content: '';
    width: 48px;
    height: 8px;
    background: url(../img/common/footer_contact-icon-arrow.svg) no-repeat;
    position: absolute;
    top: 1em;
    right: -48px;
  }
  &:hover {
    color: #fff;
    background: #000;
  }
  &:hover::after {
    transform: translateX(10px);
    transition: all 0.3s ease-in;
  }
}
#footer_contact .btn_contact a span {
  margin-left: 15px;
  font-size: 23px;
  font-size: 2.3rem;
  vertical-align: -4px;
}

/* 下層
---------------------------------------------------- */

#sub_main{
  padding: 10px 0 0;
}

#head_inner{
  width:100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

#head_inner h1{
  font-size: 40px;font-size: 4rem;
  text-align: center;
}

#head_inner h1 span::before {
  content: "\A" ;
  white-space: pre ;
}

#head_inner h1 span{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 14px;font-size: 1.4rem;
  font-weight: 300;
  color: #000;
}

/*パターンのheader*/

#head_inner_other{
  width:100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/bg_pt.png)repeat ;

}

#head_inner_other h1{
  font-size: 40px;font-size: 4rem;
  text-align: center;
}

#head_inner_other h1 span::before {
  content: "\A" ;
  white-space: pre ;
}

#head_inner_other h1 span{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 14px;font-size: 1.4rem;
  font-weight: 300;
  color: #000;
}

.inner01 h2{
  font-size: 40px;font-size: 4rem;
  text-align: center;
}

.inner01 h2 span::before {
  content: "\A" ;
  white-space: pre ;
}

.inner01 h2 span{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 14px;font-size: 1.4rem;
  font-weight: 400;
}

#catch{
  font-size: 20px;font-size: 2rem;
  color: #4D4D4D;
  text-align: center;
  line-height:35px;
  margin-top: 40px;
}

#lead{
  font-size: 18px;font-size: 1.8rem;
  text-align: center;
  line-height: 35px;
  margin-top: 30px;
}

.inner02{
  padding: 150px 0 0;
  text-align: left;
}

.inner02 h3{
  font-size: 40px;font-size: 4rem;
  text-align: center;
  margin-bottom: 50px;
}

.inner02 h3 span::before {
  content: "\A" ;
  white-space: pre ;
}

.inner02 h3 span{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 20px;font-size: 2rem;
  font-weight: 400;
}

.service_head {
  position: relative;
  z-index: -1;
}
.service_head .container {
  margin: 0 auto;
  max-width: 1110px;
}
.service_head h1 {
  font-size: 50px;
  font-size: 5.0rem;
  font-weight: 700;
  color: #fff;
  position: absolute;
  top: 45%;
  z-index: 1;
}
.service_head h1 span {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 70px;
  text-transform: uppercase;
  display: block;
}
.service_head h1 span::after {
  content: ' US';
}


.page_service .container {
  margin: 0 auto;
  max-width: 1110px;
  letter-spacing: 0.03em;
}
.page_service h2,
.page_service h3 {
  font-weight: 800;
}
.page_service h2 {
  margin-bottom: 60px;
  font-size: 30px;
  font-size: 3.0rem;
  line-height: 35px;
  text-align: center;
}
.page_service h2 span {
  font-size: 15px;
  font-size: 1.5rem;
  display: block;
}
.page_service p {
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 500;
}

.page_service .service_intro {
  margin-bottom: 115px;
}
.page_service .service_intro h3 {
  padding-left: 0.1em;
  font-size: 30px;
  font-size: 3.0rem;
  line-height: 45px;
  background: linear-gradient(
    to bottom, /* 方向 */
    transparent 0 70%,  /* 上半分の領域 */
    #fff200 50% 100% /* 下半分の領域 */
    );
  display: inline;
}
.page_service .service_intro p {
  margin: 20px 0 30px;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 32px;
}
.page_service .service_intro ul li {
  margin: 0 20px 20px 0;
  padding: 8px 15px;
  width: fit-content;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  background: #e6e6e6;
  display: inline-block;
}
.page_service .service_intro .flex_box {
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
}
.page_service .service_intro .flex_box .left_box {
  width: max(10vw, 355px);
}
.page_service .service_intro .flex_box .left_box h3 {
  line-height: 45px;
}
.page_service .service_intro .flex_box .left_box p {
  font-size: 15px;
  font-size: 1.5rem;
}
.page_service .service_intro .flex_box ul.right_box {
  width: 63%;
  column-count: 2;
}
.page_service .service_intro .flex_box ul.right_box li {
  padding: 0;
  width: 94%;
  background: 0;
  filter: drop-shadow(4px 4px 0px rgba(32, 23, 21, 20%));
}
.page_service .service_intro .flex_box ul.right_box p {
  margin: 0;
  background: #000;
  clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0 100%, 0 19%);
}
.page_service .service_intro .flex_box ul.right_box li span {
  margin: 0;
  padding: 30px 25px 30px 30px;
  height: 80px;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 27px;
  clip-path: polygon(8.5% 0%, 100% 0%, 100% 100%, 0 100%, 0 20%);
  background: #fff;
  border: 1px solid #000;
  display: block;
}

.page_service .service_strength {
  padding: 60px 0 100px;
  background: var(--bg-color);
}
.page_service .service_strength ul {
  display: flex;
  justify-content: space-between;
}
.page_service .service_strength ul li {
  padding-right: 3.5%;
  padding-left: 20px;
  width: calc(100%/3);
  letter-spacing: 0.05em;
  position: relative;
}
.page_service .service_strength ul li::before {
  content: "●";
  font-size: 235px;
  color: #fff200;
  position: absolute;
  top: 50px;
  left: 5px;
  z-index: -1;
}
.page_service .service_strength ul li h3 {
  margin-bottom: 40px;
  height: 7.5em;
  font-size: 20px;
  font-size: 2.0rem;
  line-height: 35px;
}
.page_service .service_strength ul li h3 span {
  margin-bottom: 25px;
  font-size: 30px;
  font-size: 3.0rem;
  display: block;
  position: relative;
}
.page_service .service_strength ul li h3 span::after {
  content: "";
  width: 65%;
  border-bottom: 1px solid #000;
  position: absolute;
  top: 37%;
  right: 1em;
}
.page_service .service_strength ul li p {
  line-height: 30px;
}

.page_service .service_service {
  padding: 90px 0;
}
.page_service .service_service h2 {
  margin-bottom: 85px;
}
.page_service .service_service ul {
  margin: 0 auto;
  max-width: 1040px;
  display: flex;
  flex-wrap: wrap;
}
.page_service .service_service ul li {
  margin-right: 4.15%;
  margin-bottom: 70px;
  width: calc(100%/4.8);
  letter-spacing: 0.03em;
}
.page_service .service_service ul li img {
  margin-bottom: 13px;
}
.page_service .service_service ul li h4,
.page_service .service_service .flex .text_box h4 {
  margin-bottom: 20px;
  font-size: 20px;
  font-size: 2.0rem;
}
.page_service .service_service .flex .image_box,
.page_service .service_service .flex .text_box {
  margin-right: 5%;
  width: 45%;
}
.page_service .service_service .flex .text_box p {
  margin-bottom: 40px;
}

.page_service .service_orderflow {
  padding: 100px 0 75px;
  background: var(--bg-color);
}
.page_service .service_orderflow h2 {
  margin-bottom: 25px;
}
.page_service .service_orderflow p {
  margin-top: 20px;
  margin-bottom: 85px;
  text-align: center;
  line-height: 30px;
}
.page_service .service_orderflow ul {
  margin: 0 auto;
  max-width: 1040px;
}
.page_service .service_orderflow ul li {
  margin-bottom: 80px;
  display: flex;
}
.page_service .service_orderflow ul li p {
  margin-bottom: 0;
  text-align: left;
}
.page_service .service_orderflow ul li .number {
  margin-top: 6px;
  margin-right: 50px;
  font-size: 40px;
  font-size: 4.0rem;
  font-weight: 700;
  color: #666666;
  position: relative;
}
.page_service .service_orderflow ul li .number::before {
  content: "●";
  font-size: 95px;
  color: #fff;
  position: absolute;
  top: -0.01em;
  left: -0.25em;
  z-index: -1;
}
.page_service .service_orderflow ul li .number::after {
  content: "";
  height: 162%;
  position: absolute;
  top: 0;
  left: 50%;
  border: 1px dashed #211815;
  z-index: -2;
  align-items: stretch;
}
.page_service .service_orderflow ul li:last-of-type .number::after {
  display: none;
}
.page_service .service_orderflow ul li .text_box h3 {
  padding-right: 0.8em;
  font-size: 25px;
  font-size: 2.5rem;
  line-height: 38px;
  background: linear-gradient(
    to bottom, /* 方向 */
    transparent 0 67%,  /* 上半分の領域 */
    #fff200 50% 100% /* 下半分の領域 */
    );
  display: inline;
}
.page_service .service_orderflow ul li .text_box small {
  margin-bottom: 5px;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 26px;
  display: block;
}

.page_service .service_production {
  padding: 110px 0;
  color: #fff;
  background: #666666;
}
.page_service .service_production .container {
  position: relative;
}
.page_service .service_production .btn_more {
  position: absolute;
  top: 10px;
  right: 15px;
}
.page_service .service_production .btn_more a {
  font-size: 16px;
  font-size: 1.6rem;
  color: #fff;
  transition: all 0.1s;
}
.page_service .service_production .btn_more a:hover {
  color: var(--brand-color);
  border-bottom: 1px solid var(--brand-color);
  transition: all 0.1s;
}
.page_service .service_production ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.page_service .service_production ul li {
  margin-bottom: 60px;
  width: calc(100%/3.45);
}
.page_service .service_production ul li a {
  color: #fff;
}
.page_service .service_production ul li h3 {
  margin-bottom: 10px;
  font-size: 15px;
  font-size: 1.5rem;
}
.page_service .service_production ul li figure {
  margin-bottom: 15px;
  width: 320px;
  height: 220px;
}
.page_service .service_production ul li figure img {
  width: 100%;
}
.page_service .service_production ul li dl {
  font-size: 12px;
  font-size: 1.2rem;
  justify-content: space-between;
}
.page_service .service_production ul li dl dt {
  width: 5.5em;
  text-align: right;
}
.page_service .service_production ul li dl dd {
  width: 75%;
}
.page_service .service_production ul li dl dd a {
  margin-right: 0.7em;
  text-decoration: underline;
}
.page_service .service_production ul li dl dd a:hover {
  color: var(--brand-color);
}

/* company
---------------------------------------------------- */


.company_head{
  background: url(../img/company_head.jpg) no-repeat 0 0;
}

#company_table{
  font-size: 18px;font-size: 1.8rem;
  text-align: left;
}

#company_table th{
  width: 30%;
  padding: 0 0 40px;
}

#company_table td{
  width: 60%;
  padding: 0 0 40px;

}

/*マップ*/

.ggmap {
  width: 100%;
  height: 682px;
}
.ggmap iframe {
  width: 100%;
  height: 682px;
}


/* recruit
---------------------------------------------------- */

.recruit{
  margin-top: 100px;
  margin-bottom: 100px !important;
}
.recruit h3 {
  margin: 2em 0;
  font-size: 22px;
  font-size: 2.2rem;
  text-align: center;
}

.recruit_table{
  width: 100%;
  font-size: 16px;font-size: 1.6rem;
  text-align: left;
  margin: 20px 0;
}

.recruit_table tr{
  border-bottom: 1px solid #e6e6e6;
}

.recruit_table th{
  background-color: #EEEEEE;
  font-weight: 700;
  width: 30%;
  padding: 30px;
}


/* privacy policy
---------------------------------------------------- */


#pp_h2{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 25px;font-size: 2.5rem;

}

.pp_inner{
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 0;
  text-align: left;
  border-top: 1px solid;
}

.pp_inner h3{
  font-size: 20px;font-size: 2rem;
  margin-bottom: 10px;
}


/* お問い合わせ contact
---------------------------------------------------- */
/* Bownow iframe 高さ調整 */
iframe#_bownow_iframe_sid_48ef16c2cc6a4deecc32 {
  padding-bottom: 70px;
}

.contact_inner{
  max-width: 1000px;
  margin: 80px auto 200px;
  text-align: center;
}

.contact_inner table{
  width: 100%;
  font-size: 16px;font-size: 1.6rem;
  text-align: left;
  margin-bottom: 40px;
}

.contact_inner table tr{
  border-bottom: 1px solid #e6e6e6;
}

.contact_inner table th{
  font-weight: 700;
  width: 30%;
  padding: 30px;
  vertical-align: top;
}
.contact_inner table td{
  width: 60%;
  padding:20px 40px;
}

.contact_inner table th span{
  background: #ffff00;
  font-size: 12px;font-size: 1.2rem;
  margin-left: 10px;
}

.contact_inner .recaptcha {
  margin: 3em 0;
}
.contact_inner .recaptcha a {
  font-weight: 500;
  text-decoration: underline;
}

/* reCAPTCHAのロゴ（バッジ）を非表示 */
.grecaptcha-badge {
  visibility: hidden; 
}

/*お申し込み確認画面へ進むボタン用*/

.w100{width: 100%;}

.mw_wp_form input[type="text"]{
  width: 100%;
  height: 30px;
}

.mwform-tel-field input[type="text"]{
  width: 20%!important;
  height: 30px;
}

.mw_wp_form input[type="email"]{
  width: 100%;
  height: 30px;
}

.mw_wp_form textarea{
  width: 100%;
  height: 100px;
}

.mw_wp_form input[type="submit"]{
  font-size: 16px;font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  color: #000;
  padding: 25px;
  background: #ffff00;
  width: 300px;
  margin: 60px auto 0;
  border: 3px solid #ffff00;

}

.mw_wp_form input[type=".mw_wp_form submit"]:link {
  color: #fff; 
  text-decoration: none;
  background: #000; 
}
.mw_wp_form input[type="submit"]:visited { color: #fff; }
.mw_wp_form input[type="submit"]:hover {
  color: #000;
  text-decoration: none;
  background: #FFF;
  border: 3px solid #ffff00;
}
.mw_wp_form input[type="submit"]:active { color: #000;}

input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}

/* パンくず
---------------------------------------------------- */

.breadcrumbs{
  font-size: 12px;font-size: 1.2rem;
  padding: 7px 0;
  margin-bottom: 100px;
}

.pankuzu_cut{
  margin: 0 10px;
}

.breadcrumbs a:link { color: #000;text-decoration: none; }
.breadcrumbs a:visited { color: #000; }
.breadcrumbs a:hover { 
  color: #000; 
  text-decoration: none;
  border-top: 2px solid #ffff00;
  padding-top: 3px;
}



/* TOPへ
---------------------------------------------------- */
.btn_top_wrap {
    display: none;
}

/* フッタ
---------------------------------------------------- */
footer {
  padding: 60px 0 40px;
  font-size: 13px;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  color: #fff;
  background: #000;
}
footer .container {
  margin: 0 auto;
  max-width: 1080px;
}
footer h1 {
  margin-bottom: 10px;
  max-width: 120px;
}
footer address {
  margin-bottom: 25px;
}
footer address h2 {
  font-size: 16px;
  font-size: 1.6rem;
}
/* safari 電話リンクを自動で追加をオフ */
footer address p.tel a[href^="tel:"] {
  text-decoration: none;
  pointer-events: none;
}
/* safari 電話リンクを自動で追加をオフ */
footer address p.tel a {
  pointer-events: none !important;
  color: #fff !important;
  text-decoration: none !important;
}
footer address p.tel a:visited {
  color: #fff !important;
}
footer address p.addr {
  margin-bottom: 5px;
  font-size: 14px;
  font-size: 1.4rem;
}
footer address p.addr .fas {
  margin-left: 25px;
  font-size: 22px;
  font-size: 2.2rem;
  color: #fff;
}
footer .sns li {
  margin-right: 2em;
  letter-spacing: 0.08em;
  display: inline-block;
}
footer .sns li a {
  color: #fff;
}
footer .sns li .fab {
  margin-right: 0.3em;
  font-size: 22px;
  font-size: 2.2rem;
  vertical-align: middle;
}
footer ul li a:hover {
  color: #fff000;
}
footer .footer_nav {
  height: 320px;
  column-count: 2;
  column-fill: auto;
}
footer .footer_nav li:nth-of-type(-n+2) {
  margin-right: 45px;
}
footer .footer_nav li:nth-of-type(n+3) {
  max-width: 300px;
}
footer .footer_nav li a {
  font-weight: 500;
  color: #fff;
}
footer .footer_nav li:has(> ul) ul {
  margin-top: 3px;
  padding-top: 5px;
  border-top: 1px solid #fff;
}
footer .copyright {
  letter-spacing: 0.08em;
  text-align: center;
}


/* cookie クッキー
---------------------------------------------------- */
.cookie__consent {
  transition: opacity 0.5s 1s ease, visibility 0s 1s ease;
  background: rgba(251, 251, 251, 0.9);
  position: fixed;
  z-index: 999;
  bottom: 0;
  width: 100%;
	box-sizing: border-box;
  visibility: hidden;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.1) !important;
}
.cookie__consent.is-show {
  visibility: visible;
}
.cookie__warpper {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
}
.cookie__text {
  margin-bottom: 1.5em;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.8;
}
.cookie__btn {
	width: 260px;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
	justify-content: space-between;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}
.cookie__consent .cookie__btn button {
  width: 120px;
  height: 40px;
	font-size: 13px;
	font-size: 1.3rem;
  border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s;
	cursor: pointer;
}
.cookie__consent .cookie__btn button:hover {
	transition: all 0.3s;
}
.cookie__agree {
  background: var(--brand-color);
  border: 1px solid var(--brand-color);
}
.cookie__agree:hover {
	background: #fff;
	border-color: var(--brand-color);
}
.cookie__reject {
	color: #333;
	background: #eaeaea;
  border: 1px solid #eaeaea;
	box-sizing: border-box;
}
.cookie__reject:hover {
	background: #f8f8f8;
}

/* cookieボタン クリック後にフェードアウト */

/* ゆっくり消える */
.cc-hide2 {
	animation: hide 1s linear 0s;
	animation-fill-mode: forwards;
}
@keyframes hide {
	from {
			opacity: 1;
	}
	to {
			opacity: 0;
			visibility: hidden;
	}
}


/* works
---------------------------------------------------- */

.works_head{
  background: url(../img/works_head.jpg) no-repeat 0 0;
}

/*アーカイブ*/

#category_list{
  text-align: right;
}

#category_list ul li{
  display: inline-block;
  padding: 0 12px;
}

#category_list a:link { color: #000;text-decoration: none; }
#category_list a:visited { color: #000; }
#category_list a:hover { 
  color: #000; 
  text-decoration: none;
  border-top: 2px solid #ffff00;
  padding-top: 3px;
}
#category_list a:active {
    color: #000; 
  text-decoration: none;
  border-top: 2px solid #ffff00;
  padding-top: 3px;
}

.works_inner_archive{
  display: grid;
  grid-gap: 45px;
  grid-template-columns: repeat(auto-fit, minmax(254px, 1fr));
  margin: 65px auto 200px;
}

/*シングル*/
.works_inner h2{
  font-size: 40px;font-size: 4rem;
  border-bottom: 5px solid #FFFF00;
  padding-bottom: 7px;
  display: inline-block;
}

.works_inner h2 span img{
  margin-right: 16px;
  margin-bottom: -5px;
}

#w_title{
  font-size: 25px;font-size: 2.5rem;
  margin-top: 40px;
  font-weight: 500;
}

#w_url{
  font-size: 16px;font-size: 1.6rem;
  margin-top: 10px;
}

#w_lead{
  font-size: 16px;font-size: 1.6rem;
  line-height: 32px;
  margin: 20px 0 10px;
}

#works_box{
  display: flex;
  flex-wrap: wrap;
}

#works_box span{
  font-weight: 500;
  padding: 1px 10px;
  margin:10px 10px 0 0;
  background: #E2E2E2;
  -webkit-border-radius: 3px;
          border-radius: 3px;
}

/*コンテンツ*/

.works_inner {
  margin: 0 auto;
  max-width: 1000px;
}

.works_content{
  margin: 0 0 0;
  display: flex;
  flex-wrap: wrap;
}

.works_content h3{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 25px;font-size: 2.5rem;
  margin: 0 20px 0 0;
}

.works_content span{
  font-weight: 500;
  padding: 0 10px ;
  margin: 0px 10px 10px 0;
  background: #FFFF00;
  -webkit-border-radius: 3px;
          border-radius: 3px;
}

.works_content figure {
  width: 100%;
}

.works_content img{
  width: 100%;
  margin-top: 25px !important;
}


/*コンテンツ 2カラム*/

.works_content_grid{
  display: grid;
  grid-gap: 70px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin: 100px 0 0;
}

/* blog
---------------------------------------------------- */

#blog_field{
  max-width: 740px;
  margin: 0 auto;
  padding: 0 0 0;
  border-bottom: 1px solid #E2E2E2;
}

.blog_body{
  margin: 40px 0 0;
  padding: 10px 0 ;
}

.date{
  font-size: 12px;font-size: 1.2rem;
  color: #AAAAAA;
}

/*wpのネイティブ解除*/

.blog_body table{
  width: 100%!important;
  padding: 0;
  margin: 30px 0;
}
.blog_body table td{
  padding:  5px 20px;
  border: 1px solid;
  background: #e0f1f0;
}
.blog_body table td:nth-child(2n){
  background: #FFF;
}

strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

#blog_field h2{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 28px;font-size: 2.8rem;
  font-weight: 500;
  line-height: 40px;
  padding: 0 0 15px ;
  border-bottom: 1px solid #E2E2E2;
}

.blog_body h1{display: none;}
.blog_body h2{display: none;}

.blog_body h3{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 24px;font-size: 2.4rem;
  font-weight: 500;
  line-height: 35px;
  padding: 20px 0;
  margin: 0;
  clear: both;
}

.blog_body h4{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 20px;font-size: 2rem;
  font-weight: 500;
  padding: 20px 0;
  clear: both;
}

.blog_body a:link { color: #8E0108;text-decoration: none;}
.blog_body a:visited { color: #8E0108; }
.blog_body a:hover { color: #333;text-decoration: none;}
.blog_body a:active { color: #333;}


/* img */
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }

.blog_body img[class*="wp-image-"],
.blog_body img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
    margin: 5px 0 0;
    padding: 0;
}

#post_blog img{
  max-width:100%!important;
  height: auto!important;
  display: block;
  line-height: 0;
}

.clear{clear: both;margin: 0;padding: 0;}

.wp-caption{
  margin: 0 5px 30px;
  max-width: 100%;/*必須*/
  padding: 0;
}

.wp-caption-text{
  font-size: 12px;font-size: 1.2rem;
  line-height: 20px;
  text-align: center;
  padding: 0;
  margin: 8px 0 5px!important;
}

/* 個別記事ナビゲーション
---------------------------------------------------- */
.btn {
  max-width: 100%;
  display: -webkit-flex;
  display: -webkit-box;
    display: -ms-flexbox;
  display: -moz-flex;
    display: flex;
  -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
  justify-content: space-between; 
  list-style: none;
  text-align:center;
  position: relative;
  margin-top: 100px;
}
.btn .btn-prev a {
  float: left;
  height: 40px;
  padding: 0 15px 0 0;
  line-height: 40px;
}
.btn .btn-prev a:after {
  position: absolute;
  left: 15px;
}
.btn .btn-next a {
  float: right;
  padding: 0 0 0 15px;
  line-height: 40px;
}
.btn .btn-next a:after {
  position: absolute;
  right: 15px;
}


/* hover
---------------------------------------------------- */

/* Radial Out */
.hover_btn01 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
  background: #FF0;
  border: 3px solid #FF0;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  width: 140px;
  height: 140px;
  line-height: 140px;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  font-size: 15px;font-size: 1.5rem;
  font-weight: 500;
}
.hover_btn01:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFF;
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hover_btn01:hover, .hover_btn01:focus, .hover_btn01:active {
  color: #000;
  border: 3px solid #FF0;
}
.hover_btn01:hover:before, .hover_btn01:focus:before, .hover_btn01:active:before {
  -webkit-transform: scale(2);
  transform: scale(2);
}

/* contact */
.hover_btn02 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  width: 100%;
  padding: 40px 0;
  background: #FF0;
}
.hover_btn02:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hover_btn02:hover, .hover_btn02:focus, .hover_btn02:active {
  color: #000;
}
.hover_btn02:hover:before, .hover_btn02:focus:before, .hover_btn02:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* view all btn */

.view_all_btn{
  font-size: 16px;font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  margin:80px 0 150px;
}

.view_all_btn a:link { color: #fff;text-decoration: none;}
.view_all_btn a:visited { color: #fff; }
.view_all_btn a:hover { color: #000;text-decoration: none;}
.view_all_btn a:active { color: #000;}

.hover_btn03 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  width: 250px;
  padding: 10px 0;
  border: 3px solid #000;
  background: #000;
}
.hover_btn03:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hover_btn03:hover, .hover_btn03:focus, .hover_btn03:active {
  color: #000;
}
.hover_btn03:hover:before, .hover_btn03:focus:before, .hover_btn03:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.hover_btn04 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  width: 250px;
  margin: 8px 20px;
  padding: 10px 0;
  border: 3px solid #FF0;
  background: #FF0;
}

.hover_btn04:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hover_btn04:hover, .hover_btn04:focus, .hover_btn04:active {
  color: #FF0;
}

.hover_btn04:hover:before, .hover_btn04:focus:before, .hover_btn04:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.hover_btn04 .icon_arrow {
    display: inline-block;
    margin: 0 -10px 0 10px;
    padding-left: 10px;
    height: 10px;
    background: url(../img/icon_arrow.svg) no-repeat;
}

.view_all_btn02 a:link { color: #000;text-decoration: none;}
.view_all_btn02 a:visited { color: #000; }
.view_all_btn02 a:hover { color: #000;text-decoration: none;}
.view_all_btn02 a:active { color: #000;}


/* 単品パーツ
---------------------------------------------------- */
.clear{clear: both;}
.img_center{display: block;margin: 0 auto;}

.center {text-align: center;margin: 0 auto;}
.left {text-align: left;}
.right{text-align: right!important;}
.flr{float: right;}
.fll{float: left;}
.bd {font-weight: 700;}

.jp_font{font-family: 'Noto Sans Japanese', sans-serif!important;}

.grayout{
  color: #666666;
}

.bk{color: #000!important;}

.attention{background: #ffff00;}

.line_bottom{
    border-bottom: 1px solid #E2E2E2;
}

.p10{font-size: 10px;font-size: 1rem;}
.p12{font-size: 12px;font-size: 1.2rem!important;}
.p14{font-size: 14px;font-size: 1.4rem!important;}
.p16{font-size: 16px;font-size: 1.6rem;}
.p20{font-size: 20px;font-size: 2rem!important;}


.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml50{margin-left: 50px!important;}
.ml18 {margin-left: 18px;}
.ml30{margin-left: 30px!important;}
.ml-20{margin-left: -20px;}

.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.mr50{margin-right: 50px!important;}
.mr80{margin-right: 80px!important;}
.mr90{margin-right: 90px!important;}
.mr100{margin-right: 100px!important;}

.mr-30{margin-right: -30px;}
.mr-150{margin-right: -150px;}


.m15{margin-left: 15px;margin-right: 15px;}
.m40{margin-left: 40px;margin-right: 40px;}
.m30 {margin: 30px;}
.m10{margin: 10px;}

.mt-4{margin-top: -4px;}
.mt-5{margin-top: -5px;}
.mt-10{margin-top: -10px;}
.mt-20{margin-top: -20px;}
.mt10{margin-top: 10px!important;}
.mt15{margin-top: 15px!important;}
.mt20{margin-top: 20px!important;}
.mt25{margin-top: 25px!important;}
.mt28{margin-top: 28px!important;}
.mt30{margin-top: 30px!important;}
.mt33{margin-top: 33px!important;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}
.mt100{margin-top: 100px;}
.mt120{margin-top: 120px;}
.mt70{margin-top: 70px;}
.mt80{margin-top: 80px;}


.mtb15 {margin-top: 15px;margin-bottom: 15px;}
.mtb20{margin-top: 20px;margin-bottom: 20px;}
.mtb30{margin-top: 30px;margin-bottom: 30px;}
.mtb50{margin-top: 50px;margin-bottom: 50px;}
.mtb100{margin-top: 100px;margin-bottom: 100px;}

.mb1{margin-bottom: 1px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb18{margin-bottom: 18px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40 {margin-bottom: 45px;}
.mb50{margin-bottom: 50px;}
.mb53{margin-bottom: 55px;}
.mb70{margin-bottom: 70px;}
.mb100{margin-bottom: 100px;}
.mb120{margin-bottom: 120px;}
.mb150{margin-bottom: 150px;}
.mb200{margin-bottom: 200px;}


.ptb30{padding: 30px 0;}

.pt10{padding-top: 10px!important;}
.pt50{padding-top: 50px;}
.pt60{padding-top: 60px;}

.pt30{padding-top: 30px!important;}
.pl70{padding-left: 70px;}

.pb70{padding-bottom: 70px;}
.pb50{padding-bottom: 50px;}
.pb30{padding-bottom: 30px;}
.pb20{padding-bottom: 20px;}
.pb15{padding-bottom: 15px;}
.pb80{padding-bottom: 80px;}
.pb120{padding-bottom: 120px;}
.pb100{padding-bottom: 100px;}



/*======名刺封筒印刷ページ======*/
/*共通*/
#namecard {
  color: #3d3f41;
}


/*共通--フォント*/
.font_size_14 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.4;
}
.font_size_16 {
  font-size: 16px;
  font-size: 1.6rem;
}
.font_size_18 {
  font-size: 18px;
  font-size: 1.8rem;
}
.font_size_20 {
  font-size: 20px;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 80px;
}
.font_size_22 {
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.6;
}
.font_size_25 {
  font-size: 25px;
  font-size: 2.5rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  letter-spacing: -0.05em;
  vertical-align: 0;
}
.font_size_27 {
  font-size: 27px;
  font-size: 2.7rem;
  border-left: 2px solid #d1d2d3;
  border-bottom: 2px solid #d1d2d3;
  padding: 0 0 8px 20px;
  margin-bottom: 40px;
}
.font_size_28 {
  font-size: 28px;
  font-size: 2.8rem;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.font_size_30 {
  font-size: 30px;
  font-size: 3rem;
  font-weight: 700;
}
.font_size_35 {
  font-size: 35px;
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.05em;
  padding-bottom: 40px;
}
.font_size_40 {
  font-size: 40px;
  font-size: 4rem;
  padding-top: 250px;
}
.plus{
  vertical-align: 3px;
}
.price_marker {
  font-weight: 600;
  vertical-align: text-top;
  display: inline;
  background: #fbf137;
  border-radius: 10px;
  padding: 10px 5px 3px 7px;
  margin-left: 10px;
}
#namecard h2 {
  text-align: center;
}
#namecard h2 .marker {
  display: inline-block;
  background: linear-gradient(transparent 65%, #fbf137 0%);
  margin-bottom: 15px;
}
#namecard small ul li::before {
  content: "※";
  font-size: 15px;
  padding-right: 3px;
}

/*共通--ヘッダー*/
.header_bgw {
  width: 100%;
  height: 150px;
  background-color: #fff;
  margin-top: -90px;
}
.namecard_head {
width:100%;
display: flex;
justify-content: center;
background-size: cover;
}
.namecard_head .head_text h1 {
  font-size: 40px;
  font-size: 4rem;
  text-align: center;
  margin-top: -250px;
  padding-bottom: 15px;
}
.namecard_head {
  position: relative;
  width: 100%;
}
.namecard_head video {
  margin: -400px 0 0 auto;
  z-index: -1;
}
.namecard_head .head_text {
  color: #fff;
  text-align: center;
  position: absolute;
  top: 80%;
  z-index: 10;
}

/*共通--レイアウト*/
#namecard .inner {
  max-width: 1000px;
  padding: 20px;
  margin: auto;
}

.item .font_size_22 {
  color: #fff;
  background-color: #404143;
  border-radius: 2px;
  padding: 2px 10px;
  margin-bottom: 10px;
}
.other .layout_left {
  text-align: left;
}
.other .layout_right {
  text-align: right;
}

/*OUR STRENGTHS*/
.strengths {
  margin-bottom: 130px;
}
.strengths .circle,
.strengths h2 {
  text-align: center;
}
.strengths_contents {
  width: 100%;
  background: url('../img/namecard_img/strengths-bg.jpg') no-repeat;
  background-size: cover;
}
.strengths .point {
  background-color: #fff;
  margin-bottom: 20px;
}
.strengths .point .flexbox_text .font_size_22::after {
  content: "";
  display: block;
  width: 50px;
  height: 8px;
  background-color: #fbf137;
  margin: 15px 0;
}

/*CARD*/
/*paper*/
.paper .box_image {
  background-color: #e8e8ea;
}

/*other*/
.border {
  border-bottom: 1px solid #cccccc;
  padding-bottom: 3px;
  margin-bottom: 10px;
}
.border .layout_left {
  width: 70%;
}
.border .layout_right {
  width: 30%;
}

/*ENVELOPE*/
/*basicsize*/
.basicsize .flexbox {
  text-align: center;
}
.basicsize .font_size_22 {
  text-align: left;
}

/*reference*/
.reference table {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  border: 5px solid #e6e6e6;
}
.reference tr {
  font-weight: 600;
  background-color: #fff;
  border: 1px solid #cccccc;
}
.reference th,
.reference td {
  border-right: 5px solid #e6e6e6;
}
.reference table .font_size_14 {
  font-weight: 500;
}

/*769px以上*/
@media screen and (min-width: 769px) {

/*======WORKSページ======*/
/*コンテンツ 2カラム*/
.works_content_grid{
  grid-template-columns: repeat(auto-fit, minmax(368px, 1fr));
}

/*======名刺封筒印刷ページ======*/
#namecard .pc_none {
    display: none;
}
#namecard h2 .marker {
    font-size: 35px;
    font-size: 3.5rem;
    font-weight: 700;
}
.item {
    margin-bottom: 150px;
}

/*CATCH*/
.catch {
    margin: 200px 0 150px 0;
}
.catch .inner {
    width: 760px;
}
.catch .flexbox_image {
    width: 30%;
    padding-bottom: 50px;
}
.catch .flexbox_text {
    width: 60%;
    margin-left: 10%;
}
.catch .flexbox_text .font_size_16 {
    line-height: 2;
}
.catch .image {
    padding-top: 80px;
}

/*OUR STRENGTHS*/
.strengths {
    margin-bottom: 200px;
}
.strengths .circle {
    padding-bottom: 120px;
}
.strengths h2 {
    padding-bottom: 60px;
}
.strengths_inner {
    max-width: 1030px;
    margin: auto;
    padding: 80px 0;
}
.strengths .point {
    width: 950px;
    height: 250px;
    display: flex;
}
.strengths .layout_left {
    position: relative;
    margin: 0 auto 30px 0;
}
.strengths .layout_left .flexbox_image {
    position: absolute;
    right: 0;
}
.strengths .layout_right {
    position: relative;
    margin: 0 0 30px auto;
}
.strengths .layout_right .flexbox_text {
    position: absolute;
    right: 70px;
}
.strengths .layout_right .flexbox_image {
    position: absolute;
    left: 0;
}
.strengths .flexbox_text {
    width: 370px;
    margin: 0 auto 0 80px;
    padding: 35px 0;
}
.strengths .flexbox_image {
    width: 435px;
    padding: 10px 0;
}

/*NAME CARD, SHOP CARD*/
/*price*/
.price .flexbox {
    margin-bottom: 20px;
}
.price .flexbox {
    width: 39%;
    margin-right: 1%;
}
.price .flexbox:last-child {
    width: 20%;
    margin-right: 0;
}

/*paper*/
.paper .flexbox {
    width: calc(100%/4);
    margin-bottom: 30px;
}
.paper .box_image {
    padding: 5px 5px 0px;
    margin: 15px;
}
.paper .box_text {
    margin-left: 15px;
}
.paper .font_size_18 {
    font-weight: 700;
}

/*order*/
.order .flexbox {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 60px;
}
.order .flexbox:nth-child(2n) {
    margin-right: 0;
}

/*other*/
.other .flexbox {
    width: 48%;
    margin-bottom: 20px;
    margin-right: 4%;
}
.other .flexbox:last-child {
    margin-right: 0;
}

/*ENVELOPE*/
.basicsize .flexbox {
    margin-bottom: 80px;
}
.basicsize .flexbox img {
    padding: 40px 0 30px 0;
}

/*reference*/
.reference table {
    width: 100%;
    margin-bottom: 30px;
}
.reference tr {
    height: 65px;
    line-height: 65px;
}

}


/* =========================================================
   2. 追加LP用コンテンツCSS (style.css - ヘッダー・フッター除外版)
   ※同名クラスの干渉防止のため、メインコンテンツ用クラスに「lp-」を付与
   ========================================================= */

:root{
  --lp-black:#000000;
  --lp-ink:#1a1a1a;
  --lp-yellow:#fff000;
  --lp-band-gray:#f8f8f8;
  --lp-cell-gray:#f0f0f0;
  --lp-rule:#e5e5e5;
  --lp-caution:#e60012;

  --lp-page:1400px;
  --lp-inner:1170px;
  --lp-footer-inner:1290px;
}

/* ---------- 共通レイアウト ---------- */
.lp-inner,
.hero__inner,
.about__inner,
.entry__inner,
.environment__inner{
  width:min(var(--lp-inner),calc(100% - 80px));
  margin-inline:auto;
}

/* ---------- 共通見出し ---------- */
.heading-en{
  margin:0;
  font-size:55px;
  font-weight:700;
  line-height:1;
  color:var(--lp-black);
  letter-spacing:0;
}
.heading-ja{
  margin:14px 0 0;
  font-size:22px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:.05em;
}
.heading-lg{
  margin:0;
  font-size:56px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:.05em;
  color:var(--lp-black);
}

/* ---------- 共通ボタン ---------- */
.lp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:20px;
  font-weight:500;
  line-height:1;
  transition:opacity .2s,background-color .2s,color .2s;
}
.lp-btn:hover{opacity:.75;}

.lp-btn--outline{width:260px;height:55px;border:1px solid var(--lp-ink);background:#fff;}
/* lp-btn--solid のサイズ指定を lp-btn--yellow と同じサイズ（257px × 50px / 15px）に変更 */
.lp-btn--solid{width:257px;height:50px;background:var(--lp-black);color:#fff;font-size:15px;}
.lp-btn--wide{height:50px;font-size:15px;letter-spacing:.04em;}
.lp-btn--bordered{width:480px;height:68px;border:2px solid var(--lp-black);font-size:26px;}
.lp-btn--yellow{width:257px;height:50px;background:var(--lp-yellow);color:var(--lp-black);font-size:15px;}
.lp-btn--white{width:318px;height:55px;background:#fff;color:var(--lp-black);font-size:18px;font-weight:700;letter-spacing:.06em;}

.lp-btn-row{display:flex;gap:20px;flex-wrap:wrap;}

/* ---------- 斜めの黄色い装飾 ---------- */
.deco-layer{
  position:absolute;
  inset:0;
  width:var(--lp-page);
  left:50%;
  transform:translateX(-50%);
  overflow:hidden;
  pointer-events:none;
}
.deco{
  position:absolute;
  height:12px;
  background:var(--lp-yellow);
  transform-origin:50% 50%;
}
.deco--a{left:624px;top:192px;width:575px;transform:rotate(-24.7deg);}
.deco--b{left:855px;top:465px;width:556px;transform:rotate(15.7deg);}
.deco--c{left:884px;top:733px;width:407px;transform:rotate(-30.9deg);}
.deco--d{left:842px;top:188px;width:587px;transform:rotate(26deg);}
.deco--e{left:987px;top:721px;width:450px;transform:rotate(-33deg);}

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{position:relative;height:360px;}

.hero__band {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;             /* 画面（ウィンドウ）の左端から右端まで一杯にする */
  height: 100%;
  
  /* 左側（100%不透明の薄グレー）から右側（イラスト付近で透明）へ伸びるグラデーション */
  background: linear-gradient(90deg, #f8f8f8 0%, #f8f8f8 40%, rgba(248, 248, 248, 0) 75%);
}

.hero__inner{position:relative;height:100%;}
.hero__text{position:absolute;top:94px;left:0;}
.hero__title{
  margin:0;
  font-size:55px;
  font-weight:700;
  line-height:1;
  color:var(--lp-black);
}
.hero__sub{
  margin:12px 0 0;
  font-size:16px;
  font-weight:500;
  letter-spacing:.16em;
  line-height:1.1;
}
.hero .lp-btn-row{margin-top:38px;}

.hero__illust{
  position:absolute;
  top:26px;
  left:605px;
  width:526px;
}

/* =========================================================
   私たちの仕事
   ========================================================= */
.about{position:relative;height:983px;overflow:hidden;}
.about__inner{position:relative;height:100%;}
.about__text {
  position: absolute;
  top: 122px;
  left: 0;
  width: 700px;
  position: relative;
  z-index: 2;
}

.kicker{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:30px;
  font-weight:500;
  line-height:1.15;
}
.kicker__rule{display:block;width:93px;height:1.5px;background:var(--lp-ink);}
.about .heading-lg{margin-top:22px;}
.about__body{
  margin-top:38px;
  font-size:18.5px;
  line-height:50px;
}
.about .lp-btn-row{margin-top:66px;gap:30px;}

.about__photos{position:absolute;inset:0;}
.about__photo{position:absolute;}
.about__photo--1{top:133px;left:810px;width:360px;}
.about__photo--2{top:503px;left:740px;width:280px;}

/* =========================================================
   エントリー帯
   ========================================================= */
.entry{height:361px;background:var(--lp-yellow);}
.entry__inner{
  height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}
.entry__text{padding-top:88px;}
.entry__title{
  margin:0;
  font-size:56px;
  font-weight:700;
  line-height:1;
  color:var(--lp-black);
}
.entry__sub{
  margin:14px 0 0;
  font-size:22px;
  font-weight:500;
  letter-spacing:.05em;
  line-height:1.1;
}
.entry__lead{
  margin-top:56px;
  font-size:17px;
  letter-spacing:.03em;
}
.entry__buttons{
  display:flex;
  flex-direction:column;
  gap:22px;
  padding-top:105px;
}

/* エントリー領域の枠付きボタン（.lp-btn--bordered）色反転ホバー */
.entry__buttons .lp-btn--bordered {
  background-color: var(--lp-yellow);
  color: #000000 !important;
  border: 2px solid #000000 !important;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.entry__buttons .lp-btn--bordered:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  opacity: 1;
}

/* =========================================================
   最下部ENTRYボタン（.lp-btn--yellow）の hover_btn04 風ホバーアニメーション
   ========================================================= */

/* ボタン本体のベース・初期状態 */
.requirements__cta .lp-btn--yellow {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #ff0 !important;      /* 初期背景色：黄色 */
  color: #000000 !important;           /* 初期文字色：黒 */
  border: 3px solid #ff0 !important; /* 初期枠線：黄色 */
  transition: color 0.5s ease, border-color 0.5s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ホバー時に左から伸びてくる白い背景擬似要素 */
.requirements__cta .lp-btn--yellow::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* ホバー時のテキスト色・枠線色・背景アニメーション */
.requirements__cta .lp-btn--yellow:hover {
  color: #000000 !important;           /* ホバー時の文字色：黒 */
  border-color: #ff0 !important;    /* 黄色枠線を維持 */
}

.requirements__cta .lp-btn--yellow:hover::before {
  transform: scaleX(1);
}

/* 矢印アイコンのスタイルとホバー時の移動 */
.requirements__cta .lp-btn--yellow .icon_arrow {
  display: inline-block;
  margin: 0 -10px 0 10px;
  padding-left: 10px;
  height: 10px;
  width: 10px;
  background: url(../img/icon_arrow.svg) no-repeat center / contain;
  transition: transform 0.3s ease;
}

.requirements__cta .lp-btn--yellow:hover .icon_arrow {
  transform: translateX(5px);
}


/* =========================================================
   実績紹介（WORK）全幅カルーセルレイアウト
   ========================================================= */

.work {
  height: auto !important;
  padding: 140px 0 160px 0;
  overflow: hidden; /* 右端へはみ出るカード領域で横スクロールバーが出ないようにする */
  position: relative;
}

/* インナーコンテナ：左端は中央インナー位置に合わせ、右端は画面端まで伸ばす */
.work__inner {
  position: relative;
  width: calc(100% - (100% - var(--lp-inner)) / 2);
  margin-left: auto;
  padding-left: 0;
}

/* @media (max-width: 1250px) {
  .work__inner {
    width: calc(100% - 80px);
    margin-left: 40px;
  }
} */

/* 左側テキスト領域 */
.work__text {
  position: relative;
  width: 520px;
  z-index: 2;
}

.work__body {
  margin-top: 30px;
  font-size: 17px;
  line-height: 42px;
  letter-spacing: .03em;
}

.work .lp-btn--solid {
  margin-top: 75px;
}

/* カルーセルリスト：左側テキストの右隣から画面右端まで全幅拡張 */
.work__cards {
  position: absolute;
  top: 5px;
  left: 560px; /* テキスト領域（520px） + 間隔（40px） */
  width: calc(100% - 560px);
  display: flex !important;
  gap: 20px;
  overflow-x: auto !important;     /* 横スクロールを許可 */
  scroll-snap-type: x mandatory;  /* カード位置の自動スナップ */
  scroll-behavior: smooth;
  padding-bottom: 20px;
  padding-right: 40px;            /* 右端の最後のカードが見切れず余白を残す調整 */

  /* スクロールバー調整 */
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  scroll-timeline: --page-scroll inline;
}

/* Chrome / Safari / Edge 用スクロールバーのカスタマイズ */
.work__cards::-webkit-scrollbar {
  height: 6px;
}
.work__cards::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
.work__cards::-webkit-scrollbar-track {
  background: transparent;
}

/* カード要素 */
.lp-card {
  width: 300px !important;
  flex: 0 0 300px !important;
  scroll-snap-align: start;
}

.lp-card a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.lp-card a:hover {
  transform: translate(5px, 5px);
  opacity: 0.8;
}

.lp-card__thumb {
  width: 300px;
  height: 380px;
  object-fit: cover;
  background: var(--lp-cell-gray);
}

.lp-card__client {
  margin-top: 27px;
  font-size: 17px;
  line-height: 24px;
}

.lp-card__tags {
  display: flex;
  gap: 20px;
  margin-top: 19px;
}

.lp-card__tags li {
  display: flex;
  align-items: center;
  height: 32px;
  padding-inline: 16px;
  background: var(--lp-cell-gray);
  font-size: 15px;
}

/* =========================================================
   オフィス写真帯
   ========================================================= */
.office-photo img{width:100%;height:501px;object-fit:cover;}

/* =========================================================
   働く環境
   ========================================================= */
.environment{position:relative;height:896px;overflow:hidden;}
.environment__inner{position:relative;height:100%;}
.environment__text{position:absolute;top:126px;left:0;width:640px;}
.environment__body{
  margin-top:31px;
  font-size:17px;
  line-height:42px;
  letter-spacing:.05em;
}

/* リスト領域の余白・行間・アイコン高さ揃えの調整 */
.marker-list {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 16px; /* li同士の上下余白を短縮 */
}

.marker-list li {
  position: relative;
  display: flex;
  align-items: flex-start; /* 上揃え（テキスト2行時も1行目に固定） */
  gap: 10px;
  font-size: 17px;
  line-height: 1.6; /* テキストの行間を確保 */
  letter-spacing: .03em;
}

.marker-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: var(--lp-yellow);
  margin-top: 0.4em; /* テキスト1行目の高さ中央に微調整 */
}

.marker-list small {
  margin-left: 6px;
  font-size: 13px;
}

.environment__note{
  margin-top:100px;
  font-size:17px;
  letter-spacing:.03em;
}
.environment .lp-btn--wide{margin-top:40px;}

.environment__photo{
  position:absolute;
  top:121px;
  left:690px;
  width:480px;
  height:640px;
  object-fit:cover;
}

/* =========================================================
   募集要項
   ========================================================= */
.requirements{padding:152px 0 0;}
.requirements__title{
  margin:0 0 44px;
  text-align:center;
  font-size:20px;
  font-weight:700;
  letter-spacing:.05em;
  color:var(--lp-black);
}

.spec{
  width:min(var(--lp-inner),calc(100% - 80px));
  margin:0 auto;
}
.spec__row{display:flex;align-items:stretch;}
.spec__row dt{
  flex:0 0 390px;
  padding:29px 31px 40px;
  background:var(--lp-cell-gray);
  font-size:15px;
  font-weight:700;
  letter-spacing:.03em;
  line-height:24px;
}
.spec__row dd{
  flex:1 1 auto;
  margin:0;
  padding:30px 0 30px 42px;
  border-bottom:1.5px solid var(--lp-rule);
  font-size:16px;
  line-height:26px;
  letter-spacing:.02em;
}

/* ■付きの見出し・リスト */
.sq::before,
.sq-list li::before{
  content:"■";
  margin-right:8px;
  font-size:12px;
  vertical-align:2px;
}

.sq_jobtype::before{
  content:"■";
  margin-right:8px;
  font-size:12px;
  vertical-align:2px;
}

.sq-list li{line-height:26px;}

.sq {
  margin-top: 30px;
}
.sq_text {
  margin-top: 2px;
}
.skill {
  margin-top: 35px;
}

/* 注記行 */
.spec__aside{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:9px;
}
.spec__rule{display:block;width:188px;height:1.5px;background:var(--lp-black);}
.spec__caution{color:var(--lp-caution);font-size:16px;letter-spacing:.04em;}

.requirements__cta{
  display:flex;
  justify-content:center;
  padding:52px 0 102px;
}

/* =========================================================
   お問い合わせ（LP内セクション）
   ========================================================= */
.contact{background:#fff;}
.contact__inner{
  position:relative;
  width:min(var(--lp-footer-inner),calc(100% - 40px));
  margin-inline:auto;
  min-height:304px;
  padding:51px 107px 0;
  background:var(--lp-yellow);
}
.contact__title{
  margin:0;
  font-size:26px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.2;
  color:var(--lp-black);
}
.contact__lead{margin-top:26px;font-size:14px;line-height:25px;}
.contact__tel{
  margin-top:37px;
  font-size:36px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1;
  color:var(--lp-black);
}
.contact__hours{margin-top:16px;font-size:14px;letter-spacing:.08em;}

.contact__action{
  position:absolute;
  top:198px;
  right:107px;
  display:flex;
  align-items:center;
}
.contact__arrow{
  position:relative;
  display:block;
  width:47px;
  height:1.5px;
  background:var(--lp-black);
}
.contact__arrow::after{
  content:"";
  position:absolute;
  right:0;
  top:-3px;
  width:8px;
  height:8px;
  border-top:1.5px solid var(--lp-black);
  border-right:1.5px solid var(--lp-black);
  transform:rotate(45deg);
}

/* =========================================================
   レスポンシブ対応
   ========================================================= */
@media (max-width:1240px){
  .about__photo,
  .environment__photo,
  .deco-layer{display:none;}

  .about__photos { display: none !important; } /* かぶさっている透明枠を消す */
  .about__text { z-index: 10; }               /* ボタン領域を前面に出す */

  .hero__illust{
    position: static;      /* 絶対配置を解除 */
    margin-top: 20px;      /* ボタンとの間の余白 */
    width: 100%;           /* コンテナ幅に合わせて伸縮 */
    max-width: 360px;      /* 画像が大きくなりすぎないよう制限 */
    height: auto;
  }

  .hero,
  .about,
  .work,
  .environment{height:auto;overflow:visible;}

  .hero__band {
    width: 100%;           /* スマホ・タブレットでも100%を維持 */
    background: linear-gradient(90deg, #f8f8f8 0%, #f8f8f8 60%, rgba(248, 248, 248, 0) 100%);
  }

  .hero__text,
  .about__text,
  .work__text,
  .environment__text {
    position:static;width:auto;padding-block:70px;
  }

  .hero__text{padding-block:50px;}

  .about__inner,
  .environment__inner{height:auto;}

  .work__inner {
    width: calc(100% - 80px);
    margin-inline: auto;
  }

  .work__text {
    width: auto;
  }

  .work__cards {
    position: static;
    width: 100%;
    margin-top: 40px;
    padding-right: 0;
  }

  .entry{height:auto;}
  .entry__inner{flex-direction:column;gap:36px;padding-block:60px;}
  .entry__text,
  .entry__buttons{padding-top:0;}

  .contact__inner{padding:44px 40px 150px;}
  .contact__action{top:auto;bottom:50px;right:40px;}

  
}

@media (max-width:760px){
  .heading-en,.hero__title,.entry__title {
    font-size:37px;
  }

  .heading-ja, .entry__sub{
    font-size:15px;
  }
  
  .heading-lg {
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: -0.02em;
  }

  .hero .lp-btn-row {
    margin-top: 20px;
  }

  .about__body{font-size:16px;line-height:30px;}
  .lp-btn--outline,.lp-btn--bordered,.lp-btn--white{width:100%;max-width:420px;}

  .lp-btn--solid {
    width: 257px;
    height: 50px;
    display: flex;
    margin-inline: auto;
  }


  .spec__row{display:block;}
  .spec__row dt{padding:18px 20px;}
  .spec__row dd{padding:20px 0 20px;}
  .contact__tel{font-size:28px;}

  .sp-only {
    display: inline; /* スマホではスマホ用改行を表示する */
  }
  .pc-only {
    display: none; /* スマホではPC用改行を消す */
  }

  .about .lp-btn-row {
    gap: 20px;
  }

  .lp-btn-row {
    flex-direction: row !important;
    width: 100%;
  }

  /* .lp-btn-row 内のボタンサイズを可変（均等幅）にしつつコンパクトに縮小 */
  .lp-btn-row .lp-btn {
    flex: 1 1 0;         /* 2つのボタンを均等幅にする */
    width: auto !important;
    max-width: none !important;
    height: 48px;        /* 高さを少し抑える */
    font-size: 15px;     /* スマホで文字が溢れないよう小さめに調整 */
    padding-inline: 8px; /* 内側の余白調整 */
  }

  .entry__lead{
    margin-top: 40px;
  }

  .entry__buttons {
    display: flex;
    flex-direction: row !important; /* 縦並び指定を解除して横並びに */
    gap: 20px;                     /* ボタン同士の間隔 */
    width: 100%;
    padding-top: 0;
  }

  .entry__buttons .lp-btn--bordered {
    flex: 1 1 0;                   /* 2つのボタンを均等な幅にする */
    width: auto !important;
    max-width: none !important;    /* 最大幅制限を解除 */
    height: 48px;                  /* スマホ用に高さを少し調整 */
    font-size: 15px;               /* 文字が溢れないよう小さめに調整 */
    padding-inline: 8px;
  }

  .hero__sub{
    font-size:15px;
    letter-spacing:.10em;
  }

  .kicker {
    font-size: 18px;
    letter-spacing: -0.02em;
  }

  .kicker__rule {
    width: 68px;
  }

  .office-photo img {
    height: 250px;
  }

  /* .work__inner {
    width: calc(100% - 40px);
  } */

  .work {
    padding: 0 0 100px 0;
  }

  .environment__body,
  .work__body {
    line-height: 30px;
  }

  .environment__note{
    margin-top: 60px;
  }

  /* スマホ表示時のみ small（※フルリモート〜）を改行 */
  .marker-list small {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }

  .requirements {
    padding: 102px 0 0;
  }

  .spec__row dd{
    border-bottom: none;
  }

  #footer_contact .btn_contact a {
    padding: 15px 40px;
  }




}


@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}