body {
    /*font-family: Arial, serif;*/
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #fdfdfd;
}

header {
    background: #ffffff;
}

.logo h1 {
    font-size: 24px;
    margin: 0;
}

.hero {
	display: flex;
}

.hero img {
    width: 100%;
    max-height: 750px;
    object-fit: cover;
}


/* 全体設定 */
.css-carousel-slider2 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider2 img {
    width: 100%;
    height: auto;
    vertical-align: top;
    max-height: 750px;
    object-fit: cover;
}

/* スライド設定 */
.css-carousel-slider2 .slide-wrap {
    width: 200%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider2 10s infinite;
    animation-delay: 2s;
}
.css-carousel-slider2 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main2 10s infinite;
    animation-delay: 2s;
}
.css-carousel-slider2 .slide {
    width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider2 {
    0% { transform: translateX(0); }

    40% { transform: translateX(calc(1 / 2 * -100%)); }
    50% { transform: translateX(calc(1 / 2 * -100%)); }

    90% { transform: translateX(calc(2 / 2 * -100%)); }
    100% { transform: translateX(calc(2 / 2 * -100%)); }
}

@keyframes css-carousel-slider-main2 {
    0% { transform: translateX(100%); }
    50% { transform: translateX(100%); }
    90% { transform: translateX(0%);}
}



section {
    background-color: #f8f8f8;
    padding: 40px 20px;
    text-align: center;
}
.section-title {
    background-color: #c09750;
    color: white;
    display: inline-block;
    padding: 10px 100px;
    border-radius: 20px;
    margin: 20px 0;
    font-size: 20px;
    font-weight: bold;
}

h2 {
font: normal normal normal 80px/0px Optima;
letter-spacing: 8px;
color: #A0A0A0;
text-transform: uppercase;
opacity: 1;
}
 h3 {
text-align: center;
/*font: normal normal bold 32px/67px serif;*/
font: normal normal bold 32px/67px sans-serif;
letter-spacing: 0px;
color: #2C2C2C;
opacity: 1;
        }

table {
    width: 60%;
    margin: 0 auto;
    border-collapse: collapse;
}

table th, table td {
    padding: 10px;
    border: 1px solid #ddd;
}

.reserve {
    background: #f8f0e6;
}

.contact p {
    font-size: 18px;
    margin: 10px 0;
}

.map img {
    width: 100%;
    max-width: 500px;
}

p.def{
	text-align: left;
	line-height: 150%;
	font-size: .8em;
}
	@media (max-width: 768px) {
		p.def{
			font-size: 1em;	
		}
	}

.explanation{
	width:60%;
	margin:0 auto 50px;
	position:relative;
}
	@media (max-width: 768px) {
		.explanation{
			width:100%;	
		}
	}


/*
footer {
    background: #333;
    color: white;
    padding: 10px;
}
*/

.about{
        background: url(../images/price-bg.png) no-repeat center center / cover;
    padding: 60px 20px;
}
.about-content img {
    width: 65%;
    margin: 10px;
}
.about-content p {
    width: 60%;
    margin: 10px;
    text-align: left;
    display: inline-block;
}

.service-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 20px;
}
.service-container  h3{
    margin-top: -20px;
}
.service-box {
    display: flex;
    align-items: center;
    width: 60%;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    gap: 20px;
    position: relative;
}
.service-box img {
    width: 45%;
    border-radius: 10px;
    display: block;
    object-fit: cover;
}
.service-box h4 {
    font-size: 14px;
    color: #b38e63;
    margin-bottom: 5px;
    text-align: left;
}
.service-box h3 {
    font-size: 22px;
    color: #000;
    margin-bottom: 10px;
    text-align: left;
    margin-top: 5px;
}
.service-box p {
    font-size: 16px;
    color: #000;
    margin-top: 20px;
    text-align: left;
}
.service-box-text{
    margin-left: 20px;
}
.service-box2 {
    display: flex;
    align-items: center;
    width: 60%;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    gap: 20px;
    position: relative;
    flex-direction: row-reverse;
}
.service-box2 img.stamp {
    width: 45%;
    border-radius: 10px;
    display: block;
    object-fit: cover;
}
.service-box2 h4 {
    font-size: 14px;
    color: #b38e63;
    margin-bottom: 5px;
    text-align: left;
}
.service-box2 h3 {
    font-size: 22px;
    color: #000;
    margin-bottom: 10px;
    text-align: left;
    margin-top: 5px;
}
.service-box2 p {
    font-size: 16px;
    color: #444;
    margin-top: 20px;
    text-align: left;
}
.service-box-text{
    margin-left: 20px;
}
.tel-button {
    display: inline-block;
    color: #000;

    border-radius: 5px;
    margin-top: 10px;
    font-size: 25px;
}
.paw-print {
        position: absolute;
    top: -30px;  /* 適切な位置に配置 */
    right: 10px; /* 外にはみ出さないように調整 */
    width: 80px;
    max-width: 100px;
    z-index: 10;
}
.paw-print2 {
        position: absolute;
    top: 270px;  /* 適切な位置に配置 */
    right: 400px; /* 外にはみ出さないように調整 */
    width: 80px;
    max-width: 100px;
    z-index: 10;
}
.paw-print3 {
    position: absolute;
    top: -178px;
    right: -116px;
    width: 215px;
    max-width: 400px;
    z-index: 10;
    /* left: 117px;*/
}
	@media (max-width: 768px) {
		.paw-print3 {
	        position: absolute;
	        top: -268px;
	        right: 0px;
	        width: 138px;
	        max-width: 400px;
	        z-index: 10;
	        /* left: 117px;*/
		}
	}

.paw-print4 {
    position: absolute;
    top: 244px;
    /* right: 0; */
    width: 187px;
    max-width: 400px;
    z-index: 10;
    left: -155px;
}
	@media (max-width: 768px) {
		.paw-print4 {
	        position: absolute;
	        top: 520px;
	        /* right: 0; */
	        width: 120px;
	        max-width: 400px;
	        z-index: 10;
	        left: -12px;
		}
	}

.paw-print5 {
    position: absolute;
    top: 81px;
    right: -53px;
    width: 231px;
    max-width: 400px;
    z-index: 10;
    /* left: -155px;*/
}
	@media (max-width: 768px) {
		.paw-print5 {
			position: absolute;
	        top: 67px;
	        right: -11px;
	        width: 156px;
	        max-width: 400px;
	        z-index: 10;
	        /* left: -12px;*/
		}
	}

.service-content{
	position: relative;
}


.price-section {
	background: url('img/price-bg.png') no-repeat center center/cover;
	padding: 60px 20px;
}
.pricing-table {
    width: 60%;
    margin: 20px auto;
    border-collapse: collapse;
}
.pricing-table th, .pricing-table td {
	/*
    padding: 12px;
    border: 1px solid #ddd;
    text-align: center;
	*/
	padding: 12px 12px 12px 30px;
	border: 1px solid #ddd;
	text-align: left;
}
	@media (max-width: 767px) {
		.pricing-table{
			margin: 0 auto;
		}
		.pricing-table th, .pricing-table td {
			/*
		    padding: 12px;
		    border: 1px solid #ddd;
		    text-align: center;
			*/
			padding: 12px;
			border: 1px solid #ddd;
			text-align: left;
		}
	}

.pricing-table th {
    background-color: #c09750;
    color: white;
}
.reservation-container {
display: flex;
justify-content: center;
gap: 50px;
background-color: #f8f0e6;
padding: 20px;
flex-wrap: wrap;
}
.reservation-box {
width: 20%;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.reservation-box img {
width: 150px;
}
.reservation-box img.icon {
width: 100px;
}
.reservation-box p {
margin: 10px 0;
font-size: 18px;
}
@media (max-width: 768px) {
	.reservation-container {
	    flex-direction: column;
	    align-items: center;
	}
	.reservation-box {
	    width: 100%;
	}
}
        .info-container {
            width: 50%;
            margin: 40px auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            text-align: left;
        }
        .info-title {
            font-size: 28px;
            color: rgba(0, 0, 0, 0.3);
            text-align: center;
            margin-bottom: 20px;
        }
        .info-table {
            width: 100%;
            border-collapse: collapse;
        }
        .info-table th, .info-table td {
            padding: 12px;
            border-bottom: 1px solid #ddd;
            text-align: left;
        }
        .info-table th {
            width: 30%;
            font-weight: bold;
        }
        .map-container {
            margin: 40px auto;
            width: 80%;
            max-width: 600px;
        }
        iframe {
            width: 100%;
            height: 600px;
            border: 0;
        }



@media (max-width: 768px) {
    h2 {
    font: normal normal normal 48px/0px Optima;
    letter-spacing: 4.8px;
    }
     h3 {
    font: normal normal bold 18px/44px sans-serif;
            }
	.about-content img {
	    width: 100%;
	    margin: 10px;
	}
	.about-content p {
	    width: 90%;
	    font: normal normal bold 16px/32px sans-serif;
	    margin: 10px;
	    text-align: left;
	    display: inline-block;
	}
	.service-content p {
	    width: 90%;
	    font: normal normal bold 16px/32px sans-serif;
	    margin: 10px;
	    text-align: left;
	    display: inline-block;
	}
	
	
	.service-box {
	    flex-direction: column;
	    align-items: center;
	    text-align: center;
	    width: 100%;
	}
	
	.service-box img:first-child {
	    width: 100%;
	}
	
	.service-box2 {
	    flex-direction: column;
	    align-items: center;
	    text-align: center;
	    width: 100%;
	}
	
	.service-box2 img:first-child {
	    width: 100%;
	}
	
	.service-content {
	    width: 100%;
	    text-align: center;
	    margin-top: 10px;
	    
	}
	table{
	    width: 100%;
	}
	.table_overflow{
		overflow-x: scroll;
	}
	.table_overflow_in{
	    white-space: nowrap;
	}
	.pricing-table{
	    width: 100%;
	    font-size: 13px;
	}
	.info-table {
		font-size: 13px;
	}
	.info-container{
	    width: 100%;
	    padding: 15px;
	}
	iframe {
	    height: 300px;
	}
}

/* スマホ（768px以下）では <br> を表示 */
@media (max-width: 767px) {
    .sp-only { display: inline; }
}

/* PC（768px以上）では <br> を削除 */
@media (min-width: 768px) {
    .sp-only { display: none; }
}

/* PCの時（768px以上） → <br>を表示 */
@media (min-width: 768px) {
    .pc-only { display: inline; } /* スマホ用の改行を非表示 */
}

/* スマホの時（768px以下） → <br>を表示 */
@media (max-width: 767px) {
    .pc-only { display: none; } /* PC用の改行を非表示 */
}


/* 注意事項リスト */
.pricing-table .notes-group {
  margin: 0;
  padding: 0;
  list-style: none;           /* 親の☆見出しは箇条書きにしない */
}

.pricing-table .notes-group > li {
  margin: 0 0 .8em 0;
}

.pricing-table .notes-group > li > strong {
  display: block;
  font-weight: 700;
  margin-bottom: .25em;
  margin-top: 1.5em;
}

/* 子リスト（実際の箇条書き） */
.pricing-table .notes-group ul {
  margin: .25em 0 .8em 1.4em;
  padding: 0;
  list-style: disc !important; /* テーマのリセット対策で強制的に点を表示 */
}

.pricing-table .notes-group ul li {
  margin: .2em 0;
}

/* 余白微調整（最後だけ下マージンなし） */
.pricing-table .notes-group > li:last-child { margin-bottom: 0; }