@charset "utf-8";

/*////////////////////////////////////////////////////////

/css/sp_common.css

/////////////////////////////////////////////////////////*/
/* ----------------------------------------------- 
	
	1: body 
		: header 
		: パンくず 

	2: Font
		: link
	
	3: select
	
	4: footer
	
	
 ----------------------------------------------- */
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (min-resolution: 2dppx){

}



/*タブレット*/
@media only screen and (max-device-width: 0), screen and (max-width: 768px){

/* --------------------------------------------------------------
 1: body
--------------------------------------------------------------- */

/* --------------------------------------------------------------
 2: header
--------------------------------------------------------------- */
header{ width:100%; margin:0 auto; border:0;}
#header_in{width:100%;}
h1{ text-align:center;}
h1 img{ width:90%;}
	
/* --------------------------------------------------------------
 3: mein
--------------------------------------------------------------- */
#main{width: 98%;padding: 0;margin: 0 auto;}
#main img{width: 100%;height: auto;}

/* character */
#character_main{margin: 5% auto;}
#character_main li:nth-child(1){width: 49%;margin: 0 auto;}
#character_main li:nth-child(2){width: 49%;margin: 0 auto;}
#character_main li a{display: block;}
#character_main li p{font-size: 100%;padding: 1%;}
#character_main li p.more{font-size: 105%;width: 70%;margin: 2% auto;}
#character_etc li{margin-right: 1.3%;margin-bottom: 2%;}
#character_etc li a{margin: 0 auto;}
#character_etc li:first-child a{margin: 0 auto;}
#character_etc ul{font-size: 0;}

/* menu */
#menu{margin: 10% auto;}
#menu ul{font-size: 110%;text-align: center;}
#menu ul li{font-size: inherit;text-align: left;font-weight: bold;margin: 1% auto 3% auto;vertical-align: bottom;}
#menu ul li:nth-child(8) {margin-right: 0;text-align: center;border: none;}
#menu ul li:nth-child(8) img{max-width: 55px;width: 50%;}

#menu ul li img{max-width: 25px;width: 30%;}
#menu ul li a{font-weight: bold;width: 65%;}
#menu ul li span{width: 65%;}

/* infomation */
#infomation{margin:0 auto 10% auto;}
h2{font-size: 130%;}
h2 img{padding-left: 2%;max-width: 42px;}
h2 span{padding: 2%;}
#infomation ul {padding: 0 2%;width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#infomation li{font-size: 100%;padding: 5% 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;word-wrap: break-word;}
#infomation li p{font-size: 90%;}
.infomation_phot{display: none;}
.infomation_spphot{display: block;padding: 20px 50px 0 50px;-webkit-box-sizing: border-box;}

/* campany */
#campany{margin:0 auto 10% auto;padding-bottom: 10%;}
#campany p {padding: 0 2%;}
span.title{font-size: 130%;margin-top: 5%;font-weight: bold;}
span.description{font-size: 100%;margin-top: 5%;}
.margin-top70 {margin-top: 20%;}

/* contact */
#contact{padding-bottom: 10%;margin: 0 auto 10% auto;}
#contact p{padding: 0 2%;}

/* characters */
#characters_etc {margin: 0 auto 10% auto;}
p.characters_etc_left{margin: 0 auto;text-align: center;}
p.characters_etc_right{padding: 0 2%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;word-wrap: break-word;}
p.characters_etc_right span.title{text-align: center;margin-top: 0;}
span.characters_btn {margin: 2% auto 1% auto;}
span.characters_btn a{font-size: 100%;padding: 2%;}
#characters_etc li{margin-bottom: 10%;}
p.mores{font-size: 120%;width: 80%;margin: 5% auto;}
p.mores a{padding: 5% 0;}

#characterin_main{margin: 5% auto;}
#characterin_main li{margin: 0 auto;}
#characterin_main li:nth-child(1) {margin: 0 auto;}
#characterin_main li p{font-size: 100%;padding: 2%;}
#characterin_introduction p.characterin_introduction_right span{text-align: center;}
#characterin_introduction p.characterin_introduction_left{padding: 2% 2% 0 2%;width: 98%;display: block;text-align: center;}

.characterin_introductionin_btn{margin: 0 auto;}
.characterin_introductionin_btn li a{font-size: 100%;padding: 5% 0;}

/* SHOPLIST */
table.shoplist{width: 100%;table-layout: fixed;word-break: break-all;word-wrap: break-all;}
h2.shoplist{margin:0 auto 10% auto;}
ul#shoplist_navi{font-size: 110%;width: 100%;display: inline-block;}
ul#shoplist_navi li{font-size: 100%;margin-bottom: 1%;display: block;}
ul#shoplist_navi li a{padding: 5% 0;text-align: center;}
#store_list li{padding: 2%;font-size: 100%;}
#store_list li p:nth-child(1){width: 100%;text-align: center;}
#store_list li p:nth-child(2){width: 100%;padding: 2% 0;display: block;}
#store_list li p:nth-child(2) span{margin-bottom: 2%;margin-top: 2%;}
#store_list li p:nth-child(2) a{padding: 2% 0;margin: 2% auto;}
#shoplist_link{width: 95%;margin: 0 auto;}
#shoplist_link ul{width: 100%;}
#shoplist_link li{width: 11.9%;}
table.shoplist tr{border: 1px solid #735a3a;text-align: center;}
table.shoplist th{display:block;}
table.shoplist td{display:block; border:1px solid #FFF;}
th.shoplist_name{border-bottom: 1px dotted #FFF;}
table.shoplist td:nth-child(odd){border-bottom: 1px dotted #735a3a;}
span.tel{background-color: #FFF !important;display:block;font-weight: normal !important;}
span.tel a{background-color:#FFF !important;font-weight: normal !important;display:initial !important;width: 95% !important;text-align: left !important;}
span.tel-link{border-bottom: 1px solid;}
table.shoplist td{text-align: left;}
 

/* --------------------------------------------------------------
 2: footer
--------------------------------------------------------------- */
footer{min-width: 100%;}
section#footer{ width:100%;}
#footerin{width: 100%;padding: 2% 0;}
#copyright{font-size: 80%;}


}

@media only screen and (max-device-width: 641px), screen and (max-width: 768px) {
/* character */
#character_etc li{width: 13%;}
#character_etc li:nth-child(7){margin-right: 0;}

/* menu */
#menu ul li{width: 24%;}

/* characters */
#characters_etc li{padding: 2% 0;margin-bottom: 5%;}
p.characters_etc_left{width: 18%;display: inline-block;vertical-align: middle;}
p.characters_etc_right{width: 79%;display: inline-block;vertical-align: middle;}
p.characters_etc_right span.haracters_infomation{display: inline-block;width: 35%;}
p.characters_etc_right span.characters_btn{display: inline-block;width: 30%;}

#characterin_main li{width: 49%;}
#characterin_introduction li{vertical-align: bottom;}
#characterin_introduction{margin: 5% auto;}
.characterin_introductionin_btn li{width: 32% !important;}

/* SHOPLIST */
ul#shoplist_navi{margin: 0 auto 5% auto;}
ul#shoplist_navi li{width: 24.5%;display: inline-block;}
ul#shoplist_navi li{margin-right: 0;}
#store_list li{width: 44.9%;}
#store_list li:nth-child(odd){margin-right:1%;}
}

@media only screen and (max-device-width: 0), screen and (max-width: 640px) {
/* character */
#character_etc li{width: 24%;}
#character_etc li:nth-child(4){margin-right: 0;}
#character_etc li:nth-child(8){margin-right: 0;}
#characterin_introduction{width: 98%;}

/* menu */
#menu ul li{width: 48%;}

/* characters */
#characters_etc li{padding-bottom: 8%;}
p.characters_etc_left{width: 100%;display: block;}
p.characters_etc_right{width: 100%;}
p.characters_etc_right span.haracters_infomation{display: block;width: 80%;}
p.characters_etc_right span.characters_btn{display: block;width: 80%;}

#characterin_main li{width: 100%;}
#characterin_introduction p.characterin_introduction_right{width: 90%;padding: 0 0 5% 0;}
.characterin_introductionin_btn li{width: 80% !important;margin: 2% auto !important;}

/* SHOPLIST */
ul#shoplist_navi{margin: 0 auto 10% auto;}
ul#shoplist_navi li{width: 49%;}
ul#shoplist_navi li{margin-right: 1%;float: left;}
ul#shoplist_navi li:nth-child(even){margin-right:0;float: right;}
#store_list li{width: 95%;margin-bottom: 5%;}
#store_list li:nth-child(odd){margin-right: 0;}

#shoplist_link{width: 95%;margin: 0 auto;}
#shoplist_link ul{width: 100%;}
#shoplist_link li{width: 11.9%;}
table.shoplist tr{border: 1px solid #735a3a;text-align: center;}
table.shoplist th{display:block;}
table.shoplist td{display:block; border:1px solid #FFF;}
th.shoplist_name{border-bottom: 1px dotted #FFF;}
table.shoplist td:nth-child(odd){border-bottom: 1px dotted #735a3a;}
span.tel-link{border-bottom: 1px solid;}

}

@media only screen and (max-device-width: 451px), screen and (max-width: 495px) {

}

@media only screen and (max-device-width: 413px), screen and (max-width: 450px) {

}

@media only screen and (max-device-width: 374px), screen and (max-width: 414px) {
}
@media only screen and (max-device-width: 321px), screen and (max-width: 375px) {
}
@media only screen and (max-device-width: 303px), screen and (max-width: 320px) {

}
@media only screen and (max-device-width: 0px), screen and (max-width: 304px) {
}