/*
  Template:flash
  Theme Name:   AS株式会社
  Description:  AS株式会社 TEMPLATE
  Version:      0.1

  Tags:         right-sidebar, blog

  Text Domain:  PINEBOOKS
*/
@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');


/* ---------- Design Tokens ---------- */
:root {
  --color-cream:        #FFF6ED;
  --color-peach:        #F5DBC1;
  --color-orange:       #EF6E18;
  --color-orange-light: #F4A169;
  --color-brown:        #482F22;
  --color-brown-soft:   #6B5647;
  --color-white:        #FFFFFF;
  --color-border:       #E4D2BC;

  --color-line:         #D7D1CB;

  --font-heading: "Noto Serif JP", serif;
  --font-body:    "Noto Sans JP", sans-serif;
  --font-en-title: "Jost", sans-serif;


  --fs-hero:  clamp(21px, 4.5vw, 37px);
  --fs-herosub:  clamp(14.5px, 1.7vw, 20px);
  --fs-h2:    clamp(26px, 4.5vw, 37px);
  --fs-h3:    clamp(22px, 4.5vw, 30px);

  --fs-subtitle: 1.56rem;

  --fs-cc:    1.38rem;
  --fs-big:   clamp(16px, 3.5vw, 20px);

  --fs-small: 0.89rem;
  --fs-small2: 0.83rem;
  --fs-small3: 0.67rem;

  --fs-eyebrow: 0.8rem;

  --radius-sm: 4px;
  --shadow-card: 0 4px 20px rgba(72, 47, 34, 0.08);
  --transition: 0.25s ease;

  /* Page Builder の行間パディングと統一しておく基準値 */
  --so-row-padding-y: 96px;
  --so-row-padding-y-sm: 56px;
}


html {
/*  font-size: 100%;*/
    font-size: 14.5px;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  color: var(--color-brown);
  font-size: 100%;
}

.logo .logo-image a img {
    width: 18rem;
}

h1, h2, h3, h4,
.panel-grid-cell .widget-title {
  font-weight: 700;
  color: var(--color-brown);
}

/*
h1.trail-title {
    visibility: hidden;
    line-height: 0;
    height: 0;
}
*/
#content {
    line-height: 2.1;
}
#content h2, #content h3,
#content h4, #content h5, #content h6 {
  font-weight: 700;
  color: var(--color-brown);
  margin-bottom: 1em;
  line-height: 1.2;
}




#content h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
}

#content h2.title {

}
#content h2.title span {
  font-family: var(--font-en-title);
  display: block;
  font-size: var(--fs-subtitle);
  margin-bottom: 0.5rem;
  color: var(--color-orange);
  font-weight: 600;
  letter-spacing: 0.2em;
}

#content h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
}

#content h3.title {
  text-align: center;
  margin-bottom: 1.2em;
}

#content h3.title span {
  font-family: var(--font-en-title);
  display: block;
  font-size: var(--fs-subtitle);
  margin-top: 1rem;
  color: var(--color-orange);
  font-weight: 600;
  letter-spacing: 0.2em;
}

#content h3.single {
  padding: 0 1em;
  text-align: center;
  position: relative;
}
#content h3.single:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: var(--color-line);
}

#content h3.single span {
  position: relative;
  padding: 0 1em;
  background: var(--color-white);
}

#content h4 {
  font-family: var(--font-body);
  font-size: var(--fs-big);
}
#content h5 {
  font-family: var(--font-body);
  font-size: 1.1rem;
}
#content h6 {
  font-family: var(--font-body);
  font-size: 1rem;
}


a { transition: opacity var(--transition); }
a:hover { opacity: 0.7; }

a:focus-visible,
button:focus-visible,
.so-panel a:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}


.row-reverse {
    flex-direction: row-reverse;
}


.no-margin-bottom p {
  margin-bottom: 0;
}
.no-margin-bottom-lh0 p {
  margin-bottom: 0;
  line-height: 0;
}
.en-title {
  font-family: var(--font-en-title);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  *, .panel-grid, .so-panel { transition: none !important; animation: none !important; }
}

/* ---------- Header / Nav ---------- */
.site-header,
#masthead {
  background-color: var(--color-cream);
}

#masthead .header-bottom {
    background-color: unset;
}

nav.breadcrumb-trail.breadcrumbs {
    background-color: var(--color-white);
    border-bottom: 0.5px solid var(--color-line);
}

nav.breadcrumb-trail.breadcrumbs h1.trail-title {
    font-weight: 600;
}


.main-navigation a,
.site-header .nav-menu a {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.05em;
}

#site-navigation ul li a {
    color: var(--color-brown);
	  font-weight: bold;
}


#site-navigation ul li.gnContact a {
    display: inline;
    background-color: var(--color-orange);
    padding: 0.6em 1.2em;
    color: var(--color-white);
    border-radius: 5px;
}

#site-navigation ul li.gnContact i.fa-solid.fa-envelope {
    font-size: 120%;
    vertical-align: text-bottom;
    display: inline;
    margin-right: 0.2em;
}






/* ---------- 4. SiteOrigin Page Builder 構造の共通リセット ---------- */

/* Row / Cell の余計な余白を統一し、デザインシステムの余白に揃える */
.panel-layout .panel-grid-cell .so-panel:last-child .panel-last-child {
  margin-bottom: 0;
}

/* Row単位の縦パディングは Page Builder の「Row設定 > レイアウト > パディング」で
   96px 0 / 56px 0 のように設定するのが基本。CSSでの強制上書きは最小限に留める。 */
.panel-row-style {
  color: inherit;
}

/* 背景画像付きRow内のテキストを読みやすくする共通オーバーレイ調整 */
.panel-has-overlay .panel-background-overlay {
  opacity: 0.35;
}

/* ---------- 5. Button ----------
   SiteOrigin Widgets Bundle の「ボタン」ウィジェット、または
   TinyMCEウィジェット内の <a class="so-btn-primary"> に付与して使用。
------------------------------------------------------------------------- */
.so-btn-primary,
.so-panel a.so-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  background-color: var(--color-orange);
  color: var(--color-white) !important;
  border: none;
}
.so-btn-primary:hover {
  background-color: var(--color-orange-light);
  opacity: 1;
}

.so-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: var(--fs-small);
  font-weight: 700;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--color-brown) !important;
  border: 1px solid var(--color-brown);
}
.so-btn-outline:hover {
  background-color: var(--color-brown);
  color: var(--color-white) !important;
  opacity: 1;
}

.so-btn-arrow::after { content: "\25B6"; font-size: 0.6em; margin-left: 4px; }

/* ---------- 6. Section 背景ユーティリティ ----------
   Page Builder の各Rowの「Row設定 > CSSクラス」欄に
   so-bg-cream / so-bg-peach / so-bg-white / so-bg-dark を入力するだけで
   セクション背景を切り替えられる。
------------------------------------------------------------------------- */
.panel-row-style.so-bg-cream,
.panel-grid.so-bg-cream > .panel-row-style { background-color: var(--color-cream); }

.panel-row-style.so-bg-peach,
.panel-grid.so-bg-peach > .panel-row-style { background-color: var(--color-peach); }

.panel-row-style.so-bg-white,
.panel-grid.so-bg-white > .panel-row-style { background-color: var(--color-white); }

.panel-row-style.so-bg-dark,
.panel-grid.so-bg-dark > .panel-row-style {
  background-color: var(--color-brown);
  color: var(--color-white);
}
.so-bg-dark .widget-title,
.so-bg-dark h1, .so-bg-dark h2, .so-bg-dark h3 { color: var(--color-white); }

/* ---------- 7. Eyebrow / 見出し ---------- */
.so-eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 8px;
}

.so-section-title { font-size: var(--fs-h2); text-align: center; margin-bottom: 8px; }
.so-section-lead   { text-align: center; color: var(--color-brown-soft); margin-bottom: 40px; }

/* ---------- 8. Feature Grid ----------
   通常のPage Builderレイアウト（Row内に3〜4セル）で、各セルに
   アイコンウィジェット＋見出しウィジェットを配置し、セルに
   「so-feature-cell」クラスを付与して使用する。
------------------------------------------------------------------------- */
.panel-grid-cell.so-feature-cell {
  text-align: center;
  padding-inline: 16px;
}
.so-feature-cell .sow-icon-container,
.so-feature-cell .so-widget-sow-icon {
  color: var(--color-orange);
  margin-bottom: 20px;
}
.so-feature-cell .widget-title {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
}
.so-feature-cell p {
  font-size: var(--fs-small);
  color: var(--color-brown-soft);
}

/* ---------- 9. Numbered Step Flow ----------
   「ご依頼の流れ」のような4分割Rowのセルに
   「so-step-cell」クラスを付与し、テキストウィジェット冒頭に
   <span class="so-step-number">01</span> を挿入して使用。
------------------------------------------------------------------------- */
.panel-grid-cell.so-step-cell { text-align: center; }
.so-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background-color: var(--color-orange);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--fs-small);
}

/* ---------- 10. Banner Card（2カラムRow：写真＋コピー） ---------- */
.panel-grid.so-banner-card { background-color: var(--color-peach); }
.panel-grid.so-banner-card .panel-grid-cell:not(.so-banner-media) {
  padding: 48px 56px;
}
.so-banner-media img { width: 100%; height: 100%; object-fit: cover; }

/* Flashコンテンツ幅とセル内側の余白のバランスを取るための最小限の指定 */
@media (min-width: 782px) {
  .panel-grid.so-banner-card { align-items: center; }
}

/* ---------- 11. Table（会社概要）----------
   TinyMCEウィジェット内にHTMLテーブルを直接記述する場合に適用。
------------------------------------------------------------------------- */
.so-panel table.profile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.so-panel table.profile-table th,
.so-panel table.profile-table td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.so-panel table.profile-table th {
  width: 220px;
  background-color: var(--color-peach);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.so-panel table.profile-table td { background-color: var(--color-cream); }

/* ---------- 12. SiteOrigin Widgets Bundle（sow-*）の見た目調整 ----------
   Widgets Bundleを有効化している場合、標準の.sow-button等は
   ここで上書きするとPage Builder上の設定画面と齟齬が出にくい。
------------------------------------------------------------------------- */
.sow-button-envelope .sow-button {
  background-color: var(--color-orange) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}
.sow-button-envelope .sow-button:hover {
  background-color: var(--color-orange-light) !important;
}

.sow-headline-container .sow-headline-default {
  font-family: var(--font-heading);
  color: var(--color-brown);
}

.sow-icon-container .so-icon-shape {
  fill: var(--color-orange) !important;
}

/* ---------- Footer ---------- */
footer#colophon {

}

footer#colophon p {
  margin: 0;
}

#top-footer, #bottom-footer {
  background-color: unset;
}

#top-footer {
    padding: 30px 0 5px;
}

#sow-editor-4 p {
  text-align: right;
  margin: 0;
}
#sow-editor-4 img {
  width: 100%;
  max-width: 280px;
}

#bottom-footer .copyright {
  float: none;
}

#top-footer .widget {
  margin-bottom: 0;
}
#top-footer .textwidget {
  font-size: var(--fs-small2);
}

.copyright p {
  font-size: var(--fs-small3);
  color: var(--color-white);
  text-align: center;
  margin: 0;
}
.site-footer,
#colophon {
  background-color: var(--color-brown);
  color: var(--color-white);
  font-size: var(--fs-small);
}
.site-footer a,
#colophon a { color: var(--color-white); }

#scroll-up {
    background-color: unset;
    border-radius: 100px;
    color: var(--color-white);
    display: none;
    padding: 0;
    opacity: 0.8;
    filter: alpha(opacity=80);
    bottom: 80px;
    right: 10px;

}
#scroll-up img {
  padding: 0;
  width: 50px;
}








/* ---------- 13. Top Slide ----------
   トップページのスライドショー（SiteOrigin Page Builderの
   「スライドショー」ウィジェット）に適用。 */

.top-slide-title div,
.top-slide-subtitle div,
.top-slide-subtitle p {
    font-family: unset !important;
	font-size: unset !important;
  font-weight: unset !important;
  letter-spacing: unset !important;
}

.top-slide-title {
  font-family: var(  --font-heading);
  font-size: var(--fs-hero) !important;
  margin-bottom: 0.8em !important;
  font-weight: 700;
  letter-spacing: 0.1em !important;
  line-height: 1.2 !important;
}
.top-slide-subtitle {
	font-family: var(--font-body);
  font-size: var(--fs-herosub) !important;
  font-weight: 500;
  letter-spacing: 0.1em !important;

}

.top-slide-subtitle p {
    line-height: 1.9 !important;
}

.n2-ss-slide-backgrounds.n2-ow-all {
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 80%);
    -webkit-mask-image
Sets the mask layer image of an element.
: linear-gradient(to left, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 80%);
}



.column-two>div,
.column-three>div {
    margin-bottom: 1rem !important;
}

.column-three {
    flex-wrap: wrap !important;
    flex-direction: row !important;
}

.column-three>div {
    width: 30% !important;
}


/* ---------- 14. レスポンシブ ----------
   SiteOrigin Page Builderのモバイル切替幅（既定値は概ね780px。
   実際の値は 外観 > ウィジェット > SiteOrigin Page Builder の
   設定画面、または当テーマのPage Builder設定で必ずご確認ください）
   に極力揃えています。
------------------------------------------------------------------------- */
@media (max-width: 780px) {
  :root {
    --so-row-padding-y: 56px;
  }

  .panel-grid.so-banner-card .panel-grid-cell:not(.so-banner-media) {
    padding: 32px 24px;
  }

  .so-panel table.profile-table,
  .so-panel table.profile-table thead,
  .so-panel table.profile-table tbody,
  .so-panel table.profile-table th,
  .so-panel table.profile-table td,
  .so-panel table.profile-table tr {
    display: block;
    width: 100%;
  }
  .so-panel table.profile-table th { border-bottom: none; padding-bottom: 4px; }



#sow-editor-4 p {
  text-align: unset;
}
#sow-editor-4 img {
  max-width: 180px;
}

}

/* Table */
table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid var(--color-line);
}
th, td {
  padding: 0.8em 2em;
  border: 1px solid var(--color-line);
}

th {
  background-color: var(--color-peach);
}


a.sowb-button.ow-icon-placement-left.ow-button-hover {
    min-width: 18em;
}

.alignItemStretch {
    align-items: stretch !important;
}

.alignItemStretch>div {
    height: stretch;
}


/*

.arrow-container>div {
  height: stretch;
  height: 100%;
}

.set-middle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: stretch;
  height: 100%;
  position: relative;
}

.set-middle::after {
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    background-color: #000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 50%;
}


.arrow {
  width: 50%;
}


.set-middle>div {
    position: absolute;
    top: 37%;
}

*/
.set-bottom {
  display: flex;
  align-items: end;
  height: stretch;
}

.arrow {
    position: relative;
}
.arrow::after {
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);

    top: 40%;

    right: 0;

    margin: auto;
}




/* News */
.news-header {
    padding: 60px 0 0;
}
/*
.news-header.sub-header {
    background-color: #095CA8;
    padding: 100px 0 100px 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: 5rem;
    text-align: center;
    color: #fff;
}
*/
#content article .entry-header .entry-title {
    /* border-left: 0.2rem solid var(--color-orange); */
    font-weight: 600;
    font-size: 1.2rem;
    padding: 0.1rem 0.1rem 0.1rem 0.5rem;
}





















/*
#content .rpwwt-widget h3.widget-title {
		padding-top: 20px;
		margin-bottom: 1rem;
    text-align: center;
    font-size: 30px;
}*/
.rpwwt-widget ul li {
    /*border-bottom: 1px dotted #ccc;*/
    margin: 0;
    padding: 0.3em;
}

.rpwwt-post-date {
    display: inline-block;
    float: left;
    width: 8em;
    text-align: right;
}
#content .rpwwt-widget ul li a {
    display: inline-block;
    float: right;
    width: calc(100% - 9em);
    text-decoration: none;
}

/* SITE NAVIGATION */
#site-navigation ul li a {
    color: #4c5867;
}





/* Mail Form */


.mft-cell.mfd:before {
    content: "必須";
    position: absolute;
    left: -3rem;
    background-color: var(--color-orange);
    color: var(--color-white);
    padding: 0.3rem 0.5rem;
    text-align: center;
}

.mftable {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1.5em;
}

.mft-row {
    display: table-row;
}

.mft-cell {
    display: table-cell;
}

.mfsubmit {
    text-align: center;
}

.mfh {
    /*	font-weight: bold;*/
}
.mft-cell.mfd {
    position: relative;
}


.mfd input,
.mfd textarea {
    padding: 0.6rem;
    border: 1px solid #707070;
}
.mfd input {
    height: 2.5rem;
}
.mfd textarea {

}
.mfsubmit {
    margin-top: 2em;
}

.mfsubmit .wpcf7-submit {
    background-color: var(--color-brown);
    color: var(--color-white);
    font-size: 100%;
    font-weight: bold;
    padding: 1.2em 8em;

}
.wpcf7 input[type="url"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] {
    direction: ltr;
    width: 100%;
}




@media (max-width: 780px) {

    #main>.panel-layout>.panel-grid>.panel-row-style {
        padding-left: clamp(14px, 4.5vw, 64px) !important;
        padding-right: clamp(14px, 4.5vw, 64px) !important;
    }



	#content .rpwwt-widget ul li {
		position: relative;
		margin: 0.8em 0 1.2em;
		padding: 1em; 0;
		overflow: hidden;
	}
    #content .rpwwt-widget ul li a {
        display: block;
        float: none;
        text-decoration: none;
        width: 100%;
    		position: relative;
        top: 1em;
    }
    .rpwwt-post-date {
        display: block;
        float: none;
        width: 100%;
        text-align: left;
    		position: absolute;
        top: 0;
    }


    .column-two {
        flex-wrap: wrap !important;
        flex-direction: row !important;
    }
    .column-two>div {
        background-color: var(--color-white);
        border-radius: 14.5px;
        padding: 1rem 1rem 0 !important;
    }
    .column-two>div,
    .column-three>div {
        width: 48% !important;
        height: stretch;
    }
    /*
    .column-two>div p:has(img),
    .column-three>div p:has(img) {
        margin-bottom: 0;
    }
    */

    .column-three>div {
        background-color: var(--color-white);
        border-radius: 14.5px;
        padding: 1rem 1rem 0 !important;
        /* margin-bottom: 1rem !important; */
    }

    .column-two>div p,
    .column-three>div p {
        text-align: justify !important;
    }
    .column-two>div p br,
    .column-three>div p br {
        display: none;
    }

    .arrow.nomobile::after {
        content: unset;
    }


    th, td {
      display: block;
      width: 100%;
      padding: 0.8em;
    }

    th {
      text-align: justify !important;
    }


  .mftable {
    display: block;

  }

    .mft-row {
      display: block;
  }
      .mft-cell {
      display: block;
  }
    .mft-cell.mfh p {
      margin: 0;
  }
    .mft-cell.mfd {
      position: relative;
      width: 80%;
      margin-left: 3rem;
  }
    .mfsubmit .wpcf7-submit {
      width: 80%;
  }
}