html{
height:100%;
max-width:1920px;
margin:auto;
overflow-y: scroll;
overflow-x: hidden;
}
img{
margin:auto;
}
* { max-height: 999999px; }
body {
font-family:'Roboto Condensed',"Yu Gothic Medium", "ŸàƒSƒVƒbƒN Medium", YuGothic, "ŸàƒSƒVƒbƒN‘Ì", "ƒqƒ‰ƒMƒmŠpƒS Pro W3", "ƒƒCƒŠƒI", sans-serif;
max-width:1920px;
overflow-x: hidden;
}
html body{
font-family:'Roboto Condensed',"Yu Gothic Medium", "ŸàƒSƒVƒbƒN Medium", YuGothic, "ŸàƒSƒVƒbƒN‘Ì", "ƒqƒ‰ƒMƒmŠpƒS Pro W3", "ƒƒCƒŠƒI", sans-serif;
}
.modal-open {
overflow: auto;
}
a {
color: #990000;
text-decoration: underline;
}
a:visited { color: #990000; }
a:hover { text-decoration: underline; }
::selection {
background: #80ccda;
color: #fff;
}
ul{
list-style-type: none
}
li{
list-style-type: none
}
/*loader*/
#loader {
opacity: 1;
position: fixed;
z-index: 100000;
width: 100%;
height: 100%;
background: #fff;
top: 0;
left: 0;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px
}
.spinner>div {
background-color: #808080;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s
}
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s
}
.spinner .rect4 {
-webkit-animation-delay: -.9s;
animation-delay: -.9s
}
.spinner .rect5 {
-webkit-animation-delay: -.8s;
animation-delay: -.8s
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4)
}
20% {
-webkit-transform: scaleY(1.0)
}
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
/* end loader*/
#profile{
padding:20px auto 50px auto;
text-align:center;
}
#subtitle{
padding:10px auto 0px auto;
text-align:center;
}
#photo01{
padding-top:10px;
padding-bottom:20px;
text-align:center;
}
#nanpro_logo{
text-align:center;
padding-top:3em;
padding-bottom:3em;
}
#naname{
z-index:100;
position:relative;
}
#naname .bar{
height:130px;
margin:0px;
padding:0px;
width:100%;
}
#naname.ue{
margin:-90px auto 0px auto;
background-image:url('../img/naname_ue.png');
background-position:center bottom;
background-repeat:no-repeat;
}
#naname.shita{
margin:-5px auto 0px auto;
background-image:url('../img/naname_shita.png');
background-position:center bottom;
background-repeat:no-repeat;
}
#naname.middle{
background-image:url('../img/naname.png');
z-index:100;
position: relative;
margin-top:-3px;
}
#loadinggawa{
position:relative;
min-height:650px;
border:0px solid #ff66cc;
overflow: hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
z-index:9999;
}
#loading2 {
position: absolute;
left: 0;
top: 0;
min-height: 650px;
min-width: 1000px;
/* height: 100%;*/
height:700px;
width: 100%;
z-index: -1;
}
#loading2In {
position: absolute;
width: 1000px;
top: 0;
bottom: 0;
left: 50%;
margin-left: -500px;
overflow: hidden;
height:100%;
}
#lc1 {
width: 180px;
height: 210px;
position: absolute;
right: 0px;
top: 330px;
opacity: 0;
transform: scale(0.6);
}
#lc2 {
position: absolute;
width: 180px;
height: 210px;
right: 210px;
top: 60px;
opacity: 0;
transform: scale(0.6);
}
#lc3 {
width: 180px;
height: 210px;
position: absolute;
right: 80px;
top: 80px;
opacity: 0;
transform: scale(0.6);
}
#lc4 {
width: 180px;
height: 210px;
position: absolute;
right: 260px;
bottom: 10px;
opacity: 0;
z-index:999;
transform: scale(0.6);
}
#lc5 {
width: 180px;
height: 260px;
position: absolute;
left: 35px;
top: 90px;
opacity: 0;
transform: scale(0.6);
}
#lc6 {
width: 180px;
height: 260px;
position: absolute;
left: 220px;
top: 0px;
opacity: 0;
transform: scale(0.6);
}
#lc7 {
width: 180px;
height: 260px;
position: absolute;
left: 0px;
top: 320px;
opacity: 0;
transform: scale(0.6);
}
#lc8 {
width: 180px;
height: 260px;
position: absolute;
left: 200px;
bottom: 0px;
opacity: 0;
transform: scale(0.6);
}
#lc001 {
width: 620px;
height: 790px;
position: absolute;
left: 80px;
top: 0px;
opacity: 0;
transform: scale(0.6);
}
#lc002 {
position: absolute;
width: 620px;
height: 790px;
right: 80px;
top: 0px;
opacity: 0;
transform: rotate(0deg) scale(0.6);
}
#logo {
width: 900;
height: 600;
margin-left: -450px;
margin-top: -300px;
position: absolute;
left: 50%;
top: 50%;
opacity: 0;
}
#tsuchiya{
position: absolute;
width: 220px;
height: 85px;
left: 20px;
top: 40px;
}
#loadinggawasp{
position:relative;
height:510px;
overflow: hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
z-index:10;
}
#loading2sp {
position: absolute;
left: 0;
top: 0;
/* height: 100%;*/
height:510px;
width: 100%;
z-index: 3;
}
#loading2Insp {
position: absolute;
width: 600px;
top: 0;
bottom: 0;
left: 50%;
margin-left: -300px;
overflow: hidden;
height:100%;
}
#lc1sp {
width: 100px;
height: 150px;
position: absolute;
right: 20px;
top: 240px;
opacity: 0;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
will-change: transform;
z-index:999;
}
#lc2sp {
position: absolute;
width: 100px;
height: 150px;
right: 80px;
top: 20px;
opacity: 0;
z-index:999;
}
#lc3sp {
width: 100px;
height: 150px;
position: absolute;
right: 140px;
top: 40px;
opacity: 0;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
will-change: transform;
}
#lc4sp {
width: 100px;
height: 150px;
position: absolute;
right: 60px;
bottom: 10px;
opacity: 0;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
will-change: transform;
}
#lc5sp {
position: absolute;
width: 100px;
height: 150px;
left: 110px;
top: 80px;
opacity: 0;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
will-change: transform;
}
#lc6sp {
width: 100px;
height: 150px;
position: absolute;
left: 80px;
top: 50px;
opacity: 0;
transform: scale(0.6);
}
#lc7sp {
width: 100px;
height: 150px;
position: absolute;
left: 0px;
top: 220px;
opacity: 0;
transform: scale(0.6);
}
#lc8sp {
width: 100px;
height: 150px;
position: absolute;
left: 140px;
bottom: 0px;
opacity: 0;
transform: scale(0.6);
}
#logosp {
width: 500px;
height: 333px;
margin-left: -250px;
margin-top: -166px;
position: absolute;
left: 50%;
top: 50%;
opacity: 0;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
will-change: transform;
transform: rotate(0deg) scale(1.2);
}
#tsuchiyasp{
position: absolute;
width: 160px;
height: 50px;
left: 0px;
top: 20px;
}
/*=========kokokara framein==========*/
.demo_main_in{max-width:1000px;width:90%;margin:0px auto}
.demo_main_insp{max-width:600px;width:90%;margin:0px auto;overflow:hidden}
.animate-elm {
margin: 0 auto;
width: 1000px;
/* height: 420px;*/
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.animate-elm.type01 {
}
.animate-elm.ZoomIn {
-webkit-animation-name: ZoomIn1;
animation-name: ZoomIn1;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
to {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
to {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.animate-elmr {
margin: 0 auto;
width: 1000px;
/* height: 420px;*/
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.animate-elmr.type01 {
}
.animate-elmr.fadein {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
to {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
to {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.animate-elmsp {
margin: 0 auto;
padding:3%;
width: 610px;
/* height: 420px;*/
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.animate-elmsp.type01 {
}
.animate-elmsp.ZoomIn {
-webkit-animation-name: ZoomIn1;
animation-name: ZoomIn1;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes ZoomIn1 {
from {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
}
to {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
transform: scale(1.0, 1.0);
-webkit-transform: scale(1.0, 1.0);
}
}
@keyframes ZoomIn1 {
from {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
}
to {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
transform: scale(1.0, 1.0);
-webkit-transform: scale(1.0, 1.0);
}
}
/*========end framein=========*/
#sns{
margin:auto;
}
#sns td{
padding:5px;
}
.white{
color: #fff;
}
.white a{
color: #fff;
text-decoration:underline;
}
.white a:hover{
color: #fff;
}
.black a{
color: #CC0000;
text-decoration:underline;
}
.brown{
color:#cc0000;
}
.brown a{
color: #cc0000;
text-decoration:underline;
}
.gray{
color:#525252;
}
.gray a{
color: #525252;
text-decoration:underline;
}
.red{
color:#ff0000
}
.red a{
color: #ff0000;
text-decoration:underline;
}
.green{
color:#052e00
}
.green a{
color:#052e00
text-decoration:underline;
}
#concious{
font-weight:normal;
color:#eb5871;
background:#fff6ba;
}
.gall{
}
.gall img{
/* width:16%;*/
border-bottom:transparent 4px solid;
}
.of{
width:16%;
/*height:120px;
width:200px; height:200px;
object-fit:cover;*/
}
.of2waku{
position:relative;
float:left;
height:270px;
width:33%;
box-sizing:border-box;
margin:0px 0px 20px 0px;
}
.of2{
position:absolute;
left:6%;
top:0px;
width:90%;
z-index:0;
}
.of2 img{
width:100%;
height:230px;
object-fit:cover;
box-sizing:border-box;
z-index:-9999;
}
.of2comment {
width:90%;
position:absolute;
left:6%;
top:0px;
padding:5px;
color:#fff;
text-align: left;
font-size: 13px;
font-weight: bold;
line-height: 26px;
z-index:9999;
background-color: rgba(0,0,0,0.3);
}
.of2comment a{
color:#fff;
}
.of2margin{
position:absolute;
bottom:0px;
right:10px;
}
@media all and (-ms-high-contrast: none) {
.of2margin img{
width:100%;
}
}
.read_title {
text-align: center;
font-size: 50px;
font-weight: bold;
line-height: 56px;
margin-top: 35px;
margin-bottom:0px;
}
.read_subtitle {
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: 28px;
margin-top: 10px;
margin-bottom:20px;
}
.read_mtitle {
font-size: 25px;
font-weight: bold;
line-height: 34px;
margin-top: 10px;
margin-bottom:5px;
}
.read_submtitle {
font-size: 16px;
font-weight: bold;
line-height: 26px;
margin-top: 8px;
margin-bottom:20px;
}
.read_comment {
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: 38px;
margin-top: 5px;
}
.read_mcomment {
text-align: left;
font-size: 17px;
font-weight: normal;
line-height: 26px;
margin-top: 5px;
}
.read_mcommentb {
text-align: left;
font-size: 17px;
font-weight: bold;
line-height: 26px;
margin-top: 5px;
}
.read_2comment {
text-align: left;
font-size: 14px;
font-weight: normal;
line-height: 23px;
margin-top: 5px;
}
.read_cau_comment {
text-align: left;
font-size: 11px;
font-weight: normal;
line-height: 22px;
margin-top: 5px;
}
.guestdetails {
text-align: left;
font-size: 14px;
font-weight: normal;
line-height: 22px;
margin-top: 5px;
}
.cen{
text-align:center;
margin:auto;
}
.pcpad{
padding:0px 20px 0px 20px;
}
.colorfulborder{
border-width:10px;
border-style:solid;
border-top-color:#fff;
border-right-color:#fff;
border-bottom-color:#fff;
border-left-color:#fff;
}
.box2 {
margin : auto;
max-width : auto;
/* ŽOŠp–Í—l‚ÌCSS */
border : 0px solid #ccc; /* ©˜gü‚ª•s—v‚ÈꇂÍíœ */
background-image :
linear-gradient( -45deg,
#ffffff 0%, #ffffff 50%,
#064c71 50%, #064c71 100% );
background-position: left top;
background-size : 70px 70px;
background-repeat:no-repeat;
padding:12px 12px 12px 12px;
}
.row-eq-height {
display: flex;
flex-wrap: wrap;
}
/*===============================================
‰æ–ʂ̉¡•‚ª769pxˆÈãiƒpƒ\ƒRƒ“—pj
===============================================*/
@media screen and (min-width: 769px){
body{
background-image: url(../img/bg.png);
background-position:top center;
/*background-size: cover;
background-size:contain;*/
background-repeat:no-repeat;
}
.pc { display: block !important; }
.sp { display: none !important; }
.contents_inner{
max-width: 1100px;
margin: 0px auto;
padding: 0em 10px 3em 10px;
text-align: center;
font-size: 1.6em;
text-align:left;
}
.contents_inner h1 {
margin-bottom: 30px;
font-size: 1.8em;
color: #333;
line-height:160%;
text-align:left;
font-weight:normal
}
.contents_inner p {
padding:0px 0px 0px 0px;
margin:15px 0px 0px 0px;
font-size: 0.8em;
text-align: left;
color: #fff;
line-height:150%;
}
.contents_inner p a{
color: #fff;
text-decoration: underline;
}
.mar{
margin:0px auto 0px auto;
}
.containerwaku{
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 1200px;
margin: 0px auto;
text-align: center;
}
.containerwaku2{
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 1100px;
margin: 0px auto;
text-align: left;
}
.containerwaku900{
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 1030px;
margin: 0px auto;
text-align: center;
}
#footer{
padding-top:30px;
padding-bottom:30px;
background-image:url('../img/photo02.png');
background-size:cover;
background-position:center top;
text-align:center;
}
.socialwaku{
width:200px;
margin:10px auto 40px auto;
}
.discimg{
margin: 0px auto;
font-size: 15px;
text-align:left;
line-height:180%;
color:#333;
padding:60px 0px 0px 0px;
}
.br-pc { display:block; }
.br-sp { display:none; }
.pccen{
tex-align:center;
}
}
/*end pc*/
/*===============================================
‰æ–ʂ̉¡•‚ª640px‚Ü‚ÅiƒXƒ}ƒz—pj
===============================================*/
@media screen and (max-width:768px){
body{
background-image: url(../img/bg.png);
background-position:top center;
/*background-size:contain;*/
background-repeat:no-repeat;
background-size:1470px;
}
.pc { display: none !important; }
.sp { display: block !important; }
.contents_inner{
max-width: 1020px;
margin: 0px 10px 15px 10px;
padding: 15px auto 15px auto;
text-align: center;
}
.contents_inner h1 {
margin-bottom: 10px;
font-size: 1.6em;
color: #fff;
}
.contents_inner p {
padding:0px 0px 15px 0px;
margin:10px 0px 0px 0px;
font-size: 1.3em;
text-align: left;
color: #fff;
}
.contents_inner p a{
color: #fff;
}
.mar{
padding:0px 15px 0px 15px;
}
.containerwaku{
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 768px;
margin: 0px auto;
text-align: center;
}
.containerwaku900{
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 768px;
margin: 0px auto;
text-align: center;
}
#footer{
padding-top:30px;
padding-bottom:30px;
background-image:url('../img/photo02.png');
background-size:cover;
background-position:center top;
}
.socialwaku{
width:270px;
margin:0px auto 20px auto;
}
.gall{
}
.gall img{
/* width:24%;*/
border-bottom:transparent 4px solid;
}
.of{
width:24%;
/*height:100px;
width:200px; height:200px;
object-fit:cover;*/
}
.of2waku{
position:relative;
float:left;
height:140px;
width:33%;
box-sizing:border-box;
margin:0px 0px 20px 0px;
}
.of2{
position:absolute;
left:6%;
top:0px;
width:90%;
z-index:0;
}
.of2 img{
width:100%;
height:110px;
object-fit:cover;
box-sizing:border-box;
z-index:-9999;
}
.of2comment {
width:90%;
position:absolute;
left:6%;
top:0px;
padding:5px;
color:#fff;
text-align: left;
font-size: 12px;
font-weight: bold;
line-height: 26px;
z-index:9999;
background-color: rgba(0,0,0,0.3);
}
.of2comment a{
color:#fff;
}
.of2margin{
position:absolute;
bottom:0px;
right:0px;
}
@media all and (-ms-high-contrast: none) {
.of2margin img{
width:90%;
}
}
.read_title {
text-align: center;
font-size: 35px;
font-weight: bold;
line-height: 35px;
margin-top: 25px;
margin-bottom:0px;
}
.read_subtitle {
text-align: center;
font-size: 14px;
font-weight: bold;
line-height: 14px;
margin-top: 5px;
margin-bottom:20px;
}
.read_submtitle {
font-size: 18px;
font-weight: bold;
line-height: 21px;
margin-top: 5px;
margin-bottom:20px;
}
.read_mtitle {
font-size: 28px;
font-weight: bold;
line-height: 34px;
margin-top: 15px;
margin-bottom:10px;
}
.read_comment {
margin: 0 auto;
width: 90%;
font-size: 20px;
font-weight: bold;
line-height: 36px;
letter-spacing:-0.01em;
text-align:left;
}
.read_2comment {
margin: 0 auto;
width: 90%;
text-align: center;
font-size: 12px;
font-weight: bold;
line-height: 25px;
}
.read_mcomment {
text-align: left;
font-size: 16px;
font-weight: normal;
line-height: 25px;
margin-top: 5px;
}
.read_cau_comment {
text-align: left;
font-size: 10px;
font-weight: normal;
line-height: 20px;
margin-top: 5px;
}
.pcpad{
padding:0px 0px 0px 0px;
}
.cen{
text-align:center;
margin:auto;
}
.discimg{
margin: 0px auto;
font-size: 15px;
text-align:left;
line-height:180%;
color:#333;
padding:25px 0px 10px 0px;
}
.br-pc { display:none; }
.br-sp { display:block; }
.pccen{
tex-align:left !important;
}
}
/*end sp*/
.qaa{
padding:0px 0px 0px 0px;
}
.qaa p{
font-size: 1.2em;
}
.qaa span{
color:#00963b;
}
.clearfix:after {
clear: both;
content: gh;
display: block;
height: 0;
}