@charset "utf-8";

/* ======================================
   etc
====================================== */

@import "./src/jQ.HumbergerNav.css";

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400&display=swap");

/* fix footer to bottom => ref:common.js */
/* body.__footer_bottom {
	position : relative;
	height : 100%;
}
body.__footer_bottom #pageFooter {
	position : fixed;
	bottom : 0;
	width : 100%;
} */

/* pagetop */
body.__fixed_pagetop_before #pageTop {
	opacity : 0;
}
body.__fixed_pagetop #pageTop,
body.__fixed_pagetop_after #pageTop {
	opacity : 1;
}
body.__fixed_pagetop #pageTop a {
	display : block;
	z-index : 1;
	position : fixed;
	right : 20px;
	bottom : 20px;
	overflow : hidden;
	width : 0;
	height : 0;
	padding : 60px 0 0 60px;
	border-radius : 3px;
	background-color : rgba(0, 0, 0, 0.7);
}
body.__fixed_pagetop #pageTop a::before {
	position : absolute;
	top : 50%;
	left : 50%;
	font-size : 24px;
	margin : -0.5em 0 0 -0.5em;
}

/* ======================================
   common
====================================== */

body > section:first-of-type {
	padding-top : 100px; /* pageHeader height*/
	transition : 0.3s ease-out;
}

#pageTop {
	transition : 0.3s ease-out;
	text-align : center;
	background-color : #333333;
}
#pageTop a {
	display : flex;
	justify-content : center;
	align-items : center;
	padding : 8px;
	text-decoration : none;
	color : #ffffff;
}

h2 {
	font-family : "Noto Serif JP";
	font-size : 1.8em;
	line-height : 1.45;
	margin-bottom : 1.25rem;
}

h3 {
	font-size : 1.2em;
	line-height : 1.45;
	margin-bottom : 1.25rem;
}

.ctsTitle {
	line-height : 1.75;
	margin-bottom : 1.6em;
}
.ctsTitle .sub {
	font-family : "Mulish", sans-serif;
}
.ctsTitle .eng {
	font-family : "Mulish", sans-serif;
	font-size : 0.5em;
	color : #5fb5b9;
}

a.linkBtn {
	display : inline-block;
	position : relative;
	line-height : 1.45;
	padding : 0.5em 1em;
	text-align : center;
	text-decoration : none;
	color : #ffffff;
	background-color : #e8a8a8;
}
a.linkBtn:after {
	display : inline-block;
	margin-left : 0.5em;
	content : url(../img/icon_link_arrow.png);
}

/* ======================================
   pageHeader
====================================== */

#pageHeader {
	z-index : 10;
	position : sticky;
	top : 0;
	width : 100%;
	transition : 0.3s ease-out;
	background : #ffffff;
}
#pageHeader .inner {
	display : flex;
	flex-direction : row;
	justify-content : space-between;
	height : 98px;
	padding : 0 24px;
	transition : 0.3s ease-out;
}
#pageHeader .logo {
	flex-grow : 0;
}
#pageHeader .logo a {
	display : block;
	align-items : center;
	height : 74px;
	padding : 12px 0;
}
#pageHeader .logo img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#pageHeader .content {
	display : flex;
	flex-grow : 1;
	justify-content : flex-end;
}
#pageHeader .content > .subNav {
	display : flex;
	justify-content : center;
	align-items : center;
	order : 2;
}
#pageHeader .content > .subNav a {
	display : flex;
	font-family : "Noto Serif JP";
	justify-content : center;
	align-items : center;
	transition : 0.3s ease-out;
}
#pageHeader .content > .subNav .contact {
	display : flex;
	position : relative;
	line-height : 1;
	justify-content : center;
	align-items : center;
	padding : 0.5em 1em;
	text-align : center;
	text-decoration : none;
	color : #000000;
	background-color : #fed0d0;
	/* 追加 */
	font-size: .9em;
}/* /追加 */

#pageHeader .content > .subNav .contact::before {
	margin-right : 0.45em;
	content : url(../img/icon_mail.png);
}

/* ======================================
   globalNav
====================================== */

#globalNav {
	display : flex;
	position : static;
	order : 1;
	margin-right : 1.5em;
}
#globalNav ul {
	display : flex;
	justify-content : center;
	align-items : center;
	transition : 0.3s ease-out;
}
#globalNav ul li:not(:last-child) {
	margin-right : 1.1em;
}
#globalNav ul li a {
	position : relative;
	font-family : "Noto Serif JP";
	transition : 0.3s ease-out;
	text-decoration : none;
	color : #000000;
	/* 追加 */
	font-size: .9em;
}

/* ======================================
   pageBody
====================================== */

#contentHeader #pageCategory {
	display : flex;
	font-size : 2.75rem;
	line-height : 1;
	flex-direction : column;
	justify-content : flex-end;
	max-width : 976px;
	height : 180px;
	margin : 0 auto;
	padding : 0 24px;
	background : url("/img/bg_content_header_mask.png") 0 0 repeat-y;
}
#contentHeader #pageCategory span {
	display : block;
	font-size : 1.2rem;
	margin : 4px 0 16px;
	letter-spacing : 1px;
}
#contentHeader #breadcrumb {
	background-color : #ffe3a0;
}
#contentHeader #breadcrumb ul {
	display : flex;
	max-width : 976px;
	margin : 0 auto;
	padding : 0 24px;
}
#contentHeader #breadcrumb ul li {
	position : relative;
	overflow-x : hidden;
	line-height : 1;
	flex-shrink : 0;
}
#contentHeader #breadcrumb ul li:last-child {
	flex-grow : 1;
}
#contentHeader #breadcrumb ul li::before {
	position : absolute;
	top : 55%;
	left : 5px;
	width : 4px;
	height : 4px;
	margin-top : -4px;
	content : "";
	transform : rotate(45deg);
	border-top : solid 1px #222222;
	border-right : solid 1px #222222;
}
#contentHeader #breadcrumb ul li.home {
	display : flex;
	flex-grow : 0;
	justify-content : center;
	align-items : center;
	padding : 0;
}
#contentHeader #breadcrumb ul li.home::before {
	display : none;
}
#contentHeader #breadcrumb ul li:last-child {
	flex-shrink : 1;
}
#contentHeader #breadcrumb ul li > * {
	display : inline-block;
	overflow : hidden;
	padding : 0.8rem 0 0.8rem 20px;
	text-overflow : ellipsis;
	white-space : nowrap;
}
#contentHeader #breadcrumb ul li.home a {
	width : 0;
	padding-left : 1rem;
	text-overflow : unset;
}
#contentHeader #breadcrumb ul li.home a::before {
	display : block;
	position : absolute;
	left : 0;
	font-family : "micon";
	content : "\e001";
}
#contentHeader #breadcrumb ul li h1 {
	font-weight : normal;
}
#contentHeader #contentTitle {
	font-size : 1.75rem;
	line-height : 1;
	padding : 1.2rem;
	text-align : center;
	letter-spacing : 2px;
	color : #ffffff;
	background-color : #fdbb82;
}

#pageBody > .inner,
#pageBody > section > .inner {
	max-width : 976px;
	margin : 0 auto;
	padding : 0 24px;
}
#pageBody > section {
	padding : 80px 0;
	background-color : #ffffff;
}
#pageBody > section:nth-of-type(2n) {
	background-color : #f3f3f3;
}

#pageTop a::before {
	font-family : "micon";
	font-size : 0.8rem;
	content : "\e767";
}


/* ======================================
  pageContact
====================================== */

/* contact */
section#contact {
	background : url(../../img/bg_contact.jpg) 0 0 no-repeat;
	background-size : cover;
}
#contact h2, #contact h3 {
	text-align : center;
}
#contact .column {
	display : flex;
	text-align : center;
}
#contact .column > * {
	flex-basis : 50%;
}
#contact .column h3 {
	text-align : center;
}
#contact .column .tel p {
	font-family : "Mulish", sans-serif;
	font-size : 2.6em;
	line-height : 1;
	color : #da8888;
}


/* ======================================
   pageFooter
====================================== */

#pageFooter > .inner {
	display : flex;
	flex-wrap : wrap;
	max-width : 976px;
	margin : 0 auto;
	padding : 40px 24px;
}

/* 追加 */
#pageFooter > .logo {
	width: 150px;
}
/* /追加 */

#pageFooter #footerNav {
	display : flex;
	flex-grow : 1;
	justify-content : flex-end;
	align-items : center;
}
#pageFooter #footerNav > ul {
	display : flex;
	flex-wrap : wrap;
	transition : 0.3s ease-out;
	border-left : 1px solid #dddddd;
}
#pageFooter #footerNav > ul > li {
	flex-grow : 1;
	padding : 0 1.2em;
	border-right : 1px solid #dddddd;
}
#pageFooter #footerNav > ul > li a {
	position : relative;
	font-size : 0.8em;
	text-decoration : none;
	color : #777777;
}
#copyright {
	padding : 1em 0;
	text-align : center;
	color : #ffffff;
	background-color : #e8a8a8;
}

/* body */

#pageTitle {
	display : flex;
	justify-content : center;
	align-items : center;
	height : 280px;
	background-position : 50%;
	background-size : cover;
}
#pageTitle h1 {
	font-size : 2.4em;
	text-align : center;
	text-shadow : 0 0 0.2em rgb(0 0 0 / 80%), 0 0 0.4em rgb(0 0 0 / 40%),
	0 0 0.6em rgb(0 0 0 / 30%);
	letter-spacing : 0.2em;
	color : #ffffff;
}
#pageTitle span {
	display : block;
	font-size : 0.45em;
	margin-top : 1em;
	letter-spacing : 1px;
}

.pageNav {
	display : flex;
	z-index : 2;
	position : sticky;
	top : 90px;
	justify-content : center;
	padding : 16px 32px;
	background-color : #fff7e6;
}
.pageNav ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap : 1em;
}
.pageNav ul li {
	display : flex;
}
.pageNav ul li > * {
	flex-grow : 1;
	padding : 1em 2em;
	text-align : center;
	border-radius : 0.2em;
}
.pageNav ul li > span {
	background-color : #f6bf1c;
}
.pageNav ul li > a {
	border : 1px solid #f6bf1c;
	background-color : #ffffff;
}

#pageBody > section#merit {
	padding : 40px 0;
	background-color : #faecd8;
}
#merit .ctsList {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap : 24px;
}
#merit .ctsList > li {
	background-color : #ffffff;
	box-shadow : 0 0 2px rgba(0, 0, 0, 0.2);
}
#merit .ctsList > li .img img {
	width : 100%;
}
#merit .ctsList > li h3 {
	margin-bottom : 0;
	padding : 0.2em;
	text-align : center;
	color : #ffffff;
	background-color : #e69a31;
}
#merit .ctsList > li .txt {
	padding : 1em;
}

/* --- for 2K or more pc --- 
@media screen and (min-width: 1980px) {
}
*/
/* --- for HD pc --- 
@media screen and (min-width: 1440px) and (max-width: 1979px) {
}
*/
/* --- for pc --- 
@media screen and (min-width: 1024px) {
}
*/

/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	#pageHeader {
		box-shadow : 0 0 4px -2px #000000;
	}
	#pageHeader .inner {
		height : 78px;
		padding : 0 86px 0 0;
	}
	#pageHeader .logo {
		width : 180px;
	}
	#pageHeader .logo a {
		height : 54px;
	}
	#globalNav {
		display : block;
		position : fixed;
		height : 100%;
		margin-right : 0;
	}
	#globalNav ul {
		display : block;
		border-left : 1px solid #eeeeee;
	}
	#globalNav ul li {
		border-bottom : 1px solid #eeeeee;
	}
	#globalNav ul li a {
		display : block;
		padding : 1.4em 1em;
		/* 追加 */
		font-size: 1em;
	}

	/* 追加 */
	#pageFooter > .logo {
		width: 150px;
	}
	/* /追加 */


	/*フッター修正*/
	#pageFooter > .inner {
		justify-content: center;
	}
	
	
	#pageFooter #footerNav {
		justify-content : center;
		margin: 1.5em 0;
	}
	/*フッター修正*/
}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	/* ======================================
	   common
	====================================== */

	#pageHeader > .inner,
	#pageFooter > .inner {
		min-width : 320px;
		margin : 0 auto;
	}

	body {
		min-width : 320px;
		transition : 0.3s ease-out;
	}

	body > section:first-of-type {
		transition : 0.3s ease-out;
	}

	h2 {
		font-size : 5vw;
	}

	#pageBody > section {
		padding : 40px 0;
	}

	/* ======================================
	   pageHeader
	====================================== */
	#pageHeader {
		box-shadow : 0 0 2px rgba(0, 0, 0, 0.2);
	}
	#pageHeader .logo {
		width : 160px;
	}
	#pageHeader .logo img {
		width : 100%;
	}
	#pageHeader .logo a {
		height : 54px;
	}
	#pageHeader .inner {
		height : 78px;
	}
	#pageHeader .content {
		margin-right : 48px;
	}
	#pageHeader .content > .subNav .contact {
		display : block;
		overflow : hidden;
		width : 0;
		height : 0;
		padding : 78px 72px 0 0;
		background : url(../img/icon_mail.png) 50% 50% no-repeat #fed0d0;
		/* 追加 */
		font-size: 1em;
		/* /追加 */
	}
	#pageHeader .content > .subNav .contact::before {
		display : none;
	}

	/* ======================================
	  globalNav
	====================================== */

	#globalNav {
		display : block;
		position : fixed;
		height : 100%;
		margin-right : 0;
	}
	#globalNav ul {
		display : block;
	}
	#globalNav ul li {
		border-bottom : 1px solid #eeeeee;
	}
	#globalNav ul li:not(:last-child) {
		margin-right : 0;
	}
	#globalNav ul li a {
		display : block;
		padding : 1.4em 1em;
		/* 追加 */
		font-size: 1em;
	}


	/* ======================================
	   pageContact
	====================================== */


	#contact .column {
		display : block;
	}
	#contact .column h3 {
		margin-bottom : 0.5em;
	}
	#contact .column .tel {
		margin-bottom : 2em;
	}
	#contact .column .tel p {
		font-size : 2em;
	}

	/* ======================================
	   pageFooter
	====================================== */
	#pageFooter > .inner {
		display : block;
		padding : 0;
	}
	#pageFooter > .inner > .logo {
		margin-bottom : 1em;
		padding : 24px;
		text-align : center;
	}
	/* #pageFooter > .inner > .logo img {
		width : 100%;
	} */
	#pageFooter #footerNav {
		display : block;
	}
	#pageFooter #footerNav ul {
		display : grid;
		grid-template-columns : 1fr 1fr;
		flex-wrap : wrap;
		border-top : 1px solid #dddddd;
		border-left : none;
	}
	#pageFooter #footerNav > ul > li {
		padding : 0;
		border-right : none;
		border-bottom : 1px solid #dddddd;
	}
	#pageFooter #footerNav > ul > li:nth-child(odd) {
		border-right : 1px solid #dddddd;
	}
	#footerNav li a {
		display : block;
		padding : 1.25em;
	}
	#copyright {
		font-size : 2vw;
	}
}