/* ============================================================
PC
==============================================================*/

@media (min-width: 762px) {
	
	
	/* ============================================================
 	main
	==============================================================*/
    
	#main_wrap{
		width: 100%;
		min-height: calc(100vh - 210px);
		position: relative;
		overflow: hidden;
	}

	#main_wrap.no_main_fix{
		min-height: 0;
		padding: 80px 0 20px;
	}

	#f_box{
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%, -50%);
		background:#fff;
		border:1px solid #dadbdc;
		border-radius:10px;
		overflow:hidden;
	}

	#f_box.no_f_box_fix{
		width: 680px;
		position: static;
		top: 0;
		left: 0;
		margin: 0 auto;
		transform: none;
	}
	
	#f_box h1{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 1.8rem;
		color: #fff;
		text-align: center;
		letter-spacing:0.1rem;
		line-height:140%;
		padding: 16px 0 18px;
		background:#51a1fb;
	}

	#f_box ul.regi_list{
		padding: 16px 60px;
		background:#e8f0fe;
	}

	#f_box ul.regi_list li:first-child{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 600;
		font-size: 1.8rem;
		color: #51a1fb;
		text-align: center;
		letter-spacing:0.1rem;
		padding: 2px 20px;
		border-bottom: 1px solid #51a1fb;
	}

	#f_box ul.regi_list li:last-child{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		font-size: 1.6rem;
		color: #51a1fb;
		text-align: center;
		letter-spacing:0.1rem;
		padding: 4px 0;
	}

	#f_box p.regi_txt{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		line-height: 160%;
		font-size: 1.5rem;
		letter-spacing:0.1rem;
		color: #202020;
		padding: 6px 9px 6px;
		margin: 0 50px 0 0;
		background: #e8f0fe;
	}


	#f_box .input_wrap{
		padding:40px 60px 30px;
	}

	#f_box .error_wrap{
		background:#ffebeb;
		border-radius: 8px;
		padding:20px 30px 20px;
		margin:0 0 20px;
	}

	#f_box .error_wrap h2{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:600;
		font-size: 1.8rem;
		letter-spacing:0.1rem;
		color: #d21c1c;
	}

	#f_box p.error_txt{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		line-height: 140%;
		font-size: 1.4rem;
		letter-spacing:0.1rem;
		color: #202020;
		padding: 5px 0 8px;
	}

	#f_box .line_box{
		border-top:1px solid #959595;
		border-bottom:1px solid #959595;
		padding:20px 20px;
		margin:10px 0 20px
	}

	#f_box p.body_txt{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		line-height: 160%;
		font-size: 1.4rem;
		letter-spacing:0.1rem;
		color: #202020;
	}

	#f_box p.pb{
		padding:0 0 20px;
	}

	#f_box p.note_txt_s{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		line-height: 140%;
		font-size: 1.3rem;
		text-indent: -1em;
		letter-spacing:0.1rem;
		color: #202020;
		padding: 16px 0 20px 1em;
	}

	#f_box p.privacy_txt{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		line-height: 140%;
		font-size: 1.2rem;
		text-align: center;
		letter-spacing:0.1rem;
		color: #202020;
		padding: 16px 0 20px;
	}

	#f_box p.privacy_txt a{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 1.2rem;
		letter-spacing:0.1rem;
		color: #fb5151;
		position: relative;
	}

	#f_box p.privacy_txt a:before{
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		background:#fb5151;
		position: absolute;
		bottom:-2px;
		left: 50%;
		transform:translate(-50%, 0);
	}

	#f_box p.note_txt{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.4rem;
		letter-spacing:0.1rem;
		color: #51a1fb;
		padding:5px 0 0;
	}

	p.note_txt_er{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:500;
		line-height:140%;
		font-size: 1.4rem;
		letter-spacing:0.1rem;
		color: #d21c1c;
		padding:5px 0 0;
	}

	#f_box p.note_txt span{
		font-weight:600;
	}

	#f_box p.id_txt{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.3rem;
		letter-spacing:0.1rem;
		color: #818283;
		text-align: right;
		margin: 0 0 5px;
	}

	#f_box p.add_pass{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 1.2rem;
		letter-spacing:0.1rem;
		color: #202020;
		margin: 20px 0 -25px;
	}

	#f_box p.add_pass a{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
		font-size: 1.2rem;
		letter-spacing:0.1rem;
		color: #51a1fb;
		position: relative;
	}

	#f_box p.add_pass a:before{
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		background:#51a1fb;
		position: absolute;
		bottom:-2px;
		left: 50%;
		transform:translate(-50%, 0);
	}
	
    #f_box table{
		width: 100%;
		margin: 0 0 40px;
	}

	#f_box table th{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 600;
		font-size: 1.6rem;
		color:#202020;
		padding: 5px 14px 4px 0;
		vertical-align: top;
		text-align: right;
		white-space: nowrap;
	}

	#f_box table td{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.6rem;
		white-space: nowrap;
		padding: 0 0 5px;
	}

	#f_box table tr.line_b td{
		padding: 0 0 26px;
	}
	

	#f_box table a{
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	#f_box table a:hover{
		opacity:0.5;
	}

	#f_box p.add_pass a{
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	#f_box p.add_pass a:hover{
		opacity:0.5;
	}

	#f_box p.privacy_txt a{
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	#f_box p.privacy_txt a:hover{
		opacity:0.5;
	}

	#f_box .error_wrap a{
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	#f_box .error_wrap a:hover{
		opacity:0.5;
	}

	

	/* ============================================================
 	FORM
	==============================================================*/

	.input_box_a{
		width:3em;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.6rem;
		background:#e8f0fe;
		padding: 6px 20px 8px;
		border:1px solid #dadada;
		border-radius:2px;
	}

	.input_box_a_er{
		width:3em;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.6rem;
		background:#e8f0fe;
		padding: 6px 20px 8px;
		border:1px solid #e52424;
		border-radius:2px;
	}
	.input_box_b{
		width:18em;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.6rem;
		background:#e8f0fe;
		padding: 4px 20px 8px;
		border:1px solid #dadada;
		border-radius:2px;
	}

	.input_box_b_er{
		width:18em;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.6rem;
		background:#e8f0fe;
		padding: 4px 20px 8px;
		border:1px solid #e52424;
		border-radius:2px;
	}
	
	input:focus {
	  outline:solid 1px #51a1fb !important;
	}

	.input_box_a_er:focus,.input_box_b_er:focus{
		outline:solid 1px #e52424 !important;
	}

	::placeholder {
	  color:#818283;
	  font-size: 1.3rem;
	}


	/* ============================================================
 	BTN
	==============================================================*/

	
	.btn_a li{
		text-align: right;
	}

	.btn_a li.xc{
		text-align: center;
	}

	.btn_a li.line_t{
		border-top:1px solid #dadada;
		padding:20px 0 0
	}
	.btn_a a{
		display:inline-block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.5rem;
		color:#fff;
		padding:7px 40px 10px;
		line-height:100%;
		background:#51a1fb;
		border-radius:20px;
	}

	.btn_a a{
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	.btn_a a:hover{
		background:#053075;
	}

	.btn_c{
		display:flex;
		justify-content: center;
	}

	.btn_c li{
		margin:0 6px;
	}

	.btn_c a{
		display:inline-block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.5rem;
		color:#fff;
		padding:7px 40px 10px;
		line-height:100%;
		background:#51a1fb;
		border-radius:20px;
	}

	.btn_c li:first-child a{
		background:#95a4b4;
	}

	.btn_c li.delete a{
		background:#d497b1;
	}

	.btn_c a{
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	.btn_c a:hover{
		background:#053075;
	}

	.btn_c li:first-child a:hover{
		background:#454e58;
	}

	.btn_c li.delete a:hover{
		background:#8c6073;
	}

	.btn_plus li{
		text-align: right;
	}

	.btn_plus a{
		display:inline-block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.5rem;
		color:#fff;
		padding: 4px 32px 9px;
		line-height:100%;
		background:#51a1fb;
		border-radius:20px;
	}

	.btn_plus a span{
		display:inline-block;
		font-weight: 600;
		font-size: 1.8rem;
		vertical-align: text-top;
		padding: 4px 5px 0 0;
	}

	.btn_plus a{
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	.btn_plus a:hover{
		background:#053075;
	}


	.btn_pdf a{
		display:inline-block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.5rem;
		color:#fff;
		padding: 7px 40px 10px 50px;
		line-height:100%;
		background:#eb8a8a;
		border-radius:20px;
		position:relative;
	}

	.btn_pdf a span{
		width: 20px;
		display:block;
		position:absolute;
		left: 20px;
		top: 6px;
	}

	.btn_pdf a{
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	.btn_pdf a:hover{
		opacity:0.5;
	}


	/* ============================================================
 	login / news / mypage
	==============================================================*/
	
	#login #main_wrap.no_main_fix{
		min-height: 0;
		padding: 80px 0 100px;
	}
	
	#login h1{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.5rem;
		line-height: 100%;
		color:#000;
		letter-spacing: 0.1rem;
		padding: 0 0 50px;
	}

	#login h1.sub_ttl{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:500;
		font-size: 2.0rem;
		line-height: 100%;
		color:#000;
		letter-spacing: 0.1rem;
		padding: 0 0 0 10px;
		margin:0 0 20px;
		border-left:4px solid #164bc3;
	}

	#login h1.sub_ttl2{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:500;
		font-size: 2.6rem;
		line-height: 100%;
		color:#000;
		letter-spacing: 0.1rem;
		text-align: center;
		padding: 0;
		margin: 100px 0 20px;
	}

	#login h1 span{
		display: inline-block;
		margin: 0 8px 0 0;
		font-family: 'Roboto', sans-serif;
		font-weight: 600;
		letter-spacing: 0.1rem;
		font-size: 4.4rem;
	}

	#login p.b_txt{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.5rem;
		line-height: 140%;
		letter-spacing: 0.1rem;
		padding: 0 0 50px;
	}

	#login p.b_txt2{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.5rem;
		line-height: 140%;
		letter-spacing: 0.1rem;
		text-align: center;
		padding: 0 0 180px;
	}

	/* === news ================================================*/

	#login .eng_txt_wrap{
		display:flex;
		margin: 0 0 8px 0;
		font-family: 'Roboto', sans-serif;
		font-weight: 600;
		line-height: 100%;
		letter-spacing: 0.1rem;
		font-size: 1.4rem;
		color:#969696;
	}

	#login .eng_txt_wrap .et1{
		display:inline-block;
		margin:0 10px 0 32px;
	}

	#login .eng_txt_wrap .et2{
		display:inline-block;
		margin: 0 10px 0 97px;
	}

	#login .eng_txt_wrap .et3{
		display:inline-block;
		margin: 0 10px 0 94px;
	}


	#news_list{
		margin: 0 0 40px 0;
	}

	#news_list li{
		margin: 0 0 10px 0;
	}

	#news_list li a{
		display:flex;
		background:#fff;
		padding: 26px 30px;
		border-radius:6px;
	}

	#news_list time{
		font-family: 'Roboto', sans-serif;
		font-weight: 600;
		line-height: 100%;
		letter-spacing: 0.1rem;
		font-size: 1.7rem;
		color:#000;
		white-space: nowrap;
		width: 141px;
	}

	#news_list h2{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 600;
		line-height: 140%;
		letter-spacing: 0.1rem;
		font-size: 1.5rem;
		color:#164bc3;
		margin: -5px 0 0;
		white-space: nowrap;
		width: 140px;
	}

	#news_list p{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		line-height: 140%;
		letter-spacing: 0.1rem;
		font-size: 1.5rem;
		margin: -4px 0 0 0;
	}

	#news_list a{
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	#news_list a:hover{
		background:#d0e0fb;
	}
    
    #page_nav{
		display: flex;
		justify-content:center;
		margin:20px 0 50px;
	}
	
	#page_nav li{
		padding: 0 5px;
	}
	
	#page_nav li a{
		display: block;
		font-family: 'Montserrat', sans-serif;
		font-weight:300;
		width:34px;
		text-align: center;
		padding: 11px 0;
		height:1em;
		font-size: 1.2rem;
		line-height: 100%;
		border-radius:50%;
		position:relative;
		transition: all 0.5s ease 0s;
	}

	#page_nav li.act a{
		background:#51a1fb;
		color:#fff;
	}

    #page_nav li.first_p a:after{
    	content: "";
		display: block;
		width: 8px;
		height:8px;
		border-right:solid 1px #78808d;
		border-bottom:solid 1px #78808d;
		position: absolute;
		top: 50%;
		left: 60%;
		transform:translate(-50%, -50%) rotate(135deg);
		transition: all 0.5s ease 0s;
    }
    #page_nav li.first_p a:before{
    	content: "";
		display: block;
		width: 1px;
		height:14px;
		border-right:solid 1px #78808d;
		position: absolute;
		top: 50%;
		left: 40%;
		transform:translate(-50%, -50%);
		transition: all 0.5s ease 0s;
    }


    #page_nav li.prev_p a:after{
    	content: "";
		display: block;
		width: 8px;
		height:8px;
		border-right:solid 1px #78808d;
		border-bottom:solid 1px #78808d;
		position: absolute;
		top: 50%;
		left: 56%;
		transform:translate(-50%, -50%) rotate(135deg);
		transition: all 0.5s ease 0s;
    }

    #page_nav li.last_p a:after{
    	content: "";
		display: block;
		width: 8px;
		height:8px;
		border-right:solid 1px #78808d;
		border-bottom:solid 1px #78808d;
		position: absolute;
		top: 50%;
		left: 46%;
		transform:translate(-50%, -50%) rotate(-45deg);
		transition: all 0.5s ease 0s;
    }
    #page_nav li.last_p a:before{
    	content: "";
		display: block;
		width: 1px;
		height:14px;
		border-right:solid 1px #78808d;
		position: absolute;
		top: 50%;
		left: 62%;
		transform:translate(-50%, -50%);
		transition: all 0.5s ease 0s;
    }

    #page_nav li.next_p a:after{
    	content: "";
		display: block;
		width: 8px;
		height:8px;
		border-right:solid 1px #78808d;
		border-bottom:solid 1px #78808d;
		position: absolute;
		top: 50%;
		left: 40%;
		transform:translate(-50%, -50%) rotate(-45deg);
		transition: all 0.5s ease 0s;
    }
    
    #page_nav li a:hover{
		background:#b3d9f3;
		color:#fff;
    }

     #page_nav li.first_p a:hover:after{
		border-right:solid 1px #ffffff;
		border-bottom:solid 1px #ffffff;
    }
    #page_nav li.first_p a:hover:before{
		border-right:solid 1px #ffffff;
    }

    #page_nav li.prev_p a:hover:after{
		border-right:solid 1px #ffffff;
		border-bottom:solid 1px #ffffff;
    }

    #page_nav li.last_p a:hover:after{
		border-right:solid 1px #ffffff;
		border-bottom:solid 1px #ffffff;
    }
    #page_nav li.last_p a:hover:before{
		border-right:solid 1px #ffffff;
    }

    #page_nav li.next_p a:hover:after{
		border-right:solid 1px #ffffff;
		border-bottom:solid 1px #ffffff;
    }

	#login .info_block{
		background:#fff;
		border-radius: 6px;
		padding: 70px 100px 60px;
		margin:0 0 40px;
		position:relative;
	}

	#login .info_block h1{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:500;
		font-size: 2.4rem;
		line-height: 140%;
		color:#164bc3;
		letter-spacing: 0.1rem;
		padding: 20px 0 20px;
	}

	#login .info_block h2{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:500;
		font-size: 1.8rem;
		line-height: 140%;
		color:#164bc3;
		letter-spacing: 0.1rem;
		padding: 0 0 0 10px;
		margin:20px 0 16px;
		border-left:4px solid #164bc3;
	}

	#login .info_block p{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 400;
		line-height: 180%;
		letter-spacing: 0.1rem;
		font-size: 1.6rem;
		padding: 0 0 40px;
	}

	#login .info_block p strong{
		font-weight: 600;
	}
	

	#login .info_block time{
		font-family: 'Roboto', sans-serif;
		font-weight: 600;
		line-height: 100%;
		letter-spacing: 0.1rem;
		font-size: 1.7rem;
		color:#000;
		white-space: nowrap;
	}

	#login .info_block p.from_txt{
		display: inline-block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 600;
		line-height: 100%;
		letter-spacing: 0.1rem;
		font-size: 1.5rem;
		color:#164bc3;
		white-space: nowrap;
		padding: 4px 10px 6px;
		position:absolute;
		left: 216px;
		top: 64px;
		border:1px solid #164bc3;
	}

	#login .info_block .download_wrap{
		display:block;
		margin:40px 0 0;
		padding: 20px 0 0;
		border-top:1px solid #ccc;
	}

	#login .info_block .download_wrap li{
		margin:0 0 8px;
	}

	#login .info_block .download_wrap a{
		display:inline-block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.5rem;
		color:#fff;
		padding: 7px 40px 10px 50px;
		line-height:100%;
		background:#eb8a8a;
		border-radius:20px;
		position:relative;
	}

	#login .info_block .download_wrap a span{
		width: 20px;
		display:block;
		position:absolute;
		left: 20px;
		top: 6px;
	}

	#login .info_block .download_wrap a{
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	#login .info_block .download_wrap a:hover{
		opacity:0.5;
	}

	/* === mypage ================================================*/
	
	#login table{
		width: 100%;
		margin: 0 0 10px;
	}

	#login table.mail_list{
		width: 100%;
		margin: 0 0 40px;
	}

	#login table th{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 600;
		font-size: 1.6rem;
		color:#fff;
		background:#164bc3;
		padding: 12px 20px 14px;
		vertical-align: top;
		text-align: left;
		border-top:1px solid #eff1f3;
		width: 20%;
	}

	#login table td{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.6rem;
		background:#fff;
		border-top:1px solid #eff1f3;
		padding: 12px 40px 14px;
		width: 80%;
		position:relative;
	}

	#login table.mail_list th{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 600;
		font-size: 1.6rem;
		color:#fff;
		background:#164bc3;
		padding: 16px 20px 14px;
		vertical-align: top;
		text-align: left;
		border-top:1px solid #eff1f3;
		width: 36%;
	}

	#login table.mail_list td{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.6rem;
		background:#fff;
		border-top:1px solid #eff1f3;
		padding: 12px 40px 14px;
		width: 64%;
		position:relative;
	}

	#login table td a{
		display:block;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight:400;
		font-size: 1.4rem;
		letter-spacing: 0.1rem;
		color:#164bc3;
		position: absolute;
		top: 50%;
		right:10px;
		transform:translate(0, -50%);
	}

	#login table td a:after{
		content: "";
		display: block;
		width:0;
		height: 1px;
		background:#164bc3;
		position: absolute;
		bottom:0;
		left:50%;
		transform: translate(18px,0);
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	#login table td a:before{
		content: "";
		display: block;
		width:0;
		height: 1px;
		background:#164bc3;
		position: absolute;
		bottom:0;
		right:50%;
		transform: translate(18px,0);
		transition: all 0.4s cubic-bezier(0.03, 0.36, 0.18, 1) 0s;
	}

	#login table td a:hover:after,
	#login table td a:hover:before{
		width:calc(50% - 20px);
	}

	#login table td a span{
		display: inline-block;
		font-size: 1.4rem;
		letter-spacing: -0.5rem;
		padding:0 10px 0 0;
		color:#ccc;
	}

	#login table tr.line_b td,#login table tr.line_b th{
		border-bottom:40px solid #eff1f3;
	}
}