@charset "UTF-8"; /* CSS Document */ /* all */ * { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } /* page */ #page { width: 1024px; margin: 0 auto; } /* main */ .comment { width: 700px; margin: 0 auto; } .comment2 { 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; }