/*
Theme Name: ramen-Thema
Author: ramen
*/

@charset "UTF-8";

/*main*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
}

body{
    font-family: "Noto Sans JP" , "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
    font-size: 1.5rem;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    height: 100%;
    background: #000;
    color: #FFF;
    box-sizing: border-box;
}

@media screen and (max-width: 1080px){
body {
    font-size: 1.3rem;
}
}

ul{
    list-style: none;
}

.ramen{
    background: url(../img/ramen_new/bg_bg2.jpg) no-repeat top left #000;
    width: 100%;
    background-size: 100%;
    position: relative;
    overflow: hidden;
}

*, *:before, *:after {
    box-sizing: border-box;
}

a:link {
    color: #1b63a0;
    text-decoration: underline;
}

img, a {
    vertical-align: top;
}

/*header*/
.sec-lead {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ren_ramen #rnw_content {
    margin: 0 auto;
    position: relative;
    z-index: 12;
}

.sec-lead > div {
    width: 48%;
    text-align: center;
}

.ttl_ren_ramen {
    margin: 10px;
}

#shop_maintxt {
    margin: 10px;
}

#shop_maintxt img {
    width: 450px;
    height: auto;
}

#tr_ren_ramen {
    margin-top: -200px;
}

.ren_ramen img {
    max-width: 100%;
}

#tr_ren_ramen .tyoumi {
    margin-top: 2rem;
}


/*contents*/
#contents{
    width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.wrapper{
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 0 10px;
}

.ramen .recommend{
    padding: 6% 0 0;
}

/*検索機能*/
.flexarea{
    display: flex;
    justify-content: center;
}

.txt_search{
    font-family: 'Yuji Boku', serif;
    color: #000;
    text-align: center;
    margin-bottom: 20px;
}

.search_ramen{
    background: url(./image/ramen_search.png);
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 7px #956d3c;
}

@media screen and (max-width: 1200px){
.search_ramen > div {
    display: block;
}
}

@media screen and (max-width: 1200px){
.search_area {
    border-right: none;
    border-bottom: 1px solid #666666;
    padding-bottom: 4%;
    margin-bottom: 4%;
}
}

.search_ramen .txt-search{
    text-align: center;
    margin-bottom: 20px;
}

/*エリア検索*/

.search_area{
    width: 65%;
    border-right: 1px solid #666666;
}

.search_area_map{
    display: block;
}

.clearfix{
    display: block;
}


.pct_map {
    float: left;
}

.pct_map img{
    height: 400px;
    width: 400px;
}

.search_area ul{
    padding: 0 2rem 0 0;
    margin-right: -0.5rem;
    margin-left: 181px;
}

.search_area li{
    display: flex;
    flex-wrap: wrap;
}

.search_area li,  .search_taste li, .search_category li{
    padding: 0.5rem;
    background: #fff;
    width: calc(100%/2 - 0.5rem);
    margin: 0 0.5rem 0.5rem 0;
    border: 2px solid;
    border-radius: 10px;
    text-align: center;
    font-size: 0.9rem;
    color: #000;
    box-sizing: border-box;
    font-weight: bold;
    display: table;
    cursor: pointer;
}


/*濃厚度検索*/
.search_taste {
    margin-left: 20px;
    width: 20%;
}

@media screen and (max-width: 1200px){
.search_taste {
    margin: 0 auto;
    max-width: 620px;
}
}

@media screen and (max-width: 1200px){
.search-area, .search-taste {
    width: 100%;
}
}

.search_taste > .ramen_select{
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.azi:checked{
    background: #DC1B28;
}

/*味の種類*/
.search_category{
    width: 20%;
}

.ramen_search{
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}

/*検索ボタン*/
@media screen and (max-width: 1200px){
.search_ramen .search_btn {
    margin-top: 4%;
}
}

.search_ramen .search_btn {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

@media screen and (max-width: 1200px){
.search_btn p {
    margin: 0 1rem;
}
}

.search_btn p {
    margin: 0 2rem;
    width: 300px;
}

.btn_clear_ramen button {
    background: #000;
}

.btn_clear_ramen button, .btn_search_ramen button {
    box-sizing: border-box;
    padding: 15px 10px;
    display: block;
    border: 2px solid #fff;
    font-size: 20px;
    color: #fff;
    width: 100%;
    border-radius: 10px;
}

.btn_area_ramen button {
    cursor: pointer;
}

.btn_search_ramen button {
    background: #DC1B28;
}

/*記事反映ページ*/
.ramen_ttl{
    text-align: center;
    font-family: 'Yuji Boku', serif;
    font-size:30px;
    font-weight: 700;
    margin: 30px;
    position: relative;
    padding: 1.5rem;
    border: 2px solid #fff;
}

.postlist{
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    margin-right: -2.3529411765%;
    padding-left: 0;
    list-style-type: none;
}

/*フッター手前ラーメン画像*/
#btm_logo{
    text-align: center;
}