@charset "utf-8";

/*===================================================================
  CSS Import
===================================================================*/
@import url(./ress.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/*===================================================================
  Font
===================================================================*/
*{ font-family:'Noto Sans JP','UD Reimin Medium','UD Shin Go NT Medium',sans-serif; font-optical-sizing:auto; font-weight:400; font-style:normal; }
.fThin{ font-weight:100; }
.fBold{ font-weight:700; }
.fLato100{ font-family:'Lato',sans-serif; font-optical-sizing:auto; font-weight:100; font-style:normal; }
.fLato200{ font-family:'Lato',sans-serif; font-optical-sizing:auto; font-weight:200; font-style:normal; }
.fLato300{ font-family:'Lato',sans-serif; font-optical-sizing:auto; font-weight:300; font-style:normal; }
.fLato400{ font-family:'Lato',sans-serif; font-optical-sizing:auto; font-weight:400; font-style:normal; }
.fLato500{ font-family:'Lato',sans-serif; font-optical-sizing:auto; font-weight:500; font-style:normal; }
.fLato600{ font-family:'Lato',sans-serif; font-optical-sizing:auto; font-weight:600; font-style:normal; }
.fLato700{ font-family:'Lato',sans-serif; font-optical-sizing:auto; font-weight:700; font-style:normal; }
.cGreen{ color:#11999e; }


/*===================================================================
  Common
===================================================================*/
html{ width:100%; font-size:16px; scroll-behavior:smooth; }
body{ width:100%; color:#000000; }
a{ color:#ff9745; text-decoration:underline; }
a:hover{ cursor:pointer; color:inherit; opacity:0.5; transition:.4s; }
div{ position:relative; }
img{ display:block; width:100%; height:auto; }
p{ line-height:200%; }
.mainContentsWrapper{ width:1184px; margin:0 auto; padding:0 1rem; padding-top:4rem; }
.mainContentsArea{ width:100%; }
.pageTitleArea{ width:1184px; margin:auto; padding:0 1rem; padding-top:232px; }
.pageTitle{ width:100%; }
.pageTitle > p{ display:flex; font-size:3rem; line-height:100%; }
.pageTitle > p > span{ font-size:1.2rem; color:#11999e; padding-left:1.5rem ;}


/* toggleBox */
.toggleBoxTrigger{ width:100%; margin-top:1rem; padding:0.8rem 1rem; background-color:#e6e6da; display:flex; align-items:center; }
.toggleBoxTrigger:hover{ cursor:pointer; opacity:0.7; }
.toggleBoxTrigger > p{ display:inline-block; line-height:120%; font-size:1.2rem; font-weight:600; padding-left:1.5rem; }
.toggleBoxTrigger.up:before{ content:''; display:block; width:1rem; height:1rem; position:absolute; /* top:50%; */ left:0.75rem; transform:rotate(90deg); background-image:url(../img/arrow_g_r.svg); background-size:contain; transition:0.3s; }
.toggleBoxTrigger.down:before{ content:''; display:block; width:1rem; height:1rem; position:absolute; /* top:50%; */ left:0.75rem; transform:rotate(0deg); background-image:url(../img/arrow_g_r.svg); background-size:contain; transition:0.3s; }
.toggleBoxBody{ display:none; }


/* LINKS */
.linkBox01{ display:flex; width:fit-content; margin-top:1rem; padding:0.8rem 3rem; background-color:#ff9745; border-radius:9999px; font-size:0.875rem; text-align:center; color:#ffffff; text-decoration:none; line-height:140%; align-items:center; justify-content:center; }
.linkBox01:hover{ color:#ffffff; }
.linkBox02{ display:flex; width:fit-content; margin-top:1rem; padding:0.5rem 2rem; background-color:#e6e6da; border-radius:9999px; font-size:0.875rem;text-align:center; color:#000000; text-decoration:none; line-height:140%; align-items:center; justify-content:center; }
.linkBox02:hover{ color:#000000; }
.linkBox03{ display:flex; width:fit-content; margin-top:0.5rem; padding:0.4rem 1rem; background-color:#ff9745; border-radius:9999px; font-size:0.875rem; text-align:center; color:#ffffff; text-decoration:none; line-height:140%; align-items:center; justify-content:center; }
.linkBox03:hover{ color:#ffffff; }


/* topics */
.topicsBody{ width:100%; margin-top:1.5rem; margin-bottom:7rem; display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:1.5rem; row-gap:1.5rem; }
.topicsBox01{ border-radius:1rem; background-color:#fafaf8; border:1px solid #dedede; text-decoration:none; }
.topicsBoxDate{ display:flex; width:100%; height:2rem; background-color:#11999e; border-radius:1rem 1rem 0 0; padding:0.5rem 1rem; padding-right:0.375rem; align-items:center; justify-content:space-between; }
.topicsBoxDate::after{ content:''; min-width:4rem; height:1.25rem; border-radius:0.625rem; padding:0.2rem 0.5rem; font-size:0.625rem; line-height:100%; background-color:#ffffff; color:#11999e; display:flex; align-items:center; justify-content:center; }
.topicsBoxDate.TS::after{ content:'お知らせ'; }
.topicsBoxDate.WS::after{ content:'ワークショップ'; }
.topicsBoxDate.GM::after{ content:'総会'; }
.topicsBoxDate.PUB::after{ content:'刊行物'; }
.topicsBoxDate > p{ font-size:0.8rem; color:#ffffff; line-height:100%; }
.topicsBoxDetail{ width:100%; border-radius:0 0 1rem 1rem; padding:0.5rem 1rem; padding-bottom:0.8rem; }
.topicsBoxDetail > p{ line-height:150%; }
.topicsBoxDetailStr{ font-size:1.2rem; font-weight:600; color:#11999e; line-height:160%; }
.topicsBoxDetailSub01{ font-size:0.875rem; color:#000000; margin-top:0.2rem; text-indent:-1.075rem; padding-left:1.075rem; }
.topicsBoxDetailSub01::before{ content:'●'; margin-right:0.2rem; color:#11999e; }
.topicsBoxDetailSub02{ font-size:0.875rem; color:#000000; margin-top:0.2rem; text-indent:-1.075rem; padding-left:1.075rem; }
.topicsBoxDetailSub02::before{ content:'※'; margin-right:0.2rem; color:#11999e; }
.topicsBoxDetailSub03{ font-size:0.875rem; color:#000000; margin-top:0.2rem; }
.topicsBox02{ width:100%; border:1px solid #dedede; }
.topicsBox02 > p{ line-height:160%; }
.topicsBox02Str{ padding:1rem 1.5rem; background-color:#fafaf8; font-size:1.5rem; font-weight:600; }
.topicsBox02StrMembersOnly{ padding-top:2.4rem; position:relative; }
.topicsBox02StrMembersOnly::before{ content:'会員向け  詳細レポート'; display:block; width:12rem; background-color:#11999e; margin-right:0.8rem; padding:0.4rem; font-size:0.875rem; color:#ffffff; font-weight:initial; text-align:center; line-height:100%; position:absolute; top:0; left:0; }
.topicsBox02Sub01{ padding:1rem 1.5rem; padding-bottom:0.8rem; border-top:1px solid #dedede; }
.topicsBox02Sub02{ margin:0 1.5rem; padding:1rem 0; padding-top:0.8rem; border-top:1px solid #dedede; }
.topicsBox03{ width:100%; margin-top:3rem; padding:0 1rem; }
.topicsBox04{ width:100%; margin-top:3rem; padding:0 1rem; }
.topicsBox05{ width:100%; margin-top:10rem; }
.topicsBoxPhoto01{ width:100%; margin-top:3rem; padding:0 1rem; display:flex; flex-wrap:wrap; }
.topicsBoxPhoto01 > div{ width:400px; margin-right:2rem; margin-bottom:2rem; }
.topicsBoxPhoto01 > div > p{ margin-top:0.2rem; font-size:0.8rem; }


/* contactUs */
.contactUsBox01{ width:832px; margin:auto; }
.contactUsBox02{ width:832px; margin:auto; margin-top:4rem; padding:1.5rem 2rem; background-color:#fafaf8; border:1px solid #dedede; }
.contactUsBox02 > p{ line-height:160%; }
.contactUsBox02 > p:nth-of-type(1){ font-size:1.2rem; font-weight:600; color:#11999e; }
.contactUsBox02 > p:nth-of-type(2){ margin-top:1rem; }
.contactUsBox02 > p:nth-of-type(2) > a{ color:#000000; }


/* membersOnly */
.membersOnlyBox01{ width:100%; margin-bottom:2rem; }
.membersOnlyBox01 > p{ font-size:1.5rem; font-weight:600; color:red; line-height:160%; }
.membersOnlyTopics01{ display:flex; align-items:center; }
.membersOnlyTopics01 .topicsBoxPic{ width:100px; margin:1rem; }
.membersOnlyTopics01 .topicsBoxDetail{ flex:1; padding-left:0; }


/* activity */
.activityBox01{ width:100%; display:flex; align-items:flex-start; padding-bottom:4rem; }
.activityBox01 > div:nth-of-type(1){ width:320px; }
.activityBox01 > div:nth-of-type(2){ flex:1; margin-left:3rem; }
.activityBox01L{ padding:1.2rem 1rem; background:linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(233, 246, 246, 1) 20%, rgba(91, 185, 189, 1) 70%, rgba(17, 153, 158, 1) 100%); }
.activityBox01L > p{ font-size:1.4rem; font-weight:600; color:#ffffff; line-height:100%; text-align:right; }
.activityBox01R > p{ font-size:1.2rem; font-weight:600; }
.activityListHead{ width:100%; margin-top:1rem; padding:1rem 1.2rem; padding-right:3rem; display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center; background-color:#333333; }
.activityListHead > p{ color:#ffffff; line-height:130%; }
.toggleListHead:hover{ cursor:pointer; opacity:0.7; transition:.4s; }
.toggleListHead:after{ content:''; display:block; width:1.6rem; height:1.6rem; position:absolute; top:0.8rem; right:1rem; background-image:url(../img/arrow_white_d.svg); background-position:center; background-size:contain; }
.activityListBody{ display:none; padding-bottom:2rem; }


/* member */
.memberBox01{ width:100%; display:flex; align-items:flex-start; padding-bottom:10rem; }
.memberBox01 > div:nth-of-type(1){ width:320px; }
.memberBox01 > div:nth-of-type(2){ flex:1; margin-left:3rem; }
.memberBox01L{ padding:1.2rem 1rem; background:linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(233, 246, 246, 1) 20%, rgba(91, 185, 189, 1) 70%, rgba(17, 153, 158, 1) 100%); }
.memberBox01L > p{ font-size:1.4rem; font-weight:600; color:#ffffff; line-height:100%; text-align:right; }
.memberBox01R{}
.memberBox01Sub01{ display:grid; grid-template-columns:1fr 1fr; column-gap:1.5rem; row-gap:3rem; }
.memberDetailBox{ display:flex; }
.memberDetailBox > div:nth-of-type(1){ width:150px; }
.memberDetailBox > div:nth-of-type(2){ flex:1; margin-left:1.5rem; padding-top:0.8rem; }
.memberDetailBox > div:nth-of-type(2) > p{ line-height:140%; }
.memberDetailBox > div:nth-of-type(2) > p:nth-of-type(1){ font-size:1.5rem; font-weight:600; }
.memberDetailBox > div:nth-of-type(2) > p:nth-of-type(2){ color:#11999e; }
.memberDetailBox > div:nth-of-type(2) > p:nth-of-type(3){ font-size:0.9rem; margin-top:0.8rem; }


/* aboutUs */
.aboutUsBox01{ width:100%; display:flex; align-items:flex-start; padding-bottom:10rem; }
.aboutUsBox01 > div:nth-of-type(1){ width:320px; }
.aboutUsBox01 > div:nth-of-type(2){ flex:1; margin-left:3rem; }
.aboutUsBox01L{ padding:1.2rem 1rem; background:linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(233, 246, 246, 1) 20%, rgba(91, 185, 189, 1) 70%, rgba(17, 153, 158, 1) 100%); }
.aboutUsBox01L > p{ font-size:1.4rem; font-weight:600; color:#ffffff; line-height:100%; text-align:right; }
.aboutUsBox01R{}
.aboutUsBox01Sub01{ display:flex; margin-top:2rem; align-items:center; }
.aboutUsBox01Sub01 > div:nth-of-type(1){ width:180px; }
.aboutUsBox01Sub01 > div:nth-of-type(2){ flex:1; margin-left:1.5rem; }
.aboutUsBox01Sub01 > div:nth-of-type(2) > p{ line-height:140%; }
.aboutUsBox01Sub01 > div:nth-of-type(2) > p:nth-of-type(1){ }
.aboutUsBox01Sub01 > div:nth-of-type(2) > p:nth-of-type(2){ font-size:1.5rem; font-weight:600; }
.aboutUsBox01Sub01 > div:nth-of-type(2) > p:nth-of-type(3){ color:#11999e; }
.aboutUsBox01Sub02{ width:100%; margin:auto; border-spacing:0; }
.aboutUsBox01Sub02 p{ line-height:160%; }
.aboutUsBox01Sub02 tr{  }
.aboutUsBox01Sub02 tr > td{ border-top:1px solid #bababa; vertical-align:middle; }
.aboutUsBox01Sub02 tr:last-of-type > td{ border-bottom:1px solid #bababa; }
.aboutUsBox01Sub02 tr > td:nth-of-type(1){ width:6rem; padding:0.8rem 0; }
.aboutUsBox01Sub02 tr > td:nth-of-type(1) > p{ font-weight:600; }
.aboutUsBox01Sub02 tr > td:nth-of-type(2){ padding:0.8rem 0; padding-left:1rem; }


/* HOME */
.mainMenu.homemainMenu:after{ display:none; }
.homeTitleArea{ width:100%; min-width:1184px; }
.homeTitleBox{ width:100%; min-width:1184px; position:absolute; top:0; left:0; }
.homeTitleBox > p{ font-size:1.3vw; line-height:240%; color:#11999e; padding-left:10vw; margin-top:calc(100% * 0.14); }

@media (max-width:1184px) {
  .homeTitleBox > p{ font-size:15.392px; }
}

.homeMainContentsArea{ width:1184px; margin:0 auto; padding:0 1rem; }
.homeTopicsArea{ width:100%; margin-top:3rem;}
.homeTopicsHead{ width:100%; font-size:3rem; }
.homeTopicsHead > p{ line-height:100%; }
.homeTopicsBody{ width:100%; }
.homeTopicsListBtn{ width:100%; padding-top:0rem; }
.homeTopicsListBtn > a{ display:flex; width:6.5rem; height:6.5rem; font-size:0.875rem; color:#ffffff; text-decoration:none; line-height:140%; background-color:#ff9745; border-radius:50%; text-align:center; justify-content:center; align-items:center; }


/* Header */
.mainMenu{ display:flex; width:100%; height:144px; position:fixed; top:0; z-index:9999; backdrop-filter:none; transition:backdrop-filter 0.5s; }
.mainMenu:after{ content:''; display:block; position:absolute; width:calc(100% - 600px); height:4px; left:0; bottom:0; background:linear-gradient(90deg,rgba(0, 151, 75, 1) 0%, rgba(254, 237, 0, 1) 20%, rgba(229, 31, 31, 1) 40%, rgba(227, 0, 126, 1) 60%, rgba(0, 160, 223, 1) 83%, rgba(150, 70, 148, 1) 100%); }
.mainMenu.is-scrolled{ backdrop-filter:brightness(1.1) blur(7px); }
.mainMenuBg{ position:fixed; z-index:-1; top:0; right:0; width:600px; height:144px; overflow:visible; }
.mainMenuBgImg{ width:600px; height:230px; background:url(../img/mainMenuBg.png) no-repeat; background-size:cover; }
.mainMenuLogo{ width:364px; padding:1.5rem 2rem; }
.mainMenuBody{ flex:1; padding-top:3.5rem; display:flex; align-items:flex-start; }
.mainMenuBody > a{ display:block; position:relative; margin:0 1rem; color:#000000; text-decoration:none; font-size:1rem; font-weight:600; line-height:140%; padding-bottom:1rem; }
.mainMenuBody > a::after{ content:""; display:block; width:100%; height:2px; position:absolute; bottom:0; background:linear-gradient(90deg,rgba(255,1,189,1) 0%, rgba(37,140,241,1) 100%); transform:scale(0, 1); transform-origin:center top; transition:transform 0.3s; }
.mainMenuBody > a.now::after{ transform:scale(1, 1); }
.mainMenuBody > a:hover{ opacity:0.5; }
.mainMenuBody > a:hover::after{transform: scale(1, 1); }


/* Footer */
.footer{ clear:both; display:flex; width:100%; min-width:1184px; margin-top:20rem; background-color:#11999e; align-items:center; justify-content:space-between; }
.footerL{ width:344px; padding:1.5rem 2rem; }
.footerR{ flex:1; padding-left:2rem; padding-right:1.5rem; display:flex; justify-content:flex-end; }
.footerR > a{ margin:0 0.5rem; }
.footerR > a:nth-of-type(1){ width:200px; }