@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

body,#copyright{
  font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.hannari{
    font-family: 'Dela Gothic One',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.font_14{
    font-size:17px;
}


/*--all page---------------------------
-------------------------------------*/
#body{
    overflow:hidden;
}
#pc_nav li, 
#top_pc_nav li,
#footer_nav li {
    max-width: 100%;
}
#pc_nav li a{
    color:#333;
    text-shadow:2px 2px white;
}
#wrap{
    background-color:#f8fbf8;
}
#footer_con h2{
    display:none;
}

/*--top page---------------------------
-------------------------------------*/
.num{
    display:none;
}
#intro{
    background:url(./Dup/img/bg_logo.png) no-repeat center center/auto;
}
#intro h3{
    font-size:55px;
    position: relative;
    z-index: 2;
}
#intro h3:first-letter{
    font-size:100px;
    letter-spacing: 15px;
}
#intro .line:before, #contents3 .line:before{
  display:none!important;
}
#contents1{
    margin-bottom:100px;
}
#contents1 h3,
#contents2 h3,
#contents3 h3{
    font-size:40px;
}
.main_back1{
    background-image:url(./Dup/img/bg1.png),url(./Dup/img/bg2.png);
    background-repeat:no-repeat,no-repeat;
    background-position:top left,bottom left;
    background-size:100% auto,100% auto;
}
.back1:before{
    background-color: transparent!important;
}
.ramen1{
    top: -4%;
    left: -2%;
    z-index: 1;
    width: 24vw;
}
.sand1{
    top: 42%;
    right: -3%;
    width: 23vw;
    z-index: 1;
}
.back2:before{
    background-color:transparent!important;
    width:100%;
    height:1517px;
    background-image:url(./Dup/img/bg3.png);    
}
.car{
    top:-60%;
    right:10%;
    width:12vw;
    z-index:2;
    animation: swing 1s steps(2, start) infinite;
}
@keyframes swing{
    0%{
        transform:rotate(-5deg);
    }
    100%{
        transform:rotate(5deg);
    }
}
.garant{
    top:-50%;
    right:-20%;
    z-index:2;
    width:20vw;
}
.beer1{
    top:-2%;
    left:5%;
    width:5vw;
    animation: swing 1s steps(2, start) infinite;
    z-index:2;
}
.beer2{
    top:-5%;
    left:11%;
    width:5vw;
    animation: swing2 1s steps(2, start) infinite;
    z-index:3;
}
@keyframes swing2{
    0%{
        transform:rotate(5deg);
    }
    100%{
        transform:rotate(-10deg);
    }
}
#contents3_wrap:before{
    background-position: top center;
}

#contents3_wrap:after{
  background-color: rgba(160,110,85,0.5);
}
#contents3 .con_box{
    background-color: rgba(255,255,255,0.5);
}
#contents3 .con_title{
  margin-top:40px;
}
#top_cms{
  padding-top:100px;
}



/*--under page---------------------------
-------------------------------------*/
.map_title{
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -7%;
}
.youtube_box{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube_box iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/*map*/
#map{overflow: hidden;}
#map iframe{margin-top:-55px;margin-left: -2px;}


/* ---------- responshive ---------- */
@media screen and (max-width: 1500px){
.sand1 {
    top: 45%;
}
.car {
    top: -45%;
}
.garant {
    top: -30%;
}
}



@media screen and (max-width: 1280px){
#intro h3{
    font-size:45px;
}
#intro h3:first-letter{
    font-size: 80px;
}
}

@media screen and (max-width: 1050px){
.sand1 {
    top: 50%;
    width: 30vw
}
.car {
    top: -30%;
    right: 20%;
    width: 15vw;
}
.garant {
    top: -27%;
    right: -35%;
    width: 30vw;
}
}




/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.main_back1{
    background-position: top left,top 45% left;
}
#intro{
    margin-bottom: 100px
}
.ramen1{
    left: auto;
    right: -5%;
    width: 30vw;
    top: -5%;
}
.sand1{
    right: auto;
    left: -7%;
    width: 40vw;
    top: 42%;
}
.car {
    top: -40%;
    width: 22vw;
    right:-1%;
}
.garant {
    top: -30%;
    right: -4%;
    width: 35vw;
}
.beer1{
    width:8vw;
}
.beer2{
    width:8vw;
    left: 15%;
}
#intro h3 {
    font-size: 40px;
}
#contents2 .con_box {
    margin-top: 2%;
}
#contents3 h3{
    font-size:37px;
}
#contents3 .con_title {
    margin-top: 70px;
}
.con_img{
    margin:auto;
    margin-bottom:20px;
}
.nav_menu_more:nth-child(2){
  display:none;
}
.page9 .page_title_box h2{
  letter-spacing:2px!important;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.main_back1 {
    background-position: top left,top 45% left;
}
#intro {
    background: url(./Dup/img/bg_logo.png) no-repeat top -1% center/100%;
}
#intro_wrap {
    padding-top: 23%;
    background: url(./Dup/img/con1.png) no-repeat top 5% center/30%;
}
#intro h3 {
    font-size: 30px;
}
#intro h3:first-letter{
    font-size: 50px;
}
.ramen1{
    width: 50vw;
    top: -2%;
}
.sand1{
    top: auto;
    bottom: -5%;
    width: 53vw;
    right: -10%;
    left: auto;
}
.car {
    top: -52%;
    width: 33vw;
}
.garant {
    top: -37%;
    right: auto;
    width: 50vw;
    left: -5%;
}
.beer1 {
    width: 15vw;
}
.beer2 {
    width: 15vw;
    left: 22%;
}
#contents1 h3{
    font-size: 25px;
}
#contents2 h3{
    font-size: 28px;
}
#contents3 h3 {
    font-size: 30px;
}

.page_title_box h2{
  letter-spacing:2px!important;
}
#cms_2-c .cate_title{
  letter-spacing:1px!important;
}
.page9 .page_title_box{
  width: 60%!important;
}
.page9 .page_title_box h2{
  letter-spacing:0!important;
  font-size:21px!important;
}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){
#contact_tel a{
  padding-top:35px;
}
}




/*20210616*/
#intro .bnr{display:none;}