@charset "utf-8";
/* CSS Document */

/*COMMON 通常*/
.clear { clear: both; }
.clearfix:after { content: ""; display: block; clear: both; }
.clearfix:before { content: ""; display: block; clear: both; }
.clearfix { display: block; }

/*COMMON 上書き*/
body { font-family: AXIS Std,Yu Gothic,"メイリオ",Meiryo,sans-serif; margin-top: 61px ;}
.navBox .nav_brand { max-width: 14rem; width: 14rem; }
.nav_menu { position: relative; }
.nav_menu .openArea { top: -3.5rem; right: 0rem; padding-top: 3rem; }
.nav_menu .openArea .menuListBox { color: #00a0f6; background: #e8e8e8; }
.nav_menu .openArea .menuListBox .menuList li:hover a { color: #ff44d3; background: #eeeeee; }
.linkGray:hover { color: #ff44d3; }
.home_searchTagsBox input { background: #e8e8e8; }
.home_searchTagsBox .tagMenu .menuList dl dd:hover { background-color: #ff91e2; }
.fixed_top { border-bottom: 1px solid #dddddd; }
.box .pointArea { display: block; }
.antialiased { padding: 36px 0; }
.home .antialiased,
.player .antialiased { padding: 0; }
.fixed_top { height: 61px;}
.navBox { padding: 8px 0;}
.section_info { padding-top: 36px; }
.main_container { width: 90%; }
.btnArea { margin:24px 0 0;  }
.nav_menu .openArea .menuListBox .menuList li:last-child a { border: 0; }
.home_searchTagsBox .tagMenu .menuList dl { padding-bottom: 12px; }
.home_searchTagsBox .menuBox { padding-bottom: 6px; }
.scrollFilterBox ul .btn_solid { font-size: 0.9rem; margin: 0 0.5rem 0 0; padding: 0.2rem 1rem 0.15rem 1rem; border-radius: 25px; }
.section_mypageIndex .userInfoBox .address { padding: 0.8rem 0; }
.footerMenuBox .menu { width: 24.9%; }
.footer .about .img, footer .about p { font-size: 0.9rem; line-height: 1.35rem; }
.nav_menu.db { display: block !important; }
.redCircleUserIcon { margin-bottom: -8px; }

/*HOME 上書き*/
.artBox_m .info .user img,
.artBox_m .artArea .user img { background-color: #ffffff; height: 4rem; width: 4rem; }
.artBox_s .artArea .user img { background-color: #ffffff; }
.artBox .info { position: relative; min-height: 86px; }
.artBox .artArea .user, .artBox_m .artArea .user { right: -3px; bottom: -3px; }
.artBox_s .artArea .user { right: -3px; bottom: -3px; }
.artBox .info .user { position: absolute; right: 6px; top: -75px; }
.artBox .info .user img { border-radius: 50%; width: 5rem; height: 5rem; -o-object-fit: cover; object-fit: cover; border: 5px solid white;}
.antialiased .main_container { overflow: hidden; padding: 0 5%; width: 100%; position: relative; }
.swiper, .swiper02, .swiper_3box { overflow: visible; }
.antialiased .section_homeSP:last-of-type .homeCategoryArea { border: 0; }
.artBox .artArea .user, .artBox_m .artArea .user, .artBox .info .user { background-color: #FFFFFF; border-radius: 50%; }
.home_searchTagsBox { margin-bottom: 0.2rem; }

.swiper-wrapper > div:first-child .info { background-color: #003D94; }
.swiper-wrapper > div:nth-child(2) .info { background-color: #0765C6; }
.swiper-wrapper > div:nth-child(3) .info { background-color: #077FCB; }
.swiper-wrapper > div:nth-child(4) .info { background-color: #01709A; }
.swiper-wrapper > div:nth-child(5) .info { background-color: #3a2a28; } 
.swiper-wrapper > div:nth-child(6) .info { background-color: #015542; } 
.swiper-wrapper > div:nth-child(7) .info { background-color: #003D94; }
.swiper-wrapper > div:nth-child(8) .info { background-color: #0765C6; }
.swiper-wrapper > div:nth-child(9) .info { background-color: #077FCB; }
.swiper-wrapper > div:nth-child(10) .info { background-color: #01709A; }
.artBox_m .artArea { margin-bottom: 0.6rem; }
.swiper, .swiper02, .swiper_3box { margin-bottom: 1rem; }
.section_homePC .homeCategoryArea .menu, .section_homeSP .homeCategoryArea .menu { margin-bottom: 0.7rem; } 
.homeSliderBox .mrBttm_105 { margin-bottom: 1.2rem; }

#new_collection .artBox_m .artArea .user img,
#new_collection .artBox_m .artArea .user img { border-radius: 15%; }
#new_collection .artBox .artArea .user,
#new_collection .artBox_m .artArea .user { right: 5px; bottom: -8px; }
#new_collection .swiper02 .swiper-slide .artBox .artArea { overflow: visible; }
#pickup .artBox .artArea .user, #pickup .artBox_m .artArea .user, #pickup .artBox .info .user { border-radius: 15%; }
#pickup .artBox .info .user img { border: 4px solid #FFFFFF; border-radius: 15%; }

/*SWIPER*/
.swiper, .swiper02, .swiper_3box { position: static; }
.swiper .swiper-button-prev,
.swiper02 .swiper-button-prev,
.swiper_3box .swiper-button-prev { left: -2px; height: 20%; }
.swiper .swiper-button-next,
.swiper02 .swiper-button-next,
.swiper_3box .swiper-button-next { right: -2px; height: 20%; }
.swiper .swiper-button-prev:after,
.swiper02 .swiper-button-prev:after,
.swiper_3box .swiper-button-prev:after { border-radius: 0 4px 4px 0; }
.swiper .swiper-button-next:after,
.swiper02 .swiper-button-next:after,
.swiper_3box .swiper-button-next:after { border-radius: 4px 0 0 4px; }
.swiper .swiper-button-prev:after,
.swiper .swiper-button-next:after,
.swiper02 .swiper-button-prev:after,
.swiper02 .swiper-button-next:after,
.swiper_3box .swiper-button-prev:after,
.swiper_3box .swiper-button-next:after { display: none; }
.swiper:hover .swiper-button-prev:after,
.swiper:hover .swiper-button-next:after,
.swiper02:hover .swiper-button-prev:after,
.swiper02:hover .swiper-button-next:after,
.swiper_3box:hover .swiper-button-prev:after,
.swiper_3box:hover .swiper-button-next:after { display: block; }
.swiper .swiper-button-prev, .swiper .swiper-button-next,
.swiper02 .swiper-button-prev, .swiper02 .swiper-button-next,
.swiper_3box.swiper-button-prev, .swiper_3box .swiper-button-next { top: 40%; }

/*HELP 新規*/S
.help_inbox > img { display: block; }

.help_q_box { float: left; margin: 0 239px 48px 0; width: calc(100% - 240px); }
.help_a_box { float: right; margin: 0 0 48px 239px; width: calc(100% - 240px); }
.help_q_box img, .help_q_box p { display: block; float: left; }
.help_a_box img, .help_a_box p { display: block; float: right; }
.help_q_box img, .help_a_box img { height: 200px; width: 200px; border-radius: 100%;}
.help_q_box img { margin-right: 40px; }
.help_a_box img { margin-left: 40px; }
.help_q_box p, .help_a_box p { border-radius: 16px; color: #ffffff; font-size: 18px; font-weight: 700; min-height: 200px; padding: 28px; text-align: left; width: calc(100% - 240px); position: relative; }
.help_q_box p  { background-color: #3b6594; }
.help_a_box p { background-color: #0087FF; }
.help_q_box p:before { content: ""; position: absolute; top: 100px; left: -60px; transform: translateY(-50%); border: 30px solid transparent; border-right: 36px solid #3b6594;}
.help_a_box p:before { content: ""; position: absolute; top: 100px; right: -60px; transform: translateY(-50%); border: 30px solid transparent; border-left: 36px solid #0087FF; }
.help_p_box { float: left; text-align: center; width: 100%; }
.help_p_box img { text-align: center; margin: 0 auto 36px; max-width: 600px; width: 100%; }

/*HELP 既存上書き*/
.help a:hover { color: #f977f1 }
.help .antialiased { background-image: url("/images/help/help_bg.png"); background-size: 100% 192px; background-repeat: no-repeat; }
.help_box { text-align: center; }
.help_box > span, .help_box h1.he_title { border-radius: 24px;background-color: #0087FF; color: #FFFFFF; display: block; font-size: 18px; font-weight: 700; height: 48px; line-height: 48px; margin: 24px auto 36px; padding: 0; text-align: center; width: 280px;}
.help_box > h1 { border-bottom: 1px solid #CCCCCC; font-size: 20px; font-weight: 700; display: block; height: auto; margin: 24px 0 36px; padding: 24px 14px; line-height: 28px; text-align: center;}
.help .he_list { margin-bottom: 48px; }
.help .he_list a { border-bottom: 1px solid #dddddd; color: #0087FF; display: block; line-height: 20px; padding: 24px 36px; }
.he_title { border-bottom: 1px solid #cccccc; font-size: calc(1rem + 1.5 * (100vw - 320px) / 680); font-weight: 700; padding: 24px 18px;  }

.collection_topView { background-color: #09A0F1; margin-bottom: 1rem; max-height: 380px; overflow: visible; height: 380px; }
.collection_topView .img { background: #ffffff; height: auto; text-align: center; padding: 0; overflow: hidden; position: relative; min-height: 380px; }
.collection_topView .img img { display: block; margin: 0 auto; height: auto; min-height: 250px; max-width: 100%; position: absolute; transform: translateY(-20%); top: 20%; }

/*MY ART(MYページ)*/
.user .antialiased { padding: 0;}
.user .section_mypageIndex .main_container { overflow: visible; }

/*MY ART(MYページ)上書き*/
.userBgColor { background-color: #eeeeee!important; padding: 65px 0 10px; }
.userIconBox .iconArea .icon { top: -4.5rem; }
.section_mypageIndex .userIconBox .userIcon,
.section_artIndex .userIconBox .userIcon { background-color: #ffffff; border: 6px solid #ffffff; margin-top: -10rem; height: 12rem; width: 12rem; }

/*COLLECTION*/
.collection .antialiased { padding: 0; }
.secton_collectionsIndex .userInfoBox p.h3 { padding-top: 60px; margin-bottom: 12px; }
.secton_collectionsIndex .userInfoBox .address { margin-bottom: 0.2rem; }
.secton_collectionsIndex .userInfoBox { margin-bottom: 1rem; }
.collection_topView .artBox_m { left: 5%; bottom: -3rem; }
.collection .line_up,
.user .line_up { display: inline-block; margin-top: 1rem; }
.collection .btnArea.lu_01,
.user  .btnArea.lu_01 { margin-right: 16px; }
.section_collectionsList ul { margin: 2vw 0 0; padding: 0 0 1vw }
.section_collectionsList ul li { width: 33.3%; }
.section_collectionsList .collectionsListBox { margin: 0 5% 1rem 0; }
.section_collectionsList .collectionsListBox .attentionBox { position: absolute; width: 35%; height: auto; bottom: 62px; left: 1rem; border-radius: 10px; }
.section_collectionsList .collectionsListBox .collectionsBox .text { height: 72px; }
.collection .artAreaBox .artBox_m .artArea .art { height: auto; }
.collection .artBox_m .artArea .art { width: 250px; height: 250px; }

/*User上書き*/
.userInfoBox .fa-heart { font-size: large; color: #09a0f1 !important; }

/*COLLECTION 検索結果 overflow追加*/
.alignArtBox { text-align: left; margin: 0 1%; width: 98%; }
.user .alignArtBox .artBox,
.collection .alignArtBox .artBox,
.category .alignArtBox .artBox { margin: 0 1% 2%; width: 23%; }
.alignArtBox .artBox .post { padding-top: 12px; overflow: hidden; width: 100%; }
.filterIconBox { padding: 16px 2%; }

/*特商法*/
#sc { text-align: center; }
#sc div { padding: 0; }
#sc h1 { border-bottom: 1px dotted #0087FF; font-size: 28px; font-weight: 700; padding: 60px 0; margin-bottom: 24px; }
#sc h2 { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
#sc p { font-size: 14px; font-weight: 400; line-height: 120%; margin-bottom: 24px; }
#sc dl { border-bottom: 1px dotted #0087FF; display: block; margin-bottom: 24px; padding-bottom: 24px; text-align: left; width: 100%; }
#sc dl dt { display: inline-block; width: 29%; font-size: 16px; font-weight: 700; line-height: 24px; vertical-align: top; }
#sc dl dd { display: inline-block; width: 70%; font-size: 14px; font-weight: 400; line-height: 20px; }

/*ART等をアップする*/
.section_artCreate .artCreatForm .switchBtn { font-size: 0.9rem; padding: 0.45rem 0.75rem; }

/*ART詳細*/
.art_detail { margin: 0; }
.art_detail .fixed_top { position: static;}
.art_detail .btnArea { border-bottom: 1px solid #dddddd; margin-bottom: 24px; padding-bottom: 24px; }
.art_detail .tagList { border-top: 1px solid #dddddd; margin-top: 20px; padding-top: 24px;}
.art_detail .antialiased a { color: #0087ff; }
.art_detail .favoriteIcon { color: #0087ff; }
.section_collectionsShow .artBox_m { max-width: 875px;}
.art_detail .artName .box { display: block; float: left; width: 100%; }
.art_detail .artName .box > p.favoriteIcon { float: right; }
.art_detail .artName .box p { display: block; float: left; }
.art_detail .artName .box a { display: block; float: right; margin-right: 2px; }
.art_detail .artName .box a:nth-child(3) { margin-right: 16px; }
.art_detail .artName .detail { display: block; float: left; width: 100%; }
.art_detail .alignArtBox .artBox { margin: 0 1% 2%; width: 31.3%; }
.art_detail.alignArtBox .artBox .artArea { margin: 0; width: 100%; }
.art_detail .alignArtBox .artBox .artArea img { height: auto; width: 100%; }

/*Collection & ART下部表示上書き*/
.art_detail .userPortfolio .artBox .artArea,
.user .alignArtBox .artBox .artArea,
.collection .alignArtBox .artBox .artArea,
.category .alignArtBox .artBox .artArea { position: relative; width: 100%; padding-top: 100%; height: 0; border-radius: 5px; overflow: hidden; }
.art_detail .alignArtBox .artBox .artArea img,
.user .alignArtBox .artBox .artArea img,
.collection .alignArtBox .artBox .artArea img,
.category .alignArtBox .artBox .artArea img { border-radius: 5px; height: auto; width: 100%; position: absolute; left: 0; bottom: 0; }
.tagList .btn_solid { margin: 0 0.25rem 0.5rem; }

/*POINT購入完了*/
.point .line_up { display: inline-block; margin-top: 1rem; }
.point  .btnArea.lu_01 { margin-right: 16px; }

/*POINT履歴*/
.pointHistoryBox .change { width: 100%; }
.pointHistoryBox .change p { width: 50%; }

/*PLAYER*/
.s_box { margin: 0 auto 80px; width: 1066px; min-width: 320px }
.s_box .mp { text-align: center; }
.s_box .mp p, .s_box .am p { font-size: 16px; line-height: 24px;  padding: 24px; text-align: center; }
.s_box .mp p span, .s_box .am p span { display: block; }
.s_box .mp img, .s_box .am img { margin: 0 0 36px; height: auto; width: 100%; }
.mp h2, .am h2 { color: #0087ff; font-size:24px; font-weight: 700; line-height: 62px; text-align: center; display: inline-block; background-image: url("/teaser/img/mn.png"); background-position: left 62px; background-size: 312px 56px; background-repeat: no-repeat; margin: 0 auto; height: 116px; width: 316px; cursor: pointer;}
.mp h2, .am h2 { color: #f977f1; background-image: url("/teaser/img/ma.png"); }
.player .s_box .mp img.dl_button,
.player .s_box .am img.dl_button { display: inline-block; height: auto; margin-bottom: 16px; width: 186px; }

/*SHOP*/
.subscPointBox .pn p:first-child { font-size: 0.8rem; }
.subscBox p:nth-child(2) { font-size: 1.3rem; line-height: 1.3; }

/*INFORMATION*/
.section_infoIndex { padding: 36px 0 0; }
.information .antialiased { padding-top: 0;}
.information .section_info { padding-top: 48px;}
.information .antialiased .main_container { max-width: 100%; overflow: hidden; width: 100%; }
.information .antialiased .top_art { min-height: 788px; position: relative; }
.information .antialiased .top_art .art { position: absolute; left: 50%; min-height: 788px; min-width: 2736px; top: 0; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.information .bodyContents { margin: 0 auto; padding-top: 0px; width: 98%; }
.information .section_info .bodyContents .contentsTextArea p,
.information .section_info .bodyContents .contentsTextArea p:first-child,
.information .section_info .bodyContents .contentsTextArea p:nth-child(2) { font-size:calc(0.875rem + 1.5 * (100vw - 320px) / 680); font-weight: 400; }
.information .section_info .bodyContents .contentsTextArea p.if_tt { font-size: 1.4rem; font-weight: 700; }
.information .section_info .bodyContents .contentsTextArea p.if_st { font-size: 1.2rem; font-weight: 700; }
.information .section_info .bodyContents .contentsTextArea p.if_sst { font-size: 1rem; font-weight: 700; }
.information .section_info .bodyContents > img { margin-bottom: 1.5rem; }
.information .bodyContents .infoTitle { padding-top: 0px; }
.iib { margin:24px auto 36px; text-align: center; WIDTH: 100%; }
.iib img.dl_button { display: inline-block; height: auto; margin-bottom: 16px; width: 186px;}

/*NEWS*/
.ca { background-color: #f9f9f9; margin: 0 0 80px; padding: 0 0 56px; }
.ca div { padding: 24px 56px 56px; }
.ca > img { height: 326px; width: 1065px; }
.midashi { color: #0087ff; font-size: 30px; font-weight: 900; font-family:"HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"; line-height: 45px; letter-spacing: 2px; text-align: center; padding: 50px 24px; }
.midashi span { display: block; }
.ca_block_l img { margin-right: 24px; float: left; height: 222px; width: 390px; }
.ca_block_r img { margin-left: 24px; float: right; height: 222px; width: 390px; }
.ca .ca_block_l h3, .ca .ca_block_r h3 { border-top: 1px solid #0087ff; border-bottom: 1px solid #0087ff; background-image: url("/teaser/img/cam.png") ; background-size: 56px 56px; background-position: right 2px; background-repeat: no-repeat; font-size: 20px; font-weight: 600; line-height: 60px; height: 60px; width: calc(100% - 414px); }
.ca .ca_block_l h3 { margin: 0 0 0 414px; }
.ca > div > p { font-size: 16px; line-height: 24px; padding: 20px 0 0; }
.ca div.ca_01_outline, .ca div.ca_02_outline { background-image: url("/teaser/img/ca_01_ol.jpg") ; background-size: 1065px 818px; background-position: center top; background-repeat: no-repeat; color: #0087ff; height: 818px; padding: 17% 25% 0; }
.ca div.ca_02_outline { background-image: url("/teaser/img/ca_02_ol.jpg") ; background-size: 1065px 566px; height: 566px; padding: 12% 25% 0; }
.ca div.ca_01_outline h3, .ca div.ca_02_outline h3 { font-size: 24px; font-weight: 700; margin-bottom: 16px; }
.ca div.ca_01_outline h4, .ca div.ca_02_outline h4 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.ca div.ca_01_outline ol, .ca div.ca_02_outline ol { font-size: 16px; font-weight: 500; padding-bottom: 10px; }
.ca div.ca_01_outline li, .ca div.ca_02_outline li { padding-bottom: 6px; line-height: 20px; }
.news .antialiased { background-image: url("/images/common/news_bg.png"); background-size: 100% 192px; background-repeat: no-repeat; }
.news .antialiased ul { padding-top: 48px; }
.news .antialiased li { margin-bottom: 24px; font-weight: 700; }
.news .antialiased li a { color: #888888; font-size: 0.9rem; }
.news .antialiased li a span { color :#0087ff; display: block; font-size: 1rem; }
.news .antialiased li a:hover span { text-decoration: underline!important; }
.news .antialiased li a img { display: inline-block; margin-right: 3%; margin-top: 5px; vertical-align: top; width: 12%; } 
.news .antialiased li a div { display: inline-block; vertical-align: top; width: 80%; } 
.news .antialiased .s_box img { display: block; margin-bottom: 32px; }
.news .antialiased .s_box img.si { margin-left: 25%; width: 50%; }
.news .antialiased .s_box img.bg { border: 1px solid #dddddd; }
.news .antialiased .ca a { color :#0087ff; }
.news .antialiased .ca a:hover { text-decoration: underline; }
.news .antialiased .ntc { text-align: center; }

/*REWARD*/
.reward_detail { margin: 24px 0 0; }
.reward_detail dl { border:1px solid #dddddd; border-radius: 5px; width: 100% }
.reward_detail dl dt { border-bottom:1px solid #dddddd; display: inline-block; line-height: 1.5rem; padding: 2%; width: 60%; }
.reward_detail dl dd { border-bottom:1px solid #dddddd; display: inline-block; line-height: 1.5rem; padding: 2%; width: 40%; }

/*LOGIN MENU*/
.twitterLoginArea .btn_solid { background: #000000; }

@media screen and (max-width: 1550px) {
    .collection_topView { max-height: 360px; }
    .collection_topView .img { min-height: 360px; }
    .collection .artBox_m .artArea .art { width: 240px; height: 240px; }
    .information .antialiased .top_art { min-height: 0; height: 760px; min-width: auto; max-width: none; width: auto; }
    .information .antialiased .top_art .art { min-height: 0; height: 760px; min-width: auto; max-width: none; width: auto; }
}

@media screen and (max-width: 1450px) {
    .collection_topView { max-height: 340px; }
    .collection_topView .img { min-height: 340px; }
    .section_mypageIndex .userIconBox .userIcon, 
    .section_artIndex .userIconBox .userIcon { border: 5px solid #ffffff; margin-top: -9rem; height: 11rem; width: 11rem; }
    .information .antialiased .top_art { height: 730px;}
    .information .antialiased .top_art .art { height: 730px;}
}

@media screen and (max-width: 1370px) {
    .collection_topView { max-height: 320px; }
    .collection_topView .img { min-height: 320px; }
    .information .antialiased .top_art { height: 680px;}
    .information .antialiased .top_art .art { height: 680px;}
}

@media screen and (max-width: 1280px) {
    .collection_topView { max-height: 300px; }
    .collection_topView .img { min-height: 300px; }
    .collection .artBox_m .artArea .art { width: 220px; height: 220px; }
    .information .antialiased .top_art { height: 630px;}
    .information .antialiased .top_art .art { height: 630px;}
}

@media screen and (max-width: 1214px) {
    .collection_topView { max-height: 280px; }
    .collection_topView .img { min-height: 280px; }
}

@media screen and (max-width: 1200px) {
    .s_box { margin: 0 auto 80px; width: 90%; min-width: 320px }
    .information .antialiased .main_container .top_art { min-height: 591px; }
    .information .antialiased .main_container .top_art .art { min-height: 591px; min-width: 2052px; }
    .collection .alignArtBox .artBox,
    .category .alignArtBox .artBox { margin: 0 1% 2%; width: 31.3%; }
    .section_mypageIndex .userIconBox .userIcon, 
    .section_artIndex .userIconBox .userIcon { margin-top: -8rem; height: 10rem; width: 10rem; }
    .information .antialiased .top_art { height: 580px;}
    .information .antialiased .top_art .art { height: 580px;}
    .userIconBox .iconArea .icon { top: -3.6rem; }
    .help_q_box, .help_a_box { margin: 0 0 36px; width: 100%; }
}

@media screen and (max-width: 1143px) {
    .collection_topView .artBox_m { bottom: -2rem; }
    .collection .artBox_m .artArea .art { width: 200px; height: 200px; }
    .secton_collectionsIndex .userInfoBox p.h3 { padding-top: 40px; }
    .ca > img { height: auto; width: 100%; }
    .ca .ca_block_l h3, .ca .ca_block_r h3 { background-size: auto calc(100% - 3px); font-size: 20px; line-height: 48px; height: 48px; }
    .ca div.ca_01_outline { padding: 18% 24% 0; width: 100%;  }
    .ca div.ca_02_outline { padding: 14% 24% 0; width: 100%;  }
    .collection_topView { max-height: 260px; }
    .collection_topView .img { min-height: 260px; }
}

@media screen and (max-width: 1068px) {
    .collection_topView .artBox_m { bottom: -1.5rem; }
    .secton_collectionsIndex .userInfoBox p.h3 { padding-top: 30px; }
    .midashi { font-size: 30px; line-height: 45px; padding: 5%; }
    .ca .ca_block_l h3, .ca .ca_block_r h3 { background-size: 28px 28px; font-size: 18px; line-height: 28px; padding: 10px 48px 10px 0; height: auto; }
    .ca div.ca_01_outline { padding: 20% 20% 0; }
    .ca div.ca_02_outline { padding: 16% 20% 0; }
    .collection_topView { max-height: 250px; }
    .collection_topView .img { min-height: 250px; }
}

@media screen and (max-width: 1000px) {
    .information .antialiased .top_art { height: 530px;}
    .information .antialiased .top_art .art { height: 530px;}
    .help_q_box img, .help_a_box img { height: 100px; width: 100px; }
    .help_q_box img { margin-right: 20px; }
    .help_a_box img { margin-left: 20px; }
    .help_q_box p, .help_a_box p { font-size: 16px; min-height: 100px; padding: 24px; width: calc(100% - 120px); }
    .help_q_box p:before { top: 50px; left: -44px; }
    .help_a_box p:before { top: 50px; right: -44px; }
}

@media screen and (max-width: 960px) {
    .collection .artBox_m .artArea .art { width: 180px; height: 180px; }
    .fixed_top { border-bottom: 1px solid #dddddd; }
    .btnArea { margin: 16px 0 0; }
    .section_collectionsList ul li { width: 50% }
    .section_collectionsList .collectionsListBox { width: 98%}
    .section_collectionsList .collectionsListBox:nth-child(odd) { margin: 0 2% 1rem 0; }
    .section_collectionsList .collectionsListBox:nth-child(even) { margin: 0 2% 1rem 0; }
    .information .antialiased .main_container .top_art { min-height: 394px; }
    .information .antialiased .main_container .top_art .art { min-height: 394px; min-width: 1368px; }
    .width_80, .width_60, .width_50, .width_30, .width_90 { width: 80%; }
    .collection  .btnArea.lu_01 { margin-right: 0; }
    footer .row .col-sm-4,
    footer .row .col-sm-4 .about { width: 100%; }
    footer .row .col-sm-8 { width: 100%; }
}

@media screen and (max-width: 948px) {
    .ca div.ca_01_outline ol, .ca div.ca_02_outline ol { font-size: 14px; }
    .ca div.ca_01_outline ol, .ca div.ca_02_outline ol { line-height: 18px; }
}

@media screen and (max-width: 918px) {
    .midashi { font-size: 24px; line-height: 36px; text-align: left; }
    .midashi span { display: inline; }
    .ca div.ca_01_outline { padding: 23% 17% 0; }
    .ca div.ca_02_outline { padding: 16% 17% 0; }
}

@media screen and (max-width: 820px) {
    .collection .artBox_m .artArea .art { width: 160px; height: 160px; }
    .midashi { font-size: 20px; line-height: 30px; }
    .ca_block_l img { margin-right: 5%; height: auto; width: 45%; }
    .ca_block_r img { margin-left: 5%; height: auto; width: 45%; }
    .ca .ca_block_l h3, .ca .ca_block_r h3 {  width: 50%; }
    .ca .ca_block_l h3 { margin-left: 50%; }
    .ca .ca_block_r h3 { margin-right: 50%; }
    .ca div.ca_01_outline { padding: 26% 14% 0; }
    .ca div.ca_02_outline { padding: 19% 14% 0; }
    .section_mypageIndex .userIconBox .userIcon, 
    .section_artIndex .userIconBox .userIcon { margin-top: -7rem; height: 9rem; width: 9rem; }
    .information .antialiased .top_art { height: 480px;}
    .information .antialiased .top_art .art { height: 480px;}
    .userIconBox .iconArea .icon { top: -3.2rem; }
    .pointHistoryBox { padding-bottom: 1rem; border-bottom: 1px solid #DDDDDD }
    .pointHistoryBox .change { display: block; }
    .pointHistoryBox .change p { width: 100%; }
    .pointHistoryBox .change p span { display: block; }
    .news .antialiased .s_box img.si { margin-left: 20%; width: 60%; }
}

@media screen and (max-width: 720px) {
    .ca {margin: 0 0 15%; padding: 0 0 10%; }
    .ca div.ca_01_outline { padding: 30% 10% 0; }
    .ca div.ca_02_outline { padding: 25% 10% 0; }
    .section_mypageIndex .userIconBox .userIcon, 
    .section_artIndex .userIconBox .userIcon { margin-top: -6rem; height: 8rem; width: 8rem; }
    .userIconBox .iconArea .icon { top: -2.8rem; }
    .news .antialiased li a img { width: 44%; } 
    .news .antialiased li a div { margin: 0 0 24px; width: 50%; } 
    .news .antialiased .s_box img.si { margin-left: 15%; width: 70%; }
    .news .antialiased .ntc { text-align: left; }
}

@media screen and (max-width: 678px) {
    #sc h1 { font-size: 20px; padding: 30px 0 30px; }
    #sc dl dt, #sc dl dd  { width: 100% }
    .btnArea { margin: 8px 0 0; }
    .width_80, .width_60, .width_50, .width_30, .width_90 { width: 90%; }
    .collection .alignArtBox .artBox,
    .category .alignArtBox .artBox { margin: 0 1% 2%; width: 47.8%; }
}

@media screen and (max-width: 620px) {
    .ca .ca_block_l, .ca .ca_block_r { padding: 5%; }
    .ca div.ca_01_outline { padding: 35% 5% 0; }
    .ca div.ca_02_outline { padding: 30% 5% 0; }
    .section_mypageIndex .userIconBox .userIcon, 
    .section_artIndex .userIconBox .userIcon { border: 4px solid #ffffff; margin-top: -5rem; height: 7rem; width: 7rem; }
    .information .antialiased .top_art { height: 430px;}
    .information .antialiased .top_art .art { height: 430px;}
    .userIconBox .iconArea .icon { top: -2.3rem; }
    .help_q_box img, .help_a_box img { height: 50px; width: 50px; }
    .help_q_box p, .help_a_box p { font-size: 14px; min-height: 50px; padding: 20px; width: calc(100% - 70px); }
    .help_q_box p:before { top: 27px; left: -25px; border: 15px solid transparent; border-right: 18px solid #3b6594; }
    .help_a_box p:before { top: 27px; right: -25px; border: 15px solid transparent; border-left: 18px solid #0087FF; }
}

@media screen and (max-width: 599px) {
    .btnArea { margin: 2px 0 0; }
    .navBox .nav_brand { min-width: auto; width: auto; }
    #sc div { padding: 0 5%; }
    .section_collectionsList ul li { width: 100% }
    .section_collectionsList .collectionsListBox { width: 100%}
    .section_collectionsList .collectionsListBox:nth-child(odd),
    .section_collectionsList .collectionsListBox:nth-child(even) { margin: 0 0 1rem; }
    .width_80, .width_60, .width_50, .width_30, .width_90 { width: 100%; }
    .news .antialiased .s_box img.si { margin-left: 10%; width: 80%; }
    .help_box > h1 { text-align: left; }
}

@media screen and (max-width: 540px) {
    .ca div.ca_01_outline, .ca div.ca_02_outline { background-image: none; height: auto; padding: 5% 5% 0; }
    .ca div.ca_02_outline {  background-image: none; height: auto; padding: 0 5%; }
    .ca div.ca_01_outline ol, .ca div.ca_02_outline ol { font-size: 16px; }
    .ca div.ca_01_outline ol, .ca div.ca_02_outline ol { line-height: 20px; }
    .section_mypageIndex .userIconBox .userIcon, 
    .section_artIndex .userIconBox .userIcon { margin-top: -4.5rem; height: 6.5rem; width: 6.5rem; }
    .userIconBox .iconArea .icon { top: -2rem; }
}

@media screen and (max-width: 520px) {
    .collection .artBox_m .artArea .art { width: 140px; height: 140px; }
    .secton_collectionsArt .alignArtBox { justify-content: left; }
    .footerMenuBox .menu { width: 49.9%; }
}

@media screen and (max-width: 440px) {
    .midashi { font-size: 18px; line-height: 24px; }
    .ca div.ca_01_outline h3, .ca div.ca_02_outline h3 { font-size: 16px; }
    .ca div.ca_01_outline h4, .ca div.ca_02_outline h4 { font-size: 14px; font-weight: 700; }
    .ca div.ca_01_outline li, .ca div.ca_02_outline li { font-size: 14px; line-height: 18px; font-weight: 400; }
    .ca .ca_block_l h3, .ca .ca_block_r h3 { font-size: 16px; line-height: 20px; padding: 10px 28px 10px 0; }
    .ca > div > p { font-size: 14px; line-height: 20px; }
    .section_mypageIndex .userIconBox .userIcon, 
    .section_artIndex .userIconBox .userIcon { margin-top: -4rem; height: 5.5rem; width: 5.5rem; }
    .information .antialiased .top_art { height: 380px;}
    .information .antialiased .top_art .art { height: 380px;}
    .news .antialiased li a img { margin: 0px; width: 100%; } 
    .news .antialiased li a div { margin: 12px 0 24px; width: 100%; } 
    .news .antialiased .s_box img.si { margin-left: 5%; width: 90%; }
}

@media screen and (max-width: 399px) {
    .information .antialiased .main_container .top_art { min-height: 197px; }
    .information .antialiased .main_container .top_art .art { min-height: 197px; min-width: 684px; }
    .navBox .nav_brand { width: 50%; }
    .section_mypageIndex .userIconBox .userIcon, 
    .section_artIndex .userIconBox .userIcon { border: 3px solid #ffffff; margin-top: -3.5rem; height: 5rem; width: 5rem; }
    .userIconBox .iconArea .icon { top: -1.6rem; }
}
@media screen and (max-width: 360px) {
    .collection .artBox_m .artArea .art { width: 120px; height: 120px; }
    .information .antialiased .main_container .top_art { min-height: 197px; }
    .information .antialiased .main_container .top_art .art { min-height: 197px; min-width: 684px; }
    .navBox .nav_brand { width: 50%; }
    .section_mypageIndex .userIconBox .userIcon, 
    .section_artIndex .userIconBox .userIcon { margin-top: -3rem; height: 4.5rem; width: 4.5rem; }
    .information .antialiased .top_art { height: 330px;}
    .information .antialiased .top_art .art { height: 330px;}
    .news .antialiased .s_box img.si { margin-left: 0%; width: 100%; }
}