@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:500,800|Oswald:700|Poppins:500&subset=japanese');

body {margin: 0px; padding: 0px; font-size: 14px; font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1.7; -webkit-text-size-adjust: none; color: #222; -webkit-font-smoothing: antialiased;}

#page-top {position: fixed;bottom: 40px;right: 40px;width: 60px; z-index:400;}
@media screen and (max-width: 736px) {
    #page-top {position: fixed;bottom: 5px;right: 5px;width: 30px; z-index:400;}
}

.clone-nav {position: fixed;top: 0;left: 0;z-index: 2;width: 100%;transition: .3s;transform: translateY(-100%);}
.is-show {transform: translateY(0);}
.clone-nav {text-align: center; width: 100%; background: #222;}
.clone-nav ul#naviH {text-align: center;}
.clone-nav ul#naviH li {list-style: none; text-align: center; display: inline-block;}
.clone-nav ul#naviH li a {list-style: none; display: inline-block; text-align: center; color: #FFF; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; font-size: 17px; line-height: 25px; margin: 0; padding: 10px 20px;}
.clone-nav ul#naviH li a:hover {color: #FFF; background: #2E4791;}

.ratioBox {position: relative;width: 100%;height: auto;}
.ratioBox1-1:before {content: "";display: block;padding-top: 100%; /* 1:1 */}
.ratioBox2-1:before {content: "";display: block;padding-top: 50%; /* 2:1 */}
.ratioBox3-2:before {content: "";display: block;padding-top: 66%; /* 3:2 */}
.ratioBox4-2:before {content: "";display: block;padding-top: 60%; /* 4:3 */}
.ratioBox4-3:before {content: "";display: block;padding-top: 75%; /* 4:3 */}
.ratioBoxInner {position: absolute;top: 0; left: 0;width: 100%;height: 100%;}

#header {width: 100%;}
#header .inner {background: #EF821E;}
#header h1 {font-size: 14px; float: left; color: #FFF; padding: 10px 0; line-height: 20px;}
#headBtn {float: right;}
#headBtn .icon {width: 20px; float: left; margin: 10px 0 10px 10px;}
#headLogo {width: 210px; float: left; margin: 20px 0;}
@media screen and (max-width: 1070px) {
    #headLogo {margin: 20px 0 0;}
}
@media screen and (max-width: 736px) {
    #headBtn {margin-right: 50px;}
    #header h1 {font-size: 12px; padding: 14px 0;}
    #headLogo {width: 150px; margin: 15px auto 5px; float: none;}
}
@media screen and (max-width: 380px) {
    #headBtn {margin-right: 50px; float: none;}
    #header h1 {font-size: 12px; padding: 5px 0; float: none; line-height: 1;}
    #headBtn .icon {width: 20px; float: left; margin: 0 10px 5px 0;}
}

#headArea {padding: 10px 0; width: 100%; margin: -90px auto 20px; max-width: 1100px; height: 50px;}
#headArea .inner {float: right;}
.drawer-toggle {display: none;}
.drawer-navbar {}
.drawer-container {width: auto;}
.drawer-nav {text-align: center;}
ul.drawer-menu {padding:0; margin: 0; list-style: none;}
.drawer-menu li {text-align: center; padding: 10px; margin: 0; display: inline-block; border-bottom: 3px solid #EF821E; font-family: 'M PLUS Rounded 1c', sans-serif;}
.drawer-menu li i {margin-right: 3px;}
.drawer-menu li a.drawer-menu-item {text-align: center; font-size: 16px; color: #222; line-height: 30px; font-weight: bold;}
.drawer-menu li a.drawer-menu-item:hover  {color: #EF821E; display: block;}
.drawer-menu li.spnav {display: none;}
@media screen and (max-width: 1070px) {
    #headArea {margin: 0px auto; text-align: center; height: auto;}
    #headArea .inner {float: none;}
}
@media screen and (max-width: 825px) {
    .drawer-menu li a.drawer-menu-item {font-size: 14px;}
}
@media screen and (max-width: 736px) {
    #headArea {padding: 0; z-index: 100;}
    .drawer-navbar {height: 5px;}
    .drawer-menu {background:#FFF;}
    .drawer-navbar-header button {background:#EF821E;}
    .drawer-navbar-header button:hover {background:#EF821E;}
    .drawer-menu ul { padding:0; margin: 0;}
    .drawer-menu li { border-bottom:1px solid #EEE; border-top: 1px solid #EFEFEF; line-height:50px; width: auto; text-align: left; display: block; border-left: none; padding: 0 10px;}
    .drawer-menu li:nth-child(3){margin-right: 0; border-right: none; width: auto;}
    .drawer-menu li:nth-child(6){border-right: none;}
    .drawer-menu li a.drawer-menu-item {text-align: left; font-size: 16px; font-weight: 600; color: #EF821E; line-height: 30px;}
    .drawer-menu li a.drawer-menu-item span {font-size: 14px; font-weight: normal; line-height: 20px; display: block; font-family: "游ゴシック", YuGothic, Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;}
    .drawer-menu li a.drawer-menu-item:hover  {color: #EF821E; background: #FFF; display: block;}
    .drawer-menu li.spnav {display: block;}
    .drawer-hamburger-icon{position:relative;display:block;margin-top:0; background: #CCC;}
    .drawer-dropdown-menu li { border-bottom:1px solid #71c212; border-top: 1px solid #54910d; line-height:50px;}
    .drawer-dropdown-menu a { color: #FFF; width: 96%; display: block; padding: 5px 2%; background: #5A9B0E;}
}

footer {padding: 30px 0 0; border-top: #EF821E 1px solid; margin-bottom: 50px;}
#footAdress {float: left; margin: 0; line-height: 1.7;}
#footAdress h2 {width: 210px; margin-bottom: 10px;}
#footAdress .spAdd {margin-left: 1em;}
#footAdress .tel {font-family: 'Crimson Text', serif; font-size: 30px;}
#footNavi {float: right;}
.naviR {float: right;}
#footNavi li {text-align: center; padding: 0 10px; margin: 0; display: inline-block; font-family: 'M PLUS Rounded 1c', sans-serif;}
#footNavi li i {margin-right: 3px;}
#footNavi li a {text-align: center; font-size: 16px; color: #222; font-weight: bold;}
#footNavi li a:hover {color: #EF821E;}
.footer {clear: both; text-align: center; background: #EF821E; padding: 10px 5px; color: #FFF;}
.footer a {color: #FFF;}
@media screen and (max-width: 960px) {
    footer {margin-bottom: 80px;}
    #footAdress {float: none; text-align: center;}
    #footAdress h2 {width: 150px; margin: 0 auto 10px;}
    #footNavi,.naviR {float: none; text-align: center;}
}

#footerMenu {width: 100%; background: #EF821E; height: 0px; position: fixed; z-index: 300; bottom: 0; overflow: none; left: 0; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -webkit-box-shadow: 0px -1px 10px rgba(50, 50, 50, 0.50); -moz-box-shadow: 0px -1px 10px rgba(50, 50, 50, 0.50); box-shadow: 0px -1px 10px rgba(50, 50, 50, 0.50);}
#footerMenuW {width: 560px; margin: 0 auto; padding: 10px 0;}
#footerComment {width: 175px; float: left; margin-right: 10px; margin-top: 5px;}
#footerTel {font-size: 18px; line-height: 30px; font-family: 'Oswald', sans-serif; font-weight: 700; color: #FFF; float: left;}
#footerTel span {font-size: 70%;}
#footerBtn {width: 250px; float: right; color: #222; font-size: 14px; text-align: center;}
#footerMenu.show {height: 50px;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;}
@media screen and (max-width: 600px) {
    #footerMenuW {width: 90%; margin: 0 auto; padding: 10px 0;}
    #footerComment {width: 150px; margin: 5px 0;}
    #footerTel {float: right;}
    #footerBtn {width: 80%; float: none; clear: both; margin: 0 auto;}
    #footerMenu.show {height: 80px;}
}

.container {width: 95%; max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;}
.widecontainer {width: 97%; max-width: 1122px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; z-index: 1;}
.smallcontainer {width: 95%; max-width: 770px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;}
.mlr15 {margin-left: 1.5%; margin-right: 1.5%;}
.col1 {width: 98%; margin-left: 1%; margin-right: 1%;}
.col2 {width: 48%; margin-left: 1%; margin-right: 1%; float: left;}
.col3 {width: 31.33%; margin-left: 1%; margin-right: 1%; float: left;}
.col3mana {width: 30.33%; margin-left: 1.5%; margin-right: 1.5%; float: left;}
.col3mn {width: 33.33%; float: left;}
.col3mr {width: 63.66%; margin-right: 3%; float: left;}
.col4,.col4bb {width: 23%; float: left;}
.col4 {margin: 0 1% 20px;}
.col4bb {border-bottom: 1px solid #222; margin: 0 0 20px; padding: 0 1.5% 20px;}
.col7 {width: 63.66%; float: left; margin: 0 1.5% 20px;}
.btn a {color: #EF821E; font-weight: bold; font-size: 16px;}
.btn a:hover {color: #FFF;}
@media screen and (max-width: 500px) {
    .col2 {width: 97%; float: none;}
    .col4,.col4bb {width: 47%; float: left;}
    .col3 {width: 97%; float: none;}
    .col7 {width: 97%; float: none;}
}

#sliderWrap {margin: 0 auto 40px; overflow: hidden;}
#slider {margin: 0 auto; padding: 30px 0; background: url("image/dot.png");}
.slide-item {margin: 0 10px;}
.slick-prev:before,
.slick-next:before {font-family: 'slick';font-size: 20px;line-height: 1;opacity: .75;color: white;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#thumbnail_slider {width: 100%; max-width: 1230px; margin: 0 auto;}
@media screen and (max-width: 960px) {
    #slider {padding: 10px 0; }
    .slide-item {margin: 0 5px;}
}

.ttlNews {width: 13.5%; float: left; text-align: center;}
.ttlNews h2 {background: url(image/bg_ttl.png) no-repeat; background-size: 35px 28px; font-size: 20px; font-weight: bold; line-height: 28px; padding-left: 40px; margin-bottom: 20px; text-align: left;}
.ttlNews .btn {font-size: 24px; font-family: 'Poppins', sans-serif; text-align: center; display: inline-block; line-height: 20px;}
.ttlNews .btn a {color: #222; background: url("image/bg_arrow.png") no-repeat right; background-size: 8px 10px; padding: 0 20px 0 0;}
.ttlNews .btn a:hover {color: #EF821E;}
@media screen and (max-width: 960px) {
    .ttlNews {width: 100%; float: none; text-align: center;}
    .ttlNews h2,.ttlNews .btn {float: left; margin-right: 20px;}
}

.ttlCent {text-align: center;}
.ttlCent h2 {font-size: 30px; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700; background: url(image/bg_ttl.png) no-repeat; background-size: 50px 40px; padding-left: 60px;}
.ttlCent h2 {position: relative;display: inline-block;margin-bottom: 1em;}
.ttlCent h2:before {content: '';position: absolute;bottom: -15px;display: inline-block;width: 100px;height: 3px;left: 50%;-moz-transform: translateX(-50%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);background-color: #EF821E;border-radius: 2px;}
@media screen and (max-width: 500px) {
    .ttlCent h2 {font-size: 24px; background: url(image/bg_ttl.png) no-repeat; background-size: 50px 40px; padding-left: 60px;}
}

#topNews {width: 84.5%; float: right;}
.topNews {border-bottom: 1px solid #999999; padding: 10px 0;}
.topNews .date {width: 80px; margin: 5px 0; padding: 0 15px; line-height: 30px; font-size: 14px; float: left; font-family: 'Poppins', sans-serif;}
.topNews h2 {width: calc(100% - 180px); font-size: 16px; line-height: 30px; margin: 5px 20px; float: left; font-weight: normal;}
.topNews .txt {margin-bottom: 10px;}
.topNews .btn {width: 30px; float: left; margin: 5px 0;}
@media screen and (max-width: 960px) {
    #topNews {width: 100%; float: none; clear: both;}
}
@media screen and (max-width: 500px) {
    .topNews .date {margin: 0; padding: 0; float: none;}
    .topNews h2 {width: calc(100% - 40px); margin: 0;}
    .topNews .btn {width: 30px; float: right;}
}

#topAbout {background: url("image/bg_about.jpg") no-repeat center; background-size: cover; position: relative; padding: 10px;}
#topAbout .border {border: 1px solid #FFF; padding: 50px 30px;}
#topAbout .inner {background: rgba(255,255,255,0.8); padding: 30px; margin: 0;}
#topAbout h2 {max-width: 275px; width: 90%; margin: 0 auto 15px;}
#topAbout h3 {margin: 0 0 30px;}
#topAbout .txt {width: 52%; float: left; font-size: 16px;}
#topAbout .exsample {font-size: 14px; font-weight: bold;}
#topAbout .exsample .box {width: 20px; float: left; background: #222; color: #FFF; line-height: 20px; border-radius: 5px; text-align: center;}
#topAbout .exsample .price {float: left; margin-left: 10px; line-height: 20px; border-radius: 5px;}
#topAbout .exsample .price span {background: #CC0000; padding: 5px; margin-left: 0.5em; color: #FFF; border-radius: 5px;}
#topAbout .photo {width: 47%; float: right;}
#topAbout .btn,#topAd .btn {float: left; margin-right: 30px; width: 230px; margin-bottom: 10px;}
#topAbout .btn a,#topAd .btn a,#coupon .btn a,#shopList .btn a,#contactArea .btn a,.shopList .btn a,.btnW a {padding: 0 0 0 20px; font-weight: bold;}
@media screen and (max-width: 1024px) {
    #topAbout .border { padding: 10px;}
    #topAbout .inner {padding: 20px;}
}
@media screen and (max-width: 800px) {
    #topAbout .txt,#topAbout .photo {width: 100%; float: none;}
}
@media screen and (max-width: 500px) {
    #topAbout .exsample .box {width: 20px; float: none;}
    #topAbout .exsample .price {float: none;}
    #topAbout .exsample .price span {display: block; margin-left: 0;}
}

#topAd .ttl {background: #EF821E; padding: 10px 0; position: relative; z-index: 1;}
#topAd .ttl h2 {width: 95%; max-width: 530px; margin: 0 auto;}
#topAd .txt {width: 53.5%; float: left;}
#topAd h3 {margin-bottom: 10px;}
#topAd h4 {font-size: 20px; font-weight: bold; font-family: 'M PLUS Rounded 1c', sans-serif; color: #EF821E;}
#topAd .inner {position: relative; margin-top: -20px; z-index: 2;}
#topAd span.pcbr {margin-left: 1em;}
#topAd .photo {width: 45.5%; float: right; margin-top: 25px;}
#topAd .desc {background: url("image/bg.jpg") repeat; padding: 30px 0;}
#topAd .descWrap {position: relative; z-index: 1;}
#topAd .desc .copy {width: 62.7%; float: left; font-size: 20px; font-weight: bold;}
#topAd .desc .copy h2 {margin-bottom: 10px;}
#topAd .desc span.list {margin-left: 1em;}
#topAd .desc .price {width: 37%; float: right;}
#topAd .descBtm {position: relative; z-index: 0; margin-top: -25px; background: rgba(255,255,255,0.7); padding: 20px; width: calc(100% - 40px); border-radius: 10px;}
#topAd .descImg {width: 25%; float: left;}
#topAd .descTxt {width: 71.5%; float: right; font-size: 16px; font-weight: bold;}
#topAd .descTxt h3 {width: 100%; max-width: 677px; margin-bottom: 10px;}
@media screen and (max-width: 1024px) {
    #topAd .txt {width: 45%;}
    #topAd .photo {width: 54%;}
    #topAd span.pcbr {margin-left: 0; display: inherit;}
    #topAd .descBtm {margin-top: 0;}
    #topAd .desc span.list {margin-left: 0; display: block;}
}
@media screen and (max-width: 930px) {
    #topAd .txt {width: 100%;}
    #topAd .photo {width: 100%;}
    #topAd span.pcbr {margin-left: 0; display: inherit;}
}
@media screen and (max-width: 736px) {
    #topAd .desc .copy,#topAd .desc .price {width: 100%;}
}
@media screen and (max-width: 500px) {
    #topAd .inner {margin-top: 0px;}
    #topAd .descImg, #topAd .descTxt {width: 100%; float: none;}
}

#coupon h3,.shopList h3 {background: #EF821E url("image/circle.png") left no-repeat; font-size: 16px; padding: 5px 10px; color: #FFF;}
.shopList h4 {font-weight: bold; margin-bottom: 5px;}
#coupon .txt,.shopList .txt {background: #EFEFEF; padding: 10px;}
#coupon .btn,#shopList .btn,#contactArea .btn,.shopList .btn,.btnW {width: calc(100% - 22px);}

#contactArea {width: 95%; max-width: 770px; margin: 0 auto 50px;}
#contactArea .inner {border: 5px solid #EF821E; padding: 20px;}
#contactArea .ttl {border-bottom: 2px solid #EF821E; margin-bottom: 20px;}
#contactArea h2 {max-width: 295px; width: 95%; float: left; padding-bottom: 10px;}
#contactArea h3 {font-size: 16px; float: right; color: #EF821E; font-weight: bold;}
#contactArea .txt {font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 700; text-align: center;}
#contactArea .txt span.EN {font-size: 70%;}
#contactArea .txt span.mail {margin-left: 1em;}
#contactArea .time {text-align: center; font-weight: bold;}
@media screen and (max-width: 500px) {
    #contactArea .txt span.mail {margin-left: 0; display: block;}
}

#facebook {width: 47%; float: left; max-width: 500px;}
#insta {width: 47%; float: right; max-width: 500px;}
#facebook h2 {width: 188px; margin: 0 auto 20px;}
#insta h2 {width: 143px; margin: 0 auto 20px;}
#instaImg {width: 125px; margin: 0 auto 10px;}
.instagram  {list-style: none; margin: 0; padding: 0; width: 100%; overflow: hidden;}
.instaInner {width: 25%; float: left;}
@media screen and (max-width: 500px) {
    #facebook,#insta {width: 100%; float: left; max-width: 500px; margin:  0 auto;}

}

#headTtl {background: url("image/dot.png"); padding: 30px 0;}
#headTtl h2 {font-size: 40px; color: #EF821E; font-family: 'M PLUS Rounded 1c', sans-serif; letter-spacing: 2px; text-align: center;}
@media screen and (max-width: 500px) {
    #headTtl {padding: 10px 0;}
    #headTtl h2 {font-size: 30px;}
    #bread {font-size: 12px;}
}
#bread {background: #FEE19C;}
.breadcrumb {margin:0;padding: 10px 0;overflow: hidden;}
.breadcrumb li{display:inline; list-style: none;}
.breadcrumb li:after{font-family: FontAwesome; content: '\f101'; padding: 0 3px; color: #222;}
.breadcrumb li:last-child:after{content: '';}
.breadcrumb li a {text-decoration: none; color: #222;}
.breadcrumb li:first-child a:before{font-family: FontAwesome; content: '\f015'; font-weight: normal; font-size: 1.1em;}
.breadcrumb li a:hover {text-decoration: underline;}

.machine .half {width: 50%; float: left;}
.machine .inner {border: 1px solid #FFF; background: #EEE;}
.machine .station {background: #EF821E; width: 27%; float: left; text-align: center; color: #FFF; padding: 10px 0;}
.machine .address {float: left; padding: 10px 20px; width: calc(73% - 40px);}
@media screen and (max-width: 736px) {
	.machine .half {width: 100%; float: none;}
}

.priceCat {position: relative; margin-bottom: 20px;}
.priceCat h2 {background: #EF821E; display: inline-block; padding: 10px 20px; margin-right: 20px; font-size: 24px; font-weight: bold; color: #FFF; float: left;}
.priceCat h2 span {font-size: 80%; margin-left: 1em;}
.priceCat .desc {font-size: 18px; float: left; margin-top: 20px;}
.priceBox {border-left: 8px solid #EE811E; padding: 5px 0 5px 15px; position: relative;}
.priceBox .txt1 {width: 67%; float: left;}
.priceBox .photo1 {width: 28%; float: right;}
.priceBox .txt2 {width: 55%; float: left;}
.priceBox .photo2 {width: 33%; float: right; margin-right: 10%;}
.priceBox h2 {font-size: 20px; font-weight: bold;}
.priceBox h2 span {font-size: 70%;}
.priceBox .price {font-size: 30px; font-weight: bold; color: #EE811E;}
.priceBox .price2 {background: #EF821E; font-size: 16px; color: #FFF; font-weight: bold; line-height: 30px; border-radius: 5px; margin-right: 10px; float: left; padding: 0 10px; margin-top: 10px;}
.type80 {font-size: 80%;}
.type70 {font-size: 70%;}
.type40 {font-size: 40%;}
.priceBox .price span.yen {font-family: 'M PLUS Rounded 1c', sans-serif;}
ul.priceCom {list-style-type: square; margin-left: 20px;}
.priceBox .cate {width: 170px; text-align: center; font-size: 16px; font-weight: bold; line-height: 30px; border-radius: 5px; float: left; background: #EF821E; color: #FFF;}
.priceBox .cateShop {width: calc(100% - 190px); float: right; font-size: 20px; line-height: 30px;}
@media screen and (max-width: 500px) {
    .priceCat h2 {padding: 5px 10px; margin-right: 0; font-size: 20px; float: none;}
    .priceCat .desc {font-size: 16px; float: none; margin-top: 10px;}
    .priceBox .txt1,.priceBox .photo1,.priceBox .txt2,.priceBox .photo2 {width: 100%;}
    .priceBox .photo2 {float: none; margin-right: 0;}
    .priceBox .cate {float: none; margin-bottom: 10px}
    .priceBox .cateShop {width: 100%; float: none; font-size: 16px; line-height: 1.2;}
}

.bar {width: 100px; margin: 0 auto;}
#flow .border {border:  1px solid #EE811E;}
#flow .photo {width: 27.5%; float: left;}
#flow .inner {width: 72.5%; float: left;}
#flow .num {background: #EE811E; color: #FFF; line-height: 60px; width: 60px; text-align: center; font-family: 'Oswald', sans-serif; font-weight: 700; float: left; font-size: 40px;}
#flow h3 {font-size: 24px; float: left; margin: 15px; line-height: 30px; color: #EE811E;}
#flow .txt {clear: both; margin: 0 20px 0 80px;}
@media screen and (max-width: 736px) {
    #flow .photo {width: 40%; float: left;}
    #flow .inner {width: 60%; float: left;}
    #flow .num {line-height: 30px; width: 30px; font-size: 20px;}
    #flow h3 {font-size: 20px; float: left; margin: 0 15px; line-height: 30px;}
    #flow .txt {clear: both; margin: 0 20px 10px 45px;}
}
@media screen and (max-width: 500px) {
    #flow .photo,#flow .inner {width: 100%; float: none;}
}

.compL {border-bottom: 1px solid #EE811E; width: 150px; float: left; padding: 10px 0; text-align: center;}
.compR {border-bottom: 1px solid #CCCCCC; width: calc(100% - 190px); float: left; padding: 10px 20px;}
@media screen and (max-width: 500px) {
    .compL {float: none;}
    .compR {width: 100%;}
}

#newsW .date {width: 150px; border-bottom: 1px solid #EE811E; padding: 10px 0; font-family: 'Poppins', sans-serif; margin-bottom: 10px;}
#newsW h3 {font-size: 16px; margin-bottom: 10px;}
#newsW .txt {border-bottom: 1px solid #CCCCCC; padding: 0 0 15px; margin-bottom: 30px;}
#newsW .txt p {margin-bottom: 15px;}

#detail .photo {width: 40%; float: left;}
#detail .inner {width: 57.5%; float: right;}
#detail h2 {background: #EF821E url("image/circle.png") left no-repeat; font-size: 16px; padding: 5px 10px; color: #FFF;}
#detail h3 {font-weight: bold; margin-bottom: 5px; font-size: 16px;}
#detail .txt {background: #EFEFEF; padding: 10px;}
#detail h4 {background: #EF821E url("image/circle.png") left no-repeat; font-size: 16px; padding: 5px 15px 5px 10px; color: #FFF; display: inline-block; font-weight: bold;}
#detail .list {border: 1px solid #EF821E; padding: 20px; font-size: 16px;}
#detail .listL {width: 180px; float: left; margin-top: 2px;}
#detail .listR {width: calc(100% - 180px); float: left;}
#detail .listR li {list-style: none; float: left; margin: 5px; background: #FEE19C; padding: 2px 10px; border-radius: 5px;}
@media screen and (max-width: 500px) {
    #detail .photo,#detail .inner,#detail .listL,#detail .listR {width: 100%;}
    #detail .listR li {margin: 5px;}
}