@charset "utf-8";

/*-----------------------------フォント*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&display=swap');

/*-----------------------------リセットCSS*/
html {
	box-sizing: border-box;
	-ms-overflow-style: scrollbar;
    overflow-x: hidden;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default padding */

ul[class],
ol[class] {
	padding: 0;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Set core root defaults */

html {
	scroll-behavior: smooth;
}

/* Set core body defaults */

body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	line-height: 100%;
}

/* Remove list styles on ul, ol elements with a class attribute */

ul[class],
ol[class] {
	list-style: none;
    padding: 0;
    margin: 0;
}

ul,
ol {
	list-style: none;
    padding: 0;
    margin: 0;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img {
	max-width: 100%;
	display: block;
}

/* Natural flow and rhythm in articles by default */

article > * + * {
	margin: 0;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

/* Blur images when they have no alt attribute */

/* Remove all animations and transitions for people that prefer not to see them */

img {
	height: auto;
}

picture {
    display: block;
}

address,
em {
	font-style: normal;
}

table {
	border-collapse: collapse;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
	-webkit-appearance: none;
	border-radius: 0;
}

input[type="search"],
input[type="submit"],
input[type="button"] {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	box-sizing: border-box;
	cursor: pointer;
}

input[type="search"]::-webkit-search-decoration,
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: normal;
}

/*-----------------------------初期値CSS*/
body {
    font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
    font-weight: 400;
	line-height: 1.8;
    position: relative;
    background: #fff;
    color: #0F314E;
    overflow-x: hidden;
}

@media screen and (max-width: 599px){

    body {
        font-size: 15px;
        line-height: 1.7;
    }

}

a {
    transition: .2s;
	text-decoration: none;
    color: #0F314E;
	display: block;
	cursor: pointer;
    -webkit-text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	list-style: none;
}

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

a[href*="tel:"] {
    display: inline;
}

/*スマホ時電話リンク*/
@media (min-width: 599px) {
	a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
	}
}

/*iPhoneで画面サイズに合わせる*/
@supports (-webkit-touch-callout: none) {
    html {
        height: -webkit-fill-available;
    }
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

/*-----------------------------共通CSS*/
main.main {
    position: relative;
    z-index: 1;
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

.inner,
ul.inner {
    max-width: 1200px;
    width: calc(100% - 96px);
    margin: 0 auto;
    box-sizing: border-box;
}

.sp {
    display: none;
}

.bold {
    font-weight: 700;
}

.wbr {
    word-break: keep-all;
    overflow-wrap: normal;
}

.alignCenter {
    text-align: center;
}

.img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*textLink*/
.content a,
.textLink {
    display: inline;
    text-decoration: underline;
    color: #275C89;
}

.content a:hover,
.textLink:hover {
    text-decoration: none;
    opacity: .7;
}

/*modBtn1,modBtn2*/
.modBtn1 {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 250px;
    border-radius: 100px;
    background-image: linear-gradient(45deg, #47B1D8, #23D9AF);
    padding: 1px;
    margin: 0 auto;
}

.content .modBtn1 {
    margin-top: 30px;
}

.modBtn2 {
    background-image: linear-gradient(45deg, #FF8443, #FFDB15);
}

.modBtn1 a,
.modBtn1 .submit {
    position: relative;
    height: 100%;
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    overflow: hidden;
    border-radius: 100px;
    text-decoration: none;
}

.modBtn1 a:hover {
    opacity: 1;
}

.modBtn2 a {
    min-height: 48px;
}

.modBtn1 a::after,
.modBtn1 .submit::after {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}

.modBtn1 a .btnInner,
.modBtn1 .submit .btnInner {
    position: relative;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    letter-spacing: .05em;
    color: #fff;
    display: inline-block;
    z-index: 1;
}

/*hover*/
@media screen and (min-width: 1024px){

    .modBtn1 a:hover::after,
    .modBtn1 .submit:hover::after {
        transform: scale(1, 1);
    }

    .modBtn1 a:hover .btnInner,
    .modBtn1 .submit:hover .btnInner {
        background-image: linear-gradient(45deg, #47B1D8, #23D9AF); 
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .modBtn2 a:hover .btnInner {
        background-image: linear-gradient(45deg, #FF8443, #FFDB15);
    }

}

.modBtn1 .submit p,
.modBtn1 .submit .btnInner,
.modBtn1 .submit input[type="submit"] {
    height: 100%;
    width: 100%;
    min-height: 43px;
}

/*sectionTitle*/
.sectionTitle {
    position: relative;
    text-align: center;
    margin-bottom: 50px;
}

.sectionTitle .en {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 70px;
    line-height: 1;
    display: block;
}

.hamburger .sectionTitle .en {
    font-size: 30px;
    font-weight: 300;
}

.sectionTitle .ja {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    padding-left: 15px;
    margin-left: 5px;
}

.hamburger .sectionTitle .ja {
    font-size: 14px;
    font-weight: 400;
}

.sectionTitle .ja::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-image: linear-gradient(45deg, #47B1D8, #23D9AF);
}

.hamburger .sectionTitle .ja::before {
    top: 8px;
    width: 6px;
    height: 6px;
}

/*sectionTitleText*/
.sectionTitleText {
    text-align: center;
    margin: 50px 0;
}

/*sectionTitleCm*/
.sectionTitleCm {
    font-size: 14px;
    text-align: center;
    opacity: .7;
}

/*sectionBg*/
.section {
    position: relative;
    border-radius: 50px 50px 0 0;
    padding: 100px 0;
}

.sectionBg {
    background-color: #0F314E;
}

.sectionBg .sectionTitle .en,
.sectionBg .sectionTitle .ja,
.sectionBg .sectionTitleText {
    color: #fff;
}

/*sectionSimple*/
.sectionSimple {
    position: relative;
    padding: 100px 0;
}

/*タイトル*/
.content h2 {
    position: relative;
    font-size: 22px;
    font-weight: 700;
    margin-top: 70px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.h3 {
    position: relative;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 1.4;
}

/*ul*/
.content ul {
    margin: 20px 0;
}

.content ul li,
.list li {
    position: relative;
    padding-left: 1em;
}

.content ul li::before,
.list li::before {
    content: "・";
    position: absolute;
    top: 0;
    left: 0;
}

/*table*/
.table,
.table th,
.table td {
	border-collapse: collapse;
}

.table {
    width: 100%;
    border-top: 1px solid #CECECE;
}

.table th,
.table td {
    border-bottom: 1px solid #CECECE;
    line-height: 1.5;
    table-layout: fixed;
    text-align: left;
}

.table th {
    font-weight: 500;
}

/*table1,table2*/
.table1 {
    border-top: none;
}

.table1 th,
.table1 td {
    vertical-align: top;
    padding: 18px 0;
}

.table2 th,
.table2 td {
    vertical-align: middle;
    padding: 20px 0;
}

.table1 tr:last-child th,
.table1 tr:last-child td {
    vertical-align: middle;
    border-bottom: none;
}

.table2 tr:last-child th,
.table2 tr:last-child td {
    vertical-align: top;
}

.table1 th {
    width: 155px;
}

.table2 th {
    width: 277px;
}

@media screen and (max-width: 1023px){

    .inner,
    ul.inner {
        width: calc(100% - 32px);
    }

}

@media screen and (max-width: 599px){

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    /*sectionTitle*/
    .sectionTitle .en {
        font-size: 50px;
    }

    .sectionTitle .ja {
        font-size: 16px;
    }

    .sectionTitle .ja::before {
        top: 9px;
    }

    /*sectionBg*/
    .section {
        border-radius: 30px 30px 0 0;
    }

    .content h2 {
        margin-top: 50px;
    }

    .h3 {
        font-size: 17px;
        margin-bottom: 15px;
    }

    /*modBtn1*/
    .modBtn1 {
        margin: 0 auto;
        max-width: 311px;
    }

    .modBtn1 a,
    .modBtn1 .submit,
    .modBtn1 .submit p,
    .modBtn1 .submit .btnInner,
    .modBtn1 .submit input[type="submit"] {
        min-height: 50px;
    }

    .modBtn1 a .btnInner,
    .modBtn1 .submit .btnInner {
        font-size: 18px;
    }

    /*table1*/
    .table1 th,
    .table1 td {
        border-bottom: 1px solid #CECECE;
        vertical-align: top;
        padding: 18px 0;
        line-height: 1.5;
    }

    .table1 th {
        width: 95px;
    }

}

/*--------------------------------------------------------------------------------------------------------------------

ヘッダー

--------------------------------------------------------------------------------------------------------------------*/
.header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 10;
    height: 74px;
}

.header .headerInner {
    width: calc(100% - 40px);
    height: 100%;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px 0 28px;
    transition: .3s;
}

.header.headerScroll .headerInner {
    background-color: rgba(255,255,255,.8);
    backdrop-filter: blur(10px);
    border-radius: 50px;
} 

/*-----------------------------左ロゴ*/
.header .logo .title .text {
    font-family: "Lato", sans-serif;
    font-size: min(30px,2.1961932650073206vw);
    font-weight: 300;
    display: block;
}

/*-----------------------------メニュー*/
/*nav*/
.header .nav {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 300px);
}

.header .nav .navInner {
    align-items: center;
    justify-content: flex-end;
    column-gap: min(45px,3.294289897510981vw);
}

.header .nav .main {
    position: relative;
    font-family: "Lato", sans-serif;
    font-size: min(16px,1.171303074670571vw);
    letter-spacing: .05em;
    padding: 8px 0;
}

.header .nav .main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-image: linear-gradient(45deg, #47B1D8, #23D9AF);
    opacity: 0;
    transition: .2s;
}

.header .nav .modBtn1 {
    max-width: 180px;
    margin: 0;
}

/*hover*/
@media screen and (min-width: 1024px){

    .header .logo a:hover {
        opacity: .7;
    }

    .header .nav .main:hover::before {
        opacity: 1;
    }

}

@media screen and (max-width: 1023px){

    .header {
        top: 10px;
    }

    .header .headerInner {
        background-color: rgba(255,255,255,.8);
        backdrop-filter: blur(10px);
        height: 50px;
        border-radius: 50px;
        width: calc(100% - 32px);
        padding: 0 0 0 16px;
    }

    .header .nav {
        display: none;
    }

    /*-----------------------------左ロゴ*/
    .header .logo .title .text {
        font-size: 25px;
    }

}

/*--------------------------------------------------------------------------------------------------------------------

ハンバーガーメニュー

--------------------------------------------------------------------------------------------------------------------*/
.hamburger {
	display: none;
}

/*----------------------------------------------------------------------三本ライン*/
.hamburger .line {
    position: fixed;
    top: 10px;
    right: 16px;
    display: flex;
    height: 50px;
    width: 50px;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    z-index: 999999;
	cursor: pointer;
    background-image: linear-gradient(45deg, #47B1D8, #23D9AF);
}

.hamburger .line span,
.hamburger .line span:before,
.hamburger .line span:after {
    content: '';
    display: block;
    height: 1px;
    width: 20px;
    border-radius: 1px;
    background-color: #fff;
    position: absolute;
}

/*.line1*/
.hamburger .line span.line1:before {
    bottom: 5px;
    left: 0;
}

.hamburger .line span.line1:after {
    top: 5px;
    left: 0;
}

/*open*/
.hamburger .line.is-activeLine span.line1 {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}

.hamburger .line.is-activeLine span.line1::before {
    bottom: 0;
    transform: rotate(30deg);
}

.hamburger .line.is-activeLine span.line1::after {
    top: 0;
    transform: rotate(-30deg);
}

/* アニメーション前のメニューの状態 */
.hamburger .line.is-activeLine span.line1 {
    pointer-events: auto;
    opacity: 1;
}

/* アニメーション後のメニューの状態 */
.hamburger .line.is-activeLine span.line1 {
    pointer-events: none;
    opacity: 0;
}

.hamburger .line.is-activeLine span.line1 {
    pointer-events: none;
    opacity: 0;
}

/* アニメーション後のメニューの状態 */
.hamburger .line.is-activeLine span.line1 {
    pointer-events: auto;
    opacity: 1;
}

@media screen and (max-width: 1023px){

	.hamburger {
		display: block;
	}
		
}

/*-----------------------------------------------------------------------中のメニュー*/
.hamburger .menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box; /* 追加 */
    z-index: 9;
    background-color: rgba(255, 255, 255, .7);
    backdrop-filter: blur(30px);
    padding: 10px 16px 16px 16px;
    scrollbar-width: none; /* Firefox用 */
    -ms-overflow-style: none; /* IE・Edge旧対応 */
}

.hamburger .menu .menuInner {
    background-color: #fff;
    border-radius: 30px;
    padding: 100px 16px 50px 16px;
    min-height: 100%;
}

.hamburger .menu::-webkit-scrollbar {
    display: none; /* Chrome/Safari用 */
}

/*動き*/
/* アニメーション前のメニューの状態 */
.hamburger .menu {
    pointer-events: none;
    opacity: 0;
    transition: .2s;
}

/* アニメーション後のメニューの状態 */
.hamburger .menu.is-active {
    pointer-events: auto;
    opacity: 1;
}

/*menu*/
.hamburger .menu .navList {
    max-width: 568px;
    margin: 0 auto;
}

.hamburger .menu .navList li {
    font-size: 17px;
}

.hamburger .menu .navList li a.sectionTitle {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #CECECE;
    text-align: left;
}

.hamburger .menu .link {
    font-size: 13px;
    opacity: .7;
    text-align: center;
    margin-top: 20px;
}

.hamburger .menu .modBtn1 {
    margin: 50px auto 30px auto;
}

/*--------------------------------------------------------------------------------------------------------------------

フッター
--------------------------------------------------------------------------------------------------------------------*/
/*footer*/
.footer {
    position: relative;
    padding: 20px 0;
    background-color: #0F314E;
    z-index: 1;
}

.footer .copy {
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
}

@media screen and (max-width: 599px){

    .footer .copy {
        font-size: 13px;
    }

}

/*movie*/
.movie {
    position: fixed;
    top: 0;
    right: -143px;
    height: 100vh;
}

.movie video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/*--------------------------------------------------------------------------------------------------------------------

トップページ

--------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------MV*/
.mv {
    position: relative;
    height: 100vh;
}

.mv .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
    padding: 65px 0;
    background: url(./img/top/works-policy.svg) no-repeat top left;
    background-size: 497.13px;
}

.mv .text .title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.5;
}

.mv .text .cm {
    font-size: 18px;
    font-weight: 500;
    margin: 32px 0 40px 0;
}

.mv .text .modBtn1 {
    margin: 0;
}

@media screen and (max-width: 599px){

    .mv .inner {
        width: calc(100% - 64px);
    }

    .mv .text {
        padding: 47px 0;
        background-size: 308px;
    }

    .mv .text .title {
        font-size: 26px;
        font-weight: 700;
    }

    .mv .text .cm {
        font-size: 16px;
        margin: 40px 0;
    }

}

/*aboutTop*/
.aboutTop {
    position: relative;
    background-color: rgba(255, 255, 255, .7);
    backdrop-filter: blur(30px);
    padding-bottom: 150px;
}

.aboutTop .aboutTopFlex {
    justify-content: space-between;
    row-gap: 25px;
}

.aboutTop .aboutTopFlex .img {
    width: 40.75%;
}

.aboutTop .aboutTopFlex .flowList {
    width: 54.42%;
    padding-top: 28px;
}

.flowList li {
    position: relative;
    padding: 0 0 20px 22px;
}

.flowList li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 3.5px;
    width: 1px;
    height: 100%;
    background-color: #EEEEEE;
}

.flowList li:last-child:before {
    display: none;
}

.flowList li::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-image: linear-gradient(45deg, #47B1D8, #23D9AF);
}

/*aboutSwiper*/
.aboutSwiper {
    max-width: 182.49px;
    margin: 80px 0 50px 0;
}

.aboutSwiper .swiper-wrapper {
    transition-timing-function: linear;
}

.aboutSwiper .swiper-slide img {
    height: auto;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1;
}

@media screen and (max-width: 599px){

    .aboutTop .aboutTopFlex {
        width: 100%;
    }

    .aboutTop .aboutTopFlex .img {
        width: 100%;
    }

    .aboutTop .aboutTopFlex .flowList {
        width: 100%;
        padding: 0 32px;
    }

    .flowList li::before,
    .flowList li::after {
        top: 10px;
    }

    /*aboutSwiper*/
    .aboutSwiper {
        max-width: 117.18px;
        margin: 30px 0 50px 0;
    }

}

/*valuesTop*/
.valuesTop {
    position: relative;
    margin-top: -50px;
}

.valuesList .box {
    position: relative;
    width: 50%;
    padding: 30px 30px 50px 30px;
    color: #fff;
}

.valuesList .box::before {
    content: "";
    position: absolute;
    top: -40px;
    left: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    filter: blur(30px);
    transform: translateZ(0);
    will-change: filter;
    backface-visibility: hidden;
}

.valuesList .box1::before {
    background-image: radial-gradient(rgba(35,217,175,.15) 0%, transparent);
}

.valuesList .box2::before {
    background-image: radial-gradient(rgba(255,203,255,.15) 0%, transparent);
}

.valuesList .box3::before {
    background-image: radial-gradient(rgba(60,203,255,.15) 0%, transparent);
}

.valuesList .box4::before {
    background-image: radial-gradient(rgba(240,232,26,.15) 0%, transparent);
}

.valuesList .box .h3 {
    padding: 25px 0 0 65px;
    margin-bottom: 15px;
    background-repeat: no-repeat, no-repeat;
    background-position: top left, top left 65px;
}

.valuesList .box1 .h3 {
    background-image: url(./img/top/values-icon-1.svg), url(./img/top/values-text-1.svg);
    background-size: auto 100%, 271px;
}

.valuesList .box2 .h3 {
    background-image: url(./img/top/values-icon-2.svg), url(./img/top/values-text-2.svg);
    background-size: auto 100%, 133.85px;
}

.valuesList .box3 .h3 {
    background-image: url(./img/top/values-icon-3.svg), url(./img/top/values-text-3.svg);
    background-size: auto 100%, 166.95px;
}

.valuesList .box4 .h3 {
    background-image: url(./img/top/values-icon-4.svg), url(./img/top/values-text-4.svg);
    background-size: auto 100%, 253.2px;
}

@media screen and (max-width: 899px){

    .valuesList,
    .valuesList .box {
        width: 100%;
    }

}

@media screen and (max-width: 599px){

    .valuesList .box {
        padding: 30px 16px;
    }

}

/*parallax*/
.parallax {
    position: relative;
    width: 100%;
    height: 355px;
    overflow: hidden;
    contain: layout paint;
}

.parallax .parallaxBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transform: translateZ(0);
    overflow: hidden;
    backface-visibility: hidden;
}

.parallax .parallaxBg.bg1 {
    background-image: url("/_hp/wp-content/uploads/2025/12/parallax-bg-1.webp");
}

.parallax .parallaxBg.bg2 {
    background-image: url("/_hp/wp-content/uploads/2026/03/parallax-bg-2-scaled.webp");
}

@media screen and (max-width: 599px){

    .parallax {
        height: 200px;
    }

}

/*serviceTop*/
.serviceList {
    column-gap: 40px;
    row-gap: 30px;
}

.serviceList .box {
    width: calc(50% - 20px);
    border-radius: 50px;
    padding: 50px min(60px,4.392386530014641vw);
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(30px);
    background-repeat: no-repeat;
    background-size: 154px;
    background-position: top 10px right 10px;
}

.serviceList .box1 {
    background-image: url(./img/top/service-icon-1.svg);
}

.serviceList .box2 {
    background-image: url(./img/top/service-icon-2.svg);
}

.serviceList .box3 {
    background-image: url(./img/top/service-icon-3.svg);
}

.serviceList .box4 {
    background-image: url(./img/top/service-icon-4.svg);
}

.serviceList .box .h3 {
    font-weight: 700;
    margin-bottom: 20px;
}

@media screen and (max-width: 899px){

    .serviceList .box {
        width: 100%;
    }

}

@media screen and (max-width: 899px){

    .serviceList .box {
        padding: 50px 16px 40px 16px;
        border-radius: 30px;
        background-size: 104px;
    }

    .serviceList .box .h3 {
        margin-bottom: 15px;
    }

}

/*worksTop*/
.worksSwiper {
    position: relative;
}

.worksList .box {
    position: relative;
    background-color: #fff;
    min-height: 358.71px;
}

.worksList .box::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: url(./img/common/icon-link.svg) no-repeat center;
    background-size: cover;
}

.worksList .box .img {
    overflow: hidden;
}

.worksList .box .img img {
    transition: .3s;
}

.worksList .box .text {
    padding: 20px 20px 25px 20px;
}

.worksList .box .text .h3 {
    font-weight: 700;
    background-image: linear-gradient(90deg, #0F314E, #0F314E);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
    transition: background-size 0.5s;
    display: inline;
    padding-bottom: 2px;
}

.category {
    font-size: 14px;
    color: #275C89;
}

.worksList .box .text .category {
    margin-top: 10px;
}

.worksTop .modBtn1 {
    margin-top: 50px;
}

.worksTop .swiper-button {
    position: absolute;
    top: 200px;
    right: 32px;
}

.worksTop .swiper-button-prev,
.worksTop .swiper-button-next {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0 !important;
    left: auto !important;
}

.worksTop .swiper-button-prev {
    background-image: url(./img/common/prev.svg);
    right: 40px !important;
}

.worksTop .swiper-button-next {
    background-image: url(./img/common/next.svg);
    right: 0 !important;
}

@media screen and (min-width: 1024px){

    .worksSwiper {
        overflow: hidden;
    }

    .worksTop .swiper-button-prev,
    .worksTop .swiper-button-next {
        display: none;
    }

    .worksList .box:hover .img img {
        transform: scale(1.1);
    }

    .worksList .box:hover .text .h3 {
        background-size: 100% 1px;
    }

}

@media screen and (max-width: 1023px){

    .worksTop .sectionTitle {
        text-align: left;
        width: calc(100% - 64px);
    }

    .worksSwiper {
        max-width: 373.33px;
    }

    .worksList .box .text {
        padding: 16px 16px 23px 16px;
    }

}

@media screen and (max-width: 599px){

    .worksSwiper {
        max-width: 311px;
    }

    .worksList .box {
        min-height: 318.4px;
    }

    .worksTop .swiper-button {
        top: 180px;
    }

}

/*voiceTop*/
.voiceTop .left {
    width: 100%;
}

.voiceTop .right {
    width: 100%;
}

.voiceTop .right .box {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(30px);
    border-radius: 20px;
}

.voiceTop .right .box:last-child {
    margin-bottom: 0;
}

.voiceTop .right .box .toggleBtn {
    border-radius: 20px;
    background: url(./img/common/close.svg) no-repeat center right 16px;
    background-size: 25px;
    background-color: #0F314E;
    color: #fff;
    padding: 25px 60px 25px 35px;
    cursor: pointer;
    transition: .2s;
}

.voiceTop .right .box .toggleBtn.is-active {
    border-radius: 20px 20px 0 0;
    background-image: url(./img/common/open.svg);
}

.voiceTop .right .box .child {
    display: none;
    padding: 20px 40px 45px 40px;
}

.qaList {
    padding-bottom: 35px;
    margin-bottom: 35px;
    border-bottom: 1px solid #CECECE;
}

.qaList:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.qaList .qa {
    position: relative;
    font-size: 16px;
    padding-top: 1px;
    padding-left: 40px;
}

.qaList .qa::before {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 500;
    line-height: 26px;
    width: 30px;
    height: 30px;
    border: 1px solid #0F314E;
    text-align: center;
}

.qaList .qa.q {
    margin-bottom: 10px;
}

.qaList .qa.q::before { 
    content: "Q";
    background-color: #fff;
}

.qaList .qa.a {
    font-weight: 500;
}

.qaList .qa.a::before {
    content: "A";
    background-color: #0F314E;
    color: #fff;
}

@media screen and (min-width: 1024px){

    .voiceTop .left {
        width: 300px;
        text-align: left;
    }

    .voiceTop .right {
        width: calc(100% - 300px);
        padding-top: 13px;
    }

}

@media screen and (max-width: 599px){

    .voiceTop .right .box {
        margin-bottom: 15px;
    }

    .voiceTop .right .box .toggleBtn {
        padding: 19px 47px 20px 15px;
        font-size: 16px;
    }

    .voiceTop .right .box .child {
        padding: 10px 15px 25px 15px;
    }

    .qaList {
        padding-bottom: 25px;
        margin-bottom: 25px;
    }

}

/*businessTop*/
.businessTop .inner {
    border-radius: 20px;
    padding: 25px 40px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(30px);
}

@media screen and (max-width: 599px){

    .businessTop .inner {
        padding: 15px 16px;
    }

}

/*contactTop*/
.contactTop {
    position: relative;
    background-color: rgba(255, 255, 255, .7);
    backdrop-filter: blur(30px);
    z-index: 1;
}

.contactTop .sectionTitleText {
    margin-bottom: 10px;
}

.contactTop .modBtn1 {
    margin-top: 30px;
    margin-bottom: 30px;
}

/*form*/
.form {
    max-width: 900px;
    margin-top: 64px;
}

.form label {
    display: block;
    font-size: 16px;
}

.form label .gray,
.form label .red {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    width: 40px;
    height: 20px;
    line-height: 20px;
    display: inline-block;
    margin: 3px 10px 0 0;
    vertical-align: top;
    color: #fff;
}

.form label .gray {
    background-color: #676767;
}

.form label .red {
    background-color: #B44141;
}

.form input[type="text"],
.form input[type="email"],
.form textarea,
.form select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: inset 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(30px);
    border: none;
}
  
.form textarea {
    min-height: 215px;
}

.form input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    background: none;
    border: none;
    padding: 0;
    color: #fff;
    font-size: 16px;
}

.form .wpcf7-spinner {
    display: none;
}

@media screen and (min-width: 900px){

    .form .table2 tr:last-child th {
        padding-top: 30px;
    }

}

@media screen and (max-width: 899px){

    .form .table2 th,
    .form .table2 td {
        display: block;
        width: 100%;
    }

    .form .table2 th {
        border-bottom: none;
        padding: 20px 0 15px 0;
    }

    .form .table2 td {
        padding: 0 0 20px 0;
    }

}

/*--------------------------------------------------------------------------------------------------------------------

下層ページ

--------------------------------------------------------------------------------------------------------------------*/
/*content*/
.content {
    padding: 150px 0 100px 0;
}

.contentInner {
    padding: 100px 0;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(30px);
    border-radius: 50px;
    margin-bottom: 50px;
}

.worksPage .contentInner {
    padding: 60px 0;
}

.contentInner:last-child {
    margin-bottom: 0;
}

.contentInner .inner {
    max-width: 900px;
}

@media screen and (max-width: 599px){
    
    .content {
        padding: 130px 0 100px 0;
    }

    .contentInner,
    .worksPage .contentInner {
        padding: 50px 0;
        border-radius: 30px;
    }

}

/*worksPage*/
.worksPage .worksPageTop {
    text-align: center;
    margin-bottom: 30px;
}

.worksPage .worksPageTop h2 {
    font-size: 20px;
    margin: 0 0 10px 0;
}

.worksPage .worksPageTop .img {
    margin: 30px 0 10px 0;
}

.worksPage .worksPageTop a {
    font-size: 14px;
}

.worksPage .table2 {
    margin-top: 30px;
}

.worksPage .table2 .list {
    margin: 0;
}

.worksPage .table2 th,
.worksPage .table2 td {
    vertical-align: top;
}

.worksPage .table2 th {
    width: 214px;
}

@media screen and (max-width: 599px){

    .worksPage .worksPageTop h2 {
        font-size: 18px;
    }

    .worksPage .worksPageTop .img {
        margin: 20px 0 10px 0;
    }

    .worksPage .worksPageTop a {
        font-size: 13px;
    }

    .worksPage .table2 th {
        width: 115px;
    }

}

.grecaptcha-badge { visibility: hidden; }