/* ===================================================
	★ 基本の設定
=================================================== */

/* htmlの設定 */
html {
	font-size: 12pt;
	font-family: Arial, Helvetica, sans-serif;
	color: #933;
}

html,
body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden !important;
}

body {
	margin: 0 auto;
	background-image: url(../img/bg_01.png);
	background-size: cover;
	background-color: #ffcfe3;
	box-sizing: border-box;
}

/* ===================================================
	★ リンク作成時の設定
=================================================== */

a:link,
a:visited {
	color: #633;
}

a:active {
	color: #f90;
}

/* ===================================================
	★ エリアの設定
=================================================== */

/* 全体のレイアウト設定 */
.layout {
	width: 100%;
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

/* ===================================================
	★ 文章の設定
=================================================== */

/* 文章DIVを中心に配置 */
.text_r,
.text_c,
.text_l {
	margin: 0 auto;
}

/* 文章中央寄せ */
.text_c {
	text-align: center;
}

/* 文章左寄せ */
.text_l {
	text-align: left;
}

/* 文章右寄せ */
.text_r {
	text-align: right;
}

/* 文字を上寄せ */
.top {
	vertical-align: top;
}

/* 文字を下寄せ */
.bottom {
	vertical-align: bottom;
}

/* セル内で垂直方向の中心に文字を配置 */
.text_m {
	vertical-align: middle;
}

/* コピーライト */
.copyright {
	width: 100px;
	font-size: small;
}

/* ===================================================
	★ 文字の設定
=================================================== */

.small {
	font-size: small;
}

/* ===================================================
	★ 画像の設定
=================================================== */

.title_img {
	width: 25%;
	height: auto;
	z-index: 1;
}

/* ===================================================
	★ ふわっと切り替えるホバー効果の共通設定
=================================================== */

.img_s {
	width: 10%;
	height: auto;
	z-index: 2;
}

.img_m {
	width: 15%;
	height: auto;
	z-index: 2;
}

.img_l {
	width: 30%;
	height: auto%;
	z-index: 2;
}


.hover_btn {
	position: absolute;
	/* relativeからabsoluteに変更して画面に固定 */
	display: block;
	height: auto;
}

/* 2枚の画像をぴったり重ねる */
.hover_btn img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity 0.5s ease;
	/* 0.5秒かけて変化 */
}

/* 2枚目の画像（ホバー用）を上に重ねて最初は透明にする */
.hover_btn .img_hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

/* マウスを乗せたときに1枚目を透明に、2枚目をくっきり表示 */
.hover_btn:hover .img_default {
	opacity: 0;
}

.hover_btn:hover .img_hover {
	opacity: 1;
}

/* ===================================================
	★ サイト作成時の設定
=================================================== */

/*
body,
table,
tr,
td,
div,
p,
ul {
	border: 3px solid #ff0000
}

*/