@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Cinzel');
@import url('https://fonts.googleapis.com/css?family=Hina+Mincho');

.image-wrapper {
  position: relative; /* 重ね合わせの基準にする */
  display: inline-block; /* 画像のサイズに枠を合わせる */
  width: 790px; /* 固定 */
}

.image-font1 {
  position: absolute; /* 絶対位置で配置する */
  top: -70px; /* 画像の上からの位置 */
  left: 220px; /* 画像の左からの位置 */
  font-size:450%;
  font-weight:bold;
  color: #791075;
}
/* tel */
.image-font2 {
   position: absolute; /* 絶対位置で配置する */
   top: 260px; /* 画像の上からの位置 */
   left: 400px; /* 画像の左からの位置 */
   font-size:120%;
   color: #e2d2d7;
   text-align:right;
   font-weight: bold;
}
/* 徒歩 */
.image-font4 {
   position: absolute; /* 絶対位置で配置する */
   top: 176px; /* 画像の上からの位置 */
   left: 416px; /* 画像の左からの位置 */
   font-size:210%;
   color: #a2b5b4;
   font-weight: bold;
}
/* tel */
.image-font5 {
   position: absolute; /* 絶対位置で配置する */
   top: 478px; /* 画像の上からの位置 */
   left: 370px; /* 画像の左からの位置 */
   font-size:200%;
   color: #222277;
   text-align:right;
   font-weight: bold;
}
/* 営業時間 */
.image-font3 {
   position: absolute; /* 絶対位置で配置する */
   top: 526px; /* 画像の上からの位置 */
   left: 398px; /* 画像の左からの位置 */
   font-size:200%;
   color: #225252;
   font-weight: bold;
}
.font-hina {
  font-family:  'Hina Mincho';
}
.font-cinzel {
  font-family:  'Cinzel';
}
.auto-style1 {
	color: #FF0000;
}
.img_yuuka {
    max-width: 100%;
    height: auto;
}
/* ↓レイアウト↓ */

*{
    line-height:150%;
}

body{
    color:#333;
    font-family: 'Cherry Swash', 'Noto Sans JP', fantasy;
    margin:0px 7px;
    background-color:#bfccb8;
    align-items:center;
}

.base {
    margin:0 auto;
    max-width:1050px;
    background-color:#443322;
    border-width:0px 3px;
    border-style:double;
    border-color:#666;
}

.header {
    padding:5px;
    text-align:center;
}

/*.footer {
    padding:5px;
    text-align:center;
}*/

.work {
    padding:15px;
}


.menu {
    font-size:130%;
    font-family: 'Cinzel', serif;
    margin:0px 0px 0px 0px;
    border-style:solid;
    border-color:#333;
    border-width:1px 1px 1px 1px;
    background-color:#6b2b40;
}

.box{
    overflow: hidden ;		/* floatを解除する */
}

.text{
    margin:15px 0px;
    padding:15px;
    line-height:180%;
}

.textmenu{
    text-align:center;
    padding:5px;
    margin:5px;
    word-spacing:20px;
    font-family: 'Cinzel', serif;
}
.topics-area {
    background-color: #d46422;
    padding: 20px;
    margin-left: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
}

img
{
	max-width: 90% ;
	height: auto ;
}


/* ↓タグ↓
   font-family: 'Nico Moji', 'Cherry Swash';
  */

h1{
    font-size:330%;
    font-weight:bold;
    margin:10px;
    color: #824232;
}

h2{
    font-size:180%;
    font-weight:normal;
    margin:10px;
    color:#000;
}

h3{
    font-family: 'Cinzel', serif;
    font-size:130%;
    font-weight:normal;
    text-align:center;
    margin:20px 0px;
}

h4{
    font-size:100%;
    font-weight:normal;
    margin:10px 0px;
    border-width:0px 0px 1px 0px;
    border-style:solid;
    border-color:#ccc;
}

h4:before{
    content:'✪';
    font-size:120%;
    margin:3px;
}

h5{
    font-size:90%;
    font-weight:normal;
    margin:5px;
}

h6{
    font-size: 26px;
    font-weight:normal;
    margin-top:15px;
    color:#e697e1;
}

em{
   background: linear-gradient(transparent 60%, #fff799 60%);
}

strong{
    background-color:#ffe4e1;
    font-weight:normal;
}

small{
    font-size:80%;
}

i{
    font-style:italic;
    color:#000;
}

a:link{
    color:#446659;
    text-decoration:none;
}

a:visited{
    color:#4ca57c;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

blockquote{
    padding:5px;
    font-size:110%;
    margin:5px 10px;
    color:#774499;
}

blockquote:before{
    content:'\201c';
    font-size:150%;
    color:#000000;
    margin:0px 10px;
}

blockquote:after{
    content:'\201d';
    font-size:150%;
    color:#000000;
    margin:0px 10px;
}

li{
    padding:5px;
}

dl{
    padding-left:3px;
    margin:10px;
}

dt{
    padding-left:5px;
}

dd{
    padding-left:10px;
}

address{
    font-size:70%;
}

cite{
    font-size:smaller;
}


/* ↓classタグ↓ */
.list1{
    list-style:none;
    text-align:center;
}

.list1 li{
display: inline-block;
}

.list2{
    list-style-type: upper-roman;
    list-style-position:inside;
}
.image-container{
    display: flex;
    justify-content: center;
    text-align:center;
}
.hr1{
    margin:5px 0px;
    border-top: 1px #ccc;
    border-bottom: 1px #fff;
    border-style:solid;
}

.hr2{
    margin:5px 0px;
    border-top: 1px #aaa;
    border-style:dashed;
}

.hr3{
    margin:5px 0px;
    height:20px;
    border-width:0px;
}

.p1{
    padding:5px;
    margin:5px 0px;
    font-size:90%;
}

.p2{
    border-style:double;
    border-width:3px;
    padding:3px;
    margin:5px 0px;
    font-size:90%;
}

.p3{
    border-style:dashed;
    border-width:1px;
    padding:5px;
    margin:5px 0px;
    font-size:90%;
    background-color:#fafafa;
}
.text-overlay {
  position: absolute; /* 絶対位置で配置する */
  top: 20px; /* 画像の上からの位置 */
  left: 150px; /* 画像の左からの位置 */
  font-size:140%;
  color: #bb3784;
}

.dt1{
    margin:7px 0px;
    
}

.dd1{
    font-size:90%;
    border-width:0px 0px 0px 3px;
    border-style:double;
}

.memo{
    background-color:#fafafa;
    font-size:80%;
    padding:0px 10px;
    height:100px;
    overflow:auto;
    margin:5px 10px;
}

.img1{
    box-shadow:1px 1px 3px -1px #999999;
-moz-box-shadow:1px 1px 3px -1px #999999;
-webkit-box-shadow:1px 1px 3px -1px #999999;
}
/*フッター設定
---------------------------------------------------------------------------*/
footer {
	width: 982px;
	margin: 0px auto;
	clear: both;
	text-align: center;
}
footer .pr {
	display: block;
	font-size: 80%;
}
footer a {
	text-decoration: none;
}

.counter{
    font-family: 'Cinzel', serif;
    font-size:80%;
}


/*↓ディスプレイ480px以下用↓*/

@media screen and (max-width:560px) 

{
.image-wrapper {
  width: 560px; /* 画像の幅を560にする */
  display:flex;
  justify-content:center;
}
.image-font1 {
  position: absolute; /* 絶対位置で配置する */
  top: -80px; /* 画像の上からの位置 */
  left: 220px; /* 画像の左からの位置 */
  font-size:400%;
  font-weight:bold;
  color: #791075;
}
/* 徒歩 */
.image-font4 {
   position: absolute; /* 絶対位置で配置する */
   top: 104px; /* 画像の上からの位置 */
   left: 296px; /* 画像の左からの位置 */
   font-size:200%;
   color: #a2b5b4;
   font-weight: bold;
}
/* tel */
.image-font2 {
   position: absolute; /* 絶対位置で配置する */
   top: 177px; /* 画像の上からの位置 */
   left: 274px; /* 画像の左からの位置 */
   font-size:110%;
   color: #e9dada;
   text-align:right;
   font-weight: bold;
}
/* tel */
.image-font5 {
   position: absolute; /* 絶対位置で配置する */
   top: 328px; /* 画像の上からの位置 */
   left: 290px; /* 画像の左からの位置 */
   font-size:170%;
   color: #222277;
   text-align:right;
   font-weight: bold;
}
/* 営業時間 */
.image-font3 {
   position: absolute; /* 絶対位置で配置する */
   top: 360px; /* 画像の上からの位置 */
   left: 302px; /* 画像の左からの位置 */
   font-size:190%;
   color: #225252;
   font-weight: bold;
}
.text-overlay {
  position: absolute; /* 絶対位置で配置する */
  top: 30px; /* 画像の上からの位置 */
  left: 100px; /* 画像の左からの位置 */
  font-size:140%;
}

.base{
    width:auto;
    margin:0px;
}

.work{
    float:none;
    width:auto;
    margin:0px;
}

.text{
    float:none;
    width:auto;
    margin:0px;
}

.menu{
    float:none;
    width: 560px;
    text-align:center;
}

.textmenu a{
    display:block;
    font-size:120%;
}

.textmenu a:hover{
    background-color:#fafafa;
}


.list1 li{
    display:block;
}

.list1 a{
    display:block;
    font-size:110%;
}

.list1 a:hover{
    background-color:#fafafa;
}

h1{
    font-size:110%;
}
.image-container{
    display: block;
    width: 500px;
    justify-content: center;
}
.img-yuuka {
    width: 172%;
    height: auto;
}

.topics-area {
    padding: 10px;
    margin-left: 15px;
    margin-bottom: 15px;
}
.counter{
    justify-content: center;
	max-width: 500px;
}
/*フッター設定
---------------------------------------------------------------------------*/
footer {
    justify-content: center;
	max-width: 600px;
}

}