@charset "UTF-8";
/*
Theme Name:町屋五丁目
Author: SKY PICNIC / Emi Toda
Description: WordPress Theme for 町屋五丁目
Version: 1.0.0
*/

/*--------------------
1. General
--------------------*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');
html{
    font-size: 15px;
    font-feature-settings: "palt";
}
body {
    background-color: #f6f4e7;
    font-family: 'Zen Maru Gothic',YuGothic,"メイリオ", Meiryo, Osaka, MS PGothic, "M PLUS Rounded 1c",  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  sans-serif!important;
	-webkit-text-size-adjust: 100%;
    letter-spacing: 0.04em;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
	font-weight:500;
	color: #222;
	margin: 0;
	padding: 0;
    color: #42AD9E;
}
/* Windows */
@font-face {
  font-family: YuGothicM;
  font-weight: normal;
  src: local('YuGothic-Medium'),
       local('Yu Gothic Medium'),
       local('YuGothic-Regular');
}
@font-face {
  font-family: YuGothicM;
  font-weight: bold;
  src: local('YoGothic-Bold'),
       local('Yu Gothic');
}
input, textarea, select, button {
	padding: 10px;
	border:solid 1px #222;
    font-family : inherit;
    font-size   : 100%;
    margin-top: 5px;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
    color: #F6F5EF;
    font-weight: bold;
    background-color: #42AD9E;
	border:#42AD9E 1px solid;
	padding: 10px 30px;
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  box-sizing: border-box;
  cursor: pointer;
    font-size: 100%;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
select{
    height: 40px;
    width: 250px;
	font-size: 15px;
    border: 1px solid #222;
  background-color: white;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  /* reset */
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}
select:focus {
  background-image:
    linear-gradient(45deg, black 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, black 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  outline: 0;
}
a{
	color: #222;
	text-decoration: underline;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all  1s ease;
}
a:hover{
    color: #361E14!important;
}
a:hover, a:focus, a:active, a.active {
 	color: #222;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all  1s ease;
	filter:alpha(opacity=80); /* IE 6,7*/
	-ms-filter: "alpha(opacity=50)"; /* IE 8,9 */
	-moz-opacity:0.5; /* FF , Netscape */
	-khtml-opacity: 0.5; /* Safari 1.x */
	opacity:0.5;
	zoom:1; /*IE*/
}
ul, li{
	list-style: none;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}
h1{
    margin-block-start: 0em;
    margin-block-end: 0em;
}
h2{
	font-size: 20px;
}
h2.ttl{
    text-align: center;
    font-size: 30px;
}
h3{
    font-size: 20px;
}
p{
    color: #361E14;
    font-size: 16px;
    line-height: 2;
}
blockquote{
    padding: 20px;
    border:2px solid #804040;
}
.bgyellow{
    background-color: #F4E4CA;
}
.w100{
    width: 100%!important;
}
.wauto{
    width: auto!important;
}
/*
utils
---------------*/
@media screen and (max-width: 1024px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 1025px) {
  .sp {
    display: none !important;
  }
}
.container{
    width:90%;
    margin: 0 auto;
    padding: 0;
}
@media (min-width:1200px){
    .container{
        max-width:1140px
        }
}
.blockspace{
    padding: 50px 0;
}
.headspace{
    padding-top: 90px;
}
.flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pt{
    padding-top: 150px;
    position: relative;
}
.pb{
    padding-bottom: 150px;
    position: relative;
}
/*----- button  -----*/
.button{
    font-size: 18px;
    color: #f6f5ef!important;
    display: inline-block;
    position: relative;
    cursor: pointer;
    background-color:#42AD9E;
    margin:10px 0;
    font-weight: 600;
    letter-spacing: 0.2rem;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
    -webkit-box-shadow: 0 0.3rem 0 #26645b;
    box-shadow: 0 0.3rem 0 #26645b;
}

.button:hover{
    color: #f6f5ef!important;
}
.button a{
    color: #f6f5ef !important;
    text-decoration: none!important;
}
.button02{
    font-size: 1.6rem;
    display: inline-block;
    position: relative;
    cursor: pointer;
    border:1px solid #804040;
    margin:10px 0;
    font-weight: 600;
    letter-spacing: 0.2rem;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
}
/*ポップアップ*/
.remodal {
    color: #804040!important;
  position: relative;
  padding: 25px;
}
.remodal p{
    text-align: justify;
}
.remodal img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.remodal-cancel {
  color: #F6F5EF!important;
  background: #804040!important;
  width: 100%;
  font-size: 18px!important;
  margin-top: 25px;
}
.remodal-cancel:hover {
  background: #333;
}

.text-wrap {
    width: 100%;
    max-width: 620px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    margin-block-start: 30px;
    margin-block-end: 50px;
    text-align: justify;
    text-justify: inter-ideograph;
}
/*--------------------
common parts
--------------------*/
.fadein {
  opacity : 0;
  transform: translateY(-20px);
  transition: all 1s;
  transition-delay:1s;
}
.align-center {
    text-align: center !important;
    margin: 0 auto;
}
.align-left{
    float: left;
}
.align-right{
    float: right;
}
.dot{
  padding: 0 0 0 30px;
  background: url(images/dot.png) repeat-y left top/7px;
}
.border {
	text-align: center;
    width: 100%;
    height: 7px;
	background:url(images/border.png) no-repeat center;
    margin: 70px auto;
    background-size: 100%;
}
.border-mb{
    text-align: center;
    width: 100%;
    height: 7px;
    background:url(images/border.png) no-repeat center;
    margin: 0 auto 70px auto;
    background-size: 100%;
}
.flower{
    width: 40px;
    margin: 0 auto 50px auto;
}
.wave {
      height: 8px;
      margin: 0 0 20px 0;
      padding: 0;
      line-height: 0;
      background-image: url(images/wave.png);
      background-repeat: repeat-x;
      background-size: auto 100%;
      position: relative;
  }
h2{
  -webkit-transition: all 2s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}
h2.move {
  -webkit-transform: translate(-400px, 0);
  opacity: 0;
}
.bgbrown{
    background-color: #622e2e;
}
.moveline{
	float: left;
    margin: 20px 20px 0 0;
    background-color: rgba(58,58,58,1);
	height: 1px;
	width: 20%;
}
.yellow-underline{
    font-weight: bold;
     text-align: center;
     position: relative;
     padding: 0 0 5px;
    margin: 10px auto;
}
.yellow-underline::after{
     position: absolute;
     content: "";
     left: 0;
     right: 0;
     bottom: 0;
     width: 60px;
     margin: auto;
     border-bottom: 2px solid #804040;
}

.nexprev{
    text-align: center;
    margin:20px auto 50px auto;
}
.nexprev a{
    display: block;
    margin: 10px auto 50px auto;
    font-size: 15px;
    text-align: center;
    padding: 10px;
    color: #6f6e6e;
}
.pagination-box{
    margin: 10px auto 30px auto;
    text-align: center;
}
.wp-pagenavi a, .wp-pagenavi span{ 
    border-radius: 20px!important;
    margin: 5px!important;
    padding: 10px!important;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #804040!important;
}

/*--------------------
nav 
--------------------*/
header {
    color: #f6f5ef;
    z-index: 100;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all  1s ease;
    position: fixed;
    width: 100%;
    height: 130px;
    background-size: 100% 100%;
    z-index: 100;
}
#header-wrap{
    transition: 1s;
    position: relative;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all  1s ease;
}
#header-wrap .headertext{
    position: absolute;
    top: 15px;
    left: 50px;
    z-index: 1;
    font-size: 13px;
}
#header-wrap h1 {
    font-size: 20px;
    color: #F4E4CA;
    transition: .3s;
    margin: 20px auto 0px auto;
    height: auto;
    text-align: center;
    position: absolute;
    top: 15px;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 1;
}
#header-wrap h1 a img.pc{
    width: 310px;
}
#header-wrap .sns{
    position: absolute;
    top: 45px;
    right: 40px;
    z-index: 1;
}
#header-wrap .sns a{
    float: left;
    position: relative;
    margin-right: 10px;
    text-align: center;
}
#header-wrap .sns a img{
    width: 29px;
    height: 29px;
}
#header-wrap .contact{
    text-align: center;
    width: 178px;
    font-weight: 600;
    position: absolute;
    top: 120px;
    right: 95px;
    padding-bottom: 5px;
    z-index: 1;
    background:url(images/contactbg.png) bottom repeat-x;
    background-size: 100%;
}

nav{
    font-size: 18px;
    width: 100%;
    font-weight: 600;
    height: 20px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    top:65px;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

nav ul{
    display: inline-block;
    margin: 0 auto;
}
nav ul li{
    margin: 0 10px;
        float: none;
}

nav ul li a,
nav ul li a:visited {
    color: #f4e4ca!important;
}
#nav-toggle {
        z-index: 1000;
        padding: 20px;
        position: fixed;
        top: 16px;
        right: 20px;
        height: 20px;
        cursor: pointer;
        border:#F4E4CA solid 1px;
    }
#nav-toggle > div {
        position: relative;
        width: 30px;
    }
#nav-toggle span {
        width: 100%;
        height: 3px;
        left: 0;
        display: block;
        background: #F4E4CA;
        position: absolute;
        transition: top .5s ease, -webkit-transform .6s ease-in-out;
        transition: transform .6s ease-in-out, top .5s ease;
        transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
    }
#nav-toggle span:nth-child(1) {
        top: 0;
    }
#nav-toggle span:nth-child(2) {
        top: 10px;
    }
#nav-toggle span:nth-child(3) {
        top: 21px;
    }
.open #nav-toggle span {
        background: #F4E4CA;
        }
.open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
.open #nav-toggle span:nth-child(2) {
        top: 11px;
        width: 0;
        left: 50%;
    }
.open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
#gloval-nav {
        background: #361E14;
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 990;
        text-align: center;
        display: flex;
        visibility: hidden;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        opacity: 0;
        transition: opacity .6s ease, visibility .6s ease;
    }
#gloval-nav a {
        color: #fff;
        margin: 0 5px;
        text-decoration: none;
        transition: color .6s ease;
    }
#gloval-nav a:hover,
,.open #gloval-nav li.indent a:hover {
    opacity: 0.5;
    }
#gloval-nav a img{
        width: 30px;
        height: 30px;
    }
#gloval-nav a img.bnr{
    width: 500px;
    height: auto;
}
#gloval-nav ul {
        list-style: none;
        margin: -10px 0 0 -10px;
        display:block;
    }
#gloval-nav ul li {
        margin: 10px;
        opacity: 0;
        -webkit-transform: translateX(200px);
        transform: translateX(200px);
        transition: opacity .2s ease, -webkit-transform .6s ease;
        transition: transform .6s ease, opacity .2s ease;
        transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
    }

#gloval-nav ul li.indent a{
    padding-left: 30px;
    font-size: 14px;
    color: #f9f8f3!important;
    opacity: 0.7;
}
#gloval-nav ul li:nth-child(2) {
        transition-delay: .15s;
    }
#gloval-nav ul li:nth-child(3) {
        transition-delay: .3s;
    }
#gloval-nav ul li:nth-child(4) {
        transition-delay: .45s;
    }
#gloval-nav ul li:nth-child(5) {
        transition-delay: .6s;
    }
#gloval-nav ul li:nth-child(6) {
        transition-delay: .75s;
    }
#gloval-nav ul li:nth-child(7) {
        transition-delay: .9s;
    }
#gloval-nav ul li:nth-child(8) {
        transition-delay: .105s;
    }
#gloval-nav ul li:nth-child(9) {
        transition-delay: .12s;
    }
#gloval-nav ul li:nth-child(10) {
        transition-delay: .135s;
    }
#gloval-nav ul li:nth-child(11) {
        transition-delay: .15s;
    }
#gloval-nav ul li:nth-child(12) {
        transition-delay: .165s;
    }
.open {
        overflow: hidden;
    }
.open #gloval-nav {
        visibility: visible;
        opacity: 1;
    }
.open #gloval-nav li {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        transition: opacity .9s ease, -webkit-transform 1s ease;
        transition: transform 1s ease, opacity .9s ease;
        transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
    }
.open #gloval-nav li,.open #gloval-nav li.indent{
    width: 500px;
    margin: 0 auto;
    text-align: left;
}

.open #gloval-nav li.snsli{
    padding-top: 10px;
}
.toden-inner{
    width: 100%;
    height:75px;
    overflow: hidden;
}
.toden{
  animation: flowing 10s linear infinite;
  transform: translateX(100%);/*初期位置*/
}

@keyframes flowing {
  100% {
    transform: translateX(-50%);
  }
}
/*--------------------
top
--------------------*/
.top-img{
    position: relative;
	text-align: center;
    margin: 0 auto;
    padding:  0;
}
.top-img img{
	width: 100%;
}
.metaslider.ms-theme-outline .flexslider ul.slides .caption-wrap, .metaslider.ms-theme-outline .rslides .caption-wrap, .metaslider.ms-theme-outline div.nivoSlider .nivo-caption{
    background: rgba(255,255,255,0.9)!important;
    color: #000!important;
}
.metaslider.ms-theme-outline .flexslider ul.slides .caption-wrap .caption, .metaslider.ms-theme-outline .rslides .caption-wrap .caption, .metaslider.ms-theme-outline div.nivoSlider .nivo-caption{
    padding: 0px!important;
}
.caption{
    padding: 0!important;
}
/*
.metaslider.ms-theme-blend .flexslider ul.slides .caption-wrap, .metaslider.ms-theme-blend .rslides .caption-wrap, .metaslider.ms-theme-blend div.nivoSlider .nivo-caption{
    background: rgba(255,255,255,0)!important;
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(rgba(255,255,255,0)))!important;
    background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0))!important;
    background-color: #fff!important;
    transition:none!important;
}
.metaslider.ms-theme-blend .flexslider ul.slides .caption-wrap .caption, .metaslider.ms-theme-blend .rslides .caption-wrap .caption, .metaslider.ms-theme-blend .nivoSlider .nivo-caption{
    color: #000!important;
    transition:none!important;
}
.metaslider.ms-theme-blend .flexslider ul.slides .caption-wrap .caption, .metaslider.ms-theme-blend .rslides .caption-wrap .caption, .metaslider.ms-theme-blend .nivoSlider .nivo-caption{
    top: 10px;
}
.metaslider.ms-theme-blend .flexslider ul.flex-direction-nav li a.flex-prev:before, .metaslider.ms-theme-blend .rslides_nav.prev:before, .metaslider.ms-theme-blend div.nivoSlider div.nivo-directionNav a.nivo-prevNav:before, .metaslider.ms-theme-blend .coin-slider .coin-slider div a.cs-prev:before{

    background-image: none!important;
  position: absolute;
  content:"\f054";
  color: #71c9f8;
  font-size: 100px;
  font-family: fontAwesome;
}*/
.top-more-box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    height: auto;
    margin: 0 auto;
    padding: 50px 30px 100px 30px;
    z-index: 0;
    align-items: center;
}
.top-more-box .flex {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding:0 30px 0 0;
}
.top-more-box .flex-inner {
    width: 100%;
}
.top-more-box .flex-inner p{
    text-align: justify;
}
.top-more-box .flex-inner a img{
    width: 450px;
}
.top-more-box-inner{
    width: 100%;
}
.clipbox{
    width: 70%;
}
.clipbox img{
    width: 100%;
}
/*--------------------
top news
--------------------*/

.news-list{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify-content;
    justify-content: justify-content;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.news-item{
    width: calc( (100% - 156px) / 3);
    transition: 0.3s;
    position:relative;
    margin: 0 45px 0 0;
    padding: 10px;
}
.news-item:nth-child(3n) {
    margin-right: 0;
}
.news-text p{
    width: 100%!important;
    margin:5px 0!important;
    padding: 0;
}
a.news-link{
    display: block;
}
a.news-link:hover{
    filter:alpha(opacity=80); /* IE 6,7*/
    -ms-filter: "alpha(opacity=50)"; /* IE 8,9 */
    -moz-opacity:0.5; /* FF , Netscape */
    -khtml-opacity: 0.5; /* Safari 1.x */
    opacity:0.5;
    zoom:1; /*IE*/
}
.news-image {
    width: clamp(0px,calc(100% - 0.3vw),321.93px);
    height: clamp(0px,calc(100% - 0.26vw),178.956px);
    overflow: hidden;
    border-radius: 20px;
    border: #804040 3px solid;
}
.news-image img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    position: relative;
}
h3.news-title{
    margin: 5px 0;
}
.news-title{
    font-weight: bold;
}

.concept{
/* position: relative;
  background-image: url(images/bg_roji.jpg);
  background-size: cover;
  padding: 80px 0 140px 0;
    background-position: center;*/
    margin: 100px 0;
}
.concept img.conceptbg{
    width: 100%;
    margin: 80px auto 0 auto;
}
.top-company{
    position: relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content: center;
    padding: 50px 30px;
}
.top-company-text.sns{
    float: left;
}
.top-company-text .sns a img{
    width: 30px;
    height: 30px;
}
.top-company-map{
    height: 300px;
    margin-left: 50px;
}
/*--------------------
top and 下層 rooms
--------------------*/
.rooms-bnr a img{
    width: 95%;
    margin: 10px;
}
.rooms-about img{
    width: 90%;
    height: auto;
    margin-right: 10px;
}
.rooms-about-text h2 {
    color: #436194;
    width: fit-content;
  position: relative;
  padding: 1rem 2rem;
  border: #436194 solid 4px;
}

.rooms-thumb{
    margin: 20px 0 50px 0;
}
.rooms-thumb a{
    overflow: hidden;
    height: 160px;
    width: 20%;
    margin: 0 10px;
}
.rooms-thumb img{
    float: left;
    margin: 0 20px;
    width: 100%;
    height: auto;
}
.rooms-category{
    font-size: 20px;
}
.rooms-nav{
    text-align: center;
    margin: 0 auto 50px auto;
    padding: 20px 20px 30px 20px;
    width: 635px;
    border:1px solid #222;
}
.rooms-nav ul li{
    position: relative;
    display: inline-block;
    padding: 10px;
    margin: 0 5px;
}
.rooms-nav ul li:before {
    content: '';
    position: absolute;
    bottom: 5px;
    display: inline-block;
    width: 30px;
    height: 1px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #222;
    border-radius: 1px;
}
.rooms-list{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify-content;
    justify-content: justify-content;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.rooms-list-item{
    width: calc( (100% - 90px) / 3);
    transition: 0.3s;
    position:relative;
    margin: 0 45px 50px 0;
    border-bottom: 1px solid #D2D2D2;
    padding-bottom: 10px;
}
.rooms-list-item:nth-child(3n) {
    margin-right: 0;
}
a.rooms-list-link{
    display: block;
}
a.rooms-list-link:hover{
    filter:alpha(opacity=80); /* IE 6,7*/
    -ms-filter: "alpha(opacity=50)"; /* IE 8,9 */
    -moz-opacity:0.5; /* FF , Netscape */
    -khtml-opacity: 0.5; /* Safari 1.x */
    opacity:0.5;
    zoom:1; /*IE*/
}
.rooms-list-item-image img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    position: relative;
}
.rooms-list-item-image .fa-search{
    background-color:rgba(0,0,0,0.6);
    padding: 10px;
    position: absolute;
    color: white;
    top: 10px;
    right: 10px;
}
h3.rooms-list-item-title{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
    margin: 10px 0;
    line-height: 1.5;
    text-align:center;
    font-size: 20px;
    height: 50px;
}
.rooms-list-item-copy{
    text-align:justify;
    line-height: 1.5;
    padding-top: 10px;
}
p.rooms-caution{
    font-size: 12px;
}
.rooms-bnr label.open{
    margin: 0 10px;
}
.town{
    margin:  0 auto;
    position: relative;
    text-align: center;
}
img.townillust{
    margin: 0 auto -40px auto;
    padding: 0;
    width: 60%!important;
    position: relative;
    z-index: 1;
}
.town-container{
    padding: 30px 0;
}
.town img{
    width: 75%;
}
.townbnr{
    width: 500px!important;
}
/*--------------------
固定ページ
--------------------*/
.page a,
.page a:visited{
    color: #AE3033;
}

.page h3{
    margin: 10px auto 0 auto;
}
.page p{
    width: 60%;
    margin: 20px auto;
}
.page strong{
    color: #804040;
}
.page img{
    width: 100%;
}
.page-top-img {
    height: 400px;
    width: 100%;
}

.page-top-img-concept {
    background: url(images/about-roji01.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-top-img-history {
    background: url(images/history-roji01.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-top-img-rooms {
    background: url(images/rooms-roji00.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
img.pagebnr{
    width: 500px;
}
.mokuji {
    text-align: center;
        margin: 20px auto;
    width: 100%;
}
.mokuji .button{
        padding: 0.2rem 0.9rem;
        border: #804040 solid 1px;
        border-radius: 0.3rem;
        box-shadow: none;
        line-height: 1.5;
        margin: 0 0.5rem 0.5rem 0.5rem;
    font-size: 12px;
}
.mokuji .flex{
    flex-wrap: wrap;
    list-style: none;
}
/*
.mokuji a,
.mokuji a:visited{
    position: relative;
    margin: 0 20px 10px 20px;
    padding: 5px 10px;
    font-size: 12px;
}
.mokuji a span:after{
    content: '▼';
    padding-left: 5px;
    color: #804040;
    font-size: 0.6em;
    position: absolute;
    top: 1.5em;
}
*/
.page-header-h2{
    background-color: #bed1d0;
    width: 100%;
    padding: 20px 0 10px 0;
    text-align: center;
    margin: -10px auto 0 auto;
}

.page-header-h2 h2 img{
    width: 30px;
    height: auto;
    padding-top: 10px;
    position: absolute;
}
/*--------------------
concept
--------------------*/
h2.h2left{
	text-align: justify;
}
.headertext img{
    width: 80px;
    height: auto;
    margin: 0;
}
.headertext a{
    text-decoration: underline;
}
.note-bnr{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
}
.note-bnr a img {
    width: 95%;
    margin: 10px;
}
.about-prof{
    width: 60%;
    margin: 0 auto;
}
.prof_text{
    margin: 20px auto 0 10px;
}
.prof_text p{
    width: 100%;
    margin: 20px auto;
}
.prof_img img{
    width: 100%;
    height: auto;
}
/*--------------------
member
--------------------*/
.memberlistWrap{
    flex-wrap: wrap;
    align-items: flex-start!important;
}
.memberList {
    width: 15%;
    margin: 20px 40px;
}
.memberList_detail_name,
.memberList_detail_role{
    width: 100%!important;
    margin: 5px 0!important;
    text-align: center;
    line-height: 1.4!important;
}
.memberList_detail_role{
    font-size: 12px;
}
/*--------------------
rooms
--------------------*/
.article{
    width: 70%;
    margin: 0 auto;
    padding-top: 20px;
}
.article .border{
    margin: 20px auto;
}
.article a{
    position: relative;
    padding-bottom: 5px;
    color: #AE3033!important;
}
.article img{
    width: 100%;
    height: auto;
    text-align: center;
    margin: 10px auto;
}
.article h2{
    text-align: center;
    margin: 0 auto;
}
.article h3{
    margin: 50px 0 0 0;
}
.article .summary{
    text-align: center;
}
.article .done{
    text-align: center;
}

.article .info{
    margin: 50px auto 0 auto;
    border:1px solid #D2D2D2;
    padding: 30px;
}
/*--------------------
company
--------------------*/
.company{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content:center;
    margin-bottom: 20px;
}
.company iframe{
    margin-left: 50px;
}
.bnrlink_box {
    text-align: center;
    margin-top: 50px;
}
.bnrlink {
    margin:0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    justify-content: center;
}
.bnrlink a{
    margin: 10px  30px;
}
.profile{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.profile img{
    width: 40%;
    height: 100%;
    margin-right: 20px;
}
.profile p{
    margin-block-start: 0em;
    margin-block-end: 0em;
}
dl{
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}
dt{
    float: left;
    margin-right: 10px;
}
/*--------------------
contact
--------------------*/
form.wpcf7-form{
    text-align: center;
}

.wpcf7-recaptcha {
    margin: 30px auto 0 auto;
    text-align: center;
    width: 300px;
}
div.wpcf7 .ajax-loader{
	width: 0!important;
}
/*--------------------
history
--------------------*/
.history img{
    width: auto;
    height: auto;
}
.history p{
    margin-bottom: 10px;
    margin-block-start: 0em;
}
.history h2{
    margin: 50px 0 20px 0;
}
.history h3{
    margin-block-end: 0em;
    margin: 30px 0 0 0;
}
.history dl{
    width: 100%;
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    clear: both;
}
.history dt {
    display: block;
    clear: left;
    float: left;
    margin-right: 10px;
    width: 10%;
}
.history dd{
    display: block;
    float: left;
    width: 70%;
}

/*--------------------
share
--------------------*/
#share{
    text-align: center;
}
#share h2{
    text-align: center!important;
}
/* SNSごとの背景色 */
#twitter {
    background-color: #00acee;
}
#pocket {
    background-color: #EE4056;
}
#facebook {
    background-color: #3b5998;
}
#ggl-plus {
    background-color: #dd4b39;
}
#hatena {
    background-color: #2D4C86;
}
/* ボタン設定 */
.button-area {
    width: 100%;
    margin: 10px 0;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
    -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
}
.button-area a{
    color: #fff!important;
}
.button-area:after {
    content: '';
    clear: both;
    display: block;
}
.button-area-title {
    font-weight: 700;
    margin: 0 0 8px;
    text-align: center;
}
.title-fill {
    display: block;
    background-color: #444;
    color: #fff;
    font-size: 14px;
    width: 100%;
    padding: 6px 15px;
    box-sizing: border-box;
}
.button-whole {
    float: left;
    width: 19%;
    margin: 0 0.5% 0 0.5%;
    box-sizing: border-box;
}
.button-link {
    display: block;
    text-align: center;
    color: #fff !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
    box-sizing: border-box;
    border-radius: 3px;
    text-decoration: none;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
/*--------------------
5. Footer
--------------------*/
.footerbg img{
    width: 100%;
    display: block;
    left: 0;
    top: 0;
}
footer {
    color: #F4E4CA;
    clear: both;
	background-color: #361E14;
	height: 130px;
 	bottom: 0;
    margin:-1px auto 0px auto;
    text-align: center;
}
.copy{
    padding-top: 60px;
    font-size: 13px;
    text-align: center;
    width: 30%;
    margin: 0 auto;
}

/* Back to top button
---------------------------------- */
#back-top {
    position: fixed;
    z-index: 90;
    bottom: 40px;
    right: 50px;
}
#back-top a {
    width: 60px;
    height: 60px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #804040;
    background-color: rgba(255,255,255,0.8);
    border: #804040 solid 1px;
    /* background color transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
/* arrow icon (span tag) */
#back-top i {
    margin-top: 15px;
    font-size: 28px;
}
@media screen and (max-width: 896px) {
    #header-wrap h1 img{
        width: 270px;
        margin:0 0 0 -70px!important;
    }
}

@media screen and (max-width:1024px) {
    input, textarea {
        width: 80%;
    }
    select{
        height: 50px;
        width: 90%;
        font-size: 100%;
    }
    body {
        font-size: 110%;
        line-height: 1.3;
    }
    h2{
        margin: 0 0 30px 0;
        font-size: 18px;
    }
    h2.ttl{
        font-size: 18px;
    }
    h3{
        font-size: 16px;
    }
    p{
        font-size: 14px;
    }
    .blockspace{
        padding: 40px 0;
    }
    .headspace{
        padding-top: 130px;
    }
    .pt {
        padding-top: 50px;
    }
    .pb {
        padding-bottom: 50px;
    }
    img.bnr {
        width: 100%;
    }
    iframe {
        width: 100%;
        overflow: hidden;
    }
    .button{
        font-size: 15px;
    }
    .border{
        width: 90%;
        margin: 50px auto;
        background-size: cover;
    }
    .border-mb{
        margin: 0 auto 30px auto;
    }
    .moveline{
        margin: 14px 20px 0 0;
        width: 100px;
    }
    .yellow-underline{
        font-size: 110%;
    }
    .nexprev{
        display: table;
        margin: 20px auto 0 auto;
    }
    .nexprev a{
        margin: 0 auto;
    }
    header{
        background-size: contain;
    }
    #header-wrap .headertext{
        top: 20px;
        left: 10px;
    }
    .headertext img{
        width: 60px;
    }
    #header-wrap h1{
        top: 25px;
        font-size: 16px;
    }
    #nav-toggle{
        top: 23px;
        padding: 12px 12px 16px 12px;
    }
    .open #gloval-nav li, .open #gloval-nav li.indent{
        width: 80%;
        margin: 0px auto;
    }
    #gloval-nav a img.bnr{
        width: 100%;
        height: auto;
    }
    .top-img{
        width: 100%;
        position: relative;
        display: block;
    }
    .toden-inner{
        height: 38px;
    }
    .toden img{
        width: 15%;
    }
    .top-more-box{
        display: block;
        padding:0 5px 80px 5px ;
        width: auto;
    }
    .top-more-box .clipbox{
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }
    .top-more-box .clipbox img{ 
        width: 95%;
        height: auto;
        margin: 0 auto;
    }
    .top-more-box-inner{
        width: 100%;
        min-height: auto;
        margin:0px auto;
    }
    .top-more-box .flex{
        display: block;
        width: auto;
        min-height: auto;
        padding: 0;
        margin-bottom: 20px;
    }
    .top-more-box .flex-inner{
        padding: 10px 0 10px 30px;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 90%;
    }
    .top-more-box .flex-inner a img{
        width: 100%;
    }
    .text-inner h2,.flex-inner h2{
        margin: 0!important;
        text-align: center;
    }
    .rooms-category{
        font-size: 110%!important;
    }
    .rooms-list-item{
        margin: 10px auto 50px auto;
        width: 100%;
    }
    h3.rooms-list-item-title{
        -webkit-align-items: unset;
        align-items: unset;
        -webkit-justify-content:  unset;
        height: auto!important;
        text-align: justify;
        margin: 10px 0 0 0;
    }
    .rooms-about{
        text-align: center;
    flex-direction: column;
    }
    .rooms-about img{
        width: 100%;
        margin: 0 auto 30px auto;
    }
    .rooms-about-text h2{
        margin: 0 auto;
    }
    .rooms-about-text p{
        text-align: justify;
    }
    .rooms-thumb {
        margin: 10px 0 ;
    }
    .rooms-thumb a {
        height: 120px;
        width: 45%;
        margin: 0 10px;
    }
    .rooms-thumb img {
        margin: 0;
        width: 100%;
    }
    .rooms .top-more-box-inner{
        width: 90%;
    }
    .town {
        margin:  0 auto;
    }
    .town p{
        text-align: justify;
    }
    img.townillust {
        margin: 0 auto -5px auto;
    }
    .town img ,
    .townbnr{
        width: 100%!important;
    }
    .history p{
        text-align: justify;
    }
    /*--------------------
    top news
    --------------------*/
    .news-list{
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .news-list-item{
        display: block;
        margin: 10px auto 30px auto;
        width: 100%;
    }
    .news-list-date{
        display: block;
        padding: 0;
    }
    .news-item {
        width: calc(50% - 15px);
        margin: 0;
        padding: 0;
    }
    .news-image img{
        width: 100%;
        height: 200px;
        margin-bottom: 10px;
    }
    .news-text p{
        line-height: 1.6;
    }
    /*--------------------
    contact
    --------------------*/
    form.wpcf7-form{
    margin: 0 auto;
    padding: 0;
    width: 90%;
    overflow: hidden;
    }
    /*--------------------
    rooms
    --------------------*/
    .rooms-nav{
        width: auto;
        margin: 0 auto 30px auto;
        padding: 20px 20px 30px 20px;
    }
    .pickup{
        padding-bottom: 50px;
    }
    .recomend .rooms-list .rooms-list-item:last-child{
        margin-bottom: 0px;
    }
    /*--------------------
    記事
    --------------------*/
    .article {
        width: 95%;
        padding-top: 90px;
    }
    .article h2{
        text-align: justify;
        line-height: 1.3;
    }
    .article .summary{
        line-height: 1.3;
        margin: 10px 0;
    }
    /*--------------------
    下層
    --------------------*/
    .page-header-h2 h2.ttl{
        margin: 0 0 10px 0;
    }
    .page p{
        width: 100%;
    }
    .page-top-img {
        height: 190px;
    }
    .page-top-img-concept,
    .page-top-img-rooms,
    .page-top-img-history{
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .page-header-h2 h2 img {
        width: 20px;
        padding-top: 0px;
    }
    .mokuji .button{
        padding: 0.2rem 0.9rem;
        border: #804040 solid 1px;
        border-radius: 0.3rem;
        box-shadow: none;
        line-height: 1.5;
        margin: 0 0.5rem 0.5rem 0.5rem;
    }
    img.pagebnr{
        width: 100%;
    }

    .note-bnr {
        flex-wrap: wrap;
    }
    /*--------------------
    member
    --------------------*/
    .memberList {
        width: 40%;
        margin: 20px 10px;
    }
    .memberList_detail p{
        text-align: center!important;
    }
    p.memberList_detail_role{
        font-size: 10px;
    }
    /*--------------------
    company
    --------------------*/
    .company{
        display: block!important;
    }
    .company iframe{
        width: 100%;
        margin: 0;
    }
    .bnrlink {
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    }
    .bnrlink a{
        margin: 10px;
    }
    .bnrlink a img {
        width: 140px;
    }
    .profile{
        display: block;
    }
    .profile img{
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
    }
    dt{
        display: block;
        width: 100%;
        float: none;
        margin: 0;
    }
    dd{
    margin-inline-start: 0;
    margin: 0 0 5px 0;
    padding: 0;
    }
    /*--------------------
    history
    --------------------*/
    .history dl {
        margin-bottom: 20px;
    }
    .history dt {
        clear: none;
        float: none;
        margin-right: 0px;
        width: 100%;
    }
    .history dd{
        float: none;
        width: 100%;
    }
    .history img{
        width: 90%;
    }
    /*footer*/
    .copy{
        margin: 0 auto;
        width: 90%;
    }
    footer{
        margin-top: 20px;
    }
	footer .footerlinks{
		display:flex;
   		display: -webkit-flex;
  		justify-content: center;
  		align-items: center;

	}
	footer a{
		padding: 0;
	}
	footer a img{
		width: 70%;
	}
}


@media screen and (max-width: 480px) {
    #back-top {
        position: fixed;
        bottom: 50px;
        right: 30px;
    }
    #back-top a {
        width: 40px;
        height: 40px;
    }
    #back-top i {
        margin-top: 7px;
        font-size: 20px;
    }
}