@charset "utf-8";
/* --------------------------------
 * TOP Design
 * -------------------------------- */

/* gate
---------------------------------------------*/
/* 背景 */
.gate .box {
	background: url("../img/bg_mama.svg") no-repeat 90% 60%;
}
.gate .box:nth-of-type(2) {
	background: url("../img/bg_org.svg") no-repeat 90% 60%;
}
/* 見出し */
.gate .midashi {
	padding-left: 0.8em;
	padding-top: 0.8em;
	border-top: 5px solid #cd6781;
}
.gate .box:nth-of-type(2) .midashi {
	border-top: 5px solid #3f6191;
	border-bottom: 5px solid #3f6191;
}
/* info
---------------------------------------------*/
.info {
	margin-top: 50px;
	padding-bottom: 100px;
}
.info .box {
	margin: 0 auto;
	width: 70%;
}

@media (max-width: 767px) {
.info .box {
	width: 100%;
}
}
/* 見出し */
.info .midashi {
	padding-top: 0.8em;
	border-top: 5px solid #67afcd;
	border-bottom: 5px solid #67afcd;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
	text-align: center;
}
.info #feed dd {
	margin-top: 1em;
	padding-left: 1em;
	text-indent: -1em;
}
/* ごあいさつ
---------------------------------------------*/
.welcome {
	padding-top: 100px;
	padding-bottom: 100px;
	background: #efefef url("../img/bg_welcome.svg") no-repeat 80% center;
}
.welcome .box {
	margin: 0 auto;
	width: 70%;
}

@media (max-width: 767px) {
.welcome .box {
	width: 100%;
}
}
.welcome .midashi {
	border-bottom: 5px solid #fff;
	text-align: center;
}
.welcome .signature {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "メイリオ", Meiryo, "HGS明朝B", "HG明朝B", "ＭＳ 明朝", serif;
	text-align: right;
}
.welcome .signature strong {
	padding-left: 0.5em;
	display: inline-block;
	font-size: 2.4rem;
	font-weight: normal;
	letter-spacing: 0.2em;
	margin-right: -0.2em;/* 最終文字の空きを無くす */
}
/* トップページ用ボタン
---------------------------------------------*/
.button {
	margin: 80px auto 0;
	width: 100%;
	min-height: 65px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
	text-align: center;
	position: relative;
}
.button i {
	position: absolute;
	top: 50%;
	left: 9.25%;
	transform: translateY(-50%);
 -webkit- transform: translateY(-50%);
	font-size: 2.4rem;
}
.button span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
}
a .button {
	display: block;
	color: #fff;
	text-decoration: none;
}
a:hover .button {
	opacity: 0.8;
}
.button.mam {
	background: #cd6781;/* for Mama */
}
.button.org {
	background: #3f6191;/* for Organizations */
}
.button.mat {
	background: #e4ae2c;/* Maternity Leap */
}
.button.abo {
	background: #6f3f91;/* About us */
}
.button.con {
	background: #000;/* Contact */
}
/* マタニティリープについて、私たちについて、お問い合わせ
---------------------------------------------*/
.top-contents {
	margin-top: 100px;
	min-height: 465px;
}
.top-contents:last-of-type {
	margin-bottom: 100px;
}
.top-contents .inner {
	position: relative;
}
.top-contents .box {
	margin-left: 60%;
	width: 40%;
}
.top-contents:nth-of-type(even) .box {
	margin-left: 0;
}

@media (max-width: 767px) {
.top-contents .box, .top-contents:nth-of-type(even) .box {
	margin-left: 0;
	width: 100%;
}
}
/* 画像 */
.top-contents .image {
	position: absolute;
	top: 0;
	right: 45%;
}
.top-contents:nth-of-type(even) .image {
	left: 45%;
}

@media (max-width: 767px) {
.top-contents .image, .top-contents:nth-of-type(even) .image {
	position: static;
	top: auto;
	right: auto;
	left: auto;
}
.top-contents .image img {
	margin-top: 10px;
	width: 100%;
}
}
/* 見出し */
.top-contents .midashi {
	border-bottom: 5px solid #e4ae2c;
}
.top-contents.abo .midashi {
	border-bottom: 5px solid #6f3f91;
}
.top-contents.con .midashi {
	border-bottom: 5px solid #000;
}

@media (max-width: 767px) {
.top-contents.mat .midashi {/* マタニティリープについて 字詰め */
	letter-spacing: -0.1em;
}
}
/* ボタン */
.top-contents .button {
	margin: 30px 0 0 auto;
	width: 50%;
	text-align: right;
}
.top-contents:nth-of-type(even) .button {
	margin: 30px auto 0 0;
	text-align: left;
}

@media (max-width: 767px) {
.top-contents .button {
	width: 100%;
}
}