@charset "UTF-8";
html{
    scroll-behavior: smooth; 
}
body {
    font-family: "Yu Gothic Medium", "Yu Gothic", "YuGothic", sans-serif;
    font-weight: 500; 
    color: #333; 
}
.b-shadow{
    box-shadow: 0px 3px 12px #999;
}
@media (max-width:899px){
   .b-shadow{
    box-shadow: none;
}
}
.container{
    width:620px;
    margin:0 auto;
}
@media (min-width:600px) and (max-width:899px){
    .container{
    width:70%;
}
}
@media (max-width:599px){
       .container{
    width:100%;
}
}

.ybg{
    background:#eabe2a;
}
.merit{
    width:60%;
    margin-inline:auto;
}
.nearShop{
    width:90%;
    margin-inline: auto;
    border:solid 4px #000;
    background:#fff;
    padding:2em;
    border-radius:20px;
}
        .nearShop .status-msg {
            font-weight: bold;
            text-align: center;
        }
        .nearShop .storeName {
            font-size: 1.4em;
            font-weight: bold;
            margin-bottom: 0.5em;
            color: #000;
        }
        .nearShop .storeAddress, 
        .nearShop .storeTel {
            margin-bottom: 0.5em;
            font-size: 1rem;
        }
        .nearShop a {
            color: #333;
            font-size:1.3rem;
        }
        #faq{
            background:#f5e0c6;
        }
        .inner{
            width:90%;
            margin-inline:auto;
        }
        .title1{
            font-size:1.8rem;
            letter-spacing: 0.1em;
        }

        .details {
    border-bottom: 1px solid #ccc;
    transition: all 0.3s;
}

/* 質問部分（クリックエリア） */
.details__summary {
    cursor: pointer;
    padding: 1em 2em 1em; /* 右側に矢印のスペースを空ける */
    list-style: none; /* デフォルトの三角を消す */
    font-weight: bold;
    position: relative;
    background:#eabe2a;
}

/* デフォルトの三角を消す（Chrome用対応） */
.details__summary::-webkit-details-marker {
    display: none;
}

.details__summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px; /* 右端からの位置 */
    transform: translateY(-50%); /* 上下中央揃え */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6px 0 6px;
    border-color: #666 transparent transparent transparent; /* 矢印の色 */
    
    transition: transform 0.3s ease; /* 回転のアニメーション */
}

/* 開いている時は矢印を回転させる */
.details[open] .details__summary::after {
    /* 元の位置調整(translateY)を維持しつつ、180度回転を追加 */
    transform: translateY(-50%) rotate(180deg);
    border-color: #000 transparent transparent transparent; /* 開いた時の色（任意） */
}

/* 回答部分（JSアニメーション用） */
.details__content {
    overflow: hidden;
    line-height: 1.6;
    color: #333;
    background:#fff;
    padding:1em;
}
.details__content p {
    padding-bottom: 1em;
}
.contactList{
    font-size:1.2rem;
}
.contactList dt{
    font-weight: bold;
    margin-bottom:0.5em;
}
.contactList dt span{
    font-size:0.6em;
    padding:0.1em 0.6em;
    display:inline-block;
    border-radius:100vmax;
    position:relative;
    top:-0.2em;
    margin-left:1em;
}
.required{
    background:#b60005;
    color:#fff;
}
.notRequired{
    background:#333;
    color:#fff;
}
.contactList dd{
    margin-bottom:2em;
}
.contactList dd input[type="text"],.contactList dd input[type="tel"],.contactList dd input[type="email"],textarea{
    appearance: none;
    -webkit-appearance: none;
    font-size:1.1em;
    padding:0.6em;
    border:solid 3px #000;
    width:100%;
}
.halfInput{
    width:50%!important;
    margin-bottom:0.5em;
}
input[type="submit"]{
    appearance: none;
    -webkit-appearance: none;
    background:#62c446;
    color:#fff;
    border:solid 2px #62c446;
    font-size:1.3rem;
    font-weight: bold;
    padding:1em 6em;
    
}
.sendBox{
text-align: center;
}
#footer{
    background:#eabe2a;
    padding:4em 0 8em;
}
#footer p,address{
    font-weight: bold;
}

.footerBanner{
    position:fixed;
    bottom:0;
    width:620px;
    font-weight: bold;
    text-align: center;
    background:#0066ff;
    
    font-size:1.3rem;
}
.footerBanner a{
    color:#fff;
    display: block;
    padding:1.5em 0;
}
@media (min-width:600px) and (max-width:899px){
    .footerBanner{
    width:70%;
}
}
@media (max-width:599px){
       .footerBanner{
    width:100%;
}
}