/*
Theme Name: KNITGRÜ
Theme URL: https://knitgru.cre8nova.com/
Description: Wordpress Theme for KNITGRÜ
Author: Mekeweb
Version: 1.1.0
*/
:root {
	/* カラー */
	--bg-color: #F9F8F5;
	--txt-color: #2F2F2F;
	--dark-gray: #666666;
	--mid-gray: #DCDCDC;
	--light-gray: #F2F2F2;
	--smokeblue: #35476A;
	--yellow: #E0A912;
	--red: #D35C5C;
	--green: #6AD4B0;
	/* フォント */
	--font-header: "Agenda One", sans-serif;
	--font-base: "Zen Kaku Gothic New", sans-serif;
}
/***** アイコン *****/
.icon.yellow{
	fill: var(--yellow);
}
.icon.blue{
	fill: var(--smokeblue);
}
.icon.mid-gray{
	fill: var(--mid-gray);
}
/***** aタグ設定*****/
a {
	color: var(--smokeblue);
	display: inline-block;
	width: 100%;
}
img {
	margin: 0 auto;
	width: 100%;
}

/*------------------------------------------
	全体のBody要素のセッティング
------------------------------------------*/
body {
	background: var(--bg-color);
	color: var(--txt-color);
	font-family: var(--font-base);
	font-weight: 400;
	font-style: normal;
	width: 100%;
	min-height: 100vh;
}
/* コンテナの余白設定
------------------------------------------*/
main {
	margin: 0 auto;
	padding: 30px 20px;
}
main.front{
	padding-top: 64px;
}
section.side {
	padding: 2rem 1rem;
}

/*------------------------------------------
	ヘッダー
------------------------------------------*/
header.site-header {
	width: 100%;
	height: 64px;
	position: fixed;
	z-index: 1000;
	background: rgba( 249,248,245,0.75 );
}
div.logo {
	width: 120px;
	height: 64px;
	line-height: 64px;
	margin: 0 auto;
	left: calc(50% - 60px);
}
svg.logo{
	width: 120px;
	height: 22px;
	fill: var(--txt-color);
}

.search_nav > svg.icon{
	height: 24px;
}
/* navigation
------------------------------------------*/
/* ハンバーガー本体 */
.navigation{
	width: 64px;
	height: 64px;
	position: absolute;
	top: 0;
}
nav.main-nav{
	right: 0;
}
.hamburger_nav, .search_nav {
	width: 64px;
	height: 64px;
	top: 0;
	right: 20px; /* 右上に表示する場合（leftならleft:20px） */
	z-index: 1001;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.search_nav {
	left: 20px;
}
/* ハンバーガーの3本線 */
.hamburger_nav span {
	display: block;
	width: 20px;
	height: 3px;
	background-color: var(--dark-gray);
	margin: 0 auto;
	border-radius: 3px;
}
.hamburger_nav :nth-child(2) {
	margin: 3px 0;
}
.search_nav :nth-child(2) {
	margin: 3px 0;
	display: block;
	width: 20px;
	height: 20px;
	mask: url(../knitgru/images/icons/search.svg) no-repeat center;
	-webkit-mask: url(../knitgru/images/icons/search.svg) no-repeat center;
	background-color: var(--dark-gray);
}
.search_nav.open span {
	display: block;
	mask: none;
	width: 20px;
	height: 3px;
	background-color: var(--dark-gray);
	margin: 0 auto;
	border-radius: 3px;
}
/* 閉じるボタン */
.hamburger_nav.open span:nth-child(1) {
	transform: rotate(45deg) translate(4px, 4px);
}
.search_nav.open span:nth-child(1) {
	transform: rotate(45deg) translate(2px, 2px);
}
.hamburger_nav.open span:nth-child(2), .search_nav.open span:nth-child(2) {
	opacity: 0;
}
.hamburger_nav.open span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}
.search_nav.open span:nth-child(3) {
	transform: rotate(-45deg) translate(2px, -2px);
}
/* メインメニュー全体（スライドメニュー化） */
.main-menu, .search-menu {
	position: fixed;
	top: 0;
	width: 75%;
	height: auto;
	background: var(--bg-color);
	z-index: -1;
	margin: 0 auto;
	padding: 20px;
	padding-top: 64px;
	transition: right 0.3s ease;
	list-style: none;
}
.main-menu {
	right: -100%;
	box-shadow: -2px 0 6px rgba(0, 0, 0, 0.15);
}
.search-menu {
	left: -100%;
	box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
	transition: left 0.3s ease;
}
/* 開いた状態 */
.main-menu.open {
	right: 0;
}
.search-menu.open {
	left: 0;
}
/* メニュー項目 */
.main-menu li, .search-menu li {
	height: 44px;
	line-height: 44px;
	text-align: center;
}
.main-menu li::after, .search-menu li::after {
	content: '';
	display: block;
	width: 70%;
	height: 1px;
	margin: 0 auto;
	background-color: var(--mid-gray);
}
.main-menu li a, .search-menu li a {
	text-decoration: none;
	color: var(--dark-gray);
	font-size: 16px;
}
/* breadcrumbs
------------------------------------------*/
div.breadcrumbs{
	padding-top: 64px;
}
ul.bc{
	display: flex;
	list-style: none;
	font-size: 0.88em;
	padding-left: 0.5rem;
}
ul.bc li {
	display: inline-flex;
}
ul.bc li a {
	color: inherit;
	text-decoration: none;
}.sep > .icon{
	width: 8px;
	height: 21px;
	margin: 0 10px;
}

/*------------------------------------------
	フッター
------------------------------------------*/
footer.site-footer {
	width: 100%;
	height: 32px;
	line-height: 32px;
	background: var(--dark-gray);
	color: var(--bg-color);
	margin: 0 auto;
	font-size: 0.85em;
	text-align: center;
}
footer.site-footer p {
	width: 100%;
	margin-block-start: 0;
	margin-block-end: 0;
}

/*------------------------------------------
	メイン
------------------------------------------*/
/***** 共通パーツの設定 *****/
div.h1_deco{
	margin-bottom: 0.5em;
	text-align: center;
}
div.h1_deco .icon{
	width: 1em;
	height: 20px;
}
h1.page-title{
	margin: 0 auto;
	font-size: 1.25em;
	font-weight: 900;
	text-align: center;
	
}
header.page-header{
	margin-bottom: 60px;
}
span.red{
	color: var(--red);
}
/*------------------------------------------
	フォーム
------------------------------------------*/
/* status
------------------------------------------*/
.form-status{
	display: flex;
	justify-content: space-around;
	padding: 0 50px;
	font-size: 0.75em;
}
.form-status div{
	width: 60px;
	height: 34px;
	line-height: 32px;
	border-radius: 2em;
	border-color: var(--smokeblue);
	border: 1px solid;
	color: var(--smokeblue);
	text-align: center;
	font-weight: 600;
}
.form-status .now{
	background: var(--mid-gray);
}
.form-status svg.icon{
	width: 12px;
	height: 34px;
}
/* form table
------------------------------------------*/
.register-wrapper{
	padding: 20px;
}
.form-group{
	margin-bottom: 60px;
}
.form-group label {
	display: inline-block;
	width: 100%;
	padding: 0.25rem 1.2rem;
	background: var(--smokeblue);
	color: var(--bg-color);
	border-radius: 1em;
}
.form-group label::before{
	content:"● ";
}
.form-group > .note{
	margin-left: 0.75rem;
	margin-right: 0.75rem;
}
.form-group input {
	width: -webkit-fill-available;
	width: -moz-available;
	width: stretch;
	height: 2.5rem;
	line-height: 2.5rem;
	margin-left: 0.75rem;
	margin-right: 0.75rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	font-size: 1rem;
}