@charset "UTF-8";

/*body {background-image: url(../gangan/kabegami.png);}
*/
html,body { height: 100%; color:#333;margin:0;
font-family:'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック',sans-serif;}
#wrap{background-color:#fff;width:100%;position: relative;}
#gaikan {position:relative;background-color: #000;width:100%;height:90vh;overflow: hidden;}
#gaikan > img{object-fit: cover;width:100%;height:100%;}


#concept {background-image: url(../gangan/naikan.jpg);
background-position: center center; background-repeat: no-repeat;background-size:cover;}
#concept > div{width:100%;top:0;left:0;background-color: rgba(0, 0, 0,0.5);}
#concept > div > p{color:#fff; padding:100px 50px;margin:0 auto;}
#info{color: #000;margin:0 auto;width:100%;background-color:#DCE0BC;}
#info p.paypay{margin-top:1em;margin-bottom:0.5em;}
#info p{margin: 0px;}
#info p:last-child{text-align: center;margin:0 auto;width:500px;}
#info p:last-child img{width:100%;}
/* footer{background-color:  #62664B;} */
.col1,.col2{color: #443;}
 button {background-color: rgba(255,255,255,0.6); }

.irame_wrapper{display:flex; justify-content: center;align-items: center;}


.mi{vertical-align: top;}


.logo{position:absolute;top:0;left:50px;z-index: 1;width:30%;}


#menu th{text-align: center;padding-bottom:1rem;font-size:0.8rem;}
#menu td:first-child{text-align: left;width:60%;}
#menu td:last-child{text-align: right;width:40%;}
.kisetu {text-align: center;}
.chui {color: gray;text-align:right;font-size: 70%;margin: 0;}
.chui2{color:#a50606;font-size:0.9rem;}
.red{color:red;}

#photo{position: relative;width:100%;background-color:transparent;color:#333;padding:100px 20px 10px 20px;}
#photo .photo-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;}
#photo .photo-wrap div img{width:100%;}
#photo .photo-wrap div p{font-size:0.8em;letter-spacing:normal;text-align: center;}
#photo .photo-wrap div p:last-child{font-size:0.7em;}

#header a {text-decoration: none;color: #fff;}
#header a:link { color: #fff; }
#header a:visited { color: #fff; }
#header a:hover { color: #c4609e; }
#header a:active { color: #c4609e; }
.sup{font-size: 0.7rem;}
td span{font-size:0.8rem;color:#c4609e;}


#info a {text-decoration: none;color: #333;}
#info a:link { color: #333; }
#info a:visited { color: #333; }
#info a:hover { color: #c4609e; }
#info a:active { color: #c4609e; }


/*   ボタンタグ設定   */
button {
 display: block;
 background-color: rgba(255,255,255,0.8);
 border: none;
 padding: 20px;
 width: 120px;
 color: #333;
 letter-spacing: 0.4em;
 cursor: pointer;
 position: fixed;
 top: 0px;
 right: 0px;
 z-index: 1001;
 text-align: center;
 outline: none;
 }
 /*   ハンバーガーボタン3本線   */
 button span.bar {
 display: block;
 height: 4px;
 background-color: rgb(68, 83, 148);
 margin: 20px 0;
 transition: all 0.2s;
 transform-origin: 0 0;
 }
 button .close {letter-spacing: 0.08em;display: none;font-size: 1.5em;}
 button .menu {display: block;color: rgb(68, 83, 148);font-size: 1.5em;}
/*  メニューアクティブ時  */
 button.active span.bar {width: 94px;}
 button.active .bar1 {transform: rotate(30deg); }
 button.active .bar2 {opacity: 0;}
 button.active .bar3 {transform: rotate(-30deg);}
 button.active .menu {display: none;}
 button.active .close {display: block;color:rgb(68, 83, 148);}

 /* nav {
  width: 40%;
  height: 100%;
  transition: all 0.2s;
  transform:translateX(600px);
  position: fixed;
  top: 0;
  right: 0px;
  z-index: 1000;
  background-color: rgba(12,16,35,0.8);
  padding-top: 50px
  }
nav.open {transform: translate(0);}
nav ul{padding-left:2em;}
nav li {list-style:none;color: #fff;font-size:1.5rem;margin-bottom: 20px;} */




/*アニメーション*/
.item_text{
 animation: bound .3s ease infinite alternate;
}

@keyframes bound{
 0% {transform: translateY(0px);}
 100% {transform: translateY(-10px);}
}
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}

/*BOX表示・非表示*/

.hidden_box .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
  margin-top: 4vh;
}
.hidden_box input {
  display: none;
}

.hidden_box input:checked ~ .hidden_show {
  padding: 10px 0;
  height: auto;
  opacity: 1;
}

#menu table:last-of-type{margin-bottom:10vh;}
label {display: inline;padding:0.5em;background-color:gray;color:white;}


.menuwaku + p{font-size: 0.8em;}
#info .gyou{padding-top:1em;}
#insta >p{line-height: 0%;padding: 0%;}




/*PC*/
@media screen and (min-width:768px){
  .pagetop {display: none;position: fixed;bottom: 10px;right: 10px;z-index:999;}
  .pagetop img{width:80px;}
  .pagetop:hover  {display: block;text-decoration: none;padding:0px;filter:alpha(opacity=70);-moz-opacity: 0.7;opacity: 0.7;}
  /* footer{text-align: center;padding:20px;color:#FFF;width:100%; margin-top:150px;} */
  #gaikan {position:relative;background-color: #000;width:100%;height:70vh;overflow: hidden;}
#gaikan p {position:absolute;top:-50px;left:-70px;}
#gaikan p img{width:30vw;}
#concept {font-size:1.2rem;line-height:2.5rem;text-align: center;}
#concept p{width:450px;margin:0 auto;}

#yasumi{width:100%;text-align: center;}
#yasumi p:first-child{padding:50px 0 0 0;}
#yasumi p:not(:first-child) {font-weight: 700;font-size: 2.5em;
  -webkit-text-fill-color: #62664B;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;}

    
#menu {margin:-50px auto 0 auto;text-align:center;background-color:#F3f3f3;padding-bottom:80px;}
#menu .menuwaku{width:200px;padding:20px 0 0 0;font-size:1.5rem;letter-spacing:0.3rem;margin:50px auto 0 auto;}
#menu .kisetu_menu{display: inline-block;background-color:#a31111 ;color:white;
  font-size:1.2rem;text-align:center;border: 1px solid;letter-spacing: 0.2rem;margin:80px auto 40px ;padding:5px 20px;}
#menu .menusub  {color:#443;font-size:1.2rem;text-align:center;width:25%;
  min-width:250px;border: 1px solid;letter-spacing: 0.3em;
  margin:50px auto 20px auto;padding:5px;}
#menu > p:nth-child(6){margin-top:150px;}
#menu table{margin:0 auto; width:50%;min-width:400px;}
.chui {line-height:0.5rem;text-align:center;font-size:0.8rem;}
#photo p{font-size: 1.3rem;margin:0 auto;letter-spacing: 0.5rem;}
#photo .photo-wrap > div{width: calc((100% - 30px) / 4);background-color:white;margin-bottom:10px;}
#info{text-align: center;}

#info table{text-align: left;width:70%;min-width:800px;padding:60px 0;
border-collapse: separate;border-spacing: 0 5px;margin:0 auto; }
#info a:link,#info a:visited,#info a:hover,#info a:active{color:#000;}

.slider {
  margin: 0 auto ;
  width: 100%;
  max-width: 700px;

}

.slider-img {
  margin: 0 10px;

}
.slider-img img {
  height: auto;
  width: 100%;
  border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;
  background-color: lightblue;
}
.card > p{font-size:1.4rem;}


}


#insta{margin:0 auto;padding:200px 0;background-color: #f3f3f3;}
#insta{text-align: center;}
.insta_btn2{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 190px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn2:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn2 .fa-instagram{/*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.insta_btn2 span {/*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
}

.insta_btn2:hover span{/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

/*SP*/
@media screen and (max-width:767px){
html{overflow-x: hidden;}
body {margin:0px;padding:0px;width:100vw;overflow-x: hidden}
.pagetop {display: none;position: fixed;bottom: 10px;right: 10px;z-index:999;}
.pagetop img{width:60px;}

/* footer{text-align: center;padding:20px;color:#FFF;width:100%; margin-top:150px;} */
#header{background-color:#446BDA;}
#gaikan {position:relative;background-color: #000;width:100%;height:90vh;overflow: hidden;}
#gaikan p {width:60%;position:absolute;top:60%;left:50%;transform: translate(-50%,-50%);}
#gaikan p img{width:100%;}
#conpept{font-size: 0.9em;padding:3em 2em;line-height:1.5rem;}

#insta{margin:0 auto;padding:20vh 0;}
#insta{text-align: center;}

#menu .menusub p:first-of-type{letter-spacing: normal;}
#menu{background-color: #F3F3F3;}

#yasumi{width:100vw;padding:1.2em;margin:0 auto;}
#yasumi p:first-child{font-size:0.8em;text-align: center;}
#yasumi p:not(:first-child) {font-weight: 700;font-size: 2.5em;
  -webkit-text-fill-color: #62664B;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;}

button{width:70px;padding:5px;font-size:0.5rem;}
button span.bar{height: 2px;margin:8px;}
button .close{font-size:0.5rem;}
button.active span.bar {width: 50px;margin:8px;}
button.active .bar1 {transform: rotate(25deg); }
button.active .bar3 {transform: rotate(-25deg);}
/* nav{width:90vw;height:100vh;font-size:1.5rem;} */
#naikan img{width:100vw;}
#menu{background-color: #FFF;padding:4rem 1rem;text-align:center;}
#menu table{margin:0 auto; width:80%;}
#menu .menuwaku { width: 70%; margin-left: 60px; padding: 10px 0 0 10px ;letter-spacing: 0.6em;margin:0 auto;}
.chui{font-size:0.8rem;text-align: center;margin-top:3vh;}
#menu .menusub{margin:6vh auto 2vh auto;padding:10px;color:#443;text-align:center;width:50%;border: 1px solid;letter-spacing: 0.6em;}
#menu .kisetu_menu{margin:6vh auto 3vh auto;padding:10px;color:white;background-color:#a31111;text-align:center;width:50%;border: 1px solid;letter-spacing: 0.2em;}
#info{width: 100vw;padding:2rem 0;font-size: 0.9rem;}
#info p{margin-bottom:0.3rem;}
#info p:last-child{text-align: center;margin:0 auto;padding-bottom:3vh;width:80%;min-width:300px;max-width:400px;}
#info table {width:90vw;  table-layout: fixed;margin: 0 auto;}
#info table  td:first-child{width:8em;}
#info table  td:nth-child(2){width:calc(90vw - 8em);}
#photo{padding:0;}
#photo .photo-wrap > div{width: calc(100% / 2 - 2px);background-color:white;border-top:1px gray solid;}
#photo .photo-wrap > div:nth-child(odd){border-right:1px gray solid;}
#photo .photo-wrap > div:last-child,
#photo .photo-wrap > div:nth-last-of-type(2){border-bottom:1px solid gray;}
#photo .photo-wrap div p{margin:0;}


.slider {
  margin: 0 auto;
  max-width: 500px;
  width: 100%;
}

.slider-img {
  margin: 0 5px;

}
.slider-img img {
  height: auto;
  width: 100%;
  border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;
  background-color: lightblue;
}

}