@charset "utf-8";
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body,p,article,section{
width: 100%;
}
body {
	color:#333;
	font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  word-break: break-all;
}
ul {
list-style-type:none;
}
.clearfix {
	overflow: hidden;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
img{
	width:100%;
 }
h1 {
  line-height:0;
}
h2 {
  padding:12px 0 2px 0;
  text-align: center;
  font-weight: normal;
  font-size:26px;
}
footer {
  background: #17007a;
  text-align: center;
  color:#fff;
  font-size:12px;
  padding:13px 0;
}
.page-top {
   position: fixed;
   bottom: 40px;
   right: 20px;
   -ms-filter: "alpha(opacity=80)";
   -moz-opacity: 0.8;
   -khtml-opacity: 0.8;
   opacity: 0.8;
   width:50px;
}

/* ADD 20180314 */
.attention {
padding: 4% 2%;
font-feature-settings : "palt";
letter-spacing: 0.05em;
}
.attention h2.ttl{
background-color: #16288e;
padding: 4%;
border-radius: .2em;
color: #FFFFFF;
font-size: 5.5vw;
line-height: 1.4;
margin-bottom: 1rem;
font-weight: bold;
}
.attention h2.ttl2{
padding-top: 5%;
padding-bottom: 5%;
color: #16288e;
font-size: 5.5vw;
line-height: 1.4;
margin-bottom: 1rem;
font-weight: bold;
border-bottom: 1px solid #CFCFCF;
border-top: 4px solid #16288e;
}
.attention h2.ttl span{
display: block;
background-color: #ff0000;
font-size: 3vw;
margin-bottom: 0.8rem;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.attention p.txt{
padding-right: 1rem;
padding-left: 1rem;
margin-bottom: 1rem;
line-height: 1.9;
}
.attention_img01 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.attention_block {
margin-top: 1rem;
margin-bottom: 2rem;
color: #FF0004;
padding: 1rem;
background-color: #F5F5F8;
border: 1px solid #DBDBDB;
}
.attention_block h3 {
text-align: center;
}
.attention_block h3 span {
background-image: url(../images/att_ico03.png);
background-repeat: no-repeat;
background-size: 20px;
background-position: left top;
padding-left: 1.4rem;
padding-right: 1.4rem;
}
.attention_block h3 + p{
margin-top: 10px;
}
.attention ul.link_block {
text-align: center;
margin-bottom: 2rem;
}
.attention ul.link_block li{
margin-bottom: 1rem;
}
.attention .link01,
.attention .link02,
.attention .link03{
display: inline-block;
border-radius: 2rem;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
text-decoration: none;
min-width: 95%;
}
.attention .link01{
background-color: #17288E;
color: #FFFFFF;
border: 2px solid #17288E;
}
.attention .link02{
color: #333333;
border: 2px solid #d2d2d2;
}
.attention .link03{
color: #333333;
border: 2px solid #d2d2d2;
background-color: #F5F5F8;
}
.attention .link01 span{
background-image: url(../images/att_ico02.png);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 70%;
padding-right: 1rem;
padding-left: 1rem;
}
.attention .link02 span{
background-image: url(../images/att_ico02_2.png);
background-repeat: no-repeat;
background-position: right center;
background-size: auto 70%;
padding-right: 1rem;
padding-left: 1rem;
}
.attention .link03 span{
background-image: url(../images/att_ico02_3.png);
background-repeat: no-repeat;
background-position: left center;
background-size: auto 70%;
padding-right: 1rem;
padding-left: 1rem;
}
.attention ul.card_delete_flow {
width: 80%;
margin-left: auto;
margin-right: auto;
padding-top: 1rem;
counter-reset: my-counter;
list-style: none;
padding: 0;
}
.attention ul.card_delete_flow li{
text-align: left;
display: block;
padding-left: 1.5em;
margin-bottom: 10px;
padding-left: 30px;
position: relative;
}
.attention ul.card_delete_flow li:before {
content: counter(my-counter);
counter-increment: my-counter;
background-color: #17288E;
color: #FFFFFF;
display: block;
float: left;
line-height: 22px;
margin-left: -30px;
text-align: center;
height: 22px;
width: 22px;
border-radius: 50%;
}
.attention ul.card_delete_flow li img{
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0.5em;
}
.attention ul.card_delete_flow li:after{
content: '';
display: block;
width: 6.5vw;
height: 6.5vw;
background-image: url(../images/att_arw.png);
background-size: contain;
vertical-align: middle;
background-repeat: no-repeat;
background-position: center top;
margin: 0.5em auto .5rem;
}
.attention ul.card_delete_flow li:last-child:after{
background-image: none;
}
.attention ul.card_list {
width: 80%;
margin: 2rem auto 0.5rem;
}
.attention ul.card_list li{
text-align: left;
list-style: outside;
}
.attention ul.card_list + .notes{
margin-bottom: 2rem;
text-align:right;
}
.notes{
text-indent: -1em;
padding-left: 1em;
color: #868686;
font-size: small;
display: block;
}
@media(max-width:320px) {
 footer {
   font-size:11px;
   letter-spacing:-0.03em;
 }
}