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


/* all */

* {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/* page */

#page {
	width: 1024px;
	margin: 0 auto;
}


/* main */


.comment {
	width: 600px;
	margin: 0 auto;
}



#p1 {
	font-size: 30px;
	line-height: 50%;
}


#p2 {
	font-size: 48px;
	font-weight: bold;
	line-height: 50%;
}

#p3 {
	font-size: 24px;
	line-height: 50%;
}

#p4 {
	font-size: 16px;
}


p {
	font-size:14px;
}


/* photo slide */

.photo-show { 
    height: 400px; /*表示したい大きさ*/
    margin: 30px auto; /*縦余白30pxは任意*/
    max-width: 100%;
    position: relative;
    width: 600px; /*表示したい大きさ、height と合わせる*/
}

.photo-show img { 
    animation: show 20s infinite;
    -webkit-animation: show 20s infinite;
    border-radius: 15%;
    height: auto;
    max-width: 100%;
    opacity: 0;
    position: absolute; /*画像を全て重ねる*/
}

/*アニメーション*/

@keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
 }

@-webkit-keyframes show {
    0% {opacity:0}
    5% {opacity:1}
    10% {opacity:1}
    20% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

.photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.photo-show img:nth-of-type(2) {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

.photo-show img:nth-of-type(3) {
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}

.photo-show img:nth-of-type(4) {
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}

.photo-show img:nth-of-type(5) {
    animation-delay: 8s;
    -webkit-animation-delay: 8s
}

.photo-show img:nth-of-type(6) {
    animation-delay: 10s;
    -webkit-animation-delay: 10s
}

.photo-show img:nth-of-type(7) {
    animation-delay: 12s;
    -webkit-animation-delay: 12s
}

.photo-show img:nth-of-type(8) {
    animation-delay: 14s;
    -webkit-animation-delay: 14s
}

.photo-show img:nth-of-type(9) {
    animation-delay: 16s;
    -webkit-animation-delay: 16s
}

.photo-show img:nth-of-type(10) {
    animation-delay: 18s;
    -webkit-animation-delay: 18s
}


.movie {
	margin: 0 auto;
}


/* header */

.wrapper-header {
	background-image: url(img/header100.png);
	background-repeat: repeat-x;
}



/* Gnavi */

.wrapper-gnavi {
	background-color: #111111;
}


ul.gnavi {
	margin: 0 auto 0 auto;
	padding: 10px;
	width: 1024px;
	height: 80px;
	list-style-type: none;
	overflow: hidden;
}


.gnavi li {
	float: left;
}


/* fotter */

.footer {
	background-image: url(img/header100.png);
	background-repeat: repeat-x;
	position: relative;
}


ul.footer-navi {
	margin: 0 auto 0 auto;
	padding: 10px;
	width: 1024px;
	height: 80px;
	list-style-type:: none;
	overflow: hidden;
}

.footer-navi li {
	float: left;
}

.footer-text {
	color: #ffffff;
	font-size: 14px;
	position: absolute;
	top: 40px;
	right: 250px;
}
	



	
/* main */


.ac-container{
    width: 500px;
    margin: 10px auto 30px auto;
}

.ac-container label{
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    padding: 10px 20px;
	margin: 5px;
    position: relative;
    z-index: 20;
    display: block;
    height: 40px;
    cursor: pointer;
    color: #ffffff;
    line-height: 40px;
    font-size: 18px;
    background: #333333;
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        1px 0px 0px 0px rgba(255,255,255,0.9) inset,
        0px 2px 2px rgba(0,0,0,0.1);
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

.ac-container label:hover{
    background: #666666;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #666666;
    color: #ffffff;
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.1);
}


.ac-container input{
    display: none;
}

.ac-container article{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    transition:
        height 0.3s ease-in-out,
        box-shadow 0.6s linear;
	border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

.ac-container input:checked ~ article{
    transition:
        height 0.5s ease-in-out,
        box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

.ac-container article p{
    font-style: italic;
    color: #333333;
    line-height: 23px;
    font-size: 16px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.ac-container input:checked ~ article.ac-small{
    height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
    height: 180px;
}
.ac-container input:checked ~ article.ac-200{
    height: 200px;
}
.ac-container input:checked ~ article.ac-300{
    height: 300px;
}
.ac-container input:checked ~ article.ac-350{
    height: 350px;
}
.ac-container input:checked ~ article.ac-400{
    height: 400px;
}
.ac-container input:checked ~ article.ac-500{
    height: 500px;
}
.ac-container input:checked ~ article.ac-550{
    height: 550px;
}
.ac-container input:checked ~ article.ac-600{
    height: 600px;
}
.ac-container input:checked ~ article.ac-650{
    height: 650px;
}
.ac-container input:checked ~ article.ac-700{
    height: 700px;
}
.ac-container input:checked ~ article.ac-750{
    height: 750px;
}
.ac-container input:checked ~ article.ac-800{
    height: 800px;
}
.ac-container input:checked ~ article.ac-850{
    height: 850px;
}
.ac-container input:checked ~ article.ac-900{
    height: 900px;
}
.ac-container input:checked ~ article.ac-950{
    height: 950px;
}
.ac-container input:checked ~ article.ac-1000{
    height: 1000px;
}
.ac-container input:checked ~ article.ac-1100{
    height: 1100px;
}
.ac-container input:checked ~ article.ac-1200{
    height: 1200px;
}
.ac-container input:checked ~ article.ac-1250{
    height: 1250px;
}
.ac-container input:checked ~ article.ac-1300{
    height: 1300px;
}
.ac-container input:checked ~ article.ac-1500{
    height: 1500px;
}
.ac-container input:checked ~ article.ac-1550{
    height: 1550px;
}
.ac-container input:checked ~ article.ac-1600{
    height: 1600px;
}
.ac-container input:checked ~ article.ac-1700{
    height: 1700px;
}