@charset "utf-8";

/* ===========================================================================
    takeout
=========================================================================== */
.footer { margin-top:0; }

/* [pagetitle] ----------------------------------------*/
.pagetitle { background:url(../img/img-pagetitle-001.jpg) 0 50% / cover no-repeat; }

/* [takeout-area] -------------------------------------*/
.takeout-area { margin:74px 0 0; }
.takeout-area .inner { position:relative; padding:0 0 0 284px; }
.takeout-area h2 { font-weight:normal; letter-spacing:0.12em; width:201px; position:absolute; top:0; left:0; margin:0; }
.takeout-area h2 .en { border-bottom:4px solid #000; display:block; font-size:14px; padding:0 0 6px; }
.takeout-area h2 .ja { display:block; font-size:39px; line-height:1.3; white-space:nowrap; -ms-writing-mode:tb-rl; writing-mode:vertical-rl; position:absolute; top:54px; left:50%; transform:translate(-50%, 0); padding:0 0 88px; }
.takeout-area h2 .ja::before { background:url(../../common/img/ico-title-001.png) 0 0 no-repeat; content:""; width:58px; height:58px; position:absolute; left:50%; bottom:0; margin:0 0 0 -29px; }
.takeout-area h2 .ja rt { font-size:14px; margin:0 0 0 5px; }
.takeout-area .clm-l { width:440px; }
.takeout-area .clm-l p { font-size:14px; line-height:2.14; }
.takeout-area .clm-l .large { font-size:17px; line-height:2.31; }
.takeout-area .clm-r { width:352px; }
.takeout-area .clm-r p { font-size:12px; text-align:center; }
.takeout-area .clm-r p img { margin:0 0 5px; }
.takeout-area .takeout-menu { clear:both; display:flex; justify-content:space-between; font-size:14px; margin:55px 0 0; }
.takeout-area .takeout-menu div { width:378px; }
.takeout-area .takeout-menu h3 { border:2px solid #757575; font-size:24px; text-align:center; letter-spacing:0.2em; line-height:56px; width:238px; position:relative; }
.takeout-area .takeout-menu h3::before { border:1px solid #757575; content:""; position:absolute; top:2px; left:2px; right:2px; bottom:2px; }
.takeout-area .takeout-menu p { margin:10px 0 0; }
.takeout-area .takeout-menu table { width:100%; margin:0; }
.takeout-area .takeout-menu table th,
.takeout-area .takeout-menu table td { padding:4px 0; }
.takeout-area .takeout-menu table tbody tr { background-image:linear-gradient(to right, #bcbcbc, #bcbcbc 2px, transparent 2px, transparent 4px); background-size:4px 1px; background-repeat:repeat-x; }
.takeout-area .takeout-menu table th { font-weight:normal; }
.takeout-area .takeout-menu table tbody th { white-space:nowrap; }
.takeout-area .takeout-menu table td { text-align:center; }
.takeout-area .catering { margin:50px 0 0; }
.takeout-area .catering h3 { font-size:24px; }
.takeout-area .catering .large { font-size:17px; }
.takeout-area .catering .price { border:5px solid #f0f0f0; margin:30px 0 0; padding:15px 10px; }
.takeout-area .catering .price p { font-size:17px; text-align:center; margin:0; }

/* [order-area] ---------------------------------------*/
.order-area { background:#f0f0f0; border-top:3px solid #757575; margin:138px 0 0; padding:32px 0 58px; }
.order-area .inner { position:relative; }
.order-area h2 { background:#fff; border:2px solid #757575; font-size:24px; text-align:center; letter-spacing:0.2em; line-height:56px; width:274px; position:absolute; top:-101px; left:50%; margin-left:-139px; }
.order-area h2::before { border:1px solid #757575; content:""; position:absolute; top:2px; left:2px; right:2px; bottom:2px; }
.order-area .order { background:#fff; border:1px solid #757575; text-align:center; margin:37px 0 0; padding:19px 20px 35px; }
.order-area .order h3 { font-size:24px; font-weight:normal; margin:0; }
.order-area .order h3 + p { font-size:14px; margin:7px 0 24px; }
.order-area .order ol { color:#fff; display:flex; justify-content:center; font-size:14px; line-height:41px; margin:20px 0 0; }
.order-area .order ol li { background:#be2828; list-style:none; min-width:170px; position:relative; margin:0 0 0 35px; padding:0 35px; }
.order-area .order ol li:first-child { margin:0; }
.order-area .order ol li::before { border-top:2px solid #757575; border-right:2px solid #757575; content:""; width:9px; height:9px; position:absolute; top:15px; left:-26px; transform:rotate(45deg); }
.order-area .order ol li:first-child::before { display:none; }
.order-area .order .btn { font-size:18px; line-height:48px; width:249px; margin:31px auto 0; }
.order-area .order .btn a { color:#fff; display:block; text-decoration:none; }
.order-area .order .btn a:hover,
.order-area .order .btn a:active { opacity:0.6; }
.order-area .order.mail .btn a { background:url(../img/ico-mail.png) 35px 17px no-repeat #ff7800; padding-left:40px; }
.order-area .order.tel .btn a { background:url(../img/ico-tel.png) 20px 15px no-repeat #ff7800; padding-left:20px; }
.order-area .rice { font-size:14px; margin:57px 0 0; }
.order-area .rice li { margin-top:6px; }
.order-area .foodpanda { font-size:18px; margin:35px 0 0; }

@media screen and (max-width: 598px) {
/* [pagetitle] ----------------------------------------*/
.pagetitle { background-image:url(../img/img-pagetitle-001_sp.jpg); }

/* [takeout-area] -------------------------------------*/
.takeout-area { margin:5px 0 0; }
.takeout-area .inner { padding:0 20px; }
.takeout-area h2 { width:100px; position:static; margin:0 auto; }
.takeout-area h2 .en { border-bottom:2px solid #000; font-size:7px; padding:0 0 2px; }
.takeout-area h2 .ja { font-size:19px; top:30px; padding:0; }
.takeout-area h2 .ja::before { display:none; }
.takeout-area h2 .ja rt { font-size:7px; }
.takeout-area h2 + p { padding:130px 0 0; }
.takeout-area .clm-l { width:auto; }
.takeout-area .clm-l p { font-size:12px; }
.takeout-area .clm-l .large { font-size:15px; }
.takeout-area .clm-r { width:auto; margin:30px 0; }
.takeout-area .takeout-menu { display:block; margin:55px 0 0; }
.takeout-area .takeout-menu div { width:auto; margin:50px 0 0; }
.takeout-area .takeout-menu h3 { font-size:18px; line-height:43px; width:200px; margin:0 auto; }
.takeout-area .takeout-menu table td { white-space:nowrap; }
.takeout-area .takeout-menu table tbody th { white-space:normal; }

/* [order-area] ---------------------------------------*/
.order-area { border-top:2px solid #757575; margin:92px 0 0; padding:10px 0 30px; }
.order-area h2 { font-size:18px; line-height:43px; width:209px; top:-74px; margin-left:-104px; }
.order-area .order h3 { font-size:18px; }
.order-area .order h3 + p { text-align:left; }
.order-area .order ol { display:block; line-height:1.3; }
.order-area .order ol li { margin:35px 0 0; padding:10px; }
.order-area .order ol li::before { top:-25px; left:50%; transform:rotate(135deg); margin-left:-5px; }
.order-area .order .btn { width:auto; }
.order-area .rice { margin:40px 0 0; }

}