@charset "utf-8";

/
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://scripts.sil.org/OFL
 */

/* *****共通設定***** */


.text {
  width: 100%;
  text-align: center;
}

h3 {
  font-size: 21px;
  margin: 0;
}

h8 {
  font-size: 12px;
  margin: 0;
}

h9{
  font-size: 14px;
  margin: 0;
}

.font1 {
  font-family: serif, arial;　}

.font2 {
  font-family: 'Noto Serif JP', serif;}


.line {
border-bottom: solid 1px black;
width:280px;
padding-bottom:30px;
}


/* *****レイアウト***** */

.container{
 width:100%;
 
}

.container-center{
 display: flex;
 justify-content: center;
}


body {
  margin: 0;
  padding: 20px;
}



.box {
  display:flex;
  flex-direction: column;
  margin-bottom: 40px;
}

.box2 {
  display:flex;
  flex-direction: column;
  margin-bottom: 40px;
}



.pict {
    max-width: 400px;
   display:block;
    height:auto;
  }

.sample {
  display: flex;
  flex-flow: row wrap;
  max-width: 100%;
}


a {
  color: #a9a9a9;
}

a:hover {
  color: #a9a9a9;
}

.bg-primary,
.btn-primary {
  color: #ffffff;
  background-color: #a9a9a9 !important;
}

.bg-primary,
.btn-primary not {
  background-color: #a7a7a7 !important;
}


.border-primary {
  border-color: #ffffff !important;
}

.bg-maincolor {
  background-color: #ffffff !important;
}

/* *****ボタン***** */

.btn {
 border: 1px solid #a9a9a9;
  color: #696969;
font-size: 15px;
  background-color: #ffffff;
  border-color: #a7a7a7;
}

.btn-warning:hover {
  color: #696969;
  background-color: #ffffff;
  border-color: #a7a7a7;
}


.btnbanner{
 width:100%;
 max-width: 100%;
 height: auto;  
 display: block;
  margin-left: auto;
  margin-right: auto;
}

.btnbanner img{
    display: block;

}
 







/* *****問い合わせ***** */

.Form {
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}


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


 .Form {
    margin-top: 40px;
  }
}
.Form-Item {

  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}
.Form-Item:nth-child(5) {

}
.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 18px;
}





@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}
.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #545454;
  color: #fff;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top:8px;
  padding-bottom: 8px;
  width:160px;
  display: block;
   border: 1px solid #a9a9a9;
  letter-spacing: 0.05em;
  background: #a7a7a7;
  color: #fff;
  font-size: 16px;
}
@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 120px;
    font-size: 16px;
  }
}



/*レスポンシブ */



@media (min-width:576px) {



.slider {
  width: 80%; /* bodyの幅に対する割合 */
}

.wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap:wrap;

}


.wrap:not(:last-child) {
  margin-bottom: 80px;
}

.wrap:nth-child(even) {
  flex-direction: row-reverse;
}

.box {
  width: 100%;
}

  .box:nth-child(even) {
    flex-direction: row-reverse;
  }
  
  .text {
    text-align: left;
  }
  .box:nth-child(even) .text {
    text-align: right;
  }
  


  .box:nth-child(even) .pict {
    margin-left: 0;
    margin-right: 3%;
  }
}

.box2 {
  width: 100%;
  display: block;
  width: 100%;
  height: auto;
}

  .box:nth-child(even) {
    flex-direction: row-reverse;
  }
  
  .text {
    text-align: left;
  }
  .box:nth-child(even) .text {
    text-align: right;
  }
  
.pict {
    width: 100%;
    display: block;
    height:auto;
  }
 

.btnbanner{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.btnbanner img{
   display: block; 
   width: 100%;
   height: auto;

}

}

/* ヘッダー(navbar) */
#nav01 {
  border-bottom: 3px solid #ffffff;
}

#nav02 .nav-fill {
  width: 100%;
}

#nav02 .nav-item {
  border-left: 1px solid #a9a9a9;
}

#nav02 .last-list-md {
  border-right: 1px solid #a9a9a9;
}



/* フッター */
#footer-sns img {
  height: 58px;
  width: auto;
  margin-right: 25px;
}

#footer-index ul ul {
  padding-left: 0.75rem;
  border-left: 1px solid #a9a9a9;
}

/* *****トップページ***** */
.jumbotron {
  background-image: url("../img/top-image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

/* *****下層ページ***** */
.breadcrumb-item + .breadcrumb-item:before {
  content: "\f054";
  font-family: "font-family: 'Noto Serif JP', serif;
  font-weight: 900;
  font-size: small;
  color: #000000;
}

#page .jumbotron {
  background: #a9a9a9 url("../img/subpage-headding.jpg") no-repeat center center;
  background-size: cover;
  border-radius: initial;
}


/* ****スライダー***** */

.slider {
  max-width:1080px;
  position: relative;
  width: 90%;
  padding-top:0%;
  overflow: hidden;
}
 

.slide {
  position: relative;
  width: 100%;
  padding-top:0%;
  overflow: hidden;
  background-color: #000000;
}
 

*１枚目*/
@keyframes slide1 {
	 0% {opacity: 0;}
	 9% {opacity: 0;}
	18% {opacity: 0;}
	27% {opacity: 0;}
      36% {opacity: 0;}
	45% {opacity: 0;}
	54% {opacity: 0;}
	63% {opacity: 0;}
      72% {opacity: 0;}
	81% {opacity: 0;}
	90% {opacity: 0;}
     100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
	 0% {opacity: 1;}
	15% {opacity: 1;}
	25% {opacity: 0;}
	30% {opacity: 0;}
      40% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 0;}
      80% {opacity: 0;}
	85% {opacity: 0;}
     100% {opacity: 1;}
}
/*３枚目*/
@keyframes slide3 {
	 0% {opacity: 0;}
	15% {opacity: 0;}
	25% {opacity: 1;}
	35% {opacity: 1;}
      45% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 0;}
      80% {opacity: 0;}
	90% {opacity: 0;}
     100% {opacity: 0;}
}

/*4枚目*/
@keyframes slide4 {
	 0% {opacity: 0;}
	10% {opacity: 0;}
	20% {opacity: 0;}
      35% {opacity: 0;}
	45% {opacity: 1;}
	55% {opacity: 1;}
	65% {opacity: 0;}
      70% {opacity: 0;}
	80% {opacity: 0;}
	90% {opacity: 0;}
     100% {opacity: 0;}
}

/*5枚目*/
@keyframes slide5 {
	 0% {opacity: 0;}
	10% {opacity: 0;}
	20% {opacity: 0;}
      30% {opacity: 0;}
	40% {opacity: 0;}
	55% {opacity: 0;}
	65% {opacity: 1;}
      75% {opacity: 1;}
	85% {opacity: 0;}
	90% {opacity: 0;}
     100% {opacity: 0;}
}

/*6枚目*/
@keyframes slide6 {
	 0% {opacity: 0;}
	10% {opacity: 0;}
	20% {opacity: 0;}
      30% {opacity: 0;}
	40% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 0;}
      75% {opacity: 0;}
	85% {opacity: 1;}
	95% {opacity: 1;}
     100% {opacity: 0;}

}



/*画像ブロック*/
#mainimg {
	clear: left;
	width: 100%;
	margin-bottom: 0px;
	position: relative;
}

/*画像の共通設定*/

#slide1,#slide2,#slide3,#slide4,#slide5,#slide6 {
	-webkit-animation-duration: 30s;	
	animation-duration: 30s;			
	-webkit-animation-iteration-count:infinite;	
	animation-iteration-count:infinite;			
	
}

/*１枚目*/
#slide1 {
	-webkit-animation-name: slide1;		
	animation-name: slide1;				
	position: relative;width: 100%;height: auto;
}

/*２枚目*/
#slide2 {
	-webkit-animation-name: slide2;		
	animation-name: slide2;				
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
}

/*３枚目*/
#slide3 {
	-webkit-animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;				/*同上*/
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
}
/*4枚目*/
#slide4 {
	-webkit-animation-name: slide4;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide4;				/*同上*/
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
}
/*5枚目*/
#slide5 {
	-webkit-animation-name: slide5;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide5;				/*同上*/
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
}
/*6枚目*/
#slide6 {
	-webkit-animation-name: slide6;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide6;				/*同上*/
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
}

--------------------------------------------------　*/
iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

--------------------------------------------------　*/




--------------------------------------------------　*/
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  position: relative;
}

.logo {
  font-size: 24px;
}