@charset "UTF-8";
/* CSS Document */

/* desktop */
@media only screen and (min-width: 769px) {

.talk01 {position:relative; padding:0 0 0 40px;}
.talk01 img {position:absolute; top: 0; right:0; z-index:0; width:80%; max-width:700px;}
.talk01 p.i01{ position:relative; z-index:10;max-width:350px;}
.talk01 p.i02{ position:relative; z-index:10;max-width:400px; float:right; margin:-50px 40px 0 0}

.talk02 { clear:both; position:relative; padding:200px 0 0 500px; min-height:450px; }
.talk02 img {position:absolute; top: 40px; right:0; z-index:0; width:100%; }
.talk02 p{ position:relative; z-index:10;max-width:350px; }

.talk03 { clear:both; position:relative; padding:50px 0 0 40px;}
.talk03 img {position:absolute; top: 0px; right:40px; z-index:0; width:50%; max-width:450px; }
.talk03 p.i01{ position:relative; z-index:10;max-width:350px; }
.talk03 p.i02{ position:relative; z-index:10; margin-top:80px; margin-left:100px; max-width:350px; }

.talk04 { clear:both; position:relative; padding:500px 0 0 40px; }
.talk04 img {position:absolute; top: 40px; right:0; z-index:0; width:100%; }
.talk04 p{ position:relative; z-index:10;max-width:350px; }

.talk05 { clear:both; position:relative; padding:100px 0 0 40px; margin-top:50px; min-height:500px;}
.talk05 img {position:absolute; top: 0px; right:40px; z-index:0; width:50%; max-width:450px; }
.talk05 p{ position:relative; z-index:10;max-width:350px; }

.talk06 { clear:both; position:relative; padding:0px 0 0 40px; }
.talk06 img {position:absolute; top: 0px; left:40px; z-index:0; width:50%; max-width:450px; }
.talk06 p.i01{ position:relative; z-index:10;max-width:350px; float:right; margin-right:50px; margin-top:-70px;}
.talk06 p.i02{ position:relative; z-index:10;max-width:350px; float:right; margin:100px 50px 50px;}
}


#photoArea ul li.photo01 img { width:80%;}
#photoArea ul li.photo02 img { width:80%;}
#photoArea ul li.photo03 img { width:80%;}

@media only screen and (min-width: 481px) {
#photoArea ul li.photo01 { transform:rotate(-3deg); margin-top:-10px; margin-left:6%;}
#photoArea ul li.photo02 { transform:rotate(-1deg); margin-top:30px; margin-left:6%;}
#photoArea ul li.photo03 { transform:rotate(2deg); margin-top:-10px; margin-left:6%;}
}


#ata ul.other li.ata a img{
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
	transform:rotate(5deg);
	margin-top:-25px;
 }