.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* ビューポートの幅 */
    height: 100vh; /* ビューポートの高さ */
    background: linear-gradient(45deg, #ff7b63, #ffb5a1, #faec6c, #ffad28);
    background-size: 200% 200%;
    animation: bggradient 3s ease infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader-wrapper {
    position: relative;
    width: 300px; /* Adjust this width as needed */
    height: 300px; /* Adjust this height as needed */
}

#loading-text {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: fadeIn 1.5s ease-in-out forwards;
    animation-delay: 0s; /* フェードインアニメーション開始を1秒遅らせる */
}

#loading-text img {
    max-width: 60%; /* ビューポートの幅に合わせて調整 */
    max-height: 60%; /* ビューポートの高さに合わせて調整 */
    width: 700px; /* アスペクト比を維持 */
    height: 700px; /* アスペクト比を維持 */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


#loading-content {
    width: 400px; /* 必要に応じて調整 */
    height: 400px; /* 必要に応じて調整 */
    border: 5px solid transparent;
    border-radius: 50%;
    animation: loader 2s linear infinite;
    animation-delay: 1s; /* アニメーション開始を0.5秒遅らせる */
    z-index: -2; 
    
}

#loading-content:before, #loading-content:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: loader 2s linear infinite;
    animation-delay: 1.5s; /* アニメーション開始を0.5秒遅らせる */
}

#loading-content:before {
    box-shadow: 0 0 0 0px transparent,
                0px 0px 0px 0px #fff, 
                0 0 0px 0px transparent;
    border-radius: 50%;
}

#loading-content:after {
    box-shadow: 0 0 0 0px transparent,
                0px 0px 0px 0px #fff,
                0 0 0px 0px transparent;
    border-radius: 50%;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg); /* フル回転 */
    }
}


.main-content {
    /* Styling for the main content */
    display: none; /* Hide initially, to be shown after the loader is done */
}





.index_btn{
width: 100%;
}

.index_btn .anm_btn{
    display: flex;
    right: 0;
    position: absolute;
    bottom: 0px;
    z-index: 2;
  }
  .index_btn .anm_btn a{
    display: block;
    width: 310px;
    height: 60px;
    line-height:50px;
    text-decoration: none;
    text-align: center;
    border-radius: 10px;
    border: 3px solid #ff5f33;
    color: #ff5f33;
    font-size: 18px;
    font-family: arial;
    position: relative;
    overflow: hidden;
    background: transparent;
    text-transform: uppercase;
    transition: all .35s;
    margin: 10px;
    font-family: "a-otf-ryumin-pr6n", serif;
    background: #fff;
    font-weight: 800;
  }
  
  .anm_btn a:before,
  .anm_btn a:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    background: #ff5f33;
    z-index: -1;
    transition: all .35s;
  }
  
  .anm_btn a:before{
    opacity: .5;
  }
  
  .anm_btn a:after{
    transition-delay: .2s;
  }
  
  .anm_btn a:hover{
    background: #ff5f33;
    color: #fff;
    border: 3px solid #fff;
  }
  
  .anm_btn a:hover:before,
  .anm_btn a:hover:after{
    top: 0;
  }











*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    margin: 0 auto;
    padding: 0;
    height:auto;
    max-width: 1440px;
}
header{
   position: relative;
    margin: 0;
    padding: 0;
}
.main {
    width: 100%;

}
ol,
ul {
    list-style: none;
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #000000;
    font-size: 14px;
    letter-spacing: 0.1em;
}

.hamburger {
    margin: 0 auto;
    width: 100%;
    height: 90px;
    /* max-width: 900px; */
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    align-items: center;
    border-bottom: 0.5px solid #dbdbdb;
}

.logo {
    background-image: url('images/SVG/logo1.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width:200px; /* 必要に応じて調整 */
    height: 70px; /* 必要に応じて調整 */
    margin-left: 40px;
}
.logo a{
    display: block;
    height: 100%;
}
.tel {
    width: 200px; /* 必要に応じて調整 */
    height: 50px; /* 必要に応じて調整 */
    margin-left: 20px;
    font-size: 14px;
    display: flex;
    align-items: center; /* aタグを垂直方向にセンタリング */
}
.box{
    display: flex;
    align-items: center;
}

.hamburger .btn-gNav {
    position: fixed;
    top: 5px;
    right: 20px;
    width: 60px;
    height: 55px;
    z-index: 12;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.hamburger .btn-gNav span {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #ffffff;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.hamburger .btn-gNav span:nth-child(1) {
    top: 15px;
}

.hamburger .btn-gNav span:nth-child(2) {
    top: 25px;
}

.hamburger .btn-gNav span:nth-child(3) {
    top: 35px;
}

.hamburger .btn-gNav.open span:nth-child(1) {
    background: #ffffff;
    top: 25px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.hamburger .btn-gNav.open span:nth-child(2){
    display: none;
}
.hamburger .btn-gNav.open span:nth-child(3) {
    top: 25px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}


.btn-gNav {
    display: none;
}

.gNav .gNav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 子要素を垂直方向にセンタリング */
    padding: 0;
}

.gNav .gNav-menu li {
    margin: 0 auto;
    padding: 0 0 0 15px;
    display: flex;
    align-items: center; /* aタグを垂直方向にセンタリング */
}
.gNav-menu li::before {
    content: '●';       /* 丸を表示 */
    color:#4bca28;        /* 緑色に設定 */
    margin-right: 8px;   /* テキストとの間にスペースを追加 */
    font-size: 18px;     /* 丸のサイズを調整 */
}
/* 6番目のリスト項目には●を表示しない */
.gNav-menu li:nth-child(6)::before {
    content: none;
}

.gNav .gNav-menu li:nth-child(6) a {
    display: block; /* aタグをブロック要素に */
    background-color: #4bca28; /* バックグラウンド色 */
    padding: 10px 80px 18px 48px; /* 必要に応じて調整 */
    border-radius: 50px 0 0 50px; /* ラウンドの半径 */
    background-image: url(images/SVG/hikouki.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 14px) center;
    background-size: 20%;
    color: #fff;
    white-space: pre-wrap; /* テキストの折り返しを有効に */
    word-break: break-word; /* 単語の途中で改行を許可 */
}
.gNav-menu a {
    position: relative;
    color: #000; /* リンクの色 */
    text-decoration: none; /* 下線を削除 */
        font-size: large;
}

.gNav-menu a::after {
    content: '';
    position: absolute;
    left: 50%; /* 下線の開始位置をリンクの中央に */
    bottom: -2px; /* 下線の位置 */
    width: 0; /* 初期状態では幅0 */
    height: 3px; /* 下線の太さ */
    background:#4bca28; /* バックグラウンド色 */
    transition: width 0.3s ease, left 0.3s ease; /* 幅と開始位置のアニメーション設定 */
   
}

.gNav-menu li:hover a::after {
    left: 0; /* 下線の開始位置を左端に */
    width: 100%; /* 下線の幅を100%に */
}
.gNav-menu li:last-child a::after {
    content: none; /* 最後のリストアイテムの下線を非表示にする */
}
.breadcrumb {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-left: 10px;
    display: flex;
  }
  
  .breadcrumb li {
    font-family: "a-otf-ryumin-pr6n", serif;
    font-weight: 100;
    display: inline;/*横に並ぶように*/
    list-style: none;
    font-size: 12px;
  }
  
  .breadcrumb li:after {
    /* >を表示*/
    content: '>';
    padding: 0 0.5em;
    color: #4bca28;;
  }
  
  .breadcrumb li:last-child:after {
    content: '';
  }
  
  .breadcrumb li a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 13px;
  }
  
.mainvisual{
    width: 100%;
}
.mainvisual-inner{
    position: relative;
    height: calc(95% - 90px);
}
.square_bg{
    position: absolute;
    right: 0;
    background: linear-gradient(45deg, #ff7b63, #ffb5a1, #faec6c, #ffad28);
    width: 70%;
    height:100%;
    background-size: 200% 200%;/*サイズを大きくひきのばす*/
    animation: bggradient 10s ease infinite;
}
@keyframes bggradient{
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  .mainvisual-hiro {
    position: relative;
    display: flex;
    width: 80%;
    height: 65vh;
    background: linear-gradient(rgba(0, 0, 0, 0.034), rgba(0, 0, 0, 0.034)), url(images/24199804.jpg);
    background-size: cover;
    background-position: bottom;
    outline: none;
}

.mainvisual-hiro::after {
    content: '';
    position: absolute;
    top: 0;
    right: -40px; /* 右側からはみ出すように設定 */
    width: calc(100% + 40px);
    height: calc(65vh + 40px);
    border-right: 40px solid rgba(0, 0, 0, 0.173); /* 右側のアウトラインを赤色に設定 */
    border-bottom: 40px solid rgba(0, 0, 0, 0.173); /* 右側のアウトラインを赤色に設定 */
}
.mainvisual_logobg{
    display: none;
}
.mainvisual_logo {
    display: flex;
    justify-content: center; /* centers horizontally */
    align-items: center; /* centers vertically */
    width: 50%;
    height: 100%;
}


@keyframes fallAndBounce {
    0% {
        transform: translateY(-150vh); /* ビューポートの上方からスタート */
    }
    40% {
        transform: translateY(0); /* 元の位置まで落ちる */
    }
    60% {
        transform: translateY(-20px); /* バウンドの一部 */
    }
    80% {
        transform: translateY(0); /* 最終的に元の位置で安定 */
    }
    90% {
        transform: translateY(-5px); /* バウンドの一部 */
    }
    100% {
        transform: translateY(0); /* 最終的に元の位置で安定 */
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0; /* 初めは透明 */
    }
    100% {
        opacity: 1; /* 最後に完全に不透明 */
    }
}

.mainvisual_logo {
    opacity: 0; /* 初めは透明 */
    animation: fadeIn 1s ease-in 3s forwards, fallAndBounce 1s ease-out 3s forwards; /* 2秒遅らせてアニメーションを開始 */
}
.mainvisual_logobg img{
    display: none;
}
.mainvisual_logo img {
    width: 70%;
    border-radius: 50%;
    background-color: white;
    position: relative; /* 擬似要素の位置指定のために必要 */
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.8), /* 内側の光 */
                0 0 3px rgba(255, 255, 255, 0.6), /* 外側の光 */
                0 0 5px rgba(255, 255, 255, 0.4); /* 更に外側の光 */
}

.mainvisual-text {
    position: absolute;
    top: 0;
    left: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    z-index: 1;
}
:root {
    --duration: 500ms;
    --iterations: 1;
  }
  
  .reveal-text p,
  .reveal-text p::after,
  .reveal-text_sub p,
  .reveal-text_sub p::after  {
    animation-iteration-count: var(--iterations, 1);
    animation-duration: var(--duration, 500ms);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
  }
  
  .reveal-text p {
    position: relative;
    font-size: clamp(75px, 7vw, 90px);
    animation-name: clip-text;
    color: #FFF;
    white-space: nowrap;
    cursor: default;
    margin: 25px 5px;
    text-shadow:4px 4px 1px #07133573;
    font-family: "a-otf-ryumin-pr6n", serif;
    font-weight: 600;
    font-style: normal;
    height: 145px;
    border-bottom: #ffffff24 7px solid;
    backdrop-filter: blur(25px);
    background-color: rgb(255 208 0 / 0%);
    padding: 0 0 0 50px;
    display: flex;
    align-items: center;

  }
  .reveal-text p::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    animation-name: text-revealer;
  }
  .reveal-text_sub{
    position: absolute;
    bottom: 10%;
  }
  .reveal-text_sub .line3,
  .reveal-text_sub .line4 {
    position: relative;
    font-size: clamp(15px, 7vw, 40px);
    animation-name: clip-text;
    color: #FFF;
    white-space: nowrap;
    cursor: default;
    margin: 5px;
    font-weight: 100;
    text-shadow: 5px 6px 3px rgba(0, 0, 0, 0.2);
    background: linear-gradient(90deg, #fb6b52, #fac755);
    width: 100%;
    z-index: 2;
    padding: 0 15px;
  }
  .skew {
    display: inline-block; /* transformを適用するために必要 */
    transform: skewX(-20deg); /* 文字を斜めにする */
}
  .reveal-text_sub .line3::after,
  .reveal-text_sub .line4::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #fb6b52, #fac755);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    animation-name: text-revealer;
  }
  .line1 {
    animation-delay: 3s;
  }
  
  .line1::after {
    animation-delay: 3s;
  }
  
  .line2 {
    animation-delay: 3.5s;
  }
  
  .line2::after {
    animation-delay: 3.5s;
  }
  .line3 {
    animation-delay: 0s;
  }
  
  .line3::after {
    animation-delay: 0s;
  }
  
  .line4 {
    animation-delay: 0.5s;
  }
  
  .line4::after {
    animation-delay: 0.5s;
  }
  
  @keyframes clip-text {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
  
  @keyframes text-revealer {
    0%, 50% {
      transform-origin: 0 50%;
    }
    60%, 100% {
      transform-origin: 100% 50%;
    }
    60% {
      transform: scaleX(1);
    }
    100% {
      transform: scaleX(0);
    }
  }
  
  
.m-line {
    position: absolute;
    width: clamp(475px, 80%, 630px);
    height: 300px;
    /* bottom: 0px; */
    text-shadow: 5px 3px 2px rgba(0, 0, 0, 0.4);
}
.m-line p {
    position: absolute;
    z-index: 2;
    color: white;
    bottom: -20px;
    width: 60%;
    text-align: left;
    left: clamp(0px, 19.5vw, 330px);
}
.m-line p::after {
    content: '';
    width: 14vw;
    max-width: 270px;
    border-top: 2px solid #fff;
    position: absolute;
    bottom: 8px;
    left:clamp(-19vw, 18.5vw, -320px);
}
.mask-bg {
    color: transparent;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
    position: absolute;
    transition: color 0ms 450ms;
    font-family: "a-otf-ryumin-pr6n", serif;
    padding: 10px;
    left: 15px;
    bottom: 30px;
    z-index: 2;
    height: 70px;
    background-color: #ffffff;
    width: auto;

  }
  .mask-bg::after {
    background: #ffffff; /* 背景色を単一色に変更 */
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(0, 100%);
  }
   
  .mask-bg.is-animated {
    color: #1b1b1b;
  }
  .mask-bg.is-animated::after {
    animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
    animation-delay: 3200ms; /* 遅らせたい時間（ミリ秒） */
}

@keyframes mask-bg {
    0% {
        transform: translate(0, 101%);
    }
    40%, 60% {
        transform: translate(0, 0%);
    }
    100% {
        transform: translate(0, -100%);
    }
}
.casestudiesvisual-inner {
    width: 90%;
    margin: 20px auto;
    height:410px;
    display: flex; /* 子要素を横並びにするために flex を指定 */
}

.visual_textbox {
    position: relative;
    width: 40%; /* 幅を指定 */
    padding: 20px; /* 必要に応じてパディングを追加 */
    color: #404040; /* テキストの色を白に設定 */
    height: 100%;
}
.visual_textbox h3{
    font-size: 32px;
    margin: 0;
}
.visual_textbox h2{
    font-size: 62px;
    margin: 0;
}
.gradient-text {
    background: linear-gradient(90deg, #fb6b52, #fac755);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.visual_textbox p{
    position: absolute;
    bottom: 0;
    margin: 20px;
    right: 0;
}
.stroke {
    background: #ffffff;
    position: relative;
    width: 60%;
    height: 100%; /* 高さを指定することで背景画像が表示されやすくなることがある */
    background-image: url(images/AboutUs/About\ Us_main@2x-100.jpg);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
  }
  .stroke2 {
    background: #ffffff;
    position: relative;
    width: 60%;
    height: 100%; /* 高さを指定することで背景画像が表示されやすくなることがある */
    background-image: url(images/BusinessActivities/Business\ Activities_main@2x-100.jpg);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
  }
  .stroke3 {
    background: #ffffff;
    position: relative;
    width: 60%;
    height: 100%; /* 高さを指定することで背景画像が表示されやすくなることがある */
    background-image: url(images/casestudies/casestudies_main@2x-100.jpeg);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
  }
  .stroke4 {
    background: #ffffff;
    position: relative;
    width: 60%;
    height: 100%; /* 高さを指定することで背景画像が表示されやすくなることがある */
    background-image: url(images/Contact/Contact_main@2x-100.jpg);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
  }
 

  .stroke .border,
  .stroke2 .border,
  .stroke3 .border,
  .stroke4 .border {
    content: "";
    position: absolute;
    opacity: 0;
  }
 
  .stroke .border.top,
  .stroke .border.bottom,
  .stroke2 .border.top,
  .stroke2 .border.bottom,
  .stroke3 .border.top,
  .stroke3 .border.bottom,
  .stroke4 .border.top,
  .stroke4 .border.bottom {
    width: calc(100% - 20px);
  }

  .stroke .border.top,
  .stroke2 .border.top,
  .stroke3 .border.top,
  .stroke4 .border.top {
    border-top: 4px solid #362ae0;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    right: 0;
    top: 0;
  }
 
  .stroke .border.bottom,
  .stroke2 .border.bottom,
  .stroke3 .border.bottom,
  .stroke4 .border.bottom {
    border-bottom: 4px solid #362ae0;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    left: 0;
    bottom: 0;
  }
 
  .stroke .border.right,
  .stroke .border.left,
  .stroke2 .border.right,
  .stroke2 .border.left,
  .stroke3 .border.right,
  .stroke3 .border.left,
  .stroke4 .border.right,
  .stroke4 .border.left {
    height: calc(100% - 20px);
  }
  
  .stroke .border.right,
  .stroke2 .border.right,
  .stroke3 .border.right,
  .stroke4 .border.right {
    border-right: 4px solid #362ae0;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    right: 0;
    top: 0;
  }
 
  .stroke .border.left,
  .stroke2 .border.left,
  .stroke3 .border.left,
  .stroke4 .border.left
   {
    border-left: 4px solid #362ae0;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    left: 0;
    bottom: 0;
  }

  .stroke.is-animated .border,
  .stroke2.is-animated .border,
  .stroke3.is-animated .border,
  .stroke4.is-animated .border {
    opacity: 1;
  }

  .stroke.is-animated .border.top,
  .stroke.is-animated .border.bottom,
  .stroke2.is-animated .border.top,
  .stroke2.is-animated .border.bottom,
  .stroke3.is-animated .border.top,
  .stroke3.is-animated .border.bottom,
   .stroke4.is-animated .border.top,
  .stroke4.is-animated .border.bottom {
    animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .stroke.is-animated .border.right,
  .stroke.is-animated .border.left,
  .stroke2.is-animated .border.right,
  .stroke2.is-animated .border.left,
  .stroke3.is-animated .border.right,
  .stroke3.is-animated .border.left,
  .stroke4.is-animated .border.right,
  .stroke4.is-animated .border.left{
    animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
   
  @keyframes stroke-width {
    0% {
      width: 0;
      opacity: 1;
    }
    100% {
      width: calc(100% - 20px);
      opacity: 1;
    }
  }
   
  @keyframes stroke-height {
    0% {
      height: 0;
      opacity: 1;
    }
    100% {
      height: calc(100% - 20px);
      opacity: 1;
    }
  }



  .strokecase_box {
    position: relative;
    opacity: 0;
  }
  
  .strokecase_box.is-animated {
    opacity: 1;
  }
  .strokecase_box .border{
    content: "";
    position: absolute;
    opacity: 0;
  }
  .strokecase_box .border.top,
  .strokecase_box .border.bottom{
    width:100%;
  }
  .strokecase_box .border.top{
    border-top: 4px solid #362ae0;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    right: 0;
    top: 0;
  }
  .strokecase_box .border.bottom{
    border-bottom: 4px solid #362ae0;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    left: 0;
    bottom: 0;
  }
  .strokecase_box .border.right,
  .strokecase_box .border.left{
    height: 100%;
  }
  .strokecase_box .border.right{
    border-right: 4px solid #362ae0;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    right: 0;
    top: 0;
  }
  .strokecase_box .border.left
   {
    border-left: 4px solid #362ae0;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    left: 0;
    bottom: 0;
  }
  .strokecase_box.is-animated .border {
    opacity: 1;
  }
  .strokecase_box.is-animated .border.top,
  .strokecase_box.is-animated .border.bottom{
    animation: strokecase_box-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .strokecase_box.is-animated .border.right,
  .strokecase_box.is-animated .border.left{
    animation: strokecase_box-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
   
  @keyframes strokecase_box-width {
    0% {
      width: 0;
      opacity: 1;
    }
    100% {
      width:100%;
      opacity: 1;
    }
  }
   
  @keyframes strokecase_box-height {
    0% {
      height: 0;
      opacity: 1;
    }
    100% {
      height:100%;
      opacity: 1;
    }
  }

.sectionmainvisual{
    width: 100%;
}

.casestudiesvisual_textboxbg{
    background: none;
 }
.visual_textboxbg_casestudies{
    background: none;
 }
.casestudies_box1{
    background-color:#F1F1F1;
    padding: 5%;
    position: relative;
}
.casestudies_box1::before {
    position: absolute;
    top: 0px;
    right: 0px;
    /* padding: 60px; */
    content: '';
    background-image: url(images/casestudies/Case\ Studies_bg0@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
    width: 30%;
    max-width: 500px;
}
.casestudies_box1::after{
    position: absolute;
    bottom: -400px;
    left: 0px;
    /* padding: 60px; */
    content: '';
    background-image: url(images/casestudies/Case\ Studies_bg_1@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
    width: 30%;
    max-width: 500px;
}


.casestudiess{
background-color: #fff;
width: 100%;
margin: 0px auto;
position: relative;
z-index: 1;
}

.casestudiess h2 {
    position: relative;
    text-align: center;
    padding: 30px 0;
    margin: 0 auto;
    font-size: 34px;
    background-color: #ffffff;
    color: rgb(255, 133, 88);
    white-space: pre;
    width: 100%;
}
.casestudiess h2::before {
    position: absolute;
    top: -50px;
    left: -20px;
    /* padding: 60px; */
    content: '';
    background-image: url(images/casestudies/casestudies_txt@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 200px;
    width: 25%;
    max-width: 300px;
    animation: fadeInright 0.5s ease-out forwards; 
}
.casestudiess_li{
    display: block; /* 子要素を横並びにするために flex を指定 */
    font-size: 24px;
    font-weight: 800;
}
.casestudiess_left, .casestudiess_rite {
    width: 90%;
    margin: 0 auto;
    padding: 0;
}
.casestudiess_left li,.casestudiess_rite li{
    border-bottom:1px dashed #FAAF3B;
    margin: 10px 0;
}

.casestudiess_left li::before {
    content: '・'; /* 記号を追加 */
    color: #FAAF3B; /* 変更したい色を指定 */
    margin-right: 5px; /* 記号とテキストの間にマージンを追加 */
}
.casestudiess_rite li::before {
    content: '・'; /* 記号を追加 */
    color: #FAAF3B; /* 変更したい色を指定 */
    margin-right: 5px; /* 記号とテキストの間にマージンを追加 */
}
.casestudies_box1_text {
    width: 90%;
    display: flex;
    margin: 20px auto 0 auto;
}
.casestudies_box1_text p{
    width: 70%;
    margin: 20px;

}
.casestudies_box1_text img {
    display: block;
    width: 30%;
    height: auto;
}
.casestudies_box2{
    width: 100%;
    overflow: hidden;
}
  
.straight-line {
    border-top: 2px solid #000; /* 横ラインのスタイル */
    width: 50px; /* 横ラインの幅（適宜調整） */
    margin: 0 10px; /* 横ラインの上下の余白（適宜調整） */
}

.case_box{
    position: relative;
    margin: 0 auto 80px auto;
    width: 90%;
}
.case_box2 {
    display: flex; /* Flexboxを使用 */
    justify-content: flex-end; /* アイテムを右側に配置 */
    align-items: center; /* アイテムを中央に揃える */
    position: relative;
    margin: 0 auto 80px auto;
    width: 90%;
}
.case_out-box,.case_out-box1,.case_out-box2,.case_out-box3{
    position: relative;
    width: 70%;
padding: 30px;
background-color: #fff;
}
.case_inner-box{
    padding-right: 100px;
    padding: 5px;
    }
.case_inner-box2{      
        padding-left: 100px;
        padding: 5px;
        }
.case_out-box::before{
    position: absolute;
    height: 40px;
    width: 100px;
    content: 'Case.1';
    /* text-align: center; */
    color: white;
    padding: 0.2em;
    background: #333333;
    left: 0px;
    top: -36px;
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px; /* 左上角を丸くする */
    border-top-right-radius: 5px; /* 右上角を丸くする */
    z-index: 2;
}
.case_out-box1::before{
    position: absolute;
    height: 40px;
    width: 100px;
    content: 'Case.2';
    /* text-align: center; */
    color: white;
    padding: 0.2em;
    background: #333333;
    right: -4px;
    top: -44px;
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px; /* 左上角を丸くする */
    border-top-right-radius: 5px; /* 右上角を丸くする */
}
.case_out-box1::after {
    content: '';
    position: absolute;
    top: -90px;
    right: -170px;
    background-image: url(images/casestudies//casestudies_bg@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
    width: 70%;
    /* max-width: 500px; */
    z-index: -1;
}
.case_out-box2::before {
    position: absolute;
    height: 40px;
    width: 100px;
    content: 'Case.3';
    /* text-align: center; */
    color: white;
    padding: 0.2em;
    background: #333333;
    left: -4px;
    top: -44px;
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px; /* 左上角を丸くする */
    border-top-right-radius: 5px; /* 右上角を丸くする */
}
.case_out-box2::after {
    content: '';
    position: absolute;
    bottom: -240px;
    left: -220px;
    background-image: url(images/casestudies/casestudies_bg002@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 100%;
    width: 60%;
    /* max-width: 500px; */
    z-index: -1;
    /* overflow: initial; */
}
.case_out-box3::before {
    position: absolute;
    height: 40px;
    width: 100px;
    content: 'Case.4';
    /* text-align: center; */
    color: white;
    padding: 0.2em;
    background: #333333;
    right: -4px;
    top: -44px;
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px; /* 左上角を丸くする */
    border-top-right-radius: 5px; /* 右上角を丸くする */
}

.case_title{
        display: flex;
        margin: 20px;
        justify-content: center;
        align-items: center;
    }
    .case_title2{
        display: flex;
        flex-direction: row-reverse;
        margin: 20px;
        justify-content: center;
        align-items: center;
    }
    .case_title p,.case_title2 p{
        text-align: center;
            font-size: clamp(16px, 2vw, 20px);
            font-weight: 600;
    }
    
.case_title p span, .case_title2 p span {
  position: relative;
  padding: 0px 20px 5px 20px;
  display: inline;
  background: linear-gradient(transparent 60%, #FAAF3B 60%);
  transform: skew(-45deg);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1s ease, background-position 1s ease;
}

.case_title p span.active, .case_title2 p span.active {
  background-size: 100% 100%;

}



.case_title h3 span,.case_title2 h3 span{
font-size: 16px;
    /* 下線を追加 */
}  
.case_title_h2h3box{
width: 70%;
text-align: center;
}  
.case_title_h2h3box h3{
    padding: 5px;
   color: #000000;
   background-color: #FAAF3B;
   width: 80%;
   margin: 0 auto;
   border-radius: 50px;
   z-index: 3;
   position: relative;
    }  
.case_title img,.case_title2 img{
 width: auto;
 height: 130px;
}
.txt-line {
    border-top: 2px solid #000; /* 横ラインのスタイル */
    width: 50px; /* 横ラインの幅（適宜調整） */
    margin: 0 10px; /* 横ラインの上下の余白（適宜調整） */
}
.case_img {
    position: absolute;
    right: 0;
    top: 35%;
    transform: translateY(-25%) ;
    width: 40%;
    transform: translateY(-25%) translateX(10%);
}
.case_img2{
    position: absolute;
    left: 0;
    top: 35%; /* 上から50% */
    transform: translateY(-25%); /* 自身の高さの50%分上に移動 */
    width: 40%;
}
.case_img img,.case_img2 img{
width: 90%;
 }
 .case_img1_sp,.case_img2_sp,.case_img3_sp,.case_img_sp{
    display:none;
}


 .case_txt_line {
    display: flex;
    justify-content: left; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
}
.case_txt{
    width: 80%;
    margin:0 40px;
}
.case_txt2{
    margin-left: 16%;
    margin-right: 40px;
}

.message_mainvisual{
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
}
.message_main{
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.message_main::after{
content: '';
margin: 0 auto;
width: 100%;
background-color: #F1F1F1;
position: absolute;
bottom: 0px;
height: 20%;
}
.message_main::before {
    content: '';
    background-image: url(images/Message/Message_bg02@2x-8.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 480px;
    width: 40%;
    position: absolute;
    bottom: 300px;
    right: -40px;

}
.message_visual_logo{
    margin: 0 auto;
    width: 100%;
    background-color:#F1F1F1;
    text-align: center;
    padding: 50px 0;
    position: relative;
}
.message_visual_logo::before {
    content: '';
    background-image: url(images/Message/Message_bg01@2x-8.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 550px;
    width: 40%;
    position: absolute;
    top: 130px;
    left: -30px;
}
.message_visual_logo::after {
    position: absolute;
    bottom: -100px;
    left: 90px;
    /* padding: 60px; */
    content: '';
    background-image: url(images/Message/Message_txt@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 200px;
    width: 25%;
    max-width: 300px;
    z-index: 2;
}
.message_visual_logo img {
    margin: 0 auto;
    width: 30%;
    border-radius: 100%;
    background-color: white;
    position: relative;
    z-index: 2;
    animation: fadeInUp 1.5s ease-out forwards;
}
.smooth {
    clip-path: inset(0 100% 0 0);
    display: inline-block;
    transition: clip-path 1s cubic-bezier(0.37, 0, 0.63, 1);
    line-height: 1;
    margin-top: 15px;
  width: 100%;
  }
  .smooth.is-animated {
    clip-path: inset(0);
  }

.message_main_txt {
    margin: 0 auto;
    width: 90%;
    background-color: #fff;
    padding: 200px 30px 40px 30px;
    position: relative;
    top: -200px;
    z-index: 1;
}
.message_main_txt h2{
    position: relative;
    text-align: center;
    width: 100%;
margin: 0 auto;
text-shadow: 1px 1px 1px #FAAF3B;
font-family: "a-otf-ryumin-pr6n", serif;
font-weight: 100;
white-space: pre;
line-height: 1.5; /* 1.5倍の行間 */
font-size: 40px;
}
.message_main_txt h3{
width: 95%;
margin: 50px auto;
font-family: "a-otf-ryumin-pr6n", serif;
font-size: 27px;
display: flex; /* フレックスボックスに変更 */
align-items: center; /* 垂直方向の中央寄せ */
height: 30px;
}
.message_main_txt h3::before {
    content: '・';
    color: #FAAF3B;
    margin-right: 5px;
    font-size:100px;
    width: 65px;
}

.message_main_txt p{
margin: 60px auto;
font-weight: 100;
line-height: 1.8; /* 1.5倍の行間 */
font-size: 24px;
font-family: "a-otf-ryumin-pr6n", serif;
}
.sign{
    width: 90%;
    height: 100px;
    margin: 0 10% 0 0;
    background-image: url(images/SVG/sign.svg);
    background-repeat: no-repeat;
    background-size: 140px;
    background-position: right;

}
.aboutus_mainvisual{
width: 100%;
overflow: hidden;
padding: 40px 0 0px 0;
}
.aboutus_box1 {
    width: 100%;
    background-color: #F1F1F1;
    margin: 0 auto;
    padding: 5%;
    position: relative;
}
.aboutus_table {
    width: 100%;
    border: 4px solid;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    padding: 80px;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.aboutus_box1::before{
    background-image: url(images/AboutUs/About\ Us_bg01@2x-8.png);
    background-size: cover;
    position: absolute;
    width: 35%;
height: 400px;
content: '';
top: -40;
right: -40;
}
.aboutus_box1::after{
    background-image: url(images/AboutUs/About\ Us_bg02@2x-8.png);
    background-size: cover;
    position: absolute;
    width: 35%;
height: 450px;
content: '';
bottom: 100px;
left: -120px;
}
table {
    width: 100%;
    border-collapse: collapse; /* セルの線を重ねる */
}
th, td {
    border: #000 solid 1px;  /* 枠線指定 */
    vertical-align: middle; /* 上下センタリング */
}
th {
    color: white;
    background-color: #333;
    width: 30%;   /* 幅指定 */
    height: 80px; /* 高さ指定 */
    display: flex; /* フレックスボックスに変更 */
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center; /* 垂直方向の中央寄せ */
}
td {
    width: 70%;
    text-align: center;
    display: flex; /* フレックスボックスに変更 */
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center; /* 垂直方向の中央寄せ */
}
.row-wrapper {
    margin-bottom: 15px; /* 行の間隔を設定 */
    display: flex;
}
.row-wrapper:last-child {
    display: block;
  }
  .row-wrapper:nth-last-child(2) {
    margin-top: 100px;
    margin-bottom: -1px;  
}
.map{
width: 100%;
padding: 5%;
}

.contact_mainvisual{
    width: 100%;
  margin: 0 auto;
  overflow: hidden;
    }
    .tel_box {
        width: 90%;
        padding: 40px 120px;
        font-family: "a-otf-ryumin-pr6n", serif;
        font-weight: 600;
        margin: 60px auto;
        background-color: white;
        /* display: flex; */
        position: relative;
        z-index: 1;
    }
    .tel_box_logo a{
        display: block;
    }
    
    .tel_box_logo {
        width: 100%; /* ロゴの幅を30%に設定 */
    background-image: url(images/SVG/tel_1.svg);
    background-position: center;
    background-size: 90%;
    background-repeat: no-repeat;
    height:470px;
    cursor: pointer; /* カーソルをポインターに変更 */
    }

    .contact_box{
    width: 100%;
    background-color: #F1F1F1;
    margin: 0 auto;
    padding: 5%;
    position: relative;
    }
    form {
        width: 100%;
        border: 4px solid;
        border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
        padding: 80px;
        background-color: #fff;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    .required {
        height: 30px;
        width: 100%;
        display: flex;
        /* justify-content: center; */
        align-items: center;
    }
    .required::after {
        width: 60px;
        font-size: 12px;
        height: 75%;
        content: " 必須";
        color: white;
        background-color: red;
        /* padding: 8px; */
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 20px;
        border-radius: 5px;
    }
    #name,#tel,#email,#address{
        width: 100%;
        height: 35px;
        border-radius: 5px;
        border :1px solid;
        margin: 0px auto 20px auto;
    }
    #postal_code_1,#postal_code_2{
        width:auto;
        height: 35px;
        border-radius: 5px;
        border :1px solid;
    }
    #message{
        width: 100%;
        height: 30vh;
        border :1px solid;
    }
    .contact_btn{
        width: 100%;
        text-align: center;
    }
    #btn{
        background-color: #333;
        color: white;
        border :1px solid;
        height: 60px;
        width: 25%;
        margin: 20px auto;
    }
    
    .contact_box::before {
        background-image: url(images/Contact/Contact_bg01@2x-8.png);
        background-size: cover;
        position: absolute;
        width: 35%;
        height: 410px;
        content: '';
        top: -90px;
        right: -30px;
    }
    .contact_box::after{
        background-image: url(images/Contact/Contact_bg02@2x-8.png);
        background-size: cover;
        position: absolute;
        width: 100%;
    height: 450px;
    content: '';
    bottom: 100px;
    left: -120px;
    }

    .activities_box1{
        width: 100%;
        background-color:#fff;
        padding: 5%;
        position: relative;
        display: flex;
        height: 500px;
        margin:0 auto 60px auto;
    }
    .activities_left{
        width: 50%;
    }
    .activities_right{
        width: 50%;
        background-image: url(images/BusinessActivities/Business\ Activities_image01@2x-100.jpg);
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .activities_left h2 {
        position: relative;
        text-align: center;
        padding: 30px 0;
        margin: 0;
    }
    .activities_left::before {
        position: absolute;
        top: 0px;
        left: 20px;
        /* padding: 60px; */
        content: '';
        background-image: url(images/BusinessActivities/Business\ Activities_txt@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 200px;
        width: 25%;
        max-width: 300px;
    }
    .activities_box1_title,.casestudies_box2_title,.casestudies_box2-1_title,.casestudies_box3_title{
        display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto;
    font-size: 27px;
    }

 
    .activities_li{
        font-size: 24px;
    }
    .activities_box2{
        width: 100%;
        background-color: #F1F1F1;
        padding: 80px 0 ;
        position: relative;
    }
    .activities_box2::before {
        background-image: url(images/BusinessActivities/Business\ Activities_bg001@2x-8.png);
        background-size: cover;
        position: absolute;
        width: 35%;
        height: 410px;
        content: '';
        top: -90px;
        right: -30px;
    }
    .activities_box2::after{
        background-image: url(images/BusinessActivities/Business\ Activities_bg002@2x-8.png);
        background-size: cover;
        position: absolute;
        width: 40%;
    height: 450px;
    content: '';
    bottom: 10px;
    left: -120px;
    }

.propertieshandled_box{
    width: 90%;
    position: relative;
    margin: 0 auto;
    background-color: white;
    padding-bottom: 30px;
    z-index: 2;
    margin-bottom: 40px;
}
.casestudies_box2-1_title::before {
    position: absolute;
    top: -50px;
    left:15%;
    /* padding: 60px; */
    content: '';
    background-image: url(images/BusinessActivities/Properties\ Handled_txt@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 200px;
    width: 25%;
    max-width: 300px;
}
.activities_box3{
    width: 100%;
    background-color: #F1F1F1;
    padding: 50px 0 ;
    position: relative;
    overflow: hidden;
}

.activities_box3::after{
    background-image: url(images/BusinessActivities/Business\ Activities_bg003@2x-8.png);
    background-size: cover;
    position: absolute;
    width: 40%;
height: 450px;
content: '';
bottom: -30px;
right: -30px;
}

.casestudies_box3_title::before {
    position: absolute;
    top:  -35px;
    left: 15%;
    /* padding: 60px; */
    content: '';
    background-image: url(images/BusinessActivities/Workflow_txt@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 200px;
    width: 20%;
    max-width: 300px;
}
.image-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px; /* 画像間のスペース */
    padding: 10px;
    width: 95%;
    margin: 0 auto;
}

.image-grid img {
    width: calc(25% - 20px); /* 25%の幅からスペースを引く */
    box-sizing: border-box;
}

@keyframes fadeInSequence {
    from { opacity: 0; }
    to { opacity: 1; }
}

.image-grid img {
    opacity: 0;
    /* 初期状態で非表示 */
}

.image-grid img.visible {
    animation: fadeInSequence 1s forwards;
}

.image-grid img:nth-child(1) {
    animation-delay: 0s;
}
.image-grid img:nth-child(2) {
    animation-delay: 0.5s;
}
.image-grid img:nth-child(3) {
    animation-delay: 1s;
}
.image-grid img:nth-child(4) {
    animation-delay: 1.5s;
}
.image-grid img:nth-child(5) {
    animation-delay: 2s;
}
.image-grid img:nth-child(6) {
    animation-delay: 2.5s;
}
.image-grid img:nth-child(7) {
    animation-delay: 3s;
}
.image-grid img:nth-child(8) {
    animation-delay: 3.5s;
}

.hide-responsive {
    display: block;
}



.propertieshandled_ul{
font-family: Arial, sans-serif;
font-size: 16px;
box-sizing: border-box;
list-style: none;
list-style-type: none;
width: 80%;
margin: 20px auto;
padding: 20px 0;
}
.propertieshandled_ul p{
text-align: right;
font-size: 12px;
    }
.propertieshandled_ul li{
font-family: Arial, sans-serif;
font-size: 24px;
list-style: none;
list-style-type: none;
box-sizing: border-box;
border-bottom: 1.5px dashed #000000;
margin: 10px 0;
font-weight: 800;
}

.propertieshandled_ul li::before {
    content: '・';
    color: #FAAF3B;
    margin-right: 5px;
    position: initial;
    left: 2px;
}
.workflow_ul{
    width: 80%;
    border: 4px solid;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    padding: 30px;
    background-color: #fff;
    margin: 0 auto 80px auto;
    position: relative;
    z-index: 2;
    text-align: center;
}
.workflow_ul:not(:last-child)::after {
    content: "";
    display: inline-block;
    margin-left: 10px; /* 三角形とテキストの間に余白を追加 */
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 30px solid #FAAF3B;
    position: absolute;
    left: 50%; /* 親要素の幅の50%の位置に配置 */
    transform: translateX(-50%); /* 中央揃えのために50%移動 */
    bottom: -60;
}
.workflow_li p{
    font-size: 24px;
    font-weight: 800;
}
.workflow_ul_txt p{
    font-size: 18px;
    font-weight: 600;
    text-align: center;
  }
.workflow_li{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.workflow_step{
    background-image: url(images/SVG/step01.svg);
    background-repeat: no-repeat;
    background-size: 90%;
    height: 70px;
    width: 70px;
    margin: 20px;
}
.workflow_step02{
    background-image: url(images/SVG/step02.svg);
    background-repeat: no-repeat;
    background-size: 90%;
    height: 70px;
    width: 70px;
    margin: 20px;
}
.workflow_step03{
    background-image: url(images/SVG/step03.svg);
    background-repeat: no-repeat;
    background-size: 90%;
    height: 70px;
    width: 70px;
    margin: 20px;
}
.workflow_ul img{
    width: 40%;
    margin: 0 auto;
}
img[src="images/BusinessActivities/Workflow_icon01@2x-8.png"] {
    width: 30%; /* 例: 幅を100pxにする */
}
img[src="images/BusinessActivities/Workflow_icon03@2x-8.png"] {
    width: 25%; /* 例: 幅を100pxにする */
}

section{
    overflow: hidden;
}
.contact {
    position: relative;
    width: 100%;
    height: auto; /* 親コンテナの高さを設定 */
    margin: 0 auto;
}

.contact img {
    width: 100%;
    height:auto; /* 画像がコンテナの高さをカバーするように設定 */
    object-fit: cover; /* 画像を歪みなくカバー */
}

.contact_btn_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央に配置 */
    width: 45%;
    height:auto;
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.9);
    padding: 20px 0;
    display: flex;
      flex-direction: column;
}
.contact_btn_box p{
width: 100%;
margin: 0 auto;
text-align: center;
    display: block;
    margin-top: 25px;
    font-size: clamp(16px, 2vw, 24px);
    font-family: "a-otf-ryumin-pr6n", serif;
}
.contact_btn_box_txt{
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    flex: 1;
}
.contact_btn_box img{
    width: 60%;
    margin: 15px auto;
    padding: 0;
}
.contact_btn_box_txt::before{
    content: '';
    position: absolute;
   top: 10px;
    left: 10%;
    width: 4px; /* ラインの太さ */
    height: 40%;
    background-color:#FAAF3B; /* ラインの色 */
    transform: rotate(-20deg); /* 45度の斜めライン */
    transform-origin: top left; /* 回転の基点を左上に設定 */
    border-radius: 5px;
}
.contact_btn_box_txt::after{
    content: '';
    position: absolute;
    top: 10px;
    right: 10%;
    width: 4px; /* ラインの太さ */
    height: 40%;
    background-color: #FAAF3B; /* ラインの色 */
    transform: rotate(20deg); /* 45度の斜めライン */
    transform-origin: top left; /* 回転の基点を左上に設定 */
    border-radius: 5px;
}
.contact_btn_box_txt h3{
    margin: 0;
    text-align: center;
    color: #FAAF3B;
}
.contact_btn_box_txt h4{
    margin: 0;
    text-align: center;
    font-size: 24px;
}
.contact_bottom_btn {
    flex: 1;
    width: 100%;
    margin:auto;
    display: flex;
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center; /* 垂直方向の中央寄せ */
    text-align: center;
    height: auto; /* 親要素の高さをビューの高さに設定 */
}

.contact_mail, .contact_tel_sp {
    height: 100px;
    max-height: 60px;
    width: 45%;
    margin: 2.5%;
    background-color: #fa943b;
    border-radius: 5px;
    padding: 10px 0;
    display: flex;
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center; /* 垂直方向の中央寄せ */
    
}

.contact_mail a, .contact_tel_sp a {
    display: flex;
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center; /* 垂直方向の中央寄せ */
    width: 100%;
    height: 100%;
}

.contact_mail span, .contact_tel_sp span {
    margin: 0; /* pタグのデフォルトマージンをリセット */
    font-size: 16px;
    color: white;
}


.contact_sp{
   display: none;
}


footer{
        width: 100%;
        background-color: #ffffff;
        margin: 0 auto;
        height: 5%;
        text-align: center;
        display: flex;
        align-items: center;
    }
.footer_box{
    width: 90%;
    margin: 0 auto;
}
.footer_logo {
    display: flex;
    align-items: center; /* 子要素を垂直方向にセンタリング */
}

.footer_logo .vertical-line {
    border-left: 2px solid #000; /* 縦ラインのスタイル */
    height: 60px; /* 縦ラインの高さ（適宜調整） */
    margin: 0 20px; /* 縦ラインの左右の余白（適宜調整） */
}
.footer_logo img{
    width:20%;
    margin-right: 5px;
  }
  .footer_menu {
    width: 100%; /* フッターメニューの幅を100%に設定 */
    text-align: right; /* テキストを右寄せにする */
}

.footer_menu ul {
    list-style: none; /* リストのデフォルトスタイルを削除 */
    padding: 0; /* パディングをリセット */
    margin: 0; /* マージンをリセット */
    display: flex; /* リストを横並びにする */
    justify-content: flex-end; /* 要素を右側に配置 */
}

.footer_menu li {
    margin-right: 20px; /* リストアイテム間の間隔（適宜調整） */
}

.footer_menu a {
    text-decoration: none; /* リンクの下線を削除 */
    color: #000000; /* リンクの色を設定 */
    display: block; /* リンクをブロック要素に */
    padding: 10px 15px; /* リンクのパディング（適宜調整） */
}
.footer_copy {
    width: 100%;
    height: 30px;
    text-align: center;
    color: #4bca28;
    background-color: #fff;
    display: flex;
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center; /* 垂直方向の中央寄せ */
}

.container {
    display: none;
  }
  /* フェードアップ*/
.section_fadeup {
    opacity: 0;
    transform: translateY(20px); /* 初期位置を下に設定 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    position: relative;
    z-index: 2;
  }
  /* フェードアップ */
  .section_fadeup.visible {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻す */
  }
  /* その場でフェード */
.section_fade{
    opacity: 0;
    transition: opacity 2s ease-out;
  }
  
  /* その場でフェード */
  .section_fade.visible {
    opacity: 1;
  }


@media screen and (max-width: 820px) {
    .loader-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* ビューポートの幅 */
        height: 100vh; /* ビューポートの高さ */
        background: linear-gradient(45deg, #ff7b63, #ffb5a1, #faec6c, #ffad28);
        background-size: 200% 200%;
        animation: bggradient 3s ease infinite;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    
    .loader-wrapper {
        position: relative;
        width: 300px; /* Adjust this width as needed */
        height: 300px; /* Adjust this height as needed */
    }
    
    #loading-text {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        opacity: 0;
        animation: fadeIn 1.5s ease-in-out forwards;
        animation-delay: 0.5s; /* フェードインアニメーション開始を1秒遅らせる */
    }
    
    #loading-text img {
        max-width: 70%; /* ビューポートの幅に合わせて調整 */
        max-height: 70%; /* ビューポートの高さに合わせて調整 */
        width:350px; /* アスペクト比を維持 */
        height: 350px; /* アスペクト比を維持 */
        z-index: 9999;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    #loading-content {
        width: 230px; /* 必要に応じて調整 */
        height: 230px; /* 必要に応じて調整 */
        border: 5px solid transparent;
        border-radius: 50%;
        animation: loader 2s linear infinite;
        z-index: -1;
        background-color: white;
    }
    
    #loading-content:before, #loading-content:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        animation: loader 2s linear infinite;
    }
    
    #loading-content:before {
        box-shadow: 0 0 0 10px transparent,
                    0 0 10px 10px #fff, 
                    0 0 20px 20px transparent;
        border-radius: 50%;
    }
    
    #loading-content:after {
        box-shadow: 0 0 0 20px transparent,
                    0px 0px 0px 70px #fff,
                    0 0 50px 30px transparent;
        border-radius: 50%;
    }
    
    @keyframes loader {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg); /* フル回転 */
        }
    }
         
        .index_btn .anm_btn{
        display: block;
        right: 0;
        left: 0;
        position: absolute;
        z-index: 2;
      }
      .index_btn .anm_btn a{
        display: block;
        width: 350px;
        height: 60px;
        line-height: 52px;
        text-decoration: none;
        text-align: center;
        border-radius: 10px;
        border: 3px solid #ff5f33;
        color: #ff5f33;
        font-size: 18px;
        font-family: arial;
        position: relative;
        overflow: hidden;
        background: transparent;
        text-transform: uppercase;
        transition: all .35s;
        margin: 10px auto;
        font-family: "a-otf-ryumin-pr6n", serif;
        background: #fff;
      }
      .anm_btn a:hover{
        background: #ff5f33;
        color: #fff;
        border: 3px solid #fff;
      }
    .logo {
        background-image: url(images/SVG/logo1.svg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 200px;
        height: 70px;
        margin-left: 20px;
    }
    .tel {
        display: none;
     }
    .btn-gNav {
        display: block;
    }
    .gNav-menu li::before {
       display: none;
    }

    .gNav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: rgb(255 255 255 / 95%);
        font-size: 16px;
        box-sizing: border-box;
        z-index: 1;
        padding-top: 50px;
        transition: .3s;
    }

    .gNav.open {
        right: 0;
        z-index: 9;
    }
    .gNav .gNav-menu li:nth-child(6) a {
        display: block;
        background-color: #4bca28;
        padding: 5px 15px 5px 26px;
        border-radius: 50px;
        background-image: none;
        background-repeat: no-repeat;
        background-position: calc(100% - 14px) center;
        background-size: 30%;
        color: #fff;
        white-space: pre-wrap;
        word-break: break-word;
        width: 80%;
    }
    
    
    .gNav .gNav-menu {
        padding: 0;
        width: 100%;
        height: 100%;
        display: block;
        flex-direction: column;
        text-align: center;
        /*justify-content: center;*/
    }

    .gNav .gNav-menu li {
        width: 86%;
        padding: 15px;
        border-bottom: #525252 1px solid;
    }
    .gNav-menu li::before {
        display: none;
     }
    .hamburger .btn-gNav {
        position: fixed;
        top: 5px;
        right: 20px;
        width: 60px;
        height: 55px;
        z-index: 12;
        box-sizing: border-box;
        cursor: pointer;
        -webkit-transition: all 400ms;
        transition: all 400ms;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #4bca28;
        border-radius: 10px;
    }
    .hamburger .btn-gNav span {
        position: absolute;
        width: 80%;
        height: 4px;
        background: #ffffff;
        border-radius: 10px;
        -webkit-transition: all 400ms;
        transition: all 400ms;
    }
    .gNav-menu a {
        position: relative;
        color: #000;
        text-decoration: none;
        margin: 0 auto;
    }
    .container {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
    }
    
    .left-image {
    background: linear-gradient(45deg, #ff7a63c8, #ffda60d5, #ffad28b7), 
    url('images/OIG2.jpeg') no-repeat center center;
    background-size: cover;
    background-position: top;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 70% 0, 30% 100%, 0 100%);
    position: absolute;
    left: 0;
    z-index: 1;
    }
    
    .right-image {
        display: flex;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        /* overflow: hidden; 削除 */
        transition: transform 0.5s ease;
    }
    
    .right-image-item {
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        object-fit: cover;
    }
    
    .slider-range {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 5px;
        appearance: none;
        pointer-events: auto;
        transform: translateX(-50%);
    }
    
    .slider-range::-webkit-slider-thumb {
        width: 10px;
        height: 10px;
        background: #000;
        cursor: pointer;
        pointer-events: auto;
        appearance: none;
    }
    
    .slider-range::-moz-range-thumb {
        width: 10px;
        height: 10px;
        background: #000;
        cursor: pointer;
        pointer-events: auto;
    }
    
    
    .mainvisual {
        width: 100%;
        height: calc(100vh - 90px);
        display: block;
    }
    .mainvisual-inner{
        position: relative;
        height: 100%;
    }
    .square_bg{
        display: none;
    
    }

    .mainvisual-hiro {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
        background-image: none;
        background-size: cover ;
        background-position: center;
        background-repeat: no-repeat;
        outline: none;
        z-index: -1;
        flex-direction: column;
    }
    .mainvisual_logo {      
        justify-content: center; 
        align-items: center;           
        margin: 30px;            
        flex: none;
        height: auto;
        width: 50%;
        z-index: 2;
    }
    .mainvisual_logo img {
        width: 100%;
        border-radius: 50%;
        max-width: 300px;
        background-color: white;
    }
    .reveal-text{
        margin: 30px;
    }
    .reveal-text p {
        position: relative;
        font-size: clamp(40px, 12vw, 90px);
        animation-name: clip-text;
        color: #FFF;
        white-space: nowrap;
        cursor: default;
        font-family: "a-otf-ryumin-pr6n", serif;
        font-weight: 600;
        font-style: normal;
        text-shadow:4px 4px 1px #07133573;
        backdrop-filter: blur(5px);
        background-color: rgb(255 208 0 / 0%);
        display: flex;
        justify-content: center;
        align-items: center;

      }
    .mainvisual-text {
        right: initial;
        z-index: 1;            
        flex: none;    
        position: initial;
        display: block;
        height: auto;
        width:100%;
        margin: 0 auto;
    }
    .m-line {
      bottom: initial;
      height: auto;
      margin: 0 0 0 30px;
    }
    .mask-bg {
        color: transparent;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        overflow: hidden;
        position: relative;
        transition: color 0ms 450ms;
        font-family: "a-otf-ryumin-pr6n", serif;
        padding: 15px;
        left: 0px;
        bottom: 0;
        z-index: 2;
        height: auto;
        background-color: #ffffff;
        text-align: center;
        margin: 0 auto;
        width:100%;
    }

.sectionmainvisual {
    width: 100%;
}


.stroke {
    background: #ffffff;
    position: relative;
    width: 100%;
    height: 100%; /* 高さを指定することで背景画像が表示されやすくなることがある */
    background-image: url(images/AboutUs/About\ Us_main@2x-100.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
  }
  .stroke2 {
    background: #ffffff;
    position: relative;
    width: 100%;
    height: 100%; /* 高さを指定することで背景画像が表示されやすくなることがある */
    background-image: url(images/BusinessActivities/Business\ Activities_main@2x-100.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
  }
  .stroke3 {
    background: #ffffff;
    position: relative;
    width: 100%;
    height: 100%; /* 高さを指定することで背景画像が表示されやすくなることがある */
    background-image: url(images/casestudies/casestudies_main@2x-100.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
  }
  .stroke4 {
    background: #ffffff;
    position: relative;
    width: 100%;
    height: 100%; /* 高さを指定することで背景画像が表示されやすくなることがある */
    background-image: url(images/Contact/Contact_main@2x-100.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
  }
  .reveal-text_sub .line3, .reveal-text_sub .line4 {
    position: relative;
    font-size: clamp(12px, 4vw, 40px);
    animation-name: clip-text;
    color: #FFF;
    white-space: nowrap;
    cursor: default;
    margin: 10px 0;
    font-weight: 100;
    text-shadow: 5px 6px 3px rgba(0, 0, 0, 0.2);
    background: linear-gradient(90deg, #fb6b52, #fac755);
    width: 100%;
    z-index: 2;
    padding: 15px 8px;
}
.visual_textbox {
    position: absolute;
    width: 90%;
    padding: 20px;
    height: auto;
    color: #fff;
    text-shadow: 1px 2px 1px rgba(46, 46, 46, 0.1);
}

.sectionvisual {
   display: none;
}

    .mainvisual-hiro::after {
        display: none;
    }
    .reveal-text_sub {
        position: initial;
        bottom: 10%;
        height: auto;
    }
    
    .visual_textbox h3 {
        font-size: 24px;
        margin: 0;
        margin-bottom: 0px; /* 下部余白の追加 */
    }
    
    .visual_textbox h2 {
        font-size: 48px;
        margin: 0;
        margin-bottom: 100px; /* 下部余白の追加 */
    }
    
    .aboutus_sectionvisual{
   display: none;
    
    }
    .aboutus_table {
        width: 100%;
        border: 4px solid;
        border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
        padding: 0px;
        background-color: #fff;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    .row-wrapper {
        margin-bottom: 15px;
        display: flex;
        width: 95%;
        margin: 20px auto;
        font-size: 16px;
    }
    tbody {
        background-color: #f9f9f9;
        display: block;
        width: 100%;
        padding: 5px;
      }
      table {
        display: block;
        width: 100%;
        border-collapse: collapse;
    }
    td {
        width: 80%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: smaller;
    }
    th {
        color: white;
        background-color: #333;
        width: 20%;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: smaller;
    }
    .row-wrapper:nth-last-child(2) {
        margin-top: 70px;
        margin-bottom: -1px;
    }
   .map{
       border:none;
      }
      .activities_box1 {
        width: 100%;
        background-color: #fff;
        padding: 5%;
        position: relative;
        display: block;
        height: auto;
        margin: 0 auto;
    }
    .activities_sectionvisual{
       display: none;
    
    }
    .activities_left {
        width: 100%;
    }
    .activities_right {
        width: 70%;
        background-image: url(images/BusinessActivities/Business\ Activities_image01@2x-100.jpg);
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
        height: 40%;
        margin: 0 auto;
    }
    .activities_li {
        font-size: 20px;
        padding: 0;
        text-align: center;
    }
    .activities_left::before {
        position: absolute;
        top: 30px;
        left: 20px;
        /* padding: 60px; */
        content: '';
        background-image: url(images/BusinessActivities/Business\ Activities_txt@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 200px;
        width: 35%;
        max-width: 300px;
    }
    .casestudies_box2-1_title::before {
        position: absolute;
        top: -23px;
        left: -2%;
        /* padding: 60px; */
        content: '';
        background-image: url(images/BusinessActivities/Properties\ Handled_txt@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 200px;
        width: 45%;
        max-width: 300px;
    }
    .activities_box1_title, .casestudies_box2_title, .casestudies_box2-1_title, .casestudies_box3_title {
        display: block;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 27px;
        text-align: center;
    }
    .activities_box1_title h2, .casestudies_box2_title h2, .casestudies_box2-1_title h2, .casestudies_box3_title h2 {
    margin: 20px auto 0 auto;
    padding: 29px 0 0 0;
    }
    .activities_box1_title p, .casestudies_box2_title p, .casestudies_box2-1_title p, .casestudies_box3_title p {
        margin: 0 0 10px 0;
        }
    .activities_box2 {
        width: 100%;
        background-color: #F1F1F1;
        padding: 80px 0 10px 0;
        position: relative;
    }
    .propertieshandled_ul {
        font-family: Arial, sans-serif;
        font-size: 16px;
        box-sizing: border-box;
        list-style: none;
        list-style-type: none;
        width: 90%;
        margin: 20px auto;
        padding: 20px 0;
    }
    .propertieshandled_ul li {
        font-family: Arial, sans-serif;
        font-size: 18px;
        list-style: none;
        list-style-type: none;
        box-sizing: border-box;
        border-bottom: 1.5px dashed #000000;
        margin: 10px 0 10px 20px;
        font-weight: 800;
    }
    .propertieshandled_ul li::before {
        content: '・';
        color: #FAAF3B;
        margin-right: 5px;
        position: absolute;
        left: 2px;
    }
    .activities_box3 {
        width: 100%;
        background-color: #F1F1F1;
        padding: 30px 0;
        position: relative;
        overflow: hidden;
    }
    .casestudies_box3_title::before {
    position: absolute;
    top: -23px;
    left: 2%;
    /* padding: 60px; */
    content: '';
    background-image: url(images/BusinessActivities/Workflow_txt@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 200px;
    width: 25%;
    max-width: 300px;
}
img[src="images/BusinessActivities/Workflow_icon01@2x-8.png"] {
    width: 50%;
}
img[src="images/BusinessActivities/Workflow_icon03@2x-8.png"] {
    width: 45%;
}
img[src="images/BusinessActivities/Workflow_icon02@2x-8.png"] {
    width: 65%;
}
.hide-responsive{
    display: none;
}
.image-grid img {
    width: calc(50% - 5px);
    box-sizing: border-box;
}
.casestudiess {
    background-color: #fff;
    width: 100%;
    margin: 50px auto;
    position: relative;
    z-index: 1;
}
.casestudiess h2::before {
    position: absolute;
    top: -60px;
    left: -20px;
    /* padding: 60px; */
    content: '';
    background-image: url(images/casestudies/casestudies_txt@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 200px;
    width: 35%;
    max-width: 300px;
}
.casestudiess h2 {
    position: relative;
    text-align: center;
    padding: 30px 0;
    margin: 0;
    font-size: 28px;
}
.casestudiess_li {
    display: block;
    font-size: 18px;
    font-weight: 800;
}
.casestudiess_left, .casestudiess_rite {
    width: 90%;
    margin: 0px auto;
    padding: 0px;
}

.casestudiess_left li, .casestudiess_rite li {
    border-bottom: 1px dashed #FAAF3B;
    margin: 10px 0 10px 25px;

}
.casestudiess_left li::before {
    content: '・';
    color: #FAAF3B;
    margin-right: 5px;
    position: absolute;
    left: 0px;
}
.casestudiess_rite li::before {
    content: '・';
    color: #FAAF3B;
    margin-right: 5px;
    position: absolute;
    left: 0px;
}
.case_box{
    position: relative;
    margin: 0 auto 80px auto;
    width: 95%;
}
.case_box2 {
    display: flex; /* Flexboxを使用 */
    justify-content: flex-end; /* アイテムを右側に配置 */
    align-items: center; /* アイテムを中央に揃える */
    position: relative;
    margin: 0 auto 80px auto;
    width: 95%;
}
.case_out-box, .case_out-box1, .case_out-box2, .case_out-box3 {
    position: relative;
    width: 100%;
    padding: 30px;
    background-color: #fff;
}

.case_title_h2h3box {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}
.case_title {
    display: block;
    margin: 10px;
    justify-content: center;
    align-items: center;
}
.case_title img, .case_title2 img {
    width: auto;
    height: 130px;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.case_txt_line {
    display: flex;
    justify-content: center;
    align-items: center;
}
.case_txt {
    width: 90%;
    margin: 0 auto;
}
.case_title2 {
    display: block;
    flex-direction: row-reverse;
    margin: 10px;
    justify-content: center;
    align-items: center;
}
.case_txt2 {
    margin-left: 0;
    margin-right: 0;
    width: 90%;
    margin: 0 auto;
}
.case_out-box1::before {
    position: absolute;
    height: 40px;
    width: 100px;
    content: 'Case.2';
    /* text-align: center; */
    color: white;
    padding: 0.2em;
    background: #333333;
    left: -4px;
    top: -44px;
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.case_out-box3::before {
    position: absolute;
    height: 40px;
    width: 100px;
    content: 'Case.4';
    /* text-align: center; */
    color: white;
    padding: 0.2em;
    background: #333333;
    left: -4px;
    top: -44px;
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.casestudies_box1_text {
    width: 90%;
    display: block;
    margin: 20px auto 0 auto;
    align-items: center;
    justify-content: center;
}
.case_img1,.case_img2,.case_img3,.case_img{
    display: none;
}
.case_img2_sp,.case_img_sp{
    display: block;
    margin: 15px;
}
.case_img_sp img,.case_img2_sp img{
    width: 90% !important;
    height: auto!important;
}
.casestudies_box1_text p {
    width: 100%;
    margin: 20px auto;
    text-align: center;
    font-size: 13px;
}
.casestudies_box1_text img {
    display: block;
    width: 50%;
    height: auto;
    margin: 0 auto;
}

    .footer_menu ul {
        list-style: none;
        padding: 0;
        margin: 50px;
        display: block;
        text-align: center;
    }
    .footer_logo {
        text-align: center;
        display: block;
        align-items: center;
    }
    .footer_logo img {
        width: 60%;
        margin-right: 5px;
        padding: 20px;
    }
    .footer_logo .vertical-line {
     display: none;
    }
    .case_title_h2h3box h3 {
        padding: 15px;
        color: #000000;
        background-color: #FAAF3B;
        width: 80%;
        margin: 0 auto;
        border-radius: 50px;
        font-size: 27px;
    }
    .case_title img, .case_title2 img {
        width: auto;
        height: 130px;
        margin: -2px auto;
        text-align: center;
        display: block;
        
    }
    .case_title p, .case_title2 p {
        text-align: center;
        font-size: clamp(16px, 1vw, 24px);
        font-weight: 600;
    }
    .casestudies_box1::after {
        position: absolute;
        bottom: -400px;
        left: 0px;
        /* padding: 60px; */
        content: '';
        background-image: url(images/casestudies/Case\ Studies_bg_1@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 100%;
        width: 40%;
        max-width: 500px;
    }
    .case_out-box2::after {
        content: '';
        position: absolute;
        bottom: -570px;
        left: -70px;
        background-image: url(images/casestudies/casestudies_bg002@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 100%;
        width: 80%;
        /* max-width: 500px; */
        z-index: -1;
        /* overflow: initial; */
    }
    .case_out-box1::after {
        content: '';
        position: absolute;
        top: -90px;
        right: -120px;
        background-image: url(images/casestudies//casestudies_bg@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
        /* max-width: 500px; */
        z-index: -1;
    }

    .message_main_txt {
        margin: 0 auto;
        width: 90%;
        background-color: #fff;
        padding: 200px 30px 40px 30px;
        position: relative;
        top: -130px;
        z-index: 1;
    }
    .message_visual_logo {
        margin: 0 auto;
        width: 100%;
        background-color: #F1F1F1;
        text-align: center;
        padding: 90px 0 0 0;
        position: relative;
    }
    .message_visual_logo::after {
        position: absolute;
        bottom: -210px;
        left: 50px;
        /* padding: 60px; */
        content: '';
        background-image: url(images/Message/Message_txt@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 200px;
        width: 25%;
        max-width: 300px;
        z-index: 2;
    }
  
    .message_main_txt h2 {
        position: relative;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        text-shadow: 1px 1px 1px #FAAF3B;
        font-family: "a-otf-ryumin-pr6n", serif;
        font-weight: 100;
        white-space: pre;
        line-height: 1.5;
        font-size: clamp(16px, 5vw, 35px);
    }
    .message_main_txt h3 {
        width: 95%;
        margin: 40px 0 20px 0px;
        font-family: "a-otf-ryumin-pr6n", serif;
        font-size: 24px;
        display: flex;
        align-items: center;
        height: 30px;
    }
    .message_main_txt h3::before {
        content: '・';
        color: #FAAF3B;
        margin-right: 5px;
        font-size: 50px;
        width: 35px;
    }
    .message_main_txt p {
        margin: 0px auto;
        font-weight: 100;
        line-height: 1.5;
        font-size: 18px;
    }
    .message_visual_logo img {
        margin: 0 auto;
        width: 55%;
        border-radius: 100%;
        background-color: white;
        position: relative;
        z-index: 2;
    }
    .contact_sectionvisual {
     display: none;
    }
    .tel_box {
        width: 90%;
        border: 4px solid;
        border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
        padding: 20px 40px;
        font-family: "a-otf-ryumin-pr6n", serif;
        font-weight: 600;
        margin: 60px auto;
        background-color: white;
        /* display: flex; */
        position: relative;
        z-index: 1;
    }
    form {
        width: 100%;
        border: 4px solid;
        border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
        padding: 30px;
        background-color: #fff;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }   
    .contact {
        position: relative;
        width: 100%;
        height: auto; /* 親コンテナの高さを設定 */
        margin: 0 auto;
        display:none;
    }
    .contact_sp {
        position: relative;
        width: 100%;
        height: 65%; /* 親コンテナの高さを設定 */
        margin: 0 auto;
        display:block;
        background-image: url(images/Contact/contact_bgimg_sp.jpg.jpg);
        background-size: cover;
        background-position:75%;
    }
    
    .contact_sp img {
        width: 100%;
        height:auto; /* 画像がコンテナの高さをカバーするように設定 */
        object-fit: cover; /* 画像を歪みなくカバー */
    }
    
    .contact_btn_box_sp {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 中央に配置 */
        width: 90%;
        height: auto;
        border-radius: 15px;
        background-color: #ffffffce;
        box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
        padding: 20px 0;
        display: flex;
          flex-direction: column;
    }
    .contact_btn_box_sp p{
    width: 100%;
    margin: 0 auto;
    text-align: center;
        display: block;
        margin-top: 25px;
        font-size: clamp(16px, 3vw, 32px);
        font-family: "a-otf-ryumin-pr6n", serif;
    }
    .contact_btn_box_sp img{
        width: 60%;
        margin: 15px auto;
        padding: 0;
    }
    .contact_btn_box_txt_sp{
        position: relative;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        flex: 1;
    }
    .contact_btn_box_txt_sp::before{
        content: '';
        position: absolute;
       top: 10px;
        left: 8%;
        width: 4px; /* ラインの太さ */
        height: 40%;
        background-color:#FAAF3B; /* ラインの色 */
        transform: rotate(-20deg); /* 45度の斜めライン */
        transform-origin: top left; /* 回転の基点を左上に設定 */
        border-radius: 5px;
    }
    .contact_btn_box_txt_sp::after{
        content: '';
        position: absolute;
        top: 10px;
        right: 8%;
        width: 4px; /* ラインの太さ */
        height: 40%;
        background-color: #FAAF3B; /* ラインの色 */
        transform: rotate(20deg); /* 45度の斜めライン */
        transform-origin: top left; /* 回転の基点を左上に設定 */
        border-radius: 5px;
    }
    .contact_btn_box_txt_sp h3{
        margin: 0;
        text-align: center;
        color: #FAAF3B;
    }
    .contact_btn_box_txt_sp h4{
        margin: 0;
        text-align: center;
        font-size: 24px;
    }
    .contact_bottom_btn_sp {
        flex: 1;
        width: 100%;
        margin:0 auto;
        display: block;
        justify-content: center; /* 水平方向の中央寄せ */
        align-items: center; /* 垂直方向の中央寄せ */
        text-align: center;
        height: auto; /* 親要素の高さをビューの高さに設定 */
    }
    .contact_mail_sp, .contact_tel_sp {
        height: 100px;
        max-height: 60px;
        width: 80%;
        margin: 2.5% auto;
        background-color: #fa943b;
        border-radius: 5px;
        padding: 10px 0;
        display: flex;
        justify-content: center; /* 水平方向の中央寄せ */
        align-items: center; /* 垂直方向の中央寄せ */
    }
    
    .contact_mail_sp a, .contact_tel_sp a {
        display: flex;
        justify-content: center; /* 水平方向の中央寄せ */
        align-items: center; /* 垂直方向の中央寄せ */
        width: 100%;
        height: 100%;
    }
    
    .contact_mail_sp span, .contact_tel_sp span {
        margin: 0; /* pタグのデフォルトマージンをリセット */
        font-size: 16px;
        color: white;
    }
}
 @media screen and (max-width: 430px) {

    .mainvisual_logo {
        justify-content: center;
        align-items: center;
        margin: 15px auto;
        flex: none;
        height: auto;
        width: 65%;
        z-index: 2;
    }

    .gNav .gNav-menu li:nth-child(6) a {
        display: block;
        background-color: #4bca28;
        padding: 5px 15px 5px 26px;
        border-radius: 50px;
        background-image: none;
        background-repeat: no-repeat;
        background-position: calc(100% - 14px) center;
        background-size: 30%;
        color: #fff;
        white-space: pre-wrap;
        word-break: break-word;
        width: 90%;
    }

    .tel {
       display: none;
    }

    .logo {
        background-image: url(images/SVG/logo1.svg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 220px;
        height: 70px;
        margin-left: 20px;
    }
    .reveal-text p {
        position: relative;
        font-size: clamp(40px, 12vw, 90px);
        animation-name: clip-text;
        color: #FFF;
        white-space: nowrap;
        cursor: default;
        font-family: "a-otf-ryumin-pr6n", serif;
        font-weight: 500;
        font-style: normal;
        height: 80px;
        text-shadow:4px 4px 1px #07133573;
        backdrop-filter: blur(5px);
        background-color: rgb(255 208 0 / 0%);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
        margin: 5px 5px;
      }


    .message_visual_logo {
        margin: 0 auto;
        width: 100%;
        background-color: #F1F1F1;
        text-align: center;
        padding: 100px 0 0 0;
        position: relative;
    }
    .message_visual_logo::after {
        position: absolute;
        bottom: -250px;
        left: 20px;
        /* padding: 60px; */
        content: '';
        background-image: url(images/Message/Message_txt@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 200px;
        width: 25%;
        max-width: 300px;
        z-index: 2;
    }
    .message_main_txt {
        margin: 0 auto;
        width: 90%;
        background-color: #fff;
        padding: 200px 10px 40px 10px;
        position: relative;
        top: -110px;
        z-index: 1;
    }
    .message_main_txt h2 {
        position: relative;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        text-shadow: 1px 1px 1px #FAAF3B;
        font-family: "a-otf-ryumin-pr6n", serif;
        font-weight: 100;
        white-space: pre;
        line-height: 1.5;
        font-size: clamp(16px,5vw,60px);
    }
    .message_main_txt h3 {
        width: 95%;
        margin: 40px 0 10px 0px;
        font-family: "a-otf-ryumin-pr6n", serif;
        font-size: 20px;
        display: flex;
        align-items: center;
        height: 30px;
    }
    .message_main_txt h3::before {
        content: '・';
        color: #FAAF3B;
        margin-right: 5px;
        font-size: 50px;
        width: 35px;
    }
    .message_main_txt p {
        margin: 0px auto;
        font-weight: 100;
        line-height: 1.5;
    }
    .sign {
        width: 90%;
        height: 100px;
        margin: 0 10% 0 0;
        background-image: url(images/SVG/sign.svg);
        background-repeat: no-repeat;
        background-size: 100px;
        background-position: right;
    }
 
    .btn-gNav {
        display: block;
    }

    .gNav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: rgb(255 255 255 / 95%);
        font-size: 16px;
        box-sizing: border-box;
        z-index: 1;
        padding-top: 50px;
        transition: .3s;
    }

    .gNav.open {
        right: 0;
        z-index: 9;
    }
    
    
    .gNav .gNav-menu {
        padding: 0;
        width: 100%;
        height: 100%;
        display: block;
        flex-direction: column;
        text-align: center;
        /*justify-content: center;*/
    }

    .gNav .gNav-menu li {
        width: 86%;
        padding: 15px;
        border-bottom: #525252 1px solid;
    }
    .hamburger .btn-gNav {
        position: fixed;
        top: 5px;
        right: 20px;
        width: 60px;
        height: 55px;
        z-index: 12;
        box-sizing: border-box;
        cursor: pointer;
        -webkit-transition: all 400ms;
        transition: all 400ms;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #4bca28;
        border-radius: 10px;
    }
    .hamburger .btn-gNav span {
        position: absolute;
        width: 80%;
        height: 4px;
        background: #ffffff;
        border-radius: 10px;
        -webkit-transition: all 400ms;
        transition: all 400ms;
    }
    .gNav-menu a {
        position: relative;
        color: #000;
        text-decoration: none;
        margin: 0 auto;
    }
    .aboutus_mainvisual {
        width: 100%;
        overflow: hidden;
        padding: 0px 0 0px 0;
    }

    .mainvisual {
        width: 100%;
        height: 100%;
        display: block;
    }




    .square_bg{
        display: none;
    
    }

 
.sectionmainvisual {
    width: 100%;
}


.sectionvisual {
   display: none;
}

    .mainvisual-hiro::after {
        display: none;
    }
 
    
    .visual_textbox h3 {
        font-size: 12px;
        margin: 0;
        margin-bottom: 0px; /* 下部余白の追加 */
    }
    
    .visual_textbox h2 {
        font-size: 32px;
        margin: 0;
        margin-bottom: 20px; /* 下部余白の追加 */
    }
    .casestudiesvisual-inner {
        width: 90%;
        margin: 20px auto;
        height: 280px;
        display: flex;
    }
    
    .aboutus_table {
        width: 100%;
        border: 4px solid;
        border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
        padding: 0px;
        background-color: #fff;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    .row-wrapper {
        margin-bottom: 15px;
        display: flex;
        width: 95%;
        margin: 20px auto;
    }
    tbody {
        background-color: #f9f9f9;
        display: block;
        width: 100%;
        padding: 5px;
      }
      table {
        display: block;
        width: 100%;
        border-collapse: collapse;
    }
    td {
        width: 80%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: smaller;
    }
    th {
        color: white;
        background-color: #333;
        width: 20%;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: smaller;
    }
    .row-wrapper:nth-last-child(2) {
        margin-top: 70px;
        margin-bottom: -1px;
    }
   .map{
       border:none;
      }
      .activities_box1 {
        width: 100%;
        background-color: #fff;
        padding: 5%;
        position: relative;
        display: block;
        height: auto;
        margin: 0 auto;
    }
    .activities_left {
        width: 100%;
    }
    .activities_right {
        width: 100%;
        background-image: url(images/BusinessActivities/Business\ Activities_image01@2x-100.jpg);
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
        height: 40%;
    }
    .activities_left::before {
        position: absolute;
        top: 10px;
        left: 20px;
        /* padding: 60px; */
        content: '';
        background-image: url(images/BusinessActivities/Business\ Activities_txt@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 200px;
        width: 45%;
        max-width: 300px;
    }
    .casestudies_box2-1_title::before {
        position: absolute;
        top: -23px;
        left: -2%;
        /* padding: 60px; */
        content: '';
        background-image: url(images/BusinessActivities/Properties\ Handled_txt@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 200px;
        width: 45%;
        max-width: 300px;
    }
    .activities_box1_title, .casestudies_box2_title, .casestudies_box2-1_title, .casestudies_box3_title {
        display: block;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 21px;
        text-align: center;
    }
    .activities_box1_title h2, .casestudies_box2_title h2, .casestudies_box2-1_title h2, .casestudies_box3_title h2 {
    margin: 20px auto 0 auto;
    padding: 29px 0 0 0;
    }
    .activities_box1_title p, .casestudies_box2_title p, .casestudies_box2-1_title p, .casestudies_box3_title p {
        margin: 0 0 30px 0;
        }
    .activities_box2 {
        width: 100%;
        background-color: #F1F1F1;
        padding: 80px 0 10px 0;
        position: relative;
    }
    .propertieshandled_ul {
        font-family: Arial, sans-serif;
        font-size: 16px;
        box-sizing: border-box;
        list-style: none;
        list-style-type: none;
        width: 90%;
        margin: 20px auto;
        padding: 20px 0;
    }
    .activities_box3 {
        width: 100%;
        background-color: #F1F1F1;
        padding: 30px 0;
        position: relative;
        overflow: hidden;
    }
    .casestudies_box3_title::before {
    position: absolute;
    top: -23px;
    left: 2%;
    /* padding: 60px; */
    content: '';
    background-image: url(images/BusinessActivities/Workflow_txt@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 200px;
    width: 25%;
    max-width: 300px;
}
.casestudiess {
    background-color: #fff;
    width: 100%;
    margin: 50px auto;
    position: relative;
    z-index: 1;
}
.casestudiess h2::before {
    position: absolute;
    top: -20px;
    left: -20px;
    /* padding: 60px; */
    content: '';
    background-image: url(images/casestudies/casestudies_txt@2x-8.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 200px;
    width: 35%;
    max-width: 300px;
}
.casestudiess h2 {

    font-size: 24px;
}
.casestudiess_li {
    display: block;
    font-size: 16px;
}

.casestudiess_left, .casestudiess_rite {
    width: 90%;
    margin: 0px auto;
    padding: 0px;
}
.activities_li {
    font-size: 17px;
    padding: 0;
}
.casestudiess_left li, .casestudiess_rite li {
    border-bottom: 1px dashed #FAAF3B;
    margin: 10px 0 10px 20px;
}

.casestudiess_left li::before {
    content: '・';
    color: #FAAF3B;
    margin-right: 5px;
    position: absolute;
    left: 0px;
}
.casestudiess_rite li::before {
    content: '・';
    color: #FAAF3B;
    margin-right: 5px;
    position: absolute;
    left: 0px;
}
.case_box{
    position: relative;
    margin: 0 auto 80px auto;
    width: 95%;
}
.case_box2 {
    display: flex; /* Flexboxを使用 */
    justify-content: flex-end; /* アイテムを右側に配置 */
    align-items: center; /* アイテムを中央に揃える */
    position: relative;
    margin: 0 auto 80px auto;
    width: 95%;
}
.case_out-box, .case_out-box1, .case_out-box2, .case_out-box3 {
    position: relative;
    width: 100%;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    padding: 10px;
    background-color: #fff;
}


.case_title_h2h3box {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}
.case_title {
    display: block;
    margin: 10px;
    justify-content: center;
    align-items: center;
}
.case_title p, .case_title2 p {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
}
.workflow_ul {
    width: 95%;
    border: 4px solid;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    padding: 10px;
    background-color: #fff;
    margin: 0 auto 80px auto;
    position: relative;
    z-index: 2;
    text-align: center;
}
.workflow_li p {
    font-size:17px;
}
.workflow_step {
    background-image: url(images/SVG/step01.svg);
    background-repeat: no-repeat;
    background-size: 90%;
    height: 60px;
    width: 60px;
    margin: 10px;
}
.workflow_step02 {
    background-image: url(images/SVG/step02.svg);
    background-repeat: no-repeat;
    background-size: 90%;
    height: 60px;
    width: 60px;
    margin: 10px;
}
.workflow_step03 {
    background-image: url(images/SVG/step03.svg);
    background-repeat: no-repeat;
    background-size: 90%;
    height: 60px;
    width: 60px;
    margin: 10px;
}
.case_title img, .case_title2 img {
    width: auto;
    height: 130px;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.case_txt_line {
    display: flex;
    justify-content: center;
    align-items: center;
}
.case_txt {
    width: 90%;
    margin: 0 auto;
}
.case_title2 {
    display: block;
    flex-direction: row-reverse;
    margin: 10px;
    justify-content: center;
    align-items: center;
}
.case_txt2 {
    margin-left: 0;
    margin-right: 0;
    width: 90%;
    margin: 0 auto;
}

.case_out-box1::before {
    position: absolute;
    height: 40px;
    width: 100px;
    content: 'Case.2';
    /* text-align: center; */
    color: white;
    padding: 0.2em;
    background: #333333;
    left: -4px;
    top: -44px;
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.case_out-box3::before {
    position: absolute;
    height: 40px;
    width: 100px;
    content: 'Case.4';
    /* text-align: center; */
    color: white;
    padding: 0.2em;
    background: #333333;
    left: -4px;
    top: -44px;
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.case_img1,.case_img2,.case_img3,.case_img{
    display: none;
}
.tel_box {
    width: 90%;
    border: 4px solid;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    padding: 0px 20px;
    font-family: "a-otf-ryumin-pr6n", serif;
    font-weight: 600;
    margin: 60px auto;
    background-color: white;
    /* display: flex; */
    position: relative;
    z-index: 1;
}
.tel_box_logo {
    width: 100%;
    background-image: url(images/SVG/tel_1.svg);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 180px;
}
form {
    width: 100%;
    border: 4px solid;
    border-image: linear-gradient(45deg, #fb6b52, #fac755) 1;
    padding: 30px;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

    .footer_menu ul {
        list-style: none;
        padding: 0;
        margin: 50px;
        display: block;
        text-align: center;
    }
    .footer_logo {
        text-align: center;
        display: block;
        align-items: center;
    }
    .footer_logo img {
        width: 60%;
        margin-right: 5px;
        padding: 20px;
    }
    .footer_logo .vertical-line {
     display: none;
    }
    .case_title_h2h3box h3 {
        padding: 5px;
        color: #000000;
        background-color: #FAAF3B;
        width: 100%;
        margin: 0 auto;
        border-radius: 50px;
        font-size: 21px;
    }
    .case_title img, .case_title2 img {
        width: auto;
        height: 130px;
        margin: -2px auto;
        text-align: center;
        display: block;
    }
    .casestudies_box1::after {
        position: absolute;
        bottom: -400px;
        left: 0px;
        /* padding: 60px; */
        content: '';
        background-image: url(images/casestudies/Case\ Studies_bg_1@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 100%;
        width: 40%;
        max-width: 500px;
    }
    .case_out-box2::after {
        content: '';
        position: absolute;
        bottom: -570px;
        left: -70px;
        background-image: url(images/casestudies/casestudies_bg002@2x-8.png);
        background-size: 100%;
        background-repeat: no-repeat;
        height: 100%;
        width: 80%;
        /* max-width: 500px; */
        z-index: -1;
        /* overflow: initial; */
    }
    #postal_code_1,#postal_code_2{
        width:40%;
        height: 35px;
        border-radius: 5px;
        border :1px solid;
    }
    #btn{
        background-color: #333;
        color: white;
        border :1px solid;
        height: 50px;
        width: 45%;
        margin: 20px auto;
    }
    


 }