@charset "utf-8";
    /*===============================================
●mobile.css  画面の横幅が640pxまで
===============================================*/
    
    @media screen and (max-width: 640px) {
        /*-------------------------------------- 共通 */
        html,
        body {
            background-image: none;
            background: url(../images/content_bg_sp.jpg) center;
            -webkit-text-size-adjust: 100%;
            min-width: 100%;
        }
        .pc {
            display: none !important;
        }
        .sp {
            display: block;
        }
        img {
            max-width: 100%;
            height: auto;
            width/***/
            : auto;
        }
        .img-responsive {
            width: 100%;
            height: auto;
        }
        header,
        .wrap,
        .container {
            width: 100%;
            /*overflow:hidden;*/
        }
        .container-inner {
            padding: 5% 3%;
            width: 100%;
        }
        header+.container,
        .under-header {
            padding-top: 50px;
        }
        .headline {
            height: 200px;
            padding-top: 40px;
            text-align: center;
        }
        /* ギャラリー */
        #gallery li {
            margin: 20px 0 0 0;
            width: 48%;
        }
        #gallery li:nth-child(even) {
            float: right;
        }
        #gallery li img {
            width: 100%;
            height: auto;
        }
        /*-------------------------------------- Header */
        header.animated {
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        header {
            position: fixed;
            height: 50px;
            padding-top: 5px;
            min-width: 100%;
            background: #999;
        }
        #header {
            position: fixed;
        }
        .headroom--pinned {
            display: block;
        }
        .headroom--unpinned {
            display: none;
        }
        .header-container {
            width: 100%;
        }
        header img.logo {
            position: absolute;
            left: 5px;
            top: 0;
            padding: 0;
            height: auto;
            text-align: left;
            z-index: 9999;
            height: 42px;
        }
        /*-------------------------------------- global-nav */
        .global-nav.pc {
            display: none;
        }
        .global-nav.sp {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            color: #FFF;
        }
        .global-nav.sp .button-toggle {
            background: #666;
            float: right;
            padding: 15px 15px 10px 15px;
            position: relative;
        }
        .global-nav.sp .icon-bar {
            border-radius: 3px;
            display: block;
            height: 3px;
            width: 44px;
            background: #FFF;
        }
        .global-nav.sp .icon-bar+.icon-bar {
            margin-top: 7px;
        }
        .global-nav.sp .menu {
            width: 100%;
            height: auto;
            clear: both;
            z-index: 999;
            position: absolute;
            top: 50px;
        }
        .global-nav.sp .menu li {
            text-align: center;
            background: #666;
        }
        .global-nav.sp .menu li:last-child {
            height: 43px;
        }
        .global-nav.sp .menu li a {
            font-family: "Lusitana", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Helvetica, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
            display: block;
            color: #FFF;
            padding: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            border-right: 1px solid rgba(255, 255, 255, 0.3);
            background: #777777;
            font-size: 11px;
        }
        .global-nav.sp .menu li.sp-menu-sns {
            background: #777777;
            display: none;
        }
        .global-nav.sp .menu li.sp-menu-sns a {
            display: inline-block;
            border: none;
            padding: 7px 5px 3px 5px;
        }
        .global-nav.sp .menu li a span {
            font-size: 14px;
        }
        #menuButton {
            display: block;
            width: 42px;
            height: 42px;
            position: fixed;
            top: 4px;
            right: 8px;
            z-index: 3;
        }
        #menuButton span {
            display: block;
            background: #FFF;
            width: 24px;
            height: 2px;
            position: absolute;
            left: 9px;
            transition: all 0.4s;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
        }
        #menuButton span:first-child {
            top: 12px;
        }
        #menuButton span:nth-child(2) {
            margin-top: -1px;
            top: 50%;
        }
        #menuButton span:last-child {
            bottom: 12px;
        }
        #menuButton.active span:first-child {
            -webkit-transform: translateY(8px) rotate(45deg);
            -moz-transform: translateY(8px) rotate(45deg);
            -ms-transform: translateY(8px) rotate(45deg);
            transform: translateY(8px) rotate(45deg);
        }
        #menuButton.active span:nth-child(2) {
            opacity: 0;
        }
        #menuButton.active span:last-child {
            -moz-transform: translateY(-8px) rotate(-45deg);
            -ms-transform: translateY(-8px) rotate(-45deg);
            transform: translateY(-8px) rotate(-45deg);
        }
        /*-------------------------------------- footer */
        #page-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
        .facebook-container {
            margin-right: 0;
            width: 100%;
        }
        footer {
            border-top: none;
            width: 100%;
            background: #CCC;
        }
        .footer-link {
            padding: 5% 2%;
            float: none;
        }
        .footer-link li {
            display: inline-block;
            float: none;
        }
        .footer-link a {
            color: #222 !important;
            display: block;
            font-size: 12px;
            /*padding:5%;*/
        }
        .footer-link a:hover {
            color: #666 !important;
        }
        /*-------------------------------------- button */
        .btn {
            margin-bottom: 5px;
        }
        .btn-xlg {
            width: 100%;
        }
        /*-------------------------------------- table */
        .table th,
        .table td {
            width: 100% !important;
            display: block;
            text-align: left;
            padding: 5px 10px;
        }
        .table.login {
            width: 100%;
        }
        /*-------------------------------------- sns share button */
        #page-top {
            bottom: 10px;
            z-index: 10;
        }
        /**********************************************************各ページ**/
        /*-------------------------------------- index */
        .top-feature {
            width: 100%;
            margin-top: 8%;
        }
        .top-feature li {
            width: 48%;
            margin: 0 2% 20px 0;
            padding-top: 0;
        }
        .top-feature a:nth-child(3n) li {
            margin-right: inherit;
        }
        .top-feature a:nth-child(odd) li {
            clear: both;
        }
        .top-feature a:nth-child(even) li {
            float: right;
        }
        .top-feature li.rip {
            height: auto;
            margin-top: 0;
            padding: 10px 15px;
        }
        .top-feature p {
            font-size: 12px;
        }
        .top-feature .fl {
            float: none;
            text-align: center;
        }
        .top-feature .fl img {
            margin-left: 0;
            margin-top: 3%;
        }
        .top-contents {
            width: 100%;
        }
        .top-contents li {
            width: 100%;
            margin: 0 0 8% 0;
            padding-top: 0;
        }
        .top-contents a:nth-child(odd) li {
            clear: both;
        }
        .top-contents a:last-child li {
            margin-right: 0;
            width: 100%;
        }
        .top-contents h3 {
            font-size: 30px;
            position: relative;
            margin: 0;
            padding: 0;
        }
        .top-feature h3 {
            font-size: 18px;
            position: relative;
            margin: 0;
            padding: 0;
        }
        .top-feature h4 {
            font-size: 14px;
        }
        .top-contents p {
            font-size: 13px;
        }
        .index .mt30.mb30 {
            margin: 5% 0;
        }
        .top-banner-area {
            margin: 3% 0 0 0;
            width: 100%;
        }
        /*-------------------------------------- TEA */
        #menu_tea h2 {
            font-size: 18px;
            margin: 0 0 5% 0;
        }
        .menu_tea01,
        .menu_tea02,
        .menu_tea03,
        .menu_tea04,
        .menu_tea05,
        .menu_tea06,
        .menu_tea07,
        .menu_tea08,
        .menu_tea09 {
            width: 100%;
        }
        .menu_tea01 .serif {
            font-size: 16px;
            margin: 5% 0;
            text-align: left;
        }
        .menu_tea01 .serif span {
            font-size: 14px;
        }
        .menu_tea02 {
            background: url(../images/menu_tea/tea_bg.jpg) no-repeat left top;
            padding: 5%;
        }
        .menu_tea02 li {
            margin-bottom: 3%;
        }
        .menu_tea02 h3 {
            margin-bottom: 10px;
        }
        .menu_tea02 h4,
        .menu_tea03 .fl h4,
        .menu_tea04 h4 {
            font-size: 17px;
        }
        .menu_tea02 p,
        .menu_tea03 .fl p,
        .menu_tea04 p {
            font-size: 14px;
        }
        .menu_tea02 hr {
            width: 100%;
        }
        .menu_tea03 .fl,
        .menu_tea03 .fr {
            width: 100%;
        }
        .menu_tea03 .recommended {
            margin: 3% 0;
        }
        .menu_tea03 .fr ul {
            float: none;
            width: 100%;
        }
        .menu_tea03 .fr h4 {
            font-size: 17px;
        }
        .menu_tea03 .fl .ice_lemon_milktea h4,
        .menu_tea03 .fl .ice_lemon_milktea p {
            background-image: none;
            padding-left: 0;
        }
        .menu_tea03 .ice_lemon_milktea {
            position: inherit;
            left: inherit;
            top: inherit;
            width: 100%;
            margin-top: 20px;
        }
        .menu_tea04 li {
            margin-top: 3%;
            float: none;
            width: 100%;
        }
        .menu_tea05 h3,
        .menu_tea06 h3,
        .menu_tea07 h3,
        .menu_tea08 h3 {
            margin: 8% 0 3% 0;
        }
        .menu_tea05 .recommended {
            position: inherit;
            top: inherit;
            left: inherit;
        }
        .menu_tea05 ul {
            width: 100%;
            margin: 0 auto;
        }
        .menu_tea05 li {
            width: 100%;
            float: none;
            margin: 5% 0;
        }
        .menu_tea05 h4 {
            font-size: 16px;
            line-height: 1.3;
            /*padding-left:40px;*/
            /*background:url(../images/menu_tea/icon_special_s.png) no-repeat 0 5px;*/
        }
        /*.menu_tea05 li:first-child h4{
        padding-left:85px;
        background:url(../images/menu_tea/hot.png) no-repeat 0 5px;
    }
    .menu_tea05 li:nth-child(2) h4,
    .menu_tea05 li:nth-child(3) h4{
        padding-left:85px;
        background:url(../images/menu_tea/ice.png) no-repeat 0 5px;
    }
    .menu_tea05 li:last-child div{
        position: inherit;
        width:100%;
        left:inherit;
        top:inherit;
        margin-bottom:60px;
    }*/
        .menu_tea05 li div {
            position: inherit;
            width: 100%;
            left: inherit;
            top: inherit;
            margin-bottom: 60px;
        }
        .menu_tea06 li {
            float: none;
            width: 100%;
            margin: 0 0 5% 0;
        }
        .menu_tea06 li>div {
            padding-left: 0;
        }
        .menu_tea05 li>img,
        .menu_tea06 li>img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .menu_tea06 li .icon_serve {
            position: inherit;
            top: inherit;
            left: inherit;
            display: none;
        }
        .menu_tea03 li .icon_serve {
            position: inherit;
            top: inherit;
            right: inherit;
            display: none;
        }
        .menu_tea06 li img.sp,
        .menu_tea03 li img.sp {
            display: inline-block;
            margin-right: 5px;
        }
        .menu_tea07 li {
            float: none;
            width: 100%;
            margin-bottom: 8%;
        }
        .menu_tea08 .icon_exp li:last-child {
            height: auto;
        }
        .menu_tea08 .gray {
            text-align: left;
        }
        .menu_tea09 {
            background-image: none;
            padding-bottom: 0;
        }
        /*-------------------------------------- Herb TEA */
        .herbtea_inner {
            background-image: none;
        }
        .herbtea01 {
            padding: 5% 3%;
            font-size: 14px;
        }
        .herbtea02 {
            padding: 5% 3%;
        }
        .herbtea_regular li {
            margin: 5% 0;
        }
        .herbtea_regular h3,
        .seasonal_herb h3 {
            font-size: 18px;
        }
        .herbtea_regular img,
        .seasonal_herb img {
            margin: 3% 0;
        }
        .seasonal_herb {
            width: 100%;
            margin: 0;
            padding: 0 3% 3% 3%;
            background: rgba(180, 200, 90, .5);
        }
        .seasonal_herb h2 img {
            position: inherit;
            top: inherit;
            right: inherit;
            margin: 3% 0 0 0;
        }
        .herbtea03 {
            padding: 5% 3%;
        }
        #menu_herbtea .container-inner div {
            float: none;
            width: 100%;
            padding: 3%;
        }
        /*-------------------------------------- SWEETS */
        #menu_sweets h2 {
            font-size: 18px;
            margin: 0 0 5% 0;
        }
        #menu_sweets section>.serif {
            font-size: 14px;
            text-align: left;
        }
        .menu_sweets01 {
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
        }
        .menu_sweets01>img {
            position: inherit;
            top: inherit;
            left: inherit;
            z-index: inherit;
            margin-bottom: 5%;
        }
        .menu_sweets01 .banner_waffle {
            position: inherit;
            top: inherit;
            right: inherit;
            width: inherit;
            height: auto;
            margin-bottom: 5%;
        }
        .menu_sweets01 li div {
            width: 100%;
            position: inherit;
            margin: 3% 0 8% 0;
        }
        #menu_sweets section h3 {
            font-size: 16px;
        }
        #menu_sweets section li p {
            font-size: 14px;
        }
        .menu_sweets01 li:first-child img,
        .menu_sweets01 li:last-child img {
            position: inherit;
            top: inherit;
            left: inherit;
        }
        .menu_sweets01 li:first-child div,
        .menu_sweets01 li:last-child div {
            position: inherit;
            top: 8inherit;
            left: inherit;
        }
        .menu_sweets01 li:last-child h3 {
            text-align: left;
        }
        .menu_sweets02,
        .menu_sweets03,
        .menu_sweets04,
        .menu_sweets05,
        .menu_sweets06,
        .menu_sweets07 {
            width: 100%;
            margin: 0 0 5% 0;
        }
        .menu_sweets02 li {
            width: 100%;
            float: left;
            margin: 0 0 8% 0;
        }
        .menu_sweets02 li img {
            margin-bottom: 10px;
        }
        .menu_sweets02 li p {
            width: 100%;
        }
        .menu_sweets02 img,
        .menu_sweets03 img {
            display: block;
            margin: 0 auto;
        }
        .menu_sweets03 p.green {
            position: inherit;
            top: inherit;
            left: inherit;
            font-size: 16px !important;
        }
        .menu_sweets03 div {
            position: inherit;
            top: inherit;
            left: inherit;
        }
        .menu_sweets03 div p {
            width: 100%;
        }
        .menu_sweets05 {
            height: auto;
        }
        .menu_sweets05 .choco_pic {
            position: inherit;
            top: inherit;
            left: inherit;
        }
        .menu_sweets05 .choco_txt {
            width: 100%;
            position: inherit;
            top: inherit;
            left: inherit;
            margin: 3% 0 8% 0;
        }
        .menu_sweets05 .ice_pic {
            position: inherit;
            bottom: inherit;
            right: inherit;
        }
        .menu_sweets05 .ice_txt {
            width: 100%;
            position: inherit;
            bottom: inherit;
            right: inherit;
            margin: 3% 0 8% 0;
        }
        .menu_sweets05 h4 {
            position: inherit;
            bottom: inherit;
            right: inherit;
            margin: 3% 0 0 0;
        }
        .menu_sweets06 .fl,
        .menu_sweets06 .fr {
            width: 100%
        }
        .menu_sweets06 .fr {
            margin-top: 0;
        }
        .menu_sweets06 ul {
            width: inherit;
        }
        .menu_sweets06 .pettit_pic {
            position: inherit;
            top: inherit;
            left: inherit;
            margin: 2% auto 3% auto;
            display: block;
        }
        .menu_sweets06 .pettit_txt {
            position: inherit;
            width: 100%;
            top: inherit;
            right: inherit;
        }
        .menu_sweets07 .fr {
            width: 100%;
        }
        .menu_sweets07 .fl {
            width: 100%;
            padding-left: 0;
            margin: 3% 0 8% 0;
        }
        .menu_sweets07 h3 {
            text-align: left;
        }
        .menu_cakeset {
            width: 100%;
            margin: 5% 0;
            padding: 5%;
        }
        .menu_cakeset ul.clearfix {
            padding: 0;
        }
        .menu_cakeset>p.serif {
            position: inherit;
            top: inherit;
            left: inherit;
            text-align: left;
            width: 100%;
            font-size: 16px;
            margin: 3% 0;
        }
        .menu_cakeset>p.clear {
            font-size: 14px;
            margin-top: 8%;
        }
        .menu_cakeset>img {
            position: inherit;
            top: inherit;
            left: inherit;
        }
        .menu_cakeset h3 {
            position: inherit;
            top: inherit;
            left: inherit;
        }
        .menu_cakeset .cake_image {
            width: 100%;
            margin: 0 auto 30px auto;
            padding-top: 0;
        }
        .menu_cakeset .cake_image p {
            width: 100%;
        }
        .menu_cakeset li {
            width: 100%;
            height: autox;
            margin-bottom: 3%;
            float: none;
        }
        .menu_cakeset li img {
            display: block;
            margin: 0 auto;
        }
        .menu_cakeset li:nth-child(even) {
            float: none;
        }
        .menu_cakeset h4,
        .menu_cakeset li:nth-child(2) h4 {
            font-size: 16px;
            margin-top: 10px;
            letter-spacing: inherit;
        }
        .menu_cakeset li:last-child div {
            position: inherit;
            width: 100%;
            top: inherit;
            left: inherit;
        }
        .menu_cakeset li .badge {
            top: -20px;
            right: 15%;
        }
        .menu_cakeset p.ntc {
            margin-top: 0 !important;
        }
        .menu_sweets04 p.tr {
            text-align: left !important;
        }
        .menu_macaron {
            width: 100%;
            margin: 0 0 5% 0;
        }
        .menu_macaron p {
            font-size: 13px;
            margin-top: 10px;
        }
        .menu_macaron>img.txt-macaron {
            position: inherit;
            ;
            top: inherit;
            ;
            left: inherit;
            ;
            z-index: inherit;
            ;
        }
        .menu_macaron .fl {
            width: 100%;
            padding-top: 5%;
        }
        .menu_macaron .fl>p {
            padding-left: 0;
        }
        .macaron_gift {
            position: inherit;
            bottom: inherit;
            width: inherit;
        }
        .macaron_gift_fl,
        .macaron_gift_fr {
            width: 100%;
            float: nonr;
            margin: 5% 0;
        }
        .menu_macaron h4 {
            text-align: left;
        }
        .spring2018,
        .bakedsweets {
            padding: 10px 0;
        }
        .spring2018 .fr,
        .spring2018 .fl,
        .bakedsweets .fl,
        .bakedsweets .fr {
            width: 100%;
            float: none;
        }
        .spring2018 .fl img,
        .bakedsweets .fl img {
            display: block;
            margin: 0 auto;
        }
        .spring2018 h4,
        .bakedsweets h4 {
            margin-top: 5%;
        }
        .spring2018 p,
        .bakedsweets p {
            font-size: 14px;
            margin-top: 10px;
        }
        .spring2018 ul,
        .bakedsweets ul {
            width: 100%;
            margin: 20px 0;
        }
        .spring2018 h5,
        .bakedsweets h5 {
            font-size: 14px;
        }
        #menu_sweets section .spring2018 li p {
            font-size: 13px;
        }
        /*-------------------------------------- GIFT */
        .gift_head {
            position: inherit;
        }
        .gift_head p {
            position: inherit;
            top: : inherit;
            left: : inherit;
            padding: 3% 3% 0 3%;
        }
        #gift h3 {
            font-size: 18px;
            margin: 5% 0;
        }
        #gift .container-inner {
            width: 100%;
        }
        .giftset li,
        .giftset02 li,
        .giftset03 li {
            width: 100%;
            height: auto;
            float: none;
            margin-bottom: 3%;
            position: relative;
        }
        .giftset li:nth-child(even),
        .giftset02 li:nth-child(even),
        .giftset03 li:nth-child(even) {
            float: none;
        }
        .giftset li p,
        {
            padding: 3% 0 3% 80px;
            font-size: 14px;
        }
        .giftset li p span {
            display: block;
            text-align: right;
        }
        .giftset li p img,
        .giftset02 img.alphabet,
        .giftset03 img.alphabet {
            position: absolute;
            left: 5px;
            top: 20px;
        }
        .giftset li:nth-child(3) p img,
        .giftset li:nth-child(4) p img {
            bottom: 20px;
            top: inherit;
        }
        .giftset02,
        .giftset03 {
            width: 100%;
            margin: 5% 0;
        }
        #gift h2 {
            font-size: 15px;
            text-align: left;
        }
        .gift_dressing,
        .gift_flavortea,
        .gift_originaltea,
        .gift_tea_jam {
            padding: 5% 0;
        }
        .gift_flavortea li {
            float: left;
            width: 48%;
            padding: 3%;
        }
        .gift_flavortea li:nth-child(even) {
            float: right;
        }
        .gift_flavortea li:nth-child(odd) {
            clear: both;
        }
        .gift_flavortea h4 {
            font-size: 14px;
        }
        .gift_flavortea li img {
            text-align: center;
        }
        .gift_originaltea .fl {
            width: 100%;
        }
        .gift_originaltea .fr {
            width: 100%;
            padding-left: 0;
            margin-top: 5%;
        }
        .gift_originaltea dt {
            width: 120px;
            float: left;
            clear: both;
        }
        .gift_originaltea dd {
            float: right;
            width: calc(100% - 130px);
            width: -webkit-calc(100% - 130px);
        }
        .gift_tea_jam .fl {
            width: 100%;
            position: inherit;
        }
        .gift_tea_jam .fr {
            width: 100%;
            margin-top: 5%;
        }
        .gift_tea_jam .fr li {
            float: none;
            width: 100%;
            padding: 0;
            margin: 5% 0 0 0;
        }
        .gift_tea_jam .fr h4 {
            text-align: left;
        }
        .gift_tea_jam .fr img.img-responsive {
            width: 100%;
            height: auto;
            margin-left: 0;
        }
        #gift .attn {
            width: 100%;
            font-size: 14px;
            padding: 5px 10px;
            margin: 5% 0;
        }
        #gift .notice {
            width: 100%;
            margin: 0;
            font-size: 12px;
        }
        /*-------------------------------------- dressing */
        #dressing .lead {
            text-align: left;
            font-size: 16px;
        }
        .dressing_intro {
            width: 100%;
        }
        .dressing_intro .green {
            font-size: 14px;
            padding: 20px;
        }
        .dressing_intro .green ul {
            margin-left: 0;
            font-size: 14px;
            margin-top: 20px;
        }
        .recommended_recipi {
            margin-top: 0;
        }
        .recommended_recipi h3 {
            font-size: 18px;
            ;
        }
        .recommended_recipi h3 span {
            font-size: 16px;
        }
        .recipi {
            margin: 40px auto auto auto;
            width: 100%;
        }
        .recipi.carrot {
            background: url(../images/dressing/img02_sp.jpg) no-repeat left top;
        }
        .recipi.french {
            background: url(../images/dressing/img03_sp.jpg) no-repeat left top;
        }
        .recipi.onion {
            background: url(../images/dressing/img04_sp.jpg) no-repeat left top;
        }
        .recipi .fl {
            width: 100%;
            padding-left: 120px;
            box-sizing: border-box;
            float: none;
        }
        .recipi .fr {
            width: 100%;
            float: none;
            margin-top: 10px;
        }
        .recipi p {
            font-size: 14px;
        }
        #dressing .profile {
            width: 100%;
            padding: 10px 15px;
            float: none;
            margin: 40px 0 0 0;
        }
        #dressing .profile .fl {
            width: 90px;
        }
        #dressing .profile .fr {
            width: calc(100% - 100px);
        }
        #dressing .profile h4 {
            font-size: 14px;
        }
        #dressing .profile h4 span,
        #dressing .profile p {
            font-size: 12px;
        }
        #dressing .container-inner .tr {
            font-size: 12px;
        }
        /*-------------------------------------- CONCEPT / TEA STORY / COMPANY / COUPON*/
        #concept h2,
        #tea_story h2,
        #company h2,
        #coupon h2 {
            font-size: 18px;
            margin: 0 0 5% 0;
        }
        .tea_story01 {
            background: none;
        }
        .tea_story01 .green,
        .tea_story02 .green {
            font-size: 15px;
            text-align: left;
        }
        .concept01 .serif,
        .tea_story01 .serif {
            font-size: 14px;
            margin: 5% 0;
            text-align: left;
        }
        #tea_story .slider {
            width: 100%;
        }
        #concept h3,
        #tea_story h3,
        #company h3,
        #motherleaf_card h3 {
            padding: 8% 3% 0 3%;
            font-size: 16px;
            text-align: left;
        }
        .concept02 p,
        .concept03 p,
        .tea_story02 p,
        .tea_story03 p,
        .tea_story04>p,
        .tea_story05 {
            padding: 3%;
        }
        .concept04 .fl,
        .concept04 .fr {
            padding: 3%;
            width: 100%;
        }
        .concept04 p {
            margin: 0;
        }
        #motherleaf_card .container-inner ul {
            padding-left: 0;
        }
        /* fresh tea */
        .fresh_tea {
            background: url(../images/tea_story/bg05.png) repeat;
            width: 100%;
            margin: 0 auto 5% 0;
            padding: 3%;
        }
        .fresh_tea h4 {
            font-size: 16px;
            background: url(../images/tea_story/leaf02.png) no-repeat top left;
            padding: 40px 0 10px 90px;
        }
        .fresh_tea>p {
            margin: 3% 0;
            width: 100%;
        }
        .fresh_tea .fl {
            padding-left: 0;
        }
        .fresh_tea .fr {
            width: 100%;
            padding-bottom: 20px;
        }
        .tea_story04 ul {
            padding: 5% 0 0 0;
            background: none;
        }
        .tea_story04 li {
            float: none;
            width: 100%;
            min-height: inherit;
            margin-bottom: 5%;
        }
        .tea_story04 li:nth-child(even) {
            float: none;
        }
        .tea_story05 {
            padding-bottom: 5%;
            background: none;
        }
        .tea_story06 {
            padding: 5% 3%;
        }
        .tea_story06 h5 {
            font-size: 14px;
        }
        .tea_story06 p {
            font-size: 14px;
            margin: 10px 0;
        }
        .tea_story06 .fl,
        .tea_story06 .fr {
            width: 100%;
        }
        .tea_story07 {
            position: relative;
            height: auto;
        }
        .isobuchi_pic {
            position: inherit;
            top: inherit;
            left: inherit;
            margin: 5%;
        }
        .tea_story07 div {
            position: inherit;
            width: 100%;
            top: inherit;
            right: inherit;
            font-size: 12px;
            text-align: justify;
        }
        .tea_story07 div.rip {
            margin-top: 20px;
            position: inherit;
            width: 100%;
            top: inherit;
            bottom: inherit;
            right: inherit;
            font-size: 12px;
            text-align: justify;
        }
        .tea_story07 a img {
            position: inherit;
            bottom: inherit;
            right: inherit;
        }
        #company section>p {
            margin: 3%;
        }
        .company p {
            padding: 3%;
        }
        #company h3 img {
            display: none;
        }
        .company dl {
            padding: 3% 5%;
            margin: 0 0 5% 0;
            display: inline-block;
        }
        .company h4 {
            margin: 0;
        }
        .company p span {
            margin: 3%;
        }
        .coupon {
            width: 100%;
        }
        .coupon p {
            padding: 10px 0 0 120px;
            margin-bottom: 3%;
            min-height: 160px;
            text-align: justify;
        }
        /*-------------------------------------- NEWS */
        #news h2 {
            font-size: 18px;
            margin: 0;
        }
        .news_list li {
            float: none;
            margin: 20px 0;
            width: 100%;
        }
        .news_list h3 {
            font-size: 15px;
        }
        .news_list p {
            font-size: 12px;
            text-align: justify;
            margin: 8px 0;
        }
        /*-------------------------------------- SHOP */
        #shop h2 {
            font-size: 18px;
            margin: 0;
        }
        #shop h3 {
            font-size: 14px;
            letter-spacing: inherit;
            margin-bottom: 5%;
        }
        .shop_list .fl,
        .shop_list .fr {
            width: 100%;
            float: none;
        }
        .shop_list h4 {
            font-size: 14px;
            height: auto;
        }
        .shop_list dt {
            float: none;
            width: 100%x;
            padding: 14px 0 0 10px;
        }
        .shop_list dd {
            float: none;
            width: 100%;
            height: auto;
            padding: 14px 0 14px 10px;
        }
        .shop_list dd.l_fixed01,
        .shop_list dd.l_fixed02,
        .shop_list dd.r_fixed01,
        .shop_list dd.r_fixed02,
        .shop_list dd.r_fixed03,
        .shop_list dd.r_fixed04 {
            height: auto;
        }
        .shop_list .shop_btn {
            padding: 5px 10px;
            width: 100%;
            text-align: center;
        }
        .shop_menu {
            width: 100%;
        }
        .init-bottom {
            text-align: center;
        }
        /*-------------------------------------- HISTORY */
        .world_tea_story {
            width: 100%;
            border: 3px solid #8fa732;
            box-sizing: border-box;
        }
        .tea_history01 {
            padding: 3% 0;
            background-image: none;
        }
        #tea_history h2 {
            font-size: 18px;
        }
        .tea_history01 p {
            font-size: 16px;
        }
        .tea_history02 {
            border-top: 3px solid #8fa732;
            border-bottom: 3px solid #8fa732;
            padding: 5%;
        }
        .tea_history02 p {
            text-align: left;
            font-size: 14px;
        }
        .world_tea_story h3 {
            color: #7c924c;
            font-size: 16px;
            letter-spacing: inherit;
        }
        .world_tea_story .fl p,
        .world_tea_story .fr p {
            font-size: 14px;
        }
        .tea_history03 {
            border-top: 3px solid #8fa732;
            border-bottom: 3px solid #8fa732;
        }
        .tea_history03 .fl,
        .tea_history04 .fr,
        .tea_history05 .fr,
        .tea_history06 .fl,
        .tea_history07 .fr {
            width: 100%;
            padding: 5%;
            float: none;
        }
        .tea_history05 {
            background-image: none;
            border-top: 3px solid #8fa732;
            border-bottom: 3px solid #8fa732;
        }
        .tea_history07 {
            background-image: none;
            border-top: 3px solid #8fa732;
        }
        /*-------------------------------------- text pages */
        #txt h2 {
            font-size: 18px;
            margin: 0 0 5%;
        }
        #txt section>p.serif {
            font-size: 15px;
        }
        #txt section>p span {
            display: block;
            font-size: 14px;
            margin: 3% 0;
            text-align: left;
        }
        .txt {
            width: 100%;
        }
        .txt h3 {
            font-size: 16px;
            background: #ABC53D;
            color: #FFF;
            padding: 0 10px;
            position: relative;
            width: 100%;
            margin: 3% 0;
        }
        .txt img {
            display: none;
        }
        .txt h4 {
            font-size: 14px;
            margin: 3% 0;
        }
        .txt p,
        .txt ol {
            width: 100%;
            margin: 3% 0;
        }
        .txt ol li {
            margin-left: 20px;
        }
    }