@charset "UTF-8";


* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
}

.header-1 {
    display: flex;
    width: 100%;
    height: 10vw;
}


h1 {
    width: 30%;
    height: 6vw;
    margin-top: 1vw;
}

h1 img {
    width: 80%;
    margin-left: 20%;    
}

p {
    margin-top: 5vw;
    margin-left: 30%;
    margin-right: 3%;
    text-align: center;
    color: #0075c2;
    font-size: 1.5vw;
}

.circle {
    padding-top: 0.3vw;
    margin-top: 4.8vw;
    width: 10%;
    height: 1.7vw;
    text-align: center;
    font-size: 1vw;
    font-weight:bolder;
    border-radius: 9999px;
    background-color: #0075c2;
}

.circle a {
    color: aliceblue;
}

.sns-box {
    display: flex;
    margin-top: 4.8%;
    margin-left: 0.5%;
}

i {
    font-size: 2vw;
}

.fa-square-facebook {
    color: #3d5998;
}

.fa-square-instagram {
    color: #cf2e92;
}

.fa-line {
    color: #00b990;
}

.sns-box a {
    padding-right: 5%;
}

nav {
    display: flex;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
}

nav ul {
    
    margin-left: 5vw;
    display: flex;
    text-align: center;
}

nav li {
    margin-right: 4vw;
}

nav a {
    color:#505050;
    font-size: 1.3vw;
   
}


/*navhover*/
.hover1 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover1::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #696969;
	transition: all 0.3s ease 0s;
}
.hover1:hover {
	cursor: pointer;
}
.hover1:hover::after {
	width: 9vw;
}

.hover2 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover2::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #696969;
	transition: all 0.3s ease 0s;
}
.hover2:hover {
	cursor: pointer;
}
.hover2:hover::after {
	width: 9.5vw;
}

.hover3 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover3::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #696969;
	transition: all 0.3s ease 0s;
}
.hover3:hover {
	cursor: pointer;
}
.hover3:hover::after {
	width: 9vw;
}

.hover4 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover4::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #696969;
	transition: all 0.3s ease 0s;
}
.hover4:hover {
	cursor: pointer;
}
.hover4:hover::after {
	width: 10vw;
}

.hover5 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover5::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #696969;
	transition: all 0.3s ease 0s;
}
.hover5:hover {
	cursor: pointer;
}
.hover5:hover::after {
	width: 7vw;
}


/*スライドショー*/
.img-frame{
    position: relative;
    top: -20vw;
    left: 20%;
    width: 60%;
    height: 40vw;/*画像全体の高さ*/
    overflow: hidden;/*はみ出した部分を隠す記述*/
 }
 
 /* @mediaはレスポンシブ対応*/
 @media screen and (max-width: 0px){
 .img-frame{
    width: 100%;
    height: 40vw;/*画像全体の高さ*/
    background-size: 100% 100%;
    }
 }
 .img-01, .img-02, .img-03{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
 }
 .img-01{
    background-image: url('../images/mainphoto.png');
    animation: slide-animation-01 15s infinite;/*スライド切り替えの速度15秒に設定中(15s)*/
 }
 .img-02{
    background-image: url('../images/mainphoto2.jpg');
    animation: slide-animation-02 15s infinite;
 }

 .img-03{
    background-image: url('../images/mainphoto5.jpg');
    animation: slide-animation-03 15s infinite;
 }



 /* 拡大→縮小→拡大 */
 /* @keyframesはアニメーションがどのように変わるか記述するためのもの*/
 @keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}/*scale(1.0)=100%の大きさ*//*opacity=透明度*//*transformは拡大縮小*/
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}/*scale(1.15)=115%の大きさに拡大*/
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}

.parent {
 position: relative;
 top: 21vw;
 left: 8vw;
 width: 40%;
 height: 28vw;
 background-image: url(../images/mainphoto3.jpg);
 background-size: 100% 
}

.box1 {
    position: absolute;
    top: -16vw;
    left: 50vw;
    width: 80%;
    height: 23vw;
    background-image: url(../images/mainphoto4.jpg);
    background-size: 100% 
}

.box2 {
    position: absolute;
    top: -14vw;
    left: 24.7vw;
    width: 120%;
    height: 23vw;
    background: linear-gradient(to right, #ffd700, orange, coral);
}

.button2 { 
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 155%;
    padding-top: 5vw;
    width: 45%;
    height: 25%;
    text-align: center;
    font-size: 1.5vw;
    font-weight:bold;
    color: aliceblue;
    border-radius: 100px 50px 100px 50px;
    background-color: #0075c2;
}

.main_imgBox {
background-color: #000;
}

h2 {
    width: 9%;
    margin-top: -13vw;
    margin-left: 19.8%;
    font-size: 1.3vw;
    font-weight: 100%;
    font-family: serif;
    color: #494949;
}

section:nth-of-type(2) ul {
    display: block;
    margin-left: 20%;
    width: 35%;
    font-weight: 2vw;

}

section:nth-of-type(2) ul li {
    font-size: 1.2vw;
    text-align: justify;
    line-height: 3vw;
    border-bottom:dotted;
    color:#696969;
}

time {
    margin-right: 2vw;
    color:deepskyblue
}


.a-box {
    margin-top: -2%;
    margin-left: 3%;
    width: 22%;
    height: 14vw;
    background-image: url(../images/a-boxphoto.png);
    background-size: 100% 100%;
}

.box123 {
    display: flex;
}

.a-box img {
    width: 80%;
    margin-top: 3vw;
    margin-left: 2vw;
}

.parent-h-box{
    margin-top: 6vw;
    margin-bottom: 3%;
    margin-left:auto;
    margin-right: auto;
    width: 80%;
    height: 95vw;
    background-color:#c6e2ff;
    border-radius: 10%;

}

.h-box1 {
    position: relative;
    margin-top: 2vw;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    background-color: aliceblue;
    border-radius: 30px;
}

.h-box-info img {
    position: absolute;
    top: 80%;
    left: 8%;
    width: 14%;
}

.sns-box2 {
    position: absolute;
    top: 80%;
    left: 25%;
}

.h4-box {
    padding-top: 3vw;
    width: 50%;
    }

.h4-box2 {
    padding-top: 3vw;
    width: 100%;
}

h3 {
    padding-top: 5vw;
    text-align: center;
    font-size: 2.5vw;
    font-family: serif;
    color:#0075c2;
}

h3 small {
    font-size: 1.3vw;
}

.h4-box h4 {
    margin-left: 2vw;
    padding-top: 0.5vw;
    width: 50%;
    height: 2.5vw;
    text-align: center;
    font-size: 1.5vw;
    color: aliceblue;
    background-color: #0075c2;
    border-radius: 9999px;
}

.h4-box2 h4 {
    margin-left: 4vw;
    padding-top: 0.5vw;
    width: 25%;
    height: 2.5vw;
    text-align: center;
    font-size: 1.5vw;
    color: aliceblue;
    background-color: #0075c2;
    border-radius: 9999px;
}


.h-box1 p {
    margin-top: 1vw;
    margin-left: 3vw;
    width: 28%;
    height: 10vw;
    line-height: 2vw;
    font-size: 1.1vw;
    color: #505050
}

.h-box2 p small {
    font-size: 0.7em;
    
}

.flex-box {
    display: flex;
    width: 100%;
}

.infotext-box {
    display: flex;
    margin-left: 2vw;
    margin-top: 1.5vw;
    width: 100%;
    height: 15vw;
   
}

.table-1 {
    position: absolute;
    top: 25%;
   left: -56%;
    width: 150%;
}

.infotext-box img {
    margin-left: 7vw;
    width: 100% 100%;
}

.h-box2 {
    margin-top: 3.5vw;
    margin-left: 2vw;
    width: 21.6%;
    height: 18vw;
    background-color: aliceblue;
}

.h-box2 h5 {
    margin-left: auto;
    margin-right: auto;
    width: 8vw;
    height: 3vw;
    text-align: center;
    font-size: 1.5vw;
    font-family: serif;
    color: #505050;
}

.h-box2 h5 small {
    font-size: 0.8vw;
}

.h-box2 img {
    margin-left: 1.2vw;
    width: 15vw;
    height: 10vw;
    background-size: 100% 100%;
}

address {
    font-size: 1.2vw;
}

.button { 
    padding-top: 0.3vw;
    margin-top: 1vw;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    height: 1.5vw;
    text-align: center;
    font-size: 1vw;
    color: aliceblue;
    border-radius: 9999px;
    background-color: #0075c2;
}

.h-box2-box {
    display: flex;
    margin-left:9.8vw;
    width: 100%;
   
}

.h-box2-1 h5 {
    margin-left: auto;
    margin-right: auto;
    width: 9vw;
    height: 3vw;
    text-align: center;
    font-size: 1.5vw;
    font-family: serif;
    color: #505050;
}

.h-box2-1 {
    margin-top: 3.5vw;
    margin-left: 2vw;
    width: 21.6%;
    height: 18vw;
    background-color: aliceblue;
}

.h-box2-1 img {
    margin-left: 1.2vw;
    width: 15vw;
    height: 10vw;
    background-size: 100% 100%;
}

.h-box3-box {
    position: relative;
    width: 100%;
}

.h-box3 {
    position:relative;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: 18vw;
    background-color: aliceblue;
}

.h-box3-box h5 {
    margin-top: 8%;
    margin-bottom: 2%;
    width: 100%;
    font-size: 1.8vw;
    text-align: center;
    font-family:serif;
    color: #505050;
}


.border-1 {
    position: absolute;
    left: 17vw;
    margin-top: 1.5vw;
    width: 37%;
    height: 15vw;
    display: inline; /* 横並びにさせる */
    border-left:dotted 4px #808080; /* 区切り線 */
    border-right:dotted 4px  #808080;
}

.h-box3-imgbox {
    display: flex;
    width: 100%;
}

.boxx1 {
    position: absolute;
    top: 25%;
    left: 6%;
    width: 20%;
    height: 7vw;
  background-image: url(../images/icon_ah.png);
  background-size: 100% 100%;
}

.boxx2 {
    position: absolute;
    top: 25%;
    left: 43%;
    width:15%;
    height: 7vw;
    background-image: url(../images/icon_rabbit.png);
    background-size: 100% 100%;
}

.boxx3 {
    position: absolute;
    top: 25%;
    left: 78%;
    width: 15%;
    height: 7vw;
  background-image: url(../images/icon_sys.png);
  background-size: 100% 100%;
}




.h-box3-ulbox {
    position: absolute;
    top: 80%;
    display: flex;
    width: 100%;
}

.h-box3-ulbox ul {
    display: flex;
    margin-left: 8%;
    width: 100%;
}

.h-box3-ulbox ul li  {
    margin-left: 10.2%;
    font-size: 1.3vw;
    color: #505050;
}

.button3 { 
    padding-top: 0.3vw;
    margin-top: 2vw;
    margin-left: auto;
    margin-right: auto;
    width: 10%;
    height: 1.5vw;
    text-align: center;
    font-size: 1vw;
    color: aliceblue;
    border-radius: 9999px;
    background-color: #0075c2;
}


.flex-box2 {
    display: flex;
    position: relative;
    margin-top: 10%;
    margin-left: 10%;
    width: 80%;
}


iframe {
    display: block;
    width: 50%;
    height: 30vw;
    margin-left: auto;
    margin-right: auto;
}

.flex-box2 img {
  
    width: 90%;
    height: 10vw;
}

.position-box {
    display: flex;
    margin-left: 0.2%;
    top: 50%;
    width: 100%;
    height: 2vw;
}

.sns-box3
{
    display: flex;
    padding-left: 10%;
}

.sns-box3 i {
    margin-left: 1vw;
}

.h-box-info2 img {
    width: 100%;
    height: 2vw;
}

table {
    position: absolute;
    top: 55%;
    left: 67%;
    width: 30%;
    margin-top: 3%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    font-family: serif;
}

th {
    padding: 3%;
    border: 1px solid #0075c2
}

td {
    font-size: 1.3vw;
    color: #303030;
    text-align: center;
    border: 1px solid #0075c2
}

td,th,tr {
    border-left: none;
    border-top: none;
    border-right: none;
  }

footer {
    width: 100%;  
    height: 15vw;
    margin-top: 7%;
    background-color: #0075c2;
  }

footer ul {
    display: flex;
    justify-content: center;
    width: 100%;
}

footer ul li {
    margin-top: 3%;
    width: 10%;
    text-align: center;
}

footer ul li a {
    color: white;
    font-family: serif;
}

.footer-1 {
    display: flex;
    margin-left: 10%;
    width: 80%;
}

.footer-1 p {
    color: white;
}

.sns-box4 {
    width: 20%;
    margin-top: 6.1%;
    margin-left: 2%;
}

.circle-1 {
    padding-top: 0.3vw;
    margin-top: 4.8vw;
    width: 15%;
    height: 1.7vw;
    text-align: center;
    font-size: 1vw;
    font-weight:bolder;
    border-radius: 9999px;
    background-color:aliceblue
}

.circle-1 a {
    color:#0075c2
}

.sns-box4 .fa-square-facebook {
    color:aliceblue
}

.sns-box4 .fa-square-instagram {
    color:aliceblue
}

.sns-box4 .fa-line {
    color:aliceblue
}