@charset "UTF-8"; /* * CSS pageParts.css */ /* --------------------------------------- #index --------------------------------------- */ /* common */ body#index article.bodywrap .bodyinwrap{ padding-top: 20px } body#index article.bodywrap.last .bodyinwrap{ padding-bottom: 30px; } .bgcunset{ background-color: unset !important; } #index .bgbox1{ background-color: #fff; max-width: 1180px } #index .sectitle { font-weight: bold; font-size: 1.33em; text-align: center; margin-bottom: 30px; } #index #sec_1 #s1_insec1 .link1>li>a, #index #sec_2 #s2_insec1 .link1 a{ min-width: 170px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #index #sec_2 #s2_insec1, #index #sec_3 #s3_insec1, #index #sec_4 #s4_insec1{ padding: 35px 45px 35px; } #index #sec_2 #s2_insec1 .link1, #index #sec_4 #s4_insec1 .link1{ margin-top: 25px; text-align: center; } @media screen and (max-width: 767px) { #index .bgbox1{ max-width: 100%; margin: 0; width: 100%; } #index #sec_2 #s2_insec1, #index #sec_3 #s3_insec1, #index #sec_4 #s4_insec1{ padding: 20px 4% 30px!important; } #index .sectitle { font-size: 1.29em; margin-bottom: 10px; } #index #sec_2 #s2_insec1 .link1, #index #sec_4 #s4_insec1 .link1{ margin-top: 15px; } #index #sec_2 #s2_insec1 .link1 a{ min-width: 152px } body article.bodywrap.last .bodyinwrap{ padding-bottom: 25px; } } /* #sec_1 */ #index #sec_1 #s1_insec1{ padding: 70px 140px 60px 130px; } #index #sec_1 #s1_insec1 .box1{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; justify-content: space-between; } #index #sec_1 #s1_insec1 .imgbox{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: space-around; width: 256px; } #index #sec_1 #s1_insec1 .txtbox{ width: calc(100% - 340px); font-feature-settings: "palt"; } #index #sec_1 #s1_insec1 .imgbox .img{ display: inline-block; width: 256px; height: 116px; } #index #sec_1 #s1_insec1 .copytxt{ color: #e30d20; font-weight: bold; font-size: 1.87em; line-height: 1.6; margin-bottom: 15px;} #index #sec_1 #s1_insec1 .copytxt span{ font-weight: bold; } #index #sec_1 #s1_insec1 .txt1{ font-size: 1.2em;margin-bottom: 35px; } #index #sec_1 #s1_insec1 .link1{ margin-left: -10px; margin-bottom: -10px; } #index #sec_1 #s1_insec1 .link1>li{ margin-left: 10px; display: inline-block; margin-bottom: 10px; } #index #sec_1 #s1_insec1 .movie { display: block; position: relative; width: 100%; height:0px; padding-top: 56.25%; } #index #sec_1 #s1_insec1 .movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #index #sec_1 #s1_insec1 .movie:not(.mobile) { margin-top: 20px; margin-bottom: 20px; } #index #sec_1 #s1_insec1 .movie.mobile { display: none; } @media screen and (max-width: 767px) { #index #sec_1 #s1_insec1.bgbox1{ background-color: transparent; padding: 10px 0 25px; } #index #sec_1 #s1_insec1 .imgbox{ display: none; } #index #sec_1 #s1_insec1 .txtbox{ width: 100%; } #index #sec_1 #s1_insec1 .copytxt{ font-size: 1.43em; } #index #sec_1 #s1_insec1 .txt1{ font-size: 1em; margin-bottom: 20px; } #index #sec_1 #s1_insec1 .link1{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } #index #sec_1 #s1_insec1 .link1>li{ display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flex; display: -o-inline-flex; display: inline-flex; width: calc(50% - 10px); } #index #sec_1 #s1_insec1 .link1>li>a{ min-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 12px 4%; } #index #sec_1 #s1_insec1 .movie:not(.mobile) { display: none; } #index #sec_1 #s1_insec1 .movie.mobile { display: block; } } @media screen and (max-width: 400px) { #index #sec_1 #s1_insec1 .link1{ -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } #index #sec_1 #s1_insec1 .link1>li{ width: 100%; margin-bottom: 10px; max-width: 180px; margin-left: auto; margin-right: auto; } #index #sec_1 #s1_insec1 .link1>li:last-child{ margin-bottom: 0; } } /* #sec_2 */ #index #sec_2 #s2_insec1{ padding-left: 80px; padding-right: 80px; } /* #sec_3 */ #index #sec_3 #s3_insec1 .box1{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; } #index #sec_3 #s3_insec1 .box1 .title1{ margin-bottom: 15px; text-align: center; } #index #sec_3 #s3_insec1 .box1>.leftbox1{ width: 36%; } #index #sec_3 #s3_insec1 .box1>.rightbox1{ width: 60%; } @media screen and (max-width: 767px) { #index #sec_3 #s3_insec1 .box1{ -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } #index #sec_3 #s3_insec1 .box1 .title1{ font-size: 1.07em; } #index #sec_3 #s3_insec1 .box1>.leftbox1{ width: 100%; } #index #sec_3 #s3_insec1 .box1>.rightbox1{ width: 100%; margin-top: 25px; } } /* #sec_4 */ #index #sec_4 #s4_insec1{ padding-bottom: 60px; } #index #sec_4 #s4_insec1 .link1 a{ min-width: 260px; } @media screen and (max-width: 767px) { #index #sec_4 #s4_insec1 .link1 a{ min-width: 180px; } } /* --------------------------------------- #point_ranking --------------------------------------- */ #point_ranking #sec_1 .insectitle{ margin-bottom: 40px; } #point_ranking #sec_1 .list1>li:nth-child(-n+10){ margin-bottom: 10px; background: #f2f2f2; text-align: center; padding: 29px; min-height: 120px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } #point_ranking #sec_1 .list1>li:nth-child(10){ margin-bottom: 25px; } #point_ranking #sec_1 .list1>li:nth-child(n+11){ margin-bottom: 15px; } #point_ranking #sec_1 .list1>li:last-child{ margin-bottom: 0!important; } #point_ranking #sec_1 .list1>li p, #point_ranking #sec_1 .list1>li .maininfo{ display: inline-block; } #point_ranking #sec_1 .list1>li span{ display: inline-block; vertical-align: middle; } #point_ranking #sec_1 .list1>li:nth-child(-n+3) .num{ vertical-align: bottom; } #point_ranking #sec_1 .list1>li:nth-child(-n+3) .num img{ width: 80px; height: 56px; } #point_ranking #sec_1 .list1>li:nth-child(4) .num>span, #point_ranking #sec_1 .list1>li:nth-child(5) .num>span, #point_ranking #sec_1 .list1>li:nth-child(6) .num>span, #point_ranking #sec_1 .list1>li:nth-child(7) .num>span, #point_ranking #sec_1 .list1>li:nth-child(8) .num>span, #point_ranking #sec_1 .list1>li:nth-child(9) .num>span, #point_ranking #sec_1 .list1>li:nth-child(10) .num>span{ font-weight: bold; font-size: 1.2em; line-height: 1; background-color: #fff; border-radius: 50%; width: 53px; text-align: center; padding: 17px 0; } #point_ranking #sec_1 .list1>li:nth-child(-n+3) .maininfo{ margin-left: 5px; } #point_ranking #sec_1 .list1>li:nth-child(4) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(5) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(6) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(7) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(8) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(9) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(10) .maininfo{ margin-left: 15px; } #point_ranking #sec_1 .list1>li:nth-child(n+11) .maininfo{ margin-left: 25px; } #point_ranking #sec_1 .list1>li:nth-child(-n+3) .name{ font-size: 1.33em; -ms-word-break: break-all; word-break: break-all; } #point_ranking #sec_1 .list1>li:nth-child(-n+10) .name, #point_ranking #sec_1 .list1>li:nth-child(-n+10) .pointnum{ font-weight: bold; } #point_ranking #sec_1 .list1>li .pointinfo{ margin-left: 20px; } #point_ranking #sec_1 .list1>li .pointnum{ margin-left: 7px; margin-right: 3px; vertical-align: unset; } #point_ranking #sec_1 .list1>li:nth-child(-n+3) .pointnum{ font-size: 1.6em; } #point_ranking #sec_1 .list1>li:nth-child(4) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(5) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(6) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(7) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(8) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(9) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(10) .pointnum{ font-size: 1.33em; } @media screen and (max-width: 767px) { #point_ranking #sec_1 .insectitle{ margin-bottom: 20px; } #point_ranking #sec_1 .list1>li{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; justify-content: space-between; } #point_ranking #sec_1 .list1>li:nth-child(-n+10){ padding: 25px 5%; text-align: left; justify-content: space-between; } #point_ranking #sec_1 .list1>li{ padding: 0px 5%; } #point_ranking #sec_1 .list1>li .num, #point_ranking #sec_1 .list1>li .maininfo{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; height: 100%; -ms-align-items: center; align-items: center; justify-content: center; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } #point_ranking #sec_1 .list1>li .maininfo{ -ms-align-items: start; align-items: start; line-height: 1.6; } #point_ranking #sec_1 .list1>li .num{ width: 64px; } #point_ranking #sec_1 .list1>li .maininfo{ width: calc(100% - 74px); } #point_ranking #sec_1 .list1>li:nth-child(-n+3) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(4) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(5) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(6) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(7) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(8) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(9) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(10) .maininfo, #point_ranking #sec_1 .list1>li:nth-child(n+11) .maininfo{ margin-left: 0; } #point_ranking #sec_1 .list1>li .maininfo p{ display: block; } #point_ranking #sec_1 .list1>li .pointinfo{ margin-left: 0; font-size: 0.86em; } #point_ranking #sec_1 .list1>li:nth-child(-n+3) .num img{ width: 64px; height: 44px; } #point_ranking #sec_1 .list1>li:nth-child(-n+3) .name, #point_ranking #sec_1 .list1>li .name{ font-size: 1.07em; } #point_ranking #sec_1 .list1>li .pointnum, #point_ranking #sec_1 .list1>li:nth-child(-n+3) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(4) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(5) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(6) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(7) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(8) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(9) .pointnum, #point_ranking #sec_1 .list1>li:nth-child(10) .pointnum{ font-size: 1.5em; margin-right: 0; } } @media screen and (max-width: 479px) { #point_ranking #sec_1 .list1>li .pointnum{ margin-left: 0; } } /* --------------------------------------- #how_to_use --------------------------------------- */ #how_to_use #sec_1 .list1{ margin-top: 40px; } #how_to_use #sec_1 .list1>li{ margin-bottom: 10px; background: #f2f2f2; padding: 29px 4%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; justify-content: space-between; text-align: left; } #how_to_use #sec_1 .list1>li:last-child{ margin-bottom: 0!important; } #how_to_use #sec_1 .list1>li span{ display: inline-block; vertical-align: middle; } #how_to_use #sec_1 .list1>li .num>span{ font-weight: bold; font-size: 1.2em; line-height: 1; background-color: #fff; border-radius: 50%; width: 53px; text-align: center; padding: 17px 0; } #how_to_use #sec_1 .list1>li .title{ font-weight: bold; font-size: 1.07em; } #how_to_use #sec_1 .list1>li .title+.txt{ margin-top: 10px; } #how_to_use #sec_1 .list1>li .num, #how_to_use #sec_1 .list1>li .maininfo{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; height: 100%; -ms-align-items: center; align-items: center; justify-content: center; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } #how_to_use #sec_1 .list1>li .maininfo{ -ms-align-items: start; align-items: start; line-height: 1.6; } #how_to_use #sec_1 .list1>li .num{ width: 64px; } #how_to_use #sec_1 .list1>li .maininfo{ width: calc(100% - 74px); } #how_to_use #sec_1 .list1>li .maininfo p{ display: block; } @media screen and (max-width: 767px) { #how_to_use #sec_1 .list1{ margin-top: 20px; } #how_to_use #sec_1 .list1>li{ padding: 25px 5%; padding-left: 5px; } } /* --------------------------------------- #user.mypage.index --------------------------------------- */ #user.mypage.index:not(.registration) #sec_1 #s1_insec1{ margin-bottom: 90px; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .messagebox .nametxt{ font-size: 1.6em; margin-top: 0; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .messagebox .ownedpointinfo{ font-size: 1.33em; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .messagebox .ownedpointinfo .pointnum{ font-size: 1.7em; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .messagebox .cumpointinfo .pointnum{ font-size: 1.33em; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .messagebox .cautionlink{ margin-top: 10px; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav{ margin-top: 50px; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; margin-left: -20px; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul>li{ margin-left: 20px; width: calc(25% - 20px); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul>li>a{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; -ms-align-items: center; align-items: center; height: 100%; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 50px 4%; line-height: 1.7; font-weight: bold; font-size: 1.33em; border-radius: 5px; border: 2px solid #191919; text-decoration: none; text-align: center; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul>li:nth-child(-n+2)>a{ background-color: #fff; color: #191919; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul>li:nth-child(n+3)>a{ background-color: #191919; color: #fff; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul>li:nth-child(-n+2)>a:hover, #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul>li:nth-child(n+3)>a:hover{ opacity: 1; background-color: #e30d20; color: #fff; border: 2px solid #e30d20; } #user.mypage.index:not(.registration) #sec_1 #s1_insec2{ max-width: 740px; width: 100%; margin: 0px auto; -ms-word-break: break-all; word-break: break-all; } #user.mypage.index:not(.registration) #sec_1 #s1_insec2 .title{ text-align: center; font-size: 1.6em; margin-bottom: 15px; font-weight: bold; } #user.mypage.index:not(.registration) #sec_1 #s1_insec2 .morelink .btnlink{ min-width: 180px; } @media screen and (max-width: 767px) { #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .messagebox p{ text-align: center; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .messagebox .nametxt{ font-size: 1.43em; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .messagebox .ownedpointinfo{ font-size: 1.14em; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .messagebox .ownedpointinfo .pointnum{ font-size: 1.25em; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .messagebox .cumpointinfo .pointnum{ font-size: 1.14em; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav{ margin-top: 40px; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul{ -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: -10px; margin-left: -10px; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul>li{ margin-bottom: 10px; width: calc(50% - 10px); margin-left: 10px; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul>li>a{ padding: 20px 6%; font-size: 1.07em; border: 1px solid #191919; } #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul>li:nth-child(-n+2)>a:hover, #user.mypage.index:not(.registration) #sec_1 #s1_insec1 .mypagenav>ul>li:nth-child(n+3)>a:hover{ border: 1px solid #e30d20; } #user.mypage.index:not(.registration) #sec_1 #s1_insec2 .title{ font-size: 1.29em } } /* --------------------------------------- #user.registration.check --------------------------------------- */ #user.registration.check #sec_1 .forminputlist .list1>dt{ padding-top: 0; } @media screen and (max-width: 767px) { #user.registration.check #sec_1 .forminputlist .list1>dt{ margin-bottom: 5px; text-align: left; } } /* --------------------------------------- #user.mypage.twitter --------------------------------------- */ #user.mypage.twitter #sec_1 #s1_insec1 .forminputlist{ margin-top: 40px; margin-bottom: 40px; } #user.mypage.twitter #sec_1 #s1_insec1 .forminputlist .list1{ align-items: center; } #user.mypage.twitter #sec_1 #s1_insec1 .forminputlist .list1>dt{ padding-top: 0; width: 170px; } #user.mypage.twitter #sec_1 #s1_insec1 .forminputlist .list1>dd{ width: calc(100% - 170px) } #user.mypage.twitter #sec_1 #s1_insec1 .btnarea{ margin-top: 40px; } #user.mypage.twitter #sec_1 #s1_insec2{ margin-top: 70px; } /* --------------------------------------- #user.mypage.exchange --------------------------------------- */ #user.mypage.exchange #sec_1 #s1_insec1 .txt1{ margin-top: 40px; } #user.mypage.exchange #sec_1 #s1_insec1 .txt1>span{ font-size: 2em; font-weight: bold; line-height: 1.6; display: inline-block; margin-right: 5px; margin-left: 10px; } #user.mypage.exchange #sec_1 #s1_insec1 .box1{ margin-top: 40px; padding: 40px 6%; background-color: #f5f5f5; } #user.mypage.exchange #sec_1 #s1_insec1 .box1 .txt2{ margin-bottom: 25px; text-align: center; } #user.mypage.exchange #sec_1 #s1_insec1 .box1 .txt2 .exchange_point{ background-color: #fff!important; margin-left: 20px; margin-right: 10px; width: 258px; border: none !important; margin-bottom: 5px; margin-top: 5px; } #user.mypage.exchange #sec_1 #s1_insec1 .box1 .morelink input.btn{ width: 190px; } @media screen and (max-width: 767px) { #user.mypage.exchange #sec_1 #s1_insec1 .box1 .txt2 .exchange_point{ width: 100%; margin-left: 0; margin-right: 0; } #user.mypage.exchange #sec_1 #s1_insec1 .txt1>span{ font-size: 1.4em; margin-right: 3px; margin-left: 5px; } } /* --------------------------------------- #user.mypage.history --------------------------------------- */ #user.mypage.history .list1>li{ margin-bottom: 10px; background: #f2f2f2; text-align: left; padding: 25px; padding-left: 5px } #user.mypage.history .list1>li:last-child{ margin-bottom: 0!important; } #user.mypage.history .list1>li p, #user.mypage.history .list1>li .maininfo{ display: inline-block; } #user.mypage.history .list1>li span{ display: inline-block; vertical-align: middle; } #user.mypage.history .list1>li .maininfo, #user.mypage.history .list1>li .date{ margin-left: 20px; } #user.mypage.history .list1>li .pointinfo{ margin-left: 20px; } #user.mypage.history .list1>li .pointnum{ margin-left: 7px; margin-right: 3px; vertical-align: unset; font-size: 1.2em; font-weight: bold; } @media screen and (max-width: 767px) { #user.mypage.history .list1>li{ padding: 25px 6%; } #user.mypage.history .list1>li .date, #user.mypage.history .list1>li .maininfo{ line-height: 1.6; margin-left: 0;display: block; } #user.mypage.history .list1>li .date{ width: 80px; margin-bottom: 5px; } #user.mypage.history .list1>li .maininfo{ width: calc(100% + 20px); margin-left: -20px; } #user.mypage.history .list1>li .pointinfo{ font-size: 0.86em; } #user.mypage.history .list1>li .name{ font-size: 1.07em; margin-left: 20px; } #user.mypage.history .list1>li .pointnum{ font-size: 1.5em; margin-right: 0; } } #user.mypage .otherinfo ul>li.icon a { display: -webkit-box; display: -moz-box; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; text-decoration: none; padding: 5px; } #user.mypage .otherinfo ul>li.icon a svg { margin-right: 5px; fill: #ffffff; } #user.mypage .otherinfo ul>li.icon a svg path:last-child { stroke: #e30d20; } /* --------------------------------------- #user.registration.check.mypage.index --------------------------------------- */ #user.registration.check.mypage.index #sec_1 #s1_insec1 .insectitle{ margin-bottom: 40px; } #user.registration.check.mypage.index #sec_1 #s1_insec1 .forminputlist>li{ margin-bottom: 30px; } #user.registration.check.mypage.index #sec_1 #s1_insec1 .forminputlist .list1>dt{ width: 170px; } #user.registration.check.mypage.index #sec_1 #s1_insec1 .forminputlist .list1>dd{ width: calc(100% - 170px) } #user.registration.check.mypage.index #sec_1 #s1_insec1 .link1{ margin-top: 45px; } #user.registration.check.mypage.index #sec_1 #s1_insec1 .link1>a{ width: 240px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #user.registration.check.mypage.index #sec_1 #s1_insec1 .link1>a:nth-child(2){ float:right; } @media screen and (max-width: 767px) { #user.registration.check.mypage.index #sec_1 #s1_insec1 .link1{ text-align: center; text-align:center; } #user.registration.check.mypage.index #sec_1 #s1_insec1 .link1>a{ width: 180px; display:block; margin:0 auto; } #user.registration.check.mypage.index #sec_1 #s1_insec1 .insectitle{ margin-bottom: 15px; } #user.registration.check.mypage.index #sec_1 #s1_insec1 .forminputlist .list1>dt{ margin-bottom: 0; } #user.registration.check.mypage.index #sec_1 #s1_insec1 .link1>a:nth-child(2){ float:none; margin-top:20px; } } /* --------------------------------------- #user.registration.mypage.edit --------------------------------------- */ #user.registration.mypage.edit .forminputlist .list1>dt{ width: 170px; } #user.registration.mypage.edit .forminputlist .list1>dd{ width: calc(100% - 170px) } #user.registration.mypage.edit .btnarea>ul{ margin-top: 40px; } @media screen and (max-width: 767px) { #user.registration.mypage.edit .insectitle{ margin-bottom: 25px; } #user.registration.mypage.edit .forminputlist>li{ margin-bottom: 25px; } #user.registration.mypage.edit .forminputlist .list1>dt{ margin-bottom: 10px; } } #bbs.single #sec_1 #s1_insec2 div.elementparts dl{ padding: 15px 0; } #bbs.single #sec_1 #s1_insec2 div.elementparts dl>dt{ clear: left; float: left; width: 12%; } #bbs.single #sec_1 #s1_insec2 div.elementparts dl>dd { margin-left: 20%; margin-right: 5%; word-break: break-all; } @media screen and (max-width: 767px) { #bbs.single #sec_1 #s1_insec2 div.elementparts dl:not(:last-child){ border-bottom: 1px solid lightgray; } #bbs.single #sec_1 #s1_insec2 div.elementparts dl>dt{ clear: none; float: none; padding-bottom: 15px; } #bbs.single #sec_1 #s1_insec2 div.elementparts dl>dd{ margin-left: 0; margin-right: 0; } } #commentform .forminputlist>li .machine-inut-area { position: relative; } #commentform .forminputlist>li .machine-inut-area .data-list { position: absolute; top: 75px; left: 0; width: 100%; display: none; } #commentform .forminputlist>li .machine-inut-area .data-list .data-option { background-color: #fff; width: calc(100% - 5); border: 1px solid lightgray; cursor: pointer; word-break: break-all; padding: 1px 2px; margin: 0; } #commentform .forminputlist>li .machine-inut-area .data-list .data-option:hover { background: #eee; } #commentform .forminputlist>li .machine-inut-area .data-list .data-option:not(:last-child) { border-bottom: none; } #commentform .forminputlist>li .machine-inut-area .data-list .data-option.selected { background: #eee; } @media screen and (max-width: 767px) { #commentform .forminputlist>li .machine-inut-area .data-list { top: 69px; width: 100%; } }