/* ======================================
   etc
====================================== */
@import url(../js/src/jQ.HumbergerNav.css);
@import url("https://fonts.googleapis.com/css2?family=Oswald&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%;
}

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

body * {
	box-sizing : border-box;
}

#pageHeader > .inner {
	max-width : 1580px;
	margin : 0 auto;
	padding : 0 32px;
}
#pageBody > section > .inner {
	max-width : 1380px;
	margin : 0 auto;
	padding : 0 32px;
}
#pageBody > section#pageTitle > .inner {
	max-width : 1580px;
}
#pageFooter > .inner {
	max-width : 1254px;
	margin : 0 auto;
	padding : 0 32px;
}

.linkBtn {
	display : flex;
	position : relative;
	justify-content : space-between;
	align-items : center;
	padding : 1em 2em 1em 1em;
	cursor : pointer;
	transition : background-color 0.3s;
	text-decoration : none;
	color : #ffffff;
	background-color : #333333;
}
.linkBtn:hover {
	background-color : #444444;
}
.linkBtn::after {
	display : inline-block;
	position : absolute;
	top : 50%;
	right : 12px;
	width : 5px;
	content : url("/wp/wp-content/themes/wraymer_com/common/img/svg_link_arrow.svg");
	transform : translateY(-50%);
}

.linkBtn.next {
	background-color : #2483b2;
}
.linkBtn.next:hover {
	background-color : #3d99c6;
}
.linkBtn.back {
	padding : 1em 1em 1em 2em;
}
.linkBtn.back::after {
	display : inline-block;
	position : absolute;
	top : 50%;
	left : 12px;
	width : 5px;
	content : url("/wp/wp-content/themes/wraymer_com/common/img/svg_link_arrow.svg");
	transform : translateY(-50%) rotate(180deg);
}
.linkBtn.noicon {
	padding : 1em;
}
.linkBtn.noicon::after {
	display : none;
}


.listTable {
	border-top : 1px dotted #000000;
}
.listTable > li {
	display : grid;
	grid-template-columns : 16em 1fr;
	border-bottom : 1px dotted #000000;
}
.listTable > li > * {
	padding : 1em;
}
.listTable > li > *:first-child {
	font-weight : bold;
}
.listTable > li  .necessary {
	font-weight : bold;
	color : #cc0000;
}
.listTable > li > .content > p:not(:last-child) {
	margin-bottom : 1em;
}
.listTable > li > .content .caption {
	font-size : 0.875em;
	color : #777777;
}
@media screen and (max-width: 767px) {
	.listTable > li {
		display : block;
	}
	.listTable > li > *:first-child {
		padding : 1em 1em 0;
	}
}

.ispc {
	display : unset;
}
.issp {
	display : none;
}
.istab {
	display : none;
}
@media screen and (min-width: 768px) and (max-width: 1380px) {
	.ispc {
		display : none;
	}
	.issp {
		display : none;
	}
	.istab {
		display : unset;
	}
}
@media screen and (max-width: 767px) {
	.ispc {
		display : none;
	}
	.issp {
		display : unset;
	}
	.istab {
		display : none;
	}
}

/* pagenation */
.pagenation {
	display : flex;
	justify-content : center;
	align-items : center;
	margin-top : 40px;
}
.pagenation .pagenation__body {
	display : flex;
	justify-content : center;
}

.pagenation a {
	position : relative;
	transition : 0.2s ease-in-out;
}

.pagenation a,
.pagenation span {
	display : flex;
	justify-content : center;
	align-items : center;
	margin : 0 4px;
	padding : 0.5em 1em;
	text-decoration : none;
	border : #cccccc 1px solid;
	border-radius : 2px;
	background-color : #ffffff;
}
.pagenation .current a,
.pagenation .current span {
	color : #ffffff;
	border : none;
	background-color : #222222;
}

.pagenation .pagenation__prev a {
	padding-left : 30px;
}

.pagenation .pagenation__prev a,
.pagenation .pagenation__next a {
	position : relative;
	width : auto;
}

.pagenation .pagenation__prev a::before,
.pagenation .pagenation__next a::before {
	position : absolute;
	top : 50%;
	left : 0.2em;
	font-family : "Material Icons";
	content : "\e314";
	transform : translateY(-50%);
}

.pagenation .pagenation__next a {
	padding-right : 30px;
}

.pagenation .pagenation__next a::before {
	right : 0.2em;
	left : auto;
	content : "\e315";
}

.pagenation span.is-current,
.pagenation a:hover {
	font-weight : 700;
	color : #ffffff;
	border-color : #535353;
	background-color : #535353;
}

.pagenation .notNumbering span {
	border : none;
	background-color : transparent;
}

.__folder {
	position : relative;
	overflow-y : hidden;
	max-height : 100px;
	padding-bottom : 0;
	transition : max-height 0.3s ease-out;
}
.__folder.__open {
	max-height : 100%;
	padding-bottom : 3em;
}
.__folder .__folder_btn {
	display : flex;
	position : absolute;
	bottom : 0;
	left : 0;
	justify-content : center;
	align-items : center;
	width : 100%;
	height : 4em;
	cursor : pointer;
	background : linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 25%, rgba(255,255,255,1) 100%);
}
.__folder .__folder_btn::before {
	font-family : "Material Icons";
	content : "\ead0";
	transform : translateY(70%);
}
.__folder.__open .__folder_btn::before {
	content : "\eacf";
}

input.short,
select.short {
	width : 6em;
}
input.middle,
select.middle {
	width : 16em;
}
input.long,
select.long {
	width : 32em;
}
input.max,
select.max {
	width : 100%;
}
textarea.short {
	width : 100%;
	height : 2em;
}
textarea.middle {
	width : 100%;
	height : 4em;
}
textarea.long {
	width : 100%;
	height : 8em;
}

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

#pageHeader {
	z-index : 10;
	position : relative;
	background-color : #ffffff;
}
#pageHeader > .inner {
	display : grid;
	grid-template-columns : 220px 1fr;
	grid-template-rows : auto 1fr;
	grid-gap : 0 24px;
	height : 100px;
}
#headerNav {
	display : flex;
	grid-column : 1/3;
	grid-row : 1/2;
	font-size : clamp(0.685em, 1vw, 0.9275em);
	margin : 0 calc(calc(100vw - 100%) / -2);
	padding : 0.5em calc(calc(100vw - 100%) / 2);
	background-color : #f2f3f3;
}
#headerNav p {
	flex-grow : 1;
}
#headerNav > ul {
	display : flex;
	align-items : center;
}
#headerNav > ul > li {
	padding : 0 0.75em;
}
#headerNav > ul > li:not(:first-child) {
	border-left : 1px solid #333333;
}
#rogo {
	display : flex;
	grid-column : 1/2;
	grid-row : 2/3;
	align-items : center;
}
#rogo a {
	display : flex;
	width : 100%;
	height : 100%;
	text-decoration : none;
}
#rogo img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#rogo span {
	display : none;
}

/* ======================================
   globalNav
====================================== */
#globalNav {
	display : flex;
	grid-column : 2/3;
	grid-row : 2/3;
	justify-content : space-between;
}
#globalNav .main {
	display : grid;
	grid-template-columns : auto auto auto auto auto auto;
}
#globalNav .main > li {
	display : flex;
}
#globalNav .main > li > a {
	display : flex;
	position : relative;
	font-weight : bold;
	justify-content : center;
	align-items : center;
	padding : 0 16px;
	cursor : pointer;
	text-decoration : none;
}
#globalNav .sub {
	display : flex;
	grid-template-columns : auto auto auto;
	grid-gap : 22px;
	padding : 14px 0;
}
#globalNav .sub > li > a {
	display : flex;
	font-weight : bold;
	align-items : center;
	height : 100%;
	padding : 0 20px;
	transition : background-color 0.3s;
	text-decoration : none;
	color : #ffffff;
	border-radius : 22px;
	background-color : #333333;
}
#globalNav .sub > li > a:hover {
	background-color : #444444;
}
#globalNav .sub > li > a img {
	width : 20px;
	margin-right : 10px;
}
#globalNav .sub .searchbar input {
	padding-left : 36px;
	border-radius : 4px;
	background : url("/wp/wp-content/themes/wraymer_com/common/img/icon_search.svg") 8px 50% no-repeat;
	background-size : auto 60%;
}
#globalNav .sub .searchbar input::placeholder {
	color : #555555;
}


/* ======================================
   pageBody
====================================== */
#pageBody {
	overflow : hidden;
}
#pageBody #contentTitle {
	font-size : 1.6em;
	font-weight : bold;
	margin-bottom : 1.275em;
	background : url("/wp/wp-content/themes/wraymer_com/common/img/bg_dot_two_line.gif") 0 50% repeat-x;
}
#pageBody #contentTitle span {
	padding-right : 0.5em;
	background-color : #ffffff;
}
#pageBody > section > .inner.column {
	display : grid;
	grid-template-columns : 300px 1fr;
	grid-gap : 40px;
}
#pageBody #main {
	margin-bottom : 60px;
}
#pageBody #main > section {
	margin-bottom : 40px;
}
#pageBody #main > section .column {
	display : grid;
	grid-template-columns : auto auto;
	grid-gap : 32px;
}
#pageBody #main .headline {
	font-size : 1.325em;
	font-weight : bold;
	margin-bottom : 1.275em;
	padding-bottom : 0.725em;
	border-bottom : 1px dotted #000000;
}
#pageBody #main .hd_bar {
	position : relative;
	font-size : 1.275em;
	font-weight : bold;
	margin-bottom : 1.275em;
	padding-left : 1.25em;
}
#pageBody #main .hd_bar:before {
	display : inline-block;
	position : absolute;
	top : 0.75em;
	left : 0;
	width : 1em;
	height : 1em;
	margin-right : 0.25em;
	content : "";
	transform : translateY(-50%);
	background : url("/wp/wp-content/themes/wraymer_com/common/img/bg_bar_bk_li.gif") 50% 50% no-repeat;
}
#pageBody #main > section > p:not(:last-child) {
	margin-bottom : 1em;
}
#pageBody #main .img {
	margin : 0 auto;
	margin-bottom : 40px;
}
#pageBody #main .img img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}


#pageBody section > header {
	margin-bottom : 40px;
}
#pageBody section > .content:not(:last-child) {
	margin-bottom : 40px;
}
#pageBody .content p:not(:last-of-type) {
	margin-bottom : 1em;
}

.list_bar {
	padding-left : 1.25em;
}
.list_bar > li {
	position : relative;
	text-indent : -1.25em;
}
.list_bar > li:not(:last-child) {
	margin-bottom : 0.5em;
}
.list_bar > li:before {
	display : inline-block;
	width : 1em;
	height : 1em;
	margin-right : 0.25em;
	content : "";
	background : url("/wp/wp-content/themes/wraymer_com/common/img/bg_bar_bk_li.gif") 50% 50% no-repeat;
}

.list_number {
	padding-left : 1.5em;
}
.list_number > li {
	position : relative;
	list-style : decimal;
}
.list_number > li:not(:last-child) {
	margin-bottom : 0.5em;
}

.table_basic {
	width : 100%;
	border-collapse : collapse;
}
.table_basic caption {
	font-weight : bold;
	margin-bottom : 1em;
	text-align : left;
}
.table_basic tr > * {
	padding : 1.5em;
	border-bottom : 1px dotted #000000;
}
.table_basic tr:first-child > * {
	border-top : 1px dotted #000000;
}
.table_basic tr > th {
	font-weight : bold;
	text-align : left;
	vertical-align : middle;
}

#pageNav {
	display : flex;
	justify-content : space-between;
}
#pageNav  a {
	display : block;
	min-width : 20em;
	padding : 1em;
	text-decoration : none;
	border : 1px solid #cccccc;
}
#pageNav  .next a {
	position : relative;
	padding-right : 2.5em;
	text-align: right;
}
#pageNav  .next a::after {
	display : block;
	position : absolute;
	top : 50%;
	right : 1em;
	font-family : "Material Icons";
	line-height : 1;
	width : 1em;
	height : 1em;
	content : "\e5df";
	transform : translateY(-50%);
	color : #ffffff;
	border-radius : 50%;
	background-color : #222222;
}
#pageNav .prev a {
	position : relative;
	padding-left : 2.5em;
}
#pageNav .prev a::before {
	display : block;
	position : absolute;
	top : 50%;
	left : 1em;
	font-family : "Material Icons";
	line-height : 1;
	width : 1em;
	height : 1em;
	content : "\e5de";
	transform : translateY(-50%);
	color : #ffffff;
	border-radius : 50%;
	background-color : #222222;
}



#subNav dl > dt {
	font-family : "Century Gothic", "arial Black", sans-serif;
	font-size : 1.125em;
	margin : 0;
	padding : 0.5em 0.75em;
	color : #ffffff;
	background-color : #606060;
}
#subNav dl > dd:not(:last-child) {
	border-bottom : 1px dotted #e1e1e1;
}
#subNav dl > dd > a {
	display : block;
	position : relative;
	margin : 0;
	padding : 1em 0.5em 1em 2em;
	text-decoration : none;
	color : #333333;
}
#subNav dl > dd > a::before {
	display : block;
	position : absolute;
	top : 50%;
	left : 0.5em;
	font-family : "Material Icons";
	content : "\e5df";
	transform : translateY(-50%);;
}
#subNav dl > dd > a:hover {
	color : #2483b2;
}

/* breadcrumb */
#breadcrumb {
	margin-bottom : 40px;
	background-color : #ffffff;
}
#breadcrumb ul {
	display : flex;
	max-width : 1580px;
	margin : 0 auto;
	padding : 0 32px;
}
#breadcrumb ul li {
	position : relative;
	overflow : hidden;
	line-height : 1;
	flex-shrink : 0;
	font-size: 0.725em;
}
#breadcrumb ul li:last-child {
	flex-grow : 1;
}
#breadcrumb ul li::before {
	display : block;
	position : absolute;
	top : 50%;
	left : 6px;
	width : 4px;
	height : 4px;
	content : "";
	transform : translateY(-50%) rotate(45deg);
	border-top : 1px solid #222222;
	border-right : 1px solid #222222;
}
#breadcrumb ul li:last-child {
	flex-shrink : 1;
}
#breadcrumb ul li > * {
	display : inline-block;
	overflow : hidden;
	padding : 1.275em 0 1.275em 24px;
	text-overflow : ellipsis;
	white-space : nowrap;
}
#breadcrumb ul li:first-child a {
	padding : 1.275em 0;
	text-overflow : unset;
}
#breadcrumb ul li:first-child::before {
	display : none;
}
#breadcrumb ul li h1 {
	font-weight : normal;
}

.notfound {
	font-size : 1.2em;
	padding : 100px 0;
	text-align : center;
	background-color : #ffffff;
}

/* ======================================
   pageTitle
====================================== */

#pageTitle {
	padding : 16px 0;
	border-top : 1px solid #eeeeee;
	border-bottom : 1px solid #eeeeee;
	background-color : #ffffff;
}
#pageTitle > .inner {
	display : grid;
	grid-template-columns : auto 1fr;
	grid-gap : 40px;
}
#pageTitle .headline {
	display : flex;
	font-size : 1.5em;
	font-weight: bold;
}
#pageTitle span {
	font-weight: normal;
	font-size : 0.725em;
	margin-top : 0.25em;
	margin-left : 0.5em;
	font-family: "Century Gothic", "arial Black", sans-serif;
}
#pageTitle p a {
	color : #1684b2;
}

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

#pageFooter {
	overflow : hidden;
	color : #ffffff;
	background-color : #333333;
}
#pageFooter > .inner > div:nth-child(1) {
	display : grid;
	grid-template-columns : auto auto;
	padding : 80px 0;
}
#pageFooter > .inner > div:nth-child(3) {
	display : grid;
	grid-template-columns : 1fr auto;
	padding : 20px 0;
	border-top : 1px solid #534f4f;
}
#pageFooter a {
	text-decoration: none;		
}
#pageFooter .rogo {
	display : flex;
	font-size : 0.875em;
	flex-direction : column;
	justify-content : center;
	color : #ffffff;
}
#pageFooter .rogo img {
	width : 260px;
	margin-bottom : 12px;
}
#pageFooter .contact {
	display : flex;
	justify-content : flex-end;
	align-items : center;
}
#pageFooter .contact .tel {
	display : flex;
	line-height : 1.45;
	flex-direction : column;
	justify-content : center;
	margin-right : 1em;
}
#pageFooter .contact .tel span {
	font-family : "Oswald", sans-serif;
	font-size : clamp(1em, 3vw, 1.275em);
}
#pageFooter .contact .tel span a {
	font-size : clamp(1.275em, 4vw, 1.75em);
	text-decoration : none;
}
#pageFooter .contact .mail {
	display : flex;
	height : 100%;
}
#pageFooter .contact .mail a {
	display : flex;
	font-family : "Oswald", sans-serif;
	font-size : clamp(1.275em, 4vw, 1.75em);
	align-items : center;
	padding : 0 1em;
	text-decoration : none;
	color : #ffffff;
	background-color : #2483b2;
}
#pageFooter .contact .mail a::before {
	display : inline-block;
	width : 32px;
	margin-right : 16px;
	content : url("/wp/wp-content/themes/wraymer_com/common/img/icon_mail_grey.svg");
}
#pageFooter #footerNav {
	padding : 40px 0;
	border-top : 1px solid #534f4f;
}
#pageFooter #footerNav ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr;
	grid-gap : 16px;
}

#pageFooter #footerNavSub {
	display : grid;
	grid-template-columns : 1fr auto;
	grid-gap : 16px;
}
#copyright {
	margin : 0 calc(calc(100vw - 100%) / -2);
	padding : 1.5em calc(calc(100vw - 100%) / 2);
	background-color : #222222;
}

@media screen and (min-width: 768px) and (max-width: 1380px) {
	#pageBody h2 {
		font-size : 1.2em;
	}
	#pageHeader > .inner {
		grid-template-columns : 120px 1fr;
		grid-gap : 0 16px;
	}
	#globalNav .main > li > a {
		font-size : 0.875em;
		padding : 0 12px;
	}
	#globalNav .sub {
		grid-gap : 16px;
	}
	#globalNav .sub > li {
		display : flex;
		justify-content : center;
		align-items : center;
	}
	#globalNav .sub > li > a {
		padding : 0;
		background-color : transparent;
	}
	#globalNav .sub > li > a:hover {
		background-color : transparent;
	}
	#globalNav .sub > li > a img {
		width : 30px;
		margin-right : 0;
		padding : 0;
	}
	#globalNav .sub .searchbar input {
		font-size : 0.725em;
		width : 11em;
		padding-left : 18px;
		background-position : 4px 50%;
		background-size : auto 40%;
	}
}

@media screen and (max-width: 767px) {
	/* .__humberger */

	body.__humberger_open {
		overflow : hidden;
	}
	.__humberger_overlay {
		display : none;
	}
	.__humberger.main {
		top : 72px;
		overflow-y : auto;
		width : 100vw;
		background-color : #ffffff;
	}
	.__humberger_close .__humberger.main {
		left : 0;
		overflow : hidden;
		height : 0;
	}
	.__humberger_open .__humberger.main {
		padding-bottom : 72px;
	}
	.__humberger_open .__humberger_toggle {
		top : 20px;
		left : 0;
	}

	.table_basic {
		border-top : 1px dotted #000000;
	}
	.table_basic tr > * {
		display : block;
		width : auto;
		padding : 24px 0;
	}
	.table_basic tr:first-child > * {
		border-top : none;
	}

	/* pageHeader */
	#pageHeader {
		position : sticky;
		top : 0;
		padding-top : 20px;
	}
	#pageHeader > .inner {
		display : flex;
		grid-gap : 0;
		justify-content : space-between;
		height : 52px;
		padding : 0 0 0 52px;
	}
	#breadcrumb {
		margin-bottom : 0px;
		background-color : #ffffff;
	}
	#headerNav {
		display : none;
	}
	#rogo {
		margin-left : 8px;
	}
	#rogo a {
		display : flex;
		flex-direction : column;
		justify-content : center;
		align-items : center;
		height : 52px;
	}
	#rogo img {
		width : 184px;
		height : auto;
		object-fit : unset;
	}
	#rogo span {
		display : block;
		position : absolute;
		top : 0;
		left : 0;
		font-size : 10px;
		line-height : 1;
		width : 100%;
		padding : 5px 8px;
		color : #ffffff;
		background-color : #333333;
	}

	#globalNav .sub {
		padding : 0;
	}
	#globalNav .sub > li > a {
		border-left : 1px solid #dddddd;
		border-radius : 0;
		background-color : transparent;
	}
	#globalNav .sub > li > a img {
		width : 30px;
		margin-right : 0;
	}
	#globalNav .sub .searchbar {
		display : none;
	}

	/* pageBody */

	#pageBody h2 {
		font-size : 1.2em;
	}
	#pageTitle > .inner {
		grid-template-columns : 1fr;
		grid-gap : 16px;
	}
	#pageTitle .headline {
		flex-direction: column;
  		align-items: left;
	}
	#pageTitle span {
		margin-top : 0.25em;
		margin-left : 0;
	}

	#breadcrumb ul {
		padding : 0 16px;
	}
	#pageBody > section > .inner {
		padding : 0 16px;
	}
	#pageBody > section > .inner.column {
		grid-template-columns : 1fr;
	}
	#pageBody #main > section .column {
		grid-template-columns : 1fr;
	}
	#pageBody #contentTitle {
		font-size : 1.325em;
	}
	#pageBody #main .headline {
		font-size : 1.175em;
	}
	#pageBody #main .hd_bar {
		font-size : 1em;
	}
	#subNav {
		display : none;
	}

	#pageNav {
		display : block;
	}
	#pageNav > *:not(:last-child) {
		margin-bottom : 20px;
	}

	#pageFooter > .inner > div:nth-child(1) {
		grid-template-columns : 1fr;
		padding : 40px 0;
		text-align : center;
	}
	#pageFooter .rogo {
		justify-content : center;
		align-items : center;
		margin-bottom : 24px;
	}
	#pageFooter .rogo img {
		width : 70%;
	}
	#pageFooter .contact {
		display : block;
	}
	#pageFooter .contact .tel {
		margin : 0 0 24px;
	}
	#pageFooter .contact .mail {
		height : auto;
	}
	#pageFooter .contact .mail a {
		flex-grow : 1;
		justify-content : center;
		padding : 1em;
	}
	#pageFooter #footerNav {
		padding : 24px 0;
		border-top : 1px solid #ffffff;
	}
	#pageFooter #footerNav ul {
		grid-template-columns : 1fr 1fr;
		margin-bottom : 24px;
	}
	#pageFooter #footerNav div {
		display : block;
		padding : 24px 0 0;
		border-top : 1px solid #ffffff;
	}
	#pageFooter > .inner {
		padding : 0 16px;
	}
	#pageFooter > .inner > div:nth-child(3) {
		display : flex;
		flex-direction : column-reverse;
		border-top : 1px solid #ffffff;
	}
	#pageFooter #footerNavSub {
		grid-template-columns : 1fr 1fr;
		margin-bottom : 24px;
		padding-bottom : 24px;
		border-bottom : 1px solid #ffffff;
	}
}