@charset "UTF-8";
html{font-size: 16px; width: 100%; overflow-x: hidden;}
body{background: url('../images/clear-pale-gray-colored-wall.jpg'); background-size: 50%;}
*{font-family: "Noto Sans Lao","Noto Sans JP", sans-serif;}
img{display: inline-block;}
a{text-decoration: none;}
section{max-width: 1280px; margin:0 auto;}
.logo img{height: 56px;}
header{position: fixed; z-index: 900; width: 100%; left:0; top:0; text-align: center; background: #fff;}
nav{background: rgba(246, 235, 214, 1); text-align: center;}
nav a{display: inline-flex; padding: 13px 50px; line-height: 1; justify-content: center; color:#000; font-size: 1.1rem;}
nav a:hover, nav a.active{background: rgba(212, 184, 128, 1); color:#fff;}
#navation{font-size: 3rem; color:rgba(227, 164, 3, 1);}
main{margin-top:157px;}
#footer{background:rgba(236, 236, 236, 1); }
#footer *{font-size: 1rem; font-weight: 300;}
#footer .box{padding:30px 0; width: 80%; margin-left:20%;}
#footer .title{border-bottom: 1px #000 solid; padding-bottom: 10px; margin-bottom: 20px; margin-top: 30px;}
#footer .title, #footer .title span{font-size:1.8rem; font-weight: 300;}
#footer .title .subtitle{font-size: 18px; display: inline-flex; align-items: center; font-weight: 300; margin-left:50px;}
#footer label{display: inline-block; width: 110px; border-right: 1px #000 solid; margin: 15px 18px 15px 0; line-height: 1; font-weight: 300;}
#footer .icon{height: 28px; display: inline-block; margin-left:10px;}
footer{background: #000; font-size: 0.8rem; color:#fff; font-weight: 600; text-align: center; padding:10px;}
.ci1{color:rgba(227, 164, 3, 1);}
#floatbox{position: fixed; z-index: 800; right:20px; bottom:20vh; display: none;}
#floatbox img{height: 80px; transform: rotate(-45deg);}
#indexbanner .swiper-slide a{background: no-repeat center; background-size: cover; display: block; height: 600px;}
#indexbanner .swiper-button-prev, #indexbanner .swiper-button-next{}
.swiper-pagination-bullet{background: #fff; width: 16px; opacity: 0.7; border-radius: 4px;}
.swiper-pagination-bullet-active{background: #fff; width: 8px; opacity: 1; border-radius: 50%;}
.swiper-button-prev, .swiper-button-next{height: 100%; background: rgba(255,255,255,0.4); margin-top:0 !important; top:0 !important; padding:0 10px;}
#indexbanner .swiper-button-prev, #indexbanner .swiper-button-next{width:70px;}
#indexbanner .swiper-button-prev img, #indexbanner .swiper-button-next img{width:24px;}
#indexbanner .swiper-button-prev svg, #indexbanner .swiper-button-next svg{display: none;}
.swiper-button-prev{left:0 !important;}
.swiper-button-prev img{transform: rotate(-180deg);}
.swiper-button-next{right: 0 !important;}
.title1{text-align: center; position: relative; font-weight: 100; font-size: 2.1rem;}
.title1:before, .title1:after{content:''; display: block; width:calc(50% - 9rem); left:1rem; height: 1px; background: #000; top:calc(50% - 1px); position: absolute; opacity: 0.3;}
.title1:after{left:auto; right:1rem;}
.title1.noline:before, .title1.noline:after{display: none;}
.title3{text-align: center; position: relative; font-weight: 100; font-size: 1.2rem; letter-spacing: 3rem; padding-left:3rem; color:#fff; font-weight: 700;}
.title3:before, .title3:after{content:''; display: block; width:calc(50% - 15rem); left:1rem; height: 3px; background: #fff; top:calc(50% - 1px); position: absolute;}
.title3:after{left:auto; right:1rem;}
.contactBox{width:80%; margin:0px auto 0px auto; padding:120px 0 200px 0;}
.contactBox .box{text-align: center; margin:0 10px; padding:80px 10px; background: #fff; border: 3px rgba(246, 235, 214, 1) solid; border-radius: 30px;}
.contactBox .title{color: rgba(227, 164, 3, 1); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.8rem;}
.contactBox .box img{width: 40%; margin-bottom: 20px;}
.contactBox .txt{opacity: 0.4;}
.procedureBox{width:80%; margin:120px auto 200px auto; position: relative; z-index: 5;}
.procedureBox .box{text-align: center; margin:0 10px 3rem 10px; padding:20px 10px; background: #fff; border: 1px #000 solid; border-radius: 30px; height: 170px; position: relative;}
.procedureBox .box:after{content: ''; position: absolute; display: block; width: 3rem; height: 1px; background: #000; top:50%; right: -3rem;}
.procedureBox div:nth-child(3) .box:after, .procedureBox div:nth-child(6) .box:after{right: 40%; top:auto; bottom:-1.6rem; transform: rotate(90deg);}
.procedureBox div:nth-child(9) .box:after{display: none;}
.procedureBox .no{font-size: 1.2rem;}
.procedureBox .title{color: rgba(227, 164, 3, 1); font-size: 1.2rem; font-weight: 700; line-height: 1.1; display: flex; align-items: center; justify-content: center; margin:0.6rem 0 1rem 0; letter-spacing: 15%;}
.procedureBox .box img{width: 40%; margin-bottom: 20px;}
.procedureBox .txt{opacity: 0.4; font-size: 0.8rem;  letter-spacing: 15%;}
#procedureBox{width: 55%; position: relative; transform: translateY(-300px);}
#procedureBox img{width:80%; max-width: 700px; position: absolute; z-index: 3; right: 10%; top:0px; transform: translateY(-250px);}
#procedureBox .box1{width: 100%; height: 300px; background: rgba(236, 236, 236, 1);}
#procedureBox .box2{width: 80%; height: 60px; background: rgba(234, 211, 165, 0.4); position: absolute; right: -40%; bottom:80px;}
#procedureBox1{border-radius: 20px; border:1px #000 solid; padding:40px 40px; width: 90%; max-width: 800px; margin:-400px auto 200px auto;; background: #fff; position: relative;}
#procedureBox1 ul{margin:0; padding: 0;}
#procedureBox1 ul li{display: flex; align-items: center; justify-content: space-between; gap:10px; margin:1rem 0;}
#procedureBox1 ul li .no{font-size: 1.2rem; font-weight: 400;}
#procedureBox1 ul li .txt{color:rgba(115, 115, 115, 1); letter-spacing: 15%;}
.title2{color: rgba(227, 164, 3, 1); font-size: 1.3rem; font-weight: 700; letter-spacing: 2px;}
form .title{color:rgba(227, 164, 3, 1); font-weight: 700; letter-spacing: 15%; display: flex; align-items: center; width: 90px; padding-right: 0;}
form input::placeholder, form textarea::placeholder, form select{color:rgba(0, 0, 0, 0.3) !important;}
form [type=text], form select{border-radius: 71px !important; border-color:rgba(227, 164, 3, 1) !important; }
form textarea{border-color:rgba(227, 164, 3, 1) !important; }
form label{display: inline-flex; align-items: center;}
form label input{margin-right: 10px;}
form [type=radio]{accent-color:rgba(214, 209, 200, 1); appearance: none; width: 15px; height: 15px; border: 4px solid rgba(214, 209, 200, 1); border-radius: 50%; outline: none; background-color: white; cursor: pointer;}
form [type=radio]:checked{border-color: rgba(227, 164, 3, 1);}
.banner{background: no-repeat center; background-size: cover; height: 320px;}
.gallerybox{display: flex; gap:15px; flex-wrap: wrap; margin:100px auto 150px auto; width:96%;}
.gallerybox > div{width:calc(33.3333% - 10px); border-radius: 15px; overflow: hidden; position: relative;}
.gallerybox > div > a{display: block; aspect-ratio: 4/2.5; background: no-repeat center; background-size: cover; cursor: pointer;}
.gallerybox > div .info{position: absolute; left:0; bottom:-100px; background: rgba(0,0,0,0.5); padding:10px 15px; color:#fff; width: 100%; display: flex; justify-content: space-between; transition:  300ms ease-in-out; opacity: 0;}
.gallerybox > div:hover .info{bottom:0; opacity: 1;}
.gallerybox > div .info .tag{background: rgba(227, 164, 3, 1); border-radius: 20px; padding:5px 1rem; font-size: 0.8rem; line-height: 1; font-weight: 700;}
.gallerybox > div .info *{color:#fff;}
.borderbox{border:8px #fff solid; border-radius: 26px; position: relative;  z-index: 2; margin:200px auto; width:96%;}
.servicebox{display: flex; flex-wrap: wrap; gap:30px; width:90%; margin:-100px auto -50px auto;}
.servicebox .item{border-radius: 25px; overflow: hidden; box-shadow: 0px 11px 31.1px -3px rgba(0, 0, 0, 0.07); width:calc(33.33333% - 20px);}
.servicebox .item a{display: block;}
.servicebox .item a img{aspect-ratio: 4/2.5; object-fit: cover;}
.servicebox .item a .txt{background: #fff; padding:10px; text-align: center; color:rgba(40, 39, 38, 0.5); font-weight: 700; letter-spacing: 10%;}
#service_hh{left:30px; max-width: 600px; margin-top:-300px;}
.tagsbox{width:90%; max-width: 800px; margin:-230px auto 100px auto; display: flex; flex-wrap: wrap; gap:15px; justify-content: center; position: relative; z-index: 2;}
.tagsbox a{display: inline-block; padding:10px 30px; border:3px rgba(227, 164, 3, 1) solid; border-radius: 15px; color:rgba(227, 164, 3, 1) !important; background: #fff; font-weight: 500; font-size: 1.2rem;}
.tagsbox a:hover{background: rgba(227, 164, 3, 1); color:#fff !important;}
#indexCase{background: rgba(246, 235, 214, 1) url('../images/CASE_SHARE.png') right bottom no-repeat; background-size: 90% auto; padding: 100px 0;}
.swiper_case{width: 90%; max-width: 800px; margin: 100px auto;}
.swiper_case .swiper-slide{display: flex; background: #fff; border-radius: 25px; box-shadow: 0px 10px 18.3px 0px rgba(0, 0, 0, 0.13);}
.swiper_case .swiper-slide a{background: no-repeat center; background-size: cover; display: block; aspect-ratio: 4/2.5; border-radius: 10px; width:calc(100% - 250px); margin:20px 20px 20px 0;}
.swiper_case .swiper-slide .info{width:250px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-direction: column;}
.swiper_case .swiper-slide .info .title{font-size: 1.6rem; font-weight: 300; letter-spacing: 10%; padding:0 1rem; text-align: center;}
.swiper_case .swiper-slide .info .tag{background: rgba(227, 164, 3, 1); color:#fff; border-radius: 8px; text-align: center; width: 130px; margin:0; margin-top:1rem; height: 30px; line-height: 30px;}
.swiper_case .swiper-slide:not(.swiper-slide-active) { opacity: 0.6; }
.swiper_case .swiper-button-prev, .swiper_case .swiper-button-next{background: none; width:60px;}
.swiper_case .swiper-button-prev{transform: translateX(-80px);}
.swiper_case .swiper-button-next{transform: translateX(80px);}
#indexArea1{text-align: center; background: url('../images/55a7c342c0368c7bb9f74cd76b463c760537e56f.png') no-repeat 35% bottom;  background-size: 180% auto; padding: 100px 0 280px 0; position: relative; margin-bottom: 50px; position: relative;}
.btn1{color:#fff; background: rgba(243, 193, 0, 1); font-size: 18px; letter-spacing: 63%; font-weight: 800; width: 213px; text-align: center; border-radius: 38px; margin-top:1.5rem; line-height: 1; padding:5px 0;}
@media screen and (max-width:860px) {
    html{font-size: 14px;}
    nav{position: fixed; z-index: 901; width: 100%; left:0; top:82px; background: #fff; display: none;}
    nav.active{display: block;}
    nav a{width:100%;}
    main{margin-top:82px;}
    #footer .box{width:calc(100% - 1rem); margin-left:1rem;}
    #footer label{width: 70px;}
    .logo img{margin:10px 0 10px 30px;}
    .title1:before, .title1:after{left:1rem;}
    .title1:after{left:auto; right: 1rem;}
    .procedureBox .box{height: auto; padding:30px 0;}
    .procedureBox .box:after{right: 40%; top:auto; bottom:-1.6rem; transform: rotate(90deg);}
    .procedureBox div:nth-child(8) .box:after{display: none;}
    #procedureBox{width: 90%; transform: translateY(-80px);}
    #procedureBox img{transform: translateY(-100px);}
    #procedureBox .box1{height: 150px;}
    #procedureBox .box2{bottom:-30px;}
    #procedureBox1{margin:0 auto 100px auto;}
    #procedureBox1 .title2{text-align: center;}
    #procedureBox1 ul li{flex-direction: column;}
    .gallerybox{width:90%;}
    .gallerybox > div{width:100%;}
    .borderbox{border:none;}
    .servicebox .item{width:100%;}
    #service_hh{transform: rotate(90deg); width: 300px; left:-80px; margin-top: -500px;}
    .tagsbox{width: 300px; margin-top:100px;}
    .tagsbox a{padding:10px 70px;}
    #indexCase{background-size: 100% auto;}
    .swiper_case{margin:50px auto 100px auto;}
    .swiper_case .swiper-slide{flex-direction: column-reverse;}
    .swiper_case .swiper-slide a{width:calc(100% - 40px); height: 270px; margin:20px;}
    .swiper_case .swiper-slide .info{width: calc(100%); margin-bottom: 40px;}
    .swiper_case .swiper-slide .info .tag{width: calc(100% - 40px);}
    .swiper_case .swiper-button-prev{transform: translateX(-20px);}
    .swiper_case .swiper-button-next{transform: translateX(20px);}
    .procedureBox{margin-top:50px;}
    #indexArea1{background-size: 245% auto; background-position: 20% bottom; padding:50px 0 130px 0;}
    #indexbanner .swiper-button-prev, #indexbanner .swiper-button-next{width: 60px;}
    #indexbanner .swiper-slide a{height: 300px;}
    .title3{letter-spacing: 1rem; padding-left: 1rem;}
    .title3:before, .title3:after{width: calc(50% - 9rem);}
    form .title{width:100%; justify-content: center; margin-bottom: 1rem;}
    form textarea{min-height: 400px !important;}
    .contactBox .box{padding:40px 10px;}
    #footer .title, #footer .title span{font-size: 1.2rem;}
    #footer .title .subtitle{font-size: 0.9rem; margin-left:0.5rem;}
    #footer .icon{height: 1.2rem;}
    #floatbox img{height: 50px;}
}

@media print{
    html, body{ width:100%; height:auto; overflow:auto; }
}