.main{
    line-height: 1.7;
}

.main .en{
    font-family: var(--font-family);
}

.main .head_ttl{
    padding: 0 min(11vw, 10px);
    background-position: left center, right center;
    background-size: min(10vw, 80px);
    background-repeat: no-repeat;
    background-color: #303e81;
    padding: .4em 0;
}

.main .head_ttl_flex{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3%;
}

.main .head_ttl01{
    line-height: 1;
    font-family: var(--font-family);
    font-size: min(calc(22/768*160vw),40px);
    border-bottom: 2px dashed #fff;
    color: #fff;
    padding: .1em .5em;
    margin: .1em 0;
}

.main .head_ttl02{
    color: #fff;
    font-weight: bold;
    line-height: 1;
    padding: 0.25em 0.2em 0.1em;
}

.main .bg01 {
    border: 2px solid #aaa;
    padding: .5em 0.8em;
    margin-bottom: 3em;
    margin: 0 2% 4%;
}

.main .head_txt{
    padding: 0em 0em 1em;
}

.head_sub_desc {
    color: #303e81;
    font-weight: bold;
    line-height: 1.5em;
    padding: .3em 0;
}

.main .bold{
    font-weight: bold;
}

.main .center{
    text-align: center;
}

.main .bg02{
    /*
    background-image: url(../img/bg02.png);
    background-repeat: no-repeat;
    background-size: 100%;
    */
    margin: 4% 0 0 0;
    padding: 0 0 0 0;
}
.main .bg02 .usage_box,.main .bg02 .usage_box02,.main .bg02 .usage_box03{
    display: flex;
    flex-direction: row;
    background-image: url(../img/bg02.png);
    background-repeat: repeat-y;
    background-size: 100%;
    padding: 2% 0 2% 5%;
}
.main .bg02 .usage_box,.main .bg02 .usage_box02 {
    display: flex;
    flex-direction: row;
    background-image: url(../img/bg01.png);
    background-repeat: repeat-y;
    background-size: 100%;
    border-bottom: 4px dotted #e7e7e7;
}
.usage_box02 .item{
}
.item{
  text-align: center;
  width: 31.5%;
  padding : 0%;
  margin : 0%;
  line-height: 1.1em;
}
.item02{
  text-align: center;
  width: 63%;
  padding : 0%;
  margin : 0%;
  line-height: 1.1em;
}

.img_stretch .bg02 img{
    display: block;
    width: auto !important; max-width: none;
    margin: 0 auto;
}

@media screen and (max-width: 640px) {
    .img_stretch .bg02 img{
        width: 50% !important; max-width: none;
    }
    .img_stretch .bg02 .usage_box03 .item02 img{
        width: 33% !important; max-width: none;
    }
    .main .bg02 .usage_box,.main .bg02 .usage_box02,.main .bg02 .usage_box03{
        padding: 2% 0 2% 5%;
    }
    .main .bg02 .usage_box,.main .bg02 .usage_box02 {
        border-bottom: 2px dotted #e7e7e7;
    }
}

.mgx04.mgb15px {
    margin-bottom: 3%;
}

.main .border_wrap{
    border: min(0.5vw, 2px) solid #ccc;
    padding: 1em;
}

.main .line_dash{
    border-top: 2px dashed;
}

.main .label01{
    line-height: 1;
    display: inline-flex;
    align-items: center;
    height: min(6vw, 52px);
    padding: 0.2em 1em 0;
    color: #fff;
}

.main .label02{
    line-height: 1;
    align-items: center;
    border-bottom: 5px solid #303e81;
    padding: 0 0.6em 0;
    font-weight: bold;
}

.main .label03{
    line-height: 1;
    align-items: center;
    padding: 0 0 0;
    margin: 0 0 1em;
    color: #303e81;
    font-weight: bold;
}
.main .label03:before {
    content: "";
    display: inline-block;
	width: 1em;
	height: 1em;
    margin-right: .3em;
	background: #303e81;
}

.pink_txt {
    color: #d23f9f;
}

.mgx03 p {
    margin: 1em 1em 1em;
    line-height: 1.5em;
}

.main .point{
    color: #fff;
    line-height: 0.8;
    font-family: var(--font-family);
    display: inline-block;
    padding: 2px 3px 1px;
    font-size: min(calc(40/768*100vw),40px);
}

.main .howto{
    line-height: 1;
    font-family: var(--font-family);
    font-size: min(calc(40/768*100vw),40px);
    padding: 0 0.6em 0;
}

.main .bullet{
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    margin: 0.1em 0.4em 0.3em 0;
    border: 2px solid;
    vertical-align: middle;
}

.main .indent{
    padding-left: 1em;
    text-indent: -1em;
}

.main .box01{
    border: min(0.5vw, 4px) solid #ccc;
    padding: 1.5em 1em 1em;
    position: relative;
}

.main .box01_ttl{
    position: absolute;
    left: 0.5em;
    top: -0.5em;
    line-height: 1;
    background-color: #fff;
    padding: 0 0.2em;
}

.main .link_btn{
    text-align: right;
}

.main .link_btn a{
    color: #fff;
    line-height: 1.4;
    display: inline-block;
    padding: 0.6em 2em 0.4em 1em;
    position: relative;
    font-weight: bold;
    border-radius: 10px;
    font-size: min(calc(24/768*100vw),24px);
}

.main .link_btn a:after{
    content: "＞";
    font-size: 0.7em;
    margin: 0 1em;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-weight: normal;
}

.bar01 {
    border-top: solid 10px #303e81;
    border-bottom: solid 7px #e7e7e7;
    margin-bottom: 4%;
}

.main .blue{
    color: #597eff !important;
}

.main .pink{
    color: #c40081 !important;
}

.main .green{
    color: #259b62 !important;
}

.main .bg_blue{
    background-color: #303e81 !important;
}

.main .bg_pink{
    background-color: #c40081 !important;
}

.main .bg_green{
    background-color: #259b62 !important;
}

.main .border_blue{
    border-color:  #597eff !important;
}

.main .border_pink{
    border-color:  #c40081 !important;
}

.main .border_green{
    border-color:  #259b62 !important;
}

.main .marker_blue{
    display: inline;
    background: linear-gradient(transparent 59%, #dee5ff 59%, #dee5ff 80%, transparent 80%);
}