@charset "utf-8";
/* ===========================================================
 *
 * 高総建設(株)　HAKOYA スタイルシート
 * Last UpDate : 2026/07/15
 *
=========================================================== */

/* ----------------------------------------------------------
	style.css
---------------------------------------------------------- */

/* noto-sans-jp-regular - japanese */
@font-face{
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('noto-sans-jp-v55-japanese-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-700 - japanese */
@font-face{
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('noto-sans-jp-v55-japanese-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-900 - japanese */
@font-face{
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  src: url('noto-sans-jp-v55-japanese-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



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

html{ font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body{
	color: #333;
	background-color: #FEF6F3;
	font-family: 'Noto Sans JP',"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 1px;
	font-feature-settings: "palt";
	font-size: 16px;
	font-size: 1.6rem;
	margin: 0;
}

/*
@media all and (-ms-high-contrast: none){
  *::-ms-backdrop, .h2Wrap{ line-height: 1.7 !important; }

}
*/

/* a.anker{ display: block; padding-top: 100px; margin-top: -100px; } */

:root{
	--main-color: #cb2d2d;
	--contact-color: #81765c;
	--line-color: #05c756;
}

strong{ font-weight: bold !important; }



/* アニメーション */
.js-fadeIn{ visibility: hidden; opacity: 0; }
.js-fadeInUp{ transform: translateY(30px); visibility: hidden; opacity: 0; }
.js-fadeInLeft{ transform: translateX(-30px); visibility: hidden; opacity: 0; }
.js-fadeInRight{ transform: translateX(30px); visibility: hidden; opacity: 0; }

@-webkit-keyframes fadeInLeft{
from{ transform: translate3d(-2%, 0, 0); opacity: 0; }
to{ transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes fadeInLeft{
from{ transform: translate3d(-2%, 0, 0); opacity: 0; }
to{ transform: translate3d(0, 0, 0); opacity: 1; }
}
@-webkit-keyframes fadeInRight{
from{ transform: translate3d(2%, 0, 0); opacity: 0; }
to{ transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes fadeInRight{
from{ transform: translate3d(2%, 0, 0); opacity: 0; }
to{ transform: translate3d(0, 0, 0); opacity: 1; }
}
@-webkit-keyframes fadeInUp{
from{ transform: translate3d(0, 2%, 0); opacity: 0; }
to{ transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes fadeInUp{
from{ transform: translate3d(0, 2%, 0); opacity: 0; }
to{ transform: translate3d(0, 0, 0); opacity: 1; }
}
@-webkit-keyframes fadeIn{
from{ opacity: 0; }
to{ opacity: 1; }
}
@keyframes fadeIn{
from{ opacity: 0; }
to{ opacity: 1; }
}
@-webkit-keyframes fadeOut{
from{ opacity: 1; }
to{ opacity: 0; }
}
@keyframes fadeOut{
from{ opacity: 1; }
to{ opacity: 0; }
}
.fadeInLeft,
.fadeInRight,
.fadeInUp,
.fadeIn,
.fadeOut{
animation-duration: .5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
.fadeInLeft{ animation-name: fadeInLeft; }
.fadeInRight{ animation-name: fadeInRight; }
.fadeInUp{ animation-name: fadeInUp; }
.fadeIn{ animation-name: fadeIn; }
.fadeOut{ opacity: 1; animation-name: fadeOut; }
[data-target]{ cursor: pointer; }

html{ scrollbar-gutter: stable; font-size: 100%; }
button{ color: #000; }



/* ----------------------------------------------------------
 link
---------------------------------------------------------- */
a:link		{ color: #333; text-decoration: none; }
a:visited	{ color: #333; text-decoration: none; }
a:hover		{ color: var(--main-color); text-decoration: none; }
a:active	{ color: var(--main-color); text-decoration: none; }

a{ -ms-filter: "alpha( opacity=60 )"; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; }

/* ----------------------------------------------------------
 header
---------------------------------------------------------- */
header{ position: fixed; width: 100%; height: 90px; z-index: 99; background-color: #FDF5F2; }
.header-inner{ display: flex; align-items: center; padding-right: 300px; }
.header-logo{ max-width: 170px; margin: 10px 20px; }
.header-logo a:hover{ opacity: .6; }
.header-logo img{ width: 100%; height: auto; }

.gnavi{ flex-basis: 60%; margin-right: 0; margin-left: 15%; }
.gnavi a{ font-size: 1.6rem; font-weight: 700; text-align: center; letter-spacing: 1px; }
.gnavi a:hover{ background-color: #eee; }



#menu{}
#menu-btn{ display: none; }

#menu-content{ width: 100%; margin: 0; list-style-type: none; position: relative; display: flex; }
#menu-content > li{ flex: 1 0 auto; transition: all 0.2s; }
#menu-content > li > a{ display: block; line-height: 80px; font-size: 1.6rem; text-decoration: none; }
#menu-content > li > a > .blogicon-chevron-down{ margin-right: 5px; }
#menu-content > li > ul.second-content{ visibility: hidden; opacity: 0; position: absolute; padding-left: 0; list-style-type: none; width: 24%; box-shadow: 1px 1px 7px #bbb; }
#menu-content > li:hover > ul.second-content{ visibility: visible; opacity: 1; transition: opacity 0.2s, visibility 0.2s; background-color: #fff; }
#menu-content > li > ul.second-content > li{ border-bottom: 1px solid #ccc; }
#menu-content > li > ul.second-content > li > a{ position: relative;  display: block; line-height: 40px; font-size: 1.6rem; text-decoration: none;padding: 10px; }

#menu-content > li > ul.second-content > li > a:hover{ background: #eee; transition: all 0.2s; }
#menu-content > li > ul.second-content > li:hover > a,
#menu-content > li > ul.second-content > li > a.current{ background: #eee; }

@media screen and (max-width: 1800px){


#menu nav{ position: fixed; top: 0; left: -2000px; bottom: 0; width: 80%; background: var(--main-color); overflow-x: hidden; overflow-y: auto; transition: all 0.3s; z-index: 3; opacity: 0; padding: 25px 15px; }
#menu .open nav{ left: 0; opacity: 1; z-index: 99; }
#menu nav .inner ul{ list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
#menu nav .inner ul li{ position: relative; margin: 0; }
#menu nav .inner ul li a{ display: block; color: #fff; font-size: 1.6rem; font-weight: 700; text-decoration: none; transition-duration: 0.2s; flex-wrap: wrap; }
#menu nav .inner ul li a:hover{ background-color: var(--main-color); color: #fff; }
#menu nav .inner ul li a i{ margin-right: 10px; }
#menu nav .inner ul li ul li a{ display: block; color: #fff; font-size: 1.4rem; font-weight: 700; text-decoration: none; transition-duration: 0.2s; flex-wrap: wrap; padding: 10px;  }
.toggle_btn{ display: block; position: fixed; top: 15px; right: 15px; width: 60px; height: 60px; background: var(--main-color); border-radius: 5px; transition: all 0.3s;	cursor: pointer; z-index: 3;  }
.toggle_btn span{ position: absolute; left: 15px; width: 29px; height: 2px; border-radius: 2px; background-color: #fff; transition: all 0.3s; }
.toggle_btn span:nth-child(1){ top: 18px; }
.toggle_btn span:nth-child(2){ top: 28px; }
.toggle_btn span:nth-child(3){ /* bottom: 4px; */ opacity: 0; }
.open .toggle_btn span{ background-color: #fff; }
.open .toggle_btn span:nth-child(1){ transform: translateY(10px) rotate(-45deg); top: 19px; }
.open .toggle_btn span:nth-child(2){ opacity: 0; }
.open .toggle_btn span:nth-child(3){ transform: translateY(-10px) rotate(45deg); opacity: 1; bottom: 19px; }
	
.toggle_btn p{ position: absolute; left: 14px; bottom: 9px; font-size: 1rem !important; color: #fff; font-weight: 700; letter-spacing: 1px; margin-bottom: 0 !important; }
.open .toggle_btn p{ display: none; }

#mask{ display: none; transition: all 0.3s; }
.open #mask{
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 2;
cursor: pointer;
}
#menu-content > li{ width: 100%; margin-bottom: 15px; }
#menu-content > li:hover{ background: none; }
#menu-content > li > a{
/*  height: 100%; */
padding: 15px 10px;
font-weight: 700;
font-size: 1.6rem;
border-bottom: 1px solid #fff;
line-height: normal !important;
text-align: left;
}
#menu-content > li > ul.second-content{
visibility: visible;
opacity: 1;
width: 100%;
position: relative;
box-shadow: none;
margin-top: 5px;
margin-left: 20px;
}
#menu-content > li > ul.second-content > li > ul{
visibility: visible;
opacity: 1;
width: 100%;
position: relative;
box-shadow: none;
margin-left: 20px;
}
.open #menu-content > li > ul.second-content{ position: relative; display: flex; flex-wrap: wrap; padding-right: 20px; background: none; }
#menu-content > li > ul.second-content > li{ flex-basis: 100%; width: 100%; text-align-last: left; }
#menu-content > li > ul.kdp-second-content > li{ flex-basis: 100%; width: 100%; text-align-last: left; }
#menu-content > li > ul.second-content > li > a{
padding-left: 15px;
font-size: 1.4rem;
line-height: 1.3;
position: relative;
text-align: left;
}
#menu-content > li > ul.second-content > li > ul > li > a{
padding-left: 30px;
font-size: 1.4rem;
line-height: 1.3;
position: relative;
text-align: left;
}
#menu-content > li > ul.second-content > li > a:hover{ background: none; }
#menu-content > li > ul.second-content > li > a:before{
content: '';
width: 4px;
height: 4px;
border-top: solid 1px var(--main-color);
border-right: solid 1px var(--main-color);
position: absolute;
left: 0px;
top: 16px;
transform: rotate(45deg);
}
#menu-content > li > ul.second-content > li > ul > li > a:before{
content: '';
width: 4px;
height: 4px;
border-top: solid 1px var(--main-color);
position: absolute;
left: 15px;
top: 20px;
}
}

#menu nav .header_contact{ margin: 0; }


.header-tel{ flex-basis: 15%; text-align: right; font-size: 2.7rem; color: var(--contact-color); font-family: aptly, sans-serif; font-weight: 700; font-style: normal; }
.header-tel a{ color: var(--contact-color); }
.header-tel i{ margin-right: 10px; }
.header-tel span{ display: block; font-size: 1.2rem; font-family: 'Noto Sans JP'; }

.header-right{ position: absolute; top: 0; right: 0; width: 280px; }
.header__right_btn{}

.header-btn-contact,
.header-btn-line{ display: flex; }

.header-btn-line a,
.header-btn-contact a{ display: block; font-size: 1.8rem; font-weight: 700; width: 100%; text-align: center; color: #fff; border: 2px solid; height: 45px; line-height: 40px; }

.header-btn-line a:hover,
.header-btn-contact a:hover{ background-color: #fff; }

.header-btn-line a i,
.header-btn-contact a i{ margin-right: 10px; font-size: 2.2rem; vertical-align: middle; }

.header-btn-line{}
.header-btn-line a{ background-color: var(--line-color); border-color: var(--line-color); }
.header-btn-line a:hover{ color: var(--line-color); }

.header-btn-contact{}
.header-btn-contact a{ background-color: var(--contact-color); border-color: var(--contact-color); }
.header-btn-contact a:hover{ color: var(--contact-color); }


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

.footer-cta{ background-color: var(--contact-color); padding: 60px 0; }

.footer-cta-tit{ display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.footer-cta-tit-ico01{ width: 50px; height: 50px; border-radius: 100%; text-align: center; background-color: #fff; margin-right: 15px; }
.footer-cta-tit-ico01 i{ color: var(--contact-color); font-size: 2rem; line-height: 50px; }
.footer-cta-tit-tit01{ font-size: 6rem; color: #fff; font-family: haptic-script, sans-serif; font-weight: 700; font-style: normal; }
.footer-cta-tit-tit01 span{ font-size: 2.4rem; font-family: 'Noto Sans JP'; font-weight: 700; margin-left: 20px;  }


.footer-cta-sec{ display: flex; justify-content: center; align-items: center; gap: 20px; }
.footer-cta-sec-tel01{ color: #fff; font-size: 5rem; font-family: aptly, sans-serif; font-weight: 700; font-style: normal; letter-spacing: 5px; text-align: right; }
.footer-cta-sec-tel01 i{ margin-right: 10px; }
.footer-cta-sec-tel01 span{ display: block; font-size: 1.5rem; letter-spacing: 1px; font-family: 'Noto Sans JP'; }
.footer-cta-sec-btn01{ width: 320px; }
.footer-cta-sec-btn01 a{ display: block; color: var(--contact-color); font-size: 2rem; font-weight: 700; text-align: center; background-color: #fff; padding: 15px; border: 2px solid #fff; border-radius: 10px; }
.footer-cta-sec-btn-line01{}
.footer-cta-sec-btn-line01 a i{ margin-right: 10px; font-size: 2.4rem; vertical-align: middle; }
.footer-cta-sec-btn-line01 a{ color: var(--line-color); }

.footer-cta-sec-btn01 a:hover{ color: #fff; background-color: var(--contact-color); }


footer{ padding: 80px 0 0 0; }

.footer-logo{ margin-bottom: 10px; }
.footer-logo img{ max-width: 160px; height: auto; margin: 0 auto; }
.footer-logo a:hover{ opacity: .6; }
.footer-unei{ font-size: 1.3rem; text-align: center; margin-bottom: 20px; }
.footer-add{ font-size: 1.4rem; text-align: center; margin-bottom: 20px; }
.footer-nav{}
.footer-nav-list{ display: flex; justify-content: center; gap: 20px; }
.footer-nav-item{}
.footer-nav-item a{ font-size: 1.5rem; font-weight: 700; }

.footer-copyright{ margin: 40px 0 0 0; padding: 0 0 20px 0; color: #ccc; font-size: 1.2rem; text-align: center; }



/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */
.h1_wrap{ width: 100%; padding-top: 90px; margin-bottom: 100px; }
.h1_bg{ position: relative; width: 100%; height: auto; }
.h1_bg img{ width: 100%; height: auto; }

.h1_wrap_sec{ position: absolute; left: 0; bottom: -40px; width: 50%; }
.h1_01{ font-size: 4rem; color: #fff; letter-spacing: 2px; font-family: haptic-script, sans-serif; font-weight: 700; font-style: normal; margin: 0 0 20px 10%; }
.h1_wrap_sec h1{ font-size: 6.5rem; color: #fff; font-weight: 700; letter-spacing: 5px; background-color: var(--main-color); line-height: 1; padding: 15px 15px 15px 10%; }


.page-sec h2{ font-size: 4.2rem; font-weight: 700; letter-spacing: 4px; line-height: 1.5; margin-bottom: 40px; }


/* ぱんくず */
.breadcrumbs_sec{ margin: 60px 0 0 5%; letter-spacing: 2px; } 
.breadcrumbs_sec > span{ display: inline-block; position: relative; color: #333; font-size: 1.7rem; }
.breadcrumbs_sec > span span{ margin-left: 25px; }
.breadcrumbs_sec > span a span{ margin-left: 0; }
.breadcrumbs_sec > span:first-child span{ margin-left: 0; }
.breadcrumbs_sec > span br{ display: none; }
.breadcrumbs_sec > span:before{ content: "/"; display: block; position: absolute; top: 0; left: 10px; color: #333; font-size: 1.5rem; }
.breadcrumbs_sec span:first-child:before{ content: ""; margin-left: 0; }
.breadcrumbs_sec > span a{ color: #333; font-size: 1.5rem; margin: 0 0 0 30px; }
.breadcrumbs_sec > span:first-child a{ margin: 0 0 0 0; }
.breadcrumbs_sec span a:hover{ opacity: 0.6; }




/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.top-img{ position: relative; margin-bottom: 40px; padding-top: 90px; }
.top-img img{ width: 100%; height: auto; }
.top-img-img01{}
.top-img-txt{ position: absolute; top: 30%; left: 10%; color: #fff; z-index: 2; }
.top-img-tit01{ font-size: 4rem; font-family: haptic-script, sans-serif; font-weight: 700; font-style: normal; }
.top-img-txt01{ font-size: 7rem; font-weight: 900; letter-spacing: 4px; }
.top-img-txt02{ font-size: 2.4rem; font-weight: 500; }


/* トップ：コンセプト */
.top-concept{ position: relative; margin-bottom: 60px; }
.top-concept-txt{ display: flex; }
.top-concept-sec{ width: 40%; margin-left: 10%; }
.top-concept-tit{ display: flex; align-items: center;  margin-bottom: 20px; }
.top-concept-tit-ico01{ width: 50px; height: 50px; border-radius: 100%; text-align: center; background-color: var(--main-color); margin-right: 15px; }
.top-concept-tit-ico01 i{ color: #fff; font-size: 2rem; line-height: 50px; }
.top-concept-tit-tit01{ font-size: 6rem; color: var(--main-color); font-family: haptic-script, sans-serif; font-weight: 700; font-style: normal; }
.top-concept-tit-tit01 span{ font-size: 2.4rem; font-family: 'Noto Sans JP'; font-weight: 700; margin-left: 20px;  }
.top-concept-tit01{ font-size: 4.2rem; font-weight: 700; line-height: 1.5; margin-bottom: 20px; }

.top-concept-txt{ font-size: 2.5rem; line-height: 1.7; }
.top-concept-img{ position: absolute; right: 0; top: 0; }



/* トップ：利用シーン */
.top-scene{ width: 1500px; margin: 0 auto 60px auto; }
.top-scene-list{ display: flex; justify-content: space-between; }
.top-scene-item{ flex-basis: 23%; list-style: none; }
.top-scene-item-img{  }
.top-scene-item-img img{ width: 100%; height: auto; border-radius: 10px; margin-bottom: 10px; }
.top-scene-item-tit{ font-size: 2.2rem; font-weight: 700; }
.top-scene-item-tit i{ color: #f3b13d; margin-right: 10px; }


/* トップ：導入事例 */
.top-case{ background-color: #fff; padding: 40px 0; }
.top-case-sec{ width: 1500px; margin: 0 auto; }
.top-case-list{ display: flex; justify-content: flex-start;
 gap: 50px; margin-bottom: 40px; }
.top-case-item{ flex-basis: 31%; list-style: none; }
.top-case-item img{ width: 100%; height: auto; margin-bottom: 10px; }
.top-case-item-tit01{ font-size: 2rem; font-weight: 700; }

.top-case-btn{ width: 380px; margin: 0 auto;  }
.top-case-btn a{ display: block; font-size: 1.8rem; font-weight: 700; color: var(--main-color); text-align: center; background-color: #fff; padding: 15px; border: 2px solid var(--main-color); border-radius: 10px; letter-spacing: 2px; }
.top-case-btn a:hover{ background-color: var(--main-color); color: #fff; }


/* トップ：導入の流れ */
.top-flow{ padding: 60px 0; margin-bottom: 60px; }
.top-flow-sec{ width: 1500px; margin: 0 auto; }
.top-flow-list{ display: flex; justify-content: space-between; margin-bottom: 40px; }
.top-flow-item{ text-align: center; }
.top-flow-item-img01{ margin-bottom: 20px; }
.top-flow-item-img01 img{ width: 100%; height: auto; }
.top-flow-item-tit01{ font-size: 2.2rem; font-weight: 700; letter-spacing: 2px; }



/* トップ：FAQ */
.top-faq{ margin-bottom: 60px; }
.top-faq-sec{ width: 1500px; margin: 0 auto; }
.top_faq_list{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.top_faq_item{ flex-basis: 48%; margin-bottom: 20px; }


.faq_accordion{	margin-bottom: 7px;	border-radius: 10px; }

.faq_accordion summary{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 20px 20px 25px 45px;
	color: #333;
	font-size: 2rem;
	background-color: #fff;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.3;
}

/* デフォルトマーカー非表示 */
.faq_accordion summary::-webkit-details-marker{	display: none; }

/* ▼矢印アイコン（after） */
.faq_accordion summary::after{
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-bottom: 3px solid var(--main-color);
	border-right: 3px solid var(--main-color);
	transform: rotate(45deg);
	transition: transform .3s;
	align-self: center; /* ←縦中央揃え */
}

/* ▼Qマーク（before） */
.faq_accordion summary::before{
	content: "Q.";
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 20px;
	top: 45%;
	transform: translateY(-50%); /* ←縦中央揃え */
	width: 20px; /* アイコン領域確保 */
	height: 20px;
	font-size: 2.2rem;
	color: var(--main-color);
	font-weight: 700;
}

.faq_accordion[open] summary::after{ transform: rotate(225deg); }

.faq_accordion p{
	transform: translateY(-10px);
	opacity: 0;
	margin: 0;
	padding: 20px;
	transition: transform .5s, opacity .5s;
	background-color: #fdeaeb;
	border-radius: 0 0 10px 10px;
}

.faq_accordion[open] p{	transform: none; opacity: 1; margin: 0; }


/* トップ：リンクボタン */

.top_business{ margin-bottom: 60px; }
.top_business_list{ display: flex; flex-wrap: wrap; }
.top_business_item{ position: relative; overflow: hidden; flex-basis: 33%; }
.top_business_item:after{ position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; transition: all .3s ease-out; }
.top_business_item a{ display: block; position: relative; z-index: 1; height: 100%; color: #fff;  padding: 100px 60px;	}




.top_business_item_corporate:after{ background: url("/info/wp-content/uploads/btn_corporate00.jpg"); background-size: cover; }
.top_business_item_legal:after{ background: url("/info/wp-content/uploads/btn_legal00.jpg"); background-size: cover; }
.top_business_item_price:after{ background: url("/info/wp-content/uploads/btn_price00.jpg"); background-size: cover; }

.top_business_item_corporate:hover:after,
.top_business_item_legal:hover:after,
.top_business_item_price:hover:after{ opacity: .8; transform: scale(1.1); }

.top_business_item_corporate:before,
.top_business_item_legal:before,
.top_business_item_price:before{ z-index: 1; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; ; }

.top_business_item:before{ transition: all .3s ease-out; }

.top_business_item:hover:before{ background: rgba(0,0,0,.6); mix-blend-mode: overlay; }

.top_business_item{ font-size: 4.5rem; font-weight: 700; letter-spacing: 2px; text-align: center; }
.top_business_item:nth-child(2){ border-left: 1px solid #fff; border-right: 1px solid #fff; }
.top_business_item span{ display: block; font-size: 3rem; font-family: haptic-script, sans-serif; font-weight: 700; font-style: normal; }
.top_business_item p{ width: 260px; font-size: 1.8rem; color: var(--main-color); background-color: #fff; padding: 10px; border-radius: 10px; text-align: center; font-weight: 700; letter-spacing: 2px; margin: 20px auto 0 auto; }



/* トップ：お知らせ */
.top-news{ background-color: #fff; padding: 60px 0; }
.top-news-sec{ width: 850px; margin: 0 auto; }

.top-news-list{ margin-bottom: 30px; }
.top-news-item{ position: relative; border-bottom: 1px solid #ccc; padding: 20px 0; }
.top-news-date{ font-size: 1.5rem; padding-left: 20px; margin-right: 20px; }
.top-news-date:before{ position: absolute; left: 0; top: 31px; content: ""; display: block; width: 10px; height: 10px; border-radius: 100%; background-color: var(--main-color); }

.top_news_cat{ display:inline-block; min-width: 110px; padding: 6px 12px; color: #fff; font-size: 1.2rem; font-weight: 700; text-align: center; line-height: 1; margin-right: 20px; }
.top_news_cat.cat-news-news{ background: #4c6cb3; }
.top_news_cat.cat-news-jireitsuika{ background: #10af51; }
.top_news_cat.cat-news-important{ background: #f66d4d; }



/* トップ：Instagram */
.top-instagram{ padding: 60px 0; }
.top-instagram .top-concept-tit{ justify-content: center; }
.instagram-sec{ width: 90%; max-width: 1000px; margin: 0 auto; }



.contents{ width: 90%; max-width: 1400px; margin: 0 auto; padding: 0 0 100px 0; }

.page-sec p{ font-size: 2.5rem; line-height: 1.8; letter-spacing: 2px; margin-bottom: 20px; }


/* HAKOYAの強み */
.advantage-sec-tit01{ display: inline-block; background-color: var(--main-color); font-size: 2.7rem; color: #fff; font-weight: 700; letter-spacing: 3px; padding: 10px 20px; border-radius: 40px; line-height: 1; margin-bottom: 20px; }


/* ブロックエディタ */
.wp-block-media-text>.wp-block-media-text__content {
  padding: 0 4% !important;
}

/* 会社概要 */
.map_sec{ width: 1000px; max-width: 90%; margin: 0 auto; position: relative; padding-top: 40%; height: 0; }
.map_sec iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* ----------------------------------------------------------
 SP CSS
---------------------------------------------------------- */
@media screen and (max-width: 520px){
img,video{
  max-width: 100%;
  height: auto;
}

/* フォントサイズ10px=62.5% */
html{ font-size: 60%; }

/* 基本のフォントサイズ */
body{ font-size: 1.8rem; height: auto !important; height: 100%; padding-top: 0; }

/* 非表示用 */
.noneSP		{ display: none !important; }


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

header{ height: 70px; }
.header-inner{ height: 70px; padding-right: 70px; }
.header-logo{ max-width: 120px; margin: 5px 20px; }

.gnavi{ flex-basis: 0%; margin-right: 0; margin-left: 0; }
.gnavi a{ font-size: 1.6rem; text-align: center; letter-spacing: 1px; }
.gnavi a:hover{ background-color: #eee; }


.header-tel{ display: none; }
.header-right{ display: none; }


.toggle_btn{ top: 10px; right: 15px; width: 50px; height: 50px; }
.toggle_btn span{ position: absolute; left: 11px; width: 29px; height: 2px; border-radius: 2px; background-color: #fff; transition: all 0.3s; }
.toggle_btn span:nth-child(1){ top: 14px; }
.toggle_btn span:nth-child(2){ top: 22px; }
.toggle_btn span:nth-child(3){ /* bottom: 4px; */ opacity: 0; }
.open .toggle_btn span{ background-color: #fff; }
.open .toggle_btn span:nth-child(1){ transform: translateY(10px) rotate(-45deg); top: 15px; }
.open .toggle_btn span:nth-child(2){ opacity: 0; }
.open .toggle_btn span:nth-child(3){ transform: translateY(-10px) rotate(45deg); opacity: 1; bottom: 13px; }
	
.toggle_btn p{ position: absolute; left: 11px; bottom: 9px; font-size: 1rem !important; color: #fff; font-weight: 700; letter-spacing: 1px !important; margin-bottom: 0 !important; }

.open .toggle_btn p{ display: none; }



/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
/* ページ下部 固定メニュー */
.btm_menu{ position: fixed; bottom: -50px; width: 100%; border-top: 1px solid #fff; z-index: 99; }
.btm_menu li{ float: left; width: 50%; }
.btm_menu li a{ border-right: 1px solid #fff; }
.btm_menu li:last-child a{ border-right: 0px solid #fff; }
.btm_menu li a{ display: block; height: 50px; text-align: center; font-size: 1.6rem; font-weight: 700; padding: 15px 5px 5px; background-color: var(--contact-color); color: #fff; }
.btm_menu li a i{ font-size: 1.8rem; margin-right: 10px; vertical-align: middle; }
.btm_menu li a:hover{ background-color: #333; color: #fff; }
.btm_menu ul:after{ content: ''; clear: both; display: block; }
.btm_menu li.btm_menu_item_line a{ background-color: var(--line-color); }
.btm_menu li.btm_menu_item_line a:hover{  }


.footer-cta{ background-color: var(--contact-color); padding: 20px 0 40px 0; }

.footer-cta-tit{ display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.footer-cta-tit-ico01{ width: 50px; height: 50px; border-radius: 100%; text-align: center; background-color: #fff; margin-right: 15px; }
.footer-cta-tit-ico01 i{ color: var(--contact-color); font-size: 2rem; line-height: 50px; }
.footer-cta-tit-tit01{ font-size: 5rem; line-height: 1; }
.footer-cta-tit-tit01 span{ display: block; font-size: 1.8rem; margin-left: 0px;  }


.footer-cta-sec{ flex-wrap: wrap; justify-content: center; gap: 20px; }
.footer-cta-sec-tel01{ flex-basis: 100%; font-size: 4rem; text-align: center; }
.footer-cta-sec-tel01 span{ font-size: 1.5rem; }
.footer-cta-sec-btn01{ width: 320px; }
.footer-cta-sec-btn01 a{ display: block; color: var(--contact-color); font-size: 2rem; font-weight: 700; text-align: center; background-color: #fff; padding: 15px; border: 2px solid #fff; border-radius: 10px; }
.footer-cta-sec-btn-line01{}
.footer-cta-sec-btn-line01 a i{ margin-right: 10px; font-size: 2.4rem; vertical-align: middle; }
.footer-cta-sec-btn-line01 a{ color: var(--line-color); }

.footer-cta-sec-btn01 a:hover{ color: #fff; background-color: var(--contact-color); }


footer{ padding: 80px 0 60px 0; }

.footer-logo{ margin-bottom: 10px; }
.footer-logo img{ max-width: 160px; height: auto; margin: 0 auto; }
.footer-logo a:hover{ opacity: .6; }
.footer-unei{ font-size: 1.3rem; text-align: center; margin-bottom: 20px; }
.footer-add{ font-size: 1.4rem; text-align: center; margin-bottom: 20px; }
.footer-nav{ display: none; }

.footer-copyright{ margin: 40px 0 0 0; padding: 0 0 20px 0; color: #ccc; font-size: 1.2rem; text-align: center; }


/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */
.h1_wrap{ width: 100%; padding-top: 70px; margin-bottom: 30px; }
.h1_bg{ position: relative; width: 100%; height: auto; }
.h1_bg img{ width: 100%; height: auto; }

.h1_wrap_sec{ position: initial; left: 0; bottom: -40px; width: 100%; }
.h1_01{ font-size: 2rem; color: var(--main-color); letter-spacing: 2px; margin: 5px 0; text-align: center; }
.h1_wrap_sec h1{ font-size: 3rem; letter-spacing: 5px; padding: 10px; text-align: center; }


.page-sec h2{ font-size: 2rem; font-weight: 700; letter-spacing: 4px; line-height: 1.5; margin-bottom: 20px; }


/* ぱんくず */
.breadcrumbs_sec{ margin: 0 auto; letter-spacing: 2px; text-align: center; } 
.breadcrumbs_sec > span{ display: inline-block; position: relative; color: #333; font-size: 1.1rem; }
.breadcrumbs_sec > span span{ margin-left: 25px; }
.breadcrumbs_sec > span a span{ margin-left: 0; }
.breadcrumbs_sec > span:first-child span{ margin-left: 0; }
.breadcrumbs_sec > span br{ display: none; }
.breadcrumbs_sec > span:before{ content: "/"; display: block; position: absolute; top: 0; left: 10px; color: #333; font-size: 1.3rem; }
.breadcrumbs_sec span:first-child:before{ content: ""; margin-left: 0; }
.breadcrumbs_sec > span a{ color: #333; font-size: 1.1rem; margin: 0 0 0 30px; }
.breadcrumbs_sec > span:first-child a{ margin: 0 0 0 0; }
.breadcrumbs_sec span a:hover{ opacity: 0.6; }


/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.top-img{ position: relative; margin-bottom: 40px; padding-top: 70px; }
.top-img img{ width: 100%; height: auto; }
.top-img-img01{}
.top-img-txt{ top: auto; bottom: 5%; left: 5%; }
.top-img-tit01{ display: none; font-size: 2rem;  }
.top-img-txt01{ font-size: 3.5rem; letter-spacing: 4px; line-height: 1.2; }
.top-img-txt02{ font-size: 1.5rem; }


/* トップ：コンセプト */
.top-concept{ position: relative; margin-bottom: 60px; }
.top-concept-txt{ flex-wrap: wrap; }
.top-concept-sec{ width: 90%; margin: 0 auto; }
.top-concept-tit{ display: flex; align-items: center;  margin-bottom: 20px; }
.top-concept-tit-ico01{ width: 40px; height: 40px; border-radius: 100%; text-align: center; background-color: var(--main-color); margin-right: 15px; }
.top-concept-tit-ico01 i{ color: #fff; font-size: 2rem; line-height: 40px; }
.top-concept-tit-tit01{ font-size: 5rem; line-height: 1.2; }
.top-concept-tit-tit01 span{ display: block; font-size: 1.8rem; margin-left: 0px; }
.top-concept-tit01{ font-size: 2.8rem; line-height: 1.5; margin-bottom: 20px; }

.top-concept-txt{ font-size: 2rem; line-height: 1.7; margin-bottom: 20px; }
.top-concept-img{ position: initial; right: 0; top: 0; margin: 0 auto;  }
.top-concept-img img{ width: 100%; height: auto; }



/* トップ：利用シーン */
.top-scene{ width: 90%; margin: 0 auto 40px auto; }
.top-scene-list{ flex-wrap: wrap; }
.top-scene-item{ flex-basis: 48%; list-style: none; margin-bottom: 30px; }
.top-scene-item-img{  }
.top-scene-item-img img{ width: 100%; height: auto; border-radius: 10px; margin-bottom: 10px; }
.top-scene-item-tit{ font-size: 1.8rem; font-weight: 700; }
.top-scene-item-tit i{ color: #f3b13d; margin-right: 5px; }


/* トップ：導入事例 */
.top-case{ background-color: #fff; padding: 40px 0; }
.top-case-sec{ width: 90%; margin: 0 auto; }
.top-case-list{ flex-wrap: wrap; margin-bottom: 40px; }
.top-case-item{ flex-basis: 100%; list-style: none; margin-bottom: 30px; }
.top-case-item img{ width: 100%; height: auto; margin-bottom: 10px; }
.top-case-item-tit01{ font-size: 2rem; font-weight: 700; }

.top-case-btn{ width: 300px; margin: 0 auto;  }
.top-case-btn a{ display: block; font-size: 1.8rem; font-weight: 700; color: var(--main-color); text-align: center; background-color: #fff; padding: 15px; border: 2px solid var(--main-color); border-radius: 10px; letter-spacing: 2px; }
.top-case-btn a:hover{ background-color: var(--main-color); color: #fff; }


/* トップ：導入の流れ */
.top-flow{ margin-bottom: 60px; }
.top-flow-sec{ width: 90%; margin: 0 auto; }
.top-flow-list{ flex-wrap: wrap; margin-bottom: 30px; gap: 10px; }
.top-flow-item{ flex-basis: 45%; text-align: center; margin-bottom: 30px; }
.top-flow-item-img01{ margin-bottom: 20px; }
.top-flow-item-img01 img{ width: 100%; height: auto; }
.top-flow-item-tit01{ font-size: 1.9rem; font-weight: 700; letter-spacing: 2px; }



/* トップ：FAQ */
.top-faq{ margin-bottom: 60px; }
.top-faq-sec{ width: 90%; margin: 0 auto; }
.top_faq_list{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.top_faq_item{ flex-basis: 100%; margin-bottom: 20px; }


.faq_accordion{	margin-bottom: 7px;	border-radius: 10px; }

.faq_accordion summary{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 20px 20px 25px 45px;
	color: #333;
	font-size: 2rem;
	background-color: #fff;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.3;
}

/* デフォルトマーカー非表示 */
.faq_accordion summary::-webkit-details-marker{	display: none; }

/* ▼矢印アイコン（after） */
.faq_accordion summary::after{
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-bottom: 3px solid var(--main-color);
	border-right: 3px solid var(--main-color);
	transform: rotate(45deg);
	transition: transform .3s;
	align-self: center; /* ←縦中央揃え */
}

/* ▼Qマーク（before） */
.faq_accordion summary::before{
	content: "Q.";
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 15px;
	top: 45%;
	transform: translateY(-50%); /* ←縦中央揃え */
	width: 20px; /* アイコン領域確保 */
	height: 20px;
	font-size: 2.2rem;
	color: var(--main-color);
	font-weight: 700;
}

.faq_accordion[open] summary::after{ transform: rotate(225deg); }

.faq_accordion p{
	transform: translateY(-10px);
	opacity: 0;
	margin: 0;
	padding: 20px;
	transition: transform .5s, opacity .5s;
	background-color: #fdeaeb;
	border-radius: 0 0 10px 10px;
}

.faq_accordion[open] p{	transform: none; opacity: 1; margin: 0; }


/* トップ：リンクボタン */

.top_business{ margin-bottom: 60px; }
.top_business_list{ display: flex; flex-wrap: wrap; }
.top_business_item{ position: relative; overflow: hidden; flex-basis: 100%; border-bottom: 2px solid #fff; }
.top_business_item:after{ position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; transition: all .3s ease-out; }
.top_business_item a{ display: block; position: relative; z-index: 1; height: 100%; color: #fff;  padding: 60px 15px; }

.top_business_item{ font-size: 3.5rem; }
.top_business_item span{ display: block; font-size: 2rem; }
.top_business_item p{ width: 230px; font-size: 1.8rem; color: var(--main-color); background-color: #fff; padding: 10px; border-radius: 10px; text-align: center; font-weight: 700; letter-spacing: 2px; margin: 20px auto 0 auto; }



/* トップ：お知らせ */
.top-news{ background-color: #fff; padding: 60px 0; }
.top-news-sec{ width: 90%; margin: 0 auto; }

.top-news-list{ margin-bottom: 30px; }
.top-news-item{ position: relative; border-bottom: 1px solid #ccc; padding: 20px 0; flex-wrap: wrap; }
.top-news-date{ font-size: 1.5rem; padding-left: 20px; margin-right: 20px; }
.top-news-date:before{ position: absolute; left: 0; top: 32px !important; content: ""; display: block; width: 10px; height: 10px; border-radius: 100%; background-color: var(--main-color); }

.top_news_cat{ display:inline-block; min-width: 110px; padding: 6px 12px; color: #fff; font-size: 1.2rem; font-weight: 700; text-align: center; line-height: 1; margin-right: 20px; }
.top_news_cat.cat-news-news{ background: #4c6cb3; }
.top_news_cat.cat-news-jireitsuika{ background: #10af51; }
.top_news_cat.cat-news-important{ background: #f66d4d; }

.top-news-item a{ flex-basis: 100%; display: block; margin-top: 10px; }

/* トップ：Instagram */
.top-instagram{ padding: 60px 0; }
.top-instagram .top-concept-tit{ justify-content: center; }

.contents{ width: 90%; max-width: 1400px; margin: 0 auto; padding: 0 0 100px 0; }

.page-sec p{ font-size: 1.8rem; line-height: 1.8; letter-spacing: 2px; margin-bottom: 20px; }


/* HAKOYAの強み */
.advantage-sec-tit01{ display: inline-block; font-size: 2rem; color: #fff; font-weight: 700; letter-spacing: 3px; padding: 5px 15px; line-height: 1; margin-bottom: 20px; margin-top: 20px; }


/* ブロックエディタ */
.wp-block-media-text>.wp-block-media-text__content {
  padding: 0 4% !important;
}





}
/* ----------------------------------------------------------
 SP CSS END
---------------------------------------------------------- */

/* ----------------------------------------------------------
 TAB CSS
---------------------------------------------------------- */
@media screen and (min-width: 521px) and (max-width: 1023px){

img,video{
  max-width: 100%;
  height: auto;
}

/* フォントサイズ10px=62.5% */
html{ font-size: 50%; }

/* 基本のフォントサイズ */
body{ font-size: 1.8rem; padding-top: 0; }

/* 非表示用 */
.noneTAB		{ display: none !important; }

/* ----------------------------------------------------------
 header
---------------------------------------------------------- */
header{ height: 70px; }
.header-inner{ height: 70px; padding-right: 70px; }
.header-logo{ max-width: 120px; margin: 5px 20px; }

.gnavi{ flex-basis: 0%; margin-right: 0; margin-left: 0; }
.gnavi a{ font-size: 1.6rem; text-align: center; letter-spacing: 1px; }
.gnavi a:hover{ background-color: #eee; }


.header-tel{ display: none; }
.header-right{ display: none; }


.toggle_btn{ top: 10px; right: 15px; width: 50px; height: 50px; }
.toggle_btn span{ position: absolute; left: 11px; width: 29px; height: 2px; border-radius: 2px; background-color: #fff; transition: all 0.3s; }
.toggle_btn span:nth-child(1){ top: 14px; }
.toggle_btn span:nth-child(2){ top: 22px; }
.toggle_btn span:nth-child(3){ /* bottom: 4px; */ opacity: 0; }
.open .toggle_btn span{ background-color: #fff; }
.open .toggle_btn span:nth-child(1){ transform: translateY(10px) rotate(-45deg); top: 15px; }
.open .toggle_btn span:nth-child(2){ opacity: 0; }
.open .toggle_btn span:nth-child(3){ transform: translateY(-10px) rotate(45deg); opacity: 1; bottom: 13px; }
	
.toggle_btn p{ position: absolute; left: 11px; bottom: 9px; font-size: 1rem !important; color: #fff; font-weight: 700; letter-spacing: 1px !important; margin-bottom: 0 !important; }

.open .toggle_btn p{ display: none; }

/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
/* ページ下部 固定メニュー */
.btm_menu{ position: fixed; bottom: -50px; width: 100%; border-top: 1px solid #fff; z-index: 99; }
.btm_menu li{ float: left; width: 50%; }
.btm_menu li a{ border-right: 1px solid #fff; }
.btm_menu li:last-child a{ border-right: 0px solid #fff; }
.btm_menu li a{ display: block; height: 50px; text-align: center; font-size: 1.6rem; font-weight: 700; padding: 15px 5px 5px; background-color: var(--contact-color); color: #fff; }
.btm_menu li a i{ font-size: 1.8rem; margin-right: 10px; vertical-align: middle; }
.btm_menu li a:hover{ background-color: #333; color: #fff; }
.btm_menu ul:after{ content: ''; clear: both; display: block; }
.btm_menu li.btm_menu_item_line a{ background-color: var(--line-color); }
.btm_menu li.btm_menu_item_line a:hover{  }


.footer-cta{ background-color: var(--contact-color); padding: 20px 0 40px 0; }

.footer-cta-tit{ display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.footer-cta-tit-ico01{ width: 50px; height: 50px; border-radius: 100%; text-align: center; background-color: #fff; margin-right: 15px; }
.footer-cta-tit-ico01 i{ color: var(--contact-color); font-size: 2rem; line-height: 50px; }
.footer-cta-tit-tit01{ font-size: 6rem; color: #fff; font-family: haptic-script, sans-serif; font-weight: 700; font-style: normal; }
.footer-cta-tit-tit01 span{ font-size: 2.4rem; font-family: 'Noto Sans JP'; font-weight: 700; margin-left: 20px;  }


.footer-cta-sec{ flex-wrap: wrap; justify-content: center; gap: 20px; }
.footer-cta-sec-tel01{ flex-basis: 100%; font-size: 5rem; text-align: center; }
.footer-cta-sec-tel01 span{ font-size: 1.5rem; }
.footer-cta-sec-btn01{ width: 320px; }
.footer-cta-sec-btn01 a{ display: block; color: var(--contact-color); font-size: 2rem; font-weight: 700; text-align: center; background-color: #fff; padding: 15px; border: 2px solid #fff; border-radius: 10px; }
.footer-cta-sec-btn-line01{}
.footer-cta-sec-btn-line01 a i{ margin-right: 10px; font-size: 2.4rem; vertical-align: middle; }
.footer-cta-sec-btn-line01 a{ color: var(--line-color); }

.footer-cta-sec-btn01 a:hover{ color: #fff; background-color: var(--contact-color); }


footer{ padding: 80px 0 60px 0; }

.footer-logo{ margin-bottom: 10px; }
.footer-logo img{ max-width: 160px; height: auto; margin: 0 auto; }
.footer-logo a:hover{ opacity: .6; }
.footer-unei{ font-size: 1.3rem; text-align: center; margin-bottom: 20px; }
.footer-add{ font-size: 1.4rem; text-align: center; margin-bottom: 20px; }
.footer-nav{ display: none; }

.footer-copyright{ margin: 40px 0 0 0; padding: 0 0 20px 0; color: #ccc; font-size: 1.2rem; text-align: center; }


/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */
.h1_wrap{ width: 100%; padding-top: 70px; margin-bottom: 30px; }
.h1_bg{ position: relative; width: 100%; height: auto; }
.h1_bg img{ width: 100%; height: auto; }

.h1_wrap_sec{ position: initial; left: 0; bottom: -40px; width: 100%; }
.h1_01{ font-size: 2rem; color: var(--main-color); letter-spacing: 2px; margin: 10px 0; text-align: center; }
.h1_wrap_sec h1{ font-size: 3rem; letter-spacing: 5px; padding: 10px; text-align: center; }


.page-sec h2{ font-size: 3rem; font-weight: 700; letter-spacing: 4px; line-height: 1.5; margin-bottom: 20px; }


/* ぱんくず */
.breadcrumbs_sec{ margin: 20px auto 0 auto; letter-spacing: 2px; text-align: center; } 
.breadcrumbs_sec > span{ display: inline-block; position: relative; color: #333; font-size: 1.3rem; }
.breadcrumbs_sec > span span{ margin-left: 25px; }
.breadcrumbs_sec > span a span{ margin-left: 0; }
.breadcrumbs_sec > span:first-child span{ margin-left: 0; }
.breadcrumbs_sec > span br{ display: none; }
.breadcrumbs_sec > span:before{ content: "/"; display: block; position: absolute; top: 0; left: 10px; color: #333; font-size: 1.5rem; }
.breadcrumbs_sec span:first-child:before{ content: ""; margin-left: 0; }
.breadcrumbs_sec > span a{ color: #333; font-size: 1.3rem; margin: 0 0 0 30px; }
.breadcrumbs_sec > span:first-child a{ margin: 0 0 0 0; }
.breadcrumbs_sec span a:hover{ opacity: 0.6; }


/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.top-img{ position: relative; margin-bottom: 40px; padding-top: 70px; }
.top-img img{ width: 100%; height: auto; }
.top-img-img01{}
.top-img-txt{ top: 30%; left: 5%; }
.top-img-tit01{ font-size: 3rem;  }
.top-img-txt01{ font-size: 6rem; letter-spacing: 4px; }
.top-img-txt02{ font-size: 2rem; }


/* トップ：コンセプト */
.top-concept{ position: relative; margin-bottom: 60px; }
.top-concept-txt{ flex-wrap: wrap; }
.top-concept-sec{ width: 90%; margin: 0 auto; }
.top-concept-tit{ display: flex; align-items: center;  margin-bottom: 20px; }
.top-concept-tit-ico01{ width: 50px; height: 50px; border-radius: 100%; text-align: center; background-color: var(--main-color); margin-right: 15px; }
.top-concept-tit-ico01 i{ color: #fff; font-size: 2rem; line-height: 50px; }
.top-concept-tit-tit01{ font-size: 6rem; color: var(--main-color); font-family: haptic-script, sans-serif; font-weight: 700; font-style: normal; }
.top-concept-tit-tit01 span{ font-size: 2.4rem; font-family: 'Noto Sans JP'; font-weight: 700; margin-left: 20px;  }
.top-concept-tit01{ font-size: 3.2rem; line-height: 1.5; margin-bottom: 20px; }

.top-concept-txt{ font-size: 2.5rem; line-height: 1.7; margin-bottom: 20px; }
.top-concept-img{ position: initial; right: 0; top: 0; margin: 0 auto;  }
.top-concept-img img{ width: 100%; height: auto; }



/* トップ：利用シーン */
.top-scene{ width: 90%; margin: 0 auto 40px auto; }
.top-scene-list{ flex-wrap: wrap; }
.top-scene-item{ flex-basis: 48%; list-style: none; margin-bottom: 30px; }
.top-scene-item-img{  }
.top-scene-item-img img{ width: 100%; height: auto; border-radius: 10px; margin-bottom: 10px; }
.top-scene-item-tit{ font-size: 2.2rem; font-weight: 700; }
.top-scene-item-tit i{ color: #f3b13d; margin-right: 10px; }


/* トップ：導入事例 */
.top-case{ background-color: #fff; padding: 40px 0; }
.top-case-sec{ width: 90%; margin: 0 auto; }
.top-case-list{ flex-wrap: wrap; margin-bottom: 40px; }
.top-case-item{ flex-basis: 100%; list-style: none; margin-bottom: 30px; }
.top-case-item img{ width: 100%; height: auto; margin-bottom: 10px; }
.top-case-item-tit01{ font-size: 2rem; font-weight: 700; }

.top-case-btn{ width: 380px; margin: 0 auto;  }
.top-case-btn a{ display: block; font-size: 1.8rem; font-weight: 700; color: var(--main-color); text-align: center; background-color: #fff; padding: 15px; border: 2px solid var(--main-color); border-radius: 10px; letter-spacing: 2px; }
.top-case-btn a:hover{ background-color: var(--main-color); color: #fff; }


/* トップ：導入の流れ */
.top-flow{ margin-bottom: 60px; }
.top-flow-sec{ width: 90%; margin: 0 auto; }
.top-flow-list{ flex-wrap: wrap; margin-bottom: 30px; gap: 10px; }
.top-flow-item{ flex-basis: 30%; text-align: center; margin-bottom: 30px; }
.top-flow-item-img01{ margin-bottom: 20px; }
.top-flow-item-img01 img{ width: 100%; height: auto; }
.top-flow-item-tit01{ font-size: 2rem; font-weight: 700; letter-spacing: 2px; }



/* トップ：FAQ */
.top-faq{ margin-bottom: 60px; }
.top-faq-sec{ width: 90%; margin: 0 auto; }
.top_faq_list{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.top_faq_item{ flex-basis: 100%; margin-bottom: 20px; }


.faq_accordion{	margin-bottom: 7px;	border-radius: 10px; }

.faq_accordion summary{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 20px 20px 25px 45px;
	color: #333;
	font-size: 2rem;
	background-color: #fff;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.3;
}

/* デフォルトマーカー非表示 */
.faq_accordion summary::-webkit-details-marker{	display: none; }

/* ▼矢印アイコン（after） */
.faq_accordion summary::after{
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-bottom: 3px solid var(--main-color);
	border-right: 3px solid var(--main-color);
	transform: rotate(45deg);
	transition: transform .3s;
	align-self: center; /* ←縦中央揃え */
}

/* ▼Qマーク（before） */
.faq_accordion summary::before{
	content: "Q.";
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 20px;
	top: 45%;
	transform: translateY(-50%); /* ←縦中央揃え */
	width: 20px; /* アイコン領域確保 */
	height: 20px;
	font-size: 2.2rem;
	color: var(--main-color);
	font-weight: 700;
}

.faq_accordion[open] summary::after{ transform: rotate(225deg); }

.faq_accordion p{
	transform: translateY(-10px);
	opacity: 0;
	margin: 0;
	padding: 20px;
	transition: transform .5s, opacity .5s;
	background-color: #fdeaeb;
	border-radius: 0 0 10px 10px;
}

.faq_accordion[open] p{	transform: none; opacity: 1; margin: 0; }


/* トップ：リンクボタン */

.top_business{ margin-bottom: 60px; }
.top_business_list{ display: flex; flex-wrap: wrap; }
.top_business_item{ position: relative; overflow: hidden; flex-basis: 100%; border-bottom: 2px solid #fff; }
.top_business_item:after{ position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; transition: all .3s ease-out; }
.top_business_item a{ display: block; position: relative; z-index: 1; height: 100%; color: #fff;  padding: 60px 15px; }

.top_business_item{ font-size: 3.5rem; }
.top_business_item span{ display: block; font-size: 2rem; }
.top_business_item p{ width: 230px; font-size: 1.8rem; color: var(--main-color); background-color: #fff; padding: 10px; border-radius: 10px; text-align: center; font-weight: 700; letter-spacing: 2px; margin: 20px auto 0 auto; }



/* トップ：お知らせ */
.top-news{ background-color: #fff; padding: 60px 0; }
.top-news-sec{ width: 90%; margin: 0 auto; }

.top-news-list{ margin-bottom: 30px; }
.top-news-item{ position: relative; border-bottom: 1px solid #ccc; padding: 20px 0; }
.top-news-date{ font-size: 1.5rem; padding-left: 20px; margin-right: 20px; }
.top-news-date:before{ position: absolute; left: 0; top: 29px; content: ""; display: block; width: 10px; height: 10px; border-radius: 100%; background-color: var(--main-color); }

.top_news_cat{ display:inline-block; min-width: 110px; padding: 6px 12px; color: #fff; font-size: 1.2rem; font-weight: 700; text-align: center; line-height: 1; margin-right: 20px; }
.top_news_cat.cat-news-news{ background: #4c6cb3; }
.top_news_cat.cat-news-jireitsuika{ background: #10af51; }
.top_news_cat.cat-news-important{ background: #f66d4d; }

.top-news-item a{ display: block; margin-top: 10px; }

/* トップ：Instagram */
.top-instagram{ padding: 60px 0; }
.top-instagram .top-concept-tit{ justify-content: center; }


.contents{ width: 90%; max-width: 1400px; margin: 0 auto; padding: 0 0 100px 0; }

.page-sec p{ font-size: 1.8rem; line-height: 1.8; letter-spacing: 2px; margin-bottom: 20px; }


/* HAKOYAの強み */
.advantage-sec-tit01{ display: inline-block; font-size: 2rem; color: #fff; font-weight: 700; letter-spacing: 3px; padding: 5px 15px; line-height: 1; margin-bottom: 20px; margin-top: 20px; }


/* ブロックエディタ */
.wp-block-media-text>.wp-block-media-text__content {
padding: 0 4% !important;
}



	


}
/* ----------------------------------------------------------
TAB CSS END
---------------------------------------------------------- */

/* ----------------------------------------------------------
PC CSS
---------------------------------------------------------- */
@media print, screen and (min-width: 1024px) and (max-width: 1800px){

/* フォントサイズ10px */
html{ font-size: 62.5%; }

/* 基本のフォントサイズ */
body{ font-size: 16px; font-size: 1.8rem; }

/* 非表示用 */
.nonePC		{ display: none !important; }

/* ----------------------------------------------------------
 header
---------------------------------------------------------- */
header{ position: fixed; width: 100%; height: 90px; z-index: 99; background-color: #FDF5F2; }
.header-inner{ display: flex; align-items: center; padding-right: 0; height: 90px; }
.header-logo{ max-width: 140px; margin: 5px 20px; }
.header-logo a:hover{ opacity: .6; }
.header-logo img{ width: 100%; height: auto; }

.gnavi{ flex-basis: 0%; margin-right: 0; margin-left: 0; }
.gnavi a{ font-size: 1.6rem; text-align: center; letter-spacing: 1px; }
.gnavi a:hover{ background-color: #eee; }


.header-tel{ flex-basis: 30%; width: 30%; font-size: 2.7rem; margin-right: 400px; margin-left: auto; padding-top: 40px; }
.header-tel span{ font-size: 1.2rem; }

.header-right{ position: absolute; top: 0; right: 90px; width: 280px; }
.header__right_btn{}

.header-btn-line a,
.header-btn-contact a{ display: block; font-size: 1.8rem; font-weight: 700; width: 100%; text-align: center; color: #fff; border: 2px solid; height: 45px; line-height: 40px; }

.header-btn-line a i,
.header-btn-contact a i{ margin-right: 10px; font-size: 2.2rem; vertical-align: middle; }



/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
/* ページ下部 固定メニュー */
.btm_menu{ display: none; }

.footer-nav{ display: none; }

.footer-cta-sec{ display: flex; justify-content: center; align-items: center; gap: 20px; }
.footer-cta-sec-tel01{ font-size: 4rem; }
.footer-cta-sec-tel01 span{ display: block; font-size: 1.5rem; letter-spacing: 1px; font-family: 'Noto Sans JP'; }
.footer-cta-sec-btn01{ width: 300px; }
.footer-cta-sec-btn01 a{ display: block; color: var(--contact-color); font-size: 2rem; font-weight: 700; text-align: center; background-color: #fff; padding: 15px; border: 2px solid #fff; border-radius: 10px; }
.footer-cta-sec-btn-line01{}
.footer-cta-sec-btn-line01 a i{ margin-right: 10px; font-size: 2.4rem; vertical-align: middle; }
.footer-cta-sec-btn-line01 a{ color: var(--line-color); }

.footer-cta-sec-btn01 a:hover{ color: #fff; background-color: var(--contact-color); }


/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */





/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */
.top-img{ position: relative; margin-bottom: 40px; padding-top: 90px; }
.top-img img{ width: 100%; height: auto; }
.top-img-img01{}
.top-img-txt{ top: 30%; left: 5%; }
.top-img-tit01{ font-size: 3rem;  }
.top-img-txt01{ font-size: 6rem; letter-spacing: 4px; }
.top-img-txt02{ font-size: 2rem; }


/* トップ：コンセプト */
.top-concept{ position: relative; margin-bottom: 60px; }
.top-concept-txt{ flex-wrap: wrap; }
.top-concept-sec{ width: 90%; margin: 0 auto; }
.top-concept-tit{ display: flex; align-items: center;  margin-bottom: 20px; }
.top-concept-tit-ico01{ width: 50px; height: 50px; border-radius: 100%; text-align: center; background-color: var(--main-color); margin-right: 15px; }
.top-concept-tit-ico01 i{ color: #fff; font-size: 2rem; line-height: 50px; }
.top-concept-tit-tit01{ font-size: 6rem; color: var(--main-color); font-family: haptic-script, sans-serif; font-weight: 700; font-style: normal; }
.top-concept-tit-tit01 span{ font-size: 2.4rem; font-family: 'Noto Sans JP'; font-weight: 700; margin-left: 20px;  }
.top-concept-tit01{ font-size: 4.2rem; font-weight: 700; line-height: 1.5; margin-bottom: 20px; }

.top-concept-txt{ font-size: 2.5rem; line-height: 1.7; margin-bottom: 20px; }
.top-concept-img{ position: initial; right: 0; top: 0; margin: 0 auto;  }



/* トップ：利用シーン */
.top-scene{ width: 90%; margin: 0 auto 60px auto; }
.top-scene-list{ display: flex; justify-content: space-between; }
.top-scene-item{ flex-basis: 23%; list-style: none; }
.top-scene-item-img{  }
.top-scene-item-img img{ width: 100%; height: auto; border-radius: 10px; margin-bottom: 10px; }
.top-scene-item-tit{ font-size: 2.2rem; font-weight: 700; }
.top-scene-item-tit i{ color: #f3b13d; margin-right: 10px; }


/* トップ：導入事例 */
.top-case{ background-color: #fff; padding: 40px 0; }
.top-case-sec{ width: 90%; margin: 0 auto; }
.top-case-list{ display: flex; justify-content: flex-start; margin-bottom: 40px; }
.top-case-item{ flex-basis: 31%; list-style: none; margin: 0 1%; }
.top-case-item img{ width: 100%; height: auto; margin-bottom: 10px; }
.top-case-item-tit01{ font-size: 2rem; font-weight: 700; }

.top-case-btn{ width: 380px; margin: 0 auto;  }
.top-case-btn a{ display: block; font-size: 1.8rem; font-weight: 700; color: var(--main-color); text-align: center; background-color: #fff; padding: 15px; border: 2px solid var(--main-color); border-radius: 10px; letter-spacing: 2px; }
.top-case-btn a:hover{ background-color: var(--main-color); color: #fff; }


/* トップ：導入の流れ */
.top-flow{ margin-bottom: 60px; }
.top-flow-sec{ width: 90%; margin: 0 auto; }
.top-flow-list{ display: flex; justify-content: space-between; margin-bottom: 30px; gap: 10px; }
.top-flow-item{ text-align: center; }
.top-flow-item-img01{ margin-bottom: 20px; }
.top-flow-item-img01 img{ width: 100%; height: auto; }
.top-flow-item-tit01{ font-size: 2rem; font-weight: 700; letter-spacing: 2px; }



/* トップ：FAQ */
.top-faq{ margin-bottom: 60px; }
.top-faq-sec{ width: 90%; margin: 0 auto; }
.top_faq_list{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.top_faq_item{ flex-basis: 48%; margin-bottom: 20px; }


.faq_accordion{	margin-bottom: 7px;	border-radius: 10px; }

.faq_accordion summary{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 20px 20px 25px 45px;
	color: #333;
	font-size: 2rem;
	background-color: #fff;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.3;
}

/* デフォルトマーカー非表示 */
.faq_accordion summary::-webkit-details-marker{	display: none; }

/* ▼矢印アイコン（after） */
.faq_accordion summary::after{
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-bottom: 3px solid var(--main-color);
	border-right: 3px solid var(--main-color);
	transform: rotate(45deg);
	transition: transform .3s;
	align-self: center; /* ←縦中央揃え */
}

/* ▼Qマーク（before） */
.faq_accordion summary::before{
	content: "Q.";
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 20px;
	top: 45%;
	transform: translateY(-50%); /* ←縦中央揃え */
	width: 20px; /* アイコン領域確保 */
	height: 20px;
	font-size: 2.2rem;
	color: var(--main-color);
	font-weight: 700;
}

.faq_accordion[open] summary::after{ transform: rotate(225deg); }

.faq_accordion p{
	transform: translateY(-10px);
	opacity: 0;
	margin: 0;
	padding: 20px;
	transition: transform .5s, opacity .5s;
	background-color: #fdeaeb;
	border-radius: 0 0 10px 10px;
}

.faq_accordion[open] p{	transform: none; opacity: 1; margin: 0; }


/* トップ：リンクボタン */

.top_business{ margin-bottom: 60px; }
.top_business_list{ display: flex; flex-wrap: wrap; }
.top_business_item{ position: relative; overflow: hidden; flex-basis: 33%; }
.top_business_item:after{ position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0; transition: all .3s ease-out; }
.top_business_item a{ display: block; position: relative; z-index: 1; height: 100%; color: #fff;  padding: 60px 15px; }

.top_business_item{ font-size: 3.5rem; }
.top_business_item span{ display: block; font-size: 2rem; }
.top_business_item p{ width: 230px; font-size: 1.8rem; color: var(--main-color); background-color: #fff; padding: 10px; border-radius: 10px; text-align: center; font-weight: 700; letter-spacing: 2px; margin: 20px auto 0 auto; }



/* トップ：お知らせ */
.top-news{ background-color: #fff; padding: 60px 0; }
.top-news-sec{ width: 850px; margin: 0 auto; }

.top-news-list{ margin-bottom: 30px; }
.top-news-item{ position: relative; border-bottom: 1px solid #ccc; padding: 20px 0; }
.top-news-date{ font-size: 1.5rem; padding-left: 20px; margin-right: 20px; }
.top-news-date:before{ position: absolute; left: 0; top: 31px; content: ""; display: block; width: 10px; height: 10px; border-radius: 100%; background-color: var(--main-color); }

.top_news_cat{ display:inline-block; min-width: 110px; padding: 6px 12px; color: #fff; font-size: 1.2rem; font-weight: 700; text-align: center; line-height: 1; margin-right: 20px; }
.top_news_cat.cat-news-news{ background: #4c6cb3; }
.top_news_cat.cat-news-jireitsuika{ background: #10af51; }
.top_news_cat.cat-news-important{ background: #f66d4d; }



/* トップ：Instagram */
.top-instagram{ padding: 60px 0; }
.top-instagram .top-concept-tit{ justify-content: center; }



}
/* ----------------------------------------------------------
 PC CSS END
---------------------------------------------------------- */
/* ----------------------------------------------------------
 PC WIDE CSS
---------------------------------------------------------- */
@media screen and (min-width: 1801px){
/* フォントサイズ10px */
html{ font-size: 62.5%; height: 100%; }

/* 基本のフォントサイズ */
body{ font-size: 16px; font-size: 1.8rem; height: 100%; }

/* 非表示用 */
.nonePCWIDE		{ display: none !important; }

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

.gnavi{ flex-basis: 70%; margin-right: 0; margin-left: 3%; }

.toggle_btn{ display: none; }


/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
/* ページ下部 固定メニュー */
.btm_menu{ display: none; }





/* ----------------------------------------------------------
 hx
---------------------------------------------------------- */



/* ----------------------------------------------------------
 contents
---------------------------------------------------------- */





}
/* ----------------------------------------------------------
 PCWIDE CSS END
---------------------------------------------------------- */