@charset "UTF-8";
/*--------- header ---------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700;800;900&display=swap');

.font01{font-family: 'M PLUS Rounded 1c', sans-serif;}

#header {
 width: 100%;
 position: absolute;
 top: 0px;
 left: 0px;
 z-index: 100;
 background: #f7fbfc;
}

.header_wrap {
 position: relative;

}
.header_top_wrap {
display: flex;
height: 128px;
}
.header_logo_wrap {
 padding: 10px 0 10px 25px;
 width: 17%;
}
.header_logo {
/* max-width: 302px; */
width: 100%;
/* max-height: 80px; */
height: auto;
}
.header_info_wrap {
 position: relative;
}
.header_info_img {
 margin: 5px 0;
 /* max-width: 468px; */
 width: fit-content;
 height: auto;
}

.header_info_line {
    width: 174px;
    height: auto;
}
   
.header_menu_wrap {
 flex: 1;
 width: 60%;
}
.header_menu_lists {
 display: flex;
 justify-content: space-around;
 align-items: center;
 height: 100%;
 opacity: 0.9;
}
.header_menu_lists li:last-child {
  margin-left: 0;
}
.header_menu_list a{
 font-family: 'M PLUS Rounded 1c', sans-serif;
 display: flex;
 text-align: center;
 flex-direction: column;
 color: #333;
 letter-spacing: 0.1em;
 font-weight: 700;
 font-size: 20px;
}
.header_menu_list a span{
 font-family: 'M PLUS Rounded 1c', sans-serif;
 font-size: 16px;
 padding-top: 3px;
 opacity: 0.8;
}

.header_tell_wrap {
 position: absolute;
 right: 80px;
 /*padding-top: 5px;*/
}
.header_tell p {
 color: #0cb3ed;
 font-family: 'Ubuntu', sans-serif;
 font-size: 33.33px;
 font-weight: 700;
 letter-spacing: 0.1em;
}

.header_reserved_wrap {
  position: absolute;
  right: 0;
  margin-top: 0px;
  /* top: 90px; */
  /*background-image: url(../img_new/top_head_reserved.svg);*/
  /*background-repeat: no-repeat;*/
  width: 50px;
  /* height: 280px; */
}
.header_instagram_wrap {
  position: absolute;
  right: 0;
  margin-top: 196px;
  /*background-image: url(../img_new/top_head_reserved.svg);*/
  /*background-repeat: no-repeat;*/
  width: 50px;
  /* height: 280px; */
}
.header_line_wrap {
  position: absolute;
  right: 0;
  margin-top: 396px;
  /*background-image: url(../img_new/top_head_reserved.svg);*/
  /*background-repeat: no-repeat;*/
  width: 50px;
  /* height: 280px; */
}
  

.header_reserved p {
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
 color: #FFFFFF;
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 18.5px;
 letter-spacing: 0.2em;
 position: relative;
 top: 30px;
 right: 0;
 bottom: 0;
 left: 30px;
}

.header_scroll_wrap {
 position: absolute;
 right: 8px;
 padding-top: 533px;
 width: 18px;
 height: 180px;
}

.header_scroll {
  position: absolute;
}

/*--------- プルダウン用コード ---------*/

.header_menu_second {
 position: relative;
 height: 100%;
 display: flex;
 align-items: center;
}

.header_menu_second:hover .header_menu_second-level{
    overflow: visible;
    opacity: 1;
    top: 128px;
    height: 400px;
}

.header_menu_second-level {
 position: absolute;
 width: 300%;
 top: 110px;
 left: -100%;
 overflow: hidden;
 opacity: 0;
 -moz-transition: .5s;
 -webkit-transition: .5s;
 -o-transition: .5s;
 -ms-transition: .5s;
 transition: all 0.5s;
 height: 0;
 background: #f7fbfc;
}
.header_menu_second-level li {
    border-bottom: #ccc solid 1px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pad_on {
    display: none;
    z-index: 1;
}
/* -----------------ブレークポイント---------------------------- */

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

.header_logo_wrap {
    width: auto;
}
.header_info_wrap {
    width: auto;
}
.header_top_wrap {
    height: 88px;
}

.pad_on {
    display: block;
    margin-left: auto;
}
.pad_none {
    display: none;
}


/* ハンバーガーメニュー */
/* ハンバーガーメニューのサイズ(32x32) */
.hamburger-menu{
    vertical-align: center;
    width: 64px;
    height: 64px;
}
/* ハンバーガーメニューの位置と色 */
.menu-btn{
    top: 20px;
    left: 10px;
    display: flex;
    height: 64px;
    width: 64px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #E06912;
    opacity: 0.9;

}
/* メニュー線（本体と before と after で３本表示する） */
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after{
    /* 20x3 の白線 */
    content: '';
    display: block;
    height: 3px;
    width: 20px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
/* before を少し上にずらして描画 */
.menu-btn span:before{
    bottom: 8px;
}
/* after を少し下にずらして描画 */
.menu-btn span:after{
    top: 8px;
}

/* メニューをオープンしたら三本線を×にする */
#menu-btn-check:checked ~ .menu-btn span{
    /* メニューオープン時は三本線の真ん中の線を透明にする */
    background-color: rgba( 255, 255, 255, 0 );
}
#menu-btn-check:checked ~ .menu-btn span::before{
    /* メニューオープン時は三本線の上の線を 45 度傾ける */
    bottom: 0;
    transform: rotate( 45deg );
}
#menu-btn-check:checked ~ .menu-btn span::after{
    /* メニューオープン時は三本線の下の線を -45 度傾ける */
    top: 0;
    transform: rotate( -45deg );
}
/* チェックを非表示にする */
#menu-btn-check{
    display: none;
}

/* メニュー装飾 */
.menu-content{
    width: 60%;
    max-width: 260px;
    height: 100%;
    position: fixed;
    right: -100%; /* メニューを画面外へ */
    z-index: 80; /* 下のコンテンツの上にかぶせて表示する */
    background-color: #005199;
    opacity: 0.9;
    transition: all 0.5s; /* 0.5秒かけてアニメーションで出し入れする */
}


.menu-content ul ul {
    padding-left: 30px;
}
.menu-content ul li{
    border-bottom: solid 1px #ffffff; /* メニューアイテムの区切り線 */
    padding: 10px 10px 0;
}
.menu-content ul li a{
    display: block;
    width: 100%;
    font-size: 14px;
    box-sizing: border-box;
    text-decoration: none;
    color: #ffffff;
    padding: 0px 15px 3px 0;
    position: relative;
}

/* メニューの出し入れ */
#menu-btn-check:checked ~ .menu-content{
    right: 0;  /* チェックされたら画面内へ */
}


}


@media screen and (max-width:700px) {
.hamburger-menu {
    width: 32px;
    height: 32px;
}
.menu-btn {
    width: 32px;
    height: 32px;
}
.menu-content {
    width: 195px;
}
.menu-content ul li a{
    padding-right: 0;
}

.header_logo_wrap {
    padding: 5px 0 0 5px;
}
.header_info_img {
    margin: 5px 0 0;
}
.header_scroll_wrap {
    display: none;
}
.header_reserved_wrap,
.header_instagram_wrap, 
.header_line_wrap {
    display: none;
}
.header_tell p {
    display: none;
}
.sp_none {
    display: none;
}

}