@charset "UTF-8";

/* -------------------------------
　   メディアクエリ media query
----------------------------------*/

/* =======================================================
　★★★★★★PC用CSS
==========================================================*/

@media screen and (min-width: 769px) {

.chef_lead { font-size:18px; line-height:230%; }
.chef_exp { font-size:14px; line-height:230%; }

.waku_process { width:100%; border:solid 1px #CCC; text-align:center; }
.ttl_process { font-size:22px; line-height:230%; padding-bottom: 10px; border-bottom:dotted 1px #FFF; }
.process { width:90%; margin:30 auto; padding: 15px 20px; text-align: left; color:#333; background: #EEE; }
.number_process { font-size:40px; text-align:left; }

.fac { display: -webkit-flex; display: flex; margin: 10px 0px 10px 0px; }
.fac1 {
    padding: 10px 20px;
    text-align: left;
    width: 20%;
    font-size: 15px;
    color: #FFF;
    background: #71767a;
    margin-right:10px;
}
.fac2 {
    padding: 10px 20px;
    text-align: left;
    width: 77%;
    font-size: 15px;
    color: #333;
    background: #FFF;
    margin-right:0px;

}
.pic_parent { display:flex; margin-bottom: 12px; }
.pic_child { flex-grow: 1; } 
.dot_line_chef { padding: 5px 0px 3px 0px; border-top: dotted 1px #555555; border-bottom: dotted 1px #555555; margin: 10px 0px; }
.chef_pic { width:270px; margin-bottom: 3px; }

.box {
  display: flex;
  flex-wrap: wrap;
}
.box>* {
  flex: 1 1 160px;
}

}

/* =======================================================
　★★★スマホ用CSS
==========================================================*/

@media screen and (max-width: 768px) {

body { width:100%; font-size:15px; }

.chef_lead { font-size:16px; line-height:200%; }
.chef_exp { font-size:12px; line-height:180%; }

.waku_process { width:100%; border:solid 1px #CCC; text-align:center; font-size:15px; }
.ttl_process { font-size:20px; line-height:230%; padding-bottom: 10px; border-bottom:dotted 1px #FFF; }
.process { width:90%; margin:20px auto; padding:5px 0px; text-align: left; color:#333; background: #EEE; }
.process_pic { width:90%; margin:20px auto; padding:5px 0px; text-align: center; }
.process_inner { width:90%; margin:10px auto; padding:5px 0px; line-height:180%; }
.number_process { font-size:40px; text-align:left; }                

.fac { display: -webkit-flex; display: flex; margin: 10px 0px 10px 0px; }
.fac1 {
    padding: 10px 20px;
    text-align: left;
    width: 20%;
    font-size: 15px;
    color: #FFF;
    background: #555555;
    margin-right:10px;
}
.fac2 {
    padding: 10px 20px;
    text-align: left;
    width: 77%;
    font-size: 15px;
    color: #333;
    background: #FFF;
    margin-right:0px;

}

.dot_line_chef { padding: 5px 0px 3px 0px; border-top: dotted 1px #555555; border-bottom: dotted 1px #555555; margin: 10px 0px; }
.chef_pic { width:100%; margin-bottom: 3px; }

.box {
  display: flex;
  flex-wrap: wrap;
}
.box>* {
  flex: 1 1 160px;
}

}