@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p,
abbr, address, cite, code,
del, dfn, em, img,
small, strong, sub, sup,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    font-weight: normal;
    /*background:transparent;*/
}
body {
line-height:1;
font-family: "Roboto","Noto Sans JP", sans-serif;
/*font-family: "Roboto", sans-serif;
font-family: "Quicksand", sans-serif;*/
font-weight: 500;
font-feature-settings: "palt";
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
ul {
    list-style:none;
}
a {
transition: .3s;
text-decoration: none;
}
a:hover {
opacity: 0.6;
}
sub, sup{
	font-size:75%;
	}
sup{
	vertical-align:top;
    font-size: 75%;
}
table {
    border-collapse:collapse;
    border-spacing:0;
    box-sizing: border-box;
}

/* nav
--------------------------------------------------------------------------------- */

.header{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 200;
}
.header_inner {
  position: relative;
  height: 80px;
  background-color: #fff;
 box-shadow: 0px 8px 8px -5px rgba(0,0,0,0.2);
}
  @media screen and (max-width:767px){
  .header_inner {
  height: 70px;
  }
  }
  .nav {
    position: fixed;
    right: -370px; /*slide */
    top: 0;
    width: 350px; /*slide */
    height: 100vh;
    padding-top: 60px;
    background-color: #fff;
    transition: all .6s;
    z-index: 200;
    overflow-y: scroll;
  }
  @media screen and (max-width:767px){
    .nav {
    right: -82vw; /*slide */
    width: 80vw; /*slide */
    }
}
  .hamburger {
    position: absolute;
    right: 15px;
    top: 8px;
    width: 40px;
    height: 40px; 
    cursor: pointer;
    z-index: 300;
  }
    @media screen and (max-width:767px){ 
      .hamburger {
      top: 30px;
      }
    }
  .nav_list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav_item {
  }
  .nav_item a {
    display: block;
    padding: 10px 10px 10px 20px;
    border-bottom: 1px solid #009f8b;
    border-left: 5px solid transparent;
    text-decoration: none;
    color: #111;
    font-size: 14px;
    font-weight: 400;
    line-height: 2;
  }
  .nav_item a:hover {
    background-color: rgba(0, 159, 139, 0.3);
    opacity: 1;
    border-left: 5px solid #009f8b;
  }
    .nav_item a.nav_active{
    border-left: 5px solid #009f8b;
    } 
    .hamburger_border {
    position: absolute;
    left: 11px;
    width: 30px;
    height: 3px;
    background-color: #666;
    transition: all .3s;
  }
  .hamburger_border_top {
    top: 14px;
  }
  .hamburger_border_center {
    top: 22px;
  }
  .hamburger_border_bottom {
    top: 30px;
  }
  .black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #222;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }

  /* nav-menu */
  .nav-open .nav {
    right: 0;
  }
  .nav-open .black_bg {
    opacity: .8;
    visibility: visible;
  }
  .nav-open .hamburger_border_top {
    transform: rotate(45deg);
    top: 20px;
  }
  .nav-open .hamburger_border_center {
    width: 0;
    left: 50%;
  }
  .nav-open .hamburger_border_bottom {
    transform: rotate(-45deg);
    top: 20px;
  }
.img_responsive {
width: 100%;
height: auto;
}
.add_pos {
	opacity: 0;
	transition: 1s;
	transform: translateY(35px);
}
.pos_on {
	opacity: 1;
	transform: translateY(0px);
}
.fadein {
  animation: fade-in 2s;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }


  
  
}



/* 767px以下 スマホ向け
--------------------------------------------------------------------------------- */
@media screen and (max-width:767px){
.sp-only {
display: block!important;
}
.pc-only {
display: none!important;
}


  .wrapper {
  width: 100%;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 125px;
  border-top:5px solid #009f8b;
  }
  .contents_block {
  width: 92%;
  margin: 0 auto;
  padding: 50px 0 0;
  }
  .cont_box {
  margin-bottom: 50px;
  }
h1 {
width: 170px;
padding: 15px 0 0 10px;
}
h2 {
position: relative;
margin-bottom: 20px;
border-bottom: 3px solid #e6e6e6;
font-size: 18px;
padding-bottom: 5px;
font-weight: 700;
color: #222;
}
h2::before {
position: absolute;
content: '';
width: 15%;
left: 0;
bottom: -3px;
border-bottom: 3px solid #009f8b;
}
h3 {
font-size: 16px;
color: #009f8b;
margin-bottom: 15px;
}
h4.grn {
font-family: "Quicksand", sans-serif;
font-size: 20px;
display: flex;
align-items: center;
color: #009f8b;
margin-bottom: 30px;
}
h4.grn::after {
margin-left: 10px;
border-top:1px solid #009f8b;
content:"";
flex-grow: 1;
}
h4.blu {
font-family: "Quicksand", sans-serif;
font-size: 20px;
display: flex;
align-items: center;
color: #00649e;
margin-bottom: 50px;
}
h4.blu::after {
margin-left: 10px;
border-top:1px solid #00649e;
content:"";
flex-grow: 1;
}
h5 {
color: #000;
font-size: 17px;
line-height: 1.6;
margin-bottom: 20px;
font-weight: 600;
}
.honbun {
font-size: 14px;
line-height: 1.8;
font-weight: 400;
padding-bottom: 15px;
}
.honbun_cap {
font-size: 12px;
line-height: 1.5;
}


.switch_lang {
position: absolute;
top: 10px;
right: 15px;;
}
ul.lang_list {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
gap:5px;
}
ul.lang_list li {
text-align: center;
font-size: 13px;
justify-content: center;
}
ul.lang_list li.sw_active {
background-color: #4d4d4d;
display: block;
border-radius: 5px;
text-decoration: none;
color: #fff;
padding: 3px 15px;
text-align: center;
}
ul.lang_list li.sw_link {
text-align: center;
}
ul.lang_list li.sw_link a {
background-color: #cccccc;
display: block;
border-radius: 5px;
color: #fff;
padding: 3px 15px;
text-align: center;
}
.btn_hd {
display: none;
}
.btn_nav_contact {
width: 90%;
margin: 20px auto 50px;
font-size: 17px;
text-align: center;
position: relative;
}
.btn_nav_contact a {
display: block;
padding: 20px 40px;
background-color: #6fba2c;
border-radius: 5px;
color: #fff;
box-shadow: 2px 2px 2px #ddd;
}
.btn_hd::after,.btn_nav_contact::after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  margin: auto;
  }
 ul.nav_sub_list {
 width: 90%;
 margin: 0 auto;
 font-weight: 400;
 }
  ul.nav_sub_list li {
  font-size: 12px;
  line-height: 2;
  }
  ul.nav_sub_list li a {
  color: #111;
  }
.und_contact {
width: 100%;
margin: 30px auto 0;
background-color: #6fba2c;
padding: 20px 0;
}
.btn_und_contact {
width: 90%;
margin: 0 auto;
border: 1px solid #fff;
box-sizing: border-box;
}
.btn_und_contact a {
display: block;
color: #fff;
text-align: center;
padding: 30px;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
}
.btn_und_contact a:hover {
background-color: #fff;
color: #6fba2c;
opacity: 1!important;
}
ul.ft_logo {
width: 92%;
margin: 50px auto 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
ul.ft_logo li {
width: 28%;
text-align: center;
margin-bottom: 10px;
}

ul.ft_pg {
font-size: 12px;
width: 92%;
margin: 30px auto 15px;
display: flex;
font-weight: 400;
box-sizing: border-box;
border-left: 1px solid #000;
}
ul.ft_pg li {
text-align:center;
width: 50%;
border-right: 1px solid #000;
line-height: 1.8;
}
ul.ft_pg li a {
color: #000;
}
ul.ft_pg li a:hover {
color: #009f8b;
opacity: 1;
}
.footer {
width: 100%;
margin: 10px auto 20px;
border-top: 1px solid #000;
}
.footer .und_logo {
width: 120px;
margin: 20px auto;
}
.fix_contact {
position: fixed;
bottom: 0;
width: 100%;
}
.pankuzu_area {
display: none;
}


}


/* 768px以上 PC向け
--------------------------------------------------------------------------------- */
@media print, screen and (min-width:768px) {
.sp-only {
display: none!important;
}
.pc-only {
display: block!important;
}

  .wrapper {
  width: 100%;
  margin: 0 auto;
  padding-top: 75px;
  border-top:5px solid #009f8b;
  min-width: 1000px;
  }
  .contents_block {
  width: 1000px;
  margin: 0 auto;
  padding: 50px 0;
  }
  .cont_box {
  margin-bottom: 80px;
  }
h1 {
width: 220px;
padding: 15px 0 0 20px;
}
h2 {
position: relative;
margin-bottom: 20px;
border-bottom: 3px solid #e6e6e6;
font-size: 26px;
font-size: clamp(1.375rem, 0.715rem + 1.37vw, 1.875rem);
padding-bottom: 5px;
font-weight: 700;
color: #222;
}
h2::before {
position: absolute;
content: '';
width: 15%;
left: 0;
bottom: -3px;
border-bottom: 3px solid #009f8b;
}
h3 {
font-size: clamp(1.125rem, 0.465rem + 1.37vw, 1.625rem);
color: #009f8b;
margin-bottom: 15px;
}
h4.grn {
font-family: "Quicksand", sans-serif;
font-size: clamp(1.5rem, 1.17rem + 0.69vw, 1.75rem);
display: flex;
align-items: center;
color: #009f8b;
margin-bottom: 50px;
}
h4.grn::after {
margin-left: 10px;
border-top:1px solid #009f8b;
content:"";
flex-grow: 1;
}
h4.blu {
font-family: "Quicksand", sans-serif;
font-size: clamp(1.5rem, 1.17rem + 0.69vw, 1.75rem);
display: flex;
align-items: center;
color: #00649e;
margin-bottom: 50px;
}
h4.blu::after {
margin-left: 10px;
border-top:1px solid #00649e;
content:"";
flex-grow: 1;
}
h5 {
color: #000;
font-size: clamp(1.375rem, 0.88rem + 1.03vw, 1.75rem);
margin-bottom: 20px;
font-weight: 600;
}
.honbun {
font-size: clamp(0.875rem, 0.71rem + 0.34vw, 1rem);
line-height: 1.8;
font-weight: 400;
padding-bottom: 15px;
}
.honbun_cap {
font-size: 12px;
line-height: 1.5;
}


.switch_lang {
position: absolute;
bottom: 15px;
right: 360px;
}
ul.lang_list {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
gap:5px;
}
ul.lang_list li {
text-align: center;
font-size: 14px;
justify-content: center;
}
ul.lang_list li.sw_active {
background-color: #4d4d4d;
display: block;
border-radius: 5px;
text-decoration: none;
color: #fff;
padding: 5px 20px;
text-align: center;
}
ul.lang_list li.sw_link {
text-align: center;
}
ul.lang_list li.sw_link a {
background-color: #cccccc;
display: block;
border-radius: 5px;
color: #fff;
padding: 5px 20px;
text-align: center;
}
.btn_hd {
position: absolute;
right: 60px;
top:15px;
font-size: 20px;
text-align: center;
}
.btn_nav_contact {
width: 90%;
margin: 20px auto 50px;
font-size: 20px;
text-align: center;
position: relative;
}
.btn_hd a,.btn_nav_contact a {
display: block;
padding: 15px 40px;
background-color: #6fba2c;
border-radius: 5px;
color: #fff;
box-shadow: 2px 2px 2px #ddd;
}
.btn_hd::after,.btn_nav_contact::after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  margin: auto;
  }
 ul.nav_sub_list {
 width: 90%;
 margin: 0 auto;
 font-weight: 400;
 }
  ul.nav_sub_list li {
  font-size: 12px;
  line-height: 2;
  }
  ul.nav_sub_list li a {
  color: #111;
  }
ul.nav_sub_list li a:hover {
  color: #009f8b;
  opacity: 1;
  }
 
  
  
.und_contact {
width: 100%;
margin: 30px auto 0;
background-color: #6fba2c;
padding: 50px 0;
}
.btn_und_contact {
width: 60%;
margin: 0 auto;
border: 1px solid #fff;
box-sizing: border-box;
}
.btn_und_contact a {
display: block;
color: #fff;
text-align: center;
padding: 50px 30px;
font-size: clamp(1.375rem, 0.55rem + 1.72vw, 2rem);
font-weight: 400;
}
.btn_und_contact a:hover {
background-color: #fff;
color: #6fba2c;
opacity: 1!important;
}
ul.ft_logo {
width: 700px;
margin: 50px auto 0;
display: flex;
justify-content: space-between;
align-items: center;
}
ul.ft_logo li {
width: 30%;
text-align: center;
}
ul.ft_logo li img {
height: 66px;
width: auto;
}
ul.ft_pg {
font-size: 14px;
width: 400px;
margin: 30px auto 15px;
display: flex;
font-weight: 400;
box-sizing: border-box;
border-left: 1px solid #000;
}
ul.ft_pg li {
text-align:center;
width: 48%;
border-right: 1px solid #000;
line-height: 1.8;
}
ul.ft_pg li a {
color: #000;
}
ul.ft_pg li a:hover {
color: #009f8b;
opacity: 1;
}
.footer {
width: 100%;
margin: 10px auto 20px;
border-top: 1px solid #000;
}
.footer .und_logo {
width: 140px;
margin: 20px auto;
}
.pankuzu_area {
padding: 15px 30px;
background-color: #f2f2f2;
}
ul.pankuzu {
display: flex;
justify-content: flex-start;
}
ul.pankuzu li {
font-size: 13px;
line-height: 1;
font-weight: 400;
}
ul.pankuzu li:not(:first-child)::before {
  content: ">"; 
  margin: 0 5px;
}
ul.pankuzu li a {
color: #000;
text-decoration: underline;
}

}