body {
    xbackground-color: rgb(148, 169, 177);
}
.a-center {
    text-align: center;
}

/* 左右PADDINGなしのコンテナ */
.artboard {
    margin: 0 auto;
    xmax-width: 1920px;
}


.point > article {
    padding: 2rem;
}

/*content-wide */
.content-wide {
    max-width: 2300px ;
    margin: 0 auto;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    x-webkit-align-items: center;
    x-ms-flex-align: center;
    xalign-items: center;
    xbackground-color: lightblue;
    align-items: center;
}
.content-wide > div {
    width: calc(100% / 2); /* 100%幅を2で割るという指定 */
    xbackground-color: rgb(219, 219, 200);
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
div.center { /* APRONで使用 */
    xbackground-color: aquamarine;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    
}
.content-wide img {
    width: 100%;
    height: auto;
}


div.dark{ /* DARK VARSION */
    background-color: black;
    color: #fff;
}

x.content-wide:not(div.dark) {
    background-color: black;
    color: #fff;
}

.content-wide article {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    padding: 5% 12%;
}

/* --------------------------- FLEX container内BUTTON要素などのためのALIGN指定  */
.align-c-container {
    text-align: center;
}


/* --------------------------- NEW ICON のためのRELATIVE指定  */
.content-wide > div article h1 {
    position: relative;
}
/*  --------------------------- NEW ICON のためのRELATIVE指定 */
.box2 h2 {
    position: relative;
    xfont-size: 1.8rem;
}
/* NEW ICON ---------------------------  */
div.new {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    xbackground-color: aquamarine;
    margin-top: 0;
    }

div.new > div:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;

    font-size: 1.4rem;
    color: #fff;
    background-color: rgb(192, 17, 55);
    border-radius: 10%;
    padding: 0rem 0.6rem;
    }





xxxdiv.new {
    display: flex;
    text-align: right;
    font-size: 1.4rem;
    xfont-weight: bold;
    color: #fff;
    background-color: rgb(192, 17, 55);
    border-radius: 10%;
    padding: 0rem 0.6rem;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;

}

/* NEW-R RELATIVEで指定、テキストのすぐ後　*/
h1.new-r::after {
    content: "NEW";
    font-size: 1.7rem;
    font-weight: normal;
    color: #fff;
    background-color: rgb(192, 17, 55);
    border-radius: 10%;
    padding: 0rem 0.6rem;
    text-decoration: none;
    vertical-align: middle;
  }


/* NEW1 試験的にテスト DISPLAY none あり　11/15現在未使用---------------------------  */
h1.new1::after {
    content: "NEW";
    font-size: 1.7rem;
    font-weight: normal;
    color: #fff;
    background-color: rgb(192, 17, 55);
    border-radius: 10%;
    padding: 0rem 0.6rem;

    text-decoration: none;
    position: absolute;
    top: 0%;
    right: 0px;
  }

h1.new::after {
    content: "NEW";
    font-size: 1.7rem;
    font-weight: bold;
    color: #fff;
    background-color: rgb(192, 17, 55);
    border-radius: 10%;
    padding: 0rem 0.6rem;

    text-decoration: none;
    position: absolute;
    top: 0%;
    right: 0px;
    xmargin-top: -12px;
  }
h2.new::after {
    content: "NEW";
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    background-color: rgb(192, 17, 55);
    border-radius: 10%;
    padding: 0rem 0.6rem;

    text-decoration: none;
    position: absolute;
    top: 0%;
    right: 0px;
    xmargin-top: -12px;
  }

/* -------------------------------------------バナー */
div.banner {
max-width: 2300px ;
margin: 0 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
background-color: #0075fb;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
div.banner > div {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}



/* WIDTHをセットしたコンテナ */
.content {
    margin: 0 auto;
    max-width: 2300px ;
    xbackground-color: azure;
    /* 左右のPADDING　MAX-WIDTH1200pxの時は15pxで指定していた */
    padding-left: 10%;
    padding-right: 10%;

    /* 上下paddingの指定 左右も各メディクリで指定せずここで指定した*/
    padding-top: 50px;
    padding-bottom: 50px;
    }

    .content2 {
        margin: 0 auto;
        max-width: 2300px ;
        xbackground-color: azure;
        /* 左右のPADDING　MAX-WIDTH1200pxの時は15pxで指定していた */
        padding-left: 12%;
        padding-right: 12%;
    
        /* 上下paddingの指定 左右も各メディクリで指定せずここで指定した*/
        padding-top: 50px;
        padding-bottom: 50px;
        }


/* BOX1　IMG CENTER寄せの指定 */
.box1 img {
    margin-left: auto;
    margin-right: auto;
}
/* -----------------------------------CONTENT BO2 */
.content-box2 {
    margin: 0 auto;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;

    xbackground-color: lightblue;
    xpadding: 10px;
}
.content-box2:not(.v-center) {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.v-center {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.content-box2 > h1, .content-box2 > h2 {
    display: block; /*-------------------------.content-box2直下のh要素はBLOCKとする　*/
    width: 100%;/*-------------------------指定が必要　*/
}
.box2 {
    width: calc(90% / 2); /* 100%幅を2で割るという指定 */
    xbackground-color: floralwhite;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    x-webkit-justify-content: flex-start;
    x-ms-flex-pack: start;
    xjustify-content: flex-start;
    x-webkit-align-content: stretch;
    x-ms-flex-line-pack: stretch;
    xalign-content: stretch;
    x-webkit-align-items: flex-start;
    x-ms-flex-align: start;
    xalign-items: flex-start;
    position: relative;
    }


.box2 img + iframe{
        xwidth: 60%; /* 下揃えの設定 */
    margin-top: auto;
    }
.img-w-90per img {
    width: 90%;
}
.column {       /* BOX内の画像・テキスト横並びBOX2以外でも使えるように。*FLEX* */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
/* BOX内の画像・テキスト横並びBOX2以外でも使えるように。*FLEX* */
.row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

}
.row img {
    padding: 0 20px;

}


/* BOX2 IMG V-ALIGN MIDDLE setting ※Pがないときに作動*FLEX* */
.box2:not(p) {
    justify-content: center;
}
/* ***BOX2 SECTIONで区切ると指定の各タグにTOP PADDINGを指定 ※各TAGにPADDING指定sする場合は削除とする
++++通常の設定をmargnありにして、:not(xxx)で無しの指定にするほうが楽では？　よって現在はDISABLEとする*/
.box2 section > iframe, .box2 section > p{
    xmargin-top: 1rem;
}

/* BOX2 IFRAME CENTER寄せの指定 */
.box2 iframe, .box2 video {
    width: 90%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top:auto;
    margin-left: auto;
    margin-right: auto;
}

/* -----------------------------------CONTENT BO3 */
.box3 {
    width: calc(92% / 3); /* 100%幅を3で割るという指定 */
    xbackground-color: lavenderblush;

    /* 以下BOX3 BTN02 下揃えの設定 */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;


}

.box3 p {
    width: 100%; /* 下揃えの設定 */
    xmargin-top: auto;
    text-align: left;
    padding: 0.5em 1em;
}
.box3 img {
    width: 100%;
    margin: 0 auto;
}
.box3 table {
    width: 100%;/* -----------------------------------BOX3 TABLE WIDTH 100% */
}

.box3 div.btn02 {    /* 以下BOX3 BTN02 下揃えの設定。スクリーンサイズ関係なく作動の場合。サイズによって変えたいときは各メディクリで指定すること */
    margin-top:auto;
}
.box3 h3 > span {
    background-color: rgb(192, 17, 55);
    font-size: 0.8em;
    color: white;
    padding: 0 0.5em;
    border-radius: 15%;

}

.box5 {
    width: calc(85% / 5); /* 100%幅を2で割るという指定 */
    xbackground-color: rgb(240, 246, 255);

    /* 以下BOX3 BTN02 下揃えの設定 */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.box5 h2 {
    font-size: 1.25rem;
    font-weight: normal;
    padding: 0.5em;
    margin-bottom: 0.5em;
}
.box5 span {
    background-color: rgb(192, 17, 55);
    font-size: 0.8em;
    color: white;
    padding: 0 0.5em;
    border-radius: 15%;

}
.box5 img {
    width: 100%;
    margin: 0 auto;
}
.box5 table {
    width: 100%;/* -----------------------------------BOX3 TABLE WIDTH 100% */
}

.box5 div.btn02 {    /* 以下BOX3 BTN02 下揃えの設定。スクリーンサイズ関係なく作動の場合。サイズによって変えたいときは各メディクリで指定すること */
    margin-top:auto;
}


/* 画面幅520px未満の場合カードレイアウトを1カラムで配置 */
@media all and (max-width: 768px) {
    .content, .content2 {
        padding-left: 5%;
        padding-right: 5%;
    }
    .box2, .box3 {
        width: 100%;
    }
    x.box2:not(:nth-child(1)) {
        margin-top: 40px;
      }
      .box2:not(:last-child) {
        margin-bottom: 40px;
      }
      x.box2:last-child {
          margin-bottom: 40px;
      }
    x.box2:nth-child(1), .box3:nth-child(1) {
        xpadding-top: 40px;
    }

    /* child(2)以降のIMGにMERGIN-TOPを設置（IMGがトップになる時だけ使用するようになる ※これはテキストが上に来る時に困るため要改変。初期は80に設定。現在は機能していない*/
    .box3:not(:first-child) + img {
        margin-top: 100px;
      }
    .box3:not(:first-child) > h2,.box3:not(:first-child) > h3  {
        margin-top: 40px;
      }
}

/* 画面幅768px未満の場合カードレイアウトをXXカラムで配置 */
x@media all and (min-width: 769px) and (max-width: 768px) {
    .box3 {
        width: calc(96% / 2); /* 100%幅を2で割るという指定 */
    }

    .box3:not(:first-child) {
        margin-top: 40px;
      }

    .box3:last-child {
        margin-top: 40px;
    }
    .box3:not(:last-child) {
        margin-bottom: 40px;
    }
}

/* こっちに乗り換えるかも　*/
@media all and (max-width: 768px) {
    x.content {
        margin-right:15px;
        margin-left: 15px;
    }
    .content-wide > div {
        width: 100%;
        /* PADDING指定したい場合はここ　*/
        xpadding: 5% 12%;
    }
    .box1 img {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media all and (min-width: 769px) {
/* BOX3 BTN02 下揃えの指定 */
.box3 div.btn02 {
    margin-top:auto;
}
}
@media all and (max-width: 980px) {
    .content, .content2 {
            padding-left: 6%;
            padding-right: 6%;
        }
    h1.new::after, h2.new::after {
        content: "NEW";
        xfont-family:  "Font Awesome 5 Free";
        font-size: 1.2rem;
        font-weight: bold;
        color: #fff;
        background-color: rgb(192, 17, 55);
        border-radius: 10%;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        text-decoration: none;
        xposition: absolute;
        top: 10%;
        right: 10px;
        xmargin-top: -12px;
      }
    
}

@media all and (min-width: 1366px) {
    .img-90 {
        width: 90%;
    }
}