@charset "utf-8";
/* ブログ、インタビュー系はここにまとめる */
/* ブログ一覧 */
#BLOG_LIST{
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}
#SEARCH_MENU_SWITCH_BUTTON{
	display: none;
}
#BLOG_SEARCH_FORM{
	width : 350px;
}
.form_block{
	background-color : var(--color-palegrayline);
	border-top: 3px solid var(--color-main-orange);
	margin : 0px 0px 20px 0px;
	padding : 20px;
	padding-top: 10px;
}
#BLOG_SEARCH_FORM div#CATEGORY_RESULT{
	padding : 0px;
	margin : 0px;
}
#CATEGORY_RESULT ul{
	display : flex;
	flex-wrap : wrap;
}
#CATEGORY_RESULT ul li{
	display : inline-block;
	border : 1px var(--color-palegrayline) solid;
	margin : 0px 3px 3px 0px;
	padding : 3px 5px 3px 5px;
	background-color : #ffffff;
}
#CATEGORY_RESULT ul li.active{
	border : 1px var(--color-red) solid;
	color : var(--color-red);
}
#BLOG_SEARCH_FORM input[type="text"]{
	border-width : 1px 0px 1px 1px;
	border-color : var(--color-palegrayline);
	border-style : solid;
	
	padding : 10px;
	width : calc(100% - 50px);
	cursor : text;
}
#BLOG_SEARCH_FORM input[type="text"]:focus{
	outline : 0;
}
.search_button{
	padding : 10px;
	width : 50px;
	height : 50px;
	background-color : #ffffff;
	border-style : solid;
	border-width : 1px 1px 1px 0px;
	border-color : var(--color-palegrayline);
	cursor : pointer;
}
#BLOG_LIST #BLOG_RESULT,
#BLOG_LIST #ARTICLE_RESULT{
	width : calc(100% - 350px);
}
#FORM_OPEN, #FORM_OPEN_LABEL{
	display : none;
}
/* カレンダー */
#CALENDAR{
	position: static;
	max-width: 100%;
	margin: auto;
	border-radius: 0;
}
#CALENDAR input[type="button"].calendar{
	display: none;
}
#CALENDAR TABLE{
	table-layout: fixed;
}
#CALENDAR TABLE THEAD th,
#CALENDAR TABLE THEAD td{
	padding-bottom: 10px;
}
/* リンクバナー */
.link_box{
	border : 1px solid #cccccc;
	border-radius : 5px;
	padding : 10px;
	width: 80%;
	margin : 10px;
	display : block;
	text-decoration: none;
	cursor : pointer;
}
.link_box:hover{
	opacity : 0.8;
}
.link_box:hover span{
	color : #1A0DAB;
}
.link_box span{
	display : block;
	font-size : 13px;
}
.link_url{
	color : #828282;
	font-size : 10px;
}
.link_box span.link_title{
	font-size : 16px;
	font-weight : bold;
	color : #1A0DAB;
}
/* interview系 */
.interviewer{
    padding-left : 55px;
    position : relative;
    color : #0085cc;
}
.interviewer:before{
    content : "";
    position : relative;
    display: block;
    width : 35px;
    height : 1px;
    top : 0.7em;
    left : -55px;
    background-color : #0085cc;
}
.article_prev,
.article_next{
    width : 45%;
    max-width : 510px;
}
.article_prev_next .article_tile_image{
    width : 100px;
}
.article_prev_next .interview_title{
    width : calc(100% - 100px - 20px - 50px);
    font-size : 1rem;
}
.article_prev_next .numbering{
    font-size : 1.5rem;
}
.subtitle .numbering{
    font-size : 1.5rem;
    display : inline-block;
}
.article_prev .article_tile_arrow{
    -webkit-transform : rotate(180deg);
    transform : rotate(180deg);
}



/* ブログタイル */
#COLUMN_RESULT,
#BLOG #BLOG_RESULT,
#ARTICLE #ARTICLE_RESULT{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
    gap: 30px;
}
#BLOG_RESULT,
#ARTICLE_RESULT{
    -ms-align-items : flex-start; /* IE10 */
	align-items : flex-start;
}
.blog_tile {
	width: calc(100% - 30px);
	margin : 50px 10px;
	position : relative;
}
.blog_tile .image_wrapper{
    width: 150px;
}
.blog_tile .image_wrapper img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.blog_tile .text_wrapper{
    width: calc(100% - 150px);
    position: relative;
	padding: 20px;
    padding-bottom: 30px;
	display : grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap : 5px;
}
.blog_tile .create_datetime{
    position : absolute;
    left : 0;
    bottom : 0;
    font-size : 12px;
    color : #979797;
}
.blog_tile .blog_title{
    font-size : 1.125rem;
}
.blog_tile .tag_list{
    margin-bottom : 5px;
    line-height: 1em;
}

.blog_text{
    font-size : 1.125rem;
}
.tag_style{
    display: inline-block;
    font-size : 0.85rem;
	line-height: 1em;
	color: var(--color-main-orange);
	cursor: pointer;
	margin: 3px;
	padding: 5px 5px 2px;
}
.tag_list input:checked + .tag_style{
	background-color: var(--color-main-orange);
	color: var(--color-white);
	border-radius : 5px;
}
.tag_style.shop{
	color: var(--color-red);
}
.tag_list input:checked + .tag_style.shop{
	background-color: var(--color-red);
}
.tag_style:before{
    content : "#";
}
.tag_style input{
	display: none;
}
#BLOG_EYECATCH{
    overflow: hidden;
    width : 100%;
    height : 50vw;
    max-height : 320px;
    position : relative;
    background-color: rgba(0, 0, 0, 0.3);
}
#BLOG_EYECATCH .main_title{
    color : #fff;
}
#BLOG_EYECATCH_IMG{
    position : absolute;
    width : 120%;
    max-width : none;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
}
@supports (object-fit: cover) {
    #BLOG_EYECATCH_IMG{
        width: auto;
		object-fit: cover;
		width: 100%;
		height: 100%;
    }
}
#BLOG_EYECATCH_TAG .tag_style{
    font-size : 1rem;
}
.preview_annotation{
    position : fixed;
    bottom : 0;
    background : #0085cc;
    width : 100%;
    padding : 10px;
    left : 0;
    z-index: 100;
}
hr{
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: #e6e6e6;
    height: 1px;
}
#BLOG_TEXT p{
    margin-bottom : 1em;
}
#BLOG_TEXT img
{
	max-width : 350px;
}
.two_column .blog_tile{
    width : 50%;
}
/* blog_box_tile */

#BLOG_BOX_TILE_RESULT{
	width : 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(250px, 1fr));
	gap: 30px;
}
#BLOG_BOX_TILE_RESULT .blog_box_tile{
	margin: auto;
	height: 100%;
	width: 100%;
}
.blog_box_tile{
	background-color: #f5f5f5;
	max-width: 350px;
	transition: 0.4s;
	position: relative;
}
.blog_box_tile:hover{
	opacity: 0.6;
}
.blog_title{
	font-size : 1.125rem;
	font-weight: bold;
	color: #333333;
}
.blog_tile_text{
	padding : 20px;
}
.blog_update_datetime{
	color: #999999;
	font-size: 12px;
}
.blog_text .overflow_text_ellipsis{
	-webkit-line-clamp: 5;
	max-height: 8em;
}
.blog_link{
	position: absolute;
    right: 1em;
    bottom: 0.5em;
    color: #0085cc;
}
.tantou_icon {
	margin-bottom : 10px;
}
.tantou_icon .news_tag{
	margin: 0px;
    width: 100%;
    display: inline;
    padding: 3px 5px;
}
.tantou_btn{
	display : flex;
	flex-wrap: wrap;
}
.tantou_btn label{
	border : 1px solid #cccccc;
    padding: 5px 7px;
    margin: 2px;
	background-color : #ffffff;
	cursor : pointer;
}
#CATEGORY_RESULT a:hover,
.tantou_btn label:hover{
	opacity : 0.8;
}
.tantou_btn label input{
	display : none;
}
.tantou_btn .check_on{
	border : 1px solid #0085cc;
	color: #0085cc;
}
#BLOG_SEARCH_FORM #SHOP_RESULT{
    background-color: #ffffff;
    border: 1px solid #cccccc;
    margin: 3px 10px;
}
@media screen and (max-width : 1200px){
	#BLOG_BOX_TILE_RESULT{
		grid-template-columns: repeat(3, 1fr);
	}
	#BLOG_BOX_TILE_RESULT .blog_box_tile:last-of-type{
		display: none;
	}
}
@media screen and (max-width : 950px){
	#BLOG_LIST #BLOG_RESULT,
	#BLOG_LIST #ARTICLE_RESULT{
		width : calc(100% - 250px);
	}
	#BLOG_SEARCH_FORM{
		width : 250px;
	}
	#BLOG_SEARCH_FORM #SHOP_RESULT{
		width : 100%;
	}
	#CALENDAR{
		padding: 0;
	}
	#CALENDAR TABLE TBODY TH, #CALENDAR TABLE TBODY TD{
		font-size : 12px;
		height : 25px;
	}
	.today SPAN, .click_today SPAN{
		font-size : 12px;
	}
	.calendar_prev{
		padding-left: 10px;
	}
	.calendar_next{
		padding-right: 10px;
	}
	.blog_tile .text_wrapper{
		grid-template-columns : 1fr;
	}
	.archive_more
	{
		text-align : right;
	}
}
@media screen and (max-width : 850px){
	#BLOG_LIST #BLOG_RESULT,
	#BLOG_LIST #ARTICLE_RESULT, 
	#BLOG_LIST #BLOG_SEARCH_FORM{
		width : 100%;
	}
	.blog_tile
	{
		width : 100%;
	}
	#BLOG_RESULT,
	#ARTICLE_RESULT{
		order : 2;
	}
	#BLOG_SEARCH_FORM{
		order : 1;
	}
	#BLOG_SEARCH_FORM {
		display: none;
		position: fixed;
		width: 100%;
		height: calc(100% - 80px - 50px);
		bottom: 0px;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 100;
		padding: 15px;
		padding-bottom: 0;
		overflow-y: scroll;
		background-color: var(--color-white);
	}

	#SEARCH_MENU_SWITCH_BUTTON {
		display: inline-block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 12;
		overflow-y: auto;
		width: 100%;
		text-align: center;
		border-radius: 0;
		padding: 15px;
		background-color : var(--color-blue);
		color : var(--color-white);
	}
	#SEARCH_MENU_SWITCH_BUTTON::after
	{
		display : none;
	}

	#SEARCH_MENU_SWITCH:checked+#SEARCH_MENU_SWITCH_BUTTON {
		bottom: calc(100% - 80px - 50px);
		width: 100%;
	}

	#SEARCH_MENU_SWITCH:checked+#SEARCH_MENU_SWITCH_BUTTON+#BLOG_SEARCH_FORM {
		display: block;
	}
}
@media screen and (max-width : 750px){
	#FORM_OPEN, #FORM_OPEN_LABEL{
		display : block;
	}
	#FORM_OPEN_LABEL{
		position : fixed;
		background-color : rgba(0,0,0,0.8);
		color : #ffffff;
		text-align : center;
		bottom : 0px;
		left : 0px;
		width : 100%;
		padding : 20px;
		height : 60px;
	}
	#FORM_OPEN + div{
		display : none;
	}
	#FORM_OPEN:checked + div{
		display : block;
		position : fixed;
		bottom : 60px;
		left : 0px;
		width : 100%;
		background-color : rgba(0,0,0,0.8);
		padding : 20px;
	}
    .interview_tile{
        width : 100%;
    }
    #BLOG_EYECATCH .page_title,
    #INTERVIEW_EYECATCH .page_title{
        font-size : 2rem;
    }
    .article_prev_next .article_tile_image{
        width : 100%;
        max-width : 100px;
        margin: auto;
    }
    .article_prev_next .interview_title{
        width : 100%;
    }
    .article_prev, .article_next{
        max-width : 180px;
    }
    .article_tile_arrow{
        display: none;
    }
    .two_column .blog_tile{
        width : 100%;
    }
	#BLOG_BOX_TILE_RESULT{
		grid-template-columns: repeat(2, 1fr);
	}
	#BLOG_BOX_TILE_RESULT .blog_box_tile:last-of-type{
		display: block;
	}
	.blog_tile {
		width : 100%;
	}
}
@media screen and (max-width : 550px){
    .blog_text{
        font-size : 1rem;
    }
	.blog_tile .image_wrapper{
		width: 100%;
		height: 200px;
	}
	.blog_tile .text_wrapper{
		width: 100%;
	}
	.blog_tile {
		margin : 0;
		padding : 0;
		margin-bottom : 30px;
	}
    .interviewer{
        padding-left : 30px;
    }
    .interviewer:before{
        width: 25px;
        left : -30px;
    }
    .interview_tile{
        max-width : none;
    }
    #BLOG_EYECATCH .page_title{
        font-size : 1.8rem;
    }
    .sns_share_link img{
        width : 35px;
    }
	#BLOG_BOX_TILE_RESULT{
		grid-template-columns: repeat(1, 1fr);
	}
	#BLOG_BOX_TILE_RESULT .blog_box_tile:nth-of-type(n + 3){
		display: none;
	}
}