@charset "utf-8";

/*
Theme Name: Chepirare
Theme URI: https://chepirare.com/
Description: It is an Chepirare design theme.
*/

/* ------ GoogleFont ------ */

/* abril-fatface-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Abril Fatface';
	font-style: normal;
	font-weight: 400;
	src: local('Abril Fatface'), local('AbrilFatface-Regular'), url('font/Abril_Fatface/abril-fatface-v11-latin-regular.woff2') format('woff2')
}


/* ------ FontAwesome ------ */

@font-face {
	font-display: swap;
	font-family: 'FontAwesome';
	src: url('font/FontAwesome/fontawesome-webfont.eot?v=4.0.3');
	src: url('font/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('font/FontAwesome/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('font/FontAwesome/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('font/FontAwesome/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal
}


/* ------ common ------ */

* {
	margin: 0;
	padding: 0;
	word-break: break-all;
	line-break: strict;
	outline: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

html {
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
	font-size: 62.5%;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	font-feature-settings: "palt";
	-webkit-overflow-scrolling: touch
}
 
body {                                                                                                                    
	height: 100%; 
	color: #445557;
	font-size: 1.5rem;
	font-style: normal;
    padding: 0 !important;
	background: #fff;
	overflow-x: hidden;
	/*overflow-y: scroll;*/
    -webkit-text-size-adjust: 100%
}

img { max-width: 100% }
ol,
ul,
li {
  list-style: none
}

table {
	border-spacing: 0;
	border-collapse: collapse
}

form label { cursor: pointer }
input[type=text],
input[type=email],
input[type=submit],
select,
textarea,
button {
	border-radius: 0;
	-webkit-appearance: none
}

input:focus,
select:focus,
textarea:focus,
button:focus {
      outline: none
}

a {
	color: #445557;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
    tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

a:hover {
	color: #21c69c;
	outline: none
}

a:focus { outline: none }
a,
input[type=text],
input[type=email],
input[type=submit],
select,
button {
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

a img { border: none }
.cf::after {
	content: '';
	display: block;
	clear: both
}

::-webkit-input-placeholder { color: #999 }
::-moz-placeholder {
	color: #999;
	opacity: 1
}

:-ms-input-placeholder { color: #999 }
.bold { font-weight: 600 }
.pink { color: #f2577e }
.green { color: #21c69c }
.yellow { background: #fef5a5 }
.tegPurple { color: #a980f5 }
.tegBlue { color: #41b7d7 }
.tegRed { color: #ff8095 }
.tegYellow { color: #ebd247 }
.tegGreen { color: #8bdf4c }
.underLine {
	font-weight: 600;
    background: linear-gradient(transparent 90%, #21c69c 0%)
}


/* ------ animation ------ */

@keyframes arrow-move {
	0% { transform:translateY(-2px) }
	50% { transform:translateY(2px) }
	100% { transform:translateY(-2px) }
}


/* ------ header ------ */

#header {
    width: 100%;
    height: 80px;
	background: #fff;
    position: fixed;
    top: 0;
	transition: all 0.3s;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    z-index: 100
}

body.change #header { height: 60px }
#header .inner {
	width: 100%;
	font-size: 0;
	margin: 0 auto;
    position: relative
}

#header .logo {
	vertical-align: middle;
    padding: 0 30px 0 10px;
    position: relative;
    display: inline-block;
    z-index: 100
}

#header .logo a { display: block }
#header .logo h1,
#header .logo p {
    color: #21c69c;
    font-size: 2.8rem;
	font-weight: normal;
    font-family: 'Abril Fatface', cursive;
    line-height: 80px;
    letter-spacing: 0.04em;
	transition: all 0.3s;
    display: inline-block
}

body.change #header .logo h1,
body.change #header .logo p {
    line-height: 60px
}

#header .contactBtn {
    height: 80px;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
	transition: all 0.3s;
	z-index: 11
}

body.change #header .contactBtn { height: 60px }
#header .contactBtn ul {
    height: 80px;
	font-size: 0;
	transition: all 0.3s
}

body.change #header .contactBtn ul { height: 60px }
#header .contactBtn li {
    height: 80px;
	font-size: 1.5rem;
	font-weight: 600;
    line-height: 80px;
	letter-spacing: 0.09em;
	vertical-align: middle;
	text-align: center;
	position: relative;
	display: inline-block
}

body.change #header .contactBtn li {
	height: 60px;
    line-height: 60px
}

#header .contactBtn li::after {
	content: "";
	width: 100%;
	height: 0;
	background: #21c69c;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: 0.3s;
	display: block
}

#header .contactBtn li a {
	position: relative;
    padding: 0 10px;
    display: block;
    z-index: 1
}

#header .contactBtn li a:hover { color: #fff }
#header .contactBtn li:hover::after { height: 80px }
body.change #header .contactBtn li:hover::after { height: 60px }

@media screen and (min-width: 801px) {
	#header .menuBtn { display: none }
}

@media screen and (max-width: 800px) {
	#header { height: 60px }
	#header .inner { padding: 0 0 0 4% }
	#header .logo {
		width: 160px;
		padding: 0
	}
	
	#header .logo h1,
	#header .logo p {
		line-height: 60px
	}
	
	#header .contactBtn { display: none }
	
	/* menu trigger */
	
	.menuBtn {
		width: 60px;
		height: 60px;
		vertical-align: middle;
		text-align: center;
		margin-left: calc(100% - 220px);
		position: relative;
		display: inline-block;
		z-index: 100
	}
	
	.menuTrigger,
	.menuTrigger span {
		transition: all .4s;
		display: inline-block
	}
	
	.menuTrigger .menuIcon {
		width: 25px;
		height: 20px;
		position: relative;
		top: 20px;
		display: inline-block
	}
	
	.menuTrigger span {
		width: 100%;
		height: 2px;
		background: #445557;
		position: absolute;
		left: 0
	}
	
	.menuTrigger span:nth-of-type(1) { top: 0 }
	.menuTrigger span:nth-of-type(2) { top: 9px }
	.menuTrigger span:nth-of-type(3) { bottom: 0 }
	.menuTrigger span:nth-of-type(1) { animation: menu-bar01 .75s forwards }
	.menuTrigger.active span:nth-of-type(1) { transform: translateY(9px) rotate(-45deg) }
	.menuTrigger.active span:nth-of-type(2) {
		left: 50%;
		animation: active-menu-bar02 .8s forwards;
		opacity: 0
	}
	
	@-webkit-keyframes active-menu-bar02 {
		100% { height: 0 }
	}
	
	@keyframes active-menu-bar02 {
		100% { height: 0 }
	}
	
	.menuTrigger.active span:nth-of-type(3) { transform: translateY(-9px) rotate(45deg) }
}


/* ------ nav ------ */

#header nav {
	text-align: center;
    vertical-align: top;
    display: inline-block;
	float: right
}

#header nav ul {
    height: 80px;
	font-size: 0;
	transition: 0.3s
}

body.change #header nav ul { height: 60px }
#header nav li {
    height: 80px;
	font-size: 1.5rem;
    font-weight: 600;
    line-height: 80px;
	letter-spacing: 0.09em;
	vertical-align: middle;
	text-align: center;
	position: relative;
	display: inline-block
}

body.change #header nav li {
    height: 60px;
    line-height: 60px
}

#header nav li::after {
	content: '';
    width: 90%;
    height: 3px;
    margin: auto;
	background: #21c69c;
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform .3s
}

#header nav li a {
	position: relative;
    padding: 0 10px;
    display: block;
    z-index: 1
}

#header nav li:hover::after { transform: scale(1, 1) }

@media screen and (max-width: 800px) {
	#header nav { display: none }
}


/* sp nav */

@media screen and (min-width: 801px) {
	.spNav { display: none }
}

@media screen and (max-width: 800px) {
	.spNav {
		width: 100%;
		height: 100%;
		padding-top: 60px;
		margin: 0 auto;
		position: fixed;
		top: 0;
		transition: all 0.3s ease-in-out;
		pointer-events: none;
		overflow-y: scroll;
		opacity: 0
	}
	
	.spNav.open {
		min-height: 100vh;
		background: #fff;
		pointer-events: auto;
		opacity: 1;
		z-index: 99
	}
	
	.spNav li {
		font-size: 1.5rem;
		position: relative;
		overflow: hidden
	}
	
	.spNav > nav > ul { padding-bottom: 50px }
	.spNav > nav > ul > li { border-bottom: 1px solid #c1c1c1 }
	.spNav li a {
		line-height: 60px;
		padding: 0 4%;
		position: relative;
		display: block;
		overflow: hidden;
		z-index: 2
	}
	
	.spNav > nav > ul > li:not(.hasCh) > a::after {
		content: "";
		width: 6px;
		height: 6px;
		margin: auto;
		border-right: 2px solid #445557;
		border-bottom: 2px solid #445557;
		position: absolute;
		top: 0;
		right: 28px;
		bottom: 0;
		transform: rotate(-45deg)
	}
	
	.spNav li .underMenu {
		font-size: 0;
		display: none
	}
	
	.spNav li .underMenu li {
		width: 50%;
		vertical-align: top;
		text-align: center;
		border-top: 1px solid #c1c1c1;
        background: #efefef;
		display: inline-block
	}
	
	.spNav li .underMenu li.full { width: 100% }
	.spNav li .underMenu li:nth-child(2n) { border-left: 1px solid #c1c1c1 }
	.spNav li .underMenu.open li { overflow: visible }
	.spNav .menuArrow {
		width: 60px;
		height: 60px;
		position: absolute;
		top: 0;
		right: 0
	}
	
	.spNav .menuArrow::before {
		content: '';
		width: 6px;
		height: 6px;
		margin: auto;
		border: 0;
		border-top: 2px solid #445557;
		border-right: 2px solid #445557;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition: all 0.3s ease-in-out;
		transform: rotate(135deg)
	}

	.spNav .active ~ .menuArrow::before { transform: rotate(315deg) }
}


/* ------ main ------ */

main { padding-top: 80px }
main .mainInner {
	font-size: 0;
	max-width: 1180px;
	padding: 0 10px;
	margin: 0 auto
}

@media screen and (max-width: 800px) {
	main { padding-top: 60px }
	main .mainInner {
		max-width: 100%;
		padding: 0
	}
	
	main .breadcrumbWrap + .mainInner { padding: 0 4% }
}


/* ------ main visual ------ */

.mainVisualWrap { position: relative }
.mainVisualWrap .mainVisual {
	width: 100%;
	min-width: 800px;
	height: 640px;
	margin-bottom: 60px;
	background: url('img/home/main_image.jpg') center center no-repeat fixed
}

.mainVisualWrap .inner {
	width: 800px;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	left: 0
}

.mainVisualWrap .mainVisualTxt {
	width: 800px;
    text-align: center;
    padding: 60px;
    margin: 130px auto 0;
    background: rgba(255,255,255,.8);
    border-radius: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}

.mainVisualWrap strong {
	color: #21c69c;
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: .09em
}

.mainVisualWrap p {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
	margin-top: 20px
}

.mainVisualWrap .btnWrap {
    text-align: center;
    margin-top: 30px
}

.mainVisualWrap .btnWrap a {
    width: 100%;
    max-width: 320px;
    color: #fff;
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
    padding: 16px;
    margin: 0 auto;
    background: #21c69c;
	position:relative;
	transition: 800ms ease all;
    display: block
}

.mainVisualWrap .btnWrap a:hover {
	color: #21c69c;
	background: #fff
}

.mainVisualWrap .btnWrap a::before,
.mainVisualWrap .btnWrap a::after {
	content: '';
	width: 0;
	height: 2px;
	background: #21c69c;
	position: absolute;
	top: 0;
	right: 0;
	transition: 400ms ease all
}

.mainVisualWrap .btnWrap a::after {
	top: inherit;
	right: inherit;
	bottom: 0;
	left: 0
}

.mainVisualWrap .btnWrap a:hover::before,
.mainVisualWrap .btnWrap a:hover::after {
	width: 100%;
	transition: 800ms ease all
}

@media screen and (max-width: 820px) {
	.mainVisualWrap .mainVisual {
		min-width: auto;
		height: 420px;
		background: url('img/home/main_image_sp.jpg') left 70% / cover no-repeat
	}

	.mainVisualWrap .inner {
		width: 100%;
		position: absolute;
		top: auto;
		bottom: 20px
	}

	.mainVisualWrap .mainVisualTxt {
		width: 92%;
		padding: 40px;
		margin: 0 auto;
    	background: rgba(255,255,255,.9)
	}
	
	.mainVisualWrap .mainVisualTxtInner { padding: 20px }
	.mainVisualWrap strong { font-size: 2rem }
	.mainVisualWrap strong br { display: none }
	.mainVisualWrap p { margin-top: 10px }
	.mainVisualWrap p br { display: none }
}


/* ------ home articles ------ */

#homeArticles {
    text-align: center;
    padding: 0 0 60px
}

#homeArticles h2 {
    font-size: 2.4rem;
    font-weight: 600;
	letter-spacing: 0.09em;
	position: relative
}

#homeArticles h2:after {
    content: "";
    width: 50px;
    height: 5px;
    margin: auto;
    border-bottom: 3px solid #21c69c;
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0
}

#homeArticles .postWrap {
	font-size: 0;
	text-align: left;
	margin-top: 70px
}

#homeArticles article {
	width: 100%;
	max-width: calc(100% / 3);
	vertical-align: top;
	padding: 0 15px 30px;
	display: inline-block
}

#homeArticles .infeedSp { display: none }
#homeArticles article a { display: block }
#homeArticles article figure { overflow: hidden }
#homeArticles article figure img {
    width: 100%;
	transform: scale(1);
	transition: .3s ease-in-out
}

#homeArticles article a:hover figure img { transform: scale(1.1) }
#homeArticles article h3 {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    text-align: left;
    margin-top: 10px
}

#homeArticles article .cattegory p {
    font-size: 1.3rem;
    text-align: left;
    margin-top: 6px;
}

#homeArticles .btnWrap { margin-top: 30px }
#homeArticles .btnWrap a {
    width: 100%;
    max-width: 320px;
    color: #fff;
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
    padding: 16px;
    margin: 0 auto;
    background: #21c69c;
	position:relative;
	transition: 800ms ease all;
    display: block
}

#homeArticles .btnWrap a:hover {
	color: #21c69c;
	background: #fff;
}

#homeArticles .btnWrap a::before,
#homeArticles .btnWrap a::after {
	content: '';
	width: 0;
	height: 2px;
	background: #21c69c;
	position: absolute;
	top: 0;
	right: 0;
	transition: 400ms ease all
}

#homeArticles .btnWrap a::after {
	top: inherit;
	right: inherit;
	bottom: 0;
	left: 0
}

#homeArticles .btnWrap a:hover::before,
#homeArticles .btnWrap a:hover::after {
	width: 100%;
	transition: 800ms ease all
}

@media screen and (max-width: 768px) {
	#homeArticles { padding: 0 4% 60px }
	#homeArticles article {
		max-width: 100%;
		padding: 0;
		display: block
	}
	
    
    #homeArticles .infeedSp { display: block }
	#homeArticles article + article { margin-top: 30px }
	#homeArticles article a { font-size: 0 }
	#homeArticles article figure {
		width: 100px;
		vertical-align: top;
		margin-right: 10px;
		display: inline-block
	}
	
	
	#homeArticles article .txt {
		width: calc(100% - 110px);
		vertical-align: top;
		display: inline-block
	}

	#homeArticles article h3 {
		font-size: 1.5rem;
		margin-top: 0
	}
	
	#homeArticles article .cattegory p { margin-top: 0 }
}


/* ------ ad wide ------ */

.adTopWide,
.adBottomWide {
    width: 1160px;
    margin-bottom: 60px
}

.adTopWide ins,
.adTopWide iframe,
.adBottomWide ins,
.adBottomWide iframe {
    width: 100% !important
}

@media screen and (max-width: 768px) {
	.adTopWide,
	.adBottomWide {
		width: 100%;
		padding: 0 4%;
		margin-bottom: 60px
	}
}


/* ------ bottom contact ------ */

.bottomContactWrap { background: url('img/common/bottom_contact_bg.jpg') center center / cover no-repeat }
.bottomContactWrap .bottomContact {
    padding: 60px 0;
    background: rgba(0,0,0,0.4);
	position: relative
}

.bottomContactWrap .inner {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto
}

.bottomContactWrap .inner p {
    color: #fff;
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    text-align: center;
    text-shadow: 0 0 10px rgba(0,0,0,0.4)
}

.bottomContactWrap .inner p strong {
    font-size: 2.4rem;
    font-weight: 600;
	margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
	display: block
}

.bottomContactWrap .contactBtn {
	text-align: center;
    margin-top: 30px
}

.bottomContactWrap .contactBtn a {
    width: 100%;
    max-width: 320px;
    color: #fff;
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
    padding: 16px;
    margin: 0 auto;
    background: #21c69c;
	position:relative;
	transition: 800ms ease all;
    display: block
}

.bottomContactWrap .contactBtn a:hover {
	color: #21c69c;
	background: #fff;
}

.bottomContactWrap .contactBtn a::before,
.bottomContactWrap .contactBtn a::after {
	content: '';
	width: 0;
	height: 2px;
	background: #21c69c;
	position: absolute;
	top: 0;
	right: 0;
	transition: 400ms ease all
}

.bottomContactWrap .contactBtn a::after {
	top: inherit;
	right: inherit;
	bottom: 0;
	left: 0
}

.bottomContactWrap .contactBtn a:hover::before,
.bottomContactWrap .contactBtn a:hover::after {
	width: 100%;
	transition: 800ms ease all
}

@media only screen and (max-width: 768px) {
	.bottomContactWrap .inner {
		max-width: 100%;
		text-align: center;
		padding: 0 4%
	}

	.bottomContactWrap .inner p br { display: none }
	.bottomContactWrap .inner p strong {
		font-size: 2rem;
		margin-bottom: 10px
	}
}


/* ------ footer ------ */

footer {
    width: 100%;
    background: #586d70
}

footer .inner {
	width: 1180px;
	padding-top: 40px;
	margin: 0 auto
}

footer nav {
	font-size: 0;
	padding: 0 10px
}

footer nav .ftNavPc { font-size: 0 }
footer nav .ftNavPc .ftNavLeft {
    width: 280px;
    vertical-align: top;
    margin-right: 40px;
    display:  inline-block
    
}

footer nav .ftNavPc .ftNavLeft li {
	width: 270px;
	font-size: 1.5rem;
    letter-spacing: 0.09em;
	line-height: 60px;
	border-bottom: 1px solid #fff;
	position: relative
}

footer nav .ftNavPc .ftNavLeft li:nth-child(1) { border-top: 1px solid #fff }
footer nav .ftNavPc .ftNavLeft a {
    color: #fff;
    padding: 0 10px;
    position: relative;
    display: block
}

footer nav .ftNavPc .ftNavLeft a::after {
    content: "";
    width: 6px;
    height: 6px;
    margin: auto;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    position: absolute;
    top: 0;
    right: 16px;
    bottom: 0;
    transform: rotate(-45deg)
}

footer nav .ftNavPc .ftNavRight {
    width: 840px;
    vertical-align: top;
    display:  inline-block
    
}

footer nav .ftNavPc .ftNavRight .ftNavBox + .ftNavBox { margin-top: 20px }
footer nav .ftNavPc .ftNavRight p {
    color: #fff;
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #fff
}

footer nav .ftNavPc .ftNavRight ul { font-size: 0 }
footer nav .ftNavPc .ftNavRight li {
	width: calc(760px / 3);
    font-size: 1.5rem;
    letter-spacing: 0.09em;
    line-height: 40px;
    vertical-align: top;
    padding-left: 20px;
    margin-right: 40px;
    position: relative;
    display: inline-block
}

footer nav .ftNavPc .ftNavRight li:nth-child(3n) { margin-right: 0 }
footer nav .ftNavPc .ftNavRight a {
	color: #fff;
	position: relative
}

footer nav .ftNavPc .ftNavRight a::after {
	content: '';
    width: 100%;
    height: 2px;
    margin: auto;
    background: #fff;
    position: absolute;
    right: 0;
    bottom: -4px;
    left: 0;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform .3s
}

footer nav .ftNavPc .ftNavRight a:hover::after { transform: scale(1, 1) }
footer nav .ftNavSp { display: none }
footer .copyright {
	text-align: center;
	margin-top: 40px
}

footer .copyright small {
    color: #fff;
	font-size: 1.3rem;
	line-height: 60px;
	letter-spacing: 0.09em
}

@media screen and (max-width: 900px) {
	footer .inner { width: 100% }
	footer nav .ftNavPc { display: none }
	footer nav .ftNavSp { display: block }
	footer nav .ftNavSp li {
		font-size: 1.5rem;
		line-height: 60px;
		border-bottom: 1px solid #fff
	}
	
	footer nav .ftNavSp li:nth-child(1) { border-top: 1px solid #fff }
	footer nav .ftNavSp a {
		color: #fff;
		padding-left: 10px;
		position: relative;
		display: block
	}
	
	footer nav .ftNavSp a::after {
		content: "";
		width: 6px;
		height: 6px;
		margin: auto;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		position: absolute;
		top: 0;
		right: 16px;
		bottom: 0;
		transform: rotate(-45deg)
	}
}


/* ------ breadcrumb ------ */

.breadcrumbWrap ol {
	width: 100%;
	max-width: 1180px;
	padding: 15px 10px;
	margin: 0 auto
}

.breadcrumbWrap li {
    font-size: 1.5rem;
    letter-spacing: 0.09em;
    display: inline-block
}

.breadcrumbWrap li:after {
    font-family: FontAwesome;
    content: "\f105";
    font-size: 1.6rem;
	margin: 0 8px
}

.breadcrumbWrap li:last-child:after { content: "" }
.breadcrumbWrap li a {
	color: #21c69c;
	font-weight: 600;
	position: relative
}

.breadcrumbWrap li a::after {
	content: '';
    width: 100%;
    height: 2px;
    margin: auto;
    background: #21c69c;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform .3s
}

.breadcrumbWrap li a:hover::after { transform: scale(1, 1) }


@media screen and (max-width: 768px) {
	.breadcrumbWrap { padding: 0 4% }
	.breadcrumbWrap ol { padding: 15px 0 }
	.breadcrumbWrap li:after { margin: 0 4px }
}


/* ------ under layer ------ */

/* main contents */

.mainInner .mainContents {
	width: 72%;
	max-width: 820px;
	vertical-align: top;
	padding: 40px;
	margin-right: 2%;
	margin-bottom: 60px;
	display: inline-block
}

@media screen and (max-width: 900px) {
	.mainInner .mainContents {
		width: 100%;
		padding: 20px 0 0;
		margin-right: 0;
		display: block
	}
}


/* ------ popular / recommend ------ */

.popular { margin-top: 60px }
.recommend { margin-top: 30px }
.popular h2,
.recommend h2 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    padding: 11px;
    border-bottom: 2px solid #21c69c
}

.popular .postWrap,
.recommend .postWrap {
	font-size: 0;
	margin-top: 40px
}

.popular article,
.recommend article {
	width: 100%;
	max-width: calc(100% / 3);
	vertical-align: top;
	padding: 0 10px 30px;
	display: inline-block
}

.popular .infeedSp,
.recommend .infeedSp {
    display: none
}

.popular article a,
.recommend article a {
	display: block
}

.popular article figure,
.recommend article figure {
	overflow: hidden
}

.popular article figure img,
.recommend article figure img {
    width: 100%;
	transform: scale(1);
	transition: .3s ease-in-out
}

.popular article a:hover figure img,
.recommend article a:hover figure img {
	transform: scale(1.1)
}

.popular article h3,
.recommend article h3 {
    font-size: 1.5rem;
    letter-spacing: 0.09em;
    text-align: left;
    margin-top: 10px
}

.popular article .cattegory p,
.recommend article .cattegory p {
    font-size: 1.3rem;
    text-align: left;
    margin-top: 6px;
}

.popular .btnWrap,
.recommend .btnWrap {
	margin-top: 30px
}

.popular .btnWrap a,
.recommend .btnWrap a {
    width: 100%;
    max-width: 320px;
    color: #fff;
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
    padding: 16px;
    margin: 0 auto;
    background: #21c69c;
	position:relative;
	transition: 800ms ease all;
    display: block
}

.popular .btnWrap a:hover,
.recommend .btnWrap a:hover {
	color: #21c69c;
	background: #fff;
}

.popular .btnWrap a::before,
.popular .btnWrap a::after,
.recommend .btnWrap a::before,
.recommend .btnWrap a::after {
	content: '';
	width: 0;
	height: 2px;
	background: #21c69c;
	position: absolute;
	top: 0;
	right: 0;
	transition: 400ms ease all
}

.popular .btnWrap a::after,
.recommend .btnWrap a::after {
	top: inherit;
	right: inherit;
	bottom: 0;
	left: 0
}

.popular .btnWrap a:hover::before,
.popular .btnWrap a:hover::after,
.recommend .btnWrap a:hover::before,
.recommend .btnWrap a:hover::after {
	width: 100%;
	transition: 800ms ease all
}

@media screen and (max-width: 768px) {
    .popular .infeedSp,
    .recommend .infeedSp {
        display: block
    }
    
	.popular article,
	.recommend article {
		max-width: 100%;
		padding: 0;
		display: block
	}
	
	.popular article + article,
	.recommend article + article {
		margin-top: 30px
	}
	
	.popular article a,
	.recommend article a {
		font-size: 0
	}
	
	.popular article figure,
	.recommend article figure {
		width: 100px;
		vertical-align: top;
		margin-right: 10px;
		display: inline-block
	}
	
	.popular article .txt,
	.recommend article .txt {
		width: calc(100% - 110px);
		vertical-align: top;
		display: inline-block
	}

	.popular article h3,
	.recommend article h3 {
		margin-top: 0
	}
	
	.popular article .cattegory p,
	.recommend article .cattegory p {
		margin-top: 0
	}
}


/* aside */

.mainInner aside {
	width: 26%;
	max-width: 300px;
	vertical-align: top;
	padding-top: 40px;
	padding-bottom: 60px;
	display: inline-block
}

.mainInner aside #sideBox {
	width: 100%;
	max-width: 300px	
}


/* side banner */
.mainInner aside .sideBanner figure { overflow: hidden }
.mainInner aside .sideBanner figure img {
    width: 100%;
	transform: scale(1);
	transition: .3s ease-in-out;
	display: block
}

.mainInner aside .sideBanner a:hover figure img { transform: scale(1.1) }


/* serach box */

.mainInner aside .searchBox { margin-top: 40px }
.mainInner aside .searchBox .formBox { font-size: 0 }
.mainInner aside .searchBox input[type="text"] {
	width: calc(100% - 80px);
	height: 36px;
	font-size: 1.4rem;
    letter-spacing: 0.09em;
	line-height: 36px;
	vertical-align: top;
	padding: 0 10px;
	border: 1px solid #c1c1c1;
	border-right: none;
	display: inline-block
}

.mainInner aside .searchBox input[type="text"]:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset }
.mainInner aside .searchBox input[type="submit"] {
	width: 80px;
    height: 36px;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 600;
    font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    line-height: 36px;
    vertical-align: top;
    border: none;
    background: #21c69c;
    display: inline-block
}


/* side nav */

.mainInner aside .sideNav { margin-top: 40px }
.mainInner aside .title { margin-bottom: 60px }
.mainInner aside .title p {
    font-size: 2.4rem;
    font-weight: 600;
	letter-spacing: 0.09em;
	text-align: center;
	position: relative
}

.mainInner aside  .title p:after {
    content: "";
    width: 50px;
    height: 5px;
    margin: auto;
    border-bottom: 3px solid #21c69c;
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0
}

.mainInner aside nav ul + ul { margin-top: 40px }
.mainInner aside nav li.parent {
    font-size: 1.7rem;
	font-weight: 600;
    letter-spacing: 0.09em;
    text-align: center;
    position: relative
}

.mainInner aside nav figure { overflow: hidden }
.mainInner aside nav figure img {
    width: 100%;
	transform: scale(1);
	transition: .3s ease-in-out;
	display: block
}

.mainInner aside nav a:hover figure img { transform: scale(1.1) }
.mainInner aside nav figure + p { margin-top: 10px }
.mainInner aside nav li.underLayer {
	font-size: 1.5rem;
    letter-spacing: 0.09em;
	line-height: 60px;
	border-bottom: 1px solid #c1c1c1;
	position: relative
}

.mainInner aside nav li.parent + li.underLayer {
	margin-top: 40px;
	border-top: 1px solid #c1c1c1;
}

.mainInner aside nav a {
	position: relative;
    display: block
}

.mainInner aside nav li.underLayer a { padding: 0 10px }
.mainInner aside nav li.underLayer a::after {
    content: "";
    width: 6px;
    height: 6px;
    margin: auto;
    border-right: 2px solid #445557;
    border-bottom: 2px solid #445557;
    position: absolute;
    top: 0;
    right: 16px;
    bottom: 0;
    transform: rotate(-45deg)
}

@media screen and (max-width: 900px) {
	.mainInner aside {
		width: 100%;
		max-width: inherit;
		display: block
	}

	.mainInner aside.follow { display: none }
	.mainInner aside #sideBox { max-width: inherit }
}


/* author */

.mainInner aside .author { margin-top: 40px }
.mainInner aside .author .imageWrap {
    width: 100px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden
}

.mainInner aside .author .txtWrap {
	text-align: center;
    font-size: 1.5rem;
	letter-spacing: 0.09em;
    padding: 20px;
    margin-top: 30px;
    border: 1px solid #c1c1c1;
	position: relative
}

.mainInner aside .author .txtWrap::before {
	content: "";
	margin-left: -11px;
	border: 12px solid transparent;
	border-bottom: 12px solid #fff;
	position: absolute;
	top: -24px;
	left: 50%;
	z-index: 2
}

.mainInner aside .author .txtWrap::after {
	content: "";
	margin-left: -13px;
	border: 14px solid transparent;
	border-bottom: 14px solid #c1c1c1;
	position: absolute;
	top: -28px;
	left: 50%;
	z-index: 1
}

.mainInner aside .author .txtWrap .name {
    font-weight: 600;
    margin-bottom: 10px
}


/* ad */

.mainInner aside .adWrap { margin-top: 40px }
.mainInner aside .adWrap ins,
.mainInner aside .adWrap iframe {
	width: 100% !important;
	max-width: 300px
}

@media screen and (max-width: 900px) {
	.mainInner aside .adWrap ins,
	.mainInner aside .adWrap iframe {
		max-width: inherit
	}
}


/* ------ homepage ------ */

#homepage .title h1 {
    font-size: 2.8rem;
    font-weight: 600;
	letter-spacing: 0.09em;
	text-align: center;
	position: relative
}

#homepage .title h1:after {
    content: "";
    width: 50px;
    height: 5px;
    margin: auto;
    border-bottom: 3px solid #21c69c;
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0
}

#homepage .inner { margin-top: 70px }
#homepage .inner .adPost { margin: 40px 0 }
#homepage .inner .adPost ins,
#homepage .inner .adPost iframe {
	width: 100% !important
}

#homepage .inner thumbnail a { display: block }
#homepage .txtWrap {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    margin-top: 40px
}

#homepage .txtWrap p + p { margin-top: 20px }
#homepage .mokujiWrap {
	padding: 20px;
    margin: 40px 0;
    border: 2px solid #c1c1c1
}

#homepage .mokujiWrap .mokujiTitle {
	font-size: 2rem;
	text-align: center
}

#homepage .mokujiWrap .mokujiToggle { font-size: 1.4rem }
#homepage .mokujiWrap #mokuji {
	padding: 0 20px;
	margin-top: 20px;
    counter-reset: li
}

#homepage .mokujiWrap #mokuji > li {
	font-size: 1.8rem;
	letter-spacing: 0.09em;
    padding-left: 30px;
    position: relative
}

#homepage .mokujiWrap #mokuji li + li { margin-top: 6px }
#homepage .mokujiWrap #mokuji > li:after {
    counter-increment: li;
    content: counter(li);
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0
}

#homepage .mokujiWrap #mokuji li a { display: block }
#homepage .mokujiWrap #mokuji li a:hover {
	color: #21c69c;
	text-decoration: underline
}

#homepage .mokujiWrap #mokuji ul {
	margin-top: 6px;
    margin-bottom: 12px
}

#homepage .mokujiWrap #mokuji ul > li { padding-left: 30px }
#homepage .mokujiWrap #mokuji > li > ul > li a {
	position: relative;
	display: block
}

#homepage .mokujiWrap #mokuji ul a:before {
    content: "・";
    font-size: 1.8rem;
    font-weight: 900;
    margin: auto;
	position: absolute;
    top: 0;
    bottom: 0;
    left: -20px
}

#homepage .mokujiWrap dl {
    padding: 0 20px;
    margin: 20px 0;
}

#homepage .mokujiWrap dl + dl {
    padding-top: 20px;
    border-top: 1px dashed #c1c1c1
}

#homepage .mokujiWrap dt { font-weight: 600 }
#homepage .mokujiWrap dd {
    padding: 0 0 0 20px;
    margin-top: 10px;
    position: relative
}

#homepage .mokujiWrap dd::before {
    content: "・";
    font-weight: 600;
    position: absolute;
    left: 6px
}

#homepage .homepageBox {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
	padding-top: 60px;
    margin-top: -60px
}

#homepage .homepageBox h2 {
    font-size: 2.4rem;
    font-weight: 600;
    padding: 11px 0 11px 20px;
	margin-bottom: 40px;
    border-left: 5px solid #21c69c
}

#homepage .homepageBox p + p { margin-top: 20px }
#homepage .homepageBox img { margin: 40px 0 }
#homepage .homepageBox a {
	color: #21c69c;
	text-decoration: underline
}

#homepage .homepageBox ul {
	padding: 0 20px;
    margin: 20px 0
}

#homepage .homepageBox li {
	padding-left: 20px;
    position: relative
}

#homepage .homepageBox li:before {
    content: '';
    width: 6px;
    height: 6px;
    background: #21c69c;
    position: absolute;
    top: 0.6em;
    left: 0;
    border-radius: 50%
}

#homepage .homepageBox .moreReadWrap {
    margin: 40px 0;
    border: 2px solid #ffc107;
    position: relative
}

#homepage .homepageBox .moreReadWrap .moreReadTitle {
    color: #fff;
    font-weight: 600;
    padding: 0 20px;
    background: #ffc107;
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block
}

#homepage .homepageBox .moreReadWrap article a {
	color: #445557;
	font-size: 0;
	padding: 50px 30px 30px;
	display: block
}

#homepage .homepageBox .moreReadWrap article a:hover { color: #21c69c }
#homepage .homepageBox .moreReadWrap article figure {
	width: 100px;
	vertical-align: top;
	margin-right: 40px;
	display: inline-block;
	overflow: hidden
}

#homepage .homepageBox .moreReadWrap article figure img {
    width: 100%;
	margin: 0;
	transform: scale(1);
	transition: .3s ease-in-out
}

#homepage .homepageBox .moreReadWrap article a:hover figure img { transform: scale(1.1) }
#homepage .homepageBox .moreReadWrap article .txt {
	width: calc(100% - 142px);
	vertical-align: top;
	display: inline-block
}
	
#homepage .homepageBox .moreReadWrap article .txt .title {
    font-size: 1.7rem;
    font-weight: 600
}

#homepage .homepageBox .authorComment {
	font-size: 0;
	margin: 40px 0
}

#homepage .homepageBox img + .authorComment { margin: 0 0 40px }
#homepage .homepageBox .authorComment .authorImage {
	width: 100px;
	vertical-align: top;
	margin-right: 30px;
	border-radius: 50%;
	display: inline-block;
    overflow: hidden
}

#homepage .homepageBox .authorComment .authorImage img { margin: 0 }
#homepage .homepageBox .authorComment .authorTxt {
	width: calc(100% - 132px);
    font-size: 1.7rem;
    font-weight: 500;
    vertical-align: top;
    padding: 10px 20px;
    border: 1px solid #21c69c;
    background: #d6fff5;
	position: relative;
    border-radius: 10px;
    display: inline-block
}

#homepage .homepageBox .authorComment .authorTxt::before {
	content: "";
	margin-top: -8px;
	border: 8px solid transparent;
	border-right: 16px solid #d6fff5;
	position: absolute;
	top: 50px;
	left: -21px;
	z-index: 2
}

#homepage .homepageBox .authorComment .authorTxt::after {
	content: "";
    margin-top: -8px;
    border: 8px solid transparent;
    border-right: 16px solid #21c69c;
    position: absolute;
    top: 50px;
    left: -24px;
    z-index: 1
}

#homepage .homepageBox .codeWrap {
    font-size: 1.3rem;
	margin: 40px 0
}

#homepage .homepageBox .codeWrap p {
	color: #fff;
    line-height: 30px;
    padding: 0 20px;
    background: #21c69c;
    border-radius: 10px 10px 0 0;
    display: inline-block
}

#homepage .homepageBox .codeWrap pre {
    color: #fff;
	padding: 20px;
    background: #364549;
	white-space: initial
}

#homepage .homepageBox .codeWrap pre ol { padding-left: 30px }
#homepage .homepageBox .codeWrap pre li {
    list-style: decimal;
    padding-left: 20px;
    border-left: 1px solid #21c69c
}

#homepage .homepageBox .codeWrap pre li::before {
	width: 0;
	height: 0
}

#homepage .homepageBox .dlWrap {
	font-size: 1.5rem;
	margin: 40px 0
}

#homepage .homepageBox .dlWrap dt {
	color: #fff;
    padding: 10px;
    background: #586d70
}

#homepage .homepageBox .dlWrap dd { padding: 10px 10px 20px }
#homepage .homepageBox .dlWrap dl:last-child dd { padding: 10px 10px 0 }
#homepage .homepageBox .demoWrap { margin: 40px 0 }
#homepage .paging { margin: 40px 0 }
#homepage .paging table {
    width: 100%;
    border: 2px solid #c1c1c1
}

#homepage .paging td {
    width: 50%;
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    padding: 20px;
    border: 2px solid #c1c1c1
}

#homepage .paging td + td { text-align: right }
#homepage .paging a {
    text-decoration: underline;
    position: relative;
    display: block
}

#homepage .paging td:nth-child(1) a { padding-left: 20px }
#homepage .paging td:nth-child(1) a::before{
    content: '';
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-top: solid 2px #445557;
    border-right: solid 2px #445557;
    transform: rotate(225deg);
    position: absolute;
    top: 50%;
    left: 0
}

#homepage .paging td:nth-child(2) a { padding-right: 20px }
#homepage .paging td:nth-child(2) a::after{
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #445557;
    border-right: solid 2px #445557;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -4px;
}

@media screen and (max-width: 768px) {
	#homepage .title h1 { font-size: 2.4rem }
	#homepage .mokujiWrap #mokuji { padding: 0 }
    #homepage .mokujiWrap dl {
        padding: 0;
        margin: 0
    }
    
    #homepage .mokujiWrap dl + dl { margin-top: 20px }
	#homepage .homepageBox h2 { font-size: 2rem }
	#homepage .homepageBox .moreReadWrap article a { padding: 50px 20px 20px }
	#homepage .homepageBox .moreReadWrap article figure { margin-right: 20px }
	#homepage .homepageBox .moreReadWrap article .txt { width: calc(100% - 122px) }
	#homepage .homepageBox .moreReadWrap article .txt .title { font-size: 1.5rem }
	#homepage .homepageBox .authorComment .authorImage { width: 60px }
	#homepage .homepageBox .authorComment .authorTxt { width: calc(100% - 92px) }
	#homepage .homepageBox .authorComment .authorTxt::before { top: 30px }
	#homepage .homepageBox .authorComment .authorTxt::after { top: 30px }
    #homepage .paging td {
        width: 100%;
        font-size: 1.5rem;
        border: none;
        display: block
    }
    
    #homepage .paging td + td { border-top: 2px solid #c1c1c1 }
}


/* ------ category ------ */

#category .title h1 {
    font-size: 2.4rem;
    font-weight: 600;
	letter-spacing: 0.09em;
	text-align: center;
	position: relative
}

#category .title h1:after {
    content: "";
    width: 50px;
    height: 5px;
    margin: auto;
    border-bottom: 3px solid #21c69c;
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0
}

#category .inner { margin-top: 70px }
#category article {
	width: 100%;
	max-width: calc(100% / 2);
	vertical-align: top;
	padding: 40px 15px 0;
	display: inline-block
}

#category .infeedSp { display: none }
#category article:nth-child(1),
#category article:nth-child(2) {
	padding: 0 15px
}

#category article a { display: block }
#category article figure { overflow: hidden }
#category article figure img {
    width: 100%;
	transform: scale(1);
	transition: .3s ease-in-out
}

#category article a:hover figure img { transform: scale(1.1) }
#category article h2 {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    text-align: left;
    margin-top: 10px
}

#category article .cattegory p {
    font-size: 1.3rem;
    text-align: left;
    margin-top: 6px
}


@media screen and (max-width: 768px) {
	#category article {
		max-width: 100%;
		padding: 0;
		display: block
	}
	
    #category .infeedSp { display: block }
	#category article:nth-child(1),
	#category article:nth-child(2) {
		padding: 0
	}

	#category article + article { margin-top: 30px }
	#category article a { font-size: 0 }
	#category article figure {
		width: 100px;
		vertical-align: top;
		margin-right: 10px;
		display: inline-block
	}
	
	#category article .txt {
		width: calc(100% - 110px);
		vertical-align: top;
		display: inline-block
	}

	#category article h2 {
		font-size: 1.5rem;
		margin-top: 0
	}
}


/* pagenation */

#category .paginationWrap {
    text-align: center;
    margin: 40px auto 0
}

#category .paginationWrap .pagination li {
	position: relative;
	display: inline-block
}

#category .paginationWrap .pagination li + li::before {
	content: "";
    width: 1px;
    height: 50px;
    border-left: 1px solid #c1c1c1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

#category .paginationWrap .pagination li a,
#category .paginationWrap .pagination li span  {
	min-width: 50px;
	height: 50px;
    font-size: 1.5rem;
	line-height: 50px;
	padding: 0 20px;
    background: #dcdcdc;
    transition: 0.3s;
    float: left;
    position: relative
}

#category .paginationWrap .pagination li .next,
#category .paginationWrap .pagination li .prev {
	font-size: 2rem
}

#category .paginationWrap .pagination li .next { border-radius: 0 25px 25px 0 }
#category .paginationWrap .pagination li .prev { border-radius: 25px 0 0 25px }
#category .paginationWrap .pagination li a:hover {
	color: #fff;
    background: #21c69c
}

#category .paginationWrap .pagination li .current {
    color: #fff;
    background: #21c69c;
    cursor: default
}

@media screen and (max-width: 768px) {
	#category .paginationWrap .pagination li + li::before { height: 40px }
	#category .paginationWrap .pagination li a,
	#category .paginationWrap .pagination li span  {
		min-width: 40px;
		height: 40px;
		line-height: 40px;
		padding: 0 15px;
	}
	
	#category .paginationWrap .pagination li .next { border-radius: 0 20px 20px 0 }
	#category .paginationWrap .pagination li .prev { border-radius: 20px 0 0 20px }
}


/* ------ search ------ */

#category .inner .notFoundWrap { text-align: center }
#category .inner .notFoundWrap p {
    font-size: 1.7rem;
    letter-spacing: 0.09em
}

#category .inner .notFoundWrap .btn {
	text-align: center;
    margin-top: 30px
}

#category .inner .notFoundWrap .btn a {
    width: 100%;
    max-width: 320px;
    color: #fff;
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
    padding: 16px;
    margin: 0 auto;
    background: #21c69c;
	position:relative;
	transition: 800ms ease all;
    display: block
}

#category .inner .notFoundWrap .btn a:hover {
	color: #21c69c;
	background: #fff;
}

#category .inner .notFoundWrap .btn a::before,
#category .inner .notFoundWrap .btn a::after {
	content: '';
	width: 0;
	height: 2px;
	background: #21c69c;
	position: absolute;
	top: 0;
	right: 0;
	transition: 400ms ease all
}

#category .inner .notFoundWrap .btn a::after {
	top: inherit;
	right: inherit;
	bottom: 0;
	left: 0
}

#category .inner .notFoundWrap .btn a:hover::before,
#category .inner .notFoundWrap .btn a:hover::after {
	width: 100%;
	transition: 800ms ease all
}


/* ------ post ------ */

#post #entryHeader ul { font-size: 0 }
#post #entryHeader li {
	font-size: 1.4rem;
	vertical-align: middle;
	position: relative;
	display: inline-block
}

#post #entryHeader li:first-child::after {
    content: "/";
    font-size: 1.4rem;
    margin: 0 10px;
}

#post #entryHeader h1 {
	font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: 0.09em;
	margin-top: 40px
}

#post #entryHeader figure { margin-top: 40px }
#post #entryHeader figure a { display: block }
#post .entryContent .adPost { margin: 40px 0 }
#post .entryContent .adPost ins,
#post .entryContent .adPost iframe {
	width: 100% !important
}

#post .entryContent .txtWrap {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    margin-top: 40px
}

#post .entryContent .txtWrap p + p { margin-top: 20px }
#post .entryContent .txtWrap a {
    color: #21c69c;
    text-decoration: underline
}

#post .entryContent .txtWrap .moreReadWrap {
    margin: 40px 0;
    border: 2px solid #ffc107;
    position: relative
}

#post .entryContent .txtWrap .moreReadWrap .moreReadTitle {
    color: #fff;
    font-weight: 600;
    padding: 0 20px;
    background: #ffc107;
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block
}

#post .entryContent .txtWrap .moreReadWrap article a {
	color: #445557;
	font-size: 0;
	padding: 50px 30px 30px;
	display: block
}

#post .entryContent .txtWrap .moreReadWrap article a:hover { color: #21c69c }
#post .entryContent .txtWrap .moreReadWrap article figure {
	width: 100px;
	vertical-align: top;
	margin-right: 40px;
	display: inline-block;
	overflow: hidden
}

#post .entryContent .txtWrap .moreReadWrap article figure img {
    width: 100%;
	margin: 0;
	transform: scale(1);
	transition: .3s ease-in-out
}

#post .entryContent .txtWrap .moreReadWrap article a:hover figure img { transform: scale(1.1) }
#post .entryContent .txtWrap .moreReadWrap article .txt {
	width: calc(100% - 142px);
	vertical-align: top;
	display: inline-block
}
	
#post .entryContent .txtWrap .moreReadWrap article .txt .title {
    font-size: 1.7rem;
    font-weight: 600
}

#post .entryContent .mokujiWrap {
	padding: 20px;
    margin: 40px 0;
    border: 2px solid #c1c1c1
}

#post .entryContent .mokujiWrap .mokujiTitle {
	font-size: 2rem;
	text-align: center
}

#post .entryContent .mokujiWrap .mokujiToggle { font-size: 1.4rem }
#post .entryContent .mokujiWrap #mokuji {
	padding: 0 20px;
	margin-top: 20px;
    counter-reset: li
}

#post .entryContent .mokujiWrap #mokuji > li {
	font-size: 1.8rem;
	letter-spacing: 0.09em;
    padding-left: 30px;
    position: relative
}

#post .entryContent .mokujiWrap #mokuji li + li { margin-top: 6px }
#post .entryContent .mokujiWrap #mokuji > li:after {
    counter-increment: li;
    content: counter(li);
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0
}

#post .entryContent .mokujiWrap #mokuji li a { display: block }
#post .entryContent .mokujiWrap #mokuji li a:hover {
	color: #21c69c;
	text-decoration: underline
}

#post .entryContent .mokujiWrap #mokuji ul {
	margin-top: 6px;
    margin-bottom: 12px
}

#post .entryContent .mokujiWrap #mokuji ul > li { padding-left: 30px }
#post .entryContent .mokujiWrap #mokuji > li > ul > li a {
	position: relative;
	display: block
}

#post .entryContent .mokujiWrap #mokuji ul a:before {
    content: "・";
    font-size: 1.8rem;
    font-weight: 900;
    margin: auto;
	position: absolute;
    top: 0;
    bottom: 0;
    left: -20px
}

#post .entryContent .mokujiWrap dl {
    padding: 0 20px;
    margin: 20px 0;
}

#post .entryContent .mokujiWrap dl + dl {
    padding-top: 20px;
    border-top: 1px dashed #c1c1c1
}

#post .entryContent .mokujiWrap dt { font-weight: 600 }
#post .entryContent .mokujiWrap dd {
    padding: 0 0 0 20px;
    margin-top: 10px;
    position: relative
}

#post .entryContent .mokujiWrap dd::before {
    content: "・";
    font-weight: 600;
    position: absolute;
    left: 6px
}

#post .entryContent .sectionBox {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
	padding: 60px 0 40px;
    margin-top: -60px
}

#post .entryContent .sectionBox h2 {
    font-size: 2.4rem;
    font-weight: 600;
    padding: 11px 0 11px 20px;
	margin-bottom: 40px;
    border-left: 5px solid #21c69c
}

#post .entryContent .sectionBox p + p { margin-top: 20px }
#post .entryContent .sectionBox .dlWrap + p,
#post .entryContent .sectionBox .movieWrap + p,
#post .entryContent .sectionBox .btnWrap + p {
	margin-top: 40px
}

#post .entryContent .sectionBox img { margin: 40px 0 }
#post .entryContent .sectionBox h2 + img,
#post .entryContent .sectionBox h2 + a img {
	margin: 0 0 40px
}

#post .entryContent .sectionBox .moreReadWrap + img { margin: 0 0 40px }
#post .entryContent .sectionBox a {
	color: #21c69c;
	text-decoration: underline
}

#post .entryContent .sectionBox ul {
	padding: 0 20px;
    margin: 20px 0
}

#post .entryContent .sectionBox dd ul { padding: 0 10px }
#post .entryContent .sectionBox li {
	padding-left: 20px;
    position: relative
}

#post .entryContent .sectionBox li:before {
    content: '';
    width: 6px;
    height: 6px;
    background: #21c69c;
    position: absolute;
    top: 0.6em;
    left: 0;
    border-radius: 50%
}

#post .entryContent .sectionBox .moreReadWrap {
    margin: 40px 0;
    border: 2px solid #ffc107;
    position: relative
}

#post .entryContent .sectionBox .moreReadWrap .moreReadTitle {
    color: #fff;
    font-weight: 600;
    padding: 0 20px;
    background: #ffc107;
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block
}

#post .entryContent .sectionBox .moreReadWrap article a {
	color: #445557;
	font-size: 0;
	padding: 50px 30px 30px;
	display: block
}

#post .entryContent .sectionBox .moreReadWrap article a:hover { color: #21c69c }
#post .entryContent .sectionBox .moreReadWrap article figure {
	width: 100px;
	vertical-align: top;
	margin-right: 40px;
	display: inline-block;
	overflow: hidden
}

#post .entryContent .sectionBox .moreReadWrap article figure img {
    width: 100%;
	margin: 0;
	transform: scale(1);
	transition: .3s ease-in-out
}

#post .entryContent .sectionBox .moreReadWrap article a:hover figure img { transform: scale(1.1) }
#post .entryContent .sectionBox .moreReadWrap article .txt {
	width: calc(100% - 142px);
	vertical-align: top;
	display: inline-block
}
	
#post .entryContent .sectionBox .moreReadWrap article .txt .title {
    font-size: 1.7rem;
    font-weight: 600
}

#post .entryContent .sectionBox .authorComment {
	font-size: 0;
	margin: 40px 0
}

#post .entryContent .sectionBox .authorComment .authorImage {
	width: 100px;
	vertical-align: top;
	margin-right: 30px;
	border-radius: 50%;
	display: inline-block;
    overflow: hidden
}

#post .entryContent .sectionBox .authorComment .authorImage img { margin: 0 }
#post .entryContent .sectionBox .authorComment .authorTxt {
	width: calc(100% - 132px);
    font-size: 1.7rem;
    font-weight: 500;
    vertical-align: top;
    padding: 10px 20px;
    border: 1px solid #21c69c;
    background: #d6fff5;
	position: relative;
    border-radius: 10px;
    display: inline-block
}

#post .entryContent .sectionBox .authorComment .authorTxt::before {
	content: "";
	margin-top: -8px;
	border: 8px solid transparent;
	border-right: 16px solid #d6fff5;
	position: absolute;
	top: 50px;
	left: -21px;
	z-index: 2
}

#post .entryContent .sectionBox .authorComment .authorTxt::after {
	content: "";
    margin-top: -8px;
    border: 8px solid transparent;
    border-right: 16px solid #21c69c;
    position: absolute;
    top: 50px;
    left: -24px;
    z-index: 1
}

#post .entryContent .sectionBox .codeWrap {
    font-size: 1.3rem;
	margin: 40px 0
}

#post .entryContent .sectionBox .codeWrap p {
	color: #fff;
    line-height: 30px;
    padding: 0 20px;
    background: #21c69c;
    border-radius: 10px 10px 0 0;
    display: inline-block
}

#post .entryContent .sectionBox .codeWrap pre {
    color: #fff;
	padding: 20px;
    background: #364549;
	white-space: initial
}

#post .entryContent .sectionBox .codeWrap pre ol { padding-left: 30px }
#post .entryContent .sectionBox .codeWrap pre li {
    list-style: decimal;
    padding-left: 20px;
    border-left: 1px solid #21c69c
}

#post .entryContent .sectionBox .codeWrap pre li::before {
	width: 0;
	height: 0
}

#post .entryContent .sectionBox .dlWrap {
	font-size: 1.5rem;
	margin-top: 40px
}

#post .entryContent .sectionBox .dlWrap dt {
	color: #fff;
    padding: 10px;
    background: #586d70
}

#post .entryContent .sectionBox .dlWrap.color dt {
	border: 1px solid #c1c1c1;
    background: transparent
}

#post .entryContent .sectionBox .dlWrap dd { padding: 10px 10px 20px }
#post .entryContent .sectionBox .dlWrap dl:last-child dd { padding: 10px 10px 0 }
#post .entryContent .sectionBox .dlWrap .attributeWrap { padding: 20px }
#post .entryContent .sectionBox .dlWrap .sampleFontWrap {
    font-size: 2.8rem;
    margin: 10px 0 20px
}

#post .entryContent .sectionBox .dlWrap dl:last-child .attributeWrap { padding: 20px 20px 0 }
#post .entryContent .sectionBox .tableWrap {
	font-size: 1.5rem;
	margin: 40px 0
}

#post .entryContent .sectionBox .tableWrap h3 {
    font-weight: 600;
    padding: 10px;
    border-bottom: 2px solid #c1c1c1
}

#post .entryContent .sectionBox .tableWrap table {
    width: 100%;
    margin-top: 40px;
    border: 1px solid #c1c1c1
}

#post .entryContent .sectionBox .tableWrap th,
#post .entryContent .sectionBox .tableWrap td {
    text-align: center;
    padding: 10px;
    border: 1px solid #c1c1c1
}

#post .entryContent .sectionBox .tableWrap th { background: #efefef }
#post .entryContent .sectionBox .tableWrap thead th:nth-child(1) { background: #e0e0e0 }
#post .entryContent .sectionBox .flowWrap { margin: 40px 0 }
#post .entryContent .sectionBox .flowWrap .flowBox {
    padding: 40px;
    border: 1px solid #21c69c
}

#post .entryContent .sectionBox .flowWrap .flowBox + .flowBox { margin-top: 40px }
#post .entryContent .sectionBox .flowWrap .flowBox h3 {
    font-size: 1.7rem;
    margin-bottom: 20px
}

#post .entryContent .sectionBox .flowWrap .flowBox p {
    font-size: 1.7rem;
    margin-top: 10px
}

#post .entryContent .sectionBox .demoWrap { margin: 40px 0 }
#post .entryContent .sectionBox .movieWrap {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-top: 40px;
    position: relative;
    overflow: hidden
}

#post .entryContent .sectionBox .movieWrap iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#post .entryContent .sectionBox .itemBox {
    font-size: 0;
    letter-spacing: 0;
    padding: 40px;
    margin: 40px 0;
    border: 2px solid #c1c1c1;
    position: relative
}

#post .entryContent .sectionBox .itemBox .imageWrap {
    width: 180px;
    vertical-align: top;
    text-align: center;
    display:  inline-block
}

#post .entryContent .sectionBox .itemBox .imageWrap img { margin: 0 }
#post .entryContent .sectionBox .itemBox .txtWrap {
    width: calc(100% - 220px);
    letter-spacing: inherit;
    vertical-align: top;
    margin-top: 0;
    margin-left: 40px;
    display:  inline-block
}

#post .entryContent .sectionBox .itemBox .txtWrap .brand {
    font-size: 1.5rem;
    font-weight: 600
}

#post .entryContent .sectionBox .itemBox .txtWrap .name {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    margin-top: 0
}

#post .entryContent .sectionBox .itemBox .txtWrap .price {
    font-size: 1.5rem;
    margin-top: 6px
}

#post .entryContent .sectionBox .itemBox .txtWrap .price span {
    font-size: 2rem;
    font-weight: 600;
    margin-right: 4px;
    margin-left: 10px
}

#post .entryContent .sectionBox .itemBox .txtWrap .itemWrap { margin-top: 20px }
#post .entryContent .sectionBox .itemBox .txtWrap ul {
    font-size: 0;
    padding: 0;
    margin: 0
}

#post .entryContent .sectionBox .itemBox .txtWrap li {
    font-size: 1.6rem;
    line-height: 50px;
    text-align: center;
    padding: 0
}

#post .entryContent .sectionBox .itemBox .txtWrap li+ li { margin-top: 10px }
#post .entryContent .sectionBox .itemBox .txtWrap li::before {
    width: 0;
    height: 0
}

#post .entryContent .sectionBox .itemBox .txtWrap li a {
    text-decoration: none;
    border-radius: 8px;
    position: relative;
    display: block;
    overflow: hidden
}

#post .entryContent .sectionBox .itemBox .txtWrap li.amazon a {
    color: #000;
    border-bottom: 4px solid #66420b;
    background: #ffa41c
}

#post .entryContent .sectionBox .itemBox .txtWrap li.rakuten a {
    color: #fff;
    border-bottom: 4px solid #660000;
    background: #bf0000
}

#post .entryContent .sectionBox .itemBox .txtWrap li.yahoo a {
    color: #fff;
    border-bottom: 4px solid #004466;
    background: #0080bf
}

#post .entryContent .sectionBox .itemBox .txtWrap li.other a {
    color: #fff;
    border-bottom: 4px solid #116651;
    background: #21c69c
}

#post .entryContent .sectionBox .itemBox .txtWrap li a::before {
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 75%);
    position: absolute;
    top: 0;
    left: -100%;
    display: block;
}

#post .entryContent .sectionBox .itemBox .txtWrap li a:hover::before { animation: shine 0.8s }

@keyframes shine {
  100% { left: 100% }
}

#post .entryContent .btnWrap {
	text-align: center;
	margin-top: 40px
}

#post .entryContent .btnWrap a {
    width: 100%;
    max-width: 320px;
    color: #fff;
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-decoration: none;
    padding: 16px;
    margin: 0 auto;
    background: #21c69c;
	position:relative;
	transition: 800ms ease all;
    display: block
}

#post .entryContent .btnWrap a:hover {
	color: #21c69c;
	background: #fff;
}

#post .entryContent .btnWrap a::before,
#post .entryContent .btnWrap a::after {
	content: '';
	width: 0;
	height: 2px;
	background: #21c69c;
	position: absolute;
	top: 0;
	right: 0;
	transition: 400ms ease all
}

#post .entryContent .btnWrap a::after {
	top: inherit;
	right: inherit;
	bottom: 0;
	left: 0
}

#post .entryContent .btnWrap a:hover::before,
#post .entryContent .btnWrap a:hover::after {
	width: 100%;
	transition: 800ms ease all
}

#post .entryContent .paging { margin: 40px 0 }
#post .entryContent .paging table {
    width: 100%;
    border: 2px solid #c1c1c1
}

#post .entryContent .paging td {
    width: 50%;
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    padding: 20px;
    border: 2px solid #c1c1c1
}

#post .entryContent .paging td + td { text-align: right }
#post .entryContent .paging a {
    text-decoration: underline;
    position: relative;
    display: block
}

#post .entryContent .paging td:nth-child(1) a { padding-left: 20px }
#post .entryContent .paging td:nth-child(1) a::before{
    content: '';
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-top: solid 2px #445557;
    border-right: solid 2px #445557;
    transform: rotate(225deg);
    position: absolute;
    top: 50%;
    left: 0
}

#post .entryContent .paging td:nth-child(2) a { padding-right: 20px }
#post .entryContent .paging td:nth-child(2) a::after{
    content: '';
    width: 6px;
    height: 6px;
    border: 0px;
    border-top: solid 2px #445557;
    border-right: solid 2px #445557;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -4px;
}

@media screen and (max-width: 768px) {
	#post #entryHeader h1 { font-size: 2.4rem }
	#post .entryContent .txtWrap .moreReadWrap article a { padding: 50px 20px 20px }
	#post .entryContent .txtWrap .moreReadWrap article figure { margin-right: 20px }
	#post .entryContent .txtWrap .moreReadWrap article .txt { width: calc(100% - 122px) }
	#post .entryContent .txtWrap .moreReadWrap article .txt .title { font-size: 1.5rem }
	#post .entryContent .mokujiWrap #mokuji { padding: 0 }
    #post .entryContent .mokujiWrap dl {
        padding: 0;
        margin: 0
    }
    
    #post .entryContent .mokujiWrap dl + dl { margin-top: 20px }
	#post .entryContent .sectionBox h2 { font-size: 2rem }
	#post .entryContent .sectionBox .moreReadWrap article a { padding: 50px 20px 20px }
	#post .entryContent .sectionBox .moreReadWrap article figure { margin-right: 20px }
	#post .entryContent .sectionBox .moreReadWrap article .txt { width: calc(100% - 122px) }
	#post .entryContent .sectionBox .moreReadWrap article .txt .title { font-size: 1.5rem }
	#post .entryContent .sectionBox .authorComment .authorImage { width: 60px }
	#post .entryContent .sectionBox .authorComment .authorTxt { width: calc(100% - 92px) }
	#post .entryContent .sectionBox .authorComment .authorTxt::before { top: 30px }
	#post .entryContent .sectionBox .authorComment .authorTxt::after { top: 30px }
	#post .entryContent .sectionBox .dlWrap .sampleFontWrap { font-size: 2.4rem }
    #post .entryContent .sectionBox .tableWrap .tableBox { overflow-x: scroll }
    #post .entryContent .sectionBox .tableWrap table { white-space: nowrap }
    #post .entryContent .sectionBox .tableWrap th.fixed {
        height: 100%;
        position: sticky;
        left: 0
    }
    
    #post .entryContent .sectionBox .tableWrap th.fixed::before {
        content: "";
        height: 100%;
        border-right: 1px solid #c1c1c1;
        border-left: 1px solid #c1c1c1;
        position: absolute;
        top: 0;
        right: -1px;
        left: -1px
    }
    
    #post .entryContent .sectionBox .flowWrap .flowBox { padding: 20px }
    #post .entryContent .sectionBox .itemBox { padding: 20px }
    #post .entryContent .sectionBox .itemBox .imageWrap {
        width: 100%;
        display:  block
    }

    #post .entryContent .sectionBox .itemBox .txtWrap {
        width: 100%;
        margin-top: 40px;
        margin-left: 0;
        display:  block
    }
    
    #post .entryContent .paging td {
        width: 100%;
        font-size: 1.5rem;
        border: none;
        display: block
    }
    
    #post .entryContent .paging td + td { border-top: 2px solid #c1c1c1 }
}


/* ------ social btn ------ */

.socialBtn {
    width: 100%;
    max-width: 600px;
	text-align: center;
    margin: 40px auto 0
}

article + .socialBtn { margin: 0 auto }
.socialBtn ul { font-size: 0 }
.socialBtn li {
    width: calc(100% / 3);
	line-height: 40px;
	vertical-align: middle;
	display: inline-block
}

.socialBtn .facebook {
	background: #3b5998;
	border-radius: 20px 0 0 20px
}

.socialBtn .twitter { background: #55acee }
.socialBtn .line {
	background: #00c300;
	border-radius: 0 20px 20px 0
}

.socialBtn li a {
	color: #fff;
    font-size: 1.3rem;
	letter-spacing: 0.09em;
    display: block
}

.socialBtn li img {
	height: 20px;
	vertical-align: middle;
    margin-right: 10px
}

.socialBtn li a:hover img { animation: hover-rotation 0.6s linear }

@keyframes hover-rotation {
	0%   { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }
}

@media screen and (max-width: 768px) {
	.socialBtn li img { margin-right: 0 }
	.socialBtn li span { display: none }
}


/* ------ web meishi ------ */

#webmeishi .title h1 {
    font-size: 2.8rem;
    font-weight: 600;
	letter-spacing: 0.09em;
	text-align: center;
	position: relative
}

#webmeishi .title h1:after {
    content: "";
    width: 50px;
    height: 5px;
    margin: auto;
    border-bottom: 3px solid #21c69c;
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0
}

/* about */

#webmeishi .about { margin-top: 70px }
#webmeishi .about .txtWrap {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
	margin-top: 40px
}

#webmeishi .about .txtWrap p + p { margin-top: 20px }
#webmeishi .about .aboutBox {
	font-size: 0;
    padding: 40px;
	margin-top: 40px;
    border: 1px solid #c1c1c1
}

#webmeishi .about .aboutBox .aboutImage {
    width: 100px;
	vertical-align: top;
	margin-right: 40px;
    display: inline-block
}

#webmeishi .about .aboutBox .aboutImage img { display: block }
#webmeishi .about .aboutBox .aboutTxt {
    width: calc(100% - 142px);
	vertical-align: top;
    display: inline-block
}

#webmeishi .about .aboutBox .aboutTxt strong {
	font-size: 2rem;
    font-weight: 600
}

#webmeishi .about .aboutBox .aboutTxt p {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    margin-top: 10px
}

@media screen and (max-width: 768px) {
	#webmeishi .title h1 { font-size: 2.4rem }
	#webmeishi .about .aboutBox {
		text-align: center;
		padding: 40px 20px
	}
	
	#webmeishi .about .aboutBox .aboutImage {
		width: 100px;
		margin: 0 auto;
		display: block
	}

	#webmeishi .about .aboutBox .aboutTxt {
		width: 100%;
		margin-top: 20px;
		display: block
	}

	#webmeishi .about .aboutBox .aboutTxt strong { font-size: 1.8rem }
}

/* sample */

#webmeishi .sample { margin-top: 60px }
#webmeishi .sample h2 {
	font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    padding: 11px 0 11px 20px;
    border-left: 5px solid #21c69c
}

#webmeishi .sample .txtWrap {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    margin-top: 40px
}

#webmeishi .sample .txtWrap .sampleIndex {
    padding: 20px 20px 20px 40px;
	margin: 40px 0;
	border: 2px dashed #21c69c
}

#webmeishi .sample .txtWrap .sampleIndex ul {
    font-size: 1.8rem;
    font-weight: 600
}

#webmeishi .sample .txtWrap .sampleIndex li { list-style: disc }
#webmeishi .sample .txtWrap .sampleIndex li + li { margin-top: 6px }
#webmeishi .sample .txtWrap p + p { margin-top: 20px }
#webmeishi .sample .txtWrap .imageMeishi { margin-top: 60px }
#webmeishi .sample .txtWrap .imageMeishi h3 {
	color: #21c69c;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.09em
}

#webmeishi .sample .txtWrap .imageMeishi .listWrap { margin-top: 40px }
#webmeishi .sample .txtWrap .imageMeishi .listWrap li + li { margin-top: 40px }
#webmeishi .sample .txtWrap .imageMeishi .listWrap li p {
	font-size: 1.7rem;
	font-weight: 600;
	margin-bottom: 20px
}

#webmeishi .sample .txtWrap .imageMeishi .listWrap img {
	width: 100%;
	border: 1px solid #c1c1c1;
	display: block
}

#webmeishi .sample .txtWrap .imageMeishi .listWrap li:nth-child(1) img { max-width: 535px }
#webmeishi .sample .txtWrap .imageMeishi .listWrap li:nth-child(2) img { max-width: 302px }
#webmeishi .sample .txtWrap .imageMeishi .listWrap li:nth-child(3) img { max-width: 302px }
#webmeishi .sample .txtWrap .imageMeishi .imageMeishiTxt {
	font-size: 1.7rem;
	margin-top: 40px
}

#webmeishi .sample .txtWrap .imageMeishi .imageMeishiTxt p + p { margin-top: 20px }
#webmeishi .sample .txtWrap .imageMeishi .imageMeishiTxt a {
    color: #21c69c;
	font-weight: 600;
    text-decoration: underline
}

#webmeishi .sample .txtWrap .htmlMeishi { margin-top: 60px }
#webmeishi .sample .txtWrap .htmlMeishi h3 {
	color: #21c69c;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.09em
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap { margin-top: 40px }
#webmeishi .sample .txtWrap .htmlMeishi .listWrap li { width: 302px }
#webmeishi .sample .txtWrap .htmlMeishi .listWrap li + li { margin-top: 40px }
#webmeishi .sample .txtWrap .htmlMeishi .listWrap .sampleBox > p {
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 20px;
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .sampleBoxInner { border: 1px solid #c1c1c1 }
#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .vertical .sampleBoxInner {
	width: 302px;
	height: 500px;
	text-align: left
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .vertical .logo {
    color: #21c69c;
    font-size: 4.2rem;
    font-weight: 500;
    font-family: 'Abril Fatface', cursive;
    letter-spacing: 0.04em;
    margin-top: 40px;
    margin-left: 20px
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .vertical .position {
    color: #000;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-top: 60px;
    margin-left: 20px
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .vertical .name {
    color: #000;
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: 0.4em;
	margin-top: 0;
    margin-left: 20px
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .vertical .romaji {
    color: #000;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-top: -4px;
    margin-left: 20px
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .vertical .info {
    color: #000;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-top: 60px;
    margin-left: 20px
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .square .sampleBoxInner {
	width: 302px;
	height: 302px;
	text-align: center
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .square .logo {
    color: #21c69c;
    font-size: 3.6rem;
    font-weight: 500;
    font-family: 'Abril Fatface', cursive;
    letter-spacing: 0.04em;
    margin-top: 10px
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .square .position {
    color: #000;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-top: 10px
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .square .name {
    color: #000;
    font-size: 2.4rem;
    font-weight: 600;
	margin-top: 0;
    letter-spacing: 0.4em
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .square .romaji {
    color: #000;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-top: -4px
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .square .info {
    color: #000;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-top: 10px
}

#webmeishi .sample .txtWrap .htmlMeishi .listWrap li a { color: #000 }
#webmeishi .sample .txtWrap .htmlMeishi .listWrap li a:hover { color: #21c69c }
#webmeishi .sample .txtWrap .htmlMeishi .htmlMeishiTxt {
	font-size: 1.7rem;
	margin-top: 40px
}

#webmeishi .sample .txtWrap .htmlMeishi .htmlMeishiTxt p + p { margin-top: 20px }
#webmeishi .sample .txtWrap .profileMeishi { margin-top: 60px }
#webmeishi .sample .txtWrap .profileMeishi h3 {
	color: #21c69c;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.09em
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBox {
	padding: 39px;
    margin-top: 40px;
    border: 1px solid #c1c1c1
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop { font-size: 0 }
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .imageBox {
	width: 260px;
	vertical-align: middle;
	margin-right: 38px;
	display: inline-block
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .imageBox .image {
	width: 160px;
	margin: 0 auto;
	border-radius: 50%;
	display: block
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .imageBox .snsList {
	text-align: center;
	margin-top: 20px
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .imageBox .snsList ul { font-size: 0 }
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .imageBox .snsList li {
	width: 40px;
	height: 40px;
	vertical-align: top;
	display: inline-block
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .imageBox .snsList li + li { margin-left: 20px }
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .imageBox .snsList li img { transition: all 0.4s ease }
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .imageBox .snsList li a:hover img { transform: translateY(-5px) }
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox {
	width: 360px;
    color: #000;
    letter-spacing: 0.09em;
	vertical-align: middle;
	display: inline-block
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox .company {
	font-size: 2rem;
	font-weight: 600
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox .position {
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 0
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox .name {
	font-size: 3.6rem;
	font-weight: 600;
	margin-top: 0
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox .name span { font-size: 2.4rem }
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox .info {
	font-size: 1.6rem;
	font-weight: 600;
	margin-top: 10px
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox .info img {
    height: 14px;
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox a { color: #000 }
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox a:hover { color: #21c69c }
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom {
	color: #000;
    font-size: 0;
    margin-top: 40px
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .profileBox,
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .introBox {
	width: 310px;
	vertical-align: top;
	display: inline-block
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .profileBox { margin-right: 38px }
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .sampleBoxBottomTitle {
	font-size: 1.7rem;
    font-weight: 600;
	letter-spacing: 0.09em;
    padding-bottom: 10px;
    padding-left: 10px;
    border-bottom: 1px solid #999
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .sampleBoxBottomTitle img {
    height: 20px;
    vertical-align: middle;
    margin-right: 10px;
    position: relative;
    top: -3px
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .profileBox table {
	width: 100%;
	margin-top: 10px
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .profileBox th,
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .profileBox td {
	font-size: 1.5rem;
    font-weight: 600;
	letter-spacing: 0.09em;
    text-align: left;
    padding: 10px 10px 0 10px
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .introBox .intro {
	font-size: 1.5rem;
    font-weight: 600;
	letter-spacing: 0.09em;
	padding: 0 10px;
	margin-top: 20px
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiTxt {
	font-size: 1.7rem;
	margin-top: 40px
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiTxt p + p { margin-top: 20px }
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiTxt a {
	color: #21c69c;
	font-weight: 600;
	text-decoration: underline
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiTxt .btnWrap { margin-top: 40px }
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiTxt .btnWrap a {
    width: 100%;
    max-width: 320px;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-align: center;
    text-decoration: none;
    padding: 16px;
    margin: 0 auto;
    background: #21c69c;
    position: relative;
    transition: 800ms ease all;
    display: block
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiTxt .btnWrap a:hover {
	color: #21c69c;
	background: #fff;
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiTxt .btnWrap a::before,
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiTxt .btnWrap a::after {
	content: '';
	width: 0;
	height: 2px;
	background: #21c69c;
	position: absolute;
	top: 0;
	right: 0;
	transition: 400ms ease all
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiTxt .btnWrap a::after {
	top: inherit;
	right: inherit;
	bottom: 0;
	left: 0
}

#webmeishi .sample .txtWrap .profileMeishi .profileMeishiTxt .btnWrap a:hover::before,
#webmeishi .sample .txtWrap .profileMeishi .profileMeishiTxt .btnWrap a:hover::after {
	width: 100%;
	transition: 800ms ease all
}

@media screen and (max-width: 768px) {
	#webmeishi .sample h2 { font-size: 2rem }
	#webmeishi .sample .txtWrap .imageMeishi h3 { font-size: 1.8rem }
	#webmeishi .sample .txtWrap .imageMeishi .listWrap li:nth-child(1) img { max-width: 302px }
	#webmeishi .sample .txtWrap .imageMeishi .listWrap li:nth-child(2) img { max-width: 183px }
	#webmeishi .sample .txtWrap .imageMeishi .listWrap li:nth-child(3) img { max-width: 183px }
	#webmeishi .sample .txtWrap .htmlMeishi h3 { font-size: 1.8rem }
	#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .vertical .logo { margin-top: 50px }
	#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .vertical .position { margin-top: 50px }
	#webmeishi .sample .txtWrap .htmlMeishi .listWrap li .vertical .info {
		font-size: 1.2rem;
		margin-top: 50px
	}

	#webmeishi .sample .txtWrap .profileMeishi h3 { font-size: 1.8rem }
}

@media screen and (max-width: 1175px) {
	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBox { padding: 30px }
	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .imageBox {
		width: 100%;
		margin-right: 0;
		display: block
	}
	
	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox {
		width: 100%;
		text-align: center;
		margin-top: 40px;
		display: block
	}

	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox .company { font-size: 1.8rem }
	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox .name { font-size: 2rem }
	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxTop .txtBox .name span { font-size: 1.4rem }
	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom { margin-top: 40px }
	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .profileBox,
	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .introBox {
		width: 100%;
		display: block
	}

	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .profileBox {
		margin-right: 0;
		margin-bottom: 40px
	}
	
	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .profileBox table { margin-top: 20px }
	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .profileBox th,
	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .profileBox td {
		width: 100%;
		padding: 10px;
		display: block
	}

	#webmeishi .sample .txtWrap .profileMeishi .profileMeishiBoxBottom .profileBox th { background: #efefef }
}


/* ------ request ------ */

#request .title h1 {
    font-size: 2.8rem;
    font-weight: 600;
	letter-spacing: 0.09em;
	text-align: center;
	position: relative
}

#request .title h1:after {
    content: "";
    width: 50px;
    height: 5px;
    margin: auto;
    border-bottom: 3px solid #21c69c;
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0
}

#request .greeting {
    font-size: 0;
    margin-top: 70px
}

#request .greeting .imageWrap {
    width: 130px;
    vertical-align: middle;
    margin-right: 20px;
    display: inline-block
}

#request .greeting .imageWrap img { border-radius: 50% }
#request .greeting .imageWrap p {
    font-size: 1.7rem;
    font-weight: 600;
    text-align: center;
    margin-top: 10px
}

#request .greeting .txtWrap {
    width: calc(100% - 150px);
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    vertical-align: middle;
    display: inline-block
}

#request .greeting .txtWrap p + p { margin-top: 20px }
#request .service { margin-top: 60px }
#request .service h2 {
	font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    padding: 11px 0 11px 20px;
    border-left: 5px solid #21c69c
}

#request .service .txtWrap {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    margin-top: 40px
}

#request .service .txtWrap p + p { margin-top: 20px }
#request .service .txtWrap .serviceBox {
    padding: 20px 20px 20px 40px;
	margin: 40px 0;
	border: 2px dashed #21c69c
}

#request .service .txtWrap .serviceBox ul {
    font-size: 1.8rem;
    font-weight: 600
}

#request .service .txtWrap .serviceBox li { list-style: disc }
#request .service .txtWrap .serviceBox li + li { margin-top: 6px }
#request .flow { margin-top: 60px }
#request .flow h2 {
	font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    padding: 11px 0 11px 20px;
    border-left: 5px solid #21c69c
}

#request .flow .txtWrap {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    margin-top: 40px
}

#request .flow .listWrap { margin: 40px 0 }
#request .flow .listWrap li {
	font-size: 0;
    padding: 40px;
    border: 1px solid #c1c1c1
}

#request .flow .listWrap li + li { margin-top: 40px }
#request .flow .listWrap .flowImage {
    width: 100px;
	vertical-align: top;
	margin-right: 40px;
    display: inline-block
}

#request .flow .listWrap .flowImage img { display: block }
#request .flow .listWrap .flowTxt {
    width: calc(100% - 142px);
	vertical-align: top;
    display: inline-block
}

#request .flow .listWrap .flowTxt h3 {
	font-size: 1.7rem;
    font-weight: 600
}

#request .flow .listWrap .flowTxt p {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    margin-top: 10px
}

#request .flow .listWrap .flowTxt a {
	color: #21c69c;
	font-weight: 600;
    text-decoration: underline
}

#request .flow .btnWrap { margin-top: 40px }
#request .flow .btnWrap a {
    width: 100%;
    max-width: 320px;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-align: center;
    text-decoration: none;
    padding: 16px;
    margin: 0 auto;
    background: #21c69c;
    position: relative;
    transition: 800ms ease all;
    display: block
}

#request .flow .btnWrap a:hover {
	color: #21c69c;
	background: #fff;
}

#request .flow .btnWrap a::before,
#request .flow .btnWrap a::after {
	content: '';
	width: 0;
	height: 2px;
	background: #21c69c;
	position: absolute;
	top: 0;
	right: 0;
	transition: 400ms ease all
}

#request .flow .btnWrap a::after {
	top: inherit;
	right: inherit;
	bottom: 0;
	left: 0
}

#request .flow .btnWrap a:hover::before,
#request .flow .btnWrap a:hover::after {
	width: 100%;
	transition: 800ms ease all
}


@media screen and (max-width: 768px) {
	#request .title h1 { font-size: 2.4rem }
	#request .greeting .imageWrap {
		width: 130px;
		margin: 0 auto;
		display: block
	}

	#request .greeting .txtWrap {
		width: 100%;
		margin-top: 40px;
		display: block
	}

	#request .service h2 { font-size: 2rem }
	#request .flow h2 { font-size: 2rem }
	#request .flow .listWrap li { padding: 40px 20px }
	#request .flow .listWrap .flowImage {
		width: 100px;
		margin: 0 auto;
		display: block
	}

	#request .flow .listWrap .flowTxt {
		width: 100%;
		text-align: center;
		margin-top: 20px;
		display: block
	}
}


/* ------ contact ------ */

#contact .title h1 {
    font-size: 2.8rem;
    font-weight: 600;
	letter-spacing: 0.09em;
	text-align: center;
	position: relative
}

#contact .title h1:after {
    content: "";
    width: 50px;
    height: 5px;
    margin: auto;
    border-bottom: 3px solid #21c69c;
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0
}

#contact .txtWrap {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    margin-top: 70px
}

#contact .txtWrap p + p { margin-top: 20px }
#contact .formWrap { margin-top: 60px }
#contact .formBox dl + dl { margin-top: 40px }
#contact .formBox dt {
    width: 100%;
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    line-height: 40px
}

#contact .formBox dt:after {
	content: "必須";
    color: #f2577e;
    font-size: 1.2rem;
    margin-left: 20px
}

#contact .formBox dd {
	width: 100%;
	font-size: 1.6rem;
    letter-spacing: 0.09em
}

#contact .formBox dd input,
#contact .formBox dd select {
	width: 100%;
    height: 40px;
    padding: 10px;
    border: 1px solid #7f7f7f;
	border-radius: 0;
	-webkit-appearance: none
}

#contact .formBox dd select {
	background: url(img/common/icon_arrow_down.svg) 98% 60% no-repeat;
    background-size: 14px, 100%

}

#contact .formBox dd textarea {
    width: 100%;
    height: 140px;
    padding: 10px;
    border: 1px solid #7f7f7f;
	border-radius: 0;
	-webkit-appearance: none
}

#contact .formBox .formBtn {
    text-align: center;
    margin-top: 20px
}

#contact .formBox .formBtn input {
    width: 320px;
    color: #fff;
    font-size: 1.7rem;
	font-weight: 600;
	font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    letter-spacing: 0.09em;
    padding: 16px;
    border: none;
    background: #21c69c;
    transition: 0.3s;
    -webkit-appearance: none;
    cursor: pointer
}

#contact .formBox .formBtn input:hover { opacity: 0.7 }
#contact .formBox input:focus,
#contact .formBox select:focus,
#contact .formBox textarea:focus {
	outline: 0
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset
}

#contact .privacyBox { margin-top: 100px }
#contact .privacyBox h2 {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    padding: 11px 0 11px 20px;
    border-left: 5px solid #21c69c
}

#contact .privacyBox .privasyTxt {
	padding: 20px;
    margin-top: 30px;
    border: 2px solid #c1c1c1
}

#contact .privacyBox .privasyTxt h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    padding: 10px;
    background: #586d70
}

#contact .privacyBox .privasyTxt p {
    font-size: 1.5rem;
    letter-spacing: 0.09em;
    margin-top: 10px
}

#contact .privacyBox .privasyTxt p + h3 { margin-top: 20px }

/* contact form 7 */

#contact .wpcf7-not-valid-tip {
    color: #f2577e;
    font-size: 1.2rem;
	letter-spacing: 0.09em;
    margin-top: 4px
}

#contact .wpcf7-mail-sent-ok {
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
    letter-spacing: 0.09em;
    padding: 10px;
    border: none;
    background: #f2577e
}

#contact .wpcf7-validation-errors,
#contact .wpcf7-acceptance-missing,
#contact .wpcf7-mail-sent-ok,
#contact .wpcf7-response-output {
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
	letter-spacing: 0.09em;
    padding: 10px;
    border: none;
    background: #f2577e
}

@media screen and (max-width: 768px) {
	#contact .title h1 { font-size: 2.4rem }
	#contact .txtWrap {
		text-align: left;
		margin-top: 70px
	}
	
	#contact .txtWrap br { display: none }
	#contact .formWrap { margin-top: 40px }
	#contact .formBox dl + dl { margin-top: 20px }
	#contact .formBox .formBtn input:hover {
		color: #fff;
		background: #21c69c
	}

	#contact .privacyBox { margin-top: 60px }
	#contact .privacyBox h2 { font-size: 2rem }
	#contact .privacyBox .privasyTxt { margin-top: 20px }
	
	/* contact form 7 */
	
	#contact .wpcf7-validation-errors,
	#contact .wpcf7-acceptance-missing {
		text-align: left
	}
	
	#contact .wpcf7-mail-sent-ok { text-align: left }
}


/* ------ 404 ------ */

#notFound .title h1 {
    font-size: 2.8rem;
    font-weight: 600;
	letter-spacing: 0.09em;
	text-align: center;
	position: relative
}

#notFound .title h1:after {
    content: "";
    width: 50px;
    height: 5px;
    margin: auto;
    border-bottom: 3px solid #21c69c;
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0
}

#notFound .txtWrap {
    font-size: 1.7rem;
    letter-spacing: 0.09em;
    margin-top: 70px
}

#notFound .txtWrap p + p { margin-top: 20px }
#notFound .btnWrap {
	text-align: center;
    margin-top: 30px
}

#notFound .btnWrap a {
    width: 100%;
    max-width: 320px;
    color: #fff;
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: 0.09em;
    padding: 16px;
    margin: 0 auto;
    background: #21c69c;
	position:relative;
	transition: 800ms ease all;
    display: block
}

#notFound .btnWrap a:hover {
	color: #21c69c;
	background: #fff;
}

#notFound .btnWrap a::before,
#notFound .btnWrap a::after {
	content: '';
	width: 0;
	height: 2px;
	background: #21c69c;
	position: absolute;
	top: 0;
	right: 0;
	transition: 400ms ease all
}

#notFound .btnWrap a::after {
	top: inherit;
	right: inherit;
	bottom: 0;
	left: 0
}

#notFound .btnWrap a:hover::before,
#notFound .btnWrap a:hover::after {
	width: 100%;
	transition: 800ms ease all
}

@media screen and (max-width: 768px) {
	#notFound .title h1 { font-size: 2.4rem }
	#notFound .txtWrap {
		text-align: left;
		margin-top: 70px
	}
	
	#notFound .txtWrap br { display: none }

}


/* ------ sitemap ------ */

#sitemap .title h1 {
    font-size: 2.8rem;
    font-weight: 600;
	letter-spacing: 0.09em;
	text-align: center;
	position: relative
}

#sitemap .title h1:after {
    content: "";
    width: 50px;
    height: 5px;
    margin: auto;
    border-bottom: 3px solid #21c69c;
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0
}

#sitemap .listWrap { margin-top: 70px }
#sitemap .listWrap h2 {
	font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: .09em;
    padding: 11px 0 11px 20px;
    border-left: 5px solid #21c69c
}

#sitemap .listWrap .listBox {
    padding: 20px;
    margin-top: 40px;
    border: 2px solid #c1c1c1
}

#sitemap .listWrap ul {
    padding: 0 20px;
    margin: 20px 0
}

#sitemap .listWrap li {
	font-size: 1.7rem;
    padding-left: 20px;
    position: relative
}

#sitemap .listWrap li + li { margin-top: 20px }
#sitemap .listWrap li::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #21c69c;
	position: absolute;
    top: 10px;
    left: 0;
    border-radius: 50%;
    display: block
}

#sitemap .listWrap dl {
    padding: 0 20px;
    margin: 20px 0
}

#sitemap .listWrap dl + dl {
    padding-top: 20px;
    border-top: 1px dashed #c1c1c1
}

#sitemap .listWrap dt {
    font-size: 1.7rem;
    font-weight: 600
}

#sitemap .listWrap dd {
    font-size: 1.7rem;
    padding: 0 0 0 20px;
    margin-top: 20px;
    position: relative
}

#sitemap .listWrap dd::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #21c69c;
	position: absolute;
    top: 10px;
    left: 0;
    border-radius: 50%;
    display: block
}

#sitemap .listWrap a { display: block }
#sitemap .listWrap a:hover { color: #21c69c }

@media screen and (max-width: 768px) {
	#sitemap .title h1 { font-size: 2.4rem }
	#sitemap .listWrap h2 { font-size: 2rem }
    #sitemap .listWrap ul,
    #sitemap .listWrap dl {
        padding: 0;
        margin: 0
    }
    
    #sitemap .listWrap dl + dl { margin-top: 20px }
}

/* pc・sp swich */

.spOnly { display: none !important }

@media screen and (max-width: 768px) {
	.pcOnly { display: none !important }
	.spOnly { display: block !important }
}