@charset "utf-8";
* { margin: 0; padding: 0; font-size: 15px; line-height: 1.8em;}
ul {list-style:none}
img {vertical-align: middle;}

html {
	color: #013c8f;
                                background:#f7f5ed;
	text-align: center;
	font-family: 'Zen Kaku Gothic New', sans-serif;
}
body {
	margin: 0 auto;
	padding: 0;
}

a { word-break: break-all; }

a:link,
a:visited {
	text-decoration: none;
	font-weight: normal;
	font-size: inherit;
	color:#000;
	}
a:hover {
	text-decoration: none;
	font-weight: normal;
	color: #f7f5ed;
                                opacity: 0.8
	}
a:active {
	text-decoration: none;
	font-weight: normal;
	font-size: inherit;
	color: #ba7924;
	}

a.ban {
                                border: 1px solid;
                                padding: 10px 30px;
                                margin: 2rem auto 0;
                                font-size: 80%;
                                border-radius: 10px;
                                color: #494121;
                                background: #f5cf38;
                                transition: .2s;
                                margin: 0 auto 2rem;
                                display: block;
                                max-width: 360px;
}

a:hover.ban {
                                color: #fff;
                                background: rgba(0,0,0,0.3)
}

img {
	border:0;
	max-width: 100%;
}
p {
	margin: 2em 0;
}
hr {
	clear: both;
	visibility: hidden;
}
.little {
                                font-size: 80%
}

h1,h2,h3,h4,h5,h6 {
}


.pc {
	display: none;
}



#wrapper{
                                margin: 0 auto;
                                padding: 0;
                                position: relative;
                                background-size: cover;
                                text-align: center;
}
header {
                                color: #000;
                                position: relative;
                                background: url("../images/header_bg.png") repeat, linear-gradient(0deg, rgba(169, 126, 217, 1) 68%, rgba(22, 30, 139, 1));
                                background-size: 50px;
                                padding: 5px 0 0;
}


.heder_contents_line {
                                background: url("../images/header_line.png") repeat-x;
                                background-size: auto 44px;
                                width: 100%;
                                height: 44px;
}

.heder_contents_yane {
                                background: url("../images/header_yane.png") no-repeat center top;
                                background-size: auto 110px;
                                width: 100%;
                                height: 110px;
                                position: absolute;
                                top: 10px; /* トップを基準に中央配置 */
}

#header_contents {
                                /* background: url(../images/sp_bg.png) repeat-x top 100px center;
                                background-size: cover;
                                padding: 0 0 1px;*/
}

.heder_contents_bg_bm {
                                background: url("../images/bottom_bg.png") repeat-x center 8px;
                                background-size: auto 181px;
                                width: 100%;
                                height: 181px;
                                position: absolute;
                                margin: 0 auto;
                                bottom: 0;
                                z-index: 1;
}


h1 {
                                position: absolute;
                                z-index: 10;
                                text-align: center;
                                width: 100%;
                                margin: 0 auto;

}
img#HNY {
                                max-width: 350px;
                                margin: 0 auto;
}

img#Year {
                                max-width: 120px;
                                padding: 0;

}

#colocolo {
	　　　　　　　　　　　　　　　　　margin: auto 0;

}
div#colo_box {
                                position: relative;
                                overflow: hidden;
                                height: 570px;
}


.colochan {
                                position: absolute;
                                top: 62%; /* トップを基準に中央配置 */
                                left: 58%; /* 左を基準に中央配置 */
                                max-width: 270px;
                                margin-left: -200px;
                                margin-top: -240px;
                                z-index: 20;
}

.colomichan {
                                position: absolute;
                                top: 33%;
                                left: 63%; /* 左を基準に中央配置 */
                                max-width: 120px;
                                transform: rotate(10deg);
}

.colo_kemuri1 {
                                position: absolute;
                                top: 320px; /* トップを基準に中央配置 */
                                left: 60%; /* 左を基準に中央配置 */
                                max-width: 166px;
                                width: 100%;
                                z-index: 20;
}
.colo_kemuri2 {
                                position: absolute;
                                top: 333px; /* トップを基準に中央配置 */
                                left: 43px; /* 左を基準に中央配置 */
                                max-width: 140px;
                                z-index: 10;
}



.kazari {
                                display: block;
                                position: absolute;
                                top:0; left: 0; right:0;
                                margin: 0 auto;
                                width:  95%;
                                max-width: 1100px;
                                height: 700px;
}

div.onpu {
                                position: absolute;
                                z-index: 30;
                                position: absolute;
}


div#onpuB_1 {
                                top: 260px; left: 10px;
                                width: 30px;
}
div#onpuB_2 {
                                top: 440px; right: 81px;
                                width: 20px;
}
div#onpuB_3 {
                                top: 510px; left: 25px;
                                width: 50px;
}
div#onpuB_4 {
                                top: 548px; right: 20px;
                                width: 50px;
}

div#onpuW_1 {
                                top: 305px; right: 128px;
                                width: 29px;
}
div#onpuW_2 {
                                top: 405px; left: 12px;
                                width: 13px;
}
div#onpuW_3 {
                                top: 380px; right: 3px;
                                width: 18px;
}
div#onpuW_4 {
                                top: 475px; left: -12px;
                                width: 28px;
}









h2#logo, #president {
                                max-width: 339px;
                                font-size: 20px;
                                position: absolute;
                                left: 0;
                                right: 0;
                                bottom: 2%;
                                margin: auto;
                                z-index: 50;
                                padding: 0 0 25px;
}

#president h2 {
                                font-size: 100%;
                                line-height: 1.2;
                                text-align: center;
}
#president img {
                                margin: 0 0 -10px;
}
#songs {
                                max-width: 338px;
                                font-size: 20px;
                                position: absolute;
                                left: 0; right: 0;
                                bottom: 2%;
                                margin: auto;
                                z-index: 50;
                                padding: 0 0 25px;
}
#songs h2 {
                                font-size: 100%;
                                line-height: 1.2;
                                text-align: center;
}
#CM {
                                font-size: 20px;
                                position: absolute;
                                left: 0; right: 0;
                                bottom: 2%;
                                margin: auto;
                                z-index: 50;
                                padding: 0 0 25px;
}
#CM h2 {
                                font-size: 90%;
                                letter-spacing: -1px;
                                line-height: 1.2;
                                text-align: center;
}

.columbia_logo {
                                margin: -10px 5px 0 0;
                                max-width: 30px;
                                display: inline-block;
                                vertical-align: middle;
}
.face_g {
                                margin: 0;
                                max-width: 21px;
                                position: absolute;
                                top: 60px; right: 10px;
}


#aisatsu {
                                padding: 30px 0 20px;
                                background: #5c4c45;
                                color: #ffffff;
                                position: relative;
                                background: url("../images/aisatsu_line.png") repeat-x center 20px #5c4c45;
                                background-size: auto 64px;
}

div#aisatsu_main {
                                margin: 0 auto 2rem;
                                
}




.group ul {
                                margin: 0 auto 2rem;
}
.group ul li {
                                display: inline-block;
                                margin: 0 10px;
}
.group ul li img {
                                max-height: 80px;
}
.group ul li a:hover img {
                                opacity: 0.8
}
footer {
	margin: 0 auto;
    padding: 5% 5% 8%;
	font-size: 80%;
	line-height: 1.3em;
	text-align: center;
                                background:#f7f5ed;
                                color: #000;
}


/*768px以上 ----------------------------------------*/

@media screen and (min-width:768px){

#colocolo {
                                background: url("../images/pc_bg_star.png") no-repeat center center;
                                background-size: contain;
}

.kazari {
                                max-width: 450px;
}
a.ban {
                                max-width: 500px;
}
}


/*990px以上 ----------------------------------------*/

@media screen and (min-width:990px){
.sp {display:none;}
.pc {display:block;}

header {
                                height: 700px;
                                margin: 0 auto;
                                padding: 0 0 15px;
}

.heder_contents_line {
}
#header_contents {
                                width: 100%;
                                margin: 0 auto;
                                background: none;
                                position: relative;
                                background: url("../images/pc_header_kazari.png") no-repeat center -8px;
                                background-size: contain;
}

.heder_contents_yane {
                                background: url("../images/header_yane.png") repeat-x center top;
                                background-size: auto 170px;
                                width: 100%;
                                height: 170px;
                                position: absolute;
                                top: 10px; /* トップを基準に中央配置 */
                                z-index: 10;
}

.kazari {
                                max-width: 1100px;
}

.line_top {
                                position: absolute;
                                top: 15px;
                                z-index: 10;
}
h1 {
	margin: 0;
                                padding: 0;
                                position: absolute;
                                z-index: 60;
                                max-width: 430px;
                                width: 430px;
                                top: 110px; left: 53%;
}

img#HNY {
                                max-width: 430px;
                                margin: 0 auto;
}
img#Year {
                                margin: 0 auto;
                                position: absolute;
                                z-index: 20;
                                max-width: 180px;
                                width: 180px;
                                padding: 0;
                                top: 120px; right: 0; left: 0;
}
#colocolo {
                                background: none;
                                text-align: center;
                                margin: 0 auto;
                                background: url("../images/pc_bg_star.png") no-repeat center center;
                                background-size: contain;
}
div#colo_box {
                                height: 699px;
                                margin: 0 auto;
                                width: 700px;
                                position: relative;
                                z-index: 30;
}

.colochan {
                                position: absolute;
                                top: 106px;
                                left: 30px;
                                max-width: 390px;
                                margin-left: 0;
                                margin-top: 0;
                                z-index: 20;
                                text-align: right;
                                height: 600px;
                                width: 390px;
}
img.tsubo {
                                position: absolute;
                                margin: 0 0 0 auto;
                                width: 205px;
                                right:0;
                                bottom: -50px;
}

.colomichan {
                                position: absolute;
                                top: auto;
                                bottom: -20px;
                                left: auto;
                                right: 22%;
                                max-width: 180px;
                                z-index: 80;
                                transform: rotate(0);
}
.colo_kemuri1 {
                                position: absolute;
                                top: 360px; /* トップを基準に中央配置 */
                                left: 40%; /* 左を基準に中央配置 */
                                max-width: 256px;
                                width: 100%;
                                z-index: 20;
}
.colo_kemuri2 {
                                position: absolute;
                                top: 403px; /* トップを基準に中央配置 */
                                left: 70px; /* 左を基準に中央配置 */
                                max-width: 200px;
                                z-index: 10;
}


.kazari {
                                width:  1080px;
                                max-width: 1080px;
                                height: 700px;
}
div#onpuB_1 {
                                top: 260px; left: 160px;
                                width: 54px;
}
div#onpuB_2 {
                                top: 280px; right: 531px;
                                width: 40px;
}
div#onpuB_3 {
                                top: 500px; left: 225px;
                                width: 80px;
}
div#onpuB_4 {
                                top: 548px; right: 400px;
                                width: 100px;
}

div#onpuW_1 {
                                top: 215px; right: 550px;
                                width: 48px;
}
div#onpuW_2 {
                                top: 345px; left: 112px;
                                width: 20px;
}
div#onpuW_3 {
                                top: 385px; right: 363px;
                                width: 30px;
}
div#onpuW_4 {
                                top: 475px;left: 90px;
                                width: 50px;
}


.face_g {
                                top: auto; right: 10%;
                                bottom: 20px;
                                max-width: 40px;
                                z-index: 50;
}

h2#logo, #president {
                                max-width: 339px;
                                font-size: 20px;
                                position: absolute;
                                top: 90%;
                                left: 5%;
                                right: auto;
                                bottom: 0;
                                margin: auto;
                                z-index: 50;
}
#president {
                                margin: 0;
                                max-width: 365px;
                                position: absolute;
                                font-size: 20px;
                                bottom: 10px;
                                left: 30px;
                                text-align: right;
}
#songs {
                                text-align: right;
                                position: absolute;
                                font-size: 22px;
                                bottom: 0;
                                left: 5%; right: auto;
}
#songs h2 {
                                text-align: left;
}
#CM {
                                text-align: right;
                                position: absolute;
                                font-size: 22px;
                                bottom: 0;
                                left: 5%; right: auto;
}
#CM h2 {
                                text-align: left;
                                font-size: 100%;
                                letter-spacing: 0;
}
div#aisatsu_main {
}

footer {
	margin: 0 auto;
                                padding: 50px 0 80px;
	font-size: 80%;
	line-height: 1.3em;
	text-align: center;
}

}