@charset "UTF-8";
/* CSS Document */

/*/_/_/_/_ BASICS */
html {
	font-size: 10px;
}
body {
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 1.3rem;
	color: #333;
}
#wrapper {
	background-color: #fff;
}

/*/_/_/_/_ HEADER */
header {
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	padding: 10px;
}
#sitelogo img {
	height: 40px;
	width: auto;
}
h2 {
	color: #f00;
	font-size: 2rem;
}
p {
	margin: 1rem 0;
	line-height: 1.5;
}
em {
	color: #f00;
	font-weight: bold;
}

/*/_/_/_/_ HEADER DRAWER MENU */
.l-drawer {
	position: relative;
}
.l-drawer__checkbox {
	display: none;
}
.l-drawer__icon {
	cursor: pointer;
	display: block;
	width: 56px;
	height: 30px;
	position: relative;
	right: 0;
}
.l-drawer__icon-parts,
.l-drawer__icon-parts:before,
.l-drawer__icon-parts:after {
	background-color: #f00;
	display: block;
	width: 26px;
	height: 2px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}
.l-drawer__icon-parts:before,
.l-drawer__icon-parts:after {
	content: " ";
}
.l-drawer__icon-parts:before {
	top: 16px;
}
.l-drawer__icon-parts:after {
	top: -16px;
}
/*____ OVERLAY */
.l-drawer__overlay {
	background: #000;
	opacity: 0;
	pointer-events: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
}
/*____ MENU */
.l-drawer__menu {
	background: #a00;
	color: #000;
	max-width: 100%;
	width: 320px;
	height: 100vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	position: fixed;
	top: 0;
	right: -320px;
}
.l-drawer__menu ul {
	margin: 20px;
	font-size: 14px;
}
.l-drawer__menu ul li a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 20px 0;
	border-bottom: dotted 4px #fff;
}
.l-drawer__menu ul li a::before {
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	font-weight: bold;
	margin-right: 4px;
}
.l-drawer__icon {
  z-index: 4;
}
.l-drawer__menu {
  z-index: 3;
}
.l-drawer__overlay {
  z-index: 2;
}
.l-drawer__checkbox:checked ~ .l-drawer__icon .l-drawer__icon-parts {
  background: transparent;
}
.l-drawer__checkbox:checked ~ .l-drawer__icon .l-drawer__icon-parts:before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 0;
}
.l-drawer__checkbox:checked ~ .l-drawer__icon .l-drawer__icon-parts:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
}
.l-drawer__checkbox:checked ~ .l-drawer__overlay {
  opacity: 0.3;
  pointer-events: auto;
}
.l-drawer__checkbox:checked ~ .l-drawer__menu {
  right: 0;
}
/*___ CURRENT PAGE */
.current {
	color: #ff0;
	padding: 20px 0;
	border-bottom: dotted 4px #fff;
}
.current::before {
	font-family: "Font Awesome 5 Free";
	content: "\f058";
	font-weight: bold;
	margin-right: 4px;
}
/*____ HUMBERGER ICON AFTER */
.l-drawer__icon-parts,
.l-drawer__icon-parts:after,
.l-drawer__icon-parts:before,
.l-drawer__overlay,
.l-drawer__menu {
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}
.l-drawer span {
	display: block;
	font-weight: normal;
	font-size: smaller;
	color: #ff0;
}

/*/_/_/_/_ MAIN */
article {
	background-color: #e5f0f7;
	padding: 10px; 
}
section {
	background-color: #fff;
	padding: 0 20px 20px 20px;
	border-radius: 8px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
}
.redborder {
	width: 90%;
	height: 5px;
	background: #f00;
	border-radius: 0 0 3px 3px;
	margin: 0 auto 40px;
}
#twocolumn main .imgdiv,
#twocolumn main .imgdiv img {
	width: 100% ;
}

/*/_/_/_/_ LINE talk */

.balloon_l,
.balloon_r {
	margin: 10px 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.balloon_r {
	justify-content: flex-end;
}
.faceicon img,
.accshow .faceicon img {
	width: 50px;
	height: auto;
}
.balloon_r .faceicon {
	margin-left: 20px;
}
.balloon_l .faceicon {
	margin-right: 20px;
}
.balloon_r .faceicon {
	order: 2 !important;
}
.says {	
	display: flex;
	flex-wrap: wrap;
	position: relative;
	padding: 8px;
	border-radius: 10px;
	box-sizing: border-box;
	margin: 0 !important;
	line-height: 1.4;
}
.balloon_l .says {
	background: #fcf;
}
.balloon_r .says {
	background: #fc6;
}
.says p {
	margin: 6px;
	font-size: larger;
}
.says p:first-child {
	margin-top: 0;
}
.says:after {
	content: "";
	position: absolute;
	border: 10px solid transparent;
}
.balloon_l .says:after {
	left: -26px;
	border-right: 22px solid #fcf;
}
.balloon_r .says:after {
	right: -26px;
	border-left: 22px solid #fc6;
}
.says a {
	text-decoration: none;
	font-weight: bold;
	display: block;
	color: #f00;
}
.says a::after {
	font-family: "Font Awesome 5 Free";
	content: "\f0a9";
	margin-left: 2px;
	color: #f00;
}
.undergoinsitepage {
	margin-top: 2rem;
}

/*/_/_/_/_ ACCORDION MENU */

/*_________ Box */
.accbox {
	margin: 1em 0;
	padding: 0;
	width: 100%;
	clear: both;
	font-size: 1.3rem;
}
/*________ Label */
.accbox label {
	display: block;
	margin: 1.5px 0;
	padding: 11px 12px;
	color: #fff;
	font-weight: bold;
	background: #f00;
	cursor: pointer;
	transition: all 0.5s;
	line-height: 1.4;
	border-radius: 4px;
}
/*________ label Icon */
.accbox label::before {
	font-family: "Font Awesome 5 Free";
	content: "\f078";
	font-weight: bold;
	margin-right: 4px;
}
/*________ Lavel Hover */
.accbox label:hover  {
	background: #f00;
}
/*________ Hide Check */
.accbox input {
	display: none;
}
/*________ Hide Inside */
.accbox .accshow {
	height: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	transition: 0.8s;
}
/*________ Show by Click */
.cssacc:checked + label + .accshow {
	height: auto;
	padding: 5px;
	background: #fff;
	opacity: 1;
}
/*________ Icon Change */
.cssacc:checked + label::before {
	font-family: "Font Awesome 5 Free";
	content: "\f077";
	font-weight: bold;
	margin-right: 4px;
}
/*________ Popup Txt */
.accshow p {
	line-height: 1.4;
}
.accshow p::before {
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	font-weight: bold;
	margin-right: 4px;
	color: #f60;
}
.accshow .p_img::before {
	content: none;
}
/*________ Img Size */
.accshow img {
	width: 100%;
	margin-bottom: 5px;
}
/*________ Link in Box */
.accbox em {
	font-size: larger;
}
.accshow a::before {
	font-family: "Font Awesome 5 Free";
	content: "\f35d";
	font-weight: bold;
	margin-right: 4px;
}
.accshow a {
	text-decoration: none;
	color: #f00;
	background-color: #fff;
	padding: 10px 0;
	margin: 5px 0 15px 0;
	display: block;
	font-size: larger;
}
.accbox span {
	margin-left: 2rem;
}
.accbox i {
	margin: 0 4px;
	color: #f00;
}
#HACO_news .accshow li::before {
	font-family: "Font Awesome 5 Free";
	content: "\f14a";
	margin-right: 4px;
}
#kensa .accshow a::before,
#tel_sodan .accshow a::before,
#kensafuk .accshow a::before{
	font-family: "Font Awesome 5 Free";
	content: "\f095";
	font-weight: bold;
	margin-right: 4px;
}

/*/_/_/_/_ NUMBERING LIST */
ol.nagare {
	counter-reset:cp_clist; /*数字をリセット*/
	list-style-type: none;
	padding:0.5em;
	font-weight: bold;
	font-size: larger;
}
ol.nagare li {
	position: relative;
	padding-left: 30px;
	padding: 0.5em 0.5em 0.5em 30px;
	border-bottom: dashed 1px #ccc;
}
ol.nagare li::before {
	position: absolute;
	display:inline-block;
	top: 50%;
	left: 0;
	/* カウントさせる */
	counter-increment: cp_clist;
	content: counter(cp_clist);
	/*装飾*/
	padding: 0 0.2em 0 0.2em;
	background: #f00;
	color: #fff;
	font-weight:bold;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align:center;
	transform: translateY(-50%);
}

/*/_/_/_/_ お渡し日 TABLE */
table {
	width: 100%;
	font-size: 1.5rem;
}
th, td {
	padding: 4px;
	background: #ff9;
	border: solid 1px #999;
}
td {
	text-align: center;
	font-weight: bold;
}
.bg_r th,
.bg_r td {
	background: #f9f;
}
.bg_b th,
.bg_b td {
	background: #9cf;
}
.dayoff th,
.dayoff td {
	background: #999;
	font-weight: normal;
	font-size: smaller;
	color: #fff;
}
.midashi_tr th {
	background: #f00;
	color: #fff;
}

/*/_/_/_/_ GOOGLE MAP */
.gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

/*/_/_/_/_ TEL LINK */
.telsodan,
.goto_page {
	margin: 2rem 0;
	font-size: 1.4rem;
	font-weight: bold;
}
.telsodan a,
.goto_page a {
	display: block;
	color: #fff;
	background-color: #06f;
	padding: 15px;
	text-decoration: none;
	border-radius: 4px;
	box-shadow: 4px 4px 3px #ccc;
}
.telsodan a::before{
	font-family: "Font Awesome 5 Free";
	content: "\f095";
	font-weight: bold;
	margin-right: 4px;
}
.goto_page a::before {
	font-family: "Font Awesome 5 Free";
	content: "\f138";
}

/*/_/_/_/_ ASIDE */
aside h2 {
	font-weight: bold;
	font-size: 2rem;
	margin-bottom: 2rem;
	text-align: center;
	color: #f00;
	border-bottom: 3px solid #f00;
}
aside h3 {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 1rem;
	text-align: center;
}
aside p::before {
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	margin-right: 4px;
	color: #f00;
	font-weight: bold;
}
aside span {
	display: block;
}
aside .accbox .accshow ul.telcall li a::before {
	content: none;
}
aside .accbox .accshow ul.telcall li a::before {
	font-family: "Font Awesome 5 Free";
	content: "\f095";
	font-weight: bold;
	margin-right: 4px;
}

/*/_/_/_/_ GO TO SITE */
.gotosite {
	margin: 2rem 0;
	font-size: 1.4rem;
	font-weight: bold;
}
.gotosite a {
	display: block;
	color: #fff;
	background-color: #f00;
	padding: 15px;
	text-decoration: none;
	border-radius: 4px;
	box-shadow: 4px 4px 3px #f99;
}
.gotosite::before {
	content: none;
}
.gotosite a::before {
	font-family: "Font Awesome 5 Free";
	content: "\f35d";
	font-weight: bold;
	margin-right: 4px;
}

/*/_/_/_/_ TWITTER SECTION */
.tweet {
	margin-top: 1rem;
}


/*/_/_/_/_ CHUI */
.accshow .chui,
aside .chui {
	font-weight: bold;
	color: #f00;
}
.accshow .chui::before {
	content: none;
}
.accshow .chui::before,
aside .chui::before {
	font-family: "Font Awesome 5 Free";
	content: "\f071";
	font-weight: bold;
}
/*/_/_/_/_ FOOTER */
footer {
	text-align: center;
	width: 100%;
	/* important 
	bottom: 0;*/
	height: 218px;
	/*position: absolute;*/
	background-color: #fff;
}
#footerlogo img {
	height: 40px;
	width: auto;
	margin: 20px;
}
footer dl {
	display: flex;
	justify-content: center;
	padding: 20px;
}
small {
	color: #fff;
	background-color: #f00;
	display: block;
	padding: 20px;
}
address {
	font-style: normal;
}

/*/_/_/_/_ TO PAGE TOP */
#page_top{
	width: 60px;
	height: 60px;
	position: fixed;
	right: 0;
	bottom: 0;
	opacity: 0.6;
	z-index: 200;
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f0aa';
	font-size: 40px;
	color: #f60;
	position: absolute;
	width: 25px;
	height: 25px;
	top: -15px;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

/*/_/_/_/_ PC AND TABLET */
@media only screen and (min-width: 481px) {
	#twocolumn {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}
	#twocolumn main {
		flex: 1;
	}
}
@media only screen and (min-width: 769px) {
	#twocolumn aside {
		width: 350px;
	}
}
@media only screen and (min-width: 981px) {
	body {
		background-image: url("../../img/dot.png"), url("../../img/body_bg.png");
		background-repeat: repeat, no-repeat;
		background-position: center, center;
		background-size: 10px auto, cover;
	}
	#wrapper {
		box-shadow: 0 2px 5px rgba(0, 0, 0);
	}
	#wrapper,
	footer {
		width: 980px;
		margin: 0 auto;
	}
	#twocolumn main .imgdiv,
	#twocolumn main .imgdiv img {
		width: 100% ;
	}
}