/* Scss Document */ @charset "utf-8"; @import "normalize.css"; @import "_base"; /*======================================================= common ========================================================*/ //フォントサイズ 基準設定 1.0rem = 10px html{ font-size: 62.5%; height: 100%; // scroll-behavior: smooth; @include mq-down(md) { font-size: 58.5%; } } body{ font-size: 1.6rem; height: 100%; color: #131313; -webkit-text-size-adjust: 100%; // font-family: "Noto Sans JP"; // font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-family: 'Noto Serif JP', serif; background: url(../img/common/bg_main.jpg) repeat-y top center / cover; @include mq-down(md){ font-size: 1.6rem; line-height: 1.8; } } .pc{ @include mq-down(lg){ display: none!important; } } .sp{ @include mq-up(lg){ display: none!important; } } //.tab { // @include mq-down(md){ // display: none; // } // @include mq-up(md){ // display: none; // } // @media screen and (min-width:606px) and ( max-width:767px) { // display: block!important; // } //} .clearfix { *zoom: 1; &::after { content: ""; display: block; clear: both; } } @include mq-down(md){ img{ max-width: 100%; } } .mrgT5 { margin-top: 5px; } .mrgT10 { margin-top: 10px; } .mrgT15 { margin-top: 15px; } .mrgT20 { margin-top: 20px; } .mrgT25 { margin-top: 25px; } .mrgT30 { margin-top: 30px; } .mrgT40 { margin-top: 40px; } .mrgT50 { margin-top: 50px; } .mrgT60 { margin-top: 60px; } .mrgT70 { margin-top: 70px; } .mrgB5 { margin-bottom: 5px;} .mrgB10 { margin-bottom: 10px; } .mrgB15 { margin-bottom: 15px; } .mrgB20 { margin-bottom: 20px; } .mrgB25 { margin-bottom: 25px; } .mrgB30 { margin-bottom: 30px; } .mrgB40 { margin-bottom: 40px; } .mrgB50 { margin-bottom: 50px; } .mrgB60 { margin-bottom: 60px; } .mrgB70 { margin-bottom: 70px; } .floatL { float: left; } .floatR { float: right; } .fontBold { font-weight: bold; } .text-center { text-align:center; } .text-right { text-align:right; } .text-left { text-align:left; } .f14{ font-size: 1.4rem; } .f16{ font-size: 1.6rem; } .f18{ font-size: 1.8rem; } .red{ color: #c1272d; } .mincho{ font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; } a{ color: #131313; } a:hover img { opacity: .7; -webkit-opacity: .7; -moz-opacity: .7; filter: alpha(opacity=70); /* IE lt 8 */ -ms-filter: "alpha(opacity=70)"; /* IE 8 */ -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -ms-transition: opacity 1s ease-out; transition: opacity 1s ease-out; } .veg-movie { width: 100%; max-width: 800px; } /* --------------------------------------------------------------- */ /* header */ /* --------------------------------------------------------------- */ header { width: 100%; height: 98px; @include mq-down(md) { height: 85px; } &.is-fixed{ position: fixed; top: 0; left: 0; z-index: 999; animation:nyuru 0.5s; background: url(../img/common/bg_main.jpg) no-repeat top center / cover; } @keyframes nyuru { 0%{ margin-top:-158px; } 100%{ margin-top:0; } } @include mq-down(md) { @keyframes nyuru { 0%{ margin-top:-78px; } 100%{ margin-top:0; } } } .inner{ padding: 10px 0; display: flex; align-items: center; flex-wrap: wrap; justify-content:space-between; .logo{ } nav { padding-right: 20%; text-align: right; line-height: 1.8; .telnum{ font-size: 3.0rem; span{ font-size: 1.6rem; } } .gnav { // max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; li { margin: 0 30px 0 0; font-size: 1.7rem; text-align: center; &:last-child{ margin: 0; } a { text-decoration: none; line-height: 1.6; color: #131313; display: flex; align-items: center; &:hover { color: #df7163; } &.current { color: #df7163; } } } } } .contact_btn{ width: 192px; height: 98px; position: absolute; top: 0; right: 0; a{ padding-top: 25px; line-height: 110%; display: block; width: 100%; height: 100%; box-sizing: border-box; background: #df7163; text-decoration: none; color: #fff; font-size: 1.8rem; text-align: center; span{ font-size: 1.3rem; display: block; } } } } .sp{ .logo{ position: absolute; left: 10px; top: 10px; } .contact_btn{ margin: 20px 30px 0; a{ padding: 15px; line-height: 110%; display: block; width: 100%; height: 100%; box-sizing: border-box; background: #df7163; text-decoration: none; color: #fff; font-size: 1.8rem; text-align: center; span{ font-size: 1.3rem; display: block; } } } } .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; cursor: pointer; color: #fff; } .menu-trigger { width: 50px; height: 50px; float: right; position: fixed; top: 2%; right: 1%; z-index: 9999; background: #df7163; transform: scale(0.8); // border: 1px solid #fff; } .menu-trigger span { width: 30px; height: 3px; margin: auto auto auto 10px; position: absolute; background-color: #fff; } .menu-trigger span:nth-of-type(1) { top: 15px; } .menu-trigger span:nth-of-type(2) { top: 0; bottom: 0; } .menu-trigger span:nth-of-type(3) { bottom: 15px; } .menu-trigger.active{ background: #fff; } .menu-trigger.active span{ background-color: #df7163; } .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); } .menu-trigger.active span:nth-of-type(2) { opacity: 0; } .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-7px) rotate(45deg); transform: translateY(-7px) rotate(45deg); } #overlay { width: 100%; height: 100vh; margin: auto; padding-top: 5%; position: fixed; top: 0; left: 0; z-index: 999; background: #f2e7e6; display: none; text-align: center; h1{ text-align: center; margin-bottom: 10px; } .info{ font-size: 1.4rem; text-align: center; } } #overlay ul{ width: 100%; margin: 10px 0 10px; } #overlay ul li { margin: 0; text-align: center; border-bottom: 1px solid #fff; padding: 10px; } #overlay ul li { a { text-decoration: none; font-size: 1.6rem; font-weight: bold; text-align: center; span { display: none; } } } } /* header.is-fixed{ position: fixed; top: 0; z-index: 100; left: 50%; transform: translate(-50%, 0%); background: url(../img/header.jpg) no-repeat center top; } */ footer { background: url(../img/common/bg_footer.jpg) no-repeat bottom center / cover; .inner { padding: 30px 0 20px; max-width: 1100px; margin: 0 auto; text-align: center; @include mq-down(lg) { padding: 30px 15px; } .info{ margin: 30px 0; color: #fff; line-height: 1.8; font-size: 1.4rem; } } address { text-align: center; padding: 15px; font-size: 1.4rem; color: #fff; } } #mainImg{ margin-bottom: -10px; video{ width: 100%; } } /*社内タブレットに合わせる為*/ /* --------------------------------------------------------------- */ /* 全体レイアウト */ /* --------------------------------------------------------------- */ /* 画面全体の設定 */ #loader_wrap { z-index: 9999; position: fixed; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; top: 0; background: url(../img/common/bg_main.jpg) repeat-y top center / cover; } /* ローディングアニメーションの設定 */ .loader { width: 203px; height: 68px; background: url("../img/common/logo.png") no-repeat; opacity: 0; animation: blink 1.5s infinite linear; } @keyframes blink { 50% { opacity: 1; } } /* ローディング終了後 */ .loaded { opacity: 0; visibility: hidden; } #container { overflow: hidden; .main{ section{ p{ line-height: 1.6; } .flex{ display: flex; flex-wrap: wrap; } .inner{ max-width: 1100px; margin: 0 auto; padding: 70px 0; @include mq-down(lg) { padding: 30px 15px; box-sizing: border-box; } img{ max-width: 100%; height: auto; } } img{ max-width: 100%; height: auto; } } } .toTop { position: fixed; bottom: 50px; right: 20px; z-index: 4; @include mq-down(md) { bottom: 80px; right: 10px; } } .fix_bnr { position: fixed; top: 150px; right: 0; z-index: 200; @include mq-down(md) { display: none; } } .fix_bnr_sp{ position: fixed; left: 0; bottom: 0; width: 100%; text-align: center; a{ display: flex; justify-content: center; align-items: center; background: #39608f; text-decoration: none; padding: 1em; box-sizing: border-box; color: #fff; text-align: center; &::before { content: url(../img/common/ico_cal.png); margin-right: 10px; } } } .gmap{ padding: 0; } } /* --------------------------------------------------------------- */ /* TOP */ /* --------------------------------------------------------------- */ #top{ #container{ .sec001 { padding: 40px 0; h2 { text-align: center; margin-bottom: 50px; } .box{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 40px; margin-bottom: 50px; @include mq-down(md) { padding: 0 15px; } .cont{ width: 45%; @include mq-down(lg) { width: 100%; margin-bottom: 30px; order: 1; } h3{ padding-bottom: 25px; border-bottom: 1px solid #df7163; margin-bottom: 40px; } .txt{ line-height: 2.0; margin-bottom: 50px; } .more{ text-align: center; } } figure{ width: 50%; @include mq-down(lg) { width: 100%; order: 2; } } } } .sec002 { .inner{ dl{ max-width: 800px; margin: 0 auto; dt{ background: #ddcfcb; padding: 20px; text-align: center; font-size: 2.4rem; cursor: pointer; position: relative; @include mq-down(md) { font-size: 1.8rem; } &::after { font-family: FontAwesome; content: "\f067"; position: absolute; right: 20px; top: 25px; font-size: 1.4rem; } &.active{ &::after { content: "\f068"; } } } dd{ background: rgba(255,255,255,0.6); display: none; padding: 25px; .box{ margin-bottom: 30px; font-size: 1.4rem; &:last-child{ margin-bottom: 0; } .tit{ font-size: 1.8rem; padding: 0 0 10px 0; border-bottom: 1px solid #000; margin-bottom: 20px; } p{ line-height: 1.8; } ol{ padding-left: 1em; list-style: decimal; li{ margin-bottom: 10px; line-height: 1.8; &:last-child{ margin-bottom: 0; } } } } } } } } .sec003 { .inner{ h2 { margin-bottom: 50px; text-align: center; } .box { margin-bottom: 40px; .plan_rss { display: flex; flex-wrap: wrap; justify-content: space-between; .mini { width:calc(25% - 10px); @include mq-down(md) { width: 100%; margin-bottom: 20px; } h4 { color: #664c00; margin-bottom: 10px; font-size: 1.6rem; line-height: 1.4; a { color: #000; } } .plan_img { width: 100%; img { width: 100%; height: 170px; object-fit: cover; @include mq-down(md) { width: 100%; height: 250px; } } } .plan_text { box-sizing: border-box; padding: 20px 0; font-size: 1.4rem; } .btn { text-align: center; margin-top: 20px; } } } } } } .news{ margin-bottom: 50px; .inner{ background: #fff; padding: 30px 50px; box-sizing: border-box; @include mq-down(md) { padding: 30px; } .flex{ justify-content: space-between; .tit{ width: 35%; text-align: center; h2{ margin-bottom: 30px; } @include mq-down(md) { width: 100%; margin-bottom: 30px; } } .cont{ width: 60%; @include mq-down(md) { width: 100%; } ul{ li{ margin-bottom: 20px; span{ margin-right: 20px; } &:last-child{ margin-bottom: 0; } &::before{ content: "\0025b6"; color: #df7163; font-size: 1.4rem; margin-right: 10px; } } } } } } } .reserve{ background:url(../img/top/bg_search.jpg) no-repeat top center / cover; .inner{ padding: 30px 30px; box-sizing: border-box; @include mq-down(md) { padding: 15px 15px; } .flex{ justify-content: center; align-items: center; @include mq-down(md) { justify-content: center; text-align: center; } h2{ font-size: 3.2rem; text-align: center; line-height: 1.8; color: #fff; margin-right: 50px; span{ font-size: 1.4rem; display: block; } margin-bottom: 0; @include mq-down(md) { margin-right: 0; margin-bottom: 20px; } } .plan_form{ padding-left: 30px; border-left: 1px solid #fff; width: 70%; @include mq-down(md) { width: 100%; padding-left: 0; border: 0; } .form_box{ display: flex; flex-wrap: wrap; align-items: center; @include mq-down(md) { display: block; } div{ margin: 10px 40px 10px 0; display: flex; flex-wrap: wrap; align-items: center; color: #fff; @include mq-down(md) { display: block; margin-right: 0; } .title{ font-size: 1.6rem; margin-right: 20px; @include mq-down(md) { margin-right: 20px; padding-bottom: 5px; border-bottom: 1px solid #fff; margin-bottom: 10px; margin-right: 0; } } input{ border: 0; } } .search_btn{ @include mq-down(md) { display: block; text-align: center; } input{ padding: 5px 30px; cursor: pointer; color: #000; border: 0; font-size: 1.6rem; } } } } } } } } } /* --------------------------------------------------------------- */ /* 下階層 */ /* --------------------------------------------------------------- */ #local{ #container{ .title { display: flex; justify-content: center; align-items: center; position: relative; height: 460px; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 0; @include mq-down(md) { height: 200px; } h1 { position: relative; text-align: center; box-sizing: border-box; font-size: 4.0rem; color: #fff; line-height: 1.8; span{ display: block; font-size: 1.6rem; } @include mq-down(lg) { line-height: 1.4; width: 90%; font-size: 2.8rem; padding-top: 0; } } } main { position: relative; } section{ h2 { text-align: center; margin-bottom: 50px; &.style01 { text-align: center; line-height:2.2; font-size: 2.8rem; margin-bottom: 30px; &::before{ content: url(../img/common/fig_title_pt01.png); display: block; } &::after{ display: block; content: ""; margin: 0 auto; height: 1px; background: #d7c79e; width: 400px; } } &.style02 { line-height: 1.6; font-size: 2.4rem; margin-bottom: 30px; font-weight: 500; padding-left: 20px; border-left: 4px solid #df7163; text-align: left; } } .inner{ max-width: 1100px; margin: 0 auto; padding: 50px 0; @include mq-down(lg) { padding: 30px 15px; box-sizing: border-box; } .flex{ figure{ text-align: center; } } h3{ &.style01 { text-align: center; line-height:2.2; font-size: 2.8rem; margin-bottom: 30px; &::before{ content: url(../img/common/fig_title_pt01.png); display: block; } &::after{ display: block; content: ""; margin: 0 auto; height: 1px; background: #d7c79e; width: 400px; } } &.style02 { line-height: 1.6; font-size: 2.4rem; margin-bottom: 30px; font-weight: 500; padding-left: 20px; border-left: 4px solid #df7163; text-align: left; } &.style03 { line-height: 1.6; font-size: 2.4rem; margin-bottom: 30px; padding: 0 0 10px 0; border-bottom: 1px solid #664c00; font-weight: 700; display: flex; align-items: center; &::before{ content: url(../img/common/ico_mountain.png); margin-right: 20px; } } } table{ width: 100%; background: #fff; &.fix_table{ table-layout: fixed; } tr{ th{ background: #fce9e6; padding: 15px; border: #df7163 1px solid; line-height: 1.6; align-items: center; width: 25%; vertical-align: middle; } td{ padding: 15px; border: #df7163 1px solid; line-height: 1.6; align-items: center; } } } } } .zoom { position: relative; &::after { font-family: FontAwesome; content: "\f00e"; color: #fff; position: absolute; right: 10px; bottom: 10px; font-size: 2.0rem; } } .scroll { @include mq-down(md) { overflow: auto; white-space: nowrap; } } .reserve{ background: #78a9d1; h2{ margin-bottom: 0; @include mq-down(md) { margin-bottom: 20px; } } .inner{ padding: 30px 30px; box-sizing: border-box; @include mq-down(md) { padding: 15px; } .flex{ justify-content: space-between; align-items: center; @include mq-down(md) { display: block; text-align: center; } .plan_form{ padding-left: 30px; border-left: 1px solid #222222; width: 80%; @include mq-down(md) { width: 100%; padding-left: 0; border: 0; } .form_box{ display: flex; flex-wrap: wrap; align-items: center; color: #fff; @include mq-down(md) { display: block; text-align: center; } div{ margin-right: 40px; margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; @include mq-down(md) { display: block; margin-right: 0; } .tit{ font-size: 1.8rem; font-weight: 700; margin-right: 20px; @include mq-down(md) { margin-right: 0; padding-bottom: 5px; border-bottom: 1px solid #222222; margin-bottom: 10px; } } } .search_btn{ @include mq-down(md) { display: block; text-align: center; } input{ padding: 5px 30px; cursor: pointer; color: #fff; background: #39608f; border: 0; font-size: 1.6rem; font-weight: 700; } } } } } } } } } /* --------------------------------------------------------------- */ /* 料金・予約 */ /* --------------------------------------------------------------- */ #local { .price { .title { background: url(../img/price/bg_title.jpg) no-repeat top center / cover; } .sec001{ .inner{ table{ margin-bottom: 20px; } .bnr{ margin-top: 20px; } } } .sec002{ .inner{ .box{ margin-bottom: 40px; } } } } } /* --------------------------------------------------------------- */ /* 寛ぎの館内 */ /* --------------------------------------------------------------- */ #local { .facility { .title { background: url(../img/facility/bg_title.jpg) no-repeat top center / cover; } .sec001{ background: url(../img/facility/bg_intro.png) no-repeat bottom center / contain; .inner{ .lead{ text-align: center; font-size: 1.6rem; line-height: 3.0; padding: 30px 0 100px; @include mq-down(md) { text-align: left; } } } } .sec002{ .inner{ max-width: 800px; .point{ padding: 45px; box-sizing: border-box; background: rgba(255,255,255,0.8); border: 1px dashed #df7163; @include mq-down(md) { padding: 20px; } li{ padding-bottom: 20px; border-bottom: 1px dotted #df7163; margin-bottom: 20px; &::before{ content: url(../img/common/ico_circle01.png); margin-right: 10px; } &:last-child{ margin-bottom: 0; } } } } } .sec003{ .inner{ .box{ text-align: center; margin-bottom: 40px; .person{ margin-bottom: 30px; } .flex{ justify-content: space-between; figure{ width: 49%; } } } .info{ padding: 35px; border: 1px dashed #df7163; background: #fff; p{ line-height: 2.4; } } figure{ img{ width: 100%; object-fit: cover; max-height: 480px; @include mq-down(md) { max-height: inherit; } } } } } .sec004{ h2{ padding: 40px 25px; text-align: center; background: #df7163; color: #fff; font-size: 3.2rem; line-height: 2.0; span{ display: block; font-size: 1.6rem; } } .inner{ .box{ text-align: center; margin-bottom: 40px; &:last-child{ margin-bottom: 0; } .txt{ margin-top: 30px; } .flex{ justify-content: space-between; figure{ width: 49%; } } figure{ img{ width: 100%; object-fit: cover; max-height: 480px; @include mq-down(md) { max-height: inherit; } } } } .gallery{ ul{ display: flex; flex-wrap: wrap; justify-content: center; @include mq-down(md) { justify-content: space-between; } li{ width:calc(25% - 10px); margin: 0 10px 10px 0; @include mq-down(md) { width:calc(50% - 10px); margin: 0 0 10px 0; } img{ width: 100%; height: 200px; object-fit: cover; } } } } } } } } /* --------------------------------------------------------------- */ /* 五島の味 */ /* --------------------------------------------------------------- */ #local { .cuisine { .title { background: url(../img/cuisine/bg_title.jpg) no-repeat top center / cover; } .sec001{ .inner{ max-width: 100% !important; padding: 40px 50px !important; box-sizing: border-box; @include mq-down(md) { padding: 40px 15px !important; } .flex{ justify-content: space-between; .photo_main{ width: 66.5%; @include mq-down(md) { width: 100%; margin-bottom: 10px; } } .photo_sub{ width: 32.5%; @include mq-down(md) { width: 100%; } li{ margin-bottom: 10px; } } } .photo_other{ display: flex; justify-content: space-between; flex-wrap:wrap; margin-bottom: 30px; li{ width:calc(20% - 10px); @include mq-down(md) { width:calc(50% - 10px); margin-bottom: 10px; } } } .lead{ text-align: center; line-height: 2.4; @include mq-down(md) { text-align: left; } } } } .sec002{ .inner{ .flex{ justify-content: space-between; .box{ width:calc(33.333333% - 20px); @include mq-down(md) { width: 100%; margin-bottom: 30px; } .txt{ margin-top: 40px; } } } } } .sec003{ h2 { padding: 40px 25px; text-align: center; background: #df7163; color: #fff; font-size: 3.2rem; line-height: 2.0; span { display: block; font-size: 1.6rem; } } .inner{ .box{ margin-bottom: 40px; .flex{ justify-content: space-between; .cont{ width: 42%; @include mq-down(md) { width: 100%; margin-bottom: 20px; order: 1; } .txt{ line-height: 2.0; } dl { padding: 20px; border: 1px dashed #df7163; background: #fff; margin-bottom: 20px; dt { line-height: 1.6; font-size: 2.0rem; margin-bottom: 20px; font-weight: 500; padding-left: 10px; border-left: 4px solid #df7163; text-align: left; } dd{ ul{ display: flex; flex-wrap: wrap; li { margin-bottom: 10px; margin-right: 10px; line-height: 1.6; font-size: 1.5rem; &::before { content: "・"; color: #df7163; } &:last-child { margin-bottom: 0; } } } } } } .photo{ width: 56%; @include mq-down(md) { width: 100%; order: 2; } } } } .box02{ .txt{ text-align: center; line-height: 2.0; @include mq-down(md) { text-align: left; } } .photo{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; li{ width:calc(50% - 10px); @include mq-down(md) { width: 100%; margin-bottom: 20px; } } } } } } } } /* --------------------------------------------------------------- */ /* アクセス */ /* --------------------------------------------------------------- */ #local { .access { .title { background: url(../img/access/bg_title.jpg) no-repeat top center / cover; } .sec001{ .inner{ .info{ text-align: center; margin-top: 20px; } } } .sec002{ .inner{ .route { padding: 20px; border: 1px dashed #df7163; background: #fff; margin: 20px 0; } .flex{ justify-content: space-between; margin-bottom: 30px; .cont { width: 48%; @include mq-down(md) { width: 100%; margin-bottom: 20px; } .route { padding: 20px; border: 1px dashed #df7163; background: #fff; margin: 20px 0; } } figure{ width: 48%; @include mq-down(md) { width: 100%; } } } table{ margin-bottom: 20px; } ul.bnr{ display: flex; flex-wrap: wrap; justify-content: center; @include mq-down(md) { justify-content: space-between; } li{ width:calc(33.333333% - 20px); margin: 10px; @include mq-down(md) { width:calc(50% - 10px); margin: 10px 0; } } } .box{ margin: 20px 0; .list{ margin: 20px 0; padding-left: 1em; list-style: disc; li{ line-height: 2.2; } } } } } .sec003{ img{ width: 100%; } } } } /* --------------------------------------------------------------- */ /* 新着情報 */ /* --------------------------------------------------------------- */ #local { .news { .title { background: url(../img/news/bg_title.jpg) no-repeat top center / cover; } .news_list{ max-width: 800px; margin: 0 auto; .inner { ul { li { margin-bottom: 20px; span { margin-right: 20px; } &:last-child { margin-bottom: 0; } &::before { content: "\0025b6"; color: #df7163; font-size: 1.4rem; margin-right: 10px; } } } } } .news_detail{ max-width: 800px; margin: 0 auto; .inner{ h2 { font-size: 2.4rem; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #df7163; text-align: left !important; line-height: 1.6; span{ font-size: 1.4rem; display: block; } } .detail{ p{ margin-bottom: 1em; } } .more01{ a{ display: block; max-width: 400px; margin: 50px auto 0; border: 1px solid #df7163; text-decoration: none; text-align: center; padding: 1em; &:hover{ background: #df7163; color: #fff; } } } } } } }