@charset "UTF-8"; /* 文字コード設定 */
/*
Theme Name:コインランドリーホワイトピア可児広見
Description:コインランドリーホワイトピア可児広見様用のテンプレートです。
Version:1.0
Author:S.Iida
*/

/* 全体 */
* {
	margin: 0; /* すべての要素のマージンをリセット */
	padding: 0; /* すべての要素のパディングをリセット */
	box-sizing: border-box; /* パディングとボーダーを含めたサイズ指定 */
}
body{
	font-family: 'Kozuka Gothic Pr6N', 'ヒラギノ角ゴ ProN', 'Noto Sans JP', sans-serif; /* フォント指定 */
	-webkit-font-smoothing: antialiased; /* サファリのアンチエイリアス効果 */
	background: #ffff; /* 背景色を白に */
	color: #030303; /* テキスト色をほぼ黒に */
	line-height: 1.5; /* 行間を1.5に */
}
img, iframe {
    max-width: 390px; /* 画像やiframeの最大幅を390pxに */
	width: 100%; /* 幅を親要素に合わせる */
    height: auto; /* 縦横比を保持して高さを自動調整 */
    display: block; /* インライン要素による余白を防止 */
}
/* 全体 */

/* コンテナ要素 */
.container {
	display: grid; /* グリッドレイアウトを使用 */
    grid-template-areas:
        "slide"
        "main-title"
        "main-info"
        "menu"
        "map"
        "line"
        "contact"; /* 各セクションのグリッドエリアを定義 */
    grid-template-rows: auto auto auto auto auto auto auto auto auto; /* 各行の高さを自動調整 */
    max-width: 100%; /* モバイルファースト用、最大幅を100%に */
	width: 100%; /* 幅を親要素に合わせる */
    margin: 0 auto; /* 中央寄せ */
}

.emphasis { /* 各項目タイトルのフォントサイズ統一 */
	font-size: 2rem; /* フォントサイズを2remに */
	font-weight: bold; /* フォントを太字に */
}
/* コンテナ要素 */

/* ヘッダー */
header{
	display: flex; /* フレックスボックスレイアウトを使用 */
	justify-content: center; /* 水平方向に中央揃え */
	align-items: center; /* 垂直方向に中央揃え */
	width: 100%; /* 幅を親要素に合わせる */
	height: auto; /* 高さを内容に合わせる */
}
header button {
	opacity: .6; /* ボタンの初期透明度を0.6に */
	transition: opacity .2s; /* 透明度変化に0.2秒のトランジションを設定 */
	border: none; /* ボーダーなし */
	background: none; /* 背景なし */
}
header button:focus{
	outline: none; /* フォーカス時のアウトラインを消す */
}
header button:hover{
	opacity: 1; /* ホバー時に透明度を1に */
}
header button img { /* ボタン内の画像 */
	display: block; /* インライン要素として表示しない */
	padding: 3%; /* 画像の周りに3%のパディングを追加 */
}

/* メインスライド */
#slide {
    position: relative; /* スライド内での要素の配置を相対位置に */
    overflow: hidden; /* 親要素からはみ出すコンテンツを隠す */
    width: 100%; /* 親要素の幅に合わせる */
    height: auto; /* 高さは自動調整 */
}

#slide ul {
    display: flex; /* 横並びで配置 */
	list-style: none; /* リストのスタイルを解除 */
	transition: none;	/* JavaScriptで制御するため、CSSの遷移を無効に */
}

#slide li {
    flex: 0 0 100%; /* 各スライドを画面幅に合わせる */
    width: 100%; /* リスト全体の幅を画面幅に合わせる */
}

#slide li img {
	max-width: 100%; /* 画像が親要素にフィット */
    width: 100%; /* 各画像をスライド幅に合わせる */
    height: auto; /* 縦横比を保持 */
	object-fit: cover; /* 画像がスライド内で枠を埋めるように切り取る */
}

#prevBtn, #nextBtn {
    position: absolute; /* 絶対配置 */
    top: 50%; /* 縦方向の中央に配置 */
    transform: translateY(-50%); /* 真ん中にぴったり合わせる */
    z-index: 10; /* スライドの上に表示 */
    background: rgba(0, 0, 0, 0.3); /* 半透明の背景 */
    border: none; /* ボーダーなし */
    padding: 5px; /* 余白を5pxに */
    cursor: pointer; /* カーソルをポインターに変更 */
}
#prevBtn {
    left: 1%; /* 左から1%空けて配置 */
}
#nextBtn {
    right: 1%; /* 右から1%空けて配置 */
}
#slide button:hover{
	opacity: 1; /* ホバー時に透明度を1に */
}

/* メインテキスト */
.main-title{
	text-align: center; /* テキストを中央揃え */
	color: #F95115; /* オレンジ色の文字 */
	font-size: 1.8rem; /* フォントサイズを1.8remに */
	font-weight: bold; /* 太字 */
	text-shadow: 0 6px 5px #ccc; /* テキストに影を付ける */
	margin: 5%; /* 周りに5%の余白 */
}
.main-title-number{
	font-size: 2rem; /* 文字サイズを大きくする */
}
.main-info-container {
	display: flex; /* フレックスボックスレイアウト */
	justify-content: center; /* 800pxまでは子要素が広がらないように中央配置 */
	gap: 1.5rem;	/* 横配置した子要素の間隔を一定に保ちながら空ける */
}
.parking-info{
	display: flex; /* フレックスボックスレイアウト */
	align-items: center; /* 縦方向に中央揃え */
	justify-content: center; /* 横方向に中央揃え */
}
.parking-info img {
	max-height: 40px;	   	/* 画像の最大高さを40pxに設定 */
 	object-fit: contain;	 /* 画像の比率を保ちつつ収める */
}
.parking-title{
	font-size: 1.1rem; /* フォントサイズを1.1remに */
	font-weight: bold; /* 太字 */
	white-space: nowrap; /* テキストの改行を防ぐ */
}
.parking-title-number{
	font-size: 1.3rem; /* 数字部分を強調する */
}
.challenge-banner{
	font-size: 1.1rem; /* フォントサイズを1.1remに */
	line-height:2.5rem; /* 行間を2.5remに */
	font-weight: bold; /* 太字 */
	text-align: center; /* 中央揃え */
	color: #F6C912; /* 黄色の文字 */
	background-color: #C92121; /* 赤色の背景 */
	padding: 0 0.2rem; /* 左右の余白を調整 */
	display: inline-block; /* 背景色をコンテンツの幅に合わせる */
}
/* メインテキスト */

/* お知らせ */
.announcement {
	margin: 10% 1%; /* 上下に10%、左右に1%の余白 */
}
.announcement-title{
	text-align: center; /* タイトルを中央揃え */
}
.announcement-info{
	font-size: 1rem; /* フォントサイズを1remに */
	text-align: center; /* 中央揃え */
	text-decoration: underline; /* 下線を追加 */
}
/* お知らせ */

/* 料金表 */
.menu {
	padding:1%; /* 1%の余白を追加 */
}
.menu h2, h3 {
	text-align: center; /* 中央揃え */
}
.menu-section {
	font-size: 0.8rem; /* フォントサイズを0.8remに */
	background-color: #5CCBCB; /* 背景色を水色に */
}
.menu-section h3{
	font-size: 1.2rem; /* フォントサイズを1.2remに */
	text-align: center; /* 中央揃え */
	background-color: #fff; /* 背景色を白に */
	padding: 1%; /* 1%のパディングを追加 */
	border-bottom: solid 1px #000; /* 下線を追加 */
}
.menu table {
	width: 100%; /* 幅を100%に設定 */
	border-collapse: collapse; /* 枠線が重ならないようにする */
}
.menu table th {
	line-height: 1.7; /* 行間を1.7倍にする */
	background-color: #5CCBCB; /* 背景色を水色に */
}
.menu table thead tr {
	border-bottom: solid 1px #000; /* 下線を追加 */
}
.menu table tbody tr td {
	width: calc(100% / 3); /* 列幅を3等分に */
}
.menu table tbody tr td:nth-child(1) {	/* テーブル内の各行の最初の列（一番左の列）のセルを選択 */
	background-color: #EAF5F5;  /* 背景色を淡い水色に */
}
.menu table tbody tr td:nth-child(2) {	/* テーブル内の各行の2列目（左から２番目の列）のセルを選択 */
	background-color: #BEF2F2;  /* 背景色をもう少し濃い水色に */
}
.menu table tbody tr td:nth-child(3) {	/* テーブル内の各行の最後の列（一番右の列）のセルを選択 */
	background-color: #8BE3E3;  /* 背景色をさらに濃い水色に */
	font-weight: bold; /* 太字に */
}
.category {
	background-color: #5CCBCB; /* 背景色を水色に */
	border-top: solid 1px #000; /* 上部に1pxの黒い枠線 */
	border-bottom: solid 1px #000; /* 下部に1pxの黒い枠線 */
}
.menu-section th {
	color: #fff; /* 白文字 */
	font-size: 0.75rem; /* フォントサイズを0.75remに */
}
.menu-section td {
	text-align: center; /* テーブルセルを中央揃え */
	font-size: 0.7rem; /* フォントサイズを0.7remに */
	padding: 1%; /* セル内に1%のパディングを追加 */
}
table tr:last-child {
	border-bottom: 1px solid black; /* 最後の行に黒い下線を追加 */
}
/* 料金表 */

/* MAP */
.map {
	display: flex; /* フレックスボックスレイアウト */
	flex-direction: column; /* 縦方向に配置 */
	align-items: center; /* 垂直方向に中央揃え */
	max-width: 800px; /* 最大幅を800pxに設定 */
	width: 100%; /* 幅を100%に */
	margin: 10% 0; /* 上下に10%、左右は0の余白 */
  	text-align: center; /* テキストを中央揃え */
}
.map-info{
	font-size: 0.9rem; /* フォントサイズを0.9remに */
	margin: 2%; /* 2%の余白 */
}
.g-map {
	display: flex; /* フレックスボックスレイアウト */
	justify-content: center; /* 水平方向に中央揃え */
	max-width: 800px; /* 最大幅を800pxに設定 */
	width: 100%; /* 幅を100%に */
}
.g-map iframe {
	aspect-ratio: 16 / 9; /* 16:9の縦横比を設定 */
	width: 100%; /* 幅を100%に */
	height: 100%; /* 高さを100%に */
	border: 0; /* 枠線なし */
}
/* MAP */

/* LINE */
.line-container{
	display: flex; /* フレックスボックスレイアウト */
	flex-direction: column; /* 縦方向に配置 */
	align-items: center; /* 垂直方向に中央揃え */
	margin: 5vw; /* 5vwのマージンを設定 */
}
.line-info-img{
	max-width: 400px; /* 最大幅を400pxに設定 */
	width: 100%; /* 幅を100%に */
	height: auto; /* 高さを自動調整 */
}
.line-info{
	font-size: 0.8rem; /* フォントサイズを0.8remに */
	margin-top: 3vh; /* 上部に3vhの余白 */
}
.line-banner{
	padding: 2%; /* 2%のパディング */
	max-width: 250px; /* 最大幅を250pxに設定 */
	width: 100%; /* 幅を100%に */
	height: auto; /* 高さを自動調整 */
	border: 0; /* 枠線なし */
}
.line-banner img {
	object-fit: cover;	/* 縦横比を保ちながら拡大表示 */
}
.line-banner img:hover {
	opacity: 0.7; /* 透明度を70%に変更 */
	transform: scale(1.1); /* 拡大 */
	filter: grayscale(50%); /* 50%のグレースケール効果 */
}
/* LINE */

/* 問い合わせ */
.contact {
	margin-top: 10%; /* 上部に10%の余白 */
}
.call-info{
	text-align: center; /* テキストを中央揃え */
}
.call-no{
	font-size: 1.8rem; /* フォントサイズを1.8remに */
	font-weight: bold; /* 太字 */
	text-align: center; /* 中央揃え */
	text-decoration: none;
}
.call-info2{
	font-size: 0.65rem; /* フォントサイズを0.65remに */
	text-align: center; /* 中央揃え */
}
.call-info3{
	font-size: 0.6rem; /* フォントサイズを0.6remに */
	text-align: center; /* 中央揃え */
	color: #838D8D; /* 色をグレーに */
}
.group-banner{
	display: flex; /* フレックスボックスレイアウト */
	justify-content: center; /* 水平方向に中央揃え */
	align-items: center; /* 垂直方向に中央揃え */
	max-width: 100%; /* 最大幅を100%に */
	height: 10vh; /* 高さを10vhに */
	margin: 3%; /* 3%の余白を追加 */
}
.group-banner button {
	opacity: .6; /* 透明度を60%に設定 */
	transition: opacity .2s; /* 透明度変化に0.2秒のトランジション */
	border: none; /* ボーダーなし */
	background: none; /* 背景なし */
}
.group-banner button:focus{
	outline: none; /* フォーカス時のアウトラインを消す */
}
.group-banner button:hover{
	opacity: 1; /* ホバー時に透明度を100%に */
	cursor: pointer; /* カーソルをポインターに */
}
/* 問い合わせ */

/* フッター */
footer{
	font-size: 0.7rem; /* フォントサイズを0.7remに */
	color: #FFFFFF; /* 文字色を白に */
	background-color: #89DBDB; /* 背景色を淡い青緑色に */
	text-align: center; /* テキストを中央揃え */
	width: 100%; /* 幅を100%に */
}
.footer-up{
	display: flex; /* フレックスボックスレイアウト */
	justify-content: center; /* 水平方向に中央揃え */
	padding-top: 1vh; /* 上部に1vhのパディング */
}
.footer-up img {
	width: 60%; /* 画像の幅を60%に設定 */
}
.footer-down{
	padding: 1vh; /* 下部に1vhのパディング */
}
/* フッター */