@charset "utf-8";
/*
Theme Name: 男のタイムサービス専用テーマ店舗ブログ用

/* 親サイトの方は店舗向けにカスタマイズされてしまっているので、子テーマ化はできませんでした
-------------------------------------------------------------- */
html {height:100%;}
html, body{font-size:16px; margin:0;}
body {background-color:#ebf6fd; min-height:100%; display:flex; flex-direction:column; justify-content:space-between;}
.main {width:480px; margin:0 auto;background-color:#ebf6fd; text-align:center;}
.mainLead {white-space: nowrap; padding: 1rem 0; font-size:1rem; letter-spacing:2px; text-align:center;}

/* menu */
header {position:fixed; top:0; left:50%; transform:translateX(-50%); width:80%; max-width:480px; z-index:10;}
header > div {display:flex; justify-content:flex-end; align-items:flex-end; height:80px;}
header   #navToggle {border-radius:50%; background-color:rgba(0,104,183,0.8); position:relative; width:50px; height:50px; cursor:pointer;}
header   #navToggle >span {display:block; position:absolute; left:12.5px; width:25px; height:3px; margin:0 auto; background-color:#fff; transition:0.5s ease-in-out;}
header   #navToggle >span:nth-child(1) {top:12px;}
header   #navToggle >span:nth-child(2) {top:24px; left:50%; transform:translateX(-50%);}
header   #navToggle >span:nth-child(3) {top:35px;}
header > nav {display:none;}
header > nav > ul {list-style:none; width:100%; background-color:rgba(0,104,183,0.8); display:flex; flex-direction:column; align-items:flex-end; padding:0}
header > nav > ul > li {list-style:none; width:70%; border-bottom:1px solid #fff; margin:20px 20px 0 0;}
header > nav > ul > li:first-child {margin-top:40px;}
header > nav > ul > li:last-child {margin-bottom:45px;}
header > nav > ul > li > a {font-size:1.2rem; color:#fff; padding:0 10px 3px; display:flex; justify-content:space-between; align-items:center; }
header > nav > ul > li > a::after {content:'\f105'; font-family:fontawesome;}

header.open #navToggle > span:nth-child(1) {transform:rotate(135deg); top:24px;}
header.open #navToggle > span:nth-child(2) {width:0;}
header.open #navToggle > span:nth-child(3) {transform:rotate(-135deg); top:24px;}

header a {text-decoration:none;}
/* menu */

/* main */
.contTitle, .shopInfo, .shopLink, .pagination { font-size:0.875rem; }
/* main */

/* footer */
#footer {background-color:#d5d5d5; margin-top:3rem;}
#footUpper {max-width:450px; margin:0 auto;}
.footerTitle {display:flex; align-items:center; font-size:1rem; padding:2rem 0 1.5rem;}
.footerTitle > span{font-size:0.85rem; color:#fff; background-color:#000; padding:0.3rem 0.5rem; margin-right:1rem;}
.footMenu {}
.footMenu a {border-bottom:1px solid #000; display:flex; justify-content: space-between; align-items:center; color:#000; font-size:1rem; padding:0 0.5rem 0.3rem; margin-top:1.5rem;}
.footMenu a::after {content:'\f105'; font-family:fontawesome;}
.footSubMenu {margin:1.5rem auto 2.5rem;; text-align:center;}
.footSubMenu div:first-child {margin-bottom:1rem;}
.footSubMenu a {color:#000; text-decoration:underline !important;}
#footLower {color:#fff; background-color:#0068b7; padding:1rem 0; text-align:center;}

#footer a {text-decoration:none;}
/* footer */

@media screen and (max-width:540px){
    header {width:100%;}
    header #navToggle {margin-right:4vw;}
    header > nav > ul > li > a {font-size:4vw;}
    div.main {width:90%; max-width:480px;}
    .mainLead {font-size:3.5vw;}
    .homeCaution {font-size:3.5vw; margin:2vw 0;}
    .headLead{margin-bottom:5vw; background-size:contain;}
    .headLead > div:first-child{font-size:4vw;}
    .headLead > div:last-child{font-size:3vw;}
    .todaysTitle {font-size:4vw;}
    .ditaysList > a {font-size:3vw;}
    
    .topRecommend {padding:2vw 0;}
    .topRecommendTitle {width:90%; max-width:480px;}
    .topRecommendTitle > span:first-child {font-size:2.5vw;}
    .topRecommendTitle > span:last-child {font-size:3vw;}
    
    #topSearch {margin:10vw 0;}
    .topSearchTitle {font-size:3vw; margin-top:0;}
    
    #topLatestTitle {font-size:4vw;}
    #topLatestTitle > span {font-size:2.5vw;}
    
    .postBoxTitle {font-size:3vw; padding:2vw 0;}
    .postBox {font-size:3.5vw;}
    .postBoxInfo > span {font-size:3vw !important;}
    .postBoxContText > span, .postBoxContLink > div > span {font-size:3vw !important;}
    
    #footUpper {width:90%; max-width:450px;}
    .footerTitle {font-size:3vw;}
    .footerTitle > span {font-size:2.5vw;}
    .footMenu a {font-size:3vw;}
    .footSubMenu {margin:2vw auto 3.5vw;}
    .footSubMenu a {font-size:3vw;}
    #footLower {font-size:3vw;}
}