@charset="utf-8";
html{
 min-height: 100%;
 position: relative;
}
a {
    text-decoration: none; 
}
body {
 font-family:"book antiqua","Palatino","UD デジタル 教科書体 NP-R","ＭＳ　ゴシック",sans-serif;
 line-height: 1.5;
 color: #000000;
 background-color: #f8eedc;
 -webkit-appearance: none;
 -webkit-text-size-adjust: 100%;
 -webkit-img-size-adjust: 100%;
}
li{
 list-style: none;
}
header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 z-index: 998;
 height: 8%;
 background-color: #1b2e6e;
 vertical-align:center;
 display: flex;
 flex-direction: row;
}
#headerlogo{
 height: 8%;
 line-height: 8%;
 margin-right: auto;
 font-weight: bold;
 color: #d6bfa2;
 z-index: 999;
}
#headerlogo a:link,a:visited,a:hover{
 color: #d6bfa2;
}
#menuin{
 right: 2%;
 float:right;
 top: 2%;
 z-index: 999;
}
ul #menuin{
 list-style: none;
}
#menuin li{
 list-style: none;
 color: #d6bfa2;
 font-size: 120%;
 display: inline-block;
}
#menuin li a:hover{
 background-color: #d6bfa2;
 color: #1b2e6e;
}
#menuin li a:link{
 color:#d6bfa2;
}
#menuin li a:visited{
 color:#d6bfa2;
}
#menumid{
 display: none;
}
ul #menuout{
 list-style: none;
 padding-left: 0;
 margin-left: 20%;
 font-size: 200%;
 color: #2e3191;
}
#menuout li{
 display: inline-block;
}
#menuout li a:visited{
 color: #2e3191;
}
#menuout li a:link{
 color: #2e3191;
}
#menuout li a{
 width: 50%;
}
#concon{
 position: relative;
 padding-bottom: 60ps;
 box-sizing: border-box;
 min-height: 100vh;
 overflow-y: scroll;
}
footer{
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 z-index: 998;
}
#footer div{
 margin: auto;
}
#footlogo{
 font-size: 100%;
 margin-left: 10%;
}
#tm{
 font-size: 60%;
 text-align: center;
}
#aboutbox{
 position: relative;
 margin-top: 10%;
}
#aboutboxnew{
 position: absolute;
 margin-top: 10%;
}
#romae{
 text-align: center;
 margin-top: 10%;
 margin-left: 20%;
 margin-right: 20%;
 width: 60%;
}
#romaenew{
 position: absolute;
 text-align: center;
 margin-top: 10%;
 margin-left: 20%;
 margin-right: 20%;
 width: 60%;
}
#aboutromae{
 text-align: center;
 margin-top: 10%;
 margin-left: 40%;
 margin-right: 20%;
 width: 20%;
}
#itemnew{
 position: relative;
 margin-top: 10%;
}
#romaevideo{
 margin-top: 10%;
 margin-left: 20%;
}
#romaevideo2{
 text-align: center;
}
#qa{
 text-align: center;
 font-size: 150%;
}
#qaI{
 text-align: center;
 font-size: 100%;
 margin-left: 10%;
 margin-right: 10%;
}
#container{
 margin-top: 15%;
}
#contenta,#contentb{
 left: 30%;
 text-align: center;
}
#contentc{
 position: absolute;
 font-size: 100%;
 top: 20%;
 left: 10%;
 width: 80%;
}
#contentd{
 position: absolute;
 top: 10%;
 left: 50%;
-ms-transform: translate(-50%,1%);
  -webkit-transform: translate(-50%,1%);
  transform: translate(-50%,1%);
 font-size: 120%;
 line-height: 150%;
 margin-left: 10%;
 margin-right: 10%;
}
#contentb{
 left: 30%;
 text-align: center;
}
#buttonmenu2{
 font-size: 110%;
 margin: auto;
}
ul #buttonmenu2{
}
#buttonmenu2 li{
 list-style-type: none;
 display: inline;
 float: center;
}
#buttonmenu2 li a{
 display: block;
 color: #000000;
 margin: auto;
 text-decoration: none;
 width: 25%;
 height: 10%;
}
#buttonmenu2 li a:hover{
 background-color: #000000;
 color: #f8eedc;
 height: 10%;
}
#yakiiromenu{
 font-size: 110%;
 margin: auto;
}
ul #yakiiromenu{
}
#yakiiromenu li{
 list-style-type: none;
 display: inline;
 float: center;
}
#yakiiromenu li a{
 display: block;
 color: #000000;
 margin: auto;
 text-decoration: none;
 width: 25%;
 height: 10%;
}
#yakiiromenu li a:hover{
 background-color: #000000;
 color: #f8eedc;
 height: 10%;
}
#tdqphotos{
 text-align: center;
 display: inline-block;
 height: 25%;
 margin-top: 26%;
 margin-left: 10%;
 margin-right: 10%;
 margin-bottom: 10%;
}
#tdqphotosnew{
 position: absolute;
 text-align: center;
 display: inline-block;
 height: 25%;
 margin-top: 6%;
 margin-left: 10%;
 margin-right: 10%;
 margin-bottom: 5%;
}
#tdqphotos img{
 height: 25%;
}
#recommend{
 font-size: 120%;
 margin-left: 15%;
 margin-right: 15%;
}
#yakiiro{
}
#baschee{
 font-size: 120%;
 line-height: 150%;
 margin-left: 15%;
 margin-right: 15%;
 top: 25%;
}
#secretmore{
 left: 30%;
 margin-top: 15%;
 font-size: 120%;
 line-height: 150%;
 margin-left: 15%;
 margin-right: 15%;
}
ul #menuinmenu{
 list-style: none;
 padding-left: 0;
 text-align: center;
 width: 80%;
}
#menuinmenu li{
 list-style: none;
 padding-left: 0;
 font-size: 150%;
 margin-top: 20%;
 text-align: center;
 color: #2e3191;
}
#menuinmenu a:link{
 color: #2e3191;
}
#menuinmenu a:visited{
 color: #2e3191;
}
#menuinmenu a:hover{
 color: #2e3191;
}
#blogtheme{
 text-align: center;
 top: 25%;
 background-color: #f8eedc;
}
#blogtheme a:link{
 color: #2e3191;
}
#blogtheme a:visited{
 color: #2e3191;
}
#blogtheme a:hover{
 background-color: #2e3191;
 color: #d6bfa2;
}
#contentblog{
 position: sticky;
 top: 30%;
 left: 15%;
 right: 15%;
 font-size: 120%;
 color: #2e3191;
 line-height: 160%;
 list-style: none;
} 
#blogbody{
 position: fixed;
 top: 18%;
 left: 5%;
 color: #2e3191;
 z-index: 997;
}
#blogtitle{
 position: relative;
 margin-top: 0%;
 left: 5%;
 font-size: 120%;
 color: #2e3191;
 line-height: 150%;
 z-index: 997;
} 
#blogimage{
 position: relative;
 top: 0%;
 margin-right: 10%;
 text-align: right;
 z-index: 997;
}
#blog{
 position: relative;
 margin-top: 15%;
 margin-left: 15%;
 width: 70%;
 font-size: 100%;
 color: #2e3191;
 line-height: 180%;
 z-index: 997;
}
#returntoblog{
 position: fixed;
 bottom: 10%;
 z-index: 997;
} 
#returntoblog a:link{
 color: #2e3191;
}
#returntoblog a:visited{
 color: #2e3191;
}
#returntoblog a:hover{
 background-color: #2e3191;
 color: #d6bfa2;
}
#miniromae{
 position: fixed;
 top: 90%;
 z-index: 998;
}
#miniromae a:hover{
 background-color: #2e3191;
 color: #d6bfa2;
}
#linkinsta a:link{
 color: #d6bfa2;
}
#linkinsta a:visited{
 color: #d6bfa2;
}
#linkinsta a:hover{
 color: #2e3191;
 background-color: #d6bfa2;
}
#linkthreads a:link{
 color: #d6bfa2;
}
#linkthreads a:visited{
 color: #d6bfa2;
}
#linkthreads a:hover{
 color: #2e3191;
 background-color: #d6bfa2;
}
#news{
 position: absolute;
 left: 30%;
 margin-top: 20%;
 font-size: 120%;
 color: #2e3191;
 line-height: 160%;
 list-style: none;
}
#news a:link{
 color: #2e3191;
}
#news a:visited{
 color: #2e3191;
}
#news a:hover{
 background-color: #2e3191;
 color: #d6bfa2;
}

@media screen and (min-width: 751px) and(max-width: 1025px){
header {
 display:initial;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 z-index: 998;
 height: 12%;
 background-color: #1b2e6e;
 vertical-align:center;
 display: flex;
 flex-direction: row;
}
#headerlogo{
 display:initial;
 height: 12%;
 line-height: 12%;
 margin-right: auto;
 font-weight: bold;
 color: #d6bfa2;
 z-index: 999;
}
#headerlogo a:link,a:visited,a:hover{
 color: #d6bfa2;
}
#menuin{
 display: none;
}
#menumid a:link,a:visited,a:hover{
 color: #d6bfa2;
}
#menuout{
 display: none;
}
#menu-container{
 display: none;
}
#headerlogo{
 font-size: 150%;
}
#menumid{
 display:initial;
 margin-right: 0;
 text-align: rigjt;
 right: 0;
 float:right;
 top: 6%;
}
ul #menumid{
 list-style: none;
 padding-left: 0;
}
#menumid li{
 list-style: none;
 font-size: 130%;
 color: #d6bfa2;
 display: inline-block;
}
#menumid li a:hover{
 background-color: #d6bfa2;
 color: #1b2e6e;
}
#menumid li a:link{
 color:#d6bfa2;
}
#menumid li a:visited{
 color:#d6bfa2;
}
#contenta{
 position: absolute;
 top:15%;
 left:10%;
 width:40%;
}
#contentb{
 position: absolute;
 top: 25%;
 left:50%;
 width:40%;
}
#contentc{
 font-size: 200%;
 position: absolute;
 top: 0;
 left: 15%;
 width: 70%;
}
#contentnewa{
 position: absolute;
 margin-top:5%;
 left:10%;
 width:40%;
}
#contentnewb{
 position: absolute;
 margin-top: 5%;
 left:50%;
 width:40%;
}#menuinmenu{
 color: #2e3191;
}
#blogtoc{
 left: 30%;
 font-size: 150%;
 color: #2e3191;
 line-height: 200%;
} 
#blogtoc a:link{
 color: #2e3191;
}
#blogtoc a:visited{
 color: #2e3191;
}
#blogtoc a:hover{
 bachground-color: #2e3191;
 color: #d6bfa2;
}
#blogbody{
 position: absolute;
 top: 18%;
 left: 15%;
 color: #2e3191;
}
}
@media screen and (max-width: 751px){
 #menuout{
 display: none;
}
#menuin{
 display: none;
}
#menumid{
 display:initial;
 position: absolute;
 font-size: 100%;
 color: #d6bfa2;
 margin-right: 2%;
 text-align: right;
 right: 2%;
 float:right;
 top: 2%;
 z-index: 999;
 font-size: 150%;
}
#menumid a:link{
 color: #d6bfa2;
}
#menumid a:hover{
 color: #d6bfa2;
}
#menumid a:hover{
 color: #d6bfa2;
}
}