@charset "UTF-8";
/************reset　css*************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
text-decoration: none;
vertical-align: baseline;
color: #222;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }


*{box-sizing: border-box; }
/************reset　css*************/

.for_sp{display:none;}
.for_tb{display: none;}



/************module*************/

.main_f{color: #00B9EF;}
h2{font-size: 40px; }

    h3{letter-spacing: 3px;}

.roboto { font-family: 'Roboto Condensed'; font-weight: normal; font-size: 42px; transform: scale(1.1, 1); }

    h2, h3{font-weight: bold;}

    .f_white{
      color: #fff;
    }

/************module*************/


body{font-family: 'Noto Sans JP', sans-serif;
     width: 100%;}

      .full{
        width: 100%;
        height: 700px;
      }



.page_wrapper{
  width: 100%;
  display: flex;
  overflow: hidden;
}

.l_nav{
  width: 25%;
  padding: 100px 50px 0;
  background-color: #fff;
}

.r_wrapper{
  width: 75%;
  background-color: #F7F8F8;
}

.l_nav h1{
  display: inline;
  font-size: 40px;
  font-weight: 700;
  border-bottom: 3px #00B9EF solid;
  letter-spacing: 10px;
  line-height: 100px;
}

.title_wrapper{
  width: 70%;
  margin: 0 auto;
}

.l_nav ul{
  width: 70%;
  margin: 60px auto;
}

.l_nav ul li{
  font-size: 18px;
  line-height: 60px;
  letter-spacing: 2px;
  white-space: nowrap;
}

.l_nav ul li a{
  display: inline-block;
  transition: 0.9s;
  font-weight: 700;
}

.l_nav ul li a:hover{
  opacity:0.5;
}

.r_wrapper h1{
  width: 100%;
}

.r_wrapper h1 img{
  width: 100%;
}

.about, .news, .news_detail {
  width: 80%;
  margin: 40px auto;
  text-align: center;
}

.about p{
  font-size: 17px;
  letter-spacing: 2px;
  line-height: 35px;
  margin: 35px auto 60px;
}

.btn_01{
  display: inline-block;
  border: 2px #00B9EF solid;
  border-radius: 27px;
  margin: 10px;
  padding: 17px 20px;
  width: 210px;
  letter-spacing: 2px;
  font-size: 15px;
}

.btn_01:hover{
  background-color: #00B9EF;
  color: #fff;
  transition: 0.9s;
}

.news, .news_detail {
  margin: 90px auto;
}
.news ul{
  text-align: left;
  line-height: 35px;
  margin-bottom: 40px;
}

.news_in_top{
  background-color: #fff;
  border-radius: 23px;
  padding: 50px;
  width: 73%;
  margin: 20px auto;
}

.news_in{
  background-color: #fff;
  border-radius: 23px;
  padding: 50px;
  margin: 20px auto;
}

.news h3, .news_detail h3{
  margin: 20px auto 60px;
}

.news ul li {
  margin-bottom: 20px;
  border-bottom: 1px #000 solid;
  padding-bottom: 15px;
}

.news ul a{
  display: inline-block;
  font-size: 17px;
  letter-spacing: 2px;
}
.news ul a:hover{
  opacity: 0.5;
  transition: 0.9s;
}
.news_header {
  margin: 10px 0 20px 0;
  border-bottom: 1px #000 solid;
  padding-bottom: 15px;
  text-align: left;
}
.ymd_txt{
  font-weight: bold;
  padding-right: 30px;
  letter-spacing: 1px;
}

.category{
  font-size: 12px;
  letter-spacing: 2px;
  padding: 3px 5px;;
  background-color: #00B9EF;
  color: #fff;
}
.category a {
  color: #fff;
}
.news .title_news{
  letter-spacing: 2px;
}
.news_detail .title_news{
  display: inline-block;
  letter-spacing: 2px;
  padding: 20px 0 10px 0;
}
.news_detail .news_body {
  line-height: 35px;
  text-align: left;
}
.news_detail .news_body p {
  line-height: 35px;
  margin-bottom: 1.3rem;
}
.news_detail .news_body a {
  color: #00b9ef;
}
.news_detail .news_body a:hover {
  opacity: 0.5;
  transition: 0.9s;
}
.news_detail .news_body ul {
  padding-left: 20px;
  list-style: disc;
  margin-bottom: 1rem;
  line-height: 25px;
}
.news_body ul li {
  border: none;
  margin-bottom: 2rem;
}


footer{
  width: 100%;
  background-color: #00B9EF;
  padding: 40px 0;
  text-align: center;
}

footer ul{
  overflow: hidden;
  margin: 20px auto;
  width: 70%;
  text-align: center;
}

footer ul li{
  padding-right: 40px;
  display: inline-block;
}

footer ul li:nth-child(3){
  padding-right: 0;
}

footer a{
color: #fff;
display: inline-block;
font-size: 16px;
}

footer p{
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  margin: 40px auto 20px;
}

.banner_area{
  width: 70%;
  margin: 100px auto;
}

.banner_01{
  width: 100%;
  padding: 40px 0;
}

.banner_01 img, .banner_02 img{
  width: 100%;
}

.banner_02{
  display: flex;
  justify-content: space-between;
  padding: 50px 0;
}

.banner_02 div{
  width: 100%;
}

/************ トップスライド *************/

.top_pic {
	width: 100%;
}
.top_pic li img {
	width: 100%;
}

/********************     ギャラリー　　****************/

.gallery_r{ background-color: #00B9EF; padding: 50px 20px 0; }
.container{ display: block; width: 100%; margin: 0 auto;}
.grid-sizer { width: 32%; }
.gutter-sizer { width: 2%; }
.item{ box-sizing: border-box; width: 32%; height:auto!important; position: absolute!important; overflow: hidden; line-height: 0; margin-bottom: 2%; float: left;}
.item img{ width: 100%; height:auto!important; object-fit: cover; display: block; transition: transform 0.5s ease; }

/* 画像全体の黒マスク*/
.item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);
  opacity: 0; transition: opacity 0.3s ease; z-index: 1; }
/* 下部の文字エリア*/
.item::after { content: attr(data-title);  position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 10px; color: #fff; font-size: 14px; font-weight: bold;
  text-align: center; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));  transform: translateY(100%); transition: transform 0.3s ease; z-index: 2; box-sizing: border-box; line-height: 1.4; }
.item:hover img { transform: scale(1.1); }
.item:hover::before { opacity: 1; }
.item:hover::after { transform: translateY(0); }







/********************     ギャラリー　　****************/

/********************     ニュース　****************/


.news_corner{
  font-size: 50px;
  margin-bottom: 70px;
}


}

.category_flex{
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 20px auto;
}

.news_caregory_btn:hover, .news_caregory_btn_on {
  background-color: #00B9EF;
  color: #fff;
}

.news_in p{
  font-size: 15px;
  letter-spacing: 1px;
}

/********************     ニュース　****************/



/********************     会員名簿　****************/


.member_list a{
  display: inline-block;
  font-weight: bold;
  font-size: 23px;
  letter-spacing: 3px;
}

.member_list a:hover{
  opacity: 0.5;
  transition: 0.9s;
}

.member_list{
  width: 95%;
  margin: 100px auto;
}

.member_list ul{
  text-align: center;
}

.member_list span{
  font-size: 18px;
  letter-spacing: 2px;
  color: #696969;
}
.member_list li{
  line-height: 43px;
  padding-bottom: 55px;
}
.member_title{ margin: 0 auto 45px; text-align: center; font-size: 40px; }

/********************     会員名簿　****************/

/********************     協会概要　****************/

.about_wrapper{ width: 95%; margin: 60px auto 100px; text-align: center; }
section[class^="about_"] { width: 90%; padding: 60px 0; margin: 0 auto; }
.about_01{ border-top: 3px #00B9EF solid; }
.about_01, .about_02, .about_03 { border-bottom: 3px #00B9EF solid; }
.about_04{ border-bottom: 0; }
.about_04 figure{ float: right; margin: 0 0 15px 15px; width: 35%; }
.about_04 figure img{ width: 100%; }
.about_01 h4, .about_02 h4, .about_03 h4, .about_04 h4{ font-size: 30px; margin-bottom: 50px; letter-spacing: 5px; font-weight: 700; }
.about_01 p, .about_02 li, .about_03 div{ font-size: 18px; line-height: 38px; letter-spacing: 2px; }
.about_04 p{ font-size: 18px; line-height: 38px; text-align: left; }
.name_txt{ text-align: right!important; }
.about_02 ul{ text-align: left; margin: 0 auto; list-style-type: decimal; display: inline-block; margin-left: 40px; }
.about_02 li{ padding-left: 20px }
.about_03 div{ text-align: left; margin-bottom: 20px; vertical-align: top; }
.history_01{ padding-right: 25px; }
.about_03 span{ display: inline-block; }
.history { margin: 0 auto; }
.history td { padding: 15px 10px; text-align: left; vertical-align:top; font-size: 18px; line-height: 38px; letter-spacing: 1px; }
.banner_02 a:hover{ opacity: 0.7; transition: 0.9s; }
.screen-reader-text { display: none; }
.pagination { margin-top: 50px; text-align: center; }
.page-numbers { display: inline-block; border: 1px #00b9ef solid; line-height: 35px; margin: 0 5px; padding: 0 10px; color: #00b9ef; }
.page-numbers.current { background-color: #00b9ef; color: #fff; }

/********************     その他ページ　****************/

.other_wrapper { text-align: left; line-height: 35px; }
.other_wrapper p, .other_wrapper ol, .other_wrapper ul { margin-bottom: 1.5rem; }
.other_wrapper ol { list-style:decimal; margin-left: 20px; }
.other_wrapper ul { list-style:dics; margin-left: 20px; }
.other_wrapper ol li { padding-left: 20px; }
.other_wrapper h3, .other_wrapper h4 { font-size: 16px; font-weight: 700; }
.other_wrapper h3 { text-align: center; margin-bottom: 1rem; }
.other_in{ background-color: #fff; border-radius: 23px; padding: 50px; margin: 20px auto; text-align: left; line-height: 35px; }
.other_in ul { list-style:disc; margin-left: 20px; }
.other_in a { color: #00b9ef; }
.other_in a:hover { opacity: 0.7; transition: 0.9s; }

/***             tablet            ***/
@media screen and (max-width:1400px) and (min-width:1025px){
	.title_wrapper { width: 80%; margin: 0 auto; }
	.l_nav h1 { font-size: 2.5vw; line-height: 5vw; }
	.l_nav { padding: 7vw 50px 0; }
}

@media screen and (max-width:1024px){
.for_tb{display: block;}
  .l_nav{ padding: 90px 10px 0; width: 30%; }
  .r_wrapper{ width: 70%; margin-left: 30%; }
  .l_nav h1{ letter-spacing: 10px; margin-bottom: 15px; font-size: 34px; line-height: 80px; }
  .l_nav ul li{ font-size: 16px; }
  .about, .news{ margin: 30px auto; }
  .about p{ font-size: 13px; line-height: 32px; margin: 25px auto 50px; letter-spacing: 1px; }
  .btn_01{ margin: 10px auto; padding: 15px 20px; width: 150px; font-size: 11px; }
  .news_in_top{ padding: 20px 13px; width: 97%; }
  .news_in{ padding: 10px; }
  .news{ margin: 120px auto; }
  .news_in{ padding: 20px; }
  .news h3{ margin: 20px auto 50px; }
  .news ul li{ margin-bottom: 15px; padding-bottom: 10px; }
  .news ul a{ font-size: 14px; }
  .ymd_txt{ padding-right: 20px; }
  .category{ padding: 3px 5px; }
  .category_flex{ white-space: nowrap; }
  footer{ padding: 30px 0; }
  footer ul{ margin: 20px auto; width: 90%; white-space: nowrap; }
  footer ul li{ padding-right: 30px; }
  footer a{ font-size: 14px; }
  footer p{ font-size: 12px; margin: 20px auto 10px; }

}

/***             sp            ***/

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

.for_sp{display:block;}
.for_pc{display:none!important;}
.for_tb{display: none;}
.page_wrapper{ flex-direction: column; }
h2{ font-size: 18px; font-weight: 800; margin: 20px auto; letter-spacing: 2px; }
.r_wrapper{ width: 100%; overflow: hidden; margin-left: 0; }
.about, .news{ margin: 20px auto; width: 90%; }
.about p{ font-size: 12px; line-height: 25px; margin: 18px auto 40px; letter-spacing: 0; }
.btn_01{ width: 130px; margin: 5px; padding: 8px 7px; font-size: 11px; border: 2px #00B9EF solid; white-space: nowrap; }
.news{ margin: 75px auto; }
.news ul{ line-height: 25px; margin-bottom: 20px; }
.news_in, .news_in_top { padding: 15px; width: 100%; margin: 40px auto; }
.news ul li{ margin-bottom: 10px; padding-bottom: 10px; font-size: 12px; }
.news ul a{ font-size: 12px; letter-spacing: 1px; }
.ymd_txt{ padding-right: 10px; }
.category{ font-size: 7px; letter-spacing: 1px; padding: 2px; }
.title_news{ letter-spacing: 1px; }
.news h3{ margin: 30px auto; }
footer{ padding: 30px 0 10px; }
footer ul{ margin: 15px auto; width: 100%; }
footer ul li{ padding-right: 15px; }
footer a{ font-size: 11px; }
footer p{ font-size: 11px; margin: 30px auto 10px; }
.banner_area{ width: 80%; margin: 50px auto; }
.banner_01, .banner_02{ padding:0; width: 90%; margin: 20px auto; }
.banner_02 div{ width: 100%; }
ul.slider { background-color: #36c4ed; }
#menu_nav_sp{ background-color: #00B9EF; width: 50%; position: absolute; top: 0; right: 0; }
#menu_nav_sp ul{ padding: 40px 20px 25px; }
#menu_nav_sp a{ display: inline-block; font-size: 14px; letter-spacing: 2px; }
#menu_nav_sp li{ padding-bottom: 35px; }
.menu_btn{ position: fixed; top: 10px; right: 10px; height: 40px; width: 40px; z-index: 30; }
.gallery_r{ padding: 20px 10px 0; }
.news_corner{ font-size: 30px; }
.category_flex{ width: 100%; display: flex; white-space: normal; }
.news_in p{ font-size: 9px; }
.member_list a{ font-size: 15px; letter-spacing: 1px; padding-bottom: 5px; }
.member_list{ margin: 30px auto 60px; }
.member_list span{ font-size: 12px; letter-spacing: 1px; }
.member_list li{ line-height: 18px; padding-bottom: 30px; }
.member_title{ margin: 0 auto 30px; font-size: 30px; font-weight: 900; }

/********************     協会概要　****************/

.about_wrapper h3{ width: 120px; margin: 20px auto 30px; text-align: center; }
.about_wrapper{ margin: 30px auto 50px; text-align: left; }
.about_01{ border-top: 0; margin: 30px auto 20px; }
.about_02, .about_04{ margin: 20px auto 30px; }
.about_01, .about_02, .about_03{ width: 95%; padding: 20px 0; border-bottom: 0; }
.about_04{ width: 95%; padding: 20px 0; }
.about_01 h4, .about_02 h4, .about_03 h4, .about_04 h4{ font-size: 20px; margin-bottom: 30px; letter-spacing: 3px; padding-bottom: 15px; border-bottom: 2px #00B9EF solid; }
.about_01 p, .about_02 li, .about_03 div, .about_04 p{ font-size: 12px; line-height: 25px; letter-spacing: 1px; }
.about_02 ul{ text-align: left; list-style-type: decimal; width: 90%; margin-left: 20px }
.about_02 li{ padding-left: 1em; }
.about_03 div{ text-align: left; margin-bottom: 20px; vertical-align: top; }
.history_01{ padding-right: 15px; }
.history td { font-size: 12px; line-height: 25px; padding: 0 10px 0 0}
.history td:first-child { white-space: nowrap; }

}