@charset "UTF-8";
/*　====================== 基本設定 ======================　*/
*,
*::before,
*::after {
    -webkit-box-sizing: inherit;
    box-sizing: border-box;
}
html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body{
    margin:0;
    padding: 0;
    overflow-x: hidden;
    color: #323232;
}
ul,ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
img{
    width:100%;
    max-width:100%;
    display: block;
}
/*　====================== フォント設定 ======================　*/
h1,h2,h3,h4,h5,h6{
    font-weight: 700;
    line-height: 1.8;
    width: 100%;
    font-family: "Noto Sans JP", sans-serif;
}
h2,
h2.sec-ttl{
    font-size: 48px;
    font-weight: 700;
    width: fit-content;
    margin:0 auto 56px;
}
h2.sec-ttl{
    position: relative;
    z-index: 2;
}
h2.sec-ttl:before{
    content: "";
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Noto Serif JP", serif;
    z-index: -1;
    font-size: 100px;
    color: #FFEEE3;
    font-weight: 500;
}
h2 span,
h2.sec-ttl span{
    color: #E4681A;
}
h3{
    font-size: 32px;
    margin-bottom: 40px;
}
p,a,div,ul,ol,dl{
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.07em;
    line-height: 1.8;
    width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    color: inherit;
}
input,textarea{
    font-size: 16px;
    padding: 5px;
}
.sans{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
}
.serif{
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.roboto{
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
@media screen and (max-width:768px){
    h2,
    h2.sec-ttl{
        font-size: 32px;
        margin-bottom: 40px !important;
    }
    h2.sec-ttl:before {
        font-size: 70px;
    }
    h3{
        font-size: 24px;
    }
    p,a,div,ul,ol,dl{
        font-size: 15px;
    }
    input,textarea{
        font-size: 15px;
    }
}

/*　====================== レスポンシブ設定 ======================　*/
.pc-only {
    display: block;
}
.sp-only {
	display: none;
}
@media screen and (max-width:768px){
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }
}

/*　====================== コンテンツ幅設定 ======================　*/
section{
    padding: 106px 0;
}
.container{
    max-width: 1080px;
    margin: 0 auto;
    width: 90%;
}
.gray{
    background-color: #FAFAFA;
}
@media screen and (max-width:768px){
    section{
        padding: 80px 0;
    }
}

/*　====================== flexデフォルト設定 ======================　*/
.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

/*　====================== link-btn設定 ======================　*/
.link-btn{
    width: 350px;
    line-height: 70px;
    height: 70px;
    color: #E4681A;
    font-size: 20px;
    text-align: center;
    display: block;
    background-color: #fff;
    border: solid 1px #E4681A;
    position: relative;
    font-weight: 700;
    margin: 0 auto;
    transition: background-color 0.3s ease;
    cursor: pointer;
}
.link-btn:after{
    content: "";
    display: inline-block;
    background-image: url(../image/arrow.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 140px;
    height: 8px;
    position: absolute;
    top: 85%;
    left: 70%;
    transform: translate(-50%, -50%); /* ← 水平・垂直とも中央へ */
    transition: left 0.3s ease;
}
.link-btn:hover{
    background-color: #FFEEE3;
}
.link-btn:hover:after{
    left: 75%;
}
@media screen and (max-width:1080px){
    .link-btn{
        width: 50%;
    }
}

@media screen and (max-width:767px){
    .link-btn{
        width: 100%;
        font-size: 18px;
    }
}
/*　====================== header ======================　*/
.header-pc{
    margin: 0 auto;
    width: 100%;
    background-color: #fff;
    position: fixed;
    z-index: 900;
    padding:3%;
    height: 100px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
.header-pc h1{
    width: 220px;
    height: auto;
    position: relative;
    bottom: 1px;
    transition: opacity 0.3s ease; 
}
.header-pc h1:hover{
    opacity: 0.7;
}
.header-pc .header-nav-pc.flex,
.header-pc .header-nav-pc .header-cta-pc.flex{
    justify-content: flex-end;
    white-space: nowrap; 
    gap: 16px;
}
.header-pc .header-nav-pc .nav-menu{
    gap: 16px;
}
.header-pc .header-nav-pc .nav-menu li a{
    font-size: 15px;
}
.header-pc .header-nav-pc .nav-menu li:not(:nth-of-type(3)):not(:nth-of-type(4)) {
    transition: opacity 0.3s ease;
}
.header-pc .header-nav-pc .nav-menu li:not(:nth-of-type(3)):not(:nth-of-type(4)):hover {
    opacity: 0.7;
}
/* nav-menu sub */
.header-pc .header-nav-pc .nav-menu li:nth-of-type(3) a span,
.header-pc .header-nav-pc .nav-menu li:nth-of-type(4) a span{
    font-size: 10px;
}
.header-pc .header-nav-pc .nav-menu li:nth-of-type(3) .sub-menu,
.header-pc .header-nav-pc .nav-menu li:nth-of-type(4) .sub-menu{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    background-color: #323232;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    text-align: center;
    padding-top: 18px;
    padding-bottom: 18px;
    transition: all 0.3s ease-in-out 0s;
}
.header-pc .header-nav-pc .nav-menu li:nth-of-type(3):hover .sub-menu,
.header-pc .header-nav-pc .nav-menu li:nth-of-type(4):hover .sub-menu{
    visibility: visible;
    opacity: 1;
    z-index: 1;
}
.header-pc .header-nav-pc .nav-menu li:nth-of-type(3) .sub-menu .sub-menu-list.flex,
.header-pc .header-nav-pc .nav-menu li:nth-of-type(4) .sub-menu .sub-menu-list.flex{
    color: #fff;
    width: 1080px;
    margin: 0 auto;
    position: relative;
}
.header-pc .header-nav-pc .nav-menu li:nth-of-type(3) .sub-menu .sub-menu-list.flex li,
.header-pc .header-nav-pc .nav-menu li:nth-of-type(4) .sub-menu .sub-menu-list.flex li{
    width: 25%;
    transition: opacity 0.3s ease;
}
.header-pc .header-nav-pc .nav-menu li:nth-of-type(3) .sub-menu .sub-menu-list.flex li:hover,
.header-pc .header-nav-pc .nav-menu li:nth-of-type(4) .sub-menu .sub-menu-list.flex li:hover{
   opacity: 0.7;
}
.header-pc .header-nav-pc .nav-menu li:nth-of-type(3) .sub-menu .sub-menu-list.flex li:not(:last-of-type),
.header-pc .header-nav-pc .nav-menu li:nth-of-type(4) .sub-menu .sub-menu-list.flex li:not(:last-of-type) {
    border-right: solid #fff 1px;
}
.header-pc .header-nav-pc .header-cta-pc .header-cta-call{
    color: #E4681A;
    text-align: center;
}
.header-pc .header-nav-pc .header-cta-pc .header-cta-call a span{
    font-weight: 500;
    font-size: 14px;
    position: relative;
}
.header-pc .header-nav-pc .header-cta-pc .header-cta-call a{
    display: flex;
    flex-direction: column;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
}
.header-pc .header-nav-pc .header-cta-pc .header-cta-mail{
    width: 200px;
    height: auto;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
    transition: opacity 0.3s ease;
}
.header-pc .header-nav-pc .header-cta-pc .header-cta-mail:hover{
    opacity: 0.7; 
}
.header-sp.flex{
    display: none;
}

@media (max-width: 1300px) and (min-width: 1201px) {
    .header-pc .header-nav-pc .nav-menu{
    gap: 8px;
}
}
@media screen and (max-width:1200px){
.header-pc{
    display: none;
}
.header-sp.flex{
    display: flex;
    width: 100%;
    background-color: #fff;
    position: fixed;
    z-index: 900;
    padding:3%;
    height: 70px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
.header-sp.flex .container h1{
    position: relative;
    top: 2px;
    width: 220px;
}
.header-sp.flex .container .hamburger{ 
    display: block;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    top: 5px;
}
.header-sp.flex .container .hamburger .hamburger__line{ 
    position: absolute;
    width: 26px;
    height: 2px;
    background-color: #E4681A;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    z-index: 900;
}
.header-sp.flex .container .hamburger .hamburger__line:nth-of-type(1) {
    top: 14px;
}
.header-sp.flex .container .hamburger .hamburger__line:nth-of-type(2) {
    top: 23px;
}
.header-sp.flex .container .hamburger .hamburger__line:nth-of-type(3) {
    top: 32px;
}
.header-sp.flex .container .hamburger.active .hamburger__line:nth-of-type(1) {
    -webkit-transform: translateY(-9px) rotate(-45deg);
    -ms-transform: translateY(-9px) rotate(-45deg);
    transform: translateY(-9px) rotate(-45deg);
    top: 32px;
}
.header-sp.flex .container .hamburger.active .hamburger__line:nth-of-type(2) {
    opacity: 0;
}
.header-sp.flex .container .hamburger.active .hamburger__line:nth-of-type(3) {
    -webkit-transform: translateY(-9px) rotate(45deg);
    -ms-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
}
.header-sp .header-nav-sp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 1);
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    -o-transition: transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s;
    display: block;
    overflow: scroll;
    margin-top: 70px;
    z-index: 999;
}
.header-nav-sp.active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.header-nav-sp .nav-menu-sp{
    padding: 40px 0 80px 0;
    width: 80%;
    margin: 0 auto;
}
    .header-nav-sp .nav-menu-sp li{
        padding: 0 24px;
        border-top: 1px solid #D6D6D6;
    }
    .header-nav-sp .nav-menu-sp li a{
        display: block;
        padding: 25px 0;
        color: #E4681A;
        font-size: 18px;
        position: relative;
    }
    .header-nav-sp .nav-menu-sp li a .arrow2{
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        width: 6px;
        height: 10px;
        z-index: 1;
    }
    .header-nav-sp .nav-menu-sp li a .arrow2::before,
    .header-nav-sp .nav-menu-sp li a .arrow2::after{
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 8px;
        height: 1.5px;
        border-radius: 100px;
        background-color: #E4681A;
        -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
        transform-origin: right center;
        -webkit-transition: background-color .4s ease;
        -o-transition: background-color .4s ease;
        transition: background-color .4s ease;
    }
    .header-nav-sp .nav-menu-sp li a .arrow2::before {
    transform: translateY(0px) rotate(45deg);
}

.header-nav-sp .nav-menu-sp li a .arrow2::after {
    transform: translateY(0px) rotate(-45deg);
}
.header-nav-sp .nav-menu-sp li:nth-of-type(2) a .arrow2::before,
.header-nav-sp .nav-menu-sp li:nth-of-type(2) a .arrow2::after,
.header-nav-sp .nav-menu-sp li:nth-of-type(3) a .arrow2::before,
.header-nav-sp .nav-menu-sp li:nth-of-type(3) a .arrow2::after{
    top: 55%;
}
    .header-nav-sp .nav-menu-sp li:nth-of-type(2) a .arrow2::before,
    .header-nav-sp .nav-menu-sp li:nth-of-type(3) a .arrow2::before{
    transform: translateY(0px) rotate(135deg);
}
.header-nav-sp .nav-menu-sp li:nth-of-type(2) a .arrow2::after,
.header-nav-sp .nav-menu-sp li:nth-of-type(3) a .arrow2::after{
    transform: translateY(0px) rotate(45deg);
}
.nav-menu-sp li.drop-menu ol.drop-menu{
  display: none;
}
.nav-menu-sp li.drop-menu.open ol.drop-menu{
  display: block;
}
.nav-menu-sp li.drop-menu.open ol.drop-menu li{
    padding-left: 25px;
    margin-bottom: 16px;
    position: relative;
    border: none;
}
.nav-menu-sp li.drop-menu.open ol.drop-menu li:before{
    position: absolute;
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    background: #E4681A;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
}
.nav-menu-sp li.drop-menu.open ol.drop-menu li a{
    padding: 0;
    font-size: 15px;
}
}
/*　====================== fv ======================　*/
.fv-wrap{
    position: relative;
    width: 100%;
    height: 100vh;
}
.fv-wrap .fv-back{
    background-image: url(../image/top/fv-back.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 85%;
    height: 80%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}
.fv-wrap .mv{
    position: absolute;
    left: 3%;
    top: 55%;
    transform: translateY(-50%);
    z-index: 5;
}
.fv-wrap .mv div{
    width: fit-content;
    background-color: #fff;
    position: relative;
    margin-bottom: 16px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
}
.fv-wrap .mv div p{
    width: fit-content;
    padding: 8px 16px;
    font-size: 50px;
    font-weight: 700;
    background: linear-gradient(70deg, #E4681A, #E4BD1A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fv-wrap .mv span{
   font-weight: 500;
   color: #fff;
   font-size: 30px;
   filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
   padding:  0 16px;
}
.fv-wrap .movie-area{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 85%;
}
.fv-wrap .movie-area .fv-video{
    width: 100%;
    height: 93%;
    object-fit: cover;
}
.fv-wrap .movie-area .fv-filter{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 93%;
  background: rgba(0,0,0,0.6);
  z-index: 1;
}
@media screen and (max-width:767px){
.fv-wrap .mv {
    left: 5%;
    top: 60%;
}
.fv-wrap .mv div p {
    padding: 8px;
    font-size: 28px;
}
.fv-wrap .mv span {
    font-size: 16px;
}
}
/*　====================== sec1 intro ======================　*/
.intro .sec1-wrap,
.intro .sec1-wrap p:nth-of-type(3){
    position: relative;
}
.intro .sec1-wrap:before,
.intro .sec1-wrap:after,
.intro .sec1-wrap p:nth-of-type(3):before{
    content: "";
    position: absolute;
}
.intro .sec1-wrap:before{
    display: inline-block;
    background-image: url(../image/top/sec1-1.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 288px;
    height: 288px;
    top: 0;
    left: 0;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}
.intro .sec1-wrap:after{
    display: inline-block;
    background-image: url(../image/top/sec1-3.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 336px;
    height: 358px;
    top: 70%;
    right: 0;
    transform: translateY(-50%);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}
.intro .sec1-wrap p:nth-of-type(3):before{
    display: inline-block;
    background-image: url(../image/top/sec1-2.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 275px;
    height: 139px;
    left: 10%;
    transform: translateY(-50%);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}
.intro h2{
    line-height: 1.8;
    text-align: center;
    color: #E4681A;
    font-weight: 400;
}
.intro p{
    text-align: center;
    margin-bottom: 32px;
}

@media screen and (max-width:1080px){
    .intro p{
        width: 60%;
        margin: 0 auto 32px auto;
    }
    .intro .sec1-wrap:before{
        width: 120px;
        height: 120px;
        top: 200px;
    }
    .intro .sec1-wrap:after{
        width: 150px;
        height: 160px;
        top: 80%;
    }
    .intro .sec1-wrap p:nth-of-type(3):before{
        width: 100px;
        height: 50px;
        left: -30%;
    }
}
@media screen and (max-width:768px){
    .intro .sec1-wrap:before,
    .intro .sec1-wrap:after,
     .intro .sec1-wrap p:nth-of-type(3):before
    {
        display: none;
    }
    .intro h2{
        width: 90%;
        text-align: left;
    }
    .intro p{
        width: 90%;
        margin: 0 auto 32px;
        text-align: left;
    }
    .sec1-wrap .sponly-img{
        width: 90%;
        margin: 0 auto;
        position: relative;
    }
    .sec1-wrap .sponly-img img:nth-of-type(1){
        width: 90%;
        margin-left: auto;
        /* filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2)); */
    }
    .sec1-wrap .sponly-img img:nth-of-type(2){
        width: 60%;
        position: relative;
        top:-32px;
        z-index: 2;
        /* filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2)); */
    }
    section.intro {
        padding: 80px 0 48px 0;
    }
}

/*　====================== sec2 solar======================　*/
.solar{
    position: relative;
    padding: 245px 0 0 0;
}
.solar .sec2-back{
    position: absolute;
    height: 350px;
    width: 100%;
    object-fit: cover;
    top: 0;
    z-index: -1;
}
.solar .article1.container{
    background-color: #fff;
}
.solar .article1.container .article1-content{
    padding: 106px 0 56px 0;
    width: 90%;
    margin: 0 auto;
}
.solar .article1.container .article1-content h2{
    font-weight: 400;
    color: #323232;
    text-align: center;
    margin-bottom: 56px;
}
.solar .article1.container .article1-content h2 span{
    font-weight: 400;
    color: #323232;
    font-size: 32px;
}
.solar .article1.container .article1-content h2 span.strong{
    font-weight: 600;
    font-size: 48px;
}
.solar .article1.container .article1-content .flex{
    gap: 48px;
}
.solar .article1.container .article1-content .flex .left p:not(:nth-of-type(3)){
    margin-bottom: 32px;
}
.solar .article1.container .article1-content .flex .right{
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}
.solar .article2{
    padding: 56px 0;
    background-image: url(../image/top/sec2-3.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
.solar .article2 .container h3{
    width: fit-content;
    background-color: #fff;
    padding:8px 16px;
    margin: 0 auto 40px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    font-weight: 400;
}
.solar .article2 .container h3 span{
    font-size: 20px;
}
.solar .article2 .container h3 span.strong{
    font-weight: 600;
    font-size: 32px;
}
.solar .article2 .container ul.flex{
    margin-bottom: 40px;
}
.solar .article2 .container ul.flex li.flex{
    width: 23.5%;
    height: 316px;
    background-color: #fff;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
}
.solar .article2 .container ul.flex li.flex p.text{
    width: fit-content;
    padding: 0 24px;
    font-size: 14px;
}
.solar .article2 .container ul.flex li.flex div.flex{
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.solar .article2 .container ul.flex li.flex:nth-of-type(2) div.flex,
.solar .article2 .container ul.flex li.flex:nth-of-type(4) div.flex{
    gap: 4px;
}
.solar .article2 .container ul.flex li.flex div.flex p{
    font-weight: 700;
    color: #E4681A;
    text-align: center;
    width: fit-content;
}
.solar .article2 .container ul.flex li.flex div.flex .circle.flex{
    width: 96px;
    height: 96px;
    background-color: #E4681A;
    border-radius: 50%;
    justify-content: center;
}
.solar .article2 .container ul.flex li.flex div.flex .circle img{
    width: 50%;            
    height: auto;
}
.solar .article2 .container ul.flex li.flex:nth-of-type(2) div.flex .circle img,
.solar .article2 .container ul.flex li.flex:nth-of-type(3) div.flex .circle img,
.solar .article2 .container ul.flex li.flex:nth-of-type(4) div.flex .circle img{
    width: 60%;            
}
@media screen and (max-width:1200px){
    .solar .article2 .container ul.flex {
    flex-wrap: wrap;
    gap: 32px;
}
.solar .article2 .container ul.flex li.flex {
    width: 47%;
    height: 260px;
}

}
@media screen and (max-width:767px){
    .solar{
        padding: 80px 0 0 0;
    }
    .solar .sec2-back {
        height: 150px;
    }
    .solar .article1.container .article1-content {
        padding: 56px 0;
        gap: 48px;
    }
    .solar .article1.container .article1-content h2 {
        font-size: 24px;
    }
    .solar .article1.container .article1-content h2 span {
        font-size: 16px;
    }
    .solar .article1.container .article1-content h2 span.strong {
        font-size: 32px;
    }
    .solar .article1.container .article1-content .flex {
        flex-direction: column;
        gap: 32px;
    }
    .solar .article2 .container h3{
        text-align: center;
    }
    .solar .article2 .container h3 span.strong {
        font-weight: 600;
        font-size: 24px;
    }
     .solar .article2 .container ul.flex {
        flex-wrap: wrap;
        row-gap: 24px;
    }
    .solar .article2 .container ul.flex li.flex {
        width: 100%;  
    }
}

/*　====================== sec3 service ======================　*/
.service h2.sec-ttl:before{
    content: "Service";
}
.service h3.serif{
    font-weight: 400;
    text-align: center;
}
.service h3.serif span.strong{
    color: #E4681A;
    font-weight: 600;
    font-size: 40px;
}

.service ul.flex {
    width: 100%;
    display: flex;
    gap: 4px;
    justify-content: flex-start;
    flex-wrap: wrap; 
}
.service ul.flex li.flex{
    flex: 0 0 calc(50% - 4px);
    height: 350px;
    flex-direction: column;
    justify-content: center;
}
.service ul.flex li.flex a.flex{
    flex-direction: column;   /* 上下にテキストを並べる */
    justify-content: center;
    width: 100%;            
    height: 100%;  
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    gap: 8px;
    font-size: 32px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.service ul.flex li.flex a.flex:hover{
    opacity: 0.7;
}
.service ul.flex li.flex:nth-of-type(1) a.flex{
    background-image: url(../image/top/sec3-1.webp);
}
.service ul.flex li.flex:nth-of-type(2) a.flex{
    background-image: url(../image/top/sec3-2.webp);
}
.service ul.flex li.flex:nth-of-type(3) a.flex{
    background-image: url(../image/top/sec3-3.webp);
}
.service ul.flex li.flex:nth-of-type(4) a.flex{
    background-image: url(../image/top/sec3-4.webp);
}
.service ul.flex li.flex a span{
    color: #fff;
    font-weight: 700;
    text-align: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
}

@media screen and (max-width:768px){
    .service h3.serif {
        font-size: 20px;
    }
    .service h3.serif span.strong {
        font-size: 24px;
    }
    .service ul.flex li.flex {
        height: 150px;
    }
    .service ul.flex li.flex a.flex {
        font-size: 18px;
    }
    .service ul.flex li.flex a span {
        font-size: 13px;
        width: 90%;
        margin: 0 auto;
        line-height: 1.5;
    }
}

/*　====================== sec4 reason ======================　*/
.reason h2.sec-ttl:before{
    content: "Reason";
}
.reason ul.sec4-list li.flex{
    width: 90%;
    background-color: #fff;
    box-shadow: 4px 4px 0px rgba(218, 180, 164, 0.4);
    gap: 48px;
    align-items: flex-end;
    margin: 80px 0;
    position: relative;
}
.reason ul.sec4-list li.flex:nth-of-type(2),
.reason ul.sec4-list li.flex:nth-of-type(4){
    margin-left: auto;
}
.reason ul.sec4-list li.flex div.sec4-img{
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
    height: 374px;
    width: 100%;
    overflow: hidden; 
}
.reason ul.sec4-list li.flex div.sec4-img img{
    height: 100%;
    object-fit: cover;
}
.reason ul.sec4-list li.flex div.sec4-img,
.reason ul.sec4-list li.flex div.sec4-text{
    margin-bottom: 40px;
}
.reason ul.sec4-list li.flex:nth-of-type(2) div.sec4-img,
.reason ul.sec4-list li.flex:nth-of-type(4) div.sec4-img{
    width: 50%;
}
.reason ul.sec4-list li.flex:nth-of-type(2) div.sec4-text,
.reason ul.sec4-list li.flex:nth-of-type(4) div.sec4-text{
    width: fit-content;
    margin-left: auto;
}
.reason ul.sec4-list li.flex div.sec4-text span.num{
    font-weight: 700;
    color: #E4681A;
    position: relative;
}
.reason ul.sec4-list li.flex div.sec4-text span.num:after{
    content: "";
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    width: 56px;
    height: 45px;
}
.reason ul.sec4-list li.flex:nth-of-type(1) div.sec4-text span.num:after{
    background-image: url(../image/top/sec4-list-01.webp);
    width: 50px;
    height: 40px;
}
.reason ul.sec4-list li.flex:nth-of-type(2) div.sec4-text span.num:after{
    background-image: url(../image/top/sec4-list-02.webp);
    position: absolute;
    bottom: -3px;
}
.reason ul.sec4-list li.flex:nth-of-type(3) div.sec4-text span.num:after{
    background-image: url(../image/top/sec4-list-03.webp);
    position: absolute;
    bottom: -3px;
}
.reason ul.sec4-list li.flex:nth-of-type(4) div.sec4-text span.num:after{
    background-image: url(../image/top/sec4-list-04.webp);
     position: absolute;
    bottom: -3px;
}
.reason ul.sec4-list li.flex div.sec4-text h3 span{
    background-color: #E4681A;
    color: #fff;
    padding: 8px 24px;
    display: inline-block;
    width: fit-content;
}
.reason ul.sec4-list li.flex div.sec4-text h3 span:nth-of-type(1){
    margin:8px 0 16px 0;
}
.reason ul.sec4-list li.flex div.sec4-text h3 span:nth-of-type(2){
    margin-bottom: 16px;
}

@media screen and (max-width:1080px){
.reason ul.sec4-list li.flex div.sec4-text h3{
    font-size: 28px;
}
.reason ul.sec4-list li.flex:nth-of-type(2) div.sec4-img,
.reason ul.sec4-list li.flex:nth-of-type(4) div.sec4-img{
    width: 100%;
}
.reason ul.sec4-list li.flex {
    width: 95%;
    gap: 24px;
}
.reason ul.sec4-list li.flex:nth-of-type(2) div.sec4-img,
.reason ul.sec4-list li.flex:nth-of-type(4) div.sec4-img{
    width: 130%;
}
.reason ul.sec4-list li .sec4-text p{
    width: 90%;
}
.reason ul.sec4-list li.flex:nth-of-type(2) div.sec4-text,
.reason ul.sec4-list li.flex:nth-of-type(4) div.sec4-text{
    padding-left: 3%;
}
}
@media screen and (max-width:768px){
    .reason ul.sec4-list li.flex {
        flex-direction: column;
    }
    
.reason ul.sec4-list li.flex {
        gap: 16px;
        padding: 32px 0;
        margin: 0;
        width: 90%;
    }
    .reason ul.sec4-list li.flex:nth-of-type(2),
    .reason ul.sec4-list li.flex:nth-of-type(3),
    .reason ul.sec4-list li.flex:nth-of-type(4){
        margin-top: 32px;
    }
.reason ul.sec4-list li.flex div.sec4-img,
.reason ul.sec4-list li.flex div.sec4-text {
        filter: none;
        width: 90%;
        margin: 0 auto;
    }
.reason ul.sec4-list li.flex div.sec4-text {
        filter: none;
        width: 90%;
        margin: 0 auto;
    }
.reason ul.sec4-list li.flex div.sec4-img{
        height: 200px;
    }
.reason ul.sec4-list li.flex div.sec4-text span.num:after {
        width: 46px;
        height: 37px;
    }
.reason ul.sec4-list li.flex div.sec4-text h3{
    font-size: 24px;
        margin-bottom: 0;
    }
    .reason ul.sec4-list li.flex:nth-of-type(2) div.sec4-img,
    .reason ul.sec4-list li.flex:nth-of-type(4) div.sec4-img{
        order: 1;
        width: 90%;
        margin: 0 auto;
    }
    .reason ul.sec4-list li.flex:nth-of-type(2) div.sec4-text,
    .reason ul.sec4-list li.flex:nth-of-type(4) div.sec4-text{
       order: 2;
       width: 90%;
        margin: 0 auto;
    }
    .reason ul.sec4-list li.flex:nth-of-type(2) div.sec4-text,
.reason ul.sec4-list li.flex:nth-of-type(4) div.sec4-text{
    padding-left: 0;
}
}

/*　====================== CTA ======================　*/
section.cta{
    padding: 56px 0;
    background-image: url(../image/cta-back.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
.cta .container {
  position: relative;
  background-color: #fff;
  border-radius: 20px;
  z-index: 0;
  padding: 32px 0;
}
.cta .container::before {
  content: "";
  position: absolute;
  inset: 0; /* top/right/bottom/left: 0 */
  border-radius: 20px; /* 元の要素と同じ角丸 */
  padding: 3px; /* ボーダー幅 */
  background: linear-gradient(90deg, #1BBEE4, #1A9DBC);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.cta .container h3 {
    text-align: center;
    line-height: 1.5;
    font-weight: 500;
    margin-bottom: 16px;
}
.cta .container h3 span.strong{
    font-weight: 700;
    background: linear-gradient(90deg, #A6E22E, #8ABC26);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cta ul.flex {
    width: 70%;
    margin: 0 auto;
}
.cta ul.flex li.cta-mail,
.cta ul.flex li.cta-call{
    width: 48%;
    height: 100px;
}
.cta ul.flex li.cta-mail a.flex,
.cta ul.flex li.cta-call a.flex{
    padding: 24px 0;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    position: relative;
    line-height: 1;
    transition: opacity 0.3s ease;
}
.cta ul.flex li.cta-mail a.flex:hover,
.cta ul.flex li.cta-call a.flex:hover{
    opacity: 0.7;
}
.cta ul.flex li.cta-mail a.flex{
    background: linear-gradient(180deg, #1BBEE4, #1A9DBC);
    border-radius: 50px;
    border: solid #1A9DBC 3px;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(26, 157, 188, 0.4);
}
.cta ul.flex li.cta-call a.flex{
    border-radius: 50px;
    border: solid #8ABC26 3px;
    color: #fff;
    background: linear-gradient(180deg, #A6E22E, #8ABC26);
    text-shadow: 2px 2px 2px rgba(138, 188, 38, 0.4);
}
.cta ul.flex li.cta-mail a.flex p,
.cta ul.flex li.cta-call a.flex p.roboto{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
}
.cta ul.flex li.cta-call a.flex p.roboto{
    font-size: 30px;
}
.cta ul.flex li.cta-mail a.flex p::before{
    font-family: "Font Awesome 6 Free"; 
    content: "\f0e0";
    font-weight: 900;
    font-style: normal;
    font-size: 24px;
    color: #fff;
}
.cta ul.flex li.cta-call a.flex p::before{
    font-family: "Font Awesome 6 Free"; 
    content: "\f095"; 
    font-weight: 900; 
    font-style: normal;
    font-size: 24px;
    color: #fff;
}
.cta ul.flex li.cta-mail a.flex span,
.cta ul.flex li.cta-call a.flex span{
    font-size: 13px;
    font-weight: 500;
}
@media screen and (max-width:1000px){
    section.cta{
        background-image: url(../image/cta-back-sp.webp);
    }
    .cta .container h3 {
        font-size: 15px;
        width: 90%;
        margin-bottom: 0;
        margin: 0 auto 24px auto;
    }
    .cta ul.flex {
        width: 90%;
        flex-direction: column;
        gap: 16px;
    }
    .cta ul.flex li.cta-mail, 
    .cta ul.flex li.cta-call{
        width: 80%;
        height: 100px;
    }
    .cta .container h3 span.strong {
        font-size: 24px;
    }
    .cta ul.flex li.cta-mail a.flex p, 
    .cta ul.flex li.cta-call a.flex p {
        font-size: 20px;
    }
    .cta ul.flex li.cta-call a.flex p {
        font-size: 28px;
    }
    .cta ul.flex li.cta-mail a.flex p::before,
    .cta ul.flex li.cta-call a.flex p::before {
        font-size: 20px;
    }
}
@media screen and (max-width:767px){
      .cta ul.flex li.cta-mail, 
    .cta ul.flex li.cta-call{
        width: 100%;
    }
}
/*　====================== sec5 works ======================　*/
.work h2.sec-ttl:before{
    content: "Work";
}
.work p.read{
    width: fit-content;
    text-align: center;
    margin: 0 auto 40px auto;
}
.work ul.flex li{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 385px;
    width: 20%;
    transition: opacity 0.3s ease;
}
.work ul.flex li:hover{
    opacity: 0.7;
}
.work ul.flex li:nth-of-type(1){
    background-image: url(../image/top/sec5-1.webp);
}
.work ul.flex li:nth-of-type(2){
    background-image: url(../image/top/sec5-2.webp);
}
.work ul.flex li:nth-of-type(3){
    background-image: url(../image/top/sec5-3.webp);
}
.work ul.flex li:nth-of-type(4){
    background-image: url(../image/top/sec5-4.webp);
}
.work ul.flex li:nth-of-type(5){
    background-image: url(../image/top/sec5-5.webp);
}
.work ul.flex li a.flex{
    width: 100%;
    height: 100%;
    align-items: end;
    padding: 0 0 8px 8px;
}
.work ul.flex li a.flex:hover{
    opacity: 0.7;
}
.work ul.flex li a.flex p.flex{
    width: 270px;
    background-color: #fff;
    text-align: center;
    color: #E4681A;
    font-size: 24px;
    font-weight: 700;
    padding: 8px;
    justify-content: center;
    gap: 8px;
}
.work ul.flex li a.flex p.flex::after{
    content: "";
    display: inline-block;
    background-image: url(../image/right-arrow.webp);
    background-repeat: no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    position: relative;
    top: 3px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
}

@media screen and (max-width:1300px){
    .work ul.flex{
        flex-wrap: wrap; /* 折り返し */
    }
    .work ul.flex li:nth-of-type(n+4){
        flex: 0 0 50%;
    }
    .work ul.flex li{
        flex: 0 0 33.333%; /* 上3つ：1段に3個並べる */
        box-sizing: border-box;
    }
     .work p.read {
        width: 70%;
    }
}
@media screen and (max-width:767px){
      .work p.read {
        width: 90%;
    }
    .work ul.flex{
        gap: 24px;
    }
      .work ul.flex li{
        flex: none;
        width: 100%; 
        box-sizing: border-box;
        height: 150px;
    }
        .work ul.flex li:nth-of-type(n+4) {
        flex: none;
    }
    .work ul.flex li a.flex p.flex {
        width: 220px;
        font-size: 20px;
    }
    .work ul.flex li a.flex p.flex::after {
        width: 20px;
        height: 20px;
        top: 1px;
    }
}
/*　====================== sec6 customer ======================　*/
.customer{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../image/top/sec6-1.webp);
}
.customer h2.sec-ttl:before{
    content: "Customer";
}
.customer p.read{
    text-align: center;
    margin-bottom: 40px;
}
.customer ul.flex{
    gap: 24px;
    margin-bottom: 40px;
}
.customer ul.flex li.flex{
    flex-direction: column;
    justify-content: flex-start;
    padding:16px 24px;
    background-color: #fff;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
    height: 560px;
    width: 32%;
    gap: 16px;
}
.customer ul.flex li.flex div.customer-text span{
    background-color: #E4681A;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding:0 8px;
    line-height: 1;
}
.customer ul.flex li.flex div.customer-text h3{
    color: #E4681A;
    font-size: 21px;
    margin-bottom: 8px;
    line-height: 1.5;
}
.customer ul.flex li.flex div.customer-text p:nth-of-type(2){
    font-size: 13px;
    text-align: right;
}
@media screen and (max-width:1080px){
    .customer ul.flex {
        flex-wrap: wrap;
        justify-content: center;
    }
 .customer ul.flex li.flex {
        width: 48%;
        height: 600px;
    }
.customer ul.flex li.flex div.customer-text h3{
        white-space: wrap;
    }
}
@media screen and (max-width:767px){
    .customer{
    background-image: url(../image/top/sec6-1-sp.webp);
}
 .customer ul.flex li.flex {
        width: 100%;
        height: auto;
        padding:24px;
    }
}
/*　====================== sec7 area ======================　*/
.area h2.sec-ttl:before{
    content: "Area";
}
.area div.flex{
    max-width: 1000px;
    margin: 0 auto;
    justify-content: center;
    gap: 4%;
}
.area div.flex div.right,
.area div.flex div.left{
    width: 45%;
}
.area div.flex div.right h3 span{
    font-size: 25px;
}
.area div.flex div.right h3 span.strong{
    font-size: 32px;
    color: #E4681A;
    font-weight: 700;
}
.area div.flex div.right p{
    margin-top: 40px;
}
@media screen and (max-width:767px){
    .area div.flex{
        width: 90%;
        flex-direction: column;
        gap: 40px;
    }
     .area div.flex div.right{
        order: 2;
        width: 100%;
    }
     .area div.flex div.left{
        order: 1;
        width: 100%;
    }
}

/*　====================== sec8 news ======================　*/
.news h2.sec-ttl:before{
    content: "News";
}
.news ul.flex{
    margin: 0 auto 40px auto;
    flex-direction: column;
    justify-content: center;
    max-width:1080px;
}
.news ul.flex li{
    border-top: #D6D6D6 solid 1px;
    border-bottom: #D6D6D6 solid 1px;
    padding: 24px 64px;
    width: 80%;
}
.news ul.flex li:not(:nth-of-type(1)){
    border-top:none;
}
.news ul.flex li a.flex span.category{
    color: #E4681A;
    border: solid #E4681A 1px;
    padding: 0 4px;
    margin: 0 32px 0 16px;
}
.news ul.flex li a.flex{
    transition: opacity 0.3s ease;
}
.news ul.flex li a.flex:hover{
    opacity: 0.7;
}
@media screen and (max-width:767px){
.news ul.flex li{
    width: 90%;
    padding: 24px 0;
}
.news ul.flex li a.flex{
    flex-wrap: wrap;
    justify-content: flex-start;
}
.news ul.flex li a.flex span{
    font-size: 13px;
}
.news ul.flex li a.flex span.category {
    padding: 0 4px;
    margin: 0 0 0 8px;
}.news a.link-btn{
    width: 90%;
}
}
/*　====================== sec recruit ======================　*/
.recruit .container a{
    transition: opacity 0.3s ease; 
}
.recruit .container a:hover{
    opacity: 0.7;
}
/*　====================== footer ======================　*/
.footer{
    padding: 106px 0 0 0;
    background-color: #323232;
    color: #fff;
}
.footer .footer-content.flex div.left{
    width: 35%;
}
.footer .footer-content.flex div.left a.footer-logo{
    display: block;
    width: 90%;
    margin-bottom: 16px;
}
.footer .footer-content.flex div.left p.call-num a{
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
    display: block;
}
.footer .footer-content.flex div.right.flex{
    width: 60%;
    gap: 10%;
}
.footer .footer-content.flex div.right ul.flex{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: fit-content;
}
.footer .footer-content.flex div.right ul.flex:nth-of-type(2) li a.sub,
.footer .footer-content.flex div.right ul.flex:nth-of-type(3) li a.sub{
    content: "";
    position: relative;
    left: 20px;
}
.footer .footer-content.flex div.right ul.flex:nth-of-type(2) li a.sub::before,
.footer .footer-content.flex div.right ul.flex:nth-of-type(3) li a.sub::before{
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -20px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #fff;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.footer div.copyright{
    margin-top: 106px;
    padding: 32px 0;
    background-color: #1D1D1D;
}
.footer div.copyright p{
    text-align: center;
    font-size: 13px;
    font-weight: 400;
}

@media screen and (max-width:1080px) {
    .footer .footer-content.flex div.left a.footer-logo {
    width: 100%;
}
}
@media screen and (max-width:767px){
    .footer .footer-content.flex{
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }
    .footer .footer-content.flex div.left {
        width: 100%;
    }
    .footer .footer-content.flex div.right.flex{
        flex-direction: column;
        width: 100%;
        gap: 10%;
        align-items: flex-start;
    }
    .footer .footer-content.flex div.right.flex {
        gap: 32px;
    }
    .footer .footer-content.flex div.right.flex ul.flex{
        border-left: dashed 2px #E4681A;
    }
      .footer .footer-content.flex div.right.flex ul.flex li{
        margin-left: 24px;
    }
    .footer div.copyright{
        padding: 24px 0;
        margin-top: 80px;
    }
    .footer div.copyright p{
        font-size: 10px;
    }
}