@charset "utf-8";
/*
Theme Name:	 	東行庵 高杉晋作まつり 仮
Description:	東行庵 高杉晋作まつりテンプレート
Author:			阿部まり子
Version:		2.0.1
*/

* {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	text-decoration: none;
	list-style: none;
	box-sizing: border-box;
	border: none;
}

html {
	font-size: 62.5%;	/* -> 10px */
	background: #fff;
	width: 100%;
	overflow-x: hidden;
    scroll-behavior: smooth;	/* ふわっと上に戻る */
    -webkit-overflow-scrolling: touch;
}

body {
	overflow: hidden;
	padding: 0 5vw;
}

 /* リンク */
a {
	transition: filter 0.1s ease;
	filter: brightness(1.0);
}
a:hover ,
input[type="submit"]:hover {
	filter: brightness(1.05);
	position: relative;
	top: 1px;
}
main a {
	text-decoration: underline;
}
main a:hover ,
footer p.pagetop a {
	text-decoration: none;
}

 /* アイコン */
i {
	margin-right: 0.5rem;
}

 /* 画像 */
main img {
	width: 100%;
	height: auto;
}


/**************************************************
色
**************************************************/

/* 水色 */
body ,
.nav-open .nav {
	background: #93B4BE;
}

/* 濃い水色 */
#homePage #info ,
#homePage #contact ,
#rekisou-formPage #disclaimer {
	background: #84A2AB;
}
#postList li {
	border: 1px solid #84A2AB;
}

/* 紺 */
h3 ,
.profile h2  ,
.achievements ,
.achievements h3 ,
.achievements a ,
#postHeader .postTitle {
	color: #356472;
}
.profile .achievements a {
	border-bottom: dotted 1px #356472;
}

/* クリーム */
html , a , h4 ,
header .sns a ,
#homePage #map h3 ,
#homePage #timetable h3 ,
#homePage #timetable .break ,
footer table {
	color: #FBFBF3;
}
header .main ul ,
table ,
#homePage #timetable .program dd ,
#postList li {
	background: #FBFBF3;
}
#homePage #map h3 ,
#homePage #timetable .program img {
	border-color: #FBFBF3;
}

/* 赤茶 */
.btn a ,
input[type="submit"] {
	color: #fff;
	background: #AF644F;
}
#homePage #timetable .program .time {
	color: #AF644F;
}

/* 灰色 */
header .main a ,
table ,
.profile .affiliation ,
.profile .link a ,
#homePage #timetable .program dd ,
#postList h2 ,
#postList p ,
#postHeader p {
	color: #555;
}
nav.pankuzu ,
.hamburger_border ,
.more a {
	background: #555;
}

/* 濃い灰色 */
footer table ,
#bana {
	background: #1a1a1a;
}

/* 黒 */
footer {
	background: #000;
}

/* 金 */
header .btn-rekisou-form a ,
#homePage #timetable ,
#homePage #timetable .break {
	background: #c6b999;
}

/* 濃い金 */
#homePage #timetable #am ,
#homePage #timetable #pm {
	background: #B9AC89;
}

/* さらに濃い金 */
#homePage #timetable #all-day {
	background: #AFA07A;
}

/* SNSアイコン */
main .fa-x-twitter {
  color: #000;
}
main .fa-youtube {
  color: #DA1725;
}
main .fa-instagram {
  color: #fff;
}
main .fa-facebook {
  color: #1877f2;
}




/**************************************************
角丸
**************************************************/

.btn a ,
.pageNav a ,
input[type="submit"] {
	border-radius: 100px;
}

input[type="text"] ,
input[type="url"] ,
input[type="email"] ,
textarea {
	border-radius: 3px;
}

table ,
header .main ul ,
#postList li {
	border-radius: 5px;
}
#homePage #timetable .program dd {
	border-radius: 0 5px 5px 0;
}

/**************************************************
ボタン
**************************************************/

.btn {
	text-align: center;
}
.btn a ,
input[type="submit"] {
	display: inline-block;
	padding: 1.5rem 4rem;
	font-size: 1.5rem;
	line-height: 1rem !important;
	text-align: center;
	color: #fff;
	text-decoration: none !important;
}
header .nav .btn a {
	display: block;
	font-size: 1.4rem;
	padding: 1.4rem 0;
}

main .more a {
    background-image: url('img/icom-circle-arrow-right.svg');
	background-position: 90% 50%;
	background-repeat: no-repeat;
	background-size: 1.6rem 1.6rem;
}

/**************************************************
フォント・文字サイズ
**************************************************/

/* 400 */
@font-face {
	font-family: "Zen Kaku Gothic New";,
	src: local("Zen Kaku Gothic New"),
		url('font/ZenKakuGothicNew-Regular.eot') format('eot'),
		url('font/ZenKakuGothicNew-Regular.ttf') format('ttf'),
		url('font/ZenKakuGothicNew-Regular.woff') format('woff'),
		url('font/ZenKakuGothicNew-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
/* 500 */
@font-face {
    font-family: "Zen Kaku Gothic New Medium";
	src: local("Zen Kaku Gothic Medium"),
		url('font/ZenKakuGothicNew-Medium.ttf') format('ttf'),
		url('font/ZenKakuGothicNew-Medium.eot') format('eot'),
		url('font/ZenKakuGothicNew-Medium.woff') format('woff'),
		url('font/ZenKakuGothicNew-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
	font-display: swap;
}
/* 700 */
@font-face {
    font-family: "Zen Kaku Gothic New Bold";
	src: local("Zen Kaku Gothic Bold"),
		url('font/ZenKakuGothicNew-Bold.ttf') format('ttf'),
		url('font/ZenKakuGothicNew-Bold.eot') format('eot'),
		url('font/ZenKakuGothicNew-Bold.woff') format('woff'),
		url('font/ZenKakuGothicNew-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
	font-display: swap;
}

/* Zen Kaku Gothic New */
html {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/* 特大 */
h2 {
	font-size: 2rem;
	line-height: 1.2;
	text-align: center;
}

/* 大 */
h3 {
	font-size: 1.4rem;
	line-height: 1.2;
}

/* 標準：13px */
h4 ,
main p ,
main li ,
main dt ,
main dd ,
main td ,
#postlist h2 {
	font-size: 1.3rem;
	line-height: 1.6;
}
h4 {
	font-weight: 700;
}

/* 12px */
main th ,
footer ,
footer p.pagetop ,
#postlist p ,
#postHeader p {
	font-size: 1.2rem;
	line-height: 1.6;
}

/**************************************************
本文
**************************************************/

/* ページタイトル */
#pageTitle {
	margin: 0 -5vw;
	padding: 4rem 5vw;
	text-align: center;
	font-size: 2rem;
	line-height: 1;
	background-image: url('img/bg-washi.webp');
    background-size: cover;
}

/* ページ本文 */
#pageContent {
	padding: 8vw 0;
}
#pageContent > *:first-child {
	margin-top: 0 !important;
}
#pageContent > *:last-child ,
#pageContent > *:last-child form:last-child {
	margin-bottom: 0 !important;
}

body.page main h2  {
	margin: 8vw 0;
}
main form {
	margin: 4vw auto;
}
body.page main p {
	margin: 1rem 0;
}

/* リスト */
body.page main ul ,
body.page main ol {
	margin-top: 2rem;
	margin-bottom: 2rem;
}
body.page main li {
	margin-left: 3rem;
	margin-right: 1rem;
	list-style: disc;
}
body.page main ol li {
	list-style: decimal;
}
body.page main ul.longText li {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

/* 定義リスト */
body.page main dl {
	margin: 2rem 0;
}
body.page main dt {
	font-weight: 500;
}



/* テーブル */
table {
	width: auto;
	border-collapse: collapse;
}
th ,
td {
	padding: 0;
	line-height: 1.4;
	text-align: left;
	vertical-align: top;
}
th {
	white-space: nowrap;
	font-weight: 500;
}

/* 角丸テーブル */
table {
	margin: auto;
}
th {
	padding: 0.28rem 1rem 0.28rem 10vw;}
td {
	padding: 0.25rem 10vw 0.25rem 1rem;
}
tr:first-of-type th ,
tr:first-of-type td {
	padding-top: 3.75rem;
}
tr:last-of-type th ,
tr:last-of-type td {
	padding-bottom: 3.75rem;
}

/* Firefoxだけルビ非表示 */
@-moz-document url-prefix() {
	rt {
		display: none;
	}
}

/**************************************************
パンくずリスト
**************************************************/

nav.pankuzu {
	margin: 0 -5vw;
	padding: 1rem 5vw;
}
nav.pankuzu li {
	display: inline;
	line-height: 1.4;
}
nav.pankuzu ul li:after {
	content: ">";
	margin: 0 0.5rem;
	line-height: 1.4;
}
nav.pankuzu ul li:last-child:after {
	content: "";
}

/* スマホの時 上のパンくずリストは非表示 */
@media only screen and (max-width: 768px) {
	nav.pankuzu:nth-of-type(1) {
		display: none;
	}
}

/**************************************************
上へ
**************************************************/

#pagetop {
	margin: 0 -5vw;
	padding: 0 5vw 8vw;
	text-align: right;
	font-size: 1.3rem;
}
#pagetop a {
    text-decoration: none;
}

/**************************************************
ページナビゲーション
**************************************************/

/* 前後記事ナビ */
#pageNav ul {
	display: flex;
	justify-content: flex-end;
}
#pageNav li {
	margin: 0 0 0 0.5rem;
	list-style: none;
}
#pageNav a {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 32.5px;
	font-size: 20px;
	text-align: center;
	text-decoration: none;
	background: #000;
	color: #fff;
}

/**************************************************
Googleマップ https://groworks.jp/blog/4389
**************************************************/

.map {
    position: relative;
    width: 100%;
    padding-top: 100%;	/* 1:1のアスペクト比 */
    height: 0;
}
.ratio16_9 {
    padding-top: 56.25%;	/* 16:9のアスペクト比 */
}
.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/**************************************************
404ページ
**************************************************/

#error404Page main {
	text-align: center;
}

/**************************************************
タブレットの時
**************************************************/

@media only screen and (min-width: 768px) {

	/* スマホ用改行非表示 */
	br.sp {
		display: none;
	}

	/* ページタイトル */
	#pageTitle {
		padding: 6rem 5vw;
		font-size: 4rem;
	}

	/* 特大 */
	h2 {
		font-size: 3rem;
	}

	/* 標準：16px */
	h3 ,
	main p ,
	main li ,
	main dt ,
	main dd ,
	main td {
		font-size: 1.6rem;
	}

	/* 15px */
	#postList h2 {
		font-size: 1.5rem;
	}

	/* 14px */
	main th ,
	#postList p ,
	#postHeader p {
		font-size: 1.4rem;
	}

}

/**************************************************
PCの時
**************************************************/

@media only screen and (min-width: 1000px) {

	/*下位ページ*/
	.page main > div {
		max-width: 800px;
		margin: 0 auto;
	}

	/* 幅広めページ */
	#memberPage main > div {
		max-width: 1000px;
	}

}