@charset "UTF-8";

/*-------------------------
__blog_style
-------------------------*/
:root {
    --main_blue: #0062b1;
    --base_navy: #23374b;
    --line_skyblue: #bad8f2;
}

/*-------------------------
__blog_listbox
-------------------------*/

#blog{}
#blog .inner .blog_listbox{}
#blog .inner .blog_listbox a{ text-decoration: none;}
#blog .inner .blog_listbox .cat a{ display: inline-block; font-size: 1.4em; background-color: #fff; border: 1px solid var(--base_navy); padding: 5px 10px; box-sizing: border-box; color: var(--base_navy); font-weight: 600; transition: .2s;}
#blog .inner .blog_listbox img{ width: 100%; height: auto; vertical-align: bottom;}

#blog .inner .blog_listbox .blog_flex{ max-width: 1000px; margin: 0 auto 100px; display: flex; align-items: flex-start; gap: 70px;}
#blog .inner .blog_listbox .blog_flex .blog_list{ margin: 0 auto; width: calc(100% - 290px);}
#blog .inner .blog_listbox .blog_flex .blog_list li{ margin-bottom: 50px;}
#blog .inner .blog_listbox .blog_flex .blog_list li:last-of-type{ margin-bottom: 0;}
#blog .inner .blog_listbox .blog_flex .blog_list li a{ display: flex; align-items: center; gap: 37px; transition: .2s;}
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_img{ width: 300px; overflow: hidden;}
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_img span{ display: block; width: 100%; height: 0; background-color: #F5F5F5; padding-top: 75%; overflow: hidden; position: relative;}
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_img span img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: .2s;}
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data{ width: calc(100% - 337px); transition: .2s;}
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data .day_cat{ display: flex; align-items: center; margin-bottom: 17px;}
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data .day_cat .day{ color: #969699; font-size: 1.5em; margin-right: 20px;}
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data .day_cat .cat span,
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data .day_cat .cat a{ display: inline-block; font-size: 1.4em; background-color: #fff; border: 1px solid var(--base_navy); padding: 5px 10px; box-sizing: border-box; color: var(--base_navy); font-weight: 600; transition: .2s; margin: 2px;}
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data .title{ font-size: 2em; margin-bottom: 17px; font-weight: bold; line-height: 1.4em; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; color: var(--base_navy); transition: .2s;}
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_text{ color: #969699; transition: .2s;}
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_text p{ margin-bottom: 50px; font-size: 1.4em; line-height: 1.6em; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_text p:last-of-type{ margin-bottom: 0;}

#blog .inner .blog_listbox .blog_flex .blog_side{ width: 220px; font-weight: bold;}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box{ margin-bottom: 50px;}
#blog .inner .blog_listbox .blog_flex .blog_side aside:last-child .box{ margin-bottom: 0;}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_title{ font-size: 1.7em; font-weight: bold; color: var(--main_blue); margin-bottom: 22px; padding-left: 24px; position: relative;}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_title::before,
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_title::after{ position: absolute; content: ""; border-radius: 50%; top: 50%; transform: translateY(-50%);}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_title::before{ background: var(--main_blue); width: 17px; height: 17px; left: 0;}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_title::after{ background: #fff; width: 5px; height: 5px; left: 6px;}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner{}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner dl{ font-size: 1.5em; margin-bottom: 22px;}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner dl dt{ margin-bottom: 6px;}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner dl dt a{ color: #969699;}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner dl dd{ line-height: 1.2em;}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner dl dd a{ color: var(--base_navy); transition: .2s;}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner ul{ display: flex; flex-wrap: wrap; gap: 5px;}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner ul li{}
#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner ul li a{ transition: .2s;}

#blog .inner .blog_listbox .blog_flex .blog_list .cat_title{ font-size: 2em; font-weight: bold; color: #fff; color: var(--main_blue); border-bottom: 3px solid var(--main_blue); margin-bottom: 30px; padding: 10px 0; box-sizing: border-box;}

@media screen and (min-width: 768px) {
	#blog .inner .blog_listbox .blog_flex .blog_list li a:hover{ opacity: .8;}
	#blog .inner .blog_listbox .blog_flex .blog_list li a:hover .blog_img img{ transform: scale(1.07);}
	#blog .inner .blog_listbox .blog_flex .blog_list li a:hover .blog_data{ opacity: .6;}
	
	#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner dl dd a:hover{ opacity: .4;}
	#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner ul li a:hover{ color: #fff; background: var(--base_navy);}
	
	/*#blog .pagination_wrap .prev:hover,
	#blog .pagination_wrap .next:hover{ background: #e6e6e6; border: 1px solid #e6e6e6;}
	#blog .pagination_wrap .page:hover{ background: #fff;}*/
}

@media screen and (max-width:999px){
	#blog .inner .blog_listbox .blog_flex .blog_list li a{ flex-wrap: wrap; gap: 20px;}
	#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_img{ width: 100%;}
	#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_title{ width: 100%;}
	#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data{ width: 100%;}
}

@media screen and (max-width: 767px) {
    #blog .inner .blog_listbox .cat a{ font-size: 1.3em; padding: 3px 7px;}
	#blog .inner .blog_listbox .blog_flex{ margin: 0 auto 50px; flex-wrap: wrap; gap: 30px;}
	#blog .inner .blog_listbox .blog_flex .blog_list{ width: 100%; margin: 20px auto 40px;}
	#blog .inner .blog_listbox .blog_flex .blog_list li{ margin-bottom: 30px; gap: 20px;}
	#blog .inner .blog_listbox .blog_flex .blog_list li:last-of-type{ margin-bottom: 0;}
	#blog .inner .blog_listbox .blog_flex .blog_list li a{ margin-bottom: 0; gap: 10px;}
	#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data .day_cat{ margin-bottom: 10px;}
    #blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data .day_cat .day{ font-size: 1.3em; margin-right: 10px;}
	#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data .day_cat .cat span,
	#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data .day_cat .cat a{ font-size: 1.2em; padding: 3px 7px;}
	#blog .inner .blog_listbox .blog_flex .blog_list li a .blog_data .title{ font-size: 1.8em; margin-bottom: 0;}
    #blog .inner .blog_listbox .blog_flex .blog_list li a .blog_text p:last-of-type{ margin-top: 10px;}
    #blog .inner .blog_listbox .blog_flex .blog_list li a .blog_text p{ margin-bottom: 0; font-size: 1.3em; }

	#blog .inner .blog_listbox .blog_flex .blog_side{ width: 100%;}
	#blog .inner .blog_listbox .blog_flex .blog_side aside .box{ margin-bottom: 30px;}
	#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_title{ font-size: 1.7em; margin-bottom: 16px;}
	#blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner dl{ font-size: 1.3em; margin-bottom:16px;}
    #blog .inner .blog_listbox .blog_flex .blog_side aside .box .box_inner dl dd{ font-size: 1.1em;}
}
@media screen and (max-width: 374px) {
	#blog .inner .blog_listbox .blog_flex .blog_list li{ margin-bottom: 30px; gap: 10px;}
	#blog .inner .blog_listbox .blog_flex .blog_list li .blog_img{}
	/*#blog .pagination_wrap{ gap: 0 8px;}
	#blog .pagination_wrap .prev,
	#blog .pagination_wrap .next,
	#blog .pagination_wrap .page{ width: 36px; height: 36px; border-radius: 50%;}*/
}

.navi {text-align: center;width: 100%;padding: 90px 0 0;}
.pagination {}
.page-numbers {font-size: 1.4em;font-weight: 700; line-height: 40px; width: 40px;height: 40px;background: #fff;display: inline-block;margin: 0 4px;vertical-align: top;}
a.page-numbers {color: var(--base_navy);background: #e6e6e6; text-decoration: none;border-radius: 50vh;}
a.page-numbers:hover {background: var(--base_navy);color: #e6e6e6;}
.current {background: var(--base_navy);color: #fff;border-radius: 50vh;}
.prev,
.next {background: #fff!important;position: relative;}
.prev:hover,
.next:hover {background: #fff!important;}

@media screen and (max-width:999px){
.navi {padding: 7.03vw 0 0;}
.page-numbers {font-size: 1.09vw;line-height: 3.33vw; width:3.33vw;height: 3.33vw;}
}

@media screen and (max-width: 767px) {
.navi {padding: 7vw 0 0;}
.page-numbers {font-size: 1.2em;line-height: 8vw; width:8vw;height:8vw;}
a.page-numbers:hover {background: initial;color: initial;}
a.page-numbers:hover {background: initial;color: initial;}
}

.arrow_next{position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); display: inline-block; width: 17px; height: 2px; margin:0; border-radius: 9999px;background-color: rgb(51, 51, 51);}
.arrow_next::before,
.arrow_next::after { content: ""; position: absolute; top: calc(50% - 1px); right: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: rgb(51, 51, 51)!important; transform-origin: calc(100% - 1px) 50%;}
.arrow_next::before{transform: rotate(45deg);}
.arrow_next::after{transform: rotate(-45deg);}
.next {transition: .2s;}
.next:hover{transform: translateX(10px);}
.arrow_prev{position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); display: inline-block; width: 17px; height: 2px; margin:0; border-radius: 9999px;background-color: rgb(51, 51, 51);}
.arrow_prev::before{ content: ""; position: absolute; top: calc(50% - 2px); left: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: rgb(51, 51, 51)!important; transform-origin: calc(2% - 1px) 50%;}
.arrow_prev::after { content: ""; position: absolute; top: calc(50% - 0px); left: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: rgb(51, 51, 51)!important; transform-origin: calc(2% - 1px) 50%;}
.arrow_prev::before{transform: rotate(45deg);}
.arrow_prev::after{transform: rotate(-45deg);}
.prev {transition: .2s;}
.prev:hover{transform: translateX(-10px);}

@media screen and (max-width:999px){
.next:hover{transform: initial;}
.prev:hover{transform: initial;}
}

@media screen and (max-width: 767px) {
}



/*-------------------------
__blog_detail
-------------------------*/

#blog{}
#blog .inner .blog_detail{ position: relative; z-index: 10;}
#blog .inner .blog_detail .blog_flex{ max-width: 1000px; margin: 0 auto 100px; display: flex; gap: 70px;}
#blog .inner .blog_detail .cat a{ display: inline-block; font-size: 1.4em; background-color: #fff; border: 1px solid var(--base_navy); padding: 5px 10px; box-sizing: border-box; color: var(--base_navy); transition: .2s;}
#blog .inner .blog_detail img{ width: 100%; height: auto; vertical-align: bottom;}

#blog .inner .blog_detail .blog_flex .blog_content{ width: calc(100% - 290px);}
#blog .inner .blog_detail .blog_flex .blog_content .blog_data{}
#blog .inner .blog_detail .blog_flex .blog_content .blog_data .day_cat{ display: flex; align-items: center; margin-bottom: 28px;}
#blog .inner .blog_detail .blog_flex .blog_content .blog_data .day_cat .day{ color: #969699; font-size: 1.5em; margin-right: 20px;}
#blog .inner .blog_detail .blog_flex .blog_content .blog_data .day_cat .cat span,
#blog .inner .blog_detail .blog_flex .blog_content .blog_data .day_cat .cat a{ margin-right: 5px;}
#blog .inner .blog_detail .blog_flex .blog_content .blog_data .title{ font-size: 3em; margin-bottom: 50px; font-weight: bold; line-height: 1.4em;}
#blog .inner .blog_detail .blog_flex .blog_content .blog_text{ margin-bottom: 50px;}
#blog .inner .blog_detail .blog_flex .blog_content .blog_text:last-of-type{ margin-bottom: 0;}
#blog .inner .blog_detail .blog_flex .blog_content .blog_text p{ font-size: 1.6em; line-height: 1.8em;}
#blog .inner .blog_detail .blog_flex .blog_content .blog_text p img{ display: inline-block; margin-bottom: 20px;}
#blog .inner .blog_detail .blog_flex .blog_content .blog_text h2{ font-size: 2.4em; font-weight: bold; color: var(--main_blue); margin: 30px 0 20px;}
#blog .inner .blog_detail .blog_flex .blog_content .blog_text h3{ font-size: 2.1em; font-weight: bold; border-bottom: 2px solid var(--base_navy); margin: 30px 0 20px; padding-bottom: 5px; box-sizing: border-box;}
#blog .inner .blog_detail .blog_flex .blog_content .blog_text h4{ font-size: 1.8em; font-weight: bold; margin: 20px 0 10px;}
#blog .inner .blog_detail .blog_flex .blog_content .blog_text h5,
#blog .inner .blog_detail .blog_flex .blog_content .blog_text h6{ font-size: 1.6em; font-weight: bold; margin: 20px 0 10px;}

#blog .inner .blog_detail .speech_bubble{}
#blog .inner .blog_detail .speech_bubble .sb_item{ display: flex; align-items: flex-start; gap: 30px; margin-bottom: 30px;}
#blog .inner .blog_detail .speech_bubble .sb_item .icon{ width: 110px; display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto;}
#blog .inner .blog_detail .speech_bubble .sb_item .icon .icon_img{ width: 70px; height: 70px; border-radius: 50%; overflow: hidden; margin-bottom: 5px; display: inline-block;}
#blog .inner .blog_detail .speech_bubble .sb_item .icon .icon_img img{ width: 100%; height: 100%; object-fit: cover;}
#blog .inner .blog_detail .speech_bubble .sb_item .icon p{ font-size: 1.4em;}
#blog .inner .blog_detail .speech_bubble .sb_item .sb_text{ width: calc(100% - 140px); background: #e1f5fa; padding: 37px; box-sizing: border-box; border-radius: 15px; position: relative;}
#blog .inner .blog_detail .speech_bubble .sb_item .sb_text p{ margin-bottom: 0!important;}
#blog .inner .blog_detail .speech_bubble .sb_item.left .sb_text::before{ content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 18px solid #e1f5fa; border-left: 0; top: 25px; left: -16px;}
#blog .inner .blog_detail .speech_bubble .sb_item.right .sb_text{ background: #fff5e6;}
#blog .inner .blog_detail .speech_bubble .sb_item.right .sb_text::before{ content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 18px solid #fff5e6; border-right: 0; top: 25px; right: -16px;}
#blog .inner .blog_detail .speech_bubble .sb_item.right .icon{order: 2;}
#blog .inner .blog_detail .speech_bubble .sb_item.right .sb_text{order: 1;}
#blog .inner .blog_detail .speech_bubble .sb_item .sb_text p{ font-size: 1.5em; line-height: 1.8em;}

#blog .inner .blog_detail .top_btn{ text-align: center; width: 260px; margin: 0 auto;}
#blog .inner .blog_detail .top_btn a{ width: 100%; height: 70px; color: var(--base-navy); border: 1px solid var(--base_navy); background-color: #fff; font-size: 1.6em; font-weight: 700; display: flex; justify-content: center; align-items: center; padding: 0 40px; box-sizing: border-box; position: relative; z-index: 1; text-align: center;}

#blog .inner .blog_detail .blog_flex .blog_side{ width: 220px; font-weight: bold;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box{ margin-bottom: 50px;}
#blog .inner .blog_detail .blog_flex .blog_side aside:last-child .box{ margin-bottom: 0;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_title{ font-size: 1.7em; font-weight: bold; color: var(--main_blue); margin-bottom: 22px; padding-left: 24px; position: relative;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_title::before,
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_title::after{ position: absolute; content: ""; border-radius: 50%; top: 50%; transform: translateY(-50%);}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_title::before{ background: var(--main_blue); width: 17px; height: 17px; left: 0;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_title::after{ background: #fff; width: 5px; height: 5px; left: 6px;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner{}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner dl{ font-size: 1.5em; margin-bottom: 22px;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner dl dt{ margin-bottom: 6px;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner dl dt a{ color: #969699;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner dl dd{ line-height: 1.2em;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner dl dd a{ color: var(--base_navy); transition: .2s;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner ul{ display: flex; flex-wrap: wrap; gap: 5px;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner ul li{}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner ul li a{ transition: .2s;}

@media screen and (min-width: 768px) {
#blog .inner .blog_detail .cat a:hover{ color: #fff; background: var(--base_navy);}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner dl dd a:hover{ opacity: .4;}
#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner ul li a:hover{ color: #fff; background: var(--base_navy);}
	
#blog .inner .blog_detail .top_btn a:hover{ color: #fff;}
#blog .inner .blog_detail .top_btn a::after{background: var(--base_navy); position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0, 1); transform-origin: left top; transition: .2s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1;}
#blog .inner .blog_detail .top_btn a:hover::after{transform: scale(1, 1);}
}


@media screen and (max-width:999px){
#blog .inner .blog_detail .blog_flex .blog_side{ width: 220px; font-weight: bold;}
}

@media screen and (max-width: 767px) {
	#blog .inner .blog_detail .blog_flex{ margin: 0 auto 50px; gap: 30px; flex-wrap: wrap;}
	#blog .inner .blog_detail .blog_flex .blog_content{ width: 100%;}
	#blog .inner .blog_detail .blog_flex .blog_content .blog_data .day_cat{ margin-bottom: 10px;}
	#blog .inner .blog_detail .blog_flex .blog_content .blog_data .day_cat .day{font-size: 1.4em; margin-right: 15px;}
	#blog .inner .blog_detail .blog_flex .blog_content .blog_data .title{ font-size: 2em; margin-bottom: 20px;}
	#blog .inner .blog_detail .blog_flex .blog_content .blog_text{ margin-bottom: 30px;}
	#blog .inner .blog_detail .blog_flex .blog_content .blog_text:last-of-type{ margin-bottom: 0;}
	#blog .inner .blog_detail .blog_flex .blog_content .blog_text p{ margin-bottom: 10px; font-size: 1.4em;}
    #blog .inner .blog_detail .blog_flex .blog_content .blog_text p img{ margin-bottom: 10px;}
    #blog .inner .blog_detail .blog_flex .blog_content .blog_text h2{ font-size: 2.1em; margin: 20px 0 10px;}
    #blog .inner .blog_detail .blog_flex .blog_content .blog_text h3{ font-size: 1.8em; margin: 20px 0 10px;}
    #blog .inner .blog_detail .blog_flex .blog_content .blog_text h4{ font-size: 1.6em; margin: 10px 0 5px;}
    #blog .inner .blog_detail .blog_flex .blog_content .blog_text h5,
    #blog .inner .blog_detail .blog_flex .blog_content .blog_text h6{ font-size: 1.4em; margin: 10px 0 5px;}

	#blog .inner .blog_detail .speech_bubble .sb_item{ gap: 20px; margin-bottom: 30px;}
	#blog .inner .blog_detail .speech_bubble .sb_item .icon{ width: 90px;}
	#blog .inner .blog_detail .speech_bubble .sb_item .icon p{ font-size: 1.2em;}
	#blog .inner .blog_detail .speech_bubble .sb_item .sb_text{ width: calc(100% - 110px); padding: 16px;border-radius: 12px;}
	#blog .inner .blog_detail .speech_bubble .sb_item .sb_text p{ font-size: 1.4em; line-height: 1.6em;}

	#blog .inner .blog_detail .blog_flex .blog_side{ width: 100%;}
	#blog .inner .blog_detail .blog_flex .blog_side aside .box{ margin-bottom: 30px;}
	#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_title{ font-size: 1.4em; margin-bottom: 16px;}
	#blog .inner .blog_detail .blog_flex .blog_side aside .box .box_inner dl{ font-size: 1.4em; margin-bottom:16px;}
}