/*loading*/
#loading {
    transition: all 1s;
    background-color: #ddd;
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
}
.spinner {
    width: 200px;
    height: 200px;
}

.loaded {
    opacity: 0;
    visibility: hidden;
}

/*bar*/
#bar {
    background-color: green;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 10px;
    z-index: 10;
}

/*observe*/
.observe {
    opacity: 0;
}



/* Inter フォントおよび一般的な本文スタイルのカスタム スタイル */
body {
    font-family: 'Inter', sans-serif; 
    color: #333;
    background-color: #f8f8f8;
}

/* アンカー リンクのスムーズ スクロール */
html {
        scroll-behavior: Smooth;
}

/* オーバーレイ付きのヒーロー セクションの背景画像 */
.hero-background {
    background-image: url("../img/scene1.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    /* テキスト読みやすくするための暗いオーバーレイ */
}

/* カスタム ボタン スタイル */
.btn-primary {
    @apply inline-block px-8 py-3 bg-green-700 text-white font-semibold rounded-lg shadow-md hover:bg-green-800 transition duration-300 ease-in-out;
}

.btn-secondary {
    @apply inline-block px-8 py-3 bg-white text-green-700 font-semibold rounded-lg shadow-md border border-green-700 hover:bg-green-50 transition duration-300 ease-in-out;
}

/* カードのホバー効果 */
.card {
    @apply transform transition duration-300 ease-in-out hover:scale-105 hover:shadow-xl;
}

/* スピナーをロード中 (もう必要ありませんが、再度追加された場合の一貫性を保つためにスタイルは保持されます) */
.loader {
    border: 4px solid #f3f3f3;/* ライトグレー */
    border-top: 4px solid #3498db;/* 青 */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }




/*自作CSS(投稿や固定ページを整える用)*/

/*article(投稿)*/
.wrapper {
    max-width: 80%;
    margin: auto;
    padding: 50pX 0px 50px 0px ;
}

.article h1 {
    font-size: 3rem;
    color: green;
}


/*page(固定ページ)*/
.page h1 {
        font-size: 3rem;
    color: green;
}

/*記事に埋め込んだGoogleマップの角丸化*/
iframe[src^="https://www.google.com/maps/embed?"] {
    border-radius: 10px !important;
}


/*contactのcss*/
input[type="text"], input[type="email"], input[type="tel"], textarea {
    background: white;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    appearance: none;
    border-width: 1px;
    border-radius: 0.5rem;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: oklch(37.3% 0.034 259.733);
    line-height: 1.25;
}


input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus {
    outline-style: none;
    box-shadow: inset 0 0 0 calc(2px) var(--tw-ring-color);
    --tw-ring-color: rgba(16, 185, 129, 1);
}

/*reCAPCHA非表示*/
.grecaptcha-badge { visibility: hidden; }