/*
Theme Name: habakiri-child
Theme URI: http://www.pamda.info/
Description: Habakiri の子テーマです
Author: Rintaro Kawano
Author URI: https://ssks.work
Version: 1.0.0
Template: habakiri
*/

/* 切り分け */
.when-sp{
    display: block;
    visibility: visible;
}

.when-pc{
    display: none;
    visibility: hidden;
}

@media (min-width: 992px) {
    .when-sp{
        display: none;
        visibility: hidden;
    }
    
    .when-pc{
        display: block;
        visibility: visible;

    }
}
/* 切り分け */

html, body {
	color: #000;
	font-size: 2.7vw;
	line-height: 1.6em;
	letter-spacing: 1px;
}
@media (min-width: 992px) {
html, body {
	color: #000;
	font-size: 14px;
	line-height: 1.6em;
	letter-spacing: 1px;
}	
}

.container, .container-fluid {
	padding-left: 40px;
	padding-right: 40px;
}

p {
	margin-bottom: 0 !important;
}

ul.lcp_catlist2 li {
	list-style:none;
	padding-top: 10px;
	padding-bottom: 10px;
}

ul.lcp_catlist2 li div {
	margin:-1.6em 0 0 8em;
}

.container-fluid {
	padding-left: 0;
	padding-right: 0;
}

.entry__title {
	display: none !important;
	visibility: hidden !important;
}

.site-branding__logo {
	width: 42px !important;
}

@media (min-width: 992px) {
.site-branding__logo {
	width: 64px !important;
}
}
.sub-page-contents {
	padding-top: 0 !important;
}

.first--visual {
	width: 100%;
	height: 100vh;
	position: relative;
	margin-top: -20px;
	background-color: #fff;
}
.key--sp {
	width: auto;
	height: 100vh;
	position: absolute;
	top: 0;
	right: -10vw;
	object-fit: cover;
}
@media (min-width: 992px) {
.first--visual {
	width: 100%;
	height: 100vh;
	position: relative;
	margin-top: -20px;
	background-color: #fff;
}
.key--pc {
	width: auto;
	height: 100vh;
	position: absolute;
	top: 0;
	right: -10vw;
}
}

.first--catch {
	position: absolute;
	top: 20vh;
	left: 0;
	width: 100vw;
	z-index: 3;
}
.bgwhite-txt {
	display: inline-block;
	padding: 5px;
	background-color: #fff;
	color: #000;
	font-size: 5vw;
	margin-bottom: 20px;
}
.bgwhite-txt-cta {
	display: inline-block;
	padding: 5px;
	background-color: #fff;
	color: #000;
	font-size: 4.5vw;
	margin-top: 20px;
}
@media (min-width: 992px) {
.first--catch {
	position: absolute;
	top: 20vh;
	left: 5vw;
	width: 60vw;
	z-index: 3;
}
	.bgwhite-txt {
		display: inline-block;
		padding: 5px;
		background-color: #fff;
		color: #000;
		font-size: 36px;
		letter-spacing: 1px;
		margin-bottom: 20px;
	}
	.bgwhite-txt-cta {
		display: inline-block;
		padding: 5px;
		background-color: #fff;
		color: #000;
		font-size: 27px;
		margin-top: 20px;
	}
}

.front--titles {
	font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
	color: #000;
	font-size: 6vw;
	position: relative;
	padding-bottom: 20px;
}
.front--titles::after {
	content: "";
    position: absolute;
    left: -50%;       /* 画面左端 */
    bottom: 0;     /* 下線位置 */
    height: 1px;   /* 線の太さ */
	width: 100%;
    background: #000; /* 線の色 */
}
@media (min-width: 992px) {
.front--titles {
	font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
	color: #000;
	font-size: 2.5vw;
	padding-bottom: 10px;
}
.front--titles::after {
	content: "";
    position: absolute;
    left: -80%;       /* 画面左端 */
    bottom: 0;     /* 下線位置 */
    height: 1px;   /* 線の太さ */
	width: 100%;
    background: #000; /* 線の色 */
}
}

.front-sub-titles {
	font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
	color: #000;
	font-size: 4vw;
}
.matter--txt {
	font-size: 4vw;
	margin-top: 10px;
}
@media (min-width: 992px) {
.front-sub-titles {
	font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
	color: #000;
	font-size: 1.5vw;
}
	.matter--txt {
		font-size: 1.5vw;
		margin-top: 10px;
	}
}

.about-explain {
	margin-top: 30px;
}

@media (min-width: 992px) {
.about-explain {
	margin-top: 30px;
}
}

.feature--grid {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 2fr;
	gap: 15px;
}

.service--container {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-top: 40px;
}

.service--container-reverse {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-top: 40px;
}

.service--container-reverse .service--img {
	order: 2;
}

.service--container-reverse .service--txt {
	order: 1;
}

.service--img img {
	box-shadow: 10px 10px 0 #97a5a6;
}
.service--txt {
	width: 100%;
	line-height: 1.3em;
}

.service--cont {
	font-size: 3vw;
	line-height: 1em;
}
@media (min-width: 992px) {
.service--container {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	margin-top: 90px;
}
.service--container-reverse {
	display: grid;
	align-items: flex-start;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	margin-top: 90px;
	grid-template-areas: "right left";
}
.service--container-reverse .service--img {
	order: 2;
}

.service--container-reverse .service--txt {
	order: 1;
}

.service--img img {
	box-shadow: 30px 30px 0 #97a5a6;
}
	
.service--txt {
	width: 80%;
	line-height: 1.8em;
}
	
.service--cont {
	font-size: 1vw;
	line-height: 1em;
}
}

.news-area {
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: #fff;
	margin-top: 80px;
	border-top: 1px solid #97a5a6;
	border-bottom: 1px solid #97a5a6;
}

@media (min-width: 992px) {
.news-area {
	padding-top: 120px;
	padding-bottom: 120px;
	background-color: #fff;
	margin-top: 140px;
	border-top: 1px solid #97a5a6;
	border-bottom: 1px solid #97a5a6;
}
}

.su-posts {
	margin-top: 40px;
}

.su-post {
	margin-bottom: 20px;
}

.su-post-comments-link {
	display: none;
	visibility: hidden;
}

.related-posts {
	display: none;
	visibility: hidden;
}

.commentarea {
	display: none;
	visibility: hidden;
}

.breadcrumbs {
	margin-top: 30px;
}

.flow--table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	margin-bottom: 30px;
}

.flow--table th {
	width: 25%;
	font-size: 3.2vw;
	background-color: #97a5a6;
	color: #fff;
	padding: 10px 0;
	text-align: center;
}

.flow--table td {
	width: 75%;
	font-size: 3.2vw;
	background-color: #fff;
	padding: 10px 10px 10px 15px;
	text-align: left;
}

@media (min-width: 992px) {
.flow--table th {
	width: 25%;
	font-size: 14px;
	background-color: #97a5a6;
	color: #fff;
	padding: 10px 0;
	text-align: center;
}

.flow--table td {
	width: 75%;
	font-size: 14px;
	background-color: #fff;
	padding: 10px 10px 10px 15px;
	text-align: left;
}
}

.btn-dark {
	display: inline-block;
	width: 60%;
	padding: 20px 0;
	border: 0;
	border-radius: 7px;
	background-color: #97a5a6;
	color: #fff !important;
	font-size: 3.2vw;
}

.btn-danger {
	border: 0;
	border-radius: 7px;
	background-color: #97a5a6;
	color: #fff !important;
	font-size: 3.2vw;
}
@media (min-width: 992px) {
.btn-dark {
	display: inline-block;
	width: 60%;
	padding: 20px 0;
	border: 0;
	border-radius: 7px;
	background-color: #97a5a6;
	color: #fff !important;
	font-size: 14px;
}

.btn-danger {
	border: 0;
	border-radius: 7px;
	background-color: #97a5a6;
	color: #fff !important;
	font-size: 14px;
}
}

.btn-danger:hover {
	background-color: #97a5a6;
}
.su-post-excerpt {
	display: none;
	visibility: hidden;
}
.su-post-excerpt p {
	display: none;
	visibility: hidden;
}