Welcome to our website"
We Are私たちについて
Info お知らせ
Priceプライス
Blogブログ
Contact Us メール
$(function(){
var duration=300;
var duration2=500;
$("#pc-page-box1").on("mouseover",function(){
$(this).find(".black-sheet").stop(true).animate({
opacity:0.6},
duration);
});
$("#pc-page-box1").on("mouseout",function(){
$(this).find(".black-sheet").stop(true).animate({
opacity:1},
duration);
});
$("#pc-page-box2").on("mouseover",function(){
$(this).find(".black-sheet").stop(true).animate({
opacity:0.6},
duration);
});
$("#pc-page-box2").on("mouseout",function(){
$(this).find(".black-sheet").stop(true).animate({
opacity:1},
duration);
});
$("#pc-page-box3").on("mouseover",function(){
$(this).find(".black-sheet").stop(true).animate({
opacity:0.6},
duration);
});
$("#pc-page-box3").on("mouseout",function(){
$(this).find(".black-sheet").stop(true).animate({
opacity:1},
duration);
});
$("#pc-page-box4").on("mouseover",function(){
$(this).find(".black-sheet").stop(true).animate({
opacity:0.6},
duration);
});
$("#pc-page-box4").on("mouseout",function(){
$(this).find(".black-sheet").stop(true).animate({
opacity:1},
duration);
});
$("#pc-page-box5").on("mouseover",function(){
$(this).find(".black-sheet").stop(true).animate({
opacity:0.6},
duration);
});
$("#pc-page-box5").on("mouseout",function(){
$(this).find(".black-sheet").stop(true).animate({
opacity:1},
duration);
});
});
$(function(){
var duration=300;
$(document).on('click', '.leftBoxParent', function(){
$(this).parent('div').find('.leftBox').stop(true).animate({left:-300}, duration);
$(this).find('.leftBox').stop(true).animate({left:300}, duration);
});
});
$(function(){
var duration=300;
$(document).on('click', '.rightBoxParent', function(){
$(this).parent('div').find('.rightBox').stop(true).animate({right:-300}, duration);
$(this).find('.rightBox').stop(true).animate({right:300}, duration);
});
});
body,td,th {
font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";
}
h1,h2,h3,h4,h5,h6 {
font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";
}
.img_box {
position:relative;
display:block;
margin:0;
padding:0;
}
.img_box img {
z-index:0;
margin:0;
padding:0;
}
.img_box a {
color:white;
font-size:70px;
}
.img_comment2 {
font-size:70px;
font-family: 'Oswald', sans-serif;
font-weight:300;
position:absolute;
bottom:150px;
left:0px;
z-index:1;
text-align:left;
padding:10px;
margin:0;
text-shadow:3px 3px 3px #000;
}
.pages{
display:block;
float:left;
position:relative;
}
.comments{
font-size:70px;
font-family: 'Oswald', sans-serif;
font-weight:300;
color:white;
position:absolute;
bottom:150px;
left:150px;
z-index:1;
text-align:center;
padding:10px;
margin:0;
text-shadow:3px 3px 3px #000;
}
.japanese-font{
font-family:"Noto Sans";
font-size:18px;
font-weight:bold;
color:white;
position:absolute;
bottom:100px;
left:150px;
z-index:1;
text-align:center;
padding:10px;
margin:0;
text-shadow:3px 3px 3px #000;
}
body{
}
/*.gridContainer {
width: 88.5%;
max-width: 1300px;
padding-top:50px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}*/
#pc-wrapper{
display:block;
width:1300px;
height:1800px;
margin:0 auto;
}
#pc-wrapper p{
margin:0;
}
#pc-wrapper img{
display:block;
}
#pc-header-box{
display:block;
position:relative;
width:1300px;
height:800px;
margin:0 auto;
vertical-align:bottom;
}
.pc-header-title{
display:inline-block;
position:absolute;
font-size:60px;
}
#pc-logo-box{
display:block;
position:relative;
width:1300px;
height:200px;
margin:0 auto;
}
#pc-logo-box img{
display:block;
position:relative;
top:50px;
margin:0 auto;
}
#pc-page-box1{
display:block;
position:relative;
width:650px;
height:430px;
float:left;
overflow:hidden;
}
#pc-page-box2{
display:block;
position:relative;
width:650px;
height:430px;
float:left;
overflow:hidden;
}
#pc-page-box3{
display:block;
position:relative;
width:650px;
height:430px;
float:left;
overflow:hidden;
}
#pc-page-box4{
display:block;
position:relative;
width:650px;
height:430px;
float:left;
overflow:hidden;
}
#pc-page-box5{
display:block;
position:relative;
width:650px;
height:430px;
float:left;
overflow:hidden;
}
.black-sheet{
display: block;
position: absolute;
width: 650px;
height: 430px;
background: rgba(0,0,0,0.8);
z-index: 1;
}
.pc-page-title{
display:block;
position:absolute;
font-size:30px;
color:rgba(255,255,255,1);
z-index:2;
}
.pc-page-title-japanese{
display:block;
position:absolute;
top:30px;
font-size:24px;
color:rgba(255,255,255,1);
z-index:3;
}
#we-are-infobox{
display:block;
position:absolute;
left:-300px;
width:300px;
height:300px;
background:rgba(51,153,204,1);
opacity:1;
z-index:5;
}
#info-infobox{
display:block;
float:right;
position:absolute;
right:-300px;
width:300px;
height:300px;
background:rgba(51,153,204,1);
opacity:1;
z-index:5;
}
#price-infobox{
display:block;
position:absolute;
left:-300px;
width:300px;
height:300px;
background:rgba(51,153,204,1);
opacity:1;
z-index:5;
}
#blog-infobox{
display:block;
float:right;
position:absolute;
right:-300px;
width:300px;
height:300px;
background:rgba(51,153,204,1);
opacity:1;
z-index:5;
}
#contact-us-infobox{
display:block;
position:absolute;
left:-300px;
width:300px;
height:300px;
background:rgba(51,153,204,1);
opacity:1;
z-index:5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gridContainer">
<div id="pc-wrapper">
<div id="pc-header-box">
<p><div class="pc-header-title">Welcome to our website"</div>
</p>
</div>
<div id="pc-logo-box">
</div>
<div id="pc-page-box1" class="leftBoxParent">
<p>
<div class="pc-page-title">We Are</div><div class="pc-page-title-japanese">私たちについて</div>
<div id="we-are-infobox" class="leftBox"></div>
<div class="black-sheet"></div>
</p>
</div>
<div id="pc-page-box2" class="rightBoxParent">
<p><div class="pc-page-title" >Info</div>
<div class="pc-page-title-japanese">お知らせ</div>
<div id="info-infobox" class="rightBox"></div>
<div class="black-sheet"></div>
</p>
</div>
<div id="pc-page-box3" class="leftBoxParent">
<p><div class="pc-page-title">Price</div><div class="pc-page-title-japanese">プライス</div>
<div id="price-infobox" class="leftBox"></div><div class="black-sheet"></div>
</p>
</div>
<div id="pc-page-box4" class="rightBoxParent">
<p><div class="pc-page-title">Blog</div><div class="pc-page-title-japanese">ブログ</div>
<div id="blog-infobox" class="rightBox"></div>
<div class="black-sheet"></div>
</p>
</div>
<div id="pc-page-box5" class="leftBoxParent">
<p><div class="pc-page-title">Contact Us</div>
<div class="pc-page-title-japanese">メール</div>
<div id="we-are-infobox" class="leftBox">
</div><div class="black-sheet"></div>
</p>
</div>
</div>
</div><!--end gridContainer-->