@charset "utf-8";
/* # =================================================================
#### template
# ================================================================= */

/* # =================================================================
#### common
# ================================================================= */
body{
	background : -webkit-linear-gradient(left, #F5F3EB 0%, #E4F1E7 100%);
	background : linear-gradient(90deg, #F5F3EB 0%, #E4F1E7 100%);
}

/* # =================================================================
#### login
# ================================================================= */
.login-wrap{

}
.content-login{
	position : relative;
	display : block;
	width : 700px;
	height : auto;
	margin : 50px auto;
	border-radius : 25px;
	/*background-color : #EFF2F4;*/
    background-color : #FFF;
	/*margin-top : 50px;*/
}
.login-wrap{
	position : relative;
	display : block;
	width : 350px;
	height : auto;
	margin : 0 auto;
	padding : 50px 0;
}
.content-login .innner{


}
.content-login h2{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : var(--20px);
	font-weight : bold;
	margin-bottom : 30px;
}
.login-box{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 30px;
}
.login-box label{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : var(--18px);
	font-weight : bold;
	padding-left : 1em;
	margin-bottom : 5px;
}
.login-box label::before{
	content : "⚫︎";
	position : absolute;
	display : block;
	top : 0;
	right : auto;
	bottom : 0;
	left : 0;
	margin : auto auto;
	color : var(--key-color);
}
.login-box input{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border-radius : 15px;
	border : 1px solid #D9D9D9;
	padding : 10px;
}

.submit{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 0 15px;
}
.submit ul{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.submit ul li{
	position : relative;
	display : list-item;
	width : 100%;
	height : auto;
	font-size : var(--13px);
	margin-bottom : 10px;
	padding-left : 1em;
}
.submit ul li:last-child{
	margin-bottom : 0;
}
.submit ul li::before{
	content : "⚫︎";
	position : absolute;
	display : block;
	top : 0;
	right : auto;
	bottom : 0;
	left : 0;
	margin : auto auto;
	color : var(--key-color);
}
.submit ul li a{
	color : var(--key-color);
	font-size : var(--13px);
	text-decoration : underline;
}
.submit-btn,
.submit-btn-logout{
	margin-top : 30px;
}
.submit-btn a{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	line-height : 1;
	font-size : var(--16px);
	font-weight : bold;
	border-radius : 25px;
	padding : 10px 25px 10px 55px;
	border : 1px solid #FF7364;
	background-color : #FF7364;
	color : #FFF;
	margin : 0 auto
}

.submit-btn a::before {
	content : "";
	position : absolute;
	display : block;
	width : 20px;
	height : 20px;
	background : url(../images/top/arrow_r1.png) no-repeat center / cover;
	top : 0;
	right : auto;
	bottom : 0;
	left : 20px;
	margin : auto auto;
}
.submit-btn-logout a{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	line-height : 1;
	font-size : var(--16px);
	font-weight : bold;
	border-radius : 25px;
	padding : 10px 25px 10px 55px;
	border : 1px solid #7B7B7B;
	background-color : #7B7B7B;
	color : #FFF;
	margin : 0 auto
}

.submit-btn-logout a::before {
	content : "";
	position : absolute;
	display : block;
	width : 20px;
	height : 20px;
	background : url(../images/top/arrow_gr1.png) no-repeat center / cover;
	top : 0;
	right : auto;
	bottom : 0;
	left : 20px;
	margin : auto auto;
}
/* # =================================================================
#### header
# ================================================================= */
#header{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 20px 30px 0;
	box-shadow : 0 4px 0 #00000014;
	background-color : #FFF;
}
#header .inner{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
	margin-bottom : 20px;
}
/***** logo *****/
#header .logo{
	position : relative;
	display : block;
}
#header .logo h1{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
#header .logo h1 a{
	position : relative;
	display : block;
	width : 278.49px;
	height : 56.49px;
	font-size : 0;
	background : url(../images/header/logo.png)no-repeat;
	background-size : cover;
	text-indent : 100%;
	white-space : nowrap;
	overflow : hidden;
}
/*****header-outer *****/
.header-outer{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : flex-start;
	align-items : center;
	width : auto;
	height : auto;
}
/*** site-search ***/
.site-search{
	position : relative;
	display : block;
}
#site-search-pc,
#site-search-sp{
	position : relative;
	font-size : var(--13px);
	padding : 11.25px 13px;
	border-radius : 25px 0 0 25px;
	border-top : 2px solid var(--key-color);
	border-right : none;
	border-bottom : 2px solid var(--key-color);
	border-left : 2px solid var(--key-color);
	max-width : calc(100% - 48px);
}
.site-search button{
	position : relative;
	width : 48px;
	font-size : var(--13px);
	padding : 11.25px 13px;
	border-radius : 0 25px 25px 0;
	border : 2px solid var(--key-color);
	background-color : var(--key-color);
	text-indent : 100%;
	overflow : hidden;
	white-space : nowrap;
	color : transparent;
}
.site-search button:after{
	content : "";
	position : absolute;
	display : block;
	align-items : center;
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
	margin : auto;
	background : url(../images/header/search_icon.png)no-repeat;
	background-size : cover;
	width : 20px;
	height : 20px;
}
/*** header-menu ***/
.header-menu{
	position : relative;
	display : block;
	margin : 0 20px;
}
.header-menu ul{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : flex-start;
}
.header-menu ul li{
	position : relative;
	display : block;
	width : auto;
	height : auto;
	margin-right : 20px;
}
.header-menu ul li:last-child{
	margin-right : 0;
}
.header-menu ul li a{

	line-height : 1;
	text-align : justify;
	font-size : var(--15px);
	font-weight : bold;
	padding : 0;
	padding-left : 0.8em;
}
.header-menu ul li a:hover{
	color : var(--key-color);
}
.header-menu ul li a::before{
	content : "";
	position : absolute;
	top : 0;
	bottom : 0;
	left : 0;
	margin : auto 0;
	width : 10px;
	height : 10px;
	border-top : 5px solid transparent;
	border-bottom : 5px solid transparent;
	border-left : 8px solid #309F8A;
}
/*** login/logout ***/
#header .login{
	position : relative;
	display : block;
	width : auto;
	height : auto;
	line-height : 1;
	background-color : #FF7364;
	border-radius : 25px;
}
#header .login a{
	position : relative;
	display : block;
	text-align : center;
	color : #FFF;
	font-size : var(--16px);
	padding : 15px 25px 15px 60px;
}
#header .login a:hover{
	opacity : 0.5;
}
#header .login a:before{
	content : "";
	position : absolute;
	display : block;
	align-items : center;
	top : 0;
	right : auto;
	bottom : 0;
	left : 28px;
	margin : auto;
	background : url(../images/header/login_key_icon.png)no-repeat;
	background-size : cover;
	width : 24px;
	height : 24px;
}
#header .logout{
	position : relative;
	display : block;
	width : auto;
	height : auto;
	line-height : 1;
	background-color : #7B7B7B;
	border-radius : 25px;
}
#header .logout a{
	position : relative;
	display : block;
	text-align : center;
	color : #FFF;
	font-size : var(--16px);
	padding : 15px 25px 15px 60px;
}
#header .logout a:hover{
	opacity : 0.5;
}
#header .logout a:before{
	content : "";
	position : absolute;
	display : block;
	align-items : center;
	top : 0;
	right : auto;
	bottom : 0;
	left : 28px;
	margin : auto;
	background : url(../images/header/member_top_icon.png)no-repeat;
	background-size : cover;
	width : 24px;
	height : 24px;
}
/***** sp *****/
.menu-area.sp-menu{
	display : none;
}
.drawer-nav .site-search{
	text-align : center;
	margin-bottom : 30px;
}
/* # =================================================================
#### footer
# ================================================================= */
footer{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	background-color : #FFFFFF80 ;
	border-radius : 50px 50px 0 0;
}
/***** footer-main-wrap *****/
.footer-main-wrap{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 1000px;
	height : auto;
	padding : 50px 0 30px;
	margin : 0 auto;
}
.footer-main-wrap section{
	position : relative;
	display : block;
	width : 32%;
	height : auto;
}
/***** footer-main-menu *****/
.footer-main-menu{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.footer-main-menu li{

}
.footer-main-menu li:last-child{
	margin-bottom : 0;
}
.footer-main-menu li p{
	margin-bottom : 10px;
}
.footer-main-menu li a{
	position : relative;
	color : var(--font-color);
	font-size : var(--16px);
	font-weight : bold;
	padding-left : 1em;
}
.footer-main-menu li a:hover{
	color : var(--key-color);
}
.footer-main-menu li a::before{
	content : "";
	position : absolute;
	top : 0;
	bottom : 0;
	left : 0;
	margin : auto 0;
	width : 10px;
	height : 10px;
	border-top : 5px solid transparent;
	border-bottom : 5px solid transparent;
	border-left : 8px solid  var(--key-color);
}
/***** footer-sub-menu *****/
.footer-sub-menu{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding-left : 2em;
	margin-bottom : 10px;
}
.footer-sub-menu li{
	margin-bottom : 10px;
}
.footer-sub-menu li:last-child{
	margin-bottom : 0;
}
.footer-sub-menu li a{
	color : var(--font-color);
	font-size : var(--16px);
	font-weight : normal;
	padding-left : 0;
}
.footer-sub-menu li a:hover{
	color : var(--key-color);
}
.footer-sub-menu li a::before{
	content : none;
}
/***** footer-contents02 *****/
footer .footer-contents02{
	padding-bottom : 30px;
}
/***** footer-contents03 *****/
footer .footer-contents03{

}
footer .footer-contents03 h2{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 30px;
}
footer .footer-contents03 h2 a{
	position : relative;
	display : block;
	width : 278.49px;
	height : 56.49px;
	font-size : 0;
	background : url(../images/header/logo.png)no-repeat;
	background-size : cover;
	text-indent : 100%;
	white-space : nowrap;
	overflow : hidden;
}

footer .footer-contents03 .adress{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 10px;
}
footer .footer-contents03 .adress p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : var(--16px);
}

footer .footer-contents03 .phone{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 30px;
}
footer .footer-contents03 .phone p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : var(--24px);
	font-weight : bold;
	font-family : Roboto;
}
footer .footer-contents03 .phone p span{
	font-size : var(--14px);
	margin-left : 5px;
}

footer .footer-contents03 .access{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
}
footer .footer-contents03 .access a{
	position : relative;
	display : block;
	width : 48%;
	height : auto;
	border-radius : 50px;
	border : 1px solid var(--key-color);
	background-color : var(--key-color);
	line-height : 1;
	text-align : center;
	color : #FFF;
	font-size : var(--13px);
	padding : 10px 0;
}
footer .footer-contents03 .access a:hover{
	background-color : #FFF;
	color : var(--key-color);
}
footer .footer-contents03.section .footer-wrap{
	position : relative;
	display : flex;
	flex-direction : column;
	width : 100%;
	height : 100%;
}

footer .footer-contents03.section .bottom{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-top : auto; 
	padding-top : 50px;
}
footer .footer-contents03 .bottom .links{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
}
footer .footer-contents03 .bottom .links a{
	position : relative;
	display : block;
	width : 48%;
	height : auto;
}
footer .footer-contents03 .bottom .links a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
footer .footer-contents03 .bottom .links a:last-child{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	font-size : var(--14px);
	margin-top : 30px;
}
footer .footer-contents03 .bottom .links a:last-child::after{
	content : "";
	position : absolute;
	display : block;
	align-items : center;
	top : 0;
	right : -15px;
	bottom  : 0;
	left : auto;
	margin : auto;
	background : url(../images/footer/icon_arrow.png)no-repeat center / cover;
	width : 9.19px;
	height : 9.19px;
}
footer small{
	position : relative;
	display : block;
	color : var(--key-color);
	margin-top : 50px;
}
footer .footer-contents03 .adress,
footer .footer-contents03 .phone,
footer .footer-contents03 .access,
footer .footer-contents03 .bottom .links,
footer small{
	padding-left : 30px;
}



/***** page-top *****/
#page-top{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 20px;
}
#page-top a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
#page-top a span{
	position : relative;
	display : block;
	width : 1000px;
	height : auto;
	text-align : right;
	color : var(--key-color);
	font-size : var(--18px);
	font-weight : bold;
	font-family : Roboto;
	padding-right : 20px;
	margin : 0 auto;
}
#page-top a span::after{
	content : "";
	position : absolute;
	top : 0;
	bottom : 0;
	left : auto;
	right : 0;
	margin : auto 0;
	width : 10px;
	height : 10px;
	border-right : 6px solid transparent;
	border-left : 6px solid transparent;
	border-bottom : 10px solid  var(--key-color);
}
/* # =================================================================
#### common
# ================================================================= */
.wrap{
	position : relative;
	display : block;
	width : 1080px;
	height : auto;
	margin : 0 auto;
}
.contents h2{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : var(--24px);
	font-weight: bold;
}
.contents h2 span{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	color : var(--key-color);
	font-size : var(--18px);
	font-family : Roboto;
	margin-top : 20px;
}
/* # =================================================================
#### contents01
# ================================================================= */
.contents01{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 30px 0 80px;
}
.main-image{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.main-image img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.info-card{
	position : absolute;
	display : block;
	width : 324px;
	height : auto;
	border-radius : 25px;
	background-color : #FFFFFFE6;
	top : 50%;
	right : -13%;
	transform : translateY(-50%);
	padding : 30px 0;
}
.info-card p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-weight : bold;
	margin-bottom : 15px;
}
.info-card p span{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
	padding-left : 5px;
}
.info-card p span::before{
	content : "";
	position : absolute;
	display : block;
	background : url(../images/top/icon_pharm.png)no-repeat center / cover;
	width : 22px;
	aspect-ratio : 44 / 46;
	top : 0;
	right : auto;
	bottom : 0;
	left : -23px;
	margin : auto auto;
}
.info-card .card-btn{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.info-card .card-btn a{
	position : relative;
	display : block;
	width : 270px;
	height : auto;
	border-radius : 50px;
	text-align : center;
	color : #FFF;
	font-size : var(--16px);
	font-weight : bold;
	padding : 15px 0;
	margin : 0 auto;
}
.info-card .card-btn a:first-child{
	background-color : var(--key-color);
	margin-bottom : 15px;
}
.info-card .card-btn a:first-child::before{
	content : "";
	position : absolute;
	display : block;
	top : 0;
	right : auto;
	bottom : 0;
	left : 20px;
	margin : auto auto;
	background : url(../images/top/icon_pharm_bell.png)no-repeat center / cover;
	width : 20px;
	height : 24px;
}
.info-card .card-btn a:last-child{
	background-color : #4776AF;
	padding-left : 16px;
}
.info-card .card-btn a:last-child::before{
	content : "";
	position : absolute;
	display : block;
	top : 0;
	right : auto;
	bottom : 0;
	left : 20px;
	margin : auto auto;
	background : url(../images/top/icon_pharm_event.png)no-repeat center / cover;
	width : 20px;
	height : 22px;
}
.ext-link-area{
	position : absolute;
	display : block;
	width : 80%;
	height : auto;
	top : auto;
	right : 0;
	left : 0;
	bottom : -30px;
	margin : auto auto;
}
.ext-link-area ul{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
}
.ext-link-area ul li{
	position : relative;
	display : list-item;
	width : 32%;
	height : auto;
}
.ext-link-area ul li a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.ext-link-area ul li a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* # =================================================================
#### contents02
# ================================================================= */
.contents02{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 80px 0 50px;
	overflow : hidden;
	margin-bottom : 50px;
}
.contents02 .wrap::before{
	content : "";
	position : absolute;
	top : -39px;
	left : 0;
	width : 100vw; 
	
	height : 0;
	border-top : 4px dashed #FFF;
}
.contents02.contents h2{
	padding-top : 30px;
}
.screen{
	position : absolute;
	top : 0;
	bottom : 0;
	background : #33B29A33;
	right : 0;
	left : calc(50% - 520px - 5%);
	border-radius : 25px 0 0 25px;
}


.contents02 .flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
/***** left *****/
.contents02 .flex .left{
	position : relative;
	display : flex;;
	flex-wrap : wrap;
	flex : 0 0 auto;
	height : auto;
}

/***** right *****/
.contents02 .flex .right{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	flex : 1;
	height : auto;
	padding-left : 40px;
}
/***** btn-nav *****/
.btn-nav{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
	margin-bottom : 30px;
}
.btn-nav li{
	position : relative;
	display : list-item;
	width : 31.5%;
	height : auto;
	border-radius : 15px;
	border : 2px solid var(--key-color);
	background-color : #FFF;
	box-shadow : 4px 4px 0 #00000014;
}
.btn-nav li a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 30px;
}
.btn-nav li a img{
	position : relative;
	display : block;
	width : calc(86px * 0.95);
	height : calc(79px * 0.95);
	margin : 0 auto 20px;
}
.btn-nav li a p{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	font-size : var(--20px);
	font-weight : bold;
	margin : 0 auto;
	padding-right : 10px;
	transition : 0.8s;
}
.btn-nav li a:hover p{
	color : var(--key-color);
	transition : 0.8s;
}
.btn-nav li a p::after{
	content : "";
	position : absolute;
	top : 0;
	right : -8px;
	bottom : 0;
	left : auto;
	margin : auto 0;
	width : 10px;
	height : 10px;
	border-top : 7px solid transparent;
	border-bottom : 7px solid transparent;
	border-left : 10px solid  var(--key-color);
}
/***** text-nav *****/
.text-nav{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
	border-radius : 15px;
	background-color : #FFF;
}
.text-nav br{
	display : none;
}
.text-nav li{
	position : relative;
	display : block;
	width : 31.5%;
	height : auto;
}
.text-nav li a{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	line-height : 1;
	font-size : var(--17px);
	font-weight : bold;
	padding : 20px 0 20px 40px;
}
.text-nav li a:hover{
	color : var(--key-color);
}
.text-nav li a::before{
	content : "";
	position : absolute;
	display : block;
	width : 20px;
	height : 20px;
	top : 0;
	right : auto;
	bottom : 0;
	left : 15px;
	margin : auto auto;
	background : url(../images/top/arrow_g2.png)no-repeat center / cover;
}
/* # =================================================================
#### list-information
# ================================================================= */
.list-information{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border-radius : 15px;
	background-color : #FFF;
	padding : 50px;
}
.list .list-information,
.member_top .list-information{
    padding : 30px 30px 50px;
}
.list-information ul{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.list-information ul li{
	position : relative;
	display : list-item;
	width : 100%;
	height : auto;
	margin-bottom : 30px;
}
:not(.right) > .list-information ul li {
    margin-bottom: 40px;
}
.list-information ul li:last-child{
	margin-bottom : 0;
}
/*** 矢印 ***/
.content-news .list-information ul li > a:not(.file-item)::after{
	content : "";
	position : absolute;
	display : block;
	top : 0;
	right : 0;
	bottom : 0;
	left : auto;
	margin : auto auto;
	background : url(../images/top/arrow_g2.png)no-repeat center / cover;
	width : 20px;
	height : 20px;
}
.content-event .list-information ul li a::after{
	content : "";
	position : absolute;
	display : block;
	top : 0;
	right : 0;
	bottom : 0;
	left : auto;
	margin : auto auto;
	background : url(../images/top/arrow_b2.png)no-repeat center / cover;
	width : 20px;
	height : 20px;
}
/*** 鍵 ****/
.content-news .list-information ul li.flag.is-lock > a::after,
.content-event .list-information ul li.flag.is-lock a::after{
	content : "";
	position : absolute;
	display : block;
	top : 0;
	right : 0;
	bottom : 0;
	left : auto;
	margin : auto auto;
	background : url(../images/top/news_icon_key.png)no-repeat center / cover;
	width : 19.5px;
	height : 24.5px;
}

.member_top .content-news .list-information ul li.flag.is-lock > a::after{
	background : url(../images/top/arrow_g2.png)no-repeat center / cover;
    width : 20px;
	height : 20px;
}
/*** new ***/
.flag.is-new .information-title span:not(.event_end)::after{
	content : "New!";
	display : inline-block;
	background-color : #E5FF9E;
	color : var(--key-color);
	font-weight : bold;
	font-size : var(--15px);
	line-height : 1;
	padding : 2px 5px;
	margin-left : 1em;
}


.list-information ul li > a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding-right : 80px;
}
.list-information ul li a:hover{
	opacity : 0.4;
}
/***** information-meta *****/
.information-meta{
	position : relative;
	display : block;
	margin-bottom : 10px;
}
.information-meta time{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
	color : var(--key-color);
	font-size : var(--16px);
	margin-right : 10px;
}
/***** information-title *****/
.information-title{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.information-title span{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	text-align: justify;
	transition : 0s;
}
.list-information ul li a:hover .information-title span:not(.event_end) {
	text-decoration : underline;
	color : var(--key-color);
	transition : 0s;
}
/*****  *****/
.list-information dl{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
.list-information dt{
	position : relative;
	display : block;
	width : 100px;
	height : auto;
}
.list-information dt span{
	position : relative;
	display : block;
	width : 100%;
	height : 0;
	padding-top : 100%;
	overflow : hidden;
	border-radius : 10px;
}
.list-information dt span img{
	position : absolute;
	display : block;
	width : 100%;
	height : 100%;
	top : 0;
	left : 0;
	transition : transform 0.5s ease;
}
.list-information ul li a:hover dt span img{
	transform : scale( 1.3 );
}
.list-information dd{
	position : relative;
	display : block;
	width : calc(100% - 120px);
	height : auto;
}
/* # =================================================================
#### contents03 contents04
# ================================================================= */
.contents03,
.contents04{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 50px 0;
}
.contents .content-event h2 span{
	color : #4776AF;
}
.content-information{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : flex-start;
	align-items : flex-start;
	width : 100%;
	height : auto;
}
/***** left *****/
.content-information .left{
	position : relative;
	display : block;
	width : 300px;
	height : auto;
	padding : 20px 0;
}
.content-information .left::before{
	content : "";
	position : absolute;
	display : block;
	width : 120%;
	height : 120%;
	top : 0;
	right : 0;
	bottom : 0;
	left : -10%;
	margin : auto auto;
	background-color : #FFFFFF3D;
	border-radius : 25px;
}
/***** right *****/
.content-information .right{
	position : relative;
	display : block;
	width : calc(100% - 300px);
	height : auto;
}
/***** information *****/
.content-information .left .list-link{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.content-information .left .list-link a{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	line-height : 1;
	font-size : var(--18px);
	font-weight : bold;
	border-radius : 25px;
	padding : 10px 25px 10px 55px;
}
/*** 03 ***/
.content-news.content-information .left .list-link{
	margin-top : 30px;
	padding-top : 30px;
	border-top : 1px solid #33B29A;
}
.content-news.content-information .left .list-link a{
	border : 1px solid #33B29A;
	background-color : #33B29A;
	color : #FFF;
}
.content-news.content-information .left .list-link a:hover{
	border : 1px solid #33B29A;
	background-color : #FFF;
	color : #33B29A;
}
.content-news.content-information .left .list-link a::before{
	content : "";
	position : absolute;
	display : block;
	width : 20px;
	height : 20px;
	background : url(../images/top/arrow_g1.png)no-repeat center / cover;
	top : 0;
	right : auto;
	bottom : 0;
	left : 20px;
	margin : auto auto;
}
.content-news.content-information .left .list-link a:hover::before{
	background : url(../images/top/arrow_g2.png)no-repeat center / cover;
}
/*** 04 ***/
.content-event.content-information .left .list-link{
	margin-top : 30px;
	padding-top : 30px;
	border-top : 1px solid #4776AF;
}
.content-event.content-information .left .list-link a{
	border : 1px solid #4776AF;
	background-color : #4776AF;
	color : #FFF;
}
.content-event.content-information .left .list-link a:hover{
	border : 1px solid #4776AF;
	background-color : #FFF;
	color : #4776AF;
}
.content-event.content-information .left .list-link a::before{
	content : "";
	position : absolute;
	display : block;
	width : 20px;
	height : 20px;
	background : url(../images/top/arrow_b1.png)no-repeat center / cover;
	top : 0;
	right : auto;
	bottom : 0;
	left : 20px;
	margin : auto auto;
}
.content-event.content-information .left .list-link a:hover::before{
	background : url(../images/top/arrow_b2.png)no-repeat center / cover;
}
.content-event.content-information .left{
	order : 2;
}
.content-event.content-information .right{
	order : 1;
}

.content-event.content-information .left h2,
.content-event.content-information .left .list-link a{
	margin-left :30px;
}
.flex.content-event.content-information{
	left : -45px;
}
/* # =================================================================
#### content-information category
# ================================================================= */
.information-meta .information-category{
	position : relative;
	display : inline-block;
	width : auto;
	height : auto;
}
.information-meta .information-category span{
	border-radius : 25px;
	line-height : 1;
	text-align : center;
	font-size : var(--14px);
	padding : 5px 10px;
	pointer-events : none;
}
/* 会員向け */
.category-member{

}
.category-member span{
	position : relative;
	display : inline-block;
	width : 78px;
	border : 1px solid #FEF0EE;
	background-color : #FEF0EE;
	color : #FF7364;
}
.category-member a:hover{
	border : 1px solid #FF7364;
	background-color : #FF7364;
	color : #FEF0EE;
}
/* 薬局向け */
.category-pharmacy{

}
.category-pharmacy span{
	border : 1px solid #E9F6F4;
	background-color : #E9F6F4;
	color : #309F8A;
}
.category-pharmacy a:hover{
	border : 1px solid #309F8A;
	background-color : #309F8A;
	color : #E9F6F4;
}
/* イベント */
.category-event{

}
.category-event span{
	border : 1px solid #F0F4FA;
	background-color : #F0F4FA;
	color : #7390B7;
}
.category-event a:hover{
	border : 1px solid #7390B7;
	background-color : #7390B7;
	color : #F0F4FA;
}
/* お知らせ */
.category-news{

}
.category-news span{
	border : 1px solid #EDEDED;
	background-color : #EDEDED;
	color : #8D8D8D;
}
.category-news a:hover{
	border : 1px solid #8D8D8D;
	background-color : #8D8D8D;
	color : #EDEDED;
}
/* 講習会 */
.category-lecture{

}
.category-lecture span{
	border : 1px solid #AA9950;
	background-color : #AA9950;
	color : #FFFFFF;
}
.category-lecture a:hover{
	border : 1px solid #AA9950;
	background-color : #FFFFFF;
	color : #AA9950;
}
/* 研修会 */
.category-education{

}
.category-education span{
	border : 1px solid #74B44A;
	background-color : #74B44A;
	color : #FFFFFF;
}
.category-education a:hover{
	border : 1px solid #74B44A;
	background-color : #FFFFFF;
	color : #74B44A;
}
/* イベント */
.category-events{

}
.category-events span{
	border : 1px solid #6087BC;
	background-color : #6087BC;
	color : #FFFFFF;
}
.category-events a:hover{
	border : 1px solid #6087BC;
	background-color : #FFFFFF;
	color : #6087BC;
}
.information-title span.event_end{
	border : 1px solid #F00;
	background-color : #F00;
	color : #FFFFFF;
    font-size: 0.6875rem;
    padding: 2px;
}





/* # =================================================================
#### contents05
# ================================================================= */
.contents05{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 80px 0;
	overflow : hidden;
}
.contents05 .flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
.contents05 .left{
	position : relative;
	display : block;
	flex : 1;
	padding-right : 130px;
	z-index : 1;
}
.contents05 .left h2{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	font-size : var(--24px);
	font-weight : bold;
	margin-bottom : 30px;
}
.contents05 .left p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	line-height : 2;
	text-align : justify;
	margin-bottom : 30px;
}
.contents05 .left a{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	line-height : 1;
	font-size : var(--18px);
	font-weight : bold;
	border-radius : 50px;
	border: 1px solid #33B29A;
	background-color: #33B29A;
	color: #FFF;
	padding : 30px 120px 30px 60px;
}
.contents05 .left a:hover{
	border : 1px solid #33B29A;
	background-color : #FFF;
	color : #33B29A;
}
.contents05 .left a::before{
	content : "";
	position : absolute;
	display : block;
	width : 20px;
	height : 20px;
	background : url(../images/top/arrow_g1.png)no-repeat center / cover;
	top : 0;
	right : auto;
	bottom : 0;
	left : 20px;
	margin : auto auto;
}
.contents05 .left a:hover::before{
	background : url(../images/top/arrow_g2.png)no-repeat center / cover;
}
.contents05 .right{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
}
.contents05 .right::before{
	content : "";
	position : absolute;
	display : block;
	width : 262%;
	aspect-ratio : 664 / 473;
	top : 0;
	right : 0;
	bottom : 0;
	left : -40px;
	margin : auto auto;
	background : url(../images/top/museum_deco.png)no-repeat center / cover;
}
.sub-herb-museum::before{
	content : "";
	position : absolute;
	display : block;
	width : 213%;
	aspect-ratio : 664 / 473;
	top : 0;
	right : 0;
	bottom : 0;
	left : -10px;
	margin : auto auto;
	background : url(../images/top/museum_deco.png)no-repeat center / cover;
}
.contents05 .right h3,
.sub-herb-museum h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : var(--24px);
	font-weight : normal;
	font-family : "vdl-kyosensya", sans-serif;
	margin-bottom : 15px;
}
.contents05 .right h3 span,
.sub-herb-museum h3 span{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	color : var(--key-color);
	font-size : var(--16px);
	font-family : 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.contents05 .right .herb-image,
.sub-herb-museum .herb-image{
	position : relative;
	display : block;
	width : 255px;
	height : auto;
	margin : 0 auto 0;
}
.contents05 .right .herb-image figure,
.sub-herb-museum .herb-image figure{
	position : relative;
	display : block;
	width : 100%;
	height : 0;
	padding-top : 100%;
	/*margin-bottom : 15px;*/
}
.contents05 .right .herb-image figure img,
.sub-herb-museum .herb-image figure img{
	position : absolute;
	display : block;
	width : 100%;
	height : 100%;
	top : 0;
	left : 0;
}
.contents05 .right .herb-image figcaption,
.sub-herb-museum .herb-image figcaption {
    color: #0E0E0E;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
    margin-top: 3px;
    margin-bottom: 10px;
}
.contents05 .right a,
.sub-herb-museum a{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	line-height : 1;
	font-size : var(--16px);
	font-weight : bold;
	border-radius : 25px;
	border: 1px solid #33B29A;
	background-color: #33B29A;
	color: #FFF;
	padding : 10px 25px 10px 55px;
	margin : 0 auto;
}
.contents05 .right a:hover,
.sub-herb-museum a:hover{
	border : 1px solid #33B29A;
	background-color : #FFF;
	color : #33B29A;
}
.contents05 .right a::before,
.sub-herb-museum a::before{
	content : "";
	position : absolute;
	display : block;
	width : 20px;
	height : 20px;
	background : url(../images/top/arrow_g1.png)no-repeat center / cover;
	top : 0;
	right : auto;
	bottom : 0;
	left : 20px;
	margin : auto auto;
}
.contents05 .right a:hover::before,
.sub-herb-museum a:hover::before{
	background : url(../images/top/arrow_g2.png)no-repeat center / cover;
}
/* # =================================================================
#### contents06
# ================================================================= */
.contents06{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 50px 0;
}
.contents06 h2{
	text-align : center;
	margin-bottom : 50px;
}
.contents06 h2 span{
	margin-top : 10px;
}
.contents06 .wrap{
	border-radius : 25px;
	background-color : #FFF;
	padding : 50px;
}
.contents06 .flex{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	align-items : stretch;
	width : 100%;
	height : auto;
}
.contents06 .list-contact{
	position : relative;
	display : flex;
	flex-direction : column;
	width : 32%;
	height : auto;
}
.contents06 .list-contact:after{
	content : "";
	position : absolute;
	display : block;
	width : 1px;
	height : 80%;
	background-color : #E5E5E5;
	right : -10px;
	top : 50%;
	transform : translateY(-50%);
}
.contents06 .list-contact:last-child:after{
	content : none;
}
.contents06 .list-contact .icon{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 15px;
}
.contents06 .list-contact .icon img{
	position : relative;
	display : block;
	width : 69px;
	aspect-ratio : 69 / 73;
	margin : 0 auto 10px;
}
.contents06 .list-contact .icon h3{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : var(--24px);
	font-weight : bold;
}

.information-text{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 15px;
}
.information-text p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	color : var(--key-color);
	font-size : var(--14px);
}
.information-contact-phone{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	margin-bottom : 15px;
}
.information-contact-phone a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	color : var(--key-color);
	font-size : var(--20px);
	font-weight : bold;
	margin-bottom : 15px;
}
.information-contact-phone a span{
	font-size : var(--18px);
}
.information-contact-phone p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	color : #95989A;
	font-size : var(--16px);
}

.information-reception{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.information-reception p{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	text-align : center;
	font-size : var(--14px);
	margin-bottom : 15px;
}
.information-reception p:last-child{
	margin-bottom : 0;
}

.information-contact{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding-top : 30px;
	margin-top : auto;
}
.information-contact a{
	position : relative;
	display : block;
	width : fit-content;
	height : auto;
	line-height : 1;
	font-size : var(--16px);
	font-weight : bold;
	border-radius : 25px;
	border: 1px solid #33B29A;
	background-color: #33B29A;
	color: #FFF;
	padding : 10px 25px 10px 55px;
	margin : 0 auto;
}
.information-contact a:hover{
	border : 1px solid #33B29A;
	background-color : #FFF;
	color : #33B29A;
}
.information-contact a::before{
	content : "";
	position : absolute;
	display : block;
	width : 20px;
	height : 20px;
	background : url(../images/top/arrow_g1.png)no-repeat center / cover;
	top : 0;
	right : auto;
	bottom : 0;
	left : 20px;
	margin : auto auto;
}
.information-contact a:hover::before{
	background : url(../images/top/arrow_g2.png)no-repeat center / cover;
}





/* # =================================================================
#### contents07
# ================================================================= */
.contents07{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	padding : 50px 0 100px;
}
.contents07 .content-banner{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.contents07 .content-banner ul{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 100%;
	height : auto;
}
.contents07 .content-banner ul li{
	position : relative;
	display : list-item;
	width : 32%;
	height : auto;
}
.contents07 .content-banner ul li a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.contents07 .content-banner ul li a img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}



/* # =================================================================
#### background-image
# ================================================================= */
.main-image::after{
	content : "";
	--u : calc(100vw / 1040);
	position : absolute;
	display : block;
	background : url(../images/top/bg_pill.png) no-repeat center / cover;
	top : auto;
	right : calc(-83.5 * var(--u));
	bottom : calc(-13.5 * var(--u));
	left : auto;
	margin : auto;
	font-size : var(--u);
	width : calc(100 * var(--u));
	aspect-ratio : 291 / 287;
	z-index : -1;
}
.contents01::after{
	content : "";
	--u : calc(100vw / 1040);
	position : absolute;
	display : block;
	background : url(../images/top/bg_text_vertical.png) no-repeat center / cover;
	top : calc(100% - 30px);
	right : auto;
	bottom : auto;
	left : 0;
	margin : auto;
	font-size : var(--u);
	width : calc(100 * var(--u));
	aspect-ratio : 354 / 4942;
}
.content-news .list-information::after{
	content : "";
	--u : calc(100vw / 1040);
	position : absolute;
	display : block;
	background : url(../images/top/bg_pill_2.png) no-repeat center / cover;
	top : auto;
	right : calc(-110.5 * var(--u));
	bottom : calc(-105.5 * var(--u));
	left : auto;
	margin : auto;
	font-size : var(--u);
	width : calc(90 * var(--u));
	aspect-ratio : 256 / 326;
	z-index : -1;
}
.contents06::after{
	content : "";
	--u : calc(100vw / 1040);
	position : absolute;
	display : block;
	background : url(../images/top/bg_pill_3.png) no-repeat center / cover;
	top : calc(-91.5 * var(--u));
	right : 0;
	bottom : auto;
	left : calc(-240.5 * var(--u));
	margin : auto;
	font-size : var(--u);
	width : calc(90 * var(--u));
	aspect-ratio : 314 / 444;
	z-index : -1;
}
/* ============================================================
#### フェードイン演出（方向付き）
============================================================ */
.js-fadein,
.js-fadein-up,
.js-fadein-down,
.js-fadein-left,
.js-fadein-right{
	opacity : 0;
	transition : all 0.8s ease-out;
}

/* --- 各方向別 初期位置 --- */
.js-fadein-up    { transform : translateY(50px); }
.js-fadein-down  { transform : translateY(-50px); }
.js-fadein-left  { transform : translateX(50px); }
.js-fadein-right { transform : translateX(-50px); }

/* --- 表示時 --- */
.js-fadein.is-visible,
.js-fadein-up.is-visible,
.js-fadein-down.is-visible,
.js-fadein-left.is-visible,
.js-fadein-right.is-visible{
	opacity : 1;
	transform : translate(0, 0);
}
main{
	overflow : hidden;
}
/* # =================================================================
#### エフェクト
# ================================================================= */
.info-card{
	transition-delay : .4s;
}
.ext-link-area ul li:nth-child(1){
	transition-delay : .2s;
}
.ext-link-area ul li:nth-child(2){
	transition-delay : .6s;
}
.ext-link-area ul li:nth-child(3){
	transition-delay : .8s;
}

.btn-nav li:nth-child(1){
	transition-delay : .2s;
}
.btn-nav li:nth-child(2){
	transition-delay : .4s;
}
.btn-nav li:nth-child(3){
	transition-delay : .6s;
}
.text-nav{
	transition-delay : .8s;
}
.contents07 .content-banner ul li:nth-child(1){
	transition-delay : .2s;
}
.contents07 .content-banner ul li:nth-child(2){
	transition-delay : .6s;
}
.contents07 .content-banner ul li:nth-child(3){
	transition-delay : .8s;
}
.contents06 .list-contact:nth-child(1){
	transition-delay : .2s;
}
.contents06 .list-contact:nth-child(2){
	transition-delay : .6s;
}
.contents06 .list-contact:nth-child(3){
	transition-delay : .8s;
}








/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1400px
# ================================================================= */
@media screen and (max-width: 1400px){
/* # =================================================================
#### contents01
# ================================================================= */
.info-card{
	right : -8%;
}
/* # =================================================================
#### contents02
# ================================================================= */
.content-news .list-information::after{
	display : none;
}



}/*** 1400px ***/
/* # =================================================================
#### 1280px
# ================================================================= */
@media screen and (max-width: 1280px){
/* # =================================================================
#### contents01
# ================================================================= */
.main-image::after{
	content : none;
}
.contents01::after{
	content : none;
}
.info-card{
	right : -20px;
}




}/*** 1280px ***/
/* # =================================================================
#### 1200px
# ================================================================= */
@media screen and (max-width: 1200px){
.wrap{
	width : 100%;
	padding : 0 30px;
}
/* # =================================================================
#### header
# ================================================================= */
.global.pc-menu{
	display : none;
}
.menu-area.sp-menu{
	display : block;
}
#header{
	padding : 15px;
	box-shadow : none;
	background: #FFF;
}
#header .inner{
	justify-content : flex-start;
	margin-bottom : 0;
}
#header .logo h1 a{
	position : relative;
	display : block;
	width : calc(278.49px * 0.75);
	height : calc(56.49px * 0.75);
}
.header-outer .site-search{
	display : none;
}
.header-outer .header-menu{
	display : none;
}
#header .logo{
	margin-right : 15px;
}
#header .login a,
#header .logout a{
	font-size : var(--12px);
	padding : 15px 15px 15px 37px;
}
#header .login a:before,
#header .logout a:before{
	left : 12px;
	width : calc(25px * 0.75);
	height : calc(25px * 0.75);
}
/* # =================================================================
#### footer
# ================================================================= */
.footer-main-wrap{
	width : 100%;
	padding : 50px 15px 30px;
}
#page-top{
	padding : 20px 15px;
}
#page-top a span{
	width : 100%;
}
/* # =================================================================
#### contents01
# ================================================================= */
.contents01{
	padding : 30px 0;
}
.info-card{
	position : relative;
	transform:  translateY(0);
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
	margin : -20px auto 30px;
	width : fit-content;
	padding : 30px;
}
.info-card .card-btn a{
	width : 320px;
}
.ext-link-area{
	position : relative;
	width : 100%;
	bottom : 0;
}
.ext-link-area ul{
	display : block;
	width : 320px;
	margin : 0 auto;
}
.ext-link-area ul li{
	width : 100%;
	margin-bottom : 15px;
}
.ext-link-area ul li:last-child{
	margin-bottom : 0;
}
/* # =================================================================
#### contents02
# ================================================================= */
.screen{
	left : 30px;
}
.contents02 .wrap::before{
	left : 60px;
}
.contents h2{
	padding-left : 30px;
}
.contents02 .flex .right{
	padding-left : 30px;
	padding-right : 30px;
}





}/*** 1200px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

/* # =================================================================
#### contents02
# ================================================================= */
.contents02 .flex{
	display : block;
}
.contents02.contents h2{
	padding-top : 0;
	padding-left : 30px;
	margin-bottom : 30px;
}
.contents02.contents h2 span{
	display : inline-block;
	width : auto;
	margin-top : 0;
	margin-left : 15px;
}
/* # =================================================================
#### contents03
# ================================================================= */




/* # =================================================================
#### contents04
# ================================================================= */




/* # =================================================================
#### contents05
# ================================================================= */
.contents05{
	padding : 50px 0 30px;
}
.contents05 .flex{
	display : block;
}
.contents05 .left{
	padding-right : 0;
	width : 90%;
	margin : 0 auto;
}
.contents05 .left h2{
	padding-left : 0;
}
.contents05 .left a{
	margin : 0 auto;
}
.contents05 .right{
	margin : 100px auto 0;
}
.contents05 .right{
	padding-bottom : 15px;
}
.contents05 .right::before{
	width : 260%;
}
.contents05 .left::after{
	content : "";
	position : absolute;
	display : block;
	background : url(../images/top/bg_pill_2.png) no-repeat center / cover;
	top : -50px;
	right : auto;
	bottom : auto;
	left : -70px;
	margin : auto;
	font-size : var(--u);
	width : 75px;
	aspect-ratio : 256 / 326;
	z-index : -1;
}

/* # =================================================================
#### contents06
# ================================================================= */

.contents.contents06 h2{
	padding-left : 0;
}
.contents06::after{
	content : none;
}
.contents06 .flex{
	display : block;
}
.contents06 .list-contact{
	width : 300px;
	margin : 0 auto 80px;
}
.contents06 .list-contact:last-child{
	margin-bottom : 0;
}
.contents06 .list-contact:after{
	content : none;
}

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
.content-login{
	width : 80%;
}



/* # =================================================================
#### footer
# ================================================================= */
.footer-main-wrap{
	display : block;
}
.footer-main-wrap section{
	width : 300px;
	margin : 0 auto;
}
footer .footer-contents03 .adress,
footer .footer-contents03 .phone,
footer .footer-contents03 .access,
footer .footer-contents03 .bottom .links,
footer small{
	padding-left : 0;
}
footer .footer-contents03 h2 a{
	margin : 0 auto;
}
footer .footer-contents03 .adress,
footer .footer-contents03 .phone{
	width : 80%;
	margin : 0  auto 30px;
}
footer .footer-contents03 .adress p{
	font-size : var(--13px);
}
footer .footer-contents03 .phone p{
	font-size : var(--20px);
}
footer small{
	text-align : center;
}
#page-top a span{
	width : fit-content;
	text-align : center;
}
/* # =================================================================
#### contents02
# ================================================================= */
.btn-nav li{
	width : 48.5%;
	margin-bottom : 25px;
}
.btn-nav li:last-child{
	width : 100%;
	margin-bottom : 0;
}
.btn-nav li:last-child a{
	display : flex;
	align-items : center;
	justify-content : center;
}
.btn-nav li:last-child a img{
	display : inline-block;
	margin : 0;
}
.btn-nav li:last-child a p{
	margin : 0;
}
.text-nav li{
	width : 33.3333%;
	text-align : center;
}
.text-nav br{
	display : block;
}
.text-nav li a{
	width : 100%;
	padding : 30px;
	padding-bottom : 40px;
	line-height : 1.5;
}
.text-nav li a::before{
	top : auto;
	right : 0;
	bottom : 15px;
	left : 0;
}
.text-nav li a span{
	font-size : var(--22px);;
}
/* # =================================================================
#### contents03 contents04
# ================================================================= */
.contents03, 
.contents04{
	padding : 30px 0;
}
.contents03 .wrap,
.contents04 .wrap{
	padding : 0 0 0 30px;
}
.list-information{
	border-radius : 15px 0 0 15px;
}
.list-information{
	padding : 30px;
}
.list-information ul li a{
	padding-right : 20px;
}
.content-news .list-information ul li.flag.is-lock a::after,
.content-event .list-information ul li.flag.is-lock a::after{
	right : -18px;
}
.content-news .list-information ul li a::after,
.content-event .list-information ul li a::after{
	right : -17.5px;
}
.content-news .list-information ul li > a:not(.file-item)::after{
	/*right : 10.5px;*/
    right : -18px;
}
.content-information{
	display : block;
}
.information-title span{
	display : -webkit-box;
	-webkit-box-orient : vertical;
	-webkit-line-clamp : 3;
	overflow : hidden;
}
.flex.content-event.content-information{
	left : 0;
}
.content-information .left{
	width : calc(100% - 200px);
}
.content-information .left::before{
	content : none;
}
.content-news.content-information h2{
	padding-left : 0;
}
.content-event.content-information .left h2{
	margin-left : 0;
	padding-left : 0;
}
.content-news.content-information .left h2 br,
.content-event.content-information .left h2 br{
	display : none;
}

.content-news.content-information h2{
	border-bottom : 1px solid #33B29A;
	padding-bottom : 20px;
	margin-bottom:  20px;
	white-space : nowrap;
}
.content-event.content-information h2{
	border-bottom : 1px solid #4776AF;
	padding-bottom : 20px;
	margin-bottom:  20px;
	white-space : nowrap;
}

.content-news.content-information .left .list-link,
.content-event.content-information .left .list-link{
	border : none;
	position : absolute;
	top : auto;
	right : -190px;
	bottom : 40px;
	left : auto;
	margin : auto auto;
	width : fit-content;
}
.content-information .right{
	width : 100%
}
.flag.is-new .information-title span:not(.event_end)::after{
	content : none;
}

.flag.is-new .information-meta .information-category::after{
	content : "New!";
	display : inline-block;
	background-color : #E5FF9E;
	color : var(--key-color);
	font-weight : bold;
	font-size : var(--15px);
	line-height : 1;
	padding : 2px 5px;
	margin-left : 1em;
}


}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
.wrap{
	width : 100%;
	padding : 0 20px;
}
.login-wrap{
	width : 80%;
}
/* # =================================================================
#### footer
# ================================================================= */
.footer-main-wrap{
	padding-bottom : 10px;
}
footer small{
	margin-top : 40px;
}
/* # =================================================================
#### contents02
# ================================================================= */
.screen{
	left : 15px;
}
.contents02 .wrap{
	padding : 0 25px 0 10px;
}
.contents02 .flex .right{
	padding-left : 20px;
	padding-right : 0;
}
.text-nav{
	display : block;
	padding : 20px 30px;
}
.text-nav li{
	width : 100%;
	text-align : left;
}
.text-nav li a{
	padding : 15px;
	padding-left : 45px;
}
.text-nav li a br{
	display : none;
}
.text-nav li a::before{
	top : 0;
	right : auto;
	bottom : 0;
	left : 15px;
	margin : auto;
}
.text-nav li a span{
	font-size : var(--16px);
}
/* # =================================================================
#### contents03 04
# ================================================================= */
.contents03 .wrap,
.contents04 .wrap{
	padding : 0 0 0 20px;
}

.list-information{
	border-radius : 15px 0 0 15px;
	padding : 30px 15px
}
.list .list-information,
.member_top .list-information{
    padding : 30px 0
}
.list-information ul li a{
	padding-right : 45px;
}
.content-news .list-information ul li.flag.is-lock a::after,
.content-event .list-information ul li.flag.is-lock a::after{
	right : 0;
}
.content-news .list-information ul li a::after,
.content-event .list-information ul li a::after{
	right : 0.5px;
}
.content-news .list-information ul li > a:not(.file-item)::after{
	/*right : 10.5px;*/
    right : 0;
}
.list-information dd{
	width : calc(100% - 115px);
}
/* # =================================================================
#### contents06
# ================================================================= */
.information-text p br{
	display : none;
}

/* # =================================================================
#### contents07
# ================================================================= */
.contents07{
	padding : 0 0 50px;
}
.contents07 .content-banner ul{
	display : block;
}
.contents07 .content-banner ul li{
	width :260px;
	margin : 0 auto 15px;
}
.contents07 .content-banner ul li:last-child{
	margin-bottom : 0;
}






}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){
/* # =================================================================
#### header
# ================================================================= */
#header .logo{
	margin-right : 10px;
}
#header .login a{
	padding : 13px 13px 13px 35px;
}
#header .logo h1 a{
	width : calc(278.49px * 0.6);
	height : calc(56.49px * 0.6);
}

/* # =================================================================
#### footer
# ================================================================= */
.footer-main-wrap section{
	width : 100%;
	padding : 0 10px;
}
section.footer-contents03.section{
	padding-top : 40px;
}
footer .contents02{
	padding-bottom : 30px;
}
footer .footer-contents03 h2 a{
	width : 90%;
	height : 100%;
	aspect-ratio : 557 / 113;
}
footer .footer-contents03 .adress,
footer .footer-contents03 .phone{
	width : 70%;
}
/* # =================================================================
#### content01
# ================================================================= */
.info-card{
	width : 100%;
	padding : 25px;
}
.info-card .card-btn a{
	width : 100%;
}
/* # =================================================================
#### content02
# ================================================================= */
.btn-nav li a{
	padding : 20px 15px;
}
.btn-nav li a img{
	width : calc(86px * 0.75);
	height : calc(79px * 0.75);
	margin : 0 auto 15px;
}
.btn-nav li a p{
	font-size : var(--16px);
}
.btn-nav li:last-child a{
	padding : 10px 15px;
}
.btn-nav li:last-child a img{
	left : -10px;
}
/* # =================================================================
#### content03 04
# ================================================================= */
.list-information ul li a{
	padding-right : 10px;
}
.information-title{
	padding-right : 35px;
}
.information-meta time{
	font-size : var(--14px);
	margin-right : 5px;
}
.information-meta .information-category span{
	font-size : var(--13px);
	padding : 3px 10px;
}
.flag.is-new .information-meta .information-category::after{
	margin-left : 5px;
}

.list-information{
	padding : 30px 0px 30px 15px;
}
.information-title{
	padding-right : 42px;
}
.member_top .information-title,
.list .information-title{
    padding-right : 30px;
}
.content-news .list-information ul li.flag.is-lock a::after,
.content-event .list-information ul li.flag.is-lock a::after{
	right : 8px;
}
.content-news .list-information ul li a::after,
.content-event .list-information ul li a::after{
	right : 10.5px;	
}
.member_top .content-news .list-information ul li.flag.is-lock a::after,
.list .content-news .list-information ul li > a:not(.file-item)::after,
.list .content-event .list-information ul li a::after{
	right : 0;
}
.content-news .list-information ul li > a:not(.file-item)::after{
    right : 8px;
}
/* # =================================================================
#### content05
# ================================================================= */
.contents05 .left a{
	padding : 30px 40px 30px 60px;
}
/* # =================================================================
#### content06
# ================================================================= */
.contents06 .wrap{
	padding : 30px 15px;
}


}/*** 480px ***/
/* # =================================================================
#### 375px
# ================================================================= */
@media screen and (max-width: 365px){
.information-meta .information-category{
	display : block;
	margin-top : 5px;
}


}/*** 365px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){
/* # =================================================================
#### footer
# ================================================================= */
.footer-main-wrap section{
	padding : 0;
}
footer .footer-contents02{
	padding-bottom : 30px;
}
footer .contents03 h2 a{
	width : 100%;
}
footer .footer-contents03 .adress,
footer .footer-contents03 .phone{
	width : 100%;
}
.info-card .card-btn a:first-child::before{
	left : 16px;
	width : 18px;
	height : 22px;
}
.info-card .card-btn a:last-child::before{
	left : 15px;
	width : 18px;
	height : 20px;
}
.info-card .card-btn a{
	font-size : var(--13px);
}
.ext-link-area ul{
	width : 100%;
}

.contents02 .wrap{
	padding : 0 15px 0 10px;
}
.btn-nav li a p{
	font-size : var(--15px);
}
.text-nav{
	padding : 15px 25px;
}
.btn-nav li:nth-child(-n + 2) a p{
	padding-right : 0;
	margin : 0;
	left : -5px;
}
.btn-nav li:nth-child(-n + 2) a p::after{
	right : -15px;
}
.text-nav li a{
	padding : 10px;
	padding-left : 20px;
	font-size : var(--15px);
}
.text-nav li a::before{
	left : -10px;
}
.contents06 .wrap{
	padding : 30px 15px;
}
.contents06 .list-contact{
	width : 100%;
}











}/*** 320px ***/