@charset "utf-8";

/*!
 * Copyright 2020 HATTORI PROCESS GROUP
 */

@import url('pure-min.css');

/* ============================
common.css　もくじ
-------------------------------
1.ブレイクポイント
2.まとめて！カラー設定
3.ページ表示開始エフェクト
4.全体レイアウト＆設定
5.パララックス用
6.headerレイアウト
	6-1.トグルメニュー折りたたみ設定
7.topagetop_wrap
8.footerレイアウト
9.見出し
10.ボタン
11.ローカルナビゲーション
============================== */


/* ===========================
1.ブレークポイント
============================== */
@media screen and (min-width: 30em) { /* 480px */
}
@media screen and (min-width: 40em) { /* 640px */
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
}
@media screen and (min-width: 64em) {/* 1024px */
}
@media screen and (min-width: 80em) {/* 1280px */
}


/* ===========================
2.まとめて！カラー設定
============================== */
.theme_color,
header.header_type1 nav#header_nav ul li.current a,
footer.footer_type1 nav>div ul a:hover,
footer.footer_type1 #footer-logo-area .logo_link:hover {
	color: #f5ab18;
}
.theme_color_back {
	background-color: #f5ab18;
}
.theme_color2_back {
	background-color: #e7b959;
}
a:hover,
.header_type1 nav#header_nav ul li a:hover,
#topagetop_wrap a:hover {
	color: #f5ab18;
	-webkit-transition:color .2s;
	-moz-transition:color .2s;
	-o-transition:color .2s;
	transition:color .2s;
}

/* ↓ボタンの色も変更するなら */
#topagetop_wrap a span:before,
.button_color_border {
	border-color: #ffe81c;
}
.button_type1,
.button_type2,
#main_contents .local_nav ul li,
#main_contents #top_work #work_area li p:last-child:before {
	background-color: #ffe81c;
}
#main_contents .local_nav ul li.local_current {
	outline-color: #ffe81c;
}
#main_contents .local_nav ul li.local_current a {
	color: #ffe81c;
}


/* ===========================
3.ページ表示開始エフェクト
============================== */
body {
    animation: fadeIn 1.5s ease 0s 1 normal;
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/* ===========================
4.全体レイアウト＆設定
============================== */
html { overflow-y: scroll; }/* 縦スクロールバーを15pxとして追加する */
body {
	font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
ul, li, dl, dt, dd {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ff_mincho {
	font-family: "Garamond" , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
.disable-auto-tel a[href^="tel:"] { /* iOS自動電話リンク無効用 */
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
main#main_contents {
	z-index: 1;
}
.pc_none {
	display: block;
}
.sp_inline_none {
	display: none;
}
@media screen and (min-width: 30em) { /* 480px */
	.pc_none {
		display: none;
	}
	.sp_inline_none {
		display: inline;
	}
}


/* ===========================
5.パララックス用
============================== */
@media screen and (min-width: 30em) { /* 480px */
	.fadeInUp {
		opacity : 0;
		transform: translateY(130px);
		transition: 1s;
	}
}


/* ===========================
6.headerレイアウト
============================== */
header.header_type1 {
	position: relative;
	margin-bottom: 30px;
	z-index: 99;
}
header.header_type1 div#logo_title {
	margin: 0 6% 70px;
	padding-top: 25px;
	position: relative;
	overflow: hidden;
}
header.header_type1 div#logo_title a {
	color: #000;
	text-decoration: none;
}
header.header_type1 div#logo_title img {
	margin-right: 5px;
	height: 38px;
}
header.header_type1 div#logo_title img.hpg_logo {
	float: left;
	height: 38px;
}
header.header_type1 div#logo_title h1 {
	font-size: 1rem;
	float: left;
	margin: 0;
}
header.header_type1 div#logo_title p {
	font-size: 0.8rem;
	margin: 0;
}
header.header_type1 div#logo_title p.hpg_phrase {
	clear: both;
	font-size: 0.7rem;
	padding-top: 7px;
}
header.header_type1 nav#header_nav {
	position: absolute;
	top: 115px;
	width: 88%;
	background-color: rgba(255,255,255,0.9);
	padding: 0 6%;
}
/* 6-1.ここからトグルメニュー折りたたみ設定 */
header.header_type1 nav#header_nav input[type="checkbox"] {
	display: none;
}
header.header_type1 nav#header_nav label {
	position: relative;
	display: block;
	font-size: 0;
	width: 25px;
	height: 20px
}
header.header_type1 nav#header_nav label:before,
header.header_type1 nav#header_nav label:after {
	position: absolute;
	left: 0;
	content: "";
	width: 100%;
	border-top: 1px solid #000;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
header.header_type1 nav#header_nav label:after {
	top: 8px;
}
header.header_type1 nav#header_nav input[type="checkbox"]:checked + label:before {
	border-top: 1px solid #000;
	-webkit-transform: translateY(0px) rotate(-45deg);
	transform: translateY(0px) rotate(-45deg);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
header.header_type1 nav#header_nav input[type="checkbox"]:checked + label:after {
	border-top: 1px solid #000;
	-webkit-transform: translateY(-8px) rotate(45deg);
	transform: translateY(-8px) rotate(45deg);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
header.header_type1 nav#header_nav ul {
	height: 0;
	overflow: hidden;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
header.header_type1 nav#header_nav input[type="checkbox"]:checked ~ ul {
	height: 23em;
    animation: fadeIn 1.5s ease 0s 1 normal;
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
}
/* 6-1.↑ここまでトグル系 */
header.header_type1 nav#header_nav ul li {
	text-align: center;
	margin: 35px 0;
}
header.header_type1 nav#header_nav ul li a {
	font-size: 1.0625rem;
	text-decoration: none;
	color: #000;
	font-weight: bold;
	-webkit-transition:color .2s;
	-moz-transition:color .2s;
	-o-transition:color .2s;
	transition:color .2s;
}
header.header_type1 #header_tab {
	width: 44px;
	height: 116px;
	overflow: hidden;
	-webkit-transition:opacity .2s;
	-moz-transition:opacity .2s;
	-o-transition:opacity .2s;
	transition:opacity .2s;
	position: absolute;
	bottom: -186px;
	right: 0;
}
header.header_type1 #header_tab:hover {
	opacity : 0.7;
}
header.header_type1 #header_tab a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0.65rem;
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.2rem;
	text-align: center;
}
header.header_type1 #header_tab a span {
	text-align: left;
	display: inline-block;
	padding-top: 1.2rem;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
@media screen and (min-width: 40em) { /* 640px */
	header.header_type1 {
		margin-bottom: 40px;
	}
	header.header_type1 div#logo_title {
		margin: 0 8%;
		padding-top: 60px;
	}
	header.header_type1 div#logo_title img {
		margin-right: 20px;
		height: 65px;
	}
	header.header_type1 div#logo_title img.hpg_logo {
		height: 65px;
	}
	header.header_type1 div#logo_title h1 {
		font-size: 1.47rem;
	}
	header.header_type1 div#logo_title p {
		font-size: 1rem;
		margin-top: 5px;
	}
	header.header_type1 div#logo_title p.hpg_phrase {
		font-size: 0.875rem;
	}
	header.header_type1 nav#header_nav {
		position: static;
		background-color: none;
		width: auto;
		margin-top: 55px;
		padding: 0 8%;
	}
	header.header_type1 nav#header_nav input,
	header.header_type1 nav#header_nav label {
		display: none;
	}
	header.header_type1 nav#header_nav ul {
		height: auto;
	}
	header.header_type1 nav#header_nav ul li {
		float: left;
		margin:0 60px 0 0;
	}
	header.header_type1 nav#header_nav ul li a {
		font-weight: normal;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	header.header_type1 #header_tab {
		width: 55px;
		height: 145px;
		bottom: -185px;
	}
	header.header_type1 #header_tab a {
		font-size: 0.8125rem;
	}
	header.header_type1 #header_tab a span {
		padding-top: 1.5rem;
	}
}


/* ===========================
7.topagetop_wrap
============================== */
#topagetop_wrap {
	margin: 70px 4% 30px;
	text-align: right;
}
#topagetop_wrap a {
	font-size: 0.86rem;
	color: #000;
	text-decoration: none;
	position: relative;
	padding-top: 20px;
}
#topagetop_wrap a span:before {
	content: '';
	width: 14px;
	height: 14px;
	border-top-style: solid;
	border-top-width: 2px;
	border-left-style: solid;
	border-left-width: 2px;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 8px;
	left: 50%;
	margin-left: -7px;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
#topagetop_wrap a:hover span:before {
	top: 4px;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
@media screen and (min-width: 40em) { /* 640px */
}


/* ===========================
8.footerレイアウト
============================== */
footer.footer_type1 {
	padding: 0 6%;
}
footer.footer_type1 hr {
	height: 0;
	border: none;
	border-top: 1px solid #fff;
}
footer.footer_type1 nav {
	overflow: hidden;
	padding-top: 20px;
}
footer.footer_type1 nav h4 {
	font-size: 1.0625rem;
	font-weight: normal;
	margin: 0 0 15px;
}
footer.footer_type1 nav#footer_nav_sitemap h4 {
	color: #fff;
}
footer.footer_type1 nav>div {
	overflow: hidden;
}
footer.footer_type1 nav>div ul a,
footer.footer_type1 nav#footer_nav_group h4 a {
	color: #fff;
	text-decoration: none;
	-webkit-transition:color .2s;
	-moz-transition:color .2s;
	-o-transition:color .2s;
	transition:color .2s;
}
footer.footer_type1 nav>div>ul {
	font-size: 0;
	color: #fff;
	line-height: 1.6;
	overflow: hidden;
	margin: 0;
}
footer.footer_type1 nav>div>ul>li {
	font-size: 1.0625rem;
}
footer.footer_type1 nav#footer_nav_sitemap>div>ul>li:before {
	content: "▼ ";
}
footer.footer_type1 nav#footer_nav_sitemap>div>ul>li ul li {
	padding-left: 2em;
	list-style-type: circle;
	list-style-position: inside;
	text-indent: -1em;
}
footer.footer_type1 #footer-logo-area {
	position: relative;
}
footer.footer_type1 #footer-logo-area #footer_logo {
	margin: 30px 0 0;
	text-align: center;
}
footer.footer_type1 #footer-logo-area .logo_link {
	font-size: 1.25rem;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #fff;
	-webkit-transition:color .2s;
	-moz-transition:color .2s;
	-o-transition:color .2s;
	transition:color .2s;
}
footer.footer_type1 #footer-logo-area address {
	text-align: center;
	color: #fff;
	font-size: 0.89125rem;
	font-style: normal;
	line-height: 1.7142857;
	margin: 20px auto 10px;
}
footer.footer_type1 #footer-logo-area #footer_mark {
	text-align: center;
	margin: 0;
}
footer.footer_type1 #footer-logo-area #footer_mark img {
	margin: 0 5px;
}
footer.footer_type1 #footer-logo-area #footer_group {
	clear: both;
	margin: 40px 0 0;
	text-align: center;
}
footer.footer_type1 #footer-logo-area #footer_group img {
	height: 65px;
	vertical-align: middle;
}
footer.footer_type1 #footer-logo-area #copyright {
	display: block;
	text-align: center;
	color: #fff;
	font-size: 0.89125rem;
	margin: 25px auto 0;
	padding-bottom: 30px;
}
@media screen and (min-width: 30em) { /* 480px */
	footer.footer_type1 #footer-logo-area #footer_group img {
		margin-right: 30px;
	}
}
@media screen and (min-width: 40em) { /* 640px */
	footer.footer_type1 nav h4 {
		font-size: 0.8125rem;
	}
	footer.footer_type1 nav>div>ul {
		float: left;
	}
	footer.footer_type1 nav>div>ul>li {
		font-size: 0.8125rem;
	}
	footer.footer_type1 nav#footer_nav_sitemap>div>ul {
		width: 50%;
	}
	footer.footer_type1 nav#footer_nav_sitemap>div>ul>li {
		margin-bottom: 10px;
	}
	footer.footer_type1 nav#footer_nav_sitemap>div>ul:nth-child(3) {
		width: 100%;
	}
	footer.footer_type1 nav#footer_nav_sitemap>div>ul>li:before {
		content: none;
	}
	footer.footer_type1 nav#footer_nav_sitemap>div>ul>li ul {
		display: block;
	}
	footer.footer_type1 #footer-logo-area .logo_link {
		font-size: 1.5rem;
	}
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
	footer.footer_type1 nav#footer_nav_sitemap>div>ul {
		width: 18%;
	}
	footer.footer_type1 nav#footer_nav_sitemap>div>ul:nth-child(3) {
		width: 64%;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	footer.footer_type1 {
		background: url("../img/common_footer_back.jpg") center no-repeat;
		background-size: cover;
		padding: 0 8%;
	}
	footer.footer_type1 hr {
		width: 80%;
		margin: 0 0 0 20%;
	}
	footer.footer_type1 nav h4 {
		padding-left: 20%;
	}
	footer.footer_type1 nav>div {
		padding-left: 20%;
	}
	footer.footer_type1 #footer-logo-area #footer_mark {
		position: absolute;
		top: 0;
		right: 7%;
	}
	footer.footer_type1 #footer-logo-area #footer_mark img {
		margin: 0 10px 0 0;
	}
}
@media screen and (min-width: 80em) {/* 1280px */
	footer.footer_type1 nav {
		padding-top: 40px;
	}
	footer.footer_type1 nav#footer_nav_sitemap {
		padding-bottom: 20px;
	}
	footer.footer_type1 nav h4 {
		width: 15%;
		float: left;
	}
	footer.footer_type1 nav h4:after {
		content: "";
		display: inline-block;
		vertical-align: text-bottom;
		width: 0;
		height: 0;
		border-top: 0.6em solid transparent;
		border-right: 0.6em solid transparent;
		border-bottom: 0.6em solid transparent;
		border-left: 0.6em solid #fff;
		margin-left: 0.5em;
	}
	footer.footer_type1 nav>div {
		float: right;
		width: 65%;
		padding-left: 0;
	}
	footer.footer_type1 nav>div>ul {
		line-height: 1.9;
	}
	footer.footer_type1 nav#footer_nav_sitemap>div>ul>li {
		margin-bottom: 20px;
	}
	footer.footer_type1 nav#footer_nav_sitemap>div>ul>li ul>li {
		padding-left: 1em;
	}
	footer.footer_type1 nav#footer_nav_sitemap>div>ul:nth-child(3)>li ul li {
		width: 47%;
		float: left;
	}
	footer.footer_type1 nav#footer_nav_sitemap>div>ul:nth-child(3) .footer_shop {
		margin-top: 70px;
	}
	footer.footer_type1 #footer-logo-area #footer_logo {
		margin: 50px 0 0;
	}
	footer.footer_type1 #footer-logo-area #footer_mark {
		right: 16%;
	}
	footer.footer_type1 #footer-logo-area #copyright {
		padding-bottom: 50px;
	}
}


/* ===========================
9.見出し
============================== */
.headline_type1 {
	text-align: center;
}
.headline_type1 h2,
.headline_type1 h3 {
	font-size: 1.5rem;
	letter-spacing: 0.8em;
	font-family: arial, sans-serif;
	margin: 0;
}
.headline_type1 p {
	font-size: 1rem;
	letter-spacing: 0.3em;
	margin: 0;
}
.headline_type2 {
	text-align: center;
	font-size: 1.25rem;
	font-weight: normal;
}
.headline_type2 span {
	font-size: 1rem;
	margin-left: 2em;
}
.headline_type3 {
	font-size: 1.125rem;
	font-weight: normal;
}
@media screen and (min-width: 40em) { /* 640px */
	.headline_type1 h2,
	.headline_type1 h3 {
		font-size: 2.1875rem;
	}
	.headline_type1 p {
		font-size: 1.25rem;
		margin: 10px 0 0;
	}
	.headline_type2 {
		font-size: 2.125rem;
	}
	.headline_type2 span {
		font-size: 1.25rem;
	}
	.headline_type3 {
		font-size: 1.75rem;
	}
}


/* ===========================
10.ボタン
============================== */
.button_type1,
.button_type2 {
	margin: 0;
	display: inline-block;
	-webkit-transition:opacity .2s;
	-moz-transition:opacity .2s;
	-o-transition:opacity .2s;
	transition:opacity .2s;
}
.button_type1:hover,
.button_type2:hover {
	opacity : 0.7;
}
.button_type1 a,
.button_type2 a {
	font-size: 0.84rem;
	text-decoration: none;
	color: #000;
	display: inline-block;
	padding: 0.8em 1.7em;
}
.button_type1 a:after,
.button_type2 a:after {
	content: url("../img/common_arrow_s.svg");
	display: inline;
	margin-left: 0.4em;
}
.button_type2 a {
	letter-spacing: 0.3em;
}
.button_type3 {
	font-size: 0.84rem;
	padding: 0.8em 1.7em;
}
@media screen and (min-width: 40em) { /* 640px */
	.button_type1 a,
	.button_type2 a,
	.button_type3 {
		font-size: 1.05rem;
	}
	.button_type1 a:after,
	.button_type2 a:after {
		content: url("../img/common_arrow.svg");
	}
}


/* ===========================
11.ローカルナビゲーション
============================== */

#main_contents .local_nav {
	margin: 40px 6% 0;
}
#main_contents .local_nav ul li {
	font-size: 0;
	margin: 0 0 5px;
	-webkit-transition:opacity .2s;
	-moz-transition:opacity .2s;
	-o-transition:opacity .2s;
	transition:opacity .2s;
}
#main_contents .local_nav ul li:hover {
	opacity : 0.7;
}
#main_contents .local_nav ul li a {
	width: 100%;
	font-size: 1rem;
	text-decoration: none;
	color: #fff;
	display: inline-block;
	padding: 0.4em 0.85em;
}
#main_contents .local_nav ul li a:after {
	content: url("../img/common_arrow_s.svg");
	display: inline;
	margin-left: 0.4em;
}
#main_contents .local_nav ul li.local_current {
	background-color: #fff;
	outline-style: solid;
	outline-width: 1px;
	outline-offset: -1px;
}
#main_contents .local_nav ul li.local_current:hover {
	opacity : 1;
}
#main_contents .local_nav ul li.local_current a {
	pointer-events: none;
}
#main_contents .local_nav ul li.local_current a:after {
	content: none;
}
@media screen and (min-width: 40em) { /* 640px */
	#main_contents .local_nav {
		text-align: center;
		margin: 40px 8% 0;
	}
	#main_contents .local_nav ul li {
		margin: 0 5px 10px;
		display: inline-block;
	}
	#main_contents .local_nav ul li a {
		width: auto;
	}
}
@media screen and (min-width: 61em) {/* 976px  */
	#main_contents .local_nav ul li a {
		font-size: 1.05rem;
		padding: 0.8em 1.7em;
	}
	#main_contents .local_nav ul li a:after {
		content: url("../img/common_arrow.svg");
	}
}