@charset "utf-8";
/*
Theme Name: meowriocity-basic
Theme URI: 
Author: millmi
Author URI: 
Description: シンプルでSEOに優れたhtml5のレスポンシブテンプレート。oldBrowserでは検証していませんm(__)m
Version: 1.0
Tags: one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Text Domain: mibase
*/

* {padding: 0; margin: 0; border: 0; box-sizing: border-box; }
html, body {text-align: center; -webkit-text-size-adjust: 100%; margin: 0; }
/* html {-webkit-scroll-behavior:smooth; scroll-behavior:smooth; } */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, div, 
form, ul, ol, dl, dt, table, blockquote, hr, time {display: block; max-width: 100%; }

address, p, ul, ol, dl, li, dd, dt, input, testarea, table, th, td, 
blockquote, pre, h1, h2, h3, h4, h5, time {
  color: inherit; font-weight: inherit; font-style: inherit; font-size: inherit; line-height: inherit; text-align: left; }

input, testarea {-moz-appearance: none; -webkit-appearance: none; appearance: none; display: block; }
ol, ul, li {list-style: none; }
img {max-width: 100%;vertical-align:bottom; }

/* font関係 ベース color: var(--color-c*);  font-family: var(--font-n);  */
:root {
	--font-n: 'Noto Sans JP', 'メイリオ', sans-serif; 
	--font-se: 'Cormorant', 'Noto Sans JP', serif; 
	--color-ct: #5c5c5c; --color-c1: #deebf7; --color-c2: #5c7886; }

body {color: var(--color-ct); font-family: var(--font-n); font-weight: 300; font-size: 16px; line-height: 1.7; }
h1, h2, h3 {font-family: var(--font-se); font-weight: 400; line-height: 1.4; }
h1 {color: #fff; }
h2 {font-size: 2.8rem; line-height: 1.2; }
strong, .bold {font-weight: 400; font-weight: bold; }

/* a色 ベース -- 詳細は各項目 */
a {color: var(--color-c2); text-decoration: none; transition: all 0.5s; }
.post main a {color: #0C38EB; text-decoration: underline; }
a:hover {color: #00aff0; }
a:hover img {opacity: 0.8; }

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* base layout                                            */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#wrap {} #content {}
.area {position: relative; width: 100%; height: 100vh; }
.noclip {min-height: 100px; height: auto; padding-bottom: 2rem; }

.inner-base, .inner-cont {position: relative; width: 86%; max-width: 1060px; margin: 0 auto; z-index: 1; }
.inner-cont {min-height: 100vh; padding: 120px 0 60px; border-top: solid 1px transparent; }
.h100-inner {height: calc(100vh - 180px); }

.flex {display: flex; flex-wrap: nowrap; justify-content: space-between; }
.h100 {height: 100vh; }
.bg-f {background: #fff; }
.bg-c1 {background: var(--color-c1); }

#content {padding-bottom: 3rem; }

/* パララックス  */
.item {opacity: 0.4; transform: translate(0, 50%); transition: 1s; }
.on .item {transform: translate(0, 0); opacity: 1; }

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* site-header                                          */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.navbox {
	position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 1000; 
	background: var(--color-c1); padding: 0 10px; }

.topnav {position: absolute; background: transparent; } /* header jq-add */
.notop .topnav {background: var(--color-c1); }
.fotnav {display: none; } /* footer jq-add */
.navbox .inner-base {width: 96%; line-height: 1.4; }

.site-logo {position: absolute; top: 7px; left: 50px; height: calc(100% - 12px); width: auto; }
.custom-logo-link {display: block; height: 100%; width: 100%; }
.site-logo img {display: block; width: auto; height: 100%; }

/* Gnav / cssで開閉 ++++++++++++++++++++++++++++++++++++++ */
.main-menu {display: flex; align-items: center; justify-content: flex-end; }
.main-menu li {position: relative; z-index: 1000; }
.main-menu > li {flex: 0 0 auto; text-align: center; }


/* a */
.main-menu a {display: block; color: #fff; padding: 10px 15px; }
.main-menu a:hover, .main-menu a:focus {background: rgba(0,0,0,0.3); color: #fff !important; }
.main-menu > li > a {
	display: flex; align-items: center; justify-content: center; min-width: 5em; height: 80px; }
.main-menu .current-menu-item > a, .guide .main-menu > .current-menu-item > a {color: #7BA5AD; pointer-events: none; }

/* sub-menu */
.sub-menu {
	position: absolute; top: 100%; left: 0; height: 0; min-width: 200px; 
	overflow: hidden; opacity: 0; transition: all 1s ease-in; }
.sub-menu li {border-top: solid 1px rgba(255,255,255,0.3); background: rgba(0,0,0,0.6); }

/* has-children */
.main-menu > .menu-item-has-children > a:after {
	content: ""; display: inline-block; width: 12px; height: 8px; 
	clip-path: polygon(0 0, 100% 0%, 50% 100%); background: #fff; margin-left: 5px; }
.main-menu > .menu-item-has-children:hover {background: rgba(0,0,0,0.3); }
.main-menu > .menu-item-has-children:hover > .sub-menu {
	display: block; height: auto; overflow: visible; opacity: 1; }

/* toggle */
.gnav label, .gnav .toggle-p {display: none; }
.gnav input {display: none; opacity: 0; }

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* その他nav                                            */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* pagenation +++++++++++++++++++++++++++++++++++ */
.pagenation {position: fixed; right: 0; top: 45vh; padding: 20px; z-index: 9999; }
.pagenation li {margin-bottom: 20px; }
.pagenation a{
	display: block; width: 15px; height: 15px; background: #fff; 
	border: 1px solid var(--color-c2); border-radius: 50%; cursor: pointer; }
.pagenation a.active{background: var(--color-c2); }

/* コンタクト +++++++++++++++++++++++++++++ */
.cont-li { 
	position: fixed; top: -42px; left: 0; transform: rotate(90deg); transform-origin: bottom left; z-index: 9999; background: var(--color-c2); padding: 3px 0 12px; }

.cont-litop {background: transparent;}

.cont-li p {
	position: relative; width: 100vh; text-align: center; z-index: 99999; }
.cont-li a {color: #fff;
	}
.cont-li p::before, .cont-li p::after {
	content: ''; display: inline-block; width: 90px; height: 5px; border-top: solid 1px #f6f6f6; margin: 0 20px; }

body:not(.notop) .cont-litop a {color: #fff; }
body:not(.notop) .cont-litop p::before, body:not(.notop) .cont-litop p::after {border-color: #fff; }

/*.contact .cont-li {display: none; } 検討*/

/* morelink +++++++++++++++++++++++++++++++++++ */
.morelink {overflow: hidden; margin-top: 2rem; }
.morelink a {
	display: inline-block; float: right; 
	background: url("https://www.piarq.co.jp/wp-content/uploads/arrow.svg") 0 50% no-repeat; background-size: 160px auto; 
	color: #666; font-family: var(--font-se); font-size: 16px; padding-left: 180px; }
.home .morelink {margin-right: 3rem; }
.solution .morelink {margin-top: 2em; }

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Footer                                         */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.sfooter {
	position: relative; background: url("https://www.piarq.co.jp/wp-content/uploads/bg-gray.png"); z-index: 9000; }
.sfooter .inner-base {
	display: flex; flex-direction: column; justify-content: space-around; padding: 30px 0 100px; }
.sfooter h2 {text-align: center; margin: 0 auto 0.5rem; }
.sfooter h2 img {width: 38%; min-width: 260px; height: auto; }

.footer-menu, .compbox {align-items: center; justify-content: center; }
.footer-menu {font-size: 1.7rem; margin: 0 auto; }
.footer-menu li {padding: 0 1rem; margin-bottom: 5px; }

.compbox {border-top: solid 1px var(--color-c2); width: 80%; padding-top: 3rem; margin: 1rem auto 0; }
.compbox address {flex: 0 0 20em; }
.compbox h3 {line-height: 3; }
.compbox h3 img {width: 240px; height: auto; }
.compbox p {margin-bottom: 1rem; }
.compbox .f-clink {text-align: center; }
.compbox .f-clink a {display: inline-block; line-height: 2.5; padding: 0 1.5em; border: solid 1px var(--color-c2); }
.compbox .f-clink a:hover {background: var(--color-c2); color: #fff; }

.compbox span {display: block; }
.compbox .map {flex: 0 1 500px; }
.compbox .map div {position: relative; width: 100%; height: 0; padding-bottom: 70%; }
.compbox .map iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

p.copyright {
	position: absolute; bottom: 2rem; left: 0; right: 0; 
	font-size: 0.9rem; line-height: 1.4; text-align: center; padding: 0 5px; margin: auto; }
p.copyright span {display: block; }

p.spnote {
	display: none; 
}
p.spnote span {color: #e00; } 

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 404                                                  */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.n404 {}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* headerImgなし simple2カラム風                     */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.simple {
	background: #fff right 101% bottom 0 no-repeat fixed; background-size: auto 55vh; z-index: 5; padding-bottom: 3rem; }
.simple .flex {align-items: flex-start; }
.cmtop {flex: 0 0 20rem; min-height: calc(100vh - 150px); align-self: flex-start; }
.cmtop h1, .cmtop h2 {color: var(--color-ct); font-weight: 400; text-align: left; }
.cmtop h1 {font-size: 2rem; line-height: 1.1; margin-bottom: 7px; }
.cmtop h2 {font-size: 1rem; line-height: 1.6; margin-bottom: 2em; }
.cmtop .text1 {margin: 0 1rem 1rem 0; }

.simple .inner {flex: 3 3 auto; }
.simple .flex {align-items: center; }
.simple .morelink {margin: 1rem 0 3rem; }

.a-info {padding: 1.5rem 3%; }
.a-info {padding: 2rem 0; border-bottom: solid 1px #ccc; border-top: solid 1px #ccc; }
.info-in h3 {color: var(--color-c2); }
.info-in p {font-size: 16px; margin: 1em 1em 0;}
.info-in img {max-width: 100%;}

/* HOME-info +++++++++++++++++++++++++++++++++++++++ */
.info {background-image: url('https://www.piarq.co.jp/wp-content/uploads/info.svg'); z-index: 5; } 
.home .info h2 {font-size: 2rem; }
.home .info h2 span {display: block; font-size: 1rem; }

/* information +++++++++++++++++++++++++++++++++++++ */
.h-infobox {height: 40vh; padding: 0 3%; border: solid 1px var(--color-ct); overflow-y: scroll; } 
.h-info {position: relative; padding: 1rem 0; border-bottom: solid 1px #ccc; }
.h-info h3 {padding-right: 10rem; }
.h-info time {position: absolute; top: 0.5rem; right: 0; color: #888; font-size: 90%; padding-right: 0.5em; }

/* company ++++++++++++++++++++++++++++++++++++++++ */
.comp {background-image: url('https://www.piarq.co.jp/wp-content/uploads/company.svg'); } 
.comp .inner {flex: 3 3 auto; }

.company dl {display: flex; justify-content: flex-start; border-bottom: solid 1px #ccc; }
.company dl.item1 {border-top: solid 1px #ccc; }
.company dt, .company dd {padding: 1rem 0;  }
.company dt {flex: 0 0 7em; }
.company dd li {display: inline-block; }
.company dd li::after {content: "/"; color: #999; font-size: 0.85em; padding: 0 0.5rem; }
.company dd li:last-child::after {content: ""; padding: 0; }

/* policy ++++++++++++++++++++++++++++++++++++++++ */
.pol {background-image: url('https://www.piarq.co.jp/wp-content/uploads/company.svg'); } 
.pol .cmtop {flex: 0 0 24rem;}

.pol dt {color: var(--color-c2); font-weight: 400; padding-top: 5px; border-top: solid 1px #ccc; }
.pol dd {font-size: 16px; margin: 0.5rem 0 2rem 1rem; }

/* contact ++++++++++++++++++++++++++++++++++++++++ */
.cont {background-image: url('https://www.piarq.co.jp/wp-content/uploads/contact.svg'); } 

.contact .text2 {margin: 0; }
.contact .text2 li {font-size: 15px; margin-bottom: 7px; text-indent: -18px; }
.contact .text2 li::before {content: "※"; padding-right: 3px; }

.contact-form{width: 94%; margin: 0 auto 2rem; }
.contact-form label span {color: #e00; font-size: 14px;}
.contact-form label {font-size: 1rem; font-weight: 300; color: var(--color-ct); }
.contact-form dd input, .contact-form textarea {width: 100%; padding: 0.5em; margin-bottom: 1rem; border: solid 1px var(--color-c1); border-radius: 6px; }
.contact-form dd input:hover, .contact-form textarea:hover {border-color: var(--color-c2); }
.contact-form input[type="submit"] {
	width: 8em; background: var(--color-c2); opacity: 0.75; cursor: pointer;
	color: #fff; line-height: 3; text-align: center; margin: 0 auto; border-radius: 6px; }
.contact-form input[type="submit"]:hover {opacity: 1; }

/* 個別エラーメッセージ */
.wpcf7-not-valid-tip {
	position: relative; display: inline-block; width: 20em; max-width: 90%; background: #FF7B9D; 
	color: #fff; font-size: 16px; line-height: 1.5; text-align: center; transform: translatey(-1em); border-radius: 6px; }
.use-floating-validation-tip .wpcf7-not-valid-tip { /* ツールチップ利用時 */
	position: relative; top: 0; left: 0; width: 20em; z-index: 100; background: #FF7B9D; padding: .2em .8em; border: 0; }
.wpcf7-not-valid-tip::before {
	content: ""; display: inline-block; position: absolute; bottom: 100%; left: 20%; width: 12px; height: 10px; 
	clip-path: polygon(0 100%, 100% 100%, 50% 0); background: #FF7B9D; margin-left: 5px; }
/* エラーメッセージ */
.wpcf7 form .wpcf7-response-output {
	margin-top: 0; padding: 0.2em 1em; border-color: #FF7B9D !important; border-radius: 7px; }	

/* Thanksページ +++++++++++++++++++++++ */
.than {background-image: url('https://www.piarq.co.jp/wp-content/uploads/contact.svg'); } 
.than .cmtop h1 {font-size: 1.8rem; }
.than .inner {padding-left: 3%; margin-top: 1.5rem; }
.than .inner span {font-weight: 400; font-size: 1.2rem; }
.than .snote {padding: 1.5rem; margin-top: 2rem; border: solid 1px #ccc;}
.than .inner h3 {color: #388; font-weight: 400; font-size: 1.1rem; margin-bottom: 1rem; }


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* メディア                                         */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (min-width: 901px) {
	.contact .w1 .cont-li {display: none; }
}
@media screen and (max-width: 900px) {
	body {font-size: 16px; line-height: 1.5; }
	.inner-cont {padding: 85px 0 30px; }
/* nav ++++++++ */
	.navbox {height: 70px; }
	.site-logo {left: 10px; }
	.gnav {position: static; overflow: visible; }
	.gnav label {
		display: block; position: absolute; top: 0; right: 0; width: 80px; z-index: 9999; background: #aeceff; 
		height: 100%; cursor: pointer; text-align: right; padding: 5px 10px 0 0; }
	.gnav .dashicons {display: inline-block; width: 60px; color: #fff; font-size: 60px; }
	.gnav .toggle-p {display: block; }
	/* checked */
	.gopen:checked + label {width: 100%; color: #fff; }
	.gopen:checked + label::before {
		content: 'Close'; position: absolute; top: 12px; right: 65px; 
		font-weight: bold; font-size: 22px; }
	.gopen:checked + label::after {
		content: '\f344'; position: absolute; top: 7px; right: 10px; font-family:"dashicons";
		font-size: 50px; line-height: 1; }
	.gopen:checked + label  .dashicons {display: none; }
	.gopen:checked ~ .main-menu {transform: translate(0, 0); opacity: 1; }
	/* gnav */
	.main-menu {
		position: absolute; top: 0; right: 0; width: 80%; height: 98vh; background: rgba(0,0,0,0.8); 
		flex-direction: column; justify-content: flex-start; align-items: flex-start;
		padding: 80px 6% 1rem 3%; transform: translate(100%, 0); opacity: 0.2; 
		transition: transform 0.6s ease-out, opacity 0.6s ease-in; z-index: 9000; }
	.main-menu li {width: 100%; border-top: solid 1px rgba(255,255,255,0.3); }
	.main-menu > li:last-child {display: block; border-bottom: solid 1px rgba(255,255,255,0.3); }
	.main-menu a {padding: 15px 0.5em; }
	.main-menu > li > a {justify-content: flex-start; height: auto; }
	.guide .topnav .main-menu > li > a {color: #fff; }
	.main-menu > .menu-item-has-children > a:after {content: none; }
	.sub-menu {position: static; display: block; height: auto; opacity: 1; }
	.sub-menu li {width: 100%; background: transparent; padding-left: 1rem; }
	.site-header {background: transparent !important; }
	.cont-li {display: none; }
/* footer ++++++++ */
	.sfooter {z-index: 100; padding-top: 120px; }
	.sfooter .inner-base {justify-content: center; padding: 10px 0 100px; height: 100%; }
	.fnav, hr {display: none;}
	.compbox {display: block; text-align: center; padding-top: 2rem; }
	.compbox address {display: inline-block; margin: 0 auto; }	
	.compbox h3 img {max-width: 240px; width: 60%; }
	.compbox .map {width: 90%; max-width: 350px; margin: 0 auto; }
	.compbox .map div {padding-bottom: 55%; }
	p.copyright {bottom: 0.5rem; }
/* 共通2カラム ++++++++ */
	.simple {background-position: 100% 70px; background-attachment: scroll; background-size: auto 25vh; }
	.simple .flex {display: block; }
	.simple .cmtop {flex: 0 0 100%; min-height: 20vh; }
}

@media screen and (max-width: 700px) {
	h2 {font-size: 2rem; }
	.inner-base, .inner-cont {width: 80%; }
	.inner-cont {padding-top: 75px; }
/* nav ++++++++ */
	.navbox {height: 60px; }
	.gnav label {width: 70px; }
	.gnav .dashicons {width: 50px; font-size: 55px; }
	.morelink {margin-top: 1rem; }
	.morelink a {background-size: 100px auto; padding-left: 110px; }
	.home .morelink {margin-right: 0.5rem; }

/* footer ++++++++ */
	.compbox {width: 100%; padding-top: 1rem; margin-top: 0; }
/* 共通2カラム ++++++++ */
	.simple {background-position: 100% 60px; background-size: auto 20vh; }
	.simple .flex {display: block; }
	.simple .cmtop {flex: 0 0 100%; min-height: 15vh; }
	/* company */
	.company dl {display: block; padding: 0.5rem 0; }
	.company dt, .company dd {display: inline-block; padding: 0; margin: 5px 0; }
	.company dt {min-width: 6em; color: var(--color-c2); }
	.company dt::after {content: " :"; }
	/* thanks */
	.than .inner {padding-left: 0; }
}
@media screen and (orientation: landscape) {
/* スマホ横注意 */
	p.spnote { 
		display: block; position: fixed; top: 10px; left: 10vw; z-index: 100000; width: 80vw; height: 85vh; 
		margin: 10px auto; padding: 25vh 1em 1em; background: rgba(255,255,255,0.9); 
		font-weight: bold; line-height: 1.8; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
}