@charset "UTF-8";
/* CSS Document */
.header_logo img.underlogo {
    display: none;
}
/*==============================
　スタート
==============================*/
.start {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    align-items: center;
    background: #ffffff;
    justify-content: center;
/*    padding-left: 10%;*/
}
.start .slogan_type .s_type{
    display: flex;
    justify-content: center;
    align-items: center;
}
/*==============================
　キャッチコピー
==============================*/
.slogan_wrap {
    width: 100%;
    position: absolute;
    z-index: 2;
    height: 1em;
    top: 0;
    bottom: 0;
    margin: auto;
}
.slogan_wrap h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: normal;
}
.slogan_wrap .slogan{
	color:#ffffff;
    letter-spacing: 0.5em;
}
.slogan_type {
    border: 1px solid #ffffff;
    width: 118px;
    margin: 0 1.3em 0 1em;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 0.88em;
    height: 35px;
    overflow: hidden;
    text-align: center;
}
.slogan_type .s_type {
    color: #55b692;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}
/*スタート時*/
.start .slogan_wrap {
    left: 0;
    right: 0;
}
.start .slogan_wrap .slogan {
    color: #000000;
    letter-spacing: 0.5em;
}
.start .flex_inner .text {
    font-size: 1.6em;
    letter-spacing: 0.5em;
    color: #000000;
    padding-bottom: 7em;
}
.start .slogan_type{
	border:1px solid #5a6461;
	border-left-width:4px;
	border-right-width:4px;
}
.start .slogan_wrap h2 {/*
    justify-content: flex-start;
    padding-left: 10%;*/
}
/*==============================
　FirstView
==============================*/
.fv{
	width:100vw;
	height:100vh;
	position:relative;
}
.fv_img {
    width: 100%;
	height:100vh;
    background: #888;
}
.fv_bg{
    width: 100%;
	height:100vh;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.fv_bg:nth-of-type(n){
	background-image:url(../image/top/fv01.jpg);
}
.fv_bg:nth-of-type(2n){
	background-image:url(../image/top/fv02.jpg);
}
.fv_bg:nth-of-type(3n){
	background-image:url(../image/top/fv03.jpg);
}
.fv_bg:nth-of-type(4n){
	background-image:url(../image/top/fv04.jpg);
}
.fv_bg:nth-of-type(5n){
	background-image:url(../image/top/fv05.jpg?0821);
}
.fv_bg:nth-of-type(6n){
	background-image:url(../image/top/fv06.jpg?0821);
}
.slick-initialized .slick-slide{
    display: flex;
    justify-content: center;
    align-items: center;
}
.scroll_down {
    width: 15px;
    height: 150px;
    position: absolute;
    bottom: 16vh;
    margin: auto;
    left: 3%;
	animation-name: fall;
    animation-duration: 3000ms;
    animation-timing-function: ease-out;
}
@keyframes fall {
    0% {
    bottom: 100vh;
    }
	85%{
    bottom: 100vh;
	}
    100% {
    bottom: 16vh;
    }
}
/*==============================
　共通
==============================*/
.toppage > article {
    padding-top: 100px;
    padding-bottom: 100px;
}
h2.title {
    font-weight: normal;
    color: #231815;
    font-size: 1.3em;
    letter-spacing: 0.2em;
    line-height: 120%;
    padding-bottom: 10px;
    position: relative;
}
 h2.title::after {
    content: "";
    display: block;
    width: 30px;
    background: #55b692;
    height: 2px;
    margin-top: 20px;
}
h2.title .white_bg {
    background: #ffffff;
    padding: 8px 15px;
    margin-left: 10px;
}
.ttl_wrap .title_deco {
    color: #5a6461;
    font-size: 0.5em;
    letter-spacing: 1px;
    line-height: 120%;
}
.btn_pagelink{
	position:absolute;
	right:0;
	bottom:-30px;
}
.btn_pagelink a {
    color: #444444;
    background: #eeefef;
    display: block;
    width: 140px;
    font-size: 0.725em;
    letter-spacing: 0.2em;
    line-height: 120%;
    padding: 7px 0;
    position: relative;
	transition:all ease 200ms;
}
.btn_pagelink a::after {
    content: "";
    display: block;
    position: absolute;
    right: -5%;
    background: #ffffff;
    width: 10%;
    height: 200%;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(20deg);
}
.btn_pagelink a:hover{
    background: #55b692;
	color:#ffffff;
}


/*==============================
　CM方式とは
==============================*/
.toppage {
/*    padding-top: 120px;*/
}

.cm_wrap {
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 50px 0;
    position: relative;
}
.cm_wrap .ttl_wrap {
    position: absolute;
}
.cm_title_wrap {
    text-align: center;
    position: relative;
	margin-bottom:30px;
}
.cm_title_wrap .title_deco {
    line-height: 120%;
    font-size: 0.6em;
    letter-spacing: 1.4em;
    color: #55b692;
    margin-bottom: 30px;
}
.cm_title_wrap h3.title {
    font-weight: normal;
    margin-bottom: 25px;
}
.cm_title_wrap h3.title::after {
    content: "";
    display: block;
    height: 2px;
    width: 50px;
    background: #000000;
    margin: 30px auto 0;
}
.cm_title_wrap .text {
    font-size: 0.88em;
}

.cm_menu_list {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.cm_menu {
    width: 21.5%;
    margin-top: 50px;
    margin-bottom: 1.7em;
	transition:all ease 300ms;
}
.cm_menu:hover {
    width: 25%;
	margin-top:15px;
	margin-bottom:0;
}
.cm_menu a {
    display: block;
    width: 100%;
    height: 100%;
}
.menu_inner {
    background-position: center;
    background-repeat: no-repeat;
	height:20.5vw;
    max-height: 230px;
    border-radius: 110px;
    text-align: center;
	transition:all ease 300ms;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
    position: relative;
	overflow:hidden;
}
.cm_menu:hover .menu_inner {
    border: 5px solid rgba(85,182,146,0.5);
	height:26.65vw;
    max-height: 250px;
}
.cm_menu.separate .menu_inner{
	background-image:url(../image/top/top_cm01.jpg);
}
.cm_menu.recommend .menu_inner{
	background-image:url(../image/top/top_cm02.jpg);
}
.cm_menu.merit .menu_inner{
	background-image:url(../image/top/top_cm03.jpg);
}
.cm_menu.compensation .menu_inner{
	background-image:url(../image/top/top_cm04.jpg);
}
.menu_inner .bg_green{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	transition:all ease 200ms;
	background:rgba(189,199,180,0.34);
}
.cm_menu:hover .menu_inner .bg_green{
	background:rgba(52,52,22,0.5);
}
.menu_inner .menu_name {
    color: #ffffff;
    letter-spacing: 5px;
    font-size: 1em;
    line-height: 100%;
    margin-bottom: 20px;
	transition:all ease 500ms;
	opacity:0;
}
.menu_inner .menu_arrow {
    color: #55b692;
    font-weight: bold;
    border: 2px solid #55b692;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
    line-height: 40px;
	transition:all ease 200ms;
	opacity:0;
}
.cm_menu:hover .menu_inner .menu_name,
.cm_menu:hover .menu_inner .menu_arrow{
	opacity:1;
}
.cm_menu .name::before{
	content:"";
	display:block;
	width:2px;
	height:15px;
	background: #55b692;
    margin: 12px auto 20px;
	transition:all ease 200ms;
}
.cm_menu:hover .name::before{
	margin-top:0;
}
.cm_menu .name{
    color: #55b692;
    font-size: 0.88em;
    line-height: 140%;
    position: relative;
	text-align:center;
}
.cm_menu .text {
    text-align: center;
    font-size: 0.9em;
}
/*==============================
　私らしいHistory
==============================*/
.history_wrap {
    background: #eeefef;
    width: 100%;
    margin: 0 auto;
    padding: 50px 5%;
    position: relative;
}
.history_inner{
    max-width: 1024px;
    margin: 0 auto;
}
.history_wrap .ttl_wrap {
    position: absolute;
}
.history_title_wrap {
    position: relative;
}
.history_title_wrap .text {
    font-size: 0.88em;
    text-align: right;
}
.history_wrap .btn_pagelink a{
	background:#ffffff;
    text-align: center;
}
.history_wrap .btn_pagelink a:hover{
	background:#55b692;
}
.history_wrap .btn_pagelink a::after{
    background: #eeefef;
}
.history_list {
    display: flex;
    justify-content: center;
    align-items: flex-end;
	width:100%;
    max-width: 1024px;
	margin:0 auto;
}
.history_list li {
    width: 19.4%;
	margin-left:0.25%;
	margin-right:0.25%;
}
.history_list h3.list_name {
    font-weight: normal;
    letter-spacing: 0.1em;
    font-size: 0.88em;
    text-align: center;
    line-height: 120%;
    margin-bottom: 1em;
}
.history_list li:hover h3.list_name{
	color:#55b692;
}
.history_list .list_img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 15vw;
    margin-bottom: 3px;
    max-height: 150px;
	position:relative;
}
.history_list .list_img:first-child {
    max-height: 220px;
}
.history_list:not(.pickup) .list_img:last-child{
    max-height: 150px;
}
.history_list .list_img::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #eeefef;
    transition: all ease 300ms;
}
.history_list .list_img.move::before{
	height:0;
}
.history_list .list_img a {
    width: 100%;
    height: 0;
	overflow:hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-size: 0.8em;
    line-height: 140%;
	transition:all ease 300ms;
	background-color:rgba(0,110,30,0.5);
    opacity: 0;
}
.history_list .list_img:hover a{
    height: 100%;
	opacity:1;
}
/*==============================
　イエヒトについて
==============================*/
.toppage > article.about_wrap {
    padding-top: 0;
}
.about_wrap {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.about_wrap .ttl_wrap {
    position: absolute;
}
.about_logo_wrap .logo {
    text-align: center;
}
.about_logo_wrap .logo img {
    width: 244px;
    height: 179px;
}
.about_bg {
    height: 326px;
	background:url(../image/top/top_about_bg.jpg) no-repeat center / cover;
}
.about_bg .bg_color {
	height:100%;
    padding: 50px 5% 0;
	background:url(../image/top/about_bg_color.png) repeat-y center;
	background-size:100% auto;
}
.about_logo_wrap {
    position: absolute;
    top: calc(326px - 155px);
    left: 0;
    right: 0;
    margin: auto;
	background:url(../image/top/top_logo_bg.png) no-repeat center / contain;
    transition: all ease 1000ms;
    margin-top: 120px;
    opacity: 0;
}
.about_logo_wrap.move {
	opacity:1;
	margin-top:0;
}
.about_wrap .cm_title_wrap {
    margin-top: 75px;
}
.about_wrap .cm_title_wrap h3.title {
    font-size: 1.5em;
    letter-spacing: 0.22em;
    margin-bottom: 50px;
}
.about_wrap .cm_title_wrap h3.title::after{
	display:none;
}
.about_wrap .btn_pagelink {
    position: static;
    margin-top: 30px;
}
.about_wrap .btn_pagelink a {
    width: 220px;
    margin-left: auto;
    margin-right: auto;
}
/*==============================
　セミナー
==============================*/
.seminar_wrap {
    background: #f2f4f0;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.seminar_wrap .flex_wrap {
    display: flex;
    margin-bottom: 70px;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    max-width: calc(1024px + 10%);
    margin: 0 auto 75px;
}
.seminar_title_wrap {
    display: flex;
    margin-left: 6%;
    width: calc(100% - 200px);
}
.seminar_title_wrap .title {
    margin-right: 10%;
    position: relative;
    height: fit-content;
    padding: 10px 20px 5px;
    font-size: 1em;
}
.seminar_title_wrap .title::before,
.seminar_title_wrap .title::after {
    content: "";
    width: 17px;
    height: 11px;
    display: block;
    position: absolute;
    border-top: 2px solid #5a6461;
    border-left: 2px solid #5a6461;
}
.seminar_title_wrap .title::before{
	top:0;
	left:0;
}
.seminar_title_wrap .title::after {
    right: 0;
    bottom: 0;
    transform: rotate(180deg);
}
.seminar_title_wrap .text {
    font-size: 0.88em;
}
ul[class*="seminar_time"],
ul[class*="seminar_slider"]{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
ul.seminar_time_flex,
ul.seminar_slider_flex {
    flex-wrap: nowrap;
}
ul.seminar_time_flex li.seminar {
    width: 100%;
}
ul.seminar_time_flex li.seminar .timeline .date,
ul.seminar_time_flex li.seminar .timeline .place{
	padding-left: 0;
	text-align: center;
}
ul[class*="seminar_slider"] li.seminar .image {
    width: 100%;
}
.timeline {
    width: 100%;
    margin-bottom: 15px;
}
.timeline .date {
    font-size: 0.8em;
    color: #55b692;
    line-height: 100%;
    padding-bottom: 5px;
    border-bottom: 3px solid #ffffff;
    margin-bottom: 10px;
}
.timeline .place{
	line-height:120%;
	color:#5a6461;
}
.timeline .date,
.timeline .place{
    padding-left: 20%;
}
.seminar a {
	display:block;
}
.seminar a img{
	transition:all ease 200ms;
}
.seminar a:hover img{
	opacity:0.5;
}

.seminar_wrap .btn_pagelink {
    position: static;
}
.seminar_wrap .btn_pagelink a {
    background: #ffffff;
    width: 220px;
    margin: 40px auto 0;
    text-align: center;
    font-size: 0.88em;
}
.seminar_wrap .btn_pagelink a::after {
    background: #f2f4f0;
}
.seminar_wrap .btn_pagelink a:hover{
	background:#55b692;
}

/*==============================
　メルマガフォーム
==============================*/

.member_inner {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}
.member_wrap{
    width: 100%;
    margin: 0 auto;
    position: relative;
    color: #ffffff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5a6461+50,5a6461+50&0.77+49,0.66+50 */
background: -moz-linear-gradient(30deg,  rgba(90,100,97,0.77) 49.9%, rgba(90,100,97,0.66) 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(30deg,  rgba(90,100,97,0.77) 49.9%,rgba(90,100,97,0.66) 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(30deg,  rgba(90,100,97,0.77) 49.9%,rgba(90,100,97,0.66) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c45a6461', endColorstr='#a85a6461',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.member_wrap .ttl_wrap .title_deco{
    color: #ffffff;
}
.member_wrap .flex_wrap {
    display: flex;
}
.member_wrap .text_wrap {
    font-size: 0.88em;
    margin-left: 25%;
}
.member_wrap .text_wrap .text {
    margin-bottom: 30px;
}
input.mailmaga {
    -webkit-appearance: none;
    font-size: 1em;
    padding: 0.8em 1.2em;
    width: 78%;
    max-width: 275px;
    border-radius: 5px;
    border: 1px solid #666666;
    margin-right: 2%;
}
#mailmaga_form input[type="submit"] {
    -webkit-appearance: none;
    color: #ffffff;
    width: 18%;
    background: #55b692;
    padding: 0.8em 0;
    border-radius: 8px;
}
/*==============================
　ニュースリリース
==============================*/
.news_inner {
    width: 90%;
    margin: 0 auto;
    max-width: 1024px;
}
.news_wrap .flex_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 70px;
}
.news_title_wrap {
    margin-left: 10%;
    font-size: 0.88em;
}
.news_list {
    width: 90%;
    margin: 0 auto;
    border-top: 1px solid #666666;
}
.news_list li,
.news_list li a {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}
.news_list li {
    line-height: 120%;
    border-bottom: 1px solid #666666;
    position: relative;
}
.news_list li a {
    padding: 15px 10px;
}
.news_list li::after {
    content: "＞";
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 1em;
    line-height: 100%;
}
.news_list li:hover{
	color:#ffffff;
	background:#ddf0e9;
}
.news_list li .news_icon {
    color: #ffffff;
    background: #5a6461;
    font-size: 0.7em;
    letter-spacing: 1px;
    padding: 0;
    width: 65px;
    text-align: center;
    margin-right: 4%;
}
.news_list li .date {
    width: 5em;
    margin-right: 4%;
    color: #55b692;
    font-size: 0.88em;
}
.news_list li .detail {
	width:calc(100% - 65px - 4% - 5em - 6% - 2em);
    color: #5a6461;
    font-size: 0.88em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news_wrap .btn_pagelink {
    position: static;
    margin-left: 5%;
    margin-top: 30px;
    text-align: center;
}
.news_wrap .btn_pagelink a{
	width:220px;
}
/*==============================
　Contact
==============================*/
.explanation {
    font-size: 0.88em;
    margin-bottom: 30px;
}
#contact_form .back_btn {
    background: #cccccc;
    color: #000000;
    line-height: 100%;
    padding: 4px;
    letter-spacing: 1.5px;
    width: 48px;
    font-size: 0.85em;
}
#contact_form.confirmation .flex_l {
    width: 100%;
}
#contact_form.confirmation .flex_wrap {
    display: block;
}
.contact_inner .btn_pagelink {
    position: static;
}
.contact_inner .btn_pagelink a{
    width: 100%;
    max-width: 320px;
    text-align: center;
    margin: 0 auto;
}
.contact_inner .btn_pagelink a:not(:hover) {
    background: #ffffff;
}
.contact_inner .btn_pagelink a::after {
    background: #ddf0e9;
}

@media screen and (max-width:1000px) {
header.sp_fixed .head_inner {
    position: fixed;
    top: 0;
    background: rgba(0,0,0,0.6);
    padding-top: 0;
}
header.sp_fixed .head_inner .sns_icons,
header.sp_fixed .head_inner .fv_center_head {
    margin-top: 20px;
}
}
@media screen and (max-width:840px) {
.seminar_title_wrap {
    flex-wrap: wrap;
}
.seminar_title_wrap .title {
    margin-bottom: 15px;
	width:100%;
    width: fit-content;
}
.seminar_title_wrap .title br {
    display: none;
}

.member_wrap .text_wrap {
    margin-left: 5%;
}
}
@media screen and (max-width:760px) {
.start {
    font-size: 0.8em;
}
.start .flex_inner .text {
    text-align: center;
}
.seminar_info .text{
	display:none;
}
.fv_center_head{
	display:none;
}
.slogan_wrap h2 {
    flex-wrap: wrap;
}
.slogan_wrap .slogan,
.slogan_wrap .slogan_type {
    margin-bottom: 10px;
}
.cm_wrap .ttl_wrap,
.history_wrap .ttl_wrap {
    position: static;
	margin-bottom:15px;
}
.cm_title_wrap {
    margin-bottom: 50px;
}
.cm_menu_list {
    flex-wrap: wrap;
}
.cm_menu,
.cm_menu:hover {
    width: 43%;
    margin-top: 0;
    margin-bottom: 1.7em;
}
.menu_inner,
.cm_menu:hover .menu_inner {
    height: 40vw;
    max-height: 230px;
}
.cm_menu .name::before,
.cm_menu:hover .name::before{
	margin-top:12px;
}
.about_logo_wrap{
    background-size: auto 100%;
}
.about_wrap .cm_title_wrap h3.title {
    font-size: 1.4em;
    letter-spacing: 0.1em;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}
.member_wrap .flex_wrap {
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.member_wrap .flex_wrap .ttl_wrap {
    margin-bottom: 15px;
}
#contact_form .flex_wrap {
    display: block;
}
#contact_form .flex_l, #contact_form .flex_r {
    width: 100%;
}
.contact_wrap{
	background-image:none;
}
#contact_form .flex_r .tr {
    justify-content: center !important;
}

}
@media screen and (min-width:531px) {
.seminar_time .slick-track,
.seminar_slider .slick-track {
    width: 100vw !important;
}
.seminar_time li.seminar,
.seminar_slider li.seminar {
	width:25% !important;
}
}
@media screen and (max-width:530px) {
header.sp_fixed .head_inner {
    height: 75px;
}
.toppage > article {
    padding-bottom: 60px;
}
.logo_text{
	display:none;
}
.sns_icons {
    margin-top: 0;
    margin-right: 30px;
}
.cm_menu,
.cm_menu:hover {
    width: 86%;
    margin-top: 0;
    margin-bottom: 1.7em;
}
.menu_inner,
.cm_menu:hover .menu_inner {
    height: 90vw;
    max-height: 230px;
}
.cm_menu .name::before,
.cm_menu:hover .name::before{
	margin-bottom:5px;
}
.history_title_wrap .text {
    text-align: left;
    margin-right: 35px;
    margin-bottom: 50px;
}
.history_list {
    flex-wrap: wrap;
    justify-content: center;
}
.history_list li {
    width: calc(50% - 0.5%);
}
.history_list.pickup li {
    width: 100%;
}
.history_list .list_img {
    height: 40vw;
}
.history_list h3.list_name {
    margin-bottom: 5px;
}
.seminar_wrap .flex_wrap {
    display: block;
}
.seminar_wrap .ttl_wrap {
    margin-bottom: 15px;
}
.seminar_title_wrap {
    width: 90%;
    margin-left: 0;
}
.member_wrap .text_wrap {
    margin-left: 0;
    width: 90%;
}
.news_wrap .flex_wrap {
    display: block;
    margin-bottom: 20px;
}
.news_wrap .flex_wrap .ttl_wrap {
    margin-bottom: 20px;
}
.news_title_wrap {
    margin-left: 0px;
}
.news_list {
    margin: 0;
}
.news_wrap .btn_pagelink {
    margin-left: 0;
}
.contact_wrap .flex_wrap {
    display: block;
}
.contact_inner .ttl_wrap {
    margin-bottom: 20px;
}
#contact_form .flex_wrap {
    width: 90%;
}
#contact_form .td input[type="text"],
#contact_form .td input[type="email"]{
	width:100%;
	max-width:none;
}
footer{
	background-image:none;
}
}