@charset "UTF-8";

*,
*::before,
*::after {
    box-sizing: border-box;
    letter-spacing: 0.05em;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size:16px;
    line-height:150%;
    color: var(--base-text-color);
    background-color:var(--base-background-color);
}


h1{
	font-size:28px;
	font-weight:bold;
    padding: 10px;
    text-align: center;
    border-bottom:var(--base-text-color) solid 4px;
    line-height:130%;
    margin:0 0 15px 0;
}

h2{
	font-size:22px;
	font-weight:bold;
    padding: 10px;
    text-align: left;
    border-bottom:var(--base-text-color) solid 2px;
    border-left:var(--base-text-color) solid 10px;
    line-height:130%;
    margin:0 0 5px 0;
}

h3{
	font-size:18px;
	font-weight:bold;
    padding: 5px;
    text-align: left;
    border-bottom:var(--base-text-color) solid 1px;
    line-height:130%;
    margin:0 0 5px 0;
}

section{
	width:90%;
	max-width:900px;
	margin:0 auto;
}
section.intro{
	margin:30px auto;
}
nav.top{
	padding-top:60px;
}


a{
	color:var(--base-text-color);
	text-decolation:underline;
}

.white-card{
	background-color:var(--white-card-background-color);
	color:var(--white-card-text-color);
	padding:15px;
	margin:15px 0;
	border:var(--white-card-border-color) solid 1px;
}

.white-card a{
	color:var(--white-card-text-color);
	text-decolation:underline;
}


.red-card{
	color:var(--red-card-text-color);
	background-color:var(--red-card-background-color);
	padding:15px;
	margin:15px 0;
}
.red-card a{
	color:var(--white-card-text-color);
	text-decolation:underline;
}

.green-card{
	color:var(--green-card-text-color);
	background-color:var(--green-card-background-color);
	padding:15px;
	margin:15px 0;
}
.green-card a{
	color:var(--white-card-text-color);
	text-decolation:underline;
}

.red{
	color:var(--red-card-text-color);
}

.mt15{
	margin-top:15px;
}
.mt30{
	margin-top:30px;
}
.mb15{
	margin-bottom:15px;
}
.mb30{
	margin-bottom:30px;
}

ul{
	list-style: none;
}
li{
	font-size:14px;
	text-indent: -1em;
	padding-left: 1em;
}
li::before{
	content: '・';
}


button{
	text-align:center;
	margin:0 auto;
	background-color: var(--button1-background-color);
	border: 2px solid var(--button1-border-color);
	color: var(--button1-text-color);
	padding:5px;
	font-size:16px;
	cursor:pointer;
}


.gmap iframe{
	width: 100%;
	aspect-ratio: 16/9;
}

.request{
	margin:0 0 30px 0;
}
.request .line{
	display: flex;
	padding:5px;
	background-color:var(--table-line-background-color);
	color:var(--table-text-color);
	border-bottom: var(--table-text-color) solid 1px;
}

.request .midoku{
	background-color:var(--table-line-background-color-strong);
}

.request .line .item{
	display: flex;
	flex-direction: row;
	margin:0 10px 0 0 ;
}
.request .line .item:last-child{
	margin:0
}
.request .line .type{
	font-weight:bold;
	width:50px;
	padding:7px 0 0 0;
}
.request .line .distance{
	width:70px;
	padding:7px 0 0 0;
}
.request .line .price{
	width:70px;
	padding:7px 0 0 0;
}
.request .line .detail{
}
.request .line .syuuka{
	color:var(--type-syuuka-text-color);
}
.request .line .haitatsu{
	color:var(--type-haitatsu-text-color);
}


.infobox{
	margin:0 0 30px 0;
}
.infobox img{
	width:100%;;
}

label.midoku:after {
	content: "";
	display: block;
	height: 10px;
	width: 10px;
	position: absolute;
	background: var(--notice-mark-color);
	border-radius:6px;
	top:13px;
	right:10px;
}

ul.menu li a.midoku:after{
	content: "";
	display: inline-block;
	height: 10px;
	width: 10px;
	position: relative;
	background: var(--notice-mark-color);
	border-radius:6px;
	top:-10px;
	left:-5px;
}