@charset "UTF-8";

html {
    scroll-behavior: smooth;
}

body{
    font-family: "hiragino-kaku-gothic-pron", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 400;
    position: relative;
  }

/* font-family: "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; */

#header-sp {
    display: none;
}

#mask {
    position: fixed;
    z-index: 13;
    width: 100%;
    height: 100vh;
    display: none;
}

/* パララックス・スライダー */
/* .parallax-area {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
} */

.bg-bk {
    background-color: #121212;
    width: 100%;
    height: 100vh;
    position: fixed;
    background-size: cover;
    top: 0;
    display: none;
}

.slider {
    width: 100%;
    height: 100%;
    
    position: fixed;
    top: 0;
    left: 0;
}

.slider img {
    width: clamp(90.625rem, 62.965rem + 49.12vw, 123.75rem);
    object-fit: cover;
    opacity: 1;
}

.black {
    opacity: .4;
}

.darking {
    background-color: #121212;
    width: 100%;
    position: absolute;
    height: clamp(131rem, 76.723rem + 96.39vw, 196rem);
    top: 0;
    z-index: 2;
    opacity: .7;
}

.dark {
    background-color: #121212;
    position: fixed;
}


.opacity {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
    opacity: .6;
    background-color: #121212;
    display: none;
}

/* header */

#header {
    display: flex;
    max-width: 100%;
    height: 6rem;
    position: sticky;
    top: 0;
    z-index: 9999;
    transition: .2s;
}

#header.hide {
    transform: translateY(-6rem);
}

#header.bg {
    background-color: rgba(140, 143, 145, .8);
    height: clamp(4rem, 2.33rem + 2.97vw, 6rem);
}


#header .img-list {
    padding: 0;
    width: clamp(12rem, 5.32rem + 11.86vw, 20rem);
    margin-right: clamp(3rem, -11.196rem + 25.21vw, 20rem);
    line-height: clamp(4rem, 2.33rem + 2.97vw, 6rem);
}

#header .img-list img {
    width: 100%;
    display: inline-block;
    padding: 1.5rem;
    margin-right: 3.5rem;

}

#header ul {
    z-index: 100;
    display: flex;
    line-height: clamp(4rem, 2.33rem + 2.97vw, 6rem);
}

#header li {
    padding-right: clamp(2rem, 0.747rem + 2.22vw, 3.5rem);
    font-size: clamp(0.8rem, 0.382rem + 0.74vw, 1.3rem);
    color: #fff;
}

#header a:hover {
    font-weight: bold;
}

#header .sub-list  {
    position: absolute;
    left: -4.5rem;
    display: none;
    background-color: rgba(20, 81, 183, .8);
    width: clamp(11rem, 7.66rem + 5.93vw, 15rem);
    margin-top: -1rem;
    text-wrap: nowrap;
    padding: clamp(0.7rem, 0.449rem + 0.44vw, 1rem) 0;
    line-height: clamp(1.1rem, 0.599rem + 0.89vw, 1.7rem);
    opacity: 0;
}

#header .sub-list li {
    padding-left: 0;
    display: block;
    margin: 0 auto;
    color: white;
    padding: 1rem 1rem 0.3rem 2rem;
}

#header .sub-list.active {
    animation: fadeIn 1s forwards;
    display: block;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

#header .sub-list li:first-child {
    padding: 0.5rem 1rem 0.3rem 2rem;
}

#header .service-list {
    position: relative;
}

#triangle {
    position:  relative;
}

#header #triangle::after {
    position: absolute;
    content: "";
    top: calc(clamp(0.35rem, 0.266rem + 0.15vw, 0.45rem)* -1);
    left: 0.2rem;
    border: clamp(0.438rem, 0.333rem + 0.19vw, 0.563rem) solid transparent;
    border-top: clamp(0.563rem, 0.458rem + 0.19vw, 0.688rem) solid #f5f6f7;
    cursor: pointer;
}

#header #triangle.active::after {
    border-top: clamp(0.563rem, 0.458rem + 0.19vw, 0.688rem) solid #b9ff72;
}






.nv-button {
    display: flex;
}

.bt-site {
    position: absolute;
    right: clamp(6rem, -2.35rem + 14.83vw, 16rem);
    width: clamp(6rem, -2.35rem + 14.83vw, 16rem);
    height: clamp(4rem, 2.33rem + 2.97vw, 6rem);
    background-color: #2e2e2e;
    z-index: 100;
    
    
}

.bt-site p:hover {
    background-color: #f5f6f7;
    color: #2e2e2e;
    transition: .5s;
    
}

.bt-site p {
    color: #f5f6f7;
    text-align: center;
    font-size: clamp(0.9rem, 0.482rem + 0.74vw, 1.4rem);
    line-height: clamp(4rem, 2.33rem + 2.97vw, 6rem);
}

.bt-contact {
    position: absolute;
    right: 0;
    width: clamp(6rem, -2.35rem + 14.83vw, 16rem);
    height: clamp(4rem, 2.33rem + 2.97vw, 6rem);
    background-color: rgba(20, 81, 183, 1);
    z-index: 100;
    
}

.bt-contact p {
    color: #f5f6f7;
    text-align: center;
    font-size: clamp(0.9rem, 0.482rem + 0.74vw, 1.4rem);
    line-height: clamp(4rem, 2.33rem + 2.97vw, 6rem);
}

.bt-contact p:hover {
    background-color: #f5f6f7;
    color: rgba(20, 81, 183, 1);
    transition: .5s;
}

/* main-sentence */

.main-sentence {
    position: absolute;
    top: clamp(25rem, 8.299rem + 29.66vw, 45rem);
    left: clamp(2rem, -2.175rem + 7.41vw, 7rem);
    color: #f5f6f7;
    z-index: 3;
}

.main-first h2 {
    background-color: rgba(20, 81, 183, .8);
    font-size: clamp(1.7rem, 0.614rem + 1.93vw, 3rem);
    padding: 1rem 1rem;
    text-wrap: nowrap;
    letter-spacing: 0.3rem;
    width: clamp(31.5rem, 15.217rem + 28.92vw, 51rem);
    font-family: "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.main-first p {
    padding: 2rem 0.75rem 2rem 0;
    font-size: clamp(1rem, 0.582rem + 0.74vw, 1.5rem);
    letter-spacing: 0.075rem;
    line-height: 2.75rem;
}


.main-second h2 {
    font-size: clamp(1.7rem, 0.614rem + 1.93vw, 3rem);
    letter-spacing: 0.3rem;
    margin-top: clamp(8rem, 2.155rem + 10.38vw, 15rem);
    line-height: clamp(4rem, 3.582rem + 0.74vw, 4.5rem);
    font-family: "hiragino-mincho-pron" , "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;

}

.second-1 {
    font-size: clamp(1rem, 0.582rem + 0.74vw, 1.5rem);
    margin-top: 5rem;
    letter-spacing: 0.075rem;
    line-height: 2.75rem;
}

.second-2 {
    font-size: clamp(1rem, 0.582rem + 0.74vw, 1.5rem);
    margin-top: 4rem;
    letter-spacing: 0.075rem;
    line-height: 2.75rem;
}

.aboutus {
    width: 95%;
    margin: 0 auto;
    position: relative;
    top: clamp(90rem, 56.599rem + 59.31vw, 130rem);
    background-color: #070522;
    color: #fff;
    height: clamp(27rem, 7.794rem + 34.11vw, 50rem);
}

.aboutus-title {
    padding:clamp(4rem, 3.165rem + 1.48vw, 5rem) clamp(2rem, 0.33rem + 2.97vw, 4rem) clamp(2rem, -0.505rem + 4.45vw, 5rem) clamp(2rem, 0.33rem + 2.97vw, 4rem);
}

.aboutus-title h3 {
    position: relative;
    font-size: clamp(0.8rem, 0.466rem + 0.59vw, 1.2rem);
    margin-left: clamp(0.5rem, 0.082rem + 0.74vw, 1rem);
    z-index: 3;
}

.aboutus-title h2 {
    position: relative;
    font-size: clamp(1.7rem, 1.032rem + 1.19vw, 2.5rem);
    margin-top: 0.4rem;
    font-family: "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    z-index: 3;
}

.aboutus-title img {
    width: clamp(18rem, 12.155rem + 10.38vw, 25rem);
    position: absolute;
    top: clamp(4rem, 3.165rem + 1.48vw, 5rem);
    opacity: .5;
    z-index: 2;
}


.aboutus-flex {
    display: flex;
    margin: 0 clamp(3rem, -1.175rem + 7.41vw, 8rem);
    position: relative;
    justify-content: center;
}

.aboutus-bg-bk {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(23rem, 0.454rem + 40.04vw, 50rem);
    height: clamp(14rem, 1.475rem + 22.24vw, 29rem);
    background-color: #121212;
    opacity: .4;
    z-index: 2;
}


.aboutus-1,
.aboutus-2 {
    padding: 2rem 0 1rem 0;
    position: relative;
    overflow: hidden;
    width: clamp(23rem, 0.454rem + 40.04vw, 50rem);
    height: clamp(14rem, 1.475rem + 22.24vw, 29rem);
    z-index: 3;
}

.aboutus-2::after{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0rem;
    left: 0;
    background: url(../img/pen2.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.aboutus-1::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0rem;
    left: 0;
    background: url(../img/AdobeStock_498674340.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.aboutus-1.hover::after,
.aboutus-2.hover::after {
    transform: scale(1.1);    
    transition: .6s;    
    background-color: rgba(255, 255, 255, .4);
    background-blend-mode: lighten;
}



.aboutus-2 {
    margin-left: 3rem;
}

.aboutus-1 h4, 
.aboutus-2 h4 {
    font-size: clamp(1.1rem, 0.348rem + 1.33vw, 2rem);
    position: absolute;
    top: clamp(9rem, 1.485rem + 13.35vw, 18rem);
    padding: 0 clamp(1.5rem, 0.665rem + 1.48vw, 2.5rem);
    z-index: 3;

}

.aboutus-1 p,
.aboutus-2 p {
    font-size: clamp(0.7rem, 0.366rem + 0.59vw, 1.1rem);
    position: absolute;
    top: clamp(11rem, 1.815rem + 16.31vw, 22rem);
    z-index: 3;
    padding: 0 clamp(1.5rem, 0.665rem + 1.48vw, 2.5rem);
}


.dli-arrow-right {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 0.8;
    position: relative;
    width: clamp(5rem, 3.33rem + 2.97vw, 7rem);
    height: clamp(0.08rem, 0.063rem + 0.03vw, 0.1rem);
    background: currentColor;
    margin-top: clamp(11.1rem, -0.089rem + 19.87vw, 24.5rem);
    margin-left: clamp(16rem, -4.041rem + 35.59vw, 40rem);
    z-index: 3;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: all .3s ease-out;
}

.dli-arrow-right::before {
    content: '';
    width: clamp(1rem, 0.582rem + 0.74vw, 1.5rem);
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.dli-arrow-right.hover {
    animation: scale .6s forwards;
    transition: .6s;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

@keyframes scale {
    100% {
        width: clamp(6.5rem, 4.83rem + 2.97vw, 8.5rem);
    }
    0%{
        width: clamp(5rem, 3.33rem + 2.97vw, 7rem);
    }
}

.dli-arrow-right2 {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 0.8;
    position: relative;
    width: clamp(5rem, 3.33rem + 2.97vw, 7rem);
    height: clamp(0.08rem, 0.063rem + 0.03vw, 0.1rem);
    background: currentColor;
    margin-top: clamp(11.1rem, -0.089rem + 19.87vw, 24.5rem);
    margin-left: clamp(16rem, -4.041rem + 35.59vw, 40rem);
    z-index: 3;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: all .3s ease-out;
}

.dli-arrow-right2::before {
    content: '';
    width: clamp(1rem, 0.582rem + 0.74vw, 1.5rem);
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.dli-arrow-right2.hover {
    animation: scale .6s forwards;
    transition: .6s;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}




/* #service-main */

#service-main {
    background-color: #f5f6f7;
    height: clamp(47.5rem, 12.011rem + 63.02vw, 90rem);
    position: relative;
    margin-top: clamp(100rem, 66.599rem + 59.31vw, 140rem);
}

.home-title {
    padding: 5rem clamp(1rem, -1.505rem + 4.45vw, 4rem) clamp(3rem, 1.33rem + 2.97vw, 5rem) clamp(1rem, -1.505rem + 4.45vw, 4rem);
}

.home-title h3 {
    position: relative;
    font-size: clamp(0.8rem, 0.466rem + 0.59vw, 1.2rem);
    margin-left: clamp(0.5rem, 0.082rem + 0.74vw, 1rem);
    margin-top: 0.2rem;
    z-index: 3;
    letter-spacing: 0.1rem;
}

.home-title h2 {
    position: relative;
    font-size: clamp(1.7rem, 1.032rem + 1.19vw, 2.5rem);
    margin-top: 0.2rem;
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    z-index: 3;
    letter-spacing: 0.2rem;
}

.home-title img {
    width: clamp(18rem, 12.155rem + 10.38vw, 25rem);
    position: absolute;
    top: 5rem;
    opacity: .2;
}



.service-sen {
    font-size: clamp(1.2rem, 0.532rem + 1.19vw, 2rem);
    letter-spacing: 0.1rem;
    margin: clamp(2.5rem, -0.84rem + 5.93vw, 6.5rem) clamp(1rem, -1.505rem + 4.45vw, 4rem);
    position: relative;
    overflow: hidden;
    background: transparent;
    border-left: 5px solid rgba(20, 81, 183, .6);
    padding: 0.5rem;
}

.flex-six {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: clamp(14rem, 13.165rem + 1.48vw, 15rem);
    left: clamp(10.5rem, 0.897rem + 17.05vw, 22rem);
    overflow: hidden;
}

.flex-img {
    width: clamp(13rem, -1.196rem + 25.21vw, 30rem);
    height: clamp(13rem, -1.196rem + 25.21vw, 30rem);
    overflow: hidden;
    position: relative;
    margin: 0 1rem 2rem 1rem;
}

.flex-img-bg-bk {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(13rem, -1.196rem + 25.21vw, 30rem);
    height: clamp(13rem, -1.196rem + 25.21vw, 30rem);
    background-color: #121212;
    z-index: 2;
    opacity: .4;
}

.flex-img h4 {
    font-size: clamp(0.9rem, 0.232rem + 1.19vw, 1.7rem);
    color: #fff;
    position: absolute;
    top: clamp(9rem, -0.185rem + 16.31vw, 20rem);
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, 50%);
    margin: 0;
    padding: 0;
    z-index: 3;
}


/* .darkest {
    background-color: #070522;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: .4;
} */

.flex-img:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(../img/IMG_3394.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
background-repeat: no-repeat;
}

.flex-img.hover:after {
    transform: scale(1.1);
    transition: .6s;
    background-color: rgba(255, 255, 255, .4);
    background-blend-mode: lighten;
}

.flex-img02 {
    width: clamp(13rem, -1.196rem + 25.21vw, 30rem);
    height: clamp(13rem, -1.196rem + 25.21vw, 30rem);
    overflow: hidden;
    position: relative;
    margin: 0 1rem 2rem 1rem;
}


.flex-img02 h4 {
    font-size: clamp(0.9rem, 0.232rem + 1.19vw, 1.7rem);
    color: #fff;
    position: absolute;
    top: clamp(9rem, -0.185rem + 16.31vw, 20rem);
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, 50%);
    margin: 0;
    padding: 0;
    z-index: 3;
}


.flex-img02:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(../img/sp.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    }
    
    .flex-img02.hover:after {
        transform: scale(1.1);
        transition: .6s;
        background-color: rgba(255, 255, 255, .4);
        background-blend-mode: lighten;
    }

    .flex-img03 {
        width: clamp(13rem, -1.196rem + 25.21vw, 30rem);
        height: clamp(13rem, -1.196rem + 25.21vw, 30rem);
        overflow: hidden;
        position: relative;
        margin: 0 1rem 2rem 1rem;
    }


.flex-img03 h4 {
    font-size: clamp(0.9rem, 0.232rem + 1.19vw, 1.7rem);
    color: #fff;
    position: absolute;
    top: clamp(9rem, -0.185rem + 16.31vw, 20rem);
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, 50%);
    margin: 0;
    padding: 0;
    z-index: 3;
}


    .flex-img03:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background-image: url(../img/IMG_8208.JPG.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    }
    
    .flex-img03.hover:after {
        transform: scale(1.1);
        transition: .6s;
        background-color: rgba(255, 255, 255, .4);
        background-blend-mode: lighten;
    }

    .flex-img04 {
        width: clamp(13rem, -1.196rem + 25.21vw, 30rem);
        height: clamp(13rem, -1.196rem + 25.21vw, 30rem);
        overflow: hidden;
        position: relative;
        margin: 0 1rem 2rem 1rem;
    }


.flex-img04 h4 {
    font-size: clamp(0.9rem, 0.232rem + 1.19vw, 1.7rem);
    color: #fff;
    position: absolute;
    top: clamp(9rem, -0.185rem + 16.31vw, 20rem);
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, 50%);
    margin: 0;
    padding: 0;
    z-index: 3;
}


    .flex-img04:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(../img/water.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    }
    
    .flex-img04.hover:after {
        transform: scale(1.1);
        transition: .6s;
        background-color: rgba(255, 255, 255, .4);
        background-blend-mode: lighten;
    }

    .flex-img05 {
        width: clamp(13rem, -1.196rem + 25.21vw, 30rem);
        height: clamp(13rem, -1.196rem + 25.21vw, 30rem);
        overflow: hidden;
        position: relative;
        margin: 0 1rem 2rem 1rem;
    }


    .flex-img05 h4 {
        font-size: clamp(0.9rem, 0.232rem + 1.19vw, 1.7rem);
        color: #fff;
        position: absolute;
        top: clamp(9rem, -0.185rem + 16.31vw, 20rem);
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, 50%);
        margin: 0;
        padding: 0;
        z-index: 3;
    }


    .flex-img05:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(../img/IMG_2568.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    }
    
    .flex-img05.hover:after {
        transform: scale(1.1);
        transition: .6s;
        background-color: rgba(255, 255, 255, .4);
        background-blend-mode: lighten;
    }

    .flex-img06 {
        width: clamp(13rem, -1.196rem + 25.21vw, 30rem);
        height: clamp(13rem, -1.196rem + 25.21vw, 30rem);
        overflow: hidden;
        position: relative;
        margin: 0 1rem 2rem 1rem;
    }


    .flex-img06 h4 {
        font-size: clamp(0.9rem, 0.232rem + 1.19vw, 1.7rem);
        color: #fff;
        position: absolute;
        top: clamp(9rem, -0.185rem + 16.31vw, 20rem);
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, 50%);
        margin: 0;
        padding: 0;
        z-index: 3;
    }


    .flex-img06:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(../img/IMG_5052.JPG.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;    background-repeat: no-repeat;
    }
    
    .flex-img06.hover:after {
        transform: scale(1.1);
        transition: .6s;
        background-color: rgba(255, 255, 255, .4);
        background-blend-mode: lighten;
    }




.dli-arrow-right-small1 {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 0.8;
    position: relative;
    width: clamp(3rem, 2.165rem + 1.48vw, 4rem);
    height: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem);
    background: currentColor;
    margin-left: clamp(8.5rem, -3.608rem + 21.5vw, 23rem);
    margin-top: clamp(11.5rem, -0.608rem + 21.5vw, 26rem);
    z-index: 3;
}

.dli-arrow-right-small1::before {
    content: '';
    width: 0.8em;
    border: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem) solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
}

.dli-arrow-right-small1.hover {
    animation: scales .6s forwards;
    transition: .6s;
}

@keyframes scales {
    100% {
        width: clamp(4rem, 2.747rem + 2.22vw, 5.5rem);
    }
    0%{
        width: clamp(3rem, 2.165rem + 1.48vw, 4rem);
    }
}


.dli-arrow-right-small2 {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 0.8;
    position: relative;
    width: clamp(3rem, 2.165rem + 1.48vw, 4rem);
    height: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem);
    background: currentColor;
    margin-left: clamp(8.5rem, -3.608rem + 21.5vw, 23rem);
    margin-top: clamp(11.5rem, -0.608rem + 21.5vw, 26rem);
    z-index: 3;
}

.dli-arrow-right-small2::before {
    content: '';
    width: 0.8em;
    border: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem) solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
}

.dli-arrow-right-small2.hover {
    animation: scales .6s forwards;
    transition: .6s;
}

.dli-arrow-right-small3 {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 0.8;
    position: relative;
    width: clamp(3rem, 2.165rem + 1.48vw, 4rem);
    height: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem);
    background: currentColor;
    margin-left: clamp(8.5rem, -3.608rem + 21.5vw, 23rem);
    margin-top: clamp(11.5rem, -0.608rem + 21.5vw, 26rem);
    z-index: 3;
}

.dli-arrow-right-small3::before {
    content: '';
    width: 0.8em;
    border: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem) solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
}

.dli-arrow-right-small3.hover {
    animation: scales .6s forwards;
    transition: .6s;
}


.dli-arrow-right-small4 {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 0.8;
    position: relative;
    width: clamp(3rem, 2.165rem + 1.48vw, 4rem);
    height: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem);
    background: currentColor;
    margin-left: clamp(8.5rem, -3.608rem + 21.5vw, 23rem);
    margin-top: clamp(11.5rem, -0.608rem + 21.5vw, 26rem);
    z-index: 3;
}

.dli-arrow-right-small4::before {
    content: '';
    width: 0.8em;
    border: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem) solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
}

.dli-arrow-right-small4.hover {
    animation: scales .6s forwards;
    transition: .6s;
}

.dli-arrow-right-small5 {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 0.8;
    position: relative;
    width: clamp(3rem, 2.165rem + 1.48vw, 4rem);
    height: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem);
    background: currentColor;
    margin-left: clamp(8.5rem, -3.608rem + 21.5vw, 23rem);
    margin-top: clamp(11.5rem, -0.608rem + 21.5vw, 26rem);
    z-index: 3;
}

.dli-arrow-right-small5::before {
    content: '';
    width: 0.8em;
    border: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem) solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
}

.dli-arrow-right-small5.hover {
    animation: scales .6s forwards;
    transition: .6s;
}

.dli-arrow-right-small6 {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 0.8;
    position: relative;
    width: clamp(3rem, 2.165rem + 1.48vw, 4rem);
    height: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem);
    background: currentColor;
    margin-left: clamp(8.5rem, -3.608rem + 21.5vw, 23rem);
    margin-top: clamp(11.5rem, -0.608rem + 21.5vw, 26rem);
    z-index: 3;
}

.dli-arrow-right-small6::before {
    content: '';
    width: 0.8em;
    border: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem) solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
}

.dli-arrow-right-small6.hover {
    animation: scales .6s forwards;
    transition: .6s;
}


/* .news-main */

.news-main {
    position: relative;
    width: 100%;
    height: clamp(55rem, 34.124rem + 37.07vw, 80rem);
    background-color: #ffffff;
}

.news-main .home-title {
    padding: 5rem clamp(1rem, -6.515rem + 13.35vw, 10rem) clamp(3rem, 1.33rem + 2.97vw, 5rem) clamp(1rem, -6.515rem + 13.35vw, 10rem);
}

.news-date {
    width: clamp(50rem, 8.248rem + 74.14vw, 100rem);
    margin: 0 auto;
    position: relative;
}

.news-date ul {
    position: relative;
}

.news-date li {   
    border-bottom: 1px rgba(112, 112, 112, .5) solid;
    padding: clamp(3rem, 1.33rem + 2.97vw, 5rem) 0;
    font-size: clamp(1.2rem, 0.782rem + 0.74vw, 1.7rem);
    letter-spacing: 0.1rem;
}

.news-date li span {
    font-size: clamp(1rem, 0.749rem + 0.44vw, 1.3rem);
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    letter-spacing: 0;
    padding: 0 4rem 0 2rem;
    color: #8c8f91;
}

.news-sen {
    margin-top: clamp(3.5rem, 1.83rem + 2.97vw, 5.5rem);
    margin-right: clamp(3.3rem, -10.645rem + 24.76vw, 20rem);
    text-align: right;
}

.news-sen a {
    display: inline-block;
    transition: 0.5s;
}

.news-sen a:hover {
    color: #f5f6f7;
    text-shadow: -1px 1px 5px #070522, 1px -1px 5px #070522;
}

.news-sen p {
    font-size: clamp(1.2rem, 0.532rem + 1.19vw, 2rem);
    
    
}

.dli-arrow-right-mini {
    display: inline-block;
    vertical-align: middle;
    color: rgba(112, 112, 112, .7);
    line-height: 0.8;
    position: relative;
    width: 2rem;
    height: 0.06em;
    background: currentColor;
    margin-left: 2rem;
    z-index: 3;
}

.dli-arrow-right-mini::before {
    content: '';
    width: 0.4em;
    height: 0.4em;
    border: 0.07em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
}


/* 。information-main */

.information-main {
    height: clamp(47rem, 15.269rem + 56.35vw, 85rem);
    background-color: #f5f6f7;
    position: relative;
    margin-top: -0.05rem;
}

.information-main .home-title {
    padding: 5rem clamp(1rem, -6.515rem + 13.35vw, 10rem) clamp(3rem, 1.33rem + 2.97vw, 5rem) clamp(1rem, -6.515rem + 13.35vw, 10rem);
}

.company {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.summary {
    width: clamp(25rem, 4.124rem + 37.07vw, 50rem);
    height: clamp(25rem, 4.124rem + 37.07vw, 50rem);
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    margin-right: 2rem;
    position: relative;
    overflow: hidden;
}

.summary::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(../img/AdobeStock_293294423.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, .5);
    background-blend-mode: lighten;
    }

    .summary.hover::after  {
        transform: scale(1.1);
        background-color: rgba(255, 255, 255, .2);
        background-blend-mode: lighten;
    }

.summary p {
    font-size: clamp(0.8rem, 0.382rem + 0.74vw, 1.3rem);
    margin: clamp(2rem, -0.505rem + 4.45vw, 5rem) 0 0 clamp(2rem, 0.33rem + 2.97vw, 4rem);
    position: relative;
    z-index: 2;

}

.summary h4 {
    font-size: clamp(2rem, 1.582rem + 0.74vw, 2.5rem);
    margin: clamp(1rem, 0.165rem + 1.48vw, 2rem) 0 0 clamp(1.5rem, -0.17rem + 2.97vw, 3.5rem);    
    position: relative;
    z-index: 2;
}

.results {
    width: clamp(25rem, 4.124rem + 37.07vw, 50rem);
    height: clamp(25rem, 4.124rem + 37.07vw, 50rem);
    font-family: "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    position: relative;
    overflow: hidden;
}

.results::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(../img/AdobeStock_56400270.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, .5);
    background-blend-mode: lighten;
    }

    .results.hover::after  {
        transform: scale(1.1);
        background-color: rgba(255, 255, 255, .2);
        background-blend-mode: lighten;
    }

.results p {
    font-size: clamp(0.8rem, 0.382rem + 0.74vw, 1.3rem);
    margin: clamp(2rem, -0.505rem + 4.45vw, 5rem) 0 0 clamp(2rem, 0.33rem + 2.97vw, 4rem);
    position: relative;
    z-index: 2;

}

.results h4 {
    font-size: clamp(2rem, 1.582rem + 0.74vw, 2.5rem);
    margin: clamp(1rem, 0.165rem + 1.48vw, 2rem) 0 0 clamp(1.5rem, -0.17rem + 2.97vw, 3.5rem);    
    position: relative;
    z-index: 2;
}

.dli-arrow-right-minimum1 {
    display: inline-block;
    vertical-align: middle;
    color: #070522;
    line-height: 0.8;
    position: relative;
    width: clamp(6rem, 4.33rem + 2.97vw, 8rem);
    height: clamp(0.08rem, 0.047rem + 0.06vw, 0.12rem);
    background: currentColor;
    margin-left: clamp(16rem, -2.371rem + 32.62vw, 38rem);
    margin-top: clamp(16.5rem, 1.052rem + 27.43vw, 35rem);
    z-index: 3;
}

.dli-arrow-right-minimum1::before {
    content: '';
    width: clamp(1.5rem, 1.082rem + 0.74vw, 2rem);
    border: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem) solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
}

.dli-arrow-right-minimum1.hover {
    animation: pint .6s forwards;
    transition: .6s;
}

@keyframes pint {
    100% {
        width: clamp(7.5rem, 5.83rem + 2.97vw, 9.5rem);
    }

    0% {
        width: clamp(6rem, 4.33rem + 2.97vw, 8rem);
    }
}

.dli-arrow-right-minimum2 {
    display: inline-block;
    vertical-align: middle;
    color: #070522;
    line-height: 0.8;
    position: relative;
    width: clamp(6rem, 4.33rem + 2.97vw, 8rem);
    height: clamp(0.08rem, 0.047rem + 0.06vw, 0.12rem);
    background: currentColor;
    margin-left: clamp(16rem, -2.371rem + 32.62vw, 38rem);
    margin-top: clamp(16.5rem, 1.052rem + 27.43vw, 35rem);
    z-index: 3;
}

.dli-arrow-right-minimum2::before {
    content: '';
    width: clamp(1.5rem, 1.082rem + 0.74vw, 2rem);
    border: clamp(0.1rem, 0.058rem + 0.07vw, 0.15rem) solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
}

.dli-arrow-right-minimum2.hover {
    animation: pint .6s forwards;
    transition: .6s;
}

/* #contact */

#contact {
    height: clamp(40rem, 23.299rem + 29.66vw, 60rem);
    background-color: #2e2e2e;
    position: relative;
    color: #fff8f8;
}

#contact .home-title {
    color: #fff8f8;
    padding: clamp(4rem, 1.495rem + 4.45vw, 7rem) clamp(1rem, -1.505rem + 4.45vw, 4rem) clamp(2rem, -2.175rem + 7.41vw, 7rem) clamp(1rem, -1.505rem + 4.45vw, 4rem);
}

#contact .home-title img {
    opacity: .4;
    top: clamp(4rem, 1.495rem + 4.45vw, 7rem);
}

.contact-container {
    display: flex;
    /* position: relative; */
    border-bottom: 1px #8c8f91 solid;
    height: clamp(27rem, 20.32rem + 11.86vw, 35rem);
}

.contact-container::before {
    content: "";
    height: clamp(36.2rem, 21.837rem + 25.51vw, 53.4rem);
    width: 1px;
    background-color: #8c8f91;
    position: absolute;
    left: 60%;
    top: 0;
}

.contact-flex {
    width: 65%;
    padding-left: clamp(1rem, -1.505rem + 4.45vw, 4rem);
    margin-top: 2rem;
}

.contact-sen {
    font-size: clamp(1.05rem, 0.591rem + 0.82vw, 1.6rem);
    letter-spacing: 0.08rem;
    line-height: 2.5rem;
}

.sentence-flex {
    display: flex;
    margin-top: clamp(3rem, 0.495rem + 4.45vw, 6rem);
    position: relative;
}

.bt {
    border: 1px #f5f6f7 solid;
    padding: clamp(1rem, 0.582rem + 0.74vw, 1.5rem) clamp(3.5rem, -0.258rem + 6.67vw, 8rem);
    font-size: clamp(0.9rem, 0.232rem + 1.19vw, 1.7rem);
    transition: .6s;
}

.bt:hover {
    background-color: #f5f6f7;
    color: #2e2e2e;
}

.phone-num {
    font-size: clamp(1.4rem, 0.481rem + 1.63vw, 2.5rem);
    letter-spacing: 0.15rem;
    line-height: 3rem;
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    position: absolute;
    top: clamp(-1.5rem, -2.753rem + 2.22vw, 0rem);
    left:clamp(19.3rem, -0.49rem + 35.14vw, 43rem);
}

.phone-num span {
    font-size: clamp(0.7rem, 0.366rem + 0.59vw, 1.1rem);
    text-align: center;
    display: block;
}


.contact-list {
    position: relative;
    width: 43.3%;
    height: (36.2rem, 21.837rem + 25.51vw, 53.4rem);
    text-align: center;
    margin-top: calc(clamp(5rem, -0.01rem + 8.9vw, 11rem)* -1);
}

.contact-table a:hover {
    font-weight: 600;
}

.contact-list img {
    width: clamp(12rem, 5.32rem + 11.86vw, 20rem);
}

.contact-table {
    margin-top: clamp(4.5rem, 4.082rem + 0.74vw, 5rem);
    margin-left: clamp(1rem, -5.68rem + 11.86vw, 9rem);
    text-align: left;
    font-size: clamp(0.9rem, 0.566rem + 0.59vw, 1.3rem);
    position: relative;
    /* height: 30rem; */
}

.contact-table li {
    padding: clamp(1rem, 0.833rem + 0.3vw, 1.2rem);
    position: relative;
    width: 15rem;
}

.contact-table li:after {
    content: "";
    background-color: #8c8f91;
    width: clamp(8rem, 2.155rem + 10.38vw, 15rem);
    height: 0.1rem;
    position: absolute;
    left: 0;
    bottom: 0;
}





.table-name {
    display: block;
    position: absolute;
    left: clamp(9rem, -0.185rem + 16.31vw, 20rem);
    top: 0;
    background-color: #8c8f91;
    text-align: center;
}

.table-name li {
    padding: 0.6rem 1rem;
    font-size: (0.8rem, 0.382rem + 0.74vw, 1.3rem);
    width: clamp(11rem, 7.66rem + 5.93vw, 15rem);
}

.table-name a:hover {
    font-weight: bold;
}

.table-name li:nth-child(1) {
    padding-top: 1rem;
}

.table-name li:nth-child(6) {
    padding-bottom: 1rem;
}

.table-name li::after {
    content: none;
}

.triangle-arrow-right {
    position: relative;
}

.triangle-arrow-right::after {
        position: absolute;
        left: clamp(1.5rem, -2.258rem + 6.67vw, 6rem);
        vertical-align: middle;
        content: "";
        top: 50%;
        transform: translateY(-50%);   /* 縦軸をセンタリングする */  
        border: clamp(0.438rem, 0.281rem + 0.28vw, 0.625rem) solid transparent;
        border-left: clamp(0.75rem, 0.437rem + 0.56vw, 1.125rem) solid #f5f6f7; 
}

.contact-list2 {
    display: none;
}


.copylight {
    font-size: clamp(0.7rem, 0.449rem + 0.44vw, 1rem);
}


/* about.html */

.main-img {
    height: clamp(34rem, 20.667rem + 23.7vw, 50rem);
    width: 100%;
    background-image: url(../img/AdobeStock_498674340.jpeg);
    background-size: cover; 
    background-blend-mode: lighten;
    background-color: rgba(255, 255, 255, .2);
    position: absolute;
    top: 0;
    left: 0;
}

.darks {
    background-color: #121212;
    height: clamp(34rem, 20.667rem + 23.7vw, 50rem);
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
    opacity: .2;
}

.about-main-title {
    position: relative;
    text-align: center;
    color: #f5f6f7;
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    height: 15rem;
    z-index: 5;
}

.about-main-title h3 {
    font-size: clamp(1.5rem, 1.083rem + 0.74vw, 2rem);
    margin-top: clamp(8rem, 0.5rem + 13.33vw, 17rem);
    margin-bottom: clamp(1.7rem, 1.45rem + 0.44vw, 2rem);
}

.about-main-title h2 {
    background-color: rgba(20, 81, 183, .8);
    font-size: clamp(2.5rem, 1.667rem + 1.48vw, 3.5rem);
    padding: 1rem 1rem;
    letter-spacing: 0.3rem;
    width: clamp(35rem, 21.667rem + 23.7vw, 51rem);
    margin: 0 auto;
}

.position {
    position: absolute;
    top: clamp(33.5rem, 19.722rem + 24.47vw, 50rem);
    right: clamp(4rem, -15.167rem + 34.07vw, 27rem);
    font-size: clamp(0.8rem, 0.633rem + 0.3vw, 1rem);
    z-index: 5;
}

.position-list {
    display: flex;
    justify-content: end;
}

.position-list li {
    margin: 1.5rem 1rem;
}

.position-first {
    position: relative;
    color: #8c8f91;
}

.position-first:hover {
    color: #121212;
    border-bottom: 1px #121212 solid;
}

.position-first::before {
    content: '';
    width: 0.5em;
    height: 0.5em;
    border: 0.15em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -1.2em;
    box-sizing: border-box;
    color: #121212;
}

/* #my-features */

#my-features {
    position: relative;
    text-align: center;
    margin-top: clamp(15rem, 6.65rem + 14.83vw, 25rem);
    padding-bottom: 20rem;
    color: #121212;
}

.features-h2 {
    font-size: clamp(1.7rem, 1.033rem + 1.19vw, 2.5rem);
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    padding: 4rem;
    letter-spacing: 0.08rem;
}

.features-p {
    width: clamp(33rem, 18.804rem + 25.21vw, 50rem);
    margin: 0 auto;
    letter-spacing: 0.3rem;
    font-size: clamp(1rem, 0.583rem + 0.74vw, 1.5rem);
    line-height: clamp(2.7rem, 2.032rem + 1.19vw, 3.5rem);
}

.features-img01 {
    position: absolute;
    top: 0;
    left: clamp(2rem, -8.833rem + 19.26vw, 15rem);
    width: clamp(11rem, 3.5rem + 13.33vw, 20rem);
}

.features-img01 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.features-img02 {
    position: absolute;
    bottom: clamp(64rem, 58.99rem + 8.9vw, 70rem);
    right: clamp(1rem, -10.667rem + 20.74vw, 15rem);
    width: clamp(12rem, 7.833rem + 7.41vw, 17rem);
}

.features-img02 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.features-img03 {
    position: absolute;
    bottom: clamp(39rem, 34.833rem + 7.41vw, 44rem);
    right: clamp(3rem, 2.167rem + 1.48vw, 4rem);
    width: clamp(9rem, 5.667rem + 5.93vw, 13rem);
}

.features-img03 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.features-img04 {
    position: absolute;
    bottom: clamp(17rem, 12rem + 8.89vw, 23rem);
    right: clamp(6rem, 1rem + 8.89vw, 12rem);
    width: clamp(13rem, 11.333rem + 2.96vw, 15rem);
}

.features-img04 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.features-img05 {
    position: absolute;
    bottom: clamp(20rem, 11.667rem + 14.81vw, 30rem);
    left: clamp(1rem, -1.5rem + 4.44vw, 4rem);
    width: clamp(14rem, 9rem + 8.89vw, 20rem);
}

.features-img05 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}


/* ＃reason */

#reason {
    position: relative;
    display: block;
    height: clamp(53.5rem, 43.897rem + 17.05vw, 65rem);
    text-align: left;
    background-color: rgba(20, 81, 183, .6);
    color: #f5f6f7;
}

.reason-dark {
    display: none;
}

#reason > p {
    padding: clamp(4rem, 2.33rem + 2.97vw, 6rem) 0rem 0.2rem clamp(3rem, -4.933rem + 14.09vw, 12.5rem);
    font-size: clamp(0.8rem, 0.549rem + 0.44vw, 1.1rem);
    letter-spacing: 0.1rem;
}

#reason h2 {
    font-size: clamp(1.7rem, 1.032rem + 1.19vw, 2.5rem);
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    padding: 0rem clamp(2.5rem, -5.015rem + 13.35vw, 11.5rem);
    letter-spacing: 0.08rem;
}

.reason-flex {
    display: flex;
    position: absolute;
    top: clamp(8rem, 6.33rem + 2.97vw, 10rem);
    width: 100%;
    justify-content: center;
}

.reason-exp {
    width: 32rem;
    margin: 5rem 0rem 0 clamp(2rem, 1.165rem + 1.48vw, 3rem);
}

.reason-exp:nth-child(1) {
    margin-left: clamp(2rem, -5.933rem + 14.09vw, 11.5rem);
}

.reason-exp:nth-child(3) {
    margin-right: clamp(2rem, -8.02rem + 17.79vw, 14rem);
}

.reason-exp img {
    width: 100%;
}

.reason-exp h3 {
    text-align: center;
    font-size: clamp(1.3rem, 0.799rem + 0.89vw, 1.9rem);
    padding-top: clamp(2.2rem, 1.532rem + 1.19vw, 3rem);
    letter-spacing: 0.15rem;
}

.reason-exp p {
    padding-top: 2rem;
    font-size: clamp(0.9rem, 0.566rem + 0.59vw, 1.3rem);
    letter-spacing: 0.12rem;
    line-height: 2.1rem;
}

/* #choice */
#choice {
    position: relative;
    background-color: #f5f6f7;
    height: clamp(32rem, 12.794rem + 34.11vw, 55rem);
}

.choice-flex {
    display: flex;
    justify-content: center;
}

.choice-exp01 {
    width: clamp(25rem, 4.124rem + 37.07vw, 50rem);
    height: clamp(18rem, 3.804rem + 25.21vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: clamp(7rem, 4.495rem + 4.45vw, 10rem) 1rem ;
}

.choice-exp01::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/P7120166.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, .5);
    background-blend-mode: lighten;
}

.choice-exp01:hover::after  {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, .2);
    background-blend-mode: lighten;
}
.choice-exp01 h2 {
    font-size: clamp(1.7rem, 1.032rem + 1.19vw, 2.5rem);
    position: absolute;
    right: 5rem;
    bottom: clamp(2.2rem, -0.138rem + 4.15vw, 5rem);
    z-index: 2;
}

.choice-exp02 {
    width: clamp(25rem, 4.124rem + 37.07vw, 50rem);
    height: clamp(18rem, 3.804rem + 25.21vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: clamp(7rem, 4.495rem + 4.45vw, 10rem) 1rem ;
}

.choice-exp02::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/date.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, .5);
    background-blend-mode: lighten;
}

.choice-exp02:hover::after  {
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, .2);
    background-blend-mode: lighten;
}
.choice-exp02 h2 {
    font-size: clamp(1.7rem, 1.032rem + 1.19vw, 2.5rem);
    position: absolute;
    right: 5rem;
    bottom: clamp(2.2rem, -0.138rem + 4.15vw, 5rem);
    z-index: 2;
}

.dli-arrow-right-about {
    display: inline-block;
    vertical-align: middle;
    color: #070522;
    line-height: 0.8;
    position: relative;
    width: clamp(7.5rem, 7.082rem + 0.74vw, 8rem);
    height: 0.12em;
    background: currentColor;
    margin-left: clamp(14.5rem, -6.793rem + 37.81vw, 40rem);
    margin-top: clamp(16.3rem, 4.025rem + 21.8vw, 31rem);
    z-index: 3;
}

.dli-arrow-right-about::before {
    content: '';
    width: clamp(1.7rem, 1.449rem + 0.44vw, 2rem);
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -0.05em;
    box-sizing: border-box;
}

/* service.html */

.main-img02 {
    height: clamp(34rem, 20.667rem + 23.7vw, 50rem);
    width: 100%;
    background-image: url(../img/haikan.JPG);
    background-size: cover; 
    background-blend-mode: lighten;
    background-color: rgba(255, 255, 255, .2);
    position: absolute;
    top: 0;
    left: 0;
}

/* .service-block */

.service-block {
    position: relative;
    background-color: #f5f6f7;
    margin-top: clamp(5rem, -0.845rem + 10.38vw, 12rem);
        overflow: hidden;
}

.border {
    border-bottom: 2px solid rgba(46, 46, 46, .5);
}

.service-exp {
    margin: 0 auto 0 auto;
    padding-bottom: clamp(7rem, 4.495rem + 4.45vw, 10rem);
    width:  100rem;

}

.service-exp:nth-child(1) {
    padding-top: 5rem;
    /* padding-left: 7rem; */
}

.service-exp .service-title {
    font-size: clamp(1.7rem, 1.032rem + 1.19vw, 2.5rem);
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    margin-top: clamp(2rem, -0.505rem + 4.45vw, 5rem);
    margin-bottom: 3rem;
    margin-left: clamp(2rem, -4.68rem + 11.86vw, 10rem);
    padding: 1rem 0 1rem clamp(1rem, -0.67rem + 2.97vw, 3rem);
    position: relative;
    overflow: hidden;
    background: transparent;
    border-left: 5px solid rgba(20, 81, 183, .6);
    display: inline-block;
}


.service-title span {
    font-family: 'Font Awesome 5 Free';
    font-size: clamp(3.5rem, 2.247rem + 2.22vw, 5rem);
    position: absolute;
    z-index: 1;
    top: calc(clamp(1rem, 0.582rem + 0.74vw, 1.5rem)* -1);
    left: 0;
    display: block;
    padding-top: 1rem;
    padding-left: clamp(0.5rem, 0.082rem + 0.74vw, 1rem);
    color: rgba(112, 112, 112, .2);
}

.service-flex {
    display: flex;
}

.service-img {
    width: clamp(20rem, 3.299rem + 29.66vw, 40rem);
    height: clamp(27rem, 20.32rem + 11.86vw, 35rem);
    position: relative;
    overflow: hidden;
    margin-right: clamp(3rem, -2.845rem + 10.38vw, 10rem);
    margin-left: clamp(2rem, -4.68rem + 11.86vw, 10rem);
}

.service-img::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_1888.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    /* background-color: rgba(255, 255, 255, .5);
    background-blend-mode: lighten; */
}

.service-img02 {
    width: clamp(20rem, 3.299rem + 29.66vw, 40rem);
    height: clamp(27rem, 20.32rem + 11.86vw, 35rem);
    position: relative;
    overflow: hidden;
    margin-right: clamp(3rem, -2.845rem + 10.38vw, 10rem);
    margin-left: clamp(2rem, -4.68rem + 11.86vw, 10rem);
}

.service-img02::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/sp.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    /* background-color: rgba(255, 255, 255, .5);
    background-blend-mode: lighten; */
}

.service-img03 {
    width: clamp(20rem, 3.299rem + 29.66vw, 40rem);
    height: clamp(27rem, 20.32rem + 11.86vw, 35rem);
    position: relative;
    overflow: hidden;
    margin-right: clamp(3rem, -2.845rem + 10.38vw, 10rem);
    margin-left: clamp(2rem, -4.68rem + 11.86vw, 10rem);
}

.service-img03::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_0233.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    /* background-color: rgba(255, 255, 255, .5);
    background-blend-mode: lighten; */
}

.service-img04 {
    width: clamp(20rem, 3.299rem + 29.66vw, 40rem);
    height: clamp(27rem, 20.32rem + 11.86vw, 35rem);
    position: relative;
    overflow: hidden;
    margin-right: clamp(3rem, -2.845rem + 10.38vw, 10rem);
    margin-left: clamp(2rem, -4.68rem + 11.86vw, 10rem);
}

.service-img04::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/water.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    /* background-color: rgba(255, 255, 255, .5);
    background-blend-mode: lighten; */
}

.service-img05 {
    width: clamp(20rem, 3.299rem + 29.66vw, 40rem);
    height: clamp(27rem, 20.32rem + 11.86vw, 35rem);
    position: relative;
    overflow: hidden;
    margin-right: clamp(3rem, -2.845rem + 10.38vw, 10rem);
    margin-left: clamp(2rem, -4.68rem + 11.86vw, 10rem);
}

.service-img05::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_2568.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    /* background-color: rgba(255, 255, 255, .5);
    background-blend-mode: lighten; */
}

.service-img06 {
    width: clamp(20rem, 3.299rem + 29.66vw, 40rem);
    height: clamp(27rem, 20.32rem + 11.86vw, 35rem);
    position: relative;
    overflow: hidden;
    margin-right: clamp(3rem, -2.845rem + 10.38vw, 10rem);
    margin-left: clamp(2rem, -4.68rem + 11.86vw, 10rem);
}

.service-img06::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/LED.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
    /* background-color: rgba(255, 255, 255, .5);
    background-blend-mode: lighten; */
}

.service-sentence {
    width: clamp(30rem, 4.949rem + 44.49vw, 60rem);
    margin-right: 10rem;

    
}

.service-sentence h2 {
    padding: 0;
    margin-top: 0;
    border-bottom: 2px solid #070522;
    display: inline-block;
    font-size: clamp(1.6rem, 1.015rem + 1.04vw, 2.3rem);
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.service-sentence p {
    font-size: clamp(1rem, 0.666rem + 0.59vw, 1.4rem);
    letter-spacing: clamp(0.15rem, 0.108rem + 0.07vw, 0.2rem);
    line-height: clamp(3rem, 2.833rem + 0.3vw, 3.2rem);
    padding-top: clamp(1.5rem, 0.665rem + 1.48vw, 2.5rem);
}

a.btn {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: clamp(0.9rem, 0.482rem + 0.74vw, 1.4rem);
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: clamp(0.7rem, 0.449rem + 0.44vw, 1rem) clamp(3.5rem, 3.082rem + 0.74vw, 4rem);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #2e2e2e;
    border-radius: 0.5rem;
    margin-top: clamp(2.5rem, -0.59rem + 5.49vw, 6.2rem);
}

a.btn-border {
    border: 2px solid #2e2e2e;
    border-radius: 0;
    background: #f5f6f7;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

}

a.btn-border:hover {
    background: #2e2e2e;
    border: 2px solid #f5f6f7;
    color: #f5f6f7;
    cursor: pointer;
}

a.btn-border:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 100%;
    content: '';
    -webkit-transition: all .3s;
    transition: all .5s;
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    border-radius: 0 50% 50% 0;
    background: #121212;
}

a.btn-border:hover:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    line-height: clamp(2.813rem, 2.03rem + 1.39vw, 3.75rem);
    width: clamp(2.813rem, 2.03rem + 1.39vw, 3.75rem);
    height: clamp(2.813rem, 2.03rem + 1.39vw, 3.75rem);
    content: '\f061';
    -webkit-transform: translateX(clamp(10rem, 7.077rem + 5.19vw, 13.5rem)) translateY(clamp(-0.01rem, -0.144rem + 0.24vw, 0.15rem));
    transform: translateX(clamp(10rem, 7.077rem + 5.19vw, 13.5rem)) translateY(clamp(-0.01rem, -0.144rem + 0.24vw, 0.15rem));
    color: #2e2e2e;
    background-color: #f5f6f7;
    border-radius: 50%;
    border: 1px solid #121212;
}

/* service-1.html */

.service-main01 > .main-img02 {
    background-image: url(../img/IMG_0494.JPG);
}

.service-main01 .position-first {
    color: #8c8f91;
}


.service-explain {
    position: relative;
    margin-top: 12rem;
}


.service-explain > h2 {
    font-size: clamp(1.8rem, 1.215rem + 1.04vw, 2.5rem);
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    text-align: center;
    padding-top: clamp(4rem, -1.01rem + 8.9vw, 10rem);
}

.inner-wrap {
    border-bottom: 1px solid #2e2e2e;
}

.service-content {
    display: flex;
    margin: clamp(10rem, 5.825rem + 7.41vw, 15rem) auto 0rem auto;
    padding-bottom: clamp(10rem, 5.825rem + 7.41vw, 15rem);
    width: clamp(56.25rem, 28.068rem + 50.05vw, 90rem);

}

.service-content-img {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/DSCN5015.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-img02 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img02::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/P7120166.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-img03 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img03::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/daisan.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-sen {
    width: clamp(32rem, 8.619rem + 41.52vw, 60rem);
    height: clamp(32rem, 29.495rem + 4.45vw, 35rem);
    padding-left: clamp(2rem, -2.175rem + 7.41vw, 7rem);
    padding-right: 2rem;
}

.service-content-sen h2 {
    border-bottom: 1px solid #070522;
    display: inline-block;
    font-size: clamp(1.5rem, 1.082rem + 0.74vw, 2rem);
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    letter-spacing: 0.2rem;
}

.service-content-sen p {
    margin-top: clamp(2.5rem, 1.247rem + 2.22vw, 4rem);
    font-size: clamp(1.1rem, 0.933rem + 0.3vw, 1.3rem);
    letter-spacing: 0.2rem;
    line-height: clamp(2.8rem, 2.633rem + 0.3vw, 3rem);
}

.se-back {
    position: relative;
    display: inline-block;
    margin: clamp(3rem, 1.33rem + 2.97vw, 5rem) 0 clamp(3rem, 1.33rem + 2.97vw, 5rem) clamp(42rem, -6.432rem + 86.01vw, 100rem);
    font-size: 1rem;
    color: #2e2e2e;
}

.se-back:hover {
    color: #f5f6f7;
    text-shadow: -1px 1px 5px #070522, 1px -1px 5px #070522;
}

.se-back a::before {
    position: absolute;
    display: inline-block;
    font-family: 'Font Awesome 6 Free';
    content: '\f0e2';
    font-weight: 900;
    top: 0;
    right: -30px;
    color: #2e2e2e;
}

/* service-2.html */

.service-main02 > .main-img02 {
    background-image: url(../img/sp.JPG);
}

.service-content-img04 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img04::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-img05 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img05::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_0241.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-img06 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img06::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_0027.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}


/* service-3.html */

.service-main03 > .main-img02 {
    background-image: url(../img/IMG_8208.JPG.jpg);
    background-position: 0%;
}


.service-content-img07 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img07::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_0233.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-img08 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img08::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_0221.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-img09 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img09::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_7996.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

/* service-4.html */

.service-main04 > .main-img02 {
    background-image: url(../img/IMG_5125.JPG.jpg);
}


.water .service-explain {
    height: clamp(214.3rem, 165.117rem + 87.34vw, 273.2rem);
}

.service-content-img10 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img10::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_5131.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-img11 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img11::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/DSC03931.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-img12 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img12::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/waters.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-img13 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img13::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_4227.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

/* service-5.html */

.service-main05 > .main-img02 {
    background-image: url(../img/IMG_2123.JPG);
    background-position: 0%;
}
.service-content-img14 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img14::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_2568.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-img15 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img15::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/pipe.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.service-content-img16 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img16::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_0719.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

/* service-6.html */

.service-main06 > .main-img02 {
    background-image: url(../img/led1.jpeg);
}

.led .service-explain {
    height: clamp(60rem, 44.969rem + 26.69vw, 78rem);
}

.service-content-img17 {
    width: clamp(20rem, -5.051rem + 44.49vw, 50rem);
    height: clamp(26rem, 18.485rem + 13.35vw, 35rem);
    position: relative;
    overflow: hidden;
    margin: 0 2rem 0 clamp(2rem, -1.34rem + 5.93vw, 6rem);
}

.service-content-img17::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/LED.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}


/* information.html */

.info-main > .main-img02 {
    background-image: url(../img/AdobeStock_585776417.jpeg);
}

.greeting {
    position: relative;
    margin-top: clamp(5rem, -0.845rem + 10.38vw, 12rem);
    background-color: #f5f6f7;
}

.greeting-sen {
    margin: 0 auto;
    width: clamp(45rem, 15.774rem + 51.9vw, 80rem);
}

.greeting .home-title {
    padding: clamp(10rem, 5.825rem + 7.41vw, 15rem) 0rem clamp(3.5rem, 2.247rem + 2.22vw, 5rem) 0;
}

.greeting .home-title h3 {
    position: relative;
    font-size: clamp(0.8rem, 0.633rem + 0.3vw, 1rem);
    margin-left: clamp(0.8rem, 0.633rem + 0.3vw, 1rem);
    margin-top: 0.2rem;
    z-index: 3;
    letter-spacing: 0.1rem;
}

.greeting .home-title h2 {
    position: relative;
    font-size: clamp(2rem, 1.582rem + 0.74vw, 2.5rem);
    margin-top: 0.2rem;
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    z-index: 3;
    letter-spacing: 0.2rem;
}

.greeting .home-title img {
    width: clamp(19.5rem, 14.907rem + 8.16vw, 25rem);
    position: absolute;
    top: clamp(9.9rem, 5.641rem + 7.56vw, 15rem);
    opacity: .2;
}


.manager-img {
    width: clamp(24.5rem, 19.907rem + 8.16vw, 30rem);
    height: clamp(34.5rem, 29.907rem + 8.16vw, 40rem);
    position: relative;
    overflow: hidden;
    margin-bottom: clamp(3rem, 1.33rem + 2.97vw, 5rem);
}

.manager-img::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/maneger.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.greeting h4 {
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-size: clamp(1.5rem, 1.082rem + 0.74vw, 2rem);
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.3rem;
    display: inline-block;
    margin-bottom: clamp(1rem, 0.165rem + 1.48vw, 2rem);
    border-left: 5px solid rgba(20, 81, 183, .6);
    padding: 0.3rem 1rem;
    letter-spacing: 0.1rem;
}

.greeting p {
    font-size: clamp(1rem, 0.499rem + 0.89vw, 1.6rem);
    letter-spacing: 0.1rem;
    line-height: clamp(3rem, 2.165rem + 1.48vw, 4rem);
    padding-top: .5rem;
}

.greeting-h3 {
    margin-top: clamp(2.5rem, 1.247rem + 2.22vw, 4rem);
    font-size: clamp(1.2rem, 1.033rem + 0.3vw, 1.4rem);
    letter-spacing: 0.2rem;
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    padding-bottom: clamp(7rem, 0.32rem + 11.86vw, 15rem);
}

.name-p {
    font-size: clamp(1.8rem, 1.633rem + 0.3vw, 2rem);
    margin-left: 2rem;
}

.company-table {
    position: relative;
    background-color: #e2e3e4;
    padding-bottom: 15rem;
}

.inline {
    margin: 0 auto;
    width: clamp(45rem, 15.774rem + 51.9vw, 80rem);
}

.company-table .home-title {
    padding-left: 0;
}

.company-table .news-date {
    margin: 0 auto;
    padding-top: 0rem;
    position: relative;
    width: 100%;
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-weight: 600;
}

.company-table .news-date ul {
    border-bottom: 1px rgba(112, 112, 112, .5) solid;
    position: relative;
}

.company-table .news-date li {
    border-top: 1px rgba(112, 112, 112, .5) solid;
    padding: clamp(2.5rem, 2.082rem + 0.74vw, 3rem) 0;
    font-size: clamp(1rem, 0.582rem + 0.74vw, 1.5rem);
    letter-spacing: 0.2rem;
}

.company-table .news-date li span {
    font-size: clamp(1.1rem, 0.766rem + 0.59vw, 1.5rem);
    font-family:  "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    letter-spacing: 0.2rem;
    color: #121212;
    display: inline-block;
    width: clamp(18rem, 12.155rem + 10.38vw, 25rem);
    padding: 0;
    vertical-align: middle;
    margin-right: clamp(0rem, -2.505rem + 4.45vw, 3rem);
}

.company-table .news-date li .service-table {
    width: clamp(26rem, 5.959rem + 35.59vw, 50rem);
    line-height: clamp(2.5rem, 1.665rem + 1.48vw, 3.5rem);
    margin: 0;
}


.history {
    position: relative;
    margin-top: 5rem;
}

.history .home-title img {
    width: clamp(19.5rem, 14.907rem + 8.16vw, 25rem);
}

/* #results */

.results-main .main-img02 {
    background-image: url(../img/AdobeStock_505017984.jpeg);
}

#results {
    position: relative;
    background-color: #e2e3e4;
    margin-top: clamp(7rem, 2.825rem + 7.41vw, 12rem);
}

.inner {
    width: clamp(53rem, 13.753rem + 69.69vw, 100rem);
    margin: 0 auto;
}

.results-title {
    text-align: center;
    padding-top: clamp(10rem, 5.825rem + 7.41vw, 15rem);
}

.results-title h1 {
    font-size: clamp(2rem, 1.582rem + 0.74vw, 2.5rem);
    font-family: "hiragino-mincho-pron" , "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    display: inline-block;
    border-bottom: 2px solid #2e2e2e;
    padding-bottom: 0.1rem;
    margin-bottom: clamp(2rem, 1.165rem + 1.48vw, 3rem);
}

.results-title p {
    font-size: clamp(1.2rem, 0.949rem + 0.44vw, 1.5rem);
    letter-spacing: 0.2rem;
    line-height: clamp(3rem, 2.582rem + 0.74vw, 3.5rem);
    margin-bottom: 3rem;
}


.results-column {
    margin-top: 0rem;
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
}

.results-flex {
    display: flex;
    margin-top: clamp(0rem, -4.175rem + 7.41vw, 5rem);
    margin-bottom: 5rem;
}

.results-content {
    width: clamp(12rem, 1.98rem + 17.79vw, 24rem);
}

.results-content h2 {
    font-size: clamp(1.1rem, 0.599rem + 0.89vw, 1.7rem);
    font-family:"hiragino-mincho-pron"  , "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    border-left: 5px solid rgba(20, 81, 183, .6);
    padding: 0.3rem clamp(0.5rem, 0.082rem + 0.74vw, 1rem);
    letter-spacing: 0.1rem;
    margin-left: clamp(0rem, -2.505rem + 4.45vw, 3rem);
}

.results-content p {
    font-size: clamp(0.8rem, 0.549rem + 0.44vw, 1.1rem);
    letter-spacing: 0.1rem;
    line-height: 2.5rem;
    margin-top: 2rem;
    margin-left: clamp(0rem, -2.505rem + 4.45vw, 3rem);
    padding-right: clamp(1rem, 0.582rem + 0.74vw, 1.5rem);

}

.results-click {
    width: clamp(16rem, 8.485rem + 13.35vw, 25rem);
}

.results-img01 {
    width: clamp(12rem, 1.145rem + 19.28vw, 25rem);
    height: clamp(16rem, 12.66rem + 5.93vw, 20rem);
    position: relative;
    overflow: hidden;
}

.results-img01::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/daisan.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.results-img02 {
    width: clamp(12rem, 1.145rem + 19.28vw, 25rem);
    height: clamp(16rem, 12.66rem + 5.93vw, 20rem);    position: relative;
    overflow: hidden;
}

.results-img02::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/sp.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.results-img03 {
    width: clamp(12rem, 1.145rem + 19.28vw, 25rem);
    height: clamp(16rem, 12.66rem + 5.93vw, 20rem);    position: relative;
    overflow: hidden;
}

.results-img03::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_7996.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.results-img04 {
    width: clamp(12rem, 1.145rem + 19.28vw, 25rem);
    height: clamp(16rem, 12.66rem + 5.93vw, 20rem);    position: relative;
    overflow: hidden;
}

.results-img04::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_5131.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.results-img05 {
    width: clamp(12rem, 1.145rem + 19.28vw, 25rem);
    height: clamp(16rem, 12.66rem + 5.93vw, 20rem);    position: relative;
    overflow: hidden;
}

.results-img05::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/haikan.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.results-img06 {
    width: clamp(12rem, 1.145rem + 19.28vw, 25rem);
    height: clamp(16rem, 12.66rem + 5.93vw, 20rem);    position: relative;
    overflow: hidden;
}

.results-img06::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/LED.JPG) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.results-btn {
    font-size: clamp(0.8rem, 0.549rem + 0.44vw, 1.1rem);
    background-color: #8c8f91;
    text-align: center;
    width: clamp(12rem, 1.145rem + 19.28vw, 25rem);
    display: block;
    color: #fff8f8;
    padding: 0.8rem 0;
    letter-spacing: 0.1rem;
    margin: 1rem 0;
}

.results-flex .triangle-arrow-right {
    position: relative;
}

.results-flex .triangle-arrow-right::after {
        position: absolute;
        left: 1rem;
        vertical-align: middle;
        content: "";
        top: 50%;
        transform: translateY(-50%);   /* 縦軸をセンタリングする */  
        border: clamp(0.438rem, 0.281rem + 0.28vw, 0.625rem) solid transparent;
        border-left: clamp(0.875rem, 0.666rem + 0.37vw, 1.125rem) solid #f5f6f7; 
}

/* .pickup */



.pickup {
    position: relative;
    padding-bottom: clamp(10rem, 5.825rem + 7.41vw, 15rem);
    margin: 4rem auto 0 auto;
}

.pickup h3 {
    font-size: clamp(1.7rem, 1.449rem + 0.44vw, 2rem);
    font-family: "hiragino-mincho-pron" , "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    border-left: 5px solid rgba(20, 81, 183, .6);
    padding: 0.3rem 1rem;
    letter-spacing: 0.1rem;
}

.pickup-flex {
    display: flex;
    margin-top: 4rem;
    justify-content: space-between;
    align-items: center;
}

.pickup-contents {
    width: 48rem;
}

.pickup-img01 {
    position: relative;
    overflow: hidden;
    width: clamp(23rem, 8.804rem + 25.21vw, 40rem);
    height: clamp(18rem, 7.98rem + 17.79vw, 30rem);
    margin: 0 auto;
}

.pickup-img01::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background: url(../img/IMG_8288_edited.jpg) no-repeat center center; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.pickup-img02 {
    position: relative;
    overflow: hidden;
    width: clamp(23rem, 8.804rem + 25.21vw, 40rem);
    height: clamp(18rem, 7.98rem + 17.79vw, 30rem);
    margin: 0 auto;
}

.pickup-img02::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_3394.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.pickup-contents .results-btn {
    font-size: clamp(0.9rem, 0.649rem + 0.44vw, 1.2rem);
    background-color: #8c8f91;
    text-align: center;
    width: clamp(23rem, 12.98rem + 17.79vw, 35rem);
    display: block;
    color: #fff8f8;
    padding: 0.8rem 0;
    letter-spacing: 0.1rem;
    margin: 0 auto;
}

.pickup-contents h4 {
    font-size: clamp(1.2rem, 0.782rem + 0.74vw, 1.7rem);
    text-align: center;
    margin: clamp(1.5rem, 1.082rem + 0.74vw, 2rem) clamp(0rem, -1.67rem + 2.97vw, 2rem);
    letter-spacing: 0.2rem;
    font-family:"hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

.pickup-contents p {
    width: clamp(23rem, 8.804rem + 25.21vw, 40rem);
    font-size: clamp(0.85rem, 0.558rem + 0.52vw, 1.2rem);
    text-align: center;
    margin: 0 auto clamp(1.5rem, 1.082rem + 0.74vw, 2rem) auto;
    letter-spacing: 0.1rem;
}

.pickup-contents .triangle-arrow-right {
    position: relative;
}

.pickup-contents .triangle-arrow-right::after {
        position: absolute;
        left: 1rem;
        vertical-align: middle;
        content: "";
        top: 50%;
        transform: translateY(-50%);   /* 縦軸をセンタリングする */  
        border: 10px solid transparent;
        border-left: 18px solid #f5f6f7; 
}


/* example-1.html */

.example-main .main-img02 {
    background-image: url(../img/AdobeStock_837503708.jpeg);
}

.example {
    background-color: #e2e3e4;
    margin-top: clamp(5rem, -0.797rem + 10.29vw, 12rem);
    text-align: center;
}

.example h2 {
    font-size: 2.2rem;
    font-family: "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    display: inline-block;
    border-bottom: 2px solid #2e2e2e;
    padding-bottom: 0.1rem;
    margin-bottom: 5rem;
    margin-top: 10rem;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 520px);
    justify-content: center;}


.example-flex {
    display: grid;
    grid-template-columns: repeat(auto-fit, 520px);
    justify-content: center;
    /* grid-gap: 1rem; */
}

.example-contents {
    display: block;
    width: 25rem;
    height: 37rem;
    margin: 0 auto;
}

.example-contents h3 {
    position: relative;
    font-size: 1.4rem;
    font-family: "hiragino-mincho-pron" , "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    letter-spacing: 0.1rem;
    margin-top: 2rem;
}

.example-contents h3::before {
    position: absolute;
    content: "";
    width: 5px;
    height: 26px;
    background-color: rgba(20, 81, 183, .6);
    top: 0;
    left: 30px;


}

.example-contents p {
    font-size: 1.1rem;
    letter-spacing: 0.05rem;
    margin-top: 1.5rem;
    text-align: left;
    line-height: 1.7rem;
}

.taxonomy-name a {
    z-index: 2;
    background-color: rgba(20, 81, 183, .8);
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    font-size: .9rem;
    color: #f5f6f7;
    padding: .5rem;
}

.example-img01 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img01::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url() no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img02 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img02::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img03 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img03::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img04 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img04::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img05 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img05::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img06 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img06::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img07 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img07::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img08 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img08::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img09 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img09::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img10 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img10::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img11 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img11::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img12 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img12::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img13 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img13::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-img14 {
    width: 25rem;
    height: 19rem;
    overflow: hidden;
    position: relative;
}

.example-img14::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/IMG_8288_edited.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.example-btn {
    font-size: 1.2rem;
    font-family: "hiragino-mincho-pron" , "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    background-color: #8c8f91;
    text-align: center;
    width: 25rem;
    display: block;
    color: #fff8f8;
    padding: 0.4rem 0;
    letter-spacing: 0.1rem;
    margin: 1rem 0;
}

.example-btn .triangle-arrow-right {
    position: relative;
}

.example-btn .triangle-arrow-right::after {
        position: absolute;
        left: 1rem;
        vertical-align: middle;
        content: "";
        top: 50%;
        transform: translateY(-50%);   /* 縦軸をセンタリングする */  
        border: 10px solid transparent;
        border-left: 18px solid #f5f6f7; 
}

/* .example-2.html */
/* .example-3.html */
/* .example-4.html */
/* .example-5.html */
/* .example-6.html */

/* example-1-con.html */

.result {
    margin-top: clamp(8rem, 1.32rem + 11.86vw, 16rem);
}

.result-title {
    margin: 0 auto;
}

.result-title h2 {
    text-align: center;
    font-size: clamp(1.8rem, 1.633rem + 0.3vw, 2rem);
    font-family: "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-weight: bold;
    padding: 5rem 0 2rem 0;
    border-top: 1px solid #2e2e2e;
}

.result-title h3 {
    text-align: center;
    font-size: clamp(1.1rem, 0.933rem + 0.3vw, 1.3rem);
    padding-bottom: 3.5rem;
}

.result-img01 {
    width: 50rem;
    height: 40rem;
    overflow: hidden;
    position: relative;
    margin: 0 auto 2rem auto;
}

.result-img01::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url() no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.result-example {
    margin: 0 auto;
    text-align: center;
}

.result-detail {
    display: inline-block;
    width: clamp(54rem, 48.99rem + 8.9vw, 60rem);
    border-top: 1px solid #2e2e2e;
    border-bottom: 1px solid #2e2e2e;
}

.result-detail h3 {
    text-align: left;
    font-size: 1.3rem;
    font-weight: bold;
    padding-top: 2rem;
}

.result-detail h4 {
    text-align: left;
    font-size: 1.1rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    line-height: 2rem;
}

.result-grid {
    width: clamp(55rem, 50.825rem + 7.41vw, 60rem);
    display: block;
    margin: 0 auto;
    margin-top: 5rem;
    margin-bottom: clamp(7rem, 0.32rem + 11.86vw, 15rem);
}

.result-grid-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, clamp(27.063rem, 24.636rem + 4.31vw, 29.969rem));
    justify-content: center;
}

.grid-content {
    margin: 0rem;
}

.grid-content h5 {
    text-align: left;
    margin-top: 2rem;
    margin-bottom: 5rem;
    width: clamp(25rem, 23.33rem + 2.97vw, 27rem);
    font-size: 1.1rem;
}

.right-sen {
    margin-left: clamp(2.1rem, 1.348rem + 1.33vw, 3rem);
    width: clamp(27.1rem, 24.678rem + 4.3vw, 30rem);
}

.result-img02 {
    width: clamp(25rem, 23.33rem + 2.97vw, 27rem);
    height: clamp(18rem, 15.495rem + 4.45vw, 21rem);
    overflow: hidden;
    position: relative;
}

.result-img02::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url() no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.result-img03 {
    width: clamp(25rem, 23.33rem + 2.97vw, 27rem);
    height: clamp(18rem, 15.495rem + 4.45vw, 21rem);
    overflow: hidden;
    position: relative;
    margin-left: clamp(2.1rem, 1.348rem + 1.33vw, 3rem);
}

.result-img03::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url() no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}


.result-img04 {
    width: clamp(25rem, 23.33rem + 2.97vw, 27rem);
    height: clamp(18rem, 15.495rem + 4.45vw, 21rem);
    overflow: hidden;
    position: relative;
    margin: 0;
}

.result-img04::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url() no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}

.result-img05 {
    width: clamp(25rem, 23.33rem + 2.97vw, 27rem);
    height: clamp(18rem, 15.495rem + 4.45vw, 21rem);
    overflow: hidden;
    position: relative;
    margin-left: clamp(2.1rem, 1.348rem + 1.33vw, 3rem);
}

.result-img05::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url() no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    background-repeat: no-repeat;
}




/* news.html */

.news-title {
    margin-top: clamp(6rem, -4.02rem + 17.79vw, 18rem);
}

.news-title .home-title {
    margin-left: clamp(2rem, -7.185rem + 16.31vw, 13rem);
}

.news-title img {
    top: clamp(40rem, 22.464rem + 31.14vw, 61rem);
}

.news-inner {
    margin-bottom: clamp(5rem, 0.825rem + 7.41vw, 10rem);
}

#news-page .news-main {
    margin: 0 auto 0 auto;
    width: clamp(52rem, 20.269rem + 56.35vw, 90rem);
}

#news-page .news-date {
    width: clamp(52rem, 20.269rem + 56.35vw, 90rem);
    padding-top: 0;
}

#news-page li {
    font-size: clamp(1.1rem, 0.933rem + 0.3vw, 1.3rem);
    padding: clamp(2.7rem, 2.032rem + 1.19vw, 3.5rem) 0;
}

#news-page li span {
    font-size: clamp(0.9rem, 0.733rem + 0.3vw, 1.1rem);
}

.news {
    position: relative;
}

#news-page li .news-title {
    font-size: clamp(1.1rem, 0.933rem + 0.3vw, 1.3rem); 
    color: #070522;
    margin: 0;
}

/* pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin: clamp(2.5rem, 0.412rem + 3.71vw, 5rem) auto 0 auto;
    font-size: 1rem;
}

.page-numbers {
    display: inline-block;
    margin-right: 2rem;
    color: #2e2e2e;
    background-color: #ffff;
}

.page-numbers:hover {
    border-bottom: 1px solid #2e2e2e;
}

.page-numbers.current {
    background-color: #4B7DCB;
    color: #e2e3e4;
    border-radius: 50%;
    padding: .9rem 1.2rem;
}

.page-numbers.current:hover {
    border: none;
}





/* news-content.html */

.news-titles {
    display: block;
    margin: clamp(12rem, 3.65rem + 14.83vw, 22rem) auto clamp(2rem, -0.505rem + 4.45vw, 5rem) auto;
    padding: 0 clamp(3rem, -7.02rem + 17.79vw, 15rem);
}

.news-titles h3 {
    position: relative;
    font-size: clamp(0.7rem, 0.616rem + 0.15vw, 0.8rem);
    z-index: 3;
    margin-left: 1rem;
    letter-spacing: 0.1rem;
}

.news-titles h2 {
    position: relative;
    font-size: clamp(1.5rem, 1.249rem + 0.44vw, 1.8rem);
    margin-top: 0.2rem;
    padding-bottom: clamp(1rem, 0.165rem + 1.48vw, 2rem);
    font-family: "hiragino-mincho-pron", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    z-index: 3;
    letter-spacing: 0.2rem;
    border-bottom: 3px solid #4B7DCB;
    border-image: linear-gradient(to right, rgba(72, 125, 203, .8) 0%, rgba(72, 125, 203, .8) 10%, rgba(46, 46, 46, .5) 10%, rgba(46, 46, 46, .7) 100%) 1;
}

.news-contents {
    margin: 0 auto clamp(0rem, -3.34rem + 5.93vw, 4rem) auto;
    padding: 0 clamp(3rem, -7.02rem + 17.79vw, 15rem);
    
}

.news-content-sentence p {
    font-size: clamp(1rem, 0.749rem + 0.44vw, 1.3rem);
    line-height: clamp(2.5rem, 2.082rem + 0.74vw, 3rem);
    border-bottom: 2px solid rgba(46, 46, 46, .3);
    padding-bottom: clamp(3rem, 1.33rem + 2.97vw, 5rem);
}

.news-buttons {
    margin: clamp(3rem, -0.34rem + 5.93vw, 7rem) auto;
    padding: 0 clamp(3rem, -7.02rem + 17.79vw, 15rem);
}

.news-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.back {
    font-size: clamp(1rem, 0.833rem + 0.3vw, 1.2rem);
    margin-right: clamp(10rem, 5.825rem + 7.41vw, 15rem);
    position: relative;
}

.back a::before {
    position: absolute;
    top: 0;
    left: -3rem;
    bottom: 0;
    display: inline-block;
    content: "";
    width: clamp(0.938rem, 0.677rem + 0.46vw, 1.25rem);
    height: clamp(0.938rem, 0.677rem + 0.46vw, 1.25rem);
    mask-image: url(/img/arrow-right.svg);
    mask-repeat: no-repeat;
    margin: auto;
    color: #4B7DCB;
    background-color: currentColor;
    transform: rotate(180deg);
}

.top {
    font-size: clamp(1.1rem, 0.766rem + 0.59vw, 1.5rem);
    border: 2px solid rgba(46, 46, 46, .7);
    margin-right: clamp(10rem, 5.825rem + 7.41vw, 15rem);
    padding: 2rem;
}

.top:hover {
    background-color: #4B7DCB;
    color: #ffff;
    transition: .3s;
}

.next {
    font-size: clamp(1rem, 0.833rem + 0.3vw, 1.2rem);
    position: relative;
}

.next::before {
    position: absolute;
    display: inline-block;
    content: "";
    width: clamp(0.938rem, 0.677rem + 0.46vw, 1.25rem);
    height: clamp(0.938rem, 0.677rem + 0.46vw, 1.25rem);
    top: 0;
    right: -3rem;
    bottom: 0;
    margin: auto;
    mask-image: url(/img/arrow-right.svg);
    background-color: currentColor;
    color: #4B7DCB;
}







/*!------------------------------
index.html sp
---------------------------------*/

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

    #header {
        display: none;
    }

    #mask {
        z-index: 12;
        position: relative;
        pointer-events: none;
    }

    .darking {
        height: clamp(97.5rem, 53.638rem + 219.31vw, 177rem);
    }

    .text .text-border {
        font-size: clamp(0.6rem, 0.314rem + 1.22vw, 1rem);
    }
    
    #header-sp {
        display: flex;
        align-items:center;
        justify-content: space-between;
        height: clamp(2.5rem, 2.143rem + 1.52vw, 3rem);
        background-color: rgba(20, 81, 183);
        position: sticky;
        top: 0;
        z-index: 11;
        width: 100%;
        transition: .2s;
        overflow: hidden;
        pointer-events: auto;
    }
    
    #header-sp.active {
        background-color: #4B7DCB;
    }

    #header-sp.hide {
        transform: translateY(-3rem);
    }
    
    /* #header-sp .site-title {
        height: 3.5rem;
    } */
    
    #header-sp .site-title img {
        width: clamp(5.5rem, 20vw, 8rem);
        padding: 1rem;
        filter: brightness(9);
    }
    
    
    .hamburger {
        height: 3rem;
        cursor: pointer;
        position: relative;
        top: 0;
        right: 2%;
        z-index: 21;
        width: 2rem;
    }
    
    /* ハンバーガーメニューの線の設定（メニューが閉じている時） */
    .hamburger span {
        width: 2rem;
        height: 0.09rem;
        background-color: #f5f6f7;
        position: absolute;
        top: 0;
        right: 0;
        transition: 0.3s ease-in-out;
    }
    /* 1本目の線の位置を設定 */
    .hamburger span:nth-child(1) {
        top: 1.0rem;
    }
      /* 2本目の線の位置を設定 */
    .hamburger span:nth-child(2) {
        top: 1.5rem;
    }
      /* 3本目の線の位置を設定 */
    .hamburger span:nth-child(3) {
        top: 2rem;
    }
    
    /*
    ハンバーガーメニューの線の設定（メニューが開いている時）
    1本目の線を-45度回転
    */
    .hamburger.active span:nth-child(1) {
        top: 1.5rem;
        background-color :#fff;
        transform: rotate(-45deg);
      }
      /* 2本目と3本目は重ねて45度回転 */
      .hamburger.active span:nth-child(2),
      .hamburger.active span:nth-child(3) {
        top: 1.5rem;
        background-color: #fff;
        transform: rotate(45deg);
      }
      /*
      メニューの設定
      最初は閉じている状態なので、「opacity: 0;」「visibility: hidden;」
      で要素を非表示にしておく
      */
      #nv-sp {
        width: 100%;
        height: 100dvh;
        background-color: rgba(20, 81, 183, 1);
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        text-align: center;
        transition: opacity 0.6s ease, visibility 0.6s ease;
        visibility: hidden;
        z-index: 11;
    }
      /*
      ハンバーガーメニューがクリックされた際に、jQueryで#naviにactiveクラスを追加して、
      メニューを表示させる。
      */
    #nv-sp.active {
        opacity: 1;
        visibility: visible;
        z-index: 11;
        position: fixed;
    }
    #nv-sp img {
        width: clamp(5.5rem, 20vw, 8rem);
        padding:1rem;
    
        position: absolute;
        left: 0;
        filter: brightness(20);
        z-index: 14;
    }
    
    #nv-sp img:hover {
        filter: brightness(10);
    }
    #nv-sp ul {
        margin: 80px 0 40px 0;
    }
    #nv-sp li {
        margin-bottom: 20px;
        z-index: 14;
        position: relative;
        display: block;
    }
    #nv-sp a {
        color: #fff;
        border-bottom: #fff solid 1px;
        z-index: 14;
    }
    
    #nv-sp a:hover {
        border: none;
    }

    .slider img {
        width: clamp(90rem, 71.379rem + 93.1vw, 123.75rem);
    }

    /* main-sentence */
    .main-sentence {
        top: clamp(10rem, 1.724rem + 41.38vw, 25rem);
        left: clamp(0.5rem, -0.328rem + 4.14vw, 2rem);
    }

    .main-first h2 {
        font-size: clamp(0.8rem, 0.303rem + 2.48vw, 1.7rem);
        width: clamp(18rem, 10.552rem + 37.24vw, 31.5rem);
        padding: clamp(0.7rem, 0.534rem + 0.83vw, 1rem);
    }

    .main-first p {
        font-size: clamp(0.6rem, 0.379rem + 1.1vw, 1rem);
        line-height: clamp(2rem, 1.586rem + 2.07vw, 2.75rem);
        padding-top: clamp(1.5rem, 1.224rem + 1.38vw, 2rem);
    }

    .main-second h2 {
        font-size: clamp(0.75rem, 0.226rem + 2.62vw, 1.7rem);
        line-height: clamp(3rem, 2.448rem + 2.76vw, 4rem);
        margin-top: clamp(2rem, -1.31rem + 16.55vw, 8rem);
    }

    .second-1 {
        font-size: clamp(0.6rem, 0.379rem + 1.1vw, 1rem);
        line-height: clamp(2rem, 1.586rem + 2.07vw, 2.75rem);
        padding-top: clamp(1.5rem, 1.224rem + 1.38vw, 2rem);
        margin-top: clamp(1.5rem, -0.431rem + 9.66vw, 5rem);
    }

    .second-2 {
        font-size: clamp(0.59rem, 0.364rem + 1.13vw, 1rem);
        line-height: clamp(2rem, 1.586rem + 2.07vw, 2.75rem);
        padding-top: clamp(1.5rem, 1.224rem + 1.38vw, 2rem);
        margin-top: clamp(1.2rem, -0.345rem + 7.72vw, 4rem);
    }

    .aboutus {
        top: clamp(57rem, 33.276rem + 118.62vw, 100rem);
        height: clamp(30rem, 9.586rem + 102.07vw, 67rem);
        
    }

    .aboutus-title {
        padding: clamp(1rem, -0.655rem + 8.28vw, 4rem) clamp(0.5rem, -0.328rem + 4.14vw, 2rem) clamp(1rem, 0.448rem + 2.76vw, 2rem) clamp(0.5rem, -0.328rem + 4.14vw, 2rem);
    }

    .aboutus-title h3 {
        font-size: clamp(0.5rem, 0.334rem + 0.83vw, 0.8rem);
        
    }

    .aboutus-title h2 {
        font-size: clamp(1rem, 0.614rem + 1.93vw, 1.7rem);margin-top: clamp(0.2rem, 0.09rem + 0.55vw, 0.4rem);
    }

    .aboutus-title img {
        width: clamp(11rem, 7.138rem + 19.31vw, 18rem);
        top: clamp(1rem, -0.655rem + 8.28vw, 4rem);
    }

    .aboutus-flex {
        display: block;
        margin: 0 auto;
    }

    .aboutus-bg-bk {
        width: clamp(16rem, 80vw, 45rem);
        height: clamp(11rem, 3.276rem + 38.62vw, 25rem);
    }

    .aboutus-1,
    .aboutus-2 {
        margin: 0 auto;
        width: clamp(16rem, 80vw, 45rem);
        height: clamp(11rem, 3.276rem + 38.62vw, 25rem);
        margin-bottom: 2rem;
    }

    .aboutus-1 h4, 
    .aboutus-2 h4 {
        font-size: clamp(1rem, 0.448rem + 2.76vw, 2rem);
        top: clamp(6rem, 1.586rem + 22.07vw, 14rem);
    }

    .aboutus-1 p,
    .aboutus-2 p {
        font-size: clamp(0.6rem, 0.379rem + 1.1vw, 1rem);
        top: clamp(8rem, 2.483rem + 27.59vw, 18rem);
    }

    .dli-arrow-right,
    .dli-arrow-right2 {
        margin-top: clamp(8.3rem, 1.845rem + 32.28vw, 20rem);
        margin-left: clamp(11rem, -3.897rem + 74.48vw, 38rem);
        width: clamp(4rem, 3.448rem + 2.76vw, 5rem);
    }

    @keyframes scale {
        100% {
            width: clamp(4.5rem, 3.397rem + 5.52vw, 6.5rem);
        }
        0%{
            width: clamp(4rem, 3.448rem + 2.76vw, 5rem);
        }
    }

    #service-main {
        margin-top: clamp(65rem, 41.828rem + 115.86vw, 107rem);
        height: clamp(105.5rem, 36.81rem + 343.45vw, 230rem);
    }

    .home-title {
        padding: clamp(1rem, -0.655rem + 8.28vw, 4rem) clamp(0.5rem, -0.328rem + 4.14vw, 2rem) clamp(1rem, 0.448rem + 2.76vw, 2rem) clamp(0.5rem, -0.328rem + 4.14vw, 2rem);
    }

    .home-title h3 {
        font-size: clamp(0.5rem, 0.334rem + 0.83vw, 0.8rem);
        
    }

    .home-title h2 {
        font-size: clamp(1rem, 0.614rem + 1.93vw, 1.7rem);margin-top: clamp(0.2rem, 0.09rem + 0.55vw, 0.4rem);
    }

    .home-title img {
        width: clamp(11rem, 7.138rem + 19.31vw, 18rem);
        top: clamp(1rem, -0.655rem + 8.28vw, 4rem);
    }


    .service-sen {
        display: inline-block;
        border-left: 2px solid rgba(20, 81, 183, .6);
        font-size: clamp(0.8rem, 0.579rem + 1.1vw, 1.2rem);
        margin-bottom: .5rem;
    }


    .flex-six {
        display: block;
        position: relative;
        top: 0;
        left: 0;
    }

    .flex-img-bg-bk {
        width: clamp(17rem, 4.31rem + 63.45vw, 40rem);
        height: clamp(13.5rem, 4.397rem + 45.52vw, 30rem);
    }

    .flex-img,
    .flex-img02,
    .flex-img03,
    .flex-img04,
    .flex-img05,
    .flex-img06 {
        width: clamp(17rem, 4.31rem + 63.45vw, 40rem);
        height: clamp(13.5rem, 4.397rem + 45.52vw, 30rem);
        margin: clamp(1rem, 0.448rem + 2.76vw, 2rem) auto clamp(2rem, 0.897rem + 5.52vw, 4rem) auto;
    }

    .flex-img h4,
    .flex-img02 h4, 
    .flex-img03 h4, 
    .flex-img04 h4, 
    .flex-img05 h4, 
    .flex-img06 h4  {
        font-size: clamp(1rem, 0.503rem + 2.48vw, 1.9rem);
        top: clamp(8rem, 1.931rem + 30.34vw, 19rem);
    }

    .dli-arrow-right-small1 {
        width: clamp(4.5rem, 2.569rem + 9.66vw, 8rem);
        height: clamp(0.1rem, 0.089rem + 0.06vw, 0.12rem);
        margin-left: clamp(10.5rem, 1.397rem + 45.52vw, 27rem);
        margin-top: clamp(11.5rem, 4.052rem + 37.24vw, 25rem);
    }

    .dli-arrow-right-small1::before {
        width: clamp(1rem, 0.724rem + 1.38vw, 1.5rem);
        border: clamp(0.08rem, 0.058rem + 0.11vw, 0.12rem) solid currentColor;
    }

    .dli-arrow-right-small2 {
        width: clamp(4.5rem, 2.569rem + 9.66vw, 8rem);
        height: clamp(0.1rem, 0.089rem + 0.06vw, 0.12rem);
        margin-left: clamp(10.5rem, 1.397rem + 45.52vw, 27rem);
        margin-top: clamp(11.5rem, 4.052rem + 37.24vw, 25rem);
    }

    .dli-arrow-right-small2::before {
        width: clamp(1rem, 0.724rem + 1.38vw, 1.5rem);
        border: clamp(0.08rem, 0.058rem + 0.11vw, 0.12rem) solid currentColor;
    }

    .dli-arrow-right-small3 {
        width: clamp(4.5rem, 2.569rem + 9.66vw, 8rem);
        height: clamp(0.1rem, 0.089rem + 0.06vw, 0.12rem);
        margin-left: clamp(10.5rem, 1.397rem + 45.52vw, 27rem);
        margin-top: clamp(11.5rem, 4.052rem + 37.24vw, 25rem);
    }

    .dli-arrow-right-small3::before {
        width: clamp(1rem, 0.724rem + 1.38vw, 1.5rem);
        border: clamp(0.08rem, 0.058rem + 0.11vw, 0.12rem) solid currentColor;
    }

    .dli-arrow-right-small4 {
        width: clamp(4.5rem, 2.569rem + 9.66vw, 8rem);
        height: clamp(0.1rem, 0.089rem + 0.06vw, 0.12rem);
        margin-left: clamp(10.5rem, 1.397rem + 45.52vw, 27rem);
        margin-top: clamp(11.5rem, 4.052rem + 37.24vw, 25rem);
    }

    .dli-arrow-right-small4::before {
        width: clamp(1rem, 0.724rem + 1.38vw, 1.5rem);
        border: clamp(0.08rem, 0.058rem + 0.11vw, 0.12rem) solid currentColor;
    }

    .dli-arrow-right-small5 {
        width: clamp(4.5rem, 2.569rem + 9.66vw, 8rem);
        height: clamp(0.1rem, 0.089rem + 0.06vw, 0.12rem);
        margin-left: clamp(10.5rem, 1.397rem + 45.52vw, 27rem);
        margin-top: clamp(11.5rem, 4.052rem + 37.24vw, 25rem);
    }

    .dli-arrow-right-small5::before {
        width: clamp(1rem, 0.724rem + 1.38vw, 1.5rem);
        border: clamp(0.08rem, 0.058rem + 0.11vw, 0.12rem) solid currentColor;
    }

    .dli-arrow-right-small6 {
        width: clamp(4.5rem, 2.569rem + 9.66vw, 8rem);
        height: clamp(0.1rem, 0.089rem + 0.06vw, 0.12rem);
        margin-left: clamp(10.5rem, 1.397rem + 45.52vw, 27rem);
        margin-top: clamp(11.5rem, 4.052rem + 37.24vw, 25rem);
    }

    .dli-arrow-right-small6::before {
        width: clamp(1rem, 0.724rem + 1.38vw, 1.5rem);
        border: clamp(0.08rem, 0.058rem + 0.11vw, 0.12rem) solid currentColor;
    }

    @keyframes scales {
        100% {
            width: clamp(5rem, 2.517rem + 12.41vw, 9.5rem);
        }
        0% {
            width: clamp(4.5rem, 2.569rem + 9.66vw, 8rem);
        }
    }

    /* .news-main */

    .news-main {
        height: clamp(20rem, 4.276rem + 78.62vw, 48.5rem);
    }

    .news-main .home-title {
        padding: clamp(1rem, -0.655rem + 8.28vw, 4rem) clamp(1rem, -6.515rem + 13.35vw, 10rem) clamp(1.5rem, 0.672rem + 4.14vw, 3rem) clamp(1rem, -6.515rem + 13.35vw, 10rem);
    }

    .news-date {
        width: clamp(18rem, 1.172rem + 84.14vw, 48.5rem);
        padding-top: 0;
    }

    .news-date li {
        padding: clamp(1rem, -0.103rem + 5.52vw, 3rem) 0;
        font-size: clamp(0.5rem, 0.114rem + 1.93vw, 1.2rem);
    }

    .news-date li span {
        font-size: clamp(0.4rem, 0.014rem + 1.93vw, 1.1rem);
        padding: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(0rem, -0.276rem + 1.38vw, 0.5rem);
    }

    .news-sen {
        margin-top: 1.5rem;
        margin-right: clamp(0rem, -1.821rem + 9.1vw, 3.3rem);
    }

    .news-sen p {
        font-size: clamp(0.6rem, 0.269rem + 1.66vw, 1.2rem);
        margin-right: clamp(1rem, -0.269rem + 6.34vw, 3.3rem);
        margin-top: 0;
    }

    .dli-arrow-right-mini {
        margin-left: clamp(1rem, 0.448rem + 2.76vw, 2rem);
        width: 1.5rem;
    }

    /* .information-main */

    .information-main {
        height: clamp(41rem, 8.448rem + 162.76vw, 100rem);
    }

    .information-main .home-title {
        padding: clamp(1rem, -0.655rem + 8.28vw, 4rem) clamp(1rem, -6.515rem + 13.35vw, 10rem) clamp(1.5rem, 0.672rem + 4.14vw, 3rem) clamp(1rem, -6.515rem + 13.35vw, 10rem);
    }

    .company {
        display: block;
        margin: 0 auto;
    }

    .summary {
        margin: 0 auto;
        width: clamp(17rem, -1.207rem + 91.03vw, 50rem);
        height: clamp(14rem, -0.345rem + 71.72vw, 40rem);
    }

    .summary p {
        font-size: clamp(0.6rem, 0.49rem + 0.55vw, 0.8rem);
        margin-top: clamp(1.5rem, 1.224rem + 1.38vw, 2rem);
        margin-left: clamp(1.5rem, 1.224rem + 1.38vw, 2rem);
    }

    .summary h4 {
        font-size: clamp(1.2rem, 0.759rem + 2.21vw, 2rem);
        margin-left: clamp(1rem, 0.724rem + 1.38vw, 1.5rem);
        margin-top: clamp(0.7rem, 0.534rem + 0.83vw, 1rem);
    }

    .results {
        margin: 2rem auto 0 auto;
        width: clamp(17rem, -1.207rem + 91.03vw, 50rem);
        height: clamp(14rem, -0.345rem + 71.72vw, 40rem);
    }

    .results p {
        font-size: clamp(0.6rem, 0.49rem + 0.55vw, 0.8rem);
        margin-top: clamp(1.5rem, 1.224rem + 1.38vw, 2rem);
        margin-left: clamp(1.5rem, 1.224rem + 1.38vw, 2rem);
    }

    .results h4 {
        font-size: clamp(1.2rem, 0.759rem + 2.21vw, 2rem);
        margin-left: clamp(1rem, 0.724rem + 1.38vw, 1.5rem);
        margin-top: clamp(0.7rem, 0.534rem + 0.83vw, 1rem);
    }

    .dli-arrow-right-minimum1 {
        margin-top: clamp(8rem, -4.138rem + 60.69vw, 30rem);
        margin-left: clamp(11rem, -3.345rem + 71.72vw, 37rem);
        width: clamp(4rem, 0.69rem + 16.55vw, 10rem);
        height: clamp(0.06rem, 0.038rem + 0.11vw, 0.1rem);
    }

    .dli-arrow-right-minimum1::before {
        border: clamp(0.06rem, 0.038rem + 0.11vw, 0.1rem) solid currentColor;
        width: clamp(0.8rem, 0.414rem + 1.93vw, 1.5rem);
    }

    .dli-arrow-right-minimum2 {
        margin-top: clamp(8rem, -4.138rem + 60.69vw, 30rem);
        margin-left: clamp(11rem, -3.345rem + 71.72vw, 37rem);
        width: clamp(4rem, 0.69rem + 16.55vw, 10rem);
        height: clamp(0.06rem, 0.038rem + 0.11vw, 0.1rem);
    }

    .dli-arrow-right-minimum2::before {
        border: clamp(0.06rem, 0.038rem + 0.11vw, 0.1rem) solid currentColor;
        width: clamp(0.8rem, 0.414rem + 1.93vw, 1.5rem);
    }

    @keyframes pint {
        100% {
            width: clamp(5rem, 1.414rem + 17.93vw, 11.5rem);
        }

        0% {
            width: clamp(4rem, 0.69rem + 16.55vw, 10rem);
        }
    }

    /* #contact */

    #contact {
        height: clamp(67rem, 57.069rem + 49.66vw, 85rem);
    }


    .contact-container {
        display: block;
        height: 22rem;
    }

    .contact-container::before {
        content: none;
    }

    .contact-flex {
        width: 100%;
        text-align: center;
    }

    .sentence-flex {
        display: block;
        margin-top: 1.5rem;
    }

    .contact-sen {
        font-size: clamp(0.55rem, 0.274rem + 1.38vw, 1.05rem);
        line-height: clamp(2.2rem, 2.034rem + 0.83vw, 2.5rem);
    }

    .bt {
        font-size: clamp(0.7rem, 0.534rem + 0.83vw, 1rem);
    }

    .phone-num {
        position: relative;
        top: 0;
        left: 0;
        margin-top: 1.2rem;
        font-size: clamp(1rem, 0.724rem + 1.38vw, 1.5rem);
    }

    .phone-num span {
        font-size: clamp(0.5rem, 0.334rem + 0.83vw, 0.8rem);
    }

    .contact-list {
        display: none;
    }


    .contact-list2 {
        position: relative;
        text-align: left;
        margin-top: 2rem;
        display: block;

    }

    .contact-list2 img {
        width: clamp(10rem, 8.897rem + 5.52vw, 12rem);
        margin-left: clamp(1rem, 0.117rem + 4.41vw, 2.6rem);
    }

    .contact-table2-flex {
        display: flex;
    }
    
    .contact-table2 a:hover {
        font-weight: 600;
    }
    
    
    .contact-table2 {
        margin-top: clamp(3rem, 1.897rem + 5.52vw, 5rem);
        margin-left: clamp(1rem, -5.68rem + 11.86vw, 9rem);
        text-align: left;
        font-size: clamp(0.8rem, 0.634rem + 0.83vw, 1.1rem);
        position: relative;
        width: 35rem;
    }
    
    .contact-table2 li {
        padding: clamp(1.2rem, 0.759rem + 2.21vw, 2rem) clamp(0rem, -1.103rem + 5.52vw, 2rem);
        position: relative;
    }
    
    .contact-table2 li:after {
        content: "";
        background-color: #8c8f91;
        width: clamp(8rem, -1.379rem + 46.9vw, 25rem);
        height: 0.1rem;
        position: absolute;
        left: 0;
        bottom: 0;
        padding-left: clamp(1rem, -0.103rem + 5.52vw, 3rem);
    }
    
    .copyright {
        margin: .7rem;
        font-size: clamp(0.5rem, 0.334rem + 0.83vw, 0.8rem);
    }



    /* ? #about.html */

    .main-img {
        height: 37rem;
    }

    .darks {
        height: 37rem;
    }

    .about-main-title h3 {
        margin-top: 11rem;
        font-size: clamp(1rem, 0.448rem + 2.76vw, 2rem);
        margin-bottom: clamp(1.2rem, 0.924rem + 1.38vw, 1.7rem);
    }

    .about-main-title h2 {
        width: clamp(19rem, 10.172rem + 44.14vw, 35rem);
        font-size: clamp(2rem, 1.724rem + 1.38vw, 2.5rem);
        padding: clamp(0.7rem, 0.534rem + 0.83vw, 1rem);
    }

    .position {
        top: 36.3rem;
        font-size: clamp(0.6rem, 0.49rem + 0.55vw, 0.8rem);
        right: clamp(0rem, -2.207rem + 11.03vw, 4rem);
    }

    .position-list li {
        margin: clamp(1.2rem, 1.034rem + 0.83vw, 1.5rem) clamp(0.6rem, 0.379rem + 1.1vw, 1rem);
    }

    /* #my-features */

    #my-features {
        margin-top: clamp(20rem, 11.724rem + 41.38vw, 35rem);
        padding-bottom: clamp(15rem, 9.483rem + 27.59vw, 25rem);
    }

    .features-h2 {
        font-size: clamp(1.1rem, 0.603rem + 2.48vw, 2rem);
        padding-bottom: clamp(1rem, 0.448rem + 2.76vw, 2rem);
        z-index: 2;
    }

    .features-p {
        text-align: left;
        width: clamp(19rem, 1.897rem + 85.52vw, 50rem);
        font-size: clamp(0.7rem, 0.479rem + 1.1vw, 1.1rem);
        line-height: clamp(2.2rem, 1.759rem + 2.21vw, 3rem);
        padding: clamp(0rem, -0.276rem + 1.38vw, 0.5rem);
        z-index: 2;
        br {
            display: none;
        }
    }

    .features-img01 {
        top: calc(clamp(6rem, 0.483rem + 27.59vw, 16rem)* -1);
        left: clamp(8rem, -1.931rem + 49.66vw, 26rem);
        width: clamp(5rem, 2.241rem + 13.79vw, 10rem);
        opacity: .8;
    }
    .features-img02 {
        top: calc(clamp(5rem, 0.586rem + 22.07vw, 13rem)* -1);
        right: clamp(0.5rem, -0.879rem + 6.9vw, 3rem);
        width: clamp(5.5rem, 1.914rem + 17.93vw, 12rem);
        opacity: .8;
    }
    .features-img03 {
        bottom: clamp(12rem, 7.034rem + 24.83vw, 21rem);
        right: clamp(13rem, -2.448rem + 77.24vw, 41rem);
        width: clamp(6rem, 3.241rem + 13.79vw, 11rem);
        opacity: .8;
    }
    .features-img04 {
        width: clamp(9rem, 4.034rem + 24.83vw, 18rem);
        right: clamp(0.5rem, -3.086rem + 17.93vw, 7rem);
        bottom: clamp(14rem, 8.483rem + 27.59vw, 24rem);
        opacity: .8;
    }
    .features-img05 {
        left: clamp(0.5rem, -1.155rem + 8.28vw, 3.5rem);
        bottom: clamp(57.1rem, 49.597rem + 37.52vw, 70.7rem);
        width: clamp(6.5rem, 2.362rem + 20.69vw, 14rem);
        opacity: .8;
    }

    /* #reason */

    #reason {
        height: clamp(55rem, 10.862rem + 220.69vw, 135rem);
    }

    #reason > p {
        font-size: clamp(0.7rem, 0.479rem + 1.1vw, 1.1rem);
        padding-left: clamp(1.1rem, 0.052rem + 5.24vw, 3rem);
        padding-top: clamp(2rem, 0.897rem + 5.52vw, 4rem);
    }

    #reason h2 {
        font-size: clamp(1.2rem, 0.924rem + 1.38vw, 1.7rem);
        padding-left: clamp(0.8rem, -0.138rem + 4.69vw, 2.5rem);
    }

    .reason-flex {
        display: block;
        position: static;
    }

    .reason-exp {
        width: clamp(18rem, 0.345rem + 88.28vw, 50rem);
        margin: clamp(3.5rem, 2.121rem + 6.9vw, 6rem) auto;
        position: relative;
    }

    .reason-dark {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        background-color: #121212;
        opacity: .38;
        width: clamp(18rem, 0.345rem + 88.28vw, 50rem);
        height: clamp(12rem, 0.221rem + 58.9vw, 33.35rem);
    }

    .reason-exp h3 {
        font-size: clamp(0.8rem, 0.138rem + 3.31vw, 2rem);
        border-left: clamp(0.188rem, 0.119rem + 0.34vw, 0.313rem) solid rgba(20, 81, 183, 1);
        display: inline-block;
        height: clamp(1.5rem, 0.672rem + 4.14vw, 3rem);
        padding: clamp(0.35rem, 0.24rem + 0.55vw, 0.55rem) 0 clamp(0.35rem, 0.24rem + 0.55vw, 0.55rem) clamp(0.5rem, 0.224rem + 1.38vw, 1rem);
        margin-top: 2rem;
        position: absolute;
        top: clamp(-1rem, -8.724rem + 38.62vw, 13rem);
        left: clamp(1rem, 0.448rem + 2.76vw, 2rem);

    }

    .reason-exp p {
        font-size: clamp(0.6rem, 0.269rem + 1.66vw, 1.2rem);
        text-align: left;
        position: absolute;
        top: clamp(1.5rem, -7.603rem + 45.52vw, 18rem);
        left: clamp(1rem, 0.448rem + 2.76vw, 2rem);
        padding-right: clamp(1rem, 0.448rem + 2.76vw, 2rem);
        line-height: clamp(1.3rem, 0.859rem + 2.21vw, 2.1rem);
    }

    .reason-exp:nth-child(1) {
        margin: clamp(3.5rem, 2.121rem + 6.9vw, 6rem) auto;
    }
    
    .reason-exp:nth-child(3) {
        margin-right: auto;
    }

    /* #choice */

    #choice {
        height: clamp(35rem, 7.414rem + 137.93vw, 85rem);
    }

    .choice-flex {
        display: block;
        margin-top: clamp(6rem, 3.793rem + 11.03vw, 10rem);
    }

    .choice-exp01 {
        width: clamp(18rem, 0.345rem + 88.28vw, 50rem);
        height: clamp(12rem, 0.221rem + 58.9vw, 33.35rem);
        margin: 5rem auto;
    }

    .choice-exp01 h2 {
        font-size: clamp(1.3rem, 0.914rem + 1.93vw, 2rem);
        bottom: clamp(2rem, 0.345rem + 8.28vw, 5rem);
        right: clamp(3rem, 0.793rem + 11.03vw, 7rem);
    }

    .choice-exp02 {
        width: clamp(18rem, 0.345rem + 88.28vw, 50rem);
        height: clamp(12rem, 0.221rem + 58.9vw, 33.35rem);
        margin: 5rem auto;
    }

    .choice-exp02 h2 {
        font-size: clamp(1.3rem, 0.914rem + 1.93vw, 2rem);
        bottom: clamp(2rem, 0.345rem + 8.28vw, 5rem);
        right: clamp(3rem, 0.793rem + 11.03vw, 7rem);
    }

    .dli-arrow-right-about {
        margin-left: clamp(11rem, -3.897rem + 74.48vw, 38rem);
        margin-top: clamp(10.5rem, 0.293rem + 51.03vw, 29rem);
        width: clamp(5.5rem, 4.397rem + 5.52vw, 7.5rem);
        height: clamp(0.08em, 0.058rem + 0.11vw, 0.12em);
    }

    .dli-arrow-right-about::before {
        border: clamp(0.05rem, 0.022rem + 0.14vw, 0.1rem) solid currentColor;
    }


    /* service.html */

    .main-img02 {
        height: 37rem;
        z-index: 1;
    }
    .service-block {
        margin-top: 8rem;
    }

    .service-flex {
        display: block;
    }

    .service-exp {
        width: clamp(20rem, -24.138rem + 220.69vw, 100rem);
        margin: 0 auto 0 auto;
        padding-bottom: clamp(4rem, 0.69rem + 16.55vw, 10rem);
    }

    .service-exp:nth-child(1) {
        padding-top: clamp(2rem, 0.345rem + 8.28vw, 5rem);
    }

    .service-exp .service-title {
        font-size: clamp(1rem, 0.614rem + 1.93vw, 1.7rem);
        margin-bottom: clamp(1.5rem, 1.224rem + 1.38vw, 2rem);
        margin-left: clamp(1rem, -0.655rem + 8.28vw, 4rem);
        padding: clamp(0.5rem, 0.224rem + 1.38vw, 1rem) 0 clamp(0.5rem, 0.224rem + 1.38vw, 1rem) clamp(0.25rem, -0.164rem + 2.07vw, 1rem);
        border-left: clamp(0.25rem, 0.216rem + 0.17vw, 0.313rem) solid rgba(20, 81, 183, .6);
    }

    .service-title span {
        font-size: clamp(2.5rem, 1.948rem + 2.76vw, 3.5rem);
        top: clamp(-1.35rem, -1.543rem + 0.97vw, -1rem);
        padding-left: clamp(0.3rem, 0.19rem + 0.55vw, 0.5rem);
    }

    .service-img {
        width: clamp(18rem, 1.31rem + 83.45vw, 48.25rem);
        height: clamp(13rem, 3.069rem + 49.66vw, 31rem);
        margin-right: clamp(1rem, -0.655rem + 8.28vw, 4rem);
        margin-left: clamp(1rem, -0.655rem + 8.28vw, 4rem);
    }

    .service-img02 {
        width: clamp(18rem, 1.31rem + 83.45vw, 48.25rem);
        height: clamp(13rem, 3.069rem + 49.66vw, 31rem);
        margin-right: clamp(1rem, -0.655rem + 8.28vw, 4rem);
        margin-left: clamp(1rem, -0.655rem + 8.28vw, 4rem);
    }

    .service-img03 {
        width: clamp(18rem, 1.31rem + 83.45vw, 48.25rem);
        height: clamp(13rem, 3.069rem + 49.66vw, 31rem);
        margin-right: clamp(1rem, -0.655rem + 8.28vw, 4rem);
        margin-left: clamp(1rem, -0.655rem + 8.28vw, 4rem);
    }

    .service-img04 {
        width: clamp(18rem, 1.31rem + 83.45vw, 48.25rem);
        height: clamp(13rem, 3.069rem + 49.66vw, 31rem);
        margin-right: clamp(1rem, -0.655rem + 8.28vw, 4rem);
        margin-left: clamp(1rem, -0.655rem + 8.28vw, 4rem);
    }

    .service-img05 {
        width: clamp(18rem, 1.31rem + 83.45vw, 48.25rem);
        height: clamp(13rem, 3.069rem + 49.66vw, 31rem);
        margin-right: clamp(1rem, -0.655rem + 8.28vw, 4rem);
        margin-left: clamp(1rem, -0.655rem + 8.28vw, 4rem);
    }

    .service-img06 {
        width: clamp(18rem, 1.31rem + 83.45vw, 48.25rem);
        height: clamp(13rem, 3.069rem + 49.66vw, 31rem);
        margin-right: clamp(1rem, -0.655rem + 8.28vw, 4rem);
        margin-left: clamp(1rem, -0.655rem + 8.28vw, 4rem);
    }

    .service-sentence {
        width: clamp(18rem, 1.31rem + 83.45vw, 48.25rem);
        margin:  clamp(1rem, -0.103rem + 5.52vw, 3rem) clamp(1rem, -0.821rem + 9.1vw, 4.3rem);
    }

    .service-sentence h2 {
        font-size: clamp(0.8rem, 0.248rem + 2.76vw, 1.8rem);
        border-bottom: clamp(0.063rem, 0.028rem + 0.17vw, 0.125rem) solid #121212;
    }

    .service-sentence p {
        font-size: clamp(0.57rem, 0.278rem + 1.46vw, 1.1rem);
        padding-top: clamp(1rem, 0.724rem + 1.38vw, 1.5rem);
        line-height: clamp(1rem, -0.103rem + 5.52vw, 3rem);
    }

    a.btn {
        font-size: clamp(0.6rem, 0.324rem + 1.38vw, 1.1rem);
        padding: clamp(0.5rem, 0.39rem + 0.55vw, 0.7rem) clamp(1.7rem, 0.707rem + 4.97vw, 3.5rem);
        /* margin-top: .2rem; */
    }

    a.btn-border {
        border: clamp(0.063rem, 0.028rem + 0.17vw, 0.125rem) solid #2e2e2e;
    }

    a.btn-border:hover::before {
        width: clamp(1.875rem, 1.358rem + 2.59vw, 2.813rem);
        height: clamp(1.875rem, 1.358rem + 2.59vw, 2.813rem);
        line-height: clamp(1.875rem, 1.358rem + 2.59vw, 2.813rem);
        -webkit-transform: translateX(clamp(5.8rem, 3.483rem + 11.59vw, 10rem)) translateY(-0.01rem);
        transform: translateX(clamp(5.8rem, 3.483rem + 11.59vw, 10rem)) translateY(-0.01rem);
    }

    /* service-1.html */

    .service-main01 > .main-img02 {
        background-position: clamp(-20rem, -31.034rem + 55.17vw, 0rem);
    }

    .service-explain > h2 {
        font-size: clamp(1.1rem, 0.714rem + 1.93vw, 1.8rem);
    }

    .service-content {
        margin-top: clamp(5rem, 2.241rem + 13.79vw, 10rem);
        margin-bottom: 4rem;
        width: clamp(20rem, 100vw, 56.25rem);
    }

    .service-content-img {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img02 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img03 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-sen {
        width: clamp(12.5rem, 1.741rem + 53.79vw, 32rem);
        height: clamp(20rem, 13.379rem + 33.1vw, 32rem);
        padding-left: clamp(1rem, 0.448rem + 2.76vw, 2rem);
        padding-right: clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-sen h2 {
        font-size: clamp(0.8rem, 0.414rem + 1.93vw, 1.5rem);
        letter-spacing: clamp(0.05rem, -0.033rem + 0.41vw, 0.2rem);
        display: inline;
    }

    .service-content-sen p {
        font-size: clamp(0.6rem, 0.324rem + 1.38vw, 1.1rem);
        letter-spacing: clamp(0.05rem, -0.033rem + 0.41vw, 0.2rem);
        line-height: clamp(1.5rem, 0.783rem + 3.59vw, 2.8rem);
        margin-top: clamp(1.5rem, 0.948rem + 2.76vw, 2.5rem);
    }

    .se-back {
        margin: clamp(1rem, -0.103rem + 5.52vw, 3rem) 0 clamp(1rem, -0.103rem + 5.52vw, 3rem) clamp(12.5rem, -3.776rem + 81.38vw, 42rem);
        font-size: clamp(0.5rem, 0.224rem + 1.38vw, 1rem);
    }

    .se-back a::before {
        right: calc(clamp(1.25rem, 0.905rem + 1.72vw, 1.875rem)* -1);
    }

    /* service-2.html */

    .service-main02 > .main-img02 {
        background-position: clamp(-14rem, -21.724rem + 38.62vw, 0rem);
    }

    .service-content-img04 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img05 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img06 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    /* service-3.html */

    .service-main03 > .main-img02 {
        background-image: url(../img/IMG_8208.JPG.jpg);
        background-position: clamp(-10rem, -15.517rem + 27.59vw, 0rem);
    }

    .service-content-img07 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img08 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img09 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    /* service-4.html */

    .service-main04 > .main-img02 {
        background-position: clamp(-25rem, -38.793rem + 68.97vw, 0rem);
    }

    .water .service-explain {
        height:clamp(125.5rem, 76.507rem + 244.97vw, 214.3rem);
    }

    .water .service-content {
        padding-bottom: 0rem;
    }

    .service-content-img10 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img10::after {
        background-position: -10rem;
    }

    .service-content-img11 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img12 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img13 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    /* service-5.html */

    .service-main05 > .main-img02 {
        background-image: url(../img/IMG_2123.JPG);
        background-position: clamp(-10rem, -15.517rem + 27.59vw, 0rem);
    }

    .service-content-img14 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img15 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img15::after {
        background-position: -8rem;
    }

    .service-content-img16 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .service-content-img16::after {
        background-position: -4rem;
    }

    /* service-6.html */

    .service-main06 > .main-img02 {
        background-position: clamp(-20rem, -31.034rem + 55.17vw, 0rem);
    }

    .led .service-explain {
        height: clamp(45rem, 36.724rem + 41.38vw, 60rem);
    }

    .service-content-img17 {
        width: clamp(13rem, 9.138rem + 19.31vw, 20rem);
        height: clamp(18rem, 13.586rem + 22.07vw, 26rem);
        margin: 0 clamp(0.5rem, -0.328rem + 4.14vw, 2rem) 0 clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    /* information.html */

    .greeting-sen {
        width: clamp(18.5rem, 3.879rem + 73.1vw, 45rem);
    }

    .greeting .home-title {
        padding: 12rem 0 2rem 0;
    }

    .greeting .home-title h3 {
        font-size: clamp(0.5rem, 0.334rem + 0.83vw, 0.8rem);
        margin-left: clamp(0.5rem, 0.334rem + 0.83vw, 0.8rem);
    }

    .greeting .home-title h2 {
        font-size: clamp(1.2rem, 0.759rem + 2.21vw, 2rem);
        margin-top: clamp(0.1rem, 0.045rem + 0.28vw, 0.2rem);
    }

    .greeting .home-title img {
        top: 12rem;
        width: clamp(12rem, 7.862rem + 20.69vw, 19.5rem);
    }

    .manager-img {
        width: clamp(11rem, 3.552rem + 37.24vw, 24.5rem);
        height: clamp(17rem, 7.345rem + 48.28vw, 34.5rem);
    }

    .greeting h4 {
        font-size: clamp(0.9rem, 0.569rem + 1.66vw, 1.5rem);
        padding-left: clamp(0.5rem, 0.224rem + 1.38vw, 1rem);
    }

    .greeting p {
        font-size: clamp(0.7rem, 0.534rem + 0.83vw, 1rem);
        line-height: clamp(2rem, 1.448rem + 2.76vw, 3rem);
    }

    .greeting-h3 {
        font-size: clamp(0.8rem, 0.579rem + 1.1vw, 1.2rem);
        margin-top: clamp(1.5rem, 0.948rem + 2.76vw, 2.5rem);
    }

    .name-p {
        font-size: clamp(1.2rem, 0.869rem + 1.66vw, 1.8rem);
        margin-left: clamp(1rem, 0.448rem + 2.76vw, 2rem);
    }

    .inline {
        width: clamp(18.5rem, 3.879rem + 73.1vw, 45rem);
    }

    .company-table {
        padding-bottom: clamp(7rem, 2.586rem + 22.07vw, 15rem);
    }

    .company-table .home-title {
        padding-top: 2rem;
    }

    .company-table .home-title h2 {
        font-size: clamp(1.2rem, 0.924rem + 1.38vw, 1.7rem);
    }

    .company-table .home-title img {
        width: clamp(12rem, 8.69rem + 16.55vw, 18rem);
        /* 18rem 900px */
        top: 2.2rem;
    }

    .company-table .news-date li {
        padding: clamp(2rem, 1.724rem + 1.38vw, 2.5rem) 0;
        font-size: clamp(0.7rem, 0.534rem + 0.83vw, 1rem);
    }

    .company-table .news-date li span {
        font-size: clamp(0.7rem, 0.479rem + 1.1vw, 1.1rem);
        width: clamp(8.5rem, 3.259rem + 26.21vw, 18rem);
    }

    .company-table .news-date li .service-table {
        width: clamp(9.5rem, 0.397rem + 45.52vw, 26rem);
        line-height: clamp(1.2rem, 0.483rem + 3.59vw, 2.5rem);
        font-size: clamp(0.7rem, 0.534rem + 0.83vw, 1rem);
        margin: 0;
    }

    /* results.html */

    .inner {
        width: clamp(20rem, 1.793rem + 91.03vw, 53rem);
    }

    .results-title h1 {
        font-size: clamp(1.5rem, 1.224rem + 1.38vw, 2rem);
        margin-bottom: clamp(1.2rem, 0.759rem + 2.21vw, 2rem);
    }

    .results-title p {
        font-size: clamp(0.7rem, 0.424rem + 1.38vw, 1.2rem);
        line-height: clamp(2rem, 1.448rem + 2.76vw, 3rem);
    }

    .results-column {
        flex-wrap: wrap;
    }

    .results-flex {
        margin-top: clamp(2.5rem, 1.121rem + 6.9vw, 5rem);
    }

    .results-content {
        width: clamp(10rem, 1.724rem + 41.38vw, 25rem);
    }

    .results-content h2 {
        font-size: clamp(1rem, 0.614rem + 1.93vw, 1.7rem);
        border-left: clamp(0.188rem, 0.119rem + 0.34vw, 0.313rem) solid rgba(20, 81, 183, .6);
        margin-left: clamp(0.5rem, -0.879rem + 6.9vw, 3rem);
        padding: clamp(0rem, -0.166rem + 0.83vw, 0.3rem) clamp(0.5rem, 0.224rem + 1.38vw, 1rem);
    }

    .results-content p {
        font-size: clamp(0.8rem, 0.634rem + 0.83vw, 1.1rem);
        line-height: clamp(2rem, 1.724rem + 1.38vw, 2.5rem);
        margin-top: clamp(1.5rem, 1.224rem + 1.38vw, 2rem);
        margin-left: clamp(0.5rem, -0.879rem + 6.9vw, 3rem);
        padding-right: clamp(0.5rem, -0.052rem + 2.76vw, 1.5rem);
    }

    .results-click {
        width: clamp(10rem, 1.724rem + 41.38vw, 25rem);
        overflow: hidden;
    }

    .results-img01 {
        width: clamp(9.5rem, 0.948rem + 42.76vw, 25rem);
        height: clamp(15rem, 12.241rem + 13.79vw, 20rem);
        margin-right: .5rem;
    }

    .results-img02 {
        width: clamp(9.5rem, 0.948rem + 42.76vw, 25rem);
        height: clamp(15rem, 12.241rem + 13.79vw, 20rem);
        margin-right: .5rem;
    }

    .results-img03 {
        width: clamp(9.5rem, 0.948rem + 42.76vw, 25rem);
        height: clamp(15rem, 12.241rem + 13.79vw, 20rem);
        margin-right: .5rem;
    }

    .results-img04 {
        width: clamp(9.5rem, 0.948rem + 42.76vw, 25rem);
        height: clamp(15rem, 12.241rem + 13.79vw, 20rem);
        margin-right: .5rem;
    }

    .results-img05 {
        width: clamp(9.5rem, 0.948rem + 42.76vw, 25rem);
        height: clamp(15rem, 12.241rem + 13.79vw, 20rem);
        margin-right: .5rem;
    }

    .results-img06 {
        width: clamp(9.5rem, 0.948rem + 42.76vw, 25rem);
        height: clamp(15rem, 12.241rem + 13.79vw, 20rem);
        margin-right: .5rem;
    }

    .results-btn {
        font-size: clamp(0.7rem, 0.424rem + 1.38vw, 1.2rem);
        width: clamp(9.5rem, 0.948rem + 42.76vw, 25rem);
    }

    .results-flex .triangle-arrow-right::after {
        position: absolute;
        left: 1rem;
        vertical-align: middle;
        content: "";
        top: 50%;
        transform: translateY(-50%);   /* 縦軸をセンタリングする */  
        border: clamp(0.375rem, 0.237rem + 0.69vw, 0.625rem) solid transparent;
        border-left: clamp(0.625rem, 0.349rem + 1.38vw, 1.125rem) solid #f5f6f7; 
}

    /* #pickup */

    .pickup {
        margin-top: 2rem;
        padding-bottom: 0;
    }

    .pickup h3 {
        margin-bottom: clamp(2rem, 0.897rem + 5.52vw, 4rem);
        font-size: clamp(1.2rem, 0.924rem + 1.38vw, 1.7rem);
        padding: .3rem clamp(0.5rem, 0.224rem + 1.38vw, 1rem);
        margin-left: .5rem;
    }

    .pickup-flex {
        justify-content: center;
        flex-wrap: wrap;
        margin-top: clamp(2rem, 0.897rem + 5.52vw, 4rem);
    }

    .pickup-contents {
        margin-bottom: clamp(7rem, 5.897rem + 5.52vw, 9rem);
    }

    
    .pickup-img01 {
        position: relative;
        overflow: hidden;
        width: clamp(19rem, 5.759rem + 66.21vw, 43rem);
        height: clamp(14rem, 5.172rem + 44.14vw, 30rem);
        margin: 0 auto;
    }
    
    .pickup-img02 {
        position: relative;
        overflow: hidden;
        width: clamp(19rem, 5.759rem + 66.21vw, 43rem);
        height: clamp(14rem, 5.172rem + 44.14vw, 30rem);
        margin: 0 auto;
    }

    .pickup-contents h4 {
        font-size: clamp(1rem, 0.614rem + 1.93vw, 1.7rem);
        position: relative;
        margin-top: clamp(1.5rem, 1.114rem + 1.93vw, 2.2rem);
    }

    .pickup-contents h4::before {
        content: "";
        width: clamp(0.25rem, 0.216rem + 0.17vw, 0.313rem);
        height: clamp(2.25rem, 2.043rem + 1.03vw, 2.625rem);
        background-color: rgba(20, 81, 183, .6);
        position: absolute;
        top: clamp(-0.55rem, -0.688rem + 0.69vw, -0.3rem);
        right: clamp(19.4rem, 9.138rem + 51.31vw, 38rem);
    }

    .pickup-contents p {
        width: clamp(19rem, 5.759rem + 66.21vw, 43rem);
        font-size: clamp(0.8rem, 0.579rem + 1.1vw, 1.2rem);
        margin-top: clamp(1.3rem, 1.079rem + 1.1vw, 1.7rem);
    }

    .pickup-img02 {
        margin-top: clamp(6rem, 4.897rem + 5.52vw, 8rem);
    }

    .pickup-contents .results-btn {
        font-size: clamp(0.8rem, 0.579rem + 1.1vw, 1.2rem);
        margin-top: clamp(1.3rem, 1.134rem + 0.83vw, 1.6rem);
        width: clamp(19rem, 11.276rem + 38.62vw, 33rem);
    }


    .pickup-contents .triangle-arrow-right::after {
        border: clamp(0.438rem, 0.334rem + 0.52vw, 0.625rem) solid transparent;
        border-left: clamp(0.813rem, 0.64rem + 0.86vw, 1.125rem) solid #f5f6f7; 
    }

    /* example-1.html */

    .example h2 {
        font-size: clamp(1.2rem, 0.648rem + 2.76vw, 2.2rem);
        margin-bottom: clamp(2rem, 0.345rem + 8.28vw, 5rem);
    }

    .grid {
        grid-template-columns: repeat(auto-fit, clamp(20rem, 8.966rem + 55.17vw, 40rem));
    }

    .example-flex {
        grid-template-columns: repeat(auto-fit, clamp(20rem, 8.966rem + 55.17vw, 40rem));
    }

    .example-contents {
        width: clamp(15rem, 1.207rem + 68.97vw, 40rem);
        height: clamp(26rem, 16.621rem + 46.9vw, 43rem);
    }

    .example-contents h3 {
        font-size: clamp(0.9rem, 0.569rem + 1.66vw, 1.5rem);
        margin-top: clamp(1.5rem, 1.224rem + 1.38vw, 2rem);
    }

    .example-contents h3::before {
        left: clamp(0rem, -4.138rem + 20.69vw, 7.5rem);
        height: clamp(1.25rem, 1.043rem + 1.03vw, 1.625rem);
        top: clamp(-0.125rem, -0.194rem + 0.34vw, 0rem);
    }

    .example-contents p {
        text-align: center;
        font-size: clamp(0.7rem, 0.479rem + 1.1vw, 1.1rem);
        margin-top: clamp(1rem, 0.724rem + 1.38vw, 1.5rem);
        line-height: clamp(1.5rem, 1.39rem + 0.55vw, 1.7rem);
    }

    .example-btn {
        width: clamp(15rem, 6.724rem + 41.38vw, 30rem);
        margin: clamp(1rem, 0.448rem + 2.76vw, 2rem) auto 2rem auto;
        font-size: clamp(0.7rem, -0.679rem + 6.9vw, 3.2rem);
    }

    .example-btn .triangle-arrow-right::after {
        border: clamp(0.375rem, 0.237rem + 0.69vw, 0.625rem) solid transparent;
        border-left: clamp(0.75rem, 0.543rem + 1.03vw, 1.125rem) solid #f5f6f7;
    }

    .example-img01,
    .example-img02,
    .example-img03,
    .example-img04,
    .example-img05,
    .example-img06,
    .example-img07,
    .example-img08,
    .example-img09,
    .example-img10,
    .example-img11,
    .example-img12,
    .example-img13,
    .example-img14 {
        width: clamp(15rem, 1.207rem + 68.97vw, 40rem);
        height: clamp(13rem, 6.379rem + 33.1vw, 25rem);
    }

        /* example-1-con.html */

        .result {
            margin-top: 12rem;
        }
    
        .result-title h2 {
            font-size: clamp(1rem, 0.559rem + 2.21vw, 1.8rem);
            padding-top: clamp(4rem, 3.448rem + 2.76vw, 5rem);
        }
    
        .result-title p {
            font-size: clamp(0.7rem, 0.314rem + 1.93vw, 1.4rem);
            padding-bottom: clamp(2.5rem, 1.948rem + 2.76vw, 3.5rem);
        }
    
        .result-img01 {
            width: clamp(19rem, 1.897rem + 85.52vw, 50rem);
            height: clamp(18rem, 5.862rem + 60.69vw, 40rem);
        }
    
        .result-detail {
            width: clamp(19rem, -0.31rem + 96.55vw, 54rem);
        }
    
        .result-detail h3 {
            font-size: clamp(0.9rem, 0.679rem + 1.1vw, 1.3rem);
        }
    
        .result-detail p {
            font-size: clamp(0.7rem, 0.479rem + 1.1vw, 1.1rem);
        }
    
        .result-grid {
            width: clamp(19rem, -0.862rem + 99.31vw, 55rem);
            margin-bottom: clamp(3rem, 0.793rem + 11.03vw, 7rem);
        }
    
        .result-grid-content {
            grid-template-columns: repeat(auto-fit, clamp(18.5rem, 13.776rem + 23.62vw, 27.063rem));
        }
    
        .grid-content h5 {
            width: clamp(18.5rem, 14.914rem + 17.93vw, 25rem);
            font-size: clamp(0.9rem, 0.79rem + 0.55vw, 1.1rem);
        }
    
        .right-sen {
            margin-left: clamp(0rem, -1.159rem + 5.79vw, 2.1rem);
            width: clamp(18.5rem, 13.755rem + 23.72vw, 27.1rem);
        }
    
        .result-img02,
        .result-img04 {
            width: clamp(18.5rem, 14.914rem + 17.93vw, 25rem);
            height: clamp(13rem, 10.241rem + 13.79vw, 18rem);
        }
    
        .result-img03,
        .result-img05 {
            width: clamp(18.5rem, 14.914rem + 17.93vw, 25rem);
            height: clamp(13rem, 10.241rem + 13.79vw, 18rem);
            margin-left: clamp(0rem, -1.159rem + 5.79vw, 2.1rem);
        }
    



    /* news.html */


.news-title {
    margin-top: 12rem;
    margin-bottom: clamp(1rem, 0.448rem + 2.76vw, 2rem);
}

.news-title .home-title {
    margin-left: clamp(0rem, -1.103rem + 5.52vw, 2rem);
}

.news-title img {
    top: clamp(41.6rem, 39.614rem + 9.93vw, 45.2rem);
}

.news-inner {
    margin-bottom: clamp(2.5rem, 1.121rem + 6.9vw, 5rem);
}

#news-page .news-main {
    width: clamp(19.5rem, 1.569rem + 89.66vw, 52rem);
}

#news-page .news-date {
    width: clamp(19.5rem, 1.569rem + 89.66vw, 52rem);
}

#news-page li {
    font-size: clamp(0.65rem, 0.402rem + 1.24vw, 1.1rem);
    padding: clamp(2rem, 1.448rem + 2.76vw, 3rem) clamp(0rem, -0.938rem + 4.69vw, 1.7rem);
    width: clamp(19.5rem, 1.569rem + 89.66vw, 52rem);
}

#news-page li span {
    display: inline-block;
    font-size: clamp(0.55rem, 0.357rem + 0.97vw, 0.9rem);
    width: clamp(4.2rem, 1.552rem + 13.24vw, 9rem);
    margin-right: 0;
}

#news-page li .news-title {
    font-size: clamp(0.65rem, 0.402rem + 1.24vw, 1.1rem);    
    color: #070522;
    width: clamp(15rem, 3.966rem + 55.17vw, 35rem);
    margin: 0;
}

/* pagination */
.pagination {
    margin: clamp(1.5rem, 0.948rem + 2.76vw, 2.5rem);
    font-size: clamp(0.6rem, 0.379rem + 1.1vw, 1rem);
}

.page-numbers {
    margin-right: clamp(1rem, 0.448rem + 2.76vw, 2rem);
}

.page-numbers.current {
    padding: clamp(0.35rem, 0.047rem + 1.52vw, 0.9rem) clamp(0.55rem, 0.191rem + 1.79vw, 1.2rem);
}

/* news-content.html */

.news-contents-main .main-img02 {
    height: clamp(15rem, 2.862rem + 60.69vw, 37rem);
}

.news-contents-main .darks {
    height: clamp(15rem, 2.862rem + 60.69vw, 37rem);
}

.news-contents-main .about-main-title h3 {
    margin-top: clamp(3rem, -1.414rem + 22.07vw, 11rem);
}

.news-contents-main .position {
    top: clamp(14.3rem, 2.162rem + 60.69vw, 36.3rem);
}

.news-titles {
    margin-top: clamp(12rem, 10.897rem + 5.52vw, 14rem);
    margin-bottom: clamp(1rem, 0.448rem + 2.76vw, 2rem);
    padding: 0 clamp(1rem, -0.103rem + 5.52vw, 3rem);
}

.news-titles h3 {
    font-size: clamp(0.4rem, 0.234rem + 0.83vw, 0.7rem);
    margin-left: clamp(0.5rem, 0.224rem + 1.38vw, 1rem);
}

.news-titles h2 {
    font-size: clamp(0.8rem, 0.414rem + 1.93vw, 1.5rem);
    padding-bottom: clamp(0.5rem, 0.224rem + 1.38vw, 1rem);
    border-bottom: clamp(0.125rem, 0.091rem + 0.17vw, 0.188rem) solid #4B7DCB;
}

.news-contents {
    margin: 0 auto;
    padding: 0 clamp(1rem, -0.103rem + 5.52vw, 3rem);
}

.news-contents p {
    font-size: clamp(0.7rem, 0.534rem + 0.83vw, 1rem);
    line-height: clamp(1.5rem, 0.948rem + 2.76vw, 2.5rem);
    border-bottom: clamp(0.094rem, 0.077rem + 0.09vw, 0.125rem) solid rgba(46, 46, 46, .7);
    padding-bottom: clamp(1.5rem, 0.672rem + 4.14vw, 3rem);
}

.news-buttons {
    margin: clamp(1.5rem, 0.672rem + 4.14vw, 3rem) auto;
    padding: 0 clamp(1rem, -0.103rem + 5.52vw, 3rem);
}

.back {
    font-size: clamp(0.5rem, 0.224rem + 1.38vw, 1rem);
    margin-right: clamp(1.5rem, -3.19rem + 23.45vw, 10rem);
}

.back a::before {
    left: calc(clamp(1rem, -0.103rem + 5.52vw, 3rem) * -1);
    width: clamp(0.625rem, 0.28rem + 1.72vw, 1.25rem);
    height: clamp(0.625rem, 0.28rem + 1.72vw, 1.25rem);
}

.top {
    font-size: clamp(0.7rem, 0.479rem + 1.1vw, 1.1rem);
    border: clamp(0.119rem, 0.115rem + 0.02vw, 0.125rem) solid rgba(46, 46, 46, .7);
    margin-right: clamp(1.5rem, -3.19rem + 23.45vw, 10rem);
    padding: clamp(0.7rem, -0.017rem + 3.59vw, 2rem);
}

.next {
    font-size: clamp(0.5rem, 0.224rem + 1.38vw, 1rem);
}

.next::before {
    right: calc(clamp(1rem, -0.103rem + 5.52vw, 3rem)* -1);
    width: clamp(0.625rem, 0.28rem + 1.72vw, 1.25rem);
    height: clamp(0.625rem, 0.28rem + 1.72vw, 1.25rem);
}




}