@charset "utf-8";
/* ------------------------------------------------------------ index */
#header { min-width: 1300px;}
footer{min-width: 1300px; }
body{min-width: 1300px;}

/* ------------------------------------------------------------ #mypage */
#mypage{padding: 79px 0 96px;}
#mypage .last-login{text-align: right;}
#mypage .top_box{justify-content: space-between; align-items: center; padding: 92px 0 0;}
#mypage .top_box h3{font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; font-size: 24px; line-height: 160%;}
#mypage a.btn{width: 267px; height: auto; border: 1px solid #3766B1; border-radius: 1000px; color: #262626; text-align: center; font-family: "source-han-sans-japanese", sans-serif; font-weight: 500; font-style: normal; font-size: 16px; position: relative; padding: 14px 0 16px;}
#mypage a.btn:before{content: ""; display: block; width: 31px; height: 11px; background: url(../images/mypage/icn_1.svg) no-repeat center center; background-size: 100%; position: absolute; top: 40%; transform: translateY(-50%); right: 24px}
#mypage .mypage_box{width: 1200px; margin: 0 auto;}
#mypage .mypage_box .bottom_box{background: #D1EBFF; border-radius: 9px; padding: 18px 17px; margin: 20px auto 0;}
#mypage .mypage_box .bottom_box ul li{background: #FFFFFF; border-radius: 9px; padding: 14px 28px 14px 30px; align-items: center; justify-content: space-between;}
#mypage .mypage_box .bottom_box ul li:not(:last-child){margin: 0 0 10px;}
#mypage .mypage_box .bottom_box ul li .name{font-size: 16px; width: 54px; text-align: center; line-height: 160%; font-family: source-han-sans-japanese, sans-serif; font-weight: 400; font-style: normal; margin:0 62px 0 0;}
#mypage .mypage_box .bottom_box ul li .name span{font-size: 22px; line-height: 160%;font-family: "Helvetica Neue" , Helvetica ,serif; }
#mypage .mypage_box .bottom_box ul li .calculated_box{margin: 0 0 10px;}
#mypage .mypage_box .bottom_box ul li .list_box{width: 806px; height: auto; margin: 0 31px 0 0;}
#mypage .mypage_box .bottom_box ul li .list_box .case_box{ margin-bottom: 10px;}
#mypage .mypage_box .bottom_box ul li .list_box .tag{text-align: center; width: 92px; height: auto; color: #fff; font-size: 14px; font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 300; font-style: normal; line-height: 200%; border-radius: 6px; display: inline-block;}
#mypage .mypage_box .bottom_box ul li .list_box .amount{font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 300; font-style: normal; font-size: 14px; display: inline-block;}
#mypage .mypage_box .bottom_box ul li .list_box .amount span{font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 300; font-style: normal; font-size: 18px;}
#mypage .mypage_box .bottom_box ul li .list_box .case_box .box:not(:last-child){margin: 0 34px 0 0;}
#mypage .mypage_box .bottom_box ul li .list_box .tt{font-size: 16px; font-family: hiragino-kaku-gothic-pron, sans-serif; font-weight: 300; font-style: normal; line-height: 200%; display: inline-block;overflow-wrap: anywhere; word-break: break-word;}
#mypage .mypage_box .bottom_box ul li .list_box .case_box .box.project-name-tag .tt { width: 100%;}
#mypage .mypage_box .bottom_box ul li .list_box .tag{display: inline-block; margin: 0 15px 0 0;}
#mypage .mypage_box .bottom_box ul li .list_box .tag.black{background: #262626;}
#mypage .mypage_box .bottom_box ul li .list_box .tag.blur{background: #11C5DC;}
#mypage .mypage_box .bottom_box ul li .btn_2{background: #3766B1; border-radius: 100px; color: #fff; font-family: "source-han-sans-japanese", sans-serif; font-weight: 400; font-style: normal; font-size: 14px; position: relative; display: block; width: 158px; padding: 9px 0; text-align: center; line-height: 160%;}
#mypage .mypage_box .bottom_box ul li .btn_2:before{content: ""; display: block; width: 10px; height: 10px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotateZ(-45deg); top: 50%; position: absolute; right: 17px;}

#mypage .mypage_box  ul li{position: relative;}
#mypage .mypage_box ul li .delete_btn{position: absolute;right: 8px;top: 8px;width: 15px;height: auto;cursor: pointer;}
#mypage .mypage_box ul li .delete_btn img {width: 100%;height: auto;}
/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
	#header { min-width: auto;}
	footer{min-width: auto; }
	body{min-width: auto;}
	/* ------------------------------------------------------------ #mypage */
	#mypage{padding: 40px 0 48px;}
	#mypage .top_box{ padding: 37px 0 0 11px; display: flex; width: 90%; margin: 0 auto;}
	#mypage .top_box h3{ font-size: 20px;text-align: center;}
	#mypage a.btn{width: 158px; font-size: 14px; padding: 9px 26px 11px 17px; margin: 0 0 0 auto;}
	#mypage a.btn:before{width: 10px; height: 10px;right: 11px; background: none; border-bottom: 1px solid #3766B1; border-right: 1px solid #3766B1; top: 50%; transform: translateY(-50%) rotateZ(-45deg);line-height: 129%;}
	#mypage .mypage_box{width: 100%;}
	#mypage .mypage_box .bottom_box{padding: 15px; margin: 15px auto 0;}
	#mypage .mypage_box .bottom_box ul li{padding: 14px 14px 10px; align-items: center; justify-content: space-between;}
	#mypage .mypage_box .bottom_box ul li:not(:last-child){margin: 0 0 10px;}
	#mypage .mypage_box .bottom_box ul li .name{font-size: 16px; width: auto; margin: 0;}
	#mypage .mypage_box .bottom_box ul li .name span{font-size: 22px; margin: 0 0 0 8px;}
	#mypage .mypage_box .bottom_box ul li .calculated_box{margin: 0 14px 0 0;}
	#mypage .mypage_box .bottom_box ul li .list_box{width: auto; height: auto; margin: 0;display: flex; flex-wrap: wrap; justify-content: space-between;}
	#mypage .mypage_box .bottom_box ul li .list_box .tag{width: 62px; font-size: 12px; padding: 9px 0 8px; line-height: 100%;}
	#mypage .mypage_box .bottom_box ul li .list_box .amount{font-size: 14px; }
	#mypage .mypage_box .bottom_box ul li .list_box .amount span{font-size: 18px;}
	#mypage .mypage_box .bottom_box ul li .list_box .case_box{display: flex ;flex-wrap: wrap; position: relative; margin: 18px 0 0;}
	#mypage .mypage_box .bottom_box ul li .list_box .case_box:before{content: ""; display: block; width: 18px; height: 18px; border-bottom: 1px solid #3766B1; border-right: 1px solid #3766B1; right: 0px; transform: translateY(-50%) rotateZ(-45deg); top: 45%; position: absolute;}
	#mypage .mypage_box .bottom_box ul li .list_box .case_box .box{width: 49%; margin: 0 2% 1% 0;display: flex; align-items: center;}
	#mypage .mypage_box .bottom_box ul li .list_box .case_box .box:not(:last-child){margin: 0 2% 1% 0; }
	#mypage .mypage_box .bottom_box ul li .list_box .case_box .box:nth-child(2n){margin: 0 0 2% ;}
	#mypage .mypage_box .bottom_box ul li .list_box .tt{font-size: 14px;line-height: 160%; }
	#mypage .mypage_box .bottom_box ul li .list_box .tag{margin: 0 5px 0 0;}
	#mypage .mypage_box .bottom_box ul li .btn_2{font-size: 14px; width: 100%; padding: 9px 0;margin: 20px auto 0;}
	#mypage .mypage_box .bottom_box ul li .btn_2:before{width: 10px; height: 10px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; right: 17px;}
	
	#mypage .mypage_box.contact .top_box{padding: 56px 0 0 11px}
	#mypage .mypage_box.contact .bottom_box ul li{padding: 0px;}
	#mypage .mypage_box.contact .bottom_box ul li:not(:last-child){margin: 0 0 5px;}
	#mypage .mypage_box.contact .bottom_box ul li a.link{padding: 24px 17px 27px; display: block; position: relative; font-size: 16px; line-height: 150%;}
	#mypage .mypage_box.contact .bottom_box ul li a.link:before{content: ""; display: block; width: 18px; height: 18px; border-bottom: 1px solid #3766B1; border-right: 1px solid #3766B1; right: 35px; transform: translateY(-50%) rotateZ(-45deg); top: 50%; position: absolute;}

	#mypage .mypage_box ul li .delete_btn{width: 12px;right: 6px;top: 6px;}
}