@charset "utf-8";

/* Default Style */
body {
	font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;
	font-size: 1.6rem; /*全体のフォントサイズは16pxとする*/
	background: #fff url("../images/cmn_bg_body.png") 50% 0 repeat-y;
	background-size: 100% auto;
	line-height: 1;
	color:#000;
}

/* Default Link Style */
a {
	text-decoration: none;
	color: inherit;
	transition: 0.5s;
}

a:hover {
	opacity: .8;
}

/* font */
.ft_notoR {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}

.ft_notoB {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
}

/* common */
#wrapper {
	position: relative;
	width: 100%;	/*全ての要素を包括する<div id"wrapper">の幅を画面幅に設定する*/
	z-index:5;
}

section {
	display: block;
	width: 100%;
	padding: 0 20px;
}

/* header ---------------------------------------- */
/* ヘッダー */
header {
	width: 100%;
	padding: 0 20px;
	background-color: #ffffff;
}

header .header-inner {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1240px;
	margin:0 auto;
	padding: 16px 0;
}

header .header-inner > h1 img {
	width: 100%;
	max-width: 180px;
	height: auto;
}

header .header-inner > div {
	width: 100%;
	max-width: 520px;
}

header .header-inner ul {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

header .header-inner ul.site {
	margin: 0 0 12px 0;
	font-size: 1.4rem;
	font-weight: bold;
	justify-content: flex-end;
}

header .header-inner ul.site li {
	margin: 0 3%;
}

header .header-inner ul.site li a {
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	color: #304779;
}
header .header-inner ul.site li a::before {
	content: "";
	margin-right: .5em;
}

header .header-inner ul.site li:nth-of-type(1) a::before {
	width: 12px;
	height: 12px;
	background: url("../images/head_icon_arrow.svg") center center no-repeat;
	background-size: contain;
}

header .header-inner ul.site li:nth-of-type(2) a::before {
	width: 21px;
	height: 16px;
	background: url("../images/head_icon_contact.svg") center center no-repeat;
	background-size: contain;
}

header .header-inner ul.tool {
	justify-content: space-between;
}

header .header-inner ul.tool li {
	width: 48.077%;
}

header .header-inner a.linkBtn {
	width: 100%;
}

header .header-inner a.linkBtn.btnWeb {
	background: #8CC63F;
	box-shadow: none;
}
header .header-inner a.linkBtn.btnDl {
	background: #60A6DB;
	box-shadow: none;
}

/* footer ----------------------------------------- */
footer {
	width: 100%;
	padding: 60px 20px 40px;
	background-color: #304779;
	text-align: center;
	line-height: 1.5;
	color: #ffffff;
}

footer h2 {
	margin: 0 0 1.75em;
	font-size: 3.0rem;
}

footer h2 + p {
	margin: 0 0 1.5em;
	font-size: 2.0rem;
}

footer ul {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	max-width: 627px;
	margin: 0 auto 1.5em;
}

footer ul li {
	width: 47.847%;
}

footer ul li a {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 12px;
	line-height: 1.0;
	border: 1px solid #FFFFFF;
	border-radius: 10px;
	font-size: 2.2rem;
}

footer ul li a::before {
	flex-shrink: 0;
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	margin-right: 10px;
}

footer ul li.tel a::before {
	background: url("../images/foot_icon_tel.svg") 50% 50% no-repeat;
	background-size: contain;
}
footer ul li.form a::before {
	background: url("../images/foot_icon_contact .svg") 50% 50% no-repeat;
	background-size: contain;
}

footer p.hours {
	margin: 0 0 1em;
}
footer p.privacy {
	margin: 0 0 3em;
	font-size: 1.4rem;
}

footer dl dt {
	font-size: 2.0rem;
}

footer dl dt strong {
	font-size: 2.5rem;
	font-weight: 500;
}

footer dl dd {
	font-size: 1.4rem;
}

/* ------------------------------------------------ */
.container {
	padding: 0;
}

.contents {
	width: 100%;
}

.contents h2 {
	margin: 0 0 2.25em;
	text-align: center;
	line-height: 2.0;
	font-size: 3.0rem;
	color: #304779;
}

.contents main {
	width: 100%;
	overflow: hidden;
}

/* ------------------------------------------------ */
#page-top {
  position: fixed;
  bottom: 0;
  right: 20px;
}

/* ------------------------------------------------ */
a.linkBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: .75em .2em;
	background: transparent linear-gradient(270deg, #4A69FF 0%, #4AD384 100%) 0% 0% no-repeat padding-box;
	box-shadow: 0px 6px 20px #A4D1DC;
	border-radius: 99em;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	color: #FFFFFF;
	opacity: 1;
}

a.linkBtn::before {
	flex-shrink: 0;
	content: "";
	width: 12px;
	height: 12px;
}

a.linkBtn::after {
	flex-shrink: 0;
	content: "";
	width: 24px;
	height: 14px;
	margin-top: 2px;
	background: url("../images/icon_arw_next.svg") 50% 50% no-repeat;
	transition: .3s;
}

a.linkBtn:hover::after {
	background: url("../images/icon_arw_next.svg") 100% 50% no-repeat;
}

/* ================================================ */

@media (max-width: 767px) {

header .header-inner > h1 {
	margin-right: 10px;
}

header .header-inner ul.site {
	font-size: 1.2rem;
}

header .header-inner ul.tool {
	justify-content: flex-end;
}
header .header-inner ul.tool li {
	width: auto;
}

header .header-inner ul.tool li:last-of-type {
	margin-left: 3%;
}

header .header-inner a.linkBtn {
	font-size: 1.4rem;
}

footer {
	padding: 7.8% 20px 5.2%;
}

footer h2 {
	margin: 0 0 7.8%;
	font-size: 2.6rem;
}

footer h2 + p {
	margin: 0 0 3.8%;
	font-size: 1.8rem;
}

footer ul {
	margin: 0 auto 3.8%;
}

footer ul li a {
	font-size: 2.0rem;
}

footer ul li.tel a img {
	max-width: calc(100% - 26px);
}

footer p.hours {
	margin: 0 0 2.1%;
}
footer p.privacy {
	margin: 0 0 6.2%;
}

footer dl dt {
	font-size: 1.8rem;
}

footer dl dt strong {
	font-size: 2.3rem;
}

footer dl dd {
	font-size: 1.2rem;
}

.contents h2 {
	margin: 0 0 7.8%;
	line-height: 1.8;
	font-size: 2.6rem;
}
}

/* ================================================ */

@media (max-width: 479px) {
body {
	font-size: 1.5rem; /*全体のフォントサイズは15pxとする*/
}

header .header-inner {
	display: block;
}

header .header-inner h1 {
	width: 100%;
	margin: 0 0 12px;
	text-align: center;
}

header .header-inner ul.site {
	justify-content: center;
}

header .header-inner ul.tool {
	justify-content: center;
}

footer ul {
	display: block;
	margin: 0 auto;
}

footer ul li {
	width: 100%;
	margin: 0 0 20px;
}

}