@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('animation.css');

:root {
	--main-color: #165E83;
	--sub-color: #DDD4D0;
	--box-bg-color: #F7F5E3;
	
	--color-white: #FFFEF6;
	--color-black: #2B2727;
	
	--ft-size18: 1.8rem;
	--ft-size20: 2.0rem;
	--ft-size22: 2.2rem;
	--ft-size24: 2.4rem;
	--ft-size25: 2.5rem;
	--ft-size26: 2.6rem;
	--ft-size28: 2.8rem;
	--ft-size30: 3.0rem;
	--ft-size34: 3.4rem;
	--ft-size36: 3.6rem;
	--ft-size42: 4.2rem;
	--ft-size48: 4.8rem;
} 

/* Default Style */
body {
	background-color: var(--color-white);
	line-height: 1;
	font-family: "Noto Sans JP", sans-serif; /*全体の書体を指定する*/
	font-style: normal;
	font-weight: 500;
	font-size: var(--ft-size20); /*全体のフォントサイズは20pxとする*/
	color: var(--color-black);
}

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

a:hover {
	opacity: .8;
}

strong {
	font-weight: 700;
}

/* common */
body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}

#wrapper {
	width: 100%; /*全ての要素を包括する<div id"wrap">の幅を画面幅に設定する*/
	margin: 0 auto;
}

/* header ---------------------------------------- */
/* ヘッダー */
header {
	position: fixed;
	top: 0;
	width: 100%;
	padding: 0;
	background-color: var(--main-color);
	z-index: 100;
}

.header-inner {
	position:relative;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	width: 100%;
	height: 65px;
	margin: 0 auto;
	padding: 0 20px;
}

/* サイトタイトル */
.site-title {
}

.site-title h1 {
}

.site-title h1 a {
	display:flex;
}

/* ヘッダーナビ */
#nav-btn {
	display:block;
}

#header-nav {
	display: block;
	position: fixed;
	top: 65px;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 1;
	background-color: rgba(221, 212, 208, 0.9);
	opacity: 0.5;
	transition: 0.2s;
}

header.open .header-inner {
	border-radius: 0;
	transition: 0.2s;
}

header.open #header-nav {
	height: 100%;
	opacity: 1;
}

#menu-header-nav {
	display: block;
	width: 100%;
	height: calc(100% - 65px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#menu-header-nav .nav-inner {
	display: grid;
	grid-template-columns: repeat(4,auto);
	width: 100%;
	line-height: 1.4;
	grid-row-gap: 4.8rem;
	grid-column-gap: 5.2rem;
	padding: 4.0rem;
	background-color: #FFFFFF;
}

/*
#menu-header-nav .nav-inner {
	display: flex;
	flex-flow: row nowrap;
	width: 100%;
	line-height: 1.4;
	gap: 4.8rem;
	padding: 4.0rem;
	background-color: #FFFFFF;
}

#menu-header-nav > li {
	margin: 0;
	border-left: 0;
	border-top: 2px solid var(--main-color);
	background-color: #FFFFFF;
}

#menu-header-nav > li:last-of-type {
	border-bottom: 2px solid var(--main-color);
}
*/

.nav-inner > ul {
	border: 1px solid var(--main-color);
	border-radius: 14px;
	background-color: #FCFBF5;
}

.nav-inner > ul > li > a {
	display: block;
	padding: 1.8rem 2.0rem;
	text-align: left;
	font-weight: 700;
	font-size: 1.6rem;
}

.nav-inner > ul > li::after {
	content: "";
	display: block;
	width: calc(100% - 4.0rem);
	height: 1px;
	margin: 0 auto;
	background-size: 14px 1px;
	background-image: linear-gradient(to right, var(--main-color) 10px, transparent 4px);
	background-repeat: repeat-x;
	background-position: left bottom;
}

.nav-inner > ul > li:last-of-type::after {
	content: none;
}

.nav-inner > ul > li > ul::before {
	content: "";
	display: block;
	width: calc(100% - 4.0rem);
	height: 1px;
	margin: 0 auto;
	background-size: 14px 1px;
	background-image: linear-gradient(to right, var(--main-color) 10px, transparent 4px);
	background-repeat: repeat-x;
	background-position: left top;
}

.nav-inner > ul > li > ul > li > a {
	display: block;
	padding: 1.4rem 2.0rem 1.4rem calc(2.0rem + 1em);
	text-align: left;
	font-size: 1.6rem;
}

.nav-inner ul li a.nav-icon {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 0.75em;
}

.nav-inner ul li a.nav-icon::before {
	content: "";
	width: 22px;
	height: 22px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

/* icon set */
.nav-inner ul li a.nav-icon.gnav01::before { background-image: url("../images/icon_gnav_home.svg"); }
.nav-inner ul li a.nav-icon.gnav02::before { background-image: url("../images/icon_gnav_topics.svg"); }
.nav-inner ul li a.nav-icon.gnav03::before { background-image: url("../images/icon_gnav_shop.svg"); }
.nav-inner ul li a.nav-icon.gnav04::before { background-image: url("../images/icon_gnav_faq.svg"); }
.nav-inner ul li a.nav-icon.gnav05::before { background-image: url("../images/icon_gnav_service.svg"); }
.nav-inner ul li a.nav-icon.gnav06::before { background-image: url("../images/icon_gnav_recruit.svg"); }
.nav-inner ul li a.nav-icon.gnav07::before { background-image: url("../images/icon_gnav_company.svg"); }
.nav-inner ul li a.nav-icon.gnav08::before { background-image: url("../images/icon_gnav_contact.svg"); }

.nav-inner ul li a.nav-icon.gnav05-01::before { background-image: url("../images/icon_gnav_service_s01.svg"); }
.nav-inner ul li a.nav-icon.gnav05-02::before { background-image: url("../images/icon_gnav_service_s02.svg"); }
.nav-inner ul li a.nav-icon.gnav05-03::before { background-image: url("../images/icon_gnav_service_s03.svg"); }
.nav-inner ul li a.nav-icon.gnav05-04::before { background-image: url("../images/icon_gnav_service_s04.svg"); }
.nav-inner ul li a.nav-icon.gnav05-05::before { background-image: url("../images/icon_gnav_service_s05.svg"); }

.nav-inner ul li a.nav-icon.gnav06-01::before { background-image: url("../images/icon_gnav_recruit_s01.svg"); }
.nav-inner ul li a.nav-icon.gnav06-02::before { background-image: url("../images/icon_gnav_recruit_s02.svg"); }
.nav-inner ul li a.nav-icon.gnav06-03::before { background-image: url("../images/icon_gnav_recruit_s03.svg"); }
.nav-inner ul li a.nav-icon.gnav06-04::before { background-image: url("../images/icon_gnav_recruit_s04.svg"); }

#nav-btn {
	position: absolute;
	top: 50%;
	right: 14px;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 12px 6px;
	border: 0;
	cursor: pointer;
	transform: translateY(-50%)
}

#nav-btn button {
  position: relative;
	display: block;
  width: 36px;
  height: 24px;
  margin: 0 auto;
	padding: 0;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-btn span {
  display: block;
  position: absolute;
  height: 4px;
  width: 50%;
  background: #FFFFFF;
  opacity: 1;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

#nav-btn span:nth-child(even) {
  left: 50%;
  border-radius: 0 4px 4px 0;
}

#nav-btn span:nth-child(odd) {
  left: 0;
  border-radius: 4px 0 0 4px;
}

#nav-btn span:nth-child(1), #nav-btn span:nth-child(2) {
  top: 0;
}

#nav-btn span:nth-child(3), #nav-btn span:nth-child(4) {
  top: 10px;
}

#nav-btn span:nth-child(5), #nav-btn span:nth-child(6) {
  top: 20px;
}

header.open #nav-btn span:nth-child(1),header.open #nav-btn span:nth-child(6) {
  transform: rotate(45deg);
}

header.open #nav-btn span:nth-child(2),header.open #nav-btn span:nth-child(5) {
  transform: rotate(-45deg);
}

header.open #nav-btn span:nth-child(1) {
  left: 3px;
  top: 4px;
}

header.open #nav-btn span:nth-child(2) {
  left: calc(50% - 3px);
  top: 4px;
}

header.open #nav-btn span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

header.open #nav-btn span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

header.open #nav-btn span:nth-child(5) {
  left: 3px;
  top: 16px;
}

header.open #nav-btn span:nth-child(6) {
  left: calc(50% - 3px);
  top: 16px;
}

/* footer ---------------------------------------- */
footer {
	width: 100%;
	background-color: var(--main-color);
	color: #FFFFFF;
}

.footer-inner {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 20px 66px;
}

.footer-inner > dl {
	padding: 0 3.0rem 0 0;
	flex-shrink: 0;
}

.footer-inner dl dt img {
	width: 100%;
	max-width: 205px;
	height: auto;
}

.footer-inner dl dd {
	margin: 0.5rem 0;
	line-height: 1.75;
	font-size: 1.6rem;
}

.footer-inner dl dd span {
	display: inline-block;
}

.footer-inner dl dd.map {
	text-align: right;
}

.footer-inner dl dd.map a {
	display: inline-flex;
	align-items: center;
}

.footer-inner dl dd.map a::after {
	content: "";
	margin-left: 0.5rem;
	width: 28px;
	height: 20px;
	background: url("../images/icon_blank_footer.svg?v=260406") 50% 50% no-repeat;
	background-size: contain;
	flex-shrink: 0;
}

/* フッターナビ */
.menu-footer-nav {
	display: grid;
	grid-template-columns: repeat(4,auto);
	margin: 0 0 0 auto;
	line-height: 1.4;
	font-size: 1.4rem;
	grid-row-gap: 4.8rem;
	grid-column-gap: 5.2rem;
}

.menu-footer-nav > ul {
}

.menu-footer-nav li + li {
	margin-top: 1.0rem;
}

.menu-footer-nav ul > li {
}

.menu-footer-nav ul > li > ul {
	margin-top: 1.0rem;
}

.menu-footer-nav ul > li > ul > li {
}

.menu-footer-nav ul > li > ul > li a {
	display: flex;
	align-items: center;
}

.menu-footer-nav ul > li > ul > li a::before {
	content: "・"
}

footer .copy {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	padding: 14px 20px 10px;
	background-color: var(--color-black);
	gap: 1.5rem;
}

footer .copy ul {
	display: flex;
	flex-flow: row wrap;
	font-size: 1.5rem;
	color: #FFFFFF;
}

footer .copy ul li:not(:last-of-type) {
	padding-right: 1.0rem;
}

footer .copy ul li + li {
	border-left: 1px solid #FFFFFF;
	padding-left: 1.0rem;
}

footer .copy p {
	font-size: 1.5rem;
}

/* ページトップ */
#page-top {
	position: fixed;
	right: 10px;
	bottom: -80px;
	line-height:0;
	z-index: 8;
}

#page-top a {
	display:block;
	width: 46px;
	height: 46px;
	border: 1px solid #ffffff;
	border-radius: 4px;
	background: var(--main-color) url(../images/cmn_btn_pgtop.svg) 50% 50% no-repeat;
	background-size: 100% 100%;
}


/* content ---------------------------------------- */
.breadcrumb {
	width: 100%;
}

.breadcrumb ul {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0;
	font-weight: 700;
	font-size: 1.6rem;
	gap: 1.0rem 0;
}

.breadcrumb ul li {
	display: flex;
	align-items: center;
	line-height: 1.2;
	color: var(--main-color);
}

.breadcrumb ul li:not(:last-of-type)::after {
	content: "";
	width: 11px;
	height: 11px;
	background: url("../images/icon_bclist_arw.svg") 50% 50% no-repeat;
	background-size: contain;
	margin: 2px 0.75em 0;
}

.breadcrumb ul li:first-of-type {
	flex-shrink: 0;
}

.breadcrumb ul li:first-of-type img {
	margin-top: 1px;
}

.container {
	margin-top: 65px;
}

.contents {
}

.contents main {
	width: 100%;
	margin: 0 auto;
}

main h2 {
	margin: 8.0rem 0 2.4rem;
	text-align: center;
	line-height: 1.2;
	font-weight: 600;
	font-size: var(--ft-size34);
}

/*
section {
}

section .section-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

section .section-inner.w100 {
	max-width: none;
	padding: 0;
}
*/

/* Module ---------------------------------------- */
.mod-follow-us {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 40px 20px;
	color: var(--color-white);
}

.mod-follow-us h2 {
	display: inline-flex;
	align-items: center;
	margin-bottom: 2.8rem;
}

.mod-follow-us ul {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	margin-bottom: 7.2rem;
	gap: 1.2rem 2.4rem;
}

.mod-follow-us div.form {
	position: relative;
	width: min(100%, 420px);
	border-radius: 99em;
	border-bottom: 3px solid #D6D7D7;
}

.mod-follow-us div.form::after {
	content: "";
	display: block;
	position: absolute;
	right: 2.2rem;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: auto;
	background: url("../images/icon_cl_arrow_blk.svg") 50% 50% no-repeat;
	transform: translateY(-50%);
	transition: all .3s;
	z-index: 1;
}

.mod-follow-us div.form:hover::after {
	right: 1.4rem;
}

.mod-follow-us div.form a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1.2rem 4.0rem 1.4rem;
	border-radius: 99em;
	border: 1px solid #999A9A;
	background-color: #FFFFFF;
	font-weight: 700;
	color: #444444;
}

.mod-follow-us div.form a::before {
	content: "";
	width: 30px;
	height: 30px;
	margin: 0.3rem 1.4rem 0 0;
	background: url("../images/cmn_icon_mail.svg") 50% 50% no-repeat;
	flex-shrink: 0;
}

.mod-follow-us div.form:hover a {
	opacity: 1;
	color: var(--main-color);
}

.anchor {
	display: block;
	transform: translate(0, -65px);
}

/* ================================================ */
@media (min-width: 1001px) {
}

/* ================================================ */
@media (max-width: 1000px) {

#menu-header-nav .nav-inner {
	grid-template-columns: repeat(2,auto);
	grid-row-gap: 3.0rem;
	grid-column-gap: 3.0rem;
}

.nav-inner > ul:nth-of-type(3) > li:last-of-type {
	border-bottom: 0;
}

/* フッターナビ */
.menu-footer-nav {
	grid-template-columns: repeat(2,auto);
}

footer .copy {
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}
}

/* ================================================ */
@media (max-width: 768px) {

:root {
	--ft-size18: 1.7rem;
	--ft-size20: 1.8rem;
	--ft-size22: 2.0rem;
	--ft-size24: 2.2rem;
	--ft-size25: 2.3rem;
	--ft-size26: 2.4rem;
	--ft-size28: 2.6rem;
	--ft-size30: 2.8rem;
	--ft-size34: 3.0rem;
	--ft-size36: 3.2rem;
	--ft-size42: 3.8rem;
	--ft-size48: 4.2rem;
}

/* footer ---------------------------------------- */
footer {
}

.footer-inner {
	display: block;
	padding: 34px 20px 40px;
}

.footer-inner > dl {
	display: block;
	margin: 0 0 40px;
	padding: 0;
	text-align: center;
}

.footer-inner dl dd {
	margin: 2.4rem 0 0 0;
}

.footer-inner dl dd.map {
	margin: 0.5rem 0 0 0;
	text-align: center;
}

.menu-footer-nav {
	width: 100%;
	display: block;
}

.menu-footer-nav > ul {
	width: 100%;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}

.menu-footer-nav > ul:first-of-type {
	border-radius: 10px 10px 0 0;
}

.menu-footer-nav > ul:last-of-type {
	border-bottom: 1px solid #FFFFFF;
	border-radius: 0 0 10px 10px;
}

.menu-footer-nav li + li {
	margin-top: 0;
}

.menu-footer-nav > ul > li:not(:first-of-type) {
	border-top: 1px solid #FFFFFF;
}

.menu-footer-nav ul > li > ul {
	margin-top: 0;
	display: block;
}

.menu-footer-nav ul > li > ul > li {
	width: 100%;
	border-top: 1px dashed #FFFFFF;
}

.menu-footer-nav a {
	display: block;
	width: 100%;
	padding: 1.2rem 2.0rem;
	font-size: 1.5rem;
}

footer .copy p {
	font-size: 1.3rem;
}

/* content ---------------------------------------- */
.container {
	margin-top: 65px;
}

/* Module ---------------------------------------- */
.mod-follow-us h2 img {
	width: clamp(260px,41.66vw,320px);
	height: auto;
}

}

/* ================================================ */
@media (max-width: 480px) {

#menu-header-nav .nav-inner {
	display: block;
}

#menu-header-nav .nav-inner > ul + ul {
	margin-top: 3.0rem;
}

.nav-inner > ul > li:last-of-type {
	border-bottom: 0;
}

/* footer ---------------------------------------- */
footer {
}

/* content ---------------------------------------- */

body.single-topics .breadcrumb ul li:last-of-type span {
	display: none;
}

body.single-topics .breadcrumb ul li:last-of-type::before {
	content: "お知らせ詳細";
}

.container {
}

}