@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: 66px;
}
.for-pc {
    display:none !important;
}

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

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

/*--  ボタン --*/
.btn-cv {
    display: flex;
    width: 100%;
    color: #fff;
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
    background: #295d72;
    padding: 15px 8% 15px 5%;
    position: relative;
}
.btn-cv:after {
    content: "";
    display: block;
    width: 25px;
    height: 5px;
    border-right: 2px solid #FFF;
    border-bottom: 1px solid #FFF;
    position: absolute;
    top: calc(50% - 5px);
    right: 30px;
    transform: skew(45deg);
    z-index: 20;
}
.btn-cmn {
    width: 100%;
    display: inline-block;
    color: #fff;
    font-size: 1.7rem;
    position: relative;
    font-weight: bold;
    text-align: left;
}
.btn-cmn span {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px 0 20px 10px;
}
.btn-cmn span:after {
    content: "";
    display: block;
    width: 25px;
    height: 5px;
    border-right: 2px solid #FFF;
    border-bottom: 1px solid #FFF;
    position: absolute;
    top: calc(50% - 5px);
    right: 10px;
    transform: skew(45deg);
}
.btn-cmn::before,
.btn-cmn::after{
    content: '';
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    transition: all 0.3s ease-in-out;
}

/*--  #float-cta --*/
#float-cta {
    width: 100%;
    position: fixed;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 88;
    transition: 0.3s;
}
#float-cta.active {
    opacity: 1;
    visibility: visible;
}
#float-cta.is-hidden {
    opacity: 0;
    visibility: hidden;
}
#float-cta li {
    width: calc((100% - 2px)/2);
}
#float-cta li a {
    width: 100%;
    color: #fff;
    font-size: 4vw;
    font-weight: 600;
    text-align: center;
    background: #adae53;
    padding: 20px 0;
}
#float-cta li a p {
    display: inline-block;
    padding-left: 7.5vw;
    position: relative;
}
#float-cta li a p:before {
    font-size: 5vw;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
#float-cta li:nth-child(1) a p:before {
    content: "\f3cd";
}
#float-cta li:nth-child(2) a p:before {
    content: "\f0e0";
}

/*--  見出し --*/
h2 {
    color: #fff;
    font-size: 7vw;
    line-height: 1;
    position: relative;
}
.h2Area-pat01 {
    text-align: center;
    padding: 13px 0;
    margin-bottom: 35px;
}
.h2Area-pat01 h2 {
    display: inline-block;
    padding: 30px 0;
}
.h2Area-pat01 h2 span {
    color: #adae53;
    font-family: 'Krona One', "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: 4vw;
    display: block;
    margin-top: 15px;
}
.h2Area-pat01 h2:before,
.h2Area-pat01 h2:after {
    content: '';
    width: 30px;
    height: 1px;
    background: #fff;
    position: absolute;
    transform: rotate(-60deg);
}
.h2Area-pat01 h2:before {
    top: 0;
    left: 50%;
}
.h2Area-pat01 h2:after {
    bottom: 0;
    left: calc(50% - 40px);
}

.h2Area-pat02 {
    margin-bottom: 20px;
    position: relative;
    z-index: 10;
}
.h2Area-pat02 h2 {
    font-size: 6.5vw;
    text-shadow: 2px 2px 5px rgb(44 57 75 / 70%);
    padding: 1.2em 0 40px 5%;
    position: relative;
}
.h2Area-pat02 h2:after {
    content: "";
    width: 1px;
    height: 30px;
    background: #adae53;
    position: absolute;
    bottom: 0;
    left: 1.5em;
}
.h2Area-pat02 h2 span.en {
    color: #adae53;
    font-size: 13vw;
    line-height: 1;
    letter-spacing: 0.01em;
    text-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.h2Area-pat02.no-num {
    overflow: hidden;
    margin-bottom: 40px;
}
.h2Area-pat02.no-num h2 {
    color: #adae53;
    padding: 5px 25px 5px 0;
}
.h2Area-pat02.no-num h2:after {
    content: "";
    width: 99em;
    height: 1px;
    border-top: #adae53 1px solid;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.h2Area-pat03 {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
    position: relative;
}
.h2Area-pat03 .num {
    color: #adae53;
    font-size: 5rem;
    line-height: 1!important;
    position: relative;
}
.h2Area-pat03 .num:after {
    content: '';
    width: 90px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 1em;
    right: -1.2em;
    transform: rotate(-56deg);
}
.h2Area-pat03 h2 p {
    font-size: 4rem;
    line-height: 1!important;
    letter-spacing: 0.3em;
    padding-left: 2.7em;
}
.h2Area-pat03 h2 span {
    width: 100%;
    display: block;
    color: #adae53;
    font-size: 4.8vw;
    line-height: 1.5;
    letter-spacing: 0.15em;
    margin-top: 15px;
}

.y-label {
    font-size: 2rem;
    padding-left: 45px;
    position: relative;
}
.y-label:before {
    content: '';
    display: block;
    width: 30px;
    height: 10px;
    background: #adae53;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

/*--  お問い合わせ --*/
#cvArea {
    background: url(../Images/cvArea-bg.jpg) center no-repeat;
    background-size: cover;
}
#cvArea .sec-inner {
    flex-direction: column;
    color: #333;
    background: rgb(255 255 255 / 90%);
    padding: 50px 5%;
}
#cvArea h2 {
    color: #2c394b;
}
#cvArea h2:before,
#cvArea h2:after {
    background: #2c394b;
}
#cvArea .ctsBox {
    font-weight: bold;
    text-align: center;
}
#cvArea .ctsBox .ctsBox-top {
    margin-bottom: 30px;
}
#cvArea .ctsBox .ctsBox-top dt {
    color: #adae53;
    font-size: 4vw;
    letter-spacing: 0.2em;
    border: #adae53 1px solid;
    padding: 8px 5%;
    margin-bottom: 15px;
}
#cvArea .ctsBox .ctsBox-btm {
    flex-direction: column;
    row-gap: 20px;
}
#cvArea .ctsBox .ctsBox-btm .tel dt {
    font-size: 6.5vw;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.12em;
    position: relative;
}
#cvArea .ctsBox .ctsBox-btm .tel dd {
    font-size: 4vw;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
    position: relative;
    padding: 0 0 0 25px;
    margin-bottom: 8px;
}
#cvArea .ctsBox .ctsBox-btm .tel dd:before {
    content: '';
    display: inline-block;
    width: 21px;
    height: 21px;
    background: url(../Images/icon-tel.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

/*--  作図例紹介 --*/
ul.samples-list {
    flex-wrap: wrap;
    align-items: stretch;
    row-gap: 15px;
}
ul.samples-list li {
    width: 48%;
}
ul.samples-list li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    border: #fff 1px solid;
    padding: 15px 5% 45px;
    position: relative;
}
ul.samples-list li a .cate {
    display: inline-block;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    background: #adae53;
    padding: 2px 5px 1px;
    position: absolute;
    top: 30px;
    left: -5px;
    z-index: 10;
}
ul.samples-list li a .imgArea {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
ul.samples-list li a .imgArea img {
    width: 100%;
}
ul.samples-list li a .ttl {
    text-align: center;
    line-height: 1.4;
}
ul.samples-list li a span:not(.orderStopMark) {
    width: 100%;
    color: #adae53;
    text-align: center;
    line-height: 1;
    letter-spacing: 0.08em;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
ul.samples-list li a span:not(.orderStopMark):before {
    display: inline-block;
    content: "\f00e";
    font-size: 4vw;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    margin-right: 3px;
}

/*--  modal --*/
.remodal-overlay {
    background: rgb(44 57 75 / 90%);
}
.remodal {
    padding: 0 5%;
}
.remodal .ttlArea {
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.remodal .ttlArea .cate {
    font-size: 1.5rem;
    line-height: 1;
    background: #adae53;
    padding: 7px;
}
.remodal .ttlArea .remodal-close {
    width: 30px;
    height: 30px;
    color: #fff;
    font-size: 3rem;
    font-weight: normal;
    line-height: 1;
    background: #adae53;
    border: 0;
}
.remodal img {
    object-fit: cover;
    max-height: 80vh;
}

/*--  table --*/
.table-cmn {
    margin-top: -30px;
}
.table-cmn tr {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: 100%;
    border-bottom: #fff 1px solid;
    padding: 30px 0;
}
.table-cmn th {
    width: 100%;
    font-size: 1.7rem;
    text-align: left;
    line-height: 1.5;
    padding-left: 16px;
    border-left: #adae53 3px solid;
}
.table-cmn td {
    width: 100%;
}
.table-cmn td a {
    color: #adae53;
    text-decoration: underline;
}

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

/*-- header --*/
#header {
    width: 100%;
    height: 66px;
    background: rgb(44 57 75 / 90%);
    box-sizing: border-box;
    position: fixed;
    top: 0;
    z-index: 99;
    padding: 15px 3%;
}
#header .hdr-logo {
    width: 210px;
}
#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-inner span {
    display: block;
    width: 80%;
    height: 2px;
    margin: auto;
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: calc((100% - 0px)/2);
    border-radius: 3px;
    transition: .2s;
}
#header .menu-button-inner span:nth-child(1) {
    transform: translateY(-8px);
}
#header .menu-button-inner span:nth-child(2) {
}
#header .menu-button-inner span:nth-child(3) {
    transform: translateY(8px);
}

#header #menu-button.open .menu-button-inner span:nth-child(1) {
    transform: rotate(45deg);
}
#header #menu-button.open .menu-button-inner span:nth-child(2) {
    opacity: 0;
}
#header #menu-button.open .menu-button-inner span:nth-child(3) {
    transform: rotate(-45deg);
}

#header .gnav-sp-wrap {
    display: none;
    width: 100vw;
    height: 100vh;
    background: #2c394b;
    padding: 20% 10%;
    overflow: scroll;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
#header .gnav-sp li a {
    display: block;
    color: #fff;
    font-weight: bold;
    border-bottom: #fff 1px solid;
    padding: 20px 0 20px 45px;
    position: relative;
}
#header .gnav-sp li:last-child a {
    border-bottom: none;
}
#header .gnav-sp li a:before {
    content: '';
    width: 25px;
    height: 2px;
    background: #adae53;
    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: 35px;
}

/*-- footer --*/
#footer {
    background: #2c394b;
    padding: 40px 0 20px;
}
#footer .sec-inner {
    flex-direction: column;
    align-items: flex-start;
}
#footer .leftArea .ftr-logo {
    width: 70%;
    margin-bottom: 20px;
}
#footer .leftArea p {
    font-size: 1.5rem;
    margin-top: 10px;
}
#footer .rightArea-top {
    display: none;
}
#footer .ftr-copy {
    font-size: 1.3rem;
    line-height: 1.4;
    letter-spacing: 0.15em;
    margin-top: 40px;
}

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

/*--------------------------------------------
    TOPページ（#top）
--------------------------------------------*/

/*-- key --*/
#top #key {
    width: 100%;
    min-height: calc(100vh - 66px);
    min-height: calc((var(--vh, 1vh) * 100) - 66px);
    background: url(../Images/keyimg_pc.jpg) no-repeat;
    background-size: cover;
    position: relative;
}
#top #key .sec-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
#top #key .maincopy {
    margin-bottom: 30px;
}
#top #key .maincopy p {
    color: #cdc635;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 10px;
}
#top #key .maincopy h1 {
    font-size: 9vw;
    line-height: 1.5;
    letter-spacing: 0.12em;
}
#top #key .maincopy h1 span {
    color: #cdc635;
    font-size: 12vw;
    line-height: 1.5;
}
#top #key .subcopy {
    font-size: 1.5rem;
}

/*-- top-about --*/
#top-about .imgArea {
    width: 70%;
    position: absolute;
    top: 100px;
}
#top-about .imgArea img {
    object-fit: cover;
    height: 80vh;
}
#top-about .imgArea:after {
    content: '';
    display: block;
    width: 45px;
    height: 50%;
    background: #adae53;
    position: absolute;
    top: -25%;
    left: 8%;
}
#top-about .topArea {
    background: url(../Images/top-reasons-bg.jpg) center no-repeat;
    background-size: cover;
    padding-top: 60px;
}
#top-about .topArea .sec-inner {
    width: 100%;
    align-items: flex-end;
    flex-direction: column;
}
#top-about .topArea h2 {
    font-size: 8.5vw;
    writing-mode: vertical-rl;
    position: relative;
    margin: 0 5% 50px 0;
}
#top-about .topArea h2:after {
    content: '';
    width: 1px;
    height: 100px;
    background: #fff;
    position: absolute;
    bottom: -120px;
    left: 26%;
    z-index: 20;
}
#top-about .topArea h2 span {
    display: block;
    color: #adae53;
    font-size: 4.5vw;
    margin: 5px 0 0 10px;
}
#top-about .topArea .txtArea {
    width: 88%;
    background: rgb(44 57 75 / 90%);
    z-index: 10;
    padding: 40px 8%;
}
#top-about .topArea .txtArea h3 {
    font-size: 6.5vw;
}
#top-about .topArea .txtArea p {
    line-height: 2.2;
    margin: 20px 0 30px;
}
#top-about .btmArea {
    background: #295d72;
}
#top-about .btmArea h3 {
    text-align: center;
    position: relative;
}
#top-about .btmArea h3 p {
    font-size: 6.5vw;
    position: relative;
    z-index: 10;
}
#top-about .btmArea h3 span {
    width: 100%;
    color: #2b4f62;
    font-size: 13vw;
    line-height: 1;
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#top-about .btmArea .box {
    background: url(../Images/bg-ruledline.png);
    padding: 30px 8%;
}
#top-about .btmArea .box li {
    padding-left: 0.6em;
    text-indent: -0.6em;
}
#top-about .btmArea .box li + li {
    margin-top: 0.5em;
}
#top-about .btmArea .box-01 {
    margin: 20px 0;
}
#top-about .btmArea .box-01 dt {
    margin-bottom: 20px;
}
#top-about .btmArea .flex {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 20px;
}
#top-about .btmArea .box-container dt {
    margin-bottom: 10px;
}
#top-about .btmArea .box-02 img {
}

/*-- top-reason --*/
#top-reason {
    background: url(../Images/top-reasons-bg-sp.jpg) center no-repeat;
    background-size: cover;
}
#top-reason .h2Area-pat01 {
    margin-bottom: 40px;
}
#top-reason ul {
    flex-direction: column;
    row-gap: 5rem;
    padding-top: 2.5rem;
}
#top-reason ul li {
    width: 100%;
}
#top-reason ul li a {
    display: block;
    width: 100%;
    background: #adae53;
    position: relative;
}
#top-reason ul li a:hover {
    background: #295d72;
}
#top-reason ul li a p.num {
    color: #adae53;
    font-size: 5.0rem;
    line-height: 1;
    position: absolute;
    top: -2.5rem;
    left: 5px;
    z-index: 10;
}
#top-reason ul li a .imgArea {
    width: 100%;
}
#top-reason ul li a .imgArea img {
    object-fit: cover;
    width: 100%;
    height: 150px;
}
#top-reason ul li a .txtArea {
    color: #fff;
    text-align: center;
    padding: 35px 8%;
}
#top-reason ul li a .txtArea h3 {
    font-size: 6.5vw;
    line-height: 1;
    letter-spacing: 0.25em;
    padding-bottom: 20px;
    margin-bottom: 28px;
    position: relative;
}
#top-reason ul li a .txtArea h3:after {
    content: '';
    width: 50px;
    height: 1px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
#top-reason .btnArea {
    text-align: center;
    margin-top: 40px;
}

/*-- top-parallax --*/
#top-parallax {
    min-height: 30vh;
    background-image: url(../Images/top-para-sp.jpg);
    background-repeat: no-repeat;
    background-size: auto 100vh;
}

/*-- top-samples --*/
#top-samples {
    background: #2c394b;
}
#top-samples .sec-inner {
    flex-direction: column;
}
#top-samples .btnArea {
    margin-top: 30px;
}

/*-- top-links --*/
#top-links {
    background: url(../Images/top-links-bg-l.jpg) center no-repeat;
    background-size: cover;
}
#top-links .sec-inner {
    flex-direction: column;
    row-gap: 20px;
}
#top-links a {
    display: block;
    width: 100%;
    background: url(../Images/top-links-bg-s.png) rgb(41 93 114 / 85%);
    padding: 40px 10%;
}
#top-links .h2Area-pat01 {
    padding: 0;
    margin-bottom: 0;
    position: relative;
}
#top-links .h2Area-pat01:after {
    content: "";
    display: block;
    width: 25px;
    height: 5px;
    border-right: 2px solid #FFF;
    border-bottom: 1px solid #FFF;
    position: absolute;
    top: calc(50% - 5px);
    right: 0;
    transform: skew(45deg);
}
#top-links .h2Area-pat01 h2 {
    display: block;
    text-align: left;
    padding: 0;
}
#top-links .h2Area-pat01 h2:before,
#top-links .h2Area-pat01 h2:after {
    content: none;
}

/*-- top-topics --*/
#top-topics {
    background: #2c394b;
    padding: 65px 0;
}
#top-topics .sec-inner {
    flex-direction: column;
}
#top-topics .ctsBox {
    margin: -30px 0;
}
#top-topics .cts {
    align-items: flex-start;
    flex-direction: column;
    border-bottom: #fff 1px solid;
    padding: 30px 0;
}
#top-topics .cts:last-child {
    border-bottom: none;
}
#top-topics .cts .date {
    color: #adae53;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
#top-topics .cts dl dt {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 15px;
}
#top-topics .cts dl dd a {
    color: #adae53;
    font-weight: bold;
    text-decoration: underline;
}

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

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

/*--  下層ページh1 --*/
.under .page-ttlArea {
    position: relative;
}
.under .page-ttlArea .hdr-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.under .page-ttlArea .txtArea {
    background: url(../Images/under-h1-bg.jpg) no-repeat;
    background-size: cover;
    position: relative;
    padding: 33px 5% 50px;
    margin: -100px 10% 0 0;
    z-index: 10;
}
.under .page-ttlArea .txtArea h1 {
    font-size: 7vw;
    line-height: 1.4;
}
.under .page-ttlArea .txtArea h1 span {
    font-size: 8vw;
}
.under .page-ttlArea .txtArea p {
    color: #adae53;
    font-size: 4vw;
    padding-bottom: 20px;
    margin-top: 5px;
    position: relative;
}
.under .page-ttlArea .txtArea p:after {
    content: '';
    width: 50px;
    height: 1px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
}

/*--------------------------------------------
    エムテックについて（#about）
--------------------------------------------*/
#about #sec01:after {
    content: '';
    display: block;
    width: 80%;
    height: 400px;
    background: #adae53;
    position: absolute;
    top: 300px;
    right: 0;
    z-index: -2;
}
#about #sec01 .sec01-cts {
    position: relative;
    flex-direction: column;
}
#about #sec01 .sec01-cts .imgArea {
    width: 100%;
    position: relative;
    z-index: -1;
}
#about #sec01 .sec01-cts .imgArea img {
    width: 90%;
    object-fit: cover;
    object-position: 0 -20px;
    height: 400px;
}
#about #sec01 .sec01-cts .imgArea p {
    text-align: right;
}
#about #sec01 .sec01-cts .imgArea p span {
    display: block;
    font-size: 2.0rem;
    font-weight: bold;
}
#about #sec01 .sec01-cts .txtArea {
    margin-top: 70px;
    position: relative;
}
#about #sec01 .sec01-cts .txtArea .en {
    color: #adae53;
    font-size: 12vw;
    line-height: 1;
    writing-mode: vertical-rl;
    position: absolute;
    left: -5px;
    top: calc(-7em - 38px);
    z-index: -1;
}
#about #sec01 .sec01-cts .txtArea h3 {
    font-size: 5.8vw;
    margin-bottom: 30px;
}
#about #sec01 .sec01-cts .txtArea p {
    line-height: 2;
}
#about #sec02 {
    background: #295d72;
}
#about #sec02 dl dt {
    margin-bottom: 5px;
}
#about #sec02 dl dd + dt {
    margin-top: 25px;
}
#about #sec03 h3 {
    margin-bottom: 30px;
}
#about #sec03 .top-cts {
    margin-bottom: 70px;
}
#about #sec03 iframe {
    width: 100%;
    height: 200px;
    margin-top: 20px;
}

/*--------------------------------------------
    選ばれる理由（#reason）
--------------------------------------------*/
#reason p {
    line-height: 2;
}

#reason #sec01 .topArea {
    margin-bottom: 30px;
}
#reason #sec01 .btmArea {
    flex-direction: column;
    row-gap: 20px;
}
#reason #sec01 .btmArea li {
    width: 100%;
    border: #fff 1px solid;
    padding: 30px 8% 30px;
    position: relative;
}
#reason #sec01 .btmArea .tag {
    width: 50%;
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    letter-spacing: 0.08em;
    background: #adae53;
    padding: 5px 0;
    position: absolute;
    top: 20%;
    right: -5px;
}
#reason #sec01 .btmArea .tag span {
    font-size: 2.2rem;
}
#reason #sec01 .btmArea img {
    width: 30%;
    margin: 0;
}
#reason #sec01 .btmArea .txtArea h3 {
    font-size: 6.5vw;
    margin: 15px 0 5px;
}
#reason #sec01 .btmArea .txtArea p {
    line-height: 1.75;
}

#reason #sec02 {
    background: #295d72;
}
#reason #sec02 .topArea {
    flex-flow: wrap-reverse column-reverse;
    row-gap: 30px;
    margin-bottom: 30px;
}
#reason #sec02 .topArea .figureArea {
    width: 100%;
    text-align: center;
    border: #fff 1px solid;
    padding: 30px 5% 25px;
}
#reason #sec02 .topArea .figureArea h3 {
    font-size: 5vw;
    line-height: 1;
}
#reason #sec02 .topArea .figureArea .figure {
    margin: 20px 0;
}
#reason #sec02 .topArea .figureArea .figure ul {
    width: 40%;
}
#reason #sec02 .topArea .figureArea .figure ul li {
    width: 100%;
    font-weight: bold;
    background: #adae53;
    padding: 1.5px 0;
}
#reason #sec02 .topArea .figureArea .figure ul li+li {
    margin-top: 10px;
}
#reason #sec02 .topArea .figureArea .figure img {
    width: 15%;
}
#reason #sec02 .topArea .figureArea p {
    line-height: 1.5;
}
#reason #sec02 .btmArea {
    flex-wrap: wrap;
    row-gap: 15px;
}
#reason #sec02 .btmArea li {
    width: 48%;
}
#reason #sec03 .cts {
    align-items: flex-start;
    position: relative;
}
#reason #sec03 .cts-02 {
    margin: 40px 0;
}
#reason #sec03 .cts .txtArea {
    width: 95%;
    text-shadow: 2px 2px 5px rgb(44 57 75 / 70%);
    border: #fff 1px solid;
    padding: 50px 8% 30px;
    margin: 50px 5% 0 0;
    position: relative;
}
#reason #sec03 .cts-02 .txtArea {
    margin: 50px 0 0 5%;
}
#reason #sec03 .cts .txtArea:before {
    content: '';
    display: block;
    width: 25px;
    height: 170px;
    background: #adae53;
    position: absolute;
    top: -50px;
    right: 8%;
}
#reason #sec03 .cts-02 .txtArea:before {
    left: 8%;
}
#reason #sec03 .cts .txtArea h3 {
    font-size: 6vw;
    line-height: 1.5;
    padding-left: 0;
    margin-bottom: 20px;
}
#reason #sec03 .cts-02 .txtArea h3 {
    text-align: right;
}
#reason #sec03 .cts .txtArea h3:before {
    content: none;
}
#reason #sec03 .cts .txtArea p span {
    color: #adae53;
    font-weight: bold;
}
#reason #sec03 .cts img {
    object-fit: cover;
    width: 80%;
    height: 300px;
    position: absolute;
    right: -5%;
    opacity: 0.4;
    z-index: -1;
}
#reason #sec03 .cts-02 img {
    left: -5%;
}

#reason .priceArea {
    background: url(../Images/bg-ruledline.png) #295d72;
    padding: 35px 6%;
    margin-top: 70px;
}
#reason .priceArea h3 {
    margin-bottom: 20px;
}
#reason .priceArea .tableBox {
    flex-direction: column;
    margin-bottom: 30px;
}
#reason .priceArea .tableBox dl {
    justify-content: flex-start;
    column-gap: 5%;
    width: 100%;
    border: #fff 1px solid;
    padding: 5%;
}
#reason .priceArea .tableBox dl:nth-child(1) {
    border-bottom: none;
}
#reason .priceArea .tableBox dl dt {
    width: 42%;
    font-size: 4vw;
}
#reason .priceArea .tableBox dl dd {
    line-height: 1.4;
}

#reason .priceArea .examBox dt {
    font-size: 1.7rem;
    margin-bottom: 10px;
}
#reason .priceArea .examBox dt span {
    color: #2c394b;
    text-align: center;
    line-height: 1;
    background: #fff;
    padding: 5px 3px 5px 5px;
    margin-right: 15px;
}
#reason .priceArea .examBox dt p {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5;
}

/*--------------------------------------------
    作図例紹介（#samples）
--------------------------------------------*/
#samples #navigation {
    padding-top: 70px;
    margin-bottom: -20px;
}
#samples #navigation ul {
    width: 100%;
    flex-wrap: wrap;
    row-gap: 8px;
}
#samples #navigation li {
    width: 48%;
    position: relative;
}
#samples #navigation li:before {
    content: attr(data-number);
    color: #adae53;
    font-size: 5vw;
    font-family: 'Krona One', sans-serif;
    letter-spacing: 0.05em;
    position: absolute;
    top: -14px;
    left: 8%;
    z-index: 50;
}
#samples #navigation li a {
    width: 100%;
    color: #fff;
    font-size: 4vw;
    font-weight: bold;
    text-align: left;
    background: #295d72;
    padding: 14px 8%;
    position: relative;
    overflow: hidden;
    z-index: 10;
}
#samples #navigation li a:after {
    content: "";
    display: block;
    width: 20px;
    height: 5px;
    border-right: 2px solid #FFF;
    border-bottom: 1px solid #FFF;
    position: absolute;
    top: calc(50% - 5px);
    right: 8%;
    transform: skew(45deg);
    transition: .3s;
    z-index: 20;
}

#samples section:nth-child(2n) {
    background: #295d72;
}
#samples .cts + .cts {
    margin-top: 80px;
}
#samples .cts h3 {
    background: rgb(44 57 75 / 80%);
    padding: 10px 0 10px calc(5% + 40px);
    margin: -10px 0 10px;
    position: sticky;
    top: 66px;
    z-index: 20;
}
#samples section:nth-child(2n) .cts h3 {
    background: rgb(41 93 114 / 80%);
}
#samples .cts h3:before {
    left: calc(5% - 5px);
}
#samples ul.samples-list {
}
#samples ul.samples-list li {
}

/*--------------------------------------------
    よくある質問（#faq）
--------------------------------------------*/
#faq section + section {
    padding-top: 0;
}
#faq .faq-cts li {
    margin-bottom: 20px;
}
#faq .faq-cts li:last-child {
    margin-bottom: 0;
}
#faq .faq-cts li dl dt,
#faq .faq-cts li dl dd {
    display: flex;
    column-gap: 3%;
}
#faq .faq-cts li dl dt {
    align-items: center;
    border: #fff 1px solid;
    padding: 15px 5%;
    position: relative;
}
#faq .faq-cts li dl dt:after {
    content: "\f107";
    color: #fff;
    font-family: "Font Awesome 5 Free";
    font-size: 1.8rem;
    font-weight: 600;
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
#faq .faq-cts li dl dt.open:after {
    content: "\f106";
}
#faq .faq-cts li dl dd {
    border: #2c394b 1px solid;
    padding: 20px 5%;
}
#faq .faq-cts li dl .icon-q,
#faq .faq-cts li dl .icon-a {
    color: #adae53;
    font-size: 2.4rem;
    font-weight: bold;
}
#faq .faq-cts li dl .icon-a {
    color: #fff;
    margin-top: -5px;
}
#faq .faq-cts li dl dt p {
    max-width: calc(97% - 4.2rem);
    font-size: 1.6rem;
    line-height: 1.5;
}
#faq .faq-cts li dl dd p {
    max-width: calc(97% - 2.4rem);
    line-height: 1.9;
}
#faq .faq-cts li dl dd p a {
    color: #adae53;
    font-weight: bold;
    text-decoration: underline;
}
#faq .faq-cts li dl dd p .ttl {
    color: #adae53;
    font-size: 1.6rem;
    font-weight: bold;
}
#faq .faq-cts li dl dd p img {
    margin-top: 15px;
}

/*--------------------------------------------
    採用情報（#recruit）
--------------------------------------------*/
#recruit #info {
    margin-bottom: 40px;
}
#recruit #info p {
    font-size: 4.5vw;
    font-weight: bold;
    text-align: center;
    border: #adae53 1px solid;
    padding: 15px 3%;
}

/*--------------------------------------------
    お問い合わせ（#contact）
--------------------------------------------*/
#contact #sec01 {
    padding-bottom: 0;
}
#contact .note {
    margin: -30px 0 30px;
}
#contact #sec01 .sec01-cts ul {
    flex-direction: column;
    row-gap: 20px;
}
#contact #sec01 .sec01-cts li {
    justify-content: flex-start;
    column-gap: 5%;
    width: 100%;
    border: #fff 1px solid;
    padding: 20px 5%;
}
#contact #sec01 .sec01-cts li p {
    font-weight: bold;
    margin: 0;
}
#contact #sec01 .sec01-cts li p .en {
    display: block;
    color: #adae53;
    font-size: 5.5vw;
    line-height: 1;
    letter-spacing: 0.08em;
    margin-top: 5px;
}

/*--  フォーム部分 --*/
form tr {
}
#contact form th {
    border: none;
    padding-left: 0;
}
form th span.tag {
    color: #fff;
    font-size: 1.4rem;
    background: #adae53;
    padding: 6px 8px 6px 10px;
    margin-right: 10px;
}
form th span.tag-optional {
    background: #295d72;
}
form input,
form textarea {
    width: 100%;
    color: #fff;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    letter-spacing: 0.18em;
    background: #585e66;
    border: none;
    padding: 8px 5%;
}
form .telarea-column td {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
form .telarea-column td input {
    width: 28%;
}
form .telarea-column td span {
}
form .btn-cv {
    margin: 50px auto 0;
    position: relative;
}
form .btn-cv span {
}
form .btn-cv input {
    font-size: 1.7rem;
    font-weight: bold;
    background: none;
}

/*--  フォーム送信完了共通 --*/
#thanks #sec01 .h2Area-pat01 h2 {
    line-height: 1.5;
}
#thanks #sec01 p {
    font-size: 1.6rem;
    text-align: center;
}
#thanks #sec01 .btn-cv {
    margin: 30px auto 0;
}

/*--------------------------------------------
    404ページ
--------------------------------------------*/
#page404 #sec01 p {
    font-size: 1.6rem;
    text-align: center;
}
#page404 #sec01 .btn-cv {
    margin: 30px auto 0;
}




}