@charset "UTF-8";

#mainVisual {
	position : relative;
}
#mainVisual img {
	width : 100%;
}

#mainVisual .copy01 {
	position : absolute;
	top : 300px;
	right : 250px;
	font-size : 2.2em;
	font-weight : bold;
	text-shadow : 0 0 6px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.8);
	letter-spacing : 0.5rem;
	color : #ffffff;
}

#mainVisual .copy02 {
	position : absolute;
	bottom : 200px;
	left : 150px;
	font-size : 3em;
	font-weight : bold;
	text-shadow : 0 0 4px rgba(255, 255, 255, 1), 0 0 6px rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.6), 0 0 10px rgba(255, 255, 255, 0.4);
	color : #000000;
}
#mainVisual .copy02 .en {
	font-family : "Jost";
	font-size : 0.75em;
	font-style : italic;
	transform : translateX(-0.5em) translateY(-1.5em) rotate(-12deg);
	color : #f0831e;
}
#mainVisual .copy02 .marker {
	padding-bottom : 0.25em;
	background : linear-gradient(transparent 95%, #f0831e 95%);
}

#topinfo {
	z-index : 2;
	position : relative;
	width : 45vw;
	margin-top : -250px;
}
#topinfo ul {
	padding : 32px;
	border-radius : 0 16px 16px 0;
	background-color : #ffffff;
}
#topinfo ul > li {
	display : grid;
	grid-template-columns : auto auto 1fr;
	grid-gap : 24px;
}
#topinfo ul > li .category {
	font-weight : bold;
	color : #f0831e;
}

#banner {
	display : flex;
	justify-content : center;
	padding : 16px;
	background-color : #ffffff;
}

#banner > :first-child {
	margin-right : 32px;
}

#concept {
	position : relative;
	padding-top : 140px;
}
#concept::before {
	display : block;
	z-index : -2;
	position : absolute;
	top : 80px;
	left : 0;
	width : 30vw;
	height : 40%;
	content : "";
	background-color : #f0831e;
}
#concept::after {
	display : block;
	z-index : -2;
	position : absolute;
	top : 260px;
	right : 0;
	content : url("/wp/wp-content/themes/paginagrafico/top/img/bg_concept_right.jpg");
}
#concept > .inner {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 60px;
	background : linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(250,248,233,1) 50%, rgba(250,248,233,1) 1000%);
}
#concept .left {
	position : relative;
}
#concept .left::before {
	display : block;
	z-index : -1;
	position : absolute;
	top : -170px;
	left : 0;
	content : url("/wp/wp-content/themes/paginagrafico/top/img/bg_concept_topleft.png");
}
#concept .right {
	position : relative;
}
#concept .right::after {
	display : block;
	z-index : -1;
	position : absolute;
	right : -270px;
	bottom : 60px;
	content : url("/wp/wp-content/themes/paginagrafico/top/img/bg_concept_topright.png");
}
#concept .left .img img {
	width : 100%;
}
#concept .point {
	display : flex;
	justify-content : center;
	margin-top : -32px;
}
#concept .point {
	display : flex;
	justify-content : center;
}
#concept .point > li {
	display : flex;
	font-weight : bold;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	width : 12em;
	height : 12em;
	text-align : center;
	border-radius : 50%;
	background-color : #ffdc50;
}
#concept .point > li:not(:last-child) {
	margin-right : 12px;
}
#concept .point > li > :first-child {
	font-size : 1.125em;
	width : 9em;
	margin-bottom : 0.25em;
	padding-bottom : 0.25em;
	border-bottom : 1px solid #000000;
}

#concept h2 {
	font-family : "Jost";
	font-size : 4em;
	font-style : italic;
	transform : translateX(-2em) translateY(-0.5em) rotate(-12deg);
	color : #f0831e;
}

#concept h3 {
	font-size : 2.2em;
	font-weight : bold;
	line-height : 2;
	margin-bottom : 0.5em;
	color : #000000;
}

#concept .text {
	margin-bottom : 40px;
}
#concept .text > p:not(:last-child) {
	margin-bottom : 1em;
}

#opening {
	padding : 80px 0;
	background-color : #fbeee2;
}
#opening h2 {
	font-size : 1.5em;
	font-weight : bold;
	margin-bottom : 40px;
	text-align : center;
}
#opening h2 .en {
	font-family : "Jost";
	font-size : 1.5em;
	color : #f0831e;
}

#opening ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap : 16px;
	margin-bottom : 40px;
}
#opening ul > li .img {
	height : clamp(120px, 20vw, 375px);
}
#opening ul > li .img img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#opening ul > li .content {
	display : flex;
	flex-direction : column;
	align-items : center;
	padding : 1.5em;
	background-color : #ffffff;
}
#opening ul > li .content .name {
	margin-bottom : 1em;
	text-align : center;
}
#opening ul > li .content .name span {
	font-weight : bold;
}
#opening ul > li .content .link .linkBtn {
	width : 16em;
	padding-top : 0.5em;
	padding-bottom : 0.5em;
}
#opening .notfound {
	margin-bottom : 40px;
	padding : 2em;
	text-align : center;
	background-color : #ffffff;
}
#opening .link {
	text-align : center;
}


#posts > .inner {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 40px;
}
#posts h2 {
	display : flex;
	font-size : 1.8em;
	font-weight : bold;
	justify-content : space-between;
	align-items : center;
	margin-bottom : 0.5em;
}
#posts h2 .linkBtn {
	font-size : 0.5em;
	width : 16em;
	color : #f0831e;
	border : none;
	background-color : #ffffff;
}
#posts h2 .linkBtn::after {
	border-top : 2px solid #f0831e;
	border-right : 2px solid #f0831e;
}
#posts ul > li {
	display : grid;
	grid-template-columns : auto 1fr;
	grid-gap : 24px;
	padding : 16px 0;
	border-bottom : 1px solid #cccccc;
}
#posts ul > li:first-child {
	border-top : 1px solid #cccccc;
}
#posts ul > li .img {
	overflow : hidden;
	width : 120px;
	border-radius : 10px;
}
#posts ul > li .img img {
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#posts .content > p:first-child {
	margin-bottom : 8px;
}
#posts .content .category {
	font-size : 0.725em;
	margin-right : 0.5em;
	padding : 0.5em 1.5em;
	color : #ffffff;
	border-radius : 2em;
	background-color : #f0831e;
}
#posts .content .title {
	line-height : 1.4;
	color : #f0831e;
}

#terms {
	padding : 80px 0;
	background-color : #ffffff;
}
#terms > .inner {
	padding : 60px;
	background-color : #f0831e;
}
#terms > .inner > header {
	display : grid;
	grid-template-columns : auto 1fr;
	grid-gap : 40px;
	font-size : 1.5em;
	margin-bottom : 24px;
	color : #ffffff;
}
#terms > .inner > header h2 .en {
	font-family : "Jost";
	font-size : 1.5em;
	color : #fdc088;
}
#terms ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr;
	grid-gap : 40px;
	margin-bottom : 32px;
}
#terms ul > li {
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	padding : 24px;
	border-radius : 12px;
	background-color : #ffffff;
}
#terms ul > li h3 {
	font-weight : bold;
	width : 12em;
	margin-bottom : 16px;
	padding : 0.25em;
	text-align : center;
	color : #ffffff;
	border-radius : 2em;
	background-color : #f0831e;
}
#terms ul > li .img {
	margin-bottom : 16px;
}
#terms ul > li .title {
	font-weight : bold;
	text-align : center;
}
#terms > .inner > footer {
	font-weight : bold;
	text-align : center;
	color : #ffffff;
}
#terms > .inner > footer .link {
	margin-top : 16px;
	margin-bottom : -100px;
}
#terms > .inner > footer .link a {
	display : flex;
	font-size : 1.5em;
	justify-content : center;
	align-items : center;
	width : 20em;
	margin : 0 auto;
	padding : 0.5em;
	text-decoration : none;
	color : #ffffff;
	border-radius : 12px;
	background-color : #51433a;
}
#terms > .inner > footer .link a img {
	margin-right : 1em;
	transform : translateY(4px);
}

@media screen and (max-width: 767px) {
	#topinfo {
		width : 100%;
		margin-top : 0;
		margin-bottom : 0;
	}
	#mainVisual .copy01 {
		top : 40px;
		right : 20px;
		font-size : 4vw;
	}
	#mainVisual .copy02 {
		bottom : -40px;
		left : 30px;
		font-size : 4vw;
	}
	#topinfo ul {
		padding : 24px;
		border-radius : 0;
	}
	#topinfo ul > li {
		grid-template-columns : 1fr;
		grid-gap : 0;
	}
	#banner {
		display : flex;
		flex-direction : column;
		justify-content : center;
		align-items : center;
	}
	#banner > :first-child {
		margin-right : 0;
	}
	#banner img {
		width : 100%;
	}
	#concept {
		margin-bottom : 0;
		padding-bottom : 120px;
	}
	#concept::before {
		height : 20%;
	}
	#concept::after {
		display : none;
	}
	#concept > .inner {
		grid-template-columns : 1fr;
		grid-gap : 40px;
		background : none;
	}
	#concept .img img {
		width : 100%;
	}
	#concept h2 {
		transform : translateX(-0.25em) translateY(-0.5em) rotate(-12deg);
	}
	#concept .point > li {
		font-size : 2.3vw;
	}
	#concept .point > li:not(:last-child) {
		margin-right : 8px;
	}
	#opening ul {
		grid-template-columns : 1fr;
	}
	#terms > .inner {
		padding : 32px;
	}
	#opening .link img {
		max-width : 100%;
	}
	#posts > .inner {
		grid-template-columns : 1fr;
	}
	#terms > .inner > header {
		grid-template-columns : 1fr;
		grid-gap : 24px;
	}
	#terms ul {
		grid-template-columns : 1fr;
		grid-gap : 24px;
	}
	#terms > .inner > footer .link {
		margin-bottom : -60px;
	}
	#terms > .inner > footer .link a {
		font-size : 1.2em;
		width : 14em;
	}
}
@media screen and (min-width: 768px) and (max-width: 1219px) {
	#mainVisual .copy02 {
		bottom : 100px;
		left : 70px;
		font-size : 2.5em;
	}
	#mainVisual .copy01 {
		top : 100px;
		right : 70px;
		font-size : 2em;
	}
	#topinfo {
		width : 65vw;
		margin-top : -140px;
	}
	#banner img {
		max-width : 100%;
	}
}
@media screen and (min-width: 1220px) and (max-width: 1920px) {
}
@media screen and (min-width: 1921px) {
}