@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Allura&family=Noto+Sans+JP:wght@300;400;500;600;700;900&family=Noto+Serif+JP:wght@300;400;500;600;700;900&family=Lato:wght@300;400;500;600;700;900&display=swap');


@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


@-webkit-keyframes blink_and_move{
  0% {opacity:0;transform:translateY(0.6em);}
  100% {opacity:1;transform:translateY(0);}
}
@-moz-keyframes blink_and_move{
  0% {opacity:0;transform:translateY(0.6em);}
  100% {opacity:1;transform:translateY(0);}
}
@keyframes blink_and_move{
  0% {opacity:0;transform:translateY(0.6em);}
  100% {opacity:1;transform:translateY(0);}
}

@-webkit-keyframes jouge{
    0% {transform: translate(0,-0.2em);}
    10% {transform: translate(0,0);}
    20% {transform: translate(0,-0.2em);}
    100% {transform: translate(0,-0.2em);}
}
@-moz-keyframes jouge{
    0% {transform: translate(0,-0.2em);}
    10% {transform: translate(0,0);}
    20% {transform: translate(0,-0.2em);}
    100% {transform: translate(0,-0.2em);}
}
@keyframes jouge{
    0% {transform: translate(0,-0.2em);}
    10% {transform: translate(0,0);}
    20% {transform: translate(0,-0.2em);}
    100% {transform: translate(0,-0.2em);}
}

.noto{
    font-family: 'Noto Sans JP', "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.lato{
    font-family: "Helvetica Neue" , Helvetica , 'Lato', 'Noto Sans JP',"游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.yugo{
    font-family: "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.yumin{
    font-family: "Yu Mincho", "游明朝体", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.notoserif{
  font-family: 'Noto Serif JP', "Yu Mincho", "游明朝体", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.rage {
    font-family: 'Rage', 'Allura', cursive;
}


[class^="icon-"], [class*=" icon-"]{
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  

/*Reset CSS*/
html,body{
    width:100%;
    height:100%;
    -webkit-text-size-adjust: 100%;
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
    color:#000;
    font-style: inherit;
    /*font-weight: inherit;*/
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "palt";
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

*{
    font-family: inherit;
}

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,i,
dl, dt, dd, ol, ul, li, li li,
fieldset, form, label, legend,
header,footer,main,menu,aside,
table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
:focus {/* emember to define focus styles! */
  outline: 0;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  font-weight: inherit;
  text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}
blockquote, q {
  quotes: "" "";
}
a,
button,
label,
a::before,
button::before,
label::before{
    -webkit-transition-property:opacity,border,color,left,right,text-decoration,background,box-shadow,transform;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function:ease;
    -moz-transition-property:opacity,border,color,left,right,text-decoration,background,box-shadow,transform;
    -moz-transition-duration:0.2s;
    -moz-transition-timing-function:ease;
    -o-transition-property:opacity,border,color,left,right,text-decoration,background,box-shadow,transform;
    -o-transition-duration:0.2s;
    -o-transition-timing-function:ease;
    transition-property:opacity,border,color,left,right,text-decoration,background,box-shadow,transform;
    transition-duration:0.2s;
    transition-timing-function:ease;
}
img{
  image-rendering: -webkit-optimize-contrast;
}
a img {
  border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

.floatleft{
  float:left!important;
}
.floatright{
  float:right!important;
}
.textcenter,
.aligncenter{
  text-align:center!important;
}

.aligncenter{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.hide{
  display:none;
}

.alignright{
  text-align:right!important;
}
.alignleft{
  text-align:left!important;
}


.white{
  color:#fff!important;
}
.pink{
  color:#ca3761!important;
}
.red,
.accent{
  color:#c2224a!important;
}
.maincolor,
.blue{
  color:#1F559A!important;
}
.cyan{
  color:#6caee0!important;
}
.green{
  color:#77ad36!important;
}
.lime{
  color:#570!important;
}
.brown{
  color:#531!important;
}
.yellow{
  color:#ffdb5f!important;
}
.lightyellow{
  color:#ffff00!important;
}
.cream{
      color:#fbe8ae!important;
}
.silver{
  color:#78736d!important;
}
.lightsilver{
  color:#9a958f!important;
}
.gray{
  color:#777!important;
}
.darkgray{
  color:#4d4d4d!important;
}
.graybrown{
  color:#484537!important;
}
.gold{
  color:#93886C!important;
}
.coral{
  color:#e87156!important;
}
.redgray{
  color:#6D645B!important;
}
.lightgray{
  color:#eee!important;
}
.yellow_bk{
    background:linear-gradient(transparent 50%, #fffcbb 50%);
}
.hidden{
    visibility: hidden!important;
}
.visible{
    visibility: visible!important;
}
.black{
  font-weight:900!important;
}
.bold{
  font-weight:700!important;
}
.lighter{
  font-weight:300!important;
}
.lightbox{
  display:none;
}
.block{
  display:block;
}
.inline{
  display:inline;
}

.keikou{
    background: linear-gradient(transparent 60%, rgba(0, 141, 223, 0.2) 0%);
}

.ruby{
    display:inline-block;
    font-style:normal;
    font-size:0.5em;
    width:1em;
    height:1em;
    line-height:1em;
    position:relative;
    top:-1em;
}

.underline{
    text-decoration:underline;
}


.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */




.pc_inline{
    display:inline!important;
}
.pc_block{
    display:block!important;
}
.pc_inlineblock{
    display:inline-block!important;
}
.pc_listitem{
    display:list-item!important;
}
.pc_flex{
    display:flex!important;
}
.smp_inline{
    display:none!important;
}
.smp_block{
    display:none!important;
}
.smp_inlineblock{
    display:none!important;
}
.smp_listitem{
    display:none!important;
}
.smp_flex{
    display:none!important;
}

input[type="text"],
input[type="search"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 0;
    font: inherit;
    outline: none;
}

input:placeholder-shown {
    color: #bbb;
}
input::-webkit-input-placeholder {
    color: #bbb;
}
input:-moz-placeholder {
    color: #bbb; opacity: 1;
}
input::-moz-placeholder {
    color: #bbb; opacity: 1;
}
input:-ms-input-placeholder {
    color: #bbb;
}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

#sitemap{
  width:var(--main-pc-width);
  margin:0 auto;
}
#sitemap .inner{
  padding:4em;
  background:#fff;
  border-top-right-radius: 2.6em;
}
#sitemap h1{
  font-size:1.7em;
  font-weight:700;
  margin:0 0 2em;
}
#sitemap h2{
  font-size:1.1em;
  font-weight:700;
  margin:0 0 0.6em;
}
#sitemap .flex{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
  flex-wrap:wrap;
}
#sitemap .flex > section{
  width:30%;
}

#sitemap section > ul{
  margin-bottom:3em;
}
#sitemap section > ul > li:not(:last-child){
  margin-bottom:0.6em;
}
#sitemap section > ul > li > a{
  display:block;
  font-size:0.9em;
  padding:0.9em;
  background:#f7f7f7;
  position:relative;
  line-height:1.5em;
  padding-right:1em;
}
#sitemap section > ul > li > a::after{
  content:"\f0da";
  font-family:fontawesome;
  font-size:0.7em;
  width:1em;
  height:1em;
  display:inline-flex;
  justify-content: center;
  align-items:center;
  position:absolute;
  top:0;
  bottom:0;
  right:1em;
  margin:auto;
}
#sitemap section > ul > li > ul{
  font-size:0.8em;
  padding:0.5em;
}
#sitemap section > ul > li > ul > li a{
  display:block;
  border-bottom:1px dashed #ccc;
  padding:0.8em;
  position:relative;
}
#sitemap section > ul > li > ul > li a::before{
  content:"\f105";
  font-family:fontawesome;
  color:var(--main-green);
}




/*iPad, iPhone6s, iPhone6*/
@media screen and (max-width: 768px){
    .smp_inline{
        display:inline!important;
    }
    .smp_block{
        display:block!important;
    }
    .smp_inlineblock{
        display:inline-block!important;
    }
    .smp_listitem{
        display:list-item!important;
    }
    .smp_flex{
        display:flex!important;
    }
    .pc_inline{
        display:none!important;
    }
    .pc_block{
        display:none!important;
    }
    .pc_inlineblock{
        display:none!important;
    }
    .pc_listitem{
        display:none!important;
    }
    .pc_flex{
        display:none!important;
    }

}

/*カスタマイズスタート*/

:root {
  --main-black:#2E2C29;
  --main-blue:#16558D;
  --main-link:#64a2bf;
  --main-background:#E0F2F2;
  --main-accent:#C21D5B;
  --sub-orange:#f09b7d;
  --sub-blue:#73aad7;
  --sub-pink:#e696a0;
  --sub-purple:#b48caf;
  --sub-yellow:#c3a550;
  --main-pc-width: 1200px;
}

img{
  -webkit-transition-property:transform;
  -webkit-transition-duration:0.4s;
  -webkit-transition-timing-function:ease;
  -moz-transition-property:transform;
  -moz-transition-duration:0.4s;
  -moz-transition-timing-function:ease;
  -o-transition-property:transform;
  -o-transition-duration:0.4s;
  -o-transition-timing-function:ease;
  transition-property:transform;
  transition-duration:0.4s;
  transition-timing-function:ease;
  image-rendering: -webkit-optimize-contrast;
  height:auto;
  max-width:100%;
}

a{
  color:inherit;
  text-decoration:none;
}
a:hover{
  opacity:0.7;
}

html,body{
	font-size:17px;
	color:var(--main-black);
  font-weight:400;
	letter-spacing:0.05em;
}
body{
  background-image:url(./images/webinar/background.png);
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  /*background-attachment: fixed;*/
}
header{
  padding:1em;
}
header #header_logo{
  display:inline-block;
  width:12em;
}
main{
  width:1050px;
  max-width:94%;
  margin:0 auto;
  padding:5em 6em;
  box-sizing:border-box;
  background:rgba(255,255,255,0.8)
}
main #common{
  margin-bottom:3em;
  font-size:1.1em;
}
main #common h1{
  font-weight:600;
  text-align:center;
  margin-bottom:1.8em;
}
main #common h1 span{
  display:inline-block;
  margin-bottom:1.3em;
  font-size:1.05em;
  background:var(--main-blue);
  line-height:1.8em;
  border-radius:1.8em;
  padding:0 2em;
  color:#fff;
  letter-spacing:0.1em;
}
main #common h1 strong{
  display:block;
  font-size:2.1em;
}
main #common .desc{
  text-align:center;
  font-size:1em;
  line-height:1.8em;
  font-weight:500;
}

main #list .image{
  margin-bottom:1.4em;
  width:100%;
  height:0;
  padding-top:56.25%;
  position:relative;
  z-index:0;
}
main #list .image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  margin:auto;
}

main #list article{
  padding-bottom:4em;
  margin-bottom:4em;
  border-bottom:1px solid #ddd;
  position:relative;
}
main #list article:last-child{
  margin-bottom:0;
}
main #list article .date_icon{
  display:block;
  font-size:1.5em;
  font-weight:600;
  width:6em;
  box-sizing:border-box;
  line-height:1.3em;
  color:#fff;
  text-align:center;
  padding:0.5em;
  padding-right:1.2em;
  background-image:url(./images/webinar/date_back.svg);
  background-position:center center;
  background-size:contain;
  background-repeat:no-repeat;
  position:absolute;
  left:-6em;
  top:-0.5em;
  z-index:1;
}

main #list .title{
  font-size:1.4em;
  font-weight:700;
  margin-bottom:0.7em;
  line-height:1.6em;
}

main #list .date{
  font-size:1.2em;
  font-weight:700;
  margin-bottom:1.5em;
  background:#f0f5fa;
  color:#4779b3;
  padding:0.8em 1em;
  border:1px solid #dee8f1;
  border-radius:0.3em;
  line-height:1.6em;
}
main #list .date time{
  font-weight:600;
  font-size:0.94em;
  display:inline-block;
  line-height:1.6em;
}

main #list .desc{
  font-size:1em;
  line-height:1.7em;
  margin-bottom:2em;
}

main #list .button_wrapper{
  text-align:center;
}
main #list .button_wrapper .button{
  display:inline-block;
  background:#0861D5;
  color:#fff;
  line-height:3.4em;
  padding:0 3em;
  position:relative;
  font-weight:600;
  font-size:1.4em;
  border-radius:0.3em;
}
main #list .button_wrapper .button:not(.finish)::after{
  content:"\f105";
  font-family:fontawesome;
  display:inline-block;
  font-weight:200;
  font-size:0.8em;
  margin-left:0.6em;
  position:relative;
  top:-0.1em;
}

main #list .button_wrapper .button.finish{
  background:#b3b3b3;
  color:#464646;
  pointer-events: none;
}

#archive{
  padding:0 0 4em;
}
#archive h3{
  font-size:1.5em;
  text-align:center;
  font-weight:600;
  margin-bottom:2em;
}

#archive .archive_list{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:1.5em 3%;
}
#archive .archive_list li{
  width:20%;
  display:none;
}
#archive .archive_list li:nth-child(1),
#archive .archive_list li:nth-child(2),
#archive .archive_list li:nth-child(3),
#archive .archive_list li:nth-child(4){
  display:block;
}



#archive .archive_list li .image{
  margin-bottom:0.4em;
  width:100%;
  height:0;
  padding-top:56.25%;
  position:relative;
}
#archive .archive_list li .image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  margin:auto;
  z-index:0;
}
#archive .archive_list li .image::after{
  content:"\958b\50ac\7d42\4e86";
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(0,0,0,0.4);
  font-weight:600;
  font-size:1.4em;
  letter-spacing:0.1em;
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  margin:auto;
  z-index:1;
}
#archive .archive_list li .date{
  font-weight:600;
  margin-bottom:0.1em;
  line-height:1.6em;
}
#archive .archive_list li .title{
  line-height:1.6em;
  font-size:0.9em;
}

footer{
  background:var(--main-black);
  color:#fff;
  padding:4em 0 2em;
  text-align:center;
}
footer .footer_logo{
  width:12em;
  height:auto;
  margin:0 auto 1em;
  display:block;
}
footer address{
  line-height:1.7em;
  margin-bottom:1em;
}
footer .copyright{
  font-size:0.9em;
  opacity:0.5;
  font-weight:200;
}
footer .button_wrapper{
  text-align:center;
  margin-bottom:2.5em;
}
footer .button_wrapper .button{
  display:inline-block;
  background:#fff;
  color:var(--main-black);
  line-height:3.4em;
  padding:0 3em;
  position:relative;
  font-weight:600;
  font-size:1.1em;
  border-radius:0.3em;
}

.more_wrapper{
  text-align:center;
  padding-top:2em;
}
.more_wrapper a{
  color:var(--main-link);
}
.more_wrapper a::after{
  content:"\f107";
  font-family:fontawesome;
  display:inline-block;
  margin-left:0.3em;
  font-weight:200;
}

@media screen and (max-width: 1100px){
  #archive .archive_list li{
    width:30%;
  }
  #archive .archive_list li:nth-child(4){
    display:none;
  }
}

@media screen and (max-width: 900px){
  html,body{
    font-size:1.7vw;
  }
}

@media screen and (max-width: 768px){
  html,body{
    font-size:3.5vw;
  }
  :root {
    --main-pc-width: 100%;
  }
  header #header_logo{
    width:8em;
  }
  main {
    padding:3em 1em;
  }
  main #common{
    font-size:1em;
    margin-bottom:2em;
  }
  main #common h1 strong {
    font-size: 1.8em;
  }
  main #common .desc{
    text-align:left;
  }
  main #list .image{
    margin-bottom:0.8em;
  }
  main #list .date{
    margin-bottom:1em;
  }
  main #list article{
    margin-top:-1em;
  }
  main #list article .date_icon{
    position:relative;
    left:-4em;
    top:1em;
    background:#C21D5B;
    font-size: 1.2em;
    width:8em;
    box-sizing: border-box;
    line-height: 2em;
    height: 2em;
    padding:0 0 0 2em;
    border-radius:2em;
  }
  main #list article .date_icon br{
    display:none;
  }
  main #list .title{
    font-size:1.3em;
    line-height: 1.5em;
  }
  main #list .button_wrapper .button {
    display: block;
    line-height: 3.4em;
    padding:0;
    text-align:center;
    margin:0 auto;
    font-size: 1.3em;
    width:90%;
  }
  main #list article {
    padding-bottom: 2.5em;
    margin-bottom: 2.5em;
  }
  main #list .desc{
    font-size:1.1em;
  }
  
  #archive .archive_list {
    gap: 1.5em 5%;
  }
  #archive .archive_list li{
    width:40%;
  }
  #archive .archive_list li .date{
    font-size:0.9em;
    letter-spacing:0;
    margin-bottom:0.3em;
  }
  #archive .archive_list li .title{
    line-height:1.4em;
    font-size:0.9em;
  }
  #archive .archive_list li:nth-child(4){
    display:unset;
  }
  footer {
    padding:3em 0 2em;
  }
  footer .footer_logo {
    width: 11em;
  }
  footer address{
    font-size:0.9em;
  }
  footer .copyright{
    font-size:0.8em;
  }
}