@charset "utf-8";

/*===============================================
    スマホ用CSS
===============================================*/
@media print , screen and (max-width : 750px ){

/*--------------------------------------------
    サイト基本設定
--------------------------------------------*/

body {
    max-width: 750px;
    height: 100%;
    font-size: 1.5rem;
    -webkit-text-size-adjust: 100%;
    padding-top: 62px;
}
.for-pc {
    display:none !important;
}

/*--------------------------------------------
    共通部分
--------------------------------------------*/

/*--  エリアと余白 --*/
.ctsArea {
    position: relative;
}
.inner {
    width: 100%;
    padding: 70px 0;
}
.sec-inner {
    width: 80%;
    word-break: break-all;
    margin: 0 auto;
}

/*--  ボタン --*/
.btn-cv {
    width: 100%;
    color: #fff;
    font-weight: bold;
    line-height: 1;
    background: #004a7c;
    padding: 25px 8%;
    position: relative;
}
.btn-cv:after {
    content: "";
    display: block;
    width: 50px;
    height: 6px;
    border-right: 2px solid #FFF;
    border-bottom: 1px solid #FFF;
    position: absolute;
    top: calc(50% - 6px);
    right: 8%;
    transform: skew(45deg);
    z-index: 20;
}

.btn-white {
    width: 90%;
    display: flex;
    color: #154a7c;
    font-size: 4vw;
    font-weight: bold;
    text-align: center;
    border: #154a7c 1px solid;
    position: relative;
}
.btn-white span {
    width: 100%;
    height: 100%;
    color: #154a7c;
    padding: 12px 0;
    z-index: 10;
}
.btn-white:after {
    content: "";
    display: block;
    width: 12%;
    height: 5px;
    border-right: 2px solid #154a7c;
    border-bottom: 1px solid #154a7c;
    position: absolute;
    top: calc(50% - 5px);
    right: -9%;
    transform: skew(45deg);
    z-index: 20;
}

/*--  table --*/
.table-cmn {
    margin-top: -30px;
}
.table-cmn tr {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: 100%;
    border-bottom: #edecec 1px solid;
    padding: 30px 0;
}
.table-cmn th {
    width: 100%;
    font-size: 1.7rem;
    text-align: left;
    line-height: 1.5;
    padding-left: 1.4em;
    position: relative;
}
.table-cmn th:before {
    content: "\f101";
    color: #10377f;
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 52%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transition: .5s;
}
.table-cmn td {
    width: 100%;
}
.table-cmn td a {
    color: #18c395;
    text-decoration: underline;
}
.table-cmn td iframe {
    width: 100%;
    height: 300px;
    margin-top: 20px;
}

/*-- list-num --*/
.list-num {
    counter-reset: item;
}
.list-num li {
    display: flex;
    align-items: flex-start;
    column-gap: 3%;
}
.list-num li:before {
    counter-increment: item;
    content: '0'counter(item);
    flex-shrink: 0;
    color: #154a7c;
    font-family: 'Cardo', serif;
    font-size: 2rem;
    font-weight: bold;
    margin-top: -0.12em;
}

/*-- list-check --*/
.list-check li {
    padding-left: 22px;
    position: relative;
}
.list-check li:before {
    content: "";
    width: 12px;
    height: 15px;
    background: url(../Images/icon-check-blue.png) no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    left: 0;
    top: 5px;
}
.list-check li + li {
    margin-top: 5px;
}

/*-- blue-bg --*/
.blue-bg {
    position: relative;
}
.blue-bg:after {
    display: block;
    content: "";
    width: 70%;
    height: 100%;
    background: #e8f1f5;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

/*--  ttl-liner --*/
.ttl-liner {
    color: #004a7c;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.5;
    padding-left: 12%;
    position: relative;
}
.ttl-liner:before {
    content: '';
    display: block;
    width: 8%;
    height: 1px;
    background: #154a7c;
    position: absolute;
    top: 0.67em;
    left: 0%;
}

/*--------------------------------------------
    header / footer
--------------------------------------------*/

/*-- header --*/
#header {
    width: 100%;
    height: 60px;
    background: #fff;
    padding: 15px 4%;
    position: fixed;
    top: 0;
    filter: drop-shadow(0 0px 5px rgba(204, 204, 204, .5));
    z-index: 99;
}
#header .hdrSp .hdr-logo {
    width: 235px;
    position: relative;
    z-index: 9999;
}

/*-- ハンバーガーボタン --*/
#header #menu-button {
    display: block;
    width: 30px;
    height: 30px;
}
#header .menu-button-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 999;
}
#header #menu-button .btn-line {
    display: block;
    width: 30px;
    height: 2px;
    margin: auto;
    background-color: #004a7c;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -webkit-transition: .3s ease;
    transition: .3s ease;
    will-change: top, transform;
}
#header #menu-button .btn-line:nth-of-type(1) {
    top: 2px;
}
#header #menu-button .btn-line:nth-of-type(2) {
    top: 11px;
}
#header #menu-button.open .btn-line {
    top: 8px;
}
#header #menu-button.open .btn-line:nth-of-type(1) {
    -webkit-transform: translate(-50%, 0) rotate(20deg);
    transform: translate(-50%, 0) rotate(20deg);
}
#header #menu-button.open .btn-line:nth-of-type(2) {
    -webkit-transform: translate(-50%, 0) rotate(-20deg);
    transform: translate(-50%, 0) rotate(-20deg);
}
#header #menu-button .btn-text {
    color: #004a7c;
    font-family: 'Cardo', serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    position: absolute;
    top: 20px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -webkit-transition: .3s ease;
    transition: .3s ease;
    will-change: opacity;
}
#header #menu-button .btn-text-open {
    opacity: 1;
}
#header #menu-button .btn-text-close {
    opacity: 0;
}
#header #menu-button.open .btn-text-open {
    opacity: 0;
}
#header #menu-button.open .btn-text-close {
    opacity: 1;
}

#header .gnav-sp-wrap {
    width: 100%;
    height: 100vh;
    background: #fff;
    padding: 75px 10% 5%;
    overflow: scroll;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 100;
    transition: .5s;
}
#header .gnav-sp-wrap.view {
    right: 0;
}

@media print , screen and (max-width : 350px ){
    #header .gnav-sp {
        max-height: 60vh;
        overflow: scroll;
    }
}
#header .gnav-sp dl {
    border-bottom: #edecec 1px solid;
    padding: 20px 0 16px;
}
#header .gnav-sp dl:last-child {
    border-bottom: none;
}
#header .gnav-sp dl dt {
    color: #232f37;
    font-size: 1.4rem;
}
#header .gnav-sp dl.hdr-service dt {
    margin-bottom: 10px;
}
#header .gnav-sp dl dt a {
    color: #232f37;
}
#header .gnav-sp dl dt span {
    display: block;
    color: #004a7c;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}
#header .gnav-sp dl dd a {
    color: #154a7c;
    font-size: 1.4rem;
    font-weight: bold;
    padding-left: 40px;
    position: relative;
}
#header .gnav-sp dl dd a:before {
    content: '';
    width: 25px;
    height: 1px;
    background: #004a7c;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

#header .gnav-sp-wrap .btn-cv {
    margin-top: 20px;
}

/*-- footer --*/
#footer {
    color: #fff;
    background: #154a7c;
}
#footer .cvBox {
    color: #232f37;
    background: #f4f4f4;
    padding: 70px 10%;
}
#footer .cvBox h2 {
    line-height: 1;
    margin-top: -10px;
}
#footer .cvBox h2 span.en {
    color: #154a7c;
    font-size: 13vw;
}
#footer .cvBox h2 p {
    font-size: 1.7rem;
    margin-top: 10px;
}
#footer .cvBox .txt {
    margin: 30px 0;
}
#footer .cvBox .tel {
    justify-content: center;
    align-items: flex-start;
    column-gap: 15px;
    margin-bottom: 20px;
}
#footer .cvBox .tel img {
    width: 8%;
    padding-top: 3px;
}
#footer .cvBox .tel dl {
    line-height: 1;
}
#footer .cvBox .tel dl dt {
    font-size: 8vw;
    font-weight: 700;
    letter-spacing: 0.13em;
    margin: 0 0 8px;
}
#footer .cvBox .tel dl dd {
    font-size: 4vw;
}

#footer .ctsBox {
    padding: 50px 0 30px;
}
#footer .ctsBox .ftr-logo {
    margin-bottom: 30px;
}
#footer .ctsBox .address {
    font-size: 1.4rem;
    line-height: 1.6;
}
#footer .ctsBox ul {
    border-top: #718ba2 1px solid;
    border-bottom: #718ba2 1px solid;
    padding: 20px 0;
    margin: 30px 0;
}
#footer .ctsBox ul li + li {
    margin-top: 8px;
}
#footer .ctsBox ul li a {
    display: block;
    width: 94%;
    color: #fff;
    font-size: 4vw;
    line-height: 1.3;
    margin: 0 auto;
    position: relative;
}
#footer .ctsBox ul li a:after {
    content: "";
    display: block;
    width: 35px;
    height: 6px;
    border-right: 2px solid #FFF;
    border-bottom: 1px solid #FFF;
    position: absolute;
    top: calc(50% - 6px);
    right: 0;
    transform: skew(45deg);
    z-index: 20;
}
#footer .ctsBox .copyright {
    font-size: 3.5vw;
    text-align: center;
}

/*===========================================
    contents
============================================*/

/*--------------------------------------------
    TOPページ（#top）
--------------------------------------------*/
/*-- key --*/
#top-key {
    width: 100%;
    height: calc(100vh - 60px);
    position: relative;
}
#top-key .key-copy {
    position: absolute;
    top: 40%;
    left: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 10;
}
#top-key .key-copy dt {
    font-size: 7vw;
    line-height: 1;
    margin-bottom: 20px;
}
#top-key .key-copy dt span.bg-white {
    display: inline-block;
    background: #fff;
    padding: 10px 5px 7px 0;
    margin-bottom: 8px;
}
#top-key .key-copy dt span.txt-blue {
    color: #004a7c;
}
#top-key .key-copy dd {
    font-size: 4vw;
    font-weight: bold;
}
#top-key .key-copy dd span {
    display: inline-block;
    background: #fff;
    margin-bottom: 5px;
}
#top-key .key-img {
    width: 90%;
    height: 100vh;
    position: absolute;
    right: 0;
    bottom: 0;
}
#top-key .key-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#top-key .key-link {
    width: 75%;
    display: block;
    color: #fff;
    font-size: 4vw;
    font-weight: bold;
    background: linear-gradient(90deg, #077fd0, #39edd8 33%, #03f1b6 50%, #077fd0, #39edd8 163%, #03f1b6 200% );
    background-size: 200% auto;
    position: absolute;
    bottom: 5%;
    right: 0;
}
#top-key .key-link span {
    display: block;
    width: 100%;
    padding: 18px 7%;
    position: relative;
}
#top-key .key-link span:after {
    content: "";
    display: block;
    width: 30px;
    height: 6px;
    border-right: 2px solid #FFF;
    border-bottom: 1px solid #FFF;
    position: absolute;
    top: calc(50% - 6px);
    right: 6%;
    transform: skew(45deg);
    z-index: 20;
}

/*-- top-concept --*/
#top-concept {
    background: #004a7c;
    padding: 70px 0;
}
#top-concept .sec-inner {
    text-align: center;
    background: #fff;
    padding: 50px 6%;
}
#top-concept .ttlArea {
    font-weight: bold;
    margin-bottom: 35px;
}
#top-concept .ttlArea .sub {
    font-size: 1.7rem;
    line-height: 1.5;
}
#top-concept .ttlArea h2 {
    color: #004a7c;
    font-size: 7vw;
    line-height: 1.4;
    margin: 15px 0 10px;
}
#top-concept .ttlArea .en {
    color: #6791ae;
    font-size: 1.3rem;
    line-height: 1.3;
    letter-spacing: 0.2em;
}

/*-- top-service --*/
#top-service {
    padding: 70px 0;
}
#top-service h2 {
    line-height: 1;
    margin-top: -10px;
    margin-bottom: 40px;
}
#top-service h2 span.en {
    color: #154a7c;
    font-size: 13vw;
}
#top-service h2 p {
    font-size: 1.7rem;
    margin-top: 10px;
}
#top-service .cts {
    position: relative;
}
#top-service .cts + .cts {
    margin-top: 50px;
}
#top-service .cts img {
    object-fit: cover;
    object-position: left top;
    height: 250px;
}
#top-service .cts .txtArea {
    width: 90%;
    background: #fff;
    padding: 30px 8% 40px 0;
    margin: -100px 0 0;
    position: relative;
}
#top-service .cts .txtArea h3 {
    color: #154a7c;
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 10px;
}
#top-service .cts .txtArea p {
    line-height: 1.9;
    margin-bottom: 25px;
}

/*-- top-links --*/
#top-links {
    margin-bottom: 70px;
}
#top-links ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: 40px;
}
#top-links li {
    width: 100%;
}
#top-links li .imgArea {
    margin-top: 3em;
    position: relative;
}
#top-links li .imgArea .en {
    color: #154a7c;
    font-size: 15vw;
    line-height: 1;
    position: absolute;
    top: -0.8em;
}
#top-links li:nth-of-type(2) .imgArea .en {
    right: 0;
}
#top-links li .imgArea h2 {
    width: 100%;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    letter-spacing: 0.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
#top-links li .txtArea {
    background: #fff;
    padding: 30px 8% 40px;
}
#top-links li .txtArea p {
    line-height: 1.9;
    margin-bottom: 25px;
}

/*--------------------------------------------
    下層固定ページ共通
--------------------------------------------*/

/*--  下層ページh1 --*/
.under .page-ttlArea {
    background: url(../Images/under-h1-bg.jpg) no-repeat;
    background-size: cover;
    padding: 35px 0;
}
.under .page-ttlArea .sec-inner {
    width: 90%;
    margin: 0;
}
.under .page-ttlArea .txtArea {
    line-height: 1;
    background: rgb(255 255 255 / 60%);
    padding: 50px 8%;
    position: relative;
}
.under .page-ttlArea .txtArea:after {
    content: "";
    width: 1px;
    height: 80px;
    background: #154a7c;
    position: absolute;
    top: -20px;
    right: 20px;
    transform: rotate(-45deg);
}
.under .page-ttlArea .txtArea p {
    color: #004a7c;
    font-size: 8vw;
    font-weight: bold;
}
.under .page-ttlArea .txtArea h1 {
    font-size: 1.8rem;
    margin-top: 12px;
}

/*-- breadcrumbs（ぱんくず） --*/
.under #breadcrumbs {
    display: none;
}

/*--  下層ページh2 --*/
.under .h2-pat-01 {
    line-height: 1;
    margin-bottom: 40px;
}
.under .h2-pat-01 p.num {
    display: inline-block;
    color: #004a7c;
    font-size: 17vw;
    font-weight: bold;
    position: relative;
}
.under .h2-pat-01 p.num:after {
    content: '';
    width: 40px;
    height: 1px;
    background: #004a7c;
    position: absolute;
    top: 50%;
    left: 1.5em;
    transform: rotate(120deg);
}
.under .h2-pat-01 h2 {
    font-size: 8vw;
    font-weight: 600;
    line-height: 1.4;
    padding-top: 10px;
}

.under .h2-pat-02 {
    display: flex;
    align-items: flex-start;
    column-gap: 3%;
    line-height: 1;
    margin-bottom: 20px;
}
.under .h2-pat-02 .num {
    flex-shrink: 0;
    color: #004a7c;
    font-size: 10vw;
    font-weight: bold;
}
.under .h2-pat-02 span {
    color: #004a7c;
    padding-top: 5px;
}
.under .h2-pat-02 h2 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.4;
}

.under .h2-pat-03 {
    margin-bottom: 40px;
}
.under .h2-pat-03 p.en {
    color: #004a7c;
    font-size: 10vw;
    font-weight: bold;
    line-height: 1;
}
.under .h2-pat-03 h2 {
    font-size: 1.7rem;
    margin-top: 12px;
}

/*--------------------------------------------
    会社概要
--------------------------------------------*/
#about h3 {
    margin-bottom: 20px;
}

#about #sec01 .ctsBox p {
    line-height: 1.8;
}
#about #sec01 .ctsBox .name {
    font-size: 1.7rem;
    font-weight: bold;
}

#about #sec02 {
    background: #f4f4f4;
}
#about #sec02 .ctsBox-inner {
    flex-wrap: wrap;
    row-gap: 40px;
}
#about #sec02 .ctsBox-inner h4 {
    font-size: 1.9rem;
    margin-bottom: 10px;
    position: relative;
}
#about #sec02 .ctsBox-inner h4:before {
    content: "";
    width: 14px;
    height: 17px;
    vertical-align: text-bottom;
    background: url(../Images/icon-check-blue.png) no-repeat;
    background-size: contain;
    display: inline-block;
    margin-right: 13px;
}
#about #sec02 .ctsBox-inner .leftBox,
#about #sec02 .ctsBox-inner .rightBox {
    width: 100%;
}
#about #sec02 .ctsBox-inner .leftBox ul {
    flex-wrap: wrap;
    row-gap: 15px;
}
#about #sec02 .ctsBox-inner .leftBox li {
    display: flex;
    column-gap: 5%;
    width: 100%;
    background: #fff;
    padding: 25px 8%;
}
#about #sec02 .ctsBox-inner .leftBox li .num {
    flex-shrink: 0;
    color: #154a7c;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
}
#about #sec02 .ctsBox-inner .leftBox li dt {
    color: #154a7c;
    font-size: 1.7rem;
    margin-bottom: 5px;
}
#about #sec02 .ctsBox-inner .rightBox .rightBox-top {
    margin-bottom: 40px;
}
#about #sec02 .ctsBox-inner .rightBox .rightBox-top p {
    line-height: 1.8;
}
#about #sec02 .ctsBox-inner .rightBox .rightBox-btm li + li {
    margin-top: 10px;
}

#about #sec03 .service {
    border: none;
    padding-bottom: 0;
}
#about #sec03 .service dl {
    margin-top: 10px;
}
#about #sec03 .service dl + dl {
    margin-top: 20px;
}
#about #sec03 .service dl dt {
    font-size: 1.7rem;
    margin-bottom: 5px;
}
#about #sec03 .note {
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 20px;
}
	
.ctsBox{
	margin-bottom: 60px;
}
	
.video {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*--------------------------------------------
    サービス紹介
--------------------------------------------*/
/*-- 共通 --*/
.service .ctsBox.flex {
    flex-wrap: wrap;
    row-gap: 40px;
}
.service .ctsBox p {
    line-height: 1.8;
}
.service .ctsBox p + p {
    margin-top: 15px;
}
.service .ctsBox .ttl-liner {
    margin-bottom: 20px;
}
.service .ctsBox .note {
    margin-bottom: 30px;
}
.service .navBox-top {
    padding: 25px 0 40px;
}
.service .navBox-btm {
    padding: 35px 0 50px;
}
.service .navBox .sec-inner {
    flex-wrap: wrap;
    row-gap: 10px;
}
.service .navBox li {
    width: 100%;
}
.service .navBox li p.num{
    color: #004a7c;
    font-size: 12vw;
    font-weight: bold;
    line-height: 1;
    padding-left: 5%;
    margin-bottom: -25px;
}
.service .navBox li .btn-white {
    width: 95%;
}
.service #sec01,
.service #sec03 {
    background: #f4f4f4;
}

/*-- 人事労務アウトソーシング --*/
#service-os .list-num li + li {
    margin-top: 15px;
}
#service-os #sec01 .ctsBox + .ctsBox {
    margin-top: 60px;
}
#service-os #sec01 .ctsBox-02 ul {
    flex-wrap: wrap;
    row-gap: 15px;
}
#service-os #sec01 .ctsBox-02 li {
    display: flex;
    align-items: center;
    column-gap: 8%;
    width: 100%;
    background: #fff;
    padding: 25px 8%;
}
#service-os #sec01 .ctsBox-02 li img {
    object-fit: contain;
    width: 20%;
    height: 60px;
}
#service-os #sec01 .ctsBox-04 .flow p {
    color: #154a7c;
    text-align: center;
    font-weight: bold;
}
#service-os #sec02 .ctsBox + .ctsBox {
    margin-top: 60px;
}
#service-os #sec03 .txtArea .exam {
    background: #fff;
    padding: 25px 8%;
    margin-top: 30px;
}
#service-os #sec03 .txtArea .exam h4 {
    color: #004a7c;
    font-size: 1.7rem;
    margin-bottom: 8px;
}

/*-- ホームページ制作 --*/
#service-hp #sec01 .ctsBox + .ctsBox {
    margin-top: 60px;
}
#service-hp #sec01 .ctsBox-02 .ctsBox-inner {
    flex-wrap: wrap;
    row-gap: 15px;
}
#service-hp #sec01 .ctsBox-02 .ctsBox-inner .cts-left,
#service-hp #sec01 .ctsBox-02 .ctsBox-inner .cts-right  {
    width: 100%;
    background: #fff;
}
#service-hp #sec01 .ctsBox-02 h4 {
    color: #fff;
    font-size: 1.7rem;
    text-align: center;
    padding: 12px 5% 10px;
}
#service-hp #sec01 .ctsBox-02 .cts-left h4 {
    background: #004a7c;
}
#service-hp #sec01 .ctsBox-02 .cts-right h4 {
    background: #18c395;
}
#service-hp #sec01 .ctsBox-02 .whiteArea {
    padding: 25px 10% 30px;
}
#service-hp #sec01 .ctsBox-02 .whiteArea .list-check li + li {
    margin-top: 10px;
}
#service-hp #sec01 .ctsBox-02 .cts-right .whiteArea .list-check li:before {
    background: url(../Images/icon-check-green.png) no-repeat;
}
#service-hp #sec01 .ctsBox-02 .whiteArea p {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4;
    margin-top: 15px;
}
#service-hp #sec01 .ctsBox-02 .cts-left .whiteArea p {
    color: #004a7c;
}
#service-hp #sec01 .ctsBox-02 .cts-right .whiteArea p {
    color: #18c395;
}
#service-hp #sec02 .ctsBox {
}
#service-hp #sec02 .ctsBox li {
    width: 100%;
    background: #e8f1f5;
    padding: 35px 10% 40px;
}
#service-hp #sec02 .ctsBox li dl dt {
    color: #004a7c;
    font-size: 2rem;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 12px;
}
#service-hp #sec02 .ctsBox li dl dd {
    line-height: 1.8;
}
#service-hp #sec02 .ctsBox li img {
    margin: 20px 0 25px;
}
#service-hp #sec02 .ctsBox li p {
    color: #004a7c;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
    padding-left: 15%;
    position: relative;
}
#service-hp #sec02 .ctsBox li p:before {
    content: '';
    display: block;
    width: 10%;
    height: 1px;
    background: #154a7c;
    position: absolute;
    top: 0.48em;
    left: 0;
}
#service-hp #sec03 .ctsBox {
    row-gap: 30px;
}
#service-hp #sec03 .ctsBox dl {
    width: 100%;
    font-weight: bold;
    text-align: center;
}
#service-hp #sec03 .ctsBox dl dt {
    color: #fff;
    font-size: 2rem;
    background: #004a7c;
    padding: 10px;
}
#service-hp #sec03 .ctsBox dl dd {
    color: #004a7c;
    font-size: 3.8rem;
    line-height: 1;
    background: #fff;
    padding: 30px 5% 35px;
}
#service-hp #sec03 .ctsBox dl dd span {
    font-size: 7rem;
    margin: 0 5px 0 7px;
}
	
.option {
	flex-direction: column;
}

.option li{
	width: 100%;
}
	
.option .op01 {	
	margin-top: 80px;
	margin-right: 0px;
	margin-bottom: 80px;
}
	
.option .op02 {		
	margin-bottom: 80px;
}
	
.option li img{
	width: 100%;	
}
	
.under .h2-pat-01 p.num.en_new{
	font-size: 8vw;
}
	
.en_new:after {
	left: unset!important;
	right: -1em;	
}
	
.vid_main {
	width: 100%;
}

/*--------------------------------------------
    事例紹介
--------------------------------------------*/
#case #sec01 {
    padding: 70px 0 0;
    margin-bottom: 70px;
}
#case #sec01 .ctsBox + .ctsBox {
    margin-top: 60px;
}
#case #sec01 .ctsBox .h2-pat-02 {
    margin-bottom: 10px;
}
#case #sec01 .ctsBox .ctsBox-inner {
    background: #fff;
    padding: 35px 8% 40px 0;
}
#case #sec01 .ctsBox h3 {
    margin-bottom: 20px;
}
#case #sec01 .ctsBox dl dt {
    line-height: 1.4;
    background: #f4f4f4;
    padding: 10px 5%;
    margin-bottom: 15px;
}

/*--------------------------------------------
    よくあるご質問
--------------------------------------------*/
#faq .faq-cts {
    width: 100%;
}
#faq .faq-cts li + li {
    margin-top: 20px;
}
#faq .faq-cts li dl dt {
    display: flex;
    column-gap: 5%;
    line-height: 1.6;
    background: #f4f4f4;
    padding: 25px 7% 40px 7%;
    position: relative;
    cursor: pointer;
}
#faq .faq-cts li dl dt:after {
    content: "\f107";
    color: #154a7c;
    font-family: "Font Awesome 5 Free";
    font-size: 1.8rem;
    font-weight: 600;
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#faq .faq-cts li dl dt.open:after {
    content: "\f106";
}
#faq .faq-cts li dl dd {
    display: flex;
    column-gap: 5%;
    line-height: 1.6;
    padding: 20px 7%;
}
#faq .faq-cts li dl span {
    color: #154a7c;
    font-size: 7vw;
    font-weight: bold;
    line-height: 1;
}
#faq .faq-cts li dl span.icon-a {
    padding-top: 5px;
}

/*--------------------------------------------
    SDGsの取り組みについて
--------------------------------------------*/
#sdgs #sec01 .sec-inner.flex {
    flex-wrap: wrap;
    row-gap: 50px;
}
#sdgs #sec01 .ctsBox-inner-01 {
    margin-bottom: 50px;
}
#sdgs #sec01 .ctsBox-inner .h2-pat-02 {
    margin-bottom: 20px;
}
#sdgs #sec01 .ctsBox-inner .txtArea p {
    line-height: 1.8;
}

/*--------------------------------------------
    プライバシーポリシー
--------------------------------------------*/
#privacy #sec01 .ctsBox + .ctsBox {
    margin-top: 60px;
}
#privacy #sec01 .ctsBox .ctsBox-inner {
    margin-top: 40px;
}
#privacy #sec01 .ctsBox .ctsBox-inner .ttl-liner {
    margin-bottom: 15px;
}
#privacy #sec01 .ctsBox .list-num li + li {
    margin-top: 10px;
}
#privacy #sec01 .ctsBox .madoguchi {
    margin: 20px 0;
}
#privacy #sec01 .ctsBox .madoguchi dl {
    display: flex;
    align-items: flex-start;
}
#privacy #sec01 .ctsBox .madoguchi dl + dl {
    margin-top: 10px;
}
#privacy #sec01 .ctsBox .madoguchi dl dt {
    min-width: 30%;
    color: #004a7c;
    margin-right: 5%;
}
#privacy #sec01 .ctsBox .madoguchi dl dd {
    font-size: 1.4rem;
}

/*--------------------------------------------
    お問い合わせ（#contact）
--------------------------------------------*/
#contact #sec01 {
    padding: 70px 0 0;
    margin-bottom: 70px;
}
#contact #sec01 .noteBox {
    margin-bottom: 40px;
}
#contact #sec01 .noteBox .noteBox-top {
    flex-wrap: wrap;
    row-gap: 15px;
    margin-bottom: 30px;
}
#contact #sec01 .noteBox .noteBox-top p {
    line-height: 1.8;
}
#contact #sec01 .noteBox .noteBox-top .tel {
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    flex-shrink: 0;
    column-gap: 5%;
    background: #fff;
    padding: 30px 5% 28px 0;
}
#contact #sec01 .noteBox .noteBox-top .tel img {
    width: 8%;
}
#contact #sec01 .noteBox .noteBox-top .tel dl {
    line-height: 1;
}
#contact #sec01 .noteBox .noteBox-top .tel dl dt {
    font-size: 8vw;
    font-weight: 700;
    letter-spacing: 0.13em;
    margin: -5px 0 8px;
}
#contact #sec01 .noteBox .noteBox-btm {
    font-weight: bold;
    line-height: 1.8;
}
#contact #sec01 .noteBox .noteBox-btm a {
    color: #18c395;
    text-decoration: underline;
}

/*--  フォーム部分 --*/
form .bgArea {
    background: #fff;
    padding: 15px 8% 40px 0;
}
form dl {
    border-bottom: #edecec 1px solid;
    padding: 2rem 0;
}
form dl.last {
    border-bottom: 0;
}
form dt {
    width: 100%;
    letter-spacing: 0.15em;
    padding-left: 6rem;
    margin-bottom: 10px;
    position: relative;
}
form dt span.tag {
    color: #fff;
    font-size: 1.3rem;
    background: #154a7c;
    padding: 2px 8px;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
form dt span.tag-must {
    background: #18c395;
}
form dd {
    width: 100%;
    font-size: 1.5rem;
}
form dd input,
form dd textarea {
    width: 100%;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.13em;
    line-height: 1.5;
    border: none;
    background: #f4f4f4;
    padding: 8px 12px;
}
form .tel dd {
    justify-content: space-between;
}
form .tel dd input {
    width: 30%;
}
form .btn {
    width: 90%;
    display: flex;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    border: #154a7c 1px solid;
    margin: 20px 0 0;
    position: relative;
}
form .btn:after {
    content: "";
    display: block;
    width: 12%;
    height: 5px;
    border-right: 2px solid #154a7c;
    border-bottom: 1px solid #154a7c;
    position: absolute;
    top: calc(50% - 5px);
    right: -9%;
    transform: skew(45deg);
    z-index: 20;
}
form .btn input {
    width: 100%;
    height: 100%;
    color: #154a7c;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    background: none;
    border: none;
    padding: 12px 0;
}

/*--  フォーム送信完了共通 --*/
#thanks #sec01 {
    padding: 70px 0 0;
    margin-bottom: 70px;
}
#thanks #sec01 .sec-inner {
    background: #fff;
    padding: 50px 8% 60px 0;
}

#thanks #sec01 img {
    object-fit: contain;
    height: 200px;
    margin-bottom: 40px;
}
#thanks #sec01 .txtArea p {
    line-height: 1.8;
}
#thanks #sec01 .btn-white {
    margin: 40px 0 0;
}

/*--------------------------------------------
    404ページ
--------------------------------------------*/
#page404 #sec01 {
    text-align: center;
}
#page404 #sec01 img {
    object-fit: contain;
    height: 200px;
    margin-bottom: 30px;
}
#page404 #sec01 .btn-white {
    margin: 40px 0 0;
}


}