@charset "Shift_JIS";
/* CSS Document */

:root {
	--w-normal: min(1100px, 100%);
  --f-family-en: "Poppins", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	--color-dgr: #212121;
	--color-lgr-01: #f5f5f5;
	--color-lgr-02: #eee;
	--color-lgr-03: #e0e0e0;
	--color-gr-01: #424242;
	--color-gr-02: #616161;
	--color-bl-01: #003683;
	--color-bl-02: #0c3b91;
	--color-lbl-01: #7d96c4;
	--color-lbl-02: #e7ecf4;
	--color-grn: #409d27;
	--color-lgrn: #ecf5ea;
	--color-re: #e21919;
}

/* ==========================================================
 body
========================================================== */
body {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	width: 100%;
	min-height: 100vh;
	word-wrap: break-word;
  overflow-wrap: break-word;
	font-family: "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	text-align: justify;
}

img {
	max-width: 100%;
}

/* ==========================================================
 header / footer
========================================================== */
.header,
.header-nav .menu,
.header-nav .menu .link,
.footer-in,
.footer-nav .menu,
.footer-area-01 .box.address > div,
.footer-area-01 .box.contact {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
}
.header-nav .menu,
.header-nav .menu .link {
	-ms-flex-pack: center;
	justify-content: center;
}
.header,
.footer-in {
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: var(--w-normal);
	margin: 0 auto;
}
.header .logo,
.header .logo *,
.footer .logo,
.footer .logo * {
	display: block;
}

/* header
---------------------------------------------------------- */
.header {
	position: relative;
	height: 90px;
}
.header-logo {
	width: 143px;
}
.header-nav {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.header-nav .menu .link {
	position: relative;
	padding: 1em 1.5em;
	line-height: 1;
	font-weight: 700;
	transition: color 0.2s;
}
.header-nav .menu .link::after {
	position: absolute;
	left: 50%;
	bottom: 4px;
	content: "";
	display: block;
	width: calc(100% - 3em);
	height: 3px;
	background: transparent;
	border-radius: 1px;
	transform: translateX(-50%);
	transition: background-color 0.2s;
}
.header-logo-tohan {
	width: 200px;
	height: 34px;
	padding: 10px;
}
.header-nav-btn {
	display: none;
}

/* footer
---------------------------------------------------------- */
.footer {
	margin-top: auto;
}
.footer-in {
	height: 100%;
}
.footer-area-01 {
	position: relative;
	background: var(--color-lgr-01);
}
.footer-area-01::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	background: var(--color-lgr-02);
}
.footer-area-01 .box {
	width: min(480px, 50%);
	padding: 30px 0;
}
.footer-logo {
	width: 152px;
	margin-right: 30px;
}
.footer-area-01 p {
	line-height: 1.42;
	font-size: 14px;
}
.footer-area-01 .btn-cmn-01 {
	width: 240px;
	margin: 0;
	background: #fff;
}
.footer-nav .item {
	margin-right: 10px;
}
.footer-area-01 .txt-color-bl {
	font-size: 20px;
	font-weight: 700;
}
.footer-area-01 .box.address p {
	margin-top: 0.5em;
}
.footer-area-01 .box.address > div {
	margin-bottom: 25px;
}
.footer-area-01 .box.contact {
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.footer-area-02 {
	height: 60px;
	color: #fff;
	background: var(--color-bl-01);
}
.footer-area-02 .txt {
	font-size: 12px;
}
.footer-area-02 .copy {
	display: block;
	margin: 0 35px 0 auto;
	font-size: 10px;
}

/* ==========================================================
 汎用パーツ
========================================================== */
/* area / sec / heading / contents
---------------------------------------------------------- */
.area {
	margin-bottom: 200px;
}
.sec-cmn-01,
.sec-cmn-02,
.sec-cmn-03 {
	margin: 120px auto 0;
}
.sec-cmn-01,
.sec-cmn-02 {
	width: var(--w-normal);
}
.sec-cmn-03 {
	width: min(860px, 100%);
}
.sec-cmn-03 + .sec-cmn-03 {
	margin-top: 80px;
	padding-top: 80px;
	border-top: 1px solid var(--color-lgr-03);
}
.sec-cmn-01,
.contents-02 {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: start;
	align-items: flex-start;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.sec-in-01 + .sec-in-01 {
	margin-top: 40px;
}
.sec-in-02 + .sec-in-02 {
	margin-top: 100px;
}

.heading-01 .ja,
.heading-02 {
	font-size: 24px;
	font-weight: 700;
}
.heading-01 {
	width: min(210px, 20%);
}
.heading-01 .ja,
.heading-01 .en,
.heading-01 img {
	display: block;
}
.heading-01 .ja {
	margin-bottom: 5px;
	letter-spacing: 0.1em;
	color: var(--color-bl-01);
}
.heading-01 .en {
	letter-spacing: 0.05em;
	color: var(--color-lbl-01);
	font-size: 12px;
	font-weight: 500;
	font-family: var(--f-family-en);
}
.heading-01 img {
	width: 200px;
	border: 1px solid var(--color-lgr-02);
}
.heading-02 {
	position: relative;
	margin-bottom: 40px;
	padding-left: 40px;
}
.heading-02::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 30px;
	height: 30px;
	border: 10px solid var(--color-bl-01);
	border-radius: 50%;
	transform: translateY(-50%);
}
.contents-01,
.contents-02 {
	width: min(820px, 80%);
}

/* pageheader
---------------------------------------------------------- */
.pageheader,
.pageheader .nav-path .list {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
}
.pageheader {
	-ms-flex-pack: center;
	justify-content: center;
	position: relative;
	height: 200px;
	margin: 0 20px;
	color: #fff;
	background: url("../img/second/bg_page.jpg") no-repeat 50% 0 var(--color-bl-01);
	background-size: auto 100%;
	border-radius: 10px;
}
.pageheader .ttl {
	margin: auto 0;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
}
.pageheader .nav-path {
	position: absolute;
	top: 15px;
	left: 50%;
	width: var(--w-normal);
	margin: 0 auto;
	font-size: 12px;
	transform: translateX(-50%);
	vertical-align: middle;
}
.pageheader .nav-path .item + .item::before {
	content: "";
	position: relative;
	top: -0.15em;
	display: inline-block;
  width: 6px;
  height: 6px;
	margin: 0 0.75em 0 0.5em;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
}

/* txt / ttl
---------------------------------------------------------- */
.txt-cmn-01 {
	margin-bottom: 1.875em;
}
.txt-cmn-02 {
	margin-bottom: 5rem;
}
.txt-cmn-03 {
	margin-bottom: 1rem;
}
.txt-line-01 {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--color-lgr-03);
}
.txt-color-bl {
	color: var(--color-bl-01);
}
.txt-error {
	color: var(--color-re);
	font-size: 12px;
}
.ttl-cmn-01,
.ttl-cmn-02,
.ttl-cmn-03,
.ttl-cmn-04,
.ttl-cmn-05,
.ttl-cmn-06 {
	font-weight: 700;
	line-height: 1.75;
}
.ttl-cmn-01,
.ttl-cmn-03 {
	margin-bottom: 40px;
	font-size: 24px;
}
.ttl-cmn-02,
.ttl-cmn-04 {
	margin-bottom: 20px;
	font-size: 20px;
}
.ttl-cmn-03 {
	padding-bottom: 10px;
	border-bottom: 6px solid var(--color-lgr-01);
}
.ttl-cmn-04 {
	position: relative;
	padding-left: 30px;
}
.ttl-cmn-04::before {
	content: "";
	position: absolute;
	top: 0.38em;
	left: 0;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 3px;
}
.ttl-cmn-04.book::before {
	background: var(--color-bl-02);
}
.ttl-cmn-04.magazine::before {
	background: var(--color-grn);
}
.ttl-cmn-05,
.ttl-cmn-06 {
	margin-bottom: 10px;
}
.ttl-cmn-05 {
	font-size: 18px;
}

/* list / form
---------------------------------------------------------- */
.list-cmn-01:not(:last-of-type),
.list-dot-01:not(:last-of-type) {
	margin-bottom: 1.875em;
}
.list-cmn-01 > li + li {
	margin-top: 1em;
}
.list-dot-01 > li {
	margin-left: 1.5em;
	list-style: disc;
}
dl .list-dot-01 > li {
	line-height: 1.5;
}
.dlist-cmn-01,
.dlist-cmn-02,
.dlist-cmn-02 dl {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.dlist-cmn-01 .ttl,
.dlist-cmn-01 .txt {
	padding: 18px 0;
	border-bottom: 1px solid var(--color-lgr-02);
}
.dlist-cmn-01 {
	border-top: 1px solid var(--color-lgr-02);
}
.dlist-cmn-01 .ttl {
	width: 180px;
}
.dlist-cmn-01 .ttl .month {
	display: inline-block;
	margin-left: 1.75em;
}
.dlist-cmn-01 .txt {
	width: calc(100% - 180px);
}
.dlist-cmn-02 {
	border-top: 1px solid var(--color-lgr-03);
	border-left: 1px solid var(--color-lgr-03);
}
.dlist-cmn-02 .ttl,
.dlist-cmn-02 .txt {
	padding: 10px 15px;
	border-right: 1px solid var(--color-lgr-03);
	border-bottom: 1px solid var(--color-lgr-03);
}
.dlist-cmn-02 .ttl {
	width: 260px;
	background: var(--color-lgr-01);
}
.dlist-cmn-02 .txt {
	width: calc(100% - 260px);
}
.dlist-cmn-02 dl dt {
	width: 9em;
}
.dlist-cmn-02 dl dd {
	width: calc(100% - 9em);
}

.form .dlist-cmn-02 .ttl,
.form .dlist-cmn-02 .txt {
	padding: 20px;
}
.form .dlist-cmn-02 .ttl {
	position: relative;
	width: 310px;
	font-weight: 700;
}
.form .dlist-cmn-02 .ttl .required {
	position: absolute;
	top: 26px;
	right: 20px;
	display: block;
	width: 34px;
	height: 18px;
	line-height: 18px;
	color: #fff;
	font-size: 10px;
	text-align: center;
	background: var(--color-re);
	border-radius: 3px;
}
.form .dlist-cmn-02 .txt {
	width: calc(100% - 310px);
}
.form .dlist-cmn-02 .txt .sub {
	display: block;
	margin-top: 10px;
	color: var(--color-gr-02);
	font-size: 14px;
}
.input-text-01,
.input-text-02,
.input-text-03,
.input-textarea-01 {
	padding: 4px 1rem;
	border: 2px solid var(--color-lgr-03);
	border-radius: 2px;
}
.input-text-01 {
	width: min(500px, 100%);
}
.input-text-02 {
	width: min(220px, 100%);
}
.input-text-03 {
	width: min(190px, 100%);
}
.input-textarea-01 {
	width: 100%;
	height: 300px;
}

.label-cmn-01 span,
.label-cmn-02 span {
	position: relative;
	display: inline-block;
}

.input-toggle {
	visibility: hidden;
	appearance: none;
}
.input-toggle + label {
	position: relative;
	display: inline-block;
	padding-left: 23px;
	border-color: #000;
}
.input-toggle + label::before,
.input-toggle + label::after {
	content: "";
	position: absolute;
	top: 50%;
	display: block;
	transform: translateY(-50%);
}
.input-toggle + label::before {
	left: 0;
	width: 18px;
	height: 18px;
}
.input-toggle + label::after {
	left: 4px;
	width: 10px;
	height: 10px;
	opacity: 0;
}
.input-toggle:checked + label::after {
	opacity: 1;
}

.input-toggle.radio + label::before {
	border-radius: 50%;
	border: 2px solid var(--color-lgr-03);
}
.input-toggle.radio + label::after {
	border-radius: 50%;
	background: var(--color-bl-01);
}
.input-toggle.check + label::before {
	border-radius: 2px;
	border: 2px solid #000;
}
.input-toggle.check + label::after {
	background: url("../img/ico_check.svg") no-repeat 50% 50%;
	background-size: contain;
}

.wrap-input-01 + .wrap-input-01 {
	margin-left: 20px;
}
.wrap-input-01,
.wrap-input-01 span {
	display: inline-block;
}
.wrap-input-01 span {
	width: 40px;
}

/* link / btn
---------------------------------------------------------- */
.link-cmn-02 .btn,
.btn-cmn-01,
.btn-cmn-02 {
	position: relative;
	line-height: 1;
}
.link-cmn-02 .btn::after,
.btn-cmn-01::after {
	content: "";
	position: absolute;
  top: 50%;
	display: block;
	transform: rotate(45deg);
}

a[href^="tel:"] {
	pointer-events: none;
}
.link-cmn-01 {
	color: var(--color-bl-01);
	text-decoration: underline;
}
.link-cmn-02 {
	display: inline-block;
	transition: opacity 0.2s;
}
.link-cmn-02 .btn {
	top: -1px;
	display: inline-block;
	width: 75px;
	height: 16px;
	margin-left: 20px;
	padding: 3px 0 0 15px;
	letter-spacing: 0.08em;
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	font-family: var(--f-family-en);
	background: var(--color-bl-01);
	border-radius: 2px;
	vertical-align: middle;
}
.link-cmn-02 .btn::after {
	left: 5px;
	width: 4px;
  height: 4px;
	margin-top: -2px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.btn-cmn-01,
.btn-cmn-02 {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-align: center;
	transition: color 0.2s, background-color 0.2s;
}
.btn-cmn-01 {
	height: 60px;
	margin: 0 auto;
	font-weight: 700;
	border-radius: 10px;
}
.btn-cmn-01::after {
  right: 18px;
  width: 10px;
  height: 10px;
	margin-top: -5px;
  border-top: 2px solid var(--color-lgr-03);
  border-right: 2px solid var(--color-lgr-03);
}
.btn-cmn-02 {
	width: 140px;
	height: 30px;
	color: var(--color-gr-01);
	font-size: 12px;
	background: #fff;
	border-radius: 15px;
}
.area .btn-cmn-01 {
	width: min(300px, 80%);
	margin-top: 60px;
	color: #fff;
	background: var(--color-bl-01);
	border-radius: 10px;
}
.area .btn-cmn-01.back {
	background: var(--color-gr-02);
}
.area .btn-cmn-01.back::after {
	left: 18px;
	right: auto;
	transform: rotate(225deg);
}

.btn-file {
	position: relative;
	display: block;
	width: min(400px, 100%);
	padding: 14px 25px;
	border: 1px solid var(--color-lgr-03);
	border-radius: 5px;
	transition: background-color 0.2s;
}

.btn-file::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 25px;
	display: block;
	width: 20px;
	height: 20px;
	background: no-repeat 50% 50%;
	background-size: contain;
	transform: translateY(-50%);
}
.btn-file.pdf::after {
	background-image: url("../img/ico_pdf.svg");
}

.wrap-btn {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-top: 60px;
}
.wrap-btn *[class^="btn-"] {
	margin: 0 10px;
}

/* box / table
---------------------------------------------------------- */
.box-cmn-01 {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.box-cmn-02 {
	margin: 3rem 0 6rem 5rem;
}

.box-line-01 {
	padding: 35px 40px;
	border: 1px solid var(--color-lgr-03);
}
.box-line-01 + .box-line-01 {
	margin-top: 20px;
}
table + .ttl-cmn-05,
.box-line-01 + .ttl-cmn-05,
.box-line-01 + .ttl-cmn-06 {
	margin-top: 50px;
}

table {
	margin: 15px 0;
}
table,
table td,
table th {
	padding: 10px 20px;
	border: 1px solid var(--color-lgr-03);
	vertical-align: top;
}
table th {
	color: #fff;
	background: var(--color-gr-01);
}
table .cell-01 {
	width: 260px;
}
table .ttl {
	background: var(--color-lgr-01);
}
.table-cmn-01 {
	width: 100%;
}

/* img
---------------------------------------------------------- */
.img-cmn-01 {
	overflow: hidden;
	border-radius: 5px;
}

/* wrap-business
---------------------------------------------------------- */
.wrap-business,
.wrap-business .box {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.wrap-business .box {
	width: calc(50% - 10px);
	padding: 30px;
	border-radius: 5px;
}
.wrap-business .box .img {
	flex-shrink: 0;
	width: 160px;
}
.wrap-business .box .ttl-cmn-06 {
	margin: 0 0 -5px -0.5em;
}
.wrap-business .box.book {
	background: var(--color-lbl-02);
}
.wrap-business .box.magazine {
	background: var(--color-lgrn);
}

/* ==========================================================
 各ページ
========================================================== */
/* company
---------------------------------------------------------- */
body.company .contents-01 .s-fw-b {
	display: inline-block;
	margin-top: 10px;
	line-height: 1;
	font-size: 20px;
}
body.company .contents-02 .box {
	width: calc(100% - 210px);
}
body.company .contents-02 .img {
	width: 160px;
	padding: 29px;
	border: 1px solid var(--color-lgr-02);
}

/* privacy
---------------------------------------------------------- */
body.privacy .box-cmn-01 {
	-ms-flex-align: end;
	align-items: flex-end;
	margin-top: 80px;
}
body.privacy .box-cmn-01 .img {
	width: 100px;
}
body.privacy .box-cmn-01 .txt {
	width: calc(100% - 130px);
}

/* contact
---------------------------------------------------------- */
body.contact .heading-02 {
	margin-bottom: 20px;
}
body.contact .dlist-contact {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	line-height: 1;
	font-weight: 700;
}
body.contact .dlist-contact .ttl,
body.contact .dlist-contact .txt {
	margin-top: 25px;
}
body.contact .dlist-contact .ttl {
	width: 60px;
	padding: 4px 0;
	color: #fff;
	font-size: 12px;
	text-align: center;
	border-radius: 3px;
}
body.contact .dlist-contact .txt {
	width: calc(100% - 70px);
	font-size: 24px;
}
body.contact .dlist-contact .txt .link-cmn-01 {
	display: block;
	font-size: 14px;
}
body.contact .book .dlist-contact .ttl {
	background: var(--color-bl-02);
}
body.contact .magazine .dlist-contact .ttl {
	background: var(--color-grn);
}
body.contact .wrap-business .box-in {
	width: calc(100% - 190px);
}

@media screen and (min-width: 800px) {
	.link-cmn-01:hover {
		text-decoration: none;
	}
	.link-cmn-02:hover {
		opacity: 0.6;
	}
	.btn-cmn-01:hover,
	.btn-cmn-02:hover {
		color: #fff;
		background: var(--color-bl-01);
	}
	.area .btn-cmn-01:hover,
	.area .btn-cmn-01.back:hover {
		background: var(--color-lbl-01);
	}
	.btn-file:hover {
		background: var(--color-lgr-03);
	}
	.header-nav .menu .link:hover::after,
	body.company .header-nav .menu .page-company .link::after,
	body.business .header-nav .menu .page-business .link::after,
	body.contact .header-nav .menu .page-contact .link::after,
	body.link .header-nav .menu .page-link .link::after {
		background: var(--color-bl-01);
	}
}