@charset "utf-8";
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* page 共通 (simple使用はstyle.cssに)                  */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.topimg img {
	position: absolute; top: 0; object-fit: cover; object-position: left bottom; z-index: -1; }
.imgbox, .imgbox img {z-index: -1; }

.topbox {position: relative; width: 100%; min-height: 100vh; z-index: -1; overflow: hidden; }
.topbox .topimg img {
	left: 0; height: 95vh; width: 100%; object-fit: cover; object-position: center bottom;  }

.topbox .inner-base {
	display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; z-index: 10; 
	height: 100vh; padding-bottom: 30px; overflow: hidden; }
.topbox h1 {
	width: 100%; max-width: 500px; z-index: 5; 
	color: #fff; font-size: 100px; line-height: 1; text-align: right; text-shadow: 3px 3px 7px rgba(0,0,0,0.4); }
.solution .topbox h1 {color: var(--color-c2);}

.topbox .toptext {
	max-width: 700px; width: 90%; max-height: 75vh; background: rgba(255,255,255,0.9); 
	padding: 2.5em 5% 1.5em; border: solid 1px #fff; margin: 1rem 0; }
.topbox .toptext p {margin-bottom: 1em; }
.topbox .toptext strong {display: block; font-weight: 400; font-size: 1.1rem; }

/* animation ++++++++++++++++++++++++++++++++ */
/* page top */
.topbox h1 {animation: tti 1s ease-out 0s forwards; transform: translatex(-100%); }
.topbox .toptext {animation: pq1in 1s ease-out 0s forwards; transform: translatex(100%); }
@keyframes tti{
  0%{transform: translatex(-100%); }
  100%{transform: translatex(0); }
}
@keyframes pq1in{
  0%{transform: translatex(100%); }
  100%{transform: translatex(0); }
}

/* child topimg */
.slideleft {
	opacity: 0; transform: translatex(-50%); 
	animation: slideleft 0.8s ease-out forwards;  }
@keyframes slideleft{
  0%{transform: translatex(-50%); opacity: 0; }
  100%{transform: translatex(0); opacity: 1; }
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* PIArQ BIZ                                            */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.piarq-biz {background: var(--color-c1);  }
.piarq-biz .top2 {padding-bottom: 1px; }
.piarq-biz .top2  h2 {line-height: 1.5; text-align: center; margin: 0.5rem auto 1.2rem; }
.piarq-biz .top2  h2 span {display: block; font-size: 1.2rem; }
.piarq-biz .top2  p {line-height: 1.6; margin-bottom: 1rem; }

/* biz2 +++++++++++++++++ */
.biz2-box {
	position: relative; width: 80%; max-width: 800px; 
	margin: 0 auto 85px auto; border-bottom: solid 1px var(--color-c2); }
.biz2-box::before, .biz2-box::after {content: "";position: absolute; }
.biz2-box::before {
	top: 100%; left: 50%; width: 1px; height: 60px; background: var(--color-c2); }
.biz2-box::after {
	top: calc(100% + 45px); left: calc(50% - 7px); width: 15px; height: 15px; 
    border: solid var(--color-c2); border-width: 0 1px 1px 0; transform: rotate(45deg); }

.biz2-box h2 {color: var(--color-c2); }
.biz2inner {overflow: hidden; }
.biz2inner img {float: left; width: 150px; height: auto; }
.biz2inner div {margin-left: 170px; }

/* biz3 +++++++++++++++++ */
.biz3-box {
	position: relative; width: 100%; background: var(--color-c2); z-index: -1;
	background: url('https://www.piarq.co.jp/wp-content/uploads/piarqbiz-work1.jpg') 50% 0 no-repeat;
	background-size: cover; padding: 3rem 4% 1.5rem; margin: 0 auto; border-radius: 70px 0; }
.biz3-box h2 {
	color: #fff; width: 300px; background: rgba(0,0,0,0.8); padding-bottom: 10px; margin: 0 auto; }
.biz3-img {
	position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: -1; 
	border-radius: 50px 0; z-index: -1; object-fit: cover;  object-position: 50% 0; overflow: hidden; }

.biz3inner {
	position: relative; width: 100%; 
	display: flex; flex-wrap: wrap; justify-content: space-between; margin: 3rem auto 0; }
.biz3 {
	position: relative; flex: 0 0 49%; min-width: 280px; background: #fff; color: var(--color-c2); 
	padding: 15px; margin-bottom: 1rem; box-shadow:  4px 4px 6px rgba(0,0,0,0.3); }
.biz3 h3 {font-size: 1.5rem; text-align: center; }
.biz3 span {display: block; font-size: 1rem; padding-top: 5px; border-top: solid 1px #ccc; }
.biz3 img {display: block; float: left; max-height: 150px; width: 105px;  margin: -10px auto 0; }

.biz3 ul {margin: 5px 0 0 140px; }
.biz3 li {line-height: 1.4; text-indent: -1.5em; padding: 5px 0 0 1.5em; }
.biz3 li::before {content: "・"; padding-right: 5px; }


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* SOLUTION                                             */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.solution h1 {margin-right: 1rem; }
.solution h2, .solution h3 {font-family: var(--font-n); }
.solution h3 {text-align: left; margin-bottom: 1em; }
.solution .top2 {height: auto;}
.solution .top2 .inner-cont {overflow: hidden; }

.solution .top2 .item { 
	float: right; position: relative; width: calc(50% - 25px); margin: 0 0 25px; }
.solution .top2 .item2 { float: left; }

.solution .top2 .item::before {
	content: ""; position: absolute; top: 150px; right: 0; display: block; width: 60%; height: calc(100% - 151px); 
	border: solid 1px #ccc; border-left: 0; z-index: -1; }
.solution .top2 .item::after {
	content: ""; position: absolute; bottom: 0; left: 40%; display: block; width: 15px; height: 15px; }

.solution .top2 .item .imgbox {
	position: relative; width: 80%; height: 0; padding-bottom: 63%; overflow: visible; 
	margin: 25px 0 0 20px; border-radius: 41% 59% 48% 52% / 52% 50% 44% 48%; }
.solution .top2 .item .imgbox img {
	display: block; width: 105%; height: auto; transform: translate( -20px, -25px); border-radius: 41% 59% 48% 52% / 52% 50% 50% 48%; }

.solution .top2 .item1::after, .solution .top2 .item1 .imgbox, .it-solution .chtop {background: #aeceff; }
.solution .top2 .item2::after, .solution .top2 .item2 .imgbox, .system .chtop {background: #f8aeb9; }
.solution .top2 .item3::after, .solution .top2 .item3 .imgbox, .network .chtop {background: #ffc87f; }

.solution .top2 h2 {width: 70%; font-size: 1.25rem; line-height: 1.4; margin: 2rem 2rem 1rem 1rem; border-bottom: solid 1px #ccc; }
.solution .top2 p {margin: 0rem 2rem 2rem 1rem; }

/* SOLUTION-child ++++++++++++++++++++++ */
/* top +++++++++++ */
.chtop {
	position: relative; width: 100%; z-index: -2; color: #fff; border-bottom-right-radius: 100% 20vh; z-index: -5; }
.chtop::before, .chtop::after {
	content: ""; position: absolute; top: 13vh; z-index: -1; }
.chtop::before {left: 25%; width: 68%; height: 10vh; border: solid #fff; border-width: 0 1px 1px 0; }
.chtop::after {left: calc(93% - 10px); width: 20px; height: 20px; background: var(--color-c2); }

.chtop .topimg img {
	top: 2.5vh; left: 0; height: 95vh; width: 45%; 
	object-position: center center; border-radius: 41% 59% 48% 52% / 52% 50% 44% 48%; z-index: 10; }
.chtop .parent-tt {
	position: absolute; top: 14vh; right: 10%; z-index: 50; 
	color: rgba(0,0,0,0.15); font-family: var(--font-se); font-size: 50px; text-align: right; }

.chtop .ttbox {
	display: flex; flex-direction: column; align-items: center; justify-content: center; 
	position: absolute; bottom: 10vh; right: 0; width: 55%; height: 66vh; padding: 0 3%; z-index: 1; }
.chtop h1 {
	position: relative; z-index: 5; font-weight: 400; font-size: 40px; line-height: 1.5; text-align: center; width: 100%; }
.chtop h1::after {
	content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 4.2em; height: 3px; 
	background: #fff; margin: auto; border-radius: 2px; } 
.chtop h2 {font-size: 36px; line-height: 2; }

.chtop .txbox {padding: 1rem 30px; }
.chtop .txbox p {margin-bottom: 1rem; }

/* detail +++++++++++ */
.detail {padding-top: 100px; }
.detail .itembox {padding: 3rem 0 0; margin: 0 auto; }
.detail .item0 {position: relative; margin: 0 auto 3.5rem; z-index: -1; }
.detail h3 {position: relative; font-weight: 400; font-size: 1.5rem; padding-bottom: 5px; }

.detail h3::after, .detail h3::before {content: ""; display: block; position: absolute; bottom: 0; }
.detail h3::after {left: 0; width: 100%; height: 1px; background: #8c8b9a; }
.detail h3::before {right: 0; width: 15px; height: 15px; }

.detail .item1 h3::before, .network .item1::before, .it-solution .item1 .imgbox {background: #aeceff; }
.detail .item2 h3::before, .network .item2::before, .it-solution .item2 .imgbox {background: #ffa6c6; }
.detail .item3 h3::before, .network .item3::before, .it-solution .item3 .imgbox {background: #92e8d3; }
.detail .item4 h3::before {background: #ffc87f; }

.detail .text {position: relative; max-width: 800px; line-height: 1.7; margin: 1rem 0 0; z-index: -1;}

.parent-pageid-13 .imgbox {position: relative; flex: 0 0 auto; z-index: 10; }
.parent-pageid-13 .imgbox img {height: auto; z-index: 10; }
.parent-pageid-13:not(.network) .item0 {display: flex; justify-content: flex-start; align-items: flex-start; }
.parent-pageid-13:not(.network) section {flex: 3 3 calc(100% - 300px); padding-left: 30px; z-index: -1; }

/* it-solution */
.it-solution .detail .text {margin-bottom: 1rem; }
.it-solution .imgbox {width: 30%; max-width: 300px; min-width: 150px; margin-bottom: 0.5rem; transform: translate(10px, 15px); }
.it-solution .imgbox img {width: 100%; transform: translate(-15px, -15px); }

.it-list {position: relative; width: calc(100% - 10px); max-width: 650px; background: #FFFCCB; background: #eaf3f9; padding: 1.5em 3% 1px 2%; margin: 2em auto 15px; }
.it-list > p {font-weight: 400; margin-bottom: 1rem; }
.it-list::after {
	content: ""; position: absolute; bottom: 0; right: 0; width: 95%; height: 95%; background: #92e8d3; z-index: -1;
	transform: translate(10px, 10px); }

.it-list li {display: flex; align-items: center; border-top: solid 1px #fff; }
.it-list li > p {line-height: 1.5; padding: 1rem; }
.it-list li::before {
	content: ""; display: block; background: #92e8d3; width: 1.5rem; height: 1.5rem; 
	clip-path: polygon(48% 0, 100% 50%, 48% 100%, 0% 100%, 53% 50%, 0% 0%);
	padding-top: 0.5rem; } 

/* .system */
.system h3 {max-width: 600px; width: 100%; margin-top: 10px;  }
.system h3::after, .system .detail h3::before {transform: translate(-150px, 0); }
.system .imgbox {flex: 0 0 auto; }
.system .imgbox img {width: 300px; }

/* network */
.network .detail {
	background: url('https://www.piarq.co.jp/wp-content/uploads/so-netbg.svg') 100% 100% no-repeat fixed; 
	background-size: 20vw auto; z-index: -1;}
.network .detail .item0 {position: relative; padding: 0.5rem 3% 0; border: solid 1px #fff; }
.network .detail .item0::before {
	content: ""; position: absolute; top: 5px; left: 10px; width: 150px; height: 150px; z-index: -1;
	border-radius: 41% 59% 48% 52% / 52% 50% 50% 48%; }
.detail .text {position: relative; max-width: 800px; line-height: 1.7; margin: 1rem 0 0; z-index: -1;}

.network .text {width: 70vw; max-width: 100%; }


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* guide                                                */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.guide .topbox .inner-base {
	position: relative; justify-content: flex-start; padding-top: calc(55vh - 130px); }

/* リンク +++++++++++++++++++++++++++++++++++++++++++++ */
#guidelink {position: fixed; max-width: 90%; margin: 0 auto; z-index: 999; }
#guidelink li {position: relative; }
#guidelink li a {display: block; }
#guidelink li.hd {display: none; }

#guidelink .lit {order: 2;}
#guidelink .li2 {order: 3;}
#guidelink .li3 {order: 4;}
#guidelink .lic {order: 1;}

/* top1 */
.glink0 {top: 55vh; left: calc(90vw - 250px); width: 250px; z-index: 1; }
.glink0 li, .lic {
	display: inline-block; width: 10em; font: bold 1.6rem/2.5 var(--font-n); margin: 0 0 1rem; }
.glink0 li a, .lic a { text-align: center; border: solid 1px var(--color-c2); transition: all 0.8s; }
.glink0 li a:hover, .lic a:hover {background: rgba(93,121,135,0.4); color: #fff; }

/* flow,price */
.glink2, .glink3 {
	bottom: 2rem; left: 7%; 
	display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } 

.glink2 .lic, .glink3 .lic {margin-bottom: 2rem; }
.glink2 .lit, .glink2 .li3, .glink3 .lit, .glink3 .li2 {
	width: 250px; font-size: 1.2rem; line-height: 1.5; margin-bottom: 5px; border-right: solid 1px var(--color-c2); }

.glink2 .lit::after, .glink2 .li3::after, .glink3 .lit::after, .glink3 .li2::after {
	content: ""; display: block; width: 16px; height: 16px; 
	position: absolute; left: calc(100% - 8px);
	border: solid 1px var(--color-c2); border-width: 1px 1px 0 0; }

.glink2 .lit, .glink3 .lit {border-bottom: solid 1px var(--color-c2); }
.glink2 .lit::after, .glink3 .lit::after, .glink3 .li2::after {top: 0; transform: rotate(-45deg); }

.glink2 .li3 {border-top: solid 1px var(--color-c2); }
.glink2 .li3::after {bottom: 0; transform: rotate(-225deg); }
.glink3 .li2 {border-bottom: solid 1px var(--color-c2); }

/* footer */
.glinkn {display: none;}

/* p2以下 +++++++++++++++++++++++++++++++++++++++++++++ */
.guide .ttbox {
	position: absolute; top: 18vh; right: 0; display: inline-block; width: auto; text-align: center; }
.guide .ttbox h2 {color: var(--color-c1); font-size: 10vw; line-height: 1; margin: 0; text-align: inherit; }
.guide .ttbox h3 {
	display: inline-block; font-size: 28px; padding-top: 5px;border-top: solid 4px var(--color-c1);}

/* flow +++++++++++++++++++++++++ */
#flow {position: relative; }
.flow .inner-cont {position: relative; overflow: hidden; }

.flow ol {width: 100%; height: calc(100vh - 160px ); padding: 0; align-items: flex-start; }
.flow li {
	position: relative; width: 25%;
	margin: 10px; border: solid 1px var(--color-ct); border-width: 0 0 1px 1px; }
.flow li::before, .flow li::after {content: ""; display: inline-block; position: absolute; }
.flow li::before {
	top: 0; right: calc(100% - 10px); width: 20px; height: 20px; border-radius: 50%; background: var(--color-ct); }
.flow li::after {
	top: calc(100% - 15px); left: calc(100% - 10px); width: 25px; height: 30px; clip-path: polygon(0 0, 100% 50%, 0% 100%); }

.flow .item2 {transform: translate(0, 17.5vh); }
.flow .item3 {transform: translate(0, 35vh); }
.flow .item4 {transform: translate(0, 52.5vh); }

.flow .item1::before, .flow .item1::after {background: #aeceff; }
.flow .item2::before, .flow .item2::after {background: #ffa6c6; }
.flow .item3::before, .flow .item3::after {background: #92e8d3; }
.flow .item4::before, .flow .item4::after {background: #ffc87f; }
.flow .item4::after {clip-path: none; }

.flow li .finimg {width: 100%; padding: 0 1rem 1rem; }
.flow li .finimg img {width: 100%; height: auto; }
.flow li p {background: var(--color-ct);  color: #fff; line-height: 2; padding: 0 2rem; display: inline-block; }

/* price +++++++++++++++++++++++++ */
.p-img {position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: #000; overflow: hidden; }
.p-img img {object-fit: cover; height: 100%; width: auto; max-width: 800px; opacity: 0.55;}
.price .ttbox {color: #f3f3f3; }
.price .ttbox h3 {color: #f3f3f3; }

.price .txbox {
	display: flex; align-items: center; justify-content: flex-start;
	width: 46%; height: 60vh; padding: 2rem 2%; }
.price .boxin {
	background: rgba(255,255,255,0.8); padding: 1.5rem 1.5rem 1px; margin: 0 auto; }
.price .txbox p {margin-bottom: 1.5rem; }


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* メディア                                         */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 900px) {
/* 共通 +++++++++++++++++++++++ */
	.topbox .toptext {width: 100%; }
	.topbox .topimg img {height: 100vh; }
	.topbox .inner-base {padding-top: 80px; }
	.topbox h1 {font-size: 12vw; }
/* PIArQ BIZ +++++++++++++++ */
	.piarq-biz .top2 .inner-cont {padding-top: 70px; }
	.piarq-biz .top2 h2 {font-size: 2rem; }
	.piarq-biz .top2 h2 span {display: block; font-size: 1.1rem; padding-left: 0; }
	.biz2-i1 {flex: 0 0 120px; }
	.biz3-box {background-image: url('https://www.piarq.co.jp/wp-content/uploads/piarqbiz-work1sp.jpg'); }
	.biz3 { flex: 0 0 90%; max-width: 500px; margin-left: auto; margin-right: auto; }
/* SOLUTION +++++++++++++++++++*/
	.solution .top2 .item {float: none; width: 100%; max-width: 700px; margin: 0 auto 5rem; }
	.solution .top2 .item2 { float: none; }
/* SOLUTION-child +++++++++++++*/
	.chtop .topimg img {height: 38vh; width: 40%; }
	.chtop .parent-tt {font-size: 2.5rem; }
	.chtop .ttbox {width: 100%; bottom: 9vh; padding: 0 5%; }
	.chtop .txbox {padding: 1rem 15px; }
/* GUIDE +++++++++++++++++++ */
	.glink0 li a, .lic a {background: rgba(255,255,255,0.5); }
	/* flow */
	.flow li p {padding: 0 0.5rem; min-width: 60%; text-align: center;}
	.flow li::after {top: calc(100% - 12px); width: 20px; height: 24px; }
	.flow li:nth-child(4)::after {width: 24px; }
	/* price */
	.p-img {width: 40%; }
	.price .txbox {width: 56%; }
}
@media screen and (max-width: 900px), (max-height: 700px) {
/* 共通 +++++++++++++++++++++++ */
/* SOLUTION-child +++++++++++++*/
	.detail {padding-top: 50px; }
	.detail h3 {position: relative; font-weight: 400; font-size: 1.1rem; }
	.detail .item0 {margin-bottom: 1.5rem; }
	/* .system  */
	.system .imgbox img {width: 200px; }
	.system section {flex: 3 3 calc(100% - 200px); }
}
@media screen and (min-width: 901px) and (max-height: 700px) {
	.chtop h1 {font-size: 2rem; }
	.chtop h2 {font-size: 1.5rem; line-height: 2; }	
}

@media screen and (max-width: 700px) {
/* 共通 +++++++++++++++++++++++ */
	.guide .topbox h1 {font-size: 76px;  }
/* PIArQ BIZ +++++++++++++++++ */
	.piarq-biz .top2 .inner-cont {width: 100%; border-radius: 0; }
	.biz3-img {border-radius: 0; }
/* SOLUTION ++++++++++++++++++ */
	.solution .top2 h2 {width: 100%; margin-left: 0; }
	.solution .top2 p {margin-left: 0; margin-right: 10px; }
/* SOLUTION-child +++++++*/
	.chtop::before {content: ""; 68%; height: 6vh; }
	.chtop .parent-tt {font-size: 30px; top: 13vh; }
	.chtop .ttbox {width: 100%; bottom: 9vh; padding: 0 5%; }
	.chtop h1 {font-size: 2rem; }
	.chtop h2 {font-size: 1.5rem; line-height: 2; }
	.parent-pageid-13:not(.network) section {padding-left: 0; }
	/* .it-solution  */
	.it-solution .item0 {flex-wrap: wrap; margin-bottom: 2rem; }
	.it-solution section {flex-basis: 100%; padding-left: 0; }
	.it-solution .imgbox {width: 100%; max-width: 400px; margin-bottom: 2rem; }

	/* .system  */
	.system .item0 {
		flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
	.system .imgbox {width: 100%; text-align: right; }
	.system .imgbox img {width: 150px; }
	.system section {flex: 0 0 100%; padding-left: 0; margin-top: -2rem; }
		.detail h3 {position: relative; font-weight: 400; font-size: 1.1rem; }
	.system h3::after, .system .detail h3::before {transform: translate(0, 0); }
	/* network */
	.network .text {width: 100%; max-width: 100%; }
	.network .detail .item0 {padding-left: 0; padding-right: 0; }
/* GUIDE ++++++++++++++++++ */
	.guide h1 {font-size: 50px; }
	/* リンク +++ */
	/* top1 */
	.glink2, .glink3 {bottom: 1rem; flex-direction: row; justify-content: center; align-items: center; } 
	.glink2 .lic, .glink3 .lic {width: 6em; font-size: 1.1rem; line-height: 2.2; margin-bottom: 0; }
	.glink2 .lit, .glink2 .li3, .glink3 .lit, .glink3 .li2 {width: 70px; font-size: 1.1rem; margin: 0 10px; }
	/* p2以下 +++ */
	.guide .ttbox {
		position: static; width: 100%; max-width: 350px;
		display: flex; align-items: center; justify-content: center;
		margin: 0 auto; border-bottom: solid 3px var(--color-c1); }
	.guide .ttbox h2 {display: inline-block; font-size: 2rem; }
	.guide .ttbox h3 {font-size: 1.2rem; line-height: 1; padding: 0 7px; border-top: 0; }
	/* flow */
	.flow ol {
		flex-direction: column; align-items: flex-start; height: calc(100vh - 210px ); padding: 0; margin-top: 1rem; }
	.flow li {width: 100%; height: 15vh; margin: 0 0 10px 10px; }
	.flow li .finimg {display: inline-block; height: 100%; width: auto; padding: 0 1rem 1rem; }
	.flow li .finimg img {width: auto; height: 15vh; }
	.flow li p {min-width: 40%; }	
	.flow .item2, .flow .item3, .flow .item4 {transform: translate(0, 0); }
	.flow .item1::after, .flow .item2::after, .flow .item3::after {
		top: calc(100% + 10px); left: 45%; width: 60px; height: 30px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
	.flow .item4::after {content: "none"; }
	/* price */
	.p-img {width: 100%; }
	.price .txbox {width: 100%; }
	.price .txbox p {margin-bottom: 1.5rem; }

}
@media screen and (max-width: 500px) {
/* PIArQ BIZ ++++++++++++ */
	.biz2inner img {float: none; }
	.biz2inner div {margin-left: 3%; }
	.biz3 h3 {margin-left: 80px; }
	.biz3 img {max-height: 80px; width: 70px; transform: translatey(-60px); }
	.biz3 ul {margin-left: 60px; }
/* SOLUTION-child +++++++*/
	.chtop .topimg img {height: 33vh; width: 40%; }
	.chtop h1 {font-size:1.5rem; }
	.chtop h2 {font-size: 1.2rem; }
}