* {
	box-sizing: border-box;
}

html, body {
	background-color: #EEEEEE;
	height: 100vh;
	width: 100vw;
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	font-family: "游ゴシック体", YuGothic, "YuGothic M", "Meiryo UI", sans-serif;
	overflow-x: hidden;
}

@font-face {
  font-family: "YuGothic M";
  src: local("Yu Gothic Medium"),
       local("Yu Gothic");
  font-weight: 500;
}

table, tbody, tr, td, div {
	margin: 0px;
	padding: 0px;
}

table {
	border-collapse: collapse;
}

input, select, textarea {
	font-size: 1em;
}

a:link, a:visited {
	color: mediumblue;
}

a:hover, a:active {
	color: crimson;
}

div.main-layout {
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 100vw;
}

div.header-layout {
	background-image: url('../resources/header.png');
	background-position: bottom 21% left;
	background-size: cover;
	background-color: rgba(255,255,255,0.4);
	background-blend-mode: lighten;
	height: 15vh;
	width: 100vw;
	vertical-align: middle;
	text-align: center;
	font-size: 3em;
	padding: 0em 1em;
	line-height: 1.5em;
}

.header-dial-logo {
	height: 1.4em;
	width: auto;
}

.header-phone-no {
	display: inline-flex;
	position: static;
	float: right;
	font-size: 1em;
	font-weight: bold;
	text-shadow: 3px 3px 4px aliceblue;
}

.header-phrase {
	line-height: 2em;
	font-size: 1.1em;
	font-weight: bold;
	font-style: italic;
	text-shadow:3px 3px 4px aliceblue;
}

.layout-base {
	text-shadow: 2px 1px 3px lightslategray;
}

div.tab-layout {
	display: table;
	font-size: 1.5em;
	cursor: pointer;
    height: 5vh;
}

div.tab-base {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 20vw;
}

.index-bg {
	background: linear-gradient(to right, palegreen, honeydew);
}

div.active-index {
	background: radial-gradient(honeydew, palegreen);
	border: solid 2px orange;
}

.support-bg {
	background: linear-gradient(to right, lemonchiffon, ivory);
}

div.active-support {
	background: radial-gradient(ivory, lemonchiffon);
	border: solid 2px orange;
}

.fee-bg {
	background: linear-gradient(to right, navajowhite, linen);
}

div.active-fee {
	background: radial-gradient(linen, navajowhite);
	border: solid 2px orange;
}

.aboutus-bg {
	background: linear-gradient(to right, paleturquoise, azure);
}

div.active-aboutus {
	background: radial-gradient(azure, paleturquoise);
	border: solid 2px orange;
}

.contact-bg {
	background: linear-gradient(to right, lightsalmon, mistyrose);
}

div.active-contact {
	background: radial-gradient(mistyrose, lightsalmon);
	border: solid 2px orange;
}

div.body-layout {
	display:inline-flex;
	height: 75vh;
}

div.scrollable {
	overflow-y: auto;
}

div.function-layout {
	height: 80vh;
	width: 20vw;
	background: url('../resources/function_bg.png');
	background-size: cover;
	background-color: rgba(255,255,255,0.5);
	background-blend-mode: lighten;
	text-align: center;
	font-size: 2em;
}

.plan-block {
	line-height: 2em;
	font-size: 0.8em;
	text-align: left;
	padding: 1em;
}

div.contents-layout {
	height: 80vh;
	width: 80vw;
	background: url('../resources/background.png');
	background-size: cover;
	background-color: rgba(255,255,255,0.7);
	background-blend-mode: lighten;
	text-align: center;
	font-size: 2em;
	padding: 1.5em;
}

.content-title {
	display: inline-block;
	width: 50vw;
	border: solid 2px mediumseagreen;
	border-radius: 0.5em;
	font-size: 1.2em;
	font-weight: bold;
	font-style: italic;
	padding: 0.5em 2em;
}

div.content {
	text-align: left;
	font-size: 0.7em;
}

.logo-frame {
	display: inline-block;
	height: 17vh;
	vertical-align: bottom;
}

div.catch-frame {
	display:inline-block;
/*	background: radial-gradient(ellipse farthest-corner at 10% 10%, lightyellow, khaki 80%); */
/*	border:solid 2px cornflowerblue; */
	border-radius:0.5em;
	font-size:2em;
	font-weight:bold;
/*	padding:0.5em 1em; */
}

div.catch-prefix {
	display: inline-block;
	background: radial-gradient(ellipse farthest-corner at 10% 10%, paleturquoise, deepskyblue 80%);
	border-radius: 0.45em;
	padding: 0.1em 0.4em;
	font-style: italic;
}

div.catch-title {
	display: inline-block;
	background: radial-gradient(ellipse farthest-corner at 10% 10%, deepskyblue, paleturquoise 80%);
	border-radius: 0.35em;
	padding: 0.1em 0.4em;
	font-style: italic;
	font-size: 1.4em;
}

ul.caselist {
	line-height:2.5em;
	background: radial-gradient(ellipse farthest-corner at 80% 80%, floralwhite, khaki 90%);
	border:solid 2px cornflowerblue;
	border-radius:0.5em;
	padding:1.2em 2em;
}

div.support-time {
	display:inline-block;
	background: radial-gradient(ellipse farthest-corner at 80% 80%, paleturquoise, lightskyblue 90%);
	border:solid 2px mediumaquamarine;
	border-radius:0.5em;
	text-align:center;
	padding:1em;
}

img.support-map {
	width: 25vw;
	height: auto;
	cursor: pointer;
}

.support-description {
	display: inline-block;
	vertical-align: top;
	padding: 1em;
}

div.overlay-frame {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
}

div.background-cover {
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background-color: darkgray;
	opacity: 0.7;
}

img.large-map {
	position: absolute;
	top: 2vh;
	left: calc(100vw / 3);
	width: auto;
	height: 95vh;
}

table.feelist {
	display: inline-block;
	background-color: snow;
	border: solid 3px darkseagreen;
	font-size: 0.8em;
}

tr.feelist-headerrow {
	background-color: lightgreen;
}

tr.feelist-row {
	background-color: honeydew;
}

tr.feelist-row:hover {
	background-color: paleturquoise;
	cursor: pointer;
}

td.feelist-headercell {
	border: solid 2px darkseagreen;
	padding: 0.8em;
}

td.feelist-sectioncell {
	border-top: solid 3px darkseagreen;
	border-bottom: solid 3px darkseagreen;
	font-size: 1.2em;
	font-weight: bold;
	font-style: italic;
}

td.feelist-cell {
	border: solid 2px darkseagreen;
	padding: 1em;
	font-size: 0.8em;
}

table.info {
	display: inline-block;
	width: 50vw;
	background-color: snow;
	text-align: left;
	font-size: 0.8em;
}

td.info-titlecell {
	border: solid 2px cornflowerblue;
	background-color: lightcyan;
	width: 15vw;
	padding: 1.2em;
}

td.info-cell {
	border: solid 2px cornflowerblue;
	width: 35vw;
	padding: 1.2em;
}

.detail-plan {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 50vw;
	background-color: snow;
	border: solid 2px mediumaquamarine;
	border-radius: 0.5em;
	text-align: center;
	vertical-align: middle;
	padding: 1em;
}

.detail-description {
	display: inline-block;
	width: 50vw;
	background-color: snow;
	border: solid 2px mediumaquamarine;
	border-radius: 0.5em;
	text-align: left;
	padding: 1em;
}

.detail-fee {
	display: inline-block;
	background-color: snow;
	border: solid 2px mediumaquamarine;
	border-radius: 0.5em;
	text-align: center;
	padding: 1em;
}

.dial-logo {
	height: 1.4em;
	width: auto;
}

div.tel-frame {
	display: inline-flex;
	padding: 0.7em 1.2em;
	font-size: 2em;
	background-color: snow;
	color: green;
	border:solid 2px cornflowerblue;
	border-radius: 0.5em;
}

div.basic-button {
	display: inline-block;
	padding: 0.2em 1em;
	font-size: 1.2em;
	background-color: paleturquoise;
	color: dimgray;
	border:solid 2px cornflowerblue;
	border-radius: 0.5em;
}

div.basic-button:hover {
	background-color: lightskyblue;
	cursor: pointer;
}

table.mail-table {
	display: inline-block;
	background-color: snow;
	font-size: 0.8em;
	text-align: left;
}

td.mail-cell {
	border: solid 2px darkseagreen;
	padding: 1em;
	font-size: 0.8em;
}

input.customer-name {
	width:20vw;
	font-size:1em;
}

input.customer-mail {
	width: 30vw;
	font-size: 1em;
}

textarea.request-message {
	width:40vw;
	height:38vh;
	font-size: 1em;
}

div.footer {
	border-top: solid 1px darkgray;
	font-size: 0.5em;
	padding: 0.5em 0;
}

.error-text {
	color: red;
}