@charset "utf-8";

:root {
	--main-color: #e7511e;
	--text-color: #3C3837;
	--root-font-size: 16;
}

.font-size-sample {
	font-size: .75rem;   /* 12px */
	font-size: .8125rem; /* 13px */
	font-size: .875rem;  /* 14px */
	font-size: 1rem;     /* 16px */
	font-size: 1.25rem;  /* 20px */
	font-size: 1.75rem;  /* 28px */
}

* img{
	width: 100%;
}

body{
	font-family: "Inter", "Noto Sans JP", sans-serif;
	font-size: 1rem;
	line-height: 1.5em;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	color: var(--text-color);
}

.more-btn{
	border: solid 2px var(--main-color);
	margin: 40px auto;
	width: 320px;
	border-radius: 100px;
	transition: all .4s;
}

.more-btn a{
	color: var(--main-color);
	display: block;
	text-align: center;
	font-weight: 500;
	padding: 12px 20px;
	transition: all .4s;
}

.more-btn:hover{
	background: var(--main-color);
}

.more-btn:hover a{
	color: #fff;
}

.gnav{
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
}

.gnav .main-menu{
	display: flex;
	list-style: none;
	justify-content: flex-end;
	margin: 24px 0 0 0;
}

.gnav .logo{
	width: 200px;
	margin: 40px;
}

.gnav .main-menu li{
	margin: 0 0 0 24px;
}

.gnav .main-menu li a{
	display: inline-block;
	color: var(--text-color);
	text-decoration: none;
	position: relative;
}

.gnav .main-menu li a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -10px;
	background: var(--main-color);
	transform: scale(0, 1);
	height: 2px;
	width: 100%;
	transform-origin: right;
	transition: transform .4s;
}

.gnav .main-menu li a:hover::after{
	transform: scale(1, 1);
	transform-origin: left;
}

.gnav .main-menu li.current-menu-item a::after{
	transform: scale(1, 1);
}

/* ハンバーガーメニューのベース（PCでは非表示） */
.menu-toggle{
	display: none; /* デフォルトは非表示（PC用） */
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	align-self: center;
}

.menu-toggle span{
	display: block;
	width: 24px;
	height: 2px;
	margin: 4px 0;
	background: var(--text-color);
	transition: transform .3s, opacity .3s;
}

/* 開いているときのアニメーション（X印） */
.gnav.is-open .menu-toggle span:nth-child(1){
	transform: translateY(6px) rotate(45deg);
}
.gnav.is-open .menu-toggle span:nth-child(2){
	opacity: 0;
}
.gnav.is-open .menu-toggle span:nth-child(3){
	transform: translateY(-6px) rotate(-45deg);
}

.slides{
	margin: 0 auto;
	width: 60vw;
}

.top-catch{
	text-align: center;
	padding: 0 20px;
	font-size: 1.6rem;
	line-height: 2em;
	color: var(--main-color);
	font-weight: 600;
}

.top-catch span{
	display: block;
}

.top-section{
	margin: 140px auto;
	max-width: 1100px;
	padding: 0 20px;
}

.subtitle{
	font-size: 2rem;
	text-align: center;
	font-weight: 600;
	color: var(--main-color);
	margin: 60px 0;
}

.top-section .description{
	font-weight: 500;
	margin: 40px auto;
	max-width: 880px;
	line-height: 2em;
}

.blog-list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.blog-list .blog{
	width: 45%;
	margin: 0 0 60px 0;
}

.blog-list .blog .time-category{
	display: flex;
	justify-content: space-between;
	margin: 0 0 12px 0;
}

.blog-list .blog .time-category .tag-list{
	display: flex;
	justify-content: space-between;
}

.blog-list .blog .time-category .tag-list li{
	margin: 0 0 0 4px;
}

.blog-list .blog .time-category .tag-list li::before{
	content: "#";
	margin: 0 1px 0 0;
}

.blog-list .blog .thumbnail{
	width: 100%;
	aspect-ratio: 3/2;
	background-position: center center;
	background-size: cover;
	border: solid 2px var(--main-color);
	border-radius: 40px;
	transition: all .4s;
	position: relative;
}

.blog-list .blog .new{
	position: absolute;
	top: 20px;
	left: 20px;
	border-radius: 100px;
	color: #fff;
	background: var(--main-color);
	font-size: 1.2rem;
	font-weight: 500;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	transform: rotate(-20deg);
	transition: all .4s;
}

.blog-list .blog .blog-title{
	font-weight: 500;
	line-height: 2em;
	text-align: center;
	margin: 14px 0 0 0;
}

.blog-list .blog a{
	display: block;
}

.blog-list .blog a:hover .thumbnail{
	border-radius: 0px;
}

.blog-list .blog a:hover .thumbnail .new{
	transform: rotate(0deg);
}

.blog-list .blog a:hover .blog-title{
	color: var(--main-color);
}

.footer .pankuzu{
	padding: 20px;
	background: var(--main-color);
	color: #fff;
}

.footer .links{
	margin: 100px 0;
}


.footer .links .logo-list{
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer .links .logo-list li{
	width: 200px;
	margin: 0 40px;
	text-align: center;
}

.footer .links .logo-list li span{
	display: block;
	margin: 20px 0;
	font-size: 0.8rem;
}

.footer .copyright{
	display: block;
	color: #777;
	text-align: center;
	margin: 40px 0;
}

.top-pankuzu{
	padding: 0 20px;
	margin: 40px 0;
	color: #777;
}

.title{
	margin: 100px 0 60px 0;
	line-height: 2em;
}

.title .page-title{
	text-align: center;
	font-size: 2.2rem;
	font-weight: 600;
	color: var(--main-color);
}

.title .page-title span{
	display: block;
	margin: 20px 0 0 0;
	font-size: 1rem;
}

.contents{
	padding: 0 20px;
}

.contents .page-eyecatch{
	max-width: 1140px;
	margin: 0 auto;
}

.contents .article p{
	max-width: 880px;
	margin: 40px auto;
	line-height: 2em;
}

.contents .article p a{
	color: #00bf;
	text-decoration: underline;
}

.contents .article p a:hover{
	text-decoration: none;
}

.contents .article .member{
	max-width: 920px;
	margin: 40px auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.contents .article .member::after{
	content: "";
	display: block;
	width: 32%;
}

.contents .article .member li{
	width: 32%;
	margin: 0 0 32px 0;
}

.contents .article .member p{
	margin: 12px 0;
	text-align: center;
}

.contents .article .member p.member-katagaki{
	font-size: .8rem;
}

.contents .blog-list,
.contents .podcast-list{
	max-width: 920px;
	margin: 40px auto;
}

.contents .podcast-list li{
	border-top: solid 1px var(--main-color);
	padding: 20px 0;
}

.contents .article-title{
	max-width: 920px;
	margin: 40px auto;
	font-size: 1.6rem;
	line-height: 2em;
	font-weight: 500;
	color: var(--main-color);
}

.title time{
	display: block;
	text-align: center;
}

.title .blog-title{
	font-size: 2rem;
	font-weight: 500;
	text-align: center;
	margin: 12px 0 20px 0;
	color: var(--main-color);
}

.title .tag-list{
	display: flex;
	justify-content: center;
	margin: 40px 0;
}

.title .tag-list li a{
	margin: 0 20px;
	color: #777;
}

.title .tag-list li a::before{
	content: "#";
	margin: 0 .1em;
}

.title .tag-list li a:hover{
	color: var(--main-color);
}


/* ========== 850px以下 ========== */
@media screen and (max-width: 850px){
	
.gnav{
	padding: 8px 16px;
	align-items: center;
	position: relative;
}

.gnav .logo{
	margin: 8px;
	width: 160px;
}

.menu-toggle{
	display: block;
}

.gnav .main-menu{
	position: absolute;
	top: 100px;
	left: 0;
	width: 100%;
	margin: 0;
	background: #fff;
	list-style: none;
	display: none; /* 初期は非表示 */
	flex-direction: column;
	border-top: 1px solid #eee;
	z-index: 100;
	background: var(--main-color);
}

/* 開いたときだけ表示 */
.gnav.is-open .main-menu{
	display: flex;
}

.gnav .main-menu li{
	margin: 0;
	border-bottom: solid 1px #fff;
}

.gnav .main-menu li a{
	display: block;
	font-weight: 500;
	text-align: center;
	padding: 16px;
	color: #fff;
}

/* スライドショーの幅調整 */
.slides{
	width: 96%;
}

.top-catch{
	padding: 16px;
	font-size: 1rem;
	text-align: left;
}

.top-catch span{
	display: inline;
}

.top-section .description{
	font-size: .8rem;
}

.top-section{
	margin: 80px auto;
	padding: 0 16px;
}

.more-btn{
	width: 240px;
}

.more-btn a{
	padding: 6px 12px;
}

.blog-list{
	flex-direction: column;
}

.blog-list .blog{
	width: 100%;
	margin: 0 0 40px 0;
}

.footer .links{
	margin: 60px 0;
}

.footer .links .logo-list{
	flex-direction: column;
}

.footer .links .logo-list li{
	margin: 20px 0;
}

.top-pankuzu,
.footer .pankuzu{
	padding: 16px;
	white-space: nowrap;
	overflow-x: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	font-size: .6rem;
}

.top-pankuzu::-webkit-scrollbar,
.footer .pankuzu::-webkit-scrollbar{
		display: none;
}

.top-pankuzu{
	padding: 0 16px;
	margin: 24px 0;
}

.title{
	margin: 60px 0 40px 0;
	padding: 0 16px;
}

.title .page-title,
.title .blog-title{
	font-size: 1.6rem;
}

.subtitle{font-size: 1.4rem;}

.contents{
	padding: 0 16px;
}

.contents .article p{
	font-size: .9rem;
}

.contents .article .member{
	flex-direction: column;
}

.contents .article .member::after{
	display: none;
}

.contents .article .member li{
	width: 100%;
}

}