@charset "utf-8";

/* =============================================================================
   TOP
   ========================================================================== */

@import url("jquery.bxslider.css");

/*----------------------------------------------------
	base
----------------------------------------------------*/

body#format_top li {
	list-style:none;
}


/*----------------------------------------------------
	main visual
----------------------------------------------------*/

#top-section {
    background: url(../images/top/main02.jpg) no-repeat;
    background-size: cover;
    background-position: 50%;
    min-height: 240px;
    padding-top: 80px;
}

.m-title {
    background: rgba(32,158,218,1);
    padding: 10px 8px 10px 18px;
    display: flex;
    font-size: 32px;
	color: #ffffff;
    font-weight: bold;
    text-align: center;
}

.copy1 {
    background: rgba(255,255,255,0.8);
    padding: 10px 8px 10px 8px;
    display: flow-root;
    font-size: 28px;
    font-weight: bold;
    color: #777777;
    text-align: center;
}


/*----------------------------------------------------
	aboutsite
----------------------------------------------------*/

#box1 {
    margin: 20px 0px 20px 0px;
    width: 100%;
    height: auto;
}

#box1 img {
    margin: 0; 
    padding: 0;
}

@media only screen and (max-width:767px){
	#box1 img {
    margin: 10px 0px 10px 0px;
    width: 100%;
    height: auto;
    }
}

/*----------------------------------------------------
	navigation 
----------------------------------------------------*/



/*----------------------------------------------------
	slider 
----------------------------------------------------*/

#image-bloc {
	width: 100%;
	z-index:1;
}

#image-bloc .bx-viewport {
	overflow: visible!important;
}

#container {
	overflow: hidden;
}

.slider {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.slider li {
	margin: 0;
	padding: 0;
}

@media only screen and (min-width:601px){
	#image-bloc {
	margin-top: 30px;
	width: 100%;
	height: 230px;
	}

	.bx-wrapper{
	width: 600px;
	}

	#image-bloc .bx-viewport {
	width: 640px!important;
	overflow: visible!important;
	}

	.slider {
	height: 230px;
	}

	slider li {
	width: 600px!important;
	}
}

/*----------------------------------------------------
	講座を検索する
----------------------------------------------------*/

.topsearch {
	width: 100%;
	margin: 95px auto 0 auto;
	text-align: center;
	background:url(../images/top/search_bg_01.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: auto 100%;
}

@media only screen and (min-width:768px){
	.topsearch {
    background-position: 50% 0;
    background-size: cover;
	}
}

@media only screen and (min-width:1181px){
	.topsearch {
	background:url(../images/top/search_bg_01.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
	}
}

@media only screen and (min-width:1501px){
	.topsearch {
	background:url(../images/top/search_bg_03.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
	}
}

.topsearch .topsearch_inner {
	width: 1300px;
	margin: 0 auto;
	padding: 0 60px;
	text-align: left;
	background: rgba(255,255,255,0.9);
	box-sizing: border-box;
}

@media only screen and (max-width:1280px){
	.topsearch .topsearch_inner {
	width: auto;
	margin: 0 30px;
	padding: 0 20px;
	}
}

@media only screen and (max-width:767px){
	.topsearch {
	margin: 75px auto 0 auto;
	}

	.topsearch .topsearch_inner {
	width:auto;
	margin: 0 10px;
	padding: 0;
	}
}

.topsearch h2 {
	margin: 0 auto -20px auto;
	padding:0;
	font-size:3.6rem;
	text-align: center;
	border: none;
}

@media only screen and (max-width:767px){
	.topsearch h2 {
	font-size:1.8rem;
	margin: 0 auto;
	}
}


/*----------------------------------------------------
	accordion
----------------------------------------------------*/

.main #list .accordionbox {
	width: 100%;
	margin: 0 0 40px 0;
	padding: 0;
}

.main #list .accordionbox dl.accordionlist {
	margin: 0;
	padding: 0;
}

.main #list .accordionlist > dt {
    display:block;
    padding: 8px 0 0 0;
	overflow:hidden;
	color:#fff;
    background: #209eda;
	border-radius: 2px;
	cursor:pointer;
}

.main #list .accordionlist > dt:hover {
    background: #033876;
	transition: 0.3s ease-in-out;
}

.main #list .accordionlist > dt .actitle{
	width:calc(100% - 70px);
	margin: 0 0 0 30px;
	padding:0;
	float: left;
}

.main #list .accordionlist > dt p {
	display:block;
	margin-bottom: 0;
}

.main #list .accordionlist > dt p.actitle {
	margin: 0;
	padding:0;
	font-size:1.6rem;
	text-align:center;
}

@media only screen and (max-width:767px){
	.main #list .accordionlist > dt .actitle span{
	font-size:1.4rem;
	}
}

.main #list .accordionlist > dd {
    display:none;
	margin: 0;
	padding:0;
    background: #f6f6f4;
    border-bottom:1px solid #209eda;
}

.main #list .accordion_icon,
.main #list .accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}

/* icon */

.main #list .accordion_icon {
	position: relative;
	width: 30px;
	height: 30px;
	float: right;
	margin-top: 4px;
	margin-right: 5px;
}

.main #list .accordion_icon span {
	position: absolute;
    left: 6px;
    width: 50%;
	height: 2px;
    background-color: #fff;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}

.main #list .accordion_icon span:nth-of-type(1) {
    top: 5px;
	transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.main #list .accordion_icon span:nth-of-type(2) {
    top: 5px;
	transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

/*＋、－切り替え*/
.main #list .accordion_icon.active span:nth-of-type(1) {
	display:none;
}

.main #list .accordion_icon.active span:nth-of-type(2) {
	top: 5px;
	transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}



/*----------------------------------------------------
	スタッフによる、マナパスのおススメ講座ラインナップ
----------------------------------------------------*/

.toprecommend {
	margin: 100px auto 0 auto;
	padding:0;
	width: 1140px;
	text-align: center;
}

@media only screen and (max-width:1180px){
	.toprecommend {
	width: auto;
	margin: 100px 30px 0 30px;
	}
}

@media only screen and (max-width:980px){
	.toprecommend {
	margin: 60px 30px 0 30px;
	}
}

@media only screen and (max-width:767px){
	.toprecommend {
	margin: 40px 10px 0 10px;
	}
}

.toprecommend h2 {
	margin: 0;
	padding: 0 0 35px 0;
	color: #077bc3;
	font-size: 2.6rem;
	font-weight:bold;
	border-bottom: none;
}

@media only screen and (max-width:980px){
	.toprecommend h2 {
	font-size: 2.2rem;
	padding: 0 0 20px 0;
	}
}

@media only screen and (max-width:767px){
	.toprecommend h2 {
	padding: 0 0 16px 0;
	font-size: 1.7rem;
	text-align:center;
	}
}

@media only screen and (max-width:480px){
	.toprecommend h2 {
	font-size: 1.5rem;
	}
}

.toprecommend > div {
	margin: 0;
	padding: 40px 30px;
	box-sizing: border-box;
}

@media only screen and (max-width:1160px){
	.toprecommend > div {
	padding: 30px;
	}
}

@media only screen and (max-width:980px){
	.toprecommend > div {
	padding: 20px 16px 16px 16px;
	}
}

@media only screen and (max-width:767px){
	.toprecommend > div {
	padding: 20px 16px 6px 16px;
	}
}

@media only screen and (max-width:480px){
	.toprecommend > div {
	padding: 16px 10px 4px 10px;
	}
}

.toprecommend > div.recommend_01 {
	background:#fde5ef;
}

.toprecommend > div.recommend_02 {
	background:#e0eef9;
}

.toprecommend > div.recommend_03 {
	background:#ffefce;
}

.toprecommend > div.recommend_04 {
	background:#f6f6f6;
}

.toprecommend > div h3 {
	font-size: 2.2rem;
	font-weight:bold;
}

@media only screen and (max-width:980px){
	.toprecommend > div h3 {
	font-size: 2rem;
	}
}

@media only screen and (max-width:767px){
	.toprecommend > div h3 {
	font-size: 1.7rem;
	}
}

@media only screen and (max-width:480px){
	.toprecommend > div h3 {
	font-size: 1.5rem;
	}
}

.toprecommend > div.recommend_01 h3 {
	color:#df5376;
}

.toprecommend > div.recommend_02 h3 {
	color:#077bc3;
}

.toprecommend > div.recommend_03 h3 {
	color:#ff7c19;
}

.toprecommend > div.recommend_04 h3 {
	color:#505050;
}

.toprecommend > div ul {
	width: 100%;
	margin: 20px 0 0 0;
	padding: 0;
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.toprecommend > div li {
	width: 204px;
	margin: 0 0 14px;
	padding: 0;
	background:#fff;
	line-height:1.5;
	text-align:left;
}

@media only screen and (max-width:1160px){
	.toprecommend > div ul {
	justify-content: space-around;
	}
	.toprecommend > div li {
	width: 20%;
	margin-left: 5px;
	margin-right: 5px;
	}
}

@media only screen and (max-width:980px){
	.toprecommend > div ul {
	flex-wrap: wrap;
	justify-content: flex-start;
	}
	.toprecommend > div li {
	width: calc(33.3% - 20px);
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 15px;
	}
}

@media only screen and (max-width:767px){
	.toprecommend > div ul {
	margin: 10px 0 0 0;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 5px;
	}
	.toprecommend > div li {
	width: 48%;
	margin-left: 0;
	margin-right: 0;
	max-width: 48%;
	}
}

.toprecommend > div li a {
	display:block;
	margin: 0;
	padding: 0 0 18px 0;
	height:100%;
	box-sizing: border-box;
}

.toprecommend > div.recommend_01 a:hover {
	background-color: rgba(253, 229, 239, 0.5);
	transition: 0.5s ease-in-out;
}

.toprecommend > div.recommend_02 a:hover {
	background-color: rgba(224, 238, 249, 0.5);
	transition: 0.5s ease-in-out;
}

.toprecommend > div.recommend_03 a:hover {
	background-color: rgba(255, 239, 206, 0.5);
	transition: 0.5s ease-in-out;
}

.toprecommend > div.recommend_04 a:hover {
	background-color: rgba(249, 249, 249, 0.5);
	transition: 0.5s ease-in-out;
}

.toprecommend > div li span {
	display:block;
	box-sizing: border-box;
}

.toprecommend > div li span.genre {
	margin: 0;
	padding: 5px 10px;
	text-align:center;
	color:#fff;
	font-size:0.9em;
}

.toprecommend > div.recommend_01 span.genre {
	background:#df5376;
}

.toprecommend > div.recommend_02 span.genre {
	background:#077bc3;
}

.toprecommend > div.recommend_03 span.genre {
	background:#ff7c19;
}

.toprecommend > div.recommend_04 span.genre {
	background:#505050;
}

.toprecommend > div li span.uname {
	margin: 0;
	padding: 15px 15px 0 15px;
	font-size:0.85em;
}

.toprecommend > div li span.coursetitle {
	margin: 5px 0 0 0;
	padding: 0 15px;
	font-size:0.9em;
	font-weight:bold;
}

.toprecommend > div li span.note {
	margin: 10px 15px 0 15px;
	padding: 10px 0 0 0;
	font-size:0.85em;
	border-top: 1px dotted #ccc;
}

.toprecommend > div li figure {
	display: block;
	margin: 0 0 10px 0;
	padding: 0;
	overflow: hidden;
	width: 204px;
	height: 115px;
}

.toprecommend > div li figure img {
	display: block;
	width: 204px;
	height: 115px;
	object-fit: cover;
}

@media only screen and (max-width:1160px){
	.toprecommend > div li figure {
	width: 100%;
	height: auto;
	}

	.toprecommend > div li figure img {
	width: 100%;
	height: auto;
	}
}

.toprecommend > div a:hover figure img {
	transform: scale(1.1);
	transition-duration: 0.5s;
	opacity: 1;
	filter: alpha(opacity=100);
}

.toprecommend > div li a:link 	{ color: #333; text-decoration:none; }
.toprecommend > div li a:visited { color: #333; text-decoration:none; }
.toprecommend > div li a:hover 	{ color: #333; text-decoration:none; }
.toprecommend > div li a:active 	{ color: #333; text-decoration:none; }


/*講座ランキング*/
.lank-wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.toprecommend .lank-genre {
	width: calc(50% - 8px);
	display: block;
	margin-top: 1.6rem;
	padding: 1.6rem;
	background: #fff;
}

.toprecommend .genre-head {
	margin-bottom: 1rem;
	border-bottom: 1px solid #077bc3;
	text-align: left;
	color: #077bc3;
}

.toprecommend .lank-list {
	display: block;
	font-size: 1.4rem;
	font-weight: bold;
	width: 100%;
}

.toprecommend .recommend_text_r {
	text-align: right;
}

.lank-genre .lank-list:nth-of-type(odd)::before,
.lank-genre .lank-list:nth-of-type(even)::before{
	display: inline-block;
	float: left;
	content: "";
	background-size: contain;
	width: 36px;
	height: 36px;
	margin-right: 0.8rem;
}

.lank-genre .lank-list:nth-of-type(1)::before {
	background: url("../images/top/no1.svg")no-repeat center center;
}

.lank-genre .lank-list:nth-of-type(2)::before {
	background: url("../images/top/no2.svg")no-repeat center center;
}

.lank-genre .lank-list:nth-of-type(3)::before {
	background: url("../images/top/no3.svg")no-repeat center center;
}

.lank-genre .lank-list:nth-of-type(4)::before {
	background: url("../images/top/no4.svg")no-repeat center center;
}

.lank-genre .lank-list:nth-of-type(5)::before {
	background: url("../images/top/no5.svg")no-repeat center center;
}

.toprecommend .lank-genre .lank-list a {
	padding-bottom: 0.8rem;
	color: #077bc3;
}

.toprecommend .lank-genre .lank-list a:hover {
	background: #fff;
	color: #ff943f;
}

.toprecommend .lank-list:last-child a {
	padding-bottom: 0rem;
}

.toprecommend .lank-course {
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
	
}

.toprecommend .lank-school {
	font-size: 1.2rem;
	font-weight: normal;
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toprecommend .recommend_04:first-child {
	margin-bottom: 4rem;
}

.toprecommend .rank_more {
	display: block;
	background: #63C6F6;
	color: #fff;
	font-size: 1.3rem;
	padding: 0.4rem 0;
}

.toprecommend .lank-genre .rank_more:hover {
	background: #209eda;
	text-decoration: none;
}

.toprecommend .rank_other {
	display: block;
	width: 100%;
	padding: 0.8rem;
	margin-top: 1.6rem;
	background: #fff;
	color: #209eda;
	font-weight: bold;
}

.toprecommend .rank_other:hover {
	text-decoration: none;
}

@media only screen and (max-width:1160px){
	.toprecommend .lank-list {
		margin: 0;
	}
}

@media only screen and (max-width:767px){
	.toprecommend .lank-genre {
		width: 100%;
		padding: 1rem;
	}
	.toprecommend .lank-list {
		max-width: 100%;
		margin-bottom: 0;
		font-size: 1.3rem;
	}
	.toprecommend .lank-school {
		font-size: 1.1rem;
	}
	.lank-genre .lank-list:nth-of-type(odd)::before,
	.lank-genre .lank-list:nth-of-type(even)::before{
		width: 32px;
		height: 32px;
	}
	.toprecommend .recommend_04:first-child {
		padding-bottom: 16px;
	}
}


/*----------------------------------------------------
	お知らせ
----------------------------------------------------*/

.topnews {
	margin: 80px auto 0 auto;
	padding:0 0 100px 0;
	width: 1140px;
	text-align: left;
	position:relative;
}

@media only screen and (max-width:1180px){
	.topnews {
	width: auto;
	margin: 60px 30px 0 30px;
	padding:0 0 80px 0;
	}
}

@media only screen and (max-width:767px){
	.topnews {
	width:auto;
	margin: 40px 10px 0 10px;
	padding: 8px 0 40px 0;
	flex-direction: column;
	justify-content:flex-start;
	}
}

.topnews h2 {
	margin: 0;
	padding: 0 0 8px 0;
	color: #077bc3;
	font-size:1.8rem;
	border-bottom: 1px solid #077bc3;
}

.topnews h2 span {
	margin: 0 10px 0 0;
	padding: 0;
	color:#36ace3;
	font-size:4rem;
	font-family: "Yu Gothic Medium" , "游ゴシック Medium" , YuGothic, "游ゴシック体";
	font-weight:700;
	font-weight:bold;
	letter-spacing:0.01em;
}

@media only screen and (max-width:900px){
	.topnews h2 span {
	font-size:3rem;
	}
}

@media only screen and (max-width:767px){
	.topnews h2 {
	display:block;
	margin: 0 ;
	padding: 0 0 4px 0;
	font-size:1.5rem;
	text-align:center;
	}

	.topnews h2 span {
	display: inline;
	margin: 0 6px 0 0;
	font-size:2rem;
	}
}


/*----------------------------------------------------
	お知らせ
----------------------------------------------------*/

.topnews .messageText{
	margin: 0;
	padding: 0 5px 25px 5px;
	display: none;
	overflow:hidden;
	background-color: rgba(7, 123, 195, 0.1);
}

.topnews ul {
	width: 100%;
	margin: 0;
	padding:0;
}

.topnews li {
	margin: 0;
	padding: 0;
	line-height: 1.5;
	border-bottom: 1px solid #077bc3;
}

.topnews li p {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

.topnews li p:first-child {
	padding: 0 0 6px 0;
}

.topnews li a {
	display:block;
	margin: 0;
	padding: 23px 25px 20px 5px;
	position:relative;
}

.topnews li a:hover {
	background-color: rgba(7, 123, 195, 0.1);
	transition: 0.5s ease-in-out;
}

.topnews li a:link 	{ color: #333; text-decoration:none; }
.topnews li a:visited 	{ color: #333; text-decoration:none; }
.topnews li a:hover 	{ color: #333; text-decoration:none; }
.topnews li a:active 	{ color: #333; text-decoration:none; }

.topnews li a::after {
	position:absolute;
	top:50%;
	right: 10px;
	transform: translatey(-50%);
	content:"";
	width: 10px;
	height: 10px;
	background:url(../images/arw_blue.svg) 0 0 no-repeat;
	background-size: 10px 10px;
	z-index:1;
}

@media only screen and (max-width:767px){
	.topnews .messageText {
	padding: 0 5px 15px 5px;
	}

	.topnews li {
	font-size:1.3rem;
	}

	.topnews li a {
	padding: 13px 25px 10px 5px;
	}
}

.topnews .date {
	color:#077bc3;
}

 /* 一覧を見る */

.topnews .more {
	margin: 0;
	padding: 0;
}

.topnews .more a {
	margin: 0;
	padding: 8px 40px;
	text-align:center;
	background:#077bc3;
	color:#fff;
	font-size:1.2rem;
	line-height: 14px;
	border-radius: 30px;
	box-sizing: border-box;
	min-height: 30px;
	height: auto !important;
	height: 30px;
	position:relative;
}

.topnews .more a:link 	{ color: #fff; text-decoration:none; }
.topnews .more a:visited 	{ color: #fff; text-decoration:none; }
.topnews .more a:hover 	{ color: #fff; text-decoration:none; }
.topnews .more a:active 	{ color: #fff; text-decoration:none; }


.topnews .more a:hover {
	background:#033876;
}

.topnews .more a::after {
	position:absolute;
	top:50%;
	right: 10px;
	transform: translatey(-50%);
	content:"";
	width: 10px;
	height: 10px;
	background:url(../images/arw_white.svg) 0 0 no-repeat;
	background-size: 10px 10px;
	z-index:1;
}

@media only screen and (max-width:767px){
	.topnews .more {
	margin: 20px auto;
	text-align:center;
	}
}

@media only screen and (min-width:768px){
	.topnews .more {
	position:absolute;
	top: 15px;
	right: 0;
	z-index:1;
	}
}


/*----------------------------------------------------
	Main menu
----------------------------------------------------*/

.topmenu {
	width: 100%;
	margin: 0;
	padding: 0;
	background: linear-gradient(90deg, #0863bb, #36ace3);
	color: #fff;
}

.topmenu a:link 	{ color: #fff; text-decoration:none; }
.topmenu a:visited 	{ color: #fff; text-decoration:none; }
.topmenu a:hover 	{ color: #fff; text-decoration:none; }
.topmenu a:active 	{ color: #fff; text-decoration:none; }

.topmenu ul {
	width: 100%;
	margin: 0;
	padding: 0;
	display:flex;
	flex-wrap: wrap;
}

.topmenu li {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border-bottom:1px solid #fff;
}

.topmenu li.topmenu_experience {
	width:calc(100%/3);
	border-right:1px solid #fff;
}

.topmenu li.topmenu_spcontent {
	width:calc(100%/3);
	border-right:1px solid #fff;
}

.topmenu li.topmenu_glossary {
	width:calc(100%/3);
	border-right:1px solid #fff;
}

.topmenu li.topmenu_support {
	width:calc(100%/3);
}

.topmenu li.topmenu_magazine {
	width:calc(100%/3);
	border-right:1px solid #fff;
}

.topmenu li.topmenu_enquete {
	width:calc(100%/3);
}

.topmenu li a {
	display:block;
	width: 100%;
	height: 100%;
	margin: 0;
	font-size:2.4rem;
	line-height:1.4;
	box-sizing: border-box;
	text-align:center;
	position:relative;
}

.topmenu li.topmenu_experience a,
.topmenu li.topmenu_spcontent a,
.topmenu li.topmenu_support a {
	padding: 230px 0 0 0;
}

.topmenu li.topmenu_magazine a,
.topmenu li.topmenu_glossary a,
.topmenu li.topmenu_enquete a {
	padding: 0 0 0 50%;
}

.topmenu li a:hover {
	opacity: 0.8;
	transition: 0.5s ease-in-out;
}

.topmenu li.topmenu_experience a::before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	width: 100%;
	height: 230px;
    background: url(../images/top/menu_p_01.jpg);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: cover;
}

.topmenu li.topmenu_experience a::after {
	position: absolute;
	content: "";
	top: calc(calc(100% + 230px)  * 0.5 );
	right: 20px;
	transform: translatey(-50%);
	width: 28px;
	height: 28px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 28px 28px;
}

*::-ms-backdrop, .topmenu li.topmenu_experience a::after {
	top: 310px;
}

.topmenu li.topmenu_experience a .topmenu_inner {
	margin:0;
	padding:60px 50px 20px 50px;
	position:relative;
}

.topmenu li.topmenu_experience a .topmenu_inner::before {
	position: absolute;
	content: "";
	top:0;
	left: 50%;
	margin-left: -39px;
	transform: translatey(-50%);
	width: 78px;
	height: 78px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_01.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 60px 60px;
	border-radius: 39px;
}

.topmenu li.topmenu_experience a span {
	display: inline-block;
	width: auto;
	margin: 6px auto 0 auto;
	padding: 0;
	box-sizing: border-box;
	text-align:center;
	font-size:1.8rem;
	position:relative;
}

.topmenu li.topmenu_spcontent a::before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	width: 100%;
	height: 230px;
    background: url(../images/top/menu_p_sp.jpg);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: cover;
}

.topmenu li.topmenu_spcontent a::after {
	position: absolute;
	content: "";
	top: calc(calc(100% + 230px)  * 0.5 );
	right: 20px;
	transform: translatey(-50%);
	width: 28px;
	height: 28px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 28px 28px;
}

*::-ms-backdrop, .topmenu li.topmenu_spcontent a::after {
	top: 310px;
}

.topmenu li.topmenu_spcontent a .topmenu_inner {
	margin:0;
	padding:60px 50px 20px 50px;
	position:relative;
}

.topmenu li.topmenu_spcontent a .topmenu_inner::before {
	position: absolute;
	content: "";
	top:0;
	left: 50%;
	margin-left: -39px;
	transform: translatey(-50%);
	width: 78px;
	height: 78px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_06.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 60px 60px;
	border-radius: 39px;
}

.topmenu li.topmenu_spcontent a span {
	display: inline-block;
	width: auto;
	margin: 6px auto 0 auto;
	padding: 0;
	box-sizing: border-box;
	text-align:center;
	font-size:1.8rem;
	position:relative;
}



.topmenu li.topmenu_support a::before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	width: 100%;
	height: 230px;
    background: url(../images/top/menu_p_03.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.topmenu li.topmenu_support a::after {
	display:block;
	position: absolute;
	content: "";
	top: calc(calc(100% + 230px)  * 0.5 );
	right: 20px;
	transform: translatey(-50%);
	width: 28px;
	height: 28px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 28px 28px;
}

*::-ms-backdrop, .topmenu li.topmenu_support a::after {
	top: 310px;
}

.topmenu li.topmenu_support a .topmenu_inner {
	margin:0;
	padding:60px 50px 20px 50px;
	position:relative;
}

.topmenu li.topmenu_support a .topmenu_inner::before {
	position: absolute;
	content: "";
	top:0;
	left: 50%;
	margin-left: -39px;
	transform: translatey(-50%);
	width: 78px;
	height: 78px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_03.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 60px 60px;
	border-radius: 39px;
}





.topmenu li.topmenu_glossary a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
    background: url(../images/top/menu_p_02.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.topmenu li.topmenu_glossary a::after {
	position: absolute;
	content: "";
	top: 50%;
	right: 20px;
	transform: translatey(-50%);
	width: 28px;
	height: 28px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 28px 28px;
}

.topmenu li.topmenu_glossary a .topmenu_inner {
	margin:0;
	padding:40px 50px 40px 40px;
	position:relative;
	font-size: 1.8rem;
}

.topmenu li.topmenu_glossary a .topmenu_inner::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	margin-left: -30px;
	transform: translatey(-50%);
	width: 60px;
	height: 60px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_02.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 46px 46px;
	border-radius: 39px;
}


.topmenu li.topmenu_magazine a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
    background: url(../images/top/menu_p_05.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.topmenu li.topmenu_magazine a::after {
	position: absolute;
	content: "";
	top: 50%;
	right: 20px;
	transform: translatey(-50%);
	width: 28px;
	height: 28px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 28px 28px;
}

.topmenu li.topmenu_magazine a .topmenu_inner {
	margin:0;
	padding:40px 50px 40px 40px;
	position:relative;
	font-size: 1.8rem;
}

.topmenu li.topmenu_magazine a .topmenu_inner::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	margin-left: -30px;
	transform: translatey(-50%);
	width: 60px;
	height: 60px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_04.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 46px 46px;
	border-radius: 39px;
}


.topmenu li.topmenu_enquete a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
    background: url(../images/top/menu_p_05.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.topmenu li.topmenu_enquete a::after {
	position: absolute;
	content: "";
	top: 50%;
	right: 20px;
	transform: translatey(-50%);
	width: 28px;
	height: 28px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 28px 28px;
}

.topmenu li.topmenu_enquete a .topmenu_inner {
	margin:0;
	padding:40px 50px 40px 40px;
	position:relative;
	font-size: 1.8rem;
}

.topmenu li.topmenu_enquete a .topmenu_inner::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	margin-left: -30px;
	transform: translatey(-50%);
	width: 60px;
	height: 60px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_05.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 46px 46px;
	border-radius: 39px;
}

@media only screen and (max-width:1140px){
	.topmenu li a {
	font-size:2rem;
	}

	.topmenu li.topmenu_glossary a span br {
	display:none;
	}
}

@media only screen and (max-width:767px){
	.topmenu ul {
	display:flex;
	flex-wrap: nowrap;
	flex-direction:column;
	align-content:center;
	}

	.topmenu li.topmenu_experience,
	.topmenu li.topmenu_spcontent,
	.topmenu li.topmenu_glossary,
	.topmenu li.topmenu_support,
	.topmenu li.topmenu_magazine,
	.topmenu li.topmenu_enquete {
	width: 100%;
	border-right:none;
	}

	.topmenu li a {
	font-size:1.5rem;
	}

	.topmenu li.topmenu_experience a,
	.topmenu li.topmenu_spcontent a,
	.topmenu li.topmenu_glossary a,
	.topmenu li.topmenu_support a,
	.topmenu li.topmenu_magazine a,
	.topmenu li.topmenu_enquete a {
	padding: 0 0 0 30%;
	}

	.topmenu li .topmenu_inner {
	margin:0;
	padding:24px 40px 24px 32px;
	font-size:1.5rem;
	text-align:left;
	position:relative;
	display: flex;
    flex-direction: column;
    justify-content: center; 
	height: 90px;
	}

	.topmenu li.topmenu_experience a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 30%;
	height: 100%;
    background: url(../images/top/menu_p_01.jpg);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: cover;
	}

	.topmenu li.topmenu_experience a::after {
	position: absolute;
	content: "";
	top: 50%;
	right: 10px;
	transform: translatey(-50%);
	width: 20px;
	height: 20px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 20px 20px;
	}

	*::-ms-backdrop, .topmenu li.topmenu_experience a::after {
	top: 50%;
	}

	.topmenu li.topmenu_experience a .topmenu_inner {
	margin:0;
	padding:14px 40px 14px 32px;
	line-height:2rem;
	text-align:left;
	position:relative;
	}

	.topmenu li.topmenu_experience a .topmenu_inner::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	margin-left: -20px;
	transform: translatey(-50%);
	width: 40px;
	height: 40px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_01.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 30px 30px;
	border-radius: 20px;
	}

	.topmenu li.topmenu_experience a span {
	display: inline-block;
	width: auto;
	margin: 4px 0 0 0;
	padding: 0;
	text-align:left;
	font-size:1.2rem;
	line-height:1.5;
	}
	
	
	.topmenu li.topmenu_spcontent a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 30%;
	height: 100%;
    background: url(../images/top/menu_p_sp.jpg);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: cover;
	}

	.topmenu li.topmenu_spcontent a::after {
	position: absolute;
	content: "";
	top: 50%;
	right: 10px;
	transform: translatey(-50%);
	width: 20px;
	height: 20px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 20px 20px;
	}

	*::-ms-backdrop, .topmenu li.topmenu_spcontent a::after {
	top: 50%;
	}

	.topmenu li.topmenu_spcontent a .topmenu_inner {
	margin:0;
	padding:14px 40px 14px 32px;
	line-height:2rem;
	text-align:left;
	position:relative;
	}

	.topmenu li.topmenu_spcontent a .topmenu_inner::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	margin-left: -20px;
	transform: translatey(-50%);
	width: 40px;
	height: 40px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_06.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 30px 30px;
	border-radius: 20px;
	}

	.topmenu li.topmenu_spcontent a span {
	display: inline-block;
	width: auto;
	margin: 4px 0 0 0;
	padding: 0;
	text-align:left;
	font-size:1.2rem;
	line-height:1.5;
	}
	
	.topmenu li.topmenu_glossary a::before {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 30%;
		height: 100%;
    background: url(../images/top/menu_p_02.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
	}

	.topmenu li.topmenu_glossary a::after {
	position: absolute;
	content: "";
	top: 50%;
	right: 10px;
	transform: translatey(-50%);
	width: 20px;
	height: 20px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 20px 20px;
	}

	.topmenu li.topmenu_glossary a .topmenu_inner {
	margin:0;
	padding:14px 40px 14px 32px;
	line-height:2rem;
	text-align:left;
	position:relative;
	}

	.topmenu li.topmenu_glossary a .topmenu_inner::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	margin-left: -20px;
	transform: translatey(-50%);
	width: 40px;
	height: 40px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_02.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 30px 30px;
	border-radius: 20px;
	}

	.topmenu li.topmenu_support a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 30%;
	height: 100%;
    background: url(../images/top/menu_p_03.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
	}

	.topmenu li.topmenu_support a::after {
	position: absolute;
	content: "";
	top: 50%;
	right: 10px;
	transform: translatey(-50%);
	width: 20px;
	height: 20px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 20px 20px;
	}

	*::-ms-backdrop, .topmenu li.topmenu_support a::after {
	top: 50%;
	}

	.topmenu li.topmenu_support a .topmenu_inner {
	margin:0;
	padding:14px 40px 14px 32px;
	line-height:2rem;
	text-align:left;
	position:relative;
	}

	.topmenu li.topmenu_support a .topmenu_inner::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	margin-left: -20px;
	transform: translatey(-50%);
	width: 40px;
	height: 40px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_03.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 30px 30px;
	border-radius: 20px;
	}

	.topmenu li.topmenu_magazine a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 30%;
	height: 100%;
    background: url(../images/top/menu_p_04.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
	}

	.topmenu li.topmenu_magazine a::after {
	position: absolute;
	content: "";
	top: 50%;
	right: 10px;
	transform: translatey(-50%);
	width: 20px;
	height: 20px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 20px 20px;
	}

	.topmenu li.topmenu_magazine a .topmenu_inner {
	margin:0;
	padding:14px 40px 14px 32px;
	line-height:2rem;
	text-align:left;
	position:relative;
	}

	.topmenu li.topmenu_magazine a .topmenu_inner::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	margin-left: -20px;
	transform: translatey(-50%);
	width: 40px;
	height: 40px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_04.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 30px 30px;
	border-radius: 20px;
	}

	.topmenu li.topmenu_enquete a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 30%;
	height: 100%;
    background: url(../images/top/menu_p_05.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
	}

	.topmenu li.topmenu_enquete a::after {
	position: absolute;
	content: "";
	top: 50%;
	right: 10px;
	transform: translatey(-50%);
	width: 20px;
	height: 20px;
	background:url(../images/arw_circle_white.svg) 0 0 no-repeat;
	background-size: 20px 20px;
	}

	.topmenu li.topmenu_enquete a .topmenu_inner {
	margin:0;
	padding:14px 40px 14px 32px;
	line-height:2rem;
	text-align:left;
	position:relative;
	}

	.topmenu li.topmenu_enquete a .topmenu_inner::before {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	margin-left: -20px;
	transform: translatey(-50%);
	width: 40px;
	height: 40px;
	background-color: rgba( 255, 255, 255, 0.8 );
	background-image:url(../images/top/menu_icon_05.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
	background-size: 30px 30px;
	border-radius: 20px;
	}
}

@media only screen and (min-width:768px){
	.topmenu li.topmenu_magazine a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
    background: url(../images/top/menu_p_04.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
	}

	.topmenu li.topmenu_enquete a::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
    background: url(../images/top/menu_p_05.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
	}
}


/*----------------------------------------------------
	ftbnr
----------------------------------------------------*/

.ftbnr {
	margin: 30px 0 120px 0;
	padding:0;
}

.ftbnr ul {
	width:auto;
	margin:0 100px;
	padding:0;
	text-align:center;
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
	align-content:center;
}

.ftbnr li {
	margin:0;
	padding:0;
	list-style:none;
	align-self:center;
	width: calc(100%/6);
}

.ftbnr li img {
	width: 100%;
	padding: 1.8rem;
}

.ftbnr li.ftbn_ss,
.ftbnr li.ftbn_sa  {
	width: 20%;
}

.ftbnr li.ftbn_ouj,
.ftbnr li.ftbn_mext,
.ftbnr li.ftbn_mhlw, 
.ftbnr li.ftbn_jmooc,
.ftbnr li.ftbn_ykdk {
	width: 16%;
}

/*.ftbnr li.ftbn_ss img {
	width:244px;
	height:auto;
}

.ftbnr li.ftbn_sa img {
	width:244px;
	height:auto;
}*/

@media only screen and (min-width:1501px){
	.ftbnr ul {
	width:1300px;
	margin:0 auto;
	text-align:center;
	}
}


@media only screen and (max-width:1300px){
	.ftbnr ul {
	margin: 0 30px;
	}

	.ftbnr li.ftbn_ss,
	.ftbnr li.ftbn_sa,
	.ftbnr li.ftbn_jmooc {
	width: 20%;
	}

	.ftbnr li.ftbn_ouj,
	.ftbnr li.ftbn_mext,
	.ftbnr li.ftbn_mhlw  {
	width: 16%;
	}

	.ftbnr li img {
	vertical-align:middle;
	height:auto;
		padding: 1.2rem;
	}

	.ftbnr li.ftbn_ss img,
	.ftbnr li.ftbn_sa img {
	width:100%;
	max-width:100%;
	}

	.ftbnr li.ftbn_ouj img {
	width:100%;
	max-width:183px;
	}

	.ftbnr li.ftbn_mext img {
	width:100%;
	max-width:172px;
	}

	.ftbnr li.ftbn_mhlw img {
	width:100%;
	max-width:167px;
	}
}

@media only screen and (max-width:767px){
	.ftbnr {
	margin: 30px 0 90px 0;
	}
	.ftbnr ul {
	margin: 0 50px;
	flex-wrap: wrap;
	}

	.ftbnr li {
	margin: 0 0 30px 0;
	padding: 0 20px;
	box-sizing: border-box;
	}
	
	.ftbnr li img {
		padding: 0.8rem;
	}

	.ftbnr li.ftbn_mext,
	.ftbnr li.ftbn_ss,
	.ftbnr li.ftbn_sa {
	width: 32%;
	}

	.ftbnr li.ftbn_ouj,
	.ftbnr li.ftbn_mhlw,
	.ftbnr li.ftbn_ykdk {
	width: 34%;
	}
	
	.ftbnr li.ftbn_jmooc {
	width: 30%;
	}
}

@media only screen and (max-width:640px){
	.ftbnr {
	margin: 20px 0 80px 0;
	}
	.ftbnr ul {
	margin: 0 20px;
	flex-wrap: wrap;
	}

	.ftbnr li {
	margin: 0 0 20px 0;
	padding: 0 10px;
	box-sizing: border-box;
	}

	.ftbnr li.ftbn_mext,
	.ftbnr li.ftbn_ss,
	.ftbnr li.ftbn_sa {
	width: 32%;
	}

	.ftbnr li.ftbn_ouj,
	.ftbnr li.ftbn_mhlw {
	width: 34%;
	}
}

@media only screen and (max-width:400px){
	.ftbnr {
	margin: 0 0 40px 0;
	}
	.ftbnr ul {
	margin: 0;
	flex-wrap: wrap;
	}

	.ftbnr li {
	margin: 0 0 16px 0;
	padding: 0 10px;
	box-sizing: border-box;
	}

	.ftbnr li.ftbn_mext,
	.ftbnr li.ftbn_ss,
	.ftbnr li.ftbn_sa {
	width: 32%;
	padding: 0 4px;
	}

	.ftbnr li.ftbn_ouj,
	.ftbnr li.ftbn_mhlw {
	width: 34%;
	}
}