body{ height: auto !important; overflow: auto; overflow-x: hidden;}
header a.logo{ opacity: 1;}
header .navbar{ left: 0;}

/* works-page */
.works-page{ width: 100%; padding: 180px 0 0; box-sizing: border-box; position: relative; z-index: 0; transition: .5s ease-in-out .1s;}
.works-page .cate-area{ width: 100%; list-style: none; text-align: left; margin: 40px auto 0;}
.works-page .cate-area li{ display: inline-block; padding: 20px 20px; box-sizing: border-box; position: relative;}
.works-page .cate-area li::after{ content: ""; width: 1px; height: 100%; background-color: var(--color_black); top: 0; right: 0; bottom: 0; margin: auto; position: absolute;}
.works-page .cate-area li:last-child::after{ display: none;}
.works-page .cate-area li br{ display: none;}
.works-page .cate-area a{ font-size: 18px;}
.works-page .cate-area a:hover{ opacity: .2;}
.works-page .woaks-area{ width: 100%; list-style: none; margin: 20px auto 0; padding: 0 0; box-sizing: border-box;}
.works-page .woaks-area li{ width: calc(100% - 40px); margin: auto; border-radius: 25px; background-color: var(--color_gray);}
.works-page .woaks-area li:nth-child(even){ margin: 20px auto;}
.works-page .woaks-area li .wrap{ width: 100%; max-width: 1030px; margin: auto auto; padding: 40px 20px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}
.works-page .woaks-area li .wrap img{ width: 100%; max-width: 400px; margin-right: 40px; filter: grayscale(100%);}
.works-page .woaks-area li .wrap .text-box{ width: calc(100% - 400px);}
.works-page .woaks-area li .wrap .text-box .item-box{ width: 100%; margin-top: 0;}
.works-page .woaks-area li .wrap .text-box .item-box:nth-child(n + 2){ margin-top: 40px;}
.works-page .woaks-area li .wrap .text-box .item-box .item-title{ display: inline-block; padding: 4px 20px; box-sizing: border-box; background-color: var(--color_black); font-family: var(--font_Lato); font-size: 16px; color: var(--color_white); border-radius: 100px; letter-spacing: 2px;}
.works-page .woaks-area li .wrap .text-box .item-box .ml20{ margin-left: 20px; margin-top: 10px;}
.works-page .woaks-area li .wrap .text-box .item-box p{ font-size: 18px; font-weight: 800; color: #202020;}
.works-page .woaks-area li .wrap .text-box .item-box p.title{ font-size: 24px; font-weight: 800; color: #202020;}
.works-page .woaks-area li .wrap .text-box .item-box p.title span{ display: inline-block; font-size: 18px;}
.works-page .woaks-area li .wrap .text-box .item-box .color{ width: 100%; display: flex; justify-content: flex-start; align-items: center;}
.works-page .woaks-area li .wrap .text-box .item-box .color > div{ width: 100%; max-width: 24px; aspect-ratio: 1 / 1; margin: 0 10px 0 0;}

/* about-page */
.about .about-page{ width: 100%; padding: 180px 0 0; box-sizing: border-box;}
.about .about-page .about-area{ width: 100%; border-top: 1px solid var(--color_black); border-bottom: 1px solid var(--color_black); margin: 40px auto 0;}
.about .about-page .about-area .wrap{ width: 100%; max-width: 1200px; margin: auto; display: flex; justify-content: space-between; align-items: stretch; padding: 0 20px; box-sizing: border-box;}
.about .about-page .about-area .wrap .left{ width: calc(50% - 20px); padding: 40px 20px; box-sizing: border-box; border-bottom: 1px solid var(--color_black); display: flex; justify-content: flex-start; align-items: flex-start;}
.about .about-page .about-area .wrap .right{ width: calc(50% - 20px); padding: 40px 20px; box-sizing: border-box; border-bottom: 1px solid var(--color_black); display: flex; justify-content: flex-start; align-items: flex-start;}
.about .about-page .about-area .wrap:last-child > *{ border-bottom: 0 none;}
.about .about-page .about-area .wrap .item-title{ width: 100%; max-width: 112px; display: inline-block; padding: 4px 20px; box-sizing: border-box; background-color: var(--color_black); font-size: 16px; color: var(--color_white); text-align: center; border-radius: 100px; letter-spacing: 2px; margin: 0 40px 0 0;}
.about .about-page .about-area .wrap .item-detail{ font-size: 18px; padding-top: 3px;}
.about .about-page .about-area .wrap .item-detail p{ font-size: 18px;}
.about .about-page .about-area .wrap .item-detail p .notes{ font-size: 12px; margin-left: 10px; display: block; color: var(--color_black); background-color: transparent; padding: 0; margin-left: 0;}
.about .about-page .about-area .wrap .item-detail ul{ list-style: none; background-color: #A9A9A9; padding: 3px 10px; border-radius: 6px; box-sizing: border-box;}
.about .about-page .about-area .wrap .item-detail ul li{ font-size: 12px; color: var(--color_white);}

.about .slogan-area{ width: 100%; padding: 90px 20px; box-sizing: border-box;}
.about .slogan-area .htitle p.en{ color: var(--color_white); mix-blend-mode: difference;}
.about .slogan-area .htitle p.jp{ color: var(--color_black); background-color: var(--color_white); mix-blend-mode: difference;}
.about .slogan-area .wrap{ width: 100%; max-width: 1200px; margin: 40px auto 0;}
.about .slogan-area .wrap h2{ font-size: clamp(35px, 3vw, 80px); color: var(--color_white); mix-blend-mode: difference; font-weight: bold; font-family: var(--font_Rock);}
.about .slogan-area .wrap h3{ font-size: clamp(20px, 3vw, 40px); color: var(--color_white); mix-blend-mode: difference; font-weight: bold;margin: 50px 0;}
.about .slogan-area .wrap p{ font-size: clamp(16px, 2vw, 22px); color: var(--color_white); mix-blend-mode: difference;}

.about .service-area{ width: 100%; padding: 0 0 0; margin: 0; box-sizing: border-box;}
.about .service-area .wrap ul{ width: 100%; height: auto; list-style: none;}
.about .service-area .wrap ul li:nth-child(1){ border-top: 1px solid var(--color_white);}
.about .service-area .wrap ul li:last-child{ border-bottom: 0px none;}
.about .service-area .wrap ul li .left-box p{ font-size: clamp(28px, 4vw, 50px); color: var(--color_white); font-family: var(--font_Lato); mix-blend-mode: difference;}
.about .service-area .wrap ul li .left-box p:nth-child(2){ font-size: 12px;}
.about .service-area .wrap ul li .right-box p{ font-size: 12px; color: var(--color_white); text-align: right; mix-blend-mode: difference;}
.about .service-area .wrap ul li.active{ width: 100%; height: 0; display: flex; justify-content: space-between; align-items: center; background: var(--color_white); padding: 60px 80px; border-bottom: 1px solid var(--color_white); box-sizing: border-box; opacity: 0; transition: .3s ease-in-out;}
.about .service-area .wrap ul li.active{ height: auto; opacity: 1; padding: 60px 80px; background: var(--color_black);}

.about .message-area{ width: 100%; padding: 190px 20px 0; box-sizing: border-box;}
.about .message-area .wrap{ width: 100%; padding: 40px; box-sizing: border-box; background-color: var(--color_gray); border-radius: 24px; position: relative;}
.about .message-area .wrap::after{ content: "Message"; font-weight: bold; font-size: clamp(35px, 3vw, 80px); font-family: var(--font_Rock); position: absolute; top: -18px; right: -15px; margin: auto; z-index: 1; transform: rotate(15deg);}
.about .message-area .wrap .circle{ width: 200px; aspect-ratio: 1 / 1; padding: 10px; box-sizing: border-box; border-radius: 100px; position: absolute; top: -100px; left: 0; right: 0; margin: auto; background-color: var(--color_gray); z-index: 1;}
.about .message-area .wrap .circle .circle-img{ width: 100%; aspect-ratio: 1 / 1; border-radius: 100px; background-image: url("/assets/images/ave.jpg"); background-size: cover; overflow: hidden;}
.about .message-area .wrap p{ font-size: clamp(16px, 2vw, 20px); margin-top: 80px; position: relative; z-index: 1;}

/* news-page */
.news-page{ width: 100%; padding: 180px 0 0; box-sizing: border-box;}
.news-page .cate-area{ width: 100%; list-style: none; text-align: left; margin: 0 auto;}
.news-page .cate-area li{ display: inline-block; padding: 20px 20px; box-sizing: border-box; position: relative;}
.news-page .cate-area li::after{ content: ""; width: 1px; height: 100%; background-color: var(--color_white); top: 0; right: 0; bottom: 0; margin: auto; position: absolute;}
.news-page .cate-area li:last-child::after{ display: none;}
.news-page .cate-area a{ font-size: 18px; color: var(--color_white);}
.news-page .cate-area a:hover{ opacity: .2;}

/* recruit-page */
.recruit-page{ width: 100%; padding: 180px 0 0; box-sizing: border-box;}
.recruit-page .wrap{ padding: 0 20px; box-sizing: border-box;}
.recruit-page .wrap:nth-of-type(1){ margin: 40px auto 0;}
.recruit-page .wrap > p{ text-align: center; font-size: clamp(16px, 1vw, 20px); color: var(--color_white); mix-blend-mode: difference;}
.recruit-page .wrap > p br.forSP{ display: inline;}
.recruit-area .tab-wrap{ width: 100%; margin: 0 auto; padding: 40px 20px 0; box-sizing: border-box;}
.recruit-area .tab-wrap .tab-container{ display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
.recruit-area .tab-wrap .tab-container .tab{ font-weight: 500; width: 100%; max-width: 200px; padding: 20px; background-color: var(--color_black); cursor: pointer; font-size: clamp(16px, 1vw, 18px); color: var(--color_white); border-radius: 10px;}
.recruit-area .tab-wrap .tab-container .tab:nth-child(1){ margin-right: 10px;}
.recruit-area .tab-wrap .tab-container .tab p{ font-size: 12px; color: var(--color_white);}
.recruit-area .tab-wrap .tab-container .tab.tab-active{ background-color: var(--color_blue_02);}
.recruit-area .tab-wrap .content-container{ position: relative; top: -40px; z-index: 0;}
.recruit-area .tab-wrap .content-container .content{ display: none;}
.recruit-area .tab-wrap .content-container .content.show{ display: block; background-color: var(--color_blue_02); border-radius: 25px; padding: 80px 40px 80px; box-sizing: border-box;}
.recruit-area .tab-wrap .content-container .content .box{ width: 100%; max-width: 1000px; margin: auto; display: flex; justify-content: flex-start; align-items: flex-start; padding: 40px 20px; box-sizing: border-box; border-bottom: 1px solid var(--color_white);}
.recruit-area .tab-wrap .content-container .content .box .item-title{ width: 100%; max-width: 155px; display: inline-block; padding: 4px 20px; box-sizing: border-box; background-color: var(--color_white); font-size: 16px; color: var(--color_black); text-align: center; border-radius: 100px; letter-spacing: 2px; margin: 0 40px 0 0;}
.recruit-area .tab-wrap .content-container .content .box .item-detail{ font-size: 18px; padding-top: 3px;}
.recruit-area .tab-wrap .content-container .content .box .item-detail p{ font-size: 18px; color: var(--color_white); padding: 1px 0; box-sizing: border-box;}
.recruit-area .tab-wrap .content-container .content .box .item-detail p span{ display: inline-block; padding: 1px 10px; box-sizing: border-box; background-color: var(--color_blue_03); margin-right: 10px;}
.recruit-area .tab-wrap .content-container .content .box .item-detail .notes{ font-size: 12px; margin-left: 10px; display: block; color: var(--color_yellow); background-color: transparent; padding: 0; margin-left: 0;}
.entry-area{ width: 100%; padding: 90px 0 0; box-sizing: border-box;}
.entry-area .wrap{ width: 100%; max-width: 1000px; margin: auto; padding: 0 20px; box-sizing: border-box;}
.entry-area .wrap .error-text,
.entry-area .wrap .notes-text{ color: var(--color_red); font-size: 12px; margin-top: 5px;}

/* contact-page */
body.contact .footer-btn{ display: none !important;}
.contact-page{ width: 100%; padding: 180px 0 0; box-sizing: border-box;}
.contact-area.wrap{ width: 100%; max-width: 1000px; margin: 40px auto 0; padding: 0 20px; box-sizing: border-box;}
.contact-area.wrap .error-text{ color: var(--color_red); font-size: 12px; margin-top: 5px;}
.contact-area.wrap .notes-text{ color: var(--color_red); font-size: 12px; margin-top: 5px;}
.thankyou{ text-align: center;}
.thankyou h2{ font-size: 22px; font-weight: bold; text-align: center;}
.thankyou p{ font-size: 18px; text-align: left; line-height: 2; display: inline-block; background-color: var(--color_gray); border-radius: 24px; padding: 40px; box-sizing: border-box; margin-top: 40px;}
.thankyou p span{ font-size: 12px; color: var(--color_red); display: block;}

/* service-page */
.service .service-page{ width: 100%; padding: 180px 0 0; box-sizing: border-box; margin-top: 0;}
.service .service-page.service-area .wrap{ padding: 0 20px; box-sizing: border-box; margin-top: 40px;}
.service .service-page.service-area .wrap .service-list{ margin: auto; width: 100%;}

.service .service-page .cms-area{ width: 100%; margin: 90px auto 0;}
.service .service-page .cms-area .wrap{ width: 100%; max-width: 1200px; margin: auto; padding: 0 20px; box-sizing: border-box;}
.service .service-page .cms-area .wrap .text-box{ line-height: 1.2; margin: auto;}
.service .service-page .cms-area .wrap .text-box p{ font-size: clamp(12px, 2vw, 18px); text-align: center; font-weight: bold;}
.service .service-page .cms-area .wrap .text-box h2{ font-size: clamp(30px, 3vw, 45px); text-align: center; font-weight: bold; line-height: 1.0;}
.service .service-page .cms-area .wrap .text-box h2 p{ font-size: clamp(25px, 2vw, 30px); line-height: 2.5;}
.service .service-page .cms-area .wrap .text-box p.copy-text{ font-size: 16px; line-height: 1.8; font-weight: normal; margin-top: 40px;}
.service .service-page .cms-area .wrap-swiper{ width: 100%; position: relative; border-radius: 20px; width: calc(100% - 40px); margin: auto;}
.service .service-page .cms-area .swiper{ position: relative; z-index: 0; border-radius: 24px; overflow: inherit; margin-top: 60px;}
.service .service-page .cms-area .swiper-wrapper{ transition-timing-function: linear; /*height: 260px;*/ align-items: stretch;}
.service .service-page .cms-area .swiper-wrapper .swiper-slide{ border-radius: 20px; overflow: hidden; opacity: .2; transform: scale(0.9); transition: .3s ease-in-out;}
.service .service-page .cms-area .swiper-wrapper .swiper-slide-active{ opacity: 1; transform: scale(1.1);}
.service .service-page .cms-area .swiper-slide{ height: auto; background-color: var(--color_blue_02); border-radius: 24px; padding: 40px 30px; box-sizing: border-box;}
.service .service-page .cms-area .swiper-slide .text{ height: 100%;}
.service .service-page .cms-area .swiper-slide .text h3{ font-size: clamp(18px, 2vw, 20px); color: var(--color_white); text-align: center; font-weight: bold; border-top: 1px solid var(--color_white); border-bottom: 1px solid var(--color_white); padding: 20px 0; max-width: 230px; margin: auto;}
.service .service-page .cms-area .swiper-slide .text p{ font-size: 14px; color: var(--color_white); margin-top: 40px;}
.service .service-page .cms-area .pager-area{ margin: 20px 0 0;}
.service .comparison-area{ width: 100%; padding: 90px 0 0; box-sizing: border-box;}
.service .comparison-area .wrap{ width: calc(100% - 10%); max-width: 1900px; margin: auto 0 auto auto; padding: 80px 150px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start; background-color: var(--color_gray); border-radius: 24px 0 0 24px;}
.service .comparison-area .wrap .left{ width: 100%; max-width: 320px; margin-right: 100px;}
.service .comparison-area .wrap .left .htitle{ width: 100%;}
.service .comparison-area .wrap .left .htitle h2{ font-size: clamp(30px, 3vw, 40px); font-weight: bold; line-height: 1.4; text-align: left;}
.service .comparison-area .wrap .left .htitle p{ font-size: clamp(12px, 2vw, 16px); margin-top: 20px;}
.service .comparison-area .wrap .right{ width: calc(100% - 320px - 100px); display: flex; justify-content: space-between; align-items: stretch;}
.service .comparison-area .wrap .right .cms-box{ width: 100%; max-width: calc(50% - 10px); background-color: var(--color_blue_02); padding: 20px; box-sizing: border-box; border-radius: 24px; position: relative;}
.service .comparison-area .wrap .right .cms-box:nth-child(1){ margin-right: 10px;}
.service .comparison-area .wrap .right .cms-box:nth-child(1)::before{ content:"おすすめ"; width: 100px; height: 30px; top: -35px; left: 0; right: 0; position: absolute; margin: auto; font-size: 18px; font-weight: bold; text-align: center;}
.service .comparison-area .wrap .right .cms-box:nth-child(1)::after{ content: "VS"; width: 100px; aspect-ratio: 1 / 1; background-color: var(--color_gray); border-radius: 100px; bottom: -50px; right: -60px; position: absolute; margin: auto; z-index: 1; display: flex; justify-content: center; align-items: center; font-size: 30px; font-weight: bold;}
.service .comparison-area .wrap .right .cms-box:nth-child(2){ background-color: var(--color_black);}
.service .comparison-area .wrap .right .cms .title{ width: 100%;}
.service .comparison-area .wrap .right .cms .title p{ font-size: 18px; text-align: center; color: var(--color_white);}
.service .comparison-area .wrap .right .cms .title h3{ font-size: 26px; text-align: center; font-weight: bold; color: var(--color_yellow); line-height: 1.0;}
.service .comparison-area .wrap .right .cms .content{ width: 100%; margin-top: 20px;}
.service .comparison-area .wrap .right .cms .content h4{ display: block; padding: 2px 10px; box-sizing: border-box; background-color: var(--color_white); border-radius: 100px; text-align: center; font-size: 14px;}
.service .comparison-area .wrap .right .cms .content p{ font-size: 14px; text-align: center; font-weight: bold; color: var(--color_white); margin-top: 10px;}
.service .comparison-area .wrap .right .cms .content p br.forSP{ display: none;}
@media screen and (max-width:1760px){
	.service .comparison-area .wrap{ padding: 80px 60px;}
}
@media screen and (max-width:1480px){
	.service .comparison-area .wrap{ padding: 80px 60px;}
	.service .comparison-area .wrap .left{ margin-right: 60px;}
	.service .comparison-area .wrap .right{ width: calc(100% - 320px - 60px);}
}
@media screen and (max-width:1360px){
	.service .comparison-area .wrap{ display: block; padding: 60px 60px;}
	.service .comparison-area .wrap .left{ width: 100%; max-width: 100%; margin-right: 0;}
	.service .comparison-area .wrap .left .htitle h2{ text-align: center; font-weight: bold;}
	.service .comparison-area .wrap .left .htitle p{ font-size: 16px; text-align: center; margin-top: 40px;}
	.service .comparison-area .wrap .right{ margin: 80px auto 0; width: calc(100% - 20px); max-width: 880px;}
}

.service .faq-area{ width: calc(100% - 40px); margin: 90px auto 0; position: relative; background-color: var(--color_blue_02); border-radius: 25px; padding: 40px 40px; box-sizing: border-box;}
.service .faq-area .htitle{ width: 100%;}
.service .faq-area .htitle h2{ font-size: clamp(30px, 3vw, 40px); text-align: left; font-weight: bold; line-height: 1.0; color: var(--color_white);}
.service .faq-area .wrap{ width: 100%; margin: 40px auto 0;}
.service .faq-area .wrap .accordion-faq{ width: 100%; margin: 0 auto;}
.service .faq-area .wrap .accordion-faq:last-child{ border-bottom: 1px solid var(--color_white);}
.service .faq-area .wrap .accordion-faq .accordion-header{ position: relative; z-index: +1; cursor: pointer; transition-duration: 0.2s; font-size: 16px; font-weight: bold; line-height: 1.4;  letter-spacing: 1.3px; color: var(--color_white); border-top: 1px solid var(--color_white); box-sizing: border-box; padding: 50px 20px 50px 80px;}
.service .faq-area .wrap .accordion-faq .accordion-header::before{ content: "Q"; letter-spacing: 0; font-family: var(--font_Lato); font-size: 18px; font-weight: bold; color: var(--color_white); width: 40px; aspect-ratio: 1 / 1; background-color: var(--color_red); border-radius: 100px; position: absolute; top: 40px; left: 20px; margin: auto; display: flex; justify-content: center; align-items: center;}
.service .faq-area .accordion-faq .accordion-header:hover{}
.service .accordion-faq .accordion-header .i_box{ display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: 20px; width: 40px; aspect-ratio: 1 / 1; margin-top: -20px; box-sizing: border-box; -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: center center; transition-duration: 0.2s;}
.service .accordion-faq .accordion-header.stay .i_box{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}
.service .accordion-faq .accordion-header .i_box .one_i{ display: block; width: 18px; height: 18px; -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: center center; transition-duration: 0.2s; position: relative;}
.service .accordion-faq .accordion-header.stay .i_box .one_i{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}
.service .accordion-faq .accordion-header.stay.open .i_box .one_i{ -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.service .accordion-faq .accordion-header.open .i_box{ -webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
.service .accordion-faq .accordion-header.stay.open .i_box{ -webkit-transform: rotate(315eg); transform: rotate(315deg);}
.service .accordion-faq .accordion-header .i_box .one_i:before,
.service .accordion-faq .accordion-header .i_box .one_i:after{ display: flex; content: ''; background-color: #fff; border-radius: 10px; width: 18px; height: 4px; position: absolute; top: 7px; left: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); transform-origin: center center;}
.service .accordion-faq .accordion-header .i_box .one_i:before{ width: 4px; height: 18px; top: 0; left: 7px;}
.service .accordion-faq .accordion-header.stay .i_box .one_i:before{ content: none;}
.service .accordion-faq .accordion-header.open .i_box .one_i:before{ content: none;}
.service .accordion-faq .accordion-header.stay.open .i_box .one_i:before{ content: "";}
.service .accordion-faq .accordion-header.open .i_box .one_i:after{ -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.service .accordion-faq .accordion-header.stay.open .i_box .one_i:after{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}
.service .accordion-faq .accordion-inner{ display: none; padding: 20px 40px 0; box-sizing: border-box;}
.service .accordion-faq .accordion-inner.stay{ display: block;}
.service .accordion-faq .accordion-inner .accordion-box{ height: auto; padding: 0 20px 50px; box-sizing: border-box;}
.service .accordion-faq .accordion-inner p{ font-size: 14px; line-height: 1.8; color: var(--color_white); position: relative; padding-left: 80px; box-sizing: border-box;}
.service .accordion-faq .accordion-inner p::before{ content: "A"; letter-spacing: 0; font-family: var(--font_Lato); font-size: 18px; font-weight: bold; color: var(--color_black); width: 40px; aspect-ratio: 1 / 1; background-color: var(--color_yellow); border-radius: 100px; position: absolute; top: -10px; left: 20px; margin: auto; display: flex; justify-content: center; align-items: center;}
.service .accordion-faq .accordion-inner p a{ color: var(--color_white); font-size: 14px;}

body.service{ position: fixed}
body.service .loader{ width: 100%; height: 100vh; position: fixed; z-index: 10; background-color: var(--color_white); opacity: 1; transition: 1s ease-in-out;}
body.service .loader .wrap{ width: 100%; height: 100%; background-color: var(--color_black); display: flex; justify-content: center; align-items: center; animation-duration: 1s;}
body.service .loader .wrap .box{ width: 100%; max-width: 1140px; height: auto; transform: rotate(-5deg);}
body.service .loader .wrap .box .en{ font-size: clamp(40px, 3vw, 60px); color: var(--color_white); font-weight: bold; font-family: var(--font_Rock); animation-duration: .1s; line-height: 2;}
body.service .loader .wrap .box .en span{ opacity: 0; animation-duration: .1s;}
body.service .loader .wrap .box .jp{ font-size: clamp(20px, 2vw, 30px); color: var(--color_white); font-weight: bold; margin: 80px 0 0; opacity: 0; animation-duration: .1s;}

body.service header a.logo{ opacity: 0;}
body.service header .navbar{ left: -1000px;}
body.service[data-loading="false"] header a.logo{ opacity: 1;}
body.service[data-loading="false"] header .navbar{ left: 0;}
body.service .loader[data-loading="true"] .wrap .box .en span{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: .1s; animation-duration: .1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(1){ animation-delay: 0.01s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(2){ animation-delay: 0.02s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(3){ animation-delay: 0.03s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(4){ animation-delay: 0.04s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(5){ animation-delay: 0.05s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(6){ animation-delay: 0.06s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(7){ animation-delay: 0.07s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(8){ animation-delay: 0.08s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(9){ animation-delay: 0.09s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(10){ animation-delay: 0.10s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(11){ animation-delay: 0.11s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(12){ animation-delay: 0.12s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(13){ animation-delay: 0.13s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(14){ animation-delay: 0.14s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(15){ animation-delay: 0.15s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(16){ animation-delay: 0.16s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(17){ animation-delay: 0.17s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(18){ animation-delay: 0.18s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(19){ animation-delay: 0.19s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(20){ animation-delay: 0.20s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(21){ animation-delay: 0.21s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(22){ animation-delay: 0.22s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(23){ animation-delay: 0.23s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(24){ animation-delay: 0.24s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(25){ animation-delay: 0.25s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(26){ animation-delay: 0.26s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(27){ animation-delay: 0.27s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(28){ animation-delay: 0.28s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(29){ animation-delay: 0.29s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(30){ animation-delay: 0.30s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(31){ animation-delay: 0.31s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(32){ animation-delay: 0.32s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(33){ animation-delay: 0.33s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(34){ animation-delay: 0.34s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(35){ animation-delay: 0.35s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(36){ animation-delay: 0.36s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(37){ animation-delay: 0.37s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(38){ animation-delay: 0.38s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(39){ animation-delay: 0.39s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(40){ animation-delay: 0.40s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(41){ animation-delay: 0.41s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(42){ animation-delay: 0.42s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(43){ animation-delay: 0.43s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(44){ animation-delay: 0.44s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(45){ animation-delay: 0.45s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(46){ animation-delay: 0.46s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(47){ animation-delay: 0.47s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(48){ animation-delay: 0.48s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(49){ animation-delay: 0.49s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(50){ animation-delay: 0.50s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(51){ animation-delay: 0.51s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(52){ animation-delay: 0.52s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(53){ animation-delay: 0.53s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(54){ animation-delay: 0.54s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(55){ animation-delay: 0.55s;}
body.service .loader[data-loading="true"] .wrap .box span:nth-of-type(56){ animation-delay: 0.56s;}
body.service .loader[data-loading="true"] .wrap .box .jp{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: .1s; animation-duration: .1s; -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block; animation-delay: .8s;}
body.service .loader .wrap[data-loading="true"]{ background-color: var(--color_white);}
body.service .loader .wrap[data-loading="true"] .box .en,
body.service .loader .wrap[data-loading="true"] .box .jp{ color: var(--color_black);}
body.service[data-loading="true"] .loader[data-loading="true"]{ opacity: 0;}
body.service[data-loading="false"]{ position: relative;}
body.service[data-loading="false"] .loader[data-loading="true"]{ display: none;}
@media screen and (max-width:1990px){
	body.service .loader .wrap .box{ max-width: 57%;}
}
@media screen and (max-width:1320px){
	body.service .loader .wrap .box{ max-width: 760px;}
}

/* bloglist-page */
.bloglist-page{ width: 100%; padding: 180px 0 0; box-sizing: border-box; margin: auto;}
.bloglist-page .cate-area{ width: 100%; list-style: none; text-align: left; margin: 40px auto 0;}
.bloglist-page .cate-area li{ display: inline-block; padding: 20px 20px; box-sizing: border-box; position: relative;}
.bloglist-page .cate-area li::after{ content: ""; width: 1px; height: 100%; background-color: var(--color_black); top: 0; right: 0; bottom: 0; margin: auto; position: absolute;}
.bloglist-page .cate-area li:last-child::after{ display: none;}
.bloglist-page .cate-area li br{ display: none;}
.bloglist-page .cate-area a{ font-size: 18px;}
.bloglist-page .cate-area a:hover{ opacity: .2;}
.bloglist-page .other-box{ width: calc(100% - 40px); margin: 20px auto 0; display: flex; flex-wrap : wrap; justify-content: space-between; align-items: stretch; gap: 20px 5px;}
.bloglist-page .other-box::before{ content: ""; display: block; width: calc(100% / 3 - 10px); order:1;}
.bloglist-page .other-box::after{ content: ""; display: block; width: calc(100% / 3 - 10px);}
.bloglist-page .other-box a{ display: block; width: calc(100% / 3 - 10px); transition: 0.1s;}
.bloglist-page .other-box a:hover{ transform: scale(1.02); z-index: 1;}
.bloglist-page .other-box .bloglist-img{ width: 100%; aspect-ratio: 16 / 9; position: relative; border-radius: 24px; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: var(--color_black); filter: grayscale(85%);}
.bloglist-page .other-box a:hover .bloglist-img{ filter: grayscale(40%);}
.bloglist-page .other-box .bloglist-img img{ width: 100%; height: 100%; object-fit: cover; position: relative; opacity: .7;}
.bloglist-page .other-box .text-box{ width: 100%; padding: 10px; box-sizing: border-box; position: relative; z-index: 1; display: flex; justify-content: center; align-items: end;}
.bloglist-page .other-box .text-box .text--inner{ width: 100%;}
.bloglist-page .other-box .text-box .text--inner .cate{ font-size: 12px; font-weight: bold; font-family: var(--font_Lato); letter-spacing: 1.3px; color: var(--color_black); display: inline-block; position: absolute; top: -40px; left: 15px; background-color: var(--color_black); border-radius: 5px; padding: 3px 15px; box-sizing: border-box; color: var(--color_white);}
.bloglist-page .other-box .text-box .text--inner .date{ font-size: 12px; display: inline-block; padding: 2px 6px; box-sizing: border-box; background-color: var(--color_gray); border-radius: 4px;}
@media screen and (max-width:1240px){
	.bloglist-page .other-box::before{ width: calc(100% / 2 - 10px);}
	.bloglist-page .other-box::after{ width: calc(100% / 2 - 10px);}
	.bloglist-page .other-box a{ width: calc(100% / 2 - 10px);}
}

/* blog-page */
.blog-page{ width: 100%; padding: 180px 0 0; box-sizing: border-box; margin: auto;}
.blog-page .blog-area{ width: calc(100% - 40px); margin: 0 auto;}
.blog-page .blog-area .title-box{ width: 100%; border-radius: 24px; background-color: var(--color_gray); position: relative; padding-top: 10px;}
.blog-page .blog-area .main-img{ width: calc(100% - 20px); height: 550px; overflow: hidden; position: relative; margin: 0 auto; border-radius: 20px; overflow: hidden; filter: grayscale(70%);}
.blog-page .blog-area .main-img .blur{ filter: blur(1px); position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-position: center; background-size: cover;}
.blog-page .blog-area .date{ font-size: 12px; display: block; padding: 40px 20px 0; box-sizing: border-box;}
.blog-page .blog-area h1{ font-size: clamp(20px, 2vw, 26px); font-weight: bold; display: inline-block; padding: 0 20px 40px; box-sizing: border-box; position: relative; display: block; width: 100%; max-width: 1400px;}
.blog-page .blog-area .text{ display: block; padding: 0 20px 60px; box-sizing: border-box; position: relative; display: block; width: 100%; max-width: 1400px;}
.blog-page .blog-area .text p{ font-size: 16px; font-weight: normal;}
.blog-page .blog-area .cate{ display: inline-block; position: absolute; bottom: 0; right: 0; font-size: 16px; font-weight: bold; background-color: var(--color_white); padding: 10px 30px; box-sizing: border-box; border-radius: 24px 0 0 0;}
.blog-page .blog-area .cate::before{ content: ""; position: absolute; bottom: 0; left: -24px; margin: auto; width: 24px; aspect-ratio: 1 / 1; background-image: url("/assets/images/item02.svg"); background-repeat: no-repeat; background-size: 100%;}
.blog-page .blog-area .cate::after{ content: ""; position: absolute; top: -24px; right: 0; margin: auto; width: 24px; aspect-ratio: 1 / 1; background-image: url("/assets/images/item02.svg"); background-repeat: no-repeat; background-size: 100%;}
.blog-page .blog-area .text-box{ width: 100%; max-width: 1200px; margin: auto; border-radius: 24px; position: relative;}
.blog-page .blog-area .text-box .box{ width: 100%; margin: 0 auto; padding: 40px 10px; box-sizing: border-box; border-bottom: 1px solid var(--color_gray);}
.blog-page .blog-area .text-box .box h2{ font-size: 22px; font-weight: bold; letter-spacing: 0.1em; padding: 15px 10px; box-sizing: border-box; position: relative; background-color: var(--color_gray); border-radius: 0; border-left: 10px solid var(--color_black); border-bottom: 2px solid var(--color_black);}
/*.blog-page .blog-area .text-box .box h2::first-letter{ color: var(--color_blue_03); font-size: 24px;}
.blog-page .blog-area .text-box .box h2::after{ content: ""; position: absolute; top: 0; left: 0; width: 20px; aspect-ratio: 1 / 1; border-top: 4px solid var(--color_blue_03); border-left: 4px solid var(--color_blue_03); box-sizing: border-box;}
.blog-page .blog-area .text-box .box h2::before{ content: ""; position: absolute; top: 0; left: 25px; width: 4px; height: 4px; background-color: var(--color_blue_03);}*/
.blog-page .blog-area .text-box .box h2 + div > *:nth-child(1){ margin-top: 15px;}
.blog-page .blog-area .text-box .box > div p{ font-size: 16px; line-height: 1.8;}
.blog-page .blog-area .text-box .box > div p:nth-of-type(n+2){ margin-top: 0;}
.blog-page .blog-area .text-box .box > div h3{ display: block; width: auto; font-size: 16px; font-weight: bold; line-height: 1.8; letter-spacing: 0.1em; border: 10px double var(--color_white); background-color: var(--color_gray); color: var(--color_black);
	 padding: 5px 10px; box-sizing: border-box; margin-top: 20px;}
.blog-page .blog-area .text-box .box > div ol,
.blog-page .blog-area .text-box .box > div ul{ width: auto; padding: 10px 30px 10px 40px; box-sizing: border-box; background-color: var(--color_gray); border-radius: 14px; margin: 15px 0;}
.blog-page .blog-area .text-box .box > div ol li,
.blog-page .blog-area .text-box .box > div ul li{ margin: 10px 0;}
.blog-page .blog-area .text-box .box > div pre{ width: 100%; padding: 40px 20px 20px; box-sizing: border-box; border-radius: 14px; background-color: var(--color_black); position: relative; margin: 15px 0; color: var(--color_white); font-size: 16px; overflow-x: auto;}
.blog-page .blog-area .text-box .box > div pre::before{ content: "コード表記"; font-size: 12px; color: var(--color_white); position: absolute; top: 10px; left: 20px;}
/*.blog-page .blog-area .text-box .box > div pre code{ color: var(--color_white); font-size: 16px; text-align: left;}*/
.blog-page .blog-area .text-box .box > div table,
.blog-page .blog-area .text-box .box > div table tr,
.blog-page .blog-area .text-box .box > div table tr td{ border: solid 2px var(--color_white); font-size: 16px;}
.blog-page .blog-area .text-box .box > div table{ table-layout: fixed; margin: 15px 0;}
.blog-page .blog-area .text-box .box > div table tr:nth-of-type(1) td{ background-color: var(--color_blue_01); color: var(--color_white);}
.blog-page .blog-area .text-box .box > div table tr td{ padding: 10px; box-sizing: border-box; background-color: var(--color_gray);}
.blog-page h4.relate{ font-size: 18px; font-weight: bold;}
.blog-page .related-box{ width: 100%; margin: 20px auto auto;}
.blog-page .related-box li{ list-style: none; background-color: var(--color_blue_01); padding: 10px 20px 10px 10px; box-sizing: border-box; transition: 0.3s; position: relative;}
.blog-page .related-box li:nth-child(n+2){ margin: 2px 0 0;}
.blog-page .related-box li:hover{ transform: scale(1.01);}
.blog-page .related-box li::after{ position: absolute; top: 0; bottom: 0; right: 5px; margin: auto; content: ""; width: 10px;; aspect-ratio: 1 / 1; background-image: url("/assets/images/arrow01.png"); background-size: 60%; background-repeat: no-repeat; background-position: center;}
.blog-page .related-box li a{ display: block; width: 100%; color: var(--color_white); font-size: 14px;}

.blog-page .sns-box{ width: calc(100% - 40px); max-width: 1200px; margin: 20px auto auto; display: flex; justify-content: flex-start; align-items: center; gap: 0 10px;}
.blog-page .sns-box a{ display: block; width: 40px; aspect-ratio: 1 / 1; border-radius: 100px; background-repeat: no-repeat; background-position: center; transition: 0.3s;}
.blog-page .sns-box a:hover{ transform: scale(1.1); z-index: 1;}
.blog-page .sns-box .x-button{ background-color: var(--color_gray); background-image: url("/assets/images/logo-x.png"); background-size: 40%;}
.blog-page .sns-box .fb-button{ background-image: url("/assets/images/logo-fb.png"); background-size: 100%;}
.blog-page .sns-box .li-button{ background-image: url("/assets/images/logo-li.png"); background-size: 100%;}
.blog-page .pager-area p a{ font-size: 28px; font-weight: bold; font-family: var(--font_Lato); color: var(--color_black);}
@media screen and (min-width:1480px){
	.blog-page .blog-area .main-img{ height: 650px;}
}