/*
=====================================================================
対応機種一覧
=====================================================================
*/
#model-inner{display:flex; flex-wrap:wrap; justify-content:space-between; margin:50px auto;}

/*機種フレーム*/
#model-inner .cat{
position:relative;
width:47%;
background-color:#fff;
background-image:url(../images/model/frame_bar.png) , url(../images/model/frame_bar.png);
background-position:right , left;
background-repeat:repeat-y , repeat-y;
filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.3));
margin:20px auto 60px;}

/*機種フレーム 装飾*/
#model-inner .cat:before,
#model-inner .cat:after{
display:block;
visibility:visible !important;
position:absolute;
width:100%;
height:27px;
content:'';}
#model-inner .cat:before{
top:-27px;
background-image:url(../images/model/frame_bar.png) , url(../images/model/frame01_top.png) , url(../images/model/frame01.png);
background-position:right , right 2px top 2px, left top;
background-repeat:repeat-y , no-repeat , no-repeat;}
#model-inner .cat:after{
bottom:-27px;
background-image:url(../images/model/frame_bar.png) , url(../images/model/frame02_btm.png) , url(../images/model/frame02.png);
background-position:left , left 2px bottom 2px, right bottom;
background-repeat:repeat-y , no-repeat , no-repeat;}

/*レイアウト調整用フレーム*/
#model-inner .cat.hidden,
#model-inner .cat.hidden:before,
#model-inner .cat.hidden:after{visibility:hidden !important;}

/*機種ロゴ*/
#model-inner .cat .title{text-align:center; margin:-20px auto 7px;}
#model-inner .cat .title img{position:relative; width:100%; max-width:275px; z-index:3;}

#model-inner .cat .inner{
display:flex;
background-image:url(../images/model/frame03.png);
background-repeat:no-repeat;
background-position:top left;
flex-wrap:wrap;
/*align-items:top;*/
border-top:1px solid #1b596e;}
#model-inner .cat .inner p{color:#145067; font-size:13px;}
#model-inner .cat .inner p:first-child{width:55%;}
#model-inner .cat .inner p:nth-child(2){width:45%;}

/*できること見出し*/
#model-inner .cat .inner p strong{
display:block;
position:relative;
width:100%;
height:21px;
color:#fff;
font-weight:normal;
line-height:22px;
padding-left:20px;}
#model-inner .cat .inner p strong:before{
display:inline-block;
position:absolute;
top:0;
left:5px;
width:10px;
height:21px;
content:'';
background-image:url(../images/model/frame04.png);}
/*できること詳細*/
#model-inner .cat .inner p span{display:block; line-height:20px; padding:20px 0 0 10px;}

/*カード一覧リンク*/
#model-inner .cat .inner p:nth-child(2),#model-inner .cat .inner p:nth-child(3){max-width:168px; text-align:center; margin:20px auto 0;}
#model-inner .cat .inner p:nth-child(2) a,#model-inner .cat .inner p:nth-child(3) a{
display:block;
width:168px;
height:85px;
color:#fff;
background-image:url(../images/model/link_btn.png);
background-size:100% auto;
font-size:15px;
font-weight:bold;
line-height:80px;
text-shadow:0px 0px 4px #002938,0px 0px 7px #004d6a;}
#model-inner .cat .inner p:nth-child(2) a:hover{background-position:0 -85px; line-height:90px;}
#model-inner .cat .inner p:nth-child(2) a br{display:none;}
#model-inner .cat .inner p:nth-child(2) img{width:100%; max-width:168px;}
#model-inner .cat .inner p:nth-child(3) a:hover{background-position:0 -85px; line-height:90px;}
#model-inner .cat .inner p:nth-child(3) a br{display:none;}
#model-inner .cat .inner p:nth-child(3) img{width:100%; max-width:168px;}

@media screen and (max-width:900px){
#model-inner .cat .inner p:nth-child(2){max-width:130px;}
#model-inner .cat .inner p:nth-child(2) a{width:130px; height:66px; line-height:20px; padding-top:14px;}
#model-inner .cat .inner p:nth-child(2) a:hover{background-position:0 -66px; line-height:20px; padding-top:17px;}
#model-inner .cat .inner p:nth-child(2) a br{display:block;}
#model-inner .cat .inner p:nth-child(3){max-width:130px;}
#model-inner .cat .inner p:nth-child(3) a{width:130px; height:66px; line-height:20px; padding-top:14px;}
#model-inner .cat .inner p:nth-child(3) a:hover{background-position:0 -66px; line-height:20px; padding-top:17px;}
#model-inner .cat .inner p:nth-child(3) a br{display:block;}
#model-inner .cat .inner p span{padding:10px 0 0 10px;}}

@media screen and (max-width:710px){
#model-inner .cat{width:49%;}
#model-inner .cat .inner{background-size:auto 18px;}
#model-inner .cat .inner p{font-size:12px;}
#model-inner .cat .inner p strong{height:18px; line-height:19px;}
#model-inner .cat .inner p strong:before{top:-2px;}}

@media screen and (max-width:680px){
#model-inner .cat .inner p:nth-child(2){max-width:114px;}
#model-inner .cat .inner p:nth-child(2) a{width:114px; height:58px; font-size:13px; line-height:17px; padding-top:12px; margin: auto;}
#model-inner .cat .inner p:nth-child(2) a:hover{background-position:0 -58px; line-height:17px; padding-top:15px;}
#model-inner .cat .inner p:nth-child(3){max-width:114px;}
#model-inner .cat .inner p:nth-child(3) a{width:114px; height:58px; font-size:13px; line-height:17px; padding-top:12px; margin: auto;}
#model-inner .cat .inner p:nth-child(3) a:hover{background-position:0 -58px; line-height:17px; padding-top:15px;}

}

@media screen and (max-width:600px){
#model-inner .cat{width:46%;}
#model-inner .cat .title img{width:70%;}
#model-inner .cat .inner p{width:100% !important;}
#model-inner .cat .inner p span{min-height:40px;}
#model-inner .cat .inner p:nth-child(2){margin:0 auto;}}

@media screen and (max-width:400px){
#model-inner .cat{width:47%;}}

@media screen and (max-width:380px){
#model-inner .cat{width:92%; margin:20px auto 50px;}
#model-inner .cat.hidden{display:none;}
#model-inner .cat .title img{width:60%;}
#model-inner .cat .inner p span{min-height:auto;}
#model-inner .cat .inner p:first-child{width:55% !important;}
#model-inner .cat .inner p:nth-child(2){width:45% !important; margin:20px auto 0;}}

/*
==========================================================================
ガチャプリント 排出カード一覧
==========================================================================
*/
#gacha{width:100%; max-width:1080px !important; margin:0 auto;}

#gacha #title{width:100%; text-align:center; margin:40px auto;}
#gacha #title img{width:100%; max-width:275px;}

#gacha strong{
display:block;
width:100%;
color:#1f5b70;
font-size:18px;
font-weight:bold;
text-align:center;
margin:0 auto;}

#gacha #gacha-print p img{width:100%; max-width:1080px;}

#gacha #gacha-print .title-ver{
width:100%;
color:#1f5b70;
background:#fff;
background-image:url(../images/original/template/frame01.png) , url(../images/original/template/frame02.png);
background-position:top left , bottom right;
background-repeat:no-repeat , no-repeat;
font-size:28px;
font-weight:bold;
text-align:center;
border:2px solid #1f5b70;
padding:15px;
margin:40px auto 0;}
#gacha #gacha-print .title-ver br{display:none;}

a.btn-back{
display:block;
width:150px;
height:56px;
color:#fff;
background-color:transparent !important;
background-image:url(../images/original/upload/btn_form.png);
background-size:100% auto;
background-repeat:no-repeat;
font-size:20px;
font-weight:bold;
text-align:center;
line-height:56px;
border:none;
cursor:pointer;
margin:20px auto 50px;}
a.btn-back:hover{background-position:0 -56px; line-height:64px;}

@media screen and (max-width:1100px){
#gacha #gacha-print .title-ver{width:96%;}}

@media screen and (min-width:980px){
#gacha #gacha-print .margin01{margin-top:-30px;}
#gacha #gacha-print .margin02{margin-top:-30px;}
#gacha #gacha-print .margin03{margin-top:-250px;}}

@media screen and (max-width:979px){
#gacha #gacha-print .margin01{margin-top:-2%;}
#gacha #gacha-print .margin02{margin-top:-2%;}
#gacha #gacha-print .margin03{margin-top:-200px;}}

@media screen and (max-width:800px){
a.btn-back{margin:50px auto 100px;}}

@media screen and (max-width:700px){
#gacha #title{margin:20px auto;}
#gacha #gacha-print .title-ver{font-size:22px; padding:10px;}}

@media screen and (max-width:640px){
#gacha #gacha-print .title-ver br{display:block;}

#gacha #gacha-print .margin01{margin-top:-2%;}
#gacha #gacha-print .margin02{margin-top:-4%;}
#gacha #gacha-print .margin03{margin-top:-20%;}}

@media screen and (max-width:480px){
#gacha #title img{width:60%;}
#gacha strong{font-size:15px;}
a.btn-back{width:120px; height:45px; font-size:15px; line-height:40px; margin:30px auto 50px;}
a.btn-back:hover{background-position:0 -45px; line-height:45px;}}

@media screen and (max-width:400px){
#gacha #title{margin:10px auto;}
#gacha strong{font-size:13px;}
#gacha #gacha-print .title-ver{font-size:16px;}
#gacha #gacha-print .margin01{margin-top:-3%;}
#gacha #gacha-print .margin02{margin-top:-5%;}}

@media screen and (max-width:320px){
#gacha strong{font-size:12px;}}