@charset "utf-8";

/*
Theme Name: Misora Design
Theme URI: https://misoradesign.com/
Author: mama-co
Description: Misora Design official web site.
Version: 20250626
*/

/* === Index ==========

1. Common
2. Header
3. Order
4. Footer
5. Front Page
	5-0. Main Catchcopy
	5-1. Service
	5-2. Works
	5-3. Voice
	5-4. Blog
	5-5. common SNS
	5-6. Profile
6. Page
	6-0. Common
	6-1. Contact Form
	6-X. Page & Post Common
7. Single & Page
	7-0. Common
	7-1. Page - Low
	7-2. Single - Voice
	7-3. Page - Teacher
8. Archive
	8-1. Common
	8-2. FAQ
8. Sidebar
	8-1. Common

==================== */


/* ====================

    1. Common

==================== */

body { background: url("images/header_bg_pc.jpg") center top no-repeat; }
@media screen and (max-width: 667px) {
	body {
		background: url("images/header_bg_sp.jpg") center top no-repeat;
		background-size: 100%;
	}
}

.innerBox, #breadcrumb, .gmap {
	width: 980px;
	margin: 0 auto;
}
@media screen and (max-width: 667px) {
	.innerBox, .pageStyle main > section, .gmap { width: 94%; }
	.innerBox { margin-bottom: 6rem; }
}

h1, h2, h3, h4, h5, h6, p, li, th, td, dt, dd {
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, "Hiragino Sans", "sans-serif";
}

p, li, th, td, dt, dd {
	color: #444;
	font-size: 1.6rem;
}
@media screen and (max-width: 667px) {
	p, li, th, td, dt, dd { font-size: 1.4rem; }
}

li {
	list-style: none;
	line-height: 1.5;
}

p { line-height: 1.7; }

.f10 { font-size: 1rem; }
.f12 { font-size: 1.2rem; }
.f14 { font-size: 1.4rem; }
.f16 { font-size: 1.6rem; }
.f18 { font-size: 1.8rem; }
.f20 { font-size: 2rem; }
.f22 { font-size: 2.2rem; }
.f24 { font-size: 2.4rem; }
.f26 { font-size: 2.6rem; }
.f28 { font-size: 2.8rem; }
.f36 { font-size: 3.6rem; }
@media screen and (max-width: 667px) {
	.f12 { font-size: 1rem; }
	.f14 { font-size: 1.2rem; }
	.f16 { font-size: 1.4rem; }
	.f18 { font-size: 1.6rem; }
	.f20 { font-size: 1.8rem; }
	.f22 { font-size: 2rem; }
	.f24 { font-size: 2.2rem; }
	.f26 { font-size: 2.4rem; }
	.f28 { font-size: 2.6rem; }
	.f36 { font-size: 2.8rem; }
}

.blu { color: #266f80; }
.org { color: #f70; }
.gry { color: #aaa; }

.centering { text-align: center; }
.txtRight { text-align: right; }

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

a { text-decoration: none; }

.sp { display: none; }
@media screen and (max-width: 667px) {
	.sp { display: block; }
	
	img {
		width: 100%;
		height: auto;
	}
}

/* Button */
.bluBtn {
	padding: 1rem 6rem;
	color: #266f80;
	font-size: 1.6rem;
	border: 1px solid #266f80;
	border-radius: 25px;
	background: url("images/btn_arrow_off.png") 88% center no-repeat;
	background-size: 3%;
}

.bluBtn:hover {
	color: #fff;
	background-image: url("images/btn_arrow_on.png");
	background-color: #266f80;
}

/* Background Color */
.bgBeige { background-color: #fcf9f6; }
.bgWht { background-color: #fff; }


/* Image layout */
.alignleft {
	float: left;
	margin: 0 4rem 4rem 0;
}

.aligncenter {
	display: block;
	margin: 0 auto 4rem;
}

.alignright {
	float: right;
	margin: 0 0 4rem 4rem;
}

.marBtm3 { margin-bottom: 3rem; }


/* DL */
dl { border-top: 1px solid #ddd; }

dt {
	float: left;
	width: 240px;
	padding: 2rem;
	font-weight: bold;
}
@media screen and (max-width: 667px) {
	dt {
		float: none;
		padding: 1rem;
	}
}

dd {
	padding: 2rem 2rem 2rem 0;
	border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 667px) {
	dd { padding: 0 1rem 1rem; }
}




/* ====================

    2. Header

==================== */

header { background-color: #fff; }

header .innerBox {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
@media screen and (max-width: 667px) {
	header.innerBox { width: 100%; }
}

header h1 { margin: 3rem 0; }
@media screen and (max-width: 667px) {
	header h1 {
		width: 50%;
		margin: 1rem auto;
		text-align: center;
	}
}

header h1 img { width: 70%; }
@media screen and (max-width: 667px) {
	header h1 img { width: 80%; }
}

header nav ul { display: flex; }
@media screen and (max-width: 667px) {
	nav ul {
		flex-direction: column;
	}
}

header nav li a {
	display: block;
	padding: 4.1rem 1.5rem 1.8rem;
	color: #444;
	font-size: 1.4rem;
	background-position: center 2rem;
	background-repeat: no-repeat;
}
@media screen and (max-width: 667px) {
	header nav li a {
		padding: 1rem 1rem 1rem 3rem;
		background-position: 10px 14px;
	}
}

header nav li:nth-child(6) a, header nav li:nth-child(6) a:hover {
	color: #fff;
	padding: 4.1rem 2rem 1.8rem;
}
@media screen and (max-width: 667px) {
	header nav li:nth-child(6) a, header nav li:nth-child(6) a:hover {
		padding: 1rem 1rem 1rem 3rem;
	}
}

header nav li:nth-child(1) a { background-image: url("images/nav_first_off.png"); }
header nav li:nth-child(2) a { background-image: url("images/nav_service_off.png"); }
header nav li:nth-child(3) a { background-image: url("images/nav_works_off.png"); }
header nav li:nth-child(4) a { background-image: url("images/nav_voice_off.png"); }
header nav li:nth-child(5) a { background-image: url("images/nav_school_off.png"); background-position: center 24px; }
@media screen and (max-width: 667px) {
	header nav li:nth-child(5) a { background-position: 10px 14px; }
}
header nav li:nth-child(6) a { background-image: url("images/nav_form.png"); }

header nav li:nth-child(6) { background: linear-gradient(90deg, #f70 0%, #fb0 100%); }

header nav li a:hover { color: #009eb8; }

header nav li:nth-child(1) a:hover { background-image: url("images/nav_first_on.png"); }
header nav li:nth-child(2) a:hover { background-image: url("images/nav_service_on.png"); }
header nav li:nth-child(3) a:hover { background-image: url("images/nav_works_on.png"); }
header nav li:nth-child(4) a:hover { background-image: url("images/nav_voice_on.png"); }
header nav li:nth-child(5) a:hover { background-image: url("images/nav_school_on.png"); }

header nav li:nth-child(6):hover { background: linear-gradient(90deg, #fb0 0%, #f70 100%); }


/* ▼ ドロップダウン共通 ▼ */
.menu li.has-dropdown { position: relative; }

.menu li .submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-45%);
	background: #fff;
	z-index: 1000;
	min-width: 170px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.menu li .submenu li {
	margin: 0;
	border-top: 1px solid #eee;
}

.menu li .submenu li a {
	display: block;
	padding: 1rem;
	color: #fff;
	font-size: 1.3rem;
	text-align: center;
	background: #009eb8;
}

.menu li:hover .submenu { display: block; }

header nav .submenu li:nth-child(1) a:hover,
header nav .submenu li:nth-child(2) a:hover,
header nav .submenu li:nth-child(3) a:hover {
	color: #009eb8;
	background-color: #e5f5f8;
	background-image: none;
}



.menu-btn { display: none; }
@media screen and (max-width: 667px) {
	/* Navbar & Navmenu color */
	:root {
	  --background-navbar: rgba(255, 255, 255, 0.95);
	}

	header {
	  background: var(--background-navbar);
	  position: fixed;
	  width: 100%;
	  height: 60px;
	}

	/* Nav items */
	.menu {
		list-style: none;
		position: absolute;
		width: 100%;
		height: auto;
		top: 0;
		margin-top: 60px;
		padding: 0 0 10px 0;
		clear: both;
		background: var(--background-navbar);
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
		transform: scale(1, 0);
		transform-origin: top;
	}

	/* Hamburger menu button */
	.menu-btn:checked ~ .menu {
		transform: scale(1, 1);
		transform-origin: top;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}

	/* Hamburger menbu text */
	.menu a {
		text-decoration: none;
		text-transform: capitalize;
		opacity: 0;
		transition: 0.5s;
	}

	.menu li {
		border-top: 1px solid rgb(75, 75, 75);
		margin: 0 54px;
		opacity: 0;
		transition: 0.5s;
	}

	.menu-btn:checked ~ .menu a,
	.menu-btn:checked ~ .menu li {
		opacity: 1;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
	}

	.menu-icon {
		display: inline-block;
		position: relative;
		cursor: pointer;
		padding: 24px 14px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.navicon {
		background: #266f80;
		display: block;
		height: 3px;
		width: 26px;
		position: relative;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}

	.navicon:before,
	.navicon:after {
		content: "";
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
		background: #266f80;
		transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}

	.navicon:before { top: 9px; }

	.navicon:after { bottom: 9px; }

	/* Hamburger Menu Animation Start */
	.menu-btn:checked ~ .menu-icon .navicon:before {
		transform: rotate(-45deg);
	}

	.menu-btn:checked ~ .menu-icon .navicon:after {
		transform: rotate(45deg);
	}

	.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
		top: 0;
	}
	.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
		bottom: 0;
	}

	.menu-btn:checked ~ .menu-icon .navicon {
		background: rgba(0, 0, 0, 0);
		transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
	}
	/* Hamburger Menu Animation End */

	/* Navbar Container */
	.navtext-container {
	  width: 100%;
	  height: 80px;
	  position: absolute;
	  box-sizing: border-box;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	/* Dropdown menu */
	.menu li.has-dropdown { position: relative; }

	.menu li .submenu {
		position: relative;
		top: 0;
		left: 0;
		transform: translateX(0);
		box-shadow: none;
		background: var(--background-navbar);
	}

	.menu li .submenu li a {
		padding-left: 4rem;
		text-align: left;
	}

	/* ハンバーガー開閉時にサブメニューも表示されるように */
	.menu-btn:checked ~ .menu .submenu {
		display: block;
		opacity: 1;
	}
}


/* Breadcrumb */
@media screen and (max-width: 667px) {
	#breadcrumbArea { display: none; }
}
#breadcrumb ul {
	display: flex;
	margin: 0 auto 6rem;
}

#breadcrumb li, #breadcrumb a {
	color: #999;
	font-size: 1rem;
}

#breadcrumb li {
	margin-right: 1em;
	padding-right: 1em;
	background: url("images/arrow_breadcrumb.png") right 4px no-repeat;
}

#breadcrumb li:last-child {
	margin-right: 0;
	padding-right: 0;
	background: none;
}

#breadcrumb li span.f12 { display: none; }




/* ====================

	3. Order

==================== */

.orderArea { width: 100%; }

.order {
	padding: 6rem 0 8rem;
	background: url("images/order_bg-80.jpg") center top no-repeat;
}
@media screen and (max-width: 667px) {
	.order {
		background: url("images/order_bg_sp-80.jpg") center top no-repeat;
		background-size: cover;
	}
}

.orderBtn {
	display: block;
	width: 450px;
	margin: 4rem auto 0;
	padding: 2rem 0;
	color: #fff;
	font-size: 2rem;
	text-align: center;
	background-color: #f2a136;
	border: 1px solid #f2a136;
}
@media screen and (max-width: 667px) {
	.orderBtn {
		width: 70%;
		font-size: 1.8rem;
	}
}

.orderBtn:hover {
	color: #f2a136;
	background-color: rgb(255 255 255 / 0.8);
}




/* ====================

    4. Footer

==================== */

footer {
	padding: 6rem 0;
	background-color: #266f80;
}

.footerLogo { margin-bottom: 4rem; }
@media screen and (max-width: 667px) {
	.footerLogo {
		width: 40%;
		margin: 0 8% 1rem;
	}
}

.footerLogo img { width: 12%; }
@media screen and (max-width: 667px) {
	.footerLogo img { width: 100%; }
}

footer ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto 2rem;
}
@media screen and (max-width: 667px) {
	footer ul {
		width: 90%;
		justify-content: flex-start;
	}
}

footer li { margin: 0 0 1rem; }
@media screen and (max-width: 667px) {
	footer li {
		width: 50%;
	}
}

footer li:after {
	color: #fff;
	content: "／";
}
footer li:last-child:after {
	content: "";
}
@media screen and (max-width: 667px) {
	footer li:after { content: ""; }
}

footer li a {
	display: inline-block;
	padding: 0 1em;
	color: #fff;
	font-size: 1.4rem;
	text-decoration: none;
}
@media screen and (max-width: 667px) {
	footer li a { 
		padding: 0.7rem 1rem;
		font-size: 1.2rem;
	}
}

footer p {
	color: #fff;
	font-size: 1.2rem;
	text-align: center;
}




/* ====================

    5. Front Page

==================== */

/* --- 5-0. Main Catchcopy ------ */
.frontSec .mainCatch {
	display: flex;
	flex-direction: column;
	padding: 0 0 5rem;
}
@media screen and (max-width: 667px) {
	.frontSec .mainCatch {
		padding: 2.5rem 0 2rem;
		background-size: 100%;
	}
}

.mainCatch h1, .mainCatch h2 { line-height: 0; }
@media screen and (max-width: 667px) {
	.mainCatch h1 { margin: 0; }
}

.frontSec .mainCatch h2 {
	margin: 0 0 3rem;
	text-align: left;
}
@media screen and (max-width: 667px) {
	.frontSec .mainCatch h2 { margin: 0 0 1.5rem; }
}

.mainCatch h1 img, .mainCatch h2 img { width: 100%; }


/* Front Page Common */
.frontSec section { padding: 8rem 0; }
@media screen and (max-width: 667px) {
	.frontSec section { padding: 5rem 0; }
}

.frontSec > section { padding: 0; }

.frontSec h2 {
	margin-bottom: 5rem;
	font-size: 3.2rem;
	font-weight: normal;
	text-align: center;
}
@media screen and (max-width: 667px) {
	.frontSec h2 {
		margin-bottom: 3rem;
		font-size: 2.4rem;
	}
}

.frontSec h2 span {
	display: block;
	margin: 0 auto;
	color: #266f80;
	font-size: 1.6rem;
}
@media screen and (max-width: 667px) {
	.frontSec h2 span { font-size: 1.4rem; }
}

.conLeft, .conRight {
	display: flex;
	justify-content: space-between;
}
.conRight { flex-direction: row-reverse; }
@media screen and (max-width: 667px) {
	.conLeft, .conRight { flex-direction: column; }
}

.frontSec .txtBox { width: 540px; }
@media screen and (max-width: 667px) {
	.frontSec .txtBox { width: 100%; }
}

.frontSec .txtBox p { margin-bottom: 2.8rem; }
.frontSec .txtBox p:last-child { margin-bottom: 0; }
@media screen and (max-width: 667px) {
	.frontSec .txtBox p:last-child { margin-bottom: 2.8rem; }
}

.conLeft picture, .conRight picture { width: 400px; }
@media screen and (max-width: 667px) {
	.conLeft picture, .conRight picture {
		width: 90%;
		margin: 0 auto;
	}
}

.more {
	margin: 0 auto;
	width: 360px;
	text-align: center;
}
@media screen and (max-width: 667px) {
	.more { width: 70%; }
}

.more a {
	display: block;
	padding: 1.6rem 0;
	color: #266f80;
	background: url("images/btn_more_off.png") 306px center no-repeat;
	border: 1px solid #266f80;
	border-radius: 30px;
}

.more a:hover {
	color: #fff;
	background-image: url("images/btn_more_on.png");
	background-color: #266f80;
}


.frontSec .topConcept img,
#topBranding img, #topDesign img, #topConsulting img, #topSchool img,
.frontSec .topProf img { width: 100%; }


/* --- 5-1. Service ------ */
.frontSec .topService { padding-top: 8rem; }

.frontSec .topService section {
	padding: 0 0 8rem;
}

.frontSec .topConcept {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 0 8rem;
}
@media screen and (max-width: 667px) {
	.frontSec .topConcept {
		flex-direction: column;
		padding: 0 0 4rem;
	}
}

.frontSec .topConcept h2 { width: 100%; }

.topService .bluBtn { width: 360px; }


/* --- 5-2. Works ------ */
.topWorks ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.topWorks li {
	width: 470px;
	margin-bottom: 4rem;
	box-shadow: 0px 0px 10px 1px #ddd;
}

.topWorks li a {
	display: flex;
	flex-direction: column-reverse;
	padding: 4rem;
}

.topWorks h3 {
	color: #266f80;
}



/* --- 5-3. Voice ------ */
.topVoice { padding: 8rem 0; }
@media screen and (max-width: 667px) {
	.topVoice { padding: 5rem 0; }
}

.topVoice ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.topVoice li {
	margin: 0 0 4rem;
	width: 470px;
	background-color: #fff;
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 667px) {
	.topVoice li {
		margin: 0 auto 3rem;
		width: 94%;
	}
}

.topVoice li a {
	display: flex;
	flex-direction: row-reverse;
	padding: 4rem;
}
@media screen and (max-width: 667px) {
	.topVoice li a { flex-direction: column; }
}

.topVoice li h3 {
	margin: 0 0 1.8rem;
	color: #266f80;
	font-size: 2rem;
	font-weight: bold;
}

.topVoice li p {
	padding: 1rem 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 667px) {
	.topVoice li p { margin-bottom: 2rem; }
}

.topVoice li p span {
	display: inline-block;
	margin: 0 2rem 0 0;
	padding: 0.1rem 2rem;
	color: #fff;
	background-color: #444;
}

.topVoice figure { margin-right: 2rem; }

.topVoice figure img { width: 100px; }
@media screen and (max-width: 667px) {
	.topVoice figure img { width: 100%; }
}



/* --- 5-4. Blog ------ */
.topBlog ul {
	display: flex;
	justify-content: space-between;
	margin: 0 auto 6rem;
}
@media screen and (max-width: 667px) {
	.topBlog ul { flex-direction: column; }
}

.topBlog li {
	width: 300px;
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 667px) {
	.topBlog li { width: 100%; }
}

.topBlog li a {
	display: flex;
	flex-direction: column;
	color: #444;
}

.topBlog li a:hover { color: #009eb8; }

.topBlog li p.topBlogtit {
	order: 2;
	padding: 3rem 3rem 1rem;
}
@media screen and (max-width: 667px) {
	.topBlog li p.topBlogtit { padding: 2rem 3rem; }
}

.topBlog li p.liCat {
	order: 3;
	padding: 0 3rem 1rem;
}

.topBlog li time {
	order: 4;
	padding: 0 3rem 3rem;
	font-size: 1.2rem;
}

.topBlog li figure {
	order: 1;
	margin: 3rem 0 0;
	text-align: center;
}
@media screen and (max-width: 667px) {
	.topBlog li figure { margin: 0; }
}



/* --- 5-5. common SNS ------ */
/*.frontSec section.commSns {
	display: flex;
	justify-content: space-between;
	padding-bottom: 0.5rem;
}
@media screen and (max-width: 667px) {
	.frontSec section.commSns { flex-direction: column; }
}

.commSns > div { width: 470px; }*/
@media screen and (max-width: 667px) {
	.commSns > div {
		width: 94%;
		margin: 0 auto;
	}
	.commSns div.fbArea { margin-bottom: 4rem; }
	.commSns .igArea h2 { margin-bottom: 0; }
}

.igArea .innerBox { width: auto; }



/* --- 5-6. Profile ------ */
.topProf > div { margin-bottom: 4rem; }

.topProf h3 {
	color: #444;
	font-size: 2.4rem;
	margin-bottom: 3rem;
}





/* ====================

    6. Page

==================== */

/* --- 6-0. Common ------ */
.pageStyle { background: url("images/archive_h1_bg.png") repeat; }

.pageStyle header { background: url("images/header_bg_repeat_pc.png") left top repeat-x; }

.pageStyle header > .innerBox { margin-bottom: 1rem; }

.pageStyle main .innerBox > section { margin-bottom: 8rem; }

.pageStyle main .innerBox > section section { margin-top: 4rem; }

.pageStyle .bgWht { padding: 8rem 0; }

.columnLeft {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.columnRight {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	flex-wrap: wrap;
}

.columnLeft .txtBox, .columnRight .txtBox { width: 620px; }
@media screen and (max-width: 667px) {
	.columnLeft .txtBox, .columnRight .txtBox { width: 100%; }
	
	.columnLeft figure, .columnRight figure { margin: 0 auto 2rem; }
}

.pageStyle main h1 {
	margin: 0 0 7.6rem;
	padding: 2.6rem 0 0;
	font-size: 2.8rem;
	font-weight: normal;
	text-align: center;
	background-position: center top;
	background-repeat: no-repeat;
}
@media screen and (max-width: 667px) {
	.pageStyle main h1 {
		margin: 0 0 3.6rem;
		padding: 10rem 0 0;
		font-size: 2.4rem;
		background-position: center 7.5rem;
	}
}

.pageStyle .visitorsPage h1 { background-image: url("images/ic_first.png"); }
.pageStyle .servicePage h1 { background-image: url("images/ic_service.png"); }
.pageStyle .schoolPage h1 { background-image: url("images/ic_school.png"); }

.pageStyle main h1 span { display: block; }

.pageStyle .workStyle h1 {
	margin-bottom: 4.6rem;
	padding-top: 4.6rem;
}

.pageStyle main h2 {
	width: 100%;
	margin: 0 auto 6rem;
	font-size: 3rem;
	font-weight: normal;
	text-align: center;
}
@media screen and (max-width: 667px) {
	.pageStyle main h2 { font-size: 2.8rem; }
}

.pageStyle main h2 span {
	display: block;
	color: #009eb8;
	font-size: 1.4rem;
}

.pageStyle main h3 {
    display: block;
    margin-bottom: 2.4rem;
    padding-bottom: 1rem;
	color: #266f80;
	font-size: 2.6rem;
	font-weight: normal;
    text-align: left;
    border-bottom: 1px solid #266f80;
}
@media screen and (max-width: 667px) {
	.pageStyle main h3 { font-size: 2.4rem; }
}

.pageStyle main h3 span { margin-left: 1em; }

.pageStyle main h4 {
	margin-bottom: 2rem;
	color: #266f80;
	font-size: 2rem;
}


.pageStylein p.pageCate { margin: 0 0 0 1em; }
.pageStylein p.pageCate:before { content: "/"; }
@media screen and (max-width: 667px) {
	.pageStylein p.pageCate { margin: 0; }
	.pageStylein p.pageCate:before { content: ""; }
}

.pageCate a {
	color: #266f80;
	font-size: 1.4rem;
}

.pageStyle main time {
	color: #999;
	font-size: 1.4rem;
}

.workStyle time { margin: 0 auto; }

.workStyle .postInfo time:after {
	content: "";
	margin-right: 0;
	padding-right: 0;
}

.workSample {
	display: flex;
	justify-content: center;
}

.workSample img {
	display: block;
	margin: 0 auto;
}

.pageStylein figure { margin: 0 auto 5rem; }
@media screen and (max-width: 667px) {
	.pageStylein figure { margin: 0 auto 3rem; }
}

@media screen and (max-width: 667px) { /* レスポンシブ用 */
    .gmap {
        position: relative;
        padding: 46.25%;
        height: 0;
        overflow: hidden;
    }

    .gmap iframe, .gmap object, .gmap embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}



/* --- 6-1. Contact Form --- */
.contactForm {
	width: 100%;
	margin: 4rem auto;
	border-top: 1px solid #ddd;
}

.contactForm dt, .contactForm dd { font-size: 1.8rem; }

.contactForm dt {
	float: left;
	width: 380px;
	padding: 1rem 0;
	font-weight: bold;
}
@media screen and (max-width: 667px) {
	.contactForm dt {
		float: none;
		width: 100%;
	}
}

.contactForm dt strong:after {
	content: " *";
	color: #C00;
}

.contactForm dd {
	padding: 1rem 0 1rem 38rem;
	border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 667px) {
	.contactForm dd { padding: 0 0 1rem; }
	
	.contactForm dd .mwform-radio-field {
		display: block;
		margin-left: 1rem;
	}
}

.contactForm input[type=text], .contactForm input[type=email], .contactForm input[type=tel], .contactForm textarea {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 1px solid #ddd;
	background-color: #fff;
}

.wpcf7-not-valid-tip { font-size: 1.4rem!important; }

input::placeholder { color: #ccc; }

.conBtnarea {
	display: flex;
	justify-content: center;
	align-items: baseline;
}

.conBtnarea input[type=submit] {
	display: block;
	margin: 0 auto 6rem;
	padding: 2rem 5rem;
	color: #fff;
	font-size: 2rem;
	text-align: center;
	border: 1px solid #f2a136;
	background-color: #f2a136;
	cursor: pointer;
}

.conBtnarea input[type=submit]:hover {
	color: #f2a136;
	background-color: #fcecd7;
}

.pageback { border: 1px solid #ccc; }



/* ==========
	6-X. Page & Post Common
========== */
.pageStyle main ul, .pageStyle main ol, .post ul, .post ol {
	margin: 0 auto 3rem;
	padding: 4rem 4rem 4rem 6rem;
	background-color: #e2eceb;
}
@media screen and (max-width: 667px) {
	.pageStyle main ul, .pageStyle main ol, .post ul, .post ol { padding: 2rem 3rem; }
}

.pageStyle main ul > li:before, .post li:before {
	content: "●";
	padding-right: 5px;
	color: #266f80;
	font-size: 8px;
	position: relative;
	top: -3px;
}

.pageStyle main ol > li, .post main ol > li { counter-increment: number; }

.pageStyle section > ol > li, .post main > ol > li {
	list-style-type: decimal;
	padding-left: 0.5rem;
}

.pageStyle main ol ol li, .post main ol ol li {
	margin-left: 4rem;
	padding-left: 0;
	text-indent: 0;
	list-style-type: katakana;
}

.pageStyle main ul > li, .post ul > li {
	margin-bottom: 1rem;
	/* padding-left: 1em; */
	text-indent: -1em;
}

.pageStyle main ol > li, .post ol > li {
	margin-bottom: 1rem;
}

.pageStyle main li:last-child, .post li:last-child { margin-bottom: 0; }

.pageStyle main li ul, .pageStyle main li ol, .post li ul, .post li ol {
	margin: 0;
	padding: 1rem 2rem;
}
@media screen and (max-width: 667px) {
	.pageStyle main li ul, .pageStyle main li ol, .post li ul, .post li ol {
		padding: 1rem 2rem;
	}
}

.pageStyle main p, .post p, .voiceStyle p { margin-bottom: 3rem; }

.pageStyle main blockquote, .post blockquote {
	margin: 0 auto 3rem;
	padding: 4rem 4rem 4rem 10rem;
	color: #666;
	font-size: 1.6rem;
	background: url("images/blockquot_bg.png") 40px 40px no-repeat;
	background-color: #eee;
}





/* ====================

	7. Single

==================== */

/* --- 7-0. Common ------ */
.postStyle header { background: url("images/header_bg_repeat_pc.png") left top repeat-x; }

.postStyle header > .innerBox { margin-bottom: 1rem; }

.postStyle main article {
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 667px) {
	.postStyle main article { flex-direction: column; }
}

.postStyle .post { width: 600px; }
@media screen and (max-width: 667px) {
	.postStyle .post {
		width: 100%;
		margin-top: 8rem;
	}
}

/* Post Info */
.postInfo {
	display: flex;
	align-items: baseline;
	margin: 0 0 5.4rem;
}
@media screen and (max-width: 667px) {
	.postInfo { margin: 0 0 2.4rem; }
}

.postInfo time {
	color: #ccc;
	font-size: 1.4rem;
}

.postInfo time:after {
	content: "／";
	margin-right: 1em;
	padding-left: 1em;
}

.postStyle main p.pageCate { margin-bottom: 0; }

/* Title Style */
.post h1 {
	margin: 0 0 2rem;
	font-size: 2.8rem;
	font-weight: normal;
	line-height: 1.3;
}
@media screen and (max-width: 667px) {
	.post h1 { font-size: 2.4rem; }
}

.post h2 {
	margin: 0 0 3rem;
	padding: 3rem 0;
	color: #266f80;
	font-size: 2rem;
	line-height: 1.5;
	border-top: 5px solid #266f80;
	border-image: linear-gradient(to right, #266f80 0%, #6cd 100%);
	border-image-slice: 1;
	border-bottom: 1px solid #ccc;
}

.post h3 {
	margin: 0 0 3rem;
	padding: 1.5rem 0 1.5rem 2.5rem;
	font-size: 1.8rem;
	font-weight: normal;
	border-left: 5px solid #266f80;
	border-image: linear-gradient(to bottom, #266f80 0%, #6cd 100%);
	border-image-slice: 1;
}

.post h4 {
	margin: 0 0 3rem;
	color: #266f80;
	font-size: 1.6rem;
	font-weight: bold;
}




/* Page Navi */
.pageNavi {
    display: flex;
    margin: 0 0 4rem;
    border: 1px solid #e9e9e9;
}

.postStyle main .pageNavi p {
    width: 50%;
    margin: 0;
    padding: 2rem;
    font-size: 1.4rem;
}

.postStyle main .pageNavi p:first-child {
    border-right: 1px solid #e9e9e9;
}

.postStyle main .pageNavi p span { color: #266f80; }


/* Table */
.pageStyle main table {
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
}

.pageStyle main th {
	color: #fff;
	background-color: #266f80;
}

.pageStyle main th, .pageStyle main td {
	padding: 1rem;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.pageStyle main th p, .pageStyle main td p { margin: 0; }

.pageStyle main tr:nth-child(odd) { background-color: #fff; }


/* EyeCatch */
.postStyle .eyeCatch { margin: 0 0 4rem; }



/* --- 7-1. Single - Voice ----- */
.voiceStyle {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8rem;
	padding: 8rem 8rem 5rem;
}
@media screen and (max-width: 667px) {
	.voiceStyle {
		flex-direction: column;
		padding: 9rem 3rem 1rem;
	}
}

.voiceStyle .postInfo time:after { content: ""; }

.voiceTxt { width: 540px; }
@media screen and (max-width: 667px) {
	.voiceTxt { width: 100%; }
}

.voiceImg {
	width: 240px;
	margin: 0 0 4rem 4rem;
}
@media screen and (max-width: 667px) {
	.voiceImg {
		width: 80%;
		margin: 0 auto 4rem;
	}
}

.voiceImg figure { margin-bottom: 1rem; }

.voiceStyle h1 {
	margin: 0 0 2rem;
	font-size: 2.8rem;
	font-weight: normal;
	line-height: 1.3;
}
@media screen and (max-width: 667px) {
	.voiceStyle h1 { font-size: 2.4rem; }
}

.voiceStyle .voiceImg p {
	margin: 0 ;
	text-align: center;
}

.voiceName { font-size: 2rem; }

.voiceStyle dl {
	margin: 0 0 4rem;
	border-top: 1px solid #ccc;
}

.voiceStyle dt, .voiceStyle dd { font-size: 1.4rem; }

.voiceStyle dt {
	float: left;
	width: 140px;
	padding: 1rem 2rem;
	font-weight: bold;
}
@media screen and (max-width: 667px) {
	.voiceStyle dt {
		float: none;
		width: 100%;
	}
}

.voiceStyle dd {
	padding: 1rem 2rem 1rem 11rem;
	border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 667px) {
	.voiceStyle dd { padding: 0 2rem 1rem; }
}


/* --- Page - Works ----- */
.workSample {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: center;
}

.workSample li { margin-bottom: 3rem; }

.workSample li img {
	display: block;
	margin-bottom: 0.5rem;
}

.workSample li a { color: #444; }



/* Page Index */
#ez-toc-container { margin-bottom: 4em!important; }

div#ez-toc-container ul li {
	padding-left: 30px;
	list-style: none;
}
@media screen and (max-width: 667px) {
	#ez-toc-container li, #ez-toc-container ul, #ez-toc-container ul li, div.ez-toc-widget-container, div.ez-toc-widget-container li {
		text-indent: 0;
	}
	div#ez-toc-container ul li { padding-left: 0; }
}

div#ez-toc-container ul li:before {
	content: "";
	padding-right: 0;
}

div#ez-toc-container ul.ez-toc-list a { font-size: 16px; }
@media screen and (max-width: 667px) {
	div#ez-toc-container ul.ez-toc-list a { font-size: 14px; }
}

.ez-toc-counter nav ul li a::before { margin-right: 1em!important; }

.ez-toc-counter nav ul li li { line-height: 1.3!important; }

.ez-toc-counter nav ul li li a { text-indent: 0; }

.ez-toc-counter nav ul li li a::before {
	content: "●"!important;
	margin-right: 5px!important;
	padding-left: 20px!important;
	font-size: 12px;
	position: relative;
	top: 3px;
}

#ez-toc-container ul ul, .ez-toc div.ez-toc-widget-container ul ul { margin: 0 0 10px 0!important; }
@media screen and (max-width: 667px) {
	#ez-toc-container ul ul, .ez-toc div.ez-toc-widget-container ul ul { margin: 0 0 10px 15px!important; }
}




/* ====================

	8. Archive

==================== */
/* --- 8-1. Common --- */
.archiveStyle { background: url("images/archive_h1_bg.png") repeat; }

.archiveStyle header { background: url("images/header_bg_repeat_pc.png") left top repeat-x; }

.archiveStyle header > .innerBox { margin-bottom: 1rem; }

.archiveStyle main article {
	display: flex;
	justify-content: space-between;
}

.postStyle .post { width: 600px; }
@media screen and (max-width: 667px) {
	.postStyle .post { width: 100%; }
}

.archiveStyle .bgWht { padding: 8rem 0; }
@media screen and (max-width: 667px) {
	.archiveStyle .bgWht { padding: 4rem 0 6rem; }
}

.archiveStyle main h1 {
	margin: 0 0 7.6rem;
	padding: 2.9rem 0 0;
	font-size: 2.8rem;
	font-weight: normal;
	text-align: center;
	background-position: center top;
	background-repeat: no-repeat;
}
@media screen and (max-width: 667px) {
	.archiveStyle main h1 {
		margin: 0 0 2.6rem;
		padding: 10rem 0 0;
		background-position: center 7.5rem;
	}
}

.archiveStyle main h1 span { display: block; }

.worksCat h1 { background-image: url("images/ic_works.png"); }
.voicesCat h1 { background-image: url("images/ic_voice.png"); }

.catVoice main li, .column2 > div li { margin: 0 0 4rem; }

.catVoice main li a, .column2 > div li a {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	padding: 6rem 6rem 5.4rem;
}
@media screen and (max-width: 667px) {
	.catVoice main li a, .column2 > div li a {
		flex-direction: column;
		padding: 3rem 3rem 3.4rem;
	}
}

.catVoice main li h2, .column2 li h2 {
	margin: 0 0 2.6rem;
	color: #444;
	font-size: 2.4rem;
	font-weight: normal;
}
@media screen and (max-width: 667px) {
	.catVoice main li h2, .column2 li h2 { margin: 0 0 1.6rem; }
}

.catVoice main li p, .column2 li p { margin: 0 0 2.6rem; }
@media screen and (max-width: 667px) {
	.catVoice main li p, .column2 li p { margin: 0 0 1.6rem; }
}

.archiveStyle main li time {
	color: #999;
	font-size: 1.4rem;
}
@media screen and (max-width: 667px) {
	.archiveStyle main li time {
		display: block;
		margin: 0 0 1.4rem;
	}
}

.catVoice main li figure, .column2 li figure { margin: 0 4rem 0 0; }
@media screen and (max-width: 667px) {
	.catVoice main li figure, .column2 li figure { margin: 0 auto; }
}


/* 2column */
.column2 {
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 667px) {
	.column2 { flex-direction: column; }
	
	.column2 > div { margin-bottom: 4rem; }
}

/* pager */
.tablenav {
	display: flex;
}

.page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 1rem 0 0;
	width: 30px;
	height: 30px;
	color: #444;
	font-size: 1.2rem;
	border: 1px solid #444;
	border-radius: 3px;
}

.current, .page-numbers:hover {
	color: #fff;
	background-color: #444;
}

.tablenav .next, .tablenav .prev {
	width: auto;
	padding: 0 1rem;
}


/* --- 8-2. FAQ --- */
.archiveStyle .faqCat li { padding: 6rem 6rem 5.4rem; }
@media screen and (max-width: 667px) {
	.archiveStyle .faqCat li { padding: 3rem 3rem 3.4rem; }
}



/* ====================

    9. Sidebar

==================== */

/* --- 9-1. Common --- */
aside {
	width: 300px;
	margin: 0 0 6rem 4rem;
}
@media screen and (max-width: 667px) {
	aside {
        width: 100%;
        margin: 0 auto;
    }
}

aside .widget { margin-bottom: 40px; }

aside a { color: #444; }

aside time {
    color: #999;
    font-size: 1.1rem!important;
}
@media screen and (max-width: 667px) {
    aside time { display: block; }
}

aside li { border-bottom: 1px solid #e9e9e9; }

aside h2 {
    color: #266f80;
    font-size: 1.6rem;
    font-weight: normal;
    padding: 2px 15px 10px 20px;
    background-image: url("images/ic_side_cate.png");
    background-repeat: no-repeat;
    background-position: 0 5px;
    border-bottom: 1px solid #e9e9e9;
}

.sideNewposts h2 { background-image: url("images/ic_side_newpost.png"); }
.popular-posts h2 { background-image: url("images/ic_side_ranking.png"); }
.sideVoice h2 { background-image: url("images/ic_side_voices.png"); }
.wp-block-group__inner-container h2 { background-image: url("images/ic_side_tag.png"); }
.widget_archive h2 { background-image: url("images/ic_side_calendar.png"); }


/* Side Profile */
.sideProf p, .sideProf li { font-size: 1.4rem; }

.sideProf ul { margin: 2rem auto; }

.sideProf figure { text-align: center; }


p.moreSide {
    margin: 1rem 0 4rem;
    text-align: right;
}

p.moreSide a {
    display: inline-block;
    font-size: 1.2rem;
    padding: 10px 25px 10px 15px;
    border: 1px solid #ddd;
    background: url("images/arrow_breadcrumb.png") 4.5em center no-repeat;
}

aside li a { padding: 1.5rem; }
@media screen and (max-width: 667px) {
	aside li a {
		flex-direction: row-reverse;
	}
}

aside li a:hover, .moreSide a:hover { background-color: #f9f9f9; }


/* --- 9-2. Ranking & New Post & Voice --- */
.popular-post { counter-reset: wpp-ranking; }

.popular-posts ul { position: relative; }

.popular-posts ul li {
	counter-increment: rankingBox;
    display: flex;
    flex-direction: row-reverse;
    padding: 14px 15px;
}
@media screen and (max-width: 667px) {
    .popular-posts ul li { justify-content: space-between; }
}

.sideNewposts li { margin: 0; }

.popular-posts ul li:before {
	position: absolute;
	left: 15px;
 	color:#fff;
	content: counter(rankingBox, decimal);
	text-align:center;
	opacity:0.999;
	font-size:11px;
	float:left;
	line-height:18px;
	width: 18px;
	height: 18px;
	background-color:#777;
}

.popular-posts ul li:nth-child(1):before { background-color:#daa520; }
.popular-posts ul li:nth-child(2):before { background-color:#ddd; }
.popular-posts ul li:nth-child(3):before { background-color:#a0522d; }


.sideVoice { margin-bottom: 4rem; }

.sideNewposts a, .sideVoice a {
    display: flex;
    flex-direction: row-reverse;
	justify-content: flex-end;
    padding: 14px 15px;
}

.popular-posts .liboxRight, .sideNewposts .liboxRight {
    width: 180px;
}
@media screen and (max-width: 667px) {
    .popular-posts .liboxRight, .sideNewposts .liboxRight {
        width: 200px;
    }
}

.popular-posts li p,
.sideNewposts .liboxRight p,
.sideVoice p {
	margin-bottom: 0!important;
    font-size: 1.2rem;
}
@media screen and (max-width: 667px) {
    .popular-posts li p { font-size: 1.4rem; }
    .popular-posts li p,
    .sideNewposts .liboxRight p,
    .sideVoice p {
        margin-bottom: 1rem;
    }
}

.popular-posts li .views {
	font-size: 1.1rem;
	color: #999;
}

.single aside time {
    color: #999;
    font-size: 1.1rem;
}

.popular-posts li picture,
.sideNewposts li picture,
.sideVoice picture {
    margin: 0 20px 0 0;
    line-height: 0;
}

.wpp-thumbnail {
    margin: 0!important;
}
@media screen and (max-width: 667px) {
    .wpp-thumbnail, .sideVoice li img, .sideNewposts li img {
        width: 10rem;
    }
}


/* --- 9-4. Category --- */
aside .categories li {
	margin: 0;
    font-size: 1.2rem;
    border-bottom: 1px solid #e9e9e9;
}

aside .categories li a {
    display: block;
	flex-direction: column;
    padding: 1rem 1rem 1rem 2.6rem;
    background: url("images/arrow_s_blue.png") 15px 15px no-repeat;
}

aside .categories li a:hover { background-color: #f9f9f9; }

aside .categories li li {
    margin: 0 0 0 20px;
    border-bottom: 1px dashed #e9e9e9;
}

aside .categories li li:first-child { border-top: 1px dashed #e9e9e9; }

aside .categories li li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}


/* --- 9-5. Tag Cloud --- */




/* --- 9-6. Month Archive --- */

.widget_archive h2 { margin-bottom: 10px; }

.selectWrap {
    width: 100%;
    position: relative;
    display: inline-block;
    padding: 0;
	border: 1px solid #ddd;
}

.selectWrap::after {
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-bottom: solid 2px #b4b3b3;
    border-right: solid 2px #b4b3b3;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -4px;
}

.selectWrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 40px;
    font-size: 1.2rem;
    background: transparent;
    position: relative;
    z-index: 1;
    padding: 0 40px 0 10px;
    border-radius: 2px;
}

select::-ms-expand {
    display: none;
}


/* --- 9-7. Sidebar SNS --- */
.rightSns li { margin: 0 0 10px; }

aside .rightSns li { border-bottom: none; }

.rightSns li a {
    display: block;
    padding: 10px 50px;
    font-size: 1.2rem;
    letter-spacing: 1px;
    background-position: 20px 8px;
    background-repeat: no-repeat;
}

.rightSns li a:hover { color: #fff; }

.rightSns .fb a {
    color: #3b5998;
    background-image: url("images/bt_side_fb_off.png");
    border: 1px solid #3b5998;
}

.rightSns .fb a:hover {
    background-image: url("images/bt_side_fb_on.png");
    background-color: #3b5998;
}

.rightSns .tw a {
    color: #000;
    background-image: url("images/bt_side_x_off.png");
    border: 1px solid #000;
}

.rightSns .tw a:hover {
    background-image: url("images/bt_side_x_on.png");
    background-color: #000;
}

.rightSns .rss a {
    color: #ff9900;
    background-image: url("images/bt_side_rss_off.png");
    border: 1px solid #ff9900;
}

.rightSns .rss a:hover {
    background-image: url("images/bt_side_rss_on.png");
    background-color: #ff9900;
}


/* --- 9-8. Search --- */
#searchSide form {
	display: flex;
	margin: 0 0 4rem;
}

#sSide {
	width: 250px;
	height: 36px;
	padding: 0.4rem 1rem;
	font-size: 1.6rem;
	background-color: #f3f3f3;
}
@media screen and (max-width: 667px) {
	#sSide {
		width: 86%;
	}
}