@charset "utf-8";
/* CSS Document */
html{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
/*  -------------------------------------------------------------
header
 -------------------------------------------------------------*/
.brand {
  font-weight: bold;
  font-size: 20px;
}
.site-header {
  position: relative;
  background-color: #fff;
}
.site-header_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  max-width: 70%;
  margin: 0 auto;
}
.top_icon {
  font-size: 1.5em; /*1.5倍にする*/
}
.site-header_end {
  display: flex;
  gap: 0px 30px; /*縦0px、横30pxの指定*/
}
#form {
  position: relative;
  max-width: 300px;
  border-radius: 2px;
  background: #eee;
}
#sbox {
  height: 50px;
  padding: 0 10px;
  outline: 0;
}
#sbtn {
  height: 50px;
  margin-right: 20px;
  background: none;
  color: #666;
  border: none;
  font-size: 20px; /*アイコンサイズ*/
}
#sbtn:hover {
  color: #7fbfff;
}
/*  -------------------------------------------------------------
main
 -------------------------------------------------------------*/
main {
  margin-top: 50px;
  width: 100%;
}
.wrapper {
  width: 60%;
  margin: 0 auto;
}
/* -------------------------------------------------------------
about
 -------------------------------------------------------------*/
#about {
  display: flex;
}
#about p{
	font-size: clamp(12px, 1vw, 15px);
}
.about_left {
  width: 30%;
}
.about_left img {
  width: 70%;
  margin-left: 0;
}
.about_right {
  width: 70%;
  padding: 0 5%;
}
#about h1 {
  font-size: clamp(20px, 3vw, 40px);
  letter-spacing: 4px;
  font-weight: lighter;
}
.about_r_count {
  display: flex;
  margin: 2% 0 0 0;
}
.about_r_count p {
  margin-right: 5%;
}
.about_r_count p:last-child {
  margin-right: 0;
}
.about_r_text {
  margin: 5% 0 0 0;
  line-height: 1.5;
}
.about_r_text p {}
.about_r_text p.account {
  font-size: clamp(15px, 2vw, 20px);
  letter-spacing: 2px;
  font-weight: bold;
}
.about_r_text p.link {
  display: inline-block;
  vertical-align: top;
}
.blue {
  color: #6495ed;
}
.link_img {
  width: 15px;
}
/* -------------------------------------------------------------
gallery
 -------------------------------------------------------------*/
.gallery_wrapper {
  margin: 2% auto;
  padding: 2% 0;
  border-top: 1px solid #f5f5f5;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
  gap: 2px;
}
.gallery img {
  width: 100%;
}
.gallery img:hover {
  opacity: 0.8;
}
/* -------------------------------------------------------------
footer
 -------------------------------------------------------------*/
footer{
	width: 100%;
	border-top: 1px solid #f5f5f5;
	padding: 2% 0;
}
.footer_bottom{
	margin: 70%;
	margin: 0 auto;
	text-align: center;
}
footer p{
	font-size: clamp(10px, 0.8vw, 13px);
}
/* -------------------------------------------------------------
sp
 -------------------------------------------------------------*/
@media (max-width: 659px) {
  .site-header_wrapper {
    display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  max-width: 90%;
  margin: 0 auto;
  }
  #form {
    display: none;
  }
  /*  -------------------------------------------------------------
main
 -------------------------------------------------------------*/
	main {
  margin-top: 10px;
  width: 100%;
}
  .wrapper {
    width: 90%;
    margin: 0 auto;
  }
  #about {
    flex-direction: column
  }
  .about_left, .about_right {
    width: 100%;
    padding: 0;
  }
	.about_right{
		margin-top: 2%;
	}
  .about_left img {
    width: 40%;
    margin-left: 0;
  }
}
.modal-overlay {
    z-index:2; /*デモではheader,footerをz-index:1にしたので それより上げています*/
    display:none; /*jsでフェードインされるまでdisplay:none*/
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh; /*100vhでビューポートの高さいっぱいになります*/
    background-color:rgba(0,0,0,.5)} /*これは好きな色・透明度で*/
a.modal-open:hover {cursor:pointer} /*カーソルをポインタに*/
.modal-content {
    position:fixed;
    display:none; /*jsでフェードインされるまでdisplay:none*/
    z-index:3; /*オーバーレイより上に*/
    margin:10px;
    padding:15px;
    border-radius:20px;
    background:#fff}
.modal-content img {width:auto;max-height:75vh}
.modal-content h1 {font-size:120%; margin-bottom:0.5em}
.modal-content p {max-width:565px; text-align:left}
a.modal-close { /*クローズボタンは何でも好きなスタイルでOK*/
    position:absolute;
    top:0;
    right:10px;
    color:#b29c33;
    font-size:35px;
    line-height:1;
    font-weight:bold;
    text-decoration:none}
a.modal-close:hover {cursor:pointer} /*カーソルをポインタに*/