@charset "utf-8";
/*===============================================
●共通
===============================================*/
/* header */
.article .headerMenu .fixed .inner .headerLogo {
	display: flex;
	align-items: center;
}
.article .headerMenu .fixed .inner .headerLogo #memberOnly {
	font-family: "Noto Sans JP", sans-serif;
	background-color: #915E4D;
	color: #fff;
	padding: 0.3em 0.5em;
	letter-spacing: 0.02em;
}

/* contents */
.contents .inner {
	position: relative;
	background-color: #fff;
}
.contentsbox {
	position: relative;
	text-align: center;
}
.contentsbox .enTitle {
	position: absolute;
	left: 50%;
	font-family: "Kodchasan", sans-serif;
	color: #fff;
}
.contentsbox .inner header {text-align: center;}
.contentsbox .inner header p {
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 0.05em;
	position: relative;
}
.tit_style01 {
	font-family: "Kiwi Maru", serif;
	color: #FFBD82;
	letter-spacing: 0.2em;
	line-height: 1em;
	text-align: center;
}
.contentsWrap .contentsText,
.contentsWrap #greetingSighn {
	letter-spacing: 0.02em;
}
.contentsWrap #greetingSighn {
	text-align: right;
}

/* topicsWrap */
#topicsWrapBack {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #FFBD82;
}
#topicsWrap .headImage {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
#topicsWrap .articleWrap .tit_style03 {padding-bottom: 1em;}
#topicsWrap.tit_style01 {margin-bottom: 0.5em;}
#topicsWrap #categoryBox {
	display: flex;
	justify-content: center;
}
#topicsWrap #categoryBox .current,
#topicsWrap #categoryBox li a {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.94em;
	font-weight: bold;
	color: #FFBD82;
}
#topicsWrap #categoryBox .current {
	background-color: #FDE67C;
}
#topicsWrap #categoryBox li a {
	background-color: #EEF2F2;
}
#topicsWrap #topicsBox li {
	border-bottom: 1px solid #E2EDF1;
}
#topicsWrap #topicsBox li a div {
	display: flex;
	align-items: center;
}
#topicsWrap #topicsBox li a time {
	color: #FFBD82;
}
#topicsWrap #topicsBox li a .label {
	background-color: #EEF2F2;
	color: #FFBD82;
	text-align: center;
	font-weight: bold;
}
#topicsWrap #topicsBox li a p {
	line-height: 1.5;
}

/* archiveWrap */
#archiveWrap ul {
	display: flex;
	flex-wrap: wrap;
}
#archiveWrap ul li a {
	display: block;
}
#archiveWrap ul li .inlineBox {
	display: none;
}
.article video {
	width: 100%;
}
.article #cboxLoadedContent {
	margin-bottom: 0;
}

/* article_select */
.article_select .selectHead {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.article_select .selectHead .label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 88px;
	font-size: 0.94em;
	font-weight: bold;
	background-color: #EEF2F2;
	color: #bd8f65;
	padding: 0.2em 0;
}
.article_select .selectHead time {
	font-size: 1.125em;
	color: #bd8f65;
}
.article_select h1 {
	font-weight: bold;
	color: #bd8f65;
	line-height: 1.5;
	border-bottom: 1px solid #E2EDF1;
	padding-bottom: 0.5em;
	margin-bottom: 1em;
}
.article_select .selectCaption {
	line-height: 1.7;
}
.article_select .btn a {
	display: flex;
	align-items: center;
	width: 150px;
	color: #fff;
	border: 1px solid #bd8f65;
	font-size: 0.94em;
	padding: 0.3em 0;
	background-color: #bd8f65;
}
.article_select .btn a span {
	transform: rotate(90deg);
	margin: 0 0.7em;
}
.article_select .btn a span svg {
	width: 10px;
	height: 10px;
	fill: #fff;
}
.article_select .selectCaption a {
	text-decoration: underline;
}
.article_select .selectCaption a:hover {
	text-decoration: none;
	opacity: 1;
}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px){

	/* .article .headerMenu .fixed .inner .headerLogo a {
		margin-right: 1em;
	}
	.article .headerMenu .fixed .inner .headerLogo #memberOnly span {
		display: block;
	}
	.article .headerMenu .inner nav ul li {
		border-top: 1px dashed #FFBD82;
	} */
	
	/*共通*/
	.tit_style01 {
		font-size: 1.6em;
		padding-bottom: 1em;
	}
	.contentsbox .inner header p {
		font-size: 1.2em;
		margin-bottom: 1.5em;
	}
	
	/* contents */
	.contents {
		padding-top: 70px;
	}
	.contentsbox {
		height: 180px;
	}
	.contentsWrap .inner {padding: 1em 20px 5em;}
	#topicsWrap .headImage div:first-child {
		text-align: left;
	}
	#topicsWrap .headImage div:last-child {
		text-align: right;
	}
	#topicsWrap .headImage img {
		width: 30%;
	}
	.contentsbox .enTitle {
		top: 50%;
		font-size: 2em;
		transform: translate(-50%, -50%);
		letter-spacing: 0.3em;
	}
	.contentsWrap .contentsText {
		margin-bottom: 1.5em;
	}
	#topicsWrapBack {
		padding: 0 1em;
	}
	#topicsWrap .inner {
		padding-bottom: 3em;
	}
	#topicsWrap .enTitle {
		/* width: 100%; */
		line-height: 1.2;
		background-color: #FFBD82;
	}
	#topicsWrap #categoryBox {
		margin-bottom: 2.5em;
	}
	#topicsWrap #categoryBox .current,
	#topicsWrap #categoryBox li a {
		width: 80px;
		padding: 0.3em 0;
	}
	#topicsWrap #categoryBox li:not(:last-child) {
		margin-right: 1em;
	}
	#topicsWrap #topicsBox li {
		padding: 0.7em 0;
	}
	#topicsWrap #topicsBox li a div {
		margin-bottom: 0.7em;
	}
	#topicsWrap #topicsBox li a div time {
		width: 80px;
	}
	#topicsWrap #topicsBox li a div .label {
		width: 80px;
		padding: 0.2em 0;
	}

	/* archiveWrap */
	#archiveWrap ul {
		margin-bottom: 2em;
	}
	#archiveWrap ul li {
		width: 48%;
	}
	#archiveWrap ul li:nth-child(odd) {
		margin-right: 4%;
	}
	#archiveWrap ul li:nth-child(-n+4) {
		margin-bottom: 1em;
	}

	/* footer */
	.article footer address span .pcNone {
		font-size: 1em;
	}

	/* article_select */
	.article_select .selectHead {
		margin-bottom: 1em;
	}
	.article_select h1 {
		font-size: 1.2em;
	}
	.article_select .selectCaption {
		margin-bottom: 3em;
	}
	.article_select iframe {
		width: 100%;
	}
}

/*===============================================
●画面の横幅が374px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 374px){
	.article .headerMenu .fixed .inner .headerLogo a,
	.article .headerMenu .fixed .inner .headerLogo #memberOnly {
		font-size: 0.8em;
	}
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px){
	

	/* header */
	.article .headerMenu {
		margin: 0;
	}
	.article .headerMenu .fixed .inner nav ul li:last-child a span svg {
		fill: #1E73B4;
	}

	.contents {
		font-size: 16px;
	}

	/*共通*/
	.tit_style01 {
		font-size: 2.75em;
		padding-bottom: 1.2em;
	}
	.contentsWrap .contentsText,
	.contentsWrap #greetingSighn {
		line-height: 2;
	}
	.contentsWrap .contentsText {
		margin-bottom: 2.81em;
	}

	.contents .inner {
		padding: 1.5em 6.25em 10.66em;
		margin-top: -3.5em;
	}
	.contentsbox {
		height: 350px;
	}
	.contentsbox .enTitle {
		top: 40%;
		transform: translateX(-50%);
		font-size: 3.75em;
		letter-spacing: 0.2em;
		line-height: 1;
	}
	#topicsWrap .headImage {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	#topicsWrap .headImage {
		max-width: 1060px;
		padding-bottom: 3%;
	}
	#topicsWrap #categoryBox {
		margin-bottom: 4.375em;
	}
	#topicsWrap #categoryBox li:not(:last-child) {
		margin-right: 1.875em;
	}
	#topicsWrap #categoryBox li a:hover {
		background-color: #FDE67C;
		opacity: 1;
	}
	#topicsWrap #categoryBox .current,
	#topicsWrap #categoryBox li a {
		width: 100px;
		padding: 0.7em 0;
	}
	#topicsWrap #topicsBox li a {
		display: flex;
		align-items: center;
		padding: 1.63em 0 1.31em;
	}
	#topicsWrap #topicsBox li a time {
		width: 100px;
		font-size: 1.125em;
	}
	#topicsWrap #topicsBox li a .label {
		width: 88px;
		font-size: 0.94em;
		padding: 0.5em 0;
		margin-right: 1.8em;
	}
	#topicsWrap #topicsBox li a p {
		font-size: 1.125em;
	}

	/* archiveWrap */
	#archiveWrap ul {
		margin-bottom: 4.375em;
	}
	#archiveWrap ul li {
		width: 31%;
	}
	#archiveWrap ul li:not(:nth-child(3n)) {
		margin-right: 3.5%;
	}
	#archiveWrap ul li:nth-child(-n+3) {
		margin-bottom: 1.875em;
	}

	/* article_select */
	.article_select .selectHead {
		margin-bottom: 1.5em;
	}
	.article_select h1 {
		font-size: 1.5em;
	}
	.article_select .selectCaption {
		margin-bottom: 5.8em;
	}
}