@charset "utf-8";

/*		Contents
---------------------------------------------------------------------------
	paging（ページング）
	widget_title（ページタイトル）
	widget_btn（ボタン）
	widget_list（投稿一覧）
------------------------------------------------------------------------ */

/* ========================================================================
	paging（ページング）
======================================================================== */
.paging{
	padding:0 0 50px 0;
	text-align:center;
	line-height:4.0rem;
}

.paging span,
.paging a{
	display:inline-block;
	margin:0 10px 10px;
	vertical-align:bottom;
}

.paging span.current,
.paging a{
	width:40px;
	background:#3c3c3c;
	border-radius:5px;
	color:#ffffff;
}

.paging a{
	color:#383838;
	background:#ffffff;
	text-decoration:none;
	transition-duration:0.2s;
}
.paging a:hover{ background:#3c3c3c; color:#ffffff; }

@media screen and (max-width:767px){
.paging{
	margin:0 -5px;
	padding:0 0 30px 0;
}

.paging span,
.paging a{
	margin:0 5px 10px;
}
}


/* ========================================================================
	widget_title（ページタイトル）
======================================================================== */
.widget_title .ja{
	display:block;
	font-size:3.6rem;
	font-weight:700;
	line-height:1;
	letter-spacing:0.05em;
}

.widget_title .en{
	display:block;
	position:relative;
	padding:24px 0 14px 0;
	text-transform:uppercase;
	font-size:1.8rem;
	line-height:1;
}

.widget_title .en::before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:52px;
	height:2px;
	background:#222222;
}

@media screen and (max-width:767px){
.widget_title .ja{
	font-size:2.4rem;
	line-height:3.4rem;
}

.widget_title .en{
	padding-top:16px;
	font-size:1.4rem;
}

.widget_title .en::before{
	width:40px;
}
}


/* ========================================================================
	widget_btn（ボタン）
======================================================================== */
.widget_btn{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:40px;
	margin:0 0 60px 0;
}

.widget_btn a,
.widget_btn button{
	display:flex;
	justify-content:center;
	align-items:center;
	min-width:310px;
	min-height:64px;
	padding:14px 20px;
	background:#414141;
	border-radius:5px;
	font-size:1.8rem;
	font-weight:700;
	color:#ffffff;
	line-height:2.8rem;
	letter-spacing:0.05em;
	text-decoration:none;
}

@media screen and (max-width:767px){
.widget_btn{
	gap:20px;
	margin:0 0 40px 0;
}

.widget_btn a,
.widget_btn button{
	min-width:auto;
	min-height:60px;
	width:100%;
}
}


/* ----------------------------------------
	green
---------------------------------------- */
.widget_btn .green{
	background:#3fa873;
}


/* ========================================================================
	widget_list（投稿一覧）
======================================================================== */
.widget_list{
	padding:0 0 50px 0;
}

.widget_list a{
	display:flex;
	align-items:flex-start;
	position:relative;
	margin:0 0 10px 0;
	padding:38px 68px 38px 70px;
	background:url(../../img/common/arrow_01.png) no-repeat right 35px center #ffffff;
	background-size:13px 10px;
	border-radius:10px;
	line-height:3.0rem;
	text-decoration:none;
}

.widget_list a::before{
	content:"";
	position:absolute;
	top:49px;
	left:45px;
	width:7px;
	height:7px;
	background:#579fe5;
	border-radius:50%;
}
.widget_list li:nth-child(2) a::before{ background:#2fa1ab; }
.widget_list li:nth-child(3) a::before{ background:#ffa12b; }
.widget_list li:nth-child(4) a::before{ background:#f37cae; }
.widget_list li:nth-child(5) a::before{ background:#cd89c9; }

.widget_list time{
	margin:0 18px 0 0;
	font-size:1.8rem;
}

.widget_list .cat{
	min-width:115px;
	margin:0 2.9166vw 0 0;
	padding:0 20px;
	background:#3c3c3c;
	border-radius:15px;
	text-align:center;
	font-size:1.4rem;
	font-weight:700;
	color:#ffffff;
}

.widget_list .title{
	flex:1;
	font-weight:500;
}

@media screen and (max-width:767px){
.widget_list{
	padding:0 0 30px 0;
}

.widget_list a{
	flex-wrap:wrap;
	padding:10px 53px 20px 20px;
	background-position:right 20px center;
}

.widget_list a::before{
	top:31px;
	left:20px;
}

.widget_list time{
	margin:10px 15px 0 0;
	padding:0 0 0 22px;
	font-size:1.6rem;
}

.widget_list .cat{
	min-width:100px;
	margin:10px 0 0 0;
}

.widget_list .title{
	flex:auto;
	width:100%;
	margin:10px 0 0 0;
}
}