@charset "UTF-8";

/*!
Theme Name: asai showa
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
/* -！ 特記事項 - 
ロゴなど SVGファイルは、　[tmp-user/footer-insert.php] 各ページ共通のSVGを設定。
svg.hidden{display: none;}で非表示設定。使用箇所にはソースコードで<use>で呼び出しているパーツが対象。
[tmp-user/footer-insert.php] にはスマホ用のフッターボタン表示コードを記述。
- SVGファイルの修正の際は注意。
  symbolのidでインラインまたは外部ファイルのリンク指定しています。画像の書き換えのように上書きをすると削除される。

-　ヘッダー、フッターは企業サイト、採用ページ用は各ヘッダー、フッターで切り替え。修正する場合は、以下のPHPファイルを直接編集。
  tmp/header-container.php、tmp/footer-bottom.php

-　ナビ、パンクズ修正
  tmp/navi.php、tmp/navi-footer.php
  tmp/breadcrumbs-page.php、tmp/breadcrumbs
- メニューは、adminページ 外観>メニューで設定　メニューにない場合は、直接記述
  tmp/header-container.php、tmp/navi.php、tmp/navi-footer.php

以下のパーツは各ファイルで修正します
  -　フッターグループ企業のリンク　[tmp/footer-group-company.php]
  -　フッター企業の情報　       [tmp/footer-companyinfor.php]

functions.php　で各種設定

JavaScript処理
javascript.js　で関数やページ上共通の処理について記述　
-　パララックス対応　動作処理を追加したい要素にclass=parallax-itemを記述すると、ビューポートの対象エリアに入ると.showを追加

footer-scripts.php　でフッターにSplide.jsのスクリプトを記述
- Splide.jsの設定を使用ページ条件分岐で設定済み


CSSファイルの構成　[tmp-user/head-insert.php]にてCSS切り替え
 - tmp-user/head-insert.phpにCSS　カスタム変数を定義済み　
 - style.css 共通設定用（このファイル）
 - stylecorporate.css 企業ページ専用
 - sstylerecruit.css 採用ページ専用
*/

:root{
  scroll-behavior: smooth;
  --_asai_logo_color:#1d93b1; /* CL color */
  --_asai_color1:#009b70; /* ナビ１Color 採用サイト用 */
  --_asai_color2:#e20011; /* メインカラー */
  --_asai_color3:#1eb5d8; /* Main / Headeline color */
  --_asai_color4:#1e91b0; /* メインカラー */
  --_asai_color5:#006096; /* メインカラー */
  --_asai_color6:#062D59; /* ナビ２Color お問い合わせ */
  --_asai_color7:#222222; /* Big Headeline color */
  --_asai_color8:#333333; /* TEXT black */
  --_asai_color9:#F4F6FA; /* メインカラー */
  --_asai_gradient1:linear-gradient(-45deg, rgba(30, 145, 176, 1) 0%, rgba(6, 45, 89, 1) 100%);
  --_asai_gradient2:linear-gradient(-25deg, rgba(30, 181, 216, 1) 0%, rgba(0, 155, 112, 1) 100%);
  --_asai_gradient3:linear-gradient(90deg, rgba(30, 145, 176, 1) 0%, rgba(0, 155, 112, 1) 100%);/*採用サイト*/

  --_asai_jobdiscriptGbg:linear-gradient(300deg, rgba(30, 145, 176, 1) 20%, rgba(0, 155, 112, 1) 100%);
  
  --_asai_contentW:clamp(345px, 0.396rem + 91.26vw, 1200px);
  --_asai_contentFW:clamp(345px, -0.839rem + 100.96vw, 1400px);
  --_asai_contentRFW:clamp(345px, -0.594rem + 99.3vw, 1480px);
  --_asai_contentInW:clamp(21.875rem, 0.38rem + 98vw, 1470px);

--_asai_headeBtn: 27px;
--asai_keyMeaasage:clamp(55px, 2.087rem + 5.76vw, 144px);
--asai_home_paddingH:4svw;
--asai_sec_div_inW:clamp(36.875rem, -22.699rem + 93.09vw, 940px);
--_asai-ewuipW:clamp(34.375rem, 10.035rem + 38.03vw, 693px);
--_asai_br_H:10px;
--_asai_min-height_fcb:232px;
--asai_home_paddingH:7svw;
--_asai-ewuipWs:clamp(21.875rem, 15.185rem + 29.99vw, 34.375rem);
--_asai_InHeight: clamp(3.125rem, -0.625rem + 5vw, 3.75rem);

  .en{
    font-family: archivo, sans-serif;
  }
}
/* cocoon設定をリセット */
.entry-content>*, .mce-content-body>*, .article p, .demo .entry-content p, .article dl, .article ul, .article ol, .article blockquote, .article pre, .article table, .article .toc, .body .article, .body .column-wrap, .body .new-entry-cards, .body .popular-entry-cards, .body .navi-entry-cards, .body .box-menus, .body .ranking-item, .body .rss-entry-cards, .body .widget, .body .author-box, .body .blogcard-wrap, .body .login-user-only, .body .information-box, .body .question-box, .body .alert-box, .body .information, .body .question, .body .alert, .body .memo-box, .body .comment-box, .body .common-icon-box, .body .blank-box, .body .button-block, .body .micro-bottom, .body .caption-box, .body .tab-caption-box, .body .label-box, .body .toggle-wrap, .body .wp-block-image, .body .booklink-box, .body .kaerebalink-box, .body .tomarebalink-box, .body .product-item-box, .body .speech-wrap, .body .wp-block-categories, .body .wp-block-archives, .body .wp-block-archives-dropdown, .body .wp-block-calendar, .body .ad-area, .body .wp-block-gallery, .body .wp-block-audio, .body .wp-block-cover, .body .wp-block-file, .body .wp-block-media-text, .body .wp-block-video, .body .wp-block-buttons, .body .wp-block-columns, .body .wp-block-separator, .body .components-placeholder, .body .wp-block-search, .body .wp-block-social-links, .body .timeline-box, .body .blogcard-type, .body .btn-wrap, .body .btn-wrap a, .body .block-box, .body .wp-block-embed, .body .wp-block-group, .body .wp-block-table, .body .scrollable-table, .body .wp-block-separator, .body .wp-block, .body .video-container, .comment-area, .related-entries, .pager-post-navi, .comment-respond{margin-bottom:unset}

body{
  background-attachment: scroll;
  overflow:unset;
  background-color: #fff;
}
.cat-label {
background-color: rgba(51, 51, 51, .5);
border:none;
}
sup{font-size:.75em;}
 @media screen and (max-width: 834px) {
  main.main, div.sidebar {padding: 0;}
 }
 @media screen and (max-width: 1023px) {
  body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {margin-top: 0;}
  .scrollable-mobile-buttons {margin-bottom: 0;}
 }
 @media screen and (max-width: 1255px) {
  .entry-card-content {margin-left: unset;}
 }
 .entry-title, .main, .sidebar, .sidebar-left .main, .sidebar-left .sidebar, .entry-content, .footer-bottom.fdt-up-and-down {margin: 0;}
 .entry-card-thumb {width: unset; float: unset;}
 .appeal, .header, body {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
 }
 .header-container, .main, .footer {width: unset;}
 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-feature-settings: "palt";
 }
 :where(body) {margin: 0;}
 .video-container .video { overflow: clip hidden;}
a:where{text-decoration: none;}
 .wrap {width: unset;margin: 0 auto;}
 .content {margin-top: 0;}
 .main {
  width: unset;
  padding: 0;
  border: none;
  border-radius: unset;
  position: relative;
  z-index: 0;
}
a,a:hover,a:active,a:focus {color:unset;text-align: unset;}
.footer-bottom-content{float: none;}
  /* h2 */
 .article h2,.article h3,.article h4 {
  background-color: unset;
  padding: unset;
  border: none;
 }
  /* table */
  table {
   margin-bottom: unset;
   max-width: unset;
   width: unset;
   border-collapse: collapse;
   border-spacing: unset;
   td,th{
    color:var(--_asai_color7);
  }
  }
  
 body.error404 main#main {
  margin-block-start: 80px;
  width:var(--_asai_contentW);
  margin-inline: auto;
 }
 button{ /* reset */
  color: unset;
  cursor: pointer;
  border:none;
  background-color: transparent;
}
.footer{margin-top: 0;padding: 0;}
figcaption {opacity:1;font-size:unset;}

 /* 共通______ */
 html, body,body.public-page {color:var(--_asai_color7);}
 .fx{display: flex;}
 .grid{display: grid;}
 svg,img,vido{display: block;}
 svg,img,video{object-fit: cover;}
 a{text-decoration: none;}
.navi-in > ul .caption-wrap > div{font-weight:700;}
 @media(834px >= width){
  *,*>*,html,body{font-size: 15px;}
  .word-keyarea{font-size: 0.55rem;}
}
 @media(834px < width){
  *,*>*,html,body{font-size: 16px;}
  .word-keyarea{font-size: 0.75rem;}
}
 :root {scroll-behavior: smooth;}
 .wrap{width:100%;}
 svg.hidden{display: none;}
 .uppercase{text-transform: uppercase;}
 figure,figcaption{margin: 0;padding: 0;}

 /* ナビゲーション */
div#header-contain {
  padding-block-start: .25rem;
  padding-inline: 1rem;
  position: sticky;
  z-index: 10;
  top: 0;
  background-color: rgba(255, 255, 255, 0);
  .word-keyarea{color: #97a2aa;padding-inline: 1rem;margin-block:.5rem;@media(1024px > width){margin-block:0;}}
  &.gradient {
    transition: background-color 0.5s ease-in-out;
    .word-keyarea{color: #fff;}
  }
  &.gradient::before {opacity: 1;transition: background-color 0.5s ease-in-out;}
}
header#header.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
div.hedaer-navigations {
  display: flex;
  align-items: center;
  gap: 2rem;
  nav.navi {
    background-color: transparent;
    li a{font-size: clamp(16px, 0.949rem + 0.23vw, 18px);font-weight: 300;}
  }
}
/* div#header-contain-in {} */
div#header-contain::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color 0.5s ease-in-out;
  background-image: linear-gradient(rgba(34, 34, 34, 0.45) 0%,rgba(34, 34, 34, 0.45) 5%, transparent 80%);  /* グラデーションを設定 */
  opacity: 0;  /* 初期状態では透明 */
  transition: opacity 0.5s ease-in-out;  /* opacityにtransitionを適用 */
  z-index: -1; /* header要素より後ろに配置 */
}
/* ロゴ */
div#asai-hedearLogo svg.logo-mark-asai{height: 55px;}
#asai-hedearLogo {
  width: 100%;
  max-width: 300px; /* 最大幅を調整 */
  .logo-mark-asai {
    height: 55px;
    width: 100%;
    height: auto;
    object-fit: contain;
    /* preserveAspectRatio: xMidYMid meet; */
  }
}

/* メニュー 　ボタン*/
.lineSide-menu {
  --_asai-niviw:clamp(2.5rem, 1.932rem + 2.42vw, 60px);
  /* --_asai-niviw:clamp(45px, 2.492rem + 1.44vw, 60px); */
  width:var(--_asai-niviw);
  display: grid;
  grid-template-columns: var(--_asai-niviw);
  grid-template-rows: auto;
  place-content: center;
  position: relative;
  span.navi-menu-caption.menu-caption{
    position: relative;
    display: block;
    text-align: center;
    font-size:clamp(11px, 0.602rem + 0.36vw, 14px);
    line-height: 1;
    margin:0;
    padding: 0;
    top: 40px;
    font-family: archivo, sans-serif;
    font-weight: 900;
  }
  .menu__btn {
    display: block;
    align-items: center;
    width: var(--_asai-niviw);
    height: var(--_asai-niviw);
    cursor: pointer;
    z-index: 25;
    position: absolute;
    top:0;
  }
  .menu__btn > span[aria-hidden="true"],
  .menu__btn > span[aria-hidden="true"]::after {
    display: block;
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #616161;
    top:16px;
    transition-duration: .5s;
  }
  .menu__btn > span[aria-hidden="true"]::after {
    content: '';
    top: 12px;
  }

  #menu__toggle {
    opacity: 0.2;
    width:var(--_asai-niviw);
    height:var(--_asai-niviw);
    appearance: none;
    cursor: pointer;
  }
  #menu__toggle:checked ~ .menu__btn > span[aria-hidden="true"] {
    transform: rotate(45deg);
    top:28px;
    background-color:#fff;height: 2.5px;
    transition-duration: .3s;
  }

  #menu__toggle:checked ~ .menu__btn > span[aria-hidden="true"]::after {
    top: 0;
    transform: rotate(-90deg);
    background-color:#fff;height: 2.5px;
    transition-duration: .3s;
  }
  #menu__toggle:checked ~ .menu__box {
    visibility: visible;
    right: 0;;
  }
}
/* MENU文字消す */
.lineSide-menu:has(#menu__toggle:checked ~ .menu__btn > span[aria-hidden="true"]){
  span.navi-menu-caption.menu-caption{display: none;}
}
/* Headerメニュー　パネル */ 
.menu__box {
  background-color: var(--_asai_color5);
  display: block;
  position: fixed;
  z-index: 24;
  visibility: hidden;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  margin: 0;
  list-style: none;

  box-shadow: 1px 0px 6px #00000033;
  transition-duration: .25s;
}
.menu__box.grid{display: grid;}
/* Headerメニュー　パネルコンテンツ */
div#wide_header_block{
  color: #fff;
  position: relative;
  --_asai_pnl-logo:clamp(3.563rem, 1.575rem + 8.48vw, 11.75rem);
  .wide_header_inblock01{
    position: absolute;
    width: fit-content;
    a{
      color:#fff;
      transition: 0.3s ease-in-out;
      display: grid;
      width: var(--_asai_pnl-logo);
      justify-content: center;
      align-items: start;
      align-content: space-between;
      span{display: block;text-align: center;margin-block-start: -.7rem;}
    }
    
  }
  .site-logo-image {
    width: calc(var(--_asai_pnl-logo) + 2px);
    height: calc(var(--_asai_pnl-logo) + 5px);
    transition: stroke .3s ease; /* ストロークの色だけトランジション */
    stroke-width: .5px;/* パスに対する設定 */
    stroke: transparent; /* 初期状態では非表示 */
    fill: currentColor; /* 通常の塗りつぶし色 */
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    stroke-linejoin: round;
    stroke-linecap: round;
    animation: stroke-draw 1s ease-out forwards;
  }
  a:not(:hover) .site-logo-image {
    animation: stroke-hide 1s ease-out forwards;
  }
  /* ホバー時の効果 */
  a:hover .site-logo-image,a:active .site-logo-image {
    color:#ffffff25;
    stroke: #fff;
    stroke-width: 1px;
    stroke-dashoffset: 0; /* 0にすることでストロークが徐々に表示される */
  }
  .site-logo-name{
    width: var(--_asai_pnl-logo);
    text-align: center;
    aspect-ratio: 231 / 17;
    margin-inline: auto;
  }
  .wide_header_inblock02{
    display: grid;font-weight: 600;
    >div{margin-inline: clamp(30px, -6.339rem + 12.9vw, 145px);padding-block: clamp(1.875rem, 0.446rem + 2.23vw, 3.125rem);}
    >div>div{font-size:clamp(20px, 1.189rem + 0.26vw, 24px);margin-block-end: .75em;}
    >div>div::before{content: "●";padding-inline-end: .75rem;}
    >div>ul{margin-inline-start: clamp(20px, 0.795rem + 1.94vw, 50px);column-gap: .5em;}
    div.header-global-menu-container{align-self:end;border-bottom:1px solid #fff}
    div.header-recruit-menu-container{align-self:start;}

    ul#menu-global_openmenu{grid-template-rows: repeat(4, auto);}
    ul#menu-recruit_openmenunew{grid-template-rows: repeat(3, auto);}    
    ul{
      padding-left: 0;margin-left: 0;
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-flow: column;
      a{color:#fff;display: block;}
      li{margin-block-end: clamp(0.5rem, -0.071rem + 0.89vw, 1rem);transition: .1s ease;position: relative;padding-left: 0;margin-left: 0}
      li.subMenu{
        a .caption-wrap::before{
          content: "-";
          padding-inline: 0.5rem;
        }
      }
      li.menu-item:hover {background-color: unset;}
      li.menu-item::before {
        background: #ffffffc1;
        content: '';
        width: 40%;
        height: 1px;
        position: absolute;
        left: 0;
        bottom: 5%;
        margin: auto;
        transform-origin: left bottom;
        transform: scale(0, 1);
        transition: transform .3s;
      }
      li.menu-item:hover::before {transform-origin: left bottom;transform:scale(1, 1);
      }
      a .caption-wrap{font-size: clamp(13px, 0.464rem + 0.45vw, 1rem);}
    }
  }
  .wide_header_inblock03{
    background-color: var(--_asai_color3);
    display: grid;
    width: 100%;

    /* 英字 文字 */
    .en{
      letter-spacing: -1px;
      font-weight: 900;
      line-height: 1;
      margin-block-end: 1rem;
    }
    p.en{font-size:clamp(70px, 1.804rem + 4.02vw, 106px);margin: 0;line-height: .9;}
    p.en + p{font-size:clamp(13px, 0.598rem + 0.33vw, 16px);margin-block: clamp(0.75rem, -2.327rem + 4.81vw, 2rem) clamp(1.938rem, -3.293rem + 8.17vw, 65px);}
    div.grid .en{font-size:clamp(22px, 0.486rem + 1.39vw, 30px);}
    div.grid{
      align-items: center;
      svg{width: 40px;height:auto;aspect-ratio:  1 / 1.2;}
      a{display: grid;grid-template-columns: auto clamp(6.125rem, 1.202rem + 7.69vw, 8.125rem);transition:.5s ease;}
      &:nth-of-type(1){/* 東京営業所 */
        color:var(--_asai_color5);
        margin-block-end:clamp(1rem, -0.143rem + 1.79vw, 2rem);
        a >div:nth-of-type(2){background-color:var(--_asai_color5);transition:.5s ease;}
		a:hover{
		>div:nth-of-type(1){color:#4079ba;}
		>div:nth-of-type(2){background-color:#4079ba;}
		}
      }
      &:nth-of-type(2){/* 白河工場 */
        color:var(--_asai_color1);
        a >div:nth-of-type(2){background-color: var(--_asai_color1);transition:.5s ease;}
		a:hover{
		>div:nth-of-type(1){color:#21a883;}
		>div:nth-of-type(2){background-color:#21a883;}
		}
      }
      a>div:nth-of-type(1){/* 事業所名block 共通 */
        padding-inline-start: clamp(1rem, 0.714rem + 0.45vw, 1.25rem);padding-block: clamp(0.5rem, -0.071rem + 0.89vw, 1rem);font-weight: bold;background-color: #fff;
        p:nth-child(1){margin-block-end: clamp(0.3rem, -0.214rem + 0.8vw, 0.75rem);}
        p:nth-child(1)::before{content: "●";padding-inline-end: .5rem;}
        p:nth-child(2){display: grid;grid-template-columns: 6em auto;align-items: end;column-gap: .25em;}
        span{display: block;margin: 0;}
        p{font-size: clamp(13px, 0.598rem + 0.33vw, 1rem);}
      }
      a>div:nth-of-type(2){/* icon block 共通 */
        color:#fff;display: flex;align-items: center;justify-content: center;
      }
    }    
  }
}
.menu__box .smfootermenu{display:none;opacity:0;}
.menu__box .smfootermenu a{color:#fff}
.smfootermenu footer{
display: flex;
opacity: 1;
position: fixed;
bottom: 0;
}
.menu__box .smfootermenu {
  padding-block: 1rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  footer {
   width: 100%;
   justify-content: center;
   padding-block: 21px;
   column-gap: 1vw;
   column-gap: max(.55rem, 1.8vw);
   background-color: var(--_asai_color3);
   div {
    a {
     background-color: var(--_asai_color6);
     font-size: 14px;
    }
   }
   a {
    display: block;
    padding: .85em 1.5rem;
    border-radius: 2rem;
	transition: .5s ease;
   }
  }
  div:nth-of-type(1) a {
   background-color: var(--_asai_color6);
&:hover{background-color: #2b5788;}
  }
  div:nth-of-type(2) a {
   background-color: var(--_asai_color1);
&:hover{background-color: #21a883;}
  }
 }

/* フッター */
footer#footer{
  /* FOOTER　CONATCT */
    #contact_footer{
      position: relative;
      h2{
        color:var(--_asai_color3);
        font-size:clamp(16px, 0.829rem + 0.77vw, 24px);
        margin-block-end: 1.5rem;}
      h2::after{
        display: block;
        font-family: archivo, sans-serif;
        font-weight: 900;
        color:var(--_asai_color7);
        font-size: clamp(2.5rem, 1.088rem + 6.33vw, 106px);
        line-height: 1;
        margin-block-start: clamp(0.9rem, 0.523rem + 1.69vw, 2rem);
      }
      h2.parallax-item::after{
        /*  animation */
        white-space: nowrap; /* テキストが改行されないように */
        overflow: hidden; /* はみ出した部分を隠す */
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        transition: clip-path 1s ease-out .5s; /* アニメーションの設定 */
      }
      h2.parallax-item.show::after {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      }
      p:not(.goto-other-page){
        line-height: 2.2;
      }
      padding-block: clamp(3.75rem, 2.835rem + 3.9vw, 100px);
      padding-block-start: calc(clamp(3.75rem, 2.835rem + 3.9vw, 100px) / 2);
      background-color: #fff;
      div#appeal {
          width: var(--_asai_contentW);
          margin-inline: auto;
          color: #fff;
        ul{
          display: grid;
          grid-template-columns: repeat(3, auto);
          justify-content: center;
          align-items: center;
          gap:1rem;
          padding-block-end:clamp(3.75rem, 2.835rem + 3.9vw, 100px);
      }
        li{
          background-image:linear-gradient(90deg, rgba(30, 145, 176, 1) 0%, rgba(6, 45, 89, 1) 100%);
          width: fit-content;
          padding: 1rem 3rem;
          position: relative;
        }
        li::after{
          --_asai_br_H:10px;
          content:"";
          position: absolute;
            bottom:calc(var(--_asai_br_H) * -1);
            width: 0;
            height: 0;
            left:50%;
            transform: translateX(-50%);
            margin: auto;
            border-top: var(--_asai_br_H) #125e84 solid;
            border-right: var(--_asai_br_H) transparent solid;
            border-left: var(--_asai_br_H) transparent solid;
        }
      }
      div.grid{
        width: var(--_asai_contentW);
        margin-inline: auto;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, auto);
        padding-block-end: 0;
        gap: 1em 2.5rem;
        h2{
          line-height: 1;
          grid-column: 1/2;
          grid-row: 1/2;
        }
        .sec_div_in{
          grid-column: 1/2;
          grid-row: 2/3;
          p{max-width:55ch;}
        }
        .sec_div_in + div{
          grid-column: 2/3;
          grid-row: 1/3;
          align-self: center;
          width:fir-content;
        }
        p.goto-other-page {
          grid-column: 2/3;
          grid-row: 1/2;
          margin-block-start: calc(clamp(16px, 0.829rem + 0.77vw, 24px) * 1.5);
        }
      }
      h2::after{content:"CONTACT";}
  
    }
    .phoneNumbur{
      span{
        display: block;line-height: 1.25;
        &:nth-of-type(1){
          font-weight: 700;
        }
        &:nth-of-type(2){
          color:var(--_asai_color3);
          font-weight: 900;
          font-size:46px;
        }
      }
      p.goto-other-page{
        margin-block-start: 1rem;
        margin-inline: auto;
      }
    }
    #appeal {
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
      }
    }
    #footer_Contact_block{
      --_asai_min-height_fcb:232px;
      width: 100%;
      background-color: var(--_asai_color7);
      height:var(--_asai_min-height_fcb);
      background-image: url(./image/footerCall.webp);
      background-size: auto var(--_asai_min-height_fcb);
      background-repeat: no-repeat;
      background-position: center bottom;
    }
  
    #footerMain {
      color:#fff;
      background-color: var(--_asai_color3);
      background-image: url(./image/footermain.svg);
      background-repeat: no-repeat;
      background-position: right bottom;
      background-size: 65%;
      z-index: 1;
      position: relative;
      margin-block-end: 60lvh;
      .navi-footer-in{font-weight: 600;}
      .navi-footer-in a:hover{background-color: unset;}
      ul, li {
        list-style: none;
        padding-inline: 0;
        margin-inline: 0;
        position: relative;
        border:none;
      }  
      address {
        font-size:clamp(14px, 0.822rem + 0.24vw, 1rem);
        font-style: normal;
        color:#ffffffad;
        >span{font-size: clamp(20px, 1.144rem + 0.47vw, 24px);margin-block-end: 1rem;font-weight: 600;font-feature-settings: normal;}
        span {
          display: block;
        }
        li {
          span {
            font-size: 16px;
          }
          margin-block-end: 2rem;
        }
      }
      a {
        color: #fff;
      }
      .f_logo a{
        width: 220px;
        color:#fff;
        margin-inline: auto;
        svg.site-logo-image{
        transition: .3s ease-in-out;
        }
      }
      svg.site-logo-image{max-width: 220px;}
      svg.site-logo-name {
        margin-block-start: 1rem;
        max-height: 1rem;
        max-width: 220px;
      }
      .f_logo a:hover{
        svg.site-logo-image {
        color:var(--_asai_color3);
        stroke: #fff;
        stroke-width: 1px;
        } 
      }
      .group{
        padding-block-start:2rem;
        >div{
          display: flex;margin-block-end: 12px;align-items: center;
        }
        p:nth-child(1){
          margin-inline-end: 1rem;
          font-size: clamp(1.25rem, 1.091rem + 0.71vw, 26px);
          font-weight: 900;
        }
        li {
          margin-block-end: .5rem;
          width: fit-content;
          padding-inline-end: 1rem;
          a{color:#ffffffad !important;}
        }
      }
    }
  
    ul.menu-footer,.group ul{
      li{display: block;}
      li a{
        transition: .1s ease;
        display: block;
      }
      li a::before{
        content:"";
        position: absolute;
        bottom:0;
        left:0;
        height: 1.5px;
        width: 60%;
        background-color: #fff;
        transform-origin: left bottom;
        transform: scale(0, 1);
        transition: transform .3s;
      }
      li a:hover::before {
        transform-origin: left bottom;
        transform: scale(1, 1);
      }
    }
    >div {
      margin-inline: auto;
    }
    div#footerMain.show + .footer-bottom.cf{position: fixed;width:100svw;}
  
    .footer-bottom.cf{
      margin-block-start: 0;
      padding: 0;
      background-color: var(--_asai_color3);
      bottom: 0;
      line-height: 0;
      height: 60lvh;
      width: 100%;
      background-image: url(./image/footerBottom.webp);
      background-position: center bottom;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1;
    }
  
    #copyrightBlock{
      display: grid;
      height: 100%;
      color:#fff;
      position: relative;
      z-index: 2;
      ul,li{padding:0;margin: 0;list-style: none;}
      li,p{text-align: center;}
      li.en, p.en, p.en span{
        font-size: clamp(80px, 1.577rem + 12vw, 240px);
        font-weight: 900;
        line-height: 1;
        margin-block: 1.5rem 0;
        vertical-align: bottom;
      }
    }
    .copy-Block{
      align-self: center;
		.copy_footerIn p:nth-of-type(1){font-weight:600;font-size:24px;}
    }
    p.en.parallax-item span {
      display: inline-block;
      opacity: 0;
      position: relative;
    }
    p.en.parallax-item.show span:first-child {
      animation: slideFromRight 4s cubic-bezier(.65,.25,.41,1.21) forwards .5s;
    }
    p.en.parallax-item.show span:last-child {
      animation: slideFromLeft 2s cubic-bezier(.06,.28,.69,1.26) forwards 1s;
    }
    small{display:block;align-self: end;padding-block-end: 1rem;text-align: center;color:#fff;margin-inline: auto;position: relative; bottom:3rem;font-weight:600;}
  }

/* 内部ページ ---- 　*/
body:not(.home) {
  /* 共通設定 */
  *[data-overDirection="FixWide"]{
   width: var(--_asai_contentInW);
   margin-inline: auto;
  }
  *[data-overDirection="FixNarrow"]{
   width: var(--_asai_contentW);
   margin-inline: auto;
  }
}

@media(1024px > width){
/* フッター */
footer#footer {
  section#contact_footer{
     #appeal>ul,div.grid{
       display: block;
       li{
        width: 100%;
        text-align: center;
        margin-block-end: 2rem;
        white-space: nowrap;
       }
       li::after{
        transform: unset;
        bottom: calc(15px * -1);
       }
       li:nth-child(1)::after,li:nth-child(3)::after {
        left: 25%;
        border-top: 15px #167598 solid;
        border-right: 3px transparent solid;
        border-left: 20px transparent solid;
       }
       li:nth-child(2)::after {
        left: 80%;
        border-top: 15px #0b3c67 solid;
        border-right: 20px transparent solid;
        border-left: 3px transparent solid;
       }
     }
  }

  #footerMain {
    padding-block-start: 3rem;
    padding-inline: 2rem;
    background-size: auto;
    background-position-x: 0;
    .footer-bottom-content{
      display:none;
      .navi-footer ul,ul.navi-link{
        display: block;
        li{
        text-align: left;
        }
    }
  }
    .f_logo a{
      color:#fff;
      width: 100px;
      display: block;
      margin-inline: auto;
    }

    svg.site-logo-image{width: 100px;}
    svg.site-logo-name {width: 100px; margin-block-start: -1rem;}
    .address {
      margin-block: 3rem;
      text-align: center;
    }
    .group{
      padding-inline-start: 1rem;
      padding-block:2rem 2.5rem;
      border-top: 2px solid #fff;
    }
  }
}
}

@media(1024px <= width){
  #footerMain{
    padding-block:clamp(3.75rem, 2.835rem + 3.9vw, 100px);
    >div {
        width: var(--_asai_contentW);
        margin-inline: auto;
        display: grid;
        grid-template-columns: .45fr .5fr;
        grid-template-rows: repeat(2, auto);
  
        div.f_logo{
          justify-self: left;
          grid-column: 1/2;
          grid-row: 1/2;
        }
        >div.address{
          grid-column: 1/2;
          grid-row: 2/3;
          padding-block-start: 86px;
        }
        div.footer-bottom-content{
          grid-column: 2/3;
          grid-row: 1/2;
        }
        div.group{
          grid-column: 2/3;
          grid-row: 2/3;
          border-top: 1px solid #fff;
        }
  
      }
    a{display: block;}
    #navi-footer{
      display: flex;
      /* gap:6vw; */
      gap:clamp(1.3rem, 0.381rem + 2vw, 6vw)
    }
    #navi-footer-in{
      text-align: left;
      margin-block-end: 1.5rem;;
    }
    
    ul#menu-global_footermenu{
      display: grid;
      gap:.5rem 2rem;
      grid-template-columns: 1fr 1fr;
      grid-auto-flow: column;
      grid-template-rows: repeat(4, auto);
      li{
        text-align: left;
        width:auto;
        a{line-height: 2;padding: 0.5rem 0.5rem 0;}
      }
    }
    .navi-link{
      li:nth-of-type(1){
        a{background-color: var(--_asai_color1);
        padding-inline: 3em;}
      }
      li:nth-of-type(2){
        a{background-color: var(--_asai_color6);}
      }
      li>a{
        text-align: center;
        line-height: var(--_asai_headeBtn);
        border-radius: 3rem;
        padding: .5rem 1.5rem;
        margin-block-end: 1rem; 
      }
    }
  } 
}

/* linkボタン用 */
.togo{
  --_asai_headeBtn:27px;
  align-items: center;
  line-height: var(--_asai_headeBtn);
  width: fit-content;
  padding:.75rem 3rem;
  border-radius: 3rem;
  transition: 0.3s ease;
	font-weight:700;
  span,svg{display: block;}
  .LinkArrowR2 .circle {
    fill: var(--_asai_color1);
    stroke: none; /* 円の線を消す場合 */
  }
  a{
    font-size: 18px;
    gap:.5rem;
    transition: 0.3s easet;
    svg{width: 27px; height: 27px;transition: 0.3s ease;border-radius: 50%;border: 1px solid var(--_asai_color3);padding: 6px;}
  }
&:hover {
  a {color: #fff;
	  svg{background-color:#fff;}
	}
  }
}

/* page topボタン */
#goto-topBtn {
  --asai-width:clamp(60px, 2.424rem + 5.94vw, 122px);
  /* display: none; */
  width: fit-content;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;

  button {
    width: var(--asai-width);
    height: var(--asai-width);
    background-color: transparent;
    border: 0 none transparent;
    svg.site-logo-image {
      border: none;
      display: block;
      object-fit: contain;
      width: var(--asai-width);
      height: var(--asai-width);
    }
    a{
      display: block;
      color:var(--_asai_color3);
      position: relative;
      z-index: +1;
    }
    a::before{
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80%;
      height: 80%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background-color: var(--_asai_color3);
      opacity: .5;
      z-index: -1;
      box-shadow: 0 0 1rem rgba(0, 157, 229, 0.7);
      transition: opacity 0.3s ease-in-out;
    }
    .goto-circle{
      fill: #fff; /* 色を変更 */
    }
    .goto-circle,a{
      transition: .5s ease-out;
    }
    .goto-circle:hover{fill:var(--_asai_color3)}
    a:hover{color:#fff;}
  }
}
#goto-topBtn.btnshow {
  opacity: 1;
  display: block;
}

/* パンくず */
#breadcrumb,#breadcrumb a,#breadcrumb span{
font-size:clamp(10px, 0.553rem + 0.31vw, 12px);
text-align: right;
}
#breadcrumb{
  margin-inline: auto;
  max-width:var(--_asai_contentInW);
}

/* 固定ページ */
.entry-content,body.home>#container>footer#footer,
footer#footer #entory_footer .entory_blk,
#contact_footer{
  p:has(svg.LinkArrowR), p:has(svg.LinkArrowR2) {  
    width: fit-content;
    a {
      border: 1px solid var(--_asai_color9);
      border-radius: 3rem;
      display: inline-flex;
      gap:1rem;
      transition: .5s ease-in;
		font-weight:700;
    }
    svg {
      width: 1.5rem;
      aspect-ratio: 1;
      display: inline-block;
      vertical-align: bottom;
    }
  }
  p:has(svg.LinkArrowR) {
    a {
      color: var(--_asai_color3);
      background: linear-gradient(60deg, var(--_asai_color4) 50%, #fff 51%);
      background-size: 400% 100%;
      background-position: right center;
      align-items: center;
	font-weight:700;
    }
    svg{border-radius: 50%;border: 1px solid var(--_asai_color3);padding:6px;width:27px;height:27px;transition: .5s ease-in;}
    a:hover {
      color: #fff;
      background-position: left center;
      border-color: var(--_asai_color3);
      svg{border-color: #fff;background-color: #fff;}
    }
  }
  p:has(svg.LinkArrowR2) {
    a {
      color: #fff;
      background: linear-gradient(90deg, #fff 49.5%, var(--_asai_color3) 50%);
      background-size: 400% 100%;
      background-position: right center;
      align-items: center;
     font-weight:700;
    }
    a:hover {
      color: var(--_asai_color3);
      background-position: left center;
      border: 1px solid var(--_asai_color3);
    }
  }
}
.entry-content.cf,footer{/* LINK Button */
  p.goto-other-page a{
  /* padding: 1rem 1.75rem; */
  padding: 1rem 2.5rem 1rem 1.8rem;
  }
}

p.goto-other-page a{white-space: nowrap;}
@media(834px > width){
  .entry-content,body.home>#container>footer#footer,section#entory_footer .entory_blk {
    p:has(svg.LinkArrowR), p:has(svg.LinkArrowR2) {
      width: auto;
      a {
        width: 100%;
        margin-inline: auto;
        justify-content: center;
      }
    }
  }
}

/* 投稿ページ */
body.post-template-default.single.single-post{
  #content{line-height: 2.2;}
  p{margin-block-end: 1rem;}
}

input, select, textarea {
  color:var(--_asai_color7);
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
}
input:not([type=submit]):focus, select:focus, textarea:focus{
  border: 1px solid inherit;
  background-color: var(--_asai_color9);
}

.formContact {
  p {
    margin-block-end: 1rem;
    line-height: 1.5;
  }
  form{
    margin-block-start: 3rem;
    .wpcf7-not-valid-tip{margin-block-start: -.7rem;}
  }
  input[type=text],input[type=email],input[type=tel],textarea,select,input[type=date]{
    width: 100%;
    padding: 1.2rem 1rem;
    border: 1px solid #ccc;
    margin-block-end: 1rem;
    font-size: 1rem;
    color: var(--_asai_color7);
  }
  label {
    font-weight: bold;
    display: block;
    padding-block: 1rem;
  }
  >div:nth-of-type(1) {
    padding-inline: clamp(1rem, -0.369rem + 6.14vw, 5rem);
    margin-block-end: 2rem;
  }
  >div:nth-of-type(2) {
    margin-block:3rem 5rem;
    ul, li {
      padding-inline-start: 0;
      margin-inline-start: 0;
      list-style: none;
    }
    li::before {
      content: "※";
      margin-inline-end: .5em;
    }
  }
  form {
    p {
      padding-block: .25rem;
      display: grid;
      grid-template-columns: .25fr 1fr;
      >span {
        display: block;
      }
    }
    .notice p, p:has(input[type=submit]) {
      display: block;
    }
    .notice{padding-inline-start: 10%;margin-block: 2rem;}
    p:has(input[type=submit]) {
      width: fit-content;
      margin-inline: auto;
      margin-block-end: 0;
    }
    input[type=submit] {
      background-color: var(--_asai_color3);
      color: #fff;
      font-weight: 700;
      padding: 1rem 8rem;
      border-radius: 3rem;
      font-size: 18px;
    }

    label[data-req]::after, span[data-req]::after {
      content: attr(data-req);
      color: #f20000;
      font-size: .9rem;
      margin-inline-start: 3px;
    }
  }
}

div.privacy {
  padding: 2rem;
  margin-block-end: 2rem;
  height: 227px;
  overflow-y: scroll;
  border: 1px solid var(--_asai_color8);
  p {
    line-height: 1.8;
    margin-block-end: 1.5rem;
  }
  h3 {
    font-size: 18px;
    text-align: left;
    color: var(--_asai_color7);
    border-top: 1px solid var(--_asai_color3);
    border-bottom: 1px solid var(--_asai_color3);
    padding-block: .65em;
    margin-block: 1em;
  }
  ol, ul, li {
    margin-inline: 0;
    padding-inline: 0;
  }
  ol li {
    line-height: 1.5;
    margin-inline-start: 1.5em;
  }
  ol, ul {
    margin-block-end: 1rem;
  }
  ul {
    list-style: none;
    li {
      margin-block-start: 0;
      line-height: 1.8;
      margin-inline-end: .2em;
    }
  }

  ol:nth-of-type(2),ol:nth-of-type(2) li{list-style: none;margin-inline-start: 0;padding-inline-start: 0;margin-block-start: 1.4rem;}
}
.footerBtn{line-height: 0;transform:translateY(3rem); opacity:0;transition: .5s ease;}

@media(1024px > width){
  .formContact{
    form{
      p{display: block;}
      label {padding-block: .25rem;}
    }
  }
  footer#footer{
    #footer-in{
    div#footerMain{margin-block-end: 80lvh;}
    div.footer-bottom.cf{height: 80lvh;}
  }
  .footer-bottom>small{bottom: 6rem;}   
  } 
  /* モバイル用ボタン */
  .footerBtn.btnshow{
    transform:translateY(0);
    opacity: 1;
    position: fixed;
    width: 100svw;
    justify-content: center;
    bottom: 1.25rem;
    z-index:1;

    .footer-menuBtn{
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2,auto);
      margin-block-end: 1rem;
      gap:2rem;
      justify-content: center;
    }
    li{list-style: none;}
    a {
      font-size: 14px;
      color: #fff;
      font-weight: 700;
      border-radius: 2rem;
      padding: 1rem 2rem 1rem 4rem;
    }
    li:nth-child(1) a {
      background: var(--_asai_color6);
      background-image: url(./image/inqueryIcn.svg);
      background-repeat: no-repeat;
      background-position: 2.2rem center;
      background-size: 1.5rem;
      transition: .5s cubic-bezier(0.48, 0.82, 0.84, 1.07);
      &:hover{background-position: center;background-size: 2rem;}
    }
    li:nth-child(2) a {
      background: var(--_asai_color1);
      background-image: url(./image/recruitIcn.svg);
      background-repeat: no-repeat;
      background-position: 1.8rem center;
      background-size: 1.5rem;
      padding-left: 4.5rem;
      padding-right: 2.5rem;
      transition: .5s cubic-bezier(0.48, 0.82, 0.84, 1.07);
      &:hover{background-position: center;background-size: 2rem;}
    }
    a:hover{color:transparent;}
  }
}

@media(1024px <= width){
  .footerBtn,.footerBtn.btnshow{display: none;}
}

@media (720px > width) {
 .menu__box.grid {
  height: 100dvh;
 }
 .menu__box.grid>div#wide_header_block {
  display: block;
  .wide_header_inblock01{
    top:1rem;left:1rem;
   }
  .wide_header_inblock02 {
   position: relative;
   top: 12vh;
   >div{
   >div,ul{width: 80%;margin-inline: auto;}
   @media(orientation: portrait){ul{column-gap: 3em;}}
   }
  }
  .wide_header_inblock03 {
   display: none;
   opacity: 0;
  }
 }
 .menu__box .smfootermenu {
  display: block;
  opacity: 1;
 }
 @media(orientation: landscape) {
  div#wide_header_block{
   .wide_header_inblock01{
    top:1rem;left:1rem;
    a, a svg{width: 60px;}
   }
   .wide_header_inblock02{
    top:5vh;
    padding-inline-start: 5rem;
    grid-template-columns: repeat(2, 1fr);
    div.header-global-menu-container{align-self:start;border-bottom:none;}
    >div>ul {column-gap: 1em !important;}
    }
   }
  }
 /* iphoneSE対策   */
 @supports (-webkit-touch-callout: none) {
  @media (667px >=height) {
   .wide_header_inblock02 {
    >div>div {
     font-size: 18px;
     line-height: 1.15;
     margin-block-end: .5rem;
    }
   }
   .menu__box .smfootermenu {
    footer {
     padding-block: 1rem;
     column-gap: max(.55rem, 1.8vw);
    }
   }
  }
 }
}
@media(720px <= width < 1024px){
   div#wide_header_block {
   width: 100%;
   column-gap: 0;
   --_asai_pnl-logo: clamp(68px, 0.784rem + 14.79vw, 190px);
   .wide_header_inblock01 {
    grid-column: 1/2;
    grid-row: 1/2;
    top: 1.5rem;
    left:1.75rem;
    a, svg{width:clamp(3.75rem, 3.101rem + 2.97vw, 5rem);}
    svg.site-logo-image {height: clamp(3.75rem, 3.101rem + 2.97vw, 5rem);}
    a {gap:.5rem;}
   }
   .wide_header_inblock02 {
    grid-column: 1/2;
    grid-row: 2/3;
    justify-self: center;
   }
   .wide_header_inblock03 {
    width: 100%;
    grid-column: 1/2;
    grid-row: 3/4;
    justify-self: center;
    div {
     margin-block-start: 1.75rem;
     grid-template-rows: auto auto;
    }
   }
  }
  @media (orientation: landscape) {
   .menu__box.grid{
    height: 100%;
    overflow-y: scroll;
   }
   div#wide_header_block {
    display: grid;
    .wide_header_inblock02{
     grid-template-columns: repeat(2, 1fr);
     div.header-global-menu-container{align-self:start;border-bottom:none}
    }
     .wide_header_inblock03 {
      align-items: center;
      height: 100%;
     >div {width: 420px;margin-inline: auto;}
     div.grid, .grid a>div{margin:unset}
    }
  }
  @media(500px > height){
   .menu__box.grid div#wide_header_block .wide_header_inblock03{display: none;}
   .menu__box .smfootermenu {display: block;opacity: 1;}
  }
 }
  @media (orientation: portrait) {
   .menu__box.grid{display: block;}
   div#wide_header_block {
    display: grid;
    position: relative;
    height: 100svh;
    .wide_header_inblock02{
     width:90%;
     >div{
      padding-inline-start: 8rem;
     }
    }
    .wide_header_inblock03 {
     padding-block-start: 3rem;
     bottom: 0;
     >div {
      width: 420px;
      margin-inline: auto
     }
     div {
      margin-block: 0;
      grid-template-rows: unset;
     }
    }
   }
  }
}
@media(1024px <= width){
  div#wide_header_block{
    display: grid;
    grid-template-columns: 1fr .829fr;
    grid-template-rows:auto;

  .wide_header_inblock01{
    --_asai_pnl-logo:clamp(5.5rem, -1.071rem + 10.27vw, 11.25rem);
    margin-block-start: clamp(1.563rem, 0.491rem + 1.67vw, 2.5rem);
    margin-inline-start: clamp(2.5rem, -14.423rem + 26.44vw, 9.375rem);
    a{gap:.5rem;width: var(--_asai_pnl-logo);}

  }
  .wide_header_inblock02{
    grid-column: 2/3;
    grid-row: 1/2;
    >div{padding-inline-start: 2rem;}
    div.header-global-menu-container{margin-block-start: clamp(0rem, -10.714rem + 16.74vw, 150px);}
  }
  .wide_header_inblock03{
    grid-column: 1/2;
    grid-row: 1/2;
      >div{
      justify-self: end;
      width:clamp(27.75rem, 17.321rem + 16.29vw, 36.875rem);
      }
    }
  }
  @media (orientation: landscape) {
    div#wide_header_block{
      .wide_header_inblock03{
        >div{
          align-self: center;
          margin-top:clamp(0rem, -16.429rem + 25.68vw, 230px);
          margin-inline-end: clamp(50px, -9.732rem + 20.1vw, 230px);
        }
      }
    }
    @media(620px > height){
     div#wide_header_block{min-height:620px;overflow-y: scroll;}
     }
  }
  @media (orientation: portrait) {
    div#wide_header_block{
      grid-template-columns: 1fr;
      grid-template-rows: 1.1fr .9fr;
      .wide_header_inblock02{
        grid-column: 1/2;
        grid-row: 1/2;
      }
      .wide_header_inblock02{
        >div{
          padding-inline-start: 16rem;
          width: 85%;
        margin-inline: auto;
        }
        ul{width: 80%;}
      }
      .wide_header_inblock03{
        grid-column: 1/2;
        grid-row: 2/3;
        width: 100%;
        display: grid;
        place-content: center;
        >div{justify-self: center;width:420px}
      }
    }
  }
}