/* ======================================
   etc
====================================== */
@import url(./src/jQ.HumbergerNav.css);
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");

/*=======================*/
/* Loading                */
/*=======================*/
#loading {
	visibility : hidden;
	z-index : 9999;
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	        transition : opacity 1.5s, visibility 0s ease 1.5s;
	opacity : 0;
	background-color : #83c7e0;

	-webkit-transition : opacity 1.5s, visibility 0s ease 1.5s;
}
#loading.fadeout {
	visibility : visible;
	opacity : 1;
}
.loader {
	position : absolute;
	top : 50%;
	left : 45%;
	overflow : hidden;
	font-size : 50px;
	width : 1em;
	height : 1em;
	        transform : translateZ(0)translate(-50%,-50%);
	        animation : load 1.7s infinite ease, round 1.7s infinite ease;
	text-indent : -9999em;
	color : #ffffff;
	border-radius : 50%;

	-webkit-animation : load 1.7s infinite ease, round 1.7s infinite ease;
	-webkit-transform : translateZ(0)translate(-50%,-50%);
	    -ms-transform : translateZ(0)translate(-50%,-50%);
}
@-webkit-keyframes load {
	0% {
		box-shadow : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
	5%,
	95% {
		box-shadow : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
	10%,
	59% {
		box-shadow : 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
	}
	20% {
		box-shadow : 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
	}
	38% {
		box-shadow : 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
	}
	100% {
		box-shadow : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
}
@keyframes load {
	0% {
		box-shadow : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
	5%,
	95% {
		box-shadow : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
	10%,
	59% {
		box-shadow : 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
	}
	20% {
		box-shadow : 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
	}
	38% {
		box-shadow : 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
	}
	100% {
		box-shadow : 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
}
@-webkit-keyframes round {
	0% {
		        transform : rotate(0deg);

		-webkit-transform : rotate(0deg);
	}
	100% {
		        transform : rotate(360deg);

		-webkit-transform : rotate(360deg);
	}
}
@keyframes round {
	0% {
		        transform : rotate(0deg);

		-webkit-transform : rotate(0deg);
	}
	100% {
		        transform : rotate(360deg);

		-webkit-transform : rotate(360deg);
	}
}
.__pc {
	display : unset;
}
.__tab {
	display : none;
}
.__sp {
	display : none;
}

.anchor {
	scroll-margin-top : 94px;
}

/* pagetop */
#pageTop a {
	display : flex;
	z-index : 100;
	position : fixed;
	right : 0;
	bottom : 0;
	overflow : hidden;
	justify-content : center;
	align-items : center;
	width : 60px;
	height : 60px;
	background-color : rgba(0, 0, 0, 0.3);
}

/* jQPopupContent */
#jqPopupContent_window {
	z-index : 200;
	background : rgba(0, 0, 0, 0.4);
}
#jqPopupContent_container {
	padding : 32px;
	background : #ffffff;
}
#jqPopupContent_inner {
	overflow : auto;
	margin-bottom : 16px;
	padding : 32px;
	border : 1px solid #cccccc;
}
#jqPopupContent_container .__buttons {
	display : flex;
	justify-content : space-between;
}
#jqPopupContent_container .__buttons > div {
	width : 30%;
	min-width : 10em;
	margin : 0 auto;
	padding : 0.5em;
	cursor : pointer;
	text-align : center;
	color : #ffffff;
	background-color : #333333;
}

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

body {
	background-color : #ffffff;
}
body * {
	box-sizing : border-box;
}
main {
	overflow-x : hidden;
}
main > section:not(:last-child) {
	margin-bottom : 80px;
}

#pageBottom > .inner,
#pageFooter > .inner,
main > section > .inner {
	width : 100%;
	max-width : 1220px;
	margin : 0 auto;
	padding : 0 32px;
}

/* .anim {
	transition : 0.4s ease-out;
	transform : translateY(60px);
	opacity : 0;
}
.anim.fire {
	transform : translateY(0);
	opacity : 1;
} */

/* 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;
	height : 45px;
	margin : 0 5px;
	padding : 15px;
	text-decoration : none;
	border : #cccccc 1px solid;
	background-color : #ffffff;
}
.pagenation .current a,
.pagenation .current span {
	color : #ffffff;
	border : none;
	background-color : #1684b2;
}

.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;
}

/* contentHeader */
section#contentHeader {
	height : 340px;
}
section#contentHeader > .inner {
	position : relative;
	height : 100%;
}

#contentHeader .pagetitle::after {
	position : absolute;
	right : -25px;
	bottom : -24px;
	content : url(/wp/wp-content/themes/paginagrafico/common/img/img_shimaenaga.png);
	transform : rotate(-60deg) scale(0.7);
}
#contentHeader .pagetitle {
	position : absolute;
	top : 200px;
	left : 0;
	font-size : 2em;
	font-weight : bold;
	padding : 1.4em 60px;
	color : #ffffff;
	background : #418582;
}
#contentHeader .pagetitle .en {
	display : block;
	font-size : 0.625em;
	margin-bottom : 0.5em;
}

/* breadcrumb */
#breadcrumb {
	width : 100%;
	margin-bottom : 80px;
	padding : 15px 0;
	background-color : #f0f0f0;
}
#breadcrumb ul {
	display : flex;
	flex-wrap : wrap;
	max-width : 1220px;
	margin : 0 auto;
	padding : 0 32px;
}
#breadcrumb ul li {
	position : relative;
	font-size : 0.75rem;
	line-height : 1.45;
	color : #999999;
}
#breadcrumb ul li:not(:first-child) {
	padding-left : 2em;
}
#breadcrumb ul li:not(:first-child)::before {
	position : absolute;
	top : 50%;
	left : 8px;
	width : 6px;
	height : 6px;
	margin-top : -3px;
	content : "";
	transform : rotate(45deg);
	border-top : solid 1px #999999;
	border-right : solid 1px #999999;
}
#breadcrumb ul li a {
	text-decoration : underline;
	color : #999999;
}
#breadcrumb ul li a:hover {
	text-decoration : none;
}

/* anchornav */
#anchornav ul {
	display : flex;
	justify-content : center;
	max-width : 1220px;
	margin : 0 auto 80px;
	padding : 0 32px;
}
#anchornav ul > li:not(:last-child) {
	margin-right : 24px;
}
#anchornav ul > li a {
	display : block;
	position : relative;
	min-width : 12em;
	padding : 15px 40px;
	transition : 0.2s ease-in-out;
	text-align : center;
	text-decoration : none;
	color : #ffffff;
	border : 1px solid #418582;
	border-radius : 3em;
	background-color : #418582;
}
#anchornav ul > li a:hover {
	text-decoration : none;
	color : #418582;
	border : 1px solid #418582;
	background-color : #ffffff;
}
#anchornav ul > li a::after {
	position : absolute;
	top : 50%;
	right : 25px;
	width : 7px;
	height : 7px;
	content : "";
	transform : translateY(-50%) rotate(45deg);
	border-width : 1px 1px 0 0;
	border-style : solid solid none none;
	border-color : #ffffff #ffffff transparent transparent;
	vertical-align : middle;
}
#anchornav ul > li a:hover::after {
	border-color : #418582 #418582 transparent transparent;
}

/* linkBtn */
.linkBtn {
	display : block;
	position : relative;
	width : 260px;
	padding : 15px 40px;
	transition : 0.2s ease-in-out;
	text-align : center;
	text-decoration : none;
	color : #ffffff;
	border : 1px solid #418582;
	border-radius : 3em;
	background-color : #418582;
}

.linkBtn:hover {
	text-decoration : none;
	color : #418582;
	border : 1px solid #418582;
	background-color : #ffffff;
}

input.long,
select.long,
textarea.long {
	width : 24em;
}
input.middle,
select.middle,
textarea.middle {
	width : 16em;
}
input.short,
select.short,
textarea.short {
	width : 8em;
}
input.tel {
	width : 4em;
}
input.zipcode {
	width : 4em;
}

.hl02 {
	position : relative;
	margin-bottom : 0.5em;
	padding-bottom : 0.5em;
}
.hl02::after {
	display : block;
	position : absolute;
	bottom : 0;
	left : 0;
	width : 2em;
	height : 4px;
	content : "";
	border-radius : 2px;
	background-color : #2d64af;
}

.marker {
	background : linear-gradient(transparent 70%, #ebdf41 70%);
}

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

#pageHeader {
	z-index : 7;
	position : sticky;
	top : 0;
	width : 100%;
	height : 94px;
	background-color : #ffffff;
}
#pageHeader > .inner {
	display : flex;
	justify-content : space-between;
	height : 100%;
	padding : 0 24px;
}
#pageHeader .logo {
	display : flex;
	align-items : center;
	margin-right : 24px;
}
#pageHeader .logo img {
	width : 100%;
}

#globalNav {
	display : grid;
	grid-template-columns : 1fr auto;
	grid-gap : 32px;
	padding : 12px 0;
}
#globalNav .main {
	display : flex;
	height : 100%;
}
#globalNav .main > li {
	display : flex;
}
#globalNav .main > li:not(:last-child) {
	margin-right : 1em;
}
#globalNav .main a {
	display : flex;
	position : relative;
	font-weight : bold;
	justify-content : center;
	align-items : center;
	text-decoration : none;
}
#globalNav .main a::after {
	display : block;
	position : absolute;
	bottom : 0;
	left : 50%;
	width : 0;
	height : 1px;
	content : "";
	transition : 0.2s ease-out;
	background-color : #000000;
}
#globalNav .main a:hover::after {
	left : 0;
	width : 100%;
}

#globalNav .sub {
	display : flex;
	align-items : center;
	height : 100%;
	color : #2d64af;
	border : 4px solid #2d64af;
	border-radius : 40px;
}
#globalNav .sub > li {
	display : flex;
	font-weight : bold;
	height : 100%;
}
#globalNav .sub > li a {
	display : flex;
	align-items : center;
	text-decoration : none;
}
#globalNav .sub > li a img {
	margin-right : 12px;
}
#globalNav .sub > li:first-child a {
	padding-right : 16px;
	padding-left : 32px;
}
#globalNav .sub > li:last-child a {
	padding-right : 32px;
	padding-left : 16px;
}
#globalNav .sub > li:not(:last-child) {
	margin-right : 1em;
	border-right : 4px solid #2d64af;
}

/* ======================================
   pageBody
====================================== */
/* ======================================
   pageTitle
====================================== */
/* ======================================
   pageFooter
====================================== */

#pageFooter {
	background-color : #f1f1f1;
}
#pageFooter > .inner {
	display : grid;
	grid-template-columns : 1fr auto;
	grid-gap : 32px;
	position : relative;
	padding-top : 180px;
	padding-bottom : 60px;
}
#pageFooter .logo {
	margin-bottom : 24px;
}

#footerContact {
	display : flex;
	position : absolute;
	top : -60px;
	align-items : center;
	width : 100%;
	padding : 24px 32px;
	border : 4px solid #2d64af;
	border-radius : 8px;
	background-color : #ffffff;
}
#footerContact::before {
	display : block;
	position : absolute;
	top : -40px;
	left : 0;
	content : url("/wp/wp-content/themes/paginagrafico/common/img/img_footer_contact_illust.png");
}
#footerContact h2 {
	font-family : "Oswald";
	font-size : 2.4em;
	flex-grow : 1;
}
#footerContact .tel span {
	font-family : "Oswald";
	margin-left : 2em;
}
#footerContact .tel em {
	font-size : 2em;
	font-weight : normal;
}
#footerContact .mail {
	display : flex;
	font-family : "Oswald";
	font-size : 1.8em;
	justify-content : center;
	align-items : center;
	margin-left : 1em;
	padding : 0.5em 1em;
	border-radius : 8px;
	background-color : #ebdf41;
}
#footerContact .mail img {
	margin-right : 1em;
}


/* footerNav */
#footerNav {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap : 40px;
	margin-bottom : 40px;
}
#footerNav > ul > li:not(:last-child) {
	margin-bottom : 1em;
}
#footerNav > ul > li.child a {
	text-decoration : none;
}
#footerNav > ul > li.child a {
	position : relative;
	padding-left : 1.5em;
}
#footerNav > ul > li.child a::before {
	display : block;
	position : absolute;
	top : 50%;
	left : 0;
	width : 1em;
	height : 1px;
	content : "";
	background-color : #777777;
}


#copyright {
	font-size : 0.75em;
	padding : 1.5em 0 4em;
	text-align : center;
	color : #ffffff;
	background-color : #000000;
}

@media screen and (max-width: 767px) {
	.__pc {
		display : none;
	}
	.__tab {
		display : none;
	}
	.__sp {
		display : unset;
	}
	.anchor {
		scroll-margin-top : 80px;
	}
	#jqPopupContent_container {
		padding : 16px;
	}
	#jqPopupContent_inner {
		padding : 16px;
	}

	#breadcrumb {
		margin-bottom : 60px;
	}
	#anchornav ul {
		display : block;
	}
	#anchornav ul > li:not(:last-child) {
		margin-right : 0;
		margin-bottom : 12px;
	}
	#anchornav ul > li a {
		display : block;
		width : 100%;
	}

	section#contentHeader {
		height : 200px;
	}
	#contentHeader .pagetitle {
		top : 120px;
		font-size : 1.6em;
		padding : 1em 60px;
	}
	#contentHeader .pagetitle::after {
		right : -36px;
		bottom : -34px;
		transform : rotate(-60deg) scale(0.5);
	}

	/* pageHeader */
	#pageHeader {
		height : 80px;
	}
	#pageHeader .logo {
		width : clamp(240px, 42vw, 320px);
	}
	#pageHeader .logo a {
		font-size : 1em;
		padding : 0;
	}
	#globalNav {
		display : block;
		grid-template-columns : 1fr;
	}
	#globalNav .main {
		display : block;
		height : auto;
	}
	#globalNav .main > li {
		display : block;
	}
	#globalNav .main > li a {
		display : block;
		padding : 1em;
		border-bottom : 1px solid #dddddd;
	}
	#globalNav .main > li:not(:last-child) {
		margin-right : 0;
	}
	#globalNav .sub {
		display : block;
		height : auto;
		margin : 16px;
	}
	#globalNav .sub > li:not(:last-child) {
		margin-right : 0;
		border-right : none;
		border-bottom : 4px solid #2d64af;
	}
	#globalNav .sub > li {
		display : block;
	}
	#globalNav .sub > li a {
		display : flex;
		justify-content : center;
		align-items : center;
	}
	#globalNav .sub > li:first-child a {
		padding : 1em;
	}
	#globalNav .sub > li:last-child a {
		padding : 1em;
	}

	main > section:not(:last-child) {
		margin-bottom : 60px;
	}

	#pageFooter > .inner {
		grid-template-columns : 1fr;
		padding-top : 280px;
	}
	#footerContact {
		display : block;
	}

	#footerContact::before {
		left : 24px;
	}
	#footerContact h2 {
		margin-bottom : 0.25em;
		text-align : center;
	}
	#footerContact .tel {
		line-height : 1.4;
		margin-bottom : 1.25em;
		text-align : center;
	}
	#footerContact .tel span {
		display : block;
		margin : 0;
	}
	#footerContact .mail {
		margin-left : 0;
	}
	#pageFooter .logo img {
		width : 100%;
	}
	#footerNav {
		grid-template-columns : 1fr 1fr;
	}
}

@media screen and (min-width: 768px) and (max-width: 1219px) {
	.__pc {
		display : unset;
	}
	.__tab {
		display : unset;
	}
	.__sp {
		display : none;
	}
}

@media screen and (min-width: 1220px) and (max-width: 1920px) {
	.__pc {
		display : unset;
	}
	.__tab {
		display : unset;
	}
	.__sp {
		display : none;
	}
}
@media screen and (min-width: 1921px) {
	.__pc {
		display : unset;
	}
	.__tab {
		display : unset;
	}
	.__sp {
		display : none;
	}
	body {
		font-size : 1.2em;
	}

	#pageHeader > .inner,
	#pageBottom > .inner,
	#pageFooter > .inner,
	main > section > .inner {
		max-width : 1920px;
	}
}