/* ====================
リセット & 基本設定
==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
body {
    font-family: "Noto Sans JP", sans-serif;
    color: #3f3f3f;
    background-color: #fff;
    padding-top: 0vw;  /* header分 */
    padding-bottom: 5vw; /* bottom-wrap分 */
    letter-spacing: 0.05rem;
}

.-bg {
    background-image: url(../img/mv/mv_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    width: 100%;
    position: fixed;
    z-index: -2;
    animation: bg-zoom 30s ease-in-out infinite;
  }
  
  @media (min-width: 1441px) {
    .-bg {
      height: 100%;
    }
  }
  @media (max-width: 1440px) {
    .-bg {
      height: 100%;
    }
  }
  @media (max-width: 450px) {
    .-bg {
      height: 100%;
    }
  }
  @keyframes bg-zoom {
    0% {
      background-size: 105% 105%;
    }
    50% {
      background-size: 100% 100%;
    }
    100% {
      background-size: 105% 105%;
    }
  }

a {
    font-family: "Noto Sans", sans-serif;
    color: #3f3f3f;
    font-weight: 400;
}
img {
    width: 100%;
    height: auto;
}

h1 {
    font-size: clamp(calc(40px/3), calc(40/1440*100vw), 40px);
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    letter-spacing: 0.1rem;
}
h2 {
    font-family: "Noto Sans", sans-serif;
    font-weight: 700;
    font-size: clamp(calc(48px/3), calc(48/1440*100vw), 48px);
    line-height: 1;
}
h3 {
    font-size: clamp(calc(32px/3), calc(32/1440*100vw), 32px);
    font-weight: 400;
}
h4 {
    font-size: clamp(calc(24px/3), calc(24/1440*100vw), 24px);
    font-weight: 500;
    background: linear-gradient(to right, #27AAAA 0%, #104444 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
    color: transparent;
}
h5 {
    font-size: clamp(calc(20px/3), calc(20/1440*100vw), 20px);
    color: #3f3f3f;
	font-weight: 500;
}
p {
    font-size: clamp(calc(16px/3), calc(16/1440*100vw), 16px);
    letter-spacing: 0.05rem;
}
/* ====================
共通レイアウト
==================== */
.br-sp {
    display: none;
}
.btn-wrap {
    display: flex;
    align-items: center;
}
.btn {
    display: inline-flex;
    width: clamp(calc(130px/3), calc(130/1440*100vw), 130px);
}
.btn > p {
    font-size: clamp(calc(14px/3), calc(14/1440*100vw), 14px);
    font-weight: 700;
    color: #3F3F3F;
}
.btn-img-wrap {
    display: flex;
    position: relative;
    left: -0.5vw;
}
.btn-arrow {
    position: absolute;
    width: clamp(calc(40px/3), calc(40/1440*100vw), 40px);
    height: clamp(calc(5px/3), calc(5/1440*100vw), 5px);
    top: 45%;
    transform: translateY(-55%);
    transition: 0.3s;
    left: 1vw;
}
.btn-img {
    position: absolute;
    width: clamp(calc(33px/3), calc(33/1440*100vw), 33px);
    height: clamp(calc(33px/3), calc(33/1440*100vw), 33px);
    top: 50%;
    transform: translateY(-50%);
}
.btn:hover .btn-arrow {
    transform: translate(40%, -50%);
    transition: 0.3s;
}
.section-inner {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.container {
    max-width: calc(1080/1440*100vw);
    width: 100%;
    margin: 0 auto;
    margin-top: calc(100/1440*100vw);
}

.reason-container {
    overflow-y: scroll; /* スクロールは有効 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
  }
  
  /* Chrome, Safari, Edge (Webkit系) */
  .reason-container::-webkit-scrollbar {
    display: none;
  }

  
/* ====================
header
==================== */
.header {
    position: fixed;
    top: calc(-26/1440*100vw);
    left: 0;
    width: 100vw;
    height: clamp(calc(131px/3), calc(131/1440*100vw), 131px);
    background-image: url(../img/header_line_top.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 999;
    padding-bottom: 3vw;
}
.header-border {
    background-color: transparent;
    position: fixed;
    top: calc(50/1440*100vw);
    left: 26.5vw;
    height: 3vw;
    z-index: 1000;
    width: 100vw;
    display: block;
    overflow: hidden;
}

.bottom-wrap {
    position: fixed;
    background-image: url(../img/header_line_bottom.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: -4.8vw;
    left: 0;
    width: 100vw;
    height: clamp(calc(130px/3), calc(130/1440*100vw), 130px);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1vw;
}
.copy-right {
    font-size: clamp(calc(10px/3), calc(10/1440*100vw), 1440px);
    position: relative;
}
.page-top {
    position: absolute;
    color: #3f3f3f;
    font-size: clamp(calc(18px/3), calc(18/1440*100vw), 18px);
    top: 1.5vw;
    right: 14vw;

}
.page-top-arrow {
    width: calc(17/1440*100vw);
    height: calc(12/1440*100vw);
    margin-left: 0.5vw;
}
.header-content-wrap {
    background-color: #fff;
    position: fixed;
    top: calc(50/1440*100vw);
    left: 26vw;
    height: 3vw;
    z-index: 10;
    width: 100vw;
    display: block;
    overflow: hidden;
    clip-path: polygon(3% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.header-content-wrap .header-content {
    width: 100%;
    display: flex;
    padding: 0.5vw 0vw;
    position: relative;
    right: -25vw;
    animation: slide-left 20s linear infinite;
    cursor: pointer;
}
@keyframes slide-left {
    0% {
      transform: translateX(50%);
    }
    100% {
      transform: translateX(-80%);
    }
}

.header-content .blog-date-wrap {
    margin-right: 2vw;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
}
.header-content .blog-category {
    margin-right: 2vw;
}
@media screen and (min-width:1441px) {
    .header {
        padding-bottom: 4vw;
        height: calc(131/1440*100vw);
    }
    .header-border {
        height: 72px;
    } 
    .header-section-inner {
        max-width: 100%;
    }
    .bottom-wrap {
        height: calc(130/1440*100vw);
    }
    .copy-right {
        font-size: 14px;
    }
    .page-top {
        font-size: 18px;
        top: 2vw;
        right: 14vw;
    }
    .page-top-arrow { 
        width: 17px;
        height: 12px;
        margin-left: 8px;
    }
}
.header-inner {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    height: clamp(calc(65/1440*100vw),calc(65/1440*100vw),65px);
    margin-top: 3vw;
}
  
.header-logo {
    width: clamp(60px, 12vw, 180px);
    height: clamp(calc(65/1440*100vw),calc(65/1440*100vw),65px);
}
.nav {
    width: clamp(calc(573px/3), calc(573/1440*100vw), 573px);
    padding-bottom: 3vw;
    height: clamp(calc(65/1440*100vw),calc(65/1440*100vw),65px);
}
.nav ul {
    display: flex;
    justify-content: space-between;
}
.nav ul li a {
    display: inline-block;
    transition: color 0.3s ease;
    font-size: clamp(calc(20px/3), calc(20/1440*100vw), 20px);
    vertical-align: top;
}
.nav ul li a:hover {
    color: #27AAAA;
}

/* 親メニューの位置指定（必要な場合） */
.has-sub-menu {
    position: relative;
  }
/* サブメニューの初期スタイル */
nav ul .has-sub-menu .sub-menu {
    display: none;
    position: absolute;
    left: -2.3vw;
    width: clamp(calc(282px/3), calc(282 / 1440 * 100vw), 282px);
    height: clamp(calc(255px/3), calc(255 / 1440 * 100vw), 255px);
    background-color: #484848;
    z-index: 1000;
    flex-direction: column;
    margin: 0;
    list-style: none;
    padding: 1.5vw 2.4vw 0.5vw;
    top: calc(34.56/1440*100vw);
    padding: calc(21.6/1440*100vw) calc(34.56/1440*100vw) calc(7.2/1440*100vw);
  }
  
  /* サブメニュー表示時 */
  .has-sub-menu.open .sub-menu {
    display: flex; 
  }
  nav .sub-menu li {
      border-bottom: solid 1px #fff;
      padding: 0 0 0.8vw 0;
      display: block;
  }
  nav .sub-menu li:last-child {
    border-bottom: none;
  }
  /* サブメニュー内のリンク */
  nav .sub-menu li a {
    font-size: clamp(calc(16px/3), calc(16 / 1440 * 100vw), 16px); 
    color: #fff;
  }
  
/* ====================
ファーストビュー
==================== */
.fv {
    width: 100%;
    height: 100vh;
    background-image: url(../img/fv.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
    z-index: 1;
    height: auto;
    padding: 10vw 0;
    top: 50%;
    transform: translateY(-15%);
    overflow: hidden;
}
.fv-maru {
    position: absolute;
    background-image: url(../img/fv_img_under.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: 12vw;
    right: 14.7vw;
    width: clamp(calc(440/1440*100vw), calc(440/1440*100vw), 440px);
    height: clamp(calc(412/1440*100vw), calc(412/1440*100vw), 412px);
    animation: rotate-maru 60s linear infinite;
    z-index: 2;
}

/* 回転のキーフレーム */
@keyframes rotate-maru {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
.fv-img-top {
    position: absolute;
    background-image: url(../img/fv_img_top.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: 12vw;
    right: 14.7vw;
    width: clamp(calc(440/1440*100vw), calc(440/1440*100vw), 440px);
    height: clamp(calc(412/1440*100vw), calc(412/1440*100vw), 412px);
    z-index: 3;
}
.fv-line {
    position: absolute;
    background-image: url(../img/fv_img_line.png);
    background-repeat: no-repeat;
    background-size: contain;
    top: 10vw;
    right: 13vw;
    width: clamp(calc(509/1440*100vw), calc(509/1440*100vw), 509px);
    height: clamp(calc(453/1440*100vw), calc(453/1440*100vw), 453px);
    z-index: 4;
}
@media screen and (min-width:1441px) {
    .fv-maru {
        width: 440px;
        height: 412px;
        right: 680px;
        top: 284px;
    }
    .fv-line {
        width: 509px;
        height: 453px;
        right: 650px;
        top: 262px;
    }
}
@media screen and (max-width:450px) {
    .fv-maru,
    .fv-line {
        display: none;
    }
}
.fv-container::before {
    content: '';
    position: absolute;
    background-image: url(../img/scroll_text_img.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: clamp(calc(12px/3), calc(12/1440*100vw), 12px);
    height: clamp(calc(51px/3), calc(51/1440*100vw), 51px);
    bottom: -3.4vw;
    left: 0vw;
    z-index: 99;

}
.fv-container::after {
    content: '';
    position: absolute;
    background-image: url(../img/scroll_line_img.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: clamp(calc(12px/3), calc(12/1440*100vw), 12px);
    height: 0; /* 初期高さは0 */
    top: 35.5vw; /* ← 位置固定 */
    left: 0.3vw;
    z-index: 99;
    animation: stretchLineTop 1s ease-in-out infinite;
    transform-origin: top; /* ← 上から下に向かって伸びる */
  }

  @keyframes stretchLineTop {
    0% {
      height: 0;
    }
    90% {
      height: clamp(calc(80px/3), calc(80/1440*100vw), 80px); 
    }
    91% {
      height: 0; /* パッと戻る */
    }
    100% {
      height: 0;
    }
  }
.fv-container {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.fv-content-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fv-title-wrap {
    margin-bottom: clamp(calc(30px/3), calc(30/1440*100vw), 30px);
}
  
.fv h4 {
    font-size: clamp(calc(20px/3), calc(20/1440*100vw), 20px);
    font-family: "Noto Sans", sans-serif;
    font-weight: 500;
    background: linear-gradient(to right, #27AAAA 0%, #104444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
    color: transparent;
    letter-spacing: 0.3rem;
}

.fv p {
    font-size: clamp(calc(16px/3), calc(16/1440*100vw), 16px);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    width: clamp(calc(449px/3), calc(449/1440*100vw), 449px);
    letter-spacing: 0.1rem;
    line-height: 2;
}
.fv-span {
    font-weight: 500;
    background: linear-gradient(to right, #27AAAA 0%, #104444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
    color: transparent;
}
.fv-content-img {
    width: clamp(calc(509px/3), calc(509/1440*100vw), 509px);
    height: clamp(calc(453px/3), calc(453/1440*100vw), 453px);
    position: relative;
}
.fv-content-img img {
    display: none;
}

@media screen and (max-width:450px) {
    .fv-content-img img {
        display: flex;
    }
}
.fv-icon {
    width: clamp(calc(69px/3), calc(69/1440*100vw), 69px);
    position: absolute;
}

.thumbnail {
    cursor: pointer;
    width: clamp(calc(69px/3), calc(69/1440*100vw), 69px);
    height: clamp(calc(69px/3), calc(69/1440*100vw), 69px);
    /* background-color: rgba(255, 0, 0, 0.3);  */
  }

  .popup-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .popup {
    position: absolute;
    top: -6vw;
    left: -4vw;
    z-index: 100;
    width: 100px;
    border: none;
    background: transparent;
    opacity: 0;
    transform: rotate(0deg);
    transition: width 0.5s ease, transform 0.5s ease, opacity 0.5s ease;
    pointer-events: none;
  }
  
  .popup-wrapper:hover .popup-1 {
    top: -12vw;
    left: -12vw;
    width: 20vw;
    width: clamp(calc(540px/3), calc(540/1440*100vw), 540px);
    opacity: 1;
    transform: rotate(360deg);
    pointer-events: auto;
  }
  .popup-wrapper:hover .popup-2 {
    top: -4vw;
    left: -17vw;
    width: 20vw;
    width: clamp(calc(540px/3), calc(540/1440*100vw), 540px);
    opacity: 1;
    transform: rotate(360deg);
    pointer-events: auto;
  }
  .popup-wrapper:hover .popup-3 {
    top: -139px;
    left: -390px;
    width: 20vw;
    width: clamp(calc(540px/3), calc(540/1440*100vw), 540px);
    opacity: 1;
    transform: rotate(360deg);
    pointer-events: auto;
  }
  .popup-wrapper:hover .popup-4 {
    top: 1vw;
    left: -21vw;
    width: 20vw;
    width: clamp(calc(540px/3), calc(540/1440*100vw), 540px);
    opacity: 1;
    transform: rotate(360deg);
    pointer-events: auto;
  }
  .fv-icon-1 {
    top: 18vw;
    left: 11.9vw;
    }
  .fv-icon-2 {
    top: 10.2vw;
    left: 16.7vw;
  }
  .fv-icon-3 {
    top: 15.2vw;
    left: 25.9vw;
  }
  .fv-icon-4 {
    top: 4.7vw;
    left: 19.9vw;
  }

@media screen and (min-width:1441px) {
    .fv-icon-1 {
        top: 255px;
        left: 170px;
    }
    .fv-icon-2 {
        top: 140px;
        left: 242px;
    }
    .fv-icon-3 {
        top: 225px;
        left: 371px;
    }
    .fv-icon-4 {
        top: 49px;
        left: 289px;
    }
    .popup-wrapper:hover .popup {
        width: 540px;
      }

    .header-content-wrap  {
        display: flex;
        align-items: center;
    }
    .header-content .blog-category {
        font-size: 14px;
    }
    .header-content .blog-data {
        font-size: 16px;
    }


}
  
/* ====================
About
==================== */
.about {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10vw 0;
}
.about-container {
    position: relative;
}
.about-title-wrap {
    margin-bottom: 8vw;
}
.title-wrap > p {
    font-weight: 700;
    background: linear-gradient(to right, #27AAAA 0%, #104444 15%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
    color: transparent;
}
.section-content h4 {
    text-indent: -0.6em;
    margin-bottom: 1vw;
}
.section-content > p {
    width: clamp(calc(629px/3), calc(629/1440*100vw), 629px);
    line-height: 2;
    margin-bottom: 3vw;
}
.about-message-wrap {
    width: clamp(calc(130px/3), calc(130/1440*100vw), 130px);
    height: clamp(calc(299px/3), calc(299/1440*100vw), 299px);
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
}
.about-message-wrap h3 {
    writing-mode: vertical-rl;
}
.about-message-wrap h3:first-child {
    order: 3;
}
.about-message-wrap h3:nth-child(2) {
    order: 2;
}
.about-message-wrap h3:last-child {
    order: 1;
}

/* ====================
Service
==================== */
.service {
    padding-bottom: 10vw;
}
.service-container {
    display: flex;
    justify-content: space-around;
    width: 84%;
    margin: 0 auto;
}
.service-title-wrap {
    text-align: center;
    margin-bottom: 4vw;
}
.service-content {
    background-repeat: no-repeat;
    background-size: cover;
    width: clamp(calc(286px/3), calc(286/1440*100vw),286px);
    height: clamp(calc(387px/3), calc(387/1440*100vw),387px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 3.47vw;
    padding-left: clamp(calc(9px/3), calc(9/1440*100vw), 9px);
    transition: 0.3s;
    opacity: 1;
}
.service-content:hover {
    opacity: 0.5;
    transition: 0.3s;
}

.service-content-1 {
    background-image: url(../img/service_card_1.png);
}
.service-content-2 {
    background-image: url(../img/service_card_2.png);
}
.service-content-3 {
    background-image: url(../img/service_card_3.png);
}
.service-content-img {
    margin: 0 auto;
}
.service-content-img-1,
.service-content-img-2 {
    width: clamp(calc(93px/3), calc(93/1440*100vw),93px);
    height: clamp(calc(72px/3), calc(72/1440*100vw),72px);
}
.service-content-img-3 {
    width: clamp(calc(103.51px/3), calc(103.51/1440*100vw),103.51px);
    height: clamp(calc(71.51px/3), calc(71.51/1440*100vw),71.51px);
}
.service-content-text h5 {
    margin: 2vw 0;
    text-align: center;
}
.service-content-text p {
    font-size: clamp(calc(12px/3), calc(12/1440*100vw), 12px);
}
.service-content-text-3 {
    width: clamp(calc(225px/3), calc(225/1440*100vw),225px);
}
@media screen and (min-width:1441px) {
    .service-content {
        width: 286px;
        height: 387px;
        padding-top: 50px;
        padding-left: 9px;
    }
    .service-content-text h5 {
        margin: 36px 0;
    }
}

/* ====================
Support
==================== */
.support {
    padding-bottom: 10vw;
    position: relative;
}
.support::after {
    content: '';
    position: absolute;
    background-image: url(../img/support_wave_img.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 54vw;
    top: 0vw;
    z-index: -1;
}
.support-title-wrap {
    margin-bottom: 6vw;
}
.support-container {
    display: flex;
    justify-content: space-between;
}
.support-content-img {
    width: clamp(calc(375px/3), calc(375/1440*100vw),375px);
    height: clamp(calc(255px/3), calc(255/1440*100vw),255px);
}
.support-content-text {
    margin-top: 1vw;
}
.support-content-text h4 {
    text-indent: 0em;
}
.support-content-text {
    width: clamp(calc(605px/3), calc(605/1440*100vw),605px);
    display: flex;
    flex-direction: column;
}
.support-content-text p {
    width: clamp(calc(605px/3), calc(605/1440*100vw),605px);
}
.support-content-text .support-btn-wrap {
    margin-left: -2.8vw;
    margin-top: -1vw;
}
.support-btn .btn-img-wrap {
    left: -3.4vw;
}
/* ====================
Blog
==================== */
.blog {
    padding: 10vw 0;
}

.blog-title-wrap {
    margin-bottom: 2vw;
}
.blog-container {
    margin-bottom: 2vw;
}
.blog-content {
    border-bottom: solid 1px rgba(148, 148, 148, 0.3);
    padding: 2vw 0 1vw 0;
}
.blog-date-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 1vw;
}
.blog-date {
    font-size: clamp(calc(16px/3), calc(16/1440*100vw), 16px);
}
.blog-category {
    color: #fff;
    background: linear-gradient(to right, #27AAAA 0%, #104444 100%);
    padding: 0.2vw 0.5vw;
    margin-left: 0.5vw;
    font-size: clamp(calc(14px/3), calc(14/1440*100vw), 14px);
}
.blog-content > a > h5 {
    color: #3f3f3f;
    font-size: clamp(calc(24px/3), calc(24/1440*100vw), 24px);
}
.btn-wrap {
    max-width: calc(1080/1440*100vw);
    margin: 0 auto;
    text-align: end;
    margin-top: 4vw;
}
.blog-btn-wrap {
    justify-content: flex-end;
}

/* ====================
CONTACT
==================== */
.contact {
    background-image: url(../img/contact_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 4vw 0;
}
.container-contact {
    background-color: #fff;
    text-align: center;
    padding: 4vw 0;
}
.contact-title-wrap {
    margin-bottom: 6vw;
}
.contact-text {
    font-size: clamp(calc(18px/3), calc(18/1440*100vw), 18px);
    margin-bottom: 4vw;
}
.contact-btn {
    font-size: clamp(calc(24px/3), calc(24/1440*100vw), 24px);
    background: linear-gradient(to right, #27AAAA 0%, #104444 100%);
    color: #fff;
    width: clamp(calc(410px/3), calc(410/1440*100vw), 410px);
    height: clamp(calc(70px/3), calc(70/1440*100vw), 70px);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 1vw;

    background-size: 200% 100%;
    background-position: left;
    transition: background-position 0.4s ease;
    background-image: linear-gradient(
        to right,
        #27AAAA 0%,
        #104444 50%,
        #27AAAA 100%
    );
}

.contact-btn:hover {
    background-position: right;
}
.container-contact > .business-hours {
    font-size: clamp(calc(14px/3), calc(14/1440*100vw), 14px);
    color: #3F3F3F;
}
/* ====================
Footer
==================== */
.footer {
    width: 100%;
    background-color: #333;
    color: #535353;
    text-align: center;
    padding: 0;
    background-color: transparent;
    margin-bottom: 0;
}
.footer-container {
    display: flex;
    justify-content: space-between;
}
.footer-logo {
    width: clamp(calc(185px/3), calc(185/1440*100vw), 185px);
    height: clamp(calc(65px/3), calc(65/1440*100vw), 65px);
}
.footer-copy-right {
    display: none;
}
.footer-copy-right-pc {
    display: block;
    margin: 7vw 0 -7vw 0;
}
.footer-company-wrap {
    text-align: start;
}
.company-name,
.address {
    font-size: clamp(calc(14px/3), calc(14/1440*100vw), 14px);
}
.company-name {
    margin: 2vw 0 1vw 0;
}
.footer-menu-wrap {
    width: clamp(calc(600px/3), calc(600/1440*100vw), 600px);
}
.footer-nav {
    position: relative;
    margin-bottom: 3.6vw;
}
.footer-nav::after {
    position: absolute;
    content: '';
    width: clamp(calc(595px/3), calc(595/1440*100vw), 595px);
    height: 1px;
    bottom: -2vw;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
}
.footer-nav ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-nav ul li a {
    color: #fff;
    font-size: clamp(calc(20px/3), calc(20/1440*100vw), 20px);
}
.footer-service-menu {
    width: clamp(calc(605px/3), calc(605/1440*100vw), 605px);
}
.footer-service-menu ul {
    margin-left: 10vw;
    text-align: start;
}
.footer-service-menu ul li {
    margin-bottom: 1vw;
}
.footer-service-menu ul li a {
    color: #fff;
    font-size: clamp(calc(14px/3), calc(14/1440*100vw), 14px);
}

/* ====================


下層ページ共通


==================== */
.p-title-wrap h2 {
    font-size: clamp(calc(40px/3), calc(40/1440*100vw), 40px);
}
.p-title-wrap p {
    font-size: clamp(calc(14px/3), calc(14/1440*100vw), 14px);
    background: linear-gradient(to right, #27AAAA 50%, #104444 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
    color: transparent;
}


/* ====================


about page


==================== */
.pankuzu-wrap {
    display: flex;
    align-items: center;
    position: absolute;
    top: -0.2vw;
}
.pankuzu-wrap a {
    font-size: clamp(calc(13px/3), calc(13/1440*100vw), 13px);
    background: linear-gradient(to right, #27AAAA 60%, #104444 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
    color: transparent;
    line-height: 1;
}
.pankuzu-wrap img {
    width: clamp(calc(13px/3), calc(13/1440*100vw), 13px);
    line-height: 1;
    margin: 0 1vw;
}
.pankuzu-wrap p {
    font-size: clamp(calc(13px/3), calc(13/1440*100vw), 13px);
    line-height: 1;
}
.aboutp-inner {
    padding: 8vw 0;
}
.aboutp-title-wrap {
    text-align: center;
    margin-bottom: 4vw;
}
.aboutp-text-wrap p {
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
    line-height: 2;
    letter-spacing: 0.05rem;
    margin-bottom: 3vw;
}
.aboutp-btn-wrap {
    text-align: center;
}
.aboutp-btn-p {
    font-weight: 600;
}
/* ====================
features
==================== */
.features-inner {
    padding: 4vw 0 10vw 0;
}
.features-title-wrap {
    margin-bottom: 6vw;
}
.features-container {
    display: flex;
    justify-content: space-around;
    position: relative;
}
.features-content {
    width: calc(1080px/3);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.features-content-1 {
    align-items: flex-start;
}
.features-content-2 {
    position: relative;
}
.features-content-2::before {
    position: absolute;
    content: '';
    height: clamp(calc(350px/3), calc(350/1440*100vw), 350px);
    width: 1px;
    background-color: #949494;
    left: -3.4vw;
    top: 2vw;

}
.features-content-2::after {
    position: absolute;
    content: '';
    height: clamp(calc(350px/3), calc(350/1440*100vw), 350px);
    width: 1px;
    background-color: #949494;
    right: -3.1vw;
    top: 2vw;

}
.features-content-3 {
    align-items: flex-end;
}
.features-content-text {
    width: clamp(calc(223px/3), calc(223/1440*100vw), 223px);
}
.features-content-text-2 {
    width: clamp(calc(263px/3), calc(263/1440*100vw), 263px);
}
.features-content-text h3 {
    font-size: clamp(calc(24px/3),calc(24/1440*100vw), 24px);
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0;
    margin-bottom: 2vw;
    font-weight: 600;
}
.features-content-img {
    margin: 3vw 0;
}
.features-content-img-1 {
    width: clamp(calc(127px/3), calc(127/1440*100vw), 127px);
    margin-left: 4vw;
}
.features-content-img-2 {
    width: clamp(calc(122px/3), calc(122/1440*100vw), 122px);
}
.features-content-img-3 {
    width: clamp(calc(111px/3), calc(111/1440*100vw), 111px);
    margin-right: 4vw;
}

/* ====================
company
==================== */
.company {
    background-color: #FAFAFA;
    padding: 12vw 0;
    margin-bottom: 10vw;
}
.company-title-wrap {
    margin-bottom: 4vw;
}
.company-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.company-content-inner {
    /* width: 497px; */
    width: clamp(calc(479px/3), calc(479/1440*100vw), 479px);
}
.company-content {
    width: 100%;
    display: flex;
    margin: 0 auto;
    border-bottom: solid 1px rgba(148, 148, 148, .3);
    box-sizing: border-box;
    padding: 1.4vw 0 0.7vw 0;
}

.company-content-name {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    width: 20%;
    font-size: clamp(calc(15px/3), calc(15/1440*100vw), 15px);
    color: #3F3F3F;
    line-height: 2;
}
.company-content-text {
    font-family: "Noto Sans JP", sans-serif;
    width: 80%;
    font-size: clamp(calc(15px/3), calc(15/1440*100vw), 15px);
    font-weight: 400;
    color: #3F3F3F;
    line-height: 2;
}

/* ====================


service-web page


==================== */
.sw-page {
    position: relative;
    margin-top: 0vw;
}
.sw-page::after {
    content: '';
    position: absolute;
    background-image: url(../img/sw_bg_wave.png);
    width: 100%;
    height: 41vw;
    background-repeat: no-repeat;
    background-size: cover;
    top: 6vw;
    z-index: -1;
}
.sw-inner {
    padding: calc(36/1440*100vw)  0 5vw 0;
    overflow: hidden;
}
.sw-title-wrap {
    margin-bottom: calc(50/1440*100vw);
}
.sw-title-wrap h2 {
    font-family: "Noto Sans JP", sans-serif;
    color: #3f3f3f; 
}
.sw-title-wrap p {
    font-family: "Noto Sans", sans-serif;
    font-weight: 500;
    background: linear-gradient(to right, #27AAAA 0%, #104444 10%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
    color: transparent;
}
.sw-container {
    display: flex;
}
.sw-fv-img {
    width: clamp(calc(380px/3), calc(380/1440*100vw), 380px);
    
}
.sw-icon-wrap {
    width: 65%;
    height: 15vw;
    position: relative;
}
.website-icon {
    display: flex;
    width: clamp(calc(858px/3), calc(858/1440*100vw), 858px);
    height: clamp(calc(110px/3), calc(110/1440*100vw), 110px);
    position: absolute;
    top: -7vw;
    right: -30vw;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}
.lp-icon {
    display: flex;
    width: clamp(calc(858px/3), calc(858/1440*100vw), 858px);
    height: clamp(calc(110px/3), calc(110/1440*100vw), 110px);
    position: absolute;
    top: 2vw;
    right: -25vw;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}
.oandm-icon {
    display: flex;
    width: clamp(calc(858px/3), calc(858/1440*100vw), 858px);
    height: clamp(calc(110px/3), calc(110/1440*100vw), 110px);
    position: absolute;
    top: 11vw;
    right: -20vw;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.website-icon:hover,
.lp-icon:hover,
.oandm-icon:hover {
  transform: translateX(-40px);
  opacity: 0.6;
}

/* ====================


website page


==================== */
.ws-title-wrap {
    padding-top: 4vw;
}
.title-logo-wrap {
    display: flex;
    align-items: center;
    padding-top: 1vw;
}
.title-logo-wrap img {
    width: clamp(calc(29px/3), calc(29/1440*100vw), 29px);
    height: clamp(calc(23px/3), calc(23/1440*100vw), 23px);
}
.title-logo-wrap p {
    color: #9B9B9B;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    margin-left: 0.5vw;
}
.ws-content-message {
    margin-bottom: 3vw;
}
.ws-content-message h4 {
    margin-bottom: 1vw;
    font-weight: 500;
}
.ws-content-message p {
    line-height: 2;
}

.worries-wrap {
    background-image: url(../img/ws_worries_bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4vw 0;
}
.worries-wrap h3 {
    display: inline-flex;
    font-size: clamp(calc(24px/3),calc(24/1440*100vw), 24px);
    color: #000;
    margin-bottom: 3vw;
    position: relative;
    font-weight: 700;
}
.worries-wrap h3::after {
    position: absolute;
    content: '';
    width: clamp(calc(502px/3), calc(502/1440*100vw), 502px);
    height: 2px;
    background-color: #ECCE32;
    bottom: 0vw;
    left: 0.2vw;
}
.worries-p-wrap {
    width: clamp(calc(559px/3), calc(559/1440*100vw), 559px);
}
.worries-p-wrap p {
    font-size: clamp(calc(20px/3),calc(20/1440*100vw), 20px);
    margin-bottom: 2vw;
    letter-spacing: 0;
}
/* 
solution
*/
.solution-wrap {
    margin-bottom: 8vw;
}
.solution-wrap h4 {
    font-size: clamp(calc(32px/3),calc(32/1440*100vw), 32px);
    margin: 4vw 0;
    text-align: center;
}
.solution-content {
    margin-bottom: 3vw;
}
.solution-span {
    background: linear-gradient(to right, #27AAAA 20%, #104444 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
    color: transparent;
    font-size: clamp(calc(40px/3),calc(40/1440*100vw), 40px);
}
.solution-content h3 {
    font-size: clamp(calc(24px/3), calc(24/1440*100vw),24px);
    font-weight: 700;
    margin-bottom: 0.5vw;
    display: flex;
    align-items: center;
}
.solution-content p {
    font-size: clamp(calc(20px/3), calc(20/1440*100vw),20px);
    margin-left: 2.4vw;
}
/* 
flow 
*/
.flow {
    padding-bottom: 10vw;
}
.flow-title-wrap {
    margin-bottom: 2vw;
}
.flow-container-wrap {
    display: flex;
}
.flow-arrow {
    width: clamp(calc(25px/3), calc(25/1440*100vw), 24.4px);
    height: clamp(calc(389px/3), calc(389/1440*100vw), 389px);
    margin: 0 auto;
}
.flow-content {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5vw;
}
.flow-content-name {
    width: clamp(calc(250px/3), calc(250/1440*100vw), 250px);
    height: clamp(calc(70px/3), calc(70/1440*100vw), 70px);
    background-color: #484848;
    color: #fff;
    font-size: clamp(calc(24px/3), calc(24/1440*100vw), 24px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.25);  
}
.flow-content-name-2 {
    background-color: #ECCE32;
}
.flow-content-name-3 {
    background: linear-gradient(to right, #27AAAA 0%, #104444 100%);
}
.flow-content-text {
    width: clamp(calc(750px/3), calc(750/1440*100vw), 750px);
    height: clamp(calc(70px/3), calc(70/1440*100vw), 70px);
    background-color: #eaeaea;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(calc(18px/3), calc(18/1440*100vw), 18px);
    margin-left: 0.5vw;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.25); 
}
.flow-container-p {
    color: #3F3F3F;
    font-size: clamp(calc(18px/3), calc(18/1440*100vw), 18px);
}



/* 
contact-banner
*/
.contact-banner {
    margin-bottom: 12vw;
}
.contact-banner-container {
    text-align: center;
    padding: 3vw;
}
.contact-banner-inner{
    background-color: #3F3F3F;
    max-width: 1440px;
}
.contact-banner-text,
.banner-business-hours {
    color: #fff;
}
.contact-banner-text {
    font-size: clamp(calc(18px/3), calc(18/1440*100vw), 18px);
    margin-bottom: 1.5vw;
}
.banner-business-hours {
    font-size: clamp(calc(14px/3), calc(14/1440*100vw), 14px);
}
/* 
ws-support
*/
.ws-support-inner {
    padding-bottom: 10vw;
}
/* 
ws-service
*/
.ws-service{
    margin-bottom: 0;
}

/* ====================


landing page


==================== */
.lp-worries-p-wrap {
    width: clamp(calc(642px/3), calc(642/1440*100vw), 642px);
}
/* ====================


oandm page


==================== */
/* 
SUPPORT PRICING
*/
.sp-title-wrap{
    justify-content: start;
}
.sp-container {
    padding: 4vw 0 0 0;
}
.oam-content:hover {
    opacity: 1;
}
.sp-plan-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: clamp(calc(244px/3), calc(244/1440*100vw), 244px);
    position: relative;
    margin-bottom: 1.5vw;
}
.sp-plan-wrap h5 {
    font-weight: 700;
    font-family: "Noto Sans", sans-serif;
    margin-bottom: 1vw;
}
.sp-plan-wrap p {
    font-weight: 700;
}
.plan-mon,
.plan-year {
    font-size: clamp(calc(24px/3), calc(24/1440*100vw), 24px);
}
.plan-mon span,
.plan-year span {
    font-size: clamp(calc(16px/3), calc(16/1440*100vw), 16px);
}
.plan-year {
    color: #27AAAA;
    margin-bottom: 0.5vw;
}
.plan-p {
    font-size: clamp(calc(12px/3), calc(12/1440*100vw), 12px);
    padding-bottom: 0.5vw;
}
.sp-plan-wrap::after {
    content: '';
    position: absolute;
    width: clamp(calc(244px/3), calc(244/1440*100vw), 244px);
    height: 1px;
    bottom: 0vw;
    left: 0vw;
    background-color: #9B9B9B;
}
.sp-text-wrap{
    max-width: calc(1080/1440*100vw);
    width: 84%;
    margin: 0 auto;
    margin-bottom: 4vw;
}
.sp-text {
    color: #3F3F3F;
    font-size: clamp(calc(18px/3), calc(18/1440*100vw), 18px);
}

/* ====================


contact page


==================== */
.contact-page-inner {
    padding-top: 8vw;
}
.contact-container {
    width: clamp(calc(768px/3), calc(768/1440*100vw), 768px);
    margin: 0 auto;
}
.contact-form-text {
    text-align: center;
    font-size: clamp(calc(15px/3), calc(15/1440*100vw), 15px);
    margin-bottom: 2vw;
}
.contact-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2vw;
}
.contact-content-1 {
    display: flex;
    justify-content: start;
}
.contact-content-name {
    width: clamp(calc(180px/3), calc(180/1440*100vw), 180px);
}
.contact-input {
    width: clamp(calc(526px/3), calc(526/1440*100vw), 526px);
    height: clamp(calc(36px/3), calc(36/1440*100vw), 36px);
    padding: 0 1vw;
    border: solid 1px #9B9B9B;
    border-radius: 3px;
}

.contact-input-1 {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-left: 2.3vw;
    font-size: clamp(calc(16px/3), calc(16/1440*100vw), 16px);
    line-height: 2;
}
.contact-content:last-child .contact-input {
    height: calc(210/1440*100vw);
    padding: calc(10/1440*100vw) 0 0 calc(14/1440*100vw);
}
.contact-content p {
    font-size: clamp(calc(20px/3), calc(20/1440*100vw), 20px);
    font-weight: 700;
}
.form-color {
    color: #27AAAA;
}
.contact-page-btn {
    background: linear-gradient(to right, #27AAAA 0%, #104444 100%);
    color: #fff;
    border: none;
    border-radius: 5px;
    width: clamp(calc(195px/3), calc(195/1440*100vw), 195px);
    height: clamp(calc(44px/3), calc(44/1440*100vw), 44px);
    margin: 0 auto;
    margin-top: calc(26/1440*100vw);
    font-size: clamp(calc(14px/3), calc(14/1440*100vw), 14px);
    display: flex;
}
.pp-wrap {
    width: 100%;
    height: clamp(calc(220px/3), calc(220/1440*100vw), 220px);
    overflow-y: scroll;
    overflow-x: hidden; /* 横スクロールを抑止 */
    border: solid 1px #9B9B9B;
    margin-bottom: 2vw;
    border-radius: 3px;
    background-color: #fff;
}
.pp-wrap p {
    font-size: clamp(calc(14px/3), calc(14/1440*100vw), 14px);
    width: clamp(calc(615px/3), calc(615/1440*100vw), 615px);
    margin: 0 auto;
    padding-bottom: 2vw;
}

.wpcf7 input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff; /* 未チェック時の背景 */
    border: 2px solid #656565;
    width: clamp(calc(15px/3), calc(15/1440*100vw), 15px);
    height: clamp(calc(15px/3), calc(15/1440*100vw), 15px);
    cursor: pointer;
    position: relative;
  }
  .wpcf7 input[type="checkbox"]:checked::after {
    content: "";
    background-image: url(../img/check_mark.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0.1vw;
    left: 0.05vw;
    width: clamp(calc(10px/3), calc(10/1440*100vw), 10px);
    height: clamp(calc(9px/3), calc(9/1440*100vw), 9px);
  }
  .contact-content-last {
    margin-bottom: 3vw;
  }
  
  .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
    
    visibility: hidden;
    font-size: clamp(calc(12px/3), calc(12/1440*100vw), 12px);
    color: red;
    margin-bottom: -1.166vw;
  }
  
  input.wpcf7-not-valid + .wpcf7-not-valid-tip {
    visibility: visible; /* エラー時だけ表示 */
  }

  .contact-content-1 .wpcf7-form-control-wrap span.wpcf7-not-valid-tip {
    margin-left: 3.8vw;
}
/* ====================


other


==================== */
.os-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4vw;
}
.os-content {
    background-repeat: no-repeat;
    background-size: cover;
    width: clamp(calc(500px/3), calc(500/1440*100vw),500px);
    height: clamp(calc(250px/3), calc(250/1440*100vw),250px);
    margin-left: clamp(calc(40px/3), calc(40/1440*100vw),40px);
    margin-bottom: clamp(calc(40px/3), calc(40/1440*100vw),40px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1vw 2vw;
}
.os-content h3 {
    font-size: clamp(calc(24px/3), calc(24/1440*100vw),24px);
    font-weight: 500;
    color: #fff;
}
.os-content p {
    font-size: clamp(calc(16px/3), calc(16/1440*100vw),16px);
    font-weight: 400;
    color: #fff;
}
.os-content-1 {
    background-image: url(../img/other_logo_bg.png);
}
.os-content-2 {
    background-image: url(../img/other_businesscard_bg.png);
}
.os-content-3 {
    background-image: url(../img/other_pamphlet_bg.png);
}
.os-content-4 {
    background-image: url(../img/other_materials_bg.png);
}

/* ====================


listing


==================== */
.listing-container {
    margin-bottom: 8vw;
}

/* ====================


blog


==================== */
.blog-page-inner {
    padding-top: 8vw;
}
.blog-inner {
    padding-bottom: 8vw;
}

/* 
ページネーション
*/
.pagenation{
    display: flex;
    align-items: center;
    justify-content: center;
}
.pagination-number-wrap ul {
    display: flex;
    justify-content: center;
    gap: 2vw;
    list-style: none;
    padding: 0 1vw;
  }
  
.pagination-nav {
    display: flex;
    justify-content: center;
    gap: 40px;
  }
.page-numbers {
    display: inline-block;
    text-decoration: none;
    color: #000;
    font-size: clamp(calc(24px/3), calc(24/1440*100vw), 24px);
}
  
.page-numbers.current {
    color: #27AAAA;  
}

li>.page-numbers:hover {
    opacity: 0.5;
}
li>.current:hover {
    
    opacity: 1;  
}
.btn-img-back-wrap {
    left: -0.8vw;
}
.btn-img-next-wrap {
    left: -0.4vw;
}
.back,
.next {
    width: clamp(calc(36px/3), calc(36/1440*100vw), 36px);
}
.btn-img-back {
    left: -4vw;
}
.btn-arrow-back {
    left: -5.5vw;
}
.btn:hover .btn-arrow-back {
    transform: translate(-40%, -50%);
    transition: 0.3s;
}
/* ====================


blog-single


==================== */
.blog-single-page-inner {
    padding-top: clamp(calc(46px/3), calc(46/1440*100vw), 46px);
}
.blog-single-inner {
    padding-bottom: 0;
}

.blog-single-content h5 {
    color: #3f3f3f;
    font-size: clamp(calc(24px/3), calc(24/1440*100vw), 24px);
}
.blog-single-btn {
    text-align: center;
    padding-bottom: 4vw;
    justify-content: center;
}
.wp-block-group__inner-container {
    display: flex;
    justify-content: space-between;
    margin-top: 2vw;
}
.wp-block-group__inner-container figure img{
    width: clamp(calc(350px/3), calc(350/1440*100vw), 350px);
    height: clamp(calc(250px/3), calc(250/1440*100vw), 250px);
}
.wp-block-group__inner-container p{
    width: clamp(calc(585px/3), calc(585/1440*100vw), 585px);
    margin-right: 2vw;
}


@media screen and (max-width:460px) {
    h1 {
        font-size: clamp(calc(24px/3), calc(24/375*100vw), 24px);
        font-family: "Noto Sans", sans-serif;
        font-weight: 400;
        letter-spacing: 0.1rem;
    }
    h2 {
        font-family: "Noto Sans", sans-serif;
        font-weight: 700;
        font-size: clamp(calc(24px/3), calc(24/375*100vw), 24px);
        line-height: 1;
    }
    h3 {
        font-size: clamp(calc(20px/3), calc(20/375*100vw), 20px);
        font-weight: 400;
    }
    h4 {
        font-size: clamp(calc(16px/3), calc(16/375*100vw), 16px);
        font-weight: 500;
        background: linear-gradient(to right, #27AAAA 0%, #104444 50%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text; 
        color: transparent;
    }
    h5 {
        font-size: clamp(calc(20px/3), calc(20/375*100vw), 20px);
        color: #3f3f3f;
    }
    p {
        font-size: clamp(calc(12px/3), calc(12/375*100vw), 12px);
        letter-spacing: 0.05rem;
    }

    /* ====================
    共通レイアウト
    ==================== */
    #popup-lock-layer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: transparent; /* 見えないけどブロック */
        z-index: 9998; /* popup(9999)より下、thumbnail(10)より上 */
        pointer-events: auto; /* ← 必ずタッチを吸収する */
    }

    .pankuzu-wrap {
        display: none;
    }
    .btn-wrap{
        justify-content: center;
        margin-top: 8vw;
    }
    .btn {
        width: clamp(calc(104px/3), calc(104/375*100vw), 104px);
    }
    .btn > p {
        font-size: clamp(calc(11px/3), calc(11/375*100vw), 11px);
    }
    .btn-arrow {
        width: clamp(calc(35px/3), calc(35/375*100vw), 35px);
        height: clamp(calc(5px/3), calc(5/375*100vw), 5px);
        top: 35%;
        transform: translateY(-25%);
        left: 3vw;
    }
    .btn-img {
        width: clamp(calc(29px/3), calc(29/375*100vw), 29px);
        height: clamp(calc(29px/3), calc(29/375*100vw), 29px);
        top: 60%;
        left: -0.6vw;
    }
    .btn:hover .btn-arrow {
        transform: translate(40%, -25%);
    }
    .section-inner {
        width: 100%;
        margin-top: 0vw;
    }
    .title-wrap {
        margin-bottom: 10vw;
    }
    .container {
        max-width: 100%;
    }
    .br-pc {
        display: none;
    }
    .br-sp {
        display: inline;
    }
    /* 
    
    header 
    
    */
    .header {
        background-image: url(../img/header_line_top_sp.png);
        height: 24vw;
        padding-bottom: 4vw;
        margin-top: -8.1vw;
        background-size: contain;
        top: 0;
        width: 100%;
    }
    
    .header-logo {
        width: clamp(calc(90px/3), calc(90/375*100vw), 90px);
        padding-top: 3vw;
    }
    .header-inner {
        padding-top: calc(20/375*100vw);
        width: 87%;
        margin-top: 13.5vw;
    }
    .bottom-wrap {
        background-image: url(../img/header_line_bottom_sp.png);
        bottom: 0vw;
    }
    .copy-right {
        display: none;
    }
    .page-top {
        font-size: clamp(calc(11px/3), calc(11/375*100vw), 11px);
        top: 4vw;
        right: 8vw;
    }
    .page-top-arrow {
        width: calc(15/375*100vw);
        height: calc(10/375*100vw);
    }
    
    .header-border {
        left: 30vw;
        height: 6vw;
        width: 150vw;
        top: calc(31/375*100vw);
        padding: 0.8vw 0;
        display: flex;
    }
    .header-content .blog-category {
        margin-right: 2vw;
        width: calc(60/375*100vw);
        font-size: calc(11/375*100vw);
        padding: 0.2vw 0.3vw;
        text-align: center;
    }
    .header-content .blog-data {
        margin-right: 2vw;
        width: calc(50/375*100vw);
        font-size: calc(11/375*100vw);
        padding: 0.2vw 0;
    }
    .header-content h5 {
        font-size: calc(11/375*100vw);
        line-height: 0;
    }
    .header-content-wrap .header-content {
        animation: slide-left 15s linear infinite;
        right: -16vw;
        align-items:center;
        width: 130vw;
        justify-content: flex-start;
    }
    @keyframes slide-left {
        0% {
          transform: translateX(50%);
        }
        100% {
          transform: translateX(-100%);
        }
    }
    /* 
    
    fv

    */
    .fv {
        background-image: url(../img/fv_bg_sp.png);
        height: calc(800/375*100vw);
        top: -35vw;
        transform: translateY(0%);
    }
    .fv-container {
        flex-direction: column;
        margin: 0 auto;
        display: flex;
        align-items: center;
        padding-top: 26vw;
    }
    .fv-container::before {
        background-image: url(../img/scroll_text_img_sp.png);
        width: calc(42/375*100vw);
        height: calc(10/375*100vw);
        bottom: -16.4vw;
        left: 40vw;
        z-index: 99;
        transform: translatex(40%);
    }
    .fv-container::after {
        background-image: url(../img/scroll_line_img_sp.png);
        width: calc(20/375*100vw);
        height: calc(20/375*100vw);
        top: 176vw;
        left: 50%;
    }
    .fv h4,
    .fv p {
        font-size: clamp(calc(12px/3), calc(12/375*100vw), 12px);
        text-align: center;
    }
    .fv p {
        width: clamp(calc(332px/3), calc(332/375*100vw), 332px);
        letter-spacing: 0.09rem;
    }
    .fv-content-img {
        width: clamp(calc(290px/3), calc(290/375*100vw), 290px);
        height: clamp(calc(258px/3), calc(258/375*100vw), 258px);
        order: 1;
        padding-top: 17vw;
        width: calc(290/375*100vw);
        height: calc(258/375*100vw);
    }
    .fv-content-text {
        order: 2;
        align-items: center;
        padding-top: 27vw;
    }
    .fv-icon-1 {
        top: 56.5vw;
        left: 27vw;
    }
    .fv-icon-2 {
        top: 39vw;
        left: 38vw;
    }
    .fv-icon-3 {
        top: 53vw;
        left: 58vw;
    }
    .fv-icon-4 {
        top: 25.7vw;
        left: 45.9vw;
    }
    .thumbnail {
        width: clamp(calc(30px/3), calc(30 / 375 * 100vw), 30px);
        height: clamp(calc(30px/3), calc(30 / 375 * 100vw), 30px);
        cursor: pointer;
        position: relative;
        z-index: 10;
        /* background-color: rgba(255, 0, 0, 0.3);  */
      }
      .popup {
        position: fixed;
        top: 65vw;
        left: 50%;
        transform: translateX(-50%) rotate(0deg);
        width: 0;
        opacity: 0;
        pointer-events: none;
        transition: width 0.5s ease, transform 0.5s ease, opacity 0.5s ease;
        z-index: 9999;
      }
      
      .popup.active {
        width: calc(294 / 375 * 100vw);
        opacity: 1;
        transform: translateX(-50%) rotate(360deg);
        pointer-events: auto;
      }

    .popup-wrapper:hover .popup {
        width: 0 !important;
        transform: translateX(-50%) rotate(0deg) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    .popup-wrapper.is-locked .thumbnail {
        z-index: 1 !important; /* ← popupより下に下げる */
        pointer-events: none;  /* ← 念のためクリックも無効に */
      }
    /* 
    
    about

    */
    .about {
        text-align: center;
        margin-bottom: 12vw;
        padding-top: 0;
    }
    .title-wrap > p {
        background: linear-gradient(to right, #27AAAA 30%, #104444 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text; 
        color: transparent;
    }
    .about-container {
        display: flex;
        flex-direction: column;
    }
    .about-content {
        order: 3;
    }
    .about-content h4 {
        margin-bottom: 6vw;
    }
    .about-message-wrap {
        position: relative;
        width: clamp(calc(100px/3), calc(100/375*100vw), 100px);
        height: clamp(calc(192px/3), calc(192/375*100vw), 192px);
        order: 2;
        margin: 0 auto;
        margin-bottom: 8vw;
        display: flex;
        align-items: flex-start;
    }
    
    .section-content > p {
        width: clamp(calc(278px/3), calc(278/375*100vw), 278px);
        margin: 0 auto;
    }
    
    /* 
    
    service

    */
    .service-container {
        flex-direction: column;
        justify-content: center;
        
    }

    .service-content {
        width: 100%;
        width: clamp(calc(286px/3), calc(286/375*100vw),286px);
        height: clamp(calc(387px/3), calc(387/375*100vw),387px);
        padding-top: calc(50/375*100vw);
        margin: 0 auto;
        margin-bottom: calc(30/375*100vw);
    }
    .service-content-img-1,
    .service-content-img-2 {
        width: clamp(calc(93px/3), calc(93/375*100vw),93px);
        height: clamp(calc(72px/3), calc(72/375*100vw),72px);
    }
    .service-content-img-3 {
        width: clamp(calc(103.51px/3), calc(103.51/375*100vw),103.51px);
        height: clamp(calc(71.51px/3), calc(71.51/375*100vw),71.51px);
    }
    .service-content-2 .service-content-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .service-content-2 .service-content-text p {
        width: clamp(calc(92px/3), calc(92/375*100vw),92px);
    }
    .service-content-text h5 {
        margin: calc(36/375*100vw) 0 calc(26/375*100vw);
    }
    .service-content-text p {
        font-size: clamp(calc(12px/3), calc(12/375*100vw), 12px);
        letter-spacing: 0.03rem;
    }
    .service-content-text-3 {
        width: clamp(calc(225px/3), calc(225/375*100vw),225px);
    }
    .service-content {
        text-align: start;
    }



    /* 
    
    support

    */
    .support{
        text-align: center;
    }
    .support-container {
        flex-direction: column;
    }
    .support-content-img {
        width: calc(287/375*100vw);
        height: auto;
        margin: 0 auto;
    }
    .support-content-text {
        width: clamp(calc(301px/3), calc(310/375*100vw),310px);
        margin: 0 auto;
    }
    .support-content-text h4 {
        margin: calc(30/375*100vw) 0;
    }
    .support-content-text p {
        width: clamp(calc(301px/3), calc(301/375*100vw),301px);
    }
    .support::after {
        height: 100vh;
        top: 44vw;
        left: 0;
    }
    .support-content-text .support-btn-wrap {
        margin-left: 19vw;
        margin-top: 8vw;
    }

    /* 
    
    blog

    */
    .blog {
        text-align: center;
    }
    .blog-container {
        width: calc(309/375*100vw);
        margin: 0 auto;
    }
    .blog-date {
        font-size: clamp(calc(16px/3), calc(16/375*100vw), 16px);
    }
    .blog-category {
        font-size: clamp(calc(14px/3), calc(14/375*100vw), 14px);
        padding: 0.2vw 0.8vw;
        margin-left: 1.4vw;
    }
    .blog-content > a > h5 {
        font-size: clamp(calc(15px/3), calc(15/375*100vw), 15px);
        text-align: start;
    }

    /* 
    
    contact

    */
    .contact {
        padding: calc(20/375*100vw) 0;
    }
    .contact-inner {
        padding-top: 0;
    }

    .container-contact {
        width: 90%;
        padding: calc(69/375*100vw) calc(24/375*100vw);
    }
    .contact-text {
        font-size: clamp(calc(15px/3), calc(15/375*100vw), 15px);
        letter-spacing: 0;
        margin-bottom: calc(30/375*100vw);
    }
    .contact-btn{
        font-size: clamp(calc(15px/3), calc(15/375*100vw), 15px);
        width: clamp(calc(230px/3), calc(230/375*100vw), 230px);
        height: clamp(calc(37px/3), calc(37/375*100vw), 37px);
        margin-bottom: calc(10/375*100vw);
    }
    .container-contact > .business-hours {
        font-size: clamp(calc(12px/3), calc(12/375*100vw), 12px);
    }

    /* 
    
    footer
    
    */
    .footer-inner {
        padding: calc(40/375*100vw) calc(41/375*100vw) calc(28/375*100vw);
    }
    .footer-logo-wrap{
        width: 100%;
    }
    .footer-menu-wrap,
    .footer-company-wrap {
        display: none;
    }
    .footer-logo {
        width: clamp(calc(108px/3), calc(108/375*100vw), 108px);
        height: clamp(calc(38px/3), calc(38/375*100vw), 38px);
        margin: 0 auto;
        margin-bottom: calc(30/375*100vw);
    }
    .footer-company-wrap {
        display: none;
    }
    .footer-copy-right {
        display: block;
    }

    .footer-copy-right-pc {
        display: none;
    }
    .footer-copy-right p {
        font-size: clamp(calc(10px/3), calc(10/375*100vw), 10px);
        letter-spacing: 0;
    }

    /* ====================


    下層ページ共通


    ==================== */

    .p-title-wrap h2 {
        font-size: calc(24/375*100vw);
    }
    .p-title-wrap p {
        font-size: calc(12/375*100vw);
    }

    /* ====================


    about page


    ==================== */

    /* 
    about
    */
    .aboutp-inner {
        padding: calc(90/375*100vw) calc(46/375*100vw) calc(90/375*100vw);
    }
    .aboutp-text-wrap p {
        letter-spacing: 0.18rem;
        font-weight: 600;
    }   

    /* 
    features
    */
    .features-title-wrap {
        text-align: center;
    }
    .features-container {
        flex-direction: column;
    }
    .features-content {
        width: 100%;
        align-items: center;
        margin-bottom: calc(100/375*100vw);
    }
    .features-content-img {
        margin-bottom: calc(40/375*100vw);
    }
    .features-content-img-1 {
        width: clamp(calc(127px/3), calc(127/375*100vw), 127px);
        margin-left: 0vw;
    }
    .features-content-img-2 {
        width: clamp(calc(122px/3), calc(122/375*100vw), 122px);
    }
    .features-content-img-3 {
        width: clamp(calc(111px/3), calc(111/375*100vw), 111px);
        margin-right: 4vw;
    }
    .features-content-text {
        width: clamp(calc(223px/3), calc(223/375*100vw), 223px);
    }
    .features-content-text-2 {
        width: clamp(calc(263px/3), calc(263/375*100vw), 263px);
    }
    .features-content-text h3,
    .features-content-text h4 {
        font-size: clamp(calc(24px/3),calc(24/375*100vw), 24px);
    }
    .features-content-text p {
        font-size: calc(16/375*100vw);
    }
    .features-content-2::before {
        position: absolute;
        content: '';
        width: calc(250/375*100vw);
        height: 1px;
        background-color: #949494;
        left: 50%;
        top: -12vw;
        transform: translateX(-50%);
    
    }
    .features-content-2::after {
        position: absolute;
        content: '';
        width: calc(250/375*100vw);
        height: 1px;
        background-color: #949494;
        left: 50%;
        top: 96vw;
        transform: translateX(-50%);
    }

    /* 
    company
    */
    .company-title-wrap {
        text-align: center; 
    }
    .company-container {
        flex-direction: column;
        padding: 0 calc(28/375*100vw);
    }
    .company-content-inner {
        width: calc(319/375*100vw);
    }
    .company-content {
        padding: calc(20/375*100vw) 0 calc(10/375*100vw) 0;
    }
    .company-content-name,
    .company-content-text {
        font-size: calc(12/375*100vw);
    }

    /* ====================


    service page


    ==================== */
    .service-text-wrap p {
        font-size: calc(12/375*100vw);
        letter-spacing: 0.1rem;
        line-height: 1.8;
    }

    /* ====================


    service-web page


    ==================== */
    .sw-page {
        margin-top: 20vw;
    }
    .sw-title-wrap {
        text-align: center;
        margin-bottom: calc(30/375*100vw);
    }
    .sw-title-wrap h2 {
        line-height: 1.2;
    }
    .sw-container {
        flex-direction: column;
        align-items: center;
    }
    .sw-fv-img {
        width: calc(219/375*100vw);
    }
    .sw-title-wrap p {
        background: linear-gradient(to right, #27AAAA 0%, #104444 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text; 
        color: transparent;
        margin: 0 auto;
    }
    .sw-icon-wrap{
        height: 67vw;
    }
    .sw-icon {
        width: calc(391/375*100vw);
        height: calc(50/375*100vw);
    }
    .website-icon {
        top: calc(40/375*100vw);
        right: calc(-140/375*100vw);
    }
    .lp-icon {
        top: calc(100/375*100vw);
        right: calc(-120/375*100vw);
    }
    .oandm-icon {
        top: calc(160/375*100vw);
        right: calc(-100/375*100vw);
    }

    /* ====================


    website page


    ==================== */
    .ws-page {
        margin: 0 auto;
        margin-top: 20vw;
    }
    .ws-inner {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }
    .title-logo-wrap {
        display: inline-flex;
    }
    .title-logo-wrap img {
        width: clamp(calc(16px/3), calc(16/375*100vw), 16px);
        height: clamp(calc(13px/3), calc(13/375*100vw), 13px);
        margin-right: calc(2/375*100vw);
    }
    .title-logo-wrap p {
        color: #9B9B9B;
        background: none;
        -webkit-background-clip: initial;
        -webkit-text-fill-color: initial;
        background-clip: initial;
        margin-left: 0.5vw;
    }
    .worries-wrap {
        background-image: url(../img/ws_worries_bg_sp.png);
        background-size: 100vw;
        padding-bottom: calc(88/375*100vw);
        margin-left: calc(9/375*100vw);
        padding-top: calc(49/375*100vw);
        align-items: flex-start;
        padding-left: calc(46/375*100vw);
    }
    .ws-content-message {
        text-align: center;
    }
    .ws-content-message p {
        margin: calc(20/375*100vw) 0 calc(30/375*100vw);
    }
    .worries-wrap h3,
    .worries-wrap p {
        font-size: calc(14/375*100vw);
        margin-bottom: calc(23/375*100vw);
    }
    .worries-wrap h3::after {
        width: calc(303/375*100vw);
        left: 0;
    }
    .worries-p-wrap {
        width: calc(247/375*100vw);
    }

    /* 
    
    solution

    */
    .solution-wrap {
        padding: 0 calc(20/375*100vw) calc(20/375*100vw);
    }
    .solution-wrap h4 {
        font-size: calc(18/375*100vw);
        letter-spacing: 0.03rem;
        margin-bottom: calc(30/375*100vw);
    }
    .solution-span {
        font-size: calc(20/375*100vw);
    }
    .solution-span-margin {
        margin-top: -6vw;
    }
    .solution-content h3 {
        font-size: calc(16/375*100vw);
        letter-spacing: 0.03rem;
    }
    .solution-content p {
        font-size: calc(14/375*100vw);
        letter-spacing: 0.07rem;
        margin-bottom: calc(30/375*100vw);
    }
    /* 
    
    flow

    */
    .flow-title-wrap {
        text-align: center;
    }
    .flow-arrow {
        width: calc(30/375*100vw);
        height: calc(410/375*100vw);
    }
    .flow-arrow img {
        height: calc(410/375*100vw);
    }
    .flow-content {
        margin-bottom: calc(5/375*100vw);
    }
    .flow-content-name {
        width: calc(100/375*100vw);
        height: calc(78/375*100vw);
    }
    .flow-content-text {
        width: calc(248/375*100vw);
        height: calc(78/375*100vw);
        padding: 0 calc(26/375*100vw) 0 calc(15/375*100vw);
        letter-spacing: 0rem;
    }
    .flow-content-name,
    .flow-content-text {
        font-size: calc(14/375*100vw);
    }
    .flow-content-3 .flow-content-name {
        font-size: calc(13/375*100vw);
    }
    .flow-content-5 .flow-content-name {
        font-size: calc(12/375*100vw);
        letter-spacing: 0rem;
    }
    .flow-container-p {
        font-size: calc(12/375*100vw);
        padding: 0 calc(28/375*100vw) 0 calc(5/375*100vw);
        letter-spacing: 0.03rem;
        margin:  calc(10/375*100vw);
    }
    /* 

    reason

    */
    .reason-content-img-wrap {
        display: none;
    }
    .reason-title-wrap {
        text-align: center;
    }
    .reason-container {
        padding: 0 calc(26/375*100vw);
    }
    .reason-content {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    .reason-content-img-sp {
        opacity: 1;
        transform: translateY(0);
        width: calc(216/375*100vw);
        height: calc(144/375*100vw);
        margin: 0 auto;
        margin-bottom: calc(45/375*100vw);
    }
    .reason-content-text {
        position: relative;
    }
    .reason-content-text h4 {
        position: absolute;
        top: -4vw;
        left: 0vw;
        font-size: calc(48/375*100vw);
    }
    .reason-content-text h3 {
        font-size: calc(16/375*100vw);
        margin-left: 18vw;
        margin-bottom: calc(10/375*100vw);
    }
    .reason-content-text p {
        font-size: calc(14/375*100vw);
        width: calc(322/375*100vw);
        height: auto;
        margin-bottom: calc(50/375*100vw);
    }
    
    /* 
    contact-banner
    */
    .contact-banner-inner {
        padding: calc(15/375*100vw) 0;
    }
    .contact-banner-text,
    .banner-business-hours {
        font-size: calc(12/375*100vw);
    }
    .contact-banner-text {
        margin-bottom: calc(20/375*100vw);
    }
    .banner-business-hours {
        margin-top: calc(10/375*100vw);
    }
    .contact-banner-span {
        display: none;
    }
    .contact-banner-container .contact-btn {
        width: calc(240/375*100vw);
    }
    .contact-banner-container {
        padding: 0 calc(21/375*100vw);
    }
    /* ====================


    landing page


    ==================== */
    .landing-container {
        padding: 0 calc(9/375*100vw);
    }
    .ws-content-message h4 {
        font-size: calc(18/375*100vw);
    }
    .ws-content-message p {
        font-size: calc(13/375*100vw);
        letter-spacing: 0.1rem;
    }

    /* ====================


    oandm page


    ==================== */
    /* 
    support
    */
    .oam-content {
        padding-top: calc(40/375*100vw);
        margin-bottom: calc(20/375*100vw);
    }
    .sp-title-wrap {
        text-align: center;
    }
    .sp-plan-wrap {
        width: calc(244/375*100vw);
    }
    .plan-mon,
    .plan-year {
        font-size: calc(24/375*100vw);
    }
    .plan-mon span,
    .plan-year span {
        font-size: calc(16/375*100vw);
    }
    .plan-p {
        font-size: calc(12/375*100vw);
        margin-bottom: calc(32/375*100vw);
    }
    .sp-plan-wrap::after {
        width: calc(244/375*100vw);
        bottom: 6vw;
    }
    .oandm-content-text {
        font-size: calc(12/375*100vw);
        line-height: 2;
    }
    .oam-content-2 .oandm-content-text p{
        width: calc(244/375*100vw);
    }
    .sp-text {
        font-size: calc(12/375*100vw);
        margin: 0 0 calc(50/375*100vw);
        text-align: center;
    }
    /* ====================


    other


    ==================== */

    .os-container {
        margin-bottom: calc(29/375*100vw);
    }
    .other-content-message {
        padding: 0 calc(9/375*100vw);
    }
    .other-content-message h4 {
        letter-spacing: 0.03rem;
        line-height: 2;
    }
    .os-content {
        width: 100%;
        height: calc(187/375*100vw);
        margin:0 0 calc(10/375*100vw) 0;
        padding: 0 0 calc(21/375*100vw) calc(30/375*100vw);
    }
    .os-content  h3 {
        font-size: calc(20/375*100vw);
    }
    .os-content p {
        font-size: calc(12/375*100vw);
    }
    /* ====================


    listing


    ==================== */
    .listing-content-message {
        padding: 0 calc(9/375*100vw);
    }
    .listing-content-message p {
        line-height: 2.5;
        letter-spacing: 0.03rem;
    }
    .listing-container {
        padding: 0 calc(20/375*100vw);
    }
    .listing-container div:last-child {
        margin-bottom: calc(50/375*100vw);
    }
    /* ====================


    blog


    ==================== */
    .blog-page-inner {
        padding-top: calc(130/375*100vw);
    }
    .blog-title-wrap {
        margin-bottom: calc(27/375*100vw);
    }
    .blog-container {
        margin-bottom: calc(60/375*100vw);
    }
    .page-numbers {
        font-size: calc(14/375*100vw);
    }

    .back,
    .next {
        width: calc(36/375*100vw);
    }
    .back p,
    .next p {
        font-size: calc(12/375*100vw);
    }
    .btn-img-next-wrap {
        left: -1vw;
        top: -0.5vw;
    }
    .btn-img-back {
        left: -15vw;
        top: 2.3vw;
    }
    .btn-arrow-back {
        left: -20vw;
    }
    .btn:hover .btn-arrow-back {
        transform: translate(-45%, -55%);
        transition: 0.3s;
    }
    .pagination-number-wrap ul {
        gap: 7vw;
        padding: 0 4vw;
    }
    /* ====================


    blog-single


    ==================== */
    .blog-single-inner {
        /* padding: 0 calc(52/375*100vw); */
        padding: 0;
    }
    .blog-single-content {
        width: calc(270/375*100vw);
    }
    .blog-single-content h5 {
        font-size: calc(16/375*100vw);
        padding: calc(15/375*100vw) 0;
        margin-bottom: calc(13/375*100vw);
    }
    .wp-block-group__inner-container {
        flex-direction: column;
    }
    .wp-block-group__inner-container figure img {
        width: calc(270/375*100vw);
        height: calc(172/375*100vw);
    }
    .wp-block-group__inner-container p {
        font-size: calc(14/375*100vw);
        width: calc(270/375*100vw);
    }
    .blog-single-container {
        margin-bottom: calc(50/375*100vw);
    }
    .blog-single-btn {
        margin-bottom: calc(42/375*100vw);
    }
    /* ====================


    contact page


    ==================== */
    .contact-page-inner {
        padding-top: 26vw;
    }
    .contact-container {
        width: calc(310/375*100vw);
        padding: 0 calc(20/375*100vw) 0 calc(20/375*100vw);
    }
    .contactp-text-wrap {
        width: calc(310/375*100vw);
        margin: 0 auto;
        margin-bottom: calc(50/375*100vw);
    }
    .contactp-text-wrap p {
        font-size: calc(16/375*100vw);
        letter-spacing: 0;
    }
    .contact-form-text {
        font-size: calc(15/375*100vw);
        margin-bottom: calc(30/375*100vw);
    }
    .contact-content p {
        font-size: calc(16/375*100vw);
    }
    .contact-content {
        flex-direction: column;
        width: calc(280/375*100vw);
        margin-bottom: calc(20/375*100vw);
    }
    .contact-content-1 {
        margin-bottom: 0;
    }
    .contact-input-1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: calc(16/375*100vw);
        margin-bottom: calc(15/375*100vw);
    }
    .contact-content-1 p:first-child {
        margin-left: -4.4vw;
        margin-bottom: calc(5/375*100vw);
    }
    .wpcf7-form-control .wpcf7-list-item {
        margin: 0;
    }
    .contact-content-name {
        margin-left: -4.4vw;
        margin-bottom: calc(15/375*100vw);
        width: calc(280/375*100vw);
    }
    .contact-input {
        width: calc(280/375*100vw);
        height: calc(36/375*100vw);
    }
    .contact-content:last-child .contact-input {
        height: calc(210/375*100vw);
    }
    .pp-wrap {
        width: calc(280/375*100vw);
        height: calc(194/375*100vw);
        margin-bottom: calc(30/375*100vw);
    }
    .pp-wrap p {
        font-size: calc(14/375*100vw);
        width: calc(228/375*100vw);
    }
    .wpcf7 input[type="checkbox"] {
        width: calc(16/375*100vw);
        height: calc(16/375*100vw);
        top: 1.3vw;
        left: -1vw;
    }
    .wpcf7 input[type="checkbox"]:checked::after {
        width: calc(11/375*100vw);
        height: calc(10/375*100vw);
    }
    .wpcf7-list-item-label {
        font-size: calc(13/375*100vw);
    }
    .check-box-span {
        margin-left: 5.3vw;
    }
    .wpcf7-form-control .wpcf7-list-item {
        margin-left: -2.2vw;
    }
    .contact-page-btn {
        width: calc(195/375*100vw);
        height: calc(45/375*100vw);
        font-size: calc(14/375*100vw);
        margin-top: calc(30/375*100vw);
        text-align: center;
        justify-content: center;
    }
    
    input::placeholder,
    textarea::placeholder {
        font-size: calc(12/375*100vw);
    }
    body.page-id-18 .blog {
        display: none;
    }
}

@media screen and (min-width:1441px) {
    h1 {
        font-size: 40px;
    }
    h2 {
        font-size: 48px;
    }
    h3 {
        font-size: 32px;
    }
    h4 {
        font-size: 24px;
        background: linear-gradient(to right, #27AAAA 0%, #104444 50%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text; 
        color: transparent;
    }
    h5 {
        font-size: 20px;
    }
    p {
        font-size: 16px;
    }
    /* ====================
    共通レイアウト
    ==================== */
    .btn {
        width: 130px;
    }
    .btn > p {
        font-size: 14px;
    }
    .btn-arrow {
        width: 40px;
        height: 5px;
        top: 11px;
        transform: translateY(-55%);
        transition: 0.3s;
        left: 18px;
    }
    .btn-img {
        width: 33px;
        height: 33px;
        top: 11px;
        transform: translateY(-50%);
        left: 3px;
    }
    .container {
        width: 1080px;
    }
    nav ul .has-sub-menu .sub-menu {
        height: calc(255/1440*100vw); 
        width: calc(282/1440*100vw);   
    }
    /* 
    
    header

    */
    .header-inner {
        width: 100%;
    }
    /* 
    
    fv

    */
    .fv {
        padding-bottom: 150px;
    }
    .fv-container::before {
        content: '';
        position: absolute;
        background-image: url(../img/scroll_text_img.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 12px;
        height: 51px;
        bottom: calc(-3.4*1440px/100);
        left: 0;
        z-index: 99;
    
    }
    .fv-container::after {
        content: '';
        position: absolute;
        background-image: url(../img/scroll_line_img.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 12px;
        height: 0; 
        top: 520px;
        left: calc(0.3*1440px/100);
        z-index: 99;
        animation: stretchLineTop 1s ease-in-out infinite;
        transform-origin: top; 
      }
      @keyframes stretchLineTop {
        0% {
          height: 0;
        }
        90% {
          height: 80px;
        }
        91% {
          height: 0; 
        }
        100% {
          height: 0;
        }
      }
      .fv h4 {
        font-size: 20px;
      }
      .fv p {
        font-size: 16px;
        width: 449px;
      }
      
      .fv-container {
        width: 1080px;
      }
      .fv-content-img {
        width: 509px;
        height: 453px;
      }
      .fv-icon {
        width: 69px;
      }
      .thumbnail {
        width: 69px;
        height: 69px;
      }
      .popup-wrapper:hover .popup-1 {
        width: 540px;
        top: -164px;
        left: -180px;
      }
      .popup-wrapper:hover .popup-2 {
        width: 540px;
        top: -54px;
        left: -250px;
      }
      .popup-wrapper:hover .popup-4 {
        width: 540px;
        top: 46px;
        left: -320px;
      }
    /* 
    
    about

    */
    .about {
        padding: 51px 0 170px 0;
    }
    .about-container {
        width: 1080px;
    }
    .about-title-wrap {
        margin-bottom: 99px;
    }

    .ction-content > p {
        width: 629px;
    }
    .about-content > p {
        margin-bottom: 30px;
    }
    .about-btn-wrap {
        margin-top: 0;
    }
    /* 
    
    service

    */
    .container-ser {
        width: 1080px;
    }
    .service-title-wrap {
        margin-bottom: 60px;
    }
    .service {
        padding-bottom: 150px;
    }
    .service-page {
        padding-bottom: 0px;
    }
    /* 
    
    support

    */
    .support {
        padding-bottom: 0px;
    }
    .container-sup {
        width: 1080px;
    }

    .support-content-text .support-btn-wrap {
        position: relative;
        margin-left: calc(-2.8*1440px/100);
        margin-top: calc(-1*1440px/100);
    }
    .support::after {
        height: 1180px;
        top: -9vw;
    }
    /* 
    
    blog

    */
    .blog {
        padding: 150px 0;
    }
    .container-blog {
        width: 1080px;
    }
    .blog-inner {
        padding-bottom: 0;
    }
    .blog-btn-wrap {
        width: 1080px;
        margin-top: 40px;
        justify-content: flex-end;
    }
    .blog-content {
        padding: 31px 0 20px 0;
    }
    .blog-date-wrap {
        margin-bottom: 15px;
    }
    /* 
    
    contact

    */
    .contact-inner {
        padding: 0;
    }
    .container-contact {
        width: 1080px;
        padding: 45px 0;
    }
    .contact-title-wrap {
        margin-bottom: 77px;
    }
    .contact-text {
        margin-bottom: 61px;
    }
    .contact-btn {
        margin-bottom: 30px;
    }
    /* 
    
    footer

    */
    .footer-container {
        width: 1080px;
    }
    .footer-nav {
        margin-bottom: 30px;
    }
    .footer-nav::after {
        bottom: -15px;
    }
    .footer-service-menu ul li {
        margin-bottom: 10px;
    }
    .company-name {
        margin: 30px 0 10px;
    }
    .footer-service-menu ul {
        margin-left: 270px;
    }

    /* 
    
    about page
    
    */
    .container-page-about,
    .container-features {
        width: 1080px;
    }
    .aboutp-title-wrap {
        margin-bottom: 50px;
    }
    .aboutp-text-wrap p {
        margin-bottom: 60px;
    }
    .aboutp-inner {
        padding: 136px 0 100px 0;
    }
    /* ====================
    features
    ==================== */
    .features-inner {
        padding: 4vw 0 160px 0;
    }
    .features-title-wrap {
        margin-bottom: 123px;
    }
    .features-content-text h3 {
        font-size: 24px;
        margin-bottom: 37px;
    }
    .features-content-img-1 {
        width: 127px;
        margin-left: 45px;
    }
    .features-content-img-2 {
        width: 122px;
    }
    .features-content-img-3 {
        width: 111px;
        margin-right: 45px;
    }
    .features-content-img {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .features-content-2::before {
        left: -47px;
        top: 40px;
    }
    .features-content-2::after {
        top: 40px;
        right: -43px;
    }
    /* 
    
    company
    
    */
    .company {
        padding: 173px 0;
        margin-bottom: 150px;
    }
    .company-title-wrap {
        margin-bottom: 70px;
    }
    .company-content {
        padding: 20px 0 10px 0;
    }
    /* 
    
    blog

    */
    .blog-title-wrap {
        margin-bottom: 31px;
    }
    /* 
    
    aboutp page
    
    */
    .container-service {
        width: 1080px;
    }
    /* 
    
    service-web page
    
    */
    .sw-page-inner {
        max-width: 100%;
        margin-left: -1vw;
        padding-top: 37px;
    }
    .sw-page-pankuzu {
        top: 0;
    }
    .sw-title-wrap {
        margin-bottom: 50px;
    }
    .website-icon {
        width: 858px;
        height: 110px;
        top: -100px;
        right: -422px;
    }

    .lp-icon {
        width: 858px;
         height: 110px;
         top: 2vw;
         right: calc(-25px*1440/100);
     }
    .oandm-icon {
        width: 858px;
         height: 110px;
         top: 183px;
         right: calc(-20px*1440/100);
     }
     /* 
    
    website page
    
    */
    .ws-content-message {
        margin-bottom: 50px;
    }
    .ws-content-message h4 {
        margin-bottom: 10px;
    }
    .worries-wrap {
        padding: 56px 0 50px 0;
        justify-content: normal;
    }
    .worries-wrap h3 {
        margin-bottom: 44px;
    }
    .worries-p-wrap p {
        margin-bottom: 34px;
    }

    .solution-wrap h4 {
        margin: 100px 0;
    }
    .solution-content {
        margin-bottom: 50px;
    }
    .solution-content h3 {
        margin-bottom: 10px;
    }
    .solution-wrap {
        margin-bottom: 100px;
    }
    .flow-title-wrap {
        margin-bottom: 30px;
    }
    .flow-arrow {
        width: 25px;
    }
    .flow-content {
        margin-bottom: 10px;
    }
    .flow {
        padding-bottom: 150px;
    }

    .reason-title-wrap {
        width: 1080px;
        margin-bottom: 19px;
    }
    .contact-banner-inner{
        max-width: 1080px;
    }
    .reason-content-img-wrap {
        top: 100px;
        left: 180px;
    }
    .reason-container {
        height: 288px;
    }
    .reason-content {
        height: 260px;
    }
    /* 
    
    oandm page
    
    */
    .sp-container {
        padding-top: 30px;
    }
    .sp-plan-wrap {
        margin-bottom: 23px;
    }
    .sp-plan-wrap h5 {
        margin-bottom: 12px;
    }
    .plan-year {
        margin-bottom: 12px;
    }
    .plan-p {
        margin-bottom: 15px;
    }
    .contact-banner {
        margin-bottom: 150px;
    }
    /* 
    
    blog page
    
    */
    .blog-page-title-wrap {
        margin-bottom: 100px;
    }
    .blog-page-inner {
        padding-top: 136px;
    }
    .blog-page-content-inner {
        padding-bottom: 100px;
    }
    /* 
    
    blog-single page
    
    */
    .blog-single-page-inner {
        padding-top: 46px;
    }
    .blog-single-inner {
        padding-bottom: 0;
    }
    .blog-single-btn {
        padding-bottom: 100px;
    }
    /* 
    
    contact page
    
    */
    .contact-page-inner {
        padding-top: 136px;
    }
    .contact-input-1 {
        margin-left: 2.3vw;
        margin-left: calc(2.3*1440px/100);
        font-size: clamp(calc(16px/3), calc(16/1440*100vw), 16px);
    }
}

  @media screen and (max-width: 460px) {
    .header-content-wrap {
      width: 150vw;
      left: auto;
      right: -82vw;
      clip-path: polygon(2.7% 0%, 100% 0%, 100% 100%, 0% 100%);
      top: 8vw;
      height: 6vw;
    }
    .header-border {
        height: 5vw;
    }
  }