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

/*
font-family: 'Shippori Mincho', serif;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
brown1
color:#color="#786e5a";
miffy blue
color:#004a8e;
*/



html, body{margin: 0; padding: 0;}

html {font-size:10px; }

body {
  font-family: 'Noto Sans JP', serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  font-feature-settings: "pkna";
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  color: #fff;
  transition: opacity 2s linear ;
  opacity: 0;
  background: #000;
}

body.loaded {
  opacity: 1;
}


@keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}
@-webkit-keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}
/*------------------------
fade
-------------------------*/

.fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}


@media screen and (min-width: 768px) { .sp { display: none !important; } }
@media screen and (max-width: 767px) { .pc { display: none !important; } }
/*------------------------
link
-------------------------*/
a{text-decoration: none; color:#75AEE0; -webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all  0.2s ease;}
a:hover{opacity: 0.8;}


/*------------------------
margin
-------------------------*/
.mb1{margin-bottom: 1rem}
.mb2{margin-bottom: 2rem}
.mb3{margin-bottom: 3rem}
.mb4{margin-bottom: 4rem}
.mb5{margin-bottom: 5rem}
.mb6{margin-bottom: 6rem}
.mb10{margin-bottom: 10rem}
.mt2{margin-top: 2rem}
.mt5{margin-top: 5rem}
.mt10{margin-top: 10rem}
.center{text-align: center;}
.right{text-align: right;}
.clearfix::after {content: ""; display: block; clear: both;}

/*------------------------
contents
-------------------------*/
.contents {max-width: 1200px; margin: 0 auto; position: relative; padding: 100px 3rem;}
.contents img{width: 100%;}


#header {background: url(../img/bg.jpg) center / cover no-repeat; text-align: center; }
#header h1{max-width: 1200px;　width: 100%; margin: 0 auto;line-height: 0;}
#header h1 img{width: 100%;}



p{margin-bottom: 2rem;}
/*------------------------
read
-------------------------*/
#read{padding: 5rem 0rem; text-align: center;}
#read p{line-height: 3; font-size:2rem; font-weight: 700; text-align:left; display:inline-block;}

/*------------------------
btn
-------------------------*/
.btn {display: inline-block; line-height: 1; margin-top: 50px;}
.btn a{ font-size: 22px; display: block;  width: 300px; height:50px; padding-top: 25px; background-color:#75AEE0; color:#fff; border-radius: 5rem; opacity: 1; vertical-align: middle;}
.btn a:hover{opacity: 0.7;}
.btn2 {display: inline-block; line-height: 1; margin-top: 50px;}
.btn2 a{ display: block;  width: 300px; height:50px; border-radius: 5rem; opacity: 1;}
.btn2 a img{width: 300px;}
.btn2 a:hover{opacity: 0.7;}



/*------------------------
blocks
-------------------------*/
.brown{width: 100%; padding: 5rem 0rem; background-color:#756e5b;}
.black{width: 100%; padding: 5rem 0rem; background-color:#000;}

/*------------------------
table
-------------------------*/
table{display: inline-block; text-align: left;}
td{padding: 10px 20px;}
/*------------------------
titles
-------------------------*/
.coner_title{font-family:"Roboto Condensed", sans-serif; font-size:30px; text-align: center; font-weight: 700;margin-bottom: 0; line-height: 1.2; display: block; color: #75AEE0;}
.coner_title_j{font-family: 'Noto Sans JP', serif; font-size:12px; text-align: center; font-weight: 400;margin-bottom: 100px; line-height: 1.2; display: block; color: #fff;letter-spacing: 0.5em;}

/*------------------------
blocks
-------------------------*/
.block600{width: 600px; padding: 0; margin: 0 auto;}
.block900{width: 900px; padding: 0; margin: 0 auto; display:flex; justify-content: space-between; }
.block900_1{width: 900px; height: 500px; padding: 0; margin: 0 auto; overflow-y: scroll; }
.block900_2{width: 900px; padding: 0; margin: 0 auto;}
.block1000{width: 1000px; padding: 0; margin: 0 auto; display:flex; justify-content: space-between; }

.twoblock{width: 400px;}
.num{font-family:"Roboto Condensed", sans-serif; font-size:30px; font-weight: 700;margin-bottom: 0; line-height: 1.2; display: block; color: #75AEE0;}
.title2{font-size:22px;font-weight: 700; padding-bottom: 10px; margin-bottom: 10px;border-bottom: 1px solid #fff;}
.title3{font-size:22px;font-weight: 700; padding-bottom: 10px; margin-bottom: 10px;}
.title4{font-size:16px;font-weight: 700; padding-bottom: 10px; margin: 10px 0; border-bottom: 1px solid #fff; width: 100%;}
.lh2{line-height: 2;}

.threeblock{width: 300px; text-align:center;}
.guestphoto{width: 200px; margin: 0 auto 20px;}
.guest{color:#75AEE0; font-family:"Roboto Condensed", sans-serif; font-size:20px; text-align: center; font-weight: 700; line-height: 1.2; margin-right: 10px;}
.lefttxt{text-align: left;}
.gazo{width: 400px; line-height:1; margin-bottom: 1rem;}
.gazo img{width: 100%;}
.map{width: 100%; height: 500px; margin: 50px auto;}

/*------------------------
footer
-------------------------*/
footer {background-color:#75AEE0; padding:5rem 0 5rem; text-align: center;}
.footer_logo{text-align: center; margin-bottom: 1rem;}
.footer_logo img{width: 200px; }
address{font-style:normal;}


.accordion-content {
  display: none;
  padding: 10px;
  margin-bottom: 20px;
}
.accordion-header {
  cursor: pointer;
}
.accordion-header:hover {color: #fff; text-decoration: none; opacity: 0.5;}

/*------------------------
========================================================================================================================
-------------------------*/




@media screen and (max-width: 767px) {
  html {font-size:9px;}

  body.loaded {
    opacity: 1;
}

  body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(../img/bg.jpg) center no-repeat;
  background-size:cover;
}

/*------------------------
contents
-------------------------*/
.contents {width: 80%; position: relative;}

#header {background: url(../img/top_sp.jpg) center / cover no-repeat; text-align: center; }
#header h1{margin: 0; margin-top: 0px; z-index:10; display: flex;justify-content: flex-end; align-items: center; align-items: flex-end;}
#header h1 img{ height:100%; overflow: hidden;}

/*------------------------
blocks
-------------------------*/
.block600{width: 100%; padding: 0; margin: 0 auto;}
.block900{width: 100%; padding: 0; margin: 0 auto; display:flex; justify-content:flex-start;flex-direction:column; }
.block900_1{width: 100%; height: 500px; padding: 0; margin: 0 auto; overflow-y: scroll; }
.block900_2{width:  100%; padding: 0; margin: 0 auto;}
.block1000{width: 100%; padding: 0; margin: 0 auto; display:flex; justify-content:flex-start;flex-direction:column;  }

.twoblock{width: 100%; margin-bottom: 100px;}
.num{font-family:"Roboto Condensed", sans-serif; font-size:30px; font-weight: 700;margin-bottom: 0; line-height: 1.2; display: block; color: #75AEE0;}
.title2{font-size:18px;font-weight: 700; padding-bottom: 10px; margin-bottom: 10px;border-bottom: 1px solid #fff;}
.title3{font-size:18px;font-weight: 700; padding-bottom: 10px; margin-bottom: 10px;}
.title4{font-size:16px;font-weight: 700; padding-bottom: 10px; margin: 10px 0; border-bottom: 1px solid #fff; width: 100%;}
.lh2{line-height: 2;}

.threeblock{width: 100%; text-align:center; margin-bottom: 100px;}
.guestphoto{width: 200px; margin: 0 auto 20px;}
.guest{color:#75AEE0; font-family:"Roboto Condensed", sans-serif; font-size:20px; text-align: center; font-weight: 700; line-height: 1.2; margin-right: 10px;}
.lefttxt{text-align: left;}
.gazo{width: 100%; line-height:1; margin-bottom: 1rem;}
.gazo img{width: 100%;}
.map{width: 100%; height: 500px; margin: 50px auto;}
td{
  display: block;
  padding: 0;
}
td:first-child{
  padding: 40px 0 0 0;

}
/*------------------------
read
-------------------------*/
#read p{line-height: 2.4; font-size:1.7rem; font-weight: 700; text-align:left; display:inline-block;}


footer {background-color:#75AEE0; padding:5rem 0 7rem; text-align: center;}
address{font-style:normal;}
}