@charset "utf-8";

/***obi***/
#obi{
    padding: 0.5em;
}
#obi .PC{
    max-width: 80%;
    margin: 0 auto;
}

/*** header***/
#header {
    background-image: url("../img/bg_header.jpg");
    background-size: 100%;
}
#header .inner{
    max-width: 900px;/*1453px*/
    margin: 0 auto;
}
#header h1{
    line-height: 0em;
}









/** 背景変更用**/

/*#wrapper1,2はcommonで定義*/



#wrapper3{
    background-color: #ffd200;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffe12f+21,ffe12f+77,ffffff+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #ffd200 21%, #ffd200 77%, #ffd200 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#ffd200 21%,#ffd200 77%,#ffd200 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#ffd200 21%,#ffd200 77%,#ffd200 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    
}
#wrapper3 .wrap_in{
    background-image: url("../img/wagara02.png");
    background-size: 30%;
}


#wrapper4{
    background-color: #b55c1e;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,b55c1e+40,bd732f+100 */
background: #b55c1e; /* Old browsers */
background: -moz-linear-gradient(top,  #ffd200 0%, #bd732f 80%, #ba6f2c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffd200 0%, #bd732f 80%, #ba6f2c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffd200 0%, #bd732f 80%, #ba6f2c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bd732f',GradientType=0 ); /* IE6-9 */

    
}
#wrapper4 .wrap_in{
    background-image: url("../img/wagara03.png");
    background-size: 6%;
 
}


#wrapper5{
    background-color: #ffc770;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ca843c+0,ffc770+40 */
background: #ca843c; /* Old browsers */
background: -moz-linear-gradient(top, #ba6f2c 0%,  #ca843c 10%, #ffc770 40%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ba6f2c 0%,  #ca843c 10%,#ffc770 40%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ba6f2c 0%,  #ca843c 10%,#ffc770 40%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ca843c', endColorstr='#ffc770',GradientType=0 ); /* IE6-9 */

    
}
#wrapper5 .wrap_in{
    background-image: url("../common/img/wagara01.png");
    background-size: 10%;
}


.btn{
    margin: 0 2em;
}





/*** blocks ***/
.blocks{
    padding: 1em;
}
.blocks h2{
    text-align: center;
}

/** banner **/

.banner{
    padding: 0 1em 1.5em 1em;
	font-size: 1.25rem;
}
.banner img{
    border: 3px solid #FFF;
}

.banner ul{
    background: rgba(255,255,255, 0.8);
    border-radius: 0.5em;
    padding: 0.5em 1em;
}
.banner li a{
    display: block;
    font-weight: normal;
    text-decoration: none;
    padding: 0.5em 0;
}
.banner li a:hover{
    text-decoration: underline;
}



/* bnr 221118追加*/
.banner .bnr{
    max-width: 1000px;
    width: 100%;
    margin: 2em auto;
    padding: 1.5rem .4rem;
    border: orange 4px solid;
    background-color: #fff;
    border-radius: 15px;
    font-size: 70%;
}
.bnr a:link, .bnr a:visited{
    text-decoration: none;
    color: #000;
}

.bnr a:hover{
    color: orangered;
}




/** banner_area  **/
#banner_area{
    padding: 0 1em 1.5em 1em;

}
#banner_area img.bnr{
    outline: 10px solid white ;
    outline-offset: -10px;
}

/* Ensure all banner images have consistent sizing */
#banner_area img{
    width: 100%;
    max-width: 1024px;
    height: auto;
    display: block;
    margin: 0 auto;
}


/** tokucyo **/
#tokucyo{
    padding: 0 5px;/*背景とバランス*/
    margin-top:8%;
}
#tokucyo .inner{
    padding: 0 1em;/*背景とバランス*/
    background-color: #FFF;
    border-radius: 5px;
    border-top:1px solid #FFF;/*バグ修正*/
}
#tokucyo h2{
    margin-top: -13%;
}
#tokucyo > ul li{
    padding-top: 1em;
}
#tokucyo .btn{
    margin-top: 2em;
}


/** lineup **/
#lineup{
    /*background: rgba(255,255,255, 0.5);*/
    background: #FFF;
    margin-top: 2em;
}
#lineup h2{
}
.price{
    text-align: right;
    margin-top: -0.5em;
    padding-bottom: 1em;
}
#lineup > ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#lineup > ul > li{
    width:46%;
}


#lineup h3{
    line-height: 1.2em;
    margin-bottom: 0.3em;
    padding:0 0 0 0.2em;
    min-height: 3em;
    display: flex;
    align-items: center;
    font-size: 75%;
}
#lineup h3::before{
    float:left;
}

#lineup h3::before{
    float:left;
}

#lineup li h3{
    background: -moz-linear-gradient(left, #FFF 30%, #d8101d);
    background: -webkit-linear-gradient(left, #FFF 30%, #d8101d);
    background: linear-gradient(to right, #FFF 30%, #d8101d);
}
#lineup #ex li h3{
    background: -moz-linear-gradient(left, #FFF 30%, #91BA58);
    background: -webkit-linear-gradient(left, #FFF 30%, #91BA58);
    background: linear-gradient(to right, #FFF 30%, #91BA58);
}



#lineup li h3::before{
    content: url("../img/m_hana.png");
    padding-right: 0.3em;
}


#lineup h4{
    line-height: 1.2em;
    min-height: 3em;
    display: flex;
    align-items: center;
    font-size: 100%;
}

#lineup h4 img{
    vertical-align: middle;
    padding-right: 0.2em;
    height: 2em;
}
#lineup > ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
#lineup > ul > li{
    margin-bottom: 3em;
}

.btnset li{
    padding: 0.3em 0;
    text-align: center;
}


/**20250512 ins**/
.btns{
	margin-top: 0.5em;
}

/***modal***/

.modalwin{
	display: none;/*初期設定*/
}

.modaal-container{/*自動付加*/
	/*background: #000 !important;/*上書き*/
}

.modaal-content-container{/*自動付加*/
	padding: 10px 30px !important;/*上書き*/
	/*background: #000 !important;/*上書き*/
}
.modaal-content-container li{
	text-align: center;
	padding: 1em 1em;
	max-width: 500px;
	margin: 0 auto;
}
.modaal-content-container li a{
	display: block;
	background-color: #d2171e;
	color: #FFF;
	border-radius: 0.5em;
	text-decoration: none;
	padding: 1em;
    font-size: 110%;
}

.modaal-content-container li a:hover{
	background-color: #F1C05E
}


.modaal-container p{
    color: #FFF;
    text-align: center;
}

/** /20250512 ins**/





/** tubuyaki **/
#tubuyaki{
    text-align: center;
    position: relative;
    padding-bottom: 4em;
}
#tubuyaki::before{
    content: '';/*何も入れない*/
    display: inline-block;
    width: 15%;
    height: 28%;
    background-image: url(../img/ill_hani.png);
    background-repeat: no-repeat;
    background-size:contain;
    background-position: left bottom;
    vertical-align: middle;    
    position: absolute;
    bottom:1em;
    left:0;
}
#tubuyaki::after{
    content: '';/*何も入れない*/
    display: inline-block;
    width: 25%;
    height: 30%;
    background-image: url("../img/ill_dogi.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size:contain;
    vertical-align: middle;    
    position: absolute;
   bottom:1em;
    right:0;
    text-align: right;

}
#tubuyaki h2{
    text-align: center;
}
#tubuyaki ul{
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    background: #FFF;
    height: 300px;
    overflow:scroll;
    overflow-x: hidden;
    padding: 20px 15% 20px 10%;
    border: 1px solid #CCC;
}
#tubuyaki li{
    padding: 0.5em;
    width: 100%;
    border-bottom: 1px dotted #CCC;
}

#tubuyaki li .date{
    display: block;
    margin-bottom: 0.5em;
}
#tubuyaki li .title{
    display: block;
}

/*wallpaper*/
#wallpaper{
    padding-bottom: 2em;
}
#wallpaper h3{
    width:90%;
    margin: 0 auto;
}
#wallpaper ul{
    display: flex;
    justify-content:space-around;
}
#wallpaper li{
    padding: 0 1em;
    font-size: 80%;
}



/** special_area **/
#wrapper4 .wrap_in{
    padding: 2em 0 3em 0;
}
#special{
    border: 3px solid #9f7b38;
    background:url("../img/wagara04.png"); 
    margin-top: 10%;
    width:96%;
}
#special h2{
    margin-top: -15%;
}
#special ul{
    display: flex;
    justify-content: space-between;
}
#special li{
margin: 0 auto;/*スペシャル増えたら外す*/
    width: 48%;
}

/** news twitter **/
#news{
    padding-top: 2em;
}
#twitter_box{
    height:30em;
    overflow-y: scroll;
    margin: 0.5em auto 0 auto;
    max-width: 670px;
}

/*corr*/
#corr a{
    display: block;
    background-color: #4CBA75;border: 2px solid #3fae68;
    border-radius: 0.5em;
    color: #FFF;
    max-width: 670px;
    text-align: center;
    width:10em;
    margin: 1em auto;
    padding: 0.3em 0;
    text-decoration: none;
}
#corr a:hover{
    text-decoration:underline;
}



/** movie_area **/

#movie_area h2 {
display: inline-block;
  position: relative;
  padding: 1em 2em;
  color: #fff;
  background: #925c91;
  font-size: 100%;
  transform: rotate(-5deg);
  box-shadow: 3px 3px 0px 0 rgb(255, 255, 255);
}

#movie_area h2:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #925c91 transparent transparent transparent;
}

#movie_area li{
    padding: 1em 0;
}

/** snsButtons **/
.snsButtons{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
}
.snsButtons li{
    padding: 0.3em;
}
.snsButtons li:nth-of-type(1) i{
    color: #1da1f2;
}
.snsButtons li:nth-of-type(2) i{
    color: #3b5998;
}
.snsButtons li:nth-of-type(3) i{
    color: #1dcd00;
}
.snsButtons li:nth-of-type(4) i{
    color: #F70000;
}




/*------------------------------------------------------
	mediaQuery
*-------------------------------------------------------*/
@media screen and (min-width: 640px) {

    #obi{
        padding: 1em;
    }

.banner .bnr{
    font-size: 100%;
}



    /**lineup**/
    #lineup > ul > li{
        width:23%;
    }

    #lineup h4 img{
        height: auto;
    }


/*wallpaper*/
#wallpaper{
    margin-top: -2em;
}
#wallpaper ul{
    justify-content:center;
}
#wallpaper li{
    padding: 0 2em;
}



    .SandboxRoot.env-bp-820 .timeline-Tweet-text {
        font-size: 10px !important;/*効かない*/
    }
    

}