@charset "UTF-8";
a{
  text-decoration: none;
}

*{
  box-sizing: border-box;
}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

p{
  margin: 10px auto;
}

ul{padding-left: 0;}

li{
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

h2,h3,h4{
  width: 100%;
  text-align: center;
}

h2{
  font-family: "Kaisei Opti", serif;
  font-size: 30px;
  font-weight: bold;
  margin: 15px 0;
  position: relative;
}

h3{
  font-size: 17px;
}

h4{
font-size: 17px;
}

html{
  background-color: antiquewhite;
}

body {
  font-family: sans-serif;
  font-size: 14px;
  background: #ffffff;
  color: #3c2c2c;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 495px;
  line-height: 1.6;
  overflow-x: hidden;
  min-width: 300px;
  padding: 0;
  border: 2px solid #3c2c2c;
}

header{
  width: 100%;
  position: relative;
}

.hero {
  position: relative;
  width: 100%;
}

.hero h1 {
  text-indent: -9999em;
  line-height: 0;
  margin: 0;
  z-index: -1;
  width: 100%;
}

#top{
  position: relative;
  background-image: url(../img/main_sp.png);
  background-size:cover;
  background-position:top center;
  background-repeat: no-repeat;
  background-color: #ffffff;
  min-height:550px ;
}

#top .titlebox{
  position: relative;
  top: 300px;
  z-index: 50;
}

.toptitle.en{
  position: relative;
}

#top h2{
  color:#fff;
  background-color: #3f0000;
  position: relative;
  top: 270px;
  padding: 10px 20px;
  width: 80%;
  font-size: 20px;
  margin: 20px auto;
  text-align: center;
  border-radius: 15px;
  z-index: 10;
}


#top .catch{
  font-family: 'Times New Roman', Times, serif;
  font-size: 30px;
  line-height: 60px;
  font-weight: bold;
  color: #3a0f0f;
  display: inline;
  position: relative;
    left: 40px;
    padding: 2px;
    background-color: #904f4ff0;
}

.langselect{
  position: absolute;
  right: 4px;
  top: 4px;
  padding: 7px;
  border-radius: 50px;
  z-index: 9999;
  background-color: #ffffff45;
}

.langselect a{
  color: #3a0f0f;
}

#wrap {
  position: relative;
  width: 100%;
}

 main{
  margin: 0 auto;
 }

[id^="sec"]{
    padding: 20px 0px;
}

.shadow{
    filter: drop-shadow(2px 0px 4px #7d7d7d74);
}

 .deco{
  font-size: 13px;
  text-align: center;
  color: #8e8e8e;
}

#sec01{
  background-image: url(../img/bg2.webp);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 90%;
  background-color:rgba(255,255,255,0.5);
background-blend-mode:lighten;

}

#sec01 h2{
  text-align: left;
  border-bottom: 5px double #3c2c2c;
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
}

#sec01 .box1{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}



.left{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
}

 .text{
  display: block;
  text-align: justify;
  line-height: 27px;
  font-size: 14px;
  padding: 0 20px;
}

/* 使い方・概要 */
.howto{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.howto h3{
  padding: 10px 0px;
  color: #fff;
}

.howto div{
background-color: #fff;
margin: 0 10px;
width: 300px;
text-align: center;
}

.one{
  border: #5c1a0f 2px solid;
}

.one h3{
  background-color: #5c1a0f;
}

.two{
  border: #0f1e3a 2px solid;
}

.two h3{
    background-color: #0f1e3a;
}

.three{
  border: #18535a 2px solid;
}

.three h3{
  background-color: #18535a;
}

.howto p{
  margin: 10px ;
}

.about{
  max-width: 900px;
  width: 100%;
  min-height:350px ;
  padding: 20px 0px;
  margin: 20px auto;
  background-color: #ffffff;
  clip-path: polygon(20px 0, 96% 0, 100% 20px, 100% 96%, 96% 100%, 20px 100%, 0 96%, 0 20px);
}

.about ul{
width: 90%;
max-width: 700px;
margin: 0 auto;
font-size: 16px;
border: #5c1a0f 2px solid;
}

.about li{
  display: flex;
  align-items: center;
    background-color: #5c1a0f;
}

.li_title,.li_txt{
  padding: 10px 15px;
  text-align: center;
}

.li_title{
  background-color: #5c1a0f;
  color: #fff;
  width: 210px;
}

.li_txt{
  display: inline-block;
  width: 100%;
  background-color: #fff;
}

/* SNS投稿 */

#sns_list{
  position: relative;
  max-width: 1200px;
  margin: 0 10px;
  top: -50px;
  z-index: 10;
}

.sns_list{
  margin: 0 auto;
  display: flex;
  overflow-x: scroll;
}

.sns_list .instagram-media{
  min-width: 300px!important;
  margin-right: 10px!important;
}

/* キャンペーン */

#sec02{
  background-image: url(../img/bg3.svg);
  background-repeat: repeat;
  background-size: 200px;
  background-color: #562D1E;
}

.campaign{
  max-width: 900px;
  width: 100%;
  min-height:350px ;
  padding: 20px 10px;
  margin: 20px auto;
  background-color: #ffffff;
  background-size: contain;
}

.campaign h2{
  margin: 0 auto;
}

.campaign h3{
  background-color:#460000;
  color: #fff;
  width: 200px;
  line-height: 40px;
  margin: 0 auto;

}

.camp_text{
  max-width: 500px;
  text-align: center;
  padding: 0 20px;
  margin-bottom: 20px;
}

.oubo{
  display: flex;
 flex-wrap: wrap; 
 width: 80%;
    margin: 40px auto;
    padding: 10px 0;
    border: #810000 6px double;
}

.camp_title{
background-color: #CEB67F;
padding: 5px 10px;
width: 170px;
font-weight: bold;
text-align: center;
line-height: 1.8rem;
}

.camp_date{
font-size: 20px;
font-weight: bold;
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 95%;
}

.camp_date span{
  font-size: 25px;
}

.present{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 0 auto;

}

.present_a{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.present_a .imgbox{
  position: relative;
  background-image: url(../img/bg_present_a.svg);
  background-repeat: repeat;
  background-color: #FFDE85;
  padding: 20px;
  border: 1px solid #3a0f0f;
}

.present_a .img40{
  position: absolute;
  right: 0px;
  bottom: 5px;
  filter: drop-shadow(2px 0px 4px #7d7d7d74);
}

.present_a h4{
  font-family: "Kaisei Opti", serif; 
  font-size: 25px;
  background-color: #3a0f0f;
  color:#fff;
  padding: 5px 0;

}

.present_a span{
  font-family:"Kaisei Opti", serif;
  font-size: 17px;
width: 100%;
    text-align: center;
}

.present_b{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  text-align: center;

}

.present_b img{
  width: 200px;
  
}

.present_b span{
  font-family:"Kaisei Opti", serif;
  font-size: 20px;
  padding: 2px 10px;
  margin-left: 2px;
  border: 1px solid #3a0f0f;
}

.oubo_howto{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 15px auto;
  width: 80%;
}

.oubo_howto p{
  color: #810000;
  font-size: 20px;
  margin: 0 10px;
  padding:5px ;
  border-radius: 50px;
}

.oubo_howto div{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #fff;
  border-radius: 25px;
  margin: 5px 10px;
  width: 210px;
  border: 2px solid #810000;
}

.oubo_howto div img{
  width: 80%;
}

.oubo_howto div p{
  color: #3c2c2c;
  padding: 10px;
  font-size: 14px;
  line-height: 17px;
  font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

.oubo_souki{
  background-image: url(../img/bg1.svg);
  background-repeat: repeat;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  padding: 20px 0;
  border-radius: 15px;
  box-shadow: #ccc 2px 2px 10px;
}

.oubo_souki p{
  width: 85%;
  text-align: center;
  background-color: #fff;
  border-radius: 15px;
  padding: 15px 10px;
  border: 2px solid #810000;
    /* filter: drop-shadow(0px 0px 6px #581b1ba3); */
}

.oubo_souki .camp_text{
  width: 90%;
  margin: 0;
  border: none;
  border-radius: 5px;
  padding: 4px 0;
}


.oubo_souki span{
  font-weight: bold;
  font-size: 18px;
}

.oubo_souki img{
  width: 150px;

}

.attention{
  overflow: scroll;
  height: 200px;
  width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    padding: 20px ;
    background-color: #f7f7f7;
}

.attention h5{
  font-weight: normal;
  font-size: 13px;
  margin-top: 10px;
}

.attention p{
  font-size: 13px;
  margin: 0 auto;
}

/* コンテンツ一覧 */

#sec05{
    /* background-color: #f0dad1e7; */
    background-image: url(../img/bg4.svg);
    background-repeat: repeat;
    background-size: 200px;
}

.commingsoon{
  /* display: none; */
  text-align: center;
  font-size: 25px;
  color: #633f3f;
  background-color: #fff;
  padding: 20px 0px;
  max-width: 900px;
  border-radius: 25px;
  margin: 20px auto;
}

.commingsoon p{
  font-size: 14px;
  display: block;  
}

.content_about{
  text-align: center;
  color: #633f3f;
  background-color: #fff;
  padding: 20px 10px;
  max-width: 900px;
  border-radius: 25px;
  margin: 20px auto;
}

.content_about .detail{
  display: flex;
  flex-wrap: wrap;
    width: 98%;
    max-width: 420px;
    margin: 10px auto;
    border: 2px solid #ffc4a7;
    border-radius: 25px;
    padding: 10px 20px;
}

.detail p{
  font-size: 18px;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 80%;
  margin-left: 10px;
}

.detail img{
  width: 50px;
}

.detail span{
  width: 100%;
  text-align: left;
  font-size: 15px;
  font-weight: normal;
}

.detail .deco{
  font-size: 13px;
}

.detail .nedan{
  color: #9a1212;
  font-weight: bold;
}

.content_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* display: none; */
}

.content_list .frame{
  position: relative;
  text-align: center;
  width: 320px;
  /* height: 335px; */
  padding: 5px;
  margin:10px 5px;
  overflow: hidden;
  background-color: #3b858e;
  clip-path: polygon(19px 0, 300px 0, 100% 19px, 100% 94.5%, 300px 100%, 19px 100%, 0 94.5%, 0 19px);
  z-index: 1;
}
.content_list .spot{
  clip-path: polygon(17px 0px, 293px 0, 100% 17px, 100% 100%, 100% 100%, 0px 100%, 0 100%, 0 17px);
}
.content_list .frame::before{
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  background-image: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
  z-index: -1;
  clip-path: polygon(18px 0, 292px 0, 100% 18px, 100% 95%, 293px 100%, 18px 100%, 0 95%, 0 18px);
}

.frame.special{
     background-image: linear-gradient(70deg, rgba(145, 34, 34, 1) 10%, rgba(209, 46, 46, 1) 40%, rgba(175, 35, 35, 1) 68%, rgba(98, 9, 9, 1) 90%);
}

.frame.taiken{
     background-image: linear-gradient(70deg, rgba(14, 50, 118, 1) 10%, rgba(67, 124, 226, 1) 40%, rgba(50, 90, 166, 1) 68%, rgba(14, 50, 118, 1) 90%);
}

.frame.event{
  background-image: linear-gradient(150deg, rgba(72, 18, 92, 1) 10%, rgba(145, 80, 224, 1) 40%, rgba(108, 50, 166, 1) 68%, rgba(72, 18, 92, 1) 90%);
}



.content_list .imgbox{
  overflow: hidden;
  height: 205px;
}

.content_list .icon{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 55px;
  height: 55px;
  z-index: 2;
  background-image: url(../img/img_special.svg);
  background-size: cover;

}

.content_list .icon.taiken{
  background-image: url(../img/img_taiken.svg);
}

.content_list .icon.event{
  background-image: url(../img/img_event.svg);
}

.content_list .icon.daily{
  background-image: url(../img/img_daily.svg);
}

.content_list p{
  padding: 0px 10px;
  margin-top: 0px;
}

.content_list span:not(.icon){
  display: block;
  margin: 5px auto;
  background-color: #3a0f0f;
  color: #fff;
  min-width: 100px;
  max-width: 200px;

}

.content_list div h4{
  font-family:"Kaisei Opti", serif;
  margin-top: 5px;
  font-size: 20px;
}



.btn1 {
  background: url(../img/btn.svg);
  background-size: contain;
  background-repeat: no-repeat;
  color: #ffffff;
  text-align: center;
  padding: 15px;
  width: 310px;
  height: 55px;
  margin: 5px auto;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(2px 0px 4px #545454a3);
  position: relative;
  transition:all 0.1s;
  top: 0px;
}

.btn1:hover{
  top: 2px;
}

.sns_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 70%;
  margin: 0px auto;
}

.sns_btn{
  display: flex;
    text-align: center;
    color: #a52e2e;
    font-size: 16px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    padding: 8px 0px;
    margin: 10px auto;
    width: 250px;
    background-color: #fff;
    filter: drop-shadow(0px 0px 3px #7d7d7d74);
    transition:all .2s;/*ゆっくり変化*/
  position: relative;
      min-height: 50px;
}

.sns_btn:hover {/*ホバー時*/
  color:#ffffff;/*文字色*/
  background-color: #c07272;
}

.sns_btn:hover .fa-square-x-twitter{
  color: #fff;
}

.sns_btn:hover .insta{
  background: #fff;
}

.sns_btn:hover .fa-instagram{
  color:#c07272 ;
}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 35px;/*幅*/
  height: 35px;/*高さ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 11px;/*角丸に*/
  margin-right: 10px;
}

.insta_btn .insta:before{/*グラデーションを重ねるため*/
  /* content: ''; */
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 40px;/*グラデーションカバーの幅*/
  height: 40px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 25px;/*アイコンサイズ*/
  line-height: 35px;/*高さと合わせる*/
}

.fa-square-x-twitter{
  color: #333;
  font-size: 30px;
  line-height: 40px;
  margin-right: 10px;
}

.floatbtn{
  color:#ffffff ;
  position: fixed;
  bottom: 5px ;
  right: 10px;
  z-index: 99;
  font-weight: bold;
}


.floatbtn .btn1{
  background: url(../ja/img/btn_float.svg);
  background-size: cover;
  width: 120px;
  height: 120px;
}

.floatbtn .btn1::before{
  content: url(../ja/img/btn_float_t.svg);
  transform: scale(0.6);
  filter: drop-shadow(0px 0px 5px #3c3c3c59)
}

.floatbtn .btn1.en{
  background: url(../en/img/btn_float.svg);
  background-size: cover;
}

.floatbtn .btn1.en::before{
  content: url(../en/img/btn_float_t.svg);
}

footer{
  background-color: #efeff2;
  padding-bottom:120px;
}

.pc{
  display: none;
}

.wave{
  background-image: url(../img/wave.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top -1px left 0px;
  height: 150px;
  position: relative;
  top: -149px;

  transform: rotate(180deg);
}

.wave.en{
  margin-bottom: 80px;
}

/* リストカスタム */

.title p{
  font-size: 1.2rem;
  padding: 0;
}

.line {
  min-width: 300px!important;
  margin: 10 auto;
  border-color: #32b2a3;
}
.ico{
  width: 50px;
}

/* アコーディオン */
/* 必須 */

.accordion{
  background-color: #955e5e;
  max-width: 800px;
  padding: 10px 20px 20px 20px;
  margin: 20px auto;
  border-radius: 15px;
}

.accordion-content {
  /* display: none; */
  overflow: hidden;
  border-radius:0 0 10px 10px;
}

.accordion-header {
  background-color: #FFF;
  padding: 12px 45px 10px 20px;
  margin: 10px 0 0;
  transition: background .1s ease;
  cursor: pointer;
  position: relative;
  /* border-radius: 10px 10px 0 0; */
  border-radius: 10px;
}

.accordion-header::before,
.accordion-header::after{
  position:absolute;
  content:'';
  top:1px;
  right:20px;
  bottom:0;
  width:12px;
  height:2px;
  margin:auto;
  background:#151E2F;
}
.accordion-header::after{
  transform:rotate(-90deg);
  transition:transform 0.3s;
}
.accordion-header.active::after{transform:rotate(0deg);}

.accordion-content {
  background-color: #e6e6e6;
  padding: 12px 20px 10px;
}

/* .accordion-header span,
.accordion-content span{
  position: relative;
} */

/* hover */
.accordion-header:hover {
  background-color: #F2F2F2;
}

@media screen and (min-width: 768px) {

body{
  width: 100%;
  max-width: none;
  border: none;
}


#top {
    background-image: url(../img/main.png);
    background-position: top center;
    min-height: 400px;
}

#top .titlebox{
 top: 200px;
}

.toptitle{
  display: block;
  width: 500px;
  margin: 0 auto;
}

.toptitle.en{
  width: 400px;
}

.langselect{
  position: fixed;
}

#top h2{
  top: 180px;
}

.wave.en{
  margin-bottom: 30px;
}

#sec01 .left{
  width: 56%;
}

#sec01 img{
  width: 35%;
}

#sec01 h2{
  width: 100%;
}

.campaign{
    padding: 20px 40px;
}

.attention {
  padding: 20px 70px;
}

.camp_title{
    margin: 10px;
    margin-left: 40px;
}

.present{
  width: 80%;
}

.present_a .img40{
  width: 130px;
}


.camp_date{
  width: auto;
}

.oubo_souki p{
        margin: 0;
        margin-right: 20px;
        padding: 15px 20px;
        width: 320px;
}

.about{
  width: 750px;
  clip-path: polygon(20px 0, 730px 0, 100% 20px, 100% 330px, 730px 100%, 20px 100%, 0 330px, 0 20px);
}

#sns_list{
  margin: 0 10px;
  top: 0;
}

.sns_list .instagram-media{
  width: 340px!important;
  max-width: 400px!important;
}

.floatbtn{
 right: 20px; 
 bottom: 10px;
}

.floatbtn .btn1{
  width: 150px;
  height: 150px;
}

.floatbtn .btn1::before{
  transform: scale(0.75);
}

.line {
  width: 350px!important;
  margin: 10px;
}

.box1,.content_list{
  max-width: 1000px;
  margin: 0 auto;
}

footer{
  padding-bottom:0px;
}

}

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


#top {
    min-height: 650px;
}


#top .titlebox{
  position: relative;
  top: 340px;

}

.toptitle{
  width: 620px;
  background-color: #56313155;
  border-radius: 25px;
  padding: 10px;
  margin: 0;
    position: relative;
    left: 12vw;
}

.toptitle.en{
  width: 500px;
}

#top h2{
  top: 350px;
}


.about{
  width: 900px;
  clip-path:polygon(20px 0, 880px 0, 100% 20px, 100% 330px, 880px 100%, 20px 100%, 0 330px, 0 20px);
}

#sns_list{
  margin: 0 auto;
  max-width: 1200px;
  top: -20px;
}

.present_a{
  width: 90%;
}

}