@charset "UTF-8";
/* CSS Document */
/*total*/
* {
  box-sizing: border-box;
}

html{
	font-size: 62.5%;
	scroll-behavior: smooth;
}
img{
	vertical-align: bottom;
}

body{
	display: block;
	line-height: 1.6;
	margin: 0 auto;
	color:#333333;
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	font-family: 'Open Sans', sans-serif;
}

a{
	text-decoration: none;
	color: #28879B;
}
/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.delay-time1{
animation-delay: 1s;
}
.delay-time2{
animation-delay: 2s;
}
/*header*/

header .col2 .logo{
		margin: 0 74px;
		z-index: 30;
		background: #ffffff;
		padding: 5px;
		border-radius: 0 0 10px 0;
	} 
.logo a:hover{
	opacity: 0.7;
}
.col2{
	display: flex;
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.gnavi__pc-style{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 0px;
	gap: 34px;
}

.gnavi__pc-style > ul {
	display: flex;
	flex-direction: row;
	align-content: flex-start;
	padding: 0 20px 0 0;
	height: 50px;
}

.gnavi__pc-style li {
	padding: 17px;
	height: 100%;
}

.gnavi__pc-style ul li a{
  background: 
      linear-gradient(currentColor 0 0) 
      bottom /var(--d, 0) 1px 
      no-repeat;
  transition:0.5s;
	height: 100%;
}
.gnavi__pc-style li a:hover {
  --d: 100%;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}
/*button*/
.button{
	margin: 30px 0;
}
.button a{
    border: solid 1px #28879B;
	color: #28879B;
	border-radius: 40px;
	background: #ffffff;
    position: relative;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button a:before{
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: -2em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 1px;
    background-color: #28879B;
    transition: 0.3s;
}
.button a:after{
    content: '';
    position: absolute;
    top: 50%;
    right: -2em;
    transform: translateY(-50%);
    width: 60px;
    height: 1px;
    background-color: #28879B;
    transition: 0.3s;
}
.button a:hover:before,
.button a:hover:after{
    right: -2.5em;
}
.button a:hover {
    background: #E4F2F4;
}
/*img hover*/
a img:hover{
	opacity: 0.7;
}
/*footer*/
footer ul{
	position: relative;
	display: flex;
	justify-content: center;
	font-size: 13px;
}

footer li{
	padding: 40px 20px;
}
footer a:hover{
	text-decoration: underline;

}

/*only SP*/
.gnavi__sp-style,
.menu-btn{
	display: none;
}

@media screen and ( max-width : 864px ){
	header .col2 .logo{
		margin: 0;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 30;
		background: #ffffff;
		padding: 5px;
		border-radius: 0 0 10px 0;
	} 
	/*sp menu*/
	.gnavi__pc-style {
  display: none;
}
	
	.gnavi__sp-style {
  display: block;
}
	/*メニューボタン　展開前*/
.menu-btn {
  display : block;
  position: fixed;
  z-index : 50;
  right : 0px;
  top   : 0px;
  width : 56px;
  height: 54px;
  cursor: pointer;
  text-align: center;
  background: #ffffff;
  padding: 20px;
  border-radius: 0 0 0 10px;
}
.menu-btn span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  right    : 10px;
  background : #2C4949;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.menu-btn span:nth-of-type(1) {
  top: 15px;
}
.menu-btn span:nth-of-type(2) {
  top: 25px;
}
.menu-btn span:nth-of-type(3) {
  top: 35px;
}
  
/*メニューボタン　展開後*/
.menu-btn.active span:nth-child(1) {
  top : 22px;
  right: 9px;
  background :#423E3E;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.menu-btn.active span:nth-child(2),
.menu-btn.active span:nth-child(3) {
  top: 22px;
  background :#423E3E;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
	
}

/*スマホ用のメニュー*/
.gnavi__sp-style {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  color: #09768D;
  background-color: #ffffff;
  text-align: center;
  width: 100%;
	height: 100vh;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
	display: flex;
	align-items: center;
	visibility: hidden;
}
.gnavi__sp-style ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.gnavi__sp-style ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
.gnavi__sp-style ul li:last-of-type {
  padding-bottom: 0;
}
.gnavi__sp-style ul li a:hover{
	color:#FFFFFF;
  background :#09768D;
}
.gnavi__sp-style ul li a {
  display: block;
  padding: 1em 0;
  text-decoration :none;
}
.gnavi__sp-style.active {
  opacity: 1;
	visibility: visible;
}
	.gnavi__sp-style img{
		margin:0 7px 3px;
	}

}