@media screen and (min-width: 769px){ /* パソコン用 */
/* ヘッダーナビ用 */
.hnavi-p1,.hnavi-p2,.hnavi-p3,.hnavi-p4,.hnavi-p5,.hnavi-p6 { display:inline-block; width:100%; text-align:center; text-decoration:none; line-height:3em; outline:none; position:relative; transition:color 0.5s ease; }
.hnavi-p1:hover,.hnavi-p2:hover,.hnavi-p3:hover,.hnavi-p4:hover,.hnavi-p5:hover,.hnavi-p6:hover { text-decoration:none; }
.hnavi-p1:hover::before,.hnavi-p2:hover::before,.hnavi-p3:hover::before,.hnavi-p4:hover::before,.hnavi-p5:hover::before,.hnavi-p6:hover::before { transform:scaleY(1); }
.hnavi-p1::before,.hnavi-p2::before,.hnavi-p3::before,.hnavi-p4::before,.hnavi-p5::before,.hnavi-p6::before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; transform: scaleX(0); transition: all 0.5s ease; transition-property: transform; }
.hnavi-p1-text,.hnavi-p2-text,.hnavi-p3-text,.hnavi-p4-text,.hnavi-p5-text,.hnavi-p6-text { position:relative; }

.hnavi-p1 { text-align: center; text-decoration: none; outline: none; color: #204a9e; border-bottom:　2px; }
.hnavi-p1:hover  { color: #204a9e; text-decoration:none; } /*マウスオン時の文字色 */
.hnavi-p1 a { position: relative; color: #204a9e; text-align:center; display:block; }
.hnavi-p1 a:hover { color:#204a9e; }
.hnavi-p1 a::after { position: absolute; left: 0; content: ''; width: 100%; height: 2px; background: #204a9e; bottom: -1px; transform: scale(0, 1); transform-origin: right top; transition: transform 0.5s; color: #204a9e; }
.hnavi-p1 a:hover::after { transform: scale(1, 1); transform-origin: left top; color: #204a9e; }


.btn-p1 { display: inline-block; width: 250px; text-align: center; text-decoration: none; line-height: 60px; outline: none; color: #214c9e; background-color: #fff; position: relative; border: 1px solid #214c9e; transition: color 0.5s ease; }
.btn-p1:hover { color:#fff; text-decoration:none; }
.btn-p1:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-p1::before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background: #c7d1e2; transform: scaleX(0); transform-origin: right; transition: all 0.5s ease; transition-property: transform;}
.btn-p1-text { position: relative; color:#214c9e; }

.a-unline-p1 { display: inline-block; text-align: center; text-decoration: none; outline: none; color: #1B85FB; border-bottom:　2px; }
.a-unline-p1:hover{ color: #1B85FB; text-decoration:none; }
.a-unline-p1 a { position: relative; }
.a-unline-p1 a::after { position: absolute; left: 0; content: ''; width: 100%; height: 2px; background: #1B85FB; bottom: -1px; transform: scale(0, 1); transform-origin: right top; transition: transform 0.5s; }
.a-unline-p1 a:hover::after { transform: scale(1, 1); transform-origin: left top; }

}


@media screen and (max-width:768px){ /* スマホ用 */
.btn-p1 { display: inline-block; width: 250px; text-align: center; text-decoration: none; line-height: 3em; outline: none; color: #214c9e; background-color: #fff; position: relative; border: 1px solid #214c9e; transition: color 0.5s ease; }
.btn-p1:hover { color: #fff; text-decoration:none; }
.btn-p1:hover::before { transform: scaleY(1); }
.btn-p1::before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background: #c7d1e2; transform: scaleX(0); transition: all 0.5s ease; transition-property: transform; }
.btn-p1-text { position: relative; }

}