@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
 全デバイス共通のスタイルとスマートフォン縦向きレイアウトの指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
html {
scroll-padding-top: 70px;
 }
#wrap *,#wrap ::before,#wrap ::after { box-sizing: content-box;}
#wrap {height:100%;height: auto; margin:0 auto; background: #ffffff;padding: 60px 0px 80px 0px;display: block;} 

#wrap #header{ width:400px; height:40px; margin:0 auto; text-align:left;padding: 0 0 10px 0;}
#wrap #header h1{ padding:0 0 0 0;}
#wrap #container{ width:400px; margin:0 auto; text-align:left;}
#wrap #container #maincol{ width:400px; padding:0; overflow:hidden;}
#wrap #container #maincol .title{ width:400px;height: 86px; padding:0; background:url(../images/small/maincol_bg_01.gif); background-repeat: no-repeat; overflow:hidden;}
#wrap #container #maincol .cate{ width: 400px; height:30px;margin-top: -30px; text-align:center;padding:0 0 0 0;}
#wrap #container #maincol .section{ width:330px; padding:0px 35px; background:url(../images/small/maincol_bg_02.gif); overflow:hidden; background-repeat: repeat-y;}
#wrap #container #maincol .section ul{ list-style:none; float:left; text-align:center;}
#wrap #container #maincol .section ul li{ width:165px; height:233px; float:left; display:block; color:#fff;}
#wrap #container #maincol .section ul li a{ font-size:10px; display:inline-block;}
#wrap #container #maincol .section ul li span{ height:12px; padding:23px 0 0 0; line-height:1.5; font-size: 1.2rem; display: flex; justify-content: center; align-items: center;font-weight: bold;}
#wrap #container #maincol .section ul li img{ width:95px; margin: 25px 0 -5px 0; border: 1px solid #999999; position: relative;}
#wrap #container #maincol .section ul li .btn img{ width:45px; border: 0px;}

img.bg{ display:none;}

/* スマートホン横向き または768px以上*/
@media screen and (orientation:landscape),
	   screen and (min-width: 768px){
#wrap #header{ width:750px;}
#wrap #container{ width:750px;}
#wrap #container #maincol{ width:750px;}
#wrap #container #maincol .title{ width:750px; background:url(../images/medium/maincol_bg_01.gif);height: 86px;}
#wrap #container #maincol .cate{ width:750px;height: 30px;height: 30px;margin-top: -30px;padding: 0 0 0 0;}
#wrap #container #maincol .section{ width:690px; background:url(../images/medium/maincol_bg_02.gif);}
#wrap #container #maincol .section ul li{ width:172px;}

}
/*@media screen and ( max-width: 1024px ){
body{
	padding: 30px;
	}
#wrap #container {
    width: 690px;
}
#wrap {
    height: 100%;
    width: 690px;
    padding: 30px;
    margin:auto;
	}
#wrap #header{
	margin-bottom: 20px;
	}
#wrap #container #maincol .title {
	width: 690px;
	background: url(../images/medium/maincol_bg_01.gif);
	background-size: contain;
	}
#wrap #container #maincol .section {
	width: 620px;
	background: url(../images/medium/maincol_bg_02.gif);
	background-size: contain;
	}
}

/* PC向け及び印刷用レイアウトの指定：1024px以上では固定レイアウト */
@media only screen and (min-width: 1024px), print {
#wrap{ max-width:1100px;}
#wrap #header{ width:1000px;}
#wrap #container{ width:1000px;}
#wrap #container #maincol{ width:1000px;}
#wrap #container #maincol .title{ width:1000px;height: 100px; background:url(../images/large/maincol_bg_01.gif);}
#wrap #container #maincol .cate{ width:1000px;margin-top: -50px;padding: 5px 0 5px 0;}
#wrap #container #maincol .section{ width: 100%; background:url(../images/large/maincol_bg_02.gif);}
#wrap #container #maincol .section ul li{ width:186px; height: 253px;}
}
/*@media screen and ( max-width: 768px ){
#wrap {
    height: 100%;
    width: 630px;
    padding: 30px;
    margin: auto;
}
}*/@media screen and (max-width: 767px) {
	#wrap #container #maincol .section ul li span{
		font-size: 1rem;
	}
}
@media screen and (max-width: 424px) {
	#wrap #container {
        width: 100%;
        max-width: 340px;
        margin: 0 auto -330px;
        text-align: left;
        transform: scale(0.85);
        transform-Origin: 0 0;
    }
	#wrap{
		padding-bottom: 0;
	}
}