@charset "utf-8";

/* +++++++++++++++++++++++++++++++

 feature.css
 Smartphone用

+++++++++++++++++++++++++++++++ */
/*



特集全体
-----------------------------------*/

/* 全体の背景色、背景画像を指定 */
.feature { background:#FFF; }


/*
特集ヘッダー：通常
-----------------------------------*/

/* TOPバナーの表示切替設定 */
@media screen and (max-width:767px) {
.img-pc { display: none; }

.img-sp {
     display: block;
     width:100%;
}
}

.image_point {
    height: 200px;
    width: 80%;
    margin: 0 auto 30px;
}

.image_point img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}


/*
複数カラム用ボックス
-----------------------------------*/

/* カラム要素囲みボックスの背景色、背景画像を指定（ページ内共通） */
.wrap_column { background:none; }

/* 背景色、背景画像を指定できます（ページ内共通） */
.wrap_column .inner {    
    background: none;
 }

/* 複数カラム共通要素のフォントカラーを指定（ページ内共通） */
.wrap_column .title { 
    text-align:center;
    color: #333; 
    margin: 10px 0;
}


/*
１カラム用ボックス
-----------------------------------*/

/* 背景色、背景画像を指定。ページ内同一カラム共通（ページ内共通指定を上書き）  */
.box_col1 { 
    background: #FFF;
    border-radius: 15px;
    border:solid #DFD238 2px;
    padding:10px 20px;
}

.outer .box_col2 .inner:first-child{ 
    border:none;
    padding:0;
}

.outer .box_col2 .inner:last-child{ border:solid #803953 1px;}

.outer .box_col2 { margin-top: -30px;}

.box_col1 .image {
    max-width: 300px;
    margin-bottom: 0;
}

/* 文字の位置、文字色を指定 */
.box_col1 .description .title {
    text-align:center;
　  margin-top: 0;
    padding-top: 0;
    color:#333;
    font-weight:500;
}

/*
２カラム用ボックス
-----------------------------------*/

 /* 背景色、背景画像を指定。ページ内同一カラム共通（ページ内共通指定を上書き） */
.box_col2 .inner {
    background: #FFF;
    border-radius: 15px;
    border:solid #004098 2px;
}

.box_col2 .inner.grn { 
    border: solid #6FBA2C 2px;
    margin-bottom:40px;
}

.box_col2 .inner.ble { border: solid #00A0E9 2px;}


.box_col2 .inner p.title.thisshop{
    text-align:center;
    background:#752001!important;
    color:#fff;
    padding:8px!important;
}

.box_col2 { margin-top: 0; }

.box_col2 .inner { margin-bottom: 10px; }

.box_col3 .inner { margin-bottom: 10px; }

.description .image:after{ 	float:none; }

.spec,
.shopname{ font-size:14px!important;}

p.spec{ margin-bottom:0!important; }

/* 背景色、枠線カラー、フォントカラーを指定できます */
.box_col2 .button{ margin-top:3px;}


.title_bg{
    text-align: center;
    color: #FFF;
    border-radius: 10px;
    margin-top:-25px;
    margin-right: 20px;
    margin-left: 20px;
}

.grn .title_bg { background: #6FBA2C;}

.ble .title_bg { background: #00A0E9;}


.title_bg p {
    margin:0;
    padding:5px;
}

span.bgcolor{
    background:#009944;
    margin-right:5px;
    padding:5px;
    font-weight:500;
}

.box_col3 {display:none;}

.title_sp{text-align:center;}

span.circle {
    color: #FFF;
    font-weight:500;
    background: #F0831E;
    padding: 30px;
    border-radius: 50%;
}


/*
画像の調整
-----------------------------------*/
.image_col2 {text-align:center;}

.image_point{ 
    text-align:center;
    margin-bottom:15px;
}

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

.image_col2 img{
    width:18%;
    margin:15px;
}

.ble .image_col2 {
    margin: 10px 0;
}

.box_col2 .image {
    text-align:center;
    margin-top: -30px;
    margin-bottom:10px;
}

.box_col2 .image img{
    width: 35%;
    margin: 29px 20px 10px 10px;
}


/*
背景切り返し用パーツ
-----------------------------------*/

/* 背景色、背景画像を指定できます */
.box_wide { 
    background: #fFFF;
	margin-bottom:0;
 }

.box_wide#fst{ background: #FFF; }

.box_wide#snd{ background: #FFF; }





/*
ボックスパーツ2・背景切り返し用パーツ共通
-----------------------------------*/
/* パーツ内2カラム */

.inner .box_col2 .title {
    /* フォントカラーを指定できます */
    margin: 10px 0;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    color:#333;
}




/*
見出し
-----------------------------------*/

/* 見出し1の背景色、背景画像、フォントカラーを指定 */
.heading01 {
    background: #004098;
    color: #fff;
}


h4.heading02 {
    color: #004098;
    text-align: center;
    font-size: xx-large;
    font-weight: 700;
    padding-bottom: 0;
    margin-bottom:0;
    background: #FFF;
}


/*
汎用行揃え・テキスト
これ以上の上書きがない、かつどこに配置しても指定を有効にするため、
important指定を入れています。
-----------------------------------*/

/* 強調フォントのフォントカラーを指定 */
.txt_point {  color: #00f !important; }



/*
ボックスパーツ2
-----------------------------------*/

 /* 背景色を指定できます */
.box_wide_texture {  background-color: #90acec; }

.description .title{
    color: #333;
    text-align: center;
    font-weight:500;
    padding-top:5px;
}

/*
特集フッタ
-----------------------------------*/
.feature footer {
    /* 背景色、背景画像を指定できます */
    background: #333;
}

p.footer_anounce { font-size: 11px; }