@charset "UTF-8";
/* 共通部分
******************************/
html {
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
    font-family: "noto sans jp","Nunito-sans",sans-serif;
    line-height: 1.8;
    color: #111;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}

/* iframe */
iframe {
    width: 100%;
    border: none;
    margin: 1rem auto;

}


/*------------------------------------
   hamburger menu ↓
------------------------------------*/
    .header_change .sp_nav {
        text-align: center;
    }
    .sidemenu {
        flex-direction: column;
        height: 100vh;
        padding-top: 100px;
        position: fixed;
        right: -60%; 
        transition: all 0.6s;
        top: 0;
        width: 60%; 
        z-index: 2;
        background-color:  rgb(135, 206, 250, 0.5);
    }
    .sidemenu ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
        gap: 10px;
        padding: 10px;
        list-style: none;
    }
    .sidemenu ul li {
        background-color: #87CEFA;
        border-radius: 8px;
        padding: 8px;
        border: 1px solid #fff;
        margin-bottom: 8px;
    }
    .sidemenu ul li a {
        color: white;
        text-decoration: none;
        display: block;
        font-size: .8rem;
        text-align: left;
    }
    .sidemenu ul li ul.submenu {
        display: none;
        padding-left: 10px;
    }

    .hamburger {
        cursor: pointer;
        height: 60px;
        position: absolute;
        right: 30px;
        top: 30px;
        width: 60px;
        z-index: 10000;
    }
    .hamburger span {
        background-color: #031352;
        height: 2px;
        left: 15px;
        position: absolute;
        transition: all 0.6s;
        width: 38px;
    }
    .hamburger_linetop {
        top: 10px;
    }
    .hamburger_linecenter {
        top: 18px;
    }
    .hamburger_linebottom {
        top: 26px;
    }

/*------------------------------------
after click menu ↓
------------------------------------*/
    .nav_open .sidemenu {
        right: 0;
    }
    .nav_open .hamburger_linetop {
        top: 26px;
        transform: rotate(45deg);
    }
    .nav_open .hamburger_linecenter {
        left: 50%;
        width: 0;
    }
    .nav_open .hamburger_linebottom {
        top: 26px;
        transform: rotate(-45deg);
    }
    .nav_open .overlay {
        opacity: 0.8;
        visibility: visible;
    }
/*------------------------------------
outside background ↓
------------------------------------*/
    .overlay {
        background-color: #eee;
        cursor: pointer;
        height: 100vh;
        left: 0;
        opacity: 0;
        position: fixed;
        top: 0;
        transition: all 0.6s;
        visibility: hidden;
        width: 100vw;
        z-index: 1;
    }




/*************************************
           Smartphone
**************************************/

@media (max-width: 767px) {

    
/* wrapper */
.wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto ;
    max-width: 767px;
}
    
/* header 
*****************/
    /* header */
    .header_inner {
      flex-direction: column;
      align-items: flex-start;
      padding: 5px 3px;
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color:  rgba(255, 255, 255, 0.5);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    }
    .logo_area a{
        display: flex;
        align-items: center;
    }
    .logo {
        width: 60px;
        height: auto;
        display: inline-block;
        margin: .5rem;
    }
    .yago {
        display: flex;
        align-items: center;
        font-size: 1rem;
        color: #111;
        font-family: "Sawarabi Gothic";
    }
    nav ul {
        display: none;
        flex-direction: column;
        background: #111;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        z-index: 99;
        padding: 1rem 0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
  
    nav ul.active {
        display: flex;
    }
  
    .nav_item {
      margin: 10px 20px;
      font-size: 1rem;
    }


/** main
********************/

    /** main_visual **/
    .main_visual {
        width: 100vw;
        object-fit: cover; 
        overflow: hidden;
    }

    /** fadein_text **/
    .fade_text {
        position: absolute;
        top: 16%; 
        left: 50%;
        transform: translate(-50%, 0);
        opacity: 0;
        font-size: 1.25rem;
        font-weight: normal;
        color: #fff;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 1); 
        transition: opacity 1.5s ease-out, transform 1.5s ease-out;
        width: 100%;
        text-align: center;
    }

    .fade_text.show {
        opacity: 1;
    }

    .fade_text span {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px); 
    animation: fadeInUp 1s ease-out forwards;
    }

    .fade_text span:nth-child(1) { animation-delay: 0s; }
    .fade_text span:nth-child(2) { animation-delay: 0.1s; }
    .fade_text span:nth-child(3) { animation-delay: 0.2s; }
    .fade_text span:nth-child(4) { animation-delay: 0.3s; }
    .fade_text span:nth-child(5) { animation-delay: 0.4s; }
    .fade_text span:nth-child(6) { animation-delay: 0.5s; }
    .fade_text span:nth-child(7) { animation-delay: 0.6s; }
    .fade_text span:nth-child(8) { animation-delay: 0.7s; }
    .fade_text span:nth-child(9) { animation-delay: 0.8s; }

    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /** scrolldown **/
    .scroll {
        position: absolute;
        right: 10px; 
        top: 60%; 
        transform: translateY(-50%);
        writing-mode: vertical-rl;
        text-transform: uppercase;
        color: #fff;
        align-items: center; 
    }

    .scrolldown1 {
        display: none;
    }

/** Hero_area **/

.catch_copy {
    font-size: 1rem;
    font-family: 'Sawarabi Gothic';
    text-align: center;
    margin: .5rem auto;
}
.hero {
    display: flex;
    justify-content: center;
    text-align: center;
}
.hero span {
    display: flex;
    font-size: 1rem;
    font-family: 'Sawarabi Gothic', sans-serif;
    align-items: center;
    padding-left: 15px;
}
.indextop {
    display: block;
    justify-content: center;
    text-align: center;
}
.concept_image {
    flex: 1;
    max-height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
}
.concept_text {
    flex: 2;
    font-family: 'Noto sans jp','sans-serif';
    text-align: left;
    max-width: 600px;
    padding: 1rem 5%;
}
.concept_text p {
    line-height: 2;
    font-size: .78rem;
    margin-bottom: .875rem;
}
/** scroll icon **/
 .scroll_icon {
    display: none;
 }   
/** service_area **/
#service {
    display: flex;
    justify-content: center;
    align-items: center;
}
.service_logo {
    width: 70px;
    height: auto;
    object-fit: contain;
    padding: 1rem 0;
}
.service_header {
    font-size: 28px;
    font-family: 'Nunito sans';
    font-weight: 600;
    padding-left: 1rem;
}
.service_area {
    justify-content: center;
    text-align: center;
    padding-bottom: 1.5rem;
}
#residential_content {
    display: block;
    align-items: center;
    max-width: 767px;
    margin: 0 auto;
    gap: 20px;
    padding: 15px 0;
}
#office_content {
    display: block;
    align-items: center;
    max-width: 767px;
    margin: 0 auto;
    gap: 20px;
    padding: 15px 0;
}
#interior_content {
    display: block;
    align-items: center;
    max-width: 767px;
    margin: 0 auto;
    gap: 20px;
    padding: 15px 0;
}
.realestate_content {
    display: block;
    align-items: center;
    max-width: 767px;
    margin: 0 auto;
    gap: 20px;
    padding: 15px 0;
}
.kinomono_content {
    display: block;
    align-items: center;
    max-width: 767px;
    margin: 0 auto;
    gap: 20px;
    padding: 15px 0;
}
.image_content {
    max-width: 300px;
    display: block;
    align-items: center;
    object-fit: cover;
    margin: 0 -10px;
}
.image_content img {
    max-width: 300px;
    height: 300px;
    border-radius: 0 10px 10px 0;
    object-fit: cover;
    margin: 0 auto;
}
.service_container {
    max-width: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
}
.service_type {
    font-size: 24px;
    font-family: 'Sawarabi Gothic';
    text-align: left;
    line-height: 1;
    padding: 0 2rem 1rem;
}

.service_type span {
    font-size: 48px;
}

.service_text {
    font-size: .8rem;
    text-align: left;
    line-height: 2;
    padding-left: 2rem;
    margin-bottom: 1rem;
}
.service_text2 {
    font-size: .7rem;
    text-align: left;
    line-height: 2;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}
.content_item {
    border: 1px solid #111;
    border-left: none;
    padding: 0 1rem;
    text-decoration: none;
}

.content_links {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px;
    list-style: none;
    margin: auto;
    padding: 0 5%;
}

.content_links2{
    display: block;
    width: 115px;
    height: auto;
    list-style: none;
    margin: auto;
}
.content_links a {
    display: flex;
    align-items: center;
    height: 70px;
    background-color: #fff; 
    color: #111;
    font-size: .7rem;
    text-decoration: none;
    text-align: center;
}
.content_links2 a {
    display: flex;
    width: auto;
    height: 50px;
    background-color: #fff; 
    color: #111;
    font-size: .875rem;
    text-decoration: none;
    text-align: center;
    align-items: center;
    padding: 0 1rem;
}

.kurashi {
    display: block;
    width: 200px;
    height: auto;
    padding-bottom: 1rem;
    margin: auto;
}

/** tenants
*******************/
.service_title {
    display: flex;
    font-size: 16px;
    font-family: 'Sawarabi Gothic' , sans-serif;
    align-items: center;
    padding-left: 15px;
}
.service_content {
    display: block;
    align-items: center;
    max-width: 767px;
    margin: 0 auto;
    padding: 0 15px 15px;
}
.service_content2 {
    display: block;
    align-items: center;
    max-width: 767px;
    margin: 1rem auto;
    padding: 0 15px 15px;
}
.image_content2 {
    max-width: 300px;
    display: block;
    align-items: center;
    object-fit: cover;
    margin: 0 -10px;
}
.image_content2 img {
    max-width: 300px;
    height: 300px;
    border-radius: 0 10px 10px 0;
    object-fit: cover;
    margin: 0 auto;
}

.rental_management {
    display: block;
    margin: 1rem auto;
}
.management_description {
    background-color:  rgb(135, 206, 250, 0.2);
    width: fit-content;
    border-radius: 10px;
    padding: 15px;
    align-items: center;
    margin: 0 1rem;
}
.management_description p {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/** step **/
.steps {
    display: block;
    margin: 1rem auto;
}

/** circle **/
.circle {
    width: 280px;
    height: 280px;
    background-color: #87CEFA;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 25px;
    color: #111;
    margin: 0 auto;
}
.circle h2 {
    font-size: 30px;
    padding-top: 15px;
    margin-bottom: 8px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
    font-family: 'Sawarabi Gothic';
}
.circle p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}
.circle .number {
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
    font-family: 'Sawarabi Gothic' , sans-serif;
}
/** nakaku info 
*******************/

.info_nakaku {
    display: flex;
    justify-content: space-around;
    margin: 3rem auto;
}
.info_nakaku img {
    width: 250px;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
}

/** government **/

.section-government-detail {
    background: rgb(135, 206, 250, 0.2);
    padding: 1rem;
}
.section-government-detail 
.government-container {
    max-width: 767px;
    margin: 0 auto;
}
.section-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #333;
}
.section-lead {
    font-size: .875rem;
    margin-bottom: 1rem;
}
/**.anchor-menu ul {
    display: block;
    flex-direction: column;
    gap: 8px;
    margin: auto;
    padding: 0;
    list-style: none;
}
.anchor-menu a {
    background: #fff;
    border: 1px solid #ccc;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    font-size: .8rem;
    color: #333;
    transition: background 0.3s;
}
.anchor-menu a:hover {
    background: #e0e0e0;
}**/
.content-block {
    background: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 5px solid #9370DB;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.content-block h3 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    color: #444;
}
.content-block p,
.content-block a,
.content-block ul,
.content-block dl {
    font-size: .85rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.garbage {
    width: auto;
    height: auto;
    object-fit: cover;
    margin: 1rem auto;
}

#welfare h4 {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    color: #5a478d;
}
#welfare ul {
    list-style: disc;
    padding-left: 1.5rem;
}
#welfare li {
    margin-bottom: 1rem;
}
#welfare a {
    color: #3333cc;
    text-decoration: underline;
}
#welfare a:hover {
    color: #0000aa;
}

#disaster h5 {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    color: #5a478d;
}
#disaster ul {
    list-style: disc;
    padding-left: 1.5rem;
}
#disaster li {
    margin-bottom: 1rem;
}
#disaster a {
    color: #3333cc;
    text-decoration: underline;
}
#disaster a:hover {
    color: #0000aa;
}
#government-faq .government-faq-list {
  margin-top: 1rem;
}
#government-faq dt {
  font-weight: bold;
  margin-top: 1.5rem;
  color: #5a478d;
}
#government-faq dd {
  margin-left: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
#government-faq a {
  color: #3333cc;
  text-decoration: underline;
}
#government-faq a:hover {
  color: #0000aa;
}

/** school **/

.school_container {
    max-width: 767px;
    margin: 0 auto;
    padding: 1rem;
}
.school_container h2 {
    font-family: "Sawarabi Gothic", sans-serif;
    font-size: 24px;
    border-left: 10px solid #87CEFA;
    padding-left: 1rem;
}
.school {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1rem;
    margin: 1.5rem auto;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.school_intro {
    width: fit-content;
    margin: 0 auto 1rem;
    text-align: left;
}
.school_intro p {
    font-size: .85rem;
    line-height: 1.6;
    margin-bottom: .5rem;
}
.school_intro span {
    font-size: .65rem;
    padding-left: 1rem;
}
.school img {
    width: 90%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
    border-radius: 8px;
    margin: auto;
}
.school-info {
    flex: 1;
    padding-left: 1rem;
}
.school-info p {
    line-height: 1.6;
    font-size: 12px;
}
.school-info strong {
    font-weight: bold;
    font-size: 16px;
}
.school-btn {
    display: inline-block;
    background-color: #87CEFA;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    margin: 1rem auto;
}
.schoolfaq {
    margin: 1rem;
}
.schoolfaq-item {
    margin: 1rem 0;
}
.schoolfaq-item summary {
    font-weight: bold;
    cursor: pointer;
    margin: 1rem 0;
    font-size: .8rem;
}
.schoolfaq-item p {
    padding-left: 1rem;
    font-size: .8rem;
    color: #333;
    margin-bottom: 1rem;
}
.schoolfaq-item ul {
    padding-left: 1rem;
    list-style: disc;
    margin-bottom: 1rem;
}
.schoolfaq-item li {
    font-size: .8rem;
    line-height: 2;
}

/** park **/
.signs {
    display: block;
    width: 60%;
    object-fit: cover;
    margin: 2rem auto;
    border-radius: 10px;
}
.park-section {
    max-width: 767px;
    margin: 0 1rem;
    padding: 1rem 1rem 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.park-section h2 {
    border-left: 10px solid #77DF6D;
    padding-left: 1rem;
    font-size: 24px;
    margin-bottom: 1rem;
}
.park-card {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}
.park-card > img {
    width: 400px;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}
.park-info {
    flex: 1;
    min-width: 300px;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.park-info h3 {
  margin: 0;
  font-size: 1.4rem;
  color: #446b5d;
}
.park-info span {
    margin: .3rem 0;
    font-size: .9rem;
}
.park-info p {
  margin: .3rem 0;
  font-size: .85rem;
}
.map-link {
  margin-top: .8rem;
}
.pin-icon {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-right: .3em;
    margin-bottom: .2em;
}
.park-btn {
    align-self: flex-end;
    background-color: #77DF6D;
    font-size: .875rem;
    color: white;
    padding: 0.3rem .8rem;
    border-radius: 4px;
    text-decoration: none;
    margin-bottom: 1.5rem ;
}

/** construction 
*******************/
.catch_copy3{
    font-size: 24px;
    font-family: 'Sawarabi Gothic';
    text-align: center;
    color: red;
    margin: 0 auto;
    padding: 0 1rem;
}
.construction_text {
    max-width: 767px;
    padding: 0 1rem;
    font-family: 'Noto sans jp';
}
.construction_text p {
    font-size: .82rem;
    text-align: left;
    margin-bottom: 1rem;
}
.construction_text span{
    font-size: 1rem;
    font-weight: bold;
}

.schedule {
    background-color: rgb(135, 206, 250, 0.2);
    text-align: center;
    align-items: center;
    padding-bottom: .8rem;
}
.schedule p{
    font-size: 32px;
}
.schedule_sub {
    text-align: end;
    padding: .5rem 1rem 2rem;
}
.schedule_sub p{
    font-size: .8rem;
    color: red;
}

.construction_container {
    max-width: 767px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/** construction_circle **/
.c_circle {
    width: 95vw;
    aspect-ratio: 1 / 1; 
    background-color: #87CEFA;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 8vw;
    box-sizing: border-box;
    margin: 0 auto;
    color: #111;
    max-width: 400px;
}
.c_circle h2 {
    font-size: 24px;
    padding-top: 10px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(128, 128, 128, 1); 
    font-family: 'Sawarabi Gothic';
}
.c_circle h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .5); 
    font-family: 'Sawarabi Gothic';
}
.c_circle p {
    font-size: .7rem;
    line-height: 1.5;
    margin-bottom: 10px;
}
.c_circle .number {
    font-size: 42px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(128, 128, 128, 1);
}

/** layout 
*******************/

.layout_type {
    max-width: 767px;
    font-size: 16px;
    font-family: 'Sawarabi Gothic';
    text-align: left;
    line-height: 1.5;
    margin: 0 auto 1rem;
    padding: 0 .8rem;
}
.layout_type color {
    color: #E8D575;
}

.image_content4 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.image_content4 img {
    max-width: 200px;
    object-fit: cover;
    margin: 0 auto;
}


/** layout **/

.layout_head {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 10px;
}
.layout_head p {
    display: flex;
    font-size: 22px;
    font-family: 'Sawarabi Gothic' , sans-serif;
    align-items: center;
    padding-left: 10px;
}
.layout_back {
    background-color:  rgb(135, 206, 250, 0.3);
}
.layout {
    display: block;
    max-width: 767px;
    padding: 20px;
    margin: 0 auto;
}

.layout h2 {
    font-size: 24px;
    padding-left: 2rem;
    margin-bottom: 10px;
}
.seat {
    display: block;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    text-align: left;
    margin: auto;
    
}

.seat_image {
    display: block;
    width: 88%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 auto;
}

.seat_description {
    flex: 1;
    width: fit-content;
    margin: 0 auto;
}
.seat_description p {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 1rem;
    padding-left: 10px;
}

.seat_description ul {
    padding-left: 10px;
}

.seat_description li {
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.4;
}
/** layout_example **/
.layout_example {
    max-width: 767px;
    padding: 10px;
    color: #111;
    margin: 1rem auto;
}

.top-section {
    display: block;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.top-image {
    display: block;
    width: 90%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin: 1rem auto;
}

.top-text {
    flex: 1;
    margin: auto;
    line-height: 1.6;
    padding-left: 1rem;
}

.top-text h2 {
    font-size: 18px;
    margin-bottom: 10px;
}
.top-text p {
    font-size: .8rem;
    margin-bottom: .8rem;
}
.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.layout-box {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    align-items: center;
}

.small-image {
    width: 90%;
    height: 250px;
    object-fit: cover;
    display: block;
    margin: 10px auto;
    border-radius: 10px;
}
.layout-box color{
    color: #E8D575;
}

.layout-box h3 {
    margin: 10px 0 5px;
    font-size: 18px;
    padding-left: 30px;
    color: #222;
}

.layout-box p {
    font-size: 14px;
    line-height: 1.6;
    padding-left: 30px;
}
.layout_example strong {
    font-weight: bold;
}
.slider-title {
    margin: auto;
    font-size: 28px;
    text-align: center;
}
.slider-title p{
    margin: 0 auto;
    font-size: 14px;
    text-align: center;
}

/** slider **/
.slider-container {
    position: relative;
    width: 90%;
    overflow: hidden;
    margin: 10px auto;
}
.slider {
    display: flex;
    transition: transform 0.3s ease-in-out;
}
.slide {
    flex: 0 0 100%;
    text-align: center;
}
.slide img {
    max-width: 90%;
    height: auto;
    cursor: pointer;
}
.layout-prev,
.layout-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    background: rgba(255,255,255,0.8);
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}
.layout-prev {
    display: none;
}

.layout-next {
    display: none;
}
.modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 90%;
    text-align: center;
    position: relative;
}
.modal-content img {
    width: 100%;
    height: auto;
}
.modal-caption {
    margin: 10px 0;
    font-size: 1.2rem;
    color: #111;
}
.modal-close {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: .875rem;
    cursor: pointer;
    color: #111;
}

/** dots **/
.dots {
    text-align: center;
    margin-bottom: 10px;
}
.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}
.dot.active {
    background-color: #000;
}
  
/** real estate 
*******************/

.image_content3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.image_content3 img {
    max-width: 400px;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 10px;
}

/** realestate_service **/

.realestate_img {
    display: block;
    align-items: center;
    width: 250px;
    object-fit: cover;
    margin: auto;
}
.realestate_img2 {
    display: block;
    align-items: center;
    width: 300px;
    object-fit: cover;
    border-radius: 0 10px 80px 0;
}

.realestate_type {
    font-size: 20px;
    font-family: 'Sawarabi Gothic';
    text-align: left;
    padding-left: 1rem;
}
.realestate_content3 {
    display: block;
    max-width: 767px;
    margin: 1rem auto;
    justify-content: center;
}
.realestate_content2 {
    display: block;
    max-width: 767px;
    margin: 1rem auto;
    justify-content: center;
}
.realestate_container {
    max-width: 767px;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-bottom: 1.5rem;
}
.realestate_type span {
    font-size: 38px;
}
.realestate_text {
    text-align: left;
}
.realestate_text p {
    margin: 1.4rem 0;
    line-height: 1.6;
}
.realestate_text span {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2;
}

.realestate_text2 p {
    text-align: left;
    font-size: .9rem;
    margin: 1rem;
    line-height: 2;
}
.realestate_text3 p {
    text-align: left;
    font-size: .9rem;
    margin: 1rem;
    line-height: 2;
}

/** schedule
********************/

.catch_copy2 {
    font-size: 18px;
    font-family: 'Sawarabi Gothic';
    text-align: center;
    margin: 0 auto;
}
.subcatch_copy {
    text-align: center;
    justify-content: center;
}
.subcatch_copy p {
    font-size: .7rem;
}

.schedule_container {
    max-width: fit-content;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin: 0 auto;
}
.schedule_type {
    font-size: 24px;
    font-family: 'Sawarabi Gothic';
    text-align: left;
}
.schedule_type span {
    font-size: 48px;
}
.schedule_type color {
    color: #E8D575;
}
.schedule_type2 {
    font-size: 22px;
    font-family: 'Sawarabi Gothic';
    text-align: center;
    padding: 0 0 1rem;
}
.schedule_text {
    text-align: left;
}
.schedule_text p{
    margin: 0 1rem .5rem;
    line-height: 1.6;
    font-size: .875rem;
}
.schedule_text a {
    font-size: .75rem;
    padding-left: 5rem;
}

.image_schedule {
    max-width: 250px;
    display: block;
    align-items: center;
    object-fit: cover;
    margin: 0 auto;
}
.image_schedule img {
    max-width: 250px;
    height: 250px;
    border-radius: 0 10px 10px 0;
    object-fit: cover;
    margin: 0 auto;
}


/** office
********************/

.office_content2 {
    display: block;
    align-items: center;
    text-align: center;
    max-width: 767px;
    margin: 0 auto;
    padding: 0 15px 15px;
}

.office_content {
    display: block;
    align-items: center;
    max-width: 767px;
    margin: 0 auto;
    padding: 0 15px 15px;
    background-color:  rgb(135, 206, 250, 0.18);
}
.image_office {
    max-width: 300px;
    display: block;
    align-items: center;
    object-fit: cover;
    margin: 0 auto;
}
.image_office img {
    max-width: 300px;
    height: 300px;
    border-radius: 0 10px 10px 0;
    object-fit: cover;
    margin: 0 auto;
}

.office_container {
    max-width: 340px;
    margin: auto;
}
.office_type {
    font-size: 38px;
    font-family: 'Sawarabi Gothic';
    text-align: left;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.office_type span {
    font-weight: bold;
    color: #E8D575;
}
.office_text {
    text-align: left;
    font-size: 1rem;
}
.office_text p{
    margin: .8rem 0 ;
}
.office_link {
    display: flex;
    flex-direction: column;
    margin: 1rem 2rem;
}
.office_link p {
    text-align: center;
    padding-left: 1rem;
    font-size: .85rem;
}
.office_info {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.content_links3{
    justify-content: center;
    margin: 1rem 2rem;
    padding: 0;
    list-style: none;
}
.content_links3 a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 80px;
    color: #111;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
}
.content_links3 p {
    font-size: .875rem;
    text-align: center;
    color: #87CEFA;
}
.link_icon {
    padding-top: 2px;
    width: 20px;
    height: 20px;
}
.border {
    border-bottom: solid 3px  rgb(135, 206, 250, 0.18); ;
    margin-top: 1.5rem;
}


/** information
********************/
#information {
    max-width: 767px;
    margin: 1rem auto;
    object-fit: contain;
}
.information_title {
    font-family: 'Sawarabi Gothic';
    text-align: left;
    margin: 1rem 2rem;
    font-size: .875rem;
}
.information_title span{
    font-size: 32px;
}
/* news */
.news-list {
    list-style: none;
    padding: 0 20px;
    margin: 0;
}
.news-list li {
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}
.news-list li a {
    text-decoration: none;
    color: #333;
}
.news-list li a:hover {
    text-decoration: underline;
}

/** company_info
***********************/
#company {
    max-width: 767px;
    margin: 0 auto ;
    object-fit: contain;
}
.company_title {
    font-family: 'Sawarabi Gothic';
    text-align: left;
    margin: 1rem 2rem;
    font-size: .875rem;
}
.company_title span{
    font-size: 32px;
}
.company_info {
    display: block;
    margin: 1rem 2rem;
}
.company_info p {
    font-size: .75rem;
    line-height: 2;
    margin-bottom: 1rem;
}
.nextmakes {
    max-width: 50px;
    height: 50px;
    margin: .5rem 0;
}
.content_item2 {
    display: block;
    width: 50px;
    height: 48px;
    font-size: 18px;
    color: #444;
    text-align: center;
    border: 1px solid #444;
    border-left: none;
    margin: auto;
}

/** company page **/

.catch_copy4 {
    display: flex;
    font-size: 24px;
    font-family: 'Sawarabi Gothic';
    text-align: center;
    align-items: center;
    justify-content: center;
}
.promise_title {
    font-size: 36px;
    font-family: 'Sawarabi Gothic';
    align-items: center;
    color: #fff;
    background-color: #87CEFA;
    border-radius: 20px;
    padding: 0 20px;
    margin: 1rem;
}
.promise {
    width: 390px;
    font-size: 36px;
    text-align: left;
    align-items: center;
    margin: 2rem auto;
    padding-left: 25px;
    border-bottom: 2px solid #87CEFA;
    color: #444;
}
.promise span {
    color: #87CEFA;
}

/** mission **/
.mission_content {
    background-color: rgba(135, 206, 250, 0.3);
    font-family: "noto sans jp", sans-serif;
}
.mission {
    max-width: 767px;
    margin: 1rem auto 0;
    padding: 1rem 1rem 1rem;
    line-height: 1.8;
}
.mission h2 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
    color: #111;
}
.mission h3 {
    font-size: 1.1rem;
    margin: 1rem 0;
    color: #222;
}
.mission p {
    font-size: .85rem;
    margin-bottom: 1rem;
    color: #333;
}
.mission ul {
    font-size: 1rem;
    margin: 1rem 0;
    padding-left: 1rem;
}
.mission ul span {
    color: #E8D575;
}
.mission ul li {
    margin-bottom: 1rem;
}
.mission .contact {
    margin: 1rem;
    color: #222;
}
.news-date {
    display: inline-block;
    margin-right: 1em;
    color: #999;
    font-size: 13px;
    white-space: nowrap;
}
  
/* mvv area */
.mvv {
    padding: 1rem;
    max-width: 767px;
    margin: 0 auto;
    font-family: "Sawarabi Gothic", sans-serif;
}
.mvv-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mvv-block h2 {
    color: #87CEFA;
    margin: 1rem auto;
    font-size: 1.6rem;
    border-left: 16px solid #87CEFA;
    padding-left: 1rem;
    font-family: "Nunito-sans", sans-serif;
    font-weight: bold;
}
.mvv-block p {
    font-size: 1.2rem;
    padding-left: 2rem;
    color: #111;
}
.mvv-block ul {
    margin: 0 1rem;
    padding-left: 1rem;
}
.mvv-block ul li {
    margin-bottom: 1rem;
    line-height: 1.2;
    font-size: 1rem;
}


/** company info area 
**********************/
.company {
    background-color: rgba(135, 206, 250, 0.3);
    padding: 2rem 1rem;
    font-family: "Sawarabi Gothic", sans-serif;
}

.company-inner {
    max-width: 767px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
}
.company-left {
    flex: 1;
    min-width: 300px;
}
.mission-left .logo {
    width: 75px;
}
.company-info h3 {
    font-size: 1.4rem;
    margin-top: 1rem;
    color: #111;
}
.company-info span {
    color: #E8D575;
}
.company-info p {
    font-size: .875rem;
    color: #222;
    line-height: 2;
    padding-left: 2.1rem;
}
.company-info p span2 {
    font-size: 1.2rem;
    font-weight: bold;
}    
.company-right {
    flex: 1;
    min-width: 300px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.company-right img {
    width: 200px;
    height: auto;
    border-radius: 5px;
}

/* message area */

.image_president {
    display: block;
    justify-content: center;
    align-items: center;
}
.image_president img {
    display: block;
    width: 75%;
    height: 340px;
    object-fit: cover;
    margin: auto;
    border-radius: 10px;
}
.message_president {
    display: block;
    margin: 1rem auto;
    gap: 10px;
    justify-content: center;
}
.message_title {
    font-size: 1.4rem;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.message_title span {
    color: #87CEFA;
}
.message_description {
    max-width: 767px;
    padding: 10px 30px;
    align-items: center;
}
.message_description p {
    font-size: .85rem;
    margin-bottom: 1.5rem;
    line-height: 2;
}
.signature {
    text-align: end;
    padding-right: 2rem;
    padding-bottom: 2rem;
}
.signature span {
    font-size: 1.6rem;
}

/** recruit
********************/
.recruit {
    background-color:  rgb(135, 206, 250, 0.4);
    padding: 20px;
}
.recruit_inner {
    max-width: 767px;
    background-color: #fefefe;
    border-radius: 50px;
    padding: 1rem 1rem 1.5rem;
    margin: auto;
}
.recruit_parts {
    text-align: center;
    margin: 1rem auto;
}
.recruit_inner h2 {
    color: #031352;
    text-align: center;
    font-size: 28px;
    margin: 1rem 0;
}

.recruit_head {
    display: flex;
    justify-content: center;
    text-align: center;
}
.recruit_head span {
    display: flex;
    font-size: 40px;
    color: #111;
    font-family: 'Sawarabi Gothic' , sans-serif;
    align-items: center;
    padding-left: 30px;
}
.recruit_inner p {
    font-size: 14px;
    padding: .5rem .7rem;
    color: #333;
}
.recruit-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin: 0 auto;
}
.recruit-box {
    background-color: #fefefe;
    padding: 0 7px 0;
    align-items: center;
    margin: 0 auto;
}
.recruit-box color {
    color: #87CEFA;
}
.recruit-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    display: block;
    margin: 10px auto;
    border-radius: 10px;
}
.recruit-box h3 {
    margin: 10px 0 5px;
    font-size: .7rem;
    color: #333;
    align-items: center;
    text-align: center;
}
.recruit-box img {
    width: 100px;
    height: auto;
    object-fit: cover;
    overflow: hidden;
    border-radius: 10px;
}
.recruit_content {
    display: block;
    align-items: center;
    max-width: 767px;
    justify-content: center;
    margin: 0 auto;
}
.recruit_content2 {
    display: block;
    align-items: center;
    max-width: 767px;
    justify-content: center;
    margin: 0 auto;
}
.recruit_container {
    display: flex;
    flex-direction: column;
}
.recruit_text {
    text-align: left;
    margin: auto;
}
.recruit_text p {
    line-height: 1.6;
}
.recruit_image {
    display: flex;
    justify-content: center;
    align-items: center;
}
.recruit_image img {
    max-width: 250px;
    object-fit: cover;
    margin: 0 auto;
}
.abilities-layout {
    display: flex;
    margin: 1rem auto;
    justify-content: space-around;
    gap: 5px;
}
.abilities-box {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background-color: #87CEFA;
}
.abilities-box h3 {
    font-size: 18px;
    margin: 0;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(128, 128, 128, 1);
}


/** faq
********************/
/* toc */

.toc-001 {
    margin-bottom: 30px;
    padding: 1em 1em 1em 2em;
    border: 1px solid #999;
    background-color: #eee;
    color: #111;
    max-width: 767px;
    margin: 0 1rem;
}
.toc-001 div {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 5px 0;
}
.toc-001 label::after {
    margin-left: 5px;
    font-size: 12px;
    color: #166c9d;
    content: "[開く]";
    cursor: pointer;
}
.toc-001:has(:checked) label::after {
    content: "[閉じる]";
}
.toc-001 input {
    display: none;
}
.toc-001 ol {
    list-style-type: decimal;
    margin: 0;
    padding: 0 1.2em;
    overflow: hidden;
}
.toc-001 > ol {
    height: 0;
}
.toc-001:has(:checked) > ol {
    height: auto;
}
.toc-001 ol ol {
    margin-top: 5px;
}
.toc-001 li {
    padding: 5px 0;
}
.toc-001 a {
    color: #111;
    font-size: .8rem;
}

.question_type {
    font-size: 20px;
    font-family: 'Sawarabi Gothic';
    text-align: left;
    line-height: 1.6;
    margin: 1rem auto;
}
.question_type span {
    font-size: 38px;
}


/* faq_area */
.faq_wrap {
    box-sizing: content-box;
    max-width: 767px;
    margin: 0 1rem;
}
.faq_area {
    position: relative;
    z-index: 1;
    padding-top: 60px;
    padding-bottom: 70px;
}
.faq_area__list {
    margin-top: 32px;
}
.faq_area__list div {
    border-top: 2px solid #eee;
    border-bottom: 2px solid #eee;
}
.faq_area__list div:not(:first-child) {
    margin-top: -2px;
}
.faq_area__list dt, .faq_area__list dd {
    position: relative;
    padding: 21px 40px;
    font-size: .75rem;
}
.faq_area__list dt::before, .faq_area__list dd::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 0;
    font-size: medium;	
}
.faq_area__list dt {
    display: flex;
    align-items: center;
    min-height: 60px;
    cursor: pointer;
}
.faq_area__list dt[aria-expanded=true] i::after {
    opacity: 0;
}
.faq_area__list dt::before {
    content: "Q";
    font-family: "Bangers" ,system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 23px;
    font-weight: 500; 
    color: #c00;  
}
.faq_area__list dt i {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 18px;
    height: 18px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.faq_area__list dt i::before, .faq_area__list dt i::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: #c00;
    transition: .3s ease;
}
.faq_area__list dt i::before {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.faq_area__list dt i::after {
    -webkit-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}
.faq_area__list dd {
    display: none;	
}
.faq_area__list dd::before {
    content: "A";
    color: #87CEFA;
    font-family: "Bangers" ,system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 23px;
    font-weight: 500;
}
.faq_bottom {
text-align: center;
}
.faq_subtitle {    
    margin: 0 auto ;   
    font-size: .875rem;    
}

/** privacypolicy
********************/
.pp_header {
display: flex;
max-width: 767px;
justify-content: left;
margin-top: 1rem;
}
.pp_title {
    font-family: 'noto sans jp';
    text-align: left;
    font-size: 18px;
    padding: 0 1rem 0;
    align-items: flex-start;
}
.pp_title span{
    font-size: 14px;
    margin: 0 auto;
}
.pp_text {
    max-width: 767px;
    padding: 1rem 1rem 0;
}
.pp_text p {
    color: #111;
    line-height: 2;
    font-size: .8rem;
    text-align: left;
    margin-bottom: 1rem;
}
.pp_text span {
    font-size: 1rem;
}
ol.numbered_list {
    list-style: decimal;
    margin-left: 1.5rem;
}

/** Contact 
*******************/
.form-text {
    width: 90%;
    padding: 0 15px;
    color: #333;
    text-align: left;
    line-height: 1.8;
    margin: 1rem auto;
}
.form-text ul {
    padding-left: 1rem;
    font-size: .8rem;
}
.form-text li {
    padding-left: .3rem;
    list-style-type: decimal;
}

/** contact form **/    
form {
    width: 90%;
    padding: 0 15px;
}
.form-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 2px solid #f2f4f5;
}
.form-row:last-child {
    border-bottom: none;
}
.form-label {
    width: 100%;
    margin-bottom: 8px;
}
.form-label label {
    font-weight: bold;
}
.form-label span {
    margin-left: 10px;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: red;
}

/* form parts design */
input, textarea {
    background-color: #f2f4f5;
    border: none;
    border-radius: 3px;
    padding: 15px 20px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    color: #333;
    flex-grow: 1;
}
input::placeholder,
textarea::placeholder {
    color: #999;
    font-size: 14px;
}
select {
    background-color: #f2f4f5;
    border: none;
    border-radius: 3px;
    padding: 15px 20px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    color: #333;
}
button {
    width: 100%;
    cursor: pointer;
    margin-top: 20px;
    padding: 15px;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
    background-color: #031352;
}
.example {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}


/** footer 
********************/
footer {
    background-color: #87CEFA;
    color: #fff;
    padding: 20px;
    display:block;
    flex-wrap: wrap;
    max-width: 767px;
    margin: 0 auto;
}
.footer_inner {
    display: flex;
    align-items: center;
}
.footer_left {
    flex: 1;
} 
.footer_right {
    flex: 2;
    display: block;
    max-width: 767px;
    align-items: center;
    margin: 0 auto;
}
.footer_logo {
    display: block;
    width: 70px;
    height: auto;
    margin: 0;
}
.footer_yago {
    display: flex;
    font-size: 1.6rem;
    letter-spacing: .8px;
    color: #fff;
    font-family: "Sawarabi Gothic";
    padding-left: 1rem;

}
.footer_links {
    display: none;
}

.footer_text {
    margin-top: 1rem;
}
.footer_text h3 {
    font-size: 1.6rem;
}
.footer_text p{
    font-size: .875rem;
}
.footer_bottom {
    width: 100%;
    text-align: center;
}
.footer_bottom a {
    color: #fff;
    font-size: 1rem;
    margin: 0 1.4rem 2rem;
    text-decoration: none;
}
.copyright {
    font-size: .7rem;
    padding: 1rem 0 .875rem;
}

/* btn */
.content_item:hover {
    color: #fff;
    background-color: #87CEFA;
    border: 1.6px solid #87CEFA;
    border-left: none;
    border-radius: 10px;
}
.content_item2:hover {
    color: #fff;
    background-color: #87CEFA;
    border: 1.6px solid #87CEFA;
    border-left: none;
    border-radius: 10px;
}

.footer_bottom a:hover{
    color: #E8D575;
}

    /** header change
    **********************/
    .header_change{
        display: none;
    }
}
  

/********************************
           pc
*********************************/
@media screen and (min-width: 768px) , print{

    /* PC画面時にsp_navを非表示にする */
    .sp_nav {
        display: none;
    }

    
    /* wrapper */
    .wrapper {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto ;
        max-width: 1100px;
    }
/* header 
******************/
    
    .header_inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        min-width: 900px;
    }
    
    .logo_area a{
        display: flex;
        align-items: center;
    }
    
    .logo {
        width: 70px;
        height: auto;
        display: inline-block;
        margin: 1rem;
    }
    .yago {
        display: flex;
        align-items: center;
        font-size: 1.6rem;
        letter-spacing: .8px;
        color: #111;
        font-family: "Sawarabi Gothic";
    }
    /** nav **/
    nav {
        margin-left: auto;
    }
    nav ul {
        display: flex;
        list-style: none;
        justify-content: flex-end;
        align-items: center;
    }

    nav a {
        display: block;
        font-size: .8rem;
        letter-spacing: 1px;
        color: #111;
    }

    /** under_border **/
    .nav_item{
        position: relative;
        margin: 0 20px 0;
        padding-top: 6px;
        z-index: 1;
    }
    .nav_item:after{
        background: #87CEFA;
        width: 0;
        height: 3px;
        position: absolute;
        content: "";
        display: block;
        bottom: -3px;
        left: 0;
        z-index: -1;
        transition: 0.3s;
    }
    .nav_item:hover:after{
        width: 100%;
    }
     /** dropdown_nav **/
     
    .dropdown__lists {
        display: none; 
        position: absolute;
        top: 50px;
        left: 0;
        transition: all 0.3s;
        width: fit-content;
        min-width: 230px;
    }   
    .dropdown__list {
        background-color:  rgba(135, 206, 250, 0.5);
        height: 38px;
        align-items: center;
        justify-content: space-between;
        transition: all .3s;
        position: relative;
        padding: 0;
    }
    
    .dropdown__list a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #111;
        text-decoration: none;
        position: relative;
        padding: 15px 30px; 
        white-space: nowrap;
        line-height: 0.5;
    }
    
    .dropdown__list:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
    }

    .dropdown__list:hover {
        background-color: rgb(135, 206, 250, 1);
    }
    .dropdown__list a::before {
        content: '';
        display: block;
        width: 5px;
        height: 5px;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
        transform: rotate(135deg);
        position: absolute;
        right: 5px;
    }

    .nav_item:hover .dropdown__lists {
        display: block; 
    }

    .dropdown__lists {
        transform: scaleY(0);
        transform-origin: center top;
        transition: all .3s;
        position: absolute;
        top: 30px;
        left: 0;
    }
    .nav_item:hover .dropdown__lists {
        transform: scaleY(1);
    }

/** main
********************/

    /** main_visual **/
    .main_visual {
        width: 100%;
        min-width: 900px;
        object-fit: cover; 
        overflow: hidden;
    }

    /** fadein_text **/
    .fade_text {
        position: absolute;
        top: 25%; 
        left: 50%;
        transform: translate(-50%, 0);
        opacity: 0;
        font-size: 3.78rem;
        font-weight: normal;
        color: #fff;
        text-shadow: 4px 4px 10px rgba(0, 0, 0, 1); 
        transition: opacity 1.5s ease-out, transform 1.5s ease-out;
        width: 100%;
        text-align: center;
    }

    .fade_text.show {
        opacity: 1;
    }
    
    .fade_text span {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px); 
    animation: fadeInUp 1s ease-out forwards;
    }

    .fade_text span:nth-child(1) { animation-delay: 0s; }
    .fade_text span:nth-child(2) { animation-delay: 0.1s; }
    .fade_text span:nth-child(3) { animation-delay: 0.2s; }
    .fade_text span:nth-child(4) { animation-delay: 0.3s; }
    .fade_text span:nth-child(5) { animation-delay: 0.4s; }
    .fade_text span:nth-child(6) { animation-delay: 0.5s; }
    .fade_text span:nth-child(7) { animation-delay: 0.6s; }
    .fade_text span:nth-child(8) { animation-delay: 0.7s; }
    .fade_text span:nth-child(9) { animation-delay: 0.8s; }

    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /** scrolldown **/
    .scroll {
        position: absolute;
        right: 30px; 
        top: 70%; 
        transform: translateY(-50%);
        writing-mode: vertical-rl;
        text-transform: uppercase;
        color: #fff;
        align-items: center; 
    }
    
    .scrolldown1 {
        display: inline-block;
        font-size: 1rem;
        font-family: 'Noto Sans JP';
        text-transform: uppercase;
        color: #fefefe; 
    }
    
    .scrolldown1::after {
        content: '';
        display: block;
        width: 3px; 
        height: 50px; 
        background-color: #fefefe;
        animation: scrollAnimation 1.5s infinite;
    }
    
    @keyframes scrollAnimation {
        0% {
            opacity: 1;
            transform: translateY(0);
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 0;
            transform: translateY(20px);
        }
    }
    /** Hero_area **/
    
    .catch_copy {
        font-size: 38px;
        font-family: 'Sawarabi Gothic';
        text-align: center;
        margin: 3rem auto;
    }
    .hero {
        display: flex;
        justify-content: center;
        text-align: center;
        padding: 2rem 0;
    }
    .hero span {
        display: flex;
        font-size: 38px;
        font-family: 'Sawarabi Gothic' , sans-serif;
        align-items: center;
        padding-left: 30px;
    }
    .indextop {
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .concept_image {
        flex: 1;
        max-width: 300px;
        object-fit: cover;
        border-radius: 10px;
        margin: 1rem 2rem;
    }
    .concept_text {
        flex: 2;
        font-family: 'Noto sans jp','sans-serif';
        text-align: left;
        max-width: 700px;
        padding: 20px;
    }
    .concept_text P {
        line-height: 2;
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    /** scroll icon **/
     .scroll_icon {
        display: block;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        padding: 5rem 0;
     }   
    /** service_area **/
    #service {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .service_logo {
        width: 100px;
        padding: 1.5rem 0;
    }
    .service_header {
        font-size: 48px;
        font-family: 'Nunito sans';
        font-weight: 600;
    }
    .service_area {
        align-items: center;
        text-align: center;
        padding-bottom: 2rem;
    }
    #residential_content {
        display: flex;
        align-items: stretch;
        max-width: 1100px;
        margin: 0 auto;
        gap: 100px;
        padding: 20px 0;
    }
    #office_content {
        display: flex;
        align-items: stretch;
        max-width: 1100px;
        flex-direction: row-reverse;
        margin: 0 auto;
        gap: 100px;
        padding: 20px 0;
    }
    #interior_content {
        display: flex;
        align-items: stretch;
        max-width: 1100px;
        margin: 0 auto;
        gap: 100px;
        padding: 20px;
    }
    .realestate_content {
        display: flex;
        align-items: stretch;
        max-width: 1100px;
        flex-direction: row-reverse;
        margin: 0 auto;
        gap: 100px;
        padding: 20px 0;
    }
    .kinomono_content {
        display: flex;
        align-items: stretch;
        max-width: 1100px;
        margin: 0 auto;
        gap: 100px;
        padding: 20px 0;
    }
    .image_content {
        max-width: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        object-fit: cover;
    }
    .image_content img {
        max-width: 500px;
        height: auto;
        border-radius: 10px;
        object-fit: cover;
        margin: 3rem 0;
    }
    .service_container {
        width: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .service_type {
        font-size: 46px;
        font-family: 'Sawarabi Gothic';
        text-align: left;
        line-height: 1;
        padding: 0 0 2rem;
    }
    
    .service_type span {
        font-size: 80px;
    }

    .service_text {
        font-size: 1.2rem;
        text-align: left;
        line-height: 2;
        margin-bottom: 2rem;
    }
    .service_text2 {
        font-size: 1rem;
        text-align: left;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }
    .content_item {
        border: 1.6px solid #111;
        border-left: none;
    }
    
    .content_links {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 60px;
        padding: 0;
        list-style: none;
    }
    
    .content_links2{
        display: flex;
        margin: 1.4rem auto;
        grid-template-columns: repeat(2, 1fr); 
        gap: 60px;
        padding: 0;
        list-style: none;
    }
    .content_links a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 220px;
        height: 95px;
        background-color: #fff; 
        color: #111;
        font-size: .875rem;
        text-decoration: none;
        text-align: center;
    }
    .content_links2 a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 220px;
        height: 95px;
        background-color: #fff; 
        color: #111;
        font-size: 1.2rem;
        text-decoration: none;
        text-align: center;
    }
    
    .kurashi {
        display: block;
        width: 200px;
        height: auto;
        padding-bottom: 1rem;
    }
    
/** tenants
*******************/
    .service_title {
        display: flex;
        font-size: 24px;
        font-family: 'Sawarabi Gothic', sans-serif;
        align-items: center;
        padding-left: 30px;
    }
    .service_content {
        display: flex;
        align-items: stretch;
        max-width: 1100px;
        margin: 0 auto;
        gap: 100px;
    }
    .service_content2 {
        display: flex;
        align-items: stretch;
        max-width: 1100px;
        margin: 0 auto;
        flex-direction: row-reverse;
        gap: 100px;
    }
    .image_content2 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .image_content2 img {
        max-width: 300px;
        object-fit: cover;
        margin: 0 auto;
    }

    .rental_management {
        display: flex;
        margin: 2rem 3rem 5rem;
        gap: 30px;
        justify-content: center;
    }
    .management_description {
        background-color:  rgb(135, 206, 250, 0.2);
        max-width: 850px;
        padding: 20px 30px;
        border-radius: 10px;
        align-items: center;
    }
    .management_description p {
        font-size: 1rem;
        line-height: 2;
        margin-bottom: 1rem;
    }

    /** step **/
    .steps {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 100px;
    }

    /** circle **/
    .circle {
        width: 500px;
        height: 500px;
        background-color: #87CEFA;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 75px;
        color: #111;
    }
    .circle h2 {
        font-size: 64px;
        padding-top: 75px;
        margin-bottom: 10px;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
        font-family: 'Sawarabi Gothic';
    }
    .circle p {
        font-size: 23px;
        line-height: 1.8;
        margin-bottom: 10px;
        max-width: 440px;
    }
    .circle .number {
        font-size: 128px;
        font-weight: bold;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
        font-family: 'Sawarabi Gothic', sans-serif;
    }
/** nakaku info 
*******************/
    
    .info_nakaku {
        display: flex;
        justify-content: space-around;
        margin: 3rem auto;
    }
    .info_nakaku img {
        width: 250px;
        height: auto;
        overflow: hidden;
        border-radius: 10px;
    }

    /** government **/

    .section-government-detail {
        background: rgb(135, 206, 250, 0.2);
        padding: 3rem 1rem;
    }
    .section-government-detail 
    .government-container {
        max-width: 1100px;
        margin: 0 auto;
    }
    .section-title {
        font-size: 2rem;
        margin-bottom: 0.5rem;
        color: #333;
    }
    .section-lead {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    .anchor-menu ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 2rem;
        padding: 0;
        list-style: none;
    }
    .anchor-menu a {
        background: #fff;
        border: 1px solid #ccc;
        padding: 0.5rem 1rem;
        border-radius: 5px;
        text-decoration: none;
        font-size: .875rem;
        color: #333;
        transition: background 0.3s;
    }
    .anchor-menu a:hover {
        background: #e0e0e0;
    }
    .content-block {
        background: #fff;
        padding: 1.5rem;
        margin-bottom: 2rem;
        border-left: 5px solid #9370DB;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    }
    .content-block h3 {
        margin-bottom: 1rem;
        font-size: 1.4rem;
        color: #444;
    }
    .content-block p,
    .content-block ul,
    .content-block dl {
        font-size: 0.95rem;
        line-height: 1.8;
        padding-left: 1rem;
        margin-bottom: 1rem;
    }
    .garbage {
        width: auto;
        height: auto;
        object-fit: cover;
        margin: 1rem auto;
    }

    #welfare h4 {
        margin-top: 1.5rem;
        font-size: 1.1rem;
        color: #5a478d;
    }
    #welfare ul {
        list-style: disc;
        padding-left: 1.5rem;
    }
    #welfare li {
        margin-bottom: 1rem;
    }
    #welfare a {
        color: #3333cc;
        text-decoration: underline;
    }
    #welfare a:hover {
        color: #0000aa;
    }

    #disaster h5 {
        margin-top: 1.5rem;
        font-size: 1.1rem;
        color: #5a478d;
    }
    #disaster ul {
        list-style: disc;
        padding-left: 1.5rem;
    }
    #disaster li {
        margin-bottom: 1rem;
    }
    #disaster a {
        color: #3333cc;
        text-decoration: underline;
    }
    #disaster a:hover {
        color: #0000aa;
    }
    #government-faq .government-faq-list {
      margin-top: 1rem;
    }
    #government-faq dt {
      font-weight: bold;
      margin-top: 1.5rem;
      color: #5a478d;
    }
    #government-faq dd {
      margin-left: 1rem;
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }
    #government-faq a {
      color: #3333cc;
      text-decoration: underline;
    }
    #government-faq a:hover {
      color: #0000aa;
    }

    /** school **/

    .school_container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 1rem;
    }
    .school_container h2 {
        font-family: "Sawarabi Gothic", sans-serif;
        font-size: 24px;
        border-left: 10px solid #87CEFA;
        padding-left: 1rem;
    }
    .school {
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 1.2rem;
        margin: 3rem auto;
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .school_intro {
        width: 540px;
        margin: 0 auto 1.5rem;
        text-align: left;
    }
    .school_intro p {
        font-size: 18px;
        line-height: 2;
    }
    .school_intro span {
        font-size: 12px;
    }
    .school img {
        width: 350px;
        height: auto;
        object-fit: cover;
        overflow: hidden;
        border-radius: 8px;
    }
    .school-info {
        flex: 1;
        padding-left: 1.5rem;
    }
    .school-info p {
        line-height: 2;
        font-size: 14px;
    }
    .school-info strong {
        font-weight: bold;
        font-size: 16px;
    }
    .school-btn {
        display: inline-block;
        background-color: #87CEFA;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        text-decoration: none;
        margin-top: .5rem ;
    }
    .schoolfaq {
        margin: 2rem;
    }
    .schoolfaq-item {
        margin: 1rem 2rem;
    }
    .schoolfaq-item summary {
        font-weight: bold;
        cursor: pointer;
        margin: 1rem 0;
    }
    .schoolfaq-item p {
        padding-left: 2rem;
        font-size: 14px;
        color: #333;
        margin-bottom: 1rem;
    }
    .schoolfaq-item ul {
        padding-left: 2rem;
        list-style: disc;
        margin-bottom: 1rem;
    }
    .schoolfaq-item li {
        font-size: .9rem;
        line-height: 2;
    }

    /** park **/
    .signs {
        display: block;
        max-width: 640px;
        object-fit: cover;
        margin: 2rem auto;
        border-radius: 10px;
    }
    .park-section {
        max-width: 1100px;
        margin: 2rem auto;
        padding: 1rem;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .park-section h2 {
        border-left: 10px solid #77DF6D;
        padding-left: 1rem;
        font-size: 32px;
        margin-bottom: 2rem;
    }
    .park-card {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .park-card > img {
        width: 400px;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
    }
    .park-info {
        flex: 1;
        min-width: 300px;
        padding: 0 1rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .park-info h3 {
      margin: 0.5rem 0;
      font-size: 1.6rem;
      color: #446b5d;
    }
    .park-info span {
        margin: .3rem 0;
        font-size: 1.2rem;
    }
    .park-info p {
      margin: 0.3rem 0;
      font-size: .9rem;
    }
    
    .map-link {
      margin-top: .8rem;
    }
    .pin-icon {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-right: 0.3em;
    }
    .park-btn {
        align-self: flex-end;
        background-color: #77DF6D;
        font-size: .875rem;
        color: white;
        padding: 0.3rem .8rem;
        border-radius: 4px;
        text-decoration: none;
        margin-top: .5rem ;
    }

/** construction 
*******************/
    .catch_copy3{
        font-size: 38px;
        font-family: 'Sawarabi Gothic';
        text-align: center;
        color: red;
        margin: 3rem auto;
    }
    .construction_text {
        min-width: 576px;
        font-family: 'Noto sans jp';
    }
    .construction_text p{
        text-align: left;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }
    .construction_text span{
        font-size: 1.6rem;
        font-weight: bold;
    }

    .schedule {
        background-color: rgb(135, 206, 250, 0.2);
        text-align: center;
        align-items: center;
        padding-bottom: .8rem;
    }
    .schedule p{
        font-size: 54px;
    }
    .schedule_sub {
        text-align: end;
        padding: .5rem 1rem 2rem;
    }
    .schedule_sub p{
        font-size: 24px;
        color: red;
    }
    
    .construction_container {
        width: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /** construction_circle **/
    .c_circle {
        width: 500px;
        height: 500px;
        background-color: #87CEFA;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 75px;
        color: #111;
    }
    .c_circle h2 {
        font-size: 64px;
        padding-top: 10px;
        color: #fff;
        text-shadow: 4px 4px 4px rgba(128, 128, 128, 1); 
        font-family: 'Sawarabi Gothic';
    }
    .c_circle h3 {
        font-size: 32px;
        margin-bottom: 20px;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, .5); 
        font-family: 'Sawarabi Gothic';
    }
    .c_circle p {
        font-size: 1.1rem;
        line-height: 2.2;
        margin-bottom: 10px;
        max-width: 485px;
    }
    .c_circle .number {
        font-size: 96px;
        font-weight: bold;
        color: #fff;
        text-shadow: 4px 4px 4px rgba(128, 128, 128, 1);
    }

/** layout 
*******************/

    .layout_type {
        max-width: 768px;
        font-size: 35px;
        font-family: 'Sawarabi Gothic';
        text-align: left;
        line-height: 1.8;
        margin: 0 auto 1.8rem;
    }
    .layout_type color {
        color: #E8D575;
    }
    
    .image_content4 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .image_content4 img {
        max-width: 300px;
        object-fit: cover;
        margin: 0 auto;
        transform: scale(-1, 1);
    }
    

    /** layout **/
    
    .layout_head {
        display: flex;
        justify-content: center;
        text-align: center;
        padding: 2rem 0;
    }
    .layout_head p {
        display: flex;
        font-size: 40px;
        font-family: 'Sawarabi Gothic' , sans-serif;
        align-items: center;
        padding-left: 30px;
    }
    .layout_back {
        background-color:  rgb(135, 206, 250, 0.3);
    }
    .layout {
        max-width: 1000px;
        padding: 30px;
        margin: auto;
    }
    
    .layout h2 {
        font-size: 28px;
        margin-bottom: 10px;
    }
    .seat {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        align-items: center;
        text-align: left;
        margin: auto;
        
    }
    
    .seat_image {
        width: 300px;
        height: 300px;
        object-fit: cover;
        border-radius: 10px;
    }
    
    .seat_description {
        flex: 1;
        min-width: 300px;
    }
    .seat_description p {
        font-size: 24px;
        line-height: 2;
        margin-bottom: 2rem;
        padding-left: 30px;
    }
    
    .seat_description ul {
        padding-left: 30px;
    }
    
    .seat_description li {
        font-size: 18px;
        margin-bottom: 10px;
        line-height: 1.8;
    }
    /** layout_example **/
    .layout_example {
        max-width: 1000px;
        padding: 20px;
        color: #111;
        margin: 3rem auto;
    }
    
    .top-section {
        display: flex;
        gap: 20px;
        margin-bottom: 40px;
        flex-wrap: wrap;
    }
    
    .top-image {
        width: 300px;
        height: 300px;
        object-fit: cover;
        border-radius: 10px;
    }
    
    .top-text {
        flex: 1;
        min-width: 300px;
        line-height: 2;
        padding-left: 2rem;
    }
    
    .top-text h2 {
        font-size: 32px;
        margin-bottom: 10px;
    }
    .top-text p {
        margin-bottom: 1.6rem;
    }
    .grid-layout {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
    }
    
    .layout-box {
        background-color: #fff;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        align-items: center;
    }
    
    .small-image {
        width: 200px;
        height: 200px;
        object-fit: cover;
        display: block;
        margin: 10px auto;
        border-radius: 10px;
    }
    .layout-box color{
        color: #E8D575;
    }
    
    .layout-box h3 {
        margin: 10px 0 5px;
        font-size: 18px;
        color: #222;
    }
    
    .layout-box p {
        font-size: 14px;
        line-height: 1.6;
        padding-left: 30px;
    }
    .layout_example strong {
        font-weight: bold;
    }
    .slider-title {
        margin: auto;
        font-size: 38px;
        text-align: center;
    }
    .slider-title p{
        margin: 0 auto;
        font-size: 14px;
        text-align: center;
    }

    /** slider **/
    .slider-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        max-width: 1000px;
        margin: 40px auto;
    }
    .slider {
        display: flex;
        transition: transform 0.3s ease-in-out;
    }
    .slide {
        flex: 0 0 100%;
        text-align: center;
    }
    .slide img {
        max-width: 600px;
        height: auto;
        cursor: pointer;
    }
    .layout-prev,
    .layout-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: #fff;
        border: none;
        font-size: 1.5rem;
        padding: 0 15px;
        color: #87CEFA;
        border-radius: 100px;
        cursor: pointer;
        z-index: 10;
    }
    .layout-prev {
      left: 10px;
    }

    .layout-next {
      right: 10px;
    }
    .modal {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(5px);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }
    .modal-content {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        max-width: 90%;
        text-align: center;
        position: relative;
    }
    .modal-content img {
        max-width: 800px;
        height: auto;
    }
    .modal-caption {
        margin: 10px 0;
        font-size: 1.2rem;
        color: #111;
    }
    .modal-close {
        position: absolute;
        top: 5px;
        right: 10px;
        background: none;
        border: none;
        font-size: .875rem;
        cursor: pointer;
        color: #333;
    }

    /** dots **/
    .dots {
        text-align: center;
        margin-bottom: 10px;
    }
    .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 10px;
        background-color: #ccc;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .dot.active {
        background-color: #000;
    }
      
/** real estate 
*******************/
    
    .image_content3 {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .image_content3 img {
        max-width: 400px;
        object-fit: cover;
        margin: 0 auto;
        border-radius: 10px;
    }
    
    /** realestate_service **/
    
    .realestate_img {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 350px;
        object-fit: cover;
    }
    .realestate_img2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 400px;
        object-fit: cover;
        border-radius: 0 20px 80px 0;
    }
    .realestate_type {
        font-size: 32px;
        font-family: 'Sawarabi Gothic';
        text-align: left;
        line-height: 1.6;
    }
    .realestate_content3 {
        display: flex;
        min-width: 1000px;
        margin: 2rem auto;
        justify-content: space-between;
        gap: 50px;
    }
    .realestate_content2 {
        display: flex;
        min-width: 1000px;
        margin: 3rem auto;
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 50px;
    }
    .realestate_container {
        max-width: 600px;
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-bottom: 3rem;
    }
    .realestate_type span {
        font-size: 48px;
    }
    .realestate_text {
        text-align: left;
    }
    .realestate_text p{
        margin: 1.4rem 0;
        line-height: 1.6;
    }
    .realestate_text span {
        font-size: 1.8rem;
        font-weight: bold;
        line-height: 2;
    }
    
    .realestate_text2 p {
        text-align: left;
        font-size: 1.2rem;
        margin: 2rem 0;
        line-height: 2.1;
    }
    .realestate_text3 p {
        text-align: left;
        margin: 1.8rem 0;
        line-height: 2;
    }

/** schedule
********************/
    
    .catch_copy2 {
        font-size: 38px;
        font-family: 'Sawarabi Gothic';
        text-align: center;
        margin: 3rem auto 0;
    }
    .subcatch_copy {
        text-align: center;
        justify-content: center;
        margin-bottom: 3rem;
    }
    .subcatch_copy p {
        font-size: 18px;
    }
    
    .schedule_container {
        max-width: 650px;
        display: flex;
        flex-direction: column;
        text-align: left;
        margin: 3rem 0;
        padding-left: 20px;
    }
    .schedule_type {
        font-size: 38px;
        font-family: 'Sawarabi Gothic';
        text-align: left;
        line-height: .8;
        margin-bottom: 1.8rem;
    }
    .schedule_type span {
        font-size: 64px;
    }
    .schedule_type color {
        color: #E8D575;
    }
    .schedule_type2 {
        font-size: 32px;
        font-family: 'Sawarabi Gothic';
        text-align: left;
        padding: 0 0 1rem;
    }
    .schedule_text {
        text-align: left;
    }
    .schedule_text p{
        margin: .8rem 0;
        line-height: 1.6;
    }
    
    .image_schedule {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .image_schedule img {
        max-width: 300px;
        object-fit: cover;
        margin: 0 auto;
    }

/** office
********************/
    
    .office_container {
        width: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .office_content {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        gap: 80px;
        background-color:  rgb(135, 206, 250, 0.18);
    }
    .office_content2 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        gap: 80px;
    }
    
    .image_office {
        max-width: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        object-fit: cover;
    }
    .image_office img {
        max-width: 500px;
        height: auto;
        border-radius: 10px;
        object-fit: cover;
        margin: 3rem 0;
    }
    .office_type {
        font-size: 64px;
        font-family: 'Sawarabi Gothic';
        text-align: left;
        line-height: .8;
        margin-bottom: 1.8rem;
    }
    .office_type span {
        font-weight: bold;
        color: #E8D575;
    }
    .office_text {
        text-align: left;
        font-size: 23px;
    }
    .office_text p{
        margin: 2rem 0;
        line-height: 1.8;
    }
    .office_link {
        display: flex;
        flex-direction: column;
        margin: 5rem auto;
       /*background-color:  rgb(135, 206, 250, 0.1);*/
    }
    .office_link p {
        text-align: center;
    }
    .office_info {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        gap: 50px;
    }
    .content_links3{
        justify-content: center;
        margin: 2rem 2rem 1rem;
        padding: 0;
        list-style: none;
    }
    .content_links3 a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 220px;
        height: 80px;
        color: #111;
        font-size: 1.2rem;
        text-decoration: none;
        text-align: center;
    }
    .content_links3 p {
        font-size: .875rem;
        text-align: center;
        color: #87CEFA;
    }
    .link_icon {
        padding-top: 2px;
        width: 20px;
        height: 20px;
    }
    .border {
        border-bottom: solid 3px  rgb(135, 206, 250, 0.18); ;
        margin-top: 3rem;
    }


/** information
********************/
    #information {
        max-width: 1100px;
        margin: 1rem auto 2rem;
        object-fit: contain;
    }
    .information_title {
        font-family: 'Sawarabi Gothic';
        text-align: left;
        margin: 1rem 0;
    }
    .information_title span{
        font-size: 48px;
    }
    .news-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .news-list li {
        padding: 20px;
        border-bottom: 1px solid #ddd;
        font-size: 1rem;
    }
    .news-list li a {
        text-decoration: none;
        color: #333;
    }
    .news-list li a:hover {
        text-decoration: underline;
    }
    .news-date {
        display: inline-block;
        margin-right: 1rem;
        color: #999;
        font-size: 16px;
        white-space: nowrap;
    }
      

/** company_info
***********************/
    #company {
        max-width: 1100px;
        margin: 5rem auto ;
        object-fit: contain;
    }
    .company_title {
        font-family: 'Sawarabi Gothic';
        text-align: left;
        margin: 1rem 0;
    }
    .company_title span{
        font-size: 48px;
    }
    .company_info {
        display: flex;
        justify-content: space-between;
    }
    .nextmakes {
        max-width: 100px;
        height: 100px;
    }
    .content_item2 {
        width: 100px;
        height: 100px;
        font-size: 45px;
        color: #333;
        text-align: center;
        align-items: center;
        border: 1.6px solid #111;
        border-left: none;
    }
    /** company page **/
    
    .catch_copy4 {
        display: flex;
        font-size: 38px;
        font-family: 'Sawarabi Gothic';
        text-align: center;
        align-items: center;
        justify-content: center;
        gap: 25px;
    }
    .promise_title {
        font-size: 48px;
        font-family: 'Sawarabi Gothic';
        align-items: center;
        color: #fff;
        background-color: #87CEFA;
        border-radius: 20px;
        padding: 0 30px;
    }
    .promise {
        width: 390px;
        font-size: 36px;
        text-align: left;
        align-items: center;
        margin: 2rem auto;
        padding-left: 25px;
        border-bottom: 2px solid #87CEFA;
        color: #444;
    }
    .promise span {
        color: #87CEFA;
    }

    /** mission **/
    .mission_content {
        background-color: rgba(135, 206, 250, 0.3);
        font-family: "noto sans jp", sans-serif;
    }
    .mission {
        max-width: 1000px;
        margin: 3rem auto 0;
        padding: 2rem 3rem;
        line-height: 1.8;
    }
    .mission h2 {
        font-size: 2rem;
        margin: 2rem 0 1rem;
        color: #111;
    }
    .mission h3 {
        font-size: 1.6rem;
        margin: 1rem 0;
        color: #222;
        padding-left: 1.5rem;
    }
    .mission p {
        margin-bottom: 1.2rem;
        padding-left: 3rem;
        color: #333;
    }
    .mission ul {
        font-size: 1.2rem;
        margin: 1rem 0 1.2rem;
        padding-left: 3rem;
    }
    .mission ul span {
        color: #E8D575;
    }
    .mission ul li {
        margin-bottom: 1.2rem;
    }
    .mission .contact {
        margin-top: 2rem;
        /*font-weight: bold;*/
        color: #222;
    }
    /* mvv area */
    .mvv {
        padding: 3rem 1rem;
        max-width: 1000px;
        margin: 0 auto;
        font-family: "Sawarabi Gothic", sans-serif;
    }
    
    .mvv-inner {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    
    .mvv-block h2 {
        color: #87CEFA;
        margin: 1rem auto;
        font-size: 2rem;
        border-left: 20px solid #87CEFA;
        padding-left: 1.7rem;
        font-family: "Nunito-sans", sans-serif;
        font-weight: bold;
    }
    
    .mvv-block p {
        font-size: 2rem;
        padding-left: 2.95rem;
        color: #111;
    }
    
    .mvv-block ul {
        margin: 0 2rem;
        padding-left: 1.2rem;
    }
    
    .mvv-block ul li {
        margin-bottom: 1rem;
        line-height: 1.2;
        font-size: 1.6rem;
    }
    
  
  /** company info area 
  **********************/
    .company {
        background-color: rgba(135, 206, 250, 0.3);
        padding: 2rem 1rem;
        font-family: "Sawarabi Gothic", sans-serif;
    }
    
    .company-inner {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        gap: 2rem;
        flex-wrap: wrap;
    }
    
    .company-left {
        flex: 1;
        min-width: 300px;
    }
    
    .mission-left .logo {
        width: 75px;
        margin-bottom: 0.5rem;
    }
    
    .company-info h3 {
        font-size: 1.4rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        color: #111;
    }
    .company-info span {
        color: #E8D575;
    }
    .company-info p {
        font-size: .875rem;
        color: #222;
        line-height: 2;
        padding-left: 2.1rem;
    }
    .company-info p span2 {
        font-size: 1.2rem;
        font-weight: bold;
    }    
    .company-right {
        flex: 1;
        min-width: 300px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .company-right img {
        width: 200px;
        height: auto;
        border-radius: 5px;
    }

    /* message area */
    
    .image_president {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .image_president img {
        max-width: 380px;
        object-fit: cover;
        margin: 0 auto;
        border-radius: 10px;
    }
    .message_president {
        display: flex;
        margin: 2rem auto;
        gap: 30px;
        justify-content: center;
    }
    .message_title {
        font-size: 2rem;
        padding-left: 1.8rem;
        margin-bottom: 1.5rem;
    }
    .message_title span {
        color: #87CEFA;
    }
    .message_description {
        max-width: 850px;
        padding: 10px 30px;
        align-items: center;
    }
    .message_description p {
        margin-bottom: 1.5rem;
        line-height: 2;
    }
    .signature {
        text-align: end;
        padding-right: 2rem;
        padding-bottom: 2rem;
    }
    .signature span {
        font-size: 1.6rem;
    }

/** recruit
********************/
    .recruit {
        background-color:  rgb(135, 206, 250, 0.4);
        padding: 50px;
    }
    .recruit_inner {
        max-width: 1100px;
        background-color: #fefefe;
        border-radius: 50px;
        padding: 1rem 5rem 3rem;
        margin: auto;
    }
    .recruit_parts {
        text-align: center;
        margin: 3rem auto;
    }
    .recruit_inner h2 {
        color: #031352;
        text-align: center;
        font-size: 38px;
        margin: 2rem 0;
    }
    
    .recruit_head {
        display: flex;
        justify-content: center;
        text-align: center;
        padding: 2rem 0;
    }
    .recruit_head span {
        display: flex;
        font-size: 40px;
        color: #111;
        font-family: 'Sawarabi Gothic' , sans-serif;
        align-items: center;
        padding-left: 30px;
    }
    .recruit_inner p {
        font-size: 16px;
        padding: .875rem 2rem;
        color: #333;
    }
    .recruit-layout {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 30px;
        margin: 0 auto 2rem;
    }
    .recruit-box {
        background-color: #fefefe;
        padding: 15px;
        align-items: center;
        margin: 0 auto;
    }
    .recruit-box color {
        color: #87CEFA;
    }
    .recruit-image {
        width: 100px;
        height: 100px;
        object-fit: cover;
        display: block;
        margin: 10px auto;
        border-radius: 10px;
    }
    .recruit-box h3 {
        margin: 10px 0 5px;
        font-size: 18px;
        color: #333;
        align-items: center;
        text-align: center;
    }
    .recruit_content {
        display: flex;
        align-items: stretch;
        max-width: 1000px;
        justify-content: center;
        margin: 0 auto;
        gap: 10px;
    }
    .recruit_content2 {
        display: flex;
        align-items: stretch;
        max-width: 1000px;
        justify-content: center;
        margin: 0 auto;
        flex-direction: row-reverse;
        gap: 10px;
    }
    .recruit_container {
        display: flex;
        flex-direction: column;
    }
    .recruit_text {
        text-align: left;
        margin: auto;
    }
    .recruit_text p {
        line-height: 1.6;
    }
    .recruit_image {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .recruit_image img {
        max-width: 300px;
        object-fit: cover;
        margin: 0 auto;
    }
    .abilities-layout {
        display: flex;
        margin: 3rem auto;
        justify-content: space-around;
        gap: 10px;
    }
    .abilities-box {
        width: 180px;
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        background-color: #87CEFA;
    }
    .abilities-box h3 {
        font-size: 36px;
        margin: 0;
        color: #fff;
        text-shadow: 4px 4px 4px rgba(128, 128, 128, 1);
    }


/** faq
********************/
    /* toc */
    
    .toc-001 {
        margin-bottom: 30px;
        padding: 1em 1em 1em 2em;
        border: 1px solid #999;
        background-color: #eee;
        color: #111;
        max-width: 900px;
        margin: 0 auto;
    }
    .toc-001 div {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 5px 0;
    }
    .toc-001 label::after {
        margin-left: 5px;
        font-size: .8em;
        color: #166c9d;
        content: "[開く]";
        cursor: pointer;
    }
    .toc-001:has(:checked) label::after {
        content: "[閉じる]";
    }
    .toc-001 input {
        display: none;
    }
    .toc-001 ol {
        list-style-type: decimal;
        margin: 0;
        padding: 0 1.2em;
        overflow: hidden;
    }
    .toc-001 > ol {
        height: 0;
    }
    .toc-001:has(:checked) > ol {
        height: auto;
    }
    .toc-001 ol ol {
        margin-top: 5px;
    }
    .toc-001 li {
        padding: 5px 0;
    }
    .toc-001 a {
        color: #111;
    }

    .question_type {
        font-size: 32px;
        font-family: 'Sawarabi Gothic';
        text-align: left;
        line-height: 1.6;
        margin: 2rem auto;
    }
    .question_type span {
        font-size: 64px;
    }


    /* faq_area */
    .faq_wrap {
        box-sizing: content-box;
        max-width: 1000px;
        margin: 0 auto;
    }
    .faq_area {
        position: relative;
        z-index: 1;
        padding-top: 60px;
        padding-bottom: 70px;
    }
    .faq_area__list {
        margin-top: 32px;
    }
    .faq_area__list div {
        border-top: 2px solid #eee;
        border-bottom: 2px solid #eee;
    }
    .faq_area__list div:not(:first-child) {
        margin-top: -2px;
    }
    .faq_area__list dt, .faq_area__list dd {
        position: relative;
        padding: 23px 35px;
        font-size: 1rem;
    }
    .faq_area__list dt::before, .faq_area__list dd::before {
        content: "";
        position: absolute;
        top: 28px;
        left: 0;
        font-size: large;	
    }
    .faq_area__list dt {
        display: flex;
        align-items: center;
        min-height: 60px;
        cursor: pointer;
    }
    .faq_area__list dt[aria-expanded=true] i::after {
        opacity: 0;
    }
    .faq_area__list dt::before {
        content: "Q";
        font-family: "Bangers" ,system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 25px;
        font-weight: 500; 
        color: #c00;  
    }
    .faq_area__list dt i {
        position: absolute;
        top: 50%;
        right: 30px;
        width: 20px;
        height: 20px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .faq_area__list dt i::before, .faq_area__list dt i::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 100%;
        height: 2px;
        background-color: #c00;
        transition: .3s ease;
    }
    .faq_area__list dt i::before {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .faq_area__list dt i::after {
        -webkit-transform: translateY(-50%) rotate(90deg);
        transform: translateY(-50%) rotate(90deg);
    }
    .faq_area__list dd {
        display: none;	
    }
    .faq_area__list dd::before {
        content: "A";
        color: #87CEFA;
        font-family: "Bangers" ,system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 25px;
        font-weight: 500;
    }
    .faq_bottom {
    text-align: center;
    }
    .faq_subtitle {    
        margin: 0 auto ;   
        font-size: 1rem;    
    }

/** privacypolicy
********************/
    .pp_header {
    display: flex;
    min-width: 900px;
    gap: 30px;
    justify-content: left;
    align-items: center;
    padding-left: 2rem;
    }
    .pp_title {
        font-family: 'noto sans jp';
        text-align: left;
        font-size: 24px;
        padding: 1.5rem;
    }
    .pp_title span{
        font-size: 26.3px;
        margin: 0 auto;
    }
    .pp_text {
        max-width: 900px;
        margin: 2rem auto;
        padding-left: 2rem;
    }
    .pp_text p {
        color: #111;
        line-height: 2;
        text-align: left;
        margin-bottom: 1.6rem;
    }
    .pp_text span {
        font-size: 1.6rem;
    }
    ol.numbered_list {
        list-style: decimal;
        margin-left: 3rem;
    }

/** Contact 
*******************/
    .form-text {
        max-width: fit-content;
        color: #333;
        text-align: left;
        line-height: 2.5;
        margin: 3rem auto;
    }
    .form-text ul {
        padding-left: 1rem;
        font-size: .9rem;
    }
    .form-text li {
        padding-left: .5rem;
        list-style-type: decimal;
    }

    /** contact form **/    
    form {
        width: 70%;
        margin: 0 auto;
    }
    .form-row {
        display: flex;
        align-items: center;
        padding: 20px;
        border-bottom: 2px solid #f2f4f5;
    }
    .form-row:last-child {
        border-bottom: none;
    }
    .form-label {
        display: flex;
        align-items: center;
        width: 280px;
    }
    .form-label label {
        font-weight: bold;
    }
    .form-label span {
        margin-left: 10px;
        padding: 2px 6px;
        border-radius: 5px;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        background-color: red;
    }
    
    /* form parts design */
    input, textarea {
        background-color: #f2f4f5;
        border: none;
        border-radius: 3px;
        padding: 15px 20px;
        font-size: 16px;
        color: #333;
        flex-grow: 1;
    }
    input::placeholder,
    textarea::placeholder {
        color: #999;
        font-size: 14px;
    }
    select {
        background-color: #f2f4f5;
        border: none;
        border-radius: 3px;
        padding: 15px 20px;
        font-size: 16px;
        color: #333;
    }
    button {
        cursor: pointer;
        margin-top: 30px;
        padding: 15px 45px;
        border: none;
        border-radius: 3px;
        color: #fff;
        font-weight: bold;
        background-color: rgb(23, 38, 63, 1);
    }
    .example {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
    }
    

/** footer 
********************/
    footer {
        background-color: #87CEFA;
        color: #fff;
        padding: 40px 10%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        min-width: 900px;
        /*margin-top: 5rem;*/
    }
    .footer_left, .footer_right {
        flex: 1;
        min-width: 450px;
        align-items: center;
    }
    .footer_inner {
        display: flex;
    }
    
    .footer_logo {
        display: block;
        width: 70px;
        height: auto;
        margin: 0 1rem 2rem 0;
    }
    .footer_yago {
        display: flex;
        font-size: 1.6rem;
        letter-spacing: .8px;
        color: #fff;
        font-family: "Sawarabi Gothic";
        padding-top: 1rem;
    }
    .footer_links {
        margin-bottom: 2rem;
    }
    .footer_links a{
        font-size: .875rem;
        color: #fff;
    }

    .footer_text {
        padding: 1rem 0;
    }
    .footer_text h3{
        font-size: 1.6rem;
    }
    .footer_text p{
        font-size: 1rem;
    }
    
    .footer_bottom {
        width: 100%;
        text-align: center;
    }
    .footer_bottom a {
        color: #fff;
        font-size: 1.4rem;
        margin: 0 1.6rem 2rem;
        text-decoration: none;
    }
    .copyright {
        font-size: .875rem;
        padding: 1rem 0 .875rem;
    }

    /* btn */
    .content_item:hover {
        color: #fff;
        background-color: #87CEFA;
        border: 1.6px solid #87CEFA;
        border-left: none;
        border-radius: 10px;
    }
    .content_item2:hover {
        color: #fff;
        background-color: #87CEFA;
        border: 1.6px solid #87CEFA;
        border-left: none;
        border-radius: 10px;
    }
    
    .footer_bottom a:hover{
        color: #E8D575;
    }

/** header change
**********************/
    .header_change{
        width: 100%;
        position: fixed;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        min-width: 900px;
        position: fixed;
        top: -110px;
        transition: .5s;
        z-index: 99;
    }
    .header_change.show{
        top: 0;
        left: 0;

    }
}