html, body, div, span, h1, h2, h3, h4,img, p,footer, header,ul, li{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;} *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
ul { list-style: none;} html { font-size: 62.5%;} body { font-size: 1.5em; font-family: YakuHanJPs , "Arial", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-feature-settings: "pkna" 1; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh}main{flex: 1}
footer, header, main{ display: block; clear: both; width: 100%; line-height: 1.8}
header{ margin: 30px auto; overflow: hidden; text-align: center; font-size: .9em; font-weight: bold}
footer{ font-size: .9em; padding: 2em 0 0/*; background: #f2f2f2;*/}
.inner{ width: 90%; margin: 0 auto}
p{ margin-bottom: 1.5em}
.imge img{ width: 100%; padding: 0 0 20px}
article{ width: 100%; margin: 0 auto; padding: 50px 0}
.bg1{ background: #F7F7F7}
footer a:link{ text-decoration: none; color: #000}
main a:link{ color: #000}
a:hover{ opacity: .8}
h2{ font-size: 1.8em; margin: 0 auto 2.4em; position: relative; text-align: center; letter-spacing: .05em}
h2:before { content: ''; position: absolute; bottom: -10px; display: inline-block; width: 50px; height: 5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #468fc0}
h3{ font-size: 1.5em;margin: 0 0 1em; color: #016db7; text-align: center; font-weight: bold; line-height: 1.4}
h4{ font-size: 1.15em; margin-bottom: 1em; font-weight: bold}
header img{ padding-bottom: 5px}
ul.abl, .msg{ display: flex; display: -webkit-flex; width: 100%; gap: 5%; align-items: flex-start}
ul.abl{ margin: 60px 0}
ul.abl li, .msg1{ margin-bottom: 40px}
ul.abl span{ width: auto; display: block; margin: 0 auto 20px}
ul.abl strong{ display: block; text-align: center; margin-bottom: 5px}
.fa-circle{color: #468fc0}
.msg1{ text-align: center; margin: 0 auto}
.msg1 img{ width: auto}
.msg h3{ text-align: left}
ul.abl h4, .ebtn{ text-align: center}
.occ_check{ display: none}
.occ_label{ background: #468fc0; color: #fff; display: block; margin-bottom: 1px; padding: 15px; position: relative; font-size: 1.3em}
.occ_label:after{ box-sizing: border-box; font: var(--fa-font-solid); content: '\f067'; /*display: block;*/ padding: 15px 20px; position: absolute; right: 0; top: 5px}
.occ_cont{ display: block; height: 0; opacity: 0; padding: 0 15px; transition: .3s; visibility: hidden}
.occ_check:checked{ margin-bottom: 0}
.occ_check:checked + .occ_label:after{ font: var(--fa-font-solid); content: '\f068'}
.occ_check:checked + .occ_label + .occ_cont{ height: auto; opacity: 1; padding: 20px; visibility: visible; margin-bottom: 20px; background: /*#F7F7F7*/#fff}
.point{ border: 1px solid #c0dff4; padding: 10px; background: #eef8ff}
.occ_cont img{ width: 100%}
/*
.occ_cont p:first-letter{ color: #016db7; font-size: 320%; float: left; margin: 0 10px 0 0; line-height: 1}

*/
.ebtn a{ background: #1abc9c; color: #fff!important; border-radius: 8px; display: inline-block; padding: 1em 5em; font-size: 1.4em; margin-bottom: 7px; font-weight: bold; text-decoration: none}
@media screen and (min-width: 980px) {.inner{ width: 980px}}

/* video
------- */
/*
.videowrap{ margin: 0 auto 15px; width: 100%; text-align-last: center}
.videowrap iframe{ width: 650px; height: 366px;}
*/
.videowrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 30px}
.videowrap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%}
@media screen and (max-width: 769px) {
ul.abl{ flex-direction: column; margin: 60px 0}
.msg{ flex-direction: column-reverse}
.msg1{ width: 55%}
.msg1 img{ width: 100%}
ul.abl li:last-child{ margin-bottom: 0}
.occ_label{ font-size: 1.15em}
.ebtn a{ padding: 1em 2em; font-size: 1.2em}

}