@charset "euc-jp";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,700,900&display=swap&subset=japanese');

/**********************************************
** Site Name: 定期イベントページ
** Description: LP CSS
**********************************************/

/*-------------------------------------------*/
/*  CONTENTS:
/*--------------------------------------------
1.0 - reset
2.0 - 汎用スタイル
    2.1 - テキストリンク
    2.2 - 見出し
    2.3 - ボタン
    2.4 - 文字装飾
    2.5 - 改行
    2.6 - 矢印
    2.7 - カラム
    2.78 - PC・SP表示
3.0 - フッター
4.0 - メインビジュアル
5.0 - 〇〇と言えば
6.0 - おすすめホテル
7.0 - キャンペーン

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

/*-------------------------------------------*/
/*  1.0 - reset
/*-------------------------------------------*/

abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}table{border-collapse:collapse;border-spacing:0}hr{border:0}

/*-------------------------------------------*/
/*  2.0 - 汎用スタイル
/*-------------------------------------------*/

html { font-size: 62.5%;}
body {
  background: #fff;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #333;
}
li { list-style: none;}
div, ul, li, a { box-sizing: border-box;}
input { -webkit-appearance: none; -moz-appearance: none;}
.bg {
  background: #FFFBE2;
}
.ta_l {text-align: left;}

/*  2.1 - テキストリンク
/*-------------------------------------------*/

a { color: #2990DF;}
a:visit {color: #2990DF;}

/*  2.2 - 見出し
/*-------------------------------------------*/

h2.heading {
  box-sizing: border-box;
  padding: 0;
  letter-spacing: 2px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}

@media screen and (max-width: 767px) {
  h2.heading {
    font-size: 3.0rem;
    line-height: 1.2;
    padding: 0 20px;
    margin-bottom: 20px;
  }
  .heading_sub {
    margin-bottom: 30px;
    font-size: 1.3rem;
  }
}
@media screen and (min-width: 768px) {
  h2.heading {
    margin-bottom: 10px;
    line-height: 1.5em;
    font-size: 2.6rem;
  }
}

/*  2.3 - ボタン
/*-------------------------------------------*/

.btn {
    display: block;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: #555;
    font-weight: bold;
    background: #FED900;
}
.btn:hover {
  opacity: 0.4;
}

/*  2.4 - 文字装飾
/*-------------------------------------------*/

.txt_small { font-size: 1.2rem;}
.bold { font-weight: bold;}
.str { color: #F74450;}

/*  2.5 - 改行
/*-------------------------------------------*/

@media screen and (max-width: 767px) {
  .br_pc { display: none;}
}

@media screen and (min-width: 768px) {
  .br_pc { display: block;}
}

/*  2.6 - 矢印
/*-------------------------------------------*/

.arrow_right {
    position: relative;
}
.arrow_right::before,
.arrow_right::after {
    position: absolute;
    right: 8px;
    top: 47%;
    display: block;
    content: '';
    width: 10px;
    height: 3px;
    background: #E94908;
    border-radius: 4px;
    transition: all 0.1s;
}
.arrow_right::before {
    margin-top: -4px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.arrow_right::after {
    margin-top: 2px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*  2.7 - カラム
/*-------------------------------------------*/

.inner {
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
    margin: 0 auto;
}
@media screen and (max-width: 767px) {
}
@media screen and (min-width: 768px) {
  .inner {
        padding-right: 15px;
        padding-left: 15px;
    }
}

/*  2.8 - PC・SP表示
/*-------------------------------------------*/

@media screen and (max-width: 767px) {
  .pc { display: none;}
    .sp { display: block;}
}

@media screen and (min-width: 768px) {
  .pc { display: block;}
    .sp { display: none;}
}

/*-------------------------------------------*/
/*  3.0 - フッター
/*-------------------------------------------*/

footer .copyright {
  box-sizing: border-box;
  background: #5D71B5;
    padding: 25px 0;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  color: #fff;
}
@media screen and (max-width: 767px) {
  footer .copyright {
    padding: 15px 0;
      font-size: 1.0rem;
    }
}

@media screen and (min-width: 768px) {
  footer .copyright {
      font-size: 1.2rem;
    }
}

/*-------------------------------------------*/
/*  4.0 - メインビジュアル
/*-------------------------------------------*/
.head .logo.pc {
    width: 860px;
    margin: 0 auto;
}
.mainvisual .inner {
  box-sizing: border-box;
  position: relative;
}
.mainvisual h1 {
    text-align: center;
    line-height: 0;
}
.mainvisual h1 img {
    width: 860px;
}

@media screen and (max-width: 767px) {
  .head .main_sp { display: none;}
  .head .logo a {
      display: inline-block
    }
  .head .logo img {
    width: 120px;
  }
  .mainvisual h1 img {
      width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .mainvisual {
    background: #FED900;
    position: relative;
  }
  .mainvisual .inner {
    padding: 0;
  }
  .mainvisual .logo {
    width: 180px;
    top: 40px;
  }
  .head .main_sp { display: none;}
}

/*-------------------------------------------*/
/*  6.0 - ナビゲーション
/*-------------------------------------------*/

nav.pc {
    width: 1000px;
    margin: 15px auto;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
nav ul li {
    width: 195px;
    box-sizing: border-box;
    margin: 0 5px;
    padding: 10px;
    border: 1px solid #DCDCDC;
    border-radius: 10px;
    cursor: default;
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
}
nav ul li span {
    display: block;
    font-size: 1.1rem;
}
nav ul li a {
    color: #322B01;
    text-decoration: none;
}
@media screen and (max-width: 767px) {
    nav.sp {
        padding: 10px;
        margin: 10px 0 20px;
        }
    nav ul {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        }
    nav ul li {
        padding: 0;
        margin: 0;
        width:50%;
        box-sizing: border-box;
        border: none;
        }
    nav ul li:nth-child(-n+2) { padding-bottom: 8px;}
    nav ul li:nth-child(odd) { padding-right: 8px;}
    nav ul li a {
        display:block;
        position: relative;
        background:#fff;
        padding: 15px 0;
        border-radius: 8px;
        border: 1px solid #DCDCDC;
        text-align: center;
        text-decoration: none;
        color: #534741;
        line-height:1.2;
    }
    nav ul li a:before {
        content: "";
        width: 8px;
        height: 8px;
        display: block;
        margin-top: -4px;
        position: absolute;
        top: 50%;
        right: 10px;
        background: #E94908;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    nav ul li a:after {
        content: "";
        width: 8px;
        height: 8px;
        display: block;
        margin-top: -4px;
        position: absolute;
        top: 50%;
        right: 13px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}

/*-------------------------------------------*/
/*  6.0 - イベント詳細
/*-------------------------------------------*/

.block {
    text-align: center;
    padding: 50px 0;
}
.block .lead {
    width: 700px;
    margin: 0 auto;
  box-sizing: border-box;
  padding: 20px;
}
.block .lead .pc {
    display: inline;
}
.block .lead em {
    font-size: 1.6rem;
    font-weight: bold;
    color: #E94908;
    font-style: normal;
}
.block table {
    width: 600px;
    margin: 0 auto;
    border: 1px solid #707070;
}
.block table th {
    padding: 15px;
    border-bottom: 1px solid #707070;
    background: #E3F5FF;
    font-weight: normal;
}
.block table td {
    padding: 15px;
    border-bottom: 1px solid #707070;
    background: #fff;
}
.block .btn {
    margin: 0 auto;
    padding: 20px 0;
    width: 350px;
}
.block .btn_area {
    margin-top: 20px;
}

@media screen and (max-width: 767px) {
    .block {
        padding: 30px 20px;
    }
    .block .lead .pc {
        display: none;
    }
    .block .lead .sp {
    display: inline;
}
    .block > p img {
        width: 100%;
    }
    .block .lead {
        width: 100%;
        padding: 10px 0 20px;
    }
    .block table {
        width: 100%;
    }
    .block td img {
        width: 100%;
    }
    .block .btn {
        width: 90%;
        margin-top: 5px;
        padding: 20px 0;
    }

@media screen and (min-width: 768px) {
  .recommend h2 span::before,
  .recommend h2 span::after {
    width: 70px;
    height: 50px;
    background-size: 70px 50px;
  }
  .recommend h2 span::before { left: -75px;}
  .recommend h2 span::after { right: -75px;}
  .recommend .lead {
    max-width: 850px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 1.8rem;
  }
  .recommend .lead .note { font-size: 1.3rem;}
  .recommend .point { font-size: 2.2rem;}
  .recommend .point span { font-size: 2.5rem;}
  .recommend .list_select { margin-bottom: 60px;}
  .recommend .hotel { padding: 25px 20px 20px;}
  .recommend .hotel .wpt { font-size: 1.4rem;}
  .recommend .status .thumb {
    max-width: 290px;
    margin-bottom: 5px;
  }
  .recommend .status .title {
    height: 50px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding-bottom: 5px;
    text-align: center;
    font-size: 1.3rem;
  }
  .recommend .status .profile { font-size: 1.3rem;}
  .recommend .status .info li div:nth-child(2) { font-size: 1.1rem;}
  .recommend .btn_area .btn_booking,
  .recommend .btn_area .btn_detail { font-size: 1.6rem;}
  .recommend .btn_other { padding-top: 40px;}
  .recommend .btn_other .btn { font-size: 1.7rem;}
}
@media screen and (min-width: 960px) {
  .recommend .status .thumb { margin-bottom: 10px;}
  .recommend .status .profile { font-size: 1.5rem;}
  .recommend .status .title {
    padding-bottom: 10px;
    font-size: 1.6rem;
  }
  .recommend .status .info li div:nth-child(2) { font-size: 1.3rem;}
}

/*-------------------------------------------*/
/*  7.0 - キャンペーン
/*-------------------------------------------*/

.campaign {
  box-sizing: border-box;
  padding: 50px 0;
}
.campaign .lead {
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.5em;
  font-weight: bold;
}
.campaign .bnr {
  display: block;
  margin: 0 auto;
}
.campaign .bnr img {
  width: 100%;
  margin: 0 auto;
  vertical-align: bottom;
  transition: .2s linear;
}
.campaign .bnr img:hover { opacity: 0.7;}