@charset "utf-8";



/* =======================
    header & nav
========================== */

.header{ 
  z-index: 100; position: absolute; width: 100%; height: 120px; padding: 16px 32px 16px 32px; display: flex; justify-content: space-between; align-items: center; transition: all 1s;
  & .logo{ max-width: 300px; width: 60%;}
}
.header.scrolled{
  position: fixed; height: 60px; padding: 10px 20px 10px 20px; background-color: rgba(0, 0, 0, 1.0);
  & .logo{ max-width: 200px;}
}
@media (max-width: 767px) {
  .header{
    padding: 8px 16px; height: 70px;}
  .logo{
    max-width: 200px;}
}

/* :::::: nav_pc :::::: */
.nav_pc ul{
  display: flex; justify-content: flex-end;}
.nav_pc ul li{
  display: block;}
.nav_pc ul li a{
  display: block; color: var(--clr-accent); padding: 8px 1rem; font-family: "Alumni Sans", sans-serif;
  font-weight: 600; font-size: 1.2rem; line-height: 1.2; transition: all .4s; letter-spacing: 1px;
  &:hover{ color: #fff;}}
.nav_pc ul li.header_nav_contact a{ border: 1px solid var(--clr-accent); border-radius: 3px; margin-left: 1rem;
  &:hover{ border: 1px solid #fff;}
}
@media (max-width: 1200px) {
  .nav_pc ul li a{ padding: 8px 0.6rem;}
}
@media (max-width: 880px) {
  .nav_pc{
    display: none;}
}

/* :::::: nav_sp :::::: */
/* toggle button */

#navTgl{
  display: none;}
.navTglBtn{
  cursor: pointer; position: fixed; top: 32px; right: 32px; width: 50px; height: 50px; z-index: 101; transition: all .6s;}

.navTglBtn::before,
.navTglBtn::after {
    display: block; position: absolute; top: 24px; left: 0px; content: ""; width: 50px; height: 1px; background-color: var(--clr-accent); transition: all .6s;}
.navTglBtn::before {
  transform: translateY(-4px);}
.navTglBtn::after {
  transform: translateY(4px);}
#navTgl:checked + .navTglBtn span {
  transform: scaleX(0);}
#navTgl:checked + .navTglBtn::before {
  transform: rotate(225deg);}
#navTgl:checked + .navTglBtn::after {
  transform: rotate(-225deg);}
@media (min-width: 880px) {
  .navTglBtn{
    display: none;}
}

/* nav_sp menu */

.nav_sp {
  z-index: -100; opacity: 0; position: fixed; overflow: auto; top: 0; right: 0; width: 100%; height: 100%; background: #000; display: flex; justify-content: center; align-items: center; transition: all .4s;}
.nav_sp div{
  width: 90%; max-width: 400px; font-family: "Alumni Sans", sans-serif; font-weight: 500; font-size: 1.5rem; text-align: center; line-height: 1;}
.nav_sp h2,
.nav_sp a {
  color: #FFF;}
.nav_sp h2 {
  text-align: center; background-color: var(--clr-accent); padding: 0.5rem; font-size: 1.5rem;}
.nav_sp ul {
  margin: 0; padding: 0;}
.nav_sp li {
  list-style: none; border-bottom: 1px solid var(--clr-accent);}
.nav_sp a {
  display: block; padding: 1.5rem 1rem; text-decoration: none; transition: all .6s;}
#navTgl ~ .nav_sp {
  /*transform: translateX(100%);*/}
#navTgl:checked ~ .nav_sp {
  transform: none; opacity: 100; z-index: 100;}
@media (max-width: 767px) {
  .navTglBtn{
    top: 8px; right: 8px;}
}


.breadcrumbList{ background-color: #000; color: #AAA; font-size: 0.8rem; padding: var(--m-s) var(--m-m) var(--m-s) 0;}
.breadcrumbList ol{ display: flex; justify-content: flex-end; }
.breadcrumbList ol li a::before{ font-family: 'Material Symbols Outlined'; content: "\e315"; font-weight: 400; vertical-align: middle;}
.breadcrumbList ol li:first-child a::before{ content: "\e9b2";}

/* メインセクション共通 */

.flex_r{ display: flex; justify-content: flex-end;}
.flex_l{ display: flex; justify-content: flex-start;}
.flex_c{ display: flex; justify-content: center;}

.section_title_wrap{
  display: block;}
.section_title_jp{
  font-size: clamp(1rem, 3vw, 1.6rem); line-height: 1.4; margin-bottom: var(--m-ms); padding: 0 4rem 0 4rem;}
.section_title_en,.section_title2_en,.section_title3_en{
  font-family: "Alumni Sans", sans-serif; font-weight: 600;}
.section_title_en,.section_title3_en{ 
   font-size: clamp(2.5rem, 10vw, 8rem); line-height: 1.0; margin-bottom: 1.5rem; border-bottom: 2px solid #ACACAC; padding: 0 4rem 0 4rem;}
.section_title3_en{ 
   font-size: clamp(2.0rem, 8vw, 6rem); text-align: center; margin-bottom: 1.0rem; padding: 0 4rem 0 4rem;}
.section_title2_en{
  display: inline-block; font-size: min(10vw, 8rem); line-height: 0.9; margin-bottom: var(--m-ms); border-right: 2px solid #ACACAC; padding: 0 4rem 8rem 4rem; text-align: center;}
.section_title_en i,.section_title2_en i,.section_title3_en i{
  color: var(--clr-accent);}
.section_title_wrap p{
  padding: 0 2rem 0 4rem; max-width: 800px;}
.flex_r .section_title_wrap p{
  padding: 0 4rem 0 4rem;}
.title_wrap_bottom_text{
  max-width: 640px; width: 90%; margin: 0 auto; margin-top: var(--m-ms);}
.title_wrap_bottom_text h3{
  font-size: 1.1rem;
}
@media (max-width: 768px) {
  .section_title_wrap{ width: 90%;}
  .section_title2_wrap{ width: 90%;}
  .section_title_wrap.title_right{ margin: 0 auto 0 0;}
  .section_title{ font-size: 1.4rem; line-height: 1.4;}
  .section_title2_en br{ display: none;}
  .section_title_en{padding: 0 1.5rem 0.5rem 1.5rem; margin-bottom: 1rem;}
  .section_title_jp{ padding: 0 1.5rem 0 1.5rem;}
  .section_title2_en{ display: block; line-height: 1.0; border-right:none; border-bottom: 2px solid #ACACAC; padding: 0 2rem 0 2rem; text-align: left;}
  .section_title_wrap p{ padding: 0 0.5rem 0 1.5rem;}
  .flex_r .section_title_wrap p{ padding: 0 1.5rem 0 1.5rem;}
}




/* ヒーローセクション */

.hero_section{
  width: 100%; height: 100vh; background-color: #000; position: relative; overflow: hidden;}
.hero_img{
  width: 100%; height: 50vh; position: relative; top: 30vh; background: url(../images/mv1.jpg) center center; background-size: cover; animation: backimage 10s ease-in-out 0s infinite alternate;}
@keyframes backimage{
  0%{ transform:scale(1.05,1.05);} 80%{ transform:scale(1,1);} 100%{ transform:scale(1,1);}
} 
.hero_img_text{
  position: absolute; bottom: -0.8em; left: 0; width: 100%; text-align: center; font-family: "Alumni Sans", sans-serif;
  font-weight: 300; font-size: min(14vw, 160px); line-height: 0.8em; letter-spacing: 0.02em; color: #fff; mix-blend-mode: difference;
  & span{ color: var(--clr-accent);}
}
.hero_text{
  position: absolute; right: 0; top: 130px; background-color: rgba(243, 38, 99, 0.7); width: max(450px,40%); padding: 30px 30px 30px 50px; border-radius: 30px 0 0 30px; color: #fff; font-size: 1.3rem;}
a.btn_hero{
  display: inline-block; padding: 10px 1em; color: #fff; background-color: var(--clr-accent); border: 2px solid #fff; margin-top: 20px; border-radius: 6px; font-weight: 500; font-size: 1.2rem; transition: .4s;
  & .material-symbols-outlined{ transform: rotate(90deg);}
  &:hover{color: var(--clr-accent); background-color: #fff; border: 2px solid #fff;}
}
#animated-text {/* テキスト自動入替 */
    font-size: clamp(2rem, 3vw, 3rem); font-family: "Noto Serif JP", serif; font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; color: #fff; opacity: 0; transform-origin: left top; margin-bottom: 10px;}
.blur-in {
    animation: blurInAnimation 1.2s ease-out forwards;}
@keyframes blurInAnimation {
    0% { filter: blur(20px); opacity: 0; transform: scale(0.9);}
    100% { filter: blur(0); opacity: 1; transform: scale(1);}
}
@media (max-width: 1300px) {
  .hero_text{
    top: 130px; padding: 15px 20px 15px 30px; border-radius: 20px 0 0 20px; font-size: 1.0rem;}
  a.btn_hero{
    padding: 10px 1em; margin-top: 10px; border-radius: 6px; font-size: 1.0rem;
    &:hover{color: #fff; background-color: var(--clr-accent); border: 2px solid #fff;}
  }
}
@media (max-width: 768px) {
  .hero_section{
  width: 100%; height: 70vh;}
  .hero_img{
    height: 35vh; position: relative; top: 25vh; background: url(../images/mv1.jpg) center center; background-size: cover;} 
  #animated-text { font-size: 2.2rem;}
}
@media (max-width: 500px) {
  .hero_text{
    top: 100px; width: 90%; padding: 10px 10px 10px 20px; font-size: 1rem;}
  #animated-text {/* テキスト自動入替 */
    font-size: 2rem; letter-spacing: 0; line-height: 1.5;}
  a.btn_hero{
    padding: 5px 1em; margin-top: 10px;
    & span.pconly{display: none;}
  }
}




/* コンテンツ */

.service_img_create{ background-image: url(../images/service_website.jpg);}
.service_img_update{ background-image: url(../images/service_update.jpg);}
.service_img_server{ background-image: url(../images/service_server.jpg);}
.service_img_design{ background-image: url(../images/service_design.jpg);}
.service_wrap{
  width: 100%; display: flex; flex-direction: row;
  & a{display: flex; align-items: flex-end; width: 50%; height: 400px; background-position: center; background-size: cover;}}
.service_text{
  width: 100%; text-align: center; padding: 40px 20px; background-color: rgba(0, 0, 0, 0.7); color: #fff;
  & .material-symbols-outlined{ transform: rotate(90deg);}}
.service_text h3{
  font-family: "Alumni Sans", sans-serif; font-weight: 300; font-size: 5rem; color: #fff; line-height: 1.0;
  & span{font-weight: 600; color: var(--clr-accent);}}
@media (max-width: 1000px) {
  .service_wrap a{ height: 260px;}
  .service_text{ padding: 20px 10px;}
  .service_text h3{ font-size: 2.5rem; line-height: 0.9; & span{ font-size: 2.7rem;}}
  .service_text p{ font-size: 1rem; & span{ font-size: 1rem;}}
}
@media (max-width: 500px) {
  .service_text h3 span{ display: block;}
}

.risks_wrap{
  display: flex; justify-content: space-between; width: 90%; max-width: 1400px; height: 400px;}
.risk_img1{ background-image: url(../images/risk_img1.jpg);}
.risk_img2{ background-image: url(../images/risk_img2.jpg);}
.risk_img3{ background-image: url(../images/risk_img3.jpg);}
.risk_box{
  width: 31%; border-radius: 20px; overflow: hidden; color: #fff; background-position: center; background-size: cover; height: 100%;}
.risk_text{
  width: 100%; height: 100%; padding: 55% 10% 10% 10%; background: linear-gradient( to bottom, #C61E5100 0%, #C61E5100 40%, #C61E51 60%, #28000C 100%); display: flex; flex-direction: column; justify-content: flex-end;}
.risk_text h3{
  font-size: 1.2rem; font-weight: 600; padding-bottom: 1rem;}
.risk_text p{
  font-size: 0.9rem; font-weight: 400; line-height: 1.6;}
@media (max-width: 1100px) {
  .risk_text p{ height: 4rem;}
}
@media (max-width: 1000px) {
  .risk_text{ padding: 50% 5% 10% 5%;}
}
@media (max-width: 840px) {
  .risks_wrap{ flex-direction: column; justify-content: space-between; height: auto; gap: 20px;}
  .risk_box{ width: 100%; border-radius: 10px; background-position: left top; background-repeat: no-repeat; background-size: 60%; height: 200px;}
  .risk_text{ padding: 20px 20px 20px 50%; background: linear-gradient( to right, #C61E5100 0%, #C61E5100 35%, #C61E51 50%, #28000C 100%); justify-content: center;}
  .risk_text h3{ font-size: 1.2rem; font-weight: 600; padding-bottom: 1rem;}
  .risk_text p{ font-size: 1rem; font-weight: 400; line-height: 1.6;}
}
@media (max-width: 420px) {
  .risk_box{ background-size: 60%; height: 160px;}
  .risk_text{ padding: 20px 20px 20px 40%; background: linear-gradient( to right, #C61E5100 0%, #C61E5100 25%, #C61E51 45%, #28000C 100%);}
}

.strengths_box{
  display: flex; justify-content: flex-start; align-items: flex-end; width: 100%; margin: 0 auto; padding: 6% 3% 6% 3%; background-image: url("../images/backgray2r.svg"); background-size: 100% 100%; background-repeat: no-repeat; position: relative;}
.strengths_box:nth-of-type(2n){
  flex-direction: row-reverse; background-image: url("../images/backgray2.svg");}
.strengths_img{
  max-width: 500px; width: 40%;}
.strengths_text{
  max-width: 600px; width: 50%; margin: 0 3rem;}
.strengths_text h3{
  font-size: 1.5rem; line-height: 1.5; margin-bottom: 1.5rem;}
.strengths_box_num{
  position: absolute; top: 0; right: 10vw; font-size: clamp(32px, 6vw, 100px); font-family: "Alumni Sans", sans-serif;
  font-weight: 600; color: var(--clr-accent); line-height: 1.2;}
.strengths_box_num::first-letter{
  font-size: 200%; font-weight: 500;}
.strengths_box:nth-of-type(2n) .strengths_box_num{
  right: auto; left: 10vw;}
@media (max-width: 1100px) {
  .strengths_box{ padding: 6% 0% 6% 3%;}
  .strengths_img{ max-width: 500px; width: 49%;}
  .strengths_text{ max-width: 500px; width: 49%; margin: 0 0 0 2%; padding: 1rem 2rem;}
  .strengths_text h3{ font-size: 1.2rem; margin-bottom: 0.5rem;}
  .strengths_text p{ font-size: 1rem;}
}
@media (max-width: 800px) {
  .strengths_box{ flex-direction: column; justify-content: center; align-items: center; padding: 0% 0% 30px 0; background-size: 100% 90%; background-position: bottom left; margin-top: 2rem;}
  .strengths_box:nth-of-type(2n){ flex-direction: column;}
  .strengths_img{ max-width: 500px; width: 80%; aspect-ratio: 500 / 260;
  & img{ width: 100%; height: 100%; object-position: center center; object-fit: cover;}}
  .strengths_text{ max-width: 500px; width: 80%; margin: 0 3rem; padding: 1rem;}
  .strengths_box:nth-of-type(2n) .strengths_box_num,
  .strengths_box:nth-of-type(2n-1) .strengths_box_num{
    right: auto; left: 5vw; top: -5vw;}
}


.projects_wrap{
  max-width: 1205px; width: 90%; /*aspect-ratio: 1205 / 441;*/ margin: var(--m-m) auto var(--m-m) auto; position: relative;}
#img-container {
  max-width: 1205px; aspect-ratio: 1205 / 441; overflow: hidden; position: relative; margin: 0 auto;}
.project_img_cover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;}
#image-stack {
  width: 100%; height: 100%; position: relative;}
#image-stack img {
  width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0; z-index: 1; transition: opacity 0.8s ease;}
#image-stack img.active {
  opacity: 1; z-index: 2;}

/* carousel */

.carousel-wrapper {
  display: flex; justify-content: space-between; gap: 15px; width: 100%; margin-top: var(--m-m);}
.nav-btn {
  display: block; border: 1px solid #fff; color: var(--clr-accent); width: 40px; font-size: 18px; cursor: pointer; transition: background-color 0.2s; padding: 0;}
.nav-btn:hover {
  background-color: var(--clr-accent); color: #fff;}
.nav-btn#prev-btn span{ transform: rotate(-90deg);}
.nav-btn#next-btn span{ transform: rotate(90deg);}
.carousel-viewport {
  flex: 1; overflow: hidden;}
ul.custom-list {
  list-style-type: none; display: flex; gap: 15px; margin: 0; padding: 0; width: 100%; margin-left: 0; transition: margin-left 0.3s ease;}
ul.custom-list li.carousel-item {
  flex: 0 0 calc((100% - 30px) / 3); display: flex; justify-content: space-between; border: 1px solid #fff;}
ul.custom-list li div {
  width: calc(100% - 30px); cursor: pointer; color: #000; padding: 8px 20px;  transition: background-color 0.0s ease;
  &:hover { background-color: #fff;}}
.project_list_name{ font-weight: 700; margin-top: 5px;}
.project_list_title{ line-height: 1.5;}
ul.custom-list li div.current {
  background-color: var(--clr-accent); color: #fff;}
ul.custom-list li a {
  display: block; width: 30px; color: var(--clr-accent); background-color: #FFF; padding: 8px 0; display: flex; align-items: center; justify-content: center;
  &:hover { color: #000;}}

a.btn_2{ display: block; width: 300px; padding: 10px 1em; text-align: center; background-color: var(--clr-accent); color: #fff; margin: var(--m-ml) 0 0 auto; border-radius: 6px; font-weight: 500;
  &:hover{background-color: #000; color: var(--clr-accent); font-weight: 600;}}

@media (max-width: 1000px) {
  ul.custom-list li.carousel-item  { flex: 0 0 calc((100% - 15px) / 2);}
}
@media (max-width: 640px) {
  .carousel-wrapper { gap: 8px;}
  ul.custom-list li.carousel-item  { flex: 0 0 100%;}
  ul.custom-list { margin-left: calc(-100% - 15px);}
  .nav-btn { width: 30px; font-size: 12px;}
  ul.custom-list li div{ padding: 4px 5px;}
  ul.custom-list li div.current { background-color: transparent; color: #000;}
  .project_list_name,.project_list_title{ font-size: 0.9rem;}
}

.news_wrap{
  display: flex; justify-content: center; width: 90%;}
.news_list{
  margin-top: 1.5rem; margin-left: 3rem;}
.news_list li{
  position: relative; margin-top: -1px;}
.news_list li::before{
  position: absolute; top: 0; left: 0; width: 100%; height: 1px; content: ""; background-color: #ACACAC;}
.news_list li a{
  display: block; padding: 1.5rem 1rem;
  &:hover{ color: var(--clr-accent);}}
.news_list li:last-of-type{
  text-align: right;
  & a{ display: inline-block; width: 300px; padding: 10px 1em; text-align: center; background-color: var(--clr-accent); color: #fff; margin-top: var(--m-ml); border-radius: 6px; font-weight: 500;}
  & a:hover{background-color: #000; color: var(--clr-accent); font-weight: 600;}}
.news_date{ font-weight: 600; font-size: 0.9rem;}
.news_date span{ background-color: #ccc; padding: 0 0.5em 0 0.5em; line-height: 1.5; margin-left: 10px;}
@media (max-width: 768px) {
  .news_wrap{ display: block; width: 100%;}
  .news_list{ margin-left: 5%; margin-right: 5%;}
  .news_list li:first-of-type:before{ display: none;}
  .news_list li:last-of-type:before{ display: none;}
  .news_list li:last-of-type{  text-align: center;
  & a{ max-width: 300px; width: 100%; padding: 5px 1em; margin-top: 1.5rem; border-radius: 4px; font-weight: 500;}
  & a:hover{background-color: #fff; color: var(--clr-accent); border: 2px solid var(--clr-accent);}}
}




.faq-list{
  max-width: 1000px; width: 90%; margin-top: var(--m-m);}
.faq-list > details + details {
  margin: 1rem 0;}
.faq-question {
  display: block; padding: 1rem 1rem 1rem 4rem; font-weight: 500; font-size: 1.125rem; cursor: pointer; list-style: none; position: relative; border: 1px solid #eee; background-color: #fff; transition: all .6s;}
.faq-question::-webkit-details-marker {
  display: none;}
.faq-question::before { position: absolute; left: 1.5rem; top: 0.3rem; font-size: 3rem; line-height: 1.0;
  content: 'Q'; font-family: "Alumni Sans", sans-serif; font-weight: 500; transition: all .6s;}
details {
  overflow: hidden;}
details::details-content {
  height: 0; opacity: 0; transition: height 0.6s ease, opacity 1s ease;}
details[open]::details-content {
  height: auto; opacity: 1;}
details[open] > .faq-question {
  border: 1px solid var(--clr-accent); color: var(--clr-accent);}
details[open] > .faq-question::before {
  color: var(--clr-accent);}
.faq-answer {
  padding: 1.5rem 2rem 2rem 2rem; background-color: #fff;}
@media (max-width: 768px) {
  .faq-question{ font-size: 1rem; line-height: 1.5; padding: 0.5rem 1rem 0.5rem 3rem;}
  .faq-question::before { left: 1rem; top: 0.1rem; font-size: 2.0rem;}
  .faq-answer { padding: 0.5rem 1rem 1rem 1rem;}
}


.btn_2_contact{
  display: block; max-width: 450px; width: 90%; margin-left: auto; font-family: "Alumni Sans", sans-serif; font-weight: 600; font-size: 2.2rem; line-height: 1.0; border-radius: 10px 0 0 10px; background-color: var(--clr-accent); padding: 5px 100px 5px 3rem; position: relative;
  &:hover{ background-color: #000;}
}
.btn_2_contact span.neko{ position: absolute; right: 0; top: 25px; width: 150px; transform: translateY(-55%);}
.btn_2_contact em{
  color: #fff;
  & span{ color: #000;}}
.btn_2_contact:hover em{
  color: #fff;
  & span{ color: var(--clr-accent);}}
.btn_2_contact span.material-symbols-outlined{
  color: #fff; font-size: 2.2rem; margin-left: 0.5rem; transform: rotate(90deg);}
@media (max-width: 768px) {
  .btn_2_contact{ font-size: 1.5rem; line-height: 1.0; border-radius: 10px 0 0 10px; background-color: var(--clr-accent); padding: 5px 100px 5px 2rem; position: relative; margin-top: 70px; margin-bottom: 20px;}
  .btn_2_contact span.neko{ width: 120px;}
}



a.pagetop_box{
  display: block; text-align: center; padding: 3px; border-bottom: 3px solid var(--clr-accent); border-top: 3px solid var(--clr-bg-sub);
  & .material-symbols-outlined{ color: var(--clr-accent); margin: 0 2rem;}
  &:hover{ background-color: #ffc6d755;}
}


footer{
  background-color: #000; padding: var(--m-m) var(--m-s) var(--m-ms) var(--m-s);
  & .footer-nav a{ font-family: "Alumni Sans", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.0; color: #fff;}
  & i{ color: var(--clr-accent);}
  & .material-symbols-outlined{ font-size: 0.8rem; transform: rotate(90deg);}
}
.footer-nav ul{
  display: flex; justify-content: center; flex-wrap: wrap;
  & li{ margin: 0 var(--m-s);}
  & a{ display: block;}
}
.footer_logo{
  width: 200px; margin: var(--m-m) auto 0 auto;}
.copyright{
  color: var(--clr-accent); font-family: "Alumni Sans", sans-serif; font-weight: 600; text-align: center;
}


/* =========================================

       ContsPage

========================================= */

.pagetitle_wrap{ background-color: #000; padding:120px 0 0 0; text-align: center; position: relative;}
.pagetitle_img_text{ position: absolute; top: 0; left: 0; width: 100%; text-align: center; font-family: "Alumni Sans", sans-serif; font-weight: 200; font-size: 5vw; letter-spacing: 0.1em; line-height: 1.3; color: #ffffff24; text-align: center;}
.pagetitle{ font-family: "Alumni Sans", sans-serif; font-weight: 600; font-size: max(4rem, 8vw); line-height: 0.8; color: var(--clr-accent); text-align: center; position: relative; display: inline-block; padding: 0 1em;}
.pagetitle:after{ position: absolute; top: 54%; left: 0; width: 100%; height: 2px; content: ""; background-color: var(--clr-accent);}
@media (max-width: 768px) {
  .pagetitle_wrap{ padding: 80px 0 var(--m-m) 0;}
}

/* Services */

.service_btn_wrap{
  width: 100%; display: flex; flex-wrap: wrap;
  & a{display: flex; align-items: flex-end; width: 25%; height: 400px; background-position: center; background-size: cover;}}
.service_btn_text{
  width: 100%; text-align: center; padding: 40px 20px; background-color: rgba(0, 0, 0, 0.7); color: #fff;
  & .material-symbols-outlined{ transform: rotate(90deg);}}
.service_btn_text h3{
  font-family: "Alumni Sans", sans-serif; font-weight: 300; font-size: 3rem; color: #fff; line-height: 1.0;
  & span{font-weight: 600; color: var(--clr-accent);}}
@media (max-width: 1200px) {
  .service_btn_text h3 span{ display: block;}
}
@media (max-width: 1000px) {
  .service_btn_wrap a{ height: 260px;}
  .service_btn_text{ padding: 10px 10px;}
  .service_btn_text h3{ font-size: 2.5rem; line-height: 0.9; & span{ font-size: 2.7rem;}}
  .service_btn_text p{ font-size: 0.9rem; & span{ font-size: 0.8rem;}}
}
@media (max-width: 640px) {
  .service_btn_wrap a{ width: 50%; height: 220px;}
}


.service_detail_wrap{
  width: 90%; max-width: 1000px; display: flex; justify-content: space-between; flex-wrap: wrap; row-gap: 2rem;}
.service_detail_box{
  width: 47%; border: 1px solid #aaa;}
.service_detail_box h3{
  background-color: #000; color: #fff; font-weight: 600; font-size: 1.4rem; padding: 1.5rem 1rem; text-align: center;
  & i{ display: block; color: var(--clr-accent); font-family: "Alumni Sans", sans-serif; font-weight: 500; line-height: 1.4;}}
.service_detail_text{
  padding: 2rem 1.5rem;}
.service_detail_text h4{
  padding-bottom: 0.5rem; border-bottom: 1px solid #000; margin-bottom: 1rem;}
ul.liston li{
  list-style: disc; margin-left: 1.5em;}
ul.liston.list_clr li{
  list-style: none;}
ul.liston.list_clr li:before{
  content: "●"; color: var(--clr-accent); font-size: 80%; margin-left: -1.5rem; margin-right: 0.8em;}
.service_price{
  font-size: 1.2rem; font-weight: 600;
  & span{  font-family: "Alumni Sans", sans-serif; font-weight: 600; font-size: 2.4rem; line-height: 1.0;}}
.service_pricein li{ margin-bottom: 1rem;}
.service_aside_content{
  width: 100%; border: 1px dashed #aaa; padding: 2rem 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 0.9rem; line-height: 1.4; gap: 1rem 6%;}
.service_aside_box{
  width: 46%;}
.service_aside_content h3{
  padding-bottom: 0.5rem; border-bottom: 1px solid #000; margin-bottom: 1rem;}
@media (max-width: 768px) {
  .service_detail_box{ width: 100%;}
  .service_detail_box h3{ font-size: 1.2rem; padding: 1.0rem 1rem;}
  .service_aside_box{ width: 100%;}
  .service_detail_text{ padding: 1.5rem 1.5rem;}
  .service_aside_content{ padding: 1.5rem 1.5rem;}
}


.policy_box{
  max-width: 1000px; width: 90%; margin: var(--m-m) auto 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2rem;}
.policy_box li{
  border: 1px solid #000; padding: 2rem;
  & h3{ font-size: 1.3rem; font-weight: 600; text-align: center; margin-bottom: 1rem;
  & span{ font-size: 1.8rem; color: var(--clr-accent);}}
  & figure{ max-width: 140px; margin: 0 auto 1rem auto;}
}

.table1 {
  max-width: 1000px; width: 90%;}
.table1 > tbody > tr > th{
  background-color: #eee; white-space: nowrap; padding: 2rem; border: 1px solid #fff; width: 20%;}
.table1 > tbody > tr:first-child > th{ border-top: 1px solid #eee;}
.table1 > tbody > tr:last-child > th{ border-bottom: 1px solid #eee;}
.table1 > tbody > tr > td{
  padding: 2rem; border: 1px solid #eee;}
.table11 th{ max-width: 150px; padding: 10px 10px 0 0;}

.inline_contact{
  display: inline-block; color: var(--clr-accent); border: 1px solid var(--clr-accent); padding: 2px 0.5rem;
  & span.material-symbols-outlined{ transform: rotate(90deg);}
}



/* ===========================================
    BLOG CAT NAV
============================================= */


#slideR {
	z-index: 99; cursor: pointer; position: fixed; top: 150px; right: -170px; background: var(--clr-accent); box-shadow: -3px 3px 5px 0px rgba(0,0,0,0.2); width: 200px; color: #fff; font-size: 0.8rem; line-height: 1.2rem; /*border-radius: 10px 0 0 10px;*/}
@media screen and (max-width: 599px) {
  #slideR { top: 160px;}
}
#slideR li{
  padding: 2px 2px 2px 0;}
#slideR li a {
	color: #fff; display: block;	padding: 5px 10px 5px 20px; border: 1px solid #ffffff42;}
#slideR li.slideR_list_all a{ padding: 5px 10px 5px 10px; font-weight: 600;}
#slideR li a:hover {
	color: var(--clr-accent); background-color: #fff; color: #C61E51;}
#slideR li div {
	padding: 5px 10px;}
#slideR ul {
	position: relative; padding: 2px 10px 2px 30px;}
#slideR .nav-icon {
	position: absolute; left: 8px;	top: 50%; transform: translateY(-50%); font-size: 8px; line-height: 10px; width: 14px;  text-align: center;}
  #slideR .material-symbols-outlined{ font-size: 14px;}

.blog_wrap2{
  margin: var(--m-m) 50px;}
/* == boxlist == */
.blog_list2{
   display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}
.blog_list2 li{
  list-style: none; border-right: 1px solid var(--clr-accent); border-left: 1px solid var(--clr-accent); margin: 0 0 1rem -1px;}
.blog_list2 li a{
  display: block; height: 100%; padding: 0 10px 30px 10px; position: relative;}
.blog_list2 li a .blog_list_img{ filter: grayscale(1); opacity: 0.8;}
.blog_list2 li a:hover .blog_list_img{ filter: grayscale(0); opacity: 1;}
.blog_list2_cat{
  position: absolute; display: inline-block; top: 40px; left: 9px; color: #ffffffbb; padding: 0 20px; text-align: center; font-size: 8rem; font-family: "Alumni Sans", sans-serif; font-weight: 500; line-height: 0.8; border: 1px solid #fff;}
.blog_list2 li a h3{ margin: 1em 1em; font-weight: 400;}

/* == linelist == */
.blog_wrap{
  margin: var(--m-m) auto; max-width: 1000px; width: 90%;}
.blog_list{
  border-top: 1px solid #000;}
.blog_list li{
  list-style: none; border-bottom: 1px solid #000;}
.blog_list li a{
  display: flex; align-items: center; justify-content: space-between; padding: 1rem 10px; min-height: 5rem;}
.blog_list li a div{
  width: 160px;}
.blog_list li a div span{
  display: inline-block; min-width: 85px; font-size: 1rem; line-height: 1.2; font-family: "Alumni Sans", sans-serif; font-weight: 500;}
.blog_list li a:hover{ color: var(--clr-accent); background-color: #fff; transition: all 0.6s;}
.blog_list_cat{
  color: #000; padding: 0 10px; text-align: center; line-height: 1.2; border: 1px solid #000;}
.blog_list li a h3{ width: calc(100% - 160px); font-weight: 400;}

.pagination{
  display: flex; justify-content: center; gap: 30px;}
.pagination li{ max-width: 200px; width: 40%; border: 1px solid #000;}
.pagination li a{ display: block; text-align: center; padding: 1rem; transition: all 0.6s;
  &:hover{ background-color: var(--clr-accent); font-weight: 700;}
}
.pagination li span.material-symbols-outlined{ transform: rotate(-90deg); font-size: 1rem; margin-bottom: 2px;}
@media (max-width: 768px) {
  .pagination{ gap: 20px;}
  .pagination li{ width: 35%;}
  .pagination li a{ padding: 0.6rem;}
}

.blog_detail_wrap{ padding: var(--m-m) 5% 0 5%; border-top: 4px solid var(--clr-accent);}
.blog_detail_title{
  background-color: #4d4d4d;}
.blog_detail_title_img{
  max-width: 800px; width: 100%;  margin: 0 auto; aspect-ratio: 2 / 1;}
.blog_detail_title_img img{ width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.blog_detail_text{
  width: min(800px, 90%); margin: var(--m-m) auto 0 auto; padding-bottom: var(--m-m); border-bottom: 1px solid #000;}
.blog_detail_wrap h1{ font-size: clamp(1.5rem, 3vw, 50px); padding: 1rem 1rem 0.5rem 1rem; text-align: center; }
.blog_detail_catwrap{ text-align: center; padding-bottom: 1rem; font-size: 1rem; font-family: "Alumni Sans", sans-serif; font-weight: 500;}
.blog_detail_cat{ border: 1px solid #000; margin-left: 1rem; padding: 0 1rem;}

.worksdetail_wrap a[target="_blank"]{ display: inline-block; background-color: var(--clr-accent); color:#FFF; padding: 5px 1rem; border-radius: 5px; margin-top: var(--m-ms);}
.worksdetail_wrap a[target="_blank"]::after{ font-family: 'Material Symbols Outlined'; content: "\e895"; font-weight: 400; vertical-align: middle;}

/* Blog text css */
.text_format pre{ white-space: pre-wrap; background-color: #4d4d4d; color: #a7ffbd; padding: 1rem;}
.text_format h2{ border: 2px solid #F32664; padding: 1rem; font-size: 2rem; margin: 50px 0 30px 0;}
.text_format h3{ border-top: 2px dashed #F32664; border-bottom: 2px dashed #F32664; padding: 10px 0; font-size: 1.5rem; margin: 50px 0 30px 0;}
.text_format h4{ border-bottom: 2px dashed #F32664; padding-bottom: 10px; font-size: 1.2rem; margin: 50px 0 30px 0;}
.text_format h5{ border-bottom: 1px dotted #F32664; padding-bottom: 10px; font-size: 1.1rem; margin: 50px 0 30px 0;}
.text_format h6{ font-size: 1.1rem; margin: 30px 0 10px 0;}
.text_format p{ margin-bottom: 1em;}
.text_format ul{ margin-left: 1.5em; list-style: disc; margin-bottom: 1em;}
.text_format ol{ margin-left: 1.5em; list-style: decimal; margin-bottom: 1em;
  & li{ padding-left: 0.5em;}}
.text_format table{ margin-bottom: 1em;
  & th{ padding: 0.2em 0.5em; border: 1px solid #000;}
  & td{ padding: 0.2em 0.5em; border: 1px solid #000;}}
.text_format a{ color: #F32664;}
.text_format a[target="_blank"]::after{ font-family: "Material Symbols Outlined"; content: "\e895"; font-weight: 400; vertical-align: middle; }
.text_format .mt-be-columns{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 2rem;}

@media (max-width: 768px) {
  .text_format h2{ padding: 1rem; font-size: 1.3rem; margin: 25px 0 15px 0;}
  .text_format h3{ font-size: 1.2rem; margin: 25px 0 15px 0;}
  .text_format h4{ margin: 25px 0 8px 0;}
  .text_format h5{ margin: 25px 0 8px 0;}
  .text_format h6{ margin: 30px 0 10px 0;}
}



/* ====================================

Works

==================================== */

.workslist_wrap{
  margin: var(--m-ml) auto; width: 85%;}
.worksdetail_wrap{
  margin: var(--m-ml) auto; width: 90%; max-width: 900px;}
.worksdetail_wrap h1{
   font-size: clamp(1.5rem, 3vw, 50px); padding: 1rem 1rem  var(--m-ml) 1rem; text-align: center; }
.workslist{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 70px 100px;}
.workslist li{
  display:flex; flex-direction:column; filter: drop-shadow(5px 5px 5px #ccc);}
.workslist_img{ display: block; padding: 1rem 10px; transition: all 0.6s; background-color: #fff; border-radius: 5px 5px 0 0;}

.workslist_text{
  display: flex; justify-content: space-between; flex-grow:1; margin-top: 0px; border-top: 1px solid #000;}
.workslist_text div{ width: calc(100% - 30px);}
.workslist_text div a{ display: block; height: 100%; padding: 10px 10px 15px 15px; background-color: #fff; transition: all 0.6s; border-radius: 0 0 0 5px; position: relative; z-index: 1;}
.workslist_text div a::before{ position: absolute; top: 50%; right: 0; display: block; font-family: 'Material Symbols Outlined'; content: "\f4b5"; font-weight: 400; color: var(--clr-accent); font-size: 2rem; transform: translateY(-50%) rotate(45deg); z-index: -1; opacity: 0.5;}
.workslist_text div a:hover{ background-color: #F32664;}
.workslist_text a.workslist_link { width: 30px; color: var(--clr-accent); display: flex; justify-content: center; align-items: center; border-left: 1px solid #000; background-color: #fff; border-radius: 0 0 5px 0; transition: all 0.6s;}
.workslist_text a.workslist_link span{ font-size: 1.3rem;}
.workslist_text a.workslist_link:hover{ background-color: #F32664; color: #fff;}
@media (max-width: 768px) {
  .workslist{ gap: 40px 60px;}
  .workslist_text{ margin-top: 0px;}
}
@media (max-width: 480px) {
  .workslist{ grid-template-columns: 1fr;}
}