@charset "UTF-8";

.top{
    display: flex;
}

/* メインのみの設定 */
.bounenkai{
    padding: 10px;
}

.blog_news{
    width: 55%;
    height:620px;

    border: rgba(123, 24, 35,1.0);
    border-style: solid;
    border-width: 1px;
    padding: 10px;
    
}


.blog_news_like{
    display: flex;
}

.blog_news_title{
    font-size: 24px;
    white-space: nowrap;
}


.blog_news_content{
    /* zオーダーを設定するための設定 */
    position:relative;
    height: 500px;
    overflow-wrap:break-word;
    overflow-y: hidden;
    z-index: 20;
}


.white_out_box{

    position:relative;
    margin:0;
    margin-top: -40px;
    z-index: 30;

    width: auto;
    height: 40px;
    background:linear-gradient(to bottom,rgba(238, 238, 238, 0.0),rgba(238, 238, 238, 1.0));
}

.blog_link
{

    width:100%;
    height: 40px;
}

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

.store_tel_number{
    max-width: 45%;
    height: auto;
    width: auto;
    text-align: center;
    margin:10px;
}

.store_image{
    max-width:100%;
    max-height:100%;
    
}

.top{
    margin:10px;
    display: flex;
}

.tel_number{
    font-size: 32px;
}

.tel_number span{
    font-size: 60px;
    margin: 10px;
}

.phone_link{
    font-size: 24px;
}

.calender_message{
    display: block;
    height: auto;
    width: auto;
    margin:10px;
}

.calender{
    display: flex;
}

.calender table{
    height: 200px;
    flex:1;
}

.calender td{
    color: black;
}

.business_holiday{

    color: #FFCCCC;
}

/* スライドショーのCSS */
.slider {
    position:relative;
	z-index: 1;
	max-height: 320px;
}

.slider img{
    height:30vw;
    max-height: 300px;
    margin-left: auto;
    margin-right: auto;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin: 8px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}
/* サラダと文言とボタン */

.salad_message_button{

    width: 100%;
    height: 100%;
    /* 画像を左右の中央にするには内包している要素にtext-align:centerを指定する。 */
    text-align: center;
    display: flex;
    padding: 10px;
    margin: 0px;
}

.salad_image_wrapper{
    min-width: 55%;
    /* 上下の中央にするには画像要素そのものにvertical-align:middleを指定する。 */
    text-align: center;

}

.salad_image_wrapper img{
    max-width: 100%;
    vertical-align: middle;
}

.salad_message_button_wrapper{
    min-width: 45%;
    min-height: 600px;
    display: block;
    padding-top: 150px;
}

.other_link{
    display: flex;
    /* 等間隔揃えにする */
    justify-content: space-between;
    padding:10px;
}

.image_link>div>#access_parag{
    font-size: 28px;
    color: rgba(123, 24, 35,1.0);
    text-shadow: 4px 4px 0px white;
}

@media (max-width:767px)
{
    .top{
        display: block;
    }

    .blog_news{
        min-width: 100%;

    }

    .store_image{
        margin-left: 0px;
        margin-top: 1px;
    }

    .store_tel_number{
        max-width: 100%;
    }

/* カレンダーとジャーサラダ写真 */
    
    .tel_number{
        font-size: 20px;
        text-align: center;
    }

    .tel_number span{

        font-size: 38px;
    }

    .phone_link{
        font-size: 20px;
    }

    .salad_message_button{
        display: block;
    }

    .other_link{
        display: block;
    }

    .other_link div{
        display: block;
    }

}