@charset "utf-8";


/* 基本設定 */
html {  scroll-behavior: smooth;}
body { font-family: 'Noto Sans JP', sans-serif; margin: 0; padding: 0; background-color: #7bb1d6}
.red { color: #F60419;}
a { color: #000;}
h2 { width: fit-content; margin-bottom: 1em;}
footer { text-align: center; padding-bottom: 10px;}
img { max-width: 100%;}
li { list-style: none;}
/* コンテナの設定 */
.container { max-width: 1200px; margin: 0 auto; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 100%; padding: 10px;}


section { margin: 5em 0;}
section .inner { max-width: 850px; margin: 0 auto;}

.map { position: relative; width: 100%; height: 500px; max-width: 100%; margin: 0 auto;}
.map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/* title-sec */
.titel-sec .inner{ text-align: center; display: flex; justify-content: space-around; align-items: center; font-family: tsukushimarugothic, meiryo, "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif; flex-wrap: wrap;}
.titel-sec .inner p{ font-size: 18px; font-weight: bold;  color: red;}

@media (max-width: 768px) { 
 .titel-sec { margin: 2em 0;}
}
/* main-image */
.main-image .inner { position: relative;}
.main-image .inner img { width: 100%; box-shadow: 5px 5px 9px rgba(0, 0, 0, 0.5); border-radius: 20px;}
.main-image .cat-name {  position: absolute; top: 40%; left: 60%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); color: #fff;}


/* notice-sec */
.notice-sec .notice-box { font-family: "ｍｓ ｐ明朝", "ms pmincho", "ヒラギノ明朝 pro w3", "hiragino mincho pro", serif; border: none; background-color: #ffffff; padding: 30px; text-align: center; margin: 0 auto; border: 3px solid rgb(61 155 233);}
.notice-sec .notice-box h4 { font-size: 22px; color: #1E90FF; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1.5px; }
.notice-sec .notice-box p { font-size: 18px; color: #333; margin-bottom: 15px;}
.notice-sec .notice-box p:nth-child(2) { font-size: 23px; font-weight: bold;}
.notice-sec .notice-box p:nth-child(3) { font-size: 16px;}

/* parking-info */
.parking-info-text { line-height: 2.8em;}

/* button-sec */
.button-sec { text-align: center; padding: 40px 20px;}
.flat-button {  display: inline-block; padding: 35px 60px; font-size: 18px; color: #fff; background-color: #6298aa; text-decoration: none; border: none; transition: background-color 0.3s ease;}
.flat-button:hover { background-color: #2980b9;}
.flat-button:active { background-color: #1C6D9E;}

/* contact-sec */
.contact-sec .contact-info { padding: 30px 0px;}
.contact-sec .contact-info h4 {font-size: 3em; margin-bottom: 10px; font-weight: bold;}
.contact-sec .contact-info p {font-size: 16px; margin: 5px 0;}
.contact-sec .contact-info p[style*="color: red;"] {color: red; font-size: 14px;}
.contact-sec .flex { display: flex; flex-wrap: wrap; align-items: baseline;}
.contact-sec .line-button { position: relative; bottom: 10px;}

/* company-sec */
.company-sec .company-table { width: 100%; border-collapse: collapse; margin: 20px 0; border: none;}
.company-sec .company-table th, .company-table td { padding: 8px; text-align: left; border: none;}
.company-sec .company-table th {  font-weight: bold; border: none;}

/* flow-sec  */
.flow-sec h3 { font-size: 20px; color: #333; margin-top: 20px; margin-bottom: 10px; position: relative; padding-left: 70px;}
.flow-sec h3::before {  content: ''; position: absolute; top: -10px; left: 0; width: 50px; height: 50px; background-image: url(../images/allow-green.jpg); background-size: contain; background-position: center;}
.flow-sec .allow { padding: 40px 0px;}
.flow-sec .allow img { width: 50px; margin-left: 9em;}
.flow-sec p { font-size: 16px; color: #555; line-height: 2.5; margin-bottom: 10px; padding-left: 70px;}
.flow-sec ul {  margin-bottom: 20px; list-style-type: disc; padding-left: 70px;}
.flow-sec ul li { font-size: 16px; color: #555; margin-bottom: 10px;}


/* owner-sec */
.owner-sec .owner-alc { text-align: center;}

/* qa */
.faq { margin: 20px;}
.question p { font-size: 1.5em; margin-bottom: 10px;}
.answer { margin-bottom: 2em;}
.answer p { font-size: 16px; line-height: 2;  position: relative; padding-left: 30px;}
.answer p::before {  content: "A."; position: absolute; left: 0px; font-size: 1.5em; top: -10px;}



/* header */
header {display: flex; justify-content: space-between; align-items: center;  background-color: #fff; height: 100px;}
header .logo img { height: auto;}
header .contact-info { text-align: right; font-size: 14px; display: flex; align-items: baseline; gap: 2em; flex-wrap: wrap;}
header .phone { color: red; font-size: clamp(16px, 4vw, 24px);; font-weight: bold; letter-spacing: 4px; text-wrap: nowrap;}
header .contact-info .large-text { font-size: 1.2em;}

/* ===== 2025.05.09 追記 ===== */
header .contact-info {
    display:grid;
    grid-template:
        ".    mail" auto
        "time  tel" 1fr / auto 1fr;
    gap:0 2em;

    & > p:not([class]) { grid-area:time;}
    & > p.phone { grid-area:tel;}
    & > a[href^="mailto:"] {
        grid-area:mail;
        font-size:16px;
        letter-spacing:0;
        font-weight:normal;
        color:inherit;
        text-decoration:none;
    }
    & > a[href^="mailto:"]:before {
        content:"";
        display:inline-block;
        margin-right:0.25em;
        width:1em;
        height:1lh;
        background:url(../images/icon_mail.svg) no-repeat center / contain;
        vertical-align:bottom;
    }
}


@media (max-width: 768px) {
    header { justify-content: flex-start;}
    header .contact-info {flex-direction: column-reverse; align-items: end; gap: 0em;}
    header .logo img { width: 100px;}

    /* ===== 2025.05.09 追記 ===== */
    header .contact-info {
        grid-template:
            "mail" auto
            "tel" auto
            "time" 1fr / auto;
    }
    header .contact-info a[href^="mailto:"] { font-size:12px;}
}

.hamburger {display: none; cursor: pointer; flex-direction: column; justify-content: space-between; width: 25px; height: 18px; z-index: 200;}
.hamburger span {display: block; width: 100%; height: 3px; background-color: #7e766a; transition: 0.3s;}
nav {background-color: #fff; z-index: 10;}
nav ul { list-style: none; display: flex; justify-content: space-evenly; padding: 0; background-color: #eee8d8; border-radius: 20px; color: #a4a19a;}
nav ul li {margin: 0 15px;}
nav ul li a {text-decoration: none; font-size: 16px; color: #333; padding: 10px 0px; display: block; transition: color 0.3s ease, background-color 0.3s ease;}
nav ul li a:hover {color: #000;}
nav.open {display: block;}

@media (max-width: 768px) {
    .hamburger { width: 50px; display: flex; background: #e6deca; height: 50px; padding: 14px; border-radius: 50px; position: absolute; z-index: 30; right: 1em;
    }
    nav { display: none; position: absolute; top: 0px; left: 0; width: 100%; background-color: #fff; flex-direction: column; align-items: center; padding: 20px;
    }
    nav.open {display: flex;}
    nav ul { margin: 10px 0; flex-direction: column; text-align: center; background: #fff;
    }
    nav ul li { margin: 10px 0; border-bottom: 1px solid gray; width: 180px;
    }
    .hamburger.active span:nth-child(1) {transform: translateY(11px) rotate(45deg);}
    .hamburger.active span:nth-child(2) {opacity: 0;}
    .hamburger.active span:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}
}





.app-sec h3 { padding-left: 10px; margin-bottom: 1em; margin-top: 2em !important;}
/* 
.app-sec form { display: flex; flex-direction: column; margin-top: 3em;}
.app-sec h3 { border-left: 1px solid #333; padding-left: 10px; margin-bottom: 1em; margin-top: 1em;}
.app-sec h3 span { font-size: 0.7em;}
.app-sec label { font-size: 16px; margin-bottom: 5px; color: #333;}
.app-sec label span { color: #ff0000; font-weight: bold;}
.app-sec input,textarea,select { padding: 10px; font-size: 16px; margin-bottom: 20px; border: 1px solid #000; width: 100%; box-sizing: border-box;}
.app-sec input:hover { background-color: #ddd;}
.app-sec .radio-group { display: flex; gap: 20px; margin-bottom: 20px;}
.app-sec input[type="radio"] { display: none;}
.app-sec input[type="radio"]+label { position: relative; padding-left: 30px; cursor: pointer; font-size: 16px; color: #333;}
.app-sec input[type="radio"]+label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid #333; border-radius: 50%; background-color: white;}
.app-sec input[type="radio"]:checked+label::before { background-color: #333; box-shadow: inset 0 0 0 4px white;}
.app-sec input[type="radio"]:focus+label::before { outline: 2px solid #333;}
.app-sec button { background-color: #757575; color: white; padding: 10px 50px; border: none; border-radius: 15px; font-size: 16px; cursor: pointer; width: fit-content; margin: 0 auto;}
.app-sec button:hover { background-color: #757575;} 
*/





/* レスポンシブ */
.pc{display: inherit;}
.tb{display: none;}
.sm{display: none;}

@media only screen and (max-width:820px){
    .pc {display:none;}
    .tb {display:block;}
    .sm {display:none;}
}
@media only screen and (max-width:468px){
    body {font-size: 15px; min-width: 375px;}
    .pc {display:none;}
    .tb {display:none;}
    .sm {display:block;}
}