@charset "utf-8";
@media screen and (max-width:767px){
/*▼ヘッダー▼*/
header{
padding:15px 0;
background:#fa7093;
position:relative;
}
header h1{
color:#fff;
font-size:12px;
font-weight:bold;
text-align:center;
}
header h1 span{
display:block;
font-size:18px;
margin-bottom:1%;
}
header a{
display:inline-block;
color:#fff;
text-decoration:none;
}
nav{
display:none;
background:#ffa0b9;
position:absolute;
right:0;
top:50%;
opacity:0.9;
overflow:hidden;
}
nav li a{
display:block;
font-size:14px;
padding:10px 15px;
}
nav li a:hover{
background:#ffbdce;
}
main h2{
color:#555;
font-size:24px;
font-weight:bold;
text-align:center;
margin-bottom:5%;
}
.introduction{
color:#999;
font-size:16px;
text-align:center;
margin:0 2% 7% 2%;
}
/*▼20150915高田▼*/
.nav_btn{
display:inline-block;
position:absolute;
right:2%;
top:23%;
width:40px;
height:40px;
cursor:pointer;
z-index:11;
}
.nav_btn span{
display: block;
position: absolute;
top: 50%;
width:100%;
height: 4px;
background: #fff;
transition: .2s;
}
.nav_btn span:before, .nav_btn span:after{
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
width:100%;
height: 4px;
background: #fff;
transition: .3s;
}
.nav_btn span:before{
margin-top: -16px;
}
.nav_btn span:after{
margin-top: 13px;
}
.nav_btn .close{
background: transparent;
}
.nav_btn .close:before, .nav_btn .close:after{
margin-top: 0;
}
.nav_btn .close:before{
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.nav_btn .close:after{
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
/*▲20150915高田▲*/
/*▲ヘッダー▲*/
/*▼フッター▼*/
footer small{
display:block;
color:#888;
font-size:14px;
text-align:center;
padding:5% 2%;
}
/*▲フッター▲*/
/*▼固定メニュー▼*/
.menu_btn::selection,.menu_btn span::selection,.menu_list::selection,.menu_list li::selection,.menu_list a::selection{
background:none;
}
.fix_slide{
position:fixed;
z-index:10;
right:2%;
bottom:5%;
width:250px;
}
.menu_btn{
display: inline-block;
position: absolute;
right:0;
bottom:0;
width:50px;
height:50px;
border-radius: 3px;
background: #ffa0b9;
cursor:pointer;
}
.menu_btn span{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 2px;
margin: -1px 0 0 -16px;
background: #fff;
transition: .2s;
}
.menu_btn span:before, .menu_btn span:after{
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 32px;
height: 2px;
background: #fff;
transition: .3s;
}
.menu_btn span:before{
margin-top: -10px;
}
.menu_btn span:after{
margin-top: 8px;
}
.fix_slide .menu_btn.bd_none{
border-bottom-left-radius:0;
border-top-left-radius:0;
}
.menu_btn .close{
background: transparent;
}
.menu_btn .close:before, .menu_btn .close:after{
margin-top: 0;
}
.menu_btn .close:before{
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.menu_btn .close:after{
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.menu_list{
background:#ffa0b9;
position:absolute;
left:-30px;
bottom:0;
display:none;
width:250px;
}
.menu_list li{
list-style-type: none;
}
.menu_list li:hover{
background:#ffbdce;
}
.menu_list li a{
display:block;
color:#fff;
font-size:14px;
text-decoration:none;
padding:10px;
}
/*▲固定メニュー▲*/
/*▼トップページ▼*/
/*main{
background:url(../img/urumi_key.png) center top no-repeat;
background-size:contain;
padding-top:54%;
}*/
.urumi{
color:#727272;
background-color:rgba(243,243,243,0.8);
padding:10% 3%;
box-shadow:rgb(227, 228, 230) 0 0 8px 1px inset;
}
.maid{
font-size:20px;
font-weight:bold;
margin-bottom:1%;
}
.urumi p{
line-height:1.7;
}
.hash{
text-align:center;
margin-bottom:6%;
}
.hash li{
display:inline-block;
color:#999;
font-size:12px;
vertical-align:top;
width:31%;
}
.hash a{
display:block;
color:#999;
text-decoration:none;
}
.hash a:hover{
color:#bbb;
}
.hash img{
width:70px;
margin:0 auto 5%;
}
#profile{
padding-top:10%;
}
#profile h3{
color:#00b8e5;
font-size:24px;
font-weight:bold;
text-align:center;
margin-bottom:5%;
}
#profile ol{
margin-bottom:4%;
}
#profile ol li{
list-style-type:decimal;
list-style-position:outside;
margin:0 0 7px 32px;
}
#profile ol li:nth-child(n+6){
font-weight:bold;
}
.urumi .pro_radio{
color:#999;
font-size:14px;
line-height:1.5;
margin-bottom:5%;
}
.external{
overflow:hidden;
margin-bottom:5%;
}
.external li{
float:left;
}
.external li:first-child{
width:100%;
margin-bottom:3%;
}
.external li:nth-child(n+2){
width:31.333%;
}
.external li:nth-child(2){
clear:both;
}
.external li:nth-child(3){
margin:0 3%;
}
.external a{
display:block;
color:#fff;
font-size:12px;
font-weight:bold;
text-align:center;
background:#2ec1e5 url(../img/link_bg.png) 95% 50% no-repeat;
background-size:17px;
border-radius:3px;
}
.external a:hover{
background:#30ccf3 url(../img/link_bg.png) 95% 50% no-repeat;
background-size:17px;
}
.external a span{
display:block;
}
.external li:first-child a{
background:#2ec1e5 url(../img/link_bg.png) 98% 50% no-repeat;
background-size:17px;
}
.external li:first-child a:hover{
background:#30ccf3 url(../img/link_bg.png) 98% 50% no-repeat;
background-size:17px;
}
.urumi .pro_immunity{
color:#999;
font-size:10px;
margin-bottom:5%;
}
#profile dl{
background:url(../img/profile_bg.png) right top no-repeat;
background-size:40%;
}
#profile dt,
#evolution dt{
margin-bottom:5px;
}
#profile li span,
#evolution li span{
font-weight:bold;
}
#profile dd,
#evolution dd{
margin-bottom:20px;
}
.apec li{
margin-bottom:7px;
}
.sound {
overflow:hidden;
}
.sound li{
float:left;
width:40%;
margin-right:2%;
margin-bottom:2%;
background:#ff9eb6 url(../img/sound_icon.png) 5% 50% no-repeat;
padding-left:8%;
background-size:13px;
border-radius:3px;
}
.sound button{
display:block;
width:100%;
color:#fff;
font-size:16px;
font-weight:bold;
text-align:left;
padding:8px 0 8px 20px;
border-left:solid 1px #ffcfdb;
}
.sound button:hover{
cursor:pointer;
background:#ffb6c3;
border-radius:0 3px 3px 0;
}
#evolution{
overflow:hidden;
}
#evolution h3{
color:#00b8e5;
font-size:24px;
font-weight:bold;
text-align:center;
margin-bottom:5%;
}
#evolution h3 span{
color:#f69679;
font-size:30px;
}
#evolution dl{
background:url(../img/evolution_bg.png) left top no-repeat;
background-size:33%;
}
.kakuse{
margin-left:40%;
}
#evolution .sound li{
color:#fff;
font-size:16px;
font-weight:bold;
text-align:center;
width:48%;
background:#ccc;
padding:5px 0;
}
#evolution .introduction span{
display:inline-block;
}
#announcement{
padding:10% 0;
background-color:rgba(255,255,255,0.8);
}
#announcement h2,
#contact h2{
color:#ff8ca9;
}
.announcement_p{
text-align:center;
margin-bottom:60px;
}
#announcement ul,
#wallpaper ul{
width:94%;
margin:0 auto;
}
#announcement li,
#wallpaper li{
margin-bottom:8%;
padding-bottom:8%;
border-bottom:solid 1px #ccc;
}
#announcement li{
padding:3% 3% 8% 3%;
}
#announcement li a{
display:block;
width:84%;
margin:0 auto 5%;
}
#announcement h3{
color:#727272;
font-size:18px;
margin-bottom:2%;
}
#announcement .announcement_contest{
padding:0 0 8% 0;
}
#announcement .announcement_contest a{
width:auto;
margin:0;
background:#faf2f3;
border-radius:8px;
overflow:hidden;
padding:3%;
text-decoration:none;
}
#announcement .announcement_contest a:hover{
background:#fffafa;
}
.announcement_contest img{
margin:0 auto 5%;
}
.announcement_contest h3{
font-weight:bold;
}
#announcement span{
display:block;
color:#00b8e6;
font-size:16px;
margin-bottom:2%;
}
#announcement time{
color:#a0a0a0;
font-size:12px;
margin-bottom:2%;
}
#announcement li p{
color:#888;
font-size:14px;
}
#announcement li p br{
display:none;
}
#painter{
padding-top:10%;
margin-top:-10%;
margin-bottom:10%;
}
#painter .introduction span{
display:block;
margin-top:10px;
}
#painter ul{
width:90%;
margin:0 auto 10%;
overflow:hidden;
}
#painter li{
float:left;
}
.painter_sora{
width:60%;
margin:0 0 6% 21%;
text-align:right;
}
.painter_sora a{
	color:#1fc0ec;
	text-decoration:none;
}
.painter_sora a:hover{
	text-decoration:underline;
}
.painter_moda{
clear:both;
width:47%;
}
.painter_kiriko{
float:right;
width:53%;
}
.painter2{
width:95%;
margin:0 auto;
}
.top_bg{
padding:10% 0;
background:#f7f7f7;
box-shadow:rgb(227, 228, 230) 0 0 8px 1px inset;
}
#gallery{
padding-top:5%;
}
#gallery ul{
overflow:hidden;
width:98%;
margin:0 auto 5%;
}
#gallery li{
float:left;
width:19%;
margin:0 0.5% 1% 0.5%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#gallery li a{
width:auto;
margin:0;
}
#gallery li a img{
border-radius:3px;
}
#gallery a{
display:block;
width:25%;
margin:0 auto;
}
#illustrator,
#creation{
padding-top:10%;
margin-top:-10%;
}
#illustrator ul{
overflow:hidden;
}
#illustrator li{
float:left;
text-align:center;
width:46%;
margin:0 2% 10% 2%;
}
#illustrator figure img{
margin-bottom:15px;
}
#illustrator figcaption{
color:#7b8998;
font-size:10px;
margin-bottom:5px;
}
#illustrator figcaption span{
display:block;
}
#illustrator li p{
color:#3dc6e9;
font-size:13px;
font-weight:bold;
margin-bottom:10px;
}
#illustrator li .tuu_none{
font-size:12px;
}
#illustrator li p a{
color:#3dc6e9;
text-decoration:none;
margin:0;
}
#illustrator li a{
display:inline-block;
vertical-align:bottom;
margin:0 1%;
}
#illustrator li a img{
margin:0;
}
#illustrator .hp{
color:#fff;
font-size:12px;
font-weight:bold;
text-decoration:none;
background:#17bce6;
border-radius:3px;
padding:3px 18px;
}
#illustrator .hp:hover{
background:#3accf1;
}
#illustrator figure .tuu_none{
font-size:10px;
margin:0;
}
#wallpaper{
padding:10% 0;
}
#announcement .bor_no,
#wallpaper .bor_no{
border:none;
margin:0;
padding:0;
}
#wallpaper img{
margin-bottom:5%;
}
#wallpaper h3{
color:#737373;
font-size:12px;
font-weight:bold;
margin-bottom:3%;
background:url(../img/download_bg1.png) left 0.3em no-repeat;
padding-left:14px;
}
#wallpaper section p{
color:#00b8e6;
font-size:12px;
font-weight:bold;
overflow:hidden;
}
.wall_pc{
margin-bottom:3%;
}
#wallpaper span{
float:left;
width:16em;
margin:6px 0;
background:url(../img/download_bg2.png) left 0.3em no-repeat;
padding-left:14px;
}
#wallpaper a{
float:left;
color:#fff;
text-decoration:none;
background:#ff809f;
border-radius:3px;
padding:5px 8px;
}
#wallpaper a:hover{
background:#ff95af;
}
#creation ul{
color:#727272;
width:94%;
margin:0 auto;
overflow:hidden;
}
#creation li{
margin-bottom:10%;
}
#creation h3{
border-bottom:solid 1px #b3b3b3;
margin-bottom:3%;
padding-bottom:3%;
}
#creation li p{
font-size:14px;
line-height:1.8;
}
.intro_li p{
margin-bottom:5%;
}
.intro_p{
font-weight:bold;
}
#creation li ul{
width:auto;
}
#creation li li{
font-size:14px;
margin:0;
line-height:1.8;
background:url(../img/porint.png) left 0.8em no-repeat;
padding-left:10px;
}
#creation .unknown{
color:#727272;
font-size:16px;
margin:0 2%;
}
#contact{
padding-top:10%;
}
#contact form{
width:80%;
margin:0 auto;
}
#contact li{
position:relative;
margin-bottom:4%;
}
#contact input,
#contact textarea{
width:100%;
border:solid 1px #ccc;
border-radius:5px;
padding:8px 5px;
background:#fff;
box-sizing:border-box;
}
.updnWatermark{
color:#ccc;
top:9px;
left:5px;
}
#contact button{
display:block;
color:#fff;
font-size:20px;
font-weight:bold;
background:#ff8ca9;
border-radius:5px;
padding:8px 0;
width:50%;
margin:0 auto 5%;
}
#contact button:hover{
cursor:pointer;
background:#fea2b9;
}
.caution{
color:#fc658b;
font-size:16px;
margin:0 2% 5% 2%;
}
label.error{
color:#ff6860;
font-size:14px;
}
.error_msg{
color:#ff6860;
font-size:14px;
margin:0 2% 3% 2%;
}
.thanks_text{
color:#999;
text-align:center;
margin-top:40px;
}
#about{
padding:10% 0;
}
#about img{
width:94%;
margin:0 auto 5%;
}
#about ul{
overflow:hidden;
}
#about li{
float:left;
width:47%;
margin:0 0 2% 2%;
}
#about a{
display:block;
color:#fff;
font-size:14px;
font-weight:bold;
text-align:center;
text-decoration:none;
background:#ff8ca9;
border-radius:3px;
padding:15px 0;
}
#about a:hover{
background:#fa9fb6;
}
/*2016/2/1追加*/
/*▲トップページ▲*/
/*▼イラストコンテスト▼*/
#contest_header{
padding:12px 0;
}
#contest_header h1,
#contest_header h1 span{
font-size:16px;
}
#contest_header .nav_btn span{
width:36px;
}
#contest_header .nav_btn span:before,
#contest_header .nav_btn span:after{
width:36px;
}
#contest_header .nav_btn span:before{
margin-top:-14px;
}
#contest_header .nav_btn span:after{
margin-top:11px;
}
#contest_header .nav_btn .close:before,
#contest_header .nav_btn .close:after{
margin-top:0;
}
#contest_main{
padding-bottom:60px;
background:#f7f7f7;
}
.contest_hash{
margin-top:10%;
}
#anniversary{
padding:5% 3% 0 3%;
color:#727272;
}
#anniversary h2{
color:#00b8e5;
font-size:24px;
margin-bottom:5%;
}
#anniversary h2 span{
display:inline-block;
}
#anniversary h3{
font-size:20px;
font-weight:bold;
padding-bottom:5px;
border-bottom:solid 1px #b3b3b3;
margin-bottom:10px;
}
#anniversary section{
margin:30px auto 0;
}
#anniversary p,
.overview li,
.prize li,
.site_posted li,
.participation_terms li{
font-size:14px;
}
.overview ol{
counter-reset:num;
}
.overview ol li{
position:relative;
padding-left:20px;
margin-bottom:5px;
}
.overview ol li:before{
counter-increment:num;
content:counter(num);
position:absolute;
left:0;
border:solid 1px #727272;
border-radius:50%;
width:1em;
height:1em;
text-align:center;
line-height:1.2;
}
.overview ol span{
color:#00b8e5;
}
.overview ul{
margin-bottom:15px;
}
.overview ul li,
.guidelines p{
padding-left:15px;
background:url(../img/kome_sp.png) left 0.3em no-repeat;
background-size:11px;
}
.overview dl{
overflow:hidden;
margin-bottom:15px;
}
.overview dt,
.overview dd,
.guidelines dt,
.guidelines dd{
font-size:14px;
float:left;
margin-bottom:5px;
}
.overview dt,
.guidelines dt{
clear:both;
margin-right:20px;
}
.dd_w{
width:81%;
}
.overview p{
font-size:14px;
font-weight:bold;
margin-bottom:5px;
}
.overview .external{
margin:15px 0 0 0;
}
.overview .external li{
padding:0;
background:none;
}
.overview .external li:first-child{
margin-bottom:10px;
}
.guidelines dl{
overflow:hidden;
}
.guidelines .participation{
margin-bottom:15px;
}
.prize h3,
.prize dt{
color:#fa7d9c;
}
.prize dt{
font-size:14px;
font-weight:bold;
margin-bottom:5px;
}
.prize dd{
margin-bottom:10px;
}
.prize li{
font-weight:bold;
margin-bottom:5px;
}
.prize li span{
margin:0 15px;
}
.site_posted p{
margin-bottom:15px;
}
.site_posted ul{
overflow:hidden;
}
.site_posted li{
float:left;
margin-right:20px;
}
.participation_terms p{
margin-bottom:15px;
}
.participation_terms p,
.participation_terms li,
.disclaimer p{
line-height:1.6;
}
.participation_terms ol li{
list-style-type:decimal;
list-style-position:outside;
margin-left:25px;
}
.participation_terms ol li:nth-last-child(3){
margin:15px 0 15px 25px;
}
.participation_terms ul{
margin:10px 5px;
}
.participation_terms li li{
list-style-type:none;
list-style-position:inside;
margin:0;
background:url(../img/porint.png) left 0.6em no-repeat;
padding-left:10px;
}
.participation_terms li li:nth-last-child(3){
margin:0;
}
#anniversary #gallery h2{
color:#555;
background:url(../img/h_bg3.png) center 50% no-repeat;
}
#anniversary #gallery{
margin-bottom:50px;
}
#anniversary #gallery ul{
margin:0 auto;
}
#anniversary #gallery li{
width:32%;
}
#footer_contest{
background:#f7f7f7;
}
/*2016.02.29追加*/
#anniversary .application_end{
color:#f00;
font-size:20px;
font-weight:bold;
text-align:center;
margin-bottom:5px;
}
.application_end span{
display:block;
}
#anniversary .committee{
color:#fd4242;
font-size:16px;
text-align:center;
}
/*2016.02.29追加*/
/*▼2016.03.07追加▼*/
.pc{
display:none;
}
#anniversary .result h2{
background:none;
width:80%;
margin:0 auto 15%;
}
#anniversary .result section{
overflow:hidden;
margin:0 0 12% 0;
}
#anniversary .result h3{
border:none;
padding:0;
width:63%;
margin:0 auto 6%;
}
.result .sp{
margin-bottom:5%;
}
.result_council{
margin:0 auto;
}
#anniversary .council h2{
margin-bottom:30px;
}
.council h2 img{
width:30%;
margin:0 auto;
}
.council p{
line-height:1.6;
}
.council_thank{
margin:25px 0;
}
.council span{
display:block;
font-size:14px;
text-align:right;
margin-top:40px;
}
/*▲2016.03.07追加▲*/
/*▲イラストコンテスト▲*/
}
@media only screen and (min-width:418px) and (max-width:767px){
header h1{
font-size:16px;
}
header h1 span{
font-size:22px;
}
#contest_header h1,
#contest_header h1 span{
font-size:20px;
}
.nav_btn{
width:50px;
height:50px;
}
.nav_btn span:before{
margin-top:-18px;
}
.nav_btn span:after{
margin-top:15px;
}
.error_msg{
font-size:16px;
width:26em;
margin:0 auto 2%;
}
}
@media only screen and (min-width:570px) and (max-width:767px){
#illustrator li{
width:30%;
margin:0 0 10% 2.3%;
}
.sp_clear{
clear:both;
}
#wallpaper h3{
font-size:14px;
}
#wallpaper section p{
font-size:14px;
}
#wallpaper a{
padding:5px 10px;
}
}
@media screen and (max-width:568px){
#profile dl {
background:url(../img/profile_bg.png) center top no-repeat;
background-size:70%;
padding-top:72%;
}
#evolution dl{
background:url(../img/evolution_bg.png) center top no-repeat;
float:none;
background-size:70%;
padding:72% 0 0 0;
}
dt.profi{
width:75%;
margin:0 auto 5px;
}
dd.profi{
width:75%;
margin:0 auto 20px;
}
}
@media screen and (max-width:400px){
dt.profi,
dd.profi{
width:96%;
}
.dd_w{
width:78%;
}
}
@media only screen and (min-width:630px) and (max-width:767px){
#profile dl{
background-size:33%;
}
}

/*新キービジュアル切替*/
.new_key{
	background:url(../img/urumi_key_new.png) center top no-repeat;
	background-size:contain;
}