/*┌────────────────────────────────────── /*│ スタイルシート v0.0.1 (2017/01/05) /*│ style.css /*└─────────────────────────────────────*/ /*-- [ メイン ] --------------------------------------------------------------*/ #Contents>nav:nth-of-type(1) { background-color: #E47CC0; } #Contents>nav:nth-of-type(1)>table th, #Contents>nav:nth-of-type(1)>table td { width:25%; } main { padding-top:81px; /*height: 1000px;*/ } main>article { position: relative; display: block; margin: 35px auto 0; padding:0; width: 960px; } main>article>div.Chapter {color:#E47CC0;} main>article>div.Chapter>span {font-weight: bold;} h2 { margin:30px 0; text-align: center; } @media screen and (max-width: 767px){ main {padding-top:10px;} main>article { margin-top:0; width: 100%; } /*main>article {display:none;}*/ /* #About, #Shop, .Box, .ShopBox {display:none;} */ } /* 説明 */ #About { width: 960px; background-color : #FFF; /*margin-bottom:30px;*/ padding-top:30px; } #About>p { position: absolute; top: 250px; left: 150px; text-align: center; line-height:200%; margin-bottom:30px; } @media screen and (max-width: 767px){ #About { width: 100%; } #About>p { position: relative; top: 0; left: 0; } #About>p {text-align: left;} } .Box { width: 960px; background-color : #FFF; margin-bottom:30px; padding:30px; } .Box h3 { font-size: 30px; font-size: 3.0rem; color:#332a20; } .Box h3>p { padding-top:5px; display: block; height: 50px; line-height:20px; } .Box h3>p>span { font-size: 13px; font-size: 1.3rem; } .Box h3>div { overflow: hidden; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; width: 50px; height: 50px; text-align: center; line-height:50px; float: left; margin-right:10px; } .Box table { width: 100%; margin-bottom:30px; } .Box th, .Box td { height:88px; border-bottom: 1px solid #F0EDE5; } .Box th { white-space: nowrap; font-size: 16px; font-size: 1.6rem; font-weight: bold; line-height:120%; text-align: left; } .Box th>span { color:#b09228; font-size: 11px; font-size: 1.1rem; font-weight: normal; } .Box td:nth-of-type(1) { padding: 0 10px 0 100px; color:#332A20; font-size: 13px; font-size: 1.3rem; text-align: left; } .Box td:nth-of-type(2) { color:#b09228; white-space: nowrap; font-size: 15px; font-size: 1.5rem; font-weight: bold; text-align: right; } .Box>div { width: 900px; height:180px; background: #E47BBF url(images/bg_tel.jpg) no-repeat; padding: 30px 50px; } .Box>div>div.Chapter { color:#FFF; margin-bottom:5px; } .Box>div>div.Chapter>h3 { color:#FFF; font-size: 24px; font-size: 2.4rem; } .Box>div>table { background: #FFF; border-collapse: collapse; width: 800px; height:80px; margin:0 auto; } .Box>div>table th, .Box>div>table td { border: 1px solid #F0EDE5; padding-left:15px; } .Box>div>table th { color:#332A20; font-size: 14px; font-size: 1.4rem; text-align: left; font-weight: normal; line-height:200%; } .Box>div>table td:nth-of-type(1) { padding:0 15px; width: 330px; text-align: right; } .Box>div>table td:nth-of-type(1)>div { font-size: 18px; font-size: 1.8rem; color: #464637; overflow: hidden; border-radius: 18px; -webkit-border-radius: 18px; -moz-border-radius: 18px; width: 36px; height: 36px; text-align: center; line-height:36px; float: left; margin-right:10px; } .Box>div>table td:nth-of-type(1)>p { height: 36px; width: 250px; float: left; line-height:36px; color:#E47BBF; font-size: 34px; font-size: 3.4rem; } @media screen and (max-width: 767px){ .Box { width: 100%; padding: 20px 0; } .Box th { white-space: normal; } .Box td:nth-of-type(1) { padding: 0 5px; } .Box>div { width: 100%; height:auto; background-image:none; padding: 20px 0; } .Box>div>table { width: 320px; height:160px; } .Box>div>table th, .Box>div>table td {display:block;} .Box>div>table td:nth-of-type(1) { padding:0 5px; width: 320px; } } .ShopBox { width: 960px; background-color : #FFF; margin-bottom:30px; padding:30px; } .ShopBox>div { width: 460px; padding-right:30px; /*padding:30px;*/ } .ShopBox:after { /* 回解除 */ content: "."; display: block; clear: both; height: 0; visibility: hidden;/* 見えない存在 */ } .ShopBox h3>p { font-size: 26px; font-size: 2.6rem; line-height:30px; margin-bottom:15px; } .ShopBox h3>p>span { font-size: 13px; font-size: 1.3rem; position:relative; top:-5px; margin-left:10px; } .ShopBox h3>div { width: 36px; height: 24px; text-align: center; line-height:24px; float: left; margin-right:10px; } .ShopBox h3>img { margin-right:10px; } .ShopBox h3:after { /* 回解除 */ content: "."; display: block; clear: both; height: 0; visibility: hidden;/* 見えない存在 */ } .ShopBox p { font-size: 14px; font-size: 1.4rem; line-height:200%; margin-bottom:15px; } .ShopBox table{ font-size: 14px; font-size: 1.4rem; border : 1px solid #E6E0D2;/**/ border-collapse: collapse; width:100%; text-align: center; margin-bottom:15px; } .ShopBox table th, .ShopBox table td { border: 1px solid #E6E0D2; padding:10px; } .ShopBox table th { white-space: nowrap; background-color : #F0EDE5; } @media screen and (max-width: 767px){ .ShopBox {width: 100%;} .ShopBox>div{ margin: 0 auto; width: 320px; padding:10px; } .ShopBox>div.FltL { float: none; /*margin-bottom:10px;*/ } } #Omiyage,#Omiyage td { border:none; text-align: left; } /*-- [ 色 ] ------------------------------------------------------------------*/ /* 文字色 */ .Oudoiro {color:#b09228;} .Pink {color:#E47BBF;} /* 背景色 */ .BgOudoiro {background-color:#b09228;} .BgPink {background-color:#E47BBF;} .BgGray {background-color:#f0ede5;} /*----------------------------------------------------------------------------*/