/*
Theme Name: yokosukashogakko-pool theme ver1.0
Author: Goove inc.
Version: 1.0
License: It is protected by copyright
*/

@charset "UTF-8";
body {
	font-family: Hiragino Kaku Gothic ProN, メイリオ, sans-serif
}
main {
	padding-top: 40px
}
h1 {
	color: #58585a;
	font-size: 140%;
	border-bottom: 2px solid #45abee
}
h1, h2 {
	text-align: left
}
h2 {
	color: #7f8394;
	font-size: 90%
}
h3, h4 {
	color: #45abee;
	font-size: 80%
}
p {
	font-size: 100%;
	line-height: 1.8em
}
a {
	font-size: 90%;
	color: #000
}
a.bg-bt {
	padding: 15px;
	width: 80%;
	margin: 20px auto;
	display: block;
	font-size: 80%;
	border-radius: 5px
}
section {
	padding: 10px 0
}
.margin-right {
	margin-right: 5px
}
.pc-center {
	text-align: left
}
.container {
	margin: 0 auto
}
.visible-sp {
	display: block
}
.br-sp, .hidden-sp {
	display: none
}
img.top-logo {
	float: left;
	width: 220px;
	margin: 5px
}
.sp-menu {
	padding: 0!important;
	padding: 0;
	margin: 0;
	border-top: 1px solid #c1c1c1
}
.sp-menu li a {
	font-size: 80%;
	color: #636363;
	background-color: #f5f5f5;
	border-left: 5px solid #666d79;
	border-bottom: 1px solid #c1c1c1;
	padding: 10px
}
.sp-cv, .sp-menu li a {
	width: 100%;
	display: block
}
.sp-cv {
	clear: both;
	text-align: center;
	padding: 20px 20px 10px
}
a.top-cvr-bt-sp1 {
	margin-bottom: 10px
}
a.top-cvr-bt-sp1, a.top-cvr-bt-sp2 {
	width: 100%;
	padding: 10px
}
.policy-ul {
	list-style: none;
	margin: 0;
	padding: 0 10px
}
.policy-ul li {
	float: left
}
.policy-ul a {
	font-size: 60%;
	margin: 5px;
	color: #585858
}
.breadcrumbs-area {
	font-size: 14px;
	margin: 0 auto;
	padding: 20px 0;
	background-color: #eaeaea
}
.breadcrumbs {
	color: #545454;
	margin: 0 auto;
	display: block
}
.breadcrumbs a {
	color: #545454
}
.title-zone {
	background-color: #45abee;
	text-align: center;
	color: #fff;
	padding: 75pt 20px;
	background-size: cover
}
.footer-logo {
	width: 90%;
	margin: 0 auto 10px
}
.foot-ul {
	padding: 0;
	margin: 5px 5px 25px
}
.foot-ul li {
	text-align: left;
	list-style: none;
	font-size: 95%
}
.title-zone {
	font-size: 120%
}
#single h1 {
	font-size: 100%
}
.widget {
	margin-bottom: 50px;
	background-color: #f9f9f9
}
#sidebar li {
	margin: 5px
}
#sidebar li a {
	background-color: #fff;
	border-left: 5px solid #ddd
}
#sidebar li a, #sidebar li a:hover {
	border-bottom: 1px dotted #ddd;
	font-size: 90%;
	padding: 10px;
	display: block
}
#sidebar li a:hover {
	background-color: #eee;
	transition: .3s
}
.tablenav {
	margin: 40px 0;
	text-align: center
}
.page-numbers.current {
	color: #fff;
	background-color: #45abee
}
.page-numbers.current, a.page-numbers {
	padding: 5px 10px;
	margin: 0;
	border: 1px solid #45abee
}
a.page-numbers {
	color: #45abee;
	background-color: #fff
}
a:hover.page-numbers {
	color: #fff;
	background-color: #45abee;
	padding: 5px 10px;
	margin: 0;
	border: 1px solid #45abee;
	transition: .3s
}
@media(min-width:768px) {
	main {
		padding-top: 70px
	}
	h1 {
		color: #585858;
		font-size: 200%;
		border-bottom: 0;
		position: relative;
		display: inline-block;
		padding: 0 55px;
		margin: 30px 0 30px;
		text-align: center;
		display: block;
	}


	h2 {
		color: #7f8394
	}
	h2, h3 {
		font-size: 100%
	}
	h3, h4 {
		color: #45abee
	}
	h4 {
		font-size: 80%
	}
	a {
		font-size: 100%
	}
	a.bg-bt {
		padding: 15px;
		width: 65%;
		margin: 50px auto;
		display: block;
		font-size: 105%;
		border-radius: 5px
	}
	section {
		padding: 40px 0
	}
	.margin-right {
		margin-right: 5px
	}
	.pc-center {
		text-align: center
	}
	.visible-sp {
		display: none
	}
	.br-sp, .hidden-sp {
		display: block
	}
	img.top-logo {
		float: left;
		width: 290px
	}
	.footer-logo {
		width: 60%;
		margin: 15px auto
	}
	.foot-ul {
		padding: 0;
		margin: 5px 5px 25px
	}
	.foot-ul li {
		text-align: left;
		list-style: none;
		font-size: 80%;
		padding: 3px 0
	}
	.title-zone {
		font-size: 180%
	}
	#single h1 {
		font-size: 115%
	}
}
@media(min-width:1200px) {
	.container {
		width: 1118px
	}
}
header {
	border-bottom: 3px solid #45abee;
	width: 100%;
	background-color: #fff;
	z-index: 1;
	position: fixed
}
.nav-list {
	padding: 0
}
.nav-list li {
	display: inline-block
}
.top-cvr-bt {
	width: 150px
}
a.top-cvr-bt {
	color: #fff;
	font-weight: 400;
	margin-right: 0;
	height: 35px;
	line-height: 35px;
	font-size: 90%
}
.top-nav a {
	color: #585858;
	font-weight: 700;
	margin-right: 15px;
	text-decoration: none;
	position: relative;
	display: inline-block;
	transition: .3s
}
.top-nav a:after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 2px;
	background-color: #f19700;
	transition: .3s
}
.top-nav a:hover:after {
	width: 100%
}
.top-nav a:focus, .top-nav a:hover {
	color: #f19700
}
.top-nav a:focus {
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px
}
#kv {
	padding: 0
}
#about:before {
	content: "";
	display: inline-block;
	margin-top: -37px;
	vertical-align: top
}
.about-h2 {
	font-size: 100%
}
.price-img {
	background-color: #edf0f1;
	padding: 30px 30px 22px;
	border: 2px solid #dedede
}
.option {
	padding: 0
}
.option li {
	list-style: none;
	display: inline-block;
	background-color: #45abee;
	color: #fff;
	padding: 25px;
	border-radius: 90pt
}
.option-img img {
	width: 75%;
	margin: 0 auto
}
#design:before {
	content: "";
	display: inline-block;
	margin-top: -37px;
	vertical-align: top
}
#design {
	background-color: #f5f6f7;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #f9f9f9), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #f9f9f9), color-stop(.75, #f9f9f9), color-stop(.75, transparent), to(transparent));
	-webkit-background-size: 14px 14px
}
.accordion-txt {
	padding: 0;
	display: none
}
.accordion-txt p {
	text-align: left;
	padding: 20px;
	margin: 0;
	background-color: #f1f1f1
}
#flow:before {
	content: "";
	display: inline-block;
	margin-top: -6pc;
	vertical-align: top
}
#flow {
	background-image: url(img/top/flow-back.jpg);
	background-size: cover
}
#flow h3 {
	background-color: #9f998b;
	border-top: 1px solid #ffab1f;
	border-bottom: 3px solid #ffab1f;
	color: #fff;
	text-shadow: 1px 1px 1px #010101;
	margin: 0;
	font-size: 100%;
	border-radius: 0 20px
}
#flow h3, #flow p {
	text-align: left;
	padding: 10px
}
#flow p {
	background-color: #f5f6f8;
	border-radius: 5px;
	border: 3px dashed #ddd
}
.flow-area {
	padding: 10px 0;
	background-color: #fff;
	position: relative
}
a.flow-a {
	font-size: 90%;
	position: absolute;
	bottom: 25px;
	right: 25px
}
.back-white {
	background-color: #ffffffa6;
	border-radius: 10px;
	padding: 30px
}
.flow-box img {
	border-radius: 30px
}
img.flow-arrow {
	width: 40%;
	margin-top: -10px
}
#works:before {
	content: "";
	display: inline-block;
	margin-top: -37px;
	vertical-align: top
}
#works {
	background-color: #f5f6f7;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #f9f9f9), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #f9f9f9), color-stop(.75, #f9f9f9), color-stop(.75, transparent), to(transparent));
	-webkit-background-size: 14px 14px
}
.works-box {
	margin-top: -1pc;
	margin-bottom: 20px;
	padding: 5px
}
.works-box-inner {
	background-color: #fff
}
.works-img {
	width: 100%;
	overflow: hidden
}
.cover {
	display: inline-block;
	background-color: #ccc;
	height: 10pc;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat
}
.works-img img {
	width: 100%;
	display: block;
	margin: 0 auto;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1)2s transform, ease-out .3s opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}
.cover:hover {
	cursor: pointer;
	transform: scale(1.05);
	opacity: .8;
	transition: cubic-bezier(0.075, 0.82, 0.165, 1)2s transform, ease-out .3s opacity
}
.cat {
	position: relative;
	top: 20px;
	left: 0;
	color: #fff;
	background-color: #f19700;
	width: 60px;
	line-height: 20px;
	padding: 0 10px;
	font-size: 40%;
	font-weight: 700;
	text-align: center;
	z-index: 1
}
#works h3 {
	color: #45abee;
	font-size: 80%;
	padding: 5px 5px 0
}
#works h3, #works h4 {
	text-align: left;
	margin: 0
}
#works h4 {
	color: #8e7731;
	font-size: 60%;
	font-weight: 400;
	padding: 0 5px
}
a.pickupbox-a {
	font-size: 60%;
	width: 100%;
	margin-top: 8px;
	padding: 5px
}
#fag:before {
	content: "";
	display: inline-block;
	height: 90px;
	margin-top: -37px;
	vertical-align: top
}
#fag {
	margin-bottom: 50px
}
#fag h3 {
	color: #fff;
	padding: 10px;
	background: #5191af;
	cursor: pointer;
	margin: 3px 0;
	font-weight: 400;
	text-align: left;
	padding-left: 15px
}
#fag h3 span {
	display: block;
	background: url(img/top/arrow.svg)no-repeat right 50%;
	background-size: 20px
}
#fag h3.bg02 span {
	background: url(img/top/arrow-under.svg)no-repeat right 50%;
	background-size: 20px
}
#pickup {
	padding: 40px 35px;
	background-color: #c0e3f9;
}
#pickup h2 {
	font-size: 130%;
	color: #fff;
	letter-spacing: .2em;
	border-bottom: 1px solid #f19700;
	font-weight: 400;
	margin-bottom: 10px
}
#pickup p {
	color: #fff
}
#pickup img {
	height: auto;
	width: 100%;
	margin: 0 auto 10px;
	display: block;
	border-radius: 10px 10px 0 0;
	box-shadow: 0px 0px 10px 0px #e8e8e8;
}
.pickup-box {
	background-color: #fff;
	padding: 10px;
	position: relative
}
.pickup-cat {
	position: absolute;
	top: 0;
	left: -10px;
	font-size: 80%;
	padding: 3px 10px;
	font-weight: 700;
	background-color: #ff0;
	transform: rotate(-15deg)
}
.pickup-box h3 {
	font-size: 120%;
	margin: 0;
	color: #8c8a2d
}
p.pickup-txt {
	font-size: 100%;
	color: #000!important;
	margin: 0
}
a.pickup-a {
	background-color: #00000096;
	color: #fff;
	font-size: 80%;
	padding: 10px;
	margin: -10px 0 30px;
	display: block;
}
a.pickup-link {
	color: #fff;
	text-decoration: underline
}
a:hover.pickup-a {
	background-color: #f19700;
	color: #fff;
	-webkit-transition: all .3s;
	transition: all .3s
}
#blog:before {
	content: "";
	display: inline-block;
	margin-top: -37px;
	vertical-align: top
}
.blog {
	margin: 0 0 10px;
	padding: 0;
	border-top: 1px dashed #ddd
}
.blog a {
	color: #45abee;
	text-align: left;
	border-bottom: 1px dashed #ddd;
	padding: 10px 0;
	margin: 0;
	width: 100%;
	display: block
}
.blog a:hover {
	background-color: #f5f4e5;
	-webkit-transition: all .3s;
	transition: all .3s
}
.blog li {
	list-style: none
}
.date {
	font-size: 80%;
	padding: 3px 15px;
	margin: 0 30px 0 10px
}
.date, footer {
	background-color: #45abee;
	color: #fff
}
footer {
	padding: 30px 0 0
}
.footer-ttl {
	text-align: left;
	border-bottom: 1px dotted #fff
}
.foot-ul a {
	color: #fff
}
.copy {
	background-color: #1c2031;
	color: #c7c7c7;
	font-size: 60%;
	padding: 10px 0;
	text-align: center
}
.copy a {
	color: #616161
}
a.sns {
	text-align: center;
	color: #fff;
	font-size: 140%;
	border: 1px solid #515875;
	background-color: #2f3552;
	padding: 14px;
	width: 50px;
	height: 50px;
	margin: 3px;
	line-height: 0;
	display: inline-block;
	border-radius: 75pt
}
a:hover.sns {
	color: #2f2f2f;
	font-size: 140%;
	border: 1px solid #fff;
	background-color: #fff;
	-webkit-transition: all .3s;
	transition: all .3s
}
.footer-sns {
	margin: 40px 0
}
#single {
	background-color: #f5f6f7;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #f9f9f9), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #f9f9f9), color-stop(.75, #f9f9f9), color-stop(.75, transparent), to(transparent));
	-webkit-background-size: 14px 14px
}
.content {
	background-color: #fff;
	padding-top: 15px;
	padding-bottom: 75pt
}
#single h1 {
	text-align: left;
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: 0;
	margin-top: 20px
}
#single h1:after, #single h1:before {
	display: none
}
#single h2 {
	text-align: left;
	font-style: italic;
	font-size: 125%;
	letter-spacing: 0.2em;
	padding: 12px;
	color: #2f8ecb;
	background-color: #f9f9f9;
	border-top: 2px solid #45abee;
	border-bottom: 2px solid #45abee;
}
#single h3 {
	padding: 5px 10px;
	background-color: #666a79;
	color: #fff;
	font-size: 120%;
	letter-spacing: .2em;
	font-family: serif;
	border-radius: 0 75pt 75pt 0
}
#single h4 {
	font-size: 100%;
	margin: 0
}
.ttl-h1 {
	margin: 0;
	font-size: 24px;
	border-bottom: solid 3px;
	padding-bottom: 5px;
	margin-bottom: 15px;
	position: relative;
	font-weight: 400
}
.ttl-h1:before {
	content: '';
	width: 50px;
	height: 3px;
	background-color: #45abee;
	position: absolute;
	left: 0;
	bottom: -3px
}
.single-date {
	text-align: right;
	font-size: 80%
}
.single-cat {
	background-color: #000;
	color: #fff;
	padding: 3px 10px;
	font-size: 80%
}
.addtoany_share_save_container {
	background-color: #f7f7f7;
	padding: 15px 15px 0;
	margin-top: 10px!important;
	text-align: left;
	border: 1px solid #ececec
}
.nav-links {
	padding: 10px 0
}
.nav-links a {
	color: #333;
	font-size: 90%
}
.nav-previous {
	text-align: right
}
#toc_container {
	margin: 30px auto!important;
	font-size: 80%!important
}
#navigation {
	overflow: hidden;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	background: #eee
}
#navigation li {
	display: block;
	width: 50%;
	line-height: 1.6em;
	font-size: 13px;
	float: left;
	background: #fff
}
#navigation:after {
	clear: both
}
#navigation a {
	display: block;
	height: 60px;
	margin: 10px 5px
}
#navigation li:first-child {
	margin: 2px 1px 2px -1px;
	padding-bottom: 10px
}
#navigation li:first-child img {
	margin-right: 1em;
	float: left;
	border: 1px solid #ccc;
	width: 33%
}
#navigation li:last-child {
	margin: 2px -1px 2px 1px;
	padding-bottom: 10px;
	text-align: right
}
#navigation li:last-child img {
	margin-left: 1em;
	float: right;
	border: 1px solid #ccc;
	width: 33%
}
#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none
}
h2.sidebar {
	margin: 0 0 20px;
	padding: 0;
	font-size: 80%
}
#sidebar img {
	width: auto;
	max-width: 100%
}
.wpp-list li {
	overflow: hidden;
	float: none;
	clear: both
}
ul.wpp-list a {
	border-bottom: 0 dotted #ddd!important;
	font-size: 90%;
	padding: 0!important;
	background-color: #fff0!important;
	display: block!important;
	border-left: 0 solid #ddd!important
}
table, td, th {
	border: 1px solid #d6d6d6;
	border-collapse: collapse;
	width: 100%;
	font-size: 90%
}
th {
	width: 30%
}
td, th {
	padding: 10px;
	height: 25px;
	text-align: left
}
th {
	background: #f5f5f5
}
#calculated p {
	font-size: 120%
}
#calculated label, .wpcf7-list-item {
	display: block!important
}
#calculated label {
	cursor: pointer!important;
	background-color: #e7f2f7;
	padding: 10px;
	margin-bottom: 5px!important
}
#calculated label:hover {
	background-color: #a8d2f1;
	-webkit-transition: all .3s;
	transition: all .3s
}
input.ctf7-total {
	background-color: none;
	width: 100%;
	font-size: 200%
}
.sns-area ul {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	list-style: none;
	display: flex
}
.sns-area li {
	font-size: 220%;
	text-align: center;
	width: 33.33333%!important
}
li.fb a {
	background-color: #38579a
}
li.fb a, li.tw a {
	display: block;
	width: 100%!important;
	color: #fff!important
}
li.tw a {
	background-color: #50abf0
}
li.gp a {
	background-color: #df4a32
}
li.gp a, li.hb a {
	display: block;
	width: 100%!important;
	color: #fff!important
}
li.hb a {
	background-color: #008fde
}
li.po a {
	background-color: #ee4056
}
li.line a, li.po a {
	display: block;
	width: 100%!important;
	color: #fff!important
}
li.line a {
	background-color: #00c500
}
.top-box1 {
	background-image: url(img/tlj-5g.jpg)
}
.top-box1, .top-box2 {
	background-size: cover;
	height: 70vh;
	padding-top: 70px
}
.top-box2 {
	background-image: url(img/tlj-6g.jpg)
}
.pic-txt {
	font-weight: 700;
	background: #f9f9f9;
	padding: 18px;
	font-size: 120%;
	font-style: italic;
	line-height: 2em;
	color: #45abee;
	border: 1px dotted #45abee;
	font-family: serif
}
td:first-child {
    width: 20% !important;
}
a.top-bt-a {
    background-color: #3498d6;
    border-radius: 100px;
    box-shadow: 0px 0px 10px #606060;
    border: 2px solid #fff;
    padding: 0px 10px;
    width: 100%;
    display: block;
    text-align: center;
    color: #fff;
    height: 100px;
    line-height: 85px;
    margin-bottom: 10px;
    font-weight: bold;
}
.top-bt-a span {
    font-size: 65%;
    display: block;
    line-height: 0px;
    margin-top: -20px;
    color: #ffe500;
}